@trackunit/react-components 0.0.138 → 0.0.142

package/components/Alert/Alert.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
-export declare type AlertIntent = "info" | "warning" | "danger" | "success";
+import { IntentColors } from "../../constants";
 export declare type AlertActionType = "primary" | "secondary";
 export declare type AlertAction = {
     label: string;
@@ -13,10 +13,10 @@ export interface AlertProps extends CommonProps {
      */
     children: React.ReactNode;
     /**
-     * Intent of the alert component.
+     * Color of the alert component.
      *
      */
-    intent?: AlertIntent;
+    color?: IntentColors;
     /**
      * Title of the alert component.
      */
@@ -50,4 +50,4 @@ export interface AlertProps extends CommonProps {
  * @param {AlertProps} props - The props for the Alert component
  * @returns {JSX.Element} Alert component
  */
-export declare const Alert: ({ intent, title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, inline, }: AlertProps) => JSX.Element;
+export declare const Alert: ({ color, title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, inline, }: AlertProps) => JSX.Element;

package/components/DayPicker/DayPickerPopover.d.ts

@@ -1,14 +1,14 @@
 /// <reference types="react" />
 import { Matcher } from "react-day-picker";
 import { Size } from "../../common";
-import { ButtonIntent } from "../buttons";
+import { ButtonColor } from "../buttons";
 import { PopoverPlacement } from "../Popover";
 export interface DayPickerPopoverProps {
     disabledDays?: Matcher | Matcher[] | undefined;
     className?: string;
     onDaySelect: (day: Date) => void;
     selectedDay?: Date;
-    intent?: ButtonIntent;
+    color?: ButtonColor;
     size?: Size;
     placement?: PopoverPlacement;
     buttonContent: JSX.Element;
@@ -20,4 +20,4 @@ export interface DayPickerPopoverProps {
  * @param {DayPickerPopoverProps} props - The props for the DayPickerPopover component
  * @returns {JSX.Element} DayPickerPopover component
  */
-export declare const DayPickerPopover: ({ disabledDays, className, selectedDay, onDaySelect, intent, placement, size, buttonContent, language, }: DayPickerPopoverProps) => JSX.Element;
+export declare const DayPickerPopover: ({ disabledDays, className, selectedDay, onDaySelect, color, placement, size, buttonContent, language, }: DayPickerPopoverProps) => JSX.Element;

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/components/buttons/Button/Button.d.ts

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

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

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { CommonProps, Size } from "../../../common/CommonProps";
+import { GeneralColors, IntentColors } from "../../../constants";
 export declare type ButtonVariant = "filled" | "transparent";
-export declare type ButtonIntent = "primary" | "secondary" | "danger" | "warning" | "tertiary";
+export declare type ButtonColor = Extract<GeneralColors, "primary" | "secondary"> | Extract<IntentColors, "info" | "warning" | "danger"> | "tertiary";
 export declare type ButtonType = "button" | "submit";
 export interface ButtonCommonProps extends CommonProps {
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
@@ -20,7 +21,7 @@ export interface ButtonCommonProps extends CommonProps {
     /**
      * The button's variant. Values are filled, transparent, plain.
      */
-    intent?: ButtonIntent;
+    color?: ButtonColor;
     /**
      * The variant of the button.
      */

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

@@ -1,7 +1,7 @@
 import { Size } from "../../../common";
-import { ButtonIntent, ButtonVariant } from "./ButtonProps";
+import { ButtonColor, ButtonVariant } from "./ButtonProps";
 interface ButtonProps {
-    $intent: ButtonIntent;
+    $color: ButtonColor;
     $variant: ButtonVariant;
     $size: Size;
 }
@@ -10,7 +10,7 @@ interface ButtonProps {
  *
  * @returns {string} - Classnames for the button
  */
-export declare const getStyles: () => ({ $intent, $variant }: ButtonProps) => string;
+export declare const getStyles: () => ({ $color, $variant }: ButtonProps) => any;
 /**
  * Helper to get the needed classname for padding.
  *

package/constants/colors.d.ts

@@ -7,6 +7,7 @@
  */
 export declare const generalColors: {
     readonly PRIMARY: "primary";
+    readonly SECONDARY: "secondary";
     readonly ACCENT: "accent";
     readonly NEUTRAL: "neutral";
 };
@@ -80,6 +81,7 @@ export declare const colors: {
     readonly WARNING: "warning";
     readonly DANGER: "danger";
     readonly PRIMARY: "primary";
+    readonly SECONDARY: "secondary";
     readonly ACCENT: "accent";
     readonly NEUTRAL: "neutral";
 };

package/index.css

@@ -88,15 +88,15 @@
   }
 
   &--warning {
-    @apply bg-orange-50
-      text-orange-600
-      hover:bg-orange-200
-      hover:text-orange-800
-      active:text-orange-700
-      active:bg-orange-100
-      focus:ring-orange-300
-      disabled:bg-orange-50
-      disabled:hover:bg-orange-50
+    @apply bg-warning-50
+      text-warning-600
+      hover:bg-warning-200
+      hover:text-warning-800
+      active:text-warning-700
+      active:bg-warning-100
+      focus:ring-warning-300
+      disabled:bg-warning-50
+      disabled:hover:bg-warning-50
       disabled:text-slate-400;
   }
 
@@ -146,10 +146,10 @@
   }
 
   &--transparent-warning {
-    @apply text-orange-600
-      active:bg-orange-500/20
-      focus:ring-orange-300
-      hover:bg-orange-500/10
+    @apply text-warning-600
+      active:bg-warning-500/20
+      focus:ring-warning-300
+      hover:bg-warning-500/10
       disabled:hover:bg-transparent;
   }