react-magma-dom 4.7.0-next.8 → 4.7.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/BlockQuote/BlockQuote.d.ts +2 -2
- package/dist/components/Button/index.d.ts +1 -0
- package/dist/components/Combobox/ComboboxInput.d.ts +1 -1
- package/dist/components/DatePicker/CalendarContext.d.ts +1 -0
- package/dist/components/DatePicker/HelperInformation.d.ts +1 -0
- package/dist/components/Dropdown/Dropdown.d.ts +2 -0
- package/dist/components/InputBase/index.d.ts +29 -3
- package/dist/components/List/ListItem.d.ts +3 -3
- package/dist/components/NavTabs/NavTab.d.ts +6 -1
- package/dist/components/NavTabs/NavTabs.d.ts +2 -1
- package/dist/components/Select/shared.d.ts +5 -0
- package/dist/components/Stepper/ResponsiveStepperContainer.d.ts +17 -0
- package/dist/components/Stepper/Step.d.ts +5 -1
- package/dist/components/Stepper/Stepper.d.ts +13 -0
- package/dist/components/Stepper/index.d.ts +1 -0
- package/dist/components/StyledButton/styles.d.ts +0 -1
- package/dist/components/Tabs/Tab.d.ts +6 -1
- package/dist/components/Tabs/Tabs.d.ts +7 -4
- package/dist/components/Tabs/shared.d.ts +4 -0
- package/dist/components/TreeView/TreeViewContext.d.ts +4 -1
- package/dist/components/TreeView/index.d.ts +1 -0
- package/dist/components/TreeView/useTreeItem.d.ts +1 -5
- package/dist/components/TreeView/useTreeView.d.ts +20 -6
- package/dist/components/TreeView/utils.d.ts +18 -7
- package/dist/esm/index.js +1486 -771
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.ts +4 -2
- package/dist/properties.json +433 -113
- package/dist/react-magma-dom.cjs.development.js +1428 -696
- package/dist/react-magma-dom.cjs.development.js.map +1 -1
- package/dist/react-magma-dom.cjs.production.min.js +1 -1
- package/dist/react-magma-dom.cjs.production.min.js.map +1 -1
- package/dist/utils/index.d.ts +7 -0
- package/package.json +1 -1
- package/dist/components/Accordion/Accordion.stories.d.ts +0 -16
- package/dist/components/Alert/Alert.stories.d.ts +0 -4
- package/dist/components/Announce/Announce.stories.d.ts +0 -3
- package/dist/components/AppBar/AppBar.stories.d.ts +0 -5
- package/dist/components/Badge/Badge.stories.d.ts +0 -4
- package/dist/components/Banner/Banner.stories.d.ts +0 -5
- package/dist/components/BlockQuote/BlockQuote.stories.d.ts +0 -5
- package/dist/components/Breadcrumb/Breadcrumb.stories.d.ts +0 -5
- package/dist/components/BreakpointsContainer/BreakpointsContainer.stories.d.ts +0 -3
- package/dist/components/Button/Button.stories.d.ts +0 -9
- package/dist/components/ButtonGroup/ButtonGroup.stories.d.ts +0 -278
- package/dist/components/Card/Card.stories.d.ts +0 -12
- package/dist/components/CharacterCounter/CharacterCounter.stories.d.ts +0 -556
- package/dist/components/Checkbox/Checkbox.stories.d.ts +0 -4
- package/dist/components/Combobox/Combobox.stories.d.ts +0 -39
- package/dist/components/Container/Container.stories.d.ts +0 -7
- package/dist/components/Datagrid/Datagrid.stories.d.ts +0 -14
- package/dist/components/DatePicker/DatePicker.stories.d.ts +0 -33
- package/dist/components/Drawer/Drawer.stories.d.ts +0 -17
- package/dist/components/Dropdown/Dropdown.stories.d.ts +0 -18
- package/dist/components/Flex/Flex.stories.d.ts +0 -10
- package/dist/components/Form/Form.stories.d.ts +0 -5
- package/dist/components/FormGroup/FormGroup.stories.d.ts +0 -3
- package/dist/components/Grid/Grid.stories.d.ts +0 -4
- package/dist/components/Heading/Heading.stories.d.ts +0 -11
- package/dist/components/HideAtBreakpoint/HideAtBreakpoint.stories.d.ts +0 -3
- package/dist/components/Hyperlink/Hyperlink.stories.d.ts +0 -32
- package/dist/components/IconButton/IconButton.stories.d.ts +0 -18
- package/dist/components/IndeterminateCheckbox/IndeterminateCheckbox.stories.d.ts +0 -5
- package/dist/components/Input/Input.stories.d.ts +0 -1012
- package/dist/components/InputBase/InputBase.stories.d.ts +0 -7
- package/dist/components/List/List.stories.d.ts +0 -64
- package/dist/components/LoadingIndicator/LoadingIndicator.stories.d.ts +0 -10
- package/dist/components/Modal/Modal.stories.d.ts +0 -16
- package/dist/components/NativeSelect/NativeSelect.stories.d.ts +0 -12
- package/dist/components/NavTabs/NavTabs.stories.d.ts +0 -7
- package/dist/components/Pagination/Pagination.stories.d.ts +0 -10
- package/dist/components/Paragraph/Paragraph.stories.d.ts +0 -3
- package/dist/components/PasswordInput/PasswordInput.stories.d.ts +0 -7
- package/dist/components/ProgressBar/ProgressBar.stories.d.ts +0 -19
- package/dist/components/Radio/Radio.stories.d.ts +0 -4
- package/dist/components/Search/Search.stories.d.ts +0 -4
- package/dist/components/Select/Select.stories.d.ts +0 -12
- package/dist/components/SkipLink/SkipLink.stories.d.ts +0 -3
- package/dist/components/Spacer/Spacer.stories.d.ts +0 -5
- package/dist/components/Spinner/Spinner.stories.d.ts +0 -4
- package/dist/components/Stepper/Stepper.stories.d.ts +0 -6
- package/dist/components/Table/Table.stories.d.ts +0 -1670
- package/dist/components/Tabs/Tabs.stories.d.ts +0 -11
- package/dist/components/Tag/Tag.stories.d.ts +0 -564
- package/dist/components/Textarea/Textarea.stories.d.ts +0 -298
- package/dist/components/TimePicker/TimePicker.stories.d.ts +0 -7
- package/dist/components/Toast/Toast.stories.d.ts +0 -21
- package/dist/components/Toggle/Toggle.stories.d.ts +0 -4
- package/dist/components/ToggleButton/ToggleButton.stories.d.ts +0 -1131
- package/dist/components/ToggleButtonGroup/ToggleButtonGroup.stories.d.ts +0 -554
- package/dist/components/Tooltip/Tooltip.stories.d.ts +0 -10
- package/dist/components/Transition/Transition.stories.d.ts +0 -79
- package/dist/components/TreeView/TreeView.stories.d.ts +0 -104
- package/dist/components/VisuallyHidden/VisuallyHidden.stories.d.ts +0 -3
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { Colors, ThemeInterface } from '../../theme/magma';
|
|
3
3
|
/**
|
|
4
4
|
* @children required
|
|
5
5
|
*/
|
|
@@ -7,7 +7,7 @@ export interface BlockQuoteProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
7
7
|
/**
|
|
8
8
|
* Style properties for the left border color which accept custom CSS hex values.
|
|
9
9
|
*/
|
|
10
|
-
borderStyle?: keyof
|
|
10
|
+
borderStyle?: keyof Colors | string;
|
|
11
11
|
isInverse?: boolean;
|
|
12
12
|
/**
|
|
13
13
|
* @internal
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import { UseComboboxGetComboboxPropsOptions, UseComboboxGetInputPropsOptions, UseComboboxGetToggleButtonPropsOptions } from 'downshift';
|
|
1
2
|
import React from 'react';
|
|
2
3
|
import { SelectComponents } from '../Select/components';
|
|
3
|
-
import { UseComboboxGetComboboxPropsOptions, UseComboboxGetInputPropsOptions, UseComboboxGetToggleButtonPropsOptions } from 'downshift';
|
|
4
4
|
import { ReferenceType } from '@floating-ui/react-dom';
|
|
5
5
|
interface ComboboxInputProps<T> {
|
|
6
6
|
ariaDescribedBy?: string;
|
|
@@ -10,6 +10,7 @@ export interface CalendarContextInterface {
|
|
|
10
10
|
buildCalendarMonth: (date: Date, enableOutsideDates?: boolean) => Date[][];
|
|
11
11
|
showHelperInformation: () => void;
|
|
12
12
|
hideHelperInformation: () => void;
|
|
13
|
+
onClose: (event?: React.SyntheticEvent) => void;
|
|
13
14
|
onDateChange: (day: Date, event: React.SyntheticEvent) => void;
|
|
14
15
|
onKeyDown: (event: React.KeyboardEvent) => void;
|
|
15
16
|
onPrevMonthClick: () => void;
|
|
@@ -2,6 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
interface HelperInformationProps {
|
|
3
3
|
isInverse?: boolean;
|
|
4
4
|
isOpen?: boolean;
|
|
5
|
+
onReturnBack?: (event?: React.SyntheticEvent) => void;
|
|
5
6
|
onClose?: (event?: React.SyntheticEvent) => void;
|
|
6
7
|
}
|
|
7
8
|
export declare const HelperInformation: React.FunctionComponent<HelperInformationProps>;
|
|
@@ -19,11 +19,13 @@ export interface DropdownProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
19
19
|
/**
|
|
20
20
|
* Alignment of the dropdown content
|
|
21
21
|
* @default DropdownAlignment.start
|
|
22
|
+
* @deprecated = true
|
|
22
23
|
*/
|
|
23
24
|
alignment?: DropdownAlignment;
|
|
24
25
|
/**
|
|
25
26
|
* Position of the dropdown content
|
|
26
27
|
* @default DropdownDropDirection.down
|
|
28
|
+
* @deprecated = true
|
|
27
29
|
*/
|
|
28
30
|
dropDirection?: DropdownDropDirection;
|
|
29
31
|
/**
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
+
import { ReferenceType } from '@floating-ui/react-dom/dist/floating-ui.react-dom';
|
|
1
2
|
import * as React from 'react';
|
|
2
3
|
import { IconProps } from 'react-magma-icons';
|
|
3
4
|
import { ThemeInterface } from '../../theme/magma';
|
|
4
|
-
import {
|
|
5
|
+
import { LabelPosition } from '../Label';
|
|
5
6
|
export declare enum InputSize {
|
|
6
7
|
large = "large",
|
|
7
8
|
medium = "medium"
|
|
@@ -25,7 +26,8 @@ export interface InputBaseProps extends React.InputHTMLAttributes<HTMLInputEleme
|
|
|
25
26
|
*/
|
|
26
27
|
children?: any;
|
|
27
28
|
/**
|
|
28
|
-
* Style properties for the component container element
|
|
29
|
+
* Style properties for the component container element.
|
|
30
|
+
* This div is a direct child of the div with the inputWrapperStyle, so the second from the top.
|
|
29
31
|
*/
|
|
30
32
|
containerStyle?: React.CSSProperties;
|
|
31
33
|
/**
|
|
@@ -66,7 +68,7 @@ export interface InputBaseProps extends React.InputHTMLAttributes<HTMLInputEleme
|
|
|
66
68
|
*/
|
|
67
69
|
inputStyle?: React.CSSProperties;
|
|
68
70
|
/**
|
|
69
|
-
* Style properties for input wrapper element
|
|
71
|
+
* Style properties for input wrapper element. This is the outermost div.
|
|
70
72
|
*/
|
|
71
73
|
inputWrapperStyle?: React.CSSProperties;
|
|
72
74
|
/**
|
|
@@ -138,6 +140,16 @@ export interface InputBaseProps extends React.InputHTMLAttributes<HTMLInputEleme
|
|
|
138
140
|
* @default "auto"
|
|
139
141
|
*/
|
|
140
142
|
width?: string;
|
|
143
|
+
/**
|
|
144
|
+
* Position within the component for the label to appear
|
|
145
|
+
* @default LabelPosition.top
|
|
146
|
+
*/
|
|
147
|
+
labelPosition?: LabelPosition;
|
|
148
|
+
/**
|
|
149
|
+
* If true, label text will be hidden visually, but will still be read by assistive technology
|
|
150
|
+
* @default false
|
|
151
|
+
*/
|
|
152
|
+
isLabelVisuallyHidden?: boolean;
|
|
141
153
|
}
|
|
142
154
|
export interface InputWrapperStylesProps {
|
|
143
155
|
width?: string;
|
|
@@ -167,6 +179,7 @@ export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
|
|
|
167
179
|
theme?: import("@emotion/react").Theme;
|
|
168
180
|
as?: React.ElementType<any>;
|
|
169
181
|
} & InputWrapperStylesProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
182
|
+
export declare function getHelpIconButtonSize(props: any): any;
|
|
170
183
|
export declare const IconButtonContainer: import("@emotion/styled").StyledComponent<{
|
|
171
184
|
theme?: import("@emotion/react").Theme;
|
|
172
185
|
as?: React.ElementType<any>;
|
|
@@ -177,4 +190,17 @@ export declare const IconButtonContainer: import("@emotion/styled").StyledCompon
|
|
|
177
190
|
isClickable?: boolean;
|
|
178
191
|
hasChildren?: boolean;
|
|
179
192
|
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
193
|
+
export declare const isLeftOrHidden: ({ labelPosition, isLabelVisuallyHidden, }: {
|
|
194
|
+
labelPosition?: LabelPosition;
|
|
195
|
+
isLabelVisuallyHidden?: boolean;
|
|
196
|
+
}) => boolean;
|
|
197
|
+
export declare const HelpLinkContainer: import("@emotion/styled").StyledComponent<{
|
|
198
|
+
theme?: import("@emotion/react").Theme;
|
|
199
|
+
as?: React.ElementType<any>;
|
|
200
|
+
} & {
|
|
201
|
+
labelPosition?: LabelPosition;
|
|
202
|
+
inputSize?: InputSize;
|
|
203
|
+
theme: ThemeInterface;
|
|
204
|
+
isLabelVisuallyHidden?: boolean;
|
|
205
|
+
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
180
206
|
export declare const InputBase: React.ForwardRefExoticComponent<InputBaseProps & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { ListProps } from './';
|
|
3
|
-
import {
|
|
3
|
+
import { Colors } from '../../theme/magma';
|
|
4
4
|
/**
|
|
5
5
|
* @children required
|
|
6
6
|
*/
|
|
@@ -16,10 +16,10 @@ export interface ListItemProps extends ListProps, React.HTMLAttributes<HTMLDivEl
|
|
|
16
16
|
/**
|
|
17
17
|
* Option for changing icon background with all Magma colors.
|
|
18
18
|
*/
|
|
19
|
-
iconBackground?: keyof
|
|
19
|
+
iconBackground?: keyof Colors;
|
|
20
20
|
/**
|
|
21
21
|
* Option for changing icon color with all Magma colors.
|
|
22
22
|
*/
|
|
23
|
-
iconColor?: keyof
|
|
23
|
+
iconColor?: keyof Colors;
|
|
24
24
|
}
|
|
25
25
|
export declare const ListItem: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { TabsIconPosition } from '../Tabs';
|
|
3
|
-
import { TabsOrientation } from '../Tabs/shared';
|
|
3
|
+
import { TabsOrientation, TabsTextTransform } from '../Tabs/shared';
|
|
4
4
|
import { XOR } from '../../utils';
|
|
5
5
|
export interface BaseNavTabProps extends React.HTMLAttributes<HTMLAnchorElement> {
|
|
6
6
|
/**
|
|
@@ -25,6 +25,11 @@ export interface BaseNavTabProps extends React.HTMLAttributes<HTMLAnchorElement>
|
|
|
25
25
|
* @default TabsOrientation.horizontal
|
|
26
26
|
*/
|
|
27
27
|
orientation?: TabsOrientation;
|
|
28
|
+
/**
|
|
29
|
+
* Determines whether the tab appears in all-caps
|
|
30
|
+
* @default TabsTextTransform.uppercase
|
|
31
|
+
*/
|
|
32
|
+
textTransform?: TabsTextTransform;
|
|
28
33
|
/**
|
|
29
34
|
* @internal
|
|
30
35
|
*/
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { TabsBorderPosition, TabsIconPosition, TabsProps } from '../Tabs';
|
|
3
|
-
import { TabsOrientation } from '../Tabs/shared';
|
|
3
|
+
import { TabsOrientation, TabsTextTransform } from '../Tabs/shared';
|
|
4
4
|
import { Omit } from '../../utils';
|
|
5
5
|
export interface NavTabsProps extends Omit<TabsProps, 'onChange'> {
|
|
6
6
|
}
|
|
@@ -10,6 +10,7 @@ interface NavTabsContextInterface {
|
|
|
10
10
|
isInverse?: boolean;
|
|
11
11
|
isFullWidth?: boolean;
|
|
12
12
|
orientation?: TabsOrientation;
|
|
13
|
+
textTransform?: TabsTextTransform;
|
|
13
14
|
}
|
|
14
15
|
export declare const NavTabsContext: React.Context<NavTabsContextInterface>;
|
|
15
16
|
export declare const NavTabs: React.ForwardRefExoticComponent<(NavTabsProps & import("../Tabs").HorizontalTabsProps & React.RefAttributes<HTMLDivElement>) | (NavTabsProps & import("../Tabs").VerticalTabsProps & React.RefAttributes<HTMLDivElement>)>;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
import { ThemeInterface } from '../../theme/magma';
|
|
2
3
|
export declare const SelectContainer: import("@emotion/styled").StyledComponent<{
|
|
3
4
|
theme?: import("@emotion/react").Theme;
|
|
4
5
|
as?: import("react").ElementType<any>;
|
|
@@ -12,6 +13,10 @@ export declare const SelectText: import("@emotion/styled").StyledComponent<{
|
|
|
12
13
|
as?: import("react").ElementType<any>;
|
|
13
14
|
} & {
|
|
14
15
|
isClearable?: boolean;
|
|
16
|
+
isShowPlaceholder?: boolean;
|
|
17
|
+
isInverse?: boolean;
|
|
18
|
+
isDisabled?: boolean;
|
|
19
|
+
theme?: ThemeInterface;
|
|
15
20
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
16
21
|
export declare const StyledCard: import("@emotion/styled").StyledComponent<import("../Card").CardProps & import("react").RefAttributes<HTMLDivElement> & {
|
|
17
22
|
theme?: import("@emotion/react").Theme;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { StepperProps } from './Stepper';
|
|
3
|
+
export interface ResponsiveStepperContainerProps extends Omit<StepperProps, 'currentStep'> {
|
|
4
|
+
/**
|
|
5
|
+
* @children
|
|
6
|
+
*/
|
|
7
|
+
children?: React.ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* Steps of the Stepper.
|
|
10
|
+
*/
|
|
11
|
+
steps: React.ReactNode[];
|
|
12
|
+
/**
|
|
13
|
+
* Current step value.
|
|
14
|
+
*/
|
|
15
|
+
currentStep: number;
|
|
16
|
+
}
|
|
17
|
+
export declare const ResponsiveStepperContainer: React.FunctionComponent<ResponsiveStepperContainerProps>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { ThemeInterface } from '../../theme/magma';
|
|
3
|
-
import { StepperLayout } from './Stepper';
|
|
3
|
+
import { StepperLayout, StepperOrientation } from './Stepper';
|
|
4
4
|
export interface StepProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
5
5
|
/**
|
|
6
6
|
* Error state for each step.
|
|
@@ -27,6 +27,10 @@ export interface StepProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
27
27
|
* @internal
|
|
28
28
|
*/
|
|
29
29
|
index?: number;
|
|
30
|
+
/**
|
|
31
|
+
* @internal
|
|
32
|
+
*/
|
|
33
|
+
orientation?: StepperOrientation;
|
|
30
34
|
/**
|
|
31
35
|
* @internal
|
|
32
36
|
*/
|
|
@@ -17,6 +17,10 @@ export interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
17
17
|
* Changes the Stepper view for responsive layouts, needs a minimum 'breakpoint' number.
|
|
18
18
|
*/
|
|
19
19
|
breakpointLayout?: StepperLayout;
|
|
20
|
+
/**
|
|
21
|
+
* Changes the Stepper orientation for responsive layouts, needs a minimum 'breakpoint' number.
|
|
22
|
+
*/
|
|
23
|
+
breakpointOrientation?: StepperOrientation;
|
|
20
24
|
/**
|
|
21
25
|
* Sets the Stepper view
|
|
22
26
|
* @default StepperLayout.showLabels
|
|
@@ -36,6 +40,11 @@ export interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
36
40
|
* Current step value.
|
|
37
41
|
*/
|
|
38
42
|
currentStep: number;
|
|
43
|
+
/**
|
|
44
|
+
* Determines if the stepper is displayed vertically or horizontally
|
|
45
|
+
* @default StepperOrientation.horizontal
|
|
46
|
+
*/
|
|
47
|
+
orientation?: StepperOrientation;
|
|
39
48
|
/**
|
|
40
49
|
* Inverse styling.
|
|
41
50
|
*/
|
|
@@ -50,4 +59,8 @@ export declare enum StepperLayout {
|
|
|
50
59
|
hideLabels = "hideLabels",
|
|
51
60
|
summaryView = "summaryView"
|
|
52
61
|
}
|
|
62
|
+
export declare enum StepperOrientation {
|
|
63
|
+
horizontal = "horizontal",
|
|
64
|
+
vertical = "vertical"
|
|
65
|
+
}
|
|
53
66
|
export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -10,6 +10,5 @@ export declare function buildBorderColor(props: any): any;
|
|
|
10
10
|
export declare function buildColor(props: any): any;
|
|
11
11
|
export declare function buildFocusBackground(props: any): any;
|
|
12
12
|
export declare function buildFocusColor(props: any): any;
|
|
13
|
-
export declare function buildAfterBackground(props: any): any;
|
|
14
13
|
export declare function buildActiveBackground(props: any): any;
|
|
15
14
|
export declare function buildActiveColor(props: any): any;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { TabsIconPosition, TabsBorderPosition } from './Tabs';
|
|
3
|
-
import { TabsOrientation } from './shared';
|
|
3
|
+
import { TabsOrientation, TabsTextTransform } from './shared';
|
|
4
4
|
import { ThemeInterface } from '../../theme/magma';
|
|
5
5
|
export interface TabProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
6
6
|
/**
|
|
@@ -8,6 +8,11 @@ export interface TabProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
|
|
|
8
8
|
*/
|
|
9
9
|
icon?: React.ReactElement<any> | React.ReactElement<any>[];
|
|
10
10
|
isInverse?: boolean;
|
|
11
|
+
/**
|
|
12
|
+
* Determines whether the tab appears in all-caps
|
|
13
|
+
* @default TabsTextTransform.uppercase
|
|
14
|
+
*/
|
|
15
|
+
textTransform?: TabsTextTransform;
|
|
11
16
|
/**
|
|
12
17
|
* @internal
|
|
13
18
|
*/
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Omit } from '../../utils';
|
|
3
3
|
import { ThemeInterface } from '../../theme/magma';
|
|
4
|
+
import { TabsOrientation, TabsTextTransform } from './shared';
|
|
4
5
|
export declare enum TabsAlignment {
|
|
5
6
|
center = "center",
|
|
6
7
|
left = "left",
|
|
@@ -18,10 +19,6 @@ export declare enum TabsIconPosition {
|
|
|
18
19
|
right = "right",
|
|
19
20
|
top = "top"
|
|
20
21
|
}
|
|
21
|
-
export declare enum TabsOrientation {
|
|
22
|
-
horizontal = "horizontal",
|
|
23
|
-
vertical = "vertical"
|
|
24
|
-
}
|
|
25
22
|
export interface VerticalTabsProps {
|
|
26
23
|
orientation?: TabsOrientation.vertical;
|
|
27
24
|
borderPosition?: TabsBorderPosition.left | TabsBorderPosition.right;
|
|
@@ -63,6 +60,11 @@ export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'o
|
|
|
63
60
|
* @default TabsOrientation.horizontal
|
|
64
61
|
*/
|
|
65
62
|
orientation?: TabsOrientation;
|
|
63
|
+
/**
|
|
64
|
+
* Determines whether the tab appears in all-caps
|
|
65
|
+
* @default TabsTextTransform.uppercase
|
|
66
|
+
*/
|
|
67
|
+
textTransform?: TabsTextTransform;
|
|
66
68
|
/**
|
|
67
69
|
* @internal
|
|
68
70
|
*/
|
|
@@ -76,6 +78,7 @@ interface TabsContextInterface {
|
|
|
76
78
|
isInverse?: boolean;
|
|
77
79
|
isFullWidth?: boolean;
|
|
78
80
|
orientation?: TabsOrientation;
|
|
81
|
+
textTransform?: TabsTextTransform;
|
|
79
82
|
registerTabButton: (itemRefArray: React.MutableRefObject<React.MutableRefObject<Element>[]>, itemRef: React.MutableRefObject<Element>) => void;
|
|
80
83
|
}
|
|
81
84
|
export declare const TabsContext: React.Context<TabsContextInterface>;
|
|
@@ -4,6 +4,7 @@ import { IndeterminateCheckboxStatus } from '../IndeterminateCheckbox';
|
|
|
4
4
|
export interface TreeItemSelectedInterface {
|
|
5
5
|
itemId?: string;
|
|
6
6
|
checkedStatus: IndeterminateCheckboxStatus;
|
|
7
|
+
isDisabled?: boolean;
|
|
7
8
|
}
|
|
8
9
|
export interface TreeViewItemInterface {
|
|
9
10
|
itemId?: string;
|
|
@@ -11,13 +12,14 @@ export interface TreeViewItemInterface {
|
|
|
11
12
|
icon?: React.ReactNode;
|
|
12
13
|
checkedStatus: IndeterminateCheckboxStatus;
|
|
13
14
|
hasOwnTreeItems: boolean;
|
|
15
|
+
isDisabled?: boolean;
|
|
14
16
|
}
|
|
15
17
|
export interface TreeViewContextInterface {
|
|
16
18
|
children?: React.ReactNode[];
|
|
17
19
|
hasIcons: boolean;
|
|
18
20
|
initialExpandedItems: Array<string>;
|
|
19
21
|
initialExpandedItemsNeedUpdate: boolean;
|
|
20
|
-
onExpandedChange?: (event: React.SyntheticEvent) => void;
|
|
22
|
+
onExpandedChange?: (event: React.SyntheticEvent, expandedItems: Array<string>) => void;
|
|
21
23
|
onSelectedItemChange?: (selectedItems: Array<TreeItemSelectedInterface>) => void;
|
|
22
24
|
registerTreeItem: (itemRefArray: React.MutableRefObject<React.MutableRefObject<Element>[]>, itemRef: React.MutableRefObject<Element>) => void;
|
|
23
25
|
selectable: TreeViewSelectable;
|
|
@@ -29,5 +31,6 @@ export interface TreeViewContextInterface {
|
|
|
29
31
|
checkChildren: boolean;
|
|
30
32
|
items: TreeViewItemInterface[];
|
|
31
33
|
selectItem: (data: Pick<TreeViewItemInterface, 'itemId' | 'checkedStatus'>) => void;
|
|
34
|
+
handleExpandedChange: (event: React.SyntheticEvent, expandedItemId: string) => void;
|
|
32
35
|
}
|
|
33
36
|
export declare const TreeViewContext: React.Context<TreeViewContextInterface>;
|
|
@@ -27,9 +27,6 @@ export interface UseTreeItemProps extends React.HTMLAttributes<HTMLLIElement> {
|
|
|
27
27
|
* Icon for the tree item
|
|
28
28
|
*/
|
|
29
29
|
icon?: React.ReactElement<IconProps>;
|
|
30
|
-
/**
|
|
31
|
-
* @internal
|
|
32
|
-
*/
|
|
33
30
|
/**
|
|
34
31
|
* @internal
|
|
35
32
|
*/
|
|
@@ -39,8 +36,6 @@ export interface UseTreeItemProps extends React.HTMLAttributes<HTMLLIElement> {
|
|
|
39
36
|
*/
|
|
40
37
|
itemDepth?: number;
|
|
41
38
|
/**
|
|
42
|
-
* TODO: improve functionality (issue #1305)
|
|
43
|
-
* @internal
|
|
44
39
|
* If true, element is disabled
|
|
45
40
|
* @default false
|
|
46
41
|
*/
|
|
@@ -68,6 +63,7 @@ export declare function useTreeItem(props: UseTreeItemProps, forwardedRef: any):
|
|
|
68
63
|
selectedItems: import("./TreeViewContext").TreeItemSelectedInterface[];
|
|
69
64
|
setExpanded: React.Dispatch<React.SetStateAction<boolean>>;
|
|
70
65
|
treeItemChildren: (string | number | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any>) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal)[];
|
|
66
|
+
isDisabled: boolean;
|
|
71
67
|
};
|
|
72
68
|
handleClick: (event: any, itemId: any) => void;
|
|
73
69
|
handleKeyDown: (event: React.KeyboardEvent) => void;
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { TreeItemSelectedInterface, TreeViewItemInterface } from './TreeViewContext';
|
|
3
3
|
import { TreeViewSelectable } from './types';
|
|
4
|
+
export { TreeItemSelectedInterface };
|
|
4
5
|
export interface TreeViewApi {
|
|
5
|
-
selectItem({ itemId, checkedStatus }: Pick<TreeViewItemInterface, 'itemId' | 'checkedStatus'>): void;
|
|
6
|
+
selectItem({ itemId, checkedStatus, }: Pick<TreeViewItemInterface, 'itemId' | 'checkedStatus'>): void;
|
|
6
7
|
selectAll(): void;
|
|
7
8
|
clearAll(): void;
|
|
9
|
+
showMore(): void;
|
|
10
|
+
showLess(): void;
|
|
8
11
|
}
|
|
9
12
|
export interface UseTreeViewProps {
|
|
10
13
|
/**
|
|
@@ -42,8 +45,10 @@ export interface UseTreeViewProps {
|
|
|
42
45
|
testId?: string;
|
|
43
46
|
/**
|
|
44
47
|
* Action that fires when an item is expanded or collapsed
|
|
48
|
+
* Return an array of itemIds of items that are expanded
|
|
49
|
+
* Example: ['item0', 'item1', 'item3']
|
|
45
50
|
*/
|
|
46
|
-
onExpandedChange?: (event: React.SyntheticEvent) => void;
|
|
51
|
+
onExpandedChange?: (event: React.SyntheticEvent, expandedItems: Array<string>) => void;
|
|
47
52
|
/**
|
|
48
53
|
* Action that fires when an item is selected
|
|
49
54
|
* Return an array of objects.
|
|
@@ -63,22 +68,29 @@ export interface UseTreeViewProps {
|
|
|
63
68
|
* @default true
|
|
64
69
|
*/
|
|
65
70
|
checkChildren?: boolean;
|
|
66
|
-
children?: React.ReactNode[];
|
|
71
|
+
children?: React.ReactNode[] | React.ReactNode;
|
|
67
72
|
/**
|
|
68
73
|
* The ref object that allows TreeView manipulation.
|
|
69
74
|
* Actions available:
|
|
70
75
|
* selectItem({ itemId, checkedStatus }: Pick<TreeViewItemInterface, 'itemId' | 'checkedStatus'>): void - action that allows to change item selection,
|
|
71
76
|
* selectAll(): void - action that allows to select all items,
|
|
72
77
|
* clearAll(): void - action that allows to unselect all items.
|
|
78
|
+
* showMore(): void - action that gets called when a tree has hidden items and they get expanded.
|
|
79
|
+
* showLess(): void - action that gets called when a tree has hidden items and they get collapsed.
|
|
73
80
|
*/
|
|
74
|
-
apiRef?: React.MutableRefObject<TreeViewApi>;
|
|
81
|
+
apiRef?: React.MutableRefObject<TreeViewApi | undefined>;
|
|
82
|
+
/**
|
|
83
|
+
* If true, every item is disabled
|
|
84
|
+
* @default false
|
|
85
|
+
*/
|
|
86
|
+
isDisabled?: boolean;
|
|
75
87
|
}
|
|
76
88
|
export declare function useTreeView(props: UseTreeViewProps): {
|
|
77
89
|
contextValue: {
|
|
78
90
|
hasIcons: any;
|
|
79
91
|
itemToFocus: any;
|
|
80
92
|
onSelectedItemChange: (selectedItems: TreeItemSelectedInterface[]) => void;
|
|
81
|
-
onExpandedChange: (event: React.SyntheticEvent<Element, Event
|
|
93
|
+
onExpandedChange: (event: React.SyntheticEvent<Element, Event>, expandedItems: string[]) => void;
|
|
82
94
|
selectable: TreeViewSelectable;
|
|
83
95
|
selectedItems: any;
|
|
84
96
|
initialExpandedItems: any[];
|
|
@@ -89,7 +101,9 @@ export declare function useTreeView(props: UseTreeViewProps): {
|
|
|
89
101
|
checkChildren: boolean;
|
|
90
102
|
checkParents: boolean;
|
|
91
103
|
items: any;
|
|
92
|
-
selectItem: ({ itemId, checkedStatus }: Pick<TreeViewItemInterface, 'itemId'
|
|
104
|
+
selectItem: ({ itemId, checkedStatus, }: Pick<TreeViewItemInterface, 'itemId'> & Partial<Pick<TreeViewItemInterface, 'checkedStatus'>>) => void;
|
|
105
|
+
handleExpandedChange: (event: React.SyntheticEvent, itemId: string) => void;
|
|
106
|
+
expandedSet: Set<string>;
|
|
93
107
|
};
|
|
94
108
|
};
|
|
95
109
|
export declare type UseTreeViewReturn = ReturnType<typeof useTreeView>;
|
|
@@ -3,7 +3,7 @@ import { UseTreeViewProps } from './useTreeView';
|
|
|
3
3
|
import { TreeViewSelectable } from './types';
|
|
4
4
|
import React from 'react';
|
|
5
5
|
import { IndeterminateCheckboxStatus } from '../IndeterminateCheckbox';
|
|
6
|
-
import { TreeViewItemInterface } from './TreeViewContext';
|
|
6
|
+
import { TreeItemSelectedInterface, TreeViewItemInterface } from './TreeViewContext';
|
|
7
7
|
export declare enum TreeNodeType {
|
|
8
8
|
branch = "branch",
|
|
9
9
|
leaf = "leaf"
|
|
@@ -25,14 +25,17 @@ export declare function getTreeItemLabelColor(isInverse: boolean, disabled: bool
|
|
|
25
25
|
export declare function getTreeItemWrapperCursor(disabled: boolean, selectable: TreeViewSelectable, nodeType: TreeNodeType): "not-allowed" | "pointer" | "default";
|
|
26
26
|
export declare function getChildrenItemIds(children: any, status?: string): any[];
|
|
27
27
|
export declare function getChildrenItemIdsFlat(children: any): any[];
|
|
28
|
-
export declare function getChildrenItemIdsInTree(children: any): any[];
|
|
29
28
|
export declare function filterNullEntries(obj: any): {
|
|
30
29
|
current: any;
|
|
31
30
|
} | {
|
|
32
31
|
current?: undefined;
|
|
33
32
|
};
|
|
34
|
-
export declare const
|
|
35
|
-
|
|
33
|
+
export declare const getChildrenIds: ({ items, itemId, }: {
|
|
34
|
+
items: TreeViewItemInterface[];
|
|
35
|
+
itemId: TreeViewItemInterface['itemId'];
|
|
36
|
+
}) => any;
|
|
37
|
+
export declare const getInitialItems: ({ children, preselectedItems: rawPreselectedItems, checkParents, checkChildren, selectable, isDisabled: isTreeViewDisabled, }: Pick<UseTreeViewProps, 'children' | 'preselectedItems' | 'checkParents' | 'checkChildren' | 'selectable' | 'isDisabled'>) => any;
|
|
38
|
+
export declare const selectSingle: ({ items, itemId, checkedStatus, }: {
|
|
36
39
|
items: TreeViewItemInterface[];
|
|
37
40
|
itemId: TreeViewItemInterface['itemId'];
|
|
38
41
|
checkedStatus: TreeViewItemInterface['checkedStatus'];
|
|
@@ -42,12 +45,20 @@ export declare const selectSingle: ({ items, itemId, checkedStatus }: {
|
|
|
42
45
|
parentId?: string;
|
|
43
46
|
icon?: React.ReactNode;
|
|
44
47
|
hasOwnTreeItems: boolean;
|
|
48
|
+
isDisabled?: boolean;
|
|
45
49
|
}[];
|
|
46
|
-
export declare const
|
|
50
|
+
export declare const toggleMulti: ({ items, itemId, checkedStatus: rawCheckedStatus, forceCheckedStatus, checkChildren, checkParents, }: {
|
|
47
51
|
items: TreeViewItemInterface[];
|
|
48
52
|
itemId: TreeViewItemInterface['itemId'];
|
|
49
53
|
checkedStatus: TreeViewItemInterface['checkedStatus'];
|
|
50
|
-
|
|
51
|
-
|
|
54
|
+
forceCheckedStatus?: boolean;
|
|
55
|
+
} & Pick<UseTreeViewProps, "checkChildren" | "checkParents">) => any;
|
|
56
|
+
export declare const toggleAllMulti: ({ items, checkedStatus, checkChildren, checkParents, }: {
|
|
57
|
+
items: TreeViewItemInterface[];
|
|
58
|
+
checkedStatus: TreeViewItemInterface['checkedStatus'];
|
|
59
|
+
} & Pick<UseTreeViewProps, "checkChildren" | "checkParents">) => any;
|
|
60
|
+
export declare const getInitialExpandedIds: ({ items, initialExpandedItems, }: {
|
|
52
61
|
items: TreeViewItemInterface[];
|
|
53
62
|
} & Pick<UseTreeViewProps, "initialExpandedItems">) => any[];
|
|
63
|
+
export declare const isEqualArrays: <T>(arrayA: T[], arrayB: T[]) => boolean;
|
|
64
|
+
export declare const isSelectedItemsChanged: (prevSelectedItems: TreeItemSelectedInterface[] | null, selectedItems: TreeItemSelectedInterface[]) => boolean;
|