carbon-react 117.4.1 → 117.6.0

package/lib/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/lib/components/menu/menu-item/menu-item.style.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
+var _styledSystem = require("styled-system");
+
 var _link = require("../../link/link.style");
 
 var _icon = _interopRequireDefault(require("../../icon/icon.style"));
@@ -15,13 +17,19 @@ var _iconButton = _interopRequireDefault(require("../../icon-button/icon-button.
 
 var _menu = _interopRequireDefault(require("../menu.config"));
 
+var _link2 = _interopRequireDefault(require("../../link"));
+
+var _themes = require("../../../style/themes");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const StyledMenuItemWrapper = _styledComponents.default.a`
+const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
+  as: _link2.default
+})`
   ${({
   menuType,
   selected,
@@ -29,68 +37,81 @@ const StyledMenuItemWrapper = _styledComponents.default.a`
   isOpen,
   variant,
   showDropdownArrow,
-  isSearch,
   href,
   clickToOpen,
   maxWidth,
   inFullscreenView,
   overrideColor,
-  as,
-  asPassiveItem
+  asPassiveItem,
+  asDiv,
+  hasInput
 }) => (0, _styledComponents.css)`
+    ${_styledSystem.padding}
+
     display: inline-block;
     font-size: 14px;
     font-weight: 700;
     height: 40px;
     position: relative;
-    cursor: pointer;
+    a,
+    button {
+      cursor: pointer;
+    }
     ${!overrideColor && (0, _styledComponents.css)`
-        background-color: ${_menu.default[menuType].background};
-      `}};
-    
+      background-color: ${_menu.default[menuType].background};
+    `}
+
     ${overrideColor && (0, _styledComponents.css)`
-        &&&& {
-          background-color: ${variant === "alternate" ? _menu.default[menuType].alternate : _menu.default[menuType].submenuItemBackground};
-        }
-      `}
+      &&&& {
+        background-color: ${variant === "alternate" ? _menu.default[menuType].alternate : _menu.default[menuType].submenuItemBackground};
+      }
+    `}
 
     ${!inFullscreenView && (0, _styledComponents.css)`
-        max-width: inherit;
-
-        && {
-          a,
-          button {
-            ${maxWidth && (0, _styledComponents.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: ${_menu.default[menuType].background};
-            color: ${_menu.default[menuType].color};
-            z-index: 1;
-            position: relative;
-          }
+      && {
+        a:focus,
+        button:focus {
+          box-shadow: inset 0 0 0 var(--borderWidth300)
+            var(--colorsSemanticFocus500);
+          background-color: ${_menu.default[menuType].background};
+          color: ${_menu.default[menuType].color};
+          z-index: 1;
+          position: relative;
+        }
+      }
+
+      &&& {
+        a,
+        button {
+          ${maxWidth && (0, _styledComponents.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 && (0, _styledComponents.css)`
             background-color: var(--colorsComponentsMenuAutumnStandard600);
             color: var(--colorsComponentsMenuYang100);
 
             [data-component="icon"] {
               color: var(--colorsComponentsMenuYang100);
             }
+          `}
+
+          ::before {
+            border-top-color: var(--colorsComponentsMenuYang100);
           }
         }
-      `}
+      }
+    `}
 
     ${asPassiveItem ? `
         ${_iconButton.default} {
@@ -123,7 +144,7 @@ const StyledMenuItemWrapper = _styledComponents.default.a`
       text-align: left;
     }
 
-    && {
+    &&& {
       a,
       button,
       [data-component="icon"],
@@ -132,7 +153,7 @@ const StyledMenuItemWrapper = _styledComponents.default.a`
       ${_link.StyledLink} [data-component="icon"] {
         font-weight: 700;
         text-decoration: none;
-        color: ${_menu.default[menuType].color};
+        ${!hasInput && `color: ${_menu.default[menuType].color};`}
       }
 
       ${_icon.default} {
@@ -141,123 +162,141 @@ const StyledMenuItemWrapper = _styledComponents.default.a`
     }
 
     ${selected && (0, _styledComponents.css)`
-        background-color: ${_menu.default[menuType].selected};
+      background-color: ${_menu.default[menuType].selected};
 
-        a:focus,
-        button:focus {
-          background-color: ${_menu.default[menuType].selected};
-        }
+      a:focus,
+      button:focus {
+        background-color: ${_menu.default[menuType].selected};
+      }
 
-        a:hover,
-        button:hover {
-          background-color: var(--colorsComponentsMenuAutumnStandard600);
-        }
-      `}
+      a:hover,
+      button:hover {
+        background-color: var(--colorsComponentsMenuAutumnStandard600);
+      }
+    `}
 
     ${variant === "alternate" && !inFullscreenView && (0, _styledComponents.css)`
-        &&& {
-          background-color: ${_menu.default[menuType].alternate};
-        }
+      &&& {
+        background-color: ${_menu.default[menuType].alternate};
+      }
 
-        &&& a:focus,
-        &&& button:focus {
-          background-color: ${_menu.default[menuType].alternate};
-        }
+      &&& a:focus,
+      &&& button:focus {
+        background-color: ${_menu.default[menuType].alternate};
+      }
 
+      ${!hasInput && (0, _styledComponents.css)`
         &&& a:hover,
         &&& button:hover {
           background-color: ${_menu.default[menuType].alternateHover};
         }
       `}
+    `}
 
     ${isOpen && (0, _styledComponents.css)`
-        a,
-        button {
-          background-color: ${_menu.default[menuType].submenuItemBackground};
-          color: ${_menu.default[menuType].color};
-        }
-      `} 
-    
+      a,
+      button {
+        background-color: ${_menu.default[menuType].submenuItemBackground};
+        color: ${_menu.default[menuType].color};
+      }
+    `}
+
     ${hasSubmenu && (0, _styledComponents.css)`
+      background-color: ${_menu.default[menuType].submenuBackground};
+
+      a:focus,
+      button:focus {
         background-color: ${_menu.default[menuType].submenuBackground};
+        color: ${_menu.default[menuType].color};
 
-        a:focus,
-        button:focus {
-          background-color: ${_menu.default[menuType].submenuBackground};
+        [data-component="icon"] {
           color: ${_menu.default[menuType].color};
-
-          [data-component="icon"] {
-            color: ${_menu.default[menuType].color};
-          }
-
-          ${clickToOpen && isOpen && (0, _styledComponents.css)`
-            background-color: ${_menu.default[menuType].submenuOpenedBackground};
-          `}
         }
 
-        a:hover,
-        button:hover {
+        ${clickToOpen && isOpen && (0, _styledComponents.css)`
           background-color: ${_menu.default[menuType].submenuOpenedBackground};
-          color: var(--colorsComponentsMenuYang100);
+        `}
+      }
 
-          ${!(href || clickToOpen) && (0, _styledComponents.css)`
-            cursor: default;
-            background-color: ${_menu.default[menuType].submenuItemBackground};
-            color: ${_menu.default[menuType].color};
-          `}
+      a:hover,
+      button:hover {
+        background-color: ${_menu.default[menuType].submenuOpenedBackground};
+        color: var(--colorsComponentsMenuYang100);
 
-          [data-component="icon"] {
-            color: ${_menu.default[menuType].color};
-          }
+        ${!(href || clickToOpen) && (0, _styledComponents.css)`
+          cursor: default;
+          background-color: ${_menu.default[menuType].submenuItemBackground};
+          color: ${_menu.default[menuType].color};
+        `}
+
+        [data-component="icon"] {
+          color: ${_menu.default[menuType].color};
         }
+      }
 
-        ${selected && (0, _styledComponents.css)`
+      ${selected && (0, _styledComponents.css)`
+        background-color: ${_menu.default[menuType].submenuSelected};
+
+        a:focus,
+        button:focus {
           background-color: ${_menu.default[menuType].submenuSelected};
+        }
 
-          a:focus,
-          button:focus {
-            background-color: ${_menu.default[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 && (0, _styledComponents.css)`
+        > a,
+        > button:not(${_iconButton.default}) {
+          padding-right: 32px;
+        }
 
-        ${showDropdownArrow && (0, _styledComponents.css)`
-          > a,
-          > button:not(${_iconButton.default}) {
-            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;
+        }
+      `}
+    `}
 
-          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 ${_menu.default[menuType].text};
-            border-right: 4px solid transparent;
-            border-bottom: 4px solid transparent;
-            border-left: 4px solid transparent;
+    ${inFullscreenView && (0, _styledComponents.css)`
+      ${asDiv && (0, _styledComponents.css)`
+          &&& {
+            > a,
+            > button {
+              color: ${_menu.default[menuType].title};
+              outline: none;
+            }
+
+            > button:hover,
+            > a:hover {
+              background-color: transparent;
+              cursor: default;
+              outline: none;
+              color: ${_menu.default[menuType].title};
+            }
           }
         `}
-      `}
 
-    ${isSearch && (0, _styledComponents.css)`
-        padding: 2px 16px;
-      `}
-
-    ${inFullscreenView && (0, _styledComponents.css)`
-        ${as === "div" && (0, _styledComponents.css)`
+      ${asPassiveItem && (0, _styledComponents.css)`
           cursor: default;
           padding: 0 16px;
 
@@ -266,35 +305,41 @@ const StyledMenuItemWrapper = _styledComponents.default.a`
           }
         `}
 
-        a,
+      a,
       ${_link.StyledLink} a,
       button,
       ${_link.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: _themes.baseTheme
+};
 var _default = StyledMenuItemWrapper;
 exports.default = _default;

package/lib/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/lib/components/menu/menu-segment-title/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _menuSegmentTitle.default;
+  }
+});
+
+var _menuSegmentTitle = _interopRequireDefault(require("./menu-segment-title.component"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/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/lib/components/menu/menu-segment-title/menu-segment-title.component.js

@@ -15,33 +15,38 @@ var _menu = _interopRequireDefault(require("../menu.context"));
 
 var _menu2 = require("../menu.style");
 
+var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+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); }
+
 const MenuSegmentTitle = /*#__PURE__*/_react.default.forwardRef(({
   children,
-  variant = "default"
+  variant = "default",
+  ...rest
 }, ref) => {
   const menuContext = (0, _react.useContext)(_menu.default);
   return /*#__PURE__*/_react.default.createElement(_menu2.StyledMenuItem, {
     inSubmenu: true
-  }, /*#__PURE__*/_react.default.createElement(_menuSegmentTitle.default, {
-    "data-component": "menu-segment-title",
+  }, /*#__PURE__*/_react.default.createElement(_menuSegmentTitle.default, _extends({}, (0, _tags.default)("menu-segment-title", rest), {
     menuType: menuContext.menuType,
     ref: ref,
     variant: variant
-  }, children));
+  }), children));
 });
 
 MenuSegmentTitle.propTypes = {
-  /** set the colour variant for a menuType */
-  variant: _propTypes.default.oneOf(["default", "alternate"]),
-
-  /** the text to be displayed */
-  children: _propTypes.default.string.isRequired
+  "children": _propTypes.default.string.isRequired,
+  "data-component": _propTypes.default.string,
+  "data-element": _propTypes.default.string,
+  "data-role": _propTypes.default.string,
+  "variant": _propTypes.default.oneOf(["alternate", "default"])
 };
+MenuSegmentTitle.displayName = "MenuSegmentTitle";
 var _default = MenuSegmentTitle;
 exports.default = _default;

package/lib/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/lib/components/menu/menu-segment-title/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../esm/components/menu/menu-segment-title/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/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;
-}