@fuf-stack/uniform 1.20.12 → 1.20.14
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/Checkboxes/index.cjs +1 -1
- package/dist/{Checkboxes-DegQ22uN.cjs → Checkboxes-CqlbSLHi.cjs} +3 -3
- package/dist/{Checkboxes-DegQ22uN.cjs.map → Checkboxes-CqlbSLHi.cjs.map} +1 -1
- package/dist/FieldArray/index.cjs +1 -1
- package/dist/{FieldArray-BVlqxHnR.cjs → FieldArray-DtlFSbHK.cjs} +4 -4
- package/dist/{FieldArray-BVlqxHnR.cjs.map → FieldArray-DtlFSbHK.cjs.map} +1 -1
- package/dist/FieldCard/index.cjs +1 -1
- package/dist/FieldCard/index.js +1 -1
- package/dist/{FieldCard-Bkp8PHJw.cjs → FieldCard-BNsMMgh3.cjs} +4 -4
- package/dist/{FieldCard-Bkp8PHJw.cjs.map → FieldCard-BNsMMgh3.cjs.map} +1 -1
- package/dist/{FieldCard-DynQT-O7.js → FieldCard-BuUT2zKN.js} +2 -2
- package/dist/{FieldCard-DynQT-O7.js.map → FieldCard-BuUT2zKN.js.map} +1 -1
- package/dist/{FieldCopyTestIdButton-DrUzXwTo.cjs → FieldCopyTestIdButton-_5kpA4ii.cjs} +2 -2
- package/dist/{FieldCopyTestIdButton-DrUzXwTo.cjs.map → FieldCopyTestIdButton-_5kpA4ii.cjs.map} +1 -1
- package/dist/{FieldValidationError-8H8LxDjk.cjs → FieldValidationError-D40HtO_l.cjs} +2 -2
- package/dist/{FieldValidationError-8H8LxDjk.cjs.map → FieldValidationError-D40HtO_l.cjs.map} +1 -1
- package/dist/Form/index.cjs +1 -1
- package/dist/Form/index.js +1 -1
- package/dist/{Form-Dqa1b7Y7.cjs → Form-BQbwyvPX.cjs} +3 -3
- package/dist/{Form-Dqa1b7Y7.cjs.map → Form-BQbwyvPX.cjs.map} +1 -1
- package/dist/{Form-Wzy7pBVt.js → Form-BodvG3wG.js} +3 -3
- package/dist/{Form-Wzy7pBVt.js.map → Form-BodvG3wG.js.map} +1 -1
- package/dist/{FormContext-CLfMWHQM.js → FormContext-DMaTuTAr.js} +8 -3
- package/dist/FormContext-DMaTuTAr.js.map +1 -0
- package/dist/{FormContext-BrY1FQYR.cjs → FormContext-Djp8wTG8.cjs} +8 -3
- package/dist/FormContext-Djp8wTG8.cjs.map +1 -0
- package/dist/Grid/index.cjs +1 -1
- package/dist/{Grid-DdYQQ_UM.cjs → Grid-BPOumLUp.cjs} +2 -2
- package/dist/{Grid-DdYQQ_UM.cjs.map → Grid-BPOumLUp.cjs.map} +1 -1
- package/dist/Input/index.cjs +1 -1
- package/dist/{Input-BrwUwIYg.cjs → Input-D64GjrZJ.cjs} +2 -2
- package/dist/{Input-BrwUwIYg.cjs.map → Input-D64GjrZJ.cjs.map} +1 -1
- package/dist/RadioBoxes/index.cjs +1 -1
- package/dist/{RadioBoxes-Cim3InDW.cjs → RadioBoxes-DpBv9exN.cjs} +2 -2
- package/dist/{RadioBoxes-Cim3InDW.cjs.map → RadioBoxes-DpBv9exN.cjs.map} +1 -1
- package/dist/RadioTabs/index.cjs +1 -1
- package/dist/{RadioTabs-t-x2XnuI.cjs → RadioTabs-CPsErN1U.cjs} +2 -2
- package/dist/{RadioTabs-t-x2XnuI.cjs.map → RadioTabs-CPsErN1U.cjs.map} +1 -1
- package/dist/Radios/index.cjs +1 -1
- package/dist/{Radios-CjEFdyD6.cjs → Radios-LA38MXVt.cjs} +2 -2
- package/dist/{Radios-CjEFdyD6.cjs.map → Radios-LA38MXVt.cjs.map} +1 -1
- package/dist/Select/index.cjs +1 -1
- package/dist/Select/index.js +1 -1
- package/dist/{Select-BH1Tbqwk.cjs → Select-DR1M-WYr.cjs} +10 -6
- package/dist/Select-DR1M-WYr.cjs.map +1 -0
- package/dist/{Select-CZnEBGdn.js → Select-DZ9ONLss.js} +9 -5
- package/dist/Select-DZ9ONLss.js.map +1 -0
- package/dist/Slider/index.cjs +1 -1
- package/dist/{Slider-CFYP86ku.cjs → Slider-BXPgYL-o.cjs} +2 -2
- package/dist/{Slider-CFYP86ku.cjs.map → Slider-BXPgYL-o.cjs.map} +1 -1
- package/dist/SubmitButton/index.cjs +1 -1
- package/dist/SubmitButton/index.js +1 -1
- package/dist/{SubmitButton-D7xacDyS.cjs → SubmitButton-DgEHHy3N.cjs} +3 -3
- package/dist/{SubmitButton-D7xacDyS.cjs.map → SubmitButton-DgEHHy3N.cjs.map} +1 -1
- package/dist/{SubmitButton-Bu3NNFyt.js → SubmitButton-QWpHBvg9.js} +2 -2
- package/dist/{SubmitButton-Bu3NNFyt.js.map → SubmitButton-QWpHBvg9.js.map} +1 -1
- package/dist/Switch/index.cjs +1 -1
- package/dist/{Switch-Dt9TGQ8d.cjs → Switch-B_R9hdxd.cjs} +2 -2
- package/dist/{Switch-Dt9TGQ8d.cjs.map → Switch-B_R9hdxd.cjs.map} +1 -1
- package/dist/SwitchBox/index.cjs +1 -1
- package/dist/{SwitchBox-DMPp_Ed-.cjs → SwitchBox-DZXIJjgl.cjs} +2 -2
- package/dist/{SwitchBox-DMPp_Ed-.cjs.map → SwitchBox-DZXIJjgl.cjs.map} +1 -1
- package/dist/TextArea/index.cjs +1 -1
- package/dist/{TextArea-BDNtxp9N.cjs → TextArea-CsNyG6DY.cjs} +2 -2
- package/dist/{TextArea-BDNtxp9N.cjs.map → TextArea-CsNyG6DY.cjs.map} +1 -1
- package/dist/helpers/index.cjs +1 -1
- package/dist/hooks/useClientValidation/index.cjs +1 -1
- package/dist/hooks/useClientValidation/index.js +1 -1
- package/dist/hooks/useController/index.cjs +1 -1
- package/dist/hooks/useController/index.js +1 -1
- package/dist/hooks/useFormContext/index.cjs +1 -1
- package/dist/hooks/useFormContext/index.js +1 -1
- package/dist/hooks/useInput/index.cjs +1 -1
- package/dist/hooks/useInputValueDebounce/index.cjs +2 -2
- package/dist/hooks/useInputValueDebounce/index.js +1 -1
- package/dist/hooks/useInputValueTransform/index.cjs +1 -1
- package/dist/hooks/useUniformField/index.cjs +6 -6
- package/dist/hooks/useUniformField/index.js +2 -2
- package/dist/hooks/useUniformFieldArray/index.cjs +2 -2
- package/dist/hooks/useUniformFieldArray/index.js +1 -1
- package/dist/hooks/useWatchUserChange/index.cjs +1 -1
- package/dist/hooks/useWatchUserChange/index.js +1 -1
- package/dist/index.cjs +23 -23
- package/dist/index.js +8 -8
- package/dist/partials/FieldCopyTestIdButton/index.cjs +1 -1
- package/dist/partials/FieldValidationError/index.cjs +1 -1
- package/dist/{useClientValidation-Dn_kJkE5.js → useClientValidation-7iy9lEfO.js} +2 -2
- package/dist/{useClientValidation-Dn_kJkE5.js.map → useClientValidation-7iy9lEfO.js.map} +1 -1
- package/dist/{useClientValidation-NKOuXuHV.cjs → useClientValidation-_GEt49og.cjs} +3 -3
- package/dist/{useClientValidation-NKOuXuHV.cjs.map → useClientValidation-_GEt49og.cjs.map} +1 -1
- package/dist/{useController-B-6PzFna.js → useController-BQ4LoFBd.js} +2 -2
- package/dist/{useController-B-6PzFna.js.map → useController-BQ4LoFBd.js.map} +1 -1
- package/dist/{useController-DVRh86Zy.cjs → useController-lNSzBL-i.cjs} +2 -2
- package/dist/{useController-DVRh86Zy.cjs.map → useController-lNSzBL-i.cjs.map} +1 -1
- package/dist/{useFormContext-Bzpyonu6.js → useFormContext-2vyVWpUJ.js} +2 -2
- package/dist/{useFormContext-Bzpyonu6.js.map → useFormContext-2vyVWpUJ.js.map} +1 -1
- package/dist/{useFormContext-Bum4VP1o.cjs → useFormContext-CNGE9heQ.cjs} +2 -2
- package/dist/{useFormContext-Bum4VP1o.cjs.map → useFormContext-CNGE9heQ.cjs.map} +1 -1
- package/dist/{useInputValueTransform-DKH-7F9D.cjs → useInputValueTransform-5jjQVowe.cjs} +2 -2
- package/dist/{useInputValueTransform-DKH-7F9D.cjs.map → useInputValueTransform-5jjQVowe.cjs.map} +1 -1
- package/dist/{useWatchUserChange-CBuIa5kU.cjs → useWatchUserChange-BSfuusTZ.cjs} +3 -3
- package/dist/{useWatchUserChange-CBuIa5kU.cjs.map → useWatchUserChange-BSfuusTZ.cjs.map} +1 -1
- package/dist/{useWatchUserChange-CLgLc5W4.js → useWatchUserChange-DdmIHIkf.js} +2 -2
- package/dist/{useWatchUserChange-CLgLc5W4.js.map → useWatchUserChange-DdmIHIkf.js.map} +1 -1
- package/package.json +3 -3
- package/dist/FormContext-BrY1FQYR.cjs.map +0 -1
- package/dist/FormContext-CLfMWHQM.js.map +0 -1
- package/dist/Select-BH1Tbqwk.cjs.map +0 -1
- package/dist/Select-CZnEBGdn.js.map +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
require("./FormContext-
|
|
1
|
+
require("./FormContext-Djp8wTG8.cjs");
|
|
2
2
|
let react = require("react");
|
|
3
3
|
//#region src/hooks/useInputValueTransform/useInputValueTransform.ts
|
|
4
4
|
/**
|
|
@@ -113,4 +113,4 @@ Object.defineProperty(exports, "useInputValueTransform", {
|
|
|
113
113
|
}
|
|
114
114
|
});
|
|
115
115
|
|
|
116
|
-
//# sourceMappingURL=useInputValueTransform-
|
|
116
|
+
//# sourceMappingURL=useInputValueTransform-5jjQVowe.cjs.map
|
package/dist/{useInputValueTransform-DKH-7F9D.cjs.map → useInputValueTransform-5jjQVowe.cjs.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useInputValueTransform-
|
|
1
|
+
{"version":3,"file":"useInputValueTransform-5jjQVowe.cjs","names":[],"sources":["../src/hooks/useInputValueTransform/useInputValueTransform.ts"],"sourcesContent":["import { useCallback } from 'react';\n\nexport interface InputValueTransform<TDisplay = unknown> {\n /** Transforms the form value to display value (e.g., 1000 → \"$1,000\" or 'a' → ['a']) */\n toDisplayValue: (value: unknown) => TDisplay;\n /** Transforms the display value to form value (e.g., \"$1,000\" → 1000 or ['a'] → 'a') */\n toFormValue: (value: TDisplay) => unknown;\n}\n\nexport interface UseInputValueTransformOptions<TDisplay = unknown> {\n /** Input type for special number handling */\n type?: 'text' | 'number' | 'password';\n /** Value transformation functions */\n transform?: InputValueTransform<TDisplay>;\n}\n\nexport interface UseInputValueTransformReturn<TDisplay = unknown> {\n /** Converts any form value to display value */\n toDisplayValue: (formValue: unknown) => TDisplay;\n /** Converts any display value to form value */\n toFormValue: (displayValue: TDisplay) => unknown;\n}\n\n/**\n * Custom hook providing utility functions for value transformations between display and form values.\n *\n * This hook provides pure conversion functions without any state management. It's useful for:\n * - Currency formatting ($1,000 display vs 1000 stored)\n * - Number inputs with special handling\n * - Date formatting (MM/DD/YYYY display vs ISO date stored)\n * - Phone number formatting ((555) 123-4567 display vs 5551234567 stored)\n * - Array/Object transformations (single value ↔ array, nested structures)\n *\n * **Key Features:**\n * - Pure conversion functions (no state)\n * - Generic support for any data type (strings, numbers, arrays, objects)\n * - Special number input handling (empty string preservation)\n * - Bidirectional value transformations\n * - Memoized functions for performance\n *\n * @param options Configuration for value transformation\n * @returns Pure conversion utility functions\n *\n * @example\n * ```tsx\n * // Currency formatting\n * const currencyTransform = {\n * toDisplayValue: (val) => val ? `$${Number(val).toLocaleString()}` : '',\n * toFormValue: (val) => parseFloat(val.replace(/[$,]/g, '')) || 0\n * };\n *\n * const { toDisplayValue, toFormValue } = useInputValueTransform({\n * transform: currencyTransform\n * });\n *\n * const displayVal = toDisplayValue(1000); // \"$1,000\"\n * const formVal = toFormValue(\"$1,500\"); // 1500\n * ```\n *\n * @example\n * ```tsx\n * // Number input (no transforms needed)\n * const { toDisplayValue, toFormValue } = useInputValueTransform({\n * type: 'number'\n * });\n *\n * // Handles empty string → empty string (not NaN)\n * // Handles \"123\" → 123 (string to number conversion)\n * ```\n *\n * @example\n * ```tsx\n * // Array to single value (for single checkbox)\n * const singleValueTransform = {\n * toDisplayValue: (val: string[]) => val?.[0] || '',\n * toFormValue: (val: string) => val ? [val] : []\n * };\n *\n * const { toDisplayValue, toFormValue } = useInputValueTransform({\n * transform: singleValueTransform\n * });\n *\n * const displayVal = toDisplayValue(['option1']); // \"option1\"\n * const formVal = toFormValue(\"option2\"); // [\"option2\"]\n * ```\n *\n * @example\n * ```tsx\n * // Integration with debouncing\n * const MyInput = ({ field, transform }) => {\n * const transform = useInputValueTransform({ transform });\n *\n * const { onChange, onBlur, value } = useInputValueDebounce({\n * ...transform,\n * debounceDelay: 300,\n * name: 'fieldName',\n * onBlur: field.onBlur,\n * onChange: field.onChange,\n * value: field.value,\n * });\n *\n * return <input value={value} onChange={onChange} onBlur={onBlur} />;\n * };\n * ```\n */\nexport const useInputValueTransform = <TDisplay = unknown>({\n type,\n transform,\n}: UseInputValueTransformOptions<TDisplay>): UseInputValueTransformReturn<TDisplay> => {\n /**\n * Converts any form value to display value\n */\n const toDisplayValue = useCallback(\n (formValue: unknown): TDisplay => {\n if (transform?.toDisplayValue) {\n return transform.toDisplayValue(formValue);\n }\n\n // For number type, convert valid strings to numbers for display\n if (type === 'number') {\n if (formValue === '') {\n return '' as TDisplay;\n }\n const numValue = Number(formValue);\n return (Number.isNaN(numValue) ? formValue : numValue) as TDisplay;\n }\n\n // Default: pass through (handles primitives, arrays, objects, etc.)\n return (formValue ?? '') as TDisplay;\n },\n [type, transform],\n );\n\n /**\n * Converts any display value to form value\n */\n const toFormValue = useCallback(\n (displayValue: TDisplay): unknown => {\n if (transform?.toFormValue) {\n return transform.toFormValue(displayValue);\n }\n\n // For number type, convert strings to numbers\n if (type === 'number') {\n if (displayValue === '') {\n return '';\n }\n const numValue = Number(displayValue);\n return Number.isNaN(numValue) ? displayValue : numValue;\n }\n\n // Default: pass through (handles primitives, arrays, objects, etc.)\n return displayValue;\n },\n [type, transform],\n );\n\n return {\n toDisplayValue,\n toFormValue,\n };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyGA,MAAa,0BAA8C,EACzD,MACA,gBACqF;CAiDrF,OAAO;EACL,iBAAA,GAAA,MAAA,cA7CC,cAAiC;GAChC,IAAI,WAAW,gBACb,OAAO,UAAU,eAAe,SAAS;GAI3C,IAAI,SAAS,UAAU;IACrB,IAAI,cAAc,IAChB,OAAO;IAET,MAAM,WAAW,OAAO,SAAS;IACjC,OAAQ,OAAO,MAAM,QAAQ,IAAI,YAAY;GAC/C;GAGA,OAAQ,aAAa;EACvB,GACA,CAAC,MAAM,SAAS,CA4BH;EACb,cAAA,GAAA,MAAA,cAtBC,iBAAoC;GACnC,IAAI,WAAW,aACb,OAAO,UAAU,YAAY,YAAY;GAI3C,IAAI,SAAS,UAAU;IACrB,IAAI,iBAAiB,IACnB,OAAO;IAET,MAAM,WAAW,OAAO,YAAY;IACpC,OAAO,OAAO,MAAM,QAAQ,IAAI,eAAe;GACjD;GAGA,OAAO;EACT,GACA,CAAC,MAAM,SAAS,CAKN;CACZ;AACF"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
require("./FormContext-
|
|
2
|
-
const require_useFormContext = require("./useFormContext-
|
|
1
|
+
require("./FormContext-Djp8wTG8.cjs");
|
|
2
|
+
const require_useFormContext = require("./useFormContext-CNGE9heQ.cjs");
|
|
3
3
|
let react = require("react");
|
|
4
4
|
//#region src/hooks/useWatchUserChange/useWatchUserChange.ts
|
|
5
5
|
/**
|
|
@@ -87,4 +87,4 @@ Object.defineProperty(exports, "useWatchUserChange", {
|
|
|
87
87
|
}
|
|
88
88
|
});
|
|
89
89
|
|
|
90
|
-
//# sourceMappingURL=useWatchUserChange-
|
|
90
|
+
//# sourceMappingURL=useWatchUserChange-BSfuusTZ.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useWatchUserChange-
|
|
1
|
+
{"version":3,"file":"useWatchUserChange-BSfuusTZ.cjs","names":["useFormContext"],"sources":["../src/hooks/useWatchUserChange/useWatchUserChange.ts"],"sourcesContent":["import type {\n FieldValues,\n Path,\n UseFormReset,\n UseFormResetField,\n UseFormSetValue,\n} from 'react-hook-form';\n\nimport { useEffect } from 'react';\n\nimport { useFormContext } from '../useFormContext/useFormContext';\n\nexport interface UseWatchUserChangeOptions<TFieldValues extends FieldValues> {\n /** Field name to watch for user changes */\n watch: Path<TFieldValues>;\n /**\n * Callback when watched field is changed by user input.\n * Receives the new value and form helpers (setValue, resetField, reset).\n */\n onChange: (\n value: unknown,\n helpers: {\n setValue: UseFormSetValue<TFieldValues>;\n resetField: UseFormResetField<TFieldValues>;\n reset: UseFormReset<TFieldValues>;\n },\n ) => void;\n}\n\n/**\n * Hook that watches for user changes on a specific form field.\n *\n * Only triggers on manual user input (typing, clicking, selecting),\n * NOT on programmatic changes like form.reset() or form.setValue().\n * Also does NOT trigger when selecting the same value (e.g., clicking\n * an already-selected option in a Select).\n *\n * This hook subscribes to field changes at the source (useController),\n * ensuring immediate and accurate detection of user interactions.\n *\n * Use cases:\n * - Reset dependent fields when parent field changes\n * - Set mode-specific default values when a toggle changes\n * - Clear form sections based on user selections\n * - Trigger side effects only on user interaction\n *\n * Note: To watch multiple fields, call this hook multiple times.\n *\n * @example\n * ```tsx\n * // Reset city and address when user changes country\n * useWatchUserChange({\n * watch: 'country',\n * onChange: (value, { resetField }) => {\n * resetField('city');\n * resetField('address');\n * },\n * });\n *\n * // Set defaults when user changes payment method\n * useWatchUserChange({\n * watch: 'paymentMethod',\n * onChange: (value, { setValue }) => {\n * if (value === 'credit') {\n * setValue('installments', 3);\n * } else {\n * setValue('installments', 1);\n * }\n * },\n * });\n *\n * // Watch multiple fields by calling the hook multiple times\n * useWatchUserChange({\n * watch: 'category',\n * onChange: (value, { resetField }) => {\n * resetField('productId');\n * },\n * });\n * useWatchUserChange({\n * watch: 'brand',\n * onChange: (value, { resetField }) => {\n * resetField('productId');\n * },\n * });\n * ```\n */\nexport const useWatchUserChange = <\n TFieldValues extends FieldValues = FieldValues,\n>({\n watch: watchField,\n onChange,\n}: UseWatchUserChangeOptions<TFieldValues>) => {\n const { setValue, resetField, reset, userChange } =\n useFormContext<TFieldValues>();\n\n useEffect(() => {\n // Create listener that checks if changed field is the one we're watching\n const listener = (fieldName: Path<TFieldValues>, value: unknown) => {\n // Check if this is the field we're watching\n if (fieldName === watchField) {\n // Call the onChange callback with helpers\n onChange(value, { setValue, resetField, reset });\n }\n };\n\n // Subscribe to user changes\n const unsubscribe = userChange.subscribe(listener);\n\n // Cleanup on unmount\n return unsubscribe;\n }, [watchField, onChange, setValue, resetField, reset, userChange]);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsFA,MAAa,sBAEX,EACA,OAAO,YACP,eAC6C;CAC7C,MAAM,EAAE,UAAU,YAAY,OAAO,eACnCA,uBAAAA,eAA6B;CAE/B,CAAA,GAAA,MAAA,iBAAgB;EAEd,MAAM,YAAY,WAA+B,UAAmB;GAElE,IAAI,cAAc,YAEhB,SAAS,OAAO;IAAE;IAAU;IAAY;GAAM,CAAC;EAEnD;EAMA,OAHoB,WAAW,UAAU,QAGxB;CACnB,GAAG;EAAC;EAAY;EAAU;EAAU;EAAY;EAAO;CAAU,CAAC;AACpE"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { n as useFormContext } from "./useFormContext-
|
|
1
|
+
import { n as useFormContext } from "./useFormContext-2vyVWpUJ.js";
|
|
2
2
|
import { useEffect } from "react";
|
|
3
3
|
//#region src/hooks/useWatchUserChange/useWatchUserChange.ts
|
|
4
4
|
/**
|
|
@@ -81,4 +81,4 @@ const useWatchUserChange = ({ watch: watchField, onChange }) => {
|
|
|
81
81
|
//#endregion
|
|
82
82
|
export { useWatchUserChange as t };
|
|
83
83
|
|
|
84
|
-
//# sourceMappingURL=useWatchUserChange-
|
|
84
|
+
//# sourceMappingURL=useWatchUserChange-DdmIHIkf.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useWatchUserChange-
|
|
1
|
+
{"version":3,"file":"useWatchUserChange-DdmIHIkf.js","names":[],"sources":["../src/hooks/useWatchUserChange/useWatchUserChange.ts"],"sourcesContent":["import type {\n FieldValues,\n Path,\n UseFormReset,\n UseFormResetField,\n UseFormSetValue,\n} from 'react-hook-form';\n\nimport { useEffect } from 'react';\n\nimport { useFormContext } from '../useFormContext/useFormContext';\n\nexport interface UseWatchUserChangeOptions<TFieldValues extends FieldValues> {\n /** Field name to watch for user changes */\n watch: Path<TFieldValues>;\n /**\n * Callback when watched field is changed by user input.\n * Receives the new value and form helpers (setValue, resetField, reset).\n */\n onChange: (\n value: unknown,\n helpers: {\n setValue: UseFormSetValue<TFieldValues>;\n resetField: UseFormResetField<TFieldValues>;\n reset: UseFormReset<TFieldValues>;\n },\n ) => void;\n}\n\n/**\n * Hook that watches for user changes on a specific form field.\n *\n * Only triggers on manual user input (typing, clicking, selecting),\n * NOT on programmatic changes like form.reset() or form.setValue().\n * Also does NOT trigger when selecting the same value (e.g., clicking\n * an already-selected option in a Select).\n *\n * This hook subscribes to field changes at the source (useController),\n * ensuring immediate and accurate detection of user interactions.\n *\n * Use cases:\n * - Reset dependent fields when parent field changes\n * - Set mode-specific default values when a toggle changes\n * - Clear form sections based on user selections\n * - Trigger side effects only on user interaction\n *\n * Note: To watch multiple fields, call this hook multiple times.\n *\n * @example\n * ```tsx\n * // Reset city and address when user changes country\n * useWatchUserChange({\n * watch: 'country',\n * onChange: (value, { resetField }) => {\n * resetField('city');\n * resetField('address');\n * },\n * });\n *\n * // Set defaults when user changes payment method\n * useWatchUserChange({\n * watch: 'paymentMethod',\n * onChange: (value, { setValue }) => {\n * if (value === 'credit') {\n * setValue('installments', 3);\n * } else {\n * setValue('installments', 1);\n * }\n * },\n * });\n *\n * // Watch multiple fields by calling the hook multiple times\n * useWatchUserChange({\n * watch: 'category',\n * onChange: (value, { resetField }) => {\n * resetField('productId');\n * },\n * });\n * useWatchUserChange({\n * watch: 'brand',\n * onChange: (value, { resetField }) => {\n * resetField('productId');\n * },\n * });\n * ```\n */\nexport const useWatchUserChange = <\n TFieldValues extends FieldValues = FieldValues,\n>({\n watch: watchField,\n onChange,\n}: UseWatchUserChangeOptions<TFieldValues>) => {\n const { setValue, resetField, reset, userChange } =\n useFormContext<TFieldValues>();\n\n useEffect(() => {\n // Create listener that checks if changed field is the one we're watching\n const listener = (fieldName: Path<TFieldValues>, value: unknown) => {\n // Check if this is the field we're watching\n if (fieldName === watchField) {\n // Call the onChange callback with helpers\n onChange(value, { setValue, resetField, reset });\n }\n };\n\n // Subscribe to user changes\n const unsubscribe = userChange.subscribe(listener);\n\n // Cleanup on unmount\n return unsubscribe;\n }, [watchField, onChange, setValue, resetField, reset, userChange]);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsFA,MAAa,sBAEX,EACA,OAAO,YACP,eAC6C;CAC7C,MAAM,EAAE,UAAU,YAAY,OAAO,eACnC,eAA6B;CAE/B,gBAAgB;EAEd,MAAM,YAAY,WAA+B,UAAmB;GAElE,IAAI,cAAc,YAEhB,SAAS,OAAO;IAAE;IAAU;IAAY;GAAM,CAAC;EAEnD;EAMA,OAHoB,WAAW,UAAU,QAGxB;CACnB,GAAG;EAAC;EAAY;EAAU;EAAU;EAAY;EAAO;CAAU,CAAC;AACpE"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fuf-stack/uniform",
|
|
3
|
-
"version": "1.20.
|
|
3
|
+
"version": "1.20.14",
|
|
4
4
|
"description": "fuf react form library",
|
|
5
5
|
"author": "Fröhlich ∧ Frei",
|
|
6
6
|
"homepage": "https://github.com/fuf-stack/pixels#readme",
|
|
@@ -156,7 +156,7 @@
|
|
|
156
156
|
"@fuf-stack/pixel-motion": "1.2.0",
|
|
157
157
|
"@fuf-stack/pixel-utils": "1.3.0",
|
|
158
158
|
"@fuf-stack/pixels": "1.10.1",
|
|
159
|
-
"@fuf-stack/veto": "1.
|
|
159
|
+
"@fuf-stack/veto": "1.7.0",
|
|
160
160
|
"@heroui/button": "2.2.32",
|
|
161
161
|
"@heroui/checkbox": "2.3.32",
|
|
162
162
|
"@heroui/input": "2.4.33",
|
|
@@ -181,5 +181,5 @@
|
|
|
181
181
|
"react": "19.2.6",
|
|
182
182
|
"react-dom": "19.2.6"
|
|
183
183
|
},
|
|
184
|
-
"gitHead": "
|
|
184
|
+
"gitHead": "79c7504092e6aaaf77230674fc7ac8d0e61f4456"
|
|
185
185
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FormContext-BrY1FQYR.cjs","names":["toValidationFormat","debug","React","toFormFormat","toSubmitFormat","HookFormProvider"],"sources":["../src/Form/subcomponents/FormResolver.ts","../src/Form/subcomponents/FormContext.tsx"],"sourcesContent":["import type {\n VetoFormattedError,\n VetoInstance,\n VetoTypeAny,\n} from '@fuf-stack/veto';\nimport type { FieldValues } from 'react-hook-form';\n\nimport { useMemo, useRef, useState } from 'react';\n\nimport { and, veto } from '@fuf-stack/veto';\n\nimport { toValidationFormat } from '../../helpers';\n\n/**\n * Hook that manages client validation schemas state.\n *\n * Provides a centralized way to add/remove dynamic validation schemas\n * that can be combined with base form validation.\n *\n * @returns Object with client validation state and memoized setter function\n */\nexport const useClientValidationManager = () => {\n // Client validation schemas state\n const [clientValidationSchemas, setClientValidationSchemas] = useState<\n Record<string, VetoTypeAny>\n >({});\n\n // Memoized function to set/clear client validation schema\n const setClientValidationSchema = useMemo(() => {\n return (key: string, schema: VetoTypeAny | null) => {\n // update client validation schemas\n setClientValidationSchemas((prev) => {\n // if no schema and no existing client validation schema for this key, do nothing\n if (!prev[key] && !schema) {\n return prev;\n }\n // if no schema, remove the client validation schema for this key\n if (!schema) {\n const { [key]: _removed, ...rest } = prev;\n return rest;\n }\n // if schema, add or update the client validation schema for this key\n return { ...prev, [key]: schema };\n });\n };\n }, []);\n\n return {\n clientValidationSchemas,\n setClientValidationSchema,\n };\n};\n\n/**\n * Hook that creates an extended validation instance combining base Veto validation with dynamic client validation.\n *\n * @param baseValidation - Optional base Veto validation schema\n * @returns Combined validation instance and client schema setter\n */\nexport const useExtendedValidation = (baseValidation?: VetoInstance) => {\n // Setup client validation schemas\n const { clientValidationSchemas, setClientValidationSchema } =\n useClientValidationManager();\n\n // Create a stable dependency array from the client validation schemas\n const clientSchemaValues = useMemo(\n () => {\n const keys = Object.keys(clientValidationSchemas).sort();\n return keys\n .map((key) => {\n return clientValidationSchemas[key];\n })\n .filter(Boolean);\n },\n // Include the object identity to react to schema instance updates with same shape\n [clientValidationSchemas],\n );\n\n // Memoized extended validation instance\n const extendedValidation = useMemo(\n () => {\n const hasBaseValidation = !!baseValidation;\n const hasClientSchemas = clientSchemaValues.length > 0;\n\n // If no base validation and no client schemas, return undefined\n if (!hasBaseValidation && !hasClientSchemas) {\n return undefined;\n }\n\n // If no client schemas, return base validation\n if (!hasClientSchemas) {\n return baseValidation;\n }\n\n // Combine client validation schemas\n const clientSchemasCombined = clientSchemaValues.reduce(\n // @ts-expect-error is ok, because initially it is null\n (combined, clientSchema) => {\n return combined ? and(combined, clientSchema) : clientSchema;\n },\n null,\n );\n\n // return combined validation\n if (hasBaseValidation && clientSchemasCombined) {\n return veto(and(baseValidation.schema, clientSchemasCombined));\n }\n\n // If we only have client schemas, return them as a veto instance\n if (clientSchemasCombined) {\n return veto(clientSchemasCombined);\n }\n\n // This should not happen due to the conditions above, but just in case\n return baseValidation;\n },\n // Recompute when validation schema instances change\n [baseValidation, clientSchemaValues],\n );\n\n return {\n extendedValidation,\n setClientValidationSchema,\n };\n};\n\n/**\n * Hook that creates a React Hook Form resolver from an extended validation instance.\n *\n * @param extendedValidation - Extended validation instance from useExtendedValidation\n * @returns Object containing resolver function, current validation errors, and optimization hash\n */\nexport const useFormResolver = (extendedValidation?: VetoInstance) => {\n // Use ref to store validation errors without triggering re-renders\n const validationErrors = useRef<VetoFormattedError>(undefined);\n\n // Memoized resolver function for React Hook Form\n const resolver = useMemo(() => {\n if (!extendedValidation) {\n return undefined;\n }\n\n return async (values: FieldValues) => {\n const validationValues = toValidationFormat(values) ?? {};\n const result = await extendedValidation.validateAsync(validationValues);\n validationErrors.current = result.errors ?? undefined;\n\n // Transform veto result to React Hook Form format\n return {\n values: result.data ?? {},\n errors: result.errors ?? {},\n };\n };\n }, [extendedValidation]);\n\n // Hash for memo dependency optimization in consuming components\n const validationErrorsHash = JSON.stringify(validationErrors.current);\n\n return {\n resolver,\n validationErrors: validationErrors.current,\n validationErrorsHash,\n };\n};\n","import type {\n VetoFormattedError,\n VetoInstance,\n VetoTypeAny,\n} from '@fuf-stack/veto';\nimport type { BaseSyntheticEvent, ReactNode } from 'react';\nimport type { FieldValues, Path, SubmitHandler } from 'react-hook-form';\n\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { FormProvider as HookFormProvider, useForm } from 'react-hook-form';\n\nimport createDebug from 'debug';\n\nimport { useLocalStorage } from '@fuf-stack/pixels';\n\nimport { toFormFormat, toSubmitFormat } from '../../helpers';\nimport { useExtendedValidation, useFormResolver } from './FormResolver';\n\nconst debug = createDebug('uniform:FormContext');\n\ntype DebugMode = 'debug' | 'debug-testids' | 'off' | 'disabled';\n\nexport interface DebugModeSettings {\n /** disable form debug completely */\n disable?: boolean;\n /** custom localStorage key to save debug mode state */\n localStorageKey?: string;\n}\n\n/**\n * Listener function that gets called when a field changes due to user input\n */\nexport type UserChangeListener<TFieldValues extends object = object> = (\n fieldName: Path<TFieldValues>,\n value: unknown,\n) => void;\n\nconst DEBUG_MODE_LOCAL_STORAGE_KEY_DEFAULT = 'uniform:debug-mode';\n\n/**\n * The `UniformContext` provides control over the form's submission behavior and may optionally include\n * a Veto validation schema for form validation.\n *\n * Specifically, this context offers:\n * 1. **Form Submission Control**: The `preventSubmit` function allows components to enable or disable\n * form submissions.\n * 2. **Optional Validation Schema**: The `validation` property may hold a Veto validation schema instance\n * that can be used to validate form fields and handle validation logic.\n * 3. **Client Validation**: The `setClientValidationSchema` function allows setting dynamic client-side\n * validation schemas that complement the base Veto validation.\n * 4. **User Change Tracking**: The `userChange` property provides a pub/sub system for tracking\n * user-initiated field changes (typing, clicking, selecting) - NOT programmatic changes like\n * form.reset() or form.setValue(). Used by the `useWatchUserChange` hook to enable reactive\n * field dependencies.\n *\n * This context is useful for components that need to interact with or control the form submission state,\n * or access the validation schema for managing form validation logic.\n *\n * IMPORTANT: Context Singleton Pattern for HMR (Hot Module Replacement)\n * =====================================================================\n *\n * We use a global window variable to ensure only ONE context instance exists across\n * hot module reloads during development. This is critical because:\n *\n * **The Problem:**\n * When using Vite/Storybook with Fast Refresh (HMR), editing this file causes it to\n * be re-evaluated. Each re-evaluation runs `React.createContext()` again, creating a\n * NEW context instance. This leads to \"context instance mismatch\":\n *\n * 1. FormProvider (provider) loads and uses context instance A\n * 2. File is edited, HMR triggers\n * 3. SubmitButton (consumer) hot-reloads and imports context instance B\n * 4. Provider writes to instance A, Consumer reads from instance B\n * 5. Result: Consumer sees default values (triggerSubmit = () => undefined)\n * 6. Clicking submit does nothing because it calls the empty default function\n *\n * **The Solution:**\n * By storing the context in `window.__UNIFORM_CONTEXT__`, we ensure:\n * - First load: Create context and store in window\n * - Subsequent HMRs: Reuse the same context from window\n * - All components always reference the SAME context instance\n * - Provider and consumers can properly communicate\n *\n * **Why This Is Safe:**\n * - Only affects development (production has no HMR)\n * - Context type never changes (same interface)\n * - React handles cleanup on unmount normally\n * - No memory leaks (context is lightweight)\n *\n * Without this pattern, you'd need to restart the dev server after every edit\n * to FormContext.tsx to ensure all components use the same context instance.\n */\n\n// Define the context type\ninterface UniformContextType {\n /** Form debug mode enabled or not */\n debugMode: DebugMode;\n /** settings for from debug mode */\n debugModeSettings?: DebugModeSettings;\n /** Function to update if the form can currently be submitted */\n preventSubmit: (prevent: boolean) => void;\n /** Setter to enable or disable form debug mode */\n setDebugMode: (debugMode: DebugMode) => void;\n /** Function to trigger form submit programmatically */\n triggerSubmit: (e?: BaseSyntheticEvent) => Promise<void> | void;\n /** User change tracking (user input only, not programmatic changes) */\n userChange: {\n /**\n * Subscribe to user field changes.\n * Returns an unsubscribe function.\n */\n subscribe: (listener: UserChangeListener) => () => void;\n /**\n * Notify all subscribers about a user field change.\n * Called from useController when user interacts with a field.\n */\n notify: (fieldName: string, value: unknown) => void;\n };\n /** Form validation configuration */\n validation: {\n /** Base validation schema instance (without client validation) */\n baseInstance?: VetoInstance;\n /** Veto validation schema instance for form validation */\n instance?: VetoInstance;\n /** Current validation errors in form */\n errors?: VetoFormattedError;\n /** Function to set client validation schema for a specific key */\n setClientValidationSchema: (\n key: string,\n schema: VetoTypeAny | null,\n ) => void;\n };\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nif (!(window as any).__UNIFORM_CONTEXT__) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (window as any).__UNIFORM_CONTEXT__ = React.createContext<UniformContextType>(\n {\n debugMode: 'off',\n preventSubmit: () => {\n return undefined;\n },\n setDebugMode: () => {\n return undefined;\n },\n triggerSubmit: () => {\n return undefined;\n },\n userChange: {\n subscribe: () => {\n return () => {\n return undefined;\n };\n },\n notify: () => {\n return undefined;\n },\n },\n validation: {\n setClientValidationSchema: () => {\n return undefined;\n },\n },\n },\n );\n debug('Creating new UniformContext instance');\n} else {\n debug(\n 'Reusing existing UniformContext instance from window.__UNIFORM_CONTEXT__',\n );\n}\n\n// Export the singleton context instance from window\n// This ensures all imports get the same context, even after HMR\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const UniformContext = (window as any)\n .__UNIFORM_CONTEXT__ as React.Context<UniformContextType>;\n\ndebug('UniformContext exported', {\n contextExists: !!UniformContext,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n windowContextExists: !!(window as any).__UNIFORM_CONTEXT__,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n contextsMatch: UniformContext === (window as any).__UNIFORM_CONTEXT__,\n});\n\n// Define props for the FormProvider component, extending HookForm's props\ninterface FormProviderProps {\n /** children form render function */\n children: (childProps: {\n handleSubmit: (e?: BaseSyntheticEvent) => Promise<void>;\n isValid: boolean;\n }) => ReactNode;\n /** settings for from debug mode */\n debugModeSettings?: DebugModeSettings;\n /** initial form values */\n initialValues?: FieldValues;\n /** form submit handler */\n onSubmit: SubmitHandler<FieldValues>;\n /** Veto validation schema instance */\n validation?: VetoInstance;\n /** when the validation should be triggered */\n validationTrigger: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\n/**\n * FormProvider component provides:\n * - Veto validation schema context\n * - Client validation schema management\n * - Submit handler with automatic data conversion and submission control with preventSubmit\n * - Form Debug Mode state\n * - React Hook Form context\n */\nconst FormProvider: React.FC<FormProviderProps> = ({\n children,\n debugModeSettings = undefined,\n initialValues = undefined,\n onSubmit,\n validation: baseValidation = undefined,\n validationTrigger,\n}) => {\n // Form Debug mode state is handled in the form context\n const [debugMode, setDebugMode] = useLocalStorage<DebugMode>(\n debugModeSettings?.localStorageKey ?? DEBUG_MODE_LOCAL_STORAGE_KEY_DEFAULT,\n 'off',\n );\n\n // Create extended validation combining base + client validations\n const { extendedValidation, setClientValidationSchema } =\n useExtendedValidation(baseValidation);\n\n // Create resolver from extended validation + get current validation errors\n const { resolver, validationErrors, validationErrorsHash } =\n useFormResolver(extendedValidation);\n\n // Initialize react hook form with the resolver\n const methods = useForm({\n defaultValues: initialValues ? toFormFormat(initialValues) : initialValues,\n // set rhf mode\n // see: https://react-hook-form.com/docs/useform#mode\n mode: validationTrigger,\n resolver,\n });\n\n // Get isValid from React Hook Form's formState\n const isValid = methods.formState?.isValid;\n\n // Control if the form can currently be submitted\n const [preventSubmit, setPreventSubmit] = useState(false);\n\n // User change listener registry (stored in ref to avoid re-renders)\n const userChangeListenersRef = useRef<Set<UserChangeListener>>(new Set());\n\n // Subscribe to user changes\n const subscribeUserChange = useCallback(\n (listener: UserChangeListener): (() => void) => {\n userChangeListenersRef.current.add(listener);\n // Return cleanup function to unsubscribe\n return () => {\n userChangeListenersRef.current.delete(listener);\n };\n },\n [],\n );\n\n // Notify all subscribers about user change\n const notifyUserChange = useCallback(\n (fieldName: string, value: unknown): void => {\n // Notify all registered listeners\n userChangeListenersRef.current.forEach((listener) => {\n listener(fieldName as Path<object>, value);\n });\n },\n [],\n );\n\n // Create submit handler with automatic data conversion\n // eslint-disable-next-line consistent-return\n const handleSubmit = async (e?: React.BaseSyntheticEvent) => {\n debug('handleSubmit called', {\n preventSubmit,\n formStateIsValid: methods.formState.isValid,\n validationErrors: methods.formState.errors,\n validationTrigger,\n formValues: methods.getValues(),\n });\n\n // only prevent submit when form state is valid, because otherwise\n // submit will only trigger validation and add errors / focus invalid fields\n if (methods.formState.isValid && preventSubmit) {\n debug('⛔ Form submit PREVENTED', {\n formStateIsValid: methods.formState.isValid,\n preventSubmit,\n });\n console.warn(\n '[FormProvider] form submit was prevented because preventSubmit is true...',\n );\n e?.preventDefault();\n return Promise.resolve();\n }\n\n debug('✓ Form submit ALLOWED', {\n formStateIsValid: methods.formState.isValid,\n preventSubmit,\n reason: !methods.formState.isValid\n ? 'Form is invalid (will trigger validation and show errors)'\n : 'Form is valid and preventSubmit is false',\n });\n\n // Convert form data to submission format:\n // - Unwrap flat array wrappers and convert markers\n // - Remove empty strings, nulls, empty arrays, and empty objects\n const wrappedOnSubmit = (data: FieldValues, event?: BaseSyntheticEvent) => {\n const submitData = toSubmitFormat(data) ?? {};\n debug('onSubmit callback called', { submitData });\n return onSubmit(submitData, event);\n };\n\n await methods.handleSubmit(wrappedOnSubmit)(e);\n\n debug('handleSubmit completed');\n };\n\n // Memoize the context value to prevent re-renders\n const contextValue = useMemo(\n () => {\n return {\n // set debugMode to disabled when debugModeSettings.disable is true\n // otherwise use current debug mode from localStorage\n debugMode: debugModeSettings?.disable ? 'disabled' : debugMode,\n preventSubmit: (prevent: boolean) => {\n debug('preventSubmit called', {\n previousValue: preventSubmit,\n newValue: prevent,\n formStateIsValid: methods.formState.isValid,\n validationErrors: methods.formState.errors,\n });\n setPreventSubmit(prevent);\n },\n setClientValidationSchema,\n setDebugMode,\n triggerSubmit: handleSubmit,\n userChange: {\n subscribe: subscribeUserChange,\n notify: notifyUserChange,\n },\n validation: {\n baseInstance: baseValidation,\n instance: extendedValidation,\n errors: validationErrors,\n setClientValidationSchema,\n },\n };\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [debugMode, debugModeSettings?.disable, validationErrorsHash],\n );\n\n return (\n <UniformContext.Provider value={contextValue}>\n {/* Spread all hook form props into HookFormProvider */}\n <HookFormProvider {...methods}>\n {children({ handleSubmit, isValid })}\n </HookFormProvider>\n </UniformContext.Provider>\n );\n};\n\nexport default FormProvider;\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FormContext-CLfMWHQM.js","names":["FormProvider","HookFormProvider"],"sources":["../src/Form/subcomponents/FormResolver.ts","../src/Form/subcomponents/FormContext.tsx"],"sourcesContent":["import type {\n VetoFormattedError,\n VetoInstance,\n VetoTypeAny,\n} from '@fuf-stack/veto';\nimport type { FieldValues } from 'react-hook-form';\n\nimport { useMemo, useRef, useState } from 'react';\n\nimport { and, veto } from '@fuf-stack/veto';\n\nimport { toValidationFormat } from '../../helpers';\n\n/**\n * Hook that manages client validation schemas state.\n *\n * Provides a centralized way to add/remove dynamic validation schemas\n * that can be combined with base form validation.\n *\n * @returns Object with client validation state and memoized setter function\n */\nexport const useClientValidationManager = () => {\n // Client validation schemas state\n const [clientValidationSchemas, setClientValidationSchemas] = useState<\n Record<string, VetoTypeAny>\n >({});\n\n // Memoized function to set/clear client validation schema\n const setClientValidationSchema = useMemo(() => {\n return (key: string, schema: VetoTypeAny | null) => {\n // update client validation schemas\n setClientValidationSchemas((prev) => {\n // if no schema and no existing client validation schema for this key, do nothing\n if (!prev[key] && !schema) {\n return prev;\n }\n // if no schema, remove the client validation schema for this key\n if (!schema) {\n const { [key]: _removed, ...rest } = prev;\n return rest;\n }\n // if schema, add or update the client validation schema for this key\n return { ...prev, [key]: schema };\n });\n };\n }, []);\n\n return {\n clientValidationSchemas,\n setClientValidationSchema,\n };\n};\n\n/**\n * Hook that creates an extended validation instance combining base Veto validation with dynamic client validation.\n *\n * @param baseValidation - Optional base Veto validation schema\n * @returns Combined validation instance and client schema setter\n */\nexport const useExtendedValidation = (baseValidation?: VetoInstance) => {\n // Setup client validation schemas\n const { clientValidationSchemas, setClientValidationSchema } =\n useClientValidationManager();\n\n // Create a stable dependency array from the client validation schemas\n const clientSchemaValues = useMemo(\n () => {\n const keys = Object.keys(clientValidationSchemas).sort();\n return keys\n .map((key) => {\n return clientValidationSchemas[key];\n })\n .filter(Boolean);\n },\n // Include the object identity to react to schema instance updates with same shape\n [clientValidationSchemas],\n );\n\n // Memoized extended validation instance\n const extendedValidation = useMemo(\n () => {\n const hasBaseValidation = !!baseValidation;\n const hasClientSchemas = clientSchemaValues.length > 0;\n\n // If no base validation and no client schemas, return undefined\n if (!hasBaseValidation && !hasClientSchemas) {\n return undefined;\n }\n\n // If no client schemas, return base validation\n if (!hasClientSchemas) {\n return baseValidation;\n }\n\n // Combine client validation schemas\n const clientSchemasCombined = clientSchemaValues.reduce(\n // @ts-expect-error is ok, because initially it is null\n (combined, clientSchema) => {\n return combined ? and(combined, clientSchema) : clientSchema;\n },\n null,\n );\n\n // return combined validation\n if (hasBaseValidation && clientSchemasCombined) {\n return veto(and(baseValidation.schema, clientSchemasCombined));\n }\n\n // If we only have client schemas, return them as a veto instance\n if (clientSchemasCombined) {\n return veto(clientSchemasCombined);\n }\n\n // This should not happen due to the conditions above, but just in case\n return baseValidation;\n },\n // Recompute when validation schema instances change\n [baseValidation, clientSchemaValues],\n );\n\n return {\n extendedValidation,\n setClientValidationSchema,\n };\n};\n\n/**\n * Hook that creates a React Hook Form resolver from an extended validation instance.\n *\n * @param extendedValidation - Extended validation instance from useExtendedValidation\n * @returns Object containing resolver function, current validation errors, and optimization hash\n */\nexport const useFormResolver = (extendedValidation?: VetoInstance) => {\n // Use ref to store validation errors without triggering re-renders\n const validationErrors = useRef<VetoFormattedError>(undefined);\n\n // Memoized resolver function for React Hook Form\n const resolver = useMemo(() => {\n if (!extendedValidation) {\n return undefined;\n }\n\n return async (values: FieldValues) => {\n const validationValues = toValidationFormat(values) ?? {};\n const result = await extendedValidation.validateAsync(validationValues);\n validationErrors.current = result.errors ?? undefined;\n\n // Transform veto result to React Hook Form format\n return {\n values: result.data ?? {},\n errors: result.errors ?? {},\n };\n };\n }, [extendedValidation]);\n\n // Hash for memo dependency optimization in consuming components\n const validationErrorsHash = JSON.stringify(validationErrors.current);\n\n return {\n resolver,\n validationErrors: validationErrors.current,\n validationErrorsHash,\n };\n};\n","import type {\n VetoFormattedError,\n VetoInstance,\n VetoTypeAny,\n} from '@fuf-stack/veto';\nimport type { BaseSyntheticEvent, ReactNode } from 'react';\nimport type { FieldValues, Path, SubmitHandler } from 'react-hook-form';\n\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { FormProvider as HookFormProvider, useForm } from 'react-hook-form';\n\nimport createDebug from 'debug';\n\nimport { useLocalStorage } from '@fuf-stack/pixels';\n\nimport { toFormFormat, toSubmitFormat } from '../../helpers';\nimport { useExtendedValidation, useFormResolver } from './FormResolver';\n\nconst debug = createDebug('uniform:FormContext');\n\ntype DebugMode = 'debug' | 'debug-testids' | 'off' | 'disabled';\n\nexport interface DebugModeSettings {\n /** disable form debug completely */\n disable?: boolean;\n /** custom localStorage key to save debug mode state */\n localStorageKey?: string;\n}\n\n/**\n * Listener function that gets called when a field changes due to user input\n */\nexport type UserChangeListener<TFieldValues extends object = object> = (\n fieldName: Path<TFieldValues>,\n value: unknown,\n) => void;\n\nconst DEBUG_MODE_LOCAL_STORAGE_KEY_DEFAULT = 'uniform:debug-mode';\n\n/**\n * The `UniformContext` provides control over the form's submission behavior and may optionally include\n * a Veto validation schema for form validation.\n *\n * Specifically, this context offers:\n * 1. **Form Submission Control**: The `preventSubmit` function allows components to enable or disable\n * form submissions.\n * 2. **Optional Validation Schema**: The `validation` property may hold a Veto validation schema instance\n * that can be used to validate form fields and handle validation logic.\n * 3. **Client Validation**: The `setClientValidationSchema` function allows setting dynamic client-side\n * validation schemas that complement the base Veto validation.\n * 4. **User Change Tracking**: The `userChange` property provides a pub/sub system for tracking\n * user-initiated field changes (typing, clicking, selecting) - NOT programmatic changes like\n * form.reset() or form.setValue(). Used by the `useWatchUserChange` hook to enable reactive\n * field dependencies.\n *\n * This context is useful for components that need to interact with or control the form submission state,\n * or access the validation schema for managing form validation logic.\n *\n * IMPORTANT: Context Singleton Pattern for HMR (Hot Module Replacement)\n * =====================================================================\n *\n * We use a global window variable to ensure only ONE context instance exists across\n * hot module reloads during development. This is critical because:\n *\n * **The Problem:**\n * When using Vite/Storybook with Fast Refresh (HMR), editing this file causes it to\n * be re-evaluated. Each re-evaluation runs `React.createContext()` again, creating a\n * NEW context instance. This leads to \"context instance mismatch\":\n *\n * 1. FormProvider (provider) loads and uses context instance A\n * 2. File is edited, HMR triggers\n * 3. SubmitButton (consumer) hot-reloads and imports context instance B\n * 4. Provider writes to instance A, Consumer reads from instance B\n * 5. Result: Consumer sees default values (triggerSubmit = () => undefined)\n * 6. Clicking submit does nothing because it calls the empty default function\n *\n * **The Solution:**\n * By storing the context in `window.__UNIFORM_CONTEXT__`, we ensure:\n * - First load: Create context and store in window\n * - Subsequent HMRs: Reuse the same context from window\n * - All components always reference the SAME context instance\n * - Provider and consumers can properly communicate\n *\n * **Why This Is Safe:**\n * - Only affects development (production has no HMR)\n * - Context type never changes (same interface)\n * - React handles cleanup on unmount normally\n * - No memory leaks (context is lightweight)\n *\n * Without this pattern, you'd need to restart the dev server after every edit\n * to FormContext.tsx to ensure all components use the same context instance.\n */\n\n// Define the context type\ninterface UniformContextType {\n /** Form debug mode enabled or not */\n debugMode: DebugMode;\n /** settings for from debug mode */\n debugModeSettings?: DebugModeSettings;\n /** Function to update if the form can currently be submitted */\n preventSubmit: (prevent: boolean) => void;\n /** Setter to enable or disable form debug mode */\n setDebugMode: (debugMode: DebugMode) => void;\n /** Function to trigger form submit programmatically */\n triggerSubmit: (e?: BaseSyntheticEvent) => Promise<void> | void;\n /** User change tracking (user input only, not programmatic changes) */\n userChange: {\n /**\n * Subscribe to user field changes.\n * Returns an unsubscribe function.\n */\n subscribe: (listener: UserChangeListener) => () => void;\n /**\n * Notify all subscribers about a user field change.\n * Called from useController when user interacts with a field.\n */\n notify: (fieldName: string, value: unknown) => void;\n };\n /** Form validation configuration */\n validation: {\n /** Base validation schema instance (without client validation) */\n baseInstance?: VetoInstance;\n /** Veto validation schema instance for form validation */\n instance?: VetoInstance;\n /** Current validation errors in form */\n errors?: VetoFormattedError;\n /** Function to set client validation schema for a specific key */\n setClientValidationSchema: (\n key: string,\n schema: VetoTypeAny | null,\n ) => void;\n };\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nif (!(window as any).__UNIFORM_CONTEXT__) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (window as any).__UNIFORM_CONTEXT__ = React.createContext<UniformContextType>(\n {\n debugMode: 'off',\n preventSubmit: () => {\n return undefined;\n },\n setDebugMode: () => {\n return undefined;\n },\n triggerSubmit: () => {\n return undefined;\n },\n userChange: {\n subscribe: () => {\n return () => {\n return undefined;\n };\n },\n notify: () => {\n return undefined;\n },\n },\n validation: {\n setClientValidationSchema: () => {\n return undefined;\n },\n },\n },\n );\n debug('Creating new UniformContext instance');\n} else {\n debug(\n 'Reusing existing UniformContext instance from window.__UNIFORM_CONTEXT__',\n );\n}\n\n// Export the singleton context instance from window\n// This ensures all imports get the same context, even after HMR\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const UniformContext = (window as any)\n .__UNIFORM_CONTEXT__ as React.Context<UniformContextType>;\n\ndebug('UniformContext exported', {\n contextExists: !!UniformContext,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n windowContextExists: !!(window as any).__UNIFORM_CONTEXT__,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n contextsMatch: UniformContext === (window as any).__UNIFORM_CONTEXT__,\n});\n\n// Define props for the FormProvider component, extending HookForm's props\ninterface FormProviderProps {\n /** children form render function */\n children: (childProps: {\n handleSubmit: (e?: BaseSyntheticEvent) => Promise<void>;\n isValid: boolean;\n }) => ReactNode;\n /** settings for from debug mode */\n debugModeSettings?: DebugModeSettings;\n /** initial form values */\n initialValues?: FieldValues;\n /** form submit handler */\n onSubmit: SubmitHandler<FieldValues>;\n /** Veto validation schema instance */\n validation?: VetoInstance;\n /** when the validation should be triggered */\n validationTrigger: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\n/**\n * FormProvider component provides:\n * - Veto validation schema context\n * - Client validation schema management\n * - Submit handler with automatic data conversion and submission control with preventSubmit\n * - Form Debug Mode state\n * - React Hook Form context\n */\nconst FormProvider: React.FC<FormProviderProps> = ({\n children,\n debugModeSettings = undefined,\n initialValues = undefined,\n onSubmit,\n validation: baseValidation = undefined,\n validationTrigger,\n}) => {\n // Form Debug mode state is handled in the form context\n const [debugMode, setDebugMode] = useLocalStorage<DebugMode>(\n debugModeSettings?.localStorageKey ?? DEBUG_MODE_LOCAL_STORAGE_KEY_DEFAULT,\n 'off',\n );\n\n // Create extended validation combining base + client validations\n const { extendedValidation, setClientValidationSchema } =\n useExtendedValidation(baseValidation);\n\n // Create resolver from extended validation + get current validation errors\n const { resolver, validationErrors, validationErrorsHash } =\n useFormResolver(extendedValidation);\n\n // Initialize react hook form with the resolver\n const methods = useForm({\n defaultValues: initialValues ? toFormFormat(initialValues) : initialValues,\n // set rhf mode\n // see: https://react-hook-form.com/docs/useform#mode\n mode: validationTrigger,\n resolver,\n });\n\n // Get isValid from React Hook Form's formState\n const isValid = methods.formState?.isValid;\n\n // Control if the form can currently be submitted\n const [preventSubmit, setPreventSubmit] = useState(false);\n\n // User change listener registry (stored in ref to avoid re-renders)\n const userChangeListenersRef = useRef<Set<UserChangeListener>>(new Set());\n\n // Subscribe to user changes\n const subscribeUserChange = useCallback(\n (listener: UserChangeListener): (() => void) => {\n userChangeListenersRef.current.add(listener);\n // Return cleanup function to unsubscribe\n return () => {\n userChangeListenersRef.current.delete(listener);\n };\n },\n [],\n );\n\n // Notify all subscribers about user change\n const notifyUserChange = useCallback(\n (fieldName: string, value: unknown): void => {\n // Notify all registered listeners\n userChangeListenersRef.current.forEach((listener) => {\n listener(fieldName as Path<object>, value);\n });\n },\n [],\n );\n\n // Create submit handler with automatic data conversion\n // eslint-disable-next-line consistent-return\n const handleSubmit = async (e?: React.BaseSyntheticEvent) => {\n debug('handleSubmit called', {\n preventSubmit,\n formStateIsValid: methods.formState.isValid,\n validationErrors: methods.formState.errors,\n validationTrigger,\n formValues: methods.getValues(),\n });\n\n // only prevent submit when form state is valid, because otherwise\n // submit will only trigger validation and add errors / focus invalid fields\n if (methods.formState.isValid && preventSubmit) {\n debug('⛔ Form submit PREVENTED', {\n formStateIsValid: methods.formState.isValid,\n preventSubmit,\n });\n console.warn(\n '[FormProvider] form submit was prevented because preventSubmit is true...',\n );\n e?.preventDefault();\n return Promise.resolve();\n }\n\n debug('✓ Form submit ALLOWED', {\n formStateIsValid: methods.formState.isValid,\n preventSubmit,\n reason: !methods.formState.isValid\n ? 'Form is invalid (will trigger validation and show errors)'\n : 'Form is valid and preventSubmit is false',\n });\n\n // Convert form data to submission format:\n // - Unwrap flat array wrappers and convert markers\n // - Remove empty strings, nulls, empty arrays, and empty objects\n const wrappedOnSubmit = (data: FieldValues, event?: BaseSyntheticEvent) => {\n const submitData = toSubmitFormat(data) ?? {};\n debug('onSubmit callback called', { submitData });\n return onSubmit(submitData, event);\n };\n\n await methods.handleSubmit(wrappedOnSubmit)(e);\n\n debug('handleSubmit completed');\n };\n\n // Memoize the context value to prevent re-renders\n const contextValue = useMemo(\n () => {\n return {\n // set debugMode to disabled when debugModeSettings.disable is true\n // otherwise use current debug mode from localStorage\n debugMode: debugModeSettings?.disable ? 'disabled' : debugMode,\n preventSubmit: (prevent: boolean) => {\n debug('preventSubmit called', {\n previousValue: preventSubmit,\n newValue: prevent,\n formStateIsValid: methods.formState.isValid,\n validationErrors: methods.formState.errors,\n });\n setPreventSubmit(prevent);\n },\n setClientValidationSchema,\n setDebugMode,\n triggerSubmit: handleSubmit,\n userChange: {\n subscribe: subscribeUserChange,\n notify: notifyUserChange,\n },\n validation: {\n baseInstance: baseValidation,\n instance: extendedValidation,\n errors: validationErrors,\n setClientValidationSchema,\n },\n };\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [debugMode, debugModeSettings?.disable, validationErrorsHash],\n );\n\n return (\n <UniformContext.Provider value={contextValue}>\n {/* Spread all hook form props into HookFormProvider */}\n <HookFormProvider {...methods}>\n {children({ handleSubmit, isValid })}\n </HookFormProvider>\n </UniformContext.Provider>\n );\n};\n\nexport default FormProvider;\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Select-BH1Tbqwk.cjs","names":["components","useUniformField","useFormContext","createOptionValueConverter","isValueEmpty","ReactSelect"],"sources":["../src/Select/Select.tsx","../src/Select/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\nimport type { MultiValue, Props, SingleValue } 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 { createOptionValueConverter, isValueEmpty } from '../helpers';\nimport { useFormContext } from '../hooks/useFormContext';\nimport { useUniformField } from '../hooks/useUniformField';\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 'duration-150! rounded-lg border-2 border-default-200 bg-content1 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 subpixel-antialiased text-small 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: 'rounded px-3 py-2 hover:cursor-pointer',\n option_disabled:\n 'cursor-not-allowed! hover:cursor-not-allowed! opacity-disabled',\n option_focused: 'bg-default-100 active:bg-default-200',\n option_selected: 'bg-default-300',\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\ninterface SelectOption {\n /** set option to disabled state */\n disabled?: boolean;\n /**\n * True when option was auto-generated because the value wasn't found in options.\n * Use in renderOptionLabel to render a component that fetches the real label.\n */\n isFallback?: boolean;\n /** option label */\n label?: ReactNode;\n /** option value */\n value: string | number;\n}\n\ntype VariantProps = TVProps<typeof selectVariants>;\ntype ClassName = TVClassName<typeof selectVariants>;\n\nexport interface SelectProps extends VariantProps {\n /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n ariaLabel?: string;\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 /** Force menu open for debugging or visual testing. */\n debugMenuOpen?: 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?: 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 /**\n * Fallback option(s) for async selects when value isn't in current options.\n * Use when the selected value may not be in the options list (e.g., after\n * search results change). Used only if value not found in options.\n * For single select: pass the option object or undefined\n * For multi-select: pass an array of option objects\n */\n selectedOptionFallback?: SelectOption | SelectOption[];\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/destructuring-assignment\n const testId = `${props.selectProps['data-testid']}`;\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/destructuring-assignment\n const testId = `${props.selectProps['data-testid']}_select`;\n return (\n <div data-testid={testId}>\n <components.Control {...props} />\n </div>\n );\n};\n\nconst OptionComponent: typeof components.Option = (props) => {\n const { isDisabled } = props;\n // @ts-expect-error data-testid is not a default prop\n // eslint-disable-next-line react/destructuring-assignment\n const testId = `${props.selectProps['data-testid']}_select_option_${slugify(String(props?.data?.testId ?? props?.data?.value), { replaceDots: true })}`;\n return (\n <div aria-disabled={isDisabled ? true : undefined} data-testid={testId}>\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 const testId = props?.selectProps['data-testid'] as string;\n return (\n <div data-testid={`${testId}_select_dropdown`}>\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 debugMenuOpen = false,\n filterOption = undefined,\n renderOptionLabel = undefined,\n inputValue = undefined,\n loading = false,\n multiSelect = false,\n name,\n onInputChange = undefined,\n options,\n placeholder = undefined,\n selectedOptionFallback = undefined,\n ...uniformFieldProps\n}: SelectProps) => {\n const {\n ariaLabel,\n disabled,\n errorMessage,\n field: { onBlur, onChange, ref, value },\n getErrorMessageProps,\n getHelperWrapperProps,\n getLabelProps,\n invalid,\n label,\n required,\n testId,\n } = useUniformField({\n name,\n ...uniformFieldProps,\n });\n\n // Get getFieldState to check isTouched in onChange callback\n const { getFieldState } = useFormContext();\n\n // Track if the select is focused\n const [isFocused, setIsFocused] = useState(false);\n\n // Create converter to preserve number types for option values\n const { convertToOriginalType } = createOptionValueConverter(options);\n\n // classNames from slots\n const variants = selectVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n\n // React-select classNames configuration\n const reactSelectClassNames = {\n clearIndicator: () => {\n return classNames.clearIndicator;\n },\n control: () => {\n return cn(classNames.control, {\n [classNames.control_focused]: isFocused && !invalid,\n });\n },\n dropdownIndicator: () => {\n return classNames.dropdownIndicator;\n },\n groupHeading: () => {\n return classNames.groupHeading;\n },\n indicatorSeparator: () => {\n return classNames.indicatorSeparator;\n },\n indicatorsContainer: () => {\n return classNames.indicatorsContainer;\n },\n input: () => {\n return classNames.input;\n },\n loadingIndicator: () => {\n return classNames.loadingIndicator;\n },\n loadingMessage: () => {\n return classNames.loadingMessage;\n },\n menu: () => {\n return classNames.menu;\n },\n menuList: () => {\n return classNames.menuList;\n },\n menuPortal: () => {\n return classNames.menuPortal;\n },\n multiValue: () => {\n return classNames.multiValue;\n },\n multiValueLabel: () => {\n return cn(classNames.multiValueLabel, `${getValueProps().className}`);\n },\n multiValueRemove: () => {\n return classNames.multiValueRemove;\n },\n noOptionsMessage: () => {\n return classNames.noOptionsMessage;\n },\n option: ({\n isDisabled: optionIsDisabled,\n isFocused: optionIsFocused,\n isSelected: optionIsSelected,\n }: {\n isDisabled: boolean;\n isFocused: boolean;\n isSelected: boolean;\n }) => {\n return cn(classNames.option, {\n [classNames.option_disabled]: optionIsDisabled,\n [classNames.option_focused]: optionIsFocused,\n [classNames.option_selected]: optionIsSelected,\n });\n },\n placeholder: () => {\n return classNames.placeholder;\n },\n singleValue: () => {\n return cn(classNames.singleValue, `${getValueProps().className}`);\n },\n valueContainer: () => {\n return classNames.valueContainer;\n },\n };\n\n const { getBaseProps, getTriggerProps, getValueProps } = useSelect({\n children: [],\n classNames,\n errorMessage,\n isDisabled: disabled,\n isInvalid: invalid,\n isLoading: loading,\n isRequired: required,\n label,\n labelPlacement: 'outside',\n });\n\n // react-select expects `isDisabled`, while our option contract uses `disabled`.\n const reactSelectOptions = options.map((option) => {\n return {\n ...option,\n isDisabled: option.disabled,\n };\n });\n\n // Compute selected option(s) for react-select\n //\n // Priority for finding options:\n // 1. Look in current options list\n // 2. Use selectedOptionFallback prop (for async selects with pre-fetched data)\n // 3. Create fallback with value as label\n //\n // Handles edge cases:\n // - Compares as strings to support both string and number values\n // - Returns null for empty single-select (required by react-select to clear)\n // - Creates fallback options when value exists but isn't in options list\n // (common with async selects where options change after selection)\n const reactSelectValue = (() => {\n // Helper to find option by value\n const findOption = (v: string | number): SelectOption => {\n // First, look in options list\n const inOptions = options.find((option) => {\n return String(option.value) === String(v);\n });\n if (inOptions) {\n return inOptions;\n }\n\n // Second, look in selectedOptionFallback prop (for async selects)\n if (selectedOptionFallback) {\n if (Array.isArray(selectedOptionFallback)) {\n const inSelected = selectedOptionFallback.find((option) => {\n return String(option.value) === String(v);\n });\n if (inSelected) {\n return inSelected;\n }\n } else if (String(selectedOptionFallback.value) === String(v)) {\n return selectedOptionFallback;\n }\n }\n\n // Fallback: create option with value as label, marked as fallback\n return { isFallback: true, label: String(v), value: v };\n };\n\n if (multiSelect) {\n if (!Array.isArray(value) || isValueEmpty(value)) {\n return [];\n }\n return value.map((v) => {\n return findOption(v);\n });\n }\n\n // Single select - use isValueEmpty to handle marker strings (__NULL__, etc.)\n if (isValueEmpty(value)) {\n return null;\n }\n return findOption(value);\n })();\n\n // Handle selection change\n const handleChange = (\n option: MultiValue<SelectOption> | SingleValue<SelectOption>,\n ) => {\n if (multiSelect) {\n onChange(\n (option as SelectOption[])?.map((_option) => {\n return convertToOriginalType(_option.value);\n }),\n );\n } else {\n const newValue = (option as SelectOption)?.value;\n // Pass null explicitly when clearing (not undefined)\n onChange(newValue != null ? convertToOriginalType(newValue) : null);\n }\n // Mark field as touched immediately when a selection is made if not already touched\n // This ensures validation errors show right away (isTouched becomes true)\n // For Select components, selecting an option is a complete user action\n // (unlike text inputs where typing is ongoing), so we mark as touched immediately\n const { isTouched: currentIsTouched } = getFieldState(name, testId);\n if (!currentIsTouched) {\n onBlur();\n }\n };\n\n // Handle blur event\n const handleBlur = () => {\n setIsFocused(false);\n onBlur();\n };\n\n // Handle focus event\n const handleFocus = () => {\n setIsFocused(true);\n };\n\n return (\n <div\n {...getBaseProps()}\n className={cn(classNames.base)}\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 data-testid={`${testId}_wrapper`}\n >\n {label ? (\n <label\n className={classNames.label}\n data-slot=\"label\"\n htmlFor={`react-select-${name}-input`}\n id={getLabelProps().id}\n >\n {label}\n </label>\n ) : null}\n <ReactSelect\n ref={ref}\n aria-errormessage=\"\"\n aria-invalid={invalid}\n aria-label={ariaLabel}\n // set aria-labelledby to the label id so that the select is accessible\n aria-labelledby={\n label\n ? getTriggerProps()['aria-labelledby']?.split(' ')[1]\n : undefined\n }\n classNames={reactSelectClassNames}\n components={{\n Control: ControlComponent,\n DropdownIndicator: DropdownIndicatorComponent,\n Input: InputComponent,\n Option: OptionComponent,\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 menuIsOpen={debugMenuOpen ? true : undefined}\n menuPosition=\"fixed\"\n menuShouldBlockScroll\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 onBlur={handleBlur}\n onChange={handleChange}\n onFocus={handleFocus}\n onInputChange={onInputChange}\n options={reactSelectOptions}\n placeholder={placeholder}\n unstyled\n value={reactSelectValue}\n />\n {invalid ? (\n <div {...getHelperWrapperProps()}>\n <div {...getErrorMessageProps()}>{errorMessage}</div>\n </div>\n ) : null}\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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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Select-CZnEBGdn.js","names":[],"sources":["../src/Select/Select.tsx","../src/Select/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\nimport type { MultiValue, Props, SingleValue } 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 { createOptionValueConverter, isValueEmpty } from '../helpers';\nimport { useFormContext } from '../hooks/useFormContext';\nimport { useUniformField } from '../hooks/useUniformField';\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 'duration-150! rounded-lg border-2 border-default-200 bg-content1 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 subpixel-antialiased text-small 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: 'rounded px-3 py-2 hover:cursor-pointer',\n option_disabled:\n 'cursor-not-allowed! hover:cursor-not-allowed! opacity-disabled',\n option_focused: 'bg-default-100 active:bg-default-200',\n option_selected: 'bg-default-300',\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\ninterface SelectOption {\n /** set option to disabled state */\n disabled?: boolean;\n /**\n * True when option was auto-generated because the value wasn't found in options.\n * Use in renderOptionLabel to render a component that fetches the real label.\n */\n isFallback?: boolean;\n /** option label */\n label?: ReactNode;\n /** option value */\n value: string | number;\n}\n\ntype VariantProps = TVProps<typeof selectVariants>;\ntype ClassName = TVClassName<typeof selectVariants>;\n\nexport interface SelectProps extends VariantProps {\n /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n ariaLabel?: string;\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 /** Force menu open for debugging or visual testing. */\n debugMenuOpen?: 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?: 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 /**\n * Fallback option(s) for async selects when value isn't in current options.\n * Use when the selected value may not be in the options list (e.g., after\n * search results change). Used only if value not found in options.\n * For single select: pass the option object or undefined\n * For multi-select: pass an array of option objects\n */\n selectedOptionFallback?: SelectOption | SelectOption[];\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/destructuring-assignment\n const testId = `${props.selectProps['data-testid']}`;\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/destructuring-assignment\n const testId = `${props.selectProps['data-testid']}_select`;\n return (\n <div data-testid={testId}>\n <components.Control {...props} />\n </div>\n );\n};\n\nconst OptionComponent: typeof components.Option = (props) => {\n const { isDisabled } = props;\n // @ts-expect-error data-testid is not a default prop\n // eslint-disable-next-line react/destructuring-assignment\n const testId = `${props.selectProps['data-testid']}_select_option_${slugify(String(props?.data?.testId ?? props?.data?.value), { replaceDots: true })}`;\n return (\n <div aria-disabled={isDisabled ? true : undefined} data-testid={testId}>\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 const testId = props?.selectProps['data-testid'] as string;\n return (\n <div data-testid={`${testId}_select_dropdown`}>\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 debugMenuOpen = false,\n filterOption = undefined,\n renderOptionLabel = undefined,\n inputValue = undefined,\n loading = false,\n multiSelect = false,\n name,\n onInputChange = undefined,\n options,\n placeholder = undefined,\n selectedOptionFallback = undefined,\n ...uniformFieldProps\n}: SelectProps) => {\n const {\n ariaLabel,\n disabled,\n errorMessage,\n field: { onBlur, onChange, ref, value },\n getErrorMessageProps,\n getHelperWrapperProps,\n getLabelProps,\n invalid,\n label,\n required,\n testId,\n } = useUniformField({\n name,\n ...uniformFieldProps,\n });\n\n // Get getFieldState to check isTouched in onChange callback\n const { getFieldState } = useFormContext();\n\n // Track if the select is focused\n const [isFocused, setIsFocused] = useState(false);\n\n // Create converter to preserve number types for option values\n const { convertToOriginalType } = createOptionValueConverter(options);\n\n // classNames from slots\n const variants = selectVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n\n // React-select classNames configuration\n const reactSelectClassNames = {\n clearIndicator: () => {\n return classNames.clearIndicator;\n },\n control: () => {\n return cn(classNames.control, {\n [classNames.control_focused]: isFocused && !invalid,\n });\n },\n dropdownIndicator: () => {\n return classNames.dropdownIndicator;\n },\n groupHeading: () => {\n return classNames.groupHeading;\n },\n indicatorSeparator: () => {\n return classNames.indicatorSeparator;\n },\n indicatorsContainer: () => {\n return classNames.indicatorsContainer;\n },\n input: () => {\n return classNames.input;\n },\n loadingIndicator: () => {\n return classNames.loadingIndicator;\n },\n loadingMessage: () => {\n return classNames.loadingMessage;\n },\n menu: () => {\n return classNames.menu;\n },\n menuList: () => {\n return classNames.menuList;\n },\n menuPortal: () => {\n return classNames.menuPortal;\n },\n multiValue: () => {\n return classNames.multiValue;\n },\n multiValueLabel: () => {\n return cn(classNames.multiValueLabel, `${getValueProps().className}`);\n },\n multiValueRemove: () => {\n return classNames.multiValueRemove;\n },\n noOptionsMessage: () => {\n return classNames.noOptionsMessage;\n },\n option: ({\n isDisabled: optionIsDisabled,\n isFocused: optionIsFocused,\n isSelected: optionIsSelected,\n }: {\n isDisabled: boolean;\n isFocused: boolean;\n isSelected: boolean;\n }) => {\n return cn(classNames.option, {\n [classNames.option_disabled]: optionIsDisabled,\n [classNames.option_focused]: optionIsFocused,\n [classNames.option_selected]: optionIsSelected,\n });\n },\n placeholder: () => {\n return classNames.placeholder;\n },\n singleValue: () => {\n return cn(classNames.singleValue, `${getValueProps().className}`);\n },\n valueContainer: () => {\n return classNames.valueContainer;\n },\n };\n\n const { getBaseProps, getTriggerProps, getValueProps } = useSelect({\n children: [],\n classNames,\n errorMessage,\n isDisabled: disabled,\n isInvalid: invalid,\n isLoading: loading,\n isRequired: required,\n label,\n labelPlacement: 'outside',\n });\n\n // react-select expects `isDisabled`, while our option contract uses `disabled`.\n const reactSelectOptions = options.map((option) => {\n return {\n ...option,\n isDisabled: option.disabled,\n };\n });\n\n // Compute selected option(s) for react-select\n //\n // Priority for finding options:\n // 1. Look in current options list\n // 2. Use selectedOptionFallback prop (for async selects with pre-fetched data)\n // 3. Create fallback with value as label\n //\n // Handles edge cases:\n // - Compares as strings to support both string and number values\n // - Returns null for empty single-select (required by react-select to clear)\n // - Creates fallback options when value exists but isn't in options list\n // (common with async selects where options change after selection)\n const reactSelectValue = (() => {\n // Helper to find option by value\n const findOption = (v: string | number): SelectOption => {\n // First, look in options list\n const inOptions = options.find((option) => {\n return String(option.value) === String(v);\n });\n if (inOptions) {\n return inOptions;\n }\n\n // Second, look in selectedOptionFallback prop (for async selects)\n if (selectedOptionFallback) {\n if (Array.isArray(selectedOptionFallback)) {\n const inSelected = selectedOptionFallback.find((option) => {\n return String(option.value) === String(v);\n });\n if (inSelected) {\n return inSelected;\n }\n } else if (String(selectedOptionFallback.value) === String(v)) {\n return selectedOptionFallback;\n }\n }\n\n // Fallback: create option with value as label, marked as fallback\n return { isFallback: true, label: String(v), value: v };\n };\n\n if (multiSelect) {\n if (!Array.isArray(value) || isValueEmpty(value)) {\n return [];\n }\n return value.map((v) => {\n return findOption(v);\n });\n }\n\n // Single select - use isValueEmpty to handle marker strings (__NULL__, etc.)\n if (isValueEmpty(value)) {\n return null;\n }\n return findOption(value);\n })();\n\n // Handle selection change\n const handleChange = (\n option: MultiValue<SelectOption> | SingleValue<SelectOption>,\n ) => {\n if (multiSelect) {\n onChange(\n (option as SelectOption[])?.map((_option) => {\n return convertToOriginalType(_option.value);\n }),\n );\n } else {\n const newValue = (option as SelectOption)?.value;\n // Pass null explicitly when clearing (not undefined)\n onChange(newValue != null ? convertToOriginalType(newValue) : null);\n }\n // Mark field as touched immediately when a selection is made if not already touched\n // This ensures validation errors show right away (isTouched becomes true)\n // For Select components, selecting an option is a complete user action\n // (unlike text inputs where typing is ongoing), so we mark as touched immediately\n const { isTouched: currentIsTouched } = getFieldState(name, testId);\n if (!currentIsTouched) {\n onBlur();\n }\n };\n\n // Handle blur event\n const handleBlur = () => {\n setIsFocused(false);\n onBlur();\n };\n\n // Handle focus event\n const handleFocus = () => {\n setIsFocused(true);\n };\n\n return (\n <div\n {...getBaseProps()}\n className={cn(classNames.base)}\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 data-testid={`${testId}_wrapper`}\n >\n {label ? (\n <label\n className={classNames.label}\n data-slot=\"label\"\n htmlFor={`react-select-${name}-input`}\n id={getLabelProps().id}\n >\n {label}\n </label>\n ) : null}\n <ReactSelect\n ref={ref}\n aria-errormessage=\"\"\n aria-invalid={invalid}\n aria-label={ariaLabel}\n // set aria-labelledby to the label id so that the select is accessible\n aria-labelledby={\n label\n ? getTriggerProps()['aria-labelledby']?.split(' ')[1]\n : undefined\n }\n classNames={reactSelectClassNames}\n components={{\n Control: ControlComponent,\n DropdownIndicator: DropdownIndicatorComponent,\n Input: InputComponent,\n Option: OptionComponent,\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 menuIsOpen={debugMenuOpen ? true : undefined}\n menuPosition=\"fixed\"\n menuShouldBlockScroll\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 onBlur={handleBlur}\n onChange={handleChange}\n onFocus={handleFocus}\n onInputChange={onInputChange}\n options={reactSelectOptions}\n placeholder={placeholder}\n unstyled\n value={reactSelectValue}\n />\n {invalid ? (\n <div {...getHelperWrapperProps()}>\n <div {...getErrorMessageProps()}>{errorMessage}</div>\n </div>\n ) : null}\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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"}
|