@kopexa/react-utils 2.0.5 → 2.0.6

package/dist/chunk-S5G552ZW.mjs

@@ -0,0 +1,41 @@
+"use client";
+
+// src/dom.ts
+import {
+  Children,
+  cloneElement
+} from "react";
+function mergeRefs(...inputRefs) {
+  const filteredInputRefs = inputRefs.filter(Boolean);
+  if (filteredInputRefs.length <= 1) {
+    const firstRef = filteredInputRefs[0];
+    return firstRef || null;
+  }
+  return function mergedRefs(ref) {
+    for (const inputRef of filteredInputRefs) {
+      if (typeof inputRef === "function") {
+        inputRef(ref);
+      } else if (inputRef) {
+        inputRef.current = ref;
+      }
+    }
+  };
+}
+function getSubtree(options, content) {
+  const { asChild, children } = options;
+  if (!asChild)
+    return typeof content === "function" ? content(children) : content;
+  const firstChild = Children.only(children);
+  return cloneElement(firstChild, {
+    // @ts-expect-error
+    children: typeof content === "function" ? (
+      // @ts-expect-error
+      content(firstChild.props.children)
+    ) : content
+  });
+}
+
+export {
+  mergeRefs,
+  getSubtree
+};

package/dist/dom.d.mts

@@ -1,4 +1,4 @@
-import { Ref, RefCallback } from 'react';
+import { Ref, RefCallback, ReactNode } from 'react';
 
 /**
  * A function that merges React refs into one.
@@ -13,5 +13,16 @@ import { Ref, RefCallback } from 'react';
  * @returns {Ref<T> | RefCallback<T>} Merged refs
  */
 declare function mergeRefs<T>(...inputRefs: (Ref<T> | undefined)[]): Ref<T> | RefCallback<T>;
+/**
+ * This is a helper function that is used when a component supports `asChild`
+ * using the `Slot` component but its implementation contains nested DOM elements.
+ *
+ * Using it ensures if a consumer uses the `asChild` prop, the elements are in
+ * correct order in the DOM, adopting the intended consumer `children`.
+ */
+declare function getSubtree(options: {
+    asChild: boolean | undefined;
+    children: ReactNode;
+}, content: ReactNode | ((children: ReactNode) => ReactNode)): ReactNode;
 
-export { mergeRefs };
+export { getSubtree, mergeRefs };

package/dist/dom.d.ts

@@ -1,4 +1,4 @@
-import { Ref, RefCallback } from 'react';
+import { Ref, RefCallback, ReactNode } from 'react';
 
 /**
  * A function that merges React refs into one.
@@ -13,5 +13,16 @@ import { Ref, RefCallback } from 'react';
  * @returns {Ref<T> | RefCallback<T>} Merged refs
  */
 declare function mergeRefs<T>(...inputRefs: (Ref<T> | undefined)[]): Ref<T> | RefCallback<T>;
+/**
+ * This is a helper function that is used when a component supports `asChild`
+ * using the `Slot` component but its implementation contains nested DOM elements.
+ *
+ * Using it ensures if a consumer uses the `asChild` prop, the elements are in
+ * correct order in the DOM, adopting the intended consumer `children`.
+ */
+declare function getSubtree(options: {
+    asChild: boolean | undefined;
+    children: ReactNode;
+}, content: ReactNode | ((children: ReactNode) => ReactNode)): ReactNode;
 
-export { mergeRefs };
+export { getSubtree, mergeRefs };

package/dist/dom.js

@@ -21,9 +21,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/dom.ts
 var dom_exports = {};
 __export(dom_exports, {
+  getSubtree: () => getSubtree,
   mergeRefs: () => mergeRefs
 });
 module.exports = __toCommonJS(dom_exports);
+var import_react = require("react");
 function mergeRefs(...inputRefs) {
   const filteredInputRefs = inputRefs.filter(Boolean);
   if (filteredInputRefs.length <= 1) {
@@ -40,7 +42,21 @@ function mergeRefs(...inputRefs) {
     }
   };
 }
+function getSubtree(options, content) {
+  const { asChild, children } = options;
+  if (!asChild)
+    return typeof content === "function" ? content(children) : content;
+  const firstChild = import_react.Children.only(children);
+  return (0, import_react.cloneElement)(firstChild, {
+    // @ts-expect-error
+    children: typeof content === "function" ? (
+      // @ts-expect-error
+      content(firstChild.props.children)
+    ) : content
+  });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  getSubtree,
   mergeRefs
 });

package/dist/dom.mjs

@@ -1,7 +1,9 @@
 "use client";
 import {
+  getSubtree,
   mergeRefs
-} from "./chunk-FGSQ5KEN.mjs";
+} from "./chunk-S5G552ZW.mjs";
 export {
+  getSubtree,
   mergeRefs
 };

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 export { getValidChildren } from './children.mjs';
 export { createContext } from './context.mjs';
-export { mergeRefs } from './dom.mjs';
-export { DOMAttributes, DOMElement, Merge, PropGetter } from './types.mjs';
+export { getSubtree, mergeRefs } from './dom.mjs';
+export { ComponentPropsWithout, DOMAttributes, DOMElement, Merge, PropGetter, RemovedProps } from './types.mjs';
 import 'react';

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { getValidChildren } from './children.js';
 export { createContext } from './context.js';
-export { mergeRefs } from './dom.js';
-export { DOMAttributes, DOMElement, Merge, PropGetter } from './types.js';
+export { getSubtree, mergeRefs } from './dom.js';
+export { ComponentPropsWithout, DOMAttributes, DOMElement, Merge, PropGetter, RemovedProps } from './types.js';
 import 'react';

package/dist/index.js

@@ -22,6 +22,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   createContext: () => createContext,
+  getSubtree: () => getSubtree,
   getValidChildren: () => getValidChildren,
   mergeRefs: () => mergeRefs
 });
@@ -68,6 +69,7 @@ function createContext(options = {}) {
 }
 
 // src/dom.ts
+var import_react3 = require("react");
 function mergeRefs(...inputRefs) {
   const filteredInputRefs = inputRefs.filter(Boolean);
   if (filteredInputRefs.length <= 1) {
@@ -84,9 +86,23 @@ function mergeRefs(...inputRefs) {
     }
   };
 }
+function getSubtree(options, content) {
+  const { asChild, children } = options;
+  if (!asChild)
+    return typeof content === "function" ? content(children) : content;
+  const firstChild = import_react3.Children.only(children);
+  return (0, import_react3.cloneElement)(firstChild, {
+    // @ts-expect-error
+    children: typeof content === "function" ? (
+      // @ts-expect-error
+      content(firstChild.props.children)
+    ) : content
+  });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   createContext,
+  getSubtree,
   getValidChildren,
   mergeRefs
 });

package/dist/index.mjs

@@ -6,10 +6,12 @@ import {
   createContext
 } from "./chunk-2DAVPPDT.mjs";
 import {
+  getSubtree,
   mergeRefs
-} from "./chunk-FGSQ5KEN.mjs";
+} from "./chunk-S5G552ZW.mjs";
 export {
   createContext,
+  getSubtree,
   getValidChildren,
   mergeRefs
 };

package/dist/types.d.mts

@@ -12,5 +12,7 @@ type DOMAttributes<T = DOMElement> = React.AriaAttributes & React.DOMAttributes<
 };
 type Merge<M, N> = N extends Record<string, unknown> ? M : Omit<M, keyof N> & N;
 type PropGetter<P = Record<string, unknown>, R = DOMAttributes> = (props?: Merge<DOMAttributes, P>, ref?: React.Ref<any>) => R & React.RefAttributes<any>;
+type RemovedProps = "asChild" | "defaultChecked" | "defaultValue" | "color";
+type ComponentPropsWithout<T extends React.ElementType, O extends Omit<string, keyof React.ComponentProps<T>> | keyof React.ComponentProps<T>> = Omit<React.ComponentProps<T>, O & string>;
 
-export type { DOMAttributes, DOMElement, Merge, PropGetter };
+export type { ComponentPropsWithout, DOMAttributes, DOMElement, Merge, PropGetter, RemovedProps };

package/dist/types.d.ts

@@ -12,5 +12,7 @@ type DOMAttributes<T = DOMElement> = React.AriaAttributes & React.DOMAttributes<
 };
 type Merge<M, N> = N extends Record<string, unknown> ? M : Omit<M, keyof N> & N;
 type PropGetter<P = Record<string, unknown>, R = DOMAttributes> = (props?: Merge<DOMAttributes, P>, ref?: React.Ref<any>) => R & React.RefAttributes<any>;
+type RemovedProps = "asChild" | "defaultChecked" | "defaultValue" | "color";
+type ComponentPropsWithout<T extends React.ElementType, O extends Omit<string, keyof React.ComponentProps<T>> | keyof React.ComponentProps<T>> = Omit<React.ComponentProps<T>, O & string>;
 
-export type { DOMAttributes, DOMElement, Merge, PropGetter };
+export type { ComponentPropsWithout, DOMAttributes, DOMElement, Merge, PropGetter, RemovedProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kopexa/react-utils",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "A set of utilities for react on client side",
   "keywords": [
     "react-utils"

package/dist/chunk-FGSQ5KEN.mjs

@@ -1,23 +0,0 @@
-"use client";
-
-// src/dom.ts
-function mergeRefs(...inputRefs) {
-  const filteredInputRefs = inputRefs.filter(Boolean);
-  if (filteredInputRefs.length <= 1) {
-    const firstRef = filteredInputRefs[0];
-    return firstRef || null;
-  }
-  return function mergedRefs(ref) {
-    for (const inputRef of filteredInputRefs) {
-      if (typeof inputRef === "function") {
-        inputRef(ref);
-      } else if (inputRef) {
-        inputRef.current = ref;
-      }
-    }
-  };
-}
-
-export {
-  mergeRefs
-};