@trackunit/react-form-components 0.1.116 → 0.1.117

package/index.cjs.js

@@ -1824,64 +1824,14 @@ const cvaSelectDynamicTagContainer = cssClassVarianceUtilities.cvaMerge(["h-full
 const cvaSelectCounter = cssClassVarianceUtilities.cvaMerge(["overflow-hidden", "whitespace-nowrap"]);
 const cvaSelectMenu = cssClassVarianceUtilities.cvaMerge(["relative", "p-1", "grid", "gap-1"]);
 
-/**
- * @param {MultiValue<Option> | SingleValue<Option>} arg option to check type
- * @returns {arg is MultiValue<Option> } is Multivalue
- */
-function isMultiValue(arg) {
-    return Array.isArray(arg);
-}
-function isGroupBase(arg) {
-    // This is apparently needed
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    return arg.options !== undefined;
-}
-const isSelectedOption = (option, selected) => {
-    if (isGroupBase(option)) {
-        return false;
-    }
-    return isMultiValue(selected)
-        ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            selected.some(v => v.value === option.value)
-        : // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            option.value === (selected === null || selected === void 0 ? void 0 : selected.value);
-};
-const removeSelectedFromGroups = (group, selected) => {
-    if (isGroupBase(group)) {
-        return { ...group, options: group.options.filter(option => !isSelectedOption(option, selected)) };
-    }
-    return group;
-};
-/**
- *  @template IsMulti
- * @template Group
- * @param {OptionsOrGroups<Option, Group> | undefined} options An array of options to select from
- * @param {PropsValue<Option> | undefined} value Selected values
- * @returns {OptionsOrGroups<Option, Group>} An array of ordered options with selected on top
- */
-const getOrderedOptions = (options, value) => {
-    if (value && options) {
-        const orderedValues = isMultiValue(value)
-            ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                [...value].sort((a, b) => a.label.localeCompare(b.label))
-            : [value];
-        const selectableOptions = options
-            .filter(option => !isSelectedOption(option, value))
-            .map(option => removeSelectedFromGroups(option, value));
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return orderedValues.concat(selectableOptions);
-    }
-    return options || [];
-};
-
 /**
  * A single select menu item is a basic wrapper around Menu item designed to be used as a single value render in Select list
  *
  * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
  * @returns {JSX.Element} SingleSelectMenuItem
  */
-const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, disabled, }) => {
-    return (jsxRuntime.jsx(reactComponents.MenuItem, { dataTestId: dataTestId, disabled: disabled, label: label, onClick: onClick, prefix: icon, selected: selected, suffix: selected ? jsxRuntime.jsx(reactComponents.Icon, { name: "Check", size: "small" }) : undefined }));
+const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, disabled, optionLabelDescription, }) => {
+    return (jsxRuntime.jsx(reactComponents.MenuItem, { dataTestId: dataTestId, disabled: disabled, label: label, onClick: onClick, optionLabelDescription: optionLabelDescription, prefix: icon, selected: selected, suffix: selected ? jsxRuntime.jsx(reactComponents.Icon, { name: "Check", size: "small" }) : undefined }));
 };
 /**
  * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
@@ -1889,11 +1839,11 @@ const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, disa
  * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
  * @returns {JSX.Element} multi select menu item
  */
-const MultiSelectMenuItem = ({ label, onClick, selected, dataTestId, disabled }) => {
+const MultiSelectMenuItem = ({ label, onClick, selected, dataTestId, disabled, optionLabelDescription, }) => {
     return (jsxRuntime.jsx(reactComponents.MenuItem, { dataTestId: dataTestId, disabled: disabled, label: label, onClick: e => {
             e.stopPropagation();
             onClick && onClick(e);
-        }, prefix: jsxRuntime.jsx(Checkbox, { checked: selected, disabled: disabled, onChange: () => null, onClick: e => {
+        }, optionLabelDescription: optionLabelDescription, prefix: jsxRuntime.jsx(Checkbox, { checked: selected, disabled: disabled, onChange: () => null, onClick: e => {
                 e.stopPropagation();
             }, readOnly: false }), selected: selected }));
 };
@@ -1992,7 +1942,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled
  * @param {JSX.Element} prefix a prefix element
  * @returns {Partial<SelectComponents<Option, boolean, GroupBase<Option>>> | undefined} components object to override react-select default components
  */
-const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon, prefix, hasError, }) => {
+const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon, prefix, hasError, getOptionLabelDescription, }) => {
     const [t] = useTranslation();
     // perhaps it should not be wrap in memo (causing some issues with opening and closing on mobiles)
     const customComponents = React__namespace.useMemo(() => {
@@ -2056,7 +2006,7 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEna
                     }) }));
             },
             SingleValue: props => {
-                return (jsxRuntime.jsx(ReactSelect.components.SingleValue, { ...props, className: props.isDisabled ? "text-slate-700" : "", children: jsxRuntime.jsx("div", { "data-testid": dataTestId + "-singleValue", children: props.children }) }));
+                return (jsxRuntime.jsx(ReactSelect.components.SingleValue, { ...props, className: props.isDisabled ? "text-slate-700" : "", children: jsxRuntime.jsxs("div", { "data-testid": dataTestId + "-singleValue", children: [props.children, getOptionLabelDescription ? (jsxRuntime.jsxs("span", { className: "text-secondary-400 ml-1", children: ["(", getOptionLabelDescription(props.data), ")"] })) : null] }) }));
             },
             Menu: props => {
                 return (jsxRuntime.jsx(ReactSelect.components.Menu, { ...props, className: cvaSelectMenuList({ menuIsOpen: props.selectProps.menuIsOpen }) }));
@@ -2086,7 +2036,7 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEna
                         ...props.innerProps,
                         role: "option",
                         onClick: () => { },
-                    }, children: props.isMulti ? (jsxRuntime.jsx(MultiSelectMenuItem, { ...componentProps, dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled })) : (jsxRuntime.jsx(SingleSelectMenuItem, { ...componentProps, dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled || props.isDisabled })) }));
+                    }, children: props.isMulti ? (jsxRuntime.jsx(MultiSelectMenuItem, { ...componentProps, dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled, optionLabelDescription: getOptionLabelDescription === null || getOptionLabelDescription === void 0 ? void 0 : getOptionLabelDescription(props.data) })) : (jsxRuntime.jsx(SingleSelectMenuItem, { ...componentProps, dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled || props.isDisabled, optionLabelDescription: getOptionLabelDescription === null || getOptionLabelDescription === void 0 ? void 0 : getOptionLabelDescription(props.data) })) }));
             },
             ...componentsProps,
         };
@@ -2203,7 +2153,7 @@ const useCustomStyles = ({ refContainer, refPrefix, maxSelectedDisplayCount, sty
  * @param {SelectProps} props - The props for the Select component
  * @returns {UseSelectProps} Select component
  */
-const useSelect = ({ id, className, dataTestId = "select", prefix, async, dropdownIcon, maxMenuHeight = 200, label, hasError, disabled, isMulti, components, value, options, onChange, isLoading, classNamePrefix = "", onMenuOpen, onMenuClose, maxSelectedDisplayCount = undefined, isClearable = false, isSearchable = true, onMenuScrollToBottom, styles, filterOption, onInputChange, ...props }) => {
+const useSelect = ({ id, className, dataTestId = "select", prefix, async, dropdownIcon, maxMenuHeight = 200, label, hasError, disabled, isMulti, components, value, options, onChange, isLoading, classNamePrefix = "", onMenuOpen, onMenuClose, maxSelectedDisplayCount = undefined, isClearable = false, isSearchable = true, onMenuScrollToBottom, styles, filterOption, onInputChange, getOptionLabelDescription, ...props }) => {
     var _a;
     const refContainer = React.useRef(null);
     const refPrefix = React.useRef(null);
@@ -2226,6 +2176,7 @@ const useSelect = ({ id, className, dataTestId = "select", prefix, async, dropdo
         dropdownIcon,
         prefix,
         hasError,
+        getOptionLabelDescription,
     });
     const menuPlacement = "auto";
     const openMenuHandler = async () => {
@@ -2241,16 +2192,6 @@ const useSelect = ({ id, className, dataTestId = "select", prefix, async, dropdo
         setMenuIsOpen(false);
         onMenuClose && onMenuClose();
     };
-    const orderedOptions = React.useMemo(() => {
-        return disabled
-            ? getOrderedOptions(options, value).map(option => {
-                return {
-                    ...option,
-                    disabled: true,
-                };
-            })
-            : getOrderedOptions(options, value);
-    }, [options, value, disabled]);
     return {
         refContainer,
         refPrefix,
@@ -2260,7 +2201,6 @@ const useSelect = ({ id, className, dataTestId = "select", prefix, async, dropdo
         menuPlacement,
         openMenuHandler,
         closeMenuHandler,
-        orderedOptions,
     };
 };
 
@@ -2271,8 +2211,8 @@ const useSelect = ({ id, className, dataTestId = "select", prefix, async, dropdo
  * @returns {JSX.Element} CreatableSelect component
  */
 const CreatableSelect = (props) => {
-    const { id, dataTestId = "creatableSelect", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = "creatableSelect", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, allowCreateWhileLoading, onCreateOption, } = props;
-    const { refContainer, refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
+    const { id, dataTestId = "creatableSelect", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = "creatableSelect", onMenuScrollToBottom, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, allowCreateWhileLoading, onCreateOption, } = props;
+    const { refContainer, refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, } = useSelect(props);
     const reactCreatableSelectProps = React.useMemo(() => ({
         value,
         menuPlacement,
@@ -2329,7 +2269,7 @@ const CreatableSelect = (props) => {
         value,
     ]);
     const renderAsDisabled = Boolean(props.disabled) || props.readOnly;
-    return (jsxRuntime.jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: renderAsDisabled, className: props.className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix({ kind: "prefix" }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, ref: refPrefix, children: prefix })) : null, async ? (jsxRuntime.jsx(ReactAsyncCreatableSelect, { ...props, ...reactCreatableSelectProps, ...async, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : props.placeholder })) : (jsxRuntime.jsx(ReactCreatableSelect, { ...props, ...reactCreatableSelectProps, hideSelectedOptions: false, isMulti: isMulti, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options, placeholder: renderAsDisabled ? null : props.placeholder })), typeof props.disabled === "object" ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix({ kind: "suffix" }), "data-testid": dataTestId ? `${dataTestId}-locked` : null, children: jsxRuntime.jsx(DisabledForReasonsTip, { ...props.disabled }) })) : null] }));
+    return (jsxRuntime.jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: renderAsDisabled, className: props.className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix({ kind: "prefix" }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, ref: refPrefix, children: prefix })) : null, async ? (jsxRuntime.jsx(ReactAsyncCreatableSelect, { ...props, ...reactCreatableSelectProps, ...async, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : props.placeholder })) : (jsxRuntime.jsx(ReactCreatableSelect, { ...props, ...reactCreatableSelectProps, hideSelectedOptions: false, isMulti: isMulti, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: options, placeholder: renderAsDisabled ? null : props.placeholder })), typeof props.disabled === "object" ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix({ kind: "suffix" }), "data-testid": dataTestId ? `${dataTestId}-locked` : null, children: jsxRuntime.jsx(DisabledForReasonsTip, { ...props.disabled }) })) : null] }));
 };
 CreatableSelect.displayName = "CreatableSelect";
 
@@ -2340,8 +2280,8 @@ CreatableSelect.displayName = "CreatableSelect";
  * @returns {JSX.Element} Select component
  */
 const Select = (props) => {
-    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, menuPosition = "absolute", value, options, onChange, isLoading, classNamePrefix = "select", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, hideSelectedOptions = false, } = props;
-    const { refContainer, refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
+    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, menuPosition = "absolute", value, options, onChange, isLoading, classNamePrefix = "select", onMenuScrollToBottom, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, hideSelectedOptions = false, } = props;
+    const { refContainer, refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, } = useSelect(props);
     const reactSelectProps = React.useMemo(() => ({
         value,
         menuPlacement,
@@ -2399,7 +2339,7 @@ const Select = (props) => {
         value,
     ]);
     const renderAsDisabled = Boolean(props.disabled) || props.readOnly;
-    return (jsxRuntime.jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: renderAsDisabled, className: props.className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix({ kind: "prefix" }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, ref: refPrefix, children: prefix })) : null, async ? (jsxRuntime.jsx(ReactAsyncSelect, { ...props, ...reactSelectProps, ...async, menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : props.placeholder })) : (jsxRuntime.jsx(ReactSelect, { ...props, ...reactSelectProps, isMulti: isMulti, menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options, placeholder: renderAsDisabled ? null : props.placeholder })), typeof props.disabled === "object" ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix({ kind: "suffix" }), "data-testid": dataTestId ? `${dataTestId}-locked` : null, children: jsxRuntime.jsx(DisabledForReasonsTip, { ...props.disabled }) })) : null] }));
+    return (jsxRuntime.jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: renderAsDisabled, className: props.className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix({ kind: "prefix" }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, ref: refPrefix, children: prefix })) : null, async ? (jsxRuntime.jsx(ReactAsyncSelect, { ...props, ...reactSelectProps, ...async, menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : props.placeholder })) : (jsxRuntime.jsx(ReactSelect, { ...props, ...reactSelectProps, isMulti: isMulti, menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: options, placeholder: renderAsDisabled ? null : props.placeholder })), typeof props.disabled === "object" ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix({ kind: "suffix" }), "data-testid": dataTestId ? `${dataTestId}-locked` : null, children: jsxRuntime.jsx(DisabledForReasonsTip, { ...props.disabled }) })) : null] }));
 };
 Select.displayName = "Select";
 
@@ -2968,11 +2908,9 @@ exports.cvaSelectMenuList = cvaSelectMenuList;
 exports.cvaSelectPrefixSuffix = cvaSelectPrefixSuffix;
 exports.cvaSelectXIcon = cvaSelectXIcon;
 exports.getCountryAbbreviation = getCountryAbbreviation;
-exports.getOrderedOptions = getOrderedOptions;
 exports.getPhoneNumberWithPlus = getPhoneNumberWithPlus;
 exports.isInvalidCountryCode = isInvalidCountryCode;
 exports.isInvalidPhoneNumber = isInvalidPhoneNumber;
-exports.isMultiValue = isMultiValue;
 exports.isValidHEXColor = isValidHEXColor;
 exports.parseSchedule = parseSchedule;
 exports.phoneErrorMessage = phoneErrorMessage;

package/index.esm.js

@@ -1805,64 +1805,14 @@ const cvaSelectDynamicTagContainer = cvaMerge(["h-full", "flex", "gap-1", "items
 const cvaSelectCounter = cvaMerge(["overflow-hidden", "whitespace-nowrap"]);
 const cvaSelectMenu = cvaMerge(["relative", "p-1", "grid", "gap-1"]);
 
-/**
- * @param {MultiValue<Option> | SingleValue<Option>} arg option to check type
- * @returns {arg is MultiValue<Option> } is Multivalue
- */
-function isMultiValue(arg) {
-    return Array.isArray(arg);
-}
-function isGroupBase(arg) {
-    // This is apparently needed
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    return arg.options !== undefined;
-}
-const isSelectedOption = (option, selected) => {
-    if (isGroupBase(option)) {
-        return false;
-    }
-    return isMultiValue(selected)
-        ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            selected.some(v => v.value === option.value)
-        : // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            option.value === (selected === null || selected === void 0 ? void 0 : selected.value);
-};
-const removeSelectedFromGroups = (group, selected) => {
-    if (isGroupBase(group)) {
-        return { ...group, options: group.options.filter(option => !isSelectedOption(option, selected)) };
-    }
-    return group;
-};
-/**
- *  @template IsMulti
- * @template Group
- * @param {OptionsOrGroups<Option, Group> | undefined} options An array of options to select from
- * @param {PropsValue<Option> | undefined} value Selected values
- * @returns {OptionsOrGroups<Option, Group>} An array of ordered options with selected on top
- */
-const getOrderedOptions = (options, value) => {
-    if (value && options) {
-        const orderedValues = isMultiValue(value)
-            ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                [...value].sort((a, b) => a.label.localeCompare(b.label))
-            : [value];
-        const selectableOptions = options
-            .filter(option => !isSelectedOption(option, value))
-            .map(option => removeSelectedFromGroups(option, value));
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return orderedValues.concat(selectableOptions);
-    }
-    return options || [];
-};
-
 /**
  * A single select menu item is a basic wrapper around Menu item designed to be used as a single value render in Select list
  *
  * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
  * @returns {JSX.Element} SingleSelectMenuItem
  */
-const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, disabled, }) => {
-    return (jsx(MenuItem, { dataTestId: dataTestId, disabled: disabled, label: label, onClick: onClick, prefix: icon, selected: selected, suffix: selected ? jsx(Icon, { name: "Check", size: "small" }) : undefined }));
+const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, disabled, optionLabelDescription, }) => {
+    return (jsx(MenuItem, { dataTestId: dataTestId, disabled: disabled, label: label, onClick: onClick, optionLabelDescription: optionLabelDescription, prefix: icon, selected: selected, suffix: selected ? jsx(Icon, { name: "Check", size: "small" }) : undefined }));
 };
 /**
  * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
@@ -1870,11 +1820,11 @@ const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, disa
  * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
  * @returns {JSX.Element} multi select menu item
  */
-const MultiSelectMenuItem = ({ label, onClick, selected, dataTestId, disabled }) => {
+const MultiSelectMenuItem = ({ label, onClick, selected, dataTestId, disabled, optionLabelDescription, }) => {
     return (jsx(MenuItem, { dataTestId: dataTestId, disabled: disabled, label: label, onClick: e => {
             e.stopPropagation();
             onClick && onClick(e);
-        }, prefix: jsx(Checkbox, { checked: selected, disabled: disabled, onChange: () => null, onClick: e => {
+        }, optionLabelDescription: optionLabelDescription, prefix: jsx(Checkbox, { checked: selected, disabled: disabled, onChange: () => null, onClick: e => {
                 e.stopPropagation();
             }, readOnly: false }), selected: selected }));
 };
@@ -1973,7 +1923,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled
  * @param {JSX.Element} prefix a prefix element
  * @returns {Partial<SelectComponents<Option, boolean, GroupBase<Option>>> | undefined} components object to override react-select default components
  */
-const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon, prefix, hasError, }) => {
+const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon, prefix, hasError, getOptionLabelDescription, }) => {
     const [t] = useTranslation();
     // perhaps it should not be wrap in memo (causing some issues with opening and closing on mobiles)
     const customComponents = React.useMemo(() => {
@@ -2037,7 +1987,7 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEna
                     }) }));
             },
             SingleValue: props => {
-                return (jsx(components.SingleValue, { ...props, className: props.isDisabled ? "text-slate-700" : "", children: jsx("div", { "data-testid": dataTestId + "-singleValue", children: props.children }) }));
+                return (jsx(components.SingleValue, { ...props, className: props.isDisabled ? "text-slate-700" : "", children: jsxs("div", { "data-testid": dataTestId + "-singleValue", children: [props.children, getOptionLabelDescription ? (jsxs("span", { className: "text-secondary-400 ml-1", children: ["(", getOptionLabelDescription(props.data), ")"] })) : null] }) }));
             },
             Menu: props => {
                 return (jsx(components.Menu, { ...props, className: cvaSelectMenuList({ menuIsOpen: props.selectProps.menuIsOpen }) }));
@@ -2067,7 +2017,7 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEna
                         ...props.innerProps,
                         role: "option",
                         onClick: () => { },
-                    }, children: props.isMulti ? (jsx(MultiSelectMenuItem, { ...componentProps, dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled })) : (jsx(SingleSelectMenuItem, { ...componentProps, dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled || props.isDisabled })) }));
+                    }, children: props.isMulti ? (jsx(MultiSelectMenuItem, { ...componentProps, dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled, optionLabelDescription: getOptionLabelDescription === null || getOptionLabelDescription === void 0 ? void 0 : getOptionLabelDescription(props.data) })) : (jsx(SingleSelectMenuItem, { ...componentProps, dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled || props.isDisabled, optionLabelDescription: getOptionLabelDescription === null || getOptionLabelDescription === void 0 ? void 0 : getOptionLabelDescription(props.data) })) }));
             },
             ...componentsProps,
         };
@@ -2184,7 +2134,7 @@ const useCustomStyles = ({ refContainer, refPrefix, maxSelectedDisplayCount, sty
  * @param {SelectProps} props - The props for the Select component
  * @returns {UseSelectProps} Select component
  */
-const useSelect = ({ id, className, dataTestId = "select", prefix, async, dropdownIcon, maxMenuHeight = 200, label, hasError, disabled, isMulti, components, value, options, onChange, isLoading, classNamePrefix = "", onMenuOpen, onMenuClose, maxSelectedDisplayCount = undefined, isClearable = false, isSearchable = true, onMenuScrollToBottom, styles, filterOption, onInputChange, ...props }) => {
+const useSelect = ({ id, className, dataTestId = "select", prefix, async, dropdownIcon, maxMenuHeight = 200, label, hasError, disabled, isMulti, components, value, options, onChange, isLoading, classNamePrefix = "", onMenuOpen, onMenuClose, maxSelectedDisplayCount = undefined, isClearable = false, isSearchable = true, onMenuScrollToBottom, styles, filterOption, onInputChange, getOptionLabelDescription, ...props }) => {
     var _a;
     const refContainer = React__default.useRef(null);
     const refPrefix = React__default.useRef(null);
@@ -2207,6 +2157,7 @@ const useSelect = ({ id, className, dataTestId = "select", prefix, async, dropdo
         dropdownIcon,
         prefix,
         hasError,
+        getOptionLabelDescription,
     });
     const menuPlacement = "auto";
     const openMenuHandler = async () => {
@@ -2222,16 +2173,6 @@ const useSelect = ({ id, className, dataTestId = "select", prefix, async, dropdo
         setMenuIsOpen(false);
         onMenuClose && onMenuClose();
     };
-    const orderedOptions = React__default.useMemo(() => {
-        return disabled
-            ? getOrderedOptions(options, value).map(option => {
-                return {
-                    ...option,
-                    disabled: true,
-                };
-            })
-            : getOrderedOptions(options, value);
-    }, [options, value, disabled]);
     return {
         refContainer,
         refPrefix,
@@ -2241,7 +2182,6 @@ const useSelect = ({ id, className, dataTestId = "select", prefix, async, dropdo
         menuPlacement,
         openMenuHandler,
         closeMenuHandler,
-        orderedOptions,
     };
 };
 
@@ -2252,8 +2192,8 @@ const useSelect = ({ id, className, dataTestId = "select", prefix, async, dropdo
  * @returns {JSX.Element} CreatableSelect component
  */
 const CreatableSelect = (props) => {
-    const { id, dataTestId = "creatableSelect", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = "creatableSelect", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, allowCreateWhileLoading, onCreateOption, } = props;
-    const { refContainer, refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
+    const { id, dataTestId = "creatableSelect", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = "creatableSelect", onMenuScrollToBottom, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, allowCreateWhileLoading, onCreateOption, } = props;
+    const { refContainer, refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, } = useSelect(props);
     const reactCreatableSelectProps = useMemo(() => ({
         value,
         menuPlacement,
@@ -2310,7 +2250,7 @@ const CreatableSelect = (props) => {
         value,
     ]);
     const renderAsDisabled = Boolean(props.disabled) || props.readOnly;
-    return (jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: renderAsDisabled, className: props.className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined ? (jsx("div", { className: cvaSelectPrefixSuffix({ kind: "prefix" }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, ref: refPrefix, children: prefix })) : null, async ? (jsx(ReactAsyncCreatableSelect, { ...props, ...reactCreatableSelectProps, ...async, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : props.placeholder })) : (jsx(ReactCreatableSelect, { ...props, ...reactCreatableSelectProps, hideSelectedOptions: false, isMulti: isMulti, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options, placeholder: renderAsDisabled ? null : props.placeholder })), typeof props.disabled === "object" ? (jsx("div", { className: cvaSelectPrefixSuffix({ kind: "suffix" }), "data-testid": dataTestId ? `${dataTestId}-locked` : null, children: jsx(DisabledForReasonsTip, { ...props.disabled }) })) : null] }));
+    return (jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: renderAsDisabled, className: props.className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined ? (jsx("div", { className: cvaSelectPrefixSuffix({ kind: "prefix" }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, ref: refPrefix, children: prefix })) : null, async ? (jsx(ReactAsyncCreatableSelect, { ...props, ...reactCreatableSelectProps, ...async, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : props.placeholder })) : (jsx(ReactCreatableSelect, { ...props, ...reactCreatableSelectProps, hideSelectedOptions: false, isMulti: isMulti, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: options, placeholder: renderAsDisabled ? null : props.placeholder })), typeof props.disabled === "object" ? (jsx("div", { className: cvaSelectPrefixSuffix({ kind: "suffix" }), "data-testid": dataTestId ? `${dataTestId}-locked` : null, children: jsx(DisabledForReasonsTip, { ...props.disabled }) })) : null] }));
 };
 CreatableSelect.displayName = "CreatableSelect";
 
@@ -2321,8 +2261,8 @@ CreatableSelect.displayName = "CreatableSelect";
  * @returns {JSX.Element} Select component
  */
 const Select = (props) => {
-    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, menuPosition = "absolute", value, options, onChange, isLoading, classNamePrefix = "select", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, hideSelectedOptions = false, } = props;
-    const { refContainer, refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
+    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, menuPosition = "absolute", value, options, onChange, isLoading, classNamePrefix = "select", onMenuScrollToBottom, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, hideSelectedOptions = false, } = props;
+    const { refContainer, refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, } = useSelect(props);
     const reactSelectProps = useMemo(() => ({
         value,
         menuPlacement,
@@ -2380,7 +2320,7 @@ const Select = (props) => {
         value,
     ]);
     const renderAsDisabled = Boolean(props.disabled) || props.readOnly;
-    return (jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: renderAsDisabled, className: props.className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined ? (jsx("div", { className: cvaSelectPrefixSuffix({ kind: "prefix" }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, ref: refPrefix, children: prefix })) : null, async ? (jsx(ReactAsyncSelect, { ...props, ...reactSelectProps, ...async, menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : props.placeholder })) : (jsx(ReactSelect, { ...props, ...reactSelectProps, isMulti: isMulti, menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options, placeholder: renderAsDisabled ? null : props.placeholder })), typeof props.disabled === "object" ? (jsx("div", { className: cvaSelectPrefixSuffix({ kind: "suffix" }), "data-testid": dataTestId ? `${dataTestId}-locked` : null, children: jsx(DisabledForReasonsTip, { ...props.disabled }) })) : null] }));
+    return (jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: renderAsDisabled, className: props.className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined ? (jsx("div", { className: cvaSelectPrefixSuffix({ kind: "prefix" }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, ref: refPrefix, children: prefix })) : null, async ? (jsx(ReactAsyncSelect, { ...props, ...reactSelectProps, ...async, menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : props.placeholder })) : (jsx(ReactSelect, { ...props, ...reactSelectProps, isMulti: isMulti, menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: options, placeholder: renderAsDisabled ? null : props.placeholder })), typeof props.disabled === "object" ? (jsx("div", { className: cvaSelectPrefixSuffix({ kind: "suffix" }), "data-testid": dataTestId ? `${dataTestId}-locked` : null, children: jsx(DisabledForReasonsTip, { ...props.disabled }) })) : null] }));
 };
 Select.displayName = "Select";
 
@@ -2879,4 +2819,4 @@ const useZodValidators = () => {
  */
 setupLibraryTranslations();
 
-export { ActionButton, BaseInput, Checkbox, CheckboxField, ColorField, CreatableSelect, CreatableSelectField, DateField, DateInput, DropZone, DropZoneDefaultLabel, EMAIL_REGEX, EmailField, EmailInput, FormFieldSelectAdapter, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PasswordField, PasswordInput, PhoneField, PhoneFieldWithController, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SelectField, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, UrlField, UrlInput, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaActionButton, cvaActionContainer, cvaInput, cvaInputAction, cvaInputAddon, cvaInputAddonAfter, cvaInputAddonBefore, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputPrefix, cvaInputSuffix, cvaSelect, cvaSelectControl, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefixSuffix, cvaSelectXIcon, getCountryAbbreviation, getOrderedOptions, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isMultiValue, isValidHEXColor, parseSchedule, phoneErrorMessage, serializeSchedule, useCustomComponents, useGetPhoneValidationRules, usePhoneInput, useZodValidators, validateEmailAddress, validatePhoneNumber, weekDay };
+export { ActionButton, BaseInput, Checkbox, CheckboxField, ColorField, CreatableSelect, CreatableSelectField, DateField, DateInput, DropZone, DropZoneDefaultLabel, EMAIL_REGEX, EmailField, EmailInput, FormFieldSelectAdapter, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PasswordField, PasswordInput, PhoneField, PhoneFieldWithController, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SelectField, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, UrlField, UrlInput, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaActionButton, cvaActionContainer, cvaInput, cvaInputAction, cvaInputAddon, cvaInputAddonAfter, cvaInputAddonBefore, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputPrefix, cvaInputSuffix, cvaSelect, cvaSelectControl, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefixSuffix, cvaSelectXIcon, getCountryAbbreviation, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isValidHEXColor, parseSchedule, phoneErrorMessage, serializeSchedule, useCustomComponents, useGetPhoneValidationRules, usePhoneInput, useZodValidators, validateEmailAddress, validatePhoneNumber, weekDay };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "0.1.116",
+  "version": "0.1.117",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/Select/SelectMenuItem/SelectMenuItem.d.ts

@@ -19,6 +19,11 @@ interface SelectMenuItemProps extends CommonProps {
      * used in disabled select options
      */
     disabled?: boolean;
+    /**
+     * A value to be displayed after the label value itself
+     * Such as a description or a hint for the option
+     */
+    optionLabelDescription?: string;
 }
 export interface SingleSelectMenuItemProps extends SelectMenuItemProps {
     /**
@@ -33,12 +38,12 @@ export interface SingleSelectMenuItemProps extends SelectMenuItemProps {
  * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
  * @returns {JSX.Element} SingleSelectMenuItem
  */
-export declare const SingleSelectMenuItem: ({ label, icon, onClick, selected, dataTestId, disabled, }: SingleSelectMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SingleSelectMenuItem: ({ label, icon, onClick, selected, dataTestId, disabled, optionLabelDescription, }: SingleSelectMenuItemProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
  *
  * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
  * @returns {JSX.Element} multi select menu item
  */
-export declare const MultiSelectMenuItem: ({ label, onClick, selected, dataTestId, disabled }: SelectMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MultiSelectMenuItem: ({ label, onClick, selected, dataTestId, disabled, optionLabelDescription, }: SelectMenuItemProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/Select/index.d.ts

@@ -3,6 +3,5 @@ export * from "./CreatableSelect";
 export * from "./Select";
 export * from "./Select.variants";
 export * from "./SelectMenuItem/SelectMenuItem";
-export * from "./shared";
 export * from "./useCustomComponents";
 export { ValueType };

package/src/components/Select/useCustomComponents.d.ts

@@ -18,7 +18,7 @@ import { SelectComponents } from "react-select/dist/declarations/src/components"
  * @param {JSX.Element} prefix a prefix element
  * @returns {Partial<SelectComponents<Option, boolean, GroupBase<Option>>> | undefined} components object to override react-select default components
  */
-export declare const useCustomComponents: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ componentsProps, disabled, readOnly, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon, prefix, hasError, }: {
+export declare const useCustomComponents: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ componentsProps, disabled, readOnly, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon, prefix, hasError, getOptionLabelDescription, }: {
     componentsProps: Partial<SelectComponents<Option, IsMulti, Group>> | undefined;
     disabled: boolean;
     readOnly: boolean;
@@ -28,4 +28,5 @@ export declare const useCustomComponents: <Option, IsMulti extends boolean = fal
     dropdownIcon?: JSX.Element;
     prefix?: JSX.Element;
     hasError?: boolean;
+    getOptionLabelDescription?: (option: Option) => string;
 }) => Partial<SelectComponents<Option, IsMulti, Group>>;

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

@@ -122,6 +122,12 @@ export type SelectProps<Option, IsAsync extends boolean, IsMulti extends boolean
      * @memberof SelectProps
      */
     hideSelectedOptions?: boolean;
+    /**
+     * This callback returns
+     *
+     * @memberof SelectProps
+     */
+    getOptionLabelDescription?: (option: Option) => string;
 };
 interface UseSelectProps<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> {
     customStyles: StylesConfig<Option, IsMulti, Group>;
@@ -132,7 +138,6 @@ interface UseSelectProps<Option, IsMulti extends boolean = false, Group extends
     menuPlacement: MenuPlacement;
     openMenuHandler: () => Promise<void>;
     closeMenuHandler: () => void;
-    orderedOptions: OptionsOrGroups<Option, Group>;
 }
 /**
  * A hook used by selects to share the common code
@@ -140,5 +145,5 @@ interface UseSelectProps<Option, IsMulti extends boolean = false, Group extends
  * @param {SelectProps} props - The props for the Select component
  * @returns {UseSelectProps} Select component
  */
-export declare const useSelect: <Option, IsAsync extends boolean = false, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id, className, dataTestId, prefix, async, dropdownIcon, maxMenuHeight, label, hasError, disabled, isMulti, components, value, options, onChange, isLoading, classNamePrefix, onMenuOpen, onMenuClose, maxSelectedDisplayCount, isClearable, isSearchable, onMenuScrollToBottom, styles, filterOption, onInputChange, ...props }: SelectProps<Option, IsAsync, IsMulti, Group>) => UseSelectProps<Option, IsMulti, Group>;
+export declare const useSelect: <Option, IsAsync extends boolean = false, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id, className, dataTestId, prefix, async, dropdownIcon, maxMenuHeight, label, hasError, disabled, isMulti, components, value, options, onChange, isLoading, classNamePrefix, onMenuOpen, onMenuClose, maxSelectedDisplayCount, isClearable, isSearchable, onMenuScrollToBottom, styles, filterOption, onInputChange, getOptionLabelDescription, ...props }: SelectProps<Option, IsAsync, IsMulti, Group>) => UseSelectProps<Option, IsMulti, Group>;
 export {};

package/src/components/Select/shared.d.ts

@@ -1,14 +0,0 @@
-import { GroupBase, MultiValue, OptionsOrGroups, PropsValue, SingleValue } from "react-select";
-/**
- * @param {MultiValue<Option> | SingleValue<Option>} arg option to check type
- * @returns {arg is MultiValue<Option> } is Multivalue
- */
-export declare function isMultiValue<TOption>(arg: MultiValue<TOption> | SingleValue<TOption>): arg is MultiValue<TOption>;
-/**
- *  @template IsMulti
- * @template Group
- * @param {OptionsOrGroups<Option, Group> | undefined} options An array of options to select from
- * @param {PropsValue<Option> | undefined} value Selected values
- * @returns {OptionsOrGroups<Option, Group>} An array of ordered options with selected on top
- */
-export declare const getOrderedOptions: <TOption, TGroup extends GroupBase<TOption>>(options: OptionsOrGroups<TOption, TGroup> | undefined, value: PropsValue<TOption> | undefined) => OptionsOrGroups<TOption, TGroup>;