@cascivo/react 0.12.0 → 0.13.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/accordion/accordion.js +46 -44
- package/dist/action-sheet/action-sheet.js +16 -16
- package/dist/alert-dialog/alert-dialog.js +34 -34
- package/dist/app-shell/app-shell.css +1 -1
- package/dist/app-shell/app-shell.js +36 -33
- package/dist/app-shell/app-shell.module.js +8 -8
- package/dist/avatar-group/avatar-group.js +6 -6
- package/dist/badge/badge.js +17 -10
- package/dist/bottom-sheet/bottom-sheet.js +18 -18
- package/dist/button/button.css +1 -1
- package/dist/button/button.js +15 -12
- package/dist/button/button.module.js +1 -1
- package/dist/button-group/button-group.js +8 -8
- package/dist/card/card.css +1 -1
- package/dist/card/card.module.js +8 -8
- package/dist/carousel/carousel.js +20 -20
- package/dist/checkbox/checkbox.js +21 -21
- package/dist/checkbox-card/checkbox-card.js +15 -13
- package/dist/collapsible/collapsible.js +7 -7
- package/dist/color-picker/color-picker.js +26 -26
- package/dist/combobox/combobox.css +1 -1
- package/dist/combobox/combobox.js +86 -86
- package/dist/combobox/combobox.module.js +15 -15
- package/dist/command-menu/command-menu.js +111 -111
- package/dist/comparison/comparison.js +10 -10
- package/dist/context-menu/context-menu.js +9 -9
- package/dist/copy-button/copy-button.js +18 -16
- package/dist/data-table/data-table.css +1 -1
- package/dist/data-table/data-table.js +8 -2
- package/dist/data-table/data-table.module.js +29 -29
- package/dist/date-picker/date-picker.css +1 -1
- package/dist/date-picker/date-picker.js +25 -25
- package/dist/date-picker/date-picker.module.js +19 -19
- package/dist/date-range-picker/date-range-picker.js +26 -26
- package/dist/drawer/drawer.css +1 -1
- package/dist/drawer/drawer.js +18 -17
- package/dist/drawer/drawer.module.js +9 -9
- package/dist/dropdown/dropdown.js +48 -48
- package/dist/editable/editable.js +11 -11
- package/dist/fab/fab.js +53 -53
- package/dist/field/field.js +8 -8
- package/dist/file-uploader/file-uploader.css +1 -1
- package/dist/file-uploader/file-uploader.js +19 -19
- package/dist/file-uploader/file-uploader.module.js +14 -14
- package/dist/filter/filter.js +10 -9
- package/dist/header-panel/header-panel.js +31 -31
- package/dist/hover-card/hover-card.js +21 -21
- package/dist/icon-button/icon-button.css +1 -1
- package/dist/icon-button/icon-button.js +5 -5
- package/dist/icon-button/icon-button.module.js +1 -1
- package/dist/index.d.ts +1475 -251
- package/dist/input/input.css +1 -1
- package/dist/input/input.js +22 -21
- package/dist/input/input.module.js +5 -5
- package/dist/item/item.css +1 -1
- package/dist/item/item.module.js +6 -6
- package/dist/layouts/src/page-header/page-header.css +1 -0
- package/dist/layouts/src/page-header/page-header.js +33 -0
- package/dist/layouts/src/page-header/page-header.module.js +13 -0
- package/dist/link/link.js +14 -12
- package/dist/log-viewer/log-viewer.js +26 -26
- package/dist/menu/menu.js +20 -20
- package/dist/menu-button/menu-button.js +48 -48
- package/dist/menubar/menubar.js +42 -42
- package/dist/modal/modal.css +1 -1
- package/dist/modal/modal.js +41 -35
- package/dist/modal/modal.module.js +8 -7
- package/dist/multi-select/multi-select.css +1 -1
- package/dist/multi-select/multi-select.js +57 -57
- package/dist/multi-select/multi-select.module.js +11 -11
- package/dist/native-select/native-select.js +13 -11
- package/dist/navigation-menu/navigation-menu.js +46 -46
- package/dist/node/accordion/accordion.js +46 -44
- package/dist/node/action-sheet/action-sheet.js +16 -16
- package/dist/node/alert-dialog/alert-dialog.js +34 -34
- package/dist/node/app-shell/app-shell.js +36 -33
- package/dist/node/app-shell/app-shell.module.js +8 -8
- package/dist/node/avatar-group/avatar-group.js +6 -6
- package/dist/node/badge/badge.js +17 -10
- package/dist/node/bottom-sheet/bottom-sheet.js +18 -18
- package/dist/node/button/button.js +15 -12
- package/dist/node/button/button.module.js +1 -1
- package/dist/node/button-group/button-group.js +8 -8
- package/dist/node/card/card.module.js +8 -8
- package/dist/node/carousel/carousel.js +20 -20
- package/dist/node/checkbox/checkbox.js +21 -21
- package/dist/node/checkbox-card/checkbox-card.js +15 -13
- package/dist/node/collapsible/collapsible.js +7 -7
- package/dist/node/color-picker/color-picker.js +26 -26
- package/dist/node/combobox/combobox.js +86 -86
- package/dist/node/combobox/combobox.module.js +15 -15
- package/dist/node/command-menu/command-menu.js +111 -111
- package/dist/node/comparison/comparison.js +10 -10
- package/dist/node/context-menu/context-menu.js +9 -9
- package/dist/node/copy-button/copy-button.js +18 -16
- package/dist/node/data-table/data-table.js +8 -2
- package/dist/node/data-table/data-table.module.js +29 -29
- package/dist/node/date-picker/date-picker.js +25 -25
- package/dist/node/date-picker/date-picker.module.js +19 -19
- package/dist/node/date-range-picker/date-range-picker.js +26 -26
- package/dist/node/drawer/drawer.js +18 -17
- package/dist/node/drawer/drawer.module.js +9 -9
- package/dist/node/dropdown/dropdown.js +48 -48
- package/dist/node/editable/editable.js +11 -11
- package/dist/node/fab/fab.js +53 -53
- package/dist/node/field/field.js +8 -8
- package/dist/node/file-uploader/file-uploader.js +19 -19
- package/dist/node/file-uploader/file-uploader.module.js +14 -14
- package/dist/node/filter/filter.js +10 -9
- package/dist/node/header-panel/header-panel.js +31 -31
- package/dist/node/hover-card/hover-card.js +21 -21
- package/dist/node/icon-button/icon-button.js +5 -5
- package/dist/node/icon-button/icon-button.module.js +1 -1
- package/dist/node/input/input.js +22 -21
- package/dist/node/input/input.module.js +5 -5
- package/dist/node/item/item.module.js +6 -6
- package/dist/node/layouts/src/page-header/page-header.js +33 -0
- package/dist/node/layouts/src/page-header/page-header.module.js +12 -0
- package/dist/node/link/link.js +14 -12
- package/dist/node/log-viewer/log-viewer.js +26 -26
- package/dist/node/menu/menu.js +20 -20
- package/dist/node/menu-button/menu-button.js +48 -48
- package/dist/node/menubar/menubar.js +42 -42
- package/dist/node/modal/modal.js +41 -35
- package/dist/node/modal/modal.module.js +8 -7
- package/dist/node/multi-select/multi-select.js +57 -57
- package/dist/node/multi-select/multi-select.module.js +11 -11
- package/dist/node/native-select/native-select.js +13 -11
- package/dist/node/navigation-menu/navigation-menu.js +46 -46
- package/dist/node/notification/notification.js +50 -44
- package/dist/node/notification/notification.module.js +7 -7
- package/dist/node/number-input/number-input.js +52 -50
- package/dist/node/number-input/number-input.module.js +8 -8
- package/dist/node/otp-input/otp-input.js +8 -8
- package/dist/node/otp-input/otp-input.module.js +2 -2
- package/dist/node/overflow-menu/overflow-menu.js +18 -13
- package/dist/node/password-input/password-input.js +28 -27
- package/dist/node/password-input/password-input.module.js +7 -7
- package/dist/node/popover/popover.js +26 -24
- package/dist/node/progress/progress.js +3 -2
- package/dist/node/pull-to-refresh/pull-to-refresh.js +13 -13
- package/dist/node/radial-progress/radial-progress.js +5 -5
- package/dist/node/radio/radio.js +23 -22
- package/dist/node/radio-card/radio-card.js +27 -26
- package/dist/node/react/src/index.js +4 -3
- package/dist/node/react/src/theme.js +30 -19
- package/dist/node/resizable/resizable.js +11 -11
- package/dist/node/scroll-area/scroll-area.js +4 -4
- package/dist/node/search/search.js +49 -49
- package/dist/node/search/search.module.js +5 -5
- package/dist/node/select/select.js +27 -26
- package/dist/node/sheet/sheet.js +11 -10
- package/dist/node/sheet/sheet.module.js +5 -5
- package/dist/node/side-nav/side-nav.js +91 -91
- package/dist/node/skip-nav/skip-nav.js +12 -12
- package/dist/node/slider/slider.js +13 -11
- package/dist/node/stat/stat.js +6 -5
- package/dist/node/stat/stat.module.js +7 -7
- package/dist/node/status/status.js +18 -11
- package/dist/node/steps/steps.js +23 -23
- package/dist/node/structured-list/structured-list.js +33 -32
- package/dist/node/tabs/tabs.js +49 -47
- package/dist/node/tag/tag.js +22 -15
- package/dist/node/tags-input/tags-input.js +35 -35
- package/dist/node/tags-input/tags-input.module.js +4 -4
- package/dist/node/textarea/textarea.js +22 -21
- package/dist/node/tile/tile.module.js +3 -3
- package/dist/node/time-picker/time-picker.js +22 -21
- package/dist/node/time-picker/time-picker.module.js +5 -5
- package/dist/node/timeline/timeline.js +22 -16
- package/dist/node/toast/toast.js +15 -15
- package/dist/node/toc/toc.js +8 -8
- package/dist/node/toggle/toggle.js +15 -13
- package/dist/node/toggle-group/toggle-group.js +10 -10
- package/dist/node/toggletip/toggletip.js +9 -9
- package/dist/node/tooltip/tooltip.js +5 -5
- package/dist/node/tree-view/tree-view.js +32 -32
- package/dist/notification/notification.css +1 -1
- package/dist/notification/notification.js +50 -44
- package/dist/notification/notification.module.js +7 -7
- package/dist/number-input/number-input.css +1 -1
- package/dist/number-input/number-input.js +52 -50
- package/dist/number-input/number-input.module.js +8 -8
- package/dist/otp-input/otp-input.css +1 -1
- package/dist/otp-input/otp-input.js +8 -8
- package/dist/otp-input/otp-input.module.js +2 -2
- package/dist/overflow-menu/overflow-menu.js +18 -13
- package/dist/password-input/password-input.css +1 -1
- package/dist/password-input/password-input.js +28 -27
- package/dist/password-input/password-input.module.js +7 -7
- package/dist/popover/popover.js +26 -24
- package/dist/progress/progress.js +3 -2
- package/dist/pull-to-refresh/pull-to-refresh.js +13 -13
- package/dist/radial-progress/radial-progress.js +5 -5
- package/dist/radio/radio.js +23 -22
- package/dist/radio-card/radio-card.js +27 -26
- package/dist/react/src/index.js +4 -3
- package/dist/react/src/theme.js +30 -19
- package/dist/resizable/resizable.js +11 -11
- package/dist/scroll-area/scroll-area.js +4 -4
- package/dist/search/search.css +1 -1
- package/dist/search/search.js +49 -49
- package/dist/search/search.module.js +5 -5
- package/dist/select/select.js +27 -26
- package/dist/sheet/sheet.css +1 -1
- package/dist/sheet/sheet.js +11 -10
- package/dist/sheet/sheet.module.js +5 -5
- package/dist/side-nav/side-nav.js +91 -91
- package/dist/skip-nav/skip-nav.js +12 -12
- package/dist/slider/slider.js +13 -11
- package/dist/stat/stat.css +1 -1
- package/dist/stat/stat.js +6 -5
- package/dist/stat/stat.module.js +7 -7
- package/dist/status/status.js +18 -11
- package/dist/steps/steps.js +23 -23
- package/dist/structured-list/structured-list.js +33 -32
- package/dist/styles.css +87 -23
- package/dist/tabs/tabs.js +49 -47
- package/dist/tag/tag.js +22 -15
- package/dist/tags-input/tags-input.css +1 -1
- package/dist/tags-input/tags-input.js +35 -35
- package/dist/tags-input/tags-input.module.js +4 -4
- package/dist/textarea/textarea.js +22 -21
- package/dist/tile/tile.css +1 -1
- package/dist/tile/tile.module.js +3 -3
- package/dist/time-picker/time-picker.css +1 -1
- package/dist/time-picker/time-picker.js +22 -21
- package/dist/time-picker/time-picker.module.js +5 -5
- package/dist/timeline/timeline.js +22 -16
- package/dist/toast/toast.js +15 -15
- package/dist/toc/toc.js +8 -8
- package/dist/toggle/toggle.js +15 -13
- package/dist/toggle-group/toggle-group.js +10 -10
- package/dist/toggletip/toggletip.js +9 -9
- package/dist/tooltip/tooltip.js +5 -5
- package/dist/tree-view/tree-view.js +32 -32
- package/package.json +10 -4
|
@@ -1,86 +1,86 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
import e from "./menu-button.module.js";
|
|
4
|
-
import { DismissableLayer as t, cn as n,
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
4
|
+
import { DismissableLayer as t, cn as n, focusElement as r, useAnchorPosition as i, useSignal as a, useSignalEffect as o, useSignals as s } from "@cascivo/core";
|
|
5
|
+
import { useId as c, useRef as l } from "react";
|
|
6
|
+
import { jsx as u, jsxs as d } from "react/jsx-runtime";
|
|
7
7
|
//#region ../components/src/menu-button/menu-button.tsx
|
|
8
|
-
function
|
|
8
|
+
function f(e, t) {
|
|
9
9
|
if (!e) return;
|
|
10
10
|
let n = e.querySelectorAll("[role=\"menuitem\"]:not([aria-disabled=\"true\"])");
|
|
11
11
|
n[t < 0 ? n.length - 1 : t % n.length]?.focus();
|
|
12
12
|
}
|
|
13
|
-
function
|
|
14
|
-
|
|
15
|
-
let
|
|
16
|
-
anchorRef:
|
|
17
|
-
floatingRef:
|
|
18
|
-
placement:
|
|
19
|
-
enabled:
|
|
13
|
+
function p({ label: p, items: m, variant: h = "secondary", size: g = "md", disabled: _ = !1, align: v = "start", labels: y, className: b }) {
|
|
14
|
+
s();
|
|
15
|
+
let x = a(!1), S = l(null), C = l(null), w = c(), { anchorStyle: T, floatingStyle: E } = i({
|
|
16
|
+
anchorRef: S,
|
|
17
|
+
floatingRef: C,
|
|
18
|
+
placement: v === "end" ? "bottom-end" : "bottom-start",
|
|
19
|
+
enabled: x
|
|
20
20
|
});
|
|
21
|
-
|
|
22
|
-
|
|
21
|
+
o(() => {
|
|
22
|
+
x.value && f(C.current, 0);
|
|
23
23
|
});
|
|
24
|
-
function E(e) {
|
|
25
|
-
g || (b.value = !0, queueMicrotask(() => d(S.current, e)));
|
|
26
|
-
}
|
|
27
24
|
function D(e) {
|
|
28
|
-
|
|
25
|
+
_ || (x.value = !0, queueMicrotask(() => f(C.current, e)));
|
|
29
26
|
}
|
|
30
27
|
function O(e) {
|
|
31
|
-
|
|
28
|
+
x.value = !1, e && r(S.current);
|
|
32
29
|
}
|
|
33
30
|
function k(e) {
|
|
31
|
+
e.key === "ArrowDown" || e.key === "Enter" || e.key === " " ? (e.preventDefault(), D(0)) : e.key === "ArrowUp" && (e.preventDefault(), D(-1));
|
|
32
|
+
}
|
|
33
|
+
function A(e) {
|
|
34
34
|
if (e.key === "ArrowDown") {
|
|
35
35
|
e.preventDefault();
|
|
36
36
|
let t = e.currentTarget.nextElementSibling;
|
|
37
|
-
t ? t.focus() :
|
|
37
|
+
t ? t.focus() : f(C.current, 0);
|
|
38
38
|
} else if (e.key === "ArrowUp") {
|
|
39
39
|
e.preventDefault();
|
|
40
40
|
let t = e.currentTarget.previousElementSibling;
|
|
41
|
-
t ? t.focus() :
|
|
42
|
-
} else e.key === "Escape" ? (e.preventDefault(),
|
|
41
|
+
t ? t.focus() : f(C.current, -1);
|
|
42
|
+
} else e.key === "Escape" ? (e.preventDefault(), O(!0)) : e.key === "Tab" && O(!1);
|
|
43
43
|
}
|
|
44
|
-
function
|
|
45
|
-
e.disabled || (e.onSelect?.(),
|
|
44
|
+
function j(e) {
|
|
45
|
+
e.disabled || (e.onSelect?.(), O(!0));
|
|
46
46
|
}
|
|
47
|
-
return /* @__PURE__ */
|
|
48
|
-
className: n(e.root,
|
|
49
|
-
children: [/* @__PURE__ */
|
|
50
|
-
ref:
|
|
47
|
+
return /* @__PURE__ */ d("div", {
|
|
48
|
+
className: n(e.root, b),
|
|
49
|
+
children: [/* @__PURE__ */ u("button", {
|
|
50
|
+
ref: S,
|
|
51
51
|
type: "button",
|
|
52
52
|
className: e.trigger,
|
|
53
|
-
"data-variant":
|
|
54
|
-
"data-size":
|
|
55
|
-
disabled:
|
|
53
|
+
"data-variant": h,
|
|
54
|
+
"data-size": g,
|
|
55
|
+
disabled: _,
|
|
56
56
|
"aria-haspopup": "menu",
|
|
57
|
-
"aria-expanded":
|
|
58
|
-
"aria-controls":
|
|
59
|
-
...
|
|
60
|
-
style:
|
|
57
|
+
"aria-expanded": x.value,
|
|
58
|
+
"aria-controls": w,
|
|
59
|
+
...y?.open !== void 0 && { "aria-label": y.open },
|
|
60
|
+
style: T,
|
|
61
61
|
onClick: () => {
|
|
62
|
-
|
|
62
|
+
x.value ? O(!1) : D(0);
|
|
63
63
|
},
|
|
64
|
-
onKeyDown:
|
|
65
|
-
children:
|
|
66
|
-
}),
|
|
67
|
-
onDismiss: () =>
|
|
68
|
-
children: /* @__PURE__ */
|
|
69
|
-
ref:
|
|
70
|
-
id:
|
|
64
|
+
onKeyDown: k,
|
|
65
|
+
children: p
|
|
66
|
+
}), x.value ? /* @__PURE__ */ u(t, {
|
|
67
|
+
onDismiss: () => O(!0),
|
|
68
|
+
children: /* @__PURE__ */ u("div", {
|
|
69
|
+
ref: C,
|
|
70
|
+
id: w,
|
|
71
71
|
role: "menu",
|
|
72
72
|
"data-state": "open",
|
|
73
|
-
"data-align":
|
|
73
|
+
"data-align": v,
|
|
74
74
|
className: e.menu,
|
|
75
|
-
style:
|
|
76
|
-
children:
|
|
75
|
+
style: E,
|
|
76
|
+
children: m.map((t) => /* @__PURE__ */ u("div", {
|
|
77
77
|
role: "menuitem",
|
|
78
78
|
tabIndex: -1,
|
|
79
79
|
"aria-disabled": t.disabled,
|
|
80
80
|
className: e.item,
|
|
81
|
-
onClick: () =>
|
|
81
|
+
onClick: () => j(t),
|
|
82
82
|
onKeyDown: (e) => {
|
|
83
|
-
e.key === "Enter" || e.key === " " ? (e.preventDefault(),
|
|
83
|
+
e.key === "Enter" || e.key === " " ? (e.preventDefault(), j(t)) : A(e);
|
|
84
84
|
},
|
|
85
85
|
children: t.label
|
|
86
86
|
}, t.id))
|
|
@@ -89,4 +89,4 @@ function f({ label: f, items: p, variant: m = "secondary", size: h = "md", disab
|
|
|
89
89
|
});
|
|
90
90
|
}
|
|
91
91
|
//#endregion
|
|
92
|
-
export {
|
|
92
|
+
export { p as MenuButton };
|
|
@@ -1,89 +1,89 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
import e from "./menubar.module.js";
|
|
4
|
-
import { DismissableLayer as t, Presence as n, cn as r,
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
4
|
+
import { DismissableLayer as t, Presence as n, cn as r, focusElement as i, useAnchorPosition as a, useRovingFocus as o, useSignal as s, useSignals as c } from "@cascivo/core";
|
|
5
|
+
import { useId as l, useRef as u } from "react";
|
|
6
|
+
import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
|
|
7
7
|
//#region ../components/src/menubar/menubar.tsx
|
|
8
|
-
function
|
|
9
|
-
|
|
10
|
-
let
|
|
8
|
+
function m({ menus: t, "aria-label": n, className: i }) {
|
|
9
|
+
c();
|
|
10
|
+
let a = l(), u = s(null), d = o({
|
|
11
11
|
orientation: "horizontal",
|
|
12
12
|
loop: !0
|
|
13
13
|
});
|
|
14
|
-
return /* @__PURE__ */
|
|
14
|
+
return /* @__PURE__ */ f("div", {
|
|
15
15
|
role: "menubar",
|
|
16
16
|
"aria-label": n,
|
|
17
17
|
className: r(e.menubar, i),
|
|
18
|
-
children: t.map((e, t) => /* @__PURE__ */
|
|
18
|
+
children: t.map((e, t) => /* @__PURE__ */ f(h, {
|
|
19
19
|
menu: e,
|
|
20
20
|
index: t,
|
|
21
|
-
baseId:
|
|
21
|
+
baseId: a,
|
|
22
22
|
openId: u,
|
|
23
|
-
itemProps:
|
|
23
|
+
itemProps: d.getItemProps(t)
|
|
24
24
|
}, e.id))
|
|
25
25
|
});
|
|
26
26
|
}
|
|
27
|
-
function
|
|
28
|
-
|
|
29
|
-
let
|
|
30
|
-
anchorRef:
|
|
31
|
-
floatingRef:
|
|
27
|
+
function h({ menu: t, baseId: r, openId: o, itemProps: s }) {
|
|
28
|
+
c();
|
|
29
|
+
let l = u(null), m = u(null), h = o.value === t.id, _ = `${r}-menu-${t.id}`, { anchorStyle: v, floatingStyle: y } = a({
|
|
30
|
+
anchorRef: l,
|
|
31
|
+
floatingRef: m,
|
|
32
32
|
placement: "bottom-start",
|
|
33
|
-
enabled:
|
|
34
|
-
}),
|
|
35
|
-
(
|
|
36
|
-
},
|
|
37
|
-
|
|
38
|
-
}, { ref:
|
|
39
|
-
return /* @__PURE__ */
|
|
33
|
+
enabled: h
|
|
34
|
+
}), b = () => {
|
|
35
|
+
(m.current?.querySelector("[role=\"menuitem\"]:not([aria-disabled=\"true\"])"))?.focus();
|
|
36
|
+
}, x = (e) => {
|
|
37
|
+
s.onKeyDown(e), !e.defaultPrevented && (e.key === "ArrowDown" || e.key === "Enter" || e.key === " " ? (e.preventDefault(), o.value = t.id, requestAnimationFrame(b)) : e.key === "Escape" && (o.value = null));
|
|
38
|
+
}, { ref: S, onKeyDown: C, ...w } = s;
|
|
39
|
+
return /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("button", {
|
|
40
40
|
ref: (e) => {
|
|
41
|
-
|
|
41
|
+
l.current = e, S(e);
|
|
42
42
|
},
|
|
43
43
|
type: "button",
|
|
44
44
|
role: "menuitem",
|
|
45
45
|
"aria-haspopup": "menu",
|
|
46
|
-
"aria-expanded":
|
|
47
|
-
"aria-controls":
|
|
48
|
-
"data-state":
|
|
46
|
+
"aria-expanded": h,
|
|
47
|
+
"aria-controls": _,
|
|
48
|
+
"data-state": h ? "open" : "closed",
|
|
49
49
|
className: e.trigger,
|
|
50
|
-
style:
|
|
50
|
+
style: v,
|
|
51
51
|
onClick: () => {
|
|
52
|
-
|
|
52
|
+
o.value = h ? null : t.id;
|
|
53
53
|
},
|
|
54
|
-
onKeyDown:
|
|
55
|
-
...
|
|
54
|
+
onKeyDown: x,
|
|
55
|
+
...w,
|
|
56
56
|
children: t.label
|
|
57
|
-
}), /* @__PURE__ */
|
|
58
|
-
present:
|
|
59
|
-
children: /* @__PURE__ */
|
|
57
|
+
}), /* @__PURE__ */ f(n, {
|
|
58
|
+
present: h,
|
|
59
|
+
children: /* @__PURE__ */ f(g, {
|
|
60
60
|
menu: t,
|
|
61
|
-
menuId:
|
|
62
|
-
floatingRef:
|
|
63
|
-
floatingStyle:
|
|
61
|
+
menuId: _,
|
|
62
|
+
floatingRef: m,
|
|
63
|
+
floatingStyle: y,
|
|
64
64
|
onClose: () => {
|
|
65
|
-
|
|
65
|
+
o.value = null, i(l.current);
|
|
66
66
|
}
|
|
67
67
|
})
|
|
68
68
|
})] });
|
|
69
69
|
}
|
|
70
|
-
function
|
|
70
|
+
function g({ menu: n, menuId: r, floatingRef: i, floatingStyle: a, onClose: o }) {
|
|
71
71
|
let s = (e) => {
|
|
72
72
|
let t = Array.from(i.current?.querySelectorAll("[role=\"menuitem\"]:not([aria-disabled=\"true\"])") ?? []);
|
|
73
73
|
if (t.length === 0) return;
|
|
74
74
|
let n = t.indexOf(e.currentTarget);
|
|
75
75
|
e.key === "ArrowDown" ? (e.preventDefault(), t[(n + 1) % t.length]?.focus()) : e.key === "ArrowUp" ? (e.preventDefault(), t[(n - 1 + t.length) % t.length]?.focus()) : e.key === "Home" ? (e.preventDefault(), t[0]?.focus()) : e.key === "End" && (e.preventDefault(), t[t.length - 1]?.focus());
|
|
76
76
|
};
|
|
77
|
-
return /* @__PURE__ */
|
|
77
|
+
return /* @__PURE__ */ f(t, {
|
|
78
78
|
onDismiss: o,
|
|
79
|
-
children: /* @__PURE__ */
|
|
79
|
+
children: /* @__PURE__ */ f("div", {
|
|
80
80
|
ref: i,
|
|
81
81
|
id: r,
|
|
82
82
|
role: "menu",
|
|
83
83
|
"aria-label": typeof n.label == "string" ? n.label : void 0,
|
|
84
84
|
className: e.panel,
|
|
85
85
|
style: a,
|
|
86
|
-
children: n.items.map((t) => /* @__PURE__ */
|
|
86
|
+
children: n.items.map((t) => /* @__PURE__ */ f("div", {
|
|
87
87
|
role: "menuitem",
|
|
88
88
|
tabIndex: -1,
|
|
89
89
|
"aria-disabled": t.disabled,
|
|
@@ -100,4 +100,4 @@ function h({ menu: n, menuId: r, floatingRef: i, floatingStyle: a, onClose: o })
|
|
|
100
100
|
});
|
|
101
101
|
}
|
|
102
102
|
//#endregion
|
|
103
|
-
export {
|
|
103
|
+
export { m as Menubar };
|
package/dist/node/modal/modal.js
CHANGED
|
@@ -2,65 +2,71 @@
|
|
|
2
2
|
|
|
3
3
|
import e from "./modal.module.js";
|
|
4
4
|
import { cn as t, useDraggable as n, useEffectPropSignal as r, useId as i, useSignalEffect as a, useSignals as o } from "@cascivo/core";
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
5
|
+
import { useRef as s } from "react";
|
|
6
|
+
import { builtin as c, t as l } from "@cascivo/i18n";
|
|
7
|
+
import { jsx as u, jsxs as d } from "react/jsx-runtime";
|
|
8
8
|
//#region ../components/src/modal/modal.tsx
|
|
9
|
-
function f({ open: f = !1, onClose: p, title: m, description: h, children: g,
|
|
9
|
+
function f({ open: f = !1, onClose: p, title: m, description: h, children: g, footer: _, className: v, size: y = "md", draggable: b = !1 }) {
|
|
10
10
|
o();
|
|
11
|
-
let
|
|
12
|
-
|
|
13
|
-
let
|
|
14
|
-
"--modal-x": `${
|
|
15
|
-
"--modal-y": `${
|
|
16
|
-
} : void 0,
|
|
11
|
+
let x = s(null), S = s(p);
|
|
12
|
+
S.current = p;
|
|
13
|
+
let C = i("cascivo-modal-title"), w = i("cascivo-modal-desc"), { handleRef: T, offset: E } = n({ isDisabled: !b }), D = b ? {
|
|
14
|
+
"--modal-x": `${E.value.x}px`,
|
|
15
|
+
"--modal-y": `${E.value.y}px`
|
|
16
|
+
} : void 0, O = r(f);
|
|
17
17
|
return a(() => {
|
|
18
|
-
let e =
|
|
19
|
-
e && (
|
|
18
|
+
let e = x.current;
|
|
19
|
+
e && (O.value ? e.open || e.showModal() : e.open && e.close());
|
|
20
20
|
}), a(() => {
|
|
21
|
-
let e =
|
|
21
|
+
let e = x.current;
|
|
22
22
|
if (!e) return;
|
|
23
|
-
let t = () =>
|
|
23
|
+
let t = () => S.current?.();
|
|
24
24
|
return e.addEventListener("close", t), () => e.removeEventListener("close", t);
|
|
25
|
-
}), /* @__PURE__ */
|
|
26
|
-
ref:
|
|
27
|
-
"data-size":
|
|
28
|
-
"data-draggable":
|
|
29
|
-
className: t(e.dialog,
|
|
30
|
-
style:
|
|
25
|
+
}), /* @__PURE__ */ u("dialog", {
|
|
26
|
+
ref: x,
|
|
27
|
+
"data-size": y,
|
|
28
|
+
"data-draggable": b || void 0,
|
|
29
|
+
className: t(e.dialog, v),
|
|
30
|
+
style: D,
|
|
31
31
|
onClick: (e) => {
|
|
32
|
-
e.target ===
|
|
32
|
+
e.target === x.current && x.current?.close();
|
|
33
33
|
},
|
|
34
|
-
"aria-labelledby": m ?
|
|
35
|
-
"aria-describedby": h ?
|
|
36
|
-
children: /* @__PURE__ */
|
|
34
|
+
"aria-labelledby": m ? C : void 0,
|
|
35
|
+
"aria-describedby": h ? w : void 0,
|
|
36
|
+
children: /* @__PURE__ */ d("div", {
|
|
37
37
|
className: e.panel,
|
|
38
38
|
children: [
|
|
39
|
-
(m || p) && /* @__PURE__ */
|
|
39
|
+
(m || p) && /* @__PURE__ */ d("div", {
|
|
40
40
|
className: e.header,
|
|
41
|
-
ref:
|
|
42
|
-
|
|
41
|
+
ref: b ? (e) => {
|
|
42
|
+
T.current = e;
|
|
43
43
|
} : void 0,
|
|
44
|
-
children: [m && /* @__PURE__ */
|
|
45
|
-
id:
|
|
44
|
+
children: [m && /* @__PURE__ */ u("h2", {
|
|
45
|
+
id: C,
|
|
46
46
|
className: e.title,
|
|
47
47
|
children: m
|
|
48
|
-
}), p && /* @__PURE__ */
|
|
48
|
+
}), p && /* @__PURE__ */ u("button", {
|
|
49
49
|
type: "button",
|
|
50
50
|
className: e.close,
|
|
51
|
-
onClick: () =>
|
|
52
|
-
"aria-label": c
|
|
51
|
+
onClick: () => x.current?.close(),
|
|
52
|
+
"aria-label": l(c.modal.close),
|
|
53
53
|
children: "✕"
|
|
54
54
|
})]
|
|
55
55
|
}),
|
|
56
|
-
h && /* @__PURE__ */
|
|
57
|
-
id:
|
|
56
|
+
h && /* @__PURE__ */ u("p", {
|
|
57
|
+
id: w,
|
|
58
58
|
className: e.description,
|
|
59
59
|
children: h
|
|
60
60
|
}),
|
|
61
|
-
/* @__PURE__ */
|
|
61
|
+
/* @__PURE__ */ u("div", {
|
|
62
62
|
className: e.body,
|
|
63
|
+
"data-cascivo-modal-body": "",
|
|
63
64
|
children: g
|
|
65
|
+
}),
|
|
66
|
+
_ && /* @__PURE__ */ u("div", {
|
|
67
|
+
className: e.footer,
|
|
68
|
+
"data-cascivo-modal-footer": "",
|
|
69
|
+
children: _
|
|
64
70
|
})
|
|
65
71
|
]
|
|
66
72
|
})
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
var e = {
|
|
4
|
-
dialog: "
|
|
5
|
-
panel: "
|
|
6
|
-
header: "
|
|
7
|
-
title: "
|
|
8
|
-
close: "
|
|
9
|
-
description: "
|
|
10
|
-
body: "
|
|
4
|
+
dialog: "_dialog_hywey_2",
|
|
5
|
+
panel: "_panel_hywey_69",
|
|
6
|
+
header: "_header_hywey_79",
|
|
7
|
+
title: "_title_hywey_101",
|
|
8
|
+
close: "_close_hywey_110",
|
|
9
|
+
description: "_description_hywey_138",
|
|
10
|
+
body: "_body_hywey_148",
|
|
11
|
+
footer: "_footer_hywey_166"
|
|
11
12
|
};
|
|
12
13
|
//#endregion
|
|
13
14
|
export { e as default };
|
|
@@ -2,98 +2,98 @@
|
|
|
2
2
|
|
|
3
3
|
import { usePopover as e } from "../popover/use-popover.js";
|
|
4
4
|
import t from "./multi-select.module.js";
|
|
5
|
-
import { cn as n,
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
5
|
+
import { cn as n, focusElement as r, useComputed as i, useSignal as a, useSignalEffect as o, useSignals as s } from "@cascivo/core";
|
|
6
|
+
import { useRef as c } from "react";
|
|
7
|
+
import { builtin as l, t as u } from "@cascivo/i18n";
|
|
8
|
+
import { jsx as d, jsxs as f } from "react/jsx-runtime";
|
|
9
9
|
//#region ../components/src/multi-select/multi-select.tsx
|
|
10
|
-
function
|
|
11
|
-
|
|
12
|
-
let
|
|
13
|
-
let e =
|
|
14
|
-
return e ?
|
|
10
|
+
function p({ options: p, value: m, onValueChange: h, placeholder: g, disabled: _ = !1, labels: v, className: y, ...b }) {
|
|
11
|
+
s();
|
|
12
|
+
let x = e({ placement: "bottom" }), S = a(""), C = a(-1), w = c(null), T = c(null), E = i(() => {
|
|
13
|
+
let e = S.value.toLowerCase();
|
|
14
|
+
return e ? p.filter((t) => t.label.toLowerCase().includes(e)) : p;
|
|
15
15
|
});
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
}),
|
|
19
|
-
let e =
|
|
20
|
-
if (!e || !
|
|
16
|
+
o(() => {
|
|
17
|
+
x.isOpen.value ? (C.value = -1, setTimeout(() => r(T.current), 0)) : S.value = "";
|
|
18
|
+
}), o(() => {
|
|
19
|
+
let e = w.current;
|
|
20
|
+
if (!e || !x.isOpen.value) return;
|
|
21
21
|
let t = (e) => {
|
|
22
|
-
let t =
|
|
23
|
-
if (e.key === "ArrowDown") e.preventDefault(),
|
|
24
|
-
else if (e.key === "ArrowUp") e.preventDefault(),
|
|
22
|
+
let t = E.value;
|
|
23
|
+
if (e.key === "ArrowDown") e.preventDefault(), C.value = Math.min(C.value + 1, t.length - 1);
|
|
24
|
+
else if (e.key === "ArrowUp") e.preventDefault(), C.value = Math.max(C.value - 1, -1);
|
|
25
25
|
else if (e.key === " " || e.key === "Enter") {
|
|
26
|
-
let n = t[
|
|
27
|
-
n && !n.disabled && (e.preventDefault(),
|
|
28
|
-
} else e.key === "Escape" &&
|
|
26
|
+
let n = t[C.value];
|
|
27
|
+
n && !n.disabled && (e.preventDefault(), D(n.value));
|
|
28
|
+
} else e.key === "Escape" && x.close();
|
|
29
29
|
};
|
|
30
30
|
return e.addEventListener("keydown", t), () => e.removeEventListener("keydown", t);
|
|
31
31
|
});
|
|
32
|
-
function
|
|
33
|
-
|
|
32
|
+
function D(e) {
|
|
33
|
+
m.includes(e) ? h(m.filter((t) => t !== e)) : h([...m, e]);
|
|
34
34
|
}
|
|
35
|
-
let
|
|
36
|
-
return /* @__PURE__ */
|
|
37
|
-
className: n(t.wrapper,
|
|
38
|
-
...
|
|
39
|
-
children: [/* @__PURE__ */
|
|
40
|
-
ref:
|
|
35
|
+
let O = m.length === 0 ? g ?? v?.placeholder ?? u(l.multiSelect.placeholder) : v?.selected ? v.selected(m.length) : u(l.multiSelect.selected, { count: String(m.length) }), k = v?.search ?? u(l.multiSelect.search), A = v?.noResults ?? u(l.multiSelect.noResults);
|
|
36
|
+
return /* @__PURE__ */ f("div", {
|
|
37
|
+
className: n(t.wrapper, y),
|
|
38
|
+
...b,
|
|
39
|
+
children: [/* @__PURE__ */ f("button", {
|
|
40
|
+
ref: x.triggerRef,
|
|
41
41
|
type: "button",
|
|
42
42
|
className: t.trigger,
|
|
43
43
|
"aria-haspopup": "listbox",
|
|
44
|
-
"aria-expanded":
|
|
45
|
-
disabled:
|
|
46
|
-
style: { anchorName:
|
|
47
|
-
onClick: () =>
|
|
48
|
-
children: [/* @__PURE__ */
|
|
44
|
+
"aria-expanded": x.isOpen.value,
|
|
45
|
+
disabled: _,
|
|
46
|
+
style: { anchorName: x.anchorName },
|
|
47
|
+
onClick: () => x.toggle(),
|
|
48
|
+
children: [/* @__PURE__ */ d("span", {
|
|
49
49
|
className: t["trigger-label"],
|
|
50
|
-
children:
|
|
51
|
-
}), /* @__PURE__ */
|
|
50
|
+
children: O
|
|
51
|
+
}), /* @__PURE__ */ d("span", {
|
|
52
52
|
className: t.chevron,
|
|
53
53
|
"aria-hidden": "true"
|
|
54
54
|
})]
|
|
55
|
-
}), /* @__PURE__ */
|
|
56
|
-
ref:
|
|
55
|
+
}), /* @__PURE__ */ f("div", {
|
|
56
|
+
ref: x.popoverRef,
|
|
57
57
|
popover: "auto",
|
|
58
58
|
className: t.panel,
|
|
59
|
-
style: { positionAnchor:
|
|
59
|
+
style: { positionAnchor: x.anchorName },
|
|
60
60
|
tabIndex: -1,
|
|
61
|
-
children: [/* @__PURE__ */
|
|
61
|
+
children: [/* @__PURE__ */ d("div", {
|
|
62
62
|
className: t["search-row"],
|
|
63
|
-
children: /* @__PURE__ */
|
|
64
|
-
ref:
|
|
63
|
+
children: /* @__PURE__ */ d("input", {
|
|
64
|
+
ref: T,
|
|
65
65
|
type: "search",
|
|
66
66
|
className: t.search,
|
|
67
|
-
placeholder:
|
|
68
|
-
value:
|
|
67
|
+
placeholder: k,
|
|
68
|
+
value: S.value,
|
|
69
69
|
onChange: (e) => {
|
|
70
|
-
|
|
70
|
+
S.value = e.currentTarget.value, C.value = -1;
|
|
71
71
|
}
|
|
72
72
|
})
|
|
73
|
-
}), /* @__PURE__ */
|
|
74
|
-
ref:
|
|
73
|
+
}), /* @__PURE__ */ d("div", {
|
|
74
|
+
ref: w,
|
|
75
75
|
role: "listbox",
|
|
76
76
|
"aria-multiselectable": "true",
|
|
77
|
-
"aria-label":
|
|
77
|
+
"aria-label": v?.label ?? u(l.multiSelect.label),
|
|
78
78
|
className: t.options,
|
|
79
|
-
children:
|
|
79
|
+
children: E.value.length === 0 ? /* @__PURE__ */ d("div", {
|
|
80
80
|
className: t["no-results"],
|
|
81
|
-
children:
|
|
82
|
-
}) :
|
|
81
|
+
children: A
|
|
82
|
+
}) : E.value.map((e, n) => /* @__PURE__ */ f("div", {
|
|
83
83
|
role: "option",
|
|
84
|
-
"aria-selected":
|
|
84
|
+
"aria-selected": m.includes(e.value),
|
|
85
85
|
"aria-disabled": e.disabled,
|
|
86
|
-
"data-active": n ===
|
|
87
|
-
"data-selected":
|
|
86
|
+
"data-active": n === C.value ? "" : void 0,
|
|
87
|
+
"data-selected": m.includes(e.value) ? "" : void 0,
|
|
88
88
|
"data-disabled": e.disabled ? "" : void 0,
|
|
89
89
|
className: t.option,
|
|
90
90
|
onMouseDown: (t) => {
|
|
91
|
-
t.preventDefault(), e.disabled ||
|
|
91
|
+
t.preventDefault(), e.disabled || D(e.value);
|
|
92
92
|
},
|
|
93
93
|
onMouseEnter: () => {
|
|
94
|
-
|
|
94
|
+
C.value = n;
|
|
95
95
|
},
|
|
96
|
-
children: [/* @__PURE__ */
|
|
96
|
+
children: [/* @__PURE__ */ d("span", {
|
|
97
97
|
className: t.checkbox,
|
|
98
98
|
"aria-hidden": "true"
|
|
99
99
|
}), e.label]
|
|
@@ -103,4 +103,4 @@ function f({ options: f, value: p, onValueChange: m, placeholder: h, disabled: g
|
|
|
103
103
|
});
|
|
104
104
|
}
|
|
105
105
|
//#endregion
|
|
106
|
-
export {
|
|
106
|
+
export { p as MultiSelect };
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
var e = {
|
|
4
|
-
wrapper: "
|
|
5
|
-
trigger: "
|
|
6
|
-
"trigger-label": "_trigger-
|
|
7
|
-
chevron: "
|
|
8
|
-
panel: "
|
|
9
|
-
"search-row": "_search-
|
|
10
|
-
search: "
|
|
11
|
-
options: "
|
|
12
|
-
option: "
|
|
13
|
-
checkbox: "
|
|
14
|
-
"no-results": "_no-
|
|
4
|
+
wrapper: "_wrapper_1fi6e_2",
|
|
5
|
+
trigger: "_trigger_1fi6e_12",
|
|
6
|
+
"trigger-label": "_trigger-label_1fi6e_51",
|
|
7
|
+
chevron: "_chevron_1fi6e_63",
|
|
8
|
+
panel: "_panel_1fi6e_83",
|
|
9
|
+
"search-row": "_search-row_1fi6e_128",
|
|
10
|
+
search: "_search_1fi6e_128",
|
|
11
|
+
options: "_options_1fi6e_149",
|
|
12
|
+
option: "_option_1fi6e_149",
|
|
13
|
+
checkbox: "_checkbox_1fi6e_177",
|
|
14
|
+
"no-results": "_no-results_1fi6e_192"
|
|
15
15
|
};
|
|
16
16
|
//#endregion
|
|
17
17
|
export { e as default };
|