@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,4 +1,4 @@
|
|
|
1
|
-
import { createComponent as
|
|
1
|
+
import { createComponent as n, mergeProps as L, Portal as M, use as O, insert as $, effect as I, style as R, setAttribute as q, isServer as j, template as x } from "solid-js/web";
|
|
2
2
|
import '../../../assets/styles/less/components/timePicker/timePicker.entry.css';/* empty css */
|
|
3
3
|
import { splitProps as z, createSignal as l, createEffect as y, onCleanup as G, Show as H } from "solid-js";
|
|
4
4
|
import { buildFloatingMiddleware as J, resolvePlacement as K } from "../../../utils/floating.js";
|
|
@@ -8,10 +8,10 @@ import { TimePickerColumns as U } from "./timePickerColumns.js";
|
|
|
8
8
|
import { isValidTimeDate as T } from "./timeUtils.js";
|
|
9
9
|
import { mergeRefs as A } from "../../../primitives/mergeRefs.js";
|
|
10
10
|
import { ClickAwayListener as W } from "../../clickAwayListener/clickAwayListener.js";
|
|
11
|
-
var X = /* @__PURE__ */ x('<div class="smwb-date-picker smwb-time-picker"data-testid=time-picker role=dialog aria-modal=false style="transition:opacity 150ms ease-in-out"><div class=smwb-date-picker__inner>');
|
|
11
|
+
var X = /* @__PURE__ */ x('<div class="smwb-date-picker smwb-time-picker"data-testid=time-picker data-smwb-overlay-layer role=dialog aria-modal=false style="transition:opacity 150ms ease-in-out"><div class=smwb-date-picker__inner>');
|
|
12
12
|
const Y = 150;
|
|
13
|
-
function ce(
|
|
14
|
-
const [e, P] = z(
|
|
13
|
+
function ce(u) {
|
|
14
|
+
const [e, P] = z(u, ["value", "onChange", "placement", "disabled", "disableClock", "clockAriaLabel", "format", "onBlur", "ref"]), s = () => e.value === void 0 ? void 0 : new Date(e.value), [F, f] = l(T(s()) ? s() : /* @__PURE__ */ new Date()), [S, c] = l(!1);
|
|
15
15
|
let g, v;
|
|
16
16
|
const p = () => K(e.placement ?? "bottom-start"), m = N({
|
|
17
17
|
placement: () => p().placement,
|
|
@@ -22,12 +22,12 @@ function ce(d) {
|
|
|
22
22
|
const t = s();
|
|
23
23
|
f(T(t) ? t : /* @__PURE__ */ new Date());
|
|
24
24
|
});
|
|
25
|
-
const b = () => S() && !e.disabled && !e.disableClock, [C, h] = l(b()), [_,
|
|
26
|
-
let
|
|
25
|
+
const b = () => S() && !e.disabled && !e.disableClock, [C, h] = l(b()), [_, w] = l(!1);
|
|
26
|
+
let d, a;
|
|
27
27
|
y(() => {
|
|
28
|
-
b() ? (
|
|
28
|
+
b() ? (a !== void 0 && clearTimeout(a), h(!0), d = requestAnimationFrame(() => w(!0))) : (w(!1), C() && (a = setTimeout(() => h(!1), Y)));
|
|
29
29
|
}), G(() => {
|
|
30
|
-
|
|
30
|
+
d !== void 0 && cancelAnimationFrame(d), a !== void 0 && clearTimeout(a);
|
|
31
31
|
});
|
|
32
32
|
const D = () => {
|
|
33
33
|
e.disabled || c((t) => !t);
|
|
@@ -35,9 +35,9 @@ function ce(d) {
|
|
|
35
35
|
const r = t.target;
|
|
36
36
|
v?.contains(r) || g?.contains(r) || c(!1);
|
|
37
37
|
}, V = (t) => {
|
|
38
|
-
f(t), e.onChange?.(void 0, t,
|
|
38
|
+
f(t), e.onChange?.(void 0, t, u);
|
|
39
39
|
};
|
|
40
|
-
return [
|
|
40
|
+
return [n(Q, L({
|
|
41
41
|
ref(t) {
|
|
42
42
|
var r = A(e.ref, m.setReference, (i) => g = i);
|
|
43
43
|
typeof r == "function" && r(t);
|
|
@@ -61,21 +61,21 @@ function ce(d) {
|
|
|
61
61
|
get format() {
|
|
62
62
|
return e.format;
|
|
63
63
|
}
|
|
64
|
-
}, P)),
|
|
64
|
+
}, P)), n(H, {
|
|
65
65
|
get when() {
|
|
66
66
|
return C();
|
|
67
67
|
},
|
|
68
68
|
get children() {
|
|
69
|
-
return
|
|
69
|
+
return n(M, {
|
|
70
70
|
get mount() {
|
|
71
71
|
return j ? void 0 : document.body;
|
|
72
72
|
},
|
|
73
73
|
get children() {
|
|
74
|
-
return
|
|
74
|
+
return n(W, {
|
|
75
75
|
onClickAway: E,
|
|
76
76
|
get children() {
|
|
77
77
|
var t = X(), r = t.firstChild, i = A(m.setFloating, (o) => v = o);
|
|
78
|
-
return typeof i == "function" && O(i, t), $(r,
|
|
78
|
+
return typeof i == "function" && O(i, t), $(r, n(U, {
|
|
79
79
|
get value() {
|
|
80
80
|
return F();
|
|
81
81
|
},
|
|
@@ -90,8 +90,8 @@ function ce(d) {
|
|
|
90
90
|
var B = {
|
|
91
91
|
...m.floatingStyles(),
|
|
92
92
|
opacity: _() ? 1 : 0
|
|
93
|
-
},
|
|
94
|
-
return o.e = R(t, B, o.e),
|
|
93
|
+
}, k = e.clockAriaLabel ?? "Choose time";
|
|
94
|
+
return o.e = R(t, B, o.e), k !== o.t && q(t, "aria-label", o.t = k), o;
|
|
95
95
|
}, {
|
|
96
96
|
e: void 0,
|
|
97
97
|
t: void 0
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"timePicker.js","sources":["../../../../src/components/inputs/timePicker/timePicker.tsx"],"sourcesContent":["import { type JSX, Show, createEffect, createSignal, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport { buildFloatingMiddleware, type Placement, resolvePlacement } from \"../../../utils/floating\";\nimport { createFloating } from \"../../../primitives/createFloating\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { TimePickerInput } from \"./timePickerInput\";\nimport { TimePickerColumns } from \"./timePickerColumns\";\nimport { isValidTimeDate } from \"./timeUtils\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport type { TextFieldProps } from \"../textField\";\n\nexport interface TimePickerProps\n extends Omit<TextFieldProps, \"onBlur\" | \"onChange\" | \"value\" | \"defaultValue\" | \"ref\" | \"onToggle\"> {\n /** Time format pattern with tokens HH, mm, ss, e.g. \"HH:mm\" or \"HH:mm:ss\". */\n format?: string | undefined;\n placement?: Placement | undefined;\n disableClock?: boolean | undefined;\n label?: string | undefined;\n clockAriaLabel?: string | undefined;\n value?: Date | string | undefined;\n clockIcon?: JSX.Element;\n onChange?: ((event?: Event, value?: Date, data?: TimePickerProps) => void) | undefined;\n onBlur?: ((event?: FocusEvent, value?: Date, data?: TimePickerProps) => void) | undefined;\n ref?: Ref<HTMLInputElement>;\n}\n\nconst FADE_MS = 150;\n\nexport function TimePicker(props: TimePickerProps): JSX.Element {\n const [local, rest] = splitProps(props, [\n \"value\",\n \"onChange\",\n \"placement\",\n \"disabled\",\n \"disableClock\",\n \"clockAriaLabel\",\n \"format\",\n \"onBlur\",\n \"ref\",\n ]);\n\n const value = (): Date | undefined => (local.value === undefined ? undefined : new Date(local.value));\n const [viewValue, setViewValue] = createSignal<Date>(isValidTimeDate(value()) ? (value() as Date) : new Date());\n const [isOpen, setIsOpen] = createSignal(false);\n\n let anchorEl: HTMLElement | undefined;\n let clockEl: HTMLElement | undefined;\n\n const resolved = () => resolvePlacement(local.placement ?? \"bottom-start\");\n const floating = createFloating({\n placement: () => resolved().placement,\n middleware: () => buildFloatingMiddleware(resolved()),\n });\n\n createEffect(() => {\n if (local.disabled) return;\n const v = value();\n setViewValue(isValidTimeDate(v) ? v : new Date());\n });\n\n const shouldOpen = (): boolean => isOpen() && !local.disabled && !local.disableClock;\n const [mounted, setMounted] = createSignal(shouldOpen());\n const [shown, setShown] = createSignal(false);\n let raf: number | undefined;\n let timer: ReturnType<typeof setTimeout> | undefined;\n\n createEffect(() => {\n if (shouldOpen()) {\n if (timer !== undefined) clearTimeout(timer);\n setMounted(true);\n raf = requestAnimationFrame(() => setShown(true));\n } else {\n setShown(false);\n if (mounted()) timer = setTimeout(() => setMounted(false), FADE_MS);\n }\n });\n onCleanup(() => {\n if (raf !== undefined) cancelAnimationFrame(raf);\n if (timer !== undefined) clearTimeout(timer);\n });\n\n const onToggle = (): void => {\n if (!local.disabled) setIsOpen((prev) => !prev);\n };\n\n const onClickAway = (event: MouseEvent | TouchEvent): void => {\n const target = event.target as HTMLElement;\n if (clockEl?.contains(target) || anchorEl?.contains(target)) return;\n setIsOpen(false);\n };\n\n const onTimeChange = (next: Date): void => {\n setViewValue(next);\n local.onChange?.(undefined, next, props);\n };\n\n return (\n <>\n <TimePickerInput\n ref={mergeRefs(local.ref, floating.setReference, (el) => (anchorEl = el as HTMLElement))}\n value={local.value}\n onChange={local.onChange}\n onBlur={local.onBlur}\n onToggle={onToggle}\n disabled={local.disabled}\n disableClock={local.disableClock}\n format={local.format}\n {...rest}\n />\n <Show when={mounted()}>\n <Portal mount={(isServer ? undefined : document.body) as Node}>\n <ClickAwayListener onClickAway={onClickAway}>\n <div\n ref={mergeRefs(floating.setFloating, (el) => (clockEl = el as HTMLElement))}\n class=\"smwb-date-picker smwb-time-picker\"\n style={{ ...floating.floatingStyles(), transition: `opacity ${FADE_MS}ms ease-in-out`, opacity: shown() ? 1 : 0 }}\n data-testid=\"time-picker\"\n role=\"dialog\"\n aria-modal=\"false\"\n aria-label={local.clockAriaLabel ?? \"Choose time\"}\n >\n <div class=\"smwb-date-picker__inner\">\n <TimePickerColumns\n value={viewValue()}\n format={local.format}\n onChange={onTimeChange}\n onComplete={() => {\n setIsOpen(false);\n }}\n />\n </div>\n </div>\n </ClickAwayListener>\n </Portal>\n </Show>\n </>\n );\n}\n\nexport default TimePicker;\n"],"names":["FADE_MS","TimePicker","props","local","rest","splitProps","value","undefined","Date","viewValue","setViewValue","createSignal","isValidTimeDate","isOpen","setIsOpen","anchorEl","clockEl","resolved","resolvePlacement","placement","floating","createFloating","middleware","buildFloatingMiddleware","createEffect","disabled","v","shouldOpen","disableClock","mounted","setMounted","shown","setShown","raf","timer","clearTimeout","requestAnimationFrame","setTimeout","onCleanup","cancelAnimationFrame","onToggle","prev","onClickAway","event","target","contains","onTimeChange","next","onChange","_$createComponent","TimePickerInput","_$mergeProps","ref","r$","_ref$","mergeRefs","setReference","el","onBlur","format","Show","when","children","Portal","mount","isServer","document","body","ClickAwayListener","_el$","_tmpl$","_el$2","firstChild","_ref$2","setFloating","_$use","_$insert","TimePickerColumns","onComplete","_$effect","_p$","_v$","floatingStyles","opacity","_v$2","clockAriaLabel","e","_$style","t","_$setAttribute"],"mappings":";;;;;;;;;;;AA2BA,MAAMA,IAAU;AAET,SAASC,GAAWC,GAAqC;AAC9D,QAAM,CAACC,GAAOC,CAAI,IAAIC,EAAWH,GAAO,CACtC,SACA,YACA,aACA,YACA,gBACA,kBACA,UACA,UACA,KAAK,CACN,GAEKI,IAAQA,MAAyBH,EAAMG,UAAUC,SAAYA,SAAY,IAAIC,KAAKL,EAAMG,KAAK,GAC7F,CAACG,GAAWC,CAAY,IAAIC,EAAmBC,EAAgBN,EAAAA,CAAO,IAAKA,MAAmB,oBAAIE,MAAM,GACxG,CAACK,GAAQC,CAAS,IAAIH,EAAa,EAAK;AAE9C,MAAII,GACAC;AAEJ,QAAMC,IAAWA,MAAMC,EAAiBf,EAAMgB,aAAa,cAAc,GACnEC,IAAWC,EAAe;AAAA,IAC9BF,WAAWA,MAAMF,EAAAA,EAAWE;AAAAA,IAC5BG,YAAYA,MAAMC,EAAwBN,EAAAA,CAAU;AAAA,EAAA,CACrD;AAEDO,EAAAA,EAAa,MAAM;AACjB,QAAIrB,EAAMsB,SAAU;AACpB,UAAMC,IAAIpB,EAAAA;AACVI,IAAAA,EAAaE,EAAgBc,CAAC,IAAIA,IAAI,oBAAIlB,MAAM;AAAA,EAClD,CAAC;AAED,QAAMmB,IAAaA,MAAed,EAAAA,KAAY,CAACV,EAAMsB,YAAY,CAACtB,EAAMyB,cAClE,CAACC,GAASC,CAAU,IAAInB,EAAagB,GAAY,GACjD,CAACI,GAAOC,CAAQ,IAAIrB,EAAa,EAAK;AAC5C,MAAIsB,GACAC;AAEJV,EAAAA,EAAa,MAAM;AACjB,IAAIG,OACEO,MAAU3B,UAAW4B,aAAaD,CAAK,GAC3CJ,EAAW,EAAI,GACfG,IAAMG,sBAAsB,MAAMJ,EAAS,EAAI,CAAC,MAEhDA,EAAS,EAAK,GACVH,EAAAA,MAAWK,IAAQG,WAAW,MAAMP,EAAW,EAAK,GAAG9B,CAAO;AAAA,EAEtE,CAAC,GACDsC,EAAU,MAAM;AACd,IAAIL,MAAQ1B,UAAWgC,qBAAqBN,CAAG,GAC3CC,MAAU3B,UAAW4B,aAAaD,CAAK;AAAA,EAC7C,CAAC;AAED,QAAMM,IAAWA,MAAY;AAC3B,IAAKrC,EAAMsB,YAAUX,EAAW2B,CAAAA,MAAS,CAACA,CAAI;AAAA,EAChD,GAEMC,IAAcA,CAACC,MAAyC;AAC5D,UAAMC,IAASD,EAAMC;AACrB,IAAI5B,GAAS6B,SAASD,CAAM,KAAK7B,GAAU8B,SAASD,CAAM,KAC1D9B,EAAU,EAAK;AAAA,EACjB,GAEMgC,IAAeA,CAACC,MAAqB;AACzCrC,IAAAA,EAAaqC,CAAI,GACjB5C,EAAM6C,WAAWzC,QAAWwC,GAAM7C,CAAK;AAAA,EACzC;AAEA,SAAA,CAAA+C,EAEKC,GAAeC,EAAA;AAAA,IAAAC,IAAAC,GAAA;AAAA,UAAAC,IACTC,EAAUpD,EAAMiD,KAAKhC,EAASoC,cAAeC,CAAAA,MAAQ1C,IAAW0C,CAAkB;AAAC,aAAAH,KAAA,cAAAA,EAAAD,CAAA;AAAA,IAAA;AAAA,IAAA,IACxF/C,QAAK;AAAA,aAAEH,EAAMG;AAAAA,IAAK;AAAA,IAAA,IAClB0C,WAAQ;AAAA,aAAE7C,EAAM6C;AAAAA,IAAQ;AAAA,IAAA,IACxBU,SAAM;AAAA,aAAEvD,EAAMuD;AAAAA,IAAM;AAAA,IACpBlB,UAAAA;AAAAA,IAAkB,IAClBf,WAAQ;AAAA,aAAEtB,EAAMsB;AAAAA,IAAQ;AAAA,IAAA,IACxBG,eAAY;AAAA,aAAEzB,EAAMyB;AAAAA,IAAY;AAAA,IAAA,IAChC+B,SAAM;AAAA,aAAExD,EAAMwD;AAAAA,IAAM;AAAA,EAAA,GAChBvD,CAAI,CAAA,GAAA6C,EAETW,GAAI;AAAA,IAAA,IAACC,OAAI;AAAA,aAAEhC,EAAAA;AAAAA,IAAS;AAAA,IAAA,IAAAiC,WAAA;AAAA,aAAAb,EAClBc,GAAM;AAAA,QAAA,IAACC,QAAK;AAAA,iBAAGC,IAAW1D,SAAY2D,SAASC;AAAAA,QAAa;AAAA,QAAA,IAAAL,WAAA;AAAA,iBAAAb,EAC1DmB,GAAiB;AAAA,YAAC1B,aAAAA;AAAAA,YAAwB,IAAAoB,WAAA;AAAA,kBAAAO,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAElClB,EAAUnC,EAASsD,aAAcjB,CAAAA,MAAQzC,IAAUyC,CAAkB;AAAC,4BAAAgB,KAAA,cAAAE,EAAAF,GAAAJ,CAAA,GAAAO,EAAAL,GAAAtB,
|
|
1
|
+
{"version":3,"file":"timePicker.js","sources":["../../../../src/components/inputs/timePicker/timePicker.tsx"],"sourcesContent":["import { type JSX, Show, createEffect, createSignal, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport { buildFloatingMiddleware, type Placement, resolvePlacement } from \"../../../utils/floating\";\nimport { createFloating } from \"../../../primitives/createFloating\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { TimePickerInput } from \"./timePickerInput\";\nimport { TimePickerColumns } from \"./timePickerColumns\";\nimport { isValidTimeDate } from \"./timeUtils\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport type { TextFieldProps } from \"../textField\";\n\nexport interface TimePickerProps\n extends Omit<TextFieldProps, \"onBlur\" | \"onChange\" | \"value\" | \"defaultValue\" | \"ref\" | \"onToggle\"> {\n /** Time format pattern with tokens HH, mm, ss, e.g. \"HH:mm\" or \"HH:mm:ss\". */\n format?: string | undefined;\n placement?: Placement | undefined;\n disableClock?: boolean | undefined;\n label?: string | undefined;\n clockAriaLabel?: string | undefined;\n value?: Date | string | undefined;\n clockIcon?: JSX.Element;\n onChange?: ((event?: Event, value?: Date, data?: TimePickerProps) => void) | undefined;\n onBlur?: ((event?: FocusEvent, value?: Date, data?: TimePickerProps) => void) | undefined;\n ref?: Ref<HTMLInputElement>;\n}\n\nconst FADE_MS = 150;\n\nexport function TimePicker(props: TimePickerProps): JSX.Element {\n const [local, rest] = splitProps(props, [\n \"value\",\n \"onChange\",\n \"placement\",\n \"disabled\",\n \"disableClock\",\n \"clockAriaLabel\",\n \"format\",\n \"onBlur\",\n \"ref\",\n ]);\n\n const value = (): Date | undefined => (local.value === undefined ? undefined : new Date(local.value));\n const [viewValue, setViewValue] = createSignal<Date>(isValidTimeDate(value()) ? (value() as Date) : new Date());\n const [isOpen, setIsOpen] = createSignal(false);\n\n let anchorEl: HTMLElement | undefined;\n let clockEl: HTMLElement | undefined;\n\n const resolved = () => resolvePlacement(local.placement ?? \"bottom-start\");\n const floating = createFloating({\n placement: () => resolved().placement,\n middleware: () => buildFloatingMiddleware(resolved()),\n });\n\n createEffect(() => {\n if (local.disabled) return;\n const v = value();\n setViewValue(isValidTimeDate(v) ? v : new Date());\n });\n\n const shouldOpen = (): boolean => isOpen() && !local.disabled && !local.disableClock;\n const [mounted, setMounted] = createSignal(shouldOpen());\n const [shown, setShown] = createSignal(false);\n let raf: number | undefined;\n let timer: ReturnType<typeof setTimeout> | undefined;\n\n createEffect(() => {\n if (shouldOpen()) {\n if (timer !== undefined) clearTimeout(timer);\n setMounted(true);\n raf = requestAnimationFrame(() => setShown(true));\n } else {\n setShown(false);\n if (mounted()) timer = setTimeout(() => setMounted(false), FADE_MS);\n }\n });\n onCleanup(() => {\n if (raf !== undefined) cancelAnimationFrame(raf);\n if (timer !== undefined) clearTimeout(timer);\n });\n\n const onToggle = (): void => {\n if (!local.disabled) setIsOpen((prev) => !prev);\n };\n\n const onClickAway = (event: MouseEvent | TouchEvent): void => {\n const target = event.target as HTMLElement;\n if (clockEl?.contains(target) || anchorEl?.contains(target)) return;\n setIsOpen(false);\n };\n\n const onTimeChange = (next: Date): void => {\n setViewValue(next);\n local.onChange?.(undefined, next, props);\n };\n\n return (\n <>\n <TimePickerInput\n ref={mergeRefs(local.ref, floating.setReference, (el) => (anchorEl = el as HTMLElement))}\n value={local.value}\n onChange={local.onChange}\n onBlur={local.onBlur}\n onToggle={onToggle}\n disabled={local.disabled}\n disableClock={local.disableClock}\n format={local.format}\n {...rest}\n />\n <Show when={mounted()}>\n <Portal mount={(isServer ? undefined : document.body) as Node}>\n <ClickAwayListener onClickAway={onClickAway}>\n <div\n ref={mergeRefs(floating.setFloating, (el) => (clockEl = el as HTMLElement))}\n class=\"smwb-date-picker smwb-time-picker\"\n style={{ ...floating.floatingStyles(), transition: `opacity ${FADE_MS}ms ease-in-out`, opacity: shown() ? 1 : 0 }}\n data-testid=\"time-picker\"\n data-smwb-overlay-layer\n role=\"dialog\"\n aria-modal=\"false\"\n aria-label={local.clockAriaLabel ?? \"Choose time\"}\n >\n <div class=\"smwb-date-picker__inner\">\n <TimePickerColumns\n value={viewValue()}\n format={local.format}\n onChange={onTimeChange}\n onComplete={() => {\n setIsOpen(false);\n }}\n />\n </div>\n </div>\n </ClickAwayListener>\n </Portal>\n </Show>\n </>\n );\n}\n\nexport default TimePicker;\n"],"names":["FADE_MS","TimePicker","props","local","rest","splitProps","value","undefined","Date","viewValue","setViewValue","createSignal","isValidTimeDate","isOpen","setIsOpen","anchorEl","clockEl","resolved","resolvePlacement","placement","floating","createFloating","middleware","buildFloatingMiddleware","createEffect","disabled","v","shouldOpen","disableClock","mounted","setMounted","shown","setShown","raf","timer","clearTimeout","requestAnimationFrame","setTimeout","onCleanup","cancelAnimationFrame","onToggle","prev","onClickAway","event","target","contains","onTimeChange","next","onChange","_$createComponent","TimePickerInput","_$mergeProps","ref","r$","_ref$","mergeRefs","setReference","el","onBlur","format","Show","when","children","Portal","mount","isServer","document","body","ClickAwayListener","_el$","_tmpl$","_el$2","firstChild","_ref$2","setFloating","_$use","_$insert","TimePickerColumns","onComplete","_$effect","_p$","_v$","floatingStyles","opacity","_v$2","clockAriaLabel","e","_$style","t","_$setAttribute"],"mappings":"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"}
|
|
@@ -1,16 +1,17 @@
|
|
|
1
|
-
import { createComponent as
|
|
1
|
+
import { createComponent as a, Portal as V, use as _, insert as d, effect as C, className as H, isServer as q, template as f, mergeProps as T, spread as F, setAttribute as w, memo as G, delegateEvents as J } from "solid-js/web";
|
|
2
2
|
import '../../../assets/styles/less/components/sheet/sheet.entry.css';/* empty css */
|
|
3
|
-
import { mergeProps as
|
|
4
|
-
import
|
|
5
|
-
import { createCssTransition as
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
3
|
+
import { mergeProps as R, splitProps as B, createSignal as M, createEffect as I, onCleanup as Q, Show as g } from "solid-js";
|
|
4
|
+
import x from "clsx";
|
|
5
|
+
import { createCssTransition as K } from "../../../primitives/createCssTransition.js";
|
|
6
|
+
import { isTopOverlayLayer as Z } from "../../../primitives/overlayLayer.js";
|
|
7
|
+
import { mergeRefs as ee } from "../../../primitives/mergeRefs.js";
|
|
8
|
+
import { ClickAwayListener as te } from "../../clickAwayListener/clickAwayListener.js";
|
|
9
|
+
import { Button as E } from "../../inputs/button/button.js";
|
|
10
|
+
import { Icon as P } from "../../base/icon/icon.js";
|
|
11
|
+
var re = /* @__PURE__ */ f("<div class=smwb-sheet__drag-handle data-testid=sheet-drag-handle role=separator tabindex=0><span class=smwb-sheet__drag-handle-bar>"), ne = /* @__PURE__ */ f("<div class=smwb-sheet__header>"), ie = /* @__PURE__ */ f("<div class=smwb-sheet__inner>"), oe = /* @__PURE__ */ f("<div>"), L = /* @__PURE__ */ f("<div data-smwb-overlay-layer>");
|
|
12
|
+
const se = (m) => m === "bottom" || m === "top";
|
|
13
|
+
function ae(m) {
|
|
14
|
+
const b = R({
|
|
14
15
|
size: "60%",
|
|
15
16
|
withSizeToggle: !0,
|
|
16
17
|
hideHeaderActions: !1,
|
|
@@ -19,9 +20,9 @@ function oe(m) {
|
|
|
19
20
|
minSize: 80,
|
|
20
21
|
resizeStep: 24,
|
|
21
22
|
resizeHandleAriaLabel: "Resize sheet"
|
|
22
|
-
}, m), [e, y] =
|
|
23
|
-
let
|
|
24
|
-
const [c, u] =
|
|
23
|
+
}, m), [e, y] = B(b, ["isOpen", "placement", "class", "mode", "size", "variant", "onClose", "withSizeToggle", "hideHeaderActions", "reverseHeaderActions", "resizable", "minSize", "maxSize", "resizeStep", "resizeHandleAriaLabel", "onResize", "style", "handleClose", "handleSizeButton", "children", "ref"]);
|
|
24
|
+
let h;
|
|
25
|
+
const [c, u] = M(null), s = () => se(e.placement), S = K({
|
|
25
26
|
in: () => e.isOpen,
|
|
26
27
|
timeout: {
|
|
27
28
|
enter: 120,
|
|
@@ -32,72 +33,72 @@ function oe(m) {
|
|
|
32
33
|
},
|
|
33
34
|
appear: !0
|
|
34
35
|
}), v = (t) => {
|
|
35
|
-
const
|
|
36
|
-
return Math.max(e.minSize, Math.min(
|
|
37
|
-
},
|
|
38
|
-
const t =
|
|
39
|
-
return t ?
|
|
40
|
-
},
|
|
41
|
-
const
|
|
42
|
-
u(
|
|
36
|
+
const l = s() ? window.innerHeight : window.innerWidth, r = e.maxSize ?? l;
|
|
37
|
+
return Math.max(e.minSize, Math.min(r, t));
|
|
38
|
+
}, p = () => {
|
|
39
|
+
const t = h?.getBoundingClientRect();
|
|
40
|
+
return t ? s() ? t.height : t.width : e.minSize;
|
|
41
|
+
}, n = (t) => {
|
|
42
|
+
const l = v(t);
|
|
43
|
+
u(l), e.onResize?.(l);
|
|
43
44
|
};
|
|
44
|
-
let
|
|
45
|
-
const
|
|
46
|
-
t.preventDefault(),
|
|
47
|
-
start:
|
|
48
|
-
size:
|
|
45
|
+
let o = null;
|
|
46
|
+
const N = (t) => {
|
|
47
|
+
t.preventDefault(), o = {
|
|
48
|
+
start: s() ? t.clientY : t.clientX,
|
|
49
|
+
size: p()
|
|
49
50
|
};
|
|
50
51
|
try {
|
|
51
52
|
t.currentTarget.setPointerCapture?.(t.pointerId);
|
|
52
53
|
} catch {
|
|
53
54
|
}
|
|
54
|
-
}, N = (t) => {
|
|
55
|
-
if (!h) return;
|
|
56
|
-
const n = (a() ? t.clientY : t.clientX) - h.start, i = e.placement === "bottom" || e.placement === "right" ? -n : n;
|
|
57
|
-
l(h.size + i);
|
|
58
|
-
}, A = (t) => {
|
|
59
|
-
h = null, t.currentTarget.hasPointerCapture?.(t.pointerId) && t.currentTarget.releasePointerCapture?.(t.pointerId);
|
|
60
55
|
}, W = (t) => {
|
|
61
|
-
|
|
62
|
-
|
|
56
|
+
if (!o) return;
|
|
57
|
+
const r = (s() ? t.clientY : t.clientX) - o.start, i = e.placement === "bottom" || e.placement === "right" ? -r : r;
|
|
58
|
+
n(o.size + i);
|
|
59
|
+
}, A = (t) => {
|
|
60
|
+
o = null, t.currentTarget.hasPointerCapture?.(t.pointerId) && t.currentTarget.releasePointerCapture?.(t.pointerId);
|
|
61
|
+
}, U = (t) => {
|
|
62
|
+
const l = c() ?? p(), r = e.maxSize ?? (s() ? window.innerHeight : window.innerWidth), i = e.placement === "bottom" ? "ArrowUp" : e.placement === "top" ? "ArrowDown" : e.placement === "left" ? "ArrowRight" : "ArrowLeft", z = e.placement === "bottom" ? "ArrowDown" : e.placement === "top" ? "ArrowUp" : e.placement === "left" ? "ArrowLeft" : "ArrowRight";
|
|
63
|
+
t.key === i ? (t.preventDefault(), n(l + e.resizeStep)) : t.key === z ? (t.preventDefault(), n(l - e.resizeStep)) : t.key === "Home" ? (t.preventDefault(), n(e.minSize)) : t.key === "End" && (t.preventDefault(), n(r));
|
|
63
64
|
};
|
|
64
|
-
|
|
65
|
+
I(() => {
|
|
65
66
|
if (!e.isOpen) {
|
|
66
67
|
u(null);
|
|
67
68
|
return;
|
|
68
69
|
}
|
|
69
|
-
|
|
70
|
+
h?.focus();
|
|
70
71
|
});
|
|
71
|
-
const
|
|
72
|
+
const X = () => !e.hideHeaderActions && (!!e.onClose || e.withSizeToggle), Y = () => {
|
|
72
73
|
const t = [];
|
|
73
|
-
return e.withSizeToggle && t.push(
|
|
74
|
+
return e.withSizeToggle && t.push(a(E, {
|
|
74
75
|
variant: "outlined",
|
|
75
76
|
size: "small",
|
|
76
77
|
get onClick() {
|
|
77
78
|
return e.handleSizeButton;
|
|
78
79
|
},
|
|
79
80
|
get children() {
|
|
80
|
-
return
|
|
81
|
+
return a(P, {
|
|
81
82
|
name: "open_in_full"
|
|
82
83
|
});
|
|
83
84
|
}
|
|
84
|
-
})), e.onClose && t.push(
|
|
85
|
+
})), e.onClose && t.push(a(E, {
|
|
85
86
|
variant: "outlined",
|
|
86
87
|
size: "small",
|
|
87
88
|
get onClick() {
|
|
88
89
|
return e.handleClose;
|
|
89
90
|
},
|
|
90
91
|
get children() {
|
|
91
|
-
return
|
|
92
|
+
return a(P, {
|
|
92
93
|
name: "close"
|
|
93
94
|
});
|
|
94
95
|
}
|
|
95
96
|
})), e.reverseHeaderActions && t.reverse(), t;
|
|
96
|
-
},
|
|
97
|
+
}, j = () => {
|
|
97
98
|
if (e.resizable && c() !== null) {
|
|
98
99
|
const t = `${c()}px`;
|
|
99
100
|
return {
|
|
100
|
-
...
|
|
101
|
+
...s() ? {
|
|
101
102
|
height: t
|
|
102
103
|
} : {
|
|
103
104
|
width: t
|
|
@@ -108,8 +109,8 @@ function oe(m) {
|
|
|
108
109
|
return {};
|
|
109
110
|
};
|
|
110
111
|
return (() => {
|
|
111
|
-
var t =
|
|
112
|
-
return typeof
|
|
112
|
+
var t = oe(), l = ee(e.ref, (r) => h = r);
|
|
113
|
+
return typeof l == "function" && _(l, t), F(t, T(y, {
|
|
113
114
|
"data-testid": "sheet",
|
|
114
115
|
tabindex: -1,
|
|
115
116
|
role: "dialog",
|
|
@@ -117,7 +118,7 @@ function oe(m) {
|
|
|
117
118
|
return e.variant === "modal" || void 0;
|
|
118
119
|
},
|
|
119
120
|
get class() {
|
|
120
|
-
return
|
|
121
|
+
return x("smwb-sheet", e.class, `smwb-sheet_${e.variant}`, `smwb-${e.placement}`, S.classes(), {
|
|
121
122
|
"smwb-expanded": e.mode === "expanded",
|
|
122
123
|
"smwb-small": e.mode === "small",
|
|
123
124
|
"smwb-sheet_resizable": e.resizable
|
|
@@ -126,52 +127,54 @@ function oe(m) {
|
|
|
126
127
|
get style() {
|
|
127
128
|
return {
|
|
128
129
|
"--sizeProp": e.size,
|
|
129
|
-
...
|
|
130
|
+
...j(),
|
|
130
131
|
...typeof e.style == "object" && e.style ? e.style : {}
|
|
131
132
|
};
|
|
132
133
|
}
|
|
133
|
-
}), !1, !0), d(t,
|
|
134
|
+
}), !1, !0), d(t, a(g, {
|
|
134
135
|
get when() {
|
|
135
136
|
return e.resizable;
|
|
136
137
|
},
|
|
137
138
|
get children() {
|
|
138
|
-
var
|
|
139
|
-
return
|
|
140
|
-
var z =
|
|
141
|
-
return z !== i.e && w(
|
|
139
|
+
var r = re();
|
|
140
|
+
return r.$$keydown = U, r.addEventListener("pointercancel", A), r.$$pointerup = A, r.$$pointermove = W, r.$$pointerdown = N, C((i) => {
|
|
141
|
+
var z = s() ? "horizontal" : "vertical", $ = e.resizeHandleAriaLabel, k = e.minSize, O = Math.round(e.maxSize ?? (s() ? window.innerHeight : window.innerWidth)), D = Math.round(c() ?? p());
|
|
142
|
+
return z !== i.e && w(r, "aria-orientation", i.e = z), $ !== i.t && w(r, "aria-label", i.t = $), k !== i.a && w(r, "aria-valuemin", i.a = k), O !== i.o && w(r, "aria-valuemax", i.o = O), D !== i.i && w(r, "aria-valuenow", i.i = D), i;
|
|
142
143
|
}, {
|
|
143
144
|
e: void 0,
|
|
144
145
|
t: void 0,
|
|
145
146
|
a: void 0,
|
|
146
147
|
o: void 0,
|
|
147
148
|
i: void 0
|
|
148
|
-
}),
|
|
149
|
+
}), r;
|
|
149
150
|
}
|
|
150
|
-
}), null), d(t,
|
|
151
|
+
}), null), d(t, a(g, {
|
|
151
152
|
get when() {
|
|
152
|
-
return
|
|
153
|
+
return X();
|
|
153
154
|
},
|
|
154
155
|
get children() {
|
|
155
|
-
var
|
|
156
|
-
return d(
|
|
156
|
+
var r = ne();
|
|
157
|
+
return d(r, Y), r;
|
|
157
158
|
}
|
|
158
|
-
}), null), d(t,
|
|
159
|
+
}), null), d(t, a(g, {
|
|
159
160
|
get when() {
|
|
160
161
|
return G(() => !!e.isOpen)() && e.mode !== "small";
|
|
161
162
|
},
|
|
162
163
|
get children() {
|
|
163
|
-
var
|
|
164
|
-
return d(
|
|
164
|
+
var r = ie();
|
|
165
|
+
return d(r, () => e.children), r;
|
|
165
166
|
}
|
|
166
167
|
}), null), t;
|
|
167
168
|
})();
|
|
168
169
|
}
|
|
169
|
-
function
|
|
170
|
-
const
|
|
170
|
+
function ve(m) {
|
|
171
|
+
const b = R({
|
|
171
172
|
variant: "default",
|
|
172
173
|
placement: "bottom",
|
|
173
174
|
closeOnEsc: !0
|
|
174
|
-
}, m), [e, y] =
|
|
175
|
+
}, m), [e, y] = B(b, ["isOpen", "onClose", "variant", "children", "placement", "disableOutsideClick", "closeOnEsc", "ref"]), [h, c] = M(null);
|
|
176
|
+
let u;
|
|
177
|
+
const s = K({
|
|
175
178
|
in: () => e.isOpen,
|
|
176
179
|
timeout: {
|
|
177
180
|
enter: 70,
|
|
@@ -182,21 +185,21 @@ function we(m) {
|
|
|
182
185
|
},
|
|
183
186
|
appear: !0
|
|
184
187
|
});
|
|
185
|
-
|
|
188
|
+
I(() => {
|
|
186
189
|
if (!e.isOpen || !e.closeOnEsc || !e.onClose) return;
|
|
187
|
-
const
|
|
188
|
-
|
|
190
|
+
const n = (o) => {
|
|
191
|
+
o.key === "Escape" && Z(u) && e.onClose?.();
|
|
189
192
|
};
|
|
190
|
-
document.addEventListener("keydown",
|
|
193
|
+
document.addEventListener("keydown", n), Q(() => document.removeEventListener("keydown", n));
|
|
191
194
|
});
|
|
192
|
-
const
|
|
193
|
-
c((
|
|
194
|
-
},
|
|
195
|
+
const S = () => {
|
|
196
|
+
c((n) => n === "expanded" ? "small" : n === null ? "expanded" : null);
|
|
197
|
+
}, v = () => {
|
|
195
198
|
e.onClose?.(), c(null);
|
|
196
|
-
},
|
|
197
|
-
ref(
|
|
198
|
-
var
|
|
199
|
-
typeof
|
|
199
|
+
}, p = () => a(ae, T(y, {
|
|
200
|
+
ref(n) {
|
|
201
|
+
var o = e.ref;
|
|
202
|
+
typeof o == "function" ? o(n) : e.ref = n;
|
|
200
203
|
},
|
|
201
204
|
get isOpen() {
|
|
202
205
|
return e.isOpen;
|
|
@@ -204,10 +207,10 @@ function we(m) {
|
|
|
204
207
|
get onClose() {
|
|
205
208
|
return e.onClose;
|
|
206
209
|
},
|
|
207
|
-
handleSizeButton:
|
|
208
|
-
handleClose:
|
|
210
|
+
handleSizeButton: S,
|
|
211
|
+
handleClose: v,
|
|
209
212
|
get mode() {
|
|
210
|
-
return
|
|
213
|
+
return h();
|
|
211
214
|
},
|
|
212
215
|
get placement() {
|
|
213
216
|
return e.placement;
|
|
@@ -219,34 +222,34 @@ function we(m) {
|
|
|
219
222
|
return e.children;
|
|
220
223
|
}
|
|
221
224
|
}));
|
|
222
|
-
return
|
|
225
|
+
return a(g, {
|
|
223
226
|
get when() {
|
|
224
|
-
return
|
|
227
|
+
return s.mounted();
|
|
225
228
|
},
|
|
226
229
|
get children() {
|
|
227
|
-
return
|
|
230
|
+
return a(V, {
|
|
228
231
|
get mount() {
|
|
229
|
-
return
|
|
232
|
+
return q ? void 0 : document.body;
|
|
230
233
|
},
|
|
231
234
|
get children() {
|
|
232
|
-
return
|
|
235
|
+
return a(g, {
|
|
233
236
|
get when() {
|
|
234
237
|
return e.variant === "default";
|
|
235
238
|
},
|
|
236
239
|
get fallback() {
|
|
237
240
|
return (() => {
|
|
238
|
-
var
|
|
239
|
-
return d(
|
|
240
|
-
onClickAway: () => !e.disableOutsideClick &&
|
|
241
|
+
var n = L();
|
|
242
|
+
return _((o) => u = o, n), d(n, a(te, {
|
|
243
|
+
onClickAway: () => !e.disableOutsideClick && v(),
|
|
241
244
|
get children() {
|
|
242
|
-
return
|
|
245
|
+
return p();
|
|
243
246
|
}
|
|
244
|
-
})),
|
|
247
|
+
})), C(() => H(n, x("smwb-sheet__overlay", "smwb-dark", `smwb-${e.placement}`, `smwb-sheet_${e.variant}`, s.classes()))), n;
|
|
245
248
|
})();
|
|
246
249
|
},
|
|
247
250
|
get children() {
|
|
248
|
-
var
|
|
249
|
-
return d(
|
|
251
|
+
var n = L();
|
|
252
|
+
return _((o) => u = o, n), d(n, p), C(() => H(n, x(e.disableOutsideClick ? "smwb-sheet__overlay" : "smwb-sheet__default", s.classes()))), n;
|
|
250
253
|
}
|
|
251
254
|
});
|
|
252
255
|
}
|
|
@@ -256,6 +259,6 @@ function we(m) {
|
|
|
256
259
|
}
|
|
257
260
|
J(["pointerdown", "pointermove", "pointerup", "keydown"]);
|
|
258
261
|
export {
|
|
259
|
-
|
|
262
|
+
ve as Sheet
|
|
260
263
|
};
|
|
261
264
|
//# sourceMappingURL=sheet.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sheet.js","sources":["../../../../src/components/layout/sheet/sheet.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, createEffect, createSignal, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Button } from \"../../inputs/button\";\nimport { Icon } from \"../../base/icon\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { createCssTransition } from \"../../../primitives/createCssTransition\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface SheetProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onResize\"> {\n placement?: \"top\" | \"bottom\" | \"right\" | \"left\";\n isOpen: boolean;\n onClose?: (() => void) | undefined;\n variant?: \"default\" | \"modal\";\n withSizeToggle?: boolean;\n /** Hide built-in header actions; onClose still handles Esc and backdrop. */\n hideHeaderActions?: boolean;\n reverseHeaderActions?: boolean;\n size?: string;\n disableOutsideClick?: boolean;\n /** Close the sheet when Escape is pressed. */\n closeOnEsc?: boolean;\n /** Allow drag-to-resize (mobile bottom-sheet style). Off by default. */\n resizable?: boolean;\n /** Minimum size in px while resizing (default 80). */\n minSize?: number;\n /** Maximum size in px while resizing (default: viewport dimension). */\n maxSize?: number;\n /** Step in px for keyboard resizing (default 24). */\n resizeStep?: number;\n /** Accessible label for the resize handle. */\n resizeHandleAriaLabel?: string;\n /** Called with the new size in px while/after resizing. */\n onResize?: (size: number) => void;\n \"aria-label\"?: string;\n ref?: Ref<HTMLDivElement>;\n}\n\ntype Mode = \"small\" | \"expanded\" | null;\n\nconst isVerticalAxis = (placement: SheetProps[\"placement\"]): boolean => placement === \"bottom\" || placement === \"top\";\n\ninterface SheetBlockProps extends ParentProps<SheetProps> {\n mode: Mode;\n handleSizeButton: () => void;\n handleClose: () => void;\n}\n\nfunction SheetBlock(props: SheetBlockProps): JSX.Element {\n const merged = mergeProps(\n {\n size: \"60%\",\n withSizeToggle: true,\n hideHeaderActions: false,\n reverseHeaderActions: false,\n resizable: false,\n minSize: 80,\n resizeStep: 24,\n resizeHandleAriaLabel: \"Resize sheet\",\n },\n props\n );\n const [local, rest] = splitProps(merged, [\n \"isOpen\",\n \"placement\",\n \"class\",\n \"mode\",\n \"size\",\n \"variant\",\n \"onClose\",\n \"withSizeToggle\",\n \"hideHeaderActions\",\n \"reverseHeaderActions\",\n \"resizable\",\n \"minSize\",\n \"maxSize\",\n \"resizeStep\",\n \"resizeHandleAriaLabel\",\n \"onResize\",\n \"style\",\n \"handleClose\",\n \"handleSizeButton\",\n \"children\",\n \"ref\",\n ]);\n\n let rootEl: HTMLDivElement | undefined;\n const [dragSize, setDragSize] = createSignal<number | null>(null);\n const vertical = (): boolean => isVerticalAxis(local.placement);\n\n const inner = createCssTransition({\n in: () => local.isOpen,\n timeout: { enter: 120, exit: 120 },\n classNames: { enterDone: \"smwb-sheet_entered\" },\n appear: true,\n });\n\n const clamp = (px: number): number => {\n const viewport = vertical() ? window.innerHeight : window.innerWidth;\n const max = local.maxSize ?? viewport;\n return Math.max(local.minSize, Math.min(max, px));\n };\n\n const currentSizePx = (): number => {\n const rect = rootEl?.getBoundingClientRect();\n if (!rect) return local.minSize;\n return vertical() ? rect.height : rect.width;\n };\n\n const applySize = (px: number): void => {\n const next = clamp(px);\n setDragSize(next);\n local.onResize?.(next);\n };\n\n let drag: { start: number; size: number } | null = null;\n\n const onPointerDown = (event: PointerEvent & { currentTarget: HTMLDivElement }): void => {\n event.preventDefault();\n drag = { start: vertical() ? event.clientY : event.clientX, size: currentSizePx() };\n try {\n event.currentTarget.setPointerCapture?.(event.pointerId);\n } catch {\n /* best-effort */\n }\n };\n\n const onPointerMove = (event: PointerEvent): void => {\n if (!drag) return;\n const pos = vertical() ? event.clientY : event.clientX;\n const delta = pos - drag.start;\n const grow = local.placement === \"bottom\" || local.placement === \"right\" ? -delta : delta;\n applySize(drag.size + grow);\n };\n\n const endDrag = (event: PointerEvent & { currentTarget: HTMLDivElement }): void => {\n drag = null;\n if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {\n event.currentTarget.releasePointerCapture?.(event.pointerId);\n }\n };\n\n const onHandleKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (event) => {\n const base = dragSize() ?? currentSizePx();\n const max = local.maxSize ?? (vertical() ? window.innerHeight : window.innerWidth);\n const incKey =\n local.placement === \"bottom\" ? \"ArrowUp\" : local.placement === \"top\" ? \"ArrowDown\" : local.placement === \"left\" ? \"ArrowRight\" : \"ArrowLeft\";\n const decKey =\n local.placement === \"bottom\" ? \"ArrowDown\" : local.placement === \"top\" ? \"ArrowUp\" : local.placement === \"left\" ? \"ArrowLeft\" : \"ArrowRight\";\n if (event.key === incKey) {\n event.preventDefault();\n applySize(base + local.resizeStep);\n } else if (event.key === decKey) {\n event.preventDefault();\n applySize(base - local.resizeStep);\n } else if (event.key === \"Home\") {\n event.preventDefault();\n applySize(local.minSize);\n } else if (event.key === \"End\") {\n event.preventDefault();\n applySize(max);\n }\n };\n\n createEffect(() => {\n if (!local.isOpen) {\n setDragSize(null);\n return;\n }\n rootEl?.focus();\n });\n\n const showActions = (): boolean => !local.hideHeaderActions && (!!local.onClose || local.withSizeToggle);\n const actionNodes = (): JSX.Element[] => {\n const nodes: JSX.Element[] = [];\n if (local.withSizeToggle) {\n nodes.push(\n <Button variant=\"outlined\" size=\"small\" onClick={local.handleSizeButton}>\n <Icon name=\"open_in_full\" />\n </Button>\n );\n }\n if (local.onClose) {\n nodes.push(\n <Button variant=\"outlined\" size=\"small\" onClick={local.handleClose}>\n <Icon name=\"close\" />\n </Button>\n );\n }\n if (local.reverseHeaderActions) nodes.reverse();\n return nodes;\n };\n\n const sizeStyle = (): JSX.CSSProperties => {\n if (local.resizable && dragSize() !== null) {\n const px = `${dragSize()}px`;\n return { ...(vertical() ? { height: px } : { width: px }), transition: \"none\" };\n }\n return {};\n };\n\n return (\n <div\n {...rest}\n ref={mergeRefs(local.ref, (el) => (rootEl = el as HTMLDivElement))}\n data-testid=\"sheet\"\n tabindex={-1}\n role=\"dialog\"\n aria-modal={local.variant === \"modal\" || undefined}\n class={cn(\"smwb-sheet\", local.class, `smwb-sheet_${local.variant}`, `smwb-${local.placement}`, inner.classes(), {\n \"smwb-expanded\": local.mode === \"expanded\",\n \"smwb-small\": local.mode === \"small\",\n \"smwb-sheet_resizable\": local.resizable,\n })}\n style={{\n \"--sizeProp\": local.size,\n ...sizeStyle(),\n ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n }}\n >\n <Show when={local.resizable}>\n <div\n class=\"smwb-sheet__drag-handle\"\n data-testid=\"sheet-drag-handle\"\n role=\"separator\"\n tabindex={0}\n aria-orientation={vertical() ? \"horizontal\" : \"vertical\"}\n aria-label={local.resizeHandleAriaLabel}\n aria-valuemin={local.minSize}\n aria-valuemax={Math.round(local.maxSize ?? (vertical() ? window.innerHeight : window.innerWidth))}\n aria-valuenow={Math.round(dragSize() ?? currentSizePx())}\n onPointerDown={onPointerDown}\n onPointerMove={onPointerMove}\n onPointerUp={endDrag}\n onPointerCancel={endDrag}\n onKeyDown={onHandleKeyDown}\n >\n <span class=\"smwb-sheet__drag-handle-bar\" />\n </div>\n </Show>\n <Show when={showActions()}>\n <div class=\"smwb-sheet__header\">{actionNodes()}</div>\n </Show>\n <Show when={local.isOpen && local.mode !== \"small\"}>\n <div class=\"smwb-sheet__inner\">{local.children}</div>\n </Show>\n </div>\n );\n}\n\nexport function Sheet(props: ParentProps<SheetProps>): JSX.Element {\n const merged = mergeProps({ variant: \"default\" as const, placement: \"bottom\" as const, closeOnEsc: true }, props);\n const [local, rest] = splitProps(merged, [\n \"isOpen\",\n \"onClose\",\n \"variant\",\n \"children\",\n \"placement\",\n \"disableOutsideClick\",\n \"closeOnEsc\",\n \"ref\",\n ]);\n\n const [mode, setMode] = createSignal<Mode>(null);\n\n const outer = createCssTransition({\n in: () => local.isOpen,\n timeout: { enter: 70, exit: 70 },\n classNames: { enterDone: \"smwb-entered\" },\n appear: true,\n });\n\n createEffect(() => {\n if (!local.isOpen || !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 const handleSizeButton = (): void => {\n setMode((prev) => (prev === \"expanded\" ? \"small\" : prev === null ? \"expanded\" : null));\n };\n const handleClose = (): void => {\n local.onClose?.();\n setMode(null);\n };\n\n const block = (): JSX.Element => (\n <SheetBlock\n {...rest}\n ref={local.ref}\n isOpen={local.isOpen}\n onClose={local.onClose}\n handleSizeButton={handleSizeButton}\n handleClose={handleClose}\n mode={mode()}\n placement={local.placement}\n variant={local.variant}\n >\n {local.children}\n </SheetBlock>\n );\n\n return (\n <Show when={outer.mounted()}>\n <Portal mount={(isServer ? undefined : document.body) as Node}>\n <Show\n when={local.variant === \"default\"}\n fallback={\n <div class={cn(\"smwb-sheet__overlay\", \"smwb-dark\", `smwb-${local.placement}`, `smwb-sheet_${local.variant}`, outer.classes())}>\n <ClickAwayListener onClickAway={() => !local.disableOutsideClick && handleClose()}>\n {block()}\n </ClickAwayListener>\n </div>\n }\n >\n <div class={cn(local.disableOutsideClick ? \"smwb-sheet__overlay\" : \"smwb-sheet__default\", outer.classes())}>\n {block()}\n </div>\n </Show>\n </Portal>\n </Show>\n );\n}\n\nexport default Sheet;\n"],"names":["isVerticalAxis","placement","SheetBlock","props","merged","mergeProps","size","withSizeToggle","hideHeaderActions","reverseHeaderActions","resizable","minSize","resizeStep","resizeHandleAriaLabel","local","rest","splitProps","rootEl","dragSize","setDragSize","createSignal","vertical","inner","createCssTransition","in","isOpen","timeout","enter","exit","classNames","enterDone","appear","clamp","px","viewport","window","innerHeight","innerWidth","max","maxSize","Math","min","currentSizePx","rect","getBoundingClientRect","height","width","applySize","next","onResize","drag","onPointerDown","event","preventDefault","start","clientY","clientX","currentTarget","setPointerCapture","pointerId","onPointerMove","delta","grow","endDrag","hasPointerCapture","releasePointerCapture","onHandleKeyDown","base","incKey","decKey","key","createEffect","focus","showActions","onClose","actionNodes","nodes","push","_$createComponent","Button","variant","onClick","handleSizeButton","children","Icon","name","handleClose","reverse","sizeStyle","transition","_el$","_tmpl$4","_ref$","mergeRefs","ref","el","_$use","_$spread","_$mergeProps","undefined","cn","class","classes","mode","style","_$insert","Show","when","_el$2","_tmpl$","$$keydown","addEventListener","$$pointerup","$$pointermove","$$pointerdown","_$effect","_p$","_v$","_v$2","_v$3","_v$4","round","_v$5","e","_$setAttribute","t","a","o","i","_el$3","_tmpl$2","_$memo","_el$4","_tmpl$3","Sheet","closeOnEsc","setMode","outer","onKeyDown","document","onCleanup","removeEventListener","prev","block","r$","_ref$2","mounted","Portal","mount","isServer","body","fallback","_el$6","ClickAwayListener","onClickAway","disableOutsideClick","_$className","_el$5","_$delegateEvents"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sheet.js","sources":["../../../../src/components/layout/sheet/sheet.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, createEffect, createSignal, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Button } from \"../../inputs/button\";\nimport { Icon } from \"../../base/icon\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { createCssTransition } from \"../../../primitives/createCssTransition\";\nimport { isTopOverlayLayer } from \"../../../primitives/overlayLayer\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface SheetProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onResize\"> {\n placement?: \"top\" | \"bottom\" | \"right\" | \"left\";\n isOpen: boolean;\n onClose?: (() => void) | undefined;\n variant?: \"default\" | \"modal\";\n withSizeToggle?: boolean;\n /** Hide built-in header actions; onClose still handles Esc and backdrop. */\n hideHeaderActions?: boolean;\n reverseHeaderActions?: boolean;\n size?: string;\n disableOutsideClick?: boolean;\n /** Close the sheet when Escape is pressed. */\n closeOnEsc?: boolean;\n /** Allow drag-to-resize (mobile bottom-sheet style). Off by default. */\n resizable?: boolean;\n /** Minimum size in px while resizing (default 80). */\n minSize?: number;\n /** Maximum size in px while resizing (default: viewport dimension). */\n maxSize?: number;\n /** Step in px for keyboard resizing (default 24). */\n resizeStep?: number;\n /** Accessible label for the resize handle. */\n resizeHandleAriaLabel?: string;\n /** Called with the new size in px while/after resizing. */\n onResize?: (size: number) => void;\n \"aria-label\"?: string;\n ref?: Ref<HTMLDivElement>;\n}\n\ntype Mode = \"small\" | \"expanded\" | null;\n\nconst isVerticalAxis = (placement: SheetProps[\"placement\"]): boolean => placement === \"bottom\" || placement === \"top\";\n\ninterface SheetBlockProps extends ParentProps<SheetProps> {\n mode: Mode;\n handleSizeButton: () => void;\n handleClose: () => void;\n}\n\nfunction SheetBlock(props: SheetBlockProps): JSX.Element {\n const merged = mergeProps(\n {\n size: \"60%\",\n withSizeToggle: true,\n hideHeaderActions: false,\n reverseHeaderActions: false,\n resizable: false,\n minSize: 80,\n resizeStep: 24,\n resizeHandleAriaLabel: \"Resize sheet\",\n },\n props\n );\n const [local, rest] = splitProps(merged, [\n \"isOpen\",\n \"placement\",\n \"class\",\n \"mode\",\n \"size\",\n \"variant\",\n \"onClose\",\n \"withSizeToggle\",\n \"hideHeaderActions\",\n \"reverseHeaderActions\",\n \"resizable\",\n \"minSize\",\n \"maxSize\",\n \"resizeStep\",\n \"resizeHandleAriaLabel\",\n \"onResize\",\n \"style\",\n \"handleClose\",\n \"handleSizeButton\",\n \"children\",\n \"ref\",\n ]);\n\n let rootEl: HTMLDivElement | undefined;\n const [dragSize, setDragSize] = createSignal<number | null>(null);\n const vertical = (): boolean => isVerticalAxis(local.placement);\n\n const inner = createCssTransition({\n in: () => local.isOpen,\n timeout: { enter: 120, exit: 120 },\n classNames: { enterDone: \"smwb-sheet_entered\" },\n appear: true,\n });\n\n const clamp = (px: number): number => {\n const viewport = vertical() ? window.innerHeight : window.innerWidth;\n const max = local.maxSize ?? viewport;\n return Math.max(local.minSize, Math.min(max, px));\n };\n\n const currentSizePx = (): number => {\n const rect = rootEl?.getBoundingClientRect();\n if (!rect) return local.minSize;\n return vertical() ? rect.height : rect.width;\n };\n\n const applySize = (px: number): void => {\n const next = clamp(px);\n setDragSize(next);\n local.onResize?.(next);\n };\n\n let drag: { start: number; size: number } | null = null;\n\n const onPointerDown = (event: PointerEvent & { currentTarget: HTMLDivElement }): void => {\n event.preventDefault();\n drag = { start: vertical() ? event.clientY : event.clientX, size: currentSizePx() };\n try {\n event.currentTarget.setPointerCapture?.(event.pointerId);\n } catch {\n /* best-effort */\n }\n };\n\n const onPointerMove = (event: PointerEvent): void => {\n if (!drag) return;\n const pos = vertical() ? event.clientY : event.clientX;\n const delta = pos - drag.start;\n const grow = local.placement === \"bottom\" || local.placement === \"right\" ? -delta : delta;\n applySize(drag.size + grow);\n };\n\n const endDrag = (event: PointerEvent & { currentTarget: HTMLDivElement }): void => {\n drag = null;\n if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {\n event.currentTarget.releasePointerCapture?.(event.pointerId);\n }\n };\n\n const onHandleKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (event) => {\n const base = dragSize() ?? currentSizePx();\n const max = local.maxSize ?? (vertical() ? window.innerHeight : window.innerWidth);\n const incKey =\n local.placement === \"bottom\" ? \"ArrowUp\" : local.placement === \"top\" ? \"ArrowDown\" : local.placement === \"left\" ? \"ArrowRight\" : \"ArrowLeft\";\n const decKey =\n local.placement === \"bottom\" ? \"ArrowDown\" : local.placement === \"top\" ? \"ArrowUp\" : local.placement === \"left\" ? \"ArrowLeft\" : \"ArrowRight\";\n if (event.key === incKey) {\n event.preventDefault();\n applySize(base + local.resizeStep);\n } else if (event.key === decKey) {\n event.preventDefault();\n applySize(base - local.resizeStep);\n } else if (event.key === \"Home\") {\n event.preventDefault();\n applySize(local.minSize);\n } else if (event.key === \"End\") {\n event.preventDefault();\n applySize(max);\n }\n };\n\n createEffect(() => {\n if (!local.isOpen) {\n setDragSize(null);\n return;\n }\n rootEl?.focus();\n });\n\n const showActions = (): boolean => !local.hideHeaderActions && (!!local.onClose || local.withSizeToggle);\n const actionNodes = (): JSX.Element[] => {\n const nodes: JSX.Element[] = [];\n if (local.withSizeToggle) {\n nodes.push(\n <Button variant=\"outlined\" size=\"small\" onClick={local.handleSizeButton}>\n <Icon name=\"open_in_full\" />\n </Button>\n );\n }\n if (local.onClose) {\n nodes.push(\n <Button variant=\"outlined\" size=\"small\" onClick={local.handleClose}>\n <Icon name=\"close\" />\n </Button>\n );\n }\n if (local.reverseHeaderActions) nodes.reverse();\n return nodes;\n };\n\n const sizeStyle = (): JSX.CSSProperties => {\n if (local.resizable && dragSize() !== null) {\n const px = `${dragSize()}px`;\n return { ...(vertical() ? { height: px } : { width: px }), transition: \"none\" };\n }\n return {};\n };\n\n return (\n <div\n {...rest}\n ref={mergeRefs(local.ref, (el) => (rootEl = el as HTMLDivElement))}\n data-testid=\"sheet\"\n tabindex={-1}\n role=\"dialog\"\n aria-modal={local.variant === \"modal\" || undefined}\n class={cn(\"smwb-sheet\", local.class, `smwb-sheet_${local.variant}`, `smwb-${local.placement}`, inner.classes(), {\n \"smwb-expanded\": local.mode === \"expanded\",\n \"smwb-small\": local.mode === \"small\",\n \"smwb-sheet_resizable\": local.resizable,\n })}\n style={{\n \"--sizeProp\": local.size,\n ...sizeStyle(),\n ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n }}\n >\n <Show when={local.resizable}>\n <div\n class=\"smwb-sheet__drag-handle\"\n data-testid=\"sheet-drag-handle\"\n role=\"separator\"\n tabindex={0}\n aria-orientation={vertical() ? \"horizontal\" : \"vertical\"}\n aria-label={local.resizeHandleAriaLabel}\n aria-valuemin={local.minSize}\n aria-valuemax={Math.round(local.maxSize ?? (vertical() ? window.innerHeight : window.innerWidth))}\n aria-valuenow={Math.round(dragSize() ?? currentSizePx())}\n onPointerDown={onPointerDown}\n onPointerMove={onPointerMove}\n onPointerUp={endDrag}\n onPointerCancel={endDrag}\n onKeyDown={onHandleKeyDown}\n >\n <span class=\"smwb-sheet__drag-handle-bar\" />\n </div>\n </Show>\n <Show when={showActions()}>\n <div class=\"smwb-sheet__header\">{actionNodes()}</div>\n </Show>\n <Show when={local.isOpen && local.mode !== \"small\"}>\n <div class=\"smwb-sheet__inner\">{local.children}</div>\n </Show>\n </div>\n );\n}\n\nexport function Sheet(props: ParentProps<SheetProps>): JSX.Element {\n const merged = mergeProps({ variant: \"default\" as const, placement: \"bottom\" as const, closeOnEsc: true }, props);\n const [local, rest] = splitProps(merged, [\n \"isOpen\",\n \"onClose\",\n \"variant\",\n \"children\",\n \"placement\",\n \"disableOutsideClick\",\n \"closeOnEsc\",\n \"ref\",\n ]);\n\n const [mode, setMode] = createSignal<Mode>(null);\n let wrapperEl: HTMLDivElement | undefined;\n\n const outer = createCssTransition({\n in: () => local.isOpen,\n timeout: { enter: 70, exit: 70 },\n classNames: { enterDone: \"smwb-entered\" },\n appear: true,\n });\n\n createEffect(() => {\n if (!local.isOpen || !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(wrapperEl)) local.onClose?.();\n };\n document.addEventListener(\"keydown\", onKeyDown);\n onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n });\n\n const handleSizeButton = (): void => {\n setMode((prev) => (prev === \"expanded\" ? \"small\" : prev === null ? \"expanded\" : null));\n };\n const handleClose = (): void => {\n local.onClose?.();\n setMode(null);\n };\n\n const block = (): JSX.Element => (\n <SheetBlock\n {...rest}\n ref={local.ref}\n isOpen={local.isOpen}\n onClose={local.onClose}\n handleSizeButton={handleSizeButton}\n handleClose={handleClose}\n mode={mode()}\n placement={local.placement}\n variant={local.variant}\n >\n {local.children}\n </SheetBlock>\n );\n\n return (\n <Show when={outer.mounted()}>\n <Portal mount={(isServer ? undefined : document.body) as Node}>\n <Show\n when={local.variant === \"default\"}\n fallback={\n <div\n ref={(el) => (wrapperEl = el)}\n data-smwb-overlay-layer\n class={cn(\"smwb-sheet__overlay\", \"smwb-dark\", `smwb-${local.placement}`, `smwb-sheet_${local.variant}`, outer.classes())}\n >\n <ClickAwayListener onClickAway={() => !local.disableOutsideClick && handleClose()}>\n {block()}\n </ClickAwayListener>\n </div>\n }\n >\n <div\n ref={(el) => (wrapperEl = el)}\n data-smwb-overlay-layer\n class={cn(local.disableOutsideClick ? \"smwb-sheet__overlay\" : \"smwb-sheet__default\", outer.classes())}\n >\n {block()}\n </div>\n </Show>\n </Portal>\n </Show>\n );\n}\n\nexport default Sheet;\n"],"names":["isVerticalAxis","placement","SheetBlock","props","merged","mergeProps","size","withSizeToggle","hideHeaderActions","reverseHeaderActions","resizable","minSize","resizeStep","resizeHandleAriaLabel","local","rest","splitProps","rootEl","dragSize","setDragSize","createSignal","vertical","inner","createCssTransition","in","isOpen","timeout","enter","exit","classNames","enterDone","appear","clamp","px","viewport","window","innerHeight","innerWidth","max","maxSize","Math","min","currentSizePx","rect","getBoundingClientRect","height","width","applySize","next","onResize","drag","onPointerDown","event","preventDefault","start","clientY","clientX","currentTarget","setPointerCapture","pointerId","onPointerMove","delta","grow","endDrag","hasPointerCapture","releasePointerCapture","onHandleKeyDown","base","incKey","decKey","key","createEffect","focus","showActions","onClose","actionNodes","nodes","push","_$createComponent","Button","variant","onClick","handleSizeButton","children","Icon","name","handleClose","reverse","sizeStyle","transition","_el$","_tmpl$4","_ref$","mergeRefs","ref","el","_$use","_$spread","_$mergeProps","undefined","cn","class","classes","mode","style","_$insert","Show","when","_el$2","_tmpl$","$$keydown","addEventListener","$$pointerup","$$pointermove","$$pointerdown","_$effect","_p$","_v$","_v$2","_v$3","_v$4","round","_v$5","e","_$setAttribute","t","a","o","i","_el$3","_tmpl$2","_$memo","_el$4","_tmpl$3","Sheet","closeOnEsc","setMode","wrapperEl","outer","onKeyDown","isTopOverlayLayer","document","onCleanup","removeEventListener","prev","block","r$","_ref$2","mounted","Portal","mount","isServer","body","fallback","_el$6","_tmpl$5","ClickAwayListener","onClickAway","disableOutsideClick","_$className","_el$5","_$delegateEvents"],"mappings":"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"}
|