@trackunit/react-components 0.0.139 → 0.0.143

package/components/FormGroup/FormGroup.d.ts

@@ -12,7 +12,7 @@ export interface FormGroupProps extends CommonProps {
     /**
      * A string to display under the input element to help the user understand the input.
      */
-    helpText?: string;
+    helpText?: string | null;
     /**
      * An addon element to render to the right under the input element.
      * Used for displaying maxLength etc.

package/components/Prompt/Prompt.d.ts

@@ -9,7 +9,7 @@ interface PromptProps {
  * @param {boolean} when -
  * @returns {void} void
  */
-export declare function usePrompt(message: string, when?: boolean): void;
+export declare const usePrompt: (message: string, when?: boolean) => void;
 /**
  * The Prompt function.
  *

package/components/Select/CreatableSelect.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { GroupBase } from "react-select";
-import { SelectProps } from "./Select";
+import { SelectProps } from "./useSelect";
 interface CreateableSelectProps<Option, IsAsync extends boolean = false, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> extends SelectProps<Option, IsAsync, IsMulti, Group> {
     /**
      * To hide the label.
@@ -34,5 +34,5 @@ export declare type SelectSize = "small" | "default";
  * @param {CreateableSelectProps} props - The props for the CreatableSelect component
  * @returns {JSX.Element} CreatableSelect component
  */
-export declare const CreatableSelect: <Option, IsAsync extends boolean = false, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ dataTestId, id, label, hideLabel, description, error, info, isInvalid, maxMenuHeight, components, disabled, async, value, onChange, isMulti, classNamePrefix, isLoading, options, onMenuOpen, styles, ...props }: CreateableSelectProps<Option, IsAsync, IsMulti, Group>) => JSX.Element;
+export declare const CreatableSelect: <Option, IsAsync extends boolean = false, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: CreateableSelectProps<Option, IsAsync, IsMulti, Group>) => JSX.Element;
 export {};

package/components/Select/Select.d.ts

@@ -1,130 +1,10 @@
 /// <reference types="react" />
-import { GroupBase, OptionsOrGroups, Props } from "react-select";
-import { CommonProps } from "../../common";
+import { GroupBase } from "react-select";
+import { SelectProps } from "./useSelect";
 export interface SelectOption {
     label: string;
     value: string;
 }
-export interface AsyncSelect<Option, Group extends GroupBase<Option> = GroupBase<Option>> {
-    loadOptions: (input: string) => void | Promise<OptionsOrGroups<Option, Group>>;
-    defaultOptions: OptionsOrGroups<Option, Group> | undefined;
-    cacheOptions: boolean;
-}
-export interface SelectProps<Option, IsAsync extends boolean, IsMulti extends boolean, GroupType extends GroupBase<Option>> extends CommonProps, Props<Option, IsMulti, GroupType> {
-    /**
-     * An React element to render before the text in the select.
-     * This is typically used to render an icon.
-     *
-     *
-     * @memberof SelectProps
-     */
-    prefix?: JSX.Element;
-    /**
-     * An string to render in field when there is no value selected.
-     * Can be used as a description, example or a hint.
-     *
-     *
-     * @memberof SelectProps
-     */
-    placeholder?: string;
-    /**
-     * An boolean flag to disable field
-     *
-     *
-     * @memberof SelectProps
-     */
-    disabled?: boolean;
-    /**
-     * An field id
-     *
-     *
-     * @memberof SelectProps
-     */
-    id?: string;
-    /**
-     * An boolean flag to set select into async mode
-     * This is typically used when data is fetched after render
-     *
-     *
-     * @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?: JSX.Element;
-    /**
-     * A label to be used as a aria-label
-     * This is typically used for accessibility
-     *
-     *
-     * @memberof SelectProps
-     */
-    label?: string;
-    /**
-     * A number of pixels to limit maximal length of the select menu list
-     *
-     *
-     * @memberof SelectProps
-     */
-    maxMenuHeight?: number;
-    /**
-     * A boolean prop to set select into invalid mode
-     * typically used when selected value is not compliant with field requirement
-     * ex if it breaks validation rules
-     *
-     *
-     * @memberof SelectProps
-     */
-    hasError?: boolean;
-    /**
-     * A boolean flag to display loading indicator
-     *
-     *
-     * @memberof SelectProps
-     */
-    isLoading?: boolean;
-    /**
-     * A number value to limit amount of visible tags for selected options
-     *
-     *
-     * @memberof SelectProps
-     */
-    maxSelectedDisplayCount?: number;
-    /**
-     * A custom handler for menu open event
-     * use if you want to trigger custom logic or fetch data
-     *
-     *
-     * @memberof SelectProps
-     */
-    onMenuOpen?: () => void;
-    /**
-     * A flag to allow user to clear value once selected
-     * default value is true
-     *
-     *
-     * @memberof SelectProps
-     */
-    isClearable?: boolean;
-    /**
-     * A flag to allow user to filter option list by key from the text input
-     *
-     *
-     * @memberof SelectProps
-     */
-    isSearchable?: boolean;
-    /**
-     * A flag to set select into async mode
-     *
-     * @memberof SelectProps
-     */
-    isAsync?: IsAsync;
-}
 /**
  * Selects are input components used to choose a value from a set.
  *
@@ -132,6 +12,6 @@ export interface SelectProps<Option, IsAsync extends boolean, IsMulti extends bo
  * @returns {JSX.Element} Select component
  */
 export declare const Select: {
-    <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, ...props }: SelectProps<Option, IsAsync, IsMulti, Group>): JSX.Element;
+    <Option, IsAsync extends boolean = false, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: SelectProps<Option, IsAsync, IsMulti, Group>): JSX.Element;
     displayName: string;
 };

package/components/Select/shared.d.ts

@@ -12,3 +12,4 @@ export declare function isMultiValue<Option>(arg: MultiValue<Option> | SingleVal
  * @returns {OptionsOrGroups<Option, Group>} An array of ordered options with selected on top
  */
 export declare const getOrderedOptions: <Option, Group extends GroupBase<Option>>(options: OptionsOrGroups<Option, Group> | undefined, value: PropsValue<Option> | undefined) => OptionsOrGroups<Option, Group>;
+export declare const SelectPrefix: import("tailwind-styled-components/dist/tailwind").TailwindComponent<"div", {}>;

package/components/Select/useSelect.d.ts

@@ -0,0 +1,143 @@
+import React from "react";
+import { GroupBase, MenuPlacement, OptionsOrGroups, Props, StylesConfig } from "react-select";
+import { SelectComponents } from "react-select/dist/declarations/src/components";
+import { CommonProps } from "../../common/CommonProps";
+export interface AsyncSelect<Option, Group extends GroupBase<Option> = GroupBase<Option>> {
+    loadOptions: (input: string) => void | Promise<OptionsOrGroups<Option, Group>>;
+    defaultOptions: OptionsOrGroups<Option, Group> | undefined;
+    cacheOptions: boolean;
+}
+export interface SelectProps<Option, IsAsync extends boolean, IsMulti extends boolean, GroupType extends GroupBase<Option>> extends CommonProps, Props<Option, IsMulti, GroupType> {
+    /**
+     * An React element to render before the text in the select.
+     * This is typically used to render an icon.
+     *
+     *
+     * @memberof SelectProps
+     */
+    prefix?: JSX.Element;
+    /**
+     * An string to render in field when there is no value selected.
+     * Can be used as a description, example or a hint.
+     *
+     *
+     * @memberof SelectProps
+     */
+    placeholder?: string;
+    /**
+     * An boolean flag to disable field
+     *
+     *
+     * @memberof SelectProps
+     */
+    disabled?: boolean;
+    /**
+     * An field id
+     *
+     *
+     * @memberof SelectProps
+     */
+    id?: string;
+    /**
+     * An boolean flag to set select into async mode
+     * This is typically used when data is fetched after render
+     *
+     *
+     * @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?: JSX.Element;
+    /**
+     * A label to be used as a aria-label
+     * This is typically used for accessibility
+     *
+     *
+     * @memberof SelectProps
+     */
+    label?: string;
+    /**
+     * A number of pixels to limit maximal length of the select menu list
+     *
+     *
+     * @memberof SelectProps
+     */
+    maxMenuHeight?: number;
+    /**
+     * A boolean prop to set select into invalid mode
+     * typically used when selected value is not compliant with field requirement
+     * ex if it breaks validation rules
+     *
+     *
+     * @memberof SelectProps
+     */
+    hasError?: boolean;
+    /**
+     * A boolean flag to display loading indicator
+     *
+     *
+     * @memberof SelectProps
+     */
+    isLoading?: boolean;
+    /**
+     * A number value to limit amount of visible tags for selected options
+     *
+     *
+     * @memberof SelectProps
+     */
+    maxSelectedDisplayCount?: number;
+    /**
+     * A custom handler for menu open event
+     * use if you want to trigger custom logic or fetch data
+     *
+     *
+     * @memberof SelectProps
+     */
+    onMenuOpen?: () => void;
+    /**
+     * A flag to allow user to clear value once selected
+     * default value is true
+     *
+     *
+     * @memberof SelectProps
+     */
+    isClearable?: boolean;
+    /**
+     * A flag to allow user to filter option list by key from the text input
+     *
+     *
+     * @memberof SelectProps
+     */
+    isSearchable?: boolean;
+    /**
+     * A flag to set select into async mode
+     *
+     * @memberof SelectProps
+     */
+    isAsync?: IsAsync;
+}
+interface IUseSelect<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> {
+    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>;
+    closeMenuHandler: () => void;
+    orderedOptions: OptionsOrGroups<Option, Group>;
+}
+/**
+ * A hook used by selects to share the common code
+ *
+ * @param {SelectProps} props - The props for the Select component
+ * @returns {IUseSelect} 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, ...props }: SelectProps<Option, IsAsync, IsMulti, Group>) => IUseSelect<Option, IsMulti, Group>;
+export {};

package/components/ValueBar/ValueBar.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { LevelColors } from "./ValueBarTypes";
 import { CommonProps } from "../../common";
+import { LevelColors } from "./ValueBarTypes";
 export interface ValueBarProps extends CommonProps {
     /**
      * Value to display.
@@ -41,4 +41,4 @@ export interface ValueBarProps extends CommonProps {
  * @param {ValueBarProps} props - The props for the ValueBar component
  * @returns {JSX.Element} ValueBar component
  */
-export declare const ValueBar: ({ value, min, max, unit, size, levelColors, valueColor, showValue, className, dataTestId }: ValueBarProps) => JSX.Element;
+export declare const ValueBar: ({ value, min, max, unit, size, levelColors, valueColor, showValue, className, dataTestId, }: ValueBarProps) => JSX.Element;

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';
@@ -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`
@@ -551,7 +551,7 @@ const ActionButton = ({
 const ActionContainer = tw.div`
   tu-action-container
 `;
-const StyledIconButton = tw(IconButton)`
+const StyledIconButton = twx(IconButton)`
   tu-action-button
 `;
 
@@ -580,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
@@ -875,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`
@@ -1233,7 +1233,7 @@ const getOverflow = () => ({
   return overflows[$overflow];
 };
 
-const StyledDensityContainer = tw(DensityContainer)`
+const StyledDensityContainer = twx(DensityContainer)`
   ${getOverflow()}
   tu-card__body
 `;
@@ -1263,7 +1263,7 @@ const CardFooter = ({
     })
   }));
 };
-const TopBorderedDensityContainer = tw(DensityContainer)`
+const TopBorderedDensityContainer = twx(DensityContainer)`
   tu-card__footer-density-container
 `;
 const Body = tw.div`
@@ -1380,7 +1380,7 @@ const CardHeader = ({
     })
   }));
 };
-const BottomBorderedDensityContainer = tw(DensityContainer)`
+const BottomBorderedDensityContainer = twx(DensityContainer)`
   tu-card__header-density-container
 `;
 const Container$7 = tw.div`
@@ -1670,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`
@@ -1751,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
 `;
@@ -1773,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
@@ -1801,7 +1787,7 @@ const Collapsible = ({
   }));
 };
 
-const AnimatedCollapsible = tw(animated.div)`
+const AnimatedCollapsible = tw.div`
   tu-collapsible--animated
 `;
 const StyledCollapsible = tw.div`
@@ -2106,7 +2092,7 @@ const PopoverList = ({
 const List = tw.ul`
   tu-popover-list
 `;
-const StyledCardBody = tw(CardBody)`
+const StyledCardBody = twx(CardBody)`
   tu-popover-list-body
 `;
 
@@ -2254,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`}
 `;
@@ -2301,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
 `;
 
@@ -2370,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`
@@ -2954,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`;
+}}
 `;
 
 /**
@@ -3010,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,
@@ -3044,7 +2997,7 @@ const Modal = React.forwardRef(({
       }, {
         children: children
       }))
-    })))
+    }))
   }));
 });
 
@@ -3062,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.
@@ -3301,7 +3253,7 @@ const getColorModifierClass = () => ({
   return colorClasses[$color];
 };
 
-const StyledText = tw.text`
+const StyledText = tw.span`
   tu-tag
   ${getSizeModifierClass()}
   ${getColorModifierClass()}
@@ -3356,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.
@@ -3400,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.
  *
@@ -3599,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}
 `;
@@ -3608,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);
 }
@@ -3655,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
@@ -4008,7 +3963,7 @@ const useCustomComponents = (componentsProps, disabled, menuIsClosing, refMenuIs
       },
       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`
+          className: menuIsClosing ? tws`tu-select__menu-list animate-fade-out-fast` : tws`tu-select__menu-list animate-fade-in-fast`
         }));
       },
       Option: props => {
@@ -4076,13 +4031,13 @@ const useCustomStyles = (refContainer, refPrefix, maxSelectedDisplayCount, style
       indicatorSeparator: () => ({
         width: "0px"
       }),
-      menu: () => {
-        return {
+      menu: base => {
+        return Object.assign(Object.assign({}, base), {
           width: "100%",
           marginTop: "4px",
           marginBottom: "18px",
           transition: "all 1s ease-in-out"
-        };
+        });
       },
       input: base => Object.assign(Object.assign({}, base), {
         marginLeft: "0px"
@@ -4137,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();
@@ -4194,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,
@@ -4235,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();
+        }
+      }))]
+    })
   }));
 };
 
@@ -4271,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,
@@ -4348,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,
@@ -4364,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,
@@ -4383,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
   ${({
@@ -5382,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 };

package/package.json

@@ -1,25 +1,24 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.139",
+  "version": "0.0.143",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
-    "@trackunit/css-core": "0.0.50",
-    "@trackunit/tailwind-styled-components": "0.0.43",
-    "react": "17.0.1",
-    "@trackunit/ui-design-tokens": "0.0.42",
+    "@trackunit/css-core": "0.0.51",
+    "@trackunit/tailwind-styled-components": "0.0.44",
+    "react": "17.0.2",
+    "@trackunit/ui-design-tokens": "0.0.43",
     "echarts-for-react": "^3.0.2",
     "uuid": "^8.3.2",
-    "@react-spring/web": "^9.4.5",
-    "react-use": "^17.3.2",
-    "react-day-picker": "^8.0.3",
-    "date-fns": "^2.28.0",
-    "@trackunit/ui-icons": "0.0.45",
-    "react-useportal": "^1.0.16",
+    "react-use": "^17.4.0",
+    "react-day-picker": "^8.3.0",
+    "date-fns": "^2.29.3",
+    "@trackunit/ui-icons": "0.0.46",
+    "react-useportal": "1.0.16",
     "react-helmet": "^6.1.0",
-    "@popperjs/core": "^2.11.4",
-    "history": "^5.3.0",
-    "react-router-dom": "^6.2.2",
+    "@react-spring/web": "9.5.2",
+    "@popperjs/core": "^2.11.6",
+    "react-router-dom": "6.4.1",
     "react-select": "^5.4.0",
     "jest-canvas-mock": "^2.4.0"
   },