@carbon/ibm-products 1.9.0 → 1.10.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +123 -5628
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +4 -4
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +45 -3424
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +3 -3
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +91 -3894
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +4 -4
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +91 -3895
- package/css/index.css.map +1 -1
- package/css/index.min.css +4 -4
- package/css/index.min.css.map +1 -1
- package/es/components/AddSelect/AddSelect.js +11 -6
- package/es/components/AddSelect/AddSelectColumn.js +44 -7
- package/es/components/ButtonMenu/ButtonMenu.js +1 -1
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +316 -133
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +113 -69
- package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +22 -5
- package/es/components/DataSpreadsheet/checkActiveHeaderCell.js +34 -0
- package/es/components/DataSpreadsheet/createActiveCellFn.js +3 -1
- package/es/components/InlineEdit/InlineEdit.js +11 -21
- package/es/components/OptionsTile/OptionsTile.js +11 -1
- package/es/components/PageHeader/PageHeader.js +48 -40
- package/es/components/PageHeader/PageHeaderUtils.js +3 -7
- package/es/components/TagSet/TagSet.js +12 -3
- package/es/components/UserProfileImage/UserProfileImage.js +2 -1
- package/lib/components/AddSelect/AddSelect.js +11 -6
- package/lib/components/AddSelect/AddSelectColumn.js +55 -13
- package/lib/components/ButtonMenu/ButtonMenu.js +1 -1
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +317 -134
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +112 -70
- package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +24 -5
- package/lib/components/DataSpreadsheet/checkActiveHeaderCell.js +45 -0
- package/lib/components/DataSpreadsheet/createActiveCellFn.js +3 -1
- package/lib/components/InlineEdit/InlineEdit.js +10 -20
- package/lib/components/OptionsTile/OptionsTile.js +11 -1
- package/lib/components/PageHeader/PageHeader.js +47 -40
- package/lib/components/PageHeader/PageHeaderUtils.js +3 -7
- package/lib/components/TagSet/TagSet.js +13 -3
- package/lib/components/UserProfileImage/UserProfileImage.js +2 -1
- package/package.json +14 -14
- package/scss/components/AddSelect/_add-select.scss +27 -14
- package/scss/components/CreateInfluencer/_create-influencer.scss +2 -0
- package/scss/components/CreateModal/_create-modal.scss +1 -0
- package/scss/components/CreateTearsheet/_create-tearsheet.scss +1 -0
- package/scss/components/CreateTearsheetNarrow/_create-tearsheet-narrow.scss +1 -0
- package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +12 -7
- package/scss/components/InlineEdit/_inline-edit.scss +20 -11
- package/scss/components/InlineEdit/_storybook-styles.scss +1 -0
- package/scss/components/LoadingBar/_loading-bar.scss +13 -0
- package/scss/components/NotificationsPanel/_notifications-panel.scss +3 -0
- package/scss/components/PageHeader/_page-header.scss +2 -0
- package/scss/components/SidePanel/_side-panel.scss +11 -4
- package/scss/components/StatusIcon/_status-icon.scss +1 -0
- package/scss/components/UserProfileImage/_user-profile-image.scss +9 -0
- package/scss/components/WebTerminal/_web-terminal.scss +2 -0
@@ -2,7 +2,7 @@ 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 = ["actionBarItems", "actionBarMenuOptionsClass", "actionBarOverflowAriaLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTitle", "hasBackgroundAlways", "breadcrumbOverflowAriaLabel", "breadcrumbs", "children", "className", "collapseHeader", "collapseHeaderIconDescription", "collapseTitle", "disableBreadcrumbScroll", "expandHeaderIconDescription", "fullWidthGrid", "hasCollapseHeaderToggle", "narrowGrid", "navigation", "pageActions", "pageActionsOverflowLabel", "pageActionsMenuOptionsClass", "showAllTagsLabel", "subtitle", "tags", "title", "withoutBackground"];
|
5
|
+
var _excluded = ["actionBarItems", "actionBarMenuOptionsClass", "actionBarOverflowAriaLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTitle", "hasBackgroundAlways", "breadcrumbOverflowAriaLabel", "breadcrumbs", "children", "className", "collapseHeader", "collapseHeaderIconDescription", "collapseTitle", "disableBreadcrumbScroll", "enableBreadcrumbScroll", "expandHeaderIconDescription", "fullWidthGrid", "hasCollapseHeaderToggle", "narrowGrid", "navigation", "pageActions", "pageActionsOverflowLabel", "pageActionsMenuOptionsClass", "showAllTagsLabel", "subtitle", "tags", "title", "withoutBackground"];
|
6
6
|
|
7
7
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
8
8
|
|
@@ -20,6 +20,7 @@ import { layout05, baseFontSize } from '@carbon/layout';
|
|
20
20
|
import cx from 'classnames';
|
21
21
|
import { useResizeDetector } from 'react-resize-detector';
|
22
22
|
import { Grid, Column, Row, Button, Tag } from 'carbon-components-react';
|
23
|
+
import { breakpoints } from '@carbon/layout';
|
23
24
|
import { useWindowResize, useNearestScroll } from '../../global/js/hooks';
|
24
25
|
import { getDevtoolsProps } from '../../global/js/utils/devtools';
|
25
26
|
import { deprecateProp, prepareProps } from '../../global/js/utils/props-helper';
|
@@ -38,7 +39,7 @@ var defaults = {
|
|
38
39
|
narrowGrid: false
|
39
40
|
};
|
40
41
|
export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
41
|
-
var _withoutBackground,
|
42
|
+
var _withoutBackground, _ref2, _ref7, _cx2, _ref8, _cx4, _cx7;
|
42
43
|
|
43
44
|
var actionBarItems = _ref.actionBarItems,
|
44
45
|
actionBarMenuOptionsClass = _ref.actionBarMenuOptionsClass,
|
@@ -54,7 +55,8 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
54
55
|
collapseHeader = _ref.collapseHeader,
|
55
56
|
collapseHeaderIconDescription = _ref.collapseHeaderIconDescription,
|
56
57
|
collapseTitle = _ref.collapseTitle,
|
57
|
-
|
58
|
+
deprecated_disableBreadcrumbScroll = _ref.disableBreadcrumbScroll,
|
59
|
+
in_enableBreadcrumbScroll = _ref.enableBreadcrumbScroll,
|
58
60
|
expandHeaderIconDescription = _ref.expandHeaderIconDescription,
|
59
61
|
_ref$fullWidthGrid = _ref.fullWidthGrid,
|
60
62
|
fullWidthGrid = _ref$fullWidthGrid === void 0 ? defaults.fullWidthGrid : _ref$fullWidthGrid,
|
@@ -93,10 +95,11 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
93
95
|
var offsetTopMeasuringRef = useRef(null); // state based on props only
|
94
96
|
|
95
97
|
var hasActionBar = actionBarItems && actionBarItems.length > 0;
|
96
|
-
var hasBreadcrumbRow = !!breadcrumbs || !!actionBarItems;
|
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
|
97
100
|
|
98
101
|
var checkUpdateVerticalSpace = function checkUpdateVerticalSpace() {
|
99
|
-
return utilCheckUpdateVerticalSpace(headerRef, offsetTopMeasuringRef, navigation,
|
102
|
+
return utilCheckUpdateVerticalSpace(headerRef, offsetTopMeasuringRef, navigation, enableBreadcrumbScroll, hasActionBar, widthIsNarrow, setMetrics);
|
100
103
|
}; // NOTE: The buffer is used to add space between the bottom of the header and the last content
|
101
104
|
// Not pre-collapsed and (subtitle or children)
|
102
105
|
|
@@ -159,9 +162,9 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
159
162
|
setWidthIsNarrow = _useState26[1]; // handlers
|
160
163
|
|
161
164
|
|
162
|
-
var handleActionBarWidthChange = function handleActionBarWidthChange(
|
163
|
-
var minWidth =
|
164
|
-
maxWidth =
|
165
|
+
var handleActionBarWidthChange = function handleActionBarWidthChange(_ref3) {
|
166
|
+
var minWidth = _ref3.minWidth,
|
167
|
+
maxWidth = _ref3.maxWidth;
|
165
168
|
|
166
169
|
/* don't know how to test resize */
|
167
170
|
|
@@ -174,9 +177,9 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
174
177
|
setActionBarMinWidth(minWidth);
|
175
178
|
};
|
176
179
|
|
177
|
-
var handlePageActionWidthChange = function handlePageActionWidthChange(
|
178
|
-
var minWidth =
|
179
|
-
maxWidth =
|
180
|
+
var handlePageActionWidthChange = function handlePageActionWidthChange(_ref4) {
|
181
|
+
var minWidth = _ref4.minWidth,
|
182
|
+
maxWidth = _ref4.maxWidth;
|
180
183
|
|
181
184
|
/* don't know how to test resize */
|
182
185
|
|
@@ -272,10 +275,10 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
272
275
|
return _objectSpread(_objectSpread({}, prev), {}, (_objectSpread3 = {}, _defineProperty(_objectSpread3, "--".concat(blockClass, "--height-px"), "".concat(metrics.headerHeight, "px")), _defineProperty(_objectSpread3, "--".concat(blockClass, "--width-px"), "".concat(metrics.headerWidth, "px")), _defineProperty(_objectSpread3, "--".concat(blockClass, "--header-top"), "".concat(metrics.headerTopValue + metrics.headerOffset, "px")), _defineProperty(_objectSpread3, "--".concat(blockClass, "--breadcrumb-title-visibility"), scrollYValue > 0 ? 'visible' : 'hidden'), _defineProperty(_objectSpread3, "--".concat(blockClass, "--scroll"), "".concat(scrollYValue)), _defineProperty(_objectSpread3, "--".concat(blockClass, "--breadcrumb-title-top"), "".concat(Math.max(0, metrics.breadcrumbTitleHeight + metrics.titleRowSpaceAbove - scrollYValue), "px")), _defineProperty(_objectSpread3, "--".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
|
273
276
|
)))), _defineProperty(_objectSpread3, "--".concat(blockClass, "--breadcrumb-row-width-px"), "".concat(metrics.breadcrumbRowWidth, "px")), _objectSpread3));
|
274
277
|
});
|
275
|
-
}, [headerRef,
|
278
|
+
}, [headerRef, enableBreadcrumbScroll, metrics, metrics.breadcrumbRowHeight, metrics.breadcrumbRowSpaceBelow, metrics.breadcrumbTitleHeight, metrics.breadcrumbRowWidth, metrics.headerHeight, metrics.headerWidth, metrics.headerOffset, metrics.headerTopValue, metrics.navigationRowHeight, navigation, scrollYValue, tags]);
|
276
279
|
useNearestScroll(headerRef, // on scroll or various layout changes check updates if needed
|
277
|
-
function (
|
278
|
-
var current =
|
280
|
+
function (_ref5) {
|
281
|
+
var current = _ref5.current;
|
279
282
|
setPageHeaderStyles(function (prev) {
|
280
283
|
return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, "--".concat(blockClass, "--breadcrumb-top"), "".concat(metrics.headerOffset, "px")));
|
281
284
|
});
|
@@ -290,13 +293,13 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
290
293
|
document.documentElement.style.setProperty("--".concat(blockClass, "--tagset-tooltip-position"), fullyCollapsed ? 'fixed' : 'absolute');
|
291
294
|
document.documentElement.style.setProperty("--".concat(blockClass, "--tagset-tooltip-offset"), "".concat(tagsetTooltipOffset, "px"));
|
292
295
|
setScrollYValue(current.scrollY);
|
293
|
-
}, [metrics.headerHeight, metrics.headerTopValue, metrics.headerOffset,
|
294
|
-
useWindowResize(function (
|
295
|
-
var current =
|
296
|
+
}, [metrics.headerHeight, metrics.headerTopValue, metrics.headerOffset, enableBreadcrumbScroll]);
|
297
|
+
useWindowResize(function (_ref6) {
|
298
|
+
var current = _ref6.current;
|
296
299
|
// on window resize and other updates some values may have changed
|
297
300
|
checkUpdateVerticalSpace();
|
298
|
-
setWidthIsNarrow(current.innerWidth <
|
299
|
-
}, [actionBarItems, children, breadcrumbs,
|
301
|
+
setWidthIsNarrow(current.innerWidth < breakpoints.md.width); // small (below medium) media query
|
302
|
+
}, [actionBarItems, children, breadcrumbs, enableBreadcrumbScroll, navigation, pageActions, subtitle, tags, title]);
|
300
303
|
useEffect(function () {
|
301
304
|
checkUpdateVerticalSpace(); // eslint-disable-next-line react-hooks/exhaustive-deps
|
302
305
|
}, [fullWidthGrid, narrowGrid]);
|
@@ -334,7 +337,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
334
337
|
|
335
338
|
var nextToTabsCheck = function nextToTabsCheck() {
|
336
339
|
/* istanbul ignore next */
|
337
|
-
return
|
340
|
+
return enableBreadcrumbScroll && !actionBarItems && scrollYValue + metrics.headerTopValue >= 0;
|
338
341
|
};
|
339
342
|
|
340
343
|
useEffect(function () {
|
@@ -358,7 +361,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
358
361
|
className: "".concat(blockClass, "--offset-top-measuring-element"),
|
359
362
|
ref: offsetTopMeasuringRef
|
360
363
|
}), /*#__PURE__*/React.createElement("section", _extends({}, rest, {
|
361
|
-
className: cx([blockClass, "".concat(blockClass, "--no-margins-below-row"), className, (
|
364
|
+
className: cx([blockClass, "".concat(blockClass, "--no-margins-below-row"), className, (_ref7 = {}, _defineProperty(_ref7, "".concat(blockClass, "--has-navigation"), navigation || tags), _defineProperty(_ref7, "".concat(blockClass, "--has-navigation-tags-only"), !navigation && tags), _ref7)]),
|
362
365
|
style: pageHeaderStyles,
|
363
366
|
ref: headerRef
|
364
367
|
}, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(Grid, {
|
@@ -380,7 +383,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
380
383
|
breadcrumbs: breadcrumbs && breadcrumbItemForTitle ? breadcrumbs.concat(breadcrumbItemForTitle) : breadcrumbItemForTitle ? [breadcrumbItemForTitle] : breadcrumbs // breadcrumbs may be null or undefined
|
381
384
|
|
382
385
|
}) : null), /*#__PURE__*/React.createElement(Column, {
|
383
|
-
className: cx(["".concat(blockClass, "__action-bar-column ").concat(blockClass, "__action-bar-column--background"), (
|
386
|
+
className: cx(["".concat(blockClass, "__action-bar-column ").concat(blockClass, "__action-bar-column--background"), (_ref8 = {}, _defineProperty(_ref8, "".concat(blockClass, "__action-bar-column--has-page-actions"), pageActions), _defineProperty(_ref8, "".concat(blockClass, "__action-bar-column--influenced-by-collapse-button"), spaceForCollapseButton), _ref8)])
|
384
387
|
}, /*#__PURE__*/React.createElement("div", {
|
385
388
|
className: "".concat(blockClass, "__action-bar-column-content"),
|
386
389
|
ref: sizingContainerRef
|
@@ -425,7 +428,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
425
428
|
showAllTagsLabel: showAllTagsLabel,
|
426
429
|
tags: tags,
|
427
430
|
overflowClassName: "".concat(blockClass, "__navigation-tags-overflow")
|
428
|
-
}))) : null), // this navigation pushes the breadcrumb off or settles underneath it depending on
|
431
|
+
}))) : null), // this navigation pushes the breadcrumb off or settles underneath it depending on enableBreadcrumbScroll
|
429
432
|
navigation ? /*#__PURE__*/React.createElement(Row, {
|
430
433
|
className: cx("".concat(blockClass, "__navigation-row"), (_cx7 = {}, _defineProperty(_cx7, "".concat(blockClass, "__navigation-row--spacing-above-06"), !!navigation), _defineProperty(_cx7, "".concat(blockClass, "__navigation-row--has-tags"), tags), _cx7))
|
431
434
|
}, /*#__PURE__*/React.createElement(Column, {
|
@@ -497,6 +500,11 @@ var TYPES = {
|
|
497
500
|
};
|
498
501
|
var tagTypes = Object.keys(TYPES);
|
499
502
|
export var deprecatedProps = {
|
503
|
+
/**
|
504
|
+
* **Deprecated** see property `enableBreadcrumbScroll`
|
505
|
+
*/
|
506
|
+
disableBreadcrumbScroll: deprecateProp(PropTypes.bool, 'Property replaced by `enableBreadcrumbScroll`'),
|
507
|
+
|
500
508
|
/**
|
501
509
|
* **Deprecated** see property `withoutBackground`
|
502
510
|
*/
|
@@ -525,8 +533,8 @@ PageHeader.propTypes = _objectSpread({
|
|
525
533
|
*
|
526
534
|
* NOTE: This prop is required if actionBarItems are supplied
|
527
535
|
*/
|
528
|
-
actionBarOverflowAriaLabel: PropTypes.string.isRequired.if(function (
|
529
|
-
var actionBarItems =
|
536
|
+
actionBarOverflowAriaLabel: PropTypes.string.isRequired.if(function (_ref10) {
|
537
|
+
var actionBarItems = _ref10.actionBarItems;
|
530
538
|
return actionBarItems && actionBarItems.length > 0;
|
531
539
|
}),
|
532
540
|
|
@@ -561,8 +569,8 @@ PageHeader.propTypes = _objectSpread({
|
|
561
569
|
* If the user supplies breadcrumbs then this property is required.
|
562
570
|
* It is used in an overflow menu when there is insufficient space to display all breadcrumbs inline.
|
563
571
|
*/
|
564
|
-
breadcrumbOverflowAriaLabel: PropTypes.string.isRequired.if(function (
|
565
|
-
var breadcrumbs =
|
572
|
+
breadcrumbOverflowAriaLabel: PropTypes.string.isRequired.if(function (_ref11) {
|
573
|
+
var breadcrumbs = _ref11.breadcrumbs;
|
566
574
|
return breadcrumbs && breadcrumbs.length > 0;
|
567
575
|
}),
|
568
576
|
|
@@ -601,8 +609,8 @@ PageHeader.propTypes = _objectSpread({
|
|
601
609
|
/**
|
602
610
|
* A text version of the `label` for display, required if `label` is not a string.
|
603
611
|
*/
|
604
|
-
title: PropTypes.string.isRequired.if(function (
|
605
|
-
var label =
|
612
|
+
title: PropTypes.string.isRequired.if(function (_ref12) {
|
613
|
+
var label = _ref12.label;
|
606
614
|
return typeof label !== 'string';
|
607
615
|
})
|
608
616
|
})),
|
@@ -632,9 +640,9 @@ PageHeader.propTypes = _objectSpread({
|
|
632
640
|
* If `hasCollapseHeaderToggle` is set and `withoutBackground` is unset/falsy then assistive text is
|
633
641
|
* required for both the expend and collapse states of the button component used.
|
634
642
|
*/
|
635
|
-
collapseHeaderIconDescription: PropTypes.string.isRequired.if(function (
|
636
|
-
var withoutBackground =
|
637
|
-
hasCollapseHeaderToggle =
|
643
|
+
collapseHeaderIconDescription: PropTypes.string.isRequired.if(function (_ref13) {
|
644
|
+
var withoutBackground = _ref13.withoutBackground,
|
645
|
+
hasCollapseHeaderToggle = _ref13.hasCollapseHeaderToggle;
|
638
646
|
return !withoutBackground && hasCollapseHeaderToggle;
|
639
647
|
}),
|
640
648
|
|
@@ -645,18 +653,18 @@ PageHeader.propTypes = _objectSpread({
|
|
645
653
|
collapseTitle: PropTypes.bool,
|
646
654
|
|
647
655
|
/**
|
648
|
-
* Standard
|
649
|
-
*
|
656
|
+
* Standard keeps the breadcrumb on the page. This option allows the breadcrumb
|
657
|
+
* to scroll off
|
650
658
|
*/
|
651
|
-
|
659
|
+
enableBreadcrumbScroll: PropTypes.bool,
|
652
660
|
|
653
661
|
/**
|
654
662
|
* If `hasCollapseHeaderToggle` is set and `withoutBackground` is unset/falsy then assistive text is
|
655
663
|
* required for both the expend and collapse states of the button component used.
|
656
664
|
*/
|
657
|
-
expandHeaderIconDescription: PropTypes.string.isRequired.if(function (
|
658
|
-
var withoutBackground =
|
659
|
-
hasCollapseHeaderToggle =
|
665
|
+
expandHeaderIconDescription: PropTypes.string.isRequired.if(function (_ref14) {
|
666
|
+
var withoutBackground = _ref14.withoutBackground,
|
667
|
+
hasCollapseHeaderToggle = _ref14.hasCollapseHeaderToggle;
|
660
668
|
return !withoutBackground && hasCollapseHeaderToggle;
|
661
669
|
}),
|
662
670
|
|
@@ -727,8 +735,8 @@ PageHeader.propTypes = _objectSpread({
|
|
727
735
|
*
|
728
736
|
* NOTE: This prop is required if pageActions are supplied
|
729
737
|
*/
|
730
|
-
pageActionsOverflowLabel: PropTypes.node.isRequired.if(function (
|
731
|
-
var pageActions =
|
738
|
+
pageActionsOverflowLabel: PropTypes.node.isRequired.if(function (_ref15) {
|
739
|
+
var pageActions = _ref15.pageActions;
|
732
740
|
return pageActions && pageActions.length > 0 && !pageActions.content;
|
733
741
|
}),
|
734
742
|
|
@@ -21,13 +21,13 @@ export var blockClass = "".concat(pkg.prefix, "--page-header");
|
|
21
21
|
* @param {{}} headerRef
|
22
22
|
* @param {{}} offsetTopMeasuringRef
|
23
23
|
* @param {{}} navigation
|
24
|
-
* @param {boolean}
|
24
|
+
* @param {boolean} enableBreadcrumbScroll
|
25
25
|
* @param {boolean} hasActionBar
|
26
26
|
* @param {boolean} widthIsNarrow
|
27
27
|
* @param {()} setMetrics
|
28
28
|
*/
|
29
29
|
|
30
|
-
export var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(headerRef, offsetTopMeasuringRef, navigation,
|
30
|
+
export var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(headerRef, offsetTopMeasuringRef, navigation, enableBreadcrumbScroll, hasActionBar, widthIsNarrow, setMetrics) {
|
31
31
|
var dynamicRefs = {};
|
32
32
|
|
33
33
|
var getDynamicRef = function getDynamicRef(selector) {
|
@@ -112,13 +112,9 @@ export var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(
|
|
112
112
|
update.headerTopValue += 8;
|
113
113
|
}
|
114
114
|
|
115
|
-
if (
|
115
|
+
if (!enableBreadcrumbScroll || !navigation) {
|
116
116
|
// adjust sticky top if no navigation or breadcrumb is to stay on screen
|
117
117
|
update.headerTopValue += update.breadcrumbRowHeight;
|
118
|
-
} else {
|
119
|
-
if (navigation && !widthIsNarrow) {
|
120
|
-
update.headerTopValue -= 8;
|
121
|
-
}
|
122
118
|
}
|
123
119
|
|
124
120
|
if (window) {
|
@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
3
3
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
4
4
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
5
|
-
var _excluded = ["align", "className", "maxVisible", "overflowAlign", "overflowClassName", "overflowDirection", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags"],
|
5
|
+
var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "overflowAlign", "overflowClassName", "overflowDirection", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags"],
|
6
6
|
_excluded2 = ["label", "id"],
|
7
7
|
_excluded3 = ["label"];
|
8
8
|
|
@@ -17,6 +17,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
17
17
|
// LICENSE file in the root directory of this source tree.
|
18
18
|
//
|
19
19
|
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
20
|
+
import { createPortal } from 'react-dom';
|
20
21
|
import PropTypes from 'prop-types';
|
21
22
|
import cx from 'classnames';
|
22
23
|
import { TagSetOverflow } from './TagSetOverflow';
|
@@ -32,12 +33,15 @@ var allTagsModalSearchThreshold = 10; // Default values for props
|
|
32
33
|
|
33
34
|
var defaults = {
|
34
35
|
align: 'start',
|
36
|
+
allTagsModalTarget: document.body,
|
35
37
|
overflowAlign: 'center',
|
36
38
|
overflowDirection: 'bottom'
|
37
39
|
};
|
38
40
|
export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
39
41
|
var _ref$align = _ref.align,
|
40
42
|
align = _ref$align === void 0 ? defaults.align : _ref$align,
|
43
|
+
_ref$allTagsModalTarg = _ref.allTagsModalTarget,
|
44
|
+
allTagsModalTarget = _ref$allTagsModalTarg === void 0 ? defaults.allTagsModalTarget : _ref$allTagsModalTarg,
|
41
45
|
className = _ref.className,
|
42
46
|
maxVisible = _ref.maxVisible,
|
43
47
|
_ref$overflowAlign = _ref.overflowAlign,
|
@@ -224,14 +228,14 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
224
228
|
}, hiddenSizingTags), /*#__PURE__*/React.createElement("div", {
|
225
229
|
className: "".concat(blockClass, "__tag-container"),
|
226
230
|
ref: displayedArea
|
227
|
-
}, displayedTags)), tags && displayCount < tags.length ? /*#__PURE__*/React.createElement(TagSetModal, {
|
231
|
+
}, displayedTags)), allTagsModalTarget && tags && displayCount < tags.length ? /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(TagSetModal, {
|
228
232
|
allTags: tags,
|
229
233
|
open: showAllModalOpen,
|
230
234
|
title: allTagsModalTitle,
|
231
235
|
onClose: handleModalClose,
|
232
236
|
searchLabel: allTagsModalSearchLabel,
|
233
237
|
searchPlaceholder: allTagsModalSearchPlaceholderText
|
234
|
-
}) : null);
|
238
|
+
}), allTagsModalTarget) : null);
|
235
239
|
}); // Return a placeholder if not released and not enabled by feature flag
|
236
240
|
|
237
241
|
TagSet = pkg.checkComponentEnabled(TagSet, componentName);
|
@@ -276,6 +280,11 @@ TagSet.propTypes = {
|
|
276
280
|
*/
|
277
281
|
allTagsModalSearchPlaceholderText: string_required_if_more_than_10_tags,
|
278
282
|
|
283
|
+
/**
|
284
|
+
* portal target for the all tags modal
|
285
|
+
*/
|
286
|
+
allTagsModalTarget: PropTypes.node,
|
287
|
+
|
279
288
|
/**
|
280
289
|
* title for the show all modal. **Note: Required if more than 10 tags**
|
281
290
|
*/
|
@@ -78,7 +78,8 @@ export var UserProfileImage = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
78
78
|
};
|
79
79
|
|
80
80
|
return FillItem && (tooltipText ? /*#__PURE__*/React.createElement(TooltipIcon, {
|
81
|
-
tooltipText: tooltipText
|
81
|
+
tooltipText: tooltipText,
|
82
|
+
className: "".concat(blockClass, "__tooltip")
|
82
83
|
}, renderUserProfileImage()) : renderUserProfileImage());
|
83
84
|
}); // Return a placeholder if not released and not enabled by feature flag
|
84
85
|
|
@@ -39,7 +39,7 @@ var _AddSelectList = require("./AddSelectList");
|
|
39
39
|
|
40
40
|
var _AddSelectColumn = require("./AddSelectColumn");
|
41
41
|
|
42
|
-
var _excluded = ["className", "description", "influencerTitle", "inputPlaceholder", "items", "itemsLabel", "multi", "noResultsDescription", "noResultsTitle", "noSelectionDescription", "noSelectionTitle", "onClose", "onCloseButtonText", "onSearchFilter", "onSubmit", "onSubmitButtonText", "open", "removeIconDescription", "textInputLabel", "title"],
|
42
|
+
var _excluded = ["className", "columnInputPlaceholder", "description", "influencerTitle", "inputPlaceholder", "items", "itemsLabel", "multi", "noResultsDescription", "noResultsTitle", "noSelectionDescription", "noSelectionTitle", "onClose", "onCloseButtonText", "onSearchFilter", "onSubmit", "onSubmitButtonText", "open", "removeIconDescription", "textInputLabel", "title"],
|
43
43
|
_excluded2 = ["children"];
|
44
44
|
|
45
45
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
@@ -59,6 +59,7 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
59
59
|
var _cx;
|
60
60
|
|
61
61
|
var className = _ref.className,
|
62
|
+
columnInputPlaceholder = _ref.columnInputPlaceholder,
|
62
63
|
description = _ref.description,
|
63
64
|
influencerTitle = _ref.influencerTitle,
|
64
65
|
inputPlaceholder = _ref.inputPlaceholder,
|
@@ -228,23 +229,26 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
228
229
|
value: searchTerm,
|
229
230
|
onChange: handleSearch
|
230
231
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
231
|
-
className: "".concat(blockClass, "
|
232
|
+
className: "".concat(blockClass, "__tag-container")
|
232
233
|
}, path.length ? /*#__PURE__*/_react.default.createElement(_AddSelectBreadcrumbs.AddSelectBreadcrumbs, {
|
233
234
|
itemsLabel: itemsLabel,
|
234
235
|
path: path,
|
235
236
|
setPath: setPath
|
236
237
|
}) : /*#__PURE__*/_react.default.createElement("p", {
|
237
|
-
className: "".concat(blockClass, "
|
238
|
+
className: "".concat(blockClass, "__tag-container-label")
|
238
239
|
}, itemsLabel), !useNormalizedItems && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tag, {
|
239
240
|
type: "gray",
|
240
|
-
size: "sm"
|
241
|
-
className: "".concat(blockClass, "__items-label-tag")
|
241
|
+
size: "sm"
|
242
242
|
}, itemsToDisplay.length))), useNormalizedItems ? /*#__PURE__*/_react.default.createElement("div", {
|
243
243
|
className: "".concat(blockClass, "__columns")
|
244
244
|
}, itemsToDisplay.map(function (page, idx) {
|
245
|
+
var _path;
|
246
|
+
|
245
247
|
return /*#__PURE__*/_react.default.createElement(_AddSelectColumn.AddSelectColumn, (0, _extends2.default)({}, commonListProps, {
|
246
248
|
key: idx,
|
247
|
-
filteredItems: page
|
249
|
+
filteredItems: page,
|
250
|
+
header: idx === 0 ? itemsLabel : (_path = path[idx - 1]) === null || _path === void 0 ? void 0 : _path.title,
|
251
|
+
columnInputPlaceholder: columnInputPlaceholder
|
248
252
|
}));
|
249
253
|
})) : /*#__PURE__*/_react.default.createElement("div", null, itemsToDisplay.length > 0 ? /*#__PURE__*/_react.default.createElement(_AddSelectList.AddSelectList, (0, _extends2.default)({}, commonListProps, {
|
250
254
|
filteredItems: itemsToDisplay
|
@@ -292,6 +296,7 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
292
296
|
exports.AddSelect = AddSelect;
|
293
297
|
AddSelect.propTypes = {
|
294
298
|
className: _propTypes.default.string,
|
299
|
+
columnInputPlaceholder: _propTypes.default.string,
|
295
300
|
description: _propTypes.default.string,
|
296
301
|
influencerTitle: _propTypes.default.string,
|
297
302
|
inputPlaceholder: _propTypes.default.string,
|
@@ -2,6 +2,8 @@
|
|
2
2
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
4
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
6
|
+
|
5
7
|
Object.defineProperty(exports, "__esModule", {
|
6
8
|
value: true
|
7
9
|
});
|
@@ -9,29 +11,69 @@ exports.AddSelectColumn = void 0;
|
|
9
11
|
|
10
12
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
11
13
|
|
12
|
-
var
|
14
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
15
|
+
|
16
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
17
|
+
|
18
|
+
var _react = _interopRequireWildcard(require("react"));
|
19
|
+
|
20
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
21
|
+
|
22
|
+
var _carbonComponentsReact = require("carbon-components-react");
|
13
23
|
|
14
24
|
var _settings = require("../../settings");
|
15
25
|
|
16
26
|
var _AddSelectList = require("./AddSelectList");
|
17
27
|
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
// import PropTypes from 'prop-types';
|
28
|
+
var _excluded = ["columnInputPlaceholder", "filteredItems", "header"];
|
29
|
+
|
30
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
31
|
+
|
32
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
33
|
+
|
25
34
|
var componentName = 'AddSelect';
|
26
35
|
|
27
|
-
var AddSelectColumn = function AddSelectColumn(
|
28
|
-
var
|
36
|
+
var AddSelectColumn = function AddSelectColumn(_ref) {
|
37
|
+
var columnInputPlaceholder = _ref.columnInputPlaceholder,
|
38
|
+
filteredItems = _ref.filteredItems,
|
39
|
+
header = _ref.header,
|
40
|
+
props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
41
|
+
|
42
|
+
var _useState = (0, _react.useState)(''),
|
43
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
44
|
+
searchTerm = _useState2[0],
|
45
|
+
setSearchTerm = _useState2[1];
|
46
|
+
|
47
|
+
var blockClass = "".concat(_settings.pkg.prefix, "--add-select");
|
48
|
+
var colItems = filteredItems.filter(function (item) {
|
49
|
+
return item.title.toLowerCase().includes(searchTerm);
|
50
|
+
});
|
29
51
|
return /*#__PURE__*/_react.default.createElement("div", {
|
30
|
-
className: blockClass
|
31
|
-
}, /*#__PURE__*/_react.default.createElement(
|
32
|
-
|
52
|
+
className: "".concat(blockClass, "__column")
|
53
|
+
}, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
|
54
|
+
value: searchTerm,
|
55
|
+
onChange: function onChange(e) {
|
56
|
+
return setSearchTerm(e.target.value);
|
57
|
+
},
|
58
|
+
light: true,
|
59
|
+
placeholder: columnInputPlaceholder
|
60
|
+
}), /*#__PURE__*/_react.default.createElement("div", {
|
61
|
+
className: "".concat(blockClass, "__tag-container")
|
62
|
+
}, /*#__PURE__*/_react.default.createElement("p", {
|
63
|
+
className: "".concat(blockClass, "__tag-container-label")
|
64
|
+
}, header), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tag, {
|
65
|
+
type: "gray",
|
66
|
+
size: "sm"
|
67
|
+
}, colItems.length)), /*#__PURE__*/_react.default.createElement(_AddSelectList.AddSelectList, (0, _extends2.default)({}, props, {
|
68
|
+
inColumn: true,
|
69
|
+
filteredItems: colItems
|
33
70
|
})));
|
34
71
|
};
|
35
72
|
|
36
73
|
exports.AddSelectColumn = AddSelectColumn;
|
74
|
+
AddSelectColumn.propTypes = {
|
75
|
+
columnInputPlaceholder: _propTypes.default.string,
|
76
|
+
filteredItems: _propTypes.default.array,
|
77
|
+
header: _propTypes.default.string
|
78
|
+
};
|
37
79
|
AddSelectColumn.displayName = componentName;
|
@@ -62,7 +62,7 @@ var ButtonMenu = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
62
62
|
className: "".concat(_settings.carbon.prefix, "--btn__icon")
|
63
63
|
}));
|
64
64
|
},
|
65
|
-
|
65
|
+
innerRef: ref
|
66
66
|
}), children);
|
67
67
|
}); // Return a placeholder if not released and not enabled by feature flag
|
68
68
|
|