@equisoft/design-elements-react 6.1.3-snapshot.20240410141002 → 6.2.0

package/dist/bundle.js.LICENSE.txt

@@ -5,15 +5,15 @@ object-assign
 */
 
 /*!
-  Copyright (c) 2015 Jed Watson.
-  Based on code that is Copyright 2013-2015, Facebook, Inc.
-  All rights reserved.
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
 */
 
 /*!
-  react-datepicker v6.6.0
-  https://github.com/Hacker0x01/react-datepicker
-  Released under the MIT License.
+  Copyright (c) 2015 Jed Watson.
+  Based on code that is Copyright 2013-2015, Facebook, Inc.
+  All rights reserved.
 */
 
 /*!
@@ -28,33 +28,6 @@ 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,7 +14,6 @@ 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,26 +1,23 @@
 import { ButtonHTMLAttributes } from 'react';
 import { FlattenInterpolation, ThemeProps } from 'styled-components';
-import { ResolvedTheme } from '../../themes/theme';
+import { Theme } from '../../themes';
 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;
 }
 export declare const AbstractButton: import("react").ForwardRefExoticComponent<AbstractButtonProps & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLButtonElement>>;
-export type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'destructive' | 'destructive-secondary' | 'destructive-tertiary';
+export type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'destructive' | 'destructive-secondary';
 export interface ButtonTypeStyles {
     buttonType: ButtonType;
-    focusable?: boolean;
     inverted?: boolean;
-    theme: ResolvedTheme;
+    theme: Theme;
 }
-export declare const getButtonTypeStyles: (props: ButtonTypeStyles) => FlattenInterpolation<ThemeProps<ResolvedTheme>>;
+export declare const getButtonTypeStyles: (props: ButtonTypeStyles) => FlattenInterpolation<ThemeProps<Theme>>;
 export {};

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

@@ -12,10 +12,6 @@ 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,10 +14,6 @@ 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/device-context-provider/device-context-provider.d.ts

@@ -1,5 +1,5 @@
 import { FunctionComponent, PropsWithChildren } from 'react';
-import { Breakpoints } from '../../legacy-constants/breakpoints';
+import { Breakpoints } from '../../tokens/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;
 }
-export interface DropdownListProps {
+interface DropdownListProps {
     /**
      * Aria label for the input (used when no visual label is present)
      */
@@ -27,6 +27,9 @@ export interface DropdownListProps {
     id?: string;
     label?: string;
     name?: string;
+    /**
+     * { disabled?: boolean, value: string; label: string; }[]
+     */
     options: DropdownListOption[];
     required?: boolean;
     tooltip?: TooltipProps;
@@ -50,3 +53,4 @@ export 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,7 +10,6 @@ export interface NavItemProps {
     label?: string;
     lozenge?: string;
     end?: boolean;
-    isExternalLink?: boolean;
     isHtmlLink?: boolean;
     disabled?: boolean;
     target?: string;
@@ -24,6 +23,5 @@ 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 { MouseEvent, VoidFunctionComponent } from 'react';
+import { 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?(event: MouseEvent<Element, globalThis.MouseEvent>): void;
+    onClick?(): 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 = 'neutral' | 'discovery' | 'warning' | 'alert';
+export type GlobalBannerType = 'alert' | 'warning' | 'info' | 'default';
 export interface ActionButton {
     label: string;
     onClick(event: MouseEvent<HTMLButtonElement>): void;
 }
-interface GlobalBannerProps {
+interface Props {
     actionButton?: ActionButton;
     secondaryActionButton?: ActionButton;
     className?: string;
@@ -18,5 +18,5 @@ interface GlobalBannerProps {
     onDismiss?(): void;
     type?: GlobalBannerType;
 }
-export declare const GlobalBanner: import("react").ForwardRefExoticComponent<GlobalBannerProps & import("react").RefAttributes<HTMLElement>>;
+export declare const GlobalBanner: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLElement>>;
 export {};

package/dist/components/icon/icon.d.ts

@@ -8,6 +8,8 @@ declare const iconMapping: {
     readonly arrowLeft: any;
     readonly arrowRight: any;
     readonly arrowUp: any;
+    readonly arrowDownCircle: any;
+    readonly arrowUpCircle: any;
     readonly bell: any;
     readonly bento: any;
     readonly calendar: any;
@@ -52,6 +54,7 @@ declare const iconMapping: {
     readonly star: any;
     readonly transfer: any;
     readonly trash: any;
+    readonly unlink: any;
     readonly user: any;
     readonly users: any;
     readonly warningFilled: any;

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

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

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

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

package/dist/components/option-button/option-button.d.ts

@@ -0,0 +1,10 @@
+import { VoidFunctionComponent } from 'react';
+interface OptionButtonProps {
+    checked?: boolean;
+    className?: string;
+    label: string;
+    name: string;
+    value: number;
+}
+export declare const OptionButton: VoidFunctionComponent<OptionButtonProps>;
+export {};

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

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

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

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

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

@@ -1,15 +1,15 @@
-import { ResolvedTheme } from '../../themes/theme';
+import { Theme } from '../../themes';
 interface DescriptionProps {
     disabled?: boolean;
     isMobile: boolean;
     isChecked?: boolean;
-    theme: ResolvedTheme;
+    theme: Theme;
 }
 interface CardProps {
     disabled?: boolean;
     isMobile: boolean;
     isChecked?: boolean;
-    theme: ResolvedTheme;
+    theme: Theme;
 }
 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,7 +1,6 @@
 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/sortable-column-heading.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { HeaderGroup } from 'react-table';
+interface SortableColumnHeadingProps<T extends object = {}> {
+    header: HeaderGroup<T>;
+}
+export declare const SortableColumnHeading: <T extends object>({ header }: SortableColumnHeadingProps<T>) => ReactElement;
+export {};

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

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

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

@@ -1,15 +1,29 @@
 import { ReactElement } from 'react';
-import { Row, ColumnSort } from '@tanstack/react-table';
-import { CustomColumnDef } from './types';
+import { Column, Row, UseSortByColumnOptions } from 'react-table';
 type RowSize = 'small' | 'medium';
-export type TableColumn<T extends object> = CustomColumnDef<T>[];
+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 TableRow<T> = T & {
     error?: boolean;
 };
+interface CustomRowProps {
+    error?: boolean;
+}
 export interface TableProps<T extends object> {
-    data: T[];
-    defaultSort?: ColumnSort;
-    columns: CustomColumnDef<T>[];
+    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)[];
     /**
      * Adds row numbers
      * @default false
@@ -26,13 +40,10 @@ 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, data, defaultSort, columns: defaultColumns, stickyHeader, stickyFooter, rowNumbers, rowSize, selectableRows, striped, manualSort, onRowClick, onSelectedRowsChange, onSort, }: TableProps<T>) => ReactElement;
+export declare const Table: <T extends object>({ className, columns, data, rowNumbers, rowSize, selectableRows, striped, onRowClick, onSelectedRowsChange, stickyHeader, stickyFooter, }: TableProps<T>) => ReactElement;
 export {};

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

@@ -1,9 +1,9 @@
 import { FlattenSimpleInterpolation } from 'styled-components';
-import { ResolvedTheme } from '../../../themes/theme';
+import { Theme } from '../../../themes';
 import { DeviceContextProps } from '../../device-context-provider/device-context-provider';
-export declare const inputsStyle: (theme: ResolvedTheme, isMobile?: boolean) => FlattenSimpleInterpolation;
+export declare const inputsStyle: (theme: Theme, isMobile?: boolean) => FlattenSimpleInterpolation;
 interface ResponsiveInputsStyles {
-    theme: ResolvedTheme;
+    theme: Theme;
     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 { ThemeCustomization } from '../../themes/theme';
+import { Theme } from '../../themes';
 export interface ThemeWrapperProps {
     /**
      * When true, components are mounted in the Shadow DOM
      * @default false
      */
     isolateStyles?: boolean;
-    theme?: ThemeCustomization;
+    theme?: Theme;
 }
 /**
  * @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,8 +1,7 @@
 export declare enum ToastTypeEnum {
-    NEUTRAL = "neutral",
-    DISCOVERY = "discovery",
+    INFORMATION = "information",
     SUCCESS = "success",
     WARNING = "warning",
-    ALERT = "alert"
+    ERROR = "error"
 }
 export type ToastType = `${ToastTypeEnum}`;

package/dist/components/toggle-button-group/toggle-button-group.d.ts

@@ -5,7 +5,6 @@ interface ToggleButtonGroupProps {
      */
     buttonGroup: {
         defaultPressed?: boolean;
-        disabled?: boolean;
         label: string;
         value: string;
     }[];

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

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

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

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

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

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

package/dist/i18n/translations.d.ts

@@ -7,14 +7,6 @@ export declare const Translations: {
             productsLabel: string;
             externalsLabel: string;
         };
-        combobox: {
-            clearInput: string;
-            loading: string;
-            noResult: string;
-            noResultForQuery: string;
-            showOptions: string;
-            validationErrorMessage: string;
-        };
         common: {
             opensInNewTab: string;
             opensInNewTabScreenReader: string;
@@ -85,10 +77,6 @@ export declare const Translations: {
             'show-password': string;
             'hide-password': string;
         };
-        'progress-tracker': {
-            completedAriaLabel: string;
-            uncompletedAriaLabel: string;
-        };
         'search-input': {
             label: string;
         };
@@ -139,14 +127,6 @@ export declare const Translations: {
             productsLabel: string;
             externalsLabel: string;
         };
-        combobox: {
-            clearInput: string;
-            loading: string;
-            noResult: string;
-            noResultForQuery: string;
-            showOptions: string;
-            validationErrorMessage: string;
-        };
         common: {
             opensInNewTab: string;
             opensInNewTabScreenReader: string;
@@ -217,10 +197,6 @@ 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

@@ -1,6 +1,3 @@
-declare global {
-    var __DS_DEV__: boolean;
-}
 export { Button } from './components/buttons/button';
 export { IconButton } from './components/buttons/icon-button';
 export { NavListOption } from './components/nav-list/nav-list-option';
@@ -11,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';
@@ -52,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 { Table, TableColumn, TableRow } from './components/table/table';
+export * 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';
@@ -74,7 +71,8 @@ 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 { ResolvedTheme, ThemeCustomization, ThemeCustomization as Theme } from './themes/theme';
+export { 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 { ResolvedTheme } from './themes/theme';
+export { Theme } from './themes/theme';