@trackunit/react-components 0.0.124 → 0.0.125

package/index.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { tw, tws } from '@trackunit/tailwind-styled-components';
 import * as React from 'react';
-import { useState, forwardRef, useCallback, useRef, Fragment as Fragment$1, createElement, useContext, useEffect, memo } from 'react';
+import React__default, { useState, forwardRef, useCallback, useRef, Fragment as Fragment$1, createElement, useContext, useEffect, memo } from 'react';
 import { HeroIconsArray, heroIconLookup, TrackunitSolidIconsArray, TrackunitOutlineIconsArray, trackunitIconLookup } from '@trackunit/ui-icons';
 import EChart from 'echarts-for-react';
 import { v4 } from 'uuid';
@@ -13,9 +13,10 @@ import usePortal from 'react-useportal';
 import { createPopper } from '@popperjs/core';
 import { Helmet } from 'react-helmet';
 import { UNSAFE_LocationContext, UNSAFE_NavigationContext } from 'react-router-dom';
+import ReactSelect, { components } from 'react-select';
+export { default as ValueType } from 'react-select';
 import ReactAsyncCreatableSelect from 'react-select/async-creatable';
 import ReactCreatableSelect from 'react-select/creatable';
-import ReactSelect from 'react-select';
 import ReactAsyncSelect from 'react-select/async';
 import { format, formatDistance } from 'date-fns';
 
@@ -79,6 +80,16 @@ function __rest(s, e) {
                 t[p[i]] = s[p[i]];
         }
     return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
 }
 
 /**
@@ -104,7 +115,7 @@ const Spinner = ({
   containerClassName,
   dataTestId
 }) => {
-  return jsx(Container$8, Object.assign({
+  return jsx(Container$a, Object.assign({
     "$mode": mode,
     "$centered": centered,
     className: containerClassName
@@ -140,7 +151,7 @@ const StyledSpinner$1 = tw.span`
   ${p => p.$mode === "dark" ? tws`tu-spinner--dark` : null}
   ${getSpinnerStyles()}
 `;
-const Container$8 = tw.div`
+const Container$a = tw.div`
   tu-spinner--container
   ${p => p.$centered ? tws`tu-spinner--container-centered` : null}
 `;
@@ -672,7 +683,7 @@ const Alert = ({
       ref && ref.current && ref.current.scrollIntoView && ref.current.scrollIntoView();
     }
   }, [ref, autoScroll]);
-  return jsxs(Container$7, Object.assign({
+  return jsxs(Container$9, Object.assign({
     "$intent": intent,
     className: className,
     "data-testid": dataTestId,
@@ -760,7 +771,7 @@ const getBackgroundColor = () => ({
   return colors[$intent];
 };
 
-const Container$7 = tw.div`
+const Container$9 = tw.div`
   tu-alert
   ${p => p.$inline ? tws`tu-alert--inline` : null}
   ${getBackgroundColor()}
@@ -1248,7 +1259,7 @@ const CardHeader = ({
     className: className,
     "$density": density
   }, {
-    children: jsxs(Container$6, {
+    children: jsxs(Container$8, {
       children: [jsxs("div", {
         children: [jsxs(HeadingContainer, {
           children: [jsx(Heading, Object.assign({
@@ -1278,7 +1289,7 @@ const CardHeader = ({
 const BottomBorderedDensityContainer = tw(DensityContainer)`
   tu-card__header-density-container
 `;
-const Container$6 = tw.div`
+const Container$8 = tw.div`
   tu-card__header
 `;
 const HeadingContainer = tw.div`
@@ -2180,7 +2191,7 @@ const PopoverTitle = ({
   className,
   dataTestId
 }) => {
-  return jsxs(Container$5, Object.assign({
+  return jsxs(Container$7, Object.assign({
     "$divider": divider,
     className: className,
     "data-testid": dataTestId
@@ -2196,7 +2207,7 @@ const PopoverTitle = ({
     })), action]
   }));
 };
-const Container$5 = tw.div`
+const Container$7 = tw.div`
   tu-popover-title-container
   ${p => p.$divider && `tu-popover-title-container--divider`}
 `;
@@ -2245,7 +2256,7 @@ const Tooltip = ({
       "data-testid": dataTestId && `${dataTestId}-parent`
     }, {
       children: children
-    })), !disabled && jsx(Container$4, Object.assign({
+    })), !disabled && jsx(Container$6, Object.assign({
       ref: popoverRef,
       onRequestClose: onHide,
       enterDelay: 450
@@ -2269,7 +2280,7 @@ const Tooltip = ({
 const Flex$1 = tw.div`
   inline-flex
 `;
-const Container$4 = tw(AnimatedPopover)`
+const Container$6 = tw(AnimatedPopover)`
   tu-tooltip__container
 `;
 const Content = tw.div`
@@ -2555,7 +2566,7 @@ const Indicator$1 = _a => {
   } = _a,
       rest = __rest(_a, ["dataTestId", "icon", "label", "color", "withBackground"]);
 
-  return jsxs(Container$3, Object.assign({
+  return jsxs(Container$5, Object.assign({
     "$color": color,
     "data-testid": dataTestId
   }, rest, {
@@ -2571,7 +2582,7 @@ const Indicator$1 = _a => {
     }))]
   }));
 };
-const Container$3 = tw.div`
+const Container$5 = tw.div`
  tu-indicator
  ${({
   $color
@@ -2748,7 +2759,7 @@ const MenuItem = ({
     className,
     dataTestId
   });
-  return jsxs(Container$2, Object.assign({}, containerProps, {
+  return jsxs(Container$4, Object.assign({}, containerProps, {
     onClick: e => {
       e.stopPropagation();
       onClick && onClick(e);
@@ -2762,16 +2773,18 @@ const MenuItem = ({
       "$selected": selected
     }, {
       children: prefix
-    })), jsx(Label$2, {
+    })), jsx(Label$2, Object.assign({
+      "data-testid": dataTestId + "-label"
+    }, {
       children: label
-    }), icon && jsx(Icon, Object.assign({
+    })), icon && jsx(Icon, Object.assign({
       "$selected": selected
     }, {
       children: icon
     }))]
   }));
 };
-const Container$2 = tw.div`
+const Container$4 = tw.div`
   group tu-menu-item
   ${({
   $selected
@@ -2822,7 +2835,7 @@ const MenuList = _a => {
     dataTestId
   }, args));
   return jsx(Wrapper, {
-    children: jsx(Container$1, Object.assign({}, containerProps, {
+    children: jsx(Container$3, Object.assign({}, containerProps, {
       style: width ? {
         width
       } : undefined,
@@ -2844,7 +2857,7 @@ const MenuList = _a => {
 const Wrapper = tw.div`
   tu-menu-list__wrapper
 `;
-const Container$1 = tw.div`
+const Container$3 = tw.div`
   tu-menu-list
 `;
 const Divider = tw.div`
@@ -3153,7 +3166,7 @@ const Tag = React.forwardRef((_a, ref) => {
   return jsxs(StyledText, Object.assign({
     className: className,
     "$size": size,
-    "data-testid": dataTestId,
+    "data-testid": `${dataTestId}-tag`,
     "$as": "span",
     "$color": color,
     "$withXIcon": !!onClose,
@@ -3168,7 +3181,7 @@ const Tag = React.forwardRef((_a, ref) => {
         dataTestId: dataTestId + "Icon",
         type: "solid",
         style: {
-          "-webkit-transition": "-webkit-transform 0.150s"
+          WebkitTransition: "-webkit-transform 0.150s"
         },
         className: size === "medium" ? tws`tu-tag__icon` : tws`tu-tag__icon tu-tag__icon--small`
       })
@@ -3475,7 +3488,7 @@ tu-radioitem__description
  * @returns {JSX.Element} SelectContainer component
  */
 
-const SelectContainer = ({
+const SelectContainer$1 = ({
   children,
   label,
   hideLabel,
@@ -3484,10 +3497,13 @@ const SelectContainer = ({
   error,
   description,
   info,
-  dataTestId
+  dataTestId,
+  isDisabled
 }) => {
-  return jsxs(Container, Object.assign({
-    "data-testid": dataTestId
+  return jsxs(Container$2, Object.assign({
+    "data-testid": dataTestId,
+    "$hasError": hasError,
+    "$isDisabled": isDisabled
   }, {
     children: [label && !hideLabel && jsx(Label$5, Object.assign({
       htmlFor: id
@@ -3501,123 +3517,573 @@ const SelectContainer = ({
     }))]
   }));
 };
-const Container = tw.label`
-  tu-select__container
+const Container$2 = tw.label`
+  tu-select__container 
+  tu-select
+  ${({
+  $hasError
+}) => $hasError ? tws`tu-select--invalid` : null}
+  ${({
+  $isDisabled
+}) => $isDisabled ? tws`tu-select--disabled` : null}
 `;
 const InformativeText = tw(Text)`
   tu-informative-text
   ${p => p.$hasError ? `tu-informative-text--error` : null}
 `;
 
-const getSelectHeight = size => {
-  const tokens = {
-    small: "var(--spacing-8)",
-    default: "var(--spacing-10)"
-  };
-  return tokens[size];
+/**
+ * @param {MultiValue<Option> | SingleValue<Option>} arg option to check type
+ * @returns {arg is MultiValue<Option> } is Multivalue
+ */
+function isMultiValue(arg) {
+  return Array.isArray(arg);
+}
+
+function isGroupBase(arg) {
+  return arg.options !== undefined;
+}
+
+const isSelectedOption = (option, selected) => {
+  if (isGroupBase(option)) {
+    return false;
+  }
+
+  return isMultiValue(selected) ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  selected.some(v => v.value === option.value) : // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  option.value === (selected === null || selected === void 0 ? void 0 : selected.value);
+};
+
+const removeSelectedFromGroups = (group, selected) => {
+  if (isGroupBase(group)) {
+    return Object.assign(Object.assign({}, group), {
+      options: group.options.filter(option => !isSelectedOption(option, selected))
+    });
+  }
+
+  return group;
+};
+/**
+ *  @template IsMulti
+ * @template Group
+ * @param {OptionsOrGroups<Option, Group> | undefined} options An array of options to select from
+ * @param {PropsValue<Option> | undefined} value Selected values
+ * @returns {OptionsOrGroups<Option, Group>} An array of ordered options with selected on top
+ */
+
+
+const getOrderedOptions = (options, value) => {
+  if (value && options) {
+    const orderedValues = isMultiValue(value) ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    [...value].sort((a, b) => a.label.localeCompare(b.label)) : [value];
+    const selectableOptions = options.filter(option => !isSelectedOption(option, value)).map(option => removeSelectedFromGroups(option, value)); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+    return orderedValues.concat(selectableOptions) || [];
+  }
+
+  return options || [];
 };
+
 /**
- * The useCustomStyles hook for getting trackunit specific styling on react-select.
+ * A single select menu item is a basic wrapper around Menu item designed to be used as a single value render in Select list
  *
- * @param {StylesConfig} styles -
- * @param {boolean} hasError -
- * @param {boolean} isInvalid -
- * @param {SelectSize} size -
- * @returns {{StylesConfig}} useCustomStyles hook return
+ * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
+ * @returns {JSX.Element} SingleSelectMenuItem
  */
 
+const SingleSelectMenuItem = ({
+  label,
+  icon,
+  onClick,
+  selected,
+  dataTestId,
+  focused
+}) => {
+  return jsx(MenuItem, {
+    dataTestId: dataTestId,
+    label: label,
+    prefix: icon,
+    onClick: onClick,
+    selected: selected,
+    focused: focused,
+    icon: selected ? jsx(Icon$1, {
+      name: "CheckIcon",
+      size: "small"
+    }) : undefined
+  });
+};
+/**
+ * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
+ *
+ * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
+ * @returns {JSX.Element} multi select menu item
+ */
 
-const useCustomStyles = (styles, hasError, isInvalid, size) => {
-  const customStyles = React.useMemo(() => {
-    return Object.assign({
-      control: (base, state) => Object.assign(Object.assign({}, base), {
-        minHeight: getSelectHeight(size),
-        borderRadius: "var(--spacing-1)",
-        backgroundColor: state.isDisabled ? "rgb(var(--color-neutral-50))" : "#FFF",
-        border: "none",
-        fontSize: "0.875rem",
-        color: state.isDisabled ? "rgb(var(--color-neutral-50))" : "#1a1b1c",
-        cursor: state.isDisabled ? "not-allowed" : "pointer",
-        boxShadow: state.isFocused ? `inset 0 0 0 2px ${hasError ? "rgb(var(--color-danger-600))" : "rgb(var(--color-primary-600))"}, 0 0 0 2px ${hasError ? "rgb(var(--color-danger-100))" : "rgb(var(--color-primary-300))"}` : `inset 0 0 0 2px ${hasError ? "rgb(var(--color-danger-500))" : isInvalid ? "rgb(var(--color-warning-300))" : "rgb(var(--color-neutral-300))"}`,
-        "&:hover": {
-          boxShadow: state.isDisabled ? "" : `inset 0 0 0 2px ${hasError ? "rgb(var(--color-danger-600))" : "rgb(var(--color-neutral-400))"}`
-        }
-      }),
-      singleValue: base => Object.assign(Object.assign({}, base), {
-        color: "#1a1b1c"
-      }),
-      multiValue: base => Object.assign(Object.assign({}, base), {
-        backgroundColor: "rgb(var(--color-neutral-100))"
-      }),
-      multiValueLabel: base => Object.assign(Object.assign({}, base), {
-        fontWeight: 600,
-        fontSize: "rgb(var(--color-neutral-400))",
-        color: "#1a1b1c"
-      }),
-      indicatorsContainer: base => Object.assign(Object.assign({}, base), {
-        color: "rgb(var(--color-neutral-300))"
-      }),
-      menu: base => Object.assign(Object.assign({}, base), {
-        borderRadius: "var(--spacing-1)",
-        marginTop: "var(--spacing-1)",
-        fontSize: "var(--font-size-sm)",
-        zIndex: "var(--z-popover)"
-      }),
-      input: base => Object.assign(Object.assign({}, base), {
-        color: "#1a1b1c"
-      }),
-      placeholder: base => Object.assign(Object.assign({}, base), {
-        color: "rgb(var(--color-neutral-500))"
-      }),
-      option: base => Object.assign(Object.assign({}, base), {
-        cursor: "pointer"
-      }),
-      menuPortal: base => Object.assign(Object.assign({}, base), {
-        zIndex: "var(--z-popover)"
-      })
-    }, styles);
-  }, [styles, size, hasError, isInvalid]);
-  return {
-    customStyles
+const MultiSelectMenuItem = ({
+  label,
+  onClick,
+  selected,
+  dataTestId,
+  focused,
+  disabled
+}) => {
+  return jsx(MenuItem, {
+    dataTestId: dataTestId,
+    label: label,
+    disabled: disabled,
+    prefix: jsx(Checkbox, {
+      checked: selected,
+      readOnly: false,
+      onChange: () => null,
+      disabled: disabled,
+      onClick: e => {
+        e.stopPropagation();
+      }
+    }),
+    onClick: e => {
+      e.stopPropagation();
+      onClick && onClick(e);
+    },
+    selected: selected,
+    focused: focused
+  });
+};
+
+/**
+ * Extended Tag component with information about its own width.
+ * Used in the select component.
+ *
+ * @param {TagProps} props - The props for the tag component
+ * @returns {JSX.Element} TagWithWidth component
+ */
+
+const TagWithWidth = _a => {
+  var {
+    onWidthKnown,
+    children
+  } = _a,
+      rest = __rest(_a, ["onWidthKnown", "children"]);
+
+  const ref = React__default.useRef(null);
+  React__default.useLayoutEffect(() => {
+    var _a;
+
+    onWidthKnown && onWidthKnown({
+      width: ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0
+    });
+  }, [ref, onWidthKnown]);
+  return jsx(Tag, Object.assign({
+    ref: ref
+  }, rest, {
+    children: children
+  }));
+};
+
+/**
+ * TagsContainer component to display tags in limited space when children can't fit space it displays counter
+ *
+ * @param {TagsContainerProps} props - The props for the TagContainer
+ * @returns {JSX.Element} TagsContainer
+ */
+
+const TagsContainer = ({
+  items,
+  width = "100%",
+  itemsGap = 5,
+  postFix
+}) => {
+  const [isReady, setIsReady] = React__default.useState(false);
+  const [counterWidth, setCounterWidth] = React__default.useState(0);
+  const containerRef = React__default.useRef(null);
+  const availableWidth = React__default.useRef();
+  const childrenWidth = React__default.useRef([]);
+  const itemsCount = items.length;
+  React__default.useLayoutEffect(() => {
+    var _a;
+
+    availableWidth.current = ((_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.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 === null || availableWidth === void 0 ? void 0 : 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) => {
+      return previous + current.width;
+    }, 0);
+    const isLast = index === items.length;
+    const counterRequired = requiredSpace > availableSpace && counter !== 0;
+
+    if (isLast && counterRequired) {
+      return jsx(TagWithWidth, Object.assign({
+        onWidthKnown: ({
+          width: reportedWidth
+        }) => setCounterWidth(reportedWidth),
+        color: "neutral"
+      }, {
+        children: jsxs(Counter, {
+          children: ["+", counter]
+        })
+      }), item.text + index);
+    }
+
+    if (isLast) {
+      return null;
+    }
+
+    const itemCanFit = spaceNeeded <= availableSpace;
+
+    if (itemCanFit) {
+      return jsx(TagWithWidth, Object.assign({
+        onWidthKnown: onWidthKnownHandler,
+        className: tws`shrink-0 inline-flex`,
+        onClose: e => {
+          e.stopPropagation();
+          item.onClick();
+        },
+        color: item.disabled ? "unknown" : "primary",
+        dataTestId: item.text
+      }, {
+        children: item.text
+      }), item.text + index);
+    }
+
+    const fromTheItems = item.text !== "";
+
+    if (fromTheItems) {
+      counter = counter + 1;
+    }
+
+    return null;
+  }).filter(element => element !== null);
+  return jsxs(Container$1, Object.assign({
+    style: {
+      width: `${width}`
+    },
+    "$ready": isReady,
+    ref: containerRef
+  }, {
+    children: [renderedElements, postFix]
+  }));
 };
+const Container$1 = tw.div`
+tu-select__dynamic-tag--container
+${({
+  $ready
+}) => {
+  return $ready ? tws`visible` : tws`invisible`;
+}}
+`;
+const Counter = tw.div`
+tu-select__counter
+`;
+
 /**
- * The useCustomComponents hook for getting trackunit specific components on react-select.
+ * A hook to retrieve components override object.
+ * This complex object includes all the compositional components that are used in react-select. If you wish to overwrite a component, pass in an object with the appropriate namespace.
  *
- * @param {SelectComponents} components -
- * @returns {*}} useCustomComponents hook return
+ * @template IsMulti
+ * @template Group
+ * @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} menuIsClosing a flag to trigger fade out animation for the menu
+ * @param {React.MutableRefObject<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 {JSX.Element} dropdownIcon an custom dropdown icon
+ * @returns {Partial<SelectComponents<Option, boolean, GroupBase<Option>>> | undefined} components object to override react-select default components
  */
 
-const useCustomComponents = components => {
+const useCustomComponents = (componentsProps, disabled, menuIsClosing, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon) => {
   const customComponents = React.useMemo(() => {
     return Object.assign({
-      LoadingIndicator: loadingIndicatorProps => {
-        const loadingIndicatorStyles = loadingIndicatorProps === null || loadingIndicatorProps === void 0 ? void 0 : loadingIndicatorProps.getStyles("loadingIndicator", loadingIndicatorProps);
-        delete loadingIndicatorStyles.label;
-        return jsx("div", Object.assign({
-          style: loadingIndicatorStyles
+      ValueContainer: props => {
+        if (props.isMulti) {
+          const PLACEHOLDER_KEY = "placeholder";
+          const key = props && props.children && props.children[0] ? props.children[0].key : "";
+          const values = props && props.children ? props.children[0] : [];
+          const tags = key === PLACEHOLDER_KEY ? [] : values;
+          const searchInput = props && props.children && props.children[1];
+          return jsx(components.ValueContainer, Object.assign({}, props, {
+            isDisabled: props.selectProps.isDisabled
+          }, {
+            children: maxSelectedDisplayCount === undefined ? jsx(TagsContainer, {
+              width: "100%",
+              items: tags ? tags.map(({
+                props: tagProps
+              }) => {
+                return {
+                  text: tagProps.children,
+                  onClick: disabled ? undefined : e => {
+                    var _a, _b;
+
+                    refMenuIsEnabled.current = false;
+                    ((_a = tagProps === null || tagProps === void 0 ? void 0 : tagProps.removeProps) === null || _a === void 0 ? void 0 : _a.onClick) && ((_b = tagProps === null || tagProps === void 0 ? void 0 : tagProps.removeProps) === null || _b === void 0 ? void 0 : _b.onClick(e));
+                  },
+                  disabled: disabled
+                };
+              }) : [],
+              postFix: searchInput
+            }) : jsxs(Fragment, {
+              children: [tags && tags.slice(0, maxSelectedDisplayCount).map(({
+                props: tagProps
+              }) => {
+                var _a, _b;
+
+                return jsx(Tag, Object.assign({
+                  className: tws`shrink-0 inline-flex`,
+                  onClose: e => {
+                    var _a, _b;
+
+                    e.stopPropagation();
+                    refMenuIsEnabled.current = false;
+                    ((_a = tagProps === null || tagProps === void 0 ? void 0 : tagProps.removeProps) === null || _a === void 0 ? void 0 : _a.onClick) && ((_b = tagProps === null || tagProps === void 0 ? void 0 : tagProps.removeProps) === null || _b === void 0 ? void 0 : _b.onClick(e));
+                  },
+                  color: disabled ? "unknown" : "primary",
+                  dataTestId: (_a = tagProps.children) === null || _a === void 0 ? void 0 : _a.toString()
+                }, {
+                  children: tagProps.children
+                }), (_b = tagProps.children) === null || _b === void 0 ? void 0 : _b.toString());
+              }), tags && tags.length > maxSelectedDisplayCount && jsxs(Tag, Object.assign({
+                color: "neutral",
+                dataTestId: "counter"
+              }, {
+                children: ["+", tags.length - maxSelectedDisplayCount]
+              })), searchInput]
+            })
+          }));
+        }
+
+        return jsx(components.ValueContainer, Object.assign({}, props, {
+          isDisabled: props.selectProps.isDisabled
+        }, {
+          children: props.children
+        }));
+      },
+      LoadingIndicator: props => {
+        return jsx(Spinner, {
+          size: "small",
+          className: tws`mt-1.5 mr-1`
+        });
+      },
+      DropdownIndicator: props => {
+        return jsx(components.DropdownIndicator, Object.assign({}, props, {
+          children: jsx(StyledIcon, {
+            children: dropdownIcon ? dropdownIcon : menuIsClosing ? jsx(Icon$1, {
+              name: "ChevronDownIcon",
+              size: "medium"
+            }) : jsx(Icon$1, {
+              name: "ChevronUpIcon",
+              size: "medium"
+            })
+          })
+        }));
+      },
+      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$1, {
+              name: "XCircleIcon",
+              size: "medium"
+            })
+          }))
+        }));
+      },
+      Control: props => {
+        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: menuIsClosing ? tws`tu-menu-list animate-fade-out-fast` : tws`tu-menu-list animate-fade-in-fast`
+        }));
+      },
+      MenuList: props => {
+        return jsx(components.MenuList, Object.assign({}, props, {
+          children: jsx(Container, Object.assign({
+            "$disabled": disabled
+          }, {
+            children: props.children
+          }))
+        }));
+      },
+      Option: props => {
+        const componentProps = {
+          label: props.label,
+          focused: props.isFocused,
+          selected: props.isSelected,
+          onClick: props.innerProps.onClick
+        };
+        return jsx(components.Option, Object.assign({}, props, {
+          innerProps: Object.assign(Object.assign({}, props.innerProps), {
+            onClick: () => {}
+          })
         }, {
-          children: jsx(Spinner, {})
+          children: props.isMulti ? jsx(MultiSelectMenuItem, Object.assign({}, componentProps, {
+            disabled: disabled,
+            dataTestId: props.label
+          })) : jsx(SingleSelectMenuItem, Object.assign({}, componentProps, {
+            dataTestId: props.label
+          }))
         }));
       }
-    }, components);
-  }, [components]);
+    }, componentsProps); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [componentsProps, disabled, menuIsClosing, refMenuIsEnabled, maxSelectedDisplayCount]); // do not add dropdownIcon (it will cause issue with opening/closing list for selects with custom icon)
+
+  return customComponents;
+};
+const Container = tw.div`
+  tu-select__menu
+  ${({
+  $disabled
+}) => {
+  return $disabled ? tws`pointer-events-none` : "";
+}}
+`;
+const StyledIcon = tw.div`
+tu-select--icon
+`;
+const XIcon = tw.div`
+tu-select--icon
+tu-select__x-icon
+`;
+
+/**
+ * @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 {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) => {
+  const customStyles = React.useMemo(() => {
+    return Object.assign({
+      control: base => {
+        return Object.assign(Object.assign({}, base), {
+          border: "0",
+          boxShadow: "0",
+          "&:hover": {
+            border: "0"
+          },
+          marginRight: "2px",
+          backgroundColor: ""
+        });
+      },
+      singleValue: base => Object.assign({}, base),
+      multiValue: base => Object.assign({}, base),
+      multiValueLabel: base => Object.assign({}, base),
+      indicatorsContainer: base => Object.assign({}, base),
+      indicatorSeparator: () => ({
+        width: "0px"
+      }),
+      menu: () => {
+        return {
+          width: "100%",
+          marginTop: "4px",
+          marginBottom: "18px",
+          transition: "all 1s ease-in-out"
+        };
+      },
+      input: base => Object.assign(Object.assign({}, base), {
+        marginLeft: "0px"
+      }),
+      placeholder: base => Object.assign({}, base),
+      option: () => ({}),
+      menuPortal: base => Object.assign(Object.assign({}, base), {
+        width: (refContainer === null || refContainer === void 0 ? void 0 : refContainer.current) ? `${refContainer.current.clientWidth}px` : base.width,
+        transform: (refPrefix === null || refPrefix === void 0 ? void 0 : refPrefix.current) ? `translate(-${refPrefix.current.clientWidth + 2}px)` : "translate(-2px)",
+        backgroundColor: "#ffffff",
+        borderRadius: "var(--border-radius-lg)",
+        zIndex: 20,
+        borderColor: "rgb(var(--color-slate-300))",
+        boxShadow: "var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)"
+      }),
+      menuList: base => {
+        return Object.assign(Object.assign({}, base), {
+          width: "100%",
+          borderRadius: "0px",
+          boxShadow: "none",
+          paddingTop: "0px"
+        });
+      },
+      valueContainer: base => {
+        return Object.assign(Object.assign({}, base), {
+          flexWrap: maxSelectedDisplayCount !== undefined ? "wrap" : "nowrap",
+          gap: "0.25rem"
+        });
+      },
+      container: base => Object.assign(Object.assign({}, base), {
+        border: "none",
+        width: "calc(100% - 2px)",
+        paddingLeft: "2px"
+      }),
+      dropdownIndicator: base => Object.assign(Object.assign({}, base), {
+        padding: "0px"
+      }),
+      clearIndicator: base => {
+        return Object.assign(Object.assign({}, base), {
+          padding: "0px"
+        });
+      }
+    }, styles); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [refContainer, refPrefix]);
   return {
-    customComponents
+    customStyles
   };
 };
 
 /**
  * The CreatableSelect component.
  *
- * @param {ISelectProps} props - The props for the CreatableSelect component
+ * @param {CreateableSelectProps} props - The props for the CreatableSelect component
  * @returns {JSX.Element} CreatableSelect component
  */
 
 const CreatableSelect = _a => {
   var {
-    dataTestId,
-    size = "medium",
+    dataTestId = "createableSelect",
     id,
     label,
     hideLabel,
@@ -3626,19 +4092,77 @@ const CreatableSelect = _a => {
     info,
     isInvalid,
     maxMenuHeight = 308,
-    styles,
-    components
+    components,
+    disabled,
+    async,
+    value,
+    onChange,
+    isMulti,
+    classNamePrefix,
+    isLoading,
+    options,
+    onMenuOpen,
+    styles
   } = _a,
-      props = __rest(_a, ["dataTestId", "size", "id", "label", "hideLabel", "description", "error", "info", "isInvalid", "maxMenuHeight", "styles", "components"]);
+      props = __rest(_a, ["dataTestId", "id", "label", "hideLabel", "description", "error", "info", "isInvalid", "maxMenuHeight", "components", "disabled", "async", "value", "onChange", "isMulti", "classNamePrefix", "isLoading", "options", "onMenuOpen", "styles"]);
 
   const hasError = !!error;
+  const refContainer = React__default.useRef(null);
+  const refPrefix = React__default.useRef(null);
+  const [menuIsOpen, setMenuIsOpen] = React__default.useState(false);
+  const [menuIsClosing, setMenuIsClosing] = React__default.useState(false);
+  const refMenuIsEnabled = React__default.useRef(true);
   const {
     customStyles
-  } = useCustomStyles(styles, hasError, isInvalid, size);
-  const {
-    customComponents
-  } = useCustomComponents(components);
-  return jsx(SelectContainer, Object.assign({
+  } = useCustomStyles(refContainer, refPrefix, undefined, styles);
+  const menuPlacement = "auto";
+  const customComponents = useCustomComponents(components, disabled || false, menuIsClosing, refMenuIsEnabled, dataTestId, undefined);
+
+  const openMenuHandler = () => __awaiter(void 0, void 0, void 0, function* () {
+    onMenuOpen && onMenuOpen();
+
+    if (refMenuIsEnabled.current) {
+      setMenuIsClosing(false);
+      yield setMenuIsOpen(true);
+    } else {
+      refMenuIsEnabled.current = true;
+    }
+  });
+
+  const closeMenuHandler = () => {
+    if (refMenuIsEnabled.current) {
+      setMenuIsClosing(true);
+      setTimeout(() => {
+        setMenuIsOpen(false);
+      }, 250);
+    }
+  };
+
+  const selectProps = {
+    value,
+    menuPlacement,
+    maxMenuHeight,
+    onChange,
+    "aria-label": label,
+    "data-testid": dataTestId,
+    components: customComponents,
+    styles: customStyles,
+    tabSelectsValue: false,
+    blurInputOnSelect: !isMulti,
+    menuPortalTarget: document.body,
+    isSearchable: disabled ? false : true,
+    menuShouldBlockScroll: true,
+    menuShouldScrollIntoView: true,
+    openMenuOnFocus: disabled ? false : true,
+    menuIsOpen: disabled ? false : menuIsOpen,
+    openMenuOnClick: true,
+    closeMenuOnSelect: false,
+    isMulti: isMulti,
+    classNamePrefix,
+    isLoading,
+    id
+  };
+  return jsx(SelectContainer$1, Object.assign({
     label: label,
     hideLabel: hideLabel,
     id: id,
@@ -3646,88 +4170,185 @@ const CreatableSelect = _a => {
     error: error,
     description: description,
     info: info,
-    dataTestId: dataTestId
+    dataTestId: dataTestId,
+    isDisabled: disabled
   }, {
-    children: props.isAsync ? jsx(ReactAsyncCreatableSelect, Object.assign({
-      "aria-label": label,
-      maxMenuHeight: maxMenuHeight,
-      "data-testid": dataTestId,
-      styles: customStyles,
-      components: customComponents
-    }, props)) : jsx(ReactCreatableSelect, Object.assign({
+    children: async ? jsx(ReactAsyncCreatableSelect, Object.assign({
       "aria-label": label,
       maxMenuHeight: maxMenuHeight,
       "data-testid": dataTestId,
-      styles: customStyles,
       components: customComponents
-    }, props))
+    }, props, {
+      onMenuOpen: () => {
+        !disabled && openMenuHandler();
+      },
+      onMenuClose: () => {
+        closeMenuHandler();
+      }
+    })) : jsx(ReactCreatableSelect, Object.assign({}, selectProps, {
+      options: disabled ? getOrderedOptions(options, value).map(option => {
+        return Object.assign(Object.assign({}, option), {
+          disabled: true
+        });
+      }) : getOrderedOptions(options, value),
+      isMulti: isMulti,
+      onMenuOpen: () => {
+        !disabled && openMenuHandler();
+      },
+      onMenuClose: () => {
+        closeMenuHandler();
+      }
+    }))
   }));
 };
 
 /**
- * The Select component.
+ * Selects are input components used to choose a value from a set.
  *
- * @param {ISelectProps} props - The props for the Select component
+ * @param {SelectProps} props - The props for the Select component
  * @returns {JSX.Element} Select component
  */
 
-const Select = _a => {
-  var {
-    dataTestId,
-    size = "medium",
-    id,
-    label,
-    hideLabel,
-    description,
-    error,
-    info,
-    isInvalid,
-    maxMenuHeight = 308,
-    styles,
-    components
-  } = _a,
-      props = __rest(_a, ["dataTestId", "size", "id", "label", "hideLabel", "description", "error", "info", "isInvalid", "maxMenuHeight", "styles", "components"]);
-
-  const hasError = !!error;
+const Select = ({
+  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
+}) => {
+  const refContainer = React.useRef(null);
+  const refPrefix = React.useRef(null);
   const {
     customStyles
-  } = useCustomStyles(styles, hasError, isInvalid, size);
-  const {
-    customComponents
-  } = useCustomComponents(components);
-  return jsx(SelectContainer, Object.assign({
-    label: label,
-    hideLabel: hideLabel,
-    id: id,
-    hasError: hasError,
-    error: error,
-    description: description,
-    info: info,
-    dataTestId: dataTestId
+  } = useCustomStyles(refContainer, refPrefix, maxSelectedDisplayCount, styles);
+  const [menuIsOpen, setMenuIsOpen] = React.useState(false);
+  const [menuIsClosing, setMenuIsClosing] = React.useState(true);
+  const refMenuIsEnabled = React.useRef(true);
+  const customComponents = useCustomComponents(components, disabled || false, menuIsClosing, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon);
+  const menuPlacement = "auto";
+
+  const openMenuHandler = () => __awaiter(void 0, void 0, void 0, function* () {
+    onMenuOpen && onMenuOpen();
+
+    if (refMenuIsEnabled.current) {
+      setMenuIsClosing(false);
+      yield setMenuIsOpen(true);
+    } else {
+      refMenuIsEnabled.current = true;
+    }
+  });
+
+  const closeMenuHandler = () => {
+    if (refMenuIsEnabled.current) {
+      setMenuIsClosing(true);
+      setTimeout(() => {
+        setMenuIsOpen(false);
+      }, 250);
+    }
+
+    onMenuClose && onMenuClose();
+  };
+
+  const selectProps = {
+    value,
+    menuPlacement,
+    maxMenuHeight,
+    onChange,
+    "aria-label": label,
+    "data-testid": dataTestId,
+    components: customComponents,
+    styles: customStyles,
+    tabSelectsValue: false,
+    blurInputOnSelect: !isMulti,
+    menuPortalTarget: document.body,
+    isSearchable: disabled ? false : isSearchable,
+    menuShouldBlockScroll: true,
+    menuShouldScrollIntoView: true,
+    openMenuOnFocus: true,
+    menuIsOpen,
+    openMenuOnClick: true,
+    closeMenuOnSelect: false,
+    isMulti,
+    classNamePrefix,
+    isLoading,
+    isClearable,
+    id,
+    onMenuScrollToBottom,
+    onInputChange
+  };
+  const orderedOptions = React.useMemo(() => {
+    return disabled ? getOrderedOptions(options, value).map(option => {
+      return Object.assign(Object.assign({}, option), {
+        disabled: true
+      });
+    }) : getOrderedOptions(options, value);
+  }, [options, value, disabled]);
+  return jsxs(SelectContainer, Object.assign({
+    ref: refContainer,
+    className: className,
+    "data-testid": dataTestId,
+    "$hasError": hasError,
+    "$isDisabled": disabled
   }, {
-    children: props.isAsync ? jsx(ReactAsyncSelect, Object.assign({
-      "aria-label": label,
-      maxMenuHeight: maxMenuHeight,
-      "data-testid": dataTestId,
-      styles: customStyles,
-      menuPortalTarget: document.body,
-      components: customComponents,
-      menuPlacement: "auto",
-      menuShouldBlockScroll //Temp fix. See https://github.com/JedWatson/react-select/issues/4088
-      : true
-    }, props)) : jsx(ReactSelect, Object.assign({
-      "aria-label": label,
-      maxMenuHeight: maxMenuHeight,
-      "data-testid": dataTestId,
-      styles: customStyles,
-      menuPortalTarget: document.body,
-      components: customComponents,
-      menuPlacement: "auto",
-      menuShouldBlockScroll // Temp fix.
-      : true
-    }, props))
+    children: [prefix !== undefined && jsx(SelectPrefix, Object.assign({
+      "data-testid": `${dataTestId}-prefix`,
+      ref: refPrefix
+    }, {
+      children: prefix
+    })), async ? jsx(ReactAsyncSelect, Object.assign({}, selectProps, async, {
+      onMenuOpen: () => {
+        openMenuHandler();
+      },
+      onMenuClose: () => {
+        closeMenuHandler();
+      }
+    })) : jsx(ReactSelect, Object.assign({}, selectProps, {
+      options: filterOption ? orderedOptions : options,
+      hideSelectedOptions: false,
+      isMulti: isMulti,
+      onMenuOpen: () => {
+        openMenuHandler();
+      },
+      onMenuClose: () => {
+        closeMenuHandler();
+      }
+    }))]
   }));
 };
+const SelectPrefix = tw.div`
+  tu-select__prefix 
+`;
+const SelectContainer = tw.div`
+  tu-select
+  ${({
+  $hasError
+}) => $hasError ? tws`tu-select--invalid` : null}
+  ${({
+  $isDisabled
+}) => $isDisabled ? tws`tu-select--disabled` : null}
+`;
+Select.displayName = "Select";
 
 /**
  * Display placeholder lines before the data gets loaded to reduce load-time frustration.
@@ -4548,4 +5169,4 @@ const Layout = tw.div`
   tu-layout-TwoColumnLayout
 `;
 
-export { Alert, AnimatedPopover, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$5 as Label, LegendItem, MenuButton, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, NumberField, NumberInput, PageHeading, PopoverLifecycle, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Select, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, activityColors, colors, criticalityColors, docs, generalColors, intentColors, useContainerProps, useCustomComponents, useCustomStyles, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };
+export { Alert, AnimatedPopover, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$5 as Label, LegendItem, MenuButton, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MultiSelectMenuItem, NumberField, NumberInput, PageHeading, PopoverLifecycle, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Select, SingleSelectMenuItem, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, activityColors, colors, criticalityColors, docs, generalColors, getOrderedOptions, intentColors, isMultiValue, useContainerProps, useCustomComponents, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };