@ssa-ui-kit/core 3.19.1 → 3.20.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/AccordionGroup/Accordion.d.ts +3 -3
- package/dist/components/AccordionGroup/AccordionContent.d.ts +3 -3
- package/dist/components/AccordionGroup/AccordionGroup.d.ts +1 -1
- package/dist/components/AccordionGroup/AccordionTitle.d.ts +3 -3
- package/dist/components/AccordionGroup/types.d.ts +55 -5
- package/dist/components/Breadcrumbs/Breadcrumbs.d.ts +1 -1
- package/dist/components/Breadcrumbs/types.d.ts +11 -1
- package/dist/components/Button/Button.d.ts +6 -0
- package/dist/components/Button/fixtures.d.ts +11 -6
- package/dist/components/Button/styles.d.ts +10 -0
- package/dist/components/Button/types.d.ts +14 -0
- package/dist/components/ButtonGroup/ButtonGroup.d.ts +28 -1
- package/dist/components/ButtonGroup/ButtonGroupButton.d.ts +22 -0
- package/dist/components/ButtonGroup/ButtonGroupButtonBase.d.ts +23 -0
- package/dist/components/ButtonGroup/ButtonGroupContext.d.ts +9 -0
- package/dist/components/ButtonGroup/index.d.ts +2 -0
- package/dist/components/ButtonGroup/types.d.ts +92 -4
- package/dist/components/CardContent/CardContent.d.ts +9 -1
- package/dist/components/Checkbox/Checkbox.d.ts +1 -1
- package/dist/components/Checkbox/types.d.ts +29 -5
- package/dist/components/ColorPicker/ColorPicker.d.ts +1 -1
- package/dist/components/ColorPicker/types.d.ts +19 -5
- package/dist/components/Counter/Counter.d.ts +1 -1
- package/dist/components/Counter/types.d.ts +0 -5
- package/dist/components/Drawer/useDrawer.d.ts +27 -3
- package/dist/components/Dropdown/Dropdown.d.ts +1 -1
- package/dist/components/Dropdown/types.d.ts +4 -0
- package/dist/components/DropdownOption/DropdownOption.d.ts +17 -6
- package/dist/components/DropdownOptions/DropdownOptions.d.ts +1 -1
- package/dist/components/DropdownOptions/types.d.ts +8 -0
- package/dist/components/DropdownToggle/DropdownToggle.d.ts +2 -2
- package/dist/components/DropdownToggle/types.d.ts +24 -2
- package/dist/components/FileAttachment/FileAttachment.d.ts +1 -1
- package/dist/components/FileAttachment/types.d.ts +5 -0
- package/dist/components/FiltersMultiSelect/index.d.ts +1 -1
- package/dist/components/FiltersMultiSelect/useFiltersMultiSelect.d.ts +35 -3
- package/dist/components/IconButton/IconButton.d.ts +8 -1
- package/dist/components/IconButton/styles.d.ts +5 -1
- package/dist/components/IconButton/types.d.ts +20 -2
- package/dist/components/JsonSchemaForm/utils/selectWidget.d.ts +7 -1
- package/dist/components/Label/Label.d.ts +1 -1
- package/dist/components/Label/types.d.ts +5 -0
- package/dist/components/LargeTab/LargeTab.d.ts +1 -1
- package/dist/components/Link/Link.d.ts +24 -1
- package/dist/components/Link/Link.types.d.ts +14 -1
- package/dist/components/Link/index.d.ts +1 -0
- package/dist/components/Modal/Modal.d.ts +13 -5
- package/dist/components/Modal/types.d.ts +32 -4
- package/dist/components/ModalDialog/ModalDialog.d.ts +2 -2
- package/dist/components/ModalDialog/types.d.ts +10 -3
- package/dist/components/MultipleDropdown/types.d.ts +7 -0
- package/dist/components/MultipleDropdownOptions/MultipleDropdownOptions.d.ts +1 -1
- package/dist/components/MultipleDropdownOptions/types.d.ts +12 -0
- package/dist/components/Pagination/ArrowButton.d.ts +2 -2
- package/dist/components/Pagination/Pagination.d.ts +2 -2
- package/dist/components/Pagination/PaginationButtons.d.ts +2 -2
- package/dist/components/Pagination/types.d.ts +36 -0
- package/dist/components/Popover/types.d.ts +7 -0
- package/dist/components/ProgressBar/types.d.ts +18 -0
- package/dist/components/ProgressCircle/ProgressCircle.d.ts +1 -1
- package/dist/components/ProgressCircle/types.d.ts +10 -0
- package/dist/components/Radio/Radio.d.ts +1 -1
- package/dist/components/Radio/types.d.ts +13 -0
- package/dist/components/RadioGroup/RadioGroup.d.ts +1 -1
- package/dist/components/RadioGroup/types.d.ts +18 -1
- package/dist/components/Switch/Switch.d.ts +2 -2
- package/dist/components/Switch/types.d.ts +7 -0
- package/dist/components/Tab/Tab.d.ts +1 -1
- package/dist/components/TabBar/types.d.ts +8 -0
- package/dist/components/TableBody/TableBody.d.ts +1 -1
- package/dist/components/TableFilters/TableFiltersAccordionContent.d.ts +1 -1
- package/dist/components/TableFilters/types.d.ts +14 -0
- package/dist/components/TableRow/types.d.ts +8 -1
- package/dist/components/Tooltip/types.d.ts +21 -1
- package/dist/components/Typeahead/Typeahead.d.ts +2 -2
- package/dist/components/Typeahead/types.d.ts +26 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +4274 -1628
- package/dist/index.mjs +61628 -0
- package/dist/test-utils/axe.d.ts +23 -0
- package/dist/tsbuildcache +1 -0
- package/dist/utils/deprecation.d.ts +135 -0
- package/dist/utils/detectDuplicateInstance.d.ts +27 -0
- package/dist/utils/environment.d.ts +27 -0
- package/package.json +10 -9
|
@@ -16,8 +16,8 @@ import { AccordionViewProps } from './types';
|
|
|
16
16
|
* <Accordion
|
|
17
17
|
* id="accordion-1"
|
|
18
18
|
* title="Click to expand"
|
|
19
|
-
*
|
|
20
|
-
*
|
|
19
|
+
* aria-controls="panel-1"
|
|
20
|
+
* defaultOpen={false}
|
|
21
21
|
* renderTitle={AccordionTitle}
|
|
22
22
|
* renderContent={(props) => (
|
|
23
23
|
* <AccordionContent {...props}>
|
|
@@ -36,4 +36,4 @@ import { AccordionViewProps } from './types';
|
|
|
36
36
|
* - ARIA controls and labelledby attributes for accessibility
|
|
37
37
|
* - Keyboard accessible
|
|
38
38
|
*/
|
|
39
|
-
export declare const Accordion: (
|
|
39
|
+
export declare const Accordion: (props: AccordionViewProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
@@ -37,8 +37,8 @@ import { RenderContentProps } from './types';
|
|
|
37
37
|
* ```tsx
|
|
38
38
|
* // Custom content using AccordionContent props
|
|
39
39
|
* <Accordion
|
|
40
|
-
* renderContent={({
|
|
41
|
-
* <div {...props} style={{ display:
|
|
40
|
+
* renderContent={({ open, ...props }) => (
|
|
41
|
+
* <div {...props} style={{ display: open ? 'block' : 'none' }}>
|
|
42
42
|
* Custom content with conditional rendering
|
|
43
43
|
* </div>
|
|
44
44
|
* )}
|
|
@@ -47,6 +47,6 @@ import { RenderContentProps } from './types';
|
|
|
47
47
|
*
|
|
48
48
|
* @see {@link Accordion} - Parent component that uses this component
|
|
49
49
|
*/
|
|
50
|
-
export declare const AccordionContent: ({ isOpened, children, size, ...rest }: RenderContentProps & {
|
|
50
|
+
export declare const AccordionContent: ({ open, isOpened, children, size, ...rest }: RenderContentProps & {
|
|
51
51
|
children: React.ReactNode;
|
|
52
52
|
}) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
@@ -23,7 +23,7 @@ import { AccordionGroupProps } from './types';
|
|
|
23
23
|
* <Accordion
|
|
24
24
|
* id="first"
|
|
25
25
|
* title="First Section"
|
|
26
|
-
*
|
|
26
|
+
* aria-controls="first-panel"
|
|
27
27
|
* renderContent={(props) => (
|
|
28
28
|
* <AccordionContent {...props}>
|
|
29
29
|
* <p>Content for first section</p>
|
|
@@ -29,10 +29,10 @@ import { AccordionProps } from './types';
|
|
|
29
29
|
* ```tsx
|
|
30
30
|
* // Custom title using AccordionTitle as reference
|
|
31
31
|
* <Accordion
|
|
32
|
-
* renderTitle={({ title,
|
|
33
|
-
* <button onClick={onClick} aria-expanded={
|
|
32
|
+
* renderTitle={({ title, open, onClick }) => (
|
|
33
|
+
* <button onClick={onClick} aria-expanded={open}>
|
|
34
34
|
* <span>{title}</span>
|
|
35
|
-
* <Icon name={
|
|
35
|
+
* <Icon name={open ? "chevron-down" : "chevron-right"} />
|
|
36
36
|
* </button>
|
|
37
37
|
* )}
|
|
38
38
|
* />
|
|
@@ -26,7 +26,7 @@ type AccordionGroupChildren = React.ReactElement<React.PropsWithChildren<Accordi
|
|
|
26
26
|
* <Accordion
|
|
27
27
|
* id="first"
|
|
28
28
|
* title="First Accordion"
|
|
29
|
-
*
|
|
29
|
+
* aria-controls="first-panel"
|
|
30
30
|
* renderContent={(props) => (
|
|
31
31
|
* <AccordionContent {...props}>
|
|
32
32
|
* <p>Content for first accordion</p>
|
|
@@ -37,8 +37,8 @@ type AccordionGroupChildren = React.ReactElement<React.PropsWithChildren<Accordi
|
|
|
37
37
|
* <Accordion
|
|
38
38
|
* id="second"
|
|
39
39
|
* title="Second Accordion"
|
|
40
|
-
*
|
|
41
|
-
*
|
|
40
|
+
* aria-controls="second-panel"
|
|
41
|
+
* defaultOpen
|
|
42
42
|
* renderContent={(props) => (
|
|
43
43
|
* <AccordionContent {...props}>
|
|
44
44
|
* <p>Content for second accordion</p>
|
|
@@ -89,8 +89,8 @@ export interface AccordionGroupProps {
|
|
|
89
89
|
* <Accordion
|
|
90
90
|
* id="accordion-1"
|
|
91
91
|
* title="Click to expand"
|
|
92
|
-
*
|
|
93
|
-
*
|
|
92
|
+
* aria-controls="panel-1"
|
|
93
|
+
* defaultOpen={false}
|
|
94
94
|
* renderTitle={AccordionTitle}
|
|
95
95
|
* renderContent={(props) => (
|
|
96
96
|
* <AccordionContent {...props}>
|
|
@@ -117,6 +117,15 @@ export interface AccordionProps {
|
|
|
117
117
|
*/
|
|
118
118
|
renderTitle: (data: RenderContentProps & {
|
|
119
119
|
title: string;
|
|
120
|
+
/** Id of the content panel this title controls. */
|
|
121
|
+
'aria-controls'?: string;
|
|
122
|
+
/**
|
|
123
|
+
* Id of the content panel this title controls.
|
|
124
|
+
*
|
|
125
|
+
* @deprecated Read `aria-controls` instead — the `ariaControls` key is
|
|
126
|
+
* still passed for compatibility and is removed in the next major
|
|
127
|
+
* release.
|
|
128
|
+
*/
|
|
120
129
|
ariaControls?: string;
|
|
121
130
|
onClick?: () => void;
|
|
122
131
|
}) => React.ReactNode;
|
|
@@ -146,6 +155,13 @@ export type RenderContentProps = Pick<AccordionProps, 'id' | 'size'> & Pick<Aria
|
|
|
146
155
|
* Whether the accordion is currently open
|
|
147
156
|
* @default false
|
|
148
157
|
*/
|
|
158
|
+
open?: boolean;
|
|
159
|
+
/**
|
|
160
|
+
* Whether the accordion is currently open
|
|
161
|
+
*
|
|
162
|
+
* @deprecated Read `open` instead — `Accordion` passes both keys for the
|
|
163
|
+
* deprecation window and drops `isOpened` in the next major release.
|
|
164
|
+
*/
|
|
149
165
|
isOpened?: boolean;
|
|
150
166
|
/**
|
|
151
167
|
* Custom element type to render as
|
|
@@ -163,16 +179,50 @@ export type RenderContentProps = Pick<AccordionProps, 'id' | 'size'> & Pick<Aria
|
|
|
163
179
|
* like title, open state, and event handlers.
|
|
164
180
|
*/
|
|
165
181
|
export interface AccordionViewProps extends AccordionProps {
|
|
182
|
+
/**
|
|
183
|
+
* ARIA controls attribute
|
|
184
|
+
* Links the accordion header to its content panel, and is used as that
|
|
185
|
+
* panel's `id` — so it lands on the title button rather than on the
|
|
186
|
+
* accordion's own region element.
|
|
187
|
+
*/
|
|
188
|
+
'aria-controls'?: string;
|
|
166
189
|
/**
|
|
167
190
|
* ARIA controls attribute
|
|
168
191
|
* Links the accordion header to its content panel
|
|
169
192
|
* Should match the id of the content panel
|
|
193
|
+
*
|
|
194
|
+
* @deprecated Use `aria-controls` instead — `ariaControls` is removed in the
|
|
195
|
+
* next major release.
|
|
170
196
|
*/
|
|
171
197
|
ariaControls?: string;
|
|
172
198
|
/**
|
|
173
199
|
* Whether the accordion is currently open
|
|
200
|
+
*
|
|
201
|
+
* Normally injected by the parent `AccordionGroup`, which owns the open
|
|
202
|
+
* state. Setting it directly on an `Accordion` inside a group seeds that
|
|
203
|
+
* accordion's initial state on mount.
|
|
204
|
+
* @default false
|
|
205
|
+
*/
|
|
206
|
+
open?: boolean;
|
|
207
|
+
/**
|
|
208
|
+
* Whether the accordion starts open
|
|
209
|
+
*
|
|
210
|
+
* Read once by `AccordionGroup` on mount; the group owns the state from then
|
|
211
|
+
* on. Prefer this over `open` when all you want is an initially expanded
|
|
212
|
+
* accordion.
|
|
174
213
|
* @default false
|
|
175
214
|
*/
|
|
215
|
+
defaultOpen?: boolean;
|
|
216
|
+
/**
|
|
217
|
+
* Called when the accordion is toggled, with the state it is moving to
|
|
218
|
+
*/
|
|
219
|
+
onOpenChange?: (open: boolean) => void;
|
|
220
|
+
/**
|
|
221
|
+
* Whether the accordion is currently open
|
|
222
|
+
*
|
|
223
|
+
* @deprecated Use `open` (or `defaultOpen` for initial state) instead —
|
|
224
|
+
* `isOpened` is removed in the next major release.
|
|
225
|
+
*/
|
|
176
226
|
isOpened?: boolean;
|
|
177
227
|
/**
|
|
178
228
|
* Whether the accordion is hidden
|
|
@@ -20,4 +20,4 @@ import { BreadcrumbsProps } from './types';
|
|
|
20
20
|
* />
|
|
21
21
|
* ```
|
|
22
22
|
*/
|
|
23
|
-
export declare const Breadcrumbs: ({ items, maxItems, separator, ariaLabel, className, css, }: BreadcrumbsProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
|
|
23
|
+
export declare const Breadcrumbs: ({ items, maxItems, separator, "aria-label": ariaLabelNative, ariaLabel, className, css, }: BreadcrumbsProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
|
|
@@ -50,7 +50,17 @@ export interface BreadcrumbsProps extends CommonProps {
|
|
|
50
50
|
maxItems?: number;
|
|
51
51
|
/** Custom separator between crumbs. Defaults to a right chevron. */
|
|
52
52
|
separator?: React.ReactNode;
|
|
53
|
-
/**
|
|
53
|
+
/**
|
|
54
|
+
* Accessible label for the wrapping `nav`.
|
|
55
|
+
* @default 'Breadcrumb'
|
|
56
|
+
*/
|
|
57
|
+
'aria-label'?: string;
|
|
58
|
+
/**
|
|
59
|
+
* Accessible label for the wrapping `nav`.
|
|
60
|
+
*
|
|
61
|
+
* @deprecated Use `aria-label` instead — `ariaLabel` is removed in the next
|
|
62
|
+
* major release.
|
|
63
|
+
*/
|
|
54
64
|
ariaLabel?: string;
|
|
55
65
|
/** Custom Emotion styles applied to the wrapping `nav`. */
|
|
56
66
|
css?: Interpolation<Theme>;
|
|
@@ -42,6 +42,12 @@ import { ButtonProps } from './types';
|
|
|
42
42
|
*
|
|
43
43
|
* @example
|
|
44
44
|
* ```tsx
|
|
45
|
+
* // Loading: spinner replaces the label, button is disabled, width is unchanged
|
|
46
|
+
* <Button variant="primary" text="Save" loading={isSaving} onClick={handleSave} />
|
|
47
|
+
* ```
|
|
48
|
+
*
|
|
49
|
+
* @example
|
|
50
|
+
* ```tsx
|
|
45
51
|
* // Button with custom children
|
|
46
52
|
* <Button variant="secondary" onClick={handleAction}>
|
|
47
53
|
* <span>Custom Content</span>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import Icon from '../Icon';
|
|
2
2
|
import { ButtonProps } from './types';
|
|
3
|
-
export type TestPropsType = Omit<ButtonProps, 'isDisabled' | 'startIcon' | 'endIcon'> & {
|
|
3
|
+
export type TestPropsType = Omit<ButtonProps, 'isDisabled' | 'disabled' | 'startIcon' | 'endIcon'> & {
|
|
4
4
|
disabled?: boolean;
|
|
5
5
|
startIcon?: React.ComponentProps<typeof Icon>['name'];
|
|
6
6
|
endIcon?: React.ComponentProps<typeof Icon>['name'];
|
|
@@ -12,7 +12,7 @@ export declare const secondaryBtnSpecs: {
|
|
|
12
12
|
"aria-labelledby"?: string | undefined | undefined;
|
|
13
13
|
"aria-label"?: string | undefined | undefined;
|
|
14
14
|
"aria-describedby"?: string | undefined | undefined;
|
|
15
|
-
"aria-disabled"?: (boolean | "
|
|
15
|
+
"aria-disabled"?: (boolean | "true" | "false") | undefined;
|
|
16
16
|
"aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
|
|
17
17
|
"aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
|
|
18
18
|
block?: boolean | undefined;
|
|
@@ -20,6 +20,7 @@ export declare const secondaryBtnSpecs: {
|
|
|
20
20
|
startIconClassName?: string | undefined;
|
|
21
21
|
endIconClassName?: string | undefined;
|
|
22
22
|
type?: "button" | "reset" | "submit" | undefined;
|
|
23
|
+
loading?: boolean | undefined;
|
|
23
24
|
className?: string | undefined;
|
|
24
25
|
onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
|
|
25
26
|
children?: import("react").ReactNode;
|
|
@@ -33,7 +34,7 @@ export declare const tertiaryBtnSpecs: {
|
|
|
33
34
|
"aria-labelledby"?: string | undefined | undefined;
|
|
34
35
|
"aria-label"?: string | undefined | undefined;
|
|
35
36
|
"aria-describedby"?: string | undefined | undefined;
|
|
36
|
-
"aria-disabled"?: (boolean | "
|
|
37
|
+
"aria-disabled"?: (boolean | "true" | "false") | undefined;
|
|
37
38
|
"aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
|
|
38
39
|
"aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
|
|
39
40
|
block?: boolean | undefined;
|
|
@@ -41,6 +42,7 @@ export declare const tertiaryBtnSpecs: {
|
|
|
41
42
|
startIconClassName?: string | undefined;
|
|
42
43
|
endIconClassName?: string | undefined;
|
|
43
44
|
type?: "button" | "reset" | "submit" | undefined;
|
|
45
|
+
loading?: boolean | undefined;
|
|
44
46
|
className?: string | undefined;
|
|
45
47
|
onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
|
|
46
48
|
children?: import("react").ReactNode;
|
|
@@ -54,7 +56,7 @@ export declare const errorBtnSpecs: {
|
|
|
54
56
|
"aria-labelledby"?: string | undefined | undefined;
|
|
55
57
|
"aria-label"?: string | undefined | undefined;
|
|
56
58
|
"aria-describedby"?: string | undefined | undefined;
|
|
57
|
-
"aria-disabled"?: (boolean | "
|
|
59
|
+
"aria-disabled"?: (boolean | "true" | "false") | undefined;
|
|
58
60
|
"aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
|
|
59
61
|
"aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
|
|
60
62
|
block?: boolean | undefined;
|
|
@@ -62,6 +64,7 @@ export declare const errorBtnSpecs: {
|
|
|
62
64
|
startIconClassName?: string | undefined;
|
|
63
65
|
endIconClassName?: string | undefined;
|
|
64
66
|
type?: "button" | "reset" | "submit" | undefined;
|
|
67
|
+
loading?: boolean | undefined;
|
|
65
68
|
className?: string | undefined;
|
|
66
69
|
onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
|
|
67
70
|
children?: import("react").ReactNode;
|
|
@@ -75,7 +78,7 @@ export declare const warningBtnSpecs: {
|
|
|
75
78
|
"aria-labelledby"?: string | undefined | undefined;
|
|
76
79
|
"aria-label"?: string | undefined | undefined;
|
|
77
80
|
"aria-describedby"?: string | undefined | undefined;
|
|
78
|
-
"aria-disabled"?: (boolean | "
|
|
81
|
+
"aria-disabled"?: (boolean | "true" | "false") | undefined;
|
|
79
82
|
"aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
|
|
80
83
|
"aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
|
|
81
84
|
block?: boolean | undefined;
|
|
@@ -83,6 +86,7 @@ export declare const warningBtnSpecs: {
|
|
|
83
86
|
startIconClassName?: string | undefined;
|
|
84
87
|
endIconClassName?: string | undefined;
|
|
85
88
|
type?: "button" | "reset" | "submit" | undefined;
|
|
89
|
+
loading?: boolean | undefined;
|
|
86
90
|
className?: string | undefined;
|
|
87
91
|
onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
|
|
88
92
|
children?: import("react").ReactNode;
|
|
@@ -96,7 +100,7 @@ export declare const successBtnSpecs: {
|
|
|
96
100
|
"aria-labelledby"?: string | undefined | undefined;
|
|
97
101
|
"aria-label"?: string | undefined | undefined;
|
|
98
102
|
"aria-describedby"?: string | undefined | undefined;
|
|
99
|
-
"aria-disabled"?: (boolean | "
|
|
103
|
+
"aria-disabled"?: (boolean | "true" | "false") | undefined;
|
|
100
104
|
"aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
|
|
101
105
|
"aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
|
|
102
106
|
block?: boolean | undefined;
|
|
@@ -104,6 +108,7 @@ export declare const successBtnSpecs: {
|
|
|
104
108
|
startIconClassName?: string | undefined;
|
|
105
109
|
endIconClassName?: string | undefined;
|
|
106
110
|
type?: "button" | "reset" | "submit" | undefined;
|
|
111
|
+
loading?: boolean | undefined;
|
|
107
112
|
className?: string | undefined;
|
|
108
113
|
onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
|
|
109
114
|
children?: import("react").ReactNode;
|
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
import { SerializedStyles } from '@emotion/react';
|
|
2
2
|
import { ButtonVariants } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* Keeps the button at its resting width while loading: the real content stays
|
|
5
|
+
* in the layout but is hidden, and the spinner is centred over it.
|
|
6
|
+
*
|
|
7
|
+
* `display: contents` leaves the children as direct flex items of the button,
|
|
8
|
+
* so the loading state measures exactly the same as the resting state.
|
|
9
|
+
* `&&` outweighs `buttonBlock`'s `span { … }` rule in block mode.
|
|
10
|
+
*/
|
|
11
|
+
export declare const loadingContent: SerializedStyles;
|
|
12
|
+
export declare const loadingSpinner: SerializedStyles;
|
|
3
13
|
export declare const buttonBlock: SerializedStyles;
|
|
4
14
|
export declare const iconWrapperRight: SerializedStyles;
|
|
5
15
|
export declare const iconWrapperLeft: SerializedStyles;
|
|
@@ -91,6 +91,20 @@ export interface ButtonProps extends ButtonAriaProps {
|
|
|
91
91
|
* Disables the button, preventing user interaction
|
|
92
92
|
* @default false
|
|
93
93
|
*/
|
|
94
|
+
disabled?: boolean;
|
|
95
|
+
/**
|
|
96
|
+
* Shows a spinner in place of the button's content and disables interaction.
|
|
97
|
+
* The button keeps its resting width, so a row of buttons does not reflow.
|
|
98
|
+
* Also sets `aria-busy`.
|
|
99
|
+
* @default false
|
|
100
|
+
*/
|
|
101
|
+
loading?: boolean;
|
|
102
|
+
/**
|
|
103
|
+
* Disables the button, preventing user interaction
|
|
104
|
+
*
|
|
105
|
+
* @deprecated Use `disabled` instead. Removed in the next major release.
|
|
106
|
+
* @default false
|
|
107
|
+
*/
|
|
94
108
|
isDisabled?: boolean;
|
|
95
109
|
/**
|
|
96
110
|
* Custom CSS class name for the button
|
|
@@ -1,2 +1,29 @@
|
|
|
1
1
|
import { ButtonGroupProps } from './types';
|
|
2
|
-
|
|
2
|
+
/**
|
|
3
|
+
* ButtonGroup - A row of mutually exclusive buttons.
|
|
4
|
+
*
|
|
5
|
+
* Two ways to declare the buttons:
|
|
6
|
+
* - **Composed** — `ButtonGroupButton` children. Use when a button needs an
|
|
7
|
+
* icon or custom markup.
|
|
8
|
+
* - **Data-driven** — the `items` prop. Compact, but limited to plain labels.
|
|
9
|
+
*
|
|
10
|
+
* Selection can be controlled (`value`) or left to the group (`defaultValue`).
|
|
11
|
+
* Either accepts a bare `id` or a whole item.
|
|
12
|
+
*
|
|
13
|
+
* @category Form Controls
|
|
14
|
+
* @subcategory Action
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* ```tsx
|
|
18
|
+
* <ButtonGroup items={items} value={period} onClick={({ id }) => setPeriod(id)} />
|
|
19
|
+
* ```
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* ```tsx
|
|
23
|
+
* <ButtonGroup value={period} onClick={({ id }) => setPeriod(id)}>
|
|
24
|
+
* <ButtonGroupButton id="24h">24h</ButtonGroupButton>
|
|
25
|
+
* <ButtonGroupButton id="7d">7 days</ButtonGroupButton>
|
|
26
|
+
* </ButtonGroup>
|
|
27
|
+
* ```
|
|
28
|
+
*/
|
|
29
|
+
export declare const ButtonGroup: (props: ButtonGroupProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { ButtonGroupButtonProps } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* ButtonGroupButton - One button inside a composed `ButtonGroup`.
|
|
4
|
+
*
|
|
5
|
+
* Reads selection state from the enclosing group, so it only needs an `id`.
|
|
6
|
+
* Use this instead of the group's `items` prop when a button needs an icon,
|
|
7
|
+
* custom markup, or anything else `ButtonGroupItem` cannot express.
|
|
8
|
+
*
|
|
9
|
+
* @category Form Controls
|
|
10
|
+
* @subcategory Action
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```tsx
|
|
14
|
+
* <ButtonGroup value={period} onClick={({ id }) => setPeriod(id)}>
|
|
15
|
+
* <ButtonGroupButton id="24h">24h</ButtonGroupButton>
|
|
16
|
+
* <ButtonGroupButton id="7d">
|
|
17
|
+
* <Icon name="calendar" size={14} /> 7 days
|
|
18
|
+
* </ButtonGroupButton>
|
|
19
|
+
* </ButtonGroup>
|
|
20
|
+
* ```
|
|
21
|
+
*/
|
|
22
|
+
export declare const ButtonGroupButton: ({ id, children, text, disabled, onClick, className, }: ButtonGroupButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { SerializedStyles } from '@emotion/react';
|
|
3
|
+
interface ButtonGroupButtonBaseProps {
|
|
4
|
+
isActive: boolean;
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
onClick: () => void;
|
|
7
|
+
buttonStyles?: SerializedStyles;
|
|
8
|
+
className?: string;
|
|
9
|
+
children?: ReactNode;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* The button markup shared by both of `ButtonGroup`'s APIs.
|
|
13
|
+
*
|
|
14
|
+
* `ButtonGroupButton` wires this to the group context; the `items` path renders
|
|
15
|
+
* it directly, so it can keep reporting the caller's own item object rather
|
|
16
|
+
* than one reassembled from props. Everything visual — the secondary/small
|
|
17
|
+
* variant, the `active` class the styles key off, `aria-pressed` — lives here
|
|
18
|
+
* once.
|
|
19
|
+
*
|
|
20
|
+
* Internal: not exported from the package.
|
|
21
|
+
*/
|
|
22
|
+
export declare const ButtonGroupButtonBase: ({ isActive, disabled, onClick, buttonStyles, className, children, }: ButtonGroupButtonBaseProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
23
|
+
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ButtonGroupContextValue } from './types';
|
|
2
|
+
export declare const ButtonGroupContext: import("react").Context<ButtonGroupContextValue | null>;
|
|
3
|
+
/**
|
|
4
|
+
* Access the enclosing `ButtonGroup`'s selection state.
|
|
5
|
+
*
|
|
6
|
+
* @throws if used outside a `ButtonGroup` — a `ButtonGroupButton` on its own has
|
|
7
|
+
* no group to report to, which is a wiring mistake rather than a fallback case.
|
|
8
|
+
*/
|
|
9
|
+
export declare const useButtonGroupContext: () => ButtonGroupContextValue;
|
|
@@ -1,13 +1,101 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
1
2
|
import { SerializedStyles } from '@emotion/react';
|
|
2
3
|
export type ButtonGroupItem = {
|
|
3
4
|
id: string | number;
|
|
4
5
|
text: string;
|
|
6
|
+
/** Renders this item's button as disabled. */
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
/**
|
|
9
|
+
* @deprecated Use `disabled` instead. Removed in the next major release.
|
|
10
|
+
*/
|
|
5
11
|
isDisabled?: boolean;
|
|
6
12
|
};
|
|
13
|
+
/**
|
|
14
|
+
* A selection, expressed either as the item itself or — usually more
|
|
15
|
+
* convenient — as just its `id`. The group only ever compares ids, so the two
|
|
16
|
+
* forms are equivalent.
|
|
17
|
+
*/
|
|
18
|
+
export type ButtonGroupValue = ButtonGroupItem | ButtonGroupItem['id'];
|
|
7
19
|
export interface ButtonGroupProps {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
20
|
+
/**
|
|
21
|
+
* Buttons to render, as `ButtonGroupButton` children. When provided, `items`
|
|
22
|
+
* is ignored — use this when a button needs an icon, custom markup, or
|
|
23
|
+
* anything else `ButtonGroupItem` cannot express.
|
|
24
|
+
*
|
|
25
|
+
* Note that an uncontrolled group in children mode starts with **nothing**
|
|
26
|
+
* selected; pass `defaultValue` to preselect. (The `items` API preselects the
|
|
27
|
+
* first item, which it can only do because it can see the list.)
|
|
28
|
+
*/
|
|
29
|
+
children?: ReactNode;
|
|
30
|
+
/**
|
|
31
|
+
* Buttons to render, as data. Ignored when `children` are provided.
|
|
32
|
+
*/
|
|
33
|
+
items?: Array<ButtonGroupItem>;
|
|
34
|
+
/**
|
|
35
|
+
* Active selection, for the controlled pattern. When provided, the parent
|
|
36
|
+
* owns the selection and the group only reports intent through `onClick`.
|
|
37
|
+
*
|
|
38
|
+
* Pass the item's `id` (recommended) or the whole item:
|
|
39
|
+
* `value="unread"` or `value={{ id: 'unread', text: 'Unread' }}`.
|
|
40
|
+
*/
|
|
41
|
+
value?: ButtonGroupValue;
|
|
42
|
+
/**
|
|
43
|
+
* Initial selection, as an `id` or the whole item. Only used when neither
|
|
44
|
+
* `value` nor the deprecated `selectedItem` / `externalState` are provided;
|
|
45
|
+
* otherwise the group falls back to the first item.
|
|
46
|
+
*/
|
|
47
|
+
defaultValue?: ButtonGroupValue;
|
|
48
|
+
/**
|
|
49
|
+
* Also accepts a bare `id`, like `value`.
|
|
50
|
+
*
|
|
51
|
+
* @deprecated Use `value` for the controlled pattern, or `defaultValue` for
|
|
52
|
+
* the initial selection. Removed in the next major release.
|
|
53
|
+
*/
|
|
54
|
+
selectedItem?: ButtonGroupValue;
|
|
55
|
+
/**
|
|
56
|
+
* Also accepts a bare `id`, like `value`.
|
|
57
|
+
*
|
|
58
|
+
* @deprecated Use `value` instead. Removed in the next major release.
|
|
59
|
+
* Note the semantics differ slightly: `externalState` is synced *into*
|
|
60
|
+
* internal state, so the group still moves on click even when the parent
|
|
61
|
+
* ignores `onClick`. `value` is fully controlled.
|
|
62
|
+
*/
|
|
63
|
+
externalState?: ButtonGroupValue;
|
|
64
|
+
/**
|
|
65
|
+
* Called with the clicked item. Optional — an uncontrolled group that only
|
|
66
|
+
* needs to track its own selection needs no handler.
|
|
67
|
+
*
|
|
68
|
+
* In children mode the group cannot see an item list, so it reports
|
|
69
|
+
* `{ id, text, disabled }` assembled from the clicked `ButtonGroupButton`'s
|
|
70
|
+
* props — `id` is always accurate, `text` is only populated when the button's
|
|
71
|
+
* content is a plain string or its `text` prop is set. Prefer reading `id`,
|
|
72
|
+
* or give each button its own `onClick`.
|
|
73
|
+
*/
|
|
74
|
+
onClick?: (item: ButtonGroupItem) => void;
|
|
75
|
+
buttonStyles?: SerializedStyles;
|
|
76
|
+
}
|
|
77
|
+
export interface ButtonGroupButtonProps {
|
|
78
|
+
/** Identifies this button within the group; matched against `value`. */
|
|
79
|
+
id: ButtonGroupItem['id'];
|
|
80
|
+
/** Button content — text, an icon, or any markup. */
|
|
81
|
+
children?: ReactNode;
|
|
82
|
+
/**
|
|
83
|
+
* Plain-text label for this button, used when the group reports the clicked
|
|
84
|
+
* item through its `onClick`. Only needed when `children` is not a string.
|
|
85
|
+
*/
|
|
86
|
+
text?: string;
|
|
87
|
+
/** Renders this button as disabled. */
|
|
88
|
+
disabled?: boolean;
|
|
89
|
+
/**
|
|
90
|
+
* Fired when this button is clicked, in addition to the group's `onClick`.
|
|
91
|
+
* The idiomatic handler in children mode.
|
|
92
|
+
*/
|
|
93
|
+
onClick?: () => void;
|
|
94
|
+
/** Custom CSS class name, merged with the group's active-state class. */
|
|
95
|
+
className?: string;
|
|
96
|
+
}
|
|
97
|
+
export interface ButtonGroupContextValue {
|
|
98
|
+
activeId?: ButtonGroupItem['id'];
|
|
99
|
+
onSelect: (item: ButtonGroupItem) => void;
|
|
12
100
|
buttonStyles?: SerializedStyles;
|
|
13
101
|
}
|
|
@@ -4,8 +4,16 @@ export interface CardProps extends CommonProps {
|
|
|
4
4
|
style?: React.CSSProperties;
|
|
5
5
|
direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
|
|
6
6
|
className?: string;
|
|
7
|
+
/** Id of the element labelling this content region. */
|
|
8
|
+
'aria-labelledby'?: string;
|
|
9
|
+
/**
|
|
10
|
+
* Id of the element labelling this content region.
|
|
11
|
+
*
|
|
12
|
+
* @deprecated Use `aria-labelledby` instead — `ariaLabelledby` is removed in
|
|
13
|
+
* the next major release.
|
|
14
|
+
*/
|
|
7
15
|
ariaLabelledby?: string;
|
|
8
16
|
role?: string;
|
|
9
17
|
}
|
|
10
|
-
declare const CardContent: ({ children, ...props }: CardProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
18
|
+
declare const CardContent: ({ children, "aria-labelledby": ariaLabelledbyNative, ariaLabelledby, ...props }: CardProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
11
19
|
export default CardContent;
|
|
@@ -83,5 +83,5 @@ import { CheckboxProps } from './types';
|
|
|
83
83
|
*
|
|
84
84
|
* @requires React Hook Form when using `register` prop
|
|
85
85
|
*/
|
|
86
|
-
declare const Checkbox: (
|
|
86
|
+
declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
87
87
|
export default Checkbox;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
2
|
import { Control, FieldPath, FieldValues, UseFormReturn } from 'react-hook-form';
|
|
3
3
|
/**
|
|
4
4
|
* Props for the Checkbox component
|
|
@@ -55,9 +55,23 @@ export interface CheckboxProps extends Partial<Pick<UseFormReturn, 'register'>>
|
|
|
55
55
|
* Receives the new checked state (boolean) as parameter
|
|
56
56
|
*/
|
|
57
57
|
onChange?: (newState: boolean) => void;
|
|
58
|
+
/**
|
|
59
|
+
* Checked state, for the controlled pattern. When provided, the parent owns
|
|
60
|
+
* the value: the checkbox renders exactly what it is given and only reports
|
|
61
|
+
* intent through `onChange`.
|
|
62
|
+
*
|
|
63
|
+
* Note this is stricter than the deprecated `externalState`, which let the
|
|
64
|
+
* checkbox also toggle itself.
|
|
65
|
+
*/
|
|
66
|
+
checked?: boolean;
|
|
58
67
|
/**
|
|
59
68
|
* External state control - allows parent component to control checkbox state
|
|
60
69
|
* When provided, the checkbox becomes controlled
|
|
70
|
+
*
|
|
71
|
+
* @deprecated Use `checked` instead. Removed in the next major release.
|
|
72
|
+
* Note the semantics differ slightly: `externalState` is synced *into*
|
|
73
|
+
* internal state, so the checkbox still toggles on click even when the
|
|
74
|
+
* parent ignores `onChange`. `checked` is fully controlled.
|
|
61
75
|
*/
|
|
62
76
|
externalState?: boolean;
|
|
63
77
|
/**
|
|
@@ -65,12 +79,26 @@ export interface CheckboxProps extends Partial<Pick<UseFormReturn, 'register'>>
|
|
|
65
79
|
* Disabled checkboxes cannot be interacted with and appear visually muted
|
|
66
80
|
* @default false
|
|
67
81
|
*/
|
|
82
|
+
disabled?: boolean;
|
|
83
|
+
/**
|
|
84
|
+
* Whether the checkbox is disabled
|
|
85
|
+
*
|
|
86
|
+
* @deprecated Use `disabled` instead. Removed in the next major release.
|
|
87
|
+
* @default false
|
|
88
|
+
*/
|
|
68
89
|
isDisabled?: boolean;
|
|
69
90
|
/**
|
|
70
91
|
* Initial checked state when component mounts
|
|
71
92
|
* Only used for uncontrolled checkboxes
|
|
72
93
|
* @default false
|
|
73
94
|
*/
|
|
95
|
+
defaultChecked?: boolean;
|
|
96
|
+
/**
|
|
97
|
+
* Initial checked state when component mounts
|
|
98
|
+
*
|
|
99
|
+
* @deprecated Use `defaultChecked` instead. Removed in the next major release.
|
|
100
|
+
* @default false
|
|
101
|
+
*/
|
|
74
102
|
initialState?: boolean;
|
|
75
103
|
/**
|
|
76
104
|
* Indeterminate state - represents a partially selected state
|
|
@@ -90,10 +118,6 @@ export interface CheckboxProps extends Partial<Pick<UseFormReturn, 'register'>>
|
|
|
90
118
|
* @default false
|
|
91
119
|
*/
|
|
92
120
|
isRequired?: boolean;
|
|
93
|
-
/**
|
|
94
|
-
* Ref object to access the underlying input element
|
|
95
|
-
*/
|
|
96
|
-
ref?: RefObject<HTMLInputElement>;
|
|
97
121
|
/**
|
|
98
122
|
* Color variant of the checkbox — controls the checked and focus-state colors.
|
|
99
123
|
* Sourced from `theme.palette`:
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { ColorPickerProps } from './types';
|
|
2
2
|
import '@rc-component/color-picker/assets/index.css';
|
|
3
|
-
export declare const ColorPicker: ({ color
|
|
3
|
+
export declare const ColorPicker: ({ value, color, defaultValue, defaultColor, format: providedFormat, colorsPalette, ...rest }: ColorPickerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|