@smwb/ui-react 2.6.3 → 2.8.0

package/dist/headless/components/dataDisplay/expansionPanel/expansionPanel.js

@@ -1,173 +1,218 @@
-import { jsxs as t, jsx as n, Fragment as C } from "react/jsx-runtime";
-import { forwardRef as T, useState as I, useEffect as R } from "react";
-import K from "clsx";
-import { createPortal as U } from "react-dom";
-import { Button as p } from "../../inputs/button/button.js";
-import { Icon as u } from "../../base/icon/icon.js";
-import { useControllableState as V } from "../../../hooks/useControllableState.js";
-import { useSafeLayoutEffect as q } from "../../../hooks/useSafeLayoutEffect.js";
-const G = {
+import { jsxs as d, jsx as t, Fragment as V } from "react/jsx-runtime";
+import { forwardRef as ae, useState as ce, useRef as f, useEffect as F } from "react";
+import ie from "clsx";
+import { createPortal as ue } from "react-dom";
+import { Button as w } from "../../inputs/button/button.js";
+import { Icon as C } from "../../base/icon/icon.js";
+import { useControllableState as de } from "../../../hooks/useControllableState.js";
+import { FOCUSABLE as J } from "../../../hooks/useFocusTrap.js";
+import { useForkRef as fe } from "../../../hooks/useForkRef.js";
+import { useSafeLayoutEffect as E } from "../../../hooks/useSafeLayoutEffect.js";
+import { hasOverlayLayerAbove as j } from "../../../utils/overlayLayer.js";
+const me = {
   expandRow: "Expand to full row",
   collapseRow: "Collapse to grid",
   expandFullscreen: "Expand to fullscreen",
   closeFullscreen: "Close fullscreen",
   placeholder: "Panel is open in fullscreen",
   placeholderClose: "Close"
-}, N = (o, i) => typeof o == "function" ? o(i) : o, H = (o, i) => typeof o == "function" ? o(i) : o, ee = T(function({
-  className: i,
-  header: m,
-  mode: g,
-  defaultMode: k = "tile",
-  onModeChange: E,
-  disableExpand: f = !1,
-  noControls: z = !1,
-  renderControls: w,
-  closeOnOutsideClick: L = !0,
-  closeOnEsc: x = !0,
-  labels: P,
-  children: b
-}, S) {
-  const [B, s] = V({
-    value: g,
-    defaultValue: k,
-    onChange: E
-  }), l = { ...G, ...P }, [_, D] = I();
-  q(() => {
-    D(document.body);
+}, q = (l, o) => typeof l == "function" ? l(o) : l, pe = (l, o) => typeof l == "function" ? l(o) : l, G = (l) => {
+  for (const o of l)
+    if (!(!(o instanceof HTMLElement) || !o.isConnected) && (o.focus(), o.getRootNode().activeElement === o))
+      return;
+}, H = (l) => Array.from(l.querySelectorAll(J)).filter(
+  // Older browsers (and jsdom) lack checkVisibility: count every match there.
+  (o) => typeof o.checkVisibility != "function" || o.checkVisibility({ visibilityProperty: !0 })
+), Ne = ae(function({
+  className: o,
+  header: N,
+  mode: Q,
+  defaultMode: W = "tile",
+  onModeChange: X,
+  disableExpand: g = !1,
+  noControls: Y = !1,
+  renderControls: k,
+  closeOnOutsideClick: Z = !0,
+  closeOnEsc: L = !0,
+  labels: $,
+  children: P
+}, ee) {
+  const [ne, i] = de({
+    value: Q,
+    defaultValue: W,
+    onChange: X
+  }), s = { ...me, ...$ }, [v, oe] = ce(), p = f(null), D = f(null), te = fe(ee, D), S = f(null), A = f(null), K = f(null), x = f(null), z = f(!1);
+  E(() => {
+    oe(document.body);
   }, []);
-  const r = f ? "tile" : B, a = r === "row", c = r === "fullscreen", v = () => s((e) => e === "row" ? "tile" : "row"), h = () => s("fullscreen"), y = () => s("tile"), j = (e) => ({
-    mode: r,
+  const m = g ? "tile" : ne, u = m === "row", a = m === "fullscreen", B = () => i((e) => e === "row" ? "tile" : "row"), T = () => i("fullscreen"), I = () => i("tile"), le = (e) => ({
+    mode: m,
     isFullscreen: e,
-    isFullRow: e ? !1 : a,
-    setMode: s,
-    toggleRow: v,
-    openFullscreen: h,
-    closeFullscreen: y,
-    labels: l
-  }), A = (e) => e ? /* @__PURE__ */ n(
-    p,
+    isFullRow: e ? !1 : u,
+    setMode: i,
+    toggleRow: B,
+    openFullscreen: T,
+    closeFullscreen: I,
+    labels: s
+  }), se = (e) => e ? /* @__PURE__ */ t(
+    w,
     {
+      ref: A,
       type: "button",
       variant: "outlined",
       size: "small",
-      "aria-label": l.closeFullscreen,
-      title: l.closeFullscreen,
-      onClick: y,
+      "aria-label": s.closeFullscreen,
+      title: s.closeFullscreen,
+      onClick: I,
       "data-testid": "expansion-panel-close",
-      icon: /* @__PURE__ */ n(u, { name: "close", size: 18 })
+      icon: /* @__PURE__ */ t(C, { name: "close", size: 18 })
     }
-  ) : /* @__PURE__ */ t(C, { children: [
-    /* @__PURE__ */ n(
-      p,
+  ) : /* @__PURE__ */ d(V, { children: [
+    /* @__PURE__ */ t(
+      w,
       {
         type: "button",
         variant: "outlined",
         size: "small",
-        "aria-pressed": a,
-        "aria-label": a ? l.collapseRow : l.expandRow,
-        title: a ? l.collapseRow : l.expandRow,
-        onClick: v,
+        "aria-pressed": u,
+        "aria-label": u ? s.collapseRow : s.expandRow,
+        title: u ? s.collapseRow : s.expandRow,
+        onClick: B,
         "data-testid": "expansion-panel-row",
-        icon: /* @__PURE__ */ n(u, { name: a ? "grid_view" : "table_rows", size: 18 })
+        icon: /* @__PURE__ */ t(C, { name: u ? "grid_view" : "table_rows", size: 18 })
       }
     ),
-    /* @__PURE__ */ n(
-      p,
+    /* @__PURE__ */ t(
+      w,
       {
+        ref: S,
         type: "button",
         variant: "outlined",
         size: "small",
-        "aria-label": l.expandFullscreen,
-        title: l.expandFullscreen,
-        onClick: h,
+        "aria-label": s.expandFullscreen,
+        title: s.expandFullscreen,
+        onClick: T,
         "data-testid": "expansion-panel-fullscreen",
-        icon: /* @__PURE__ */ n(u, { name: "open_in_full", size: 18 })
+        icon: /* @__PURE__ */ t(C, { name: "open_in_full", size: 18 })
       }
     )
-  ] }), F = (e) => {
-    if (f || z)
+  ] }), M = (e) => {
+    if (g || Y)
       return null;
-    const d = w ? H(w, j(e)) : A(e);
-    return d ? /* @__PURE__ */ n("div", { className: "smwb-expansion-panel__controls", children: d }) : null;
+    const n = k ? pe(k, le(e)) : se(e);
+    return n ? /* @__PURE__ */ t("div", { className: "smwb-expansion-panel__controls", children: n }) : null;
   };
-  R(() => {
-    if (!c)
+  F(() => {
+    if (!a)
       return;
     const e = document.body.style.overflow;
     return document.body.style.overflow = "hidden", () => {
       document.body.style.overflow = e;
     };
-  }, [c]), R(() => {
-    if (!c || !x)
+  }, [a]), F(() => {
+    if (!a || !L)
+      return;
+    const e = (n) => {
+      n.key === "Escape" && !n.defaultPrevented && !j(p.current) && (n.preventDefault(), i("tile"));
+    };
+    return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+  }, [a, L, i]), E(() => {
+    var n, r;
+    const e = document.activeElement;
+    a ? (K.current = e === document.body ? null : e, x.current = null) : z.current && (!e || e === document.body) && G([
+      x.current,
+      K.current,
+      S.current,
+      ...Array.from((r = (n = D.current) == null ? void 0 : n.querySelectorAll(J)) != null ? r : [])
+    ]), z.current = a;
+  }, [a]);
+  const y = a && v !== void 0;
+  E(() => {
+    const e = p.current, n = document.activeElement;
+    !y || !e || n && n !== document.body || G([A.current, ...H(e), e]);
+  }, [y]), F(() => {
+    if (!y)
       return;
-    const e = (d) => {
-      d.key === "Escape" && s("tile");
+    const e = (n) => {
+      var O, U;
+      const r = p.current;
+      if (n.key !== "Tab" || n.defaultPrevented || n.altKey || n.ctrlKey || n.metaKey || !r)
+        return;
+      const h = H(r), _ = (O = h[0]) != null ? O : r, R = (U = h[h.length - 1]) != null ? U : r, c = document.activeElement;
+      let b;
+      c && c !== document.body && r.contains(c) ? (n.shiftKey ? c === _ || c === r : c === R) && (b = n.shiftKey ? R : _) : !j(r) && (!c || c === document.body || r.compareDocumentPosition(c) & Node.DOCUMENT_POSITION_PRECEDING) && (b = n.shiftKey ? R : _), b && (n.preventDefault(), b.focus());
     };
     return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-  }, [c, x, s]);
-  const M = /* @__PURE__ */ t(
+  }, [y]);
+  const re = /* @__PURE__ */ d(
     "div",
     {
-      ref: S,
-      className: K("smwb-expansion-panel", { "smwb-expansion-panel_row": a }, i),
+      ref: te,
+      className: ie("smwb-expansion-panel", { "smwb-expansion-panel_row": u }, o),
       "data-testid": "expansion-panel",
       children: [
-        /* @__PURE__ */ t("div", { className: "smwb-expansion-panel__head", children: [
-          /* @__PURE__ */ n("div", { className: "smwb-expansion-panel__header", children: m }),
-          F(!1)
+        /* @__PURE__ */ d("div", { className: "smwb-expansion-panel__head", children: [
+          /* @__PURE__ */ t("div", { className: "smwb-expansion-panel__header", children: N }),
+          M(!1)
         ] }),
-        /* @__PURE__ */ n("div", { className: "smwb-expansion-panel__body", children: N(b, {
-          mode: r,
+        /* @__PURE__ */ t("div", { className: "smwb-expansion-panel__body", children: q(P, {
+          mode: m,
           isFullscreen: !1,
-          isFullRow: a
+          isFullRow: u
         }) })
       ]
     }
   );
-  return !c || !_ ? M : /* @__PURE__ */ t(C, { children: [
-    /* @__PURE__ */ t("div", { className: "smwb-expansion-panel__placeholder", "data-testid": "expansion-panel-placeholder", children: [
-      /* @__PURE__ */ n("span", { children: l.placeholder }),
-      /* @__PURE__ */ n(
-        p,
+  return !a || !v ? re : /* @__PURE__ */ d(V, { children: [
+    /* @__PURE__ */ d("div", { className: "smwb-expansion-panel__placeholder", "data-testid": "expansion-panel-placeholder", children: [
+      /* @__PURE__ */ t("span", { children: s.placeholder }),
+      /* @__PURE__ */ t(
+        w,
         {
           type: "button",
           variant: "outlined",
           size: "small",
-          label: l.placeholderClose,
-          onClick: () => s("tile")
+          label: s.placeholderClose,
+          onClick: () => i("tile")
         }
       )
     ] }),
-    U(
-      /* @__PURE__ */ n(
+    ue(
+      /* @__PURE__ */ t(
         "div",
         {
+          ref: p,
           className: "smwb-expansion-panel__overlay smwb-dark",
+          "data-smwb-overlay-layer": "",
           role: "dialog",
           "aria-modal": "true",
+          tabIndex: -1,
           "data-testid": "expansion-panel-overlay",
-          onClick: L ? (e) => {
-            e.target === e.currentTarget && s("tile");
+          onFocus: (e) => {
+            x.current = e.target;
+          },
+          onClick: Z ? (e) => {
+            e.target === e.currentTarget && i("tile");
           } : void 0,
-          children: /* @__PURE__ */ t("div", { className: "smwb-expansion-panel__dialog", children: [
-            /* @__PURE__ */ t("div", { className: "smwb-expansion-panel__head", children: [
-              /* @__PURE__ */ n("div", { className: "smwb-expansion-panel__header", children: m }),
-              F(!0)
+          children: /* @__PURE__ */ d("div", { className: "smwb-expansion-panel__dialog", children: [
+            /* @__PURE__ */ d("div", { className: "smwb-expansion-panel__head", children: [
+              /* @__PURE__ */ t("div", { className: "smwb-expansion-panel__header", children: N }),
+              M(!0)
             ] }),
-            /* @__PURE__ */ n("div", { className: "smwb-expansion-panel__body smwb-expansion-panel__body_fullscreen", children: N(b, {
-              mode: r,
+            /* @__PURE__ */ t("div", { className: "smwb-expansion-panel__body smwb-expansion-panel__body_fullscreen", children: q(P, {
+              mode: m,
               isFullscreen: !0,
               isFullRow: !1
             }) })
           ] })
         }
       ),
-      _
+      v
     )
   ] });
 });
 export {
-  ee as ExpansionPanel,
-  ee as default
+  Ne as ExpansionPanel,
+  Ne as default
 };
 //# sourceMappingURL=expansionPanel.js.map

package/dist/headless/components/dataDisplay/expansionPanel/expansionPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"expansionPanel.js","sources":["../../../../../src/components/dataDisplay/expansionPanel/expansionPanel.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode, useEffect, useState } from \"react\";\nimport cn from \"clsx\";\nimport { createPortal } from \"react-dom\";\nimport Button from \"../../inputs/button/button\";\nimport Icon from \"../../base/icon/icon\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\n\nexport type ExpansionMode = \"tile\" | \"row\" | \"fullscreen\";\n\nexport interface ExpansionPanelLabels {\n  /** Tooltip/aria for the control that expands a tile to a full grid row. */\n  expandRow?: string;\n  /** Tooltip/aria for the control that collapses a full row back to a tile. */\n  collapseRow?: string;\n  /** Tooltip/aria for the control that opens the panel fullscreen. */\n  expandFullscreen?: string;\n  /** Tooltip/aria for the control that closes fullscreen. */\n  closeFullscreen?: string;\n  /** Text shown in the original slot while the panel is fullscreen. */\n  placeholder?: string;\n  /** Label of the button in the placeholder that closes fullscreen. */\n  placeholderClose?: string;\n}\n\nexport interface ExpansionPanelRenderContext {\n  mode: ExpansionMode;\n  isFullscreen: boolean;\n  isFullRow: boolean;\n}\n\nexport interface ExpansionPanelControlsContext extends ExpansionPanelRenderContext {\n  setMode: (next: ExpansionMode | ((current: ExpansionMode) => ExpansionMode)) => void;\n  toggleRow: () => void;\n  openFullscreen: () => void;\n  closeFullscreen: () => void;\n  labels: Required<ExpansionPanelLabels>;\n}\n\ntype ExpansionPanelChildren = ReactNode | ((ctx: ExpansionPanelRenderContext) => ReactNode);\ntype ExpansionPanelControls = ReactNode | ((ctx: ExpansionPanelControlsContext) => ReactNode);\n\nexport interface ExpansionPanelProps {\n  className?: string;\n  /** Content of the panel header (left side of the control bar). */\n  header?: ReactNode;\n  /** Controlled layout mode. */\n  mode?: ExpansionMode;\n  /** Initial mode for the uncontrolled component. */\n  defaultMode?: ExpansionMode;\n  /** Fired with the next mode whenever it changes. */\n  onModeChange?: (mode: ExpansionMode) => void;\n  /** Render the panel as a plain card without row/fullscreen controls. */\n  disableExpand?: boolean;\n  /** Hide the built-in control bar (consumer drives `mode` itself). */\n  noControls?: boolean;\n  /** Replace the built-in row/fullscreen controls with a custom node or render prop. */\n  renderControls?: ExpansionPanelControls;\n  /** Close fullscreen when the backdrop is clicked. Default: true. */\n  closeOnOutsideClick?: boolean;\n  /** Close fullscreen when Escape is pressed. Default: true. */\n  closeOnEsc?: boolean;\n  /** Accessible labels / tooltips for the built-in controls. */\n  labels?: ExpansionPanelLabels;\n  children?: ExpansionPanelChildren;\n}\n\nconst DEFAULT_LABELS: Required<ExpansionPanelLabels> = {\n  expandRow: \"Expand to full row\",\n  collapseRow: \"Collapse to grid\",\n  expandFullscreen: \"Expand to fullscreen\",\n  closeFullscreen: \"Close fullscreen\",\n  placeholder: \"Panel is open in fullscreen\",\n  placeholderClose: \"Close\",\n};\n\nconst resolveChildren = (children: ExpansionPanelChildren, ctx: ExpansionPanelRenderContext): ReactNode =>\n  typeof children === \"function\" ? children(ctx) : children;\n\nconst resolveControls = (controls: ExpansionPanelControls, ctx: ExpansionPanelControlsContext): ReactNode =>\n  typeof controls === \"function\" ? controls(ctx) : controls;\n\nexport const ExpansionPanel = forwardRef<HTMLDivElement, ExpansionPanelProps>(function ExpansionPanel(\n  {\n    className,\n    header,\n    mode: modeProp,\n    defaultMode = \"tile\",\n    onModeChange,\n    disableExpand = false,\n    noControls = false,\n    renderControls,\n    closeOnOutsideClick = true,\n    closeOnEsc = true,\n    labels,\n    children,\n  },\n  ref\n) {\n  const [mode, setMode] = useControllableState<ExpansionMode>({\n    value: modeProp,\n    defaultValue: defaultMode,\n    onChange: onModeChange,\n  });\n\n  const l = { ...DEFAULT_LABELS, ...labels };\n  const [domRoot, setDomRoot] = useState<HTMLElement>();\n\n  useSafeLayoutEffect(() => {\n    setDomRoot(document.body);\n  }, []);\n\n  // `disableExpand` renders a plain card regardless of the requested mode,\n  // without mutating state — works in both controlled and uncontrolled use.\n  const effectiveMode: ExpansionMode = disableExpand ? \"tile\" : mode;\n  const isFullRow = effectiveMode === \"row\";\n  const isFullscreen = effectiveMode === \"fullscreen\";\n\n  const toggleRow = () => setMode((current) => (current === \"row\" ? \"tile\" : \"row\"));\n  const openFullscreen = () => setMode(\"fullscreen\");\n  const closeFullscreen = () => setMode(\"tile\");\n\n  const controlsContext = (overlay: boolean): ExpansionPanelControlsContext => ({\n    mode: effectiveMode,\n    isFullscreen: overlay,\n    isFullRow: overlay ? false : isFullRow,\n    setMode,\n    toggleRow,\n    openFullscreen,\n    closeFullscreen,\n    labels: l,\n  });\n\n  const defaultControls = (overlay: boolean) => {\n    if (overlay) {\n      return (\n        <Button\n          type=\"button\"\n          variant=\"outlined\"\n          size=\"small\"\n          aria-label={l.closeFullscreen}\n          title={l.closeFullscreen}\n          onClick={closeFullscreen}\n          data-testid=\"expansion-panel-close\"\n          icon={<Icon name=\"close\" size={18} />}\n        />\n      );\n    }\n\n    return (\n      <>\n        <Button\n          type=\"button\"\n          variant=\"outlined\"\n          size=\"small\"\n          aria-pressed={isFullRow}\n          aria-label={isFullRow ? l.collapseRow : l.expandRow}\n          title={isFullRow ? l.collapseRow : l.expandRow}\n          onClick={toggleRow}\n          data-testid=\"expansion-panel-row\"\n          icon={<Icon name={isFullRow ? \"grid_view\" : \"table_rows\"} size={18} />}\n        />\n        <Button\n          type=\"button\"\n          variant=\"outlined\"\n          size=\"small\"\n          aria-label={l.expandFullscreen}\n          title={l.expandFullscreen}\n          onClick={openFullscreen}\n          data-testid=\"expansion-panel-fullscreen\"\n          icon={<Icon name=\"open_in_full\" size={18} />}\n        />\n      </>\n    );\n  };\n\n  const renderControlBar = (overlay: boolean) => {\n    if (disableExpand || noControls) {\n      return null;\n    }\n\n    const content = renderControls\n      ? resolveControls(renderControls, controlsContext(overlay))\n      : defaultControls(overlay);\n\n    if (!content) {\n      return null;\n    }\n\n    return <div className=\"smwb-expansion-panel__controls\">{content}</div>;\n  };\n\n  useEffect(() => {\n    if (!isFullscreen) {\n      return;\n    }\n    const prev = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.body.style.overflow = prev;\n    };\n  }, [isFullscreen]);\n\n  useEffect(() => {\n    if (!isFullscreen || !closeOnEsc) {\n      return;\n    }\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        setMode(\"tile\");\n      }\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => document.removeEventListener(\"keydown\", onKeyDown);\n  }, [isFullscreen, closeOnEsc, setMode]);\n\n  const card = (\n    <div\n      ref={ref}\n      className={cn(\"smwb-expansion-panel\", { \"smwb-expansion-panel_row\": isFullRow }, className)}\n      data-testid=\"expansion-panel\"\n    >\n      <div className=\"smwb-expansion-panel__head\">\n        <div className=\"smwb-expansion-panel__header\">{header}</div>\n        {renderControlBar(false)}\n      </div>\n      <div className=\"smwb-expansion-panel__body\">\n        {resolveChildren(children, {\n          mode: effectiveMode,\n          isFullscreen: false,\n          isFullRow,\n        })}\n      </div>\n    </div>\n  );\n\n  if (!isFullscreen || !domRoot) {\n    return card;\n  }\n\n  return (\n    <>\n      <div className=\"smwb-expansion-panel__placeholder\" data-testid=\"expansion-panel-placeholder\">\n        <span>{l.placeholder}</span>\n        <Button\n          type=\"button\"\n          variant=\"outlined\"\n          size=\"small\"\n          label={l.placeholderClose}\n          onClick={() => setMode(\"tile\")}\n        />\n      </div>\n      {createPortal(\n        <div\n          className=\"smwb-expansion-panel__overlay smwb-dark\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          data-testid=\"expansion-panel-overlay\"\n          onClick={\n            closeOnOutsideClick\n              ? (e) => {\n                  if (e.target === e.currentTarget) {\n                    setMode(\"tile\");\n                  }\n                }\n              : undefined\n          }\n        >\n          <div className=\"smwb-expansion-panel__dialog\">\n            <div className=\"smwb-expansion-panel__head\">\n              <div className=\"smwb-expansion-panel__header\">{header}</div>\n              {renderControlBar(true)}\n            </div>\n            <div className=\"smwb-expansion-panel__body smwb-expansion-panel__body_fullscreen\">\n              {resolveChildren(children, {\n                mode: effectiveMode,\n                isFullscreen: true,\n                isFullRow: false,\n              })}\n            </div>\n          </div>\n        </div>,\n        domRoot\n      )}\n    </>\n  );\n});\n\nexport default ExpansionPanel;\n"],"names":["DEFAULT_LABELS","resolveChildren","children","ctx","resolveControls","controls","ExpansionPanel","forwardRef","className","header","modeProp","defaultMode","onModeChange","disableExpand","noControls","renderControls","closeOnOutsideClick","closeOnEsc","labels","ref","mode","setMode","useControllableState","domRoot","setDomRoot","useState","useSafeLayoutEffect","effectiveMode","isFullRow","isFullscreen","toggleRow","current","openFullscreen","closeFullscreen","controlsContext","overlay","defaultControls","jsx","Button","Icon","jsxs","Fragment","renderControlBar","content","useEffect","prev","onKeyDown","event","card","cn","createPortal"],"mappings":"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"}
+{"version":3,"file":"expansionPanel.js","sources":["../../../../../src/components/dataDisplay/expansionPanel/expansionPanel.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode, useEffect, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { createPortal } from \"react-dom\";\nimport Button from \"../../inputs/button/button\";\nimport Icon from \"../../base/icon/icon\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\nimport { FOCUSABLE } from \"../../../hooks/useFocusTrap\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\nimport { hasOverlayLayerAbove } from \"../../../utils/overlayLayer\";\n\nexport type ExpansionMode = \"tile\" | \"row\" | \"fullscreen\";\n\nexport interface ExpansionPanelLabels {\n  /** Tooltip/aria for the control that expands a tile to a full grid row. */\n  expandRow?: string;\n  /** Tooltip/aria for the control that collapses a full row back to a tile. */\n  collapseRow?: string;\n  /** Tooltip/aria for the control that opens the panel fullscreen. */\n  expandFullscreen?: string;\n  /** Tooltip/aria for the control that closes fullscreen. */\n  closeFullscreen?: string;\n  /** Text shown in the original slot while the panel is fullscreen. */\n  placeholder?: string;\n  /** Label of the button in the placeholder that closes fullscreen. */\n  placeholderClose?: string;\n}\n\nexport interface ExpansionPanelRenderContext {\n  mode: ExpansionMode;\n  isFullscreen: boolean;\n  isFullRow: boolean;\n}\n\nexport interface ExpansionPanelControlsContext extends ExpansionPanelRenderContext {\n  setMode: (next: ExpansionMode | ((current: ExpansionMode) => ExpansionMode)) => void;\n  toggleRow: () => void;\n  openFullscreen: () => void;\n  closeFullscreen: () => void;\n  labels: Required<ExpansionPanelLabels>;\n}\n\ntype ExpansionPanelChildren = ReactNode | ((ctx: ExpansionPanelRenderContext) => ReactNode);\ntype ExpansionPanelControls = ReactNode | ((ctx: ExpansionPanelControlsContext) => ReactNode);\n\nexport interface ExpansionPanelProps {\n  className?: string;\n  /** Content of the panel header (left side of the control bar). */\n  header?: ReactNode;\n  /** Controlled layout mode. */\n  mode?: ExpansionMode;\n  /** Initial mode for the uncontrolled component. */\n  defaultMode?: ExpansionMode;\n  /** Fired with the next mode whenever it changes. */\n  onModeChange?: (mode: ExpansionMode) => void;\n  /** Render the panel as a plain card without row/fullscreen controls. */\n  disableExpand?: boolean;\n  /** Hide the built-in control bar (consumer drives `mode` itself). */\n  noControls?: boolean;\n  /** Replace the built-in row/fullscreen controls with a custom node or render prop. */\n  renderControls?: ExpansionPanelControls;\n  /** Close fullscreen when the backdrop is clicked. Default: true. */\n  closeOnOutsideClick?: boolean;\n  /** Close fullscreen when Escape is pressed. Default: true. */\n  closeOnEsc?: boolean;\n  /** Accessible labels / tooltips for the built-in controls. */\n  labels?: ExpansionPanelLabels;\n  children?: ExpansionPanelChildren;\n}\n\nconst DEFAULT_LABELS: Required<ExpansionPanelLabels> = {\n  expandRow: \"Expand to full row\",\n  collapseRow: \"Collapse to grid\",\n  expandFullscreen: \"Expand to fullscreen\",\n  closeFullscreen: \"Close fullscreen\",\n  placeholder: \"Panel is open in fullscreen\",\n  placeholderClose: \"Close\",\n};\n\nconst resolveChildren = (children: ExpansionPanelChildren, ctx: ExpansionPanelRenderContext): ReactNode =>\n  typeof children === \"function\" ? children(ctx) : children;\n\nconst resolveControls = (controls: ExpansionPanelControls, ctx: ExpansionPanelControlsContext): ReactNode =>\n  typeof controls === \"function\" ? controls(ctx) : controls;\n\n/** Focuses the first of `targets` that is in the document and takes focus. */\nconst focusFirst = (targets: Array<Element | null>): void => {\n  for (const target of targets) {\n    if (!(target instanceof HTMLElement) || !target.isConnected) continue;\n    target.focus();\n    if ((target.getRootNode() as Document | ShadowRoot).activeElement === target) return;\n  }\n};\n\n/** The elements in `container` that Tab can reach, in document order. */\nconst tabbables = (container: HTMLElement): HTMLElement[] =>\n  Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(\n    // Older browsers (and jsdom) lack checkVisibility: count every match there.\n    (el) => typeof el.checkVisibility !== \"function\" || el.checkVisibility({ visibilityProperty: true })\n  );\n\nexport const ExpansionPanel = forwardRef<HTMLDivElement, ExpansionPanelProps>(function ExpansionPanel(\n  {\n    className,\n    header,\n    mode: modeProp,\n    defaultMode = \"tile\",\n    onModeChange,\n    disableExpand = false,\n    noControls = false,\n    renderControls,\n    closeOnOutsideClick = true,\n    closeOnEsc = true,\n    labels,\n    children,\n  },\n  ref\n) {\n  const [mode, setMode] = useControllableState<ExpansionMode>({\n    value: modeProp,\n    defaultValue: defaultMode,\n    onChange: onModeChange,\n  });\n\n  const l = { ...DEFAULT_LABELS, ...labels };\n  const [domRoot, setDomRoot] = useState<HTMLElement>();\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const cardRef = useRef<HTMLDivElement>(null);\n  const cardRefs = useForkRef(ref, cardRef);\n  const fullscreenButtonRef = useRef<HTMLButtonElement | HTMLAnchorElement>(null);\n  const closeButtonRef = useRef<HTMLButtonElement | HTMLAnchorElement>(null);\n  // Where focus goes back to when fullscreen ends; see the effect that sets them.\n  const openerRef = useRef<Element | null>(null);\n  const lastFocusedRef = useRef<Element | null>(null);\n  const wasFullscreenRef = useRef(false);\n\n  useSafeLayoutEffect(() => {\n    setDomRoot(document.body);\n  }, []);\n\n  // `disableExpand` renders a plain card regardless of the requested mode,\n  // without mutating state — works in both controlled and uncontrolled use.\n  const effectiveMode: ExpansionMode = disableExpand ? \"tile\" : mode;\n  const isFullRow = effectiveMode === \"row\";\n  const isFullscreen = effectiveMode === \"fullscreen\";\n\n  const toggleRow = () => setMode((current) => (current === \"row\" ? \"tile\" : \"row\"));\n  const openFullscreen = () => setMode(\"fullscreen\");\n  const closeFullscreen = () => setMode(\"tile\");\n\n  const controlsContext = (overlay: boolean): ExpansionPanelControlsContext => ({\n    mode: effectiveMode,\n    isFullscreen: overlay,\n    isFullRow: overlay ? false : isFullRow,\n    setMode,\n    toggleRow,\n    openFullscreen,\n    closeFullscreen,\n    labels: l,\n  });\n\n  const defaultControls = (overlay: boolean) => {\n    if (overlay) {\n      return (\n        <Button\n          ref={closeButtonRef}\n          type=\"button\"\n          variant=\"outlined\"\n          size=\"small\"\n          aria-label={l.closeFullscreen}\n          title={l.closeFullscreen}\n          onClick={closeFullscreen}\n          data-testid=\"expansion-panel-close\"\n          icon={<Icon name=\"close\" size={18} />}\n        />\n      );\n    }\n\n    return (\n      <>\n        <Button\n          type=\"button\"\n          variant=\"outlined\"\n          size=\"small\"\n          aria-pressed={isFullRow}\n          aria-label={isFullRow ? l.collapseRow : l.expandRow}\n          title={isFullRow ? l.collapseRow : l.expandRow}\n          onClick={toggleRow}\n          data-testid=\"expansion-panel-row\"\n          icon={<Icon name={isFullRow ? \"grid_view\" : \"table_rows\"} size={18} />}\n        />\n        <Button\n          ref={fullscreenButtonRef}\n          type=\"button\"\n          variant=\"outlined\"\n          size=\"small\"\n          aria-label={l.expandFullscreen}\n          title={l.expandFullscreen}\n          onClick={openFullscreen}\n          data-testid=\"expansion-panel-fullscreen\"\n          icon={<Icon name=\"open_in_full\" size={18} />}\n        />\n      </>\n    );\n  };\n\n  const renderControlBar = (overlay: boolean) => {\n    if (disableExpand || noControls) {\n      return null;\n    }\n\n    const content = renderControls\n      ? resolveControls(renderControls, controlsContext(overlay))\n      : defaultControls(overlay);\n\n    if (!content) {\n      return null;\n    }\n\n    return <div className=\"smwb-expansion-panel__controls\">{content}</div>;\n  };\n\n  useEffect(() => {\n    if (!isFullscreen) {\n      return;\n    }\n    const prev = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.body.style.overflow = prev;\n    };\n  }, [isFullscreen]);\n\n  useEffect(() => {\n    if (!isFullscreen || !closeOnEsc) {\n      return;\n    }\n    const onKeyDown = (event: KeyboardEvent) => {\n      // An open layer above the overlay takes the Escape first: a select menu opened\n      // from the panel, even one rendered inside it (`menuContainer`). An Escape handled\n      // inside the panel, e.g. by a menu closing on it, keeps fullscreen too.\n      if (event.key === \"Escape\" && !event.defaultPrevented && !hasOverlayLayerAbove(overlayRef.current)) {\n        // Handled: a FloatingWindow, Modal or Sheet around the panel skips it. Focus goes\n        // back into the tile, and their listener may come later in this dispatch.\n        event.preventDefault();\n        setMode(\"tile\");\n      }\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => document.removeEventListener(\"keydown\", onKeyDown);\n  }, [isFullscreen, closeOnEsc, setMode]);\n\n  // The overlay and the card replace each other, so focus in the one that goes falls to\n  // <body>: focus in the overlay when fullscreen ends, on the tile's button when it\n  // begins. A FloatingWindow around the panel then misses the next Escape, as it takes\n  // Escape only while focus is inside it. So when fullscreen ends with focus on <body>,\n  // focus goes to the element focused last in the overlay if it survived into the tile,\n  // else to what had focus when fullscreen began, else to the tile's fullscreen button,\n  // else to the tile's first focusable element. Focus anywhere else is left alone.\n  useSafeLayoutEffect(() => {\n    const active = document.activeElement;\n    if (isFullscreen) {\n      openerRef.current = active === document.body ? null : active;\n      lastFocusedRef.current = null;\n    } else if (wasFullscreenRef.current && (!active || active === document.body)) {\n      focusFirst([\n        lastFocusedRef.current,\n        openerRef.current,\n        fullscreenButtonRef.current,\n        ...Array.from(cardRef.current?.querySelectorAll(FOCUSABLE) ?? []),\n      ]);\n    }\n    wasFullscreenRef.current = isFullscreen;\n  }, [isFullscreen]);\n\n  // Entering fullscreen removes the tile, so focus in it falls to <body>, behind an\n  // `aria-modal` overlay: Tab goes to the page under it and a screen reader is left on\n  // nothing. So when the overlay appears with focus on <body>, focus moves into it: to\n  // its close button, else to its first focusable element, else to the overlay itself.\n  // Focus elsewhere is left alone: on a control outside the panel that set a controlled\n  // `mode`, or on an element in the overlay that focused itself.\n  const overlayShown = isFullscreen && domRoot !== undefined;\n  useSafeLayoutEffect(() => {\n    const overlay = overlayRef.current;\n    const active = document.activeElement;\n    if (!overlayShown || !overlay || (active && active !== document.body)) return;\n    focusFirst([closeButtonRef.current, ...tabbables(overlay), overlay]);\n  }, [overlayShown]);\n\n  // Tab stays in the overlay: it wraps at either end, and focus on <body> or on the page\n  // under the overlay comes back into it. Tab works as usual in what was opened from the\n  // panel: a layer above the overlay, or anything portaled after it (a menu, a picker\n  // panel). A Tab handled already is left alone too.\n  useEffect(() => {\n    if (!overlayShown) {\n      return;\n    }\n    const onKeyDown = (event: KeyboardEvent) => {\n      const overlay = overlayRef.current;\n      if (event.key !== \"Tab\" || event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || !overlay) {\n        return;\n      }\n      const items = tabbables(overlay);\n      const first = items[0] ?? overlay;\n      const last = items[items.length - 1] ?? overlay;\n      const active = document.activeElement;\n      let target: HTMLElement | undefined;\n      if (active && active !== document.body && overlay.contains(active)) {\n        if (event.shiftKey ? active === first || active === overlay : active === last) {\n          target = event.shiftKey ? last : first;\n        }\n      } else if (\n        !hasOverlayLayerAbove(overlay) &&\n        (!active ||\n          active === document.body ||\n          overlay.compareDocumentPosition(active) & Node.DOCUMENT_POSITION_PRECEDING)\n      ) {\n        target = event.shiftKey ? last : first;\n      }\n      if (target) {\n        event.preventDefault();\n        target.focus();\n      }\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => document.removeEventListener(\"keydown\", onKeyDown);\n  }, [overlayShown]);\n\n  const card = (\n    <div\n      ref={cardRefs}\n      className={cn(\"smwb-expansion-panel\", { \"smwb-expansion-panel_row\": isFullRow }, className)}\n      data-testid=\"expansion-panel\"\n    >\n      <div className=\"smwb-expansion-panel__head\">\n        <div className=\"smwb-expansion-panel__header\">{header}</div>\n        {renderControlBar(false)}\n      </div>\n      <div className=\"smwb-expansion-panel__body\">\n        {resolveChildren(children, {\n          mode: effectiveMode,\n          isFullscreen: false,\n          isFullRow,\n        })}\n      </div>\n    </div>\n  );\n\n  if (!isFullscreen || !domRoot) {\n    return card;\n  }\n\n  return (\n    <>\n      <div className=\"smwb-expansion-panel__placeholder\" data-testid=\"expansion-panel-placeholder\">\n        <span>{l.placeholder}</span>\n        <Button\n          type=\"button\"\n          variant=\"outlined\"\n          size=\"small\"\n          label={l.placeholderClose}\n          onClick={() => setMode(\"tile\")}\n        />\n      </div>\n      {createPortal(\n        <div\n          ref={overlayRef}\n          className=\"smwb-expansion-panel__overlay smwb-dark\"\n          data-smwb-overlay-layer=\"\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          tabIndex={-1}\n          data-testid=\"expansion-panel-overlay\"\n          onFocus={(e) => {\n            lastFocusedRef.current = e.target;\n          }}\n          onClick={\n            closeOnOutsideClick\n              ? (e) => {\n                  if (e.target === e.currentTarget) {\n                    setMode(\"tile\");\n                  }\n                }\n              : undefined\n          }\n        >\n          <div className=\"smwb-expansion-panel__dialog\">\n            <div className=\"smwb-expansion-panel__head\">\n              <div className=\"smwb-expansion-panel__header\">{header}</div>\n              {renderControlBar(true)}\n            </div>\n            <div className=\"smwb-expansion-panel__body smwb-expansion-panel__body_fullscreen\">\n              {resolveChildren(children, {\n                mode: effectiveMode,\n                isFullscreen: true,\n                isFullRow: false,\n              })}\n            </div>\n          </div>\n        </div>,\n        domRoot\n      )}\n    </>\n  );\n});\n\nexport default ExpansionPanel;\n"],"names":["DEFAULT_LABELS","resolveChildren","children","ctx","resolveControls","controls","focusFirst","targets","target","tabbables","container","FOCUSABLE","el","ExpansionPanel","forwardRef","className","header","modeProp","defaultMode","onModeChange","disableExpand","noControls","renderControls","closeOnOutsideClick","closeOnEsc","labels","ref","mode","setMode","useControllableState","l","domRoot","setDomRoot","useState","overlayRef","useRef","cardRef","cardRefs","useForkRef","fullscreenButtonRef","closeButtonRef","openerRef","lastFocusedRef","wasFullscreenRef","useSafeLayoutEffect","effectiveMode","isFullRow","isFullscreen","toggleRow","current","openFullscreen","closeFullscreen","controlsContext","overlay","defaultControls","jsx","Button","Icon","jsxs","Fragment","renderControlBar","content","useEffect","prev","onKeyDown","event","hasOverlayLayerAbove","active","_b","_a","overlayShown","items","first","last","card","cn","createPortal"],"mappings":"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"}

package/dist/headless/components/dataDisplay/imagesList/imagesListItem/imagesListItem.js

@@ -1,54 +1,60 @@
-import { jsxs as n, Fragment as _, jsx as e } from "react/jsx-runtime";
-import { useContext as y, useEffect as u } from "react";
-import t from "clsx";
-import { useModalState as h } from "../../../../hooks/useModalState.js";
-import { ImagesListContext as v } from "../imagesListContext.js";
-import x from "./imagesListItemModal.js";
-const j = ({
+import { jsxs as n, Fragment as y, jsx as e } from "react/jsx-runtime";
+import { useContext as _, useEffect as h } from "react";
+import m from "clsx";
+import { useModalState as v } from "../../../../hooks/useModalState.js";
+import { ImagesListContext as x } from "../imagesListContext.js";
+import I from "./imagesListItemModal.js";
+const M = ({
   className: s,
   src: i,
   rounded: o,
-  itemBarContent: l,
+  itemBarContent: r,
   cols: d = 1,
-  rows: a = 1,
+  rows: l = 1,
   itemBarPlacement: g = "bottom",
   alt: c = "image"
 }) => {
-  const { isOpen: m, onClose: b, onOpen: p } = h(), { rowsHeight: r, variant: w } = y(v);
-  u(() => {
-    m ? document.body.style.overflow = "hidden" : document.body.style.overflow = "auto";
-  }, [m]);
+  const { isOpen: t, onClose: b, onOpen: p } = v(), { rowsHeight: a, variant: w } = _(x);
+  h(() => {
+    if (!t) return;
+    const u = document.body.style.overflow;
+    return document.body.style.overflow = "hidden", () => {
+      document.body.style.overflow = u;
+    };
+  }, [t]);
   const f = {
-    height: r ? `${r * a}px` : "",
-    gridRowEnd: `span ${a}`,
+    // No height is undefined, not "": React writes an empty value on the client
+    // but not on the server, and hydration reports the style as mismatched.
+    height: a ? `${a * l}px` : void 0,
+    gridRowEnd: `span ${l}`,
     gridColumnEnd: `span ${d}`
   };
-  return /* @__PURE__ */ n(_, { children: [
+  return /* @__PURE__ */ n(y, { children: [
     /* @__PURE__ */ e(
       "li",
       {
         "data-testid": "images-list-item",
-        className: t("smwb-gallery__list__item", s, "smwb-gallery-item", `smwb-${w}`),
+        className: m("smwb-gallery__list__item", s, "smwb-gallery-item", `smwb-${w}`),
         onClick: p,
         style: f,
         children: /* @__PURE__ */ n("div", { className: "smwb-gallery-item__inner", children: [
-          /* @__PURE__ */ e("div", { className: "smwb-gallery-item__img-wrapper", children: /* @__PURE__ */ e("img", { src: i, alt: c || "image", className: t("smwb-gallery-item__img", { "smwb-rounded": o }) }) }),
-          l && /* @__PURE__ */ e(
+          /* @__PURE__ */ e("div", { className: "smwb-gallery-item__img-wrapper", children: /* @__PURE__ */ e("img", { src: i, alt: c || "image", className: m("smwb-gallery-item__img", { "smwb-rounded": o }) }) }),
+          r && /* @__PURE__ */ e(
             "div",
             {
-              className: t("smwb-gallery-item__bar", s, `smwb-${g}`, {
+              className: m("smwb-gallery-item__bar", s, `smwb-${g}`, {
                 "smwb-rounded": o
               }),
-              children: l
+              children: r
             }
           )
         ] })
       }
     ),
-    /* @__PURE__ */ e(x, { src: i, onClose: b, isOpen: m })
+    /* @__PURE__ */ e(I, { src: i, onClose: b, isOpen: t })
   ] });
 };
 export {
-  j as default
+  M as default
 };
 //# sourceMappingURL=imagesListItem.js.map

package/dist/headless/components/dataDisplay/imagesList/imagesListItem/imagesListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"imagesListItem.js","sources":["../../../../../../src/components/dataDisplay/imagesList/imagesListItem/imagesListItem.tsx"],"sourcesContent":["import React, { CSSProperties, useContext, useEffect } from \"react\";\nimport cn from \"clsx\";\nimport { useModalState } from \"../../../../hooks/useModalState\";\nimport { ImagesListItemModal } from \"../index\";\nimport { ImagesListContext } from \"../imagesListContext\";\n\nexport interface ImagesListItemProps {\n  className?: string;\n  src: string;\n  rowsHeight?: number;\n  cols: number;\n  rows: number;\n  rounded?: boolean;\n  itemBarPlacement?: \"top\" | \"bottom\" | \"under\";\n  itemBarContent?: React.ReactNode;\n  alt?: string;\n}\n\nconst ImagesListItem = ({\n  className,\n  src,\n  rounded,\n  itemBarContent,\n  cols = 1,\n  rows = 1,\n  itemBarPlacement = \"bottom\",\n  alt = \"image\",\n}: ImagesListItemProps) => {\n  const { isOpen, onClose, onOpen } = useModalState();\n  const { rowsHeight, variant } = useContext(ImagesListContext);\n\n  useEffect(() => {\n    if (isOpen) {\n      document.body.style.overflow = \"hidden\";\n    } else {\n      document.body.style.overflow = \"auto\";\n    }\n  }, [isOpen]);\n\n  const style: CSSProperties = {\n    height: rowsHeight ? `${rowsHeight * rows}px` : \"\",\n    gridRowEnd: `span ${rows}`,\n    gridColumnEnd: `span ${cols}`,\n  };\n\n  return (\n    <>\n      <li\n        data-testid=\"images-list-item\"\n        className={cn(\"smwb-gallery__list__item\", className, \"smwb-gallery-item\", `smwb-${variant}`)}\n        onClick={onOpen}\n        style={style}\n      >\n        <div className=\"smwb-gallery-item__inner\">\n          <div className=\"smwb-gallery-item__img-wrapper\">\n            <img src={src} alt={alt || \"image\"} className={cn(\"smwb-gallery-item__img\", { \"smwb-rounded\": rounded })} />\n          </div>\n          {itemBarContent && (\n            <div\n              className={cn(\"smwb-gallery-item__bar\", className, `smwb-${itemBarPlacement}`, {\n                \"smwb-rounded\": rounded,\n              })}\n            >\n              {itemBarContent}\n            </div>\n          )}\n        </div>\n      </li>\n      <ImagesListItemModal src={src} onClose={onClose} isOpen={isOpen} />\n    </>\n  );\n};\n\nexport default ImagesListItem;\n"],"names":["ImagesListItem","className","src","rounded","itemBarContent","cols","rows","itemBarPlacement","alt","isOpen","onClose","onOpen","useModalState","rowsHeight","variant","useContext","ImagesListContext","useEffect","style","jsxs","Fragment","jsx","cn","ImagesListItemModal"],"mappings":";;;;;;AAkBA,MAAMA,IAAiB,CAAC;AAAA,EACtB,WAAAC;AAAA,EACA,KAAAC;AAAA,EACA,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,kBAAAC,IAAmB;AAAA,EACnB,KAAAC,IAAM;AACR,MAA2B;AACzB,QAAM,EAAE,QAAAC,GAAQ,SAAAC,GAAS,QAAAC,EAAA,IAAWC,EAAA,GAC9B,EAAE,YAAAC,GAAY,SAAAC,MAAYC,EAAWC,CAAiB;AAE5D,EAAAC,EAAU,MAAM;AACd,IAAIR,IACF,SAAS,KAAK,MAAM,WAAW,WAE/B,SAAS,KAAK,MAAM,WAAW;AAAA,EAEnC,GAAG,CAACA,CAAM,CAAC;AAEX,QAAMS,IAAuB;AAAA,IAC3B,QAAQL,IAAa,GAAGA,IAAaP,CAAI,OAAO;AAAA,IAChD,YAAY,QAAQA,CAAI;AAAA,IACxB,eAAe,QAAQD,CAAI;AAAA,EAAA;AAG7B,SACE,gBAAAc,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,WAAWC,EAAG,4BAA4BrB,GAAW,qBAAqB,QAAQa,CAAO,EAAE;AAAA,QAC3F,SAASH;AAAA,QACT,OAAAO;AAAA,QAEA,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,4BACb,UAAA;AAAA,UAAA,gBAAAE,EAAC,SAAI,WAAU,kCACb,UAAA,gBAAAA,EAAC,OAAA,EAAI,KAAAnB,GAAU,KAAKM,KAAO,SAAS,WAAWc,EAAG,0BAA0B,EAAE,gBAAgBnB,EAAA,CAAS,GAAG,GAC5G;AAAA,UACCC,KACC,gBAAAiB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWC,EAAG,0BAA0BrB,GAAW,QAAQM,CAAgB,IAAI;AAAA,gBAC7E,gBAAgBJ;AAAA,cAAA,CACjB;AAAA,cAEA,UAAAC;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,gBAAAiB,EAACE,GAAA,EAAoB,KAAArB,GAAU,SAAAQ,GAAkB,QAAAD,EAAA,CAAgB;AAAA,EAAA,GACnE;AAEJ;"}
+{"version":3,"file":"imagesListItem.js","sources":["../../../../../../src/components/dataDisplay/imagesList/imagesListItem/imagesListItem.tsx"],"sourcesContent":["import React, { CSSProperties, useContext, useEffect } from \"react\";\nimport cn from \"clsx\";\nimport { useModalState } from \"../../../../hooks/useModalState\";\nimport { ImagesListItemModal } from \"../index\";\nimport { ImagesListContext } from \"../imagesListContext\";\n\nexport interface ImagesListItemProps {\n  className?: string;\n  src: string;\n  rowsHeight?: number;\n  cols: number;\n  rows: number;\n  rounded?: boolean;\n  itemBarPlacement?: \"top\" | \"bottom\" | \"under\";\n  itemBarContent?: React.ReactNode;\n  alt?: string;\n}\n\nconst ImagesListItem = ({\n  className,\n  src,\n  rounded,\n  itemBarContent,\n  cols = 1,\n  rows = 1,\n  itemBarPlacement = \"bottom\",\n  alt = \"image\",\n}: ImagesListItemProps) => {\n  const { isOpen, onClose, onOpen } = useModalState();\n  const { rowsHeight, variant } = useContext(ImagesListContext);\n\n  // Lock the page's scroll while the viewer is open, and give it back as it was.\n  // (Every item used to set it to \"auto\" when it mounted, undoing another lock.)\n  useEffect(() => {\n    if (!isOpen) return;\n    const previous = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.body.style.overflow = previous;\n    };\n  }, [isOpen]);\n\n  const style: CSSProperties = {\n    // No height is undefined, not \"\": React writes an empty value on the client\n    // but not on the server, and hydration reports the style as mismatched.\n    height: rowsHeight ? `${rowsHeight * rows}px` : undefined,\n    gridRowEnd: `span ${rows}`,\n    gridColumnEnd: `span ${cols}`,\n  };\n\n  return (\n    <>\n      <li\n        data-testid=\"images-list-item\"\n        className={cn(\"smwb-gallery__list__item\", className, \"smwb-gallery-item\", `smwb-${variant}`)}\n        onClick={onOpen}\n        style={style}\n      >\n        <div className=\"smwb-gallery-item__inner\">\n          <div className=\"smwb-gallery-item__img-wrapper\">\n            <img src={src} alt={alt || \"image\"} className={cn(\"smwb-gallery-item__img\", { \"smwb-rounded\": rounded })} />\n          </div>\n          {itemBarContent && (\n            <div\n              className={cn(\"smwb-gallery-item__bar\", className, `smwb-${itemBarPlacement}`, {\n                \"smwb-rounded\": rounded,\n              })}\n            >\n              {itemBarContent}\n            </div>\n          )}\n        </div>\n      </li>\n      <ImagesListItemModal src={src} onClose={onClose} isOpen={isOpen} />\n    </>\n  );\n};\n\nexport default ImagesListItem;\n"],"names":["ImagesListItem","className","src","rounded","itemBarContent","cols","rows","itemBarPlacement","alt","isOpen","onClose","onOpen","useModalState","rowsHeight","variant","useContext","ImagesListContext","useEffect","previous","style","jsxs","Fragment","jsx","cn","ImagesListItemModal"],"mappings":";;;;;;AAkBA,MAAMA,IAAiB,CAAC;AAAA,EACtB,WAAAC;AAAA,EACA,KAAAC;AAAA,EACA,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,kBAAAC,IAAmB;AAAA,EACnB,KAAAC,IAAM;AACR,MAA2B;AACzB,QAAM,EAAE,QAAAC,GAAQ,SAAAC,GAAS,QAAAC,EAAA,IAAWC,EAAA,GAC9B,EAAE,YAAAC,GAAY,SAAAC,MAAYC,EAAWC,CAAiB;AAI5D,EAAAC,EAAU,MAAM;AACd,QAAI,CAACR,EAAQ;AACb,UAAMS,IAAW,SAAS,KAAK,MAAM;AACrC,oBAAS,KAAK,MAAM,WAAW,UACxB,MAAM;AACX,eAAS,KAAK,MAAM,WAAWA;AAAA,IACjC;AAAA,EACF,GAAG,CAACT,CAAM,CAAC;AAEX,QAAMU,IAAuB;AAAA;AAAA;AAAA,IAG3B,QAAQN,IAAa,GAAGA,IAAaP,CAAI,OAAO;AAAA,IAChD,YAAY,QAAQA,CAAI;AAAA,IACxB,eAAe,QAAQD,CAAI;AAAA,EAAA;AAG7B,SACE,gBAAAe,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,WAAWC,EAAG,4BAA4BtB,GAAW,qBAAqB,QAAQa,CAAO,EAAE;AAAA,QAC3F,SAASH;AAAA,QACT,OAAAQ;AAAA,QAEA,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,4BACb,UAAA;AAAA,UAAA,gBAAAE,EAAC,SAAI,WAAU,kCACb,UAAA,gBAAAA,EAAC,OAAA,EAAI,KAAApB,GAAU,KAAKM,KAAO,SAAS,WAAWe,EAAG,0BAA0B,EAAE,gBAAgBpB,EAAA,CAAS,GAAG,GAC5G;AAAA,UACCC,KACC,gBAAAkB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWC,EAAG,0BAA0BtB,GAAW,QAAQM,CAAgB,IAAI;AAAA,gBAC7E,gBAAgBJ;AAAA,cAAA,CACjB;AAAA,cAEA,UAAAC;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,gBAAAkB,EAACE,GAAA,EAAoB,KAAAtB,GAAU,SAAAQ,GAAkB,QAAAD,EAAA,CAAgB;AAAA,EAAA,GACnE;AAEJ;"}

package/dist/headless/components/dataDisplay/imagesList/imagesListItem/imagesListItemModal.js

@@ -1,29 +1,32 @@
 import { jsx as e } from "react/jsx-runtime";
-import { useRef as i } from "react";
-import { createPortal as n } from "react-dom";
-import { CSSTransition as l } from "react-transition-group";
-const g = ({ src: o, onClose: a, isOpen: t }) => {
-  const m = i(null);
-  return n(
+import { useRef as l, useState as s } from "react";
+import { createPortal as c } from "react-dom";
+import { useSafeLayoutEffect as d } from "../../../../hooks/useSafeLayoutEffect.js";
+import { CSSTransition as u } from "react-transition-group";
+const b = ({ src: a, onClose: m, isOpen: r }) => {
+  const o = l(null), [t, n] = s();
+  return d(() => {
+    n(document.body);
+  }, []), t ? c(
     /* @__PURE__ */ e(
-      l,
+      u,
       {
         timeout: 100,
-        in: t,
+        in: r,
         classNames: {
           enterActive: "smwb-image-modal__overlay-enter-active",
           enterDone: "smwb-image-modal__overlay-enter-done"
         },
         mountOnEnter: !0,
         unmountOnExit: !0,
-        nodeRef: m,
-        children: /* @__PURE__ */ e("div", { className: "smwb-image-modal__overlay", onClick: a, ref: m, children: /* @__PURE__ */ e("div", { className: "smwb-image-modal", onClick: (r) => r.stopPropagation(), children: /* @__PURE__ */ e("img", { src: o, alt: "", className: "smwb-image-modal__img" }) }) })
+        nodeRef: o,
+        children: /* @__PURE__ */ e("div", { className: "smwb-image-modal__overlay", onClick: m, ref: o, children: /* @__PURE__ */ e("div", { className: "smwb-image-modal", onClick: (i) => i.stopPropagation(), children: /* @__PURE__ */ e("img", { src: a, alt: "", className: "smwb-image-modal__img" }) }) })
       }
     ),
-    document.body
-  );
+    t
+  ) : null;
 };
 export {
-  g as default
+  b as default
 };
 //# sourceMappingURL=imagesListItemModal.js.map

package/dist/headless/components/dataDisplay/imagesList/imagesListItem/imagesListItemModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"imagesListItemModal.js","sources":["../../../../../../src/components/dataDisplay/imagesList/imagesListItem/imagesListItemModal.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { CSSTransition } from \"react-transition-group\";\n\nexport interface ImagesListItemModalProps {\n  src: string;\n  onClose: () => void;\n  isOpen: boolean;\n}\n\nconst ImagesListItemModal = ({ src, onClose, isOpen }: ImagesListItemModalProps) => {\n  const nodeRef = useRef<HTMLDivElement>(null);\n  return createPortal(\n    <CSSTransition\n      timeout={100}\n      in={isOpen}\n      classNames={{\n        enterActive: \"smwb-image-modal__overlay-enter-active\",\n        enterDone: \"smwb-image-modal__overlay-enter-done\",\n      }}\n      mountOnEnter\n      unmountOnExit\n      nodeRef={nodeRef}\n    >\n      <div className=\"smwb-image-modal__overlay\" onClick={onClose} ref={nodeRef}>\n        <div className=\"smwb-image-modal\" onClick={(e) => e.stopPropagation()}>\n          <img src={src} alt=\"\" className=\"smwb-image-modal__img\" />\n        </div>\n      </div>\n    </CSSTransition>,\n    document.body\n  );\n};\n\nexport default ImagesListItemModal;\n"],"names":["ImagesListItemModal","src","onClose","isOpen","nodeRef","useRef","createPortal","jsx","CSSTransition","e"],"mappings":";;;;AAUA,MAAMA,IAAsB,CAAC,EAAE,KAAAC,GAAK,SAAAC,GAAS,QAAAC,QAAuC;AAClF,QAAMC,IAAUC,EAAuB,IAAI;AAC3C,SAAOC;AAAA,IACL,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,IAAIL;AAAA,QACJ,YAAY;AAAA,UACV,aAAa;AAAA,UACb,WAAW;AAAA,QAAA;AAAA,QAEb,cAAY;AAAA,QACZ,eAAa;AAAA,QACb,SAAAC;AAAA,QAEA,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,6BAA4B,SAASL,GAAS,KAAKE,GAChE,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,oBAAmB,SAAS,CAACE,MAAMA,EAAE,gBAAA,GAClD,UAAA,gBAAAF,EAAC,OAAA,EAAI,KAAAN,GAAU,KAAI,IAAG,WAAU,wBAAA,CAAwB,EAAA,CAC1D,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,SAAS;AAAA,EAAA;AAEb;"}
+{"version":3,"file":"imagesListItemModal.js","sources":["../../../../../../src/components/dataDisplay/imagesList/imagesListItem/imagesListItemModal.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useSafeLayoutEffect } from \"../../../../hooks/useSafeLayoutEffect\";\nimport { CSSTransition } from \"react-transition-group\";\n\nexport interface ImagesListItemModalProps {\n  src: string;\n  onClose: () => void;\n  isOpen: boolean;\n}\n\nconst ImagesListItemModal = ({ src, onClose, isOpen }: ImagesListItemModalProps) => {\n  const nodeRef = useRef<HTMLDivElement>(null);\n  // The viewer is portalled: its target is resolved in the browser only, so the\n  // image list renders on the server and hydrates.\n  const [portalRoot, setPortalRoot] = useState<HTMLElement>();\n  useSafeLayoutEffect(() => {\n    setPortalRoot(document.body);\n  }, []);\n  if (!portalRoot) return null;\n  return createPortal(\n    <CSSTransition\n      timeout={100}\n      in={isOpen}\n      classNames={{\n        enterActive: \"smwb-image-modal__overlay-enter-active\",\n        enterDone: \"smwb-image-modal__overlay-enter-done\",\n      }}\n      mountOnEnter\n      unmountOnExit\n      nodeRef={nodeRef}\n    >\n      <div className=\"smwb-image-modal__overlay\" onClick={onClose} ref={nodeRef}>\n        <div className=\"smwb-image-modal\" onClick={(e) => e.stopPropagation()}>\n          <img src={src} alt=\"\" className=\"smwb-image-modal__img\" />\n        </div>\n      </div>\n    </CSSTransition>,\n    portalRoot\n  );\n};\n\nexport default ImagesListItemModal;\n"],"names":["ImagesListItemModal","src","onClose","isOpen","nodeRef","useRef","portalRoot","setPortalRoot","useState","useSafeLayoutEffect","createPortal","jsx","CSSTransition","e"],"mappings":";;;;;AAWA,MAAMA,IAAsB,CAAC,EAAE,KAAAC,GAAK,SAAAC,GAAS,QAAAC,QAAuC;AAClF,QAAMC,IAAUC,EAAuB,IAAI,GAGrC,CAACC,GAAYC,CAAa,IAAIC,EAAA;AAIpC,SAHAC,EAAoB,MAAM;AACxB,IAAAF,EAAc,SAAS,IAAI;AAAA,EAC7B,GAAG,CAAA,CAAE,GACAD,IACEI;AAAA,IACL,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,IAAIT;AAAA,QACJ,YAAY;AAAA,UACV,aAAa;AAAA,UACb,WAAW;AAAA,QAAA;AAAA,QAEb,cAAY;AAAA,QACZ,eAAa;AAAA,QACb,SAAAC;AAAA,QAEA,UAAA,gBAAAO,EAAC,OAAA,EAAI,WAAU,6BAA4B,SAAST,GAAS,KAAKE,GAChE,UAAA,gBAAAO,EAAC,OAAA,EAAI,WAAU,oBAAmB,SAAS,CAACE,MAAMA,EAAE,gBAAA,GAClD,UAAA,gBAAAF,EAAC,OAAA,EAAI,KAAAV,GAAU,KAAI,IAAG,WAAU,wBAAA,CAAwB,EAAA,CAC1D,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,IAEFK;AAAA,EAAA,IAnBsB;AAqB1B;"}