@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.
Files changed (78) hide show
  1. package/index.cjs.js +2298 -2199
  2. package/index.esm.js +2299 -2200
  3. package/migrations/entry.js +3 -0
  4. package/migrations/entry.js.map +1 -0
  5. package/migrations/utils/jsx-utils.js +203 -0
  6. package/migrations/utils/jsx-utils.js.map +1 -0
  7. package/migrations/v2-0-0/breadcrumb-remove-deprecated-props.js +67 -0
  8. package/migrations/v2-0-0/breadcrumb-remove-deprecated-props.js.map +1 -0
  9. package/migrations/v2-0-0/cardheader-onclickclose-to-actions.js +101 -0
  10. package/migrations/v2-0-0/cardheader-onclickclose-to-actions.js.map +1 -0
  11. package/migrations/v2-0-0/iconbutton-add-required-name.js +59 -0
  12. package/migrations/v2-0-0/iconbutton-add-required-name.js.map +1 -0
  13. package/migrations/v2-0-0/kpi-tooltiplabel-to-wrapper.js +95 -0
  14. package/migrations/v2-0-0/kpi-tooltiplabel-to-wrapper.js.map +1 -0
  15. package/migrations/v2-0-0/notice-tooltiplabel-to-wrapper.js +114 -0
  16. package/migrations/v2-0-0/notice-tooltiplabel-to-wrapper.js.map +1 -0
  17. package/migrations/v2-0-0/pagination-add-required-titles.js +65 -0
  18. package/migrations/v2-0-0/pagination-add-required-titles.js.map +1 -0
  19. package/migrations/v2-0-0/tag-add-removetaglabel.js +59 -0
  20. package/migrations/v2-0-0/tag-add-removetaglabel.js.map +1 -0
  21. package/migrations/v2-0-0/togglegroup-remove-item-style.js +100 -0
  22. package/migrations/v2-0-0/togglegroup-remove-item-style.js.map +1 -0
  23. package/migrations.json +44 -0
  24. package/package.json +7 -6
  25. package/src/components/Breadcrumb/BreadcrumbForMediumScreen.d.ts +2 -2
  26. package/src/components/Breadcrumb/utils/types.d.ts +1 -0
  27. package/src/components/Card/Card.variants.d.ts +4 -4
  28. package/src/components/Card/CardHeader.d.ts +3 -8
  29. package/src/components/Icon/Icon.variants.d.ts +1 -1
  30. package/src/components/InteractableItem/InteractableItem.variants.d.ts +1 -1
  31. package/src/components/KPI/KPI.d.ts +1 -5
  32. package/src/components/KPI/KPI.variants.d.ts +1 -1
  33. package/src/components/KPICard/KPICard.d.ts +5 -1
  34. package/src/components/Menu/MoreMenu/MoreMenu.d.ts +8 -3
  35. package/src/components/Notice/Notice.d.ts +1 -9
  36. package/src/components/Pagination/Pagination.d.ts +11 -1
  37. package/src/components/Tag/Tag.d.ts +35 -13
  38. package/src/components/Tag/Tag.variants.d.ts +1 -1
  39. package/src/components/Text/Text.variants.d.ts +1 -1
  40. package/src/components/ToggleGroup/ToggleGroup.d.ts +81 -36
  41. package/src/components/buttons/Button/Button.d.ts +1 -1
  42. package/src/components/buttons/IconButton/IconButton.d.ts +28 -6
  43. package/src/components/buttons/shared/ButtonProps.d.ts +3 -2
  44. package/src/translation.d.ts +30 -0
  45. package/translation.cjs.js +7 -0
  46. package/translation.cjs10.js +7 -0
  47. package/translation.cjs11.js +7 -0
  48. package/translation.cjs12.js +7 -0
  49. package/translation.cjs13.js +7 -0
  50. package/translation.cjs14.js +7 -0
  51. package/translation.cjs15.js +7 -0
  52. package/translation.cjs16.js +7 -0
  53. package/translation.cjs17.js +7 -0
  54. package/translation.cjs2.js +7 -0
  55. package/translation.cjs3.js +7 -0
  56. package/translation.cjs4.js +7 -0
  57. package/translation.cjs5.js +7 -0
  58. package/translation.cjs6.js +7 -0
  59. package/translation.cjs7.js +7 -0
  60. package/translation.cjs8.js +7 -0
  61. package/translation.cjs9.js +7 -0
  62. package/translation.esm.js +5 -0
  63. package/translation.esm10.js +5 -0
  64. package/translation.esm11.js +5 -0
  65. package/translation.esm12.js +5 -0
  66. package/translation.esm13.js +5 -0
  67. package/translation.esm14.js +5 -0
  68. package/translation.esm15.js +5 -0
  69. package/translation.esm16.js +5 -0
  70. package/translation.esm17.js +5 -0
  71. package/translation.esm2.js +5 -0
  72. package/translation.esm3.js +5 -0
  73. package/translation.esm4.js +5 -0
  74. package/translation.esm5.js +5 -0
  75. package/translation.esm6.js +5 -0
  76. package/translation.esm7.js +5 -0
  77. package/translation.esm8.js +5 -0
  78. 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, tooltipLabel, withTooltip, size, ref, ...rest }: NoticeProps) => ReactElement;
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
- export interface TagProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
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?: "none" | "default" | null | undefined;
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?: "normal" | "thick" | "bold" | null | undefined;
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 type { MappedOmit } from "@trackunit/shared-utils";
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 { type Styleable } from "../../common/Styleable";
7
+ import { Styleable } from "../../common/Styleable";
8
8
  import { TooltipPlacement } from "../Tooltip/Tooltip";
9
9
  import { cvaToggleGroup } from "./ToggleGroup.variants";
10
- export interface BasicToggleGroupListProps<TSelectedId extends string = string> extends CommonProps, Styleable {
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
- * Tooltip's fallback and button's text content.
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
- * A tooltip's position can be modified for extreme cases where it's default state breaks the UI.
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
- export type ToggleGroupProps<TSelectedId extends string = string> = CommonProps & Styleable & Refable<HTMLDivElement> & MappedOmit<VariantProps<typeof cvaToggleGroup>, "className"> & {
44
- list: ReadonlyArray<BasicToggleGroupListProps<TSelectedId>>;
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>({ list, selected, setSelected, onChange, disabled, size, isIconOnly, className, "data-testid": dataTestId, style, ref, }: ToggleGroupProps<TSelectedId>) => ReactElement;
97
- export interface ToggleItemProps extends CommonProps, Styleable, MappedOmit<BasicToggleGroupListProps<string>, "id"> {
98
- title: string;
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, ReactNode } from "react";
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
- export interface IconButtonProps extends MappedOmit<ButtonCommonProps, "size">, Refable<HTMLButtonElement> {
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: ReactNode;
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;
@@ -0,0 +1,7 @@
1
+ 'use strict';
2
+
3
+ var translation = {
4
+
5
+ };
6
+
7
+ exports.default = translation;
@@ -0,0 +1,7 @@
1
+ 'use strict';
2
+
3
+ var translation = {
4
+
5
+ };
6
+
7
+ exports.default = translation;
@@ -0,0 +1,7 @@
1
+ 'use strict';
2
+
3
+ var translation = {
4
+
5
+ };
6
+
7
+ exports.default = translation;
@@ -0,0 +1,7 @@
1
+ 'use strict';
2
+
3
+ var translation = {
4
+
5
+ };
6
+
7
+ exports.default = translation;
@@ -0,0 +1,7 @@
1
+ 'use strict';
2
+
3
+ var translation = {
4
+
5
+ };
6
+
7
+ exports.default = translation;
@@ -0,0 +1,7 @@
1
+ 'use strict';
2
+
3
+ var translation = {
4
+
5
+ };
6
+
7
+ exports.default = translation;
@@ -0,0 +1,7 @@
1
+ 'use strict';
2
+
3
+ var translation = {
4
+
5
+ };
6
+
7
+ exports.default = translation;
@@ -0,0 +1,7 @@
1
+ 'use strict';
2
+
3
+ var translation = {
4
+
5
+ };
6
+
7
+ exports.default = translation;
@@ -0,0 +1,7 @@
1
+ 'use strict';
2
+
3
+ var translation = {
4
+
5
+ };
6
+
7
+ exports.default = translation;
@@ -0,0 +1,7 @@
1
+ 'use strict';
2
+
3
+ var translation = {
4
+
5
+ };
6
+
7
+ exports.default = translation;
@@ -0,0 +1,7 @@
1
+ 'use strict';
2
+
3
+ var translation = {
4
+
5
+ };
6
+
7
+ exports.default = translation;
@@ -0,0 +1,7 @@
1
+ 'use strict';
2
+
3
+ var translation = {
4
+
5
+ };
6
+
7
+ exports.default = translation;
@@ -0,0 +1,7 @@
1
+ 'use strict';
2
+
3
+ var translation = {
4
+
5
+ };
6
+
7
+ exports.default = translation;
@@ -0,0 +1,7 @@
1
+ 'use strict';
2
+
3
+ var translation = {
4
+
5
+ };
6
+
7
+ exports.default = translation;
@@ -0,0 +1,7 @@
1
+ 'use strict';
2
+
3
+ var translation = {
4
+
5
+ };
6
+
7
+ exports.default = translation;
@@ -0,0 +1,7 @@
1
+ 'use strict';
2
+
3
+ var translation = {
4
+
5
+ };
6
+
7
+ exports.default = translation;
@@ -0,0 +1,7 @@
1
+ 'use strict';
2
+
3
+ var translation = {
4
+
5
+ };
6
+
7
+ exports.default = translation;
@@ -0,0 +1,5 @@
1
+ var translation = {
2
+
3
+ };
4
+
5
+ export { translation as default };
@@ -0,0 +1,5 @@
1
+ var translation = {
2
+
3
+ };
4
+
5
+ export { translation as default };
@@ -0,0 +1,5 @@
1
+ var translation = {
2
+
3
+ };
4
+
5
+ export { translation as default };
@@ -0,0 +1,5 @@
1
+ var translation = {
2
+
3
+ };
4
+
5
+ export { translation as default };
@@ -0,0 +1,5 @@
1
+ var translation = {
2
+
3
+ };
4
+
5
+ export { translation as default };
@@ -0,0 +1,5 @@
1
+ var translation = {
2
+
3
+ };
4
+
5
+ export { translation as default };