@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.
- package/README.md +8 -5
- package/css/index-full-carbon.css +531 -251
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +199 -177
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +243 -189
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +223 -192
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/es/components/Datagrid/Datagrid/DatagridContent.js +8 -3
- package/es/components/Datagrid/Datagrid/DatagridRow.js +6 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +6 -3
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +2 -2
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +30 -72
- package/es/components/Datagrid/useRowIsMouseOver.js +3 -1
- package/es/components/DelimitedList/DelimitedList.docs-page.js +15 -0
- package/es/components/DelimitedList/DelimitedList.js +73 -0
- package/es/components/DelimitedList/index.js +8 -0
- package/es/components/SidePanel/SidePanel.js +145 -189
- package/es/components/TagSet/TagSet.js +21 -5
- package/es/components/TagSet/TagSetOverflow.js +13 -8
- package/es/components/index.js +2 -1
- package/es/global/js/hooks/useResizeObserver.js +5 -2
- package/es/global/js/package-settings.js +1 -0
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +8 -3
- package/lib/components/Datagrid/Datagrid/DatagridRow.js +6 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +6 -3
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +2 -2
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +30 -72
- package/lib/components/Datagrid/useRowIsMouseOver.js +3 -1
- package/lib/components/DelimitedList/DelimitedList.docs-page.js +25 -0
- package/lib/components/DelimitedList/DelimitedList.js +78 -0
- package/lib/components/DelimitedList/index.js +12 -0
- package/lib/components/SidePanel/SidePanel.js +145 -189
- package/lib/components/TagSet/TagSet.js +21 -5
- package/lib/components/TagSet/TagSetOverflow.js +12 -7
- package/lib/components/index.js +8 -1
- package/lib/global/js/hooks/useResizeObserver.js +5 -2
- package/lib/global/js/package-settings.js +1 -0
- package/package.json +9 -8
- package/scss/components/Datagrid/_datagrid.scss +4 -0
- package/scss/components/Datagrid/styles/_datagrid.scss +9 -1
- package/scss/components/Datagrid/styles/_useStickyColumn.scss +2 -0
- package/scss/components/DelimitedList/_carbon-imports.scss +9 -0
- package/scss/components/DelimitedList/_delimited-list.scss +27 -0
- package/scss/components/DelimitedList/_index-with-carbon.scss +9 -0
- package/scss/components/DelimitedList/_index.scss +8 -0
- package/scss/components/SidePanel/_side-panel-variables.scss +5 -1
- package/scss/components/SidePanel/_side-panel.scss +155 -187
- package/scss/components/_index-with-carbon.scss +1 -0
- package/scss/components/_index.scss +1 -0
- 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
|
96
|
-
|
97
|
-
|
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
|
104
|
-
var
|
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
|
-
|
120
|
-
|
121
|
-
var
|
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
|
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,
|
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
|
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(
|
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
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
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
|
-
|
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 (
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
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
|
-
|
245
|
-
|
246
|
-
|
247
|
-
|
216
|
+
/* istanbul ignore next */
|
217
|
+
var handleResize = function handleResize() {
|
218
|
+
checkSetDoAnimateTitle();
|
219
|
+
};
|
248
220
|
|
249
|
-
|
250
|
-
|
251
|
-
|
252
|
-
|
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
|
-
|
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
|
-
|
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,
|
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(
|
369
|
-
var oldActiveNode =
|
370
|
-
currentActiveNode =
|
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 &&
|
318
|
+
if (open && innerContentRef && !slideIn) {
|
373
319
|
wrapFocus({
|
374
|
-
bodyNode:
|
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
|
383
|
-
var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass, "__container"), "".concat(blockClass, "__container--").concat(size), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(
|
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(
|
395
|
-
className: cx("".concat(blockClass, "
|
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
|
-
|
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:
|
388
|
+
ref: closeRef
|
426
389
|
})), subtitle && /*#__PURE__*/React.createElement("p", {
|
427
|
-
className: cx("".concat(blockClass, "__subtitle-text"), _defineProperty(
|
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:
|
430
|
-
}, actionToolbarButtons.map(function (
|
431
|
-
var label =
|
432
|
-
kind =
|
433
|
-
icon =
|
434
|
-
tooltipPosition =
|
435
|
-
tooltipAlignment =
|
436
|
-
leading =
|
437
|
-
disabled =
|
438
|
-
className =
|
439
|
-
onClick =
|
440
|
-
rest = _objectWithoutProperties(
|
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
|
457
|
-
return /*#__PURE__*/React.createElement(
|
458
|
-
|
459
|
-
|
460
|
-
|
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
|
-
|
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:
|
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"),
|
491
|
-
ref:
|
492
|
-
className:
|
493
|
-
},
|
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
|
-
})
|
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:
|
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 (
|
625
|
-
var 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 (
|
653
|
-
var 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,
|
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,
|
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, {
|
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
|
*/
|
package/es/components/index.js
CHANGED
@@ -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';
|