@smwb/ui-react 2.6.3 → 2.8.0

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

@@ -1 +1 @@
-{"version":3,"file":"chipGroup.js","sources":["../../../../src/components/dataDisplay/chipGroup/chipGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Chip, type ChipColor } from \"../chip\";\n\nexport interface ChipGroupOption {\n  value: string;\n  label: string;\n  icon?: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport interface ChipGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  options: ChipGroupOption[];\n  /** Selected value (single) or values (when `multiple`). */\n  value?: string | string[];\n  /** Allow more than one selected chip (value becomes a string[]). */\n  multiple?: boolean;\n  onChange?: (value: string | string[]) => void;\n  size?: \"small\" | \"medium\";\n  color?: ChipColor;\n  disabled?: boolean;\n}\n\n/**\n * A multi/single-select toggle group built on `Chip` — the \"chip as a toggle\"\n * loop (selected → filled, else outlined; `role=group`) apps re-hand-roll for\n * filters / segmented controls. Pass an `options` array and a controlled\n * `value`; `onChange` returns the next value (string, or string[] when multiple).\n */\nexport function ChipGroup({\n  options,\n  value,\n  multiple,\n  onChange,\n  size = \"medium\",\n  color = \"primary\",\n  disabled,\n  className,\n  ...rest\n}: ChipGroupProps): React.ReactElement {\n  const selectedValues = (): string[] => {\n    if (value == null) return [];\n    return Array.isArray(value) ? value : [value];\n  };\n  const isSelected = (option: string): boolean => selectedValues().includes(option);\n\n  const toggle = (option: string): void => {\n    if (multiple) {\n      const current = selectedValues();\n      const next = current.includes(option) ? current.filter((v) => v !== option) : [...current, option];\n      onChange?.(next);\n    } else {\n      onChange?.(option);\n    }\n  };\n\n  return (\n    <div {...rest} role=\"group\" className={cn(\"smwb-chip-group\", className)}>\n      {options.map((option) => (\n        <Chip\n          key={option.value}\n          label={option.label}\n          icon={option.icon}\n          size={size}\n          color={color}\n          selected={isSelected(option.value)}\n          variant={isSelected(option.value) ? \"filled\" : \"outlined\"}\n          disabled={!!(disabled || option.disabled)}\n          onClick={() => toggle(option.value)}\n        />\n      ))}\n    </div>\n  );\n}\n\nexport default ChipGroup;\n"],"names":["ChipGroup","options","value","multiple","onChange","size","color","disabled","className","rest","selectedValues","isSelected","option","toggle","current","next","v","jsx","cn","Chip"],"mappings":";;;;AA8BO,SAASA,EAAU;AAAA,EACxB,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAuC;AACrC,QAAMC,IAAiB,MACjBR,KAAS,OAAa,CAAA,IACnB,MAAM,QAAQA,CAAK,IAAIA,IAAQ,CAACA,CAAK,GAExCS,IAAa,CAACC,MAA4BF,EAAA,EAAiB,SAASE,CAAM,GAE1EC,IAAS,CAACD,MAAyB;AACvC,QAAIT,GAAU;AACZ,YAAMW,IAAUJ,EAAA,GACVK,IAAOD,EAAQ,SAASF,CAAM,IAAIE,EAAQ,OAAO,CAACE,MAAMA,MAAMJ,CAAM,IAAI,CAAC,GAAGE,GAASF,CAAM;AACjG,MAAAR,KAAA,QAAAA,EAAWW;AAAA,IACb;AACE,MAAAX,KAAA,QAAAA,EAAWQ;AAAA,EAEf;AAEA,SACE,gBAAAK,EAAC,OAAA,EAAK,GAAGR,GAAM,MAAK,SAAQ,WAAWS,EAAG,mBAAmBV,CAAS,GACnE,UAAAP,EAAQ,IAAI,CAACW,MACZ,gBAAAK;AAAA,IAACE;AAAA,IAAA;AAAA,MAEC,OAAOP,EAAO;AAAA,MACd,MAAMA,EAAO;AAAA,MACb,MAAAP;AAAA,MACA,OAAAC;AAAA,MACA,UAAUK,EAAWC,EAAO,KAAK;AAAA,MACjC,SAASD,EAAWC,EAAO,KAAK,IAAI,WAAW;AAAA,MAC/C,UAAU,CAAC,EAAEL,KAAYK,EAAO;AAAA,MAChC,SAAS,MAAMC,EAAOD,EAAO,KAAK;AAAA,IAAA;AAAA,IAR7BA,EAAO;AAAA,EAAA,CAUf,GACH;AAEJ;"}
+{"version":3,"file":"chipGroup.js","sources":["../../../../src/components/dataDisplay/chipGroup/chipGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Chip, type ChipColor } from \"../chip\";\n\nexport interface ChipGroupOption {\n  value: string;\n  label: string;\n  icon?: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport interface ChipGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  options: ChipGroupOption[];\n  /** Selected value (single) or values (when `multiple`). */\n  value?: string | string[];\n  /** Allow more than one selected chip (value becomes a string[]). */\n  multiple?: boolean;\n  onChange?: (value: string | string[]) => void;\n  size?: \"small\" | \"medium\";\n  color?: ChipColor;\n  disabled?: boolean;\n}\n\n/**\n * A multi/single-select toggle group built on `Chip` — the \"chip as a toggle\"\n * loop (selected → filled, else outlined; `role=group`) apps re-hand-roll for\n * filters / segmented controls. Pass an `options` array and a controlled\n * `value`; `onChange` returns the next value (string, or string[] when multiple).\n */\nexport function ChipGroup({\n  options,\n  value,\n  multiple,\n  onChange,\n  size = \"medium\",\n  color = \"primary\",\n  disabled,\n  className,\n  ...rest\n}: ChipGroupProps): React.ReactElement {\n  const selectedValues = (): string[] => {\n    if (value == null) return [];\n    return Array.isArray(value) ? value : [value];\n  };\n  const isSelected = (option: string): boolean => selectedValues().includes(option);\n\n  const toggle = (option: string): void => {\n    if (multiple) {\n      const current = selectedValues();\n      const next = current.includes(option) ? current.filter((v) => v !== option) : [...current, option];\n      onChange?.(next);\n    } else {\n      onChange?.(option);\n    }\n  };\n\n  return (\n    // role=\"group\" is a default: the caller's own wins, and an explicit undefined keeps it.\n    <div {...rest} role={rest.role ?? \"group\"} className={cn(\"smwb-chip-group\", className)}>\n      {options.map((option) => (\n        <Chip\n          key={option.value}\n          label={option.label}\n          icon={option.icon}\n          size={size}\n          color={color}\n          selected={isSelected(option.value)}\n          variant={isSelected(option.value) ? \"filled\" : \"outlined\"}\n          disabled={!!(disabled || option.disabled)}\n          onClick={() => toggle(option.value)}\n        />\n      ))}\n    </div>\n  );\n}\n\nexport default ChipGroup;\n"],"names":["ChipGroup","options","value","multiple","onChange","size","color","disabled","className","rest","selectedValues","isSelected","option","toggle","current","next","v","_a","cn","jsx","Chip"],"mappings":";;;;;AA+BO,SAASA,EAAU;AAAA,EACxB,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAuC;;AACrC,QAAMC,IAAiB,MACjBR,KAAS,OAAa,CAAA,IACnB,MAAM,QAAQA,CAAK,IAAIA,IAAQ,CAACA,CAAK,GAExCS,IAAa,CAACC,MAA4BF,EAAA,EAAiB,SAASE,CAAM,GAE1EC,IAAS,CAACD,MAAyB;AACvC,QAAIT,GAAU;AACZ,YAAMW,IAAUJ,EAAA,GACVK,IAAOD,EAAQ,SAASF,CAAM,IAAIE,EAAQ,OAAO,CAACE,MAAMA,MAAMJ,CAAM,IAAI,CAAC,GAAGE,GAASF,CAAM;AACjG,MAAAR,KAAA,QAAAA,EAAWW;AAAA,IACb;AACE,MAAAX,KAAA,QAAAA,EAAWQ;AAAA,EAEf;AAEA;AAAA;AAAA,sBAEG,OAAA,EAAK,GAAGH,GAAM,OAAMQ,IAAAR,EAAK,SAAL,OAAAQ,IAAa,SAAS,WAAWC,EAAG,mBAAmBV,CAAS,GAClF,UAAAP,EAAQ,IAAI,CAACW,MACZ,gBAAAO;AAAA,MAACC;AAAA,MAAA;AAAA,QAEC,OAAOR,EAAO;AAAA,QACd,MAAMA,EAAO;AAAA,QACb,MAAAP;AAAA,QACA,OAAAC;AAAA,QACA,UAAUK,EAAWC,EAAO,KAAK;AAAA,QACjC,SAASD,EAAWC,EAAO,KAAK,IAAI,WAAW;AAAA,QAC/C,UAAU,CAAC,EAAEL,KAAYK,EAAO;AAAA,QAChC,SAAS,MAAMC,EAAOD,EAAO,KAAK;AAAA,MAAA;AAAA,MAR7BA,EAAO;AAAA,IAAA,CAUf,EAAA,CACH;AAAA;AAEJ;"}

package/dist/components/dataDisplay/descriptionList/descriptionList.d.ts

@@ -0,0 +1,45 @@
+import React, { HTMLAttributes, ReactNode } from "react";
+export interface DescriptionListEntry {
+    term: ReactNode;
+    description: ReactNode;
+    /** React key; the index is used without it. */
+    key?: React.Key;
+}
+/**
+ * `auto`: the term beside its description while the list is at least 420px
+ * wide, above it when narrower (a container query on the list itself). `row`
+ * and `stacked` fix one layout.
+ */
+export type DescriptionListLayout = "auto" | "row" | "stacked";
+export interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {
+    className?: string;
+    /** The pairs as data; `DescriptionItem` children work too, and come after them. */
+    items?: DescriptionListEntry[];
+    /**
+     * "auto" (default): each term beside its value while the list is at least
+     * 420px wide, above it when narrower — the list's own width decides. So its
+     * content does not widen it: where the parent takes its width from its
+     * content (a flex item that does not grow, a popover, a table cell) the list
+     * has no width; give it one there, or use "row" / "stacked", which fix one
+     * layout and take their width from their content.
+     */
+    layout?: DescriptionListLayout;
+    /** Width of the term column in the row layout: px or any CSS track size. 30% of the list, at least 6rem, by default. */
+    termWidth?: number | string;
+    /** Tighter spacing, for side panels. */
+    dense?: boolean;
+}
+export interface DescriptionItemProps extends HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    /** The field's name. */
+    term: ReactNode;
+}
+/** One pair: the term and, as children, its description. */
+export declare const DescriptionItem: React.ForwardRefExoticComponent<DescriptionItemProps & {
+    children?: ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+/** Field–value pairs (a `<dl>`): side by side, stacking on a narrow container. */
+export declare const DescriptionList: React.ForwardRefExoticComponent<DescriptionListProps & {
+    children?: ReactNode | undefined;
+} & React.RefAttributes<HTMLDListElement>>;
+export default DescriptionList;

package/dist/components/dataDisplay/descriptionList/descriptionList.js

@@ -0,0 +1,43 @@
+import { jsxs as p, jsx as n } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/descriptionList/descriptionList.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                                         */
+import m from "react";
+import l from "clsx";
+const x = m.forwardRef(
+  function({ className: t, term: r, children: i, ...e }, s) {
+    return /* @__PURE__ */ p("div", { ...e, ref: s, className: l("smwb-description-list__item", t), children: [
+      /* @__PURE__ */ n("dt", { className: "smwb-description-list__term", children: r }),
+      /* @__PURE__ */ n("dd", { className: "smwb-description-list__details", children: i })
+    ] });
+  }
+), v = m.forwardRef(
+  function({ className: t, style: r, items: i, layout: e = "auto", termWidth: s, dense: f, children: w, ...b }, _) {
+    const c = typeof s == "number" ? `${s}px` : s;
+    return /* @__PURE__ */ p(
+      "dl",
+      {
+        ...b,
+        ref: _,
+        className: l(
+          "smwb-description-list",
+          `smwb-description-list_${e}`,
+          { "smwb-description-list_dense": f },
+          t
+        ),
+        style: c === void 0 ? r : { ...r, "--smwb-description-term": c },
+        children: [
+          i == null ? void 0 : i.map((o, u) => {
+            var d;
+            return /* @__PURE__ */ n(x, { term: o.term, children: o.description }, (d = o.key) != null ? d : u);
+          }),
+          w
+        ]
+      }
+    );
+  }
+);
+export {
+  x as DescriptionItem,
+  v as DescriptionList
+};
+//# sourceMappingURL=descriptionList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"descriptionList.js","sources":["../../../../src/components/dataDisplay/descriptionList/descriptionList.tsx"],"sourcesContent":["import React, { CSSProperties, HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport cn from \"clsx\";\n\nexport interface DescriptionListEntry {\n  term: ReactNode;\n  description: ReactNode;\n  /** React key; the index is used without it. */\n  key?: React.Key;\n}\n\n/**\n * `auto`: the term beside its description while the list is at least 420px\n * wide, above it when narrower (a container query on the list itself). `row`\n * and `stacked` fix one layout.\n */\nexport type DescriptionListLayout = \"auto\" | \"row\" | \"stacked\";\n\nexport interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {\n  className?: string;\n  /** The pairs as data; `DescriptionItem` children work too, and come after them. */\n  items?: DescriptionListEntry[];\n  /**\n   * \"auto\" (default): each term beside its value while the list is at least\n   * 420px wide, above it when narrower — the list's own width decides. So its\n   * content does not widen it: where the parent takes its width from its\n   * content (a flex item that does not grow, a popover, a table cell) the list\n   * has no width; give it one there, or use \"row\" / \"stacked\", which fix one\n   * layout and take their width from their content.\n   */\n  layout?: DescriptionListLayout;\n  /** Width of the term column in the row layout: px or any CSS track size. 30% of the list, at least 6rem, by default. */\n  termWidth?: number | string;\n  /** Tighter spacing, for side panels. */\n  dense?: boolean;\n}\n\nexport interface DescriptionItemProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /** The field's name. */\n  term: ReactNode;\n}\n\n/** One pair: the term and, as children, its description. */\nexport const DescriptionItem = React.forwardRef<HTMLDivElement, PropsWithChildren<DescriptionItemProps>>(\n  function DescriptionItem({ className, term, children, ...rest }, ref) {\n    return (\n      <div {...rest} ref={ref} className={cn(\"smwb-description-list__item\", className)}>\n        <dt className=\"smwb-description-list__term\">{term}</dt>\n        <dd className=\"smwb-description-list__details\">{children}</dd>\n      </div>\n    );\n  }\n);\n\n/** Field–value pairs (a `<dl>`): side by side, stacking on a narrow container. */\nexport const DescriptionList = React.forwardRef<HTMLDListElement, PropsWithChildren<DescriptionListProps>>(\n  function DescriptionList({ className, style, items, layout = \"auto\", termWidth, dense, children, ...rest }, ref) {\n    const width = typeof termWidth === \"number\" ? `${termWidth}px` : termWidth;\n    return (\n      <dl\n        {...rest}\n        ref={ref}\n        className={cn(\n          \"smwb-description-list\",\n          `smwb-description-list_${layout}`,\n          { \"smwb-description-list_dense\": dense },\n          className\n        )}\n        style={width === undefined ? style : ({ ...style, \"--smwb-description-term\": width } as CSSProperties)}\n      >\n        {items?.map((item, index) => (\n          <DescriptionItem key={item.key ?? index} term={item.term}>\n            {item.description}\n          </DescriptionItem>\n        ))}\n        {children}\n      </dl>\n    );\n  }\n);\n\nexport default DescriptionList;\n"],"names":["DescriptionItem","React","className","term","children","rest","ref","jsxs","cn","jsx","DescriptionList","style","items","layout","termWidth","dense","width","item","index","_a"],"mappings":";;;;;AA6CO,MAAMA,IAAkBC,EAAM;AAAA,EACnC,SAAyB,EAAE,WAAAC,GAAW,MAAAC,GAAM,UAAAC,GAAU,GAAGC,EAAA,GAAQC,GAAK;AACpE,WACE,gBAAAC,EAAC,SAAK,GAAGF,GAAM,KAAAC,GAAU,WAAWE,EAAG,+BAA+BN,CAAS,GAC7E,UAAA;AAAA,MAAA,gBAAAO,EAAC,MAAA,EAAG,WAAU,+BAA+B,UAAAN,GAAK;AAAA,MAClD,gBAAAM,EAAC,MAAA,EAAG,WAAU,kCAAkC,UAAAL,EAAA,CAAS;AAAA,IAAA,GAC3D;AAAA,EAEJ;AACF,GAGaM,IAAkBT,EAAM;AAAA,EACnC,SAAyB,EAAE,WAAAC,GAAW,OAAAS,GAAO,OAAAC,GAAO,QAAAC,IAAS,QAAQ,WAAAC,GAAW,OAAAC,GAAO,UAAAX,GAAU,GAAGC,EAAA,GAAQC,GAAK;AAC/G,UAAMU,IAAQ,OAAOF,KAAc,WAAW,GAAGA,CAAS,OAAOA;AACjE,WACE,gBAAAP;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGF;AAAA,QACJ,KAAAC;AAAA,QACA,WAAWE;AAAA,UACT;AAAA,UACA,yBAAyBK,CAAM;AAAA,UAC/B,EAAE,+BAA+BE,EAAA;AAAA,UACjCb;AAAA,QAAA;AAAA,QAEF,OAAOc,MAAU,SAAYL,IAAS,EAAE,GAAGA,GAAO,2BAA2BK,EAAA;AAAA,QAE5E,UAAA;AAAA,UAAAJ,KAAA,gBAAAA,EAAO,IAAI,CAACK,GAAMC,MAAA;;qCAChBlB,GAAA,EAAwC,MAAMiB,EAAK,MACjD,UAAAA,EAAK,YAAA,IADcE,IAAAF,EAAK,QAAL,OAAAE,IAAYD,CAElC;AAAA;AAAA,UAEDd;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}

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

@@ -0,0 +1,2 @@
+export { DescriptionList, DescriptionItem, default } from "./descriptionList";
+export type { DescriptionListProps, DescriptionItemProps, DescriptionListEntry, DescriptionListLayout, } from "./descriptionList";

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

@@ -1,174 +1,220 @@
-import { jsxs as t, jsx as n, Fragment as C } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/expansionPanel/expansionPanel.entry.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 { 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 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, ne = 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 {
-  ne as ExpansionPanel,
-  ne 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/imagesList/imagesList.js

@@ -1,21 +1,22 @@
-import { jsx as a } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/imagesList/imagesList.entry.css';/* empty css                                                               */
+import { jsx as t } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/imagesList/imagesList.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                               */
 import { forwardRef as f } from "react";
-import s from "clsx";
-import { ImagesListContext as n } from "./imagesListContext.js";
-const y = f(function({ className: t, children: r, gap: l = 4, cols: i = 3, rowsHeight: m = 0, variant: e = "default", "aria-label": o, id: c }, d) {
-  return /* @__PURE__ */ a(n.Provider, { value: { rowsHeight: m, variant: e }, children: /* @__PURE__ */ a("div", { className: s("smwb-gallery", t), "data-testid": "images-list", ref: d, id: c, children: /* @__PURE__ */ a(
+import e from "clsx";
+import { ImagesListContext as p } from "./imagesListContext.js";
+const I = f(function({ className: r, children: s, gap: l = 4, cols: i = 3, rowsHeight: m = 0, variant: a = "default", "aria-label": o, id: c }, d) {
+  return /* @__PURE__ */ t(p.Provider, { value: { rowsHeight: m, variant: a }, children: /* @__PURE__ */ t("div", { className: e("smwb-gallery", r), "data-testid": "images-list", ref: d, id: c, children: /* @__PURE__ */ t(
     "ul",
     {
       "aria-label": o,
-      className: s("smwb-gallery__list", `smwb-${e}`),
+      className: e("smwb-gallery__list", `smwb-${a}`),
       style: { "--cols-count": i, "--gap": `${l}px` },
-      children: r
+      children: s
     }
   ) }) });
 });
 export {
-  y as ImagesList,
-  y as default
+  I as ImagesList,
+  I as default
 };
 //# sourceMappingURL=imagesList.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"imagesList.js","sources":["../../../../src/components/dataDisplay/imagesList/imagesList.tsx"],"sourcesContent":["import React, { CSSProperties, forwardRef, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\nimport { ImagesListContext } from \"./imagesListContext\";\n\nexport interface ImagesListProps {\n  className?: string;\n  rowsHeight?: number;\n  cols: number;\n  variant?: \"woven\" | \"masonry\" | \"default\";\n  gap?: number;\n  /** Accessible label for the image list. */\n  \"aria-label\"?: string;\n  id?: string;\n}\n\nexport const ImagesList = forwardRef<HTMLDivElement, PropsWithChildren<ImagesListProps>>(function ImagesList(\n  { className, children, gap = 4, cols = 3, rowsHeight = 0, variant = \"default\", \"aria-label\": ariaLabel, id },\n  ref\n) {\n  return (\n    <ImagesListContext.Provider value={{ rowsHeight, variant }}>\n      <div className={cn(\"smwb-gallery\", className)} data-testid=\"images-list\" ref={ref} id={id}>\n        <ul\n          aria-label={ariaLabel}\n          className={cn(\"smwb-gallery__list\", `smwb-${variant}`)}\n          style={{ \"--cols-count\": cols, \"--gap\": `${gap}px` } as CSSProperties}\n        >\n          {children}\n        </ul>\n      </div>\n    </ImagesListContext.Provider>\n  );\n});\n\nexport default ImagesList;\n"],"names":["ImagesList","forwardRef","className","children","gap","cols","rowsHeight","variant","ariaLabel","id","ref","ImagesListContext","cn","jsx"],"mappings":";;;;;AAgBO,MAAMA,IAAaC,EAA+D,SACvF,EAAE,WAAAC,GAAW,UAAAC,GAAU,KAAAC,IAAM,GAAG,MAAAC,IAAO,GAAG,YAAAC,IAAa,GAAG,SAAAC,IAAU,WAAW,cAAcC,GAAW,IAAAC,EAAA,GACxGC,GACA;AACA,2BACGC,EAAkB,UAAlB,EAA2B,OAAO,EAAE,YAAAL,GAAY,SAAAC,EAAA,GAC/C,4BAAC,OAAA,EAAI,WAAWK,EAAG,gBAAgBV,CAAS,GAAG,eAAY,eAAc,KAAAQ,GAAU,IAAAD,GACjF,UAAA,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAYL;AAAA,MACZ,WAAWI,EAAG,sBAAsB,QAAQL,CAAO,EAAE;AAAA,MACrD,OAAO,EAAE,gBAAgBF,GAAM,SAAS,GAAGD,CAAG,KAAA;AAAA,MAE7C,UAAAD;AAAA,IAAA;AAAA,EAAA,GAEL,EAAA,CACF;AAEJ,CAAC;"}
+{"version":3,"file":"imagesList.js","sources":["../../../../src/components/dataDisplay/imagesList/imagesList.tsx"],"sourcesContent":["import React, { CSSProperties, forwardRef, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\nimport { ImagesListContext } from \"./imagesListContext\";\n\nexport interface ImagesListProps {\n  className?: string;\n  rowsHeight?: number;\n  cols: number;\n  variant?: \"woven\" | \"masonry\" | \"default\";\n  gap?: number;\n  /** Accessible label for the image list. */\n  \"aria-label\"?: string;\n  id?: string;\n}\n\nexport const ImagesList = forwardRef<HTMLDivElement, PropsWithChildren<ImagesListProps>>(function ImagesList(\n  { className, children, gap = 4, cols = 3, rowsHeight = 0, variant = \"default\", \"aria-label\": ariaLabel, id },\n  ref\n) {\n  return (\n    <ImagesListContext.Provider value={{ rowsHeight, variant }}>\n      <div className={cn(\"smwb-gallery\", className)} data-testid=\"images-list\" ref={ref} id={id}>\n        <ul\n          aria-label={ariaLabel}\n          className={cn(\"smwb-gallery__list\", `smwb-${variant}`)}\n          style={{ \"--cols-count\": cols, \"--gap\": `${gap}px` } as CSSProperties}\n        >\n          {children}\n        </ul>\n      </div>\n    </ImagesListContext.Provider>\n  );\n});\n\nexport default ImagesList;\n"],"names":["ImagesList","forwardRef","className","children","gap","cols","rowsHeight","variant","ariaLabel","id","ref","ImagesListContext","cn","jsx"],"mappings":";;;;;;AAiBO,MAAMA,IAAaC,EAA+D,SACvF,EAAE,WAAAC,GAAW,UAAAC,GAAU,KAAAC,IAAM,GAAG,MAAAC,IAAO,GAAG,YAAAC,IAAa,GAAG,SAAAC,IAAU,WAAW,cAAcC,GAAW,IAAAC,EAAA,GACxGC,GACA;AACA,2BACGC,EAAkB,UAAlB,EAA2B,OAAO,EAAE,YAAAL,GAAY,SAAAC,EAAA,GAC/C,4BAAC,OAAA,EAAI,WAAWK,EAAG,gBAAgBV,CAAS,GAAG,eAAY,eAAc,KAAAQ,GAAU,IAAAD,GACjF,UAAA,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAYL;AAAA,MACZ,WAAWI,EAAG,sBAAsB,QAAQL,CAAO,EAAE;AAAA,MACrD,OAAO,EAAE,gBAAgBF,GAAM,SAAS,GAAGD,CAAG,KAAA;AAAA,MAE7C,UAAAD;AAAA,IAAA;AAAA,EAAA,GAEL,EAAA,CACF;AAEJ,CAAC;"}