@udecode/react-utils 51.1.2 → 52.0.1

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.js CHANGED
@@ -1,381 +1,363 @@
1
- "use strict";
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __copyProps = (to, from, except, desc) => {
13
- if (from && typeof from === "object" || typeof from === "function") {
14
- for (let key of __getOwnPropNames(from))
15
- if (!__hasOwnProp.call(to, key) && key !== except)
16
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
- }
18
- return to;
19
- };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- // If the importer is in node compatibility mode or this is not an ESM
22
- // file that has been converted to a CommonJS file using a Babel-
23
- // compatible transform (i.e. "__esModule" has not been set), then set
24
- // "default" to the CommonJS "module.exports" for node compatibility.
25
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
-
30
- // src/index.ts
31
- var index_exports = {};
32
- __export(index_exports, {
33
- Box: () => Box,
34
- CAN_USE_DOM: () => CAN_USE_DOM,
35
- DEFAULT_IGNORE_CLASS: () => DEFAULT_IGNORE_CLASS,
36
- MemoizedChildren: () => MemoizedChildren,
37
- PortalBody: () => PortalBody,
38
- Text: () => Text,
39
- composeEventHandlers: () => composeEventHandlers,
40
- composeRefs: () => composeRefs,
41
- createPrimitiveComponent: () => createPrimitiveComponent,
42
- createPrimitiveElement: () => createPrimitiveElement,
43
- createSlotComponent: () => createSlotComponent,
44
- useComposedRef: () => useComposedRef,
45
- useEffectOnce: () => useEffectOnce,
46
- useIsomorphicLayoutEffect: () => useIsomorphicLayoutEffect,
47
- useMemoizedSelector: () => useMemoizedSelector,
48
- useOnClickOutside: () => useOnClickOutside,
49
- useStableFn: () => useStableFn,
50
- useStableMemo: () => useStableMemo,
51
- withProviders: () => withProviders,
52
- withRef: () => withRef
53
- });
54
- module.exports = __toCommonJS(index_exports);
1
+ import { c } from "react/compiler-runtime";
2
+ import { Slot } from "@radix-ui/react-slot";
3
+ import React from "react";
4
+ import ReactDOM from "react-dom";
5
+ import { isDefined } from "@udecode/utils";
6
+ import { clsx } from "clsx";
55
7
 
56
- // src/createSlotComponent.tsx
57
- var import_react_slot = require("@radix-ui/react-slot");
58
- var import_react = __toESM(require("react"));
59
- var createSlotComponent = (element) => import_react.default.forwardRef(({ as, asChild = false, ...props }, ref) => {
60
- const Comp = asChild ? import_react_slot.Slot : as || element;
61
- return /* @__PURE__ */ import_react.default.createElement(Comp, { ref, ...props });
8
+ //#region src/createSlotComponent.tsx
9
+ const createSlotComponent = (element) => React.forwardRef((t0, ref) => {
10
+ const $ = c(8);
11
+ let as;
12
+ let props;
13
+ let t1;
14
+ if ($[0] !== t0) {
15
+ ({as, asChild: t1, ...props} = t0);
16
+ $[0] = t0;
17
+ $[1] = as;
18
+ $[2] = props;
19
+ $[3] = t1;
20
+ } else {
21
+ as = $[1];
22
+ props = $[2];
23
+ t1 = $[3];
24
+ }
25
+ const Comp = (t1 === void 0 ? false : t1) ? Slot : as || element;
26
+ let t2;
27
+ if ($[4] !== Comp || $[5] !== props || $[6] !== ref) {
28
+ t2 = /* @__PURE__ */ React.createElement(Comp, {
29
+ ref,
30
+ ...props
31
+ });
32
+ $[4] = Comp;
33
+ $[5] = props;
34
+ $[6] = ref;
35
+ $[7] = t2;
36
+ } else t2 = $[7];
37
+ return t2;
62
38
  });
63
39
 
64
- // src/Box.tsx
65
- var Box = createSlotComponent("div");
40
+ //#endregion
41
+ //#region src/Box.tsx
42
+ const Box = createSlotComponent("div");
66
43
 
67
- // src/MemoizedChildren.tsx
68
- var import_react2 = __toESM(require("react"));
69
- var MemoizedChildren = import_react2.default.memo(
70
- ({ children }) => /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, children)
71
- );
44
+ //#endregion
45
+ //#region src/MemoizedChildren.tsx
46
+ const MemoizedChildren = React.memo((t0) => {
47
+ const $ = c(2);
48
+ const { children } = t0;
49
+ let t1;
50
+ if ($[0] !== children) {
51
+ t1 = /* @__PURE__ */ React.createElement(React.Fragment, null, children);
52
+ $[0] = children;
53
+ $[1] = t1;
54
+ } else t1 = $[1];
55
+ return t1;
56
+ });
72
57
 
73
- // src/PortalBody.tsx
74
- var import_react_dom = __toESM(require("react-dom"));
75
- var PortalBody = ({
76
- children,
77
- element
78
- }) => {
79
- const container = element || typeof window !== "undefined" ? document.body : void 0;
80
- if (!container) return children;
81
- return import_react_dom.default.createPortal(children, element || document.body);
58
+ //#endregion
59
+ //#region src/PortalBody.tsx
60
+ const PortalBody = ({ children, element }) => {
61
+ if (!(element || typeof window !== "undefined" ? document.body : void 0)) return children;
62
+ return ReactDOM.createPortal(children, element || document.body);
82
63
  };
83
64
 
84
- // src/Text.tsx
85
- var Text = createSlotComponent("span");
65
+ //#endregion
66
+ //#region src/Text.tsx
67
+ const Text = createSlotComponent("span");
86
68
 
87
- // src/composeEventHandlers.ts
88
- var composeEventHandlers = (originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) => (event) => {
89
- originalEventHandler?.(event);
90
- if (checkForDefaultPrevented === false || !event.defaultPrevented) {
91
- return ourEventHandler?.(event);
92
- }
69
+ //#endregion
70
+ //#region src/composeEventHandlers.ts
71
+ /** @see https://github.com/radix-ui/primitives/blob/b324ec2d7ddf13a2a115cb5b11478e24d2f45b87/packages/core/primitive/src/primitive.tsx#L1 */
72
+ const composeEventHandlers = (originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) => (event) => {
73
+ originalEventHandler?.(event);
74
+ if (checkForDefaultPrevented === false || !event.defaultPrevented) return ourEventHandler?.(event);
93
75
  };
94
76
 
95
- // src/createPrimitiveComponent.tsx
96
- var import_utils = require("@udecode/utils");
97
- var import_clsx = require("clsx");
98
- var import_react4 = __toESM(require("react"));
99
-
100
- // src/useComposedRef.ts
101
- var import_react3 = __toESM(require("react"));
102
- var setRef = (ref, value) => {
103
- if (typeof ref === "function") {
104
- return ref(value);
105
- }
106
- if (ref !== null && ref !== void 0) {
107
- ref.current = value;
108
- }
77
+ //#endregion
78
+ //#region src/useComposedRef.ts
79
+ /**
80
+ * Set a given ref to a given value This utility takes care of different types
81
+ * of refs: callback refs and React.RefObject(s)
82
+ */
83
+ const setRef = (ref, value) => {
84
+ if (typeof ref === "function") return ref(value);
85
+ if (ref !== null && ref !== void 0) ref.current = value;
109
86
  };
110
- var composeRefs = (...refs) => (node) => {
111
- const cleanups = [];
112
- refs.forEach((ref) => {
113
- const cleanup = setRef(ref, node);
114
- if (typeof cleanup === "function") {
115
- cleanups.push(cleanup);
116
- }
117
- });
118
- if (cleanups.length > 0) {
119
- return () => {
120
- for (const cleanup of cleanups) {
121
- cleanup?.();
122
- }
123
- };
124
- }
87
+ /**
88
+ * A utility to compose multiple refs together Accepts callback refs and
89
+ * React.RefObject(s)
90
+ */
91
+ const composeRefs = (...refs) => (node) => {
92
+ const cleanups = [];
93
+ refs.forEach((ref) => {
94
+ const cleanup = setRef(ref, node);
95
+ if (typeof cleanup === "function") cleanups.push(cleanup);
96
+ });
97
+ if (cleanups.length > 0) return () => {
98
+ for (const cleanup of cleanups) cleanup?.();
99
+ };
125
100
  };
126
- var useComposedRef = (...refs) => {
127
- return import_react3.default.useCallback(composeRefs(...refs), refs);
101
+ /**
102
+ * A custom hook that composes multiple refs Accepts callback refs and
103
+ * React.RefObject(s)
104
+ */
105
+ const useComposedRef = (...refs) => {
106
+ return React.useCallback(composeRefs(...refs), refs);
128
107
  };
129
108
 
130
- // src/createPrimitiveComponent.tsx
131
- var createPrimitiveComponent = (element) => {
132
- const Comp = createSlotComponent(element);
133
- return ({
134
- propsHook,
135
- stateHook
136
- } = {}) => import_react4.default.forwardRef(
137
- ({
138
- asChild,
139
- className: classNameProp,
140
- getClassName,
141
- options,
142
- state: stateProp,
143
- ...props
144
- }, ref) => {
145
- const state = (0, import_utils.isDefined)(stateProp) ? stateProp : stateHook ? stateHook(options) : void 0;
146
- const {
147
- hidden,
148
- props: hookProps,
149
- ref: hookRef
150
- } = propsHook ? propsHook(state) : { hidden: false, props: {}, ref: null };
151
- const _ref = useComposedRef(ref, hookRef);
152
- const className = (0, import_utils.isDefined)(hookProps?.className) || (0, import_utils.isDefined)(classNameProp) ? (0, import_clsx.clsx)(hookProps?.className, classNameProp) : void 0;
153
- const style = hookProps?.style || props.style ? { ...hookProps?.style, ...props.style } : void 0;
154
- if (!asChild && hidden) return null;
155
- return /* @__PURE__ */ import_react4.default.createElement(
156
- Comp,
157
- {
158
- asChild,
159
- ref: _ref,
160
- ...hookProps,
161
- className,
162
- style,
163
- ...props,
164
- ...props.setProps?.(hookProps ?? {}) ?? {}
165
- }
166
- );
167
- }
168
- );
109
+ //#endregion
110
+ //#region src/createPrimitiveComponent.tsx
111
+ /**
112
+ * Primitive component factory. It uses hooks for managing state and props, and
113
+ * forwards references to child components. Component props:
114
+ *
115
+ * - `asChild`: If true, the component will be rendered as a `Slot`
116
+ * {@link https://www.radix-ui.com/docs/primitives/utilities/slot}.
117
+ * - `options`: Options passed to the state hook.
118
+ * - `state`: Provide your state instead of using the state hook.
119
+ * - `className`: Class name to be merged to the component.
120
+ * - `style`: Style object to be merged to the component.
121
+ * - `setProps`: Function to set props from the props hook.
122
+ * - `...props`: Props to be passed to the component. Props hook return value:
123
+ * - `ref`: Reference to be forwarded to the component.
124
+ * - `props`: Props to be passed to the component.
125
+ * - `hidden`: If true, the component will not be rendered.
126
+ *
127
+ * @example
128
+ * const MyButton = createPrimitiveComponent(Button)({
129
+ * stateHook: useButtonState,
130
+ * propsHook: useButton,
131
+ * });
132
+ *
133
+ * @param {React.ElementType} element The base component or native HTML element.
134
+ * @returns {function} A primitive component.
135
+ */
136
+ const createPrimitiveComponent = (element) => {
137
+ const Comp = createSlotComponent(element);
138
+ return ({ propsHook, stateHook } = {}) => React.forwardRef((t0, ref) => {
139
+ const $ = c(9);
140
+ const { asChild, className: classNameProp, getClassName, options, state: stateProp, ...props } = t0;
141
+ const state = isDefined(stateProp) ? stateProp : stateHook ? stateHook(options) : void 0;
142
+ const { hidden, props: hookProps, ref: hookRef } = propsHook ? propsHook(state) : {
143
+ hidden: false,
144
+ props: {},
145
+ ref: null
146
+ };
147
+ const _ref = useComposedRef(ref, hookRef);
148
+ const className = isDefined(hookProps?.className) || isDefined(classNameProp) ? clsx(hookProps?.className, classNameProp) : void 0;
149
+ const style = hookProps?.style || props.style ? {
150
+ ...hookProps?.style,
151
+ ...props.style
152
+ } : void 0;
153
+ if (!asChild && hidden) return null;
154
+ const T0 = Comp;
155
+ const t1 = props.setProps?.(hookProps ?? {}) ?? {};
156
+ let t2;
157
+ if ($[0] !== T0 || $[1] !== _ref || $[2] !== asChild || $[3] !== className || $[4] !== hookProps || $[5] !== props || $[6] !== style || $[7] !== t1) {
158
+ t2 = /* @__PURE__ */ React.createElement(T0, {
159
+ asChild,
160
+ ref: _ref,
161
+ ...hookProps,
162
+ className,
163
+ style,
164
+ ...props,
165
+ ...t1
166
+ });
167
+ $[0] = T0;
168
+ $[1] = _ref;
169
+ $[2] = asChild;
170
+ $[3] = className;
171
+ $[4] = hookProps;
172
+ $[5] = props;
173
+ $[6] = style;
174
+ $[7] = t1;
175
+ $[8] = t2;
176
+ } else t2 = $[8];
177
+ return t2;
178
+ });
169
179
  };
170
180
 
171
- // src/createPrimitiveElement.tsx
172
- var import_react5 = __toESM(require("react"));
181
+ //#endregion
182
+ //#region src/createPrimitiveElement.tsx
173
183
  function createPrimitiveElement(tag) {
174
- return import_react5.default.forwardRef(
175
- function CreateComponent(props, ref) {
176
- return import_react5.default.createElement(tag, { ...props, ref });
177
- }
178
- );
184
+ return React.forwardRef(function CreateComponent(props, ref) {
185
+ return React.createElement(tag, {
186
+ ...props,
187
+ ref
188
+ });
189
+ });
179
190
  }
180
191
 
181
- // src/useEffectOnce.ts
182
- var import_react6 = __toESM(require("react"));
192
+ //#endregion
193
+ //#region src/useEffectOnce.ts
183
194
  function useEffectOnce(effect, deps) {
184
- const initialized = import_react6.default.useRef(false);
185
- const prevDepsRef = import_react6.default.useRef(deps);
186
- import_react6.default.useEffect(() => {
187
- const depsChanged = deps.some((dep, i) => dep !== prevDepsRef.current[i]);
188
- if (!initialized.current || depsChanged) {
189
- initialized.current = true;
190
- prevDepsRef.current = deps;
191
- effect();
192
- }
193
- }, deps);
195
+ const initialized = React.useRef(false);
196
+ const prevDepsRef = React.useRef(deps);
197
+ React.useEffect(() => {
198
+ const depsChanged = deps.some((dep, i) => dep !== prevDepsRef.current[i]);
199
+ if (!initialized.current || depsChanged) {
200
+ initialized.current = true;
201
+ prevDepsRef.current = deps;
202
+ effect();
203
+ }
204
+ }, deps);
194
205
  }
195
206
 
196
- // src/useIsomorphicLayoutEffect.ts
197
- var import_react7 = __toESM(require("react"));
198
- var CAN_USE_DOM = typeof window !== "undefined" && window.document?.createElement !== void 0;
199
- var useIsomorphicLayoutEffect = CAN_USE_DOM ? import_react7.default.useLayoutEffect : import_react7.default.useEffect;
207
+ //#endregion
208
+ //#region src/useIsomorphicLayoutEffect.ts
209
+ const CAN_USE_DOM = typeof window !== "undefined" && window.document?.createElement !== void 0;
210
+ /**
211
+ * Prevent warning on SSR by falling back to React.useEffect when DOM isn't
212
+ * available
213
+ */
214
+ const useIsomorphicLayoutEffect = CAN_USE_DOM ? React.useLayoutEffect : React.useEffect;
200
215
 
201
- // src/useMemoizedSelector.ts
202
- var import_react8 = __toESM(require("react"));
216
+ //#endregion
217
+ //#region src/useMemoizedSelector.ts
218
+ /**
219
+ * Re-render only when the selector result changes.
220
+ *
221
+ * @param selector A function that derives a value from deps
222
+ * @param deps Dependencies on which to run the selector
223
+ * @param equalityFn Optional comparison function to detect changes in the
224
+ * derived value
225
+ */
203
226
  function useMemoizedSelector(selector, deps, equalityFn = (a, b) => a === b) {
204
- const [memoizedValue, setMemoizedValue] = import_react8.default.useState(() => selector());
205
- const previousValueRef = import_react8.default.useRef(memoizedValue);
206
- import_react8.default.useEffect(() => {
207
- const newValue = selector();
208
- if (!equalityFn(previousValueRef.current, newValue)) {
209
- setMemoizedValue(newValue);
210
- previousValueRef.current = newValue;
211
- }
212
- }, deps);
213
- return memoizedValue;
227
+ const [memoizedValue, setMemoizedValue] = React.useState(() => selector());
228
+ const previousValueRef = React.useRef(memoizedValue);
229
+ React.useEffect(() => {
230
+ const newValue = selector();
231
+ if (!equalityFn(previousValueRef.current, newValue)) {
232
+ setMemoizedValue(newValue);
233
+ previousValueRef.current = newValue;
234
+ }
235
+ }, deps);
236
+ return memoizedValue;
214
237
  }
215
238
 
216
- // src/useOnClickOutside.ts
217
- var import_react9 = __toESM(require("react"));
218
- var canUsePassiveEvents = () => {
219
- if (typeof window === "undefined" || typeof window.addEventListener !== "function")
220
- return false;
221
- let passive = false;
222
- const options = Object.defineProperty({}, "passive", {
223
- get() {
224
- passive = true;
225
- }
226
- });
227
- const noop = () => null;
228
- window.addEventListener("test", noop, options);
229
- window.removeEventListener("test", noop, options);
230
- return passive;
239
+ //#endregion
240
+ //#region src/useOnClickOutside.ts
241
+ const canUsePassiveEvents = () => {
242
+ if (typeof window === "undefined" || typeof window.addEventListener !== "function") return false;
243
+ let passive = false;
244
+ const options = Object.defineProperty({}, "passive", { get() {
245
+ passive = true;
246
+ } });
247
+ const noop = () => null;
248
+ window.addEventListener("test", noop, options);
249
+ window.removeEventListener("test", noop, options);
250
+ return passive;
231
251
  };
232
- var DEFAULT_IGNORE_CLASS = "ignore-onclickoutside";
233
- var checkClass = (el, cl) => el.classList?.contains(cl);
234
- var hasIgnoreClass = (e, ignoreClass) => {
235
- let el = e.target || e;
236
- while (el) {
237
- if (Array.isArray(ignoreClass)) {
238
- if (ignoreClass.some((c) => checkClass(el, c))) return true;
239
- } else if (checkClass(el, ignoreClass)) {
240
- return true;
241
- }
242
- el = el.parentElement;
243
- }
244
- return false;
252
+ const DEFAULT_IGNORE_CLASS = "ignore-onclickoutside";
253
+ const checkClass = (el, cl) => el.classList?.contains(cl);
254
+ const hasIgnoreClass = (e, ignoreClass) => {
255
+ let el = e.target || e;
256
+ while (el) {
257
+ if (Array.isArray(ignoreClass)) {
258
+ if (ignoreClass.some((c$1) => checkClass(el, c$1))) return true;
259
+ } else if (checkClass(el, ignoreClass)) return true;
260
+ el = el.parentElement;
261
+ }
262
+ return false;
245
263
  };
246
- var clickedOnScrollbar = (e) => document.documentElement.clientWidth <= e.clientX || document.documentElement.clientHeight <= e.clientY;
247
- var getEventOptions = (type) => type.includes("touch") && canUsePassiveEvents() ? { passive: true } : false;
248
- var useOnClickOutside = (callback, {
249
- detectIFrame = true,
250
- disabled,
251
- eventTypes = ["mousedown", "touchstart"],
252
- excludeScrollbar,
253
- ignoreClass = DEFAULT_IGNORE_CLASS,
254
- refs: refsOpt
255
- } = {}) => {
256
- const [refsState, setRefsState] = import_react9.default.useState([]);
257
- const callbackRef = import_react9.default.useRef(callback);
258
- callbackRef.current = callback;
259
- const ref = import_react9.default.useCallback(
260
- (el) => setRefsState((prevState) => [...prevState, { current: el }]),
261
- []
262
- );
263
- import_react9.default.useEffect(
264
- () => {
265
- if (!refsOpt?.length && refsState.length === 0) return;
266
- const getEls = () => {
267
- const els = [];
268
- for (const { current } of refsOpt || refsState) {
269
- if (current) {
270
- els.push(current);
271
- }
272
- }
273
- return els;
274
- };
275
- const handler = (e) => {
276
- if (!hasIgnoreClass(e, ignoreClass) && !(excludeScrollbar && clickedOnScrollbar(e)) && getEls().every((el) => !el.contains(e.target)))
277
- callbackRef.current(e);
278
- };
279
- const blurHandler = (e) => (
280
- // On firefox the iframe becomes document.activeElement in the next event loop
281
- setTimeout(() => {
282
- const { activeElement } = document;
283
- if (activeElement?.tagName === "IFRAME" && !hasIgnoreClass(activeElement, ignoreClass) && !getEls().includes(activeElement))
284
- callbackRef.current(e);
285
- }, 0)
286
- );
287
- const removeEventListener = () => {
288
- for (const type of eventTypes) {
289
- document.removeEventListener(
290
- type,
291
- handler,
292
- getEventOptions(type)
293
- );
294
- }
295
- if (detectIFrame) window.removeEventListener("blur", blurHandler);
296
- };
297
- if (disabled) {
298
- removeEventListener();
299
- return;
300
- }
301
- for (const type of eventTypes) {
302
- document.addEventListener(type, handler, getEventOptions(type));
303
- }
304
- if (detectIFrame) window.addEventListener("blur", blurHandler);
305
- return () => removeEventListener();
306
- },
307
- // eslint-disable-next-line react-hooks/exhaustive-deps
308
- [
309
- refsState,
310
- ignoreClass,
311
- excludeScrollbar,
312
- disabled,
313
- detectIFrame,
314
- // eslint-disable-next-line react-hooks/exhaustive-deps
315
- JSON.stringify(eventTypes)
316
- ]
317
- );
318
- return ref;
264
+ const clickedOnScrollbar = (e) => document.documentElement.clientWidth <= e.clientX || document.documentElement.clientHeight <= e.clientY;
265
+ const getEventOptions = (type) => type.includes("touch") && canUsePassiveEvents() ? { passive: true } : false;
266
+ const useOnClickOutside = (callback, { detectIFrame = true, disabled, eventTypes = ["mousedown", "touchstart"], excludeScrollbar, ignoreClass = DEFAULT_IGNORE_CLASS, refs: refsOpt } = {}) => {
267
+ const [refsState, setRefsState] = React.useState([]);
268
+ const callbackRef = React.useRef(callback);
269
+ callbackRef.current = callback;
270
+ const ref = React.useCallback((el) => setRefsState((prevState) => [...prevState, { current: el }]), []);
271
+ React.useEffect(() => {
272
+ if (!refsOpt?.length && refsState.length === 0) return;
273
+ const getEls = () => {
274
+ const els = [];
275
+ for (const { current } of refsOpt || refsState) if (current) els.push(current);
276
+ return els;
277
+ };
278
+ const handler = (e) => {
279
+ if (!hasIgnoreClass(e, ignoreClass) && !(excludeScrollbar && clickedOnScrollbar(e)) && getEls().every((el) => !el.contains(e.target))) callbackRef.current(e);
280
+ };
281
+ const blurHandler = (e) => setTimeout(() => {
282
+ const { activeElement } = document;
283
+ if (activeElement?.tagName === "IFRAME" && !hasIgnoreClass(activeElement, ignoreClass) && !getEls().includes(activeElement)) callbackRef.current(e);
284
+ }, 0);
285
+ const removeEventListener = () => {
286
+ for (const type of eventTypes) document.removeEventListener(type, handler, getEventOptions(type));
287
+ if (detectIFrame) window.removeEventListener("blur", blurHandler);
288
+ };
289
+ if (disabled) {
290
+ removeEventListener();
291
+ return;
292
+ }
293
+ for (const type of eventTypes) document.addEventListener(type, handler, getEventOptions(type));
294
+ if (detectIFrame) window.addEventListener("blur", blurHandler);
295
+ return () => removeEventListener();
296
+ }, [
297
+ refsState,
298
+ ignoreClass,
299
+ excludeScrollbar,
300
+ disabled,
301
+ detectIFrame,
302
+ JSON.stringify(eventTypes)
303
+ ]);
304
+ return ref;
319
305
  };
320
306
 
321
- // src/useStableFn.ts
322
- var import_react10 = __toESM(require("react"));
323
- var useStableFn = (fn, deps = []) => {
324
- const fnRef = import_react10.default.useRef(fn);
325
- fnRef.current = fn;
326
- return import_react10.default.useCallback((...args) => fnRef.current(...args), deps);
307
+ //#endregion
308
+ //#region src/useStableFn.ts
309
+ /**
310
+ * Create a stable version of a function that can be used in dependency arrays
311
+ * without causing hooks like useEffect to re-run if the function changes.
312
+ * Calling the returned function always calls the most recent version of the
313
+ * function that was passed to useStableFn.
314
+ *
315
+ * If you do want the function to be replaced when certain dependency values
316
+ * change, include those values in the dependency array of useStableFn.
317
+ */
318
+ const useStableFn = (fn, deps = []) => {
319
+ const fnRef = React.useRef(fn);
320
+ fnRef.current = fn;
321
+ return React.useCallback((...args) => fnRef.current(...args), deps);
327
322
  };
328
323
 
329
- // src/useStableMemo.ts
330
- var import_react11 = __toESM(require("react"));
331
- var useStableMemo = (producer, deps) => {
332
- const [value, setValue] = import_react11.default.useState(producer);
333
- import_react11.default.useLayoutEffect(() => {
334
- setValue(producer);
335
- }, deps);
336
- return value;
324
+ //#endregion
325
+ //#region src/useStableMemo.ts
326
+ const useStableMemo = (producer, deps) => {
327
+ const [value, setValue] = React.useState(producer);
328
+ React.useLayoutEffect(() => {
329
+ setValue(producer);
330
+ }, deps);
331
+ return value;
337
332
  };
338
333
 
339
- // src/withProviders.tsx
340
- var import_react12 = __toESM(require("react"));
341
- var withProviders = (...providers) => (WrappedComponent) => (props) => providers.reduceRight(
342
- (acc, prov) => {
343
- let Provider = prov;
344
- if (Array.isArray(prov)) {
345
- [Provider] = prov;
346
- return /* @__PURE__ */ import_react12.default.createElement(Provider, { ...prov[1] }, acc);
347
- }
348
- return /* @__PURE__ */ import_react12.default.createElement(Provider, null, acc);
349
- },
350
- /* @__PURE__ */ import_react12.default.createElement(WrappedComponent, { ...props })
351
- );
334
+ //#endregion
335
+ //#region src/withProviders.tsx
336
+ /** biome-ignore-all lint/correctness/useJsxKeyInIterable: biome */
337
+ /**
338
+ * Wrap a component into multiple providers. If there are any props that you
339
+ * want a provider to receive, you can simply pass an array.
340
+ */
341
+ const withProviders = (...providers) => (WrappedComponent) => (props) => providers.reduceRight((acc, prov) => {
342
+ let Provider = prov;
343
+ if (Array.isArray(prov)) {
344
+ [Provider] = prov;
345
+ return /* @__PURE__ */ React.createElement(Provider, prov[1], acc);
346
+ }
347
+ return /* @__PURE__ */ React.createElement(Provider, null, acc);
348
+ }, /* @__PURE__ */ React.createElement(WrappedComponent, props));
352
349
 
353
- // src/withRef.tsx
354
- var import_react13 = __toESM(require("react"));
350
+ //#endregion
351
+ //#region src/withRef.tsx
352
+ /**
353
+ * Shorter alternative to `React.forwardRef`.
354
+ *
355
+ * @generic1 Component type or element type
356
+ * @generic2 Extended prop types
357
+ */
355
358
  function withRef(renderFunction) {
356
- return import_react13.default.forwardRef(renderFunction);
359
+ return React.forwardRef(renderFunction);
357
360
  }
358
- // Annotate the CommonJS export names for ESM import in node:
359
- 0 && (module.exports = {
360
- Box,
361
- CAN_USE_DOM,
362
- DEFAULT_IGNORE_CLASS,
363
- MemoizedChildren,
364
- PortalBody,
365
- Text,
366
- composeEventHandlers,
367
- composeRefs,
368
- createPrimitiveComponent,
369
- createPrimitiveElement,
370
- createSlotComponent,
371
- useComposedRef,
372
- useEffectOnce,
373
- useIsomorphicLayoutEffect,
374
- useMemoizedSelector,
375
- useOnClickOutside,
376
- useStableFn,
377
- useStableMemo,
378
- withProviders,
379
- withRef
380
- });
381
- //# sourceMappingURL=index.js.map
361
+
362
+ //#endregion
363
+ export { Box, CAN_USE_DOM, DEFAULT_IGNORE_CLASS, MemoizedChildren, PortalBody, Text, composeEventHandlers, composeRefs, createPrimitiveComponent, createPrimitiveElement, createSlotComponent, useComposedRef, useEffectOnce, useIsomorphicLayoutEffect, useMemoizedSelector, useOnClickOutside, useStableFn, useStableMemo, withProviders, withRef };