@carbon/ibm-products 2.39.0 → 2.40.1-canary.6
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +45 -37
- 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 +45 -37
- 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 +708 -37
- 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/ConditionBuilder/ConditionBlock/ConditionBlock.js +3 -3
- package/es/components/ConditionBuilder/ConditionBuilder.js +6 -1
- package/es/components/ConditionBuilder/ConditionBuilderAdd/ConditionBuilderAdd.js +3 -3
- package/es/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.js +1 -1
- package/es/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js +2 -2
- package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js +3 -3
- package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.js +1 -1
- package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.js +1 -1
- package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ConditionBuilderItemOption.js +30 -18
- package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemText/ConditionBuilderItemText.js +3 -3
- package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemTime/ConditionBuilderItemTime.js +7 -7
- package/es/components/ConditionBuilder/ConditionConnector/ConditionConnector.js +6 -6
- package/es/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js +11 -11
- package/es/components/ConditionBuilder/utils/checkForHoldingKey.d.ts +1 -0
- package/es/components/ConditionBuilder/utils/checkForHoldingKey.js +16 -0
- package/es/components/ConditionBuilder/utils/handleKeyboardEvents.d.ts +1 -0
- package/es/components/ConditionBuilder/utils/handleKeyboardEvents.js +125 -0
- package/es/components/ConditionBuilder/utils/util.d.ts +1 -1
- package/es/components/ConditionBuilder/utils/util.js +34 -5
- 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/DatagridHeaderRow.js +3 -4
- 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/TagOverflow/TagOverflow.js +35 -20
- package/es/components/TagOverflow/TagOverflowModal.d.ts +3 -1
- package/es/components/TagOverflow/TagOverflowModal.js +14 -20
- package/es/components/TagOverflow/TagOverflowPopover.js +19 -4
- 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/ConditionBuilder/ConditionBlock/ConditionBlock.js +3 -3
- package/lib/components/ConditionBuilder/ConditionBuilder.js +6 -1
- package/lib/components/ConditionBuilder/ConditionBuilderAdd/ConditionBuilderAdd.js +3 -3
- package/lib/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.js +1 -1
- package/lib/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js +2 -2
- package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js +3 -3
- package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.js +1 -1
- package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.js +1 -1
- package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ConditionBuilderItemOption.js +29 -17
- package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemText/ConditionBuilderItemText.js +3 -3
- package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemTime/ConditionBuilderItemTime.js +7 -7
- package/lib/components/ConditionBuilder/ConditionConnector/ConditionConnector.js +6 -6
- package/lib/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js +11 -11
- package/lib/components/ConditionBuilder/utils/checkForHoldingKey.d.ts +1 -0
- package/lib/components/ConditionBuilder/utils/checkForHoldingKey.js +20 -0
- package/lib/components/ConditionBuilder/utils/handleKeyboardEvents.d.ts +1 -0
- package/lib/components/ConditionBuilder/utils/handleKeyboardEvents.js +129 -0
- package/lib/components/ConditionBuilder/utils/util.d.ts +1 -1
- package/lib/components/ConditionBuilder/utils/util.js +36 -4
- 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/DatagridHeaderRow.js +3 -4
- 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/TagOverflow/TagOverflow.js +34 -19
- package/lib/components/TagOverflow/TagOverflowModal.d.ts +3 -1
- package/lib/components/TagOverflow/TagOverflowModal.js +14 -20
- package/lib/components/TagOverflow/TagOverflowPopover.js +19 -4
- 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/ConditionBuilder/styles/_conditionBuilderCondition.scss +4 -4
- package/scss/components/ConditionBuilder/styles/_conditionBuilderItem.scss +34 -34
- package/scss/components/SidePanel/_side-panel-variables.scss +1 -0
- package/scss/components/StringFormatter/_string-formatter.scss +1 -1
- package/scss/components/TagOverflow/_tag-overflow.scss +5 -2
- package/scss/components/_index-with-carbon.scss +1 -0
- package/telemetry.yml +2 -0
@@ -81,7 +81,7 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
81
81
|
_useState2 = _slicedToArray(_useState, 2),
|
82
82
|
metrics = _useState2[0],
|
83
83
|
setMetrics = _useState2[1];
|
84
|
-
var _useState3 = useState(_objectSpread2({}, rest.style)),
|
84
|
+
var _useState3 = useState(_objectSpread2({}, rest === null || rest === void 0 ? void 0 : rest.style)),
|
85
85
|
_useState4 = _slicedToArray(_useState3, 2),
|
86
86
|
pageHeaderStyles = _useState4[0],
|
87
87
|
setPageHeaderStyles = _useState4[1];
|
@@ -89,16 +89,30 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
89
89
|
// refs
|
90
90
|
var localHeaderRef = useRef(null);
|
91
91
|
var headerRef = ref || localHeaderRef;
|
92
|
-
var sizingContainerRef = useRef();
|
92
|
+
var sizingContainerRef = useRef(null);
|
93
93
|
var offsetTopMeasuringRef = useRef(null);
|
94
94
|
|
95
95
|
// state based on props only
|
96
96
|
var hasActionBar = actionBarItems && actionBarItems.length > 0;
|
97
97
|
var hasBreadcrumbRow = !!breadcrumbs || !!actionBarItems;
|
98
|
+
if (tags && (tags === null || tags === void 0 ? void 0 : tags.length) > 10) {
|
99
|
+
if (!allTagsModalSearchLabel) {
|
100
|
+
throw new Error("allTagsModalSearchLabel' is required.");
|
101
|
+
}
|
102
|
+
if (!allTagsModalSearchPlaceholderText) {
|
103
|
+
throw new Error("'allTagsModalSearchPlaceholderText' is required.");
|
104
|
+
}
|
105
|
+
if (!allTagsModalTitle) {
|
106
|
+
throw new Error("'allTagsModalTitle' is required.");
|
107
|
+
}
|
108
|
+
if (!showAllTagsLabel) {
|
109
|
+
throw new Error("'showAllTagsLabel' is required.");
|
110
|
+
}
|
111
|
+
}
|
98
112
|
|
99
113
|
// utility functions
|
100
114
|
var checkUpdateVerticalSpace = function checkUpdateVerticalSpace() {
|
101
|
-
return utilCheckUpdateVerticalSpace(headerRef, offsetTopMeasuringRef, navigation, enableBreadcrumbScroll, hasActionBar, widthIsNarrow, setMetrics);
|
115
|
+
return utilCheckUpdateVerticalSpace(headerRef, offsetTopMeasuringRef, navigation, enableBreadcrumbScroll, hasActionBar || false, widthIsNarrow, setMetrics);
|
102
116
|
};
|
103
117
|
|
104
118
|
// NOTE: The buffer is used to add space between the bottom of the header and the last content
|
@@ -189,15 +203,16 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
189
203
|
checkUpdateVerticalSpace();
|
190
204
|
};
|
191
205
|
var handleCollapseToggle = function handleCollapseToggle() {
|
192
|
-
utilSetCollapsed(!fullyCollapsed, headerRef, metrics.headerOffset, metrics.headerTopValue);
|
206
|
+
utilSetCollapsed(!fullyCollapsed, headerRef, metrics === null || metrics === void 0 ? void 0 : metrics.headerOffset, metrics === null || metrics === void 0 ? void 0 : metrics.headerTopValue);
|
193
207
|
};
|
194
208
|
|
195
209
|
// use effects
|
196
210
|
useEffect(function () {
|
197
211
|
/* istanbul ignore else */
|
198
212
|
if (pageActions !== null && pageActions !== void 0 && pageActions.content) {
|
199
|
-
var
|
200
|
-
|
213
|
+
var _ref5 = pageActions,
|
214
|
+
minWidth = _ref5.minWidth,
|
215
|
+
maxWidth = _ref5.maxWidth;
|
201
216
|
handlePageActionWidthChange({
|
202
217
|
minWidth: minWidth,
|
203
218
|
maxWidth: maxWidth
|
@@ -207,7 +222,9 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
207
222
|
useEffect(function () {
|
208
223
|
// Determine the location of the pageAction buttons
|
209
224
|
/* istanbul ignore next */
|
210
|
-
|
225
|
+
if (metrics !== null && metrics !== void 0 && metrics.titleRowSpaceAbove && metrics !== null && metrics !== void 0 && metrics.pageActionsSpaceAbove) {
|
226
|
+
setPageActionsInBreadcrumbRow(collapseTitle || hasActionBar && scrollYValue > (metrics === null || metrics === void 0 ? void 0 : metrics.titleRowSpaceAbove) || widthIsNarrow && scrollYValue > (metrics === null || metrics === void 0 ? void 0 : metrics.pageActionsSpaceAbove));
|
227
|
+
}
|
211
228
|
}, [hasActionBar, metrics.breadcrumbRowSpaceBelow, metrics.titleRowSpaceAbove, metrics.pageActionsSpaceAbove, collapseTitle, scrollYValue, widthIsNarrow]);
|
212
229
|
useEffect(function () {
|
213
230
|
// Assesses the size of the action bar and page action area and their required
|
@@ -240,15 +257,15 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
240
257
|
// Updates custom CSS props used to manage scroll behavior
|
241
258
|
/* istanbul ignore next */
|
242
259
|
setPageHeaderStyles(function (prev) {
|
243
|
-
return _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "--".concat(blockClass, "--height-px"), "".concat(metrics.headerHeight, "px")), "--".concat(blockClass, "--width-px"), "".concat(metrics.headerWidth, "px")), "--".concat(blockClass, "--header-top"), "".concat(metrics.headerTopValue + metrics.headerOffset, "px")), "--".concat(blockClass, "--breadcrumb-title-visibility"), scrollYValue > 0 ? 'visible' : 'hidden'), "--".concat(blockClass, "--scroll"), "".concat(scrollYValue)), "--".concat(blockClass, "--breadcrumb-title-top"), "".concat(Math.max(0, metrics.breadcrumbTitleHeight + metrics.titleRowSpaceAbove - scrollYValue), "px")), "--".concat(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
|
244
|
-
)))), "--".concat(blockClass, "--breadcrumb-row-width-px"), "".concat(metrics.breadcrumbRowWidth, "px")));
|
260
|
+
return _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "--".concat(blockClass, "--height-px"), "".concat(metrics.headerHeight, "px")), "--".concat(blockClass, "--width-px"), "".concat(metrics.headerWidth, "px")), "--".concat(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(blockClass, "--breadcrumb-title-visibility"), scrollYValue > 0 ? 'visible' : 'hidden'), "--".concat(blockClass, "--scroll"), "".concat(scrollYValue)), "--".concat(blockClass, "--breadcrumb-title-top"), "".concat(metrics.breadcrumbTitleHeight && metrics.titleRowSpaceAbove && Math.max(0, metrics.breadcrumbTitleHeight + metrics.titleRowSpaceAbove - scrollYValue), "px")), "--".concat(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
|
261
|
+
)))), "--".concat(blockClass, "--breadcrumb-row-width-px"), "".concat(metrics === null || metrics === void 0 ? void 0 : metrics.breadcrumbRowWidth, "px")));
|
245
262
|
});
|
246
263
|
}, [headerRef, enableBreadcrumbScroll, metrics, metrics.breadcrumbRowHeight, metrics.breadcrumbRowSpaceBelow, metrics.breadcrumbTitleHeight, metrics.breadcrumbRowWidth, metrics.headerHeight, metrics.headerWidth, metrics.headerOffset, metrics.headerTopValue, metrics.navigationRowHeight, navigation, scrollYValue, tags]);
|
247
264
|
useNearestScroll(headerRef,
|
248
265
|
// on scroll or various layout changes check updates if needed
|
249
266
|
// istanbul ignore next
|
250
|
-
function (
|
251
|
-
var current =
|
267
|
+
function (_ref6) {
|
268
|
+
var current = _ref6.current;
|
252
269
|
setPageHeaderStyles(function (prev) {
|
253
270
|
return _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty({}, "--".concat(blockClass, "--breadcrumb-top"), "".concat(metrics.headerOffset, "px")));
|
254
271
|
});
|
@@ -257,15 +274,15 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
257
274
|
|
258
275
|
// set offset for tagset tooltip
|
259
276
|
/* istanbul ignore next */
|
260
|
-
var tagsetTooltipOffset = fullyCollapsed ? metrics.headerHeight + metrics.headerTopValue + metrics.headerOffset : metrics.headerHeight + metrics.headerOffset;
|
277
|
+
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);
|
261
278
|
|
262
279
|
/* istanbul ignore next */
|
263
280
|
document.documentElement.style.setProperty("--".concat(blockClass, "--tagset-tooltip-position"), fullyCollapsed ? 'fixed' : 'absolute');
|
264
281
|
document.documentElement.style.setProperty("--".concat(blockClass, "--tagset-tooltip-offset"), "".concat(tagsetTooltipOffset, "px"));
|
265
282
|
setScrollYValue(current.scrollY);
|
266
283
|
}, [metrics.headerHeight, metrics.headerTopValue, metrics.headerOffset, enableBreadcrumbScroll]);
|
267
|
-
useWindowResize(function (
|
268
|
-
var current =
|
284
|
+
useWindowResize(function (_ref7) {
|
285
|
+
var current = _ref7.current;
|
269
286
|
// on window resize and other updates some values may have changed
|
270
287
|
checkUpdateVerticalSpace();
|
271
288
|
setWidthIsNarrow(current.innerWidth / 16 < parseInt(breakpoints.md.width)); // small (below medium) media query
|
@@ -277,14 +294,14 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
277
294
|
useEffect(function () {
|
278
295
|
// Determines the appropriate header background opacity based on the header config/height/scroll and the withoutBackground setting
|
279
296
|
var result = withoutBackground ? 0 : 1;
|
280
|
-
if (!result && metrics.headerHeight > 0 && (breadcrumbs || actionBarItems || tags || navigation)) {
|
281
|
-
var startAddingAt = parseFloat(spacing10
|
297
|
+
if (!result && metrics !== null && metrics !== void 0 && metrics.headerHeight && metrics.headerHeight > 0 && (breadcrumbs || actionBarItems || tags || navigation)) {
|
298
|
+
var startAddingAt = parseFloat(spacing10) * parseInt(baseFontSize);
|
282
299
|
var scrollRemaining = metrics.headerHeight - scrollYValue;
|
283
300
|
|
284
301
|
/* don't know how to test resize */
|
285
302
|
/* istanbul ignore if */
|
286
303
|
if (scrollRemaining < startAddingAt) {
|
287
|
-
var distanceAddingOver = startAddingAt - metrics.breadcrumbRowHeight;
|
304
|
+
var distanceAddingOver = startAddingAt - ((metrics === null || metrics === void 0 ? void 0 : metrics.breadcrumbRowHeight) || 0);
|
288
305
|
result = Math.min(1, (startAddingAt - scrollRemaining) / distanceAddingOver);
|
289
306
|
}
|
290
307
|
}
|
@@ -296,15 +313,19 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
296
313
|
// only has toggle if requested and withoutBackground is unset/falsy
|
297
314
|
// NOTE: prop-types isRequired.if for the expand and collapse
|
298
315
|
// icon descriptions depends on the this.
|
299
|
-
setHasCollapseButton(hasCollapseHeaderToggle && !withoutBackground);
|
316
|
+
setHasCollapseButton(hasCollapseHeaderToggle && !withoutBackground || false);
|
300
317
|
}, [withoutBackground, hasCollapseHeaderToggle]);
|
301
318
|
useEffect(function () {
|
302
319
|
// Determine if space is needed in the breadcrumb for a collapse button
|
303
|
-
|
320
|
+
if (hasCollapseButton && !(navigation || tags) && metrics !== null && metrics !== void 0 && metrics.headerHeight) {
|
321
|
+
setSpaceForCollapseButton(true);
|
322
|
+
} else {
|
323
|
+
setSpaceForCollapseButton(false);
|
324
|
+
}
|
304
325
|
}, [hasCollapseButton, navigation, tags, metrics.headerHeight]);
|
305
326
|
var nextToTabsCheck = function nextToTabsCheck() {
|
306
327
|
/* istanbul ignore next */
|
307
|
-
return enableBreadcrumbScroll && !actionBarItems && scrollYValue + metrics.headerTopValue >= 0;
|
328
|
+
return enableBreadcrumbScroll && !actionBarItems && metrics.headerTopValue && scrollYValue + metrics.headerTopValue >= 0;
|
308
329
|
};
|
309
330
|
useEffect(function () {
|
310
331
|
if (collapseHeader === true) {
|
@@ -316,6 +337,18 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
316
337
|
|
317
338
|
// Determine what form of title to display in the breadcrumb
|
318
339
|
var breadcrumbItemForTitle = utilGetBreadcrumbItemForTitle(blockClass, collapseTitle, title);
|
340
|
+
var getBreadcrumbs = function getBreadcrumbs() {
|
341
|
+
if (breadcrumbs && breadcrumbItemForTitle) {
|
342
|
+
return breadcrumbs.concat(breadcrumbItemForTitle);
|
343
|
+
} else {
|
344
|
+
if (breadcrumbItemForTitle) {
|
345
|
+
return [breadcrumbItemForTitle];
|
346
|
+
} else {
|
347
|
+
return breadcrumbs;
|
348
|
+
}
|
349
|
+
}
|
350
|
+
};
|
351
|
+
var displayedBreadcrumbs = getBreadcrumbs();
|
319
352
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
|
320
353
|
className: "".concat(blockClass, "--offset-top-measuring-element"),
|
321
354
|
ref: offsetTopMeasuringRef
|
@@ -335,14 +368,14 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
335
368
|
className: "".concat(blockClass, "__breadcrumb-row--container")
|
336
369
|
}, /*#__PURE__*/React__default.createElement(Column, {
|
337
370
|
className: cx("".concat(blockClass, "__breadcrumb-column"), _defineProperty({}, "".concat(blockClass, "__breadcrumb-column--background"), !!breadcrumbs || hasActionBar || widthIsNarrow))
|
338
|
-
}, breadcrumbs || breadcrumbItemForTitle
|
371
|
+
}, (breadcrumbs || breadcrumbItemForTitle) && /*#__PURE__*/React__default.createElement(BreadcrumbWithOverflow, {
|
339
372
|
className: "".concat(blockClass, "__breadcrumb"),
|
340
373
|
noTrailingSlash: !!title,
|
341
374
|
overflowAriaLabel: breadcrumbOverflowAriaLabel,
|
342
|
-
breadcrumbs:
|
343
|
-
,
|
344
|
-
|
345
|
-
})
|
375
|
+
breadcrumbs: displayedBreadcrumbs,
|
376
|
+
overflowTooltipAlign: breadcrumbOverflowTooltipAlign,
|
377
|
+
maxVisible: undefined
|
378
|
+
})), /*#__PURE__*/React__default.createElement(Column, {
|
346
379
|
className: cx(["".concat(blockClass, "__action-bar-column ").concat(blockClass, "__action-bar-column--background"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__action-bar-column--has-page-actions"), pageActions), "".concat(blockClass, "__action-bar-column--influenced-by-collapse-button"), spaceForCollapseButton)])
|
347
380
|
}, /*#__PURE__*/React__default.createElement("div", {
|
348
381
|
className: "".concat(blockClass, "__action-bar-column-content"),
|
@@ -351,11 +384,11 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
351
384
|
/*#__PURE__*/
|
352
385
|
// Investigate the responsive behavior or this and the title also fix the ActionBar Item and PageAction story css
|
353
386
|
React__default.createElement(React__default.Fragment, null, thePageActions(true, pageActionsInBreadcrumbRow), /*#__PURE__*/React__default.createElement(ActionBar, {
|
354
|
-
menuOptionsClass: cx(actionBarMenuOptionsClass, "".concat(blockClass, "__action-bar-menu-options")),
|
355
|
-
overflowAriaLabel: actionBarOverflowAriaLabel,
|
356
387
|
actions: actionBarItems,
|
357
388
|
className: "".concat(blockClass, "__action-bar"),
|
389
|
+
menuOptionsClass: "".concat(cx(actionBarMenuOptionsClass, "".concat(blockClass, "__action-bar-menu-options"))),
|
358
390
|
onWidthChange: handleActionBarWidthChange,
|
391
|
+
overflowAriaLabel: actionBarOverflowAriaLabel,
|
359
392
|
rightAlign: true
|
360
393
|
})) : widthIsNarrow && thePageActions(true, pageActionsInBreadcrumbRow))))) : null, !collapseTitle && (title || pageActions) ? /*#__PURE__*/React__default.createElement(Row, {
|
361
394
|
className: cx("".concat(blockClass, "__title-row"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__title-row--no-breadcrumb-row"), !hasBreadcrumbRow), "".concat(blockClass, "__title-row--under-action-bar"), hasActionBar || widthIsNarrow), "".concat(blockClass, "__title-row--has-page-actions"), !!pageActions), "".concat(blockClass, "__title-row--sticky"), !!pageActions && !actionBarItems && hasBreadcrumbRow))
|
@@ -386,9 +419,9 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
386
419
|
allTagsModalSearchLabel: allTagsModalSearchLabel,
|
387
420
|
allTagsModalSearchPlaceholderText: allTagsModalSearchPlaceholderText,
|
388
421
|
allTagsModalTitle: allTagsModalTitle,
|
389
|
-
showAllTagsLabel: showAllTagsLabel,
|
390
422
|
tags: tags,
|
391
|
-
overflowClassName: "".concat(blockClass, "__navigation-tags-overflow")
|
423
|
+
overflowClassName: "".concat(blockClass, "__navigation-tags-overflow"),
|
424
|
+
showAllTagsLabel: showAllTagsLabel || ''
|
392
425
|
}))) : null),
|
393
426
|
// this navigation pushes the breadcrumb off or settles underneath it depending on enableBreadcrumbScroll
|
394
427
|
navigation ? /*#__PURE__*/React__default.createElement(Row, {
|
@@ -402,7 +435,7 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
402
435
|
allTagsModalSearchLabel: allTagsModalSearchLabel,
|
403
436
|
allTagsModalSearchPlaceholderText: allTagsModalSearchPlaceholderText,
|
404
437
|
allTagsModalTitle: allTagsModalTitle,
|
405
|
-
showAllTagsLabel: showAllTagsLabel,
|
438
|
+
showAllTagsLabel: showAllTagsLabel || '',
|
406
439
|
tags: tags,
|
407
440
|
overflowClassName: "".concat(blockClass, "__navigation-tags-overflow")
|
408
441
|
})) : null) : null), hasCollapseButton ? /*#__PURE__*/React__default.createElement("div", {
|
@@ -425,7 +458,7 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
425
458
|
})) : null));
|
426
459
|
function thePageActions(isBreadcrumbRow, inBreadcrumbRow) {
|
427
460
|
if (pageActions) {
|
428
|
-
var
|
461
|
+
var _content;
|
429
462
|
var _Tag = isBreadcrumbRow ? 'div' : Column;
|
430
463
|
// Only report size change of version action bar is rendered as part of the breadcrumb row.
|
431
464
|
// and when there is an actionBar
|
@@ -434,8 +467,8 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
434
467
|
className: cx("".concat(blockClass, "__page-actions"), _defineProperty({}, "".concat(blockClass, "__page-actions--in-breadcrumb"), inBreadcrumbRow))
|
435
468
|
}, /*#__PURE__*/React__default.createElement("div", {
|
436
469
|
className: cx("".concat(blockClass, "__page-actions-content"))
|
437
|
-
}, (
|
438
|
-
|
470
|
+
}, (_content = pageActions === null || pageActions === void 0 ? void 0 : pageActions.content) !== null && _content !== void 0 ? _content : /*#__PURE__*/React__default.createElement(ButtonSetWithOverflow, {
|
471
|
+
className: "".concat(blockClass, "__button-set-with-overflow"),
|
439
472
|
menuOptionsClass: cx(pageActionsMenuOptionsClass, "".concat(blockClass, "__button-set-menu-options")),
|
440
473
|
onWidthChange: handleWidthChange,
|
441
474
|
buttons: pageActions,
|
@@ -475,6 +508,8 @@ var deprecatedProps = {
|
|
475
508
|
*/
|
476
509
|
hasBackgroundAlways: deprecateProp(PropTypes.bool, 'Property replaced by `withoutBackground`')
|
477
510
|
};
|
511
|
+
|
512
|
+
/**@ts-ignore */
|
478
513
|
PageHeader.tagTypes = tagTypes;
|
479
514
|
PageHeader.propTypes = _objectSpread2({
|
480
515
|
/**
|
@@ -482,6 +517,7 @@ PageHeader.propTypes = _objectSpread2({
|
|
482
517
|
* Each item is specified as an object with the properties of a Carbon Button in icon only form.
|
483
518
|
* Button kind, size, tooltipPosition, tooltipAlignment and type are ignored.
|
484
519
|
*/
|
520
|
+
/**@ts-ignore */
|
485
521
|
actionBarItems: PropTypes.arrayOf(PropTypes.shape(_objectSpread2(_objectSpread2({}, prepareProps(Button.propTypes, ['kind', 'size', 'tooltipPosition', 'tooltipAlignment'])), {}, {
|
486
522
|
iconDescription: PropTypes.string.isRequired,
|
487
523
|
onClick: Button.propTypes.onClick,
|
@@ -497,8 +533,9 @@ PageHeader.propTypes = _objectSpread2({
|
|
497
533
|
*
|
498
534
|
* NOTE: This prop is required if actionBarItems are supplied
|
499
535
|
*/
|
500
|
-
|
501
|
-
|
536
|
+
/**@ts-ignore */
|
537
|
+
actionBarOverflowAriaLabel: PropTypes.string.isRequired.if(function (_ref11) {
|
538
|
+
var actionBarItems = _ref11.actionBarItems;
|
502
539
|
return actionBarItems && actionBarItems.length > 0;
|
503
540
|
}),
|
504
541
|
/**
|
@@ -529,8 +566,9 @@ PageHeader.propTypes = _objectSpread2({
|
|
529
566
|
* If the user supplies breadcrumbs then this property is required.
|
530
567
|
* It is used in an overflow menu when there is insufficient space to display all breadcrumbs inline.
|
531
568
|
*/
|
532
|
-
|
533
|
-
|
569
|
+
/**@ts-ignore */
|
570
|
+
breadcrumbOverflowAriaLabel: PropTypes.string.isRequired.if(function (_ref12) {
|
571
|
+
var breadcrumbs = _ref12.breadcrumbs;
|
534
572
|
return breadcrumbs && breadcrumbs.length > 0;
|
535
573
|
}),
|
536
574
|
/**
|
@@ -548,6 +586,7 @@ PageHeader.propTypes = _objectSpread2({
|
|
548
586
|
* fields in the object will be passed through to the breadcrumb element as
|
549
587
|
* HTML attributes.
|
550
588
|
*/
|
589
|
+
/**@ts-ignore */
|
551
590
|
breadcrumbs: PropTypes.arrayOf(PropTypes.shape({
|
552
591
|
/**
|
553
592
|
* Optional string representing the link location for the BreadcrumbItem
|
@@ -568,8 +607,9 @@ PageHeader.propTypes = _objectSpread2({
|
|
568
607
|
/**
|
569
608
|
* A text version of the `label` for display, required if `label` is not a string.
|
570
609
|
*/
|
571
|
-
|
572
|
-
|
610
|
+
/**@ts-ignore */
|
611
|
+
title: PropTypes.string.isRequired.if(function (_ref13) {
|
612
|
+
var label = _ref13.label;
|
573
613
|
return typeof label !== 'string';
|
574
614
|
})
|
575
615
|
})),
|
@@ -595,9 +635,10 @@ PageHeader.propTypes = _objectSpread2({
|
|
595
635
|
* If `hasCollapseHeaderToggle` is set and `withoutBackground` is unset/falsy then assistive text is
|
596
636
|
* required for both the expend and collapse states of the button component used.
|
597
637
|
*/
|
598
|
-
|
599
|
-
|
600
|
-
|
638
|
+
/**@ts-ignore */
|
639
|
+
collapseHeaderIconDescription: PropTypes.string.isRequired.if(function (_ref14) {
|
640
|
+
var withoutBackground = _ref14.withoutBackground,
|
641
|
+
hasCollapseHeaderToggle = _ref14.hasCollapseHeaderToggle;
|
601
642
|
return !withoutBackground && hasCollapseHeaderToggle;
|
602
643
|
}),
|
603
644
|
/**
|
@@ -614,15 +655,17 @@ PageHeader.propTypes = _objectSpread2({
|
|
614
655
|
* If `hasCollapseHeaderToggle` is set and `withoutBackground` is unset/falsy then assistive text is
|
615
656
|
* required for both the expend and collapse states of the button component used.
|
616
657
|
*/
|
617
|
-
|
618
|
-
|
619
|
-
|
658
|
+
/**@ts-ignore */
|
659
|
+
expandHeaderIconDescription: PropTypes.string.isRequired.if(function (_ref15) {
|
660
|
+
var withoutBackground = _ref15.withoutBackground,
|
661
|
+
hasCollapseHeaderToggle = _ref15.hasCollapseHeaderToggle;
|
620
662
|
return !withoutBackground && hasCollapseHeaderToggle;
|
621
663
|
}),
|
622
664
|
/**
|
623
665
|
* The PageHeader is hosted in a Carbon grid, this value is passed through to the Carbon grid fullWidth prop.
|
624
666
|
* 'xl' is used to override the grid width setting. Can be used with narrowGrid: true to get the largest size.
|
625
667
|
*/
|
668
|
+
/**@ts-ignore */
|
626
669
|
fullWidthGrid: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['xl'])]),
|
627
670
|
/**
|
628
671
|
* Adds a button as the last element of the bottom row which collapses and expands the header.
|
@@ -630,6 +673,7 @@ PageHeader.propTypes = _objectSpread2({
|
|
630
673
|
* NOTE: The header is collapsed by setting the scroll position to hide part of the header.
|
631
674
|
* Collapsing has no effect if there is insufficient content to scroll.
|
632
675
|
*/
|
676
|
+
/**@ts-ignore */
|
633
677
|
hasCollapseHeaderToggle: PropTypes.bool,
|
634
678
|
/**
|
635
679
|
* The PageHeader is hosted in a Carbon grid, this value is passed through to the Carbon grid narrow prop
|
@@ -656,6 +700,7 @@ PageHeader.propTypes = _objectSpread2({
|
|
656
700
|
* - maxWidth: maximum number of pixels the content will grow to
|
657
701
|
* Carbon Button API https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
|
658
702
|
*/
|
703
|
+
/**@ts-ignore */
|
659
704
|
pageActions: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.shape(_objectSpread2(_objectSpread2({}, Button.propTypes), {}, {
|
660
705
|
key: PropTypes.string.isRequired,
|
661
706
|
kind: Button.propTypes.kind,
|
@@ -680,8 +725,9 @@ PageHeader.propTypes = _objectSpread2({
|
|
680
725
|
*
|
681
726
|
* NOTE: This prop is required if pageActions are supplied
|
682
727
|
*/
|
683
|
-
|
684
|
-
|
728
|
+
/**@ts-ignore */
|
729
|
+
pageActionsOverflowLabel: PropTypes.node.isRequired.if(function (_ref16) {
|
730
|
+
var pageActions = _ref16.pageActions;
|
685
731
|
return pageActions && pageActions.length > 0 && !pageActions.content;
|
686
732
|
}),
|
687
733
|
/**
|
@@ -709,6 +755,7 @@ PageHeader.propTypes = _objectSpread2({
|
|
709
755
|
*
|
710
756
|
* See https://react.carbondesignsystem.com/?path=/docs/components-tag--default
|
711
757
|
*/
|
758
|
+
/**@ts-ignore */
|
712
759
|
tags: PropTypes.arrayOf(PropTypes.shape(_objectSpread2(_objectSpread2({}, prepareProps(Tag.propTypes, 'filter')), {}, {
|
713
760
|
label: PropTypes.string.isRequired,
|
714
761
|
// we duplicate this prop to improve the DocGen
|
@@ -721,6 +768,7 @@ PageHeader.propTypes = _objectSpread2({
|
|
721
768
|
* - String
|
722
769
|
* - Object containing
|
723
770
|
* - text: title string
|
771
|
+
* - shortTitle: alternative title for exceptionally long titles
|
724
772
|
* - icon: optional icon
|
725
773
|
* - loading: boolean shows loading indicator if true
|
726
774
|
* - onChange: function to process the live value (React change === HTML Input)
|
@@ -733,9 +781,11 @@ PageHeader.propTypes = _objectSpread2({
|
|
733
781
|
* - breadcrumbContent: version of content used in the breadcrumb on scroll. If not supplied
|
734
782
|
* - asText: String based representation of the title
|
735
783
|
*/
|
784
|
+
/**@ts-ignore */
|
736
785
|
title: PropTypes.oneOfType([PropTypes.shape({
|
737
786
|
// Update docgen if changed
|
738
787
|
text: PropTypes.string.isRequired,
|
788
|
+
shortTitle: PropTypes.string,
|
739
789
|
icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
740
790
|
loading: PropTypes.bool,
|
741
791
|
// inline edit version properties
|
@@ -761,6 +811,7 @@ PageHeader.propTypes = _objectSpread2({
|
|
761
811
|
* Specifies if the PageHeader should appear without a background color, and defaults to the preferred `false` (a background color is shown).
|
762
812
|
* 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.
|
763
813
|
*/
|
814
|
+
/**@ts-ignore */
|
764
815
|
withoutBackground: PropTypes.bool
|
765
816
|
}, deprecatedProps);
|
766
817
|
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;
|
@@ -19,7 +19,7 @@ var blockClass = "".concat(pkg.prefix, "--page-header");
|
|
19
19
|
* Assesses the vertical height of various elements and calls setMetrics with update
|
20
20
|
* @param {{}} headerRef
|
21
21
|
* @param {{}} offsetTopMeasuringRef
|
22
|
-
* @param {
|
22
|
+
* @param {object} navigation
|
23
23
|
* @param {boolean} enableBreadcrumbScroll
|
24
24
|
* @param {boolean} hasActionBar
|
25
25
|
* @param {boolean} widthIsNarrow
|
@@ -182,6 +182,9 @@ var utilGetBreadcrumbItemForTitle = function utilGetBreadcrumbItemForTitle(block
|
|
182
182
|
breadcrumbTitle.isCurrentPage = true;
|
183
183
|
breadcrumbTitle.className = cx(["".concat(blockClass, "__breadcrumb-title"), _defineProperty({}, "".concat(blockClass, "__breadcrumb-title--pre-collapsed"), collapseTitle)]);
|
184
184
|
}
|
185
|
+
if (title.shortTitle) {
|
186
|
+
breadcrumbTitle.shortTitle = title.shortTitle;
|
187
|
+
}
|
185
188
|
return breadcrumbTitle;
|
186
189
|
}
|
187
190
|
};
|
@@ -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
|
*/
|
@@ -23,7 +23,7 @@ import { ActionSet } from '../ActionSet/ActionSet.js';
|
|
23
23
|
import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
|
24
24
|
import { useFocus } from '../../global/js/hooks/useFocus.js';
|
25
25
|
|
26
|
-
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"],
|
26
|
+
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"],
|
27
27
|
_excluded2 = ["label", "kind", "hasIconOnly", "icon", "renderIcon", "tooltipPosition", "tooltipAlignment", "leading", "disabled", "className", "onClick"];
|
28
28
|
var blockClass = "".concat(pkg.prefix, "--side-panel");
|
29
29
|
var componentName = 'SidePanel';
|
@@ -77,6 +77,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
77
77
|
slug = _ref.slug,
|
78
78
|
subtitle = _ref.subtitle,
|
79
79
|
title = _ref.title,
|
80
|
+
launcherButtonRef = _ref.launcherButtonRef,
|
80
81
|
rest = _objectWithoutProperties(_ref, _excluded);
|
81
82
|
var _useState = useState(false),
|
82
83
|
_useState2 = _slicedToArray(_useState, 2),
|
@@ -108,6 +109,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
108
109
|
firstElement = _useFocus.firstElement,
|
109
110
|
keyDownListener = _useFocus.keyDownListener;
|
110
111
|
var panelRefValue = sidePanelRef.current;
|
112
|
+
var previousOpen = usePreviousValue(open);
|
111
113
|
var shouldReduceMotion = useReducedMotion();
|
112
114
|
|
113
115
|
// Title animation on scroll related state
|
@@ -179,6 +181,14 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
179
181
|
console.warn("".concat(componentName, ": The prop `labelText` was provided without a `title`. It is required to have a `title` when using the `labelText` prop."));
|
180
182
|
}
|
181
183
|
}, [labelText, title]);
|
184
|
+
useEffect(function () {
|
185
|
+
if (previousOpen && !open && launcherButtonRef) {
|
186
|
+
setTimeout(function () {
|
187
|
+
var _launcherButtonRef$cu;
|
188
|
+
launcherButtonRef === null || launcherButtonRef === void 0 || (_launcherButtonRef$cu = launcherButtonRef.current) === null || _launcherButtonRef$cu === void 0 || _launcherButtonRef$cu.focus();
|
189
|
+
}, 0);
|
190
|
+
}
|
191
|
+
}, [launcherButtonRef, open, previousOpen]);
|
182
192
|
var checkSetDoAnimateTitle = function checkSetDoAnimateTitle() {
|
183
193
|
var canDoAnimateTitle = false;
|
184
194
|
if (panelRefValue && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !reducedMotion.matches) {
|
@@ -532,6 +542,11 @@ SidePanel.propTypes = {
|
|
532
542
|
* Sets the label text which will display above the title text
|
533
543
|
*/
|
534
544
|
labelText: PropTypes.string,
|
545
|
+
/**
|
546
|
+
* Provide a ref to return focus to once the modal is closed.
|
547
|
+
*/
|
548
|
+
/**@ts-ignore */
|
549
|
+
launcherButtonRef: PropTypes.any,
|
535
550
|
/**
|
536
551
|
* Sets the icon description for the navigation back icon button
|
537
552
|
*/
|
@@ -581,7 +596,7 @@ SidePanel.propTypes = {
|
|
581
596
|
* Sets the size of the side panel
|
582
597
|
*/
|
583
598
|
/**@ts-ignore*/
|
584
|
-
size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', '2xl']),
|
599
|
+
size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', '2xl']),
|
585
600
|
/**
|
586
601
|
* Determines if this panel slides in
|
587
602
|
*/
|
@@ -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 {};
|
@@ -14,7 +14,6 @@ import { prepareProps } from '../../global/js/utils/props-helper.js';
|
|
14
14
|
import { AddSelect } from '../AddSelect/AddSelect.js';
|
15
15
|
|
16
16
|
var componentName = 'SingleAddSelect';
|
17
|
-
|
18
17
|
/**
|
19
18
|
* Used to add or select one or more items from larger lists or hierarchies.
|
20
19
|
*/
|
@@ -30,6 +29,7 @@ SingleAddSelect.propTypes = {
|
|
30
29
|
/**
|
31
30
|
* optional class name
|
32
31
|
*/
|
32
|
+
/**@ts-ignore */
|
33
33
|
className: PropTypes.string,
|
34
34
|
/**
|
35
35
|
* text description that appears under the title
|
@@ -47,6 +47,7 @@ SingleAddSelect.propTypes = {
|
|
47
47
|
* object that contains the item data. for more information reference the
|
48
48
|
* "Structuring items" section in the docs tab
|
49
49
|
*/
|
50
|
+
/**@ts-ignore */
|
50
51
|
items: PropTypes.shape({
|
51
52
|
entries: PropTypes.arrayOf(PropTypes.shape({
|
52
53
|
children: PropTypes.object,
|