@stackline/react-multiselect-dropdown 17.0.0
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/LICENSE +21 -0
- package/README.md +374 -0
- package/dist/index.cjs +2022 -0
- package/dist/index.d.cts +113 -0
- package/dist/index.d.ts +113 -0
- package/dist/index.js +2002 -0
- package/package.json +75 -0
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
import { CSSProperties, ReactNode, ForwardedRef, ReactElement } from 'react';
|
|
2
|
+
|
|
3
|
+
type PrimitiveItem = string | number | boolean;
|
|
4
|
+
type DropdownItem = PrimitiveItem | Record<string, any>;
|
|
5
|
+
interface DropdownSettings<T = DropdownItem> {
|
|
6
|
+
singleSelection?: boolean;
|
|
7
|
+
text?: string;
|
|
8
|
+
enableCheckAll?: boolean;
|
|
9
|
+
selectAllText?: string;
|
|
10
|
+
unSelectAllText?: string;
|
|
11
|
+
filterSelectAllText?: string;
|
|
12
|
+
filterUnSelectAllText?: string;
|
|
13
|
+
enableFilterSelectAll?: boolean;
|
|
14
|
+
enableSearchFilter?: boolean;
|
|
15
|
+
searchBy?: string[];
|
|
16
|
+
maxHeight?: number;
|
|
17
|
+
badgeShowLimit?: number;
|
|
18
|
+
classes?: string;
|
|
19
|
+
limitSelection?: number;
|
|
20
|
+
disabled?: boolean;
|
|
21
|
+
searchPlaceholderText?: string;
|
|
22
|
+
groupBy?: string | ((item: T) => string);
|
|
23
|
+
showCheckbox?: boolean;
|
|
24
|
+
noDataLabel?: string;
|
|
25
|
+
searchAutofocus?: boolean;
|
|
26
|
+
lazyLoading?: boolean;
|
|
27
|
+
labelKey?: string;
|
|
28
|
+
primaryKey?: string;
|
|
29
|
+
position?: 'top' | 'bottom';
|
|
30
|
+
autoPosition?: boolean;
|
|
31
|
+
loading?: boolean;
|
|
32
|
+
selectGroup?: boolean;
|
|
33
|
+
addNewItemOnFilter?: boolean;
|
|
34
|
+
addNewButtonText?: string;
|
|
35
|
+
escapeToClose?: boolean;
|
|
36
|
+
clearAll?: boolean;
|
|
37
|
+
closeDropDownOnSelection?: boolean;
|
|
38
|
+
tagToBody?: boolean;
|
|
39
|
+
appendToBody?: boolean;
|
|
40
|
+
/** @deprecated Use `skin` instead. Kept as a compatibility alias. */
|
|
41
|
+
theme?: 'classic' | 'material' | 'dark' | 'custom' | 'brand' | string;
|
|
42
|
+
skin?: 'classic' | 'material' | 'dark' | 'custom' | 'brand' | string;
|
|
43
|
+
ariaLabel?: string;
|
|
44
|
+
listboxAriaLabel?: string;
|
|
45
|
+
searchAriaLabel?: string;
|
|
46
|
+
clearSearchAriaLabel?: string;
|
|
47
|
+
clearAllAriaLabel?: string;
|
|
48
|
+
removeItemAriaLabel?: string | ((item: T) => string);
|
|
49
|
+
openDropdownAriaLabel?: string;
|
|
50
|
+
closeDropdownAriaLabel?: string;
|
|
51
|
+
loadingText?: string;
|
|
52
|
+
}
|
|
53
|
+
interface DropdownRenderContext<T = DropdownItem> {
|
|
54
|
+
item: T;
|
|
55
|
+
label: string;
|
|
56
|
+
selected: boolean;
|
|
57
|
+
disabled: boolean;
|
|
58
|
+
query: string;
|
|
59
|
+
toggle: () => void;
|
|
60
|
+
remove: () => void;
|
|
61
|
+
}
|
|
62
|
+
interface MultiSelectDropdownHandle<T = DropdownItem> {
|
|
63
|
+
openDropdown: () => void;
|
|
64
|
+
closeDropdown: () => void;
|
|
65
|
+
clearSelection: () => void;
|
|
66
|
+
focusSearch: () => void;
|
|
67
|
+
selectAll: () => void;
|
|
68
|
+
deSelectAll: () => void;
|
|
69
|
+
getSelectedItems: () => T[];
|
|
70
|
+
}
|
|
71
|
+
interface MultiSelectDropdownProps<T = DropdownItem> {
|
|
72
|
+
data: T[];
|
|
73
|
+
settings?: DropdownSettings<T>;
|
|
74
|
+
loading?: boolean;
|
|
75
|
+
name?: string;
|
|
76
|
+
className?: string;
|
|
77
|
+
style?: CSSProperties;
|
|
78
|
+
selectedItems?: T[];
|
|
79
|
+
defaultSelectedItems?: T[];
|
|
80
|
+
onChange?: (items: T[]) => void;
|
|
81
|
+
onSelect?: (item: T) => void;
|
|
82
|
+
onDeSelect?: (item: T) => void;
|
|
83
|
+
onSelectAll?: (items: T[]) => void;
|
|
84
|
+
onDeSelectAll?: (items: T[]) => void;
|
|
85
|
+
onOpen?: () => void;
|
|
86
|
+
onClose?: () => void;
|
|
87
|
+
onScrollToEnd?: (event: {
|
|
88
|
+
scrollTop: number;
|
|
89
|
+
scrollHeight: number;
|
|
90
|
+
clientHeight: number;
|
|
91
|
+
}) => void;
|
|
92
|
+
onFilterSelectAll?: (items: T[]) => void;
|
|
93
|
+
onFilterDeSelectAll?: (items: T[]) => void;
|
|
94
|
+
onAddFilterNewItem?: (query: string) => void | T | Promise<void | T>;
|
|
95
|
+
onGroupSelect?: (groupName: string, items: T[]) => void;
|
|
96
|
+
onGroupDeSelect?: (groupName: string, items: T[]) => void;
|
|
97
|
+
renderItem?: (item: T, context: DropdownRenderContext<T>) => ReactNode;
|
|
98
|
+
renderBadge?: (item: T, context: DropdownRenderContext<T>) => ReactNode;
|
|
99
|
+
renderSearch?: (context: {
|
|
100
|
+
query: string;
|
|
101
|
+
setQuery: (value: string) => void;
|
|
102
|
+
closeDropdown: () => void;
|
|
103
|
+
}) => ReactNode;
|
|
104
|
+
renderEmptyState?: (query: string) => ReactNode;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
type MultiSelectComponent = <T extends DropdownItem = DropdownItem>(props: MultiSelectDropdownProps<T> & {
|
|
108
|
+
ref?: ForwardedRef<MultiSelectDropdownHandle<T>>;
|
|
109
|
+
}) => ReactElement | null;
|
|
110
|
+
declare const ReactMultiSelectDropdown: MultiSelectComponent;
|
|
111
|
+
declare const MultiSelectDropdown: MultiSelectComponent;
|
|
112
|
+
|
|
113
|
+
export { type DropdownItem, type DropdownRenderContext, type DropdownSettings, MultiSelectDropdown, type MultiSelectDropdownHandle, type MultiSelectDropdownProps, type PrimitiveItem, ReactMultiSelectDropdown };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
import { CSSProperties, ReactNode, ForwardedRef, ReactElement } from 'react';
|
|
2
|
+
|
|
3
|
+
type PrimitiveItem = string | number | boolean;
|
|
4
|
+
type DropdownItem = PrimitiveItem | Record<string, any>;
|
|
5
|
+
interface DropdownSettings<T = DropdownItem> {
|
|
6
|
+
singleSelection?: boolean;
|
|
7
|
+
text?: string;
|
|
8
|
+
enableCheckAll?: boolean;
|
|
9
|
+
selectAllText?: string;
|
|
10
|
+
unSelectAllText?: string;
|
|
11
|
+
filterSelectAllText?: string;
|
|
12
|
+
filterUnSelectAllText?: string;
|
|
13
|
+
enableFilterSelectAll?: boolean;
|
|
14
|
+
enableSearchFilter?: boolean;
|
|
15
|
+
searchBy?: string[];
|
|
16
|
+
maxHeight?: number;
|
|
17
|
+
badgeShowLimit?: number;
|
|
18
|
+
classes?: string;
|
|
19
|
+
limitSelection?: number;
|
|
20
|
+
disabled?: boolean;
|
|
21
|
+
searchPlaceholderText?: string;
|
|
22
|
+
groupBy?: string | ((item: T) => string);
|
|
23
|
+
showCheckbox?: boolean;
|
|
24
|
+
noDataLabel?: string;
|
|
25
|
+
searchAutofocus?: boolean;
|
|
26
|
+
lazyLoading?: boolean;
|
|
27
|
+
labelKey?: string;
|
|
28
|
+
primaryKey?: string;
|
|
29
|
+
position?: 'top' | 'bottom';
|
|
30
|
+
autoPosition?: boolean;
|
|
31
|
+
loading?: boolean;
|
|
32
|
+
selectGroup?: boolean;
|
|
33
|
+
addNewItemOnFilter?: boolean;
|
|
34
|
+
addNewButtonText?: string;
|
|
35
|
+
escapeToClose?: boolean;
|
|
36
|
+
clearAll?: boolean;
|
|
37
|
+
closeDropDownOnSelection?: boolean;
|
|
38
|
+
tagToBody?: boolean;
|
|
39
|
+
appendToBody?: boolean;
|
|
40
|
+
/** @deprecated Use `skin` instead. Kept as a compatibility alias. */
|
|
41
|
+
theme?: 'classic' | 'material' | 'dark' | 'custom' | 'brand' | string;
|
|
42
|
+
skin?: 'classic' | 'material' | 'dark' | 'custom' | 'brand' | string;
|
|
43
|
+
ariaLabel?: string;
|
|
44
|
+
listboxAriaLabel?: string;
|
|
45
|
+
searchAriaLabel?: string;
|
|
46
|
+
clearSearchAriaLabel?: string;
|
|
47
|
+
clearAllAriaLabel?: string;
|
|
48
|
+
removeItemAriaLabel?: string | ((item: T) => string);
|
|
49
|
+
openDropdownAriaLabel?: string;
|
|
50
|
+
closeDropdownAriaLabel?: string;
|
|
51
|
+
loadingText?: string;
|
|
52
|
+
}
|
|
53
|
+
interface DropdownRenderContext<T = DropdownItem> {
|
|
54
|
+
item: T;
|
|
55
|
+
label: string;
|
|
56
|
+
selected: boolean;
|
|
57
|
+
disabled: boolean;
|
|
58
|
+
query: string;
|
|
59
|
+
toggle: () => void;
|
|
60
|
+
remove: () => void;
|
|
61
|
+
}
|
|
62
|
+
interface MultiSelectDropdownHandle<T = DropdownItem> {
|
|
63
|
+
openDropdown: () => void;
|
|
64
|
+
closeDropdown: () => void;
|
|
65
|
+
clearSelection: () => void;
|
|
66
|
+
focusSearch: () => void;
|
|
67
|
+
selectAll: () => void;
|
|
68
|
+
deSelectAll: () => void;
|
|
69
|
+
getSelectedItems: () => T[];
|
|
70
|
+
}
|
|
71
|
+
interface MultiSelectDropdownProps<T = DropdownItem> {
|
|
72
|
+
data: T[];
|
|
73
|
+
settings?: DropdownSettings<T>;
|
|
74
|
+
loading?: boolean;
|
|
75
|
+
name?: string;
|
|
76
|
+
className?: string;
|
|
77
|
+
style?: CSSProperties;
|
|
78
|
+
selectedItems?: T[];
|
|
79
|
+
defaultSelectedItems?: T[];
|
|
80
|
+
onChange?: (items: T[]) => void;
|
|
81
|
+
onSelect?: (item: T) => void;
|
|
82
|
+
onDeSelect?: (item: T) => void;
|
|
83
|
+
onSelectAll?: (items: T[]) => void;
|
|
84
|
+
onDeSelectAll?: (items: T[]) => void;
|
|
85
|
+
onOpen?: () => void;
|
|
86
|
+
onClose?: () => void;
|
|
87
|
+
onScrollToEnd?: (event: {
|
|
88
|
+
scrollTop: number;
|
|
89
|
+
scrollHeight: number;
|
|
90
|
+
clientHeight: number;
|
|
91
|
+
}) => void;
|
|
92
|
+
onFilterSelectAll?: (items: T[]) => void;
|
|
93
|
+
onFilterDeSelectAll?: (items: T[]) => void;
|
|
94
|
+
onAddFilterNewItem?: (query: string) => void | T | Promise<void | T>;
|
|
95
|
+
onGroupSelect?: (groupName: string, items: T[]) => void;
|
|
96
|
+
onGroupDeSelect?: (groupName: string, items: T[]) => void;
|
|
97
|
+
renderItem?: (item: T, context: DropdownRenderContext<T>) => ReactNode;
|
|
98
|
+
renderBadge?: (item: T, context: DropdownRenderContext<T>) => ReactNode;
|
|
99
|
+
renderSearch?: (context: {
|
|
100
|
+
query: string;
|
|
101
|
+
setQuery: (value: string) => void;
|
|
102
|
+
closeDropdown: () => void;
|
|
103
|
+
}) => ReactNode;
|
|
104
|
+
renderEmptyState?: (query: string) => ReactNode;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
type MultiSelectComponent = <T extends DropdownItem = DropdownItem>(props: MultiSelectDropdownProps<T> & {
|
|
108
|
+
ref?: ForwardedRef<MultiSelectDropdownHandle<T>>;
|
|
109
|
+
}) => ReactElement | null;
|
|
110
|
+
declare const ReactMultiSelectDropdown: MultiSelectComponent;
|
|
111
|
+
declare const MultiSelectDropdown: MultiSelectComponent;
|
|
112
|
+
|
|
113
|
+
export { type DropdownItem, type DropdownRenderContext, type DropdownSettings, MultiSelectDropdown, type MultiSelectDropdownHandle, type MultiSelectDropdownProps, type PrimitiveItem, ReactMultiSelectDropdown };
|