@rescui/select 0.17.1 → 0.17.2-RUI-296-Build-docs-md-files-for-each-docs-section-2a311c841.14
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/README.md +3 -1
- package/lib/_virtual/index.css.js +12 -12
- package/lib/common-prop-types.d.ts +29 -29
- package/lib/constants.d.ts +6 -6
- package/lib/hooks/use-a11y.d.ts +30 -30
- package/lib/hooks/use-actual-size-from-css.d.ts +10 -10
- package/lib/hooks/use-actual-size-from-css.js +1 -1
- package/lib/hooks/use-focus.d.ts +10 -10
- package/lib/hooks/use-hover.d.ts +10 -10
- package/lib/hooks/use-label-focus.d.ts +9 -9
- package/lib/hooks/use-multi-handlers.d.ts +11 -11
- package/lib/hooks/use-options.d.ts +13 -14
- package/lib/hooks/use-options.js +5 -5
- package/lib/hooks/use-primary-contrast-css-var-transfer.d.ts +11 -11
- package/lib/hooks/use-primary-contrast-css-var-transfer.js +2 -2
- package/lib/hooks/use-safe-id.d.ts +6 -6
- package/lib/index.css +189 -189
- package/lib/index.d.ts +4 -4
- package/lib/multiselect.d.ts +3 -3
- package/lib/multiselect.js +1 -0
- package/lib/native-select.d.ts +4 -4
- package/lib/parts/foldable.d.ts +34 -33
- package/lib/parts/form-trigger-wrapper.d.ts +34 -34
- package/lib/parts/hidden-select.d.ts +13 -13
- package/lib/parts/icons.d.ts +17 -17
- package/lib/parts/list-box.d.ts +13 -13
- package/lib/parts/multi-trigger.d.ts +12 -12
- package/lib/parts/native-select-options-with-groups.d.ts +8 -8
- package/lib/parts/popup-content.d.ts +20 -20
- package/lib/select-basic.d.ts +3 -3
- package/lib/select-searchable.d.ts +3 -3
- package/lib/select.d.ts +28 -28
- package/lib/styles/common.p.module.css.js +29 -29
- package/lib/styles/form-trigger.p.module.css.js +12 -12
- package/lib/styles/list-box.p.module.css.js +13 -13
- package/lib/types.d.ts +202 -202
- package/lib/utils/calculate-max-height-by-items.d.ts +13 -13
- package/lib/utils/calculate-max-height-by-items.js +11 -11
- package/lib/utils/get-empty-message.d.ts +6 -6
- package/lib/utils/get-option-value.d.ts +2 -2
- package/lib/utils/get-real-items-cnt.d.ts +2 -2
- package/lib/utils/get-text-from-nodes.d.ts +2 -2
- package/lib/utils/is-option-a-group.d.ts +2 -2
- package/lib/utils/item-to-string.d.ts +2 -2
- package/lib/utils/merge-props.d.ts +19 -19
- package/lib/utils/merge-props.js +17 -17
- package/lib/utils/throttle.d.ts +1 -1
- package/package.json +10 -10
package/lib/types.d.ts
CHANGED
|
@@ -1,202 +1,202 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { Theme } from '@rescui/ui-contexts';
|
|
3
|
-
import type { UseSelectPropGetters } from 'downshift';
|
|
4
|
-
export
|
|
5
|
-
export
|
|
6
|
-
export
|
|
7
|
-
export
|
|
8
|
-
export
|
|
9
|
-
label: React.ReactNode;
|
|
10
|
-
value?: Key;
|
|
11
|
-
};
|
|
12
|
-
export
|
|
13
|
-
label?: React.ReactNode;
|
|
14
|
-
options: SelectOption[];
|
|
15
|
-
};
|
|
16
|
-
export
|
|
17
|
-
export
|
|
18
|
-
export
|
|
19
|
-
index: number;
|
|
20
|
-
type: 'option';
|
|
21
|
-
key: Key;
|
|
22
|
-
disabled?: boolean;
|
|
23
|
-
};
|
|
24
|
-
export
|
|
25
|
-
options: ListBoxOptionItem[];
|
|
26
|
-
type: 'group';
|
|
27
|
-
key: Key;
|
|
28
|
-
};
|
|
29
|
-
export
|
|
30
|
-
export
|
|
31
|
-
export
|
|
32
|
-
menuProps: ReturnType<UseSelectPropGetters<SelectOption>['getMenuProps']>;
|
|
33
|
-
getItemProps: UseSelectPropGetters<SelectOption>['getItemProps'];
|
|
34
|
-
highlightedIndex: number;
|
|
35
|
-
selectedMap: Map<Key, SelectOption>;
|
|
36
|
-
menuRef?: React.RefObject<HTMLUListElement>;
|
|
37
|
-
};
|
|
38
|
-
export
|
|
39
|
-
label: string;
|
|
40
|
-
value?: Key;
|
|
41
|
-
disabled?: boolean;
|
|
42
|
-
};
|
|
43
|
-
export
|
|
44
|
-
label?: string;
|
|
45
|
-
disabled?: boolean;
|
|
46
|
-
options: NativeSelectOption[];
|
|
47
|
-
};
|
|
48
|
-
export
|
|
49
|
-
export
|
|
50
|
-
export
|
|
51
|
-
export
|
|
52
|
-
noOptions: string;
|
|
53
|
-
nothingFound?: string;
|
|
54
|
-
loading?: string;
|
|
55
|
-
};
|
|
56
|
-
export
|
|
57
|
-
export
|
|
58
|
-
/**
|
|
59
|
-
* Value of the select
|
|
60
|
-
*/
|
|
61
|
-
value?: SelectOption | null;
|
|
62
|
-
/**
|
|
63
|
-
* Change value callback. `value => ...`. Pass `null` on clear.
|
|
64
|
-
*/
|
|
65
|
-
onChange?: (newValue: SelectOption | null) => void;
|
|
66
|
-
/**
|
|
67
|
-
* Additional class name
|
|
68
|
-
*/
|
|
69
|
-
className?: string;
|
|
70
|
-
style?: React.CSSProperties;
|
|
71
|
-
id?: string;
|
|
72
|
-
/**
|
|
73
|
-
* Array of options or option groups
|
|
74
|
-
*/
|
|
75
|
-
options?: (SelectOption | SelectOptionsGroup)[] | null;
|
|
76
|
-
/**
|
|
77
|
-
* Is select supports clearing the value
|
|
78
|
-
*/
|
|
79
|
-
isClearable?: boolean;
|
|
80
|
-
/**
|
|
81
|
-
* Is select supports inplace filtering
|
|
82
|
-
*/
|
|
83
|
-
isSearchable?: boolean;
|
|
84
|
-
/**
|
|
85
|
-
* Is the component has been disabled
|
|
86
|
-
*/
|
|
87
|
-
isDisabled?: boolean;
|
|
88
|
-
/**
|
|
89
|
-
* Is loader displayed inside the trigger part
|
|
90
|
-
*/
|
|
91
|
-
isLoading?: boolean;
|
|
92
|
-
/**
|
|
93
|
-
* A hint to the user of what can be entered in the control
|
|
94
|
-
*/
|
|
95
|
-
placeholder?: string;
|
|
96
|
-
/**
|
|
97
|
-
* Size
|
|
98
|
-
*/
|
|
99
|
-
size?: SelectSize;
|
|
100
|
-
/**
|
|
101
|
-
* Appearance mode
|
|
102
|
-
*/
|
|
103
|
-
mode?: SelectMode;
|
|
104
|
-
/**
|
|
105
|
-
* Appearance theme
|
|
106
|
-
*/
|
|
107
|
-
theme?: Theme;
|
|
108
|
-
/**
|
|
109
|
-
* Error state flag or `React.ReactNode` (use with forms)
|
|
110
|
-
*/
|
|
111
|
-
error?: boolean | React.ReactNode;
|
|
112
|
-
/**
|
|
113
|
-
* If `true`, there will be reserved a space for a 1-line error message. Subsequent lines will be placed below normally.
|
|
114
|
-
* If `false`, there will be no reservation.
|
|
115
|
-
*/
|
|
116
|
-
reserveErrorLine?: boolean;
|
|
117
|
-
/**
|
|
118
|
-
* Label element (use with forms)
|
|
119
|
-
*/
|
|
120
|
-
label?: React.ReactNode;
|
|
121
|
-
/**
|
|
122
|
-
* If `true`, label will be bold
|
|
123
|
-
*/
|
|
124
|
-
boldLabel?: boolean;
|
|
125
|
-
/**
|
|
126
|
-
* Placement of dropdown element
|
|
127
|
-
*/
|
|
128
|
-
placement?: Placement;
|
|
129
|
-
/**
|
|
130
|
-
* Note element at the bottom (use with forms)
|
|
131
|
-
*/
|
|
132
|
-
note?: React.ReactNode;
|
|
133
|
-
/**
|
|
134
|
-
* Text to display when there are no options
|
|
135
|
-
*/
|
|
136
|
-
noOptionsMessage?: NoOptionsMessage;
|
|
137
|
-
/**
|
|
138
|
-
* Input name attribute
|
|
139
|
-
*/
|
|
140
|
-
name?: string;
|
|
141
|
-
/**
|
|
142
|
-
* Maximum number of fully visible items in the dropdown list.
|
|
143
|
-
* For large lists, `n + 0.5` items will be visible at a time.
|
|
144
|
-
* If the maximum number of items in a list is exactly `n + 1`, all
|
|
145
|
-
* items will be shown instead (to avoid creating a scroll for half an item only).
|
|
146
|
-
*/
|
|
147
|
-
maxVisibleItems?: number;
|
|
148
|
-
};
|
|
149
|
-
export
|
|
150
|
-
/**
|
|
151
|
-
* Value of the multiselect (array of selected options)
|
|
152
|
-
*/
|
|
153
|
-
value?: SelectOption[] | null;
|
|
154
|
-
/**
|
|
155
|
-
* Change value callback. `value => ...`. Pass `[]` on clear.
|
|
156
|
-
*/
|
|
157
|
-
onChange?: (newValue: SelectOption[]) => void;
|
|
158
|
-
/**
|
|
159
|
-
* Display tags in single line with "+N" counter
|
|
160
|
-
*/
|
|
161
|
-
isSingleLine?: boolean;
|
|
162
|
-
} & Omit<SelectProps, 'value' | 'onChange' | 'isSearchable'>;
|
|
163
|
-
export
|
|
164
|
-
selectedLabel?: string;
|
|
165
|
-
selectedValue?: Key;
|
|
166
|
-
placeholder?: string;
|
|
167
|
-
hovered: boolean;
|
|
168
|
-
focused: boolean;
|
|
169
|
-
};
|
|
170
|
-
export
|
|
171
|
-
options?: (NativeSelectOption | NativeSelectOptionsGroup)[];
|
|
172
|
-
size?: SelectSize;
|
|
173
|
-
theme?: Theme;
|
|
174
|
-
className?: string;
|
|
175
|
-
id?: string;
|
|
176
|
-
style?: React.CSSProperties;
|
|
177
|
-
value?: NativeSelectOption | null;
|
|
178
|
-
onChange?: (newValue: NativeSelectOption | null) => void;
|
|
179
|
-
placeholder?: string;
|
|
180
|
-
isLoading?: boolean;
|
|
181
|
-
isDisabled?: boolean;
|
|
182
|
-
isClearable?: boolean;
|
|
183
|
-
trigger?: (props: TriggerFuncProps) => React.ReactNode;
|
|
184
|
-
label?: React.ReactNode;
|
|
185
|
-
note?: React.ReactNode;
|
|
186
|
-
error?: boolean | React.ReactNode;
|
|
187
|
-
/**
|
|
188
|
-
* If `true`, there will be reserved a space for a 1-line error message. Subsequent lines will be placed below normally.
|
|
189
|
-
* If `false`, there will be no reservation.
|
|
190
|
-
*/
|
|
191
|
-
reserveErrorLine?: boolean;
|
|
192
|
-
noOptionsMessage?: NoOptionsMessage;
|
|
193
|
-
name?: string;
|
|
194
|
-
boldLabel?: boolean;
|
|
195
|
-
};
|
|
196
|
-
export
|
|
197
|
-
export
|
|
198
|
-
preventDownshiftDefault?: boolean;
|
|
199
|
-
nativeEvent: {
|
|
200
|
-
preventDownshiftDefault?: boolean;
|
|
201
|
-
};
|
|
202
|
-
};
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { Theme } from '@rescui/ui-contexts';
|
|
3
|
+
import type { UseSelectPropGetters } from 'downshift';
|
|
4
|
+
export type Key = string | number;
|
|
5
|
+
export type Placement = 'auto-start' | 'auto' | 'auto-end' | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start';
|
|
6
|
+
export type SelectSize = 'l' | 'm' | 's';
|
|
7
|
+
export type SelectMode = 'classic' | 'rock';
|
|
8
|
+
export type SelectOption = {
|
|
9
|
+
label: React.ReactNode;
|
|
10
|
+
value?: Key;
|
|
11
|
+
};
|
|
12
|
+
export type SelectOptionsGroup = {
|
|
13
|
+
label?: React.ReactNode;
|
|
14
|
+
options: SelectOption[];
|
|
15
|
+
};
|
|
16
|
+
export type SelectOptionOrGroup = SelectOption | SelectOptionsGroup;
|
|
17
|
+
export type SelectOptions = SelectOptionOrGroup[];
|
|
18
|
+
export type ListBoxOptionItem = SelectOption & {
|
|
19
|
+
index: number;
|
|
20
|
+
type: 'option';
|
|
21
|
+
key: Key;
|
|
22
|
+
disabled?: boolean;
|
|
23
|
+
};
|
|
24
|
+
export type ListBoxGroupItem = Omit<SelectOptionsGroup, 'options'> & {
|
|
25
|
+
options: ListBoxOptionItem[];
|
|
26
|
+
type: 'group';
|
|
27
|
+
key: Key;
|
|
28
|
+
};
|
|
29
|
+
export type ListBoxItem = ListBoxOptionItem | ListBoxGroupItem;
|
|
30
|
+
export type ListBoxItems = ListBoxItem[];
|
|
31
|
+
export type ListBoxState = {
|
|
32
|
+
menuProps: ReturnType<UseSelectPropGetters<SelectOption>['getMenuProps']>;
|
|
33
|
+
getItemProps: UseSelectPropGetters<SelectOption>['getItemProps'];
|
|
34
|
+
highlightedIndex: number;
|
|
35
|
+
selectedMap: Map<Key, SelectOption>;
|
|
36
|
+
menuRef?: React.RefObject<HTMLUListElement>;
|
|
37
|
+
};
|
|
38
|
+
export type NativeSelectOption = {
|
|
39
|
+
label: string;
|
|
40
|
+
value?: Key;
|
|
41
|
+
disabled?: boolean;
|
|
42
|
+
};
|
|
43
|
+
export type NativeSelectOptionsGroup = {
|
|
44
|
+
label?: string;
|
|
45
|
+
disabled?: boolean;
|
|
46
|
+
options: NativeSelectOption[];
|
|
47
|
+
};
|
|
48
|
+
export type NativeSelectOptionOrGroup = NativeSelectOption | NativeSelectOptionsGroup;
|
|
49
|
+
export type NativeSelectOptions = NativeSelectOptionOrGroup[];
|
|
50
|
+
export type Groups = SelectOptionsGroup[];
|
|
51
|
+
export type NoOptionsMessageConfig = {
|
|
52
|
+
noOptions: string;
|
|
53
|
+
nothingFound?: string;
|
|
54
|
+
loading?: string;
|
|
55
|
+
};
|
|
56
|
+
export type NoOptionsMessage = string | NoOptionsMessageConfig;
|
|
57
|
+
export type SelectProps = {
|
|
58
|
+
/**
|
|
59
|
+
* Value of the select
|
|
60
|
+
*/
|
|
61
|
+
value?: SelectOption | null;
|
|
62
|
+
/**
|
|
63
|
+
* Change value callback. `value => ...`. Pass `null` on clear.
|
|
64
|
+
*/
|
|
65
|
+
onChange?: (newValue: SelectOption | null) => void;
|
|
66
|
+
/**
|
|
67
|
+
* Additional class name
|
|
68
|
+
*/
|
|
69
|
+
className?: string;
|
|
70
|
+
style?: React.CSSProperties;
|
|
71
|
+
id?: string;
|
|
72
|
+
/**
|
|
73
|
+
* Array of options or option groups
|
|
74
|
+
*/
|
|
75
|
+
options?: (SelectOption | SelectOptionsGroup)[] | null;
|
|
76
|
+
/**
|
|
77
|
+
* Is select supports clearing the value
|
|
78
|
+
*/
|
|
79
|
+
isClearable?: boolean;
|
|
80
|
+
/**
|
|
81
|
+
* Is select supports inplace filtering
|
|
82
|
+
*/
|
|
83
|
+
isSearchable?: boolean;
|
|
84
|
+
/**
|
|
85
|
+
* Is the component has been disabled
|
|
86
|
+
*/
|
|
87
|
+
isDisabled?: boolean;
|
|
88
|
+
/**
|
|
89
|
+
* Is loader displayed inside the trigger part
|
|
90
|
+
*/
|
|
91
|
+
isLoading?: boolean;
|
|
92
|
+
/**
|
|
93
|
+
* A hint to the user of what can be entered in the control
|
|
94
|
+
*/
|
|
95
|
+
placeholder?: string;
|
|
96
|
+
/**
|
|
97
|
+
* Size
|
|
98
|
+
*/
|
|
99
|
+
size?: SelectSize;
|
|
100
|
+
/**
|
|
101
|
+
* Appearance mode
|
|
102
|
+
*/
|
|
103
|
+
mode?: SelectMode;
|
|
104
|
+
/**
|
|
105
|
+
* Appearance theme
|
|
106
|
+
*/
|
|
107
|
+
theme?: Theme;
|
|
108
|
+
/**
|
|
109
|
+
* Error state flag or `React.ReactNode` (use with forms)
|
|
110
|
+
*/
|
|
111
|
+
error?: boolean | React.ReactNode;
|
|
112
|
+
/**
|
|
113
|
+
* If `true`, there will be reserved a space for a 1-line error message. Subsequent lines will be placed below normally.
|
|
114
|
+
* If `false`, there will be no reservation.
|
|
115
|
+
*/
|
|
116
|
+
reserveErrorLine?: boolean;
|
|
117
|
+
/**
|
|
118
|
+
* Label element (use with forms)
|
|
119
|
+
*/
|
|
120
|
+
label?: React.ReactNode;
|
|
121
|
+
/**
|
|
122
|
+
* If `true`, label will be bold
|
|
123
|
+
*/
|
|
124
|
+
boldLabel?: boolean;
|
|
125
|
+
/**
|
|
126
|
+
* Placement of dropdown element
|
|
127
|
+
*/
|
|
128
|
+
placement?: Placement;
|
|
129
|
+
/**
|
|
130
|
+
* Note element at the bottom (use with forms)
|
|
131
|
+
*/
|
|
132
|
+
note?: React.ReactNode;
|
|
133
|
+
/**
|
|
134
|
+
* Text to display when there are no options
|
|
135
|
+
*/
|
|
136
|
+
noOptionsMessage?: NoOptionsMessage;
|
|
137
|
+
/**
|
|
138
|
+
* Input name attribute
|
|
139
|
+
*/
|
|
140
|
+
name?: string;
|
|
141
|
+
/**
|
|
142
|
+
* Maximum number of fully visible items in the dropdown list.
|
|
143
|
+
* For large lists, `n + 0.5` items will be visible at a time.
|
|
144
|
+
* If the maximum number of items in a list is exactly `n + 1`, all
|
|
145
|
+
* items will be shown instead (to avoid creating a scroll for half an item only).
|
|
146
|
+
*/
|
|
147
|
+
maxVisibleItems?: number;
|
|
148
|
+
};
|
|
149
|
+
export type MultiselectProps = {
|
|
150
|
+
/**
|
|
151
|
+
* Value of the multiselect (array of selected options)
|
|
152
|
+
*/
|
|
153
|
+
value?: SelectOption[] | null;
|
|
154
|
+
/**
|
|
155
|
+
* Change value callback. `value => ...`. Pass `[]` on clear.
|
|
156
|
+
*/
|
|
157
|
+
onChange?: (newValue: SelectOption[]) => void;
|
|
158
|
+
/**
|
|
159
|
+
* Display tags in single line with "+N" counter
|
|
160
|
+
*/
|
|
161
|
+
isSingleLine?: boolean;
|
|
162
|
+
} & Omit<SelectProps, 'value' | 'onChange' | 'isSearchable'>;
|
|
163
|
+
export type TriggerFuncProps = {
|
|
164
|
+
selectedLabel?: string;
|
|
165
|
+
selectedValue?: Key;
|
|
166
|
+
placeholder?: string;
|
|
167
|
+
hovered: boolean;
|
|
168
|
+
focused: boolean;
|
|
169
|
+
};
|
|
170
|
+
export type NativeSelectProps = {
|
|
171
|
+
options?: (NativeSelectOption | NativeSelectOptionsGroup)[];
|
|
172
|
+
size?: SelectSize;
|
|
173
|
+
theme?: Theme;
|
|
174
|
+
className?: string;
|
|
175
|
+
id?: string;
|
|
176
|
+
style?: React.CSSProperties;
|
|
177
|
+
value?: NativeSelectOption | null;
|
|
178
|
+
onChange?: (newValue: NativeSelectOption | null) => void;
|
|
179
|
+
placeholder?: string;
|
|
180
|
+
isLoading?: boolean;
|
|
181
|
+
isDisabled?: boolean;
|
|
182
|
+
isClearable?: boolean;
|
|
183
|
+
trigger?: (props: TriggerFuncProps) => React.ReactNode;
|
|
184
|
+
label?: React.ReactNode;
|
|
185
|
+
note?: React.ReactNode;
|
|
186
|
+
error?: boolean | React.ReactNode;
|
|
187
|
+
/**
|
|
188
|
+
* If `true`, there will be reserved a space for a 1-line error message. Subsequent lines will be placed below normally.
|
|
189
|
+
* If `false`, there will be no reservation.
|
|
190
|
+
*/
|
|
191
|
+
reserveErrorLine?: boolean;
|
|
192
|
+
noOptionsMessage?: NoOptionsMessage;
|
|
193
|
+
name?: string;
|
|
194
|
+
boldLabel?: boolean;
|
|
195
|
+
};
|
|
196
|
+
export type InnerSingleComponentProps = Omit<SelectProps, 'isSearchable'>;
|
|
197
|
+
export type DownshiftSyntheticEvent = React.SyntheticEvent & {
|
|
198
|
+
preventDownshiftDefault?: boolean;
|
|
199
|
+
nativeEvent: {
|
|
200
|
+
preventDownshiftDefault?: boolean;
|
|
201
|
+
};
|
|
202
|
+
};
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Calculate the max height of the list based on items count and allowedMaxVisibleItems.
|
|
3
|
-
* Instead of simply adding 0.5 to the allowedMaxVisibleItems, we process
|
|
4
|
-
* `itemsCount == allowedMaxVisibleItems + 1` differently.
|
|
5
|
-
*
|
|
6
|
-
* For allowedMaxVisibleItems={5}:
|
|
7
|
-
* - If items itemsCount <= 5: restrain by 5.5 items (to avoid scrollbar due to layout shifts)
|
|
8
|
-
* - If items itemsCount = 6: restrain by all 6.1 items (6 + 0.1 for group separators)
|
|
9
|
-
* - If items itemsCount > 6: restrain by 5.5 items
|
|
10
|
-
*
|
|
11
|
-
* Formula: max(5.5, min(itemsCount + 0.1, 6.1) - min(max(0, itemsCount - 6), 0.6))
|
|
12
|
-
*/
|
|
13
|
-
export declare const calculateMaxHeightByItems: (itemsCount: number, allowedMaxVisibleItems: number) => number;
|
|
1
|
+
/**
|
|
2
|
+
* Calculate the max height of the list based on items count and allowedMaxVisibleItems.
|
|
3
|
+
* Instead of simply adding 0.5 to the allowedMaxVisibleItems, we process
|
|
4
|
+
* `itemsCount == allowedMaxVisibleItems + 1` differently.
|
|
5
|
+
*
|
|
6
|
+
* For allowedMaxVisibleItems={5}:
|
|
7
|
+
* - If items itemsCount <= 5: restrain by 5.5 items (to avoid scrollbar due to layout shifts)
|
|
8
|
+
* - If items itemsCount = 6: restrain by all 6.1 items (6 + 0.1 for group separators)
|
|
9
|
+
* - If items itemsCount > 6: restrain by 5.5 items
|
|
10
|
+
*
|
|
11
|
+
* Formula: max(5.5, min(itemsCount + 0.1, 6.1) - min(max(0, itemsCount - 6), 0.6))
|
|
12
|
+
*/
|
|
13
|
+
export declare const calculateMaxHeightByItems: (itemsCount: number, allowedMaxVisibleItems: number) => number;
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Calculate the max height of the list based on items count and allowedMaxVisibleItems.
|
|
3
|
-
* Instead of simply adding 0.5 to the allowedMaxVisibleItems, we process
|
|
4
|
-
* `itemsCount == allowedMaxVisibleItems + 1` differently.
|
|
5
|
-
*
|
|
6
|
-
* For allowedMaxVisibleItems={5}:
|
|
7
|
-
* - If items itemsCount <= 5: restrain by 5.5 items (to avoid scrollbar due to layout shifts)
|
|
8
|
-
* - If items itemsCount = 6: restrain by all 6.1 items (6 + 0.1 for group separators)
|
|
9
|
-
* - If items itemsCount > 6: restrain by 5.5 items
|
|
10
|
-
*
|
|
11
|
-
* Formula: max(5.5, min(itemsCount + 0.1, 6.1) - min(max(0, itemsCount - 6), 0.6))
|
|
1
|
+
/**
|
|
2
|
+
* Calculate the max height of the list based on items count and allowedMaxVisibleItems.
|
|
3
|
+
* Instead of simply adding 0.5 to the allowedMaxVisibleItems, we process
|
|
4
|
+
* `itemsCount == allowedMaxVisibleItems + 1` differently.
|
|
5
|
+
*
|
|
6
|
+
* For allowedMaxVisibleItems={5}:
|
|
7
|
+
* - If items itemsCount <= 5: restrain by 5.5 items (to avoid scrollbar due to layout shifts)
|
|
8
|
+
* - If items itemsCount = 6: restrain by all 6.1 items (6 + 0.1 for group separators)
|
|
9
|
+
* - If items itemsCount > 6: restrain by 5.5 items
|
|
10
|
+
*
|
|
11
|
+
* Formula: max(5.5, min(itemsCount + 0.1, 6.1) - min(max(0, itemsCount - 6), 0.6))
|
|
12
12
|
*/
|
|
13
13
|
const calculateMaxHeightByItems = (itemsCount, allowedMaxVisibleItems) => {
|
|
14
14
|
const allowedFloor = Math.floor(allowedMaxVisibleItems);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import type { NoOptionsMessage } from '../types';
|
|
2
|
-
export declare function getEmptyMessage({ isLoading, isNothingFound, noOptionsMessage }: {
|
|
3
|
-
isLoading: boolean;
|
|
4
|
-
isNothingFound: boolean;
|
|
5
|
-
noOptionsMessage: NoOptionsMessage;
|
|
6
|
-
}): string;
|
|
1
|
+
import type { NoOptionsMessage } from '../types';
|
|
2
|
+
export declare function getEmptyMessage({ isLoading, isNothingFound, noOptionsMessage }: {
|
|
3
|
+
isLoading: boolean;
|
|
4
|
+
isNothingFound: boolean;
|
|
5
|
+
noOptionsMessage: NoOptionsMessage;
|
|
6
|
+
}): string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import type { SelectOption, Key } from '../types';
|
|
2
|
-
export declare function getOptionValue(option?: SelectOption): Key | null;
|
|
1
|
+
import type { SelectOption, Key } from '../types';
|
|
2
|
+
export declare function getOptionValue(option?: SelectOption): Key | null;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { ListBoxItem } from '../types';
|
|
2
|
-
export declare const getRealItemsCnt: (items: ListBoxItem[]) => number;
|
|
1
|
+
import { ListBoxItem } from '../types';
|
|
2
|
+
export declare const getRealItemsCnt: (items: ListBoxItem[]) => number;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export declare const getTextFromNodes: (node: React.ReactNode, depth?: number) => string;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const getTextFromNodes: (node: React.ReactNode, depth?: number) => string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import type { SelectOptionOrGroup, SelectOptionsGroup, NativeSelectOptionOrGroup, NativeSelectOption } from '../types';
|
|
2
|
-
export declare const isOptionAGroup: (optionOrGroup: SelectOptionOrGroup | NativeSelectOptionOrGroup) => optionOrGroup is SelectOptionsGroup | NativeSelectOption;
|
|
1
|
+
import type { SelectOptionOrGroup, SelectOptionsGroup, NativeSelectOptionOrGroup, NativeSelectOption } from '../types';
|
|
2
|
+
export declare const isOptionAGroup: (optionOrGroup: SelectOptionOrGroup | NativeSelectOptionOrGroup) => optionOrGroup is SelectOptionsGroup | NativeSelectOption;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import type { SelectOption } from '../types';
|
|
2
|
-
export declare function itemToString(item: SelectOption): string;
|
|
1
|
+
import type { SelectOption } from '../types';
|
|
2
|
+
export declare function itemToString(item: SelectOption): string;
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import { RefCallback } from 'react';
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Combines multiple sets of props into a single object:
|
|
5
|
-
* - conflicting `className` values are joined with a space
|
|
6
|
-
* - conflicting `style` objects are shallow-merged (rightmost wins on conflict)
|
|
7
|
-
* - conflicting function props (event handlers) are composed and called left to right
|
|
8
|
-
* - conflicting `ref` props (object refs, callback refs, or null) are merged into a single
|
|
9
|
-
* callback ref that assigns all of them; cleanup functions returned by callback refs are
|
|
10
|
-
* collected and called together on detach
|
|
11
|
-
* - any other conflicting prop is resolved by taking the value from the rightmost props object
|
|
12
|
-
* @param props One or more props objects to merge. Props further to the right take precedence.
|
|
13
|
-
*/
|
|
14
|
-
export declare function mergeProps<T extends object[]>(...props: T): {
|
|
15
|
-
[K in keyof UnionToIntersection<T[number]>]: K extends 'className' ? string : K extends 'style' ? UnionToIntersection<T[number]>[K] : K extends 'ref' ? RefCallback<any> : Exclude<Extract<T[number], {
|
|
16
|
-
[Q in K]: unknown;
|
|
17
|
-
}>[K], undefined>;
|
|
18
|
-
};
|
|
19
|
-
export {};
|
|
1
|
+
import { RefCallback } from 'react';
|
|
2
|
+
type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
|
|
3
|
+
/**
|
|
4
|
+
* Combines multiple sets of props into a single object:
|
|
5
|
+
* - conflicting `className` values are joined with a space
|
|
6
|
+
* - conflicting `style` objects are shallow-merged (rightmost wins on conflict)
|
|
7
|
+
* - conflicting function props (event handlers) are composed and called left to right
|
|
8
|
+
* - conflicting `ref` props (object refs, callback refs, or null) are merged into a single
|
|
9
|
+
* callback ref that assigns all of them; cleanup functions returned by callback refs are
|
|
10
|
+
* collected and called together on detach
|
|
11
|
+
* - any other conflicting prop is resolved by taking the value from the rightmost props object
|
|
12
|
+
* @param props One or more props objects to merge. Props further to the right take precedence.
|
|
13
|
+
*/
|
|
14
|
+
export declare function mergeProps<T extends object[]>(...props: T): {
|
|
15
|
+
[K in keyof UnionToIntersection<T[number]>]: K extends 'className' ? string : K extends 'style' ? UnionToIntersection<T[number]>[K] : K extends 'ref' ? RefCallback<any> : Exclude<Extract<T[number], {
|
|
16
|
+
[Q in K]: unknown;
|
|
17
|
+
}>[K], undefined>;
|
|
18
|
+
};
|
|
19
|
+
export {};
|
package/lib/utils/merge-props.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import cn from 'classnames';
|
|
2
|
-
/**
|
|
3
|
-
* Assigns a value to a single ref — handles callback refs, object refs, null, and undefined.
|
|
4
|
-
* Returns the cleanup function if the callback ref returned one.
|
|
2
|
+
/**
|
|
3
|
+
* Assigns a value to a single ref — handles callback refs, object refs, null, and undefined.
|
|
4
|
+
* Returns the cleanup function if the callback ref returned one.
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
7
|
function assignRef(ref, value) {
|
|
@@ -15,10 +15,10 @@ function assignRef(ref, value) {
|
|
|
15
15
|
|
|
16
16
|
ref.current = value;
|
|
17
17
|
}
|
|
18
|
-
/**
|
|
19
|
-
* Merges multiple refs into a single callback ref.
|
|
20
|
-
* All provided refs are assigned in left-to-right order.
|
|
21
|
-
* Cleanup functions returned by callback refs are called on detach.
|
|
18
|
+
/**
|
|
19
|
+
* Merges multiple refs into a single callback ref.
|
|
20
|
+
* All provided refs are assigned in left-to-right order.
|
|
21
|
+
* Cleanup functions returned by callback refs are called on detach.
|
|
22
22
|
*/
|
|
23
23
|
|
|
24
24
|
|
|
@@ -66,16 +66,16 @@ function pushProp(target, key, value) {
|
|
|
66
66
|
target[key] = value;
|
|
67
67
|
}
|
|
68
68
|
}
|
|
69
|
-
/**
|
|
70
|
-
* Combines multiple sets of props into a single object:
|
|
71
|
-
* - conflicting `className` values are joined with a space
|
|
72
|
-
* - conflicting `style` objects are shallow-merged (rightmost wins on conflict)
|
|
73
|
-
* - conflicting function props (event handlers) are composed and called left to right
|
|
74
|
-
* - conflicting `ref` props (object refs, callback refs, or null) are merged into a single
|
|
75
|
-
* callback ref that assigns all of them; cleanup functions returned by callback refs are
|
|
76
|
-
* collected and called together on detach
|
|
77
|
-
* - any other conflicting prop is resolved by taking the value from the rightmost props object
|
|
78
|
-
* @param props One or more props objects to merge. Props further to the right take precedence.
|
|
69
|
+
/**
|
|
70
|
+
* Combines multiple sets of props into a single object:
|
|
71
|
+
* - conflicting `className` values are joined with a space
|
|
72
|
+
* - conflicting `style` objects are shallow-merged (rightmost wins on conflict)
|
|
73
|
+
* - conflicting function props (event handlers) are composed and called left to right
|
|
74
|
+
* - conflicting `ref` props (object refs, callback refs, or null) are merged into a single
|
|
75
|
+
* callback ref that assigns all of them; cleanup functions returned by callback refs are
|
|
76
|
+
* collected and called together on detach
|
|
77
|
+
* - any other conflicting prop is resolved by taking the value from the rightmost props object
|
|
78
|
+
* @param props One or more props objects to merge. Props further to the right take precedence.
|
|
79
79
|
*/
|
|
80
80
|
|
|
81
81
|
|
package/lib/utils/throttle.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function throttle<A extends unknown[], R>(func: (...args: A) => R, wait: number): (...args: A) => R;
|
|
1
|
+
export declare function throttle<A extends unknown[], R>(func: (...args: A) => R, wait: number): (...args: A) => R;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rescui/select",
|
|
3
|
-
"version": "0.17.
|
|
3
|
+
"version": "0.17.2-RUI-296-Build-docs-md-files-for-each-docs-section-2a311c841.14+2a311c841",
|
|
4
4
|
"description": "",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "JetBrains",
|
|
@@ -16,10 +16,10 @@
|
|
|
16
16
|
},
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"@babel/runtime-corejs3": "^7.26.0",
|
|
19
|
-
"@rescui/dropdown": "
|
|
20
|
-
"@rescui/form-field": "
|
|
21
|
-
"@rescui/tag": "
|
|
22
|
-
"@rescui/use-resize-observer": "
|
|
19
|
+
"@rescui/dropdown": "0.10.2-RUI-296-Build-docs-md-files-for-each-docs-section-2a311c841.14+2a311c841",
|
|
20
|
+
"@rescui/form-field": "0.1.4-RUI-296-Build-docs-md-files-for-each-docs-section-2a311c841.18+2a311c841",
|
|
21
|
+
"@rescui/tag": "0.13.10-RUI-296-Build-docs-md-files-for-each-docs-section-2a311c841.14+2a311c841",
|
|
22
|
+
"@rescui/use-resize-observer": "0.3.1-RUI-296-Build-docs-md-files-for-each-docs-section-2a311c841.165+2a311c841",
|
|
23
23
|
"classnames": "^2.2.6",
|
|
24
24
|
"downshift": "^9.3.2",
|
|
25
25
|
"scroll-into-view-if-needed": "3.1.0"
|
|
@@ -30,10 +30,10 @@
|
|
|
30
30
|
"react": ">=16.8.0 <20"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
|
-
"@rescui/colors": "
|
|
34
|
-
"@rescui/scripts": "
|
|
35
|
-
"@rescui/typography": "
|
|
36
|
-
"@rescui/visual-regression": "
|
|
33
|
+
"@rescui/colors": "0.3.1-RUI-296-Build-docs-md-files-for-each-docs-section-2a311c841.53+2a311c841",
|
|
34
|
+
"@rescui/scripts": "0.5.2",
|
|
35
|
+
"@rescui/typography": "0.27.1-RUI-296-Build-docs-md-files-for-each-docs-section-2a311c841.18+2a311c841",
|
|
36
|
+
"@rescui/visual-regression": "0.1.4",
|
|
37
37
|
"sniffr": "^1.2.0"
|
|
38
38
|
},
|
|
39
39
|
"scripts": {
|
|
@@ -41,5 +41,5 @@
|
|
|
41
41
|
"build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
|
|
42
42
|
},
|
|
43
43
|
"nx": {},
|
|
44
|
-
"gitHead": "
|
|
44
|
+
"gitHead": "2a311c841551a48c46895aff5609fe099bbe1a61"
|
|
45
45
|
}
|