carbon-react 146.1.0 → 146.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/esm/components/action-popover/action-popover.component.d.ts +4 -1
  2. package/esm/components/action-popover/action-popover.component.js +182 -11
  3. package/esm/components/action-popover/index.d.ts +1 -0
  4. package/esm/components/menu/__internal__/submenu/submenu.style.js +5 -0
  5. package/esm/components/menu/menu-item/menu-item.component.js +3 -2
  6. package/lib/components/action-popover/action-popover.component.d.ts +4 -1
  7. package/lib/components/action-popover/action-popover.component.js +180 -11
  8. package/lib/components/action-popover/index.d.ts +1 -0
  9. package/lib/components/menu/__internal__/submenu/submenu.style.js +5 -0
  10. package/lib/components/menu/menu-item/menu-item.component.js +3 -2
  11. package/package.json +1 -1
package/esm/components/action-popover/action-popover.component.d.ts CHANGED
@@ -39,5 +39,8 @@ export interface ActionPopoverProps extends MarginProps {
39
39
  /** Prop to specify an aria-describedby for the component */
40
40
  "aria-describedby"?: string;
41
41
  }
42
- export declare const ActionPopover: ({ children, id, onOpen, onClose, rightAlignMenu, renderButton, placement, horizontalAlignment, submenuPosition, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }: ActionPopoverProps) => React.JSX.Element;
42
+ export declare type ActionPopoverHandle = {
43
+ focusButton: () => void;
44
+ } | null;
45
+ export declare const ActionPopover: React.ForwardRefExoticComponent<ActionPopoverProps & React.RefAttributes<ActionPopoverHandle>>;
43
46
  export default ActionPopover;
package/esm/components/action-popover/action-popover.component.js CHANGED
@@ -1,5 +1,5 @@
1
1
  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
2
- import React, { useState, useCallback, useMemo, useEffect, useRef } from "react";
2
+ import React, { useState, useCallback, useMemo, useEffect, useRef, useImperativeHandle, forwardRef } from "react";
3
3
  import PropTypes from "prop-types";
4
4
  import invariant from "invariant";
5
5
  import { MenuButton, ButtonIcon, StyledButtonIcon } from "./action-popover.style";
@@ -15,7 +15,7 @@ import useModalManager from "../../hooks/__internal__/useModalManager";
15
15
  import { findFirstFocusableItem, findLastFocusableItem, getItems } from "./__internal__/action-popover-utils";
16
16
  const onOpenDefault = () => {};
17
17
  const onCloseDefault = () => {};
18
- export const ActionPopover = ({
18
+ const ActionPopover = /*#__PURE__*/forwardRef(({
19
19
  children,
20
20
  id,
21
21
  onOpen = onOpenDefault,
@@ -29,7 +29,7 @@ export const ActionPopover = ({
29
29
  "aria-labelledby": ariaLabelledBy,
30
30
  "aria-describedby": ariaDescribedBy,
31
31
  ...rest
32
- }) => {
32
+ }, ref) => {
33
33
  const l = useLocale();
34
34
  const [isOpen, setOpenState] = useState(false);
35
35
  const [focusIndex, setFocusIndex] = useState(0);
@@ -74,6 +74,11 @@ export const ActionPopover = ({
74
74
  const button = buttonRef.current?.querySelector("[data-element='action-popover-button']");
75
75
  button?.focus();
76
76
  }, []);
77
+ useImperativeHandle(ref, () => ({
78
+ focusButton() {
79
+ focusButton();
80
+ }
81
+ }), [focusButton]);
77
82
  const onButtonClick = useCallback(e => {
78
83
  e.stopPropagation();
79
84
  const isOpening = !isOpen;
@@ -89,15 +94,10 @@ export const ActionPopover = ({
89
94
  // https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-actions.html
90
95
 
91
96
  const onButtonKeyDown = useCallback(e => {
92
- if (Events.isSpaceKey(e) || Events.isDownKey(e) || Events.isEnterKey(e)) {
93
- e.preventDefault();
94
- e.stopPropagation();
95
- setFocusIndex(firstFocusableItem);
96
- setOpen(true);
97
- } else if (Events.isUpKey(e)) {
97
+ if (Events.isSpaceKey(e) || Events.isDownKey(e) || Events.isEnterKey(e) || Events.isUpKey(e)) {
98
98
  e.preventDefault();
99
99
  e.stopPropagation();
100
- setFocusIndex(lastFocusableItem);
100
+ setFocusIndex(Events.isUpKey(e) ? lastFocusableItem : firstFocusableItem);
101
101
  setOpen(true);
102
102
  }
103
103
  }, [firstFocusableItem, lastFocusableItem, setOpen]);
@@ -202,5 +202,176 @@ export const ActionPopover = ({
202
202
  "data-component": "action-popover",
203
203
  ref: menu
204
204
  }, menuProps), children))));
205
- };
205
+ });
206
+ if (process.env.NODE_ENV !== "production") {
207
+ ActionPopover.propTypes = {
208
+ "aria-describedby": PropTypes.string,
209
+ "aria-label": PropTypes.string,
210
+ "aria-labelledby": PropTypes.string,
211
+ "children": PropTypes.node,
212
+ "horizontalAlignment": PropTypes.oneOf(["left", "right"]),
213
+ "id": PropTypes.string,
214
+ "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
215
+ "__@toStringTag": PropTypes.string.isRequired,
216
+ "description": PropTypes.string,
217
+ "toString": PropTypes.func.isRequired,
218
+ "valueOf": PropTypes.func.isRequired
219
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
220
+ "__@toStringTag": PropTypes.string.isRequired,
221
+ "description": PropTypes.string,
222
+ "toString": PropTypes.func.isRequired,
223
+ "valueOf": PropTypes.func.isRequired
224
+ }), PropTypes.string]),
225
+ "margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
226
+ "__@toStringTag": PropTypes.string.isRequired,
227
+ "description": PropTypes.string,
228
+ "toString": PropTypes.func.isRequired,
229
+ "valueOf": PropTypes.func.isRequired
230
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
231
+ "__@toStringTag": PropTypes.string.isRequired,
232
+ "description": PropTypes.string,
233
+ "toString": PropTypes.func.isRequired,
234
+ "valueOf": PropTypes.func.isRequired
235
+ }), PropTypes.string]),
236
+ "marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
237
+ "__@toStringTag": PropTypes.string.isRequired,
238
+ "description": PropTypes.string,
239
+ "toString": PropTypes.func.isRequired,
240
+ "valueOf": PropTypes.func.isRequired
241
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
242
+ "__@toStringTag": PropTypes.string.isRequired,
243
+ "description": PropTypes.string,
244
+ "toString": PropTypes.func.isRequired,
245
+ "valueOf": PropTypes.func.isRequired
246
+ }), PropTypes.string]),
247
+ "marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
248
+ "__@toStringTag": PropTypes.string.isRequired,
249
+ "description": PropTypes.string,
250
+ "toString": PropTypes.func.isRequired,
251
+ "valueOf": PropTypes.func.isRequired
252
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
253
+ "__@toStringTag": PropTypes.string.isRequired,
254
+ "description": PropTypes.string,
255
+ "toString": PropTypes.func.isRequired,
256
+ "valueOf": PropTypes.func.isRequired
257
+ }), PropTypes.string]),
258
+ "marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
259
+ "__@toStringTag": PropTypes.string.isRequired,
260
+ "description": PropTypes.string,
261
+ "toString": PropTypes.func.isRequired,
262
+ "valueOf": PropTypes.func.isRequired
263
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
264
+ "__@toStringTag": PropTypes.string.isRequired,
265
+ "description": PropTypes.string,
266
+ "toString": PropTypes.func.isRequired,
267
+ "valueOf": PropTypes.func.isRequired
268
+ }), PropTypes.string]),
269
+ "marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
270
+ "__@toStringTag": PropTypes.string.isRequired,
271
+ "description": PropTypes.string,
272
+ "toString": PropTypes.func.isRequired,
273
+ "valueOf": PropTypes.func.isRequired
274
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
275
+ "__@toStringTag": PropTypes.string.isRequired,
276
+ "description": PropTypes.string,
277
+ "toString": PropTypes.func.isRequired,
278
+ "valueOf": PropTypes.func.isRequired
279
+ }), PropTypes.string]),
280
+ "marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
281
+ "__@toStringTag": PropTypes.string.isRequired,
282
+ "description": PropTypes.string,
283
+ "toString": PropTypes.func.isRequired,
284
+ "valueOf": PropTypes.func.isRequired
285
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
286
+ "__@toStringTag": PropTypes.string.isRequired,
287
+ "description": PropTypes.string,
288
+ "toString": PropTypes.func.isRequired,
289
+ "valueOf": PropTypes.func.isRequired
290
+ }), PropTypes.string]),
291
+ "marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
292
+ "__@toStringTag": PropTypes.string.isRequired,
293
+ "description": PropTypes.string,
294
+ "toString": PropTypes.func.isRequired,
295
+ "valueOf": PropTypes.func.isRequired
296
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
297
+ "__@toStringTag": PropTypes.string.isRequired,
298
+ "description": PropTypes.string,
299
+ "toString": PropTypes.func.isRequired,
300
+ "valueOf": PropTypes.func.isRequired
301
+ }), PropTypes.string]),
302
+ "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
303
+ "__@toStringTag": PropTypes.string.isRequired,
304
+ "description": PropTypes.string,
305
+ "toString": PropTypes.func.isRequired,
306
+ "valueOf": PropTypes.func.isRequired
307
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
308
+ "__@toStringTag": PropTypes.string.isRequired,
309
+ "description": PropTypes.string,
310
+ "toString": PropTypes.func.isRequired,
311
+ "valueOf": PropTypes.func.isRequired
312
+ }), PropTypes.string]),
313
+ "ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
314
+ "__@toStringTag": PropTypes.string.isRequired,
315
+ "description": PropTypes.string,
316
+ "toString": PropTypes.func.isRequired,
317
+ "valueOf": PropTypes.func.isRequired
318
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
319
+ "__@toStringTag": PropTypes.string.isRequired,
320
+ "description": PropTypes.string,
321
+ "toString": PropTypes.func.isRequired,
322
+ "valueOf": PropTypes.func.isRequired
323
+ }), PropTypes.string]),
324
+ "mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
325
+ "__@toStringTag": PropTypes.string.isRequired,
326
+ "description": PropTypes.string,
327
+ "toString": PropTypes.func.isRequired,
328
+ "valueOf": PropTypes.func.isRequired
329
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
330
+ "__@toStringTag": PropTypes.string.isRequired,
331
+ "description": PropTypes.string,
332
+ "toString": PropTypes.func.isRequired,
333
+ "valueOf": PropTypes.func.isRequired
334
+ }), PropTypes.string]),
335
+ "mt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
336
+ "__@toStringTag": PropTypes.string.isRequired,
337
+ "description": PropTypes.string,
338
+ "toString": PropTypes.func.isRequired,
339
+ "valueOf": PropTypes.func.isRequired
340
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
341
+ "__@toStringTag": PropTypes.string.isRequired,
342
+ "description": PropTypes.string,
343
+ "toString": PropTypes.func.isRequired,
344
+ "valueOf": PropTypes.func.isRequired
345
+ }), PropTypes.string]),
346
+ "mx": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
347
+ "__@toStringTag": PropTypes.string.isRequired,
348
+ "description": PropTypes.string,
349
+ "toString": PropTypes.func.isRequired,
350
+ "valueOf": PropTypes.func.isRequired
351
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
352
+ "__@toStringTag": PropTypes.string.isRequired,
353
+ "description": PropTypes.string,
354
+ "toString": PropTypes.func.isRequired,
355
+ "valueOf": PropTypes.func.isRequired
356
+ }), PropTypes.string]),
357
+ "my": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
358
+ "__@toStringTag": PropTypes.string.isRequired,
359
+ "description": PropTypes.string,
360
+ "toString": PropTypes.func.isRequired,
361
+ "valueOf": PropTypes.func.isRequired
362
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
363
+ "__@toStringTag": PropTypes.string.isRequired,
364
+ "description": PropTypes.string,
365
+ "toString": PropTypes.func.isRequired,
366
+ "valueOf": PropTypes.func.isRequired
367
+ }), PropTypes.string]),
368
+ "onClose": PropTypes.func,
369
+ "onOpen": PropTypes.func,
370
+ "placement": PropTypes.oneOf(["bottom", "top"]),
371
+ "renderButton": PropTypes.func,
372
+ "rightAlignMenu": PropTypes.bool,
373
+ "submenuPosition": PropTypes.oneOf(["left", "right"])
374
+ };
375
+ }
376
+ export { ActionPopover };
206
377
  export default ActionPopover;
package/esm/components/action-popover/index.d.ts CHANGED
@@ -8,3 +8,4 @@ export { default as ActionPopoverMenuButton } from "./action-popover-menu-button
8
8
  export type { ActionPopoverMenuButtonProps } from "./action-popover-menu-button/action-popover-menu-button.component";
9
9
  export { default as ActionPopoverDivider } from "./action-popover-divider/action-popover-divider.component";
10
10
  export type { RenderButtonProps } from "./action-popover.component";
11
+ export type { ActionPopoverHandle } from "./action-popover.component";
package/esm/components/menu/__internal__/submenu/submenu.style.js CHANGED
@@ -61,8 +61,13 @@ const StyledSubmenu = styled.ul`
61
61
  min-width: 100%;
62
62
 
63
63
  ${submenuMaxWidth && css`
64
+ width: max-content;
64
65
  max-width: ${submenuMaxWidth};
65
66
 
67
+ li {
68
+ max-width: ${submenuMaxWidth};
69
+ }
70
+
66
71
  &&& {
67
72
  a,
68
73
  button,
package/esm/components/menu/menu-item/menu-item.component.js CHANGED
@@ -63,7 +63,8 @@ export const MenuItem = ({
63
63
  submenuFocusId,
64
64
  updateFocusId: updateSubmenuFocusId,
65
65
  handleKeyDown: handleSubmenuKeyDown,
66
- shiftTabPressed
66
+ shiftTabPressed,
67
+ submenuHasMaxWidth
67
68
  } = submenuContext;
68
69
  const ref = useRef(null);
69
70
  const focusFromMenu = focusId === menuItemId.current;
@@ -191,7 +192,7 @@ export const MenuItem = ({
191
192
  }, elementProps, {
192
193
  menuItemVariant: variant,
193
194
  ariaLabel: ariaLabel,
194
- maxWidth: maxWidth,
195
+ maxWidth: !submenuHasMaxWidth ? itemMaxWidth : undefined,
195
196
  inFullscreenView: inFullscreenView,
196
197
  asPassiveItem: asPassiveItem,
197
198
  placeholderTabIndex: asPassiveItem
package/lib/components/action-popover/action-popover.component.d.ts CHANGED
@@ -39,5 +39,8 @@ export interface ActionPopoverProps extends MarginProps {
39
39
  /** Prop to specify an aria-describedby for the component */
40
40
  "aria-describedby"?: string;
41
41
  }
42
- export declare const ActionPopover: ({ children, id, onOpen, onClose, rightAlignMenu, renderButton, placement, horizontalAlignment, submenuPosition, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }: ActionPopoverProps) => React.JSX.Element;
42
+ export declare type ActionPopoverHandle = {
43
+ focusButton: () => void;
44
+ } | null;
45
+ export declare const ActionPopover: React.ForwardRefExoticComponent<ActionPopoverProps & React.RefAttributes<ActionPopoverHandle>>;
43
46
  export default ActionPopover;
package/lib/components/action-popover/action-popover.component.js CHANGED
@@ -24,7 +24,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
24
24
  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
25
25
  const onOpenDefault = () => {};
26
26
  const onCloseDefault = () => {};
27
- const ActionPopover = ({
27
+ const ActionPopover = exports.ActionPopover = /*#__PURE__*/(0, _react.forwardRef)(({
28
28
  children,
29
29
  id,
30
30
  onOpen = onOpenDefault,
@@ -38,7 +38,7 @@ const ActionPopover = ({
38
38
  "aria-labelledby": ariaLabelledBy,
39
39
  "aria-describedby": ariaDescribedBy,
40
40
  ...rest
41
- }) => {
41
+ }, ref) => {
42
42
  const l = (0, _useLocale.default)();
43
43
  const [isOpen, setOpenState] = (0, _react.useState)(false);
44
44
  const [focusIndex, setFocusIndex] = (0, _react.useState)(0);
@@ -83,6 +83,11 @@ const ActionPopover = ({
83
83
  const button = buttonRef.current?.querySelector("[data-element='action-popover-button']");
84
84
  button?.focus();
85
85
  }, []);
86
+ (0, _react.useImperativeHandle)(ref, () => ({
87
+ focusButton() {
88
+ focusButton();
89
+ }
90
+ }), [focusButton]);
86
91
  const onButtonClick = (0, _react.useCallback)(e => {
87
92
  e.stopPropagation();
88
93
  const isOpening = !isOpen;
@@ -98,15 +103,10 @@ const ActionPopover = ({
98
103
  // https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-actions.html
99
104
 
100
105
  const onButtonKeyDown = (0, _react.useCallback)(e => {
101
- if (_events.default.isSpaceKey(e) || _events.default.isDownKey(e) || _events.default.isEnterKey(e)) {
106
+ if (_events.default.isSpaceKey(e) || _events.default.isDownKey(e) || _events.default.isEnterKey(e) || _events.default.isUpKey(e)) {
102
107
  e.preventDefault();
103
108
  e.stopPropagation();
104
- setFocusIndex(firstFocusableItem);
105
- setOpen(true);
106
- } else if (_events.default.isUpKey(e)) {
107
- e.preventDefault();
108
- e.stopPropagation();
109
- setFocusIndex(lastFocusableItem);
109
+ setFocusIndex(_events.default.isUpKey(e) ? lastFocusableItem : firstFocusableItem);
110
110
  setOpen(true);
111
111
  }
112
112
  }, [firstFocusableItem, lastFocusableItem, setOpen]);
@@ -211,6 +211,175 @@ const ActionPopover = ({
211
211
  "data-component": "action-popover",
212
212
  ref: menu
213
213
  }, menuProps), children))));
214
- };
215
- exports.ActionPopover = ActionPopover;
214
+ });
215
+ if (process.env.NODE_ENV !== "production") {
216
+ ActionPopover.propTypes = {
217
+ "aria-describedby": _propTypes.default.string,
218
+ "aria-label": _propTypes.default.string,
219
+ "aria-labelledby": _propTypes.default.string,
220
+ "children": _propTypes.default.node,
221
+ "horizontalAlignment": _propTypes.default.oneOf(["left", "right"]),
222
+ "id": _propTypes.default.string,
223
+ "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
224
+ "__@toStringTag": _propTypes.default.string.isRequired,
225
+ "description": _propTypes.default.string,
226
+ "toString": _propTypes.default.func.isRequired,
227
+ "valueOf": _propTypes.default.func.isRequired
228
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
229
+ "__@toStringTag": _propTypes.default.string.isRequired,
230
+ "description": _propTypes.default.string,
231
+ "toString": _propTypes.default.func.isRequired,
232
+ "valueOf": _propTypes.default.func.isRequired
233
+ }), _propTypes.default.string]),
234
+ "margin": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
235
+ "__@toStringTag": _propTypes.default.string.isRequired,
236
+ "description": _propTypes.default.string,
237
+ "toString": _propTypes.default.func.isRequired,
238
+ "valueOf": _propTypes.default.func.isRequired
239
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
240
+ "__@toStringTag": _propTypes.default.string.isRequired,
241
+ "description": _propTypes.default.string,
242
+ "toString": _propTypes.default.func.isRequired,
243
+ "valueOf": _propTypes.default.func.isRequired
244
+ }), _propTypes.default.string]),
245
+ "marginBottom": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
246
+ "__@toStringTag": _propTypes.default.string.isRequired,
247
+ "description": _propTypes.default.string,
248
+ "toString": _propTypes.default.func.isRequired,
249
+ "valueOf": _propTypes.default.func.isRequired
250
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
251
+ "__@toStringTag": _propTypes.default.string.isRequired,
252
+ "description": _propTypes.default.string,
253
+ "toString": _propTypes.default.func.isRequired,
254
+ "valueOf": _propTypes.default.func.isRequired
255
+ }), _propTypes.default.string]),
256
+ "marginLeft": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
257
+ "__@toStringTag": _propTypes.default.string.isRequired,
258
+ "description": _propTypes.default.string,
259
+ "toString": _propTypes.default.func.isRequired,
260
+ "valueOf": _propTypes.default.func.isRequired
261
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
262
+ "__@toStringTag": _propTypes.default.string.isRequired,
263
+ "description": _propTypes.default.string,
264
+ "toString": _propTypes.default.func.isRequired,
265
+ "valueOf": _propTypes.default.func.isRequired
266
+ }), _propTypes.default.string]),
267
+ "marginRight": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
268
+ "__@toStringTag": _propTypes.default.string.isRequired,
269
+ "description": _propTypes.default.string,
270
+ "toString": _propTypes.default.func.isRequired,
271
+ "valueOf": _propTypes.default.func.isRequired
272
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
273
+ "__@toStringTag": _propTypes.default.string.isRequired,
274
+ "description": _propTypes.default.string,
275
+ "toString": _propTypes.default.func.isRequired,
276
+ "valueOf": _propTypes.default.func.isRequired
277
+ }), _propTypes.default.string]),
278
+ "marginTop": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
279
+ "__@toStringTag": _propTypes.default.string.isRequired,
280
+ "description": _propTypes.default.string,
281
+ "toString": _propTypes.default.func.isRequired,
282
+ "valueOf": _propTypes.default.func.isRequired
283
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
284
+ "__@toStringTag": _propTypes.default.string.isRequired,
285
+ "description": _propTypes.default.string,
286
+ "toString": _propTypes.default.func.isRequired,
287
+ "valueOf": _propTypes.default.func.isRequired
288
+ }), _propTypes.default.string]),
289
+ "marginX": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
290
+ "__@toStringTag": _propTypes.default.string.isRequired,
291
+ "description": _propTypes.default.string,
292
+ "toString": _propTypes.default.func.isRequired,
293
+ "valueOf": _propTypes.default.func.isRequired
294
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
295
+ "__@toStringTag": _propTypes.default.string.isRequired,
296
+ "description": _propTypes.default.string,
297
+ "toString": _propTypes.default.func.isRequired,
298
+ "valueOf": _propTypes.default.func.isRequired
299
+ }), _propTypes.default.string]),
300
+ "marginY": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
301
+ "__@toStringTag": _propTypes.default.string.isRequired,
302
+ "description": _propTypes.default.string,
303
+ "toString": _propTypes.default.func.isRequired,
304
+ "valueOf": _propTypes.default.func.isRequired
305
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
306
+ "__@toStringTag": _propTypes.default.string.isRequired,
307
+ "description": _propTypes.default.string,
308
+ "toString": _propTypes.default.func.isRequired,
309
+ "valueOf": _propTypes.default.func.isRequired
310
+ }), _propTypes.default.string]),
311
+ "mb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
312
+ "__@toStringTag": _propTypes.default.string.isRequired,
313
+ "description": _propTypes.default.string,
314
+ "toString": _propTypes.default.func.isRequired,
315
+ "valueOf": _propTypes.default.func.isRequired
316
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
317
+ "__@toStringTag": _propTypes.default.string.isRequired,
318
+ "description": _propTypes.default.string,
319
+ "toString": _propTypes.default.func.isRequired,
320
+ "valueOf": _propTypes.default.func.isRequired
321
+ }), _propTypes.default.string]),
322
+ "ml": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
323
+ "__@toStringTag": _propTypes.default.string.isRequired,
324
+ "description": _propTypes.default.string,
325
+ "toString": _propTypes.default.func.isRequired,
326
+ "valueOf": _propTypes.default.func.isRequired
327
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
328
+ "__@toStringTag": _propTypes.default.string.isRequired,
329
+ "description": _propTypes.default.string,
330
+ "toString": _propTypes.default.func.isRequired,
331
+ "valueOf": _propTypes.default.func.isRequired
332
+ }), _propTypes.default.string]),
333
+ "mr": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
334
+ "__@toStringTag": _propTypes.default.string.isRequired,
335
+ "description": _propTypes.default.string,
336
+ "toString": _propTypes.default.func.isRequired,
337
+ "valueOf": _propTypes.default.func.isRequired
338
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
339
+ "__@toStringTag": _propTypes.default.string.isRequired,
340
+ "description": _propTypes.default.string,
341
+ "toString": _propTypes.default.func.isRequired,
342
+ "valueOf": _propTypes.default.func.isRequired
343
+ }), _propTypes.default.string]),
344
+ "mt": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
345
+ "__@toStringTag": _propTypes.default.string.isRequired,
346
+ "description": _propTypes.default.string,
347
+ "toString": _propTypes.default.func.isRequired,
348
+ "valueOf": _propTypes.default.func.isRequired
349
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
350
+ "__@toStringTag": _propTypes.default.string.isRequired,
351
+ "description": _propTypes.default.string,
352
+ "toString": _propTypes.default.func.isRequired,
353
+ "valueOf": _propTypes.default.func.isRequired
354
+ }), _propTypes.default.string]),
355
+ "mx": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
356
+ "__@toStringTag": _propTypes.default.string.isRequired,
357
+ "description": _propTypes.default.string,
358
+ "toString": _propTypes.default.func.isRequired,
359
+ "valueOf": _propTypes.default.func.isRequired
360
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
361
+ "__@toStringTag": _propTypes.default.string.isRequired,
362
+ "description": _propTypes.default.string,
363
+ "toString": _propTypes.default.func.isRequired,
364
+ "valueOf": _propTypes.default.func.isRequired
365
+ }), _propTypes.default.string]),
366
+ "my": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
367
+ "__@toStringTag": _propTypes.default.string.isRequired,
368
+ "description": _propTypes.default.string,
369
+ "toString": _propTypes.default.func.isRequired,
370
+ "valueOf": _propTypes.default.func.isRequired
371
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
372
+ "__@toStringTag": _propTypes.default.string.isRequired,
373
+ "description": _propTypes.default.string,
374
+ "toString": _propTypes.default.func.isRequired,
375
+ "valueOf": _propTypes.default.func.isRequired
376
+ }), _propTypes.default.string]),
377
+ "onClose": _propTypes.default.func,
378
+ "onOpen": _propTypes.default.func,
379
+ "placement": _propTypes.default.oneOf(["bottom", "top"]),
380
+ "renderButton": _propTypes.default.func,
381
+ "rightAlignMenu": _propTypes.default.bool,
382
+ "submenuPosition": _propTypes.default.oneOf(["left", "right"])
383
+ };
384
+ }
216
385
  var _default = exports.default = ActionPopover;
package/lib/components/action-popover/index.d.ts CHANGED
@@ -8,3 +8,4 @@ export { default as ActionPopoverMenuButton } from "./action-popover-menu-button
8
8
  export type { ActionPopoverMenuButtonProps } from "./action-popover-menu-button/action-popover-menu-button.component";
9
9
  export { default as ActionPopoverDivider } from "./action-popover-divider/action-popover-divider.component";
10
10
  export type { RenderButtonProps } from "./action-popover.component";
11
+ export type { ActionPopoverHandle } from "./action-popover.component";
package/lib/components/menu/__internal__/submenu/submenu.style.js CHANGED
@@ -70,8 +70,13 @@ const StyledSubmenu = exports.StyledSubmenu = _styledComponents.default.ul`
70
70
  min-width: 100%;
71
71
 
72
72
  ${submenuMaxWidth && (0, _styledComponents.css)`
73
+ width: max-content;
73
74
  max-width: ${submenuMaxWidth};
74
75
 
76
+ li {
77
+ max-width: ${submenuMaxWidth};
78
+ }
79
+
75
80
  &&& {
76
81
  a,
77
82
  button,
package/lib/components/menu/menu-item/menu-item.component.js CHANGED
@@ -72,7 +72,8 @@ const MenuItem = ({
72
72
  submenuFocusId,
73
73
  updateFocusId: updateSubmenuFocusId,
74
74
  handleKeyDown: handleSubmenuKeyDown,
75
- shiftTabPressed
75
+ shiftTabPressed,
76
+ submenuHasMaxWidth
76
77
  } = submenuContext;
77
78
  const ref = (0, _react.useRef)(null);
78
79
  const focusFromMenu = focusId === menuItemId.current;
@@ -200,7 +201,7 @@ const MenuItem = ({
200
201
  }, elementProps, {
201
202
  menuItemVariant: variant,
202
203
  ariaLabel: ariaLabel,
203
- maxWidth: maxWidth,
204
+ maxWidth: !submenuHasMaxWidth ? itemMaxWidth : undefined,
204
205
  inFullscreenView: inFullscreenView,
205
206
  asPassiveItem: asPassiveItem,
206
207
  placeholderTabIndex: asPassiveItem
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "146.1.0",
3
+ "version": "146.2.1",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",