@carbon/ibm-products 1.10.0 → 1.11.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +76 -30
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +3 -3
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +10 -4
- 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 +76 -30
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +3 -3
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +76 -30
- package/css/index.css.map +1 -1
- package/css/index.min.css +3 -3
- package/css/index.min.css.map +1 -1
- package/es/components/AddSelect/AddSelect.js +88 -87
- package/es/components/AddSelect/AddSelectColumn.js +143 -6
- package/es/components/AddSelect/AddSelectSidebar.js +1 -14
- package/es/components/AddSelect/add-select-utils.js +64 -0
- package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +2 -1
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +255 -140
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +37 -38
- package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +55 -6
- package/es/components/DataSpreadsheet/hooks/useMoveActiveCell.js +27 -0
- package/es/components/DataSpreadsheet/hooks/useResetSpreadsheetFocus.js +28 -0
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js +41 -0
- package/es/components/DataSpreadsheet/{checkActiveHeaderCell.js → utils/checkActiveHeaderCell.js} +1 -1
- package/es/components/DataSpreadsheet/{createActiveCellFn.js → utils/createActiveCellFn.js} +20 -9
- package/es/components/DataSpreadsheet/{createCellSelectionArea.js → utils/createCellSelectionArea.js} +8 -4
- package/es/components/DataSpreadsheet/{generateData.js → utils/generateData.js} +6 -0
- package/es/components/DataSpreadsheet/{getCellSize.js → utils/getCellSize.js} +0 -0
- package/es/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +46 -0
- package/es/components/DataSpreadsheet/utils/handleMultipleKeys.js +82 -0
- package/es/components/DataSpreadsheet/utils/removeCellSelections.js +30 -0
- package/es/components/InlineEdit/InlineEdit.js +49 -8
- package/es/components/OptionsTile/OptionsTile.js +20 -20
- package/es/components/OptionsTile/index.js +1 -1
- package/es/components/PageHeader/PageHeader.js +35 -32
- package/es/components/PageHeader/PageHeaderTitle.js +2 -1
- package/es/components/PageHeader/PageHeaderUtils.js +21 -22
- package/lib/components/AddSelect/AddSelect.js +91 -87
- package/lib/components/AddSelect/AddSelectColumn.js +144 -4
- package/lib/components/AddSelect/AddSelectSidebar.js +7 -14
- package/lib/components/AddSelect/add-select-utils.js +78 -0
- package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +2 -1
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +263 -142
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +39 -36
- package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +62 -8
- package/lib/components/DataSpreadsheet/hooks/useMoveActiveCell.js +37 -0
- package/lib/components/DataSpreadsheet/hooks/useResetSpreadsheetFocus.js +39 -0
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js +52 -0
- package/lib/components/DataSpreadsheet/{checkActiveHeaderCell.js → utils/checkActiveHeaderCell.js} +1 -1
- package/lib/components/DataSpreadsheet/{createActiveCellFn.js → utils/createActiveCellFn.js} +20 -9
- package/lib/components/DataSpreadsheet/{createCellSelectionArea.js → utils/createCellSelectionArea.js} +8 -4
- package/lib/components/DataSpreadsheet/{generateData.js → utils/generateData.js} +6 -0
- package/lib/components/DataSpreadsheet/{getCellSize.js → utils/getCellSize.js} +0 -0
- package/lib/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +59 -0
- package/lib/components/DataSpreadsheet/utils/handleMultipleKeys.js +92 -0
- package/lib/components/DataSpreadsheet/utils/removeCellSelections.js +41 -0
- package/lib/components/InlineEdit/InlineEdit.js +52 -10
- package/lib/components/OptionsTile/OptionsTile.js +19 -19
- package/lib/components/PageHeader/PageHeader.js +35 -32
- package/lib/components/PageHeader/PageHeaderTitle.js +2 -1
- package/lib/components/PageHeader/PageHeaderUtils.js +21 -22
- package/package.json +2 -2
- package/scss/components/AddSelect/_add-select.scss +16 -0
- package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss +7 -3
- package/scss/components/CreateSidePanel/_create-side-panel.scss +1 -1
- package/scss/components/CreateSidePanel/_storybook-styles.scss +1 -1
- package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +14 -1
- package/scss/components/EditSidePanel/_edit-side-panel.scss +9 -0
- package/scss/components/EditSidePanel/_storybook-styles.scss +1 -1
- package/scss/components/InlineEdit/_inline-edit.scss +31 -37
- package/scss/components/OptionsTile/_index.scss +1 -1
- package/scss/components/OptionsTile/_options-tile.scss +17 -17
- package/scss/components/OptionsTile/_storybook-styles.scss +4 -4
- package/scss/components/PageHeader/_page-header.scss +3 -2
- package/scss/components/SidePanel/_side-panel.scss +8 -8
@@ -1,8 +1,9 @@
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
3
|
+
import _typeof from "@babel/runtime/helpers/typeof";
|
3
4
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
4
5
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
5
|
-
var _excluded = ["cancelDescription", "className", "disabled", "editAlwaysVisible", "editDescription", "id", "invalid", "invalidText", "labelText", "light", "onCancel", "onSave", "onChange", "placeholder", "saveDescription", "size", "value"];
|
6
|
+
var _excluded = ["buttonTooltipAlignment", "buttonTooltipPosition", "cancelDescription", "className", "disabled", "editAlwaysVisible", "editDescription", "id", "invalid", "invalidText", "labelText", "light", "onCancel", "onSave", "onChange", "placeholder", "saveDescription", "size", "value"];
|
6
7
|
|
7
8
|
/**
|
8
9
|
* Copyright IBM Corp. 2022, 2022
|
@@ -27,10 +28,13 @@ var blockClass = "".concat(pkg.prefix, "--inline-edit");
|
|
27
28
|
var componentName = 'InlineEdit'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
|
28
29
|
|
29
30
|
var defaults = {
|
31
|
+
buttonTooltipAlignment: 'center',
|
32
|
+
buttonTooltipPosition: 'top',
|
30
33
|
light: true,
|
31
34
|
// defaults to true to reflect design
|
32
35
|
size: 'md'
|
33
36
|
};
|
37
|
+
var buttons = ['cancel', 'edit', 'save'];
|
34
38
|
/**
|
35
39
|
* TODO: A description of the component.
|
36
40
|
*/
|
@@ -38,7 +42,9 @@ var defaults = {
|
|
38
42
|
export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
|
39
43
|
var _cx, _refInput$current, _refInput$current$inn, _cx3;
|
40
44
|
|
41
|
-
var
|
45
|
+
var buttonTooltipAlignment = _ref.buttonTooltipAlignment,
|
46
|
+
buttonTooltipPosition = _ref.buttonTooltipPosition,
|
47
|
+
cancelDescription = _ref.cancelDescription,
|
42
48
|
className = _ref.className,
|
43
49
|
disabled = _ref.disabled,
|
44
50
|
editAlwaysVisible = _ref.editAlwaysVisible,
|
@@ -77,7 +83,21 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
|
|
77
83
|
|
78
84
|
var validationText = invalidText; // || warnText;
|
79
85
|
|
80
|
-
var validationIcon = showValidation ? /*#__PURE__*/React.createElement(WarningFilled16, null) : null;
|
86
|
+
var validationIcon = showValidation ? /*#__PURE__*/React.createElement(WarningFilled16, null) : null; // sanitize the tooltip values
|
87
|
+
|
88
|
+
var alignIsObject = _typeof(buttonTooltipAlignment) === 'object';
|
89
|
+
var directionIsObject = _typeof(buttonTooltipPosition) === 'object';
|
90
|
+
var tipPositions = buttons.reduce(function (acc, button) {
|
91
|
+
var _ref2, _ref3;
|
92
|
+
|
93
|
+
var tooltipAlignment = (_ref2 = alignIsObject ? buttonTooltipAlignment[button] : buttonTooltipAlignment) !== null && _ref2 !== void 0 ? _ref2 : defaults.buttonTooltipAlignment;
|
94
|
+
var tooltipPosition = (_ref3 = directionIsObject ? buttonTooltipPosition[button] : buttonTooltipPosition) !== null && _ref3 !== void 0 ? _ref3 : defaults.buttonTooltipPosition;
|
95
|
+
acc[button] = {
|
96
|
+
tooltipAlignment: tooltipAlignment,
|
97
|
+
tooltipPosition: tooltipPosition
|
98
|
+
};
|
99
|
+
return acc;
|
100
|
+
}, {});
|
81
101
|
|
82
102
|
var doSetEditing = function doSetEditing(value) {
|
83
103
|
if (value === false) {
|
@@ -260,14 +280,14 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
|
|
260
280
|
className: cx("".concat(blockClass, "__toolbar"), (_cx3 = {}, _defineProperty(_cx3, "".concat(blockClass, "__toolbar--animation"), toolbarAnimation), _defineProperty(_cx3, "".concat(blockClass, "__toolbar--saveable"), refInput.current && value !== internalValue), _cx3))
|
261
281
|
}, showValidation && /*#__PURE__*/React.createElement("div", {
|
262
282
|
className: "".concat(blockClass, "__validation-icon")
|
263
|
-
}, validationIcon), editing ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
|
283
|
+
}, validationIcon), editing ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, _extends({
|
264
284
|
className: "".concat(blockClass, "__cancel"),
|
265
285
|
kind: "ghost",
|
266
286
|
hasIconOnly: true,
|
267
287
|
iconDescription: cancelDescription,
|
268
288
|
onClick: handleCancel,
|
269
289
|
renderIcon: Close16
|
270
|
-
}), /*#__PURE__*/React.createElement(Button, {
|
290
|
+
}, tipPositions.cancel)), /*#__PURE__*/React.createElement(Button, _extends({
|
271
291
|
className: "".concat(blockClass, "__save"),
|
272
292
|
kind: "ghost",
|
273
293
|
hasIconOnly: true,
|
@@ -275,8 +295,7 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
|
|
275
295
|
onClick: handleSave,
|
276
296
|
renderIcon: Checkmark16,
|
277
297
|
disabled: value === internalValue
|
278
|
-
})) : /*#__PURE__*/React.createElement(Button, {
|
279
|
-
"aria-hidden": "true",
|
298
|
+
}, tipPositions.save))) : /*#__PURE__*/React.createElement(Button, _extends({
|
280
299
|
className: cx("".concat(blockClass, "__edit"), _defineProperty({}, "".concat(blockClass, "__edit--always-visible"), editAlwaysVisible)),
|
281
300
|
kind: "ghost",
|
282
301
|
hasIconOnly: true,
|
@@ -285,7 +304,7 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
|
|
285
304
|
renderIcon: disabled ? EditOff16 : Edit16,
|
286
305
|
disabled: disabled,
|
287
306
|
tabIndex: -1
|
288
|
-
}))), /*#__PURE__*/React.createElement("div", {
|
307
|
+
}, tipPositions.edit)))), /*#__PURE__*/React.createElement("div", {
|
289
308
|
className: cx("".concat(blockClass, "__disabled-cover"))
|
290
309
|
}), showValidation && validationText && validationText.length > 0 && /*#__PURE__*/React.createElement("div", {
|
291
310
|
className: "".concat(blockClass, "__validation-text ").concat(carbon.prefix, "--form-requirement")
|
@@ -301,6 +320,28 @@ InlineEdit.displayName = componentName; // The types and DocGen commentary for t
|
|
301
320
|
// See https://www.npmjs.com/package/prop-types#usage.
|
302
321
|
|
303
322
|
InlineEdit.propTypes = {
|
323
|
+
/**
|
324
|
+
* buttonTooltipAlignment from the standard tooltip. Default center.
|
325
|
+
*
|
326
|
+
* Can be passed either as one of tooltip options or as an object specifying cancel, edit and save separately
|
327
|
+
*/
|
328
|
+
buttonTooltipAlignment: PropTypes.oneOfType([PropTypes.oneOf(['start', 'center', 'end']), PropTypes.shape({
|
329
|
+
cancel: PropTypes.oneOf(['start', 'center', 'end']),
|
330
|
+
edit: PropTypes.oneOf(['start', 'center', 'end']),
|
331
|
+
save: PropTypes.oneOf(['start', 'center', 'end'])
|
332
|
+
})]),
|
333
|
+
|
334
|
+
/**
|
335
|
+
* buttonTooltipPosition from the standard tooltip
|
336
|
+
*
|
337
|
+
* Can be passed either as one of tooltip options or as an object specifying cancel, edit and save separately
|
338
|
+
*/
|
339
|
+
buttonTooltipPosition: PropTypes.oneOfType([PropTypes.oneOf(['top', 'right', 'bottom', 'left']), PropTypes.shape({
|
340
|
+
cancel: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
|
341
|
+
edit: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
|
342
|
+
save: PropTypes.oneOf(['top', 'right', 'bottom', 'left'])
|
343
|
+
})]),
|
344
|
+
|
304
345
|
/**
|
305
346
|
* label for cancel button
|
306
347
|
*/
|
@@ -2,10 +2,10 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
3
3
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
4
4
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
5
|
-
var _excluded = ["children", "className", "enabled", "
|
5
|
+
var _excluded = ["children", "className", "enabled", "invalid", "invalidText", "locked", "lockedText", "onToggle", "open", "size", "summary", "title", "titleId", "warn", "warnText"];
|
6
6
|
|
7
7
|
/**
|
8
|
-
* Copyright IBM Corp. 2021,
|
8
|
+
* Copyright IBM Corp. 2021, 2022
|
9
9
|
*
|
10
10
|
* This source code is licensed under the Apache-2.0 license found in the
|
11
11
|
* LICENSE file in the root directory of this source tree.
|
@@ -38,8 +38,6 @@ export var OptionsTile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
38
38
|
var children = _ref.children,
|
39
39
|
className = _ref.className,
|
40
40
|
enabled = _ref.enabled,
|
41
|
-
heading = _ref.heading,
|
42
|
-
userDefinedHeadingId = _ref.headingId,
|
43
41
|
invalid = _ref.invalid,
|
44
42
|
invalidText = _ref.invalidText,
|
45
43
|
locked = _ref.locked,
|
@@ -49,6 +47,8 @@ export var OptionsTile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
49
47
|
_ref$size = _ref.size,
|
50
48
|
size = _ref$size === void 0 ? defaults.size : _ref$size,
|
51
49
|
summary = _ref.summary,
|
50
|
+
title = _ref.title,
|
51
|
+
userDefinedTitleId = _ref.titleId,
|
52
52
|
warn = _ref.warn,
|
53
53
|
warnText = _ref.warnText,
|
54
54
|
rest = _objectWithoutProperties(_ref, _excluded);
|
@@ -71,7 +71,7 @@ export var OptionsTile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
71
71
|
var detailsRef = useRef(null);
|
72
72
|
var contentRef = useRef(null);
|
73
73
|
var id = uuidv4();
|
74
|
-
var
|
74
|
+
var titleId = userDefinedTitleId !== null && userDefinedTitleId !== void 0 ? userDefinedTitleId : "".concat(id, "-title");
|
75
75
|
var isExpandable = children !== undefined;
|
76
76
|
var isInvalid = invalid;
|
77
77
|
var isWarn = !isInvalid && warn;
|
@@ -199,11 +199,11 @@ export var OptionsTile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
199
199
|
}
|
200
200
|
|
201
201
|
return /*#__PURE__*/React.createElement("div", {
|
202
|
-
className: "".concat(blockClass, "__title")
|
203
|
-
}, /*#__PURE__*/React.createElement("h6", {
|
204
|
-
id: headingId,
|
205
202
|
className: "".concat(blockClass, "__heading")
|
206
|
-
},
|
203
|
+
}, /*#__PURE__*/React.createElement("h6", {
|
204
|
+
id: titleId,
|
205
|
+
className: "".concat(blockClass, "__title")
|
206
|
+
}, title), text && /*#__PURE__*/React.createElement("span", {
|
207
207
|
className: cx(summaryClasses),
|
208
208
|
"aria-hidden": summaryHidden
|
209
209
|
}, Icon && /*#__PURE__*/React.createElement(Icon, null), /*#__PURE__*/React.createElement("span", {
|
@@ -224,7 +224,7 @@ export var OptionsTile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
224
224
|
toggled: enabled,
|
225
225
|
labelA: "",
|
226
226
|
labelB: "",
|
227
|
-
"aria-labelledby":
|
227
|
+
"aria-labelledby": titleId,
|
228
228
|
onToggle: onToggle,
|
229
229
|
size: "sm",
|
230
230
|
disabled: isLocked
|
@@ -271,16 +271,6 @@ OptionsTile.propTypes = {
|
|
271
271
|
*/
|
272
272
|
enabled: PropTypes.bool,
|
273
273
|
|
274
|
-
/**
|
275
|
-
* Provide the heading for this OptionsTile.
|
276
|
-
*/
|
277
|
-
heading: PropTypes.string.isRequired,
|
278
|
-
|
279
|
-
/**
|
280
|
-
* Optionally provide an id which should be used for the heading.
|
281
|
-
*/
|
282
|
-
headingId: PropTypes.string,
|
283
|
-
|
284
274
|
/**
|
285
275
|
* Whether the OptionsTile is in invalid validation state.
|
286
276
|
*/
|
@@ -322,6 +312,16 @@ OptionsTile.propTypes = {
|
|
322
312
|
*/
|
323
313
|
summary: PropTypes.string,
|
324
314
|
|
315
|
+
/**
|
316
|
+
* Provide the title for this OptionsTile.
|
317
|
+
*/
|
318
|
+
title: PropTypes.string.isRequired,
|
319
|
+
|
320
|
+
/**
|
321
|
+
* Optionally provide an id which should be used for the title.
|
322
|
+
*/
|
323
|
+
titleId: PropTypes.string,
|
324
|
+
|
325
325
|
/**
|
326
326
|
* Whether the OptionsTile is in warning validation state.
|
327
327
|
*/
|
@@ -39,7 +39,7 @@ var defaults = {
|
|
39
39
|
narrowGrid: false
|
40
40
|
};
|
41
41
|
export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
42
|
-
var _withoutBackground,
|
42
|
+
var _withoutBackground, _enableBreadcrumbScro, _ref6, _cx2, _ref7, _cx4, _cx7;
|
43
43
|
|
44
44
|
var actionBarItems = _ref.actionBarItems,
|
45
45
|
actionBarMenuOptionsClass = _ref.actionBarMenuOptionsClass,
|
@@ -56,7 +56,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
56
56
|
collapseHeaderIconDescription = _ref.collapseHeaderIconDescription,
|
57
57
|
collapseTitle = _ref.collapseTitle,
|
58
58
|
deprecated_disableBreadcrumbScroll = _ref.disableBreadcrumbScroll,
|
59
|
-
|
59
|
+
enableBreadcrumbScroll = _ref.enableBreadcrumbScroll,
|
60
60
|
expandHeaderIconDescription = _ref.expandHeaderIconDescription,
|
61
61
|
_ref$fullWidthGrid = _ref.fullWidthGrid,
|
62
62
|
fullWidthGrid = _ref$fullWidthGrid === void 0 ? defaults.fullWidthGrid : _ref$fullWidthGrid,
|
@@ -75,8 +75,10 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
75
75
|
rest = _objectWithoutProperties(_ref, _excluded);
|
76
76
|
|
77
77
|
// handle deprecated props - START
|
78
|
-
// if withoutBackground is
|
79
|
-
(_withoutBackground = withoutBackground) !== null && _withoutBackground !== void 0 ? _withoutBackground : withoutBackground = !(deprecated_hasBackgroundAlways !== null && deprecated_hasBackgroundAlways !== void 0 ? deprecated_hasBackgroundAlways : true); //
|
78
|
+
// if withoutBackground is nullish check deprecated_hasBackgroundAlways and default false
|
79
|
+
(_withoutBackground = withoutBackground) !== null && _withoutBackground !== void 0 ? _withoutBackground : withoutBackground = !(deprecated_hasBackgroundAlways !== null && deprecated_hasBackgroundAlways !== void 0 ? deprecated_hasBackgroundAlways : true); // prefer enabled if nullish check deprecated_disableBreadcrumbScroll and default false
|
80
|
+
|
81
|
+
(_enableBreadcrumbScro = enableBreadcrumbScroll) !== null && _enableBreadcrumbScro !== void 0 ? _enableBreadcrumbScro : enableBreadcrumbScroll = !(deprecated_disableBreadcrumbScroll !== null && deprecated_disableBreadcrumbScroll !== void 0 ? deprecated_disableBreadcrumbScroll : true); // handle deprecated props - END
|
80
82
|
|
81
83
|
var _useState = useState({}),
|
82
84
|
_useState2 = _slicedToArray(_useState, 2),
|
@@ -95,8 +97,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
95
97
|
var offsetTopMeasuringRef = useRef(null); // state based on props only
|
96
98
|
|
97
99
|
var hasActionBar = actionBarItems && actionBarItems.length > 0;
|
98
|
-
var hasBreadcrumbRow = !!breadcrumbs || !!actionBarItems;
|
99
|
-
var enableBreadcrumbScroll = (_ref2 = in_enableBreadcrumbScroll !== null && in_enableBreadcrumbScroll !== void 0 ? in_enableBreadcrumbScroll : !deprecated_disableBreadcrumbScroll) !== null && _ref2 !== void 0 ? _ref2 : false; // utility functions
|
100
|
+
var hasBreadcrumbRow = !!breadcrumbs || !!actionBarItems; // utility functions
|
100
101
|
|
101
102
|
var checkUpdateVerticalSpace = function checkUpdateVerticalSpace() {
|
102
103
|
return utilCheckUpdateVerticalSpace(headerRef, offsetTopMeasuringRef, navigation, enableBreadcrumbScroll, hasActionBar, widthIsNarrow, setMetrics);
|
@@ -162,9 +163,9 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
162
163
|
setWidthIsNarrow = _useState26[1]; // handlers
|
163
164
|
|
164
165
|
|
165
|
-
var handleActionBarWidthChange = function handleActionBarWidthChange(
|
166
|
-
var minWidth =
|
167
|
-
maxWidth =
|
166
|
+
var handleActionBarWidthChange = function handleActionBarWidthChange(_ref2) {
|
167
|
+
var minWidth = _ref2.minWidth,
|
168
|
+
maxWidth = _ref2.maxWidth;
|
168
169
|
|
169
170
|
/* don't know how to test resize */
|
170
171
|
|
@@ -177,9 +178,9 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
177
178
|
setActionBarMinWidth(minWidth);
|
178
179
|
};
|
179
180
|
|
180
|
-
var handlePageActionWidthChange = function handlePageActionWidthChange(
|
181
|
-
var minWidth =
|
182
|
-
maxWidth =
|
181
|
+
var handlePageActionWidthChange = function handlePageActionWidthChange(_ref3) {
|
182
|
+
var minWidth = _ref3.minWidth,
|
183
|
+
maxWidth = _ref3.maxWidth;
|
183
184
|
|
184
185
|
/* don't know how to test resize */
|
185
186
|
|
@@ -218,6 +219,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
218
219
|
|
219
220
|
|
220
221
|
useEffect(function () {
|
222
|
+
/* istanbul ignore else */
|
221
223
|
if (pageActions !== null && pageActions !== void 0 && pageActions.content) {
|
222
224
|
var minWidth = pageActions.minWidth,
|
223
225
|
maxWidth = pageActions.maxWidth;
|
@@ -277,8 +279,9 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
277
279
|
});
|
278
280
|
}, [headerRef, enableBreadcrumbScroll, metrics, metrics.breadcrumbRowHeight, metrics.breadcrumbRowSpaceBelow, metrics.breadcrumbTitleHeight, metrics.breadcrumbRowWidth, metrics.headerHeight, metrics.headerWidth, metrics.headerOffset, metrics.headerTopValue, metrics.navigationRowHeight, navigation, scrollYValue, tags]);
|
279
281
|
useNearestScroll(headerRef, // on scroll or various layout changes check updates if needed
|
280
|
-
|
281
|
-
|
282
|
+
// istanbul ignore next
|
283
|
+
function (_ref4) {
|
284
|
+
var current = _ref4.current;
|
282
285
|
setPageHeaderStyles(function (prev) {
|
283
286
|
return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, "--".concat(blockClass, "--breadcrumb-top"), "".concat(metrics.headerOffset, "px")));
|
284
287
|
});
|
@@ -294,8 +297,8 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
294
297
|
document.documentElement.style.setProperty("--".concat(blockClass, "--tagset-tooltip-offset"), "".concat(tagsetTooltipOffset, "px"));
|
295
298
|
setScrollYValue(current.scrollY);
|
296
299
|
}, [metrics.headerHeight, metrics.headerTopValue, metrics.headerOffset, enableBreadcrumbScroll]);
|
297
|
-
useWindowResize(function (
|
298
|
-
var current =
|
300
|
+
useWindowResize(function (_ref5) {
|
301
|
+
var current = _ref5.current;
|
299
302
|
// on window resize and other updates some values may have changed
|
300
303
|
checkUpdateVerticalSpace();
|
301
304
|
setWidthIsNarrow(current.innerWidth < breakpoints.md.width); // small (below medium) media query
|
@@ -361,7 +364,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
361
364
|
className: "".concat(blockClass, "--offset-top-measuring-element"),
|
362
365
|
ref: offsetTopMeasuringRef
|
363
366
|
}), /*#__PURE__*/React.createElement("section", _extends({}, rest, {
|
364
|
-
className: cx([blockClass, "".concat(blockClass, "--no-margins-below-row"), className, (
|
367
|
+
className: cx([blockClass, "".concat(blockClass, "--no-margins-below-row"), className, (_ref6 = {}, _defineProperty(_ref6, "".concat(blockClass, "--has-navigation"), navigation || tags), _defineProperty(_ref6, "".concat(blockClass, "--has-navigation-tags-only"), !navigation && tags), _ref6)]),
|
365
368
|
style: pageHeaderStyles,
|
366
369
|
ref: headerRef
|
367
370
|
}, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(Grid, {
|
@@ -383,7 +386,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
383
386
|
breadcrumbs: breadcrumbs && breadcrumbItemForTitle ? breadcrumbs.concat(breadcrumbItemForTitle) : breadcrumbItemForTitle ? [breadcrumbItemForTitle] : breadcrumbs // breadcrumbs may be null or undefined
|
384
387
|
|
385
388
|
}) : null), /*#__PURE__*/React.createElement(Column, {
|
386
|
-
className: cx(["".concat(blockClass, "__action-bar-column ").concat(blockClass, "__action-bar-column--background"), (
|
389
|
+
className: cx(["".concat(blockClass, "__action-bar-column ").concat(blockClass, "__action-bar-column--background"), (_ref7 = {}, _defineProperty(_ref7, "".concat(blockClass, "__action-bar-column--has-page-actions"), pageActions), _defineProperty(_ref7, "".concat(blockClass, "__action-bar-column--influenced-by-collapse-button"), spaceForCollapseButton), _ref7)])
|
387
390
|
}, /*#__PURE__*/React.createElement("div", {
|
388
391
|
className: "".concat(blockClass, "__action-bar-column-content"),
|
389
392
|
ref: sizingContainerRef
|
@@ -533,8 +536,8 @@ PageHeader.propTypes = _objectSpread({
|
|
533
536
|
*
|
534
537
|
* NOTE: This prop is required if actionBarItems are supplied
|
535
538
|
*/
|
536
|
-
actionBarOverflowAriaLabel: PropTypes.string.isRequired.if(function (
|
537
|
-
var actionBarItems =
|
539
|
+
actionBarOverflowAriaLabel: PropTypes.string.isRequired.if(function (_ref9) {
|
540
|
+
var actionBarItems = _ref9.actionBarItems;
|
538
541
|
return actionBarItems && actionBarItems.length > 0;
|
539
542
|
}),
|
540
543
|
|
@@ -569,8 +572,8 @@ PageHeader.propTypes = _objectSpread({
|
|
569
572
|
* If the user supplies breadcrumbs then this property is required.
|
570
573
|
* It is used in an overflow menu when there is insufficient space to display all breadcrumbs inline.
|
571
574
|
*/
|
572
|
-
breadcrumbOverflowAriaLabel: PropTypes.string.isRequired.if(function (
|
573
|
-
var breadcrumbs =
|
575
|
+
breadcrumbOverflowAriaLabel: PropTypes.string.isRequired.if(function (_ref10) {
|
576
|
+
var breadcrumbs = _ref10.breadcrumbs;
|
574
577
|
return breadcrumbs && breadcrumbs.length > 0;
|
575
578
|
}),
|
576
579
|
|
@@ -609,8 +612,8 @@ PageHeader.propTypes = _objectSpread({
|
|
609
612
|
/**
|
610
613
|
* A text version of the `label` for display, required if `label` is not a string.
|
611
614
|
*/
|
612
|
-
title: PropTypes.string.isRequired.if(function (
|
613
|
-
var label =
|
615
|
+
title: PropTypes.string.isRequired.if(function (_ref11) {
|
616
|
+
var label = _ref11.label;
|
614
617
|
return typeof label !== 'string';
|
615
618
|
})
|
616
619
|
})),
|
@@ -640,9 +643,9 @@ PageHeader.propTypes = _objectSpread({
|
|
640
643
|
* If `hasCollapseHeaderToggle` is set and `withoutBackground` is unset/falsy then assistive text is
|
641
644
|
* required for both the expend and collapse states of the button component used.
|
642
645
|
*/
|
643
|
-
collapseHeaderIconDescription: PropTypes.string.isRequired.if(function (
|
644
|
-
var withoutBackground =
|
645
|
-
hasCollapseHeaderToggle =
|
646
|
+
collapseHeaderIconDescription: PropTypes.string.isRequired.if(function (_ref12) {
|
647
|
+
var withoutBackground = _ref12.withoutBackground,
|
648
|
+
hasCollapseHeaderToggle = _ref12.hasCollapseHeaderToggle;
|
646
649
|
return !withoutBackground && hasCollapseHeaderToggle;
|
647
650
|
}),
|
648
651
|
|
@@ -662,9 +665,9 @@ PageHeader.propTypes = _objectSpread({
|
|
662
665
|
* If `hasCollapseHeaderToggle` is set and `withoutBackground` is unset/falsy then assistive text is
|
663
666
|
* required for both the expend and collapse states of the button component used.
|
664
667
|
*/
|
665
|
-
expandHeaderIconDescription: PropTypes.string.isRequired.if(function (
|
666
|
-
var withoutBackground =
|
667
|
-
hasCollapseHeaderToggle =
|
668
|
+
expandHeaderIconDescription: PropTypes.string.isRequired.if(function (_ref13) {
|
669
|
+
var withoutBackground = _ref13.withoutBackground,
|
670
|
+
hasCollapseHeaderToggle = _ref13.hasCollapseHeaderToggle;
|
668
671
|
return !withoutBackground && hasCollapseHeaderToggle;
|
669
672
|
}),
|
670
673
|
|
@@ -735,8 +738,8 @@ PageHeader.propTypes = _objectSpread({
|
|
735
738
|
*
|
736
739
|
* NOTE: This prop is required if pageActions are supplied
|
737
740
|
*/
|
738
|
-
pageActionsOverflowLabel: PropTypes.node.isRequired.if(function (
|
739
|
-
var pageActions =
|
741
|
+
pageActionsOverflowLabel: PropTypes.node.isRequired.if(function (_ref14) {
|
742
|
+
var pageActions = _ref14.pageActions;
|
740
743
|
return pageActions && pageActions.length > 0 && !pageActions.content;
|
741
744
|
}),
|
742
745
|
|
@@ -55,7 +55,8 @@ export var PageHeaderTitle = function PageHeaderTitle(_ref) {
|
|
55
55
|
onSave: onSave,
|
56
56
|
labelText: editableLabel,
|
57
57
|
revertDescription: revertDescription,
|
58
|
-
saveDescription: saveDescription
|
58
|
+
saveDescription: saveDescription,
|
59
|
+
buttonTooltipPosition: "bottom"
|
59
60
|
}, rest)) : /*#__PURE__*/React.createElement("span", {
|
60
61
|
title: !loading ? asText : null
|
61
62
|
}, text));
|
@@ -75,7 +75,10 @@ export var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(
|
|
75
75
|
var scrollableContainer = scrollableAncestor(headerRef.current);
|
76
76
|
/* istanbul ignore next */
|
77
77
|
|
78
|
-
|
78
|
+
var scrollableContainerTop = scrollableContainer ? scrollableContainer.scrollTop - scrollableContainer.offsetTop : 0; // The header offset calculation is either going to work out at 0 if we have no gap between scrolling container
|
79
|
+
// top and the measuring ref top, or the difference between. It does not change on scroll or resize.
|
80
|
+
|
81
|
+
update.headerOffset = scrollableContainerTop + offsetTopMeasuringRef.current.getBoundingClientRect().top;
|
79
82
|
/* istanbul ignore next */
|
80
83
|
|
81
84
|
update.breadcrumbRowHeight = breadcrumbRowEl ? breadcrumbRowEl.clientHeight : 0;
|
@@ -115,35 +118,31 @@ export var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(
|
|
115
118
|
if (!enableBreadcrumbScroll || !navigation) {
|
116
119
|
// adjust sticky top if no navigation or breadcrumb is to stay on screen
|
117
120
|
update.headerTopValue += update.breadcrumbRowHeight;
|
118
|
-
}
|
121
|
+
} // if (window) {
|
119
122
|
|
120
|
-
if (window) {
|
121
|
-
var val;
|
122
|
-
/* don't know how to test resize */
|
123
123
|
|
124
|
-
|
124
|
+
var val;
|
125
|
+
/* don't know how to test resize */
|
125
126
|
|
126
|
-
|
127
|
-
val = parseFloat(window.getComputedStyle(breadcrumbRowEl).getPropertyValue('margin-bottom'), 10);
|
128
|
-
update.breadcrumbRowSpaceBelow = isNaN(val) ? 0 : val;
|
129
|
-
}
|
130
|
-
/* don't know how to test resize */
|
127
|
+
/* istanbul ignore if */
|
131
128
|
|
132
|
-
|
129
|
+
if (breadcrumbRowEl) {
|
130
|
+
val = parseFloat(window.getComputedStyle(breadcrumbRowEl).getPropertyValue('margin-bottom'), 10);
|
131
|
+
update.breadcrumbRowSpaceBelow = isNaN(val) ? 0 : val;
|
132
|
+
}
|
133
|
+
/* don't know how to test resize */
|
133
134
|
|
135
|
+
/* istanbul ignore if */
|
134
136
|
|
135
|
-
if (titleRowEl) {
|
136
|
-
val = parseFloat(window.getComputedStyle(titleRowEl).getPropertyValue('margin-top'), 10);
|
137
|
-
update.titleRowSpaceAbove = isNaN(val) ? 0 : val;
|
138
137
|
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
138
|
+
if (titleRowEl) {
|
139
|
+
val = parseFloat(window.getComputedStyle(titleRowEl).getPropertyValue('margin-top'), 10);
|
140
|
+
update.titleRowSpaceAbove = isNaN(val) ? 0 : val;
|
141
|
+
|
142
|
+
if (pageActionsEl) {
|
143
|
+
val = parseFloat(window.getComputedStyle(pageActionsEl).getPropertyValue('margin-top'), 10);
|
144
|
+
update.pageActionsSpaceAbove = titleRowEl.clientHeight - pageActionsEl.clientHeight + update.titleRowSpaceAbove - (isNaN(val) ? 0 : val);
|
143
145
|
}
|
144
|
-
} else {
|
145
|
-
update.breadcrumbRowSpaceBelow = 0;
|
146
|
-
update.titleRowSpaceAbove = 0;
|
147
146
|
}
|
148
147
|
|
149
148
|
return _objectSpread(_objectSpread({}, previous), update);
|