@smwb/ui-react 2.7.0 → 2.9.0

package/dist/components/dataDisplay/diffStat/diffStat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diffStat.js","sources":["../../../../src/components/dataDisplay/diffStat/diffStat.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\";\nimport cn from \"clsx\";\n\n/** How many cells the bar has. */\nexport const DIFF_STAT_CELLS = 5;\n\n/** One cell of the bar: whose it is, or nobody's. */\nexport type DiffStatCell = \"added\" | \"removed\" | \"neutral\";\n\n/** The accessible name, built from the two counts as numbers (already normalised by `diffStatCount`). */\nexport type DiffStatFormat = (added: number, removed: number) => string;\n\n// A narrow no-break space: the grouping separator, so a figure cannot break across lines.\nconst GROUP_SEPARATOR = \"\\u202f\";\n\n/** \"added 12345, removed 3\" — the default accessible name; plain digits, so a speech engine reads one number. */\nexport const DEFAULT_DIFF_STAT_FORMAT: DiffStatFormat = (added, removed) => `added ${added}, removed ${removed}`;\n\n/**\n * A count as the component takes it: a whole number, never below 0. Fractions are cut off,\n * negative counts are 0, and so are NaN, `undefined` and ±Infinity (data that has not\n * arrived yet, or arrived broken). The figures, the accessible name and the bar all use this\n * one value, so they cannot disagree.\n */\nexport function diffStatCount(value: number): number {\n  return Number.isFinite(value) ? Math.max(0, Math.trunc(value)) : 0;\n}\n\n/**\n * A count (as `diffStatCount` takes it) as digits, grouped by three with U+202F NARROW NO-BREAK SPACE (\"1\\u202f234\"), the\n * fraction dropped. The separator is fixed rather than taken from a locale on purpose: the\n * server and the browser would group the same figure differently and break hydration. Pass\n * `group` to an app that knows its reader's locale.\n */\nexport function groupDiffStatCount(value: number): string {\n  return String(diffStatCount(value)).replace(/\\B(?=(\\d{3})+(?!\\d))/g, GROUP_SEPARATOR);\n}\n\n/**\n * Which cell belongs to which side (counts as `diffStatCount` takes them): each takes `floor(DIFF_STAT_CELLS * its share)`, so the\n * cells the two sides leave over are neutral and 0 of 0 leaves all of them neutral. A side\n * under a fifth of the change reaches no cell and shows in its figure only.\n */\nexport function diffStatCells(added: number, removed: number): DiffStatCell[] {\n  const up = diffStatCount(added);\n  const down = diffStatCount(removed);\n  const all = up + down;\n  const cellsOf = (count: number, cell: DiffStatCell): DiffStatCell[] => Array.from({ length: count }, () => cell);\n  if (all === 0) return cellsOf(DIFF_STAT_CELLS, \"neutral\");\n\n  const upCells = Math.floor((DIFF_STAT_CELLS * up) / all);\n  const downCells = Math.floor((DIFF_STAT_CELLS * down) / all);\n  return [\n    ...cellsOf(upCells, \"added\"),\n    ...cellsOf(downCells, \"removed\"),\n    ...cellsOf(DIFF_STAT_CELLS - upCells - downCells, \"neutral\"),\n  ];\n}\n\nexport interface DiffStatProps extends Omit<HTMLAttributes<HTMLSpanElement>, \"role\"> {\n  className?: string;\n  /** Lines added; the figure behind \"+N\". NaN, `undefined`, Infinity and negatives count as 0. */\n  added: number;\n  /** Lines removed; the figure behind \"−M\". NaN, `undefined`, Infinity and negatives count as 0. */\n  removed: number;\n  /** The five cells beside the figures. Shown by default, hidden in `compact`; set it either way. */\n  bar?: boolean;\n  /** The tab variant: smaller figures, and no bar unless `bar` asks for one. */\n  compact?: boolean;\n  /** How the accessible name is made from the two counts, as numbers: `DEFAULT_DIFF_STAT_FORMAT` unless given. */\n  format?: DiffStatFormat;\n  /** How each figure is written (it gets the count as `diffStatCount` takes it): `groupDiffStatCount` — three digits per group — unless given. */\n  group?: (value: number) => string;\n  /** Test id of the root `<span>`; `diff-stat` unless given. */\n  \"data-testid\"?: string;\n}\n\n/**\n * How big a change is: \"+N −M\" with the two figures' counts, and a five-cell bar of the\n * same proportions. One accessible name for the whole (\"added N, removed M\"), so the\n * digits are not read twice; the bar is the theme's success and error, shaded toward the\n * surface ink to stay readable as text.\n */\nexport const DiffStat = React.forwardRef<HTMLSpanElement, DiffStatProps>(function DiffStat(\n  {\n    className,\n    added,\n    removed,\n    bar,\n    compact,\n    format = DEFAULT_DIFF_STAT_FORMAT,\n    group = groupDiffStatCount,\n    \"aria-label\": ariaLabel,\n    \"data-testid\": dataTestId = \"diff-stat\",\n    ...rest\n  },\n  ref\n) {\n  const upCount = diffStatCount(added);\n  const downCount = diffStatCount(removed);\n  const showBar = bar ?? !compact;\n  return (\n    <span\n      {...rest}\n      ref={ref}\n      role=\"img\"\n      aria-label={ariaLabel ?? format(upCount, downCount)}\n      data-testid={dataTestId}\n      className={cn(\"smwb-diff-stat\", { \"smwb-diff-stat_compact\": compact }, className)}\n    >\n      <span className=\"smwb-diff-stat__text\" aria-hidden=\"true\">\n        <span className=\"smwb-diff-stat__added\">{`+${group(upCount)}`}</span>\n        <span className=\"smwb-diff-stat__removed\">{`\\u2212${group(downCount)}`}</span>\n      </span>\n      {showBar ? (\n        <span className=\"smwb-diff-stat__bar\" aria-hidden=\"true\">\n          {diffStatCells(upCount, downCount).map((cell, index) => (\n            <span key={index} className={cn(\"smwb-diff-stat__cell\", `smwb-diff-stat__cell_${cell}`)} />\n          ))}\n        </span>\n      ) : null}\n    </span>\n  );\n});\n\nexport default DiffStat;\n"],"names":["DIFF_STAT_CELLS","GROUP_SEPARATOR","DEFAULT_DIFF_STAT_FORMAT","added","removed","diffStatCount","value","groupDiffStatCount","diffStatCells","up","down","all","cellsOf","count","cell","upCells","downCells","DiffStat","React","className","bar","compact","format","group","ariaLabel","dataTestId","rest","ref","upCount","downCount","showBar","jsxs","cn","jsx","index"],"mappings":";;;;;AAMO,MAAMA,IAAkB,GASzBC,IAAkB,KAGXC,IAA2C,CAACC,GAAOC,MAAY,SAASD,CAAK,aAAaC,CAAO;AAQvG,SAASC,EAAcC,GAAuB;AACnD,SAAO,OAAO,SAASA,CAAK,IAAI,KAAK,IAAI,GAAG,KAAK,MAAMA,CAAK,CAAC,IAAI;AACnE;AAQO,SAASC,EAAmBD,GAAuB;AACxD,SAAO,OAAOD,EAAcC,CAAK,CAAC,EAAE,QAAQ,yBAAyBL,CAAe;AACtF;AAOO,SAASO,EAAcL,GAAeC,GAAiC;AAC5E,QAAMK,IAAKJ,EAAcF,CAAK,GACxBO,IAAOL,EAAcD,CAAO,GAC5BO,IAAMF,IAAKC,GACXE,IAAU,CAACC,GAAeC,MAAuC,MAAM,KAAK,EAAE,QAAQD,KAAS,MAAMC,CAAI;AAC/G,MAAIH,MAAQ,EAAG,QAAOC,EAAQZ,GAAiB,SAAS;AAExD,QAAMe,IAAU,KAAK,MAAOf,IAAkBS,IAAME,CAAG,GACjDK,IAAY,KAAK,MAAOhB,IAAkBU,IAAQC,CAAG;AAC3D,SAAO;AAAA,IACL,GAAGC,EAAQG,GAAS,OAAO;AAAA,IAC3B,GAAGH,EAAQI,GAAW,SAAS;AAAA,IAC/B,GAAGJ,EAAQZ,IAAkBe,IAAUC,GAAW,SAAS;AAAA,EAAA;AAE/D;AA0BO,MAAMC,IAAWC,EAAM,WAA2C,SACvE;AAAA,EACE,WAAAC;AAAA,EACA,OAAAhB;AAAA,EACA,SAAAC;AAAA,EACA,KAAAgB;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC,IAASpB;AAAA,EACT,OAAAqB,IAAQhB;AAAA,EACR,cAAciB;AAAA,EACd,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAUvB,EAAcF,CAAK,GAC7B0B,IAAYxB,EAAcD,CAAO,GACjC0B,IAAUV,KAAA,OAAAA,IAAO,CAACC;AACxB,SACE,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGL;AAAA,MACJ,KAAAC;AAAA,MACA,MAAK;AAAA,MACL,cAAYH,KAAA,OAAAA,IAAaF,EAAOM,GAASC,CAAS;AAAA,MAClD,eAAaJ;AAAA,MACb,WAAWO,EAAG,kBAAkB,EAAE,0BAA0BX,EAAA,GAAWF,CAAS;AAAA,MAEhF,UAAA;AAAA,QAAA,gBAAAY,EAAC,QAAA,EAAK,WAAU,wBAAuB,eAAY,QACjD,UAAA;AAAA,UAAA,gBAAAE,EAAC,UAAK,WAAU,yBAAyB,cAAIV,EAAMK,CAAO,CAAC,GAAA,CAAG;AAAA,UAC9D,gBAAAK,EAAC,UAAK,WAAU,2BAA2B,cAASV,EAAMM,CAAS,CAAC,GAAA,CAAG;AAAA,QAAA,GACzE;AAAA,QACCC,IACC,gBAAAG,EAAC,QAAA,EAAK,WAAU,uBAAsB,eAAY,QAC/C,UAAAzB,EAAcoB,GAASC,CAAS,EAAE,IAAI,CAACf,GAAMoB,MAC5C,gBAAAD,EAAC,QAAA,EAAiB,WAAWD,EAAG,wBAAwB,wBAAwBlB,CAAI,EAAE,EAAA,GAA3EoB,CAA8E,CAC1F,EAAA,CACH,IACE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

package/dist/components/dataDisplay/diffStat/index.d.ts

@@ -0,0 +1,2 @@
+export { DiffStat, diffStatCells, diffStatCount, groupDiffStatCount, DEFAULT_DIFF_STAT_FORMAT, DIFF_STAT_CELLS, default, } from "./diffStat";
+export type { DiffStatProps, DiffStatCell, DiffStatFormat } from "./diffStat";

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

@@ -1,175 +1,220 @@
-import { jsxs as t, jsx as n, Fragment as C } from "react/jsx-runtime";
+import { jsxs as d, jsx as t, Fragment as V } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/expansionPanel/expansionPanel.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                                       */
-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 { forwardRef as ae, useState as ie, useRef as f, useEffect as F } from "react";
+import ce 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, le = 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 })
+), ke = 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, c] = de({
+    value: Q,
+    defaultValue: W,
+    onChange: X
+  }), s = { ...me, ...$ }, [v, oe] = ie(), 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 = () => c((e) => e === "row" ? "tile" : "row"), T = () => c("fullscreen"), I = () => c("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: c,
+    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(), c("tile"));
+    };
+    return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+  }, [a, L, c]), 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, i = document.activeElement;
+      let b;
+      i && i !== document.body && r.contains(i) ? (n.shiftKey ? i === _ || i === r : i === R) && (b = n.shiftKey ? R : _) : !j(r) && (!i || i === document.body || r.compareDocumentPosition(i) & 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: ce("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: () => c("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 && c("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 {
-  le as ExpansionPanel,
-  le as default
+  ke as ExpansionPanel,
+  ke as default
 };
 //# sourceMappingURL=expansionPanel.js.map

package/dist/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/components/dataDisplay/kanban/kanban.d.ts

@@ -6,6 +6,8 @@ export interface KanbanProps extends HTMLAttributes<HTMLDivElement> {
      * pixels or any CSS length. 15.5rem by default.
      */
     columnWidth?: number | string;
+    /** Test id of the root `<div>`; `kanban` unless given. */
+    "data-testid"?: string;
 }
 export interface KanbanColumnProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
     className?: string;
@@ -19,6 +21,8 @@ export interface KanbanColumnProps extends Omit<HTMLAttributes<HTMLDivElement>,
     empty?: ReactNode;
     /** Under the cards, e.g. a link to the rest as a list. */
     footer?: ReactNode;
+    /** Test id of the column's `<div>`; `kanban-column` unless given. */
+    "data-testid"?: string;
 }
 export interface KanbanCardProps extends Omit<HTMLAttributes<HTMLLIElement>, "title"> {
     className?: string;
@@ -28,6 +32,8 @@ export interface KanbanCardProps extends Omit<HTMLAttributes<HTMLLIElement>, "ti
     href?: string;
     /** Lines the title is clamped to: 3 by default. */
     titleLines?: number;
+    /** Test id of the card's `<li>`; `kanban-card` unless given. */
+    "data-testid"?: string;
 }
 /** A board: KanbanColumn children side by side, scrolling sideways when they do not fit. */
 export declare const Kanban: React.ForwardRefExoticComponent<KanbanProps & {

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

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