@carbon/ibm-products 2.39.0 → 2.40.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +9 -3
- 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 +5 -0
- 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 +9 -3
- 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 +9 -3
- 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/AddSelect/AddSelect.d.ts +44 -2
- package/es/components/AddSelect/AddSelect.js +8 -4
- package/es/components/AddSelect/AddSelectBody.d.ts +44 -2
- package/es/components/AddSelect/AddSelectBody.js +10 -12
- package/es/components/AddSelect/AddSelectSort.d.ts +16 -17
- package/es/components/AddSelect/AddSelectSort.js +5 -5
- package/es/components/AddSelect/types/index.d.ts +44 -0
- package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.d.ts +5 -1
- package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +12 -6
- package/es/components/Card/Card.js +1 -1
- package/es/components/CreateInfluencer/CreateInfluencer.js +1 -1
- package/es/components/CreateTearsheet/CreateTearsheetStep.d.ts +95 -2
- package/es/components/CreateTearsheet/CreateTearsheetStep.js +7 -5
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +4 -3
- package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +5 -0
- package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +5 -1
- package/es/components/ExpressiveCard/ExpressiveCard.d.ts +2 -1
- package/es/components/Guidebanner/Guidebanner.d.ts +62 -2
- package/es/components/Guidebanner/Guidebanner.js +8 -7
- package/es/components/Guidebanner/GuidebannerElement.d.ts +30 -17
- package/es/components/Guidebanner/GuidebannerElement.js +4 -4
- package/es/components/Guidebanner/GuidebannerElementButton.d.ts +29 -15
- package/es/components/Guidebanner/GuidebannerElementButton.js +10 -4
- package/es/components/Guidebanner/GuidebannerElementLink.d.ts +20 -13
- package/es/components/Guidebanner/GuidebannerElementLink.js +3 -3
- package/es/components/InterstitialScreen/InterstitialScreen.js +3 -1
- package/es/components/MultiAddSelect/MultiAddSelect.d.ts +134 -2
- package/es/components/MultiAddSelect/MultiAddSelect.js +2 -1
- package/es/components/NotificationsPanel/NotificationsPanel.js +0 -1
- package/es/components/PageHeader/PageHeader.d.ts +298 -5
- package/es/components/PageHeader/PageHeader.js +98 -47
- package/es/components/PageHeader/PageHeaderUtils.d.ts +1 -1
- package/es/components/PageHeader/PageHeaderUtils.js +4 -1
- package/es/components/SidePanel/SidePanel.d.ts +6 -2
- package/es/components/SidePanel/SidePanel.js +17 -2
- package/es/components/SidePanel/constants.d.ts +1 -0
- package/es/components/SidePanel/constants.js +1 -0
- package/es/components/SingleAddSelect/SingleAddSelect.d.ts +69 -2
- package/es/components/SingleAddSelect/SingleAddSelect.js +2 -1
- package/es/components/Tearsheet/Tearsheet.d.ts +132 -6
- package/es/components/Tearsheet/Tearsheet.js +25 -13
- package/es/components/Tearsheet/TearsheetShell.d.ts +5 -1
- package/es/components/Tearsheet/TearsheetShell.js +26 -4
- package/es/components/WebTerminal/WebTerminal.d.ts +4 -0
- package/es/components/WebTerminal/WebTerminal.js +11 -3
- package/es/global/js/hooks/useFocus.d.ts +3 -1
- package/es/global/js/hooks/useFocus.js +6 -3
- package/es/global/js/hooks/useRetrieveStepData.d.ts +1 -1
- package/es/global/js/hooks/useRetrieveStepData.js +1 -1
- package/lib/components/AddSelect/AddSelect.d.ts +44 -2
- package/lib/components/AddSelect/AddSelect.js +7 -3
- package/lib/components/AddSelect/AddSelectBody.d.ts +44 -2
- package/lib/components/AddSelect/AddSelectBody.js +10 -12
- package/lib/components/AddSelect/AddSelectSort.d.ts +16 -17
- package/lib/components/AddSelect/AddSelectSort.js +5 -5
- package/lib/components/AddSelect/types/index.d.ts +44 -0
- package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.d.ts +5 -1
- package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +12 -6
- package/lib/components/Card/Card.js +1 -1
- package/lib/components/CreateInfluencer/CreateInfluencer.js +1 -1
- package/lib/components/CreateTearsheet/CreateTearsheetStep.d.ts +95 -2
- package/lib/components/CreateTearsheet/CreateTearsheetStep.js +7 -5
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +4 -3
- package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +5 -0
- package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +5 -1
- package/lib/components/ExpressiveCard/ExpressiveCard.d.ts +2 -1
- package/lib/components/Guidebanner/Guidebanner.d.ts +62 -2
- package/lib/components/Guidebanner/Guidebanner.js +8 -7
- package/lib/components/Guidebanner/GuidebannerElement.d.ts +30 -17
- package/lib/components/Guidebanner/GuidebannerElement.js +4 -4
- package/lib/components/Guidebanner/GuidebannerElementButton.d.ts +29 -15
- package/lib/components/Guidebanner/GuidebannerElementButton.js +10 -4
- package/lib/components/Guidebanner/GuidebannerElementLink.d.ts +20 -13
- package/lib/components/Guidebanner/GuidebannerElementLink.js +3 -3
- package/lib/components/InterstitialScreen/InterstitialScreen.js +3 -1
- package/lib/components/MultiAddSelect/MultiAddSelect.d.ts +134 -2
- package/lib/components/MultiAddSelect/MultiAddSelect.js +2 -1
- package/lib/components/NotificationsPanel/NotificationsPanel.js +0 -1
- package/lib/components/PageHeader/PageHeader.d.ts +298 -5
- package/lib/components/PageHeader/PageHeader.js +98 -47
- package/lib/components/PageHeader/PageHeaderUtils.d.ts +1 -1
- package/lib/components/PageHeader/PageHeaderUtils.js +4 -1
- package/lib/components/SidePanel/SidePanel.d.ts +6 -2
- package/lib/components/SidePanel/SidePanel.js +17 -2
- package/lib/components/SidePanel/constants.d.ts +1 -0
- package/lib/components/SidePanel/constants.js +1 -0
- package/lib/components/SingleAddSelect/SingleAddSelect.d.ts +69 -2
- package/lib/components/SingleAddSelect/SingleAddSelect.js +2 -1
- package/lib/components/Tearsheet/Tearsheet.d.ts +132 -6
- package/lib/components/Tearsheet/Tearsheet.js +25 -13
- package/lib/components/Tearsheet/TearsheetShell.d.ts +5 -1
- package/lib/components/Tearsheet/TearsheetShell.js +26 -4
- package/lib/components/WebTerminal/WebTerminal.d.ts +4 -0
- package/lib/components/WebTerminal/WebTerminal.js +11 -3
- package/lib/global/js/hooks/useFocus.d.ts +3 -1
- package/lib/global/js/hooks/useFocus.js +6 -3
- package/lib/global/js/hooks/useRetrieveStepData.d.ts +1 -1
- package/lib/global/js/hooks/useRetrieveStepData.js +1 -1
- package/package.json +3 -3
- package/scss/components/CoachmarkStack/_coachmark-stack.scss +4 -2
- package/scss/components/SidePanel/_side-panel-variables.scss +1 -0
- package/scss/components/StringFormatter/_string-formatter.scss +1 -1
- package/telemetry.yml +2 -0
@@ -90,7 +90,7 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
90
90
|
_useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
|
91
91
|
metrics = _useState2[0],
|
92
92
|
setMetrics = _useState2[1];
|
93
|
-
var _useState3 = React.useState(_rollupPluginBabelHelpers.objectSpread2({}, rest.style)),
|
93
|
+
var _useState3 = React.useState(_rollupPluginBabelHelpers.objectSpread2({}, rest === null || rest === void 0 ? void 0 : rest.style)),
|
94
94
|
_useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
|
95
95
|
pageHeaderStyles = _useState4[0],
|
96
96
|
setPageHeaderStyles = _useState4[1];
|
@@ -98,16 +98,30 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
98
98
|
// refs
|
99
99
|
var localHeaderRef = React.useRef(null);
|
100
100
|
var headerRef = ref || localHeaderRef;
|
101
|
-
var sizingContainerRef = React.useRef();
|
101
|
+
var sizingContainerRef = React.useRef(null);
|
102
102
|
var offsetTopMeasuringRef = React.useRef(null);
|
103
103
|
|
104
104
|
// state based on props only
|
105
105
|
var hasActionBar = actionBarItems && actionBarItems.length > 0;
|
106
106
|
var hasBreadcrumbRow = !!breadcrumbs || !!actionBarItems;
|
107
|
+
if (tags && (tags === null || tags === void 0 ? void 0 : tags.length) > 10) {
|
108
|
+
if (!allTagsModalSearchLabel) {
|
109
|
+
throw new Error("allTagsModalSearchLabel' is required.");
|
110
|
+
}
|
111
|
+
if (!allTagsModalSearchPlaceholderText) {
|
112
|
+
throw new Error("'allTagsModalSearchPlaceholderText' is required.");
|
113
|
+
}
|
114
|
+
if (!allTagsModalTitle) {
|
115
|
+
throw new Error("'allTagsModalTitle' is required.");
|
116
|
+
}
|
117
|
+
if (!showAllTagsLabel) {
|
118
|
+
throw new Error("'showAllTagsLabel' is required.");
|
119
|
+
}
|
120
|
+
}
|
107
121
|
|
108
122
|
// utility functions
|
109
123
|
var checkUpdateVerticalSpace = function checkUpdateVerticalSpace() {
|
110
|
-
return PageHeaderUtils.utilCheckUpdateVerticalSpace(headerRef, offsetTopMeasuringRef, navigation, enableBreadcrumbScroll, hasActionBar, widthIsNarrow, setMetrics);
|
124
|
+
return PageHeaderUtils.utilCheckUpdateVerticalSpace(headerRef, offsetTopMeasuringRef, navigation, enableBreadcrumbScroll, hasActionBar || false, widthIsNarrow, setMetrics);
|
111
125
|
};
|
112
126
|
|
113
127
|
// NOTE: The buffer is used to add space between the bottom of the header and the last content
|
@@ -198,15 +212,16 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
198
212
|
checkUpdateVerticalSpace();
|
199
213
|
};
|
200
214
|
var handleCollapseToggle = function handleCollapseToggle() {
|
201
|
-
PageHeaderUtils.utilSetCollapsed(!fullyCollapsed, headerRef, metrics.headerOffset, metrics.headerTopValue);
|
215
|
+
PageHeaderUtils.utilSetCollapsed(!fullyCollapsed, headerRef, metrics === null || metrics === void 0 ? void 0 : metrics.headerOffset, metrics === null || metrics === void 0 ? void 0 : metrics.headerTopValue);
|
202
216
|
};
|
203
217
|
|
204
218
|
// use effects
|
205
219
|
React.useEffect(function () {
|
206
220
|
/* istanbul ignore else */
|
207
221
|
if (pageActions !== null && pageActions !== void 0 && pageActions.content) {
|
208
|
-
var
|
209
|
-
|
222
|
+
var _ref5 = pageActions,
|
223
|
+
minWidth = _ref5.minWidth,
|
224
|
+
maxWidth = _ref5.maxWidth;
|
210
225
|
handlePageActionWidthChange({
|
211
226
|
minWidth: minWidth,
|
212
227
|
maxWidth: maxWidth
|
@@ -216,7 +231,9 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
216
231
|
React.useEffect(function () {
|
217
232
|
// Determine the location of the pageAction buttons
|
218
233
|
/* istanbul ignore next */
|
219
|
-
|
234
|
+
if (metrics !== null && metrics !== void 0 && metrics.titleRowSpaceAbove && metrics !== null && metrics !== void 0 && metrics.pageActionsSpaceAbove) {
|
235
|
+
setPageActionsInBreadcrumbRow(collapseTitle || hasActionBar && scrollYValue > (metrics === null || metrics === void 0 ? void 0 : metrics.titleRowSpaceAbove) || widthIsNarrow && scrollYValue > (metrics === null || metrics === void 0 ? void 0 : metrics.pageActionsSpaceAbove));
|
236
|
+
}
|
220
237
|
}, [hasActionBar, metrics.breadcrumbRowSpaceBelow, metrics.titleRowSpaceAbove, metrics.pageActionsSpaceAbove, collapseTitle, scrollYValue, widthIsNarrow]);
|
221
238
|
React.useEffect(function () {
|
222
239
|
// Assesses the size of the action bar and page action area and their required
|
@@ -249,15 +266,15 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
249
266
|
// Updates custom CSS props used to manage scroll behavior
|
250
267
|
/* istanbul ignore next */
|
251
268
|
setPageHeaderStyles(function (prev) {
|
252
|
-
return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "--".concat(PageHeaderUtils.blockClass, "--height-px"), "".concat(metrics.headerHeight, "px")), "--".concat(PageHeaderUtils.blockClass, "--width-px"), "".concat(metrics.headerWidth, "px")), "--".concat(PageHeaderUtils.blockClass, "--header-top"), "".concat(metrics.headerTopValue + metrics.headerOffset, "px")), "--".concat(PageHeaderUtils.blockClass, "--breadcrumb-title-visibility"), scrollYValue > 0 ? 'visible' : 'hidden'), "--".concat(PageHeaderUtils.blockClass, "--scroll"), "".concat(scrollYValue)), "--".concat(PageHeaderUtils.blockClass, "--breadcrumb-title-top"), "".concat(Math.max(0, metrics.breadcrumbTitleHeight + metrics.titleRowSpaceAbove - scrollYValue), "px")), "--".concat(PageHeaderUtils.blockClass, "--breadcrumb-title-opacity"), "".concat(Math.min(1, Math.max(0, (scrollYValue - (metrics.titleRowSpaceAbove || 0)) / (metrics.breadcrumbTitleHeight || 1) // don't want to divide by zero
|
253
|
-
)))), "--".concat(PageHeaderUtils.blockClass, "--breadcrumb-row-width-px"), "".concat(metrics.breadcrumbRowWidth, "px")));
|
269
|
+
return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "--".concat(PageHeaderUtils.blockClass, "--height-px"), "".concat(metrics.headerHeight, "px")), "--".concat(PageHeaderUtils.blockClass, "--width-px"), "".concat(metrics.headerWidth, "px")), "--".concat(PageHeaderUtils.blockClass, "--header-top"), "".concat(((metrics === null || metrics === void 0 ? void 0 : metrics.headerTopValue) || 0) + ((metrics === null || metrics === void 0 ? void 0 : metrics.headerOffset) || 0), "px")), "--".concat(PageHeaderUtils.blockClass, "--breadcrumb-title-visibility"), scrollYValue > 0 ? 'visible' : 'hidden'), "--".concat(PageHeaderUtils.blockClass, "--scroll"), "".concat(scrollYValue)), "--".concat(PageHeaderUtils.blockClass, "--breadcrumb-title-top"), "".concat(metrics.breadcrumbTitleHeight && metrics.titleRowSpaceAbove && Math.max(0, metrics.breadcrumbTitleHeight + metrics.titleRowSpaceAbove - scrollYValue), "px")), "--".concat(PageHeaderUtils.blockClass, "--breadcrumb-title-opacity"), "".concat(Math.min(1, Math.max(0, (scrollYValue - (metrics.titleRowSpaceAbove || 0)) / (metrics.breadcrumbTitleHeight || 1) // don't want to divide by zero
|
270
|
+
)))), "--".concat(PageHeaderUtils.blockClass, "--breadcrumb-row-width-px"), "".concat(metrics === null || metrics === void 0 ? void 0 : metrics.breadcrumbRowWidth, "px")));
|
254
271
|
});
|
255
272
|
}, [headerRef, enableBreadcrumbScroll, metrics, metrics.breadcrumbRowHeight, metrics.breadcrumbRowSpaceBelow, metrics.breadcrumbTitleHeight, metrics.breadcrumbRowWidth, metrics.headerHeight, metrics.headerWidth, metrics.headerOffset, metrics.headerTopValue, metrics.navigationRowHeight, navigation, scrollYValue, tags]);
|
256
273
|
useWindowScroll.useNearestScroll(headerRef,
|
257
274
|
// on scroll or various layout changes check updates if needed
|
258
275
|
// istanbul ignore next
|
259
|
-
function (
|
260
|
-
var current =
|
276
|
+
function (_ref6) {
|
277
|
+
var current = _ref6.current;
|
261
278
|
setPageHeaderStyles(function (prev) {
|
262
279
|
return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, _rollupPluginBabelHelpers.defineProperty({}, "--".concat(PageHeaderUtils.blockClass, "--breadcrumb-top"), "".concat(metrics.headerOffset, "px")));
|
263
280
|
});
|
@@ -266,15 +283,15 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
266
283
|
|
267
284
|
// set offset for tagset tooltip
|
268
285
|
/* istanbul ignore next */
|
269
|
-
var tagsetTooltipOffset = fullyCollapsed ? metrics.headerHeight + metrics.headerTopValue + metrics.headerOffset : metrics.headerHeight + metrics.headerOffset;
|
286
|
+
var tagsetTooltipOffset = fullyCollapsed && metrics !== null && metrics !== void 0 && metrics.headerHeight && metrics !== null && metrics !== void 0 && metrics.headerTopValue && metrics !== null && metrics !== void 0 && metrics.headerOffset ? metrics.headerHeight + metrics.headerTopValue + metrics.headerOffset : (metrics.headerHeight || 0) + (metrics.headerOffset || 0);
|
270
287
|
|
271
288
|
/* istanbul ignore next */
|
272
289
|
document.documentElement.style.setProperty("--".concat(PageHeaderUtils.blockClass, "--tagset-tooltip-position"), fullyCollapsed ? 'fixed' : 'absolute');
|
273
290
|
document.documentElement.style.setProperty("--".concat(PageHeaderUtils.blockClass, "--tagset-tooltip-offset"), "".concat(tagsetTooltipOffset, "px"));
|
274
291
|
setScrollYValue(current.scrollY);
|
275
292
|
}, [metrics.headerHeight, metrics.headerTopValue, metrics.headerOffset, enableBreadcrumbScroll]);
|
276
|
-
useWindowResize.useWindowResize(function (
|
277
|
-
var current =
|
293
|
+
useWindowResize.useWindowResize(function (_ref7) {
|
294
|
+
var current = _ref7.current;
|
278
295
|
// on window resize and other updates some values may have changed
|
279
296
|
checkUpdateVerticalSpace();
|
280
297
|
setWidthIsNarrow(current.innerWidth / 16 < parseInt(layout.breakpoints.md.width)); // small (below medium) media query
|
@@ -286,14 +303,14 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
286
303
|
React.useEffect(function () {
|
287
304
|
// Determines the appropriate header background opacity based on the header config/height/scroll and the withoutBackground setting
|
288
305
|
var result = withoutBackground ? 0 : 1;
|
289
|
-
if (!result && metrics.headerHeight > 0 && (breadcrumbs || actionBarItems || tags || navigation)) {
|
290
|
-
var startAddingAt = parseFloat(layout.spacing10
|
306
|
+
if (!result && metrics !== null && metrics !== void 0 && metrics.headerHeight && metrics.headerHeight > 0 && (breadcrumbs || actionBarItems || tags || navigation)) {
|
307
|
+
var startAddingAt = parseFloat(layout.spacing10) * parseInt(layout.baseFontSize);
|
291
308
|
var scrollRemaining = metrics.headerHeight - scrollYValue;
|
292
309
|
|
293
310
|
/* don't know how to test resize */
|
294
311
|
/* istanbul ignore if */
|
295
312
|
if (scrollRemaining < startAddingAt) {
|
296
|
-
var distanceAddingOver = startAddingAt - metrics.breadcrumbRowHeight;
|
313
|
+
var distanceAddingOver = startAddingAt - ((metrics === null || metrics === void 0 ? void 0 : metrics.breadcrumbRowHeight) || 0);
|
297
314
|
result = Math.min(1, (startAddingAt - scrollRemaining) / distanceAddingOver);
|
298
315
|
}
|
299
316
|
}
|
@@ -305,15 +322,19 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
305
322
|
// only has toggle if requested and withoutBackground is unset/falsy
|
306
323
|
// NOTE: prop-types isRequired.if for the expand and collapse
|
307
324
|
// icon descriptions depends on the this.
|
308
|
-
setHasCollapseButton(hasCollapseHeaderToggle && !withoutBackground);
|
325
|
+
setHasCollapseButton(hasCollapseHeaderToggle && !withoutBackground || false);
|
309
326
|
}, [withoutBackground, hasCollapseHeaderToggle]);
|
310
327
|
React.useEffect(function () {
|
311
328
|
// Determine if space is needed in the breadcrumb for a collapse button
|
312
|
-
|
329
|
+
if (hasCollapseButton && !(navigation || tags) && metrics !== null && metrics !== void 0 && metrics.headerHeight) {
|
330
|
+
setSpaceForCollapseButton(true);
|
331
|
+
} else {
|
332
|
+
setSpaceForCollapseButton(false);
|
333
|
+
}
|
313
334
|
}, [hasCollapseButton, navigation, tags, metrics.headerHeight]);
|
314
335
|
var nextToTabsCheck = function nextToTabsCheck() {
|
315
336
|
/* istanbul ignore next */
|
316
|
-
return enableBreadcrumbScroll && !actionBarItems && scrollYValue + metrics.headerTopValue >= 0;
|
337
|
+
return enableBreadcrumbScroll && !actionBarItems && metrics.headerTopValue && scrollYValue + metrics.headerTopValue >= 0;
|
317
338
|
};
|
318
339
|
React.useEffect(function () {
|
319
340
|
if (collapseHeader === true) {
|
@@ -325,6 +346,18 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
325
346
|
|
326
347
|
// Determine what form of title to display in the breadcrumb
|
327
348
|
var breadcrumbItemForTitle = PageHeaderUtils.utilGetBreadcrumbItemForTitle(PageHeaderUtils.blockClass, collapseTitle, title);
|
349
|
+
var getBreadcrumbs = function getBreadcrumbs() {
|
350
|
+
if (breadcrumbs && breadcrumbItemForTitle) {
|
351
|
+
return breadcrumbs.concat(breadcrumbItemForTitle);
|
352
|
+
} else {
|
353
|
+
if (breadcrumbItemForTitle) {
|
354
|
+
return [breadcrumbItemForTitle];
|
355
|
+
} else {
|
356
|
+
return breadcrumbs;
|
357
|
+
}
|
358
|
+
}
|
359
|
+
};
|
360
|
+
var displayedBreadcrumbs = getBreadcrumbs();
|
328
361
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
|
329
362
|
className: "".concat(PageHeaderUtils.blockClass, "--offset-top-measuring-element"),
|
330
363
|
ref: offsetTopMeasuringRef
|
@@ -344,14 +377,14 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
344
377
|
className: "".concat(PageHeaderUtils.blockClass, "__breadcrumb-row--container")
|
345
378
|
}, /*#__PURE__*/React__default["default"].createElement(react.Column, {
|
346
379
|
className: cx__default["default"]("".concat(PageHeaderUtils.blockClass, "__breadcrumb-column"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__breadcrumb-column--background"), !!breadcrumbs || hasActionBar || widthIsNarrow))
|
347
|
-
}, breadcrumbs || breadcrumbItemForTitle
|
380
|
+
}, (breadcrumbs || breadcrumbItemForTitle) && /*#__PURE__*/React__default["default"].createElement(BreadcrumbWithOverflow.BreadcrumbWithOverflow, {
|
348
381
|
className: "".concat(PageHeaderUtils.blockClass, "__breadcrumb"),
|
349
382
|
noTrailingSlash: !!title,
|
350
383
|
overflowAriaLabel: breadcrumbOverflowAriaLabel,
|
351
|
-
breadcrumbs:
|
352
|
-
,
|
353
|
-
|
354
|
-
})
|
384
|
+
breadcrumbs: displayedBreadcrumbs,
|
385
|
+
overflowTooltipAlign: breadcrumbOverflowTooltipAlign,
|
386
|
+
maxVisible: undefined
|
387
|
+
})), /*#__PURE__*/React__default["default"].createElement(react.Column, {
|
355
388
|
className: cx__default["default"](["".concat(PageHeaderUtils.blockClass, "__action-bar-column ").concat(PageHeaderUtils.blockClass, "__action-bar-column--background"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__action-bar-column--has-page-actions"), pageActions), "".concat(PageHeaderUtils.blockClass, "__action-bar-column--influenced-by-collapse-button"), spaceForCollapseButton)])
|
356
389
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
357
390
|
className: "".concat(PageHeaderUtils.blockClass, "__action-bar-column-content"),
|
@@ -360,11 +393,11 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
360
393
|
/*#__PURE__*/
|
361
394
|
// Investigate the responsive behavior or this and the title also fix the ActionBar Item and PageAction story css
|
362
395
|
React__default["default"].createElement(React__default["default"].Fragment, null, thePageActions(true, pageActionsInBreadcrumbRow), /*#__PURE__*/React__default["default"].createElement(ActionBar.ActionBar, {
|
363
|
-
menuOptionsClass: cx__default["default"](actionBarMenuOptionsClass, "".concat(PageHeaderUtils.blockClass, "__action-bar-menu-options")),
|
364
|
-
overflowAriaLabel: actionBarOverflowAriaLabel,
|
365
396
|
actions: actionBarItems,
|
366
397
|
className: "".concat(PageHeaderUtils.blockClass, "__action-bar"),
|
398
|
+
menuOptionsClass: "".concat(cx__default["default"](actionBarMenuOptionsClass, "".concat(PageHeaderUtils.blockClass, "__action-bar-menu-options"))),
|
367
399
|
onWidthChange: handleActionBarWidthChange,
|
400
|
+
overflowAriaLabel: actionBarOverflowAriaLabel,
|
368
401
|
rightAlign: true
|
369
402
|
})) : widthIsNarrow && thePageActions(true, pageActionsInBreadcrumbRow))))) : null, !collapseTitle && (title || pageActions) ? /*#__PURE__*/React__default["default"].createElement(react.Row, {
|
370
403
|
className: cx__default["default"]("".concat(PageHeaderUtils.blockClass, "__title-row"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__title-row--no-breadcrumb-row"), !hasBreadcrumbRow), "".concat(PageHeaderUtils.blockClass, "__title-row--under-action-bar"), hasActionBar || widthIsNarrow), "".concat(PageHeaderUtils.blockClass, "__title-row--has-page-actions"), !!pageActions), "".concat(PageHeaderUtils.blockClass, "__title-row--sticky"), !!pageActions && !actionBarItems && hasBreadcrumbRow))
|
@@ -395,9 +428,9 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
395
428
|
allTagsModalSearchLabel: allTagsModalSearchLabel,
|
396
429
|
allTagsModalSearchPlaceholderText: allTagsModalSearchPlaceholderText,
|
397
430
|
allTagsModalTitle: allTagsModalTitle,
|
398
|
-
showAllTagsLabel: showAllTagsLabel,
|
399
431
|
tags: tags,
|
400
|
-
overflowClassName: "".concat(PageHeaderUtils.blockClass, "__navigation-tags-overflow")
|
432
|
+
overflowClassName: "".concat(PageHeaderUtils.blockClass, "__navigation-tags-overflow"),
|
433
|
+
showAllTagsLabel: showAllTagsLabel || ''
|
401
434
|
}))) : null),
|
402
435
|
// this navigation pushes the breadcrumb off or settles underneath it depending on enableBreadcrumbScroll
|
403
436
|
navigation ? /*#__PURE__*/React__default["default"].createElement(react.Row, {
|
@@ -411,7 +444,7 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
411
444
|
allTagsModalSearchLabel: allTagsModalSearchLabel,
|
412
445
|
allTagsModalSearchPlaceholderText: allTagsModalSearchPlaceholderText,
|
413
446
|
allTagsModalTitle: allTagsModalTitle,
|
414
|
-
showAllTagsLabel: showAllTagsLabel,
|
447
|
+
showAllTagsLabel: showAllTagsLabel || '',
|
415
448
|
tags: tags,
|
416
449
|
overflowClassName: "".concat(PageHeaderUtils.blockClass, "__navigation-tags-overflow")
|
417
450
|
})) : null) : null), hasCollapseButton ? /*#__PURE__*/React__default["default"].createElement("div", {
|
@@ -434,7 +467,7 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
434
467
|
})) : null));
|
435
468
|
function thePageActions(isBreadcrumbRow, inBreadcrumbRow) {
|
436
469
|
if (pageActions) {
|
437
|
-
var
|
470
|
+
var _content;
|
438
471
|
var _Tag = isBreadcrumbRow ? 'div' : react.Column;
|
439
472
|
// Only report size change of version action bar is rendered as part of the breadcrumb row.
|
440
473
|
// and when there is an actionBar
|
@@ -443,8 +476,8 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
443
476
|
className: cx__default["default"]("".concat(PageHeaderUtils.blockClass, "__page-actions"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__page-actions--in-breadcrumb"), inBreadcrumbRow))
|
444
477
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
445
478
|
className: cx__default["default"]("".concat(PageHeaderUtils.blockClass, "__page-actions-content"))
|
446
|
-
}, (
|
447
|
-
|
479
|
+
}, (_content = pageActions === null || pageActions === void 0 ? void 0 : pageActions.content) !== null && _content !== void 0 ? _content : /*#__PURE__*/React__default["default"].createElement(ButtonSetWithOverflow.ButtonSetWithOverflow, {
|
480
|
+
className: "".concat(PageHeaderUtils.blockClass, "__button-set-with-overflow"),
|
448
481
|
menuOptionsClass: cx__default["default"](pageActionsMenuOptionsClass, "".concat(PageHeaderUtils.blockClass, "__button-set-menu-options")),
|
449
482
|
onWidthChange: handleWidthChange,
|
450
483
|
buttons: pageActions,
|
@@ -484,6 +517,8 @@ var deprecatedProps = {
|
|
484
517
|
*/
|
485
518
|
hasBackgroundAlways: propsHelper.deprecateProp(index["default"].bool, 'Property replaced by `withoutBackground`')
|
486
519
|
};
|
520
|
+
|
521
|
+
/**@ts-ignore */
|
487
522
|
exports.PageHeader.tagTypes = tagTypes;
|
488
523
|
exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
|
489
524
|
/**
|
@@ -491,6 +526,7 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
|
|
491
526
|
* Each item is specified as an object with the properties of a Carbon Button in icon only form.
|
492
527
|
* Button kind, size, tooltipPosition, tooltipAlignment and type are ignored.
|
493
528
|
*/
|
529
|
+
/**@ts-ignore */
|
494
530
|
actionBarItems: index["default"].arrayOf(index["default"].shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, propsHelper.prepareProps(react.Button.propTypes, ['kind', 'size', 'tooltipPosition', 'tooltipAlignment'])), {}, {
|
495
531
|
iconDescription: index["default"].string.isRequired,
|
496
532
|
onClick: react.Button.propTypes.onClick,
|
@@ -506,8 +542,9 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
|
|
506
542
|
*
|
507
543
|
* NOTE: This prop is required if actionBarItems are supplied
|
508
544
|
*/
|
509
|
-
|
510
|
-
|
545
|
+
/**@ts-ignore */
|
546
|
+
actionBarOverflowAriaLabel: index["default"].string.isRequired.if(function (_ref11) {
|
547
|
+
var actionBarItems = _ref11.actionBarItems;
|
511
548
|
return actionBarItems && actionBarItems.length > 0;
|
512
549
|
}),
|
513
550
|
/**
|
@@ -538,8 +575,9 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
|
|
538
575
|
* If the user supplies breadcrumbs then this property is required.
|
539
576
|
* It is used in an overflow menu when there is insufficient space to display all breadcrumbs inline.
|
540
577
|
*/
|
541
|
-
|
542
|
-
|
578
|
+
/**@ts-ignore */
|
579
|
+
breadcrumbOverflowAriaLabel: index["default"].string.isRequired.if(function (_ref12) {
|
580
|
+
var breadcrumbs = _ref12.breadcrumbs;
|
543
581
|
return breadcrumbs && breadcrumbs.length > 0;
|
544
582
|
}),
|
545
583
|
/**
|
@@ -557,6 +595,7 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
|
|
557
595
|
* fields in the object will be passed through to the breadcrumb element as
|
558
596
|
* HTML attributes.
|
559
597
|
*/
|
598
|
+
/**@ts-ignore */
|
560
599
|
breadcrumbs: index["default"].arrayOf(index["default"].shape({
|
561
600
|
/**
|
562
601
|
* Optional string representing the link location for the BreadcrumbItem
|
@@ -577,8 +616,9 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
|
|
577
616
|
/**
|
578
617
|
* A text version of the `label` for display, required if `label` is not a string.
|
579
618
|
*/
|
580
|
-
|
581
|
-
|
619
|
+
/**@ts-ignore */
|
620
|
+
title: index["default"].string.isRequired.if(function (_ref13) {
|
621
|
+
var label = _ref13.label;
|
582
622
|
return typeof label !== 'string';
|
583
623
|
})
|
584
624
|
})),
|
@@ -604,9 +644,10 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
|
|
604
644
|
* If `hasCollapseHeaderToggle` is set and `withoutBackground` is unset/falsy then assistive text is
|
605
645
|
* required for both the expend and collapse states of the button component used.
|
606
646
|
*/
|
607
|
-
|
608
|
-
|
609
|
-
|
647
|
+
/**@ts-ignore */
|
648
|
+
collapseHeaderIconDescription: index["default"].string.isRequired.if(function (_ref14) {
|
649
|
+
var withoutBackground = _ref14.withoutBackground,
|
650
|
+
hasCollapseHeaderToggle = _ref14.hasCollapseHeaderToggle;
|
610
651
|
return !withoutBackground && hasCollapseHeaderToggle;
|
611
652
|
}),
|
612
653
|
/**
|
@@ -623,15 +664,17 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
|
|
623
664
|
* If `hasCollapseHeaderToggle` is set and `withoutBackground` is unset/falsy then assistive text is
|
624
665
|
* required for both the expend and collapse states of the button component used.
|
625
666
|
*/
|
626
|
-
|
627
|
-
|
628
|
-
|
667
|
+
/**@ts-ignore */
|
668
|
+
expandHeaderIconDescription: index["default"].string.isRequired.if(function (_ref15) {
|
669
|
+
var withoutBackground = _ref15.withoutBackground,
|
670
|
+
hasCollapseHeaderToggle = _ref15.hasCollapseHeaderToggle;
|
629
671
|
return !withoutBackground && hasCollapseHeaderToggle;
|
630
672
|
}),
|
631
673
|
/**
|
632
674
|
* The PageHeader is hosted in a Carbon grid, this value is passed through to the Carbon grid fullWidth prop.
|
633
675
|
* 'xl' is used to override the grid width setting. Can be used with narrowGrid: true to get the largest size.
|
634
676
|
*/
|
677
|
+
/**@ts-ignore */
|
635
678
|
fullWidthGrid: index["default"].oneOfType([index["default"].bool, index["default"].oneOf(['xl'])]),
|
636
679
|
/**
|
637
680
|
* Adds a button as the last element of the bottom row which collapses and expands the header.
|
@@ -639,6 +682,7 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
|
|
639
682
|
* NOTE: The header is collapsed by setting the scroll position to hide part of the header.
|
640
683
|
* Collapsing has no effect if there is insufficient content to scroll.
|
641
684
|
*/
|
685
|
+
/**@ts-ignore */
|
642
686
|
hasCollapseHeaderToggle: index["default"].bool,
|
643
687
|
/**
|
644
688
|
* The PageHeader is hosted in a Carbon grid, this value is passed through to the Carbon grid narrow prop
|
@@ -665,6 +709,7 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
|
|
665
709
|
* - maxWidth: maximum number of pixels the content will grow to
|
666
710
|
* Carbon Button API https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
|
667
711
|
*/
|
712
|
+
/**@ts-ignore */
|
668
713
|
pageActions: index["default"].oneOfType([index["default"].arrayOf(index["default"].shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, react.Button.propTypes), {}, {
|
669
714
|
key: index["default"].string.isRequired,
|
670
715
|
kind: react.Button.propTypes.kind,
|
@@ -689,8 +734,9 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
|
|
689
734
|
*
|
690
735
|
* NOTE: This prop is required if pageActions are supplied
|
691
736
|
*/
|
692
|
-
|
693
|
-
|
737
|
+
/**@ts-ignore */
|
738
|
+
pageActionsOverflowLabel: index["default"].node.isRequired.if(function (_ref16) {
|
739
|
+
var pageActions = _ref16.pageActions;
|
694
740
|
return pageActions && pageActions.length > 0 && !pageActions.content;
|
695
741
|
}),
|
696
742
|
/**
|
@@ -718,6 +764,7 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
|
|
718
764
|
*
|
719
765
|
* See https://react.carbondesignsystem.com/?path=/docs/components-tag--default
|
720
766
|
*/
|
767
|
+
/**@ts-ignore */
|
721
768
|
tags: index["default"].arrayOf(index["default"].shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, propsHelper.prepareProps(react.Tag.propTypes, 'filter')), {}, {
|
722
769
|
label: index["default"].string.isRequired,
|
723
770
|
// we duplicate this prop to improve the DocGen
|
@@ -730,6 +777,7 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
|
|
730
777
|
* - String
|
731
778
|
* - Object containing
|
732
779
|
* - text: title string
|
780
|
+
* - shortTitle: alternative title for exceptionally long titles
|
733
781
|
* - icon: optional icon
|
734
782
|
* - loading: boolean shows loading indicator if true
|
735
783
|
* - onChange: function to process the live value (React change === HTML Input)
|
@@ -742,9 +790,11 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
|
|
742
790
|
* - breadcrumbContent: version of content used in the breadcrumb on scroll. If not supplied
|
743
791
|
* - asText: String based representation of the title
|
744
792
|
*/
|
793
|
+
/**@ts-ignore */
|
745
794
|
title: index["default"].oneOfType([index["default"].shape({
|
746
795
|
// Update docgen if changed
|
747
796
|
text: index["default"].string.isRequired,
|
797
|
+
shortTitle: index["default"].string,
|
748
798
|
icon: index["default"].oneOfType([index["default"].func, index["default"].object]),
|
749
799
|
loading: index["default"].bool,
|
750
800
|
// inline edit version properties
|
@@ -770,6 +820,7 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
|
|
770
820
|
* Specifies if the PageHeader should appear without a background color, and defaults to the preferred `false` (a background color is shown).
|
771
821
|
* Note that when `true` some parts of the header still gain a background if and when they stick to the top of the PageHeader on scroll.
|
772
822
|
*/
|
823
|
+
/**@ts-ignore */
|
773
824
|
withoutBackground: index["default"].bool
|
774
825
|
}, deprecatedProps);
|
775
826
|
exports.PageHeader.displayName = componentName;
|
@@ -1,5 +1,5 @@
|
|
1
1
|
export const blockClass: string;
|
2
|
-
export function utilCheckUpdateVerticalSpace(headerRef: {}, offsetTopMeasuringRef: {}, navigation:
|
2
|
+
export function utilCheckUpdateVerticalSpace(headerRef: {}, offsetTopMeasuringRef: {}, navigation: object, enableBreadcrumbScroll: boolean, hasActionBar: boolean, widthIsNarrow: boolean, setMetrics: () => any): void;
|
3
3
|
export function utilSetCollapsed(collapse: any, headerRef: any, headerOffset: any, headerTopValue: any): void;
|
4
4
|
export function utilGetBreadcrumbItemForTitle(blockClass: any, collapseTitle: any, title: any): {
|
5
5
|
label: any;
|
@@ -28,7 +28,7 @@ var blockClass = "".concat(settings.pkg.prefix, "--page-header");
|
|
28
28
|
* Assesses the vertical height of various elements and calls setMetrics with update
|
29
29
|
* @param {{}} headerRef
|
30
30
|
* @param {{}} offsetTopMeasuringRef
|
31
|
-
* @param {
|
31
|
+
* @param {object} navigation
|
32
32
|
* @param {boolean} enableBreadcrumbScroll
|
33
33
|
* @param {boolean} hasActionBar
|
34
34
|
* @param {boolean} widthIsNarrow
|
@@ -191,6 +191,9 @@ var utilGetBreadcrumbItemForTitle = function utilGetBreadcrumbItemForTitle(block
|
|
191
191
|
breadcrumbTitle.isCurrentPage = true;
|
192
192
|
breadcrumbTitle.className = cx__default["default"](["".concat(blockClass, "__breadcrumb-title"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__breadcrumb-title--pre-collapsed"), collapseTitle)]);
|
193
193
|
}
|
194
|
+
if (title.shortTitle) {
|
195
|
+
breadcrumbTitle.shortTitle = title.shortTitle;
|
196
|
+
}
|
194
197
|
return breadcrumbTitle;
|
195
198
|
}
|
196
199
|
};
|
@@ -5,7 +5,7 @@
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
6
6
|
*/
|
7
7
|
/// <reference path="../../../src/custom-typings/index.d.ts" />
|
8
|
-
import React, { ReactNode } from 'react';
|
8
|
+
import React, { ReactNode, RefObject } from 'react';
|
9
9
|
import { ButtonProps } from '@carbon/react';
|
10
10
|
type SidePanelBaseProps = {
|
11
11
|
/**
|
@@ -57,6 +57,10 @@ type SidePanelBaseProps = {
|
|
57
57
|
* Sets the label text which will display above the title text
|
58
58
|
*/
|
59
59
|
labelText?: string;
|
60
|
+
/**
|
61
|
+
* Provide a ref to return focus to once the side panel is closed.
|
62
|
+
*/
|
63
|
+
launcherButtonRef?: RefObject<any>;
|
60
64
|
/**
|
61
65
|
* Sets the icon description for the navigation back icon button
|
62
66
|
*/
|
@@ -100,7 +104,7 @@ type SidePanelBaseProps = {
|
|
100
104
|
/**
|
101
105
|
* Sets the size of the side panel
|
102
106
|
*/
|
103
|
-
size: 'xs' | 'sm' | 'md' | 'lg' | '2xl';
|
107
|
+
size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
104
108
|
/**
|
105
109
|
* Determines if this panel slides in
|
106
110
|
*/
|
@@ -32,7 +32,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
32
32
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
33
33
|
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
34
34
|
|
35
|
-
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"],
|
35
|
+
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", "launcherButtonRef"],
|
36
36
|
_excluded2 = ["label", "kind", "hasIconOnly", "icon", "renderIcon", "tooltipPosition", "tooltipAlignment", "leading", "disabled", "className", "onClick"];
|
37
37
|
var blockClass = "".concat(settings.pkg.prefix, "--side-panel");
|
38
38
|
var componentName = 'SidePanel';
|
@@ -86,6 +86,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
86
86
|
slug = _ref.slug,
|
87
87
|
subtitle = _ref.subtitle,
|
88
88
|
title = _ref.title,
|
89
|
+
launcherButtonRef = _ref.launcherButtonRef,
|
89
90
|
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
90
91
|
var _useState = React.useState(false),
|
91
92
|
_useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
|
@@ -117,6 +118,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
117
118
|
firstElement = _useFocus.firstElement,
|
118
119
|
keyDownListener = _useFocus.keyDownListener;
|
119
120
|
var panelRefValue = sidePanelRef.current;
|
121
|
+
var previousOpen = usePreviousValue.usePreviousValue(open);
|
120
122
|
var shouldReduceMotion = framerMotion.useReducedMotion();
|
121
123
|
|
122
124
|
// Title animation on scroll related state
|
@@ -188,6 +190,14 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
188
190
|
console.warn("".concat(componentName, ": The prop `labelText` was provided without a `title`. It is required to have a `title` when using the `labelText` prop."));
|
189
191
|
}
|
190
192
|
}, [labelText, title]);
|
193
|
+
React.useEffect(function () {
|
194
|
+
if (previousOpen && !open && launcherButtonRef) {
|
195
|
+
setTimeout(function () {
|
196
|
+
var _launcherButtonRef$cu;
|
197
|
+
launcherButtonRef === null || launcherButtonRef === void 0 || (_launcherButtonRef$cu = launcherButtonRef.current) === null || _launcherButtonRef$cu === void 0 || _launcherButtonRef$cu.focus();
|
198
|
+
}, 0);
|
199
|
+
}
|
200
|
+
}, [launcherButtonRef, open, previousOpen]);
|
191
201
|
var checkSetDoAnimateTitle = function checkSetDoAnimateTitle() {
|
192
202
|
var canDoAnimateTitle = false;
|
193
203
|
if (panelRefValue && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !reducedMotion.matches) {
|
@@ -541,6 +551,11 @@ exports.SidePanel.propTypes = {
|
|
541
551
|
* Sets the label text which will display above the title text
|
542
552
|
*/
|
543
553
|
labelText: index["default"].string,
|
554
|
+
/**
|
555
|
+
* Provide a ref to return focus to once the modal is closed.
|
556
|
+
*/
|
557
|
+
/**@ts-ignore */
|
558
|
+
launcherButtonRef: index["default"].any,
|
544
559
|
/**
|
545
560
|
* Sets the icon description for the navigation back icon button
|
546
561
|
*/
|
@@ -590,7 +605,7 @@ exports.SidePanel.propTypes = {
|
|
590
605
|
* Sets the size of the side panel
|
591
606
|
*/
|
592
607
|
/**@ts-ignore*/
|
593
|
-
size: index["default"].oneOf(['xs', 'sm', 'md', 'lg', '2xl']),
|
608
|
+
size: index["default"].oneOf(['xs', 'sm', 'md', 'lg', 'xl', '2xl']),
|
594
609
|
/**
|
595
610
|
* Determines if this panel slides in
|
596
611
|
*/
|
@@ -1,5 +1,72 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { Entry } from '../AddSelect/types';
|
3
|
+
interface SingleAddSelectProps {
|
4
|
+
/**
|
5
|
+
* optional class name
|
6
|
+
*/
|
7
|
+
className?: string;
|
8
|
+
/**
|
9
|
+
* text description that appears under the title
|
10
|
+
*/
|
11
|
+
description?: string;
|
12
|
+
/**
|
13
|
+
* label for global search input
|
14
|
+
*/
|
15
|
+
globalSearchLabel?: string;
|
16
|
+
/**
|
17
|
+
* placeholder for global search input
|
18
|
+
*/
|
19
|
+
globalSearchPlaceholder?: string;
|
20
|
+
/**
|
21
|
+
* object that contains the item data. for more information reference the
|
22
|
+
* "Structuring items" section in the docs tab
|
23
|
+
*/
|
24
|
+
items?: {
|
25
|
+
entries: Entry[];
|
26
|
+
};
|
27
|
+
/**
|
28
|
+
* label that display above the list of items
|
29
|
+
*/
|
30
|
+
itemsLabel?: string;
|
31
|
+
/**
|
32
|
+
* text to display when no results are found from the global search
|
33
|
+
*/
|
34
|
+
noResultsDescription?: string;
|
35
|
+
/**
|
36
|
+
* title to display when no results are found from the global search
|
37
|
+
*/
|
38
|
+
noResultsTitle?: string;
|
39
|
+
/**
|
40
|
+
* function to call when the close button clicked
|
41
|
+
*/
|
42
|
+
onClose?: () => void;
|
43
|
+
/**
|
44
|
+
* text for close button
|
45
|
+
*/
|
46
|
+
onCloseButtonText?: string;
|
47
|
+
/**
|
48
|
+
* function to call when the submit button is clicked. returns a selection
|
49
|
+
*/
|
50
|
+
onSubmit?: () => void;
|
51
|
+
/**
|
52
|
+
* text for the submit button
|
53
|
+
*/
|
54
|
+
onSubmitButtonText?: string;
|
55
|
+
/**
|
56
|
+
* specifies if the component is open or not
|
57
|
+
*/
|
58
|
+
open?: boolean;
|
59
|
+
/**
|
60
|
+
* text that displays when displaying filtered items
|
61
|
+
*/
|
62
|
+
searchResultsLabel?: string;
|
63
|
+
/**
|
64
|
+
* header text
|
65
|
+
*/
|
66
|
+
title?: string;
|
67
|
+
}
|
1
68
|
/**
|
2
69
|
* Used to add or select one or more items from larger lists or hierarchies.
|
3
70
|
*/
|
4
|
-
export let SingleAddSelect: React.ForwardRefExoticComponent<React.RefAttributes<
|
5
|
-
|
71
|
+
export declare let SingleAddSelect: React.ForwardRefExoticComponent<SingleAddSelectProps & React.RefAttributes<HTMLDivElement>>;
|
72
|
+
export {};
|
@@ -22,7 +22,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
22
22
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
23
23
|
|
24
24
|
var componentName = 'SingleAddSelect';
|
25
|
-
|
26
25
|
/**
|
27
26
|
* Used to add or select one or more items from larger lists or hierarchies.
|
28
27
|
*/
|
@@ -38,6 +37,7 @@ exports.SingleAddSelect.propTypes = {
|
|
38
37
|
/**
|
39
38
|
* optional class name
|
40
39
|
*/
|
40
|
+
/**@ts-ignore */
|
41
41
|
className: index["default"].string,
|
42
42
|
/**
|
43
43
|
* text description that appears under the title
|
@@ -55,6 +55,7 @@ exports.SingleAddSelect.propTypes = {
|
|
55
55
|
* object that contains the item data. for more information reference the
|
56
56
|
* "Structuring items" section in the docs tab
|
57
57
|
*/
|
58
|
+
/**@ts-ignore */
|
58
59
|
items: index["default"].shape({
|
59
60
|
entries: index["default"].arrayOf(index["default"].shape({
|
60
61
|
children: index["default"].object,
|