@carbon/ibm-products 2.40.0 → 2.40.1-canary.6
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +36 -34
- 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.css +36 -34
- 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 +699 -34
- 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/ConditionBuilder/ConditionBlock/ConditionBlock.js +3 -3
- package/es/components/ConditionBuilder/ConditionBuilder.js +6 -1
- package/es/components/ConditionBuilder/ConditionBuilderAdd/ConditionBuilderAdd.js +3 -3
- package/es/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.js +1 -1
- package/es/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js +2 -2
- package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js +3 -3
- package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.js +1 -1
- package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.js +1 -1
- package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ConditionBuilderItemOption.js +30 -18
- package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemText/ConditionBuilderItemText.js +3 -3
- package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemTime/ConditionBuilderItemTime.js +7 -7
- package/es/components/ConditionBuilder/ConditionConnector/ConditionConnector.js +6 -6
- package/es/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js +11 -11
- package/es/components/ConditionBuilder/utils/checkForHoldingKey.d.ts +1 -0
- package/es/components/ConditionBuilder/utils/checkForHoldingKey.js +16 -0
- package/es/components/ConditionBuilder/utils/handleKeyboardEvents.d.ts +1 -0
- package/es/components/ConditionBuilder/utils/handleKeyboardEvents.js +125 -0
- package/es/components/ConditionBuilder/utils/util.d.ts +1 -1
- package/es/components/ConditionBuilder/utils/util.js +34 -5
- package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +3 -4
- package/es/components/TagOverflow/TagOverflow.js +35 -20
- package/es/components/TagOverflow/TagOverflowModal.d.ts +3 -1
- package/es/components/TagOverflow/TagOverflowModal.js +14 -20
- package/es/components/TagOverflow/TagOverflowPopover.js +19 -4
- package/lib/components/ConditionBuilder/ConditionBlock/ConditionBlock.js +3 -3
- package/lib/components/ConditionBuilder/ConditionBuilder.js +6 -1
- package/lib/components/ConditionBuilder/ConditionBuilderAdd/ConditionBuilderAdd.js +3 -3
- package/lib/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.js +1 -1
- package/lib/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js +2 -2
- package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js +3 -3
- package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.js +1 -1
- package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.js +1 -1
- package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ConditionBuilderItemOption.js +29 -17
- package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemText/ConditionBuilderItemText.js +3 -3
- package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemTime/ConditionBuilderItemTime.js +7 -7
- package/lib/components/ConditionBuilder/ConditionConnector/ConditionConnector.js +6 -6
- package/lib/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js +11 -11
- package/lib/components/ConditionBuilder/utils/checkForHoldingKey.d.ts +1 -0
- package/lib/components/ConditionBuilder/utils/checkForHoldingKey.js +20 -0
- package/lib/components/ConditionBuilder/utils/handleKeyboardEvents.d.ts +1 -0
- package/lib/components/ConditionBuilder/utils/handleKeyboardEvents.js +129 -0
- package/lib/components/ConditionBuilder/utils/util.d.ts +1 -1
- package/lib/components/ConditionBuilder/utils/util.js +36 -4
- package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +3 -4
- package/lib/components/TagOverflow/TagOverflow.js +34 -19
- package/lib/components/TagOverflow/TagOverflowModal.d.ts +3 -1
- package/lib/components/TagOverflow/TagOverflowModal.js +14 -20
- package/lib/components/TagOverflow/TagOverflowPopover.js +19 -4
- package/package.json +2 -2
- package/scss/components/ConditionBuilder/styles/_conditionBuilderCondition.scss +4 -4
- package/scss/components/ConditionBuilder/styles/_conditionBuilderItem.scss +34 -34
- package/scss/components/TagOverflow/_tag-overflow.scss +5 -2
- package/scss/components/_index-with-carbon.scss +1 -0
@@ -0,0 +1,20 @@
|
|
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 checkForHoldingKey = function checkForHoldingKey(evt, key) {
|
13
|
+
// possible key inputs: altKey,ctrlKey,metaKey,shiftKey
|
14
|
+
if (key === 'cmd') {
|
15
|
+
return evt.metaKey || evt.ctrlKey;
|
16
|
+
}
|
17
|
+
return evt[key];
|
18
|
+
};
|
19
|
+
|
20
|
+
exports.checkForHoldingKey = checkForHoldingKey;
|
@@ -0,0 +1 @@
|
|
1
|
+
export function handleKeyDown(evt: any, conditionBuilderRef: any): void;
|
@@ -0,0 +1,129 @@
|
|
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 DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
|
14
|
+
var checkForHoldingKey = require('./checkForHoldingKey.js');
|
15
|
+
var util = require('./util.js');
|
16
|
+
|
17
|
+
var handleKeyDown = function handleKeyDown(evt, conditionBuilderRef) {
|
18
|
+
var activeElement = document.activeElement;
|
19
|
+
if (activeElement.closest("[role=\"dialog\"]")) {
|
20
|
+
handleKeyPressForPopover(evt, activeElement.closest("[role=\"dialog\"]"));
|
21
|
+
} else {
|
22
|
+
handleKeyPressForMainContent(evt, conditionBuilderRef);
|
23
|
+
}
|
24
|
+
};
|
25
|
+
var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentContainer) {
|
26
|
+
var _parentContainer$quer;
|
27
|
+
var key = evt.key;
|
28
|
+
var isHoldingShiftKey = checkForHoldingKey.checkForHoldingKey(evt, 'shiftKey');
|
29
|
+
var isMultiSelect = (_parentContainer$quer = parentContainer.querySelector('ul')) === null || _parentContainer$quer === void 0 ? void 0 : _parentContainer$quer.dataset.multiSelect;
|
30
|
+
var allItems = [];
|
31
|
+
switch (key) {
|
32
|
+
case 'ArrowUp':
|
33
|
+
//traverse through the popover options, search box, selectAll button
|
34
|
+
parentContainer.querySelectorAll("[role=\"option\"]").forEach(function (eachElem, index, allElements) {
|
35
|
+
util.traverseReverse(eachElem, index, allElements);
|
36
|
+
});
|
37
|
+
break;
|
38
|
+
case 'ArrowDown':
|
39
|
+
//traverse through the popover options, search box, selectAll button
|
40
|
+
parentContainer.querySelectorAll("[role=\"option\"]").forEach(function (eachElem, index, allElements) {
|
41
|
+
util.traverseClockVise(eachElem, index, allElements);
|
42
|
+
});
|
43
|
+
break;
|
44
|
+
case 'Tab':
|
45
|
+
allItems = [].concat(_rollupPluginBabelHelpers.toConsumableArray(Array.from(parentContainer.querySelectorAll(".".concat(DataConfigs.blockClass, "__selectAll-button,[role=\"searchbox\"]")))), [parentContainer.querySelector("[role=\"option\"]")]);
|
46
|
+
allItems.forEach(function (eachElem, index, allElements) {
|
47
|
+
if (isHoldingShiftKey) {
|
48
|
+
util.traverseReverse(eachElem, index, allElements, true, true);
|
49
|
+
} else {
|
50
|
+
util.traverseClockVise(eachElem, index, allElements, true, true);
|
51
|
+
}
|
52
|
+
});
|
53
|
+
evt.preventDefault();
|
54
|
+
break;
|
55
|
+
case ' ':
|
56
|
+
if (isMultiSelect === 'true') {
|
57
|
+
if (document.activeElement.type !== 'button') {
|
58
|
+
var _document$activeEleme;
|
59
|
+
//for button , enter key is click which already handled by framework, for other elements trigger click
|
60
|
+
(_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 || _document$activeEleme.click();
|
61
|
+
}
|
62
|
+
evt.preventDefault();
|
63
|
+
}
|
64
|
+
break;
|
65
|
+
case 'Enter':
|
66
|
+
if (isMultiSelect !== 'true') {
|
67
|
+
if (document.activeElement.type !== 'button') {
|
68
|
+
var _document$activeEleme2;
|
69
|
+
//for button , enter key is click which already handled by framework, else trigger click
|
70
|
+
(_document$activeEleme2 = document.activeElement) === null || _document$activeEleme2 === void 0 || _document$activeEleme2.click();
|
71
|
+
util.focusThisField(evt);
|
72
|
+
}
|
73
|
+
}
|
74
|
+
break;
|
75
|
+
case 'Escape':
|
76
|
+
//focus the corresponding field in which the popover is triggered
|
77
|
+
util.focusThisField(evt);
|
78
|
+
break;
|
79
|
+
}
|
80
|
+
};
|
81
|
+
var getRows = function getRows(conditionBuilderRef) {
|
82
|
+
return Array.from(conditionBuilderRef.current.querySelectorAll('[role="row"]'));
|
83
|
+
};
|
84
|
+
var getRowIndex = function getRowIndex(element, conditionBuilderRef) {
|
85
|
+
var rows = getRows(conditionBuilderRef);
|
86
|
+
return rows.findIndex(function (row) {
|
87
|
+
return row.contains(element);
|
88
|
+
});
|
89
|
+
};
|
90
|
+
var handleRowNavigation = function handleRowNavigation(evt, conditionBuilderRef) {
|
91
|
+
var rows = getRows(conditionBuilderRef);
|
92
|
+
var currentRowIndex = getRowIndex(evt.target, conditionBuilderRef);
|
93
|
+
navigateToNextRowCell(evt, currentRowIndex, rows);
|
94
|
+
};
|
95
|
+
var navigateToNextRowCell = function navigateToNextRowCell(evt, currentRowIndex, rows) {
|
96
|
+
var _nextRow$querySelecto;
|
97
|
+
//when the focussed element is a cell of the row which has only 1 cell (connector or statement) , focus the next row
|
98
|
+
|
99
|
+
var nextRowIndex = currentRowIndex;
|
100
|
+
if (evt.key === 'ArrowUp') {
|
101
|
+
nextRowIndex = currentRowIndex == 0 ? currentRowIndex : currentRowIndex - 1;
|
102
|
+
}
|
103
|
+
if (evt.key === 'ArrowDown') {
|
104
|
+
nextRowIndex = currentRowIndex === rows.length - 1 ? rows.length - 1 : currentRowIndex + 1;
|
105
|
+
}
|
106
|
+
var nextRow = rows[nextRowIndex];
|
107
|
+
var itemName = evt.target.dataset.name;
|
108
|
+
nextRow === null || nextRow === void 0 || (_nextRow$querySelecto = nextRow.querySelector("[data-name=\"".concat(itemName, "\"]"))) === null || _nextRow$querySelecto === void 0 || _nextRow$querySelecto.focus();
|
109
|
+
};
|
110
|
+
var handleKeyPressForMainContent = function handleKeyPressForMainContent(evt, conditionBuilderRef) {
|
111
|
+
switch (evt.key) {
|
112
|
+
case 'ArrowRight':
|
113
|
+
case 'ArrowLeft':
|
114
|
+
conditionBuilderRef.current.querySelectorAll("[role=\"gridcell\"] button").forEach(function (eachElem, index, allElements) {
|
115
|
+
if (evt.key === 'ArrowRight') {
|
116
|
+
util.traverseClockVise(eachElem, index, allElements);
|
117
|
+
} else {
|
118
|
+
util.traverseReverse(eachElem, index, allElements);
|
119
|
+
}
|
120
|
+
});
|
121
|
+
break;
|
122
|
+
case 'ArrowUp':
|
123
|
+
case 'ArrowDown':
|
124
|
+
handleRowNavigation(evt, conditionBuilderRef);
|
125
|
+
break;
|
126
|
+
}
|
127
|
+
};
|
128
|
+
|
129
|
+
exports.handleKeyDown = handleKeyDown;
|
@@ -1,4 +1,4 @@
|
|
1
|
-
export function focusThisField(
|
1
|
+
export function focusThisField(evt: any): void;
|
2
2
|
export function focusThisItem(currentElement: any): void;
|
3
3
|
export function traverseClockVise(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any): void;
|
4
4
|
export function traverseReverse(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any): void;
|
@@ -9,12 +9,44 @@
|
|
9
9
|
|
10
10
|
Object.defineProperty(exports, '__esModule', { value: true });
|
11
11
|
|
12
|
-
var focusThisField = function focusThisField(
|
12
|
+
var focusThisField = function focusThisField(evt) {
|
13
13
|
setTimeout(function () {
|
14
|
-
var
|
15
|
-
(
|
16
|
-
(
|
14
|
+
var _evt$target$closest, _evt$target$closest2;
|
15
|
+
(_evt$target$closest = evt.target.closest('[role="gridcell"]')) === null || _evt$target$closest === void 0 || (_evt$target$closest = _evt$target$closest.querySelector('button')) === null || _evt$target$closest === void 0 || _evt$target$closest.click();
|
16
|
+
(_evt$target$closest2 = evt.target.closest('[role="gridcell"]')) === null || _evt$target$closest2 === void 0 || (_evt$target$closest2 = _evt$target$closest2.querySelector('button')) === null || _evt$target$closest2 === void 0 || _evt$target$closest2.focus();
|
17
17
|
}, 0);
|
18
18
|
};
|
19
|
+
var focusThisItem = function focusThisItem(currentElement) {
|
20
|
+
setTimeout(function () {
|
21
|
+
//document.activeElement.setAttribute('tabindex', '-1');
|
22
|
+
// currentElement.setAttribute('tabindex', '0');
|
23
|
+
currentElement === null || currentElement === void 0 || currentElement.focus();
|
24
|
+
}, 0);
|
25
|
+
};
|
26
|
+
var traverseClockVise = function traverseClockVise(eachElem, index, allElements, rotate, trapFocus) {
|
27
|
+
if (eachElem == document.activeElement) {
|
28
|
+
if (index !== allElements.length - 1) {
|
29
|
+
focusThisItem(allElements[index + 1]);
|
30
|
+
} else {
|
31
|
+
focusThisItem(allElements[rotate ? 0 : allElements.length - 1]);
|
32
|
+
}
|
33
|
+
} else if (Array.from(allElements).indexOf(document.activeElement) == -1 && trapFocus) {
|
34
|
+
focusThisItem(allElements[0]);
|
35
|
+
}
|
36
|
+
};
|
37
|
+
var traverseReverse = function traverseReverse(eachElem, index, allElements, rotate, trapFocus) {
|
38
|
+
if (eachElem == document.activeElement) {
|
39
|
+
if (index !== 0) {
|
40
|
+
focusThisItem(allElements[index - 1]);
|
41
|
+
} else {
|
42
|
+
focusThisItem(allElements[rotate ? allElements.length - 1 : 0]);
|
43
|
+
}
|
44
|
+
} else if (Array.from(allElements).indexOf(document.activeElement) == -1 && trapFocus) {
|
45
|
+
focusThisItem(allElements[allElements.length - 1]);
|
46
|
+
}
|
47
|
+
};
|
19
48
|
|
20
49
|
exports.focusThisField = focusThisField;
|
50
|
+
exports.focusThisItem = focusThisItem;
|
51
|
+
exports.traverseClockVise = traverseClockVise;
|
52
|
+
exports.traverseReverse = traverseReverse;
|
@@ -29,7 +29,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
29
29
|
var _th;
|
30
30
|
var _excluded = ["role"],
|
31
31
|
_excluded2 = ["className", "role"],
|
32
|
-
_excluded3 = ["role"
|
32
|
+
_excluded3 = ["role"];
|
33
33
|
var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
|
34
34
|
var getAccessibilityProps = function getAccessibilityProps(header) {
|
35
35
|
var props = {};
|
@@ -185,11 +185,10 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
|
|
185
185
|
var originalCol = visibleColumns[index];
|
186
186
|
var _header$getHeaderProp = header.getHeaderProps();
|
187
187
|
_header$getHeaderProp.role;
|
188
|
-
var
|
189
|
-
headerProps = _rollupPluginBabelHelpers.objectWithoutProperties(_header$getHeaderProp, _excluded3);
|
188
|
+
var headerProps = _rollupPluginBabelHelpers.objectWithoutProperties(_header$getHeaderProp, _excluded3);
|
190
189
|
var resizerProps = header === null || header === void 0 || (_header$getResizerPro = header.getResizerProps) === null || _header$getResizerPro === void 0 ? void 0 : _header$getResizerPro.call(header);
|
191
190
|
return /*#__PURE__*/React__default["default"].createElement(react.TableHeader, _rollupPluginBabelHelpers["extends"]({}, headerProps, {
|
192
|
-
className: cx__default["default"](
|
191
|
+
className: cx__default["default"](header.className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__resizableColumn"), resizerProps), "".concat(blockClass, "__isResizing"), header.isResizing), "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), "".concat(blockClass, "__isSorted"), header.isSorted), "".concat(blockClass, "__header-actions-column"), header.isAction), "".concat(blockClass, "__with-slug"), header.slug && /*#__PURE__*/React__default["default"].isValidElement(header.slug))),
|
193
192
|
key: header.id,
|
194
193
|
"aria-hidden": header.id === 'spacer' && 'true'
|
195
194
|
}, getAccessibilityProps(header)), header.render('Header'), renderSlug(header.slug), resizerProps && !header.isAction && /*#__PURE__*/React__default["default"].createElement(ResizeHeader, {
|
@@ -28,13 +28,13 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
28
28
|
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
29
29
|
|
30
30
|
var _excluded = ["items", "tagComponent", "align", "showAllTagsLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTarget", "allTagsModalTitle", "className", "containingElementRef", "measurementOffset", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowType", "onOverflowTagChange"],
|
31
|
-
_excluded2 = ["className", "id"]
|
31
|
+
_excluded2 = ["className", "id"],
|
32
|
+
_excluded3 = ["tagType"],
|
33
|
+
_excluded4 = ["id", "label", "tagType", "onClose"];
|
32
34
|
var blockClass = "".concat(settings.pkg.prefix, "--tag-overflow");
|
33
35
|
var componentName = 'TagOverflow';
|
34
36
|
var allTagsModalSearchThreshold = 10;
|
35
37
|
|
36
|
-
// TODO: support prop overflowType
|
37
|
-
|
38
38
|
// Default values for props
|
39
39
|
var defaults = {
|
40
40
|
items: [],
|
@@ -173,39 +173,53 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
173
173
|
visibleItemsArr = (_visibleItemsArr = visibleItemsArr) === null || _visibleItemsArr === void 0 ? void 0 : _visibleItemsArr.slice(0, maxVisible);
|
174
174
|
}
|
175
175
|
var hiddenItems = items === null || items === void 0 ? void 0 : items.slice(visibleItemsArr.length);
|
176
|
-
var overflowItemsArr = hiddenItems === null || hiddenItems === void 0 ? void 0 : hiddenItems.map(function (
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
};
|
176
|
+
var overflowItemsArr = hiddenItems === null || hiddenItems === void 0 ? void 0 : hiddenItems.map(function (_ref2) {
|
177
|
+
var tagType = _ref2.tagType,
|
178
|
+
other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded3);
|
179
|
+
return _rollupPluginBabelHelpers.objectSpread2({
|
180
|
+
type: tagType
|
181
|
+
}, other);
|
182
182
|
});
|
183
183
|
setVisibleItems(visibleItemsArr);
|
184
184
|
setOverflowItems(overflowItemsArr);
|
185
185
|
onOverflowTagChange === null || onOverflowTagChange === void 0 || onOverflowTagChange(overflowItemsArr);
|
186
186
|
}, [containerWidth, items, maxVisible, getVisibleItems, onOverflowTagChange]);
|
187
|
+
var handleTagOnClose = React.useCallback(function (onClose, index) {
|
188
|
+
onClose === null || onClose === void 0 || onClose();
|
189
|
+
if (index <= visibleItems.length - 1) {
|
190
|
+
setPopoverOpen(false);
|
191
|
+
}
|
192
|
+
}, [visibleItems]);
|
187
193
|
return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
|
188
194
|
className: cx__default["default"](blockClass, className, "".concat(blockClass, "--align-").concat(align), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--multiline"), multiline)),
|
189
195
|
ref: containerRef,
|
190
196
|
role: "main"
|
191
|
-
}, devtools.getDevtoolsProps(componentName)), visibleItems.length > 0 && visibleItems.map(function (item) {
|
197
|
+
}, devtools.getDevtoolsProps(componentName)), visibleItems.length > 0 && visibleItems.map(function (item, index) {
|
192
198
|
// Render custom components
|
193
199
|
if (tagComponent) {
|
194
200
|
return getCustomComponent(item);
|
195
201
|
} else {
|
202
|
+
var id = item.id,
|
203
|
+
label = item.label,
|
204
|
+
tagType = item.tagType,
|
205
|
+
_onClose = item.onClose,
|
206
|
+
other = _rollupPluginBabelHelpers.objectWithoutProperties(item, _excluded4);
|
196
207
|
// If there is no template prop, then render items as Tags
|
197
208
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
198
209
|
ref: function ref(node) {
|
199
|
-
return itemRefHandler(
|
210
|
+
return itemRefHandler(id, node);
|
200
211
|
},
|
201
|
-
key:
|
212
|
+
key: id
|
202
213
|
}, /*#__PURE__*/React__default["default"].createElement(react.Tooltip, {
|
203
|
-
align:
|
204
|
-
label:
|
205
|
-
}, /*#__PURE__*/React__default["default"].createElement(react.Tag, {
|
214
|
+
align: overflowAlign,
|
215
|
+
label: label
|
216
|
+
}, /*#__PURE__*/React__default["default"].createElement(react.Tag, _rollupPluginBabelHelpers["extends"]({}, other, {
|
206
217
|
className: "".concat(blockClass, "__item--tag"),
|
207
|
-
type:
|
208
|
-
|
218
|
+
type: tagType,
|
219
|
+
onClose: function onClose() {
|
220
|
+
return handleTagOnClose(_onClose, index);
|
221
|
+
}
|
222
|
+
}), label)));
|
209
223
|
}
|
210
224
|
}), /*#__PURE__*/React__default["default"].createElement("span", {
|
211
225
|
className: "".concat(blockClass, "__indicator"),
|
@@ -227,6 +241,7 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
227
241
|
open: showAllModalOpen,
|
228
242
|
title: allTagsModalTitle,
|
229
243
|
onClose: handleModalClose,
|
244
|
+
overflowType: overflowType,
|
230
245
|
searchLabel: allTagsModalSearchLabel,
|
231
246
|
searchPlaceholder: allTagsModalSearchPlaceholderText,
|
232
247
|
portalTarget: allTagsModalTarget
|
@@ -245,8 +260,8 @@ var tagTypes = Object.keys(constants.TYPES);
|
|
245
260
|
* The strings shown in the showAllModal are only shown if we have more than allTagsModalSearchLThreshold
|
246
261
|
* @returns null if no problems
|
247
262
|
*/
|
248
|
-
var string_required_if_more_than_10_tags = propsHelper.isRequiredIf(index["default"].string, function (
|
249
|
-
var items =
|
263
|
+
var string_required_if_more_than_10_tags = propsHelper.isRequiredIf(index["default"].string, function (_ref3) {
|
264
|
+
var items = _ref3.items;
|
250
265
|
return items && items.length > allTagsModalSearchThreshold;
|
251
266
|
});
|
252
267
|
|
@@ -1,10 +1,11 @@
|
|
1
|
-
export function TagOverflowModal({ allTags, className, title, onClose, open, portalTarget: portalTargetIn, searchLabel, searchPlaceholder, ...rest }: {
|
1
|
+
export function TagOverflowModal({ allTags, className, title, onClose, open, overflowType, portalTarget: portalTargetIn, searchLabel, searchPlaceholder, ...rest }: {
|
2
2
|
[x: string]: any;
|
3
3
|
allTags: any;
|
4
4
|
className: any;
|
5
5
|
title: any;
|
6
6
|
onClose: any;
|
7
7
|
open: any;
|
8
|
+
overflowType: any;
|
8
9
|
portalTarget: any;
|
9
10
|
searchLabel?: string | undefined;
|
10
11
|
searchPlaceholder: any;
|
@@ -17,6 +18,7 @@ export namespace TagOverflowModal {
|
|
17
18
|
let className: PropTypes.Requireable<string>;
|
18
19
|
let onClose: PropTypes.Requireable<(...args: any[]) => any>;
|
19
20
|
let open: PropTypes.Requireable<boolean>;
|
21
|
+
let overflowType: PropTypes.Requireable<string>;
|
20
22
|
let portalTarget: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
21
23
|
let searchLabel: PropTypes.Requireable<string>;
|
22
24
|
let searchPlaceholder: PropTypes.Requireable<string>;
|
@@ -23,8 +23,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
23
23
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
24
24
|
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
25
25
|
|
26
|
-
var _excluded = ["allTags", "className", "title", "onClose", "open", "portalTarget", "searchLabel", "searchPlaceholder"],
|
27
|
-
_excluded2 = ["label", "id"];
|
26
|
+
var _excluded = ["allTags", "className", "title", "onClose", "open", "overflowType", "portalTarget", "searchLabel", "searchPlaceholder"],
|
27
|
+
_excluded2 = ["label", "id", "filter"];
|
28
28
|
var componentName = 'TagOverflowModal';
|
29
29
|
var blockClass = "".concat(settings.pkg.prefix, "--tag-overflow-modal");
|
30
30
|
|
@@ -39,6 +39,7 @@ var TagOverflowModal = function TagOverflowModal(_ref) {
|
|
39
39
|
title = _ref.title,
|
40
40
|
onClose = _ref.onClose,
|
41
41
|
open = _ref.open,
|
42
|
+
overflowType = _ref.overflowType,
|
42
43
|
portalTargetIn = _ref.portalTarget,
|
43
44
|
_ref$searchLabel = _ref.searchLabel,
|
44
45
|
searchLabel = _ref$searchLabel === void 0 ? defaults.searchLabel : _ref$searchLabel,
|
@@ -50,23 +51,13 @@ var TagOverflowModal = function TagOverflowModal(_ref) {
|
|
50
51
|
setSearch = _useState2[1];
|
51
52
|
var renderPortalUse = usePortalTarget.usePortalTarget(portalTargetIn);
|
52
53
|
var getFilteredItems = function getFilteredItems() {
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
}
|
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
|
-
}
|
54
|
+
if (open && search) {
|
55
|
+
return allTags.filter(function (tag) {
|
56
|
+
var _tag$label;
|
57
|
+
return (_tag$label = tag.label) === null || _tag$label === void 0 || (_tag$label = _tag$label.toLocaleLowerCase()) === null || _tag$label === void 0 ? void 0 : _tag$label.includes(search.toLocaleLowerCase());
|
58
|
+
});
|
68
59
|
}
|
69
|
-
return
|
60
|
+
return allTags;
|
70
61
|
};
|
71
62
|
var handleSearch = function handleSearch(evt) {
|
72
63
|
setSearch(evt.target.value || '');
|
@@ -95,10 +86,12 @@ var TagOverflowModal = function TagOverflowModal(_ref) {
|
|
95
86
|
}, getFilteredItems().map(function (_ref2) {
|
96
87
|
var label = _ref2.label,
|
97
88
|
id = _ref2.id,
|
89
|
+
filter = _ref2.filter,
|
98
90
|
other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
|
91
|
+
var isFilterable = overflowType === 'tag' ? filter : false;
|
99
92
|
return /*#__PURE__*/React__default["default"].createElement(react.Tag, _rollupPluginBabelHelpers["extends"]({}, other, {
|
100
|
-
|
101
|
-
|
93
|
+
key: id,
|
94
|
+
filter: isFilterable
|
102
95
|
}), label);
|
103
96
|
})), /*#__PURE__*/React__default["default"].createElement("div", {
|
104
97
|
className: "".concat(blockClass, "__fade")
|
@@ -111,6 +104,7 @@ TagOverflowModal.propTypes = {
|
|
111
104
|
className: index["default"].string,
|
112
105
|
onClose: index["default"].func,
|
113
106
|
open: index["default"].bool,
|
107
|
+
overflowType: index["default"].oneOf(['default', 'tag']),
|
114
108
|
portalTarget: index["default"].node,
|
115
109
|
searchLabel: index["default"].string,
|
116
110
|
searchPlaceholder: index["default"].string,
|
@@ -22,7 +22,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
22
22
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
23
23
|
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
24
24
|
|
25
|
-
var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowTags", "overflowType", "showAllTagsLabel", "popoverOpen", "setPopoverOpen"]
|
25
|
+
var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowTags", "overflowType", "showAllTagsLabel", "popoverOpen", "setPopoverOpen"],
|
26
|
+
_excluded2 = ["label", "id", "tagType", "filter", "onClose"];
|
26
27
|
var componentName = 'TagOverflowPopover';
|
27
28
|
var blockClass = "".concat(settings.pkg.prefix, "--tag-overflow-popover");
|
28
29
|
|
@@ -89,11 +90,25 @@ var TagOverflowPopover = /*#__PURE__*/React__default["default"].forwardRef(funct
|
|
89
90
|
className: "".concat(blockClass, "__content")
|
90
91
|
}, /*#__PURE__*/React__default["default"].createElement("ul", {
|
91
92
|
className: "".concat(blockClass, "__tag-list")
|
92
|
-
}, getOverflowPopoverItems().map(function (
|
93
|
+
}, getOverflowPopoverItems().map(function (_ref2) {
|
94
|
+
var label = _ref2.label,
|
95
|
+
id = _ref2.id,
|
96
|
+
tagType = _ref2.tagType,
|
97
|
+
filter = _ref2.filter,
|
98
|
+
_onClose = _ref2.onClose,
|
99
|
+
other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
|
100
|
+
var typeValue = overflowType === 'tag' ? 'high-contrast' : tagType;
|
101
|
+
var isFilterable = overflowType === 'tag' ? filter : false;
|
93
102
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
94
103
|
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:
|
96
|
-
}, tag.
|
104
|
+
key: id
|
105
|
+
}, overflowType === 'tag' ? /*#__PURE__*/React__default["default"].createElement(react.Tag, _rollupPluginBabelHelpers["extends"]({}, other, {
|
106
|
+
onClose: function onClose() {
|
107
|
+
return _onClose === null || _onClose === void 0 ? void 0 : _onClose();
|
108
|
+
},
|
109
|
+
type: typeValue,
|
110
|
+
filter: isFilterable
|
111
|
+
}), label) : label);
|
97
112
|
})), overflowTags.length > allTagsModalSearchThreshold && /*#__PURE__*/React__default["default"].createElement(react.Link, {
|
98
113
|
className: "".concat(blockClass, "__show-all-tags-link"),
|
99
114
|
href: "",
|
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@carbon/ibm-products",
|
3
3
|
"description": "Carbon for IBM Products",
|
4
|
-
"version": "2.40.
|
4
|
+
"version": "2.40.1-canary.6+51125a1f9",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -116,5 +116,5 @@
|
|
116
116
|
"react": "^16.8.6 || ^17.0.1 || ^18.2.0",
|
117
117
|
"react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
|
118
118
|
},
|
119
|
-
"gitHead": "
|
119
|
+
"gitHead": "51125a1f94bbfb83266c50033ca3ee9b695e7888"
|
120
120
|
}
|
@@ -20,8 +20,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
|
|
20
20
|
outline-offset: 0;
|
21
21
|
}
|
22
22
|
|
23
|
-
.#{$block-class}
|
24
|
-
.#{$block-class}
|
23
|
+
.#{$block-class}__condition__deletion-preview
|
24
|
+
.#{$block-class}__button:not(
|
25
25
|
.#{$block-class}__statement-button,
|
26
26
|
.#{$block-class}__connector-button
|
27
27
|
) {
|
@@ -29,8 +29,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
|
|
29
29
|
color: $tag-color-red;
|
30
30
|
}
|
31
31
|
|
32
|
-
.#{$block-class}
|
33
|
-
.#{$block-class}
|
32
|
+
.#{$block-class}__condition__deletion-preview
|
33
|
+
.#{$block-class}__button:not(
|
34
34
|
.#{$block-class}__statement-button,
|
35
35
|
.#{$block-class}__connector-button
|
36
36
|
):hover {
|