@trackunit/react-components 0.1.24 → 0.1.25

package/index.js

@@ -2200,6 +2200,7 @@ tu-select__counter
  * @returns {Partial<SelectComponents<Option, boolean, GroupBase<Option>>> | undefined} components object to override react-select default components
  */
 const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon) => {
+    // perhaps it should not be wrap in memo (causing some issues with opening and closing on mobiles)
     const customComponents = React.useMemo(() => {
         return Object.assign({ ValueContainer: props => {
                 if (props.isMulti) {
@@ -2237,18 +2238,19 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
             }, LoadingIndicator: props => {
                 return jsx(Spinner, { size: "small", className: tws `mt-1.5 mr-1` });
             }, DropdownIndicator: props => {
-                return props.selectProps.isLoading ? null : (jsx(components.DropdownIndicator, Object.assign({}, props, { children: jsx(StyledIcon, { children: dropdownIcon ? (dropdownIcon) : menuIsOpen ? (jsx(Icon, { name: "ChevronUpIcon", size: "medium" })) : (jsx(Icon, { name: "ChevronDownIcon", size: "medium" })) }) })));
+                const icon = props.selectProps.menuIsOpen ? (jsx(Icon, { name: "ChevronUpIcon", size: "medium" })) : (jsx(Icon, { name: "ChevronDownIcon", size: "medium" }));
+                return props.selectProps.isLoading ? null : (jsx(components.DropdownIndicator, Object.assign({}, props, { children: jsx(StyledIcon, { children: dropdownIcon ? dropdownIcon : icon }) })));
             }, IndicatorSeparator: () => null, ClearIndicator: props => {
                 if (disabled) {
                     return null;
                 }
                 return (jsx(components.ClearIndicator, Object.assign({}, props, { children: jsx(XIcon, Object.assign({ onClick: props.clearValue, "data-testid": `${dataTestId}-XIcon` }, { children: jsx(Icon, { name: "XCircleIcon", size: "medium" }) })) })));
             }, Control: props => {
-                return (jsx(components.Control, Object.assign({}, props, { innerProps: Object.assign(Object.assign({}, props.innerProps), { onTouchEnd: () => null }), className: props.isDisabled ? tws `tu-select__control--disabled` : "" })));
+                return (jsx(components.Control, Object.assign({}, props, { className: props.isDisabled ? tws `tu-select__control--disabled` : "" })));
             }, SingleValue: props => {
                 return (jsx(components.SingleValue, Object.assign({}, props, { className: props.isDisabled ? tws `tu-select__single-value--disabled` : "" }, { children: jsx("div", Object.assign({ "data-testid": dataTestId + "-singleValue" }, { children: props.children })) })));
             }, Menu: props => {
-                return (jsx(components.Menu, Object.assign({}, props, { className: menuIsOpen
+                return (jsx(components.Menu, Object.assign({}, props, { className: props.selectProps.menuIsOpen
                         ? tws `tu-select__menu-list animate-fade-in-fast`
                         : tws `tu-select__menu-list animate-fade-out-fast` })));
             }, Option: props => {
@@ -2261,7 +2263,7 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
                 return (jsx(components.Option, Object.assign({}, props, { innerProps: Object.assign(Object.assign({}, props.innerProps), { role: "option", onClick: () => { } }) }, { children: props.isMulti ? (jsx(MultiSelectMenuItem, Object.assign({}, componentProps, { disabled: disabled, dataTestId: props.label }))) : (jsx(SingleSelectMenuItem, Object.assign({}, componentProps, { disabled: disabled || props.isDisabled, dataTestId: props.label }))) })));
             } }, componentsProps);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [componentsProps, disabled, menuIsOpen, refMenuIsEnabled, maxSelectedDisplayCount]); // do not add dropdownIcon (it will cause issue with opening/closing list for selects with custom icon)
+    }, [componentsProps, disabled, maxSelectedDisplayCount]); // do not add dropdownIcon (it will cause issue with opening/closing list for selects with custom icon)
     return customComponents;
 };
 const StyledIcon = tw.div `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.24",
+  "version": "0.1.25",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {