@carbon/ibm-products 2.21.0 → 2.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/README.md +8 -5
  2. package/css/index-full-carbon.css +531 -251
  3. package/css/index-full-carbon.css.map +1 -1
  4. package/css/index-full-carbon.min.css +1 -1
  5. package/css/index-full-carbon.min.css.map +1 -1
  6. package/css/index-without-carbon-released-only.css +199 -177
  7. package/css/index-without-carbon-released-only.css.map +1 -1
  8. package/css/index-without-carbon-released-only.min.css +1 -1
  9. package/css/index-without-carbon-released-only.min.css.map +1 -1
  10. package/css/index-without-carbon.css +243 -189
  11. package/css/index-without-carbon.css.map +1 -1
  12. package/css/index-without-carbon.min.css +1 -1
  13. package/css/index-without-carbon.min.css.map +1 -1
  14. package/css/index.css +223 -192
  15. package/css/index.css.map +1 -1
  16. package/css/index.min.css +1 -1
  17. package/css/index.min.css.map +1 -1
  18. package/es/components/Datagrid/Datagrid/DatagridContent.js +8 -3
  19. package/es/components/Datagrid/Datagrid/DatagridRow.js +6 -1
  20. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +6 -3
  21. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +2 -2
  22. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +30 -72
  23. package/es/components/Datagrid/useRowIsMouseOver.js +3 -1
  24. package/es/components/DelimitedList/DelimitedList.docs-page.js +15 -0
  25. package/es/components/DelimitedList/DelimitedList.js +73 -0
  26. package/es/components/DelimitedList/index.js +8 -0
  27. package/es/components/SidePanel/SidePanel.js +145 -189
  28. package/es/components/TagSet/TagSet.js +21 -5
  29. package/es/components/TagSet/TagSetOverflow.js +13 -8
  30. package/es/components/index.js +2 -1
  31. package/es/global/js/hooks/useResizeObserver.js +5 -2
  32. package/es/global/js/package-settings.js +1 -0
  33. package/lib/components/Datagrid/Datagrid/DatagridContent.js +8 -3
  34. package/lib/components/Datagrid/Datagrid/DatagridRow.js +6 -1
  35. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +6 -3
  36. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +2 -2
  37. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +30 -72
  38. package/lib/components/Datagrid/useRowIsMouseOver.js +3 -1
  39. package/lib/components/DelimitedList/DelimitedList.docs-page.js +25 -0
  40. package/lib/components/DelimitedList/DelimitedList.js +78 -0
  41. package/lib/components/DelimitedList/index.js +12 -0
  42. package/lib/components/SidePanel/SidePanel.js +145 -189
  43. package/lib/components/TagSet/TagSet.js +21 -5
  44. package/lib/components/TagSet/TagSetOverflow.js +12 -7
  45. package/lib/components/index.js +8 -1
  46. package/lib/global/js/hooks/useResizeObserver.js +5 -2
  47. package/lib/global/js/package-settings.js +1 -0
  48. package/package.json +9 -8
  49. package/scss/components/Datagrid/_datagrid.scss +4 -0
  50. package/scss/components/Datagrid/styles/_datagrid.scss +9 -1
  51. package/scss/components/Datagrid/styles/_useStickyColumn.scss +2 -0
  52. package/scss/components/DelimitedList/_carbon-imports.scss +9 -0
  53. package/scss/components/DelimitedList/_delimited-list.scss +27 -0
  54. package/scss/components/DelimitedList/_index-with-carbon.scss +9 -0
  55. package/scss/components/DelimitedList/_index.scss +8 -0
  56. package/scss/components/SidePanel/_side-panel-variables.scss +5 -1
  57. package/scss/components/SidePanel/_side-panel.scss +155 -187
  58. package/scss/components/_index-with-carbon.scss +1 -0
  59. package/scss/components/_index.scss +1 -0
  60. package/telemetry.yml +790 -0
@@ -92,47 +92,56 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
92
92
  _useState2 = _slicedToArray(_useState, 2),
93
93
  animationComplete = _useState2[0],
94
94
  setAnimationComplete = _useState2[1];
95
- var _useState3 = useState(0),
96
- _useState4 = _slicedToArray(_useState3, 2),
97
- panelHeight = _useState4[0],
98
- setPanelHeight = _useState4[1];
99
- var sidePanelRef = useRef();
100
- var sidePanelOverlayRef = useRef();
95
+ var localRef = useRef();
96
+ var sidePanelRef = ref || localRef;
97
+ var overlayRef = useRef();
101
98
  var startTrapRef = useRef();
102
99
  var endTrapRef = useRef();
103
- var sidePanelInnerRef = useRef();
104
- var sidePanelCloseRef = useRef();
100
+ var innerContentRef = useRef();
101
+ var closeRef = useRef();
102
+ var animatedScrollRef = useRef();
103
+ var headerRef = useRef();
104
+ var titleRef = useRef();
105
+ var collapsedTitleRef = useRef();
106
+ var labelTextRef = useRef();
107
+ var subtitleRef = useRef();
105
108
  var previousState = usePreviousValue({
106
109
  size: size,
107
110
  open: open
108
111
  });
112
+ var _useState3 = useState(-1),
113
+ _useState4 = _slicedToArray(_useState3, 2),
114
+ scrollAnimationDistance = _useState4[0],
115
+ setScrollAnimationDistance = _useState4[1];
116
+ var _useState5 = useState(true),
117
+ _useState6 = _slicedToArray(_useState5, 2),
118
+ doAnimateTitle = _useState6[0],
119
+ setDoAnimateTitle = _useState6[1];
120
+ useEffect(function () {
121
+ setDoAnimateTitle(animateTitle);
122
+ }, [animateTitle]);
123
+ var handleScroll = useCallback(function () {
124
+ var scrollTop = animatedScrollRef.current.scrollTop;
125
+ sidePanelRef.current.style.setProperty("--".concat(blockClass, "--scroll-animation-progress"), Math.min(scrollTop, scrollAnimationDistance) / scrollAnimationDistance);
126
+ }, [scrollAnimationDistance, sidePanelRef]);
109
127
  var reducedMotion = typeof window !== 'undefined' && (_window = window) !== null && _window !== void 0 && _window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
110
128
  matches: true
111
129
  };
112
- var getActionsContainerElement = useCallback(function () {
113
- var sidePanelOuter = document.querySelector("#".concat(id));
114
- return sidePanelOuter && sidePanelOuter.querySelector(".".concat(blockClass, "__actions-container"));
115
- }, [id]);
116
130
 
117
131
  // scroll panel to top going between steps
118
132
  useEffect(function () {
119
- var panelRef = ref || sidePanelRef;
120
- if (panelRef && panelRef.current) {
121
- var _document$querySelect;
122
- var scrollableSection = panelRef.current.querySelector(".".concat(blockClass, "__inner-content"));
123
- var sidePanelOuter = document.querySelector("#".concat(id));
124
- var initialTitleHeight = (_document$querySelect = document.querySelector(".".concat(blockClass, "__title-container"))) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.offsetHeight;
133
+ if (sidePanelRef && sidePanelRef.current) {
134
+ var _animatedScrollRef$cu;
135
+ var scrollableSection = (_animatedScrollRef$cu = animatedScrollRef.current) !== null && _animatedScrollRef$cu !== void 0 ? _animatedScrollRef$cu : innerContentRef.current;
125
136
  scrollableSection.scrollTop = 0;
126
137
  // The size of the panel has changed while it is still opened
127
- // so we need to scroll it to the top and reset the title container
138
+ // so we need to scroll it to the top and reset the header
128
139
  // height css custom property
129
140
  if ((previousState === null || previousState === void 0 ? void 0 : previousState.size) !== size) {
130
- var _sidePanelOuter$style;
131
141
  scrollableSection.scrollTop = 0;
132
- sidePanelOuter === null || sidePanelOuter === void 0 || (_sidePanelOuter$style = sidePanelOuter.style) === null || _sidePanelOuter$style === void 0 || _sidePanelOuter$style.setProperty("--".concat(blockClass, "--title-container-height"), "".concat(Number(initialTitleHeight), "px"));
133
142
  }
134
143
  }
135
- }, [currentStep, ref, size, previousState === null || previousState === void 0 ? void 0 : previousState.size, id]);
144
+ }, [currentStep, sidePanelRef, size, previousState === null || previousState === void 0 ? void 0 : previousState.size, id]);
136
145
 
137
146
  // set initial focus when side panel opens
138
147
  useEffect(function () {
@@ -142,7 +151,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
142
151
  if (primaryFocusElement) {
143
152
  return primaryFocusElement;
144
153
  } else {
145
- return sidePanelCloseRef && sidePanelCloseRef.current;
154
+ return closeRef && closeRef.current;
146
155
  }
147
156
  };
148
157
  var focusButton = function focusButton(focusContainerElement) {
@@ -150,19 +159,9 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
150
159
  target === null || target === void 0 || target.focus();
151
160
  };
152
161
  if (open && animationComplete) {
153
- focusButton(sidePanelInnerRef.current);
162
+ focusButton(innerContentRef.current);
154
163
  }
155
164
  }, [selectorPrimaryFocus, open, animationComplete]);
156
- useEffect(function () {
157
- if (open && actions && actions.length && animationComplete) {
158
- var _sidePanelOuter$style2;
159
- var sidePanelOuter = document.querySelector("#".concat(id));
160
- var actionsContainer = getActionsContainerElement();
161
- var actionsHeight = (actionsContainer === null || actionsContainer === void 0 ? void 0 : actionsContainer.offsetHeight) + 16; // add additional 1rem spacing to bottom padding
162
- actionsHeight = "".concat(Math.round(actionsHeight / 16), "rem");
163
- sidePanelOuter === null || sidePanelOuter === void 0 || (_sidePanelOuter$style2 = sidePanelOuter.style) === null || _sidePanelOuter$style2 === void 0 || _sidePanelOuter$style2.setProperty("--".concat(blockClass, "--content-bottom-padding"), actionsHeight);
164
- }
165
- }, [actions, condensedActions, open, animationComplete, id, getActionsContainerElement]);
166
165
 
167
166
  // Add console warning if labelText is provided without a title.
168
167
  // This combination is not allowed.
@@ -171,120 +170,67 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
171
170
  console.warn("".concat(componentName, ": The prop `labelText` was provided without a `title`. It is required to have a `title` when using the `labelText` prop."));
172
171
  }
173
172
  }, [labelText, title]);
173
+ var checkSetDoAnimateTitle = function checkSetDoAnimateTitle() {
174
+ if (sidePanelRef !== null && sidePanelRef !== void 0 && sidePanelRef.current && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !reducedMotion.matches) {
175
+ var _labelTextRef$current, _labelTextRef$current2, _subtitleRef$current$, _subtitleRef$current;
176
+ var titleEl = titleRef.current;
177
+ 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;
178
+ 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;
174
179
 
175
- /* istanbul ignore next */
176
- var handleResize = function handleResize(_ref2) {
177
- var _sidePanelOuter$style3;
178
- var height = _ref2.height;
179
- setPanelHeight(height);
180
- var sidePanelOuter = document.querySelector("#".concat(id));
181
- var actionsContainer = getActionsContainerElement();
182
- var actionsHeight = (actionsContainer === null || actionsContainer === void 0 ? void 0 : actionsContainer.offsetHeight) + 16; // add additional 1rem spacing to bottom padding
183
- actionsHeight = "".concat(Math.round(actionsHeight / 16), "rem");
184
- sidePanelOuter === null || sidePanelOuter === void 0 || (_sidePanelOuter$style3 = sidePanelOuter.style) === null || _sidePanelOuter$style3 === void 0 || _sidePanelOuter$style3.setProperty("--".concat(blockClass, "--content-bottom-padding"), actionsHeight);
185
- };
180
+ // Adjusts space at bottom of titles by changing where scrolling finishes
181
+ // Styles use border to save use of get computed style
182
+ var titleVerticalBorder = actionToolbarButtons ? titleEl.offsetHeight - titleEl.clientHeight : 0;
183
+ var _scrollAnimationDistance = labelHeight + subtitleHeight + titleVerticalBorder;
184
+ setScrollAnimationDistance(_scrollAnimationDistance);
186
185
 
187
- // Title and subtitle scroll animation
186
+ // used to calculate the header moves
187
+ sidePanelRef.current.style.setProperty("--".concat(blockClass, "--scroll-animation-distance"), _scrollAnimationDistance);
188
+ var scrollEl = animatedScrollRef.current;
189
+ if (!scrollEl && animateTitle && !doAnimateTitle) {
190
+ // may be switching back based on resize
191
+ scrollEl = innerContentRef.current;
192
+ }
193
+ if (scrollEl) {
194
+ var _window2;
195
+ var innerComputed = (_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.getComputedStyle(innerContentRef.current);
196
+ var innerPaddingHeight = innerComputed ? parseFloat(innerComputed === null || innerComputed === void 0 ? void 0 : innerComputed.paddingTop, 10) + parseFloat(innerComputed === null || innerComputed === void 0 ? void 0 : innerComputed.paddingBottom, 10) : 0;
197
+ var canDoAnimateTitle = (!!labelText || !!actionToolbarButtons || !!subtitle) && scrollEl.scrollHeight - scrollEl.clientHeight >= _scrollAnimationDistance + innerPaddingHeight;
198
+ if (doAnimateTitle !== canDoAnimateTitle) {
199
+ // will need updating on resize
200
+ setDoAnimateTitle(canDoAnimateTitle);
201
+ }
202
+ }
203
+ }
204
+ };
188
205
  useEffect(function () {
189
- if (open && animateTitle && animationComplete && title && title.length && !reducedMotion.matches) {
190
- var _document$querySelect2, _document$querySelect3, _document$querySelect4;
191
- var sidePanelOuter = document.querySelector("#".concat(id));
192
- var sidePanelScrollArea = document.querySelector("#".concat(id, " .").concat(blockClass, "__inner-content"));
193
- var sidePanelTitleElement = document.querySelector(".".concat(blockClass, "__title-text"));
194
- var sidePanelCollapsedTitleElement = document.querySelector(".".concat(blockClass, "__collapsed-title-text"));
195
- var sidePanelSubtitleElement = document.querySelector(".".concat("".concat(blockClass, "__subtitle-text")));
196
- var sidePanelSubtitleElementHeight = (sidePanelSubtitleElement === null || sidePanelSubtitleElement === void 0 ? void 0 : sidePanelSubtitleElement.offsetHeight) || 0; // set default subtitle height if a subtitle is not provided to enable scrolling animation
197
-
198
- var panelOuterHeight = panelHeight;
199
- var scrollSectionHeight = (_document$querySelect2 = document.querySelector(".".concat(blockClass, "__body-content"))) === null || _document$querySelect2 === void 0 ? void 0 : _document$querySelect2.offsetHeight;
200
- var titleContainerHeight = (_document$querySelect3 = document.querySelector(".".concat(blockClass, "__title-container"))) === null || _document$querySelect3 === void 0 ? void 0 : _document$querySelect3.offsetHeight;
201
- var labelTextHeight = (_document$querySelect4 = document.querySelector(".".concat(blockClass, "__label-text"))) === null || _document$querySelect4 === void 0 ? void 0 : _document$querySelect4.offsetHeight;
202
- var totalScrollingContentHeight = titleContainerHeight + sidePanelSubtitleElementHeight + scrollSectionHeight;
203
- // if the difference between the total scrolling height and the panel height is less than
204
- // the subtitleElement height OR if the subtitle element height is 0, use that difference
205
- // as the length of the scroll animation (otherwise the animation will not be able to complete
206
- // because there is not enough scrolling distance to complete it).
207
- sidePanelSubtitleElementHeight = totalScrollingContentHeight - panelOuterHeight < sidePanelSubtitleElementHeight ? totalScrollingContentHeight - panelOuterHeight : sidePanelSubtitleElementHeight === 0 ? 16 : sidePanelSubtitleElementHeight;
208
- sidePanelSubtitleElementHeight = sidePanelSubtitleElementHeight < 0 ? (sidePanelScrollArea === null || sidePanelScrollArea === void 0 ? void 0 : sidePanelScrollArea.scrollHeight) - (sidePanelScrollArea === null || sidePanelScrollArea === void 0 ? void 0 : sidePanelScrollArea.clientHeight) : sidePanelSubtitleElementHeight;
209
- /* istanbul ignore next */
210
- sidePanelScrollArea && sidePanelScrollArea.addEventListener('scroll', function () {
211
- var scrollTop = sidePanelScrollArea.scrollTop;
212
- // if scrolling has occurred
213
- if (scrollTop > 0) {
214
- sidePanelOuter.classList.add("".concat(blockClass, "__with-condensed-header"));
215
- // Set subtitle opacity calculation here
216
- // as scroll progresses
217
- var titleOpacity = Math.min(1, (sidePanelSubtitleElementHeight - scrollTop) / sidePanelSubtitleElementHeight);
218
- titleOpacity = titleOpacity < 0 ? 0 : titleOpacity;
219
- sidePanelOuter.style.setProperty("--".concat(blockClass, "--subtitle-opacity"), titleOpacity);
220
-
221
- // Calculate divider opacity to avoid border
222
- // abruptly appearing when scrolling starts.
223
- // This approach uses a pseudo element and sets
224
- // the opacity as scroll progresses.
225
- var dividerOpacity = Math.min(scrollTop / sidePanelSubtitleElementHeight, 1);
226
- sidePanelOuter.style.setProperty("--".concat(blockClass, "--divider-opacity"), "".concat(Math.min(1, dividerOpacity)));
227
-
228
- // We need to know the height of the title element
229
- // so that we know how far to place the action toolbar
230
- // from the top since it is sticky
231
- var titleTextHeight = Math.max(sidePanelTitleElement.offsetHeight);
232
- sidePanelOuter.style.setProperty("--".concat(blockClass, "--title-height"), "".concat(titleTextHeight + 16, "px"));
233
-
234
- // Set title y positioning
235
- var titleYPosition = Math.min(scrollTop / sidePanelSubtitleElementHeight, 1);
236
- sidePanelOuter.style.setProperty("--".concat(blockClass, "--title-y-position"), "".concat(-Math.abs(titleYPosition), "rem"));
237
-
238
- // mark title with aria-hidden={true} if opacity reaches 0
239
- if (titleOpacity === 0) {
240
- sidePanelTitleElement.setAttribute('aria-hidden', 'true');
241
- sidePanelCollapsedTitleElement.setAttribute('aria-hidden', 'false');
242
- }
206
+ if (doAnimateTitle && animatedScrollRef.current) {
207
+ // only add scroll if the doAnimateTitle is already true
208
+ // should come back through if false and canDoAnimateTitle is true
209
+ animatedScrollRef.current.addEventListener('scroll', handleScroll);
210
+ }
211
+ if (!doAnimateTitle && sidePanelRef.current) {
212
+ sidePanelRef.current.style.setProperty("--".concat(blockClass, "--scroll-animation-progress"), 0);
213
+ }
214
+ }, [animatedScrollRef, doAnimateTitle, handleScroll, sidePanelRef]);
243
215
 
244
- // Set collapsed title y positioning
245
- var collapsedTitleYPosition = Math.min(1, (sidePanelSubtitleElementHeight - scrollTop) / sidePanelSubtitleElementHeight);
246
- collapsedTitleYPosition = collapsedTitleYPosition < 0 ? 0 : collapsedTitleYPosition;
247
- sidePanelOuter.style.setProperty("--".concat(blockClass, "--collapsed-title-y-position"), "".concat(collapsedTitleYPosition, "rem"));
216
+ /* istanbul ignore next */
217
+ var handleResize = function handleResize() {
218
+ checkSetDoAnimateTitle();
219
+ };
248
220
 
249
- // Set label text height
250
- var scrollAnimationProgress = dividerOpacity;
251
- var reduceTitleContainerHeightAmount = labelTextHeight * scrollAnimationProgress / titleContainerHeight * 100;
252
- sidePanelOuter.style.setProperty("--".concat(blockClass, "--label-text-height"), "".concat(Math.trunc(reduceTitleContainerHeightAmount), "px"));
253
- sidePanelOuter.style.setProperty("--".concat(blockClass, "--title-container-height"), "".concat(titleContainerHeight, "px"));
254
- } else {
255
- sidePanelTitleElement.setAttribute('aria-hidden', 'false');
256
- sidePanelCollapsedTitleElement.setAttribute('aria-hidden', 'true');
257
- sidePanelOuter.classList.remove("".concat(blockClass, "__with-condensed-header"));
258
- sidePanelOuter.style.setProperty("--".concat(blockClass, "--subtitle-opacity"), 1);
259
- sidePanelOuter.style.setProperty("--".concat(blockClass, "--title-y-position"), 0);
260
- sidePanelOuter.style.setProperty("--".concat(blockClass, "--divider-opacity"), 0);
261
- sidePanelOuter.style.setProperty("--".concat(blockClass, "--collapsed-title-y-position"), "1rem");
262
- sidePanelOuter.style.setProperty("--".concat(blockClass, "--label-text-height"), "0px");
263
- }
264
- });
265
- }
266
- if (open && !animateTitle) {
267
- var _sidePanelOuter = document.querySelector("#".concat(id));
268
- var _sidePanelTitleElement = document.querySelector(".".concat(blockClass, "__title-container .").concat(blockClass, "__title-text"));
269
- var _sidePanelSubtitleElement = document.querySelector(".".concat(blockClass, "__subtitle-text"));
270
- var actionToolbarElement = document.querySelector(".".concat(blockClass, "__action-toolbar"));
271
- var _labelText = document.querySelector(".".concat(blockClass, "__label-text"));
272
- var _sidePanelSubtitleElementHeight = (_sidePanelSubtitleElement === null || _sidePanelSubtitleElement === void 0 ? void 0 : _sidePanelSubtitleElement.offsetHeight) || 0;
273
- var sidePanelActionBarElementHeight = (actionToolbarElement === null || actionToolbarElement === void 0 ? void 0 : actionToolbarElement.offsetHeight) || 0;
274
- var titleHeight = (_sidePanelTitleElement === null || _sidePanelTitleElement === void 0 ? void 0 : _sidePanelTitleElement.offsetHeight) + 24;
275
- var labelHeight = (_labelText === null || _labelText === void 0 ? void 0 : _labelText.offsetHeight) || 0;
276
- _sidePanelOuter === null || _sidePanelOuter === void 0 || _sidePanelOuter.style.setProperty("--".concat(blockClass, "--title-text-height"), "".concat(titleHeight, "px"));
277
- _sidePanelOuter === null || _sidePanelOuter === void 0 || _sidePanelOuter.style.setProperty("--".concat(blockClass, "--subtitle-container-height"), "".concat(_sidePanelSubtitleElementHeight, "px"));
278
- _sidePanelOuter === null || _sidePanelOuter === void 0 || _sidePanelOuter.style.setProperty("--".concat(blockClass, "--action-bar-container-height"), "".concat(sidePanelActionBarElementHeight, "px"));
279
- _sidePanelOuter === null || _sidePanelOuter === void 0 || _sidePanelOuter.style.setProperty("--".concat(blockClass, "--label-text-height"), "".concat(labelHeight, "px"));
221
+ // Calculate scroll distances
222
+ useEffect(function () {
223
+ if (sidePanelRef !== null && sidePanelRef !== void 0 && sidePanelRef.current && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !reducedMotion.matches) {
224
+ checkSetDoAnimateTitle();
280
225
  }
281
- }, [open, animateTitle, animationComplete, panelHeight, title, size, reducedMotion.matches, id]);
226
+
227
+ // eslint-disable-next-line react-hooks/exhaustive-deps
228
+ }, [open, doAnimateTitle /* use do instead of animateTitle directly */, animationComplete, handleScroll, title, size, reducedMotion.matches, id, animatedScrollRef.current]);
282
229
 
283
230
  // click outside functionality if `includeOverlay` prop is set
284
231
  useEffect(function () {
285
232
  var handleOutsideClick = function handleOutsideClick(event) {
286
- var panelRef = ref || sidePanelRef;
287
- if (panelRef.current && sidePanelOverlayRef.current && sidePanelOverlayRef.current.contains(event.target) && onRequestClose) {
233
+ if (sidePanelRef.current && overlayRef.current && overlayRef.current.contains(event.target) && onRequestClose) {
288
234
  onRequestClose();
289
235
  }
290
236
  };
@@ -302,7 +248,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
302
248
  bodyElement.style.overflow = '';
303
249
  document.removeEventListener('click', handleOutsideClick);
304
250
  };
305
- }, [includeOverlay, onRequestClose, open, preventCloseOnClickOutside, ref, onUnmount]);
251
+ }, [includeOverlay, onRequestClose, open, preventCloseOnClickOutside, onUnmount, sidePanelRef]);
306
252
 
307
253
  // initializes the side panel to close
308
254
  var onAnimationEnd = function onAnimationEnd() {
@@ -365,13 +311,13 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
365
311
 
366
312
  // adds focus trap functionality
367
313
  /* istanbul ignore next */
368
- var handleBlur = function handleBlur(_ref3) {
369
- var oldActiveNode = _ref3.target,
370
- currentActiveNode = _ref3.relatedTarget;
314
+ var handleBlur = function handleBlur(_ref2) {
315
+ var oldActiveNode = _ref2.target,
316
+ currentActiveNode = _ref2.relatedTarget;
371
317
  // focus trap should only be set if the side panel is a `slideOver` type
372
- if (open && sidePanelInnerRef && !slideIn) {
318
+ if (open && innerContentRef && !slideIn) {
373
319
  wrapFocus({
374
- bodyNode: sidePanelInnerRef.current,
320
+ bodyNode: innerContentRef.current,
375
321
  startTrapRef: startTrapRef,
376
322
  endTrapRef: endTrapRef,
377
323
  currentActiveNode: currentActiveNode,
@@ -379,8 +325,23 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
379
325
  });
380
326
  }
381
327
  };
382
- var primaryActionContainerClassNames = cx(["".concat(blockClass, "__actions-container"), _defineProperty({}, "".concat(blockClass, "__actions-container-condensed"), condensedActions)]);
383
- var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass, "__container"), "".concat(blockClass, "__container--").concat(size), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__container-right-placement"), placement === 'right'), "".concat(blockClass, "__container-left-placement"), placement === 'left'), "".concat(blockClass, "__container-with-action-toolbar"), actionToolbarButtons && actionToolbarButtons.length), "".concat(blockClass, "__container-without-overlay"), !includeOverlay && !slideIn), "".concat(blockClass, "__container-is-animating"), !animationComplete || !open), "".concat(blockClass, "__container--has-slug"), slug)]);
328
+ var primaryActionContainerClassNames = cx(["".concat(blockClass, "__actions-container"), _defineProperty({}, "".concat(blockClass, "__actions-container--condensed"), condensedActions)]);
329
+ var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass, "__container"), "".concat(blockClass, "__container--").concat(size), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__container-right-placement"), placement === 'right'), "".concat(blockClass, "__container-left-placement"), placement === 'left'), "".concat(blockClass, "__container--slide-in"), slideIn), "".concat(blockClass, "__container--has-slug"), slug), "".concat(blockClass, "__container--condensed-actions"), condensedActions)]);
330
+ var renderTitle = function renderTitle() {
331
+ return /*#__PURE__*/React.createElement("div", {
332
+ className: cx("".concat(blockClass, "__title"), _defineProperty({}, "".concat(blockClass, "__title--no-label"), !labelTextRef.current)),
333
+ ref: titleRef
334
+ }, /*#__PURE__*/React.createElement("h2", {
335
+ className: "".concat(blockClass, "__title-text"),
336
+ title: title,
337
+ "aria-hidden": false
338
+ }, title), doAnimateTitle && !reducedMotion.matches && /*#__PURE__*/React.createElement("h2", {
339
+ className: "".concat(blockClass, "__collapsed-title-text"),
340
+ title: title,
341
+ "aria-hidden": true,
342
+ ref: collapsedTitleRef
343
+ }, title));
344
+ };
384
345
  var renderHeader = function renderHeader() {
385
346
  var _slug$type;
386
347
  var slugCloseSize = actions && actions.length && /l/.test(size) ? 'md' : 'sm';
@@ -391,8 +352,9 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
391
352
  size: slugCloseSize
392
353
  });
393
354
  }
394
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
395
- className: cx("".concat(blockClass, "__title-container"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__on-detail-step"), currentStep > 0), "".concat(blockClass, "__on-detail-step-without-title"), currentStep > 0 && !title), "".concat(blockClass, "__title-container--no-title-animation"), !animateTitle), "".concat(blockClass, "__title-container-is-animating"), !animationComplete || !open), "".concat(blockClass, "__title-container-without-title"), !title), "".concat(blockClass, "__title-container--reduced-motion"), reducedMotion.matches))
355
+ return /*#__PURE__*/React.createElement("div", {
356
+ className: cx("".concat(blockClass, "__header"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "--on-detail-step"), currentStep > 0), "".concat(blockClass, "__header--no-title-animation"), !doAnimateTitle), "".concat(blockClass, "__header--reduced-motion"), reducedMotion.matches)),
357
+ ref: headerRef
396
358
  }, currentStep > 0 && /*#__PURE__*/React.createElement(Button, {
397
359
  "aria-label": navigationBackIconDescription,
398
360
  kind: "ghost",
@@ -407,8 +369,9 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
407
369
  className: "".concat(blockClass, "__navigation-back-button"),
408
370
  onClick: onNavigationBack
409
371
  }), title && title.length && labelText && labelText.length && /*#__PURE__*/React.createElement("p", {
410
- className: "".concat(blockClass, "__label-text")
411
- }, labelText), title && title.length && renderTitle()), /*#__PURE__*/React.createElement("div", {
372
+ className: "".concat(blockClass, "__label-text"),
373
+ ref: labelTextRef
374
+ }, labelText), title && title.length && renderTitle(), /*#__PURE__*/React.createElement("div", {
412
375
  className: "".concat(blockClass, "__slug-and-close")
413
376
  }, normalizedSlug, /*#__PURE__*/React.createElement(Button, {
414
377
  "aria-label": closeIconDescription,
@@ -422,22 +385,23 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
422
385
  iconDescription: closeIconDescription,
423
386
  className: "".concat(blockClass, "__close-button"),
424
387
  onClick: onRequestClose,
425
- ref: sidePanelCloseRef
388
+ ref: closeRef
426
389
  })), subtitle && /*#__PURE__*/React.createElement("p", {
427
- className: cx("".concat(blockClass, "__subtitle-text"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__subtitle-text-no-animation"), !animateTitle), "".concat(blockClass, "__subtitle-text-no-animation-no-action-toolbar"), !animateTitle && (!actionToolbarButtons || !actionToolbarButtons.length)), "".concat(blockClass, "__subtitle-text-is-animating"), !animationComplete && animateTitle), "".concat(blockClass, "__subtitle-without-title"), !title))
390
+ className: cx("".concat(blockClass, "__subtitle-text"), _defineProperty({}, "".concat(blockClass, "__subtitle-text-no-animation-no-action-toolbar"), !doAnimateTitle && (!actionToolbarButtons || !actionToolbarButtons.length))),
391
+ ref: subtitleRef
428
392
  }, subtitle), actionToolbarButtons && actionToolbarButtons.length && /*#__PURE__*/React.createElement("div", {
429
- className: cx("".concat(blockClass, "__action-toolbar"), _defineProperty({}, "".concat(blockClass, "__action-toolbar-no-animation"), !animateTitle))
430
- }, actionToolbarButtons.map(function (_ref6) {
431
- var label = _ref6.label,
432
- kind = _ref6.kind,
433
- icon = _ref6.icon,
434
- tooltipPosition = _ref6.tooltipPosition,
435
- tooltipAlignment = _ref6.tooltipAlignment,
436
- leading = _ref6.leading,
437
- disabled = _ref6.disabled,
438
- className = _ref6.className,
439
- onClick = _ref6.onClick,
440
- rest = _objectWithoutProperties(_ref6, _excluded2);
393
+ className: "".concat(blockClass, "__action-toolbar")
394
+ }, actionToolbarButtons.map(function (_ref5) {
395
+ var label = _ref5.label,
396
+ kind = _ref5.kind,
397
+ icon = _ref5.icon,
398
+ tooltipPosition = _ref5.tooltipPosition,
399
+ tooltipAlignment = _ref5.tooltipAlignment,
400
+ leading = _ref5.leading,
401
+ disabled = _ref5.disabled,
402
+ className = _ref5.className,
403
+ onClick = _ref5.onClick,
404
+ rest = _objectWithoutProperties(_ref5, _excluded2);
441
405
  return /*#__PURE__*/React.createElement(Button, _extends({}, rest, {
442
406
  key: label,
443
407
  kind: kind || 'ghost',
@@ -453,24 +417,18 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
453
417
  }), leading && label);
454
418
  })));
455
419
  };
456
- var renderTitle = function renderTitle() {
457
- return /*#__PURE__*/React.createElement(React.Fragment, null, title && title.length && /*#__PURE__*/React.createElement("h2", {
458
- className: "".concat(blockClass, "__title-text"),
459
- title: title,
460
- "aria-hidden": false
461
- }, title), animateTitle && title && title.length && !reducedMotion.matches && /*#__PURE__*/React.createElement("h2", {
462
- className: "".concat(blockClass, "__collapsed-title-text"),
463
- title: title,
464
- "aria-hidden": true
465
- }, title));
420
+ var renderMain = function renderMain() {
421
+ return /*#__PURE__*/React.createElement("div", {
422
+ ref: innerContentRef,
423
+ className: cx("".concat(blockClass, "__inner-content"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__inner-content--static"), !doAnimateTitle), "".concat(blockClass, "--scrolls"), !doAnimateTitle))
424
+ }, children);
466
425
  };
467
- var contentRef = ref || sidePanelRef;
468
- useResizeObserver(contentRef, handleResize);
426
+ useResizeObserver(sidePanelRef, handleResize, [open]);
469
427
  return /*#__PURE__*/React.createElement(AnimatePresence, null, open && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(motion.div, _extends({}, getDevtoolsProps(componentName), rest, {
470
428
  id: id,
471
429
  className: mainPanelClassNames,
472
430
  onBlur: handleBlur,
473
- ref: contentRef,
431
+ ref: sidePanelRef,
474
432
  role: "complementary",
475
433
  "aria-label": title,
476
434
  onAnimationComplete: onAnimationEnd,
@@ -487,16 +445,14 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
487
445
  tabIndex: "0",
488
446
  role: "link",
489
447
  className: "".concat(blockClass, "__visually-hidden")
490
- }, "Focus sentinel"), !animateTitle && renderHeader(), /*#__PURE__*/React.createElement("div", {
491
- ref: sidePanelInnerRef,
492
- className: cx("".concat(blockClass, "__inner-content"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__static-inner-content"), !animateTitle), "".concat(blockClass, "__static-inner-content-no-actions"), !animateTitle && !(actions !== null && actions !== void 0 && actions.length)), "".concat(blockClass, "__inner-content-with-actions"), actions && actions.length))
493
- }, animateTitle && renderHeader(), /*#__PURE__*/React.createElement("div", {
494
- className: "".concat(blockClass, "__body-content")
495
- }, children), /*#__PURE__*/React.createElement(ActionSet, {
448
+ }, "Focus sentinel"), doAnimateTitle ? /*#__PURE__*/React.createElement("div", {
449
+ ref: animatedScrollRef,
450
+ className: "".concat(blockClass, "__animated-scroll-wrapper ").concat(blockClass, "--scrolls")
451
+ }, renderHeader(), renderMain()) : /*#__PURE__*/React.createElement(React.Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React.createElement(ActionSet, {
496
452
  actions: actions,
497
453
  className: primaryActionContainerClassNames,
498
454
  size: size === 'xs' ? 'sm' : size
499
- })), /*#__PURE__*/React.createElement("span", {
455
+ }), /*#__PURE__*/React.createElement("span", {
500
456
  ref: endTrapRef,
501
457
  tabIndex: "0",
502
458
  role: "link",
@@ -506,7 +462,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
506
462
  initial: "hidden",
507
463
  animate: "visible",
508
464
  exit: "exit",
509
- ref: sidePanelOverlayRef,
465
+ ref: overlayRef,
510
466
  className: "".concat(blockClass, "__overlay")
511
467
  }))));
512
468
  });
@@ -621,8 +577,8 @@ SidePanel.propTypes = {
621
577
  * This is the selector to the element that contains all of the page content that will shrink if the panel is a slide in.
622
578
  * This prop is required when using the `slideIn` variant of the side panel.
623
579
  */
624
- selectorPageContent: PropTypes.string.isRequired.if(function (_ref8) {
625
- var slideIn = _ref8.slideIn;
580
+ selectorPageContent: PropTypes.string.isRequired.if(function (_ref7) {
581
+ var slideIn = _ref7.slideIn;
626
582
  return slideIn;
627
583
  }),
628
584
  /**
@@ -649,8 +605,8 @@ SidePanel.propTypes = {
649
605
  /**
650
606
  * Sets the title text
651
607
  */
652
- title: PropTypes.string.isRequired.if(function (_ref9) {
653
- var labelText = _ref9.labelText;
608
+ title: PropTypes.string.isRequired.if(function (_ref8) {
609
+ var labelText = _ref8.labelText;
654
610
  return labelText;
655
611
  })
656
612
  };
@@ -4,11 +4,11 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
4
4
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
5
5
  var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowType", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags", "containingElementRef", "measurementOffset"],
6
6
  _excluded2 = ["label", "id"],
7
- _excluded3 = ["label"];
7
+ _excluded3 = ["label", "onClose"];
8
8
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
9
9
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
10
10
  //
11
- // Copyright IBM Corp. 2020, 2023
11
+ // Copyright IBM Corp. 2020, 2024
12
12
  //
13
13
  // This source code is licensed under the Apache-2.0 license found in the
14
14
  // LICENSE file in the root directory of this source tree.
@@ -81,6 +81,10 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
81
81
  sizingTags = _useState10[0],
82
82
  setSizingTags = _useState10[1];
83
83
  var overflowTag = useRef(null);
84
+ var _useState11 = useState(false),
85
+ _useState12 = _slicedToArray(_useState11, 2),
86
+ popoverOpen = _useState12[0],
87
+ setPopoverOpen = _useState12[1];
84
88
  var handleShowAllClick = function handleShowAllClick() {
85
89
  setShowAllModalOpen(true);
86
90
  };
@@ -104,13 +108,23 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
104
108
  }) : []);
105
109
  setSizingTags(newSizingTags);
106
110
  }, [tags]);
111
+ var handleTagOnClose = useCallback(function (onClose, index) {
112
+ onClose === null || onClose === void 0 || onClose();
113
+ if (index <= displayCount - 1) {
114
+ setPopoverOpen(false);
115
+ }
116
+ }, [displayCount]);
107
117
  useEffect(function () {
108
118
  // create visible and overflow tags
109
119
  var newDisplayedTags = tags && tags.length > 0 ? tags.map(function (_ref3, index) {
110
120
  var label = _ref3.label,
121
+ _onClose = _ref3.onClose,
111
122
  other = _objectWithoutProperties(_ref3, _excluded3);
112
123
  return /*#__PURE__*/React.createElement(Tag, _extends({}, other, {
113
- key: "displayed-tag-".concat(index)
124
+ key: "displayed-tag-".concat(index),
125
+ onClose: function onClose() {
126
+ return handleTagOnClose(_onClose, index);
127
+ }
114
128
  }), label);
115
129
  }) : [];
116
130
 
@@ -133,10 +147,12 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
133
147
  overflowType: overflowType,
134
148
  showAllTagsLabel: showAllTagsLabel,
135
149
  key: "displayed-tag-overflow",
136
- ref: overflowTag
150
+ ref: overflowTag,
151
+ popoverOpen: popoverOpen,
152
+ setPopoverOpen: setPopoverOpen
137
153
  }));
138
154
  setDisplayedTags(newDisplayedTags);
139
- }, [displayCount, overflowAlign, overflowClassName, overflowType, showAllTagsLabel, tags]);
155
+ }, [displayCount, overflowAlign, overflowClassName, overflowType, showAllTagsLabel, tags, popoverOpen, handleTagOnClose]);
140
156
  var checkFullyVisibleTags = useCallback(function () {
141
157
  if (multiline) {
142
158
  return setDisplayCount(maxVisible);
@@ -1,16 +1,15 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
- import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
4
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
5
- var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowTags", "overflowType", "showAllTagsLabel"];
4
+ var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowTags", "overflowType", "showAllTagsLabel", "popoverOpen", "setPopoverOpen"];
6
5
  //
7
- // Copyright IBM Corp. 2021, 2022
6
+ // Copyright IBM Corp. 2021, 2024
8
7
  //
9
8
  // This source code is licensed under the Apache-2.0 license found in the
10
9
  // LICENSE file in the root directory of this source tree.
11
10
  //
12
11
 
13
- import React, { useState, useRef } from 'react';
12
+ import React, { useRef } from 'react';
14
13
  import PropTypes from 'prop-types';
15
14
  import cx from 'classnames';
16
15
  import { Link, Tag, Popover, PopoverContent } from '@carbon/react';
@@ -34,11 +33,9 @@ export var TagSetOverflow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
34
33
  overflowTags = _ref.overflowTags,
35
34
  overflowType = _ref.overflowType,
36
35
  showAllTagsLabel = _ref.showAllTagsLabel,
36
+ popoverOpen = _ref.popoverOpen,
37
+ setPopoverOpen = _ref.setPopoverOpen,
37
38
  rest = _objectWithoutProperties(_ref, _excluded);
38
- var _useState = useState(false),
39
- _useState2 = _slicedToArray(_useState, 2),
40
- popoverOpen = _useState2[0],
41
- setPopoverOpen = _useState2[1];
42
39
  var localRef = useRef();
43
40
  var overflowTagContent = useRef(null);
44
41
  useClickOutside(ref || localRef, function () {
@@ -126,6 +123,14 @@ TagSetOverflow.propTypes = {
126
123
  * Type of rendering displayed inside of the tag overflow component
127
124
  */
128
125
  overflowType: PropTypes.oneOf(['default', 'tag']),
126
+ /**
127
+ * Open state of the popover
128
+ */
129
+ popoverOpen: PropTypes.bool,
130
+ /**
131
+ * Setter function for the popoverOpen state value
132
+ */
133
+ setPopoverOpen: PropTypes.func,
129
134
  /**
130
135
  * label for the overflow show all tags link
131
136
  */
@@ -45,4 +45,5 @@ export { EditUpdateCards } from './EditUpdateCards';
45
45
  export { Checklist } from './Checklist';
46
46
  export { Guidebanner, GuidebannerElement, GuidebannerElementButton, GuidebannerElementLink } from './Guidebanner';
47
47
  export { InlineTip, InlineTipButton, InlineTipLink } from './InlineTip';
48
- export { NonLinearReading } from './NonLinearReading';
48
+ export { NonLinearReading } from './NonLinearReading';
49
+ export { DelimitedList } from './DelimitedList';