@ssa-ui-kit/core 3.19.1 → 3.20.0
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 +4262 -1628
- package/dist/index.mjs +61616 -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 +18 -0
- package/package.json +10 -9
|
@@ -3,11 +3,25 @@ import { SmallTabProps, TabProps } from '../TabBar/types';
|
|
|
3
3
|
import { COLOR_FORMAT } from './constants';
|
|
4
4
|
export type ColorFormat = keyof typeof COLOR_FORMAT;
|
|
5
5
|
export interface ColorPickerProps {
|
|
6
|
+
/**
|
|
7
|
+
* Controlled colour value. When provided, the parent owns the value.
|
|
8
|
+
*/
|
|
9
|
+
value?: string;
|
|
10
|
+
/**
|
|
11
|
+
* Initial colour value, for uncontrolled mode.
|
|
12
|
+
*/
|
|
13
|
+
defaultValue?: string;
|
|
14
|
+
/**
|
|
15
|
+
* @deprecated Use `defaultValue` instead. Removed in the next major release.
|
|
16
|
+
*/
|
|
6
17
|
defaultColor?: string;
|
|
18
|
+
/**
|
|
19
|
+
* @deprecated Use `value` instead. Removed in the next major release.
|
|
20
|
+
*/
|
|
21
|
+
color?: string;
|
|
7
22
|
defaultFormat?: ColorFormat;
|
|
8
23
|
disabledAlpha?: boolean;
|
|
9
24
|
disabled?: boolean;
|
|
10
|
-
color?: string;
|
|
11
25
|
format?: ColorFormat;
|
|
12
26
|
label?: string;
|
|
13
27
|
colorsPalette?: string[];
|
|
@@ -21,17 +35,17 @@ export interface ColorPickerProps {
|
|
|
21
35
|
};
|
|
22
36
|
onChange?: (color: string) => void;
|
|
23
37
|
}
|
|
24
|
-
export type ColorPickerProviderInputProps = Omit<ColorPickerProps, 'color' | 'format'> & {
|
|
25
|
-
providedColor: ColorPickerProps['
|
|
38
|
+
export type ColorPickerProviderInputProps = Omit<ColorPickerProps, 'color' | 'value' | 'defaultValue' | 'format'> & {
|
|
39
|
+
providedColor: ColorPickerProps['value'];
|
|
26
40
|
providedFormat: ColorPickerProps['format'];
|
|
27
41
|
};
|
|
28
|
-
export type ColorPickerProviderOutputProps = Omit<ColorPickerProps, 'color'> & {
|
|
42
|
+
export type ColorPickerProviderOutputProps = Omit<ColorPickerProps, 'color' | 'value' | 'defaultValue'> & {
|
|
29
43
|
rawColor?: string | Color;
|
|
30
44
|
format: ColorFormat;
|
|
31
45
|
copy: (valueToCopy: string) => void;
|
|
32
46
|
setRawColor: (color: string | Color) => void;
|
|
33
47
|
setFormat: (format: ColorFormat) => void;
|
|
34
48
|
};
|
|
35
|
-
export type ColorPickerTabProps = Pick<TabProps, 'tabId' | 'isActive' | '
|
|
49
|
+
export type ColorPickerTabProps = Pick<TabProps, 'tabId' | 'isActive' | 'aria-controls' | 'onClick'> & Pick<SmallTabProps, 'text'> & {
|
|
36
50
|
isActive?: boolean;
|
|
37
51
|
};
|
|
@@ -56,5 +56,5 @@ import { CounterProps } from './types';
|
|
|
56
56
|
* <Counter count={3} css={{ marginLeft: 8, borderRadius: 4 }} />
|
|
57
57
|
* ```
|
|
58
58
|
*/
|
|
59
|
-
export declare const Counter: (
|
|
59
|
+
export declare const Counter: import("react").ForwardRefExoticComponent<CounterProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
60
60
|
export default Counter;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import { MainSizes } from '../../types/global';
|
|
3
2
|
import { ColorsKeys } from '../../types/emotion';
|
|
4
3
|
import { Interpolation, SerializedStyles, Theme } from '@emotion/react';
|
|
@@ -50,8 +49,4 @@ export type CounterProps = {
|
|
|
50
49
|
* Use for one-off layout adjustments (e.g. margins, positioning).
|
|
51
50
|
*/
|
|
52
51
|
css?: Interpolation<Theme>;
|
|
53
|
-
/**
|
|
54
|
-
* Ref forwarded to the root `<div>` element.
|
|
55
|
-
*/
|
|
56
|
-
ref?: React.Ref<HTMLDivElement>;
|
|
57
52
|
};
|
|
@@ -1,16 +1,40 @@
|
|
|
1
1
|
import { OpenChangeReason } from '@floating-ui/react';
|
|
2
2
|
export type Position = 'left' | 'right' | 'top' | 'bottom';
|
|
3
3
|
export type UseDrawerOptions = {
|
|
4
|
+
/**
|
|
5
|
+
* Controlled open state. When provided, the drawer is fully controlled and
|
|
6
|
+
* the parent must update it from `onOpenChange`.
|
|
7
|
+
*/
|
|
8
|
+
open?: boolean;
|
|
9
|
+
/** Initial open state for an uncontrolled drawer. */
|
|
10
|
+
defaultOpen?: boolean;
|
|
11
|
+
/**
|
|
12
|
+
* Controlled open state.
|
|
13
|
+
*
|
|
14
|
+
* @deprecated Use `open` instead — `opened` is removed in the next major
|
|
15
|
+
* release.
|
|
16
|
+
*/
|
|
4
17
|
opened?: boolean;
|
|
5
|
-
|
|
18
|
+
/**
|
|
19
|
+
* Initial open state for an uncontrolled drawer.
|
|
20
|
+
*
|
|
21
|
+
* @deprecated Use `defaultOpen` instead — `defaultOpened` is removed in the
|
|
22
|
+
* next major release.
|
|
23
|
+
*/
|
|
6
24
|
defaultOpened?: boolean;
|
|
25
|
+
duration?: number;
|
|
7
26
|
dismissable?: boolean;
|
|
8
27
|
position?: Position;
|
|
9
28
|
title?: string;
|
|
10
29
|
withCloseButton?: boolean;
|
|
11
30
|
onOpenChange?: (open: boolean, event?: Event, reason?: OpenChangeReason) => void;
|
|
12
31
|
};
|
|
13
|
-
export declare const useDrawer: (
|
|
32
|
+
export declare const useDrawer: (options?: UseDrawerOptions) => {
|
|
33
|
+
open: boolean;
|
|
34
|
+
/**
|
|
35
|
+
* @deprecated Read `open` instead — the `opened` key is removed from the
|
|
36
|
+
* store in the next major release.
|
|
37
|
+
*/
|
|
14
38
|
opened: boolean;
|
|
15
39
|
dismissable: boolean;
|
|
16
40
|
position: Position;
|
|
@@ -43,6 +67,6 @@ export declare const useDrawer: ({ opened, duration, defaultOpened, dismissable,
|
|
|
43
67
|
portalNode: HTMLElement | null;
|
|
44
68
|
setFloating: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
|
|
45
69
|
setPortalNode: import("react").Dispatch<import("react").SetStateAction<HTMLElement | null>>;
|
|
46
|
-
toggle: (
|
|
70
|
+
toggle: (nextOpen?: boolean) => void;
|
|
47
71
|
};
|
|
48
72
|
export type UseDrawerStore = ReturnType<typeof useDrawer>;
|
|
@@ -94,5 +94,5 @@ import { DropdownProps } from './types';
|
|
|
94
94
|
*
|
|
95
95
|
* @see https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
|
|
96
96
|
*/
|
|
97
|
-
declare const Dropdown: <T extends DropdownOptionProps>({ selectedItem, isDisabled, isOpen: isInitOpen, children, onChange: handleChange, className, placeholder, maxHeight, avatarBorder, label, helperText, errors, success, icon, dropdownProps: componentProps, }: DropdownProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
97
|
+
declare const Dropdown: <T extends DropdownOptionProps>({ selectedItem, disabled, isDisabled, isOpen: isInitOpen, children, onChange: handleChange, className, placeholder, maxHeight, avatarBorder, label, helperText, errors, success, icon, dropdownProps: componentProps, }: DropdownProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
98
98
|
export default Dropdown;
|
|
@@ -70,6 +70,10 @@ export interface DropdownProps<P extends DropdownOptionProps> extends CommonProp
|
|
|
70
70
|
* Disabled dropdowns cannot be opened or interacted with
|
|
71
71
|
* @default false
|
|
72
72
|
*/
|
|
73
|
+
disabled?: boolean;
|
|
74
|
+
/**
|
|
75
|
+
* @deprecated Use `disabled` instead. Removed in the next major release.
|
|
76
|
+
*/
|
|
73
77
|
isDisabled?: boolean;
|
|
74
78
|
/**
|
|
75
79
|
* Placeholder text displayed when no item is selected
|
|
@@ -1,10 +1,16 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Theme } from '@emotion/react';
|
|
3
2
|
import { CommonProps } from '../../types/emotion';
|
|
4
|
-
interface DropdownItemProps extends CommonProps {
|
|
3
|
+
export interface DropdownItemProps extends CommonProps, Omit<React.LiHTMLAttributes<HTMLLIElement>, 'value' | 'onClick'> {
|
|
5
4
|
onClick?: (e: React.MouseEvent<HTMLElement>) => void;
|
|
6
5
|
isActive?: boolean;
|
|
7
6
|
isMultiple?: boolean;
|
|
7
|
+
/** Whether this option is disabled. Only styled in `isMultiple` mode. */
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
/**
|
|
10
|
+
* Whether this option is disabled.
|
|
11
|
+
*
|
|
12
|
+
* @deprecated Use `disabled` instead. Removed in the next major release.
|
|
13
|
+
*/
|
|
8
14
|
isDisabled?: boolean;
|
|
9
15
|
noHover?: boolean;
|
|
10
16
|
value?: string | number | boolean;
|
|
@@ -13,8 +19,13 @@ interface DropdownItemProps extends CommonProps {
|
|
|
13
19
|
/** Avatar or icon to display before the option content (e.g. <Avatar size={20} image={url} />) */
|
|
14
20
|
avatar?: React.ReactNode;
|
|
15
21
|
}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
22
|
+
/**
|
|
23
|
+
* DropdownOption - A single selectable row inside `Dropdown` or
|
|
24
|
+
* `MultipleDropdown`.
|
|
25
|
+
*
|
|
26
|
+
* Thin wrapper over a styled `<li>`. It exists so that `disabled` can be
|
|
27
|
+
* accepted as the supported prop name without emotion forwarding it to the
|
|
28
|
+
* DOM, where `disabled` is not valid on an `<li>`.
|
|
29
|
+
*/
|
|
30
|
+
declare const DropdownOption: React.ForwardRefExoticComponent<DropdownItemProps & React.RefAttributes<HTMLLIElement>>;
|
|
20
31
|
export default DropdownOption;
|
|
@@ -35,5 +35,5 @@ import { DropdownItemsListProps } from './types';
|
|
|
35
35
|
* - Supports keyboard navigation (Arrow keys, Enter, Escape)
|
|
36
36
|
* - Screen reader friendly
|
|
37
37
|
*/
|
|
38
|
-
declare const DropdownOptions: ({ ariaLabelledby, id, children, }: DropdownItemsListProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
38
|
+
declare const DropdownOptions: ({ "aria-labelledby": ariaLabelledbyNative, ariaLabelledby, id, children, }: DropdownItemsListProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
39
39
|
export default DropdownOptions;
|
|
@@ -17,6 +17,14 @@ export interface DropdownItemsListProps extends CommonProps {
|
|
|
17
17
|
* ARIA label reference
|
|
18
18
|
* Associates the listbox with its label
|
|
19
19
|
*/
|
|
20
|
+
'aria-labelledby'?: string;
|
|
21
|
+
/**
|
|
22
|
+
* ARIA label reference
|
|
23
|
+
* Associates the listbox with its label
|
|
24
|
+
*
|
|
25
|
+
* @deprecated Use `aria-labelledby` instead — `ariaLabelledby` is removed in
|
|
26
|
+
* the next major release.
|
|
27
|
+
*/
|
|
20
28
|
ariaLabelledby?: string;
|
|
21
29
|
/**
|
|
22
30
|
* Unique identifier for the options container
|
|
@@ -3,6 +3,6 @@ import { DropdownToggleProps } from './types';
|
|
|
3
3
|
export declare const DropdownToggleBase: import("@emotion/styled").StyledComponent<{
|
|
4
4
|
theme?: Theme;
|
|
5
5
|
as?: React.ElementType;
|
|
6
|
-
} & Pick<DropdownToggleProps, "colors" | "
|
|
7
|
-
declare const DropdownToggle: ({ onClick, onFocus, isOpen, isMultiple, selectedCount, disabled, children, ariaLabelledby, ariaControls, colors, status, className, ...restProps }: DropdownToggleProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
6
|
+
} & Pick<DropdownToggleProps, "colors" | "isOpen" | "disabled" | "status" | "isMultiple" | "selectedCount">, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
|
|
7
|
+
declare const DropdownToggle: ({ onClick, onFocus, isOpen, isMultiple, selectedCount, disabled, children, "aria-labelledby": ariaLabelledbyNative, "aria-controls": ariaControlsNative, ariaLabelledby, ariaControls, colors, status, className, ...restProps }: DropdownToggleProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
8
8
|
export default DropdownToggle;
|
|
@@ -11,8 +11,30 @@ export interface DropdownToggleProps extends CommonProps, Omit<React.ButtonHTMLA
|
|
|
11
11
|
isMultiple?: boolean;
|
|
12
12
|
disabled?: boolean;
|
|
13
13
|
children?: React.ReactNode;
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
/**
|
|
15
|
+
* Id of the element labelling the toggle.
|
|
16
|
+
*
|
|
17
|
+
* Re-declared because `ControlledButtonProps` omits it from the inherited
|
|
18
|
+
* button attributes — that omission is about `dropdownProps.toggleButton`,
|
|
19
|
+
* where Dropdown owns the wiring, not about this component's own surface.
|
|
20
|
+
*/
|
|
21
|
+
'aria-labelledby'?: string;
|
|
22
|
+
/** Id of the listbox the toggle controls. */
|
|
23
|
+
'aria-controls'?: string;
|
|
24
|
+
/**
|
|
25
|
+
* Id of the element labelling the toggle.
|
|
26
|
+
*
|
|
27
|
+
* @deprecated Use `aria-labelledby` instead — `ariaLabelledby` is removed in
|
|
28
|
+
* the next major release.
|
|
29
|
+
*/
|
|
30
|
+
ariaLabelledby?: string;
|
|
31
|
+
/**
|
|
32
|
+
* Id of the listbox the toggle controls.
|
|
33
|
+
*
|
|
34
|
+
* @deprecated Use `aria-controls` instead — `ariaControls` is removed in the
|
|
35
|
+
* next major release.
|
|
36
|
+
*/
|
|
37
|
+
ariaControls?: string;
|
|
16
38
|
colors?: Array<string | undefined>;
|
|
17
39
|
className?: string;
|
|
18
40
|
selectedCount?: number;
|
|
@@ -32,5 +32,5 @@ import { FileAttachmentProps } from './types';
|
|
|
32
32
|
* />
|
|
33
33
|
* ```
|
|
34
34
|
*/
|
|
35
|
-
declare const FileAttachment: ({ file, size, progress, progressDisplay, uploadingText, uploadedText, showDescription, icon, isDisabled, onRemove, className, css: cssProp, }: FileAttachmentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
35
|
+
declare const FileAttachment: ({ file, size, progress, progressDisplay, uploadingText, uploadedText, showDescription, icon, disabled, isDisabled, onRemove, className, css: cssProp, }: FileAttachmentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
36
36
|
export default FileAttachment;
|
|
@@ -17,6 +17,11 @@ export interface FileAttachmentProps {
|
|
|
17
17
|
uploadedText?: string;
|
|
18
18
|
showDescription?: boolean;
|
|
19
19
|
icon?: IconProps['name'];
|
|
20
|
+
/** Mutes the attachment and disables the remove button. */
|
|
21
|
+
disabled?: boolean;
|
|
22
|
+
/**
|
|
23
|
+
* @deprecated Use `disabled` instead. Removed in the next major release.
|
|
24
|
+
*/
|
|
20
25
|
isDisabled?: boolean;
|
|
21
26
|
onRemove?: () => void;
|
|
22
27
|
className?: string;
|
|
@@ -2,4 +2,4 @@ export { FiltersMultiSelect, type FiltersMultiSelectProps, } from './FiltersMult
|
|
|
2
2
|
export { FiltersMultiSelectOption, type FiltersMultiSelectOptionProps, } from './components/FiltersMultiSelectOption';
|
|
3
3
|
export { FiltersMultiSelectOptions } from './components/FiltersMultiSelectOptions';
|
|
4
4
|
export { FiltersMultiSelectEmpty, type FiltersMultiSelectEmptyProps, } from './components/FiltersMultiSelectEmpty';
|
|
5
|
-
export { useFilterMultiSelect, type Filter, type SelectedFilter, } from './useFiltersMultiSelect';
|
|
5
|
+
export { useFilterMultiSelect, type Filter, type SelectedFilter, type UseFiltersMultiSelectOptions, type UseFiltersMultiSelectStore, } from './useFiltersMultiSelect';
|
|
@@ -7,23 +7,55 @@ export type SelectedFilter = Omit<Filter, 'group'> & {
|
|
|
7
7
|
type: 'include' | 'exclude' | 'group';
|
|
8
8
|
};
|
|
9
9
|
export interface UseFiltersMultiSelectOptions {
|
|
10
|
+
/**
|
|
11
|
+
* Controlled open state of the dropdown. When provided, the parent must
|
|
12
|
+
* update it from `onOpenChange`.
|
|
13
|
+
*/
|
|
14
|
+
open?: boolean;
|
|
15
|
+
/** Initial open state of the dropdown. */
|
|
16
|
+
defaultOpen?: boolean;
|
|
17
|
+
/** Called with the state the dropdown is moving to. */
|
|
18
|
+
onOpenChange?: (open: boolean) => void;
|
|
19
|
+
/**
|
|
20
|
+
* Controlled open state of the dropdown.
|
|
21
|
+
*
|
|
22
|
+
* @deprecated Use `open` instead — `opened` is removed in the next major
|
|
23
|
+
* release.
|
|
24
|
+
*/
|
|
10
25
|
opened?: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Initial open state of the dropdown.
|
|
28
|
+
*
|
|
29
|
+
* @deprecated Use `defaultOpen` instead — `defaultOpened` is removed in the
|
|
30
|
+
* next major release.
|
|
31
|
+
*/
|
|
11
32
|
defaultOpened?: boolean;
|
|
33
|
+
/**
|
|
34
|
+
* Called with the state the dropdown is moving to.
|
|
35
|
+
*
|
|
36
|
+
* @deprecated Use `onOpenChange` instead — `onOpenedChange` is removed in the
|
|
37
|
+
* next major release.
|
|
38
|
+
*/
|
|
39
|
+
onOpenedChange?: (open: boolean) => void;
|
|
12
40
|
selectedFilters?: SelectedFilter[];
|
|
13
41
|
defaultSelectedFilters?: SelectedFilter[];
|
|
14
42
|
search?: string;
|
|
15
43
|
defaultSearch?: string;
|
|
16
44
|
onChange?: (value: SelectedFilter[]) => void;
|
|
17
|
-
onOpenedChange?: (opened: boolean) => void;
|
|
18
45
|
onDropdownClose?: () => void;
|
|
19
46
|
onDropdownOpen?: () => void;
|
|
20
47
|
onSearchChange?: (search: string) => void;
|
|
21
48
|
}
|
|
22
|
-
export declare function useFilterMultiSelect(
|
|
49
|
+
export declare function useFilterMultiSelect(options?: UseFiltersMultiSelectOptions): {
|
|
50
|
+
open: boolean;
|
|
51
|
+
/**
|
|
52
|
+
* @deprecated Read `open` instead — the `opened` key is removed from the
|
|
53
|
+
* store in the next major release.
|
|
54
|
+
*/
|
|
23
55
|
opened: boolean;
|
|
24
56
|
selectedFilters: SelectedFilter[];
|
|
25
57
|
search: string;
|
|
26
|
-
toggleDropdown: (
|
|
58
|
+
toggleDropdown: (nextOpen?: boolean) => void;
|
|
27
59
|
selectFilters: (...filters: SelectedFilter[]) => void;
|
|
28
60
|
unselectFilters: (...filters: SelectedFilter[]) => void;
|
|
29
61
|
isSelected: (id: string) => SelectedFilter | undefined;
|
|
@@ -13,6 +13,7 @@ import type { IconButtonProps } from './types';
|
|
|
13
13
|
* - Optional aria-label; defaults to raw icon name for screen readers
|
|
14
14
|
* - Single styles prop: button, iconColor, icon (all overridable)
|
|
15
15
|
* - Transparent or grey background variant; disabled state
|
|
16
|
+
* - `size` matching Button's scale, so the two align in a toolbar
|
|
16
17
|
*
|
|
17
18
|
* @category Form Controls
|
|
18
19
|
* @subcategory Action
|
|
@@ -29,6 +30,12 @@ import type { IconButtonProps } from './types';
|
|
|
29
30
|
*
|
|
30
31
|
* @example
|
|
31
32
|
* ```tsx
|
|
33
|
+
* // Sized to match a medium Button beside it, submitting the surrounding form
|
|
34
|
+
* <IconButton icon="check" size="medium" type="submit" aria-label="Save" />
|
|
35
|
+
* ```
|
|
36
|
+
*
|
|
37
|
+
* @example
|
|
38
|
+
* ```tsx
|
|
32
39
|
* <IconButton
|
|
33
40
|
* icon="search"
|
|
34
41
|
* onClick={onSearch}
|
|
@@ -36,4 +43,4 @@ import type { IconButtonProps } from './types';
|
|
|
36
43
|
* />
|
|
37
44
|
* ```
|
|
38
45
|
*/
|
|
39
|
-
export declare const IconButton: ({ icon, onClick, "aria-label": ariaLabel, title, disabled, transparent, styles, }: IconButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
46
|
+
export declare const IconButton: ({ icon, onClick, type, size, "aria-label": ariaLabel, title, disabled, transparent, styles, }: IconButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
@@ -1,2 +1,6 @@
|
|
|
1
1
|
import { Theme } from '@emotion/react';
|
|
2
|
-
|
|
2
|
+
/** Box size per `size` value; kept in step with `Button`'s height scale. */
|
|
3
|
+
export declare const buttonSizes: Record<keyof MainSizes, number>;
|
|
4
|
+
/** Icon size per `size` value. */
|
|
5
|
+
export declare const iconSizes: Record<keyof MainSizes, number>;
|
|
6
|
+
export declare const iconButton: (theme: Theme, transparent: boolean, size?: keyof MainSizes) => import("@emotion/react").SerializedStyles;
|
|
@@ -6,9 +6,27 @@ export type IconButtonProps = {
|
|
|
6
6
|
*/
|
|
7
7
|
icon: keyof MapIconsType;
|
|
8
8
|
/**
|
|
9
|
-
* Click handler
|
|
9
|
+
* Click handler. Optional — a `type="submit"` icon button inside a form
|
|
10
|
+
* needs no handler of its own.
|
|
10
11
|
*/
|
|
11
|
-
onClick
|
|
12
|
+
onClick?: () => void;
|
|
13
|
+
/**
|
|
14
|
+
* HTML button type attribute
|
|
15
|
+
* - `button`: Standard button (default)
|
|
16
|
+
* - `submit`: Form submission button
|
|
17
|
+
* - `reset`: Form reset button
|
|
18
|
+
* @default 'button'
|
|
19
|
+
*/
|
|
20
|
+
type?: 'button' | 'reset' | 'submit';
|
|
21
|
+
/**
|
|
22
|
+
* Size of the button and its icon. Matches `Button`'s size scale so the two
|
|
23
|
+
* line up in a toolbar.
|
|
24
|
+
* - `small`: 36px box, 20px icon (default)
|
|
25
|
+
* - `medium`: 46px box, 24px icon
|
|
26
|
+
* - `large`: 54px box, 28px icon
|
|
27
|
+
* @default 'small'
|
|
28
|
+
*/
|
|
29
|
+
size?: keyof MainSizes;
|
|
12
30
|
/**
|
|
13
31
|
* Accessible label for screen readers. When omitted, the raw icon name is used.
|
|
14
32
|
*/
|
|
@@ -2,8 +2,14 @@ import type { TypeaheadProps } from '../../Typeahead/types';
|
|
|
2
2
|
/**
|
|
3
3
|
* Props that need special handling (computed from RJSF state) or are RJSF-controlled
|
|
4
4
|
* These are extracted explicitly and NOT spread
|
|
5
|
+
*
|
|
6
|
+
* The deprecated spellings (`selectedItems`, `isDisabled`) stay on the list
|
|
7
|
+
* alongside their replacements: a `uiSchema` written before the rename would
|
|
8
|
+
* otherwise pass its filter and land on `Typeahead` through the spread, where
|
|
9
|
+
* it would take over whenever the RJSF-computed `value` / `disabled` happened
|
|
10
|
+
* to be undefined.
|
|
5
11
|
*/
|
|
6
|
-
export type SelectWidgetNonSpreadableProps = 'name' | 'onChange' | 'onClearAll' | 'onRemoveSelectedClick' | 'onEmptyChange' | 'selectedItems' | 'isMultiple' | 'isDisabled' | 'placeholder' | 'renderOption' | 'children';
|
|
12
|
+
export type SelectWidgetNonSpreadableProps = 'name' | 'onChange' | 'onClearAll' | 'onRemoveSelectedClick' | 'onEmptyChange' | 'value' | 'selectedItems' | 'isMultiple' | 'disabled' | 'isDisabled' | 'placeholder' | 'renderOption' | 'children';
|
|
7
13
|
/**
|
|
8
14
|
* Props that can be automatically spread from uiOptions
|
|
9
15
|
* New props added to TypeaheadProps will automatically be included here
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { LabelProps } from './types';
|
|
2
|
-
declare const Label: ({ children, htmlFor, className, isDisabled, onMouseEnter, onMouseLeave, }: LabelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
2
|
+
declare const Label: ({ children, htmlFor, className, disabled, isDisabled, onMouseEnter, onMouseLeave, }: LabelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default Label;
|
|
@@ -3,6 +3,11 @@ import { CommonProps } from '../../types/emotion';
|
|
|
3
3
|
export interface LabelProps extends CommonProps {
|
|
4
4
|
htmlFor?: string;
|
|
5
5
|
children: React.ReactNode;
|
|
6
|
+
/** Renders the label in its muted, disabled state. */
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
/**
|
|
9
|
+
* @deprecated Use `disabled` instead. Removed in the next major release.
|
|
10
|
+
*/
|
|
6
11
|
isDisabled?: boolean;
|
|
7
12
|
onMouseEnter?: MouseEventHandler<HTMLLabelElement>;
|
|
8
13
|
onMouseLeave?: MouseEventHandler<HTMLLabelElement>;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { LargeTabProps } from '../TabBar/types';
|
|
2
|
-
declare const LargeTab: ({ topText, bottomText, isActive, onClick, ariaControls, tabId, }: LargeTabProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
2
|
+
declare const LargeTab: ({ topText, bottomText, isActive, onClick, "aria-controls": ariaControlsNative, ariaControls, tabId, }: LargeTabProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default LargeTab;
|
|
@@ -1,2 +1,25 @@
|
|
|
1
1
|
import { LinkProps } from './Link.types';
|
|
2
|
-
|
|
2
|
+
/**
|
|
3
|
+
* Link - Styled anchor.
|
|
4
|
+
*
|
|
5
|
+
* Renders a plain `<a>` with the kit's `subtitle` typography. Accepts the
|
|
6
|
+
* standard anchor attributes (`target`, `rel`, `download`, `onClick`, …) plus
|
|
7
|
+
* `className` and the Emotion `css` prop.
|
|
8
|
+
*
|
|
9
|
+
* When `target="_blank"` is used, `rel` defaults to `noopener noreferrer` so a
|
|
10
|
+
* new tab can't reach back into the opener; pass an explicit `rel` to override.
|
|
11
|
+
*
|
|
12
|
+
* @category Navigation
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* ```tsx
|
|
16
|
+
* <Link href="/settings">Settings</Link>
|
|
17
|
+
* ```
|
|
18
|
+
*
|
|
19
|
+
* @example
|
|
20
|
+
* ```tsx
|
|
21
|
+
* // rel is filled in automatically
|
|
22
|
+
* <Link href="https://example.com" target="_blank">Docs</Link>
|
|
23
|
+
* ```
|
|
24
|
+
*/
|
|
25
|
+
export declare const Link: ({ children, href, target, rel, ...props }: LinkProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
@@ -1,4 +1,17 @@
|
|
|
1
|
-
|
|
1
|
+
import type { AnchorHTMLAttributes } from 'react';
|
|
2
|
+
import type { Interpolation, Theme } from '@emotion/react';
|
|
3
|
+
export interface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'children'> {
|
|
4
|
+
/** Destination of the anchor. */
|
|
2
5
|
href: string;
|
|
6
|
+
/** Link content, rendered inside a `subtitle` Typography. */
|
|
3
7
|
children: React.ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* Where to open the link. When set to `_blank`, `rel` defaults to
|
|
10
|
+
* `noopener noreferrer` unless you pass your own.
|
|
11
|
+
*/
|
|
12
|
+
target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
|
|
13
|
+
/** Custom CSS class name for the anchor. */
|
|
14
|
+
className?: string;
|
|
15
|
+
/** Emotion styles applied to the anchor. */
|
|
16
|
+
css?: Interpolation<Theme>;
|
|
4
17
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ModalRootProps } from './types';
|
|
2
2
|
/**
|
|
3
3
|
* Modal - Dialog overlay for focused user interaction
|
|
4
4
|
*
|
|
@@ -33,16 +33,24 @@ import { ModalProps } from './types';
|
|
|
33
33
|
* @example
|
|
34
34
|
* ```tsx
|
|
35
35
|
* // Controlled from parent
|
|
36
|
-
* const [
|
|
37
|
-
* <Modal
|
|
36
|
+
* const [open, setOpen] = useState(false);
|
|
37
|
+
* <Modal open={open} onOpenChange={setOpen}>
|
|
38
38
|
* <ModalContent aria-label="Controlled modal">
|
|
39
|
-
* <ModalDismissButton><Button
|
|
39
|
+
* <ModalDismissButton><Button>Close</Button></ModalDismissButton>
|
|
40
40
|
* </ModalContent>
|
|
41
41
|
* </Modal>
|
|
42
42
|
* ```
|
|
43
43
|
*
|
|
44
44
|
* @example
|
|
45
45
|
* ```tsx
|
|
46
|
+
* // Uncontrolled, but observing every open/close
|
|
47
|
+
* <Modal defaultOpen onOpenChange={(open) => track('modal', open)}>
|
|
48
|
+
* <ModalContent aria-label="Observed modal">...</ModalContent>
|
|
49
|
+
* </Modal>
|
|
50
|
+
* ```
|
|
51
|
+
*
|
|
52
|
+
* @example
|
|
53
|
+
* ```tsx
|
|
46
54
|
* // Modal with portal (e.g. inside Drawer) - centers on full screen
|
|
47
55
|
* <ModalContent aria-label="Modal in drawer" usePortal>
|
|
48
56
|
* ...
|
|
@@ -59,5 +67,5 @@ import { ModalProps } from './types';
|
|
|
59
67
|
* - ESC to close (when implemented in ModalDialog)
|
|
60
68
|
* - Focus management on open/close
|
|
61
69
|
*/
|
|
62
|
-
declare const Modal: (
|
|
70
|
+
declare const Modal: (props: ModalRootProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
63
71
|
export default Modal;
|
|
@@ -5,14 +5,14 @@ import type { ModalDialogProps } from '../ModalDialog';
|
|
|
5
5
|
*/
|
|
6
6
|
export type ModalContextProps = [boolean, (isOpen: boolean) => void];
|
|
7
7
|
/**
|
|
8
|
-
* Props
|
|
8
|
+
* Props shared by the Modal root and ModalContent.
|
|
9
9
|
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
10
|
+
* ModalContent accepts ModalDialog props (aria-label, noBackground, className,
|
|
11
|
+
* children) plus usePortal.
|
|
12
12
|
*
|
|
13
13
|
* @example
|
|
14
14
|
* ```tsx
|
|
15
|
-
* <Modal
|
|
15
|
+
* <Modal open={open} onOpenChange={setOpen}>
|
|
16
16
|
* <ModalContent aria-label="Dialog" usePortal>...</ModalContent>
|
|
17
17
|
* </Modal>
|
|
18
18
|
* ```
|
|
@@ -21,3 +21,31 @@ export type ModalProps = Partial<ModalDialogProps> & {
|
|
|
21
21
|
/** When true, render modal in a portal to document.body. When false (default), render in place (e.g. inside a Drawer). */
|
|
22
22
|
usePortal?: boolean;
|
|
23
23
|
};
|
|
24
|
+
/**
|
|
25
|
+
* Props for the Modal root component.
|
|
26
|
+
*
|
|
27
|
+
* Adds the state props the root owns on top of {@link ModalProps}. Open state
|
|
28
|
+
* has three modes:
|
|
29
|
+
*
|
|
30
|
+
* - **uncontrolled** — pass nothing, or `defaultOpen` for the initial state.
|
|
31
|
+
* ModalOpenButton / ModalDismissButton drive it.
|
|
32
|
+
* - **controlled** — pass `open` and update it from `onOpenChange`. The modal
|
|
33
|
+
* never moves on its own.
|
|
34
|
+
* - **legacy** — pass `isOpen`. It seeds the state and re-syncs whenever it
|
|
35
|
+
* changes, but the buttons can still move the modal out from under it. Kept
|
|
36
|
+
* working for the deprecation window; prefer `open` + `onOpenChange`.
|
|
37
|
+
*
|
|
38
|
+
* @example
|
|
39
|
+
* ```tsx
|
|
40
|
+
* const [open, setOpen] = useState(false);
|
|
41
|
+
* <Modal open={open} onOpenChange={setOpen}>
|
|
42
|
+
* <ModalContent aria-label="Controlled modal">...</ModalContent>
|
|
43
|
+
* </Modal>
|
|
44
|
+
* ```
|
|
45
|
+
*/
|
|
46
|
+
export type ModalRootProps = ModalProps & {
|
|
47
|
+
/** Initial open state for an uncontrolled modal. */
|
|
48
|
+
defaultOpen?: boolean;
|
|
49
|
+
/** Called with the state the modal is moving to, from any source. */
|
|
50
|
+
onOpenChange?: (open: boolean) => void;
|
|
51
|
+
};
|
|
@@ -4,7 +4,7 @@ import { ModalDialogProps } from './types';
|
|
|
4
4
|
*
|
|
5
5
|
* Renders the fixed full-screen overlay and centered dialog box. Used internally
|
|
6
6
|
* by ModalContent; typically not used directly. Handles visibility (display
|
|
7
|
-
* based on
|
|
7
|
+
* based on open), optional background overlay (noBackground), and dialog
|
|
8
8
|
* ARIA attributes (role="dialog", aria-modal).
|
|
9
9
|
*
|
|
10
10
|
* @category Components
|
|
@@ -26,5 +26,5 @@ import { ModalDialogProps } from './types';
|
|
|
26
26
|
* - aria-label for screen reader label
|
|
27
27
|
* - Fixed overlay for focus containment
|
|
28
28
|
*/
|
|
29
|
-
declare const ModalDialog: ({ isOpen, noBackground, children, "aria-label": ariaLabel, ...props }: ModalDialogProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
29
|
+
declare const ModalDialog: ({ open, isOpen, noBackground, children, "aria-label": ariaLabel, ...props }: ModalDialogProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
30
30
|
export default ModalDialog;
|
|
@@ -1,19 +1,26 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Props for the ModalDialog presentational component.
|
|
3
3
|
*
|
|
4
|
-
* Used by ModalContent when rendering the dialog.
|
|
4
|
+
* Used by ModalContent when rendering the dialog. open controls visibility;
|
|
5
5
|
* noBackground removes the overlay; aria-label is required for accessibility.
|
|
6
6
|
*
|
|
7
7
|
* @example
|
|
8
8
|
* ```tsx
|
|
9
|
-
* <ModalDialog
|
|
9
|
+
* <ModalDialog open aria-label="Confirm action">
|
|
10
10
|
* <p>Are you sure?</p>
|
|
11
11
|
* </ModalDialog>
|
|
12
12
|
* ```
|
|
13
13
|
*/
|
|
14
14
|
export interface ModalDialogProps {
|
|
15
15
|
/** Whether the dialog is visible. When false, content is hidden (display: none). */
|
|
16
|
-
|
|
16
|
+
open?: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* Whether the dialog is visible.
|
|
19
|
+
*
|
|
20
|
+
* @deprecated Use `open` instead — `isOpen` is removed in the next major
|
|
21
|
+
* release.
|
|
22
|
+
*/
|
|
23
|
+
isOpen?: boolean;
|
|
17
24
|
/** When true, the overlay is transparent (no dimmed background). */
|
|
18
25
|
noBackground?: boolean;
|
|
19
26
|
/** Accessible name for the dialog (required for screen readers). */
|