@carbon/ibm-products 2.43.2-canary.214 → 2.43.2-canary.218
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +4 -0
- 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 +2 -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 +4 -0
- 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 +2 -0
- 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/Datagrid/useSortableColumns.js +2 -1
- package/es/components/SidePanel/SidePanel.js +6 -6
- package/es/components/TagSet/TagSet.js +15 -7
- package/lib/components/Datagrid/useSortableColumns.js +2 -1
- package/lib/components/SidePanel/SidePanel.js +6 -6
- package/lib/components/TagSet/TagSet.js +15 -7
- package/package.json +3 -3
- package/scss/components/Tearsheet/_tearsheet.scss +2 -0
@@ -21,8 +21,8 @@ import { moderate02 } from '@carbon/motion';
|
|
21
21
|
import pconsole from '../../global/js/utils/pconsole.js';
|
22
22
|
import { pkg } from '../../settings.js';
|
23
23
|
import usePrefersReducedMotion from '../../global/js/hooks/usePrefersReducedMotion.js';
|
24
|
+
import { useFocus, getSpecificElement } from '../../global/js/hooks/useFocus.js';
|
24
25
|
import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
|
25
|
-
import { useFocus } from '../../global/js/hooks/useFocus.js';
|
26
26
|
|
27
27
|
var _excluded = ["actionToolbarButtons", "actions", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "id", "includeOverlay", "labelText", "navigationBackIconDescription", "onNavigationBack", "onRequestClose", "onUnmount", "open", "placement", "preventCloseOnClickOutside", "selectorPageContent", "selectorPrimaryFocus", "size", "slideIn", "slug", "subtitle", "title", "launcherButtonRef"],
|
28
28
|
_excluded2 = ["label", "kind", "hasIconOnly", "icon", "renderIcon", "tooltipPosition", "tooltipAlignment", "leading", "disabled", "className", "onClick"];
|
@@ -321,10 +321,10 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
321
321
|
useEffect(function () {
|
322
322
|
if (open) {
|
323
323
|
setTimeout(function () {
|
324
|
-
if (selectorPrimaryFocus) {
|
325
|
-
var
|
326
|
-
var primeFocusEl = (
|
327
|
-
if (primeFocusEl) {
|
324
|
+
if (selectorPrimaryFocus && getSpecificElement(sidePanelRef === null || sidePanelRef === void 0 ? void 0 : sidePanelRef.current, selectorPrimaryFocus)) {
|
325
|
+
var _window2;
|
326
|
+
var primeFocusEl = getSpecificElement(sidePanelRef === null || sidePanelRef === void 0 ? void 0 : sidePanelRef.current, selectorPrimaryFocus);
|
327
|
+
if (primeFocusEl && ((_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.getComputedStyle(primeFocusEl)) === null || _window2 === void 0 ? void 0 : _window2.display) !== 'none') {
|
328
328
|
primeFocusEl === null || primeFocusEl === void 0 || primeFocusEl.focus();
|
329
329
|
}
|
330
330
|
} else if (!slideIn) {
|
@@ -332,7 +332,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
332
332
|
}
|
333
333
|
}, 0);
|
334
334
|
}
|
335
|
-
}, [animationComplete, firstElement, open, selectorPrimaryFocus, slideIn]);
|
335
|
+
}, [animationComplete, firstElement, open, selectorPrimaryFocus, sidePanelRef, slideIn]);
|
336
336
|
var primaryActionContainerClassNames = cx(["".concat(blockClass, "__actions-container"), _defineProperty({}, "".concat(blockClass, "__actions-container--condensed"), condensedActions)]);
|
337
337
|
var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass), "".concat(blockClass, "--").concat(size), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "--right-placement"), placement === 'right'), "".concat(blockClass, "--left-placement"), placement === 'left'), "".concat(blockClass, "--slide-in"), slideIn), "".concat(blockClass, "--has-slug"), slug), "".concat(blockClass, "--condensed-actions"), condensedActions), "".concat(blockClass, "--has-overlay"), includeOverlay)]);
|
338
338
|
var renderTitle = function renderTitle() {
|
@@ -85,13 +85,21 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
85
85
|
sizingTags = _useState10[0],
|
86
86
|
setSizingTags = _useState10[1];
|
87
87
|
var overflowTag = useRef(null);
|
88
|
-
var _useState11 = useState(
|
88
|
+
var _useState11 = useState(0),
|
89
89
|
_useState12 = _slicedToArray(_useState11, 2),
|
90
|
-
|
91
|
-
|
90
|
+
maxVisibleCount = _useState12[0],
|
91
|
+
setMaxVisibleCount = _useState12[1];
|
92
|
+
var _useState13 = useState(false),
|
93
|
+
_useState14 = _slicedToArray(_useState13, 2),
|
94
|
+
popoverOpen = _useState14[0],
|
95
|
+
setPopoverOpen = _useState14[1];
|
92
96
|
var handleShowAllClick = function handleShowAllClick() {
|
93
97
|
setShowAllModalOpen(true);
|
94
98
|
};
|
99
|
+
useEffect(function () {
|
100
|
+
var maxCount = maxVisible || (tags === null || tags === void 0 ? void 0 : tags.length) || 0;
|
101
|
+
setMaxVisibleCount(maxCount);
|
102
|
+
}, [maxVisible, tags]);
|
95
103
|
useEffect(function () {
|
96
104
|
var newSizingTags = [];
|
97
105
|
// create sizing tags
|
@@ -163,7 +171,7 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
163
171
|
}, [displayCount, overflowAlign, overflowClassName, overflowType, showAllTagsLabel, tags, onOverflowTagChange, popoverOpen, handleTagOnClose, overflowAutoAlign]);
|
164
172
|
var checkFullyVisibleTags = useCallback(function () {
|
165
173
|
if (multiline) {
|
166
|
-
return setDisplayCount(
|
174
|
+
return setDisplayCount(maxVisibleCount);
|
167
175
|
}
|
168
176
|
|
169
177
|
// how many will fit?
|
@@ -193,12 +201,12 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
193
201
|
if (willFit < 1) {
|
194
202
|
setDisplayCount(0);
|
195
203
|
} else {
|
196
|
-
setDisplayCount(
|
204
|
+
setDisplayCount(maxVisibleCount ? Math.min(willFit, maxVisibleCount) : willFit);
|
197
205
|
}
|
198
|
-
}, [
|
206
|
+
}, [maxVisibleCount, multiline, sizingTags, tagSetRef, measurementOffset, containingElementRef]);
|
199
207
|
useEffect(function () {
|
200
208
|
checkFullyVisibleTags();
|
201
|
-
}, [checkFullyVisibleTags,
|
209
|
+
}, [checkFullyVisibleTags, maxVisibleCount, multiline, sizingTags]);
|
202
210
|
|
203
211
|
/* don't know how to test resize */
|
204
212
|
/* istanbul ignore next */
|
@@ -104,6 +104,7 @@ var useSortableColumns = function useSortableColumns(hooks) {
|
|
104
104
|
instance.toggleSortBy(key, newSortDesc, false);
|
105
105
|
};
|
106
106
|
var sortableColumns = visibleColumns.map(function (column) {
|
107
|
+
var _column$minWidth;
|
107
108
|
var icon = function icon(col, props) {
|
108
109
|
var iconProps = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
|
109
110
|
size: 16
|
@@ -158,7 +159,7 @@ var useSortableColumns = function useSortableColumns(hooks) {
|
|
158
159
|
};
|
159
160
|
return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, column), {}, {
|
160
161
|
Header: Header,
|
161
|
-
minWidth: column.disableSortBy
|
162
|
+
minWidth: column.disableSortBy ? 0 : (_column$minWidth = column.minWidth) !== null && _column$minWidth !== void 0 ? _column$minWidth : column.isAction ? 50 : 90
|
162
163
|
});
|
163
164
|
});
|
164
165
|
return (_instance$customizeCo = instance.customizeColumnsProps) !== null && _instance$customizeCo !== void 0 && _instance$customizeCo.isTearsheetOpen ? visibleColumns : _rollupPluginBabelHelpers.toConsumableArray(sortableColumns);
|
@@ -25,8 +25,8 @@ var carbonMotion = require('@carbon/motion');
|
|
25
25
|
var pconsole = require('../../global/js/utils/pconsole.js');
|
26
26
|
var settings = require('../../settings.js');
|
27
27
|
var usePrefersReducedMotion = require('../../global/js/hooks/usePrefersReducedMotion.js');
|
28
|
-
var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
|
29
28
|
var useFocus = require('../../global/js/hooks/useFocus.js');
|
29
|
+
var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
|
30
30
|
|
31
31
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
32
32
|
|
@@ -330,10 +330,10 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
330
330
|
React.useEffect(function () {
|
331
331
|
if (open) {
|
332
332
|
setTimeout(function () {
|
333
|
-
if (selectorPrimaryFocus) {
|
334
|
-
var
|
335
|
-
var primeFocusEl = (
|
336
|
-
if (primeFocusEl) {
|
333
|
+
if (selectorPrimaryFocus && useFocus.getSpecificElement(sidePanelRef === null || sidePanelRef === void 0 ? void 0 : sidePanelRef.current, selectorPrimaryFocus)) {
|
334
|
+
var _window2;
|
335
|
+
var primeFocusEl = useFocus.getSpecificElement(sidePanelRef === null || sidePanelRef === void 0 ? void 0 : sidePanelRef.current, selectorPrimaryFocus);
|
336
|
+
if (primeFocusEl && ((_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.getComputedStyle(primeFocusEl)) === null || _window2 === void 0 ? void 0 : _window2.display) !== 'none') {
|
337
337
|
primeFocusEl === null || primeFocusEl === void 0 || primeFocusEl.focus();
|
338
338
|
}
|
339
339
|
} else if (!slideIn) {
|
@@ -341,7 +341,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
341
341
|
}
|
342
342
|
}, 0);
|
343
343
|
}
|
344
|
-
}, [animationComplete, firstElement, open, selectorPrimaryFocus, slideIn]);
|
344
|
+
}, [animationComplete, firstElement, open, selectorPrimaryFocus, sidePanelRef, slideIn]);
|
345
345
|
var primaryActionContainerClassNames = cx__default["default"](["".concat(blockClass, "__actions-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__actions-container--condensed"), condensedActions)]);
|
346
346
|
var mainPanelClassNames = cx__default["default"]([blockClass, className, "".concat(blockClass), "".concat(blockClass, "--").concat(size), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--right-placement"), placement === 'right'), "".concat(blockClass, "--left-placement"), placement === 'left'), "".concat(blockClass, "--slide-in"), slideIn), "".concat(blockClass, "--has-slug"), slug), "".concat(blockClass, "--condensed-actions"), condensedActions), "".concat(blockClass, "--has-overlay"), includeOverlay)]);
|
347
347
|
var renderTitle = function renderTitle() {
|
@@ -94,13 +94,21 @@ exports.TagSet = /*#__PURE__*/React__default["default"].forwardRef(function (_re
|
|
94
94
|
sizingTags = _useState10[0],
|
95
95
|
setSizingTags = _useState10[1];
|
96
96
|
var overflowTag = React.useRef(null);
|
97
|
-
var _useState11 = React.useState(
|
97
|
+
var _useState11 = React.useState(0),
|
98
98
|
_useState12 = _rollupPluginBabelHelpers.slicedToArray(_useState11, 2),
|
99
|
-
|
100
|
-
|
99
|
+
maxVisibleCount = _useState12[0],
|
100
|
+
setMaxVisibleCount = _useState12[1];
|
101
|
+
var _useState13 = React.useState(false),
|
102
|
+
_useState14 = _rollupPluginBabelHelpers.slicedToArray(_useState13, 2),
|
103
|
+
popoverOpen = _useState14[0],
|
104
|
+
setPopoverOpen = _useState14[1];
|
101
105
|
var handleShowAllClick = function handleShowAllClick() {
|
102
106
|
setShowAllModalOpen(true);
|
103
107
|
};
|
108
|
+
React.useEffect(function () {
|
109
|
+
var maxCount = maxVisible || (tags === null || tags === void 0 ? void 0 : tags.length) || 0;
|
110
|
+
setMaxVisibleCount(maxCount);
|
111
|
+
}, [maxVisible, tags]);
|
104
112
|
React.useEffect(function () {
|
105
113
|
var newSizingTags = [];
|
106
114
|
// create sizing tags
|
@@ -172,7 +180,7 @@ exports.TagSet = /*#__PURE__*/React__default["default"].forwardRef(function (_re
|
|
172
180
|
}, [displayCount, overflowAlign, overflowClassName, overflowType, showAllTagsLabel, tags, onOverflowTagChange, popoverOpen, handleTagOnClose, overflowAutoAlign]);
|
173
181
|
var checkFullyVisibleTags = React.useCallback(function () {
|
174
182
|
if (multiline) {
|
175
|
-
return setDisplayCount(
|
183
|
+
return setDisplayCount(maxVisibleCount);
|
176
184
|
}
|
177
185
|
|
178
186
|
// how many will fit?
|
@@ -202,12 +210,12 @@ exports.TagSet = /*#__PURE__*/React__default["default"].forwardRef(function (_re
|
|
202
210
|
if (willFit < 1) {
|
203
211
|
setDisplayCount(0);
|
204
212
|
} else {
|
205
|
-
setDisplayCount(
|
213
|
+
setDisplayCount(maxVisibleCount ? Math.min(willFit, maxVisibleCount) : willFit);
|
206
214
|
}
|
207
|
-
}, [
|
215
|
+
}, [maxVisibleCount, multiline, sizingTags, tagSetRef, measurementOffset, containingElementRef]);
|
208
216
|
React.useEffect(function () {
|
209
217
|
checkFullyVisibleTags();
|
210
|
-
}, [checkFullyVisibleTags,
|
218
|
+
}, [checkFullyVisibleTags, maxVisibleCount, multiline, sizingTags]);
|
211
219
|
|
212
220
|
/* don't know how to test resize */
|
213
221
|
/* istanbul ignore next */
|
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.43.2-canary.
|
4
|
+
"version": "2.43.2-canary.218+1db66886b",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -96,7 +96,7 @@
|
|
96
96
|
"dependencies": {
|
97
97
|
"@babel/runtime": "^7.23.9",
|
98
98
|
"@carbon/feature-flags": "^0.20.0",
|
99
|
-
"@carbon/ibm-products-styles": "^2.
|
99
|
+
"@carbon/ibm-products-styles": "^2.39.1-canary.228+1db66886b",
|
100
100
|
"@carbon/telemetry": "^0.1.0",
|
101
101
|
"@dnd-kit/core": "^6.0.8",
|
102
102
|
"@dnd-kit/modifiers": "^7.0.0",
|
@@ -120,5 +120,5 @@
|
|
120
120
|
"react": "^16.8.6 || ^17.0.1 || ^18.2.0",
|
121
121
|
"react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
|
122
122
|
},
|
123
|
-
"gitHead": "
|
123
|
+
"gitHead": "1db66886b00f9540825988c7397fe6c84411d26a"
|
124
124
|
}
|