@udecode/react-utils - npm Package Compare versions

Comparing version 31.0.0 to 33.0.0

dist/index.d.ts

 import React from 'react';
 
-declare const Box: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+declare const Box: React.ForwardRefExoticComponent<{
     as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
     asChild?: boolean | undefined;
-} & React.RefAttributes<any>>;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<any>>;
 type BoxProps = React.ComponentPropsWithRef<typeof Box>;
@@ -15,11 +15,9 @@
 
-declare const Text: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+declare const Text: React.ForwardRefExoticComponent<{
     as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
     asChild?: boolean | undefined;
-} & React.RefAttributes<any>>;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & 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
- */
+/** @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 }?: {
@@ -30,6 +28,7 @@ checkForDefaultPrevented?: boolean | undefined;
 /**
- * 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}.
+ * 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.
@@ -40,4 +39,3 @@ * - `state`: Provide your state instead of using the state hook.
  * - `setProps`: Function to set props from the props hook.
- * - `...props`: Props to be passed to the component.
- * Props hook return value:
+ * - `...props`: Props to be passed to the component. Props hook return value:
  * - `ref`: Reference to be forwarded to the component.
@@ -47,15 +45,14 @@ * - `props`: Props to be passed to the component.
  *
+ * @example
+ *   const MyButton = createPrimitiveComponent(Button)({
+ *     stateHook: useButtonState,
+ *     propsHook: useButton,
+ *   });
+ *
  * @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, keyof React.JSX.IntrinsicElements>, P extends React.PropsWithoutRef<React.ComponentProps<T>>>(element: T) => <SH extends (options: any) => any, PH extends (state: any) => any>({ propsHook, stateHook, }?: {
+    propsHook?: PH | undefined;
     stateHook?: SH | undefined;
-    propsHook?: PH | undefined;
 }) => React.ForwardRefExoticComponent<React.PropsWithoutRef<{
@@ -65,6 +62,6 @@ as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
     className?: string | undefined;
-    style?: React.CSSProperties | undefined;
     options?: Parameters<SH>[0] | undefined;
+    setProps?: ((hookProps: NonNullable<ReturnType<PH>['props']>) => P) | undefined;
     state?: Parameters<PH>[0] | undefined;
-    setProps?: ((hookProps: NonNullable<ReturnType<PH>['props']>) => P) | undefined;
+    style?: React.CSSProperties | undefined;
 } & P> & React.RefAttributes<any>>;
@@ -74,16 +71,16 @@
 
-declare const createSlotComponent: <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>, P extends React.PropsWithoutRef<React.ComponentProps<T>>>(element: T) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P & {
+declare const createSlotComponent: <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>, P extends React.PropsWithoutRef<React.ComponentProps<T>>>(element: T) => React.ForwardRefExoticComponent<React.PropsWithoutRef<{
     as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
     asChild?: boolean | undefined;
-}> & React.RefAttributes<any>>;
+} & P> & React.RefAttributes<any>>;
 
 type PossibleRef<T> = React.Ref<T> | undefined;
 /**
- * A utility to compose multiple refs together
- * Accepts callback refs and React.RefObject(s)
+ * 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)
+ * A custom hook that composes multiple refs Accepts callback refs and
+ * React.RefObject(s)
  */
@@ -94,3 +91,4 @@ declare const useComposedRef: <T>(...refs: PossibleRef<T>[]) => (node: T) => void;
 /**
- * Prevent warning on SSR by falling back to React.useEffect when DOM isn't available
+ * Prevent warning on SSR by falling back to React.useEffect when DOM isn't
+ * available
  */
@@ -100,9 +98,7 @@ declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;
 declare const DEFAULT_IGNORE_CLASS = "ignore-onclickoutside";
-interface UseOnClickOutsideCallback<T extends Event = Event> {
-    (event: T): void;
-}
+type UseOnClickOutsideCallback<T extends Event = Event> = (event: T) => void;
 type El = HTMLElement;
 type Refs = React.RefObject<El>[];
 interface UseOnClickOutsideOptions {
-    refs?: Refs;
+    detectIFrame?: boolean;
     disabled?: boolean;
@@ -112,8 +108,6 @@ eventTypes?: string[];
     ignoreClass?: string | string[];
-    detectIFrame?: boolean;
+    refs?: Refs;
 }
-interface UseOnClickOutsideReturn {
-    (element: El | null): void;
-}
-declare const useOnClickOutside: (callback: UseOnClickOutsideCallback, { refs: refsOpt, disabled, eventTypes, excludeScrollbar, ignoreClass, detectIFrame, }?: UseOnClickOutsideOptions) => UseOnClickOutsideReturn;
+type UseOnClickOutsideReturn = (element: El | null) => void;
+declare const useOnClickOutside: (callback: UseOnClickOutsideCallback, { detectIFrame, disabled, eventTypes, excludeScrollbar, ignoreClass, refs: refsOpt, }?: UseOnClickOutsideOptions) => UseOnClickOutsideReturn;
 
@@ -123,5 +117,4 @@ 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.
+ * Wrap a component into multiple providers. If there are any props that you
+ * want a provider to receive, you can simply pass an array.
  */
@@ -132,7 +125,8 @@ 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<any>, 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>>>;
+declare function withRef<T extends React.ComponentType<any> | keyof HTMLElementTagNameMap, E = {}>(renderFunction: React.ForwardRefRenderFunction<React.ElementRef<T>, E & Omit<React.ComponentPropsWithoutRef<T>, keyof E>>): React.ForwardRefExoticComponent<React.PropsWithoutRef<E & Omit<React.PropsWithoutRef<React.ComponentProps<T>>, keyof E>> & React.RefAttributes<React.ElementRef<T>>>;
 
 export { Box, type BoxProps, CAN_USE_DOM, DEFAULT_IGNORE_CLASS, PortalBody, type PortalBodyProps, Text, type TextProps, type UseOnClickOutsideCallback, type UseOnClickOutsideOptions, type UseOnClickOutsideReturn, composeEventHandlers, composeRefs, createPrimitiveComponent, createPrimitiveElement, createSlotComponent, useComposedRef, useIsomorphicLayoutEffect, useOnClickOutside, useStableMemo, withProviders, withRef };

dist/index.js

@@ -86,4 +86,4 @@ "use strict";
   // 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"]);
+  import_react.default.forwardRef((_a2, ref) => {
+    var _b = _a2, { as, asChild = false } = _b, props = __objRest(_b, ["as", "asChild"]);
     const Comp = asChild ? import_react_slot.Slot : as || element;
@@ -148,23 +148,23 @@ return /* @__PURE__ */ import_react.default.createElement(Comp, __spreadValues({ ref }, props));
     return import_react4.default.forwardRef(
-      (_a, ref) => {
-        var _b = _a, {
+      (_a2, ref) => {
+        var _b = _a2, {
           asChild,
+          className: classNameProp,
+          getClassName,
           options,
-          state: stateProp,
-          className: classNameProp,
-          getClassName
+          state: stateProp
         } = _b, props = __objRest(_b, [
           "asChild",
+          "className",
+          "getClassName",
           "options",
-          "state",
-          "className",
-          "getClassName"
+          "state"
         ]);
-        var _a2, _b2;
+        var _a3, _b2;
         const state = (0, import_utils.isDefined)(stateProp) ? stateProp : stateHook ? stateHook(options) : void 0;
         const {
-          ref: hookRef,
+          hidden,
           props: hookProps,
-          hidden
-        } = propsHook ? propsHook(state) : { props: {}, hidden: false, ref: null };
+          ref: hookRef
+        } = propsHook ? propsHook(state) : { hidden: false, props: {}, ref: null };
         const _ref = useComposedRef(ref, hookRef);
@@ -178,8 +178,8 @@ 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;
           __spreadValues(__spreadValues(__spreadProps(__spreadValues({
-            ref: _ref,
-            asChild
+            asChild,
+            ref: _ref
           }, hookProps), {
             className,
             style
-          }), props), (_b2 = (_a2 = props.setProps) == null ? void 0 : _a2.call(props, hookProps != null ? hookProps : {})) != null ? _b2 : {})
+          }), props), (_b2 = (_a3 = props.setProps) == null ? void 0 : _a3.call(props, hookProps != null ? hookProps : {})) != null ? _b2 : {})
         );
@@ -203,3 +203,4 @@ }
 var import_react6 = __toESM(require("react"));
-var CAN_USE_DOM = typeof window !== "undefined" && window.document !== void 0 && window.document.createElement !== void 0;
+var _a;
+var CAN_USE_DOM = typeof window !== "undefined" && ((_a = window.document) == null ? void 0 : _a.createElement) !== void 0;
 var useIsomorphicLayoutEffect = CAN_USE_DOM ? import_react6.default.useLayoutEffect : import_react6.default.useEffect;
@@ -226,4 +227,4 @@
 var checkClass = (el, cl) => {
-  var _a;
-  return (_a = el.classList) == null ? void 0 : _a.contains(cl);
+  var _a2;
+  return (_a2 = el.classList) == null ? void 0 : _a2.contains(cl);
 };
@@ -246,3 +247,3 @@ var hasIgnoreClass = (e, ignoreClass) => {
 var useOnClickOutside = (callback, {
-  refs: refsOpt,
+  detectIFrame = true,
   disabled,
@@ -252,3 +253,3 @@ eventTypes = ["mousedown", "touchstart"],
   ignoreClass = DEFAULT_IGNORE_CLASS,
-  detectIFrame = true
+  refs: refsOpt
 } = {}) => {
@@ -287,5 +288,6 @@ const [refsState, setRefsState] = import_react7.default.useState([]);
         eventTypes.forEach(
-          (type) => (
-            // @ts-ignore
-            document.removeEventListener(type, handler, getEventOptions(type))
+          (type) => document.removeEventListener(
+            type,
+            handler,
+            getEventOptions(type)
           )
@@ -292,0 +294,0 @@ );

package.json

 {
   "name": "@udecode/react-utils",
-  "version": "31.0.0",
+  "version": "33.0.0",
   "description": "Udecode React utils",
@@ -5,0 +5,0 @@ "license": "MIT",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

76491

increased by0.27%

Worsened metrics

Lines of code

755

decreased by-0.26%

No dependency changes