@fuf-stack/uniform 0.14.3 → 0.14.5
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/CheckboxGroup/index.cjs +2 -2
- package/dist/CheckboxGroup/index.d.cts +2 -2
- package/dist/CheckboxGroup/index.d.ts +2 -2
- package/dist/CheckboxGroup/index.js +1 -1
- package/dist/FieldArray/index.cjs +2 -2
- package/dist/FieldArray/index.d.cts +2 -2
- package/dist/FieldArray/index.d.ts +2 -2
- package/dist/FieldArray/index.js +1 -1
- package/dist/{FieldArray-CAVDQ51R.d.cts → FieldArray-DD9z-xZ3.d.cts} +3 -2
- package/dist/{FieldArray-CAVDQ51R.d.ts → FieldArray-DD9z-xZ3.d.ts} +3 -2
- package/dist/Input/index.cjs +2 -2
- package/dist/Input/index.js +1 -1
- package/dist/RadioGroup/index.d.cts +2 -2
- package/dist/RadioGroup/index.d.ts +2 -2
- package/dist/Select/index.d.cts +2 -2
- package/dist/Select/index.d.ts +2 -2
- package/dist/Switch/index.d.cts +2 -2
- package/dist/Switch/index.d.ts +2 -2
- package/dist/TextArea/index.cjs +2 -2
- package/dist/TextArea/index.js +1 -1
- package/dist/{chunk-XJGJ5ZNM.js → chunk-BYKOCVCK.js} +21 -9
- package/dist/chunk-BYKOCVCK.js.map +1 -0
- package/dist/{chunk-P3APABJJ.cjs → chunk-HOETR36J.cjs} +7 -6
- package/dist/chunk-HOETR36J.cjs.map +1 -0
- package/dist/{chunk-AQHKELUR.js → chunk-QCVTB2NI.js} +4 -3
- package/dist/chunk-QCVTB2NI.js.map +1 -0
- package/dist/{chunk-TR2J3OKH.js → chunk-QW44EUAH.js} +15 -8
- package/dist/chunk-QW44EUAH.js.map +1 -0
- package/dist/{chunk-U6VUNJZG.cjs → chunk-RBIX6EWU.cjs} +16 -9
- package/dist/chunk-RBIX6EWU.cjs.map +1 -0
- package/dist/{chunk-RY4F5YDS.cjs → chunk-XCZKNTFT.cjs} +21 -9
- package/dist/chunk-XCZKNTFT.cjs.map +1 -0
- package/dist/{chunk-25LLM544.cjs → chunk-Y3SFF6RN.cjs} +5 -4
- package/dist/chunk-Y3SFF6RN.cjs.map +1 -0
- package/dist/{chunk-EEOOSLP2.js → chunk-Y53IHK6B.js} +7 -6
- package/dist/chunk-Y53IHK6B.js.map +1 -0
- package/dist/hooks/index.d.cts +2 -2
- package/dist/hooks/index.d.ts +2 -2
- package/dist/index.cjs +8 -8
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +5 -5
- package/dist/index.d.ts +5 -5
- package/dist/index.js +7 -7
- package/package.json +7 -7
- package/dist/chunk-25LLM544.cjs.map +0 -1
- package/dist/chunk-AQHKELUR.js.map +0 -1
- package/dist/chunk-EEOOSLP2.js.map +0 -1
- package/dist/chunk-P3APABJJ.cjs.map +0 -1
- package/dist/chunk-RY4F5YDS.cjs.map +0 -1
- package/dist/chunk-TR2J3OKH.js.map +0 -1
- package/dist/chunk-U6VUNJZG.cjs.map +0 -1
- package/dist/chunk-XJGJ5ZNM.js.map +0 -1
- package/dist/{CheckboxGroup-DYxaS51b.d.cts → CheckboxGroup-o-qWkWe1.d.cts} +5 -5
- package/dist/{CheckboxGroup-DYxaS51b.d.ts → CheckboxGroup-o-qWkWe1.d.ts} +5 -5
- package/dist/{RadioGroup-DEwUwnRi.d.cts → RadioGroup-1J39ASHa.d.cts} +5 -5
- package/dist/{RadioGroup-DEwUwnRi.d.ts → RadioGroup-1J39ASHa.d.ts} +5 -5
- package/dist/{Select-Da_AtPOX.d.cts → Select-BhS4z0Pj.d.cts} +15 -15
- package/dist/{Select-Da_AtPOX.d.ts → Select-BhS4z0Pj.d.ts} +15 -15
- package/dist/{Switch-Coq_VhBW.d.cts → Switch-Fdldj8LV.d.cts} +5 -5
- package/dist/{Switch-Coq_VhBW.d.ts → Switch-Fdldj8LV.d.ts} +5 -5
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _chunkXCZKNTFTcjs = require('../chunk-XCZKNTFT.cjs');
|
|
5
5
|
require('../chunk-VQWKXSHW.cjs');
|
|
6
6
|
require('../chunk-JU5RT22Y.cjs');
|
|
7
7
|
require('../chunk-OHJYXA6R.cjs');
|
|
@@ -10,5 +10,5 @@ require('../chunk-BBB4FEY6.cjs');
|
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
13
|
-
exports.CheckboxGroup =
|
|
13
|
+
exports.CheckboxGroup = _chunkXCZKNTFTcjs.CheckboxGroup_default; exports.default = _chunkXCZKNTFTcjs.CheckboxGroup_default2;
|
|
14
14
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { C as CheckboxGroup } from '../CheckboxGroup-
|
|
2
|
-
export { b as CheckboxGroupOption, a as CheckboxGroupProps } from '../CheckboxGroup-
|
|
1
|
+
import { C as CheckboxGroup } from '../CheckboxGroup-o-qWkWe1.cjs';
|
|
2
|
+
export { b as CheckboxGroupOption, a as CheckboxGroupProps } from '../CheckboxGroup-o-qWkWe1.cjs';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
4
|
import 'tailwind-variants/dist/config.js';
|
|
5
5
|
import 'tailwind-variants';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { C as CheckboxGroup } from '../CheckboxGroup-
|
|
2
|
-
export { b as CheckboxGroupOption, a as CheckboxGroupProps } from '../CheckboxGroup-
|
|
1
|
+
import { C as CheckboxGroup } from '../CheckboxGroup-o-qWkWe1.js';
|
|
2
|
+
export { b as CheckboxGroupOption, a as CheckboxGroupProps } from '../CheckboxGroup-o-qWkWe1.js';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
4
|
import 'tailwind-variants/dist/config.js';
|
|
5
5
|
import 'tailwind-variants';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _chunkHOETR36Jcjs = require('../chunk-HOETR36J.cjs');
|
|
5
5
|
require('../chunk-JU5RT22Y.cjs');
|
|
6
6
|
require('../chunk-OHJYXA6R.cjs');
|
|
7
7
|
require('../chunk-XJWEUCV3.cjs');
|
|
@@ -9,5 +9,5 @@ require('../chunk-BBB4FEY6.cjs');
|
|
|
9
9
|
|
|
10
10
|
|
|
11
11
|
|
|
12
|
-
exports.FieldArray =
|
|
12
|
+
exports.FieldArray = _chunkHOETR36Jcjs.FieldArray_default; exports.default = _chunkHOETR36Jcjs.FieldArray_default2;
|
|
13
13
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { F as FieldArray } from '../FieldArray-
|
|
2
|
-
export { c as FieldArrayFieldChildren, b as FieldArrayHideOption, a as FieldArrayProps } from '../FieldArray-
|
|
1
|
+
import { F as FieldArray } from '../FieldArray-DD9z-xZ3.cjs';
|
|
2
|
+
export { c as FieldArrayFieldChildren, b as FieldArrayHideOption, a as FieldArrayProps } from '../FieldArray-DD9z-xZ3.cjs';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
4
|
import 'react';
|
|
5
5
|
import 'react-hook-form';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { F as FieldArray } from '../FieldArray-
|
|
2
|
-
export { c as FieldArrayFieldChildren, b as FieldArrayHideOption, a as FieldArrayProps } from '../FieldArray-
|
|
1
|
+
import { F as FieldArray } from '../FieldArray-DD9z-xZ3.js';
|
|
2
|
+
export { c as FieldArrayFieldChildren, b as FieldArrayHideOption, a as FieldArrayProps } from '../FieldArray-DD9z-xZ3.js';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
4
|
import 'react';
|
|
5
5
|
import 'react-hook-form';
|
package/dist/FieldArray/index.js
CHANGED
|
@@ -16,12 +16,13 @@ type MoveField = 'drag-drop' | 'button';
|
|
|
16
16
|
interface FieldArrayProps {
|
|
17
17
|
/** function that renders the children with provided Properties. */
|
|
18
18
|
children: FieldArrayFieldChildren;
|
|
19
|
+
elementInitialValue?: unknown;
|
|
19
20
|
/** Hide a set of buttons. */
|
|
20
21
|
hideButtons?: FieldArrayHideOption[];
|
|
21
22
|
/** label of the FieldArray. */
|
|
22
23
|
label?: React.ReactNode;
|
|
23
24
|
/** stops user from deleting all items. */
|
|
24
|
-
|
|
25
|
+
lastElementNotDeletable?: boolean;
|
|
25
26
|
/** name the FieldArray is registered in RHF */
|
|
26
27
|
name: string;
|
|
27
28
|
/** ID for test purposes. */
|
|
@@ -31,6 +32,6 @@ interface FieldArrayProps {
|
|
|
31
32
|
/**
|
|
32
33
|
* FieldArray component using react-hook-form
|
|
33
34
|
*/
|
|
34
|
-
declare const FieldArray: ({ children, hideButtons, label: _label,
|
|
35
|
+
declare const FieldArray: ({ children, elementInitialValue, hideButtons, label: _label, lastElementNotDeletable, name, testId: _testId, moveField, }: FieldArrayProps) => react_jsx_runtime.JSX.Element;
|
|
35
36
|
|
|
36
37
|
export { FieldArray as F, type FieldArrayProps as a, type FieldArrayHideOption as b, type FieldArrayFieldChildren as c };
|
|
@@ -16,12 +16,13 @@ type MoveField = 'drag-drop' | 'button';
|
|
|
16
16
|
interface FieldArrayProps {
|
|
17
17
|
/** function that renders the children with provided Properties. */
|
|
18
18
|
children: FieldArrayFieldChildren;
|
|
19
|
+
elementInitialValue?: unknown;
|
|
19
20
|
/** Hide a set of buttons. */
|
|
20
21
|
hideButtons?: FieldArrayHideOption[];
|
|
21
22
|
/** label of the FieldArray. */
|
|
22
23
|
label?: React.ReactNode;
|
|
23
24
|
/** stops user from deleting all items. */
|
|
24
|
-
|
|
25
|
+
lastElementNotDeletable?: boolean;
|
|
25
26
|
/** name the FieldArray is registered in RHF */
|
|
26
27
|
name: string;
|
|
27
28
|
/** ID for test purposes. */
|
|
@@ -31,6 +32,6 @@ interface FieldArrayProps {
|
|
|
31
32
|
/**
|
|
32
33
|
* FieldArray component using react-hook-form
|
|
33
34
|
*/
|
|
34
|
-
declare const FieldArray: ({ children, hideButtons, label: _label,
|
|
35
|
+
declare const FieldArray: ({ children, elementInitialValue, hideButtons, label: _label, lastElementNotDeletable, name, testId: _testId, moveField, }: FieldArrayProps) => react_jsx_runtime.JSX.Element;
|
|
35
36
|
|
|
36
37
|
export { FieldArray as F, type FieldArrayProps as a, type FieldArrayHideOption as b, type FieldArrayFieldChildren as c };
|
package/dist/Input/index.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _chunkRBIX6EWUcjs = require('../chunk-RBIX6EWU.cjs');
|
|
5
5
|
require('../chunk-VQWKXSHW.cjs');
|
|
6
6
|
require('../chunk-JU5RT22Y.cjs');
|
|
7
7
|
require('../chunk-OHJYXA6R.cjs');
|
|
@@ -10,5 +10,5 @@ require('../chunk-BBB4FEY6.cjs');
|
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
13
|
-
exports.Input =
|
|
13
|
+
exports.Input = _chunkRBIX6EWUcjs.Input_default; exports.default = _chunkRBIX6EWUcjs.Input_default2;
|
|
14
14
|
//# sourceMappingURL=index.cjs.map
|
package/dist/Input/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { R as RadioGroup } from '../RadioGroup-
|
|
2
|
-
export { a as RadioGroupProps } from '../RadioGroup-
|
|
1
|
+
import { R as RadioGroup } from '../RadioGroup-1J39ASHa.cjs';
|
|
2
|
+
export { a as RadioGroupProps } from '../RadioGroup-1J39ASHa.cjs';
|
|
3
3
|
import 'tailwind-variants/dist/config.js';
|
|
4
4
|
import 'tailwind-variants';
|
|
5
5
|
import '@fuf-stack/pixel-utils';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { R as RadioGroup } from '../RadioGroup-
|
|
2
|
-
export { a as RadioGroupProps } from '../RadioGroup-
|
|
1
|
+
import { R as RadioGroup } from '../RadioGroup-1J39ASHa.js';
|
|
2
|
+
export { a as RadioGroupProps } from '../RadioGroup-1J39ASHa.js';
|
|
3
3
|
import 'tailwind-variants/dist/config.js';
|
|
4
4
|
import 'tailwind-variants';
|
|
5
5
|
import '@fuf-stack/pixel-utils';
|
package/dist/Select/index.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { S as Select } from '../Select-
|
|
2
|
-
export { a as SelectProps } from '../Select-
|
|
1
|
+
import { S as Select } from '../Select-BhS4z0Pj.cjs';
|
|
2
|
+
export { a as SelectProps } from '../Select-BhS4z0Pj.cjs';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
4
|
import 'tailwind-variants/dist/config.js';
|
|
5
5
|
import 'tailwind-variants';
|
package/dist/Select/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { S as Select } from '../Select-
|
|
2
|
-
export { a as SelectProps } from '../Select-
|
|
1
|
+
import { S as Select } from '../Select-BhS4z0Pj.js';
|
|
2
|
+
export { a as SelectProps } from '../Select-BhS4z0Pj.js';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
4
|
import 'tailwind-variants/dist/config.js';
|
|
5
5
|
import 'tailwind-variants';
|
package/dist/Switch/index.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { S as Switch } from '../Switch-
|
|
2
|
-
export { a as SwitchProps } from '../Switch-
|
|
1
|
+
import { S as Switch } from '../Switch-Fdldj8LV.cjs';
|
|
2
|
+
export { a as SwitchProps } from '../Switch-Fdldj8LV.cjs';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
4
|
import 'tailwind-variants/dist/config.js';
|
|
5
5
|
import 'tailwind-variants';
|
package/dist/Switch/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { S as Switch } from '../Switch-
|
|
2
|
-
export { a as SwitchProps } from '../Switch-
|
|
1
|
+
import { S as Switch } from '../Switch-Fdldj8LV.js';
|
|
2
|
+
export { a as SwitchProps } from '../Switch-Fdldj8LV.js';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
4
|
import 'tailwind-variants/dist/config.js';
|
|
5
5
|
import 'tailwind-variants';
|
package/dist/TextArea/index.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _chunkY3SFF6RNcjs = require('../chunk-Y3SFF6RN.cjs');
|
|
5
5
|
require('../chunk-VQWKXSHW.cjs');
|
|
6
6
|
require('../chunk-JU5RT22Y.cjs');
|
|
7
7
|
require('../chunk-OHJYXA6R.cjs');
|
|
@@ -10,5 +10,5 @@ require('../chunk-BBB4FEY6.cjs');
|
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
13
|
-
exports.TextArea =
|
|
13
|
+
exports.TextArea = _chunkY3SFF6RNcjs.TextArea_default; exports.default = _chunkY3SFF6RNcjs.TextArea_default2;
|
|
14
14
|
//# sourceMappingURL=index.cjs.map
|
package/dist/TextArea/index.js
CHANGED
|
@@ -66,7 +66,25 @@ var CheckboxGroup = ({
|
|
|
66
66
|
control,
|
|
67
67
|
name,
|
|
68
68
|
disabled,
|
|
69
|
-
render: ({ field: { onChange, value, ref, onBlur } }) => {
|
|
69
|
+
render: ({ field: { onChange, value = [], ref, onBlur } }) => {
|
|
70
|
+
const getCheckboxValue = (inputValue) => {
|
|
71
|
+
if (Array.isArray(inputValue)) {
|
|
72
|
+
return inputValue;
|
|
73
|
+
}
|
|
74
|
+
if (inputValue) {
|
|
75
|
+
return [inputValue];
|
|
76
|
+
}
|
|
77
|
+
return [];
|
|
78
|
+
};
|
|
79
|
+
const singleCheckboxProps = {
|
|
80
|
+
value: getCheckboxValue(value),
|
|
81
|
+
onChange: (newValue) => onChange(newValue && newValue[0])
|
|
82
|
+
};
|
|
83
|
+
const multipleCheckboxProps = {
|
|
84
|
+
onChange,
|
|
85
|
+
value: getCheckboxValue(value)
|
|
86
|
+
};
|
|
87
|
+
const checkboxGroupProps = options.length === 1 ? singleCheckboxProps : multipleCheckboxProps;
|
|
70
88
|
return /* @__PURE__ */ jsx(
|
|
71
89
|
NextCheckboxGroup,
|
|
72
90
|
{
|
|
@@ -89,15 +107,9 @@ var CheckboxGroup = ({
|
|
|
89
107
|
label,
|
|
90
108
|
showTestIdCopyButton && /* @__PURE__ */ jsx(FieldCopyTestIdButton_default, { testId })
|
|
91
109
|
] }),
|
|
92
|
-
...options.length === 1 ? {
|
|
93
|
-
value: [value].filter((v) => v !== void 0),
|
|
94
|
-
onChange: (newValue) => onChange(newValue && newValue[0])
|
|
95
|
-
} : {
|
|
96
|
-
onChange,
|
|
97
|
-
value
|
|
98
|
-
},
|
|
99
110
|
onBlur,
|
|
100
111
|
ref,
|
|
112
|
+
...checkboxGroupProps,
|
|
101
113
|
children: options?.map((option) => {
|
|
102
114
|
return /* @__PURE__ */ jsx(
|
|
103
115
|
Checkbox,
|
|
@@ -129,4 +141,4 @@ export {
|
|
|
129
141
|
CheckboxGroup_default,
|
|
130
142
|
CheckboxGroup_default2
|
|
131
143
|
};
|
|
132
|
-
//# sourceMappingURL=chunk-
|
|
144
|
+
//# sourceMappingURL=chunk-BYKOCVCK.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/CheckboxGroup/CheckboxGroup.tsx","../src/CheckboxGroup/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\n\nimport {\n Checkbox,\n CheckboxGroup as NextCheckboxGroup,\n} from '@nextui-org/checkbox';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { Controller } from '../Controller';\nimport { slugify } from '../helpers';\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const checkboxGroupVariants = tv({\n slots: {\n base: 'group', // Needs group for group-data condition\n errorMessage: 'text-tiny',\n itemBase: '',\n itemIcon: '',\n itemLabel: 'text-sm',\n itemWrapper: '',\n // See NextUI styles for group-data condition, e.g.: https://github.com/nextui-org/nextui/blob/main/packages/core/theme/src/components/select.ts\n label:\n 'text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger',\n wrapper: '',\n },\n});\n\ntype VariantProps = TVProps<typeof checkboxGroupVariants>;\ntype ClassName = TVClassName<typeof checkboxGroupVariants>;\n\nexport type CheckboxGroupOption = {\n /** option label */\n label?: React.ReactNode;\n /** option value */\n value: string;\n /** disables the option */\n disabled?: boolean;\n /** HTML data-testid attribute of the option */\n testId?: string;\n};\n\nexport interface CheckboxGroupProps extends VariantProps {\n /** CSS class name. ClassName: string | { buttons?: string | { base?: string; active?: string }; base?: string;} */\n className?: ClassName;\n /** label displayed above the Checkboxes */\n label?: React.ReactNode;\n /** Name the Field is registered on the form. */\n name: string;\n /** Checkboxes that should be displayed. */\n options: CheckboxGroupOption[];\n /** sets all buttons disabled */\n disabled?: boolean;\n /** id for internal testing. */\n testId?: string;\n}\n\n/**\n * CheckboxGroup component based on [NextUI CheckboxGroup](https://nextui.org/docs/components/checkbox-group)\n */\nconst CheckboxGroup = ({\n className = undefined,\n label = undefined,\n options,\n disabled = false,\n name,\n testId: _testId = undefined,\n}: CheckboxGroupProps) => {\n const { control, debugMode, getFieldState } = useFormContext();\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n const variants = checkboxGroupVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n\n const itemClassName = {\n base: classNames.itemBase,\n wrapper: classNames.itemWrapper,\n icon: classNames.itemIcon,\n label: classNames.itemLabel,\n };\n const itemGroupClassName = {\n base: classNames.base,\n wrapper: classNames.wrapper,\n label: classNames.label,\n };\n\n return (\n <Controller\n control={control}\n name={name}\n disabled={disabled}\n render={({ field: { onChange, value = [], ref, onBlur } }) => {\n /**\n * Handles the checkbox group value changes based on the number of options:\n * 1. For single checkbox (options.length === 1):\n * - Converts undefined/empty array to [] for consistent controlled behavior\n * - Extracts single value from array for onChange\n *\n * Example: undefined → []\n * [value] → value\n *\n * 2. For multiple checkboxes:\n * - Uses raw value array with fallback to empty array\n * - Passes through onChange directly\n *\n * Example: undefined → []\n * ['value1', 'value2'] → ['value1', 'value2']\n */\n const getCheckboxValue = (inputValue: unknown): string[] => {\n if (Array.isArray(inputValue)) {\n return inputValue;\n }\n if (inputValue) {\n return [inputValue as string];\n }\n return [];\n };\n\n const singleCheckboxProps = {\n value: getCheckboxValue(value),\n onChange: (newValue: string[]) => onChange(newValue && newValue[0]),\n };\n\n const multipleCheckboxProps = {\n onChange,\n value: getCheckboxValue(value),\n };\n\n const checkboxGroupProps =\n options.length === 1 ? singleCheckboxProps : multipleCheckboxProps;\n\n return (\n <NextCheckboxGroup\n name={name}\n classNames={itemGroupClassName}\n data-testid={testId}\n // See NextUI styles for group-data condition (data-invalid), e.g.: https://github.com/nextui-org/nextui/blob/main/packages/components/select/src/use-select.ts\n data-invalid={invalid}\n errorMessage={\n error && (\n <FieldValidationError\n error={error}\n className={classNames.errorMessage}\n />\n )\n }\n isDisabled={disabled}\n isInvalid={invalid}\n isRequired={required}\n label={\n showLabel && (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label>\n {label}\n {showTestIdCopyButton && (\n <FieldCopyTestIdButton testId={testId} />\n )}\n </label>\n )\n }\n onBlur={onBlur}\n ref={ref}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...checkboxGroupProps}\n >\n {options?.map((option) => {\n return (\n <Checkbox\n data-invalid={invalid}\n classNames={itemClassName}\n key={`index_${option.value}`}\n isDisabled={disabled || option.disabled}\n value={option?.value}\n data-testid={slugify(\n `${testId}_option_${option?.testId || option?.value}`,\n )}\n >\n {option?.label}\n </Checkbox>\n );\n })}\n </NextCheckboxGroup>\n );\n }}\n />\n );\n};\n\nexport default CheckboxGroup;\n","import CheckboxGroup from './CheckboxGroup';\n\nexport type { CheckboxGroupProps, CheckboxGroupOption } from './CheckboxGroup';\n\nexport { CheckboxGroup };\n\nexport default CheckboxGroup;\n"],"mappings":"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","names":["CheckboxGroup_default"]}
|
|
@@ -166,9 +166,10 @@ var FieldArrayField_default = FieldArrayField;
|
|
|
166
166
|
|
|
167
167
|
var FieldArray = ({
|
|
168
168
|
children,
|
|
169
|
+
elementInitialValue = void 0,
|
|
169
170
|
hideButtons = [],
|
|
170
171
|
label: _label = void 0,
|
|
171
|
-
|
|
172
|
+
lastElementNotDeletable = true,
|
|
172
173
|
name,
|
|
173
174
|
testId: _testId = void 0,
|
|
174
175
|
moveField = ["button"]
|
|
@@ -195,8 +196,8 @@ var FieldArray = ({
|
|
|
195
196
|
placeholder: " ",
|
|
196
197
|
classNames: { helperWrapper: "block" }
|
|
197
198
|
});
|
|
198
|
-
if (
|
|
199
|
-
append(
|
|
199
|
+
if (lastElementNotDeletable && fields.length === 0) {
|
|
200
|
+
append(elementInitialValue);
|
|
200
201
|
}
|
|
201
202
|
const sensors = _core.useSensors.call(void 0,
|
|
202
203
|
_core.useSensor.call(void 0, _core.PointerSensor),
|
|
@@ -250,7 +251,7 @@ var FieldArray = ({
|
|
|
250
251
|
id: field.id,
|
|
251
252
|
index,
|
|
252
253
|
insert,
|
|
253
|
-
lastNotDeletable,
|
|
254
|
+
lastNotDeletable: lastElementNotDeletable,
|
|
254
255
|
move,
|
|
255
256
|
moveField,
|
|
256
257
|
name,
|
|
@@ -274,7 +275,7 @@ var FieldArray = ({
|
|
|
274
275
|
{
|
|
275
276
|
testId: `${testId}_append`,
|
|
276
277
|
size: "sm",
|
|
277
|
-
onClick: () => append(
|
|
278
|
+
onClick: () => append(elementInitialValue),
|
|
278
279
|
children: "Add"
|
|
279
280
|
}
|
|
280
281
|
),
|
|
@@ -295,4 +296,4 @@ var FieldArray_default2 = FieldArray_default;
|
|
|
295
296
|
|
|
296
297
|
|
|
297
298
|
exports.FieldArray_default = FieldArray_default; exports.FieldArray_default2 = FieldArray_default2;
|
|
298
|
-
//# sourceMappingURL=chunk-
|
|
299
|
+
//# sourceMappingURL=chunk-HOETR36J.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-HOETR36J.cjs","../src/FieldArray/FieldArray.tsx","../src/FieldArray/FieldArrayField.tsx","../src/FieldArray/index.ts"],"names":["jsx","Button"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-HOETR36J.cjs","sourcesContent":[null,"import type { DragEndEvent } from '@dnd-kit/core';\nimport type { JSX } from 'react';\nimport type {\n FieldValues,\n UseFieldArrayInsert,\n UseFieldArrayMove,\n UseFieldArrayRemove,\n} from 'react-hook-form';\n\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n PointerSensor,\n useSensor,\n useSensors,\n} from '@dnd-kit/core';\nimport {\n restrictToVerticalAxis,\n restrictToWindowEdges,\n} from '@dnd-kit/modifiers';\nimport {\n SortableContext,\n verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { useInput } from '@nextui-org/input';\n\nimport { Button } from '@fuf-stack/pixels';\n\nimport { useFieldArray, useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\nimport FieldArrayField from './FieldArrayField';\n\nexport type FieldArrayHideOption = 'add' | 'remove' | 'move' | 'insert' | 'all';\nexport type FieldArrayFieldChildren = (args: {\n duplicate: (i: number) => void;\n index: number;\n insert: UseFieldArrayInsert<FieldValues, string>;\n length: number;\n move: UseFieldArrayMove;\n name: string;\n remove: UseFieldArrayRemove;\n}) => JSX.Element;\n\nexport type MoveField = 'drag-drop' | 'button';\n\nexport interface FieldArrayProps {\n /** function that renders the children with provided Properties. */\n children: FieldArrayFieldChildren;\n /* The initial value of a filed that is created in the array */\n elementInitialValue?: unknown;\n /** Hide a set of buttons. */\n hideButtons?: FieldArrayHideOption[];\n /** label of the FieldArray. */\n label?: React.ReactNode;\n /** stops user from deleting all items. */\n lastElementNotDeletable?: boolean;\n /** name the FieldArray is registered in RHF */\n name: string;\n /** ID for test purposes. */\n testId?: string;\n /* how the fields can be moved */\n moveField?: MoveField[];\n}\n\n/**\n * FieldArray component using react-hook-form\n */\nconst FieldArray = ({\n children,\n elementInitialValue = undefined,\n hideButtons = [],\n label: _label = undefined,\n lastElementNotDeletable = true,\n name,\n testId: _testId = undefined,\n moveField = ['button'],\n}: FieldArrayProps) => {\n const {\n control,\n debugMode,\n getValues,\n getFieldState,\n trigger,\n // watch\n } = useFormContext();\n\n const { fields, append, remove, insert, move } = useFieldArray({\n control,\n name,\n });\n\n const { error, testId, invalid, required } = getFieldState(name, _testId);\n\n // TODO: what about input props?\n const { label, getLabelProps, getHelperWrapperProps, getErrorMessageProps } =\n useInput({\n isInvalid: invalid,\n isRequired: required,\n errorMessage: JSON.stringify(error),\n label: _label,\n labelPlacement: 'inside',\n placeholder: ' ',\n classNames: { helperWrapper: 'block' },\n });\n\n if (lastElementNotDeletable && fields.length === 0) {\n append(elementInitialValue); // TODO: Check if this breaks something\n }\n\n const sensors = useSensors(\n useSensor(PointerSensor),\n useSensor(KeyboardSensor),\n );\n\n const handleDragEnd = (event: DragEndEvent) => {\n const { active, over } = event;\n\n if (active.id !== over?.id) {\n const oldIndex = fields.findIndex((field) => field.id === active.id);\n const newIndex = fields.findIndex((field) => field.id === over?.id);\n move(oldIndex, newIndex);\n }\n };\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n return (\n <DndContext\n sensors={sensors}\n collisionDetection={closestCenter}\n onDragEnd={handleDragEnd}\n modifiers={[restrictToVerticalAxis, restrictToWindowEdges]}\n >\n <SortableContext\n items={fields.map((field) => field.id)}\n strategy={verticalListSortingStrategy}\n >\n <ul data-testid={testId} onBlur={() => trigger(`${name}`)}>\n {showLabel && (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...getLabelProps()}\n className={`${getLabelProps().className} !pointer-events-auto !static !z-0 -mb-1 ml-1 !inline-block`}\n >\n {label}\n </label>\n )}\n {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n\n {fields.map((field, index) => {\n const duplicate = (i: number) => {\n const values = getValues(name);\n insert(i + 1, { ...values[i], id: null });\n };\n\n return (\n <FieldArrayField\n className=\"mb-3 mt-5 flex flex-row items-center\"\n field={field}\n fields={fields}\n hideButtons={hideButtons}\n id={field.id}\n index={index}\n insert={insert}\n key={field.id}\n lastNotDeletable={lastElementNotDeletable}\n move={move}\n moveField={moveField}\n name={name}\n remove={remove}\n testId={`${testId}_${index}`}\n >\n {children({\n duplicate,\n index,\n insert,\n length: fields.length,\n move,\n name: `${name}.${index}`,\n remove,\n })}\n </FieldArrayField>\n );\n })}\n\n {!hideButtons.includes('add') && !hideButtons.includes('all') && (\n <Button\n testId={`${testId}_append`}\n size=\"sm\"\n onClick={() => append(elementInitialValue)} // TODO: Check if this breaks something\n >\n Add\n </Button>\n )}\n {/* @ts-expect-error rhf incompatibility */}\n {error?._errors && (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <div {...getHelperWrapperProps()}>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <div {...getErrorMessageProps()}>\n {/* @ts-expect-error rhf incompatibility */}\n <FieldValidationError error={error?._errors} />\n </div>\n </div>\n )}\n </ul>\n </SortableContext>\n </DndContext>\n );\n};\n\nexport default FieldArray;\n","import type {\n FieldValues,\n UseFieldArrayInsert,\n UseFieldArrayMove,\n UseFieldArrayRemove,\n} from 'react-hook-form';\nimport type { FieldArrayHideOption, MoveField } from './FieldArray';\n\n// import { useEffect } from 'react';\nimport { FaAngleDown, FaAngleUp, FaGripLines } from 'react-icons/fa';\n\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { useInput } from '@nextui-org/input';\n\nimport { Button } from '@fuf-stack/pixels';\n\nimport { slugify } from '../helpers';\nimport { useFormContext } from '../hooks';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\ninterface FieldArrayFieldProps {\n children: React.ReactNode;\n className?: string;\n field: Record<'id', string>;\n fields: Record<'id', string>[];\n hideButtons?: FieldArrayHideOption[];\n id: string | number;\n index: number;\n insert: UseFieldArrayInsert<FieldValues, string>;\n lastNotDeletable?: boolean;\n move: UseFieldArrayMove;\n moveField: MoveField[];\n testId?: string;\n name: string;\n remove: UseFieldArrayRemove;\n}\n\n/**\n * FieldArrayField component using react-hook-form\n */\nconst FieldArrayField = ({\n children,\n className = undefined,\n field,\n fields,\n hideButtons = [],\n id,\n index,\n insert,\n lastNotDeletable = true,\n move,\n moveField,\n name,\n remove,\n testId = undefined,\n}: FieldArrayFieldProps) => {\n const { attributes, listeners, setNodeRef, transform, transition } =\n useSortable({ id });\n\n const style = {\n transform: CSS.Translate.toString(transform),\n transition,\n };\n\n const { getFieldState, trigger } = useFormContext();\n const { error, invalid } = getFieldState(`${name}`, undefined);\n\n // TODO: what about input props? and label props? Do we need a label?\n const { getHelperWrapperProps, getErrorMessageProps } = useInput({\n isInvalid: invalid,\n errorMessage: JSON.stringify(error),\n labelPlacement: 'inside',\n placeholder: ' ',\n classNames: { helperWrapper: 'block' },\n });\n\n return (\n <>\n <li\n ref={setNodeRef}\n style={style}\n className={className}\n onBlur={() => trigger(`${name}.${index}`)}\n >\n {/** Start Button up/down */}\n {!hideButtons.includes('move') && !hideButtons.includes('all') && (\n <div className=\"mr-6 flex flex-row items-center\">\n {moveField.includes('drag-drop') && (\n <div\n className=\"mr-2 text-base text-xl\"\n data-testid={slugify(`${name}_${index}_movebutton`)}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...attributes}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...listeners}\n >\n <FaGripLines />\n </div>\n )}\n {moveField.includes('button') && (\n <div className=\"flex flex-col\">\n <Button\n testId={`${name}.${index}.up`}\n disabled={index === 0}\n onClick={() => move(index, index - 1)}\n className=\"flex rounded-b-none rounded-t-md border border-gray-300 px-2 py-2 shadow-sm\"\n >\n <FaAngleUp />\n </Button>\n <Button\n testId={`${name}.${index}.down`}\n disabled={index === fields.length - 1}\n onClick={() => move(index, index + 1)}\n className=\"flex rounded-b-md rounded-t-none border border-gray-300 px-2 py-2 shadow-sm\"\n >\n <FaAngleDown />\n </Button>\n </div>\n )}\n </div>\n )}\n {/** End Button up/down */}\n <div key={`rest-${field.id}`} className=\"w-full\">\n <div className=\"mb-2 flex items-center\">\n {/** RENDER CHILDREN */}\n <div className=\"flex-grow\" data-testid={testId}>\n {children}\n </div>\n {!hideButtons.includes('remove') &&\n !hideButtons.includes('all') &&\n (lastNotDeletable && fields.length === 1 ? null : (\n <Button onClick={() => remove(index)} className=\"ml-1\">\n <svg\n className=\"h-4 w-4\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n clipRule=\"evenodd\"\n />\n </svg>\n </Button>\n ))}\n </div>\n\n {!hideButtons.includes('insert') &&\n !hideButtons.includes('all') &&\n index !== fields.length - 1 ? (\n <Button\n className=\"text-xs font-medium\"\n testId={`add-harbor-button-${index}`}\n onClick={() => {\n insert(index + 1, {});\n }}\n >\n insert\n </Button>\n ) : null}\n </div>\n </li>\n {error && typeof error[index] !== 'undefined' && (\n // // @ts-expect-error rhf incompatibility\n // error[Number(index)]?._errors && ( // TODO: was String(). Check if Number is correct. (same below in FieldValidationError)\n // eslint-disable-next-line react/jsx-props-no-spreading\n <div {...getHelperWrapperProps()}>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <div {...getErrorMessageProps()}>\n <FieldValidationError\n /* @ts-expect-error rhf incompatibility */\n error={error[Number(index)]?._errors}\n />\n </div>\n </div>\n )}\n </>\n );\n};\nexport default FieldArrayField;\n","import FieldArray from './FieldArray';\n\nexport type {\n FieldArrayProps,\n FieldArrayHideOption,\n FieldArrayFieldChildren,\n} from './FieldArray';\n\nexport { FieldArray };\n\nexport default FieldArray;\n"]}
|
|
@@ -35,8 +35,9 @@ var TextArea = ({
|
|
|
35
35
|
name,
|
|
36
36
|
disabled,
|
|
37
37
|
render: ({
|
|
38
|
-
field: { disabled: isDisabled, onChange, onBlur, value, ref }
|
|
38
|
+
field: { disabled: isDisabled, onChange, onBlur, value = "", ref }
|
|
39
39
|
}) => {
|
|
40
|
+
const displayValue = value?.toString() ?? "";
|
|
40
41
|
return /* @__PURE__ */ jsx(
|
|
41
42
|
NextTextArea,
|
|
42
43
|
{
|
|
@@ -56,7 +57,7 @@ var TextArea = ({
|
|
|
56
57
|
labelPlacement: "outside",
|
|
57
58
|
placeholder,
|
|
58
59
|
name,
|
|
59
|
-
value,
|
|
60
|
+
value: displayValue,
|
|
60
61
|
onChange,
|
|
61
62
|
onBlur,
|
|
62
63
|
ref,
|
|
@@ -77,4 +78,4 @@ export {
|
|
|
77
78
|
TextArea_default,
|
|
78
79
|
TextArea_default2
|
|
79
80
|
};
|
|
80
|
-
//# sourceMappingURL=chunk-
|
|
81
|
+
//# sourceMappingURL=chunk-QCVTB2NI.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/TextArea/TextArea.tsx","../src/TextArea/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Textarea as NextTextArea } from '@nextui-org/input';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { Controller } from '../Controller';\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport interface TextAreaProps {\n /** Child components. The content of the textarea. */\n children?: ReactNode;\n /** CSS class name */\n className?: string;\n /** Determines if the TextArea is disabled or not. */\n disabled?: boolean;\n /** Label displayed above the TextArea. */\n label?: ReactNode;\n /** Name the TextArea is registered at in HTML forms (react-hook-form). */\n name: string;\n /** placeholder for the textArea content. */\n placeholder?: string;\n /** Id to grab element in internal tests. */\n testId?: string;\n}\n\n/**\n * TextArea component based on [NextUI TextArea](https://nextui.org/docs/components/textarea)\n */\nconst TextArea = ({\n children = null,\n className = undefined,\n disabled = false,\n label = undefined,\n name,\n placeholder = ' ',\n testId: _testId = undefined,\n}: TextAreaProps) => {\n const { control, debugMode, getFieldState } = useFormContext();\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n return (\n <Controller\n control={control}\n name={name}\n disabled={disabled}\n render={({\n field: { disabled: isDisabled, onChange, onBlur, value = '', ref },\n }) => {\n /**\n * Ensures the textarea always has a defined string value to prevent uncontrolled to\n * controlled component warnings:\n *\n * 1. Warning Prevention:\n * - Sets default value to '' in field destructuring\n * - Guarantees the value prop is never undefined/null\n * - Prevents React warning: \"A component is changing from uncontrolled to controlled\"\n *\n * 2. Value Handling:\n * - Converts undefined/null to empty string\n * - Converts non-string values to strings\n * - Maintains existing string values\n *\n * Examples:\n * - undefined → \"\" (prevents uncontrolled warning)\n * - null → \"\" (prevents uncontrolled warning)\n * - \"hello\" → \"hello\" (maintains string value)\n * - 123 → \"123\" (converts to string)\n *\n * Without this handling, the textarea could switch between controlled/uncontrolled\n * states when the form value changes from undefined to defined, causing React warnings\n * and potential rendering issues.\n */\n const displayValue = value?.toString() ?? '';\n\n return (\n <NextTextArea\n className={cn(className)}\n classNames={{\n inputWrapper: 'group-data-[focus=true]:border-focus',\n }}\n data-testid={testId}\n errorMessage={error && <FieldValidationError error={error} />}\n isDisabled={isDisabled}\n isRequired={required}\n isInvalid={invalid}\n label={\n showLabel && (\n <>\n {label}\n {showTestIdCopyButton && (\n <FieldCopyTestIdButton testId={testId} />\n )}\n </>\n )\n }\n labelPlacement=\"outside\"\n placeholder={placeholder}\n name={name}\n value={displayValue}\n onChange={onChange}\n onBlur={onBlur}\n ref={ref}\n variant=\"bordered\"\n >\n {children}\n </NextTextArea>\n );\n }}\n />\n );\n};\n\nexport default TextArea;\n","import TextArea from './TextArea';\n\nexport type { TextAreaProps } from './TextArea';\n\nexport { TextArea };\n\nexport default TextArea;\n"],"mappings":";;;;;;;;;;;;;;AAEA,SAAS,YAAY,oBAAoB;AAEzC,SAAS,UAAU;AAmFgB,SAMnB,UANmB,KAMnB,YANmB;AAxDnC,IAAM,WAAW,CAAC;AAAA,EAChB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA,cAAc;AAAA,EACd,QAAQ,UAAU;AACpB,MAAqB;AACnB,QAAM,EAAE,SAAS,WAAW,cAAc,IAAI,eAAe;AAC7D,QAAM,EAAE,OAAO,SAAS,UAAU,OAAO,IAAI,cAAc,MAAM,OAAO;AAExE,QAAM,uBAAuB,cAAc;AAC3C,QAAM,YAAY,SAAS;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,CAAC;AAAA,QACP,OAAO,EAAE,UAAU,YAAY,UAAU,QAAQ,QAAQ,IAAI,IAAI;AAAA,MACnE,MAAM;AAyBJ,cAAM,eAAe,OAAO,SAAS,KAAK;AAE1C,eACE;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,GAAG,SAAS;AAAA,YACvB,YAAY;AAAA,cACV,cAAc;AAAA,YAChB;AAAA,YACA,eAAa;AAAA,YACb,cAAc,SAAS,oBAAC,gCAAqB,OAAc;AAAA,YAC3D;AAAA,YACA,YAAY;AAAA,YACZ,WAAW;AAAA,YACX,OACE,aACE,iCACG;AAAA;AAAA,cACA,wBACC,oBAAC,iCAAsB,QAAgB;AAAA,eAE3C;AAAA,YAGJ,gBAAe;AAAA,YACf;AAAA,YACA;AAAA,YACA,OAAO;AAAA,YACP;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAQ;AAAA,YAEP;AAAA;AAAA,QACH;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,mBAAQ;;;AChHf,IAAOA,oBAAQ;","names":["TextArea_default"]}
|
|
@@ -38,8 +38,19 @@ var Input = ({
|
|
|
38
38
|
disabled,
|
|
39
39
|
name,
|
|
40
40
|
render: ({
|
|
41
|
-
field: { disabled: isDisabled, onChange, onBlur, value, ref }
|
|
41
|
+
field: { disabled: isDisabled, onChange, onBlur, value = "", ref }
|
|
42
42
|
}) => {
|
|
43
|
+
const displayValue = transformValue?.displayValue ? transformValue.displayValue(value ?? "") : value ?? "";
|
|
44
|
+
const handleChange = (e) => {
|
|
45
|
+
const inputValue = e.target.value;
|
|
46
|
+
if (type === "number") {
|
|
47
|
+
onChange(inputValue === "" ? "" : Number(inputValue));
|
|
48
|
+
} else {
|
|
49
|
+
onChange(
|
|
50
|
+
transformValue?.formValue ? transformValue.formValue(inputValue) : inputValue
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
};
|
|
43
54
|
return /* @__PURE__ */ jsx(
|
|
44
55
|
NextInput,
|
|
45
56
|
{
|
|
@@ -60,17 +71,13 @@ var Input = ({
|
|
|
60
71
|
labelPlacement: "outside",
|
|
61
72
|
name,
|
|
62
73
|
onBlur,
|
|
63
|
-
onChange:
|
|
64
|
-
onChange(Number(e.target.value));
|
|
65
|
-
} : (e) => onChange(
|
|
66
|
-
transformValue && transformValue.formValue ? transformValue.formValue(e.target.value) : e.target.value
|
|
67
|
-
),
|
|
74
|
+
onChange: handleChange,
|
|
68
75
|
placeholder,
|
|
69
76
|
radius: "sm",
|
|
70
77
|
ref,
|
|
71
78
|
startContent,
|
|
72
79
|
type,
|
|
73
|
-
value:
|
|
80
|
+
value: displayValue,
|
|
74
81
|
variant: "bordered"
|
|
75
82
|
}
|
|
76
83
|
);
|
|
@@ -87,4 +94,4 @@ export {
|
|
|
87
94
|
Input_default,
|
|
88
95
|
Input_default2
|
|
89
96
|
};
|
|
90
|
-
//# sourceMappingURL=chunk-
|
|
97
|
+
//# sourceMappingURL=chunk-QW44EUAH.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Input/Input.tsx","../src/Input/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Input as NextInput } from '@nextui-org/input';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { Controller } from '../Controller';\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport interface InputProps {\n /** CSS class name */\n className?: string;\n /** input field is disabled */\n disabled?: boolean;\n /** added content to the end of the input Field. */\n endContent?: ReactNode;\n /** form field label (set to false to disable label) */\n label?: string | false;\n /** form field name */\n name: string;\n /** form field placeholder */\n placeholder?: string;\n /** content added to the start of the input field */\n startContent?: ReactNode;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** allows disentangled display and form values for a field */\n transformValue?: {\n /** transforms the formValue of the field to the display value of the field */\n displayValue: (value: string | number) => string | number;\n /** transforms the displayValue of the field to the form value of the field */\n formValue: (value: string) => string | number;\n };\n /** input type */\n type?: 'number' | 'password';\n}\n\n/**\n * Input component based on [NextUI Input](https://nextui.org/docs/components/input)\n */\nconst Input = ({\n className = undefined,\n disabled = false,\n endContent = undefined,\n label = undefined,\n name,\n placeholder = ' ',\n startContent = undefined,\n testId: _testId = undefined,\n transformValue = undefined,\n type = undefined,\n}: InputProps) => {\n const { control, debugMode, getFieldState } = useFormContext();\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n return (\n <Controller\n control={control}\n disabled={disabled}\n name={name}\n render={({\n field: { disabled: isDisabled, onChange, onBlur, value = '', ref },\n }) => {\n /**\n * Determines the display value for the input field:\n * 1. If transformValue.displayValue is provided, applies the transform to the current value\n * (useful for formatting like adding currency symbols, date formatting, etc.)\n * 2. Falls back to the raw value if no transform is provided\n * 3. Ensures a defined value by using empty string as fallback (prevents uncontrolled input warnings)\n *\n * Examples:\n * - With transform: value \"1000\" → displayValue \"$1,000\"\n * - Without transform: value \"1000\" → displayValue \"1000\"\n * - Undefined value: value undefined → displayValue \"\"\n */\n const displayValue = transformValue?.displayValue\n ? transformValue.displayValue(value ?? '')\n : (value ?? '');\n\n /**\n * Handles input value changes with special processing:\n * 1. For number inputs:\n * - Preserves empty string (prevents NaN in the form state)\n * - Converts non-empty values to numbers\n * Example: \"\" → \"\" (empty stays empty)\n * \"42\" → 42 (converts to number)\n *\n * 2. For text inputs with transformValue.formValue:\n * - Applies custom transform before updating form state\n * - Useful for converting display format to storage format\n * Example: \"$1,000\" → \"1000\" (strips formatting)\n *\n * 3. For regular text inputs:\n * - Passes through the raw input value\n * Example: \"hello\" → \"hello\" (no transformation)\n *\n * @param e The input change event\n */\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const inputValue = e.target.value;\n if (type === 'number') {\n onChange(inputValue === '' ? '' : Number(inputValue));\n } else {\n onChange(\n transformValue?.formValue\n ? transformValue.formValue(inputValue)\n : inputValue,\n );\n }\n };\n\n return (\n <NextInput\n className={cn(className)}\n classNames={{\n inputWrapper: 'group-data-[focus=true]:border-focus',\n }}\n data-testid={testId}\n endContent={endContent}\n errorMessage={error && <FieldValidationError error={error} />}\n isDisabled={isDisabled}\n isInvalid={invalid}\n isRequired={required}\n label={\n showLabel && (\n <>\n {label}\n {showTestIdCopyButton && (\n <FieldCopyTestIdButton testId={testId} />\n )}\n </>\n )\n }\n labelPlacement=\"outside\"\n name={name}\n onBlur={onBlur}\n onChange={handleChange}\n placeholder={placeholder}\n radius=\"sm\"\n ref={ref}\n startContent={startContent}\n type={type}\n value={displayValue}\n variant=\"bordered\"\n />\n );\n }}\n />\n );\n};\n\nexport default Input;\n","import Input from './Input';\n\nexport type { InputProps } from './Input';\n\nexport { Input };\n\nexport default Input;\n"],"mappings":";;;;;;;;;;;;;;AAEA,SAAS,SAAS,iBAAiB;AAEnC,SAAS,UAAU;AAwHgB,SAMnB,UANmB,KAMnB,YANmB;AAlFnC,IAAM,QAAQ,CAAC;AAAA,EACb,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,aAAa;AAAA,EACb,QAAQ;AAAA,EACR;AAAA,EACA,cAAc;AAAA,EACd,eAAe;AAAA,EACf,QAAQ,UAAU;AAAA,EAClB,iBAAiB;AAAA,EACjB,OAAO;AACT,MAAkB;AAChB,QAAM,EAAE,SAAS,WAAW,cAAc,IAAI,eAAe;AAC7D,QAAM,EAAE,OAAO,SAAS,UAAU,OAAO,IAAI,cAAc,MAAM,OAAO;AAExE,QAAM,uBAAuB,cAAc;AAC3C,QAAM,YAAY,SAAS;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,CAAC;AAAA,QACP,OAAO,EAAE,UAAU,YAAY,UAAU,QAAQ,QAAQ,IAAI,IAAI;AAAA,MACnE,MAAM;AAaJ,cAAM,eAAe,gBAAgB,eACjC,eAAe,aAAa,SAAS,EAAE,IACtC,SAAS;AAqBd,cAAM,eAAe,CAAC,MAA2C;AAC/D,gBAAM,aAAa,EAAE,OAAO;AAC5B,cAAI,SAAS,UAAU;AACrB,qBAAS,eAAe,KAAK,KAAK,OAAO,UAAU,CAAC;AAAA,UACtD,OAAO;AACL;AAAA,cACE,gBAAgB,YACZ,eAAe,UAAU,UAAU,IACnC;AAAA,YACN;AAAA,UACF;AAAA,QACF;AAEA,eACE;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,GAAG,SAAS;AAAA,YACvB,YAAY;AAAA,cACV,cAAc;AAAA,YAChB;AAAA,YACA,eAAa;AAAA,YACb;AAAA,YACA,cAAc,SAAS,oBAAC,gCAAqB,OAAc;AAAA,YAC3D;AAAA,YACA,WAAW;AAAA,YACX,YAAY;AAAA,YACZ,OACE,aACE,iCACG;AAAA;AAAA,cACA,wBACC,oBAAC,iCAAsB,QAAgB;AAAA,eAE3C;AAAA,YAGJ,gBAAe;AAAA,YACf;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YACV;AAAA,YACA,QAAO;AAAA,YACP;AAAA,YACA;AAAA,YACA;AAAA,YACA,OAAO;AAAA,YACP,SAAQ;AAAA;AAAA,QACV;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,gBAAQ;;;ACtJf,IAAOA,iBAAQ;","names":["Input_default"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
|
|
2
2
|
|
|
3
3
|
var _chunkVQWKXSHWcjs = require('./chunk-VQWKXSHW.cjs');
|
|
4
4
|
|
|
@@ -38,8 +38,19 @@ var Input = ({
|
|
|
38
38
|
disabled,
|
|
39
39
|
name,
|
|
40
40
|
render: ({
|
|
41
|
-
field: { disabled: isDisabled, onChange, onBlur, value, ref }
|
|
41
|
+
field: { disabled: isDisabled, onChange, onBlur, value = "", ref }
|
|
42
42
|
}) => {
|
|
43
|
+
const displayValue = _optionalChain([transformValue, 'optionalAccess', _ => _.displayValue]) ? transformValue.displayValue(_nullishCoalesce(value, () => ( ""))) : _nullishCoalesce(value, () => ( ""));
|
|
44
|
+
const handleChange = (e) => {
|
|
45
|
+
const inputValue = e.target.value;
|
|
46
|
+
if (type === "number") {
|
|
47
|
+
onChange(inputValue === "" ? "" : Number(inputValue));
|
|
48
|
+
} else {
|
|
49
|
+
onChange(
|
|
50
|
+
_optionalChain([transformValue, 'optionalAccess', _2 => _2.formValue]) ? transformValue.formValue(inputValue) : inputValue
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
};
|
|
43
54
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
44
55
|
_input.Input,
|
|
45
56
|
{
|
|
@@ -60,17 +71,13 @@ var Input = ({
|
|
|
60
71
|
labelPlacement: "outside",
|
|
61
72
|
name,
|
|
62
73
|
onBlur,
|
|
63
|
-
onChange:
|
|
64
|
-
onChange(Number(e.target.value));
|
|
65
|
-
} : (e) => onChange(
|
|
66
|
-
transformValue && transformValue.formValue ? transformValue.formValue(e.target.value) : e.target.value
|
|
67
|
-
),
|
|
74
|
+
onChange: handleChange,
|
|
68
75
|
placeholder,
|
|
69
76
|
radius: "sm",
|
|
70
77
|
ref,
|
|
71
78
|
startContent,
|
|
72
79
|
type,
|
|
73
|
-
value:
|
|
80
|
+
value: displayValue,
|
|
74
81
|
variant: "bordered"
|
|
75
82
|
}
|
|
76
83
|
);
|
|
@@ -87,4 +94,4 @@ var Input_default2 = Input_default;
|
|
|
87
94
|
|
|
88
95
|
|
|
89
96
|
exports.Input_default = Input_default; exports.Input_default2 = Input_default2;
|
|
90
|
-
//# sourceMappingURL=chunk-
|
|
97
|
+
//# sourceMappingURL=chunk-RBIX6EWU.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-RBIX6EWU.cjs","../src/Input/Input.tsx","../src/Input/index.ts"],"names":["Input_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-RBIX6EWU.cjs","sourcesContent":[null,"import type { ReactNode } from 'react';\n\nimport { Input as NextInput } from '@nextui-org/input';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { Controller } from '../Controller';\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport interface InputProps {\n /** CSS class name */\n className?: string;\n /** input field is disabled */\n disabled?: boolean;\n /** added content to the end of the input Field. */\n endContent?: ReactNode;\n /** form field label (set to false to disable label) */\n label?: string | false;\n /** form field name */\n name: string;\n /** form field placeholder */\n placeholder?: string;\n /** content added to the start of the input field */\n startContent?: ReactNode;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** allows disentangled display and form values for a field */\n transformValue?: {\n /** transforms the formValue of the field to the display value of the field */\n displayValue: (value: string | number) => string | number;\n /** transforms the displayValue of the field to the form value of the field */\n formValue: (value: string) => string | number;\n };\n /** input type */\n type?: 'number' | 'password';\n}\n\n/**\n * Input component based on [NextUI Input](https://nextui.org/docs/components/input)\n */\nconst Input = ({\n className = undefined,\n disabled = false,\n endContent = undefined,\n label = undefined,\n name,\n placeholder = ' ',\n startContent = undefined,\n testId: _testId = undefined,\n transformValue = undefined,\n type = undefined,\n}: InputProps) => {\n const { control, debugMode, getFieldState } = useFormContext();\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n return (\n <Controller\n control={control}\n disabled={disabled}\n name={name}\n render={({\n field: { disabled: isDisabled, onChange, onBlur, value = '', ref },\n }) => {\n /**\n * Determines the display value for the input field:\n * 1. If transformValue.displayValue is provided, applies the transform to the current value\n * (useful for formatting like adding currency symbols, date formatting, etc.)\n * 2. Falls back to the raw value if no transform is provided\n * 3. Ensures a defined value by using empty string as fallback (prevents uncontrolled input warnings)\n *\n * Examples:\n * - With transform: value \"1000\" → displayValue \"$1,000\"\n * - Without transform: value \"1000\" → displayValue \"1000\"\n * - Undefined value: value undefined → displayValue \"\"\n */\n const displayValue = transformValue?.displayValue\n ? transformValue.displayValue(value ?? '')\n : (value ?? '');\n\n /**\n * Handles input value changes with special processing:\n * 1. For number inputs:\n * - Preserves empty string (prevents NaN in the form state)\n * - Converts non-empty values to numbers\n * Example: \"\" → \"\" (empty stays empty)\n * \"42\" → 42 (converts to number)\n *\n * 2. For text inputs with transformValue.formValue:\n * - Applies custom transform before updating form state\n * - Useful for converting display format to storage format\n * Example: \"$1,000\" → \"1000\" (strips formatting)\n *\n * 3. For regular text inputs:\n * - Passes through the raw input value\n * Example: \"hello\" → \"hello\" (no transformation)\n *\n * @param e The input change event\n */\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const inputValue = e.target.value;\n if (type === 'number') {\n onChange(inputValue === '' ? '' : Number(inputValue));\n } else {\n onChange(\n transformValue?.formValue\n ? transformValue.formValue(inputValue)\n : inputValue,\n );\n }\n };\n\n return (\n <NextInput\n className={cn(className)}\n classNames={{\n inputWrapper: 'group-data-[focus=true]:border-focus',\n }}\n data-testid={testId}\n endContent={endContent}\n errorMessage={error && <FieldValidationError error={error} />}\n isDisabled={isDisabled}\n isInvalid={invalid}\n isRequired={required}\n label={\n showLabel && (\n <>\n {label}\n {showTestIdCopyButton && (\n <FieldCopyTestIdButton testId={testId} />\n )}\n </>\n )\n }\n labelPlacement=\"outside\"\n name={name}\n onBlur={onBlur}\n onChange={handleChange}\n placeholder={placeholder}\n radius=\"sm\"\n ref={ref}\n startContent={startContent}\n type={type}\n value={displayValue}\n variant=\"bordered\"\n />\n );\n }}\n />\n );\n};\n\nexport default Input;\n","import Input from './Input';\n\nexport type { InputProps } from './Input';\n\nexport { Input };\n\nexport default Input;\n"]}
|