@kopexa/react-utils 2.0.5 → 2.0.7

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.
@@ -0,0 +1,41 @@
1
+ "use client";
2
+
3
+ // src/dom.ts
4
+ import {
5
+ Children,
6
+ cloneElement
7
+ } from "react";
8
+ function mergeRefs(...inputRefs) {
9
+ const filteredInputRefs = inputRefs.filter(Boolean);
10
+ if (filteredInputRefs.length <= 1) {
11
+ const firstRef = filteredInputRefs[0];
12
+ return firstRef || null;
13
+ }
14
+ return function mergedRefs(ref) {
15
+ for (const inputRef of filteredInputRefs) {
16
+ if (typeof inputRef === "function") {
17
+ inputRef(ref);
18
+ } else if (inputRef) {
19
+ inputRef.current = ref;
20
+ }
21
+ }
22
+ };
23
+ }
24
+ function getSubtree(options, content) {
25
+ const { asChild, children } = options;
26
+ if (!asChild)
27
+ return typeof content === "function" ? content(children) : content;
28
+ const firstChild = Children.only(children);
29
+ return cloneElement(firstChild, {
30
+ // @ts-expect-error
31
+ children: typeof content === "function" ? (
32
+ // @ts-expect-error
33
+ content(firstChild.props.children)
34
+ ) : content
35
+ });
36
+ }
37
+
38
+ export {
39
+ mergeRefs,
40
+ getSubtree
41
+ };
package/dist/dom.d.mts CHANGED
@@ -1,4 +1,4 @@
1
- import { Ref, RefCallback } from 'react';
1
+ import { Ref, RefCallback, ReactNode } from 'react';
2
2
 
3
3
  /**
4
4
  * A function that merges React refs into one.
@@ -13,5 +13,16 @@ import { Ref, RefCallback } from 'react';
13
13
  * @returns {Ref<T> | RefCallback<T>} Merged refs
14
14
  */
15
15
  declare function mergeRefs<T>(...inputRefs: (Ref<T> | undefined)[]): Ref<T> | RefCallback<T>;
16
+ /**
17
+ * This is a helper function that is used when a component supports `asChild`
18
+ * using the `Slot` component but its implementation contains nested DOM elements.
19
+ *
20
+ * Using it ensures if a consumer uses the `asChild` prop, the elements are in
21
+ * correct order in the DOM, adopting the intended consumer `children`.
22
+ */
23
+ declare function getSubtree(options: {
24
+ asChild: boolean | undefined;
25
+ children: ReactNode;
26
+ }, content: ReactNode | ((children: ReactNode) => ReactNode)): ReactNode;
16
27
 
17
- export { mergeRefs };
28
+ export { getSubtree, mergeRefs };
package/dist/dom.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { Ref, RefCallback } from 'react';
1
+ import { Ref, RefCallback, ReactNode } from 'react';
2
2
 
3
3
  /**
4
4
  * A function that merges React refs into one.
@@ -13,5 +13,16 @@ import { Ref, RefCallback } from 'react';
13
13
  * @returns {Ref<T> | RefCallback<T>} Merged refs
14
14
  */
15
15
  declare function mergeRefs<T>(...inputRefs: (Ref<T> | undefined)[]): Ref<T> | RefCallback<T>;
16
+ /**
17
+ * This is a helper function that is used when a component supports `asChild`
18
+ * using the `Slot` component but its implementation contains nested DOM elements.
19
+ *
20
+ * Using it ensures if a consumer uses the `asChild` prop, the elements are in
21
+ * correct order in the DOM, adopting the intended consumer `children`.
22
+ */
23
+ declare function getSubtree(options: {
24
+ asChild: boolean | undefined;
25
+ children: ReactNode;
26
+ }, content: ReactNode | ((children: ReactNode) => ReactNode)): ReactNode;
16
27
 
17
- export { mergeRefs };
28
+ export { getSubtree, mergeRefs };
package/dist/dom.js CHANGED
@@ -21,9 +21,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
21
21
  // src/dom.ts
22
22
  var dom_exports = {};
23
23
  __export(dom_exports, {
24
+ getSubtree: () => getSubtree,
24
25
  mergeRefs: () => mergeRefs
25
26
  });
26
27
  module.exports = __toCommonJS(dom_exports);
28
+ var import_react = require("react");
27
29
  function mergeRefs(...inputRefs) {
28
30
  const filteredInputRefs = inputRefs.filter(Boolean);
29
31
  if (filteredInputRefs.length <= 1) {
@@ -40,7 +42,21 @@ function mergeRefs(...inputRefs) {
40
42
  }
41
43
  };
42
44
  }
45
+ function getSubtree(options, content) {
46
+ const { asChild, children } = options;
47
+ if (!asChild)
48
+ return typeof content === "function" ? content(children) : content;
49
+ const firstChild = import_react.Children.only(children);
50
+ return (0, import_react.cloneElement)(firstChild, {
51
+ // @ts-expect-error
52
+ children: typeof content === "function" ? (
53
+ // @ts-expect-error
54
+ content(firstChild.props.children)
55
+ ) : content
56
+ });
57
+ }
43
58
  // Annotate the CommonJS export names for ESM import in node:
44
59
  0 && (module.exports = {
60
+ getSubtree,
45
61
  mergeRefs
46
62
  });
package/dist/dom.mjs CHANGED
@@ -1,7 +1,9 @@
1
1
  "use client";
2
2
  import {
3
+ getSubtree,
3
4
  mergeRefs
4
- } from "./chunk-FGSQ5KEN.mjs";
5
+ } from "./chunk-S5G552ZW.mjs";
5
6
  export {
7
+ getSubtree,
6
8
  mergeRefs
7
9
  };
package/dist/index.d.mts CHANGED
@@ -1,5 +1,5 @@
1
1
  export { getValidChildren } from './children.mjs';
2
2
  export { createContext } from './context.mjs';
3
- export { mergeRefs } from './dom.mjs';
4
- export { DOMAttributes, DOMElement, Merge, PropGetter } from './types.mjs';
3
+ export { getSubtree, mergeRefs } from './dom.mjs';
4
+ export { ComponentPropsWithout, DOMAttributes, DOMElement, Merge, PropGetter, RemovedProps } from './types.mjs';
5
5
  import 'react';
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export { getValidChildren } from './children.js';
2
2
  export { createContext } from './context.js';
3
- export { mergeRefs } from './dom.js';
4
- export { DOMAttributes, DOMElement, Merge, PropGetter } from './types.js';
3
+ export { getSubtree, mergeRefs } from './dom.js';
4
+ export { ComponentPropsWithout, DOMAttributes, DOMElement, Merge, PropGetter, RemovedProps } from './types.js';
5
5
  import 'react';
package/dist/index.js CHANGED
@@ -22,6 +22,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
22
22
  var index_exports = {};
23
23
  __export(index_exports, {
24
24
  createContext: () => createContext,
25
+ getSubtree: () => getSubtree,
25
26
  getValidChildren: () => getValidChildren,
26
27
  mergeRefs: () => mergeRefs
27
28
  });
@@ -68,6 +69,7 @@ function createContext(options = {}) {
68
69
  }
69
70
 
70
71
  // src/dom.ts
72
+ var import_react3 = require("react");
71
73
  function mergeRefs(...inputRefs) {
72
74
  const filteredInputRefs = inputRefs.filter(Boolean);
73
75
  if (filteredInputRefs.length <= 1) {
@@ -84,9 +86,23 @@ function mergeRefs(...inputRefs) {
84
86
  }
85
87
  };
86
88
  }
89
+ function getSubtree(options, content) {
90
+ const { asChild, children } = options;
91
+ if (!asChild)
92
+ return typeof content === "function" ? content(children) : content;
93
+ const firstChild = import_react3.Children.only(children);
94
+ return (0, import_react3.cloneElement)(firstChild, {
95
+ // @ts-expect-error
96
+ children: typeof content === "function" ? (
97
+ // @ts-expect-error
98
+ content(firstChild.props.children)
99
+ ) : content
100
+ });
101
+ }
87
102
  // Annotate the CommonJS export names for ESM import in node:
88
103
  0 && (module.exports = {
89
104
  createContext,
105
+ getSubtree,
90
106
  getValidChildren,
91
107
  mergeRefs
92
108
  });
package/dist/index.mjs CHANGED
@@ -6,10 +6,12 @@ import {
6
6
  createContext
7
7
  } from "./chunk-2DAVPPDT.mjs";
8
8
  import {
9
+ getSubtree,
9
10
  mergeRefs
10
- } from "./chunk-FGSQ5KEN.mjs";
11
+ } from "./chunk-S5G552ZW.mjs";
11
12
  export {
12
13
  createContext,
14
+ getSubtree,
13
15
  getValidChildren,
14
16
  mergeRefs
15
17
  };
package/dist/types.d.mts CHANGED
@@ -12,5 +12,7 @@ type DOMAttributes<T = DOMElement> = React.AriaAttributes & React.DOMAttributes<
12
12
  };
13
13
  type Merge<M, N> = N extends Record<string, unknown> ? M : Omit<M, keyof N> & N;
14
14
  type PropGetter<P = Record<string, unknown>, R = DOMAttributes> = (props?: Merge<DOMAttributes, P>, ref?: React.Ref<any>) => R & React.RefAttributes<any>;
15
+ type RemovedProps = "asChild" | "defaultChecked" | "defaultValue" | "color";
16
+ type ComponentPropsWithout<T extends React.ElementType, O extends Omit<string, keyof React.ComponentProps<T>> | keyof React.ComponentProps<T>> = Omit<React.ComponentProps<T>, O & string>;
15
17
 
16
- export type { DOMAttributes, DOMElement, Merge, PropGetter };
18
+ export type { ComponentPropsWithout, DOMAttributes, DOMElement, Merge, PropGetter, RemovedProps };
package/dist/types.d.ts CHANGED
@@ -12,5 +12,7 @@ type DOMAttributes<T = DOMElement> = React.AriaAttributes & React.DOMAttributes<
12
12
  };
13
13
  type Merge<M, N> = N extends Record<string, unknown> ? M : Omit<M, keyof N> & N;
14
14
  type PropGetter<P = Record<string, unknown>, R = DOMAttributes> = (props?: Merge<DOMAttributes, P>, ref?: React.Ref<any>) => R & React.RefAttributes<any>;
15
+ type RemovedProps = "asChild" | "defaultChecked" | "defaultValue" | "color";
16
+ type ComponentPropsWithout<T extends React.ElementType, O extends Omit<string, keyof React.ComponentProps<T>> | keyof React.ComponentProps<T>> = Omit<React.ComponentProps<T>, O & string>;
15
17
 
16
- export type { DOMAttributes, DOMElement, Merge, PropGetter };
18
+ export type { ComponentPropsWithout, DOMAttributes, DOMElement, Merge, PropGetter, RemovedProps };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kopexa/react-utils",
3
- "version": "2.0.5",
3
+ "version": "2.0.7",
4
4
  "description": "A set of utilities for react on client side",
5
5
  "keywords": [
6
6
  "react-utils"
@@ -28,7 +28,7 @@
28
28
  "react": ">=19.0.0-rc.0"
29
29
  },
30
30
  "dependencies": {
31
- "@kopexa/shared-utils": "1.1.5"
31
+ "@kopexa/shared-utils": "1.1.6"
32
32
  },
33
33
  "clean-package": "../../../clean-package.config.json",
34
34
  "module": "dist/index.mjs",
@@ -1,23 +0,0 @@
1
- "use client";
2
-
3
- // src/dom.ts
4
- function mergeRefs(...inputRefs) {
5
- const filteredInputRefs = inputRefs.filter(Boolean);
6
- if (filteredInputRefs.length <= 1) {
7
- const firstRef = filteredInputRefs[0];
8
- return firstRef || null;
9
- }
10
- return function mergedRefs(ref) {
11
- for (const inputRef of filteredInputRefs) {
12
- if (typeof inputRef === "function") {
13
- inputRef(ref);
14
- } else if (inputRef) {
15
- inputRef.current = ref;
16
- }
17
- }
18
- };
19
- }
20
-
21
- export {
22
- mergeRefs
23
- };