@trackunit/react-form-components 1.8.128 → 1.8.131

package/index.cjs.js

@@ -1577,10 +1577,10 @@ autoComplete, // see https://github.com/JedWatson/react-select/issues/758
                 return (jsxRuntime.jsx(ReactSelect.components.ClearIndicator, { ...selectClearIndicator, className: cvaSelectClearIndicator({ className: selectClearIndicator.className }), getStyles: getNoStyles, children: jsxRuntime.jsx(reactComponents.Icon, { ariaLabel: t("clearIndicator.icon.tooltip.clearAll"), "data-testid": `${dataTestId}-XMarkIcon`, name: "XCircle", size: "medium" }) }));
             },
             LoadingMessage: selectLoadingMessage => {
-                return (jsxRuntime.jsx(ReactSelect.components.LoadingMessage, { ...selectLoadingMessage, className: cvaSelectLoadingMessage({ className: selectLoadingMessage.className }), getStyles: getNoStyles, children: t("select.loadingMessage") }));
+                return (jsxRuntime.jsx(ReactSelect.components.LoadingMessage, { ...selectLoadingMessage, className: cvaSelectLoadingMessage({ className: selectLoadingMessage.className }), getStyles: getNoStyles, children: selectLoadingMessage.children ?? t("select.loadingMessage") }));
             },
             NoOptionsMessage: selectNoOptionsMessage => {
-                return (jsxRuntime.jsx(ReactSelect.components.NoOptionsMessage, { ...selectNoOptionsMessage, className: cvaSelectNoOptionsMessage({ className: selectNoOptionsMessage.className }), getStyles: getNoStyles, children: t("select.noOptionsMessage") }));
+                return (jsxRuntime.jsx(ReactSelect.components.NoOptionsMessage, { ...selectNoOptionsMessage, className: cvaSelectNoOptionsMessage({ className: selectNoOptionsMessage.className }), getStyles: getNoStyles, children: selectNoOptionsMessage.children ?? t("select.noOptionsMessage") }));
             },
             SingleValue: selectSingleValue => {
                 const optionPrefix = getOptionPrefix ? getOptionPrefix(selectSingleValue.data) : null;
@@ -1699,10 +1699,7 @@ const getPlaceholderElement = (children) => {
 const useSelect = ({ disabled = false, //renaming to isDisabled, so not directly passed to react-select
 "data-testid": dataTestId, 
 // Extract critical props that must trigger recalculation when they change
-onMenuOpen, onMenuClose, options, value, onChange, defaultValue, 
-// restProps are pur in a ref to keep dependencies stable while always having the latest values
-// See explanation on restPropsRef below for more details 👇
-...restProps }) => {
+onMenuOpen, onMenuClose, options, value, ...restProps }) => {
     const customComponents = useCustomComponents({
         disabled, // intentionally not evaluated as boolean, since it can be object too!
         readOnly: restProps.readOnly ?? false, // intentionally not evaluated as boolean, since it can be object too!
@@ -1745,28 +1742,14 @@ onMenuOpen, onMenuClose, options, value, onChange, defaultValue,
         restoreScroll();
         onMenuCloseRef.current?.();
     }, [restoreScroll]);
-    // Store restProps in a ref to keep dependencies stable while always having the latest values
-    // This allows us to access restProps in useMemo without including them in the dependency array
-    // Criteria for props in restProps:
-    // - Props used in computations are already tracked via derived values (interactable, portalTarget, etc.)
-    // - Other props are accessed via ref - they'll always be latest but won't trigger recalculation
-    //   This is a trade-off: we prioritize stability over perfect reactivity for less critical props
-    const restPropsRef = react.useRef(restProps);
-    react.useEffect(() => {
-        restPropsRef.current = restProps;
-    }, [restProps]);
-    // eslint-disable-next-line react-hooks/refs
     return react.useMemo(() => {
-        const currentRestProps = restPropsRef.current;
         return {
-            ...currentRestProps,
+            ...restProps,
             options,
             value,
-            onChange,
-            defaultValue,
             components: customComponents,
             unstyled: true,
-            "aria-label": currentRestProps.label,
+            "aria-label": restProps.label,
             "data-testid": dataTestId ?? "select",
             tabSelectsValue: false,
             blurInputOnSelect: false,
@@ -1774,20 +1757,20 @@ onMenuOpen, onMenuClose, options, value, onChange, defaultValue,
             // Setting menuPortalTarget to 'null' specifies that the dropdown should be rendered within
             // the parent element instead of 'document.body'.
             menuPortalTarget: portalTarget,
-            isSearchable: interactable ? (currentRestProps.isSearchable ?? true) : false,
+            isSearchable: interactable ? (restProps.isSearchable ?? true) : false,
             // Disable react-select's built-in scroll blocking as we handle it ourselves in onMenuOpen/onMenuClose
             // to prevent layout shifts caused by not accounting for existing body padding in the react-select implementation.
             // See: https://github.com/JedWatson/react-select/issues/5342 AND https://github.com/JedWatson/react-select/issues/5020
             menuShouldBlockScroll: false,
             menuShouldScrollIntoView: true,
-            openMenuOnClick: interactable ? (currentRestProps.openMenuOnClick ?? true) : false,
-            openMenuOnFocus: Boolean(currentRestProps.openMenuOnFocus),
-            closeMenuOnSelect: !Boolean(currentRestProps.isMulti),
+            openMenuOnClick: interactable ? (restProps.openMenuOnClick ?? true) : false,
+            openMenuOnFocus: Boolean(restProps.openMenuOnFocus),
+            closeMenuOnSelect: !Boolean(restProps.isMulti),
             isDisabled: Boolean(disabled),
-            isClearable: Boolean(currentRestProps.isClearable),
-            menuPlacement: currentRestProps.menuPlacement ?? "auto",
-            placeholder: interactable ? currentRestProps.placeholder : undefined,
-            hideSelectedOptions: Boolean(currentRestProps.hideSelectedOptions),
+            isClearable: Boolean(restProps.isClearable),
+            menuPlacement: restProps.menuPlacement ?? "auto",
+            placeholder: interactable ? restProps.placeholder : undefined,
+            hideSelectedOptions: Boolean(restProps.hideSelectedOptions),
             menuIsOpen: interactable ? undefined : false, // close it if not interactable, otherwise leave state to react-select
             // Wire up our custom menu open/close handlers
             onMenuOpen: handleMenuOpen,
@@ -1807,13 +1790,9 @@ onMenuOpen, onMenuClose, options, value, onChange, defaultValue,
         handleMenuClose,
         dataTestId,
         portalTarget,
-        // Critical props that must trigger recalculation when they change
         options,
         value,
-        onChange,
-        defaultValue,
-        // restPropsRef is intentionally not included - we access restPropsRef.current inside useMemo
-        // to always get the latest restProps without causing recalculation when the object reference changes
+        restProps,
     ]);
 };
 

package/index.esm.js

@@ -1576,10 +1576,10 @@ autoComplete, // see https://github.com/JedWatson/react-select/issues/758
                 return (jsx(components.ClearIndicator, { ...selectClearIndicator, className: cvaSelectClearIndicator({ className: selectClearIndicator.className }), getStyles: getNoStyles, children: jsx(Icon, { ariaLabel: t("clearIndicator.icon.tooltip.clearAll"), "data-testid": `${dataTestId}-XMarkIcon`, name: "XCircle", size: "medium" }) }));
             },
             LoadingMessage: selectLoadingMessage => {
-                return (jsx(components.LoadingMessage, { ...selectLoadingMessage, className: cvaSelectLoadingMessage({ className: selectLoadingMessage.className }), getStyles: getNoStyles, children: t("select.loadingMessage") }));
+                return (jsx(components.LoadingMessage, { ...selectLoadingMessage, className: cvaSelectLoadingMessage({ className: selectLoadingMessage.className }), getStyles: getNoStyles, children: selectLoadingMessage.children ?? t("select.loadingMessage") }));
             },
             NoOptionsMessage: selectNoOptionsMessage => {
-                return (jsx(components.NoOptionsMessage, { ...selectNoOptionsMessage, className: cvaSelectNoOptionsMessage({ className: selectNoOptionsMessage.className }), getStyles: getNoStyles, children: t("select.noOptionsMessage") }));
+                return (jsx(components.NoOptionsMessage, { ...selectNoOptionsMessage, className: cvaSelectNoOptionsMessage({ className: selectNoOptionsMessage.className }), getStyles: getNoStyles, children: selectNoOptionsMessage.children ?? t("select.noOptionsMessage") }));
             },
             SingleValue: selectSingleValue => {
                 const optionPrefix = getOptionPrefix ? getOptionPrefix(selectSingleValue.data) : null;
@@ -1698,10 +1698,7 @@ const getPlaceholderElement = (children) => {
 const useSelect = ({ disabled = false, //renaming to isDisabled, so not directly passed to react-select
 "data-testid": dataTestId, 
 // Extract critical props that must trigger recalculation when they change
-onMenuOpen, onMenuClose, options, value, onChange, defaultValue, 
-// restProps are pur in a ref to keep dependencies stable while always having the latest values
-// See explanation on restPropsRef below for more details 👇
-...restProps }) => {
+onMenuOpen, onMenuClose, options, value, ...restProps }) => {
     const customComponents = useCustomComponents({
         disabled, // intentionally not evaluated as boolean, since it can be object too!
         readOnly: restProps.readOnly ?? false, // intentionally not evaluated as boolean, since it can be object too!
@@ -1744,28 +1741,14 @@ onMenuOpen, onMenuClose, options, value, onChange, defaultValue,
         restoreScroll();
         onMenuCloseRef.current?.();
     }, [restoreScroll]);
-    // Store restProps in a ref to keep dependencies stable while always having the latest values
-    // This allows us to access restProps in useMemo without including them in the dependency array
-    // Criteria for props in restProps:
-    // - Props used in computations are already tracked via derived values (interactable, portalTarget, etc.)
-    // - Other props are accessed via ref - they'll always be latest but won't trigger recalculation
-    //   This is a trade-off: we prioritize stability over perfect reactivity for less critical props
-    const restPropsRef = useRef(restProps);
-    useEffect(() => {
-        restPropsRef.current = restProps;
-    }, [restProps]);
-    // eslint-disable-next-line react-hooks/refs
     return useMemo(() => {
-        const currentRestProps = restPropsRef.current;
         return {
-            ...currentRestProps,
+            ...restProps,
             options,
             value,
-            onChange,
-            defaultValue,
             components: customComponents,
             unstyled: true,
-            "aria-label": currentRestProps.label,
+            "aria-label": restProps.label,
             "data-testid": dataTestId ?? "select",
             tabSelectsValue: false,
             blurInputOnSelect: false,
@@ -1773,20 +1756,20 @@ onMenuOpen, onMenuClose, options, value, onChange, defaultValue,
             // Setting menuPortalTarget to 'null' specifies that the dropdown should be rendered within
             // the parent element instead of 'document.body'.
             menuPortalTarget: portalTarget,
-            isSearchable: interactable ? (currentRestProps.isSearchable ?? true) : false,
+            isSearchable: interactable ? (restProps.isSearchable ?? true) : false,
             // Disable react-select's built-in scroll blocking as we handle it ourselves in onMenuOpen/onMenuClose
             // to prevent layout shifts caused by not accounting for existing body padding in the react-select implementation.
             // See: https://github.com/JedWatson/react-select/issues/5342 AND https://github.com/JedWatson/react-select/issues/5020
             menuShouldBlockScroll: false,
             menuShouldScrollIntoView: true,
-            openMenuOnClick: interactable ? (currentRestProps.openMenuOnClick ?? true) : false,
-            openMenuOnFocus: Boolean(currentRestProps.openMenuOnFocus),
-            closeMenuOnSelect: !Boolean(currentRestProps.isMulti),
+            openMenuOnClick: interactable ? (restProps.openMenuOnClick ?? true) : false,
+            openMenuOnFocus: Boolean(restProps.openMenuOnFocus),
+            closeMenuOnSelect: !Boolean(restProps.isMulti),
             isDisabled: Boolean(disabled),
-            isClearable: Boolean(currentRestProps.isClearable),
-            menuPlacement: currentRestProps.menuPlacement ?? "auto",
-            placeholder: interactable ? currentRestProps.placeholder : undefined,
-            hideSelectedOptions: Boolean(currentRestProps.hideSelectedOptions),
+            isClearable: Boolean(restProps.isClearable),
+            menuPlacement: restProps.menuPlacement ?? "auto",
+            placeholder: interactable ? restProps.placeholder : undefined,
+            hideSelectedOptions: Boolean(restProps.hideSelectedOptions),
             menuIsOpen: interactable ? undefined : false, // close it if not interactable, otherwise leave state to react-select
             // Wire up our custom menu open/close handlers
             onMenuOpen: handleMenuOpen,
@@ -1806,13 +1789,9 @@ onMenuOpen, onMenuClose, options, value, onChange, defaultValue,
         handleMenuClose,
         dataTestId,
         portalTarget,
-        // Critical props that must trigger recalculation when they change
         options,
         value,
-        onChange,
-        defaultValue,
-        // restPropsRef is intentionally not included - we access restPropsRef.current inside useMemo
-        // to always get the latest restProps without causing recalculation when the object reference changes
+        restProps,
     ]);
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.8.128",
+  "version": "1.8.131",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -14,12 +14,12 @@
     "zod": "^3.23.8",
     "react-hook-form": "7.62.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "1.7.84",
-    "@trackunit/react-components": "1.10.59",
-    "@trackunit/ui-icons": "1.7.85",
-    "@trackunit/shared-utils": "1.9.84",
-    "@trackunit/ui-design-tokens": "1.7.84",
-    "@trackunit/i18n-library-translation": "1.7.102",
+    "@trackunit/css-class-variance-utilities": "1.7.86",
+    "@trackunit/react-components": "1.10.61",
+    "@trackunit/ui-icons": "1.7.87",
+    "@trackunit/shared-utils": "1.9.86",
+    "@trackunit/ui-design-tokens": "1.7.86",
+    "@trackunit/i18n-library-translation": "1.7.104",
     "string-ts": "^2.0.0",
     "@js-temporal/polyfill": "^0.5.1",
     "es-toolkit": "^1.39.10",

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

@@ -134,4 +134,4 @@ export type SelectProps<TOption, TIsAsync extends boolean = false, TIsMulti exte
  * @param {SelectProps} props - The props for the Select component
  * @returns {ReactSelectProps} Props for react-select component
  */
-export declare const useSelect: <TOption, TIsAsync extends boolean = false, TIsMulti extends boolean = false, TGroup extends GroupBase<TOption> = GroupBase<TOption>>({ disabled, "data-testid": dataTestId, onMenuOpen, onMenuClose, options, value, onChange, defaultValue, ...restProps }: SelectProps<TOption, TIsAsync, TIsMulti, TGroup>) => ReactSelectProps<TOption, TIsMulti, TGroup>;
+export declare const useSelect: <TOption, TIsAsync extends boolean = false, TIsMulti extends boolean = false, TGroup extends GroupBase<TOption> = GroupBase<TOption>>({ disabled, "data-testid": dataTestId, onMenuOpen, onMenuClose, options, value, ...restProps }: SelectProps<TOption, TIsAsync, TIsMulti, TGroup>) => ReactSelectProps<TOption, TIsMulti, TGroup>;