npm - @smwb/ui-react - Versions diffs - 2.4.0 → 2.4.1 - Mend

@smwb/ui-react 2.4.0 → 2.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

package/dist/headless/components/layout/sheet/sheet.js CHANGED Viewed

@@ -1,35 +1,36 @@
 import { jsx as n, jsxs as re } from "react/jsx-runtime";
-import T, { forwardRef as ne, useState as W, useRef as H, useEffect as oe, useCallback as w } from "react";
-import B from "clsx";
+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 ie } from "../../../hooks/useForkRef.js";
-import { ClickAwayListener as ae } from "../../clickAwayListener/clickAwayListener.js";
-const ye = ne(function({
+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 _e = ne(function({
   isOpen: u,
-  onClose: a,
+  onClose: i,
   variant: d = "default",
   children: r,
-  placement: _ = "bottom",
+  placement: k = "bottom",
   disableOutsideClick: p,
-  closeOnEsc: v = !0,
-  ...k
-}, A) {
-  const [m, b] = W(null), D = H(null);
+  closeOnEsc: z = !0,
+  ...A
+}, D) {
+  const [m, b] = W(null), y = H(null);
   oe(() => {
-    if (!u || !v || !a)
+    if (!u || !z || !i)
       return;
-    const o = (R) => {
-      R.key === "Escape" && a();
+    const o = (v) => {
+      v.key === "Escape" && ie(y.current) && i();
     };
     return document.addEventListener("keydown", o), () => document.removeEventListener("keydown", o);
-  }, [u, v, a]);
-  const y = () => {
+  }, [u, z, i]);
+  const g = () => {
     b(m === "expanded" ? "small" : m ? null : "expanded");
-  }, i = () => {
-    a == null || a(), b(null);
+  }, a = () => {
+    i == null || i(), b(null);
   };
   return se(
     /* @__PURE__ */ n(
@@ -41,38 +42,47 @@ const ye = ne(function({
         unmountOnExit: !0,
         classNames: { enterDone: "smwb-entered" },
         appear: !0,
-        nodeRef: D,
-        children: d === "default" ? /* @__PURE__ */ n("div", { className: B(p ? "smwb-sheet__overlay" : "smwb-sheet__default"), ref: D, children: /* @__PURE__ */ n(
-          U,
+        nodeRef: y,
+        children: d === "default" ? /* @__PURE__ */ n(
+          "div",
           {
-            ref: A,
-            onClose: a,
-            handleSizeButton: y,
-            handleClose: i,
-            isOpen: u,
-            mode: m,
-            placement: _,
-            variant: d,
-            ...k,
-            children: r
+            className: L(p ? "smwb-sheet__overlay" : "smwb-sheet__default"),
+            ref: y,
+            "data-smwb-overlay-layer": "",
+            children: /* @__PURE__ */ n(
+              U,
+              {
+                ref: D,
+                onClose: i,
+                handleSizeButton: g,
+                handleClose: a,
+                isOpen: u,
+                mode: m,
+                placement: k,
+                variant: d,
+                ...A,
+                children: r
+              }
+            )
           }
-        ) }) : /* @__PURE__ */ n(
+        ) : /* @__PURE__ */ n(
           "div",
           {
-            className: B("smwb-sheet__overlay", "smwb-dark", `smwb-${_}`, `smwb-sheet_${d}`),
-            ref: D,
-            children: /* @__PURE__ */ n(ae, { onClickAway: () => !p && i(), children: /* @__PURE__ */ n(
+            className: L("smwb-sheet__overlay", "smwb-dark", `smwb-${k}`, `smwb-sheet_${d}`),
+            ref: y,
+            "data-smwb-overlay-layer": "",
+            children: /* @__PURE__ */ n(le, { onClickAway: () => !p && a(), children: /* @__PURE__ */ n(
               U,
               {
-                ref: A,
-                onClose: a,
-                handleSizeButton: y,
-                handleClose: i,
+                ref: D,
+                onClose: i,
+                handleSizeButton: g,
+                handleClose: a,
                 isOpen: u,
                 mode: m,
-                placement: _,
+                placement: k,
                 variant: d,
-                ...k,
+                ...A,
                 children: r
               }
             ) })
@@ -82,22 +92,22 @@ const ye = ne(function({
     ),
     document.body
   );
-}), le = (z) => z === "bottom" || z === "top", U = T.forwardRef(function(u, a) {
+}), ce = (x) => x === "bottom" || x === "top", U = K.forwardRef(function(u, i) {
   const {
     isOpen: d,
     placement: r,
-    className: _,
+    className: k,
     mode: p,
-    size: v = "60%",
-    variant: k,
-    onClose: A,
+    size: z = "60%",
+    variant: A,
+    onClose: D,
     withSizeToggle: m = !0,
     hideHeaderActions: b = !1,
-    reverseHeaderActions: D = !1,
-    resizable: y = !1,
-    minSize: i = 80,
+    reverseHeaderActions: y = !1,
+    resizable: g = !1,
+    minSize: a = 80,
     maxSize: o,
-    resizeStep: R = 24,
+    resizeStep: v = 24,
     resizeHandleAriaLabel: X = "Resize sheet",
     onResize: N,
     style: Y,
@@ -105,26 +115,26 @@ const ye = ne(function({
     handleSizeButton: V,
     children: q,
     ...G
-  } = u, J = !b && (!!A || m), P = [];
+  } = u, J = !b && (!!D || m), P = [];
   m && P.push(
     /* @__PURE__ */ n(C, { variant: "outlined", size: "small", onClick: V, children: /* @__PURE__ */ n($, { name: "open_in_full" }) }, "size")
-  ), A && P.push(
+  ), D && P.push(
     /* @__PURE__ */ n(C, { variant: "outlined", size: "small", onClick: F, children: /* @__PURE__ */ n($, { name: "close" }) }, "close")
-  ), D && P.reverse();
-  const I = H(null), S = H(null), Q = ie(a, I, S), [l, L] = W(null), s = le(r), M = w(
+  ), y && P.reverse();
+  const B = H(null), S = H(null), Q = ae(i, B, S), [l, I] = W(null), s = ce(r), M = w(
     (e) => {
       const t = s ? window.innerHeight : window.innerWidth, c = o != null ? o : t;
-      return Math.max(i, Math.min(c, e));
+      return Math.max(a, Math.min(c, e));
     },
-    [s, o, i]
-  ), x = w(() => {
+    [s, o, a]
+  ), R = w(() => {
     var t;
     const e = (t = S.current) == null ? void 0 : t.getBoundingClientRect();
-    return e ? s ? e.height : e.width : i;
-  }, [s, i]), h = w(
+    return e ? s ? e.height : e.width : a;
+  }, [s, a]), h = w(
     (e) => {
       const t = M(e);
-      L(t), N == null || N(t);
+      I(t), N == null || N(t);
     },
     [M, N]
   ), E = H(null), Z = w(
@@ -132,59 +142,59 @@ const ye = ne(function({
       var t, c;
       e.preventDefault(), E.current = {
         start: s ? e.clientY : e.clientX,
-        size: x()
+        size: R()
       };
       try {
         (c = (t = e.currentTarget).setPointerCapture) == null || c.call(t, e.pointerId);
       } catch {
       }
     },
-    [s, x]
+    [s, R]
   ), O = w(
     (e) => {
       const t = E.current;
       if (!t)
         return;
-      const f = (s ? e.clientY : e.clientX) - t.start, g = r === "bottom" || r === "right" ? -f : f;
-      h(t.size + g);
+      const f = (s ? e.clientY : e.clientX) - t.start, _ = r === "bottom" || r === "right" ? -f : f;
+      h(t.size + _);
     },
     [s, r, h]
-  ), K = w((e) => {
-    var t, c, f, g;
-    E.current = null, (c = (t = e.currentTarget).hasPointerCapture) != null && c.call(t, e.pointerId) && ((g = (f = e.currentTarget).releasePointerCapture) == null || g.call(f, e.pointerId));
+  ), 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(
     (e) => {
-      const t = l != null ? l : x(), c = o != null ? o : s ? window.innerHeight : window.innerWidth, f = r === "bottom" ? "ArrowUp" : r === "top" ? "ArrowDown" : r === "left" ? "ArrowRight" : "ArrowLeft", g = r === "bottom" ? "ArrowDown" : r === "top" ? "ArrowUp" : r === "left" ? "ArrowLeft" : "ArrowRight";
-      e.key === f ? (e.preventDefault(), h(t + R)) : e.key === g ? (e.preventDefault(), h(t - R)) : e.key === "Home" ? (e.preventDefault(), h(i)) : 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", _ = 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));
     },
-    [l, x, s, r, h, R, i, o]
+    [l, R, s, r, h, v, a, o]
   );
-  T.useEffect(() => {
+  K.useEffect(() => {
     var e;
     if (!d) {
-      L(null);
+      I(null);
       return;
     }
     (e = S.current) == null || e.focus();
   }, [d]);
-  const te = y && 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: I, children: /* @__PURE__ */ re(
+  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(
     "div",
     {
       ref: Q,
       "data-testid": "sheet",
       tabIndex: -1,
       role: "dialog",
-      "aria-modal": k === "modal" || void 0,
+      "aria-modal": A === "modal" || void 0,
       ...G,
-      className: B("smwb-sheet", _, `smwb-sheet_${k}`, `smwb-${r}`, {
+      className: L("smwb-sheet", k, `smwb-sheet_${A}`, `smwb-${r}`, {
         "smwb-expanded": p === "expanded",
         "smwb-small": p === "small",
-        "smwb-sheet_resizable": y
+        "smwb-sheet_resizable": g
       }),
-      style: { "--sizeProp": v, ...te, ...Y },
+      style: { "--sizeProp": z, ...te, ...Y },
       children: [
-        y && /* @__PURE__ */ n(
+        g && /* @__PURE__ */ n(
           "div",
           {
             className: "smwb-sheet__drag-handle",
@@ -193,13 +203,13 @@ const ye = ne(function({
             tabIndex: 0,
             "aria-orientation": s ? "horizontal" : "vertical",
             "aria-label": X,
-            "aria-valuemin": i,
+            "aria-valuemin": a,
             "aria-valuemax": Math.round(o != null ? o : s ? window.innerHeight : window.innerWidth),
-            "aria-valuenow": Math.round(l != null ? l : x()),
+            "aria-valuenow": Math.round(l != null ? l : R()),
             onPointerDown: Z,
             onPointerMove: O,
-            onPointerUp: K,
-            onPointerCancel: K,
+            onPointerUp: T,
+            onPointerCancel: T,
             onKeyDown: ee,
             children: /* @__PURE__ */ n("span", { className: "smwb-sheet__drag-handle-bar" })
           }
@@ -211,7 +221,7 @@ const ye = ne(function({
   ) });
 });
 export {
-  ye as Sheet,
-  ye as default
+  _e as Sheet,
+  _e as default
 };
 //# sourceMappingURL=sheet.js.map

package/dist/headless/components/layout/sheet/sheet.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sheet.js","sources":["../../../../../src/components/layout/sheet/sheet.tsx"],"sourcesContent":["import React, { CSSProperties, forwardRef, PropsWithChildren, useCallback, useEffect, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { createPortal } from \"react-dom\";\nimport Button from \"../../inputs/button/button\";\nimport Icon from \"../../base/icon/icon\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\n\nexport interface SheetProps extends React.HTMLAttributes<HTMLDivElement> {\n className?: string;\n placement?: \"top\" \| \"bottom\" \| \"right\" \| \"left\";\n isOpen: boolean;\n onClose?: () => void;\n variant?: \"default\" \| \"modal\";\n withSizeToggle?: boolean;\n /** Hide built-in header actions; onClose still handles Esc and backdrop. /\n hideHeaderActions?: boolean;\n reverseHeaderActions?: boolean;\n size?: string;\n disableOutsideClick?: boolean;\n /* Close the sheet when Escape is pressed. /\n closeOnEsc?: boolean;\n /\n Allow the user to resize the sheet by dragging a grab handle with\n * touch or mouse (mobile bottom-sheet style). Off by default.\n /\n resizable?: boolean;\n /* Minimum size in px while resizing (default 80). /\n minSize?: number;\n /* Maximum size in px while resizing (default: viewport dimension). /\n maxSize?: number;\n /* Step in px for keyboard resizing (default 24). /\n resizeStep?: number;\n /* Accessible label for the resize handle. /\n resizeHandleAriaLabel?: string;\n /* Called with the new size in px while/after resizing. /\n onResize?: (size: number) => void;\n \"aria-label\"?: string;\n}\n\ntype Mode = \"small\" \| \"expanded\" \| null;\n\nexport const Sheet = forwardRef<HTMLDivElement, PropsWithChildren<SheetProps>>(function Sheet(\n {\n isOpen,\n onClose,\n variant = \"default\",\n children,\n placement = \"bottom\",\n disableOutsideClick,\n closeOnEsc = true,\n ...props\n },\n ref\n) {\n const [mode, setMode] = useState<Mode>(null);\n const nodeRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (!isOpen \|\| !closeOnEsc \|\| !onClose) {\n return;\n }\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n onClose();\n }\n };\n document.addEventListener(\"keydown\", onKeyDown);\n\n return () => document.removeEventListener(\"keydown\", onKeyDown);\n }, [isOpen, closeOnEsc, onClose]);\n\n const handleSizeButton = () => {\n if (mode === \"expanded\") {\n setMode(\"small\");\n } else if (!mode) {\n setMode(\"expanded\");\n } else {\n setMode(null);\n }\n };\n\n const handleClose = () => {\n onClose?.();\n setMode(null);\n };\n\n return createPortal(\n <CSSTransition\n in={isOpen}\n timeout={70}\n mountOnEnter\n unmountOnExit\n classNames={{ enterDone: \"smwb-entered\" }}\n appear\n nodeRef={nodeRef}\n >\n {variant === \"default\" ? (\n <div className={cn(disableOutsideClick ? \"smwb-sheet__overlay\" : \"smwb-sheet__default\")} ref={nodeRef}>\n <SheetBlock\n ref={ref}\n onClose={onClose}\n handleSizeButton={handleSizeButton}\n handleClose={handleClose}\n isOpen={isOpen}\n mode={mode}\n placement={placement}\n variant={variant}\n {...props}\n >\n {children}\n </SheetBlock>\n </div>\n ) : (\n <div\n className={cn(\"smwb-sheet__overlay\", \"smwb-dark\", `smwb-${placement}`, `smwb-sheet_${variant}`)}\n ref={nodeRef}\n >\n <ClickAwayListener onClickAway={() => !disableOutsideClick && handleClose()}>\n <SheetBlock\n ref={ref}\n onClose={onClose}\n handleSizeButton={handleSizeButton}\n handleClose={handleClose}\n isOpen={isOpen}\n mode={mode}\n placement={placement}\n variant={variant}\n {...props}\n >\n {children}\n </SheetBlock>\n </ClickAwayListener>\n </div>\n )}\n </CSSTransition>,\n document.body\n );\n});\n\nexport default Sheet;\n\ninterface SheetBlockProps extends SheetProps {\n mode: Mode;\n handleSizeButton: () => void;\n handleClose: () => void;\n}\n\n/* Sheets anchored to a horizontal edge resize on the Y axis, vertical edges on X. /\nconst isVerticalAxis = (placement: SheetProps[\"placement\"]) => placement === \"bottom\" \|\| placement === \"top\";\n\nconst SheetBlock = React.forwardRef(function SheetBlock(props: SheetBlockProps, ref: React.Ref<HTMLDivElement>) {\n const {\n isOpen,\n placement,\n className,\n mode,\n\n size = \"60%\",\n variant,\n onClose,\n withSizeToggle = true,\n hideHeaderActions = false,\n reverseHeaderActions = false,\n resizable = false,\n minSize = 80,\n maxSize,\n resizeStep = 24,\n resizeHandleAriaLabel = \"Resize sheet\",\n onResize,\n style,\n handleClose,\n handleSizeButton,\n children,\n ...rest\n } = props;\n const showActions = !hideHeaderActions && (!!onClose \|\| withSizeToggle);\n const headerActionNodes: React.ReactNode[] = [];\n if (withSizeToggle) {\n headerActionNodes.push(\n <Button variant={\"outlined\"} size=\"small\" onClick={handleSizeButton} key=\"size\">\n <Icon name=\"open_in_full\" />\n </Button>\n );\n }\n if (onClose) {\n headerActionNodes.push(\n <Button variant={\"outlined\"} size=\"small\" onClick={handleClose} key=\"close\">\n <Icon name=\"close\" />\n </Button>\n );\n }\n if (reverseHeaderActions) {\n headerActionNodes.reverse();\n }\n const nodeRef = useRef<HTMLDivElement>(null);\n const rootRef = useRef<HTMLDivElement>(null);\n const forkRef = useForkRef(ref, nodeRef, rootRef);\n\n // Drag-to-resize state. `dragSize` (px) wins over the CSS size when set\n // (inline style beats the .smwb-expanded/.smwb-small rules).\n const [dragSize, setDragSize] = useState<number \| null>(null);\n const vertical = isVerticalAxis(placement);\n\n const clamp = useCallback(\n (px: number) => {\n const viewport = vertical ? window.innerHeight : window.innerWidth;\n const max = maxSize ?? viewport;\n return Math.max(minSize, Math.min(max, px));\n },\n [vertical, maxSize, minSize]\n );\n\n const currentSizePx = useCallback(() => {\n const rect = rootRef.current?.getBoundingClientRect();\n if (!rect) {\n return minSize;\n }\n return vertical ? rect.height : rect.width;\n }, [vertical, minSize]);\n\n const applySize = useCallback(\n (px: number) => {\n const next = clamp(px);\n setDragSize(next);\n onResize?.(next);\n },\n [clamp, onResize]\n );\n\n const dragRef = useRef<{ start: number; size: number } \| null>(null);\n\n const onPointerDown = useCallback(\n (event: React.PointerEvent<HTMLDivElement>) => {\n event.preventDefault();\n dragRef.current = {\n start: vertical ? event.clientY : event.clientX,\n size: currentSizePx(),\n };\n try {\n event.currentTarget.setPointerCapture?.(event.pointerId);\n } catch {\n / pointer capture is best-effort (unsupported in some envs) /\n }\n },\n [vertical, currentSizePx]\n );\n\n const onPointerMove = useCallback(\n (event: React.PointerEvent<HTMLDivElement>) => {\n const drag = dragRef.current;\n if (!drag) {\n return;\n }\n const pos = vertical ? event.clientY : event.clientX;\n const delta = pos - drag.start;\n // Sign so dragging away* from the anchored edge grows the sheet.\n const grow = placement === \"bottom\" \|\| placement === \"right\" ? -delta : delta;\n applySize(drag.size + grow);\n },\n [vertical, placement, applySize]\n );\n\n const endDrag = useCallback((event: React.PointerEvent<HTMLDivElement>) => {\n dragRef.current = null;\n if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {\n event.currentTarget.releasePointerCapture?.(event.pointerId);\n }\n }, []);\n\n const onHandleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLDivElement>) => {\n const base = dragSize ?? currentSizePx();\n const max = maxSize ?? (vertical ? window.innerHeight : window.innerWidth);\n // Key that should make the sheet bigger, per anchored edge.\n const incKey =\n placement === \"bottom\"\n ? \"ArrowUp\"\n : placement === \"top\"\n ? \"ArrowDown\"\n : placement === \"left\"\n ? \"ArrowRight\"\n : \"ArrowLeft\";\n const decKey =\n placement === \"bottom\"\n ? \"ArrowDown\"\n : placement === \"top\"\n ? \"ArrowUp\"\n : placement === \"left\"\n ? \"ArrowLeft\"\n : \"ArrowRight\";\n if (event.key === incKey) {\n event.preventDefault();\n applySize(base + resizeStep);\n } else if (event.key === decKey) {\n event.preventDefault();\n applySize(base - resizeStep);\n } else if (event.key === \"Home\") {\n event.preventDefault();\n applySize(minSize);\n } else if (event.key === \"End\") {\n event.preventDefault();\n applySize(max);\n }\n },\n [dragSize, currentSizePx, vertical, placement, applySize, resizeStep, minSize, maxSize]\n );\n\n React.useEffect(() => {\n if (!isOpen) {\n setDragSize(null);\n return;\n }\n\n rootRef.current?.focus();\n }, [isOpen]);\n\n // While a drag size is applied, suppress the sheet's 0.2s size\n // transition so the panel tracks the pointer in real time instead\n // of lagging 200ms behind every move.\n const sizeStyle: CSSProperties =\n resizable && dragSize !== null\n ? { ...(vertical ? { height: dragSize } : { width: dragSize }), transition: \"none\" }\n : {};\n\n return (\n <CSSTransition in={isOpen} timeout={120} appear classNames={{ enterDone: \"smwb-sheet_entered\" }} nodeRef={nodeRef}>\n <div\n ref={forkRef}\n data-testid=\"sheet\"\n tabIndex={-1}\n role=\"dialog\"\n aria-modal={variant === \"modal\" \|\| undefined}\n {...rest}\n className={cn(\"smwb-sheet\", className, `smwb-sheet_${variant}`, `smwb-${placement}`, {\n \"smwb-expanded\": mode === \"expanded\",\n \"smwb-small\": mode === \"small\",\n \"smwb-sheet_resizable\": resizable,\n })}\n style={{ \"--sizeProp\": size, ...sizeStyle, ...style } as CSSProperties}\n >\n {resizable && (\n <div\n className=\"smwb-sheet__drag-handle\"\n data-testid=\"sheet-drag-handle\"\n role=\"separator\"\n tabIndex={0}\n aria-orientation={vertical ? \"horizontal\" : \"vertical\"}\n aria-label={resizeHandleAriaLabel}\n aria-valuemin={minSize}\n aria-valuemax={Math.round(maxSize ?? (vertical ? window.innerHeight : window.innerWidth))}\n aria-valuenow={Math.round(dragSize ?? currentSizePx())}\n onPointerDown={onPointerDown}\n onPointerMove={onPointerMove}\n onPointerUp={endDrag}\n onPointerCancel={endDrag}\n onKeyDown={onHandleKeyDown}\n >\n <span className=\"smwb-sheet__drag-handle-bar\" />\n </div>\n )}\n {showActions && <div className=\"smwb-sheet__header\">{headerActionNodes}</div>}\n {isOpen && mode !== \"small\" && <div className=\"smwb-sheet__inner\">{children}</div>}\n </div>\n </CSSTransition>\n );\n});\n"],"names":["Sheet","forwardRef","isOpen","onClose","variant","children","placement","disableOutsideClick","closeOnEsc","props","ref","mode","setMode","useState","nodeRef","useRef","useEffect","onKeyDown","event","handleSizeButton","handleClose","createPortal","jsx","CSSTransition","cn","SheetBlock","ClickAwayListener","isVerticalAxis","React","className","size","withSizeToggle","hideHeaderActions","reverseHeaderActions","resizable","minSize","maxSize","resizeStep","resizeHandleAriaLabel","onResize","style","rest","showActions","headerActionNodes","Button","Icon","rootRef","forkRef","useForkRef","dragSize","setDragSize","vertical","clamp","useCallback","px","viewport","max","currentSizePx","rect","_a","applySize","next","dragRef","onPointerDown","_b","onPointerMove","drag","delta","grow","endDrag","_d","_c","onHandleKeyDown","base","incKey","decKey","sizeStyle","jsxs"],"mappings":"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"}
1	+ {"version":3,"file":"sheet.js","sources":["../../../../../src/components/layout/sheet/sheet.tsx"],"sourcesContent":["import React, { CSSProperties, forwardRef, PropsWithChildren, useCallback, useEffect, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { createPortal } from \"react-dom\";\nimport Button from \"../../inputs/button/button\";\nimport Icon from \"../../base/icon/icon\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { isTopOverlayLayer } from \"../../../utils/overlayLayer\";\n\nexport interface SheetProps extends React.HTMLAttributes<HTMLDivElement> {\n className?: string;\n placement?: \"top\" \| \"bottom\" \| \"right\" \| \"left\";\n isOpen: boolean;\n onClose?: () => void;\n variant?: \"default\" \| \"modal\";\n withSizeToggle?: boolean;\n /** Hide built-in header actions; onClose still handles Esc and backdrop. /\n hideHeaderActions?: boolean;\n reverseHeaderActions?: boolean;\n size?: string;\n disableOutsideClick?: boolean;\n /* Close the sheet when Escape is pressed. /\n closeOnEsc?: boolean;\n /\n Allow the user to resize the sheet by dragging a grab handle with\n * touch or mouse (mobile bottom-sheet style). Off by default.\n /\n resizable?: boolean;\n /* Minimum size in px while resizing (default 80). /\n minSize?: number;\n /* Maximum size in px while resizing (default: viewport dimension). /\n maxSize?: number;\n /* Step in px for keyboard resizing (default 24). /\n resizeStep?: number;\n /* Accessible label for the resize handle. /\n resizeHandleAriaLabel?: string;\n /* Called with the new size in px while/after resizing. /\n onResize?: (size: number) => void;\n \"aria-label\"?: string;\n}\n\ntype Mode = \"small\" \| \"expanded\" \| null;\n\nexport const Sheet = forwardRef<HTMLDivElement, PropsWithChildren<SheetProps>>(function Sheet(\n {\n isOpen,\n onClose,\n variant = \"default\",\n children,\n placement = \"bottom\",\n disableOutsideClick,\n closeOnEsc = true,\n ...props\n },\n ref\n) {\n const [mode, setMode] = useState<Mode>(null);\n const nodeRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (!isOpen \|\| !closeOnEsc \|\| !onClose) {\n return;\n }\n const onKeyDown = (event: KeyboardEvent) => {\n // Only the topmost overlay layer reacts to Escape.\n if (event.key === \"Escape\" && isTopOverlayLayer(nodeRef.current)) {\n onClose();\n }\n };\n document.addEventListener(\"keydown\", onKeyDown);\n\n return () => document.removeEventListener(\"keydown\", onKeyDown);\n }, [isOpen, closeOnEsc, onClose]);\n\n const handleSizeButton = () => {\n if (mode === \"expanded\") {\n setMode(\"small\");\n } else if (!mode) {\n setMode(\"expanded\");\n } else {\n setMode(null);\n }\n };\n\n const handleClose = () => {\n onClose?.();\n setMode(null);\n };\n\n return createPortal(\n <CSSTransition\n in={isOpen}\n timeout={70}\n mountOnEnter\n unmountOnExit\n classNames={{ enterDone: \"smwb-entered\" }}\n appear\n nodeRef={nodeRef}\n >\n {variant === \"default\" ? (\n <div\n className={cn(disableOutsideClick ? \"smwb-sheet__overlay\" : \"smwb-sheet__default\")}\n ref={nodeRef}\n data-smwb-overlay-layer=\"\"\n >\n <SheetBlock\n ref={ref}\n onClose={onClose}\n handleSizeButton={handleSizeButton}\n handleClose={handleClose}\n isOpen={isOpen}\n mode={mode}\n placement={placement}\n variant={variant}\n {...props}\n >\n {children}\n </SheetBlock>\n </div>\n ) : (\n <div\n className={cn(\"smwb-sheet__overlay\", \"smwb-dark\", `smwb-${placement}`, `smwb-sheet_${variant}`)}\n ref={nodeRef}\n data-smwb-overlay-layer=\"\"\n >\n <ClickAwayListener onClickAway={() => !disableOutsideClick && handleClose()}>\n <SheetBlock\n ref={ref}\n onClose={onClose}\n handleSizeButton={handleSizeButton}\n handleClose={handleClose}\n isOpen={isOpen}\n mode={mode}\n placement={placement}\n variant={variant}\n {...props}\n >\n {children}\n </SheetBlock>\n </ClickAwayListener>\n </div>\n )}\n </CSSTransition>,\n document.body\n );\n});\n\nexport default Sheet;\n\ninterface SheetBlockProps extends SheetProps {\n mode: Mode;\n handleSizeButton: () => void;\n handleClose: () => void;\n}\n\n/* Sheets anchored to a horizontal edge resize on the Y axis, vertical edges on X. /\nconst isVerticalAxis = (placement: SheetProps[\"placement\"]) => placement === \"bottom\" \|\| placement === \"top\";\n\nconst SheetBlock = React.forwardRef(function SheetBlock(props: SheetBlockProps, ref: React.Ref<HTMLDivElement>) {\n const {\n isOpen,\n placement,\n className,\n mode,\n\n size = \"60%\",\n variant,\n onClose,\n withSizeToggle = true,\n hideHeaderActions = false,\n reverseHeaderActions = false,\n resizable = false,\n minSize = 80,\n maxSize,\n resizeStep = 24,\n resizeHandleAriaLabel = \"Resize sheet\",\n onResize,\n style,\n handleClose,\n handleSizeButton,\n children,\n ...rest\n } = props;\n const showActions = !hideHeaderActions && (!!onClose \|\| withSizeToggle);\n const headerActionNodes: React.ReactNode[] = [];\n if (withSizeToggle) {\n headerActionNodes.push(\n <Button variant={\"outlined\"} size=\"small\" onClick={handleSizeButton} key=\"size\">\n <Icon name=\"open_in_full\" />\n </Button>\n );\n }\n if (onClose) {\n headerActionNodes.push(\n <Button variant={\"outlined\"} size=\"small\" onClick={handleClose} key=\"close\">\n <Icon name=\"close\" />\n </Button>\n );\n }\n if (reverseHeaderActions) {\n headerActionNodes.reverse();\n }\n const nodeRef = useRef<HTMLDivElement>(null);\n const rootRef = useRef<HTMLDivElement>(null);\n const forkRef = useForkRef(ref, nodeRef, rootRef);\n\n // Drag-to-resize state. `dragSize` (px) wins over the CSS size when set\n // (inline style beats the .smwb-expanded/.smwb-small rules).\n const [dragSize, setDragSize] = useState<number \| null>(null);\n const vertical = isVerticalAxis(placement);\n\n const clamp = useCallback(\n (px: number) => {\n const viewport = vertical ? window.innerHeight : window.innerWidth;\n const max = maxSize ?? viewport;\n return Math.max(minSize, Math.min(max, px));\n },\n [vertical, maxSize, minSize]\n );\n\n const currentSizePx = useCallback(() => {\n const rect = rootRef.current?.getBoundingClientRect();\n if (!rect) {\n return minSize;\n }\n return vertical ? rect.height : rect.width;\n }, [vertical, minSize]);\n\n const applySize = useCallback(\n (px: number) => {\n const next = clamp(px);\n setDragSize(next);\n onResize?.(next);\n },\n [clamp, onResize]\n );\n\n const dragRef = useRef<{ start: number; size: number } \| null>(null);\n\n const onPointerDown = useCallback(\n (event: React.PointerEvent<HTMLDivElement>) => {\n event.preventDefault();\n dragRef.current = {\n start: vertical ? event.clientY : event.clientX,\n size: currentSizePx(),\n };\n try {\n event.currentTarget.setPointerCapture?.(event.pointerId);\n } catch {\n / pointer capture is best-effort (unsupported in some envs) /\n }\n },\n [vertical, currentSizePx]\n );\n\n const onPointerMove = useCallback(\n (event: React.PointerEvent<HTMLDivElement>) => {\n const drag = dragRef.current;\n if (!drag) {\n return;\n }\n const pos = vertical ? event.clientY : event.clientX;\n const delta = pos - drag.start;\n // Sign so dragging away* from the anchored edge grows the sheet.\n const grow = placement === \"bottom\" \|\| placement === \"right\" ? -delta : delta;\n applySize(drag.size + grow);\n },\n [vertical, placement, applySize]\n );\n\n const endDrag = useCallback((event: React.PointerEvent<HTMLDivElement>) => {\n dragRef.current = null;\n if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {\n event.currentTarget.releasePointerCapture?.(event.pointerId);\n }\n }, []);\n\n const onHandleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLDivElement>) => {\n const base = dragSize ?? currentSizePx();\n const max = maxSize ?? (vertical ? window.innerHeight : window.innerWidth);\n // Key that should make the sheet bigger, per anchored edge.\n const incKey =\n placement === \"bottom\"\n ? \"ArrowUp\"\n : placement === \"top\"\n ? \"ArrowDown\"\n : placement === \"left\"\n ? \"ArrowRight\"\n : \"ArrowLeft\";\n const decKey =\n placement === \"bottom\"\n ? \"ArrowDown\"\n : placement === \"top\"\n ? \"ArrowUp\"\n : placement === \"left\"\n ? \"ArrowLeft\"\n : \"ArrowRight\";\n if (event.key === incKey) {\n event.preventDefault();\n applySize(base + resizeStep);\n } else if (event.key === decKey) {\n event.preventDefault();\n applySize(base - resizeStep);\n } else if (event.key === \"Home\") {\n event.preventDefault();\n applySize(minSize);\n } else if (event.key === \"End\") {\n event.preventDefault();\n applySize(max);\n }\n },\n [dragSize, currentSizePx, vertical, placement, applySize, resizeStep, minSize, maxSize]\n );\n\n React.useEffect(() => {\n if (!isOpen) {\n setDragSize(null);\n return;\n }\n\n rootRef.current?.focus();\n }, [isOpen]);\n\n // While a drag size is applied, suppress the sheet's 0.2s size\n // transition so the panel tracks the pointer in real time instead\n // of lagging 200ms behind every move.\n const sizeStyle: CSSProperties =\n resizable && dragSize !== null\n ? { ...(vertical ? { height: dragSize } : { width: dragSize }), transition: \"none\" }\n : {};\n\n return (\n <CSSTransition in={isOpen} timeout={120} appear classNames={{ enterDone: \"smwb-sheet_entered\" }} nodeRef={nodeRef}>\n <div\n ref={forkRef}\n data-testid=\"sheet\"\n tabIndex={-1}\n role=\"dialog\"\n aria-modal={variant === \"modal\" \|\| undefined}\n {...rest}\n className={cn(\"smwb-sheet\", className, `smwb-sheet_${variant}`, `smwb-${placement}`, {\n \"smwb-expanded\": mode === \"expanded\",\n \"smwb-small\": mode === \"small\",\n \"smwb-sheet_resizable\": resizable,\n })}\n style={{ \"--sizeProp\": size, ...sizeStyle, ...style } as CSSProperties}\n >\n {resizable && (\n <div\n className=\"smwb-sheet__drag-handle\"\n data-testid=\"sheet-drag-handle\"\n role=\"separator\"\n tabIndex={0}\n aria-orientation={vertical ? \"horizontal\" : \"vertical\"}\n aria-label={resizeHandleAriaLabel}\n aria-valuemin={minSize}\n aria-valuemax={Math.round(maxSize ?? (vertical ? window.innerHeight : window.innerWidth))}\n aria-valuenow={Math.round(dragSize ?? currentSizePx())}\n onPointerDown={onPointerDown}\n onPointerMove={onPointerMove}\n onPointerUp={endDrag}\n onPointerCancel={endDrag}\n onKeyDown={onHandleKeyDown}\n >\n <span className=\"smwb-sheet__drag-handle-bar\" />\n </div>\n )}\n {showActions && <div className=\"smwb-sheet__header\">{headerActionNodes}</div>}\n {isOpen && mode !== \"small\" && <div className=\"smwb-sheet__inner\">{children}</div>}\n </div>\n </CSSTransition>\n );\n});\n"],"names":["Sheet","forwardRef","isOpen","onClose","variant","children","placement","disableOutsideClick","closeOnEsc","props","ref","mode","setMode","useState","nodeRef","useRef","useEffect","onKeyDown","event","isTopOverlayLayer","handleSizeButton","handleClose","createPortal","jsx","CSSTransition","cn","SheetBlock","ClickAwayListener","isVerticalAxis","React","className","size","withSizeToggle","hideHeaderActions","reverseHeaderActions","resizable","minSize","maxSize","resizeStep","resizeHandleAriaLabel","onResize","style","rest","showActions","headerActionNodes","Button","Icon","rootRef","forkRef","useForkRef","dragSize","setDragSize","vertical","clamp","useCallback","px","viewport","max","currentSizePx","rect","_a","applySize","next","dragRef","onPointerDown","_b","onPointerMove","drag","delta","grow","endDrag","_d","_c","onHandleKeyDown","base","incKey","decKey","sizeStyle","jsxs"],"mappings":"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"}

package/dist/headless/utils/overlayLayer.js ADDED Viewed

@@ -0,0 +1,11 @@
+const e = "data-smwb-overlay-layer", r = () => typeof document == "undefined" ? [] : Array.from(document.querySelectorAll(`[${e}]`)), a = (n, o) => typeof n.composedPath != "function" ? !1 : n.composedPath().some((t) => t instanceof Element && t.hasAttribute(e) && !t.contains(o)), s = (n) => {
+  if (!n) return !0;
+  const o = r(), t = o[o.length - 1];
+  return !t || t === n || t.contains(n) || n.contains(t);
+};
+export {
+  e as OVERLAY_LAYER_ATTR,
+  a as isEventInForeignOverlay,
+  s as isTopOverlayLayer
+};
+//# sourceMappingURL=overlayLayer.js.map

package/dist/headless/utils/overlayLayer.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"overlayLayer.js","sources":["../../../src/utils/overlayLayer.ts"],"sourcesContent":["/** Attribute marking the root of a portaled overlay layer (modal, sheet wrapper, dropdown, …). */\nexport const OVERLAY_LAYER_ATTR = \"data-smwb-overlay-layer\";\n\n/** All open overlay layers in document order (last = topmost). */\nconst overlayLayers = (): Element[] =>\n typeof document === \"undefined\" ? [] : Array.from(document.querySelectorAll(`[${OVERLAY_LAYER_ATTR}]`));\n\n/**\n * True when `event` happened inside an overlay layer that does NOT contain\n * `node` — i.e. `node` sits underneath that layer, so the interaction is not\n * a \"click away\" from `node`.\n */\nexport const isEventInForeignOverlay = (event: Event, node: Element): boolean => {\n if (typeof event.composedPath !== \"function\") return false;\n return event\n .composedPath()\n .some((el) => el instanceof Element && el.hasAttribute(OVERLAY_LAYER_ATTR) && !el.contains(node));\n};\n\n/**\n * True when `el` belongs to the topmost open overlay layer (or no layers are\n * open). Used to make Escape close only the top layer instead of every layer.\n */\nexport const isTopOverlayLayer = (el: Element | null | undefined): boolean => {\n if (!el) return true;\n const all = overlayLayers();\n const top = all[all.length - 1];\n return !top || top === el || top.contains(el) || el.contains(top);\n};\n"],"names":["OVERLAY_LAYER_ATTR","overlayLayers","isEventInForeignOverlay","event","node","el","isTopOverlayLayer","all","top"],"mappings":"AACO,MAAMA,IAAqB,2BAG5BC,IAAgB,MACpB,OAAO,YAAa,cAAc,CAAA,IAAK,MAAM,KAAK,SAAS,iBAAiB,IAAID,CAAkB,GAAG,CAAC,GAO3FE,IAA0B,CAACC,GAAcC,MAChD,OAAOD,EAAM,gBAAiB,aAAmB,KAC9CA,EACJ,aAAA,EACA,KAAK,CAACE,MAAOA,aAAc,WAAWA,EAAG,aAAaL,CAAkB,KAAK,CAACK,EAAG,SAASD,CAAI,CAAC,GAOvFE,IAAoB,CAACD,MAA4C;AAC5E,MAAI,CAACA,EAAI,QAAO;AAChB,QAAME,IAAMN,EAAA,GACNO,IAAMD,EAAIA,EAAI,SAAS,CAAC;AAC9B,SAAO,CAACC,KAAOA,MAAQH,KAAMG,EAAI,SAASH,CAAE,KAAKA,EAAG,SAASG,CAAG;AAClE;"}