@trackunit/react-form-components 2.3.8-alpha-90b6c9b97dd.0 → 2.3.8

package/index.cjs.js

@@ -1089,6 +1089,19 @@ const useCreateInputChangeEvent = () => react.useCallback((value, sourceInput) =
  */
 const useCreateInputBlurEvent = () => react.useCallback((value, sourceInput) => buildSyntheticInputEvent("blur", value, sourceInput), []);
 
+/**
+ * Attaches `node` to `ref`. Kept as a plain module-scope function (rather than inline in the
+ * hook) so mutating a ref's `.current` isn't flagged by `react-hooks/immutability`, which only
+ * tracks mutation of values captured as hook-scoped arguments.
+ */
+const attachRef = (ref, node) => {
+    if (typeof ref === "function") {
+        ref(node);
+    }
+    else if (ref !== null && ref !== undefined) {
+        ref.current = node;
+    }
+};
 /**
  * Owns the underlying `<input>` ref, ref forwarding, the DOM-value sync layout effect, and the
  * synthetic change/blur emitters used to surface the canonical (ISO) value to consumers while
@@ -1105,12 +1118,7 @@ const useCanonicalInputEmitter = ({ ref, onChange, onBlur, resolvedValue, }) =>
     const createInputBlurEvent = useCreateInputBlurEvent();
     const setInputRef = react.useCallback((node) => {
         inputRef.current = node;
-        if (typeof ref === "function") {
-            ref(node);
-        }
-        else if (ref !== null && ref !== undefined) {
-            ref.current = node;
-        }
+        attachRef(ref, node);
     }, [ref]);
     react.useLayoutEffect(() => {
         const input = inputRef.current;
@@ -5335,13 +5343,9 @@ const ToggleSwitch = ({ onChange, onClick, preventDefaultOnClick = false, classN
     const localInputRef = react.useRef(null);
     const mergedRef = reactComponents.useMergeRefs([ref, localInputRef]);
     // Extract data attributes to apply to wrapper
-    const dataAttributes = react.useMemo(() => Object.keys(rest).reduce((acc, key) => {
-        if (key.startsWith("data-")) {
-            acc[key] = rest[key];
-            delete rest[key];
-        }
-        return acc;
-    }, {}), [rest]);
+    const dataAttributes = react.useMemo(() => Object.fromEntries(Object.entries(rest).filter(([key]) => key.startsWith("data-"))), [rest]);
+    // Remaining props (without data attributes) to apply to the input
+    const nonDataRest = react.useMemo(() => Object.fromEntries(Object.entries(rest).filter(([key]) => !key.startsWith("data-"))), [rest]);
     const handleWrapperClick = (e) => {
         // Prevents double-toggling when wrapped in a label or if preventDefaultOnClick is true
         const isFromLabel = e.target instanceof Element ? e.target.closest("label") : null;
@@ -5371,7 +5375,7 @@ const ToggleSwitch = ({ onChange, onClick, preventDefaultOnClick = false, classN
                     disabled: disabled || readOnly,
                     size,
                     focused: showInputFocus,
-                }), "data-testid": `${dataTestId}-track`, children: [jsxRuntime.jsx("span", { className: cvaToggleSwitchThumb({ toggled, size }), "data-testid": `${dataTestId}-thumb` }), jsxRuntime.jsx("input", { "aria-disabled": disabled || readOnly, checked: toggled, className: cvaToggleSwitchInput(), "data-testid": `${dataTestId}-input`, disabled: disabled, onChange: handleInputChange, onClick: e => e.stopPropagation(), ref: mergedRef, role: "switch", tabIndex: tabIndex, type: "checkbox", ...rest })] }) }) }));
+                }), "data-testid": `${dataTestId}-track`, children: [jsxRuntime.jsx("span", { className: cvaToggleSwitchThumb({ toggled, size }), "data-testid": `${dataTestId}-thumb` }), jsxRuntime.jsx("input", { "aria-disabled": disabled || readOnly, checked: toggled, className: cvaToggleSwitchInput(), "data-testid": `${dataTestId}-input`, disabled: disabled, onChange: handleInputChange, onClick: e => e.stopPropagation(), ref: mergedRef, role: "switch", tabIndex: tabIndex, type: "checkbox", ...nonDataRest })] }) }) }));
 };
 ToggleSwitch.displayName = "ToggleSwitch";
 

package/index.esm.js

@@ -1088,6 +1088,19 @@ const useCreateInputChangeEvent = () => useCallback((value, sourceInput) => buil
  */
 const useCreateInputBlurEvent = () => useCallback((value, sourceInput) => buildSyntheticInputEvent("blur", value, sourceInput), []);
 
+/**
+ * Attaches `node` to `ref`. Kept as a plain module-scope function (rather than inline in the
+ * hook) so mutating a ref's `.current` isn't flagged by `react-hooks/immutability`, which only
+ * tracks mutation of values captured as hook-scoped arguments.
+ */
+const attachRef = (ref, node) => {
+    if (typeof ref === "function") {
+        ref(node);
+    }
+    else if (ref !== null && ref !== undefined) {
+        ref.current = node;
+    }
+};
 /**
  * Owns the underlying `<input>` ref, ref forwarding, the DOM-value sync layout effect, and the
  * synthetic change/blur emitters used to surface the canonical (ISO) value to consumers while
@@ -1104,12 +1117,7 @@ const useCanonicalInputEmitter = ({ ref, onChange, onBlur, resolvedValue, }) =>
     const createInputBlurEvent = useCreateInputBlurEvent();
     const setInputRef = useCallback((node) => {
         inputRef.current = node;
-        if (typeof ref === "function") {
-            ref(node);
-        }
-        else if (ref !== null && ref !== undefined) {
-            ref.current = node;
-        }
+        attachRef(ref, node);
     }, [ref]);
     useLayoutEffect(() => {
         const input = inputRef.current;
@@ -5334,13 +5342,9 @@ const ToggleSwitch = ({ onChange, onClick, preventDefaultOnClick = false, classN
     const localInputRef = useRef(null);
     const mergedRef = useMergeRefs([ref, localInputRef]);
     // Extract data attributes to apply to wrapper
-    const dataAttributes = useMemo(() => Object.keys(rest).reduce((acc, key) => {
-        if (key.startsWith("data-")) {
-            acc[key] = rest[key];
-            delete rest[key];
-        }
-        return acc;
-    }, {}), [rest]);
+    const dataAttributes = useMemo(() => Object.fromEntries(Object.entries(rest).filter(([key]) => key.startsWith("data-"))), [rest]);
+    // Remaining props (without data attributes) to apply to the input
+    const nonDataRest = useMemo(() => Object.fromEntries(Object.entries(rest).filter(([key]) => !key.startsWith("data-"))), [rest]);
     const handleWrapperClick = (e) => {
         // Prevents double-toggling when wrapped in a label or if preventDefaultOnClick is true
         const isFromLabel = e.target instanceof Element ? e.target.closest("label") : null;
@@ -5370,7 +5374,7 @@ const ToggleSwitch = ({ onChange, onClick, preventDefaultOnClick = false, classN
                     disabled: disabled || readOnly,
                     size,
                     focused: showInputFocus,
-                }), "data-testid": `${dataTestId}-track`, children: [jsx("span", { className: cvaToggleSwitchThumb({ toggled, size }), "data-testid": `${dataTestId}-thumb` }), jsx("input", { "aria-disabled": disabled || readOnly, checked: toggled, className: cvaToggleSwitchInput(), "data-testid": `${dataTestId}-input`, disabled: disabled, onChange: handleInputChange, onClick: e => e.stopPropagation(), ref: mergedRef, role: "switch", tabIndex: tabIndex, type: "checkbox", ...rest })] }) }) }));
+                }), "data-testid": `${dataTestId}-track`, children: [jsx("span", { className: cvaToggleSwitchThumb({ toggled, size }), "data-testid": `${dataTestId}-thumb` }), jsx("input", { "aria-disabled": disabled || readOnly, checked: toggled, className: cvaToggleSwitchInput(), "data-testid": `${dataTestId}-input`, disabled: disabled, onChange: handleInputChange, onClick: e => e.stopPropagation(), ref: mergedRef, role: "switch", tabIndex: tabIndex, type: "checkbox", ...nonDataRest })] }) }) }));
 };
 ToggleSwitch.displayName = "ToggleSwitch";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "2.3.8-alpha-90b6c9b97dd.0",
+  "version": "2.3.8",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "migrations": "./migrations.json",
@@ -10,17 +10,17 @@
   "dependencies": {
     "react-calendar": "^6.0.0",
     "react-select": "^5.10.2",
-    "@trackunit/date-and-time-utils": "1.13.95-alpha-90b6c9b97dd.0",
+    "@trackunit/date-and-time-utils": "1.13.95",
     "usehooks-ts": "^3.1.0",
     "libphonenumber-js": "^1.13.6",
     "zod": "^3.25.76",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "1.13.92-alpha-90b6c9b97dd.0",
-    "@trackunit/react-components": "2.4.2-alpha-90b6c9b97dd.0",
-    "@trackunit/ui-icons": "1.13.93-alpha-90b6c9b97dd.0",
-    "@trackunit/shared-utils": "1.15.95-alpha-90b6c9b97dd.0",
-    "@trackunit/ui-design-tokens": "1.13.91-alpha-90b6c9b97dd.0",
-    "@trackunit/i18n-library-translation": "2.2.7-alpha-90b6c9b97dd.0",
+    "@trackunit/css-class-variance-utilities": "1.13.92",
+    "@trackunit/react-components": "2.4.2",
+    "@trackunit/ui-icons": "1.13.93",
+    "@trackunit/shared-utils": "1.15.95",
+    "@trackunit/ui-design-tokens": "1.13.91",
+    "@trackunit/i18n-library-translation": "2.2.7",
     "string-ts": "^2.0.0",
     "es-toolkit": "^1.39.10"
   },

package/src/components/BaseSelect/useSelect.d.ts

@@ -18,20 +18,20 @@ export type SelectProps<TOption, TIsAsync extends boolean = false, TIsMulti exte
      */
     prefix?: ReactNode;
     /**
-     * An string to render in field when there is no value selected.
-     * Can be used as a description, example or a hint.
+     * Text to display when no value is selected.
+     * Can be used as a description, example, or a hint.
      *
      * @memberof SelectProps
      */
     placeholder?: string;
     /**
-     * An boolean flag to disable field
+     * Whether the select is disabled.
      *
      * @memberof SelectProps
      */
     disabled?: boolean | LockedForReasons;
     /**
-     * An boolean flag to make the field readonly
+     * Whether the select is read-only.
      *
      * @memberof SelectProps
      */
@@ -105,13 +105,14 @@ export type SelectProps<TOption, TIsAsync extends boolean = false, TIsMulti exte
      */
     hideSelectedOptions?: boolean;
     /**
-     * This callback returns
+     * Resolves option data to a string to be displayed as a description for that option. The
+     * option description is only shown in the menu list, not in the selected value.
      *
      * @memberof SelectProps
      */
     getOptionLabelDescription?: (option: TOption) => string | undefined;
     /**
-     * This callback returns
+     * Resolves option data to an element to be displayed as a prefix for that option.
      *
      * @memberof SelectProps
      */

package/src/components/MultiSelectField/FormFieldSelectAdapterMulti.d.ts

@@ -22,13 +22,26 @@ type SelectExposedProps<TOption extends BaseOptionType = BaseOptionType, TIsAsyn
 export interface MultiSelectFieldProps<TOption extends BaseOptionType = BaseOptionType, TIsAsync extends boolean = false, TGroup extends GroupBase<TOption> = GroupBase<TOption>> extends CommonProps, FormGroupExposedProps, SelectExposedProps<TOption, TIsAsync, TGroup>, Refable<HTMLSelectElement>, Styleable {
     /** RHF/native-friendly blur signature */
     onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
-    /** Options to render (same shape as BaseSelect) */
+    /**
+     * Options to render (same shape as BaseSelect)
+     *
+     * @important
+     * @expand
+     */
     options: Array<TOption>;
-    /** Multi-value from react-select */
+    /**
+     * Multi-value from react-select
+     *
+     * @important
+     */
     value?: MultiValue<TOption> | null;
     /** Default selected options (MultiValue) */
     defaultValue?: MultiValue<TOption>;
-    /** onChange passes MultiValue<TOption> (or null when cleared) */
+    /**
+     * onChange passes MultiValue<TOption> (or null when cleared)
+     *
+     * @important
+     */
     onChange?: (value: MultiValue<TOption> | null) => void;
     /** Invalid state message rendered via FormGroup */
     errorMessage?: string;

package/src/components/SelectField/FormFieldSelectAdapter.d.ts

@@ -14,10 +14,15 @@ export interface SelectFieldProps<TOption extends BaseOptionType = BaseOptionTyp
     onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
     /**
      * The options available for the SelectField.
+     *
+     * @important
+     * @expand
      */
     options: Array<TOption>;
     /**
      * The selected value of the SelectField.
+     *
+     * @important
      */
     value?: TOption["value"];
     /**
@@ -26,6 +31,8 @@ export interface SelectFieldProps<TOption extends BaseOptionType = BaseOptionTyp
     defaultValue?: TOption["value"];
     /**
      * The onChange handler for the SelectField.
+     *
+     * @important
      */
     onChange?: (event: {
         target: {