@udecode/react-utils 29.0.0

package/README.md

@@ -0,0 +1,11 @@
+# Udecode React utils
+
+React utils used by the many packages of the Udecode ecosystem.
+
+## Documentation
+
+Visit https://platejs.org/docs/api/react-utils to view the documentation.
+
+## License
+
+[MIT](../../LICENSE)

package/dist/index.d.mts

@@ -0,0 +1,127 @@
+import React from 'react';
+
+declare const Box: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    as?: React.ElementType<any> | undefined;
+    asChild?: boolean | undefined;
+} & React.RefAttributes<any>>;
+type BoxProps = React.ComponentPropsWithRef<typeof Box>;
+
+type PortalBodyProps = {
+    children: React.ReactNode;
+    element?: Element;
+};
+declare const PortalBody: ({ children, element, }: PortalBodyProps) => React.ReactPortal;
+
+declare const Text: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    as?: React.ElementType<any> | undefined;
+    asChild?: boolean | undefined;
+} & React.RefAttributes<any>>;
+type TextProps = React.ComponentPropsWithRef<typeof Text>;
+
+/**
+ * @see https://github.com/radix-ui/primitives/blob/b324ec2d7ddf13a2a115cb5b11478e24d2f45b87/packages/core/primitive/src/primitive.tsx#L1
+ */
+declare const composeEventHandlers: <E>(originalEventHandler?: ((event: E) => void) | undefined, ourEventHandler?: ((event: E) => void) | undefined, { checkForDefaultPrevented }?: {
+    checkForDefaultPrevented?: boolean | undefined;
+}) => (event: E) => void;
+
+/**
+ * Primitive component factory. It uses hooks for managing
+ * state and props, and forwards references to child components.
+ * Component props:
+ * - `asChild`: If true, the component will be rendered as a `Slot` {@link https://www.radix-ui.com/docs/primitives/utilities/slot}.
+ * - `options`: Options passed to the state hook.
+ * - `state`: Provide your state instead of using the state hook.
+ * - `className`: Class name to be merged to the component.
+ * - `style`: Style object to be merged to the component.
+ * - `setProps`: Function to set props from the props hook.
+ * - `...props`: Props to be passed to the component.
+ * Props hook return value:
+ * - `ref`: Reference to be forwarded to the component.
+ * - `props`: Props to be passed to the component.
+ * - `hidden`: If true, the component will not be rendered.
+ *
+ * @param {React.ElementType} element The base component or native HTML element.
+ * @returns {function} A primitive component.
+ *
+ * @example
+ *
+ * const MyButton = createPrimitiveComponent(Button)({
+ *   stateHook: useButtonState,
+ *   propsHook: useButton
+ * });
+ */
+declare const createPrimitiveComponent: <T extends React.ElementType<any>, P extends React.PropsWithoutRef<React.ComponentProps<T>>>(element: T) => <SH extends (options: any) => any, PH extends (state: any) => any>({ propsHook, stateHook, }?: {
+    stateHook?: SH | undefined;
+    propsHook?: PH | undefined;
+}) => React.ForwardRefExoticComponent<React.PropsWithoutRef<{
+    as?: React.ElementType<any> | undefined;
+    asChild?: boolean | undefined;
+    className?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    options?: Parameters<SH>[0] | undefined;
+    state?: Parameters<PH>[0] | undefined;
+    setProps?: ((hookProps: NonNullable<ReturnType<PH>["props"]>) => P) | undefined;
+} & P> & React.RefAttributes<any>>;
+
+declare function createPrimitiveElement<T extends keyof HTMLElementTagNameMap>(tag: T): React.ForwardRefExoticComponent<React.PropsWithoutRef<JSX.IntrinsicElements[T]> & React.RefAttributes<HTMLElementTagNameMap[T]>>;
+
+declare const createSlotComponent: <T extends React.ElementType<any>, P extends React.PropsWithoutRef<React.ComponentProps<T>>>(element: T) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P & {
+    as?: React.ElementType<any> | undefined;
+    asChild?: boolean | undefined;
+}> & React.RefAttributes<any>>;
+
+type PossibleRef<T> = React.Ref<T> | undefined;
+/**
+ * A utility to compose multiple refs together
+ * Accepts callback refs and React.RefObject(s)
+ */
+declare const composeRefs: <T>(...refs: PossibleRef<T>[]) => (node: T) => void;
+/**
+ * A custom hook that composes multiple refs
+ * Accepts callback refs and React.RefObject(s)
+ */
+declare const useComposedRef: <T>(...refs: PossibleRef<T>[]) => (node: T) => void;
+
+declare const CAN_USE_DOM: boolean;
+/**
+ * Prevent warning on SSR by falling back to React.useEffect when DOM isn't available
+ */
+declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;
+
+declare const DEFAULT_IGNORE_CLASS = "ignore-onclickoutside";
+interface UseOnClickOutsideCallback<T extends Event = Event> {
+    (event: T): void;
+}
+type El = HTMLElement;
+type Refs = React.RefObject<El>[];
+interface UseOnClickOutsideOptions {
+    refs?: Refs;
+    disabled?: boolean;
+    eventTypes?: string[];
+    excludeScrollbar?: boolean;
+    ignoreClass?: string | string[];
+    detectIFrame?: boolean;
+}
+interface UseOnClickOutsideReturn {
+    (element: El | null): void;
+}
+declare const useOnClickOutside: (callback: UseOnClickOutsideCallback, { refs: refsOpt, disabled, eventTypes, excludeScrollbar, ignoreClass, detectIFrame, }?: UseOnClickOutsideOptions) => UseOnClickOutsideReturn;
+
+declare const useStableMemo: <T>(producer: () => T, deps?: React.DependencyList) => T;
+
+/**
+ * Wrap a component into multiple providers.
+ * If there are any props that you want a provider to receive,
+ * you can simply pass an array.
+ */
+declare const withProviders: (...providers: any[]) => <T>(WrappedComponent: React.FC<T>) => (props: T) => any;
+
+/**
+ * Shorter alternative to `React.forwardRef`.
+ * @generic1 Component type or element type
+ * @generic2 Extended prop types
+ */
+declare function withRef<T extends keyof HTMLElementTagNameMap | React.ComponentType<object>, E = {}>(renderFunction: React.ForwardRefRenderFunction<React.ElementRef<T>, React.ComponentPropsWithoutRef<T> & E>): React.ForwardRefExoticComponent<React.PropsWithoutRef<React.PropsWithoutRef<React.ComponentProps<T>> & E> & React.RefAttributes<React.ElementRef<T>>>;
+
+export { Box, BoxProps, CAN_USE_DOM, DEFAULT_IGNORE_CLASS, PortalBody, PortalBodyProps, Text, TextProps, UseOnClickOutsideCallback, UseOnClickOutsideOptions, UseOnClickOutsideReturn, composeEventHandlers, composeRefs, createPrimitiveComponent, createPrimitiveElement, createSlotComponent, useComposedRef, useIsomorphicLayoutEffect, useOnClickOutside, useStableMemo, withProviders, withRef };

package/dist/index.d.ts

@@ -0,0 +1,127 @@
+import React from 'react';
+
+declare const Box: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    as?: React.ElementType<any> | undefined;
+    asChild?: boolean | undefined;
+} & React.RefAttributes<any>>;
+type BoxProps = React.ComponentPropsWithRef<typeof Box>;
+
+type PortalBodyProps = {
+    children: React.ReactNode;
+    element?: Element;
+};
+declare const PortalBody: ({ children, element, }: PortalBodyProps) => React.ReactPortal;
+
+declare const Text: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    as?: React.ElementType<any> | undefined;
+    asChild?: boolean | undefined;
+} & React.RefAttributes<any>>;
+type TextProps = React.ComponentPropsWithRef<typeof Text>;
+
+/**
+ * @see https://github.com/radix-ui/primitives/blob/b324ec2d7ddf13a2a115cb5b11478e24d2f45b87/packages/core/primitive/src/primitive.tsx#L1
+ */
+declare const composeEventHandlers: <E>(originalEventHandler?: ((event: E) => void) | undefined, ourEventHandler?: ((event: E) => void) | undefined, { checkForDefaultPrevented }?: {
+    checkForDefaultPrevented?: boolean | undefined;
+}) => (event: E) => void;
+
+/**
+ * Primitive component factory. It uses hooks for managing
+ * state and props, and forwards references to child components.
+ * Component props:
+ * - `asChild`: If true, the component will be rendered as a `Slot` {@link https://www.radix-ui.com/docs/primitives/utilities/slot}.
+ * - `options`: Options passed to the state hook.
+ * - `state`: Provide your state instead of using the state hook.
+ * - `className`: Class name to be merged to the component.
+ * - `style`: Style object to be merged to the component.
+ * - `setProps`: Function to set props from the props hook.
+ * - `...props`: Props to be passed to the component.
+ * Props hook return value:
+ * - `ref`: Reference to be forwarded to the component.
+ * - `props`: Props to be passed to the component.
+ * - `hidden`: If true, the component will not be rendered.
+ *
+ * @param {React.ElementType} element The base component or native HTML element.
+ * @returns {function} A primitive component.
+ *
+ * @example
+ *
+ * const MyButton = createPrimitiveComponent(Button)({
+ *   stateHook: useButtonState,
+ *   propsHook: useButton
+ * });
+ */
+declare const createPrimitiveComponent: <T extends React.ElementType<any>, P extends React.PropsWithoutRef<React.ComponentProps<T>>>(element: T) => <SH extends (options: any) => any, PH extends (state: any) => any>({ propsHook, stateHook, }?: {
+    stateHook?: SH | undefined;
+    propsHook?: PH | undefined;
+}) => React.ForwardRefExoticComponent<React.PropsWithoutRef<{
+    as?: React.ElementType<any> | undefined;
+    asChild?: boolean | undefined;
+    className?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    options?: Parameters<SH>[0] | undefined;
+    state?: Parameters<PH>[0] | undefined;
+    setProps?: ((hookProps: NonNullable<ReturnType<PH>["props"]>) => P) | undefined;
+} & P> & React.RefAttributes<any>>;
+
+declare function createPrimitiveElement<T extends keyof HTMLElementTagNameMap>(tag: T): React.ForwardRefExoticComponent<React.PropsWithoutRef<JSX.IntrinsicElements[T]> & React.RefAttributes<HTMLElementTagNameMap[T]>>;
+
+declare const createSlotComponent: <T extends React.ElementType<any>, P extends React.PropsWithoutRef<React.ComponentProps<T>>>(element: T) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P & {
+    as?: React.ElementType<any> | undefined;
+    asChild?: boolean | undefined;
+}> & React.RefAttributes<any>>;
+
+type PossibleRef<T> = React.Ref<T> | undefined;
+/**
+ * A utility to compose multiple refs together
+ * Accepts callback refs and React.RefObject(s)
+ */
+declare const composeRefs: <T>(...refs: PossibleRef<T>[]) => (node: T) => void;
+/**
+ * A custom hook that composes multiple refs
+ * Accepts callback refs and React.RefObject(s)
+ */
+declare const useComposedRef: <T>(...refs: PossibleRef<T>[]) => (node: T) => void;
+
+declare const CAN_USE_DOM: boolean;
+/**
+ * Prevent warning on SSR by falling back to React.useEffect when DOM isn't available
+ */
+declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;
+
+declare const DEFAULT_IGNORE_CLASS = "ignore-onclickoutside";
+interface UseOnClickOutsideCallback<T extends Event = Event> {
+    (event: T): void;
+}
+type El = HTMLElement;
+type Refs = React.RefObject<El>[];
+interface UseOnClickOutsideOptions {
+    refs?: Refs;
+    disabled?: boolean;
+    eventTypes?: string[];
+    excludeScrollbar?: boolean;
+    ignoreClass?: string | string[];
+    detectIFrame?: boolean;
+}
+interface UseOnClickOutsideReturn {
+    (element: El | null): void;
+}
+declare const useOnClickOutside: (callback: UseOnClickOutsideCallback, { refs: refsOpt, disabled, eventTypes, excludeScrollbar, ignoreClass, detectIFrame, }?: UseOnClickOutsideOptions) => UseOnClickOutsideReturn;
+
+declare const useStableMemo: <T>(producer: () => T, deps?: React.DependencyList) => T;
+
+/**
+ * Wrap a component into multiple providers.
+ * If there are any props that you want a provider to receive,
+ * you can simply pass an array.
+ */
+declare const withProviders: (...providers: any[]) => <T>(WrappedComponent: React.FC<T>) => (props: T) => any;
+
+/**
+ * Shorter alternative to `React.forwardRef`.
+ * @generic1 Component type or element type
+ * @generic2 Extended prop types
+ */
+declare function withRef<T extends keyof HTMLElementTagNameMap | React.ComponentType<object>, E = {}>(renderFunction: React.ForwardRefRenderFunction<React.ElementRef<T>, React.ComponentPropsWithoutRef<T> & E>): React.ForwardRefExoticComponent<React.PropsWithoutRef<React.PropsWithoutRef<React.ComponentProps<T>> & E> & React.RefAttributes<React.ElementRef<T>>>;
+
+export { Box, BoxProps, CAN_USE_DOM, DEFAULT_IGNORE_CLASS, PortalBody, PortalBodyProps, Text, TextProps, UseOnClickOutsideCallback, UseOnClickOutsideOptions, UseOnClickOutsideReturn, composeEventHandlers, composeRefs, createPrimitiveComponent, createPrimitiveElement, createSlotComponent, useComposedRef, useIsomorphicLayoutEffect, useOnClickOutside, useStableMemo, withProviders, withRef };

package/dist/index.js

@@ -0,0 +1,361 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Box: () => Box,
+  CAN_USE_DOM: () => CAN_USE_DOM,
+  DEFAULT_IGNORE_CLASS: () => DEFAULT_IGNORE_CLASS,
+  PortalBody: () => PortalBody,
+  Text: () => Text,
+  composeEventHandlers: () => composeEventHandlers,
+  composeRefs: () => composeRefs,
+  createPrimitiveComponent: () => createPrimitiveComponent,
+  createPrimitiveElement: () => createPrimitiveElement,
+  createSlotComponent: () => createSlotComponent,
+  useComposedRef: () => useComposedRef,
+  useIsomorphicLayoutEffect: () => useIsomorphicLayoutEffect,
+  useOnClickOutside: () => useOnClickOutside,
+  useStableMemo: () => useStableMemo,
+  withProviders: () => withProviders,
+  withRef: () => withRef
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/createSlotComponent.tsx
+var import_react = __toESM(require("react"));
+var import_react_slot = require("@radix-ui/react-slot");
+var createSlotComponent = (element) => (
+  // eslint-disable-next-line react/display-name
+  import_react.default.forwardRef((_a, ref) => {
+    var _b = _a, { as, asChild = false } = _b, props = __objRest(_b, ["as", "asChild"]);
+    const Comp = asChild ? import_react_slot.Slot : as || element;
+    return /* @__PURE__ */ import_react.default.createElement(Comp, __spreadValues({ ref }, props));
+  })
+);
+
+// src/Box.tsx
+var Box = createSlotComponent("div");
+
+// src/PortalBody.tsx
+var import_react2 = __toESM(require("react"));
+var import_react_dom = __toESM(require("react-dom"));
+var PortalBody = ({
+  children,
+  element
+}) => {
+  const container = element || typeof window !== "undefined" ? document.body : void 0;
+  if (!container)
+    return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, children);
+  return import_react_dom.default.createPortal(children, element || document.body);
+};
+
+// src/Text.tsx
+var Text = createSlotComponent("span");
+
+// src/composeEventHandlers.ts
+var composeEventHandlers = (originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) => (event) => {
+  originalEventHandler == null ? void 0 : originalEventHandler(event);
+  if (checkForDefaultPrevented === false || !event.defaultPrevented) {
+    return ourEventHandler == null ? void 0 : ourEventHandler(event);
+  }
+};
+
+// src/createPrimitiveComponent.tsx
+var import_react4 = __toESM(require("react"));
+var import_utils = require("@udecode/utils");
+var import_clsx = require("clsx");
+
+// src/useComposedRef.ts
+var import_react3 = __toESM(require("react"));
+var setRef = (ref, value) => {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+};
+var composeRefs = (...refs) => (node) => refs.forEach((ref) => setRef(ref, node));
+var useComposedRef = (...refs) => {
+  return import_react3.default.useCallback(composeRefs(...refs), refs);
+};
+
+// src/createPrimitiveComponent.tsx
+var createPrimitiveComponent = (element) => {
+  const Comp = createSlotComponent(element);
+  return ({
+    propsHook,
+    stateHook
+  } = {}) => {
+    return import_react4.default.forwardRef(
+      (_a, ref) => {
+        var _b = _a, {
+          asChild,
+          options,
+          state: stateProp,
+          className: classNameProp,
+          getClassName
+        } = _b, props = __objRest(_b, [
+          "asChild",
+          "options",
+          "state",
+          "className",
+          "getClassName"
+        ]);
+        var _a2, _b2;
+        const state = (0, import_utils.isDefined)(stateProp) ? stateProp : stateHook ? stateHook(options) : void 0;
+        const {
+          ref: hookRef,
+          props: hookProps,
+          hidden
+        } = propsHook ? propsHook(state) : { props: {}, hidden: false, ref: null };
+        const _ref = useComposedRef(ref, hookRef);
+        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;
+        const style = (hookProps == null ? void 0 : hookProps.style) || props.style ? __spreadValues(__spreadValues({}, hookProps == null ? void 0 : hookProps.style), props.style) : void 0;
+        if (!asChild && hidden)
+          return null;
+        return /* @__PURE__ */ import_react4.default.createElement(
+          Comp,
+          __spreadValues(__spreadValues(__spreadProps(__spreadValues({
+            ref: _ref,
+            asChild
+          }, hookProps), {
+            className,
+            style
+          }), props), (_b2 = (_a2 = props.setProps) == null ? void 0 : _a2.call(props, hookProps != null ? hookProps : {})) != null ? _b2 : {})
+        );
+      }
+    );
+  };
+};
+
+// src/createPrimitiveElement.tsx
+var import_react5 = __toESM(require("react"));
+function createPrimitiveElement(tag) {
+  return import_react5.default.forwardRef(
+    function CreateComponent(props, ref) {
+      return import_react5.default.createElement(tag, __spreadProps(__spreadValues({}, props), { ref }));
+    }
+  );
+}
+
+// src/useIsomorphicLayoutEffect.ts
+var import_react6 = __toESM(require("react"));
+var CAN_USE_DOM = typeof window !== "undefined" && window.document !== void 0 && window.document.createElement !== void 0;
+var useIsomorphicLayoutEffect = CAN_USE_DOM ? import_react6.default.useLayoutEffect : import_react6.default.useEffect;
+
+// src/useOnClickOutside.ts
+var import_react7 = __toESM(require("react"));
+var canUsePassiveEvents = () => {
+  if (typeof window === "undefined" || typeof window.addEventListener !== "function")
+    return false;
+  let passive = false;
+  const options = Object.defineProperty({}, "passive", {
+    // eslint-disable-next-line getter-return
+    get() {
+      passive = true;
+    }
+  });
+  const noop = () => null;
+  window.addEventListener("test", noop, options);
+  window.removeEventListener("test", noop, options);
+  return passive;
+};
+var DEFAULT_IGNORE_CLASS = "ignore-onclickoutside";
+var checkClass = (el, cl) => {
+  var _a;
+  return (_a = el.classList) == null ? void 0 : _a.contains(cl);
+};
+var hasIgnoreClass = (e, ignoreClass) => {
+  let el = e.target || e;
+  while (el) {
+    if (Array.isArray(ignoreClass)) {
+      if (ignoreClass.some((c) => checkClass(el, c)))
+        return true;
+    } else if (checkClass(el, ignoreClass)) {
+      return true;
+    }
+    el = el.parentElement;
+  }
+  return false;
+};
+var clickedOnScrollbar = (e) => document.documentElement.clientWidth <= e.clientX || document.documentElement.clientHeight <= e.clientY;
+var getEventOptions = (type) => type.includes("touch") && canUsePassiveEvents() ? { passive: true } : false;
+var useOnClickOutside = (callback, {
+  refs: refsOpt,
+  disabled,
+  eventTypes = ["mousedown", "touchstart"],
+  excludeScrollbar,
+  ignoreClass = DEFAULT_IGNORE_CLASS,
+  detectIFrame = true
+} = {}) => {
+  const [refsState, setRefsState] = import_react7.default.useState([]);
+  const callbackRef = import_react7.default.useRef(callback);
+  callbackRef.current = callback;
+  const ref = import_react7.default.useCallback(
+    (el) => setRefsState((prevState) => [...prevState, { current: el }]),
+    []
+  );
+  import_react7.default.useEffect(
+    () => {
+      if (!(refsOpt == null ? void 0 : refsOpt.length) && refsState.length === 0)
+        return;
+      const getEls = () => {
+        const els = [];
+        (refsOpt || refsState).forEach(
+          ({ current }) => current && els.push(current)
+        );
+        return els;
+      };
+      const handler = (e) => {
+        if (!hasIgnoreClass(e, ignoreClass) && !(excludeScrollbar && clickedOnScrollbar(e)) && getEls().every((el) => !el.contains(e.target)))
+          callbackRef.current(e);
+      };
+      const blurHandler = (e) => (
+        // On firefox the iframe becomes document.activeElement in the next event loop
+        setTimeout(() => {
+          const { activeElement } = document;
+          if ((activeElement == null ? void 0 : activeElement.tagName) === "IFRAME" && !hasIgnoreClass(activeElement, ignoreClass) && !getEls().includes(activeElement))
+            callbackRef.current(e);
+        }, 0)
+      );
+      const removeEventListener = () => {
+        eventTypes.forEach(
+          (type) => (
+            // @ts-ignore
+            document.removeEventListener(type, handler, getEventOptions(type))
+          )
+        );
+        if (detectIFrame)
+          window.removeEventListener("blur", blurHandler);
+      };
+      if (disabled) {
+        removeEventListener();
+        return;
+      }
+      eventTypes.forEach(
+        (type) => document.addEventListener(type, handler, getEventOptions(type))
+      );
+      if (detectIFrame)
+        window.addEventListener("blur", blurHandler);
+      return () => removeEventListener();
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      refsState,
+      ignoreClass,
+      excludeScrollbar,
+      disabled,
+      detectIFrame,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      JSON.stringify(eventTypes)
+    ]
+  );
+  return ref;
+};
+
+// src/useStableMemo.ts
+var import_react8 = __toESM(require("react"));
+var useStableMemo = (producer, deps) => {
+  const [value, setValue] = import_react8.default.useState(producer);
+  import_react8.default.useLayoutEffect(() => {
+    setValue(producer);
+  }, deps);
+  return value;
+};
+
+// src/withProviders.tsx
+var import_react9 = __toESM(require("react"));
+var withProviders = (...providers) => (WrappedComponent) => (props) => providers.reduceRight(
+  (acc, prov) => {
+    let Provider = prov;
+    if (Array.isArray(prov)) {
+      [Provider] = prov;
+      return /* @__PURE__ */ import_react9.default.createElement(Provider, __spreadValues({}, prov[1]), acc);
+    }
+    return /* @__PURE__ */ import_react9.default.createElement(Provider, null, acc);
+  },
+  /* @__PURE__ */ import_react9.default.createElement(WrappedComponent, __spreadValues({}, props))
+);
+
+// src/withRef.tsx
+var import_react10 = __toESM(require("react"));
+function withRef(renderFunction) {
+  return import_react10.default.forwardRef(renderFunction);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Box,
+  CAN_USE_DOM,
+  DEFAULT_IGNORE_CLASS,
+  PortalBody,
+  Text,
+  composeEventHandlers,
+  composeRefs,
+  createPrimitiveComponent,
+  createPrimitiveElement,
+  createSlotComponent,
+  useComposedRef,
+  useIsomorphicLayoutEffect,
+  useOnClickOutside,
+  useStableMemo,
+  withProviders,
+  withRef
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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<object>,\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"]}

package/dist/index.mjs

@@ -0,0 +1,312 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/createSlotComponent.tsx
+import React from "react";
+import { Slot } from "@radix-ui/react-slot";
+var createSlotComponent = (element) => (
+  // eslint-disable-next-line react/display-name
+  React.forwardRef((_a, ref) => {
+    var _b = _a, { as, asChild = false } = _b, props = __objRest(_b, ["as", "asChild"]);
+    const Comp = asChild ? Slot : as || element;
+    return /* @__PURE__ */ React.createElement(Comp, __spreadValues({ ref }, props));
+  })
+);
+
+// src/Box.tsx
+var Box = createSlotComponent("div");
+
+// src/PortalBody.tsx
+import React2 from "react";
+import ReactDOM from "react-dom";
+var PortalBody = ({
+  children,
+  element
+}) => {
+  const container = element || typeof window !== "undefined" ? document.body : void 0;
+  if (!container)
+    return /* @__PURE__ */ React2.createElement(React2.Fragment, null, children);
+  return ReactDOM.createPortal(children, element || document.body);
+};
+
+// src/Text.tsx
+var Text = createSlotComponent("span");
+
+// src/composeEventHandlers.ts
+var composeEventHandlers = (originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) => (event) => {
+  originalEventHandler == null ? void 0 : originalEventHandler(event);
+  if (checkForDefaultPrevented === false || !event.defaultPrevented) {
+    return ourEventHandler == null ? void 0 : ourEventHandler(event);
+  }
+};
+
+// src/createPrimitiveComponent.tsx
+import React4 from "react";
+import { isDefined } from "@udecode/utils";
+import { clsx } from "clsx";
+
+// src/useComposedRef.ts
+import React3 from "react";
+var setRef = (ref, value) => {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+};
+var composeRefs = (...refs) => (node) => refs.forEach((ref) => setRef(ref, node));
+var useComposedRef = (...refs) => {
+  return React3.useCallback(composeRefs(...refs), refs);
+};
+
+// src/createPrimitiveComponent.tsx
+var createPrimitiveComponent = (element) => {
+  const Comp = createSlotComponent(element);
+  return ({
+    propsHook,
+    stateHook
+  } = {}) => {
+    return React4.forwardRef(
+      (_a, ref) => {
+        var _b = _a, {
+          asChild,
+          options,
+          state: stateProp,
+          className: classNameProp,
+          getClassName
+        } = _b, props = __objRest(_b, [
+          "asChild",
+          "options",
+          "state",
+          "className",
+          "getClassName"
+        ]);
+        var _a2, _b2;
+        const state = isDefined(stateProp) ? stateProp : stateHook ? stateHook(options) : void 0;
+        const {
+          ref: hookRef,
+          props: hookProps,
+          hidden
+        } = propsHook ? propsHook(state) : { props: {}, hidden: false, ref: null };
+        const _ref = useComposedRef(ref, hookRef);
+        const className = isDefined(hookProps == null ? void 0 : hookProps.className) || isDefined(classNameProp) ? clsx(hookProps == null ? void 0 : hookProps.className, classNameProp) : void 0;
+        const style = (hookProps == null ? void 0 : hookProps.style) || props.style ? __spreadValues(__spreadValues({}, hookProps == null ? void 0 : hookProps.style), props.style) : void 0;
+        if (!asChild && hidden)
+          return null;
+        return /* @__PURE__ */ React4.createElement(
+          Comp,
+          __spreadValues(__spreadValues(__spreadProps(__spreadValues({
+            ref: _ref,
+            asChild
+          }, hookProps), {
+            className,
+            style
+          }), props), (_b2 = (_a2 = props.setProps) == null ? void 0 : _a2.call(props, hookProps != null ? hookProps : {})) != null ? _b2 : {})
+        );
+      }
+    );
+  };
+};
+
+// src/createPrimitiveElement.tsx
+import React5 from "react";
+function createPrimitiveElement(tag) {
+  return React5.forwardRef(
+    function CreateComponent(props, ref) {
+      return React5.createElement(tag, __spreadProps(__spreadValues({}, props), { ref }));
+    }
+  );
+}
+
+// src/useIsomorphicLayoutEffect.ts
+import React6 from "react";
+var CAN_USE_DOM = typeof window !== "undefined" && window.document !== void 0 && window.document.createElement !== void 0;
+var useIsomorphicLayoutEffect = CAN_USE_DOM ? React6.useLayoutEffect : React6.useEffect;
+
+// src/useOnClickOutside.ts
+import React7 from "react";
+var canUsePassiveEvents = () => {
+  if (typeof window === "undefined" || typeof window.addEventListener !== "function")
+    return false;
+  let passive = false;
+  const options = Object.defineProperty({}, "passive", {
+    // eslint-disable-next-line getter-return
+    get() {
+      passive = true;
+    }
+  });
+  const noop = () => null;
+  window.addEventListener("test", noop, options);
+  window.removeEventListener("test", noop, options);
+  return passive;
+};
+var DEFAULT_IGNORE_CLASS = "ignore-onclickoutside";
+var checkClass = (el, cl) => {
+  var _a;
+  return (_a = el.classList) == null ? void 0 : _a.contains(cl);
+};
+var hasIgnoreClass = (e, ignoreClass) => {
+  let el = e.target || e;
+  while (el) {
+    if (Array.isArray(ignoreClass)) {
+      if (ignoreClass.some((c) => checkClass(el, c)))
+        return true;
+    } else if (checkClass(el, ignoreClass)) {
+      return true;
+    }
+    el = el.parentElement;
+  }
+  return false;
+};
+var clickedOnScrollbar = (e) => document.documentElement.clientWidth <= e.clientX || document.documentElement.clientHeight <= e.clientY;
+var getEventOptions = (type) => type.includes("touch") && canUsePassiveEvents() ? { passive: true } : false;
+var useOnClickOutside = (callback, {
+  refs: refsOpt,
+  disabled,
+  eventTypes = ["mousedown", "touchstart"],
+  excludeScrollbar,
+  ignoreClass = DEFAULT_IGNORE_CLASS,
+  detectIFrame = true
+} = {}) => {
+  const [refsState, setRefsState] = React7.useState([]);
+  const callbackRef = React7.useRef(callback);
+  callbackRef.current = callback;
+  const ref = React7.useCallback(
+    (el) => setRefsState((prevState) => [...prevState, { current: el }]),
+    []
+  );
+  React7.useEffect(
+    () => {
+      if (!(refsOpt == null ? void 0 : refsOpt.length) && refsState.length === 0)
+        return;
+      const getEls = () => {
+        const els = [];
+        (refsOpt || refsState).forEach(
+          ({ current }) => current && els.push(current)
+        );
+        return els;
+      };
+      const handler = (e) => {
+        if (!hasIgnoreClass(e, ignoreClass) && !(excludeScrollbar && clickedOnScrollbar(e)) && getEls().every((el) => !el.contains(e.target)))
+          callbackRef.current(e);
+      };
+      const blurHandler = (e) => (
+        // On firefox the iframe becomes document.activeElement in the next event loop
+        setTimeout(() => {
+          const { activeElement } = document;
+          if ((activeElement == null ? void 0 : activeElement.tagName) === "IFRAME" && !hasIgnoreClass(activeElement, ignoreClass) && !getEls().includes(activeElement))
+            callbackRef.current(e);
+        }, 0)
+      );
+      const removeEventListener = () => {
+        eventTypes.forEach(
+          (type) => (
+            // @ts-ignore
+            document.removeEventListener(type, handler, getEventOptions(type))
+          )
+        );
+        if (detectIFrame)
+          window.removeEventListener("blur", blurHandler);
+      };
+      if (disabled) {
+        removeEventListener();
+        return;
+      }
+      eventTypes.forEach(
+        (type) => document.addEventListener(type, handler, getEventOptions(type))
+      );
+      if (detectIFrame)
+        window.addEventListener("blur", blurHandler);
+      return () => removeEventListener();
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      refsState,
+      ignoreClass,
+      excludeScrollbar,
+      disabled,
+      detectIFrame,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      JSON.stringify(eventTypes)
+    ]
+  );
+  return ref;
+};
+
+// src/useStableMemo.ts
+import React8 from "react";
+var useStableMemo = (producer, deps) => {
+  const [value, setValue] = React8.useState(producer);
+  React8.useLayoutEffect(() => {
+    setValue(producer);
+  }, deps);
+  return value;
+};
+
+// src/withProviders.tsx
+import React9 from "react";
+var withProviders = (...providers) => (WrappedComponent) => (props) => providers.reduceRight(
+  (acc, prov) => {
+    let Provider = prov;
+    if (Array.isArray(prov)) {
+      [Provider] = prov;
+      return /* @__PURE__ */ React9.createElement(Provider, __spreadValues({}, prov[1]), acc);
+    }
+    return /* @__PURE__ */ React9.createElement(Provider, null, acc);
+  },
+  /* @__PURE__ */ React9.createElement(WrappedComponent, __spreadValues({}, props))
+);
+
+// src/withRef.tsx
+import React10 from "react";
+function withRef(renderFunction) {
+  return React10.forwardRef(renderFunction);
+}
+export {
+  Box,
+  CAN_USE_DOM,
+  DEFAULT_IGNORE_CLASS,
+  PortalBody,
+  Text,
+  composeEventHandlers,
+  composeRefs,
+  createPrimitiveComponent,
+  createPrimitiveElement,
+  createSlotComponent,
+  useComposedRef,
+  useIsomorphicLayoutEffect,
+  useOnClickOutside,
+  useStableMemo,
+  withProviders,
+  withRef
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +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<object>,\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"]}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@udecode/react-utils",
+  "version": "29.0.0",
+  "description": "Udecode React utils",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/udecode/plate.git",
+    "directory": "packages/react-utils"
+  },
+  "bugs": {
+    "url": "https://github.com/udecode/plate/issues"
+  },
+  "sideEffects": false,
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "module": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "yarn p:build",
+    "build:watch": "yarn p:build:watch",
+    "brl": "yarn p:brl",
+    "clean": "yarn p:clean",
+    "lint": "yarn p:lint",
+    "lint:fix": "yarn p:lint:fix",
+    "test": "yarn p:test",
+    "test:watch": "yarn p:test:watch",
+    "typecheck": "yarn p:typecheck"
+  },
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.0.2",
+    "@udecode/utils": "24.3.0",
+    "clsx": "^1.2.1"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "keywords": [
+    "utils"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}