@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
|
@@ -1,16 +1,2 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
/**
|
|
3
|
-
* get that component mounted state `ref`
|
|
4
|
-
*
|
|
5
|
-
* @example
|
|
6
|
-
*
|
|
7
|
-
* ```ts
|
|
8
|
-
const isMountedRef = useMountState();
|
|
9
|
-
|
|
10
|
-
if (isMountedRef.current) {
|
|
11
|
-
console.log('component mounted');
|
|
12
|
-
}
|
|
13
|
-
*
|
|
14
|
-
* ```
|
|
15
|
-
*/
|
|
16
2
|
export declare const useMountState: () => import("react").MutableRefObject<boolean>;
|
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
import { RefOrElementOrCallback } from '../../utils';
|
|
2
2
|
import { PerformanceOptions } from '../useResizeObserver';
|
|
3
|
-
/**
|
|
4
|
-
* trigger when overflow state change
|
|
5
|
-
*/
|
|
6
3
|
export declare const useOverflow: (target: RefOrElementOrCallback, cb: (state: boolean, value: {
|
|
7
4
|
scrollWidth: number;
|
|
8
5
|
clientWidth: number;
|
|
@@ -1,7 +1 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* get previous render value
|
|
3
|
-
* @param cb that get method of target value
|
|
4
|
-
* @param isDefault if set `true`, the first time will get value from `cb`
|
|
5
|
-
* @returns previous value get from `cb`
|
|
6
|
-
*/
|
|
7
1
|
export declare function usePrevious<T, K extends boolean>(cb: () => T, isDefault?: K): T | (K extends true ? never : undefined);
|
|
@@ -1,21 +1,2 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
/**
|
|
3
|
-
* Returns a stateful like state with Ref, and a function to update it current value.
|
|
4
|
-
* can trigger update value without re-render
|
|
5
|
-
*
|
|
6
|
-
* @param value init value
|
|
7
|
-
* @param customUpdate you can custom you update method, or just set your `forceUpdate` to reuse same instance
|
|
8
|
-
* @returns an array with [ref, update]
|
|
9
|
-
*
|
|
10
|
-
* @example
|
|
11
|
-
* ```ts
|
|
12
|
-
* const [inputRef, updateInput] = useRefState(123);
|
|
13
|
-
*
|
|
14
|
-
* if(needReRender){
|
|
15
|
-
* updateInput(456); // trigger re-render
|
|
16
|
-
* } else {
|
|
17
|
-
* updateInput(456, false); // not trigger re-render
|
|
18
|
-
* }
|
|
19
|
-
* ```
|
|
20
|
-
*/
|
|
21
2
|
export declare const useRefState: <T>(value: T, customUpdate?: (() => void) | undefined) => readonly [import("react").MutableRefObject<T>, (toValue: T, isUpdate?: any) => void];
|
|
@@ -1,24 +1,9 @@
|
|
|
1
1
|
import { type DebounceSettings, type ThrottleSettings } from 'lodash';
|
|
2
2
|
import { RefOrElementOrCallback } from '../../utils';
|
|
3
3
|
export declare type PerformanceOptions = {
|
|
4
|
-
/**
|
|
5
|
-
* mode that improve performance, default is debounce
|
|
6
|
-
*
|
|
7
|
-
* throttle is better than debounce when use for responsive UI
|
|
8
|
-
*/
|
|
9
4
|
mode?: 'debounce' | 'throttle' | 'none';
|
|
10
|
-
/** debounce time or throttle time when resize, default is 200 */
|
|
11
5
|
time?: number;
|
|
12
|
-
/** ignore fire when observe */
|
|
13
6
|
ignoreFireWhenObserve?: boolean;
|
|
14
|
-
/** setting about debounce or throttle */
|
|
15
7
|
options?: ThrottleSettings | DebounceSettings;
|
|
16
8
|
};
|
|
17
|
-
/**
|
|
18
|
-
* get resize event with auto disconnect when layout destroy.
|
|
19
|
-
* bring with debounce for event not too many
|
|
20
|
-
* @param ref that ref for element
|
|
21
|
-
* @param callback callback when element resize
|
|
22
|
-
* @param performance options that improve performance
|
|
23
|
-
*/
|
|
24
9
|
export declare const useResizeObserver: <T extends HTMLElement = HTMLElement>(target: RefOrElementOrCallback<T>, callback: ResizeObserverCallback, performance?: PerformanceOptions) => ResizeObserver;
|
|
@@ -1,7 +1,3 @@
|
|
|
1
1
|
import { BreakpointMatchMap, MatchedBreakpoint } from '../../contexts';
|
|
2
|
-
/**
|
|
3
|
-
* get all matched breakpoints
|
|
4
|
-
* @param defaultBreakpoint use defaultBreakpoint when Responsive init (will pass undefined)
|
|
5
|
-
*/
|
|
6
2
|
declare const useResponsiveMatch: (defaultBreakpoint?: MatchedBreakpoint | undefined) => BreakpointMatchMap;
|
|
7
3
|
export { useResponsiveMatch };
|
|
@@ -1,10 +1,2 @@
|
|
|
1
1
|
import { MutableRefObject } from 'react';
|
|
2
|
-
/**
|
|
3
|
-
* provide a ref for only calculate `cb` once
|
|
4
|
-
* prevent `useRef(getValue())`, that `getValue` calculate every re-render
|
|
5
|
-
*
|
|
6
|
-
* @param cb that get method of get this ref init value, only calculate once
|
|
7
|
-
* @returns same as `useRef` result
|
|
8
|
-
*
|
|
9
|
-
*/
|
|
10
2
|
export declare function useResultRef<T>(cb: () => T): MutableRefObject<T>;
|
|
@@ -1,35 +1,12 @@
|
|
|
1
1
|
export declare type UseRetryOptions = {
|
|
2
|
-
/** times count that retry when `cb` return `false` */
|
|
3
2
|
retryTimes: number;
|
|
4
|
-
/** retry interval time */
|
|
5
3
|
intervalTime: number;
|
|
6
|
-
/** trigger when retry start */
|
|
7
4
|
onStart?: () => void;
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
/** retry times */
|
|
11
|
-
times?: number) => void;
|
|
12
|
-
/** trigger when retry complete */
|
|
13
|
-
onComplete?: (
|
|
14
|
-
/** retry times */
|
|
15
|
-
times?: number) => void;
|
|
16
|
-
/** trigger when retry be cancel */
|
|
5
|
+
onSuccess?: (times?: number) => void;
|
|
6
|
+
onComplete?: (times?: number) => void;
|
|
17
7
|
onCancel?: () => void;
|
|
18
8
|
};
|
|
19
|
-
/**
|
|
20
|
-
* retry times when exec callback fail
|
|
21
|
-
*
|
|
22
|
-
* * `retry`: that will auto add `times` end of your call back
|
|
23
|
-
* * `cancel`: cancel that retry event, that only cancel inner interval promise, **if you need cancel your `cb` promise, you should handle by yourself.**
|
|
24
|
-
*/
|
|
25
9
|
export declare const useRetry: <T extends (...args: any[]) => boolean | Promise<boolean>>(cb: T, options?: UseRetryOptions | undefined) => {
|
|
26
|
-
/**
|
|
27
|
-
* retry method, that will be cancelable with `cancel`,
|
|
28
|
-
* and when trigger many time that will always clear previous retry
|
|
29
|
-
*/
|
|
30
10
|
retry: (...args: Parameters<T>) => Promise<void>;
|
|
31
|
-
/**
|
|
32
|
-
* cancel current retry
|
|
33
|
-
*/
|
|
34
11
|
cancel: () => void;
|
|
35
12
|
};
|
|
@@ -1,22 +1,5 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* cancelable sleep method.
|
|
3
|
-
*
|
|
4
|
-
* - sleep: a promise sleep
|
|
5
|
-
* - cancel: cancel that sleep event
|
|
6
|
-
* - getSleeping: get current sleeping state
|
|
7
|
-
*/
|
|
8
1
|
export declare const useSleep: () => {
|
|
9
|
-
/**
|
|
10
|
-
* sleep method, that will be cancelable with `cancel`,
|
|
11
|
-
* and when trigger many time that will always clear previous sleep
|
|
12
|
-
*/
|
|
13
2
|
sleep: (time: number) => Promise<void>;
|
|
14
|
-
/**
|
|
15
|
-
* cancel current sleep timer
|
|
16
|
-
*/
|
|
17
3
|
cancel: () => void;
|
|
18
|
-
/**
|
|
19
|
-
* return is current is sleeping
|
|
20
|
-
*/
|
|
21
4
|
getSleeping: () => boolean;
|
|
22
5
|
};
|
|
@@ -1,7 +1 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Internal hook to detect if the component is running in a test runner environment
|
|
3
|
-
* Used by Storybook stories to disable network requests and animations during testing
|
|
4
|
-
* @returns {boolean} true if running in test runner (headless browser), false otherwise
|
|
5
|
-
* @internal
|
|
6
|
-
*/
|
|
7
1
|
export declare const useTestRunnerDetection: () => boolean;
|
|
@@ -1,8 +1,2 @@
|
|
|
1
1
|
import type { ThrottleSettings } from 'lodash';
|
|
2
|
-
/**
|
|
3
|
-
* provide a throttle method for throttle method
|
|
4
|
-
* @param fn method for throttle
|
|
5
|
-
* @param throttleTime throttle timeout value, default is `200`ms
|
|
6
|
-
* @param options throttle setting, default is `{trailing: true, leading: true}`, detail see lodash
|
|
7
|
-
*/
|
|
8
2
|
export declare const useThrottle: <F extends (...args: any[]) => any>(fn: F, throttleTime?: number, options?: ThrottleSettings | undefined) => import("lodash").DebouncedFunc<F>;
|
|
@@ -1,16 +1,8 @@
|
|
|
1
1
|
import { MouseEventHandler, TouchEventHandler } from 'react';
|
|
2
2
|
import { RefOrElementOrCallback } from '../../utils';
|
|
3
3
|
export interface UseTouchMouseEvent<T> extends Partial<UseTouchMouseOutputEvent<T>> {
|
|
4
|
-
onTouchEnd?: (event: React.TouchEvent<T>,
|
|
5
|
-
|
|
6
|
-
* when set insideRef, that will also emit the state of host reference contain pointer element when action stop
|
|
7
|
-
*/
|
|
8
|
-
isInside?: boolean) => void;
|
|
9
|
-
onMouseUp?: (event: React.MouseEvent<T, globalThis.MouseEvent>,
|
|
10
|
-
/**
|
|
11
|
-
* when set insideRef, that will also emit the state of host reference contain pointer element when action stop
|
|
12
|
-
*/
|
|
13
|
-
isInside?: boolean) => void;
|
|
4
|
+
onTouchEnd?: (event: React.TouchEvent<T>, isInside?: boolean) => void;
|
|
5
|
+
onMouseUp?: (event: React.MouseEvent<T, globalThis.MouseEvent>, isInside?: boolean) => void;
|
|
14
6
|
}
|
|
15
7
|
export interface UseTouchMouseOutputEvent<T> {
|
|
16
8
|
onMouseUp: MouseEventHandler<T>;
|
|
@@ -19,38 +11,7 @@ export interface UseTouchMouseOutputEvent<T> {
|
|
|
19
11
|
onTouchStart: TouchEventHandler<T>;
|
|
20
12
|
}
|
|
21
13
|
export interface UseTouchMouseEventOptions<T extends HTMLElement> {
|
|
22
|
-
/**
|
|
23
|
-
* when set that elementRef, event will bring with leave state when `touchend` and `mouseup`
|
|
24
|
-
*
|
|
25
|
-
* stop action event in browser default can be trigger when `touchend`, `mouseup` outside target element,
|
|
26
|
-
* set that host ref to make sure `touchend`, `mouseup` event only trigger when release inside target element
|
|
27
|
-
*/
|
|
28
14
|
actionRef?: RefOrElementOrCallback<T>;
|
|
29
15
|
}
|
|
30
|
-
/**
|
|
31
|
-
* Provide a utils for switch trigger touch event or mouse event between different device
|
|
32
|
-
*
|
|
33
|
-
* - Trigger `touch` event in `touch support` device
|
|
34
|
-
* - onTouchStart
|
|
35
|
-
* - onTouchEnd
|
|
36
|
-
* - Trigger `mouse` event in `non touch support` device
|
|
37
|
-
* - onMouseDown
|
|
38
|
-
* - onMouseUp
|
|
39
|
-
*
|
|
40
|
-
* ### Once that is touch support device, that mouse event will never can be trigger
|
|
41
|
-
* https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent
|
|
42
|
-
*
|
|
43
|
-
* Event order:
|
|
44
|
-
* - touchstart
|
|
45
|
-
* - Zero or more touchmove events, depending on movement of the finger(s)
|
|
46
|
-
* - touchend
|
|
47
|
-
* - mousemove
|
|
48
|
-
* - mousedown
|
|
49
|
-
* - mouseup
|
|
50
|
-
* - click
|
|
51
|
-
*/
|
|
52
16
|
export declare const useTouchMouseEvent: <T extends HTMLElement = HTMLElement>({ onMouseDown: onMouseDownArg, onMouseUp: onMouseUpArg, onTouchStart: onTouchStartArg, onTouchEnd: onTouchEndArg, }: UseTouchMouseEvent<T>, { actionRef }?: UseTouchMouseEventOptions<T>) => UseTouchMouseOutputEvent<T>;
|
|
53
|
-
/**
|
|
54
|
-
* check is element equal or contains target element
|
|
55
|
-
*/
|
|
56
17
|
export declare const isElmEqualOrContain: (sourceTarget: RefOrElementOrCallback, containTarget: RefOrElementOrCallback) => boolean;
|
|
@@ -2,44 +2,18 @@ import type { MotionProps } from 'framer-motion';
|
|
|
2
2
|
import type { ComponentPropsWithRef, ElementType, HTMLAttributes, LegacyRef } from 'react';
|
|
3
3
|
import type { GlobalStateClassesKey } from '../utils/classes/globalStateClasses';
|
|
4
4
|
export declare type GroupedMotionProps<P = {}> = Pick<MotionProps, Extract<keyof HTMLAttributes<Element>, keyof MotionProps>> & Omit<P, Extract<keyof HTMLAttributes<Element>, keyof MotionProps>> & {
|
|
5
|
-
/** Override the motion applied to the component */
|
|
6
5
|
motionProps?: MotionProps | null;
|
|
7
6
|
};
|
|
8
7
|
export declare type ClassesProp<K extends string> = {
|
|
9
|
-
/** Override or extend the styles applied to the component */
|
|
10
8
|
classes?: Partial<Record<K | 'root' | GlobalStateClassesKey, string>>;
|
|
11
9
|
};
|
|
12
10
|
export declare type PropsWithRoot<P, R extends ElementType, O extends string = ''> = P & Omit<ComponentPropsWithRef<R>, keyof P | O>;
|
|
13
11
|
export declare type StandardProps<P, C extends string, R extends ElementType | void = void, O extends string = '', ExtendAttributes = HTMLDataAttribute> = ClassesProp<C> & (R extends ElementType ? PropsWithRoot<P, R, 'classes' | O> : P & {
|
|
14
|
-
/** className for `root` slot */
|
|
15
12
|
className?: string;
|
|
16
13
|
}) & ExtendAttributes;
|
|
17
|
-
/**
|
|
18
|
-
* make props work with classes key type and add `root`
|
|
19
|
-
*
|
|
20
|
-
* @example
|
|
21
|
-
* ```tsx
|
|
22
|
-
* type ClassesKeys = 'foo' | 'bar';
|
|
23
|
-
*
|
|
24
|
-
* type MyComponentProps = WithClassesProps<{ example: string }, ClassesKeys>
|
|
25
|
-
*
|
|
26
|
-
* const props: MyComponentProps;
|
|
27
|
-
*
|
|
28
|
-
* props.classes = 'root';
|
|
29
|
-
* props.classes = 'bar';
|
|
30
|
-
* props.classes = 'foo';
|
|
31
|
-
* ```
|
|
32
|
-
*/
|
|
33
14
|
export declare type WithClassesProps<P, C extends string> = P & ClassesProp<C>;
|
|
34
|
-
/**
|
|
35
|
-
* @deprecated use `WithClassesProps` instead, just rename
|
|
36
|
-
*/
|
|
37
15
|
export declare type BaseOverridableProps<P, C extends string> = WithClassesProps<P, C>;
|
|
38
16
|
export declare type OverridableProps<B, T extends ElementType> = B & {
|
|
39
|
-
/**
|
|
40
|
-
* The component used for the root node.
|
|
41
|
-
* Either a string to use a HTML element or a component.
|
|
42
|
-
*/
|
|
43
17
|
component?: T;
|
|
44
18
|
} & Omit<ComponentPropsWithRef<T>, keyof B>;
|
|
45
19
|
export declare type RefFromProps<P> = P extends {
|
|
@@ -1,43 +1,14 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* This file copy from MUI
|
|
3
|
-
*
|
|
4
|
-
* https://github.com/mui/material-ui/blob/master/packages/mui-types/index.d.ts
|
|
5
|
-
*/
|
|
6
1
|
import type React from 'react';
|
|
7
|
-
/**
|
|
8
|
-
* Remove properties `K` from `T`.
|
|
9
|
-
* Distributive for union types.
|
|
10
|
-
*
|
|
11
|
-
* @internal
|
|
12
|
-
*/
|
|
13
2
|
export declare type DistributiveOmit<T, K extends keyof any> = T extends any ? Omit<T, K> : never;
|
|
14
|
-
/**
|
|
15
|
-
* A component whose root component can be controlled via a `component` prop.
|
|
16
|
-
*
|
|
17
|
-
* Adjusts valid props based on the type of `component`.
|
|
18
|
-
*/
|
|
19
3
|
export interface OverridableComponent<M extends OverridableTypeMap> {
|
|
20
4
|
<C extends React.ElementType>(props: {
|
|
21
|
-
/**
|
|
22
|
-
* The component used for the root node.
|
|
23
|
-
* Either a string to use a HTML element or a component.
|
|
24
|
-
*/
|
|
25
5
|
component: C;
|
|
26
6
|
} & OverrideProps<M, C>): JSX.Element | null;
|
|
27
7
|
(props: DefaultComponentProps<M>): JSX.Element | null;
|
|
28
8
|
displayName?: string;
|
|
29
9
|
}
|
|
30
|
-
/**
|
|
31
|
-
* Props of the component if `component={Component}` is used.
|
|
32
|
-
*/
|
|
33
10
|
export declare type OverrideProps<M extends OverridableTypeMap, C extends React.ElementType> = (BaseProps<M> & DistributiveOmit<React.ComponentPropsWithRef<C>, keyof BaseProps<M>>);
|
|
34
|
-
/**
|
|
35
|
-
* Props if `component={Component}` is NOT used.
|
|
36
|
-
*/
|
|
37
11
|
export declare type DefaultComponentProps<M extends OverridableTypeMap> = BaseProps<M> & DistributiveOmit<React.ComponentPropsWithRef<M['defaultComponent']>, keyof BaseProps<M>>;
|
|
38
|
-
/**
|
|
39
|
-
* Props defined on the component.
|
|
40
|
-
*/
|
|
41
12
|
export declare type BaseProps<M extends OverridableTypeMap> = M['props'];
|
|
42
13
|
export interface OverridableTypeMap {
|
|
43
14
|
props: {};
|
package/src/typings/UnitMap.d.ts
CHANGED
|
@@ -1,27 +1,12 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @ignore
|
|
3
|
-
*
|
|
4
|
-
* fixed a map with unit key
|
|
5
|
-
*/
|
|
6
1
|
export declare type UnitMap<T extends string | number | symbol, K = any> = {
|
|
7
2
|
[key in T]: K;
|
|
8
3
|
};
|
|
9
|
-
/**
|
|
10
|
-
* @ignore
|
|
11
|
-
*
|
|
12
|
-
* convert `classes` type to `classes map` type
|
|
13
|
-
*/
|
|
14
4
|
export declare type ClassesMap<T extends {
|
|
15
5
|
classes?: any;
|
|
16
6
|
} | undefined, K = any> = Partial<UnitMap<Classes<T>, K>>;
|
|
17
7
|
declare type ClassesReturn<T extends {
|
|
18
8
|
classes?: any;
|
|
19
9
|
} | undefined> = keyof NonNullable<NonNullable<T>['classes']>;
|
|
20
|
-
/**
|
|
21
|
-
* get type of `classes` prop
|
|
22
|
-
*
|
|
23
|
-
* @returns classes type of prop
|
|
24
|
-
*/
|
|
25
10
|
export declare type Classes<T extends {
|
|
26
11
|
classes?: any;
|
|
27
12
|
} | undefined> = ClassesReturn<T>;
|
|
@@ -1,9 +1 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Hides all elements in the DOM outside the given targets from screen readers using aria-hidden,
|
|
3
|
-
* and returns a function to revert these changes. In addition, changes to the DOM are watched
|
|
4
|
-
* and new elements outside the targets are automatically hidden.
|
|
5
|
-
* @param targets - The elements that should remain visible.
|
|
6
|
-
* @param root - Nothing will be hidden above this element.
|
|
7
|
-
* @returns - A function to restore all hidden elements.
|
|
8
|
-
*/
|
|
9
1
|
export declare const ariaHideOutside: (targets: Element[], root?: HTMLElement) => () => void;
|
|
@@ -6,35 +6,6 @@ export declare type Cls<T extends {
|
|
|
6
6
|
}> = (...classValues: Array<T['classes'] | GlobalStateClassesKey | {
|
|
7
7
|
[key in T['classes'] | GlobalStateClassesKey]?: boolean | undefined | null;
|
|
8
8
|
} | undefined | null | false>) => string;
|
|
9
|
-
/**
|
|
10
|
-
* Custom hook for generating CSS classes based on input parameters.
|
|
11
|
-
*
|
|
12
|
-
* pick class from object with prefix of object like `sui-${prefix}-${key}`
|
|
13
|
-
*
|
|
14
|
-
* `className` will be apply to the `cls('root')` class.
|
|
15
|
-
*
|
|
16
|
-
* camelCase will be used for the key in the inputClasses object.
|
|
17
|
-
*
|
|
18
|
-
* and apply to kebabCase in the class name.
|
|
19
|
-
*
|
|
20
|
-
* ```tsx
|
|
21
|
-
* type BaseButtonClasses =
|
|
22
|
-
* | 'root'
|
|
23
|
-
* | 'content'
|
|
24
|
-
* | 'start-slot';
|
|
25
|
-
*
|
|
26
|
-
* const cls = useClasses<BaseButtonClasses>('button', {
|
|
27
|
-
* root: 'custom-button-root',
|
|
28
|
-
* content: 'custom-button-content',
|
|
29
|
-
* startSlot: 'custom-button-start-slot',
|
|
30
|
-
* }, 'custom-root-class');
|
|
31
|
-
*
|
|
32
|
-
* <button className={cls('root')}>Button</button> // 'sui-button-root custom-button-root custom-root-class'
|
|
33
|
-
* <button className={cls('content')}>Button</button> // 'sui-button-content custom-button-content'
|
|
34
|
-
*
|
|
35
|
-
* <button className={cls('start-slot')}>Button</button> // 'sui-button-start-slot custom-button-start-slot'
|
|
36
|
-
* ```
|
|
37
|
-
*/
|
|
38
9
|
export declare const useClasses: <T extends {
|
|
39
10
|
name: string;
|
|
40
11
|
classes: string;
|
|
@@ -1,90 +1,2 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Combine props object together
|
|
3
|
-
*
|
|
4
|
-
* that will group className, classes together
|
|
5
|
-
* function will auto combine together,
|
|
6
|
-
* trigger order is `intoProps.someFn(e) => defaultProps.someFn(e)`
|
|
7
|
-
*
|
|
8
|
-
* @param baseProps base props you want to combine together
|
|
9
|
-
* @param newProps want to combine in to props
|
|
10
|
-
* @param coverPropKeys some prop key you want to cover, not combine when type is function, ex. `ComponentType`
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
* @example
|
|
14
|
-
* ```tsx
|
|
15
|
-
* combineProps(
|
|
16
|
-
{
|
|
17
|
-
children: <A />,
|
|
18
|
-
value: '1',
|
|
19
|
-
className: 'a1',
|
|
20
|
-
classes: {
|
|
21
|
-
root: 'root1'
|
|
22
|
-
},
|
|
23
|
-
count: 1,
|
|
24
|
-
size: 'large',
|
|
25
|
-
onClick: fn1
|
|
26
|
-
},
|
|
27
|
-
{
|
|
28
|
-
children: <B />,
|
|
29
|
-
value: '2',
|
|
30
|
-
className: 'a2',
|
|
31
|
-
classes: {
|
|
32
|
-
root: 'root2'
|
|
33
|
-
},
|
|
34
|
-
count: 2,
|
|
35
|
-
size: undefined,
|
|
36
|
-
onClick: fn2
|
|
37
|
-
},
|
|
38
|
-
)
|
|
39
|
-
// output result:
|
|
40
|
-
{
|
|
41
|
-
children: <B />,
|
|
42
|
-
value: '2',
|
|
43
|
-
className: 'a1 a2',
|
|
44
|
-
classes: {
|
|
45
|
-
root: 'root1 root2'
|
|
46
|
-
},
|
|
47
|
-
count: 2,
|
|
48
|
-
size: 'large',
|
|
49
|
-
onClick: (e) => {
|
|
50
|
-
fn2(e);
|
|
51
|
-
fn1(e);
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
* ```
|
|
55
|
-
*/
|
|
56
1
|
export declare const combineProps: <T>(baseProps: T, newProps: T | Partial<T>, coverPropKeys?: (keyof T)[] | undefined) => NonNullable<T>;
|
|
57
|
-
/**
|
|
58
|
-
* Combine two classes
|
|
59
|
-
*
|
|
60
|
-
* @param baseClasses base classes you want to combine together
|
|
61
|
-
* @param newClasses new classes want to combine in to props
|
|
62
|
-
*
|
|
63
|
-
* @example
|
|
64
|
-
* ```ts
|
|
65
|
-
* combineClasses(
|
|
66
|
-
{
|
|
67
|
-
root: 'a1',
|
|
68
|
-
input: 'a1',
|
|
69
|
-
un1: undefined,
|
|
70
|
-
un2: 'a4',
|
|
71
|
-
},
|
|
72
|
-
{
|
|
73
|
-
root: 'a1',
|
|
74
|
-
input: 'a2',
|
|
75
|
-
un1: 'a3',
|
|
76
|
-
un2: undefined,
|
|
77
|
-
un3: 'a5',
|
|
78
|
-
},
|
|
79
|
-
)
|
|
80
|
-
// output result:
|
|
81
|
-
{
|
|
82
|
-
root: 'a1 a1',
|
|
83
|
-
input: 'a1 a2',
|
|
84
|
-
un1: 'a3',
|
|
85
|
-
un2: 'a4',
|
|
86
|
-
un3: 'a5',
|
|
87
|
-
}
|
|
88
|
-
* ```
|
|
89
|
-
*/
|
|
90
2
|
export declare const combineClasses: <T>(baseClasses: T, newClasses: T | Partial<T>) => NonNullable<T>;
|
|
@@ -1,6 +1,3 @@
|
|
|
1
1
|
import { MutableRefObject, RefObject } from 'react';
|
|
2
2
|
export declare type RefOrElementOrCallback<T = HTMLElement> = RefObject<T> | (() => T) | T;
|
|
3
|
-
/**
|
|
4
|
-
* get element from React ref or callback
|
|
5
|
-
*/
|
|
6
3
|
export declare const getRefElement: <T>(ref: T) => T extends () => infer R ? R : T extends RefObject<infer C> | MutableRefObject<infer C> ? C : T;
|
|
@@ -1,9 +1 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Conditionally apply a workaround for the CSS transition bug in Safari 15.4 / WebKit browsers.
|
|
3
|
-
* Remove this workaround once the WebKit bug fix is released.
|
|
4
|
-
*
|
|
5
|
-
* follow up:
|
|
6
|
-
* https://github.com/mui/material-ui/pull/31975/files
|
|
7
|
-
* https://github.com/mui/material-ui/pull/32202/files
|
|
8
|
-
*/
|
|
9
1
|
export declare const isWebKit154: boolean;
|
package/src/utils/omit.d.ts
CHANGED
package/src/utils/outerSize.d.ts
CHANGED
package/src/utils/pick.d.ts
CHANGED
|
@@ -1,35 +1,7 @@
|
|
|
1
1
|
import { RefOrElementOrCallback } from './getRefElement';
|
|
2
2
|
declare type RemoveClassNameOptions = {
|
|
3
|
-
/**
|
|
4
|
-
* make replace also scan child nodes
|
|
5
|
-
*
|
|
6
|
-
* @default false
|
|
7
|
-
*/
|
|
8
3
|
scanChildren?: boolean;
|
|
9
|
-
/**
|
|
10
|
-
* is that should fullMatch class name
|
|
11
|
-
*
|
|
12
|
-
* @default false
|
|
13
|
-
*/
|
|
14
4
|
fullMatch?: boolean;
|
|
15
5
|
};
|
|
16
|
-
/**
|
|
17
|
-
* remove className from element, default will not scan child nodes, if you want to scan child nodes, set `scanChildren` to `true`.
|
|
18
|
-
*
|
|
19
|
-
* @param target target element reference or element or callback
|
|
20
|
-
* @param removeClass className to remove, default will use class `includes` to check, if you want to use full match, set `fullMatch` to `true`
|
|
21
|
-
*
|
|
22
|
-
* @example
|
|
23
|
-
* ```js
|
|
24
|
-
* elm => <div class="abc bcd efg abc-def"></div>
|
|
25
|
-
*
|
|
26
|
-
* removeClassName(elmRef, 'bcd');
|
|
27
|
-
*
|
|
28
|
-
* elm => <div class="abc efg abc-def"></div>
|
|
29
|
-
*
|
|
30
|
-
* removeClassName(elmRef, 'abc');
|
|
31
|
-
* elm => <div class="efg"></div>
|
|
32
|
-
* ```
|
|
33
|
-
*/
|
|
34
6
|
export declare function removeClassName(target: RefOrElementOrCallback, removeClass: string, { scanChildren, fullMatch }?: RemoveClassNameOptions): void;
|
|
35
7
|
export {};
|
|
@@ -1,12 +1,4 @@
|
|
|
1
1
|
import { KeyboardEvent } from 'react';
|
|
2
2
|
declare type KeyHandlers = Record<KeyboardEvent['key'], () => void>;
|
|
3
|
-
/**
|
|
4
|
-
* Executes the corresponding key handler function based on the provided keyboard event.
|
|
5
|
-
* If a handler is found for the pressed key, it will be invoked.
|
|
6
|
-
* Additionally, it prevents any side effects caused by the event, such as page scrolling.
|
|
7
|
-
*
|
|
8
|
-
* @param e - The keyboard event.
|
|
9
|
-
* @param keyHandlers - An object containing key-handler mappings.
|
|
10
|
-
*/
|
|
11
3
|
export declare const runKeyHandler: (e: KeyboardEvent<unknown>, keyHandlers: KeyHandlers) => void;
|
|
12
4
|
export {};
|
|
@@ -1,7 +1,4 @@
|
|
|
1
1
|
import { RefOrElementOrCallback } from './getRefElement';
|
|
2
|
-
/**
|
|
3
|
-
* get current input element selection position and is that selectRange state
|
|
4
|
-
*/
|
|
5
2
|
export declare function getSelectionPosition<T extends HTMLInputElement | HTMLTextAreaElement>(sourceTarget: RefOrElementOrCallback<T>): {
|
|
6
3
|
isSelectRange: boolean;
|
|
7
4
|
position: {
|
|
@@ -9,15 +6,10 @@ export declare function getSelectionPosition<T extends HTMLInputElement | HTMLTe
|
|
|
9
6
|
end: number;
|
|
10
7
|
};
|
|
11
8
|
};
|
|
12
|
-
/**
|
|
13
|
-
* set input element selection position position,
|
|
14
|
-
* if you need scroll that into view set `scrollIntoView` as true
|
|
15
|
-
*/
|
|
16
9
|
export declare function setSelectionPosition<T extends HTMLInputElement | HTMLTextAreaElement>(target: RefOrElementOrCallback<T>, options: {
|
|
17
10
|
start: number | null;
|
|
18
11
|
end: number | null;
|
|
19
12
|
direction?: 'forward' | 'backward' | 'none' | undefined;
|
|
20
13
|
scrollIntoView?: boolean;
|
|
21
14
|
}): void;
|
|
22
|
-
/** clean whole selection */
|
|
23
15
|
export declare function clearWindowSelection(): void;
|
package/src/utils/twMerge.d.ts
CHANGED