"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxDevRuntime = require("react/jsx-dev-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__ */ jsxDevRuntime.jsxDEV("div", { className: utilities.listClassName(["concealableField", ui.toViewClass("extended", isExtended), ui.toStateClass("editing", isEditing)]), children: [
      /* @__PURE__ */ jsxDevRuntime.jsxDEV("div", { className: "concealableField-field", children: children({
        onBlur,
        onFocus,
        inputRef
      }) }, void 0, false, {
        fileName: "/__w/interface/interface/packages/admin/src/components/bindingFacade/ui/ConcealableField.tsx",
        lineNumber: 39,
        columnNumber: 5
      }, void 0),
      /* @__PURE__ */ jsxDevRuntime.jsxDEV(
        "div",
        {
          className: "concealableField-cover",
          onClick: () => {
            setIsEditing(true);
          },
          onTransitionEnd: (e) => {
            if (isEditing && inputRef.current && e.currentTarget === e.target) {
              inputRef.current.focus();
            }
          },
          children: [
            /* @__PURE__ */ jsxDevRuntime.jsxDEV("div", { className: "concealableField-value", children: renderConcealedValue() }, void 0, false, {
              fileName: "/__w/interface/interface/packages/admin/src/components/bindingFacade/ui/ConcealableField.tsx",
              lineNumber: 58,
              columnNumber: 6
            }, void 0),
            /* @__PURE__ */ jsxDevRuntime.jsxDEV(
              ui.Button,
              {
                size: "small",
                distinction: "seamless",
                children: "Edit",
                ...buttonProps,
                className: "concealableField-button"
              },
              void 0,
              false,
              {
                fileName: "/__w/interface/interface/packages/admin/src/components/bindingFacade/ui/ConcealableField.tsx",
                lineNumber: 59,
                columnNumber: 6
              },
              void 0
            )
          ]
        },
        "concealableField-cover",
        true,
        {
          fileName: "/__w/interface/interface/packages/admin/src/components/bindingFacade/ui/ConcealableField.tsx",
          lineNumber: 46,
          columnNumber: 5
        },
        void 0
      )
    ] }, void 0, true, {
      fileName: "/__w/interface/interface/packages/admin/src/components/bindingFacade/ui/ConcealableField.tsx",
      lineNumber: 38,
      columnNumber: 4
    }, void 0);
  }
);
ConcealableField.displayName = "ConcealableField";
exports.ConcealableField = ConcealableField;
//# sourceMappingURL=ConcealableField.cjs.map
