import { s as __toESM } from "./chunk-BNovOVIE.js";
import { t as require_react } from "./react-DA-nE2FX.js";
import { t as require_react_dom } from "./react-dom-BWRJ_g_k.js";
import { _ as isEditableGridCell, i as makeCSSStyle, n as ThemeContext, t as ClickOutsideContainer, v as isInnerOnlyCell, y as isObjectEditorCallbackResult } from "./click-outside-container-BDd67_1U.js";
import { t as styled_default } from "./dist-usPCDYx8.js";
var import_react_dom = require_react_dom(), import_react = /* @__PURE__ */ __toESM(require_react(), 1), _exp2 = () => (n) => n.targetX, _exp3 = () => (n) => n.targetY, _exp4 = () => (n) => n.targetWidth, _exp5 = () => (n) => n.targetHeight, _exp6 = () => (n) => n.targetY + 10, _exp7 = () => (n) => Math.max(0, (n.targetHeight - 28) / 2);
const DataGridOverlayEditorStyle = /* @__PURE__ */ styled_default("div")({
  name: "DataGridOverlayEditorStyle",
  class: "gdg-d19meir1",
  propsAsIs: false,
  vars: {
    "d19meir1-0": [_exp3(), "px"],
    "d19meir1-1": [_exp2(), "px"],
    "d19meir1-2": [_exp4(), "px"],
    "d19meir1-3": [_exp5(), "px"],
    "d19meir1-4": [_exp6(), "px"],
    "d19meir1-5": [_exp7(), "px"]
  }
});
function useRefState() {
  let [n, c] = import_react.useState();
  return [n ?? void 0, c];
}
function useStayOnScreen() {
  let [n, c] = useRefState(), [l, u] = import_react.useState(0), [d, f] = import_react.useState(true);
  return import_react.useLayoutEffect(() => {
    if (n === void 0 || !("IntersectionObserver" in window)) return;
    let c2 = new IntersectionObserver((n2) => {
      n2.length !== 0 && f(n2[0].isIntersecting);
    }, { threshold: 1 });
    return c2.observe(n), () => c2.disconnect();
  }, [n]), import_react.useEffect(() => {
    if (d || n === void 0) return;
    let c2, l2 = () => {
      let { right: d2 } = n.getBoundingClientRect();
      u((n2) => Math.min(n2 + window.innerWidth - d2 - 10, 0)), c2 = requestAnimationFrame(l2);
    };
    return c2 = requestAnimationFrame(l2), () => {
      c2 !== void 0 && cancelAnimationFrame(c2);
    };
  }, [n, d]), {
    ref: c,
    style: import_react.useMemo(() => ({ transform: `translateX(${l}px)` }), [l])
  };
}
var data_grid_overlay_editor_default = (n) => {
  let { target: c, content: l, onFinishEditing: p, forceEditMode: m, initialValue: h, imageEditorOverride: g, markdownDivCreateNode: _, highlight: v, className: y, theme: b, id: x, cell: S, bloom: C, validateCell: w, getCellRenderer: T, provideEditor: E, isOutsideClick: D, customEventTarget: O } = n, [k, A] = import_react.useState(m ? l : void 0), j = import_react.useRef(k ?? l);
  j.current = k ?? l;
  let [M, N] = import_react.useState(() => w === void 0 ? true : !(isEditableGridCell(l) && (w == null ? void 0 : w(S, l, j.current)) === false)), P = import_react.useCallback((n2, c2) => {
    p(M ? n2 : void 0, c2);
  }, [M, p]), F = import_react.useCallback((n2) => {
    if (w !== void 0 && n2 !== void 0 && isEditableGridCell(n2)) {
      let c2 = w(S, n2, j.current);
      c2 === false ? N(false) : (typeof c2 == "object" && (n2 = c2), N(true));
    }
    A(n2);
  }, [S, w]), I = import_react.useRef(false), L = import_react.useRef(void 0), R = import_react.useCallback(() => {
    P(k, [0, 0]), I.current = true;
  }, [k, P]), z = import_react.useCallback((n2, c2) => {
    P(n2, c2 ?? L.current ?? [0, 0]), I.current = true;
  }, [P]), B = import_react.useCallback(async (n2) => {
    let c2 = false;
    n2.key === "Escape" ? (n2.stopPropagation(), n2.preventDefault(), L.current = [0, 0]) : n2.key === "Enter" && !n2.shiftKey ? (n2.stopPropagation(), n2.preventDefault(), L.current = [0, 1], c2 = true) : n2.key === "Tab" && (n2.stopPropagation(), n2.preventDefault(), L.current = [n2.shiftKey ? -1 : 1, 0], c2 = true), window.setTimeout(() => {
      !I.current && L.current !== void 0 && (P(c2 ? k : void 0, L.current), I.current = true);
    }, 0);
  }, [P, k]), V = k ?? l, [H, U] = import_react.useMemo(() => {
    var _a, _b;
    if (isInnerOnlyCell(l)) return [];
    let n2 = E == null ? void 0 : E(l);
    return n2 === void 0 ? [(_b = (_a = T(l)) == null ? void 0 : _a.provideEditor) == null ? void 0 : _b.call(_a, l), false] : [n2, false];
  }, [
    l,
    T,
    E
  ]), { ref: W, style: G } = useStayOnScreen(), K = true, q, J = true, Y;
  if (H !== void 0) {
    K = H.disablePadding !== true, J = H.disableStyling !== true;
    let n2 = isObjectEditorCallbackResult(H);
    n2 && (Y = H.styleOverride);
    let l2 = n2 ? H.editor : H;
    q = import_react.createElement(l2, {
      isHighlighted: v,
      onChange: F,
      value: V,
      initialValue: h,
      onFinishedEditing: z,
      validatedSelection: isEditableGridCell(V) ? V.selectionRange : void 0,
      forceEditMode: m,
      target: c,
      imageEditorOverride: g,
      markdownDivCreateNode: _,
      isValid: M,
      theme: b
    });
  }
  Y = {
    ...Y,
    ...G
  };
  let X = document.getElementById("portal");
  if (X === null) return console.error('Cannot open Data Grid overlay editor, because portal not found.  Please add `<div id="portal" />` as the last child of your `<body>`.'), null;
  let Z = J ? "gdg-style" : "gdg-unstyle";
  M || (Z += " gdg-invalid"), K && (Z += " gdg-pad");
  let Q = (C == null ? void 0 : C[0]) ?? 1, $ = (C == null ? void 0 : C[1]) ?? 1;
  return (0, import_react_dom.createPortal)(import_react.createElement(ThemeContext.Provider, { value: b }, import_react.createElement(ClickOutsideContainer, {
    style: makeCSSStyle(b),
    className: y,
    onClickOutside: R,
    isOutsideClick: D,
    customEventTarget: O
  }, import_react.createElement(DataGridOverlayEditorStyle, {
    ref: W,
    id: x,
    className: Z,
    style: Y,
    as: U === true ? "label" : void 0,
    targetX: c.x - Q,
    targetY: c.y - $,
    targetWidth: c.width + Q * 2,
    targetHeight: c.height + $ * 2
  }, import_react.createElement("div", {
    className: "gdg-clip-region",
    onKeyDown: B
  }, q)))), X);
};
export {
  data_grid_overlay_editor_default as default
};
