@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 +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":"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
|
|
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,15 +1,16 @@
|
|
|
1
|
-
import { createComponent as
|
|
2
|
-
import { mergeProps as
|
|
3
|
-
import
|
|
4
|
-
import { createCssTransition as
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
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
|
+
import { mergeProps as R, splitProps as B, createSignal as M, createEffect as I, onCleanup as Q, Show as g } from "solid-js";
|
|
3
|
+
import x from "clsx";
|
|
4
|
+
import { createCssTransition as K } from "../../../primitives/createCssTransition.js";
|
|
5
|
+
import { isTopOverlayLayer as Z } from "../../../primitives/overlayLayer.js";
|
|
6
|
+
import { mergeRefs as ee } from "../../../primitives/mergeRefs.js";
|
|
7
|
+
import { ClickAwayListener as te } from "../../clickAwayListener/clickAwayListener.js";
|
|
8
|
+
import { Button as E } from "../../inputs/button/button.js";
|
|
9
|
+
import { Icon as P } from "../../base/icon/icon.js";
|
|
10
|
+
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>");
|
|
11
|
+
const se = (m) => m === "bottom" || m === "top";
|
|
12
|
+
function ae(m) {
|
|
13
|
+
const b = R({
|
|
13
14
|
size: "60%",
|
|
14
15
|
withSizeToggle: !0,
|
|
15
16
|
hideHeaderActions: !1,
|
|
@@ -18,9 +19,9 @@ function oe(m) {
|
|
|
18
19
|
minSize: 80,
|
|
19
20
|
resizeStep: 24,
|
|
20
21
|
resizeHandleAriaLabel: "Resize sheet"
|
|
21
|
-
}, m), [e, y] =
|
|
22
|
-
let
|
|
23
|
-
const [c, u] =
|
|
22
|
+
}, 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"]);
|
|
23
|
+
let h;
|
|
24
|
+
const [c, u] = M(null), s = () => se(e.placement), S = K({
|
|
24
25
|
in: () => e.isOpen,
|
|
25
26
|
timeout: {
|
|
26
27
|
enter: 120,
|
|
@@ -31,72 +32,72 @@ function oe(m) {
|
|
|
31
32
|
},
|
|
32
33
|
appear: !0
|
|
33
34
|
}), v = (t) => {
|
|
34
|
-
const
|
|
35
|
-
return Math.max(e.minSize, Math.min(
|
|
36
|
-
},
|
|
37
|
-
const t =
|
|
38
|
-
return t ?
|
|
39
|
-
},
|
|
40
|
-
const
|
|
41
|
-
u(
|
|
35
|
+
const l = s() ? window.innerHeight : window.innerWidth, r = e.maxSize ?? l;
|
|
36
|
+
return Math.max(e.minSize, Math.min(r, t));
|
|
37
|
+
}, p = () => {
|
|
38
|
+
const t = h?.getBoundingClientRect();
|
|
39
|
+
return t ? s() ? t.height : t.width : e.minSize;
|
|
40
|
+
}, n = (t) => {
|
|
41
|
+
const l = v(t);
|
|
42
|
+
u(l), e.onResize?.(l);
|
|
42
43
|
};
|
|
43
|
-
let
|
|
44
|
-
const
|
|
45
|
-
t.preventDefault(),
|
|
46
|
-
start:
|
|
47
|
-
size:
|
|
44
|
+
let o = null;
|
|
45
|
+
const N = (t) => {
|
|
46
|
+
t.preventDefault(), o = {
|
|
47
|
+
start: s() ? t.clientY : t.clientX,
|
|
48
|
+
size: p()
|
|
48
49
|
};
|
|
49
50
|
try {
|
|
50
51
|
t.currentTarget.setPointerCapture?.(t.pointerId);
|
|
51
52
|
} catch {
|
|
52
53
|
}
|
|
53
|
-
}, N = (t) => {
|
|
54
|
-
if (!h) return;
|
|
55
|
-
const n = (a() ? t.clientY : t.clientX) - h.start, i = e.placement === "bottom" || e.placement === "right" ? -n : n;
|
|
56
|
-
l(h.size + i);
|
|
57
|
-
}, A = (t) => {
|
|
58
|
-
h = null, t.currentTarget.hasPointerCapture?.(t.pointerId) && t.currentTarget.releasePointerCapture?.(t.pointerId);
|
|
59
54
|
}, W = (t) => {
|
|
60
|
-
|
|
61
|
-
|
|
55
|
+
if (!o) return;
|
|
56
|
+
const r = (s() ? t.clientY : t.clientX) - o.start, i = e.placement === "bottom" || e.placement === "right" ? -r : r;
|
|
57
|
+
n(o.size + i);
|
|
58
|
+
}, A = (t) => {
|
|
59
|
+
o = null, t.currentTarget.hasPointerCapture?.(t.pointerId) && t.currentTarget.releasePointerCapture?.(t.pointerId);
|
|
60
|
+
}, U = (t) => {
|
|
61
|
+
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";
|
|
62
|
+
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));
|
|
62
63
|
};
|
|
63
|
-
|
|
64
|
+
I(() => {
|
|
64
65
|
if (!e.isOpen) {
|
|
65
66
|
u(null);
|
|
66
67
|
return;
|
|
67
68
|
}
|
|
68
|
-
|
|
69
|
+
h?.focus();
|
|
69
70
|
});
|
|
70
|
-
const
|
|
71
|
+
const X = () => !e.hideHeaderActions && (!!e.onClose || e.withSizeToggle), Y = () => {
|
|
71
72
|
const t = [];
|
|
72
|
-
return e.withSizeToggle && t.push(
|
|
73
|
+
return e.withSizeToggle && t.push(a(E, {
|
|
73
74
|
variant: "outlined",
|
|
74
75
|
size: "small",
|
|
75
76
|
get onClick() {
|
|
76
77
|
return e.handleSizeButton;
|
|
77
78
|
},
|
|
78
79
|
get children() {
|
|
79
|
-
return
|
|
80
|
+
return a(P, {
|
|
80
81
|
name: "open_in_full"
|
|
81
82
|
});
|
|
82
83
|
}
|
|
83
|
-
})), e.onClose && t.push(
|
|
84
|
+
})), e.onClose && t.push(a(E, {
|
|
84
85
|
variant: "outlined",
|
|
85
86
|
size: "small",
|
|
86
87
|
get onClick() {
|
|
87
88
|
return e.handleClose;
|
|
88
89
|
},
|
|
89
90
|
get children() {
|
|
90
|
-
return
|
|
91
|
+
return a(P, {
|
|
91
92
|
name: "close"
|
|
92
93
|
});
|
|
93
94
|
}
|
|
94
95
|
})), e.reverseHeaderActions && t.reverse(), t;
|
|
95
|
-
},
|
|
96
|
+
}, j = () => {
|
|
96
97
|
if (e.resizable && c() !== null) {
|
|
97
98
|
const t = `${c()}px`;
|
|
98
99
|
return {
|
|
99
|
-
...
|
|
100
|
+
...s() ? {
|
|
100
101
|
height: t
|
|
101
102
|
} : {
|
|
102
103
|
width: t
|
|
@@ -107,8 +108,8 @@ function oe(m) {
|
|
|
107
108
|
return {};
|
|
108
109
|
};
|
|
109
110
|
return (() => {
|
|
110
|
-
var t =
|
|
111
|
-
return typeof
|
|
111
|
+
var t = oe(), l = ee(e.ref, (r) => h = r);
|
|
112
|
+
return typeof l == "function" && _(l, t), F(t, T(y, {
|
|
112
113
|
"data-testid": "sheet",
|
|
113
114
|
tabindex: -1,
|
|
114
115
|
role: "dialog",
|
|
@@ -116,7 +117,7 @@ function oe(m) {
|
|
|
116
117
|
return e.variant === "modal" || void 0;
|
|
117
118
|
},
|
|
118
119
|
get class() {
|
|
119
|
-
return
|
|
120
|
+
return x("smwb-sheet", e.class, `smwb-sheet_${e.variant}`, `smwb-${e.placement}`, S.classes(), {
|
|
120
121
|
"smwb-expanded": e.mode === "expanded",
|
|
121
122
|
"smwb-small": e.mode === "small",
|
|
122
123
|
"smwb-sheet_resizable": e.resizable
|
|
@@ -125,52 +126,54 @@ function oe(m) {
|
|
|
125
126
|
get style() {
|
|
126
127
|
return {
|
|
127
128
|
"--sizeProp": e.size,
|
|
128
|
-
...
|
|
129
|
+
...j(),
|
|
129
130
|
...typeof e.style == "object" && e.style ? e.style : {}
|
|
130
131
|
};
|
|
131
132
|
}
|
|
132
|
-
}), !1, !0), d(t,
|
|
133
|
+
}), !1, !0), d(t, a(g, {
|
|
133
134
|
get when() {
|
|
134
135
|
return e.resizable;
|
|
135
136
|
},
|
|
136
137
|
get children() {
|
|
137
|
-
var
|
|
138
|
-
return
|
|
139
|
-
var z =
|
|
140
|
-
return z !== i.e && w(
|
|
138
|
+
var r = re();
|
|
139
|
+
return r.$$keydown = U, r.addEventListener("pointercancel", A), r.$$pointerup = A, r.$$pointermove = W, r.$$pointerdown = N, C((i) => {
|
|
140
|
+
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());
|
|
141
|
+
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;
|
|
141
142
|
}, {
|
|
142
143
|
e: void 0,
|
|
143
144
|
t: void 0,
|
|
144
145
|
a: void 0,
|
|
145
146
|
o: void 0,
|
|
146
147
|
i: void 0
|
|
147
|
-
}),
|
|
148
|
+
}), r;
|
|
148
149
|
}
|
|
149
|
-
}), null), d(t,
|
|
150
|
+
}), null), d(t, a(g, {
|
|
150
151
|
get when() {
|
|
151
|
-
return
|
|
152
|
+
return X();
|
|
152
153
|
},
|
|
153
154
|
get children() {
|
|
154
|
-
var
|
|
155
|
-
return d(
|
|
155
|
+
var r = ne();
|
|
156
|
+
return d(r, Y), r;
|
|
156
157
|
}
|
|
157
|
-
}), null), d(t,
|
|
158
|
+
}), null), d(t, a(g, {
|
|
158
159
|
get when() {
|
|
159
160
|
return G(() => !!e.isOpen)() && e.mode !== "small";
|
|
160
161
|
},
|
|
161
162
|
get children() {
|
|
162
|
-
var
|
|
163
|
-
return d(
|
|
163
|
+
var r = ie();
|
|
164
|
+
return d(r, () => e.children), r;
|
|
164
165
|
}
|
|
165
166
|
}), null), t;
|
|
166
167
|
})();
|
|
167
168
|
}
|
|
168
|
-
function
|
|
169
|
-
const
|
|
169
|
+
function fe(m) {
|
|
170
|
+
const b = R({
|
|
170
171
|
variant: "default",
|
|
171
172
|
placement: "bottom",
|
|
172
173
|
closeOnEsc: !0
|
|
173
|
-
}, m), [e, y] =
|
|
174
|
+
}, m), [e, y] = B(b, ["isOpen", "onClose", "variant", "children", "placement", "disableOutsideClick", "closeOnEsc", "ref"]), [h, c] = M(null);
|
|
175
|
+
let u;
|
|
176
|
+
const s = K({
|
|
174
177
|
in: () => e.isOpen,
|
|
175
178
|
timeout: {
|
|
176
179
|
enter: 70,
|
|
@@ -181,21 +184,21 @@ function he(m) {
|
|
|
181
184
|
},
|
|
182
185
|
appear: !0
|
|
183
186
|
});
|
|
184
|
-
|
|
187
|
+
I(() => {
|
|
185
188
|
if (!e.isOpen || !e.closeOnEsc || !e.onClose) return;
|
|
186
|
-
const
|
|
187
|
-
|
|
189
|
+
const n = (o) => {
|
|
190
|
+
o.key === "Escape" && Z(u) && e.onClose?.();
|
|
188
191
|
};
|
|
189
|
-
document.addEventListener("keydown",
|
|
192
|
+
document.addEventListener("keydown", n), Q(() => document.removeEventListener("keydown", n));
|
|
190
193
|
});
|
|
191
|
-
const
|
|
192
|
-
c((
|
|
193
|
-
},
|
|
194
|
+
const S = () => {
|
|
195
|
+
c((n) => n === "expanded" ? "small" : n === null ? "expanded" : null);
|
|
196
|
+
}, v = () => {
|
|
194
197
|
e.onClose?.(), c(null);
|
|
195
|
-
},
|
|
196
|
-
ref(
|
|
197
|
-
var
|
|
198
|
-
typeof
|
|
198
|
+
}, p = () => a(ae, T(y, {
|
|
199
|
+
ref(n) {
|
|
200
|
+
var o = e.ref;
|
|
201
|
+
typeof o == "function" ? o(n) : e.ref = n;
|
|
199
202
|
},
|
|
200
203
|
get isOpen() {
|
|
201
204
|
return e.isOpen;
|
|
@@ -203,10 +206,10 @@ function he(m) {
|
|
|
203
206
|
get onClose() {
|
|
204
207
|
return e.onClose;
|
|
205
208
|
},
|
|
206
|
-
handleSizeButton:
|
|
207
|
-
handleClose:
|
|
209
|
+
handleSizeButton: S,
|
|
210
|
+
handleClose: v,
|
|
208
211
|
get mode() {
|
|
209
|
-
return
|
|
212
|
+
return h();
|
|
210
213
|
},
|
|
211
214
|
get placement() {
|
|
212
215
|
return e.placement;
|
|
@@ -218,34 +221,34 @@ function he(m) {
|
|
|
218
221
|
return e.children;
|
|
219
222
|
}
|
|
220
223
|
}));
|
|
221
|
-
return
|
|
224
|
+
return a(g, {
|
|
222
225
|
get when() {
|
|
223
|
-
return
|
|
226
|
+
return s.mounted();
|
|
224
227
|
},
|
|
225
228
|
get children() {
|
|
226
|
-
return
|
|
229
|
+
return a(V, {
|
|
227
230
|
get mount() {
|
|
228
|
-
return
|
|
231
|
+
return q ? void 0 : document.body;
|
|
229
232
|
},
|
|
230
233
|
get children() {
|
|
231
|
-
return
|
|
234
|
+
return a(g, {
|
|
232
235
|
get when() {
|
|
233
236
|
return e.variant === "default";
|
|
234
237
|
},
|
|
235
238
|
get fallback() {
|
|
236
239
|
return (() => {
|
|
237
|
-
var
|
|
238
|
-
return d(
|
|
239
|
-
onClickAway: () => !e.disableOutsideClick &&
|
|
240
|
+
var n = L();
|
|
241
|
+
return _((o) => u = o, n), d(n, a(te, {
|
|
242
|
+
onClickAway: () => !e.disableOutsideClick && v(),
|
|
240
243
|
get children() {
|
|
241
|
-
return
|
|
244
|
+
return p();
|
|
242
245
|
}
|
|
243
|
-
})),
|
|
246
|
+
})), C(() => H(n, x("smwb-sheet__overlay", "smwb-dark", `smwb-${e.placement}`, `smwb-sheet_${e.variant}`, s.classes()))), n;
|
|
244
247
|
})();
|
|
245
248
|
},
|
|
246
249
|
get children() {
|
|
247
|
-
var
|
|
248
|
-
return d(
|
|
250
|
+
var n = L();
|
|
251
|
+
return _((o) => u = o, n), d(n, p), C(() => H(n, x(e.disableOutsideClick ? "smwb-sheet__overlay" : "smwb-sheet__default", s.classes()))), n;
|
|
249
252
|
}
|
|
250
253
|
});
|
|
251
254
|
}
|
|
@@ -255,6 +258,6 @@ function he(m) {
|
|
|
255
258
|
}
|
|
256
259
|
J(["pointerdown", "pointermove", "pointerup", "keydown"]);
|
|
257
260
|
export {
|
|
258
|
-
|
|
261
|
+
fe as Sheet
|
|
259
262
|
};
|
|
260
263
|
//# 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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"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
const e = "data-smwb-overlay-layer", r = () => typeof document > "u" ? [] : Array.from(document.querySelectorAll(`[${e}]`)), a = (n, o) => typeof n.composedPath != "function" ? !1 : n.composedPath().some((t) => t instanceof Element && t.hasAttribute(e) && !t.contains(o)), s = (n) => {
|
|
2
|
+
if (!n) return !0;
|
|
3
|
+
const o = r(), t = o[o.length - 1];
|
|
4
|
+
return !t || t === n || t.contains(n) || n.contains(t);
|
|
5
|
+
};
|
|
6
|
+
export {
|
|
7
|
+
e as OVERLAY_LAYER_ATTR,
|
|
8
|
+
a as isEventInForeignOverlay,
|
|
9
|
+
s as isTopOverlayLayer
|
|
10
|
+
};
|
|
11
|
+
//# sourceMappingURL=overlayLayer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"overlayLayer.js","sources":["../../../src/primitives/overlayLayer.ts"],"sourcesContent":["/** Attribute marking the root of a portaled overlay layer (modal, sheet wrapper, dropdown, …). */\nexport const OVERLAY_LAYER_ATTR = \"data-smwb-overlay-layer\";\n\n/** All open overlay layers in document order (last = topmost). */\nconst overlayLayers = (): Element[] =>\n typeof document === \"undefined\" ? [] : Array.from(document.querySelectorAll(`[${OVERLAY_LAYER_ATTR}]`));\n\n/**\n * True when `event` happened inside an overlay layer that does NOT contain\n * `node` — i.e. `node` sits underneath that layer, so the interaction is not\n * a \"click away\" from `node`.\n */\nexport const isEventInForeignOverlay = (event: Event, node: Element): boolean => {\n if (typeof event.composedPath !== \"function\") return false;\n return event\n .composedPath()\n .some((el) => el instanceof Element && el.hasAttribute(OVERLAY_LAYER_ATTR) && !el.contains(node));\n};\n\n/**\n * True when `el` belongs to the topmost open overlay layer (or no layers are\n * open). Used to make Escape close only the top layer instead of every layer.\n */\nexport const isTopOverlayLayer = (el: Element | undefined): boolean => {\n if (!el) return true;\n const all = overlayLayers();\n const top = all[all.length - 1];\n return !top || top === el || top.contains(el) || el.contains(top);\n};\n"],"names":["OVERLAY_LAYER_ATTR","overlayLayers","isEventInForeignOverlay","event","node","el","isTopOverlayLayer","all","top"],"mappings":"AACO,MAAMA,IAAqB,2BAG5BC,IAAgB,MACpB,OAAO,WAAa,MAAc,CAAA,IAAK,MAAM,KAAK,SAAS,iBAAiB,IAAID,CAAkB,GAAG,CAAC,GAO3FE,IAA0B,CAACC,GAAcC,MAChD,OAAOD,EAAM,gBAAiB,aAAmB,KAC9CA,EACJ,aAAA,EACA,KAAK,CAACE,MAAOA,aAAc,WAAWA,EAAG,aAAaL,CAAkB,KAAK,CAACK,EAAG,SAASD,CAAI,CAAC,GAOvFE,IAAoB,CAACD,MAAqC;AACrE,MAAI,CAACA,EAAI,QAAO;AAChB,QAAME,IAAMN,EAAA,GACNO,IAAMD,EAAIA,EAAI,SAAS,CAAC;AAC9B,SAAO,CAACC,KAAOA,MAAQH,KAAMG,EAAI,SAASH,CAAE,KAAKA,EAAG,SAASG,CAAG;AAClE;"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { children as resolveChildren, createEffect, mergeProps, onCleanup, onMount } from "solid-js";
|
|
2
|
+
import { isEventInForeignOverlay } from "../../primitives/overlayLayer";
|
|
2
3
|
function mapEventPropToEvent(eventProp) {
|
|
3
4
|
return eventProp.substring(2).toLowerCase();
|
|
4
5
|
}
|
|
@@ -41,6 +42,7 @@ function ClickAwayListener(props) {
|
|
|
41
42
|
insideDOM = !document.documentElement.contains(target) || node.contains(target);
|
|
42
43
|
}
|
|
43
44
|
if (!insideDOM) {
|
|
45
|
+
if (isEventInForeignOverlay(event, node)) return;
|
|
44
46
|
merged.onClickAway(event);
|
|
45
47
|
}
|
|
46
48
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"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"],"mappings":"AAAA,SAAmB,YAAY,iBAAiB,cAAc,YAAY,WAAW,eAAe;
|
|
1
|
+
{"version":3,"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"],"mappings":"AAAA,SAAmB,YAAY,iBAAiB,cAAc,YAAY,WAAW,eAAe;AACpG,SAAS,+BAA+B;AAOxC,SAAS,oBAAoB,WAAiF;AAC5G,SAAO,UAAU,UAAU,CAAC,EAAE,YAAY;AAC5C;AAEA,SAAS,qBAAqB,OAAmB,KAAwB;AACvE,SAAO,IAAI,gBAAgB,cAAc,MAAM,WAAW,IAAI,gBAAgB,eAAe,MAAM;AACrG;AAiBO,SAAS,kBAAkB,OAA4C;AAC5E,QAAM,SAAS;AAAA,IACb,EAAE,YAAY,aAA2C,YAAY,cAA4C,SAAS,KAAK;AAAA,IAC/H;AAAA,EACF;AACA,QAAM,WAAW,gBAAgB,MAAM,OAAO,QAAQ;AAEtD,QAAM,UAAU,MAA2B;AACzC,UAAM,IAAI,SAAS;AACnB,UAAM,KAAK,MAAM,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,MAAM,aAAa,OAAO,IAAI;AACpE,WAAO,cAAc,UAAU,KAAK;AAAA,EACtC;AAEA,MAAI,YAAY;AAChB,MAAI,QAAQ;AAEZ,UAAQ,MAAM;AAGZ,UAAM,QAAQ,WAAW,MAAM;AAC7B,kBAAY;AAAA,IACd,GAAG,CAAC;AACJ,cAAU,MAAM,aAAa,KAAK,CAAC;AAAA,EACrC,CAAC;AAED,QAAM,kBAAkB,CAAC,UAAyC;AAChE,UAAM,OAAO,QAAQ;AACrB,QAAI,CAAC,OAAO,WAAW,CAAC,aAAa,CAAC,QAAS,aAAa,SAAS,qBAAqB,OAAO,QAAQ,GAAI;AAC3G;AAAA,IACF;AACA,QAAI,OAAO;AACT,cAAQ;AACR;AAAA,IACF;AACA,QAAI;AACJ,QAAI,MAAM,cAAc;AACtB,kBAAY,MAAM,aAAa,EAAE,QAAQ,IAAI,IAAI;AAAA,IACnD,OAAO;AACL,YAAM,SAAS,MAAM;AACrB,kBAAY,CAAC,SAAS,gBAAgB,SAAS,MAAM,KAAK,KAAK,SAAS,MAAM;AAAA,IAChF;AACA,QAAI,CAAC,WAAW;AAGd,UAAI,wBAAwB,OAAO,IAAI,EAAG;AAC1C,aAAO,YAAY,KAAK;AAAA,IAC1B;AAAA,EACF;AAEA,eAAa,MAAM;AACjB,UAAM,kBAAkB,MAAY;AAClC,cAAQ;AAAA,IACV;AACA,QAAI,OAAO,eAAe,OAAO;AAC/B,YAAM,SAAS,oBAAoB,OAAO,UAAU;AACpD,eAAS,iBAAiB,QAAQ,eAAgC;AAClE,eAAS,iBAAiB,aAAa,eAAe;AACtD,gBAAU,MAAM;AACd,iBAAS,oBAAoB,QAAQ,eAAgC;AACrE,iBAAS,oBAAoB,aAAa,eAAe;AAAA,MAC3D,CAAC;AAAA,IACH;AACA,QAAI,OAAO,eAAe,OAAO;AAC/B,YAAM,SAAS,oBAAoB,OAAO,UAAU;AACpD,eAAS,iBAAiB,QAAQ,eAAgC;AAClE,gBAAU,MAAM,SAAS,oBAAoB,QAAQ,eAAgC,CAAC;AAAA,IACxF;AAAA,EACF,CAAC;AAED,SAAO,GAAG,SAAS,EAAE;AACvB;AAEA,IAAO,4BAAQ;","names":[],"file":"clickAwayListener.jsx"}
|
|
@@ -108,10 +108,15 @@ function TreeView(props) {
|
|
|
108
108
|
defaultValue: local.defaultExpanded,
|
|
109
109
|
onChange: (next) => local.onExpandedChange?.(next)
|
|
110
110
|
});
|
|
111
|
+
let lastToggled;
|
|
111
112
|
const [selectedIds, setSelectedIds] = createControllableState({
|
|
112
113
|
value: () => local.selected,
|
|
113
114
|
defaultValue: local.defaultSelected,
|
|
114
|
-
onChange: (next) =>
|
|
115
|
+
onChange: (next) => {
|
|
116
|
+
const changed = lastToggled;
|
|
117
|
+
lastToggled = void 0;
|
|
118
|
+
local.onSelectedChange?.(next, changed);
|
|
119
|
+
}
|
|
115
120
|
});
|
|
116
121
|
const toggleExpanded = (id) => setExpandedIds((prev) => prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]);
|
|
117
122
|
const setOpen = (id, open) => setExpandedIds((prev) => {
|
|
@@ -120,7 +125,10 @@ function TreeView(props) {
|
|
|
120
125
|
if (!open && has) return prev.filter((x) => x !== id);
|
|
121
126
|
return prev;
|
|
122
127
|
});
|
|
123
|
-
const toggleSelected = (id) =>
|
|
128
|
+
const toggleSelected = (id) => {
|
|
129
|
+
lastToggled = { id, selected: !selectedIds().includes(id) };
|
|
130
|
+
setSelectedIds((prev) => prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]);
|
|
131
|
+
};
|
|
124
132
|
const ensureLoaded = (item, nodeId) => {
|
|
125
133
|
if (!local.loadChildren || loadedChildren()[nodeId] || item.children && item.children.length > 0) return;
|
|
126
134
|
setLoadingIds((prev) => prev.includes(nodeId) ? prev : [...prev, nodeId]);
|