@equisoft/design-elements-react 6.1.2 → 6.1.3-snapshot.20240321135951

package/dist/bundle.js.LICENSE.txt

@@ -28,6 +28,33 @@ object-assign
  * http://api.jqueryui.com/category/ui-core/
  */
 
+/*!
+* tabbable 6.2.0
+* @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
+*/
+
+/**
+   * react-table
+   *
+   * Copyright (c) TanStack
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE.md file in the root directory of this source tree.
+   *
+   * @license MIT
+   */
+
+/**
+   * table-core
+   *
+   * Copyright (c) TanStack
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE.md file in the root directory of this source tree.
+   *
+   * @license MIT
+   */
+
 /** @license React v17.0.2
  * react-dom-server.browser.production.min.js
  *

package/dist/components/accordion/accordion.d.ts

@@ -14,6 +14,7 @@ interface AccordionProps {
     id?: string;
     items: ItemsProps[];
     mode?: 'single' | 'multi';
+    onToggle?: (itemId: string, expanded: boolean) => void;
 }
 export declare const StyledAccordionGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const Accordion: React.FC<AccordionProps>;

package/dist/components/buttons/abstract-button.d.ts

@@ -1,12 +1,14 @@
 import { ButtonHTMLAttributes } from 'react';
 import { FlattenInterpolation, ThemeProps } from 'styled-components';
-import { Theme } from '../../themes';
+import { ResolvedTheme } from '../../themes/theme';
 type Size = 'small' | 'medium';
 export declare const defaultButtonStyles: FlattenInterpolation<import("styled-components").ThemedStyledProps<{
+    $focusable?: boolean | undefined;
     isMobile: boolean;
     size?: Size | undefined;
 }, import("styled-components").DefaultTheme>>;
 interface AbstractButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    focusable?: boolean;
     isMobile: boolean;
     size?: Size;
 }
@@ -16,8 +18,9 @@ export declare const AbstractButton: import("react").ForwardRefExoticComponent<A
 export type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'destructive' | 'destructive-secondary';
 export interface ButtonTypeStyles {
     buttonType: ButtonType;
+    focusable?: boolean;
     inverted?: boolean;
-    theme: Theme;
+    theme: ResolvedTheme;
 }
-export declare const getButtonTypeStyles: (props: ButtonTypeStyles) => FlattenInterpolation<ThemeProps<Theme>>;
+export declare const getButtonTypeStyles: (props: ButtonTypeStyles) => FlattenInterpolation<ThemeProps<ResolvedTheme>>;
 export {};

package/dist/components/buttons/button.d.ts

@@ -12,6 +12,10 @@ interface ButtonProps {
     buttonType: ButtonType;
     className?: string;
     disabled?: boolean;
+    /**
+     * @default true
+     */
+    focusable?: boolean;
     inverted?: boolean;
     label?: string;
     /**

package/dist/components/buttons/icon-button.d.ts

@@ -14,6 +14,10 @@ export interface IconButtonProps {
     buttonType: ButtonType;
     className?: string;
     disabled?: boolean;
+    /**
+     * @default true
+     */
+    focusable?: boolean;
     inverted?: boolean;
     /**
      * Name of the desired icon (refer to icon library)

package/dist/components/combobox/combobox.d.ts

@@ -0,0 +1,64 @@
+import { VoidFunctionComponent } from 'react';
+import { ListboxOption } from '../listbox/listbox';
+import { TooltipProps } from '../tooltip/tooltip';
+export interface ComboboxOption extends Omit<ListboxOption, 'label'> {
+}
+type AutoCompleteMode = 'none' | 'inline' | 'list' | 'both';
+interface ComboboxProps {
+    /**
+     * Aria label for the input (used when no visual label is present)
+     */
+    ariaLabel?: string;
+    /**
+     * Sets the autocomplete mode.
+     * - 'none': disables autocomplete, the component behaves like a normal textbox with list of suggestions
+     * - 'inline': autocompletes the text input
+     * - 'list': shows and filters the listbox options when text is entered
+     * - 'both': enables both inline and list autocompletion
+     * @default 'none'
+     */
+    autoComplete?: AutoCompleteMode;
+    className?: string;
+    /**
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * The default value (and selected option when autoComplete is 'list' or 'both')
+     */
+    defaultValue?: string;
+    /**
+     * Disables the input
+     */
+    disabled?: boolean;
+    /**
+     * Disables the default margin
+     * */
+    noMargin?: boolean;
+    id?: string;
+    label?: string;
+    name?: string;
+    options: ComboboxOption[];
+    required?: boolean;
+    tooltip?: TooltipProps;
+    /**
+     * Sets input validity
+     */
+    valid?: boolean;
+    /**
+     * Sets error message
+     * @default You must select an option
+     */
+    validationErrorMessage?: string;
+    /**
+     * Sets the selected value (makes the component controlled)
+     */
+    value?: string;
+    hint?: string;
+    /**
+     * OnChange callback function, invoked when the value is changed
+     */
+    onChange?(value: string): void;
+}
+export declare const Combobox: VoidFunctionComponent<ComboboxProps>;
+export {};

package/dist/components/device-context-provider/device-context-provider.d.ts

@@ -1,5 +1,5 @@
 import { FunctionComponent, PropsWithChildren } from 'react';
-import { Breakpoints } from '../../tokens/breakpoints';
+import { Breakpoints } from '../../legacy-constants/breakpoints';
 export type DeviceType = 'desktop' | 'tablet' | 'mobile';
 export interface DeviceContextProviderProps {
     staticDevice?: DeviceType;

package/dist/components/dropdown-list/dropdown-list.d.ts

@@ -4,7 +4,7 @@ import { TooltipProps } from '../tooltip/tooltip';
 export interface DropdownListOption extends ListboxOption {
     label: string;
 }
-interface DropdownListProps {
+export interface DropdownListProps {
     /**
      * Aria label for the input (used when no visual label is present)
      */
@@ -27,9 +27,6 @@ interface DropdownListProps {
     id?: string;
     label?: string;
     name?: string;
-    /**
-     * { disabled?: boolean, value: string; label: string; }[]
-     */
     options: DropdownListOption[];
     required?: boolean;
     tooltip?: TooltipProps;
@@ -53,4 +50,3 @@ interface DropdownListProps {
     onChange?(option: DropdownListOption): void;
 }
 export declare const DropdownList: VoidFunctionComponent<DropdownListProps>;
-export {};

package/dist/components/dropdown-menu/list-items/nav-item.d.ts

@@ -10,6 +10,7 @@ export interface NavItemProps {
     label?: string;
     lozenge?: string;
     end?: boolean;
+    isExternalLink?: boolean;
     isHtmlLink?: boolean;
     disabled?: boolean;
     target?: string;
@@ -23,5 +24,6 @@ interface LinkProps {
 }
 export declare const StyledNavItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<NavLinkProps & import("react").RefAttributes<HTMLAnchorElement>>, import("styled-components").DefaultTheme, LinkProps & NavLinkProps, never>;
 export declare const HtmlLink: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, LinkProps, never>;
+export declare const StyledExternalLink: import("styled-components").StyledComponent<import("react").VoidFunctionComponent<import("../../external-link/external-link").ExternalLinkProps>, import("styled-components").DefaultTheme, LinkProps, never>;
 export declare const NavItem: import("react").ForwardRefExoticComponent<NavItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
 export {};

package/dist/components/external-link/external-link.d.ts

@@ -1,4 +1,4 @@
-import { VoidFunctionComponent } from 'react';
+import { MouseEvent, VoidFunctionComponent } from 'react';
 import { IconName } from '../icon/icon';
 export interface ExternalLinkProps {
     className?: string;
@@ -7,6 +7,6 @@ export interface ExternalLinkProps {
     iconName?: IconName;
     label?: string;
     target?: string;
-    onClick?(): void;
+    onClick?(event: MouseEvent<Element, globalThis.MouseEvent>): void;
 }
 export declare const ExternalLink: VoidFunctionComponent<ExternalLinkProps>;

package/dist/components/global-banner/global-banner.d.ts

@@ -1,10 +1,10 @@
 import { MouseEvent, ReactNode } from 'react';
-export type GlobalBannerType = 'alert' | 'warning' | 'info' | 'default';
+export type GlobalBannerType = 'neutral' | 'discovery' | 'warning' | 'alert';
 export interface ActionButton {
     label: string;
     onClick(event: MouseEvent<HTMLButtonElement>): void;
 }
-interface Props {
+interface GlobalBannerProps {
     actionButton?: ActionButton;
     secondaryActionButton?: ActionButton;
     className?: string;
@@ -18,5 +18,5 @@ interface Props {
     onDismiss?(): void;
     type?: GlobalBannerType;
 }
-export declare const GlobalBanner: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLElement>>;
+export declare const GlobalBanner: import("react").ForwardRefExoticComponent<GlobalBannerProps & import("react").RefAttributes<HTMLElement>>;
 export {};

package/dist/components/listbox/listbox.d.ts

@@ -9,9 +9,6 @@ export interface ListboxOption {
 interface ListboxProps {
     ariaLabelledBy?: string;
     id?: string;
-    /**
-     * { value: string; label?: string; caption?: string; disabled?: boolean }[]
-     */
     options: ListboxOption[];
     className?: string;
     /**

package/dist/components/lozenge/lozenge.d.ts

@@ -1,10 +1,11 @@
 import { FunctionComponent, PropsWithChildren } from 'react';
 import { IconName } from '../icon/icon';
-export type LozengeType = 'default' | 'success' | 'alert' | 'warning' | 'info' | 'disabled';
+export type LozengeVariant = 'neutral' | 'success' | 'alert' | 'warning' | 'info' | 'discovery';
 interface Props {
     className?: string;
-    type?: LozengeType;
+    variant?: LozengeVariant;
     icon?: IconName;
+    subtle?: boolean;
 }
 export declare const Lozenge: FunctionComponent<PropsWithChildren<Props>>;
 export {};

package/dist/components/menu/menu.d.ts

@@ -4,6 +4,7 @@ export interface MenuOption {
     label: string;
     iconName?: IconName;
     options?: MenuItem[];
+    disabled?: boolean;
     onClick?(): void;
 }
 export interface MenuGroup {

package/dist/components/pagination/pagination.d.ts

@@ -2,10 +2,9 @@ import { VoidFunctionComponent } from 'react';
 interface PaginationProps {
     className?: string;
     /**
-     * Total number of pages
-     * @default desktop
+     * Number of results to display per page
      */
-    totalPages: number;
+    resultsPerPage: number;
     /**
      * Displays the total number of results when provided
      */

package/dist/components/progress-tracker/progress-tracker.d.ts

@@ -1,11 +1,16 @@
 import { VoidFunctionComponent } from 'react';
-export interface ProgressTracker {
-    label?: string;
+export interface ProgressTrackerStep {
+    href?: string;
+    label: string;
+    completion?: 'completed' | 'uncompleted';
+    onClick?: (stepNumber: number) => void;
 }
-interface ProgressProps {
+interface ProgressTrackerProps {
+    ariaLabel?: string;
     className?: string;
-    steps: ProgressTracker[];
+    linear?: boolean;
+    steps: ProgressTrackerStep[];
     value: number;
 }
-export declare const Progress: VoidFunctionComponent<ProgressProps>;
+export declare const ProgressTracker: VoidFunctionComponent<ProgressTrackerProps>;
 export {};

package/dist/components/radio-card-group/styled-components.d.ts

@@ -1,15 +1,15 @@
-import { Theme } from '../../themes';
+import { ResolvedTheme } from '../../themes/theme';
 interface DescriptionProps {
     disabled?: boolean;
     isMobile: boolean;
     isChecked?: boolean;
-    theme: Theme;
+    theme: ResolvedTheme;
 }
 interface CardProps {
     disabled?: boolean;
     isMobile: boolean;
     isChecked?: boolean;
-    theme: Theme;
+    theme: ResolvedTheme;
 }
 export declare const RadioInput: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, CardProps, never>;
 export declare const Legend: import("styled-components").StyledComponent<"legend", import("styled-components").DefaultTheme, {

package/dist/components/table/sort-button-icon.d.ts

@@ -1,6 +1,7 @@
 import { FunctionComponent, PropsWithChildren } from 'react';
 export type SortState = 'ascending' | 'descending' | 'none';
 export interface SortButtonIconProps {
+    className?: string;
     sort: SortState;
 }
 export declare const SortButtonIcon: FunctionComponent<PropsWithChildren<SortButtonIconProps>>;

package/dist/components/table/table-footer.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+import { HeaderGroup } from '@tanstack/react-table';
+interface TableFooterProps<T extends object> {
+    footerGroup: HeaderGroup<T>;
+    sticky: boolean;
+}
+export declare const TableFooter: <T extends object>({ footerGroup, sticky, }: TableFooterProps<T>) => ReactElement;
+export {};

package/dist/components/table/table-header.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+import { HeaderGroup } from '@tanstack/react-table';
+interface TableHeaderProps<T extends object> {
+    headerGroup: HeaderGroup<T>;
+    sticky: boolean;
+}
+export declare const TableHeader: <T extends object>({ headerGroup, sticky, }: TableHeaderProps<T>) => ReactElement;
+export {};

package/dist/components/table/table-row.d.ts

@@ -1,15 +1,10 @@
 import { ReactElement } from 'react';
-import { Row } from 'react-table';
-interface StyledTableRowProps {
-    clickable: boolean;
-    error: boolean;
-    selected: boolean;
-    striped?: boolean;
-}
-interface TableRowProps<T extends object> extends Omit<StyledTableRowProps, 'clickable' | 'selected'> {
+import { Row } from '@tanstack/react-table';
+interface TableRowProps<T extends object> {
     row: Row<T>;
-    viewIndex: number;
+    striped: boolean;
+    error: boolean;
     onClick?(row: Row<T>): void;
 }
-export declare const TableRow: <T extends object>({ error, onClick, row, striped, viewIndex, }: TableRowProps<T>) => ReactElement;
+export declare const TableRow: <T extends object>({ error, onClick, row, striped, }: TableRowProps<T>) => ReactElement;
 export {};

package/dist/components/table/table.d.ts

@@ -1,29 +1,15 @@
 import { ReactElement } from 'react';
-import { Column, Row, UseSortByColumnOptions } from 'react-table';
+import { Row, ColumnSort } from '@tanstack/react-table';
+import { CustomColumnDef } from './types';
 type RowSize = 'small' | 'medium';
-type ColumnSort = 'asc' | 'desc';
-type CustomColumn<T extends object> = Column<T> & UseSortByColumnOptions<T> & {
-    defaultSort?: ColumnSort;
-    sortable?: boolean;
-    textAlign?: string;
-    className?: string;
-    sticky?: boolean;
-    footerColSpan?: number;
-};
-export type TableColumn<T extends object> = CustomColumn<T>[];
+export type TableColumn<T extends object> = CustomColumnDef<T>[];
 export type TableRow<T> = T & {
     error?: boolean;
 };
-interface CustomRowProps {
-    error?: boolean;
-}
 export interface TableProps<T extends object> {
-    className?: string;
-    footerColSpan?: number | undefined;
-    columns: TableColumn<T>;
-    /** Array of Objects that defines your table data.
-     * See stories code or refer to react-table docs for more information */
-    data: (T & CustomRowProps)[];
+    data: T[];
+    defaultSort?: ColumnSort;
+    columns: CustomColumnDef<T>[];
     /**
      * Adds row numbers
      * @default false
@@ -40,10 +26,13 @@ export interface TableProps<T extends object> {
      * @default false
      */
     striped?: boolean;
+    className?: string;
     stickyHeader?: boolean;
     stickyFooter?: boolean;
+    manualSort?: boolean;
     onRowClick?(row: Row<T>): void;
     onSelectedRowsChange?(selectedRows: T[]): void;
+    onSort?(sort: ColumnSort | null): void;
 }
-export declare const Table: <T extends object>({ className, columns, data, rowNumbers, rowSize, selectableRows, striped, onRowClick, onSelectedRowsChange, stickyHeader, stickyFooter, }: TableProps<T>) => ReactElement;
+export declare const Table: <T extends object>({ className, data, defaultSort, columns: defaultColumns, stickyHeader, stickyFooter, rowNumbers, rowSize, selectableRows, striped, manualSort, onRowClick, onSelectedRowsChange, onSort, }: TableProps<T>) => ReactElement;
 export {};

package/dist/components/table/types.d.ts

@@ -0,0 +1,12 @@
+import { ColumnDef, RowData } from '@tanstack/react-table';
+import { CSSProperties } from 'react';
+export type CustomColumnDef<TData extends RowData, TValue = unknown> = ColumnDef<TData, TValue> & {
+    className?: string;
+    footerColSpan?: number;
+    headerAriaLabel?: string;
+    headerColSpan?: number;
+    iconAlign?: 'left' | 'right';
+    sortable?: boolean;
+    sticky?: boolean;
+    textAlign?: CSSProperties['textAlign'];
+};

package/dist/components/text-input/styles/inputs.d.ts

@@ -1,9 +1,9 @@
 import { FlattenSimpleInterpolation } from 'styled-components';
-import { Theme } from '../../../themes';
+import { ResolvedTheme } from '../../../themes/theme';
 import { DeviceContextProps } from '../../device-context-provider/device-context-provider';
-export declare const inputsStyle: (theme: Theme, isMobile?: boolean) => FlattenSimpleInterpolation;
+export declare const inputsStyle: (theme: ResolvedTheme, isMobile?: boolean) => FlattenSimpleInterpolation;
 interface ResponsiveInputsStyles {
-    theme: Theme;
+    theme: ResolvedTheme;
     device: DeviceContextProps;
 }
 export declare const responsiveInputsStyle: ({ theme, device: { isMobile } }: ResponsiveInputsStyles) => FlattenSimpleInterpolation;

package/dist/components/theme-wrapper/theme-wrapper.d.ts

@@ -1,12 +1,12 @@
 import { FunctionComponent, PropsWithChildren } from 'react';
-import { Theme } from '../../themes';
+import { ThemeCustomization } from '../../themes/theme';
 export interface ThemeWrapperProps {
     /**
      * When true, components are mounted in the Shadow DOM
      * @default false
      */
     isolateStyles?: boolean;
-    theme?: Theme;
+    theme?: ThemeCustomization;
 }
 /**
  * @deprecated Use {@link DesignSystem} instead

package/dist/components/toast/toast-container.d.ts

@@ -4,7 +4,7 @@ import { ToastType } from './toast-type';
 interface ToastContainerProps {
     id: string;
     className?: string;
-    type: ToastType;
+    type?: ToastType;
     message: string;
     position: ToastPosition;
 }

package/dist/components/toast/toast-type.d.ts

@@ -1,7 +1,8 @@
 export declare enum ToastTypeEnum {
-    INFORMATION = "information",
+    NEUTRAL = "neutral",
+    DISCOVERY = "discovery",
     SUCCESS = "success",
     WARNING = "warning",
-    ERROR = "error"
+    ALERT = "alert"
 }
 export type ToastType = `${ToastTypeEnum}`;

package/dist/hooks/use-click-outside.d.ts

@@ -1,2 +1,2 @@
 import { MutableRefObject } from 'react';
-export declare function useClickOutside<T extends HTMLElement>(targets: MutableRefObject<T | null>[], callback: () => void): void;
+export declare function useClickOutside(targets: MutableRefObject<HTMLElement | null>[], callback: () => void): void;

package/dist/hooks/use-list-cursor.d.ts

@@ -10,6 +10,7 @@ interface UseListCursorRequest<T> {
     elements: T[];
     initialElement?: T;
     predicate?: (element: T) => boolean;
+    wrapAround?: boolean;
 }
-export declare function useListCursor<TElement>({ elements, initialElement, predicate, }: UseListCursorRequest<TElement>): UseListCursorResponse<TElement>;
+export declare function useListCursor<TElement>({ elements, initialElement, predicate, wrapAround, }: UseListCursorRequest<TElement>): UseListCursorResponse<TElement>;
 export {};

package/dist/hooks/use-theme.d.ts

@@ -1,2 +1,2 @@
-import { Theme } from '../themes';
-export declare function useTheme(): Theme;
+import { ResolvedTheme } from '../themes/theme';
+export declare function useTheme(): ResolvedTheme;

package/dist/i18n/translations.d.ts

@@ -7,6 +7,9 @@ export declare const Translations: {
             productsLabel: string;
             externalsLabel: string;
         };
+        combobox: {
+            showOptions: string;
+        };
         common: {
             opensInNewTab: string;
             opensInNewTabScreenReader: string;
@@ -77,6 +80,10 @@ export declare const Translations: {
             'show-password': string;
             'hide-password': string;
         };
+        'progress-tracker': {
+            completedAriaLabel: string;
+            uncompletedAriaLabel: string;
+        };
         'search-input': {
             label: string;
         };
@@ -127,6 +134,9 @@ export declare const Translations: {
             productsLabel: string;
             externalsLabel: string;
         };
+        combobox: {
+            showOptions: string;
+        };
         common: {
             opensInNewTab: string;
             opensInNewTabScreenReader: string;
@@ -197,6 +207,10 @@ export declare const Translations: {
             'show-password': string;
             'hide-password': string;
         };
+        'progress-tracker': {
+            completedAriaLabel: string;
+            uncompletedAriaLabel: string;
+        };
         'search-input': {
             label: string;
         };

package/dist/index.d.ts

@@ -8,11 +8,11 @@ export { ToggleButtonGroup } from './components/toggle-button-group/toggle-butto
 export { Avatar } from './components/avatar/avatar';
 export { Checkbox } from './components/checkbox/checkbox';
 export { CheckboxGroup } from './components/checkbox-group/checkbox-group';
+export { Combobox, ComboboxOption } from './components/combobox/combobox';
 export { Datepicker, DatepickerHandles } from './components/date-picker/date-picker';
 export { DropdownList, DropdownListOption } from './components/dropdown-list/dropdown-list';
 export { MoneyInput } from './components/money-input/money-input';
 export { NumericInput } from './components/numeric-input/numeric-input';
-export { OptionButton } from './components/option-button/option-button';
 export { PasswordCreationInput } from './components/password-creation-input/password-creation-input';
 export { PasswordInput } from './components/password-input/password-input';
 export { PhoneInput } from './components/phone-input/phone-input';
@@ -49,7 +49,7 @@ export { SideDrawer } from './components/side-drawer/side-drawer';
 export { GlobalBanner, GlobalBannerType } from './components/global-banner/global-banner';
 export * from './components/tooltip/tooltip';
 export * from './components/toggletip/toggletip';
-export * from './components/table/table';
+export { Table, TableColumn, TableRow } from './components/table/table';
 export { Modal } from './components/modal/modal';
 export { ModalDialog } from './components/modal/modal-dialog';
 export { Tag, TagProps, TagValue } from './components/tag/tag';
@@ -71,8 +71,7 @@ export { ProgressIndicator } from './components/progress-indicator/progress-indi
 export { ProgressCircle } from './components/progress-circle/progress-circle';
 export { Pagination } from './components/pagination/pagination';
 export { equisoftTheme } from './themes/equisoft';
-export { testTheme } from './themes/test-theme';
 export { injectMainCss } from './styles';
-export { Theme } from './themes/theme';
+export { ResolvedTheme, ThemeCustomization, ThemeCustomization as Theme } from './themes/theme';
 export { useTheme } from './hooks/use-theme';
 export * from './components/design-system';

package/dist/theme.d.ts

@@ -1,2 +1,2 @@
 export { equisoftTheme } from './themes/equisoft';
-export { Theme } from './themes/theme';
+export { ResolvedTheme } from './themes/theme';