@trackunit/react-form-components 1.7.5 → 1.7.10

package/index.cjs.js

@@ -2051,8 +2051,13 @@ const cvaSelectMenu = cssClassVarianceUtilities.cvaMerge(["relative", "p-1", "gr
  * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
  * @returns {ReactElement} SingleSelectMenuItem
  */
-const SingleSelectMenuItem = ({ label, icon, onClick, selected, focused, dataTestId, disabled, optionLabelDescription, fieldSize, }) => {
-    return (jsxRuntime.jsx(reactComponents.MenuItem, { dataTestId: dataTestId, disabled: disabled, fieldSize: fieldSize, focused: focused, label: label, onClick: onClick, optionLabelDescription: optionLabelDescription, prefix: icon, selected: selected, suffix: selected ? jsxRuntime.jsx(reactComponents.Icon, { className: "block text-blue-600", name: "Check", size: "medium" }) : undefined }));
+const SingleSelectMenuItem = ({ label, icon, onClick, selected, focused, dataTestId, disabled, optionLabelDescription, optionPrefix, fieldSize, }) => {
+    return (jsxRuntime.jsx(reactComponents.MenuItem, { dataTestId: dataTestId, disabled: disabled, fieldSize: fieldSize, focused: focused, label: label, onClick: onClick, optionLabelDescription: optionLabelDescription, optionPrefix: react.isValidElement(optionPrefix)
+            ? react.cloneElement(optionPrefix, {
+                className: "mr-1 flex items-center",
+                size: "medium",
+            })
+            : optionPrefix, prefix: icon, selected: selected, suffix: selected ? jsxRuntime.jsx(reactComponents.Icon, { className: "block text-blue-600", name: "Check", size: "medium" }) : 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
@@ -2060,11 +2065,16 @@ const SingleSelectMenuItem = ({ label, icon, onClick, selected, focused, dataTes
  * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
  * @returns {ReactElement} multi select menu item
  */
-const MultiSelectMenuItem = ({ label, onClick, selected, focused, dataTestId, disabled, optionLabelDescription, fieldSize, }) => {
+const MultiSelectMenuItem = ({ label, onClick, selected, focused, dataTestId, disabled, optionLabelDescription, optionPrefix, fieldSize, }) => {
     return (jsxRuntime.jsx(reactComponents.MenuItem, { dataTestId: dataTestId, disabled: disabled, fieldSize: fieldSize, focused: focused, label: label, onClick: e => {
             e.stopPropagation();
             onClick && onClick(e);
-        }, optionLabelDescription: optionLabelDescription, prefix: jsxRuntime.jsx(Checkbox, { checked: selected, disabled: disabled, onChange: () => null, onClick: e => {
+        }, optionLabelDescription: optionLabelDescription, optionPrefix: react.isValidElement(optionPrefix)
+            ? react.cloneElement(optionPrefix, {
+                className: "mr-1 flex items-center",
+                size: "medium",
+            })
+            : optionPrefix, prefix: jsxRuntime.jsx(Checkbox, { checked: selected, className: "gap-x-0", disabled: disabled, onChange: () => null, onClick: e => {
                 e.stopPropagation();
             }, readOnly: false }), selected: selected }));
 };
@@ -2081,7 +2091,7 @@ const TagWithWidth = ({ onWidthKnown, children, ...rest }) => {
     react.useLayoutEffect(() => {
         onWidthKnown && onWidthKnown({ width: ref.current?.offsetWidth || 0 });
     }, [ref, onWidthKnown]);
-    return (jsxRuntime.jsx(reactComponents.Tag, { ref: ref, ...rest, children: children }));
+    return (jsxRuntime.jsx(reactComponents.Tag, { ref: ref, ...rest, icon: react.isValidElement(rest.icon) ? react.cloneElement(rest.icon, { size: "small" }) : rest.icon, children: children }));
 };
 
 /**
@@ -2130,7 +2140,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 6, postFix, disabled
                     ...acc,
                     elements: [
                         ...acc.elements,
-                        jsxRuntime.jsx(TagWithWidth, { color: "white", disabled: disabled, onWidthKnown: ({ width: reportedWidth }) => setCounterWidth(reportedWidth), children: jsxRuntime.jsxs("div", { className: cvaSelectCounter(), "data-testid": "select-counter", children: ["+", acc.counter] }) }, item.text + index),
+                        jsxRuntime.jsx(TagWithWidth, { color: "white", disabled: disabled, icon: item.Icon, onWidthKnown: ({ width: reportedWidth }) => setCounterWidth(reportedWidth), children: jsxRuntime.jsxs("div", { className: cvaSelectCounter(), "data-testid": "select-counter", children: ["+", acc.counter] }) }, item.text + index),
                     ],
                 };
             }
@@ -2143,7 +2153,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 6, postFix, disabled
                     ...acc,
                     elements: [
                         ...acc.elements,
-                        jsxRuntime.jsx(TagWithWidth, { className: "inline-flex shrink-0", color: item.disabled ? "neutral" : "white", dataTestId: `${item.text}-tag`, disabled: disabled, onClose: e => {
+                        jsxRuntime.jsx(TagWithWidth, { className: "inline-flex shrink-0", color: item.disabled ? "neutral" : "white", dataTestId: `${item.text}-tag`, disabled: disabled, icon: item.Icon, onClose: e => {
                                 e.stopPropagation();
                                 item.onClick();
                             }, onWidthKnown: onWidthKnownHandler, children: item.text }, item.text + index),
@@ -2177,7 +2187,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 6, postFix, disabled
  * @param {ReactNode} 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, setMenuIsEnabled, dataTestId, maxSelectedDisplayCount, prefix, hasError, fieldSize, getOptionLabelDescription, }) => {
+const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEnabled, dataTestId, maxSelectedDisplayCount, prefix, hasError, fieldSize, getOptionLabelDescription, getOptionPrefix, }) => {
     const [t] = useTranslation();
     // perhaps it should not be wrap in memo (causing some issues with opening and closing on mobiles)
     const customComponents = react.useMemo(() => {
@@ -2194,6 +2204,7 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEna
                     const searchInput = props && props.children && props.children[1];
                     return (jsxRuntime.jsx(ReactSelect.components.ValueContainer, { ...props, isDisabled: props.selectProps.isDisabled, children: maxSelectedDisplayCount === undefined ? (jsxRuntime.jsx(TagsContainer, { disabled: disabled, items: tags
                                 ? tags.map(({ props: tagProps }) => {
+                                    const optionPrefix = tagProps.data && getOptionPrefix ? getOptionPrefix(tagProps.data) : null;
                                     return {
                                         text: tagProps.children,
                                         onClick: disabled
@@ -2203,6 +2214,7 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEna
                                                 tagProps.removeProps.onClick && tagProps.removeProps.onClick(e);
                                             },
                                         disabled: disabled,
+                                        Icon: optionPrefix,
                                     };
                                 })
                                 : [], postFix: searchInput, width: "100%" })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [tags
@@ -2244,7 +2256,8 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEna
                     }) }));
             },
             SingleValue: props => {
-                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 && getOptionLabelDescription(props.data) ? (jsxRuntime.jsxs("span", { className: "text-secondary-400 ml-1", children: ["(", getOptionLabelDescription(props.data), ")"] })) : null] }) }));
+                const optionPrefix = getOptionPrefix ? getOptionPrefix(props.data) : null;
+                return (jsxRuntime.jsx(ReactSelect.components.SingleValue, { ...props, className: props.isDisabled ? "text-slate-700" : "", children: jsxRuntime.jsxs("div", { className: "flex items-center gap-1", "data-testid": dataTestId + "-singleValue", children: [optionPrefix !== null ? optionPrefix : null, props.children, getOptionLabelDescription && getOptionLabelDescription(props.data) ? (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 }) }));
@@ -2277,22 +2290,23 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEna
                         ...props.innerProps,
                         role: "option",
                         onClick: () => { },
-                    }, children: props.isMulti ? (jsxRuntime.jsx(MultiSelectMenuItem, { ...componentProps, dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled, fieldSize: fieldSize, optionLabelDescription: getOptionLabelDescription?.(props.data) })) : (jsxRuntime.jsx(SingleSelectMenuItem, { ...componentProps, dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled || props.isDisabled, fieldSize: fieldSize, optionLabelDescription: getOptionLabelDescription?.(props.data) })) }));
+                    }, children: props.isMulti ? (jsxRuntime.jsx(MultiSelectMenuItem, { ...componentProps, dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled, fieldSize: fieldSize, optionLabelDescription: getOptionLabelDescription?.(props.data), optionPrefix: getOptionPrefix?.(props.data) })) : (jsxRuntime.jsx(SingleSelectMenuItem, { ...componentProps, dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled || props.isDisabled, fieldSize: fieldSize, optionLabelDescription: getOptionLabelDescription?.(props.data), optionPrefix: getOptionPrefix?.(props.data) })) }));
             },
             ...componentsProps,
         };
     }, [
         componentsProps,
-        disabled,
-        fieldSize,
-        getOptionLabelDescription,
-        hasError,
         maxSelectedDisplayCount,
-        prefix,
-        readOnly,
+        disabled,
         setMenuIsEnabled,
-        t,
+        readOnly,
         dataTestId,
+        t,
+        prefix,
+        hasError,
+        getOptionLabelDescription,
+        fieldSize,
+        getOptionPrefix,
     ]);
     return customComponents;
 };
@@ -2405,7 +2419,7 @@ const useCustomStyles = ({ refContainer, maxSelectedDisplayCount, styles, disabl
  * @param {SelectProps} props - The props for the Select component
  * @returns {UseSelectProps} Select component
  */
-const useSelect = ({ id, className, dataTestId = "select", prefix, async, 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, fieldSize = "medium", ...props }) => {
+const useSelect = ({ id, className, dataTestId = "select", prefix, async, 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, getOptionPrefix, fieldSize = "medium", ...props }) => {
     const refContainer = react.useRef(document.createElement("div"));
     const { customStyles } = useCustomStyles({
         refContainer,
@@ -2427,6 +2441,7 @@ const useSelect = ({ id, className, dataTestId = "select", prefix, async, maxMen
         hasError,
         fieldSize,
         getOptionLabelDescription,
+        getOptionPrefix,
     });
     const menuPlacement = "auto";
     const openMenuHandler = async () => {

package/index.esm.js

@@ -4,7 +4,7 @@ import { IconButton, Icon, Tooltip, useGeometry, useIsTextTruncated, Text, Headi
 import { useCopyToClipboard } from 'usehooks-ts';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { themeSpacing } from '@trackunit/ui-design-tokens';
-import { forwardRef, useRef, useImperativeHandle, useMemo, useState, useCallback, useEffect, cloneElement, createContext, useContext, useLayoutEffect } from 'react';
+import { forwardRef, useRef, useImperativeHandle, useMemo, useState, useCallback, useEffect, cloneElement, createContext, useContext, isValidElement, useLayoutEffect } from 'react';
 import { titleCase } from 'string-ts';
 import { uuidv4, nonNullable } from '@trackunit/shared-utils';
 import { Temporal } from '@js-temporal/polyfill';
@@ -2050,8 +2050,13 @@ const cvaSelectMenu = cvaMerge(["relative", "p-1", "grid", "gap-1"]);
  * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
  * @returns {ReactElement} SingleSelectMenuItem
  */
-const SingleSelectMenuItem = ({ label, icon, onClick, selected, focused, dataTestId, disabled, optionLabelDescription, fieldSize, }) => {
-    return (jsx(MenuItem, { dataTestId: dataTestId, disabled: disabled, fieldSize: fieldSize, focused: focused, label: label, onClick: onClick, optionLabelDescription: optionLabelDescription, prefix: icon, selected: selected, suffix: selected ? jsx(Icon, { className: "block text-blue-600", name: "Check", size: "medium" }) : undefined }));
+const SingleSelectMenuItem = ({ label, icon, onClick, selected, focused, dataTestId, disabled, optionLabelDescription, optionPrefix, fieldSize, }) => {
+    return (jsx(MenuItem, { dataTestId: dataTestId, disabled: disabled, fieldSize: fieldSize, focused: focused, label: label, onClick: onClick, optionLabelDescription: optionLabelDescription, optionPrefix: isValidElement(optionPrefix)
+            ? cloneElement(optionPrefix, {
+                className: "mr-1 flex items-center",
+                size: "medium",
+            })
+            : optionPrefix, prefix: icon, selected: selected, suffix: selected ? jsx(Icon, { className: "block text-blue-600", name: "Check", size: "medium" }) : 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
@@ -2059,11 +2064,16 @@ const SingleSelectMenuItem = ({ label, icon, onClick, selected, focused, dataTes
  * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
  * @returns {ReactElement} multi select menu item
  */
-const MultiSelectMenuItem = ({ label, onClick, selected, focused, dataTestId, disabled, optionLabelDescription, fieldSize, }) => {
+const MultiSelectMenuItem = ({ label, onClick, selected, focused, dataTestId, disabled, optionLabelDescription, optionPrefix, fieldSize, }) => {
     return (jsx(MenuItem, { dataTestId: dataTestId, disabled: disabled, fieldSize: fieldSize, focused: focused, label: label, onClick: e => {
             e.stopPropagation();
             onClick && onClick(e);
-        }, optionLabelDescription: optionLabelDescription, prefix: jsx(Checkbox, { checked: selected, disabled: disabled, onChange: () => null, onClick: e => {
+        }, optionLabelDescription: optionLabelDescription, optionPrefix: isValidElement(optionPrefix)
+            ? cloneElement(optionPrefix, {
+                className: "mr-1 flex items-center",
+                size: "medium",
+            })
+            : optionPrefix, prefix: jsx(Checkbox, { checked: selected, className: "gap-x-0", disabled: disabled, onChange: () => null, onClick: e => {
                 e.stopPropagation();
             }, readOnly: false }), selected: selected }));
 };
@@ -2080,7 +2090,7 @@ const TagWithWidth = ({ onWidthKnown, children, ...rest }) => {
     useLayoutEffect(() => {
         onWidthKnown && onWidthKnown({ width: ref.current?.offsetWidth || 0 });
     }, [ref, onWidthKnown]);
-    return (jsx(Tag, { ref: ref, ...rest, children: children }));
+    return (jsx(Tag, { ref: ref, ...rest, icon: isValidElement(rest.icon) ? cloneElement(rest.icon, { size: "small" }) : rest.icon, children: children }));
 };
 
 /**
@@ -2129,7 +2139,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 6, postFix, disabled
                     ...acc,
                     elements: [
                         ...acc.elements,
-                        jsx(TagWithWidth, { color: "white", disabled: disabled, onWidthKnown: ({ width: reportedWidth }) => setCounterWidth(reportedWidth), children: jsxs("div", { className: cvaSelectCounter(), "data-testid": "select-counter", children: ["+", acc.counter] }) }, item.text + index),
+                        jsx(TagWithWidth, { color: "white", disabled: disabled, icon: item.Icon, onWidthKnown: ({ width: reportedWidth }) => setCounterWidth(reportedWidth), children: jsxs("div", { className: cvaSelectCounter(), "data-testid": "select-counter", children: ["+", acc.counter] }) }, item.text + index),
                     ],
                 };
             }
@@ -2142,7 +2152,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 6, postFix, disabled
                     ...acc,
                     elements: [
                         ...acc.elements,
-                        jsx(TagWithWidth, { className: "inline-flex shrink-0", color: item.disabled ? "neutral" : "white", dataTestId: `${item.text}-tag`, disabled: disabled, onClose: e => {
+                        jsx(TagWithWidth, { className: "inline-flex shrink-0", color: item.disabled ? "neutral" : "white", dataTestId: `${item.text}-tag`, disabled: disabled, icon: item.Icon, onClose: e => {
                                 e.stopPropagation();
                                 item.onClick();
                             }, onWidthKnown: onWidthKnownHandler, children: item.text }, item.text + index),
@@ -2176,7 +2186,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 6, postFix, disabled
  * @param {ReactNode} 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, setMenuIsEnabled, dataTestId, maxSelectedDisplayCount, prefix, hasError, fieldSize, getOptionLabelDescription, }) => {
+const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEnabled, dataTestId, maxSelectedDisplayCount, prefix, hasError, fieldSize, getOptionLabelDescription, getOptionPrefix, }) => {
     const [t] = useTranslation();
     // perhaps it should not be wrap in memo (causing some issues with opening and closing on mobiles)
     const customComponents = useMemo(() => {
@@ -2193,6 +2203,7 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEna
                     const searchInput = props && props.children && props.children[1];
                     return (jsx(components.ValueContainer, { ...props, isDisabled: props.selectProps.isDisabled, children: maxSelectedDisplayCount === undefined ? (jsx(TagsContainer, { disabled: disabled, items: tags
                                 ? tags.map(({ props: tagProps }) => {
+                                    const optionPrefix = tagProps.data && getOptionPrefix ? getOptionPrefix(tagProps.data) : null;
                                     return {
                                         text: tagProps.children,
                                         onClick: disabled
@@ -2202,6 +2213,7 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEna
                                                 tagProps.removeProps.onClick && tagProps.removeProps.onClick(e);
                                             },
                                         disabled: disabled,
+                                        Icon: optionPrefix,
                                     };
                                 })
                                 : [], postFix: searchInput, width: "100%" })) : (jsxs(Fragment, { children: [tags
@@ -2243,7 +2255,8 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEna
                     }) }));
             },
             SingleValue: props => {
-                return (jsx(components.SingleValue, { ...props, className: props.isDisabled ? "text-slate-700" : "", children: jsxs("div", { "data-testid": dataTestId + "-singleValue", children: [props.children, getOptionLabelDescription && getOptionLabelDescription(props.data) ? (jsxs("span", { className: "text-secondary-400 ml-1", children: ["(", getOptionLabelDescription(props.data), ")"] })) : null] }) }));
+                const optionPrefix = getOptionPrefix ? getOptionPrefix(props.data) : null;
+                return (jsx(components.SingleValue, { ...props, className: props.isDisabled ? "text-slate-700" : "", children: jsxs("div", { className: "flex items-center gap-1", "data-testid": dataTestId + "-singleValue", children: [optionPrefix !== null ? optionPrefix : null, props.children, getOptionLabelDescription && getOptionLabelDescription(props.data) ? (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 }) }));
@@ -2276,22 +2289,23 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEna
                         ...props.innerProps,
                         role: "option",
                         onClick: () => { },
-                    }, children: props.isMulti ? (jsx(MultiSelectMenuItem, { ...componentProps, dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled, fieldSize: fieldSize, optionLabelDescription: getOptionLabelDescription?.(props.data) })) : (jsx(SingleSelectMenuItem, { ...componentProps, dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled || props.isDisabled, fieldSize: fieldSize, optionLabelDescription: getOptionLabelDescription?.(props.data) })) }));
+                    }, children: props.isMulti ? (jsx(MultiSelectMenuItem, { ...componentProps, dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled, fieldSize: fieldSize, optionLabelDescription: getOptionLabelDescription?.(props.data), optionPrefix: getOptionPrefix?.(props.data) })) : (jsx(SingleSelectMenuItem, { ...componentProps, dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled || props.isDisabled, fieldSize: fieldSize, optionLabelDescription: getOptionLabelDescription?.(props.data), optionPrefix: getOptionPrefix?.(props.data) })) }));
             },
             ...componentsProps,
         };
     }, [
         componentsProps,
-        disabled,
-        fieldSize,
-        getOptionLabelDescription,
-        hasError,
         maxSelectedDisplayCount,
-        prefix,
-        readOnly,
+        disabled,
         setMenuIsEnabled,
-        t,
+        readOnly,
         dataTestId,
+        t,
+        prefix,
+        hasError,
+        getOptionLabelDescription,
+        fieldSize,
+        getOptionPrefix,
     ]);
     return customComponents;
 };
@@ -2404,7 +2418,7 @@ const useCustomStyles = ({ refContainer, maxSelectedDisplayCount, styles, disabl
  * @param {SelectProps} props - The props for the Select component
  * @returns {UseSelectProps} Select component
  */
-const useSelect = ({ id, className, dataTestId = "select", prefix, async, 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, fieldSize = "medium", ...props }) => {
+const useSelect = ({ id, className, dataTestId = "select", prefix, async, 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, getOptionPrefix, fieldSize = "medium", ...props }) => {
     const refContainer = useRef(document.createElement("div"));
     const { customStyles } = useCustomStyles({
         refContainer,
@@ -2426,6 +2440,7 @@ const useSelect = ({ id, className, dataTestId = "select", prefix, async, maxMen
         hasError,
         fieldSize,
         getOptionLabelDescription,
+        getOptionPrefix,
     });
     const menuPlacement = "auto";
     const openMenuHandler = async () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.7.5",
+  "version": "1.7.10",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -16,14 +16,14 @@
     "zod": "^3.23.8",
     "react-hook-form": "7.62.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "1.6.27",
-    "@trackunit/react-components": "1.7.36",
-    "@trackunit/ui-icons": "1.6.26",
-    "@trackunit/shared-utils": "1.8.27",
-    "@trackunit/ui-design-tokens": "1.6.28",
-    "@trackunit/i18n-library-translation": "1.6.30",
+    "@trackunit/css-class-variance-utilities": "1.6.30",
+    "@trackunit/react-components": "1.7.41",
+    "@trackunit/ui-icons": "1.6.29",
+    "@trackunit/shared-utils": "1.8.30",
+    "@trackunit/ui-design-tokens": "1.6.31",
+    "@trackunit/i18n-library-translation": "1.6.33",
     "string-ts": "^2.0.0",
-    "@trackunit/react-test-setup": "1.3.27",
+    "@trackunit/react-test-setup": "1.3.30",
     "@js-temporal/polyfill": "^0.5.1"
   },
   "module": "./index.esm.js",

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

@@ -1,5 +1,5 @@
 import { CommonProps } from "@trackunit/react-components";
-import { MouseEventHandler, ReactElement } from "react";
+import { MouseEventHandler, ReactElement, ReactNode } from "react";
 import { FormComponentSizes } from "../../../types";
 interface SelectMenuItemProps extends CommonProps {
     /**
@@ -29,6 +29,11 @@ interface SelectMenuItemProps extends CommonProps {
      * Such as a description or a hint for the option
      */
     optionLabelDescription?: string;
+    /**
+     * A React element to render before the label value itself
+     * This is typically used to render an icon.
+     */
+    optionPrefix?: ReactNode;
     /**
      * The size of the selected item
      */
@@ -47,12 +52,12 @@ export interface SingleSelectMenuItemProps extends SelectMenuItemProps {
  * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
  * @returns {ReactElement} SingleSelectMenuItem
  */
-export declare const SingleSelectMenuItem: ({ label, icon, onClick, selected, focused, dataTestId, disabled, optionLabelDescription, fieldSize, }: SingleSelectMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SingleSelectMenuItem: ({ label, icon, onClick, selected, focused, dataTestId, disabled, optionLabelDescription, optionPrefix, fieldSize, }: 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 {ReactElement} multi select menu item
  */
-export declare const MultiSelectMenuItem: ({ label, onClick, selected, focused, dataTestId, disabled, optionLabelDescription, fieldSize, }: SelectMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MultiSelectMenuItem: ({ label, onClick, selected, focused, dataTestId, disabled, optionLabelDescription, optionPrefix, fieldSize, }: SelectMenuItemProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import { ReactElement, ReactNode } from "react";
 interface TagsContainerItem {
     /**
      * A text value to be passed to tags inside container
@@ -12,6 +12,7 @@ interface TagsContainerItem {
      * A flag to set tags to readonly mode (without close button)
      */
     disabled: boolean;
+    Icon?: ReactNode;
 }
 interface TagsContainerProps {
     /**

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

@@ -17,7 +17,7 @@ import { FormComponentSizes } from "../../types";
  * @param {ReactNode} 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, setMenuIsEnabled, dataTestId, maxSelectedDisplayCount, prefix, hasError, fieldSize, getOptionLabelDescription, }: {
+export declare const useCustomComponents: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ componentsProps, disabled, readOnly, setMenuIsEnabled, dataTestId, maxSelectedDisplayCount, prefix, hasError, fieldSize, getOptionLabelDescription, getOptionPrefix, }: {
     componentsProps: Partial<SelectComponents<Option, IsMulti, Group>> | undefined;
     disabled: boolean;
     readOnly: boolean;
@@ -28,4 +28,5 @@ export declare const useCustomComponents: <Option, IsMulti extends boolean = fal
     hasError?: boolean;
     fieldSize?: FormComponentSizes;
     getOptionLabelDescription?: (option: Option) => string | undefined;
+    getOptionPrefix?: (option: Option) => ReactNode;
 }) => 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
      */
     getOptionLabelDescription?: (option: Option) => string | undefined;
+    /**
+     * This callback returns
+     *
+     * @memberof SelectProps
+     */
+    getOptionPrefix?: (option: Option) => ReactNode;
     /**
      *  The size of the select component.
      *  Large = 40px, Medium = 32px, Small = 28px.
@@ -144,5 +150,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, maxMenuHeight, label, hasError, disabled, isMulti, components, value, options, onChange, isLoading, classNamePrefix, onMenuOpen, onMenuClose, maxSelectedDisplayCount, isClearable, isSearchable, onMenuScrollToBottom, styles, filterOption, onInputChange, getOptionLabelDescription, fieldSize, ...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, maxMenuHeight, label, hasError, disabled, isMulti, components, value, options, onChange, isLoading, classNamePrefix, onMenuOpen, onMenuClose, maxSelectedDisplayCount, isClearable, isSearchable, onMenuScrollToBottom, styles, filterOption, onInputChange, getOptionLabelDescription, getOptionPrefix, fieldSize, ...props }: SelectProps<Option, IsAsync, IsMulti, Group>) => UseSelectProps<Option, IsMulti, Group>;
 export {};