@smwb/ui-react 2.0.0 → 2.0.2

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 (12) hide show
  1. package/README.md +7 -6
  2. package/dist/components/layout/screenDivider/screenDivider.js +47 -56
  3. package/dist/components/layout/screenDivider/screenDivider.js.map +1 -1
  4. package/dist/components/navigation/menu/menuComponent.js +13 -9
  5. package/dist/components/navigation/menu/menuComponent.js.map +1 -1
  6. package/dist/headless/components/layout/screenDivider/screenDivider.js +47 -56
  7. package/dist/headless/components/layout/screenDivider/screenDivider.js.map +1 -1
  8. package/dist/headless/components/navigation/menu/menuComponent.js +13 -9
  9. package/dist/headless/components/navigation/menu/menuComponent.js.map +1 -1
  10. package/dist/index.cjs +2 -2
  11. package/dist/index.cjs.map +1 -1
  12. package/package.json +1 -1
package/README.md CHANGED
@@ -9,15 +9,16 @@ runtime light/dark theming and LESS-based customization. Part of the `@smwb` des
9
9
 
10
10
  | Package | What it is |
11
11
  | --- | --- |
12
- | **`@smwb/ui-react`** | This package — React components. |
13
- | `@smwb/ui-solid` | SolidJS port, same design system and class names. |
14
- | `@smwb/ui-styles` | Framework-agnostic **LESS source** + design tokens (`smwb-*`). |
15
- | `@smwb/ui-css` | **Prebuilt aggregate stylesheet** (`import "@smwb/ui-css"`). |
16
- | `@smwb/ui-mcp-react` | MCP server exposing this catalog to AI tools. |
12
+ | [**`@smwb/ui-react`**](https://www.npmjs.com/package/@smwb/ui-react) | This package — React components. |
13
+ | [`@smwb/ui-solid`](https://www.npmjs.com/package/@smwb/ui-solid) | SolidJS port, same design system and class names. |
14
+ | [`@smwb/ui-styles`](https://www.npmjs.com/package/@smwb/ui-styles) | Framework-agnostic **LESS source** + design tokens (`smwb-*`). |
15
+ | [`@smwb/ui-css`](https://www.npmjs.com/package/@smwb/ui-css) | **Prebuilt aggregate stylesheet** (`import "@smwb/ui-css"`). |
16
+ | [`@smwb/ui-mcp-react`](https://www.npmjs.com/package/@smwb/ui-mcp-react) | MCP server exposing this catalog to AI tools. |
17
17
 
18
18
  ## Component catalog
19
19
 
20
- - **Storybook (production):** https://summerweb.ru/ui
20
+ - **Storybook (production):** https://summerweb.ru/ui-react/
21
+ - **Storybook (dev):** https://summerweb.ru/ui-dev-react/
21
22
  - **Local:** `npm run storybook` → http://localhost:6006
22
23
 
23
24
  ## Installation
package/dist/components/layout/screenDivider/screenDivider.js CHANGED
@@ -1,89 +1,80 @@
1
- import { jsxs as I, jsx as h } from "react/jsx-runtime";
1
+ import { jsxs as B, jsx as w } from "react/jsx-runtime";
2
2
  import '../../../assets/styles/less/components/screenDivider/screenDivider.entry.css';/* empty css */
3
- import { forwardRef as j, useRef as P, useState as y, useEffect as b, Children as X, useMemo as Y, useCallback as O } from "react";
3
+ import { forwardRef as C, useRef as O, useState as y, useEffect as b, Children as P, useMemo as U, useCallback as W } from "react";
4
4
  import D from "clsx";
5
- import { throttle as T } from "../../../utils/throttle.js";
6
- import { useForkRef as U } from "../../../hooks/useForkRef.js";
7
- const _ = (o, d) => d * (o / 100), x = (o, d) => !o && d ? 100 - d : o || 50, V = j(function({
5
+ import { throttle as X } from "../../../utils/throttle.js";
6
+ import { useForkRef as Y } from "../../../hooks/useForkRef.js";
7
+ const x = (c, d) => !c && d ? 100 - d : c || 50, Z = C(function({
8
8
  className: d,
9
9
  orientation: e = "horizontal",
10
- sizeFirst: m,
10
+ sizeFirst: f,
11
11
  sizeSecond: v,
12
- children: $,
13
- onSizeChange: a,
12
+ children: L,
13
+ onSizeChange: i,
14
14
  keyboardStep: g = 5,
15
- resizerAriaLabel: k = "Resize panels"
16
- }, A) {
17
- const p = P(null), M = U(A, p), [i, l] = y(x(m, v)), [E, L] = y(null), [f, R] = y(!1);
15
+ resizerAriaLabel: $ = "Resize panels"
16
+ }, k) {
17
+ const p = O(null), A = Y(k, p), [t, n] = y(x(f, v)), [E, R] = y(null), [m, _] = y(!1);
18
18
  b(() => {
19
- l(x(m, v));
20
- }, [m, v]);
21
- const w = X.toArray($);
22
- if (w.length > 2)
19
+ n(x(f, v));
20
+ }, [f, v]);
21
+ const h = P.toArray(L);
22
+ if (h.length > 2)
23
23
  throw new Error("Allowed not more than 2 children");
24
- const K = () => {
25
- L(p.current), R(!0);
26
- }, c = Y(
27
- () => T((r) => {
28
- if (!f) return;
29
- const n = p.current;
30
- if (!(!n || n !== E))
31
- if (e === "vertical") {
32
- let s = r.clientY - n.offsetTop;
33
- s < 0 && (s = 0);
34
- const t = s / n.clientHeight * 100;
35
- _(t, n.clientWidth) > 5 && t < 101 && l(t - 7);
36
- } else {
37
- let s = r.clientX - n.offsetLeft;
38
- s < 0 && (s = 0);
39
- const t = s / n.clientWidth * 100;
40
- _(t, n.clientWidth) > 5 && t < 101 && l(t);
41
- }
24
+ const M = () => {
25
+ R(p.current), _(!0);
26
+ }, o = U(
27
+ () => X((r) => {
28
+ if (!m) return;
29
+ const a = p.current;
30
+ if (!a || a !== E) return;
31
+ 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));
32
+ n(H / l * 100);
42
33
  }, 1e3 / 60),
43
- [f, E, e]
44
- ), u = O(() => {
45
- L(null), R(!1), document.body.removeEventListener("pointerup", u), document.body.removeEventListener("pointermove", c);
46
- }, [c]);
34
+ [m, E, e]
35
+ ), u = W(() => {
36
+ R(null), _(!1), document.body.removeEventListener("pointerup", u), document.body.removeEventListener("pointermove", o);
37
+ }, [o]);
47
38
  b(() => {
48
- a == null || a(i);
49
- }, [i, a]);
50
- const N = (r) => {
51
- const n = e === "vertical" ? "ArrowUp" : "ArrowLeft", s = e === "vertical" ? "ArrowDown" : "ArrowRight";
52
- r.key === n ? (r.preventDefault(), l((t) => Math.max(0, t - g))) : r.key === s ? (r.preventDefault(), l((t) => Math.min(100, t + g))) : r.key === "Home" ? (r.preventDefault(), l(0)) : r.key === "End" && (r.preventDefault(), l(100));
53
- }, W = e === "vertical" ? { height: `${100 - i}%` } : { width: `${100 - i}%` }, H = e === "vertical" ? { height: `${i}%` } : { width: `${i}%` };
54
- return b(() => (f ? (document.body.addEventListener("pointerup", u), document.body.addEventListener("pointermove", c), document.body.style.cursor = e === "horizontal" ? "e-resize" : "n-resize") : document.body.style.cursor = "default", () => {
55
- document.body.removeEventListener("pointerup", u), document.body.removeEventListener("pointermove", c);
56
- }), [c, u, f, e]), /* @__PURE__ */ I(
39
+ i == null || i(t);
40
+ }, [t, i]);
41
+ const K = (r) => {
42
+ const a = e === "vertical" ? "ArrowUp" : "ArrowLeft", s = e === "vertical" ? "ArrowDown" : "ArrowRight";
43
+ 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));
44
+ }, N = e === "vertical" ? { height: `${100 - t}%` } : { width: `${100 - t}%` }, I = e === "vertical" ? { height: `${t}%` } : { width: `${t}%` };
45
+ 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", () => {
46
+ document.body.removeEventListener("pointerup", u), document.body.removeEventListener("pointermove", o);
47
+ }), [o, u, m, e]), /* @__PURE__ */ B(
57
48
  "div",
58
49
  {
59
50
  className: D("smwb-screen-divider__wrapper", `smwb-${e}`, d),
60
- ref: M,
51
+ ref: A,
61
52
  "data-testid": "screen-divider",
62
53
  children: [
63
- /* @__PURE__ */ h("div", { className: D("smwb-screen-divider__first", `smwb-${e}`), style: H, children: w[0] || "" }),
64
- /* @__PURE__ */ h(
54
+ /* @__PURE__ */ w("div", { className: D("smwb-screen-divider__first", `smwb-${e}`), style: I, children: h[0] || "" }),
55
+ /* @__PURE__ */ w(
65
56
  "span",
66
57
  {
67
58
  className: "smwb-screen-divider__resizer",
68
- onPointerDown: K,
59
+ onPointerDown: M,
69
60
  draggable: !1,
70
61
  role: "separator",
71
62
  "aria-orientation": e === "vertical" ? "horizontal" : "vertical",
72
- "aria-valuenow": Math.round(i),
63
+ "aria-valuenow": Math.round(t),
73
64
  "aria-valuemin": 0,
74
65
  "aria-valuemax": 100,
75
- "aria-label": k,
66
+ "aria-label": $,
76
67
  tabIndex: 0,
77
- onKeyDown: N
68
+ onKeyDown: K
78
69
  }
79
70
  ),
80
- /* @__PURE__ */ h("div", { className: D("smwb-screen-divider__second", `smwb-${e}`), style: W, children: w[1] || "" })
71
+ /* @__PURE__ */ w("div", { className: D("smwb-screen-divider__second", `smwb-${e}`), style: N, children: h[1] || "" })
81
72
  ]
82
73
  }
83
74
  );
84
75
  });
85
76
  export {
86
- V as ScreenDivider,
87
- V as default
77
+ Z as ScreenDivider,
78
+ Z as default
88
79
  };
89
80
  //# sourceMappingURL=screenDivider.js.map
package/dist/components/layout/screenDivider/screenDivider.js.map CHANGED
@@ -1 +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 toPixels = (percent: number, parentSize: number) => {\n return parentSize * (percent / 100);\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\n const wrapper = wrapperRef.current;\n if (!wrapper || wrapper !== currentElement) return;\n if (orientation === \"vertical\") {\n let relativeMouseY = e.clientY - wrapper.offsetTop;\n if (relativeMouseY < 0) {\n relativeMouseY = 0;\n }\n const newDivider = (relativeMouseY / wrapper.clientHeight) * 100;\n if (toPixels(newDivider, wrapper.clientWidth) > 5 && newDivider < 101) {\n setDivider(newDivider - 7);\n }\n } else {\n let relativeMouseX = e.clientX - wrapper.offsetLeft;\n if (relativeMouseX < 0) {\n relativeMouseX = 0;\n }\n const newDivider = (relativeMouseX / wrapper.clientWidth) * 100;\n if (toPixels(newDivider, wrapper.clientWidth) > 5 && newDivider < 101) {\n setDivider(newDivider);\n }\n }\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":["toPixels","percent","parentSize","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","relativeMouseY","newDivider","relativeMouseX","handleDragEnd","useCallback","onResizerKeyDown","event","decreaseKey","increaseKey","prev","secondChildStyle","firstChildStyle","jsxs","cn","jsx"],"mappings":"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"}
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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"}
package/dist/components/navigation/menu/menuComponent.js CHANGED
@@ -1,13 +1,17 @@
1
- import { jsx as n } from "react/jsx-runtime";
2
- import e from "react";
3
- import { useMenuContext as m } from "./menuContext.js";
4
- import { MenuList as i } from "./menuList.js";
5
- import { MenuFloating as u } from "./menuFloating.js";
6
- const x = e.forwardRef(function(o, t) {
7
- const { variant: r } = m();
8
- return r === "static" ? /* @__PURE__ */ n(i, { ref: t, ...o }) : /* @__PURE__ */ n(u, { ref: t, ...o });
1
+ import { jsx as t } from "react/jsx-runtime";
2
+ import m from "react";
3
+ import { useMenuContext as i } from "./menuContext.js";
4
+ import { MenuList as a } from "./menuList.js";
5
+ import { MenuFloating as p } from "./menuFloating.js";
6
+ const g = m.forwardRef(function(o, n) {
7
+ const { variant: e } = i();
8
+ if (e === "static") {
9
+ const { anchorElement: u, isOpen: c, onClose: f, placement: l, middleware: M, ...r } = o;
10
+ return /* @__PURE__ */ t(a, { ref: n, ...r });
11
+ }
12
+ return /* @__PURE__ */ t(p, { ref: n, ...o });
9
13
  });
10
14
  export {
11
- x as MenuComponent
15
+ g as MenuComponent
12
16
  };
13
17
  //# sourceMappingURL=menuComponent.js.map
package/dist/components/navigation/menu/menuComponent.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"menuComponent.js","sources":["../../../../src/components/navigation/menu/menuComponent.tsx"],"sourcesContent":["import React from \"react\";\nimport { useMenuContext } from \"./menuContext\";\nimport { MenuList } from \"./menuList\";\nimport { MenuFloating, MenuFloatingProps } from \"./menuFloating\";\n\nexport const MenuComponent = React.forwardRef<HTMLDivElement, MenuFloatingProps>(function MenuComponent(props, ref) {\n const { variant } = useMenuContext();\n return variant === \"static\" ? <MenuList ref={ref} {...props} /> : <MenuFloating ref={ref} {...props} />;\n});\n"],"names":["MenuComponent","React","props","ref","variant","useMenuContext","jsx","MenuList","MenuFloating"],"mappings":";;;;;AAKO,MAAMA,IAAgBC,EAAM,WAA8C,SAAuBC,GAAOC,GAAK;AAClH,QAAM,EAAE,SAAAC,EAAA,IAAYC,EAAA;AACpB,SAAOD,MAAY,WAAW,gBAAAE,EAACC,GAAA,EAAS,KAAAJ,GAAW,GAAGD,EAAA,CAAO,IAAK,gBAAAI,EAACE,GAAA,EAAa,KAAAL,GAAW,GAAGD,EAAA,CAAO;AACvG,CAAC;"}
1
+ {"version":3,"file":"menuComponent.js","sources":["../../../../src/components/navigation/menu/menuComponent.tsx"],"sourcesContent":["import React from \"react\";\nimport { useMenuContext } from \"./menuContext\";\nimport { MenuList } from \"./menuList\";\nimport { MenuFloating, MenuFloatingProps } from \"./menuFloating\";\n\nexport const MenuComponent = React.forwardRef<HTMLDivElement, MenuFloatingProps>(function MenuComponent(props, ref) {\n const { variant } = useMenuContext();\n if (variant === \"static\") {\n // Static menus render MenuList directly; strip the floating-only props so\n // they don't leak onto the underlying <div> (e.g. isOpen → DOM attribute).\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { anchorElement, isOpen, onClose, placement, middleware, ...domProps } = props;\n return <MenuList ref={ref} {...domProps} />;\n }\n return <MenuFloating ref={ref} {...props} />;\n});\n"],"names":["MenuComponent","React","props","ref","variant","useMenuContext","anchorElement","isOpen","onClose","placement","middleware","domProps","jsx","MenuList","MenuFloating"],"mappings":";;;;;AAKO,MAAMA,IAAgBC,EAAM,WAA8C,SAAuBC,GAAOC,GAAK;AAClH,QAAM,EAAE,SAAAC,EAAA,IAAYC,EAAA;AACpB,MAAID,MAAY,UAAU;AAIxB,UAAM,EAAE,eAAAE,GAAe,QAAAC,GAAQ,SAAAC,GAAS,WAAAC,GAAW,YAAAC,GAAY,GAAGC,MAAaT;AAC/E,WAAO,gBAAAU,EAACC,GAAA,EAAS,KAAAV,GAAW,GAAGQ,EAAA,CAAU;AAAA,EAC3C;AACA,SAAO,gBAAAC,EAACE,GAAA,EAAa,KAAAX,GAAW,GAAGD,EAAA,CAAO;AAC5C,CAAC;"}
package/dist/headless/components/layout/screenDivider/screenDivider.js CHANGED
@@ -1,88 +1,79 @@
1
- import { jsxs as I, jsx as h } from "react/jsx-runtime";
2
- import { forwardRef as j, useRef as P, useState as y, useEffect as b, Children as X, useMemo as Y, useCallback as O } from "react";
1
+ import { jsxs as B, jsx as w } from "react/jsx-runtime";
2
+ import { forwardRef as C, useRef as O, useState as y, useEffect as b, Children as P, useMemo as U, useCallback as W } from "react";
3
3
  import D from "clsx";
4
- import { throttle as T } from "../../../utils/throttle.js";
5
- import { useForkRef as U } from "../../../hooks/useForkRef.js";
6
- const _ = (o, d) => d * (o / 100), x = (o, d) => !o && d ? 100 - d : o || 50, Q = j(function({
4
+ import { throttle as X } from "../../../utils/throttle.js";
5
+ import { useForkRef as Y } from "../../../hooks/useForkRef.js";
6
+ const x = (c, d) => !c && d ? 100 - d : c || 50, V = C(function({
7
7
  className: d,
8
8
  orientation: e = "horizontal",
9
- sizeFirst: m,
9
+ sizeFirst: f,
10
10
  sizeSecond: v,
11
- children: $,
12
- onSizeChange: a,
11
+ children: L,
12
+ onSizeChange: i,
13
13
  keyboardStep: g = 5,
14
- resizerAriaLabel: k = "Resize panels"
15
- }, A) {
16
- const p = P(null), M = U(A, p), [i, l] = y(x(m, v)), [E, L] = y(null), [f, R] = y(!1);
14
+ resizerAriaLabel: $ = "Resize panels"
15
+ }, k) {
16
+ const p = O(null), A = Y(k, p), [t, n] = y(x(f, v)), [E, R] = y(null), [m, _] = y(!1);
17
17
  b(() => {
18
- l(x(m, v));
19
- }, [m, v]);
20
- const w = X.toArray($);
21
- if (w.length > 2)
18
+ n(x(f, v));
19
+ }, [f, v]);
20
+ const h = P.toArray(L);
21
+ if (h.length > 2)
22
22
  throw new Error("Allowed not more than 2 children");
23
- const K = () => {
24
- L(p.current), R(!0);
25
- }, c = Y(
26
- () => T((r) => {
27
- if (!f) return;
28
- const n = p.current;
29
- if (!(!n || n !== E))
30
- if (e === "vertical") {
31
- let s = r.clientY - n.offsetTop;
32
- s < 0 && (s = 0);
33
- const t = s / n.clientHeight * 100;
34
- _(t, n.clientWidth) > 5 && t < 101 && l(t - 7);
35
- } else {
36
- let s = r.clientX - n.offsetLeft;
37
- s < 0 && (s = 0);
38
- const t = s / n.clientWidth * 100;
39
- _(t, n.clientWidth) > 5 && t < 101 && l(t);
40
- }
23
+ const M = () => {
24
+ R(p.current), _(!0);
25
+ }, o = U(
26
+ () => X((r) => {
27
+ if (!m) return;
28
+ const a = p.current;
29
+ if (!a || a !== E) return;
30
+ 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));
31
+ n(H / l * 100);
41
32
  }, 1e3 / 60),
42
- [f, E, e]
43
- ), u = O(() => {
44
- L(null), R(!1), document.body.removeEventListener("pointerup", u), document.body.removeEventListener("pointermove", c);
45
- }, [c]);
33
+ [m, E, e]
34
+ ), u = W(() => {
35
+ R(null), _(!1), document.body.removeEventListener("pointerup", u), document.body.removeEventListener("pointermove", o);
36
+ }, [o]);
46
37
  b(() => {
47
- a == null || a(i);
48
- }, [i, a]);
49
- const N = (r) => {
50
- const n = e === "vertical" ? "ArrowUp" : "ArrowLeft", s = e === "vertical" ? "ArrowDown" : "ArrowRight";
51
- r.key === n ? (r.preventDefault(), l((t) => Math.max(0, t - g))) : r.key === s ? (r.preventDefault(), l((t) => Math.min(100, t + g))) : r.key === "Home" ? (r.preventDefault(), l(0)) : r.key === "End" && (r.preventDefault(), l(100));
52
- }, W = e === "vertical" ? { height: `${100 - i}%` } : { width: `${100 - i}%` }, H = e === "vertical" ? { height: `${i}%` } : { width: `${i}%` };
53
- return b(() => (f ? (document.body.addEventListener("pointerup", u), document.body.addEventListener("pointermove", c), document.body.style.cursor = e === "horizontal" ? "e-resize" : "n-resize") : document.body.style.cursor = "default", () => {
54
- document.body.removeEventListener("pointerup", u), document.body.removeEventListener("pointermove", c);
55
- }), [c, u, f, e]), /* @__PURE__ */ I(
38
+ i == null || i(t);
39
+ }, [t, i]);
40
+ const K = (r) => {
41
+ const a = e === "vertical" ? "ArrowUp" : "ArrowLeft", s = e === "vertical" ? "ArrowDown" : "ArrowRight";
42
+ 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));
43
+ }, N = e === "vertical" ? { height: `${100 - t}%` } : { width: `${100 - t}%` }, I = e === "vertical" ? { height: `${t}%` } : { width: `${t}%` };
44
+ 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", () => {
45
+ document.body.removeEventListener("pointerup", u), document.body.removeEventListener("pointermove", o);
46
+ }), [o, u, m, e]), /* @__PURE__ */ B(
56
47
  "div",
57
48
  {
58
49
  className: D("smwb-screen-divider__wrapper", `smwb-${e}`, d),
59
- ref: M,
50
+ ref: A,
60
51
  "data-testid": "screen-divider",
61
52
  children: [
62
- /* @__PURE__ */ h("div", { className: D("smwb-screen-divider__first", `smwb-${e}`), style: H, children: w[0] || "" }),
63
- /* @__PURE__ */ h(
53
+ /* @__PURE__ */ w("div", { className: D("smwb-screen-divider__first", `smwb-${e}`), style: I, children: h[0] || "" }),
54
+ /* @__PURE__ */ w(
64
55
  "span",
65
56
  {
66
57
  className: "smwb-screen-divider__resizer",
67
- onPointerDown: K,
58
+ onPointerDown: M,
68
59
  draggable: !1,
69
60
  role: "separator",
70
61
  "aria-orientation": e === "vertical" ? "horizontal" : "vertical",
71
- "aria-valuenow": Math.round(i),
62
+ "aria-valuenow": Math.round(t),
72
63
  "aria-valuemin": 0,
73
64
  "aria-valuemax": 100,
74
- "aria-label": k,
65
+ "aria-label": $,
75
66
  tabIndex: 0,
76
- onKeyDown: N
67
+ onKeyDown: K
77
68
  }
78
69
  ),
79
- /* @__PURE__ */ h("div", { className: D("smwb-screen-divider__second", `smwb-${e}`), style: W, children: w[1] || "" })
70
+ /* @__PURE__ */ w("div", { className: D("smwb-screen-divider__second", `smwb-${e}`), style: N, children: h[1] || "" })
80
71
  ]
81
72
  }
82
73
  );
83
74
  });
84
75
  export {
85
- Q as ScreenDivider,
86
- Q as default
76
+ V as ScreenDivider,
77
+ V as default
87
78
  };
88
79
  //# sourceMappingURL=screenDivider.js.map
package/dist/headless/components/layout/screenDivider/screenDivider.js.map CHANGED
@@ -1 +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 toPixels = (percent: number, parentSize: number) => {\n return parentSize * (percent / 100);\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\n const wrapper = wrapperRef.current;\n if (!wrapper || wrapper !== currentElement) return;\n if (orientation === \"vertical\") {\n let relativeMouseY = e.clientY - wrapper.offsetTop;\n if (relativeMouseY < 0) {\n relativeMouseY = 0;\n }\n const newDivider = (relativeMouseY / wrapper.clientHeight) * 100;\n if (toPixels(newDivider, wrapper.clientWidth) > 5 && newDivider < 101) {\n setDivider(newDivider - 7);\n }\n } else {\n let relativeMouseX = e.clientX - wrapper.offsetLeft;\n if (relativeMouseX < 0) {\n relativeMouseX = 0;\n }\n const newDivider = (relativeMouseX / wrapper.clientWidth) * 100;\n if (toPixels(newDivider, wrapper.clientWidth) > 5 && newDivider < 101) {\n setDivider(newDivider);\n }\n }\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":["toPixels","percent","parentSize","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","relativeMouseY","newDivider","relativeMouseX","handleDragEnd","useCallback","onResizerKeyDown","event","decreaseKey","increaseKey","prev","secondChildStyle","firstChildStyle","jsxs","cn","jsx"],"mappings":"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"}
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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"}
package/dist/headless/components/navigation/menu/menuComponent.js CHANGED
@@ -1,13 +1,17 @@
1
- import { jsx as n } from "react/jsx-runtime";
2
- import e from "react";
3
- import { useMenuContext as m } from "./menuContext.js";
4
- import { MenuList as i } from "./menuList.js";
5
- import { MenuFloating as u } from "./menuFloating.js";
6
- const x = e.forwardRef(function(o, t) {
7
- const { variant: r } = m();
8
- return r === "static" ? /* @__PURE__ */ n(i, { ref: t, ...o }) : /* @__PURE__ */ n(u, { ref: t, ...o });
1
+ import { jsx as t } from "react/jsx-runtime";
2
+ import m from "react";
3
+ import { useMenuContext as i } from "./menuContext.js";
4
+ import { MenuList as a } from "./menuList.js";
5
+ import { MenuFloating as p } from "./menuFloating.js";
6
+ const g = m.forwardRef(function(o, n) {
7
+ const { variant: e } = i();
8
+ if (e === "static") {
9
+ const { anchorElement: u, isOpen: c, onClose: f, placement: l, middleware: M, ...r } = o;
10
+ return /* @__PURE__ */ t(a, { ref: n, ...r });
11
+ }
12
+ return /* @__PURE__ */ t(p, { ref: n, ...o });
9
13
  });
10
14
  export {
11
- x as MenuComponent
15
+ g as MenuComponent
12
16
  };
13
17
  //# sourceMappingURL=menuComponent.js.map
package/dist/headless/components/navigation/menu/menuComponent.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"menuComponent.js","sources":["../../../../../src/components/navigation/menu/menuComponent.tsx"],"sourcesContent":["import React from \"react\";\nimport { useMenuContext } from \"./menuContext\";\nimport { MenuList } from \"./menuList\";\nimport { MenuFloating, MenuFloatingProps } from \"./menuFloating\";\n\nexport const MenuComponent = React.forwardRef<HTMLDivElement, MenuFloatingProps>(function MenuComponent(props, ref) {\n const { variant } = useMenuContext();\n return variant === \"static\" ? <MenuList ref={ref} {...props} /> : <MenuFloating ref={ref} {...props} />;\n});\n"],"names":["MenuComponent","React","props","ref","variant","useMenuContext","jsx","MenuList","MenuFloating"],"mappings":";;;;;AAKO,MAAMA,IAAgBC,EAAM,WAA8C,SAAuBC,GAAOC,GAAK;AAClH,QAAM,EAAE,SAAAC,EAAA,IAAYC,EAAA;AACpB,SAAOD,MAAY,WAAW,gBAAAE,EAACC,GAAA,EAAS,KAAAJ,GAAW,GAAGD,EAAA,CAAO,IAAK,gBAAAI,EAACE,GAAA,EAAa,KAAAL,GAAW,GAAGD,EAAA,CAAO;AACvG,CAAC;"}
1
+ {"version":3,"file":"menuComponent.js","sources":["../../../../../src/components/navigation/menu/menuComponent.tsx"],"sourcesContent":["import React from \"react\";\nimport { useMenuContext } from \"./menuContext\";\nimport { MenuList } from \"./menuList\";\nimport { MenuFloating, MenuFloatingProps } from \"./menuFloating\";\n\nexport const MenuComponent = React.forwardRef<HTMLDivElement, MenuFloatingProps>(function MenuComponent(props, ref) {\n const { variant } = useMenuContext();\n if (variant === \"static\") {\n // Static menus render MenuList directly; strip the floating-only props so\n // they don't leak onto the underlying <div> (e.g. isOpen → DOM attribute).\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { anchorElement, isOpen, onClose, placement, middleware, ...domProps } = props;\n return <MenuList ref={ref} {...domProps} />;\n }\n return <MenuFloating ref={ref} {...props} />;\n});\n"],"names":["MenuComponent","React","props","ref","variant","useMenuContext","anchorElement","isOpen","onClose","placement","middleware","domProps","jsx","MenuList","MenuFloating"],"mappings":";;;;;AAKO,MAAMA,IAAgBC,EAAM,WAA8C,SAAuBC,GAAOC,GAAK;AAClH,QAAM,EAAE,SAAAC,EAAA,IAAYC,EAAA;AACpB,MAAID,MAAY,UAAU;AAIxB,UAAM,EAAE,eAAAE,GAAe,QAAAC,GAAQ,SAAAC,GAAS,WAAAC,GAAW,YAAAC,GAAY,GAAGC,MAAaT;AAC/E,WAAO,gBAAAU,EAACC,GAAA,EAAS,KAAAV,GAAW,GAAGQ,EAAA,CAAU;AAAA,EAC3C;AACA,SAAO,gBAAAC,EAACE,GAAA,EAAa,KAAAX,GAAW,GAAGD,EAAA,CAAO;AAC5C,CAAC;"}