@carbon/ibm-products 2.38.0 → 2.40.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +236 -3
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +5 -0
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +236 -3
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +236 -3
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/es/components/AddSelect/AddSelect.d.ts +44 -2
- package/es/components/AddSelect/AddSelect.js +8 -4
- package/es/components/AddSelect/AddSelectBody.d.ts +44 -2
- package/es/components/AddSelect/AddSelectBody.js +10 -12
- package/es/components/AddSelect/AddSelectSort.d.ts +16 -17
- package/es/components/AddSelect/AddSelectSort.js +5 -5
- package/es/components/AddSelect/types/index.d.ts +44 -0
- package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.d.ts +5 -1
- package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +12 -6
- package/es/components/Card/Card.js +50 -9
- package/es/components/Card/CardFooter.d.ts +5 -1
- package/es/components/Card/CardFooter.js +11 -1
- package/es/components/Carousel/Carousel.d.ts +6 -2
- package/es/components/Checklist/Checklist.d.ts +100 -2
- package/es/components/Checklist/Checklist.js +9 -5
- package/es/components/Checklist/Checklist.types.d.ts +19 -0
- package/es/components/Checklist/Checklist.types.js +22 -0
- package/es/components/Checklist/ChecklistChart.d.ts +5 -1
- package/es/components/Checklist/ChecklistChart.js +9 -4
- package/es/components/Checklist/ChecklistIcon.d.ts +5 -1
- package/es/components/Checklist/ChecklistIcon.js +9 -4
- package/es/components/CoachmarkButton/CoachmarkButton.d.ts +19 -2
- package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.d.ts +46 -2
- package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +5 -4
- package/es/components/CreateInfluencer/CreateInfluencer.d.ts +55 -17
- 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.d.ts +67 -2
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +50 -28
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.d.ts +139 -2
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +46 -31
- package/es/components/DataSpreadsheet/DataSpreadsheetHeader.d.ts +89 -2
- package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +39 -25
- package/es/components/DataSpreadsheet/types/index.d.ts +30 -0
- package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +5 -1
- package/es/components/ExpressiveCard/ExpressiveCard.d.ts +2 -1
- package/es/components/GetStartedCard/GetStartedCard.d.ts +5 -0
- package/es/components/GetStartedCard/GetStartedCard.js +82 -0
- package/es/components/GetStartedCard/index.d.ts +1 -0
- package/es/components/Guidebanner/Guidebanner.d.ts +62 -2
- package/es/components/Guidebanner/Guidebanner.js +6 -5
- 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.d.ts +162 -1
- package/es/components/NotificationsPanel/NotificationsPanel.js +10 -11
- 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 +18 -3
- 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.d.ts +5 -0
- package/es/components/TagOverflow/TagOverflow.js +153 -29
- package/es/components/TagOverflow/TagOverflowModal.d.ts +29 -0
- package/es/components/TagOverflow/TagOverflowModal.js +112 -0
- package/es/components/TagOverflow/TagOverflowPopover.d.ts +2 -0
- package/es/components/TagOverflow/TagOverflowPopover.js +135 -0
- 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/components/index.d.ts +1 -0
- 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/es/global/js/package-settings.d.ts +1 -0
- package/es/global/js/package-settings.js +1 -0
- package/es/index.js +1 -0
- package/es/settings.d.ts +1 -0
- 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 +50 -9
- package/lib/components/Card/CardFooter.d.ts +5 -1
- package/lib/components/Card/CardFooter.js +11 -1
- package/lib/components/Carousel/Carousel.d.ts +6 -2
- package/lib/components/Checklist/Checklist.d.ts +100 -2
- package/lib/components/Checklist/Checklist.js +9 -5
- package/lib/components/Checklist/Checklist.types.d.ts +19 -0
- package/lib/components/Checklist/Checklist.types.js +27 -0
- package/lib/components/Checklist/ChecklistChart.d.ts +5 -1
- package/lib/components/Checklist/ChecklistChart.js +14 -9
- package/lib/components/Checklist/ChecklistIcon.d.ts +5 -1
- package/lib/components/Checklist/ChecklistIcon.js +9 -4
- package/lib/components/CoachmarkButton/CoachmarkButton.d.ts +19 -2
- package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.d.ts +46 -2
- package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +5 -4
- package/lib/components/CreateInfluencer/CreateInfluencer.d.ts +55 -17
- 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.d.ts +67 -2
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +50 -28
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.d.ts +139 -2
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +46 -31
- package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.d.ts +89 -2
- package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +39 -25
- package/lib/components/DataSpreadsheet/types/index.d.ts +30 -0
- package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +5 -1
- package/lib/components/ExpressiveCard/ExpressiveCard.d.ts +2 -1
- package/lib/components/GetStartedCard/GetStartedCard.d.ts +5 -0
- package/lib/components/GetStartedCard/GetStartedCard.js +88 -0
- package/lib/components/GetStartedCard/index.d.ts +1 -0
- package/lib/components/Guidebanner/Guidebanner.d.ts +62 -2
- package/lib/components/Guidebanner/Guidebanner.js +6 -5
- 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.d.ts +162 -1
- package/lib/components/NotificationsPanel/NotificationsPanel.js +10 -11
- 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 +18 -3
- 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.d.ts +5 -0
- package/lib/components/TagOverflow/TagOverflow.js +154 -28
- package/lib/components/TagOverflow/TagOverflowModal.d.ts +29 -0
- package/lib/components/TagOverflow/TagOverflowModal.js +121 -0
- package/lib/components/TagOverflow/TagOverflowPopover.d.ts +2 -0
- package/lib/components/TagOverflow/TagOverflowPopover.js +144 -0
- 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/components/index.d.ts +1 -0
- 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/lib/global/js/package-settings.d.ts +1 -0
- package/lib/global/js/package-settings.js +1 -0
- package/lib/index.js +5 -0
- package/lib/settings.d.ts +1 -0
- package/package.json +3 -3
- package/scss/components/CoachmarkStack/_coachmark-stack.scss +4 -2
- package/scss/components/GetStartedCard/_carbon-imports.scss +9 -0
- package/scss/components/GetStartedCard/_get-started-card.scss +135 -0
- package/scss/components/GetStartedCard/_index-with-carbon.scss +9 -0
- package/scss/components/GetStartedCard/_index.scss +8 -0
- 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 +157 -0
- package/scss/components/_index-with-carbon.scss +1 -0
- package/scss/components/_index.scss +1 -0
- package/telemetry.yml +25 -16
@@ -22,7 +22,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
22
22
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
23
23
|
|
24
24
|
var componentName = 'SingleAddSelect';
|
25
|
-
|
26
25
|
/**
|
27
26
|
* Used to add or select one or more items from larger lists or hierarchies.
|
28
27
|
*/
|
@@ -38,6 +37,7 @@ exports.SingleAddSelect.propTypes = {
|
|
38
37
|
/**
|
39
38
|
* optional class name
|
40
39
|
*/
|
40
|
+
/**@ts-ignore */
|
41
41
|
className: index["default"].string,
|
42
42
|
/**
|
43
43
|
* text description that appears under the title
|
@@ -55,6 +55,7 @@ exports.SingleAddSelect.propTypes = {
|
|
55
55
|
* object that contains the item data. for more information reference the
|
56
56
|
* "Structuring items" section in the docs tab
|
57
57
|
*/
|
58
|
+
/**@ts-ignore */
|
58
59
|
items: index["default"].shape({
|
59
60
|
entries: index["default"].arrayOf(index["default"].shape({
|
60
61
|
children: index["default"].object,
|
@@ -2,4 +2,9 @@
|
|
2
2
|
* TODO: A description of the component.
|
3
3
|
*/
|
4
4
|
export let TagOverflow: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
|
5
|
+
/**
|
6
|
+
* The strings shown in the showAllModal are only shown if we have more than allTagsModalSearchLThreshold
|
7
|
+
* @returns null if no problems
|
8
|
+
*/
|
9
|
+
export const string_required_if_more_than_10_tags: (props: any, propName: any, componentName: any, location: any, propFullName: any, secret: any) => any;
|
5
10
|
import React from 'react';
|
@@ -14,45 +14,72 @@ var React = require('react');
|
|
14
14
|
var index = require('../../node_modules/prop-types/index.js');
|
15
15
|
var cx = require('classnames');
|
16
16
|
var devtools = require('../../global/js/utils/devtools.js');
|
17
|
+
var propsHelper = require('../../global/js/utils/props-helper.js');
|
17
18
|
var settings = require('../../settings.js');
|
18
19
|
var react = require('@carbon/react');
|
19
20
|
var constants = require('./constants.js');
|
20
21
|
var useResizeObserver = require('../../global/js/hooks/useResizeObserver.js');
|
21
|
-
var
|
22
|
+
var TagOverflowPopover = require('./TagOverflowPopover.js');
|
23
|
+
var TagOverflowModal = require('./TagOverflowModal.js');
|
22
24
|
|
23
25
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
24
26
|
|
25
27
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
26
28
|
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
27
29
|
|
28
|
-
var _excluded = ["className", "
|
30
|
+
var _excluded = ["items", "tagComponent", "align", "showAllTagsLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTarget", "allTagsModalTitle", "className", "containingElementRef", "measurementOffset", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowType", "onOverflowTagChange"],
|
29
31
|
_excluded2 = ["className", "id"];
|
30
32
|
var blockClass = "".concat(settings.pkg.prefix, "--tag-overflow");
|
31
33
|
var componentName = 'TagOverflow';
|
34
|
+
var allTagsModalSearchThreshold = 10;
|
35
|
+
|
36
|
+
// TODO: support prop overflowType
|
32
37
|
|
33
38
|
// Default values for props
|
34
39
|
var defaults = {
|
35
|
-
items: []
|
40
|
+
items: [],
|
41
|
+
align: 'start',
|
42
|
+
measurementOffset: 0,
|
43
|
+
overflowAlign: 'bottom',
|
44
|
+
overflowType: 'default',
|
45
|
+
onOverflowTagChange: function onOverflowTagChange() {}
|
36
46
|
};
|
37
47
|
|
38
48
|
/**
|
39
49
|
* TODO: A description of the component.
|
40
50
|
*/
|
41
51
|
exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
42
|
-
var
|
43
|
-
_ref$items = _ref.items,
|
52
|
+
var _ref$items = _ref.items,
|
44
53
|
items = _ref$items === void 0 ? defaults.items : _ref$items,
|
45
54
|
tagComponent = _ref.tagComponent,
|
55
|
+
_ref$align = _ref.align,
|
56
|
+
align = _ref$align === void 0 ? defaults.align : _ref$align,
|
57
|
+
showAllTagsLabel = _ref.showAllTagsLabel,
|
58
|
+
allTagsModalSearchLabel = _ref.allTagsModalSearchLabel,
|
59
|
+
allTagsModalSearchPlaceholderText = _ref.allTagsModalSearchPlaceholderText,
|
60
|
+
allTagsModalTarget = _ref.allTagsModalTarget,
|
61
|
+
allTagsModalTitle = _ref.allTagsModalTitle,
|
62
|
+
className = _ref.className,
|
63
|
+
containingElementRef = _ref.containingElementRef,
|
64
|
+
_ref$measurementOffse = _ref.measurementOffset,
|
65
|
+
measurementOffset = _ref$measurementOffse === void 0 ? defaults.measurementOffset : _ref$measurementOffse,
|
46
66
|
maxVisible = _ref.maxVisible,
|
47
67
|
multiline = _ref.multiline,
|
68
|
+
_ref$overflowAlign = _ref.overflowAlign,
|
69
|
+
overflowAlign = _ref$overflowAlign === void 0 ? defaults.overflowAlign : _ref$overflowAlign,
|
70
|
+
overflowClassName = _ref.overflowClassName,
|
71
|
+
_ref$overflowType = _ref.overflowType,
|
72
|
+
overflowType = _ref$overflowType === void 0 ? defaults.overflowType : _ref$overflowType,
|
73
|
+
_ref$onOverflowTagCha = _ref.onOverflowTagChange,
|
74
|
+
onOverflowTagChange = _ref$onOverflowTagCha === void 0 ? defaults.onOverflowTagChange : _ref$onOverflowTagCha,
|
48
75
|
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
49
76
|
var localContainerRef = React.useRef(null);
|
50
77
|
var containerRef = ref || localContainerRef;
|
51
78
|
var itemRefs = React.useRef(null);
|
52
79
|
var overflowRef = React.useRef(null);
|
53
|
-
//
|
80
|
+
// itemOffset is the value of margin applied on each items
|
54
81
|
// This value is required for calculating how many items will fit within the container
|
55
|
-
var
|
82
|
+
var itemOffset = 4;
|
56
83
|
var overflowIndicatorWidth = 40;
|
57
84
|
var _useState = React.useState(0),
|
58
85
|
_useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
|
@@ -66,10 +93,25 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
66
93
|
_useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
|
67
94
|
overflowItems = _useState6[0],
|
68
95
|
setOverflowItems = _useState6[1];
|
96
|
+
var _useState7 = React.useState(false),
|
97
|
+
_useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
|
98
|
+
showAllModalOpen = _useState8[0],
|
99
|
+
setShowAllModalOpen = _useState8[1];
|
100
|
+
var _useState9 = React.useState(false),
|
101
|
+
_useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
|
102
|
+
popoverOpen = _useState10[0],
|
103
|
+
setPopoverOpen = _useState10[1];
|
104
|
+
var resizeElm = containingElementRef && containingElementRef.current ? containingElementRef : containerRef;
|
105
|
+
var handleShowAllClick = function handleShowAllClick() {
|
106
|
+
setShowAllModalOpen(true);
|
107
|
+
};
|
108
|
+
var handleModalClose = function handleModalClose() {
|
109
|
+
setShowAllModalOpen(false);
|
110
|
+
};
|
69
111
|
var handleResize = function handleResize() {
|
70
|
-
setContainerWidth(
|
112
|
+
setContainerWidth(resizeElm.current.offsetWidth);
|
71
113
|
};
|
72
|
-
useResizeObserver.useResizeObserver(
|
114
|
+
useResizeObserver.useResizeObserver(resizeElm, handleResize);
|
73
115
|
var getMap = function getMap() {
|
74
116
|
if (!itemRefs.current) {
|
75
117
|
itemRefs.current = new Map();
|
@@ -83,6 +125,7 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
83
125
|
}
|
84
126
|
};
|
85
127
|
var getVisibleItems = React.useCallback(function () {
|
128
|
+
var _overflowRef$current;
|
86
129
|
if (!itemRefs.current) {
|
87
130
|
return items;
|
88
131
|
}
|
@@ -91,13 +134,16 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
91
134
|
return _visibleItems;
|
92
135
|
}
|
93
136
|
var map = getMap();
|
94
|
-
var
|
95
|
-
var
|
137
|
+
var optionalContainingElement = containingElementRef === null || containingElementRef === void 0 ? void 0 : containingElementRef.current;
|
138
|
+
var measurementOffsetValue = typeof measurementOffset === 'number' ? measurementOffset : 0;
|
139
|
+
var spaceAvailable = optionalContainingElement ? optionalContainingElement.offsetWidth - measurementOffsetValue : containerWidth;
|
140
|
+
var overflowContainerWidth = ((_overflowRef$current = overflowRef.current) === null || _overflowRef$current === void 0 ? void 0 : _overflowRef$current.offsetWidth) > overflowIndicatorWidth ? overflowRef.current.offsetWidth : overflowIndicatorWidth;
|
141
|
+
var maxWidth = spaceAvailable - overflowContainerWidth;
|
96
142
|
var childrenWidth = 0;
|
97
143
|
var maxReached = false;
|
98
144
|
return items.reduce(function (prev, cur) {
|
99
145
|
if (!maxReached) {
|
100
|
-
var itemWidth = map.get(cur.id) +
|
146
|
+
var itemWidth = map.get(cur.id) + itemOffset;
|
101
147
|
var fits = itemWidth + childrenWidth < maxWidth;
|
102
148
|
if (fits) {
|
103
149
|
childrenWidth += itemWidth;
|
@@ -108,7 +154,7 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
108
154
|
}
|
109
155
|
return prev;
|
110
156
|
}, []);
|
111
|
-
}, [itemRefs, overflowRef, containerWidth, items, multiline, maxVisible]);
|
157
|
+
}, [itemRefs, overflowRef, containerWidth, items, multiline, maxVisible, containingElementRef, measurementOffset]);
|
112
158
|
var getCustomComponent = function getCustomComponent(item) {
|
113
159
|
var className = item.className,
|
114
160
|
id = item.id,
|
@@ -130,14 +176,16 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
130
176
|
var overflowItemsArr = hiddenItems === null || hiddenItems === void 0 ? void 0 : hiddenItems.map(function (item) {
|
131
177
|
return {
|
132
178
|
type: item.tagType,
|
133
|
-
label: item.label
|
179
|
+
label: item.label,
|
180
|
+
id: item.id
|
134
181
|
};
|
135
182
|
});
|
136
183
|
setVisibleItems(visibleItemsArr);
|
137
184
|
setOverflowItems(overflowItemsArr);
|
138
|
-
|
185
|
+
onOverflowTagChange === null || onOverflowTagChange === void 0 || onOverflowTagChange(overflowItemsArr);
|
186
|
+
}, [containerWidth, items, maxVisible, getVisibleItems, onOverflowTagChange]);
|
139
187
|
return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
|
140
|
-
className: cx__default["default"](blockClass, className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--multiline"), multiline)),
|
188
|
+
className: cx__default["default"](blockClass, className, "".concat(blockClass, "--align-").concat(align), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--multiline"), multiline)),
|
141
189
|
ref: containerRef,
|
142
190
|
role: "main"
|
143
191
|
}, devtools.getDevtoolsProps(componentName)), visibleItems.length > 0 && visibleItems.map(function (item) {
|
@@ -162,14 +210,27 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
162
210
|
}), /*#__PURE__*/React__default["default"].createElement("span", {
|
163
211
|
className: "".concat(blockClass, "__indicator"),
|
164
212
|
ref: overflowRef
|
165
|
-
}, overflowItems.length > 0 && /*#__PURE__*/React__default["default"].createElement(
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
213
|
+
}, overflowItems.length > 0 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TagOverflowPopover.TagOverflowPopover, {
|
214
|
+
allTagsModalSearchThreshold: allTagsModalSearchThreshold,
|
215
|
+
className: overflowClassName,
|
216
|
+
onShowAllClick: handleShowAllClick,
|
217
|
+
overflowTags: overflowItems,
|
218
|
+
overflowAlign: overflowAlign,
|
219
|
+
overflowType: overflowType,
|
220
|
+
showAllTagsLabel: showAllTagsLabel,
|
221
|
+
key: "tag-overflow-popover",
|
222
|
+
ref: overflowRef,
|
223
|
+
popoverOpen: popoverOpen,
|
224
|
+
setPopoverOpen: setPopoverOpen
|
225
|
+
}), /*#__PURE__*/React__default["default"].createElement(TagOverflowModal.TagOverflowModal, {
|
226
|
+
allTags: items,
|
227
|
+
open: showAllModalOpen,
|
228
|
+
title: allTagsModalTitle,
|
229
|
+
onClose: handleModalClose,
|
230
|
+
searchLabel: allTagsModalSearchLabel,
|
231
|
+
searchPlaceholder: allTagsModalSearchPlaceholderText,
|
232
|
+
portalTarget: allTagsModalTarget
|
233
|
+
}))));
|
173
234
|
});
|
174
235
|
|
175
236
|
// Return a placeholder if not released and not enabled by feature flag
|
@@ -180,20 +241,56 @@ exports.TagOverflow = settings.pkg.checkComponentEnabled(exports.TagOverflow, co
|
|
180
241
|
exports.TagOverflow.displayName = componentName;
|
181
242
|
var tagTypes = Object.keys(constants.TYPES);
|
182
243
|
|
244
|
+
/**
|
245
|
+
* The strings shown in the showAllModal are only shown if we have more than allTagsModalSearchLThreshold
|
246
|
+
* @returns null if no problems
|
247
|
+
*/
|
248
|
+
var string_required_if_more_than_10_tags = propsHelper.isRequiredIf(index["default"].string, function (_ref2) {
|
249
|
+
var items = _ref2.items;
|
250
|
+
return items && items.length > allTagsModalSearchThreshold;
|
251
|
+
});
|
252
|
+
|
183
253
|
// The types and DocGen commentary for the component props,
|
184
254
|
// in alphabetical order (for consistency).
|
185
255
|
// See https://www.npmjs.com/package/prop-types#usage.
|
186
256
|
exports.TagOverflow.propTypes = {
|
257
|
+
/**
|
258
|
+
* align the Tags displayed by the TagSet. Default start.
|
259
|
+
*/
|
260
|
+
align: index["default"].oneOf(['start', 'center', 'end']),
|
261
|
+
/**
|
262
|
+
* label text for the show all search. **Note: Required if more than 10 tags**
|
263
|
+
*/
|
264
|
+
allTagsModalSearchLabel: string_required_if_more_than_10_tags,
|
265
|
+
/**
|
266
|
+
* placeholder text for the show all search. **Note: Required if more than 10 tags**
|
267
|
+
*/
|
268
|
+
allTagsModalSearchPlaceholderText: string_required_if_more_than_10_tags,
|
269
|
+
/**
|
270
|
+
* portal target for the all tags modal
|
271
|
+
*/
|
272
|
+
allTagsModalTarget: index["default"].node,
|
273
|
+
/**
|
274
|
+
* title for the show all modal. **Note: Required if more than 10 tags**
|
275
|
+
*/
|
276
|
+
allTagsModalTitle: string_required_if_more_than_10_tags,
|
187
277
|
/**
|
188
278
|
* Provide an optional class to be applied to the containing node.
|
189
279
|
*/
|
190
280
|
className: index["default"].string,
|
281
|
+
/**
|
282
|
+
* Optional ref for custom resize container to measure available space
|
283
|
+
* Default will measure the available space of the TagSet container itself.
|
284
|
+
*/
|
285
|
+
containingElementRef: index["default"].object,
|
191
286
|
/**
|
192
287
|
* The items to be shown in the TagOverflow. Each item is specified as an object with properties:
|
193
|
-
* **label**\* (required) to supply the
|
194
|
-
* **id**\* (required) to uniquely identify
|
195
|
-
* **tagType** the type value to be passed to the Carbon Tag component
|
196
|
-
*
|
288
|
+
* **label**\* (required) to supply the content,
|
289
|
+
* **id**\* (required) to uniquely identify each item.
|
290
|
+
* **tagType** the type value to be passed to the Carbon Tag component.
|
291
|
+
* Refer https://react.carbondesignsystem.com/?path=/docs/components-tag--default to see the possible values for tagType
|
292
|
+
*
|
293
|
+
* If you want to render a custom component, pass it as tagComponent prop and
|
197
294
|
* then pass the props required for your custom component as the properties of item object
|
198
295
|
*/
|
199
296
|
items: index["default"].arrayOf(index["default"].shape({
|
@@ -205,12 +302,41 @@ exports.TagOverflow.propTypes = {
|
|
205
302
|
* maximum visible items
|
206
303
|
*/
|
207
304
|
maxVisible: index["default"].number,
|
305
|
+
/**
|
306
|
+
* Specify offset amount for measure available space, only used when `containingElementSelector`
|
307
|
+
* is also provided
|
308
|
+
*/
|
309
|
+
measurementOffset: index["default"].number,
|
208
310
|
/**
|
209
311
|
* display items in multiple lines
|
210
312
|
*/
|
211
313
|
multiline: index["default"].bool,
|
314
|
+
/**
|
315
|
+
* Handler to get overflow tags
|
316
|
+
*/
|
317
|
+
onOverflowTagChange: index["default"].func,
|
318
|
+
/**
|
319
|
+
* overflowAlign from the standard tooltip. Default center.
|
320
|
+
*/
|
321
|
+
overflowAlign: index["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top']),
|
322
|
+
/**
|
323
|
+
* overflowClassName for the tooltip popup
|
324
|
+
*/
|
325
|
+
overflowClassName: index["default"].string,
|
326
|
+
/**
|
327
|
+
* Type of rendering displayed inside of the tag overflow component
|
328
|
+
*/
|
329
|
+
overflowType: index["default"].oneOf(['default', 'tag']),
|
330
|
+
/**
|
331
|
+
* label for the overflow show all tags link.
|
332
|
+
*
|
333
|
+
* **Note:** Required if more than 10 tags
|
334
|
+
*/
|
335
|
+
showAllTagsLabel: string_required_if_more_than_10_tags,
|
212
336
|
/** Component definition of the items to be rendered inside TagOverflow.
|
213
337
|
* If this is not passed, items will be rendered as Tag component
|
214
338
|
*/
|
215
339
|
tagComponent: index["default"].elementType
|
216
340
|
};
|
341
|
+
|
342
|
+
exports.string_required_if_more_than_10_tags = string_required_if_more_than_10_tags;
|
@@ -0,0 +1,29 @@
|
|
1
|
+
export function TagOverflowModal({ allTags, className, title, onClose, open, portalTarget: portalTargetIn, searchLabel, searchPlaceholder, ...rest }: {
|
2
|
+
[x: string]: any;
|
3
|
+
allTags: any;
|
4
|
+
className: any;
|
5
|
+
title: any;
|
6
|
+
onClose: any;
|
7
|
+
open: any;
|
8
|
+
portalTarget: any;
|
9
|
+
searchLabel?: string | undefined;
|
10
|
+
searchPlaceholder: any;
|
11
|
+
}): any;
|
12
|
+
export namespace TagOverflowModal {
|
13
|
+
export namespace propTypes {
|
14
|
+
let allTags: PropTypes.Requireable<(PropTypes.InferProps<{
|
15
|
+
label: PropTypes.Validator<string>;
|
16
|
+
}> | null | undefined)[]>;
|
17
|
+
let className: PropTypes.Requireable<string>;
|
18
|
+
let onClose: PropTypes.Requireable<(...args: any[]) => any>;
|
19
|
+
let open: PropTypes.Requireable<boolean>;
|
20
|
+
let portalTarget: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
21
|
+
let searchLabel: PropTypes.Requireable<string>;
|
22
|
+
let searchPlaceholder: PropTypes.Requireable<string>;
|
23
|
+
let title: PropTypes.Requireable<string>;
|
24
|
+
}
|
25
|
+
export { componentName as displayName };
|
26
|
+
}
|
27
|
+
import PropTypes from 'prop-types';
|
28
|
+
declare const componentName: "TagOverflowModal";
|
29
|
+
export {};
|
@@ -0,0 +1,121 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2020, 2024
|
3
|
+
*
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
|
8
|
+
'use strict';
|
9
|
+
|
10
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
11
|
+
|
12
|
+
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
|
13
|
+
var React = require('react');
|
14
|
+
var index = require('../../node_modules/prop-types/index.js');
|
15
|
+
var cx = require('classnames');
|
16
|
+
var react = require('@carbon/react');
|
17
|
+
var settings = require('../../settings.js');
|
18
|
+
var propsHelper = require('../../global/js/utils/props-helper.js');
|
19
|
+
var usePortalTarget = require('../../global/js/hooks/usePortalTarget.js');
|
20
|
+
|
21
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
22
|
+
|
23
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
24
|
+
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
25
|
+
|
26
|
+
var _excluded = ["allTags", "className", "title", "onClose", "open", "portalTarget", "searchLabel", "searchPlaceholder"],
|
27
|
+
_excluded2 = ["label", "id"];
|
28
|
+
var componentName = 'TagOverflowModal';
|
29
|
+
var blockClass = "".concat(settings.pkg.prefix, "--tag-overflow-modal");
|
30
|
+
|
31
|
+
// Default values for props
|
32
|
+
var defaults = {
|
33
|
+
// marked as required by TagSet if needed, default used to satisfy <Search /> component
|
34
|
+
searchLabel: ''
|
35
|
+
};
|
36
|
+
var TagOverflowModal = function TagOverflowModal(_ref) {
|
37
|
+
var allTags = _ref.allTags,
|
38
|
+
className = _ref.className,
|
39
|
+
title = _ref.title,
|
40
|
+
onClose = _ref.onClose,
|
41
|
+
open = _ref.open,
|
42
|
+
portalTargetIn = _ref.portalTarget,
|
43
|
+
_ref$searchLabel = _ref.searchLabel,
|
44
|
+
searchLabel = _ref$searchLabel === void 0 ? defaults.searchLabel : _ref$searchLabel,
|
45
|
+
searchPlaceholder = _ref.searchPlaceholder,
|
46
|
+
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
47
|
+
var _useState = React.useState(''),
|
48
|
+
_useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
|
49
|
+
search = _useState2[0],
|
50
|
+
setSearch = _useState2[1];
|
51
|
+
var renderPortalUse = usePortalTarget.usePortalTarget(portalTargetIn);
|
52
|
+
var getFilteredItems = function getFilteredItems() {
|
53
|
+
var newFilteredModalTags = [];
|
54
|
+
if (open) {
|
55
|
+
if (search === '') {
|
56
|
+
newFilteredModalTags = allTags.slice(0);
|
57
|
+
} else {
|
58
|
+
var lCaseSearch = search.toLocaleLowerCase();
|
59
|
+
allTags.forEach(function (tag) {
|
60
|
+
var _tag$dataSearch, _tag$label;
|
61
|
+
var dataSearch = (_tag$dataSearch = tag['data-search']) === null || _tag$dataSearch === void 0 || (_tag$dataSearch = _tag$dataSearch.toLocaleLowerCase()) === null || _tag$dataSearch === void 0 ? void 0 : _tag$dataSearch.indexOf(lCaseSearch);
|
62
|
+
var labelSearch = (_tag$label = tag.label) === null || _tag$label === void 0 || (_tag$label = _tag$label.toLocaleLowerCase()) === null || _tag$label === void 0 ? void 0 : _tag$label.indexOf(lCaseSearch);
|
63
|
+
if (dataSearch > -1 || labelSearch > -1) {
|
64
|
+
newFilteredModalTags.push(tag);
|
65
|
+
}
|
66
|
+
});
|
67
|
+
}
|
68
|
+
}
|
69
|
+
return newFilteredModalTags;
|
70
|
+
};
|
71
|
+
var handleSearch = function handleSearch(evt) {
|
72
|
+
setSearch(evt.target.value || '');
|
73
|
+
};
|
74
|
+
return renderPortalUse( /*#__PURE__*/React__default["default"].createElement(react.ComposedModal, _rollupPluginBabelHelpers["extends"]({}, rest, {
|
75
|
+
containerClassName: "".concat(blockClass, "__container"),
|
76
|
+
className: cx__default["default"](className, blockClass),
|
77
|
+
size: "sm",
|
78
|
+
"aria-label": "Search all",
|
79
|
+
open: open,
|
80
|
+
onClose: onClose
|
81
|
+
}), /*#__PURE__*/React__default["default"].createElement(react.ModalHeader, {
|
82
|
+
className: "".concat(blockClass, "__header"),
|
83
|
+
closeModal: onClose,
|
84
|
+
title: title
|
85
|
+
}, /*#__PURE__*/React__default["default"].createElement(react.Search, {
|
86
|
+
"data-modal-primary-focus": true,
|
87
|
+
className: "".concat(blockClass, "__search"),
|
88
|
+
labelText: searchLabel,
|
89
|
+
placeholder: searchPlaceholder,
|
90
|
+
onChange: handleSearch,
|
91
|
+
size: "lg"
|
92
|
+
})), /*#__PURE__*/React__default["default"].createElement(react.ModalBody, {
|
93
|
+
className: "".concat(blockClass, "__body"),
|
94
|
+
hasForm: true
|
95
|
+
}, getFilteredItems().map(function (_ref2) {
|
96
|
+
var label = _ref2.label,
|
97
|
+
id = _ref2.id,
|
98
|
+
other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
|
99
|
+
return /*#__PURE__*/React__default["default"].createElement(react.Tag, _rollupPluginBabelHelpers["extends"]({}, other, {
|
100
|
+
filter: false,
|
101
|
+
key: id
|
102
|
+
}), label);
|
103
|
+
})), /*#__PURE__*/React__default["default"].createElement("div", {
|
104
|
+
className: "".concat(blockClass, "__fade")
|
105
|
+
})));
|
106
|
+
};
|
107
|
+
TagOverflowModal.propTypes = {
|
108
|
+
allTags: index["default"].arrayOf(index["default"].shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, propsHelper.prepareProps(react.Tag.propTypes, 'filter')), {}, {
|
109
|
+
label: index["default"].string.isRequired
|
110
|
+
}))),
|
111
|
+
className: index["default"].string,
|
112
|
+
onClose: index["default"].func,
|
113
|
+
open: index["default"].bool,
|
114
|
+
portalTarget: index["default"].node,
|
115
|
+
searchLabel: index["default"].string,
|
116
|
+
searchPlaceholder: index["default"].string,
|
117
|
+
title: index["default"].string
|
118
|
+
};
|
119
|
+
TagOverflowModal.displayName = componentName;
|
120
|
+
|
121
|
+
exports.TagOverflowModal = TagOverflowModal;
|
@@ -0,0 +1,144 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2020, 2024
|
3
|
+
*
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
|
8
|
+
'use strict';
|
9
|
+
|
10
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
11
|
+
|
12
|
+
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
|
13
|
+
var React = require('react');
|
14
|
+
var index = require('../../node_modules/prop-types/index.js');
|
15
|
+
var cx = require('classnames');
|
16
|
+
var react = require('@carbon/react');
|
17
|
+
var settings = require('../../settings.js');
|
18
|
+
var useClickOutside = require('../../global/js/hooks/useClickOutside.js');
|
19
|
+
|
20
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
21
|
+
|
22
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
23
|
+
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
24
|
+
|
25
|
+
var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowTags", "overflowType", "showAllTagsLabel", "popoverOpen", "setPopoverOpen"];
|
26
|
+
var componentName = 'TagOverflowPopover';
|
27
|
+
var blockClass = "".concat(settings.pkg.prefix, "--tag-overflow-popover");
|
28
|
+
|
29
|
+
// Default values for props
|
30
|
+
var defaults = {
|
31
|
+
allTagsModalSearchThreshold: 10,
|
32
|
+
overflowAlign: 'bottom'
|
33
|
+
};
|
34
|
+
var TagOverflowPopover = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
35
|
+
var _ref$allTagsModalSear = _ref.allTagsModalSearchThreshold,
|
36
|
+
allTagsModalSearchThreshold = _ref$allTagsModalSear === void 0 ? defaults.allTagsModalSearchThreshold : _ref$allTagsModalSear,
|
37
|
+
className = _ref.className,
|
38
|
+
onShowAllClick = _ref.onShowAllClick,
|
39
|
+
_ref$overflowAlign = _ref.overflowAlign,
|
40
|
+
overflowAlign = _ref$overflowAlign === void 0 ? defaults.overflowAlign : _ref$overflowAlign,
|
41
|
+
overflowTags = _ref.overflowTags,
|
42
|
+
overflowType = _ref.overflowType,
|
43
|
+
showAllTagsLabel = _ref.showAllTagsLabel,
|
44
|
+
popoverOpen = _ref.popoverOpen,
|
45
|
+
setPopoverOpen = _ref.setPopoverOpen,
|
46
|
+
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
47
|
+
var localRef = React.useRef();
|
48
|
+
var overflowTagContent = React.useRef(null);
|
49
|
+
useClickOutside.useClickOutside(ref || localRef, function () {
|
50
|
+
if (popoverOpen) {
|
51
|
+
setPopoverOpen(false);
|
52
|
+
}
|
53
|
+
});
|
54
|
+
var handleShowAllTagsClick = function handleShowAllTagsClick(evt) {
|
55
|
+
evt.stopPropagation();
|
56
|
+
evt.preventDefault();
|
57
|
+
setPopoverOpen(false);
|
58
|
+
onShowAllClick();
|
59
|
+
};
|
60
|
+
var handleEscKeyPress = function handleEscKeyPress(event) {
|
61
|
+
var key = event.key;
|
62
|
+
if (key === 'Escape') {
|
63
|
+
setPopoverOpen(false);
|
64
|
+
}
|
65
|
+
};
|
66
|
+
var getOverflowPopoverItems = function getOverflowPopoverItems() {
|
67
|
+
return overflowTags.filter(function (_, index) {
|
68
|
+
return overflowTags.length > allTagsModalSearchThreshold ? index < allTagsModalSearchThreshold : index <= allTagsModalSearchThreshold;
|
69
|
+
});
|
70
|
+
};
|
71
|
+
return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({}, rest, {
|
72
|
+
"aria-hidden": overflowTags.length === 0,
|
73
|
+
className: cx__default["default"](blockClass, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--hidden"), overflowTags.length === 0)),
|
74
|
+
ref: ref || localRef
|
75
|
+
}), /*#__PURE__*/React__default["default"].createElement(react.Popover, {
|
76
|
+
align: overflowAlign,
|
77
|
+
className: cx__default["default"](className, "".concat(blockClass, "__el")),
|
78
|
+
dropShadow: true,
|
79
|
+
highContrast: true,
|
80
|
+
onKeyDown: handleEscKeyPress,
|
81
|
+
open: popoverOpen
|
82
|
+
}, /*#__PURE__*/React__default["default"].createElement(react.Tag, {
|
83
|
+
onClick: function onClick() {
|
84
|
+
return setPopoverOpen(!popoverOpen);
|
85
|
+
},
|
86
|
+
className: cx__default["default"]("".concat(blockClass, "__trigger"))
|
87
|
+
}, "+", overflowTags.length), /*#__PURE__*/React__default["default"].createElement(react.PopoverContent, null, /*#__PURE__*/React__default["default"].createElement("div", {
|
88
|
+
ref: overflowTagContent,
|
89
|
+
className: "".concat(blockClass, "__content")
|
90
|
+
}, /*#__PURE__*/React__default["default"].createElement("ul", {
|
91
|
+
className: "".concat(blockClass, "__tag-list")
|
92
|
+
}, getOverflowPopoverItems().map(function (tag) {
|
93
|
+
return /*#__PURE__*/React__default["default"].createElement("li", {
|
94
|
+
className: cx__default["default"]("".concat(blockClass, "__tag-item"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__tag-item--default"), overflowType === 'default'), "".concat(blockClass, "__tag-item--tag"), overflowType === 'tag')),
|
95
|
+
key: tag.id
|
96
|
+
}, tag.label);
|
97
|
+
})), overflowTags.length > allTagsModalSearchThreshold && /*#__PURE__*/React__default["default"].createElement(react.Link, {
|
98
|
+
className: "".concat(blockClass, "__show-all-tags-link"),
|
99
|
+
href: "",
|
100
|
+
onClick: handleShowAllTagsClick,
|
101
|
+
role: "button"
|
102
|
+
}, showAllTagsLabel)))));
|
103
|
+
});
|
104
|
+
TagOverflowPopover.displayName = componentName;
|
105
|
+
TagOverflowPopover.propTypes = {
|
106
|
+
/**
|
107
|
+
* count of overflowTags over which a modal is offered
|
108
|
+
*/
|
109
|
+
allTagsModalSearchThreshold: index["default"].number,
|
110
|
+
/**
|
111
|
+
* className
|
112
|
+
*/
|
113
|
+
className: index["default"].string,
|
114
|
+
/**
|
115
|
+
* function to execute on clicking show all
|
116
|
+
*/
|
117
|
+
onShowAllClick: index["default"].func.isRequired,
|
118
|
+
/**
|
119
|
+
* overflowAlign from the standard tooltip
|
120
|
+
*/
|
121
|
+
overflowAlign: index["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top']),
|
122
|
+
/**
|
123
|
+
* tags shown in overflow
|
124
|
+
*/
|
125
|
+
overflowTags: index["default"].arrayOf(index["default"].object).isRequired,
|
126
|
+
/**
|
127
|
+
* Type of rendering displayed inside of the tag overflow component
|
128
|
+
*/
|
129
|
+
overflowType: index["default"].oneOf(['default', 'tag']),
|
130
|
+
/**
|
131
|
+
* Open state of the popover
|
132
|
+
*/
|
133
|
+
popoverOpen: index["default"].bool,
|
134
|
+
/**
|
135
|
+
* Setter function for the popoverOpen state value
|
136
|
+
*/
|
137
|
+
setPopoverOpen: index["default"].func,
|
138
|
+
/**
|
139
|
+
* label for the overflow show all tags link
|
140
|
+
*/
|
141
|
+
showAllTagsLabel: index["default"].string
|
142
|
+
};
|
143
|
+
|
144
|
+
exports.TagOverflowPopover = TagOverflowPopover;
|