@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.
Files changed (178) hide show
  1. package/css/index-full-carbon.css +351 -3
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +1 -1
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon.css +351 -3
  6. package/css/index-without-carbon.css.map +1 -1
  7. package/css/index-without-carbon.min.css +1 -1
  8. package/css/index-without-carbon.min.css.map +1 -1
  9. package/css/index.css +351 -3
  10. package/css/index.css.map +1 -1
  11. package/css/index.min.css +1 -1
  12. package/css/index.min.css.map +1 -1
  13. package/es/components/ActionBar/ActionBar.js +8 -1
  14. package/es/components/CreateSidePanel/CreateSidePanel.d.ts +81 -2
  15. package/es/components/CreateSidePanel/CreateSidePanel.js +5 -2
  16. package/es/components/CreateTearsheet/CreateTearsheetDivider.d.ts +12 -1
  17. package/es/components/CreateTearsheet/CreateTearsheetDivider.js +1 -1
  18. package/es/components/DataSpreadsheet/DataSpreadsheet.js +39 -145
  19. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +60 -112
  20. package/es/components/DataSpreadsheet/hooks/useMoveActiveCell.d.ts +3 -1
  21. package/es/components/DataSpreadsheet/hooks/useMoveActiveCell.js +10 -3
  22. package/es/components/DataSpreadsheet/utils/commonEventHandlers.d.ts +4 -0
  23. package/es/components/DataSpreadsheet/utils/commonEventHandlers.js +304 -0
  24. package/es/components/Datagrid/Datagrid/DatagridContent.js +2 -1
  25. package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js +4 -1
  26. package/es/components/Datagrid/Datagrid/DatagridRefBody.js +3 -1
  27. package/es/components/Datagrid/Datagrid/DatagridSimpleBody.js +4 -1
  28. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +6 -2
  29. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.d.ts +1 -1
  30. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +4 -0
  31. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.d.ts +2 -1
  32. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +4 -3
  33. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +5 -5
  34. package/es/components/Datagrid/useRowSize.js +4 -2
  35. package/es/components/DescriptionList/DescriptionList.d.ts +0 -37
  36. package/es/components/DescriptionList/DescriptionList.js +7 -12
  37. package/es/components/DescriptionList/DescriptionListBody.d.ts +2 -0
  38. package/es/components/DescriptionList/DescriptionListBody.js +39 -0
  39. package/es/components/DescriptionList/DescriptionListCell.d.ts +2 -0
  40. package/es/components/DescriptionList/DescriptionListCell.js +39 -0
  41. package/es/components/DescriptionList/DescriptionListRow.d.ts +2 -0
  42. package/es/components/DescriptionList/DescriptionListRow.js +41 -0
  43. package/es/components/DescriptionList/index.d.ts +4 -1
  44. package/es/components/EditSidePanel/EditSidePanel.d.ts +92 -2
  45. package/es/components/EditSidePanel/EditSidePanel.js +8 -10
  46. package/es/components/FilterPanel/FilterPanel.d.ts +5 -0
  47. package/es/components/FilterPanel/FilterPanel.js +55 -0
  48. package/es/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.d.ts +5 -0
  49. package/es/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.js +83 -0
  50. package/es/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.d.ts +5 -0
  51. package/es/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.js +94 -0
  52. package/es/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.d.ts +5 -0
  53. package/es/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.js +80 -0
  54. package/es/components/FilterPanel/FilterPanelCheckbox/index.d.ts +1 -0
  55. package/es/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.d.ts +10 -0
  56. package/es/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.js +157 -0
  57. package/es/components/FilterPanel/FilterPanelGroup/FilterPanelGroup.d.ts +5 -0
  58. package/es/components/FilterPanel/FilterPanelGroup/FilterPanelGroup.js +72 -0
  59. package/es/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.d.ts +5 -0
  60. package/es/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.js +63 -0
  61. package/es/components/FilterPanel/FilterPanelLabel/index.d.ts +1 -0
  62. package/es/components/FilterPanel/index.d.ts +7 -0
  63. package/es/components/OptionsTile/OptionsTile.d.ts +77 -3
  64. package/es/components/OptionsTile/OptionsTile.js +9 -20
  65. package/es/components/RemoveModal/RemoveModal.d.ts +81 -7
  66. package/es/components/RemoveModal/RemoveModal.js +1 -0
  67. package/es/components/ScrollGradient/ScrollGradient.d.ts +5 -0
  68. package/es/components/ScrollGradient/ScrollGradient.js +156 -0
  69. package/es/components/ScrollGradient/constants.d.ts +15 -0
  70. package/es/components/ScrollGradient/constants.js +121 -0
  71. package/es/components/ScrollGradient/index.d.ts +1 -0
  72. package/es/components/SidePanel/SidePanel.d.ts +144 -2
  73. package/es/components/SidePanel/SidePanel.js +88 -112
  74. package/es/components/StatusIcon/StatusIcon.d.ts +34 -2
  75. package/es/components/StatusIcon/StatusIcon.js +97 -95
  76. package/es/components/Tearsheet/TearsheetShell.js +9 -1
  77. package/es/components/Toolbar/ToolbarGroup.d.ts +17 -2
  78. package/es/components/Toolbar/ToolbarGroup.js +0 -1
  79. package/es/components/TruncatedList/TruncatedList.js +5 -3
  80. package/es/components/UserAvatar/UserAvatar.js +3 -2
  81. package/es/components/index.d.ts +4 -1
  82. package/es/global/js/hooks/useFocus.js +9 -2
  83. package/es/global/js/package-settings.d.ts +12 -0
  84. package/es/global/js/package-settings.js +12 -0
  85. package/es/index.js +12 -0
  86. package/es/settings.d.ts +12 -0
  87. package/lib/components/ActionBar/ActionBar.js +11 -6
  88. package/lib/components/CreateSidePanel/CreateSidePanel.d.ts +81 -2
  89. package/lib/components/CreateSidePanel/CreateSidePanel.js +5 -2
  90. package/lib/components/CreateTearsheet/CreateTearsheetDivider.d.ts +12 -1
  91. package/lib/components/CreateTearsheet/CreateTearsheetDivider.js +1 -1
  92. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +39 -145
  93. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +60 -112
  94. package/lib/components/DataSpreadsheet/hooks/useMoveActiveCell.d.ts +3 -1
  95. package/lib/components/DataSpreadsheet/hooks/useMoveActiveCell.js +9 -2
  96. package/lib/components/DataSpreadsheet/utils/commonEventHandlers.d.ts +4 -0
  97. package/lib/components/DataSpreadsheet/utils/commonEventHandlers.js +311 -0
  98. package/lib/components/Datagrid/Datagrid/DatagridContent.js +2 -1
  99. package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js +4 -1
  100. package/lib/components/Datagrid/Datagrid/DatagridRefBody.js +3 -1
  101. package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.js +4 -1
  102. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +5 -1
  103. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.d.ts +1 -1
  104. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +4 -0
  105. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.d.ts +2 -1
  106. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +4 -3
  107. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +5 -5
  108. package/lib/components/Datagrid/useRowSize.js +4 -2
  109. package/lib/components/DescriptionList/DescriptionList.d.ts +0 -37
  110. package/lib/components/DescriptionList/DescriptionList.js +6 -11
  111. package/lib/components/DescriptionList/DescriptionListBody.d.ts +2 -0
  112. package/lib/components/DescriptionList/DescriptionListBody.js +46 -0
  113. package/lib/components/DescriptionList/DescriptionListCell.d.ts +2 -0
  114. package/lib/components/DescriptionList/DescriptionListCell.js +46 -0
  115. package/lib/components/DescriptionList/DescriptionListRow.d.ts +2 -0
  116. package/lib/components/DescriptionList/DescriptionListRow.js +48 -0
  117. package/lib/components/DescriptionList/index.d.ts +4 -1
  118. package/lib/components/EditSidePanel/EditSidePanel.d.ts +92 -2
  119. package/lib/components/EditSidePanel/EditSidePanel.js +8 -10
  120. package/lib/components/FilterPanel/FilterPanel.d.ts +5 -0
  121. package/lib/components/FilterPanel/FilterPanel.js +62 -0
  122. package/lib/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.d.ts +5 -0
  123. package/lib/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.js +90 -0
  124. package/lib/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.d.ts +5 -0
  125. package/lib/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.js +101 -0
  126. package/lib/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.d.ts +5 -0
  127. package/lib/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.js +87 -0
  128. package/lib/components/FilterPanel/FilterPanelCheckbox/index.d.ts +1 -0
  129. package/lib/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.d.ts +10 -0
  130. package/lib/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.js +164 -0
  131. package/lib/components/FilterPanel/FilterPanelGroup/FilterPanelGroup.d.ts +5 -0
  132. package/lib/components/FilterPanel/FilterPanelGroup/FilterPanelGroup.js +79 -0
  133. package/lib/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.d.ts +5 -0
  134. package/lib/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.js +70 -0
  135. package/lib/components/FilterPanel/FilterPanelLabel/index.d.ts +1 -0
  136. package/lib/components/FilterPanel/index.d.ts +7 -0
  137. package/lib/components/OptionsTile/OptionsTile.d.ts +77 -3
  138. package/lib/components/OptionsTile/OptionsTile.js +9 -20
  139. package/lib/components/RemoveModal/RemoveModal.d.ts +81 -7
  140. package/lib/components/RemoveModal/RemoveModal.js +1 -0
  141. package/lib/components/ScrollGradient/ScrollGradient.d.ts +5 -0
  142. package/lib/components/ScrollGradient/ScrollGradient.js +163 -0
  143. package/lib/components/ScrollGradient/constants.d.ts +15 -0
  144. package/lib/components/ScrollGradient/constants.js +128 -0
  145. package/lib/components/ScrollGradient/index.d.ts +1 -0
  146. package/lib/components/SidePanel/SidePanel.d.ts +144 -2
  147. package/lib/components/SidePanel/SidePanel.js +88 -112
  148. package/lib/components/StatusIcon/StatusIcon.d.ts +34 -2
  149. package/lib/components/StatusIcon/StatusIcon.js +97 -95
  150. package/lib/components/Tearsheet/TearsheetShell.js +9 -1
  151. package/lib/components/Toolbar/ToolbarGroup.d.ts +17 -2
  152. package/lib/components/Toolbar/ToolbarGroup.js +0 -1
  153. package/lib/components/TruncatedList/TruncatedList.js +5 -3
  154. package/lib/components/UserAvatar/UserAvatar.js +3 -2
  155. package/lib/components/index.d.ts +4 -1
  156. package/lib/global/js/hooks/useFocus.js +9 -2
  157. package/lib/global/js/package-settings.d.ts +12 -0
  158. package/lib/global/js/package-settings.js +12 -0
  159. package/lib/index.js +60 -0
  160. package/lib/settings.d.ts +12 -0
  161. package/package.json +3 -3
  162. package/scss/components/FilterPanel/_carbon-imports.scss +9 -0
  163. package/scss/components/FilterPanel/_filter-panel-accordion-item.scss +56 -0
  164. package/scss/components/FilterPanel/_filter-panel-accordion.scss +6 -0
  165. package/scss/components/FilterPanel/_filter-panel-checkbox-with-overflow.scss +62 -0
  166. package/scss/components/FilterPanel/_filter-panel-checkbox.scss +54 -0
  167. package/scss/components/FilterPanel/_filter-panel-group.scss +39 -0
  168. package/scss/components/FilterPanel/_filter-panel-label.scss +39 -0
  169. package/scss/components/FilterPanel/_filter-panel.scss +31 -0
  170. package/scss/components/FilterPanel/_index-with-carbon.scss +15 -0
  171. package/scss/components/FilterPanel/_index.scss +14 -0
  172. package/scss/components/ScrollGradient/_carbon-imports.scss +9 -0
  173. package/scss/components/ScrollGradient/_index-with-carbon.scss +9 -0
  174. package/scss/components/ScrollGradient/_index.scss +8 -0
  175. package/scss/components/ScrollGradient/_scroll-gradient.scss +102 -0
  176. package/scss/components/UserAvatar/_user-avatar.scss +37 -4
  177. package/scss/components/_index-with-carbon.scss +2 -0
  178. 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<any>>;
5
- import React from 'react';
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
- // NOTE: the component SCSS is not imported here: it is rolled up separately.
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 startTrapRef = React.useRef();
100
- var endTrapRef = React.useRef();
101
- var innerContentRef = React.useRef();
102
- var closeRef = React.useRef();
103
- var animatedScrollRef = React.useRef();
104
- var headerRef = React.useRef();
105
- var titleRef = React.useRef();
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 scrollTop = animatedScrollRef.current.scrollTop;
126
- sidePanelRef.current.style.setProperty("--".concat(blockClass, "--scroll-animation-progress"), Math.min(scrollTop, scrollAnimationDistance) / scrollAnimationDistance);
127
- }, [scrollAnimationDistance, sidePanelRef]);
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 && sidePanelRef.current) {
135
- var _animatedScrollRef$cu;
136
- var scrollableSection = (_animatedScrollRef$cu = animatedScrollRef.current) !== null && _animatedScrollRef$cu !== void 0 ? _animatedScrollRef$cu : innerContentRef.current;
137
- scrollableSection.scrollTop = 0;
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 ((previousState === null || previousState === void 0 ? void 0 : previousState.size) !== size) {
145
+ if (previousState && previousState['size'] !== size && scrollableSection) {
142
146
  scrollableSection.scrollTop = 0;
143
147
  }
144
148
  }
145
- }, [currentStep, sidePanelRef, size, previousState === null || previousState === void 0 ? void 0 : previousState.size, id]);
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 (sidePanelRef !== null && sidePanelRef !== void 0 && sidePanelRef.current && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !reducedMotion.matches) {
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
- sidePanelRef.current.style.setProperty("--".concat(blockClass, "--scroll-animation-distance"), _scrollAnimationDistance);
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
- sidePanelRef.current.style.setProperty("--".concat(blockClass, "--scroll-animation-progress"), 0);
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 (sidePanelRef !== null && sidePanelRef !== void 0 && sidePanelRef.current && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !reducedMotion.matches) {
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 (sidePanelRef.current && overlayRef.current && overlayRef.current.contains(event.target) && onRequestClose) {
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 _onAnimationStart = function onAnimationStart() {
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 !== null && previousState !== void 0 && previousState.open && reducedMotion.matches) {
272
+ if (!open && previousState && previousState['open'] && reducedMotion.matches) {
289
273
  onUnmount === null || onUnmount === void 0 || onUnmount();
290
274
  }
291
- }, [open, onUnmount, reducedMotion.matches, previousState === null || previousState === void 0 ? void 0 : previousState.open]);
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) : null;
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) : null;
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
- // adds focus trap functionality
315
- /* istanbul ignore next */
316
- var handleBlur = function handleBlur(_ref2) {
317
- var oldActiveNode = _ref2.target,
318
- currentActiveNode = _ref2.relatedTarget;
319
- // focus trap should only be set if the side panel is a `slideOver` type
320
- if (open && innerContentRef && !slideIn) {
321
- wrapFocus["default"]({
322
- bodyNode: innerContentRef.current,
323
- startTrapRef: startTrapRef,
324
- endTrapRef: endTrapRef,
325
- currentActiveNode: currentActiveNode,
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 && (slug === null || slug === void 0 || (_slug$type = slug.type) === null || _slug$type === void 0 ? void 0 : _slug$type.displayName) === '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 (_ref5) {
396
- var label = _ref5.label,
397
- kind = _ref5.kind,
398
- icon = _ref5.icon,
399
- tooltipPosition = _ref5.tooltipPosition,
400
- tooltipAlignment = _ref5.tooltipAlignment,
401
- leading = _ref5.leading,
402
- disabled = _ref5.disabled,
403
- className = _ref5.className,
404
- onClick = _ref5.onClick,
405
- rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref5, _excluded2);
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: function onAnimationStart(event) {
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
- }), /*#__PURE__*/React__default["default"].createElement("span", {
448
- ref: startTrapRef,
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("span", {
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([ActionSet.ActionSet.validateActions(), index["default"].arrayOf(index["default"].shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, react.Button.propTypes), {}, {
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
- selectorPageContent: index["default"].string.isRequired.if(function (_ref7) {
587
- var slideIn = _ref7.slideIn;
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
- title: index["default"].string.isRequired.if(function (_ref8) {
615
- var labelText = _ref8.labelText;
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
- export let StatusIcon: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
11
- import React from 'react';
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 {};