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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (104) hide show
  1. package/dist/bundle.js +686 -690
  2. package/dist/bundle.js.LICENSE.txt +33 -6
  3. package/dist/components/accordion/accordion.d.ts +1 -0
  4. package/dist/components/buttons/abstract-button.d.ts +6 -3
  5. package/dist/components/buttons/button.d.ts +4 -0
  6. package/dist/components/buttons/icon-button.d.ts +4 -0
  7. package/dist/components/combobox/combobox.d.ts +64 -0
  8. package/dist/components/device-context-provider/device-context-provider.d.ts +1 -1
  9. package/dist/components/dropdown-list/dropdown-list.d.ts +1 -5
  10. package/dist/components/dropdown-menu/list-items/nav-item.d.ts +2 -0
  11. package/dist/components/external-link/external-link.d.ts +2 -2
  12. package/dist/components/global-banner/global-banner.d.ts +3 -3
  13. package/dist/components/listbox/listbox.d.ts +0 -3
  14. package/dist/components/lozenge/lozenge.d.ts +3 -2
  15. package/dist/components/menu/menu.d.ts +1 -0
  16. package/dist/components/pagination/pagination.d.ts +2 -3
  17. package/dist/components/progress-tracker/progress-tracker.d.ts +10 -5
  18. package/dist/components/radio-card-group/styled-components.d.ts +3 -3
  19. package/dist/components/table/sort-button-icon.d.ts +1 -0
  20. package/dist/components/table/table-footer.d.ts +8 -0
  21. package/dist/components/table/table-header.d.ts +8 -0
  22. package/dist/components/table/table-row.d.ts +5 -10
  23. package/dist/components/table/table.d.ts +10 -21
  24. package/dist/components/table/types.d.ts +12 -0
  25. package/dist/components/text-input/styles/inputs.d.ts +3 -3
  26. package/dist/components/theme-wrapper/theme-wrapper.d.ts +2 -2
  27. package/dist/components/toast/toast-container.d.ts +1 -1
  28. package/dist/components/toast/toast-type.d.ts +3 -2
  29. package/dist/hooks/use-click-outside.d.ts +1 -1
  30. package/dist/hooks/use-list-cursor.d.ts +2 -1
  31. package/dist/hooks/use-theme.d.ts +2 -2
  32. package/dist/i18n/translations.d.ts +14 -0
  33. package/dist/index.d.ts +3 -4
  34. package/dist/theme.d.ts +1 -1
  35. package/dist/theme.js +1 -1
  36. package/dist/themes/default-theme.d.ts +2 -0
  37. package/dist/themes/equisoft.d.ts +2 -2
  38. package/dist/themes/index.d.ts +1 -1
  39. package/dist/themes/merge-theme.d.ts +2 -0
  40. package/dist/themes/merge-theme.test.d.ts +1 -0
  41. package/dist/themes/theme.d.ts +20 -1
  42. package/dist/themes/tokens/alias-tokens.d.ts +7 -0
  43. package/dist/themes/tokens/component/accordion-tokens.d.ts +8 -0
  44. package/dist/themes/tokens/component/avatar-tokens.d.ts +8 -0
  45. package/dist/themes/tokens/component/badge-tokens.d.ts +8 -0
  46. package/dist/themes/tokens/component/bento-menu-button-tokens.d.ts +8 -0
  47. package/dist/themes/tokens/component/button-tokens.d.ts +8 -0
  48. package/dist/themes/tokens/component/card-link-tokens.d.ts +8 -0
  49. package/dist/themes/tokens/component/card-tokens.d.ts +8 -0
  50. package/dist/themes/tokens/component/carousel-tokens.d.ts +8 -0
  51. package/dist/themes/tokens/component/dropdown-menu-tokens.d.ts +8 -0
  52. package/dist/themes/tokens/component/external-link-tokens.d.ts +8 -0
  53. package/dist/themes/tokens/component/focus-tokens.d.ts +8 -0
  54. package/dist/themes/tokens/component/global-banner-tokens.d.ts +8 -0
  55. package/dist/themes/tokens/component/global-header-tokens.d.ts +8 -0
  56. package/dist/themes/tokens/component/heading-tokens.d.ts +8 -0
  57. package/dist/themes/tokens/component/label-tokens.d.ts +8 -0
  58. package/dist/themes/tokens/component/legend-tokens.d.ts +8 -0
  59. package/dist/themes/tokens/component/lozenge-tokens.d.ts +8 -0
  60. package/dist/themes/tokens/component/modal-tokens.d.ts +8 -0
  61. package/dist/themes/tokens/component/nav-list-item-tokens.d.ts +8 -0
  62. package/dist/themes/tokens/component/nav-list-tokens.d.ts +8 -0
  63. package/dist/themes/tokens/component/pagination-tokens.d.ts +8 -0
  64. package/dist/themes/tokens/component/progress-circle-tokens.d.ts +8 -0
  65. package/dist/themes/tokens/component/progress-indicator-tokens.d.ts +8 -0
  66. package/dist/themes/tokens/component/progress-tracker-tokens.d.ts +8 -0
  67. package/dist/themes/tokens/component/route-link-tokens.d.ts +8 -0
  68. package/dist/themes/tokens/component/sectional-banner-tokens.d.ts +8 -0
  69. package/dist/themes/tokens/component/side-drawer-tokens.d.ts +8 -0
  70. package/dist/themes/tokens/component/skip-link-tokens.d.ts +8 -0
  71. package/dist/themes/tokens/component/sort-button-icon-tokens.d.ts +8 -0
  72. package/dist/themes/tokens/component/spinner-tokens.d.ts +8 -0
  73. package/dist/themes/tokens/component/status-tokens.d.ts +8 -0
  74. package/dist/themes/tokens/component/tab-tokens.d.ts +8 -0
  75. package/dist/themes/tokens/component/table-tokens.d.ts +8 -0
  76. package/dist/themes/tokens/component/tag-tokens.d.ts +8 -0
  77. package/dist/themes/tokens/component/toast-container-tokens.d.ts +8 -0
  78. package/dist/themes/tokens/component/toggletip-tokens.d.ts +8 -0
  79. package/dist/themes/tokens/component/tooltip-tokens.d.ts +8 -0
  80. package/dist/themes/tokens/component-tokens.d.ts +49 -0
  81. package/dist/themes/tokens/index.d.ts +3 -0
  82. package/dist/themes/tokens/legacy-tokens.d.ts +5 -0
  83. package/dist/themes/tokens/ref/color-utility-tokens.d.ts +6 -0
  84. package/dist/themes/tokens/ref/palette-tokens.d.ts +6 -0
  85. package/dist/themes/tokens/ref/text-attributes-tokens.d.ts +6 -0
  86. package/dist/themes/tokens/ref-tokens.d.ts +9 -0
  87. package/dist/utility-types.d.ts +1 -0
  88. package/dist/utils/array.d.ts +13 -2
  89. package/dist/utils/css-state.d.ts +4 -4
  90. package/dist/utils/dom.d.ts +1 -0
  91. package/dist/utils/dom.test.d.ts +1 -0
  92. package/dist/utils/string.d.ts +1 -0
  93. package/package.json +9 -10
  94. package/dist/components/option-button/option-button.d.ts +0 -10
  95. package/dist/components/table/sortable-column-heading.d.ts +0 -7
  96. package/dist/themes/greys.d.ts +0 -2
  97. package/dist/themes/main.d.ts +0 -2
  98. package/dist/themes/notifications.d.ts +0 -2
  99. package/dist/themes/test-theme.d.ts +0 -2
  100. package/dist/themes/tokens.d.ts +0 -2
  101. /package/dist/components/{circle → progress-circle}/circle.d.ts +0 -0
  102. /package/dist/components/{bar → progress-indicator}/bar.d.ts +0 -0
  103. /package/dist/{tokens → legacy-constants}/breakpoints.d.ts +0 -0
  104. /package/dist/{tokens → legacy-constants}/menuDimensions.d.ts +0 -0
@@ -4,18 +4,18 @@ object-assign
4
4
  @license MIT
5
5
  */
6
6
 
7
- /*!
8
- Copyright (c) 2018 Jed Watson.
9
- Licensed under the MIT License (MIT), see
10
- http://jedwatson.github.io/classnames
11
- */
12
-
13
7
  /*!
14
8
  Copyright (c) 2015 Jed Watson.
15
9
  Based on code that is Copyright 2013-2015, Facebook, Inc.
16
10
  All rights reserved.
17
11
  */
18
12
 
13
+ /*!
14
+ react-datepicker v6.6.0
15
+ https://github.com/Hacker0x01/react-datepicker
16
+ Released under the MIT License.
17
+ */
18
+
19
19
  /*!
20
20
  * Adapted from jQuery UI core
21
21
  *
@@ -28,6 +28,33 @@ object-assign
28
28
  * http://api.jqueryui.com/category/ui-core/
29
29
  */
30
30
 
31
+ /*!
32
+ * tabbable 6.2.0
33
+ * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
34
+ */
35
+
36
+ /**
37
+ * react-table
38
+ *
39
+ * Copyright (c) TanStack
40
+ *
41
+ * This source code is licensed under the MIT license found in the
42
+ * LICENSE.md file in the root directory of this source tree.
43
+ *
44
+ * @license MIT
45
+ */
46
+
47
+ /**
48
+ * table-core
49
+ *
50
+ * Copyright (c) TanStack
51
+ *
52
+ * This source code is licensed under the MIT license found in the
53
+ * LICENSE.md file in the root directory of this source tree.
54
+ *
55
+ * @license MIT
56
+ */
57
+
31
58
  /** @license React v17.0.2
32
59
  * react-dom-server.browser.production.min.js
33
60
  *
@@ -14,6 +14,7 @@ interface AccordionProps {
14
14
  id?: string;
15
15
  items: ItemsProps[];
16
16
  mode?: 'single' | 'multi';
17
+ onToggle?: (itemId: string, expanded: boolean) => void;
17
18
  }
18
19
  export declare const StyledAccordionGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
19
20
  export declare const Accordion: React.FC<AccordionProps>;
@@ -1,12 +1,14 @@
1
1
  import { ButtonHTMLAttributes } from 'react';
2
2
  import { FlattenInterpolation, ThemeProps } from 'styled-components';
3
- import { Theme } from '../../themes';
3
+ import { ResolvedTheme } from '../../themes/theme';
4
4
  type Size = 'small' | 'medium';
5
5
  export declare const defaultButtonStyles: FlattenInterpolation<import("styled-components").ThemedStyledProps<{
6
+ $focusable?: boolean | undefined;
6
7
  isMobile: boolean;
7
8
  size?: Size | undefined;
8
9
  }, import("styled-components").DefaultTheme>>;
9
10
  interface AbstractButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
11
+ focusable?: boolean;
10
12
  isMobile: boolean;
11
13
  size?: Size;
12
14
  }
@@ -16,8 +18,9 @@ export declare const AbstractButton: import("react").ForwardRefExoticComponent<A
16
18
  export type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'destructive' | 'destructive-secondary';
17
19
  export interface ButtonTypeStyles {
18
20
  buttonType: ButtonType;
21
+ focusable?: boolean;
19
22
  inverted?: boolean;
20
- theme: Theme;
23
+ theme: ResolvedTheme;
21
24
  }
22
- export declare const getButtonTypeStyles: (props: ButtonTypeStyles) => FlattenInterpolation<ThemeProps<Theme>>;
25
+ export declare const getButtonTypeStyles: (props: ButtonTypeStyles) => FlattenInterpolation<ThemeProps<ResolvedTheme>>;
23
26
  export {};
@@ -12,6 +12,10 @@ interface ButtonProps {
12
12
  buttonType: ButtonType;
13
13
  className?: string;
14
14
  disabled?: boolean;
15
+ /**
16
+ * @default true
17
+ */
18
+ focusable?: boolean;
15
19
  inverted?: boolean;
16
20
  label?: string;
17
21
  /**
@@ -14,6 +14,10 @@ export interface IconButtonProps {
14
14
  buttonType: ButtonType;
15
15
  className?: string;
16
16
  disabled?: boolean;
17
+ /**
18
+ * @default true
19
+ */
20
+ focusable?: boolean;
17
21
  inverted?: boolean;
18
22
  /**
19
23
  * Name of the desired icon (refer to icon library)
@@ -0,0 +1,64 @@
1
+ import { VoidFunctionComponent } from 'react';
2
+ import { ListboxOption } from '../listbox/listbox';
3
+ import { TooltipProps } from '../tooltip/tooltip';
4
+ export interface ComboboxOption extends Omit<ListboxOption, 'label'> {
5
+ }
6
+ type AutoCompleteMode = 'none' | 'inline' | 'list' | 'both';
7
+ interface ComboboxProps {
8
+ /**
9
+ * Aria label for the input (used when no visual label is present)
10
+ */
11
+ ariaLabel?: string;
12
+ /**
13
+ * Sets the autocomplete mode.
14
+ * - 'none': disables autocomplete, the component behaves like a normal textbox with list of suggestions
15
+ * - 'inline': autocompletes the text input
16
+ * - 'list': shows and filters the listbox options when text is entered
17
+ * - 'both': enables both inline and list autocompletion
18
+ * @default 'none'
19
+ */
20
+ autoComplete?: AutoCompleteMode;
21
+ className?: string;
22
+ /**
23
+ * @default false
24
+ */
25
+ defaultOpen?: boolean;
26
+ /**
27
+ * The default value (and selected option when autoComplete is 'list' or 'both')
28
+ */
29
+ defaultValue?: string;
30
+ /**
31
+ * Disables the input
32
+ */
33
+ disabled?: boolean;
34
+ /**
35
+ * Disables the default margin
36
+ * */
37
+ noMargin?: boolean;
38
+ id?: string;
39
+ label?: string;
40
+ name?: string;
41
+ options: ComboboxOption[];
42
+ required?: boolean;
43
+ tooltip?: TooltipProps;
44
+ /**
45
+ * Sets input validity
46
+ */
47
+ valid?: boolean;
48
+ /**
49
+ * Sets error message
50
+ * @default You must select an option
51
+ */
52
+ validationErrorMessage?: string;
53
+ /**
54
+ * Sets the selected value (makes the component controlled)
55
+ */
56
+ value?: string;
57
+ hint?: string;
58
+ /**
59
+ * OnChange callback function, invoked when the value is changed
60
+ */
61
+ onChange?(value: string): void;
62
+ }
63
+ export declare const Combobox: VoidFunctionComponent<ComboboxProps>;
64
+ export {};
@@ -1,5 +1,5 @@
1
1
  import { FunctionComponent, PropsWithChildren } from 'react';
2
- import { Breakpoints } from '../../tokens/breakpoints';
2
+ import { Breakpoints } from '../../legacy-constants/breakpoints';
3
3
  export type DeviceType = 'desktop' | 'tablet' | 'mobile';
4
4
  export interface DeviceContextProviderProps {
5
5
  staticDevice?: DeviceType;
@@ -4,7 +4,7 @@ import { TooltipProps } from '../tooltip/tooltip';
4
4
  export interface DropdownListOption extends ListboxOption {
5
5
  label: string;
6
6
  }
7
- interface DropdownListProps {
7
+ export interface DropdownListProps {
8
8
  /**
9
9
  * Aria label for the input (used when no visual label is present)
10
10
  */
@@ -27,9 +27,6 @@ interface DropdownListProps {
27
27
  id?: string;
28
28
  label?: string;
29
29
  name?: string;
30
- /**
31
- * { disabled?: boolean, value: string; label: string; }[]
32
- */
33
30
  options: DropdownListOption[];
34
31
  required?: boolean;
35
32
  tooltip?: TooltipProps;
@@ -53,4 +50,3 @@ interface DropdownListProps {
53
50
  onChange?(option: DropdownListOption): void;
54
51
  }
55
52
  export declare const DropdownList: VoidFunctionComponent<DropdownListProps>;
56
- export {};
@@ -10,6 +10,7 @@ export interface NavItemProps {
10
10
  label?: string;
11
11
  lozenge?: string;
12
12
  end?: boolean;
13
+ isExternalLink?: boolean;
13
14
  isHtmlLink?: boolean;
14
15
  disabled?: boolean;
15
16
  target?: string;
@@ -23,5 +24,6 @@ interface LinkProps {
23
24
  }
24
25
  export declare const StyledNavItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<NavLinkProps & import("react").RefAttributes<HTMLAnchorElement>>, import("styled-components").DefaultTheme, LinkProps & NavLinkProps, never>;
25
26
  export declare const HtmlLink: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, LinkProps, never>;
27
+ export declare const StyledExternalLink: import("styled-components").StyledComponent<import("react").VoidFunctionComponent<import("../../external-link/external-link").ExternalLinkProps>, import("styled-components").DefaultTheme, LinkProps, never>;
26
28
  export declare const NavItem: import("react").ForwardRefExoticComponent<NavItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
27
29
  export {};
@@ -1,4 +1,4 @@
1
- import { VoidFunctionComponent } from 'react';
1
+ import { MouseEvent, VoidFunctionComponent } from 'react';
2
2
  import { IconName } from '../icon/icon';
3
3
  export interface ExternalLinkProps {
4
4
  className?: string;
@@ -7,6 +7,6 @@ export interface ExternalLinkProps {
7
7
  iconName?: IconName;
8
8
  label?: string;
9
9
  target?: string;
10
- onClick?(): void;
10
+ onClick?(event: MouseEvent<Element, globalThis.MouseEvent>): void;
11
11
  }
12
12
  export declare const ExternalLink: VoidFunctionComponent<ExternalLinkProps>;
@@ -1,10 +1,10 @@
1
1
  import { MouseEvent, ReactNode } from 'react';
2
- export type GlobalBannerType = 'alert' | 'warning' | 'info' | 'default';
2
+ export type GlobalBannerType = 'neutral' | 'discovery' | 'warning' | 'alert';
3
3
  export interface ActionButton {
4
4
  label: string;
5
5
  onClick(event: MouseEvent<HTMLButtonElement>): void;
6
6
  }
7
- interface Props {
7
+ interface GlobalBannerProps {
8
8
  actionButton?: ActionButton;
9
9
  secondaryActionButton?: ActionButton;
10
10
  className?: string;
@@ -18,5 +18,5 @@ interface Props {
18
18
  onDismiss?(): void;
19
19
  type?: GlobalBannerType;
20
20
  }
21
- export declare const GlobalBanner: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLElement>>;
21
+ export declare const GlobalBanner: import("react").ForwardRefExoticComponent<GlobalBannerProps & import("react").RefAttributes<HTMLElement>>;
22
22
  export {};
@@ -9,9 +9,6 @@ export interface ListboxOption {
9
9
  interface ListboxProps {
10
10
  ariaLabelledBy?: string;
11
11
  id?: string;
12
- /**
13
- * { value: string; label?: string; caption?: string; disabled?: boolean }[]
14
- */
15
12
  options: ListboxOption[];
16
13
  className?: string;
17
14
  /**
@@ -1,10 +1,11 @@
1
1
  import { FunctionComponent, PropsWithChildren } from 'react';
2
2
  import { IconName } from '../icon/icon';
3
- export type LozengeType = 'default' | 'success' | 'alert' | 'warning' | 'info' | 'disabled';
3
+ export type LozengeVariant = 'neutral' | 'success' | 'alert' | 'warning' | 'info' | 'discovery';
4
4
  interface Props {
5
5
  className?: string;
6
- type?: LozengeType;
6
+ variant?: LozengeVariant;
7
7
  icon?: IconName;
8
+ subtle?: boolean;
8
9
  }
9
10
  export declare const Lozenge: FunctionComponent<PropsWithChildren<Props>>;
10
11
  export {};
@@ -4,6 +4,7 @@ export interface MenuOption {
4
4
  label: string;
5
5
  iconName?: IconName;
6
6
  options?: MenuItem[];
7
+ disabled?: boolean;
7
8
  onClick?(): void;
8
9
  }
9
10
  export interface MenuGroup {
@@ -2,10 +2,9 @@ import { VoidFunctionComponent } from 'react';
2
2
  interface PaginationProps {
3
3
  className?: string;
4
4
  /**
5
- * Total number of pages
6
- * @default desktop
5
+ * Number of results to display per page
7
6
  */
8
- totalPages: number;
7
+ resultsPerPage: number;
9
8
  /**
10
9
  * Displays the total number of results when provided
11
10
  */
@@ -1,11 +1,16 @@
1
1
  import { VoidFunctionComponent } from 'react';
2
- export interface ProgressTracker {
3
- label?: string;
2
+ export interface ProgressTrackerStep {
3
+ href?: string;
4
+ label: string;
5
+ completion?: 'completed' | 'uncompleted';
6
+ onClick?: (stepNumber: number) => void;
4
7
  }
5
- interface ProgressProps {
8
+ interface ProgressTrackerProps {
9
+ ariaLabel?: string;
6
10
  className?: string;
7
- steps: ProgressTracker[];
11
+ linear?: boolean;
12
+ steps: ProgressTrackerStep[];
8
13
  value: number;
9
14
  }
10
- export declare const Progress: VoidFunctionComponent<ProgressProps>;
15
+ export declare const ProgressTracker: VoidFunctionComponent<ProgressTrackerProps>;
11
16
  export {};
@@ -1,15 +1,15 @@
1
- import { Theme } from '../../themes';
1
+ import { ResolvedTheme } from '../../themes/theme';
2
2
  interface DescriptionProps {
3
3
  disabled?: boolean;
4
4
  isMobile: boolean;
5
5
  isChecked?: boolean;
6
- theme: Theme;
6
+ theme: ResolvedTheme;
7
7
  }
8
8
  interface CardProps {
9
9
  disabled?: boolean;
10
10
  isMobile: boolean;
11
11
  isChecked?: boolean;
12
- theme: Theme;
12
+ theme: ResolvedTheme;
13
13
  }
14
14
  export declare const RadioInput: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, CardProps, never>;
15
15
  export declare const Legend: import("styled-components").StyledComponent<"legend", import("styled-components").DefaultTheme, {
@@ -1,6 +1,7 @@
1
1
  import { FunctionComponent, PropsWithChildren } from 'react';
2
2
  export type SortState = 'ascending' | 'descending' | 'none';
3
3
  export interface SortButtonIconProps {
4
+ className?: string;
4
5
  sort: SortState;
5
6
  }
6
7
  export declare const SortButtonIcon: FunctionComponent<PropsWithChildren<SortButtonIconProps>>;
@@ -0,0 +1,8 @@
1
+ import { ReactElement } from 'react';
2
+ import { HeaderGroup } from '@tanstack/react-table';
3
+ interface TableFooterProps<T extends object> {
4
+ footerGroup: HeaderGroup<T>;
5
+ sticky: boolean;
6
+ }
7
+ export declare const TableFooter: <T extends object>({ footerGroup, sticky, }: TableFooterProps<T>) => ReactElement;
8
+ export {};
@@ -0,0 +1,8 @@
1
+ import { ReactElement } from 'react';
2
+ import { HeaderGroup } from '@tanstack/react-table';
3
+ interface TableHeaderProps<T extends object> {
4
+ headerGroup: HeaderGroup<T>;
5
+ sticky: boolean;
6
+ }
7
+ export declare const TableHeader: <T extends object>({ headerGroup, sticky, }: TableHeaderProps<T>) => ReactElement;
8
+ export {};
@@ -1,15 +1,10 @@
1
1
  import { ReactElement } from 'react';
2
- import { Row } from 'react-table';
3
- interface StyledTableRowProps {
4
- clickable: boolean;
5
- error: boolean;
6
- selected: boolean;
7
- striped?: boolean;
8
- }
9
- interface TableRowProps<T extends object> extends Omit<StyledTableRowProps, 'clickable' | 'selected'> {
2
+ import { Row } from '@tanstack/react-table';
3
+ interface TableRowProps<T extends object> {
10
4
  row: Row<T>;
11
- viewIndex: number;
5
+ striped: boolean;
6
+ error: boolean;
12
7
  onClick?(row: Row<T>): void;
13
8
  }
14
- export declare const TableRow: <T extends object>({ error, onClick, row, striped, viewIndex, }: TableRowProps<T>) => ReactElement;
9
+ export declare const TableRow: <T extends object>({ error, onClick, row, striped, }: TableRowProps<T>) => ReactElement;
15
10
  export {};
@@ -1,29 +1,15 @@
1
1
  import { ReactElement } from 'react';
2
- import { Column, Row, UseSortByColumnOptions } from 'react-table';
2
+ import { Row, ColumnSort } from '@tanstack/react-table';
3
+ import { CustomColumnDef } from './types';
3
4
  type RowSize = 'small' | 'medium';
4
- type ColumnSort = 'asc' | 'desc';
5
- type CustomColumn<T extends object> = Column<T> & UseSortByColumnOptions<T> & {
6
- defaultSort?: ColumnSort;
7
- sortable?: boolean;
8
- textAlign?: string;
9
- className?: string;
10
- sticky?: boolean;
11
- footerColSpan?: number;
12
- };
13
- export type TableColumn<T extends object> = CustomColumn<T>[];
5
+ export type TableColumn<T extends object> = CustomColumnDef<T>[];
14
6
  export type TableRow<T> = T & {
15
7
  error?: boolean;
16
8
  };
17
- interface CustomRowProps {
18
- error?: boolean;
19
- }
20
9
  export interface TableProps<T extends object> {
21
- className?: string;
22
- footerColSpan?: number | undefined;
23
- columns: TableColumn<T>;
24
- /** Array of Objects that defines your table data.
25
- * See stories code or refer to react-table docs for more information */
26
- data: (T & CustomRowProps)[];
10
+ data: T[];
11
+ defaultSort?: ColumnSort;
12
+ columns: CustomColumnDef<T>[];
27
13
  /**
28
14
  * Adds row numbers
29
15
  * @default false
@@ -40,10 +26,13 @@ export interface TableProps<T extends object> {
40
26
  * @default false
41
27
  */
42
28
  striped?: boolean;
29
+ className?: string;
43
30
  stickyHeader?: boolean;
44
31
  stickyFooter?: boolean;
32
+ manualSort?: boolean;
45
33
  onRowClick?(row: Row<T>): void;
46
34
  onSelectedRowsChange?(selectedRows: T[]): void;
35
+ onSort?(sort: ColumnSort | null): void;
47
36
  }
48
- export declare const Table: <T extends object>({ className, columns, data, rowNumbers, rowSize, selectableRows, striped, onRowClick, onSelectedRowsChange, stickyHeader, stickyFooter, }: TableProps<T>) => ReactElement;
37
+ 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;
49
38
  export {};
@@ -0,0 +1,12 @@
1
+ import { ColumnDef, RowData } from '@tanstack/react-table';
2
+ import { CSSProperties } from 'react';
3
+ export type CustomColumnDef<TData extends RowData, TValue = unknown> = ColumnDef<TData, TValue> & {
4
+ className?: string;
5
+ footerColSpan?: number;
6
+ headerAriaLabel?: string;
7
+ headerColSpan?: number;
8
+ iconAlign?: 'left' | 'right';
9
+ sortable?: boolean;
10
+ sticky?: boolean;
11
+ textAlign?: CSSProperties['textAlign'];
12
+ };
@@ -1,9 +1,9 @@
1
1
  import { FlattenSimpleInterpolation } from 'styled-components';
2
- import { Theme } from '../../../themes';
2
+ import { ResolvedTheme } from '../../../themes/theme';
3
3
  import { DeviceContextProps } from '../../device-context-provider/device-context-provider';
4
- export declare const inputsStyle: (theme: Theme, isMobile?: boolean) => FlattenSimpleInterpolation;
4
+ export declare const inputsStyle: (theme: ResolvedTheme, isMobile?: boolean) => FlattenSimpleInterpolation;
5
5
  interface ResponsiveInputsStyles {
6
- theme: Theme;
6
+ theme: ResolvedTheme;
7
7
  device: DeviceContextProps;
8
8
  }
9
9
  export declare const responsiveInputsStyle: ({ theme, device: { isMobile } }: ResponsiveInputsStyles) => FlattenSimpleInterpolation;
@@ -1,12 +1,12 @@
1
1
  import { FunctionComponent, PropsWithChildren } from 'react';
2
- import { Theme } from '../../themes';
2
+ import { ThemeCustomization } from '../../themes/theme';
3
3
  export interface ThemeWrapperProps {
4
4
  /**
5
5
  * When true, components are mounted in the Shadow DOM
6
6
  * @default false
7
7
  */
8
8
  isolateStyles?: boolean;
9
- theme?: Theme;
9
+ theme?: ThemeCustomization;
10
10
  }
11
11
  /**
12
12
  * @deprecated Use {@link DesignSystem} instead
@@ -4,7 +4,7 @@ import { ToastType } from './toast-type';
4
4
  interface ToastContainerProps {
5
5
  id: string;
6
6
  className?: string;
7
- type: ToastType;
7
+ type?: ToastType;
8
8
  message: string;
9
9
  position: ToastPosition;
10
10
  }
@@ -1,7 +1,8 @@
1
1
  export declare enum ToastTypeEnum {
2
- INFORMATION = "information",
2
+ NEUTRAL = "neutral",
3
+ DISCOVERY = "discovery",
3
4
  SUCCESS = "success",
4
5
  WARNING = "warning",
5
- ERROR = "error"
6
+ ALERT = "alert"
6
7
  }
7
8
  export type ToastType = `${ToastTypeEnum}`;
@@ -1,2 +1,2 @@
1
1
  import { MutableRefObject } from 'react';
2
- export declare function useClickOutside<T extends HTMLElement>(targets: MutableRefObject<T | null>[], callback: () => void): void;
2
+ export declare function useClickOutside(targets: MutableRefObject<HTMLElement | null>[], callback: () => void): void;
@@ -10,6 +10,7 @@ interface UseListCursorRequest<T> {
10
10
  elements: T[];
11
11
  initialElement?: T;
12
12
  predicate?: (element: T) => boolean;
13
+ wrapAround?: boolean;
13
14
  }
14
- export declare function useListCursor<TElement>({ elements, initialElement, predicate, }: UseListCursorRequest<TElement>): UseListCursorResponse<TElement>;
15
+ export declare function useListCursor<TElement>({ elements, initialElement, predicate, wrapAround, }: UseListCursorRequest<TElement>): UseListCursorResponse<TElement>;
15
16
  export {};
@@ -1,2 +1,2 @@
1
- import { Theme } from '../themes';
2
- export declare function useTheme(): Theme;
1
+ import { ResolvedTheme } from '../themes/theme';
2
+ export declare function useTheme(): ResolvedTheme;
@@ -7,6 +7,9 @@ export declare const Translations: {
7
7
  productsLabel: string;
8
8
  externalsLabel: string;
9
9
  };
10
+ combobox: {
11
+ showOptions: string;
12
+ };
10
13
  common: {
11
14
  opensInNewTab: string;
12
15
  opensInNewTabScreenReader: string;
@@ -77,6 +80,10 @@ export declare const Translations: {
77
80
  'show-password': string;
78
81
  'hide-password': string;
79
82
  };
83
+ 'progress-tracker': {
84
+ completedAriaLabel: string;
85
+ uncompletedAriaLabel: string;
86
+ };
80
87
  'search-input': {
81
88
  label: string;
82
89
  };
@@ -127,6 +134,9 @@ export declare const Translations: {
127
134
  productsLabel: string;
128
135
  externalsLabel: string;
129
136
  };
137
+ combobox: {
138
+ showOptions: string;
139
+ };
130
140
  common: {
131
141
  opensInNewTab: string;
132
142
  opensInNewTabScreenReader: string;
@@ -197,6 +207,10 @@ export declare const Translations: {
197
207
  'show-password': string;
198
208
  'hide-password': string;
199
209
  };
210
+ 'progress-tracker': {
211
+ completedAriaLabel: string;
212
+ uncompletedAriaLabel: string;
213
+ };
200
214
  'search-input': {
201
215
  label: string;
202
216
  };
package/dist/index.d.ts CHANGED
@@ -8,11 +8,11 @@ export { ToggleButtonGroup } from './components/toggle-button-group/toggle-butto
8
8
  export { Avatar } from './components/avatar/avatar';
9
9
  export { Checkbox } from './components/checkbox/checkbox';
10
10
  export { CheckboxGroup } from './components/checkbox-group/checkbox-group';
11
+ export { Combobox, ComboboxOption } from './components/combobox/combobox';
11
12
  export { Datepicker, DatepickerHandles } from './components/date-picker/date-picker';
12
13
  export { DropdownList, DropdownListOption } from './components/dropdown-list/dropdown-list';
13
14
  export { MoneyInput } from './components/money-input/money-input';
14
15
  export { NumericInput } from './components/numeric-input/numeric-input';
15
- export { OptionButton } from './components/option-button/option-button';
16
16
  export { PasswordCreationInput } from './components/password-creation-input/password-creation-input';
17
17
  export { PasswordInput } from './components/password-input/password-input';
18
18
  export { PhoneInput } from './components/phone-input/phone-input';
@@ -49,7 +49,7 @@ export { SideDrawer } from './components/side-drawer/side-drawer';
49
49
  export { GlobalBanner, GlobalBannerType } from './components/global-banner/global-banner';
50
50
  export * from './components/tooltip/tooltip';
51
51
  export * from './components/toggletip/toggletip';
52
- export * from './components/table/table';
52
+ export { Table, TableColumn, TableRow } from './components/table/table';
53
53
  export { Modal } from './components/modal/modal';
54
54
  export { ModalDialog } from './components/modal/modal-dialog';
55
55
  export { Tag, TagProps, TagValue } from './components/tag/tag';
@@ -71,8 +71,7 @@ export { ProgressIndicator } from './components/progress-indicator/progress-indi
71
71
  export { ProgressCircle } from './components/progress-circle/progress-circle';
72
72
  export { Pagination } from './components/pagination/pagination';
73
73
  export { equisoftTheme } from './themes/equisoft';
74
- export { testTheme } from './themes/test-theme';
75
74
  export { injectMainCss } from './styles';
76
- export { Theme } from './themes/theme';
75
+ export { ResolvedTheme, ThemeCustomization, ThemeCustomization as Theme } from './themes/theme';
77
76
  export { useTheme } from './hooks/use-theme';
78
77
  export * from './components/design-system';
package/dist/theme.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  export { equisoftTheme } from './themes/equisoft';
2
- export { Theme } from './themes/theme';
2
+ export { ResolvedTheme } from './themes/theme';