@smwb/ui-solid 0.8.0 → 0.8.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.
- package/dist/components/clickAwayListener/clickAwayListener.js +12 -8
- package/dist/components/clickAwayListener/clickAwayListener.js.map +1 -1
- package/dist/components/dataDisplay/treeView/treeView.d.ts +5 -1
- package/dist/components/dataDisplay/treeView/treeView.js +60 -50
- package/dist/components/dataDisplay/treeView/treeView.js.map +1 -1
- package/dist/components/feedBack/modal/modal.js +49 -48
- package/dist/components/feedBack/modal/modal.js.map +1 -1
- package/dist/components/inputs/datePicker/datePicker.js +22 -22
- package/dist/components/inputs/datePicker/datePicker.js.map +1 -1
- package/dist/components/inputs/dateTimePicker/dateTimePicker.js +21 -21
- package/dist/components/inputs/dateTimePicker/dateTimePicker.js.map +1 -1
- package/dist/components/inputs/selectField/dropdownMenu.js +1 -0
- package/dist/components/inputs/selectField/dropdownMenu.js.map +1 -1
- package/dist/components/inputs/timePicker/timePicker.js +16 -16
- package/dist/components/inputs/timePicker/timePicker.js.map +1 -1
- package/dist/components/layout/sheet/sheet.js +95 -92
- package/dist/components/layout/sheet/sheet.js.map +1 -1
- package/dist/headless/components/clickAwayListener/clickAwayListener.js +12 -8
- package/dist/headless/components/clickAwayListener/clickAwayListener.js.map +1 -1
- package/dist/headless/components/dataDisplay/treeView/treeView.js +60 -50
- package/dist/headless/components/dataDisplay/treeView/treeView.js.map +1 -1
- package/dist/headless/components/feedBack/modal/modal.js +49 -48
- package/dist/headless/components/feedBack/modal/modal.js.map +1 -1
- package/dist/headless/components/inputs/datePicker/datePicker.js +19 -19
- package/dist/headless/components/inputs/datePicker/datePicker.js.map +1 -1
- package/dist/headless/components/inputs/dateTimePicker/dateTimePicker.js +21 -21
- package/dist/headless/components/inputs/dateTimePicker/dateTimePicker.js.map +1 -1
- package/dist/headless/components/inputs/selectField/dropdownMenu.js +1 -0
- package/dist/headless/components/inputs/selectField/dropdownMenu.js.map +1 -1
- package/dist/headless/components/inputs/timePicker/timePicker.js +16 -16
- package/dist/headless/components/inputs/timePicker/timePicker.js.map +1 -1
- package/dist/headless/components/layout/sheet/sheet.js +95 -92
- package/dist/headless/components/layout/sheet/sheet.js.map +1 -1
- package/dist/headless/primitives/overlayLayer.js +11 -0
- package/dist/headless/primitives/overlayLayer.js.map +1 -0
- package/dist/headless/source/components/clickAwayListener/clickAwayListener.jsx +2 -0
- package/dist/headless/source/components/clickAwayListener/clickAwayListener.jsx.map +1 -1
- package/dist/headless/source/components/dataDisplay/treeView/treeView.jsx +10 -2
- package/dist/headless/source/components/dataDisplay/treeView/treeView.jsx.map +1 -1
- package/dist/headless/source/components/feedBack/modal/modal.jsx +5 -1
- package/dist/headless/source/components/feedBack/modal/modal.jsx.map +1 -1
- package/dist/headless/source/components/inputs/datePicker/datePicker.jsx +1 -0
- package/dist/headless/source/components/inputs/datePicker/datePicker.jsx.map +1 -1
- package/dist/headless/source/components/inputs/dateTimePicker/dateTimePicker.jsx +1 -0
- package/dist/headless/source/components/inputs/dateTimePicker/dateTimePicker.jsx.map +1 -1
- package/dist/headless/source/components/inputs/selectField/dropdownMenu.jsx +1 -0
- package/dist/headless/source/components/inputs/selectField/dropdownMenu.jsx.map +1 -1
- package/dist/headless/source/components/inputs/timePicker/timePicker.jsx +1 -0
- package/dist/headless/source/components/inputs/timePicker/timePicker.jsx.map +1 -1
- package/dist/headless/source/components/layout/sheet/sheet.jsx +13 -3
- package/dist/headless/source/components/layout/sheet/sheet.jsx.map +1 -1
- package/dist/headless/source/primitives/overlayLayer.js +18 -0
- package/dist/headless/source/primitives/overlayLayer.js.map +7 -0
- package/dist/primitives/overlayLayer.d.ts +13 -0
- package/dist/primitives/overlayLayer.js +11 -0
- package/dist/primitives/overlayLayer.js.map +1 -0
- package/dist/source/components/clickAwayListener/clickAwayListener.jsx +2 -0
- package/dist/source/components/clickAwayListener/clickAwayListener.jsx.map +1 -1
- package/dist/source/components/dataDisplay/treeView/treeView.jsx +10 -2
- package/dist/source/components/dataDisplay/treeView/treeView.jsx.map +1 -1
- package/dist/source/components/feedBack/modal/modal.jsx +5 -1
- package/dist/source/components/feedBack/modal/modal.jsx.map +1 -1
- package/dist/source/components/inputs/datePicker/datePicker.jsx +1 -0
- package/dist/source/components/inputs/datePicker/datePicker.jsx.map +1 -1
- package/dist/source/components/inputs/dateTimePicker/dateTimePicker.jsx +1 -0
- package/dist/source/components/inputs/dateTimePicker/dateTimePicker.jsx.map +1 -1
- package/dist/source/components/inputs/selectField/dropdownMenu.jsx +1 -0
- package/dist/source/components/inputs/selectField/dropdownMenu.jsx.map +1 -1
- package/dist/source/components/inputs/timePicker/timePicker.jsx +1 -0
- package/dist/source/components/inputs/timePicker/timePicker.jsx.map +1 -1
- package/dist/source/components/layout/sheet/sheet.jsx +13 -3
- package/dist/source/components/layout/sheet/sheet.jsx.map +1 -1
- package/dist/source/primitives/overlayLayer.js +18 -0
- package/dist/source/primitives/overlayLayer.js.map +7 -0
- package/package.json +1 -1
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { memo as f } from "solid-js/web";
|
|
2
2
|
import { mergeProps as E, children as v, onMount as h, onCleanup as s, createEffect as p } from "solid-js";
|
|
3
|
+
import { isEventInForeignOverlay as g } from "../../primitives/overlayLayer.js";
|
|
3
4
|
function a(o) {
|
|
4
5
|
return o.substring(2).toLowerCase();
|
|
5
6
|
}
|
|
6
7
|
function L(o, n) {
|
|
7
8
|
return n.documentElement.clientWidth < o.clientX || n.documentElement.clientHeight < o.clientY;
|
|
8
9
|
}
|
|
9
|
-
function
|
|
10
|
+
function T(o) {
|
|
10
11
|
const n = E({
|
|
11
12
|
mouseEvent: "onMouseUp",
|
|
12
13
|
touchEvent: "onTouchEnd",
|
|
@@ -15,16 +16,16 @@ function A(o) {
|
|
|
15
16
|
const e = m(), t = Array.isArray(e) ? e.find((c) => c instanceof Element) : e;
|
|
16
17
|
return t instanceof Element ? t : void 0;
|
|
17
18
|
};
|
|
18
|
-
let
|
|
19
|
+
let u = !1, i = !1;
|
|
19
20
|
h(() => {
|
|
20
21
|
const e = setTimeout(() => {
|
|
21
|
-
|
|
22
|
+
u = !0;
|
|
22
23
|
}, 0);
|
|
23
24
|
s(() => clearTimeout(e));
|
|
24
25
|
});
|
|
25
26
|
const r = (e) => {
|
|
26
27
|
const t = l();
|
|
27
|
-
if (!n.enabled || !
|
|
28
|
+
if (!n.enabled || !u || !t || "clientX" in e && L(e, document))
|
|
28
29
|
return;
|
|
29
30
|
if (i) {
|
|
30
31
|
i = !1;
|
|
@@ -34,10 +35,13 @@ function A(o) {
|
|
|
34
35
|
if (e.composedPath)
|
|
35
36
|
c = e.composedPath().indexOf(t) > -1;
|
|
36
37
|
else {
|
|
37
|
-
const
|
|
38
|
-
c = !document.documentElement.contains(
|
|
38
|
+
const d = e.target;
|
|
39
|
+
c = !document.documentElement.contains(d) || t.contains(d);
|
|
40
|
+
}
|
|
41
|
+
if (!c) {
|
|
42
|
+
if (g(e, t)) return;
|
|
43
|
+
n.onClickAway(e);
|
|
39
44
|
}
|
|
40
|
-
c || n.onClickAway(e);
|
|
41
45
|
};
|
|
42
46
|
return p(() => {
|
|
43
47
|
const e = () => {
|
|
@@ -56,6 +60,6 @@ function A(o) {
|
|
|
56
60
|
}), f(m);
|
|
57
61
|
}
|
|
58
62
|
export {
|
|
59
|
-
|
|
63
|
+
T as ClickAwayListener
|
|
60
64
|
};
|
|
61
65
|
//# sourceMappingURL=clickAwayListener.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"clickAwayListener.js","sources":["../../../../src/components/clickAwayListener/clickAwayListener.tsx"],"sourcesContent":["import { type JSX, children as resolveChildren, createEffect, mergeProps, onCleanup, onMount } from \"solid-js\";\n\ntype ClickAwayMouseEventHandler = \"onClick\" | \"onMouseDown\" | \"onMouseUp\" | \"onPointerDown\" | \"onPointerUp\";\ntype ClickAwayTouchEventHandler = \"onTouchStart\" | \"onTouchEnd\";\n\ntype MappedEvent = \"click\" | \"mousedown\" | \"mouseup\" | \"touchstart\" | \"touchend\" | \"pointerdown\" | \"pointerup\";\n\nfunction mapEventPropToEvent(eventProp: ClickAwayMouseEventHandler | ClickAwayTouchEventHandler): MappedEvent {\n return eventProp.substring(2).toLowerCase() as MappedEvent;\n}\n\nfunction clickedRootScrollbar(event: MouseEvent, doc: Document): boolean {\n return doc.documentElement.clientWidth < event.clientX || doc.documentElement.clientHeight < event.clientY;\n}\n\nexport interface ClickAwayListenerProps {\n children: JSX.Element;\n mouseEvent?: ClickAwayMouseEventHandler | false;\n onClickAway: (event: MouseEvent | TouchEvent) => void;\n touchEvent?: ClickAwayTouchEventHandler | false;\n /** When false, the listener is inert without unmounting the child. */\n enabled?: boolean;\n}\n\n/**\n * Solid redesign of MUI's ClickAwayListener. React's version cloned the child\n * to inject a ref + synthetic handlers; Solid resolves the child to its DOM\n * node and uses `composedPath`/`contains` containment checks against document\n * listeners — no element cloning.\n */\nexport function ClickAwayListener(props: ClickAwayListenerProps): JSX.Element {\n const merged = mergeProps(\n { mouseEvent: \"onMouseUp\" as ClickAwayMouseEventHandler, touchEvent: \"onTouchEnd\" as ClickAwayTouchEventHandler, enabled: true },\n props\n );\n const resolved = resolveChildren(() => merged.children);\n\n const getNode = (): Element | undefined => {\n const c = resolved();\n const el = Array.isArray(c) ? c.find((x) => x instanceof Element) : c;\n return el instanceof Element ? el : undefined;\n };\n\n let activated = false;\n let moved = false;\n\n onMount(() => {\n // Defer activation a tick so the opening interaction doesn't immediately\n // trigger a click-away (see facebook/react#20074).\n const timer = setTimeout(() => {\n activated = true;\n }, 0);\n onCleanup(() => clearTimeout(timer));\n });\n\n const handleClickAway = (event: MouseEvent | TouchEvent): void => {\n const node = getNode();\n if (!merged.enabled || !activated || !node || (\"clientX\" in event && clickedRootScrollbar(event, document))) {\n return;\n }\n if (moved) {\n moved = false;\n return;\n }\n let insideDOM: boolean;\n if (event.composedPath) {\n insideDOM = event.composedPath().indexOf(node) > -1;\n } else {\n const target = event.target as HTMLElement;\n insideDOM = !document.documentElement.contains(target) || node.contains(target);\n }\n if (!insideDOM) {\n merged.onClickAway(event);\n }\n };\n\n createEffect(() => {\n const handleTouchMove = (): void => {\n moved = true;\n };\n if (merged.touchEvent !== false) {\n const mapped = mapEventPropToEvent(merged.touchEvent);\n document.addEventListener(mapped, handleClickAway as EventListener);\n document.addEventListener(\"touchmove\", handleTouchMove);\n onCleanup(() => {\n document.removeEventListener(mapped, handleClickAway as EventListener);\n document.removeEventListener(\"touchmove\", handleTouchMove);\n });\n }\n if (merged.mouseEvent !== false) {\n const mapped = mapEventPropToEvent(merged.mouseEvent);\n document.addEventListener(mapped, handleClickAway as EventListener);\n onCleanup(() => document.removeEventListener(mapped, handleClickAway as EventListener));\n }\n });\n\n return <>{resolved()}</>;\n}\n\nexport default ClickAwayListener;\n"],"names":["mapEventPropToEvent","eventProp","substring","toLowerCase","clickedRootScrollbar","event","doc","documentElement","clientWidth","clientX","clientHeight","clientY","ClickAwayListener","props","merged","mergeProps","mouseEvent","touchEvent","enabled","resolved","resolveChildren","children","getNode","c","el","Array","isArray","find","x","Element","undefined","activated","moved","onMount","timer","setTimeout","onCleanup","clearTimeout","handleClickAway","node","document","insideDOM","composedPath","indexOf","target","contains","onClickAway","createEffect","handleTouchMove","mapped","addEventListener","removeEventListener","_$memo"],"mappings":"
|
|
1
|
+
{"version":3,"file":"clickAwayListener.js","sources":["../../../../src/components/clickAwayListener/clickAwayListener.tsx"],"sourcesContent":["import { type JSX, children as resolveChildren, createEffect, mergeProps, onCleanup, onMount } from \"solid-js\";\nimport { isEventInForeignOverlay } from \"../../primitives/overlayLayer\";\n\ntype ClickAwayMouseEventHandler = \"onClick\" | \"onMouseDown\" | \"onMouseUp\" | \"onPointerDown\" | \"onPointerUp\";\ntype ClickAwayTouchEventHandler = \"onTouchStart\" | \"onTouchEnd\";\n\ntype MappedEvent = \"click\" | \"mousedown\" | \"mouseup\" | \"touchstart\" | \"touchend\" | \"pointerdown\" | \"pointerup\";\n\nfunction mapEventPropToEvent(eventProp: ClickAwayMouseEventHandler | ClickAwayTouchEventHandler): MappedEvent {\n return eventProp.substring(2).toLowerCase() as MappedEvent;\n}\n\nfunction clickedRootScrollbar(event: MouseEvent, doc: Document): boolean {\n return doc.documentElement.clientWidth < event.clientX || doc.documentElement.clientHeight < event.clientY;\n}\n\nexport interface ClickAwayListenerProps {\n children: JSX.Element;\n mouseEvent?: ClickAwayMouseEventHandler | false;\n onClickAway: (event: MouseEvent | TouchEvent) => void;\n touchEvent?: ClickAwayTouchEventHandler | false;\n /** When false, the listener is inert without unmounting the child. */\n enabled?: boolean;\n}\n\n/**\n * Solid redesign of MUI's ClickAwayListener. React's version cloned the child\n * to inject a ref + synthetic handlers; Solid resolves the child to its DOM\n * node and uses `composedPath`/`contains` containment checks against document\n * listeners — no element cloning.\n */\nexport function ClickAwayListener(props: ClickAwayListenerProps): JSX.Element {\n const merged = mergeProps(\n { mouseEvent: \"onMouseUp\" as ClickAwayMouseEventHandler, touchEvent: \"onTouchEnd\" as ClickAwayTouchEventHandler, enabled: true },\n props\n );\n const resolved = resolveChildren(() => merged.children);\n\n const getNode = (): Element | undefined => {\n const c = resolved();\n const el = Array.isArray(c) ? c.find((x) => x instanceof Element) : c;\n return el instanceof Element ? el : undefined;\n };\n\n let activated = false;\n let moved = false;\n\n onMount(() => {\n // Defer activation a tick so the opening interaction doesn't immediately\n // trigger a click-away (see facebook/react#20074).\n const timer = setTimeout(() => {\n activated = true;\n }, 0);\n onCleanup(() => clearTimeout(timer));\n });\n\n const handleClickAway = (event: MouseEvent | TouchEvent): void => {\n const node = getNode();\n if (!merged.enabled || !activated || !node || (\"clientX\" in event && clickedRootScrollbar(event, document))) {\n return;\n }\n if (moved) {\n moved = false;\n return;\n }\n let insideDOM: boolean;\n if (event.composedPath) {\n insideDOM = event.composedPath().indexOf(node) > -1;\n } else {\n const target = event.target as HTMLElement;\n insideDOM = !document.documentElement.contains(target) || node.contains(target);\n }\n if (!insideDOM) {\n // Interactions inside a portaled overlay layer above the child (modal,\n // dropdown, picker…) are not \"away\" from the child.\n if (isEventInForeignOverlay(event, node)) return;\n merged.onClickAway(event);\n }\n };\n\n createEffect(() => {\n const handleTouchMove = (): void => {\n moved = true;\n };\n if (merged.touchEvent !== false) {\n const mapped = mapEventPropToEvent(merged.touchEvent);\n document.addEventListener(mapped, handleClickAway as EventListener);\n document.addEventListener(\"touchmove\", handleTouchMove);\n onCleanup(() => {\n document.removeEventListener(mapped, handleClickAway as EventListener);\n document.removeEventListener(\"touchmove\", handleTouchMove);\n });\n }\n if (merged.mouseEvent !== false) {\n const mapped = mapEventPropToEvent(merged.mouseEvent);\n document.addEventListener(mapped, handleClickAway as EventListener);\n onCleanup(() => document.removeEventListener(mapped, handleClickAway as EventListener));\n }\n });\n\n return <>{resolved()}</>;\n}\n\nexport default ClickAwayListener;\n"],"names":["mapEventPropToEvent","eventProp","substring","toLowerCase","clickedRootScrollbar","event","doc","documentElement","clientWidth","clientX","clientHeight","clientY","ClickAwayListener","props","merged","mergeProps","mouseEvent","touchEvent","enabled","resolved","resolveChildren","children","getNode","c","el","Array","isArray","find","x","Element","undefined","activated","moved","onMount","timer","setTimeout","onCleanup","clearTimeout","handleClickAway","node","document","insideDOM","composedPath","indexOf","target","contains","isEventInForeignOverlay","onClickAway","createEffect","handleTouchMove","mapped","addEventListener","removeEventListener","_$memo"],"mappings":";;;AAQA,SAASA,EAAoBC,GAAiF;AAC5G,SAAOA,EAAUC,UAAU,CAAC,EAAEC,YAAAA;AAChC;AAEA,SAASC,EAAqBC,GAAmBC,GAAwB;AACvE,SAAOA,EAAIC,gBAAgBC,cAAcH,EAAMI,WAAWH,EAAIC,gBAAgBG,eAAeL,EAAMM;AACrG;AAiBO,SAASC,EAAkBC,GAA4C;AAC5E,QAAMC,IAASC,EACb;AAAA,IAAEC,YAAY;AAAA,IAA2CC,YAAY;AAAA,IAA4CC,SAAS;AAAA,EAAA,GAC1HL,CACF,GACMM,IAAWC,EAAgB,MAAMN,EAAOO,QAAQ,GAEhDC,IAAUA,MAA2B;AACzC,UAAMC,IAAIJ,EAAAA,GACJK,IAAKC,MAAMC,QAAQH,CAAC,IAAIA,EAAEI,KAAMC,CAAAA,MAAMA,aAAaC,OAAO,IAAIN;AACpE,WAAOC,aAAcK,UAAUL,IAAKM;AAAAA,EACtC;AAEA,MAAIC,IAAY,IACZC,IAAQ;AAEZC,EAAAA,EAAQ,MAAM;AAGZ,UAAMC,IAAQC,WAAW,MAAM;AAC7BJ,MAAAA,IAAY;AAAA,IACd,GAAG,CAAC;AACJK,IAAAA,EAAU,MAAMC,aAAaH,CAAK,CAAC;AAAA,EACrC,CAAC;AAED,QAAMI,IAAkBA,CAACjC,MAAyC;AAChE,UAAMkC,IAAOjB,EAAAA;AACb,QAAI,CAACR,EAAOI,WAAW,CAACa,KAAa,CAACQ,KAAS,aAAalC,KAASD,EAAqBC,GAAOmC,QAAQ;AACvG;AAEF,QAAIR,GAAO;AACTA,MAAAA,IAAQ;AACR;AAAA,IACF;AACA,QAAIS;AACJ,QAAIpC,EAAMqC;AACRD,MAAAA,IAAYpC,EAAMqC,aAAAA,EAAeC,QAAQJ,CAAI,IAAI;AAAA,SAC5C;AACL,YAAMK,IAASvC,EAAMuC;AACrBH,MAAAA,IAAY,CAACD,SAASjC,gBAAgBsC,SAASD,CAAM,KAAKL,EAAKM,SAASD,CAAM;AAAA,IAChF;AACA,QAAI,CAACH,GAAW;AAGd,UAAIK,EAAwBzC,GAAOkC,CAAI,EAAG;AAC1CzB,MAAAA,EAAOiC,YAAY1C,CAAK;AAAA,IAC1B;AAAA,EACF;AAEA2C,SAAAA,EAAa,MAAM;AACjB,UAAMC,IAAkBA,MAAY;AAClCjB,MAAAA,IAAQ;AAAA,IACV;AACA,QAAIlB,EAAOG,eAAe,IAAO;AAC/B,YAAMiC,IAASlD,EAAoBc,EAAOG,UAAU;AACpDuB,eAASW,iBAAiBD,GAAQZ,CAAgC,GAClEE,SAASW,iBAAiB,aAAaF,CAAe,GACtDb,EAAU,MAAM;AACdI,iBAASY,oBAAoBF,GAAQZ,CAAgC,GACrEE,SAASY,oBAAoB,aAAaH,CAAe;AAAA,MAC3D,CAAC;AAAA,IACH;AACA,QAAInC,EAAOE,eAAe,IAAO;AAC/B,YAAMkC,IAASlD,EAAoBc,EAAOE,UAAU;AACpDwB,eAASW,iBAAiBD,GAAQZ,CAAgC,GAClEF,EAAU,MAAMI,SAASY,oBAAoBF,GAAQZ,CAAgC,CAAC;AAAA,IACxF;AAAA,EACF,CAAC,GAEDe,EAAUlC,CAAQ;AACpB;"}
|
|
@@ -1,33 +1,33 @@
|
|
|
1
|
-
import { createComponent as s, use as
|
|
2
|
-
import { mergeProps as
|
|
1
|
+
import { createComponent as s, use as D, spread as R, mergeProps as F, insert as g, template as _, effect as S, setAttribute as E, memo as y, className as K, delegateEvents as j } from "solid-js/web";
|
|
2
|
+
import { mergeProps as q, splitProps as B, createSignal as P, For as V, createContext as G, useContext as H, Show as L } from "solid-js";
|
|
3
3
|
import z from "clsx";
|
|
4
|
-
import { createControllableState as
|
|
5
|
-
import { mergeRefs as
|
|
6
|
-
import { Icon as
|
|
7
|
-
var
|
|
8
|
-
const A =
|
|
4
|
+
import { createControllableState as O } from "../../../primitives/createControllableState.js";
|
|
5
|
+
import { mergeRefs as J } from "../../../primitives/mergeRefs.js";
|
|
6
|
+
import { Icon as T } from "../../base/icon/icon.js";
|
|
7
|
+
var M = /* @__PURE__ */ _("<input type=checkbox class=smwb-tree__node__checkbox>"), Q = /* @__PURE__ */ _("<div role=group>"), U = /* @__PURE__ */ _("<div role=treeitem><span class=smwb-tree__node__content tabindex=0 role=button><span class=smwb-tree__node__label>"), W = /* @__PURE__ */ _("<div class=smwb-tree__node__loading role=status>Загрузка…"), X = /* @__PURE__ */ _("<div>"), Y = /* @__PURE__ */ _("<div class=smwb-tree__wrapper role=presentation>");
|
|
8
|
+
const A = G();
|
|
9
9
|
function N(o) {
|
|
10
|
-
const n =
|
|
10
|
+
const n = H(A), e = () => o.item.id ?? o.path, h = () => o.item.children ?? n.loadedChildren()[e()], $ = () => n.hasLoader && (!!o.item.hasChildren || !!n.loadedChildren()[e()]), c = () => !!h() && (h()?.length ?? 0) > 0 || $(), f = () => n.expandedIds().includes(e()), m = () => n.selectedIds().includes(e()), I = () => n.loadingIds().includes(e()), x = () => {
|
|
11
11
|
c() && (f() || n.ensureLoaded(o.item, e()), n.toggleExpanded(e())), n.selectable && n.toggleSelected(e());
|
|
12
|
-
},
|
|
12
|
+
}, p = (a) => {
|
|
13
13
|
a.key === "Enter" || a.key === " " ? (a.preventDefault(), x()) : a.key === "ArrowRight" && c() ? (n.ensureLoaded(o.item, e()), n.setOpen(e(), !0)) : a.key === "ArrowLeft" && c() && n.setOpen(e(), !1);
|
|
14
14
|
};
|
|
15
15
|
return (() => {
|
|
16
|
-
var a =
|
|
17
|
-
return
|
|
16
|
+
var a = U(), b = a.firstChild, k = b.firstChild;
|
|
17
|
+
return b.$$keydown = p, b.$$click = x, g(b, s(L, {
|
|
18
18
|
get when() {
|
|
19
19
|
return n.checkboxes;
|
|
20
20
|
},
|
|
21
21
|
get children() {
|
|
22
|
-
var r =
|
|
23
|
-
return r.addEventListener("change", () => n.toggleSelected(e())), r.$$click = (u) => u.stopPropagation(),
|
|
22
|
+
var r = M();
|
|
23
|
+
return r.addEventListener("change", () => n.toggleSelected(e())), r.$$click = (u) => u.stopPropagation(), S(() => E(r, "aria-label", o.item.label)), S(() => r.checked = m()), r;
|
|
24
24
|
}
|
|
25
|
-
}),
|
|
25
|
+
}), k), g(k, s(L, {
|
|
26
26
|
get when() {
|
|
27
27
|
return c();
|
|
28
28
|
},
|
|
29
29
|
get fallback() {
|
|
30
|
-
return s(
|
|
30
|
+
return s(T, {
|
|
31
31
|
get name() {
|
|
32
32
|
return n.listIcon;
|
|
33
33
|
},
|
|
@@ -35,50 +35,50 @@ function N(o) {
|
|
|
35
35
|
});
|
|
36
36
|
},
|
|
37
37
|
get children() {
|
|
38
|
-
return s(
|
|
38
|
+
return s(T, {
|
|
39
39
|
get name() {
|
|
40
|
-
return
|
|
40
|
+
return y(() => !!f())() ? n.nodeIcon.opened ?? "folder_open" : n.nodeIcon.closed ?? "folder";
|
|
41
41
|
},
|
|
42
42
|
fill: 1,
|
|
43
43
|
size: 20
|
|
44
44
|
});
|
|
45
45
|
}
|
|
46
|
-
}), null), g(
|
|
47
|
-
var r =
|
|
46
|
+
}), null), g(k, (() => {
|
|
47
|
+
var r = y(() => !!n.renderLabel);
|
|
48
48
|
return () => r() ? n.renderLabel(o.item, e()) : o.item.label;
|
|
49
|
-
})(), null), g(a, s(
|
|
49
|
+
})(), null), g(a, s(L, {
|
|
50
50
|
get when() {
|
|
51
|
-
return
|
|
51
|
+
return y(() => !!c())() && f();
|
|
52
52
|
},
|
|
53
53
|
get children() {
|
|
54
|
-
var r =
|
|
55
|
-
return g(r, s(
|
|
54
|
+
var r = Q();
|
|
55
|
+
return g(r, s(L, {
|
|
56
56
|
get when() {
|
|
57
|
-
return !(
|
|
57
|
+
return !(I() && !h());
|
|
58
58
|
},
|
|
59
59
|
get fallback() {
|
|
60
|
-
return
|
|
60
|
+
return W();
|
|
61
61
|
},
|
|
62
62
|
get children() {
|
|
63
63
|
return s(V, {
|
|
64
64
|
get each() {
|
|
65
65
|
return h() ?? [];
|
|
66
66
|
},
|
|
67
|
-
children: (u,
|
|
67
|
+
children: (u, C) => s(N, {
|
|
68
68
|
item: u,
|
|
69
69
|
get path() {
|
|
70
|
-
return `${o.path}.${
|
|
70
|
+
return `${o.path}.${C()}`;
|
|
71
71
|
}
|
|
72
72
|
})
|
|
73
73
|
});
|
|
74
74
|
}
|
|
75
75
|
})), r;
|
|
76
76
|
}
|
|
77
|
-
}), null),
|
|
77
|
+
}), null), S((r) => {
|
|
78
78
|
var u = z("smwb-tree__node", {
|
|
79
79
|
"smwb-tree__node_selected": m()
|
|
80
|
-
}),
|
|
81
|
-
return u !== r.e &&
|
|
80
|
+
}), C = c() ? f() : void 0, w = n.selectable || n.checkboxes ? m() : void 0;
|
|
81
|
+
return u !== r.e && K(a, r.e = u), C !== r.t && E(a, "aria-expanded", r.t = C), w !== r.a && E(a, "aria-selected", r.a = w), r;
|
|
82
82
|
}, {
|
|
83
83
|
e: void 0,
|
|
84
84
|
t: void 0,
|
|
@@ -86,8 +86,8 @@ function N(o) {
|
|
|
86
86
|
}), a;
|
|
87
87
|
})();
|
|
88
88
|
}
|
|
89
|
-
function
|
|
90
|
-
const n =
|
|
89
|
+
function de(o) {
|
|
90
|
+
const n = q({
|
|
91
91
|
listIcon: "draft",
|
|
92
92
|
nodeIcon: {
|
|
93
93
|
closed: "folder",
|
|
@@ -98,27 +98,37 @@ function re(o) {
|
|
|
98
98
|
defaultSelected: [],
|
|
99
99
|
selectable: !1,
|
|
100
100
|
checkboxes: !1
|
|
101
|
-
}, o), [e, h] =
|
|
101
|
+
}, o), [e, h] = B(n, ["class", "listIcon", "nodeIcon", "data", "expanded", "defaultExpanded", "onExpandedChange", "selected", "defaultSelected", "onSelectedChange", "selectable", "checkboxes", "renderLabel", "loadChildren", "ref"]), [$, c] = P({}), [f, m] = P([]), [I, x] = O({
|
|
102
102
|
value: () => e.expanded,
|
|
103
103
|
defaultValue: e.defaultExpanded,
|
|
104
104
|
onChange: (t) => e.onExpandedChange?.(t)
|
|
105
|
-
})
|
|
105
|
+
});
|
|
106
|
+
let p;
|
|
107
|
+
const [a, b] = O({
|
|
106
108
|
value: () => e.selected,
|
|
107
109
|
defaultValue: e.defaultSelected,
|
|
108
|
-
onChange: (t) =>
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
110
|
+
onChange: (t) => {
|
|
111
|
+
const l = p;
|
|
112
|
+
p = void 0, e.onSelectedChange?.(t, l);
|
|
113
|
+
}
|
|
114
|
+
}), w = {
|
|
115
|
+
expandedIds: I,
|
|
116
|
+
selectedIds: a,
|
|
117
|
+
loadedChildren: $,
|
|
113
118
|
loadingIds: f,
|
|
114
119
|
toggleExpanded: (t) => x((l) => l.includes(t) ? l.filter((d) => d !== t) : [...l, t]),
|
|
115
120
|
setOpen: (t, l) => x((d) => {
|
|
116
121
|
const i = d.includes(t);
|
|
117
|
-
return l && !i ? [...d, t] : !l && i ? d.filter((
|
|
122
|
+
return l && !i ? [...d, t] : !l && i ? d.filter((v) => v !== t) : d;
|
|
118
123
|
}),
|
|
119
|
-
toggleSelected: (t) =>
|
|
124
|
+
toggleSelected: (t) => {
|
|
125
|
+
p = {
|
|
126
|
+
id: t,
|
|
127
|
+
selected: !a().includes(t)
|
|
128
|
+
}, b((l) => l.includes(t) ? l.filter((d) => d !== t) : [...l, t]);
|
|
129
|
+
},
|
|
120
130
|
ensureLoaded: (t, l) => {
|
|
121
|
-
!e.loadChildren ||
|
|
131
|
+
!e.loadChildren || $()[l] || t.children && t.children.length > 0 || (m((d) => d.includes(l) ? d : [...d, l]), e.loadChildren(t, l).then((d) => c((i) => ({
|
|
122
132
|
...i,
|
|
123
133
|
[l]: d
|
|
124
134
|
}))).finally(() => m((d) => d.filter((i) => i !== l))));
|
|
@@ -143,10 +153,10 @@ function re(o) {
|
|
|
143
153
|
}
|
|
144
154
|
};
|
|
145
155
|
return s(A.Provider, {
|
|
146
|
-
value:
|
|
156
|
+
value: w,
|
|
147
157
|
get children() {
|
|
148
|
-
var t =
|
|
149
|
-
return typeof l == "function" &&
|
|
158
|
+
var t = X(), l = J(e.ref);
|
|
159
|
+
return typeof l == "function" && D(l, t), R(t, F(h, {
|
|
150
160
|
"data-testid": "tree-view",
|
|
151
161
|
role: "tree",
|
|
152
162
|
get class() {
|
|
@@ -157,20 +167,20 @@ function re(o) {
|
|
|
157
167
|
return e.data;
|
|
158
168
|
},
|
|
159
169
|
children: (d, i) => (() => {
|
|
160
|
-
var
|
|
161
|
-
return g(
|
|
170
|
+
var v = Y();
|
|
171
|
+
return g(v, s(N, {
|
|
162
172
|
item: d,
|
|
163
173
|
get path() {
|
|
164
174
|
return `${i()}`;
|
|
165
175
|
}
|
|
166
|
-
})),
|
|
176
|
+
})), v;
|
|
167
177
|
})()
|
|
168
178
|
})), t;
|
|
169
179
|
}
|
|
170
180
|
});
|
|
171
181
|
}
|
|
172
|
-
|
|
182
|
+
j(["click", "keydown"]);
|
|
173
183
|
export {
|
|
174
|
-
|
|
184
|
+
de as TreeView
|
|
175
185
|
};
|
|
176
186
|
//# sourceMappingURL=treeView.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"treeView.js","sources":["../../../../../src/components/dataDisplay/treeView/treeView.tsx"],"sourcesContent":["import { type Accessor, type JSX, For, Show, createContext, createSignal, mergeProps, splitProps, useContext } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ITreeNodeItem {\n /** Stable identifier. Falls back to the positional path when omitted. */\n id?: string;\n label: string;\n children?: ITreeNodeItem[];\n /** Hint that the node is expandable even before its children are loaded. */\n hasChildren?: boolean;\n}\n\nexport interface TreeViewProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n nodeIcon?: { opened?: string; closed?: string };\n listIcon?: string;\n data: ITreeNodeItem[];\n expanded?: string[];\n defaultExpanded?: string[];\n onExpandedChange?: (expanded: string[]) => void;\n selected?: string[];\n defaultSelected?: string[];\n onSelectedChange?: (selected: string[]) => void;\n selectable?: boolean;\n checkboxes?: boolean;\n renderLabel?: (item: ITreeNodeItem, nodeId: string) => JSX.Element;\n loadChildren?: (item: ITreeNodeItem, nodeId: string) => Promise<ITreeNodeItem[]>;\n ref?: Ref<HTMLDivElement>;\n}\n\ninterface TreeContextValue {\n expandedIds: Accessor<string[]>;\n selectedIds: Accessor<string[]>;\n loadedChildren: Accessor<Record<string, ITreeNodeItem[]>>;\n loadingIds: Accessor<string[]>;\n toggleExpanded: (id: string) => void;\n setOpen: (id: string, open: boolean) => void;\n toggleSelected: (id: string) => void;\n ensureLoaded: (item: ITreeNodeItem, nodeId: string) => void;\n selectable: boolean;\n checkboxes: boolean;\n nodeIcon: { opened?: string; closed?: string };\n listIcon: string;\n renderLabel: ((item: ITreeNodeItem, nodeId: string) => JSX.Element) | undefined;\n hasLoader: boolean;\n}\n\nconst TreeContext = createContext<TreeContextValue>();\n\nfunction TreeNode(props: { item: ITreeNodeItem; path: string }): JSX.Element {\n const ctx = useContext(TreeContext)!;\n const nodeId = (): string => props.item.id ?? props.path;\n const resolvedChildren = (): ITreeNodeItem[] | undefined => props.item.children ?? ctx.loadedChildren()[nodeId()];\n const isLazy = (): boolean => ctx.hasLoader && (!!props.item.hasChildren || !!ctx.loadedChildren()[nodeId()]);\n const hasChildNodes = (): boolean => (!!resolvedChildren() && (resolvedChildren()?.length ?? 0) > 0) || isLazy();\n const isOpen = (): boolean => ctx.expandedIds().includes(nodeId());\n const isSelected = (): boolean => ctx.selectedIds().includes(nodeId());\n const isLoading = (): boolean => ctx.loadingIds().includes(nodeId());\n\n const onLabelClick = (): void => {\n if (hasChildNodes()) {\n if (!isOpen()) ctx.ensureLoaded(props.item, nodeId());\n ctx.toggleExpanded(nodeId());\n }\n if (ctx.selectable) ctx.toggleSelected(nodeId());\n };\n\n const onKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n onLabelClick();\n } else if (event.key === \"ArrowRight\" && hasChildNodes()) {\n ctx.ensureLoaded(props.item, nodeId());\n ctx.setOpen(nodeId(), true);\n } else if (event.key === \"ArrowLeft\" && hasChildNodes()) {\n ctx.setOpen(nodeId(), false);\n }\n };\n\n return (\n <div\n class={cn(\"smwb-tree__node\", { \"smwb-tree__node_selected\": isSelected() })}\n role=\"treeitem\"\n aria-expanded={hasChildNodes() ? isOpen() : undefined}\n aria-selected={ctx.selectable || ctx.checkboxes ? isSelected() : undefined}\n >\n <span class=\"smwb-tree__node__content\" onClick={onLabelClick} onKeyDown={onKeyDown} tabindex={0} role=\"button\">\n <Show when={ctx.checkboxes}>\n <input\n type=\"checkbox\"\n class=\"smwb-tree__node__checkbox\"\n checked={isSelected()}\n onClick={(e) => e.stopPropagation()}\n onChange={() => ctx.toggleSelected(nodeId())}\n aria-label={props.item.label}\n />\n </Show>\n <span class=\"smwb-tree__node__label\">\n <Show when={hasChildNodes()} fallback={<Icon name={ctx.listIcon} size={20} />}>\n <Icon name={isOpen() ? ctx.nodeIcon.opened ?? \"folder_open\" : ctx.nodeIcon.closed ?? \"folder\"} fill={1} size={20} />\n </Show>\n {ctx.renderLabel ? ctx.renderLabel(props.item, nodeId()) : props.item.label}\n </span>\n </span>\n <Show when={hasChildNodes() && isOpen()}>\n <div role=\"group\">\n <Show\n when={!(isLoading() && !resolvedChildren())}\n fallback={\n <div class=\"smwb-tree__node__loading\" role=\"status\">\n Загрузка…\n </div>\n }\n >\n <For each={resolvedChildren() ?? []}>\n {(child, idx) => <TreeNode item={child} path={`${props.path}.${idx()}`} />}\n </For>\n </Show>\n </div>\n </Show>\n </div>\n );\n}\n\nexport function TreeView(props: TreeViewProps): JSX.Element {\n const merged = mergeProps(\n {\n listIcon: \"draft\",\n nodeIcon: { closed: \"folder\", opened: \"folder_open\" } as { opened?: string; closed?: string },\n data: [] as ITreeNodeItem[],\n defaultExpanded: [] as string[],\n defaultSelected: [] as string[],\n selectable: false,\n checkboxes: false,\n },\n props\n );\n const [local, rest] = splitProps(merged, [\n \"class\",\n \"listIcon\",\n \"nodeIcon\",\n \"data\",\n \"expanded\",\n \"defaultExpanded\",\n \"onExpandedChange\",\n \"selected\",\n \"defaultSelected\",\n \"onSelectedChange\",\n \"selectable\",\n \"checkboxes\",\n \"renderLabel\",\n \"loadChildren\",\n \"ref\",\n ]);\n\n const [loadedChildren, setLoadedChildren] = createSignal<Record<string, ITreeNodeItem[]>>({});\n const [loadingIds, setLoadingIds] = createSignal<string[]>([]);\n const [expandedIds, setExpandedIds] = createControllableState<string[]>({\n value: () => local.expanded,\n defaultValue: local.defaultExpanded,\n onChange: (next) => local.onExpandedChange?.(next),\n });\n const [selectedIds, setSelectedIds] = createControllableState<string[]>({\n value: () => local.selected,\n defaultValue: local.defaultSelected,\n onChange: (next) => local.onSelectedChange?.(next),\n });\n\n const toggleExpanded = (id: string): void =>\n setExpandedIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));\n\n const setOpen = (id: string, open: boolean): void =>\n setExpandedIds((prev) => {\n const has = prev.includes(id);\n if (open && !has) return [...prev, id];\n if (!open && has) return prev.filter((x) => x !== id);\n return prev;\n });\n\n const toggleSelected = (id: string): void =>\n setSelectedIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));\n\n const ensureLoaded = (item: ITreeNodeItem, nodeId: string): void => {\n if (!local.loadChildren || loadedChildren()[nodeId] || (item.children && item.children.length > 0)) return;\n setLoadingIds((prev) => (prev.includes(nodeId) ? prev : [...prev, nodeId]));\n void local\n .loadChildren(item, nodeId)\n .then((children) => setLoadedChildren((prev) => ({ ...prev, [nodeId]: children })))\n .finally(() => setLoadingIds((prev) => prev.filter((x) => x !== nodeId)));\n };\n\n const contextValue: TreeContextValue = {\n expandedIds,\n selectedIds,\n loadedChildren,\n loadingIds,\n toggleExpanded,\n setOpen,\n toggleSelected,\n ensureLoaded,\n get selectable() {\n return local.selectable;\n },\n get checkboxes() {\n return local.checkboxes;\n },\n get nodeIcon() {\n return local.nodeIcon;\n },\n get listIcon() {\n return local.listIcon;\n },\n get renderLabel() {\n return local.renderLabel;\n },\n get hasLoader() {\n return !!local.loadChildren;\n },\n };\n\n return (\n <TreeContext.Provider value={contextValue}>\n <div {...rest} data-testid=\"tree-view\" ref={mergeRefs(local.ref)} role=\"tree\" class={cn(\"smwb-tree\", local.class)}>\n <For each={local.data}>\n {(node, idx) => (\n <div class=\"smwb-tree__wrapper\" role=\"presentation\">\n <TreeNode item={node} path={`${idx()}`} />\n </div>\n )}\n </For>\n </div>\n </TreeContext.Provider>\n );\n}\n\nexport default TreeView;\n"],"names":["TreeContext","createContext","TreeNode","props","ctx","useContext","nodeId","item","id","path","resolvedChildren","children","loadedChildren","isLazy","hasLoader","hasChildren","hasChildNodes","length","isOpen","expandedIds","includes","isSelected","selectedIds","isLoading","loadingIds","onLabelClick","ensureLoaded","toggleExpanded","selectable","toggleSelected","onKeyDown","event","key","preventDefault","setOpen","_el$","_tmpl$3","_el$2","firstChild","_el$4","$$keydown","$$click","_$insert","_$createComponent","Show","when","checkboxes","_el$3","_tmpl$","addEventListener","e","stopPropagation","_$effect","_$setAttribute","label","checked","fallback","Icon","name","listIcon","size","_$memo","nodeIcon","opened","closed","fill","_c$","renderLabel","_el$5","_tmpl$2","_tmpl$4","For","each","child","idx","_p$","_v$","cn","_v$2","undefined","_v$3","_$className","t","a","TreeView","merged","mergeProps","data","defaultExpanded","defaultSelected","local","rest","splitProps","setLoadedChildren","createSignal","setLoadingIds","setExpandedIds","createControllableState","value","expanded","defaultValue","onChange","next","onExpandedChange","setSelectedIds","selected","onSelectedChange","contextValue","prev","filter","x","open","has","loadChildren","then","finally","Provider","_el$7","_tmpl$5","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","class","node","_el$8","_tmpl$6","_$delegateEvents"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"treeView.js","sources":["../../../../../src/components/dataDisplay/treeView/treeView.tsx"],"sourcesContent":["import { type Accessor, type JSX, For, Show, createContext, createSignal, mergeProps, splitProps, useContext } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ITreeNodeItem {\n /** Stable identifier. Falls back to the positional path when omitted. */\n id?: string;\n label: string;\n children?: ITreeNodeItem[];\n /** Hint that the node is expandable even before its children are loaded. */\n hasChildren?: boolean;\n}\n\nexport interface TreeViewProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n nodeIcon?: { opened?: string; closed?: string };\n listIcon?: string;\n data: ITreeNodeItem[];\n expanded?: string[];\n defaultExpanded?: string[];\n onExpandedChange?: (expanded: string[]) => void;\n selected?: string[];\n defaultSelected?: string[];\n /** Reports the full selection plus, for user toggles, the node that just changed. */\n onSelectedChange?: (selected: string[], changed?: { id: string; selected: boolean }) => void;\n selectable?: boolean;\n checkboxes?: boolean;\n renderLabel?: (item: ITreeNodeItem, nodeId: string) => JSX.Element;\n loadChildren?: (item: ITreeNodeItem, nodeId: string) => Promise<ITreeNodeItem[]>;\n ref?: Ref<HTMLDivElement>;\n}\n\ninterface TreeContextValue {\n expandedIds: Accessor<string[]>;\n selectedIds: Accessor<string[]>;\n loadedChildren: Accessor<Record<string, ITreeNodeItem[]>>;\n loadingIds: Accessor<string[]>;\n toggleExpanded: (id: string) => void;\n setOpen: (id: string, open: boolean) => void;\n toggleSelected: (id: string) => void;\n ensureLoaded: (item: ITreeNodeItem, nodeId: string) => void;\n selectable: boolean;\n checkboxes: boolean;\n nodeIcon: { opened?: string; closed?: string };\n listIcon: string;\n renderLabel: ((item: ITreeNodeItem, nodeId: string) => JSX.Element) | undefined;\n hasLoader: boolean;\n}\n\nconst TreeContext = createContext<TreeContextValue>();\n\nfunction TreeNode(props: { item: ITreeNodeItem; path: string }): JSX.Element {\n const ctx = useContext(TreeContext)!;\n const nodeId = (): string => props.item.id ?? props.path;\n const resolvedChildren = (): ITreeNodeItem[] | undefined => props.item.children ?? ctx.loadedChildren()[nodeId()];\n const isLazy = (): boolean => ctx.hasLoader && (!!props.item.hasChildren || !!ctx.loadedChildren()[nodeId()]);\n const hasChildNodes = (): boolean => (!!resolvedChildren() && (resolvedChildren()?.length ?? 0) > 0) || isLazy();\n const isOpen = (): boolean => ctx.expandedIds().includes(nodeId());\n const isSelected = (): boolean => ctx.selectedIds().includes(nodeId());\n const isLoading = (): boolean => ctx.loadingIds().includes(nodeId());\n\n const onLabelClick = (): void => {\n if (hasChildNodes()) {\n if (!isOpen()) ctx.ensureLoaded(props.item, nodeId());\n ctx.toggleExpanded(nodeId());\n }\n if (ctx.selectable) ctx.toggleSelected(nodeId());\n };\n\n const onKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n onLabelClick();\n } else if (event.key === \"ArrowRight\" && hasChildNodes()) {\n ctx.ensureLoaded(props.item, nodeId());\n ctx.setOpen(nodeId(), true);\n } else if (event.key === \"ArrowLeft\" && hasChildNodes()) {\n ctx.setOpen(nodeId(), false);\n }\n };\n\n return (\n <div\n class={cn(\"smwb-tree__node\", { \"smwb-tree__node_selected\": isSelected() })}\n role=\"treeitem\"\n aria-expanded={hasChildNodes() ? isOpen() : undefined}\n aria-selected={ctx.selectable || ctx.checkboxes ? isSelected() : undefined}\n >\n <span class=\"smwb-tree__node__content\" onClick={onLabelClick} onKeyDown={onKeyDown} tabindex={0} role=\"button\">\n <Show when={ctx.checkboxes}>\n <input\n type=\"checkbox\"\n class=\"smwb-tree__node__checkbox\"\n checked={isSelected()}\n onClick={(e) => e.stopPropagation()}\n onChange={() => ctx.toggleSelected(nodeId())}\n aria-label={props.item.label}\n />\n </Show>\n <span class=\"smwb-tree__node__label\">\n <Show when={hasChildNodes()} fallback={<Icon name={ctx.listIcon} size={20} />}>\n <Icon name={isOpen() ? ctx.nodeIcon.opened ?? \"folder_open\" : ctx.nodeIcon.closed ?? \"folder\"} fill={1} size={20} />\n </Show>\n {ctx.renderLabel ? ctx.renderLabel(props.item, nodeId()) : props.item.label}\n </span>\n </span>\n <Show when={hasChildNodes() && isOpen()}>\n <div role=\"group\">\n <Show\n when={!(isLoading() && !resolvedChildren())}\n fallback={\n <div class=\"smwb-tree__node__loading\" role=\"status\">\n Загрузка…\n </div>\n }\n >\n <For each={resolvedChildren() ?? []}>\n {(child, idx) => <TreeNode item={child} path={`${props.path}.${idx()}`} />}\n </For>\n </Show>\n </div>\n </Show>\n </div>\n );\n}\n\nexport function TreeView(props: TreeViewProps): JSX.Element {\n const merged = mergeProps(\n {\n listIcon: \"draft\",\n nodeIcon: { closed: \"folder\", opened: \"folder_open\" } as { opened?: string; closed?: string },\n data: [] as ITreeNodeItem[],\n defaultExpanded: [] as string[],\n defaultSelected: [] as string[],\n selectable: false,\n checkboxes: false,\n },\n props\n );\n const [local, rest] = splitProps(merged, [\n \"class\",\n \"listIcon\",\n \"nodeIcon\",\n \"data\",\n \"expanded\",\n \"defaultExpanded\",\n \"onExpandedChange\",\n \"selected\",\n \"defaultSelected\",\n \"onSelectedChange\",\n \"selectable\",\n \"checkboxes\",\n \"renderLabel\",\n \"loadChildren\",\n \"ref\",\n ]);\n\n const [loadedChildren, setLoadedChildren] = createSignal<Record<string, ITreeNodeItem[]>>({});\n const [loadingIds, setLoadingIds] = createSignal<string[]>([]);\n const [expandedIds, setExpandedIds] = createControllableState<string[]>({\n value: () => local.expanded,\n defaultValue: local.defaultExpanded,\n onChange: (next) => local.onExpandedChange?.(next),\n });\n let lastToggled: { id: string; selected: boolean } | undefined;\n const [selectedIds, setSelectedIds] = createControllableState<string[]>({\n value: () => local.selected,\n defaultValue: local.defaultSelected,\n onChange: (next) => {\n // createControllableState calls onChange synchronously from the setter,\n // so lastToggled still refers to the toggle that caused this change.\n const changed = lastToggled;\n lastToggled = undefined;\n local.onSelectedChange?.(next, changed);\n },\n });\n\n const toggleExpanded = (id: string): void =>\n setExpandedIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));\n\n const setOpen = (id: string, open: boolean): void =>\n setExpandedIds((prev) => {\n const has = prev.includes(id);\n if (open && !has) return [...prev, id];\n if (!open && has) return prev.filter((x) => x !== id);\n return prev;\n });\n\n const toggleSelected = (id: string): void => {\n lastToggled = { id, selected: !selectedIds().includes(id) };\n setSelectedIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));\n };\n\n const ensureLoaded = (item: ITreeNodeItem, nodeId: string): void => {\n if (!local.loadChildren || loadedChildren()[nodeId] || (item.children && item.children.length > 0)) return;\n setLoadingIds((prev) => (prev.includes(nodeId) ? prev : [...prev, nodeId]));\n void local\n .loadChildren(item, nodeId)\n .then((children) => setLoadedChildren((prev) => ({ ...prev, [nodeId]: children })))\n .finally(() => setLoadingIds((prev) => prev.filter((x) => x !== nodeId)));\n };\n\n const contextValue: TreeContextValue = {\n expandedIds,\n selectedIds,\n loadedChildren,\n loadingIds,\n toggleExpanded,\n setOpen,\n toggleSelected,\n ensureLoaded,\n get selectable() {\n return local.selectable;\n },\n get checkboxes() {\n return local.checkboxes;\n },\n get nodeIcon() {\n return local.nodeIcon;\n },\n get listIcon() {\n return local.listIcon;\n },\n get renderLabel() {\n return local.renderLabel;\n },\n get hasLoader() {\n return !!local.loadChildren;\n },\n };\n\n return (\n <TreeContext.Provider value={contextValue}>\n <div {...rest} data-testid=\"tree-view\" ref={mergeRefs(local.ref)} role=\"tree\" class={cn(\"smwb-tree\", local.class)}>\n <For each={local.data}>\n {(node, idx) => (\n <div class=\"smwb-tree__wrapper\" role=\"presentation\">\n <TreeNode item={node} path={`${idx()}`} />\n </div>\n )}\n </For>\n </div>\n </TreeContext.Provider>\n );\n}\n\nexport default TreeView;\n"],"names":["TreeContext","createContext","TreeNode","props","ctx","useContext","nodeId","item","id","path","resolvedChildren","children","loadedChildren","isLazy","hasLoader","hasChildren","hasChildNodes","length","isOpen","expandedIds","includes","isSelected","selectedIds","isLoading","loadingIds","onLabelClick","ensureLoaded","toggleExpanded","selectable","toggleSelected","onKeyDown","event","key","preventDefault","setOpen","_el$","_tmpl$3","_el$2","firstChild","_el$4","$$keydown","$$click","_$insert","_$createComponent","Show","when","checkboxes","_el$3","_tmpl$","addEventListener","e","stopPropagation","_$effect","_$setAttribute","label","checked","fallback","Icon","name","listIcon","size","_$memo","nodeIcon","opened","closed","fill","_c$","renderLabel","_el$5","_tmpl$2","_tmpl$4","For","each","child","idx","_p$","_v$","cn","_v$2","undefined","_v$3","_$className","t","a","TreeView","merged","mergeProps","data","defaultExpanded","defaultSelected","local","rest","splitProps","setLoadedChildren","createSignal","setLoadingIds","setExpandedIds","createControllableState","value","expanded","defaultValue","onChange","next","onExpandedChange","lastToggled","setSelectedIds","selected","changed","onSelectedChange","contextValue","prev","filter","x","open","has","loadChildren","then","finally","Provider","_el$7","_tmpl$5","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","class","node","_el$8","_tmpl$6","_$delegateEvents"],"mappings":"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"}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
import { createComponent as
|
|
2
|
-
import { mergeProps as
|
|
3
|
-
import
|
|
4
|
-
import { createCssTransition as
|
|
5
|
-
import { createFocusTrap as
|
|
6
|
-
import {
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import { createComponent as c, Portal as w, addEventListener as y, use as g, insert as s, Dynamic as C, mergeProps as k, effect as l, className as i, isServer as E, template as _, delegateEvents as A } from "solid-js/web";
|
|
2
|
+
import { mergeProps as O, splitProps as $, createEffect as h, onCleanup as x, Show as L } from "solid-js";
|
|
3
|
+
import n from "clsx";
|
|
4
|
+
import { createCssTransition as P } from "../../../primitives/createCssTransition.js";
|
|
5
|
+
import { createFocusTrap as F } from "../../../primitives/createFocusTrap.js";
|
|
6
|
+
import { isTopOverlayLayer as S } from "../../../primitives/overlayLayer.js";
|
|
7
|
+
import { mergeRefs as z } from "../../../primitives/mergeRefs.js";
|
|
8
|
+
var D = /* @__PURE__ */ _("<div data-smwb-overlay-layer>"), d = /* @__PURE__ */ _("<div>");
|
|
9
|
+
const M = {
|
|
9
10
|
appear: "smwb-modal__overlay-appear",
|
|
10
11
|
appearActive: "smwb-modal__overlay-appear-active",
|
|
11
12
|
appearDone: "smwb-modal__overlay-appear-done",
|
|
@@ -15,8 +16,8 @@ const L = {
|
|
|
15
16
|
exit: "smwb-modal__overlay-exit",
|
|
16
17
|
exitActive: "smwb-modal__overlay-exit-active"
|
|
17
18
|
};
|
|
18
|
-
function
|
|
19
|
-
const r =
|
|
19
|
+
function N(o) {
|
|
20
|
+
const r = O({
|
|
20
21
|
animation: "fade",
|
|
21
22
|
backdrop: "dark",
|
|
22
23
|
size: "large",
|
|
@@ -25,51 +26,51 @@ function S(o) {
|
|
|
25
26
|
disableAppearAnimation: !1,
|
|
26
27
|
role: "dialog",
|
|
27
28
|
closeOnEsc: !0
|
|
28
|
-
}, o), [e,
|
|
29
|
-
let p;
|
|
30
|
-
const m =
|
|
29
|
+
}, o), [e, f] = $(r, ["children", "onClose", "open", "class", "animation", "backdrop", "size", "closeOnOutsideClick", "asForm", "disableAppearAnimation", "role", "closeOnEsc", "ref"]);
|
|
30
|
+
let p, u;
|
|
31
|
+
const m = P({
|
|
31
32
|
in: () => e.open,
|
|
32
33
|
timeout: {
|
|
33
34
|
appear: 225,
|
|
34
35
|
enter: 225,
|
|
35
36
|
exit: 150
|
|
36
37
|
},
|
|
37
|
-
classNames:
|
|
38
|
+
classNames: M,
|
|
38
39
|
appear: !e.disableAppearAnimation
|
|
39
40
|
});
|
|
40
|
-
return
|
|
41
|
+
return F({
|
|
41
42
|
active: () => e.open && m.mounted(),
|
|
42
43
|
container: () => p
|
|
43
44
|
}), h(() => {
|
|
44
45
|
if (!e.open || !e.closeOnEsc || !e.onClose) return;
|
|
45
|
-
const t = (
|
|
46
|
-
|
|
46
|
+
const t = (a) => {
|
|
47
|
+
a.key === "Escape" && S(u) && e.onClose?.();
|
|
47
48
|
};
|
|
48
|
-
document.addEventListener("keydown", t),
|
|
49
|
-
}),
|
|
49
|
+
document.addEventListener("keydown", t), x(() => document.removeEventListener("keydown", t));
|
|
50
|
+
}), c(L, {
|
|
50
51
|
get when() {
|
|
51
52
|
return m.mounted();
|
|
52
53
|
},
|
|
53
54
|
get children() {
|
|
54
|
-
return
|
|
55
|
+
return c(w, {
|
|
55
56
|
get mount() {
|
|
56
|
-
return
|
|
57
|
+
return E ? void 0 : document.body;
|
|
57
58
|
},
|
|
58
59
|
get children() {
|
|
59
|
-
var t =
|
|
60
|
-
return
|
|
60
|
+
var t = D();
|
|
61
|
+
return y(t, "click", e.closeOnOutsideClick && e.onClose ? () => e.onClose?.() : void 0, !0), g((a) => u = a, t), s(t, c(C, k({
|
|
61
62
|
get component() {
|
|
62
63
|
return e.asForm ? "form" : "div";
|
|
63
64
|
}
|
|
64
|
-
},
|
|
65
|
-
ref(
|
|
66
|
-
var
|
|
67
|
-
typeof
|
|
65
|
+
}, f, {
|
|
66
|
+
ref(a) {
|
|
67
|
+
var v = z(e.ref, (b) => p = b);
|
|
68
|
+
typeof v == "function" && v(a);
|
|
68
69
|
},
|
|
69
70
|
get class() {
|
|
70
|
-
return
|
|
71
|
+
return n("smwb-modal", `smwb-${e.size}`, `smwb-${e.animation}`, e.class);
|
|
71
72
|
},
|
|
72
|
-
onClick: (
|
|
73
|
+
onClick: (a) => a.stopPropagation(),
|
|
73
74
|
get role() {
|
|
74
75
|
return e.role;
|
|
75
76
|
},
|
|
@@ -77,40 +78,40 @@ function S(o) {
|
|
|
77
78
|
get children() {
|
|
78
79
|
return e.children;
|
|
79
80
|
}
|
|
80
|
-
}))), l(() => i(t,
|
|
81
|
+
}))), l(() => i(t, n("smwb-modal__overlay", `smwb-${e.backdrop}`, `smwb-${e.size}`, m.classes()))), t;
|
|
81
82
|
}
|
|
82
83
|
});
|
|
83
84
|
}
|
|
84
85
|
});
|
|
85
86
|
}
|
|
86
|
-
function
|
|
87
|
+
function T(o) {
|
|
87
88
|
return (() => {
|
|
88
|
-
var r =
|
|
89
|
-
return s(r, () => o.children), l(() => i(r,
|
|
89
|
+
var r = d();
|
|
90
|
+
return s(r, () => o.children), l(() => i(r, n("smwb-modal__header", o.class))), r;
|
|
90
91
|
})();
|
|
91
92
|
}
|
|
92
|
-
function
|
|
93
|
+
function R(o) {
|
|
93
94
|
return (() => {
|
|
94
|
-
var r =
|
|
95
|
-
return s(r, () => o.children), l(() => i(r,
|
|
95
|
+
var r = d();
|
|
96
|
+
return s(r, () => o.children), l(() => i(r, n("smwb-modal__content", o.class))), r;
|
|
96
97
|
})();
|
|
97
98
|
}
|
|
98
|
-
function
|
|
99
|
+
function j(o) {
|
|
99
100
|
return (() => {
|
|
100
|
-
var r =
|
|
101
|
-
return s(r, () => o.children), l(() => i(r,
|
|
101
|
+
var r = d();
|
|
102
|
+
return s(r, () => o.children), l(() => i(r, n("smwb-modal__footer", o.class))), r;
|
|
102
103
|
})();
|
|
103
104
|
}
|
|
104
|
-
const
|
|
105
|
-
Footer:
|
|
106
|
-
Header:
|
|
107
|
-
Content:
|
|
105
|
+
const I = Object.assign(N, {
|
|
106
|
+
Footer: j,
|
|
107
|
+
Header: T,
|
|
108
|
+
Content: R
|
|
108
109
|
});
|
|
109
|
-
|
|
110
|
+
A(["click"]);
|
|
110
111
|
export {
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
112
|
+
R as Content,
|
|
113
|
+
j as Footer,
|
|
114
|
+
T as Header,
|
|
115
|
+
I as Modal
|
|
115
116
|
};
|
|
116
117
|
//# sourceMappingURL=modal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.js","sources":["../../../../../src/components/feedBack/modal/modal.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, createEffect, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { Dynamic, Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { createCssTransition } from \"../../../primitives/createCssTransition\";\nimport { createFocusTrap } from \"../../../primitives/createFocusTrap\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ModalProps {\n size?: \"small\" | \"medium\" | \"large\" | \"fullscreen\";\n closeOnOutsideClick?: boolean;\n onClose?: () => void;\n open: boolean;\n animation?: \"fade\" | \"scale\" | \"drop\";\n class?: string;\n backdrop?: \"blured\" | \"dark\" | \"transparent\" | \"darkBlured\";\n asForm?: boolean;\n disableAppearAnimation?: boolean;\n /** ARIA role of the dialog. */\n role?: \"dialog\" | \"alertdialog\";\n /** Close the modal when Escape is pressed. */\n closeOnEsc?: boolean;\n \"aria-label\"?: string;\n \"aria-labelledby\"?: string;\n \"aria-describedby\"?: string;\n ref?: Ref<HTMLDivElement>;\n}\n\nconst OVERLAY_CLASSNAMES = {\n appear: \"smwb-modal__overlay-appear\",\n appearActive: \"smwb-modal__overlay-appear-active\",\n appearDone: \"smwb-modal__overlay-appear-done\",\n enter: \"smwb-modal__overlay-enter\",\n enterActive: \"smwb-modal__overlay-enter-active\",\n enterDone: \"smwb-modal__overlay-enter-done\",\n exit: \"smwb-modal__overlay-exit\",\n exitActive: \"smwb-modal__overlay-exit-active\",\n};\n\nfunction ModalBase(props: ParentProps<ModalProps>): JSX.Element {\n const merged = mergeProps(\n {\n animation: \"fade\" as const,\n backdrop: \"dark\" as const,\n size: \"large\" as const,\n closeOnOutsideClick: true,\n asForm: false,\n disableAppearAnimation: false,\n role: \"dialog\" as const,\n closeOnEsc: true,\n },\n props\n );\n const [local, rest] = splitProps(merged, [\n \"children\",\n \"onClose\",\n \"open\",\n \"class\",\n \"animation\",\n \"backdrop\",\n \"size\",\n \"closeOnOutsideClick\",\n \"asForm\",\n \"disableAppearAnimation\",\n \"role\",\n \"closeOnEsc\",\n \"ref\",\n ]);\n\n let contentEl: HTMLDivElement | undefined;\n\n const transition = createCssTransition({\n in: () => local.open,\n timeout: { appear: 225, enter: 225, exit: 150 },\n classNames: OVERLAY_CLASSNAMES,\n appear: !local.disableAppearAnimation,\n });\n\n createFocusTrap({ active: () => local.open && transition.mounted(), container: () => contentEl });\n\n createEffect(() => {\n if (!local.open || !local.closeOnEsc || !local.onClose) return;\n const onKeyDown = (event: KeyboardEvent): void => {\n if (event.key === \"Escape\") local.onClose?.();\n };\n document.addEventListener(\"keydown\", onKeyDown);\n onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n });\n\n return (\n <Show when={transition.mounted()}>\n <Portal mount={(isServer ? undefined : document.body) as Node}>\n <div\n class={cn(\"smwb-modal__overlay\", `smwb-${local.backdrop}`, `smwb-${local.size}`, transition.classes())}\n onClick={local.closeOnOutsideClick && local.onClose ? () => local.onClose?.() : undefined}\n >\n <Dynamic\n component={local.asForm ? \"form\" : \"div\"}\n {...rest}\n ref={mergeRefs(local.ref, (el) => (contentEl = el as HTMLDivElement))}\n class={cn(\"smwb-modal\", `smwb-${local.size}`, `smwb-${local.animation}`, local.class)}\n onClick={(event: MouseEvent) => event.stopPropagation()}\n role={local.role}\n aria-modal=\"true\"\n >\n {local.children}\n </Dynamic>\n </div>\n </Portal>\n </Show>\n );\n}\n\nexport interface ModalSlotProps {\n class?: string;\n}\n\nexport function Header(props: ParentProps<ModalSlotProps>): JSX.Element {\n return <div class={cn(\"smwb-modal__header\", props.class)}>{props.children}</div>;\n}\n\nexport function Content(props: ParentProps<ModalSlotProps>): JSX.Element {\n return <div class={cn(\"smwb-modal__content\", props.class)}>{props.children}</div>;\n}\n\nexport function Footer(props: ParentProps<ModalSlotProps>): JSX.Element {\n return <div class={cn(\"smwb-modal__footer\", props.class)}>{props.children}</div>;\n}\n\nexport const Modal = Object.assign(ModalBase, { Footer, Header, Content });\n\nexport default Modal;\n"],"names":["OVERLAY_CLASSNAMES","appear","appearActive","appearDone","enter","enterActive","enterDone","exit","exitActive","ModalBase","props","merged","mergeProps","animation","backdrop","size","closeOnOutsideClick","asForm","disableAppearAnimation","role","closeOnEsc","local","rest","splitProps","contentEl","transition","createCssTransition","in","open","timeout","classNames","createFocusTrap","active","mounted","container","createEffect","onClose","onKeyDown","event","key","document","addEventListener","onCleanup","removeEventListener","_$createComponent","Show","when","children","Portal","mount","isServer","undefined","body","_el$","_tmpl$","_$addEventListener","_$insert","Dynamic","_$mergeProps","component","ref","r$","_ref$","mergeRefs","
|
|
1
|
+
{"version":3,"file":"modal.js","sources":["../../../../../src/components/feedBack/modal/modal.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, createEffect, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { Dynamic, Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { createCssTransition } from \"../../../primitives/createCssTransition\";\nimport { createFocusTrap } from \"../../../primitives/createFocusTrap\";\nimport { isTopOverlayLayer } from \"../../../primitives/overlayLayer\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ModalProps {\n size?: \"small\" | \"medium\" | \"large\" | \"fullscreen\";\n closeOnOutsideClick?: boolean;\n onClose?: () => void;\n open: boolean;\n animation?: \"fade\" | \"scale\" | \"drop\";\n class?: string;\n backdrop?: \"blured\" | \"dark\" | \"transparent\" | \"darkBlured\";\n asForm?: boolean;\n disableAppearAnimation?: boolean;\n /** ARIA role of the dialog. */\n role?: \"dialog\" | \"alertdialog\";\n /** Close the modal when Escape is pressed. */\n closeOnEsc?: boolean;\n \"aria-label\"?: string;\n \"aria-labelledby\"?: string;\n \"aria-describedby\"?: string;\n ref?: Ref<HTMLDivElement>;\n}\n\nconst OVERLAY_CLASSNAMES = {\n appear: \"smwb-modal__overlay-appear\",\n appearActive: \"smwb-modal__overlay-appear-active\",\n appearDone: \"smwb-modal__overlay-appear-done\",\n enter: \"smwb-modal__overlay-enter\",\n enterActive: \"smwb-modal__overlay-enter-active\",\n enterDone: \"smwb-modal__overlay-enter-done\",\n exit: \"smwb-modal__overlay-exit\",\n exitActive: \"smwb-modal__overlay-exit-active\",\n};\n\nfunction ModalBase(props: ParentProps<ModalProps>): JSX.Element {\n const merged = mergeProps(\n {\n animation: \"fade\" as const,\n backdrop: \"dark\" as const,\n size: \"large\" as const,\n closeOnOutsideClick: true,\n asForm: false,\n disableAppearAnimation: false,\n role: \"dialog\" as const,\n closeOnEsc: true,\n },\n props\n );\n const [local, rest] = splitProps(merged, [\n \"children\",\n \"onClose\",\n \"open\",\n \"class\",\n \"animation\",\n \"backdrop\",\n \"size\",\n \"closeOnOutsideClick\",\n \"asForm\",\n \"disableAppearAnimation\",\n \"role\",\n \"closeOnEsc\",\n \"ref\",\n ]);\n\n let contentEl: HTMLDivElement | undefined;\n let overlayEl: HTMLDivElement | undefined;\n\n const transition = createCssTransition({\n in: () => local.open,\n timeout: { appear: 225, enter: 225, exit: 150 },\n classNames: OVERLAY_CLASSNAMES,\n appear: !local.disableAppearAnimation,\n });\n\n createFocusTrap({ active: () => local.open && transition.mounted(), container: () => contentEl });\n\n createEffect(() => {\n if (!local.open || !local.closeOnEsc || !local.onClose) return;\n const onKeyDown = (event: KeyboardEvent): void => {\n // Only the topmost overlay layer reacts to Escape.\n if (event.key === \"Escape\" && isTopOverlayLayer(overlayEl)) local.onClose?.();\n };\n document.addEventListener(\"keydown\", onKeyDown);\n onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n });\n\n return (\n <Show when={transition.mounted()}>\n <Portal mount={(isServer ? undefined : document.body) as Node}>\n <div\n ref={(el) => (overlayEl = el)}\n data-smwb-overlay-layer\n class={cn(\"smwb-modal__overlay\", `smwb-${local.backdrop}`, `smwb-${local.size}`, transition.classes())}\n onClick={local.closeOnOutsideClick && local.onClose ? () => local.onClose?.() : undefined}\n >\n <Dynamic\n component={local.asForm ? \"form\" : \"div\"}\n {...rest}\n ref={mergeRefs(local.ref, (el) => (contentEl = el as HTMLDivElement))}\n class={cn(\"smwb-modal\", `smwb-${local.size}`, `smwb-${local.animation}`, local.class)}\n onClick={(event: MouseEvent) => event.stopPropagation()}\n role={local.role}\n aria-modal=\"true\"\n >\n {local.children}\n </Dynamic>\n </div>\n </Portal>\n </Show>\n );\n}\n\nexport interface ModalSlotProps {\n class?: string;\n}\n\nexport function Header(props: ParentProps<ModalSlotProps>): JSX.Element {\n return <div class={cn(\"smwb-modal__header\", props.class)}>{props.children}</div>;\n}\n\nexport function Content(props: ParentProps<ModalSlotProps>): JSX.Element {\n return <div class={cn(\"smwb-modal__content\", props.class)}>{props.children}</div>;\n}\n\nexport function Footer(props: ParentProps<ModalSlotProps>): JSX.Element {\n return <div class={cn(\"smwb-modal__footer\", props.class)}>{props.children}</div>;\n}\n\nexport const Modal = Object.assign(ModalBase, { Footer, Header, Content });\n\nexport default Modal;\n"],"names":["OVERLAY_CLASSNAMES","appear","appearActive","appearDone","enter","enterActive","enterDone","exit","exitActive","ModalBase","props","merged","mergeProps","animation","backdrop","size","closeOnOutsideClick","asForm","disableAppearAnimation","role","closeOnEsc","local","rest","splitProps","contentEl","overlayEl","transition","createCssTransition","in","open","timeout","classNames","createFocusTrap","active","mounted","container","createEffect","onClose","onKeyDown","event","key","isTopOverlayLayer","document","addEventListener","onCleanup","removeEventListener","_$createComponent","Show","when","children","Portal","mount","isServer","undefined","body","_el$","_tmpl$","_$addEventListener","_$use","el","_$insert","Dynamic","_$mergeProps","component","ref","r$","_ref$","mergeRefs","cn","class","onClick","stopPropagation","_$effect","_$className","classes","Header","_el$2","_tmpl$2","Content","_el$3","Footer","_el$4","Modal","Object","assign","_$delegateEvents"],"mappings":"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"}
|