@trackunit/react-components 0.0.138 → 0.0.142

package/index.js

@@ -1,18 +1,18 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { tw, tws } from '@trackunit/tailwind-styled-components';
+import { tw, tws, twx } from '@trackunit/tailwind-styled-components';
 import * as React from 'react';
-import React__default, { 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, useEffect, useContext, memo } from 'react';
 import { HeroIconsArray, heroIconLookup, TrackunitSolidIconsArray, TrackunitOutlineIconsArray, trackunitIconLookup } from '@trackunit/ui-icons';
 import EChart from 'echarts-for-react';
 import { v4 } from 'uuid';
-import { animated, useSpring, useTransition } from '@react-spring/web';
 import { useMeasure, useCopyToClipboard, useKeyPressEvent } from 'react-use';
 import { DayPicker as DayPicker$1 } from 'react-day-picker';
 import { enGB, enUS, da, de, cs, nl, fr, fi, hu, it, nb, pl, pt, ru, ro, es, sv, ja, th } from 'date-fns/locale';
+import { useSpring, animated } from '@react-spring/web';
 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 { 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';
@@ -164,7 +164,7 @@ const Container$9 = tw.div`
  */
 
 const getStyles = () => ({
-  $intent,
+  $color,
   $variant
 }) => {
   const styles = {
@@ -183,7 +183,7 @@ const getStyles = () => ({
       warning: tws`tu-button--transparent tu-button--transparent-warning`
     }
   };
-  return styles[$variant][$intent];
+  return styles[$variant][$color];
 };
 /**
  * Helper to get the needed classname for padding.
@@ -223,7 +223,7 @@ const Button = React.forwardRef((_a, ref) => {
     fullWidth = false,
     prefix,
     suffix,
-    intent = "primary",
+    color = "primary",
     variant = "filled",
     type = "button",
     size = "medium",
@@ -234,7 +234,7 @@ const Button = React.forwardRef((_a, ref) => {
     tabIndex,
     renderAs = "button"
   } = _a,
-      rest = __rest(_a, ["onClick", "children", "loading", "disabled", "className", "fullWidth", "prefix", "suffix", "intent", "variant", "type", "size", "square", "dataTestId", "title", "role", "tabIndex", "renderAs"]);
+      rest = __rest(_a, ["onClick", "children", "loading", "disabled", "className", "fullWidth", "prefix", "suffix", "color", "variant", "type", "size", "square", "dataTestId", "title", "role", "tabIndex", "renderAs"]);
 
   return jsxs(StyledButton$1, Object.assign({
     "$as": renderAs,
@@ -242,7 +242,7 @@ const Button = React.forwardRef((_a, ref) => {
     disabled: disabled || loading,
     type: type,
     className: className,
-    "$intent": intent,
+    "$color": color,
     "$fullWidth": fullWidth,
     "$variant": variant,
     "$size": size,
@@ -266,7 +266,7 @@ const StyledButton$1 = tw.button`
   ${getStyles()}
   ${getPadding()}
 `;
-const StyledSpinner = tw(Spinner)`
+const StyledSpinner = twx(Spinner)`
   tu-button__spinner
 `;
 
@@ -295,7 +295,7 @@ const IconButton = React.forwardRef((_a, ref) => {
     })
   }));
 });
-const StyledButton = tw(Button)`
+const StyledButton = twx(Button)`
   ${p => p.$circular ? tws`tu-button--rounded` : null}
 `;
 const IconContainer$2 = tw.div`
@@ -313,6 +313,7 @@ const IconContainer$2 = tw.div`
  */
 const generalColors = {
   PRIMARY: "primary",
+  SECONDARY: "secondary",
   ACCENT: "accent",
   NEUTRAL: "neutral"
 };
@@ -443,6 +444,9 @@ const Root$4 = tw.span`
     case colors.PRIMARY:
       return tws`tu-icon--primary`;
 
+    case colors.SECONDARY:
+      return tws`tu-icon--secondary`;
+
     case colors.ACCENT:
       return tws`tu-icon--accent`;
 
@@ -535,7 +539,7 @@ const ActionButton = ({
     children: jsx(StyledIconButton, {
       dataTestId: "testIconButtonId",
       size: "small",
-      intent: "tertiary",
+      color: "tertiary",
       icon: jsx(Icon$1, {
         size: "small",
         name: getIconName()
@@ -547,7 +551,7 @@ const ActionButton = ({
 const ActionContainer = tw.div`
   tu-action-container
 `;
-const StyledIconButton = tw(IconButton)`
+const StyledIconButton = twx(IconButton)`
   tu-action-button
 `;
 
@@ -576,7 +580,7 @@ const Flex$2 = tw.div`
   flex
   items-center
 `;
-const CustomIcon = tw(Icon$1)`
+const CustomIcon = twx(Icon$1)`
   cursor-pointer
   w-5
   h-5
@@ -688,7 +692,7 @@ const StyledText$4 = tw.text`
  */
 
 const Alert = ({
-  intent = "info",
+  color = "info",
   title,
   className,
   children,
@@ -701,8 +705,8 @@ const Alert = ({
 }) => {
   const ref = React.useRef();
 
-  const getIconFromIntent = () => {
-    switch (intent) {
+  const getIconFromColor = () => {
+    switch (color) {
       case "danger":
         return jsx(Icon$1, {
           name: "ExclamationIcon",
@@ -728,8 +732,8 @@ const Alert = ({
     }
   };
 
-  const getButtonIntent = () => {
-    switch (intent) {
+  const getButtonColor = () => {
+    switch (color) {
       case "danger":
         return "danger";
 
@@ -770,7 +774,7 @@ const Alert = ({
     }
   }, [ref, autoScroll]);
   return jsxs(Container$8, Object.assign({
-    "$intent": intent,
+    "$color": color,
     className: className,
     "data-testid": dataTestId,
     "$inline": inline,
@@ -780,7 +784,7 @@ const Alert = ({
     children: [jsx(IconContainer$1, Object.assign({
       "$inline": inline
     }, {
-      children: getIconFromIntent()
+      children: getIconFromColor()
     })), jsxs(Content$1, Object.assign({
       "$inline": inline
     }, {
@@ -793,7 +797,7 @@ const Alert = ({
           children: jsx(IconButton, {
             size: "small",
             variant: "transparent",
-            intent: "secondary",
+            color: "secondary",
             onClick: onClose,
             icon: jsx(Icon$1, {
               name: "XIcon",
@@ -809,14 +813,14 @@ const Alert = ({
         children: [secondaryAction && jsx(Button, Object.assign({
           size: "small",
           variant: "transparent",
-          intent: getButtonIntent(),
+          color: getButtonColor(),
           onClick: secondaryAction.onClick,
           loading: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.loading
         }, {
           children: secondaryAction.label
         })), primaryAction && jsx(Button, Object.assign({
           size: "small",
-          intent: getButtonIntent(),
+          color: getButtonColor(),
           onClick: primaryAction.onClick,
           loading: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.loading
         }, {
@@ -827,7 +831,7 @@ const Alert = ({
           children: jsx(IconButton, {
             size: "small",
             variant: "transparent",
-            intent: "secondary",
+            color: "secondary",
             onClick: onClose,
             icon: jsx(Icon$1, {
               name: "XIcon",
@@ -846,7 +850,7 @@ const CloseButtonContainer = tw.div`
 `;
 
 const getBackgroundColor = () => ({
-  $intent
+  $color
 }) => {
   const colors = {
     danger: tws`tu-alert--danger`,
@@ -854,7 +858,7 @@ const getBackgroundColor = () => ({
     success: tws`tu-alert--success`,
     info: tws`tu-alert--info`
   };
-  return colors[$intent];
+  return colors[$color];
 };
 
 const Container$8 = tw.div`
@@ -871,7 +875,7 @@ const ContentDetails = tw.div`
 const ContentBody = tw.div`
   tu-alert__content-body
 `;
-const Description$2 = tw(Text$1)`
+const Description$2 = twx(Text$1)`
   ${p => p.$hasTitle ? tws`tu-alert__description` : null}
 `;
 const RightAligned = tw.div`
@@ -937,6 +941,7 @@ const getBadgeModifierClass = () => ({
 }) => {
   const colorClasses = {
     primary: $subtle ? tws`tu-badge--primary-subtle` : tws`tu-badge--primary`,
+    secondary: $subtle ? tws`tu-badge--secondary-subtle` : tws`tu-badge--secondary`,
     accent: $subtle ? tws`tu-badge--accent-subtle` : tws`tu-badge--accent`,
     success: $subtle ? tws`tu-badge--success-subtle` : tws`tu-badge--success`,
     danger: $subtle ? tws`tu-badge--danger-subtle` : tws`tu-badge--danger`,
@@ -1228,7 +1233,7 @@ const getOverflow = () => ({
   return overflows[$overflow];
 };
 
-const StyledDensityContainer = tw(DensityContainer)`
+const StyledDensityContainer = twx(DensityContainer)`
   ${getOverflow()}
   tu-card__body
 `;
@@ -1258,7 +1263,7 @@ const CardFooter = ({
     })
   }));
 };
-const TopBorderedDensityContainer = tw(DensityContainer)`
+const TopBorderedDensityContainer = twx(DensityContainer)`
   tu-card__footer-density-container
 `;
 const Body = tw.div`
@@ -1365,7 +1370,7 @@ const CardHeader = ({
       }), onClose && jsx(IconButton, {
         dataTestId: "card-header-close-button",
         variant: "transparent",
-        intent: "secondary",
+        color: "secondary",
         onClick: onClose,
         icon: jsx(Icon$1, {
           name: "XIcon",
@@ -1375,7 +1380,7 @@ const CardHeader = ({
     })
   }));
 };
-const BottomBorderedDensityContainer = tw(DensityContainer)`
+const BottomBorderedDensityContainer = twx(DensityContainer)`
   tu-card__header-density-container
 `;
 const Container$7 = tw.div`
@@ -1665,8 +1670,8 @@ const Checkbox = React.forwardRef((_a, ref) => {
     })), children]
   }));
 });
-const StyledCheckIcon = tw(CheckIcon)`tu-checkbox--icon`;
-const StyledIndeterminateIcon = tw(IndeterminateIcon)`tu-checkbox--icon`;
+const StyledCheckIcon = twx(CheckIcon)`tu-checkbox--icon`;
+const StyledIndeterminateIcon = twx(IndeterminateIcon)`tu-checkbox--icon`;
 const CheckboxContainer = tw.label`tu-checkbox--container group`;
 const HiddenInput$1 = tw.input`tu-checkbox--input`;
 const CheckboxWrapper = tw.span`
@@ -1735,7 +1740,7 @@ const Collapse = ({
           }),
           size: "medium",
           variant: "transparent",
-          intent: "secondary"
+          color: "secondary"
         })]
       })
     })), jsx(Collapsible, Object.assign({
@@ -1746,7 +1751,7 @@ const Collapse = ({
     }))]
   }));
 };
-const Rotate = tw(Icon$1)`
+const Rotate = twx(Icon$1)`
   ${p => p.$expanded ? tws`tu-icon--animated-rotate-expanded` : null}
   tu-icon--animated-rotate
 `;
@@ -1768,25 +1773,11 @@ const Collapsible = ({
   const [ref, {
     height
   }] = useMeasure();
-  const props = useSpring({
-    config: {
-      tension: expanded ? 2000 : 1500,
-      friction: 100,
-      precision: 0.01
-    },
-    from: {
-      height: 0
-    },
-    to: expanded ? {
-      // We add 8 pixels to the bottom to prevent overflow issues.
-      height: height + 8
-    } : {
-      height: 0
-    }
-  });
   return jsx(AnimatedCollapsible, Object.assign({
     id: id,
-    style: props
+    style: {
+      height: expanded ? height : "0"
+    }
   }, {
     children: jsx(StyledCollapsible, Object.assign({
       ref: ref
@@ -1796,7 +1787,7 @@ const Collapsible = ({
   }));
 };
 
-const AnimatedCollapsible = tw(animated.div)`
+const AnimatedCollapsible = tw.div`
   tu-collapsible--animated
 `;
 const StyledCollapsible = tw.div`
@@ -2101,7 +2092,7 @@ const PopoverList = ({
 const List = tw.ul`
   tu-popover-list
 `;
-const StyledCardBody = tw(CardBody)`
+const StyledCardBody = twx(CardBody)`
   tu-popover-list-body
 `;
 
@@ -2161,7 +2152,7 @@ const DateInput = forwardRef((_a, ref) => {
       }),
       actions: selectedDay && jsx(RemoveValueContainer, {
         children: jsx(Button, Object.assign({
-          intent: "tertiary",
+          color: "tertiary",
           onClick: e => {
             e.preventDefault();
             setSelectedDay(undefined);
@@ -2249,7 +2240,7 @@ const PopoverListItem = ({
     })) : content
   }));
 };
-const StyledText$2 = tw(Text$1)`
+const StyledText$2 = twx(Text$1)`
   tu-popover-list-item__text
   ${p => p.$selected && tws`tu-popover-list-item__text--selected`}
 `;
@@ -2296,7 +2287,7 @@ const Container$6 = tw.div`
   tu-popover-title-container
   ${p => p.$divider && `tu-popover-title-container--divider`}
 `;
-const StyledText$1 = tw(Text$1)`
+const StyledText$1 = twx(Text$1)`
 tu-popover-title-text
 `;
 
@@ -2365,7 +2356,7 @@ const Tooltip = ({
 const Flex$1 = tw.div`
   inline-flex
 `;
-const Container$5 = tw(AnimatedPopover)`
+const Container$5 = twx(AnimatedPopover)`
   tu-tooltip__container
 `;
 const Content = tw.div`
@@ -2537,7 +2528,7 @@ const DayPickerPopover = ({
   className,
   selectedDay,
   onDaySelect,
-  intent = "secondary",
+  color = "secondary",
   placement = "bottom",
   size = "small",
   buttonContent,
@@ -2558,7 +2549,7 @@ const DayPickerPopover = ({
   });
   return jsxs(Fragment$1, {
     children: [jsx(Button, Object.assign({
-      intent: intent,
+      color: color,
       size: size,
       className: className,
       prefix: jsx(Icon$1, {
@@ -2690,6 +2681,9 @@ const Container$4 = tw.div`
     case colors.PRIMARY:
       return tws`tu-indicator--primary`;
 
+    case colors.SECONDARY:
+      return tws`tu-indicator--secondary`;
+
     case colors.ACCENT:
       return tws`tu-indicator--accent`;
 
@@ -2946,44 +2940,31 @@ const ModalBackdrop = ({
   isVisible,
   onClick
 }) => {
-  const transitions = useTransition(isVisible, {
-    from: {
-      opacity: 0
-    },
-    enter: {
-      opacity: 1
-    },
-    leave: {
-      opacity: 0
-    },
-    config: {
-      tension: 300,
-      friction: 30,
-      precision: 0.1
-    }
-  });
   const ref = React.useRef(null);
-  return jsx(React.Fragment, {
-    children: transitions((props, item) => item && jsx(Backdrop, Object.assign({
-      ref: ref,
-      onMouseDown: e => {
-        var _a, _b; // only react on click on backdrop - accessing first child to get around styled element element
+  return jsx(Backdrop, Object.assign({
+    ref: ref,
+    "$isVisible": isVisible,
+    onMouseDown: e => {
+      var _a, _b; // only react on click on backdrop - accessing first child to get around styled element element
 
 
-        if (ref.current !== null) {
-          if ((e === null || e === void 0 ? void 0 : e.target) === ((_b = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[0])) {
-            onClick();
-          }
+      if (ref.current !== null) {
+        if ((e === null || e === void 0 ? void 0 : e.target) === ((_b = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[0])) {
+          onClick();
         }
-      },
-      style: props
-    }, {
-      children: children
-    })))
-  });
+      }
+    }
+  }, {
+    children: children
+  }));
 };
-const Backdrop = tw(animated.div)`
+const Backdrop = tw.div`
   tu-modal-backdrop
+  ${({
+  $isVisible
+}) => {
+  return $isVisible && tws`tu-modal-backdrop--show`;
+}}
 `;
 
 /**
@@ -3002,32 +2983,12 @@ const Modal = React.forwardRef(({
     return;
   }
 }, ref) => {
-  const transitions = useTransition(isOpen, {
-    from: {
-      opacity: 0,
-      transform: "scale(0.9)"
-    },
-    enter: {
-      opacity: 1,
-      transform: "scale(1)"
-    },
-    leave: {
-      opacity: 0,
-      transform: "scale(0.9)"
-    },
-    config: {
-      tension: 300,
-      friction: 30,
-      precision: 0.1
-    }
-  });
   return jsx(ModalBackdrop, Object.assign({
     isVisible: isOpen,
     onClick: onDismissClick
   }, {
-    children: transitions((props, item) => item && jsx(AnimatedDiv, Object.assign({
-      ref: ref,
-      style: props
+    children: isOpen && jsx(StyledDiv, Object.assign({
+      ref: ref
     }, {
       children: jsx(StyledCard, Object.assign({
         dataTestId: dataTestId,
@@ -3036,7 +2997,7 @@ const Modal = React.forwardRef(({
       }, {
         children: children
       }))
-    })))
+    }))
   }));
 });
 
@@ -3054,14 +3015,13 @@ const getCardMaxWidth = () => ({
   return widths[maxWidth];
 };
 
-const StyledCard = tw(Card)`
+const StyledCard = twx(Card)`
   tu-modal__card
   ${getCardMaxWidth()}
 `;
 const StyledDiv = tw.div`
   tu-modal__container
 `;
-const AnimatedDiv = animated(StyledDiv);
 
 /**
  * The useModal component should be used to inform the user of important information.
@@ -3275,6 +3235,7 @@ const getColorModifierClass = () => ({
 }) => {
   const colorClasses = {
     primary: tws`tu-tag--primary`,
+    secondary: tws`tu-tag--secondary`,
     accent: tws`tu-tag--accent`,
     success: tws`tu-tag--success`,
     danger: tws`tu-tag--danger`,
@@ -3292,7 +3253,7 @@ const getColorModifierClass = () => ({
   return colorClasses[$color];
 };
 
-const StyledText = tw.text`
+const StyledText = tw.span`
   tu-tag
   ${getSizeModifierClass()}
   ${getColorModifierClass()}
@@ -3347,40 +3308,29 @@ const StyledFlex = tw.div`
   gap-2
 `;
 
-function useInRouterContext() {
-  return useContext(UNSAFE_LocationContext) !== null;
-} // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-
-function invariant(cond, message) {
-  if (!cond) {
-    throw new Error(message);
-  }
-}
-
-function useBlocker(blocker, when = true) {
-  invariant(useInRouterContext(), `useBlocker() may be used only in the context of a <Router> component.`);
+function useConfirmExit(confirmExit, when = true) {
   const {
     navigator
   } = useContext(UNSAFE_NavigationContext);
   useEffect(() => {
     if (!when) {
       return;
-    } // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    }
 
+    const push = navigator.push;
 
-    const unblock = navigator.block(tx => {
-      const autoUnblockingTx = Object.assign(Object.assign({}, tx), {
-        retry() {
-          unblock();
-          tx.retry();
-        }
+    navigator.push = (...args) => {
+      const result = confirmExit();
 
-      });
-      blocker(autoUnblockingTx);
-    });
-    return unblock;
-  }, [navigator, blocker, when]);
+      if (result !== false) {
+        push(...args);
+      }
+    };
+
+    return () => {
+      navigator.push = push;
+    };
+  }, [navigator, confirmExit, when]);
 }
 /**
  * The usePrompt hook.
@@ -3391,14 +3341,24 @@ function useBlocker(blocker, when = true) {
  */
 
 
-function usePrompt(message, when = true) {
-  const blocker = useCallback(tx => {
-    if (window.confirm(message)) {
-      tx.retry();
+const usePrompt = (message, when = true) => {
+  useEffect(() => {
+    if (when) {
+      window.onbeforeunload = function () {
+        return message;
+      };
     }
+
+    return () => {
+      window.onbeforeunload = null;
+    };
+  }, [message, when]);
+  const confirmExit = useCallback(() => {
+    const confirm = window.confirm(message);
+    return confirm;
   }, [message]);
-  useBlocker(blocker, when);
-}
+  useConfirmExit(confirmExit, when);
+};
 /**
  * The Prompt function.
  *
@@ -3590,7 +3550,7 @@ const Container$1 = tw.label`
   $isDisabled
 }) => $isDisabled ? tws`tu-select--disabled` : null}
 `;
-const InformativeText = tw(Text$1)`
+const InformativeText = twx(Text$1)`
   tu-informative-text
   ${p => p.$hasError ? `tu-informative-text--error` : null}
 `;
@@ -3599,6 +3559,7 @@ const InformativeText = tw(Text$1)`
  * @param {MultiValue<Option> | SingleValue<Option>} arg option to check type
  * @returns {arg is MultiValue<Option> } is Multivalue
  */
+
 function isMultiValue(arg) {
   return Array.isArray(arg);
 }
@@ -3646,6 +3607,9 @@ const getOrderedOptions = (options, value) => {
 
   return options || [];
 };
+const SelectPrefix = tw.div`
+  tu-select__prefix 
+`;
 
 /**
  * A single select menu item is a basic wrapper around Menu item designed to be used as a single value render in Select list
@@ -4128,48 +4092,55 @@ const useCustomStyles = (refContainer, refPrefix, maxSelectedDisplayCount, style
 };
 
 /**
- * The CreatableSelect component.
+ * A hook used by selects to share the common code
  *
- * @param {CreateableSelectProps} props - The props for the CreatableSelect component
- * @returns {JSX.Element} CreatableSelect component
+ * @param {SelectProps} props - The props for the Select component
+ * @returns {IUseSelect} Select component
  */
 
-const CreatableSelect = _a => {
+const useSelect = _a => {
+  var _b;
+
   var {
-    dataTestId = "createableSelect",
     id,
+    className,
+    dataTestId = "select",
+    prefix,
+    async,
+    dropdownIcon,
+    maxMenuHeight = 200,
     label,
-    hideLabel,
-    description,
-    error,
-    info,
-    isInvalid,
-    maxMenuHeight = 308,
-    components,
+    hasError,
     disabled,
-    async,
+    isMulti,
+    components,
     value,
+    options,
     onChange,
-    isMulti,
-    classNamePrefix,
     isLoading,
-    options,
+    classNamePrefix = "",
     onMenuOpen,
-    styles
+    onMenuClose,
+    maxSelectedDisplayCount = undefined,
+    isClearable = false,
+    isSearchable = true,
+    onMenuScrollToBottom,
+    styles,
+    filterOption,
+    onInputChange
   } = _a,
-      props = __rest(_a, ["dataTestId", "id", "label", "hideLabel", "description", "error", "info", "isInvalid", "maxMenuHeight", "components", "disabled", "async", "value", "onChange", "isMulti", "classNamePrefix", "isLoading", "options", "onMenuOpen", "styles"]);
+      props = __rest(_a, ["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"]);
 
-  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(refContainer, refPrefix, undefined, styles);
+  } = useCustomStyles(refContainer, refPrefix, maxSelectedDisplayCount, styles);
+  const [menuIsOpen, setMenuIsOpen] = React__default.useState((_b = props.menuIsOpen) !== null && _b !== void 0 ? _b : false);
+  const [menuIsClosing, setMenuIsClosing] = React__default.useState(true);
+  const refMenuIsEnabled = React__default.useRef(true);
+  const customComponents = useCustomComponents(components, disabled || false, menuIsClosing, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon);
   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();
@@ -4185,12 +4156,78 @@ const CreatableSelect = _a => {
   const closeMenuHandler = () => {
     if (refMenuIsEnabled.current) {
       setMenuIsClosing(true);
-      setTimeout(() => {
-        setMenuIsOpen(false);
-      }, 250);
     }
+
+    onMenuClose && onMenuClose();
+  };
+
+  React__default.useEffect(() => {
+    const timeout = menuIsClosing && setTimeout(() => {
+      setMenuIsOpen(false);
+    }, 250);
+    return () => {
+      timeout && clearTimeout(timeout);
+    };
+  }, [menuIsClosing]);
+  const orderedOptions = React__default.useMemo(() => {
+    return disabled ? getOrderedOptions(options, value).map(option => {
+      return Object.assign(Object.assign({}, option), {
+        disabled: true
+      });
+    }) : getOrderedOptions(options, value);
+  }, [options, value, disabled]);
+  return {
+    refContainer,
+    refPrefix,
+    customStyles,
+    menuIsOpen,
+    customComponents,
+    menuPlacement,
+    openMenuHandler,
+    closeMenuHandler,
+    orderedOptions
   };
+};
 
+/**
+ * The CreatableSelect component.
+ *
+ * @param {CreateableSelectProps} props - The props for the CreatableSelect component
+ * @returns {JSX.Element} CreatableSelect component
+ */
+
+const CreatableSelect = props => {
+  const {
+    id,
+    dataTestId = "select",
+    async,
+    maxMenuHeight = 200,
+    label,
+    error,
+    disabled,
+    isMulti,
+    value,
+    hideLabel,
+    description,
+    info,
+    options,
+    onChange,
+    isLoading,
+    classNamePrefix = "",
+    filterOption,
+    prefix
+  } = props;
+  const hasError = !!error;
+  const {
+    refPrefix,
+    customStyles,
+    menuIsOpen,
+    customComponents,
+    menuPlacement,
+    openMenuHandler,
+    closeMenuHandler,
+    orderedOptions
+  } = useSelect(props);
   const selectProps = {
     value,
     menuPlacement,
@@ -4226,32 +4263,35 @@ const CreatableSelect = _a => {
     dataTestId: dataTestId,
     isDisabled: disabled
   }, {
-    children: async ? jsx(ReactAsyncCreatableSelect, Object.assign({
-      "aria-label": label,
-      maxMenuHeight: maxMenuHeight,
-      "data-testid": dataTestId,
-      components: customComponents
-    }, 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();
-      }
-    }))
+    children: jsxs(Fragment, {
+      children: [prefix !== undefined && jsx(SelectPrefix, Object.assign({
+        "data-testid": `${dataTestId}-prefix`,
+        ref: refPrefix
+      }, {
+        children: prefix
+      })), async ? jsx(ReactAsyncCreatableSelect, Object.assign({
+        "aria-label": label,
+        maxMenuHeight: maxMenuHeight,
+        "data-testid": dataTestId,
+        components: customComponents
+      }, props, {
+        onMenuOpen: () => {
+          !disabled && openMenuHandler();
+        },
+        onMenuClose: () => {
+          closeMenuHandler();
+        }
+      })) : jsx(ReactCreatableSelect, Object.assign({}, selectProps, {
+        options: filterOption ? orderedOptions : options,
+        isMulti: isMulti,
+        onMenuOpen: () => {
+          !disabled && openMenuHandler();
+        },
+        onMenuClose: () => {
+          closeMenuHandler();
+        }
+      }))]
+    })
   }));
 };
 
@@ -4262,72 +4302,40 @@ const CreatableSelect = _a => {
  * @returns {JSX.Element} Select component
  */
 
-const Select = _a => {
-  var _b;
-
-  var {
+const Select = props => {
+  const {
     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
-  } = _a,
-      props = __rest(_a, ["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"]);
-
-  const refContainer = React.useRef(null);
-  const refPrefix = React.useRef(null);
+    onInputChange,
+    isSearchable,
+    isClearable
+  } = props;
   const {
-    customStyles
-  } = useCustomStyles(refContainer, refPrefix, maxSelectedDisplayCount, styles);
-  const [menuIsOpen, setMenuIsOpen] = React.useState((_b = props.menuIsOpen) !== null && _b !== void 0 ? _b : 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();
-  };
-
+    refContainer,
+    refPrefix,
+    customStyles,
+    menuIsOpen,
+    customComponents,
+    menuPlacement,
+    openMenuHandler,
+    closeMenuHandler,
+    orderedOptions
+  } = useSelect(props);
   const selectProps = {
     value,
     menuPlacement,
@@ -4339,7 +4347,7 @@ const Select = _a => {
     styles: customStyles,
     tabSelectsValue: false,
     blurInputOnSelect: !isMulti,
-    menuPortalTarget: document.body,
+    menuPortalTarget: props.menuPortalTarget || document.body,
     isSearchable: disabled ? false : isSearchable,
     menuShouldBlockScroll: true,
     menuShouldScrollIntoView: true,
@@ -4355,13 +4363,6 @@ const Select = _a => {
     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,
@@ -4374,29 +4375,18 @@ const Select = _a => {
       ref: refPrefix
     }, {
       children: prefix
-    })), async ? jsx(ReactAsyncSelect, Object.assign({}, selectProps, async, {
-      onMenuOpen: () => {
-        openMenuHandler();
-      },
-      onMenuClose: () => {
-        closeMenuHandler();
-      }
-    })) : jsx(ReactSelect, Object.assign({}, selectProps, {
+    })), async ? jsx(ReactAsyncSelect, Object.assign({}, props, selectProps, async, {
+      onMenuOpen: openMenuHandler,
+      onMenuClose: closeMenuHandler
+    })) : jsx(ReactSelect, Object.assign({}, props, selectProps, {
       options: filterOption ? orderedOptions : options,
       hideSelectedOptions: false,
       isMulti: isMulti,
-      onMenuOpen: () => {
-        openMenuHandler();
-      },
-      onMenuClose: () => {
-        closeMenuHandler();
-      }
+      onMenuOpen: openMenuHandler,
+      onMenuClose: closeMenuHandler
     }))]
   }));
 };
-const SelectPrefix = tw.div`
-  tu-select__prefix 
-`;
 const SelectContainer = tw.div`
   tu-select
   ${({
@@ -5373,4 +5363,4 @@ const Layout = tw.div`
   tu-layout-TwoColumnLayout
 `;
 
-export { ActionButton, 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$3 as Label, LegendItem, 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$1 as Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, ValueBar, activityColors, colors, criticalityColors, docs, generalColors, getOrderedOptions, getValueBarColorByValue, intentColors, isMultiValue, rentalStatusColors, useContainerProps, useCustomComponents, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };
+export { ActionButton, 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$3 as Label, LegendItem, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MultiSelectMenuItem, NumberField, NumberInput, PageHeading, PopoverLifecycle, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Select, SelectPrefix, SingleSelectMenuItem, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, ValueBar, activityColors, colors, criticalityColors, docs, generalColors, getOrderedOptions, getValueBarColorByValue, intentColors, isMultiValue, rentalStatusColors, useContainerProps, useCustomComponents, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };