@carbon/ibm-products 2.32.0 → 2.34.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +351 -3
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon.css +351 -3
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +351 -3
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/es/components/ActionBar/ActionBar.js +8 -1
- package/es/components/CreateSidePanel/CreateSidePanel.d.ts +81 -2
- package/es/components/CreateSidePanel/CreateSidePanel.js +5 -2
- package/es/components/CreateTearsheet/CreateTearsheetDivider.d.ts +12 -1
- package/es/components/CreateTearsheet/CreateTearsheetDivider.js +1 -1
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +39 -145
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +60 -112
- package/es/components/DataSpreadsheet/hooks/useMoveActiveCell.d.ts +3 -1
- package/es/components/DataSpreadsheet/hooks/useMoveActiveCell.js +10 -3
- package/es/components/DataSpreadsheet/utils/commonEventHandlers.d.ts +4 -0
- package/es/components/DataSpreadsheet/utils/commonEventHandlers.js +304 -0
- package/es/components/Datagrid/Datagrid/DatagridContent.js +2 -1
- package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js +4 -1
- package/es/components/Datagrid/Datagrid/DatagridRefBody.js +3 -1
- package/es/components/Datagrid/Datagrid/DatagridSimpleBody.js +4 -1
- package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +6 -2
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.d.ts +1 -1
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +4 -0
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.d.ts +2 -1
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +4 -3
- package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +5 -5
- package/es/components/Datagrid/useRowSize.js +4 -2
- package/es/components/DescriptionList/DescriptionList.d.ts +0 -37
- package/es/components/DescriptionList/DescriptionList.js +7 -12
- package/es/components/DescriptionList/DescriptionListBody.d.ts +2 -0
- package/es/components/DescriptionList/DescriptionListBody.js +39 -0
- package/es/components/DescriptionList/DescriptionListCell.d.ts +2 -0
- package/es/components/DescriptionList/DescriptionListCell.js +39 -0
- package/es/components/DescriptionList/DescriptionListRow.d.ts +2 -0
- package/es/components/DescriptionList/DescriptionListRow.js +41 -0
- package/es/components/DescriptionList/index.d.ts +4 -1
- package/es/components/EditSidePanel/EditSidePanel.d.ts +92 -2
- package/es/components/EditSidePanel/EditSidePanel.js +8 -10
- package/es/components/FilterPanel/FilterPanel.d.ts +5 -0
- package/es/components/FilterPanel/FilterPanel.js +55 -0
- package/es/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.d.ts +5 -0
- package/es/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.js +83 -0
- package/es/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.d.ts +5 -0
- package/es/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.js +94 -0
- package/es/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.d.ts +5 -0
- package/es/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.js +80 -0
- package/es/components/FilterPanel/FilterPanelCheckbox/index.d.ts +1 -0
- package/es/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.d.ts +10 -0
- package/es/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.js +157 -0
- package/es/components/FilterPanel/FilterPanelGroup/FilterPanelGroup.d.ts +5 -0
- package/es/components/FilterPanel/FilterPanelGroup/FilterPanelGroup.js +72 -0
- package/es/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.d.ts +5 -0
- package/es/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.js +63 -0
- package/es/components/FilterPanel/FilterPanelLabel/index.d.ts +1 -0
- package/es/components/FilterPanel/index.d.ts +7 -0
- package/es/components/OptionsTile/OptionsTile.d.ts +77 -3
- package/es/components/OptionsTile/OptionsTile.js +9 -20
- package/es/components/RemoveModal/RemoveModal.d.ts +81 -7
- package/es/components/RemoveModal/RemoveModal.js +1 -0
- package/es/components/ScrollGradient/ScrollGradient.d.ts +5 -0
- package/es/components/ScrollGradient/ScrollGradient.js +156 -0
- package/es/components/ScrollGradient/constants.d.ts +15 -0
- package/es/components/ScrollGradient/constants.js +121 -0
- package/es/components/ScrollGradient/index.d.ts +1 -0
- package/es/components/SidePanel/SidePanel.d.ts +144 -2
- package/es/components/SidePanel/SidePanel.js +88 -112
- package/es/components/StatusIcon/StatusIcon.d.ts +34 -2
- package/es/components/StatusIcon/StatusIcon.js +97 -95
- package/es/components/Tearsheet/TearsheetShell.js +9 -1
- package/es/components/Toolbar/ToolbarGroup.d.ts +17 -2
- package/es/components/Toolbar/ToolbarGroup.js +0 -1
- package/es/components/TruncatedList/TruncatedList.js +5 -3
- package/es/components/UserAvatar/UserAvatar.js +3 -2
- package/es/components/index.d.ts +4 -1
- package/es/global/js/hooks/useFocus.js +9 -2
- package/es/global/js/package-settings.d.ts +12 -0
- package/es/global/js/package-settings.js +12 -0
- package/es/index.js +12 -0
- package/es/settings.d.ts +12 -0
- package/lib/components/ActionBar/ActionBar.js +11 -6
- package/lib/components/CreateSidePanel/CreateSidePanel.d.ts +81 -2
- package/lib/components/CreateSidePanel/CreateSidePanel.js +5 -2
- package/lib/components/CreateTearsheet/CreateTearsheetDivider.d.ts +12 -1
- package/lib/components/CreateTearsheet/CreateTearsheetDivider.js +1 -1
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +39 -145
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +60 -112
- package/lib/components/DataSpreadsheet/hooks/useMoveActiveCell.d.ts +3 -1
- package/lib/components/DataSpreadsheet/hooks/useMoveActiveCell.js +9 -2
- package/lib/components/DataSpreadsheet/utils/commonEventHandlers.d.ts +4 -0
- package/lib/components/DataSpreadsheet/utils/commonEventHandlers.js +311 -0
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +2 -1
- package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js +4 -1
- package/lib/components/Datagrid/Datagrid/DatagridRefBody.js +3 -1
- package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.js +4 -1
- package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +5 -1
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.d.ts +1 -1
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +4 -0
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.d.ts +2 -1
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +4 -3
- package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +5 -5
- package/lib/components/Datagrid/useRowSize.js +4 -2
- package/lib/components/DescriptionList/DescriptionList.d.ts +0 -37
- package/lib/components/DescriptionList/DescriptionList.js +6 -11
- package/lib/components/DescriptionList/DescriptionListBody.d.ts +2 -0
- package/lib/components/DescriptionList/DescriptionListBody.js +46 -0
- package/lib/components/DescriptionList/DescriptionListCell.d.ts +2 -0
- package/lib/components/DescriptionList/DescriptionListCell.js +46 -0
- package/lib/components/DescriptionList/DescriptionListRow.d.ts +2 -0
- package/lib/components/DescriptionList/DescriptionListRow.js +48 -0
- package/lib/components/DescriptionList/index.d.ts +4 -1
- package/lib/components/EditSidePanel/EditSidePanel.d.ts +92 -2
- package/lib/components/EditSidePanel/EditSidePanel.js +8 -10
- package/lib/components/FilterPanel/FilterPanel.d.ts +5 -0
- package/lib/components/FilterPanel/FilterPanel.js +62 -0
- package/lib/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.d.ts +5 -0
- package/lib/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.js +90 -0
- package/lib/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.d.ts +5 -0
- package/lib/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.js +101 -0
- package/lib/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.d.ts +5 -0
- package/lib/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.js +87 -0
- package/lib/components/FilterPanel/FilterPanelCheckbox/index.d.ts +1 -0
- package/lib/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.d.ts +10 -0
- package/lib/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.js +164 -0
- package/lib/components/FilterPanel/FilterPanelGroup/FilterPanelGroup.d.ts +5 -0
- package/lib/components/FilterPanel/FilterPanelGroup/FilterPanelGroup.js +79 -0
- package/lib/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.d.ts +5 -0
- package/lib/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.js +70 -0
- package/lib/components/FilterPanel/FilterPanelLabel/index.d.ts +1 -0
- package/lib/components/FilterPanel/index.d.ts +7 -0
- package/lib/components/OptionsTile/OptionsTile.d.ts +77 -3
- package/lib/components/OptionsTile/OptionsTile.js +9 -20
- package/lib/components/RemoveModal/RemoveModal.d.ts +81 -7
- package/lib/components/RemoveModal/RemoveModal.js +1 -0
- package/lib/components/ScrollGradient/ScrollGradient.d.ts +5 -0
- package/lib/components/ScrollGradient/ScrollGradient.js +163 -0
- package/lib/components/ScrollGradient/constants.d.ts +15 -0
- package/lib/components/ScrollGradient/constants.js +128 -0
- package/lib/components/ScrollGradient/index.d.ts +1 -0
- package/lib/components/SidePanel/SidePanel.d.ts +144 -2
- package/lib/components/SidePanel/SidePanel.js +88 -112
- package/lib/components/StatusIcon/StatusIcon.d.ts +34 -2
- package/lib/components/StatusIcon/StatusIcon.js +97 -95
- package/lib/components/Tearsheet/TearsheetShell.js +9 -1
- package/lib/components/Toolbar/ToolbarGroup.d.ts +17 -2
- package/lib/components/Toolbar/ToolbarGroup.js +0 -1
- package/lib/components/TruncatedList/TruncatedList.js +5 -3
- package/lib/components/UserAvatar/UserAvatar.js +3 -2
- package/lib/components/index.d.ts +4 -1
- package/lib/global/js/hooks/useFocus.js +9 -2
- package/lib/global/js/package-settings.d.ts +12 -0
- package/lib/global/js/package-settings.js +12 -0
- package/lib/index.js +60 -0
- package/lib/settings.d.ts +12 -0
- package/package.json +3 -3
- package/scss/components/FilterPanel/_carbon-imports.scss +9 -0
- package/scss/components/FilterPanel/_filter-panel-accordion-item.scss +56 -0
- package/scss/components/FilterPanel/_filter-panel-accordion.scss +6 -0
- package/scss/components/FilterPanel/_filter-panel-checkbox-with-overflow.scss +62 -0
- package/scss/components/FilterPanel/_filter-panel-checkbox.scss +54 -0
- package/scss/components/FilterPanel/_filter-panel-group.scss +39 -0
- package/scss/components/FilterPanel/_filter-panel-label.scss +39 -0
- package/scss/components/FilterPanel/_filter-panel.scss +31 -0
- package/scss/components/FilterPanel/_index-with-carbon.scss +15 -0
- package/scss/components/FilterPanel/_index.scss +14 -0
- package/scss/components/ScrollGradient/_carbon-imports.scss +9 -0
- package/scss/components/ScrollGradient/_index-with-carbon.scss +9 -0
- package/scss/components/ScrollGradient/_index.scss +8 -0
- package/scss/components/ScrollGradient/_scroll-gradient.scss +102 -0
- package/scss/components/UserAvatar/_user-avatar.scss +37 -4
- package/scss/components/_index-with-carbon.scss +2 -0
- package/scss/components/_index.scss +2 -0
@@ -1,5 +1,147 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2020, 2024
|
3
|
+
*
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
/// <reference path="../../../src/custom-typings/index.d.ts" />
|
8
|
+
import React, { ReactNode } from 'react';
|
9
|
+
import { ButtonProps } from '@carbon/react';
|
10
|
+
type SidePanelBaseProps = {
|
11
|
+
/**
|
12
|
+
* Sets the action toolbar buttons
|
13
|
+
*/
|
14
|
+
actionToolbarButtons?: ButtonProps[];
|
15
|
+
/**
|
16
|
+
* The primary actions to be shown in the side panel. Each action is
|
17
|
+
* specified as an object that will render expressive Buttons. Any Button
|
18
|
+
* props can be passed in and any other fields in the object will be
|
19
|
+
* passed through to the button element as HTML attributes.
|
20
|
+
*
|
21
|
+
* See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
|
22
|
+
*/
|
23
|
+
actions?: ButtonProps[];
|
24
|
+
/**
|
25
|
+
* Determines if the title will animate on scroll
|
26
|
+
*/
|
27
|
+
animateTitle?: boolean;
|
28
|
+
/**
|
29
|
+
* Sets the body content of the side panel
|
30
|
+
*/
|
31
|
+
children: ReactNode;
|
32
|
+
/**
|
33
|
+
* Sets an optional className to be added to the side panel outermost element
|
34
|
+
*/
|
35
|
+
className?: string;
|
36
|
+
/**
|
37
|
+
* Sets the close button icon description
|
38
|
+
*/
|
39
|
+
closeIconDescription?: string;
|
40
|
+
/**
|
41
|
+
* Determines whether the side panel should render the condensed version (affects action buttons primarily)
|
42
|
+
*/
|
43
|
+
condensedActions?: boolean;
|
44
|
+
/**
|
45
|
+
* Sets the current step of the side panel
|
46
|
+
*/
|
47
|
+
currentStep?: number;
|
48
|
+
/**
|
49
|
+
* Unique identifier
|
50
|
+
*/
|
51
|
+
id?: string;
|
52
|
+
/**
|
53
|
+
* Determines whether the side panel should render with an overlay
|
54
|
+
*/
|
55
|
+
includeOverlay?: boolean;
|
56
|
+
/**
|
57
|
+
* Sets the label text which will display above the title text
|
58
|
+
*/
|
59
|
+
labelText?: string;
|
60
|
+
/**
|
61
|
+
* Sets the icon description for the navigation back icon button
|
62
|
+
*/
|
63
|
+
navigationBackIconDescription?: string;
|
64
|
+
/**
|
65
|
+
* Changes the current side panel page to the previous page
|
66
|
+
*/
|
67
|
+
onNavigationBack?(): void;
|
68
|
+
/**
|
69
|
+
* Specify a handler for closing the side panel.
|
70
|
+
* This handler closes the modal, e.g. changing `open` prop.
|
71
|
+
*/
|
72
|
+
onRequestClose?(): void;
|
73
|
+
/**
|
74
|
+
* Optional function called when the side panel exit animation is complete.
|
75
|
+
* This handler can be used for any state cleanup needed before the panel is removed from the DOM.
|
76
|
+
*/
|
77
|
+
onUnmount?(): void;
|
78
|
+
/**
|
79
|
+
* Determines whether the side panel should render or not
|
80
|
+
*/
|
81
|
+
open: boolean;
|
82
|
+
/**
|
83
|
+
* Determines if the side panel is on the right or left
|
84
|
+
*/
|
85
|
+
placement?: 'left' | 'right';
|
86
|
+
/**
|
87
|
+
* Prevent closing on click outside of the panel
|
88
|
+
*/
|
89
|
+
preventCloseOnClickOutside?: boolean;
|
90
|
+
/**
|
91
|
+
* This is the selector to the element that contains all of the page content that will shrink if the panel is a slide in.
|
92
|
+
* This prop is required when using the `slideIn` variant of the side panel.
|
93
|
+
*/
|
94
|
+
selectorPageContent?: string;
|
95
|
+
/**
|
96
|
+
* Specify a CSS selector that matches the DOM element that should
|
97
|
+
* be focused when the side panel opens
|
98
|
+
*/
|
99
|
+
selectorPrimaryFocus?: string;
|
100
|
+
/**
|
101
|
+
* Sets the size of the side panel
|
102
|
+
*/
|
103
|
+
size: 'xs' | 'sm' | 'md' | 'lg' | '2xl';
|
104
|
+
/**
|
105
|
+
* Determines if this panel slides in
|
106
|
+
*/
|
107
|
+
slideIn?: boolean;
|
108
|
+
/**
|
109
|
+
* **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
|
110
|
+
*/
|
111
|
+
slug?: ReactNode;
|
112
|
+
/**
|
113
|
+
* Sets the subtitle text
|
114
|
+
*/
|
115
|
+
subtitle?: ReactNode;
|
116
|
+
/**
|
117
|
+
* Sets the title text
|
118
|
+
*/
|
119
|
+
title?: string;
|
120
|
+
};
|
121
|
+
type SidePanelSlideInProps = {
|
122
|
+
/**
|
123
|
+
* Determines if this panel slides in
|
124
|
+
*/
|
125
|
+
slideIn?: false;
|
126
|
+
/**
|
127
|
+
* This is the selector to the element that contains all of the page content that will shrink if the panel is a slide in.
|
128
|
+
* This prop is required when using the `slideIn` variant of the side panel.
|
129
|
+
*/
|
130
|
+
selectorPageContent?: string;
|
131
|
+
} | {
|
132
|
+
/**
|
133
|
+
* Determines if this panel slides in
|
134
|
+
*/
|
135
|
+
slideIn: true;
|
136
|
+
/**
|
137
|
+
* This is the selector to the element that contains all of the page content that will shrink if the panel is a slide in.
|
138
|
+
* This prop is required when using the `slideIn` variant of the side panel. Required for slideIn panels.
|
139
|
+
*/
|
140
|
+
selectorPageContent: string;
|
141
|
+
};
|
142
|
+
type SidePanelProps = SidePanelBaseProps & SidePanelSlideInProps;
|
1
143
|
/**
|
2
144
|
* Side panels keep users in-context of a page while performing tasks like navigating, editing, viewing details, or configuring something new.
|
3
145
|
*/
|
4
|
-
export let SidePanel: React.ForwardRefExoticComponent<React.RefAttributes<
|
5
|
-
|
146
|
+
export declare let SidePanel: React.ForwardRefExoticComponent<SidePanelProps & React.RefAttributes<HTMLDivElement>>;
|
147
|
+
export {};
|
@@ -18,7 +18,6 @@ var useResizeObserver = require('../../global/js/hooks/useResizeObserver.js');
|
|
18
18
|
var carbonMotion = require('@carbon/motion');
|
19
19
|
var devtools = require('../../global/js/utils/devtools.js');
|
20
20
|
var propsHelper = require('../../global/js/utils/props-helper.js');
|
21
|
-
var wrapFocus = require('../../global/js/utils/wrapFocus.js');
|
22
21
|
var settings = require('../../settings.js');
|
23
22
|
var constants = require('./constants.js');
|
24
23
|
var react = require('@carbon/react');
|
@@ -27,6 +26,7 @@ var variants = require('./motion/variants.js');
|
|
27
26
|
var pconsole = require('../../global/js/utils/pconsole.js');
|
28
27
|
var ActionSet = require('../ActionSet/ActionSet.js');
|
29
28
|
var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
|
29
|
+
var useFocus = require('../../global/js/hooks/useFocus.js');
|
30
30
|
|
31
31
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
32
32
|
|
@@ -37,8 +37,8 @@ var _excluded = ["actionToolbarButtons", "actions", "animateTitle", "children",
|
|
37
37
|
_excluded2 = ["label", "kind", "icon", "tooltipPosition", "tooltipAlignment", "leading", "disabled", "className", "onClick"];
|
38
38
|
var blockClass = "".concat(settings.pkg.prefix, "--side-panel");
|
39
39
|
var componentName = 'SidePanel';
|
40
|
-
|
41
|
-
|
40
|
+
// `any` is a work around until ActionSet is migrated to TS
|
41
|
+
var MotionActionSet = framerMotion.motion(ActionSet.ActionSet);
|
42
42
|
|
43
43
|
// Default values for props
|
44
44
|
var defaults = {
|
@@ -49,7 +49,6 @@ var defaults = {
|
|
49
49
|
placement: 'right',
|
50
50
|
size: 'md'
|
51
51
|
};
|
52
|
-
var MotionActionSet = framerMotion.motion(ActionSet.ActionSet);
|
53
52
|
|
54
53
|
/**
|
55
54
|
* Side panels keep users in-context of a page while performing tasks like navigating, editing, viewing details, or configuring something new.
|
@@ -93,18 +92,16 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
93
92
|
_useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
|
94
93
|
animationComplete = _useState2[0],
|
95
94
|
setAnimationComplete = _useState2[1];
|
96
|
-
var localRef = React.useRef();
|
95
|
+
var localRef = React.useRef(null);
|
97
96
|
var sidePanelRef = ref || localRef;
|
98
|
-
var overlayRef = React.useRef();
|
99
|
-
var
|
100
|
-
var
|
101
|
-
var
|
102
|
-
var
|
103
|
-
var
|
104
|
-
var
|
105
|
-
var
|
106
|
-
var labelTextRef = React.useRef();
|
107
|
-
var subtitleRef = React.useRef();
|
97
|
+
var overlayRef = React.useRef(null);
|
98
|
+
var innerContentRef = React.useRef(null);
|
99
|
+
var closeRef = React.useRef(null);
|
100
|
+
var animatedScrollRef = React.useRef(null);
|
101
|
+
var headerRef = React.useRef(null);
|
102
|
+
var titleRef = React.useRef(null);
|
103
|
+
var labelTextRef = React.useRef(null);
|
104
|
+
var subtitleRef = React.useRef(null);
|
108
105
|
var previousState = usePreviousValue.usePreviousValue({
|
109
106
|
size: size,
|
110
107
|
open: open
|
@@ -117,52 +114,39 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
117
114
|
_useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
|
118
115
|
doAnimateTitle = _useState6[0],
|
119
116
|
setDoAnimateTitle = _useState6[1];
|
117
|
+
var _useFocus = useFocus.useFocus(sidePanelRef),
|
118
|
+
firstElement = _useFocus.firstElement,
|
119
|
+
keyDownListener = _useFocus.keyDownListener;
|
120
|
+
var panelRefValue = sidePanelRef.current;
|
120
121
|
var shouldReduceMotion = framerMotion.useReducedMotion();
|
121
122
|
React.useEffect(function () {
|
122
123
|
setDoAnimateTitle(animateTitle);
|
123
124
|
}, [animateTitle]);
|
124
125
|
var handleScroll = React.useCallback(function () {
|
125
|
-
var
|
126
|
-
|
127
|
-
|
126
|
+
var _animatedScrollRef$cu;
|
127
|
+
var scrollTop = animatedScrollRef === null || animatedScrollRef === void 0 || (_animatedScrollRef$cu = animatedScrollRef.current) === null || _animatedScrollRef$cu === void 0 ? void 0 : _animatedScrollRef$cu.scrollTop;
|
128
|
+
panelRefValue === null || panelRefValue === void 0 || panelRefValue.style.setProperty("--".concat(blockClass, "--scroll-animation-progress"), (Math.min(Number(scrollTop), scrollAnimationDistance) / scrollAnimationDistance).toString());
|
129
|
+
}, [scrollAnimationDistance, panelRefValue]);
|
128
130
|
var reducedMotion = typeof window !== 'undefined' && (_window = window) !== null && _window !== void 0 && _window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
|
129
131
|
matches: true
|
130
132
|
};
|
131
133
|
|
132
134
|
// scroll panel to top going between steps
|
133
135
|
React.useEffect(function () {
|
134
|
-
if (sidePanelRef &&
|
135
|
-
var _animatedScrollRef$
|
136
|
-
var scrollableSection = (_animatedScrollRef$
|
137
|
-
scrollableSection
|
136
|
+
if (sidePanelRef && panelRefValue) {
|
137
|
+
var _animatedScrollRef$cu2;
|
138
|
+
var scrollableSection = (_animatedScrollRef$cu2 = animatedScrollRef.current) !== null && _animatedScrollRef$cu2 !== void 0 ? _animatedScrollRef$cu2 : innerContentRef.current;
|
139
|
+
if (scrollableSection) {
|
140
|
+
scrollableSection.scrollTop = 0;
|
141
|
+
}
|
138
142
|
// The size of the panel has changed while it is still opened
|
139
143
|
// so we need to scroll it to the top and reset the header
|
140
144
|
// height css custom property
|
141
|
-
if (
|
145
|
+
if (previousState && previousState['size'] !== size && scrollableSection) {
|
142
146
|
scrollableSection.scrollTop = 0;
|
143
147
|
}
|
144
148
|
}
|
145
|
-
}, [currentStep, sidePanelRef, size, previousState
|
146
|
-
|
147
|
-
// set initial focus when side panel opens
|
148
|
-
React.useEffect(function () {
|
149
|
-
var initialFocus = function initialFocus(focusContainerElement) {
|
150
|
-
var containerElement = focusContainerElement;
|
151
|
-
var primaryFocusElement = containerElement && containerElement.querySelector(selectorPrimaryFocus);
|
152
|
-
if (primaryFocusElement) {
|
153
|
-
return primaryFocusElement;
|
154
|
-
} else {
|
155
|
-
return closeRef && closeRef.current;
|
156
|
-
}
|
157
|
-
};
|
158
|
-
var focusButton = function focusButton(focusContainerElement) {
|
159
|
-
var target = initialFocus(focusContainerElement);
|
160
|
-
target === null || target === void 0 || target.focus();
|
161
|
-
};
|
162
|
-
if (open && animationComplete) {
|
163
|
-
focusButton(innerContentRef.current);
|
164
|
-
}
|
165
|
-
}, [selectorPrimaryFocus, open, animationComplete]);
|
149
|
+
}, [currentStep, sidePanelRef, size, previousState, id, panelRefValue]);
|
166
150
|
|
167
151
|
// Add console warning if labelText is provided without a title.
|
168
152
|
// This combination is not allowed.
|
@@ -173,7 +157,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
173
157
|
}, [labelText, title]);
|
174
158
|
var checkSetDoAnimateTitle = function checkSetDoAnimateTitle() {
|
175
159
|
var canDoAnimateTitle = false;
|
176
|
-
if (
|
160
|
+
if (panelRefValue && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !reducedMotion.matches) {
|
177
161
|
var _labelTextRef$current, _labelTextRef$current2, _subtitleRef$current$, _subtitleRef$current;
|
178
162
|
var titleEl = titleRef.current;
|
179
163
|
var labelHeight = (_labelTextRef$current = labelTextRef === null || labelTextRef === void 0 || (_labelTextRef$current2 = labelTextRef.current) === null || _labelTextRef$current2 === void 0 ? void 0 : _labelTextRef$current2.offsetHeight) !== null && _labelTextRef$current !== void 0 ? _labelTextRef$current : 0;
|
@@ -186,7 +170,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
186
170
|
setScrollAnimationDistance(_scrollAnimationDistance);
|
187
171
|
|
188
172
|
// used to calculate the header moves
|
189
|
-
|
173
|
+
panelRefValue === null || panelRefValue === void 0 || panelRefValue.style.setProperty("--".concat(blockClass, "--scroll-animation-distance"), _scrollAnimationDistance.toString());
|
190
174
|
var scrollEl = animatedScrollRef.current;
|
191
175
|
if (!scrollEl && animateTitle && !doAnimateTitle) {
|
192
176
|
// may be switching back based on resize
|
@@ -211,9 +195,9 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
211
195
|
animatedScrollRef.current.addEventListener('scroll', handleScroll);
|
212
196
|
}
|
213
197
|
if (!doAnimateTitle && sidePanelRef.current) {
|
214
|
-
|
198
|
+
panelRefValue === null || panelRefValue === void 0 || panelRefValue.style.setProperty("--".concat(blockClass, "--scroll-animation-progress"), '0');
|
215
199
|
}
|
216
|
-
}, [animatedScrollRef, doAnimateTitle, handleScroll, sidePanelRef]);
|
200
|
+
}, [animatedScrollRef, doAnimateTitle, handleScroll, sidePanelRef, panelRefValue]);
|
217
201
|
|
218
202
|
/* istanbul ignore next */
|
219
203
|
var handleResize = function handleResize() {
|
@@ -222,7 +206,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
222
206
|
|
223
207
|
// Calculate scroll distances
|
224
208
|
React.useEffect(function () {
|
225
|
-
if (
|
209
|
+
if (panelRefValue && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !reducedMotion.matches) {
|
226
210
|
checkSetDoAnimateTitle();
|
227
211
|
}
|
228
212
|
|
@@ -232,7 +216,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
232
216
|
// click outside functionality if `includeOverlay` prop is set
|
233
217
|
React.useEffect(function () {
|
234
218
|
var handleOutsideClick = function handleOutsideClick(event) {
|
235
|
-
if (
|
219
|
+
if (panelRefValue && overlayRef.current && overlayRef.current.contains(event.target) && onRequestClose) {
|
236
220
|
onRequestClose();
|
237
221
|
}
|
238
222
|
};
|
@@ -250,7 +234,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
250
234
|
bodyElement.style.overflow = '';
|
251
235
|
document.removeEventListener('click', handleOutsideClick);
|
252
236
|
};
|
253
|
-
}, [includeOverlay, onRequestClose, open, preventCloseOnClickOutside, onUnmount, sidePanelRef]);
|
237
|
+
}, [includeOverlay, onRequestClose, open, preventCloseOnClickOutside, onUnmount, sidePanelRef, panelRefValue]);
|
254
238
|
|
255
239
|
// initializes the side panel to close
|
256
240
|
var onAnimationEnd = function onAnimationEnd() {
|
@@ -269,64 +253,62 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
269
253
|
}, [reducedMotion.matches]);
|
270
254
|
|
271
255
|
// initializes the side panel to open
|
272
|
-
var
|
256
|
+
var onAnimationStart = function onAnimationStart() {
|
273
257
|
setAnimationComplete(false);
|
274
258
|
};
|
275
259
|
|
276
260
|
// used to reset margins of the slide in panel when closed/closing
|
277
261
|
React.useEffect(function () {
|
278
262
|
if (!open && slideIn) {
|
279
|
-
var pageContentElement = document.querySelector(selectorPageContent);
|
263
|
+
var pageContentElement = selectorPageContent ? document.querySelector(selectorPageContent) : null;
|
280
264
|
if (placement && placement === 'right' && pageContentElement) {
|
281
|
-
pageContentElement.style.marginInlineEnd = 0;
|
265
|
+
pageContentElement.style.marginInlineEnd = '0';
|
282
266
|
} else if (pageContentElement) {
|
283
|
-
pageContentElement.style.marginInlineStart = 0;
|
267
|
+
pageContentElement.style.marginInlineStart = '0';
|
284
268
|
}
|
285
269
|
}
|
286
270
|
}, [open, placement, selectorPageContent, slideIn]);
|
287
271
|
React.useEffect(function () {
|
288
|
-
if (!open && previousState
|
272
|
+
if (!open && previousState && previousState['open'] && reducedMotion.matches) {
|
289
273
|
onUnmount === null || onUnmount === void 0 || onUnmount();
|
290
274
|
}
|
291
|
-
}, [open, onUnmount, reducedMotion.matches, previousState
|
275
|
+
}, [open, onUnmount, reducedMotion.matches, previousState]);
|
292
276
|
|
293
277
|
// used to set margins of content for slide in panel version
|
294
278
|
React.useEffect(function () {
|
295
279
|
if (open && slideIn) {
|
296
|
-
var pageContentElement = document.querySelector(selectorPageContent);
|
280
|
+
var pageContentElement = selectorPageContent ? document.querySelector(selectorPageContent) : null;
|
297
281
|
if (pageContentElement) {
|
298
282
|
pageContentElement.style.inlineSize = 'auto';
|
299
283
|
} else {
|
300
284
|
pconsole["default"].warn('SidePanel prop `selectorPageContent` was not provided a selector that matches any element on your page. If an element is not found, the panel will render as a slide over.');
|
301
285
|
}
|
302
286
|
if (placement && placement === 'right' && pageContentElement) {
|
303
|
-
pageContentElement.style.marginInlineEnd = 0;
|
304
|
-
pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-end ".concat(carbonMotion.moderate02) :
|
287
|
+
pageContentElement.style.marginInlineEnd = '0';
|
288
|
+
pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-end ".concat(carbonMotion.moderate02) : '';
|
305
289
|
pageContentElement.style.marginInlineEnd = constants.SIDE_PANEL_SIZES[size];
|
306
290
|
} else if (pageContentElement) {
|
307
|
-
pageContentElement.style.marginInlineStart = 0;
|
308
|
-
pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-start ".concat(carbonMotion.moderate02) :
|
291
|
+
pageContentElement.style.marginInlineStart = '0';
|
292
|
+
pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-start ".concat(carbonMotion.moderate02) : '';
|
309
293
|
pageContentElement.style.marginInlineStart = constants.SIDE_PANEL_SIZES[size];
|
310
294
|
}
|
311
295
|
}
|
312
296
|
}, [slideIn, selectorPageContent, placement, size, reducedMotion.matches, open]);
|
313
|
-
|
314
|
-
|
315
|
-
|
316
|
-
|
317
|
-
|
318
|
-
|
319
|
-
|
320
|
-
|
321
|
-
|
322
|
-
|
323
|
-
|
324
|
-
|
325
|
-
|
326
|
-
oldActiveNode: oldActiveNode
|
327
|
-
});
|
297
|
+
React.useEffect(function () {
|
298
|
+
if (open) {
|
299
|
+
setTimeout(function () {
|
300
|
+
if (selectorPrimaryFocus) {
|
301
|
+
var _document;
|
302
|
+
var primeFocusEl = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector(selectorPrimaryFocus);
|
303
|
+
if (primeFocusEl) {
|
304
|
+
primeFocusEl === null || primeFocusEl === void 0 || primeFocusEl.focus();
|
305
|
+
}
|
306
|
+
} else {
|
307
|
+
firstElement === null || firstElement === void 0 || firstElement.focus();
|
308
|
+
}
|
309
|
+
}, 0);
|
328
310
|
}
|
329
|
-
};
|
311
|
+
}, [animationComplete, firstElement, open, selectorPrimaryFocus]);
|
330
312
|
var primaryActionContainerClassNames = cx__default["default"](["".concat(blockClass, "__actions-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__actions-container--condensed"), condensedActions)]);
|
331
313
|
var mainPanelClassNames = cx__default["default"]([blockClass, className, "".concat(blockClass), "".concat(blockClass, "--").concat(size), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--right-placement"), placement === 'right'), "".concat(blockClass, "--left-placement"), placement === 'left'), "".concat(blockClass, "--slide-in"), slideIn), "".concat(blockClass, "--has-slug"), slug), "".concat(blockClass, "--condensed-actions"), condensedActions), "".concat(blockClass, "--animated-title"), doAnimateTitle), "".concat(blockClass, "--has-overlay"), includeOverlay)]);
|
332
314
|
var renderTitle = function renderTitle() {
|
@@ -347,7 +329,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
347
329
|
var _slug$type;
|
348
330
|
var slugCloseSize = actions && actions.length && /l/.test(size) ? 'md' : 'sm';
|
349
331
|
var normalizedSlug;
|
350
|
-
if (slug && (
|
332
|
+
if (slug && ((_slug$type = slug['type']) === null || _slug$type === void 0 ? void 0 : _slug$type.displayName) === 'Slug') {
|
351
333
|
normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
|
352
334
|
// slug size is sm unless actions and size > md
|
353
335
|
size: slugCloseSize
|
@@ -392,17 +374,17 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
392
374
|
ref: subtitleRef
|
393
375
|
}, subtitle), actionToolbarButtons && actionToolbarButtons.length && /*#__PURE__*/React__default["default"].createElement("div", {
|
394
376
|
className: "".concat(blockClass, "__action-toolbar")
|
395
|
-
}, actionToolbarButtons.map(function (
|
396
|
-
var label =
|
397
|
-
kind =
|
398
|
-
icon =
|
399
|
-
tooltipPosition =
|
400
|
-
tooltipAlignment =
|
401
|
-
leading =
|
402
|
-
disabled =
|
403
|
-
className =
|
404
|
-
onClick =
|
405
|
-
rest = _rollupPluginBabelHelpers.objectWithoutProperties(
|
377
|
+
}, actionToolbarButtons.map(function (_ref4) {
|
378
|
+
var label = _ref4.label,
|
379
|
+
kind = _ref4.kind,
|
380
|
+
icon = _ref4.icon,
|
381
|
+
tooltipPosition = _ref4.tooltipPosition,
|
382
|
+
tooltipAlignment = _ref4.tooltipAlignment,
|
383
|
+
leading = _ref4.leading,
|
384
|
+
disabled = _ref4.disabled,
|
385
|
+
className = _ref4.className,
|
386
|
+
onClick = _ref4.onClick,
|
387
|
+
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref4, _excluded2);
|
406
388
|
return /*#__PURE__*/React__default["default"].createElement(react.Button, _rollupPluginBabelHelpers["extends"]({}, rest, {
|
407
389
|
key: label,
|
408
390
|
kind: kind || 'ghost',
|
@@ -428,14 +410,11 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
428
410
|
return /*#__PURE__*/React__default["default"].createElement(framerMotion.AnimatePresence, null, open && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(framerMotion.motion.div, _rollupPluginBabelHelpers["extends"]({}, devtools.getDevtoolsProps(componentName), rest, {
|
429
411
|
id: id,
|
430
412
|
className: mainPanelClassNames,
|
431
|
-
onBlur: handleBlur,
|
432
413
|
ref: sidePanelRef,
|
433
414
|
role: "complementary",
|
434
415
|
"aria-label": title,
|
435
416
|
onAnimationComplete: onAnimationEnd,
|
436
|
-
onAnimationStart:
|
437
|
-
return _onAnimationStart();
|
438
|
-
},
|
417
|
+
onAnimationStart: onAnimationStart,
|
439
418
|
variants: variants.panelVariants,
|
440
419
|
initial: "hidden",
|
441
420
|
animate: "visible",
|
@@ -443,13 +422,9 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
443
422
|
custom: {
|
444
423
|
placement: placement,
|
445
424
|
shouldReduceMotion: shouldReduceMotion
|
446
|
-
}
|
447
|
-
|
448
|
-
|
449
|
-
tabIndex: "0",
|
450
|
-
role: "link",
|
451
|
-
className: "".concat(blockClass, "__visually-hidden")
|
452
|
-
}, "Focus sentinel"), doAnimateTitle ? /*#__PURE__*/React__default["default"].createElement("div", {
|
425
|
+
},
|
426
|
+
onKeyDown: keyDownListener
|
427
|
+
}), doAnimateTitle ? /*#__PURE__*/React__default["default"].createElement("div", {
|
453
428
|
ref: animatedScrollRef,
|
454
429
|
className: "".concat(blockClass, "__animated-scroll-wrapper ").concat(blockClass, "--scrolls")
|
455
430
|
}, renderHeader(), renderMain()) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React__default["default"].createElement(MotionActionSet, {
|
@@ -458,12 +433,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
458
433
|
size: size === 'xs' ? 'sm' : size,
|
459
434
|
custom: shouldReduceMotion,
|
460
435
|
variants: variants.actionSetVariants
|
461
|
-
}), /*#__PURE__*/React__default["default"].createElement("
|
462
|
-
ref: endTrapRef,
|
463
|
-
tabIndex: "0",
|
464
|
-
role: "link",
|
465
|
-
className: "".concat(blockClass, "__visually-hidden")
|
466
|
-
}, "Focus sentinel")), /*#__PURE__*/React__default["default"].createElement(framerMotion.AnimatePresence, null, includeOverlay && /*#__PURE__*/React__default["default"].createElement(framerMotion.motion.div, {
|
436
|
+
})), /*#__PURE__*/React__default["default"].createElement(framerMotion.AnimatePresence, null, includeOverlay && /*#__PURE__*/React__default["default"].createElement(framerMotion.motion.div, {
|
467
437
|
variants: variants.overlayVariants,
|
468
438
|
initial: "hidden",
|
469
439
|
animate: "visible",
|
@@ -504,7 +474,8 @@ exports.SidePanel.propTypes = {
|
|
504
474
|
*
|
505
475
|
* See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
|
506
476
|
*/
|
507
|
-
actions: propsHelper.allPropTypes([
|
477
|
+
actions: propsHelper.allPropTypes([/**@ts-ignore*/
|
478
|
+
ActionSet.ActionSet.validateActions(), index["default"].arrayOf(index["default"].shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, react.Button.propTypes), {}, {
|
508
479
|
kind: index["default"].oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
|
509
480
|
tooltipPosition: index["default"].oneOf(['top', 'right', 'bottom', 'left']),
|
510
481
|
tooltipAlignment: index["default"].oneOf(['start', 'center', 'end']),
|
@@ -583,22 +554,26 @@ exports.SidePanel.propTypes = {
|
|
583
554
|
* This is the selector to the element that contains all of the page content that will shrink if the panel is a slide in.
|
584
555
|
* This prop is required when using the `slideIn` variant of the side panel.
|
585
556
|
*/
|
586
|
-
|
587
|
-
|
557
|
+
/**@ts-ignore*/
|
558
|
+
selectorPageContent: index["default"].string.isRequired.if(function (_ref6) {
|
559
|
+
var slideIn = _ref6.slideIn;
|
588
560
|
return slideIn;
|
589
561
|
}),
|
590
562
|
/**
|
591
563
|
* Specify a CSS selector that matches the DOM element that should
|
592
564
|
* be focused when the side panel opens
|
593
565
|
*/
|
566
|
+
/**@ts-ignore*/
|
594
567
|
selectorPrimaryFocus: index["default"].string,
|
595
568
|
/**
|
596
569
|
* Sets the size of the side panel
|
597
570
|
*/
|
571
|
+
/**@ts-ignore*/
|
598
572
|
size: index["default"].oneOf(['xs', 'sm', 'md', 'lg', '2xl']),
|
599
573
|
/**
|
600
574
|
* Determines if this panel slides in
|
601
575
|
*/
|
576
|
+
/**@ts-ignore*/
|
602
577
|
slideIn: index["default"].bool,
|
603
578
|
/**
|
604
579
|
* **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
|
@@ -611,8 +586,9 @@ exports.SidePanel.propTypes = {
|
|
611
586
|
/**
|
612
587
|
* Sets the title text
|
613
588
|
*/
|
614
|
-
|
615
|
-
|
589
|
+
/**@ts-ignore*/
|
590
|
+
title: index["default"].string.isRequired.if(function (_ref7) {
|
591
|
+
var labelText = _ref7.labelText;
|
616
592
|
return labelText;
|
617
593
|
})
|
618
594
|
};
|
@@ -1,3 +1,10 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2021, 2022
|
3
|
+
*
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
import React, { PropsWithChildren } from 'react';
|
1
8
|
/**
|
2
9
|
The `StatusIcon` component follows the Carbon guidelines for status icons with
|
3
10
|
some added specifications around illustration usage. For additional usage
|
@@ -7,5 +14,30 @@ _Status icons_ are an important method of communicating severity level
|
|
7
14
|
information to users. The shapes and colors, communicate severity that enable
|
8
15
|
users to quickly assess and identify status and respond accordingly.
|
9
16
|
*/
|
10
|
-
|
11
|
-
|
17
|
+
type Size = 'sm' | 'md' | 'lg' | 'xl';
|
18
|
+
type Theme = 'light' | 'dark';
|
19
|
+
type Kind = 'fatal' | 'critical' | 'major-warning' | 'minor-warning' | 'undefined' | 'unknown' | 'normal' | 'info' | 'in-progress' | 'running' | 'pending';
|
20
|
+
interface StatusIconProps extends PropsWithChildren {
|
21
|
+
/**
|
22
|
+
* Provide an optional class to be applied to the modal root node.
|
23
|
+
*/
|
24
|
+
className?: string;
|
25
|
+
/**
|
26
|
+
* A required prop that provides a title element and tooltip for the icon for accessibility purposes
|
27
|
+
*/
|
28
|
+
iconDescription: string;
|
29
|
+
/**
|
30
|
+
* A required prop that displays the respective icon associated with the status
|
31
|
+
*/
|
32
|
+
kind: Kind;
|
33
|
+
/**
|
34
|
+
* A required prop that displays the size of the icon associate with the status
|
35
|
+
*/
|
36
|
+
size: Size;
|
37
|
+
/**
|
38
|
+
* A required prop that displays the theme of the icon associated with the status
|
39
|
+
*/
|
40
|
+
theme: Theme;
|
41
|
+
}
|
42
|
+
export declare let StatusIcon: React.ForwardRefExoticComponent<StatusIconProps & React.RefAttributes<React.ReactSVGElement | null>>;
|
43
|
+
export {};
|