@react-fabric/form 1.0.0-beta.15 → 1.0.0-beta.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/input/ArrayInput.js +1 -1
- package/dist/cjs/input/Field.js +3 -2
- package/dist/cjs/input/RadioGroup.js +2 -1
- package/dist/esm/input/ArrayInput.js +3 -3
- package/dist/esm/input/Field.js +4 -3
- package/dist/esm/input/RadioGroup.js +3 -2
- package/package.json +5 -5
- package/src/input/ArrayInput.tsx +2 -3
- package/src/input/Field.tsx +6 -8
- package/src/input/RadioGroup.tsx +4 -3
|
@@ -138,7 +138,7 @@ var ArrayInput = function ArrayInput(_ref) {
|
|
|
138
138
|
children: [typeof children === "function" ? children({
|
|
139
139
|
index: index,
|
|
140
140
|
name: "".concat(name, ".").concat(index)
|
|
141
|
-
}) :
|
|
141
|
+
}) : utilities$1.cloneChildren(children, function (child) {
|
|
142
142
|
return /*#__PURE__*/react.cloneElement(child, Object.assign({
|
|
143
143
|
disabled: disabled,
|
|
144
144
|
readOnly: readOnly,
|
package/dist/cjs/input/Field.js
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
4
4
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
5
|
+
var utilities = require('@react-fabric/utilities');
|
|
5
6
|
var classNames = require('classnames');
|
|
6
7
|
var react = require('react');
|
|
7
8
|
var Field_module = require('../internal/Field.module.css');
|
|
@@ -20,8 +21,8 @@ var Field = function Field(_ref) {
|
|
|
20
21
|
return /*#__PURE__*/jsxRuntime.jsx(FieldWrapper.FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
|
|
21
22
|
children: /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
22
23
|
className: classNames(Field_module.fieldGroup, !plain && !noOutline && "outline", !plain && "bg-base", "flex-1 rounded", !vertical && "flex flex-nowrap"),
|
|
23
|
-
children:
|
|
24
|
-
return
|
|
24
|
+
children: utilities.cloneChildren(children, function (child) {
|
|
25
|
+
return /*#__PURE__*/react.cloneElement(child, {
|
|
25
26
|
"data-inner": true
|
|
26
27
|
});
|
|
27
28
|
})
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
4
4
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
5
|
+
var utilities = require('@react-fabric/utilities');
|
|
5
6
|
var react = require('react');
|
|
6
7
|
var FieldWrapper = require('../internal/FieldWrapper.js');
|
|
7
8
|
var jsxRuntime = require('react/jsx-runtime');
|
|
@@ -19,7 +20,7 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
19
20
|
return /*#__PURE__*/jsxRuntime.jsx(FieldWrapper.FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
|
|
20
21
|
children: /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
21
22
|
className: className,
|
|
22
|
-
children:
|
|
23
|
+
children: utilities.cloneChildren(children, function (child) {
|
|
23
24
|
return /*#__PURE__*/react.cloneElement(child, {
|
|
24
25
|
name: name,
|
|
25
26
|
onChange: onChange,
|
|
@@ -5,9 +5,9 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
|
|
|
5
5
|
import { DndContext } from '@dnd-kit/core';
|
|
6
6
|
import { SortableContext, useSortable } from '@dnd-kit/sortable';
|
|
7
7
|
import { Icon, CoreIcons, Button, Tooltip } from '@react-fabric/core';
|
|
8
|
-
import { isString } from '@react-fabric/utilities';
|
|
8
|
+
import { cloneChildren, isString } from '@react-fabric/utilities';
|
|
9
9
|
import classNames from 'classnames';
|
|
10
|
-
import { useMemo, useCallback, useImperativeHandle,
|
|
10
|
+
import { useMemo, useCallback, useImperativeHandle, cloneElement } from 'react';
|
|
11
11
|
import { useFormContext, useFieldArray } from 'react-hook-form';
|
|
12
12
|
import { useTranslation } from 'react-i18next';
|
|
13
13
|
import { FieldWrapper } from '../internal/FieldWrapper.js';
|
|
@@ -138,7 +138,7 @@ var ArrayInput = function ArrayInput(_ref) {
|
|
|
138
138
|
children: [typeof children === "function" ? children({
|
|
139
139
|
index: index,
|
|
140
140
|
name: "".concat(name, ".").concat(index)
|
|
141
|
-
}) :
|
|
141
|
+
}) : cloneChildren(children, function (child) {
|
|
142
142
|
return /*#__PURE__*/cloneElement(child, Object.assign({
|
|
143
143
|
disabled: disabled,
|
|
144
144
|
readOnly: readOnly,
|
package/dist/esm/input/Field.js
CHANGED
|
@@ -2,8 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
4
4
|
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
5
|
+
import { cloneChildren } from '@react-fabric/utilities';
|
|
5
6
|
import classNames from 'classnames';
|
|
6
|
-
import {
|
|
7
|
+
import { cloneElement } from 'react';
|
|
7
8
|
import classes from '../internal/Field.module.css';
|
|
8
9
|
import { FieldWrapper } from '../internal/FieldWrapper.js';
|
|
9
10
|
import { jsx } from 'react/jsx-runtime';
|
|
@@ -20,8 +21,8 @@ var Field = function Field(_ref) {
|
|
|
20
21
|
return /*#__PURE__*/jsx(FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
|
|
21
22
|
children: /*#__PURE__*/jsx("div", {
|
|
22
23
|
className: classNames(classes.fieldGroup, !plain && !noOutline && "outline", !plain && "bg-base", "flex-1 rounded", !vertical && "flex flex-nowrap"),
|
|
23
|
-
children:
|
|
24
|
-
return
|
|
24
|
+
children: cloneChildren(children, function (child) {
|
|
25
|
+
return /*#__PURE__*/cloneElement(child, {
|
|
25
26
|
"data-inner": true
|
|
26
27
|
});
|
|
27
28
|
})
|
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
4
4
|
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
5
|
-
import {
|
|
5
|
+
import { cloneChildren } from '@react-fabric/utilities';
|
|
6
|
+
import { cloneElement } from 'react';
|
|
6
7
|
import { FieldWrapper } from '../internal/FieldWrapper.js';
|
|
7
8
|
import { jsx } from 'react/jsx-runtime';
|
|
8
9
|
|
|
@@ -19,7 +20,7 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
19
20
|
return /*#__PURE__*/jsx(FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
|
|
20
21
|
children: /*#__PURE__*/jsx("div", {
|
|
21
22
|
className: className,
|
|
22
|
-
children:
|
|
23
|
+
children: cloneChildren(children, function (child) {
|
|
23
24
|
return /*#__PURE__*/cloneElement(child, {
|
|
24
25
|
name: name,
|
|
25
26
|
onChange: onChange,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-fabric/form",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.17",
|
|
4
4
|
"description": "RUF: Form package",
|
|
5
5
|
"author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -37,10 +37,10 @@
|
|
|
37
37
|
"@dnd-kit/modifiers": "^7.0.0",
|
|
38
38
|
"@dnd-kit/sortable": "^8.0.0",
|
|
39
39
|
"@dnd-kit/utilities": "^3.2.2",
|
|
40
|
-
"@floating-ui/react": "0.26.24",
|
|
40
|
+
"@floating-ui/react": "^0.26.24",
|
|
41
41
|
"@hookform/resolvers": "^3.9.0",
|
|
42
|
-
"@react-fabric/core": "^1.0.0-beta.
|
|
43
|
-
"@react-fabric/utilities": "^1.0.0-beta.
|
|
42
|
+
"@react-fabric/core": "^1.0.0-beta.17",
|
|
43
|
+
"@react-fabric/utilities": "^1.0.0-beta.17",
|
|
44
44
|
"classnames": "^2.5.1",
|
|
45
45
|
"color": "^4.2.3",
|
|
46
46
|
"react-color": "^2.19.3",
|
|
@@ -60,5 +60,5 @@
|
|
|
60
60
|
"node": ">=18.12.0",
|
|
61
61
|
"npm": ">=8.19.0"
|
|
62
62
|
},
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "a2a0f20255da48d1cbcbcfe100fd3fbd4d13da67"
|
|
64
64
|
}
|
package/src/input/ArrayInput.tsx
CHANGED
|
@@ -24,10 +24,9 @@
|
|
|
24
24
|
import { DndContext, type DragEndEvent } from "@dnd-kit/core";
|
|
25
25
|
import { SortableContext, useSortable } from "@dnd-kit/sortable";
|
|
26
26
|
import { Button, CoreIcons, Icon, Tooltip } from "@react-fabric/core";
|
|
27
|
-
import { isString } from "@react-fabric/utilities";
|
|
27
|
+
import { cloneChildren, isString } from "@react-fabric/utilities";
|
|
28
28
|
import classNames from "classnames";
|
|
29
29
|
import {
|
|
30
|
-
Children,
|
|
31
30
|
cloneElement,
|
|
32
31
|
useCallback,
|
|
33
32
|
useImperativeHandle,
|
|
@@ -255,7 +254,7 @@ export const ArrayInput = ({
|
|
|
255
254
|
index,
|
|
256
255
|
name: `${name}.${index}`,
|
|
257
256
|
})
|
|
258
|
-
:
|
|
257
|
+
: cloneChildren(children, (child: AnyObject) =>
|
|
259
258
|
cloneElement(
|
|
260
259
|
child,
|
|
261
260
|
Object.assign(
|
package/src/input/Field.tsx
CHANGED
|
@@ -25,8 +25,9 @@ import {
|
|
|
25
25
|
type ChildrenProp,
|
|
26
26
|
type CssProp,
|
|
27
27
|
} from "@react-fabric/core/dist/types/types";
|
|
28
|
+
import { cloneChildren } from "@react-fabric/utilities";
|
|
28
29
|
import classNames from "classnames";
|
|
29
|
-
import {
|
|
30
|
+
import { cloneElement } from "react";
|
|
30
31
|
import classes from "../internal/Field.module.css";
|
|
31
32
|
import { FieldWrapper } from "../internal/FieldWrapper";
|
|
32
33
|
|
|
@@ -90,13 +91,10 @@ export const Field = ({
|
|
|
90
91
|
!vertical && "flex flex-nowrap",
|
|
91
92
|
)}
|
|
92
93
|
>
|
|
93
|
-
{
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
cloneElement(child as AnyObject, {
|
|
98
|
-
"data-inner": true,
|
|
99
|
-
}),
|
|
94
|
+
{cloneChildren(children, (child: AnyObject) =>
|
|
95
|
+
cloneElement(child, {
|
|
96
|
+
"data-inner": true,
|
|
97
|
+
}),
|
|
100
98
|
)}
|
|
101
99
|
</div>
|
|
102
100
|
</FieldWrapper>
|
package/src/input/RadioGroup.tsx
CHANGED
|
@@ -25,7 +25,8 @@ import {
|
|
|
25
25
|
type ChildrenProp,
|
|
26
26
|
type CssProp,
|
|
27
27
|
} from "@react-fabric/core/dist/types/types";
|
|
28
|
-
import {
|
|
28
|
+
import { cloneChildren } from "@react-fabric/utilities";
|
|
29
|
+
import { cloneElement } from "react";
|
|
29
30
|
import { FieldWrapper } from "../internal/FieldWrapper";
|
|
30
31
|
import { type Radio } from "./Radio";
|
|
31
32
|
|
|
@@ -84,8 +85,8 @@ export const RadioGroup = ({
|
|
|
84
85
|
return (
|
|
85
86
|
<FieldWrapper {...rest}>
|
|
86
87
|
<div className={className}>
|
|
87
|
-
{
|
|
88
|
-
cloneElement(child
|
|
88
|
+
{cloneChildren(children, (child: AnyObject) =>
|
|
89
|
+
cloneElement(child, {
|
|
89
90
|
name,
|
|
90
91
|
onChange,
|
|
91
92
|
width: optionWidth,
|