@fuf-stack/uniform 0.12.1 → 0.14.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 +3 -3
- package/dist/CheckboxGroup/index.js +2 -2
- package/dist/FieldArray/index.cjs +3 -3
- package/dist/FieldArray/index.d.cts +2 -2
- package/dist/FieldArray/index.d.ts +2 -2
- package/dist/FieldArray/index.js +2 -2
- package/dist/{FieldArray-DUvn98Fe.d.cts → FieldArray-B_Gsw-to.d.cts} +11 -3
- package/dist/{FieldArray-DUvn98Fe.d.ts → FieldArray-B_Gsw-to.d.ts} +11 -3
- package/dist/Form/index.cjs +3 -3
- package/dist/Form/index.js +2 -2
- package/dist/Input/index.cjs +3 -3
- package/dist/Input/index.d.cts +2 -2
- package/dist/Input/index.d.ts +2 -2
- package/dist/Input/index.js +2 -2
- package/dist/{Input-B6dNQiiD.d.cts → Input-IkWP4cWg.d.cts} +8 -1
- package/dist/{Input-B6dNQiiD.d.ts → Input-IkWP4cWg.d.ts} +8 -1
- package/dist/RadioGroup/index.cjs +3 -3
- package/dist/RadioGroup/index.js +2 -2
- package/dist/Select/index.cjs +3 -3
- package/dist/Select/index.js +2 -2
- package/dist/SubmitButton/index.cjs +3 -3
- package/dist/SubmitButton/index.js +2 -2
- package/dist/Switch/index.cjs +3 -3
- package/dist/Switch/index.js +2 -2
- package/dist/TextArea/index.cjs +3 -3
- package/dist/TextArea/index.js +2 -2
- package/dist/{chunk-WJSY2D3D.cjs → chunk-25LLM544.cjs} +3 -3
- package/dist/{chunk-WJSY2D3D.cjs.map → chunk-25LLM544.cjs.map} +1 -1
- package/dist/{chunk-NL2RK5NJ.cjs → chunk-AG4RUDSV.cjs} +94 -101
- package/dist/chunk-AG4RUDSV.cjs.map +1 -0
- package/dist/{chunk-2L2ZE3VK.js → chunk-AQHKELUR.js} +2 -2
- package/dist/{chunk-AJCTJCJS.js → chunk-BS52M4SZ.js} +2 -2
- package/dist/{chunk-INTF7ABH.js → chunk-BZAPTLMC.js} +3 -2
- package/dist/chunk-BZAPTLMC.js.map +1 -0
- package/dist/{chunk-ADLIMAUY.js → chunk-DDZMDOSG.js} +2 -2
- package/dist/{chunk-22HRAWRF.cjs → chunk-EKE5URXQ.cjs} +3 -3
- package/dist/{chunk-22HRAWRF.cjs.map → chunk-EKE5URXQ.cjs.map} +1 -1
- package/dist/{chunk-FLVDDSDV.js → chunk-GN5NJ6ZU.js} +2 -2
- package/dist/{chunk-F2QAT7VM.cjs → chunk-HZP3EXGR.cjs} +4 -4
- package/dist/chunk-HZP3EXGR.cjs.map +1 -0
- package/dist/{chunk-JODLEFW5.js → chunk-IUNDGVMC.js} +3 -3
- package/dist/chunk-IUNDGVMC.js.map +1 -0
- package/dist/{chunk-5Q6YMU3S.cjs → chunk-JQ3E2HJO.cjs} +8 -5
- package/dist/chunk-JQ3E2HJO.cjs.map +1 -0
- package/dist/{chunk-R6H6XSOI.cjs → chunk-PZ4LZQI4.cjs} +6 -5
- package/dist/chunk-PZ4LZQI4.cjs.map +1 -0
- package/dist/{chunk-KYBPTL3Y.cjs → chunk-RY4F5YDS.cjs} +3 -3
- package/dist/{chunk-KYBPTL3Y.cjs.map → chunk-RY4F5YDS.cjs.map} +1 -1
- package/dist/{chunk-6UMW5EPE.js → chunk-VJC7VCFS.js} +92 -99
- package/dist/chunk-VJC7VCFS.js.map +1 -0
- package/dist/{chunk-KGTNPZZO.js → chunk-VP7WDLJM.js} +4 -3
- package/dist/chunk-VP7WDLJM.js.map +1 -0
- package/dist/{chunk-IQ4V57MX.cjs → chunk-VZ5MMFIF.cjs} +3 -3
- package/dist/{chunk-IQ4V57MX.cjs.map → chunk-VZ5MMFIF.cjs.map} +1 -1
- package/dist/{chunk-HWJREI53.js → chunk-WZ2WBZSC.js} +7 -4
- package/dist/chunk-WZ2WBZSC.js.map +1 -0
- package/dist/{chunk-CMRP3HEK.js → chunk-XJGJ5ZNM.js} +2 -2
- package/dist/{chunk-D276MAWR.cjs → chunk-XJWEUCV3.cjs} +4 -3
- package/dist/chunk-XJWEUCV3.cjs.map +1 -0
- package/dist/{chunk-ANXGDI6O.cjs → chunk-XJZAS7NG.cjs} +3 -3
- package/dist/{chunk-ANXGDI6O.cjs.map → chunk-XJZAS7NG.cjs.map} +1 -1
- package/dist/hooks/index.cjs +2 -2
- package/dist/hooks/index.js +1 -1
- package/dist/index.cjs +11 -11
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +10 -10
- package/package.json +11 -11
- package/dist/chunk-5Q6YMU3S.cjs.map +0 -1
- package/dist/chunk-6UMW5EPE.js.map +0 -1
- package/dist/chunk-D276MAWR.cjs.map +0 -1
- package/dist/chunk-F2QAT7VM.cjs.map +0 -1
- package/dist/chunk-HWJREI53.js.map +0 -1
- package/dist/chunk-INTF7ABH.js.map +0 -1
- package/dist/chunk-JODLEFW5.js.map +0 -1
- package/dist/chunk-KGTNPZZO.js.map +0 -1
- package/dist/chunk-NL2RK5NJ.cjs.map +0 -1
- package/dist/chunk-R6H6XSOI.cjs.map +0 -1
- /package/dist/{chunk-2L2ZE3VK.js.map → chunk-AQHKELUR.js.map} +0 -0
- /package/dist/{chunk-AJCTJCJS.js.map → chunk-BS52M4SZ.js.map} +0 -0
- /package/dist/{chunk-ADLIMAUY.js.map → chunk-DDZMDOSG.js.map} +0 -0
- /package/dist/{chunk-FLVDDSDV.js.map → chunk-GN5NJ6ZU.js.map} +0 -0
- /package/dist/{chunk-CMRP3HEK.js.map → chunk-XJGJ5ZNM.js.map} +0 -0
|
@@ -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 '@nextui-org/select';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { Controller } from '../Controller';\nimport { slugify } from '../helpers';\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const 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 NextUI styles for group-data condition, e.g.: https://github.com/nextui-org/nextui/blob/main/packages/core/theme/src/components/select.ts\n label:\n '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: '',\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/nextui-org/nextui/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 [NextUI Select](https://nextui.org/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 [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 <Controller\n control={control}\n name={name}\n render={({\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n field: { onChange, value, ref, onBlur },\n }) => (\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 NextUI styles for group-data condition (data-invalid), e.g.: https://github.com/nextui-org/nextui/blob/main/packages/components/select/src/use-select.ts\n data-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 && (\n <FieldCopyTestIdButton testId={testId} />\n )}\n </label>\n )}\n <ReactSelect\n aria-errormessage=\"\"\n aria-labelledby={\n getTriggerProps()['aria-labelledby']?.split(' ')[1]\n }\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 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} />\n </div>\n </div>\n )}\n </div>\n )}\n />\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"]}
|
|
@@ -9,7 +9,7 @@ var _chunkJU5RT22Ycjs = require('./chunk-JU5RT22Y.cjs');
|
|
|
9
9
|
var _chunkOHJYXA6Rcjs = require('./chunk-OHJYXA6R.cjs');
|
|
10
10
|
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var _chunkXJWEUCV3cjs = require('./chunk-XJWEUCV3.cjs');
|
|
13
13
|
|
|
14
14
|
// src/Input/Input.tsx
|
|
15
15
|
var _input = require('@nextui-org/input');
|
|
@@ -24,9 +24,10 @@ var Input = ({
|
|
|
24
24
|
placeholder = " ",
|
|
25
25
|
startContent = void 0,
|
|
26
26
|
testId: _testId = void 0,
|
|
27
|
+
transformValue = void 0,
|
|
27
28
|
type = void 0
|
|
28
29
|
}) => {
|
|
29
|
-
const { control, debugMode, getFieldState } =
|
|
30
|
+
const { control, debugMode, getFieldState } = _chunkXJWEUCV3cjs.useFormContext.call(void 0, );
|
|
30
31
|
const { error, invalid, required, testId } = getFieldState(name, _testId);
|
|
31
32
|
const showTestIdCopyButton = debugMode === "debug-testids";
|
|
32
33
|
const showLabel = label || showTestIdCopyButton;
|
|
@@ -61,13 +62,15 @@ var Input = ({
|
|
|
61
62
|
onBlur,
|
|
62
63
|
onChange: type === "number" ? (e) => {
|
|
63
64
|
onChange(Number(e.target.value));
|
|
64
|
-
} : onChange
|
|
65
|
+
} : (e) => onChange(
|
|
66
|
+
transformValue ? transformValue.formValue(e.target.value) : e.target.value
|
|
67
|
+
),
|
|
65
68
|
placeholder,
|
|
66
69
|
radius: "sm",
|
|
67
70
|
ref,
|
|
68
71
|
startContent,
|
|
69
72
|
type,
|
|
70
|
-
value,
|
|
73
|
+
value: transformValue ? transformValue.displayValue(value) : value,
|
|
71
74
|
variant: "bordered"
|
|
72
75
|
}
|
|
73
76
|
);
|
|
@@ -84,4 +87,4 @@ var Input_default2 = Input_default;
|
|
|
84
87
|
|
|
85
88
|
|
|
86
89
|
exports.Input_default = Input_default; exports.Input_default2 = Input_default2;
|
|
87
|
-
//# sourceMappingURL=chunk-
|
|
90
|
+
//# sourceMappingURL=chunk-JQ3E2HJO.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-JQ3E2HJO.cjs","../src/Input/Input.tsx","../src/Input/index.ts"],"names":["Input_default"],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACA;ACXA,0CAAmC;AAEnC,oDAAmB;AAwEgB,+CAAA;AAlCnC,IAAM,MAAA,EAAQ,CAAC;AAAA,EACb,UAAA,EAAY,KAAA,CAAA;AAAA,EACZ,SAAA,EAAW,KAAA;AAAA,EACX,WAAA,EAAa,KAAA,CAAA;AAAA,EACb,MAAA,EAAQ,KAAA,CAAA;AAAA,EACR,IAAA;AAAA,EACA,YAAA,EAAc,GAAA;AAAA,EACd,aAAA,EAAe,KAAA,CAAA;AAAA,EACf,MAAA,EAAQ,QAAA,EAAU,KAAA,CAAA;AAAA,EAClB,eAAA,EAAiB,KAAA,CAAA;AAAA,EACjB,KAAA,EAAO,KAAA;AACT,CAAA,EAAA,GAAkB;AAChB,EAAA,MAAM,EAAE,OAAA,EAAS,SAAA,EAAW,cAAc,EAAA,EAAI,8CAAA,CAAe;AAC7D,EAAA,MAAM,EAAE,KAAA,EAAO,OAAA,EAAS,QAAA,EAAU,OAAO,EAAA,EAAI,aAAA,CAAc,IAAA,EAAM,OAAO,CAAA;AAExE,EAAA,MAAM,qBAAA,EAAuB,UAAA,IAAc,eAAA;AAC3C,EAAA,MAAM,UAAA,EAAY,MAAA,GAAS,oBAAA;AAE3B,EAAA,uBACE,6BAAA;AAAA,IAAC,4BAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,QAAA;AAAA,MACA,IAAA;AAAA,MACA,MAAA,EAAQ,CAAC;AAAA,QACP,KAAA,EAAO,EAAE,QAAA,EAAU,UAAA,EAAY,QAAA,EAAU,MAAA,EAAQ,KAAA,EAAO,IAAI;AAAA,MAC9D,CAAA,EAAA,GAAM;AACJ,QAAA,uBACE,6BAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,4BAAA,SAAY,CAAA;AAAA,YACvB,UAAA,EAAY;AAAA,cACV,YAAA,EAAc;AAAA,YAChB,CAAA;AAAA,YACA,aAAA,EAAa,MAAA;AAAA,YACb,UAAA;AAAA,YACA,YAAA,EAAc,MAAA,mBAAS,6BAAA,8CAAC,EAAA,EAAqB,MAAA,CAAc,CAAA;AAAA,YAC3D,UAAA;AAAA,YACA,SAAA,EAAW,OAAA;AAAA,YACX,UAAA,EAAY,QAAA;AAAA,YACZ,KAAA,EACE,UAAA,mBACE,8BAAA,oBAAA,EAAA,EACG,QAAA,EAAA;AAAA,cAAA,KAAA;AAAA,cACA,qBAAA,mBACC,6BAAA,+CAAC,EAAA,EAAsB,OAAA,CAAgB;AAAA,YAAA,EAAA,CAE3C,CAAA;AAAA,YAGJ,cAAA,EAAe,SAAA;AAAA,YACf,IAAA;AAAA,YACA,MAAA;AAAA,YACA,QAAA,EACE,KAAA,IAAS,SAAA,EACL,CAAC,CAAA,EAAA,GAAM;AACL,cAAA,QAAA,CAAS,MAAA,CAAO,CAAA,CAAE,MAAA,CAAO,KAAK,CAAC,CAAA;AAAA,YACjC,EAAA,EACA,CAAC,CAAA,EAAA,GACC,QAAA;AAAA,cACE,eAAA,EACI,cAAA,CAAe,SAAA,CAAU,CAAA,CAAE,MAAA,CAAO,KAAK,EAAA,EACvC,CAAA,CAAE,MAAA,CAAO;AAAA,YACf,CAAA;AAAA,YAER,WAAA;AAAA,YACA,MAAA,EAAO,IAAA;AAAA,YACP,GAAA;AAAA,YACA,YAAA;AAAA,YACA,IAAA;AAAA,YACA,KAAA,EAAO,eAAA,EAAiB,cAAA,CAAe,YAAA,CAAa,KAAK,EAAA,EAAI,KAAA;AAAA,YAC7D,OAAA,EAAQ;AAAA,UAAA;AAAA,QACV,CAAA;AAAA,MAEJ;AAAA,IAAA;AAAA,EACF,CAAA;AAEJ,CAAA;AAEA,IAAO,cAAA,EAAQ,KAAA;ADtCf;AACA;AE5EA,IAAOA,eAAAA,EAAQ,aAAA;AF8Ef;AACA;AACE;AACA;AACF,+EAAC","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-JQ3E2HJO.cjs","sourcesContent":[null,"import type { ReactNode } from 'react';\n\nimport { Input as NextInput } from '@nextui-org/input';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { Controller } from '../Controller';\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport interface InputProps {\n /** CSS class name */\n className?: string;\n /** input field is disabled */\n disabled?: boolean;\n /** added content to the end of the input Field. */\n endContent?: ReactNode;\n /** form field label (set to false to disable label) */\n label?: string | false;\n /** form field name */\n name: string;\n /** form field placeholder */\n placeholder?: string;\n /** content added to the start of the input field */\n startContent?: ReactNode;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** allows disentangled display and form values for a field */\n transformValue?: {\n /** transforms the formValue of the field to the display value of the field */\n displayValue: (value: string | number) => string | number;\n /** transforms the displayValue of the field to the form value of the field */\n formValue: (value: string) => string | number;\n };\n /** input type */\n type?: 'number' | 'password';\n}\n\n/**\n * Input component based on [NextUI Input](https://nextui.org/docs/components/input)\n */\nconst Input = ({\n className = undefined,\n disabled = false,\n endContent = undefined,\n label = undefined,\n name,\n placeholder = ' ',\n startContent = undefined,\n testId: _testId = undefined,\n transformValue = undefined,\n type = undefined,\n}: InputProps) => {\n const { control, debugMode, getFieldState } = useFormContext();\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n return (\n <Controller\n control={control}\n disabled={disabled}\n name={name}\n render={({\n field: { disabled: isDisabled, onChange, onBlur, value, ref },\n }) => {\n return (\n <NextInput\n className={cn(className)}\n classNames={{\n inputWrapper: 'group-data-[focus=true]:border-focus',\n }}\n data-testid={testId}\n endContent={endContent}\n errorMessage={error && <FieldValidationError error={error} />}\n isDisabled={isDisabled}\n isInvalid={invalid}\n isRequired={required}\n label={\n showLabel && (\n <>\n {label}\n {showTestIdCopyButton && (\n <FieldCopyTestIdButton testId={testId} />\n )}\n </>\n )\n }\n labelPlacement=\"outside\"\n name={name}\n onBlur={onBlur}\n onChange={\n type === 'number'\n ? (e) => {\n onChange(Number(e.target.value));\n }\n : (e) =>\n onChange(\n transformValue\n ? transformValue.formValue(e.target.value)\n : e.target.value,\n )\n }\n placeholder={placeholder}\n radius=\"sm\"\n ref={ref}\n startContent={startContent}\n type={type}\n value={transformValue ? transformValue.displayValue(value) : value}\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,8 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
|
|
5
|
+
var _chunkXJWEUCV3cjs = require('./chunk-XJWEUCV3.cjs');
|
|
5
6
|
|
|
6
7
|
|
|
7
8
|
var _chunkBBB4FEY6cjs = require('./chunk-BBB4FEY6.cjs');
|
|
@@ -23,9 +24,9 @@ var FormDebugViewer = ({ className = void 0 }) => {
|
|
|
23
24
|
setDebugMode,
|
|
24
25
|
validation,
|
|
25
26
|
watch
|
|
26
|
-
} =
|
|
27
|
+
} = _chunkXJWEUCV3cjs.useFormContext.call(void 0, );
|
|
27
28
|
const [validationErrors, setValidationErrors] = _react.useState.call(void 0, null);
|
|
28
|
-
const formValues = watch();
|
|
29
|
+
const formValues = _chunkXJWEUCV3cjs.removeNullishFields.call(void 0, watch());
|
|
29
30
|
const debugTestIdsEnabled = debugMode === "debug-testids";
|
|
30
31
|
_react.useEffect.call(void 0,
|
|
31
32
|
() => {
|
|
@@ -111,7 +112,7 @@ var Form = ({
|
|
|
111
112
|
validationTrigger = "all"
|
|
112
113
|
}) => {
|
|
113
114
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
114
|
-
|
|
115
|
+
_chunkXJWEUCV3cjs.FormContext_default,
|
|
115
116
|
{
|
|
116
117
|
debugModeSettings: debug,
|
|
117
118
|
initialValues,
|
|
@@ -143,4 +144,4 @@ var Form_default2 = Form_default;
|
|
|
143
144
|
|
|
144
145
|
|
|
145
146
|
exports.Form_default = Form_default; exports.Form_default2 = Form_default2;
|
|
146
|
-
//# sourceMappingURL=chunk-
|
|
147
|
+
//# sourceMappingURL=chunk-PZ4LZQI4.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-PZ4LZQI4.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-PZ4LZQI4.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 } from '@fuf-stack/pixel-utils';\n\nimport { slugify } from '../helpers';\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\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 {!debug?.disable && <FormDebugViewer className=\"w-96 flex-shrink\" />}\n </div>\n )}\n </FormProvider>\n );\n};\n\nexport default Form;\n","import type { VetoError } from '@fuf-stack/veto';\n\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, Card, Json } from '@fuf-stack/pixels';\n\nimport { useFormContext } from '../../hooks';\nimport { removeNullishFields } from './FormContext';\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: { dirtyFields, isValid, isSubmitting },\n setDebugMode,\n validation,\n watch,\n } = useFormContext();\n\n const [validationErrors, setValidationErrors] = useState<\n VetoError['errors'] | null\n >(null);\n\n const formValues = removeNullishFields(watch());\n const debugTestIdsEnabled = debugMode === 'debug-testids';\n\n useEffect(\n () => {\n const updateValidationErrors = async () => {\n if (validation) {\n const validateResult = await validation?.validateAsync(formValues);\n setValidationErrors(validateResult?.errors);\n }\n };\n updateValidationErrors();\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [JSON.stringify(formValues)],\n );\n\n if (!debugMode || debugMode === 'off') {\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 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 icon={<FaTimes className=\"text-danger\" />}\n onClick={() => setDebugMode('off')}\n size=\"sm\"\n variant=\"flat\"\n />\n </div>\n }\n >\n <Button\n variant={debugTestIdsEnabled ? '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 {debugTestIdsEnabled ? 'Hide CopyButton' : 'Show CopyButton'}\n </Button>\n <Json\n value={{\n values: formValues,\n errors: validationErrors,\n dirtyFields,\n isValid,\n isSubmitting,\n }}\n />\n </Card>\n );\n};\nexport default FormDebugViewer;\n","import Form from './Form';\n\nexport type { FormProps } from './Form';\n\nexport { Form };\n\nexport default Form;\n"]}
|
|
@@ -9,7 +9,7 @@ var _chunkJU5RT22Ycjs = require('./chunk-JU5RT22Y.cjs');
|
|
|
9
9
|
var _chunkOHJYXA6Rcjs = require('./chunk-OHJYXA6R.cjs');
|
|
10
10
|
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var _chunkXJWEUCV3cjs = require('./chunk-XJWEUCV3.cjs');
|
|
13
13
|
|
|
14
14
|
|
|
15
15
|
var _chunkBBB4FEY6cjs = require('./chunk-BBB4FEY6.cjs');
|
|
@@ -43,7 +43,7 @@ var CheckboxGroup = ({
|
|
|
43
43
|
name,
|
|
44
44
|
testId: _testId = void 0
|
|
45
45
|
}) => {
|
|
46
|
-
const { control, debugMode, getFieldState } =
|
|
46
|
+
const { control, debugMode, getFieldState } = _chunkXJWEUCV3cjs.useFormContext.call(void 0, );
|
|
47
47
|
const { error, invalid, required, testId } = getFieldState(name, _testId);
|
|
48
48
|
const showTestIdCopyButton = debugMode === "debug-testids";
|
|
49
49
|
const showLabel = label || showTestIdCopyButton;
|
|
@@ -129,4 +129,4 @@ var CheckboxGroup_default2 = CheckboxGroup_default;
|
|
|
129
129
|
|
|
130
130
|
|
|
131
131
|
exports.CheckboxGroup_default = CheckboxGroup_default; exports.CheckboxGroup_default2 = CheckboxGroup_default2;
|
|
132
|
-
//# sourceMappingURL=chunk-
|
|
132
|
+
//# sourceMappingURL=chunk-RY4F5YDS.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-RY4F5YDS.cjs","../src/CheckboxGroup/CheckboxGroup.tsx","../src/CheckboxGroup/index.ts"],"names":["CheckboxGroup_default"],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACA;ACdA;AACE;AACA;AAAiB,gDACZ;AAEP,oDAAyC;AAmGzB,+CAAA;AA3FT,IAAM,sBAAA,EAAwB,4BAAA;AAAG,EACtC,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,OAAA;AAAA;AAAA,IACN,YAAA,EAAc,WAAA;AAAA,IACd,QAAA,EAAU,EAAA;AAAA,IACV,QAAA,EAAU,EAAA;AAAA,IACV,SAAA,EAAW,SAAA;AAAA,IACX,WAAA,EAAa,EAAA;AAAA;AAAA,IAEb,KAAA,EACE,qFAAA;AAAA,IACF,OAAA,EAAS;AAAA,EACX;AACF,CAAC,CAAA;AAkCD,IAAM,cAAA,EAAgB,CAAC;AAAA,EACrB,UAAA,EAAY,KAAA,CAAA;AAAA,EACZ,MAAA,EAAQ,KAAA,CAAA;AAAA,EACR,OAAA;AAAA,EACA,SAAA,EAAW,KAAA;AAAA,EACX,IAAA;AAAA,EACA,MAAA,EAAQ,QAAA,EAAU,KAAA;AACpB,CAAA,EAAA,GAA0B;AACxB,EAAA,MAAM,EAAE,OAAA,EAAS,SAAA,EAAW,cAAc,EAAA,EAAI,8CAAA,CAAe;AAC7D,EAAA,MAAM,EAAE,KAAA,EAAO,OAAA,EAAS,QAAA,EAAU,OAAO,EAAA,EAAI,aAAA,CAAc,IAAA,EAAM,OAAO,CAAA;AAExE,EAAA,MAAM,qBAAA,EAAuB,UAAA,IAAc,eAAA;AAC3C,EAAA,MAAM,UAAA,EAAY,MAAA,GAAS,oBAAA;AAE3B,EAAA,MAAM,SAAA,EAAW,qBAAA,CAAsB,CAAA;AACvC,EAAA,MAAM,WAAA,EAAa,8CAAA,QAAqB,EAAU,SAAA,EAAW,MAAM,CAAA;AAEnE,EAAA,MAAM,cAAA,EAAgB;AAAA,IACpB,IAAA,EAAM,UAAA,CAAW,QAAA;AAAA,IACjB,OAAA,EAAS,UAAA,CAAW,WAAA;AAAA,IACpB,IAAA,EAAM,UAAA,CAAW,QAAA;AAAA,IACjB,KAAA,EAAO,UAAA,CAAW;AAAA,EACpB,CAAA;AACA,EAAA,MAAM,mBAAA,EAAqB;AAAA,IACzB,IAAA,EAAM,UAAA,CAAW,IAAA;AAAA,IACjB,OAAA,EAAS,UAAA,CAAW,OAAA;AAAA,IACpB,KAAA,EAAO,UAAA,CAAW;AAAA,EACpB,CAAA;AAEA,EAAA,uBACE,6BAAA;AAAA,IAAC,4BAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,MAAA,EAAQ,CAAC,EAAE,KAAA,EAAO,EAAE,QAAA,EAAU,KAAA,EAAO,GAAA,EAAK,OAAO,EAAE,CAAA,EAAA,GAAM;AACvD,QAAA,uBACE,6BAAA;AAAA,UAAC,uBAAA;AAAA,UAAA;AAAA,YACC,IAAA;AAAA,YACA,UAAA,EAAY,kBAAA;AAAA,YACZ,aAAA,EAAa,MAAA;AAAA,YAEb,cAAA,EAAc,OAAA;AAAA,YACd,YAAA,EACE,MAAA,mBACE,6BAAA;AAAA,cAAC,8CAAA;AAAA,cAAA;AAAA,gBACC,KAAA;AAAA,gBACA,SAAA,EAAW,UAAA,CAAW;AAAA,cAAA;AAAA,YACxB,CAAA;AAAA,YAGJ,UAAA,EAAY,QAAA;AAAA,YACZ,SAAA,EAAW,OAAA;AAAA,YACX,UAAA,EAAY,QAAA;AAAA,YACZ,KAAA,EACE,UAAA;AAAA,4BAEE,8BAAA,OAAC,EAAA,EACE,QAAA,EAAA;AAAA,cAAA,KAAA;AAAA,cACA,qBAAA,mBACC,6BAAA,+CAAC,EAAA,EAAsB,OAAA,CAAgB;AAAA,YAAA,EAAA,CAE3C,CAAA;AAAA,YAIH,GAAI,OAAA,CAAQ,OAAA,IAAW,EAAA,EACpB;AAAA,cACE,KAAA,EAAO,CAAC,KAAK,CAAA,CAAE,MAAA,CAAO,CAAC,CAAA,EAAA,GAAM,EAAA,IAAM,KAAA,CAAS,CAAA;AAAA,cAC5C,QAAA,EAAU,CAAC,QAAA,EAAA,GAAa,QAAA,CAAS,SAAA,GAAY,QAAA,CAAS,CAAC,CAAC;AAAA,YAC1D,EAAA,EACA;AAAA,cACE,QAAA;AAAA,cACA;AAAA,YACF,CAAA;AAAA,YACJ,MAAA;AAAA,YACA,GAAA;AAAA,YAEC,QAAA,kBAAA,OAAA,2BAAS,GAAA,mBAAI,CAAC,MAAA,EAAA,GAAW;AACxB,cAAA,uBACE,6BAAA;AAAA,gBAAC,kBAAA;AAAA,gBAAA;AAAA,kBACC,cAAA,EAAc,OAAA;AAAA,kBACd,UAAA,EAAY,aAAA;AAAA,kBAEZ,UAAA,EAAY,SAAA,GAAY,MAAA,CAAO,QAAA;AAAA,kBAC/B,KAAA,kBAAO,MAAA,6BAAQ,OAAA;AAAA,kBACf,aAAA,EAAa,uCAAA;AAAA,oBACX,CAAA,EAAA;AACF,kBAAA;AAEC,kBAAA;AAAQ,gBAAA;AAPJ,gBAAA;AAQP,cAAA;AAEH,YAAA;AAAA,UAAA;AACH,QAAA;AAEJ,MAAA;AAAA,IAAA;AACF,EAAA;AAEJ;AAEO;ADvCc;AACA;AEtHdA;AFwHc;AACA;AACA;AACA;AACA","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-RY4F5YDS.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\n\nimport {\n Checkbox,\n CheckboxGroup as NextCheckboxGroup,\n} from '@nextui-org/checkbox';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { Controller } from '../Controller';\nimport { slugify } from '../helpers';\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const checkboxGroupVariants = tv({\n slots: {\n base: 'group', // Needs group for group-data condition\n errorMessage: 'text-tiny',\n itemBase: '',\n itemIcon: '',\n itemLabel: 'text-sm',\n itemWrapper: '',\n // See NextUI styles for group-data condition, e.g.: https://github.com/nextui-org/nextui/blob/main/packages/core/theme/src/components/select.ts\n label:\n 'text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger',\n wrapper: '',\n },\n});\n\ntype VariantProps = TVProps<typeof checkboxGroupVariants>;\ntype ClassName = TVClassName<typeof checkboxGroupVariants>;\n\nexport type CheckboxGroupOption = {\n /** option label */\n label?: React.ReactNode;\n /** option value */\n value: string;\n /** disables the option */\n disabled?: boolean;\n /** HTML data-testid attribute of the option */\n testId?: string;\n};\n\nexport interface CheckboxGroupProps extends VariantProps {\n /** CSS class name. ClassName: string | { buttons?: string | { base?: string; active?: string }; base?: string;} */\n className?: ClassName;\n /** label displayed above the Checkboxes */\n label?: React.ReactNode;\n /** Name the Field is registered on the form. */\n name: string;\n /** Checkboxes that should be displayed. */\n options: CheckboxGroupOption[];\n /** sets all buttons disabled */\n disabled?: boolean;\n /** id for internal testing. */\n testId?: string;\n}\n\n/**\n * CheckboxGroup component based on [NextUI CheckboxGroup](https://nextui.org/docs/components/checkbox-group)\n */\nconst CheckboxGroup = ({\n className = undefined,\n label = undefined,\n options,\n disabled = false,\n name,\n testId: _testId = undefined,\n}: CheckboxGroupProps) => {\n const { control, debugMode, getFieldState } = useFormContext();\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n const variants = checkboxGroupVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n\n const itemClassName = {\n base: classNames.itemBase,\n wrapper: classNames.itemWrapper,\n icon: classNames.itemIcon,\n label: classNames.itemLabel,\n };\n const itemGroupClassName = {\n base: classNames.base,\n wrapper: classNames.wrapper,\n label: classNames.label,\n };\n\n return (\n <Controller\n control={control}\n name={name}\n disabled={disabled}\n render={({ field: { onChange, value, ref, onBlur } }) => {\n return (\n <NextCheckboxGroup\n name={name}\n classNames={itemGroupClassName}\n data-testid={testId}\n // See NextUI styles for group-data condition (data-invalid), e.g.: https://github.com/nextui-org/nextui/blob/main/packages/components/select/src/use-select.ts\n data-invalid={invalid}\n errorMessage={\n error && (\n <FieldValidationError\n error={error}\n className={classNames.errorMessage}\n />\n )\n }\n isDisabled={disabled}\n isInvalid={invalid}\n isRequired={required}\n label={\n showLabel && (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label>\n {label}\n {showTestIdCopyButton && (\n <FieldCopyTestIdButton testId={testId} />\n )}\n </label>\n )\n }\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...(options.length === 1\n ? {\n value: [value].filter((v) => v !== undefined),\n onChange: (newValue) => onChange(newValue && newValue[0]),\n }\n : {\n onChange,\n value,\n })}\n onBlur={onBlur}\n ref={ref}\n >\n {options?.map((option) => {\n return (\n <Checkbox\n data-invalid={invalid}\n classNames={itemClassName}\n key={`index_${option.value}`}\n isDisabled={disabled || option.disabled}\n value={option?.value}\n data-testid={slugify(\n `${testId}_option_${option?.testId || option?.value}`,\n )}\n >\n {option?.label}\n </Checkbox>\n );\n })}\n </NextCheckboxGroup>\n );\n }}\n />\n );\n};\n\nexport default CheckboxGroup;\n","import CheckboxGroup from './CheckboxGroup';\n\nexport type { CheckboxGroupProps, CheckboxGroupOption } from './CheckboxGroup';\n\nexport { CheckboxGroup };\n\nexport default CheckboxGroup;\n"]}
|
|
@@ -7,13 +7,12 @@ import {
|
|
|
7
7
|
import {
|
|
8
8
|
useFieldArray,
|
|
9
9
|
useFormContext
|
|
10
|
-
} from "./chunk-
|
|
10
|
+
} from "./chunk-BZAPTLMC.js";
|
|
11
11
|
import {
|
|
12
12
|
slugify
|
|
13
13
|
} from "./chunk-V46BHM2U.js";
|
|
14
14
|
|
|
15
15
|
// src/FieldArray/FieldArray.tsx
|
|
16
|
-
import { useEffect as useEffect2 } from "react";
|
|
17
16
|
import {
|
|
18
17
|
closestCenter,
|
|
19
18
|
DndContext,
|
|
@@ -34,7 +33,6 @@ import { useInput as useInput2 } from "@nextui-org/input";
|
|
|
34
33
|
import { Button as Button2 } from "@fuf-stack/pixels";
|
|
35
34
|
|
|
36
35
|
// src/FieldArray/FieldArrayField.tsx
|
|
37
|
-
import { useEffect } from "react";
|
|
38
36
|
import { FaAngleDown, FaAngleUp, FaGripLines } from "react-icons/fa";
|
|
39
37
|
import { useSortable } from "@dnd-kit/sortable";
|
|
40
38
|
import { CSS } from "@dnd-kit/utilities";
|
|
@@ -62,12 +60,7 @@ var FieldArrayField = ({
|
|
|
62
60
|
transform: CSS.Translate.toString(transform),
|
|
63
61
|
transition
|
|
64
62
|
};
|
|
65
|
-
const {
|
|
66
|
-
getFieldState,
|
|
67
|
-
// register,
|
|
68
|
-
watch,
|
|
69
|
-
trigger
|
|
70
|
-
} = useFormContext();
|
|
63
|
+
const { getFieldState, trigger } = useFormContext();
|
|
71
64
|
const { error, invalid } = getFieldState(`${name}`, void 0);
|
|
72
65
|
const { getHelperWrapperProps, getErrorMessageProps } = useInput({
|
|
73
66
|
isInvalid: invalid,
|
|
@@ -76,88 +69,93 @@ var FieldArrayField = ({
|
|
|
76
69
|
placeholder: " ",
|
|
77
70
|
classNames: { helperWrapper: "block" }
|
|
78
71
|
});
|
|
79
|
-
const formValues = watch();
|
|
80
|
-
useEffect(() => {
|
|
81
|
-
trigger(`${name}.${index}`);
|
|
82
|
-
}, [JSON.stringify(formValues)]);
|
|
83
72
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
84
|
-
/* @__PURE__ */ jsxs(
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
)
|
|
117
|
-
] })
|
|
118
|
-
] }),
|
|
119
|
-
/* @__PURE__ */ jsxs("div", { className: "w-full", children: [
|
|
120
|
-
/* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center", children: [
|
|
121
|
-
/* @__PURE__ */ jsx("div", { className: "flex-grow", "data-testid": testId, children }),
|
|
122
|
-
!hideButtons.includes("remove") && !hideButtons.includes("all") && (lastNotDeletable && fields.length === 1 ? null : /* @__PURE__ */ jsx(Button, { onClick: () => remove(index), className: "ml-1", children: /* @__PURE__ */ jsx(
|
|
123
|
-
"svg",
|
|
124
|
-
{
|
|
125
|
-
className: "h-4 w-4",
|
|
126
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
127
|
-
viewBox: "0 0 20 20",
|
|
128
|
-
fill: "currentColor",
|
|
129
|
-
"aria-hidden": "true",
|
|
130
|
-
children: /* @__PURE__ */ jsx(
|
|
131
|
-
"path",
|
|
73
|
+
/* @__PURE__ */ jsxs(
|
|
74
|
+
"li",
|
|
75
|
+
{
|
|
76
|
+
ref: setNodeRef,
|
|
77
|
+
style,
|
|
78
|
+
className,
|
|
79
|
+
onBlur: () => trigger(`${name}.${index}`),
|
|
80
|
+
children: [
|
|
81
|
+
!hideButtons.includes("move") && !hideButtons.includes("all") && /* @__PURE__ */ jsxs("div", { className: "mr-6 flex flex-row items-center", children: [
|
|
82
|
+
moveField.includes("drag-drop") && /* @__PURE__ */ jsx(
|
|
83
|
+
"div",
|
|
84
|
+
{
|
|
85
|
+
className: "mr-2 text-base text-xl",
|
|
86
|
+
"data-testid": slugify(`${name}_${index}_movebutton`),
|
|
87
|
+
...attributes,
|
|
88
|
+
...listeners,
|
|
89
|
+
children: /* @__PURE__ */ jsx(FaGripLines, {})
|
|
90
|
+
}
|
|
91
|
+
),
|
|
92
|
+
moveField.includes("button") && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
|
|
93
|
+
/* @__PURE__ */ jsx(
|
|
94
|
+
Button,
|
|
95
|
+
{
|
|
96
|
+
testId: `${name}.${index}.up`,
|
|
97
|
+
disabled: index === 0,
|
|
98
|
+
onClick: () => move(index, index - 1),
|
|
99
|
+
className: "flex rounded-b-none rounded-t-md border border-gray-300 px-2 py-2 shadow-sm",
|
|
100
|
+
children: /* @__PURE__ */ jsx(FaAngleUp, {})
|
|
101
|
+
}
|
|
102
|
+
),
|
|
103
|
+
/* @__PURE__ */ jsx(
|
|
104
|
+
Button,
|
|
132
105
|
{
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
106
|
+
testId: `${name}.${index}.down`,
|
|
107
|
+
disabled: index === fields.length - 1,
|
|
108
|
+
onClick: () => move(index, index + 1),
|
|
109
|
+
className: "flex rounded-b-md rounded-t-none border border-gray-300 px-2 py-2 shadow-sm",
|
|
110
|
+
children: /* @__PURE__ */ jsx(FaAngleDown, {})
|
|
136
111
|
}
|
|
137
112
|
)
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
113
|
+
] })
|
|
114
|
+
] }),
|
|
115
|
+
/* @__PURE__ */ jsxs("div", { className: "w-full", children: [
|
|
116
|
+
/* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center", children: [
|
|
117
|
+
/* @__PURE__ */ jsx("div", { className: "flex-grow", "data-testid": testId, children }),
|
|
118
|
+
!hideButtons.includes("remove") && !hideButtons.includes("all") && (lastNotDeletable && fields.length === 1 ? null : /* @__PURE__ */ jsx(Button, { onClick: () => remove(index), className: "ml-1", children: /* @__PURE__ */ jsx(
|
|
119
|
+
"svg",
|
|
120
|
+
{
|
|
121
|
+
className: "h-4 w-4",
|
|
122
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
123
|
+
viewBox: "0 0 20 20",
|
|
124
|
+
fill: "currentColor",
|
|
125
|
+
"aria-hidden": "true",
|
|
126
|
+
children: /* @__PURE__ */ jsx(
|
|
127
|
+
"path",
|
|
128
|
+
{
|
|
129
|
+
fillRule: "evenodd",
|
|
130
|
+
d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
|
|
131
|
+
clipRule: "evenodd"
|
|
132
|
+
}
|
|
133
|
+
)
|
|
134
|
+
}
|
|
135
|
+
) }))
|
|
136
|
+
] }),
|
|
137
|
+
!hideButtons.includes("insert") && !hideButtons.includes("all") && index !== fields.length - 1 ? /* @__PURE__ */ jsx(
|
|
138
|
+
Button,
|
|
139
|
+
{
|
|
140
|
+
className: "text-xs font-medium",
|
|
141
|
+
testId: `add-harbor-button-${index}`,
|
|
142
|
+
onClick: () => {
|
|
143
|
+
insert(index + 1, {});
|
|
144
|
+
},
|
|
145
|
+
children: "insert"
|
|
146
|
+
}
|
|
147
|
+
) : null
|
|
148
|
+
] }, `rest-${field.id}`)
|
|
149
|
+
]
|
|
150
|
+
}
|
|
151
|
+
),
|
|
154
152
|
error && typeof error[index] !== "undefined" && // // @ts-expect-error rhf incompatibility
|
|
155
153
|
// error[Number(index)]?._errors && ( // TODO: was String(). Check if Number is correct. (same below in FieldValidationError)
|
|
156
154
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
157
155
|
/* @__PURE__ */ jsx("div", { ...getHelperWrapperProps(), children: /* @__PURE__ */ jsx("div", { ...getErrorMessageProps(), children: /* @__PURE__ */ jsx(
|
|
158
156
|
FieldValidationError_default,
|
|
159
157
|
{
|
|
160
|
-
error: error[Number(index)]?._errors
|
|
158
|
+
error: error[Number(index)]?._errors
|
|
161
159
|
}
|
|
162
160
|
) }) })
|
|
163
161
|
] });
|
|
@@ -180,19 +178,14 @@ var FieldArray = ({
|
|
|
180
178
|
debugMode,
|
|
181
179
|
getValues,
|
|
182
180
|
getFieldState,
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
watch
|
|
181
|
+
trigger
|
|
182
|
+
// watch
|
|
186
183
|
} = useFormContext();
|
|
187
184
|
const { fields, append, remove, insert, move } = useFieldArray({
|
|
188
185
|
control,
|
|
189
186
|
name
|
|
190
187
|
});
|
|
191
188
|
const { error, testId, invalid, required } = getFieldState(name, _testId);
|
|
192
|
-
const formValues = watch();
|
|
193
|
-
useEffect2(() => {
|
|
194
|
-
trigger(`${name}`);
|
|
195
|
-
}, [JSON.stringify(formValues)]);
|
|
196
189
|
const { label, getLabelProps, getHelperWrapperProps, getErrorMessageProps } = useInput2({
|
|
197
190
|
isInvalid: invalid,
|
|
198
191
|
isRequired: required,
|
|
@@ -231,7 +224,7 @@ var FieldArray = ({
|
|
|
231
224
|
{
|
|
232
225
|
items: fields.map((field) => field.id),
|
|
233
226
|
strategy: verticalListSortingStrategy,
|
|
234
|
-
children: /* @__PURE__ */ jsxs2("ul", { "data-testid": testId, children: [
|
|
227
|
+
children: /* @__PURE__ */ jsxs2("ul", { "data-testid": testId, onBlur: () => trigger(`${name}`), children: [
|
|
235
228
|
showLabel && // eslint-disable-next-line jsx-a11y/label-has-associated-control
|
|
236
229
|
/* @__PURE__ */ jsx2(
|
|
237
230
|
"label",
|
|
@@ -250,12 +243,11 @@ var FieldArray = ({
|
|
|
250
243
|
return /* @__PURE__ */ jsx2(
|
|
251
244
|
FieldArrayField_default,
|
|
252
245
|
{
|
|
253
|
-
id: field.id,
|
|
254
|
-
testId: `${testId}_${index}`,
|
|
255
246
|
className: "mb-3 mt-5 flex flex-row items-center",
|
|
256
247
|
field,
|
|
257
248
|
fields,
|
|
258
249
|
hideButtons,
|
|
250
|
+
id: field.id,
|
|
259
251
|
index,
|
|
260
252
|
insert,
|
|
261
253
|
lastNotDeletable,
|
|
@@ -263,15 +255,16 @@ var FieldArray = ({
|
|
|
263
255
|
moveField,
|
|
264
256
|
name,
|
|
265
257
|
remove,
|
|
266
|
-
|
|
267
|
-
|
|
258
|
+
testId: `${testId}_${index}`,
|
|
259
|
+
children: children({
|
|
260
|
+
duplicate,
|
|
268
261
|
index,
|
|
269
|
-
fields.length,
|
|
270
|
-
move,
|
|
271
262
|
insert,
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
263
|
+
length: fields.length,
|
|
264
|
+
move,
|
|
265
|
+
name: `${name}[${index}]`,
|
|
266
|
+
remove
|
|
267
|
+
})
|
|
275
268
|
},
|
|
276
269
|
field.id
|
|
277
270
|
);
|
|
@@ -302,4 +295,4 @@ export {
|
|
|
302
295
|
FieldArray_default,
|
|
303
296
|
FieldArray_default2
|
|
304
297
|
};
|
|
305
|
-
//# sourceMappingURL=chunk-
|
|
298
|
+
//# sourceMappingURL=chunk-VJC7VCFS.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/FieldArray/FieldArray.tsx","../src/FieldArray/FieldArrayField.tsx","../src/FieldArray/index.ts"],"sourcesContent":["import type { DragEndEvent } from '@dnd-kit/core';\nimport type {\n FieldValues,\n UseFieldArrayInsert,\n UseFieldArrayMove,\n UseFieldArrayRemove,\n} from 'react-hook-form';\n\n// import { useEffect } from 'react';\n\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n PointerSensor,\n useSensor,\n useSensors,\n} from '@dnd-kit/core';\nimport {\n restrictToVerticalAxis,\n restrictToWindowEdges,\n} from '@dnd-kit/modifiers';\nimport {\n SortableContext,\n verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { useInput } from '@nextui-org/input';\n\nimport { Button } from '@fuf-stack/pixels';\n\nimport { useFieldArray, useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\nimport FieldArrayField from './FieldArrayField';\n\nexport type FieldArrayHideOption = 'add' | 'remove' | 'move' | 'insert' | 'all';\nexport type FieldArrayFieldChildren = (args: {\n duplicate: (i: number) => void;\n index: number;\n insert: UseFieldArrayInsert<FieldValues, string>;\n length: number;\n move: UseFieldArrayMove;\n name: string;\n remove: UseFieldArrayRemove;\n}) => JSX.Element;\n\nexport type MoveField = 'drag-drop' | 'button';\n\nexport interface FieldArrayProps {\n /** function that renders the children with provided Properties. */\n children: FieldArrayFieldChildren;\n /** Hide a set of buttons. */\n hideButtons?: FieldArrayHideOption[];\n /** label of the FieldArray. */\n label?: React.ReactNode;\n /** stops user from deleting all items. */\n lastNotDeletable?: boolean;\n /** name the FieldArray is registered in RHF */\n name: string;\n /** ID for test purposes. */\n testId?: string;\n /* how the fields can be moved */\n moveField?: MoveField[];\n}\n\n/**\n * FieldArray component using react-hook-form\n */\nconst FieldArray = ({\n children,\n hideButtons = [],\n label: _label = undefined,\n lastNotDeletable = true,\n name,\n testId: _testId = undefined,\n moveField = ['button'],\n}: FieldArrayProps) => {\n const {\n control,\n debugMode,\n getValues,\n getFieldState,\n trigger,\n // watch\n } = useFormContext();\n\n const { fields, append, remove, insert, move } = useFieldArray({\n control,\n name,\n });\n\n const { error, testId, invalid, required } = getFieldState(name, _testId);\n\n // TODO: what about input props?\n const { label, getLabelProps, getHelperWrapperProps, getErrorMessageProps } =\n useInput({\n isInvalid: invalid,\n isRequired: required,\n errorMessage: JSON.stringify(error),\n label: _label,\n labelPlacement: 'inside',\n placeholder: ' ',\n classNames: { helperWrapper: 'block' },\n });\n\n if (lastNotDeletable && fields.length === 0) {\n append({});\n }\n\n const sensors = useSensors(\n useSensor(PointerSensor),\n useSensor(KeyboardSensor),\n );\n\n const handleDragEnd = (event: DragEndEvent) => {\n const { active, over } = event;\n\n if (active.id !== over?.id) {\n const oldIndex = fields.findIndex((field) => field.id === active.id);\n const newIndex = fields.findIndex((field) => field.id === over?.id);\n move(oldIndex, newIndex);\n }\n };\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n return (\n <DndContext\n sensors={sensors}\n collisionDetection={closestCenter}\n onDragEnd={handleDragEnd}\n modifiers={[restrictToVerticalAxis, restrictToWindowEdges]}\n >\n <SortableContext\n items={fields.map((field) => field.id)}\n strategy={verticalListSortingStrategy}\n >\n <ul data-testid={testId} onBlur={() => trigger(`${name}`)}>\n {showLabel && (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...getLabelProps()}\n className={`${getLabelProps().className} !pointer-events-auto !static !z-0 -mb-1 ml-1 !inline-block`}\n >\n {label}\n </label>\n )}\n {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n\n {fields.map((field, index) => {\n const duplicate = (i: number) => {\n const values = getValues(name);\n insert(i + 1, { ...values[i], id: null });\n };\n\n return (\n <FieldArrayField\n className=\"mb-3 mt-5 flex flex-row items-center\"\n field={field}\n fields={fields}\n hideButtons={hideButtons}\n id={field.id}\n index={index}\n insert={insert}\n key={field.id}\n lastNotDeletable={lastNotDeletable}\n move={move}\n moveField={moveField}\n name={name}\n remove={remove}\n testId={`${testId}_${index}`}\n >\n {children({\n duplicate,\n index,\n insert,\n length: fields.length,\n move,\n name: `${name}[${index}]`,\n remove,\n })}\n </FieldArrayField>\n );\n })}\n\n {!hideButtons.includes('add') && !hideButtons.includes('all') && (\n <Button\n testId={`${testId}_append`}\n size=\"sm\"\n onClick={() => append({})}\n >\n Add\n </Button>\n )}\n {/* @ts-expect-error rhf incompatibility */}\n {error?._errors && (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <div {...getHelperWrapperProps()}>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <div {...getErrorMessageProps()}>\n {/* @ts-expect-error rhf incompatibility */}\n <FieldValidationError error={error?._errors} />\n </div>\n </div>\n )}\n </ul>\n </SortableContext>\n </DndContext>\n );\n};\n\nexport default FieldArray;\n","import type {\n FieldValues,\n UseFieldArrayInsert,\n UseFieldArrayMove,\n UseFieldArrayRemove,\n} from 'react-hook-form';\nimport type { FieldArrayHideOption, MoveField } from './FieldArray';\n\n// import { useEffect } from 'react';\nimport { FaAngleDown, FaAngleUp, FaGripLines } from 'react-icons/fa';\n\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { useInput } from '@nextui-org/input';\n\nimport { Button } from '@fuf-stack/pixels';\n\nimport { slugify } from '../helpers';\nimport { useFormContext } from '../hooks';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\ninterface FieldArrayFieldProps {\n children: React.ReactNode;\n className?: string;\n field: Record<'id', string>;\n fields: Record<'id', string>[];\n hideButtons?: FieldArrayHideOption[];\n id: string | number;\n index: number;\n insert: UseFieldArrayInsert<FieldValues, string>;\n lastNotDeletable?: boolean;\n move: UseFieldArrayMove;\n moveField: MoveField[];\n testId?: string;\n name: string;\n remove: UseFieldArrayRemove;\n}\n\n/**\n * FieldArrayField component using react-hook-form\n */\nconst FieldArrayField = ({\n children,\n className = undefined,\n field,\n fields,\n hideButtons = [],\n id,\n index,\n insert,\n lastNotDeletable = true,\n move,\n moveField,\n name,\n remove,\n testId = undefined,\n}: FieldArrayFieldProps) => {\n const { attributes, listeners, setNodeRef, transform, transition } =\n useSortable({ id });\n\n const style = {\n transform: CSS.Translate.toString(transform),\n transition,\n };\n\n const { getFieldState, trigger } = useFormContext();\n const { error, invalid } = getFieldState(`${name}`, undefined);\n\n // TODO: what about input props? and label props? Do we need a label?\n const { getHelperWrapperProps, getErrorMessageProps } = useInput({\n isInvalid: invalid,\n errorMessage: JSON.stringify(error),\n labelPlacement: 'inside',\n placeholder: ' ',\n classNames: { helperWrapper: 'block' },\n });\n\n return (\n <>\n <li\n ref={setNodeRef}\n style={style}\n className={className}\n onBlur={() => trigger(`${name}.${index}`)}\n >\n {/** Start Button up/down */}\n {!hideButtons.includes('move') && !hideButtons.includes('all') && (\n <div className=\"mr-6 flex flex-row items-center\">\n {moveField.includes('drag-drop') && (\n <div\n className=\"mr-2 text-base text-xl\"\n data-testid={slugify(`${name}_${index}_movebutton`)}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...attributes}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...listeners}\n >\n <FaGripLines />\n </div>\n )}\n {moveField.includes('button') && (\n <div className=\"flex flex-col\">\n <Button\n testId={`${name}.${index}.up`}\n disabled={index === 0}\n onClick={() => move(index, index - 1)}\n className=\"flex rounded-b-none rounded-t-md border border-gray-300 px-2 py-2 shadow-sm\"\n >\n <FaAngleUp />\n </Button>\n <Button\n testId={`${name}.${index}.down`}\n disabled={index === fields.length - 1}\n onClick={() => move(index, index + 1)}\n className=\"flex rounded-b-md rounded-t-none border border-gray-300 px-2 py-2 shadow-sm\"\n >\n <FaAngleDown />\n </Button>\n </div>\n )}\n </div>\n )}\n {/** End Button up/down */}\n <div key={`rest-${field.id}`} className=\"w-full\">\n <div className=\"mb-2 flex items-center\">\n {/** RENDER CHILDREN */}\n <div className=\"flex-grow\" data-testid={testId}>\n {children}\n </div>\n {!hideButtons.includes('remove') &&\n !hideButtons.includes('all') &&\n (lastNotDeletable && fields.length === 1 ? null : (\n <Button onClick={() => remove(index)} className=\"ml-1\">\n <svg\n className=\"h-4 w-4\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n clipRule=\"evenodd\"\n />\n </svg>\n </Button>\n ))}\n </div>\n\n {!hideButtons.includes('insert') &&\n !hideButtons.includes('all') &&\n index !== fields.length - 1 ? (\n <Button\n className=\"text-xs font-medium\"\n testId={`add-harbor-button-${index}`}\n onClick={() => {\n insert(index + 1, {});\n }}\n >\n insert\n </Button>\n ) : null}\n </div>\n </li>\n {error && typeof error[index] !== 'undefined' && (\n // // @ts-expect-error rhf incompatibility\n // error[Number(index)]?._errors && ( // TODO: was String(). Check if Number is correct. (same below in FieldValidationError)\n // eslint-disable-next-line react/jsx-props-no-spreading\n <div {...getHelperWrapperProps()}>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <div {...getErrorMessageProps()}>\n <FieldValidationError\n /* @ts-expect-error rhf incompatibility */\n error={error[Number(index)]?._errors}\n />\n </div>\n </div>\n )}\n </>\n );\n};\nexport default FieldArrayField;\n","import FieldArray from './FieldArray';\n\nexport type {\n FieldArrayProps,\n FieldArrayHideOption,\n FieldArrayFieldChildren,\n} from './FieldArray';\n\nexport { FieldArray };\n\nexport default FieldArray;\n"],"mappings":"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","names":["useInput","Button","jsx","jsxs","useInput","Button","FieldArray_default"]}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import {
|
|
2
2
|
FormContext_default,
|
|
3
|
+
removeNullishFields,
|
|
3
4
|
useFormContext
|
|
4
|
-
} from "./chunk-
|
|
5
|
+
} from "./chunk-BZAPTLMC.js";
|
|
5
6
|
import {
|
|
6
7
|
slugify
|
|
7
8
|
} from "./chunk-V46BHM2U.js";
|
|
@@ -25,7 +26,7 @@ var FormDebugViewer = ({ className = void 0 }) => {
|
|
|
25
26
|
watch
|
|
26
27
|
} = useFormContext();
|
|
27
28
|
const [validationErrors, setValidationErrors] = useState(null);
|
|
28
|
-
const formValues = watch();
|
|
29
|
+
const formValues = removeNullishFields(watch());
|
|
29
30
|
const debugTestIdsEnabled = debugMode === "debug-testids";
|
|
30
31
|
useEffect(
|
|
31
32
|
() => {
|
|
@@ -143,4 +144,4 @@ export {
|
|
|
143
144
|
Form_default,
|
|
144
145
|
Form_default2
|
|
145
146
|
};
|
|
146
|
-
//# sourceMappingURL=chunk-
|
|
147
|
+
//# sourceMappingURL=chunk-VP7WDLJM.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Form/Form.tsx","../src/Form/subcomponents/FormDebugViewer.tsx","../src/Form/index.ts"],"sourcesContent":["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 } from '@fuf-stack/pixel-utils';\n\nimport { slugify } from '../helpers';\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\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 {!debug?.disable && <FormDebugViewer className=\"w-96 flex-shrink\" />}\n </div>\n )}\n </FormProvider>\n );\n};\n\nexport default Form;\n","import type { VetoError } from '@fuf-stack/veto';\n\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, Card, Json } from '@fuf-stack/pixels';\n\nimport { useFormContext } from '../../hooks';\nimport { removeNullishFields } from './FormContext';\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: { dirtyFields, isValid, isSubmitting },\n setDebugMode,\n validation,\n watch,\n } = useFormContext();\n\n const [validationErrors, setValidationErrors] = useState<\n VetoError['errors'] | null\n >(null);\n\n const formValues = removeNullishFields(watch());\n const debugTestIdsEnabled = debugMode === 'debug-testids';\n\n useEffect(\n () => {\n const updateValidationErrors = async () => {\n if (validation) {\n const validateResult = await validation?.validateAsync(formValues);\n setValidationErrors(validateResult?.errors);\n }\n };\n updateValidationErrors();\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [JSON.stringify(formValues)],\n );\n\n if (!debugMode || debugMode === 'off') {\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 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 icon={<FaTimes className=\"text-danger\" />}\n onClick={() => setDebugMode('off')}\n size=\"sm\"\n variant=\"flat\"\n />\n </div>\n }\n >\n <Button\n variant={debugTestIdsEnabled ? '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 {debugTestIdsEnabled ? 'Hide CopyButton' : 'Show CopyButton'}\n </Button>\n <Json\n value={{\n values: formValues,\n errors: validationErrors,\n dirtyFields,\n isValid,\n isSubmitting,\n }}\n />\n </Card>\n );\n};\nexport default FormDebugViewer;\n","import Form from './Form';\n\nexport type { FormProps } from './Form';\n\nexport { Form };\n\nexport default Form;\n"],"mappings":"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","names":["cn","jsx","jsxs","cn","Form_default"]}
|