tyrell-react 1.0.0-TC26 → 1.0.0-TC27
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/index.d.ts +0 -8
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +0 -4
- package/dist/components/index.js.map +1 -1
- package/dist/version.d.ts +1 -1
- package/dist/version.js +1 -1
- package/package.json +1 -1
- package/src/components/index.ts +0 -14
- package/src/version.ts +1 -1
- package/dist/components/TyDropdown.d.ts +0 -64
- package/dist/components/TyDropdown.d.ts.map +0 -1
- package/dist/components/TyDropdown.js +0 -136
- package/dist/components/TyDropdown.js.map +0 -1
- package/dist/components/TyMultiselect.d.ts +0 -59
- package/dist/components/TyMultiselect.d.ts.map +0 -1
- package/dist/components/TyMultiselect.js +0 -123
- package/dist/components/TyMultiselect.js.map +0 -1
- package/src/components/TyDropdown.tsx +0 -252
- package/src/components/TyMultiselect.tsx +0 -219
|
@@ -9,8 +9,6 @@ export { TyInput } from './TyInput';
|
|
|
9
9
|
export type { TyInputProps, TyInputEventDetail, TyInputCSSProperties } from './TyInput';
|
|
10
10
|
export { TyTextarea } from './TyTextarea';
|
|
11
11
|
export type { TyTextareaProps, TyTextareaEventDetail } from './TyTextarea';
|
|
12
|
-
export { TyDropdown } from './TyDropdown';
|
|
13
|
-
export type { TyDropdownProps, TyDropdownEventDetail } from './TyDropdown';
|
|
14
12
|
export { TyOption } from './TyOption';
|
|
15
13
|
export type { TyOptionProps } from './TyOption';
|
|
16
14
|
export { TyIcon } from './TyIcon';
|
|
@@ -21,8 +19,6 @@ export { TyModal as TyDialog } from './TyModal';
|
|
|
21
19
|
export type { TyModalProps as TyDialogProps, TyModalEventDetail as TyDialogEventDetail, TyModalRef as TyDialogRef } from './TyModal';
|
|
22
20
|
export { TyTooltip } from './TyTooltip';
|
|
23
21
|
export type { TyTooltipProps } from './TyTooltip';
|
|
24
|
-
export { TyMultiselect } from './TyMultiselect';
|
|
25
|
-
export type { TyMultiselectProps, TyMultiselectEventDetail } from './TyMultiselect';
|
|
26
22
|
export { TySelect, TySelectedTags } from './TySelect';
|
|
27
23
|
export type { TySelectProps, TySelectEventDetail, TySelectItem, TySelectedTagsProps } from './TySelect';
|
|
28
24
|
export { TyCalendar } from './TyCalendar';
|
|
@@ -65,12 +61,10 @@ export { TyButton as Button } from './TyButton';
|
|
|
65
61
|
export { TyTag as Tag } from './TyTag';
|
|
66
62
|
export { TyInput as Input } from './TyInput';
|
|
67
63
|
export { TyTextarea as Textarea } from './TyTextarea';
|
|
68
|
-
export { TyDropdown as Dropdown } from './TyDropdown';
|
|
69
64
|
export { TyOption as Option } from './TyOption';
|
|
70
65
|
export { TyIcon as Icon } from './TyIcon';
|
|
71
66
|
export { TyModal as Modal } from './TyModal';
|
|
72
67
|
export { TyTooltip as Tooltip } from './TyTooltip';
|
|
73
|
-
export { TyMultiselect as Multiselect } from './TyMultiselect';
|
|
74
68
|
export { TyCalendar as Calendar } from './TyCalendar';
|
|
75
69
|
export { TyDatePicker as DatePicker } from './TyDatePicker';
|
|
76
70
|
export { TyPopup as Popup } from './TyPopup';
|
|
@@ -92,12 +86,10 @@ export type { TyButtonProps as ButtonProps } from './TyButton';
|
|
|
92
86
|
export type { TyTagProps as TagProps } from './TyTag';
|
|
93
87
|
export type { TyInputProps as InputProps, TyInputEventDetail as InputEventDetail } from './TyInput';
|
|
94
88
|
export type { TyTextareaProps as TextareaProps, TyTextareaEventDetail as TextareaEventDetail } from './TyTextarea';
|
|
95
|
-
export type { TyDropdownProps as DropdownProps, TyDropdownEventDetail as DropdownEventDetail, OptionData } from './TyDropdown';
|
|
96
89
|
export type { TyOptionProps as OptionProps } from './TyOption';
|
|
97
90
|
export type { TyIconProps as IconProps } from './TyIcon';
|
|
98
91
|
export type { TyModalProps as ModalProps, TyModalEventDetail as ModalEventDetail, TyModalRef as ModalRef } from './TyModal';
|
|
99
92
|
export type { TyTooltipProps as TooltipProps } from './TyTooltip';
|
|
100
|
-
export type { TyMultiselectProps as MultiselectProps, TyMultiselectEventDetail as MultiselectEventDetail } from './TyMultiselect';
|
|
101
93
|
export type { TyCalendarProps as CalendarProps, TyCalendarChangeEventDetail as CalendarChangeEventDetail, TyCalendarNavigateEventDetail as CalendarNavigateEventDetail } from './TyCalendar';
|
|
102
94
|
export type { TyDatePickerProps as DatePickerProps, TyDatePickerEventDetail as DatePickerEventDetail } from './TyDatePicker';
|
|
103
95
|
export type { TyPopupProps as PopupProps, TyPopupElement as PopupElement } from './TyPopup';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC,gFAAgF;AAChF,OAAO,EAAE,OAAO,EAAE,CAAC;AA2BnB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAEvE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE9D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AAExF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAE3E,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}
|
package/dist/components/index.js
CHANGED
|
@@ -26,14 +26,12 @@ export { TyButton } from './TyButton';
|
|
|
26
26
|
export { TyTag } from './TyTag';
|
|
27
27
|
export { TyInput } from './TyInput';
|
|
28
28
|
export { TyTextarea } from './TyTextarea';
|
|
29
|
-
export { TyDropdown } from './TyDropdown';
|
|
30
29
|
export { TyOption } from './TyOption';
|
|
31
30
|
export { TyIcon } from './TyIcon';
|
|
32
31
|
export { TyModal } from './TyModal';
|
|
33
32
|
// Platform/ARIA name alias (the element is also registered as ty-dialog)
|
|
34
33
|
export { TyModal as TyDialog } from './TyModal';
|
|
35
34
|
export { TyTooltip } from './TyTooltip';
|
|
36
|
-
export { TyMultiselect } from './TyMultiselect';
|
|
37
35
|
export { TySelect, TySelectedTags } from './TySelect';
|
|
38
36
|
export { TyCalendar } from './TyCalendar';
|
|
39
37
|
export { TyDatePicker } from './TyDatePicker';
|
|
@@ -61,12 +59,10 @@ export { TyButton as Button } from './TyButton';
|
|
|
61
59
|
export { TyTag as Tag } from './TyTag';
|
|
62
60
|
export { TyInput as Input } from './TyInput';
|
|
63
61
|
export { TyTextarea as Textarea } from './TyTextarea';
|
|
64
|
-
export { TyDropdown as Dropdown } from './TyDropdown';
|
|
65
62
|
export { TyOption as Option } from './TyOption';
|
|
66
63
|
export { TyIcon as Icon } from './TyIcon';
|
|
67
64
|
export { TyModal as Modal } from './TyModal';
|
|
68
65
|
export { TyTooltip as Tooltip } from './TyTooltip';
|
|
69
|
-
export { TyMultiselect as Multiselect } from './TyMultiselect';
|
|
70
66
|
export { TyCalendar as Calendar } from './TyCalendar';
|
|
71
67
|
export { TyDatePicker as DatePicker } from './TyDatePicker';
|
|
72
68
|
export { TyPopup as Popup } from './TyPopup';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,UAAU;AACV,sEAAsE;AAEtE,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC,gFAAgF;AAChF,OAAO,EAAE,OAAO,EAAE,CAAC;AAEnB,iEAAiE;AACjE,qEAAqE;AACrE,mEAAmE;AACnE,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IACjC,MAAc,CAAC,cAAc,GAAG,OAAO,CAAC;IACzC,OAAO,CAAC,GAAG,CACT,uBAAuB,OAAO,EAAE,EAChC,+BAA+B,EAC/B,+BAA+B,CAChC,CAAC;AACJ,CAAC;AAED,sEAAsE;AACtE,+BAA+B;AAC/B,sEAAsE;AACtE,0EAA0E;AAC1E,gFAAgF;AAChF,iFAAiF;AACjF,EAAE;AACF,sDAAsD;AAEtD,sEAAsE;AACtE,6DAA6D;AAC7D,sEAAsE;AAEtE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAGpC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}
|
package/dist/version.d.ts
CHANGED
package/dist/version.js
CHANGED
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
// Generated from package.json by scripts/generate-version.js
|
|
3
3
|
// Run 'npm run generate:version' to regenerate.
|
|
4
4
|
/** Current version of tyrell-react. Synced with package.json on build. */
|
|
5
|
-
export const VERSION = '1.0.0-
|
|
5
|
+
export const VERSION = '1.0.0-TC27';
|
|
6
6
|
//# sourceMappingURL=version.js.map
|
package/package.json
CHANGED
package/src/components/index.ts
CHANGED
|
@@ -44,9 +44,6 @@ export type { TyInputProps, TyInputEventDetail, TyInputCSSProperties } from './T
|
|
|
44
44
|
export { TyTextarea } from './TyTextarea';
|
|
45
45
|
export type { TyTextareaProps, TyTextareaEventDetail } from './TyTextarea';
|
|
46
46
|
|
|
47
|
-
export { TyDropdown } from './TyDropdown';
|
|
48
|
-
export type { TyDropdownProps, TyDropdownEventDetail } from './TyDropdown';
|
|
49
|
-
|
|
50
47
|
export { TyOption } from './TyOption';
|
|
51
48
|
export type { TyOptionProps } from './TyOption';
|
|
52
49
|
|
|
@@ -62,9 +59,6 @@ export type { TyModalProps as TyDialogProps, TyModalEventDetail as TyDialogEvent
|
|
|
62
59
|
export { TyTooltip } from './TyTooltip';
|
|
63
60
|
export type { TyTooltipProps } from './TyTooltip';
|
|
64
61
|
|
|
65
|
-
export { TyMultiselect } from './TyMultiselect';
|
|
66
|
-
export type { TyMultiselectProps, TyMultiselectEventDetail } from './TyMultiselect';
|
|
67
|
-
|
|
68
62
|
export { TySelect, TySelectedTags } from './TySelect';
|
|
69
63
|
export type { TySelectProps, TySelectEventDetail, TySelectItem, TySelectedTagsProps } from './TySelect';
|
|
70
64
|
|
|
@@ -131,12 +125,10 @@ export { TyButton as Button } from './TyButton';
|
|
|
131
125
|
export { TyTag as Tag } from './TyTag';
|
|
132
126
|
export { TyInput as Input } from './TyInput';
|
|
133
127
|
export { TyTextarea as Textarea } from './TyTextarea';
|
|
134
|
-
export { TyDropdown as Dropdown } from './TyDropdown';
|
|
135
128
|
export { TyOption as Option } from './TyOption';
|
|
136
129
|
export { TyIcon as Icon } from './TyIcon';
|
|
137
130
|
export { TyModal as Modal } from './TyModal';
|
|
138
131
|
export { TyTooltip as Tooltip } from './TyTooltip';
|
|
139
|
-
export { TyMultiselect as Multiselect } from './TyMultiselect';
|
|
140
132
|
export { TyCalendar as Calendar } from './TyCalendar';
|
|
141
133
|
export { TyDatePicker as DatePicker } from './TyDatePicker';
|
|
142
134
|
export { TyPopup as Popup } from './TyPopup';
|
|
@@ -171,9 +163,6 @@ export type { TyInputProps as InputProps, TyInputEventDetail as InputEventDetail
|
|
|
171
163
|
// Textarea types
|
|
172
164
|
export type { TyTextareaProps as TextareaProps, TyTextareaEventDetail as TextareaEventDetail } from './TyTextarea';
|
|
173
165
|
|
|
174
|
-
// Dropdown types
|
|
175
|
-
export type { TyDropdownProps as DropdownProps, TyDropdownEventDetail as DropdownEventDetail, OptionData } from './TyDropdown';
|
|
176
|
-
|
|
177
166
|
// Option types
|
|
178
167
|
export type { TyOptionProps as OptionProps } from './TyOption';
|
|
179
168
|
|
|
@@ -186,9 +175,6 @@ export type { TyModalProps as ModalProps, TyModalEventDetail as ModalEventDetail
|
|
|
186
175
|
// Tooltip types
|
|
187
176
|
export type { TyTooltipProps as TooltipProps } from './TyTooltip';
|
|
188
177
|
|
|
189
|
-
// Multiselect types
|
|
190
|
-
export type { TyMultiselectProps as MultiselectProps, TyMultiselectEventDetail as MultiselectEventDetail } from './TyMultiselect';
|
|
191
|
-
|
|
192
178
|
// Calendar types
|
|
193
179
|
export type { TyCalendarProps as CalendarProps, TyCalendarChangeEventDetail as CalendarChangeEventDetail, TyCalendarNavigateEventDetail as CalendarNavigateEventDetail } from './TyCalendar';
|
|
194
180
|
|
package/src/version.ts
CHANGED
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export interface OptionData {
|
|
3
|
-
value: string;
|
|
4
|
-
text: string;
|
|
5
|
-
disabled?: boolean;
|
|
6
|
-
}
|
|
7
|
-
export interface TyDropdownEventDetail {
|
|
8
|
-
option: HTMLElement;
|
|
9
|
-
}
|
|
10
|
-
export interface TyDropdownProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'style'> {
|
|
11
|
-
style?: import('./TyInput').TyInputCSSProperties;
|
|
12
|
-
/** Semantic styling variant */
|
|
13
|
-
flavor?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'neutral';
|
|
14
|
-
/** Dropdown size */
|
|
15
|
-
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
16
|
-
/** Selected value */
|
|
17
|
-
value?: string;
|
|
18
|
-
/** Placeholder text */
|
|
19
|
-
placeholder?: string;
|
|
20
|
-
/** Dropdown label */
|
|
21
|
-
label?: string;
|
|
22
|
-
/** Disable the dropdown */
|
|
23
|
-
disabled?: boolean;
|
|
24
|
-
/**
|
|
25
|
-
* Loading state — replaces the open popup options list with a centered
|
|
26
|
-
* spinner. Search input stays usable. Pair with `externalSearch` while
|
|
27
|
-
* fetching results from a parent-owned data source.
|
|
28
|
-
*/
|
|
29
|
-
loading?: boolean;
|
|
30
|
-
/** Make dropdown readonly */
|
|
31
|
-
readonly?: boolean;
|
|
32
|
-
/** Required field */
|
|
33
|
-
required?: boolean;
|
|
34
|
-
/** Show clear button */
|
|
35
|
-
clearable?: boolean;
|
|
36
|
-
/** Disable clear button (alias for clearable={false}) */
|
|
37
|
-
notClearable?: boolean;
|
|
38
|
-
/** Debounce in milliseconds (0-5000) */
|
|
39
|
-
debounce?: number;
|
|
40
|
-
/**
|
|
41
|
-
* Switch to external (remote) search mode. Default is `false` — the dropdown
|
|
42
|
-
* filters its options locally. When `true`, the dropdown stops filtering and
|
|
43
|
-
* dispatches `search` events on each keystroke; the parent owns filtering
|
|
44
|
-
* and updates the children.
|
|
45
|
-
*/
|
|
46
|
-
externalSearch?: boolean;
|
|
47
|
-
/** @deprecated Use `externalSearch` instead. */
|
|
48
|
-
notSearchable?: boolean;
|
|
49
|
-
/** @deprecated Use `externalSearch` instead. Pass `searchable={false}` was equivalent to `externalSearch={true}`. */
|
|
50
|
-
searchable?: boolean;
|
|
51
|
-
/** Form field name for form submission */
|
|
52
|
-
name?: string;
|
|
53
|
-
options?: OptionData[];
|
|
54
|
-
onChange?: (event: CustomEvent<TyDropdownEventDetail>) => void;
|
|
55
|
-
onSearch?: (event: CustomEvent<{
|
|
56
|
-
query: string;
|
|
57
|
-
element: HTMLElement;
|
|
58
|
-
}>) => void;
|
|
59
|
-
onOpen?: (event: CustomEvent) => void;
|
|
60
|
-
onClose?: (event: CustomEvent) => void;
|
|
61
|
-
children?: React.ReactNode;
|
|
62
|
-
}
|
|
63
|
-
export declare const TyDropdown: React.ForwardRefExoticComponent<TyDropdownProps & React.RefAttributes<HTMLElement>>;
|
|
64
|
-
//# sourceMappingURL=TyDropdown.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TyDropdown.d.ts","sourceRoot":"","sources":["../../src/components/TyDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAK9D,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAGD,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,WAAW,CAAC;CACrB;AAGD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IACpG,KAAK,CAAC,EAAE,OAAO,WAAW,EAAE,oBAAoB,CAAC;IACjD,+BAA+B;IAC/B,MAAM,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;IAEhF,oBAAoB;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAExC,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,yDAAyD;IACzD,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,gDAAgD;IAChD,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,qHAAqH;IACrH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IAGvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,qBAAqB,CAAC,KAAK,IAAI,CAAC;IAC/D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,WAAW,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IACjF,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAGvC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAGD,eAAO,MAAM,UAAU,qFA+JtB,CAAC"}
|
|
@@ -1,136 +0,0 @@
|
|
|
1
|
-
import React, { useEffect, useRef, useCallback } from 'react';
|
|
2
|
-
import { needsPropertyBridge } from '../utils/react-version';
|
|
3
|
-
import { useBooleanProperty, coerceBool } from '../utils/use-boolean-prop';
|
|
4
|
-
// React wrapper for ty-dropdown web component
|
|
5
|
-
export const TyDropdown = React.forwardRef(({ options, children, onChange, onSearch, onOpen, onClose, disabled, loading, externalSearch, notSearchable, searchable, clearable, notClearable, debounce, name, value, ...props }, ref) => {
|
|
6
|
-
const elementRef = useRef(null);
|
|
7
|
-
const handleChange = useCallback((event) => {
|
|
8
|
-
if (onChange) {
|
|
9
|
-
onChange(event);
|
|
10
|
-
}
|
|
11
|
-
}, [onChange]);
|
|
12
|
-
const handleSearch = useCallback((event) => {
|
|
13
|
-
if (onSearch) {
|
|
14
|
-
onSearch(event);
|
|
15
|
-
}
|
|
16
|
-
}, [onSearch]);
|
|
17
|
-
const handleOpen = useCallback((event) => { if (onOpen)
|
|
18
|
-
onOpen(event); }, [onOpen]);
|
|
19
|
-
const handleClose = useCallback((event) => { if (onClose)
|
|
20
|
-
onClose(event); }, [onClose]);
|
|
21
|
-
useEffect(() => {
|
|
22
|
-
const element = elementRef.current;
|
|
23
|
-
if (!element)
|
|
24
|
-
return;
|
|
25
|
-
// Listen for custom events from ty-dropdown
|
|
26
|
-
if (onChange) {
|
|
27
|
-
element.addEventListener('change', handleChange);
|
|
28
|
-
}
|
|
29
|
-
if (onSearch) {
|
|
30
|
-
element.addEventListener('search', handleSearch);
|
|
31
|
-
}
|
|
32
|
-
if (onOpen)
|
|
33
|
-
element.addEventListener('open', handleOpen);
|
|
34
|
-
if (onClose)
|
|
35
|
-
element.addEventListener('close', handleClose);
|
|
36
|
-
return () => {
|
|
37
|
-
if (onChange) {
|
|
38
|
-
element.removeEventListener('change', handleChange);
|
|
39
|
-
}
|
|
40
|
-
if (onSearch) {
|
|
41
|
-
element.removeEventListener('search', handleSearch);
|
|
42
|
-
}
|
|
43
|
-
if (onOpen)
|
|
44
|
-
element.removeEventListener('open', handleOpen);
|
|
45
|
-
if (onClose)
|
|
46
|
-
element.removeEventListener('close', handleClose);
|
|
47
|
-
};
|
|
48
|
-
}, [handleChange, handleSearch, handleOpen, handleClose, onChange, onSearch, onOpen, onClose]);
|
|
49
|
-
// Imperatively sync `value` to the underlying element's property whenever
|
|
50
|
-
// it changes. React 18's prop-to-property bridging for custom elements is
|
|
51
|
-
// unreliable for empty strings (programmatic resets), so we set the
|
|
52
|
-
// property directly to guarantee the dropdown clears on `value=""`.
|
|
53
|
-
// React 19+ handles this natively, so the effect short-circuits there.
|
|
54
|
-
useEffect(() => {
|
|
55
|
-
if (!needsPropertyBridge)
|
|
56
|
-
return;
|
|
57
|
-
const element = elementRef.current;
|
|
58
|
-
if (!element)
|
|
59
|
-
return;
|
|
60
|
-
if (element.value !== value) {
|
|
61
|
-
element.value = value ?? '';
|
|
62
|
-
}
|
|
63
|
-
}, [value]);
|
|
64
|
-
// Handle ref forwarding
|
|
65
|
-
useEffect(() => {
|
|
66
|
-
if (ref && elementRef.current) {
|
|
67
|
-
if (typeof ref === 'function') {
|
|
68
|
-
ref(elementRef.current);
|
|
69
|
-
}
|
|
70
|
-
else {
|
|
71
|
-
ref.current = elementRef.current;
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
}, [ref]);
|
|
75
|
-
// Render options from data if provided, otherwise use children
|
|
76
|
-
const renderContent = () => {
|
|
77
|
-
if (options && options.length > 0) {
|
|
78
|
-
// Data-driven approach - create ty-option elements
|
|
79
|
-
return options.map((option, index) => React.createElement('ty-option', {
|
|
80
|
-
key: option.value || index,
|
|
81
|
-
value: option.value,
|
|
82
|
-
...(option.disabled && { disabled: "" }),
|
|
83
|
-
}, option.text));
|
|
84
|
-
}
|
|
85
|
-
// Slotted approach - use provided children
|
|
86
|
-
return children;
|
|
87
|
-
};
|
|
88
|
-
// Imperative property sync for boolean props (see use-boolean-prop.ts).
|
|
89
|
-
const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
|
|
90
|
-
const isLoading = useBooleanProperty(elementRef, 'loading', loading);
|
|
91
|
-
const isExternalSearch = coerceBool(externalSearch) || coerceBool(notSearchable) || searchable === false;
|
|
92
|
-
useBooleanProperty(elementRef, 'externalSearch', isExternalSearch);
|
|
93
|
-
// clearable: explicit boolean OR the `notClearable` alias inverts it
|
|
94
|
-
const isClearable = clearable !== undefined
|
|
95
|
-
? coerceBool(clearable)
|
|
96
|
-
: (coerceBool(notClearable) ? false : undefined);
|
|
97
|
-
useEffect(() => {
|
|
98
|
-
if (!needsPropertyBridge)
|
|
99
|
-
return;
|
|
100
|
-
if (isClearable === undefined)
|
|
101
|
-
return;
|
|
102
|
-
const el = elementRef.current;
|
|
103
|
-
if (!el)
|
|
104
|
-
return;
|
|
105
|
-
if (Boolean(el.clearable) !== isClearable)
|
|
106
|
-
el.clearable = isClearable;
|
|
107
|
-
}, [isClearable]);
|
|
108
|
-
// Convert React props to web component attributes
|
|
109
|
-
const webComponentProps = {
|
|
110
|
-
...props,
|
|
111
|
-
ref: elementRef,
|
|
112
|
-
};
|
|
113
|
-
if (isDisabled)
|
|
114
|
-
webComponentProps.disabled = '';
|
|
115
|
-
if (isLoading)
|
|
116
|
-
webComponentProps.loading = '';
|
|
117
|
-
if (isExternalSearch)
|
|
118
|
-
webComponentProps['external-search'] = '';
|
|
119
|
-
// Handle clearable functionality
|
|
120
|
-
if (isClearable === true) {
|
|
121
|
-
webComponentProps.clearable = '';
|
|
122
|
-
}
|
|
123
|
-
else if (isClearable === false) {
|
|
124
|
-
webComponentProps['not-clearable'] = '';
|
|
125
|
-
}
|
|
126
|
-
// Add debounce attribute
|
|
127
|
-
if (debounce !== undefined) {
|
|
128
|
-
webComponentProps.debounce = debounce;
|
|
129
|
-
}
|
|
130
|
-
// Add string attributes
|
|
131
|
-
if (name)
|
|
132
|
-
webComponentProps.name = name;
|
|
133
|
-
return React.createElement('ty-dropdown', webComponentProps, renderContent());
|
|
134
|
-
});
|
|
135
|
-
TyDropdown.displayName = 'TyDropdown';
|
|
136
|
-
//# sourceMappingURL=TyDropdown.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TyDropdown.js","sourceRoot":"","sources":["../../src/components/TyDropdown.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export interface TyMultiselectEventDetail {
|
|
3
|
-
/** Array of currently selected values */
|
|
4
|
-
values: string[];
|
|
5
|
-
/** Action that triggered the change: "add" | "remove" */
|
|
6
|
-
action: 'add' | 'remove';
|
|
7
|
-
/** The specific item that was added or removed */
|
|
8
|
-
item: string;
|
|
9
|
-
}
|
|
10
|
-
export interface TyMultiselectProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'style'> {
|
|
11
|
-
style?: import('./TyInput').TyInputCSSProperties;
|
|
12
|
-
/** Current selected values as comma-separated string or array */
|
|
13
|
-
value?: string | string[];
|
|
14
|
-
/** Placeholder text when no items are selected */
|
|
15
|
-
placeholder?: string;
|
|
16
|
-
/** Disable the multiselect component */
|
|
17
|
-
disabled?: boolean;
|
|
18
|
-
/**
|
|
19
|
-
* Loading state — replaces the available-options area with a centered
|
|
20
|
-
* spinner. Search input stays usable. Pair with `externalSearch` while
|
|
21
|
-
* fetching results from a parent-owned data source.
|
|
22
|
-
*/
|
|
23
|
-
loading?: boolean;
|
|
24
|
-
/** Make the multiselect read-only */
|
|
25
|
-
readonly?: boolean;
|
|
26
|
-
/** Semantic styling variant */
|
|
27
|
-
flavor?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'neutral';
|
|
28
|
-
/** Label text for the multiselect */
|
|
29
|
-
label?: string;
|
|
30
|
-
/** Mark the field as required */
|
|
31
|
-
required?: boolean;
|
|
32
|
-
/**
|
|
33
|
-
* Switch to external (remote) search mode. Default is `false` — the
|
|
34
|
-
* multiselect filters its own children client-side. Set to `true` when you
|
|
35
|
-
* want to handle filtering yourself (e.g. server-side): the component will
|
|
36
|
-
* dispatch `search` events on each keystroke, and you must update the children
|
|
37
|
-
* in response. The `onSearch` prop receives those events.
|
|
38
|
-
*/
|
|
39
|
-
externalSearch?: boolean;
|
|
40
|
-
/** Debounce in milliseconds (0-5000) */
|
|
41
|
-
debounce?: number;
|
|
42
|
-
/** Mobile section label for selected items */
|
|
43
|
-
selectedLabel?: string;
|
|
44
|
-
/** Form field name for form submission */
|
|
45
|
-
name?: string;
|
|
46
|
-
/** Callback when selection changes */
|
|
47
|
-
onChange?: (event: CustomEvent<TyMultiselectEventDetail>) => void;
|
|
48
|
-
/** Callback fired on each search input change (debounced by `debounce`). Use for external/server-side filtering. */
|
|
49
|
-
onSearch?: (event: CustomEvent<{
|
|
50
|
-
query: string;
|
|
51
|
-
element: HTMLElement;
|
|
52
|
-
}>) => void;
|
|
53
|
-
onOpen?: (event: CustomEvent) => void;
|
|
54
|
-
onClose?: (event: CustomEvent) => void;
|
|
55
|
-
/** Children should be TyTag components, not TyOption */
|
|
56
|
-
children?: React.ReactNode;
|
|
57
|
-
}
|
|
58
|
-
export declare const TyMultiselect: React.ForwardRefExoticComponent<TyMultiselectProps & React.RefAttributes<HTMLElement>>;
|
|
59
|
-
//# sourceMappingURL=TyMultiselect.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TyMultiselect.d.ts","sourceRoot":"","sources":["../../src/components/TyMultiselect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAK9D,MAAM,WAAW,wBAAwB;IACvC,yCAAyC;IACzC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,yDAAyD;IACzD,MAAM,EAAE,KAAK,GAAG,QAAQ,CAAC;IACzB,kDAAkD;IAClD,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IACvG,KAAK,CAAC,EAAE,OAAO,WAAW,EAAE,oBAAoB,CAAC;IACjD,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAE1B,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;IAEhF,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,wBAAwB,CAAC,KAAK,IAAI,CAAC;IAElE,oHAAoH;IACpH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,WAAW,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IACjF,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAEvC,wDAAwD;IACxD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAGD,eAAO,MAAM,aAAa,wFA6IzB,CAAC"}
|
|
@@ -1,123 +0,0 @@
|
|
|
1
|
-
import React, { useEffect, useRef, useCallback } from 'react';
|
|
2
|
-
import { needsPropertyBridge } from '../utils/react-version';
|
|
3
|
-
import { useBooleanProperty } from '../utils/use-boolean-prop';
|
|
4
|
-
// React wrapper for ty-multiselect web component
|
|
5
|
-
export const TyMultiselect = React.forwardRef(({ value, placeholder, disabled, loading, readonly, flavor, label, required, externalSearch, debounce, selectedLabel, name, onChange, onSearch, onOpen, onClose, children, ...props }, ref) => {
|
|
6
|
-
const elementRef = useRef(null);
|
|
7
|
-
// Handle ref forwarding
|
|
8
|
-
useEffect(() => {
|
|
9
|
-
if (ref && elementRef.current) {
|
|
10
|
-
if (typeof ref === 'function') {
|
|
11
|
-
ref(elementRef.current);
|
|
12
|
-
}
|
|
13
|
-
else {
|
|
14
|
-
ref.current = elementRef.current;
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
}, [ref]);
|
|
18
|
-
// Imperatively sync `value` to the underlying property so resets
|
|
19
|
-
// (`value=""` or null) reliably clear the visible selection.
|
|
20
|
-
// React 18 workaround; React 19+ handles this natively.
|
|
21
|
-
useEffect(() => {
|
|
22
|
-
if (!needsPropertyBridge)
|
|
23
|
-
return;
|
|
24
|
-
const element = elementRef.current;
|
|
25
|
-
if (!element)
|
|
26
|
-
return;
|
|
27
|
-
const next = props.value ?? '';
|
|
28
|
-
if (element.value !== next) {
|
|
29
|
-
element.value = next;
|
|
30
|
-
}
|
|
31
|
-
}, [props.value]);
|
|
32
|
-
// Handle change events
|
|
33
|
-
const handleChange = useCallback((event) => {
|
|
34
|
-
const customEvent = event;
|
|
35
|
-
if (onChange) {
|
|
36
|
-
onChange(customEvent);
|
|
37
|
-
}
|
|
38
|
-
}, [onChange]);
|
|
39
|
-
const handleSearch = useCallback((event) => {
|
|
40
|
-
const customEvent = event;
|
|
41
|
-
if (onSearch) {
|
|
42
|
-
onSearch(customEvent);
|
|
43
|
-
}
|
|
44
|
-
}, [onSearch]);
|
|
45
|
-
const handleOpen = useCallback((event) => { if (onOpen)
|
|
46
|
-
onOpen(event); }, [onOpen]);
|
|
47
|
-
const handleClose = useCallback((event) => { if (onClose)
|
|
48
|
-
onClose(event); }, [onClose]);
|
|
49
|
-
// Set up event listeners
|
|
50
|
-
useEffect(() => {
|
|
51
|
-
const element = elementRef.current;
|
|
52
|
-
if (!element)
|
|
53
|
-
return;
|
|
54
|
-
if (onChange)
|
|
55
|
-
element.addEventListener('change', handleChange);
|
|
56
|
-
if (onSearch)
|
|
57
|
-
element.addEventListener('search', handleSearch);
|
|
58
|
-
if (onOpen)
|
|
59
|
-
element.addEventListener('open', handleOpen);
|
|
60
|
-
if (onClose)
|
|
61
|
-
element.addEventListener('close', handleClose);
|
|
62
|
-
return () => {
|
|
63
|
-
if (onChange)
|
|
64
|
-
element.removeEventListener('change', handleChange);
|
|
65
|
-
if (onSearch)
|
|
66
|
-
element.removeEventListener('search', handleSearch);
|
|
67
|
-
if (onOpen)
|
|
68
|
-
element.removeEventListener('open', handleOpen);
|
|
69
|
-
if (onClose)
|
|
70
|
-
element.removeEventListener('close', handleClose);
|
|
71
|
-
};
|
|
72
|
-
}, [handleChange, handleSearch, handleOpen, handleClose, onChange, onSearch, onOpen, onClose]);
|
|
73
|
-
// Imperative property sync for boolean props (see use-boolean-prop.ts).
|
|
74
|
-
const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
|
|
75
|
-
const isLoading = useBooleanProperty(elementRef, 'loading', loading);
|
|
76
|
-
const isReadonly = useBooleanProperty(elementRef, 'readonly', readonly);
|
|
77
|
-
const isRequired = useBooleanProperty(elementRef, 'required', required);
|
|
78
|
-
const isExternalSearch = useBooleanProperty(elementRef, 'externalSearch', externalSearch);
|
|
79
|
-
// Convert React props to web component attributes
|
|
80
|
-
const webComponentProps = {
|
|
81
|
-
...props,
|
|
82
|
-
ref: elementRef,
|
|
83
|
-
};
|
|
84
|
-
// Handle value conversion (array to comma-separated string)
|
|
85
|
-
if (value !== undefined) {
|
|
86
|
-
const valueString = Array.isArray(value) ? value.join(',') : value;
|
|
87
|
-
webComponentProps.value = valueString;
|
|
88
|
-
}
|
|
89
|
-
// Add optional attributes only if they have values
|
|
90
|
-
if (placeholder) {
|
|
91
|
-
webComponentProps.placeholder = placeholder;
|
|
92
|
-
}
|
|
93
|
-
if (isLoading)
|
|
94
|
-
webComponentProps.loading = '';
|
|
95
|
-
if (isDisabled)
|
|
96
|
-
webComponentProps.disabled = '';
|
|
97
|
-
if (isReadonly)
|
|
98
|
-
webComponentProps.readonly = '';
|
|
99
|
-
if (isRequired)
|
|
100
|
-
webComponentProps.required = '';
|
|
101
|
-
if (isExternalSearch)
|
|
102
|
-
webComponentProps['external-search'] = '';
|
|
103
|
-
if (flavor) {
|
|
104
|
-
webComponentProps.flavor = flavor;
|
|
105
|
-
}
|
|
106
|
-
if (label) {
|
|
107
|
-
webComponentProps.label = label;
|
|
108
|
-
}
|
|
109
|
-
if (name) {
|
|
110
|
-
webComponentProps.name = name;
|
|
111
|
-
}
|
|
112
|
-
// Add debounce attribute
|
|
113
|
-
if (debounce !== undefined) {
|
|
114
|
-
webComponentProps.debounce = debounce;
|
|
115
|
-
}
|
|
116
|
-
// Add selectedLabel attribute
|
|
117
|
-
if (selectedLabel) {
|
|
118
|
-
webComponentProps['selected-label'] = selectedLabel;
|
|
119
|
-
}
|
|
120
|
-
return React.createElement('ty-multiselect', webComponentProps, children);
|
|
121
|
-
});
|
|
122
|
-
TyMultiselect.displayName = 'TyMultiselect';
|
|
123
|
-
//# sourceMappingURL=TyMultiselect.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TyMultiselect.js","sourceRoot":"","sources":["../../src/components/TyMultiselect.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,252 +0,0 @@
|
|
|
1
|
-
import React, { useEffect, useRef, useCallback } from 'react';
|
|
2
|
-
import { needsPropertyBridge } from '../utils/react-version';
|
|
3
|
-
import { useBooleanProperty, coerceBool } from '../utils/use-boolean-prop';
|
|
4
|
-
|
|
5
|
-
// Option data structure for data-driven approach
|
|
6
|
-
export interface OptionData {
|
|
7
|
-
value: string;
|
|
8
|
-
text: string;
|
|
9
|
-
disabled?: boolean;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
// Event detail structure for dropdown events
|
|
13
|
-
export interface TyDropdownEventDetail {
|
|
14
|
-
option: HTMLElement;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
// Type definitions for Ty Dropdown component
|
|
18
|
-
export interface TyDropdownProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'style'> {
|
|
19
|
-
style?: import('./TyInput').TyInputCSSProperties;
|
|
20
|
-
/** Semantic styling variant */
|
|
21
|
-
flavor?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'neutral';
|
|
22
|
-
|
|
23
|
-
/** Dropdown size */
|
|
24
|
-
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
25
|
-
|
|
26
|
-
/** Selected value */
|
|
27
|
-
value?: string;
|
|
28
|
-
|
|
29
|
-
/** Placeholder text */
|
|
30
|
-
placeholder?: string;
|
|
31
|
-
|
|
32
|
-
/** Dropdown label */
|
|
33
|
-
label?: string;
|
|
34
|
-
|
|
35
|
-
/** Disable the dropdown */
|
|
36
|
-
disabled?: boolean;
|
|
37
|
-
|
|
38
|
-
/**
|
|
39
|
-
* Loading state — replaces the open popup options list with a centered
|
|
40
|
-
* spinner. Search input stays usable. Pair with `externalSearch` while
|
|
41
|
-
* fetching results from a parent-owned data source.
|
|
42
|
-
*/
|
|
43
|
-
loading?: boolean;
|
|
44
|
-
|
|
45
|
-
/** Make dropdown readonly */
|
|
46
|
-
readonly?: boolean;
|
|
47
|
-
|
|
48
|
-
/** Required field */
|
|
49
|
-
required?: boolean;
|
|
50
|
-
|
|
51
|
-
/** Show clear button */
|
|
52
|
-
clearable?: boolean;
|
|
53
|
-
|
|
54
|
-
/** Disable clear button (alias for clearable={false}) */
|
|
55
|
-
notClearable?: boolean;
|
|
56
|
-
|
|
57
|
-
/** Debounce in milliseconds (0-5000) */
|
|
58
|
-
debounce?: number;
|
|
59
|
-
|
|
60
|
-
/**
|
|
61
|
-
* Switch to external (remote) search mode. Default is `false` — the dropdown
|
|
62
|
-
* filters its options locally. When `true`, the dropdown stops filtering and
|
|
63
|
-
* dispatches `search` events on each keystroke; the parent owns filtering
|
|
64
|
-
* and updates the children.
|
|
65
|
-
*/
|
|
66
|
-
externalSearch?: boolean;
|
|
67
|
-
|
|
68
|
-
/** @deprecated Use `externalSearch` instead. */
|
|
69
|
-
notSearchable?: boolean;
|
|
70
|
-
|
|
71
|
-
/** @deprecated Use `externalSearch` instead. Pass `searchable={false}` was equivalent to `externalSearch={true}`. */
|
|
72
|
-
searchable?: boolean;
|
|
73
|
-
|
|
74
|
-
/** Form field name for form submission */
|
|
75
|
-
name?: string;
|
|
76
|
-
|
|
77
|
-
// Data-driven approach
|
|
78
|
-
options?: OptionData[];
|
|
79
|
-
|
|
80
|
-
// React event handlers
|
|
81
|
-
onChange?: (event: CustomEvent<TyDropdownEventDetail>) => void;
|
|
82
|
-
onSearch?: (event: CustomEvent<{ query: string; element: HTMLElement }>) => void;
|
|
83
|
-
onOpen?: (event: CustomEvent) => void;
|
|
84
|
-
onClose?: (event: CustomEvent) => void;
|
|
85
|
-
|
|
86
|
-
// Children for slotted approach
|
|
87
|
-
children?: React.ReactNode;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
// React wrapper for ty-dropdown web component
|
|
91
|
-
export const TyDropdown = React.forwardRef<HTMLElement, TyDropdownProps>(
|
|
92
|
-
({
|
|
93
|
-
options,
|
|
94
|
-
children,
|
|
95
|
-
onChange,
|
|
96
|
-
onSearch,
|
|
97
|
-
onOpen,
|
|
98
|
-
onClose,
|
|
99
|
-
disabled,
|
|
100
|
-
loading,
|
|
101
|
-
externalSearch,
|
|
102
|
-
notSearchable,
|
|
103
|
-
searchable,
|
|
104
|
-
clearable,
|
|
105
|
-
notClearable,
|
|
106
|
-
debounce,
|
|
107
|
-
name,
|
|
108
|
-
value,
|
|
109
|
-
...props
|
|
110
|
-
}, ref) => {
|
|
111
|
-
const elementRef = useRef<HTMLElement>(null);
|
|
112
|
-
|
|
113
|
-
const handleChange = useCallback((event: CustomEvent<TyDropdownEventDetail>) => {
|
|
114
|
-
if (onChange) {
|
|
115
|
-
onChange(event);
|
|
116
|
-
}
|
|
117
|
-
}, [onChange]);
|
|
118
|
-
|
|
119
|
-
const handleSearch = useCallback((event: CustomEvent<{ query: string; element: HTMLElement }>) => {
|
|
120
|
-
if (onSearch) {
|
|
121
|
-
onSearch(event);
|
|
122
|
-
}
|
|
123
|
-
}, [onSearch]);
|
|
124
|
-
|
|
125
|
-
const handleOpen = useCallback((event: Event) => { if (onOpen) onOpen(event as CustomEvent); }, [onOpen]);
|
|
126
|
-
const handleClose = useCallback((event: Event) => { if (onClose) onClose(event as CustomEvent); }, [onClose]);
|
|
127
|
-
|
|
128
|
-
useEffect(() => {
|
|
129
|
-
const element = elementRef.current;
|
|
130
|
-
if (!element) return;
|
|
131
|
-
|
|
132
|
-
// Listen for custom events from ty-dropdown
|
|
133
|
-
if (onChange) {
|
|
134
|
-
element.addEventListener('change', handleChange as EventListener);
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
if (onSearch) {
|
|
138
|
-
element.addEventListener('search', handleSearch as EventListener);
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
if (onOpen) element.addEventListener('open', handleOpen);
|
|
142
|
-
if (onClose) element.addEventListener('close', handleClose);
|
|
143
|
-
|
|
144
|
-
return () => {
|
|
145
|
-
if (onChange) {
|
|
146
|
-
element.removeEventListener('change', handleChange as EventListener);
|
|
147
|
-
}
|
|
148
|
-
if (onSearch) {
|
|
149
|
-
element.removeEventListener('search', handleSearch as EventListener);
|
|
150
|
-
}
|
|
151
|
-
if (onOpen) element.removeEventListener('open', handleOpen);
|
|
152
|
-
if (onClose) element.removeEventListener('close', handleClose);
|
|
153
|
-
};
|
|
154
|
-
}, [handleChange, handleSearch, handleOpen, handleClose, onChange, onSearch, onOpen, onClose]);
|
|
155
|
-
|
|
156
|
-
// Imperatively sync `value` to the underlying element's property whenever
|
|
157
|
-
// it changes. React 18's prop-to-property bridging for custom elements is
|
|
158
|
-
// unreliable for empty strings (programmatic resets), so we set the
|
|
159
|
-
// property directly to guarantee the dropdown clears on `value=""`.
|
|
160
|
-
// React 19+ handles this natively, so the effect short-circuits there.
|
|
161
|
-
useEffect(() => {
|
|
162
|
-
if (!needsPropertyBridge) return;
|
|
163
|
-
const element = elementRef.current as any;
|
|
164
|
-
if (!element) return;
|
|
165
|
-
if (element.value !== value) {
|
|
166
|
-
element.value = value ?? '';
|
|
167
|
-
}
|
|
168
|
-
}, [value]);
|
|
169
|
-
|
|
170
|
-
// Handle ref forwarding
|
|
171
|
-
useEffect(() => {
|
|
172
|
-
if (ref && elementRef.current) {
|
|
173
|
-
if (typeof ref === 'function') {
|
|
174
|
-
ref(elementRef.current);
|
|
175
|
-
} else {
|
|
176
|
-
ref.current = elementRef.current;
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
}, [ref]);
|
|
180
|
-
|
|
181
|
-
// Render options from data if provided, otherwise use children
|
|
182
|
-
const renderContent = () => {
|
|
183
|
-
if (options && options.length > 0) {
|
|
184
|
-
// Data-driven approach - create ty-option elements
|
|
185
|
-
return options.map((option, index) =>
|
|
186
|
-
React.createElement(
|
|
187
|
-
'ty-option',
|
|
188
|
-
{
|
|
189
|
-
key: option.value || index,
|
|
190
|
-
value: option.value,
|
|
191
|
-
...(option.disabled && { disabled: "" }),
|
|
192
|
-
},
|
|
193
|
-
option.text
|
|
194
|
-
)
|
|
195
|
-
);
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
// Slotted approach - use provided children
|
|
199
|
-
return children;
|
|
200
|
-
};
|
|
201
|
-
|
|
202
|
-
// Imperative property sync for boolean props (see use-boolean-prop.ts).
|
|
203
|
-
const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
|
|
204
|
-
const isLoading = useBooleanProperty(elementRef, 'loading', loading);
|
|
205
|
-
const isExternalSearch = coerceBool(externalSearch) || coerceBool(notSearchable) || searchable === false;
|
|
206
|
-
useBooleanProperty(elementRef, 'externalSearch', isExternalSearch);
|
|
207
|
-
// clearable: explicit boolean OR the `notClearable` alias inverts it
|
|
208
|
-
const isClearable = clearable !== undefined
|
|
209
|
-
? coerceBool(clearable)
|
|
210
|
-
: (coerceBool(notClearable) ? false : undefined);
|
|
211
|
-
useEffect(() => {
|
|
212
|
-
if (!needsPropertyBridge) return;
|
|
213
|
-
if (isClearable === undefined) return;
|
|
214
|
-
const el = elementRef.current as any;
|
|
215
|
-
if (!el) return;
|
|
216
|
-
if (Boolean(el.clearable) !== isClearable) el.clearable = isClearable;
|
|
217
|
-
}, [isClearable]);
|
|
218
|
-
|
|
219
|
-
// Convert React props to web component attributes
|
|
220
|
-
const webComponentProps: Record<string, any> = {
|
|
221
|
-
...props,
|
|
222
|
-
ref: elementRef,
|
|
223
|
-
};
|
|
224
|
-
|
|
225
|
-
if (isDisabled) webComponentProps.disabled = '';
|
|
226
|
-
if (isLoading) webComponentProps.loading = '';
|
|
227
|
-
if (isExternalSearch) webComponentProps['external-search'] = '';
|
|
228
|
-
|
|
229
|
-
// Handle clearable functionality
|
|
230
|
-
if (isClearable === true) {
|
|
231
|
-
webComponentProps.clearable = '';
|
|
232
|
-
} else if (isClearable === false) {
|
|
233
|
-
webComponentProps['not-clearable'] = '';
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
// Add debounce attribute
|
|
237
|
-
if (debounce !== undefined) {
|
|
238
|
-
webComponentProps.debounce = debounce;
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
// Add string attributes
|
|
242
|
-
if (name) webComponentProps.name = name;
|
|
243
|
-
|
|
244
|
-
return React.createElement(
|
|
245
|
-
'ty-dropdown',
|
|
246
|
-
webComponentProps,
|
|
247
|
-
renderContent()
|
|
248
|
-
);
|
|
249
|
-
}
|
|
250
|
-
);
|
|
251
|
-
|
|
252
|
-
TyDropdown.displayName = 'TyDropdown';
|
|
@@ -1,219 +0,0 @@
|
|
|
1
|
-
import React, { useEffect, useRef, useCallback } from 'react';
|
|
2
|
-
import { needsPropertyBridge } from '../utils/react-version';
|
|
3
|
-
import { useBooleanProperty } from '../utils/use-boolean-prop';
|
|
4
|
-
|
|
5
|
-
// Type definitions for Ty Multiselect component
|
|
6
|
-
export interface TyMultiselectEventDetail {
|
|
7
|
-
/** Array of currently selected values */
|
|
8
|
-
values: string[];
|
|
9
|
-
/** Action that triggered the change: "add" | "remove" */
|
|
10
|
-
action: 'add' | 'remove';
|
|
11
|
-
/** The specific item that was added or removed */
|
|
12
|
-
item: string;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
export interface TyMultiselectProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'style'> {
|
|
16
|
-
style?: import('./TyInput').TyInputCSSProperties;
|
|
17
|
-
/** Current selected values as comma-separated string or array */
|
|
18
|
-
value?: string | string[];
|
|
19
|
-
|
|
20
|
-
/** Placeholder text when no items are selected */
|
|
21
|
-
placeholder?: string;
|
|
22
|
-
|
|
23
|
-
/** Disable the multiselect component */
|
|
24
|
-
disabled?: boolean;
|
|
25
|
-
|
|
26
|
-
/**
|
|
27
|
-
* Loading state — replaces the available-options area with a centered
|
|
28
|
-
* spinner. Search input stays usable. Pair with `externalSearch` while
|
|
29
|
-
* fetching results from a parent-owned data source.
|
|
30
|
-
*/
|
|
31
|
-
loading?: boolean;
|
|
32
|
-
|
|
33
|
-
/** Make the multiselect read-only */
|
|
34
|
-
readonly?: boolean;
|
|
35
|
-
|
|
36
|
-
/** Semantic styling variant */
|
|
37
|
-
flavor?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'neutral';
|
|
38
|
-
|
|
39
|
-
/** Label text for the multiselect */
|
|
40
|
-
label?: string;
|
|
41
|
-
|
|
42
|
-
/** Mark the field as required */
|
|
43
|
-
required?: boolean;
|
|
44
|
-
|
|
45
|
-
/**
|
|
46
|
-
* Switch to external (remote) search mode. Default is `false` — the
|
|
47
|
-
* multiselect filters its own children client-side. Set to `true` when you
|
|
48
|
-
* want to handle filtering yourself (e.g. server-side): the component will
|
|
49
|
-
* dispatch `search` events on each keystroke, and you must update the children
|
|
50
|
-
* in response. The `onSearch` prop receives those events.
|
|
51
|
-
*/
|
|
52
|
-
externalSearch?: boolean;
|
|
53
|
-
|
|
54
|
-
/** Debounce in milliseconds (0-5000) */
|
|
55
|
-
debounce?: number;
|
|
56
|
-
|
|
57
|
-
/** Mobile section label for selected items */
|
|
58
|
-
selectedLabel?: string;
|
|
59
|
-
|
|
60
|
-
/** Form field name for form submission */
|
|
61
|
-
name?: string;
|
|
62
|
-
|
|
63
|
-
/** Callback when selection changes */
|
|
64
|
-
onChange?: (event: CustomEvent<TyMultiselectEventDetail>) => void;
|
|
65
|
-
|
|
66
|
-
/** Callback fired on each search input change (debounced by `debounce`). Use for external/server-side filtering. */
|
|
67
|
-
onSearch?: (event: CustomEvent<{ query: string; element: HTMLElement }>) => void;
|
|
68
|
-
onOpen?: (event: CustomEvent) => void;
|
|
69
|
-
onClose?: (event: CustomEvent) => void;
|
|
70
|
-
|
|
71
|
-
/** Children should be TyTag components, not TyOption */
|
|
72
|
-
children?: React.ReactNode;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
// React wrapper for ty-multiselect web component
|
|
76
|
-
export const TyMultiselect = React.forwardRef<HTMLElement, TyMultiselectProps>(
|
|
77
|
-
({
|
|
78
|
-
value,
|
|
79
|
-
placeholder,
|
|
80
|
-
disabled,
|
|
81
|
-
loading,
|
|
82
|
-
readonly,
|
|
83
|
-
flavor,
|
|
84
|
-
label,
|
|
85
|
-
required,
|
|
86
|
-
externalSearch,
|
|
87
|
-
debounce,
|
|
88
|
-
selectedLabel,
|
|
89
|
-
name,
|
|
90
|
-
onChange,
|
|
91
|
-
onSearch,
|
|
92
|
-
onOpen,
|
|
93
|
-
onClose,
|
|
94
|
-
children,
|
|
95
|
-
...props
|
|
96
|
-
}, ref) => {
|
|
97
|
-
const elementRef = useRef<HTMLElement>(null);
|
|
98
|
-
|
|
99
|
-
// Handle ref forwarding
|
|
100
|
-
useEffect(() => {
|
|
101
|
-
if (ref && elementRef.current) {
|
|
102
|
-
if (typeof ref === 'function') {
|
|
103
|
-
ref(elementRef.current);
|
|
104
|
-
} else {
|
|
105
|
-
ref.current = elementRef.current;
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
}, [ref]);
|
|
109
|
-
|
|
110
|
-
// Imperatively sync `value` to the underlying property so resets
|
|
111
|
-
// (`value=""` or null) reliably clear the visible selection.
|
|
112
|
-
// React 18 workaround; React 19+ handles this natively.
|
|
113
|
-
useEffect(() => {
|
|
114
|
-
if (!needsPropertyBridge) return;
|
|
115
|
-
const element = elementRef.current as any;
|
|
116
|
-
if (!element) return;
|
|
117
|
-
const next = (props as any).value ?? '';
|
|
118
|
-
if (element.value !== next) {
|
|
119
|
-
element.value = next;
|
|
120
|
-
}
|
|
121
|
-
}, [(props as any).value]);
|
|
122
|
-
|
|
123
|
-
// Handle change events
|
|
124
|
-
const handleChange = useCallback((event: Event) => {
|
|
125
|
-
const customEvent = event as CustomEvent<TyMultiselectEventDetail>;
|
|
126
|
-
if (onChange) {
|
|
127
|
-
onChange(customEvent);
|
|
128
|
-
}
|
|
129
|
-
}, [onChange]);
|
|
130
|
-
|
|
131
|
-
const handleSearch = useCallback((event: Event) => {
|
|
132
|
-
const customEvent = event as CustomEvent<{ query: string; element: HTMLElement }>;
|
|
133
|
-
if (onSearch) {
|
|
134
|
-
onSearch(customEvent);
|
|
135
|
-
}
|
|
136
|
-
}, [onSearch]);
|
|
137
|
-
|
|
138
|
-
const handleOpen = useCallback((event: Event) => { if (onOpen) onOpen(event as CustomEvent); }, [onOpen]);
|
|
139
|
-
const handleClose = useCallback((event: Event) => { if (onClose) onClose(event as CustomEvent); }, [onClose]);
|
|
140
|
-
|
|
141
|
-
// Set up event listeners
|
|
142
|
-
useEffect(() => {
|
|
143
|
-
const element = elementRef.current;
|
|
144
|
-
if (!element) return;
|
|
145
|
-
|
|
146
|
-
if (onChange) element.addEventListener('change', handleChange);
|
|
147
|
-
if (onSearch) element.addEventListener('search', handleSearch);
|
|
148
|
-
if (onOpen) element.addEventListener('open', handleOpen);
|
|
149
|
-
if (onClose) element.addEventListener('close', handleClose);
|
|
150
|
-
|
|
151
|
-
return () => {
|
|
152
|
-
if (onChange) element.removeEventListener('change', handleChange);
|
|
153
|
-
if (onSearch) element.removeEventListener('search', handleSearch);
|
|
154
|
-
if (onOpen) element.removeEventListener('open', handleOpen);
|
|
155
|
-
if (onClose) element.removeEventListener('close', handleClose);
|
|
156
|
-
};
|
|
157
|
-
}, [handleChange, handleSearch, handleOpen, handleClose, onChange, onSearch, onOpen, onClose]);
|
|
158
|
-
|
|
159
|
-
// Imperative property sync for boolean props (see use-boolean-prop.ts).
|
|
160
|
-
const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
|
|
161
|
-
const isLoading = useBooleanProperty(elementRef, 'loading', loading);
|
|
162
|
-
const isReadonly = useBooleanProperty(elementRef, 'readonly', readonly);
|
|
163
|
-
const isRequired = useBooleanProperty(elementRef, 'required', required);
|
|
164
|
-
const isExternalSearch = useBooleanProperty(elementRef, 'externalSearch', externalSearch);
|
|
165
|
-
|
|
166
|
-
// Convert React props to web component attributes
|
|
167
|
-
const webComponentProps: Record<string, any> = {
|
|
168
|
-
...props,
|
|
169
|
-
ref: elementRef,
|
|
170
|
-
};
|
|
171
|
-
|
|
172
|
-
// Handle value conversion (array to comma-separated string)
|
|
173
|
-
if (value !== undefined) {
|
|
174
|
-
const valueString = Array.isArray(value) ? value.join(',') : value;
|
|
175
|
-
webComponentProps.value = valueString;
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
// Add optional attributes only if they have values
|
|
179
|
-
if (placeholder) {
|
|
180
|
-
webComponentProps.placeholder = placeholder;
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
if (isLoading) webComponentProps.loading = '';
|
|
184
|
-
if (isDisabled) webComponentProps.disabled = '';
|
|
185
|
-
if (isReadonly) webComponentProps.readonly = '';
|
|
186
|
-
if (isRequired) webComponentProps.required = '';
|
|
187
|
-
if (isExternalSearch) webComponentProps['external-search'] = '';
|
|
188
|
-
|
|
189
|
-
if (flavor) {
|
|
190
|
-
webComponentProps.flavor = flavor;
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
if (label) {
|
|
194
|
-
webComponentProps.label = label;
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
if (name) {
|
|
198
|
-
webComponentProps.name = name;
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
// Add debounce attribute
|
|
202
|
-
if (debounce !== undefined) {
|
|
203
|
-
webComponentProps.debounce = debounce;
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
// Add selectedLabel attribute
|
|
207
|
-
if (selectedLabel) {
|
|
208
|
-
webComponentProps['selected-label'] = selectedLabel;
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
return React.createElement(
|
|
212
|
-
'ty-multiselect',
|
|
213
|
-
webComponentProps,
|
|
214
|
-
children
|
|
215
|
-
);
|
|
216
|
-
}
|
|
217
|
-
);
|
|
218
|
-
|
|
219
|
-
TyMultiselect.displayName = 'TyMultiselect';
|