@trackunit/react-components 0.0.124 → 0.0.126

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, ...props }: 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" | "medium";
-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>;
+};