@fuf-stack/uniform 0.18.4 → 0.19.0
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 -7
- package/dist/CheckboxGroup/index.cjs.map +1 -1
- package/dist/CheckboxGroup/index.js +5 -6
- package/dist/FieldArray/index.cjs +6 -6
- package/dist/FieldArray/index.js +5 -5
- package/dist/{FieldCopyTestIdButton-DnbovhMk.d.ts → FieldCopyTestIdButton-_TDlmw0L.d.cts} +2 -0
- package/dist/{FieldCopyTestIdButton-DnbovhMk.d.cts → FieldCopyTestIdButton-_TDlmw0L.d.ts} +2 -0
- package/dist/{FieldValidationError-DAT12Ess.d.ts → FieldValidationError-CU_xw0BL.d.cts} +5 -2
- package/dist/{FieldValidationError-DAT12Ess.d.cts → FieldValidationError-CU_xw0BL.d.ts} +5 -2
- package/dist/Form/index.cjs +4 -4
- package/dist/Form/index.js +3 -3
- package/dist/Grid/index.cjs +1 -1
- package/dist/Grid/index.js +1 -1
- package/dist/Input/index.cjs +6 -7
- package/dist/Input/index.cjs.map +1 -1
- package/dist/Input/index.js +5 -6
- package/dist/RadioBoxes/index.cjs +6 -7
- package/dist/RadioBoxes/index.cjs.map +1 -1
- package/dist/RadioBoxes/index.js +5 -6
- package/dist/RadioGroup/index.cjs +6 -7
- package/dist/RadioGroup/index.cjs.map +1 -1
- package/dist/RadioGroup/index.js +5 -6
- package/dist/RadioTabs/index.cjs +6 -7
- package/dist/RadioTabs/index.cjs.map +1 -1
- package/dist/RadioTabs/index.js +5 -6
- package/dist/Select/index.cjs +6 -7
- package/dist/Select/index.cjs.map +1 -1
- package/dist/Select/index.js +5 -6
- package/dist/SubmitButton/index.cjs +4 -4
- package/dist/SubmitButton/index.js +3 -3
- package/dist/Switch/index.cjs +6 -7
- package/dist/Switch/index.cjs.map +1 -1
- package/dist/Switch/index.js +5 -6
- package/dist/TextArea/index.cjs +6 -7
- package/dist/TextArea/index.cjs.map +1 -1
- package/dist/TextArea/index.js +5 -6
- package/dist/chunk-25Y2Q5CX.cjs +110 -0
- package/dist/chunk-25Y2Q5CX.cjs.map +1 -0
- package/dist/{chunk-IOIYK6UC.js → chunk-35I663WR.js} +29 -29
- package/dist/chunk-35I663WR.js.map +1 -0
- package/dist/{chunk-FNY55CAR.js → chunk-3JRZ5YNE.js} +10 -9
- package/dist/chunk-3JRZ5YNE.js.map +1 -0
- package/dist/chunk-4DVYBP2O.cjs +236 -0
- package/dist/chunk-4DVYBP2O.cjs.map +1 -0
- package/dist/chunk-4IQKCUZC.cjs +145 -0
- package/dist/chunk-4IQKCUZC.cjs.map +1 -0
- package/dist/{chunk-4DAZAO6Y.cjs → chunk-555JRYCS.cjs} +4 -2
- package/dist/chunk-555JRYCS.cjs.map +1 -0
- package/dist/{chunk-WI6FEFKD.cjs → chunk-5NKR4C73.cjs} +18 -17
- package/dist/chunk-5NKR4C73.cjs.map +1 -0
- package/dist/chunk-5W2IWHSE.js +89 -0
- package/dist/chunk-5W2IWHSE.js.map +1 -0
- package/dist/{chunk-TONXQKTY.cjs → chunk-6GCMM22R.cjs} +36 -48
- package/dist/chunk-6GCMM22R.cjs.map +1 -0
- package/dist/chunk-7BLVIVDU.cjs +281 -0
- package/dist/chunk-7BLVIVDU.cjs.map +1 -0
- package/dist/{chunk-BLAMCAGB.js → chunk-7NZKBUL6.js} +37 -49
- package/dist/chunk-7NZKBUL6.js.map +1 -0
- package/dist/{chunk-5NRHHIFP.js → chunk-7R2P54VS.js} +38 -50
- package/dist/chunk-7R2P54VS.js.map +1 -0
- package/dist/{chunk-2CRY7VDQ.js → chunk-BQGN3JTU.js} +1 -1
- package/dist/chunk-BQGN3JTU.js.map +1 -0
- package/dist/{chunk-P332MPVH.js → chunk-BXQ3MVNH.js} +5 -5
- package/dist/chunk-BXQ3MVNH.js.map +1 -0
- package/dist/chunk-CN5XEGV4.js +281 -0
- package/dist/chunk-CN5XEGV4.js.map +1 -0
- package/dist/chunk-DBKDDOS2.cjs +89 -0
- package/dist/chunk-DBKDDOS2.cjs.map +1 -0
- package/dist/chunk-E62JDTFS.js +110 -0
- package/dist/chunk-E62JDTFS.js.map +1 -0
- package/dist/chunk-F2LWLSBT.cjs +98 -0
- package/dist/chunk-F2LWLSBT.cjs.map +1 -0
- package/dist/{chunk-OE5IW4ZG.cjs → chunk-GNYQC5IJ.cjs} +8 -17
- package/dist/chunk-GNYQC5IJ.cjs.map +1 -0
- package/dist/{chunk-4RDTC7R6.cjs → chunk-HECO3HXR.cjs} +31 -31
- package/dist/chunk-HECO3HXR.cjs.map +1 -0
- package/dist/{chunk-CRTRMMJ7.js → chunk-K2V4ULA2.js} +3 -1
- package/dist/{chunk-AEUUTAJB.cjs → chunk-LYI2IDCW.cjs} +6 -6
- package/dist/chunk-LYI2IDCW.cjs.map +1 -0
- package/dist/chunk-N2MRIHRX.js +236 -0
- package/dist/chunk-N2MRIHRX.js.map +1 -0
- package/dist/{chunk-2DJMYFRZ.cjs → chunk-NEHRI4EM.cjs} +61 -71
- package/dist/chunk-NEHRI4EM.cjs.map +1 -0
- package/dist/{chunk-JU5RT22Y.cjs → chunk-PA2DQCBY.cjs} +1 -1
- package/dist/chunk-PA2DQCBY.cjs.map +1 -0
- package/dist/{chunk-ASPOGQPS.js → chunk-UTFZRBBS.js} +8 -17
- package/dist/chunk-UTFZRBBS.js.map +1 -0
- package/dist/chunk-UU7SXXNI.cjs +70 -0
- package/dist/chunk-UU7SXXNI.cjs.map +1 -0
- package/dist/chunk-W2K5WX3O.js +145 -0
- package/dist/chunk-W2K5WX3O.js.map +1 -0
- package/dist/chunk-Y4YQH2QB.js +70 -0
- package/dist/chunk-Y4YQH2QB.js.map +1 -0
- package/dist/{chunk-5RFFXDXC.js → chunk-YK2XHKK2.js} +56 -66
- package/dist/chunk-YK2XHKK2.js.map +1 -0
- package/dist/helpers/index.cjs +1 -1
- package/dist/helpers/index.js +1 -1
- package/dist/hooks/index.cjs +7 -3
- package/dist/hooks/index.cjs.map +1 -1
- package/dist/hooks/index.d.cts +47 -6
- package/dist/hooks/index.d.ts +47 -6
- package/dist/hooks/index.js +6 -2
- package/dist/index.cjs +18 -18
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +3 -4
- package/dist/index.d.ts +3 -4
- package/dist/index.js +24 -24
- package/dist/partials/FieldCopyTestIdButton/index.cjs +3 -3
- package/dist/partials/FieldCopyTestIdButton/index.d.cts +2 -2
- package/dist/partials/FieldCopyTestIdButton/index.d.ts +2 -2
- package/dist/partials/FieldCopyTestIdButton/index.js +2 -2
- package/dist/partials/FieldValidationError/index.cjs +3 -3
- package/dist/partials/FieldValidationError/index.d.cts +2 -2
- package/dist/partials/FieldValidationError/index.d.ts +2 -2
- package/dist/partials/FieldValidationError/index.js +2 -2
- package/package.json +6 -11
- package/dist/Controller/index.cjs +0 -11
- package/dist/Controller/index.cjs.map +0 -1
- package/dist/Controller/index.d.cts +0 -8
- package/dist/Controller/index.d.ts +0 -8
- package/dist/Controller/index.js +0 -11
- package/dist/Controller-8Nqugui5.d.cts +0 -37
- package/dist/Controller-8Nqugui5.d.ts +0 -37
- package/dist/chunk-2CRY7VDQ.js.map +0 -1
- package/dist/chunk-2DJMYFRZ.cjs.map +0 -1
- package/dist/chunk-3ULE3TIW.js +0 -249
- package/dist/chunk-3ULE3TIW.js.map +0 -1
- package/dist/chunk-4DAZAO6Y.cjs.map +0 -1
- package/dist/chunk-4RDTC7R6.cjs.map +0 -1
- package/dist/chunk-5NRHHIFP.js.map +0 -1
- package/dist/chunk-5RFFXDXC.js.map +0 -1
- package/dist/chunk-AEUUTAJB.cjs.map +0 -1
- package/dist/chunk-ASPOGQPS.js.map +0 -1
- package/dist/chunk-AT2VVPRD.js +0 -52
- package/dist/chunk-AT2VVPRD.js.map +0 -1
- package/dist/chunk-BLAMCAGB.js.map +0 -1
- package/dist/chunk-C5ZRTXUD.cjs +0 -249
- package/dist/chunk-C5ZRTXUD.cjs.map +0 -1
- package/dist/chunk-CRTRMMJ7.js.map +0 -1
- package/dist/chunk-EPYFZXEI.cjs +0 -52
- package/dist/chunk-EPYFZXEI.cjs.map +0 -1
- package/dist/chunk-FAXFHN7Z.cjs +0 -145
- package/dist/chunk-FAXFHN7Z.cjs.map +0 -1
- package/dist/chunk-FNY55CAR.js.map +0 -1
- package/dist/chunk-IOIYK6UC.js.map +0 -1
- package/dist/chunk-JU5RT22Y.cjs.map +0 -1
- package/dist/chunk-MKFKX5QX.cjs +0 -97
- package/dist/chunk-MKFKX5QX.cjs.map +0 -1
- package/dist/chunk-NBAVP4ER.js +0 -135
- package/dist/chunk-NBAVP4ER.js.map +0 -1
- package/dist/chunk-O3TBUVDW.js +0 -97
- package/dist/chunk-O3TBUVDW.js.map +0 -1
- package/dist/chunk-OE5IW4ZG.cjs.map +0 -1
- package/dist/chunk-P332MPVH.js.map +0 -1
- package/dist/chunk-Q6DCHTBA.js +0 -145
- package/dist/chunk-Q6DCHTBA.js.map +0 -1
- package/dist/chunk-QQW2FHSC.cjs +0 -135
- package/dist/chunk-QQW2FHSC.cjs.map +0 -1
- package/dist/chunk-QXD6XP3Y.js +0 -120
- package/dist/chunk-QXD6XP3Y.js.map +0 -1
- package/dist/chunk-TONXQKTY.cjs.map +0 -1
- package/dist/chunk-UOK3TF4G.cjs +0 -82
- package/dist/chunk-UOK3TF4G.cjs.map +0 -1
- package/dist/chunk-VZC5LLW4.cjs +0 -120
- package/dist/chunk-VZC5LLW4.cjs.map +0 -1
- package/dist/chunk-WI6FEFKD.cjs.map +0 -1
- package/dist/chunk-XL3FJ3VX.js +0 -82
- package/dist/chunk-XL3FJ3VX.js.map +0 -1
- package/dist/chunk-ZFJ5NEHU.cjs +0 -110
- package/dist/chunk-ZFJ5NEHU.cjs.map +0 -1
- /package/dist/{Controller/index.js.map → chunk-K2V4ULA2.js.map} +0 -0
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
|
+
|
|
3
|
+
var _chunkGNYQC5IJcjs = require('./chunk-GNYQC5IJ.cjs');
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
var _chunkPA2DQCBYcjs = require('./chunk-PA2DQCBY.cjs');
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
var _chunk7BLVIVDUcjs = require('./chunk-7BLVIVDU.cjs');
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
var _chunk555JRYCScjs = require('./chunk-555JRYCS.cjs');
|
|
16
|
+
|
|
17
|
+
// src/Switch/Switch.tsx
|
|
18
|
+
var _switch = require('@heroui/switch');
|
|
19
|
+
var _pixelutils = require('@fuf-stack/pixel-utils');
|
|
20
|
+
var _jsxruntime = require('react/jsx-runtime');
|
|
21
|
+
var switchVariants = _pixelutils.tv.call(void 0, {
|
|
22
|
+
slots: {
|
|
23
|
+
base: "",
|
|
24
|
+
endContent: "",
|
|
25
|
+
errorMessage: "ml-1 mt-1",
|
|
26
|
+
// see HeroUI styles for group-data condition,
|
|
27
|
+
// e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts
|
|
28
|
+
label: 'text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-["*"]',
|
|
29
|
+
outerWrapper: "place-content-center",
|
|
30
|
+
startContent: "",
|
|
31
|
+
thumb: "",
|
|
32
|
+
thumbIcon: "",
|
|
33
|
+
wrapper: ""
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
var Switch = ({
|
|
37
|
+
className = void 0,
|
|
38
|
+
disabled = false,
|
|
39
|
+
label: _label = void 0,
|
|
40
|
+
name,
|
|
41
|
+
testId: _testId = void 0
|
|
42
|
+
}) => {
|
|
43
|
+
const { control, debugMode, getFieldState } = _chunk7BLVIVDUcjs.useFormContext.call(void 0, );
|
|
44
|
+
const { error, required, testId, invalid } = getFieldState(name, _testId);
|
|
45
|
+
const { field } = _chunk7BLVIVDUcjs.useController.call(void 0, { name, control, disabled });
|
|
46
|
+
const { disabled: isDisabled, value, ref, onBlur, onChange } = field;
|
|
47
|
+
const { label, getInputProps, getErrorMessageProps } = _chunk7BLVIVDUcjs.useInput.call(void 0, {
|
|
48
|
+
errorMessage: JSON.stringify(error),
|
|
49
|
+
isInvalid: invalid,
|
|
50
|
+
isRequired: required,
|
|
51
|
+
label: _label,
|
|
52
|
+
labelPlacement: "outside",
|
|
53
|
+
placeholder: " "
|
|
54
|
+
});
|
|
55
|
+
const variants = switchVariants();
|
|
56
|
+
const classNames = _pixelutils.variantsToClassNames.call(void 0, variants, className, "outerWrapper");
|
|
57
|
+
const showTestIdCopyButton = debugMode === "debug-testids";
|
|
58
|
+
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: classNames.outerWrapper, children: [
|
|
59
|
+
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
60
|
+
_switch.Switch,
|
|
61
|
+
{
|
|
62
|
+
"aria-describedby": getInputProps()["aria-describedby"],
|
|
63
|
+
classNames,
|
|
64
|
+
"data-invalid": invalid,
|
|
65
|
+
"data-required": required,
|
|
66
|
+
"data-testid": testId,
|
|
67
|
+
isDisabled,
|
|
68
|
+
isSelected: !!value,
|
|
69
|
+
name,
|
|
70
|
+
onBlur,
|
|
71
|
+
onValueChange: onChange,
|
|
72
|
+
ref,
|
|
73
|
+
required,
|
|
74
|
+
value,
|
|
75
|
+
children: [
|
|
76
|
+
label,
|
|
77
|
+
showTestIdCopyButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPA2DQCBYcjs.FieldCopyTestIdButton_default, { testId })
|
|
78
|
+
]
|
|
79
|
+
}
|
|
80
|
+
),
|
|
81
|
+
error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: classNames.errorMessage, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
82
|
+
"div",
|
|
83
|
+
_chunk555JRYCScjs.__spreadProps.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {}, getErrorMessageProps()), {
|
|
84
|
+
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGNYQC5IJcjs.FieldValidationError_default, { error, testId })
|
|
85
|
+
})
|
|
86
|
+
) })
|
|
87
|
+
] });
|
|
88
|
+
};
|
|
89
|
+
var Switch_default = Switch;
|
|
90
|
+
|
|
91
|
+
// src/Switch/index.ts
|
|
92
|
+
var Switch_default2 = Switch_default;
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
exports.Switch_default = Switch_default; exports.Switch_default2 = Switch_default2;
|
|
98
|
+
//# sourceMappingURL=chunk-F2LWLSBT.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-F2LWLSBT.cjs","../src/Switch/Switch.tsx","../src/Switch/index.ts"],"names":["Switch_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-F2LWLSBT.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\n\nimport { Switch as HeroSwitch } from '@heroui/switch';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useController, useFormContext, useInput } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const switchVariants = tv({\n slots: {\n base: '',\n endContent: '',\n errorMessage: 'ml-1 mt-1',\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 group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-[\"*\"]',\n outerWrapper: 'place-content-center',\n startContent: '',\n thumb: '',\n thumbIcon: '',\n wrapper: '',\n },\n});\n\ntype VariantProps = TVProps<typeof switchVariants>;\ntype ClassName = TVClassName<typeof switchVariants>;\n\nexport interface SwitchProps extends VariantProps {\n /** CSS class name */\n className?: ClassName;\n /** whether the select should be disabled */\n disabled?: boolean;\n /** component displayed next to the switch. */\n label?: React.ReactNode;\n /** name the field is registered under */\n name: string;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\n/**\n * Switch component based on [HeroUI Switch](https://www.heroui.com//docs/components/switch)\n */\nconst Switch = ({\n className = undefined,\n disabled = false,\n label: _label = undefined,\n name,\n testId: _testId = undefined,\n}: SwitchProps) => {\n const { control, debugMode, getFieldState } = useFormContext();\n const { error, required, testId, invalid } = getFieldState(name, _testId);\n\n const { field } = useController({ name, control, disabled });\n const { disabled: isDisabled, value, ref, onBlur, onChange } = field;\n\n const { label, getInputProps, getErrorMessageProps } = useInput({\n errorMessage: JSON.stringify(error),\n isInvalid: invalid,\n isRequired: required,\n label: _label,\n labelPlacement: 'outside',\n placeholder: ' ',\n });\n\n const variants = switchVariants();\n const classNames = variantsToClassNames(variants, className, 'outerWrapper');\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n\n return (\n <div className={classNames.outerWrapper}>\n <HeroSwitch\n aria-describedby={getInputProps()['aria-describedby']}\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 isDisabled={isDisabled}\n isSelected={!!value}\n name={name}\n onBlur={onBlur}\n onValueChange={onChange}\n ref={ref}\n required={required}\n value={value}\n >\n {label}\n {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n </HeroSwitch>\n {error && (\n <div className={classNames.errorMessage}>\n <div\n /* eslint-disable-next-line react/jsx-props-no-spreading */\n {...getErrorMessageProps()}\n >\n <FieldValidationError error={error} testId={testId} />\n </div>\n </div>\n )}\n </div>\n );\n};\n\nexport default Switch;\n","import Switch from './Switch';\n\nexport type { SwitchProps } from './Switch';\n\nexport { Switch };\n\nexport default Switch;\n"]}
|
|
@@ -4,30 +4,21 @@ var _jsxruntime = require('react/jsx-runtime');
|
|
|
4
4
|
var FieldValidationError = ({
|
|
5
5
|
className = void 0,
|
|
6
6
|
error,
|
|
7
|
-
testId
|
|
7
|
+
testId
|
|
8
8
|
}) => {
|
|
9
|
-
if (!error) {
|
|
9
|
+
if (!error || Array.isArray(error) && !error.length) {
|
|
10
10
|
return null;
|
|
11
11
|
}
|
|
12
|
-
|
|
13
|
-
if (typeof error === "object" && !(error instanceof Array)) {
|
|
14
|
-
const errorObject = error;
|
|
15
|
-
Object.keys(error).forEach((key) => {
|
|
16
|
-
tmpErrors = [...tmpErrors, ...errorObject[key]];
|
|
17
|
-
});
|
|
18
|
-
}
|
|
19
|
-
const errorArray = JSON.stringify(tmpErrors) !== "[]" ? tmpErrors : error;
|
|
20
|
-
const errorStrings = errorArray.map((e) => e.message);
|
|
21
|
-
const ariaString = `Error: ${errorStrings.join("\n")}`;
|
|
12
|
+
const errors = Array.isArray(error) ? error : [error];
|
|
22
13
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
23
14
|
"ul",
|
|
24
15
|
{
|
|
25
|
-
"
|
|
26
|
-
"aria-label": ariaString,
|
|
16
|
+
"aria-label": `Validation errors of field ${testId}`,
|
|
27
17
|
className,
|
|
28
|
-
|
|
18
|
+
"data-testid": _pixelutils.slugify.call(void 0, `${testId}_error`),
|
|
19
|
+
children: errors.map(({ message }, i) => (
|
|
29
20
|
// eslint-disable-next-line react/no-array-index-key
|
|
30
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children:
|
|
21
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: message }) }, `error_${i}`)
|
|
31
22
|
))
|
|
32
23
|
}
|
|
33
24
|
);
|
|
@@ -41,4 +32,4 @@ var FieldValidationError_default2 = FieldValidationError_default;
|
|
|
41
32
|
|
|
42
33
|
|
|
43
34
|
exports.FieldValidationError_default = FieldValidationError_default; exports.FieldValidationError_default2 = FieldValidationError_default2;
|
|
44
|
-
//# sourceMappingURL=chunk-
|
|
35
|
+
//# sourceMappingURL=chunk-GNYQC5IJ.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-GNYQC5IJ.cjs","../src/partials/FieldValidationError/FieldValidationError.tsx","../src/partials/FieldValidationError/index.ts"],"names":[],"mappings":"AAAA;ACEA,oDAAwB;AAoCd,+CAAA;AAtBV,IAAM,qBAAA,EAAuB,CAAC;AAAA,EAC5B,UAAA,EAAY,KAAA,CAAA;AAAA,EACZ,KAAA;AAAA,EACA;AACF,CAAA,EAAA,GAAiC;AAE/B,EAAA,GAAA,CAAI,CAAC,MAAA,GAAU,KAAA,CAAM,OAAA,CAAQ,KAAK,EAAA,GAAK,CAAC,KAAA,CAAM,MAAA,EAAS;AACrD,IAAA,OAAO,IAAA;AAAA,EACT;AAGA,EAAA,MAAM,OAAA,EAAuB,KAAA,CAAM,OAAA,CAAQ,KAAK,EAAA,EAAI,MAAA,EAAQ,CAAC,KAAK,CAAA;AAElE,EAAA,uBACE,6BAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAY,CAAA,2BAAA,EAA8B,MAAM,CAAA,CAAA;AAChD,MAAA;AACsC,MAAA;AAEZ,MAAA;AAAA;AAGtB,wBAAA;AAEH,MAAA;AAAA,IAAA;AACH,EAAA;AAEJ;AAEe;ADnB0C;AACA;AErB1C;AFuB0C;AACA;AACA;AACA;AACA","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-GNYQC5IJ.cjs","sourcesContent":[null,"import type { FieldError } from 'react-hook-form';\n\nimport { slugify } from '@fuf-stack/pixel-utils';\n\nexport interface FieldValidationErrorProps {\n /** CSS class name */\n className?: string;\n /** Field errors */\n error: FieldError | FieldError[];\n /** HTML data-testid attribute used in e2e tests */\n testId: string;\n}\n\n/**\n * Renders a validation error of a field\n */\nconst FieldValidationError = ({\n className = undefined,\n error,\n testId,\n}: FieldValidationErrorProps) => {\n // render nothing when no errors\n if (!error || (Array.isArray(error) && !error.length)) {\n return null;\n }\n\n // get errors as array\n const errors: FieldError[] = Array.isArray(error) ? error : [error];\n\n return (\n <ul\n aria-label={`Validation errors of field ${testId}`}\n className={className}\n data-testid={slugify(`${testId}_error`)}\n >\n {errors.map(({ message }, i) => (\n // eslint-disable-next-line react/no-array-index-key\n <li key={`error_${i}`}>\n <div>{message}</div>\n </li>\n ))}\n </ul>\n );\n};\n\nexport default FieldValidationError;\n","import FieldValidationError from './FieldValidationError';\n\nexport type { FieldValidationErrorProps } from './FieldValidationError';\n\nexport { FieldValidationError };\n\nexport default FieldValidationError;\n"]}
|
|
@@ -1,14 +1,11 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _chunk7BLVIVDUcjs = require('./chunk-7BLVIVDU.cjs');
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
var _chunkCESGUF6Fcjs = require('./chunk-CESGUF6F.cjs');
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
var _chunk4DAZAO6Ycjs = require('./chunk-4DAZAO6Y.cjs');
|
|
11
|
-
|
|
12
9
|
// src/Form/Form.tsx
|
|
13
10
|
var _pixelutils = require('@fuf-stack/pixel-utils');
|
|
14
11
|
|
|
@@ -25,28 +22,29 @@ var _jsxruntime = require('react/jsx-runtime');
|
|
|
25
22
|
var FormDebugViewer = ({ className = void 0 }) => {
|
|
26
23
|
const {
|
|
27
24
|
debugMode,
|
|
28
|
-
formState: {
|
|
25
|
+
formState: { isValid, isSubmitting },
|
|
26
|
+
getValues,
|
|
29
27
|
setDebugMode,
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
} =
|
|
33
|
-
const
|
|
34
|
-
const
|
|
35
|
-
const
|
|
36
|
-
_react.
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
})
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
);
|
|
49
|
-
if (
|
|
28
|
+
subscribe,
|
|
29
|
+
validation: { errors }
|
|
30
|
+
} = _chunk7BLVIVDUcjs.useFormContext.call(void 0, );
|
|
31
|
+
const showDebugButton = debugMode === "off";
|
|
32
|
+
const showDebugCard = debugMode === "debug" || debugMode === "debug-testids";
|
|
33
|
+
const showDebugTestIds = debugMode === "debug-testids";
|
|
34
|
+
const [validationValues, setValidationValues] = _react.useState.call(void 0, getValues() || null);
|
|
35
|
+
_react.useEffect.call(void 0, () => {
|
|
36
|
+
if (!showDebugCard) {
|
|
37
|
+
return void 0;
|
|
38
|
+
}
|
|
39
|
+
const unsubscribe = subscribe({
|
|
40
|
+
formState: { values: true },
|
|
41
|
+
callback: ({ values }) => {
|
|
42
|
+
setValidationValues(_chunkCESGUF6Fcjs.toValidationFormat.call(void 0, values));
|
|
43
|
+
}
|
|
44
|
+
});
|
|
45
|
+
return unsubscribe;
|
|
46
|
+
}, [showDebugCard, subscribe]);
|
|
47
|
+
if (showDebugButton) {
|
|
50
48
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
51
49
|
_Button.Button,
|
|
52
50
|
{
|
|
@@ -58,6 +56,9 @@ var FormDebugViewer = ({ className = void 0 }) => {
|
|
|
58
56
|
}
|
|
59
57
|
);
|
|
60
58
|
}
|
|
59
|
+
if (!showDebugCard) {
|
|
60
|
+
return null;
|
|
61
|
+
}
|
|
61
62
|
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
62
63
|
_Card.Card,
|
|
63
64
|
{
|
|
@@ -79,11 +80,11 @@ var FormDebugViewer = ({ className = void 0 }) => {
|
|
|
79
80
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
80
81
|
_Button.Button,
|
|
81
82
|
{
|
|
82
|
-
variant:
|
|
83
|
+
variant: showDebugTestIds ? "solid" : "light",
|
|
83
84
|
icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa6.FaBullseye, {}),
|
|
84
85
|
className: "mb-4 ml-auto mr-auto",
|
|
85
86
|
onClick: () => setDebugMode(debugMode === "debug" ? "debug-testids" : "debug"),
|
|
86
|
-
children:
|
|
87
|
+
children: showDebugTestIds ? "Hide CopyButton" : "Show CopyButton"
|
|
87
88
|
}
|
|
88
89
|
),
|
|
89
90
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
@@ -91,8 +92,7 @@ var FormDebugViewer = ({ className = void 0 }) => {
|
|
|
91
92
|
{
|
|
92
93
|
value: {
|
|
93
94
|
values: validationValues,
|
|
94
|
-
errors
|
|
95
|
-
dirtyFields,
|
|
95
|
+
errors,
|
|
96
96
|
isValid,
|
|
97
97
|
isSubmitting
|
|
98
98
|
}
|
|
@@ -119,7 +119,7 @@ var Form = ({
|
|
|
119
119
|
validationTrigger = "all"
|
|
120
120
|
}) => {
|
|
121
121
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
122
|
-
|
|
122
|
+
_chunk7BLVIVDUcjs.FormContext_default,
|
|
123
123
|
{
|
|
124
124
|
debugModeSettings: debug,
|
|
125
125
|
initialValues,
|
|
@@ -151,4 +151,4 @@ var Form_default2 = Form_default;
|
|
|
151
151
|
|
|
152
152
|
|
|
153
153
|
exports.Form_default = Form_default; exports.Form_default2 = Form_default2;
|
|
154
|
-
//# sourceMappingURL=chunk-
|
|
154
|
+
//# sourceMappingURL=chunk-HECO3HXR.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-HECO3HXR.cjs","../src/Form/Form.tsx","../src/Form/subcomponents/FormDebugViewer.tsx","../src/Form/index.ts"],"names":["jsx","jsxs","cn","Form_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-HECO3HXR.cjs","sourcesContent":[null,"import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\nimport type { DebugModeSettings } from './subcomponents/FormContext';\n\nimport { cn, slugify } from '@fuf-stack/pixel-utils';\n\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\n\nconst IS_TEST = process.env.NODE_ENV === 'test';\n\nexport interface FormProps {\n /** form children */\n children: ReactNode | ReactNode[];\n /** CSS class name */\n className?: string | string[];\n /** settings for from debug mode */\n debug?: DebugModeSettings;\n /** initial form values */\n initialValues?: FieldValues;\n /** name of the form */\n name?: string;\n /** form submit handler */\n onSubmit: SubmitHandler<FieldValues>;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** veto validation schema */\n validation?: VetoInstance;\n /** when the validation should be triggered */\n validationTrigger?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\n/**\n * Form component that has to wrap every uniform\n */\nconst Form = ({\n children,\n className = undefined,\n debug = undefined,\n initialValues = undefined,\n name = undefined,\n onSubmit,\n testId = undefined,\n validation = undefined,\n validationTrigger = 'all',\n}: FormProps) => {\n return (\n <FormProvider\n debugModeSettings={debug}\n initialValues={initialValues}\n onSubmit={onSubmit}\n validation={validation}\n validationTrigger={validationTrigger}\n >\n {({ handleSubmit }) => (\n <div className=\"flex w-full flex-row justify-between gap-6\">\n <form\n className={cn('flex-grow', className)}\n data-testid={slugify(testId || name || '')}\n name={name}\n onSubmit={handleSubmit}\n >\n {children}\n </form>\n {/* render debug viewer when not in test environment and debug not disabled */}\n {!IS_TEST && !debug?.disable && (\n <FormDebugViewer className=\"w-96 flex-shrink\" />\n )}\n </div>\n )}\n </FormProvider>\n );\n};\n\nexport default Form;\n","/* eslint-disable react/prop-types */\nimport { useEffect, useState } from 'react';\nimport { FaTimes } from 'react-icons/fa';\nimport { FaBug, FaBullseye } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels/Button';\nimport { Card } from '@fuf-stack/pixels/Card';\nimport { Json } from '@fuf-stack/pixels/Json';\n\nimport { toValidationFormat } from '../../helpers';\nimport { useFormContext } from '../../hooks';\n\n// import Json css (theme)\nimport '@fuf-stack/pixels/Json.css';\n\ninterface FormDebugViewerProps {\n /** CSS class name */\n className?: string;\n}\n\n/** Renders a form debug panel with information about the current form state */\nconst FormDebugViewer = ({ className = undefined }: FormDebugViewerProps) => {\n const {\n debugMode,\n formState: { isValid, isSubmitting },\n getValues,\n setDebugMode,\n subscribe,\n validation: { errors },\n } = useFormContext();\n\n const showDebugButton = debugMode === 'off';\n const showDebugCard = debugMode === 'debug' || debugMode === 'debug-testids';\n const showDebugTestIds = debugMode === 'debug-testids';\n\n const [validationValues, setValidationValues] = useState<Record<\n string,\n unknown\n > | null>(getValues() || null);\n\n // Subscribe to value updates only when needed and cleanup properly\n useEffect(() => {\n if (!showDebugCard) {\n return undefined;\n }\n\n const unsubscribe = subscribe({\n formState: { values: true },\n callback: ({ values }) => {\n setValidationValues(toValidationFormat(values));\n },\n });\n\n return unsubscribe;\n }, [showDebugCard, subscribe]);\n\n if (showDebugButton) {\n return (\n <Button\n ariaLabel=\"Enable form debug mode\"\n onClick={() => setDebugMode('debug')}\n className=\"fixed bottom-2.5 right-2.5 w-5 text-default-400\"\n variant=\"light\"\n icon={<FaBug />}\n />\n );\n }\n\n // do not show card\n if (!showDebugCard) {\n return null;\n }\n\n return (\n <Card\n className={cn(className)}\n header={\n <div className=\"flex w-full flex-row justify-between\">\n <span className=\"text-lg\">Debug Mode</span>\n <Button\n color=\"danger\"\n icon={<FaTimes />}\n onClick={() => setDebugMode('off')}\n size=\"sm\"\n variant=\"light\"\n />\n </div>\n }\n >\n <Button\n variant={showDebugTestIds ? 'solid' : 'light'}\n icon={<FaBullseye />}\n className=\"mb-4 ml-auto mr-auto\"\n onClick={() =>\n setDebugMode(debugMode === 'debug' ? 'debug-testids' : 'debug')\n }\n >\n {showDebugTestIds ? 'Hide CopyButton' : 'Show CopyButton'}\n </Button>\n <Json\n value={{\n values: validationValues,\n errors,\n isValid,\n isSubmitting,\n }}\n />\n </Card>\n );\n};\n\nexport default FormDebugViewer;\n","import Form from './Form';\n\nexport type { FormProps } from './Form';\n\nexport { Form };\n\nexport default Form;\n"]}
|
|
@@ -17,6 +17,7 @@ var __spreadValues = (a, b) => {
|
|
|
17
17
|
return a;
|
|
18
18
|
};
|
|
19
19
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
var __restKey = (key) => typeof key === "symbol" ? key : key + "";
|
|
20
21
|
var __objRest = (source, exclude) => {
|
|
21
22
|
var target = {};
|
|
22
23
|
for (var prop in source)
|
|
@@ -53,7 +54,8 @@ var __async = (__this, __arguments, generator) => {
|
|
|
53
54
|
export {
|
|
54
55
|
__spreadValues,
|
|
55
56
|
__spreadProps,
|
|
57
|
+
__restKey,
|
|
56
58
|
__objRest,
|
|
57
59
|
__async
|
|
58
60
|
};
|
|
59
|
-
//# sourceMappingURL=chunk-
|
|
61
|
+
//# sourceMappingURL=chunk-K2V4ULA2.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _chunk7BLVIVDUcjs = require('./chunk-7BLVIVDU.cjs');
|
|
4
4
|
|
|
5
5
|
// src/SubmitButton/SubmitButton.tsx
|
|
6
6
|
var _pixelutils = require('@fuf-stack/pixel-utils');
|
|
@@ -15,17 +15,17 @@ var SubmitButton = ({
|
|
|
15
15
|
testId = "form_submit_button"
|
|
16
16
|
}) => {
|
|
17
17
|
const {
|
|
18
|
-
formState: { isSubmitting
|
|
18
|
+
formState: { isSubmitting },
|
|
19
19
|
triggerSubmit
|
|
20
|
-
} =
|
|
20
|
+
} = _chunk7BLVIVDUcjs.useFormContext.call(void 0, );
|
|
21
21
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
22
22
|
_pixels.Button,
|
|
23
23
|
{
|
|
24
24
|
className: _pixelutils.cn.call(void 0, className),
|
|
25
25
|
color,
|
|
26
26
|
testId: _pixelutils.slugify.call(void 0, testId),
|
|
27
|
-
disabled: isSubmitting
|
|
28
|
-
loading,
|
|
27
|
+
disabled: isSubmitting,
|
|
28
|
+
loading: loading || isSubmitting,
|
|
29
29
|
onClick: triggerSubmit,
|
|
30
30
|
size,
|
|
31
31
|
type: "submit",
|
|
@@ -42,4 +42,4 @@ var SubmitButton_default2 = SubmitButton_default;
|
|
|
42
42
|
|
|
43
43
|
|
|
44
44
|
exports.SubmitButton_default = SubmitButton_default; exports.SubmitButton_default2 = SubmitButton_default2;
|
|
45
|
-
//# sourceMappingURL=chunk-
|
|
45
|
+
//# sourceMappingURL=chunk-LYI2IDCW.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-LYI2IDCW.cjs","../src/SubmitButton/SubmitButton.tsx","../src/SubmitButton/index.ts"],"names":["SubmitButton_default"],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACA;ACDA,oDAA4B;AAC5B,2CAAuB;AAoCnB,+CAAA;AAdJ,IAAM,aAAA,EAAe,CAAC;AAAA,EACpB,SAAA,EAAW,QAAA;AAAA,EACX,UAAA,EAAY,KAAA,CAAA;AAAA,EACZ,MAAA,EAAQ,SAAA;AAAA,EACR,QAAA,EAAU,KAAA;AAAA,EACV,KAAA,EAAO,IAAA;AAAA,EACP,OAAA,EAAS;AACX,CAAA,EAAA,GAAyB;AACvB,EAAA,MAAM;AAAA,IACJ,SAAA,EAAW,EAAE,aAAa,CAAA;AAAA,IAC1B;AAAA,EACF,EAAA,EAAI,8CAAA,CAAe;AAEnB,EAAA,uBACE,6BAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,4BAAA,SAAY,CAAA;AAAA,MACvB,KAAA;AAAA,MACA,MAAA,EAAQ,iCAAA,MAAc,CAAA;AAAA,MACtB,QAAA,EAAU,YAAA;AAAA,MACV,OAAA,EAAS,QAAA,GAAW,YAAA;AAAA,MAIpB,OAAA,EAAS,aAAA;AAAA,MACT,IAAA;AAAA,MACA,IAAA,EAAK,QAAA;AAAA,MAEJ;AAAA,IAAA;AAAA,EACH,CAAA;AAEJ,CAAA;AAEA,IAAO,qBAAA,EAAQ,YAAA;ADtBf;AACA;AE/BA,IAAOA,sBAAAA,EAAQ,oBAAA;AFiCf;AACA;AACE;AACA;AACF,2GAAC","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-LYI2IDCW.cjs","sourcesContent":[null,"import type { ButtonProps } from '@fuf-stack/pixels';\nimport type { ReactNode } from 'react';\n\nimport { cn, slugify } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\nimport { useFormContext } from '../hooks';\n\nexport interface SubmitButtonProps {\n /** child components */\n children?: ReactNode;\n /** CSS class name */\n className?: string;\n /** color of the button */\n color?: ButtonProps['color'];\n /** If set loading animation is shown */\n loading?: boolean;\n /** size of the button */\n size?: ButtonProps['size'];\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\n/**\n * From SubmitButton\n */\nconst SubmitButton = ({\n children = 'Submit',\n className = undefined,\n color = 'success',\n loading = false,\n size = 'md',\n testId = 'form_submit_button',\n}: SubmitButtonProps) => {\n const {\n formState: { isSubmitting },\n triggerSubmit,\n } = useFormContext();\n\n return (\n <Button\n className={cn(className)}\n color={color}\n testId={slugify(testId)}\n disabled={isSubmitting}\n loading={loading || isSubmitting}\n // @ts-expect-error we use form context triggerSubmit\n // here so that submit button also works in special\n // scenarios (e.g. when used in modal)\n onClick={triggerSubmit}\n size={size}\n type=\"submit\"\n >\n {children}\n </Button>\n );\n};\n\nexport default SubmitButton;\n","import SubmitButton from './SubmitButton';\n\nexport type { SubmitButtonProps } from './SubmitButton';\n\nexport { SubmitButton };\n\nexport default SubmitButton;\n"]}
|
|
@@ -0,0 +1,236 @@
|
|
|
1
|
+
import {
|
|
2
|
+
FieldValidationError_default
|
|
3
|
+
} from "./chunk-UTFZRBBS.js";
|
|
4
|
+
import {
|
|
5
|
+
FieldCopyTestIdButton_default
|
|
6
|
+
} from "./chunk-BQGN3JTU.js";
|
|
7
|
+
import {
|
|
8
|
+
useController,
|
|
9
|
+
useFormContext
|
|
10
|
+
} from "./chunk-CN5XEGV4.js";
|
|
11
|
+
import {
|
|
12
|
+
__spreadProps,
|
|
13
|
+
__spreadValues
|
|
14
|
+
} from "./chunk-K2V4ULA2.js";
|
|
15
|
+
|
|
16
|
+
// src/Select/Select.tsx
|
|
17
|
+
import { useState } from "react";
|
|
18
|
+
import ReactSelect, { components } from "react-select";
|
|
19
|
+
import { useSelect } from "@heroui/select";
|
|
20
|
+
import { cn, slugify, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
|
|
21
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
22
|
+
var selectVariants = tv({
|
|
23
|
+
slots: {
|
|
24
|
+
base: "group leading-normal",
|
|
25
|
+
clearIndicator: "rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-foreground-800",
|
|
26
|
+
control: "rounded-lg border-2 border-default-200 !duration-150 transition-background hover:border-default-400 group-data-[invalid=true]:border-danger group-data-[invalid=true]:hover:border-danger motion-reduce:transition-none",
|
|
27
|
+
control_focused: "border-focus",
|
|
28
|
+
crossIcon: "",
|
|
29
|
+
downChevron: "",
|
|
30
|
+
dropdownIndicator: "rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-black",
|
|
31
|
+
group: "",
|
|
32
|
+
groupHeading: "mb-1 ml-3 mt-2 text-sm text-foreground-500",
|
|
33
|
+
indicatorsContainer: "gap-1 p-1",
|
|
34
|
+
indicatorSeparator: "bg-default-300",
|
|
35
|
+
input: "py-0.5 pl-1",
|
|
36
|
+
// see HeroUI styles for group-data condition,
|
|
37
|
+
// e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts
|
|
38
|
+
label: 'pointer-events-auto relative bottom-1.5 ml-1 text-small subpixel-antialiased group-data-[invalid=true]:!text-danger group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-["*"]',
|
|
39
|
+
loadingIndicator: "",
|
|
40
|
+
loadingMessage: "rounded-sm p-2 text-foreground-500",
|
|
41
|
+
menu: "mt-2 rounded-xl border border-default-200 bg-content1 p-1 shadow-lg",
|
|
42
|
+
menuList: "",
|
|
43
|
+
// ensure menu has same z-index as modal so it is visible when rendered in modal
|
|
44
|
+
// see: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/modal.ts (see z-50)
|
|
45
|
+
menuPortal: "!z-50",
|
|
46
|
+
multiValue: "items-center gap-1.5 rounded bg-default-100 py-0.5 pl-2 pr-1",
|
|
47
|
+
multiValueContainer: "",
|
|
48
|
+
multiValueLabel: "py-0.5 leading-6",
|
|
49
|
+
multiValueRemove: "rounded text-default-500 hover:cursor-pointer hover:border-default-300 hover:text-default-800",
|
|
50
|
+
noOptionsMessage: "rounded-sm p-2 text-foreground-500",
|
|
51
|
+
option_focused: "bg-default-100 active:bg-default-200",
|
|
52
|
+
option_selected: "bg-default-300",
|
|
53
|
+
option: "rounded px-3 py-2 hover:cursor-pointer",
|
|
54
|
+
placeholder: "ml-1 py-0.5 pl-1 text-sm text-foreground-500",
|
|
55
|
+
selectContainer: "",
|
|
56
|
+
singleValue: "!ml-1 !leading-7",
|
|
57
|
+
valueContainer: "gap-1 p-1"
|
|
58
|
+
}
|
|
59
|
+
});
|
|
60
|
+
var InputComponent = (props) => {
|
|
61
|
+
const testId = `${props.selectProps["data-testid"]}`;
|
|
62
|
+
return /* @__PURE__ */ jsx(components.Input, __spreadValues({ "data-testid": testId }, props));
|
|
63
|
+
};
|
|
64
|
+
var ControlComponent = (props) => {
|
|
65
|
+
const testId = `${props.selectProps["data-testid"]}_select`;
|
|
66
|
+
return /* @__PURE__ */ jsx("div", { "data-testid": testId, children: /* @__PURE__ */ jsx(components.Control, __spreadValues({}, props)) });
|
|
67
|
+
};
|
|
68
|
+
var OptionComponent = (props) => {
|
|
69
|
+
var _a, _b, _c;
|
|
70
|
+
const testId = `${props.selectProps["data-testid"]}_select_option_${slugify((_c = (_a = props == null ? void 0 : props.data) == null ? void 0 : _a.testId) != null ? _c : (_b = props == null ? void 0 : props.data) == null ? void 0 : _b.value)}`;
|
|
71
|
+
return /* @__PURE__ */ jsx("div", { "data-testid": testId, children: /* @__PURE__ */ jsx(components.Option, __spreadValues({}, props)) });
|
|
72
|
+
};
|
|
73
|
+
var DropdownIndicatorComponent = (props) => {
|
|
74
|
+
const testId = props == null ? void 0 : props.selectProps["data-testid"];
|
|
75
|
+
return /* @__PURE__ */ jsx("div", { "data-testid": `${testId}_select_dropdown`, children: /* @__PURE__ */ jsx(components.DropdownIndicator, __spreadValues({}, props)) });
|
|
76
|
+
};
|
|
77
|
+
var Select = ({
|
|
78
|
+
className = void 0,
|
|
79
|
+
clearable = true,
|
|
80
|
+
disabled = false,
|
|
81
|
+
filterOption = void 0,
|
|
82
|
+
renderOptionLabel = void 0,
|
|
83
|
+
inputValue = void 0,
|
|
84
|
+
label: _label = void 0,
|
|
85
|
+
loading = false,
|
|
86
|
+
multiSelect = false,
|
|
87
|
+
name,
|
|
88
|
+
onInputChange = void 0,
|
|
89
|
+
options,
|
|
90
|
+
placeholder = void 0,
|
|
91
|
+
testId: _testId = void 0
|
|
92
|
+
}) => {
|
|
93
|
+
var _a;
|
|
94
|
+
const { control, debugMode, getFieldState } = useFormContext();
|
|
95
|
+
const { error, invalid, required, testId } = getFieldState(name, _testId);
|
|
96
|
+
const { field } = useController({ control, disabled, name });
|
|
97
|
+
const { onChange, value, ref, onBlur } = field;
|
|
98
|
+
const [isFocused, setIsFocused] = useState(false);
|
|
99
|
+
const variants = selectVariants();
|
|
100
|
+
const classNames = variantsToClassNames(variants, className, "base");
|
|
101
|
+
const {
|
|
102
|
+
getBaseProps,
|
|
103
|
+
getErrorMessageProps,
|
|
104
|
+
getHelperWrapperProps,
|
|
105
|
+
getLabelProps,
|
|
106
|
+
getTriggerProps,
|
|
107
|
+
getValueProps,
|
|
108
|
+
label
|
|
109
|
+
} = useSelect({
|
|
110
|
+
children: [],
|
|
111
|
+
classNames,
|
|
112
|
+
errorMessage: JSON.stringify(error),
|
|
113
|
+
isDisabled: disabled,
|
|
114
|
+
isInvalid: invalid,
|
|
115
|
+
isLoading: loading,
|
|
116
|
+
isRequired: required,
|
|
117
|
+
label: _label,
|
|
118
|
+
labelPlacement: "outside",
|
|
119
|
+
placeholder: " "
|
|
120
|
+
});
|
|
121
|
+
const showTestIdCopyButton = debugMode === "debug-testids";
|
|
122
|
+
const showLabel = label || showTestIdCopyButton;
|
|
123
|
+
return /* @__PURE__ */ jsxs(
|
|
124
|
+
"div",
|
|
125
|
+
__spreadProps(__spreadValues({}, getBaseProps()), {
|
|
126
|
+
className: cn(classNames.base),
|
|
127
|
+
"data-testid": `${testId}_wrapper`,
|
|
128
|
+
"data-required": required,
|
|
129
|
+
children: [
|
|
130
|
+
showLabel && /* @__PURE__ */ jsxs(
|
|
131
|
+
"label",
|
|
132
|
+
{
|
|
133
|
+
className: classNames.label,
|
|
134
|
+
"data-slot": "label",
|
|
135
|
+
htmlFor: `react-select-${name}-input`,
|
|
136
|
+
id: getLabelProps().id,
|
|
137
|
+
children: [
|
|
138
|
+
label,
|
|
139
|
+
showTestIdCopyButton && /* @__PURE__ */ jsx(FieldCopyTestIdButton_default, { testId })
|
|
140
|
+
]
|
|
141
|
+
}
|
|
142
|
+
),
|
|
143
|
+
/* @__PURE__ */ jsx(
|
|
144
|
+
ReactSelect,
|
|
145
|
+
{
|
|
146
|
+
"aria-errormessage": "",
|
|
147
|
+
"aria-labelledby": (_a = getTriggerProps()["aria-labelledby"]) == null ? void 0 : _a.split(" ")[1],
|
|
148
|
+
"aria-invalid": invalid,
|
|
149
|
+
classNames: {
|
|
150
|
+
control: () => cn(classNames.control, {
|
|
151
|
+
[classNames.control_focused]: isFocused && !invalid
|
|
152
|
+
}),
|
|
153
|
+
clearIndicator: () => classNames.clearIndicator,
|
|
154
|
+
dropdownIndicator: () => classNames.dropdownIndicator,
|
|
155
|
+
groupHeading: () => classNames.groupHeading,
|
|
156
|
+
indicatorsContainer: () => classNames.indicatorsContainer,
|
|
157
|
+
indicatorSeparator: () => classNames.indicatorSeparator,
|
|
158
|
+
loadingIndicator: () => classNames.loadingIndicator,
|
|
159
|
+
loadingMessage: () => classNames.loadingMessage,
|
|
160
|
+
input: () => classNames.input,
|
|
161
|
+
menu: () => classNames.menu,
|
|
162
|
+
menuList: () => classNames.menuList,
|
|
163
|
+
menuPortal: () => classNames.menuPortal,
|
|
164
|
+
multiValue: () => classNames.multiValue,
|
|
165
|
+
multiValueLabel: () => cn(classNames.multiValueLabel, `${getValueProps().className}`),
|
|
166
|
+
multiValueRemove: () => classNames.multiValueRemove,
|
|
167
|
+
noOptionsMessage: () => classNames.noOptionsMessage,
|
|
168
|
+
option: ({
|
|
169
|
+
isFocused: optionIsFocused,
|
|
170
|
+
isSelected: optionIsSelected
|
|
171
|
+
}) => cn(classNames.option, {
|
|
172
|
+
[classNames.option_focused]: optionIsFocused,
|
|
173
|
+
[classNames.option_selected]: optionIsSelected
|
|
174
|
+
}),
|
|
175
|
+
placeholder: () => classNames.placeholder,
|
|
176
|
+
singleValue: () => cn(classNames.singleValue, `${getValueProps().className}`),
|
|
177
|
+
valueContainer: () => classNames.valueContainer
|
|
178
|
+
},
|
|
179
|
+
components: {
|
|
180
|
+
Input: InputComponent,
|
|
181
|
+
Option: OptionComponent,
|
|
182
|
+
DropdownIndicator: DropdownIndicatorComponent,
|
|
183
|
+
Control: ControlComponent
|
|
184
|
+
},
|
|
185
|
+
"data-testid": testId,
|
|
186
|
+
filterOption,
|
|
187
|
+
formatOptionLabel: renderOptionLabel,
|
|
188
|
+
inputValue,
|
|
189
|
+
instanceId: name,
|
|
190
|
+
isClearable: clearable,
|
|
191
|
+
isDisabled: disabled,
|
|
192
|
+
isLoading: loading,
|
|
193
|
+
isMulti: multiSelect,
|
|
194
|
+
name,
|
|
195
|
+
menuPosition: "fixed",
|
|
196
|
+
menuShouldBlockScroll: true,
|
|
197
|
+
options,
|
|
198
|
+
placeholder,
|
|
199
|
+
onBlur: (_e) => {
|
|
200
|
+
setIsFocused(false);
|
|
201
|
+
return onBlur();
|
|
202
|
+
},
|
|
203
|
+
onChange: (option) => {
|
|
204
|
+
if (multiSelect) {
|
|
205
|
+
onChange(
|
|
206
|
+
option == null ? void 0 : option.map((_option) => _option.value)
|
|
207
|
+
);
|
|
208
|
+
} else {
|
|
209
|
+
onChange(option == null ? void 0 : option.value);
|
|
210
|
+
}
|
|
211
|
+
},
|
|
212
|
+
onFocus: (_e) => {
|
|
213
|
+
setIsFocused(true);
|
|
214
|
+
},
|
|
215
|
+
onInputChange,
|
|
216
|
+
ref,
|
|
217
|
+
value: options.find((option) => option.value === value),
|
|
218
|
+
unstyled: true
|
|
219
|
+
}
|
|
220
|
+
),
|
|
221
|
+
error && // eslint-disable-next-line react/jsx-props-no-spreading
|
|
222
|
+
/* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, getHelperWrapperProps()), { children: /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, getErrorMessageProps()), { children: /* @__PURE__ */ jsx(FieldValidationError_default, { error, testId }) })) }))
|
|
223
|
+
]
|
|
224
|
+
})
|
|
225
|
+
);
|
|
226
|
+
};
|
|
227
|
+
var Select_default = Select;
|
|
228
|
+
|
|
229
|
+
// src/Select/index.ts
|
|
230
|
+
var Select_default2 = Select_default;
|
|
231
|
+
|
|
232
|
+
export {
|
|
233
|
+
Select_default,
|
|
234
|
+
Select_default2
|
|
235
|
+
};
|
|
236
|
+
//# sourceMappingURL=chunk-N2MRIHRX.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Select/Select.tsx","../src/Select/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { Props } from 'react-select';\n\nimport { useState } from 'react';\nimport ReactSelect, { components } from 'react-select';\n\nimport { useSelect } from '@heroui/select';\n\nimport { cn, slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useController, useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const selectVariants = tv({\n slots: {\n base: 'group leading-normal',\n clearIndicator:\n 'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-foreground-800',\n control:\n 'rounded-lg border-2 border-default-200 !duration-150 transition-background hover:border-default-400 group-data-[invalid=true]:border-danger group-data-[invalid=true]:hover:border-danger motion-reduce:transition-none',\n control_focused: 'border-focus',\n crossIcon: '',\n downChevron: '',\n dropdownIndicator:\n 'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-black',\n group: '',\n groupHeading: 'mb-1 ml-3 mt-2 text-sm text-foreground-500',\n indicatorsContainer: 'gap-1 p-1',\n indicatorSeparator: 'bg-default-300',\n input: 'py-0.5 pl-1',\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 'pointer-events-auto relative bottom-1.5 ml-1 text-small subpixel-antialiased group-data-[invalid=true]:!text-danger group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-[\"*\"]',\n loadingIndicator: '',\n loadingMessage: 'rounded-sm p-2 text-foreground-500',\n menu: 'mt-2 rounded-xl border border-default-200 bg-content1 p-1 shadow-lg',\n menuList: '',\n // ensure menu has same z-index as modal so it is visible when rendered in modal\n // see: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/modal.ts (see z-50)\n menuPortal: '!z-50',\n multiValue: 'items-center gap-1.5 rounded bg-default-100 py-0.5 pl-2 pr-1',\n multiValueContainer: '',\n multiValueLabel: 'py-0.5 leading-6',\n multiValueRemove:\n 'rounded text-default-500 hover:cursor-pointer hover:border-default-300 hover:text-default-800',\n noOptionsMessage: 'rounded-sm p-2 text-foreground-500',\n option_focused: 'bg-default-100 active:bg-default-200',\n option_selected: 'bg-default-300',\n option: 'rounded px-3 py-2 hover:cursor-pointer',\n placeholder: 'ml-1 py-0.5 pl-1 text-sm text-foreground-500',\n selectContainer: '',\n singleValue: '!ml-1 !leading-7',\n valueContainer: 'gap-1 p-1',\n },\n});\n\ntype SelectOption = {\n /** option label */\n label?: React.ReactNode;\n /** option value */\n value: string;\n};\n\ntype VariantProps = TVProps<typeof selectVariants>;\ntype ClassName = TVClassName<typeof selectVariants>;\n\nexport interface SelectProps extends VariantProps {\n /** CSS class name */\n className?: ClassName; // string;\n /** Determine if the */\n clearable?: boolean;\n /** Set the select to disabled state. */\n disabled?: boolean;\n /** Filter Select Options */\n filterOption?:\n | undefined\n | ((option?: SelectOption, inputValue?: string) => boolean);\n /** Format the label of the option */\n renderOptionLabel?: undefined | Props['formatOptionLabel'];\n /** The value of the search input */\n inputValue?: string;\n /** Label that should be associated with the select. */\n label?: React.ReactNode;\n /** Set the select to a loading state. */\n loading?: boolean;\n /** switch between single and multi select mode. */\n multiSelect?: boolean;\n /** The name for the Select component, used by react-hook-form */\n name: string;\n /** Placeholder that is displayed when nothing is selected */\n placeholder?: string;\n /** The options for the Select component */\n options: SelectOption[];\n /** Handle change events on the input */\n onInputChange?: Props['onInputChange'];\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\nconst InputComponent: typeof components.Input = (props) => {\n // @ts-expect-error data-testid is not a default prop\n // eslint-disable-next-line react/prop-types, react/destructuring-assignment\n const testId = `${props.selectProps['data-testid']}`;\n // eslint-disable-next-line react/jsx-props-no-spreading\n return <components.Input data-testid={testId} {...props} />;\n};\n\nconst ControlComponent: typeof components.Control = (props) => {\n // @ts-expect-error data-testid is not a default prop\n // eslint-disable-next-line react/prop-types, react/destructuring-assignment\n const testId = `${props.selectProps['data-testid']}_select`;\n return (\n <div data-testid={testId}>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <components.Control {...props} />\n </div>\n );\n};\n\nconst OptionComponent: typeof components.Option = (props) => {\n // @ts-expect-error data-testid is not a default prop\n // eslint-disable-next-line react/prop-types, react/destructuring-assignment\n const testId = `${props.selectProps['data-testid']}_select_option_${slugify(props?.data?.testId ?? props?.data?.value)}`;\n return (\n <div data-testid={testId}>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <components.Option {...props} />\n </div>\n );\n};\n\nconst DropdownIndicatorComponent: typeof components.DropdownIndicator = (\n props,\n) => {\n // @ts-expect-error data-testid is not a default prop\n // eslint-disable-next-line react/prop-types\n const testId = props?.selectProps['data-testid'] as string;\n return (\n <div data-testid={`${testId}_select_dropdown`}>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <components.DropdownIndicator {...props} />\n </div>\n );\n};\n\n/** Select component based on [HeroUI Select](https://www.heroui.com//docs/components/select) and [React-Select](https://react-select.com/home) */\nconst Select = ({\n className = undefined,\n clearable = true,\n disabled = false,\n filterOption = undefined,\n renderOptionLabel = undefined,\n inputValue = undefined,\n label: _label = undefined,\n loading = false,\n multiSelect = false,\n name,\n onInputChange = undefined,\n options,\n placeholder = undefined,\n testId: _testId = undefined,\n}: SelectProps) => {\n const { control, debugMode, getFieldState } = useFormContext();\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const { field } = useController({ control, disabled, name });\n const { onChange, value, ref, onBlur } = field;\n\n const [isFocused, setIsFocused] = useState(false);\n\n const variants = selectVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n\n const {\n getBaseProps,\n getErrorMessageProps,\n getHelperWrapperProps,\n getLabelProps,\n getTriggerProps,\n getValueProps,\n label,\n } = useSelect({\n children: [],\n classNames,\n errorMessage: JSON.stringify(error),\n isDisabled: disabled,\n isInvalid: invalid,\n isLoading: loading,\n isRequired: required,\n label: _label,\n labelPlacement: 'outside',\n placeholder: ' ',\n });\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n return (\n <div\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...getBaseProps()}\n className={cn(classNames.base)}\n data-testid={`${testId}_wrapper`}\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-required={required}\n >\n {showLabel && (\n <label\n className={classNames.label}\n data-slot=\"label\"\n htmlFor={`react-select-${name}-input`}\n id={getLabelProps().id}\n >\n {label}\n {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n </label>\n )}\n <ReactSelect\n aria-errormessage=\"\"\n aria-labelledby={getTriggerProps()['aria-labelledby']?.split(' ')[1]}\n aria-invalid={invalid}\n classNames={{\n control: () =>\n cn(classNames.control, {\n [classNames.control_focused]: isFocused && !invalid,\n }),\n clearIndicator: () => classNames.clearIndicator,\n dropdownIndicator: () => classNames.dropdownIndicator,\n groupHeading: () => classNames.groupHeading,\n indicatorsContainer: () => classNames.indicatorsContainer,\n indicatorSeparator: () => classNames.indicatorSeparator,\n loadingIndicator: () => classNames.loadingIndicator,\n loadingMessage: () => classNames.loadingMessage,\n input: () => classNames.input,\n menu: () => classNames.menu,\n menuList: () => classNames.menuList,\n menuPortal: () => classNames.menuPortal,\n multiValue: () => classNames.multiValue,\n multiValueLabel: () =>\n cn(classNames.multiValueLabel, `${getValueProps().className}`),\n multiValueRemove: () => classNames.multiValueRemove,\n noOptionsMessage: () => classNames.noOptionsMessage,\n option: ({\n isFocused: optionIsFocused,\n isSelected: optionIsSelected,\n }) =>\n cn(classNames.option, {\n [classNames.option_focused]: optionIsFocused,\n [classNames.option_selected]: optionIsSelected,\n }),\n placeholder: () => classNames.placeholder,\n singleValue: () =>\n cn(classNames.singleValue, `${getValueProps().className}`),\n valueContainer: () => classNames.valueContainer,\n }}\n components={{\n Input: InputComponent,\n Option: OptionComponent,\n DropdownIndicator: DropdownIndicatorComponent,\n Control: ControlComponent,\n }}\n // Does not affect the testId of the select, but is needed to pass it to sub-components\n data-testid={testId}\n filterOption={filterOption}\n formatOptionLabel={renderOptionLabel}\n inputValue={inputValue}\n instanceId={name}\n isClearable={clearable}\n isDisabled={disabled}\n isLoading={loading}\n isMulti={multiSelect}\n name={name}\n // set menuPosition to fixed so that menu can be rendered\n // inside Card / Modal components, menuShouldBlockScroll\n // prevents container scroll when menu is open\n menuPosition=\"fixed\"\n menuShouldBlockScroll\n options={options}\n placeholder={placeholder}\n onBlur={(_e) => {\n setIsFocused(false);\n return onBlur();\n }}\n onChange={(option) => {\n if (multiSelect) {\n onChange(\n (option as SelectOption[])?.map((_option) => _option.value),\n );\n } else {\n onChange((option as SelectOption)?.value);\n }\n }}\n onFocus={(_e) => {\n setIsFocused(true);\n }}\n onInputChange={onInputChange}\n ref={ref}\n // set complete option as value by current field value\n value={options.find((option) => option.value === value)}\n unstyled\n />\n {error && (\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 error={error} testId={testId} />\n </div>\n </div>\n )}\n </div>\n );\n};\n\nexport default Select;\n","import Select from './Select';\n\nexport type { SelectProps } from './Select';\n\nexport { Select };\n\nexport default Select;\n"],"mappings":"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","names":["Select_default"]}
|