@carbon/ibm-products 2.43.2-canary.212 → 2.43.2-canary.213

Sign up to get free protection for your applications and to get access to all the features.
Files changed (11) hide show
  1. package/es/components/ActionBar/ActionBar.d.ts +5 -1
  2. package/es/components/ActionBar/ActionBar.js +13 -3
  3. package/es/components/ActionBar/ActionBarOverflowItems.d.ts +12 -3
  4. package/es/components/ActionBar/ActionBarOverflowItems.js +13 -3
  5. package/es/components/PageHeader/PageHeader.js +12 -2
  6. package/lib/components/ActionBar/ActionBar.d.ts +5 -1
  7. package/lib/components/ActionBar/ActionBar.js +13 -3
  8. package/lib/components/ActionBar/ActionBarOverflowItems.d.ts +12 -3
  9. package/lib/components/ActionBar/ActionBarOverflowItems.js +13 -3
  10. package/lib/components/PageHeader/PageHeader.js +11 -1
  11. package/package.json +2 -2
package/es/components/ActionBar/ActionBar.d.ts CHANGED
@@ -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
  */
package/es/components/ActionBar/ActionBar.js CHANGED
@@ -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
  */
package/es/components/ActionBar/ActionBarOverflowItems.d.ts CHANGED
@@ -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 nto fit.
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
  */
package/es/components/ActionBar/ActionBarOverflowItems.js CHANGED
@@ -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(OverflowMenu, {
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
  */
package/es/components/PageHeader/PageHeader.js CHANGED
@@ -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))
package/lib/components/ActionBar/ActionBar.d.ts CHANGED
@@ -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
  */
package/lib/components/ActionBar/ActionBar.js CHANGED
@@ -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
  */
package/lib/components/ActionBar/ActionBarOverflowItems.d.ts CHANGED
@@ -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 nto fit.
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
  */
package/lib/components/ActionBar/ActionBarOverflowItems.js CHANGED
@@ -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(react.OverflowMenu, {
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
  */
package/lib/components/PageHeader/PageHeader.js CHANGED
@@ -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.212+01d973f95",
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": "01d973f95256ee174e59c902e4c46ddc4781b13f"
123
+ "gitHead": "baf0ec231c0c343265efbf74b69a9d38db085dd2"
124
124
  }