@ringcentral/spring-base 1.7.0 → 1.9.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/chunks/twMerge.js +0 -133
- package/config.js +0 -24
- package/contexts.js +0 -1
- package/hooks.js +61 -642
- package/index.js +3 -2
- package/package.json +1 -1
- package/src/config.d.ts +1 -26
- package/src/contexts/ResponsiveContext/breakpointList.d.ts +0 -1
- package/src/contexts/ResponsiveContext/types.d.ts +0 -11
- package/src/hooks/index.d.ts +2 -0
- package/src/hooks/useA11yKeyEvent/useA11yKeyEvent.d.ts +0 -17
- package/src/hooks/useActive/useActive.d.ts +4 -10
- package/src/hooks/useAnnouncer/useAnnouncer.d.ts +0 -10
- package/src/hooks/useAriaHideOutside/useAriaHideOutside.d.ts +0 -4
- package/src/hooks/useAudio/useAudio.d.ts +0 -20
- package/src/hooks/useBodyScrollLock/useBodyScrollLock.d.ts +0 -19
- package/src/hooks/useButton/index.d.ts +1 -0
- package/src/hooks/useButton/useButton.d.ts +2 -0
- package/src/hooks/useChange/useChange.d.ts +0 -10
- package/src/hooks/useClickAway/useClickAway.d.ts +0 -10
- package/src/hooks/useDebounce/useDebounce.d.ts +0 -6
- package/src/hooks/useEventListener/useEventListener.d.ts +0 -20
- package/src/hooks/useEver/useEver.d.ts +0 -12
- package/src/hooks/useFocusVisible/useFocusVisible.d.ts +0 -6
- package/src/hooks/useFontLoaded/useFontLoaded.d.ts +0 -12
- package/src/hooks/useForceUpdate/useForceUpdate.d.ts +0 -4
- package/src/hooks/useForkRef/useForkRef.d.ts +0 -17
- package/src/hooks/useGlobalListener/createGlobalListener.d.ts +0 -37
- package/src/hooks/useGlobalListener/useGlobalListener.d.ts +0 -5
- package/src/hooks/useHiddenTabindex/useHiddenTabindex.d.ts +0 -4
- package/src/hooks/useHover/useHover.d.ts +0 -3
- package/src/hooks/useId/useId.d.ts +0 -14
- package/src/hooks/useImgLoaded/useImgLoaded.d.ts +0 -14
- package/src/hooks/useInterval/useInterval.d.ts +0 -37
- package/src/hooks/useKeyDownOnce/useKeyDownOnce.d.ts +0 -6
- package/src/hooks/useKeyboardMoveFocus/moveIndexInTwoDimension.d.ts +0 -11
- package/src/hooks/useKeyboardMoveFocus/useKeyboardMoveFocus.d.ts +0 -33
- package/src/hooks/useKeyboardMoveFocus/useOnlyOneFocusable.d.ts +0 -6
- package/src/hooks/useLongPress/useLongPress.d.ts +0 -16
- package/src/hooks/useMountState/useMountState.d.ts +0 -14
- package/src/hooks/useOnLayoutReRender/useOnLayoutReRender.d.ts +0 -3
- package/src/hooks/useOnReRender/useOnReRender.d.ts +0 -3
- package/src/hooks/useOverflow/useOverflow.d.ts +0 -3
- package/src/hooks/usePrevious/usePrevious.d.ts +0 -6
- package/src/hooks/useRefState/useRefState.d.ts +0 -19
- package/src/hooks/useResizeObserver/useResizeObserver.d.ts +0 -15
- package/src/hooks/useResponsiveMatch/useResponsiveMatch.d.ts +0 -4
- package/src/hooks/useResultRef/useResultRef.d.ts +0 -8
- package/src/hooks/useRetry/useRetry.d.ts +2 -25
- package/src/hooks/useSleep/useSleep.d.ts +0 -17
- package/src/hooks/useTabOut/useTabOut.d.ts +0 -3
- package/src/hooks/useTestRunnerDetection.d.ts +0 -6
- package/src/hooks/useThrottle/useThrottle.d.ts +0 -6
- package/src/hooks/useTouchMouseEvent/useTouchMouseEvent.d.ts +2 -41
- package/src/hooks/useVirtuosoExternalWindow/index.d.ts +1 -0
- package/src/hooks/useVirtuosoExternalWindow/useVirtuosoExternalWindow.d.ts +5 -0
- package/src/typings/BaseColor.d.ts +0 -1
- package/src/typings/ComponentTypes.d.ts +4 -30
- package/src/typings/OverridableTypes.d.ts +0 -29
- package/src/typings/UnitMap.d.ts +0 -15
- package/src/utils/ariaHideOutside.d.ts +0 -8
- package/src/utils/checkDefaultPrevented.d.ts +0 -1
- package/src/utils/classes/useClasses.d.ts +0 -29
- package/src/utils/combineProps.d.ts +0 -88
- package/src/utils/getRefElement.d.ts +0 -3
- package/src/utils/isWebKit154.d.ts +0 -8
- package/src/utils/omit.d.ts +0 -1
- package/src/utils/outerSize.d.ts +0 -4
- package/src/utils/pick.d.ts +0 -1
- package/src/utils/preloadImg.d.ts +0 -1
- package/src/utils/removeClassName.d.ts +0 -28
- package/src/utils/runKeyHandler.d.ts +0 -8
- package/src/utils/selectionHandler.d.ts +0 -8
- package/src/utils/twMerge.d.ts +0 -3
- package/utils.js +0 -99
package/chunks/twMerge.js
CHANGED
|
@@ -6,27 +6,19 @@ import { extendTailwindMerge } from 'tailwind-merge';
|
|
|
6
6
|
|
|
7
7
|
const ownerWindow = unstable_ownerWindow;
|
|
8
8
|
|
|
9
|
-
// Copy from https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/ariaHideOutside.ts
|
|
10
|
-
// And support multiple window
|
|
11
9
|
const ARIA_HIDDEN = 'aria-hidden';
|
|
12
10
|
const REF_COUNT_MAP = '__SUI_ARIA_HIDE_OUTSIDE_REF_COUNT_MAP__';
|
|
13
11
|
const getRefCountMap = (window) => {
|
|
14
|
-
// @ts-ignore
|
|
15
12
|
if (!window[REF_COUNT_MAP]) {
|
|
16
|
-
// @ts-ignore
|
|
17
13
|
window[REF_COUNT_MAP] = new WeakMap();
|
|
18
14
|
}
|
|
19
|
-
// @ts-ignore
|
|
20
15
|
return window[REF_COUNT_MAP];
|
|
21
16
|
};
|
|
22
17
|
const OBSERVER_STACK = '__SUI_ARIA_HIDE_OUTSIDE_OBSERVER_STACK__';
|
|
23
18
|
const getObserverStack = (window) => {
|
|
24
|
-
// @ts-ignore
|
|
25
19
|
if (!window[OBSERVER_STACK]) {
|
|
26
|
-
// @ts-ignore
|
|
27
20
|
window[OBSERVER_STACK] = [];
|
|
28
21
|
}
|
|
29
|
-
// @ts-ignore
|
|
30
22
|
return window[OBSERVER_STACK];
|
|
31
23
|
};
|
|
32
24
|
const isHTMLOrSVGElement = (node) => {
|
|
@@ -35,45 +27,27 @@ const isHTMLOrSVGElement = (node) => {
|
|
|
35
27
|
const isElement = (node) => {
|
|
36
28
|
return node.nodeType === Node.ELEMENT_NODE;
|
|
37
29
|
};
|
|
38
|
-
/**
|
|
39
|
-
* Hides all elements in the DOM outside the given targets from screen readers using aria-hidden,
|
|
40
|
-
* and returns a function to revert these changes. In addition, changes to the DOM are watched
|
|
41
|
-
* and new elements outside the targets are automatically hidden.
|
|
42
|
-
* @param targets - The elements that should remain visible.
|
|
43
|
-
* @param root - Nothing will be hidden above this element.
|
|
44
|
-
* @returns - A function to restore all hidden elements.
|
|
45
|
-
*/
|
|
46
30
|
const ariaHideOutside = (targets, root = document.body) => {
|
|
47
31
|
const currentWindow = ownerWindow(root);
|
|
48
32
|
if (!currentWindow) {
|
|
49
|
-
// Current JS environment doesn't have a window object, do nothing.
|
|
50
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
51
33
|
return () => { };
|
|
52
34
|
}
|
|
53
35
|
const visibleNodes = new Set(targets);
|
|
54
36
|
const hiddenNodes = new Set();
|
|
55
|
-
// Keeps a ref count of all hidden elements. Added to when hiding an element, and
|
|
56
|
-
// subtracted from when showing it again. When it reaches zero, aria-hidden is removed.
|
|
57
37
|
const refCountMap = getRefCountMap(currentWindow);
|
|
58
38
|
const observerStack = getObserverStack(currentWindow);
|
|
59
39
|
const walker = currentWindow.document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
|
|
60
40
|
acceptNode(node) {
|
|
61
|
-
// If this node is a live announcer, add it to the set of nodes to keep visible.
|
|
62
41
|
if (isHTMLOrSVGElement(node) &&
|
|
63
42
|
node.dataset['liveAnnouncer'] === 'true') {
|
|
64
43
|
visibleNodes.add(node);
|
|
65
44
|
}
|
|
66
|
-
// Skip this node and its children if it is one of the target nodes, or a live announcer.
|
|
67
|
-
// Also skip children of already hidden nodes, as aria-hidden is recursive. An exception is
|
|
68
|
-
// made for elements with role="row" since VoiceOver on iOS has issues hiding elements with role="row".
|
|
69
|
-
// For that case we want to hide the cells inside as well (https://bugs.webkit.org/show_bug.cgi?id=222623).
|
|
70
45
|
if (visibleNodes.has(node) ||
|
|
71
46
|
(node.parentElement &&
|
|
72
47
|
hiddenNodes.has(node.parentElement) &&
|
|
73
48
|
node.parentElement.getAttribute('role') !== 'row')) {
|
|
74
49
|
return NodeFilter.FILTER_REJECT;
|
|
75
50
|
}
|
|
76
|
-
// Skip this node but continue to children if one of the targets is inside the node.
|
|
77
51
|
if (targets.some((target) => node.contains(target))) {
|
|
78
52
|
return NodeFilter.FILTER_SKIP;
|
|
79
53
|
}
|
|
@@ -82,8 +56,6 @@ const ariaHideOutside = (targets, root = document.body) => {
|
|
|
82
56
|
});
|
|
83
57
|
const hide = (node) => {
|
|
84
58
|
const refCount = refCountMap.get(node) ?? 0;
|
|
85
|
-
// If already aria-hidden, and the ref count is zero, then this element
|
|
86
|
-
// was already hidden and there's nothing for us to do.
|
|
87
59
|
if (node.getAttribute(ARIA_HIDDEN) === 'true' && refCount === 0) {
|
|
88
60
|
return;
|
|
89
61
|
}
|
|
@@ -93,8 +65,6 @@ const ariaHideOutside = (targets, root = document.body) => {
|
|
|
93
65
|
hiddenNodes.add(node);
|
|
94
66
|
refCountMap.set(node, refCount + 1);
|
|
95
67
|
};
|
|
96
|
-
// If there is already a MutationObserver listening from a previous call,
|
|
97
|
-
// disconnect it so the new on takes over.
|
|
98
68
|
if (observerStack.length) {
|
|
99
69
|
observerStack[observerStack.length - 1].disconnect();
|
|
100
70
|
}
|
|
@@ -108,8 +78,6 @@ const ariaHideOutside = (targets, root = document.body) => {
|
|
|
108
78
|
if (change.type !== 'childList' || change.addedNodes.length === 0) {
|
|
109
79
|
continue;
|
|
110
80
|
}
|
|
111
|
-
// If the parent element of the added nodes is not within one of the targets,
|
|
112
|
-
// and not already inside a hidden node, hide all of the new children.
|
|
113
81
|
if (![...visibleNodes, ...hiddenNodes].some((node) => node.contains(change.target))) {
|
|
114
82
|
for (const node of change.addedNodes) {
|
|
115
83
|
if (isHTMLOrSVGElement(node) &&
|
|
@@ -145,7 +113,6 @@ const ariaHideOutside = (targets, root = document.body) => {
|
|
|
145
113
|
refCountMap.set(node, count - 1);
|
|
146
114
|
}
|
|
147
115
|
}
|
|
148
|
-
// Remove this observer from the stack, and start the previous one.
|
|
149
116
|
if (observerWrapper === observerStack[observerStack.length - 1]) {
|
|
150
117
|
observerStack.pop();
|
|
151
118
|
if (observerStack.length) {
|
|
@@ -158,99 +125,11 @@ const ariaHideOutside = (targets, root = document.body) => {
|
|
|
158
125
|
};
|
|
159
126
|
};
|
|
160
127
|
|
|
161
|
-
/**
|
|
162
|
-
* Combine props object together
|
|
163
|
-
*
|
|
164
|
-
* that will group className, classes together
|
|
165
|
-
* function will auto combine together,
|
|
166
|
-
* trigger order is `intoProps.someFn(e) => defaultProps.someFn(e)`
|
|
167
|
-
*
|
|
168
|
-
* @param baseProps base props you want to combine together
|
|
169
|
-
* @param newProps want to combine in to props
|
|
170
|
-
* @param coverPropKeys some prop key you want to cover, not combine when type is function, ex. `ComponentType`
|
|
171
|
-
*
|
|
172
|
-
*
|
|
173
|
-
* @example
|
|
174
|
-
* ```tsx
|
|
175
|
-
* combineProps(
|
|
176
|
-
{
|
|
177
|
-
children: <A />,
|
|
178
|
-
value: '1',
|
|
179
|
-
className: 'a1',
|
|
180
|
-
classes: {
|
|
181
|
-
root: 'root1'
|
|
182
|
-
},
|
|
183
|
-
count: 1,
|
|
184
|
-
size: 'large',
|
|
185
|
-
onClick: fn1
|
|
186
|
-
},
|
|
187
|
-
{
|
|
188
|
-
children: <B />,
|
|
189
|
-
value: '2',
|
|
190
|
-
className: 'a2',
|
|
191
|
-
classes: {
|
|
192
|
-
root: 'root2'
|
|
193
|
-
},
|
|
194
|
-
count: 2,
|
|
195
|
-
size: undefined,
|
|
196
|
-
onClick: fn2
|
|
197
|
-
},
|
|
198
|
-
)
|
|
199
|
-
// output result:
|
|
200
|
-
{
|
|
201
|
-
children: <B />,
|
|
202
|
-
value: '2',
|
|
203
|
-
className: 'a1 a2',
|
|
204
|
-
classes: {
|
|
205
|
-
root: 'root1 root2'
|
|
206
|
-
},
|
|
207
|
-
count: 2,
|
|
208
|
-
size: 'large',
|
|
209
|
-
onClick: (e) => {
|
|
210
|
-
fn2(e);
|
|
211
|
-
fn1(e);
|
|
212
|
-
}
|
|
213
|
-
}
|
|
214
|
-
* ```
|
|
215
|
-
*/
|
|
216
128
|
const combineProps = (baseProps, newProps, coverPropKeys) => innerCombineProps({
|
|
217
129
|
baseProps,
|
|
218
130
|
newProps,
|
|
219
131
|
coverPropKeys,
|
|
220
132
|
});
|
|
221
|
-
/**
|
|
222
|
-
* Combine two classes
|
|
223
|
-
*
|
|
224
|
-
* @param baseClasses base classes you want to combine together
|
|
225
|
-
* @param newClasses new classes want to combine in to props
|
|
226
|
-
*
|
|
227
|
-
* @example
|
|
228
|
-
* ```ts
|
|
229
|
-
* combineClasses(
|
|
230
|
-
{
|
|
231
|
-
root: 'a1',
|
|
232
|
-
input: 'a1',
|
|
233
|
-
un1: undefined,
|
|
234
|
-
un2: 'a4',
|
|
235
|
-
},
|
|
236
|
-
{
|
|
237
|
-
root: 'a1',
|
|
238
|
-
input: 'a2',
|
|
239
|
-
un1: 'a3',
|
|
240
|
-
un2: undefined,
|
|
241
|
-
un3: 'a5',
|
|
242
|
-
},
|
|
243
|
-
)
|
|
244
|
-
// output result:
|
|
245
|
-
{
|
|
246
|
-
root: 'a1 a1',
|
|
247
|
-
input: 'a1 a2',
|
|
248
|
-
un1: 'a3',
|
|
249
|
-
un2: 'a4',
|
|
250
|
-
un3: 'a5',
|
|
251
|
-
}
|
|
252
|
-
* ```
|
|
253
|
-
*/
|
|
254
133
|
const combineClasses = (baseClasses, newClasses) => innerCombineProps({
|
|
255
134
|
baseProps: baseClasses,
|
|
256
135
|
newProps: newClasses,
|
|
@@ -272,8 +151,6 @@ function mergeChildProps({ baseProps, newProps, combineAllString, coverPropKeys,
|
|
|
272
151
|
const prop = baseProps[curr];
|
|
273
152
|
const propTo = newProps[curr];
|
|
274
153
|
if (propTo !== undefined) {
|
|
275
|
-
// * all typeof type below
|
|
276
|
-
// "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function"
|
|
277
154
|
switch (typeof prop) {
|
|
278
155
|
case 'undefined':
|
|
279
156
|
output[curr] = propTo;
|
|
@@ -316,7 +193,6 @@ function mergeChildProps({ baseProps, newProps, combineAllString, coverPropKeys,
|
|
|
316
193
|
}
|
|
317
194
|
else {
|
|
318
195
|
output[curr] = (...args) => {
|
|
319
|
-
// * exec outside first
|
|
320
196
|
propTo?.(...args);
|
|
321
197
|
prop?.(...args);
|
|
322
198
|
};
|
|
@@ -329,7 +205,6 @@ function mergeChildProps({ baseProps, newProps, combineAllString, coverPropKeys,
|
|
|
329
205
|
}
|
|
330
206
|
return output;
|
|
331
207
|
}, {});
|
|
332
|
-
// if result is an empty {} reset that to undefined
|
|
333
208
|
if (Object.keys(result).length === 0) {
|
|
334
209
|
return undefined;
|
|
335
210
|
}
|
|
@@ -339,7 +214,6 @@ function mergeChildProps({ baseProps, newProps, combineAllString, coverPropKeys,
|
|
|
339
214
|
};
|
|
340
215
|
}
|
|
341
216
|
|
|
342
|
-
/* eslint-disable no-console */
|
|
343
217
|
function logInDev({ scope, message, level = 'warn', condition = true, }) {
|
|
344
218
|
if (process.env.NODE_ENV !== 'production' &&
|
|
345
219
|
condition &&
|
|
@@ -356,9 +230,6 @@ const isRef = (obj) => {
|
|
|
356
230
|
return obj && 'current' in obj;
|
|
357
231
|
};
|
|
358
232
|
|
|
359
|
-
/**
|
|
360
|
-
* get element from React ref or callback
|
|
361
|
-
*/
|
|
362
233
|
const getRefElement = (ref) => {
|
|
363
234
|
if (typeof ref === 'function') {
|
|
364
235
|
return ref();
|
|
@@ -366,13 +237,9 @@ const getRefElement = (ref) => {
|
|
|
366
237
|
if (typeof ref === 'object' && isRef(ref)) {
|
|
367
238
|
return ref.current;
|
|
368
239
|
}
|
|
369
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
370
240
|
return ref;
|
|
371
241
|
};
|
|
372
242
|
|
|
373
|
-
/**
|
|
374
|
-
* Merge tailwind classes with additional class groups for spring-ui
|
|
375
|
-
*/
|
|
376
243
|
const twMerge = extendTailwindMerge({
|
|
377
244
|
extend: {
|
|
378
245
|
classGroups: {
|
package/config.js
CHANGED
|
@@ -1,20 +1,4 @@
|
|
|
1
|
-
// TODO: refactor config
|
|
2
|
-
/* eslint-disable no-console */
|
|
3
1
|
const SPRING_WARNING_IGNORE_KEY = '__SPRING_WARNING_IGNORE__';
|
|
4
|
-
// * use that way to avoid that code be exist in production code base
|
|
5
|
-
/**
|
|
6
|
-
* config global setting
|
|
7
|
-
*
|
|
8
|
-
* ```ts
|
|
9
|
-
* configure({
|
|
10
|
-
* warning: false
|
|
11
|
-
* })
|
|
12
|
-
* ```
|
|
13
|
-
* ## WARNING related method and only work in `development mode`
|
|
14
|
-
*
|
|
15
|
-
* `WARNING_IGNORE`: only work in `development mode`
|
|
16
|
-
* `WARNING_FUNCTION` only work in `development mode`
|
|
17
|
-
*/
|
|
18
2
|
let rcConfiguration = {};
|
|
19
3
|
if (process.env.NODE_ENV !== 'production') {
|
|
20
4
|
class RcConfig {
|
|
@@ -24,11 +8,8 @@ if (process.env.NODE_ENV !== 'production') {
|
|
|
24
8
|
};
|
|
25
9
|
constructor() {
|
|
26
10
|
if (typeof window !== 'undefined') {
|
|
27
|
-
// SSR support
|
|
28
|
-
// * get value once when init
|
|
29
11
|
this._WARNING_IGNORE =
|
|
30
12
|
window?.localStorage?.getItem(SPRING_WARNING_IGNORE_KEY) === 'true';
|
|
31
|
-
// * also provide user to set variable from window
|
|
32
13
|
window.__SPRING__ = this;
|
|
33
14
|
}
|
|
34
15
|
}
|
|
@@ -58,11 +39,6 @@ if (process.env.NODE_ENV !== 'production') {
|
|
|
58
39
|
}
|
|
59
40
|
rcConfiguration = new RcConfig();
|
|
60
41
|
}
|
|
61
|
-
/**
|
|
62
|
-
* set config with Spring
|
|
63
|
-
*
|
|
64
|
-
* ## WARNING method only work in `development mode`
|
|
65
|
-
*/
|
|
66
42
|
const configure = (options) => {
|
|
67
43
|
if (process.env.NODE_ENV !== 'production') {
|
|
68
44
|
const { warning, warningFunction } = options;
|