@trackunit/react-components 1.24.6 → 1.24.10
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/index.cjs.js +2298 -2199
- package/index.esm.js +2299 -2200
- package/migrations/entry.js +3 -0
- package/migrations/entry.js.map +1 -0
- package/migrations/utils/jsx-utils.js +203 -0
- package/migrations/utils/jsx-utils.js.map +1 -0
- package/migrations/v2-0-0/breadcrumb-remove-deprecated-props.js +67 -0
- package/migrations/v2-0-0/breadcrumb-remove-deprecated-props.js.map +1 -0
- package/migrations/v2-0-0/cardheader-onclickclose-to-actions.js +101 -0
- package/migrations/v2-0-0/cardheader-onclickclose-to-actions.js.map +1 -0
- package/migrations/v2-0-0/iconbutton-add-required-name.js +59 -0
- package/migrations/v2-0-0/iconbutton-add-required-name.js.map +1 -0
- package/migrations/v2-0-0/kpi-tooltiplabel-to-wrapper.js +95 -0
- package/migrations/v2-0-0/kpi-tooltiplabel-to-wrapper.js.map +1 -0
- package/migrations/v2-0-0/notice-tooltiplabel-to-wrapper.js +114 -0
- package/migrations/v2-0-0/notice-tooltiplabel-to-wrapper.js.map +1 -0
- package/migrations/v2-0-0/pagination-add-required-titles.js +65 -0
- package/migrations/v2-0-0/pagination-add-required-titles.js.map +1 -0
- package/migrations/v2-0-0/tag-add-removetaglabel.js +59 -0
- package/migrations/v2-0-0/tag-add-removetaglabel.js.map +1 -0
- package/migrations/v2-0-0/togglegroup-remove-item-style.js +100 -0
- package/migrations/v2-0-0/togglegroup-remove-item-style.js.map +1 -0
- package/migrations.json +44 -0
- package/package.json +7 -6
- package/src/components/Breadcrumb/BreadcrumbForMediumScreen.d.ts +2 -2
- package/src/components/Breadcrumb/utils/types.d.ts +1 -0
- package/src/components/Card/Card.variants.d.ts +4 -4
- package/src/components/Card/CardHeader.d.ts +3 -8
- package/src/components/Icon/Icon.variants.d.ts +1 -1
- package/src/components/InteractableItem/InteractableItem.variants.d.ts +1 -1
- package/src/components/KPI/KPI.d.ts +1 -5
- package/src/components/KPI/KPI.variants.d.ts +1 -1
- package/src/components/KPICard/KPICard.d.ts +5 -1
- package/src/components/Menu/MoreMenu/MoreMenu.d.ts +8 -3
- package/src/components/Notice/Notice.d.ts +1 -9
- package/src/components/Pagination/Pagination.d.ts +11 -1
- package/src/components/Tag/Tag.d.ts +35 -13
- package/src/components/Tag/Tag.variants.d.ts +1 -1
- package/src/components/Text/Text.variants.d.ts +1 -1
- package/src/components/ToggleGroup/ToggleGroup.d.ts +81 -36
- package/src/components/buttons/Button/Button.d.ts +1 -1
- package/src/components/buttons/IconButton/IconButton.d.ts +28 -6
- package/src/components/buttons/shared/ButtonProps.d.ts +3 -2
- package/src/translation.d.ts +30 -0
- package/translation.cjs.js +7 -0
- package/translation.cjs10.js +7 -0
- package/translation.cjs11.js +7 -0
- package/translation.cjs12.js +7 -0
- package/translation.cjs13.js +7 -0
- package/translation.cjs14.js +7 -0
- package/translation.cjs15.js +7 -0
- package/translation.cjs16.js +7 -0
- package/translation.cjs17.js +7 -0
- package/translation.cjs2.js +7 -0
- package/translation.cjs3.js +7 -0
- package/translation.cjs4.js +7 -0
- package/translation.cjs5.js +7 -0
- package/translation.cjs6.js +7 -0
- package/translation.cjs7.js +7 -0
- package/translation.cjs8.js +7 -0
- package/translation.cjs9.js +7 -0
- package/translation.esm.js +5 -0
- package/translation.esm10.js +5 -0
- package/translation.esm11.js +5 -0
- package/translation.esm12.js +5 -0
- package/translation.esm13.js +5 -0
- package/translation.esm14.js +5 -0
- package/translation.esm15.js +5 -0
- package/translation.esm16.js +5 -0
- package/translation.esm17.js +5 -0
- package/translation.esm2.js +5 -0
- package/translation.esm3.js +5 -0
- package/translation.esm4.js +5 -0
- package/translation.esm5.js +5 -0
- package/translation.esm6.js +5 -0
- package/translation.esm7.js +5 -0
- package/translation.esm8.js +5 -0
- package/translation.esm9.js +5 -0
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import type { MakePropertyOptional, MappedOmit } from "@trackunit/shared-utils";
|
|
2
2
|
import { ReactElement, ReactNode } from "react";
|
|
3
3
|
import { CommonProps } from "../../../common/CommonProps";
|
|
4
|
-
import type { Styleable } from "../../../common/Styleable";
|
|
5
4
|
import { Refable } from "../../../common/Refable";
|
|
5
|
+
import type { Styleable } from "../../../common/Styleable";
|
|
6
6
|
import { IconProps } from "../../Icon/Icon";
|
|
7
7
|
import { PopoverContentChildren } from "../../Popover/PopoverContent";
|
|
8
8
|
import { PopoverProps } from "../../Popover/PopoverTypes";
|
|
9
9
|
import { IconButtonProps } from "../../buttons/IconButton/IconButton";
|
|
10
10
|
export type MenuPlacement = "above" | "below";
|
|
11
11
|
type FilteredIconProps = MakePropertyOptional<MappedOmit<IconProps, "onClick">, "name">;
|
|
12
|
-
type FilteredIconButtonProps = Omit<IconButtonProps, "icon" | "onClick">;
|
|
12
|
+
type FilteredIconButtonProps = MakePropertyOptional<Omit<IconButtonProps, "icon" | "onClick">, "title">;
|
|
13
13
|
export interface MoreMenuProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
|
|
14
14
|
/**
|
|
15
15
|
* Content to render inside the popover. Receives a `close` callback as a render prop, or accepts static ReactNode children.
|
|
@@ -35,6 +35,11 @@ export interface MoreMenuProps extends CommonProps, Styleable, Refable<HTMLDivEl
|
|
|
35
35
|
* A custom trigger element to replace the default kebab IconButton.
|
|
36
36
|
*/
|
|
37
37
|
customButton?: ReactNode;
|
|
38
|
+
/**
|
|
39
|
+
* Label for the default kebab button. Used as both tooltip text and accessible name.
|
|
40
|
+
* Consumers are responsible for providing a localized string.
|
|
41
|
+
*/
|
|
42
|
+
buttonLabel?: string;
|
|
38
43
|
}
|
|
39
44
|
/**
|
|
40
45
|
* MoreMenu (kebab menu) renders a three-dot button that opens a popover with a list of actions.
|
|
@@ -79,5 +84,5 @@ export interface MoreMenuProps extends CommonProps, Styleable, Refable<HTMLDivEl
|
|
|
79
84
|
* @param {MoreMenuProps} props - The props for the MoreMenu component
|
|
80
85
|
* @returns {ReactElement} MoreMenu component
|
|
81
86
|
*/
|
|
82
|
-
export declare const MoreMenu: ({ className, "data-testid": dataTestId, popoverProps, iconProps, iconButtonProps, customButton, customPortalId, children, style, ref, }: MoreMenuProps) => ReactElement;
|
|
87
|
+
export declare const MoreMenu: ({ className, "data-testid": dataTestId, popoverProps, iconProps, iconButtonProps, customButton, customPortalId, children, buttonLabel, style, ref, }: MoreMenuProps) => ReactElement;
|
|
83
88
|
export {};
|
|
@@ -34,14 +34,6 @@ export interface NoticeProps extends CommonProps, Styleable, Refable<HTMLDivElem
|
|
|
34
34
|
* A boolean parameter to display or hide label and instead show as html title on hover, default value is true
|
|
35
35
|
*/
|
|
36
36
|
withLabel?: boolean;
|
|
37
|
-
/**
|
|
38
|
-
* A string to set the label in tooltip, if not set it will be the same as the label
|
|
39
|
-
*/
|
|
40
|
-
tooltipLabel?: string;
|
|
41
|
-
/**
|
|
42
|
-
* A flag to enable the tooltip
|
|
43
|
-
*/
|
|
44
|
-
withTooltip?: boolean;
|
|
45
37
|
}
|
|
46
38
|
/**
|
|
47
39
|
* Notice is a non-interactive element that communicates informational messages the user should see, without prompting an action.
|
|
@@ -83,4 +75,4 @@ export interface NoticeProps extends CommonProps, Styleable, Refable<HTMLDivElem
|
|
|
83
75
|
* @param {NoticeProps} props - The props for the Notice component
|
|
84
76
|
* @returns {ReactElement} Notice component
|
|
85
77
|
*/
|
|
86
|
-
export declare const Notice: ({ "data-testid": dataTestId, iconName, iconSize, iconColor, label, color, withLabel, className,
|
|
78
|
+
export declare const Notice: ({ "data-testid": dataTestId, iconName, iconSize, iconColor, label, color, withLabel, className, size, ref, ...rest }: NoticeProps) => ReactElement;
|
|
@@ -47,6 +47,16 @@ export interface PaginationProps extends CommonProps, Styleable, Refable<HTMLDiv
|
|
|
47
47
|
* An flag to disable jumping to particular page by text input, could be used for cursor based pagination
|
|
48
48
|
*/
|
|
49
49
|
cursorBase?: boolean;
|
|
50
|
+
/**
|
|
51
|
+
* Accessible title for the previous page button.
|
|
52
|
+
* Consumers are responsible for providing a localized string.
|
|
53
|
+
*/
|
|
54
|
+
previousPageTitle: string;
|
|
55
|
+
/**
|
|
56
|
+
* Accessible title for the next page button.
|
|
57
|
+
* Consumers are responsible for providing a localized string.
|
|
58
|
+
*/
|
|
59
|
+
nextPageTitle: string;
|
|
50
60
|
}
|
|
51
61
|
/**
|
|
52
62
|
* Pagination provides previous/next page navigation with an optional page counter and jump-to-page input.
|
|
@@ -83,4 +93,4 @@ export interface PaginationProps extends CommonProps, Styleable, Refable<HTMLDiv
|
|
|
83
93
|
* @param {PaginationProps} props - The props for the Pagination component
|
|
84
94
|
* @returns {ReactElement} Pagination component
|
|
85
95
|
*/
|
|
86
|
-
export declare const Pagination: ({ previousPage, nextPage, canPreviousPage, canNextPage, pageCount, pageIndex, loading, className, "data-testid": dataTestId, style, getTranslatedCount, onPageChange, cursorBase, ref, }: PaginationProps) => ReactElement;
|
|
96
|
+
export declare const Pagination: ({ previousPage, nextPage, canPreviousPage, canNextPage, pageCount, pageIndex, loading, className, "data-testid": dataTestId, style, getTranslatedCount, onPageChange, cursorBase, previousPageTitle, nextPageTitle, ref, }: PaginationProps) => ReactElement;
|
|
@@ -1,24 +1,17 @@
|
|
|
1
|
-
import { ActivityColors, CriticalityColors, GeneralColors, IntentColors } from "@trackunit/ui-design-tokens";
|
|
2
|
-
import { MouseEventHandler, ReactElement, ReactNode } from "react";
|
|
3
|
-
import { CommonProps } from "../../common/CommonProps";
|
|
1
|
+
import type { ActivityColors, CriticalityColors, GeneralColors, IntentColors } from "@trackunit/ui-design-tokens";
|
|
2
|
+
import { type MouseEventHandler, type ReactElement, type ReactNode } from "react";
|
|
3
|
+
import type { CommonProps } from "../../common/CommonProps";
|
|
4
4
|
import { Refable } from "../../common/Refable";
|
|
5
|
-
import { Size } from "../../common/Size";
|
|
5
|
+
import type { Size } from "../../common/Size";
|
|
6
6
|
import type { Styleable } from "../../common/Styleable";
|
|
7
7
|
export type TagSize = Extract<Size, "small" | "medium">;
|
|
8
8
|
export type TagColors = IntentColors | GeneralColors | CriticalityColors | ActivityColors;
|
|
9
|
-
|
|
9
|
+
interface TagBaseProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
|
|
10
10
|
/**
|
|
11
11
|
* The color of the tag.
|
|
12
12
|
*
|
|
13
13
|
*/
|
|
14
14
|
color?: TagColors;
|
|
15
|
-
/**
|
|
16
|
-
* A handler for a click event triggered on X icon.
|
|
17
|
-
* If not passed then x icon won't be visible.
|
|
18
|
-
* Available only for neutral, primary and white tags.
|
|
19
|
-
*
|
|
20
|
-
*/
|
|
21
|
-
onClickClose?: MouseEventHandler<HTMLDivElement>;
|
|
22
15
|
/**
|
|
23
16
|
* Child nodes of the tag.
|
|
24
17
|
*
|
|
@@ -43,6 +36,33 @@ export interface TagProps extends CommonProps, Styleable, Refable<HTMLDivElement
|
|
|
43
36
|
*/
|
|
44
37
|
onMouseEnter?: MouseEventHandler<HTMLDivElement>;
|
|
45
38
|
}
|
|
39
|
+
interface NonDismissibleTagProps extends TagBaseProps {
|
|
40
|
+
/**
|
|
41
|
+
* A handler for a click event triggered on X icon.
|
|
42
|
+
* If not passed then x icon won't be visible.
|
|
43
|
+
* Available only for neutral, primary and white tags.
|
|
44
|
+
*
|
|
45
|
+
*/
|
|
46
|
+
onClickClose?: undefined;
|
|
47
|
+
/**
|
|
48
|
+
* Label for the remove button.
|
|
49
|
+
*/
|
|
50
|
+
removeTagLabel?: string;
|
|
51
|
+
}
|
|
52
|
+
interface DismissibleTagProps extends TagBaseProps {
|
|
53
|
+
/**
|
|
54
|
+
* A handler for a click event triggered on X icon.
|
|
55
|
+
* If not passed then x icon won't be visible.
|
|
56
|
+
* Available only for neutral, primary and white tags.
|
|
57
|
+
*
|
|
58
|
+
*/
|
|
59
|
+
onClickClose: MouseEventHandler<HTMLDivElement>;
|
|
60
|
+
/**
|
|
61
|
+
* Label for the remove button.
|
|
62
|
+
*/
|
|
63
|
+
removeTagLabel: string;
|
|
64
|
+
}
|
|
65
|
+
export type TagProps = DismissibleTagProps | NonDismissibleTagProps;
|
|
46
66
|
/**
|
|
47
67
|
* Tag is used for labeling or categorizing items in the UI. Common use cases include indicating asset status,
|
|
48
68
|
* marking features as Beta, or displaying selected options in multi-select inputs.
|
|
@@ -82,6 +102,7 @@ export interface TagProps extends CommonProps, Styleable, Refable<HTMLDivElement
|
|
|
82
102
|
* color="primary"
|
|
83
103
|
* icon={<Icon name="Funnel" size="small" />}
|
|
84
104
|
* onClickClose={onRemove}
|
|
105
|
+
* removeTagLabel="Remove filter"
|
|
85
106
|
* >
|
|
86
107
|
* {label}
|
|
87
108
|
* </Tag>
|
|
@@ -90,4 +111,5 @@ export interface TagProps extends CommonProps, Styleable, Refable<HTMLDivElement
|
|
|
90
111
|
* @param {TagProps} props - The props for the Tag component.
|
|
91
112
|
* @returns {ReactElement} The rendered Tag component.
|
|
92
113
|
*/
|
|
93
|
-
export declare const Tag: ({ className, "data-testid": dataTestId, children, size, onClickClose, color, disabled, ref, icon, onMouseEnter, style, }: TagProps) => ReactElement;
|
|
114
|
+
export declare const Tag: ({ className, "data-testid": dataTestId, children, size, onClickClose, color, disabled, ref, icon, onMouseEnter, style, removeTagLabel, }: TagProps) => ReactElement;
|
|
115
|
+
export {};
|
|
@@ -7,7 +7,7 @@ export declare const cvaTag: (props?: ({
|
|
|
7
7
|
size?: "small" | "medium" | null | undefined;
|
|
8
8
|
layout?: "default" | "containsDismiss" | "containsIcon" | null | undefined;
|
|
9
9
|
color?: "black" | "white" | "active" | "primary" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "moving" | "excessive_usage" | "stopped" | "unknown" | null | undefined;
|
|
10
|
-
border?: "
|
|
10
|
+
border?: "default" | "none" | null | undefined;
|
|
11
11
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
12
12
|
export declare const cvaTagText: (props?: ({
|
|
13
13
|
truncate?: boolean | null | undefined;
|
|
@@ -3,7 +3,7 @@ export declare const cvaText: (props?: ({
|
|
|
3
3
|
italic?: boolean | null | undefined;
|
|
4
4
|
uppercase?: boolean | null | undefined;
|
|
5
5
|
underline?: boolean | null | undefined;
|
|
6
|
-
weight?: "
|
|
6
|
+
weight?: "bold" | "normal" | "thick" | null | undefined;
|
|
7
7
|
size?: "small" | "medium" | "large" | null | undefined;
|
|
8
8
|
inverted?: boolean | null | undefined;
|
|
9
9
|
subtle?: boolean | null | undefined;
|
|
@@ -1,19 +1,63 @@
|
|
|
1
1
|
import { VariantProps } from "@trackunit/css-class-variance-utilities";
|
|
2
|
-
import
|
|
2
|
+
import { MappedOmit } from "@trackunit/shared-utils";
|
|
3
3
|
import { IconName } from "@trackunit/ui-icons";
|
|
4
4
|
import { Dispatch, MouseEventHandler, ReactElement, SetStateAction } from "react";
|
|
5
5
|
import { CommonProps } from "../../common/CommonProps";
|
|
6
6
|
import { Refable } from "../../common/Refable";
|
|
7
|
-
import {
|
|
7
|
+
import { Styleable } from "../../common/Styleable";
|
|
8
8
|
import { TooltipPlacement } from "../Tooltip/Tooltip";
|
|
9
9
|
import { cvaToggleGroup } from "./ToggleGroup.variants";
|
|
10
|
-
|
|
10
|
+
/**
|
|
11
|
+
* Tooltip configuration shared by ToggleGroup items and ToggleItem.
|
|
12
|
+
*/
|
|
13
|
+
export type ToggleTooltip = {
|
|
14
|
+
/**
|
|
15
|
+
* Text rendered inside the tooltip.
|
|
16
|
+
*/
|
|
17
|
+
content?: string;
|
|
18
|
+
/**
|
|
19
|
+
* A tooltip's position can be modified for extreme cases where its default state breaks the UI.
|
|
20
|
+
* Defaults to "top".
|
|
21
|
+
*/
|
|
22
|
+
placement?: TooltipPlacement;
|
|
23
|
+
};
|
|
24
|
+
/**
|
|
25
|
+
* Variant of {@link ToggleTooltip} where `content` is mandatory.
|
|
26
|
+
* Used in icon-only mode where the tooltip is the button's only accessible label.
|
|
27
|
+
*/
|
|
28
|
+
export type RequiredToggleTooltip = ToggleTooltip & {
|
|
29
|
+
content: string;
|
|
30
|
+
};
|
|
31
|
+
/**
|
|
32
|
+
* Optional text-truncation configuration for ToggleGroup items.
|
|
33
|
+
* Truncation should be avoided if possible.
|
|
34
|
+
*/
|
|
35
|
+
export type ToggleText = {
|
|
36
|
+
truncate: boolean;
|
|
37
|
+
maxWidth: "sm" | "md";
|
|
38
|
+
};
|
|
39
|
+
/**
|
|
40
|
+
* Discriminated union that pairs the `isIconOnly` flag with the shape required by each mode.
|
|
41
|
+
* Reused by {@link ToggleGroupProps} (to narrow the list item type) and
|
|
42
|
+
* {@link ToggleItemProps} (to narrow the tooltip shape per item).
|
|
43
|
+
*/
|
|
44
|
+
type IconOnlyDiscriminant<TIconOnly, TLabelled> = ({
|
|
45
|
+
/**
|
|
46
|
+
* Enable to use toggle buttons with icons only and a tooltip on hover.
|
|
47
|
+
* When `true`, every list item must provide a non-empty `tooltip.content`
|
|
48
|
+
* so the button has an accessible label.
|
|
49
|
+
*/
|
|
50
|
+
isIconOnly: true;
|
|
51
|
+
} & TIconOnly) | ({
|
|
52
|
+
isIconOnly?: false;
|
|
53
|
+
} & TLabelled);
|
|
54
|
+
export interface BasicToggleGroupListProps<TSelectedId extends string = string> extends CommonProps {
|
|
11
55
|
/**
|
|
12
56
|
* Used to identify an individual button to be able to highlight the selected one.
|
|
13
57
|
*/
|
|
14
58
|
id: TSelectedId;
|
|
15
59
|
/**
|
|
16
|
-
*
|
|
60
|
+
* Button's text content.
|
|
17
61
|
*/
|
|
18
62
|
title: string;
|
|
19
63
|
/**
|
|
@@ -23,25 +67,26 @@ export interface BasicToggleGroupListProps<TSelectedId extends string = string>
|
|
|
23
67
|
/**
|
|
24
68
|
* Due to size of the text, one might need to truncate a button's content or another.
|
|
25
69
|
* This behavior is individual for each button.
|
|
26
|
-
* For a button that use this feature, the full text can be read on hover.
|
|
27
|
-
* Truncation should be avoided if possible.
|
|
28
70
|
*/
|
|
29
|
-
text?:
|
|
30
|
-
truncate: boolean;
|
|
31
|
-
maxWidth: "sm" | "md";
|
|
32
|
-
};
|
|
71
|
+
text?: ToggleText;
|
|
33
72
|
/**
|
|
34
|
-
*
|
|
35
|
-
* Defaults to top.
|
|
36
|
-
* Use content for the cases where the title doesn't use the same exact text.
|
|
73
|
+
* Optional tooltip for explaining what the toggle does.
|
|
37
74
|
*/
|
|
38
|
-
tooltip?:
|
|
39
|
-
content?: string;
|
|
40
|
-
placement?: TooltipPlacement;
|
|
41
|
-
};
|
|
75
|
+
tooltip?: ToggleTooltip;
|
|
42
76
|
}
|
|
43
|
-
|
|
44
|
-
|
|
77
|
+
/**
|
|
78
|
+
* Variant of `BasicToggleGroupListProps` used when the ToggleGroup renders icon-only buttons.
|
|
79
|
+
* In this mode the tooltip is the only label available to sighted users, so a non-empty `content`
|
|
80
|
+
* is required to guarantee every button has a discoverable name.
|
|
81
|
+
*/
|
|
82
|
+
export interface IconOnlyToggleGroupListProps<TSelectedId extends string = string> extends MappedOmit<BasicToggleGroupListProps<TSelectedId>, "title" | "tooltip"> {
|
|
83
|
+
/**
|
|
84
|
+
* Icon-only ToggleGroup items use `tooltip.content` as their label.
|
|
85
|
+
*/
|
|
86
|
+
title?: never;
|
|
87
|
+
tooltip: RequiredToggleTooltip;
|
|
88
|
+
}
|
|
89
|
+
type CommonToggleGroupProps<TSelectedId extends string> = CommonProps & Styleable & Refable<HTMLDivElement> & MappedOmit<VariantProps<typeof cvaToggleGroup>, "className"> & {
|
|
45
90
|
/**
|
|
46
91
|
* Instead of onClick, we now use onChange to return the selected value
|
|
47
92
|
*/
|
|
@@ -51,13 +96,14 @@ export type ToggleGroupProps<TSelectedId extends string = string> = CommonProps
|
|
|
51
96
|
* ToggleGroup buttons can be one of three sizes
|
|
52
97
|
*/
|
|
53
98
|
size?: "small" | "medium" | "large";
|
|
54
|
-
/**
|
|
55
|
-
* Enable to use toggle buttons with icons only and a tooltip on hover
|
|
56
|
-
*/
|
|
57
|
-
isIconOnly?: boolean;
|
|
58
99
|
selected: TSelectedId;
|
|
59
100
|
setSelected: Dispatch<SetStateAction<TSelectedId>>;
|
|
60
101
|
};
|
|
102
|
+
export type ToggleGroupProps<TSelectedId extends string = string> = CommonToggleGroupProps<TSelectedId> & IconOnlyDiscriminant<{
|
|
103
|
+
list: ReadonlyArray<IconOnlyToggleGroupListProps<TSelectedId>>;
|
|
104
|
+
}, {
|
|
105
|
+
list: ReadonlyArray<BasicToggleGroupListProps<TSelectedId>>;
|
|
106
|
+
}>;
|
|
61
107
|
/**
|
|
62
108
|
* ToggleGroup allows users to toggle between two or more closely related options and immediately apply the selection.
|
|
63
109
|
* It renders a segmented control with a sliding background indicator. Supports text-only, icon-only, and text+icon modes.
|
|
@@ -93,24 +139,23 @@ export type ToggleGroupProps<TSelectedId extends string = string> = CommonProps
|
|
|
93
139
|
* @param {ToggleGroupProps} props - The props for the ToggleGroup component
|
|
94
140
|
* @returns {ReactElement} ToggleGroup component
|
|
95
141
|
*/
|
|
96
|
-
export declare const ToggleGroup: <TSelectedId extends string = string>(
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
text?: {
|
|
100
|
-
truncate: boolean;
|
|
101
|
-
maxWidth: "sm" | "md";
|
|
102
|
-
};
|
|
103
|
-
tooltip?: {
|
|
104
|
-
content?: string;
|
|
105
|
-
placement?: TooltipPlacement;
|
|
106
|
-
};
|
|
142
|
+
export declare const ToggleGroup: <TSelectedId extends string = string>(props: ToggleGroupProps<TSelectedId>) => ReactElement;
|
|
143
|
+
type CommonToggleItemProps = CommonProps & {
|
|
144
|
+
text?: ToggleText;
|
|
107
145
|
onClick: MouseEventHandler<HTMLButtonElement>;
|
|
108
146
|
selected: boolean;
|
|
109
147
|
disabled: boolean;
|
|
110
148
|
size: "small" | "medium" | "large";
|
|
111
|
-
isIconOnly: boolean;
|
|
112
149
|
iconName?: IconName;
|
|
113
150
|
className?: string;
|
|
114
151
|
"data-testid"?: string;
|
|
115
152
|
ref?: (el: HTMLButtonElement | null) => void;
|
|
116
|
-
}
|
|
153
|
+
};
|
|
154
|
+
export type ToggleItemProps = CommonToggleItemProps & IconOnlyDiscriminant<{
|
|
155
|
+
title?: never;
|
|
156
|
+
tooltip: RequiredToggleTooltip;
|
|
157
|
+
}, {
|
|
158
|
+
title: string;
|
|
159
|
+
tooltip?: ToggleTooltip;
|
|
160
|
+
}>;
|
|
161
|
+
export {};
|
|
@@ -85,6 +85,6 @@ export interface ButtonProps extends MappedOmit<ButtonCommonProps, "size">, Refa
|
|
|
85
85
|
* @returns {ReactElement} Button component
|
|
86
86
|
*/
|
|
87
87
|
export declare const Button: {
|
|
88
|
-
({ onClick, children, loading, disabled, className, fullWidth, prefix, suffix, variant, type, size, square, "data-testid": dataTestId, title, role, tabIndex, asChild, ref, ...rest }: ButtonProps): ReactElement;
|
|
88
|
+
({ onClick, children, loading, disabled, className, fullWidth, prefix, suffix, variant, type, size, square, "data-testid": dataTestId, title, ariaLabel, ariaLabelledBy, ariaDescribedBy, ariaHidden, role, tabIndex, asChild, ref, ...rest }: ButtonProps): ReactElement;
|
|
89
89
|
displayName: string;
|
|
90
90
|
};
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import type { MappedOmit } from "@trackunit/shared-utils";
|
|
2
|
-
import { ComponentType, JSX, ReactElement
|
|
2
|
+
import { ComponentType, JSX, ReactElement } from "react";
|
|
3
3
|
import { Refable } from "../../../common/Refable";
|
|
4
4
|
import { Size } from "../../../common/Size";
|
|
5
|
+
import { Icon, IconProps } from "../../Icon/Icon";
|
|
5
6
|
import { ButtonCommonProps } from "../shared/ButtonProps";
|
|
6
|
-
|
|
7
|
+
interface IconButtonBaseProps extends MappedOmit<ButtonCommonProps, "ariaLabel" | "size" | "title">, Refable<HTMLButtonElement>, Refable<HTMLButtonElement> {
|
|
7
8
|
/**
|
|
8
|
-
* The icon to display.
|
|
9
|
+
* The icon to display. Must be an `<Icon />` element.
|
|
9
10
|
*/
|
|
10
|
-
icon:
|
|
11
|
+
icon: ReactElement<IconProps, typeof Icon>;
|
|
11
12
|
/**
|
|
12
13
|
* The element type the button will be rendered as.
|
|
13
14
|
*
|
|
@@ -19,11 +20,31 @@ export interface IconButtonProps extends MappedOmit<ButtonCommonProps, "size">,
|
|
|
19
20
|
*/
|
|
20
21
|
size?: Size;
|
|
21
22
|
}
|
|
23
|
+
type IconButtonAccessibleNameProps = {
|
|
24
|
+
/**
|
|
25
|
+
* Text shown in the custom tooltip. Used as the accessible name unless `ariaLabel` is provided.
|
|
26
|
+
*/
|
|
27
|
+
title: string;
|
|
28
|
+
/**
|
|
29
|
+
* Accessible label for assistive technologies. Use this when the tooltip text is not descriptive enough.
|
|
30
|
+
*/
|
|
31
|
+
ariaLabel?: string;
|
|
32
|
+
} | {
|
|
33
|
+
/**
|
|
34
|
+
* Text shown in the custom tooltip. If omitted, no tooltip is shown.
|
|
35
|
+
*/
|
|
36
|
+
title?: undefined;
|
|
37
|
+
/**
|
|
38
|
+
* Accessible label for assistive technologies.
|
|
39
|
+
*/
|
|
40
|
+
ariaLabel: string;
|
|
41
|
+
};
|
|
42
|
+
export type IconButtonProps = IconButtonBaseProps & IconButtonAccessibleNameProps;
|
|
22
43
|
/**
|
|
23
44
|
* Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. The Icon Button is a version of the standard Button component without the text label.
|
|
24
45
|
*
|
|
25
46
|
* ### When to use
|
|
26
|
-
* Use icon buttons for actions that are well-understood through the icon alone, such as close, delete, or settings buttons. Always provide a `title` prop for accessibility.
|
|
47
|
+
* Use icon buttons for actions that are well-understood through the icon alone, such as close, delete, or settings buttons. Always provide a `title` or `ariaLabel` prop for accessibility.
|
|
27
48
|
*
|
|
28
49
|
* ### When not to use
|
|
29
50
|
* Do not use icon buttons when the action is not immediately clear from the icon. Use a regular Button with text instead.
|
|
@@ -62,6 +83,7 @@ export interface IconButtonProps extends MappedOmit<ButtonCommonProps, "size">,
|
|
|
62
83
|
* @returns {ReactElement} IconButton component
|
|
63
84
|
*/
|
|
64
85
|
export declare const IconButton: {
|
|
65
|
-
({ icon, size, square, loading, disabled, className, ref, ...rest }: IconButtonProps): ReactElement;
|
|
86
|
+
({ icon, size, square, loading, disabled, className, title, ariaLabel, "data-testid": dataTestId, ref, ...rest }: IconButtonProps): ReactElement;
|
|
66
87
|
displayName: string;
|
|
67
88
|
};
|
|
89
|
+
export {};
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { MouseEventHandler } from "react";
|
|
2
|
+
import type { AriaProps } from "../../../common/AriaProps";
|
|
2
3
|
import { CommonProps } from "../../../common/CommonProps";
|
|
3
|
-
import type { Styleable } from "../../../common/Styleable";
|
|
4
4
|
import { Size } from "../../../common/Size";
|
|
5
|
+
import type { Styleable } from "../../../common/Styleable";
|
|
5
6
|
export type ButtonVariant = "primary" | "secondary" | "primary-danger" | "secondary-danger" | "ghost" | "ghost-neutral" | "filled";
|
|
6
7
|
export type ButtonType = "button" | "submit";
|
|
7
|
-
export interface ButtonCommonProps extends CommonProps, Styleable {
|
|
8
|
+
export interface ButtonCommonProps extends CommonProps, Styleable, AriaProps {
|
|
8
9
|
/**
|
|
9
10
|
* An onClick handler
|
|
10
11
|
*/
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { NamespaceTransProps, TransForLibs, TranslationResource, useNamespaceTranslation } from "@trackunit/i18n-library-translation";
|
|
2
|
+
import { ReactElement } from "react";
|
|
3
|
+
import defaultTranslations from "./locales/en/translation.json";
|
|
4
|
+
/** A type for all available translation keys in this library */
|
|
5
|
+
export type TranslationKeys = keyof typeof defaultTranslations;
|
|
6
|
+
/** The translation namespace for this library */
|
|
7
|
+
export declare const namespace = "react-components";
|
|
8
|
+
/**
|
|
9
|
+
* The TranslationResource for this Library.
|
|
10
|
+
* Holds lazy loaded imports for all languages supported by the library.
|
|
11
|
+
*
|
|
12
|
+
* This is used to register the translations for this library before initializing i18next.
|
|
13
|
+
*/
|
|
14
|
+
export declare const translations: TranslationResource<TranslationKeys>;
|
|
15
|
+
/**
|
|
16
|
+
* Local useTranslation for this specific library
|
|
17
|
+
*/
|
|
18
|
+
export declare const useTranslation: () => ReturnType<typeof useNamespaceTranslation<TranslationKeys>>;
|
|
19
|
+
/**
|
|
20
|
+
* Type of the t function for the local useTranslation for this specific library
|
|
21
|
+
*/
|
|
22
|
+
export type TranslationFunction = TransForLibs<TranslationKeys>;
|
|
23
|
+
/**
|
|
24
|
+
* Trans for this specific library.
|
|
25
|
+
*/
|
|
26
|
+
export declare const Trans: (props: NamespaceTransProps<TranslationKeys>) => ReactElement;
|
|
27
|
+
/**
|
|
28
|
+
* Registers the translations for this library
|
|
29
|
+
*/
|
|
30
|
+
export declare const setupLibraryTranslations: () => void;
|