carbon-react 117.4.1 → 117.6.0

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

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { PaddingProps } from "styled-system";
+import { MenuType } from "../menu.context";
+import { MenuWithChildren } from "./menu-item.component";
+interface StyledMenuItemWrapperProps extends Pick<MenuWithChildren, "href" | "variant" | "showDropdownArrow" | "overrideColor" | "clickToOpen" | "maxWidth">, PaddingProps {
+    menuType: MenuType;
+    selected?: boolean;
+    hasSubmenu?: boolean;
+    isOpen?: boolean;
+    inFullscreenView?: boolean;
+    asPassiveItem?: boolean;
+    placeholderTabIndex?: boolean;
+    icon?: string;
+    ariaLabel?: string;
+    asDiv?: boolean;
+    hasInput?: boolean;
+}
+declare const StyledMenuItemWrapper: import("styled-components").StyledComponent<"a", any, {
+    as: import("react").ForwardRefExoticComponent<import("../../link").LinkProps & import("react").RefAttributes<HTMLButtonElement | HTMLLinkElement>>;
+} & StyledMenuItemWrapperProps, "as">;
+export default StyledMenuItemWrapper;

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

@@ -1,9 +1,14 @@
 import styled, { css } from "styled-components";
+import { padding } from "styled-system";
 import { StyledLink } from "../../link/link.style";
 import StyledIcon from "../../icon/icon.style";
 import StyledIconButton from "../../icon-button/icon-button.style";
 import menuConfigVariants from "../menu.config";
-const StyledMenuItemWrapper = styled.a`
+import Link from "../../link";
+import { baseTheme } from "../../../style/themes";
+const StyledMenuItemWrapper = styled.a.attrs({
+  as: Link
+})`
   ${({
   menuType,
   selected,
@@ -11,68 +16,81 @@ const StyledMenuItemWrapper = styled.a`
   isOpen,
   variant,
   showDropdownArrow,
-  isSearch,
   href,
   clickToOpen,
   maxWidth,
   inFullscreenView,
   overrideColor,
-  as,
-  asPassiveItem
+  asPassiveItem,
+  asDiv,
+  hasInput
 }) => css`
+    ${padding}
+
     display: inline-block;
     font-size: 14px;
     font-weight: 700;
     height: 40px;
     position: relative;
-    cursor: pointer;
+    a,
+    button {
+      cursor: pointer;
+    }
     ${!overrideColor && css`
-        background-color: ${menuConfigVariants[menuType].background};
-      `}};
-    
+      background-color: ${menuConfigVariants[menuType].background};
+    `}
+
     ${overrideColor && css`
-        &&&& {
-          background-color: ${variant === "alternate" ? menuConfigVariants[menuType].alternate : menuConfigVariants[menuType].submenuItemBackground};
-        }
-      `}
+      &&&& {
+        background-color: ${variant === "alternate" ? menuConfigVariants[menuType].alternate : menuConfigVariants[menuType].submenuItemBackground};
+      }
+    `}
 
     ${!inFullscreenView && css`
-        max-width: inherit;
-
-        && {
-          a,
-          button {
-            ${maxWidth && css`
-              box-sizing: border-box;
-              max-width: inherit;
-              text-overflow: ellipsis;
-              overflow: hidden;
-              white-space: nowrap;
-              vertical-align: bottom;
-            `}
-          }
+      max-width: inherit;
 
-          a:focus,
-          button:focus {
-            box-shadow: inset 0 0 0 var(--borderWidth300)
-              var(--colorsSemanticFocus500);
-            background-color: ${menuConfigVariants[menuType].background};
-            color: ${menuConfigVariants[menuType].color};
-            z-index: 1;
-            position: relative;
-          }
+      && {
+        a:focus,
+        button:focus {
+          box-shadow: inset 0 0 0 var(--borderWidth300)
+            var(--colorsSemanticFocus500);
+          background-color: ${menuConfigVariants[menuType].background};
+          color: ${menuConfigVariants[menuType].color};
+          z-index: 1;
+          position: relative;
+        }
+      }
+
+      &&& {
+        a,
+        button {
+          ${maxWidth && css`
+            box-sizing: border-box;
+            max-width: inherit;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            vertical-align: bottom;
+          `}
+        }
 
-          a:hover,
-          button:hover {
+        a:hover,
+        button:hover {
+          ${!asDiv && css`
             background-color: var(--colorsComponentsMenuAutumnStandard600);
             color: var(--colorsComponentsMenuYang100);
 
             [data-component="icon"] {
               color: var(--colorsComponentsMenuYang100);
             }
+          `}
+
+          ::before {
+            border-top-color: var(--colorsComponentsMenuYang100);
           }
         }
-      `}
+      }
+    `}
 
     ${asPassiveItem ? `
         ${StyledIconButton} {
@@ -105,7 +123,7 @@ const StyledMenuItemWrapper = styled.a`
       text-align: left;
     }
 
-    && {
+    &&& {
       a,
       button,
       [data-component="icon"],
@@ -114,7 +132,7 @@ const StyledMenuItemWrapper = styled.a`
       ${StyledLink} [data-component="icon"] {
         font-weight: 700;
         text-decoration: none;
-        color: ${menuConfigVariants[menuType].color};
+        ${!hasInput && `color: ${menuConfigVariants[menuType].color};`}
       }
 
       ${StyledIcon} {
@@ -123,123 +141,141 @@ const StyledMenuItemWrapper = styled.a`
     }
 
     ${selected && css`
-        background-color: ${menuConfigVariants[menuType].selected};
+      background-color: ${menuConfigVariants[menuType].selected};
 
-        a:focus,
-        button:focus {
-          background-color: ${menuConfigVariants[menuType].selected};
-        }
+      a:focus,
+      button:focus {
+        background-color: ${menuConfigVariants[menuType].selected};
+      }
 
-        a:hover,
-        button:hover {
-          background-color: var(--colorsComponentsMenuAutumnStandard600);
-        }
-      `}
+      a:hover,
+      button:hover {
+        background-color: var(--colorsComponentsMenuAutumnStandard600);
+      }
+    `}
 
     ${variant === "alternate" && !inFullscreenView && css`
-        &&& {
-          background-color: ${menuConfigVariants[menuType].alternate};
-        }
+      &&& {
+        background-color: ${menuConfigVariants[menuType].alternate};
+      }
 
-        &&& a:focus,
-        &&& button:focus {
-          background-color: ${menuConfigVariants[menuType].alternate};
-        }
+      &&& a:focus,
+      &&& button:focus {
+        background-color: ${menuConfigVariants[menuType].alternate};
+      }
 
+      ${!hasInput && css`
         &&& a:hover,
         &&& button:hover {
           background-color: ${menuConfigVariants[menuType].alternateHover};
         }
       `}
+    `}
 
     ${isOpen && css`
-        a,
-        button {
-          background-color: ${menuConfigVariants[menuType].submenuItemBackground};
-          color: ${menuConfigVariants[menuType].color};
-        }
-      `} 
-    
+      a,
+      button {
+        background-color: ${menuConfigVariants[menuType].submenuItemBackground};
+        color: ${menuConfigVariants[menuType].color};
+      }
+    `}
+
     ${hasSubmenu && css`
+      background-color: ${menuConfigVariants[menuType].submenuBackground};
+
+      a:focus,
+      button:focus {
         background-color: ${menuConfigVariants[menuType].submenuBackground};
+        color: ${menuConfigVariants[menuType].color};
 
-        a:focus,
-        button:focus {
-          background-color: ${menuConfigVariants[menuType].submenuBackground};
+        [data-component="icon"] {
           color: ${menuConfigVariants[menuType].color};
-
-          [data-component="icon"] {
-            color: ${menuConfigVariants[menuType].color};
-          }
-
-          ${clickToOpen && isOpen && css`
-            background-color: ${menuConfigVariants[menuType].submenuOpenedBackground};
-          `}
         }
 
-        a:hover,
-        button:hover {
+        ${clickToOpen && isOpen && css`
           background-color: ${menuConfigVariants[menuType].submenuOpenedBackground};
-          color: var(--colorsComponentsMenuYang100);
+        `}
+      }
 
-          ${!(href || clickToOpen) && css`
-            cursor: default;
-            background-color: ${menuConfigVariants[menuType].submenuItemBackground};
-            color: ${menuConfigVariants[menuType].color};
-          `}
+      a:hover,
+      button:hover {
+        background-color: ${menuConfigVariants[menuType].submenuOpenedBackground};
+        color: var(--colorsComponentsMenuYang100);
 
-          [data-component="icon"] {
-            color: ${menuConfigVariants[menuType].color};
-          }
+        ${!(href || clickToOpen) && css`
+          cursor: default;
+          background-color: ${menuConfigVariants[menuType].submenuItemBackground};
+          color: ${menuConfigVariants[menuType].color};
+        `}
+
+        [data-component="icon"] {
+          color: ${menuConfigVariants[menuType].color};
         }
+      }
 
-        ${selected && css`
+      ${selected && css`
+        background-color: ${menuConfigVariants[menuType].submenuSelected};
+
+        a:focus,
+        button:focus {
           background-color: ${menuConfigVariants[menuType].submenuSelected};
+        }
 
-          a:focus,
-          button:focus {
-            background-color: ${menuConfigVariants[menuType].submenuSelected};
-          }
+        a:hover,
+        button:hover {
+          background-color: var(--colorsComponentsMenuAutumnStandard600);
+          color: var(--colorsComponentsMenuYang100);
+        }
+      `}
 
-          a:hover,
-          button:hover {
-            background-color: var(--colorsComponentsMenuAutumnStandard600);
-            color: var(--colorsComponentsMenuYang100);
-          }
-        `}
+      ${showDropdownArrow && css`
+        > a,
+        > button:not(${StyledIconButton}) {
+          padding-right: 32px;
+        }
 
-        ${showDropdownArrow && css`
-          > a,
-          > button:not(${StyledIconButton}) {
-            padding-right: 32px;
-          }
+        a::before,
+        button::before {
+          display: block;
+          margin-top: -2px;
+          pointer-events: none;
+          position: absolute;
+          right: 16px;
+          top: 50%;
+          z-index: 2;
+          content: "";
+          width: 0;
+          height: 0;
+          border-width: 5px 4px 4px;
+          border-style: solid;
+          border-top-color: initial;
+          border-right-color: transparent;
+          border-bottom-color: transparent;
+          border-left-color: transparent;
+        }
+      `}
+    `}
+
+    ${inFullscreenView && css`
+      ${asDiv && css`
+          &&& {
+            > a,
+            > button {
+              color: ${menuConfigVariants[menuType].title};
+              outline: none;
+            }
 
-          a::before,
-          button::before {
-            display: block;
-            margin-top: -2px;
-            pointer-events: none;
-            position: absolute;
-            right: 16px;
-            top: 50%;
-            z-index: 2;
-            content: "";
-            width: 0;
-            height: 0;
-            border-top: 5px solid ${menuConfigVariants[menuType].text};
-            border-right: 4px solid transparent;
-            border-bottom: 4px solid transparent;
-            border-left: 4px solid transparent;
+            > button:hover,
+            > a:hover {
+              background-color: transparent;
+              cursor: default;
+              outline: none;
+              color: ${menuConfigVariants[menuType].title};
+            }
           }
         `}
-      `}
 
-    ${isSearch && css`
-        padding: 2px 16px;
-      `}
-
-    ${inFullscreenView && css`
-        ${as === "div" && css`
+      ${asPassiveItem && css`
           cursor: default;
           padding: 0 16px;
 
@@ -248,34 +284,40 @@ const StyledMenuItemWrapper = styled.a`
           }
         `}
 
-        a,
+      a,
       ${StyledLink} a,
       button,
       ${StyledLink} button {
-          width: 100vw;
-          box-sizing: border-box;
-        }
+        width: 100vw;
+        box-sizing: border-box;
+      }
 
-        a:focus,
-        button:focus {
-          box-shadow: inset 0 0 0 var(--borderWidth300)
-            var(--colorsSemanticFocus500);
-          z-index: 1;
-          position: relative;
-        }
+      a:focus,
+      button:focus {
+        box-shadow: inset 0 0 0 var(--borderWidth300)
+          var(--colorsSemanticFocus500);
+        z-index: 1;
+        position: relative;
+      }
 
-        a:focus,
-        a:hover,
-        button:focus,
-        button:hover {
-          background-color: var(--colorsComponentsMenuAutumnStandard600);
-          color: var(--colorsComponentsMenuYang100);
+      a:focus,
+      a:hover,
+      button:focus,
+      button:hover {
+        background-color: var(--colorsComponentsMenuAutumnStandard600);
+        color: var(--colorsComponentsMenuYang100);
 
-          [data-component="icon"] {
-            color: var(--colorsComponentsMenuYang100);
-          }
+          ${!hasInput && `
+            [data-component="icon"] {
+              color: var(--colorsComponentsMenuYang100);
+            }
+          `}
         }
-      `}
+      }
+    `}
   `}
 `;
+StyledMenuItemWrapper.defaultProps = {
+  theme: baseTheme
+};
 export default StyledMenuItemWrapper;

package/esm/components/menu/menu-segment-title/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./menu-segment-title";
-export * from "./menu-segment-title";
+export { default } from "./menu-segment-title.component";
+export type { MenuTitleProps } from "./menu-segment-title.component";

package/esm/components/menu/menu-segment-title/index.js

@@ -0,0 +1 @@
+export { default } from "./menu-segment-title.component";

package/esm/components/menu/menu-segment-title/menu-segment-title.component.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { VariantType } from "../menu-item";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface MenuTitleProps extends TagProps {
+    children: string;
+    /** Set the colour variant for a menuType */
+    variant?: VariantType;
+}
+declare const MenuSegmentTitle: React.ForwardRefExoticComponent<MenuTitleProps & React.RefAttributes<HTMLDivElement>>;
+export default MenuSegmentTitle;

package/esm/components/menu/menu-segment-title/menu-segment-title.component.js

@@ -1,27 +1,31 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import StyledTitle from "./menu-segment-title.style";
 import MenuContext from "../menu.context";
 import { StyledMenuItem } from "../menu.style";
+import tagComponent from "../../../__internal__/utils/helpers/tags";
 const MenuSegmentTitle = /*#__PURE__*/React.forwardRef(({
   children,
-  variant = "default"
+  variant = "default",
+  ...rest
 }, ref) => {
   const menuContext = useContext(MenuContext);
   return /*#__PURE__*/React.createElement(StyledMenuItem, {
     inSubmenu: true
-  }, /*#__PURE__*/React.createElement(StyledTitle, {
-    "data-component": "menu-segment-title",
+  }, /*#__PURE__*/React.createElement(StyledTitle, _extends({}, tagComponent("menu-segment-title", rest), {
     menuType: menuContext.menuType,
     ref: ref,
     variant: variant
-  }, children));
+  }), children));
 });
 MenuSegmentTitle.propTypes = {
-  /** set the colour variant for a menuType */
-  variant: PropTypes.oneOf(["default", "alternate"]),
-
-  /** the text to be displayed */
-  children: PropTypes.string.isRequired
+  "children": PropTypes.string.isRequired,
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
+  "variant": PropTypes.oneOf(["alternate", "default"])
 };
+MenuSegmentTitle.displayName = "MenuSegmentTitle";
 export default MenuSegmentTitle;

package/esm/components/menu/menu-segment-title/menu-segment-title.style.d.ts

@@ -0,0 +1,8 @@
+import { VariantType } from "../menu-item";
+import { MenuType } from "../menu.context";
+interface StyledTitleProps {
+    variant?: VariantType;
+    menuType: MenuType;
+}
+declare const StyledTitle: import("styled-components").StyledComponent<"div", any, StyledTitleProps, never>;
+export default StyledTitle;

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

@@ -1,11 +1,13 @@
+import React from "react";
+import { LayoutProps, FlexboxProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+import MenuContext, { MenuType } from "./menu.context";
+export interface MenuProps extends TagProps, LayoutProps, FlexboxProps {
+    /** Children elements */
+    children: React.ReactNode;
+    /** Defines the color scheme of the component */
+    menuType?: MenuType;
+}
+export declare const Menu: ({ menuType, children, ...rest }: MenuProps) => JSX.Element;
 export { MenuContext };
 export default Menu;
-import MenuContext from "./menu.context";
-declare function Menu({ menuType, children, ...rest }: {
-    [x: string]: any;
-    menuType?: string | undefined;
-    children: any;
-}): JSX.Element;
-declare namespace Menu {
-    const propTypes: any;
-}