@rescui/select 0.14.4-RUI-286-Fix-tooltip-stacking-f4145b01.1 → 0.15.1-RUI-280-Update-select-component-026338d06.52
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/lib/_virtual/index.css.js +12 -12
- package/lib/common-prop-types.d.ts +9 -14
- package/lib/common-prop-types.js +4 -3
- package/lib/constants.d.ts +7 -0
- package/lib/constants.js +8 -0
- package/lib/hooks/use-css-context-transfer.d.ts +14 -0
- package/lib/hooks/use-css-context-transfer.js +40 -0
- package/lib/hooks/use-label-focus.d.ts +11 -0
- package/lib/hooks/use-label-focus.js +28 -0
- package/lib/hooks/use-multi-option-serialization.d.ts +10 -0
- package/lib/hooks/use-multi-option-serialization.js +82 -0
- package/lib/hooks/use-option-serialization.d.ts +10 -0
- package/lib/hooks/use-option-serialization.js +59 -0
- package/lib/index.css +1700 -705
- package/lib/index.d.ts +4 -6
- package/lib/index.js +3 -3
- package/lib/multiselect.d.ts +29 -0
- package/lib/multiselect.js +239 -0
- package/lib/native-select.d.ts +4 -0
- package/lib/native-select.js +182 -0
- package/lib/parts/foldable.js +5 -7
- package/lib/parts/form-trigger-wrapper.d.ts +21 -3
- package/lib/parts/form-trigger-wrapper.js +30 -40
- package/lib/parts/icons.d.ts +17 -0
- package/lib/parts/icons.js +75 -0
- package/lib/parts/list-box.d.ts +19 -0
- package/lib/parts/list-box.js +146 -0
- package/lib/parts/multi-trigger.d.ts +11 -0
- package/lib/parts/multi-trigger.js +62 -0
- package/lib/parts/native-select-options-with-groups.d.ts +8 -0
- package/lib/parts/native-select-options-with-groups.js +76 -0
- package/lib/parts/native-select-trigger.d.ts +18 -0
- package/lib/parts/native-select-trigger.js +54 -0
- package/lib/parts/popover.d.ts +12 -0
- package/lib/parts/popover.js +62 -0
- package/lib/parts/popup-content.d.ts +19 -0
- package/lib/parts/popup-content.js +76 -0
- package/lib/public-api.p.css +401 -1022
- package/lib/public-api.pcss +401 -1022
- package/lib/select-basic.d.ts +3 -0
- package/lib/select-basic.js +143 -0
- package/lib/select-searchable.d.ts +3 -0
- package/lib/select-searchable.js +168 -0
- package/lib/select.d.ts +27 -86
- package/lib/select.js +58 -352
- package/lib/styles/common.p.module.css.js +27 -0
- package/lib/styles/form-trigger.p.module.css.js +15 -0
- package/lib/styles/list-box.p.module.css.js +16 -0
- package/lib/styles/native-select-trigger.p.module.css.js +17 -0
- package/lib/styles/native-select.p.module.css.js +9 -0
- package/lib/styles/popover.p.module.css.js +10 -0
- package/lib/types.d.ts +167 -4
- package/lib/utils/calculate-max-height-by-items.d.ts +13 -0
- package/lib/utils/calculate-max-height-by-items.js +22 -0
- package/lib/utils/convert-options.d.ts +3 -0
- package/lib/utils/convert-options.js +52 -0
- package/lib/utils/convert-placement.d.ts +3 -0
- package/lib/utils/convert-placement.js +22 -0
- package/lib/utils/css-vars-utils.d.ts +3 -0
- package/lib/utils/css-vars-utils.js +20 -0
- package/lib/utils/get-empty-message.d.ts +6 -0
- package/lib/utils/get-empty-message.js +32 -0
- package/lib/utils/get-option-value.d.ts +2 -0
- package/lib/utils/get-option-value.js +11 -0
- package/lib/utils/get-real-items-cnt.d.ts +2 -0
- package/lib/utils/get-real-items-cnt.js +21 -0
- package/lib/utils/get-text-from-nodes.d.ts +2 -0
- package/lib/utils/get-text-from-nodes.js +28 -0
- package/lib/utils/is-option-a-group.d.ts +2 -0
- package/lib/utils/is-option-a-group.js +5 -0
- package/lib/utils/throttle.d.ts +1 -0
- package/package.json +12 -8
- package/lib/_virtual/warning.js +0 -106
- package/lib/key-codes.d.ts +0 -7
- package/lib/key-codes.js +0 -8
- package/lib/parts/common-select.p.module.css.js +0 -15
- package/lib/parts/form-trigger.p.module.css.js +0 -13
- package/lib/parts/multiselect.d.ts +0 -81
- package/lib/parts/multiselect.js +0 -441
- package/lib/parts/native-select.d.ts +0 -30
- package/lib/parts/native-select.js +0 -244
- package/lib/parts/native-select.p.module.css.js +0 -9
- package/lib/parts/throttle.d.ts +0 -1
- package/lib/parts/trigger.d.ts +0 -37
- package/lib/parts/trigger.js +0 -255
- package/lib/parts/trigger.p.module.css.js +0 -31
- package/lib/utils.d.ts +0 -22
- package/lib/utils.js +0 -201
- /package/lib/{parts → hooks}/use-observable-force-rerender.d.ts +0 -0
- /package/lib/{parts → hooks}/use-observable-force-rerender.js +0 -0
- /package/lib/{parts → utils}/throttle.js +0 -0
package/lib/utils.js
DELETED
|
@@ -1,201 +0,0 @@
|
|
|
1
|
-
import React, { useRef } from 'react';
|
|
2
|
-
import { ARROW_DOWN, ARROW_UP, SPACE, ENTER } from './key-codes.js';
|
|
3
|
-
const DEFAULT_NO_OPTIONS_MESSAGES = {
|
|
4
|
-
noOptions: 'No options',
|
|
5
|
-
nothingFound: 'Nothing found',
|
|
6
|
-
loading: 'Loading...'
|
|
7
|
-
};
|
|
8
|
-
const MAX_VISIBLE_ITEMS = 5;
|
|
9
|
-
const ITEM_HEIGHT_BY_SIZE = {
|
|
10
|
-
s: 32,
|
|
11
|
-
m: 40,
|
|
12
|
-
l: 52
|
|
13
|
-
};
|
|
14
|
-
|
|
15
|
-
const getTextFromNodes = function (node) {
|
|
16
|
-
var _node$type;
|
|
17
|
-
|
|
18
|
-
let depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
19
|
-
|
|
20
|
-
if (typeof node === 'string' || typeof node === 'number') {
|
|
21
|
-
return node.toString();
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
if (depth > 15) {
|
|
25
|
-
console.warn('Max depth reached while getting text from nodes');
|
|
26
|
-
return '';
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
if (Array.isArray(node)) {
|
|
30
|
-
return node.map(n => getTextFromNodes(n, depth + 1)).join('');
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
if ( /*#__PURE__*/React.isValidElement(node) && (node === null || node === void 0 || (_node$type = node.type) === null || _node$type === void 0 || (_node$type = _node$type.toString()) === null || _node$type === void 0 ? void 0 : _node$type.toLowerCase()) !== 'svg') {
|
|
34
|
-
return getTextFromNodes(node.props.children, depth + 1);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
return '';
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
const isOptionsGroup = optionOrGroup => typeof optionOrGroup.options !== 'undefined';
|
|
41
|
-
|
|
42
|
-
function shouldOpenSelect(key) {
|
|
43
|
-
let isTriggerTarget = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
|
44
|
-
return key === ARROW_DOWN || key === ARROW_UP || (key === SPACE || key === ENTER) && isTriggerTarget;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
function isString(s) {
|
|
48
|
-
return Object.prototype.toString.call(s) === '[object String]';
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
function getEmptyMessage(isLoading, isNothingFound, noOptionsMessage) {
|
|
52
|
-
const {
|
|
53
|
-
noOptions,
|
|
54
|
-
nothingFound,
|
|
55
|
-
loading
|
|
56
|
-
} = isString(noOptionsMessage) ? { ...DEFAULT_NO_OPTIONS_MESSAGES,
|
|
57
|
-
noOptions: noOptionsMessage
|
|
58
|
-
} : { ...DEFAULT_NO_OPTIONS_MESSAGES,
|
|
59
|
-
...noOptionsMessage
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
if (isLoading) {
|
|
63
|
-
return loading;
|
|
64
|
-
} else if (isNothingFound) {
|
|
65
|
-
return nothingFound;
|
|
66
|
-
} else {
|
|
67
|
-
return noOptions;
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
function escapeRegex(str) {
|
|
72
|
-
return str.replace(/[\-\[\]\/{}()\*+?.\\^$|]/g, '\\$&');
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
function convertToOptionGroupsIfNeeded() {
|
|
76
|
-
let optionsOrGroups = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
77
|
-
const newOptions = [];
|
|
78
|
-
let topLevelOptions = [];
|
|
79
|
-
optionsOrGroups.forEach(optionOrGroup => {
|
|
80
|
-
if (isOptionsGroup(optionOrGroup)) {
|
|
81
|
-
if (topLevelOptions.length) {
|
|
82
|
-
newOptions.push({
|
|
83
|
-
options: topLevelOptions
|
|
84
|
-
});
|
|
85
|
-
topLevelOptions = [];
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
newOptions.push(optionOrGroup);
|
|
89
|
-
} else {
|
|
90
|
-
topLevelOptions.push(optionOrGroup);
|
|
91
|
-
}
|
|
92
|
-
});
|
|
93
|
-
|
|
94
|
-
if (topLevelOptions.length) {
|
|
95
|
-
newOptions.push({
|
|
96
|
-
options: topLevelOptions
|
|
97
|
-
});
|
|
98
|
-
topLevelOptions = [];
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
return newOptions;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
const calculateMaxHeight = size => {
|
|
105
|
-
const itemHeight = ITEM_HEIGHT_BY_SIZE[size]; // half of item added to show that there is more items even if scroll bar hidden
|
|
106
|
-
|
|
107
|
-
return (Math.ceil(MAX_VISIBLE_ITEMS) + 0.5) * itemHeight;
|
|
108
|
-
};
|
|
109
|
-
|
|
110
|
-
function getOptionValue(option) {
|
|
111
|
-
return typeof option.value === 'string' ? option.value : getTextFromNodes(option.label);
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
const OptionGroupTypes = {
|
|
115
|
-
HEADER: 'header',
|
|
116
|
-
OPTION: 'option',
|
|
117
|
-
DIVIDER: 'divider'
|
|
118
|
-
};
|
|
119
|
-
|
|
120
|
-
const getDefaultCursorIndex = groups => {
|
|
121
|
-
if (groups.length === 0) {
|
|
122
|
-
return null;
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
const firstNonEmptyGroupIndex = groups.findIndex(group => group.options && group.options.length > 0);
|
|
126
|
-
|
|
127
|
-
if (firstNonEmptyGroupIndex === -1) {
|
|
128
|
-
return null;
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
return [firstNonEmptyGroupIndex, 0];
|
|
132
|
-
};
|
|
133
|
-
|
|
134
|
-
function optionsNotEmpty(options) {
|
|
135
|
-
return options && options.length > 0;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
const getPlainOptionsFromGroups = groups => groups.reduce( // eslint-disable-next-line no-shadow
|
|
139
|
-
(acc, group, i) => acc.concat([optionsNotEmpty(group.options) && i !== 0 && !group.label && {
|
|
140
|
-
type: OptionGroupTypes.DIVIDER
|
|
141
|
-
}, optionsNotEmpty(group.options) && group.label && {
|
|
142
|
-
type: OptionGroupTypes.HEADER,
|
|
143
|
-
label: group.label
|
|
144
|
-
}, ...group.options.map((option, j) => ({ ...option,
|
|
145
|
-
index: [i, j],
|
|
146
|
-
type: OptionGroupTypes.OPTION
|
|
147
|
-
}))].filter(e => e)), []);
|
|
148
|
-
|
|
149
|
-
function isGroupsEmpty(groups) {
|
|
150
|
-
return groups.length === 0 || groups.every(g => !g.options || g.options.length === 0);
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
function useStrongMemo(callback, deps) {
|
|
154
|
-
const prevDeps = useRef([]);
|
|
155
|
-
const memoResult = useRef(null);
|
|
156
|
-
|
|
157
|
-
if (deps.length !== prevDeps.current.length || !prevDeps.current.every((dep, i) => dep === deps[i])) {
|
|
158
|
-
prevDeps.current = [...deps];
|
|
159
|
-
memoResult.current = callback();
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
return memoResult.current;
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
function nextIndex(index, isDownDirection) {
|
|
166
|
-
return isDownDirection ? index + 1 : index - 1;
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
function isIndexOutOfRange(index, len) {
|
|
170
|
-
return index < 0 || index >= len;
|
|
171
|
-
} // eslint-disable-next-line complexity
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
function getMovedCursorIndex(groups, currentCursorIndex, isDownDirection) {
|
|
175
|
-
if (isGroupsEmpty(groups)) return currentCursorIndex;
|
|
176
|
-
const [grpIndex, optIndex] = currentCursorIndex;
|
|
177
|
-
const optLenByGroup = groups.map(g => g.options ? g.options.length : 0);
|
|
178
|
-
let newGrpIndex = grpIndex;
|
|
179
|
-
let newOptIndex = nextIndex(optIndex, isDownDirection);
|
|
180
|
-
|
|
181
|
-
while (isIndexOutOfRange(newOptIndex, optLenByGroup[newGrpIndex]) || isIndexOutOfRange(newGrpIndex, groups.length)) {
|
|
182
|
-
newGrpIndex = nextIndex(newGrpIndex, isDownDirection);
|
|
183
|
-
|
|
184
|
-
if (isIndexOutOfRange(newGrpIndex, groups.length)) {
|
|
185
|
-
newGrpIndex = isDownDirection ? 0 : groups.length - 1;
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
newOptIndex = isDownDirection ? 0 : optLenByGroup[newGrpIndex] - 1;
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
return [newGrpIndex, newOptIndex];
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
const isIndexMatchCursor = (cursorIndex, index) => {
|
|
195
|
-
if (cursorIndex === null) return false;
|
|
196
|
-
return index[0] === cursorIndex[0] && index[1] === cursorIndex[1];
|
|
197
|
-
};
|
|
198
|
-
|
|
199
|
-
const withoutGroupsLabel = groups => groups.every(g => !g.label);
|
|
200
|
-
|
|
201
|
-
export { OptionGroupTypes, calculateMaxHeight, convertToOptionGroupsIfNeeded, escapeRegex, getDefaultCursorIndex, getEmptyMessage, getMovedCursorIndex, getOptionValue, getPlainOptionsFromGroups, getTextFromNodes, isGroupsEmpty, isIndexMatchCursor, shouldOpenSelect, useStrongMemo, withoutGroupsLabel };
|
|
File without changes
|
|
File without changes
|
|
File without changes
|