@amboss/design-system 1.16.1 → 1.16.2-canary2
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/build/cjs/src/components/PictogramButton/PictogramButton.js +3 -2
- package/build/cjs/src/components/RoundButton/RoundButton.js +3 -2
- package/build/esm/src/components/PictogramButton/PictogramButton.js +3 -2
- package/build/esm/src/components/PictogramButton/PictogramButton.js.map +1 -1
- package/build/esm/src/components/RoundButton/RoundButton.js +3 -2
- package/build/esm/src/components/RoundButton/RoundButton.js.map +1 -1
- package/package.json +4 -2
- package/build/cjs/scss/themes/dark.scss +0 -111
- package/build/cjs/scss/themes/light.scss +0 -111
- package/build/esm/build-tokens/_breakpoints.json +0 -17
- package/build/esm/build-tokens/_colors.json +0 -918
- package/build/esm/build-tokens/_icon_sizes_map.json +0 -7
- package/build/esm/build-tokens/_sizes.json +0 -782
- package/build/esm/build-tokens/_subThemeType.d.ts +0 -1
- package/build/esm/build-tokens/_zindex.json +0 -17
- package/build/esm/build-tokens/assets/icons.json +0 -142
- package/build/esm/build-tokens/assets/icons16.json +0 -153
- package/build/esm/build-tokens/assets/logo.json +0 -3
- package/build/esm/build-tokens/visualConfig.d.ts +0 -767
- package/build/esm/scss/themes/dark.scss +0 -111
- package/build/esm/scss/themes/light.scss +0 -111
- package/build/esm/src/components/Badge/Badge.d.ts +0 -11
- package/build/esm/src/components/Box/Box.d.ts +0 -35
- package/build/esm/src/components/Button/Button.d.ts +0 -33
- package/build/esm/src/components/Callout/Callout.d.ts +0 -14
- package/build/esm/src/components/Card/Card.d.ts +0 -16
- package/build/esm/src/components/Card/CardBox.d.ts +0 -6
- package/build/esm/src/components/Card/CardHeader/CardHeader.d.ts +0 -12
- package/build/esm/src/components/Collapsible/Collapsible.d.ts +0 -15
- package/build/esm/src/components/Column/Columns.d.ts +0 -45
- package/build/esm/src/components/Container/Container.d.ts +0 -14
- package/build/esm/src/components/DataTable/DataTable.d.ts +0 -58
- package/build/esm/src/components/DataTable/TableBody.d.ts +0 -9
- package/build/esm/src/components/DataTable/TableCell.d.ts +0 -15
- package/build/esm/src/components/DataTable/TableHeader.d.ts +0 -9
- package/build/esm/src/components/DataTable/index.d.ts +0 -4
- package/build/esm/src/components/DataTable/types.d.ts +0 -15
- package/build/esm/src/components/DataTable/useDataTableSort.d.ts +0 -14
- package/build/esm/src/components/Divider/Divider.d.ts +0 -6
- package/build/esm/src/components/DropdownMenu/DropdownMenu.d.ts +0 -35
- package/build/esm/src/components/DropdownMenu/MenuItem.d.ts +0 -19
- package/build/esm/src/components/Form/Checkbox/Checkbox.d.ts +0 -26
- package/build/esm/src/components/Form/FormErrorMessages/FormErrorMessages.d.ts +0 -6
- package/build/esm/src/components/Form/FormField/FormField.d.ts +0 -15
- package/build/esm/src/components/Form/FormFieldGroup/FormFieldGroup.d.ts +0 -11
- package/build/esm/src/components/Form/FormLabelText/FormLabelText.d.ts +0 -7
- package/build/esm/src/components/Form/Input/Input.d.ts +0 -78
- package/build/esm/src/components/Form/Input/index.d.ts +0 -2
- package/build/esm/src/components/Form/PasswordInput/PasswordInput.d.ts +0 -76
- package/build/esm/src/components/Form/PasswordInput/index.d.ts +0 -2
- package/build/esm/src/components/Form/Radio/Radio.d.ts +0 -24
- package/build/esm/src/components/Form/RadioButton/RadioButton.d.ts +0 -17
- package/build/esm/src/components/Form/SegmentedControl/SegmentedControl.d.ts +0 -31
- package/build/esm/src/components/Form/SegmentedControl/SegmentedControlOption.d.ts +0 -8
- package/build/esm/src/components/Form/Select/Select.d.ts +0 -23
- package/build/esm/src/components/Form/Textarea/Textarea.d.ts +0 -48
- package/build/esm/src/components/Form/Toggle/Toggle.d.ts +0 -32
- package/build/esm/src/components/Form/ToggleButton/ToggleButton.d.ts +0 -26
- package/build/esm/src/components/Icon/Icon.d.ts +0 -22
- package/build/esm/src/components/Inline/Inline.d.ts +0 -30
- package/build/esm/src/components/Link/Link.d.ts +0 -14
- package/build/esm/src/components/LoadingSpinner/LoadingSpinner.d.ts +0 -11
- package/build/esm/src/components/Logo/Logo.d.ts +0 -8
- package/build/esm/src/components/MediaItem/MediaItem.d.ts +0 -14
- package/build/esm/src/components/MediaViewerBar/MediaViewerBar.d.ts +0 -7
- package/build/esm/src/components/Notification/ExpandedContent.d.ts +0 -2
- package/build/esm/src/components/Notification/Notification.d.ts +0 -16
- package/build/esm/src/components/Pagination/Pagination.d.ts +0 -17
- package/build/esm/src/components/Patterns/ButtonGroup/ButtonGroup.d.ts +0 -14
- package/build/esm/src/components/Patterns/Modal/Modal.d.ts +0 -28
- package/build/esm/src/components/PictogramButton/PictogramButton.d.ts +0 -15
- package/build/esm/src/components/Portal/Portal.d.ts +0 -7
- package/build/esm/src/components/ProgressBar/ProgressBar.d.ts +0 -15
- package/build/esm/src/components/RoundButton/RoundButton.d.ts +0 -12
- package/build/esm/src/components/SearchResult/SearchResult.d.ts +0 -39
- package/build/esm/src/components/SegmentedProgressBar/SegmentedProgressBar.d.ts +0 -28
- package/build/esm/src/components/SegmentedProgressBar/SegmentedProgressBarUtil.d.ts +0 -10
- package/build/esm/src/components/ShadowWebComponent/ShadowWebComponent.d.ts +0 -13
- package/build/esm/src/components/Stack/Stack.d.ts +0 -20
- package/build/esm/src/components/SubThemeProvider/SubThemeProvider.d.ts +0 -8
- package/build/esm/src/components/Tabs/Tabs.d.ts +0 -28
- package/build/esm/src/components/Tag/Tag.d.ts +0 -19
- package/build/esm/src/components/TagGroup/TagGroup.d.ts +0 -17
- package/build/esm/src/components/Tooltip/Tooltip.d.ts +0 -23
- package/build/esm/src/components/Tooltip/utils.d.ts +0 -11
- package/build/esm/src/components/Typography/Header/Header.d.ts +0 -36
- package/build/esm/src/components/Typography/StyledText/StyledText.d.ts +0 -11
- package/build/esm/src/components/Typography/Text/Text.d.ts +0 -21
- package/build/esm/src/components/Typography/TextClamped/TextClamped.d.ts +0 -10
- package/build/esm/src/components/VirtualScrollList/VirtualScrollList.d.ts +0 -11
- package/build/esm/src/components/VirtualScrollList/VirtualScrollListReducer.d.ts +0 -36
- package/build/esm/src/index.d.ts +0 -54
- package/build/esm/src/shared/ScreenReaderText.d.ts +0 -5
- package/build/esm/src/shared/flattenChildren.d.ts +0 -11
- package/build/esm/src/shared/informDeprecation.d.ts +0 -1
- package/build/esm/src/shared/mediaQueries.d.ts +0 -14
- package/build/esm/src/shared/replaceDeprecated.d.ts +0 -1
- package/build/esm/src/shared/useAutoPosition.d.ts +0 -5
- package/build/esm/src/shared/useDocument.d.ts +0 -1
- package/build/esm/src/shared/useHover.d.ts +0 -2
- package/build/esm/src/shared/useKeyboard.d.ts +0 -17
- package/build/esm/src/shared/useOnEscapePress.d.ts +0 -2
- package/build/esm/src/shared/useOutsideClick.d.ts +0 -11
- package/build/esm/src/shared/useWindow.d.ts +0 -1
- package/build/esm/src/types/index.d.ts +0 -57
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { StackProps } from "../../Stack/Stack";
|
|
3
|
-
import { ActionButtonProps } from "../ButtonGroup/ButtonGroup";
|
|
4
|
-
import { TextProps } from "../../Typography/Text/Text";
|
|
5
|
-
export declare type ModalProps = {
|
|
6
|
-
header: string;
|
|
7
|
-
onAction: (action: "cancel" | "action") => void;
|
|
8
|
-
role?: "dialog" | "alertdialog";
|
|
9
|
-
labelHeader?: string;
|
|
10
|
-
/** The black color is going to be replaced with gray one */
|
|
11
|
-
subHeader?: string;
|
|
12
|
-
/** Aspect ratio 16:9 */
|
|
13
|
-
imageUrl?: string;
|
|
14
|
-
actionButton?: ActionButtonProps;
|
|
15
|
-
cancelButtonLabel?: string;
|
|
16
|
-
/** Aim to use <Modal.Text> and <Modal.Stack> */
|
|
17
|
-
children: React.ReactNode;
|
|
18
|
-
"data-e2e-test-id"?: string;
|
|
19
|
-
privateProps?: {
|
|
20
|
-
skipPortal?: boolean;
|
|
21
|
-
};
|
|
22
|
-
};
|
|
23
|
-
export declare function Modal({ header, subHeader, labelHeader, children, imageUrl, cancelButtonLabel, actionButton, role, onAction, privateProps: { skipPortal }, "data-e2e-test-id": dataE2eTestId, }: ModalProps): React.ReactElement;
|
|
24
|
-
export declare namespace Modal {
|
|
25
|
-
var defaultProps: Partial<ModalProps>;
|
|
26
|
-
var Stack: ({ children, ...rest }: Omit<StackProps, "space">) => JSX.Element;
|
|
27
|
-
var Text: ({ children, ...rest }: Omit<TextProps, "size" | "variant">) => JSX.Element;
|
|
28
|
-
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { IconName } from "../Icon/Icon";
|
|
3
|
-
import { ButtonProps } from "../Button/Button";
|
|
4
|
-
import { PolymorphicComponentPropsWithRef } from "../../types";
|
|
5
|
-
export declare type PictogramButtonProps = Pick<ButtonProps, "variant" | "type" | "disabled" | "onClick" | "onFocus" | "onBlur" | "data-e2e-test-id"> & {
|
|
6
|
-
/** The centered icon to be displayed. */
|
|
7
|
-
icon: IconName;
|
|
8
|
-
/** If true, the button has square corners. */
|
|
9
|
-
squareCorners?: boolean;
|
|
10
|
-
/** Size */
|
|
11
|
-
size?: "xs" | "s" | "m";
|
|
12
|
-
};
|
|
13
|
-
declare type PictogramButtonComponent = <C extends React.ElementType = "button">(props: PolymorphicComponentPropsWithRef<C, PictogramButtonProps>) => React.ReactElement | null;
|
|
14
|
-
export declare const PictogramButton: PictogramButtonComponent;
|
|
15
|
-
export {};
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { ProgressBarWeight } from "../SegmentedProgressBar/SegmentedProgressBar";
|
|
3
|
-
export declare type ProgressBarProps = {
|
|
4
|
-
/** The value for 100% progress. Consumer does not need to do percentage calculation. */
|
|
5
|
-
maxValue: number;
|
|
6
|
-
/** The value already progressed. If progress >= maxValue the bar is filled completely */
|
|
7
|
-
progress: number;
|
|
8
|
-
squareCorners?: boolean;
|
|
9
|
-
weight?: ProgressBarWeight;
|
|
10
|
-
"data-e2e-test-id"?: string;
|
|
11
|
-
};
|
|
12
|
-
export declare function ProgressBar({ maxValue, progress, weight, squareCorners, "data-e2e-test-id": dataE2eTestId, }: ProgressBarProps): React.ReactElement;
|
|
13
|
-
export declare namespace ProgressBar {
|
|
14
|
-
var defaultProps: Partial<ProgressBarProps>;
|
|
15
|
-
}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { IconName } from "../Icon/Icon";
|
|
3
|
-
import { ButtonProps } from "../Button/Button";
|
|
4
|
-
import { AsProp } from "../../types";
|
|
5
|
-
export declare type RoundButtonProps = Pick<ButtonProps, "variant" | "type" | "disabled" | "onClick" | "onFocus" | "onBlur" | "data-e2e-test-id"> & {
|
|
6
|
-
/** The centered icon to be displayed. */
|
|
7
|
-
icon: IconName;
|
|
8
|
-
};
|
|
9
|
-
export declare function RoundButton<C extends React.ElementType = "button">({ onClick, onFocus, onBlur, type, disabled, as, icon, "data-e2e-test-id": dataE2eTestId, ...rest }: RoundButtonProps & AsProp<C>): React.ReactElement;
|
|
10
|
-
export declare namespace RoundButton {
|
|
11
|
-
var defaultProps: Partial<RoundButtonProps> & AsProp<"button">;
|
|
12
|
-
}
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { IconName } from "../Icon/Icon";
|
|
3
|
-
export declare type SecondaryTarget = {
|
|
4
|
-
title: string;
|
|
5
|
-
body?: string;
|
|
6
|
-
link: (props: {
|
|
7
|
-
children: React.ReactNode;
|
|
8
|
-
}) => React.ReactElement;
|
|
9
|
-
"data-e2e-test-id"?: string;
|
|
10
|
-
};
|
|
11
|
-
export declare type SecondaryTargetsProps = {
|
|
12
|
-
data: SecondaryTarget[];
|
|
13
|
-
};
|
|
14
|
-
export declare type SearchResultProps = {
|
|
15
|
-
/** The result title. Supports some nested HTML tags like <b> and <i>. Text gets clamped after 3 lines. */
|
|
16
|
-
title: string;
|
|
17
|
-
/** The subtitle that accompanies the title. Supports some nested HTML tags like <b> and <i>. Text gets clamped after 3 lines. */
|
|
18
|
-
subtitle?: string;
|
|
19
|
-
/** The primary AMBOSS target. */
|
|
20
|
-
link: (props: {
|
|
21
|
-
children: React.ReactNode;
|
|
22
|
-
}) => React.ReactElement;
|
|
23
|
-
/** The left icon */
|
|
24
|
-
icon?: IconName;
|
|
25
|
-
/** List of details. Supports some nested HTML tags like <b> and <i>. */
|
|
26
|
-
details?: string[];
|
|
27
|
-
/** Usually a text content of the search result. Supports some nested HTML tags like <b> and <i>. Maximum 3 details items allowed where each test gets clamped after 3 lines. */
|
|
28
|
-
body?: string;
|
|
29
|
-
/** List of secondary AMBOSS targets with titles. Text gets clamped after 3 lines. */
|
|
30
|
-
secondaryTargets?: SecondaryTarget[];
|
|
31
|
-
/** List of labels. For example: preclinic, clinic, physician. */
|
|
32
|
-
labels?: string[];
|
|
33
|
-
/** The test id for the result's primary target. */
|
|
34
|
-
"data-e2e-test-id"?: string;
|
|
35
|
-
};
|
|
36
|
-
export declare function SearchResult({ title, subtitle, icon, details, body, secondaryTargets, link, labels, "data-e2e-test-id": dataE2eTestId, }: SearchResultProps): React.ReactElement;
|
|
37
|
-
export declare namespace SearchResult {
|
|
38
|
-
var defaultProps: Partial<SearchResultProps>;
|
|
39
|
-
}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
export declare type ValuesVariant = "success" | "warning" | "alert";
|
|
3
|
-
export declare type StyleVariant = ValuesVariant | "inProgress";
|
|
4
|
-
export declare type Value = number;
|
|
5
|
-
export declare type ProgressBarWeight = "thin" | "fat";
|
|
6
|
-
export declare type SegmentedProgressBarProps = {
|
|
7
|
-
/** The value for 100% progress. Consumer does not need to do percentage calculation.
|
|
8
|
-
* Just pass this number and some values. The progress bar does all percentag calculations */
|
|
9
|
-
maxValue: number;
|
|
10
|
-
/** The values already progressed. Possible ValuesVariants are used to display progress in a different color.
|
|
11
|
-
* Variants are:
|
|
12
|
-
* success => green;
|
|
13
|
-
* warning => yellow;
|
|
14
|
-
* alert => red */
|
|
15
|
-
values: Partial<Record<ValuesVariant, Value>>;
|
|
16
|
-
squareCorners?: boolean;
|
|
17
|
-
weight?: ProgressBarWeight;
|
|
18
|
-
privateProps?: SegmentedProgressBarPrivateProps;
|
|
19
|
-
"data-e2e-test-id"?: string;
|
|
20
|
-
};
|
|
21
|
-
declare type SegmentedProgressBarPrivateProps = {
|
|
22
|
-
monochrome?: boolean;
|
|
23
|
-
};
|
|
24
|
-
export declare function SegmentedProgressBar({ maxValue, values, weight, squareCorners, privateProps: { monochrome }, "data-e2e-test-id": dataE2eTestId, }: SegmentedProgressBarProps): React.ReactElement;
|
|
25
|
-
export declare namespace SegmentedProgressBar {
|
|
26
|
-
var defaultProps: Partial<SegmentedProgressBarProps>;
|
|
27
|
-
}
|
|
28
|
-
export {};
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { StyleVariant, Value, ValuesVariant } from "./SegmentedProgressBar";
|
|
2
|
-
declare const getPercentagesForVariants: (maxValue: number, values: Partial<Record<ValuesVariant, Value>>) => {
|
|
3
|
-
percentage: number;
|
|
4
|
-
style: StyleVariant;
|
|
5
|
-
}[];
|
|
6
|
-
declare const sanitizeInputValues: (maxValue: number, values: Partial<Record<ValuesVariant, Value>>) => {
|
|
7
|
-
sanitizedMaxValue: number;
|
|
8
|
-
sanitizedValues: Partial<Record<ValuesVariant, Value>>;
|
|
9
|
-
};
|
|
10
|
-
export { sanitizeInputValues, getPercentagesForVariants };
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
declare global {
|
|
3
|
-
namespace JSX {
|
|
4
|
-
interface IntrinsicElements {
|
|
5
|
-
"shadow-element": {
|
|
6
|
-
theme: "light-theme" | "dark-theme";
|
|
7
|
-
};
|
|
8
|
-
}
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
export declare function ShadowWebComponent({ theme, }: {
|
|
12
|
-
theme: "light-theme" | "dark-theme";
|
|
13
|
-
}): React.ReactElement;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { HorizontalAlignment, MQ, SpaceSizes } from "../../types";
|
|
3
|
-
export declare type StackProps = {
|
|
4
|
-
/** Represents the vertical between the Stack's children
|
|
5
|
-
* specify [small screen space, medium screen space, large screen space] or one space for all screen sizes
|
|
6
|
-
*/
|
|
7
|
-
space?: MQ<SpaceSizes> | SpaceSizes;
|
|
8
|
-
/** Represents elements' horizontal alignment
|
|
9
|
-
* specify [small screen alignItems, medium screen alignItems, large screen alignItems] or one alignItems for all screen sizes
|
|
10
|
-
*/
|
|
11
|
-
alignItems?: MQ<HorizontalAlignment> | HorizontalAlignment;
|
|
12
|
-
children: React.ReactNode[] | React.ReactElement;
|
|
13
|
-
"data-e2e-test-id"?: string;
|
|
14
|
-
/** @ignore */
|
|
15
|
-
"data-ds-id"?: string;
|
|
16
|
-
};
|
|
17
|
-
export declare function Stack({ children, space, alignItems, "data-e2e-test-id": dataE2eTestId, "data-ds-id": dataDsId, }: StackProps): React.ReactElement;
|
|
18
|
-
export declare namespace Stack {
|
|
19
|
-
var defaultProps: Partial<StackProps>;
|
|
20
|
-
}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { SubThemeTypes } from "../../../build-tokens/_subThemeType";
|
|
3
|
-
export declare type SubThemeProviderProps = {
|
|
4
|
-
"data-e2e-test-id"?: string;
|
|
5
|
-
children: React.ReactNode[] | React.ReactNode;
|
|
6
|
-
name: "unset" | SubThemeTypes;
|
|
7
|
-
};
|
|
8
|
-
export declare function SubThemeProvider({ name, children, "data-e2e-test-id": dataE2eTestId, }: SubThemeProviderProps): React.ReactElement;
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { MQ, SpaceSizes } from "../../types";
|
|
3
|
-
import { IconName } from "../Icon/Icon";
|
|
4
|
-
/**
|
|
5
|
-
* @param label - The text to display in the tab
|
|
6
|
-
* @param sublabel - A subtext, encased in parentheses
|
|
7
|
-
* @param icon - An icon to display to the left of the label
|
|
8
|
-
* @param as - The element to render the tab as, defaults to `button`
|
|
9
|
-
*/
|
|
10
|
-
declare type Tab = {
|
|
11
|
-
label: string;
|
|
12
|
-
sublabel?: string;
|
|
13
|
-
icon?: IconName;
|
|
14
|
-
as?: "a" | "button" | React.ComponentType;
|
|
15
|
-
} & Partial<React.ComponentProps<"button">> & Partial<React.ComponentProps<"a">>;
|
|
16
|
-
export declare type TabsProps = {
|
|
17
|
-
children?: React.ReactElement;
|
|
18
|
-
/** The index of the active tab */
|
|
19
|
-
activeTab?: number;
|
|
20
|
-
onTabSelect?: (selectedTab: number) => void;
|
|
21
|
-
/** An array of tabs, contains `header`, `subtitle`, `iconLeft`, `as` (defining the tab as a button or a link) */
|
|
22
|
-
tabs: Tab[];
|
|
23
|
-
/** Horizontal padding space for the tab container, suited for tabs within a Card element */
|
|
24
|
-
horizontalPadding?: SpaceSizes | MQ<SpaceSizes>;
|
|
25
|
-
"data-e2e-test-id"?: string;
|
|
26
|
-
};
|
|
27
|
-
export declare function Tabs({ tabs, horizontalPadding, activeTab, children, onTabSelect, "data-e2e-test-id": dataE2eTestId, }: TabsProps): React.ReactElement;
|
|
28
|
-
export {};
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
export declare const MAX_TAG_WIDTH = 200;
|
|
3
|
-
declare type BaseTagProps = {
|
|
4
|
-
label: string;
|
|
5
|
-
colorVariant?: "gray" | "blue";
|
|
6
|
-
"data-e2e-test-id"?: string;
|
|
7
|
-
};
|
|
8
|
-
declare type ConditionalTagProps = {
|
|
9
|
-
isRemovable?: false;
|
|
10
|
-
onClear?: never;
|
|
11
|
-
clearBtnAriaLabel?: never;
|
|
12
|
-
} | {
|
|
13
|
-
isRemovable: true;
|
|
14
|
-
onClear: () => void;
|
|
15
|
-
clearBtnAriaLabel?: string;
|
|
16
|
-
};
|
|
17
|
-
export declare type TagProps = BaseTagProps & ConditionalTagProps;
|
|
18
|
-
export declare function Tag({ label, colorVariant, isRemovable, onClear, clearBtnAriaLabel, "data-e2e-test-id": dataE2eTestId, }: TagProps): React.ReactElement;
|
|
19
|
-
export {};
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { TagProps } from "../Tag/Tag";
|
|
3
|
-
declare type BaseTagGroupProps = {
|
|
4
|
-
tags: TagProps[];
|
|
5
|
-
colorVariant?: TagProps["colorVariant"];
|
|
6
|
-
"data-e2e-test-id"?: string;
|
|
7
|
-
};
|
|
8
|
-
declare type ConditionalTagGroupProps = {
|
|
9
|
-
isTagRemovable?: false;
|
|
10
|
-
onRemoveTag?: never;
|
|
11
|
-
} | {
|
|
12
|
-
isTagRemovable: true;
|
|
13
|
-
onRemoveTag: (tag: TagProps) => void;
|
|
14
|
-
};
|
|
15
|
-
export declare type TagGroupProps = BaseTagGroupProps & ConditionalTagGroupProps;
|
|
16
|
-
export declare function TagGroup({ colorVariant, isTagRemovable, tags, onRemoveTag, "data-e2e-test-id": dataE2eTestId, }: TagGroupProps): React.ReactElement;
|
|
17
|
-
export {};
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import React, { MutableRefObject } from "react";
|
|
2
|
-
export declare type BaseProps = {
|
|
3
|
-
content: string;
|
|
4
|
-
placement?: "auto" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
|
|
5
|
-
portalContainer?: HTMLElement;
|
|
6
|
-
"data-e2e-test-id"?: string;
|
|
7
|
-
onVisibilityChange?: (isVisible: boolean) => void;
|
|
8
|
-
};
|
|
9
|
-
export declare type ConditionalProps = {
|
|
10
|
-
externalTriggerRef?: never;
|
|
11
|
-
children: React.ReactElement;
|
|
12
|
-
} | {
|
|
13
|
-
children?: never;
|
|
14
|
-
externalTriggerRef: MutableRefObject<any>;
|
|
15
|
-
};
|
|
16
|
-
export declare type TooltipProps = BaseProps & ConditionalProps;
|
|
17
|
-
export declare type TooltipPosition = {
|
|
18
|
-
top: number;
|
|
19
|
-
left: number;
|
|
20
|
-
horizontalPlacement: "left" | "right" | "center";
|
|
21
|
-
verticalPlacement: "top" | "bottom";
|
|
22
|
-
};
|
|
23
|
-
export declare function Tooltip({ placement, content, children, externalTriggerRef, portalContainer, "data-e2e-test-id": dataE2eTestId, onVisibilityChange, }: TooltipProps): React.ReactElement;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { RefObject } from "react";
|
|
2
|
-
import type { TooltipProps, TooltipPosition } from "./Tooltip";
|
|
3
|
-
export declare const DISTANCE_FROM_TRIGGER = 4;
|
|
4
|
-
export declare const ANIMATION_DISTANCE = 8;
|
|
5
|
-
export declare const ARROW_SIZE = 6;
|
|
6
|
-
export declare const TOOLTIP_MARGIN: number;
|
|
7
|
-
export declare const ARROW_OFFSET = 8;
|
|
8
|
-
/**
|
|
9
|
-
* Get tooltip position
|
|
10
|
-
*/
|
|
11
|
-
export declare function getTooltipPosition(placement: TooltipProps["placement"], triggerRef: RefObject<any>, tooltipRef: RefObject<any>, document: Document, window: Window): TooltipPosition;
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { Theme } from "@emotion/react";
|
|
3
|
-
import { BaseColors } from "src/types";
|
|
4
|
-
export declare type HeaderProps = {
|
|
5
|
-
as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
|
|
6
|
-
children: React.ReactNode;
|
|
7
|
-
"data-e2e-test-id"?: string;
|
|
8
|
-
/** @ignore */
|
|
9
|
-
"data-ds-id"?: string;
|
|
10
|
-
id?: string;
|
|
11
|
-
color?: BaseColors;
|
|
12
|
-
};
|
|
13
|
-
export declare const H1: import("@emotion/styled").StyledComponent<{
|
|
14
|
-
theme?: Theme;
|
|
15
|
-
as?: React.ElementType<any>;
|
|
16
|
-
} & HeaderProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
|
|
17
|
-
export declare const H2: import("@emotion/styled").StyledComponent<{
|
|
18
|
-
theme?: Theme;
|
|
19
|
-
as?: React.ElementType<any>;
|
|
20
|
-
} & HeaderProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
|
|
21
|
-
export declare const H3: import("@emotion/styled").StyledComponent<{
|
|
22
|
-
theme?: Theme;
|
|
23
|
-
as?: React.ElementType<any>;
|
|
24
|
-
} & HeaderProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
|
|
25
|
-
export declare const H4: import("@emotion/styled").StyledComponent<{
|
|
26
|
-
theme?: Theme;
|
|
27
|
-
as?: React.ElementType<any>;
|
|
28
|
-
} & HeaderProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
|
|
29
|
-
export declare const H5: import("@emotion/styled").StyledComponent<{
|
|
30
|
-
theme?: Theme;
|
|
31
|
-
as?: React.ElementType<any>;
|
|
32
|
-
} & HeaderProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
|
|
33
|
-
export declare const H6: import("@emotion/styled").StyledComponent<{
|
|
34
|
-
theme?: Theme;
|
|
35
|
-
as?: React.ElementType<any>;
|
|
36
|
-
} & Omit<HeaderProps, "color">, React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
export declare type FormattedElementProps = {
|
|
3
|
-
key: string;
|
|
4
|
-
children: string | React.ReactNode[];
|
|
5
|
-
};
|
|
6
|
-
export declare const makeStyledJSX: (string: string) => React.ReactNode[] | string | null;
|
|
7
|
-
export declare type StyledTextProps = {
|
|
8
|
-
children: string;
|
|
9
|
-
"data-e2e-test-id"?: string;
|
|
10
|
-
};
|
|
11
|
-
export declare function StyledText({ children, "data-e2e-test-id": dataE2eTestId, }: StyledTextProps): React.ReactElement;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { TextAlignment, TextVariations, TextColors, TextSize, MQ, Hyphens } from "../../../types";
|
|
3
|
-
export declare type TextProps = {
|
|
4
|
-
children: React.ReactNode;
|
|
5
|
-
size?: TextSize;
|
|
6
|
-
weight?: "normal" | "bold" | "black" | "inherit";
|
|
7
|
-
transform?: "none" | "capitalize" | "uppercase" | "lowercase";
|
|
8
|
-
as?: "p" | "span";
|
|
9
|
-
/** @deprecated variant property is deprecated now. Please use color prop. */
|
|
10
|
-
variant?: TextVariations;
|
|
11
|
-
color?: TextColors;
|
|
12
|
-
align?: TextAlignment;
|
|
13
|
-
hyphens?: Hyphens | MQ<Hyphens>;
|
|
14
|
-
"data-e2e-test-id"?: string;
|
|
15
|
-
/** @ignore */
|
|
16
|
-
"data-ds-id"?: string;
|
|
17
|
-
};
|
|
18
|
-
export declare const Text: import("@emotion/styled").StyledComponent<{
|
|
19
|
-
theme?: import("@emotion/react").Theme;
|
|
20
|
-
as?: React.ElementType<any>;
|
|
21
|
-
} & TextProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { TextProps } from "../Text/Text";
|
|
3
|
-
export declare type TextClampedProps = TextProps & {
|
|
4
|
-
/** The maximum number of lines. Default is 1. */
|
|
5
|
-
lines?: number;
|
|
6
|
-
};
|
|
7
|
-
export declare function TextClamped(props: TextClampedProps): React.ReactElement;
|
|
8
|
-
export declare namespace TextClamped {
|
|
9
|
-
var defaultProps: Partial<TextClampedProps>;
|
|
10
|
-
}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
export declare type VirtualScrollListProps = {
|
|
3
|
-
"data-e2e-test-id"?: string;
|
|
4
|
-
maxHeight: number;
|
|
5
|
-
itemHeight: number;
|
|
6
|
-
itemAmount: number;
|
|
7
|
-
emptyState: () => React.ReactNode;
|
|
8
|
-
itemInView: number;
|
|
9
|
-
itemTemplate: (index: number) => React.ReactNode;
|
|
10
|
-
};
|
|
11
|
-
export declare function VirtualScrollList({ maxHeight, itemHeight, itemAmount, emptyState, itemInView, itemTemplate, "data-e2e-test-id": dataE2eTestId, }: VirtualScrollListProps): React.ReactElement;
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
declare type Offset = {
|
|
2
|
-
amount: number;
|
|
3
|
-
isInterpolated: boolean;
|
|
4
|
-
};
|
|
5
|
-
declare type State = {
|
|
6
|
-
avgItemHeight?: number;
|
|
7
|
-
overscan?: number;
|
|
8
|
-
maxHeight?: number;
|
|
9
|
-
topOffsets?: Offset[];
|
|
10
|
-
renderFrom?: number;
|
|
11
|
-
scrolledItemCount?: number;
|
|
12
|
-
scrolledInPx?: number;
|
|
13
|
-
lastItemHeight?: number;
|
|
14
|
-
amountOfItemsInView?: number;
|
|
15
|
-
maxContentHeight?: number;
|
|
16
|
-
recommendedScrollPosition?: number;
|
|
17
|
-
};
|
|
18
|
-
declare type Action = {
|
|
19
|
-
type: "scroll";
|
|
20
|
-
scrollTop: number;
|
|
21
|
-
} | {
|
|
22
|
-
type: "updateViewport";
|
|
23
|
-
viewportNode: HTMLDivElement;
|
|
24
|
-
itemAmount: number;
|
|
25
|
-
} | {
|
|
26
|
-
type: "reset";
|
|
27
|
-
itemHeight: number;
|
|
28
|
-
maxHeight: number;
|
|
29
|
-
overscan: number;
|
|
30
|
-
} | {
|
|
31
|
-
type: "recommendScrollPosition";
|
|
32
|
-
scrollTop: number;
|
|
33
|
-
itemToBeInView: number;
|
|
34
|
-
};
|
|
35
|
-
export declare const VirtualScrollReducer: (prevState: State, action: Action) => State;
|
|
36
|
-
export {};
|
package/build/esm/src/index.d.ts
DELETED
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import { VisualConfig } from "../build-tokens/visualConfig";
|
|
2
|
-
export type { VisualConfig };
|
|
3
|
-
export declare const dark: VisualConfig, light: VisualConfig;
|
|
4
|
-
export { ThemeProvider, CacheProvider } from "@emotion/react";
|
|
5
|
-
export { default as createCache } from "@emotion/cache";
|
|
6
|
-
export * from "./components/Card/Card";
|
|
7
|
-
export * from "./components/Card/CardBox";
|
|
8
|
-
export * from "./components/Box/Box";
|
|
9
|
-
export * from "./components/Inline/Inline";
|
|
10
|
-
export * from "./components/Stack/Stack";
|
|
11
|
-
export * from "./components/Typography/Header/Header";
|
|
12
|
-
export * from "./components/Typography/Text/Text";
|
|
13
|
-
export * from "./components/Typography/TextClamped/TextClamped";
|
|
14
|
-
export * from "./components/Typography/StyledText/StyledText";
|
|
15
|
-
export * from "./components/Link/Link";
|
|
16
|
-
export * from "./components/Icon/Icon";
|
|
17
|
-
export * from "./components/Button/Button";
|
|
18
|
-
export * from "./components/Divider/Divider";
|
|
19
|
-
export * from "./components/Column/Columns";
|
|
20
|
-
export * from "./components/Tabs/Tabs";
|
|
21
|
-
export * from "./components/Badge/Badge";
|
|
22
|
-
export * from "./components/SearchResult/SearchResult";
|
|
23
|
-
export * from "./components/Form/ToggleButton/ToggleButton";
|
|
24
|
-
export * from "./components/DropdownMenu/DropdownMenu";
|
|
25
|
-
export * from "./components/Form/FormFieldGroup/FormFieldGroup";
|
|
26
|
-
export * from "./components/Form/Input";
|
|
27
|
-
export * from "./components/Form/Checkbox/Checkbox";
|
|
28
|
-
export * from "./components/Form/Toggle/Toggle";
|
|
29
|
-
export * from "./components/Form/Radio/Radio";
|
|
30
|
-
export * from "./components/Form/RadioButton/RadioButton";
|
|
31
|
-
export * from "./components/Form/Textarea/Textarea";
|
|
32
|
-
export * from "./components/Form/Select/Select";
|
|
33
|
-
export * from "./components/SubThemeProvider/SubThemeProvider";
|
|
34
|
-
export * from "./components/PictogramButton/PictogramButton";
|
|
35
|
-
export * from "./components/MediaViewerBar/MediaViewerBar";
|
|
36
|
-
export * from "./components/SegmentedProgressBar/SegmentedProgressBar";
|
|
37
|
-
export * from "./components/ProgressBar/ProgressBar";
|
|
38
|
-
export * from "./components/Container/Container";
|
|
39
|
-
export * from "./components/Form/PasswordInput";
|
|
40
|
-
export * from "./components/RoundButton/RoundButton";
|
|
41
|
-
export * from "./components/Notification/Notification";
|
|
42
|
-
export * from "./components/Logo/Logo";
|
|
43
|
-
export * from "./components/MediaItem/MediaItem";
|
|
44
|
-
export * from "./components/Callout/Callout";
|
|
45
|
-
export * from "./components/Patterns/Modal/Modal";
|
|
46
|
-
export * from "./components/Patterns/ButtonGroup/ButtonGroup";
|
|
47
|
-
export * from "./components/Collapsible/Collapsible";
|
|
48
|
-
export * from "./components/LoadingSpinner/LoadingSpinner";
|
|
49
|
-
export * from "./components/Pagination/Pagination";
|
|
50
|
-
export * from "./components/DataTable";
|
|
51
|
-
export * from "./components/Form/SegmentedControl/SegmentedControl";
|
|
52
|
-
export * from "./components/Tooltip/Tooltip";
|
|
53
|
-
export * from "./components/Tag/Tag";
|
|
54
|
-
export * from "./components/TagGroup/TagGroup";
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
export declare const ScreenReaderText: import("@emotion/styled").StyledComponent<{
|
|
3
|
-
theme?: import("@emotion/react").Theme;
|
|
4
|
-
as?: import("react").ElementType<any>;
|
|
5
|
-
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
/**
|
|
3
|
-
* Copied from https://github.com/grrowl/react-keyed-flatten-children (since ESM import doesn't work with the module)
|
|
4
|
-
*
|
|
5
|
-
* Similar to [React's built-in `Children.toArray` method](https://reactjs.org/docs/react-api.html#reactchildrentoarray),
|
|
6
|
-
* this utility takes children and returns them as an array for introspection or filtering.
|
|
7
|
-
*
|
|
8
|
-
* Different from `Children.toArray`, it will flatten arrays and `React.Fragment`s into a regular, one-dimensional
|
|
9
|
-
* array while ensuring element and fragment keys are preserved, unique, and stable between renders.
|
|
10
|
-
*/
|
|
11
|
-
export declare const flattenChildren: (children: React.ReactNode, depth?: number, keys?: string[]) => any;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const informDeprecation: (property: unknown, value: unknown, location: string, details?: string) => void;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { ColumnSizes, HorizontalAlignment, MQ, SpaceSizes, TextAlignment, VerticalAlignment, Order, ColumnAlignment, Hyphens } from "../types";
|
|
2
|
-
declare type MqProp<T> = [
|
|
3
|
-
T | MQ<T>,
|
|
4
|
-
Record<T extends string ? T : never, string | number>
|
|
5
|
-
];
|
|
6
|
-
declare type MqRules = Record<string, MqProp<TextAlignment> | MqProp<SpaceSizes> | MqProp<HorizontalAlignment> | MqProp<VerticalAlignment> | MqProp<ColumnSizes> | MqProp<Order> | MqProp<ColumnAlignment> | MqProp<Hyphens>>;
|
|
7
|
-
declare type EmotionCssPropertyName = string;
|
|
8
|
-
declare type EmotionCssValue = string | number;
|
|
9
|
-
declare type EmotionCssDescription = Record<EmotionCssPropertyName, EmotionCssValue>;
|
|
10
|
-
declare type MqFunc = (rules: MqRules) => Record<string, EmotionCssValue | EmotionCssDescription>;
|
|
11
|
-
export declare const mq: MqFunc;
|
|
12
|
-
export declare const mqValue: (rules: Record<EmotionCssPropertyName, EmotionCssValue[] | EmotionCssValue>) => Record<string, EmotionCssValue | EmotionCssDescription>;
|
|
13
|
-
export declare function getMediaQueryClasses<T>(s: T | MQ<T> | undefined, styles: Record<string, string>, prefix?: string): string[];
|
|
14
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const replaceDeprecated: (property: unknown, from: unknown, to: unknown, location: string, details?: string) => unknown;
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { RefObject } from "react";
|
|
2
|
-
export declare type VerticalPosition = "up" | "down";
|
|
3
|
-
export declare type HorizontalPosition = "left" | "right";
|
|
4
|
-
export declare type Position = [VerticalPosition, HorizontalPosition];
|
|
5
|
-
export declare const useAutoPosition: (anchorRef: RefObject<HTMLElement>, contentRef: RefObject<HTMLElement>, isActive: boolean) => Position;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function useDocument(): Document;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { RefObject } from "react";
|
|
2
|
-
/**
|
|
3
|
-
* useKeyboard handles activation of keyboard hotkeys on a given element.
|
|
4
|
-
* @param {Record<string, (e: KeyboardEvent) => {}} config - A map of keyboardEvent code to function.
|
|
5
|
-
* @param {RefObject} ref - The element which the keyboard config has to apply on.
|
|
6
|
-
* @param {boolean} isActive - A flag to determine when the keyboard config has to be applied.
|
|
7
|
-
*
|
|
8
|
-
* Example:
|
|
9
|
-
* useKeyboard({
|
|
10
|
-
* Escape: closeMenu,
|
|
11
|
-
* ArrowUp: () => { doSomething() },
|
|
12
|
-
* KeyB: () => { console.log("bagi") },
|
|
13
|
-
* }, menuRef, menuOpen)
|
|
14
|
-
*
|
|
15
|
-
* This mean that these keyboard shortcuts will be applied on menuRef when the menu is opened.
|
|
16
|
-
*/
|
|
17
|
-
export declare function useKeyboard(config: Record<string, (e: KeyboardEvent) => void | boolean>, ref: RefObject<any>, isActive: boolean): void;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { RefObject } from "react";
|
|
2
|
-
/**
|
|
3
|
-
* useOutsideClick handles outside click of a given element.
|
|
4
|
-
* @param {RefObject} ref - Reference to a DOM element.
|
|
5
|
-
* @param {e: Event) => void} handler - Function invoked when a click is triggered outside the referenced element.
|
|
6
|
-
* @param {boolean} isActive - A flag to determine when the outside click event needs to be applied.
|
|
7
|
-
*
|
|
8
|
-
* Example: useOutsideClick(menuRef, closeMenu, menuIsOpen)
|
|
9
|
-
* Means that when a menu is opened, clicking outside of the menu will close the mneu.
|
|
10
|
-
*/
|
|
11
|
-
export declare const useOutsideClick: (ref: RefObject<any>, handler: (e: Event) => void, isActive: boolean) => void;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function useWindow(): Window;
|