@smwb/ui-react 2.7.0 → 2.9.0

package/dist/components/layout/sectionHeader/sectionHeader.js

@@ -1,19 +1,20 @@
 import { jsxs as o, jsx as s } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/sectionHeader/sectionHeader.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                                     */
-import _, { useState as u } from "react";
-import w from "clsx";
-import { Icon as b } from "../../base/icon/icon.js";
-import { Tooltip as N } from "../../feedBack/tooltip/tooltip.js";
-function v({ text: a, label: n }) {
-  const [i, e] = u(!1);
-  return /* @__PURE__ */ s(
-    N,
+import u, { useState as w } from "react";
+import b from "clsx";
+import { Icon as N } from "../../base/icon/icon.js";
+import { useDismissOnEscape as v } from "../../../hooks/useDismissOnEscape.js";
+import { Tooltip as g } from "../../feedBack/tooltip/tooltip.js";
+function H({ text: i, label: t }) {
+  const [a, e] = w(!1);
+  return v(a, () => e(!1)), /* @__PURE__ */ s(
+    g,
     {
       className: "smwb-section-header__tooltip",
-      message: a,
+      message: i,
       trigger: "manual",
-      open: i,
+      open: a,
       placement: "top",
       offset: { offsetY: 6 },
       children: /* @__PURE__ */ s(
@@ -21,47 +22,56 @@ function v({ text: a, label: n }) {
         {
           className: "smwb-section-header__help",
           role: "img",
-          "aria-label": n != null ? n : a,
+          "aria-label": t != null ? t : i,
           tabIndex: 0,
           onPointerEnter: () => e(!0),
           onPointerLeave: () => e(!1),
           onFocus: () => e(!0),
           onBlur: () => e(!1),
-          onKeyDown: (t) => {
-            t.key === "Escape" && e(!1);
-          },
-          children: /* @__PURE__ */ s(b, { name: "help", size: 16 })
+          children: /* @__PURE__ */ s(N, { name: "help", size: 16 })
         }
       )
     }
   );
 }
-const I = _.forwardRef(
-  function({ className: n, title: i, level: e = 2, count: t, help: r, helpLabel: m, titleId: d, subtitle: c, children: l, ...h }, p) {
-    const f = `h${e}`;
+const $ = u.forwardRef(
+  function({
+    className: t,
+    title: a,
+    level: e = 2,
+    count: n,
+    help: r,
+    helpLabel: l,
+    titleId: d,
+    subtitle: c,
+    children: m,
+    "data-testid": h = "section-header",
+    ...p
+  }, f) {
+    const _ = `h${e}`;
     return /* @__PURE__ */ o(
       "header",
       {
-        "data-testid": "section-header",
-        ...h,
-        ref: p,
-        className: w("smwb-section-header", `smwb-section-header_level-${e}`, n),
+        "data-testid": h,
+        ...p,
+        ref: f,
+        className: b("smwb-section-header", `smwb-section-header_level-${e}`, t),
         children: [
           /* @__PURE__ */ o("div", { className: "smwb-section-header__titles", children: [
             /* @__PURE__ */ o("div", { className: "smwb-section-header__title-line", children: [
-              /* @__PURE__ */ s(f, { id: d, className: "smwb-section-header__title", children: i }),
-              t != null ? /* @__PURE__ */ s("span", { className: "smwb-section-header__count", children: t }) : null,
-              r ? /* @__PURE__ */ s(v, { text: r, label: m }) : null
+              /* @__PURE__ */ s(_, { id: d, className: "smwb-section-header__title", children: a }),
+              n != null ? /* @__PURE__ */ s("span", { className: "smwb-section-header__count", children: n }) : null,
+              r ? /* @__PURE__ */ s(H, { text: r, label: l }) : null
             ] }),
             c ? /* @__PURE__ */ s("div", { className: "smwb-section-header__subtitle", children: c }) : null
           ] }),
-          l ? /* @__PURE__ */ s("div", { className: "smwb-section-header__actions", children: l }) : null
+          m ? /* @__PURE__ */ s("div", { className: "smwb-section-header__actions", children: m }) : null
         ]
       }
     );
   }
 );
 export {
-  I as SectionHeader
+  $ as SectionHeader
 };
 //# sourceMappingURL=sectionHeader.js.map

package/dist/components/layout/sectionHeader/sectionHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"sectionHeader.js","sources":["../../../../src/components/layout/sectionHeader/sectionHeader.tsx"],"sourcesContent":["import React, { HTMLAttributes, PropsWithChildren, ReactNode, useState } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\nimport { Tooltip } from \"../../feedBack/tooltip\";\n\nexport interface SectionHeaderProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  className?: string;\n  /** The section's name. */\n  title: ReactNode;\n  /** Heading level of the title: 2 by default. */\n  level?: 2 | 3 | 4 | 5 | 6;\n  /** How many items the section holds, beside the title. Nothing is shown for null. */\n  count?: number | string | null;\n  /**\n   * How to read the section, behind a \"?\" icon: shown on hover and on keyboard\n   * focus, and the icon's accessible name. Text only — the tooltip renders in\n   * the browser.\n   */\n  help?: string;\n  /** The \"?\" icon's accessible name, e.g. \"Explanation: …\"; the help text by default. */\n  helpLabel?: string;\n  /** Id of the heading, for anchors and aria-labelledby. */\n  titleId?: string;\n  /** A line under the title. */\n  subtitle?: ReactNode;\n}\n\n/** The \"?\" icon with its tooltip, open on hover and on keyboard focus. */\nfunction HelpHint({ text, label }: { text: string; label?: string }) {\n  const [open, setOpen] = useState(false);\n  return (\n    <Tooltip\n      className=\"smwb-section-header__tooltip\"\n      message={text}\n      trigger=\"manual\"\n      open={open}\n      placement=\"top\"\n      offset={{ offsetY: 6 }}\n    >\n      <span\n        className=\"smwb-section-header__help\"\n        role=\"img\"\n        aria-label={label ?? text}\n        tabIndex={0}\n        onPointerEnter={() => setOpen(true)}\n        onPointerLeave={() => setOpen(false)}\n        onFocus={() => setOpen(true)}\n        onBlur={() => setOpen(false)}\n        onKeyDown={(event) => {\n          if (event.key === \"Escape\") setOpen(false);\n        }}\n      >\n        <Icon name=\"help\" size={16} />\n      </span>\n    </Tooltip>\n  );\n}\n\n/**\n * A section's heading row: the title with a count and a help hint, a subtitle\n * under them, and the section's actions (the children) at the end. On a narrow\n * screen the actions wrap under the title.\n */\nexport const SectionHeader = React.forwardRef<HTMLElement, PropsWithChildren<SectionHeaderProps>>(\n  function SectionHeader(\n    { className, title, level = 2, count, help, helpLabel, titleId, subtitle, children, ...rest },\n    ref\n  ) {\n    const Heading = `h${level}` as \"h2\";\n    return (\n      <header\n        data-testid=\"section-header\"\n        {...rest}\n        ref={ref}\n        className={cn(\"smwb-section-header\", `smwb-section-header_level-${level}`, className)}\n      >\n        <div className=\"smwb-section-header__titles\">\n          <div className=\"smwb-section-header__title-line\">\n            <Heading id={titleId} className=\"smwb-section-header__title\">\n              {title}\n            </Heading>\n            {count !== undefined && count !== null ? <span className=\"smwb-section-header__count\">{count}</span> : null}\n            {help ? <HelpHint text={help} label={helpLabel} /> : null}\n          </div>\n          {subtitle ? <div className=\"smwb-section-header__subtitle\">{subtitle}</div> : null}\n        </div>\n        {children ? <div className=\"smwb-section-header__actions\">{children}</div> : null}\n      </header>\n    );\n  }\n);\n\nexport default SectionHeader;\n"],"names":["HelpHint","text","label","open","setOpen","useState","jsx","Tooltip","event","Icon","SectionHeader","React","className","title","level","count","help","helpLabel","titleId","subtitle","children","rest","ref","Heading","jsxs","cn"],"mappings":";;;;;;;AA8BA,SAASA,EAAS,EAAE,MAAAC,GAAM,OAAAC,KAA2C;AACnE,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAS,EAAK;AACtC,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,SAASN;AAAA,MACT,SAAQ;AAAA,MACR,MAAAE;AAAA,MACA,WAAU;AAAA,MACV,QAAQ,EAAE,SAAS,EAAA;AAAA,MAEnB,UAAA,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAK;AAAA,UACL,cAAYJ,KAAA,OAAAA,IAASD;AAAA,UACrB,UAAU;AAAA,UACV,gBAAgB,MAAMG,EAAQ,EAAI;AAAA,UAClC,gBAAgB,MAAMA,EAAQ,EAAK;AAAA,UACnC,SAAS,MAAMA,EAAQ,EAAI;AAAA,UAC3B,QAAQ,MAAMA,EAAQ,EAAK;AAAA,UAC3B,WAAW,CAACI,MAAU;AACpB,YAAIA,EAAM,QAAQ,YAAUJ,EAAQ,EAAK;AAAA,UAC3C;AAAA,UAEA,UAAA,gBAAAE,EAACG,GAAA,EAAK,MAAK,QAAO,MAAM,GAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAC9B;AAAA,EAAA;AAGN;AAOO,MAAMC,IAAgBC,EAAM;AAAA,EACjC,SACE,EAAE,WAAAC,GAAW,OAAAC,GAAO,OAAAC,IAAQ,GAAG,OAAAC,GAAO,MAAAC,GAAM,WAAAC,GAAW,SAAAC,GAAS,UAAAC,GAAU,UAAAC,GAAU,GAAGC,EAAA,GACvFC,GACA;AACA,UAAMC,IAAU,IAAIT,CAAK;AACzB,WACE,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACX,GAAGH;AAAA,QACJ,KAAAC;AAAA,QACA,WAAWG,EAAG,uBAAuB,6BAA6BX,CAAK,IAAIF,CAAS;AAAA,QAEpF,UAAA;AAAA,UAAA,gBAAAY,EAAC,OAAA,EAAI,WAAU,+BACb,UAAA;AAAA,YAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,mCACb,UAAA;AAAA,cAAA,gBAAAlB,EAACiB,GAAA,EAAQ,IAAIL,GAAS,WAAU,8BAC7B,UAAAL,GACH;AAAA,cACwBE,KAAU,yBAAQ,QAAA,EAAK,WAAU,8BAA8B,UAAAA,EAAA,CAAM,IAAU;AAAA,cACtGC,IAAO,gBAAAV,EAACN,GAAA,EAAS,MAAMgB,GAAM,OAAOC,GAAW,IAAK;AAAA,YAAA,GACvD;AAAA,YACCE,IAAW,gBAAAb,EAAC,OAAA,EAAI,WAAU,iCAAiC,aAAS,IAAS;AAAA,UAAA,GAChF;AAAA,UACCc,IAAW,gBAAAd,EAAC,OAAA,EAAI,WAAU,gCAAgC,UAAAc,GAAS,IAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGnF;AACF;"}
+{"version":3,"file":"sectionHeader.js","sources":["../../../../src/components/layout/sectionHeader/sectionHeader.tsx"],"sourcesContent":["import React, { HTMLAttributes, PropsWithChildren, ReactNode, useState } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\nimport { Tooltip } from \"../../feedBack/tooltip\";\nimport { useDismissOnEscape } from \"../../../hooks/useDismissOnEscape\";\n\nexport interface SectionHeaderProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  className?: string;\n  /** The section's name. */\n  title: ReactNode;\n  /** Heading level of the title: 2 by default. */\n  level?: 2 | 3 | 4 | 5 | 6;\n  /** How many items the section holds, beside the title. Nothing is shown for null. */\n  count?: number | string | null;\n  /**\n   * How to read the section, behind a \"?\" icon: shown on hover and on keyboard\n   * focus, and the icon's accessible name. Text only — the tooltip renders in\n   * the browser.\n   */\n  help?: string;\n  /** The \"?\" icon's accessible name, e.g. \"Explanation: …\"; the help text by default. */\n  helpLabel?: string;\n  /** Id of the heading, for anchors and aria-labelledby. */\n  titleId?: string;\n  /** A line under the title. */\n  subtitle?: ReactNode;\n  /** Test id of the root `<header>`; `section-header` unless given. */\n  \"data-testid\"?: string;\n}\n\n/** The \"?\" icon with its tooltip, open on hover and on keyboard focus. */\nfunction HelpHint({ text, label }: { text: string; label?: string }) {\n  const [open, setOpen] = useState(false);\n  // Escape hides the tooltip wherever focus is, shown by hover or by focus (WCAG 1.4.13),\n  // and is marked as handled, so a window, panel, Modal or Sheet around the hint stays\n  // open; with the tooltip hidden, the key is theirs.\n  useDismissOnEscape(open, () => setOpen(false));\n  return (\n    <Tooltip\n      className=\"smwb-section-header__tooltip\"\n      message={text}\n      trigger=\"manual\"\n      open={open}\n      placement=\"top\"\n      offset={{ offsetY: 6 }}\n    >\n      <span\n        className=\"smwb-section-header__help\"\n        role=\"img\"\n        aria-label={label ?? text}\n        tabIndex={0}\n        onPointerEnter={() => setOpen(true)}\n        onPointerLeave={() => setOpen(false)}\n        onFocus={() => setOpen(true)}\n        onBlur={() => setOpen(false)}\n      >\n        <Icon name=\"help\" size={16} />\n      </span>\n    </Tooltip>\n  );\n}\n\n/**\n * A section's heading row: the title with a count and a help hint, a subtitle\n * under them, and the section's actions (the children) at the end. On a narrow\n * screen the actions wrap under the title.\n */\nexport const SectionHeader = React.forwardRef<HTMLElement, PropsWithChildren<SectionHeaderProps>>(\n  function SectionHeader(\n    {\n      className,\n      title,\n      level = 2,\n      count,\n      help,\n      helpLabel,\n      titleId,\n      subtitle,\n      children,\n      \"data-testid\": dataTestId = \"section-header\",\n      ...rest\n    },\n    ref\n  ) {\n    const Heading = `h${level}` as \"h2\";\n    return (\n      <header\n        data-testid={dataTestId}\n        {...rest}\n        ref={ref}\n        className={cn(\"smwb-section-header\", `smwb-section-header_level-${level}`, className)}\n      >\n        <div className=\"smwb-section-header__titles\">\n          <div className=\"smwb-section-header__title-line\">\n            <Heading id={titleId} className=\"smwb-section-header__title\">\n              {title}\n            </Heading>\n            {count !== undefined && count !== null ? <span className=\"smwb-section-header__count\">{count}</span> : null}\n            {help ? <HelpHint text={help} label={helpLabel} /> : null}\n          </div>\n          {subtitle ? <div className=\"smwb-section-header__subtitle\">{subtitle}</div> : null}\n        </div>\n        {children ? <div className=\"smwb-section-header__actions\">{children}</div> : null}\n      </header>\n    );\n  }\n);\n\nexport default SectionHeader;\n"],"names":["HelpHint","text","label","open","setOpen","useState","useDismissOnEscape","jsx","Tooltip","Icon","SectionHeader","React","className","title","level","count","help","helpLabel","titleId","subtitle","children","dataTestId","rest","ref","Heading","jsxs","cn"],"mappings":";;;;;;;;AAiCA,SAASA,EAAS,EAAE,MAAAC,GAAM,OAAAC,KAA2C;AACnE,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAS,EAAK;AAItC,SAAAC,EAAmBH,GAAM,MAAMC,EAAQ,EAAK,CAAC,GAE3C,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,SAASP;AAAA,MACT,SAAQ;AAAA,MACR,MAAAE;AAAA,MACA,WAAU;AAAA,MACV,QAAQ,EAAE,SAAS,EAAA;AAAA,MAEnB,UAAA,gBAAAI;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAK;AAAA,UACL,cAAYL,KAAA,OAAAA,IAASD;AAAA,UACrB,UAAU;AAAA,UACV,gBAAgB,MAAMG,EAAQ,EAAI;AAAA,UAClC,gBAAgB,MAAMA,EAAQ,EAAK;AAAA,UACnC,SAAS,MAAMA,EAAQ,EAAI;AAAA,UAC3B,QAAQ,MAAMA,EAAQ,EAAK;AAAA,UAE3B,UAAA,gBAAAG,EAACE,GAAA,EAAK,MAAK,QAAO,MAAM,GAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAC9B;AAAA,EAAA;AAGN;AAOO,MAAMC,IAAgBC,EAAM;AAAA,EACjC,SACE;AAAA,IACE,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,eAAeC,IAAa;AAAA,IAC5B,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAMC,IAAU,IAAIV,CAAK;AACzB,WACE,gBAAAW;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAaJ;AAAA,QACZ,GAAGC;AAAA,QACJ,KAAAC;AAAA,QACA,WAAWG,EAAG,uBAAuB,6BAA6BZ,CAAK,IAAIF,CAAS;AAAA,QAEpF,UAAA;AAAA,UAAA,gBAAAa,EAAC,OAAA,EAAI,WAAU,+BACb,UAAA;AAAA,YAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,mCACb,UAAA;AAAA,cAAA,gBAAAlB,EAACiB,GAAA,EAAQ,IAAIN,GAAS,WAAU,8BAC7B,UAAAL,GACH;AAAA,cACwBE,KAAU,yBAAQ,QAAA,EAAK,WAAU,8BAA8B,UAAAA,EAAA,CAAM,IAAU;AAAA,cACtGC,IAAO,gBAAAT,EAACP,GAAA,EAAS,MAAMgB,GAAM,OAAOC,GAAW,IAAK;AAAA,YAAA,GACvD;AAAA,YACCE,IAAW,gBAAAZ,EAAC,OAAA,EAAI,WAAU,iCAAiC,aAAS,IAAS;AAAA,UAAA,GAChF;AAAA,UACCa,IAAW,gBAAAb,EAAC,OAAA,EAAI,WAAU,gCAAgC,UAAAa,GAAS,IAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGnF;AACF;"}

package/dist/components/layout/sheet/sheet.d.ts

@@ -9,6 +9,18 @@ export interface SheetProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Hide built-in header actions; onClose still handles Esc and backdrop. */
     hideHeaderActions?: boolean;
     reverseHeaderActions?: boolean;
+    /** Accessible name of the header close button (default "Close sheet"). */
+    closeAriaLabel?: string;
+    /**
+     * Accessible name of the size toggle while the sheet is at its normal size (default "Expand sheet"). The toggle
+     * cycles normal, expanded, collapsed and back, and its name always says what the next press does; the
+     * name changing is how it exposes its state. It shows the `open_in_full` icon, and `close_fullscreen` while expanded.
+     */
+    expandAriaLabel?: string;
+    /** Accessible name of the size toggle while the sheet is expanded (default "Collapse sheet"). */
+    collapseAriaLabel?: string;
+    /** Accessible name of the size toggle while the sheet is collapsed to its header (default "Restore sheet size"). */
+    restoreAriaLabel?: string;
     size?: string;
     disableOutsideClick?: boolean;
     /** Close the sheet when Escape is pressed. */
@@ -29,6 +41,8 @@ export interface SheetProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Called with the new size in px while/after resizing. */
     onResize?: (size: number) => void;
     "aria-label"?: string;
+    /** Test id of the sheet panel (the dialog); `sheet` unless given. */
+    "data-testid"?: string;
 }
 export declare const Sheet: React.ForwardRefExoticComponent<SheetProps & {
     children?: React.ReactNode | undefined;

package/dist/components/layout/sheet/sheet.js

@@ -1,42 +1,43 @@
-import { jsx as n, jsxs as re } from "react/jsx-runtime";
+import { jsx as n, jsxs as ie } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/sheet/sheet.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                     */
-import K, { forwardRef as ne, useState as W, useRef as H, useEffect as oe, useCallback as w } from "react";
-import L from "clsx";
-import { CSSTransition as j } from "react-transition-group";
-import { createPortal as se } from "react-dom";
-import { Button as C } from "../../inputs/button/button.js";
-import { Icon as $ } from "../../base/icon/icon.js";
-import { useForkRef as ae } from "../../../hooks/useForkRef.js";
-import { isTopOverlayLayer as ie } from "../../../utils/overlayLayer.js";
-import { ClickAwayListener as le } from "../../clickAwayListener/clickAwayListener.js";
-const Ae = ne(function({
+import j, { forwardRef as le, useState as V, useRef as H, useEffect as ce, useCallback as p } from "react";
+import C from "clsx";
+import { CSSTransition as q } from "react-transition-group";
+import { createPortal as de } from "react-dom";
+import { Button as F } from "../../inputs/button/button.js";
+import { Icon as X } from "../../base/icon/icon.js";
+import { useForkRef as me } from "../../../hooks/useForkRef.js";
+import { isTopOverlayLayer as ue } from "../../../utils/overlayLayer.js";
+import { restoreFocus as he } from "../../../utils/restoreFocus.js";
+import { ClickAwayListener as fe } from "../../clickAwayListener/clickAwayListener.js";
+const Ne = le(function({
   isOpen: m,
-  onClose: i,
-  variant: d = "default",
+  onClose: s,
+  variant: c = "default",
   children: r,
-  placement: k = "bottom",
-  disableOutsideClick: p,
-  closeOnEsc: z = !0,
+  placement: _ = "bottom",
+  disableOutsideClick: d,
+  closeOnEsc: R = !0,
   ...A
-}, D) {
-  const [u, b] = W(null), y = H(null);
-  oe(() => {
-    if (!m || !z || !i)
+}, k) {
+  const [u, b] = V(null), y = H(null);
+  ce(() => {
+    if (!m || !R || !s)
       return;
-    const o = (v) => {
-      v.key === "Escape" && ie(y.current) && i();
+    const L = (N) => {
+      N.key === "Escape" && !N.defaultPrevented && ue(y.current) && s();
     };
-    return document.addEventListener("keydown", o), () => document.removeEventListener("keydown", o);
-  }, [m, z, i]);
-  const g = () => {
+    return document.addEventListener("keydown", L), () => document.removeEventListener("keydown", L);
+  }, [m, R, s]);
+  const z = () => {
     b(u === "expanded" ? "small" : u ? null : "expanded");
-  }, a = () => {
-    i == null || i(), b(null);
+  }, x = () => {
+    s == null || s(), b(null);
   };
-  return se(
+  return de(
     /* @__PURE__ */ n(
-      j,
+      q,
       {
         in: m,
         timeout: 70,
@@ -45,23 +46,23 @@ const Ae = ne(function({
         classNames: { enterDone: "smwb-entered" },
         appear: !0,
         nodeRef: y,
-        children: d === "default" ? /* @__PURE__ */ n(
+        children: c === "default" ? /* @__PURE__ */ n(
           "div",
           {
-            className: L(p ? "smwb-sheet__overlay" : "smwb-sheet__default"),
+            className: C(d ? "smwb-sheet__overlay" : "smwb-sheet__default"),
             ref: y,
             "data-smwb-overlay-layer": "",
             children: /* @__PURE__ */ n(
-              U,
+              Y,
               {
-                ref: D,
-                onClose: i,
-                handleSizeButton: g,
-                handleClose: a,
+                ref: k,
+                onClose: s,
+                handleSizeButton: z,
+                handleClose: x,
                 isOpen: m,
                 mode: u,
-                placement: k,
-                variant: d,
+                placement: _,
+                variant: c,
                 ...A,
                 children: r
               }
@@ -70,20 +71,20 @@ const Ae = ne(function({
         ) : /* @__PURE__ */ n(
           "div",
           {
-            className: L("smwb-sheet__overlay", "smwb-dark", `smwb-${k}`, `smwb-sheet_${d}`),
+            className: C("smwb-sheet__overlay", "smwb-dark", `smwb-${_}`, `smwb-sheet_${c}`),
             ref: y,
             "data-smwb-overlay-layer": "",
-            children: /* @__PURE__ */ n(le, { onClickAway: () => !p && a(), children: /* @__PURE__ */ n(
-              U,
+            children: /* @__PURE__ */ n(fe, { onClickAway: () => !d && x(), children: /* @__PURE__ */ n(
+              Y,
               {
-                ref: D,
-                onClose: i,
-                handleSizeButton: g,
-                handleClose: a,
+                ref: k,
+                onClose: s,
+                handleSizeButton: z,
+                handleClose: x,
                 isOpen: m,
                 mode: u,
-                placement: k,
-                variant: d,
+                placement: _,
+                variant: c,
                 ...A,
                 children: r
               }
@@ -94,136 +95,151 @@ const Ae = ne(function({
     ),
     document.body
   );
-}), ce = (x) => x === "bottom" || x === "top", U = K.forwardRef(function(m, i) {
+}), we = (D) => D === "bottom" || D === "top", Y = j.forwardRef(function(m, s) {
   const {
-    isOpen: d,
+    isOpen: c,
     placement: r,
-    className: k,
-    mode: p,
-    size: z = "60%",
+    className: _,
+    mode: d,
+    size: R = "60%",
     variant: A,
-    onClose: D,
+    onClose: k,
     withSizeToggle: u = !0,
     hideHeaderActions: b = !1,
     reverseHeaderActions: y = !1,
-    resizable: g = !1,
-    minSize: a = 80,
-    maxSize: o,
-    resizeStep: v = 24,
-    resizeHandleAriaLabel: X = "Resize sheet",
-    onResize: N,
-    style: Y,
-    handleClose: F,
-    handleSizeButton: V,
-    children: q,
-    ...G
-  } = m, J = !b && (!!D || u), P = [];
-  u && P.push(
-    /* @__PURE__ */ n(C, { variant: "outlined", size: "small", onClick: V, children: /* @__PURE__ */ n($, { name: "open_in_full" }) }, "size")
-  ), D && P.push(
-    /* @__PURE__ */ n(C, { variant: "outlined", size: "small", onClick: F, children: /* @__PURE__ */ n($, { name: "close" }) }, "close")
-  ), y && P.reverse();
-  const B = H(null), S = H(null), Q = ae(i, B, S), [l, I] = W(null), s = ce(r), M = w(
+    closeAriaLabel: z = "Close sheet",
+    expandAriaLabel: x = "Expand sheet",
+    collapseAriaLabel: L = "Collapse sheet",
+    restoreAriaLabel: N = "Restore sheet size",
+    resizable: S = !1,
+    minSize: h = 80,
+    maxSize: a,
+    resizeStep: I = 24,
+    resizeHandleAriaLabel: G = "Resize sheet",
+    onResize: P,
+    style: J,
+    handleClose: Q,
+    handleSizeButton: Z,
+    children: O,
+    "data-testid": ee = "sheet",
+    ...M
+  } = m, te = !b && (!!k || u), E = [];
+  u && E.push(
+    /* @__PURE__ */ n(
+      F,
+      {
+        variant: "outlined",
+        size: "small",
+        onClick: Z,
+        "aria-label": d === "expanded" ? L : d === "small" ? N : x,
+        children: /* @__PURE__ */ n(X, { name: d === "expanded" ? "close_fullscreen" : "open_in_full" })
+      },
+      "size"
+    )
+  ), k && E.push(
+    /* @__PURE__ */ n(F, { variant: "outlined", size: "small", onClick: Q, "aria-label": z, children: /* @__PURE__ */ n(X, { name: "close" }) }, "close")
+  ), y && E.reverse();
+  const K = H(null), T = H(null), re = me(s, K, T), [i, $] = V(null), o = we(r), U = p(
     (e) => {
-      const t = s ? window.innerHeight : window.innerWidth, c = o != null ? o : t;
-      return Math.max(a, Math.min(c, e));
+      const t = o ? window.innerHeight : window.innerWidth, l = a != null ? a : t;
+      return Math.max(h, Math.min(l, e));
     },
-    [s, o, a]
-  ), R = w(() => {
+    [o, a, h]
+  ), v = p(() => {
     var t;
-    const e = (t = S.current) == null ? void 0 : t.getBoundingClientRect();
-    return e ? s ? e.height : e.width : a;
-  }, [s, a]), h = w(
+    const e = (t = T.current) == null ? void 0 : t.getBoundingClientRect();
+    return e ? o ? e.height : e.width : h;
+  }, [o, h]), f = p(
     (e) => {
-      const t = M(e);
-      I(t), N == null || N(t);
+      const t = U(e);
+      $(t), P == null || P(t);
     },
-    [M, N]
-  ), E = H(null), Z = w(
+    [U, P]
+  ), B = H(null), ne = p(
     (e) => {
-      var t, c;
-      e.preventDefault(), E.current = {
-        start: s ? e.clientY : e.clientX,
-        size: R()
+      var t, l;
+      e.preventDefault(), B.current = {
+        start: o ? e.clientY : e.clientX,
+        size: v()
       };
       try {
-        (c = (t = e.currentTarget).setPointerCapture) == null || c.call(t, e.pointerId);
+        (l = (t = e.currentTarget).setPointerCapture) == null || l.call(t, e.pointerId);
       } catch {
       }
     },
-    [s, R]
-  ), O = w(
+    [o, v]
+  ), oe = p(
     (e) => {
-      const t = E.current;
+      const t = B.current;
       if (!t)
         return;
-      const f = (s ? e.clientY : e.clientX) - t.start, _ = r === "bottom" || r === "right" ? -f : f;
-      h(t.size + _);
+      const w = (o ? e.clientY : e.clientX) - t.start, g = r === "bottom" || r === "right" ? -w : w;
+      f(t.size + g);
     },
-    [s, r, h]
-  ), T = w((e) => {
-    var t, c, f, _;
-    E.current = null, (c = (t = e.currentTarget).hasPointerCapture) != null && c.call(t, e.pointerId) && ((_ = (f = e.currentTarget).releasePointerCapture) == null || _.call(f, e.pointerId));
-  }, []), ee = w(
+    [o, r, f]
+  ), W = p((e) => {
+    var t, l, w, g;
+    B.current = null, (l = (t = e.currentTarget).hasPointerCapture) != null && l.call(t, e.pointerId) && ((g = (w = e.currentTarget).releasePointerCapture) == null || g.call(w, e.pointerId));
+  }, []), ae = p(
     (e) => {
-      const t = l != null ? l : R(), c = o != null ? o : s ? window.innerHeight : window.innerWidth, f = r === "bottom" ? "ArrowUp" : r === "top" ? "ArrowDown" : r === "left" ? "ArrowRight" : "ArrowLeft", _ = r === "bottom" ? "ArrowDown" : r === "top" ? "ArrowUp" : r === "left" ? "ArrowLeft" : "ArrowRight";
-      e.key === f ? (e.preventDefault(), h(t + v)) : e.key === _ ? (e.preventDefault(), h(t - v)) : e.key === "Home" ? (e.preventDefault(), h(a)) : e.key === "End" && (e.preventDefault(), h(c));
+      const t = i != null ? i : v(), l = a != null ? a : o ? window.innerHeight : window.innerWidth, w = r === "bottom" ? "ArrowUp" : r === "top" ? "ArrowDown" : r === "left" ? "ArrowRight" : "ArrowLeft", g = r === "bottom" ? "ArrowDown" : r === "top" ? "ArrowUp" : r === "left" ? "ArrowLeft" : "ArrowRight";
+      e.key === w ? (e.preventDefault(), f(t + I)) : e.key === g ? (e.preventDefault(), f(t - I)) : e.key === "Home" ? (e.preventDefault(), f(h)) : e.key === "End" && (e.preventDefault(), f(l));
     },
-    [l, R, s, r, h, v, a, o]
+    [i, v, o, r, f, I, h, a]
   );
-  K.useEffect(() => {
-    var e;
-    if (!d) {
-      I(null);
+  j.useEffect(() => {
+    if (!c) {
+      $(null);
       return;
     }
-    (e = S.current) == null || e.focus();
-  }, [d]);
-  const te = g && l !== null ? { ...s ? { height: l } : { width: l }, transition: "none" } : {};
-  return /* @__PURE__ */ n(j, { in: d, timeout: 120, appear: !0, classNames: { enterDone: "smwb-sheet_entered" }, nodeRef: B, children: /* @__PURE__ */ re(
+    const e = T.current, t = e != null && e.contains(document.activeElement) ? null : document.activeElement;
+    return e == null || e.focus(), () => he(t, e);
+  }, [c]);
+  const se = S && i !== null ? { ...o ? { height: i } : { width: i }, transition: "none" } : {};
+  return /* @__PURE__ */ n(q, { in: c, timeout: 120, appear: !0, classNames: { enterDone: "smwb-sheet_entered" }, nodeRef: K, children: /* @__PURE__ */ ie(
     "div",
     {
-      ref: Q,
-      "data-testid": "sheet",
+      ref: re,
+      "data-testid": ee,
+      ...M,
       tabIndex: -1,
       role: "dialog",
-      "aria-modal": A === "modal" || void 0,
-      ...G,
-      className: L("smwb-sheet", k, `smwb-sheet_${A}`, `smwb-${r}`, {
-        "smwb-expanded": p === "expanded",
-        "smwb-small": p === "small",
-        "smwb-sheet_resizable": g
+      "aria-modal": A === "modal" || M["aria-modal"],
+      className: C("smwb-sheet", _, `smwb-sheet_${A}`, `smwb-${r}`, {
+        "smwb-expanded": d === "expanded",
+        "smwb-small": d === "small",
+        "smwb-sheet_resizable": S
       }),
-      style: { "--sizeProp": z, ...te, ...Y },
+      style: { "--sizeProp": R, ...se, ...J },
       children: [
-        g && /* @__PURE__ */ n(
+        S && /* @__PURE__ */ n(
           "div",
           {
             className: "smwb-sheet__drag-handle",
             "data-testid": "sheet-drag-handle",
             role: "separator",
             tabIndex: 0,
-            "aria-orientation": s ? "horizontal" : "vertical",
-            "aria-label": X,
-            "aria-valuemin": a,
-            "aria-valuemax": Math.round(o != null ? o : s ? window.innerHeight : window.innerWidth),
-            "aria-valuenow": Math.round(l != null ? l : R()),
-            onPointerDown: Z,
-            onPointerMove: O,
-            onPointerUp: T,
-            onPointerCancel: T,
-            onKeyDown: ee,
+            "aria-orientation": o ? "horizontal" : "vertical",
+            "aria-label": G,
+            "aria-valuemin": h,
+            "aria-valuemax": Math.round(a != null ? a : o ? window.innerHeight : window.innerWidth),
+            "aria-valuenow": Math.round(i != null ? i : v()),
+            onPointerDown: ne,
+            onPointerMove: oe,
+            onPointerUp: W,
+            onPointerCancel: W,
+            onKeyDown: ae,
             children: /* @__PURE__ */ n("span", { className: "smwb-sheet__drag-handle-bar" })
           }
         ),
-        J && /* @__PURE__ */ n("div", { className: "smwb-sheet__header", children: P }),
-        d && p !== "small" && /* @__PURE__ */ n("div", { className: "smwb-sheet__inner", children: q })
+        te && /* @__PURE__ */ n("div", { className: "smwb-sheet__header", children: E }),
+        c && d !== "small" && /* @__PURE__ */ n("div", { className: "smwb-sheet__inner", children: O })
       ]
     }
   ) });
 });
 export {
-  Ae as Sheet,
-  Ae as default
+  Ne as Sheet,
+  Ne as default
 };
 //# sourceMappingURL=sheet.js.map