@carbon/ibm-products 2.33.0 → 2.35.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +31990 -32061
- 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-released-only.css +38 -17
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +636 -24096
- 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 +2342 -17830
- 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/ActionSet/ActionSet.d.ts +38 -2
- package/es/components/ActionSet/ActionSet.js +3 -5
- package/es/components/CoachmarkFixed/CoachmarkFixed.js +1 -1
- package/es/components/ConditionBuilder/ConditionBuilder.d.ts +5 -0
- package/es/components/ConditionBuilder/ConditionBuilder.js +125 -0
- package/es/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.d.ts +10 -0
- package/es/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js +92 -0
- package/es/components/ConditionBuilder/ConditionBuilderContext/DataTreeContext.d.ts +38 -0
- package/es/components/ConditionBuilder/ConditionBuilderContext/DataTreeContext.js +88 -0
- package/es/components/ConditionBuilder/assets/sampleInput.d.ts +58 -0
- package/es/components/ConditionBuilder/index.d.ts +1 -0
- package/es/components/CreateFullPage/CreateFullPage.js +3 -19
- package/es/components/CreateFullPage/CreateFullPageStep.js +22 -7
- package/es/components/CreateSidePanel/CreateSidePanel.d.ts +81 -2
- package/es/components/CreateSidePanel/CreateSidePanel.js +5 -2
- package/es/components/CreateTearsheetNarrow/CreateTearsheetNarrow.d.ts +82 -2
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +5 -117
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +12 -111
- 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/stateReducer.js +2 -1
- package/es/components/Datagrid/useEditableCell.js +15 -0
- package/es/components/DelimitedList/DelimitedList.d.ts +27 -2
- package/es/components/DelimitedList/DelimitedList.js +0 -1
- package/es/components/EditInPlace/EditInPlace.d.ts +97 -5
- package/es/components/EditInPlace/EditInPlace.js +10 -6
- package/es/components/EditSidePanel/EditSidePanel.d.ts +92 -2
- package/es/components/EditSidePanel/EditSidePanel.js +8 -10
- package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.d.ts +61 -2
- package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +1 -3
- package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.d.ts +61 -2
- package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +1 -2
- package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.d.ts +61 -2
- package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +1 -3
- package/es/components/ExportModal/ExportModal.d.ts +110 -2
- package/es/components/ExportModal/ExportModal.js +10 -4
- 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 +8 -10
- 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.js +2 -2
- package/es/components/FilterPanel/FilterPanelSearch/FilterPanelSearch.d.ts +5 -0
- package/es/components/FilterPanel/FilterPanelSearch/FilterPanelSearch.js +92 -0
- package/es/components/FilterPanel/index.d.ts +5 -0
- package/es/components/HTTPErrors/HTTPError403/HTTPError403.d.ts +40 -2
- package/es/components/HTTPErrors/HTTPError403/HTTPError403.js +1 -1
- package/es/components/HTTPErrors/HTTPError404/HTTPError404.d.ts +40 -2
- package/es/components/HTTPErrors/HTTPError404/HTTPError404.js +1 -1
- package/es/components/ImportModal/ImportModal.d.ts +136 -2
- package/es/components/ImportModal/ImportModal.js +3 -2
- package/es/components/InlineTip/InlineTip.d.ts +90 -2
- package/es/components/InlineTip/InlineTip.js +3 -2
- package/es/components/Nav/Nav.js +1 -1
- package/es/components/Nav/NavList.js +7 -7
- package/es/components/NotificationsPanel/NotificationsPanel.js +1 -1
- package/es/components/OptionsTile/OptionsTile.d.ts +77 -3
- package/es/components/OptionsTile/OptionsTile.js +9 -20
- package/es/components/PageHeader/PageHeader.js +3 -3
- package/es/components/PageHeader/PageHeaderUtils.d.ts +1 -1
- package/es/components/PageHeader/PageHeaderUtils.js +4 -3
- 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 +100 -75
- package/es/components/StatusIcon/StatusIcon.d.ts +34 -2
- package/es/components/StatusIcon/StatusIcon.js +97 -95
- package/es/components/SteppedAnimatedMedia/SteppedAnimatedMedia.d.ts +23 -2
- package/es/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js +6 -5
- package/es/components/TagOverflow/TagOverflow.d.ts +5 -0
- package/es/components/TagOverflow/TagOverflow.js +209 -0
- package/es/components/TagOverflow/constants.d.ts +14 -0
- package/es/components/TagOverflow/constants.js +30 -0
- package/es/components/TagOverflow/index.d.ts +1 -0
- package/es/components/Tearsheet/TearsheetNarrow.d.ts +105 -6
- package/es/components/Tearsheet/TearsheetNarrow.js +6 -1
- package/es/components/Toolbar/Toolbar.d.ts +23 -5
- package/es/components/Toolbar/Toolbar.js +30 -26
- package/es/components/TruncatedList/TruncatedList.js +5 -3
- package/es/components/UserAvatar/UserAvatar.js +7 -4
- package/es/components/index.d.ts +5 -2
- package/es/global/js/package-settings.d.ts +8 -0
- package/es/global/js/package-settings.js +8 -0
- package/es/index.js +9 -0
- package/es/settings.d.ts +8 -0
- package/lib/components/ActionSet/ActionSet.d.ts +38 -2
- package/lib/components/ActionSet/ActionSet.js +3 -5
- package/lib/components/CoachmarkFixed/CoachmarkFixed.js +1 -1
- package/lib/components/ConditionBuilder/ConditionBuilder.d.ts +5 -0
- package/lib/components/ConditionBuilder/ConditionBuilder.js +132 -0
- package/lib/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.d.ts +10 -0
- package/lib/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js +100 -0
- package/lib/components/ConditionBuilder/ConditionBuilderContext/DataTreeContext.d.ts +38 -0
- package/lib/components/ConditionBuilder/ConditionBuilderContext/DataTreeContext.js +98 -0
- package/lib/components/ConditionBuilder/assets/sampleInput.d.ts +58 -0
- package/lib/components/ConditionBuilder/index.d.ts +1 -0
- package/lib/components/CreateFullPage/CreateFullPage.js +2 -18
- package/lib/components/CreateFullPage/CreateFullPageStep.js +20 -5
- package/lib/components/CreateSidePanel/CreateSidePanel.d.ts +81 -2
- package/lib/components/CreateSidePanel/CreateSidePanel.js +5 -2
- package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.d.ts +82 -2
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +5 -117
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +12 -111
- 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/stateReducer.js +2 -1
- package/lib/components/Datagrid/useEditableCell.js +19 -0
- package/lib/components/DelimitedList/DelimitedList.d.ts +27 -2
- package/lib/components/DelimitedList/DelimitedList.js +0 -1
- package/lib/components/EditInPlace/EditInPlace.d.ts +97 -5
- package/lib/components/EditInPlace/EditInPlace.js +10 -6
- package/lib/components/EditSidePanel/EditSidePanel.d.ts +92 -2
- package/lib/components/EditSidePanel/EditSidePanel.js +8 -10
- package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.d.ts +61 -2
- package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +1 -3
- package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.d.ts +61 -2
- package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +1 -2
- package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.d.ts +61 -2
- package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +1 -3
- package/lib/components/ExportModal/ExportModal.d.ts +110 -2
- package/lib/components/ExportModal/ExportModal.js +10 -4
- 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 +8 -10
- 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.js +2 -2
- package/lib/components/FilterPanel/FilterPanelSearch/FilterPanelSearch.d.ts +5 -0
- package/lib/components/FilterPanel/FilterPanelSearch/FilterPanelSearch.js +99 -0
- package/lib/components/FilterPanel/index.d.ts +5 -0
- package/lib/components/HTTPErrors/HTTPError403/HTTPError403.d.ts +40 -2
- package/lib/components/HTTPErrors/HTTPError403/HTTPError403.js +1 -1
- package/lib/components/HTTPErrors/HTTPError404/HTTPError404.d.ts +40 -2
- package/lib/components/HTTPErrors/HTTPError404/HTTPError404.js +1 -1
- package/lib/components/ImportModal/ImportModal.d.ts +136 -2
- package/lib/components/ImportModal/ImportModal.js +3 -2
- package/lib/components/InlineTip/InlineTip.d.ts +90 -2
- package/lib/components/InlineTip/InlineTip.js +3 -2
- package/lib/components/Nav/Nav.js +1 -1
- package/lib/components/Nav/NavList.js +7 -7
- package/lib/components/NotificationsPanel/NotificationsPanel.js +1 -1
- package/lib/components/OptionsTile/OptionsTile.d.ts +77 -3
- package/lib/components/OptionsTile/OptionsTile.js +9 -20
- package/lib/components/PageHeader/PageHeader.js +3 -3
- package/lib/components/PageHeader/PageHeaderUtils.d.ts +1 -1
- package/lib/components/PageHeader/PageHeaderUtils.js +4 -3
- 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 +100 -75
- package/lib/components/StatusIcon/StatusIcon.d.ts +34 -2
- package/lib/components/StatusIcon/StatusIcon.js +97 -95
- package/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.d.ts +23 -2
- package/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js +6 -5
- package/lib/components/TagOverflow/TagOverflow.d.ts +5 -0
- package/lib/components/TagOverflow/TagOverflow.js +216 -0
- package/lib/components/TagOverflow/constants.d.ts +14 -0
- package/lib/components/TagOverflow/constants.js +34 -0
- package/lib/components/TagOverflow/index.d.ts +1 -0
- package/lib/components/Tearsheet/TearsheetNarrow.d.ts +105 -6
- package/lib/components/Tearsheet/TearsheetNarrow.js +6 -1
- package/lib/components/Toolbar/Toolbar.d.ts +23 -5
- package/lib/components/Toolbar/Toolbar.js +30 -26
- package/lib/components/TruncatedList/TruncatedList.js +5 -3
- package/lib/components/UserAvatar/UserAvatar.js +7 -4
- package/lib/components/index.d.ts +5 -2
- package/lib/global/js/package-settings.d.ts +8 -0
- package/lib/global/js/package-settings.js +8 -0
- package/lib/index.js +42 -0
- package/lib/settings.d.ts +8 -0
- package/package.json +3 -3
- package/scss/components/Coachmark/_coachmark-dragbar.scss +0 -1
- package/scss/components/Coachmark/_coachmark-tagline.scss +2 -2
- package/scss/components/ConditionBuilder/_carbon-imports.scss +9 -0
- package/scss/components/ConditionBuilder/_condition-builder.scss +25 -0
- package/scss/components/ConditionBuilder/_index-with-carbon.scss +9 -0
- package/scss/components/ConditionBuilder/_index.scss +8 -0
- package/scss/components/CreateFullPage/_create-full-page.scss +10 -10
- package/scss/components/Datagrid/styles/_useNestedRows.scss +5 -1
- package/scss/components/FilterPanel/_carbon-imports.scss +5 -0
- package/scss/components/FilterPanel/_filter-panel-accordion-item.scss +54 -0
- package/scss/components/FilterPanel/_filter-panel-accordion.scss +6 -0
- package/scss/components/FilterPanel/_filter-panel-checkbox-with-overflow.scss +60 -0
- package/scss/components/FilterPanel/_filter-panel-checkbox.scss +24 -3
- package/scss/components/FilterPanel/_filter-panel-group.scss +39 -0
- package/scss/components/FilterPanel/_filter-panel-label.scss +0 -8
- package/scss/components/FilterPanel/_filter-panel-search.scss +38 -0
- package/scss/components/FilterPanel/_filter-panel.scss +2 -0
- package/scss/components/FilterPanel/_index-with-carbon.scss +5 -0
- package/scss/components/FilterPanel/_index.scss +5 -0
- package/scss/components/Guidebanner/_guidebanner.scss +1 -1
- package/scss/components/InlineTip/_inline-tip.scss +1 -1
- package/scss/components/ProductiveCard/_productive-card.scss +13 -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/SidePanel/_side-panel.scss +9 -9
- package/scss/components/TagOverflow/_carbon-imports.scss +9 -0
- package/scss/components/TagOverflow/_index-with-carbon.scss +9 -0
- package/scss/components/TagOverflow/_index.scss +8 -0
- package/scss/components/TagOverflow/_tag-overflow.scss +55 -0
- package/scss/components/Tearsheet/_tearsheet.scss +10 -0
- package/scss/components/UserAvatar/_user-avatar.scss +38 -4
- package/scss/components/_index-with-carbon.scss +3 -0
- package/scss/components/_index.scss +3 -0
@@ -10,7 +10,6 @@ import React__default, { useState, useRef, useEffect, useCallback } from 'react'
|
|
10
10
|
import { motion, useReducedMotion, AnimatePresence } from 'framer-motion';
|
11
11
|
import PropTypes from '../../node_modules/prop-types/index.js';
|
12
12
|
import cx from 'classnames';
|
13
|
-
import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
|
14
13
|
import { moderate02 } from '@carbon/motion';
|
15
14
|
import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
|
16
15
|
import { allPropTypes } from '../../global/js/utils/props-helper.js';
|
@@ -28,8 +27,8 @@ var _excluded = ["actionToolbarButtons", "actions", "animateTitle", "children",
|
|
28
27
|
_excluded2 = ["label", "kind", "icon", "tooltipPosition", "tooltipAlignment", "leading", "disabled", "className", "onClick"];
|
29
28
|
var blockClass = "".concat(pkg.prefix, "--side-panel");
|
30
29
|
var componentName = 'SidePanel';
|
31
|
-
|
32
|
-
|
30
|
+
// `any` is a work around until ActionSet is migrated to TS
|
31
|
+
var MotionActionSet = motion(ActionSet);
|
33
32
|
|
34
33
|
// Default values for props
|
35
34
|
var defaults = {
|
@@ -40,7 +39,6 @@ var defaults = {
|
|
40
39
|
placement: 'right',
|
41
40
|
size: 'md'
|
42
41
|
};
|
43
|
-
var MotionActionSet = motion(ActionSet);
|
44
42
|
|
45
43
|
/**
|
46
44
|
* Side panels keep users in-context of a page while performing tasks like navigating, editing, viewing details, or configuring something new.
|
@@ -84,16 +82,16 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
84
82
|
_useState2 = _slicedToArray(_useState, 2),
|
85
83
|
animationComplete = _useState2[0],
|
86
84
|
setAnimationComplete = _useState2[1];
|
87
|
-
var localRef = useRef();
|
85
|
+
var localRef = useRef(null);
|
88
86
|
var sidePanelRef = ref || localRef;
|
89
|
-
var overlayRef = useRef();
|
90
|
-
var innerContentRef = useRef();
|
91
|
-
var closeRef = useRef();
|
92
|
-
var animatedScrollRef = useRef();
|
93
|
-
var headerRef = useRef();
|
94
|
-
var titleRef = useRef();
|
95
|
-
var labelTextRef = useRef();
|
96
|
-
var subtitleRef = useRef();
|
87
|
+
var overlayRef = useRef(null);
|
88
|
+
var innerContentRef = useRef(null);
|
89
|
+
var closeRef = useRef(null);
|
90
|
+
var animatedScrollRef = useRef(null);
|
91
|
+
var headerRef = useRef(null);
|
92
|
+
var titleRef = useRef(null);
|
93
|
+
var labelTextRef = useRef(null);
|
94
|
+
var subtitleRef = useRef(null);
|
97
95
|
var previousState = usePreviousValue({
|
98
96
|
size: size,
|
99
97
|
open: open
|
@@ -109,32 +107,70 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
109
107
|
var _useFocus = useFocus(sidePanelRef),
|
110
108
|
firstElement = _useFocus.firstElement,
|
111
109
|
keyDownListener = _useFocus.keyDownListener;
|
110
|
+
var panelRefValue = sidePanelRef.current;
|
112
111
|
var shouldReduceMotion = useReducedMotion();
|
112
|
+
|
113
|
+
// Title animation on scroll related state
|
114
|
+
var _useState7 = useState(0),
|
115
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
116
|
+
labelTextHeight = _useState8[0],
|
117
|
+
setLabelTextHeight = _useState8[1];
|
113
118
|
useEffect(function () {
|
114
|
-
|
115
|
-
|
119
|
+
if (open && !(titleRef !== null && titleRef !== void 0 && titleRef.current)) {
|
120
|
+
setDoAnimateTitle(false);
|
121
|
+
} else {
|
122
|
+
setDoAnimateTitle(animateTitle);
|
123
|
+
}
|
124
|
+
}, [animateTitle, open]);
|
125
|
+
var titleItemsStyles = useCallback(function (progress) {
|
126
|
+
if (subtitleRef !== null && subtitleRef !== void 0 && subtitleRef.current) {
|
127
|
+
var _subtitleEl$style;
|
128
|
+
var subtitleEl = subtitleRef === null || subtitleRef === void 0 ? void 0 : subtitleRef.current;
|
129
|
+
var height = subtitleEl === null || subtitleEl === void 0 ? void 0 : subtitleEl.clientHeight;
|
130
|
+
var calculatedMargin = height * progress;
|
131
|
+
subtitleEl === null || subtitleEl === void 0 || (_subtitleEl$style = subtitleEl.style) === null || _subtitleEl$style === void 0 || _subtitleEl$style.setProperty('margin-top', "".concat(-calculatedMargin, "px"));
|
132
|
+
}
|
133
|
+
if (labelTextRef !== null && labelTextRef !== void 0 && labelTextRef.current) {
|
134
|
+
var _labelTextRef$current;
|
135
|
+
var _calculatedMargin = labelTextHeight * progress;
|
136
|
+
labelTextRef === null || labelTextRef === void 0 || (_labelTextRef$current = labelTextRef.current) === null || _labelTextRef$current === void 0 || (_labelTextRef$current = _labelTextRef$current.style) === null || _labelTextRef$current === void 0 || _labelTextRef$current.setProperty('margin-top', "".concat(-_calculatedMargin, "px"));
|
137
|
+
}
|
138
|
+
}, [labelTextHeight]);
|
139
|
+
useEffect(function () {
|
140
|
+
if (open && animateTitle && labelTextRef !== null && labelTextRef !== void 0 && labelTextRef.current) {
|
141
|
+
var _labelTextRef$current2;
|
142
|
+
setLabelTextHeight(Number((labelTextRef === null || labelTextRef === void 0 || (_labelTextRef$current2 = labelTextRef.current) === null || _labelTextRef$current2 === void 0 ? void 0 : _labelTextRef$current2.clientHeight) || null));
|
143
|
+
}
|
144
|
+
}, [animateTitle, labelTextRef, open]);
|
116
145
|
var handleScroll = useCallback(function () {
|
117
|
-
|
118
|
-
|
119
|
-
|
146
|
+
if (doAnimateTitle && innerContentRef !== null && innerContentRef !== void 0 && innerContentRef.current) {
|
147
|
+
var _innerContentRef$curr;
|
148
|
+
var scrollTop = innerContentRef === null || innerContentRef === void 0 || (_innerContentRef$curr = innerContentRef.current) === null || _innerContentRef$curr === void 0 ? void 0 : _innerContentRef$curr.scrollTop;
|
149
|
+
var animationProgress = Math.min(Number(scrollTop), scrollAnimationDistance) / scrollAnimationDistance;
|
150
|
+
panelRefValue === null || panelRefValue === void 0 || panelRefValue.style.setProperty("--".concat(blockClass, "--scroll-animation-progress"), animationProgress.toString());
|
151
|
+
titleItemsStyles(animationProgress);
|
152
|
+
}
|
153
|
+
}, [doAnimateTitle, panelRefValue === null || panelRefValue === void 0 ? void 0 : panelRefValue.style, scrollAnimationDistance, titleItemsStyles]);
|
120
154
|
var reducedMotion = typeof window !== 'undefined' && (_window = window) !== null && _window !== void 0 && _window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
|
121
155
|
matches: true
|
122
156
|
};
|
123
157
|
|
124
158
|
// scroll panel to top going between steps
|
125
159
|
useEffect(function () {
|
126
|
-
if (sidePanelRef &&
|
160
|
+
if (sidePanelRef && panelRefValue) {
|
127
161
|
var _animatedScrollRef$cu;
|
128
162
|
var scrollableSection = (_animatedScrollRef$cu = animatedScrollRef.current) !== null && _animatedScrollRef$cu !== void 0 ? _animatedScrollRef$cu : innerContentRef.current;
|
129
|
-
scrollableSection
|
163
|
+
if (scrollableSection) {
|
164
|
+
scrollableSection.scrollTop = 0;
|
165
|
+
}
|
130
166
|
// The size of the panel has changed while it is still opened
|
131
167
|
// so we need to scroll it to the top and reset the header
|
132
168
|
// height css custom property
|
133
|
-
if (
|
169
|
+
if (previousState && previousState['size'] !== size && scrollableSection) {
|
134
170
|
scrollableSection.scrollTop = 0;
|
135
171
|
}
|
136
172
|
}
|
137
|
-
}, [currentStep, sidePanelRef, size, previousState
|
173
|
+
}, [currentStep, sidePanelRef, size, previousState, id, panelRefValue]);
|
138
174
|
|
139
175
|
// Add console warning if labelText is provided without a title.
|
140
176
|
// This combination is not allowed.
|
@@ -145,10 +181,10 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
145
181
|
}, [labelText, title]);
|
146
182
|
var checkSetDoAnimateTitle = function checkSetDoAnimateTitle() {
|
147
183
|
var canDoAnimateTitle = false;
|
148
|
-
if (
|
149
|
-
var _labelTextRef$
|
184
|
+
if (panelRefValue && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !reducedMotion.matches) {
|
185
|
+
var _labelTextRef$current3, _labelTextRef$current4, _subtitleRef$current$, _subtitleRef$current;
|
150
186
|
var titleEl = titleRef.current;
|
151
|
-
var labelHeight = (_labelTextRef$
|
187
|
+
var labelHeight = (_labelTextRef$current3 = labelTextRef === null || labelTextRef === void 0 || (_labelTextRef$current4 = labelTextRef.current) === null || _labelTextRef$current4 === void 0 ? void 0 : _labelTextRef$current4.offsetHeight) !== null && _labelTextRef$current3 !== void 0 ? _labelTextRef$current3 : 0;
|
152
188
|
var subtitleHeight = (_subtitleRef$current$ = subtitleRef === null || subtitleRef === void 0 || (_subtitleRef$current = subtitleRef.current) === null || _subtitleRef$current === void 0 ? void 0 : _subtitleRef$current.offsetHeight) !== null && _subtitleRef$current$ !== void 0 ? _subtitleRef$current$ : 0;
|
153
189
|
|
154
190
|
// Adjusts space at bottom of titles by changing where scrolling finishes
|
@@ -158,12 +194,8 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
158
194
|
setScrollAnimationDistance(_scrollAnimationDistance);
|
159
195
|
|
160
196
|
// used to calculate the header moves
|
161
|
-
|
162
|
-
var scrollEl =
|
163
|
-
if (!scrollEl && animateTitle && !doAnimateTitle) {
|
164
|
-
// may be switching back based on resize
|
165
|
-
scrollEl = innerContentRef.current;
|
166
|
-
}
|
197
|
+
panelRefValue === null || panelRefValue === void 0 || panelRefValue.style.setProperty("--".concat(blockClass, "--scroll-animation-distance"), _scrollAnimationDistance.toString());
|
198
|
+
var scrollEl = innerContentRef.current;
|
167
199
|
if (scrollEl) {
|
168
200
|
var _window2;
|
169
201
|
var innerComputed = (_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.getComputedStyle(innerContentRef.current);
|
@@ -177,34 +209,24 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
177
209
|
}
|
178
210
|
};
|
179
211
|
useEffect(function () {
|
180
|
-
if (doAnimateTitle && animatedScrollRef.current) {
|
181
|
-
// only add scroll if the doAnimateTitle is already true
|
182
|
-
// should come back through if false and canDoAnimateTitle is true
|
183
|
-
animatedScrollRef.current.addEventListener('scroll', handleScroll);
|
184
|
-
}
|
185
212
|
if (!doAnimateTitle && sidePanelRef.current) {
|
186
|
-
|
213
|
+
panelRefValue === null || panelRefValue === void 0 || panelRefValue.style.setProperty("--".concat(blockClass, "--scroll-animation-progress"), '0');
|
187
214
|
}
|
188
|
-
}, [
|
189
|
-
|
190
|
-
/* istanbul ignore next */
|
191
|
-
var handleResize = function handleResize() {
|
192
|
-
checkSetDoAnimateTitle();
|
193
|
-
};
|
215
|
+
}, [doAnimateTitle, handleScroll, sidePanelRef, innerContentRef, open, panelRefValue === null || panelRefValue === void 0 ? void 0 : panelRefValue.style]);
|
194
216
|
|
195
217
|
// Calculate scroll distances
|
196
218
|
useEffect(function () {
|
197
|
-
if (
|
219
|
+
if (panelRefValue && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !reducedMotion.matches) {
|
198
220
|
checkSetDoAnimateTitle();
|
199
221
|
}
|
200
222
|
|
201
223
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
202
|
-
}, [open, doAnimateTitle /* use do instead of animateTitle directly */, animationComplete, handleScroll, title, size, reducedMotion.matches, id
|
224
|
+
}, [open, doAnimateTitle /* use do instead of animateTitle directly */, animationComplete, handleScroll, title, size, reducedMotion.matches, id]);
|
203
225
|
|
204
226
|
// click outside functionality if `includeOverlay` prop is set
|
205
227
|
useEffect(function () {
|
206
228
|
var handleOutsideClick = function handleOutsideClick(event) {
|
207
|
-
if (
|
229
|
+
if (panelRefValue && overlayRef.current && overlayRef.current.contains(event.target) && onRequestClose) {
|
208
230
|
onRequestClose();
|
209
231
|
}
|
210
232
|
};
|
@@ -222,7 +244,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
222
244
|
bodyElement.style.overflow = '';
|
223
245
|
document.removeEventListener('click', handleOutsideClick);
|
224
246
|
};
|
225
|
-
}, [includeOverlay, onRequestClose, open, preventCloseOnClickOutside, onUnmount, sidePanelRef]);
|
247
|
+
}, [includeOverlay, onRequestClose, open, preventCloseOnClickOutside, onUnmount, sidePanelRef, panelRefValue]);
|
226
248
|
|
227
249
|
// initializes the side panel to close
|
228
250
|
var onAnimationEnd = function onAnimationEnd() {
|
@@ -241,43 +263,43 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
241
263
|
}, [reducedMotion.matches]);
|
242
264
|
|
243
265
|
// initializes the side panel to open
|
244
|
-
var
|
266
|
+
var onAnimationStart = function onAnimationStart() {
|
245
267
|
setAnimationComplete(false);
|
246
268
|
};
|
247
269
|
|
248
270
|
// used to reset margins of the slide in panel when closed/closing
|
249
271
|
useEffect(function () {
|
250
272
|
if (!open && slideIn) {
|
251
|
-
var pageContentElement = document.querySelector(selectorPageContent);
|
273
|
+
var pageContentElement = selectorPageContent ? document.querySelector(selectorPageContent) : null;
|
252
274
|
if (placement && placement === 'right' && pageContentElement) {
|
253
|
-
pageContentElement.style.marginInlineEnd = 0;
|
275
|
+
pageContentElement.style.marginInlineEnd = '0';
|
254
276
|
} else if (pageContentElement) {
|
255
|
-
pageContentElement.style.marginInlineStart = 0;
|
277
|
+
pageContentElement.style.marginInlineStart = '0';
|
256
278
|
}
|
257
279
|
}
|
258
280
|
}, [open, placement, selectorPageContent, slideIn]);
|
259
281
|
useEffect(function () {
|
260
|
-
if (!open && previousState
|
282
|
+
if (!open && previousState && previousState['open'] && reducedMotion.matches) {
|
261
283
|
onUnmount === null || onUnmount === void 0 || onUnmount();
|
262
284
|
}
|
263
|
-
}, [open, onUnmount, reducedMotion.matches, previousState
|
285
|
+
}, [open, onUnmount, reducedMotion.matches, previousState]);
|
264
286
|
|
265
287
|
// used to set margins of content for slide in panel version
|
266
288
|
useEffect(function () {
|
267
289
|
if (open && slideIn) {
|
268
|
-
var pageContentElement = document.querySelector(selectorPageContent);
|
290
|
+
var pageContentElement = selectorPageContent ? document.querySelector(selectorPageContent) : null;
|
269
291
|
if (pageContentElement) {
|
270
292
|
pageContentElement.style.inlineSize = 'auto';
|
271
293
|
} else {
|
272
294
|
pconsole.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.');
|
273
295
|
}
|
274
296
|
if (placement && placement === 'right' && pageContentElement) {
|
275
|
-
pageContentElement.style.marginInlineEnd = 0;
|
276
|
-
pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-end ".concat(moderate02) :
|
297
|
+
pageContentElement.style.marginInlineEnd = '0';
|
298
|
+
pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-end ".concat(moderate02) : '';
|
277
299
|
pageContentElement.style.marginInlineEnd = SIDE_PANEL_SIZES[size];
|
278
300
|
} else if (pageContentElement) {
|
279
|
-
pageContentElement.style.marginInlineStart = 0;
|
280
|
-
pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-start ".concat(moderate02) :
|
301
|
+
pageContentElement.style.marginInlineStart = '0';
|
302
|
+
pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-start ".concat(moderate02) : '';
|
281
303
|
pageContentElement.style.marginInlineStart = SIDE_PANEL_SIZES[size];
|
282
304
|
}
|
283
305
|
}
|
@@ -285,10 +307,12 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
285
307
|
useEffect(function () {
|
286
308
|
if (open) {
|
287
309
|
setTimeout(function () {
|
288
|
-
|
289
|
-
|
290
|
-
|
291
|
-
primeFocusEl
|
310
|
+
if (selectorPrimaryFocus) {
|
311
|
+
var _document;
|
312
|
+
var primeFocusEl = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector(selectorPrimaryFocus);
|
313
|
+
if (primeFocusEl) {
|
314
|
+
primeFocusEl === null || primeFocusEl === void 0 || primeFocusEl.focus();
|
315
|
+
}
|
292
316
|
} else {
|
293
317
|
firstElement === null || firstElement === void 0 || firstElement.focus();
|
294
318
|
}
|
@@ -296,7 +320,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
296
320
|
}
|
297
321
|
}, [animationComplete, firstElement, open, selectorPrimaryFocus]);
|
298
322
|
var primaryActionContainerClassNames = cx(["".concat(blockClass, "__actions-container"), _defineProperty({}, "".concat(blockClass, "__actions-container--condensed"), condensedActions)]);
|
299
|
-
var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass), "".concat(blockClass, "--").concat(size), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(
|
323
|
+
var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass), "".concat(blockClass, "--").concat(size), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_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, "--has-overlay"), includeOverlay)]);
|
300
324
|
var renderTitle = function renderTitle() {
|
301
325
|
return /*#__PURE__*/React__default.createElement("div", {
|
302
326
|
className: cx("".concat(blockClass, "__title"), _defineProperty({}, "".concat(blockClass, "__title--no-label"), !labelTextRef.current)),
|
@@ -315,7 +339,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
315
339
|
var _slug$type;
|
316
340
|
var slugCloseSize = actions && actions.length && /l/.test(size) ? 'md' : 'sm';
|
317
341
|
var normalizedSlug;
|
318
|
-
if (slug && (
|
342
|
+
if (slug && ((_slug$type = slug['type']) === null || _slug$type === void 0 ? void 0 : _slug$type.displayName) === 'Slug') {
|
319
343
|
normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
|
320
344
|
// slug size is sm unless actions and size > md
|
321
345
|
size: slugCloseSize
|
@@ -389,10 +413,10 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
389
413
|
var renderMain = function renderMain() {
|
390
414
|
return /*#__PURE__*/React__default.createElement("div", {
|
391
415
|
ref: innerContentRef,
|
392
|
-
|
416
|
+
onScroll: handleScroll,
|
417
|
+
className: cx("".concat(blockClass, "__inner-content"), "".concat(blockClass, "--scrolls"), "".concat(!doAnimateTitle ? "".concat(blockClass, "__inner-content--no-animated-title") : ''))
|
393
418
|
}, children);
|
394
419
|
};
|
395
|
-
useResizeObserver(sidePanelRef, handleResize, [open]);
|
396
420
|
return /*#__PURE__*/React__default.createElement(AnimatePresence, null, open && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(motion.div, _extends({}, getDevtoolsProps(componentName), rest, {
|
397
421
|
id: id,
|
398
422
|
className: mainPanelClassNames,
|
@@ -400,9 +424,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
400
424
|
role: "complementary",
|
401
425
|
"aria-label": title,
|
402
426
|
onAnimationComplete: onAnimationEnd,
|
403
|
-
onAnimationStart:
|
404
|
-
return _onAnimationStart();
|
405
|
-
},
|
427
|
+
onAnimationStart: onAnimationStart,
|
406
428
|
variants: panelVariants,
|
407
429
|
initial: "hidden",
|
408
430
|
animate: "visible",
|
@@ -412,11 +434,8 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
412
434
|
shouldReduceMotion: shouldReduceMotion
|
413
435
|
},
|
414
436
|
onKeyDown: keyDownListener
|
415
|
-
}),
|
416
|
-
|
417
|
-
className: "".concat(blockClass, "__animated-scroll-wrapper ").concat(blockClass, "--scrolls")
|
418
|
-
}, renderHeader(), renderMain()) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React__default.createElement(MotionActionSet, {
|
419
|
-
actions: actions,
|
437
|
+
}), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React__default.createElement(MotionActionSet, {
|
438
|
+
actions: actions !== null && actions !== void 0 ? actions : [],
|
420
439
|
className: primaryActionContainerClassNames,
|
421
440
|
size: size === 'xs' ? 'sm' : size,
|
422
441
|
custom: shouldReduceMotion,
|
@@ -462,7 +481,8 @@ SidePanel.propTypes = {
|
|
462
481
|
*
|
463
482
|
* See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
|
464
483
|
*/
|
465
|
-
actions: allPropTypes([
|
484
|
+
actions: allPropTypes([/**@ts-ignore*/
|
485
|
+
ActionSet.validateActions(), PropTypes.arrayOf(PropTypes.shape(_objectSpread2(_objectSpread2({}, Button.propTypes), {}, {
|
466
486
|
kind: PropTypes.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
|
467
487
|
tooltipPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
|
468
488
|
tooltipAlignment: PropTypes.oneOf(['start', 'center', 'end']),
|
@@ -541,6 +561,7 @@ SidePanel.propTypes = {
|
|
541
561
|
* This is the selector to the element that contains all of the page content that will shrink if the panel is a slide in.
|
542
562
|
* This prop is required when using the `slideIn` variant of the side panel.
|
543
563
|
*/
|
564
|
+
/**@ts-ignore*/
|
544
565
|
selectorPageContent: PropTypes.string.isRequired.if(function (_ref6) {
|
545
566
|
var slideIn = _ref6.slideIn;
|
546
567
|
return slideIn;
|
@@ -549,14 +570,17 @@ SidePanel.propTypes = {
|
|
549
570
|
* Specify a CSS selector that matches the DOM element that should
|
550
571
|
* be focused when the side panel opens
|
551
572
|
*/
|
573
|
+
/**@ts-ignore*/
|
552
574
|
selectorPrimaryFocus: PropTypes.string,
|
553
575
|
/**
|
554
576
|
* Sets the size of the side panel
|
555
577
|
*/
|
578
|
+
/**@ts-ignore*/
|
556
579
|
size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', '2xl']),
|
557
580
|
/**
|
558
581
|
* Determines if this panel slides in
|
559
582
|
*/
|
583
|
+
/**@ts-ignore*/
|
560
584
|
slideIn: PropTypes.bool,
|
561
585
|
/**
|
562
586
|
* **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
|
@@ -569,6 +593,7 @@ SidePanel.propTypes = {
|
|
569
593
|
/**
|
570
594
|
* Sets the title text
|
571
595
|
*/
|
596
|
+
/**@ts-ignore*/
|
572
597
|
title: PropTypes.string.isRequired.if(function (_ref7) {
|
573
598
|
var labelText = _ref7.labelText;
|
574
599
|
return labelText;
|
@@ -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 {};
|