@trackunit/react-form-components 1.27.4 → 1.27.6

package/index.cjs.js

@@ -2407,6 +2407,14 @@ formatOptionLabel, }) => {
     // from this ref, so the latest function is always used.
     const formatOptionLabelRef = react.useRef(formatOptionLabel);
     formatOptionLabelRef.current = formatOptionLabel;
+    const getOptionLabelDescriptionRef = react.useRef(getOptionLabelDescription);
+    getOptionLabelDescriptionRef.current = getOptionLabelDescription;
+    const getOptionPrefixRef = react.useRef(getOptionPrefix);
+    getOptionPrefixRef.current = getOptionPrefix;
+    const resolveOptionPrefixRef = react.useRef(undefined);
+    if (resolveOptionPrefixRef.current === undefined) {
+        resolveOptionPrefixRef.current = (data) => getOptionPrefixRef.current?.(data);
+    }
     // perhaps it should not be wrap in memo (causing some issues with opening and closing on mobiles)
     // Component functions stay stable (reading from refs), so react-select won't lose focus
     const customComponents = react.useMemo(() => {
@@ -2479,10 +2487,11 @@ formatOptionLabel, }) => {
                 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;
+                const optionPrefix = getOptionPrefixRef.current ? getOptionPrefixRef.current(selectSingleValue.data) : null;
+                const optionLabelDescription = getOptionLabelDescriptionRef.current?.(selectSingleValue.data);
                 return (jsxRuntime.jsx(ReactSelect.components.SingleValue, { ...selectSingleValue, className: cvaSelectSingleValue({
                         className: selectSingleValue.className,
-                    }), getStyles: getNoStyles, children: jsxRuntime.jsxs("div", { className: "flex items-center gap-1", "data-testid": dataTestId + "-singleValue", children: [optionPrefix !== null ? optionPrefix : null, selectSingleValue.children, getOptionLabelDescription && getOptionLabelDescription(selectSingleValue.data) ? (jsxRuntime.jsxs("span", { className: "ml-1 text-neutral-400", children: ["(", getOptionLabelDescription(selectSingleValue.data), ")"] })) : null] }) }));
+                    }), getStyles: getNoStyles, children: jsxRuntime.jsxs("div", { className: "flex items-center gap-1", "data-testid": dataTestId + "-singleValue", children: [optionPrefix !== null ? optionPrefix : null, selectSingleValue.children, optionLabelDescription !== undefined && optionLabelDescription !== "" ? (jsxRuntime.jsxs("span", { className: "ml-1 text-neutral-400", children: ["(", optionLabelDescription, ")"] })) : null] }) }));
             },
             MultiValueContainer: ({ children }) => children, // Just pass on the children
             MultiValueRemove: () => null, // is built-in to the MultiValue (tag) component
@@ -2496,7 +2505,7 @@ formatOptionLabel, }) => {
                 return (jsxRuntime.jsx(ReactSelect.components.MultiValue, { ...selectMultiValue, getStyles: getNoStyles, children: jsxRuntime.jsx(MultiValue, { className: cvaSelectMultiValue({
                             hidden: currentIsComplete && index + 1 > currentVisibleCount, // Hide if doesn't fit
                             invisible: currentWithCounter && !currentIsComplete, // Make invisible if measuring with counter. When there's a counter, it would otherwise briefly change layout to make room for the "fake" counter
-                        }), data: selectMultiValue.data, "data-testid": dataTestId ? `${dataTestId}-multiValue-${index}` : undefined, disabled: Boolean(disabled), fieldSize: fieldSize, getOptionPrefix: getOptionPrefix, onClose: selectMultiValue.removeProps.onClick, ref: setGeometryRef(index), removeTagLabel: t("select.multiValue.remove"), children: selectMultiValue.children }) }));
+                        }), data: selectMultiValue.data, "data-testid": dataTestId ? `${dataTestId}-multiValue-${index}` : undefined, disabled: Boolean(disabled), fieldSize: fieldSize, getOptionPrefix: getOptionPrefixRef.current ? resolveOptionPrefixRef.current : undefined, onClose: selectMultiValue.removeProps.onClick, ref: setGeometryRef(index), removeTagLabel: t("select.multiValue.remove"), children: selectMultiValue.children }) }));
             },
             Menu: selectMenu => {
                 return (jsxRuntime.jsx(ReactSelect.components.Menu, { ...selectMenu, className: cvaSelectMenu({ className: selectMenu.className, placement: selectMenu.placement }), getStyles: getNoStyles, innerProps: {
@@ -2542,7 +2551,7 @@ formatOptionLabel, }) => {
                 return (jsxRuntime.jsx(ReactSelect.components.Option, { ...selectOption, innerProps: {
                         ...selectOption.innerProps,
                         role: "option",
-                    }, children: selectOption.isMulti ? (jsxRuntime.jsx(MultiSelectMenuItem, { ...componentProps, "data-testid": typeof selectOption.label === "string" ? selectOption.label : undefined, disabled: Boolean(disabled), fieldSize: fieldSize, optionContent: optionContent, optionLabelDescription: getOptionLabelDescription?.(selectOption.data), optionPrefix: getOptionPrefix?.(selectOption.data) })) : (jsxRuntime.jsx(SingleSelectMenuItem, { ...componentProps, "data-testid": typeof selectOption.label === "string" ? selectOption.label : undefined, disabled: optionDisabled, fieldSize: fieldSize, optionContent: optionContent, optionLabelDescription: getOptionLabelDescription?.(selectOption.data), optionPrefix: getOptionPrefix?.(selectOption.data) })) }));
+                    }, children: selectOption.isMulti ? (jsxRuntime.jsx(MultiSelectMenuItem, { ...componentProps, "data-testid": typeof selectOption.label === "string" ? selectOption.label : undefined, disabled: Boolean(disabled), fieldSize: fieldSize, optionContent: optionContent, optionLabelDescription: getOptionLabelDescriptionRef.current?.(selectOption.data), optionPrefix: getOptionPrefixRef.current?.(selectOption.data) })) : (jsxRuntime.jsx(SingleSelectMenuItem, { ...componentProps, "data-testid": typeof selectOption.label === "string" ? selectOption.label : undefined, disabled: optionDisabled, fieldSize: fieldSize, optionContent: optionContent, optionLabelDescription: getOptionLabelDescriptionRef.current?.(selectOption.data), optionPrefix: getOptionPrefixRef.current?.(selectOption.data) })) }));
             },
         };
     }, [
@@ -2563,8 +2572,6 @@ formatOptionLabel, }) => {
         setCounterRef,
         autoComplete,
         t,
-        getOptionPrefix,
-        getOptionLabelDescription,
         setGeometryRef,
         setMenuRef,
     ]);
@@ -2605,7 +2612,7 @@ const useSelect = (props) => {
     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, 
+    onMenuOpen, onMenuClose, onChange, onInputChange, onFocus, onBlur, getOptionLabel, getOptionValue, filterOption, formatOptionLabel, getOptionLabelDescription, getOptionPrefix, 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
@@ -2632,8 +2639,8 @@ const useSelect = (props) => {
         prefix: stableRestProps.prefix,
         hasError: stableRestProps.hasError,
         fieldSize: stableRestProps.fieldSize,
-        getOptionLabelDescription: stableRestProps.getOptionLabelDescription,
-        getOptionPrefix: stableRestProps.getOptionPrefix,
+        getOptionLabelDescription,
+        getOptionPrefix,
         isMulti: isMulti ?? false,
         className: stableRestProps.className,
         autoComplete: stableRestProps.autoComplete,

package/index.esm.js

@@ -2406,6 +2406,14 @@ formatOptionLabel, }) => {
     // from this ref, so the latest function is always used.
     const formatOptionLabelRef = useRef(formatOptionLabel);
     formatOptionLabelRef.current = formatOptionLabel;
+    const getOptionLabelDescriptionRef = useRef(getOptionLabelDescription);
+    getOptionLabelDescriptionRef.current = getOptionLabelDescription;
+    const getOptionPrefixRef = useRef(getOptionPrefix);
+    getOptionPrefixRef.current = getOptionPrefix;
+    const resolveOptionPrefixRef = useRef(undefined);
+    if (resolveOptionPrefixRef.current === undefined) {
+        resolveOptionPrefixRef.current = (data) => getOptionPrefixRef.current?.(data);
+    }
     // perhaps it should not be wrap in memo (causing some issues with opening and closing on mobiles)
     // Component functions stay stable (reading from refs), so react-select won't lose focus
     const customComponents = useMemo(() => {
@@ -2478,10 +2486,11 @@ formatOptionLabel, }) => {
                 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;
+                const optionPrefix = getOptionPrefixRef.current ? getOptionPrefixRef.current(selectSingleValue.data) : null;
+                const optionLabelDescription = getOptionLabelDescriptionRef.current?.(selectSingleValue.data);
                 return (jsx(components.SingleValue, { ...selectSingleValue, className: cvaSelectSingleValue({
                         className: selectSingleValue.className,
-                    }), getStyles: getNoStyles, children: jsxs("div", { className: "flex items-center gap-1", "data-testid": dataTestId + "-singleValue", children: [optionPrefix !== null ? optionPrefix : null, selectSingleValue.children, getOptionLabelDescription && getOptionLabelDescription(selectSingleValue.data) ? (jsxs("span", { className: "ml-1 text-neutral-400", children: ["(", getOptionLabelDescription(selectSingleValue.data), ")"] })) : null] }) }));
+                    }), getStyles: getNoStyles, children: jsxs("div", { className: "flex items-center gap-1", "data-testid": dataTestId + "-singleValue", children: [optionPrefix !== null ? optionPrefix : null, selectSingleValue.children, optionLabelDescription !== undefined && optionLabelDescription !== "" ? (jsxs("span", { className: "ml-1 text-neutral-400", children: ["(", optionLabelDescription, ")"] })) : null] }) }));
             },
             MultiValueContainer: ({ children }) => children, // Just pass on the children
             MultiValueRemove: () => null, // is built-in to the MultiValue (tag) component
@@ -2495,7 +2504,7 @@ formatOptionLabel, }) => {
                 return (jsx(components.MultiValue, { ...selectMultiValue, getStyles: getNoStyles, children: jsx(MultiValue, { className: cvaSelectMultiValue({
                             hidden: currentIsComplete && index + 1 > currentVisibleCount, // Hide if doesn't fit
                             invisible: currentWithCounter && !currentIsComplete, // Make invisible if measuring with counter. When there's a counter, it would otherwise briefly change layout to make room for the "fake" counter
-                        }), data: selectMultiValue.data, "data-testid": dataTestId ? `${dataTestId}-multiValue-${index}` : undefined, disabled: Boolean(disabled), fieldSize: fieldSize, getOptionPrefix: getOptionPrefix, onClose: selectMultiValue.removeProps.onClick, ref: setGeometryRef(index), removeTagLabel: t("select.multiValue.remove"), children: selectMultiValue.children }) }));
+                        }), data: selectMultiValue.data, "data-testid": dataTestId ? `${dataTestId}-multiValue-${index}` : undefined, disabled: Boolean(disabled), fieldSize: fieldSize, getOptionPrefix: getOptionPrefixRef.current ? resolveOptionPrefixRef.current : undefined, onClose: selectMultiValue.removeProps.onClick, ref: setGeometryRef(index), removeTagLabel: t("select.multiValue.remove"), children: selectMultiValue.children }) }));
             },
             Menu: selectMenu => {
                 return (jsx(components.Menu, { ...selectMenu, className: cvaSelectMenu({ className: selectMenu.className, placement: selectMenu.placement }), getStyles: getNoStyles, innerProps: {
@@ -2541,7 +2550,7 @@ formatOptionLabel, }) => {
                 return (jsx(components.Option, { ...selectOption, innerProps: {
                         ...selectOption.innerProps,
                         role: "option",
-                    }, children: selectOption.isMulti ? (jsx(MultiSelectMenuItem, { ...componentProps, "data-testid": typeof selectOption.label === "string" ? selectOption.label : undefined, disabled: Boolean(disabled), fieldSize: fieldSize, optionContent: optionContent, optionLabelDescription: getOptionLabelDescription?.(selectOption.data), optionPrefix: getOptionPrefix?.(selectOption.data) })) : (jsx(SingleSelectMenuItem, { ...componentProps, "data-testid": typeof selectOption.label === "string" ? selectOption.label : undefined, disabled: optionDisabled, fieldSize: fieldSize, optionContent: optionContent, optionLabelDescription: getOptionLabelDescription?.(selectOption.data), optionPrefix: getOptionPrefix?.(selectOption.data) })) }));
+                    }, children: selectOption.isMulti ? (jsx(MultiSelectMenuItem, { ...componentProps, "data-testid": typeof selectOption.label === "string" ? selectOption.label : undefined, disabled: Boolean(disabled), fieldSize: fieldSize, optionContent: optionContent, optionLabelDescription: getOptionLabelDescriptionRef.current?.(selectOption.data), optionPrefix: getOptionPrefixRef.current?.(selectOption.data) })) : (jsx(SingleSelectMenuItem, { ...componentProps, "data-testid": typeof selectOption.label === "string" ? selectOption.label : undefined, disabled: optionDisabled, fieldSize: fieldSize, optionContent: optionContent, optionLabelDescription: getOptionLabelDescriptionRef.current?.(selectOption.data), optionPrefix: getOptionPrefixRef.current?.(selectOption.data) })) }));
             },
         };
     }, [
@@ -2562,8 +2571,6 @@ formatOptionLabel, }) => {
         setCounterRef,
         autoComplete,
         t,
-        getOptionPrefix,
-        getOptionLabelDescription,
         setGeometryRef,
         setMenuRef,
     ]);
@@ -2604,7 +2611,7 @@ const useSelect = (props) => {
     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, 
+    onMenuOpen, onMenuClose, onChange, onInputChange, onFocus, onBlur, getOptionLabel, getOptionValue, filterOption, formatOptionLabel, getOptionLabelDescription, getOptionPrefix, 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
@@ -2631,8 +2638,8 @@ const useSelect = (props) => {
         prefix: stableRestProps.prefix,
         hasError: stableRestProps.hasError,
         fieldSize: stableRestProps.fieldSize,
-        getOptionLabelDescription: stableRestProps.getOptionLabelDescription,
-        getOptionPrefix: stableRestProps.getOptionPrefix,
+        getOptionLabelDescription,
+        getOptionPrefix,
         isMulti: isMulti ?? false,
         className: stableRestProps.className,
         autoComplete: stableRestProps.autoComplete,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.27.4",
+  "version": "1.27.6",
   "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.6",
+    "@trackunit/date-and-time-utils": "1.13.7",
     "usehooks-ts": "^3.1.0",
     "libphonenumber-js": "^1.12.22",
     "zod": "^3.25.76",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "1.13.6",
-    "@trackunit/react-components": "1.26.3",
-    "@trackunit/ui-icons": "1.13.6",
-    "@trackunit/shared-utils": "1.15.6",
-    "@trackunit/ui-design-tokens": "1.13.6",
-    "@trackunit/i18n-library-translation": "1.22.1",
+    "@trackunit/css-class-variance-utilities": "1.13.7",
+    "@trackunit/react-components": "1.26.4",
+    "@trackunit/ui-icons": "1.13.7",
+    "@trackunit/shared-utils": "1.15.7",
+    "@trackunit/ui-design-tokens": "1.13.7",
+    "@trackunit/i18n-library-translation": "1.22.2",
     "string-ts": "^2.0.0",
     "es-toolkit": "^1.39.10"
   },