@fuf-stack/uniform 0.15.0 → 0.16.1
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 +6 -6
- package/dist/CheckboxGroup/index.d.cts +2 -2
- package/dist/CheckboxGroup/index.d.ts +2 -2
- package/dist/CheckboxGroup/index.js +5 -5
- package/dist/{CheckboxGroup-o-qWkWe1.d.cts → CheckboxGroup-fAdey3Td.d.cts} +1 -1
- package/dist/{CheckboxGroup-o-qWkWe1.d.ts → CheckboxGroup-fAdey3Td.d.ts} +1 -1
- package/dist/Controller/index.cjs +3 -3
- package/dist/Controller/index.js +2 -2
- package/dist/FieldArray/index.cjs +5 -5
- package/dist/FieldArray/index.d.cts +2 -2
- package/dist/FieldArray/index.d.ts +2 -2
- package/dist/FieldArray/index.js +4 -4
- package/dist/{FieldArray-AqM2XKIh.d.cts → FieldArray-jMjSqCZV.d.cts} +10 -4
- package/dist/{FieldArray-AqM2XKIh.d.ts → FieldArray-jMjSqCZV.d.ts} +10 -4
- package/dist/Form/index.cjs +4 -4
- package/dist/Form/index.js +3 -3
- package/dist/Input/index.cjs +6 -6
- package/dist/Input/index.d.cts +2 -2
- package/dist/Input/index.d.ts +2 -2
- package/dist/Input/index.js +5 -5
- package/dist/{Input-IkWP4cWg.d.cts → Input-B_wjhY9e.d.cts} +1 -1
- package/dist/{Input-IkWP4cWg.d.ts → Input-B_wjhY9e.d.ts} +1 -1
- package/dist/RadioGroup/index.cjs +6 -6
- package/dist/RadioGroup/index.d.cts +2 -2
- package/dist/RadioGroup/index.d.ts +2 -2
- package/dist/RadioGroup/index.js +5 -5
- package/dist/{RadioGroup-1J39ASHa.d.cts → RadioGroup-Dxd2FPQj.d.cts} +1 -1
- package/dist/{RadioGroup-1J39ASHa.d.ts → RadioGroup-Dxd2FPQj.d.ts} +1 -1
- package/dist/Select/index.cjs +6 -6
- package/dist/Select/index.d.cts +2 -2
- package/dist/Select/index.d.ts +2 -2
- package/dist/Select/index.js +5 -5
- package/dist/{Select-BhS4z0Pj.d.cts → Select-JRwrSDew.d.cts} +1 -1
- package/dist/{Select-BhS4z0Pj.d.ts → Select-JRwrSDew.d.ts} +1 -1
- package/dist/SubmitButton/index.cjs +4 -4
- package/dist/SubmitButton/index.js +3 -3
- package/dist/Switch/index.cjs +6 -6
- package/dist/Switch/index.d.cts +2 -2
- package/dist/Switch/index.d.ts +2 -2
- package/dist/Switch/index.js +5 -5
- package/dist/{Switch-Fdldj8LV.d.cts → Switch-mdolzzEc.d.cts} +1 -1
- package/dist/{Switch-Fdldj8LV.d.ts → Switch-mdolzzEc.d.ts} +1 -1
- package/dist/TextArea/index.cjs +6 -6
- package/dist/TextArea/index.d.cts +2 -2
- package/dist/TextArea/index.d.ts +2 -2
- package/dist/TextArea/index.js +5 -5
- package/dist/{TextArea-B-sKvTkd.d.cts → TextArea-DNpInDsW.d.cts} +1 -1
- package/dist/{TextArea-B-sKvTkd.d.ts → TextArea-DNpInDsW.d.ts} +1 -1
- package/dist/{chunk-U26GTLKF.js → chunk-3QBYSFDX.js} +6 -6
- package/dist/chunk-3QBYSFDX.js.map +1 -0
- package/dist/{chunk-WAXJ64P7.js → chunk-5YDNHSEU.js} +39 -36
- package/dist/chunk-5YDNHSEU.js.map +1 -0
- package/dist/chunk-7ROOJK7G.cjs +110 -0
- package/dist/chunk-7ROOJK7G.cjs.map +1 -0
- package/dist/{chunk-VX76MJAI.js → chunk-ASPOGQPS.js} +2 -5
- package/dist/chunk-ASPOGQPS.js.map +1 -0
- package/dist/{chunk-FLX6VIO7.cjs → chunk-BDVAK232.cjs} +11 -16
- package/dist/chunk-BDVAK232.cjs.map +1 -0
- package/dist/{chunk-4AXNPSXG.cjs → chunk-CESGUF6F.cjs} +3 -22
- package/dist/chunk-CESGUF6F.cjs.map +1 -0
- package/dist/{chunk-P4PRVNCH.js → chunk-DS7GUNDT.js} +4 -5
- package/dist/chunk-DS7GUNDT.js.map +1 -0
- package/dist/{chunk-W66BVPTB.js → chunk-ECDLVJLZ.js} +9 -11
- package/dist/chunk-ECDLVJLZ.js.map +1 -0
- package/dist/{chunk-UJYXA5AD.js → chunk-GNDW3TAU.js} +3 -6
- package/dist/chunk-GNDW3TAU.js.map +1 -0
- package/dist/{chunk-V7LRZ5GK.cjs → chunk-H65I56SI.cjs} +4 -7
- package/dist/chunk-H65I56SI.cjs.map +1 -0
- package/dist/{chunk-K43U2JVG.cjs → chunk-HCQJGNWT.cjs} +12 -14
- package/dist/chunk-HCQJGNWT.cjs.map +1 -0
- package/dist/{chunk-2NSCPLAA.cjs → chunk-IUVEFLF3.cjs} +6 -6
- package/dist/chunk-IUVEFLF3.cjs.map +1 -0
- package/dist/{chunk-4M6F2O2K.cjs → chunk-KIAIGPG7.cjs} +8 -8
- package/dist/chunk-KIAIGPG7.cjs.map +1 -0
- package/dist/{chunk-4EP3IGSK.cjs → chunk-M45PRDZB.cjs} +26 -24
- package/dist/chunk-M45PRDZB.cjs.map +1 -0
- package/dist/{chunk-3Q37222E.js → chunk-MEK7YR46.js} +6 -6
- package/dist/chunk-MEK7YR46.js.map +1 -0
- package/dist/{chunk-C4RM2JSD.cjs → chunk-OE5IW4ZG.cjs} +4 -7
- package/dist/chunk-OE5IW4ZG.cjs.map +1 -0
- package/dist/{chunk-V5HTEMWZ.cjs → chunk-PHGFXKPU.cjs} +4 -4
- package/dist/{chunk-V5HTEMWZ.cjs.map → chunk-PHGFXKPU.cjs.map} +1 -1
- package/dist/{chunk-QLQR44AD.cjs → chunk-Q23XGBJ5.cjs} +7 -8
- package/dist/chunk-Q23XGBJ5.cjs.map +1 -0
- package/dist/{chunk-2LAPLELO.js → chunk-STU7SBQX.js} +10 -12
- package/dist/chunk-STU7SBQX.js.map +1 -0
- package/dist/{chunk-MRXNKY72.js → chunk-T4N6TMUL.js} +4 -4
- package/dist/chunk-T4N6TMUL.js.map +1 -0
- package/dist/{chunk-IEF2GJ22.js → chunk-UAV6PVB4.js} +2 -21
- package/dist/chunk-UAV6PVB4.js.map +1 -0
- package/dist/{chunk-7HK64PN5.js → chunk-WKJN5A2E.js} +9 -14
- package/dist/chunk-WKJN5A2E.js.map +1 -0
- package/dist/{chunk-MF4JB3YT.cjs → chunk-WRIXKFKW.cjs} +13 -15
- package/dist/chunk-WRIXKFKW.cjs.map +1 -0
- package/dist/{chunk-OBQDQ4RX.js → chunk-XHN2YAIC.js} +18 -16
- package/dist/chunk-XHN2YAIC.js.map +1 -0
- package/dist/{chunk-Y4AUJ2YA.cjs → chunk-Y7MJBI4A.cjs} +8 -8
- package/dist/chunk-Y7MJBI4A.cjs.map +1 -0
- package/dist/{chunk-4EJS5FXY.js → chunk-ZI22WT2P.js} +2 -2
- package/dist/helpers/index.cjs +2 -4
- package/dist/helpers/index.cjs.map +1 -1
- package/dist/helpers/index.d.cts +1 -5
- package/dist/helpers/index.d.ts +1 -5
- package/dist/helpers/index.js +1 -3
- package/dist/hooks/index.cjs +3 -3
- package/dist/hooks/index.d.cts +1 -1
- package/dist/hooks/index.d.ts +1 -1
- package/dist/hooks/index.js +2 -2
- package/dist/index.cjs +14 -16
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +9 -10
- package/dist/index.d.ts +9 -10
- package/dist/index.js +15 -17
- package/dist/partials/FieldValidationError/index.cjs +2 -3
- package/dist/partials/FieldValidationError/index.cjs.map +1 -1
- package/dist/partials/FieldValidationError/index.js +1 -2
- package/package.json +19 -21
- package/dist/chunk-2LAPLELO.js.map +0 -1
- package/dist/chunk-2NSCPLAA.cjs.map +0 -1
- package/dist/chunk-3Q37222E.js.map +0 -1
- package/dist/chunk-4AXNPSXG.cjs.map +0 -1
- package/dist/chunk-4EP3IGSK.cjs.map +0 -1
- package/dist/chunk-4M6F2O2K.cjs.map +0 -1
- package/dist/chunk-7HK64PN5.js.map +0 -1
- package/dist/chunk-C4RM2JSD.cjs.map +0 -1
- package/dist/chunk-F6KTQXWG.cjs +0 -107
- package/dist/chunk-F6KTQXWG.cjs.map +0 -1
- package/dist/chunk-FLX6VIO7.cjs.map +0 -1
- package/dist/chunk-IEF2GJ22.js.map +0 -1
- package/dist/chunk-K43U2JVG.cjs.map +0 -1
- package/dist/chunk-MF4JB3YT.cjs.map +0 -1
- package/dist/chunk-MRXNKY72.js.map +0 -1
- package/dist/chunk-OBQDQ4RX.js.map +0 -1
- package/dist/chunk-P4PRVNCH.js.map +0 -1
- package/dist/chunk-QLQR44AD.cjs.map +0 -1
- package/dist/chunk-U26GTLKF.js.map +0 -1
- package/dist/chunk-UJYXA5AD.js.map +0 -1
- package/dist/chunk-V7LRZ5GK.cjs.map +0 -1
- package/dist/chunk-VX76MJAI.js.map +0 -1
- package/dist/chunk-W66BVPTB.js.map +0 -1
- package/dist/chunk-WAXJ64P7.js.map +0 -1
- package/dist/chunk-Y4AUJ2YA.cjs.map +0 -1
- /package/dist/{chunk-4EJS5FXY.js.map → chunk-ZI22WT2P.js.map} +0 -0
|
@@ -1,8 +1,3 @@
|
|
|
1
|
-
import {
|
|
2
|
-
__spreadProps,
|
|
3
|
-
__spreadValues
|
|
4
|
-
} from "./chunk-CRTRMMJ7.js";
|
|
5
|
-
|
|
6
1
|
// src/helpers/nullishFields/nullishFields.ts
|
|
7
2
|
var nullString = "__NULL__";
|
|
8
3
|
var falseString = "__FALSE__";
|
|
@@ -59,24 +54,10 @@ var toValidationFormat = (formState) => {
|
|
|
59
54
|
);
|
|
60
55
|
};
|
|
61
56
|
|
|
62
|
-
// src/helpers/slugify/slugify.ts
|
|
63
|
-
import slug from "slug";
|
|
64
|
-
var slugify = (string, options) => {
|
|
65
|
-
const replacement = (options == null ? void 0 : options.replacement) || "_";
|
|
66
|
-
return slug(string, __spreadValues(__spreadProps(__spreadValues({}, slug.defaults.modes.rfc3986), {
|
|
67
|
-
charmap: __spreadValues(__spreadProps(__spreadValues({}, slug.defaults.modes.rfc3986.charmap), {
|
|
68
|
-
// allow dots by default
|
|
69
|
-
".": "."
|
|
70
|
-
}), replacement !== "-" ? { "-": "_" } : {}),
|
|
71
|
-
replacement
|
|
72
|
-
}), options || {}));
|
|
73
|
-
};
|
|
74
|
-
|
|
75
57
|
export {
|
|
76
58
|
fromNullishString,
|
|
77
59
|
toNullishString,
|
|
78
60
|
toFormFormat,
|
|
79
|
-
toValidationFormat
|
|
80
|
-
slugify
|
|
61
|
+
toValidationFormat
|
|
81
62
|
};
|
|
82
|
-
//# sourceMappingURL=chunk-
|
|
63
|
+
//# sourceMappingURL=chunk-UAV6PVB4.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/helpers/nullishFields/nullishFields.ts"],"sourcesContent":["/**\n * String markers used to preserve null, false, and 0 values during JSON processing\n */\nconst nullString = '__NULL__';\nconst falseString = '__FALSE__';\nconst zeroString = '__ZERO__';\n\n/**\n * Converts marker strings back to their original values when processing arrays\n */\nexport const fromNullishString = (value: unknown): unknown => {\n if (typeof value !== 'string') return value;\n\n switch (value) {\n case nullString:\n return null;\n case falseString:\n return false;\n case zeroString:\n return 0;\n default:\n return value;\n }\n};\n\n/**\n * Converts null/falsy values to marker strings for JSON processing\n */\nexport const toNullishString = (value: unknown): unknown => {\n if (value === null || value === '') return nullString;\n if (value === false) return falseString;\n if (value === 0) return zeroString;\n return value;\n};\n\n/**\n * Converts field values to a format suitable for forms by:\n * - Converting array values to their string markers to preserve null/falsy values\n * - Removing empty strings and null values from objects\n *\n * This conversion is required because React Hook Form does not support arrays with\n * flat values (string, number, boolean, null). Array fields must contain objects.\n * We work around this by converting array values to string markers.\n *\n * @example\n * const fields = {\n * name: 'John',\n * scores: [0, null, 75, false],\n * contact: {\n * email: '',\n * phone: null,\n * address: '123 Main St'\n * }\n * };\n *\n * // Result:\n * {\n * name: 'John',\n * scores: ['__ZERO__', '__NULL__', 75, '__FALSE__'],\n * contact: {\n * address: '123 Main St'\n * }\n * }\n */\nexport const toFormFormat = (\n fields: Record<string, unknown>,\n): Record<string, unknown> => {\n return JSON.parse(\n JSON.stringify(fields, (_, value) => {\n if (Array.isArray(value)) {\n return value.map(toNullishString);\n }\n\n if (value && typeof value === 'object') {\n return Object.fromEntries(\n Object.entries(value).filter(([_key, v]) => v !== '' && v !== null),\n );\n }\n\n return value;\n }),\n );\n};\n\n/**\n * Converts form state to a format suitable for validation by:\n * - Converting array string markers (__NULL__, __FALSE__, __ZERO__) back to their original values\n * - Converting _NULL__ to null\n * - Removing fields that contain empty strings, null, or any string markers representing null/empty values\n *\n * @example\n * const formState = {\n * name: 'John',\n * scores: [75, '__ZERO__', '_NULL__', '__FALSE__'],\n * email: null,\n * phone: '__NULL__',\n * contact: {\n * address: '123 Main St',\n * fax: null\n * }\n * };\n *\n * // Result:\n * {\n * name: 'John',\n * scores: [75, 0, null, false],\n * contact: {\n * address: '123 Main St'\n * }\n * }\n */\nexport const toValidationFormat = (\n formState: Record<string, unknown>,\n): Record<string, unknown> => {\n return JSON.parse(\n JSON.stringify(formState, (_, value) => {\n if (Array.isArray(value)) {\n return value.map(fromNullishString);\n }\n\n if (value && typeof value === 'object') {\n return Object.fromEntries(\n Object.entries(value)\n .filter(\n ([_key, v]) =>\n fromNullishString(v) !== '' && fromNullishString(v) !== null,\n )\n .map(([k, v]) => [k, fromNullishString(v)]),\n );\n }\n\n return value;\n }),\n );\n};\n"],"mappings":";AAGA,IAAM,aAAa;AACnB,IAAM,cAAc;AACpB,IAAM,aAAa;AAKZ,IAAM,oBAAoB,CAAC,UAA4B;AAC5D,MAAI,OAAO,UAAU,SAAU,QAAO;AAEtC,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAKO,IAAM,kBAAkB,CAAC,UAA4B;AAC1D,MAAI,UAAU,QAAQ,UAAU,GAAI,QAAO;AAC3C,MAAI,UAAU,MAAO,QAAO;AAC5B,MAAI,UAAU,EAAG,QAAO;AACxB,SAAO;AACT;AA+BO,IAAM,eAAe,CAC1B,WAC4B;AAC5B,SAAO,KAAK;AAAA,IACV,KAAK,UAAU,QAAQ,CAAC,GAAG,UAAU;AACnC,UAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,eAAO,MAAM,IAAI,eAAe;AAAA,MAClC;AAEA,UAAI,SAAS,OAAO,UAAU,UAAU;AACtC,eAAO,OAAO;AAAA,UACZ,OAAO,QAAQ,KAAK,EAAE,OAAO,CAAC,CAAC,MAAM,CAAC,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA,QACpE;AAAA,MACF;AAEA,aAAO;AAAA,IACT,CAAC;AAAA,EACH;AACF;AA6BO,IAAM,qBAAqB,CAChC,cAC4B;AAC5B,SAAO,KAAK;AAAA,IACV,KAAK,UAAU,WAAW,CAAC,GAAG,UAAU;AACtC,UAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,eAAO,MAAM,IAAI,iBAAiB;AAAA,MACpC;AAEA,UAAI,SAAS,OAAO,UAAU,UAAU;AACtC,eAAO,OAAO;AAAA,UACZ,OAAO,QAAQ,KAAK,EACjB;AAAA,YACC,CAAC,CAAC,MAAM,CAAC,MACP,kBAAkB,CAAC,MAAM,MAAM,kBAAkB,CAAC,MAAM;AAAA,UAC5D,EACC,IAAI,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,kBAAkB,CAAC,CAAC,CAAC;AAAA,QAC9C;AAAA,MACF;AAEA,aAAO;AAAA,IACT,CAAC;AAAA,EACH;AACF;","names":[]}
|
|
@@ -1,29 +1,23 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Controller_default
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-ZI22WT2P.js";
|
|
4
4
|
import {
|
|
5
5
|
FieldCopyTestIdButton_default
|
|
6
6
|
} from "./chunk-2CRY7VDQ.js";
|
|
7
7
|
import {
|
|
8
8
|
FieldValidationError_default
|
|
9
|
-
} from "./chunk-
|
|
9
|
+
} from "./chunk-ASPOGQPS.js";
|
|
10
10
|
import {
|
|
11
11
|
useFormContext
|
|
12
|
-
} from "./chunk-
|
|
13
|
-
import {
|
|
14
|
-
slugify
|
|
15
|
-
} from "./chunk-IEF2GJ22.js";
|
|
12
|
+
} from "./chunk-T4N6TMUL.js";
|
|
16
13
|
import {
|
|
17
14
|
__spreadProps,
|
|
18
15
|
__spreadValues
|
|
19
16
|
} from "./chunk-CRTRMMJ7.js";
|
|
20
17
|
|
|
21
18
|
// src/CheckboxGroup/CheckboxGroup.tsx
|
|
22
|
-
import {
|
|
23
|
-
|
|
24
|
-
CheckboxGroup as NextCheckboxGroup
|
|
25
|
-
} from "@nextui-org/checkbox";
|
|
26
|
-
import { tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
|
|
19
|
+
import { Checkbox, CheckboxGroup as HeroCheckboxGroup } from "@heroui/checkbox";
|
|
20
|
+
import { slugify, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
|
|
27
21
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
28
22
|
var checkboxGroupVariants = tv({
|
|
29
23
|
slots: {
|
|
@@ -34,7 +28,8 @@ var checkboxGroupVariants = tv({
|
|
|
34
28
|
itemIcon: "",
|
|
35
29
|
itemLabel: "text-sm",
|
|
36
30
|
itemWrapper: "",
|
|
37
|
-
//
|
|
31
|
+
// see HeroUI styles for group-data condition,
|
|
32
|
+
// e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts
|
|
38
33
|
label: "text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger",
|
|
39
34
|
wrapper: ""
|
|
40
35
|
}
|
|
@@ -90,7 +85,7 @@ var CheckboxGroup = ({
|
|
|
90
85
|
};
|
|
91
86
|
const checkboxGroupProps = options.length === 1 ? singleCheckboxProps : multipleCheckboxProps;
|
|
92
87
|
return /* @__PURE__ */ jsx(
|
|
93
|
-
|
|
88
|
+
HeroCheckboxGroup,
|
|
94
89
|
__spreadProps(__spreadValues({
|
|
95
90
|
name,
|
|
96
91
|
classNames: itemGroupClassName,
|
|
@@ -145,4 +140,4 @@ export {
|
|
|
145
140
|
CheckboxGroup_default,
|
|
146
141
|
CheckboxGroup_default2
|
|
147
142
|
};
|
|
148
|
-
//# sourceMappingURL=chunk-
|
|
143
|
+
//# sourceMappingURL=chunk-WKJN5A2E.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 { Checkbox, CheckboxGroup as HeroCheckboxGroup } from '@heroui/checkbox';\n\nimport { slugify, tv, variantsToClassNames } 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 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 HeroUI styles for group-data condition,\n // e.g.: https://github.com/heroui-inc/heroui/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 [HeroUI CheckboxGroup](https://www.heroui.com//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 <HeroCheckboxGroup\n name={name}\n classNames={itemGroupClassName}\n data-testid={testId}\n // see HeroUI styles for group-data condition (data-invalid),\n // e.g.: https://github.com/heroui-inc/heroui/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 </HeroCheckboxGroup>\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"]}
|
|
@@ -1,18 +1,15 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _chunkPHGFXKPUcjs = require('./chunk-PHGFXKPU.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
var _chunkJU5RT22Ycjs = require('./chunk-JU5RT22Y.cjs');
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
var
|
|
9
|
+
var _chunkOE5IW4ZGcjs = require('./chunk-OE5IW4ZG.cjs');
|
|
10
10
|
|
|
11
11
|
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
var _chunk4AXNPSXGcjs = require('./chunk-4AXNPSXG.cjs');
|
|
12
|
+
var _chunkIUVEFLF3cjs = require('./chunk-IUVEFLF3.cjs');
|
|
16
13
|
|
|
17
14
|
|
|
18
15
|
|
|
@@ -20,7 +17,7 @@ var _chunk4AXNPSXGcjs = require('./chunk-4AXNPSXG.cjs');
|
|
|
20
17
|
var _chunk4DAZAO6Ycjs = require('./chunk-4DAZAO6Y.cjs');
|
|
21
18
|
|
|
22
19
|
// src/RadioGroup/RadioGroup.tsx
|
|
23
|
-
var _radio = require('@
|
|
20
|
+
var _radio = require('@heroui/radio');
|
|
24
21
|
var _pixelutils = require('@fuf-stack/pixel-utils');
|
|
25
22
|
var _pixels = require('@fuf-stack/pixels');
|
|
26
23
|
var _Tabs = require('@fuf-stack/pixels/Tabs'); var _Tabs2 = _interopRequireDefault(_Tabs);
|
|
@@ -117,7 +114,8 @@ var radioGroupVariants = _pixelutils.tv.call(void 0, {
|
|
|
117
114
|
itemLabelWrapper: "",
|
|
118
115
|
itemWrapper: 'group-data-[invalid=true]:!border-danger [&:not(group-data-[invalid="true"]):not(group-data-[selected="false"])]:border-focus',
|
|
119
116
|
// TODO: get rid of !.
|
|
120
|
-
//
|
|
117
|
+
// see HeroUI styles for group-data condition,
|
|
118
|
+
// e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts
|
|
121
119
|
label: "text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger",
|
|
122
120
|
wrapper: "",
|
|
123
121
|
// Tabs
|
|
@@ -138,14 +136,14 @@ var RadioGroup = ({
|
|
|
138
136
|
testId: _testId = void 0,
|
|
139
137
|
variant = "default"
|
|
140
138
|
}) => {
|
|
141
|
-
const { control, debugMode, getFieldState, getValues } =
|
|
139
|
+
const { control, debugMode, getFieldState, getValues } = _chunkIUVEFLF3cjs.useFormContext.call(void 0, );
|
|
142
140
|
const { error, invalid, required, testId } = getFieldState(name, _testId);
|
|
143
141
|
const showTestIdCopyButton = debugMode === "debug-testids";
|
|
144
142
|
const showLabel = label || showTestIdCopyButton;
|
|
145
143
|
const variants = radioGroupVariants();
|
|
146
144
|
const classNames = _pixelutils.variantsToClassNames.call(void 0, variants, className, "base");
|
|
147
145
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
148
|
-
|
|
146
|
+
_chunkPHGFXKPUcjs.Controller_default,
|
|
149
147
|
{
|
|
150
148
|
control,
|
|
151
149
|
disabled,
|
|
@@ -173,7 +171,7 @@ var RadioGroup = ({
|
|
|
173
171
|
RadioBox,
|
|
174
172
|
{
|
|
175
173
|
classNames: itemClassNames,
|
|
176
|
-
"data-testid":
|
|
174
|
+
"data-testid": _pixelutils.slugify.call(void 0,
|
|
177
175
|
`${testId}_option_${option.testId || option.value}`
|
|
178
176
|
),
|
|
179
177
|
description: option.description,
|
|
@@ -199,7 +197,7 @@ var RadioGroup = ({
|
|
|
199
197
|
[classNames.itemBaseActive]: getValues()[name] !== option.value
|
|
200
198
|
}),
|
|
201
199
|
isDisabled: isDisabled || option.disabled,
|
|
202
|
-
testID:
|
|
200
|
+
testID: _pixelutils.slugify.call(void 0,
|
|
203
201
|
`${testId}_option_${option.testId || option.value}`
|
|
204
202
|
),
|
|
205
203
|
onChange,
|
|
@@ -229,7 +227,7 @@ var RadioGroup = ({
|
|
|
229
227
|
_radio.Radio,
|
|
230
228
|
{
|
|
231
229
|
classNames: itemClassNames,
|
|
232
|
-
"data-testid":
|
|
230
|
+
"data-testid": _pixelutils.slugify.call(void 0,
|
|
233
231
|
`${testId}_option_${option.testId || option.value}`
|
|
234
232
|
),
|
|
235
233
|
isDisabled: isDisabled || option.disabled,
|
|
@@ -250,7 +248,7 @@ var RadioGroup = ({
|
|
|
250
248
|
"data-invalid": invalid,
|
|
251
249
|
"data-required": required,
|
|
252
250
|
"data-testid": testId,
|
|
253
|
-
errorMessage: error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
251
|
+
errorMessage: error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOE5IW4ZGcjs.FieldValidationError_default, { error }),
|
|
254
252
|
isDisabled,
|
|
255
253
|
isInvalid: invalid,
|
|
256
254
|
isRequired: required,
|
|
@@ -280,4 +278,4 @@ var RadioGroup_default2 = RadioGroup_default;
|
|
|
280
278
|
|
|
281
279
|
|
|
282
280
|
exports.RadioGroup_default = RadioGroup_default; exports.RadioGroup_default2 = RadioGroup_default2;
|
|
283
|
-
//# sourceMappingURL=chunk-
|
|
281
|
+
//# sourceMappingURL=chunk-WRIXKFKW.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-WRIXKFKW.cjs","../src/RadioGroup/RadioGroup.tsx","../src/RadioGroup/Variants/RadioBox.tsx","../src/RadioGroup/Variants/RadioButton.tsx","../src/RadioGroup/index.ts"],"names":["jsx","cn"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-WRIXKFKW.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { TabProps } from '@fuf-stack/pixels/Tabs';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { RadioGroup as HeroRadioGroup, Radio } from '@heroui/radio';\n\nimport { cn, slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\nimport { ButtonGroup } from '@fuf-stack/pixels';\nimport Tabs from '@fuf-stack/pixels/Tabs';\n\nimport { Controller } from '../Controller';\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\nimport { RadioBox } from './Variants/RadioBox';\nimport { RadioButton } from './Variants/RadioButton';\n\nexport const radioGroupVariants = tv({\n slots: {\n base: 'group', // Needs group for group-data condition\n buttonGroup:\n 'rounded-xl group-data-[invalid=true]:border group-data-[invalid=true]:border-danger', // optional if a button group is used\n itemBase: '',\n itemBaseActive: 'bg-opacity-50', // optional if a button group is used\n itemControl: 'bg-focus group-data-[invalid=true]:bg-danger',\n itemDescription: '',\n itemLabel: 'text-sm',\n itemLabelWrapper: '',\n itemWrapper:\n 'group-data-[invalid=true]:!border-danger [&:not(group-data-[invalid=\"true\"]):not(group-data-[selected=\"false\"])]:border-focus', // TODO: get rid of !.\n // see HeroUI styles for group-data condition,\n // e.g.: https://github.com/heroui-inc/heroui/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 // Tabs\n tabList: '',\n tab: '',\n tabContent: '',\n cursor: '',\n panel: '',\n },\n});\n\ntype VariantProps = TVProps<typeof radioGroupVariants>;\ntype ClassName = TVClassName<typeof radioGroupVariants>;\n\nexport interface RadioGroupOption {\n /** Description of the value. Works with variant radioBox. */\n description?: React.ReactNode;\n /** disables the option */\n disabled?: boolean;\n /** option label */\n label?: React.ReactNode;\n /** option icon */\n icon?: ReactNode;\n /** HTML data-testid attribute of the option */\n testId?: string;\n /** option value */\n value: string;\n}\n\nexport interface RadioGroupProps<\n V extends 'default' | 'radioBox' | 'radioButton' | 'tabs',\n> extends VariantProps {\n /** CSS class name */\n className?: ClassName;\n /** Determines if the Buttons are disabled or not. */\n disabled?: boolean;\n /** determines orientation of the Buttons. */\n inline?: boolean;\n /** Label displayed next to the RadioButton. */\n label?: ReactNode;\n /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n name: string;\n /** Radio button configuration. */\n options: V extends 'default' | 'radioBox' | 'radioButton'\n ? RadioGroupOption[]\n : TabProps[];\n /** Id to grab element in internal tests. */\n testId?: string;\n /** How the RadioGroup should look like. */\n variant?: V;\n}\n\n/**\n * RadioGroup component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst RadioGroup = ({\n className = undefined,\n disabled = false,\n inline = false,\n label = undefined,\n name,\n options,\n testId: _testId = undefined,\n variant = 'default',\n}: RadioGroupProps<\n 'default' | 'radioBox' | 'radioButton' | 'tabs'\n>): ReactElement => {\n const { control, debugMode, getFieldState, getValues } = useFormContext();\n\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 = radioGroupVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n\n return (\n <Controller\n control={control}\n disabled={disabled}\n name={name}\n render={({ field: { onChange, disabled: isDisabled, onBlur, ref } }) => {\n let RadioComponents: ReactNode;\n\n const itemClassNames = {\n base: classNames.itemBase,\n control: classNames.itemControl,\n description: classNames.itemDescription,\n label: classNames.itemLabel,\n labelWrapper: classNames.itemLabelWrapper,\n wrapper: classNames.itemWrapper,\n tabList: classNames.tabList,\n tab: classNames.tab,\n tabContent: classNames.tabContent,\n cursor: classNames.cursor,\n panel: classNames.panel,\n };\n\n switch (variant) {\n case 'radioBox':\n RadioComponents = options.map((option) => {\n if ('value' in option) {\n return (\n <RadioBox\n classNames={itemClassNames}\n data-testid={slugify(\n `${testId}_option_${option.testId || option.value}`,\n )}\n description={option.description}\n icon={option.icon}\n isDisabled={isDisabled || option.disabled}\n key={option.value}\n onChange={onChange}\n value={option.value}\n >\n {option.label ? option.label : option.value}\n </RadioBox>\n );\n }\n return null;\n });\n break;\n case 'radioButton':\n RadioComponents = options.map((option) => {\n if ('value' in option) {\n return (\n <RadioButton\n className={cn(classNames.itemBase, {\n [classNames.itemBaseActive]:\n getValues()[name] !== option.value,\n })}\n isDisabled={isDisabled || option.disabled}\n key={option.value}\n testID={slugify(\n `${testId}_option_${option.testId || option.value}`,\n )}\n onChange={onChange}\n value={option.value}\n // TODO: how to do the classNames properly (make selected option darker with same color)\n >\n {option.label ? option.label : option.value}\n </RadioButton>\n );\n }\n return null;\n });\n break;\n\n case 'tabs':\n RadioComponents = (\n <Tabs\n fullWidth={false}\n tabs={options as TabProps[]}\n onSelectionChange={onChange}\n />\n );\n break;\n default:\n RadioComponents = options.map((option) => {\n if ('value' in option) {\n return (\n <Radio\n classNames={itemClassNames}\n data-testid={slugify(\n `${testId}_option_${option.testId || option.value}`,\n )}\n isDisabled={isDisabled || option.disabled}\n key={option.value}\n onChange={onChange}\n value={option.value}\n >\n {option.label ? option.label : option.value}\n </Radio>\n );\n }\n return null;\n });\n }\n\n return (\n <HeroRadioGroup\n classNames={classNames}\n // see HeroUI styles for group-data condition (data-invalid),\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n data-invalid={invalid}\n data-required={required}\n data-testid={testId}\n errorMessage={error && <FieldValidationError error={error} />}\n isDisabled={isDisabled}\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 name={name}\n orientation={inline ? 'horizontal' : 'vertical'}\n onBlur={onBlur}\n onChange={onChange}\n ref={ref}\n >\n {variant === 'radioButton' ? (\n <ButtonGroup className={classNames.buttonGroup}>\n {RadioComponents}\n </ButtonGroup>\n ) : (\n RadioComponents\n )}\n </HeroRadioGroup>\n );\n }}\n />\n );\n};\n\nexport default RadioGroup;\n","import type { RadioProps as HeroRadioProps } from '@heroui/radio';\nimport type { ReactNode } from 'react';\n\nimport { useRadio } from '@heroui/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\ninterface RadioProps extends HeroRadioProps {\n /** icon for the option */\n icon?: ReactNode;\n}\n\nexport const RadioBox = ({ icon = undefined, ...props }: RadioProps) => {\n const {\n children,\n Component,\n description,\n getBaseProps,\n getControlProps,\n getInputProps,\n getLabelProps,\n getLabelWrapperProps,\n getWrapperProps,\n isDisabled,\n } = useRadio(props);\n\n return (\n <Component\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...getBaseProps()}\n className={cn(\n 'group inline-flex flex-auto cursor-pointer items-center justify-between gap-4 rounded-lg border-2 border-default p-4 hover:bg-content2 data-[selected=true]:border-focus',\n {\n // disabled styles\n 'pointer-events-none opacity-disabled': isDisabled,\n },\n )}\n >\n <VisuallyHidden>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <input {...getInputProps()} />\n </VisuallyHidden>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <span {...getWrapperProps()}>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <span {...getControlProps()} />\n </span>\n {icon}\n <div\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...getLabelWrapperProps()}\n className={cn(getLabelWrapperProps().className, 'grow')}\n >\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n {children && <span {...getLabelProps()}>{children}</span>}\n {description && (\n <span className=\"text-small text-foreground opacity-70\">\n {description}\n </span>\n )}\n </div>\n </Component>\n );\n};\n\nexport default RadioBox;\n","import { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\ninterface RadioButtonProps {\n /** label of the value. */\n children: React.ReactNode;\n /** CSS class name */\n className?: string;\n /** disables the option */\n isDisabled?: boolean;\n /** HTML data-testid attribute of the option */\n testID?: string;\n /** Callback function. Executed if the option is clicked. */\n onChange: (...event: unknown[]) => void;\n /** value of the option. */\n value: string;\n}\n\nexport const RadioButton = ({\n children,\n className = undefined,\n isDisabled = false,\n onChange,\n testID = undefined,\n value,\n}: RadioButtonProps) => {\n return (\n <Button\n className={cn(className)}\n testId={testID}\n disabled={isDisabled}\n key={`index_${value}`}\n onClick={() => {\n return onChange(value);\n }}\n >\n {children}\n </Button>\n );\n};\n\nexport default RadioButton;\n","import RadioGroup from './RadioGroup';\n\nexport type { RadioGroupProps } from './RadioGroup';\n\nexport { RadioGroup };\n\nexport default RadioGroup;\n"]}
|
|
@@ -3,15 +3,15 @@ import {
|
|
|
3
3
|
} from "./chunk-2CRY7VDQ.js";
|
|
4
4
|
import {
|
|
5
5
|
FieldValidationError_default
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-ASPOGQPS.js";
|
|
7
7
|
import {
|
|
8
8
|
useFieldArray,
|
|
9
9
|
useFormContext,
|
|
10
10
|
useInput
|
|
11
|
-
} from "./chunk-
|
|
11
|
+
} from "./chunk-T4N6TMUL.js";
|
|
12
12
|
import {
|
|
13
13
|
toNullishString
|
|
14
|
-
} from "./chunk-
|
|
14
|
+
} from "./chunk-UAV6PVB4.js";
|
|
15
15
|
import {
|
|
16
16
|
__spreadProps,
|
|
17
17
|
__spreadValues
|
|
@@ -102,6 +102,7 @@ var SortDragHandle_default = SortDragHandle;
|
|
|
102
102
|
// src/FieldArray/subcomponents/FieldArrayElement.tsx
|
|
103
103
|
import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
|
|
104
104
|
var FieldArrayElement = ({
|
|
105
|
+
arrayFieldName,
|
|
105
106
|
children,
|
|
106
107
|
className,
|
|
107
108
|
fields,
|
|
@@ -110,13 +111,12 @@ var FieldArrayElement = ({
|
|
|
110
111
|
insertAfter = false,
|
|
111
112
|
lastNotDeletable = true,
|
|
112
113
|
methods,
|
|
113
|
-
name,
|
|
114
114
|
sortable = false,
|
|
115
115
|
testId = void 0
|
|
116
116
|
}) => {
|
|
117
117
|
var _a;
|
|
118
118
|
const { getFieldState } = useFormContext();
|
|
119
|
-
const { error, invalid } = getFieldState(
|
|
119
|
+
const { error, invalid } = getFieldState(arrayFieldName, void 0);
|
|
120
120
|
const { getHelperWrapperProps, getErrorMessageProps } = useInput({
|
|
121
121
|
classNames: { helperWrapper: "block" },
|
|
122
122
|
errorMessage: JSON.stringify(error),
|
|
@@ -256,7 +256,7 @@ var FieldArray = ({
|
|
|
256
256
|
elementInitialValue: _elementInitialValue = null,
|
|
257
257
|
insertAfter = false,
|
|
258
258
|
label: _label = void 0,
|
|
259
|
-
|
|
259
|
+
lastElementNotRemovable = false,
|
|
260
260
|
name,
|
|
261
261
|
sortable = false,
|
|
262
262
|
testId: _testId = void 0
|
|
@@ -287,7 +287,7 @@ var FieldArray = ({
|
|
|
287
287
|
classNames: { helperWrapper: "block" }
|
|
288
288
|
});
|
|
289
289
|
const elementInitialValue = toNullishString(_elementInitialValue);
|
|
290
|
-
if (
|
|
290
|
+
if (lastElementNotRemovable && fields.length === 0) {
|
|
291
291
|
append(elementInitialValue);
|
|
292
292
|
}
|
|
293
293
|
const showTestIdCopyButton = debugMode === "debug-testids";
|
|
@@ -311,7 +311,9 @@ var FieldArray = ({
|
|
|
311
311
|
showTestIdCopyButton && /* @__PURE__ */ jsx6(FieldCopyTestIdButton_default, { testId })
|
|
312
312
|
] }),
|
|
313
313
|
fields.map((field, index) => {
|
|
314
|
-
const
|
|
314
|
+
const elementName = `${name}.${index}`;
|
|
315
|
+
const elementTestId = `${testId}${index}`;
|
|
316
|
+
const elementMethods = {
|
|
315
317
|
append: () => append(elementInitialValue),
|
|
316
318
|
duplicate: () => {
|
|
317
319
|
const values = getValues(name);
|
|
@@ -323,23 +325,23 @@ var FieldArray = ({
|
|
|
323
325
|
return /* @__PURE__ */ jsx6(
|
|
324
326
|
FieldArrayElement_default,
|
|
325
327
|
{
|
|
328
|
+
arrayFieldName: name,
|
|
326
329
|
className,
|
|
327
330
|
fields,
|
|
328
331
|
id: field.id,
|
|
329
332
|
index,
|
|
330
333
|
duplicate,
|
|
331
334
|
insertAfter,
|
|
332
|
-
lastNotDeletable:
|
|
333
|
-
methods,
|
|
334
|
-
name,
|
|
335
|
+
lastNotDeletable: lastElementNotRemovable,
|
|
336
|
+
methods: elementMethods,
|
|
335
337
|
sortable,
|
|
336
|
-
testId:
|
|
338
|
+
testId: elementTestId,
|
|
337
339
|
children: children({
|
|
338
340
|
index,
|
|
339
341
|
length: fields.length,
|
|
340
|
-
methods,
|
|
341
|
-
name:
|
|
342
|
-
testId:
|
|
342
|
+
methods: elementMethods,
|
|
343
|
+
name: elementName,
|
|
344
|
+
testId: elementTestId
|
|
343
345
|
})
|
|
344
346
|
},
|
|
345
347
|
field.id
|
|
@@ -369,4 +371,4 @@ export {
|
|
|
369
371
|
FieldArray_default,
|
|
370
372
|
FieldArray_default2
|
|
371
373
|
};
|
|
372
|
-
//# sourceMappingURL=chunk-
|
|
374
|
+
//# sourceMappingURL=chunk-XHN2YAIC.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/FieldArray/FieldArray.tsx","../src/FieldArray/subcomponents/FieldArrayElement.tsx","../src/FieldArray/subcomponents/ElementInsertAfterButton.tsx","../src/FieldArray/subcomponents/ElementRemoveButton.tsx","../src/FieldArray/subcomponents/SortDragHandle.tsx","../src/FieldArray/subcomponents/SortContext.tsx","../src/FieldArray/index.ts"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\n\nimport type { FieldArrayElementMethods } from './subcomponents/FieldArrayElement';\nimport type { FieldArrayProps } from './types';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\nimport { toNullishString } from '../helpers';\nimport { useFieldArray, useFormContext, useInput } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\nimport FieldArrayElement from './subcomponents/FieldArrayElement';\nimport SortContext from './subcomponents/SortContext';\n\nexport const fieldArrayVariants = tv({\n slots: {\n appendButton: 'w-full',\n elementContent: 'flex-grow',\n insertAfterButton: 'text-xs font-medium',\n label: '!pointer-events-auto !static !z-0 -mb-1 ml-1 !inline-block',\n list: 'm-0 w-full list-none',\n listItem: 'mb-4 flex w-full flex-row items-center',\n removeButton: 'ml-1',\n sortDragHandle: 'mr-2 text-base text-xl',\n },\n});\n\n/**\n * FieldArray component based in [RHF useFieldArray](https://react-hook-form.com/docs/usefieldarray)\n */\nconst FieldArray = ({\n appendButtonText = 'Add Element',\n children,\n className: _className = undefined,\n duplicate = false,\n elementInitialValue: _elementInitialValue = null,\n insertAfter = false,\n label: _label = undefined,\n lastElementNotRemovable = false,\n name,\n sortable = false,\n testId: _testId = undefined,\n}: FieldArrayProps) => {\n // className from slots\n const variants = fieldArrayVariants();\n const className = variantsToClassNames(variants, _className, 'list');\n\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 // TODO: add info\n const elementInitialValue = toNullishString(_elementInitialValue);\n\n // When lastElementNotRemovable is set and the field array is empty,\n // add an initial element to ensure there's always at least one visible element\n if (lastElementNotRemovable && fields.length === 0) {\n append(elementInitialValue);\n }\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n return (\n <SortContext sortable={sortable} move={move} fields={fields}>\n <ul\n className={className.list}\n data-testid={testId}\n /**\n * TODO: this trigger causes the field array (not element)\n * are shown immediately, but this will cause additional\n * render cycles, not sure if we should do this...\n */\n onBlur={() => trigger(`${name}`)}\n >\n {/* field array label */}\n {showLabel && (\n <>\n {label && (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label\n {...getLabelProps()}\n className={cn(getLabelProps()?.className, className.label)}\n >\n {label}\n </label>\n )}\n {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n </>\n )}\n\n {fields.map((field, index) => {\n const elementName = `${name}.${index}`;\n const elementTestId = `${testId}${index}`;\n\n // create methods for element\n const elementMethods: FieldArrayElementMethods = {\n append: () => append(elementInitialValue),\n duplicate: () => {\n const values = getValues(name);\n insert(index + 1, values[index]);\n },\n insert: () => insert(index + 1, elementInitialValue),\n remove: () => remove(index),\n };\n\n return (\n <FieldArrayElement\n arrayFieldName={name}\n className={className}\n fields={fields}\n id={field.id}\n index={index}\n duplicate={duplicate}\n insertAfter={insertAfter}\n key={field.id}\n lastNotDeletable={lastElementNotRemovable}\n methods={elementMethods}\n sortable={sortable}\n testId={elementTestId}\n >\n {children({\n index,\n length: fields.length,\n methods: elementMethods,\n name: elementName,\n testId: elementTestId,\n })}\n </FieldArrayElement>\n );\n })}\n\n {/* append elements */}\n <Button\n className={className.appendButton}\n onClick={() => append(elementInitialValue)}\n size=\"sm\"\n testId={`${testId}_append_button`}\n >\n {appendButtonText}\n </Button>\n\n {/* top level field array errors */}\n {/* @ts-expect-error rhf incompatibility */}\n {error?._errors && (\n <div {...getHelperWrapperProps()}>\n <div {...getErrorMessageProps()}>\n {/* @ts-expect-error rhf incompatibility */}\n <FieldValidationError error={error?._errors} />\n </div>\n </div>\n )}\n </ul>\n </SortContext>\n );\n};\n\nexport default FieldArray;\n","/* eslint-disable react/jsx-props-no-spreading */\n\nimport type { ClassValue } from '@fuf-stack/pixel-utils';\nimport type { FieldArrayFeatures } from '../types';\n\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { useFormContext, useInput } from '../../hooks';\nimport { FieldValidationError } from '../../partials/FieldValidationError';\nimport ElementInsertAfterButton from './ElementInsertAfterButton';\nimport ElementRemoveButton from './ElementRemoveButton';\nimport SortDragHandle from './SortDragHandle';\n\nexport type FieldArrayElementMethods = {\n /** Add new element at end */\n append: () => void;\n /** Clone current element */\n duplicate: () => void;\n /** Add new element after current */\n insert: () => void;\n /** Remove current element */\n remove: () => void;\n};\n\ninterface FieldArrayElementProps extends FieldArrayFeatures {\n /** Base field name for form context */\n arrayFieldName: string;\n /** Form elements to render inside array element */\n children: React.ReactNode;\n /** CSS class names for component parts */\n className: {\n /** Class of the content of the li */\n elementContent?: ClassValue;\n /** Class for the li */\n listItem?: ClassValue;\n /** Class for the insert button between elements */\n insertAfterButton?: ClassValue;\n /** Class for the remove element button */\n removeButton?: ClassValue;\n /** Class for the drag handle when sorting enabled */\n sortDragHandle?: ClassValue;\n };\n /** All fields in the form array */\n fields: Record<'id', string>[];\n /** Unique identifier for drag/drop */\n id: string | number;\n /** Field index in array */\n index: number;\n /** Prevent deletion of last remaining element */\n lastNotDeletable?: boolean;\n /** Field array operation methods */\n methods: FieldArrayElementMethods;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\n/**\n * Form array element component using react-hook-form with drag-drop sorting\n * and validation capabilities\n */\nconst FieldArrayElement = ({\n arrayFieldName,\n children,\n className,\n fields,\n id,\n index,\n insertAfter = false,\n lastNotDeletable = true,\n methods,\n sortable = false,\n testId = undefined,\n}: FieldArrayElementProps) => {\n const { getFieldState } = useFormContext();\n const { error, invalid } = getFieldState(arrayFieldName, undefined);\n\n // TODO: what about input props? and label props? Do we need a label?\n const { getHelperWrapperProps, getErrorMessageProps } = useInput({\n classNames: { helperWrapper: 'block' },\n errorMessage: JSON.stringify(error),\n isInvalid: invalid,\n labelPlacement: 'inside',\n placeholder: ' ',\n });\n\n // Apply transform styles when sortable is enabled for smooth drag animations\n // transform: handles the item's position during drag\n // transition: controls the animation timing when dropping\n const { setNodeRef, transform, transition } = useSortable({ id });\n const sortingStyle = sortable\n ? {\n transform: CSS.Translate.toString(transform),\n transition,\n }\n : undefined;\n\n return (\n <>\n <li\n className={cn(className.listItem)}\n ref={setNodeRef}\n style={sortingStyle}\n >\n {/** sorting drag handle */}\n {sortable && (\n <SortDragHandle\n className={className.sortDragHandle}\n id={id}\n testId={`${testId}_sort_drag_handle`}\n />\n )}\n\n {/** render element fields */}\n <div className={cn(className.elementContent)} data-testid={testId}>\n {children}\n </div>\n\n {/** remove element */}\n {lastNotDeletable && fields.length === 1 ? null : (\n <ElementRemoveButton\n className={className.removeButton}\n onClick={() => methods.remove()}\n testId={`${testId}_remove_button`}\n />\n )}\n\n {/** insertAfter feature when not last element */}\n {insertAfter && index !== fields.length - 1 && (\n <ElementInsertAfterButton\n className={className.insertAfterButton}\n onClick={() => methods.insert()}\n testId={`${testId}_insert_after_button`}\n />\n )}\n </li>\n\n {/** element error */}\n {error && typeof error[index] !== 'undefined' && (\n <div {...getHelperWrapperProps()}>\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};\n\nexport default FieldArrayElement;\n","import type { ClassValue } from '@fuf-stack/pixel-utils';\n\nimport { FaPlus } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\ninterface ElementInsertAfterButtonProps {\n /** CSS class name */\n className?: ClassValue;\n /** click handler */\n onClick: () => void;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\nconst ElementInsertAfterButton = ({\n className = undefined,\n onClick,\n testId = undefined,\n}: ElementInsertAfterButtonProps) => {\n return (\n <Button\n className={cn(className)}\n color=\"success\"\n icon={<FaPlus />}\n onClick={onClick}\n size=\"sm\"\n testId={testId}\n variant=\"light\"\n />\n );\n};\n\nexport default ElementInsertAfterButton;\n","import type { ClassValue } from '@fuf-stack/pixel-utils';\n\nimport { FaTimes } from 'react-icons/fa';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\ninterface ElementRemoveButtonProps {\n /** CSS class name */\n className?: ClassValue;\n /** click handler */\n onClick: () => void;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\nconst ElementRemoveButton = ({\n className = undefined,\n onClick,\n testId = undefined,\n}: ElementRemoveButtonProps) => {\n return (\n <Button\n ariaLabel=\"remove element\"\n className={cn(className)}\n color=\"danger\"\n icon={<FaTimes />}\n onClick={onClick}\n testId={testId}\n variant=\"light\"\n />\n );\n};\n\nexport default ElementRemoveButton;\n","import type { ClassValue } from '@fuf-stack/pixel-utils';\n\nimport { FaGripVertical } from 'react-icons/fa';\n\nimport { useSortable } from '@dnd-kit/sortable';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\ninterface SortDragHandleProps {\n /** Optional CSS class name */\n className?: ClassValue;\n /** Unique identifier for sortable item */\n id: string | number;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\n/**\n * Drag handle component that integrates with dnd-kit sortable functionality.\n * Renders a vertical grip icon that can be used to reorder items.\n */\nconst SortDragHandle = ({\n className = undefined,\n id,\n testId = undefined,\n}: SortDragHandleProps) => {\n // Get dnd-kit sortable attributes and listeners\n const { attributes, listeners } = useSortable({ id });\n\n return (\n <div\n className={cn(className)}\n data-testid={testId}\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 <FaGripVertical />\n </div>\n );\n};\n\nexport default SortDragHandle;\n","/* eslint-disable react/jsx-props-no-spreading */\n\nimport type { DragEndEvent } from '@dnd-kit/core';\nimport type { ReactNode } from 'react';\nimport type { UseFieldArrayMove } 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';\n\ninterface SortContextProps {\n /** child components */\n children: ReactNode;\n /** enable/disable sorting functionality */\n sortable: boolean;\n /** Array of objects containing unique IDs for sortable items */\n fields: Record<'id', string>[];\n /** react-hook-form's move function to update field array indices */\n move: UseFieldArrayMove;\n}\n\n/**\n * A wrapper component that provides drag-and-drop sorting functionality for field arrays\n * using dnd-kit and react-hook-form.\n *\n * This component integrates with react-hook-form's field arrays to enable vertical\n * drag-and-drop reordering of form fields. It supports both pointer (mouse/touch)\n * and keyboard interactions for accessibility.\n */\nconst SortContext = ({\n children,\n sortable,\n fields,\n move,\n}: SortContextProps) => {\n // Initialize sensors for both pointer (mouse/touch) and keyboard interactions\n const sensors = useSensors(\n useSensor(PointerSensor),\n useSensor(KeyboardSensor),\n );\n\n // Early return if sorting is disabled\n if (!sortable) {\n return children;\n }\n\n /**\n * Handles the end of a drag operation by updating field positions\n * @param event - The drag end event containing active and over elements\n */\n const handleDragEnd = (event: DragEndEvent) => {\n const { active, over } = event;\n\n // Only move if dropping over a different item\n if (active.id !== over?.id) {\n // Find the indices of the dragged item and drop target\n const oldIndex = fields.findIndex((field) => field.id === active.id);\n const newIndex = fields.findIndex((field) => field.id === over?.id);\n // Update the field array order using react-hook-form's move function\n move(oldIndex, newIndex);\n }\n };\n\n return (\n <DndContext\n collisionDetection={closestCenter}\n modifiers={[restrictToVerticalAxis, restrictToWindowEdges]}\n onDragEnd={handleDragEnd}\n sensors={sensors}\n >\n <SortableContext\n items={fields.map((field) => field.id)}\n strategy={verticalListSortingStrategy}\n >\n {children}\n </SortableContext>\n </DndContext>\n );\n};\n\nexport default SortContext;\n","import FieldArray from './FieldArray';\n\nexport type * from './types';\n\nexport { FieldArray };\n\nexport default FieldArray;\n"],"mappings":"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","names":["cn","Button","useSortable","cn","cn","Button","jsx","cn","jsx","cn","jsx","useSortable","cn","jsx","Fragment","jsx","jsxs","cn","Button","FieldArray_default"]}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _chunkPHGFXKPUcjs = require('./chunk-PHGFXKPU.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
var _chunkJU5RT22Ycjs = require('./chunk-JU5RT22Y.cjs');
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
var
|
|
9
|
+
var _chunkOE5IW4ZGcjs = require('./chunk-OE5IW4ZG.cjs');
|
|
10
10
|
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var _chunkIUVEFLF3cjs = require('./chunk-IUVEFLF3.cjs');
|
|
13
13
|
|
|
14
14
|
// src/Input/Input.tsx
|
|
15
|
-
var _input = require('@
|
|
15
|
+
var _input = require('@heroui/input');
|
|
16
16
|
var _pixelutils = require('@fuf-stack/pixel-utils');
|
|
17
17
|
var _jsxruntime = require('react/jsx-runtime');
|
|
18
18
|
var Input = ({
|
|
@@ -27,12 +27,12 @@ var Input = ({
|
|
|
27
27
|
transformValue = void 0,
|
|
28
28
|
type = void 0
|
|
29
29
|
}) => {
|
|
30
|
-
const { control, debugMode, getFieldState } =
|
|
30
|
+
const { control, debugMode, getFieldState } = _chunkIUVEFLF3cjs.useFormContext.call(void 0, );
|
|
31
31
|
const { error, invalid, required, testId } = getFieldState(name, _testId);
|
|
32
32
|
const showTestIdCopyButton = debugMode === "debug-testids";
|
|
33
33
|
const showLabel = label || showTestIdCopyButton;
|
|
34
34
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
35
|
-
|
|
35
|
+
_chunkPHGFXKPUcjs.Controller_default,
|
|
36
36
|
{
|
|
37
37
|
control,
|
|
38
38
|
disabled,
|
|
@@ -60,7 +60,7 @@ var Input = ({
|
|
|
60
60
|
},
|
|
61
61
|
"data-testid": testId,
|
|
62
62
|
endContent,
|
|
63
|
-
errorMessage: error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
63
|
+
errorMessage: error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOE5IW4ZGcjs.FieldValidationError_default, { error }),
|
|
64
64
|
isDisabled,
|
|
65
65
|
isInvalid: invalid,
|
|
66
66
|
isRequired: required,
|
|
@@ -94,4 +94,4 @@ var Input_default2 = Input_default;
|
|
|
94
94
|
|
|
95
95
|
|
|
96
96
|
exports.Input_default = Input_default; exports.Input_default2 = Input_default2;
|
|
97
|
-
//# sourceMappingURL=chunk-
|
|
97
|
+
//# sourceMappingURL=chunk-Y7MJBI4A.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-Y7MJBI4A.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-Y7MJBI4A.cjs","sourcesContent":[null,"import type { ReactNode } from 'react';\n\nimport { Input as HeroInput } from '@heroui/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 [HeroUI Input](https://www.heroui.com//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 <HeroInput\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 // @ts-expect-error number is ok here\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"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import {
|
|
2
2
|
fromNullishString,
|
|
3
3
|
toNullishString
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-UAV6PVB4.js";
|
|
5
5
|
import {
|
|
6
6
|
__objRest,
|
|
7
7
|
__spreadProps,
|
|
@@ -48,4 +48,4 @@ export {
|
|
|
48
48
|
Controller_default,
|
|
49
49
|
Controller_default2
|
|
50
50
|
};
|
|
51
|
-
//# sourceMappingURL=chunk-
|
|
51
|
+
//# sourceMappingURL=chunk-ZI22WT2P.js.map
|
package/dist/helpers/index.cjs
CHANGED
|
@@ -3,14 +3,12 @@
|
|
|
3
3
|
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
var _chunk4AXNPSXGcjs = require('../chunk-4AXNPSXG.cjs');
|
|
6
|
+
var _chunkCESGUF6Fcjs = require('../chunk-CESGUF6F.cjs');
|
|
8
7
|
require('../chunk-4DAZAO6Y.cjs');
|
|
9
8
|
|
|
10
9
|
|
|
11
10
|
|
|
12
11
|
|
|
13
12
|
|
|
14
|
-
|
|
15
|
-
exports.fromNullishString = _chunk4AXNPSXGcjs.fromNullishString; exports.slugify = _chunk4AXNPSXGcjs.slugify; exports.toFormFormat = _chunk4AXNPSXGcjs.toFormFormat; exports.toNullishString = _chunk4AXNPSXGcjs.toNullishString; exports.toValidationFormat = _chunk4AXNPSXGcjs.toValidationFormat;
|
|
13
|
+
exports.fromNullishString = _chunkCESGUF6Fcjs.fromNullishString; exports.toFormFormat = _chunkCESGUF6Fcjs.toFormFormat; exports.toNullishString = _chunkCESGUF6Fcjs.toNullishString; exports.toValidationFormat = _chunkCESGUF6Fcjs.toValidationFormat;
|
|
16
14
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/helpers/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACA;AACA;
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/helpers/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACA;AACA;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACA;AACA;AACA;AACF,uPAAC","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/helpers/index.cjs"}
|
package/dist/helpers/index.d.cts
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import { Options } from 'slug';
|
|
2
|
-
|
|
3
1
|
/**
|
|
4
2
|
* Converts marker strings back to their original values when processing arrays
|
|
5
3
|
*/
|
|
@@ -67,6 +65,4 @@ declare const toFormFormat: (fields: Record<string, unknown>) => Record<string,
|
|
|
67
65
|
*/
|
|
68
66
|
declare const toValidationFormat: (formState: Record<string, unknown>) => Record<string, unknown>;
|
|
69
67
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
export { fromNullishString, slugify, toFormFormat, toNullishString, toValidationFormat };
|
|
68
|
+
export { fromNullishString, toFormFormat, toNullishString, toValidationFormat };
|
package/dist/helpers/index.d.ts
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import { Options } from 'slug';
|
|
2
|
-
|
|
3
1
|
/**
|
|
4
2
|
* Converts marker strings back to their original values when processing arrays
|
|
5
3
|
*/
|
|
@@ -67,6 +65,4 @@ declare const toFormFormat: (fields: Record<string, unknown>) => Record<string,
|
|
|
67
65
|
*/
|
|
68
66
|
declare const toValidationFormat: (formState: Record<string, unknown>) => Record<string, unknown>;
|
|
69
67
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
export { fromNullishString, slugify, toFormFormat, toNullishString, toValidationFormat };
|
|
68
|
+
export { fromNullishString, toFormFormat, toNullishString, toValidationFormat };
|
package/dist/helpers/index.js
CHANGED
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
import {
|
|
2
2
|
fromNullishString,
|
|
3
|
-
slugify,
|
|
4
3
|
toFormFormat,
|
|
5
4
|
toNullishString,
|
|
6
5
|
toValidationFormat
|
|
7
|
-
} from "../chunk-
|
|
6
|
+
} from "../chunk-UAV6PVB4.js";
|
|
8
7
|
import "../chunk-CRTRMMJ7.js";
|
|
9
8
|
export {
|
|
10
9
|
fromNullishString,
|
|
11
|
-
slugify,
|
|
12
10
|
toFormFormat,
|
|
13
11
|
toNullishString,
|
|
14
12
|
toValidationFormat
|
package/dist/hooks/index.cjs
CHANGED
|
@@ -3,13 +3,13 @@
|
|
|
3
3
|
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
var
|
|
7
|
-
require('../chunk-
|
|
6
|
+
var _chunkIUVEFLF3cjs = require('../chunk-IUVEFLF3.cjs');
|
|
7
|
+
require('../chunk-CESGUF6F.cjs');
|
|
8
8
|
require('../chunk-4DAZAO6Y.cjs');
|
|
9
9
|
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
|
|
14
|
-
exports.checkFieldIsRequired =
|
|
14
|
+
exports.checkFieldIsRequired = _chunkIUVEFLF3cjs.checkFieldIsRequired; exports.useFieldArray = _chunkIUVEFLF3cjs.useFieldArray; exports.useFormContext = _chunkIUVEFLF3cjs.useFormContext; exports.useInput = _chunkIUVEFLF3cjs.useInput;
|
|
15
15
|
//# sourceMappingURL=index.cjs.map
|
package/dist/hooks/index.d.cts
CHANGED
|
@@ -3,7 +3,7 @@ import { FieldError } from 'react-hook-form';
|
|
|
3
3
|
export { useFieldArray } from 'react-hook-form';
|
|
4
4
|
import { D as DebugModeSettings } from '../FormContext-ldCpxKnY.cjs';
|
|
5
5
|
import { VetoInstance } from '@fuf-stack/veto';
|
|
6
|
-
export { useInput } from '@
|
|
6
|
+
export { useInput } from '@heroui/input';
|
|
7
7
|
|
|
8
8
|
/** Schema check whether a field is required or optional */
|
|
9
9
|
declare const checkFieldIsRequired: (validation: VetoInstance, path: string[]) => boolean;
|