@trackunit/react-components 0.0.123 → 0.0.125

package/common/CommonProps.d.ts

@@ -9,3 +9,4 @@ export interface CommonProps {
     dataTestId?: string;
 }
 export declare type Density = "none" | "compact" | "comfortable" | "spacious" | "auto";
+export declare type Size = "small" | "medium" | "large";

package/components/Badge/Badge.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { CommonProps } from "../../common/CommonProps";
 import { Colors } from "../../constants/colors";
-export declare type BadgeSize = "default" | "large";
+export declare type BadgeSize = "medium" | "large";
 interface BaseBadgeProps extends CommonProps {
     /**
      * The color of the badge.

package/components/BaseInput/BaseInput.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { CommonProps } from "../../common";
 declare type FilteredInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "prefix" | "suffix">;
-declare type FieldSize = "small" | "default";
+declare type FieldSize = "small" | "medium";
 export interface BaseInputProps extends FilteredInputProps, CommonProps {
     /**
      * An React element to render before the text in the input.

package/components/DayPicker/DayPickerPopover.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { Matcher } from "react-day-picker";
-import { ButtonIntent, ButtonSize } from "../buttons";
+import { Size } from "../../common";
+import { ButtonIntent } from "../buttons";
 import { PopoverPlacement } from "../Popover";
 export interface DayPickerPopoverProps {
     disabledDays?: Matcher | Matcher[] | undefined;
@@ -8,7 +9,7 @@ export interface DayPickerPopoverProps {
     onDaySelect: (day: Date) => void;
     selectedDay?: Date;
     intent?: ButtonIntent;
-    size?: ButtonSize;
+    size?: Size;
     placement?: PopoverPlacement;
     buttonContent: JSX.Element;
     language: string;

package/components/Icon/Icon.d.ts

@@ -1,6 +1,6 @@
 import { HeroIconName, TrackunitIconName } from "@trackunit/ui-icons";
 import * as React from "react";
-import { CommonProps } from "../../common/CommonProps";
+import { CommonProps, Size } from "../../common/CommonProps";
 import { Colors } from "../../constants/colors";
 export interface IconProps extends CommonProps {
     /**
@@ -16,14 +16,14 @@ export interface IconProps extends CommonProps {
     color?: Colors;
     /**
      * The size of the icon.
-     * Small = 16x16px, Normal = 20x20px, Large = 24x24px.
+     * Small = 16x16px, medium = 20x20px, Large = 24x24px.
      * Default value is Large.
      * If a custom size is needed, set it in the className.
      */
-    size?: "small" | "normal" | "large";
+    size?: Size;
     /**
      * Select if the icon should be rendered as solid or outline.
-     * Default value depends on the Size prop, small == solid, normal == solid, large == outline.
+     * Default value depends on the Size prop, small == solid, medium == solid, large == outline.
      * Trackunit icons might not support both outline and Solid.
      */
     type?: "solid" | "outline";

package/components/Menu/MenuItem.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
-export interface MenuItemProps {
+import { CommonProps } from "../../common/CommonProps";
+export interface MenuItemProps extends CommonProps {
     /**
      * The icon to be rendered in the menu item.
      */

package/components/Select/CreatableSelect.d.ts

@@ -1,10 +1,38 @@
-/// <reference types="react" />
+import React from "react";
 import { GroupBase } from "react-select";
-import { ISelectProps } from "./shared";
+import { SelectProps } from "./Select";
+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.
+     */
+    hideLabel?: boolean;
+    /**
+     * Description for the select component.
+     */
+    description?: string;
+    /**
+     * Whether the component is invalid.
+     */
+    isInvalid?: boolean;
+    /**
+     * Info of the select component.
+     */
+    info?: React.ReactNode;
+    /**
+     * Error of the select component.
+     */
+    error?: React.ReactNode;
+    /**
+     * Size of the component.
+     */
+    size?: SelectSize;
+}
+export declare type SelectSize = "small" | "default";
 /**
  * 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
  */
-export declare const CreatableSelect: <Option, IsAsync extends boolean = false, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ dataTestId, size, id, label, hideLabel, description, error, info, isInvalid, maxMenuHeight, styles, components, ...props }: ISelectProps<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>>({ 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 {};

package/components/Select/FieldContainer.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-interface SelectContainerProps {
+export interface SelectContainerProps {
     children: React.ReactElement;
     label?: string;
     hideLabel?: boolean;
@@ -9,6 +9,7 @@ interface SelectContainerProps {
     error?: React.ReactNode;
     info?: React.ReactNode;
     dataTestId?: string;
+    isDisabled?: boolean;
 }
 /**
  * The SelectContainer component.
@@ -16,5 +17,4 @@ interface SelectContainerProps {
  * @param {SelectContainerProps} props - The props for the SelectContainer component
  * @returns {JSX.Element} SelectContainer component
  */
-export declare const SelectContainer: ({ children, label, hideLabel, id, hasError, error, description, info, dataTestId, }: SelectContainerProps) => JSX.Element;
-export {};
+export declare const SelectContainer: ({ children, label, hideLabel, id, hasError, error, description, info, dataTestId, isDisabled, }: SelectContainerProps) => JSX.Element;

package/components/Select/Select.d.ts

@@ -1,10 +1,137 @@
 /// <reference types="react" />
-import { GroupBase } from "react-select";
-import { ISelectProps } from "./shared";
+import { GroupBase, OptionsOrGroups, Props } from "react-select";
+import { CommonProps } from "../../common";
+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;
+}
 /**
- * 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
  */
-export declare const Select: <Option, IsAsync extends boolean = false, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ dataTestId, size, id, label, hideLabel, description, error, info, isInvalid, maxMenuHeight, styles, components, ...props }: ISelectProps<Option, IsAsync, IsMulti, Group>) => JSX.Element;
+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, }: SelectProps<Option, IsAsync, IsMulti, Group>): JSX.Element;
+    displayName: string;
+};

package/components/Select/{Select/TagWithWidth.d.ts → TagWithWidth.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { TagProps } from "../../Tag";
+import { TagProps } from "../Tag";
 declare type TagsPropsNoRef = Omit<TagProps, "ref">;
 interface TagWithWidthProps extends TagsPropsNoRef {
     onWidthKnown?: ({ width }: {

package/components/Select/index.d.ts

@@ -1,3 +1,7 @@
+import ValueType from "react-select";
 export * from "./CreatableSelect";
 export * from "./Select";
+export * from "./SelectMenuItem/SelectMenuItem";
 export * from "./shared";
+export * from "./useCustomComponents";
+export { ValueType };

package/components/Select/shared.d.ts

@@ -1,71 +1,14 @@
-import * as React from "react";
-import { GroupBase, Props, StylesConfig } from "react-select";
-import { AsyncProps } from "react-select/async";
-import { SelectComponents } from "react-select/dist/declarations/src/components";
-import { CommonProps } from "../../common/CommonProps";
-export interface SelectOption {
-    label: string;
-    value: string;
-    options?: SelectOption[];
-}
-export declare type SelectSize = "small" | "default";
-export interface ISelectProps<Option, IsAsync extends boolean, IsMulti extends boolean, GroupType extends GroupBase<Option>> extends CommonProps, Props<Option, IsMulti, GroupType> {
-    /**
-     * Label to be displayed.
-     */
-    label?: string;
-    /**
-     * To hide the label.
-     */
-    hideLabel?: boolean;
-    /**
-     * Description for the select component.
-     */
-    description?: string;
-    /**
-     * Whether the component is invalid.
-     */
-    isInvalid?: boolean;
-    /**
-     * Whether the component is disabled.
-     */
-    isDisabled?: boolean;
-    /**
-     * Info of the select component.
-     */
-    info?: React.ReactNode;
-    /**
-     * Error of the select component.
-     */
-    error?: React.ReactNode;
-    /**
-     * Size of the component.
-     */
-    size?: SelectSize;
-    /**
-     * Whether component is asynchronous or not.
-     */
-    isAsync?: IsAsync;
-}
-export declare type SelectProps<Option, IsAsync extends boolean, IsMulti extends boolean, GroupType extends GroupBase<Option>> = IsAsync extends true ? AsyncProps<Option, IsMulti, GroupType> & SelectProps<Option, IsAsync, IsMulti, GroupType> : SelectProps<Option, IsAsync, IsMulti, GroupType>;
+import { GroupBase, MultiValue, OptionsOrGroups, PropsValue, SingleValue } from "react-select";
 /**
- * The useCustomStyles hook for getting trackunit specific styling on react-select.
- *
- * @param {StylesConfig} styles -
- * @param {boolean} hasError -
- * @param {boolean} isInvalid -
- * @param {SelectSize} size -
- * @returns {{StylesConfig}} useCustomStyles hook return
+ * @param {MultiValue<Option> | SingleValue<Option>} arg option to check type
+ * @returns {arg is MultiValue<Option> } is Multivalue
  */
-export declare const useCustomStyles: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(styles: StylesConfig<Option, IsMulti, Group> | undefined, hasError: boolean, isInvalid: boolean | undefined, size: SelectSize) => {
-    customStyles: StylesConfig<Option, IsMulti, Group>;
-};
+export declare function isMultiValue<Option>(arg: MultiValue<Option> | SingleValue<Option>): arg is MultiValue<Option>;
 /**
- * The useCustomComponents hook for getting trackunit specific components on react-select.
- *
- * @param {SelectComponents} components -
- * @returns {*}} useCustomComponents hook return
+ *  @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
  */
-export declare const useCustomComponents: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(components: Partial<SelectComponents<Option, IsMulti, Group>> | undefined) => {
-    customComponents: Partial<SelectComponents<Option, IsMulti, Group>>;
-};
+export declare const getOrderedOptions: <Option, Group extends GroupBase<Option>>(options: OptionsOrGroups<Option, Group> | undefined, value: PropsValue<Option> | undefined) => OptionsOrGroups<Option, Group>;

package/components/Select/useCustomComponents.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { GroupBase } from "react-select";
+import { SelectComponents } from "react-select/dist/declarations/src/components";
+/**
+ * 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.
+ *
+ * @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
+ */
+export declare const useCustomComponents: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(componentsProps: Partial<SelectComponents<Option, IsMulti, Group>> | undefined, disabled: boolean, menuIsClosing: boolean, refMenuIsEnabled: React.MutableRefObject<boolean>, dataTestId: string, maxSelectedDisplayCount: number | undefined, dropdownIcon?: JSX.Element) => Partial<SelectComponents<Option, IsMulti, Group>>;

package/components/Select/useCustomStyles.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { GroupBase, StylesConfig } from "react-select";
+/**
+ * @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
+ */
+export declare const useCustomStyles: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(refContainer: React.RefObject<HTMLDivElement>, refPrefix: React.RefObject<HTMLDivElement>, maxSelectedDisplayCount: number | undefined, styles: StylesConfig<Option, IsMulti, Group> | undefined) => {
+    customStyles: StylesConfig<Option, IsMulti, Group>;
+};

package/components/Spinner/Spinner.d.ts

@@ -1,11 +1,10 @@
 /// <reference types="react" />
-import { CommonProps } from "../../common/CommonProps";
-export declare type SpinnerSize = "small" | "regular" | "large";
+import { CommonProps, Size } from "../../common/CommonProps";
 export interface SpinnerProps extends CommonProps {
     /**
      * Defines the size of the spinner.
      */
-    size?: SpinnerSize;
+    size?: Size;
     /**
      * When true, the spinner will be centered in the parent element using css grid.
      */

package/components/Tag/Tag.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
 import { Colors } from "../../constants/colors";
-export declare type TagSize = "default" | "small";
+export declare type TagSize = "small" | "medium";
 export interface TagProps extends CommonProps {
     /**
      * The color of the tag.

package/components/Text/Text.d.ts

@@ -1,9 +1,8 @@
 import * as React from "react";
-import { CommonProps } from "../../common/CommonProps";
+import { CommonProps, Size } from "../../common/CommonProps";
 export declare type TextType = "p" | "span" | "div";
-export declare type TextSize = "small" | "default" | "large";
 export declare type TextAlign = "left" | "center" | "right";
-export declare type TextWeight = "default" | "thick" | "bold";
+export declare type TextWeight = "normal" | "thick" | "bold";
 export interface TextProps extends CommonProps {
     /**
      * Child nodes.
@@ -14,15 +13,15 @@ export interface TextProps extends CommonProps {
      */
     type?: TextType;
     /**
-     * Size of element. Values can be "default", "small", or "large".
+     * Size of element. Values can be "small", "medium", or "large".
      */
-    size?: TextSize;
+    size?: Size;
     /**
      * Alignment of the text. Values can be "left", "center", or "right".
      */
     align?: TextAlign;
     /**
-     * Weight of the text. Values can be "default", "thick", or "bold".
+     * Weight of the text. Values can be "normal", "thick", or "bold".
      */
     weight?: TextWeight;
     /**

package/components/Toggle/Toggle.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
 import "./Toggle.css";
-export declare type ToggleSize = "small" | "default";
+export declare type ToggleSize = "small" | "medium";
 export interface ToggleProps extends CommonProps {
     /**
      * ID of the toggle.

package/components/buttons/Button/Button.d.ts

@@ -1,8 +1,9 @@
 import * as React from "react";
-import { ButtonCommonProps, ButtonIntent, ButtonSize, ButtonType, ButtonVariant } from "../shared/ButtonProps";
+import { Size } from "../../../common";
+import { ButtonCommonProps, ButtonIntent, ButtonType, ButtonVariant } from "../shared/ButtonProps";
 export interface StyledButtonProps {
     $variant: ButtonVariant;
-    $size: ButtonSize;
+    $size: Size;
     $square: boolean;
     $intent: ButtonIntent;
     $fullWidth: boolean;

package/components/buttons/IconButton/IconButton.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
+import { Size } from "../../../common";
 import "../shared/Button.css";
-import { ButtonCommonProps, ButtonSize } from "../shared/ButtonProps";
+import { ButtonCommonProps } from "../shared/ButtonProps";
 export interface IconButtonProps extends ButtonCommonProps {
     /**
      * The icon to display.
@@ -19,6 +20,6 @@ export interface IconButtonProps extends ButtonCommonProps {
     /**
      * The size of the button. Defaults to "small".
      */
-    size?: ButtonSize;
+    size?: Size;
 }
 export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/components/buttons/shared/ButtonProps.d.ts

@@ -1,9 +1,8 @@
 /// <reference types="react" />
-import { CommonProps } from "../../../common/CommonProps";
+import { CommonProps, Size } from "../../../common/CommonProps";
 export declare type ButtonVariant = "filled" | "transparent";
 export declare type ButtonIntent = "primary" | "secondary" | "danger" | "warning" | "tertiary";
 export declare type ButtonType = "button" | "submit";
-export declare type ButtonSize = "small" | "normal" | "large";
 export interface ButtonCommonProps extends CommonProps {
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     /**
@@ -29,7 +28,7 @@ export interface ButtonCommonProps extends CommonProps {
     /**
      * The size of the button.
      */
-    size?: ButtonSize;
+    size?: Size;
     /**
      * The link to be used for the button.
      */

package/components/buttons/shared/helpers.d.ts

@@ -1,8 +1,9 @@
-import { ButtonIntent, ButtonSize, ButtonVariant } from "./ButtonProps";
+import { Size } from "../../../common";
+import { ButtonIntent, ButtonVariant } from "./ButtonProps";
 interface ButtonProps {
     $intent: ButtonIntent;
     $variant: ButtonVariant;
-    $size: ButtonSize;
+    $size: Size;
 }
 /**
  * Helper to get the needed classname from buttonProps.

package/index.css

@@ -242,7 +242,7 @@
       transition-all;
   }
 
-  &--default {
+  &--medium {
     @apply flex
       items-center
       p-1