carbon-react 151.4.0 → 151.5.1

package/esm/components/menu/__internal__/submenu/submenu.component.d.ts

@@ -40,6 +40,8 @@ export interface SubmenuProps {
     ariaLabel?: string;
     /** Sets the max-width of the submenu container element */
     submenuMaxWidth?: string;
+    /** Sets the min-width of the submenu container element */
+    submenuMinWidth?: string;
 }
 declare const Submenu: React.ForwardRefExoticComponent<SubmenuProps & React.RefAttributes<HTMLAnchorElement>>;
 export default Submenu;

package/esm/components/menu/__internal__/submenu/submenu.component.js

@@ -28,6 +28,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
   onSubmenuClose,
   onClick,
   submenuMaxWidth,
+  submenuMinWidth,
   ...rest
 }, ref) => {
   const [submenuRef, setSubmenuRef] = useState(null);
@@ -324,6 +325,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     applyFocusRadiusStyling: applyFocusRadius,
     applyFocusRadiusStylingToLastItem: applyFocusRadiusToLastItem,
     submenuMaxWidth: submenuMaxWidth,
+    submenuMinWidth: submenuMinWidth,
     onBlur: handleSubmenuBlur
   }, /*#__PURE__*/React.createElement(SubmenuContext.Provider, {
     value: {

package/esm/components/menu/__internal__/submenu/submenu.style.d.ts

@@ -8,7 +8,7 @@ interface StyledSubmenuWrapperProps extends SharedStyleProps {
     isSubmenuOpen?: boolean;
     asPassiveItem?: boolean;
 }
-interface StyledSubmenuProps extends SharedStyleProps, Pick<SubmenuProps, "variant" | "submenuMaxWidth"> {
+interface StyledSubmenuProps extends SharedStyleProps, Pick<SubmenuProps, "variant" | "submenuMaxWidth" | "submenuMinWidth"> {
     submenuDirection?: string;
     maxHeight?: string;
     applyFocusRadiusStyling: boolean;

package/esm/components/menu/__internal__/submenu/submenu.style.js

@@ -50,7 +50,8 @@ const StyledSubmenu = styled.ul`
   maxHeight,
   applyFocusRadiusStyling,
   applyFocusRadiusStylingToLastItem,
-  submenuMaxWidth
+  submenuMaxWidth,
+  submenuMinWidth
 }) => css`
     ${!inFullscreenView && menuType && css`
       box-shadow: var(--boxShadow100);
@@ -58,7 +59,7 @@ const StyledSubmenu = styled.ul`
       top: 100%;
       background-color: ${variant === "default" ? menuConfigVariants[menuType].submenuItemBackground : menuConfigVariants[menuType].background};
 
-      min-width: 100%;
+      min-width: ${submenuMinWidth ?? "100%"};
 
       ${submenuMaxWidth && css`
         width: max-content;

package/esm/components/menu/menu-item/menu-item.component.d.ts

@@ -48,8 +48,19 @@ interface MenuItemBaseProps extends TagProps, Pick<LayoutProps, "width" | "maxWi
      * Renders MenuItem as a div element
      * */
     as?: "div";
-    /** Sets the max-width of the submenu container element, accepts any valid CSS string */
+    /**
+     * Sets the maximum width for the item's submenu when it is opened.
+     * This prop is only applicable if the item has a submenu.
+     * Overrides the maximum width of any items within the submenu.
+     * Accepts any valid CSS width value (e.g. "200px", "50%").
+     * */
     submenuMaxWidth?: string;
+    /**
+     * Sets a minimum width for the item's submenu when it is opened.
+     * Accepts any valid CSS width value (e.g. "200px", "50%").
+     * This prop is only applicable if the item has a submenu.
+     * */
+    submenuMinWidth?: string;
 }
 export interface MenuWithChildren extends MenuItemBaseProps {
     children?: React.ReactNode;
@@ -61,5 +72,5 @@ export interface MenuWithIcon extends MenuItemBaseProps {
     icon: IconType;
     children?: React.ReactNode;
 }
-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;
+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;
 export default MenuItem;

package/esm/components/menu/menu-item/menu-item.component.js

@@ -14,6 +14,7 @@ import guid from "../../../__internal__/utils/helpers/guid";
 export const MenuItem = ({
   submenu,
   submenuMaxWidth,
+  submenuMinWidth,
   children,
   href,
   onClick,
@@ -145,7 +146,8 @@ export const MenuItem = ({
       ariaLabel: ariaLabel,
       onSubmenuOpen: onSubmenuOpen,
       onSubmenuClose: onSubmenuClose,
-      submenuMaxWidth: submenuMaxWidth
+      submenuMaxWidth: submenuMaxWidth,
+      submenuMinWidth: submenuMinWidth
     }, elementProps, {
       variant: variant
     }, rest), children));

package/esm/locales/en-gb.js

@@ -58,7 +58,7 @@ const enGB = {
       (errors, warnings, type) => {
         const errorPlural = isSingular(errors) ? "error" : "errors";
         const warningPlural = isSingular(warnings) ? "warning" : "warnings";
-        const isErrorPlural = isSingular(errors) && !warnings ? "is" : "are";
+        const isErrorPlural = isSingular(errors) ? "is" : "are";
         const isWarningPlural = isSingular(warnings) ? "is" : "are";
         if (errors && warnings && type === "warning") {
           return ["and", `${warnings} ${warningPlural}`];

package/lib/components/menu/__internal__/submenu/submenu.component.d.ts

@@ -40,6 +40,8 @@ export interface SubmenuProps {
     ariaLabel?: string;
     /** Sets the max-width of the submenu container element */
     submenuMaxWidth?: string;
+    /** Sets the min-width of the submenu container element */
+    submenuMinWidth?: string;
 }
 declare const Submenu: React.ForwardRefExoticComponent<SubmenuProps & React.RefAttributes<HTMLAnchorElement>>;
 export default Submenu;

package/lib/components/menu/__internal__/submenu/submenu.component.js

@@ -37,6 +37,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
   onSubmenuClose,
   onClick,
   submenuMaxWidth,
+  submenuMinWidth,
   ...rest
 }, ref) => {
   const [submenuRef, setSubmenuRef] = (0, _react.useState)(null);
@@ -333,6 +334,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
     applyFocusRadiusStyling: applyFocusRadius,
     applyFocusRadiusStylingToLastItem: applyFocusRadiusToLastItem,
     submenuMaxWidth: submenuMaxWidth,
+    submenuMinWidth: submenuMinWidth,
     onBlur: handleSubmenuBlur
   }, /*#__PURE__*/_react.default.createElement(_submenu2.default.Provider, {
     value: {

package/lib/components/menu/__internal__/submenu/submenu.style.d.ts

@@ -8,7 +8,7 @@ interface StyledSubmenuWrapperProps extends SharedStyleProps {
     isSubmenuOpen?: boolean;
     asPassiveItem?: boolean;
 }
-interface StyledSubmenuProps extends SharedStyleProps, Pick<SubmenuProps, "variant" | "submenuMaxWidth"> {
+interface StyledSubmenuProps extends SharedStyleProps, Pick<SubmenuProps, "variant" | "submenuMaxWidth" | "submenuMinWidth"> {
     submenuDirection?: string;
     maxHeight?: string;
     applyFocusRadiusStyling: boolean;

package/lib/components/menu/__internal__/submenu/submenu.style.js

@@ -59,7 +59,8 @@ const StyledSubmenu = exports.StyledSubmenu = _styledComponents.default.ul`
   maxHeight,
   applyFocusRadiusStyling,
   applyFocusRadiusStylingToLastItem,
-  submenuMaxWidth
+  submenuMaxWidth,
+  submenuMinWidth
 }) => (0, _styledComponents.css)`
     ${!inFullscreenView && menuType && (0, _styledComponents.css)`
       box-shadow: var(--boxShadow100);
@@ -67,7 +68,7 @@ const StyledSubmenu = exports.StyledSubmenu = _styledComponents.default.ul`
       top: 100%;
       background-color: ${variant === "default" ? _menu2.default[menuType].submenuItemBackground : _menu2.default[menuType].background};
 
-      min-width: 100%;
+      min-width: ${submenuMinWidth ?? "100%"};
 
       ${submenuMaxWidth && (0, _styledComponents.css)`
         width: max-content;

package/lib/components/menu/menu-item/menu-item.component.d.ts

@@ -48,8 +48,19 @@ interface MenuItemBaseProps extends TagProps, Pick<LayoutProps, "width" | "maxWi
      * Renders MenuItem as a div element
      * */
     as?: "div";
-    /** Sets the max-width of the submenu container element, accepts any valid CSS string */
+    /**
+     * Sets the maximum width for the item's submenu when it is opened.
+     * This prop is only applicable if the item has a submenu.
+     * Overrides the maximum width of any items within the submenu.
+     * Accepts any valid CSS width value (e.g. "200px", "50%").
+     * */
     submenuMaxWidth?: string;
+    /**
+     * Sets a minimum width for the item's submenu when it is opened.
+     * Accepts any valid CSS width value (e.g. "200px", "50%").
+     * This prop is only applicable if the item has a submenu.
+     * */
+    submenuMinWidth?: string;
 }
 export interface MenuWithChildren extends MenuItemBaseProps {
     children?: React.ReactNode;
@@ -61,5 +72,5 @@ export interface MenuWithIcon extends MenuItemBaseProps {
     icon: IconType;
     children?: React.ReactNode;
 }
-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;
+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;
 export default MenuItem;

package/lib/components/menu/menu-item/menu-item.component.js

@@ -23,6 +23,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 const MenuItem = ({
   submenu,
   submenuMaxWidth,
+  submenuMinWidth,
   children,
   href,
   onClick,
@@ -154,7 +155,8 @@ const MenuItem = ({
       ariaLabel: ariaLabel,
       onSubmenuOpen: onSubmenuOpen,
       onSubmenuClose: onSubmenuClose,
-      submenuMaxWidth: submenuMaxWidth
+      submenuMaxWidth: submenuMaxWidth,
+      submenuMinWidth: submenuMinWidth
     }, elementProps, {
       variant: variant
     }, rest), children));

package/lib/locales/en-gb.js

@@ -64,7 +64,7 @@ const enGB = {
       (errors, warnings, type) => {
         const errorPlural = isSingular(errors) ? "error" : "errors";
         const warningPlural = isSingular(warnings) ? "warning" : "warnings";
-        const isErrorPlural = isSingular(errors) && !warnings ? "is" : "are";
+        const isErrorPlural = isSingular(errors) ? "is" : "are";
         const isWarningPlural = isSingular(warnings) ? "is" : "are";
         if (errors && warnings && type === "warning") {
           return ["and", `${warnings} ${warningPlural}`];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "151.4.0",
+  "version": "151.5.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",