@smwb/ui-react 2.7.0 → 2.9.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/kanban/kanban.js

@@ -1,61 +1,72 @@
-import { jsx as s, jsxs as o } from "react/jsx-runtime";
-import m, { useId as N } from "react";
-import _ from "clsx";
-const h = (a) => typeof a == "number" ? `${a}px` : a, i = (a) => a != null && a !== !1 && a !== !0 && a !== "", K = m.forwardRef(function({ className: t, style: c, columnWidth: l, children: n, ...r }, e) {
+import { jsx as s, jsxs as _ } from "react/jsx-runtime";
+import i, { useId as h } from "react";
+import k from "clsx";
+const p = (a) => typeof a == "number" ? `${a}px` : a, m = (a) => a != null && a !== !1 && a !== !0 && a !== "", y = i.forwardRef(function({ className: b, style: t, columnWidth: l, children: n, "data-testid": e = "kanban", ...d }, r) {
   return /* @__PURE__ */ s(
     "div",
     {
-      "data-testid": "kanban",
-      ...r,
-      ref: e,
-      className: _("smwb-kanban", t),
-      style: { ...c, "--smwb-kanban-column-width": h(l) },
+      "data-testid": e,
+      ...d,
+      ref: r,
+      className: k("smwb-kanban", b),
+      style: l === void 0 ? t : { ...t, "--smwb-kanban-column-width": p(l) },
       children: n
     }
   );
-}), g = m.forwardRef(
-  function({ className: t, style: c, title: l, count: n, accent: r, empty: e, footer: b, children: d, ...w }, u) {
-    const k = `${N()}-title`, f = m.Children.toArray(d).length > 0;
-    return /* @__PURE__ */ o(
+}), g = i.forwardRef(
+  function({
+    className: b,
+    style: t,
+    title: l,
+    count: n,
+    accent: e,
+    empty: d,
+    footer: r,
+    children: c,
+    "data-testid": o = "kanban-column",
+    ...u
+  }, f) {
+    const w = `${h()}-title`, N = i.Children.toArray(c).length > 0;
+    return /* @__PURE__ */ _(
       "div",
       {
-        "data-testid": "kanban-column",
+        "data-testid": o,
         role: "group",
-        "aria-labelledby": k,
-        ...w,
-        ref: u,
-        className: _("smwb-kanban__column", t),
-        style: { ...c, "--smwb-kanban-accent": r },
+        "aria-labelledby": w,
+        ...u,
+        ref: f,
+        className: k("smwb-kanban__column", b),
+        style: e === void 0 ? t : { ...t, "--smwb-kanban-accent": e },
         children: [
-          /* @__PURE__ */ o("div", { className: "smwb-kanban__column-header", children: [
-            /* @__PURE__ */ s("div", { className: "smwb-kanban__column-title", id: k, children: l }),
+          /* @__PURE__ */ _("div", { className: "smwb-kanban__column-header", children: [
+            /* @__PURE__ */ s("div", { className: "smwb-kanban__column-title", id: w, children: l }),
             n != null ? /* @__PURE__ */ s("span", { className: "smwb-kanban__count", children: n }) : null
           ] }),
-          f ? /* @__PURE__ */ s("ul", { className: "smwb-kanban__cards", role: "list", children: d }) : i(e) ? /* @__PURE__ */ s("div", { className: "smwb-kanban__empty", children: e }) : null,
-          i(b) ? /* @__PURE__ */ s("div", { className: "smwb-kanban__column-footer", children: b }) : null
+          N ? /* @__PURE__ */ s("ul", { className: "smwb-kanban__cards", role: "list", children: c }) : m(d) ? /* @__PURE__ */ s("div", { className: "smwb-kanban__empty", children: d }) : null,
+          m(r) ? /* @__PURE__ */ s("div", { className: "smwb-kanban__column-footer", children: r }) : null
         ]
       }
     );
   }
-), v = m.forwardRef(function({ className: t, style: c, title: l, href: n, titleLines: r = 3, children: e, ...b }, d) {
-  return /* @__PURE__ */ o(
+), x = i.forwardRef(function({ className: b, style: t, title: l, href: n, titleLines: e = 3, children: d, "data-testid": r = "kanban-card", ...c }, o) {
+  return /* @__PURE__ */ _(
     "li",
     {
-      "data-testid": "kanban-card",
-      ...b,
-      ref: d,
-      className: _("smwb-kanban__card", { "smwb-kanban__card_link": !!n }, t),
-      style: { ...c, "--smwb-kanban-title-lines": String(r) },
+      "data-testid": r,
+      ...c,
+      ref: o,
+      className: k("smwb-kanban__card", { "smwb-kanban__card_link": !!n }, b),
+      style: { ...t, "--smwb-kanban-title-lines": String(e) },
       children: [
-        i(l) ? n ? /* @__PURE__ */ s("a", { className: "smwb-kanban__card-title", href: n, children: l }) : /* @__PURE__ */ s("div", { className: "smwb-kanban__card-title", children: l }) : null,
-        i(e) ? /* @__PURE__ */ s("div", { className: "smwb-kanban__card-body", children: e }) : null
+        m(l) ? n ? /* @__PURE__ */ s("a", { className: "smwb-kanban__card-title", href: n, children: l }) : /* @__PURE__ */ s("div", { className: "smwb-kanban__card-title", children: l }) : null,
+        m(d) ? /* @__PURE__ */ s("div", { className: "smwb-kanban__card-body", children: d }) : null
       ]
     }
   );
 });
 export {
-  K as Kanban,
-  v as KanbanCard,
+  y as Kanban,
+  x as KanbanCard,
   g as KanbanColumn
 };
 //# sourceMappingURL=kanban.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"kanban.js","sources":["../../../../../src/components/dataDisplay/kanban/kanban.tsx"],"sourcesContent":["import React, { CSSProperties, HTMLAttributes, PropsWithChildren, ReactNode, useId } from \"react\";\nimport cn from \"clsx\";\n\nexport interface KanbanProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /**\n   * The narrowest a column gets before the board scrolls sideways: a number of\n   * pixels or any CSS length. 15.5rem by default.\n   */\n  columnWidth?: number | string;\n}\n\nexport interface KanbanColumnProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  className?: string;\n  /** The column's name: text or a badge. It names the column for assistive technology. */\n  title: ReactNode;\n  /** How many cards the column holds (it may show fewer), beside the title. Nothing is shown for null. */\n  count?: number | string | null;\n  /** The column's colour, a stripe along its top: any CSS colour. */\n  accent?: string;\n  /** Shown in place of the cards when there are none, e.g. \"Empty\". */\n  empty?: ReactNode;\n  /** Under the cards, e.g. a link to the rest as a list. */\n  footer?: ReactNode;\n}\n\nexport interface KanbanCardProps extends Omit<HTMLAttributes<HTMLLIElement>, \"title\"> {\n  className?: string;\n  /** The card's title, clamped to `titleLines` lines. */\n  title?: ReactNode;\n  /** Makes the title a link, and the whole card open it. */\n  href?: string;\n  /** Lines the title is clamped to: 3 by default. */\n  titleLines?: number;\n}\n\nconst cssLength = (value: number | string | undefined): string | undefined =>\n  typeof value === \"number\" ? `${value}px` : value;\n\nconst present = (value: ReactNode): boolean =>\n  value !== undefined && value !== null && value !== false && value !== true && value !== \"\";\n\n/** A board: KanbanColumn children side by side, scrolling sideways when they do not fit. */\nexport const Kanban = React.forwardRef<HTMLDivElement, PropsWithChildren<KanbanProps>>(function Kanban(\n  { className, style, columnWidth, children, ...rest },\n  ref\n) {\n  return (\n    <div\n      data-testid=\"kanban\"\n      {...rest}\n      ref={ref}\n      className={cn(\"smwb-kanban\", className)}\n      style={{ ...style, \"--smwb-kanban-column-width\": cssLength(columnWidth) } as CSSProperties}\n    >\n      {children}\n    </div>\n  );\n});\n\n/** A column of the board: its title and count, then its KanbanCard children, or `empty` when it has none. */\nexport const KanbanColumn = React.forwardRef<HTMLDivElement, PropsWithChildren<KanbanColumnProps>>(\n  function KanbanColumn({ className, style, title, count, accent, empty, footer, children, ...rest }, ref) {\n    const titleId = `${useId()}-title`;\n    const hasCards = React.Children.toArray(children).length > 0;\n    return (\n      <div\n        data-testid=\"kanban-column\"\n        role=\"group\"\n        aria-labelledby={titleId}\n        {...rest}\n        ref={ref}\n        className={cn(\"smwb-kanban__column\", className)}\n        style={{ ...style, \"--smwb-kanban-accent\": accent } as CSSProperties}\n      >\n        <div className=\"smwb-kanban__column-header\">\n          <div className=\"smwb-kanban__column-title\" id={titleId}>\n            {title}\n          </div>\n          {count !== undefined && count !== null ? <span className=\"smwb-kanban__count\">{count}</span> : null}\n        </div>\n        {hasCards ? (\n          <ul className=\"smwb-kanban__cards\" role=\"list\">\n            {children}\n          </ul>\n        ) : present(empty) ? (\n          <div className=\"smwb-kanban__empty\">{empty}</div>\n        ) : null}\n        {present(footer) ? <div className=\"smwb-kanban__column-footer\">{footer}</div> : null}\n      </div>\n    );\n  }\n);\n\n/**\n * A card on the board: its title (a link with `href`, and then the whole card\n * opens it) and the children under it.\n */\nexport const KanbanCard = React.forwardRef<HTMLLIElement, PropsWithChildren<KanbanCardProps>>(function KanbanCard(\n  { className, style, title, href, titleLines = 3, children, ...rest },\n  ref\n) {\n  return (\n    <li\n      data-testid=\"kanban-card\"\n      {...rest}\n      ref={ref}\n      className={cn(\"smwb-kanban__card\", { \"smwb-kanban__card_link\": Boolean(href) }, className)}\n      style={{ ...style, \"--smwb-kanban-title-lines\": String(titleLines) } as CSSProperties}\n    >\n      {present(title) ? (\n        href ? (\n          <a className=\"smwb-kanban__card-title\" href={href}>\n            {title}\n          </a>\n        ) : (\n          <div className=\"smwb-kanban__card-title\">{title}</div>\n        )\n      ) : null}\n      {present(children) ? <div className=\"smwb-kanban__card-body\">{children}</div> : null}\n    </li>\n  );\n});\n\nexport default Kanban;\n"],"names":["cssLength","value","present","Kanban","React","className","style","columnWidth","children","rest","ref","jsx","cn","KanbanColumn","title","count","accent","empty","footer","titleId","useId","hasCards","jsxs","KanbanCard","href","titleLines"],"mappings":";;;AAoCA,MAAMA,IAAY,CAACC,MACjB,OAAOA,KAAU,WAAW,GAAGA,CAAK,OAAOA,GAEvCC,IAAU,CAACD,MACQA,KAAU,QAAQA,MAAU,MAASA,MAAU,MAAQA,MAAU,IAG7EE,IAASC,EAAM,WAA2D,SACrF,EAAE,WAAAC,GAAW,OAAAC,GAAO,aAAAC,GAAa,UAAAC,GAAU,GAAGC,EAAA,GAC9CC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACX,GAAGF;AAAA,MACJ,KAAAC;AAAA,MACA,WAAWE,EAAG,eAAeP,CAAS;AAAA,MACtC,OAAO,EAAE,GAAGC,GAAO,8BAA8BN,EAAUO,CAAW,EAAA;AAAA,MAErE,UAAAC;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC,GAGYK,IAAeT,EAAM;AAAA,EAChC,SAAsB,EAAE,WAAAC,GAAW,OAAAC,GAAO,OAAAQ,GAAO,OAAAC,GAAO,QAAAC,GAAQ,OAAAC,GAAO,QAAAC,GAAQ,UAAAV,GAAU,GAAGC,EAAA,GAAQC,GAAK;AACvG,UAAMS,IAAU,GAAGC,EAAA,CAAO,UACpBC,IAAWjB,EAAM,SAAS,QAAQI,CAAQ,EAAE,SAAS;AAC3D,WACE,gBAAAc;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,MAAK;AAAA,QACL,mBAAiBH;AAAA,QAChB,GAAGV;AAAA,QACJ,KAAAC;AAAA,QACA,WAAWE,EAAG,uBAAuBP,CAAS;AAAA,QAC9C,OAAO,EAAE,GAAGC,GAAO,wBAAwBU,EAAA;AAAA,QAE3C,UAAA;AAAA,UAAA,gBAAAM,EAAC,OAAA,EAAI,WAAU,8BACb,UAAA;AAAA,YAAA,gBAAAX,EAAC,OAAA,EAAI,WAAU,6BAA4B,IAAIQ,GAC5C,UAAAL,GACH;AAAA,YACwBC,KAAU,yBAAQ,QAAA,EAAK,WAAU,sBAAsB,UAAAA,EAAA,CAAM,IAAU;AAAA,UAAA,GACjG;AAAA,UACCM,IACC,gBAAAV,EAAC,MAAA,EAAG,WAAU,sBAAqB,MAAK,QACrC,UAAAH,GACH,IACEN,EAAQe,CAAK,IACf,gBAAAN,EAAC,SAAI,WAAU,sBAAsB,aAAM,IACzC;AAAA,UACHT,EAAQgB,CAAM,IAAI,gBAAAP,EAAC,SAAI,WAAU,8BAA8B,aAAO,IAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGtF;AACF,GAMaY,IAAanB,EAAM,WAA8D,SAC5F,EAAE,WAAAC,GAAW,OAAAC,GAAO,OAAAQ,GAAO,MAAAU,GAAM,YAAAC,IAAa,GAAG,UAAAjB,GAAU,GAAGC,EAAA,GAC9DC,GACA;AACA,SACE,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACX,GAAGb;AAAA,MACJ,KAAAC;AAAA,MACA,WAAWE,EAAG,qBAAqB,EAAE,0BAA0B,EAAQY,EAAI,GAAKnB,CAAS;AAAA,MACzF,OAAO,EAAE,GAAGC,GAAO,6BAA6B,OAAOmB,CAAU,EAAA;AAAA,MAEhE,UAAA;AAAA,QAAAvB,EAAQY,CAAK,IACZU,IACE,gBAAAb,EAAC,OAAE,WAAU,2BAA0B,MAAAa,GACpC,UAAAV,GACH,IAEA,gBAAAH,EAAC,OAAA,EAAI,WAAU,2BAA2B,aAAM,IAEhD;AAAA,QACHT,EAAQM,CAAQ,IAAI,gBAAAG,EAAC,SAAI,WAAU,0BAA0B,UAAAH,GAAS,IAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGtF,CAAC;"}
+{"version":3,"file":"kanban.js","sources":["../../../../../src/components/dataDisplay/kanban/kanban.tsx"],"sourcesContent":["import React, { CSSProperties, HTMLAttributes, PropsWithChildren, ReactNode, useId } from \"react\";\nimport cn from \"clsx\";\n\nexport interface KanbanProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /**\n   * The narrowest a column gets before the board scrolls sideways: a number of\n   * pixels or any CSS length. 15.5rem by default.\n   */\n  columnWidth?: number | string;\n  /** Test id of the root `<div>`; `kanban` unless given. */\n  \"data-testid\"?: string;\n}\n\nexport interface KanbanColumnProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  className?: string;\n  /** The column's name: text or a badge. It names the column for assistive technology. */\n  title: ReactNode;\n  /** How many cards the column holds (it may show fewer), beside the title. Nothing is shown for null. */\n  count?: number | string | null;\n  /** The column's colour, a stripe along its top: any CSS colour. */\n  accent?: string;\n  /** Shown in place of the cards when there are none, e.g. \"Empty\". */\n  empty?: ReactNode;\n  /** Under the cards, e.g. a link to the rest as a list. */\n  footer?: ReactNode;\n  /** Test id of the column's `<div>`; `kanban-column` unless given. */\n  \"data-testid\"?: string;\n}\n\nexport interface KanbanCardProps extends Omit<HTMLAttributes<HTMLLIElement>, \"title\"> {\n  className?: string;\n  /** The card's title, clamped to `titleLines` lines. */\n  title?: ReactNode;\n  /** Makes the title a link, and the whole card open it. */\n  href?: string;\n  /** Lines the title is clamped to: 3 by default. */\n  titleLines?: number;\n  /** Test id of the card's `<li>`; `kanban-card` unless given. */\n  \"data-testid\"?: string;\n}\n\nconst cssLength = (value: number | string | undefined): string | undefined =>\n  typeof value === \"number\" ? `${value}px` : value;\n\nconst present = (value: ReactNode): boolean =>\n  value !== undefined && value !== null && value !== false && value !== true && value !== \"\";\n\n/** A board: KanbanColumn children side by side, scrolling sideways when they do not fit. */\nexport const Kanban = React.forwardRef<HTMLDivElement, PropsWithChildren<KanbanProps>>(function Kanban(\n  { className, style, columnWidth, children, \"data-testid\": dataTestId = \"kanban\", ...rest },\n  ref\n) {\n  return (\n    <div\n      data-testid={dataTestId}\n      {...rest}\n      ref={ref}\n      className={cn(\"smwb-kanban\", className)}\n      style={\n        columnWidth === undefined\n          ? style\n          : ({ ...style, \"--smwb-kanban-column-width\": cssLength(columnWidth) } as CSSProperties)\n      }\n    >\n      {children}\n    </div>\n  );\n});\n\n/** A column of the board: its title and count, then its KanbanCard children, or `empty` when it has none. */\nexport const KanbanColumn = React.forwardRef<HTMLDivElement, PropsWithChildren<KanbanColumnProps>>(\n  function KanbanColumn(\n    {\n      className,\n      style,\n      title,\n      count,\n      accent,\n      empty,\n      footer,\n      children,\n      \"data-testid\": dataTestId = \"kanban-column\",\n      ...rest\n    },\n    ref\n  ) {\n    const titleId = `${useId()}-title`;\n    const hasCards = React.Children.toArray(children).length > 0;\n    return (\n      <div\n        data-testid={dataTestId}\n        role=\"group\"\n        aria-labelledby={titleId}\n        {...rest}\n        ref={ref}\n        className={cn(\"smwb-kanban__column\", className)}\n        style={accent === undefined ? style : ({ ...style, \"--smwb-kanban-accent\": accent } as CSSProperties)}\n      >\n        <div className=\"smwb-kanban__column-header\">\n          <div className=\"smwb-kanban__column-title\" id={titleId}>\n            {title}\n          </div>\n          {count !== undefined && count !== null ? <span className=\"smwb-kanban__count\">{count}</span> : null}\n        </div>\n        {hasCards ? (\n          <ul className=\"smwb-kanban__cards\" role=\"list\">\n            {children}\n          </ul>\n        ) : present(empty) ? (\n          <div className=\"smwb-kanban__empty\">{empty}</div>\n        ) : null}\n        {present(footer) ? <div className=\"smwb-kanban__column-footer\">{footer}</div> : null}\n      </div>\n    );\n  }\n);\n\n/**\n * A card on the board: its title (a link with `href`, and then the whole card\n * opens it) and the children under it.\n */\nexport const KanbanCard = React.forwardRef<HTMLLIElement, PropsWithChildren<KanbanCardProps>>(function KanbanCard(\n  { className, style, title, href, titleLines = 3, children, \"data-testid\": dataTestId = \"kanban-card\", ...rest },\n  ref\n) {\n  return (\n    <li\n      data-testid={dataTestId}\n      {...rest}\n      ref={ref}\n      className={cn(\"smwb-kanban__card\", { \"smwb-kanban__card_link\": Boolean(href) }, className)}\n      style={{ ...style, \"--smwb-kanban-title-lines\": String(titleLines) } as CSSProperties}\n    >\n      {present(title) ? (\n        href ? (\n          <a className=\"smwb-kanban__card-title\" href={href}>\n            {title}\n          </a>\n        ) : (\n          <div className=\"smwb-kanban__card-title\">{title}</div>\n        )\n      ) : null}\n      {present(children) ? <div className=\"smwb-kanban__card-body\">{children}</div> : null}\n    </li>\n  );\n});\n\nexport default Kanban;\n"],"names":["cssLength","value","present","Kanban","React","className","style","columnWidth","children","dataTestId","rest","ref","jsx","cn","KanbanColumn","title","count","accent","empty","footer","titleId","useId","hasCards","jsxs","KanbanCard","href","titleLines"],"mappings":"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"}

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

@@ -0,0 +1,25 @@
+import { jsxs as b, jsx as a } from "react/jsx-runtime";
+import f, { useState as _ } from "react";
+import l from "clsx";
+import { useSafeLayoutEffect as K } from "../../../hooks/useSafeLayoutEffect.js";
+import { kbdKeyLabel as x, detectKbdPlatform as N } from "./kbdKeys.js";
+function j(e) {
+  const [s, n] = _("other");
+  return K(() => {
+    e === void 0 && n(N());
+  }, [e]), e != null ? e : s;
+}
+const g = f.forwardRef(function({ className: s, keys: n, platform: u, separator: c, label: m, "data-testid": k = "kbd", ...h }, p) {
+  const d = j(u), o = n.map((t) => x(t, d)), r = c != null ? c : d === "mac" ? "" : "+", w = m != null ? m : o.map((t) => t.name).join(d === "mac" ? " " : "+");
+  return /* @__PURE__ */ b("kbd", { ...h, ref: p, "data-testid": k, "data-platform": d, className: l("smwb-kbd", s), children: [
+    /* @__PURE__ */ a("span", { className: "smwb-kbd__text", children: w }),
+    o.map((t, i) => /* @__PURE__ */ b(f.Fragment, { children: [
+      i > 0 && r !== "" ? /* @__PURE__ */ a("span", { className: "smwb-kbd__separator", "aria-hidden": "true", children: r }) : null,
+      /* @__PURE__ */ a("kbd", { className: "smwb-kbd__key", "aria-hidden": "true", children: t.text })
+    ] }, i))
+  ] });
+});
+export {
+  g as Kbd
+};
+//# sourceMappingURL=kbd.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.js","sources":["../../../../../src/components/dataDisplay/kbd/kbd.tsx"],"sourcesContent":["import React, { type HTMLAttributes, useState } from \"react\";\nimport cn from \"clsx\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\nimport { detectKbdPlatform, kbdKeyLabel, type KbdPlatform } from \"./kbdKeys\";\n\nexport interface KbdProps extends Omit<HTMLAttributes<HTMLElement>, \"children\"> {\n  className?: string;\n  /**\n   * The keys of the shortcut in order, e.g. `[\"Mod\", \"K\"]` or `[\"Shift\", \"Enter\"]`. `Mod` is the\n   * Command key on macOS and Ctrl elsewhere. On macOS, `Shift`, `Alt`/`Option`, `Ctrl`/`Control`,\n   * `Meta`/`Cmd`/`Command`, `Enter`, `Escape`, `Tab`, `Backspace` and `Delete` are drawn as the\n   * symbols of the Mac keyboard; elsewhere the same names are drawn as Ctrl, Alt, Shift, Meta, Enter,\n   * Esc, Tab, Backspace and Del, whatever their case. `\" \"` and `Space` are the Space key, `+` and\n   * `Plus` the plus key.\n   * Arrow names (`ArrowUp` or `Up`, …) are arrows everywhere; any other key is drawn as given\n   * (a single letter in upper case).\n   */\n  keys: string[];\n  /**\n   * The platform whose keys are drawn. Without it the browser's own is used: `other` on the\n   * server and in the first client render (so that hydration matches), `mac` right after on a Mac.\n   * Set it for a fixed look, in stories and in tests.\n   */\n  platform?: KbdPlatform;\n  /**\n   * Drawn between the key caps. By default `+` on `other` and nothing on `mac`, where the symbols\n   * stand side by side; `\"\"` draws none. It is for the eye only; assistive technology reads `label`.\n   */\n  separator?: string;\n  /**\n   * What assistive technology reads instead of the key caps. By default the key names, joined\n   * with `+` on `other` (\"Ctrl+K\") and with a space on `mac` (\"Command K\").\n   */\n  label?: string;\n  /** Test id of the root `<kbd>`; `kbd` unless given. */\n  \"data-testid\"?: string;\n}\n\n/** The platform asked for, or the browser's: `other` until the client has mounted. */\nfunction useKbdPlatform(platform: KbdPlatform | undefined): KbdPlatform {\n  const [detected, setDetected] = useState<KbdPlatform>(\"other\");\n  useSafeLayoutEffect(() => {\n    if (platform === undefined) {\n      setDetected(detectKbdPlatform());\n    }\n  }, [platform]);\n  return platform ?? detected;\n}\n\n/**\n * A keyboard shortcut as key caps, for a tooltip, a menu item or a command palette. The root and\n * every cap are `<kbd>`; assistive technology reads one text (\"Ctrl+K\", \"Command K\") and skips the caps.\n */\nexport const Kbd = React.forwardRef<HTMLElement, KbdProps>(function Kbd(\n  { className, keys, platform: platformProp, separator, label, \"data-testid\": dataTestId = \"kbd\", ...rest },\n  ref\n) {\n  const platform = useKbdPlatform(platformProp);\n  const labels = keys.map((key) => kbdKeyLabel(key, platform));\n  const between = separator ?? (platform === \"mac\" ? \"\" : \"+\");\n  const spoken = label ?? labels.map((item) => item.name).join(platform === \"mac\" ? \" \" : \"+\");\n\n  return (\n    <kbd {...rest} ref={ref} data-testid={dataTestId} data-platform={platform} className={cn(\"smwb-kbd\", className)}>\n      <span className=\"smwb-kbd__text\">{spoken}</span>\n      {labels.map((item, index) => (\n        <React.Fragment key={index}>\n          {index > 0 && between !== \"\" ? (\n            <span className=\"smwb-kbd__separator\" aria-hidden=\"true\">\n              {between}\n            </span>\n          ) : null}\n          <kbd className=\"smwb-kbd__key\" aria-hidden=\"true\">\n            {item.text}\n          </kbd>\n        </React.Fragment>\n      ))}\n    </kbd>\n  );\n});\n\nexport default Kbd;\n"],"names":["useKbdPlatform","platform","detected","setDetected","useState","useSafeLayoutEffect","detectKbdPlatform","Kbd","React","className","keys","platformProp","separator","label","dataTestId","rest","ref","labels","key","kbdKeyLabel","between","spoken","item","jsxs","cn","jsx","index"],"mappings":";;;;;AAuCA,SAASA,EAAeC,GAAgD;AACtE,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAsB,OAAO;AAC7D,SAAAC,EAAoB,MAAM;AACxB,IAAIJ,MAAa,UACfE,EAAYG,GAAmB;AAAA,EAEnC,GAAG,CAACL,CAAQ,CAAC,GACNA,KAAA,OAAAA,IAAYC;AACrB;AAMO,MAAMK,IAAMC,EAAM,WAAkC,SACzD,EAAE,WAAAC,GAAW,MAAAC,GAAM,UAAUC,GAAc,WAAAC,GAAW,OAAAC,GAAO,eAAeC,IAAa,OAAO,GAAGC,EAAA,GACnGC,GACA;AACA,QAAMf,IAAWD,EAAeW,CAAY,GACtCM,IAASP,EAAK,IAAI,CAACQ,MAAQC,EAAYD,GAAKjB,CAAQ,CAAC,GACrDmB,IAAUR,KAAA,OAAAA,IAAcX,MAAa,QAAQ,KAAK,KAClDoB,IAASR,KAAA,OAAAA,IAASI,EAAO,IAAI,CAACK,MAASA,EAAK,IAAI,EAAE,KAAKrB,MAAa,QAAQ,MAAM,GAAG;AAE3F,SACE,gBAAAsB,EAAC,OAAA,EAAK,GAAGR,GAAM,KAAAC,GAAU,eAAaF,GAAY,iBAAeb,GAAU,WAAWuB,EAAG,YAAYf,CAAS,GAC5G,UAAA;AAAA,IAAA,gBAAAgB,EAAC,QAAA,EAAK,WAAU,kBAAkB,UAAAJ,GAAO;AAAA,IACxCJ,EAAO,IAAI,CAACK,GAAMI,MACjB,gBAAAH,EAACf,EAAM,UAAN,EACE,UAAA;AAAA,MAAAkB,IAAQ,KAAKN,MAAY,KACxB,gBAAAK,EAAC,QAAA,EAAK,WAAU,uBAAsB,eAAY,QAC/C,UAAAL,EAAA,CACH,IACE;AAAA,wBACH,OAAA,EAAI,WAAU,iBAAgB,eAAY,QACxC,YAAK,KAAA,CACR;AAAA,IAAA,EAAA,GARmBM,CASrB,CACD;AAAA,EAAA,GACH;AAEJ,CAAC;"}