npm - @trackunit/react-form-components - Versions diffs - 1.3.65 → 1.3.66 - Mend

@trackunit/react-form-components 1.3.65 → 1.3.66

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/index.cjs.js +100 -73
package/index.esm.js +102 -75
package/package.json +7 -7
package/src/components/Select/useCustomComponents.d.ts +4 -7
package/src/components/Select/useCustomStyles.d.ts +2 -4
package/src/components/Select/useSelect.d.ts +1 -9

package/index.cjs.js CHANGED Viewed

@@ -1171,7 +1171,6 @@ const NumberField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInva
     const error = React.useMemo(() => {
         // for the case when a custom error message is provided
         if (errorMessage) {
-            setRenderAsInvalid(Boolean(errorMessage));
             return errorMessage;
         }
         else if (errorType) {
@@ -1179,6 +1178,11 @@ const NumberField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInva
         }
         return errorMessage;
     }, [errorMessage, errorType, rest.max, rest.min, t]);
+    React.useEffect(() => {
+        if (errorMessage) {
+            setRenderAsInvalid(Boolean(errorMessage));
+        }
+    }, [errorMessage]);
     const handleBlur = React.useCallback(event => {
         const newValue = event.target.value;
         setInnerValue(newValue.toString());
@@ -1452,7 +1456,6 @@ const PhoneField = ({ label, id, tip, helpText, isInvalid, errorMessage, value,
     const error = React.useMemo(() => {
         // for the case when a custom error message is provided
         if (errorMessage) {
-            setRenderAsInvalid(Boolean(errorMessage));
             return errorMessage;
         }
         else if (errorType) {
@@ -1460,6 +1463,9 @@ const PhoneField = ({ label, id, tip, helpText, isInvalid, errorMessage, value,
         }
         return errorMessage;
     }, [errorMessage, errorType, t]);
+    React.useEffect(() => {
+        setRenderAsInvalid(Boolean(errorMessage));
+    }, [errorMessage]);
     const handleBlur = React.useCallback(event => {
         const newValue = event.target.value;
         setInnerValue(newValue);
@@ -1990,54 +1996,72 @@ const TagWithWidth = ({ onWidthKnown, children, ...rest }) => {
  * @returns {ReactElement} TagsContainer
  */
 const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled }) => {
+    const containerRef = React.useRef(null);
     const [isReady, setIsReady] = React.useState(false);
     const [counterWidth, setCounterWidth] = React.useState(0);
-    const containerRef = React.useRef(null);
-    const availableWidth = React.useRef(undefined);
-    const childrenWidth = React.useRef([]);
+    const [availableSpaceWidth, setAvailableSpaceWidth] = React.useState(0);
+    const [childrenWidths, setChildrenWidths] = React.useState([]);
     const itemsCount = items.length;
-    React.useLayoutEffect(() => {
-        availableWidth.current = containerRef.current?.offsetWidth || 0;
-    }, [containerRef]);
-    const onWidthKnownHandler = ({ width: reportedWidth }) => {
-        childrenWidth.current.push({ width: reportedWidth + itemsGap });
-        if (childrenWidth.current.length === itemsCount) {
-            setIsReady(true);
-        }
-    };
-    const requiredSpace = childrenWidth.current.reduce((previous, current) => {
-        return previous + current.width;
-    }, 0);
-    let counter = 0;
-    const availableSpace = (availableWidth.current || 0) - counterWidth;
-    const renderedElements = items
-        .concat({ text: "", onClick: () => null, disabled: false }) // reserved element for a potential counter
-        .map((item, index) => {
-        const spaceNeeded = childrenWidth.current.slice(0, index + 1).reduce((previous, current) => {
+    const dimensions = reactComponents.useResize();
+    const { width: windowWidth } = reactComponents.useDebounce(dimensions, 100);
+    React.useEffect(() => {
+        const containerWidth = containerRef.current?.offsetWidth || 0;
+        setAvailableSpaceWidth(containerWidth);
+    }, [windowWidth]);
+    const onWidthKnownHandler = React.useCallback(({ width: reportedWidth }) => {
+        setChildrenWidths(prev => {
+            const next = [...prev, { width: reportedWidth + itemsGap }];
+            if (next.length === itemsCount) {
+                setIsReady(true);
+            }
+            return next;
+        });
+    }, [itemsCount, itemsGap]);
+    const renderedElements = React.useMemo(() => {
+        const requiredSpace = childrenWidths.reduce((previous, current) => {
             return previous + current.width;
         }, 0);
-        const isLast = index === items.length;
-        const counterRequired = requiredSpace > availableSpace && counter !== 0;
-        if (isLast && counterRequired) {
-            return (jsxRuntime.jsx(TagWithWidth, { color: "white", disabled: disabled, onWidthKnown: ({ width: reportedWidth }) => setCounterWidth(reportedWidth), children: jsxRuntime.jsxs("div", { className: cvaSelectCounter(), "data-testid": "select-counter", children: ["+", counter] }) }, item.text + index));
-        }
-        if (isLast) {
-            return null;
-        }
-        const itemCanFit = spaceNeeded <= availableSpace;
-        if (itemCanFit) {
-            return (jsxRuntime.jsx(TagWithWidth, { className: "inline-flex shrink-0", color: item.disabled ? "unknown" : "primary", dataTestId: `${item.text}-tag`, disabled: disabled, onClose: e => {
-                    e.stopPropagation();
-                    item.onClick();
-                }, onWidthKnown: onWidthKnownHandler, children: item.text }, item.text + index));
-        }
-        const fromTheItems = item.text !== "";
-        if (fromTheItems) {
-            counter = counter + 1;
-        }
-        return null;
-    })
-        .filter(element => element !== null);
+        const availableSpace = availableSpaceWidth - counterWidth;
+        const { elements } = items
+            .concat({ text: "", onClick: () => null, disabled: false })
+            .reduce((acc, item, index) => {
+            const spaceNeeded = childrenWidths.slice(0, index + 1).reduce((previous, current) => {
+                return previous + current.width;
+            }, 0);
+            const isLast = index === items.length;
+            const counterRequired = requiredSpace > availableSpace && acc.counter !== 0;
+            if (isLast && counterRequired) {
+                return {
+                    ...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),
+                    ],
+                };
+            }
+            if (isLast) {
+                return acc;
+            }
+            const itemCanFit = spaceNeeded <= availableSpace;
+            if (itemCanFit) {
+                return {
+                    ...acc,
+                    elements: [
+                        ...acc.elements,
+                        jsxRuntime.jsx(TagWithWidth, { className: "inline-flex shrink-0", color: item.disabled ? "unknown" : "primary", dataTestId: `${item.text}-tag`, disabled: disabled, onClose: e => {
+                                e.stopPropagation();
+                                item.onClick();
+                            }, onWidthKnown: onWidthKnownHandler, children: item.text }, item.text + index),
+                    ],
+                };
+            }
+            return {
+                elements: acc.elements,
+                counter: item.text !== "" ? acc.counter + 1 : acc.counter,
+            };
+        }, { elements: [], counter: 0 });
+        return elements;
+    }, [items, availableSpaceWidth, counterWidth, disabled, onWidthKnownHandler, childrenWidths]);
     return (jsxRuntime.jsxs("div", { className: cvaSelectDynamicTagContainer({ visible: isReady }), ref: containerRef, style: {
             width: `${width}`,
         }, children: [renderedElements, postFix] }));
@@ -2052,15 +2076,13 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled
  * @param {Partial<SelectComponents<Option, IsMulti, Group>> | undefined} componentsProps a custom component prop that you can to override defaults
  * @param {boolean} disabled decide to override disabled variant
  * @param {boolean} menuIsOpen menu is open state
- * @param {RefObject<boolean>} refMenuIsEnabled a flag to block menu from open
  * @param {string} dataTestId a test id
  * @param {number} maxSelectedDisplayCount a number of max display count
- * @param {ReactElement} dropdownIcon an custom dropdown icon
  * @param {boolean} hasError decide to override hasError variant
- * @param {ReactElement} prefix a prefix element
+ * @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, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon, prefix, hasError, fieldSize, getOptionLabelDescription, }) => {
+const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEnabled, dataTestId, maxSelectedDisplayCount, prefix, hasError, fieldSize, 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(() => {
@@ -2082,7 +2104,7 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEna
                                         onClick: disabled
                                             ? undefined
                                             : (e) => {
-                                                refMenuIsEnabled.current = false;
+                                                setMenuIsEnabled(false);
                                                 tagProps.removeProps.onClick && tagProps.removeProps.onClick(e);
                                             },
                                         disabled: disabled,
@@ -2092,7 +2114,7 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEna
                                     ? tags.slice(0, maxSelectedDisplayCount).map(({ props: tagProps }) => {
                                         return (jsxRuntime.jsx(reactComponents.Tag, { className: "inline-flex shrink-0", color: disabled ? "unknown" : "primary", dataTestId: tagProps.children ? `${tagProps.children.toString()}-tag` : undefined, onClose: e => {
                                                 e.stopPropagation();
-                                                refMenuIsEnabled.current = false;
+                                                setMenuIsEnabled(false);
                                                 tagProps.removeProps.onClick && tagProps.removeProps.onClick(e);
                                             }, children: tagProps.children }, tagProps.children?.toString()));
                                     })
@@ -2105,7 +2127,7 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEna
             },
             DropdownIndicator: props => {
                 const icon = props.selectProps.menuIsOpen ? (jsxRuntime.jsx(reactComponents.Icon, { name: "ChevronUp", size: "medium" })) : (jsxRuntime.jsx(reactComponents.Icon, { name: "ChevronDown", size: "medium" }));
-                return props.selectProps.isLoading || props.selectProps.isDisabled || readOnly ? null : (jsxRuntime.jsx(ReactSelect.components.DropdownIndicator, { ...props, children: jsxRuntime.jsx("div", { className: cvaSelectIcon(), children: dropdownIcon ?? icon }) }));
+                return props.selectProps.isLoading || props.selectProps.isDisabled || readOnly ? null : (jsxRuntime.jsx(ReactSelect.components.DropdownIndicator, { ...props, children: jsxRuntime.jsx("div", { className: cvaSelectIcon(), children: icon }) }));
             },
             IndicatorSeparator: () => null,
             ClearIndicator: props => {
@@ -2164,22 +2186,32 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEna
             },
             ...componentsProps,
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [componentsProps, disabled, maxSelectedDisplayCount, readOnly]); // do not add dropdownIcon (it will cause issue with opening/closing list for selects with custom icon)
+    }, [
+        componentsProps,
+        disabled,
+        fieldSize,
+        getOptionLabelDescription,
+        hasError,
+        maxSelectedDisplayCount,
+        prefix,
+        readOnly,
+        setMenuIsEnabled,
+        t,
+        dataTestId,
+    ]);
     return customComponents;
 };
 /**
  * @template IsMulti
  * @template Group
- * @param {React.RefObject<HTMLDivElement>} refContainer  react ref to container element
- * @param {React.RefObject<HTMLDivElement>} refPrefix react ref to prefix element
+ * @param {RefObject<HTMLDivElement | null>} refContainer  react ref to container element
  * @param {number | undefined} maxSelectedDisplayCount a number of max display count
  * @param {StylesConfig<Option, IsMulti, Group> | undefined} styles a optional object to override styles of react-select
  * @returns {StylesConfig<Option, boolean>} styles to override in select
  */
-const useCustomStyles = ({ refContainer, refPrefix, maxSelectedDisplayCount, styles, disabled, fieldSize, }) => {
-    const customStyles = React__namespace.useMemo(() => {
+const useCustomStyles = ({ refContainer, maxSelectedDisplayCount, styles, disabled, fieldSize, }) => {
+    const customStyles = React.useMemo(() => {
         return {
             control: base => {
                 return {
@@ -2268,8 +2300,7 @@ const useCustomStyles = ({ refContainer, refPrefix, maxSelectedDisplayCount, sty
             },
             ...styles,
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [refContainer, refPrefix, disabled]);
+    }, [refContainer, disabled, fieldSize, maxSelectedDisplayCount, styles]);
     return { customStyles };
 };
@@ -2279,27 +2310,24 @@ 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, 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, fieldSize = "medium", ...props }) => {
     const refContainer = React.useRef(document.createElement("div"));
-    const refPrefix = React.useRef(document.createElement("div"));
     const { customStyles } = useCustomStyles({
         refContainer,
-        refPrefix,
         maxSelectedDisplayCount,
         styles,
         disabled: Boolean(disabled),
         fieldSize,
     });
     const [menuIsOpen, setMenuIsOpen] = React.useState(props.menuIsOpen ?? false);
-    const refMenuIsEnabled = React.useRef(true);
+    const [menuIsEnabled, setMenuIsEnabled] = React.useState(true);
     const customComponents = useCustomComponents({
         componentsProps: components,
         disabled: Boolean(disabled),
         readOnly: Boolean(props.readOnly),
-        refMenuIsEnabled,
+        setMenuIsEnabled,
         dataTestId,
         maxSelectedDisplayCount,
-        dropdownIcon,
         prefix,
         hasError,
         fieldSize,
@@ -2308,11 +2336,11 @@ const useSelect = ({ id, className, dataTestId = "select", prefix, async, dropdo
     const menuPlacement = "auto";
     const openMenuHandler = async () => {
         onMenuOpen?.();
-        if (refMenuIsEnabled.current) {
+        if (menuIsEnabled) {
             setMenuIsOpen(true);
         }
         else {
-            refMenuIsEnabled.current = true;
+            setMenuIsEnabled(true);
         }
     };
     const closeMenuHandler = () => {
@@ -2321,7 +2349,6 @@ const useSelect = ({ id, className, dataTestId = "select", prefix, async, dropdo
     };
     return {
         refContainer,
-        refPrefix,
         customStyles,
         menuIsOpen,
         customComponents,
@@ -2339,7 +2366,7 @@ const useSelect = ({ id, className, dataTestId = "select", prefix, async, dropdo
  */
 const CreatableSelect = (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 { refContainer, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler } = useSelect(props);
     const reactCreatableSelectProps = React.useMemo(() => ({
         value,
         menuPlacement,
@@ -2396,7 +2423,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: 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(InputLockReasonTooltip, { ...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, 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(InputLockReasonTooltip, { ...props.disabled }) })) : null] }));
 };
 CreatableSelect.displayName = "CreatableSelect";
@@ -2411,7 +2438,7 @@ const ReactSyncSelect = ReactSelect.default || ReactSelect;
  */
 const Select = (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, fieldSize = "medium", openMenuOnClick = !disabled, openMenuOnFocus = !disabled, hideSelectedOptions = false, } = props;
-    const { refContainer, refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, } = useSelect(props);
+    const { refContainer, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler } = useSelect(props);
     const reactSelectProps = React.useMemo(() => ({
         value,
         menuPlacement,
@@ -2474,7 +2501,7 @@ const Select = (props) => {
             fieldSize: fieldSize,
             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(ReactSyncSelect, { ...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(InputLockReasonTooltip, { ...props.disabled }) })) : null] }));
+        }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix({ kind: "prefix" }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix })) : null, async ? (jsxRuntime.jsx(ReactAsyncSelect, { ...props, ...reactSelectProps, ...async, menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : props.placeholder })) : (jsxRuntime.jsx(ReactSyncSelect, { ...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(InputLockReasonTooltip, { ...props.disabled }) })) : null] }));
 };
 Select.displayName = "Select";

package/index.esm.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useNamespaceTranslation, registerTranslations, NamespaceTrans } from '@trackunit/i18n-library-translation';
-import { IconButton, Icon, Tooltip, useGeometry, useIsTextTruncated, Heading, Text, Spinner, MenuItem, Tag, useIsFirstRender } from '@trackunit/react-components';
+import { IconButton, Icon, Tooltip, useGeometry, useIsTextTruncated, Heading, Text, Spinner, MenuItem, Tag, useResize, useDebounce, useIsFirstRender } from '@trackunit/react-components';
 import { useCopyToClipboard } from 'usehooks-ts';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { themeSpacing } from '@trackunit/ui-design-tokens';
 import * as React from 'react';
-import { forwardRef, useRef, useImperativeHandle, useMemo, useState, useCallback, cloneElement, useEffect, useContext, useLayoutEffect } from 'react';
+import { forwardRef, useRef, useImperativeHandle, useMemo, useState, useCallback, useEffect, cloneElement, useContext, useLayoutEffect } from 'react';
 import { titleCase } from 'string-ts';
 import { uuidv4, nonNullable } from '@trackunit/shared-utils';
 import { Temporal } from '@js-temporal/polyfill';
@@ -1152,7 +1152,6 @@ const NumberField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInva
     const error = useMemo(() => {
         // for the case when a custom error message is provided
         if (errorMessage) {
-            setRenderAsInvalid(Boolean(errorMessage));
             return errorMessage;
         }
         else if (errorType) {
@@ -1160,6 +1159,11 @@ const NumberField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInva
         }
         return errorMessage;
     }, [errorMessage, errorType, rest.max, rest.min, t]);
+    useEffect(() => {
+        if (errorMessage) {
+            setRenderAsInvalid(Boolean(errorMessage));
+        }
+    }, [errorMessage]);
     const handleBlur = useCallback(event => {
         const newValue = event.target.value;
         setInnerValue(newValue.toString());
@@ -1433,7 +1437,6 @@ const PhoneField = ({ label, id, tip, helpText, isInvalid, errorMessage, value,
     const error = useMemo(() => {
         // for the case when a custom error message is provided
         if (errorMessage) {
-            setRenderAsInvalid(Boolean(errorMessage));
             return errorMessage;
         }
         else if (errorType) {
@@ -1441,6 +1444,9 @@ const PhoneField = ({ label, id, tip, helpText, isInvalid, errorMessage, value,
         }
         return errorMessage;
     }, [errorMessage, errorType, t]);
+    useEffect(() => {
+        setRenderAsInvalid(Boolean(errorMessage));
+    }, [errorMessage]);
     const handleBlur = useCallback(event => {
         const newValue = event.target.value;
         setInnerValue(newValue);
@@ -1971,54 +1977,72 @@ const TagWithWidth = ({ onWidthKnown, children, ...rest }) => {
  * @returns {ReactElement} TagsContainer
  */
 const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled }) => {
+    const containerRef = useRef(null);
     const [isReady, setIsReady] = useState(false);
     const [counterWidth, setCounterWidth] = useState(0);
-    const containerRef = useRef(null);
-    const availableWidth = useRef(undefined);
-    const childrenWidth = useRef([]);
+    const [availableSpaceWidth, setAvailableSpaceWidth] = useState(0);
+    const [childrenWidths, setChildrenWidths] = useState([]);
     const itemsCount = items.length;
-    useLayoutEffect(() => {
-        availableWidth.current = containerRef.current?.offsetWidth || 0;
-    }, [containerRef]);
-    const onWidthKnownHandler = ({ width: reportedWidth }) => {
-        childrenWidth.current.push({ width: reportedWidth + itemsGap });
-        if (childrenWidth.current.length === itemsCount) {
-            setIsReady(true);
-        }
-    };
-    const requiredSpace = childrenWidth.current.reduce((previous, current) => {
-        return previous + current.width;
-    }, 0);
-    let counter = 0;
-    const availableSpace = (availableWidth.current || 0) - counterWidth;
-    const renderedElements = items
-        .concat({ text: "", onClick: () => null, disabled: false }) // reserved element for a potential counter
-        .map((item, index) => {
-        const spaceNeeded = childrenWidth.current.slice(0, index + 1).reduce((previous, current) => {
+    const dimensions = useResize();
+    const { width: windowWidth } = useDebounce(dimensions, 100);
+    useEffect(() => {
+        const containerWidth = containerRef.current?.offsetWidth || 0;
+        setAvailableSpaceWidth(containerWidth);
+    }, [windowWidth]);
+    const onWidthKnownHandler = useCallback(({ width: reportedWidth }) => {
+        setChildrenWidths(prev => {
+            const next = [...prev, { width: reportedWidth + itemsGap }];
+            if (next.length === itemsCount) {
+                setIsReady(true);
+            }
+            return next;
+        });
+    }, [itemsCount, itemsGap]);
+    const renderedElements = useMemo(() => {
+        const requiredSpace = childrenWidths.reduce((previous, current) => {
             return previous + current.width;
         }, 0);
-        const isLast = index === items.length;
-        const counterRequired = requiredSpace > availableSpace && counter !== 0;
-        if (isLast && counterRequired) {
-            return (jsx(TagWithWidth, { color: "white", disabled: disabled, onWidthKnown: ({ width: reportedWidth }) => setCounterWidth(reportedWidth), children: jsxs("div", { className: cvaSelectCounter(), "data-testid": "select-counter", children: ["+", counter] }) }, item.text + index));
-        }
-        if (isLast) {
-            return null;
-        }
-        const itemCanFit = spaceNeeded <= availableSpace;
-        if (itemCanFit) {
-            return (jsx(TagWithWidth, { className: "inline-flex shrink-0", color: item.disabled ? "unknown" : "primary", dataTestId: `${item.text}-tag`, disabled: disabled, onClose: e => {
-                    e.stopPropagation();
-                    item.onClick();
-                }, onWidthKnown: onWidthKnownHandler, children: item.text }, item.text + index));
-        }
-        const fromTheItems = item.text !== "";
-        if (fromTheItems) {
-            counter = counter + 1;
-        }
-        return null;
-    })
-        .filter(element => element !== null);
+        const availableSpace = availableSpaceWidth - counterWidth;
+        const { elements } = items
+            .concat({ text: "", onClick: () => null, disabled: false })
+            .reduce((acc, item, index) => {
+            const spaceNeeded = childrenWidths.slice(0, index + 1).reduce((previous, current) => {
+                return previous + current.width;
+            }, 0);
+            const isLast = index === items.length;
+            const counterRequired = requiredSpace > availableSpace && acc.counter !== 0;
+            if (isLast && counterRequired) {
+                return {
+                    ...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),
+                    ],
+                };
+            }
+            if (isLast) {
+                return acc;
+            }
+            const itemCanFit = spaceNeeded <= availableSpace;
+            if (itemCanFit) {
+                return {
+                    ...acc,
+                    elements: [
+                        ...acc.elements,
+                        jsx(TagWithWidth, { className: "inline-flex shrink-0", color: item.disabled ? "unknown" : "primary", dataTestId: `${item.text}-tag`, disabled: disabled, onClose: e => {
+                                e.stopPropagation();
+                                item.onClick();
+                            }, onWidthKnown: onWidthKnownHandler, children: item.text }, item.text + index),
+                    ],
+                };
+            }
+            return {
+                elements: acc.elements,
+                counter: item.text !== "" ? acc.counter + 1 : acc.counter,
+            };
+        }, { elements: [], counter: 0 });
+        return elements;
+    }, [items, availableSpaceWidth, counterWidth, disabled, onWidthKnownHandler, childrenWidths]);
     return (jsxs("div", { className: cvaSelectDynamicTagContainer({ visible: isReady }), ref: containerRef, style: {
             width: `${width}`,
         }, children: [renderedElements, postFix] }));
@@ -2033,15 +2057,13 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled
  * @param {Partial<SelectComponents<Option, IsMulti, Group>> | undefined} componentsProps a custom component prop that you can to override defaults
  * @param {boolean} disabled decide to override disabled variant
  * @param {boolean} menuIsOpen menu is open state
- * @param {RefObject<boolean>} refMenuIsEnabled a flag to block menu from open
  * @param {string} dataTestId a test id
  * @param {number} maxSelectedDisplayCount a number of max display count
- * @param {ReactElement} dropdownIcon an custom dropdown icon
  * @param {boolean} hasError decide to override hasError variant
- * @param {ReactElement} prefix a prefix element
+ * @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, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon, prefix, hasError, fieldSize, getOptionLabelDescription, }) => {
+const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEnabled, dataTestId, maxSelectedDisplayCount, prefix, hasError, fieldSize, getOptionLabelDescription, }) => {
     const [t] = useTranslation();
     // perhaps it should not be wrap in memo (causing some issues with opening and closing on mobiles)
     const customComponents = useMemo(() => {
@@ -2063,7 +2085,7 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEna
                                         onClick: disabled
                                             ? undefined
                                             : (e) => {
-                                                refMenuIsEnabled.current = false;
+                                                setMenuIsEnabled(false);
                                                 tagProps.removeProps.onClick && tagProps.removeProps.onClick(e);
                                             },
                                         disabled: disabled,
@@ -2073,7 +2095,7 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEna
                                     ? tags.slice(0, maxSelectedDisplayCount).map(({ props: tagProps }) => {
                                         return (jsx(Tag, { className: "inline-flex shrink-0", color: disabled ? "unknown" : "primary", dataTestId: tagProps.children ? `${tagProps.children.toString()}-tag` : undefined, onClose: e => {
                                                 e.stopPropagation();
-                                                refMenuIsEnabled.current = false;
+                                                setMenuIsEnabled(false);
                                                 tagProps.removeProps.onClick && tagProps.removeProps.onClick(e);
                                             }, children: tagProps.children }, tagProps.children?.toString()));
                                     })
@@ -2086,7 +2108,7 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEna
             },
             DropdownIndicator: props => {
                 const icon = props.selectProps.menuIsOpen ? (jsx(Icon, { name: "ChevronUp", size: "medium" })) : (jsx(Icon, { name: "ChevronDown", size: "medium" }));
-                return props.selectProps.isLoading || props.selectProps.isDisabled || readOnly ? null : (jsx(components.DropdownIndicator, { ...props, children: jsx("div", { className: cvaSelectIcon(), children: dropdownIcon ?? icon }) }));
+                return props.selectProps.isLoading || props.selectProps.isDisabled || readOnly ? null : (jsx(components.DropdownIndicator, { ...props, children: jsx("div", { className: cvaSelectIcon(), children: icon }) }));
             },
             IndicatorSeparator: () => null,
             ClearIndicator: props => {
@@ -2145,22 +2167,32 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEna
             },
             ...componentsProps,
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [componentsProps, disabled, maxSelectedDisplayCount, readOnly]); // do not add dropdownIcon (it will cause issue with opening/closing list for selects with custom icon)
+    }, [
+        componentsProps,
+        disabled,
+        fieldSize,
+        getOptionLabelDescription,
+        hasError,
+        maxSelectedDisplayCount,
+        prefix,
+        readOnly,
+        setMenuIsEnabled,
+        t,
+        dataTestId,
+    ]);
     return customComponents;
 };
 /**
  * @template IsMulti
  * @template Group
- * @param {React.RefObject<HTMLDivElement>} refContainer  react ref to container element
- * @param {React.RefObject<HTMLDivElement>} refPrefix react ref to prefix element
+ * @param {RefObject<HTMLDivElement | null>} refContainer  react ref to container element
  * @param {number | undefined} maxSelectedDisplayCount a number of max display count
  * @param {StylesConfig<Option, IsMulti, Group> | undefined} styles a optional object to override styles of react-select
  * @returns {StylesConfig<Option, boolean>} styles to override in select
  */
-const useCustomStyles = ({ refContainer, refPrefix, maxSelectedDisplayCount, styles, disabled, fieldSize, }) => {
-    const customStyles = React.useMemo(() => {
+const useCustomStyles = ({ refContainer, maxSelectedDisplayCount, styles, disabled, fieldSize, }) => {
+    const customStyles = useMemo(() => {
         return {
             control: base => {
                 return {
@@ -2249,8 +2281,7 @@ const useCustomStyles = ({ refContainer, refPrefix, maxSelectedDisplayCount, sty
             },
             ...styles,
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [refContainer, refPrefix, disabled]);
+    }, [refContainer, disabled, fieldSize, maxSelectedDisplayCount, styles]);
     return { customStyles };
 };
@@ -2260,27 +2291,24 @@ 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, 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, fieldSize = "medium", ...props }) => {
     const refContainer = useRef(document.createElement("div"));
-    const refPrefix = useRef(document.createElement("div"));
     const { customStyles } = useCustomStyles({
         refContainer,
-        refPrefix,
         maxSelectedDisplayCount,
         styles,
         disabled: Boolean(disabled),
         fieldSize,
     });
     const [menuIsOpen, setMenuIsOpen] = useState(props.menuIsOpen ?? false);
-    const refMenuIsEnabled = useRef(true);
+    const [menuIsEnabled, setMenuIsEnabled] = useState(true);
     const customComponents = useCustomComponents({
         componentsProps: components,
         disabled: Boolean(disabled),
         readOnly: Boolean(props.readOnly),
-        refMenuIsEnabled,
+        setMenuIsEnabled,
         dataTestId,
         maxSelectedDisplayCount,
-        dropdownIcon,
         prefix,
         hasError,
         fieldSize,
@@ -2289,11 +2317,11 @@ const useSelect = ({ id, className, dataTestId = "select", prefix, async, dropdo
     const menuPlacement = "auto";
     const openMenuHandler = async () => {
         onMenuOpen?.();
-        if (refMenuIsEnabled.current) {
+        if (menuIsEnabled) {
             setMenuIsOpen(true);
         }
         else {
-            refMenuIsEnabled.current = true;
+            setMenuIsEnabled(true);
         }
     };
     const closeMenuHandler = () => {
@@ -2302,7 +2330,6 @@ const useSelect = ({ id, className, dataTestId = "select", prefix, async, dropdo
     };
     return {
         refContainer,
-        refPrefix,
         customStyles,
         menuIsOpen,
         customComponents,
@@ -2320,7 +2347,7 @@ const useSelect = ({ id, className, dataTestId = "select", prefix, async, dropdo
  */
 const CreatableSelect = (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 { refContainer, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler } = useSelect(props);
     const reactCreatableSelectProps = useMemo(() => ({
         value,
         menuPlacement,
@@ -2377,7 +2404,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: options, placeholder: renderAsDisabled ? null : props.placeholder })), typeof props.disabled === "object" ? (jsx("div", { className: cvaSelectPrefixSuffix({ kind: "suffix" }), "data-testid": dataTestId ? `${dataTestId}-locked` : null, children: jsx(InputLockReasonTooltip, { ...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, 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(InputLockReasonTooltip, { ...props.disabled }) })) : null] }));
 };
 CreatableSelect.displayName = "CreatableSelect";
@@ -2392,7 +2419,7 @@ const ReactSyncSelect = ReactSelect.default || ReactSelect;
  */
 const Select = (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, fieldSize = "medium", openMenuOnClick = !disabled, openMenuOnFocus = !disabled, hideSelectedOptions = false, } = props;
-    const { refContainer, refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, } = useSelect(props);
+    const { refContainer, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler } = useSelect(props);
     const reactSelectProps = useMemo(() => ({
         value,
         menuPlacement,
@@ -2455,7 +2482,7 @@ const Select = (props) => {
             fieldSize: fieldSize,
             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(ReactSyncSelect, { ...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(InputLockReasonTooltip, { ...props.disabled }) })) : null] }));
+        }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined ? (jsx("div", { className: cvaSelectPrefixSuffix({ kind: "prefix" }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix })) : null, async ? (jsx(ReactAsyncSelect, { ...props, ...reactSelectProps, ...async, menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : props.placeholder })) : (jsx(ReactSyncSelect, { ...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(InputLockReasonTooltip, { ...props.disabled }) })) : null] }));
 };
 Select.displayName = "Select";

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.3.65",
+  "version": "1.3.66",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -17,12 +17,12 @@
     "zod": "3.22.4",
     "react-hook-form": "7.53.1",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "1.3.46",
-    "@trackunit/react-components": "1.4.56",
-    "@trackunit/ui-icons": "1.3.46",
-    "@trackunit/shared-utils": "1.5.46",
-    "@trackunit/ui-design-tokens": "1.3.46",
-    "@trackunit/i18n-library-translation": "1.3.51",
+    "@trackunit/css-class-variance-utilities": "1.3.47",
+    "@trackunit/react-components": "1.4.57",
+    "@trackunit/ui-icons": "1.3.47",
+    "@trackunit/shared-utils": "1.5.47",
+    "@trackunit/ui-design-tokens": "1.3.47",
+    "@trackunit/i18n-library-translation": "1.3.52",
     "string-ts": "^2.0.0"
   },
   "module": "./index.esm.js",

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

@@ -1,4 +1,4 @@
-import { ReactNode, RefObject } from "react";
+import { ReactNode } from "react";
 import { GroupBase } from "react-select";
 import { SelectComponents } from "react-select/dist/declarations/src/components";
 import { FormComponentSizes } from "../../types";
@@ -11,22 +11,19 @@ import { FormComponentSizes } from "../../types";
  * @param {Partial<SelectComponents<Option, IsMulti, Group>> | undefined} componentsProps a custom component prop that you can to override defaults
  * @param {boolean} disabled decide to override disabled variant
  * @param {boolean} menuIsOpen menu is open state
- * @param {RefObject<boolean>} refMenuIsEnabled a flag to block menu from open
  * @param {string} dataTestId a test id
  * @param {number} maxSelectedDisplayCount a number of max display count
- * @param {ReactElement} dropdownIcon an custom dropdown icon
  * @param {boolean} hasError decide to override hasError variant
- * @param {ReactElement} prefix a prefix element
+ * @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, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon, 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, }: {
     componentsProps: Partial<SelectComponents<Option, IsMulti, Group>> | undefined;
     disabled: boolean;
     readOnly: boolean;
-    refMenuIsEnabled: RefObject<boolean>;
+    setMenuIsEnabled: (menuIsEnabled: boolean) => void;
     dataTestId: string;
     maxSelectedDisplayCount: number | undefined;
-    dropdownIcon?: ReactNode;
     prefix?: ReactNode;
     hasError?: boolean;
     fieldSize?: FormComponentSizes;

package/src/components/Select/useCustomStyles.d.ts CHANGED Viewed

@@ -4,15 +4,13 @@ import { FormComponentSizes } from "../../types";
 /**
  * @template IsMulti
  * @template Group
- * @param {React.RefObject<HTMLDivElement>} refContainer  react ref to container element
- * @param {React.RefObject<HTMLDivElement>} refPrefix react ref to prefix element
+ * @param {RefObject<HTMLDivElement | null>} refContainer  react ref to container element
  * @param {number | undefined} maxSelectedDisplayCount a number of max display count
  * @param {StylesConfig<Option, IsMulti, Group> | undefined} styles a optional object to override styles of react-select
  * @returns {StylesConfig<Option, boolean>} styles to override in select
  */
-export declare const useCustomStyles: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ refContainer, refPrefix, maxSelectedDisplayCount, styles, disabled, fieldSize, }: {
+export declare const useCustomStyles: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ refContainer, maxSelectedDisplayCount, styles, disabled, fieldSize, }: {
     refContainer: RefObject<HTMLDivElement | null>;
-    refPrefix: RefObject<HTMLDivElement | null>;
     maxSelectedDisplayCount: number | undefined;
     styles: StylesConfig<Option, IsMulti, Group> | undefined;
     disabled: boolean | undefined;

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

@@ -50,13 +50,6 @@ export type SelectProps<Option, IsAsync extends boolean, IsMulti extends boolean
      * @memberof SelectProps
      */
     async?: AsyncSelect<Option, GroupType>;
-    /**
-     * A custom icon to be used as a dropdown indicator
-     * This is typically used during style customization
-     *
-     * @memberof SelectProps
-     */
-    dropdownIcon?: ReactNode;
     /**
      * A label to be used as a aria-label
      * This is typically used for accessibility
@@ -140,7 +133,6 @@ interface UseSelectProps<Option, IsMulti extends boolean = false, Group extends
     customStyles: StylesConfig<Option, IsMulti, Group>;
     customComponents: Partial<SelectComponents<Option, IsMulti, Group>>;
     refContainer: React.RefObject<HTMLDivElement>;
-    refPrefix: React.RefObject<HTMLDivElement>;
     menuIsOpen: boolean;
     menuPlacement: MenuPlacement;
     openMenuHandler: () => Promise<void>;
@@ -152,5 +144,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, 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, fieldSize, ...props }: SelectProps<Option, IsAsync, IsMulti, Group>) => UseSelectProps<Option, IsMulti, Group>;
 export {};