@smwb/ui-react 2.6.3 → 2.8.0

package/dist/components/layout/screenDivider/screenDivider.js

@@ -1,16 +1,17 @@
 import { jsxs as B, jsx as w } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/screenDivider/screenDivider.entry.css';/* empty css                                                                     */
+import '../../../assets/styles/less/components/screenDivider/screenDivider.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                                     */
 import { forwardRef as C, useRef as O, useState as y, useEffect as b, Children as P, useMemo as U, useCallback as W } from "react";
 import D from "clsx";
 import { throttle as X } from "../../../utils/throttle.js";
 import { useForkRef as Y } from "../../../hooks/useForkRef.js";
-const x = (c, d) => !c && d ? 100 - d : c || 50, Z = C(function({
-  className: d,
+const x = (c, i) => !c && i ? 100 - i : c || 50, F = C(function({
+  className: i,
   orientation: e = "horizontal",
   sizeFirst: f,
   sizeSecond: v,
   children: L,
-  onSizeChange: i,
+  onSizeChange: d,
   keyboardStep: g = 5,
   resizerAriaLabel: $ = "Resize panels"
 }, k) {
@@ -23,31 +24,31 @@ const x = (c, d) => !c && d ? 100 - d : c || 50, Z = C(function({
     throw new Error("Allowed not more than 2 children");
   const M = () => {
     R(p.current), _(!0);
-  }, o = U(
+  }, l = U(
     () => X((r) => {
       if (!m) return;
       const a = p.current;
       if (!a || a !== E) return;
-      const s = a.getBoundingClientRect(), l = e === "vertical" ? s.height : s.width, j = e === "vertical" ? r.clientY - s.top : r.clientX - s.left, H = Math.max(5, Math.min(l - 5, j));
-      n(H / l * 100);
+      const s = a.getBoundingClientRect(), o = e === "vertical" ? s.height : s.width, j = e === "vertical" ? r.clientY - s.top : r.clientX - s.left, H = Math.max(5, Math.min(o - 5, j));
+      n(H / o * 100);
     }, 1e3 / 60),
     [m, E, e]
   ), u = W(() => {
-    R(null), _(!1), document.body.removeEventListener("pointerup", u), document.body.removeEventListener("pointermove", o);
-  }, [o]);
+    R(null), _(!1), document.body.removeEventListener("pointerup", u), document.body.removeEventListener("pointermove", l);
+  }, [l]);
   b(() => {
-    i == null || i(t);
-  }, [t, i]);
+    d == null || d(t);
+  }, [t, d]);
   const K = (r) => {
     const a = e === "vertical" ? "ArrowUp" : "ArrowLeft", s = e === "vertical" ? "ArrowDown" : "ArrowRight";
-    r.key === a ? (r.preventDefault(), n((l) => Math.max(0, l - g))) : r.key === s ? (r.preventDefault(), n((l) => Math.min(100, l + g))) : r.key === "Home" ? (r.preventDefault(), n(0)) : r.key === "End" && (r.preventDefault(), n(100));
+    r.key === a ? (r.preventDefault(), n((o) => Math.max(0, o - g))) : r.key === s ? (r.preventDefault(), n((o) => Math.min(100, o + g))) : r.key === "Home" ? (r.preventDefault(), n(0)) : r.key === "End" && (r.preventDefault(), n(100));
   }, N = e === "vertical" ? { height: `${100 - t}%` } : { width: `${100 - t}%` }, I = e === "vertical" ? { height: `${t}%` } : { width: `${t}%` };
-  return b(() => (m ? (document.body.addEventListener("pointerup", u), document.body.addEventListener("pointermove", o), document.body.style.cursor = e === "horizontal" ? "e-resize" : "n-resize") : document.body.style.cursor = "default", () => {
-    document.body.removeEventListener("pointerup", u), document.body.removeEventListener("pointermove", o);
-  }), [o, u, m, e]), /* @__PURE__ */ B(
+  return b(() => (m ? (document.body.addEventListener("pointerup", u), document.body.addEventListener("pointermove", l), document.body.style.cursor = e === "horizontal" ? "e-resize" : "n-resize") : document.body.style.cursor = "default", () => {
+    document.body.removeEventListener("pointerup", u), document.body.removeEventListener("pointermove", l);
+  }), [l, u, m, e]), /* @__PURE__ */ B(
     "div",
     {
-      className: D("smwb-screen-divider__wrapper", `smwb-${e}`, d),
+      className: D("smwb-screen-divider__wrapper", `smwb-${e}`, i),
       ref: A,
       "data-testid": "screen-divider",
       children: [
@@ -74,7 +75,7 @@ const x = (c, d) => !c && d ? 100 - d : c || 50, Z = C(function({
   );
 });
 export {
-  Z as ScreenDivider,
-  Z as default
+  F as ScreenDivider,
+  F as default
 };
 //# sourceMappingURL=screenDivider.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"screenDivider.js","sources":["../../../../src/components/layout/screenDivider/screenDivider.tsx"],"sourcesContent":["import React, {\n  Children,\n  forwardRef,\n  KeyboardEvent,\n  PropsWithChildren,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport cn from \"clsx\";\nimport { throttle } from \"../../../utils/throttle\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\n\nexport interface ScreenDividerProps {\n  sizeFirst?: number;\n  sizeSecond?: number;\n  className?: string;\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Called with the first pane size (percent) whenever it changes. */\n  onSizeChange?: (sizeFirst: number) => void;\n  /** Step (in percent) applied on arrow-key resize. */\n  keyboardStep?: number;\n  /** Accessible label for the resizer handle. */\n  resizerAriaLabel?: string;\n}\n\nconst getInitialDivider = (sizeFirst?: number | null, sizeSecond?: number | null) => {\n  if (!sizeFirst && sizeSecond) {\n    return 100 - sizeSecond;\n  }\n  if (sizeFirst) {\n    return sizeFirst;\n  }\n  return 50;\n};\n\nexport const ScreenDivider = forwardRef<HTMLDivElement, PropsWithChildren<ScreenDividerProps>>(function ScreenDivider(\n  {\n    className,\n    orientation = \"horizontal\",\n    sizeFirst,\n    sizeSecond,\n    children,\n    onSizeChange,\n    keyboardStep = 5,\n    resizerAriaLabel = \"Resize panels\",\n  },\n  ref\n) {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const forkedWrapperRef = useForkRef<HTMLDivElement>(ref, wrapperRef);\n  const [divider, setDivider] = useState<number>(getInitialDivider(sizeFirst, sizeSecond));\n  const [currentElement, setCurrentElement] = useState<HTMLDivElement | null>(null);\n  const [isDragging, setIsDragging] = useState(false);\n\n  useEffect(() => {\n    setDivider(getInitialDivider(sizeFirst, sizeSecond));\n  }, [sizeFirst, sizeSecond]);\n\n  const child = Children.toArray(children);\n  if (child.length > 2) {\n    throw new Error(\"Allowed not more than 2 children\");\n  }\n\n  const handleDragStart = () => {\n    setCurrentElement(wrapperRef.current);\n    setIsDragging(true);\n  };\n\n  const dragOverHandler = useMemo(\n    () =>\n      throttle((e: PointerEvent) => {\n        if (!isDragging) return;\n        const wrapper = wrapperRef.current;\n        if (!wrapper || wrapper !== currentElement) return;\n        // Viewport-relative rect — using offsetLeft/offsetTop here is wrong\n        // because they are relative to the nearest positioned ancestor, not\n        // the viewport that clientX/clientY live in (this is what made the\n        // divider drift away from the cursor when the wrapper was nested).\n        const rect = wrapper.getBoundingClientRect();\n        const total = orientation === \"vertical\" ? rect.height : rect.width;\n        const cursor = orientation === \"vertical\" ? e.clientY - rect.top : e.clientX - rect.left;\n        // 5px margin on each side so neither pane fully collapses.\n        const clamped = Math.max(5, Math.min(total - 5, cursor));\n        setDivider((clamped / total) * 100);\n      }, 1000 / 60),\n    [isDragging, currentElement, orientation]\n  );\n\n  const handleDragEnd = useCallback(() => {\n    setCurrentElement(null);\n    setIsDragging(false);\n    document.body.removeEventListener(\"pointerup\", handleDragEnd);\n    document.body.removeEventListener(\"pointermove\", dragOverHandler);\n  }, [dragOverHandler]);\n\n  useEffect(() => {\n    onSizeChange?.(divider);\n  }, [divider, onSizeChange]);\n\n  const onResizerKeyDown = (event: KeyboardEvent<HTMLSpanElement>) => {\n    const decreaseKey = orientation === \"vertical\" ? \"ArrowUp\" : \"ArrowLeft\";\n    const increaseKey = orientation === \"vertical\" ? \"ArrowDown\" : \"ArrowRight\";\n\n    if (event.key === decreaseKey) {\n      event.preventDefault();\n      setDivider((prev) => Math.max(0, prev - keyboardStep));\n    } else if (event.key === increaseKey) {\n      event.preventDefault();\n      setDivider((prev) => Math.min(100, prev + keyboardStep));\n    } else if (event.key === \"Home\") {\n      event.preventDefault();\n      setDivider(0);\n    } else if (event.key === \"End\") {\n      event.preventDefault();\n      setDivider(100);\n    }\n  };\n\n  const secondChildStyle =\n    orientation === \"vertical\" ? { height: `${100 - divider}%` } : { width: `${100 - divider}%` };\n\n  const firstChildStyle = orientation === \"vertical\" ? { height: `${divider}%` } : { width: `${divider}%` };\n\n  useEffect(() => {\n    if (isDragging) {\n      document.body.addEventListener(\"pointerup\", handleDragEnd);\n      document.body.addEventListener(\"pointermove\", dragOverHandler);\n      document.body.style.cursor = orientation === \"horizontal\" ? \"e-resize\" : \"n-resize\";\n    } else {\n      document.body.style.cursor = \"default\";\n    }\n\n    return () => {\n      document.body.removeEventListener(\"pointerup\", handleDragEnd);\n      document.body.removeEventListener(\"pointermove\", dragOverHandler);\n    };\n  }, [dragOverHandler, handleDragEnd, isDragging, orientation]);\n\n  return (\n    <div\n      className={cn(\"smwb-screen-divider__wrapper\", `smwb-${orientation}`, className)}\n      ref={forkedWrapperRef}\n      data-testid=\"screen-divider\"\n    >\n      <div className={cn(\"smwb-screen-divider__first\", `smwb-${orientation}`)} style={firstChildStyle}>\n        {child[0] || \"\"}\n      </div>\n      <span\n        className=\"smwb-screen-divider__resizer\"\n        onPointerDown={handleDragStart}\n        draggable={false}\n        role=\"separator\"\n        aria-orientation={orientation === \"vertical\" ? \"horizontal\" : \"vertical\"}\n        aria-valuenow={Math.round(divider)}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-label={resizerAriaLabel}\n        tabIndex={0}\n        onKeyDown={onResizerKeyDown}\n      />\n      <div className={cn(\"smwb-screen-divider__second\", `smwb-${orientation}`)} style={secondChildStyle}>\n        {child[1] || \"\"}\n      </div>\n    </div>\n  );\n});\n\nexport default ScreenDivider;\n"],"names":["getInitialDivider","sizeFirst","sizeSecond","ScreenDivider","forwardRef","className","orientation","children","onSizeChange","keyboardStep","resizerAriaLabel","ref","wrapperRef","useRef","forkedWrapperRef","useForkRef","divider","setDivider","useState","currentElement","setCurrentElement","isDragging","setIsDragging","useEffect","child","Children","handleDragStart","dragOverHandler","useMemo","throttle","e","wrapper","rect","total","cursor","clamped","handleDragEnd","useCallback","onResizerKeyDown","event","decreaseKey","increaseKey","prev","secondChildStyle","firstChildStyle","jsxs","cn","jsx"],"mappings":"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"}
+{"version":3,"file":"screenDivider.js","sources":["../../../../src/components/layout/screenDivider/screenDivider.tsx"],"sourcesContent":["import React, {\n  Children,\n  forwardRef,\n  KeyboardEvent,\n  PropsWithChildren,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport cn from \"clsx\";\nimport { throttle } from \"../../../utils/throttle\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\n\nexport interface ScreenDividerProps {\n  sizeFirst?: number;\n  sizeSecond?: number;\n  className?: string;\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Called with the first pane size (percent) whenever it changes. */\n  onSizeChange?: (sizeFirst: number) => void;\n  /** Step (in percent) applied on arrow-key resize. */\n  keyboardStep?: number;\n  /** Accessible label for the resizer handle. */\n  resizerAriaLabel?: string;\n}\n\nconst getInitialDivider = (sizeFirst?: number | null, sizeSecond?: number | null) => {\n  if (!sizeFirst && sizeSecond) {\n    return 100 - sizeSecond;\n  }\n  if (sizeFirst) {\n    return sizeFirst;\n  }\n  return 50;\n};\n\nexport const ScreenDivider = forwardRef<HTMLDivElement, PropsWithChildren<ScreenDividerProps>>(function ScreenDivider(\n  {\n    className,\n    orientation = \"horizontal\",\n    sizeFirst,\n    sizeSecond,\n    children,\n    onSizeChange,\n    keyboardStep = 5,\n    resizerAriaLabel = \"Resize panels\",\n  },\n  ref\n) {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const forkedWrapperRef = useForkRef<HTMLDivElement>(ref, wrapperRef);\n  const [divider, setDivider] = useState<number>(getInitialDivider(sizeFirst, sizeSecond));\n  const [currentElement, setCurrentElement] = useState<HTMLDivElement | null>(null);\n  const [isDragging, setIsDragging] = useState(false);\n\n  useEffect(() => {\n    setDivider(getInitialDivider(sizeFirst, sizeSecond));\n  }, [sizeFirst, sizeSecond]);\n\n  const child = Children.toArray(children);\n  if (child.length > 2) {\n    throw new Error(\"Allowed not more than 2 children\");\n  }\n\n  const handleDragStart = () => {\n    setCurrentElement(wrapperRef.current);\n    setIsDragging(true);\n  };\n\n  const dragOverHandler = useMemo(\n    () =>\n      throttle((e: PointerEvent) => {\n        if (!isDragging) return;\n        const wrapper = wrapperRef.current;\n        if (!wrapper || wrapper !== currentElement) return;\n        // Viewport-relative rect — using offsetLeft/offsetTop here is wrong\n        // because they are relative to the nearest positioned ancestor, not\n        // the viewport that clientX/clientY live in (this is what made the\n        // divider drift away from the cursor when the wrapper was nested).\n        const rect = wrapper.getBoundingClientRect();\n        const total = orientation === \"vertical\" ? rect.height : rect.width;\n        const cursor = orientation === \"vertical\" ? e.clientY - rect.top : e.clientX - rect.left;\n        // 5px margin on each side so neither pane fully collapses.\n        const clamped = Math.max(5, Math.min(total - 5, cursor));\n        setDivider((clamped / total) * 100);\n      }, 1000 / 60),\n    [isDragging, currentElement, orientation]\n  );\n\n  const handleDragEnd = useCallback(() => {\n    setCurrentElement(null);\n    setIsDragging(false);\n    document.body.removeEventListener(\"pointerup\", handleDragEnd);\n    document.body.removeEventListener(\"pointermove\", dragOverHandler);\n  }, [dragOverHandler]);\n\n  useEffect(() => {\n    onSizeChange?.(divider);\n  }, [divider, onSizeChange]);\n\n  const onResizerKeyDown = (event: KeyboardEvent<HTMLSpanElement>) => {\n    const decreaseKey = orientation === \"vertical\" ? \"ArrowUp\" : \"ArrowLeft\";\n    const increaseKey = orientation === \"vertical\" ? \"ArrowDown\" : \"ArrowRight\";\n\n    if (event.key === decreaseKey) {\n      event.preventDefault();\n      setDivider((prev) => Math.max(0, prev - keyboardStep));\n    } else if (event.key === increaseKey) {\n      event.preventDefault();\n      setDivider((prev) => Math.min(100, prev + keyboardStep));\n    } else if (event.key === \"Home\") {\n      event.preventDefault();\n      setDivider(0);\n    } else if (event.key === \"End\") {\n      event.preventDefault();\n      setDivider(100);\n    }\n  };\n\n  const secondChildStyle =\n    orientation === \"vertical\" ? { height: `${100 - divider}%` } : { width: `${100 - divider}%` };\n\n  const firstChildStyle = orientation === \"vertical\" ? { height: `${divider}%` } : { width: `${divider}%` };\n\n  useEffect(() => {\n    if (isDragging) {\n      document.body.addEventListener(\"pointerup\", handleDragEnd);\n      document.body.addEventListener(\"pointermove\", dragOverHandler);\n      document.body.style.cursor = orientation === \"horizontal\" ? \"e-resize\" : \"n-resize\";\n    } else {\n      document.body.style.cursor = \"default\";\n    }\n\n    return () => {\n      document.body.removeEventListener(\"pointerup\", handleDragEnd);\n      document.body.removeEventListener(\"pointermove\", dragOverHandler);\n    };\n  }, [dragOverHandler, handleDragEnd, isDragging, orientation]);\n\n  return (\n    <div\n      className={cn(\"smwb-screen-divider__wrapper\", `smwb-${orientation}`, className)}\n      ref={forkedWrapperRef}\n      data-testid=\"screen-divider\"\n    >\n      <div className={cn(\"smwb-screen-divider__first\", `smwb-${orientation}`)} style={firstChildStyle}>\n        {child[0] || \"\"}\n      </div>\n      <span\n        className=\"smwb-screen-divider__resizer\"\n        onPointerDown={handleDragStart}\n        draggable={false}\n        role=\"separator\"\n        aria-orientation={orientation === \"vertical\" ? \"horizontal\" : \"vertical\"}\n        aria-valuenow={Math.round(divider)}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-label={resizerAriaLabel}\n        tabIndex={0}\n        onKeyDown={onResizerKeyDown}\n      />\n      <div className={cn(\"smwb-screen-divider__second\", `smwb-${orientation}`)} style={secondChildStyle}>\n        {child[1] || \"\"}\n      </div>\n    </div>\n  );\n});\n\nexport default ScreenDivider;\n"],"names":["getInitialDivider","sizeFirst","sizeSecond","ScreenDivider","forwardRef","className","orientation","children","onSizeChange","keyboardStep","resizerAriaLabel","ref","wrapperRef","useRef","forkedWrapperRef","useForkRef","divider","setDivider","useState","currentElement","setCurrentElement","isDragging","setIsDragging","useEffect","child","Children","handleDragStart","dragOverHandler","useMemo","throttle","e","wrapper","rect","total","cursor","clamped","handleDragEnd","useCallback","onResizerKeyDown","event","decreaseKey","increaseKey","prev","secondChildStyle","firstChildStyle","jsxs","cn","jsx"],"mappings":";;;;;;;AA8BA,MAAMA,IAAoB,CAACC,GAA2BC,MAChD,CAACD,KAAaC,IACT,MAAMA,IAEXD,KAGG,IAGIE,IAAgBC,EAAkE,SAC7F;AAAA,EACE,WAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,WAAAL;AAAA,EACA,YAAAC;AAAA,EACA,UAAAK;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,kBAAAC,IAAmB;AACrB,GACAC,GACA;AACA,QAAMC,IAAaC,EAAuB,IAAI,GACxCC,IAAmBC,EAA2BJ,GAAKC,CAAU,GAC7D,CAACI,GAASC,CAAU,IAAIC,EAAiBlB,EAAkBC,GAAWC,CAAU,CAAC,GACjF,CAACiB,GAAgBC,CAAiB,IAAIF,EAAgC,IAAI,GAC1E,CAACG,GAAYC,CAAa,IAAIJ,EAAS,EAAK;AAElD,EAAAK,EAAU,MAAM;AACd,IAAAN,EAAWjB,EAAkBC,GAAWC,CAAU,CAAC;AAAA,EACrD,GAAG,CAACD,GAAWC,CAAU,CAAC;AAE1B,QAAMsB,IAAQC,EAAS,QAAQlB,CAAQ;AACvC,MAAIiB,EAAM,SAAS;AACjB,UAAM,IAAI,MAAM,kCAAkC;AAGpD,QAAME,IAAkB,MAAM;AAC5B,IAAAN,EAAkBR,EAAW,OAAO,GACpCU,EAAc,EAAI;AAAA,EACpB,GAEMK,IAAkBC;AAAA,IACtB,MACEC,EAAS,CAACC,MAAoB;AAC5B,UAAI,CAACT,EAAY;AACjB,YAAMU,IAAUnB,EAAW;AAC3B,UAAI,CAACmB,KAAWA,MAAYZ,EAAgB;AAK5C,YAAMa,IAAOD,EAAQ,sBAAA,GACfE,IAAQ3B,MAAgB,aAAa0B,EAAK,SAASA,EAAK,OACxDE,IAAS5B,MAAgB,aAAawB,EAAE,UAAUE,EAAK,MAAMF,EAAE,UAAUE,EAAK,MAE9EG,IAAU,KAAK,IAAI,GAAG,KAAK,IAAIF,IAAQ,GAAGC,CAAM,CAAC;AACvD,MAAAjB,EAAYkB,IAAUF,IAAS,GAAG;AAAA,IACpC,GAAG,MAAO,EAAE;AAAA,IACd,CAACZ,GAAYF,GAAgBb,CAAW;AAAA,EAAA,GAGpC8B,IAAgBC,EAAY,MAAM;AACtC,IAAAjB,EAAkB,IAAI,GACtBE,EAAc,EAAK,GACnB,SAAS,KAAK,oBAAoB,aAAac,CAAa,GAC5D,SAAS,KAAK,oBAAoB,eAAeT,CAAe;AAAA,EAClE,GAAG,CAACA,CAAe,CAAC;AAEpB,EAAAJ,EAAU,MAAM;AACd,IAAAf,KAAA,QAAAA,EAAeQ;AAAA,EACjB,GAAG,CAACA,GAASR,CAAY,CAAC;AAE1B,QAAM8B,IAAmB,CAACC,MAA0C;AAClE,UAAMC,IAAclC,MAAgB,aAAa,YAAY,aACvDmC,IAAcnC,MAAgB,aAAa,cAAc;AAE/D,IAAIiC,EAAM,QAAQC,KAChBD,EAAM,eAAA,GACNtB,EAAW,CAACyB,MAAS,KAAK,IAAI,GAAGA,IAAOjC,CAAY,CAAC,KAC5C8B,EAAM,QAAQE,KACvBF,EAAM,eAAA,GACNtB,EAAW,CAACyB,MAAS,KAAK,IAAI,KAAKA,IAAOjC,CAAY,CAAC,KAC9C8B,EAAM,QAAQ,UACvBA,EAAM,eAAA,GACNtB,EAAW,CAAC,KACHsB,EAAM,QAAQ,UACvBA,EAAM,eAAA,GACNtB,EAAW,GAAG;AAAA,EAElB,GAEM0B,IACJrC,MAAgB,aAAa,EAAE,QAAQ,GAAG,MAAMU,CAAO,IAAA,IAAQ,EAAE,OAAO,GAAG,MAAMA,CAAO,IAAA,GAEpF4B,IAAkBtC,MAAgB,aAAa,EAAE,QAAQ,GAAGU,CAAO,IAAA,IAAQ,EAAE,OAAO,GAAGA,CAAO,IAAA;AAEpG,SAAAO,EAAU,OACJF,KACF,SAAS,KAAK,iBAAiB,aAAae,CAAa,GACzD,SAAS,KAAK,iBAAiB,eAAeT,CAAe,GAC7D,SAAS,KAAK,MAAM,SAASrB,MAAgB,eAAe,aAAa,cAEzE,SAAS,KAAK,MAAM,SAAS,WAGxB,MAAM;AACX,aAAS,KAAK,oBAAoB,aAAa8B,CAAa,GAC5D,SAAS,KAAK,oBAAoB,eAAeT,CAAe;AAAA,EAClE,IACC,CAACA,GAAiBS,GAAef,GAAYf,CAAW,CAAC,GAG1D,gBAAAuC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,gCAAgC,QAAQxC,CAAW,IAAID,CAAS;AAAA,MAC9E,KAAKS;AAAA,MACL,eAAY;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAiC,EAAC,OAAA,EAAI,WAAWD,EAAG,8BAA8B,QAAQxC,CAAW,EAAE,GAAG,OAAOsC,GAC7E,UAAApB,EAAM,CAAC,KAAK,IACf;AAAA,QACA,gBAAAuB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,eAAerB;AAAA,YACf,WAAW;AAAA,YACX,MAAK;AAAA,YACL,oBAAkBpB,MAAgB,aAAa,eAAe;AAAA,YAC9D,iBAAe,KAAK,MAAMU,CAAO;AAAA,YACjC,iBAAe;AAAA,YACf,iBAAe;AAAA,YACf,cAAYN;AAAA,YACZ,UAAU;AAAA,YACV,WAAW4B;AAAA,UAAA;AAAA,QAAA;AAAA,QAEb,gBAAAS,EAAC,OAAA,EAAI,WAAWD,EAAG,+BAA+B,QAAQxC,CAAW,EAAE,GAAG,OAAOqC,GAC9E,UAAAnB,EAAM,CAAC,KAAK,GAAA,CACf;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/components/layout/sectionHeader/index.d.ts

@@ -0,0 +1,2 @@
+export { SectionHeader, default } from "./sectionHeader";
+export type { SectionHeaderProps } from "./sectionHeader";

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

@@ -0,0 +1,33 @@
+import React, { HTMLAttributes, ReactNode } from "react";
+export interface SectionHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    className?: string;
+    /** The section's name. */
+    title: ReactNode;
+    /** Heading level of the title: 2 by default. */
+    level?: 2 | 3 | 4 | 5 | 6;
+    /** How many items the section holds, beside the title. Nothing is shown for null. */
+    count?: number | string | null;
+    /**
+     * How to read the section, behind a "?" icon: shown on hover and on keyboard
+     * focus, and the icon's accessible name. Text only — the tooltip renders in
+     * the browser.
+     */
+    help?: string;
+    /** The "?" icon's accessible name, e.g. "Explanation: …"; the help text by default. */
+    helpLabel?: string;
+    /** Id of the heading, for anchors and aria-labelledby. */
+    titleId?: string;
+    /** A line under the title. */
+    subtitle?: ReactNode;
+    /** Test id of the root `<header>`; `section-header` unless given. */
+    "data-testid"?: string;
+}
+/**
+ * A section's heading row: the title with a count and a help hint, a subtitle
+ * under them, and the section's actions (the children) at the end. On a narrow
+ * screen the actions wrap under the title.
+ */
+export declare const SectionHeader: React.ForwardRefExoticComponent<SectionHeaderProps & {
+    children?: ReactNode | undefined;
+} & React.RefAttributes<HTMLElement>>;
+export default SectionHeader;

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

@@ -0,0 +1,77 @@
+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 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: i,
+      trigger: "manual",
+      open: a,
+      placement: "top",
+      offset: { offsetY: 6 },
+      children: /* @__PURE__ */ s(
+        "span",
+        {
+          className: "smwb-section-header__help",
+          role: "img",
+          "aria-label": t != null ? t : i,
+          tabIndex: 0,
+          onPointerEnter: () => e(!0),
+          onPointerLeave: () => e(!1),
+          onFocus: () => e(!0),
+          onBlur: () => e(!1),
+          children: /* @__PURE__ */ s(N, { name: "help", size: 16 })
+        }
+      )
+    }
+  );
+}
+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": 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(_, { 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
+          ] }),
+          m ? /* @__PURE__ */ s("div", { className: "smwb-section-header__actions", children: m }) : null
+        ]
+      }
+    );
+  }
+);
+export {
+  $ as SectionHeader
+};
+//# sourceMappingURL=sectionHeader.js.map

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

@@ -0,0 +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\";\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

@@ -29,6 +29,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,30 +1,31 @@
-import { jsx as n, jsxs as re } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/sheet/sheet.entry.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 ke = ne(function({
+import { jsx as n, jsxs as ne } 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 C, { forwardRef as oe, useState as j, useRef as H, useEffect as se, useCallback as w } from "react";
+import I from "clsx";
+import { CSSTransition as X } from "react-transition-group";
+import { createPortal as ae } from "react-dom";
+import { Button as $ } from "../../inputs/button/button.js";
+import { Icon as U } from "../../base/icon/icon.js";
+import { useForkRef as ie } from "../../../hooks/useForkRef.js";
+import { isTopOverlayLayer as le } from "../../../utils/overlayLayer.js";
+import { ClickAwayListener as ce } from "../../clickAwayListener/clickAwayListener.js";
+const De = oe(function({
   isOpen: m,
   onClose: i,
   variant: d = "default",
   children: r,
-  placement: k = "bottom",
+  placement: A = "bottom",
   disableOutsideClick: p,
   closeOnEsc: z = !0,
-  ...A
-}, D) {
-  const [u, b] = W(null), y = H(null);
-  oe(() => {
+  ...D
+}, v) {
+  const [u, b] = j(null), y = H(null);
+  se(() => {
     if (!m || !z || !i)
       return;
-    const o = (v) => {
-      v.key === "Escape" && ie(y.current) && i();
+    const o = (_) => {
+      _.key === "Escape" && !_.defaultPrevented && le(y.current) && i();
     };
     return document.addEventListener("keydown", o), () => document.removeEventListener("keydown", o);
   }, [m, z, i]);
@@ -33,9 +34,9 @@ const ke = ne(function({
   }, a = () => {
     i == null || i(), b(null);
   };
-  return se(
+  return ae(
     /* @__PURE__ */ n(
-      j,
+      X,
       {
         in: m,
         timeout: 70,
@@ -47,21 +48,21 @@ const ke = ne(function({
         children: d === "default" ? /* @__PURE__ */ n(
           "div",
           {
-            className: L(p ? "smwb-sheet__overlay" : "smwb-sheet__default"),
+            className: I(p ? "smwb-sheet__overlay" : "smwb-sheet__default"),
             ref: y,
             "data-smwb-overlay-layer": "",
             children: /* @__PURE__ */ n(
-              U,
+              W,
               {
-                ref: D,
+                ref: v,
                 onClose: i,
                 handleSizeButton: g,
                 handleClose: a,
                 isOpen: m,
                 mode: u,
-                placement: k,
+                placement: A,
                 variant: d,
-                ...A,
+                ...D,
                 children: r
               }
             )
@@ -69,21 +70,21 @@ const ke = ne(function({
         ) : /* @__PURE__ */ n(
           "div",
           {
-            className: L("smwb-sheet__overlay", "smwb-dark", `smwb-${k}`, `smwb-sheet_${d}`),
+            className: I("smwb-sheet__overlay", "smwb-dark", `smwb-${A}`, `smwb-sheet_${d}`),
             ref: y,
             "data-smwb-overlay-layer": "",
-            children: /* @__PURE__ */ n(le, { onClickAway: () => !p && a(), children: /* @__PURE__ */ n(
-              U,
+            children: /* @__PURE__ */ n(ce, { onClickAway: () => !p && a(), children: /* @__PURE__ */ n(
+              W,
               {
-                ref: D,
+                ref: v,
                 onClose: i,
                 handleSizeButton: g,
                 handleClose: a,
                 isOpen: m,
                 mode: u,
-                placement: k,
+                placement: A,
                 variant: d,
-                ...A,
+                ...D,
                 children: r
               }
             ) })
@@ -93,36 +94,37 @@ const ke = ne(function({
     ),
     document.body
   );
-}), ce = (x) => x === "bottom" || x === "top", U = K.forwardRef(function(m, i) {
+}), de = (x) => x === "bottom" || x === "top", W = C.forwardRef(function(m, i) {
   const {
     isOpen: d,
     placement: r,
-    className: k,
+    className: A,
     mode: p,
     size: z = "60%",
-    variant: A,
-    onClose: D,
+    variant: D,
+    onClose: v,
     withSizeToggle: u = !0,
     hideHeaderActions: b = !1,
     reverseHeaderActions: y = !1,
     resizable: g = !1,
     minSize: a = 80,
     maxSize: o,
-    resizeStep: v = 24,
-    resizeHandleAriaLabel: X = "Resize sheet",
+    resizeStep: _ = 24,
+    resizeHandleAriaLabel: Y = "Resize sheet",
     onResize: N,
-    style: Y,
-    handleClose: F,
-    handleSizeButton: V,
-    children: q,
-    ...G
-  } = m, J = !b && (!!D || u), P = [];
+    style: F,
+    handleClose: V,
+    handleSizeButton: q,
+    children: G,
+    "data-testid": J = "sheet",
+    ...L
+  } = m, Q = !b && (!!v || 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")
+    /* @__PURE__ */ n($, { variant: "outlined", size: "small", onClick: q, children: /* @__PURE__ */ n(U, { name: "open_in_full" }) }, "size")
+  ), v && P.push(
+    /* @__PURE__ */ n($, { variant: "outlined", size: "small", onClick: V, children: /* @__PURE__ */ n(U, { 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(
+  const T = H(null), S = H(null), Z = ie(i, T, S), [l, B] = j(null), s = de(r), M = w(
     (e) => {
       const t = s ? window.innerHeight : window.innerWidth, c = o != null ? o : t;
       return Math.max(a, Math.min(c, e));
@@ -135,10 +137,10 @@ const ke = ne(function({
   }, [s, a]), h = w(
     (e) => {
       const t = M(e);
-      I(t), N == null || N(t);
+      B(t), N == null || N(t);
     },
     [M, N]
-  ), E = H(null), Z = w(
+  ), E = H(null), O = w(
     (e) => {
       var t, c;
       e.preventDefault(), E.current = {
@@ -151,49 +153,49 @@ const ke = ne(function({
       }
     },
     [s, R]
-  ), O = w(
+  ), ee = w(
     (e) => {
       const t = E.current;
       if (!t)
         return;
-      const f = (s ? e.clientY : e.clientX) - t.start, _ = r === "bottom" || r === "right" ? -f : f;
-      h(t.size + _);
+      const f = (s ? e.clientY : e.clientX) - t.start, k = r === "bottom" || r === "right" ? -f : f;
+      h(t.size + k);
     },
     [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(
+  ), K = w((e) => {
+    var t, c, f, k;
+    E.current = null, (c = (t = e.currentTarget).hasPointerCapture) != null && c.call(t, e.pointerId) && ((k = (f = e.currentTarget).releasePointerCapture) == null || k.call(f, e.pointerId));
+  }, []), te = w(
     (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 = l != null ? l : R(), c = o != null ? o : s ? window.innerHeight : window.innerWidth, f = r === "bottom" ? "ArrowUp" : r === "top" ? "ArrowDown" : r === "left" ? "ArrowRight" : "ArrowLeft", k = r === "bottom" ? "ArrowDown" : r === "top" ? "ArrowUp" : r === "left" ? "ArrowLeft" : "ArrowRight";
+      e.key === f ? (e.preventDefault(), h(t + _)) : e.key === k ? (e.preventDefault(), h(t - _)) : e.key === "Home" ? (e.preventDefault(), h(a)) : e.key === "End" && (e.preventDefault(), h(c));
     },
-    [l, R, s, r, h, v, a, o]
+    [l, R, s, r, h, _, a, o]
   );
-  K.useEffect(() => {
+  C.useEffect(() => {
     var e;
     if (!d) {
-      I(null);
+      B(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 re = g && l !== null ? { ...s ? { height: l } : { width: l }, transition: "none" } : {};
+  return /* @__PURE__ */ n(X, { in: d, timeout: 120, appear: !0, classNames: { enterDone: "smwb-sheet_entered" }, nodeRef: T, children: /* @__PURE__ */ ne(
     "div",
     {
-      ref: Q,
-      "data-testid": "sheet",
+      ref: Z,
+      "data-testid": J,
+      ...L,
       tabIndex: -1,
       role: "dialog",
-      "aria-modal": A === "modal" || void 0,
-      ...G,
-      className: L("smwb-sheet", k, `smwb-sheet_${A}`, `smwb-${r}`, {
+      "aria-modal": D === "modal" || L["aria-modal"],
+      className: I("smwb-sheet", A, `smwb-sheet_${D}`, `smwb-${r}`, {
         "smwb-expanded": p === "expanded",
         "smwb-small": p === "small",
         "smwb-sheet_resizable": g
       }),
-      style: { "--sizeProp": z, ...te, ...Y },
+      style: { "--sizeProp": z, ...re, ...F },
       children: [
         g && /* @__PURE__ */ n(
           "div",
@@ -203,26 +205,26 @@ const ke = ne(function({
             role: "separator",
             tabIndex: 0,
             "aria-orientation": s ? "horizontal" : "vertical",
-            "aria-label": X,
+            "aria-label": Y,
             "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,
+            onPointerDown: O,
+            onPointerMove: ee,
+            onPointerUp: K,
+            onPointerCancel: K,
+            onKeyDown: te,
             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 })
+        Q && /* @__PURE__ */ n("div", { className: "smwb-sheet__header", children: P }),
+        d && p !== "small" && /* @__PURE__ */ n("div", { className: "smwb-sheet__inner", children: G })
       ]
     }
   ) });
 });
 export {
-  ke as Sheet,
-  ke as default
+  De as Sheet,
+  De as default
 };
 //# sourceMappingURL=sheet.js.map