@equisoft/design-elements-react 6.3.0 → 6.3.1-snapshot.20240528134705
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.
- package/dist/bundle.js +1272 -1182
- package/dist/bundle.js.LICENSE.txt +33 -6
- package/dist/components/accordion/accordion.d.ts +1 -0
- package/dist/components/buttons/abstract-button.d.ts +7 -4
- package/dist/components/buttons/button.d.ts +13 -5
- package/dist/components/buttons/icon-button.d.ts +3 -28
- package/dist/components/checkbox/checkbox.d.ts +2 -3
- package/dist/components/combobox/combobox.d.ts +74 -0
- package/dist/components/date-picker/utils/datepicker-utils.d.ts +5 -0
- package/dist/components/device-context-provider/device-context-provider.d.ts +1 -1
- package/dist/components/dropdown-list/dropdown-list.d.ts +5 -3
- package/dist/components/dropdown-menu/list-items/nav-item.d.ts +2 -0
- package/dist/components/external-link/external-link.d.ts +2 -2
- package/dist/components/global-banner/global-banner.d.ts +4 -3
- package/dist/components/listbox/listbox.d.ts +0 -3
- package/dist/components/lozenge/lozenge.d.ts +3 -2
- package/dist/components/menu/menu.d.ts +1 -0
- package/dist/components/pagination/pagination.d.ts +2 -3
- package/dist/components/password-creation-input/password-creation-input.d.ts +0 -4
- package/dist/components/password-input/password-input.d.ts +1 -0
- package/dist/components/progress-tracker/progress-tracker.d.ts +10 -5
- package/dist/components/radio-card-group/styled-components.d.ts +3 -3
- package/dist/components/table/sort-button-icon.d.ts +1 -0
- package/dist/components/table/table-footer.d.ts +8 -0
- package/dist/components/table/table-header.d.ts +8 -0
- package/dist/components/table/table-row.d.ts +10 -8
- package/dist/components/table/table.d.ts +10 -24
- package/dist/components/table/types.d.ts +17 -0
- package/dist/components/table/utils/table-utils.d.ts +3 -0
- package/dist/components/tabs/tab-button.d.ts +2 -1
- package/dist/components/tabs/tab-panel.d.ts +1 -1
- package/dist/components/tabs/tabs.d.ts +2 -2
- package/dist/components/tag/tag.d.ts +5 -7
- package/dist/components/tag/toggle-tag.d.ts +20 -0
- package/dist/components/text-input/styles/inputs.d.ts +9 -3
- package/dist/components/text-input/text-input.d.ts +3 -0
- package/dist/components/theme-wrapper/theme-wrapper.d.ts +2 -2
- package/dist/components/toast/toast-container.d.ts +1 -1
- package/dist/components/toast/toast-type.d.ts +3 -2
- package/dist/components/toggle-button-group/toggle-button-group.d.ts +1 -0
- package/dist/hooks/use-click-outside.d.ts +1 -1
- package/dist/hooks/use-list-cursor.d.ts +2 -1
- package/dist/hooks/use-scrollable.d.ts +19 -0
- package/dist/hooks/use-theme.d.ts +2 -2
- package/dist/i18n/translations.d.ts +38 -0
- package/dist/index.d.ts +12 -8
- package/dist/theme.d.ts +1 -1
- package/dist/theme.js +1 -1
- package/dist/themes/build-theme.d.ts +2 -0
- package/dist/themes/build-theme.test.d.ts +1 -0
- package/dist/themes/equisoft.d.ts +1 -2
- package/dist/themes/index.d.ts +2 -1
- package/dist/themes/theme.d.ts +10 -45
- package/dist/themes/tokens/alias-tokens.d.ts +44 -0
- package/dist/themes/tokens/component/accordion-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/avatar-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/badge-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/bento-menu-button-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/button-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/card-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/carousel-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/checkbox-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/chooser-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/combobox-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/datepicker-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/dropdown-list-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/dropdown-menu-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/field-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/focus-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/global-banner-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/global-header-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/global-navigation-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/heading-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/label-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/legend-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/link-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/listbox-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/lozenge-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/menu-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/modal-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/nav-list-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/numeric-input-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/pagination-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/password-input-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/phone-input-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/progress-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/radio-button-group-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/radio-card-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/search-input-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/sectional-banner-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/side-drawer-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/spinner-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/status-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/stepper-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/tab-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/table-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/tag-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/text-area-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/text-input-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/toast-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/toggle-button-group-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/toggle-switch-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/toggletip-tokens.d.ts +8 -0
- package/dist/themes/tokens/component/tooltip-tokens.d.ts +8 -0
- package/dist/themes/tokens/component-tokens.d.ts +63 -0
- package/dist/themes/tokens/index.d.ts +3 -0
- package/dist/themes/tokens/ref/color-utility-tokens.d.ts +6 -0
- package/dist/themes/tokens/ref/palette-tokens.d.ts +6 -0
- package/dist/themes/tokens/ref/text-attributes-tokens.d.ts +6 -0
- package/dist/themes/tokens/ref-tokens.d.ts +10 -0
- package/dist/utility-types.d.ts +1 -0
- package/dist/utils/array.d.ts +13 -2
- package/dist/utils/css-state.d.ts +12 -7
- package/dist/utils/dev-console.d.ts +3 -0
- package/dist/utils/dom.d.ts +1 -0
- package/dist/utils/dom.test.d.ts +1 -0
- package/dist/utils/string.d.ts +1 -0
- package/package.json +30 -31
- package/dist/components/option-button/option-button.d.ts +0 -10
- package/dist/components/table/sortable-column-heading.d.ts +0 -7
- package/dist/themes/greys.d.ts +0 -2
- package/dist/themes/main.d.ts +0 -2
- package/dist/themes/notifications.d.ts +0 -2
- package/dist/themes/test-theme.d.ts +0 -2
- package/dist/themes/tokens.d.ts +0 -2
- /package/dist/components/{circle → progress-circle}/circle.d.ts +0 -0
- /package/dist/components/{bar → progress-indicator}/bar.d.ts +0 -0
- /package/dist/{tokens → legacy-constants}/breakpoints.d.ts +0 -0
- /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.9.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,23 +1,26 @@
|
|
|
1
1
|
import { ButtonHTMLAttributes } from 'react';
|
|
2
2
|
import { FlattenInterpolation, ThemeProps } from 'styled-components';
|
|
3
|
-
import {
|
|
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
|
}
|
|
13
15
|
export declare const AbstractButton: import("react").ForwardRefExoticComponent<AbstractButtonProps & {
|
|
14
16
|
children?: import("react").ReactNode;
|
|
15
17
|
} & import("react").RefAttributes<HTMLButtonElement>>;
|
|
16
|
-
export type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'destructive' | 'destructive-secondary';
|
|
18
|
+
export type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'destructive-primary' | 'destructive-secondary' | 'destructive-tertiary';
|
|
17
19
|
export interface ButtonTypeStyles {
|
|
18
20
|
buttonType: ButtonType;
|
|
21
|
+
focusable?: boolean;
|
|
19
22
|
inverted?: boolean;
|
|
20
|
-
theme:
|
|
23
|
+
theme: ResolvedTheme;
|
|
21
24
|
}
|
|
22
|
-
export declare const getButtonTypeStyles: (props: ButtonTypeStyles) => FlattenInterpolation<ThemeProps<
|
|
25
|
+
export declare const getButtonTypeStyles: (props: ButtonTypeStyles) => FlattenInterpolation<ThemeProps<ResolvedTheme>>;
|
|
23
26
|
export {};
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import { KeyboardEvent, MouseEvent } from 'react';
|
|
1
|
+
import { FocusEventHandler, KeyboardEvent, MouseEvent } from 'react';
|
|
2
|
+
import { IconName } from '../icon/icon';
|
|
2
3
|
import { ButtonType } from './abstract-button';
|
|
3
|
-
type Size = 'small' | 'medium';
|
|
4
|
-
type Type = 'submit' | 'button' | 'reset';
|
|
5
|
-
interface ButtonProps {
|
|
4
|
+
export type Size = 'small' | 'medium';
|
|
5
|
+
export type Type = 'submit' | 'button' | 'reset';
|
|
6
|
+
export interface ButtonProps {
|
|
6
7
|
id?: string;
|
|
7
8
|
autofocus?: boolean;
|
|
8
9
|
/**
|
|
@@ -12,6 +13,10 @@ interface ButtonProps {
|
|
|
12
13
|
buttonType: ButtonType;
|
|
13
14
|
className?: string;
|
|
14
15
|
disabled?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* @default true
|
|
18
|
+
*/
|
|
19
|
+
focusable?: boolean;
|
|
15
20
|
inverted?: boolean;
|
|
16
21
|
label?: string;
|
|
17
22
|
/**
|
|
@@ -21,10 +26,13 @@ interface ButtonProps {
|
|
|
21
26
|
size?: Size;
|
|
22
27
|
title?: string;
|
|
23
28
|
type?: Type;
|
|
29
|
+
leftIconName?: IconName;
|
|
30
|
+
rightIconName?: IconName;
|
|
24
31
|
onClick?(event: MouseEvent<HTMLButtonElement>): void;
|
|
32
|
+
onFocus?: FocusEventHandler<HTMLButtonElement>;
|
|
33
|
+
onBlur?: FocusEventHandler<HTMLButtonElement>;
|
|
25
34
|
onKeyDown?(event: KeyboardEvent<HTMLButtonElement>): void;
|
|
26
35
|
}
|
|
27
36
|
export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & {
|
|
28
37
|
children?: import("react").ReactNode;
|
|
29
38
|
} & import("react").RefAttributes<HTMLButtonElement>>;
|
|
30
|
-
export {};
|
|
@@ -1,37 +1,12 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ReactElement } from 'react';
|
|
2
2
|
import { AvatarProps } from '../avatar/avatar';
|
|
3
3
|
import { IconName, IconProps } from '../icon/icon';
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
type Type = 'submit' | 'button' | 'reset';
|
|
7
|
-
export interface IconButtonProps {
|
|
8
|
-
autofocus?: boolean;
|
|
4
|
+
import { ButtonProps } from './button';
|
|
5
|
+
export interface IconButtonProps extends ButtonProps {
|
|
9
6
|
children?: ReactElement<IconProps | AvatarProps>;
|
|
10
|
-
/**
|
|
11
|
-
* Visual style
|
|
12
|
-
* @default primary
|
|
13
|
-
*/
|
|
14
|
-
buttonType: ButtonType;
|
|
15
|
-
className?: string;
|
|
16
|
-
disabled?: boolean;
|
|
17
|
-
inverted?: boolean;
|
|
18
7
|
/**
|
|
19
8
|
* Name of the desired icon (refer to icon library)
|
|
20
9
|
*/
|
|
21
10
|
iconName: IconName;
|
|
22
|
-
/**
|
|
23
|
-
* Sets aria-label
|
|
24
|
-
*/
|
|
25
|
-
label?: string;
|
|
26
|
-
/**
|
|
27
|
-
* Size variant
|
|
28
|
-
* @default medium
|
|
29
|
-
*/
|
|
30
|
-
size?: Size;
|
|
31
|
-
title?: string;
|
|
32
|
-
type?: Type;
|
|
33
|
-
onClick?(event: MouseEvent<HTMLButtonElement>): void;
|
|
34
|
-
onKeyDown?(event: KeyboardEvent<HTMLButtonElement>): void;
|
|
35
11
|
}
|
|
36
12
|
export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
37
|
-
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ChangeEvent, FunctionComponent, PropsWithChildren } from 'react';
|
|
2
|
-
interface
|
|
2
|
+
export interface CheckboxProps {
|
|
3
3
|
checked?: boolean;
|
|
4
4
|
className?: string;
|
|
5
5
|
defaultChecked?: boolean;
|
|
@@ -11,5 +11,4 @@ interface Props {
|
|
|
11
11
|
value?: string;
|
|
12
12
|
onChange?(event: ChangeEvent<HTMLInputElement>): void;
|
|
13
13
|
}
|
|
14
|
-
export declare const Checkbox: FunctionComponent<PropsWithChildren<
|
|
15
|
-
export {};
|
|
14
|
+
export declare const Checkbox: FunctionComponent<PropsWithChildren<CheckboxProps>>;
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { VoidFunctionComponent } from 'react';
|
|
2
|
+
import { ListboxOption } from '../listbox/listbox';
|
|
3
|
+
import { TooltipProps } from '../tooltip/tooltip';
|
|
4
|
+
export type ComboboxOption = ListboxOption;
|
|
5
|
+
interface ComboboxProps {
|
|
6
|
+
/**
|
|
7
|
+
* If true, the input can have a value not included in the list of options
|
|
8
|
+
*/
|
|
9
|
+
allowCustomValue?: boolean;
|
|
10
|
+
/**
|
|
11
|
+
* Aria label for the input (used when no visual label is present)
|
|
12
|
+
*/
|
|
13
|
+
ariaLabel?: string;
|
|
14
|
+
className?: string;
|
|
15
|
+
/**
|
|
16
|
+
* @default false
|
|
17
|
+
*/
|
|
18
|
+
defaultOpen?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* The default value and selected option
|
|
21
|
+
*/
|
|
22
|
+
defaultValue?: string;
|
|
23
|
+
/**
|
|
24
|
+
* Disables the input
|
|
25
|
+
*/
|
|
26
|
+
disabled?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* If true, the options won't be filtered.
|
|
29
|
+
* Use when the list of options is filtered externally.
|
|
30
|
+
* @default false
|
|
31
|
+
*/
|
|
32
|
+
disableListFiltering?: boolean;
|
|
33
|
+
/**
|
|
34
|
+
* Text to display in the listbox when no options match the input value.
|
|
35
|
+
* Used only when a custom value is not allowed.
|
|
36
|
+
*/
|
|
37
|
+
emptyListMessage?: string;
|
|
38
|
+
/**
|
|
39
|
+
* Disables the default margin
|
|
40
|
+
*/
|
|
41
|
+
noMargin?: boolean;
|
|
42
|
+
id?: string;
|
|
43
|
+
/**
|
|
44
|
+
* @default false
|
|
45
|
+
*/
|
|
46
|
+
inlineAutoComplete?: boolean;
|
|
47
|
+
isLoading?: boolean;
|
|
48
|
+
label?: string;
|
|
49
|
+
name?: string;
|
|
50
|
+
options: ComboboxOption[];
|
|
51
|
+
placeholder?: string;
|
|
52
|
+
required?: boolean;
|
|
53
|
+
tooltip?: TooltipProps;
|
|
54
|
+
/**
|
|
55
|
+
* Sets input validity
|
|
56
|
+
*/
|
|
57
|
+
valid?: boolean;
|
|
58
|
+
/**
|
|
59
|
+
* Sets error message
|
|
60
|
+
* @default You must select an option
|
|
61
|
+
*/
|
|
62
|
+
validationErrorMessage?: string;
|
|
63
|
+
/**
|
|
64
|
+
* Sets the selected value (makes the component controlled)
|
|
65
|
+
*/
|
|
66
|
+
value?: string;
|
|
67
|
+
hint?: string;
|
|
68
|
+
/**
|
|
69
|
+
* OnChange callback function, invoked when the value is changed
|
|
70
|
+
*/
|
|
71
|
+
onChange?(value: string): void;
|
|
72
|
+
}
|
|
73
|
+
export declare const Combobox: VoidFunctionComponent<ComboboxProps>;
|
|
74
|
+
export {};
|
|
@@ -9,3 +9,8 @@ export declare function getLocaleDatePlaceholder(locale?: Locale): string;
|
|
|
9
9
|
export declare function getLocaleMonthsOptions(locale: Locale): DropdownListOption[];
|
|
10
10
|
export declare function getYearsOptions(minDate?: Date | null, maxDate?: Date | null): DropdownListOption[];
|
|
11
11
|
export declare function setLocaleFirstDayOfWeek(locale: Locale, dayOfWeek?: DayOfWeek): void;
|
|
12
|
+
/**
|
|
13
|
+
* The version of format as only numbers (ex: "yyyy-MM-dd" would become "yyyyMMdd").
|
|
14
|
+
* Note that Month and Day are always converted to the 2 digits format.
|
|
15
|
+
*/
|
|
16
|
+
export declare function getNumericalDateFormat(dateFormat: string): string | null;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { FunctionComponent, PropsWithChildren } from 'react';
|
|
2
|
-
import { Breakpoints } from '../../
|
|
2
|
+
import { Breakpoints } from '../../legacy-constants/breakpoints';
|
|
3
3
|
export type DeviceType = 'desktop' | 'tablet' | 'mobile';
|
|
4
4
|
export interface DeviceContextProviderProps {
|
|
5
5
|
staticDevice?: DeviceType;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { VoidFunctionComponent } from 'react';
|
|
2
|
+
import { IconName } from '../icon/icon';
|
|
2
3
|
import { ListboxOption } from '../listbox/listbox';
|
|
3
4
|
import { TooltipProps } from '../tooltip/tooltip';
|
|
4
5
|
export interface DropdownListOption extends ListboxOption {
|
|
@@ -32,9 +33,6 @@ export interface DropdownListProps<M extends boolean | undefined> {
|
|
|
32
33
|
id?: string;
|
|
33
34
|
label?: string;
|
|
34
35
|
name?: string;
|
|
35
|
-
/**
|
|
36
|
-
* { disabled?: boolean, value: string; label: string; }[]
|
|
37
|
-
*/
|
|
38
36
|
options: DropdownListOption[];
|
|
39
37
|
required?: boolean;
|
|
40
38
|
tooltip?: TooltipProps;
|
|
@@ -53,6 +51,10 @@ export interface DropdownListProps<M extends boolean | undefined> {
|
|
|
53
51
|
value?: Value;
|
|
54
52
|
hint?: string;
|
|
55
53
|
multiselect?: M;
|
|
54
|
+
/**
|
|
55
|
+
* Display an icon inside the Dropdown control
|
|
56
|
+
*/
|
|
57
|
+
iconName?: IconName;
|
|
56
58
|
/**
|
|
57
59
|
* OnChange callback function, invoked when options are selected
|
|
58
60
|
*/
|
|
@@ -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,14 +1,15 @@
|
|
|
1
1
|
import { MouseEvent, ReactNode } from 'react';
|
|
2
|
-
export type GlobalBannerType = '
|
|
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
|
|
7
|
+
interface GlobalBannerProps {
|
|
8
8
|
actionButton?: ActionButton;
|
|
9
9
|
secondaryActionButton?: ActionButton;
|
|
10
10
|
className?: string;
|
|
11
11
|
children: ReactNode;
|
|
12
|
+
id?: string;
|
|
12
13
|
hidden?: boolean;
|
|
13
14
|
/**
|
|
14
15
|
* Adds an ignore-button. Note that alert type banners are not dismissable.
|
|
@@ -18,5 +19,5 @@ interface Props {
|
|
|
18
19
|
onDismiss?(): void;
|
|
19
20
|
type?: GlobalBannerType;
|
|
20
21
|
}
|
|
21
|
-
export declare const GlobalBanner: import("react").ForwardRefExoticComponent<
|
|
22
|
+
export declare const GlobalBanner: import("react").ForwardRefExoticComponent<GlobalBannerProps & import("react").RefAttributes<HTMLElement>>;
|
|
22
23
|
export {};
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { FunctionComponent, PropsWithChildren } from 'react';
|
|
2
2
|
import { IconName } from '../icon/icon';
|
|
3
|
-
export type
|
|
3
|
+
export type LozengeVariant = 'neutral' | 'success' | 'alert' | 'warning' | 'info' | 'discovery';
|
|
4
4
|
interface Props {
|
|
5
5
|
className?: string;
|
|
6
|
-
|
|
6
|
+
variant?: LozengeVariant;
|
|
7
7
|
icon?: IconName;
|
|
8
|
+
subtle?: boolean;
|
|
8
9
|
}
|
|
9
10
|
export declare const Lozenge: FunctionComponent<PropsWithChildren<Props>>;
|
|
10
11
|
export {};
|
|
@@ -2,10 +2,9 @@ import { VoidFunctionComponent } from 'react';
|
|
|
2
2
|
interface PaginationProps {
|
|
3
3
|
className?: string;
|
|
4
4
|
/**
|
|
5
|
-
*
|
|
6
|
-
* @default desktop
|
|
5
|
+
* Number of results to display per page
|
|
7
6
|
*/
|
|
8
|
-
|
|
7
|
+
resultsPerPage: number;
|
|
9
8
|
/**
|
|
10
9
|
* Displays the total number of results when provided
|
|
11
10
|
*/
|
|
@@ -1,9 +1,5 @@
|
|
|
1
1
|
import { ChangeEvent, VoidFunctionComponent } from 'react';
|
|
2
|
-
import { StyledProps } from 'styled-components';
|
|
3
2
|
import { ValidationCondition } from './validation-condition';
|
|
4
|
-
export declare function getBorderColor({ isValid, theme }: StyledProps<{
|
|
5
|
-
isValid: boolean;
|
|
6
|
-
}>): string;
|
|
7
3
|
interface PasswordCreationInputProps {
|
|
8
4
|
name?: string;
|
|
9
5
|
id?: string;
|
|
@@ -13,5 +13,6 @@ interface PasswordInputProps {
|
|
|
13
13
|
onBlur?(event: FocusEvent<HTMLInputElement>): void;
|
|
14
14
|
onFocus?(event: FocusEvent<HTMLInputElement>): void;
|
|
15
15
|
}
|
|
16
|
+
export declare const ShowPasswordButton: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
16
17
|
export declare const PasswordInput: VoidFunctionComponent<PasswordInputProps>;
|
|
17
18
|
export {};
|
|
@@ -1,11 +1,16 @@
|
|
|
1
1
|
import { VoidFunctionComponent } from 'react';
|
|
2
|
-
export interface
|
|
3
|
-
|
|
2
|
+
export interface ProgressTrackerStep {
|
|
3
|
+
href?: string;
|
|
4
|
+
label: string;
|
|
5
|
+
completion?: 'completed' | 'uncompleted';
|
|
6
|
+
onClick?: (stepNumber: number) => void;
|
|
4
7
|
}
|
|
5
|
-
interface
|
|
8
|
+
interface ProgressTrackerProps {
|
|
9
|
+
ariaLabel?: string;
|
|
6
10
|
className?: string;
|
|
7
|
-
|
|
11
|
+
linear?: boolean;
|
|
12
|
+
steps: ProgressTrackerStep[];
|
|
8
13
|
value: number;
|
|
9
14
|
}
|
|
10
|
-
export declare const
|
|
15
|
+
export declare const ProgressTracker: VoidFunctionComponent<ProgressTrackerProps>;
|
|
11
16
|
export {};
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ResolvedTheme } from '../../themes/theme';
|
|
2
2
|
interface DescriptionProps {
|
|
3
3
|
disabled?: boolean;
|
|
4
4
|
isMobile: boolean;
|
|
5
5
|
isChecked?: boolean;
|
|
6
|
-
theme:
|
|
6
|
+
theme: ResolvedTheme;
|
|
7
7
|
}
|
|
8
8
|
interface CardProps {
|
|
9
9
|
disabled?: boolean;
|
|
10
10
|
isMobile: boolean;
|
|
11
11
|
isChecked?: boolean;
|
|
12
|
-
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,17 @@
|
|
|
1
1
|
import { ReactElement } from 'react';
|
|
2
|
-
import { Row } from 'react-table';
|
|
2
|
+
import { Row } from '@tanstack/react-table';
|
|
3
3
|
interface StyledTableRowProps {
|
|
4
|
-
clickable
|
|
5
|
-
error
|
|
6
|
-
selected
|
|
7
|
-
striped?: boolean;
|
|
4
|
+
$clickable?: boolean;
|
|
5
|
+
$error?: boolean;
|
|
6
|
+
$selected?: boolean;
|
|
7
|
+
$striped?: boolean;
|
|
8
8
|
}
|
|
9
|
-
|
|
9
|
+
export declare const StyledTableRow: import("styled-components").StyledComponent<"tr", import("styled-components").DefaultTheme, StyledTableRowProps, never>;
|
|
10
|
+
interface TableRowProps<T extends object> {
|
|
10
11
|
row: Row<T>;
|
|
11
|
-
|
|
12
|
+
striped: boolean;
|
|
13
|
+
error: boolean;
|
|
12
14
|
onClick?(row: Row<T>): void;
|
|
13
15
|
}
|
|
14
|
-
export declare const TableRow: <T extends object>({ error, onClick, row, striped,
|
|
16
|
+
export declare const TableRow: <T extends object>({ error, onClick, row, striped, }: TableRowProps<T>) => ReactElement;
|
|
15
17
|
export {};
|
|
@@ -1,29 +1,12 @@
|
|
|
1
1
|
import { ReactElement } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { Row, ColumnSort } from '@tanstack/react-table';
|
|
3
|
+
import { TableColumn } 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>[];
|
|
14
|
-
export type TableRow<T> = T & {
|
|
15
|
-
error?: boolean;
|
|
16
|
-
};
|
|
17
|
-
interface CustomRowProps {
|
|
18
|
-
error?: boolean;
|
|
19
|
-
}
|
|
20
5
|
export interface TableProps<T extends object> {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
columns: TableColumn<T
|
|
24
|
-
|
|
25
|
-
* See stories code or refer to react-table docs for more information */
|
|
26
|
-
data: (T & CustomRowProps)[];
|
|
6
|
+
data: T[];
|
|
7
|
+
defaultSort?: ColumnSort;
|
|
8
|
+
columns: TableColumn<T>[];
|
|
9
|
+
expandableRows?: 'single' | 'multiple';
|
|
27
10
|
/**
|
|
28
11
|
* Adds row numbers
|
|
29
12
|
* @default false
|
|
@@ -40,10 +23,13 @@ export interface TableProps<T extends object> {
|
|
|
40
23
|
* @default false
|
|
41
24
|
*/
|
|
42
25
|
striped?: boolean;
|
|
26
|
+
className?: string;
|
|
43
27
|
stickyHeader?: boolean;
|
|
44
28
|
stickyFooter?: boolean;
|
|
29
|
+
manualSort?: boolean;
|
|
45
30
|
onRowClick?(row: Row<T>): void;
|
|
46
31
|
onSelectedRowsChange?(selectedRows: T[]): void;
|
|
32
|
+
onSort?(sort: ColumnSort | null): void;
|
|
47
33
|
}
|
|
48
|
-
export declare const Table: <T extends object>({ className, columns,
|
|
34
|
+
export declare const Table: <T extends object>({ className, data, defaultSort, columns: providedColumns, expandableRows, stickyHeader, stickyFooter, rowNumbers, rowSize, selectableRows, striped, manualSort, onRowClick, onSelectedRowsChange, onSort, }: TableProps<T>) => ReactElement;
|
|
49
35
|
export {};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { ColumnDef, RowData } from '@tanstack/react-table';
|
|
2
|
+
import { CSSProperties } from 'react';
|
|
3
|
+
export type TableData<TData extends object> = TData & {
|
|
4
|
+
error?: boolean;
|
|
5
|
+
subRows?: TableData<TData>[];
|
|
6
|
+
subContent?: React.ReactNode;
|
|
7
|
+
};
|
|
8
|
+
export type TableColumn<TData extends RowData, TValue = unknown> = ColumnDef<TData, TValue> & {
|
|
9
|
+
className?: string;
|
|
10
|
+
footerColSpan?: number;
|
|
11
|
+
headerAriaLabel?: string;
|
|
12
|
+
headerColSpan?: number;
|
|
13
|
+
iconAlign?: 'left' | 'right';
|
|
14
|
+
sortable?: boolean;
|
|
15
|
+
sticky?: boolean;
|
|
16
|
+
textAlign?: CSSProperties['textAlign'];
|
|
17
|
+
};
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { Column } from '@tanstack/react-table';
|
|
2
3
|
export declare function calculateStickyColumns(stickyColumns: boolean[], headerCells: NodeListOf<HTMLTableCellElement>, rows: NodeListOf<HTMLTableRowElement>): void;
|
|
3
4
|
export declare function calculateStickyHeader(stickyColumns: boolean[], headerCells: NodeListOf<HTMLTableCellElement>): void;
|
|
4
5
|
export declare function calculateStickyFooter(stickyColumns: boolean[], footerCells: NodeListOf<HTMLTableCellElement>): void;
|
|
5
6
|
export declare function calculateStickyPosition(stickyColumns: boolean[], stickyHeader: boolean, stickyFooter: boolean, tableRef: React.RefObject<HTMLTableElement>): void;
|
|
7
|
+
export declare function isAGroupColumn<TData, TValue>(column: Column<TData, TValue>): boolean;
|
|
8
|
+
export declare function isLastColumnInAGroup<TData, TValue>(column: Column<TData, TValue>): boolean;
|
|
@@ -9,7 +9,8 @@ interface TabButtonProps {
|
|
|
9
9
|
rightIcon?: IconName;
|
|
10
10
|
isSelected: boolean;
|
|
11
11
|
onClick(): void;
|
|
12
|
-
|
|
12
|
+
onRemove?(): void;
|
|
13
|
+
onKeyDown?(event: KeyboardEvent<HTMLDivElement>): void;
|
|
13
14
|
}
|
|
14
15
|
export declare const TabButton: import("react").ForwardRefExoticComponent<TabButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
15
16
|
export {};
|
|
@@ -2,9 +2,9 @@ import { FunctionComponent, PropsWithChildren, ReactNode } from 'react';
|
|
|
2
2
|
interface TabPanelProps {
|
|
3
3
|
buttonId: string;
|
|
4
4
|
children: ReactNode;
|
|
5
|
-
contained?: boolean;
|
|
6
5
|
hidden: boolean;
|
|
7
6
|
id: string;
|
|
7
|
+
global?: boolean;
|
|
8
8
|
}
|
|
9
9
|
export declare const TabPanel: FunctionComponent<PropsWithChildren<TabPanelProps>>;
|
|
10
10
|
export {};
|
|
@@ -10,11 +10,11 @@ export interface Tab {
|
|
|
10
10
|
}
|
|
11
11
|
interface Props {
|
|
12
12
|
className?: string;
|
|
13
|
-
/** Not available in global mode */
|
|
14
|
-
contained?: boolean;
|
|
15
13
|
forceRenderTabPanels?: boolean;
|
|
16
14
|
global?: boolean;
|
|
17
15
|
tabs: Tab[];
|
|
16
|
+
onAddTab?(): void;
|
|
17
|
+
onRemove?(tabId: string): void;
|
|
18
18
|
}
|
|
19
19
|
export declare const Tabs: VoidFunctionComponent<Props>;
|
|
20
20
|
export {};
|