@ringcentral/spring-base 1.7.0 → 1.8.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 +10 -635
- 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/useA11yKeyEvent/useA11yKeyEvent.d.ts +0 -17
- package/src/hooks/useActive/useActive.d.ts +0 -8
- 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/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/typings/BaseColor.d.ts +0 -1
- package/src/typings/ComponentTypes.d.ts +0 -26
- 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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ringcentral/spring-base",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.8.0",
|
|
4
4
|
"author": "RingCentral",
|
|
5
5
|
"description": "Core utilities, hooks, and foundational functionality for Spring UI components, providing essential building blocks for React applications",
|
|
6
6
|
"main": "./index.js",
|
package/src/config.d.ts
CHANGED
|
@@ -1,40 +1,15 @@
|
|
|
1
|
-
declare type WarningFunctionType = ((
|
|
2
|
-
/** warning message */
|
|
3
|
-
message: string,
|
|
4
|
-
/** addition options with that warning */
|
|
5
|
-
options?: {
|
|
1
|
+
declare type WarningFunctionType = ((message: string, options?: {
|
|
6
2
|
level: 'warn' | 'error';
|
|
7
3
|
}) => void) | undefined;
|
|
8
4
|
interface RcConfigurationType {
|
|
9
|
-
/** is ignore all warning show from spring */
|
|
10
5
|
WARNING_IGNORE: boolean;
|
|
11
6
|
WARNING_FUNCTION: WarningFunctionType;
|
|
12
7
|
}
|
|
13
|
-
/**
|
|
14
|
-
* config global setting
|
|
15
|
-
*
|
|
16
|
-
* ```ts
|
|
17
|
-
* configure({
|
|
18
|
-
* warning: false
|
|
19
|
-
* })
|
|
20
|
-
* ```
|
|
21
|
-
* ## WARNING related method and only work in `development mode`
|
|
22
|
-
*
|
|
23
|
-
* `WARNING_IGNORE`: only work in `development mode`
|
|
24
|
-
* `WARNING_FUNCTION` only work in `development mode`
|
|
25
|
-
*/
|
|
26
8
|
declare let rcConfiguration: RcConfigurationType;
|
|
27
9
|
declare type RcConfigure = {
|
|
28
|
-
/** is show warning message in development */
|
|
29
10
|
warning?: boolean;
|
|
30
|
-
/** custom warning callback */
|
|
31
11
|
warningFunction?: WarningFunctionType;
|
|
32
12
|
};
|
|
33
|
-
/**
|
|
34
|
-
* set config with Spring
|
|
35
|
-
*
|
|
36
|
-
* ## WARNING method only work in `development mode`
|
|
37
|
-
*/
|
|
38
13
|
export declare const configure: (options: RcConfigure) => void;
|
|
39
14
|
export { rcConfiguration };
|
|
40
15
|
export type { WarningFunctionType };
|
|
@@ -1,7 +1,4 @@
|
|
|
1
1
|
export declare type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
2
|
-
/**
|
|
3
|
-
* null is no match, it means small than XS
|
|
4
|
-
*/
|
|
5
2
|
export declare type MatchedBreakpoint = Breakpoint | null;
|
|
6
3
|
export declare type GTBreakpoint = 'gt-xs' | 'gt-sm' | 'gt-md' | 'gt-lg' | 'gt-xl';
|
|
7
4
|
export declare type LTBreakpoint = 'lt-sm' | 'lt-md' | 'lt-lg' | 'lt-xl';
|
|
@@ -9,15 +6,7 @@ export declare type FullBreakpoint = GTBreakpoint | LTBreakpoint | Breakpoint;
|
|
|
9
6
|
export declare type BreakpointMatchMap = Partial<Record<'gtXS' | 'gtSM' | 'gtMD' | 'gtLG' | 'gtXL' | 'ltSM' | 'ltMD' | 'ltLG' | 'ltXL' | FullBreakpoint, true>>;
|
|
10
7
|
export declare type BreakpointMatchDetail = {
|
|
11
8
|
matchBP: MatchedBreakpoint;
|
|
12
|
-
/**
|
|
13
|
-
* large to small
|
|
14
|
-
* example: [gtSM, gtXS]
|
|
15
|
-
*/
|
|
16
9
|
gtMatchGroup: GTBreakpoint[];
|
|
17
|
-
/**
|
|
18
|
-
* small to large
|
|
19
|
-
* example: [ltSM, ltLG]
|
|
20
|
-
*/
|
|
21
10
|
ltMatchGroup: LTBreakpoint[];
|
|
22
11
|
matchMap: BreakpointMatchMap;
|
|
23
12
|
};
|
|
@@ -1,23 +1,6 @@
|
|
|
1
1
|
export declare type useA11yKeyEventOptions = {
|
|
2
|
-
/**
|
|
3
|
-
* that event should only trigger from target element, ignore all `propagation` events
|
|
4
|
-
*/
|
|
5
2
|
onlyOnFocus?: boolean;
|
|
6
|
-
/**
|
|
7
|
-
* is that need preventDefault when trigger `callBack`,
|
|
8
|
-
* @default true
|
|
9
|
-
*/
|
|
10
3
|
preventDefault?: boolean;
|
|
11
|
-
/**
|
|
12
|
-
* check point for `event.key`
|
|
13
|
-
*
|
|
14
|
-
* @default ['Enter', ' ']
|
|
15
|
-
*/
|
|
16
4
|
checkKeys?: string[];
|
|
17
5
|
};
|
|
18
|
-
/**
|
|
19
|
-
* bind event with a11y keyboard, `space`, `enter`, only trigger when key includes in `checkKeys`
|
|
20
|
-
*
|
|
21
|
-
* that will auto preventDefault by default, if you don't want that, set `false` with `preventDefault`
|
|
22
|
-
*/
|
|
23
6
|
export declare const useA11yKeyEvent: (fn?: ((e: any) => void) | undefined, { onlyOnFocus, preventDefault, checkKeys, }?: useA11yKeyEventOptions) => (event: React.KeyboardEvent<HTMLElement>) => void;
|
|
@@ -2,17 +2,9 @@ import { EventHandler, KeyboardEventHandler, SyntheticEvent } from 'react';
|
|
|
2
2
|
export declare type UseActiveOptions = {
|
|
3
3
|
onKeyDown?: KeyboardEventHandler;
|
|
4
4
|
onKeyUp?: KeyboardEventHandler;
|
|
5
|
-
/**
|
|
6
|
-
* will receive keyboard event
|
|
7
|
-
*/
|
|
8
5
|
onClick?: EventHandler<SyntheticEvent>;
|
|
9
6
|
disabled?: boolean;
|
|
10
7
|
};
|
|
11
|
-
/**
|
|
12
|
-
* bind event with a11y keyboard, `space`. help not native button to implement `:active`
|
|
13
|
-
*
|
|
14
|
-
* that will auto preventDefault by default, if you don't want that, set `false` with `preventDefault`
|
|
15
|
-
*/
|
|
16
8
|
export declare const useActive: ({ onKeyDown, onKeyUp, onClick, disabled, }?: UseActiveOptions) => {
|
|
17
9
|
activeHandlers: {
|
|
18
10
|
onKeyDown: KeyboardEventHandler<Element> | undefined;
|
|
@@ -1,12 +1,2 @@
|
|
|
1
1
|
export declare const visuallyHiddenStyles = "\n clip-path: inset(100%);\n clip: rect(1px, 1px, 1px, 1px);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n";
|
|
2
|
-
/**
|
|
3
|
-
* read announce when need read message.
|
|
4
|
-
*
|
|
5
|
-
* @example
|
|
6
|
-
* ```ts
|
|
7
|
-
* const announce = useAnnouncer('simpleId');
|
|
8
|
-
*
|
|
9
|
-
* announce(`You click "Announce" button`);
|
|
10
|
-
* ```
|
|
11
|
-
*/
|
|
12
2
|
export declare const useAnnouncer: (id?: string | undefined) => (message?: string | undefined) => void;
|
|
@@ -4,9 +4,5 @@ export declare type UseAriaHideOutsideProps = {
|
|
|
4
4
|
};
|
|
5
5
|
export declare const useAriaHideOutside: (props?: UseAriaHideOutsideProps) => {
|
|
6
6
|
ariaHideOutsideRef: import("react").RefObject<HTMLElement>;
|
|
7
|
-
/**
|
|
8
|
-
* Whether the `aria-hidden` attribute is being applied to outside elements.
|
|
9
|
-
* When true, elements outside the ref are hidden from screen readers.
|
|
10
|
-
*/
|
|
11
7
|
ariaHideEnabled: boolean;
|
|
12
8
|
};
|
|
@@ -1,21 +1 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* get Browser `Audio` instance, and auto destroy when component be destroyed.
|
|
3
|
-
*
|
|
4
|
-
*
|
|
5
|
-
* @param init a callback when you init that audio
|
|
6
|
-
*
|
|
7
|
-
* @example
|
|
8
|
-
*
|
|
9
|
-
* ```ts
|
|
10
|
-
* const audio = useAudio((instance) => {
|
|
11
|
-
* instance.src = 'https://your.audio'
|
|
12
|
-
* });
|
|
13
|
-
*
|
|
14
|
-
* const click = () => audio.play();
|
|
15
|
-
*
|
|
16
|
-
* click();
|
|
17
|
-
* ```
|
|
18
|
-
* @see stories {@link https://develop-rcui-int.fiji.gliprc.com/?path=/story/%F0%9F%94%A7-foundation-hooks-useaudio--simple-announcer 🔧-foundation-hooks-useaudio--simple-announcer}
|
|
19
|
-
* @see {@link https://chromium-review.googlesource.com/c/chromium/src/+/2816118}
|
|
20
|
-
*/
|
|
21
1
|
export declare const useAudio: (init?: ((audio: HTMLAudioElement) => void) | undefined) => HTMLAudioElement;
|
|
@@ -1,25 +1,6 @@
|
|
|
1
1
|
export interface UseBodyScrollLockOptions {
|
|
2
|
-
/**
|
|
3
|
-
* If true, disables the scroll lock
|
|
4
|
-
* @default false
|
|
5
|
-
*/
|
|
6
2
|
disabled?: boolean;
|
|
7
|
-
/**
|
|
8
|
-
* Reserve scrollbar gap to prevent layout shift
|
|
9
|
-
* @default true
|
|
10
|
-
*/
|
|
11
3
|
reserveScrollBarGap?: boolean;
|
|
12
|
-
/**
|
|
13
|
-
* Allow touch move on specific elements
|
|
14
|
-
*/
|
|
15
4
|
allowTouchMove?: (el: Element) => boolean;
|
|
16
5
|
}
|
|
17
|
-
/**
|
|
18
|
-
* Hook to lock body scroll while allowing scroll on target element
|
|
19
|
-
* Uses body-scroll-lock library for cross-platform compatibility
|
|
20
|
-
*
|
|
21
|
-
* @param isLocked - Whether scroll should be locked
|
|
22
|
-
* @param targetElement - Element that should remain scrollable (optional)
|
|
23
|
-
* @param options - Configuration options
|
|
24
|
-
*/
|
|
25
6
|
export declare const useBodyScrollLock: (isLocked: boolean, targetElement?: HTMLElement | null | undefined, options?: UseBodyScrollLockOptions) => void;
|
|
@@ -1,12 +1,2 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* get value when prev listen value change
|
|
3
|
-
* @param cb that method you want calculate to get value
|
|
4
|
-
* @param listenCb prev compare listener value
|
|
5
|
-
*/
|
|
6
1
|
export declare const useChange: <T, K>(cb: (prevValue: K | undefined, nextValue: K) => T, listenCb: () => K) => T;
|
|
7
|
-
/**
|
|
8
|
-
* get value when prev deps one of array value change
|
|
9
|
-
* @param cb that method you want calculate to get value
|
|
10
|
-
* @param deps prev compare value array
|
|
11
|
-
*/
|
|
12
2
|
export declare const useDepsChange: <T, K extends any[]>(cb: (prevValue: K | undefined, nextValue: K) => T, deps: K) => T;
|
|
@@ -1,18 +1,8 @@
|
|
|
1
1
|
import { SyntheticEvent } from 'react';
|
|
2
2
|
export declare type useClickAwayProps = {
|
|
3
|
-
/**
|
|
4
|
-
* If `true`, the React tree is ignored and only the DOM tree is considered.
|
|
5
|
-
* This prop changes how portaled elements are handled.
|
|
6
|
-
* @default false
|
|
7
|
-
*/
|
|
8
3
|
disableReactTree?: boolean;
|
|
9
4
|
isEnabled?: boolean;
|
|
10
5
|
};
|
|
11
|
-
/**
|
|
12
|
-
* @deprecated Use `ClickAwayListener` from `@mui/base` instead.
|
|
13
|
-
*
|
|
14
|
-
* @param onClickAway Callback fired when a "click away" event is detected.
|
|
15
|
-
*/
|
|
16
6
|
export declare const useClickAway: (onClickAway: (event: MouseEvent | TouchEvent) => void, props?: useClickAwayProps) => {
|
|
17
7
|
clickAwayRef: (instance: Element | null) => void;
|
|
18
8
|
clickAwayHandler: {
|
|
@@ -1,8 +1,2 @@
|
|
|
1
1
|
import type { DebounceSettings } from 'lodash';
|
|
2
|
-
/**
|
|
3
|
-
* provide a debounce method for debounce method
|
|
4
|
-
* @param fn method for debounce
|
|
5
|
-
* @param debounceTime debounce timeout value, default is `200`ms
|
|
6
|
-
* @param options debounce setting, default is `{trailing: true, leading: flase}`, detail see lodash
|
|
7
|
-
*/
|
|
8
2
|
export declare const useDebounce: <F extends (...args: any[]) => any>(fn: F, debounceTime?: number, options?: DebounceSettings | undefined) => import("lodash").DebouncedFunc<F>;
|
|
@@ -4,28 +4,8 @@ export declare type UseEventListenerAction = {
|
|
|
4
4
|
remove: () => void;
|
|
5
5
|
};
|
|
6
6
|
export declare type UseEventListenerConfig = {
|
|
7
|
-
/**
|
|
8
|
-
* start listening when component mounted
|
|
9
|
-
*
|
|
10
|
-
* @default true
|
|
11
|
-
*/
|
|
12
7
|
startImmediately?: boolean;
|
|
13
8
|
};
|
|
14
|
-
/**
|
|
15
|
-
* bind event when component mount and auto remove event when destroy.
|
|
16
|
-
* can remove listener by call returned function or pass empty 'target'.
|
|
17
|
-
*
|
|
18
|
-
* @param target
|
|
19
|
-
* listener will be removed when target is changed to null,
|
|
20
|
-
* or rebinding to new element when `ref.current` change
|
|
21
|
-
* @returns a method object
|
|
22
|
-
* - listen() listen listener again, if that have listener, that will not listen again
|
|
23
|
-
* - remove() remove listener
|
|
24
|
-
* @example
|
|
25
|
-
* ```ts
|
|
26
|
-
* useEventListener(window, 'keyup', () => console.log('window key up'))
|
|
27
|
-
* ```
|
|
28
|
-
*/
|
|
29
9
|
export declare function useEventListener<T = Event>(target: RefOrElementOrCallback<EventTarget> | EventTarget | null | undefined, key: string, callback: (event: T) => void, options?: AddEventListenerOptions & UseEventListenerConfig): {
|
|
30
10
|
listen: () => void;
|
|
31
11
|
remove: () => void;
|
|
@@ -1,13 +1 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* that value ever to be `you want value`
|
|
3
|
-
* Return true when the value ever to be `you want value` once.
|
|
4
|
-
*
|
|
5
|
-
* @example
|
|
6
|
-
* ```ts
|
|
7
|
-
* // once that isOpen is true, that result will always be `true`
|
|
8
|
-
* const isEverOpen = useEver(isOpen);
|
|
9
|
-
*
|
|
10
|
-
* const isEverToBe2 = useEver(count, (val) => val === 2);
|
|
11
|
-
* ```
|
|
12
|
-
*/
|
|
13
1
|
export declare const useEver: <T>(value: T, targetValue?: (value: T) => boolean) => boolean;
|
|
@@ -1,16 +1,10 @@
|
|
|
1
1
|
import { FocusEventHandler, FocusEvent, Ref } from 'react';
|
|
2
2
|
export declare type UseFocusVisibleOptions = {
|
|
3
|
-
/** invoke when focusVisiable or focusVisibleWithin is true */
|
|
4
3
|
onFocusVisible?: FocusEventHandler;
|
|
5
4
|
onFocus?: FocusEventHandler;
|
|
6
5
|
onBlur?: FocusEventHandler;
|
|
7
6
|
within?: boolean;
|
|
8
7
|
};
|
|
9
|
-
/**
|
|
10
|
-
* bind event with a11y keyboard, `space`, `enter`, only trigger when key includes in `checkKeys`
|
|
11
|
-
*
|
|
12
|
-
* that will auto preventDefault by default, if you don't want that, set `false` with `preventDefault`
|
|
13
|
-
*/
|
|
14
8
|
export declare const useFocusVisible: ({ onFocusVisible, onFocus, onBlur, within, }?: UseFocusVisibleOptions) => {
|
|
15
9
|
focusVisibleHandlers: {
|
|
16
10
|
onBlur: (event: FocusEvent) => void;
|
|
@@ -1,13 +1 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Hook to detect when fonts are loaded
|
|
3
|
-
*
|
|
4
|
-
* This hook provides graceful degradation:
|
|
5
|
-
* - When Font Loading API is not available (older browsers, SSR, test environments),
|
|
6
|
-
* it assumes fonts are loaded to prevent blocking UI
|
|
7
|
-
* - When disabled, it immediately returns true without listening to font events
|
|
8
|
-
* - When enabled and API is available, it listens for font loading completion
|
|
9
|
-
*
|
|
10
|
-
* @param enabled - Whether to listen for font loading events (default: true)
|
|
11
|
-
* @returns boolean indicating whether fonts are loaded
|
|
12
|
-
*/
|
|
13
1
|
export declare const useFontLoaded: (enabled?: boolean) => boolean;
|
|
@@ -1,19 +1,2 @@
|
|
|
1
1
|
import { unstable_useForkRef as MuiUseForkRef } from '@mui/utils';
|
|
2
|
-
/**
|
|
3
|
-
* That method will give you ability fork same value `ref object` or `method`
|
|
4
|
-
* Example:
|
|
5
|
-
* ```ts
|
|
6
|
-
* const refA = useRef();
|
|
7
|
-
* const refB = useRef();
|
|
8
|
-
*
|
|
9
|
-
* const ref = useForkRef(refA, refB)
|
|
10
|
-
*
|
|
11
|
-
* useEffect(() => {
|
|
12
|
-
* console.log(refA); // get that current div dom
|
|
13
|
-
* console.log(refB); // also get that current div dom
|
|
14
|
-
* },[])
|
|
15
|
-
*
|
|
16
|
-
* return <div ref={ref} />
|
|
17
|
-
* ```
|
|
18
|
-
*/
|
|
19
2
|
export declare const useForkRef: typeof MuiUseForkRef;
|
|
@@ -1,55 +1,18 @@
|
|
|
1
1
|
import { SyntheticEvent } from 'react';
|
|
2
2
|
import { RefOrElementOrCallback } from '../../utils';
|
|
3
3
|
export declare const globalListenerEventMap: Map<string, {
|
|
4
|
-
/**
|
|
5
|
-
* listener exec method
|
|
6
|
-
*/
|
|
7
4
|
exec: (e: any) => void;
|
|
8
|
-
/**
|
|
9
|
-
* all listener
|
|
10
|
-
*/
|
|
11
5
|
listeners: Set<(e: any) => void>;
|
|
12
6
|
}>;
|
|
13
7
|
export declare type CreateGlobalListenerConfig = {
|
|
14
|
-
/**
|
|
15
|
-
* custom key for determining different event group, default is same as `key`
|
|
16
|
-
*/
|
|
17
8
|
customKey?: string;
|
|
18
|
-
/**
|
|
19
|
-
* custom binding event target, default is `window`
|
|
20
|
-
*/
|
|
21
9
|
target?: RefOrElementOrCallback | EventTarget;
|
|
22
10
|
};
|
|
23
|
-
/**
|
|
24
|
-
* create globalListener handler for share one listener event
|
|
25
|
-
*
|
|
26
|
-
* @example
|
|
27
|
-
* ```ts
|
|
28
|
-
* const globalListener = createGlobalListener('focus', () => { console.log('focus') });
|
|
29
|
-
* const globalListener2 = createGlobalListener('focus', () => { console.log('focus') });
|
|
30
|
-
* globalListener.listen();
|
|
31
|
-
* globalListener2.listen();
|
|
32
|
-
*
|
|
33
|
-
* => // that will only create an event listener on window, but every callback will get emit value when event triggered
|
|
34
|
-
* ```
|
|
35
|
-
*/
|
|
36
11
|
export declare const createGlobalListener: <T extends SyntheticEvent<Element, Event>>(key: string, listener: (event?: T | undefined) => void, options?: boolean | AddEventListenerOptions | undefined, { customKey, target: targetProp, }?: CreateGlobalListenerConfig) => {
|
|
37
12
|
listen: () => void;
|
|
38
|
-
/**
|
|
39
|
-
* remove listener
|
|
40
|
-
*/
|
|
41
13
|
remove: () => void;
|
|
42
|
-
/**
|
|
43
|
-
* current listener state
|
|
44
|
-
*/
|
|
45
14
|
readonly state: {
|
|
46
|
-
/**
|
|
47
|
-
* current listener state count
|
|
48
|
-
*/
|
|
49
15
|
readonly count: number;
|
|
50
|
-
/**
|
|
51
|
-
* is that be listening
|
|
52
|
-
*/
|
|
53
16
|
listening: boolean;
|
|
54
17
|
};
|
|
55
18
|
};
|
|
@@ -2,11 +2,6 @@ import { SyntheticEvent } from 'react';
|
|
|
2
2
|
import { createGlobalListener, CreateGlobalListenerConfig } from './createGlobalListener';
|
|
3
3
|
declare type GlobalListener = ReturnType<typeof createGlobalListener>;
|
|
4
4
|
export declare type UseGlobalListenerConfig = CreateGlobalListenerConfig & {
|
|
5
|
-
/**
|
|
6
|
-
* start listening when component mounted
|
|
7
|
-
*
|
|
8
|
-
* @default true
|
|
9
|
-
*/
|
|
10
5
|
startImmediately?: boolean;
|
|
11
6
|
};
|
|
12
7
|
export declare function useGlobalListener<T extends SyntheticEvent>(key: string, listener: (event?: T) => void, config?: UseGlobalListenerConfig): GlobalListener;
|
|
@@ -1,8 +1,4 @@
|
|
|
1
1
|
import { RefOrElementOrCallback } from '../../utils';
|
|
2
|
-
/**
|
|
3
|
-
* group hidden logic, when binding events element focus,
|
|
4
|
-
* that hiddenRef will auto be `tabindex={-1}` *
|
|
5
|
-
*/
|
|
6
2
|
export declare const useHiddenTabindex: <T extends HTMLElement>(target: RefOrElementOrCallback<T>) => {
|
|
7
3
|
onFocus: () => void;
|
|
8
4
|
onBlur: () => void;
|
|
@@ -3,9 +3,6 @@ export declare type UseHoverOptions<E = HTMLElement> = {
|
|
|
3
3
|
onMouseEnter?: MouseEventHandler<E>;
|
|
4
4
|
onMouseLeave?: MouseEventHandler<E>;
|
|
5
5
|
disabled?: boolean;
|
|
6
|
-
/**
|
|
7
|
-
* @default true
|
|
8
|
-
*/
|
|
9
6
|
disableReactTree?: boolean;
|
|
10
7
|
};
|
|
11
8
|
export declare const useHover: <E = HTMLElement>({ onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, disabled, disableReactTree, }?: UseHoverOptions<E>) => {
|
|
@@ -1,15 +1 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Generates a unique ID.
|
|
3
|
-
*
|
|
4
|
-
* @param id - Default component id or prefix id.
|
|
5
|
-
* @param prefixMode Whether enable prefix the ID with.
|
|
6
|
-
* @returns unique ID
|
|
7
|
-
* @example
|
|
8
|
-
* useId() => 'spring-id-xxxx'
|
|
9
|
-
* useId('') => 'spring-id-xxxx'
|
|
10
|
-
* useId(null) => 'spring-id-xxxx'
|
|
11
|
-
* useId(undefined) => 'spring-id-xxxx'
|
|
12
|
-
* useId('nameId') => 'nameId'
|
|
13
|
-
* useId('nameId', true) => 'nameId-xxxx'
|
|
14
|
-
*/
|
|
15
1
|
export declare function useId(id?: string, prefixMode?: boolean): string;
|
|
@@ -6,19 +6,5 @@ declare type UseImgLoadedProps = {
|
|
|
6
6
|
referrerPolicy?: ComponentProps<'img'>['referrerPolicy'];
|
|
7
7
|
};
|
|
8
8
|
declare type LoadedState = false | 'loaded' | 'error';
|
|
9
|
-
/**
|
|
10
|
-
* get load state of an image by passing src or srcSet
|
|
11
|
-
* - false: not load yet
|
|
12
|
-
* - 'loaded': successfully loaded
|
|
13
|
-
* - 'error': fail to load
|
|
14
|
-
*
|
|
15
|
-
* @example
|
|
16
|
-
* ```ts
|
|
17
|
-
* const loaded = useImgLoaded({
|
|
18
|
-
* src,
|
|
19
|
-
* srcSet,
|
|
20
|
-
* });
|
|
21
|
-
* ```
|
|
22
|
-
*/
|
|
23
9
|
export declare const useImgLoaded: ({ crossOrigin, referrerPolicy, src, srcSet, }: UseImgLoadedProps) => LoadedState;
|
|
24
10
|
export {};
|
|
@@ -1,43 +1,6 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* controllable interval, provide easy way to control interval
|
|
3
|
-
*
|
|
4
|
-
* - cancel: cancel current interval
|
|
5
|
-
* - pause: pause current interval
|
|
6
|
-
* - play: play current interval
|
|
7
|
-
* - getRunning: return current interval running state
|
|
8
|
-
*
|
|
9
|
-
* @example
|
|
10
|
-
* ```ts
|
|
11
|
-
* const { cancel, play, pause } = useInterval(() => {
|
|
12
|
-
* console.log('interval be triggered');
|
|
13
|
-
* }, 1000)
|
|
14
|
-
*
|
|
15
|
-
* // get current run times
|
|
16
|
-
* useInterval((times) => {
|
|
17
|
-
* console.log('current times start from 1', times);
|
|
18
|
-
* }, 2000)
|
|
19
|
-
*
|
|
20
|
-
* // not start interval immediately
|
|
21
|
-
* useInterval((times) => {
|
|
22
|
-
* console.log('current times start from 1', times);
|
|
23
|
-
* }, 2000, false)
|
|
24
|
-
* ```
|
|
25
|
-
*/
|
|
26
1
|
export declare const useInterval: (callback: (times: number) => void, delay?: number, startImmediately?: boolean) => {
|
|
27
|
-
/**
|
|
28
|
-
* cancel current interval
|
|
29
|
-
*/
|
|
30
2
|
cancel: () => void;
|
|
31
|
-
/**
|
|
32
|
-
* pause current interval
|
|
33
|
-
*/
|
|
34
3
|
pause: () => void;
|
|
35
|
-
/**
|
|
36
|
-
* play current interval
|
|
37
|
-
*/
|
|
38
4
|
play: () => void;
|
|
39
|
-
/**
|
|
40
|
-
* return current interval running state
|
|
41
|
-
*/
|
|
42
5
|
getRunning: () => boolean;
|
|
43
6
|
};
|
|
@@ -3,12 +3,6 @@ export declare type UseKeyDownOnce<T> = {
|
|
|
3
3
|
onKeyUp?: (e: React.KeyboardEvent<T>) => void;
|
|
4
4
|
onKeyDown?: (e: React.KeyboardEvent<T>) => void;
|
|
5
5
|
};
|
|
6
|
-
/**
|
|
7
|
-
* Provide user trigger `onKeyDown` only one time when hold press on key.
|
|
8
|
-
* @param includeKeys that check include keys
|
|
9
|
-
* @param methods trigger when first keydown or keyup
|
|
10
|
-
* @returns
|
|
11
|
-
*/
|
|
12
6
|
export declare const useKeyDownOnce: <T>(includeKeys: string[], { onKeyDown, onKeyUp }: UseKeyDownOnce<T>) => {
|
|
13
7
|
onKeyDown: (e: import("react").KeyboardEvent<T>) => void;
|
|
14
8
|
onKeyUp: (e: import("react").KeyboardEvent<T>) => void;
|
|
@@ -1,18 +1,7 @@
|
|
|
1
1
|
export declare type MoveIndexInTwoDimensionalOptions = {
|
|
2
|
-
/** current index */
|
|
3
2
|
currIndex: number;
|
|
4
|
-
/** column number with that two dimensional */
|
|
5
3
|
columns: number;
|
|
6
|
-
/** total number of items */
|
|
7
4
|
total: number;
|
|
8
|
-
/**
|
|
9
|
-
* if that touch boundary, is that can move to next available infinite
|
|
10
|
-
*
|
|
11
|
-
* - when set value as `order`, that will increase or decrease when `ArrowLeft` or `ArrowRight` touch boundary
|
|
12
|
-
*/
|
|
13
5
|
infinite?: boolean | 'order';
|
|
14
6
|
};
|
|
15
|
-
/**
|
|
16
|
-
* that can move index in column array
|
|
17
|
-
*/
|
|
18
7
|
export declare function moveIndexInTwoDimension(direction: string, options: MoveIndexInTwoDimensionalOptions): number;
|
|
@@ -1,49 +1,16 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { MoveIndexInTwoDimensionalOptions } from './moveIndexInTwoDimension';
|
|
3
3
|
export declare type UseKeyboardMoveFocusParams<T> = {
|
|
4
|
-
/** current focused index `ref` */
|
|
5
4
|
focusedIndexRef: React.MutableRefObject<number>;
|
|
6
|
-
/** action when index change */
|
|
7
5
|
onFocusedIndexChange: (event: React.KeyboardEvent<HTMLElement>, index: number) => void;
|
|
8
|
-
/** children items */
|
|
9
6
|
options: T[];
|
|
10
|
-
/** column number with that move block, default is `1` */
|
|
11
7
|
columns?: number;
|
|
12
|
-
/**
|
|
13
|
-
* Used to determine the disabled state for a given option.
|
|
14
|
-
*
|
|
15
|
-
* @param {T} option The option to test.
|
|
16
|
-
* @returns {boolean}
|
|
17
|
-
*/
|
|
18
8
|
getOptionDisabled?: (option: T) => boolean;
|
|
19
|
-
/**
|
|
20
|
-
* Used to get option text for search focus by other text.
|
|
21
|
-
*
|
|
22
|
-
* @param {T} option
|
|
23
|
-
* @returns {string} that string for search
|
|
24
|
-
*/
|
|
25
9
|
getOptionSearchText?: (option: T) => string;
|
|
26
|
-
/**
|
|
27
|
-
* when typing search text, end this search debounce time
|
|
28
|
-
*
|
|
29
|
-
* @default 500
|
|
30
|
-
*/
|
|
31
10
|
endSearchDebounceTime?: number;
|
|
32
11
|
} & Pick<MoveIndexInTwoDimensionalOptions, 'infinite'>;
|
|
33
|
-
/**
|
|
34
|
-
* use keyboard move index in two dimensional
|
|
35
|
-
*/
|
|
36
12
|
export declare const useKeyboardMoveFocus: <T>({ infinite, options, focusedIndexRef, onFocusedIndexChange, getOptionDisabled, getOptionSearchText, columns, endSearchDebounceTime, }: UseKeyboardMoveFocusParams<T>) => {
|
|
37
|
-
/**
|
|
38
|
-
* Get previous focusable option(include current index).
|
|
39
|
-
*/
|
|
40
13
|
getPrevFocusableOption: (index?: number, isInfinite?: any) => number;
|
|
41
|
-
/**
|
|
42
|
-
* Get next focusable option(include current index).
|
|
43
|
-
*/
|
|
44
14
|
getNextFocusableOption: (index?: number, isInfinite?: any) => number;
|
|
45
|
-
/**
|
|
46
|
-
* Use to handle keyboard event.
|
|
47
|
-
*/
|
|
48
15
|
onKeyFocusedIndexHandle: (event: React.KeyboardEvent<any>) => void;
|
|
49
16
|
};
|
|
@@ -1,14 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare type UseOnlyOneFocusableParams = {
|
|
3
|
-
/** current focused index `ref` */
|
|
4
3
|
focusedIndexRef: React.MutableRefObject<number>;
|
|
5
|
-
/** wrap container for below all only have one focusable */
|
|
6
4
|
containerRef: React.RefObject<HTMLElement>;
|
|
7
5
|
};
|
|
8
|
-
/**
|
|
9
|
-
* when focus in container below element with binding `getItemProps`,
|
|
10
|
-
* that will only have one element can be focusable.
|
|
11
|
-
*/
|
|
12
6
|
export declare const useOnlyOneFocusable: ({ focusedIndexRef, containerRef, }: UseOnlyOneFocusableParams) => {
|
|
13
7
|
moveFocusedId: string;
|
|
14
8
|
focusIndex: (toIndex: number) => void;
|
|
@@ -2,35 +2,19 @@ import React from 'react';
|
|
|
2
2
|
import { UseTouchMouseEvent } from '../useTouchMouseEvent';
|
|
3
3
|
export declare const isTouchEvent: <T = unknown>(ev: React.MouseEvent<T, MouseEvent> | React.TouchEvent<T>) => ev is React.TouchEvent<T>;
|
|
4
4
|
export interface UseLongPressOptions {
|
|
5
|
-
/**
|
|
6
|
-
* auto event.preventDefault for `mousedown`, `touchstart`, `touchend`
|
|
7
|
-
* always use for not leave that element
|
|
8
|
-
*/
|
|
9
5
|
isPreventDefault?: boolean;
|
|
10
|
-
/** the longPress delay */
|
|
11
6
|
delay?: number;
|
|
12
|
-
/** for custom window */
|
|
13
7
|
externalWindow?: Window;
|
|
14
8
|
}
|
|
15
9
|
export declare type UseLongPressEventReason = 'keyboard' | 'click' | 'tap';
|
|
16
10
|
export declare type UseLongPressOutput<T> = {
|
|
17
|
-
/** trigger when click or tab or keyboard */
|
|
18
11
|
onTap?: (e: React.MouseEvent<T, MouseEvent> | React.TouchEvent<T> | React.KeyboardEvent<T>, reason: UseLongPressEventReason) => void;
|
|
19
|
-
/** trigger when press or long click */
|
|
20
12
|
onPress?: (e: React.MouseEvent<T, MouseEvent> | React.TouchEvent<T> | React.KeyboardEvent<T>, reason: UseLongPressEventReason) => void;
|
|
21
13
|
};
|
|
22
14
|
export declare type UseLongPressInput<T> = {
|
|
23
15
|
onKeyUp?: (e: React.KeyboardEvent<T>) => void;
|
|
24
16
|
onKeyDown?: (e: React.KeyboardEvent<T>) => void;
|
|
25
17
|
} & UseTouchMouseEvent<T>;
|
|
26
|
-
/**
|
|
27
|
-
* Provide longPress helper, both `click`/`tab`/`keydown` will trigger event
|
|
28
|
-
*
|
|
29
|
-
* - Trigger `onTap` when user action leave small than delay time.
|
|
30
|
-
* - Trigger `onPress` when action time is long than delay time.
|
|
31
|
-
*
|
|
32
|
-
* @default UseLongPressOptions { delay = 300 }
|
|
33
|
-
*/
|
|
34
18
|
export declare const useLongPress: <T extends HTMLElement = HTMLElement>({ onTap, onPress }: UseLongPressOutput<T>, { onTouchStart: onTouchStartArg, onTouchEnd: onTouchEndArg, onMouseDown, onKeyDown, onKeyUp, onMouseUp: onMouseUpArg, }?: UseLongPressInput<T>, { isPreventDefault, delay, externalWindow, }?: UseLongPressOptions) => {
|
|
35
19
|
onMouseDown: React.MouseEventHandler<T>;
|
|
36
20
|
ref: React.MutableRefObject<T | null>;
|