asheeui 0.6.7 → 0.6.9
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/autocomplete/Autocomplete.d.ts +34 -17
- package/dist/components/autocomplete/Autocomplete.d.ts.map +1 -1
- package/dist/components/autocomplete/Autocomplete.js +90 -106
- package/dist/components/autocomplete/autocomplete-config.d.ts +2 -20
- package/dist/components/autocomplete/autocomplete-config.d.ts.map +1 -1
- package/dist/components/autocomplete/autocomplete-config.js +9 -13
- package/dist/components/button/Button.d.ts +31 -5
- package/dist/components/button/Button.d.ts.map +1 -1
- package/dist/components/button/Button.js +68 -64
- package/dist/components/card/Card.d.ts +58 -54
- package/dist/components/card/Card.d.ts.map +1 -1
- package/dist/components/card/Card.js +152 -158
- package/dist/components/card/card-config.d.ts +66 -33
- package/dist/components/card/card-config.d.ts.map +1 -1
- package/dist/components/card/card-config.js +9 -9
- package/dist/components/date-picker/Calendar.d.ts +57 -0
- package/dist/components/date-picker/Calendar.d.ts.map +1 -0
- package/dist/components/date-picker/Calendar.js +224 -0
- package/dist/components/date-picker/DatePicker.d.ts +68 -155
- package/dist/components/date-picker/DatePicker.d.ts.map +1 -1
- package/dist/components/date-picker/DatePicker.js +194 -466
- package/dist/components/date-picker/TimeSpinner.d.ts +46 -0
- package/dist/components/date-picker/TimeSpinner.d.ts.map +1 -0
- package/dist/components/date-picker/TimeSpinner.js +84 -0
- package/dist/components/date-picker/date-picker-config.d.ts +21 -1
- package/dist/components/date-picker/date-picker-config.d.ts.map +1 -1
- package/dist/components/date-picker/date-picker-config.js +10 -14
- package/dist/components/date-picker/date-picker-styles.d.ts.map +1 -1
- package/dist/components/date-picker/date-picker-styles.js +4 -11
- package/dist/components/date-picker/date-picker.helpers.d.ts +111 -0
- package/dist/components/date-picker/date-picker.helpers.d.ts.map +1 -0
- package/dist/components/date-picker/date-picker.helpers.js +110 -0
- package/dist/components/date-picker/index.js +3 -0
- package/dist/components/input/Input.d.ts +13 -7
- package/dist/components/input/Input.d.ts.map +1 -1
- package/dist/components/input/Input.js +96 -91
- package/dist/components/keyboard/KeyboardContext.d.ts +130 -0
- package/dist/components/keyboard/KeyboardContext.d.ts.map +1 -0
- package/dist/components/keyboard/KeyboardContext.js +13 -0
- package/dist/components/keyboard/KeyboardProvider.d.ts +78 -0
- package/dist/components/keyboard/KeyboardProvider.d.ts.map +1 -0
- package/dist/components/keyboard/KeyboardProvider.js +183 -0
- package/dist/components/keyboard/OnScreenKeyboard.d.ts +65 -43
- package/dist/components/keyboard/OnScreenKeyboard.d.ts.map +1 -1
- package/dist/components/keyboard/OnScreenKeyboard.js +119 -113
- package/dist/components/keyboard/index.d.ts +2 -1
- package/dist/components/keyboard/index.d.ts.map +1 -1
- package/dist/components/keyboard/index.js +2 -1
- package/dist/components/keyboard/keyboard-config.d.ts +40 -36
- package/dist/components/keyboard/keyboard-config.d.ts.map +1 -1
- package/dist/components/keyboard/keyboard-config.js +15 -10
- package/dist/components/keyboard/use-keyboard-field.d.ts +6 -4
- package/dist/components/keyboard/use-keyboard-field.d.ts.map +1 -1
- package/dist/components/keyboard/use-keyboard-field.js +12 -12
- package/dist/components/modal/Modal.d.ts.map +1 -1
- package/dist/components/modal/Modal.js +59 -65
- package/dist/components/multi-select/MultiSelect.d.ts +75 -40
- package/dist/components/multi-select/MultiSelect.d.ts.map +1 -1
- package/dist/components/multi-select/MultiSelect.js +188 -188
- package/dist/components/multi-select/multi-select-config.d.ts +2 -20
- package/dist/components/multi-select/multi-select-config.d.ts.map +1 -1
- package/dist/components/multi-select/multi-select-config.js +10 -14
- package/dist/components/select/Select.d.ts +60 -45
- package/dist/components/select/Select.d.ts.map +1 -1
- package/dist/components/select/Select.js +149 -161
- package/dist/components/select/select-config.d.ts +3 -29
- package/dist/components/select/select-config.d.ts.map +1 -1
- package/dist/components/select/select-config.js +6 -14
- package/dist/components/select/select-styles.js +1 -6
- package/dist/components/select-menu/SelectMenu.d.ts +48 -42
- package/dist/components/select-menu/SelectMenu.d.ts.map +1 -1
- package/dist/components/select-menu/SelectMenu.js +137 -123
- package/dist/components/select-menu/select-menu-config.d.ts +33 -2
- package/dist/components/select-menu/select-menu-config.d.ts.map +1 -1
- package/dist/components/select-menu/select-menu-config.js +3 -1
- package/dist/components/sidebar/Sidebar.js +1 -1
- package/dist/components/switch/Switch.d.ts +9 -33
- package/dist/components/switch/Switch.d.ts.map +1 -1
- package/dist/components/switch/Switch.js +68 -74
- package/dist/components/switch/switch-styles.d.ts +1 -6
- package/dist/components/switch/switch-styles.d.ts.map +1 -1
- package/dist/components/switch/switch-styles.js +6 -12
- package/dist/components/tabs/Tabs.js +1 -1
- package/dist/components/textarea/Textarea.d.ts +19 -1
- package/dist/components/textarea/Textarea.d.ts.map +1 -1
- package/dist/components/textarea/Textarea.js +95 -90
- package/dist/components/toast/ToastContext.d.ts +122 -0
- package/dist/components/toast/ToastContext.d.ts.map +1 -0
- package/dist/components/toast/ToastContext.js +28 -0
- package/dist/components/toast/ToastProvider.d.ts +98 -0
- package/dist/components/toast/ToastProvider.d.ts.map +1 -0
- package/dist/components/toast/ToastProvider.js +188 -0
- package/dist/components/toast/index.d.ts +2 -1
- package/dist/components/toast/index.d.ts.map +1 -1
- package/dist/components/toast/index.js +2 -1
- package/dist/components/toast/toast-config.d.ts +36 -0
- package/dist/components/toast/toast-config.d.ts.map +1 -1
- package/dist/icons/ChevronUpIcon.d.ts +3 -0
- package/dist/icons/ChevronUpIcon.d.ts.map +1 -0
- package/dist/icons/ChevronUpIcon.js +21 -0
- package/dist/icons/index.d.ts +2 -0
- package/dist/icons/index.d.ts.map +1 -1
- package/dist/index.css +24 -2
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +62 -59
- package/dist/theme/color.js +2 -2
- package/package.json +1 -1
- package/dist/components/keyboard/keyboard-context.d.ts +0 -118
- package/dist/components/keyboard/keyboard-context.d.ts.map +0 -1
- package/dist/components/keyboard/keyboard-context.js +0 -90
- package/dist/components/toast/toast-context.d.ts +0 -163
- package/dist/components/toast/toast-context.d.ts.map +0 -1
- package/dist/components/toast/toast-context.js +0 -177
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { RefObject } from 'react';
|
|
2
|
-
import { KeyboardElement } from './
|
|
2
|
+
import { KeyboardElement, KeyboardOpenOptions } from './KeyboardContext';
|
|
3
3
|
/**
|
|
4
4
|
* Hook that connects a form input to the virtual keyboard system.
|
|
5
5
|
*
|
|
@@ -11,6 +11,7 @@ import { KeyboardElement } from './keyboard-context';
|
|
|
11
11
|
* @param ref - Optional ref to the input element.
|
|
12
12
|
* @param enabled - Whether the keyboard should be enabled for this field.
|
|
13
13
|
* Defaults to false (opt-in behavior).
|
|
14
|
+
* @param options - Optional configuration overrides for this field.
|
|
14
15
|
* @returns An object containing handleFocus, handleBlur, and hasProvider.
|
|
15
16
|
*
|
|
16
17
|
* @example
|
|
@@ -21,7 +22,8 @@ import { KeyboardElement } from './keyboard-context';
|
|
|
21
22
|
* const { handleFocus, handleBlur } = useKeyboardField(
|
|
22
23
|
* "my-input",
|
|
23
24
|
* inputRef,
|
|
24
|
-
* true
|
|
25
|
+
* true,
|
|
26
|
+
* { layout: "numeric", size: "lg" }
|
|
25
27
|
* );
|
|
26
28
|
*
|
|
27
29
|
* return (
|
|
@@ -35,9 +37,9 @@ import { KeyboardElement } from './keyboard-context';
|
|
|
35
37
|
* ```
|
|
36
38
|
*
|
|
37
39
|
* @see KeyboardProvider - The provider that enables the keyboard.
|
|
38
|
-
* @see
|
|
40
|
+
* @see useKeyboard - Hook for accessing the keyboard context.
|
|
39
41
|
*/
|
|
40
|
-
export declare function useKeyboardField(id: string, ref?: RefObject<KeyboardElement | null>, enabled?: boolean): {
|
|
42
|
+
export declare function useKeyboardField(id: string, ref?: RefObject<KeyboardElement | null>, enabled?: boolean, options?: KeyboardOpenOptions): {
|
|
41
43
|
handleFocus: (e?: React.FocusEvent<KeyboardElement>) => void;
|
|
42
44
|
handleBlur: () => void;
|
|
43
45
|
hasProvider: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-keyboard-field.d.ts","sourceRoot":"","sources":["../../../src/components/keyboard/use-keyboard-field.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,KAAK,SAAS,EAA2B,MAAM,OAAO,CAAC;AAChE,OAAO,
|
|
1
|
+
{"version":3,"file":"use-keyboard-field.d.ts","sourceRoot":"","sources":["../../../src/components/keyboard/use-keyboard-field.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,KAAK,SAAS,EAA2B,MAAM,OAAO,CAAC;AAChE,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACzB,MAAM,mBAAmB,CAAC;AAE3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,wBAAgB,gBAAgB,CAC9B,EAAE,EAAE,MAAM,EACV,GAAG,CAAC,EAAE,SAAS,CAAC,eAAe,GAAG,IAAI,CAAC,EACvC,OAAO,GAAE,OAAe,EACxB,OAAO,CAAC,EAAE,mBAAmB;sBAKtB,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC;;;EAoBzC"}
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { useContext as
|
|
3
|
-
import { KeyboardContext as
|
|
4
|
-
function y(t, r, e = !1) {
|
|
5
|
-
const o =
|
|
6
|
-
(
|
|
7
|
-
if (!e || !o) return;
|
|
8
|
-
const
|
|
9
|
-
|
|
2
|
+
import { useContext as i, useCallback as a } from "react";
|
|
3
|
+
import { KeyboardContext as m } from "./KeyboardContext.js";
|
|
4
|
+
function y(t, r, e = !1, n) {
|
|
5
|
+
const o = i(m), c = a(
|
|
6
|
+
(s) => {
|
|
7
|
+
if (!e || !o || o.isDisabled) return;
|
|
8
|
+
const u = (s == null ? void 0 : s.currentTarget) ?? (r == null ? void 0 : r.current);
|
|
9
|
+
u && o.openKeyboard(t, u, n);
|
|
10
10
|
},
|
|
11
|
-
[t, r, e, o]
|
|
12
|
-
),
|
|
13
|
-
!e || !o || o.requestClose(t);
|
|
11
|
+
[t, r, e, o, n]
|
|
12
|
+
), l = a(() => {
|
|
13
|
+
!e || !o || o.isDisabled || o.requestClose(t);
|
|
14
14
|
}, [t, e, o]);
|
|
15
15
|
return {
|
|
16
16
|
handleFocus: c,
|
|
17
|
-
handleBlur:
|
|
17
|
+
handleBlur: l,
|
|
18
18
|
hasProvider: !!o
|
|
19
19
|
};
|
|
20
20
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"AASA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AASf,OAAO,EAEL,KAAK,WAAW,EAGjB,MAAM,gBAAgB,CAAC;AAGxB,KAAK,cAAc,GAAG,WAAW,GAC/B,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,CAAC;AAE/C;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD;;;OAGG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2EG;AACH,wBAAgB,KAAK,CAAC,EACpB,MAAM,EACN,OAAO,EACP,QAAQ,EACR,KAAK,EACL,MAAM,EACN,IAAI,EACJ,QAAQ,EAAE,YAAY,EACtB,MAAM,EACN,QAAQ,EAAE,YAAY,EACtB,oBAAoB,EAAE,wBAAwB,EAC9C,aAAa,EAAE,iBAAiB,EAChC,gBAAgB,EAAE,oBAAoB,EACtC,gBAAgB,EAAE,oBAAoB,EACtC,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,UAAU,
|
|
1
|
+
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"AASA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AASf,OAAO,EAEL,KAAK,WAAW,EAGjB,MAAM,gBAAgB,CAAC;AAGxB,KAAK,cAAc,GAAG,WAAW,GAC/B,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,CAAC;AAE/C;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD;;;OAGG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2EG;AACH,wBAAgB,KAAK,CAAC,EACpB,MAAM,EACN,OAAO,EACP,QAAQ,EACR,KAAK,EACL,MAAM,EACN,IAAI,EACJ,QAAQ,EAAE,YAAY,EACtB,MAAM,EACN,QAAQ,EAAE,YAAY,EACtB,oBAAoB,EAAE,wBAAwB,EAC9C,aAAa,EAAE,iBAAiB,EAChC,gBAAgB,EAAE,oBAAoB,EACtC,gBAAgB,EAAE,oBAAoB,EACtC,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,UAAU,sCA+JZ;yBAhLe,KAAK"}
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsxs as P, jsx as
|
|
3
|
-
import { useState as
|
|
2
|
+
import { jsxs as P, jsx as v } from "react/jsx-runtime";
|
|
3
|
+
import { useState as y, useEffect as A } from "react";
|
|
4
4
|
import { useAsheeConfig as U } from "../../libs/context.js";
|
|
5
|
-
import { resolveCascade as a, resolveRadiusKey as W, resolveClassKey as
|
|
6
|
-
import { FALLBACK_MODAL_CONFIG as
|
|
7
|
-
import { MODAL_MAX_WIDTH_CLASS as X, MODAL_POSITION_CLASS as
|
|
5
|
+
import { resolveCascade as a, resolveRadiusKey as W, resolveClassKey as b } from "../../utils/resolve-token.js";
|
|
6
|
+
import { FALLBACK_MODAL_CONFIG as s } from "./modal-config.js";
|
|
7
|
+
import { MODAL_MAX_WIDTH_CLASS as X, MODAL_POSITION_CLASS as S } from "./modal-styles.js";
|
|
8
8
|
import { RADIUS_CLASS as J } from "../../shared/radius.js";
|
|
9
|
-
import { cn as
|
|
9
|
+
import { cn as l } from "../../utils/cn.js";
|
|
10
10
|
function Q({
|
|
11
|
-
isOpen:
|
|
12
|
-
onClose:
|
|
13
|
-
children:
|
|
14
|
-
width:
|
|
11
|
+
isOpen: o,
|
|
12
|
+
onClose: t,
|
|
13
|
+
children: w,
|
|
14
|
+
width: d,
|
|
15
15
|
height: L,
|
|
16
|
-
size:
|
|
17
|
-
position:
|
|
18
|
-
radius:
|
|
16
|
+
size: O,
|
|
17
|
+
position: h,
|
|
18
|
+
radius: x,
|
|
19
19
|
animated: E,
|
|
20
20
|
closeOnBackdropClick: N,
|
|
21
21
|
closeOnEscape: _,
|
|
@@ -25,114 +25,108 @@ function Q({
|
|
|
25
25
|
style: C,
|
|
26
26
|
...D
|
|
27
27
|
}) {
|
|
28
|
-
var
|
|
29
|
-
const
|
|
30
|
-
|
|
28
|
+
var k;
|
|
29
|
+
const c = U(), e = (k = c.components) == null ? void 0 : k.modal, [m, u] = y(!1), [I, n] = y(o), K = a(
|
|
30
|
+
O,
|
|
31
31
|
e == null ? void 0 : e.size,
|
|
32
32
|
void 0,
|
|
33
|
-
|
|
33
|
+
s.size
|
|
34
34
|
), R = a(
|
|
35
|
-
|
|
35
|
+
h,
|
|
36
36
|
e == null ? void 0 : e.position,
|
|
37
37
|
void 0,
|
|
38
|
-
|
|
38
|
+
s.position
|
|
39
39
|
), T = a(
|
|
40
40
|
N,
|
|
41
41
|
e == null ? void 0 : e.closeOnBackdropClick,
|
|
42
42
|
void 0,
|
|
43
|
-
|
|
43
|
+
s.closeOnBackdropClick
|
|
44
44
|
), p = a(
|
|
45
45
|
_,
|
|
46
46
|
e == null ? void 0 : e.closeOnEscape,
|
|
47
47
|
void 0,
|
|
48
|
-
|
|
49
|
-
),
|
|
50
|
-
|
|
48
|
+
s.closeOnEscape
|
|
49
|
+
), j = W(
|
|
50
|
+
x,
|
|
51
51
|
e == null ? void 0 : e.radius,
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
),
|
|
52
|
+
c.defaultRadius,
|
|
53
|
+
s.radius
|
|
54
|
+
), r = a(
|
|
55
55
|
E,
|
|
56
56
|
e == null ? void 0 : e.animated,
|
|
57
57
|
void 0,
|
|
58
|
-
|
|
59
|
-
),
|
|
58
|
+
s.animated
|
|
59
|
+
), F = d ? "" : b(
|
|
60
60
|
K,
|
|
61
61
|
X,
|
|
62
|
-
|
|
63
|
-
),
|
|
64
|
-
|
|
62
|
+
s.size
|
|
63
|
+
), g = b(
|
|
64
|
+
j,
|
|
65
65
|
J,
|
|
66
|
-
|
|
67
|
-
), q =
|
|
68
|
-
if (
|
|
69
|
-
if (
|
|
66
|
+
s.radius
|
|
67
|
+
), q = S[R] ?? S.center;
|
|
68
|
+
if (A(() => {
|
|
69
|
+
if (o)
|
|
70
70
|
n(!0), requestAnimationFrame(() => {
|
|
71
|
-
|
|
71
|
+
u(!1);
|
|
72
72
|
});
|
|
73
|
-
else if (
|
|
74
|
-
|
|
75
|
-
const
|
|
73
|
+
else if (r) {
|
|
74
|
+
u(!0);
|
|
75
|
+
const i = setTimeout(() => {
|
|
76
76
|
n(!1);
|
|
77
77
|
}, 200);
|
|
78
|
-
return () => clearTimeout(
|
|
78
|
+
return () => clearTimeout(i);
|
|
79
79
|
} else
|
|
80
80
|
n(!1);
|
|
81
|
-
}, [
|
|
82
|
-
if (!
|
|
83
|
-
const
|
|
84
|
-
H.key === "Escape" &&
|
|
85
|
-
};
|
|
86
|
-
return window.addEventListener("keydown", r), () => window.removeEventListener("keydown", r);
|
|
87
|
-
}, [t, p, s]), d(() => {
|
|
88
|
-
if (!t) return;
|
|
89
|
-
const r = document.body.style.overflow;
|
|
90
|
-
return document.body.style.overflow = "hidden", () => {
|
|
91
|
-
document.body.style.overflow = r;
|
|
81
|
+
}, [o, r]), A(() => {
|
|
82
|
+
if (!o || !p || !t) return;
|
|
83
|
+
const i = (H) => {
|
|
84
|
+
H.key === "Escape" && t();
|
|
92
85
|
};
|
|
93
|
-
|
|
94
|
-
|
|
86
|
+
return window.addEventListener("keydown", i), () => window.removeEventListener("keydown", i);
|
|
87
|
+
}, [o, p, t]), !I) return null;
|
|
88
|
+
const f = () => r ? m ? "animate-backdrop-out" : "animate-backdrop-in" : "", G = () => r ? m ? "animate-modal-out" : "animate-modal-in" : "";
|
|
95
89
|
return /* @__PURE__ */ P(
|
|
96
90
|
"div",
|
|
97
91
|
{
|
|
98
92
|
role: "dialog",
|
|
99
93
|
"aria-modal": "true",
|
|
100
|
-
className:
|
|
101
|
-
"fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6
|
|
102
|
-
|
|
94
|
+
className: l(
|
|
95
|
+
"fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 h-screen w-screen scrollbar-hide",
|
|
96
|
+
f()
|
|
103
97
|
),
|
|
104
98
|
children: [
|
|
105
|
-
/* @__PURE__ */
|
|
99
|
+
/* @__PURE__ */ v(
|
|
106
100
|
"button",
|
|
107
101
|
{
|
|
108
102
|
type: "button",
|
|
109
|
-
onClick: T ?
|
|
110
|
-
className:
|
|
103
|
+
onClick: T ? t : void 0,
|
|
104
|
+
className: l(
|
|
111
105
|
"fixed inset-0 bg-background/80 backdrop-blur-xs dark:bg-black/70",
|
|
112
106
|
M,
|
|
113
|
-
|
|
107
|
+
f()
|
|
114
108
|
)
|
|
115
109
|
}
|
|
116
110
|
),
|
|
117
|
-
/* @__PURE__ */
|
|
111
|
+
/* @__PURE__ */ v(
|
|
118
112
|
"div",
|
|
119
113
|
{
|
|
120
|
-
className:
|
|
114
|
+
className: l(
|
|
121
115
|
"relative z-10 w-full bg-background text-foreground overflow-y-auto max-h-[90vh]",
|
|
122
116
|
q,
|
|
123
|
-
j,
|
|
124
117
|
F,
|
|
118
|
+
g,
|
|
125
119
|
z,
|
|
126
120
|
G(),
|
|
127
121
|
B
|
|
128
122
|
),
|
|
129
123
|
style: {
|
|
130
|
-
width:
|
|
124
|
+
width: d,
|
|
131
125
|
height: L,
|
|
132
126
|
...C
|
|
133
127
|
},
|
|
134
128
|
...D,
|
|
135
|
-
children:
|
|
129
|
+
children: w
|
|
136
130
|
}
|
|
137
131
|
)
|
|
138
132
|
]
|
|
@@ -1,11 +1,23 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { InputProps } from '../input/Input';
|
|
2
3
|
import { SelectMenuOption } from '../select-menu';
|
|
4
|
+
import { MenuProps } from '../select-menu/SelectMenu';
|
|
3
5
|
import { MultiSelectConfig } from './multi-select-config';
|
|
4
|
-
|
|
6
|
+
/**
|
|
7
|
+
* Field-related props that MultiSelect inherits from Input.
|
|
8
|
+
* Picked to avoid conflicts with Button-specific props.
|
|
9
|
+
*/
|
|
10
|
+
type MultiSelectFieldProps = Pick<InputProps, "label" | "description" | "message" | "required" | "isLoading" | "status" | "labelAlign" | "className" | "id" | "style">;
|
|
11
|
+
/**
|
|
12
|
+
* Content-related props from Input.
|
|
13
|
+
*/
|
|
14
|
+
type MultiSelectContentProps = Pick<InputProps, "startContent" | "endContent">;
|
|
5
15
|
/**
|
|
6
16
|
* Configuration options for the MultiSelect component.
|
|
17
|
+
* Extends field and content props from Input, and MultiSelectConfig for
|
|
18
|
+
* component-specific options. Uses Button for trigger styling.
|
|
7
19
|
*/
|
|
8
|
-
export interface MultiSelectProps extends
|
|
20
|
+
export interface MultiSelectProps extends MultiSelectFieldProps, MultiSelectContentProps, Omit<MultiSelectConfig, "menu"> {
|
|
9
21
|
/**
|
|
10
22
|
* Available options to select from.
|
|
11
23
|
* Each option must have a label and a unique value.
|
|
@@ -23,26 +35,31 @@ export interface MultiSelectProps extends BaseMultiSelectProps {
|
|
|
23
35
|
onChange?: (values: (string | number)[]) => void;
|
|
24
36
|
/**
|
|
25
37
|
* Label shown in the trigger when no items are selected.
|
|
38
|
+
*
|
|
26
39
|
* @default "Select Options..."
|
|
27
40
|
*/
|
|
28
41
|
InputLabel?: string;
|
|
29
42
|
/**
|
|
30
43
|
* Whether search input is shown in the dropdown.
|
|
44
|
+
*
|
|
31
45
|
* @default true
|
|
32
46
|
*/
|
|
33
47
|
isSearch?: boolean;
|
|
34
48
|
/**
|
|
35
49
|
* Placeholder text for the search input.
|
|
50
|
+
*
|
|
36
51
|
* @default "Search..."
|
|
37
52
|
*/
|
|
38
53
|
searchPlaceholder?: string;
|
|
39
54
|
/**
|
|
40
55
|
* Name attribute for the search input.
|
|
56
|
+
*
|
|
41
57
|
* @default "multiselect-search"
|
|
42
58
|
*/
|
|
43
59
|
searchInputName?: string;
|
|
44
60
|
/**
|
|
45
61
|
* Content rendered below the options list.
|
|
62
|
+
* Useful for adding "Add new" buttons or status messages.
|
|
46
63
|
*/
|
|
47
64
|
belowList?: ReactNode;
|
|
48
65
|
/**
|
|
@@ -66,44 +83,29 @@ export interface MultiSelectProps extends BaseMultiSelectProps {
|
|
|
66
83
|
chipLabel?: string;
|
|
67
84
|
/**
|
|
68
85
|
* Whether to hide the chip display section.
|
|
86
|
+
*
|
|
69
87
|
* @default false
|
|
70
88
|
*/
|
|
71
89
|
disableChipDisplay?: boolean;
|
|
72
90
|
/**
|
|
73
|
-
*
|
|
74
|
-
*/
|
|
75
|
-
label?: string;
|
|
76
|
-
/**
|
|
77
|
-
* Description text shown below the label.
|
|
78
|
-
*/
|
|
79
|
-
description?: string;
|
|
80
|
-
/**
|
|
81
|
-
* Validation message shown below the field.
|
|
82
|
-
*/
|
|
83
|
-
message?: string;
|
|
84
|
-
/**
|
|
85
|
-
* Whether the field is required.
|
|
86
|
-
* @default false
|
|
91
|
+
* Extra classes for the container.
|
|
87
92
|
*/
|
|
88
|
-
|
|
93
|
+
containerClassName?: string;
|
|
89
94
|
/**
|
|
90
|
-
*
|
|
91
|
-
* @default false
|
|
95
|
+
* Name attribute for the select.
|
|
92
96
|
*/
|
|
93
|
-
|
|
97
|
+
name?: string;
|
|
94
98
|
/**
|
|
95
|
-
* Whether the
|
|
99
|
+
* Whether the select is disabled.
|
|
100
|
+
*
|
|
96
101
|
* @default false
|
|
97
102
|
*/
|
|
98
103
|
disabled?: boolean;
|
|
99
104
|
/**
|
|
100
|
-
*
|
|
105
|
+
* Menu configuration overrides including portal, portalTarget, className, and visual styles.
|
|
106
|
+
* All menu-related props should be passed through this object.
|
|
101
107
|
*/
|
|
102
|
-
|
|
103
|
-
/**
|
|
104
|
-
* Extra classes for the dropdown.
|
|
105
|
-
*/
|
|
106
|
-
dropdownClassName?: string;
|
|
108
|
+
menu?: MenuProps;
|
|
107
109
|
}
|
|
108
110
|
/**
|
|
109
111
|
* A multi-select dropdown with search, chips, and configurable styles.
|
|
@@ -111,18 +113,19 @@ export interface MultiSelectProps extends BaseMultiSelectProps {
|
|
|
111
113
|
* MultiSelect renders a dropdown that allows selecting multiple options
|
|
112
114
|
* from a list. Selected options are displayed as chips below the trigger.
|
|
113
115
|
* It supports search filtering, controlled selection state, validation
|
|
114
|
-
* states,
|
|
115
|
-
* the standard AsheeUI cascade system.
|
|
116
|
+
* states, custom menu and chip styles, and start/end content slots.
|
|
117
|
+
* Visual tokens resolve through the standard AsheeUI cascade system.
|
|
116
118
|
*
|
|
117
|
-
* The component uses
|
|
118
|
-
* and integrates with
|
|
119
|
-
* handling
|
|
119
|
+
* The component uses a Button component as the trigger, which provides
|
|
120
|
+
* consistent button styling and behavior. It integrates with FieldShell for
|
|
121
|
+
* label, description, and message handling, and uses Floating UI for
|
|
122
|
+
* positioning and accessibility.
|
|
120
123
|
*
|
|
121
124
|
* By default, the dropdown menu uses React's createPortal to render at the
|
|
122
125
|
* document body level. This ensures the menu escapes CSS containment, overflow
|
|
123
126
|
* clipping, and stacking context issues. The portal can be disabled via the
|
|
124
|
-
* `portal` prop or `components.multiSelect.portal` in the config
|
|
125
|
-
* needs to stay within a specific parent container.
|
|
127
|
+
* `menu.portal` prop or `components.multiSelect.menu.portal` in the config
|
|
128
|
+
* if the menu needs to stay within a specific parent container.
|
|
126
129
|
*
|
|
127
130
|
* @param props - MultiSelect configuration options.
|
|
128
131
|
* @param props.options - Available options to select from.
|
|
@@ -131,21 +134,31 @@ export interface MultiSelectProps extends BaseMultiSelectProps {
|
|
|
131
134
|
* @param props.InputLabel - Label shown in trigger. Defaults to "Select Options...".
|
|
132
135
|
* @param props.isSearch - Whether search is enabled. Defaults to true.
|
|
133
136
|
* @param props.searchPlaceholder - Search placeholder. Defaults to "Search...".
|
|
137
|
+
* @param props.searchInputName - Name attribute for the search input. Defaults to "multiselect-search".
|
|
134
138
|
* @param props.belowList - Content below the options list.
|
|
139
|
+
* @param props.chipLabel - Label shown above the chip list.
|
|
140
|
+
* @param props.disableChipDisplay - Hide chip display section. Defaults to false.
|
|
135
141
|
* @param props.label - Field label text.
|
|
136
142
|
* @param props.description - Description text.
|
|
137
143
|
* @param props.message - Validation message.
|
|
138
|
-
* @param props.required - Whether the field is required.
|
|
139
|
-
* @param props.isLoading - Loading state.
|
|
140
|
-
* @param props.disabled - Disabled state.
|
|
144
|
+
* @param props.required - Whether the field is required. Defaults to false.
|
|
145
|
+
* @param props.isLoading - Loading state. Defaults to false.
|
|
146
|
+
* @param props.disabled - Disabled state. Defaults to false.
|
|
141
147
|
* @param props.size - Size of the trigger. Defaults to "md".
|
|
142
148
|
* @param props.radius - Corner rounding. Defaults to "md".
|
|
143
149
|
* @param props.variant - Visual style variant. Defaults to "bordered".
|
|
144
150
|
* @param props.color - Theme accent color. Defaults to "primary".
|
|
145
151
|
* @param props.status - Validation status.
|
|
146
152
|
* @param props.labelAlign - Alignment of the label. Defaults to "left".
|
|
147
|
-
* @param props.
|
|
148
|
-
* @param props.
|
|
153
|
+
* @param props.startContent - Content at the start of the trigger button.
|
|
154
|
+
* @param props.endContent - Content at the end of the trigger button.
|
|
155
|
+
* @param props.menu - Menu configuration overrides including className, portal, portalTarget, and visual styles.
|
|
156
|
+
* @param props.containerClassName - Extra classes for the container.
|
|
157
|
+
* @param props.chip - Chip configuration overrides including color, size, and radius.
|
|
158
|
+
* @param props.chipOptions - Custom chip options for legacy control.
|
|
159
|
+
* @param props.handleRemoveChip - Custom handler for removing a chip.
|
|
160
|
+
* @param props.handleAddChip - Custom handler for adding a chip.
|
|
161
|
+
* @param props.name - Name attribute for the select.
|
|
149
162
|
*
|
|
150
163
|
* @example
|
|
151
164
|
* ```tsx
|
|
@@ -173,8 +186,30 @@ export interface MultiSelectProps extends BaseMultiSelectProps {
|
|
|
173
186
|
* }
|
|
174
187
|
* ```
|
|
175
188
|
*
|
|
189
|
+
* @example
|
|
190
|
+
* ```tsx
|
|
191
|
+
* // With custom chip colors and menu configuration
|
|
192
|
+
* <MultiSelect
|
|
193
|
+
* options={fruits}
|
|
194
|
+
* value={selectedFruits}
|
|
195
|
+
* onChange={setSelectedFruits}
|
|
196
|
+
* label="Favorite Fruits"
|
|
197
|
+
* chip={{ color: "success", size: "sm" }}
|
|
198
|
+
* startContent={<FruitIcon />}
|
|
199
|
+
* menu={{
|
|
200
|
+
* className: "custom-dropdown",
|
|
201
|
+
* portal: false,
|
|
202
|
+
* itemVariant: "solid",
|
|
203
|
+
* activeItemColor: "success"
|
|
204
|
+
* }}
|
|
205
|
+
* />
|
|
206
|
+
* ```
|
|
207
|
+
*
|
|
176
208
|
* @see MultiSelectConfig - The configuration type for component defaults.
|
|
209
|
+
* @see Input - The input component that provides field capabilities.
|
|
210
|
+
* @see Button - The button component used as the trigger.
|
|
177
211
|
* @see SelectMenu - The dropdown menu component.
|
|
212
|
+
* @see Chip - The chip component for selected items.
|
|
178
213
|
* @see FieldShell - The wrapper component for label and validation.
|
|
179
214
|
*/
|
|
180
215
|
export declare const MultiSelect: import('react').ForwardRefExoticComponent<MultiSelectProps & import('react').RefAttributes<HTMLButtonElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/multi-select/MultiSelect.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAEL,KAAK,
|
|
1
|
+
{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/multi-select/MultiSelect.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAEL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAgBf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,OAAO,EAAE,KAAK,gBAAgB,EAAqB,MAAM,gBAAgB,CAAC;AAC1E,OAAO,EAAE,KAAK,SAAS,EAAc,MAAM,2BAA2B,CAAC;AACvE,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,uBAAuB,CAAC;AAU/B;;;GAGG;AACH,KAAK,qBAAqB,GAAG,IAAI,CAC/B,UAAU,EACR,OAAO,GACP,aAAa,GACb,SAAS,GACT,UAAU,GACV,WAAW,GACX,QAAQ,GACR,YAAY,GACZ,WAAW,GACX,IAAI,GACJ,OAAO,CACV,CAAC;AAEF;;GAEG;AACH,KAAK,uBAAuB,GAAG,IAAI,CAAC,UAAU,EAAE,cAAc,GAAG,YAAY,CAAC,CAAC;AAE/E;;;;GAIG;AACH,MAAM,WAAW,gBACf,SAAQ,qBAAqB,EAC3B,uBAAuB,EACvB,IAAI,CAAC,iBAAiB,EAAE,MAAM,CAAC;IACjC;;;OAGG;IACH,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAE5B;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAE5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;IAEjD;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAEjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAEjD;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAEjD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwGG;AACH,eAAO,MAAM,WAAW,gHAkYvB,CAAC"}
|