@carbon/ibm-products 2.43.2-canary.211 → 2.43.2-canary.213
Sign up to get free protection for your applications and to get access to all the features.
- package/es/components/ActionBar/ActionBar.d.ts +5 -1
- package/es/components/ActionBar/ActionBar.js +13 -3
- package/es/components/ActionBar/ActionBarOverflowItems.d.ts +12 -3
- package/es/components/ActionBar/ActionBarOverflowItems.js +13 -3
- package/es/components/Datagrid/Datagrid/addons/stateReducer.js +7 -5
- package/es/components/Datagrid/useDisableSelectRows.js +18 -3
- package/es/components/PageHeader/PageHeader.js +12 -2
- package/lib/components/ActionBar/ActionBar.d.ts +5 -1
- package/lib/components/ActionBar/ActionBar.js +13 -3
- package/lib/components/ActionBar/ActionBarOverflowItems.d.ts +12 -3
- package/lib/components/ActionBar/ActionBarOverflowItems.js +13 -3
- package/lib/components/Datagrid/Datagrid/addons/stateReducer.js +7 -5
- package/lib/components/Datagrid/useDisableSelectRows.js +18 -3
- package/lib/components/PageHeader/PageHeader.js +11 -1
- package/package.json +2 -2
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, { PropsWithChildren } from 'react';
|
1
|
+
import React, { PropsWithChildren, ForwardedRef } from 'react';
|
2
2
|
import { ButtonProps } from '@carbon/type';
|
3
3
|
import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
|
4
4
|
interface Action extends ButtonProps {
|
@@ -49,6 +49,10 @@ interface ActionBarProps extends PropsWithChildren {
|
|
49
49
|
* overflowAriaLabel label for open close button overflow used for action bar items that do nto fit.
|
50
50
|
*/
|
51
51
|
overflowAriaLabel: string;
|
52
|
+
/**
|
53
|
+
* overflowMenuRef for the overflow menu width that is needed to calculate the width of the action bar with overflow
|
54
|
+
*/
|
55
|
+
overflowMenuRef?: ForwardedRef<HTMLDivElement>;
|
52
56
|
/**
|
53
57
|
* align tags to right of available space
|
54
58
|
*/
|
@@ -17,7 +17,7 @@ import { prepareProps } from '../../global/js/utils/props-helper.js';
|
|
17
17
|
import { ActionBarItem } from './ActionBarItem.js';
|
18
18
|
import { ActionBarOverflowItems } from './ActionBarOverflowItems.js';
|
19
19
|
|
20
|
-
var _excluded = ["actions", "className", "maxVisible", "menuOptionsClass", "onWidthChange", "overflowAriaLabel", "rightAlign"],
|
20
|
+
var _excluded = ["actions", "className", "maxVisible", "menuOptionsClass", "onWidthChange", "overflowAriaLabel", "overflowMenuRef", "rightAlign"],
|
21
21
|
_excluded2 = ["key", "id"],
|
22
22
|
_excluded3 = ["key"];
|
23
23
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
@@ -41,6 +41,7 @@ var ActionBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
41
41
|
menuOptionsClass = _ref.menuOptionsClass,
|
42
42
|
onWidthChange = _ref.onWidthChange,
|
43
43
|
overflowAriaLabel = _ref.overflowAriaLabel,
|
44
|
+
overflowMenuRef = _ref.overflowMenuRef,
|
44
45
|
rightAlign = _ref.rightAlign,
|
45
46
|
rest = _objectWithoutProperties(_ref, _excluded);
|
46
47
|
var _useState = useState(0),
|
@@ -72,6 +73,7 @@ var ActionBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
72
73
|
}, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(ActionBarOverflowItems, {
|
73
74
|
className: "".concat(blockClass, "__hidden-sizing-item"),
|
74
75
|
overflowAriaLabel: "hidden sizing overflow items",
|
76
|
+
overflowMenuRef: overflowMenuRef,
|
75
77
|
overflowItems: [],
|
76
78
|
key: "hidden-overflow-menu",
|
77
79
|
tabIndex: -1
|
@@ -87,7 +89,7 @@ var ActionBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
87
89
|
tabIndex: -1
|
88
90
|
}));
|
89
91
|
}))));
|
90
|
-
}, [actions]);
|
92
|
+
}, [actions, overflowMenuRef]);
|
91
93
|
|
92
94
|
// creates displayed items based on actions, displayCount and alignment
|
93
95
|
useEffect(function () {
|
@@ -108,12 +110,13 @@ var ActionBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
108
110
|
newDisplayedItems.push( /*#__PURE__*/React__default.createElement(ActionBarOverflowItems, {
|
109
111
|
menuOptionsClass: menuOptionsClass,
|
110
112
|
overflowAriaLabel: overflowAriaLabel,
|
113
|
+
overflowMenuRef: overflowMenuRef,
|
111
114
|
overflowItems: newOverflowItems,
|
112
115
|
key: "overflow-menu-".concat(internalId.current)
|
113
116
|
}));
|
114
117
|
}
|
115
118
|
setDisplayedItems(newDisplayedItems);
|
116
|
-
}, [actions, displayCount, overflowAriaLabel, menuOptionsClass]);
|
119
|
+
}, [actions, displayCount, overflowAriaLabel, menuOptionsClass, overflowMenuRef]);
|
117
120
|
|
118
121
|
// determine display count based on space available and width of pageActions
|
119
122
|
var checkFullyVisibleItems = function checkFullyVisibleItems() {
|
@@ -250,6 +253,13 @@ ActionBar.propTypes = {
|
|
250
253
|
* overflowAriaLabel label for open close button overflow used for action bar items that do nto fit.
|
251
254
|
*/
|
252
255
|
overflowAriaLabel: PropTypes.string.isRequired,
|
256
|
+
/**
|
257
|
+
* overflowMenuRef for the overflow menu width that is needed to calculate the width of the action bar with overflow
|
258
|
+
*/
|
259
|
+
/**@ts-ignore */
|
260
|
+
overflowMenuRef: PropTypes.oneOfType([PropTypes.shape({
|
261
|
+
current: PropTypes.elementType
|
262
|
+
}), PropTypes.object]),
|
253
263
|
/**
|
254
264
|
* align tags to right of available space
|
255
265
|
*/
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { PropsWithChildren, ReactElement } from 'react';
|
1
|
+
import { PropsWithChildren, ReactElement, ForwardedRef } from 'react';
|
2
2
|
import PropTypes from 'prop-types';
|
3
3
|
import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
|
4
4
|
type OverflowItem = {
|
@@ -16,9 +16,13 @@ interface ActionBarOverflowItemProps extends PropsWithChildren {
|
|
16
16
|
*/
|
17
17
|
menuOptionsClass?: string;
|
18
18
|
/**
|
19
|
-
* overflowAriaLabel label for open close button overflow used for action bar items that do
|
19
|
+
* overflowAriaLabel label for open close button overflow used for action bar items that do not fit.
|
20
20
|
*/
|
21
21
|
overflowAriaLabel?: string;
|
22
|
+
/**
|
23
|
+
* overflowMenuRef for the overflow menu width that is needed to calculate the width of the action bar with overflow
|
24
|
+
*/
|
25
|
+
overflowMenuRef?: ForwardedRef<HTMLDivElement>;
|
22
26
|
/**
|
23
27
|
* overflowItems: items to bre shown in the ActionBar overflow menu
|
24
28
|
*/
|
@@ -29,7 +33,7 @@ interface ActionBarOverflowItemProps extends PropsWithChildren {
|
|
29
33
|
tabIndex?: number;
|
30
34
|
}
|
31
35
|
export declare const ActionBarOverflowItems: {
|
32
|
-
({ className, menuOptionsClass, overflowItems, overflowAriaLabel, }: ActionBarOverflowItemProps): import("react/jsx-runtime").JSX.Element;
|
36
|
+
({ className, menuOptionsClass, overflowItems, overflowAriaLabel, overflowMenuRef, }: ActionBarOverflowItemProps): import("react/jsx-runtime").JSX.Element;
|
33
37
|
displayName: string;
|
34
38
|
propTypes: {
|
35
39
|
/**
|
@@ -48,6 +52,11 @@ export declare const ActionBarOverflowItems: {
|
|
48
52
|
* overflowItems: items to bre shown in the ActionBar overflow menu
|
49
53
|
*/
|
50
54
|
overflowItems: PropTypes.Requireable<(PropTypes.ReactElementLike | null | undefined)[]>;
|
55
|
+
/**
|
56
|
+
* overflowMenuRef for the overflow menu width that is needed to calculate the width of the action bar with overflow
|
57
|
+
*/
|
58
|
+
/**@ts-ignore */
|
59
|
+
overflowMenuRef: PropTypes.Requireable<object>;
|
51
60
|
/**
|
52
61
|
* Optional tab index
|
53
62
|
*/
|
@@ -19,9 +19,12 @@ var ActionBarOverflowItems = function ActionBarOverflowItems(_ref) {
|
|
19
19
|
var className = _ref.className,
|
20
20
|
menuOptionsClass = _ref.menuOptionsClass,
|
21
21
|
overflowItems = _ref.overflowItems,
|
22
|
-
overflowAriaLabel = _ref.overflowAriaLabel
|
22
|
+
overflowAriaLabel = _ref.overflowAriaLabel,
|
23
|
+
overflowMenuRef = _ref.overflowMenuRef;
|
23
24
|
var internalId = useRef(uuidv4());
|
24
|
-
return /*#__PURE__*/React__default.createElement(
|
25
|
+
return /*#__PURE__*/React__default.createElement("div", {
|
26
|
+
ref: overflowMenuRef
|
27
|
+
}, /*#__PURE__*/React__default.createElement(OverflowMenu, {
|
25
28
|
"aria-label": overflowAriaLabel,
|
26
29
|
className: cx(blockClass, className),
|
27
30
|
direction: "bottom",
|
@@ -45,7 +48,7 @@ var ActionBarOverflowItems = function ActionBarOverflowItems(_ref) {
|
|
45
48
|
id: "".concat(internalId.current, "-").concat(index, "--item-label")
|
46
49
|
}, item === null || item === void 0 ? void 0 : item.props.label), typeof (item === null || item === void 0 ? void 0 : item.props.renderIcon) === 'function' ? /*#__PURE__*/React__default.createElement(ItemIcon, null) : item === null || item === void 0 ? void 0 : item.props.renderIcon)
|
47
50
|
});
|
48
|
-
}));
|
51
|
+
})));
|
49
52
|
};
|
50
53
|
ActionBarOverflowItems.displayName = componentName;
|
51
54
|
ActionBarOverflowItems.propTypes = {
|
@@ -66,6 +69,13 @@ ActionBarOverflowItems.propTypes = {
|
|
66
69
|
* overflowItems: items to bre shown in the ActionBar overflow menu
|
67
70
|
*/
|
68
71
|
overflowItems: PropTypes.arrayOf(PropTypes.element),
|
72
|
+
/**
|
73
|
+
* overflowMenuRef for the overflow menu width that is needed to calculate the width of the action bar with overflow
|
74
|
+
*/
|
75
|
+
/**@ts-ignore */
|
76
|
+
overflowMenuRef: PropTypes.oneOfType([PropTypes.shape({
|
77
|
+
current: PropTypes.elementType
|
78
|
+
}), PropTypes.object]),
|
69
79
|
/**
|
70
80
|
* Optional tab index
|
71
81
|
*/
|
@@ -148,11 +148,13 @@ var stateReducer = function stateReducer(newState, action) {
|
|
148
148
|
isChecked = _ref5.isChecked;
|
149
149
|
var newSelectedRowIds = {};
|
150
150
|
if (rows) {
|
151
|
+
var _rows$find, _rows$find$getRowProp;
|
151
152
|
var newSelectedRowData = {};
|
153
|
+
var nonSelectableRows = ((_rows$find = rows.find(function (row) {
|
154
|
+
return row.getRowProps;
|
155
|
+
})) === null || _rows$find === void 0 || (_rows$find$getRowProp = _rows$find.getRowProps) === null || _rows$find$getRowProp === void 0 || (_rows$find$getRowProp = _rows$find$getRowProp.call(_rows$find)) === null || _rows$find$getRowProp === void 0 ? void 0 : _rows$find$getRowProp.nonselectablerows) || [];
|
152
156
|
rows.forEach(function (row) {
|
153
|
-
|
154
|
-
var props = (_row$getRowProps = row.getRowProps) === null || _row$getRowProps === void 0 ? void 0 : _row$getRowProps.call(row);
|
155
|
-
if (props && props.disabled) {
|
157
|
+
if (nonSelectableRows.length > 0 && nonSelectableRows.includes(row.id)) {
|
156
158
|
return;
|
157
159
|
}
|
158
160
|
newSelectedRowIds[getRowId(row.original, row.index)] = true;
|
@@ -178,8 +180,8 @@ var stateReducer = function stateReducer(newState, action) {
|
|
178
180
|
if (_rows) {
|
179
181
|
var _newSelectedRowData = {};
|
180
182
|
_rows.forEach(function (row) {
|
181
|
-
var _row$
|
182
|
-
var props = (_row$
|
183
|
+
var _row$getRowProps;
|
184
|
+
var props = (_row$getRowProps = row.getRowProps) === null || _row$getRowProps === void 0 ? void 0 : _row$getRowProps.call(row);
|
183
185
|
if (props && props.disabled) {
|
184
186
|
return;
|
185
187
|
}
|
@@ -5,24 +5,39 @@
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
6
6
|
*/
|
7
7
|
|
8
|
+
var nonselectablerowsList = function nonselectablerowsList(instance) {
|
9
|
+
var _instance$rows;
|
10
|
+
var nonselectablerows = (instance === null || instance === void 0 || (_instance$rows = instance.rows) === null || _instance$rows === void 0 ? void 0 : _instance$rows.filter(function (row) {
|
11
|
+
return instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row);
|
12
|
+
}).map(function (row) {
|
13
|
+
return row.id;
|
14
|
+
})) || [];
|
15
|
+
return nonselectablerows;
|
16
|
+
};
|
8
17
|
var useDisableSelectRows = function useDisableSelectRows(hooks) {
|
9
18
|
updateSelectAll(hooks);
|
10
19
|
updatePageSelectAll(hooks);
|
20
|
+
var nonselectablerows = [];
|
21
|
+
var useInstance = function useInstance(instance) {
|
22
|
+
nonselectablerows = nonselectablerowsList(instance);
|
23
|
+
};
|
24
|
+
hooks.useInstance.push(useInstance);
|
11
25
|
var getRowProps = function getRowProps(props, _ref) {
|
12
26
|
var _instance$shouldDisab;
|
13
27
|
var row = _ref.row,
|
14
28
|
instance = _ref.instance;
|
15
29
|
return [props, {
|
16
|
-
disabled: instance === null || instance === void 0 || (_instance$shouldDisab = instance.shouldDisableSelectRow) === null || _instance$shouldDisab === void 0 ? void 0 : _instance$shouldDisab.call(instance, row)
|
30
|
+
disabled: instance === null || instance === void 0 || (_instance$shouldDisab = instance.shouldDisableSelectRow) === null || _instance$shouldDisab === void 0 ? void 0 : _instance$shouldDisab.call(instance, row),
|
31
|
+
nonselectablerows: nonselectablerows
|
17
32
|
}];
|
18
33
|
};
|
19
34
|
hooks.getRowProps.push(getRowProps);
|
20
35
|
};
|
21
36
|
var updateSelectAll = function updateSelectAll(hooks) {
|
22
37
|
var getToggleAllRowsSelectedProps = function getToggleAllRowsSelectedProps(props, _ref2) {
|
23
|
-
var _instance$
|
38
|
+
var _instance$rows2, _instance$disableSele, _instance$state2;
|
24
39
|
var instance = _ref2.instance;
|
25
|
-
var selectableRows = (instance === null || instance === void 0 || (_instance$
|
40
|
+
var selectableRows = (instance === null || instance === void 0 || (_instance$rows2 = instance.rows) === null || _instance$rows2 === void 0 ? void 0 : _instance$rows2.filter(function (row) {
|
26
41
|
return !(instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row));
|
27
42
|
})) || [];
|
28
43
|
var isAllRowsSelected = (selectableRows === null || selectableRows === void 0 ? void 0 : selectableRows.length) > 0 && selectableRows.every(function (_ref3) {
|
@@ -6,7 +6,7 @@
|
|
6
6
|
*/
|
7
7
|
|
8
8
|
import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
9
|
-
import { Button, Tooltip, Tag, FlexGrid, Row, Column } from '@carbon/react';
|
9
|
+
import { Button, Tooltip, Tag, usePrefix, FlexGrid, Row, Column } from '@carbon/react';
|
10
10
|
import React__default, { useState, useRef, useEffect } from 'react';
|
11
11
|
import { string_required_if_more_than_10_tags, TagSet } from '../TagSet/TagSet.js';
|
12
12
|
import { breakpoints, spacing10, baseFontSize } from '@carbon/layout';
|
@@ -93,6 +93,7 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
93
93
|
var headerRef = ref || localHeaderRef;
|
94
94
|
var sizingContainerRef = useRef(null);
|
95
95
|
var offsetTopMeasuringRef = useRef(null);
|
96
|
+
var overflowMenuRef = useRef(null);
|
96
97
|
|
97
98
|
// state based on props only
|
98
99
|
var hasActionBar = actionBarItems && actionBarItems.length > 0;
|
@@ -166,14 +167,22 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
166
167
|
_useState26 = _slicedToArray(_useState25, 2),
|
167
168
|
widthIsNarrow = _useState26[0],
|
168
169
|
setWidthIsNarrow = _useState26[1];
|
170
|
+
var prefix = usePrefix();
|
169
171
|
|
170
172
|
// handlers
|
171
173
|
var handleActionBarWidthChange = function handleActionBarWidthChange(_ref2) {
|
174
|
+
var _overflowMenuRef$curr;
|
172
175
|
var minWidth = _ref2.minWidth,
|
173
176
|
maxWidth = _ref2.maxWidth;
|
177
|
+
var overflowMenuWidth = 0;
|
178
|
+
var overflowMenu = overflowMenuRef === null || overflowMenuRef === void 0 || (_overflowMenuRef$curr = overflowMenuRef.current) === null || _overflowMenuRef$curr === void 0 ? void 0 : _overflowMenuRef$curr.querySelector(".".concat(prefix, "--overflow-menu"));
|
179
|
+
if (overflowMenu) {
|
180
|
+
overflowMenuWidth = overflowMenu.offsetWidth;
|
181
|
+
}
|
182
|
+
|
174
183
|
/* don't know how to test resize */
|
175
184
|
/* istanbul ignore next */
|
176
|
-
setActionBarMaxWidth(maxWidth);
|
185
|
+
setActionBarMaxWidth(maxWidth + overflowMenuWidth);
|
177
186
|
/* don't know how to test resize */
|
178
187
|
/* istanbul ignore next */
|
179
188
|
setActionBarMinWidth(minWidth);
|
@@ -391,6 +400,7 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
391
400
|
menuOptionsClass: "".concat(cx(actionBarMenuOptionsClass, "".concat(blockClass, "__action-bar-menu-options"))),
|
392
401
|
onWidthChange: handleActionBarWidthChange,
|
393
402
|
overflowAriaLabel: actionBarOverflowAriaLabel,
|
403
|
+
overflowMenuRef: overflowMenuRef,
|
394
404
|
rightAlign: true
|
395
405
|
})) : widthIsNarrow && thePageActions(true, pageActionsInBreadcrumbRow))))) : null, !collapseTitle && (title || pageActions) ? /*#__PURE__*/React__default.createElement(Row, {
|
396
406
|
className: cx("".concat(blockClass, "__title-row"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__title-row--no-breadcrumb-row"), !hasBreadcrumbRow), "".concat(blockClass, "__title-row--under-action-bar"), hasActionBar || widthIsNarrow), "".concat(blockClass, "__title-row--has-page-actions"), !!pageActions), "".concat(blockClass, "__title-row--sticky"), !!pageActions && !actionBarItems && hasBreadcrumbRow))
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, { PropsWithChildren } from 'react';
|
1
|
+
import React, { PropsWithChildren, ForwardedRef } from 'react';
|
2
2
|
import { ButtonProps } from '@carbon/type';
|
3
3
|
import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
|
4
4
|
interface Action extends ButtonProps {
|
@@ -49,6 +49,10 @@ interface ActionBarProps extends PropsWithChildren {
|
|
49
49
|
* overflowAriaLabel label for open close button overflow used for action bar items that do nto fit.
|
50
50
|
*/
|
51
51
|
overflowAriaLabel: string;
|
52
|
+
/**
|
53
|
+
* overflowMenuRef for the overflow menu width that is needed to calculate the width of the action bar with overflow
|
54
|
+
*/
|
55
|
+
overflowMenuRef?: ForwardedRef<HTMLDivElement>;
|
52
56
|
/**
|
53
57
|
* align tags to right of available space
|
54
58
|
*/
|
@@ -26,7 +26,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
26
26
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
27
27
|
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
28
28
|
|
29
|
-
var _excluded = ["actions", "className", "maxVisible", "menuOptionsClass", "onWidthChange", "overflowAriaLabel", "rightAlign"],
|
29
|
+
var _excluded = ["actions", "className", "maxVisible", "menuOptionsClass", "onWidthChange", "overflowAriaLabel", "overflowMenuRef", "rightAlign"],
|
30
30
|
_excluded2 = ["key", "id"],
|
31
31
|
_excluded3 = ["key"];
|
32
32
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
@@ -50,6 +50,7 @@ exports.ActionBar = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
50
50
|
menuOptionsClass = _ref.menuOptionsClass,
|
51
51
|
onWidthChange = _ref.onWidthChange,
|
52
52
|
overflowAriaLabel = _ref.overflowAriaLabel,
|
53
|
+
overflowMenuRef = _ref.overflowMenuRef,
|
53
54
|
rightAlign = _ref.rightAlign,
|
54
55
|
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
55
56
|
var _useState = React.useState(0),
|
@@ -81,6 +82,7 @@ exports.ActionBar = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
81
82
|
}, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(ActionBarOverflowItems.ActionBarOverflowItems, {
|
82
83
|
className: "".concat(blockClass, "__hidden-sizing-item"),
|
83
84
|
overflowAriaLabel: "hidden sizing overflow items",
|
85
|
+
overflowMenuRef: overflowMenuRef,
|
84
86
|
overflowItems: [],
|
85
87
|
key: "hidden-overflow-menu",
|
86
88
|
tabIndex: -1
|
@@ -96,7 +98,7 @@ exports.ActionBar = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
96
98
|
tabIndex: -1
|
97
99
|
}));
|
98
100
|
}))));
|
99
|
-
}, [actions]);
|
101
|
+
}, [actions, overflowMenuRef]);
|
100
102
|
|
101
103
|
// creates displayed items based on actions, displayCount and alignment
|
102
104
|
React.useEffect(function () {
|
@@ -117,12 +119,13 @@ exports.ActionBar = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
117
119
|
newDisplayedItems.push( /*#__PURE__*/React__default["default"].createElement(ActionBarOverflowItems.ActionBarOverflowItems, {
|
118
120
|
menuOptionsClass: menuOptionsClass,
|
119
121
|
overflowAriaLabel: overflowAriaLabel,
|
122
|
+
overflowMenuRef: overflowMenuRef,
|
120
123
|
overflowItems: newOverflowItems,
|
121
124
|
key: "overflow-menu-".concat(internalId.current)
|
122
125
|
}));
|
123
126
|
}
|
124
127
|
setDisplayedItems(newDisplayedItems);
|
125
|
-
}, [actions, displayCount, overflowAriaLabel, menuOptionsClass]);
|
128
|
+
}, [actions, displayCount, overflowAriaLabel, menuOptionsClass, overflowMenuRef]);
|
126
129
|
|
127
130
|
// determine display count based on space available and width of pageActions
|
128
131
|
var checkFullyVisibleItems = function checkFullyVisibleItems() {
|
@@ -259,6 +262,13 @@ exports.ActionBar.propTypes = {
|
|
259
262
|
* overflowAriaLabel label for open close button overflow used for action bar items that do nto fit.
|
260
263
|
*/
|
261
264
|
overflowAriaLabel: index["default"].string.isRequired,
|
265
|
+
/**
|
266
|
+
* overflowMenuRef for the overflow menu width that is needed to calculate the width of the action bar with overflow
|
267
|
+
*/
|
268
|
+
/**@ts-ignore */
|
269
|
+
overflowMenuRef: index["default"].oneOfType([index["default"].shape({
|
270
|
+
current: index["default"].elementType
|
271
|
+
}), index["default"].object]),
|
262
272
|
/**
|
263
273
|
* align tags to right of available space
|
264
274
|
*/
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { PropsWithChildren, ReactElement } from 'react';
|
1
|
+
import { PropsWithChildren, ReactElement, ForwardedRef } from 'react';
|
2
2
|
import PropTypes from 'prop-types';
|
3
3
|
import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
|
4
4
|
type OverflowItem = {
|
@@ -16,9 +16,13 @@ interface ActionBarOverflowItemProps extends PropsWithChildren {
|
|
16
16
|
*/
|
17
17
|
menuOptionsClass?: string;
|
18
18
|
/**
|
19
|
-
* overflowAriaLabel label for open close button overflow used for action bar items that do
|
19
|
+
* overflowAriaLabel label for open close button overflow used for action bar items that do not fit.
|
20
20
|
*/
|
21
21
|
overflowAriaLabel?: string;
|
22
|
+
/**
|
23
|
+
* overflowMenuRef for the overflow menu width that is needed to calculate the width of the action bar with overflow
|
24
|
+
*/
|
25
|
+
overflowMenuRef?: ForwardedRef<HTMLDivElement>;
|
22
26
|
/**
|
23
27
|
* overflowItems: items to bre shown in the ActionBar overflow menu
|
24
28
|
*/
|
@@ -29,7 +33,7 @@ interface ActionBarOverflowItemProps extends PropsWithChildren {
|
|
29
33
|
tabIndex?: number;
|
30
34
|
}
|
31
35
|
export declare const ActionBarOverflowItems: {
|
32
|
-
({ className, menuOptionsClass, overflowItems, overflowAriaLabel, }: ActionBarOverflowItemProps): import("react/jsx-runtime").JSX.Element;
|
36
|
+
({ className, menuOptionsClass, overflowItems, overflowAriaLabel, overflowMenuRef, }: ActionBarOverflowItemProps): import("react/jsx-runtime").JSX.Element;
|
33
37
|
displayName: string;
|
34
38
|
propTypes: {
|
35
39
|
/**
|
@@ -48,6 +52,11 @@ export declare const ActionBarOverflowItems: {
|
|
48
52
|
* overflowItems: items to bre shown in the ActionBar overflow menu
|
49
53
|
*/
|
50
54
|
overflowItems: PropTypes.Requireable<(PropTypes.ReactElementLike | null | undefined)[]>;
|
55
|
+
/**
|
56
|
+
* overflowMenuRef for the overflow menu width that is needed to calculate the width of the action bar with overflow
|
57
|
+
*/
|
58
|
+
/**@ts-ignore */
|
59
|
+
overflowMenuRef: PropTypes.Requireable<object>;
|
51
60
|
/**
|
52
61
|
* Optional tab index
|
53
62
|
*/
|
@@ -28,9 +28,12 @@ var ActionBarOverflowItems = function ActionBarOverflowItems(_ref) {
|
|
28
28
|
var className = _ref.className,
|
29
29
|
menuOptionsClass = _ref.menuOptionsClass,
|
30
30
|
overflowItems = _ref.overflowItems,
|
31
|
-
overflowAriaLabel = _ref.overflowAriaLabel
|
31
|
+
overflowAriaLabel = _ref.overflowAriaLabel,
|
32
|
+
overflowMenuRef = _ref.overflowMenuRef;
|
32
33
|
var internalId = React.useRef(uuidv4["default"]());
|
33
|
-
return /*#__PURE__*/React__default["default"].createElement(
|
34
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
35
|
+
ref: overflowMenuRef
|
36
|
+
}, /*#__PURE__*/React__default["default"].createElement(react.OverflowMenu, {
|
34
37
|
"aria-label": overflowAriaLabel,
|
35
38
|
className: cx__default["default"](blockClass, className),
|
36
39
|
direction: "bottom",
|
@@ -54,7 +57,7 @@ var ActionBarOverflowItems = function ActionBarOverflowItems(_ref) {
|
|
54
57
|
id: "".concat(internalId.current, "-").concat(index, "--item-label")
|
55
58
|
}, item === null || item === void 0 ? void 0 : item.props.label), typeof (item === null || item === void 0 ? void 0 : item.props.renderIcon) === 'function' ? /*#__PURE__*/React__default["default"].createElement(ItemIcon, null) : item === null || item === void 0 ? void 0 : item.props.renderIcon)
|
56
59
|
});
|
57
|
-
}));
|
60
|
+
})));
|
58
61
|
};
|
59
62
|
ActionBarOverflowItems.displayName = componentName;
|
60
63
|
ActionBarOverflowItems.propTypes = {
|
@@ -75,6 +78,13 @@ ActionBarOverflowItems.propTypes = {
|
|
75
78
|
* overflowItems: items to bre shown in the ActionBar overflow menu
|
76
79
|
*/
|
77
80
|
overflowItems: index["default"].arrayOf(index["default"].element),
|
81
|
+
/**
|
82
|
+
* overflowMenuRef for the overflow menu width that is needed to calculate the width of the action bar with overflow
|
83
|
+
*/
|
84
|
+
/**@ts-ignore */
|
85
|
+
overflowMenuRef: index["default"].oneOfType([index["default"].shape({
|
86
|
+
current: index["default"].elementType
|
87
|
+
}), index["default"].object]),
|
78
88
|
/**
|
79
89
|
* Optional tab index
|
80
90
|
*/
|
@@ -152,11 +152,13 @@ var stateReducer = function stateReducer(newState, action) {
|
|
152
152
|
isChecked = _ref5.isChecked;
|
153
153
|
var newSelectedRowIds = {};
|
154
154
|
if (rows) {
|
155
|
+
var _rows$find, _rows$find$getRowProp;
|
155
156
|
var newSelectedRowData = {};
|
157
|
+
var nonSelectableRows = ((_rows$find = rows.find(function (row) {
|
158
|
+
return row.getRowProps;
|
159
|
+
})) === null || _rows$find === void 0 || (_rows$find$getRowProp = _rows$find.getRowProps) === null || _rows$find$getRowProp === void 0 || (_rows$find$getRowProp = _rows$find$getRowProp.call(_rows$find)) === null || _rows$find$getRowProp === void 0 ? void 0 : _rows$find$getRowProp.nonselectablerows) || [];
|
156
160
|
rows.forEach(function (row) {
|
157
|
-
|
158
|
-
var props = (_row$getRowProps = row.getRowProps) === null || _row$getRowProps === void 0 ? void 0 : _row$getRowProps.call(row);
|
159
|
-
if (props && props.disabled) {
|
161
|
+
if (nonSelectableRows.length > 0 && nonSelectableRows.includes(row.id)) {
|
160
162
|
return;
|
161
163
|
}
|
162
164
|
newSelectedRowIds[getRowId(row.original, row.index)] = true;
|
@@ -182,8 +184,8 @@ var stateReducer = function stateReducer(newState, action) {
|
|
182
184
|
if (_rows) {
|
183
185
|
var _newSelectedRowData = {};
|
184
186
|
_rows.forEach(function (row) {
|
185
|
-
var _row$
|
186
|
-
var props = (_row$
|
187
|
+
var _row$getRowProps;
|
188
|
+
var props = (_row$getRowProps = row.getRowProps) === null || _row$getRowProps === void 0 ? void 0 : _row$getRowProps.call(row);
|
187
189
|
if (props && props.disabled) {
|
188
190
|
return;
|
189
191
|
}
|
@@ -9,24 +9,39 @@
|
|
9
9
|
|
10
10
|
Object.defineProperty(exports, '__esModule', { value: true });
|
11
11
|
|
12
|
+
var nonselectablerowsList = function nonselectablerowsList(instance) {
|
13
|
+
var _instance$rows;
|
14
|
+
var nonselectablerows = (instance === null || instance === void 0 || (_instance$rows = instance.rows) === null || _instance$rows === void 0 ? void 0 : _instance$rows.filter(function (row) {
|
15
|
+
return instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row);
|
16
|
+
}).map(function (row) {
|
17
|
+
return row.id;
|
18
|
+
})) || [];
|
19
|
+
return nonselectablerows;
|
20
|
+
};
|
12
21
|
var useDisableSelectRows = function useDisableSelectRows(hooks) {
|
13
22
|
updateSelectAll(hooks);
|
14
23
|
updatePageSelectAll(hooks);
|
24
|
+
var nonselectablerows = [];
|
25
|
+
var useInstance = function useInstance(instance) {
|
26
|
+
nonselectablerows = nonselectablerowsList(instance);
|
27
|
+
};
|
28
|
+
hooks.useInstance.push(useInstance);
|
15
29
|
var getRowProps = function getRowProps(props, _ref) {
|
16
30
|
var _instance$shouldDisab;
|
17
31
|
var row = _ref.row,
|
18
32
|
instance = _ref.instance;
|
19
33
|
return [props, {
|
20
|
-
disabled: instance === null || instance === void 0 || (_instance$shouldDisab = instance.shouldDisableSelectRow) === null || _instance$shouldDisab === void 0 ? void 0 : _instance$shouldDisab.call(instance, row)
|
34
|
+
disabled: instance === null || instance === void 0 || (_instance$shouldDisab = instance.shouldDisableSelectRow) === null || _instance$shouldDisab === void 0 ? void 0 : _instance$shouldDisab.call(instance, row),
|
35
|
+
nonselectablerows: nonselectablerows
|
21
36
|
}];
|
22
37
|
};
|
23
38
|
hooks.getRowProps.push(getRowProps);
|
24
39
|
};
|
25
40
|
var updateSelectAll = function updateSelectAll(hooks) {
|
26
41
|
var getToggleAllRowsSelectedProps = function getToggleAllRowsSelectedProps(props, _ref2) {
|
27
|
-
var _instance$
|
42
|
+
var _instance$rows2, _instance$disableSele, _instance$state2;
|
28
43
|
var instance = _ref2.instance;
|
29
|
-
var selectableRows = (instance === null || instance === void 0 || (_instance$
|
44
|
+
var selectableRows = (instance === null || instance === void 0 || (_instance$rows2 = instance.rows) === null || _instance$rows2 === void 0 ? void 0 : _instance$rows2.filter(function (row) {
|
30
45
|
return !(instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row));
|
31
46
|
})) || [];
|
32
47
|
var isAllRowsSelected = (selectableRows === null || selectableRows === void 0 ? void 0 : selectableRows.length) > 0 && selectableRows.every(function (_ref3) {
|
@@ -102,6 +102,7 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
102
102
|
var headerRef = ref || localHeaderRef;
|
103
103
|
var sizingContainerRef = React.useRef(null);
|
104
104
|
var offsetTopMeasuringRef = React.useRef(null);
|
105
|
+
var overflowMenuRef = React.useRef(null);
|
105
106
|
|
106
107
|
// state based on props only
|
107
108
|
var hasActionBar = actionBarItems && actionBarItems.length > 0;
|
@@ -175,14 +176,22 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
175
176
|
_useState26 = _rollupPluginBabelHelpers.slicedToArray(_useState25, 2),
|
176
177
|
widthIsNarrow = _useState26[0],
|
177
178
|
setWidthIsNarrow = _useState26[1];
|
179
|
+
var prefix = react.usePrefix();
|
178
180
|
|
179
181
|
// handlers
|
180
182
|
var handleActionBarWidthChange = function handleActionBarWidthChange(_ref2) {
|
183
|
+
var _overflowMenuRef$curr;
|
181
184
|
var minWidth = _ref2.minWidth,
|
182
185
|
maxWidth = _ref2.maxWidth;
|
186
|
+
var overflowMenuWidth = 0;
|
187
|
+
var overflowMenu = overflowMenuRef === null || overflowMenuRef === void 0 || (_overflowMenuRef$curr = overflowMenuRef.current) === null || _overflowMenuRef$curr === void 0 ? void 0 : _overflowMenuRef$curr.querySelector(".".concat(prefix, "--overflow-menu"));
|
188
|
+
if (overflowMenu) {
|
189
|
+
overflowMenuWidth = overflowMenu.offsetWidth;
|
190
|
+
}
|
191
|
+
|
183
192
|
/* don't know how to test resize */
|
184
193
|
/* istanbul ignore next */
|
185
|
-
setActionBarMaxWidth(maxWidth);
|
194
|
+
setActionBarMaxWidth(maxWidth + overflowMenuWidth);
|
186
195
|
/* don't know how to test resize */
|
187
196
|
/* istanbul ignore next */
|
188
197
|
setActionBarMinWidth(minWidth);
|
@@ -400,6 +409,7 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
400
409
|
menuOptionsClass: "".concat(cx__default["default"](actionBarMenuOptionsClass, "".concat(PageHeaderUtils.blockClass, "__action-bar-menu-options"))),
|
401
410
|
onWidthChange: handleActionBarWidthChange,
|
402
411
|
overflowAriaLabel: actionBarOverflowAriaLabel,
|
412
|
+
overflowMenuRef: overflowMenuRef,
|
403
413
|
rightAlign: true
|
404
414
|
})) : widthIsNarrow && thePageActions(true, pageActionsInBreadcrumbRow))))) : null, !collapseTitle && (title || pageActions) ? /*#__PURE__*/React__default["default"].createElement(react.Row, {
|
405
415
|
className: cx__default["default"]("".concat(PageHeaderUtils.blockClass, "__title-row"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__title-row--no-breadcrumb-row"), !hasBreadcrumbRow), "".concat(PageHeaderUtils.blockClass, "__title-row--under-action-bar"), hasActionBar || widthIsNarrow), "".concat(PageHeaderUtils.blockClass, "__title-row--has-page-actions"), !!pageActions), "".concat(PageHeaderUtils.blockClass, "__title-row--sticky"), !!pageActions && !actionBarItems && hasBreadcrumbRow))
|
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.213+baf0ec231",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -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": "baf0ec231c0c343265efbf74b69a9d38db085dd2"
|
124
124
|
}
|