carbon-react 151.4.0 → 151.5.0

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 (13) hide show
  1. package/esm/components/menu/__internal__/submenu/submenu.component.d.ts +2 -0
  2. package/esm/components/menu/__internal__/submenu/submenu.component.js +2 -0
  3. package/esm/components/menu/__internal__/submenu/submenu.style.d.ts +1 -1
  4. package/esm/components/menu/__internal__/submenu/submenu.style.js +3 -2
  5. package/esm/components/menu/menu-item/menu-item.component.d.ts +13 -2
  6. package/esm/components/menu/menu-item/menu-item.component.js +3 -1
  7. package/lib/components/menu/__internal__/submenu/submenu.component.d.ts +2 -0
  8. package/lib/components/menu/__internal__/submenu/submenu.component.js +2 -0
  9. package/lib/components/menu/__internal__/submenu/submenu.style.d.ts +1 -1
  10. package/lib/components/menu/__internal__/submenu/submenu.style.js +3 -2
  11. package/lib/components/menu/menu-item/menu-item.component.d.ts +13 -2
  12. package/lib/components/menu/menu-item/menu-item.component.js +3 -1
  13. package/package.json +1 -1
package/esm/components/menu/__internal__/submenu/submenu.component.d.ts CHANGED
@@ -40,6 +40,8 @@ export interface SubmenuProps {
40
40
  ariaLabel?: string;
41
41
  /** Sets the max-width of the submenu container element */
42
42
  submenuMaxWidth?: string;
43
+ /** Sets the min-width of the submenu container element */
44
+ submenuMinWidth?: string;
43
45
  }
44
46
  declare const Submenu: React.ForwardRefExoticComponent<SubmenuProps & React.RefAttributes<HTMLAnchorElement>>;
45
47
  export default Submenu;
package/esm/components/menu/__internal__/submenu/submenu.component.js CHANGED
@@ -28,6 +28,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
28
28
  onSubmenuClose,
29
29
  onClick,
30
30
  submenuMaxWidth,
31
+ submenuMinWidth,
31
32
  ...rest
32
33
  }, ref) => {
33
34
  const [submenuRef, setSubmenuRef] = useState(null);
@@ -324,6 +325,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
324
325
  applyFocusRadiusStyling: applyFocusRadius,
325
326
  applyFocusRadiusStylingToLastItem: applyFocusRadiusToLastItem,
326
327
  submenuMaxWidth: submenuMaxWidth,
328
+ submenuMinWidth: submenuMinWidth,
327
329
  onBlur: handleSubmenuBlur
328
330
  }, /*#__PURE__*/React.createElement(SubmenuContext.Provider, {
329
331
  value: {
package/esm/components/menu/__internal__/submenu/submenu.style.d.ts CHANGED
@@ -8,7 +8,7 @@ interface StyledSubmenuWrapperProps extends SharedStyleProps {
8
8
  isSubmenuOpen?: boolean;
9
9
  asPassiveItem?: boolean;
10
10
  }
11
- interface StyledSubmenuProps extends SharedStyleProps, Pick<SubmenuProps, "variant" | "submenuMaxWidth"> {
11
+ interface StyledSubmenuProps extends SharedStyleProps, Pick<SubmenuProps, "variant" | "submenuMaxWidth" | "submenuMinWidth"> {
12
12
  submenuDirection?: string;
13
13
  maxHeight?: string;
14
14
  applyFocusRadiusStyling: boolean;
package/esm/components/menu/__internal__/submenu/submenu.style.js CHANGED
@@ -50,7 +50,8 @@ const StyledSubmenu = styled.ul`
50
50
  maxHeight,
51
51
  applyFocusRadiusStyling,
52
52
  applyFocusRadiusStylingToLastItem,
53
- submenuMaxWidth
53
+ submenuMaxWidth,
54
+ submenuMinWidth
54
55
  }) => css`
55
56
  ${!inFullscreenView && menuType && css`
56
57
  box-shadow: var(--boxShadow100);
@@ -58,7 +59,7 @@ const StyledSubmenu = styled.ul`
58
59
  top: 100%;
59
60
  background-color: ${variant === "default" ? menuConfigVariants[menuType].submenuItemBackground : menuConfigVariants[menuType].background};
60
61
 
61
- min-width: 100%;
62
+ min-width: ${submenuMinWidth ?? "100%"};
62
63
 
63
64
  ${submenuMaxWidth && css`
64
65
  width: max-content;
package/esm/components/menu/menu-item/menu-item.component.d.ts CHANGED
@@ -48,8 +48,19 @@ interface MenuItemBaseProps extends TagProps, Pick<LayoutProps, "width" | "maxWi
48
48
  * Renders MenuItem as a div element
49
49
  * */
50
50
  as?: "div";
51
- /** Sets the max-width of the submenu container element, accepts any valid CSS string */
51
+ /**
52
+ * Sets the maximum width for the item's submenu when it is opened.
53
+ * This prop is only applicable if the item has a submenu.
54
+ * Overrides the maximum width of any items within the submenu.
55
+ * Accepts any valid CSS width value (e.g. "200px", "50%").
56
+ * */
52
57
  submenuMaxWidth?: string;
58
+ /**
59
+ * Sets a minimum width for the item's submenu when it is opened.
60
+ * Accepts any valid CSS width value (e.g. "200px", "50%").
61
+ * This prop is only applicable if the item has a submenu.
62
+ * */
63
+ submenuMinWidth?: string;
53
64
  }
54
65
  export interface MenuWithChildren extends MenuItemBaseProps {
55
66
  children?: React.ReactNode;
@@ -61,5 +72,5 @@ export interface MenuWithIcon extends MenuItemBaseProps {
61
72
  icon: IconType;
62
73
  children?: React.ReactNode;
63
74
  }
64
- export declare const MenuItem: ({ submenu, submenuMaxWidth, children, href, onClick, target, submenuDirection, icon, selected, onKeyDown, variant, showDropdownArrow, ariaLabel, clickToOpen, maxWidth, onSubmenuOpen, onSubmenuClose, overrideColor, rel, as, "data-element": dataElement, "data-role": dataRole, ...rest }: MenuWithChildren | MenuWithIcon) => React.JSX.Element;
75
+ export declare const MenuItem: ({ submenu, submenuMaxWidth, submenuMinWidth, children, href, onClick, target, submenuDirection, icon, selected, onKeyDown, variant, showDropdownArrow, ariaLabel, clickToOpen, maxWidth, onSubmenuOpen, onSubmenuClose, overrideColor, rel, as, "data-element": dataElement, "data-role": dataRole, ...rest }: MenuWithChildren | MenuWithIcon) => React.JSX.Element;
65
76
  export default MenuItem;
package/esm/components/menu/menu-item/menu-item.component.js CHANGED
@@ -14,6 +14,7 @@ import guid from "../../../__internal__/utils/helpers/guid";
14
14
  export const MenuItem = ({
15
15
  submenu,
16
16
  submenuMaxWidth,
17
+ submenuMinWidth,
17
18
  children,
18
19
  href,
19
20
  onClick,
@@ -145,7 +146,8 @@ export const MenuItem = ({
145
146
  ariaLabel: ariaLabel,
146
147
  onSubmenuOpen: onSubmenuOpen,
147
148
  onSubmenuClose: onSubmenuClose,
148
- submenuMaxWidth: submenuMaxWidth
149
+ submenuMaxWidth: submenuMaxWidth,
150
+ submenuMinWidth: submenuMinWidth
149
151
  }, elementProps, {
150
152
  variant: variant
151
153
  }, rest), children));
package/lib/components/menu/__internal__/submenu/submenu.component.d.ts CHANGED
@@ -40,6 +40,8 @@ export interface SubmenuProps {
40
40
  ariaLabel?: string;
41
41
  /** Sets the max-width of the submenu container element */
42
42
  submenuMaxWidth?: string;
43
+ /** Sets the min-width of the submenu container element */
44
+ submenuMinWidth?: string;
43
45
  }
44
46
  declare const Submenu: React.ForwardRefExoticComponent<SubmenuProps & React.RefAttributes<HTMLAnchorElement>>;
45
47
  export default Submenu;
package/lib/components/menu/__internal__/submenu/submenu.component.js CHANGED
@@ -37,6 +37,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
37
37
  onSubmenuClose,
38
38
  onClick,
39
39
  submenuMaxWidth,
40
+ submenuMinWidth,
40
41
  ...rest
41
42
  }, ref) => {
42
43
  const [submenuRef, setSubmenuRef] = (0, _react.useState)(null);
@@ -333,6 +334,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
333
334
  applyFocusRadiusStyling: applyFocusRadius,
334
335
  applyFocusRadiusStylingToLastItem: applyFocusRadiusToLastItem,
335
336
  submenuMaxWidth: submenuMaxWidth,
337
+ submenuMinWidth: submenuMinWidth,
336
338
  onBlur: handleSubmenuBlur
337
339
  }, /*#__PURE__*/_react.default.createElement(_submenu2.default.Provider, {
338
340
  value: {
package/lib/components/menu/__internal__/submenu/submenu.style.d.ts CHANGED
@@ -8,7 +8,7 @@ interface StyledSubmenuWrapperProps extends SharedStyleProps {
8
8
  isSubmenuOpen?: boolean;
9
9
  asPassiveItem?: boolean;
10
10
  }
11
- interface StyledSubmenuProps extends SharedStyleProps, Pick<SubmenuProps, "variant" | "submenuMaxWidth"> {
11
+ interface StyledSubmenuProps extends SharedStyleProps, Pick<SubmenuProps, "variant" | "submenuMaxWidth" | "submenuMinWidth"> {
12
12
  submenuDirection?: string;
13
13
  maxHeight?: string;
14
14
  applyFocusRadiusStyling: boolean;
package/lib/components/menu/__internal__/submenu/submenu.style.js CHANGED
@@ -59,7 +59,8 @@ const StyledSubmenu = exports.StyledSubmenu = _styledComponents.default.ul`
59
59
  maxHeight,
60
60
  applyFocusRadiusStyling,
61
61
  applyFocusRadiusStylingToLastItem,
62
- submenuMaxWidth
62
+ submenuMaxWidth,
63
+ submenuMinWidth
63
64
  }) => (0, _styledComponents.css)`
64
65
  ${!inFullscreenView && menuType && (0, _styledComponents.css)`
65
66
  box-shadow: var(--boxShadow100);
@@ -67,7 +68,7 @@ const StyledSubmenu = exports.StyledSubmenu = _styledComponents.default.ul`
67
68
  top: 100%;
68
69
  background-color: ${variant === "default" ? _menu2.default[menuType].submenuItemBackground : _menu2.default[menuType].background};
69
70
 
70
- min-width: 100%;
71
+ min-width: ${submenuMinWidth ?? "100%"};
71
72
 
72
73
  ${submenuMaxWidth && (0, _styledComponents.css)`
73
74
  width: max-content;
package/lib/components/menu/menu-item/menu-item.component.d.ts CHANGED
@@ -48,8 +48,19 @@ interface MenuItemBaseProps extends TagProps, Pick<LayoutProps, "width" | "maxWi
48
48
  * Renders MenuItem as a div element
49
49
  * */
50
50
  as?: "div";
51
- /** Sets the max-width of the submenu container element, accepts any valid CSS string */
51
+ /**
52
+ * Sets the maximum width for the item's submenu when it is opened.
53
+ * This prop is only applicable if the item has a submenu.
54
+ * Overrides the maximum width of any items within the submenu.
55
+ * Accepts any valid CSS width value (e.g. "200px", "50%").
56
+ * */
52
57
  submenuMaxWidth?: string;
58
+ /**
59
+ * Sets a minimum width for the item's submenu when it is opened.
60
+ * Accepts any valid CSS width value (e.g. "200px", "50%").
61
+ * This prop is only applicable if the item has a submenu.
62
+ * */
63
+ submenuMinWidth?: string;
53
64
  }
54
65
  export interface MenuWithChildren extends MenuItemBaseProps {
55
66
  children?: React.ReactNode;
@@ -61,5 +72,5 @@ export interface MenuWithIcon extends MenuItemBaseProps {
61
72
  icon: IconType;
62
73
  children?: React.ReactNode;
63
74
  }
64
- export declare const MenuItem: ({ submenu, submenuMaxWidth, children, href, onClick, target, submenuDirection, icon, selected, onKeyDown, variant, showDropdownArrow, ariaLabel, clickToOpen, maxWidth, onSubmenuOpen, onSubmenuClose, overrideColor, rel, as, "data-element": dataElement, "data-role": dataRole, ...rest }: MenuWithChildren | MenuWithIcon) => React.JSX.Element;
75
+ export declare const MenuItem: ({ submenu, submenuMaxWidth, submenuMinWidth, children, href, onClick, target, submenuDirection, icon, selected, onKeyDown, variant, showDropdownArrow, ariaLabel, clickToOpen, maxWidth, onSubmenuOpen, onSubmenuClose, overrideColor, rel, as, "data-element": dataElement, "data-role": dataRole, ...rest }: MenuWithChildren | MenuWithIcon) => React.JSX.Element;
65
76
  export default MenuItem;
package/lib/components/menu/menu-item/menu-item.component.js CHANGED
@@ -23,6 +23,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
23
23
  const MenuItem = ({
24
24
  submenu,
25
25
  submenuMaxWidth,
26
+ submenuMinWidth,
26
27
  children,
27
28
  href,
28
29
  onClick,
@@ -154,7 +155,8 @@ const MenuItem = ({
154
155
  ariaLabel: ariaLabel,
155
156
  onSubmenuOpen: onSubmenuOpen,
156
157
  onSubmenuClose: onSubmenuClose,
157
- submenuMaxWidth: submenuMaxWidth
158
+ submenuMaxWidth: submenuMaxWidth,
159
+ submenuMinWidth: submenuMinWidth
158
160
  }, elementProps, {
159
161
  variant: variant
160
162
  }, rest), children));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "151.4.0",
3
+ "version": "151.5.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",