"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const ui = require("@contember/ui");
const utilities = require("@contember/utilities");
const react = require("react");
const ConcealableField = react.memo(
  ({ buttonProps, concealTimeout = 2e3, renderConcealedValue, isExtended, children }) => {
    const [isEditing, setIsEditing] = react.useState(false);
    const [concealTimeoutId, setConcealTimeoutId] = react.useState(void 0);
    const inputRef = react.useRef();
    const onFocus = react.useCallback(() => {
      if (concealTimeoutId !== void 0) {
        clearTimeout(concealTimeoutId);
      }
    }, [concealTimeoutId]);
    const onBlur = react.useCallback(() => {
      setConcealTimeoutId(setTimeout(() => setIsEditing(false), concealTimeout));
    }, [concealTimeout]);
    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utilities.listClassName(["concealableField", ui.toViewClass("extended", isExtended), ui.toStateClass("editing", isEditing)]), children: [
      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "concealableField-field", children: children({
        onBlur,
        onFocus,
        inputRef
      }) }),
      /* @__PURE__ */ jsxRuntime.jsxs(
        "div",
        {
          className: "concealableField-cover",
          onClick: () => {
            setIsEditing(true);
          },
          onTransitionEnd: (e) => {
            if (isEditing && inputRef.current && e.currentTarget === e.target) {
              inputRef.current.focus();
            }
          },
          children: [
            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "concealableField-value", children: renderConcealedValue() }),
            /* @__PURE__ */ jsxRuntime.jsx(
              ui.Button,
              {
                size: "small",
                distinction: "seamless",
                children: "Edit",
                ...buttonProps,
                className: "concealableField-button"
              }
            )
          ]
        },
        "concealableField-cover"
      )
    ] });
  }
);
ConcealableField.displayName = "ConcealableField";
exports.ConcealableField = ConcealableField;
//# sourceMappingURL=ConcealableField.cjs.map
