@trackunit/react-form-components 1.8.128 → 1.8.132

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;
@@ -1696,34 +1696,55 @@ const getPlaceholderElement = (children) => {
  * @param {SelectProps} props - The props for the Select component
  * @returns {ReactSelectProps} Props for react-select component
  */
-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 }) => {
+const useSelect = (props) => {
+    const { 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
+    options, value, defaultValue, 
+    // Extract callbacks - most are passed through directly to allow recalculation when changed
+    // Only onMenuOpen and onMenuClose get wrapped with ref pattern (see below)
+    onMenuOpen, onMenuClose, onChange, onInputChange, onFocus, onBlur, getOptionLabel, getOptionValue, filterOption, formatOptionLabel, formatGroupLabel, isOptionDisabled, isOptionSelected, onKeyDown, onMenuScrollToTop, onMenuScrollToBottom, 
+    // Extract other props used in final useMemo
+    label, isSearchable, openMenuOnClick, openMenuOnFocus, isMulti, isClearable, menuPlacement, placeholder, hideSelectedOptions, readOnly, 
+    // Extract commonly-used props to prevent them from ending up in restProps
+    // This makes dependency tracking more explicit and improves stability
+    id, name, inputId, isLoading, async: asyncProp, required, tabIndex, closeMenuOnScroll, escapeClearsValue, backspaceRemovesValue, noOptionsMessage, loadingMessage, controlShouldRenderValue, ...restProps } = props;
+    // Deep equality memoization for restProps to achieve hook stability
+    // Problem: restProps is a new object on every render, causing unnecessary recalculations
+    // Solution: Use deep equality check with isEqual to only update when actual values change
+    // Trade-off: Small performance cost of deep comparison vs stability benefits
+    const [stableRestProps, setStableRestProps] = react.useState(restProps);
+    react.useEffect(() => {
+        if (!esToolkit.isEqual(stableRestProps, restProps)) {
+            // setState in useEffect is intentional here for deep equality memoization
+            // We only update stableRestProps when the actual values change, not just the object reference
+            queueMicrotask(() => {
+                setStableRestProps(restProps);
+            });
+        }
+    }, [restProps, stableRestProps]);
     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!
+        readOnly: readOnly ?? false, // intentionally not evaluated as boolean, since it can be object too!
         "data-testid": dataTestId ?? "select",
-        prefix: restProps.prefix,
-        hasError: restProps.hasError,
-        fieldSize: restProps.fieldSize,
-        getOptionLabelDescription: restProps.getOptionLabelDescription,
-        getOptionPrefix: restProps.getOptionPrefix,
-        isMulti: restProps.isMulti ?? false,
-        className: restProps.className,
-        autoComplete: restProps.autoComplete,
+        prefix: stableRestProps.prefix,
+        hasError: stableRestProps.hasError,
+        fieldSize: stableRestProps.fieldSize,
+        getOptionLabelDescription: stableRestProps.getOptionLabelDescription,
+        getOptionPrefix: stableRestProps.getOptionPrefix,
+        isMulti: isMulti ?? false,
+        className: stableRestProps.className,
+        autoComplete: stableRestProps.autoComplete,
     });
-    const interactable = react.useMemo(() => !Boolean(disabled) && !Boolean(restProps.readOnly), [disabled, restProps.readOnly]);
+    const interactable = react.useMemo(() => !Boolean(disabled) && !Boolean(readOnly), [disabled, readOnly]);
     // Determine the portal target for the menu
-    const portalTarget = react.useMemo(() => (restProps.menuPortalTarget !== undefined ? restProps.menuPortalTarget : document.body), [restProps.menuPortalTarget]);
+    const portalTarget = react.useMemo(() => (stableRestProps.menuPortalTarget !== undefined ? stableRestProps.menuPortalTarget : document.body), [stableRestProps.menuPortalTarget]);
     // Use custom scroll blocking hook to prevent layout shifts
     // Pass the portal target so we only block scroll when menu is portaled to document.body
     const { blockScroll, restoreScroll } = reactComponents.useScrollBlock(portalTarget);
-    // Store callbacks in refs to keep wrapper callbacks stable
-    // This prevents unnecessary re-renders when parent components don't memoize these callbacks
+    // Store only the wrapped callbacks in refs to keep them stable
+    // We only do this for onMenuOpen and onMenuClose because we wrap them with additional logic
+    // Other callbacks are passed through directly and should trigger recalculation when they change
     const onMenuOpenRef = react.useRef(onMenuOpen);
     const onMenuCloseRef = react.useRef(onMenuClose);
     react.useEffect(() => {
@@ -1735,7 +1756,7 @@ onMenuOpen, onMenuClose, options, value, onChange, defaultValue,
     // Wrap user's onMenuOpen callback to block scrolling
     // We apply scroll blocking directly instead of using react-select's menuShouldBlockScroll
     // because it doesn't properly account for existing body padding, causing layout shifts
-    // See commeont next to menuShouldBlockScroll below for more
+    // See comment next to menuShouldBlockScroll below for more
     const handleMenuOpen = react.useCallback(() => {
         blockScroll();
         onMenuOpenRef.current?.();
@@ -1745,28 +1766,36 @@ 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
+    // Final memoized props object for react-select
+    // Stability strategy:
+    // 1. stableRestProps - deep-equality memoized to prevent reference changes
+    // 2. Extracted props - explicitly listed in dependency array for clear tracking
+    // 3. Callbacks - most passed through directly to allow recalculation when changed
+    // 4. handleMenuOpen/handleMenuClose - wrapped with ref pattern because they contain custom logic
     return react.useMemo(() => {
-        const currentRestProps = restPropsRef.current;
         return {
-            ...currentRestProps,
+            ...stableRestProps,
+            // Explicitly set extracted props
+            id,
+            name,
+            inputId,
+            isLoading,
+            async: asyncProp,
+            required,
+            tabIndex,
+            closeMenuOnScroll,
+            escapeClearsValue,
+            backspaceRemovesValue,
+            noOptionsMessage,
+            loadingMessage,
+            controlShouldRenderValue,
+            // Core props
             options,
             value,
-            onChange,
             defaultValue,
             components: customComponents,
             unstyled: true,
-            "aria-label": currentRestProps.label,
+            "aria-label": label,
             "data-testid": dataTestId ?? "select",
             tabSelectsValue: false,
             blurInputOnSelect: false,
@@ -1774,22 +1803,38 @@ 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 ? (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 ? (openMenuOnClick ?? true) : false,
+            openMenuOnFocus: Boolean(openMenuOnFocus),
+            isMulti,
+            closeMenuOnSelect: !Boolean(isMulti),
             isDisabled: Boolean(disabled),
-            isClearable: Boolean(currentRestProps.isClearable),
-            menuPlacement: currentRestProps.menuPlacement ?? "auto",
-            placeholder: interactable ? currentRestProps.placeholder : undefined,
-            hideSelectedOptions: Boolean(currentRestProps.hideSelectedOptions),
+            isClearable: Boolean(isClearable),
+            menuPlacement: menuPlacement ?? "auto",
+            placeholder: interactable ? placeholder : undefined,
+            hideSelectedOptions: Boolean(hideSelectedOptions),
             menuIsOpen: interactable ? undefined : false, // close it if not interactable, otherwise leave state to react-select
-            // Wire up our custom menu open/close handlers
+            // Pass through callbacks directly (they should trigger recalculation when changed)
+            onChange,
+            onInputChange,
+            onFocus,
+            onBlur,
+            getOptionLabel,
+            getOptionValue,
+            filterOption,
+            formatOptionLabel,
+            formatGroupLabel,
+            isOptionDisabled,
+            isOptionSelected,
+            onKeyDown,
+            onMenuScrollToTop,
+            onMenuScrollToBottom,
+            // Wire up our wrapped menu open/close handlers (with scroll blocking)
             onMenuOpen: handleMenuOpen,
             onMenuClose: handleMenuClose,
             // 👇 putting these here to avoid them _accidentally_ being overwritten in the future👇
@@ -1800,20 +1845,55 @@ onMenuOpen, onMenuClose, options, value, onChange, defaultValue,
             styles: undefined,
         };
     }, [
+        stableRestProps,
+        // Explicitly extracted props
+        id,
+        name,
+        inputId,
+        isLoading,
+        asyncProp,
+        required,
+        tabIndex,
+        closeMenuOnScroll,
+        escapeClearsValue,
+        backspaceRemovesValue,
+        noOptionsMessage,
+        loadingMessage,
+        controlShouldRenderValue,
+        // Core props
+        options,
+        value,
+        defaultValue,
         customComponents,
-        disabled,
-        interactable,
-        handleMenuOpen,
-        handleMenuClose,
+        label,
         dataTestId,
         portalTarget,
-        // Critical props that must trigger recalculation when they change
-        options,
-        value,
+        interactable,
+        isSearchable,
+        openMenuOnClick,
+        openMenuOnFocus,
+        isMulti,
+        disabled,
+        isClearable,
+        menuPlacement,
+        placeholder,
+        hideSelectedOptions,
         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
+        onInputChange,
+        onFocus,
+        onBlur,
+        getOptionLabel,
+        getOptionValue,
+        filterOption,
+        formatOptionLabel,
+        formatGroupLabel,
+        isOptionDisabled,
+        isOptionSelected,
+        onKeyDown,
+        onMenuScrollToTop,
+        onMenuScrollToBottom,
+        handleMenuOpen,
+        handleMenuClose,
     ]);
 };
 
@@ -1833,26 +1913,41 @@ const BaseSelect = (props) => {
 /**
  * A hook used by creatable selects that extends useSelect with creatable-specific functionality
  *
+ * @template TOption - The type of option objects in the select
+ * @template TIsAsync - Boolean flag indicating if the select is async
+ * @template TIsMulti - Boolean flag indicating if the select allows multiple selections
+ * @template TGroup - The group type for grouped options
  * @param props - The props for the CreatableSelect component
- * @returns {ReactCreatableProps} Props for react-select creatable component
+ * @returns {ReactCreatableProps<TOption, TIsMulti, TGroup>} Props for react-select creatable component
  */
 const useCreatableSelect = (props) => {
-    const { onCreateOption, allowCreateWhileLoading, isMulti } = props;
-    const baseSelectProps = useSelect(props);
+    // Extract only creatable-specific props before passing to useSelect
+    // This prevents onCreateOption from triggering recalculation in useSelect
+    // Note: isMulti is NOT extracted - it needs to be passed to useSelect
+    const { onCreateOption, allowCreateWhileLoading, ...selectProps } = props;
+    const baseSelectProps = useSelect(selectProps);
+    // Get isMulti from props for use in this hook
+    const { isMulti } = props;
     // Store onCreateOption in a ref to keep wrapper stable
     // This prevents unnecessary re-renders when parent components don't memoize this callback
     const onCreateOptionRef = react.useRef(onCreateOption);
     react.useEffect(() => {
         onCreateOptionRef.current = onCreateOption;
     }, [onCreateOption]);
+    // Create stable wrapper for onCreateOption callback
+    const handleCreateOption = react.useCallback(inputValue => {
+        onCreateOptionRef.current?.(inputValue);
+    }, []);
+    // Track callback existence with stable boolean
+    const hasOnCreateOption = Boolean(onCreateOption);
     return react.useMemo(() => ({
         ...baseSelectProps,
         allowCreateWhileLoading,
-        onCreateOption: onCreateOptionRef.current,
+        onCreateOption: hasOnCreateOption ? handleCreateOption : undefined,
         // Override some defaults specific to creatable selects
         closeMenuOnSelect: false, // Keep menu open for multi-creation
         blurInputOnSelect: !Boolean(isMulti), // Only blur if not multi
-    }), [baseSelectProps, allowCreateWhileLoading, isMulti]);
+    }), [baseSelectProps, allowCreateWhileLoading, hasOnCreateOption, handleCreateOption, isMulti]);
 };
 
 /**

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;
@@ -1695,34 +1695,55 @@ const getPlaceholderElement = (children) => {
  * @param {SelectProps} props - The props for the Select component
  * @returns {ReactSelectProps} Props for react-select component
  */
-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 }) => {
+const useSelect = (props) => {
+    const { 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
+    options, value, defaultValue, 
+    // Extract callbacks - most are passed through directly to allow recalculation when changed
+    // Only onMenuOpen and onMenuClose get wrapped with ref pattern (see below)
+    onMenuOpen, onMenuClose, onChange, onInputChange, onFocus, onBlur, getOptionLabel, getOptionValue, filterOption, formatOptionLabel, formatGroupLabel, isOptionDisabled, isOptionSelected, onKeyDown, onMenuScrollToTop, onMenuScrollToBottom, 
+    // Extract other props used in final useMemo
+    label, isSearchable, openMenuOnClick, openMenuOnFocus, isMulti, isClearable, menuPlacement, placeholder, hideSelectedOptions, readOnly, 
+    // Extract commonly-used props to prevent them from ending up in restProps
+    // This makes dependency tracking more explicit and improves stability
+    id, name, inputId, isLoading, async: asyncProp, required, tabIndex, closeMenuOnScroll, escapeClearsValue, backspaceRemovesValue, noOptionsMessage, loadingMessage, controlShouldRenderValue, ...restProps } = props;
+    // Deep equality memoization for restProps to achieve hook stability
+    // Problem: restProps is a new object on every render, causing unnecessary recalculations
+    // Solution: Use deep equality check with isEqual to only update when actual values change
+    // Trade-off: Small performance cost of deep comparison vs stability benefits
+    const [stableRestProps, setStableRestProps] = useState(restProps);
+    useEffect(() => {
+        if (!isEqual(stableRestProps, restProps)) {
+            // setState in useEffect is intentional here for deep equality memoization
+            // We only update stableRestProps when the actual values change, not just the object reference
+            queueMicrotask(() => {
+                setStableRestProps(restProps);
+            });
+        }
+    }, [restProps, stableRestProps]);
     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!
+        readOnly: readOnly ?? false, // intentionally not evaluated as boolean, since it can be object too!
         "data-testid": dataTestId ?? "select",
-        prefix: restProps.prefix,
-        hasError: restProps.hasError,
-        fieldSize: restProps.fieldSize,
-        getOptionLabelDescription: restProps.getOptionLabelDescription,
-        getOptionPrefix: restProps.getOptionPrefix,
-        isMulti: restProps.isMulti ?? false,
-        className: restProps.className,
-        autoComplete: restProps.autoComplete,
+        prefix: stableRestProps.prefix,
+        hasError: stableRestProps.hasError,
+        fieldSize: stableRestProps.fieldSize,
+        getOptionLabelDescription: stableRestProps.getOptionLabelDescription,
+        getOptionPrefix: stableRestProps.getOptionPrefix,
+        isMulti: isMulti ?? false,
+        className: stableRestProps.className,
+        autoComplete: stableRestProps.autoComplete,
     });
-    const interactable = useMemo(() => !Boolean(disabled) && !Boolean(restProps.readOnly), [disabled, restProps.readOnly]);
+    const interactable = useMemo(() => !Boolean(disabled) && !Boolean(readOnly), [disabled, readOnly]);
     // Determine the portal target for the menu
-    const portalTarget = useMemo(() => (restProps.menuPortalTarget !== undefined ? restProps.menuPortalTarget : document.body), [restProps.menuPortalTarget]);
+    const portalTarget = useMemo(() => (stableRestProps.menuPortalTarget !== undefined ? stableRestProps.menuPortalTarget : document.body), [stableRestProps.menuPortalTarget]);
     // Use custom scroll blocking hook to prevent layout shifts
     // Pass the portal target so we only block scroll when menu is portaled to document.body
     const { blockScroll, restoreScroll } = useScrollBlock(portalTarget);
-    // Store callbacks in refs to keep wrapper callbacks stable
-    // This prevents unnecessary re-renders when parent components don't memoize these callbacks
+    // Store only the wrapped callbacks in refs to keep them stable
+    // We only do this for onMenuOpen and onMenuClose because we wrap them with additional logic
+    // Other callbacks are passed through directly and should trigger recalculation when they change
     const onMenuOpenRef = useRef(onMenuOpen);
     const onMenuCloseRef = useRef(onMenuClose);
     useEffect(() => {
@@ -1734,7 +1755,7 @@ onMenuOpen, onMenuClose, options, value, onChange, defaultValue,
     // Wrap user's onMenuOpen callback to block scrolling
     // We apply scroll blocking directly instead of using react-select's menuShouldBlockScroll
     // because it doesn't properly account for existing body padding, causing layout shifts
-    // See commeont next to menuShouldBlockScroll below for more
+    // See comment next to menuShouldBlockScroll below for more
     const handleMenuOpen = useCallback(() => {
         blockScroll();
         onMenuOpenRef.current?.();
@@ -1744,28 +1765,36 @@ 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
+    // Final memoized props object for react-select
+    // Stability strategy:
+    // 1. stableRestProps - deep-equality memoized to prevent reference changes
+    // 2. Extracted props - explicitly listed in dependency array for clear tracking
+    // 3. Callbacks - most passed through directly to allow recalculation when changed
+    // 4. handleMenuOpen/handleMenuClose - wrapped with ref pattern because they contain custom logic
     return useMemo(() => {
-        const currentRestProps = restPropsRef.current;
         return {
-            ...currentRestProps,
+            ...stableRestProps,
+            // Explicitly set extracted props
+            id,
+            name,
+            inputId,
+            isLoading,
+            async: asyncProp,
+            required,
+            tabIndex,
+            closeMenuOnScroll,
+            escapeClearsValue,
+            backspaceRemovesValue,
+            noOptionsMessage,
+            loadingMessage,
+            controlShouldRenderValue,
+            // Core props
             options,
             value,
-            onChange,
             defaultValue,
             components: customComponents,
             unstyled: true,
-            "aria-label": currentRestProps.label,
+            "aria-label": label,
             "data-testid": dataTestId ?? "select",
             tabSelectsValue: false,
             blurInputOnSelect: false,
@@ -1773,22 +1802,38 @@ 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 ? (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 ? (openMenuOnClick ?? true) : false,
+            openMenuOnFocus: Boolean(openMenuOnFocus),
+            isMulti,
+            closeMenuOnSelect: !Boolean(isMulti),
             isDisabled: Boolean(disabled),
-            isClearable: Boolean(currentRestProps.isClearable),
-            menuPlacement: currentRestProps.menuPlacement ?? "auto",
-            placeholder: interactable ? currentRestProps.placeholder : undefined,
-            hideSelectedOptions: Boolean(currentRestProps.hideSelectedOptions),
+            isClearable: Boolean(isClearable),
+            menuPlacement: menuPlacement ?? "auto",
+            placeholder: interactable ? placeholder : undefined,
+            hideSelectedOptions: Boolean(hideSelectedOptions),
             menuIsOpen: interactable ? undefined : false, // close it if not interactable, otherwise leave state to react-select
-            // Wire up our custom menu open/close handlers
+            // Pass through callbacks directly (they should trigger recalculation when changed)
+            onChange,
+            onInputChange,
+            onFocus,
+            onBlur,
+            getOptionLabel,
+            getOptionValue,
+            filterOption,
+            formatOptionLabel,
+            formatGroupLabel,
+            isOptionDisabled,
+            isOptionSelected,
+            onKeyDown,
+            onMenuScrollToTop,
+            onMenuScrollToBottom,
+            // Wire up our wrapped menu open/close handlers (with scroll blocking)
             onMenuOpen: handleMenuOpen,
             onMenuClose: handleMenuClose,
             // 👇 putting these here to avoid them _accidentally_ being overwritten in the future👇
@@ -1799,20 +1844,55 @@ onMenuOpen, onMenuClose, options, value, onChange, defaultValue,
             styles: undefined,
         };
     }, [
+        stableRestProps,
+        // Explicitly extracted props
+        id,
+        name,
+        inputId,
+        isLoading,
+        asyncProp,
+        required,
+        tabIndex,
+        closeMenuOnScroll,
+        escapeClearsValue,
+        backspaceRemovesValue,
+        noOptionsMessage,
+        loadingMessage,
+        controlShouldRenderValue,
+        // Core props
+        options,
+        value,
+        defaultValue,
         customComponents,
-        disabled,
-        interactable,
-        handleMenuOpen,
-        handleMenuClose,
+        label,
         dataTestId,
         portalTarget,
-        // Critical props that must trigger recalculation when they change
-        options,
-        value,
+        interactable,
+        isSearchable,
+        openMenuOnClick,
+        openMenuOnFocus,
+        isMulti,
+        disabled,
+        isClearable,
+        menuPlacement,
+        placeholder,
+        hideSelectedOptions,
         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
+        onInputChange,
+        onFocus,
+        onBlur,
+        getOptionLabel,
+        getOptionValue,
+        filterOption,
+        formatOptionLabel,
+        formatGroupLabel,
+        isOptionDisabled,
+        isOptionSelected,
+        onKeyDown,
+        onMenuScrollToTop,
+        onMenuScrollToBottom,
+        handleMenuOpen,
+        handleMenuClose,
     ]);
 };
 
@@ -1832,26 +1912,41 @@ const BaseSelect = (props) => {
 /**
  * A hook used by creatable selects that extends useSelect with creatable-specific functionality
  *
+ * @template TOption - The type of option objects in the select
+ * @template TIsAsync - Boolean flag indicating if the select is async
+ * @template TIsMulti - Boolean flag indicating if the select allows multiple selections
+ * @template TGroup - The group type for grouped options
  * @param props - The props for the CreatableSelect component
- * @returns {ReactCreatableProps} Props for react-select creatable component
+ * @returns {ReactCreatableProps<TOption, TIsMulti, TGroup>} Props for react-select creatable component
  */
 const useCreatableSelect = (props) => {
-    const { onCreateOption, allowCreateWhileLoading, isMulti } = props;
-    const baseSelectProps = useSelect(props);
+    // Extract only creatable-specific props before passing to useSelect
+    // This prevents onCreateOption from triggering recalculation in useSelect
+    // Note: isMulti is NOT extracted - it needs to be passed to useSelect
+    const { onCreateOption, allowCreateWhileLoading, ...selectProps } = props;
+    const baseSelectProps = useSelect(selectProps);
+    // Get isMulti from props for use in this hook
+    const { isMulti } = props;
     // Store onCreateOption in a ref to keep wrapper stable
     // This prevents unnecessary re-renders when parent components don't memoize this callback
     const onCreateOptionRef = useRef(onCreateOption);
     useEffect(() => {
         onCreateOptionRef.current = onCreateOption;
     }, [onCreateOption]);
+    // Create stable wrapper for onCreateOption callback
+    const handleCreateOption = useCallback(inputValue => {
+        onCreateOptionRef.current?.(inputValue);
+    }, []);
+    // Track callback existence with stable boolean
+    const hasOnCreateOption = Boolean(onCreateOption);
     return useMemo(() => ({
         ...baseSelectProps,
         allowCreateWhileLoading,
-        onCreateOption: onCreateOptionRef.current,
+        onCreateOption: hasOnCreateOption ? handleCreateOption : undefined,
         // Override some defaults specific to creatable selects
         closeMenuOnSelect: false, // Keep menu open for multi-creation
         blurInputOnSelect: !Boolean(isMulti), // Only blur if not multi
-    }), [baseSelectProps, allowCreateWhileLoading, isMulti]);
+    }), [baseSelectProps, allowCreateWhileLoading, hasOnCreateOption, handleCreateOption, isMulti]);
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.8.128",
+  "version": "1.8.132",
   "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/useCreatableSelect.d.ts

@@ -4,7 +4,11 @@ import { CreatableSelectProps } from "./CreatableSelect";
 /**
  * A hook used by creatable selects that extends useSelect with creatable-specific functionality
  *
+ * @template TOption - The type of option objects in the select
+ * @template TIsAsync - Boolean flag indicating if the select is async
+ * @template TIsMulti - Boolean flag indicating if the select allows multiple selections
+ * @template TGroup - The group type for grouped options
  * @param props - The props for the CreatableSelect component
- * @returns {ReactCreatableProps} Props for react-select creatable component
+ * @returns {ReactCreatableProps<TOption, TIsMulti, TGroup>} Props for react-select creatable component
  */
 export declare const useCreatableSelect: <TOption, TIsAsync extends boolean = false, TIsMulti extends boolean = false, TGroup extends GroupBase<TOption> = GroupBase<TOption>>(props: CreatableSelectProps<TOption, TIsAsync, TIsMulti, TGroup>) => ReactCreatableProps<TOption, TIsMulti, TGroup>;

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>>(props: SelectProps<TOption, TIsAsync, TIsMulti, TGroup>) => ReactSelectProps<TOption, TIsMulti, TGroup>;