@udecode/react-utils 31.0.0 → 33.0.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/dist/index.d.mts +37 -43
- package/dist/index.d.ts +37 -43
- package/dist/index.js +27 -25
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +27 -25
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
|
-
declare const Box: React.ForwardRefExoticComponent<
|
|
3
|
+
declare const Box: React.ForwardRefExoticComponent<{
|
|
4
4
|
as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
|
|
5
5
|
asChild?: boolean | undefined;
|
|
6
|
-
} & React.RefAttributes<any>>;
|
|
6
|
+
} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<any>>;
|
|
7
7
|
type BoxProps = React.ComponentPropsWithRef<typeof Box>;
|
|
8
8
|
|
|
9
9
|
type PortalBodyProps = {
|
|
@@ -12,116 +12,110 @@ type PortalBodyProps = {
|
|
|
12
12
|
};
|
|
13
13
|
declare const PortalBody: ({ children, element, }: PortalBodyProps) => React.ReactPortal;
|
|
14
14
|
|
|
15
|
-
declare const Text: React.ForwardRefExoticComponent<
|
|
15
|
+
declare const Text: React.ForwardRefExoticComponent<{
|
|
16
16
|
as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
|
|
17
17
|
asChild?: boolean | undefined;
|
|
18
|
-
} & React.RefAttributes<any>>;
|
|
18
|
+
} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<any>>;
|
|
19
19
|
type TextProps = React.ComponentPropsWithRef<typeof Text>;
|
|
20
20
|
|
|
21
|
-
/**
|
|
22
|
-
* @see https://github.com/radix-ui/primitives/blob/b324ec2d7ddf13a2a115cb5b11478e24d2f45b87/packages/core/primitive/src/primitive.tsx#L1
|
|
23
|
-
*/
|
|
21
|
+
/** @see https://github.com/radix-ui/primitives/blob/b324ec2d7ddf13a2a115cb5b11478e24d2f45b87/packages/core/primitive/src/primitive.tsx#L1 */
|
|
24
22
|
declare const composeEventHandlers: <E>(originalEventHandler?: ((event: E) => void) | undefined, ourEventHandler?: ((event: E) => void) | undefined, { checkForDefaultPrevented }?: {
|
|
25
23
|
checkForDefaultPrevented?: boolean | undefined;
|
|
26
24
|
}) => (event: E) => void;
|
|
27
25
|
|
|
28
26
|
/**
|
|
29
|
-
* Primitive component factory. It uses hooks for managing
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
* - `asChild`: If true, the component will be rendered as a `Slot`
|
|
27
|
+
* Primitive component factory. It uses hooks for managing state and props, and
|
|
28
|
+
* forwards references to child components. Component props:
|
|
29
|
+
*
|
|
30
|
+
* - `asChild`: If true, the component will be rendered as a `Slot`
|
|
31
|
+
* {@link https://www.radix-ui.com/docs/primitives/utilities/slot}.
|
|
33
32
|
* - `options`: Options passed to the state hook.
|
|
34
33
|
* - `state`: Provide your state instead of using the state hook.
|
|
35
34
|
* - `className`: Class name to be merged to the component.
|
|
36
35
|
* - `style`: Style object to be merged to the component.
|
|
37
36
|
* - `setProps`: Function to set props from the props hook.
|
|
38
|
-
* - `...props`: Props to be passed to the component.
|
|
39
|
-
* Props hook return value:
|
|
37
|
+
* - `...props`: Props to be passed to the component. Props hook return value:
|
|
40
38
|
* - `ref`: Reference to be forwarded to the component.
|
|
41
39
|
* - `props`: Props to be passed to the component.
|
|
42
40
|
* - `hidden`: If true, the component will not be rendered.
|
|
43
41
|
*
|
|
44
|
-
* @param {React.ElementType} element The base component or native HTML element.
|
|
45
|
-
* @returns {function} A primitive component.
|
|
46
|
-
*
|
|
47
42
|
* @example
|
|
43
|
+
* const MyButton = createPrimitiveComponent(Button)({
|
|
44
|
+
* stateHook: useButtonState,
|
|
45
|
+
* propsHook: useButton,
|
|
46
|
+
* });
|
|
48
47
|
*
|
|
49
|
-
*
|
|
50
|
-
*
|
|
51
|
-
* propsHook: useButton
|
|
52
|
-
* });
|
|
48
|
+
* @param {React.ElementType} element The base component or native HTML element.
|
|
49
|
+
* @returns {function} A primitive component.
|
|
53
50
|
*/
|
|
54
51
|
declare const createPrimitiveComponent: <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>, P extends React.PropsWithoutRef<React.ComponentProps<T>>>(element: T) => <SH extends (options: any) => any, PH extends (state: any) => any>({ propsHook, stateHook, }?: {
|
|
55
|
-
stateHook?: SH | undefined;
|
|
56
52
|
propsHook?: PH | undefined;
|
|
53
|
+
stateHook?: SH | undefined;
|
|
57
54
|
}) => React.ForwardRefExoticComponent<React.PropsWithoutRef<{
|
|
58
55
|
as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
|
|
59
56
|
asChild?: boolean | undefined;
|
|
60
57
|
className?: string | undefined;
|
|
61
|
-
style?: React.CSSProperties | undefined;
|
|
62
58
|
options?: Parameters<SH>[0] | undefined;
|
|
63
|
-
state?: Parameters<PH>[0] | undefined;
|
|
64
59
|
setProps?: ((hookProps: NonNullable<ReturnType<PH>['props']>) => P) | undefined;
|
|
60
|
+
state?: Parameters<PH>[0] | undefined;
|
|
61
|
+
style?: React.CSSProperties | undefined;
|
|
65
62
|
} & P> & React.RefAttributes<any>>;
|
|
66
63
|
|
|
67
64
|
declare function createPrimitiveElement<T extends keyof HTMLElementTagNameMap>(tag: T): React.ForwardRefExoticComponent<React.PropsWithoutRef<JSX.IntrinsicElements[T]> & React.RefAttributes<HTMLElementTagNameMap[T]>>;
|
|
68
65
|
|
|
69
|
-
declare const createSlotComponent: <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>, P extends React.PropsWithoutRef<React.ComponentProps<T>>>(element: T) => React.ForwardRefExoticComponent<React.PropsWithoutRef<
|
|
66
|
+
declare const createSlotComponent: <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>, P extends React.PropsWithoutRef<React.ComponentProps<T>>>(element: T) => React.ForwardRefExoticComponent<React.PropsWithoutRef<{
|
|
70
67
|
as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
|
|
71
68
|
asChild?: boolean | undefined;
|
|
72
|
-
}> & React.RefAttributes<any>>;
|
|
69
|
+
} & P> & React.RefAttributes<any>>;
|
|
73
70
|
|
|
74
71
|
type PossibleRef<T> = React.Ref<T> | undefined;
|
|
75
72
|
/**
|
|
76
|
-
* A utility to compose multiple refs together
|
|
77
|
-
*
|
|
73
|
+
* A utility to compose multiple refs together Accepts callback refs and
|
|
74
|
+
* React.RefObject(s)
|
|
78
75
|
*/
|
|
79
76
|
declare const composeRefs: <T>(...refs: PossibleRef<T>[]) => (node: T) => void;
|
|
80
77
|
/**
|
|
81
|
-
* A custom hook that composes multiple refs
|
|
82
|
-
*
|
|
78
|
+
* A custom hook that composes multiple refs Accepts callback refs and
|
|
79
|
+
* React.RefObject(s)
|
|
83
80
|
*/
|
|
84
81
|
declare const useComposedRef: <T>(...refs: PossibleRef<T>[]) => (node: T) => void;
|
|
85
82
|
|
|
86
83
|
declare const CAN_USE_DOM: boolean;
|
|
87
84
|
/**
|
|
88
|
-
* Prevent warning on SSR by falling back to React.useEffect when DOM isn't
|
|
85
|
+
* Prevent warning on SSR by falling back to React.useEffect when DOM isn't
|
|
86
|
+
* available
|
|
89
87
|
*/
|
|
90
88
|
declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;
|
|
91
89
|
|
|
92
90
|
declare const DEFAULT_IGNORE_CLASS = "ignore-onclickoutside";
|
|
93
|
-
|
|
94
|
-
(event: T): void;
|
|
95
|
-
}
|
|
91
|
+
type UseOnClickOutsideCallback<T extends Event = Event> = (event: T) => void;
|
|
96
92
|
type El = HTMLElement;
|
|
97
93
|
type Refs = React.RefObject<El>[];
|
|
98
94
|
interface UseOnClickOutsideOptions {
|
|
99
|
-
|
|
95
|
+
detectIFrame?: boolean;
|
|
100
96
|
disabled?: boolean;
|
|
101
97
|
eventTypes?: string[];
|
|
102
98
|
excludeScrollbar?: boolean;
|
|
103
99
|
ignoreClass?: string | string[];
|
|
104
|
-
|
|
105
|
-
}
|
|
106
|
-
interface UseOnClickOutsideReturn {
|
|
107
|
-
(element: El | null): void;
|
|
100
|
+
refs?: Refs;
|
|
108
101
|
}
|
|
109
|
-
|
|
102
|
+
type UseOnClickOutsideReturn = (element: El | null) => void;
|
|
103
|
+
declare const useOnClickOutside: (callback: UseOnClickOutsideCallback, { detectIFrame, disabled, eventTypes, excludeScrollbar, ignoreClass, refs: refsOpt, }?: UseOnClickOutsideOptions) => UseOnClickOutsideReturn;
|
|
110
104
|
|
|
111
105
|
declare const useStableMemo: <T>(producer: () => T, deps?: React.DependencyList) => T;
|
|
112
106
|
|
|
113
107
|
/**
|
|
114
|
-
* Wrap a component into multiple providers.
|
|
115
|
-
*
|
|
116
|
-
* you can simply pass an array.
|
|
108
|
+
* Wrap a component into multiple providers. If there are any props that you
|
|
109
|
+
* want a provider to receive, you can simply pass an array.
|
|
117
110
|
*/
|
|
118
111
|
declare const withProviders: (...providers: any[]) => <T>(WrappedComponent: React.FC<T>) => (props: T) => any;
|
|
119
112
|
|
|
120
113
|
/**
|
|
121
114
|
* Shorter alternative to `React.forwardRef`.
|
|
115
|
+
*
|
|
122
116
|
* @generic1 Component type or element type
|
|
123
117
|
* @generic2 Extended prop types
|
|
124
118
|
*/
|
|
125
|
-
declare function withRef<T extends
|
|
119
|
+
declare function withRef<T extends React.ComponentType<any> | keyof HTMLElementTagNameMap, E = {}>(renderFunction: React.ForwardRefRenderFunction<React.ElementRef<T>, E & Omit<React.ComponentPropsWithoutRef<T>, keyof E>>): React.ForwardRefExoticComponent<React.PropsWithoutRef<E & Omit<React.PropsWithoutRef<React.ComponentProps<T>>, keyof E>> & React.RefAttributes<React.ElementRef<T>>>;
|
|
126
120
|
|
|
127
121
|
export { Box, type BoxProps, CAN_USE_DOM, DEFAULT_IGNORE_CLASS, PortalBody, type PortalBodyProps, Text, type TextProps, type UseOnClickOutsideCallback, type UseOnClickOutsideOptions, type UseOnClickOutsideReturn, composeEventHandlers, composeRefs, createPrimitiveComponent, createPrimitiveElement, createSlotComponent, useComposedRef, useIsomorphicLayoutEffect, useOnClickOutside, useStableMemo, withProviders, withRef };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
|
-
declare const Box: React.ForwardRefExoticComponent<
|
|
3
|
+
declare const Box: React.ForwardRefExoticComponent<{
|
|
4
4
|
as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
|
|
5
5
|
asChild?: boolean | undefined;
|
|
6
|
-
} & React.RefAttributes<any>>;
|
|
6
|
+
} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<any>>;
|
|
7
7
|
type BoxProps = React.ComponentPropsWithRef<typeof Box>;
|
|
8
8
|
|
|
9
9
|
type PortalBodyProps = {
|
|
@@ -12,116 +12,110 @@ type PortalBodyProps = {
|
|
|
12
12
|
};
|
|
13
13
|
declare const PortalBody: ({ children, element, }: PortalBodyProps) => React.ReactPortal;
|
|
14
14
|
|
|
15
|
-
declare const Text: React.ForwardRefExoticComponent<
|
|
15
|
+
declare const Text: React.ForwardRefExoticComponent<{
|
|
16
16
|
as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
|
|
17
17
|
asChild?: boolean | undefined;
|
|
18
|
-
} & React.RefAttributes<any>>;
|
|
18
|
+
} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<any>>;
|
|
19
19
|
type TextProps = React.ComponentPropsWithRef<typeof Text>;
|
|
20
20
|
|
|
21
|
-
/**
|
|
22
|
-
* @see https://github.com/radix-ui/primitives/blob/b324ec2d7ddf13a2a115cb5b11478e24d2f45b87/packages/core/primitive/src/primitive.tsx#L1
|
|
23
|
-
*/
|
|
21
|
+
/** @see https://github.com/radix-ui/primitives/blob/b324ec2d7ddf13a2a115cb5b11478e24d2f45b87/packages/core/primitive/src/primitive.tsx#L1 */
|
|
24
22
|
declare const composeEventHandlers: <E>(originalEventHandler?: ((event: E) => void) | undefined, ourEventHandler?: ((event: E) => void) | undefined, { checkForDefaultPrevented }?: {
|
|
25
23
|
checkForDefaultPrevented?: boolean | undefined;
|
|
26
24
|
}) => (event: E) => void;
|
|
27
25
|
|
|
28
26
|
/**
|
|
29
|
-
* Primitive component factory. It uses hooks for managing
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
* - `asChild`: If true, the component will be rendered as a `Slot`
|
|
27
|
+
* Primitive component factory. It uses hooks for managing state and props, and
|
|
28
|
+
* forwards references to child components. Component props:
|
|
29
|
+
*
|
|
30
|
+
* - `asChild`: If true, the component will be rendered as a `Slot`
|
|
31
|
+
* {@link https://www.radix-ui.com/docs/primitives/utilities/slot}.
|
|
33
32
|
* - `options`: Options passed to the state hook.
|
|
34
33
|
* - `state`: Provide your state instead of using the state hook.
|
|
35
34
|
* - `className`: Class name to be merged to the component.
|
|
36
35
|
* - `style`: Style object to be merged to the component.
|
|
37
36
|
* - `setProps`: Function to set props from the props hook.
|
|
38
|
-
* - `...props`: Props to be passed to the component.
|
|
39
|
-
* Props hook return value:
|
|
37
|
+
* - `...props`: Props to be passed to the component. Props hook return value:
|
|
40
38
|
* - `ref`: Reference to be forwarded to the component.
|
|
41
39
|
* - `props`: Props to be passed to the component.
|
|
42
40
|
* - `hidden`: If true, the component will not be rendered.
|
|
43
41
|
*
|
|
44
|
-
* @param {React.ElementType} element The base component or native HTML element.
|
|
45
|
-
* @returns {function} A primitive component.
|
|
46
|
-
*
|
|
47
42
|
* @example
|
|
43
|
+
* const MyButton = createPrimitiveComponent(Button)({
|
|
44
|
+
* stateHook: useButtonState,
|
|
45
|
+
* propsHook: useButton,
|
|
46
|
+
* });
|
|
48
47
|
*
|
|
49
|
-
*
|
|
50
|
-
*
|
|
51
|
-
* propsHook: useButton
|
|
52
|
-
* });
|
|
48
|
+
* @param {React.ElementType} element The base component or native HTML element.
|
|
49
|
+
* @returns {function} A primitive component.
|
|
53
50
|
*/
|
|
54
51
|
declare const createPrimitiveComponent: <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>, P extends React.PropsWithoutRef<React.ComponentProps<T>>>(element: T) => <SH extends (options: any) => any, PH extends (state: any) => any>({ propsHook, stateHook, }?: {
|
|
55
|
-
stateHook?: SH | undefined;
|
|
56
52
|
propsHook?: PH | undefined;
|
|
53
|
+
stateHook?: SH | undefined;
|
|
57
54
|
}) => React.ForwardRefExoticComponent<React.PropsWithoutRef<{
|
|
58
55
|
as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
|
|
59
56
|
asChild?: boolean | undefined;
|
|
60
57
|
className?: string | undefined;
|
|
61
|
-
style?: React.CSSProperties | undefined;
|
|
62
58
|
options?: Parameters<SH>[0] | undefined;
|
|
63
|
-
state?: Parameters<PH>[0] | undefined;
|
|
64
59
|
setProps?: ((hookProps: NonNullable<ReturnType<PH>['props']>) => P) | undefined;
|
|
60
|
+
state?: Parameters<PH>[0] | undefined;
|
|
61
|
+
style?: React.CSSProperties | undefined;
|
|
65
62
|
} & P> & React.RefAttributes<any>>;
|
|
66
63
|
|
|
67
64
|
declare function createPrimitiveElement<T extends keyof HTMLElementTagNameMap>(tag: T): React.ForwardRefExoticComponent<React.PropsWithoutRef<JSX.IntrinsicElements[T]> & React.RefAttributes<HTMLElementTagNameMap[T]>>;
|
|
68
65
|
|
|
69
|
-
declare const createSlotComponent: <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>, P extends React.PropsWithoutRef<React.ComponentProps<T>>>(element: T) => React.ForwardRefExoticComponent<React.PropsWithoutRef<
|
|
66
|
+
declare const createSlotComponent: <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>, P extends React.PropsWithoutRef<React.ComponentProps<T>>>(element: T) => React.ForwardRefExoticComponent<React.PropsWithoutRef<{
|
|
70
67
|
as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
|
|
71
68
|
asChild?: boolean | undefined;
|
|
72
|
-
}> & React.RefAttributes<any>>;
|
|
69
|
+
} & P> & React.RefAttributes<any>>;
|
|
73
70
|
|
|
74
71
|
type PossibleRef<T> = React.Ref<T> | undefined;
|
|
75
72
|
/**
|
|
76
|
-
* A utility to compose multiple refs together
|
|
77
|
-
*
|
|
73
|
+
* A utility to compose multiple refs together Accepts callback refs and
|
|
74
|
+
* React.RefObject(s)
|
|
78
75
|
*/
|
|
79
76
|
declare const composeRefs: <T>(...refs: PossibleRef<T>[]) => (node: T) => void;
|
|
80
77
|
/**
|
|
81
|
-
* A custom hook that composes multiple refs
|
|
82
|
-
*
|
|
78
|
+
* A custom hook that composes multiple refs Accepts callback refs and
|
|
79
|
+
* React.RefObject(s)
|
|
83
80
|
*/
|
|
84
81
|
declare const useComposedRef: <T>(...refs: PossibleRef<T>[]) => (node: T) => void;
|
|
85
82
|
|
|
86
83
|
declare const CAN_USE_DOM: boolean;
|
|
87
84
|
/**
|
|
88
|
-
* Prevent warning on SSR by falling back to React.useEffect when DOM isn't
|
|
85
|
+
* Prevent warning on SSR by falling back to React.useEffect when DOM isn't
|
|
86
|
+
* available
|
|
89
87
|
*/
|
|
90
88
|
declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;
|
|
91
89
|
|
|
92
90
|
declare const DEFAULT_IGNORE_CLASS = "ignore-onclickoutside";
|
|
93
|
-
|
|
94
|
-
(event: T): void;
|
|
95
|
-
}
|
|
91
|
+
type UseOnClickOutsideCallback<T extends Event = Event> = (event: T) => void;
|
|
96
92
|
type El = HTMLElement;
|
|
97
93
|
type Refs = React.RefObject<El>[];
|
|
98
94
|
interface UseOnClickOutsideOptions {
|
|
99
|
-
|
|
95
|
+
detectIFrame?: boolean;
|
|
100
96
|
disabled?: boolean;
|
|
101
97
|
eventTypes?: string[];
|
|
102
98
|
excludeScrollbar?: boolean;
|
|
103
99
|
ignoreClass?: string | string[];
|
|
104
|
-
|
|
105
|
-
}
|
|
106
|
-
interface UseOnClickOutsideReturn {
|
|
107
|
-
(element: El | null): void;
|
|
100
|
+
refs?: Refs;
|
|
108
101
|
}
|
|
109
|
-
|
|
102
|
+
type UseOnClickOutsideReturn = (element: El | null) => void;
|
|
103
|
+
declare const useOnClickOutside: (callback: UseOnClickOutsideCallback, { detectIFrame, disabled, eventTypes, excludeScrollbar, ignoreClass, refs: refsOpt, }?: UseOnClickOutsideOptions) => UseOnClickOutsideReturn;
|
|
110
104
|
|
|
111
105
|
declare const useStableMemo: <T>(producer: () => T, deps?: React.DependencyList) => T;
|
|
112
106
|
|
|
113
107
|
/**
|
|
114
|
-
* Wrap a component into multiple providers.
|
|
115
|
-
*
|
|
116
|
-
* you can simply pass an array.
|
|
108
|
+
* Wrap a component into multiple providers. If there are any props that you
|
|
109
|
+
* want a provider to receive, you can simply pass an array.
|
|
117
110
|
*/
|
|
118
111
|
declare const withProviders: (...providers: any[]) => <T>(WrappedComponent: React.FC<T>) => (props: T) => any;
|
|
119
112
|
|
|
120
113
|
/**
|
|
121
114
|
* Shorter alternative to `React.forwardRef`.
|
|
115
|
+
*
|
|
122
116
|
* @generic1 Component type or element type
|
|
123
117
|
* @generic2 Extended prop types
|
|
124
118
|
*/
|
|
125
|
-
declare function withRef<T extends
|
|
119
|
+
declare function withRef<T extends React.ComponentType<any> | keyof HTMLElementTagNameMap, E = {}>(renderFunction: React.ForwardRefRenderFunction<React.ElementRef<T>, E & Omit<React.ComponentPropsWithoutRef<T>, keyof E>>): React.ForwardRefExoticComponent<React.PropsWithoutRef<E & Omit<React.PropsWithoutRef<React.ComponentProps<T>>, keyof E>> & React.RefAttributes<React.ElementRef<T>>>;
|
|
126
120
|
|
|
127
121
|
export { Box, type BoxProps, CAN_USE_DOM, DEFAULT_IGNORE_CLASS, PortalBody, type PortalBodyProps, Text, type TextProps, type UseOnClickOutsideCallback, type UseOnClickOutsideOptions, type UseOnClickOutsideReturn, composeEventHandlers, composeRefs, createPrimitiveComponent, createPrimitiveElement, createSlotComponent, useComposedRef, useIsomorphicLayoutEffect, useOnClickOutside, useStableMemo, withProviders, withRef };
|
package/dist/index.js
CHANGED
|
@@ -83,8 +83,8 @@ var import_react = __toESM(require("react"));
|
|
|
83
83
|
var import_react_slot = require("@radix-ui/react-slot");
|
|
84
84
|
var createSlotComponent = (element) => (
|
|
85
85
|
// eslint-disable-next-line react/display-name
|
|
86
|
-
import_react.default.forwardRef((
|
|
87
|
-
var _b =
|
|
86
|
+
import_react.default.forwardRef((_a2, ref) => {
|
|
87
|
+
var _b = _a2, { as, asChild = false } = _b, props = __objRest(_b, ["as", "asChild"]);
|
|
88
88
|
const Comp = asChild ? import_react_slot.Slot : as || element;
|
|
89
89
|
return /* @__PURE__ */ import_react.default.createElement(Comp, __spreadValues({ ref }, props));
|
|
90
90
|
})
|
|
@@ -144,27 +144,27 @@ var createPrimitiveComponent = (element) => {
|
|
|
144
144
|
stateHook
|
|
145
145
|
} = {}) => {
|
|
146
146
|
return import_react4.default.forwardRef(
|
|
147
|
-
(
|
|
148
|
-
var _b =
|
|
147
|
+
(_a2, ref) => {
|
|
148
|
+
var _b = _a2, {
|
|
149
149
|
asChild,
|
|
150
|
-
options,
|
|
151
|
-
state: stateProp,
|
|
152
150
|
className: classNameProp,
|
|
153
|
-
getClassName
|
|
151
|
+
getClassName,
|
|
152
|
+
options,
|
|
153
|
+
state: stateProp
|
|
154
154
|
} = _b, props = __objRest(_b, [
|
|
155
155
|
"asChild",
|
|
156
|
-
"options",
|
|
157
|
-
"state",
|
|
158
156
|
"className",
|
|
159
|
-
"getClassName"
|
|
157
|
+
"getClassName",
|
|
158
|
+
"options",
|
|
159
|
+
"state"
|
|
160
160
|
]);
|
|
161
|
-
var
|
|
161
|
+
var _a3, _b2;
|
|
162
162
|
const state = (0, import_utils.isDefined)(stateProp) ? stateProp : stateHook ? stateHook(options) : void 0;
|
|
163
163
|
const {
|
|
164
|
-
|
|
164
|
+
hidden,
|
|
165
165
|
props: hookProps,
|
|
166
|
-
|
|
167
|
-
} = propsHook ? propsHook(state) : {
|
|
166
|
+
ref: hookRef
|
|
167
|
+
} = propsHook ? propsHook(state) : { hidden: false, props: {}, ref: null };
|
|
168
168
|
const _ref = useComposedRef(ref, hookRef);
|
|
169
169
|
const className = (0, import_utils.isDefined)(hookProps == null ? void 0 : hookProps.className) || (0, import_utils.isDefined)(classNameProp) ? (0, import_clsx.clsx)(hookProps == null ? void 0 : hookProps.className, classNameProp) : void 0;
|
|
170
170
|
const style = (hookProps == null ? void 0 : hookProps.style) || props.style ? __spreadValues(__spreadValues({}, hookProps == null ? void 0 : hookProps.style), props.style) : void 0;
|
|
@@ -173,12 +173,12 @@ var createPrimitiveComponent = (element) => {
|
|
|
173
173
|
return /* @__PURE__ */ import_react4.default.createElement(
|
|
174
174
|
Comp,
|
|
175
175
|
__spreadValues(__spreadValues(__spreadProps(__spreadValues({
|
|
176
|
-
|
|
177
|
-
|
|
176
|
+
asChild,
|
|
177
|
+
ref: _ref
|
|
178
178
|
}, hookProps), {
|
|
179
179
|
className,
|
|
180
180
|
style
|
|
181
|
-
}), props), (_b2 = (
|
|
181
|
+
}), props), (_b2 = (_a3 = props.setProps) == null ? void 0 : _a3.call(props, hookProps != null ? hookProps : {})) != null ? _b2 : {})
|
|
182
182
|
);
|
|
183
183
|
}
|
|
184
184
|
);
|
|
@@ -197,7 +197,8 @@ function createPrimitiveElement(tag) {
|
|
|
197
197
|
|
|
198
198
|
// src/useIsomorphicLayoutEffect.ts
|
|
199
199
|
var import_react6 = __toESM(require("react"));
|
|
200
|
-
var
|
|
200
|
+
var _a;
|
|
201
|
+
var CAN_USE_DOM = typeof window !== "undefined" && ((_a = window.document) == null ? void 0 : _a.createElement) !== void 0;
|
|
201
202
|
var useIsomorphicLayoutEffect = CAN_USE_DOM ? import_react6.default.useLayoutEffect : import_react6.default.useEffect;
|
|
202
203
|
|
|
203
204
|
// src/useOnClickOutside.ts
|
|
@@ -219,8 +220,8 @@ var canUsePassiveEvents = () => {
|
|
|
219
220
|
};
|
|
220
221
|
var DEFAULT_IGNORE_CLASS = "ignore-onclickoutside";
|
|
221
222
|
var checkClass = (el, cl) => {
|
|
222
|
-
var
|
|
223
|
-
return (
|
|
223
|
+
var _a2;
|
|
224
|
+
return (_a2 = el.classList) == null ? void 0 : _a2.contains(cl);
|
|
224
225
|
};
|
|
225
226
|
var hasIgnoreClass = (e, ignoreClass) => {
|
|
226
227
|
let el = e.target || e;
|
|
@@ -238,12 +239,12 @@ var hasIgnoreClass = (e, ignoreClass) => {
|
|
|
238
239
|
var clickedOnScrollbar = (e) => document.documentElement.clientWidth <= e.clientX || document.documentElement.clientHeight <= e.clientY;
|
|
239
240
|
var getEventOptions = (type) => type.includes("touch") && canUsePassiveEvents() ? { passive: true } : false;
|
|
240
241
|
var useOnClickOutside = (callback, {
|
|
241
|
-
|
|
242
|
+
detectIFrame = true,
|
|
242
243
|
disabled,
|
|
243
244
|
eventTypes = ["mousedown", "touchstart"],
|
|
244
245
|
excludeScrollbar,
|
|
245
246
|
ignoreClass = DEFAULT_IGNORE_CLASS,
|
|
246
|
-
|
|
247
|
+
refs: refsOpt
|
|
247
248
|
} = {}) => {
|
|
248
249
|
const [refsState, setRefsState] = import_react7.default.useState([]);
|
|
249
250
|
const callbackRef = import_react7.default.useRef(callback);
|
|
@@ -277,9 +278,10 @@ var useOnClickOutside = (callback, {
|
|
|
277
278
|
);
|
|
278
279
|
const removeEventListener = () => {
|
|
279
280
|
eventTypes.forEach(
|
|
280
|
-
(type) => (
|
|
281
|
-
|
|
282
|
-
|
|
281
|
+
(type) => document.removeEventListener(
|
|
282
|
+
type,
|
|
283
|
+
handler,
|
|
284
|
+
getEventOptions(type)
|
|
283
285
|
)
|
|
284
286
|
);
|
|
285
287
|
if (detectIFrame)
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/createSlotComponent.tsx","../src/Box.tsx","../src/PortalBody.tsx","../src/Text.tsx","../src/composeEventHandlers.ts","../src/createPrimitiveComponent.tsx","../src/useComposedRef.ts","../src/createPrimitiveElement.tsx","../src/useIsomorphicLayoutEffect.ts","../src/useOnClickOutside.ts","../src/useStableMemo.ts","../src/withProviders.tsx","../src/withRef.tsx"],"sourcesContent":["/**\n * @file Automatically generated by barrelsby.\n */\n\nexport * from './Box';\nexport * from './PortalBody';\nexport * from './Text';\nexport * from './composeEventHandlers';\nexport * from './createPrimitiveComponent';\nexport * from './createPrimitiveElement';\nexport * from './createSlotComponent';\nexport * from './useComposedRef';\nexport * from './useIsomorphicLayoutEffect';\nexport * from './useOnClickOutside';\nexport * from './useStableMemo';\nexport * from './withProviders';\nexport * from './withRef';\n","import React from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nexport const createSlotComponent = <\n T extends React.ElementType,\n P extends React.ComponentPropsWithoutRef<T>,\n>(\n element: T\n) =>\n // eslint-disable-next-line react/display-name\n React.forwardRef<\n any,\n P & {\n as?: React.ElementType;\n asChild?: boolean;\n }\n >(({ as, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : (as as T) || element;\n\n return <Comp ref={ref} {...props} />;\n });\n","import React from 'react';\n\nimport { createSlotComponent } from './createSlotComponent';\n\nexport const Box = createSlotComponent('div');\n\nexport type BoxProps = React.ComponentPropsWithRef<typeof Box>;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\n\nexport type PortalBodyProps = { children: React.ReactNode; element?: Element };\n\nexport const PortalBody: ({\n children,\n element,\n}: PortalBodyProps) => React.ReactPortal = ({\n children,\n element,\n}: PortalBodyProps) => {\n const container =\n element || typeof window !== 'undefined' ? document.body : undefined;\n if (!container) return (<>{children}</>) as any;\n\n return ReactDOM.createPortal(children, element || document.body);\n};\n","import React from 'react';\n\nimport { createSlotComponent } from './createSlotComponent';\n\nexport const Text = createSlotComponent('span');\n\nexport type TextProps = React.ComponentPropsWithRef<typeof Text>;\n","/**\n * @see https://github.com/radix-ui/primitives/blob/b324ec2d7ddf13a2a115cb5b11478e24d2f45b87/packages/core/primitive/src/primitive.tsx#L1\n */\nexport const composeEventHandlers =\n <E>(\n originalEventHandler?: (event: E) => void,\n ourEventHandler?: (event: E) => void,\n { checkForDefaultPrevented = true } = {}\n ) =>\n (event: E) => {\n originalEventHandler?.(event);\n\n if (\n checkForDefaultPrevented === false ||\n !(event as unknown as Event).defaultPrevented\n ) {\n return ourEventHandler?.(event);\n }\n };\n","/* eslint-disable react/display-name */\n\nimport React from 'react';\nimport { isDefined } from '@udecode/utils';\nimport { clsx } from 'clsx';\n\nimport { createSlotComponent } from './createSlotComponent';\nimport { useComposedRef } from './useComposedRef';\n\n/**\n * Primitive component factory. It uses hooks for managing\n * state and props, and forwards references to child components.\n * Component props:\n * - `asChild`: If true, the component will be rendered as a `Slot` {@link https://www.radix-ui.com/docs/primitives/utilities/slot}.\n * - `options`: Options passed to the state hook.\n * - `state`: Provide your state instead of using the state hook.\n * - `className`: Class name to be merged to the component.\n * - `style`: Style object to be merged to the component.\n * - `setProps`: Function to set props from the props hook.\n * - `...props`: Props to be passed to the component.\n * Props hook return value:\n * - `ref`: Reference to be forwarded to the component.\n * - `props`: Props to be passed to the component.\n * - `hidden`: If true, the component will not be rendered.\n *\n * @param {React.ElementType} element The base component or native HTML element.\n * @returns {function} A primitive component.\n *\n * @example\n *\n * const MyButton = createPrimitiveComponent(Button)({\n * stateHook: useButtonState,\n * propsHook: useButton\n * });\n */\nexport const createPrimitiveComponent = <\n T extends React.ElementType,\n P extends React.ComponentPropsWithoutRef<T>,\n>(\n element: T\n) => {\n const Comp = createSlotComponent<T, P>(element);\n\n return <SH extends (options: any) => any, PH extends (state: any) => any>({\n propsHook,\n stateHook,\n }: {\n stateHook?: SH;\n propsHook?: PH;\n } = {}) => {\n return React.forwardRef<\n any,\n {\n as?: React.ElementType;\n asChild?: boolean;\n className?: string;\n style?: React.CSSProperties;\n options?: Parameters<SH>[0];\n state?: Parameters<PH>[0];\n setProps?: (hookProps: NonNullable<ReturnType<PH>['props']>) => P;\n } & P\n >(\n (\n {\n asChild,\n options,\n state: stateProp,\n className: classNameProp,\n getClassName,\n ...props\n },\n ref\n ) => {\n const state = isDefined(stateProp)\n ? stateProp\n : stateHook\n ? stateHook(options as any)\n : undefined;\n const {\n ref: hookRef,\n props: hookProps,\n hidden,\n } = propsHook\n ? propsHook(state)\n : { props: {}, hidden: false, ref: null };\n\n const _ref = useComposedRef(ref, hookRef);\n const className =\n isDefined(hookProps?.className) || isDefined(classNameProp)\n ? clsx(hookProps?.className, classNameProp)\n : undefined;\n const style =\n hookProps?.style || props.style\n ? { ...hookProps?.style, ...props.style }\n : undefined;\n\n if (!asChild && hidden) return null;\n\n return (\n <Comp\n ref={_ref}\n asChild={asChild}\n {...hookProps}\n className={className}\n style={style}\n {...props}\n {...(props.setProps?.(hookProps ?? {}) ?? {})}\n />\n );\n }\n );\n };\n};\n","import React from 'react';\n\ntype PossibleRef<T> = React.Ref<T> | undefined;\n\n/**\n * Set a given ref to a given value\n * This utility takes care of different types of refs: callback refs and React.RefObject(s)\n */\nconst setRef = <T>(ref: PossibleRef<T>, value: T) => {\n if (typeof ref === 'function') {\n ref(value);\n } else if (ref !== null && ref !== undefined) {\n (ref as React.MutableRefObject<T>).current = value;\n }\n};\n\n/**\n * A utility to compose multiple refs together\n * Accepts callback refs and React.RefObject(s)\n */\nexport const composeRefs =\n <T>(...refs: PossibleRef<T>[]) =>\n (node: T) =>\n refs.forEach((ref) => setRef(ref, node));\n\n/**\n * A custom hook that composes multiple refs\n * Accepts callback refs and React.RefObject(s)\n */\nexport const useComposedRef = <T>(...refs: PossibleRef<T>[]) => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n return React.useCallback(composeRefs(...refs), refs);\n};\n","import React from 'react';\n\nexport function createPrimitiveElement<T extends keyof HTMLElementTagNameMap>(\n tag: T\n) {\n return React.forwardRef<HTMLElementTagNameMap[T], JSX.IntrinsicElements[T]>(\n function CreateComponent(props, ref) {\n return React.createElement(tag, { ...props, ref });\n }\n );\n}\n","import React from 'react';\n\nexport const CAN_USE_DOM =\n typeof window !== 'undefined' &&\n window.document !== undefined &&\n window.document.createElement !== undefined;\n\n/**\n * Prevent warning on SSR by falling back to React.useEffect when DOM isn't available\n */\nexport const useIsomorphicLayoutEffect = CAN_USE_DOM\n ? React.useLayoutEffect\n : React.useEffect;\n","import React from 'react';\n\nconst canUsePassiveEvents = (): boolean => {\n if (\n typeof window === 'undefined' ||\n typeof window.addEventListener !== 'function'\n )\n return false;\n\n let passive = false;\n const options = Object.defineProperty({}, 'passive', {\n // eslint-disable-next-line getter-return\n get() {\n passive = true;\n },\n });\n const noop = () => null;\n\n window.addEventListener('test', noop, options);\n window.removeEventListener('test', noop, options);\n\n return passive;\n};\n\nexport const DEFAULT_IGNORE_CLASS = 'ignore-onclickoutside';\n\nexport interface UseOnClickOutsideCallback<T extends Event = Event> {\n (event: T): void;\n}\ntype El = HTMLElement;\ntype Refs = React.RefObject<El>[];\nexport interface UseOnClickOutsideOptions {\n refs?: Refs;\n disabled?: boolean;\n eventTypes?: string[];\n excludeScrollbar?: boolean;\n ignoreClass?: string | string[];\n detectIFrame?: boolean;\n}\n\nexport interface UseOnClickOutsideReturn {\n (element: El | null): void;\n}\n\nconst checkClass = (el: HTMLElement, cl: string): boolean =>\n el.classList?.contains(cl);\n\nconst hasIgnoreClass = (e: any, ignoreClass: string | string[]): boolean => {\n let el = e.target || e;\n\n while (el) {\n if (Array.isArray(ignoreClass)) {\n // eslint-disable-next-line no-loop-func\n if (ignoreClass.some((c) => checkClass(el, c))) return true;\n } else if (checkClass(el, ignoreClass)) {\n return true;\n }\n\n el = el.parentElement;\n }\n\n return false;\n};\n\nconst clickedOnScrollbar = (e: MouseEvent): boolean =>\n document.documentElement.clientWidth <= e.clientX ||\n document.documentElement.clientHeight <= e.clientY;\n\nconst getEventOptions = (type: string): { passive: boolean } | boolean =>\n type.includes('touch') && canUsePassiveEvents() ? { passive: true } : false;\n\nexport const useOnClickOutside = (\n callback: UseOnClickOutsideCallback,\n {\n refs: refsOpt,\n disabled,\n eventTypes = ['mousedown', 'touchstart'],\n excludeScrollbar,\n ignoreClass = DEFAULT_IGNORE_CLASS,\n detectIFrame = true,\n }: UseOnClickOutsideOptions = {}\n): UseOnClickOutsideReturn => {\n const [refsState, setRefsState] = React.useState<Refs>([]);\n const callbackRef = React.useRef(callback);\n callbackRef.current = callback;\n\n const ref: UseOnClickOutsideReturn = React.useCallback(\n (el) => setRefsState((prevState) => [...prevState, { current: el }]),\n []\n );\n\n React.useEffect(\n () => {\n if (!refsOpt?.length && refsState.length === 0) return;\n\n const getEls = () => {\n const els: El[] = [];\n (refsOpt || refsState).forEach(\n ({ current }) => current && els.push(current)\n );\n return els;\n };\n\n const handler = (e: any) => {\n if (\n !hasIgnoreClass(e, ignoreClass) &&\n !(excludeScrollbar && clickedOnScrollbar(e)) &&\n getEls().every((el) => !el.contains(e.target))\n )\n callbackRef.current(e);\n };\n\n const blurHandler = (e: FocusEvent) =>\n // On firefox the iframe becomes document.activeElement in the next event loop\n setTimeout(() => {\n const { activeElement } = document;\n\n if (\n activeElement?.tagName === 'IFRAME' &&\n !hasIgnoreClass(activeElement, ignoreClass) &&\n !getEls().includes(activeElement as HTMLIFrameElement)\n )\n callbackRef.current(e);\n }, 0);\n\n const removeEventListener = () => {\n eventTypes.forEach((type) =>\n // @ts-ignore\n document.removeEventListener(type, handler, getEventOptions(type))\n );\n\n if (detectIFrame) window.removeEventListener('blur', blurHandler);\n };\n\n if (disabled) {\n removeEventListener();\n return;\n }\n\n eventTypes.forEach((type) =>\n document.addEventListener(type, handler, getEventOptions(type))\n );\n\n if (detectIFrame) window.addEventListener('blur', blurHandler);\n\n // eslint-disable-next-line consistent-return\n return () => removeEventListener();\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [\n refsState,\n ignoreClass,\n excludeScrollbar,\n disabled,\n detectIFrame,\n // eslint-disable-next-line react-hooks/exhaustive-deps\n JSON.stringify(eventTypes),\n ]\n );\n\n return ref;\n};\n","import React from 'react';\n\nexport const useStableMemo = <T>(\n producer: () => T,\n deps?: React.DependencyList\n): T => {\n const [value, setValue] = React.useState(producer);\n\n React.useLayoutEffect(() => {\n setValue(producer);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, deps);\n\n return value;\n};\n","import React from 'react';\n\n/**\n * Wrap a component into multiple providers.\n * If there are any props that you want a provider to receive,\n * you can simply pass an array.\n */\nexport const withProviders =\n (...providers: any[]) =>\n <T,>(WrappedComponent: React.FC<T>) =>\n (props: T) =>\n providers.reduceRight(\n (acc, prov) => {\n let Provider = prov;\n if (Array.isArray(prov)) {\n [Provider] = prov;\n return <Provider {...prov[1]}>{acc}</Provider>;\n }\n\n return <Provider>{acc}</Provider>;\n },\n <WrappedComponent {...(props as any)} />\n );\n","import React from 'react';\n\n/**\n * Shorter alternative to `React.forwardRef`.\n * @generic1 Component type or element type\n * @generic2 Extended prop types\n */\nexport function withRef<\n T extends keyof HTMLElementTagNameMap | React.ComponentType<any>,\n E = {},\n>(\n renderFunction: React.ForwardRefRenderFunction<\n React.ElementRef<T>,\n React.ComponentPropsWithoutRef<T> & E\n >\n) {\n return React.forwardRef(renderFunction);\n}\n"],"mappings":"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","names":["React","import_react","React","ReactDOM","import_react","import_react","React","React","_a","_b","import_react","React","import_react","React","import_react","React","import_react","React","import_react","React","import_react","React"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/createSlotComponent.tsx","../src/Box.tsx","../src/PortalBody.tsx","../src/Text.tsx","../src/composeEventHandlers.ts","../src/createPrimitiveComponent.tsx","../src/useComposedRef.ts","../src/createPrimitiveElement.tsx","../src/useIsomorphicLayoutEffect.ts","../src/useOnClickOutside.ts","../src/useStableMemo.ts","../src/withProviders.tsx","../src/withRef.tsx"],"sourcesContent":["/** @file Automatically generated by barrelsby. */\n\nexport * from './Box';\nexport * from './PortalBody';\nexport * from './Text';\nexport * from './composeEventHandlers';\nexport * from './createPrimitiveComponent';\nexport * from './createPrimitiveElement';\nexport * from './createSlotComponent';\nexport * from './useComposedRef';\nexport * from './useIsomorphicLayoutEffect';\nexport * from './useOnClickOutside';\nexport * from './useStableMemo';\nexport * from './withProviders';\nexport * from './withRef';\n","import React from 'react';\n\nimport { Slot } from '@radix-ui/react-slot';\n\nexport const createSlotComponent = <\n T extends React.ElementType,\n P extends React.ComponentPropsWithoutRef<T>,\n>(\n element: T\n) =>\n // eslint-disable-next-line react/display-name\n React.forwardRef<\n any,\n {\n as?: React.ElementType;\n asChild?: boolean;\n } & P\n >(({ as, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : (as as T) || element;\n\n return <Comp ref={ref} {...props} />;\n });\n","import type React from 'react';\n\nimport { createSlotComponent } from './createSlotComponent';\n\nexport const Box = createSlotComponent('div');\n\nexport type BoxProps = React.ComponentPropsWithRef<typeof Box>;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\n\nexport type PortalBodyProps = { children: React.ReactNode; element?: Element };\n\nexport const PortalBody: ({\n children,\n element,\n}: PortalBodyProps) => React.ReactPortal = ({\n children,\n element,\n}: PortalBodyProps) => {\n const container =\n element || typeof window !== 'undefined' ? document.body : undefined;\n\n if (!container) return (<>{children}</>) as any;\n\n return ReactDOM.createPortal(children, element || document.body);\n};\n","import type React from 'react';\n\nimport { createSlotComponent } from './createSlotComponent';\n\nexport const Text = createSlotComponent('span');\n\nexport type TextProps = React.ComponentPropsWithRef<typeof Text>;\n","/** @see https://github.com/radix-ui/primitives/blob/b324ec2d7ddf13a2a115cb5b11478e24d2f45b87/packages/core/primitive/src/primitive.tsx#L1 */\nexport const composeEventHandlers =\n <E>(\n originalEventHandler?: (event: E) => void,\n ourEventHandler?: (event: E) => void,\n { checkForDefaultPrevented = true } = {}\n ) =>\n (event: E) => {\n originalEventHandler?.(event);\n\n if (\n checkForDefaultPrevented === false ||\n !(event as unknown as Event).defaultPrevented\n ) {\n return ourEventHandler?.(event);\n }\n };\n","/* eslint-disable react/display-name */\n\nimport React from 'react';\n\nimport { isDefined } from '@udecode/utils';\nimport { clsx } from 'clsx';\n\nimport { createSlotComponent } from './createSlotComponent';\nimport { useComposedRef } from './useComposedRef';\n\n/**\n * Primitive component factory. It uses hooks for managing state and props, and\n * forwards references to child components. Component props:\n *\n * - `asChild`: If true, the component will be rendered as a `Slot`\n * {@link https://www.radix-ui.com/docs/primitives/utilities/slot}.\n * - `options`: Options passed to the state hook.\n * - `state`: Provide your state instead of using the state hook.\n * - `className`: Class name to be merged to the component.\n * - `style`: Style object to be merged to the component.\n * - `setProps`: Function to set props from the props hook.\n * - `...props`: Props to be passed to the component. Props hook return value:\n * - `ref`: Reference to be forwarded to the component.\n * - `props`: Props to be passed to the component.\n * - `hidden`: If true, the component will not be rendered.\n *\n * @example\n * const MyButton = createPrimitiveComponent(Button)({\n * stateHook: useButtonState,\n * propsHook: useButton,\n * });\n *\n * @param {React.ElementType} element The base component or native HTML element.\n * @returns {function} A primitive component.\n */\nexport const createPrimitiveComponent = <\n T extends React.ElementType,\n P extends React.ComponentPropsWithoutRef<T>,\n>(\n element: T\n) => {\n const Comp = createSlotComponent<T, P>(element);\n\n return <SH extends (options: any) => any, PH extends (state: any) => any>({\n propsHook,\n stateHook,\n }: {\n propsHook?: PH;\n stateHook?: SH;\n } = {}) => {\n return React.forwardRef<\n any,\n {\n as?: React.ElementType;\n asChild?: boolean;\n className?: string;\n options?: Parameters<SH>[0];\n setProps?: (hookProps: NonNullable<ReturnType<PH>['props']>) => P;\n state?: Parameters<PH>[0];\n style?: React.CSSProperties;\n } & P\n >(\n (\n {\n asChild,\n className: classNameProp,\n getClassName,\n options,\n state: stateProp,\n ...props\n },\n ref\n ) => {\n const state = isDefined(stateProp)\n ? stateProp\n : stateHook\n ? stateHook(options as any)\n : undefined;\n const {\n hidden,\n props: hookProps,\n ref: hookRef,\n } = propsHook\n ? propsHook(state)\n : { hidden: false, props: {}, ref: null };\n\n const _ref = useComposedRef(ref, hookRef);\n const className =\n isDefined(hookProps?.className) || isDefined(classNameProp)\n ? clsx(hookProps?.className, classNameProp)\n : undefined;\n const style =\n hookProps?.style || props.style\n ? { ...hookProps?.style, ...props.style }\n : undefined;\n\n if (!asChild && hidden) return null;\n\n return (\n <Comp\n asChild={asChild}\n ref={_ref}\n {...hookProps}\n className={className}\n style={style}\n {...props}\n {...(props.setProps?.(hookProps ?? {}) ?? {})}\n />\n );\n }\n );\n };\n};\n","import React from 'react';\n\ntype PossibleRef<T> = React.Ref<T> | undefined;\n\n/**\n * Set a given ref to a given value This utility takes care of different types\n * of refs: callback refs and React.RefObject(s)\n */\nconst setRef = <T>(ref: PossibleRef<T>, value: T) => {\n if (typeof ref === 'function') {\n ref(value);\n } else if (ref !== null && ref !== undefined) {\n (ref as React.MutableRefObject<T>).current = value;\n }\n};\n\n/**\n * A utility to compose multiple refs together Accepts callback refs and\n * React.RefObject(s)\n */\nexport const composeRefs =\n <T>(...refs: PossibleRef<T>[]) =>\n (node: T) =>\n refs.forEach((ref) => setRef(ref, node));\n\n/**\n * A custom hook that composes multiple refs Accepts callback refs and\n * React.RefObject(s)\n */\nexport const useComposedRef = <T>(...refs: PossibleRef<T>[]) => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n return React.useCallback(composeRefs(...refs), refs);\n};\n","import React from 'react';\n\nexport function createPrimitiveElement<T extends keyof HTMLElementTagNameMap>(\n tag: T\n) {\n return React.forwardRef<HTMLElementTagNameMap[T], JSX.IntrinsicElements[T]>(\n function CreateComponent(props, ref) {\n return React.createElement(tag, { ...props, ref });\n }\n );\n}\n","import React from 'react';\n\nexport const CAN_USE_DOM =\n typeof window !== 'undefined' && window.document?.createElement !== undefined;\n\n/**\n * Prevent warning on SSR by falling back to React.useEffect when DOM isn't\n * available\n */\nexport const useIsomorphicLayoutEffect = CAN_USE_DOM\n ? React.useLayoutEffect\n : React.useEffect;\n","import React from 'react';\n\nconst canUsePassiveEvents = (): boolean => {\n if (\n typeof window === 'undefined' ||\n typeof window.addEventListener !== 'function'\n )\n return false;\n\n let passive = false;\n const options = Object.defineProperty({}, 'passive', {\n // eslint-disable-next-line getter-return\n get() {\n passive = true;\n },\n });\n const noop = () => null;\n\n window.addEventListener('test', noop, options);\n window.removeEventListener('test', noop, options);\n\n return passive;\n};\n\nexport const DEFAULT_IGNORE_CLASS = 'ignore-onclickoutside';\n\nexport type UseOnClickOutsideCallback<T extends Event = Event> = (\n event: T\n) => void;\n\ntype El = HTMLElement;\ntype Refs = React.RefObject<El>[];\n\nexport interface UseOnClickOutsideOptions {\n detectIFrame?: boolean;\n disabled?: boolean;\n eventTypes?: string[];\n excludeScrollbar?: boolean;\n ignoreClass?: string | string[];\n refs?: Refs;\n}\n\nexport type UseOnClickOutsideReturn = (element: El | null) => void;\n\nconst checkClass = (el: HTMLElement, cl: string): boolean =>\n el.classList?.contains(cl);\n\nconst hasIgnoreClass = (e: any, ignoreClass: string | string[]): boolean => {\n let el = e.target || e;\n\n while (el) {\n if (Array.isArray(ignoreClass)) {\n // eslint-disable-next-line no-loop-func\n if (ignoreClass.some((c) => checkClass(el, c))) return true;\n } else if (checkClass(el, ignoreClass)) {\n return true;\n }\n\n el = el.parentElement;\n }\n\n return false;\n};\n\nconst clickedOnScrollbar = (e: MouseEvent): boolean =>\n document.documentElement.clientWidth <= e.clientX ||\n document.documentElement.clientHeight <= e.clientY;\n\nconst getEventOptions = (type: string): { passive: boolean } | boolean =>\n type.includes('touch') && canUsePassiveEvents() ? { passive: true } : false;\n\nexport const useOnClickOutside = (\n callback: UseOnClickOutsideCallback,\n {\n detectIFrame = true,\n disabled,\n eventTypes = ['mousedown', 'touchstart'],\n excludeScrollbar,\n ignoreClass = DEFAULT_IGNORE_CLASS,\n refs: refsOpt,\n }: UseOnClickOutsideOptions = {}\n): UseOnClickOutsideReturn => {\n const [refsState, setRefsState] = React.useState<Refs>([]);\n const callbackRef = React.useRef(callback);\n callbackRef.current = callback;\n\n const ref: UseOnClickOutsideReturn = React.useCallback(\n (el) => setRefsState((prevState) => [...prevState, { current: el }]),\n []\n );\n\n React.useEffect(\n () => {\n if (!refsOpt?.length && refsState.length === 0) return;\n\n const getEls = () => {\n const els: El[] = [];\n (refsOpt || refsState).forEach(\n ({ current }) => current && els.push(current)\n );\n\n return els;\n };\n\n const handler = (e: any) => {\n if (\n !hasIgnoreClass(e, ignoreClass) &&\n !(excludeScrollbar && clickedOnScrollbar(e)) &&\n getEls().every((el) => !el.contains(e.target))\n )\n callbackRef.current(e);\n };\n\n const blurHandler = (e: FocusEvent) =>\n // On firefox the iframe becomes document.activeElement in the next event loop\n setTimeout(() => {\n const { activeElement } = document;\n\n if (\n activeElement?.tagName === 'IFRAME' &&\n !hasIgnoreClass(activeElement, ignoreClass) &&\n !getEls().includes(activeElement as HTMLIFrameElement)\n )\n callbackRef.current(e);\n }, 0);\n\n const removeEventListener = () => {\n eventTypes.forEach((type) =>\n document.removeEventListener(\n type,\n handler,\n getEventOptions(type) as any\n )\n );\n\n if (detectIFrame) window.removeEventListener('blur', blurHandler);\n };\n\n if (disabled) {\n removeEventListener();\n\n return;\n }\n\n eventTypes.forEach((type) =>\n document.addEventListener(type, handler, getEventOptions(type))\n );\n\n if (detectIFrame) window.addEventListener('blur', blurHandler);\n\n // eslint-disable-next-line consistent-return\n return () => removeEventListener();\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [\n refsState,\n ignoreClass,\n excludeScrollbar,\n disabled,\n detectIFrame,\n // eslint-disable-next-line react-hooks/exhaustive-deps\n JSON.stringify(eventTypes),\n ]\n );\n\n return ref;\n};\n","import React from 'react';\n\nexport const useStableMemo = <T>(\n producer: () => T,\n deps?: React.DependencyList\n): T => {\n const [value, setValue] = React.useState(producer);\n\n React.useLayoutEffect(() => {\n setValue(producer);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, deps);\n\n return value;\n};\n","import React from 'react';\n\n/**\n * Wrap a component into multiple providers. If there are any props that you\n * want a provider to receive, you can simply pass an array.\n */\nexport const withProviders =\n (...providers: any[]) =>\n <T,>(WrappedComponent: React.FC<T>) =>\n (props: T) =>\n providers.reduceRight(\n (acc, prov) => {\n let Provider = prov;\n\n if (Array.isArray(prov)) {\n [Provider] = prov;\n\n return <Provider {...prov[1]}>{acc}</Provider>;\n }\n\n return <Provider>{acc}</Provider>;\n },\n <WrappedComponent {...(props as any)} />\n );\n","import React from 'react';\n\n/**\n * Shorter alternative to `React.forwardRef`.\n *\n * @generic1 Component type or element type\n * @generic2 Extended prop types\n */\nexport function withRef<\n T extends React.ComponentType<any> | keyof HTMLElementTagNameMap,\n E = {},\n>(\n renderFunction: React.ForwardRefRenderFunction<\n React.ElementRef<T>,\n E & Omit<React.ComponentPropsWithoutRef<T>, keyof E>\n >\n) {\n return React.forwardRef(renderFunction);\n}\n"],"mappings":"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","names":["React","_a","import_react","React","ReactDOM","import_react","import_react","React","React","_a","_b","import_react","React","import_react","React","import_react","_a","React","import_react","React","import_react","React","import_react","React"]}
|
package/dist/index.mjs
CHANGED
|
@@ -35,8 +35,8 @@ import React from "react";
|
|
|
35
35
|
import { Slot } from "@radix-ui/react-slot";
|
|
36
36
|
var createSlotComponent = (element) => (
|
|
37
37
|
// eslint-disable-next-line react/display-name
|
|
38
|
-
React.forwardRef((
|
|
39
|
-
var _b =
|
|
38
|
+
React.forwardRef((_a2, ref) => {
|
|
39
|
+
var _b = _a2, { as, asChild = false } = _b, props = __objRest(_b, ["as", "asChild"]);
|
|
40
40
|
const Comp = asChild ? Slot : as || element;
|
|
41
41
|
return /* @__PURE__ */ React.createElement(Comp, __spreadValues({ ref }, props));
|
|
42
42
|
})
|
|
@@ -96,27 +96,27 @@ var createPrimitiveComponent = (element) => {
|
|
|
96
96
|
stateHook
|
|
97
97
|
} = {}) => {
|
|
98
98
|
return React4.forwardRef(
|
|
99
|
-
(
|
|
100
|
-
var _b =
|
|
99
|
+
(_a2, ref) => {
|
|
100
|
+
var _b = _a2, {
|
|
101
101
|
asChild,
|
|
102
|
-
options,
|
|
103
|
-
state: stateProp,
|
|
104
102
|
className: classNameProp,
|
|
105
|
-
getClassName
|
|
103
|
+
getClassName,
|
|
104
|
+
options,
|
|
105
|
+
state: stateProp
|
|
106
106
|
} = _b, props = __objRest(_b, [
|
|
107
107
|
"asChild",
|
|
108
|
-
"options",
|
|
109
|
-
"state",
|
|
110
108
|
"className",
|
|
111
|
-
"getClassName"
|
|
109
|
+
"getClassName",
|
|
110
|
+
"options",
|
|
111
|
+
"state"
|
|
112
112
|
]);
|
|
113
|
-
var
|
|
113
|
+
var _a3, _b2;
|
|
114
114
|
const state = isDefined(stateProp) ? stateProp : stateHook ? stateHook(options) : void 0;
|
|
115
115
|
const {
|
|
116
|
-
|
|
116
|
+
hidden,
|
|
117
117
|
props: hookProps,
|
|
118
|
-
|
|
119
|
-
} = propsHook ? propsHook(state) : {
|
|
118
|
+
ref: hookRef
|
|
119
|
+
} = propsHook ? propsHook(state) : { hidden: false, props: {}, ref: null };
|
|
120
120
|
const _ref = useComposedRef(ref, hookRef);
|
|
121
121
|
const className = isDefined(hookProps == null ? void 0 : hookProps.className) || isDefined(classNameProp) ? clsx(hookProps == null ? void 0 : hookProps.className, classNameProp) : void 0;
|
|
122
122
|
const style = (hookProps == null ? void 0 : hookProps.style) || props.style ? __spreadValues(__spreadValues({}, hookProps == null ? void 0 : hookProps.style), props.style) : void 0;
|
|
@@ -125,12 +125,12 @@ var createPrimitiveComponent = (element) => {
|
|
|
125
125
|
return /* @__PURE__ */ React4.createElement(
|
|
126
126
|
Comp,
|
|
127
127
|
__spreadValues(__spreadValues(__spreadProps(__spreadValues({
|
|
128
|
-
|
|
129
|
-
|
|
128
|
+
asChild,
|
|
129
|
+
ref: _ref
|
|
130
130
|
}, hookProps), {
|
|
131
131
|
className,
|
|
132
132
|
style
|
|
133
|
-
}), props), (_b2 = (
|
|
133
|
+
}), props), (_b2 = (_a3 = props.setProps) == null ? void 0 : _a3.call(props, hookProps != null ? hookProps : {})) != null ? _b2 : {})
|
|
134
134
|
);
|
|
135
135
|
}
|
|
136
136
|
);
|
|
@@ -149,7 +149,8 @@ function createPrimitiveElement(tag) {
|
|
|
149
149
|
|
|
150
150
|
// src/useIsomorphicLayoutEffect.ts
|
|
151
151
|
import React6 from "react";
|
|
152
|
-
var
|
|
152
|
+
var _a;
|
|
153
|
+
var CAN_USE_DOM = typeof window !== "undefined" && ((_a = window.document) == null ? void 0 : _a.createElement) !== void 0;
|
|
153
154
|
var useIsomorphicLayoutEffect = CAN_USE_DOM ? React6.useLayoutEffect : React6.useEffect;
|
|
154
155
|
|
|
155
156
|
// src/useOnClickOutside.ts
|
|
@@ -171,8 +172,8 @@ var canUsePassiveEvents = () => {
|
|
|
171
172
|
};
|
|
172
173
|
var DEFAULT_IGNORE_CLASS = "ignore-onclickoutside";
|
|
173
174
|
var checkClass = (el, cl) => {
|
|
174
|
-
var
|
|
175
|
-
return (
|
|
175
|
+
var _a2;
|
|
176
|
+
return (_a2 = el.classList) == null ? void 0 : _a2.contains(cl);
|
|
176
177
|
};
|
|
177
178
|
var hasIgnoreClass = (e, ignoreClass) => {
|
|
178
179
|
let el = e.target || e;
|
|
@@ -190,12 +191,12 @@ var hasIgnoreClass = (e, ignoreClass) => {
|
|
|
190
191
|
var clickedOnScrollbar = (e) => document.documentElement.clientWidth <= e.clientX || document.documentElement.clientHeight <= e.clientY;
|
|
191
192
|
var getEventOptions = (type) => type.includes("touch") && canUsePassiveEvents() ? { passive: true } : false;
|
|
192
193
|
var useOnClickOutside = (callback, {
|
|
193
|
-
|
|
194
|
+
detectIFrame = true,
|
|
194
195
|
disabled,
|
|
195
196
|
eventTypes = ["mousedown", "touchstart"],
|
|
196
197
|
excludeScrollbar,
|
|
197
198
|
ignoreClass = DEFAULT_IGNORE_CLASS,
|
|
198
|
-
|
|
199
|
+
refs: refsOpt
|
|
199
200
|
} = {}) => {
|
|
200
201
|
const [refsState, setRefsState] = React7.useState([]);
|
|
201
202
|
const callbackRef = React7.useRef(callback);
|
|
@@ -229,9 +230,10 @@ var useOnClickOutside = (callback, {
|
|
|
229
230
|
);
|
|
230
231
|
const removeEventListener = () => {
|
|
231
232
|
eventTypes.forEach(
|
|
232
|
-
(type) => (
|
|
233
|
-
|
|
234
|
-
|
|
233
|
+
(type) => document.removeEventListener(
|
|
234
|
+
type,
|
|
235
|
+
handler,
|
|
236
|
+
getEventOptions(type)
|
|
235
237
|
)
|
|
236
238
|
);
|
|
237
239
|
if (detectIFrame)
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/createSlotComponent.tsx","../src/Box.tsx","../src/PortalBody.tsx","../src/Text.tsx","../src/composeEventHandlers.ts","../src/createPrimitiveComponent.tsx","../src/useComposedRef.ts","../src/createPrimitiveElement.tsx","../src/useIsomorphicLayoutEffect.ts","../src/useOnClickOutside.ts","../src/useStableMemo.ts","../src/withProviders.tsx","../src/withRef.tsx"],"sourcesContent":["import React from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nexport const createSlotComponent = <\n T extends React.ElementType,\n P extends React.ComponentPropsWithoutRef<T>,\n>(\n element: T\n) =>\n // eslint-disable-next-line react/display-name\n React.forwardRef<\n any,\n P & {\n as?: React.ElementType;\n asChild?: boolean;\n }\n >(({ as, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : (as as T) || element;\n\n return <Comp ref={ref} {...props} />;\n });\n","import React from 'react';\n\nimport { createSlotComponent } from './createSlotComponent';\n\nexport const Box = createSlotComponent('div');\n\nexport type BoxProps = React.ComponentPropsWithRef<typeof Box>;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\n\nexport type PortalBodyProps = { children: React.ReactNode; element?: Element };\n\nexport const PortalBody: ({\n children,\n element,\n}: PortalBodyProps) => React.ReactPortal = ({\n children,\n element,\n}: PortalBodyProps) => {\n const container =\n element || typeof window !== 'undefined' ? document.body : undefined;\n if (!container) return (<>{children}</>) as any;\n\n return ReactDOM.createPortal(children, element || document.body);\n};\n","import React from 'react';\n\nimport { createSlotComponent } from './createSlotComponent';\n\nexport const Text = createSlotComponent('span');\n\nexport type TextProps = React.ComponentPropsWithRef<typeof Text>;\n","/**\n * @see https://github.com/radix-ui/primitives/blob/b324ec2d7ddf13a2a115cb5b11478e24d2f45b87/packages/core/primitive/src/primitive.tsx#L1\n */\nexport const composeEventHandlers =\n <E>(\n originalEventHandler?: (event: E) => void,\n ourEventHandler?: (event: E) => void,\n { checkForDefaultPrevented = true } = {}\n ) =>\n (event: E) => {\n originalEventHandler?.(event);\n\n if (\n checkForDefaultPrevented === false ||\n !(event as unknown as Event).defaultPrevented\n ) {\n return ourEventHandler?.(event);\n }\n };\n","/* eslint-disable react/display-name */\n\nimport React from 'react';\nimport { isDefined } from '@udecode/utils';\nimport { clsx } from 'clsx';\n\nimport { createSlotComponent } from './createSlotComponent';\nimport { useComposedRef } from './useComposedRef';\n\n/**\n * Primitive component factory. It uses hooks for managing\n * state and props, and forwards references to child components.\n * Component props:\n * - `asChild`: If true, the component will be rendered as a `Slot` {@link https://www.radix-ui.com/docs/primitives/utilities/slot}.\n * - `options`: Options passed to the state hook.\n * - `state`: Provide your state instead of using the state hook.\n * - `className`: Class name to be merged to the component.\n * - `style`: Style object to be merged to the component.\n * - `setProps`: Function to set props from the props hook.\n * - `...props`: Props to be passed to the component.\n * Props hook return value:\n * - `ref`: Reference to be forwarded to the component.\n * - `props`: Props to be passed to the component.\n * - `hidden`: If true, the component will not be rendered.\n *\n * @param {React.ElementType} element The base component or native HTML element.\n * @returns {function} A primitive component.\n *\n * @example\n *\n * const MyButton = createPrimitiveComponent(Button)({\n * stateHook: useButtonState,\n * propsHook: useButton\n * });\n */\nexport const createPrimitiveComponent = <\n T extends React.ElementType,\n P extends React.ComponentPropsWithoutRef<T>,\n>(\n element: T\n) => {\n const Comp = createSlotComponent<T, P>(element);\n\n return <SH extends (options: any) => any, PH extends (state: any) => any>({\n propsHook,\n stateHook,\n }: {\n stateHook?: SH;\n propsHook?: PH;\n } = {}) => {\n return React.forwardRef<\n any,\n {\n as?: React.ElementType;\n asChild?: boolean;\n className?: string;\n style?: React.CSSProperties;\n options?: Parameters<SH>[0];\n state?: Parameters<PH>[0];\n setProps?: (hookProps: NonNullable<ReturnType<PH>['props']>) => P;\n } & P\n >(\n (\n {\n asChild,\n options,\n state: stateProp,\n className: classNameProp,\n getClassName,\n ...props\n },\n ref\n ) => {\n const state = isDefined(stateProp)\n ? stateProp\n : stateHook\n ? stateHook(options as any)\n : undefined;\n const {\n ref: hookRef,\n props: hookProps,\n hidden,\n } = propsHook\n ? propsHook(state)\n : { props: {}, hidden: false, ref: null };\n\n const _ref = useComposedRef(ref, hookRef);\n const className =\n isDefined(hookProps?.className) || isDefined(classNameProp)\n ? clsx(hookProps?.className, classNameProp)\n : undefined;\n const style =\n hookProps?.style || props.style\n ? { ...hookProps?.style, ...props.style }\n : undefined;\n\n if (!asChild && hidden) return null;\n\n return (\n <Comp\n ref={_ref}\n asChild={asChild}\n {...hookProps}\n className={className}\n style={style}\n {...props}\n {...(props.setProps?.(hookProps ?? {}) ?? {})}\n />\n );\n }\n );\n };\n};\n","import React from 'react';\n\ntype PossibleRef<T> = React.Ref<T> | undefined;\n\n/**\n * Set a given ref to a given value\n * This utility takes care of different types of refs: callback refs and React.RefObject(s)\n */\nconst setRef = <T>(ref: PossibleRef<T>, value: T) => {\n if (typeof ref === 'function') {\n ref(value);\n } else if (ref !== null && ref !== undefined) {\n (ref as React.MutableRefObject<T>).current = value;\n }\n};\n\n/**\n * A utility to compose multiple refs together\n * Accepts callback refs and React.RefObject(s)\n */\nexport const composeRefs =\n <T>(...refs: PossibleRef<T>[]) =>\n (node: T) =>\n refs.forEach((ref) => setRef(ref, node));\n\n/**\n * A custom hook that composes multiple refs\n * Accepts callback refs and React.RefObject(s)\n */\nexport const useComposedRef = <T>(...refs: PossibleRef<T>[]) => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n return React.useCallback(composeRefs(...refs), refs);\n};\n","import React from 'react';\n\nexport function createPrimitiveElement<T extends keyof HTMLElementTagNameMap>(\n tag: T\n) {\n return React.forwardRef<HTMLElementTagNameMap[T], JSX.IntrinsicElements[T]>(\n function CreateComponent(props, ref) {\n return React.createElement(tag, { ...props, ref });\n }\n );\n}\n","import React from 'react';\n\nexport const CAN_USE_DOM =\n typeof window !== 'undefined' &&\n window.document !== undefined &&\n window.document.createElement !== undefined;\n\n/**\n * Prevent warning on SSR by falling back to React.useEffect when DOM isn't available\n */\nexport const useIsomorphicLayoutEffect = CAN_USE_DOM\n ? React.useLayoutEffect\n : React.useEffect;\n","import React from 'react';\n\nconst canUsePassiveEvents = (): boolean => {\n if (\n typeof window === 'undefined' ||\n typeof window.addEventListener !== 'function'\n )\n return false;\n\n let passive = false;\n const options = Object.defineProperty({}, 'passive', {\n // eslint-disable-next-line getter-return\n get() {\n passive = true;\n },\n });\n const noop = () => null;\n\n window.addEventListener('test', noop, options);\n window.removeEventListener('test', noop, options);\n\n return passive;\n};\n\nexport const DEFAULT_IGNORE_CLASS = 'ignore-onclickoutside';\n\nexport interface UseOnClickOutsideCallback<T extends Event = Event> {\n (event: T): void;\n}\ntype El = HTMLElement;\ntype Refs = React.RefObject<El>[];\nexport interface UseOnClickOutsideOptions {\n refs?: Refs;\n disabled?: boolean;\n eventTypes?: string[];\n excludeScrollbar?: boolean;\n ignoreClass?: string | string[];\n detectIFrame?: boolean;\n}\n\nexport interface UseOnClickOutsideReturn {\n (element: El | null): void;\n}\n\nconst checkClass = (el: HTMLElement, cl: string): boolean =>\n el.classList?.contains(cl);\n\nconst hasIgnoreClass = (e: any, ignoreClass: string | string[]): boolean => {\n let el = e.target || e;\n\n while (el) {\n if (Array.isArray(ignoreClass)) {\n // eslint-disable-next-line no-loop-func\n if (ignoreClass.some((c) => checkClass(el, c))) return true;\n } else if (checkClass(el, ignoreClass)) {\n return true;\n }\n\n el = el.parentElement;\n }\n\n return false;\n};\n\nconst clickedOnScrollbar = (e: MouseEvent): boolean =>\n document.documentElement.clientWidth <= e.clientX ||\n document.documentElement.clientHeight <= e.clientY;\n\nconst getEventOptions = (type: string): { passive: boolean } | boolean =>\n type.includes('touch') && canUsePassiveEvents() ? { passive: true } : false;\n\nexport const useOnClickOutside = (\n callback: UseOnClickOutsideCallback,\n {\n refs: refsOpt,\n disabled,\n eventTypes = ['mousedown', 'touchstart'],\n excludeScrollbar,\n ignoreClass = DEFAULT_IGNORE_CLASS,\n detectIFrame = true,\n }: UseOnClickOutsideOptions = {}\n): UseOnClickOutsideReturn => {\n const [refsState, setRefsState] = React.useState<Refs>([]);\n const callbackRef = React.useRef(callback);\n callbackRef.current = callback;\n\n const ref: UseOnClickOutsideReturn = React.useCallback(\n (el) => setRefsState((prevState) => [...prevState, { current: el }]),\n []\n );\n\n React.useEffect(\n () => {\n if (!refsOpt?.length && refsState.length === 0) return;\n\n const getEls = () => {\n const els: El[] = [];\n (refsOpt || refsState).forEach(\n ({ current }) => current && els.push(current)\n );\n return els;\n };\n\n const handler = (e: any) => {\n if (\n !hasIgnoreClass(e, ignoreClass) &&\n !(excludeScrollbar && clickedOnScrollbar(e)) &&\n getEls().every((el) => !el.contains(e.target))\n )\n callbackRef.current(e);\n };\n\n const blurHandler = (e: FocusEvent) =>\n // On firefox the iframe becomes document.activeElement in the next event loop\n setTimeout(() => {\n const { activeElement } = document;\n\n if (\n activeElement?.tagName === 'IFRAME' &&\n !hasIgnoreClass(activeElement, ignoreClass) &&\n !getEls().includes(activeElement as HTMLIFrameElement)\n )\n callbackRef.current(e);\n }, 0);\n\n const removeEventListener = () => {\n eventTypes.forEach((type) =>\n // @ts-ignore\n document.removeEventListener(type, handler, getEventOptions(type))\n );\n\n if (detectIFrame) window.removeEventListener('blur', blurHandler);\n };\n\n if (disabled) {\n removeEventListener();\n return;\n }\n\n eventTypes.forEach((type) =>\n document.addEventListener(type, handler, getEventOptions(type))\n );\n\n if (detectIFrame) window.addEventListener('blur', blurHandler);\n\n // eslint-disable-next-line consistent-return\n return () => removeEventListener();\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [\n refsState,\n ignoreClass,\n excludeScrollbar,\n disabled,\n detectIFrame,\n // eslint-disable-next-line react-hooks/exhaustive-deps\n JSON.stringify(eventTypes),\n ]\n );\n\n return ref;\n};\n","import React from 'react';\n\nexport const useStableMemo = <T>(\n producer: () => T,\n deps?: React.DependencyList\n): T => {\n const [value, setValue] = React.useState(producer);\n\n React.useLayoutEffect(() => {\n setValue(producer);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, deps);\n\n return value;\n};\n","import React from 'react';\n\n/**\n * Wrap a component into multiple providers.\n * If there are any props that you want a provider to receive,\n * you can simply pass an array.\n */\nexport const withProviders =\n (...providers: any[]) =>\n <T,>(WrappedComponent: React.FC<T>) =>\n (props: T) =>\n providers.reduceRight(\n (acc, prov) => {\n let Provider = prov;\n if (Array.isArray(prov)) {\n [Provider] = prov;\n return <Provider {...prov[1]}>{acc}</Provider>;\n }\n\n return <Provider>{acc}</Provider>;\n },\n <WrappedComponent {...(props as any)} />\n );\n","import React from 'react';\n\n/**\n * Shorter alternative to `React.forwardRef`.\n * @generic1 Component type or element type\n * @generic2 Extended prop types\n */\nexport function withRef<\n T extends keyof HTMLElementTagNameMap | React.ComponentType<any>,\n E = {},\n>(\n renderFunction: React.ForwardRefRenderFunction<\n React.ElementRef<T>,\n React.ComponentPropsWithoutRef<T> & E\n >\n) {\n return React.forwardRef(renderFunction);\n}\n"],"mappings":"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","names":["React","React","React","React","_a","_b","React","React","React","React","React","React","React","React"]}
|
|
1
|
+
{"version":3,"sources":["../src/createSlotComponent.tsx","../src/Box.tsx","../src/PortalBody.tsx","../src/Text.tsx","../src/composeEventHandlers.ts","../src/createPrimitiveComponent.tsx","../src/useComposedRef.ts","../src/createPrimitiveElement.tsx","../src/useIsomorphicLayoutEffect.ts","../src/useOnClickOutside.ts","../src/useStableMemo.ts","../src/withProviders.tsx","../src/withRef.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Slot } from '@radix-ui/react-slot';\n\nexport const createSlotComponent = <\n T extends React.ElementType,\n P extends React.ComponentPropsWithoutRef<T>,\n>(\n element: T\n) =>\n // eslint-disable-next-line react/display-name\n React.forwardRef<\n any,\n {\n as?: React.ElementType;\n asChild?: boolean;\n } & P\n >(({ as, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : (as as T) || element;\n\n return <Comp ref={ref} {...props} />;\n });\n","import type React from 'react';\n\nimport { createSlotComponent } from './createSlotComponent';\n\nexport const Box = createSlotComponent('div');\n\nexport type BoxProps = React.ComponentPropsWithRef<typeof Box>;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\n\nexport type PortalBodyProps = { children: React.ReactNode; element?: Element };\n\nexport const PortalBody: ({\n children,\n element,\n}: PortalBodyProps) => React.ReactPortal = ({\n children,\n element,\n}: PortalBodyProps) => {\n const container =\n element || typeof window !== 'undefined' ? document.body : undefined;\n\n if (!container) return (<>{children}</>) as any;\n\n return ReactDOM.createPortal(children, element || document.body);\n};\n","import type React from 'react';\n\nimport { createSlotComponent } from './createSlotComponent';\n\nexport const Text = createSlotComponent('span');\n\nexport type TextProps = React.ComponentPropsWithRef<typeof Text>;\n","/** @see https://github.com/radix-ui/primitives/blob/b324ec2d7ddf13a2a115cb5b11478e24d2f45b87/packages/core/primitive/src/primitive.tsx#L1 */\nexport const composeEventHandlers =\n <E>(\n originalEventHandler?: (event: E) => void,\n ourEventHandler?: (event: E) => void,\n { checkForDefaultPrevented = true } = {}\n ) =>\n (event: E) => {\n originalEventHandler?.(event);\n\n if (\n checkForDefaultPrevented === false ||\n !(event as unknown as Event).defaultPrevented\n ) {\n return ourEventHandler?.(event);\n }\n };\n","/* eslint-disable react/display-name */\n\nimport React from 'react';\n\nimport { isDefined } from '@udecode/utils';\nimport { clsx } from 'clsx';\n\nimport { createSlotComponent } from './createSlotComponent';\nimport { useComposedRef } from './useComposedRef';\n\n/**\n * Primitive component factory. It uses hooks for managing state and props, and\n * forwards references to child components. Component props:\n *\n * - `asChild`: If true, the component will be rendered as a `Slot`\n * {@link https://www.radix-ui.com/docs/primitives/utilities/slot}.\n * - `options`: Options passed to the state hook.\n * - `state`: Provide your state instead of using the state hook.\n * - `className`: Class name to be merged to the component.\n * - `style`: Style object to be merged to the component.\n * - `setProps`: Function to set props from the props hook.\n * - `...props`: Props to be passed to the component. Props hook return value:\n * - `ref`: Reference to be forwarded to the component.\n * - `props`: Props to be passed to the component.\n * - `hidden`: If true, the component will not be rendered.\n *\n * @example\n * const MyButton = createPrimitiveComponent(Button)({\n * stateHook: useButtonState,\n * propsHook: useButton,\n * });\n *\n * @param {React.ElementType} element The base component or native HTML element.\n * @returns {function} A primitive component.\n */\nexport const createPrimitiveComponent = <\n T extends React.ElementType,\n P extends React.ComponentPropsWithoutRef<T>,\n>(\n element: T\n) => {\n const Comp = createSlotComponent<T, P>(element);\n\n return <SH extends (options: any) => any, PH extends (state: any) => any>({\n propsHook,\n stateHook,\n }: {\n propsHook?: PH;\n stateHook?: SH;\n } = {}) => {\n return React.forwardRef<\n any,\n {\n as?: React.ElementType;\n asChild?: boolean;\n className?: string;\n options?: Parameters<SH>[0];\n setProps?: (hookProps: NonNullable<ReturnType<PH>['props']>) => P;\n state?: Parameters<PH>[0];\n style?: React.CSSProperties;\n } & P\n >(\n (\n {\n asChild,\n className: classNameProp,\n getClassName,\n options,\n state: stateProp,\n ...props\n },\n ref\n ) => {\n const state = isDefined(stateProp)\n ? stateProp\n : stateHook\n ? stateHook(options as any)\n : undefined;\n const {\n hidden,\n props: hookProps,\n ref: hookRef,\n } = propsHook\n ? propsHook(state)\n : { hidden: false, props: {}, ref: null };\n\n const _ref = useComposedRef(ref, hookRef);\n const className =\n isDefined(hookProps?.className) || isDefined(classNameProp)\n ? clsx(hookProps?.className, classNameProp)\n : undefined;\n const style =\n hookProps?.style || props.style\n ? { ...hookProps?.style, ...props.style }\n : undefined;\n\n if (!asChild && hidden) return null;\n\n return (\n <Comp\n asChild={asChild}\n ref={_ref}\n {...hookProps}\n className={className}\n style={style}\n {...props}\n {...(props.setProps?.(hookProps ?? {}) ?? {})}\n />\n );\n }\n );\n };\n};\n","import React from 'react';\n\ntype PossibleRef<T> = React.Ref<T> | undefined;\n\n/**\n * Set a given ref to a given value This utility takes care of different types\n * of refs: callback refs and React.RefObject(s)\n */\nconst setRef = <T>(ref: PossibleRef<T>, value: T) => {\n if (typeof ref === 'function') {\n ref(value);\n } else if (ref !== null && ref !== undefined) {\n (ref as React.MutableRefObject<T>).current = value;\n }\n};\n\n/**\n * A utility to compose multiple refs together Accepts callback refs and\n * React.RefObject(s)\n */\nexport const composeRefs =\n <T>(...refs: PossibleRef<T>[]) =>\n (node: T) =>\n refs.forEach((ref) => setRef(ref, node));\n\n/**\n * A custom hook that composes multiple refs Accepts callback refs and\n * React.RefObject(s)\n */\nexport const useComposedRef = <T>(...refs: PossibleRef<T>[]) => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n return React.useCallback(composeRefs(...refs), refs);\n};\n","import React from 'react';\n\nexport function createPrimitiveElement<T extends keyof HTMLElementTagNameMap>(\n tag: T\n) {\n return React.forwardRef<HTMLElementTagNameMap[T], JSX.IntrinsicElements[T]>(\n function CreateComponent(props, ref) {\n return React.createElement(tag, { ...props, ref });\n }\n );\n}\n","import React from 'react';\n\nexport const CAN_USE_DOM =\n typeof window !== 'undefined' && window.document?.createElement !== undefined;\n\n/**\n * Prevent warning on SSR by falling back to React.useEffect when DOM isn't\n * available\n */\nexport const useIsomorphicLayoutEffect = CAN_USE_DOM\n ? React.useLayoutEffect\n : React.useEffect;\n","import React from 'react';\n\nconst canUsePassiveEvents = (): boolean => {\n if (\n typeof window === 'undefined' ||\n typeof window.addEventListener !== 'function'\n )\n return false;\n\n let passive = false;\n const options = Object.defineProperty({}, 'passive', {\n // eslint-disable-next-line getter-return\n get() {\n passive = true;\n },\n });\n const noop = () => null;\n\n window.addEventListener('test', noop, options);\n window.removeEventListener('test', noop, options);\n\n return passive;\n};\n\nexport const DEFAULT_IGNORE_CLASS = 'ignore-onclickoutside';\n\nexport type UseOnClickOutsideCallback<T extends Event = Event> = (\n event: T\n) => void;\n\ntype El = HTMLElement;\ntype Refs = React.RefObject<El>[];\n\nexport interface UseOnClickOutsideOptions {\n detectIFrame?: boolean;\n disabled?: boolean;\n eventTypes?: string[];\n excludeScrollbar?: boolean;\n ignoreClass?: string | string[];\n refs?: Refs;\n}\n\nexport type UseOnClickOutsideReturn = (element: El | null) => void;\n\nconst checkClass = (el: HTMLElement, cl: string): boolean =>\n el.classList?.contains(cl);\n\nconst hasIgnoreClass = (e: any, ignoreClass: string | string[]): boolean => {\n let el = e.target || e;\n\n while (el) {\n if (Array.isArray(ignoreClass)) {\n // eslint-disable-next-line no-loop-func\n if (ignoreClass.some((c) => checkClass(el, c))) return true;\n } else if (checkClass(el, ignoreClass)) {\n return true;\n }\n\n el = el.parentElement;\n }\n\n return false;\n};\n\nconst clickedOnScrollbar = (e: MouseEvent): boolean =>\n document.documentElement.clientWidth <= e.clientX ||\n document.documentElement.clientHeight <= e.clientY;\n\nconst getEventOptions = (type: string): { passive: boolean } | boolean =>\n type.includes('touch') && canUsePassiveEvents() ? { passive: true } : false;\n\nexport const useOnClickOutside = (\n callback: UseOnClickOutsideCallback,\n {\n detectIFrame = true,\n disabled,\n eventTypes = ['mousedown', 'touchstart'],\n excludeScrollbar,\n ignoreClass = DEFAULT_IGNORE_CLASS,\n refs: refsOpt,\n }: UseOnClickOutsideOptions = {}\n): UseOnClickOutsideReturn => {\n const [refsState, setRefsState] = React.useState<Refs>([]);\n const callbackRef = React.useRef(callback);\n callbackRef.current = callback;\n\n const ref: UseOnClickOutsideReturn = React.useCallback(\n (el) => setRefsState((prevState) => [...prevState, { current: el }]),\n []\n );\n\n React.useEffect(\n () => {\n if (!refsOpt?.length && refsState.length === 0) return;\n\n const getEls = () => {\n const els: El[] = [];\n (refsOpt || refsState).forEach(\n ({ current }) => current && els.push(current)\n );\n\n return els;\n };\n\n const handler = (e: any) => {\n if (\n !hasIgnoreClass(e, ignoreClass) &&\n !(excludeScrollbar && clickedOnScrollbar(e)) &&\n getEls().every((el) => !el.contains(e.target))\n )\n callbackRef.current(e);\n };\n\n const blurHandler = (e: FocusEvent) =>\n // On firefox the iframe becomes document.activeElement in the next event loop\n setTimeout(() => {\n const { activeElement } = document;\n\n if (\n activeElement?.tagName === 'IFRAME' &&\n !hasIgnoreClass(activeElement, ignoreClass) &&\n !getEls().includes(activeElement as HTMLIFrameElement)\n )\n callbackRef.current(e);\n }, 0);\n\n const removeEventListener = () => {\n eventTypes.forEach((type) =>\n document.removeEventListener(\n type,\n handler,\n getEventOptions(type) as any\n )\n );\n\n if (detectIFrame) window.removeEventListener('blur', blurHandler);\n };\n\n if (disabled) {\n removeEventListener();\n\n return;\n }\n\n eventTypes.forEach((type) =>\n document.addEventListener(type, handler, getEventOptions(type))\n );\n\n if (detectIFrame) window.addEventListener('blur', blurHandler);\n\n // eslint-disable-next-line consistent-return\n return () => removeEventListener();\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [\n refsState,\n ignoreClass,\n excludeScrollbar,\n disabled,\n detectIFrame,\n // eslint-disable-next-line react-hooks/exhaustive-deps\n JSON.stringify(eventTypes),\n ]\n );\n\n return ref;\n};\n","import React from 'react';\n\nexport const useStableMemo = <T>(\n producer: () => T,\n deps?: React.DependencyList\n): T => {\n const [value, setValue] = React.useState(producer);\n\n React.useLayoutEffect(() => {\n setValue(producer);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, deps);\n\n return value;\n};\n","import React from 'react';\n\n/**\n * Wrap a component into multiple providers. If there are any props that you\n * want a provider to receive, you can simply pass an array.\n */\nexport const withProviders =\n (...providers: any[]) =>\n <T,>(WrappedComponent: React.FC<T>) =>\n (props: T) =>\n providers.reduceRight(\n (acc, prov) => {\n let Provider = prov;\n\n if (Array.isArray(prov)) {\n [Provider] = prov;\n\n return <Provider {...prov[1]}>{acc}</Provider>;\n }\n\n return <Provider>{acc}</Provider>;\n },\n <WrappedComponent {...(props as any)} />\n );\n","import React from 'react';\n\n/**\n * Shorter alternative to `React.forwardRef`.\n *\n * @generic1 Component type or element type\n * @generic2 Extended prop types\n */\nexport function withRef<\n T extends React.ComponentType<any> | keyof HTMLElementTagNameMap,\n E = {},\n>(\n renderFunction: React.ForwardRefRenderFunction<\n React.ElementRef<T>,\n E & Omit<React.ComponentPropsWithoutRef<T>, keyof E>\n >\n) {\n return React.forwardRef(renderFunction);\n}\n"],"mappings":"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","names":["_a","React","React","React","React","_a","_b","React","React","React","React","_a","React","React","React","React"]}
|