@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 {};
@@ -14,7 +14,6 @@ import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
14
14
  import { moderate02 } from '@carbon/motion';
15
15
  import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
16
16
  import { allPropTypes } from '../../global/js/utils/props-helper.js';
17
- import wrapFocus from '../../global/js/utils/wrapFocus.js';
18
17
  import { pkg } from '../../settings.js';
19
18
  import { SIDE_PANEL_SIZES } from './constants.js';
20
19
  import { Button } from '@carbon/react';
@@ -23,13 +22,14 @@ import { actionSetVariants, overlayVariants, panelVariants } from './motion/vari
23
22
  import pconsole from '../../global/js/utils/pconsole.js';
24
23
  import { ActionSet } from '../ActionSet/ActionSet.js';
25
24
  import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
25
+ import { useFocus } from '../../global/js/hooks/useFocus.js';
26
26
 
27
27
  var _excluded = ["actionToolbarButtons", "actions", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "id", "includeOverlay", "labelText", "navigationBackIconDescription", "onNavigationBack", "onRequestClose", "onUnmount", "open", "placement", "preventCloseOnClickOutside", "selectorPageContent", "selectorPrimaryFocus", "size", "slideIn", "slug", "subtitle", "title"],
28
28
  _excluded2 = ["label", "kind", "icon", "tooltipPosition", "tooltipAlignment", "leading", "disabled", "className", "onClick"];
29
29
  var blockClass = "".concat(pkg.prefix, "--side-panel");
30
30
  var componentName = 'SidePanel';
31
-
32
- // NOTE: the component SCSS is not imported here: it is rolled up separately.
31
+ // `any` is a work around until ActionSet is migrated to TS
32
+ var MotionActionSet = motion(ActionSet);
33
33
 
34
34
  // Default values for props
35
35
  var defaults = {
@@ -40,7 +40,6 @@ var defaults = {
40
40
  placement: 'right',
41
41
  size: 'md'
42
42
  };
43
- var MotionActionSet = motion(ActionSet);
44
43
 
45
44
  /**
46
45
  * Side panels keep users in-context of a page while performing tasks like navigating, editing, viewing details, or configuring something new.
@@ -84,18 +83,16 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
84
83
  _useState2 = _slicedToArray(_useState, 2),
85
84
  animationComplete = _useState2[0],
86
85
  setAnimationComplete = _useState2[1];
87
- var localRef = useRef();
86
+ var localRef = useRef(null);
88
87
  var sidePanelRef = ref || localRef;
89
- var overlayRef = useRef();
90
- var startTrapRef = useRef();
91
- var endTrapRef = useRef();
92
- var innerContentRef = useRef();
93
- var closeRef = useRef();
94
- var animatedScrollRef = useRef();
95
- var headerRef = useRef();
96
- var titleRef = useRef();
97
- var labelTextRef = useRef();
98
- var subtitleRef = useRef();
88
+ var overlayRef = useRef(null);
89
+ var innerContentRef = useRef(null);
90
+ var closeRef = useRef(null);
91
+ var animatedScrollRef = useRef(null);
92
+ var headerRef = useRef(null);
93
+ var titleRef = useRef(null);
94
+ var labelTextRef = useRef(null);
95
+ var subtitleRef = useRef(null);
99
96
  var previousState = usePreviousValue({
100
97
  size: size,
101
98
  open: open
@@ -108,52 +105,39 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
108
105
  _useState6 = _slicedToArray(_useState5, 2),
109
106
  doAnimateTitle = _useState6[0],
110
107
  setDoAnimateTitle = _useState6[1];
108
+ var _useFocus = useFocus(sidePanelRef),
109
+ firstElement = _useFocus.firstElement,
110
+ keyDownListener = _useFocus.keyDownListener;
111
+ var panelRefValue = sidePanelRef.current;
111
112
  var shouldReduceMotion = useReducedMotion();
112
113
  useEffect(function () {
113
114
  setDoAnimateTitle(animateTitle);
114
115
  }, [animateTitle]);
115
116
  var handleScroll = useCallback(function () {
116
- var scrollTop = animatedScrollRef.current.scrollTop;
117
- sidePanelRef.current.style.setProperty("--".concat(blockClass, "--scroll-animation-progress"), Math.min(scrollTop, scrollAnimationDistance) / scrollAnimationDistance);
118
- }, [scrollAnimationDistance, sidePanelRef]);
117
+ var _animatedScrollRef$cu;
118
+ var scrollTop = animatedScrollRef === null || animatedScrollRef === void 0 || (_animatedScrollRef$cu = animatedScrollRef.current) === null || _animatedScrollRef$cu === void 0 ? void 0 : _animatedScrollRef$cu.scrollTop;
119
+ panelRefValue === null || panelRefValue === void 0 || panelRefValue.style.setProperty("--".concat(blockClass, "--scroll-animation-progress"), (Math.min(Number(scrollTop), scrollAnimationDistance) / scrollAnimationDistance).toString());
120
+ }, [scrollAnimationDistance, panelRefValue]);
119
121
  var reducedMotion = typeof window !== 'undefined' && (_window = window) !== null && _window !== void 0 && _window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
120
122
  matches: true
121
123
  };
122
124
 
123
125
  // scroll panel to top going between steps
124
126
  useEffect(function () {
125
- if (sidePanelRef && sidePanelRef.current) {
126
- var _animatedScrollRef$cu;
127
- var scrollableSection = (_animatedScrollRef$cu = animatedScrollRef.current) !== null && _animatedScrollRef$cu !== void 0 ? _animatedScrollRef$cu : innerContentRef.current;
128
- scrollableSection.scrollTop = 0;
127
+ if (sidePanelRef && panelRefValue) {
128
+ var _animatedScrollRef$cu2;
129
+ var scrollableSection = (_animatedScrollRef$cu2 = animatedScrollRef.current) !== null && _animatedScrollRef$cu2 !== void 0 ? _animatedScrollRef$cu2 : innerContentRef.current;
130
+ if (scrollableSection) {
131
+ scrollableSection.scrollTop = 0;
132
+ }
129
133
  // The size of the panel has changed while it is still opened
130
134
  // so we need to scroll it to the top and reset the header
131
135
  // height css custom property
132
- if ((previousState === null || previousState === void 0 ? void 0 : previousState.size) !== size) {
136
+ if (previousState && previousState['size'] !== size && scrollableSection) {
133
137
  scrollableSection.scrollTop = 0;
134
138
  }
135
139
  }
136
- }, [currentStep, sidePanelRef, size, previousState === null || previousState === void 0 ? void 0 : previousState.size, id]);
137
-
138
- // set initial focus when side panel opens
139
- useEffect(function () {
140
- var initialFocus = function initialFocus(focusContainerElement) {
141
- var containerElement = focusContainerElement;
142
- var primaryFocusElement = containerElement && containerElement.querySelector(selectorPrimaryFocus);
143
- if (primaryFocusElement) {
144
- return primaryFocusElement;
145
- } else {
146
- return closeRef && closeRef.current;
147
- }
148
- };
149
- var focusButton = function focusButton(focusContainerElement) {
150
- var target = initialFocus(focusContainerElement);
151
- target === null || target === void 0 || target.focus();
152
- };
153
- if (open && animationComplete) {
154
- focusButton(innerContentRef.current);
155
- }
156
- }, [selectorPrimaryFocus, open, animationComplete]);
140
+ }, [currentStep, sidePanelRef, size, previousState, id, panelRefValue]);
157
141
 
158
142
  // Add console warning if labelText is provided without a title.
159
143
  // This combination is not allowed.
@@ -164,7 +148,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
164
148
  }, [labelText, title]);
165
149
  var checkSetDoAnimateTitle = function checkSetDoAnimateTitle() {
166
150
  var canDoAnimateTitle = false;
167
- if (sidePanelRef !== null && sidePanelRef !== void 0 && sidePanelRef.current && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !reducedMotion.matches) {
151
+ if (panelRefValue && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !reducedMotion.matches) {
168
152
  var _labelTextRef$current, _labelTextRef$current2, _subtitleRef$current$, _subtitleRef$current;
169
153
  var titleEl = titleRef.current;
170
154
  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;
@@ -177,7 +161,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
177
161
  setScrollAnimationDistance(_scrollAnimationDistance);
178
162
 
179
163
  // used to calculate the header moves
180
- sidePanelRef.current.style.setProperty("--".concat(blockClass, "--scroll-animation-distance"), _scrollAnimationDistance);
164
+ panelRefValue === null || panelRefValue === void 0 || panelRefValue.style.setProperty("--".concat(blockClass, "--scroll-animation-distance"), _scrollAnimationDistance.toString());
181
165
  var scrollEl = animatedScrollRef.current;
182
166
  if (!scrollEl && animateTitle && !doAnimateTitle) {
183
167
  // may be switching back based on resize
@@ -202,9 +186,9 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
202
186
  animatedScrollRef.current.addEventListener('scroll', handleScroll);
203
187
  }
204
188
  if (!doAnimateTitle && sidePanelRef.current) {
205
- sidePanelRef.current.style.setProperty("--".concat(blockClass, "--scroll-animation-progress"), 0);
189
+ panelRefValue === null || panelRefValue === void 0 || panelRefValue.style.setProperty("--".concat(blockClass, "--scroll-animation-progress"), '0');
206
190
  }
207
- }, [animatedScrollRef, doAnimateTitle, handleScroll, sidePanelRef]);
191
+ }, [animatedScrollRef, doAnimateTitle, handleScroll, sidePanelRef, panelRefValue]);
208
192
 
209
193
  /* istanbul ignore next */
210
194
  var handleResize = function handleResize() {
@@ -213,7 +197,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
213
197
 
214
198
  // Calculate scroll distances
215
199
  useEffect(function () {
216
- if (sidePanelRef !== null && sidePanelRef !== void 0 && sidePanelRef.current && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !reducedMotion.matches) {
200
+ if (panelRefValue && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !reducedMotion.matches) {
217
201
  checkSetDoAnimateTitle();
218
202
  }
219
203
 
@@ -223,7 +207,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
223
207
  // click outside functionality if `includeOverlay` prop is set
224
208
  useEffect(function () {
225
209
  var handleOutsideClick = function handleOutsideClick(event) {
226
- if (sidePanelRef.current && overlayRef.current && overlayRef.current.contains(event.target) && onRequestClose) {
210
+ if (panelRefValue && overlayRef.current && overlayRef.current.contains(event.target) && onRequestClose) {
227
211
  onRequestClose();
228
212
  }
229
213
  };
@@ -241,7 +225,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
241
225
  bodyElement.style.overflow = '';
242
226
  document.removeEventListener('click', handleOutsideClick);
243
227
  };
244
- }, [includeOverlay, onRequestClose, open, preventCloseOnClickOutside, onUnmount, sidePanelRef]);
228
+ }, [includeOverlay, onRequestClose, open, preventCloseOnClickOutside, onUnmount, sidePanelRef, panelRefValue]);
245
229
 
246
230
  // initializes the side panel to close
247
231
  var onAnimationEnd = function onAnimationEnd() {
@@ -260,64 +244,62 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
260
244
  }, [reducedMotion.matches]);
261
245
 
262
246
  // initializes the side panel to open
263
- var _onAnimationStart = function onAnimationStart() {
247
+ var onAnimationStart = function onAnimationStart() {
264
248
  setAnimationComplete(false);
265
249
  };
266
250
 
267
251
  // used to reset margins of the slide in panel when closed/closing
268
252
  useEffect(function () {
269
253
  if (!open && slideIn) {
270
- var pageContentElement = document.querySelector(selectorPageContent);
254
+ var pageContentElement = selectorPageContent ? document.querySelector(selectorPageContent) : null;
271
255
  if (placement && placement === 'right' && pageContentElement) {
272
- pageContentElement.style.marginInlineEnd = 0;
256
+ pageContentElement.style.marginInlineEnd = '0';
273
257
  } else if (pageContentElement) {
274
- pageContentElement.style.marginInlineStart = 0;
258
+ pageContentElement.style.marginInlineStart = '0';
275
259
  }
276
260
  }
277
261
  }, [open, placement, selectorPageContent, slideIn]);
278
262
  useEffect(function () {
279
- if (!open && previousState !== null && previousState !== void 0 && previousState.open && reducedMotion.matches) {
263
+ if (!open && previousState && previousState['open'] && reducedMotion.matches) {
280
264
  onUnmount === null || onUnmount === void 0 || onUnmount();
281
265
  }
282
- }, [open, onUnmount, reducedMotion.matches, previousState === null || previousState === void 0 ? void 0 : previousState.open]);
266
+ }, [open, onUnmount, reducedMotion.matches, previousState]);
283
267
 
284
268
  // used to set margins of content for slide in panel version
285
269
  useEffect(function () {
286
270
  if (open && slideIn) {
287
- var pageContentElement = document.querySelector(selectorPageContent);
271
+ var pageContentElement = selectorPageContent ? document.querySelector(selectorPageContent) : null;
288
272
  if (pageContentElement) {
289
273
  pageContentElement.style.inlineSize = 'auto';
290
274
  } else {
291
275
  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.');
292
276
  }
293
277
  if (placement && placement === 'right' && pageContentElement) {
294
- pageContentElement.style.marginInlineEnd = 0;
295
- pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-end ".concat(moderate02) : null;
278
+ pageContentElement.style.marginInlineEnd = '0';
279
+ pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-end ".concat(moderate02) : '';
296
280
  pageContentElement.style.marginInlineEnd = SIDE_PANEL_SIZES[size];
297
281
  } else if (pageContentElement) {
298
- pageContentElement.style.marginInlineStart = 0;
299
- pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-start ".concat(moderate02) : null;
282
+ pageContentElement.style.marginInlineStart = '0';
283
+ pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-start ".concat(moderate02) : '';
300
284
  pageContentElement.style.marginInlineStart = SIDE_PANEL_SIZES[size];
301
285
  }
302
286
  }
303
287
  }, [slideIn, selectorPageContent, placement, size, reducedMotion.matches, open]);
304
-
305
- // adds focus trap functionality
306
- /* istanbul ignore next */
307
- var handleBlur = function handleBlur(_ref2) {
308
- var oldActiveNode = _ref2.target,
309
- currentActiveNode = _ref2.relatedTarget;
310
- // focus trap should only be set if the side panel is a `slideOver` type
311
- if (open && innerContentRef && !slideIn) {
312
- wrapFocus({
313
- bodyNode: innerContentRef.current,
314
- startTrapRef: startTrapRef,
315
- endTrapRef: endTrapRef,
316
- currentActiveNode: currentActiveNode,
317
- oldActiveNode: oldActiveNode
318
- });
288
+ useEffect(function () {
289
+ if (open) {
290
+ setTimeout(function () {
291
+ if (selectorPrimaryFocus) {
292
+ var _document;
293
+ var primeFocusEl = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector(selectorPrimaryFocus);
294
+ if (primeFocusEl) {
295
+ primeFocusEl === null || primeFocusEl === void 0 || primeFocusEl.focus();
296
+ }
297
+ } else {
298
+ firstElement === null || firstElement === void 0 || firstElement.focus();
299
+ }
300
+ }, 0);
319
301
  }
320
- };
302
+ }, [animationComplete, firstElement, open, selectorPrimaryFocus]);
321
303
  var primaryActionContainerClassNames = cx(["".concat(blockClass, "__actions-container"), _defineProperty({}, "".concat(blockClass, "__actions-container--condensed"), condensedActions)]);
322
304
  var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass), "".concat(blockClass, "--").concat(size), _defineProperty(_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, "--animated-title"), doAnimateTitle), "".concat(blockClass, "--has-overlay"), includeOverlay)]);
323
305
  var renderTitle = function renderTitle() {
@@ -338,7 +320,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
338
320
  var _slug$type;
339
321
  var slugCloseSize = actions && actions.length && /l/.test(size) ? 'md' : 'sm';
340
322
  var normalizedSlug;
341
- if (slug && (slug === null || slug === void 0 || (_slug$type = slug.type) === null || _slug$type === void 0 ? void 0 : _slug$type.displayName) === 'Slug') {
323
+ if (slug && ((_slug$type = slug['type']) === null || _slug$type === void 0 ? void 0 : _slug$type.displayName) === 'Slug') {
342
324
  normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
343
325
  // slug size is sm unless actions and size > md
344
326
  size: slugCloseSize
@@ -383,17 +365,17 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
383
365
  ref: subtitleRef
384
366
  }, subtitle), actionToolbarButtons && actionToolbarButtons.length && /*#__PURE__*/React__default.createElement("div", {
385
367
  className: "".concat(blockClass, "__action-toolbar")
386
- }, actionToolbarButtons.map(function (_ref5) {
387
- var label = _ref5.label,
388
- kind = _ref5.kind,
389
- icon = _ref5.icon,
390
- tooltipPosition = _ref5.tooltipPosition,
391
- tooltipAlignment = _ref5.tooltipAlignment,
392
- leading = _ref5.leading,
393
- disabled = _ref5.disabled,
394
- className = _ref5.className,
395
- onClick = _ref5.onClick,
396
- rest = _objectWithoutProperties(_ref5, _excluded2);
368
+ }, actionToolbarButtons.map(function (_ref4) {
369
+ var label = _ref4.label,
370
+ kind = _ref4.kind,
371
+ icon = _ref4.icon,
372
+ tooltipPosition = _ref4.tooltipPosition,
373
+ tooltipAlignment = _ref4.tooltipAlignment,
374
+ leading = _ref4.leading,
375
+ disabled = _ref4.disabled,
376
+ className = _ref4.className,
377
+ onClick = _ref4.onClick,
378
+ rest = _objectWithoutProperties(_ref4, _excluded2);
397
379
  return /*#__PURE__*/React__default.createElement(Button, _extends({}, rest, {
398
380
  key: label,
399
381
  kind: kind || 'ghost',
@@ -419,14 +401,11 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
419
401
  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, {
420
402
  id: id,
421
403
  className: mainPanelClassNames,
422
- onBlur: handleBlur,
423
404
  ref: sidePanelRef,
424
405
  role: "complementary",
425
406
  "aria-label": title,
426
407
  onAnimationComplete: onAnimationEnd,
427
- onAnimationStart: function onAnimationStart(event) {
428
- return _onAnimationStart();
429
- },
408
+ onAnimationStart: onAnimationStart,
430
409
  variants: panelVariants,
431
410
  initial: "hidden",
432
411
  animate: "visible",
@@ -434,13 +413,9 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
434
413
  custom: {
435
414
  placement: placement,
436
415
  shouldReduceMotion: shouldReduceMotion
437
- }
438
- }), /*#__PURE__*/React__default.createElement("span", {
439
- ref: startTrapRef,
440
- tabIndex: "0",
441
- role: "link",
442
- className: "".concat(blockClass, "__visually-hidden")
443
- }, "Focus sentinel"), doAnimateTitle ? /*#__PURE__*/React__default.createElement("div", {
416
+ },
417
+ onKeyDown: keyDownListener
418
+ }), doAnimateTitle ? /*#__PURE__*/React__default.createElement("div", {
444
419
  ref: animatedScrollRef,
445
420
  className: "".concat(blockClass, "__animated-scroll-wrapper ").concat(blockClass, "--scrolls")
446
421
  }, renderHeader(), renderMain()) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React__default.createElement(MotionActionSet, {
@@ -449,12 +424,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
449
424
  size: size === 'xs' ? 'sm' : size,
450
425
  custom: shouldReduceMotion,
451
426
  variants: actionSetVariants
452
- }), /*#__PURE__*/React__default.createElement("span", {
453
- ref: endTrapRef,
454
- tabIndex: "0",
455
- role: "link",
456
- className: "".concat(blockClass, "__visually-hidden")
457
- }, "Focus sentinel")), /*#__PURE__*/React__default.createElement(AnimatePresence, null, includeOverlay && /*#__PURE__*/React__default.createElement(motion.div, {
427
+ })), /*#__PURE__*/React__default.createElement(AnimatePresence, null, includeOverlay && /*#__PURE__*/React__default.createElement(motion.div, {
458
428
  variants: overlayVariants,
459
429
  initial: "hidden",
460
430
  animate: "visible",
@@ -495,7 +465,8 @@ SidePanel.propTypes = {
495
465
  *
496
466
  * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
497
467
  */
498
- actions: allPropTypes([ActionSet.validateActions(), PropTypes.arrayOf(PropTypes.shape(_objectSpread2(_objectSpread2({}, Button.propTypes), {}, {
468
+ actions: allPropTypes([/**@ts-ignore*/
469
+ ActionSet.validateActions(), PropTypes.arrayOf(PropTypes.shape(_objectSpread2(_objectSpread2({}, Button.propTypes), {}, {
499
470
  kind: PropTypes.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
500
471
  tooltipPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
501
472
  tooltipAlignment: PropTypes.oneOf(['start', 'center', 'end']),
@@ -574,22 +545,26 @@ SidePanel.propTypes = {
574
545
  * This is the selector to the element that contains all of the page content that will shrink if the panel is a slide in.
575
546
  * This prop is required when using the `slideIn` variant of the side panel.
576
547
  */
577
- selectorPageContent: PropTypes.string.isRequired.if(function (_ref7) {
578
- var slideIn = _ref7.slideIn;
548
+ /**@ts-ignore*/
549
+ selectorPageContent: PropTypes.string.isRequired.if(function (_ref6) {
550
+ var slideIn = _ref6.slideIn;
579
551
  return slideIn;
580
552
  }),
581
553
  /**
582
554
  * Specify a CSS selector that matches the DOM element that should
583
555
  * be focused when the side panel opens
584
556
  */
557
+ /**@ts-ignore*/
585
558
  selectorPrimaryFocus: PropTypes.string,
586
559
  /**
587
560
  * Sets the size of the side panel
588
561
  */
562
+ /**@ts-ignore*/
589
563
  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', '2xl']),
590
564
  /**
591
565
  * Determines if this panel slides in
592
566
  */
567
+ /**@ts-ignore*/
593
568
  slideIn: PropTypes.bool,
594
569
  /**
595
570
  * **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
@@ -602,8 +577,9 @@ SidePanel.propTypes = {
602
577
  /**
603
578
  * Sets the title text
604
579
  */
605
- title: PropTypes.string.isRequired.if(function (_ref8) {
606
- var labelText = _ref8.labelText;
580
+ /**@ts-ignore*/
581
+ title: PropTypes.string.isRequired.if(function (_ref7) {
582
+ var labelText = _ref7.labelText;
607
583
  return labelText;
608
584
  })
609
585
  };
@@ -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 {};