carbon-react 117.4.1 → 117.6.0

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

@@ -46,7 +46,7 @@ const StyledSubmenuWrapper = _styledComponents.default.div`
 }) => inFullscreenView && (0, _styledComponents.css)`
       width: 100%;
 
-      ${asPassiveItem && (0, _styledComponents.css)`
+      ${asPassiveItem && menuType && (0, _styledComponents.css)`
         ${_menuItem.default} {
           outline: none;
           color: ${_menu2.default[menuType].title};
@@ -62,7 +62,7 @@ const StyledSubmenu = _styledComponents.default.ul`
   variant,
   inFullscreenView
 }) => (0, _styledComponents.css)`
-    ${!inFullscreenView && (0, _styledComponents.css)`
+    ${!inFullscreenView && menuType && (0, _styledComponents.css)`
       box-shadow: var(--boxShadow100);
       position: absolute;
       background-color: ${variant === "default" ? _menu2.default[menuType].submenuItemBackground : _menu2.default[menuType].background};
@@ -98,7 +98,7 @@ const StyledSubmenu = _styledComponents.default.ul`
       white-space: nowrap;
       cursor: pointer;
 
-      ${!inFullscreenView && (0, _styledComponents.css)`
+      ${!inFullscreenView && menuType && (0, _styledComponents.css)`
         background-color: ${_menu2.default[menuType].submenuItemBackground};
 
         a:focus,
@@ -108,7 +108,7 @@ const StyledSubmenu = _styledComponents.default.ul`
 
         a:hover,
         button:hover {
-          background-color: ${_menu2.default[menuType].submenuItemBackgroundHover};
+          background-color: transparent;
           color: var(--colorsComponentsMenuYang100);
 
           [data-component="icon"] {

package/lib/components/menu/index.d.ts

@@ -1,6 +1,12 @@
-export { default as Menu } from "./menu";
-export { default as MenuItem } from "./menu-item/menu-item";
-export { default as ScrollableBlock } from "./scrollable-block/scrollable-block";
-export { default as MenuDivider } from "./menu-divider/menu-divider";
-export { default as MenuSegmentTitle } from "./menu-segment-title/menu-segment-title";
-export { default as MenuFullscreen } from "./menu-full-screen/menu-full-screen";
+export { default as Menu } from "./menu.component";
+export type { MenuProps } from "./menu.component";
+export { default as MenuItem } from "./menu-item";
+export type { MenuWithIcon, MenuWithChildren } from "./menu-item";
+export { default as MenuDivider } from "./menu-divider";
+export type { MenuDividerProps } from "./menu-divider";
+export { default as MenuSegmentTitle } from "./menu-segment-title";
+export type { MenuTitleProps } from "./menu-segment-title";
+export { default as MenuFullscreen } from "./menu-full-screen";
+export type { MenuFullscreenProps } from "./menu-full-screen";
+export { default as ScrollableBlock } from "./scrollable-block";
+export type { ScrollableBlockProps } from "./scrollable-block";

package/lib/components/menu/index.js

@@ -42,14 +42,14 @@ Object.defineProperty(exports, "ScrollableBlock", {
 
 var _menu = _interopRequireDefault(require("./menu.component"));
 
-var _menuItem = _interopRequireDefault(require("./menu-item/menu-item.component"));
+var _menuItem = _interopRequireDefault(require("./menu-item"));
 
-var _menuDivider = _interopRequireDefault(require("./menu-divider/menu-divider.component"));
+var _menuDivider = _interopRequireDefault(require("./menu-divider"));
 
-var _menuSegmentTitle = _interopRequireDefault(require("./menu-segment-title/menu-segment-title.component"));
+var _menuSegmentTitle = _interopRequireDefault(require("./menu-segment-title"));
 
-var _menuFullScreen = _interopRequireDefault(require("./menu-full-screen/menu-full-screen.component"));
+var _menuFullScreen = _interopRequireDefault(require("./menu-full-screen"));
 
-var _scrollableBlock = _interopRequireDefault(require("./scrollable-block/scrollable-block.component"));
+var _scrollableBlock = _interopRequireDefault(require("./scrollable-block"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/menu/menu-divider/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./menu-divider";
-export * from "./menu-divider";
+export { default } from "./menu-divider.component";
+export type { MenuDividerProps } from "./menu-divider.component";

package/lib/components/menu/menu-divider/index.js

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

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface MenuDividerProps extends TagProps {
+    size?: "default" | "large";
+}
+declare const MenuDivider: React.ForwardRefExoticComponent<MenuDividerProps & React.RefAttributes<HTMLDivElement>>;
+export default MenuDivider;

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

@@ -15,29 +15,37 @@ 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 MenuDivider = /*#__PURE__*/_react.default.forwardRef(({
-  size = "default"
+  size = "default",
+  ...rest
 }, ref) => {
   const menuContext = (0, _react.useContext)(_menu.default);
   return /*#__PURE__*/_react.default.createElement(_menu2.StyledMenuItem, {
     inSubmenu: true
-  }, /*#__PURE__*/_react.default.createElement(_menuDivider.default, {
-    size: size,
-    "data-component": "menu-divider",
+  }, /*#__PURE__*/_react.default.createElement(_menuDivider.default, _extends({
+    size: size
+  }, (0, _tags.default)("menu-divider", rest), {
     menuType: menuContext.menuType,
     ref: ref
-  }));
+  })));
 });
 
 MenuDivider.propTypes = {
-  /** sets the size of the MenuDivider */
-  size: _propTypes.default.oneOf(["default", "large"])
+  "data-component": _propTypes.default.string,
+  "data-element": _propTypes.default.string,
+  "data-role": _propTypes.default.string,
+  "size": _propTypes.default.oneOf(["default", "large"])
 };
+MenuDivider.displayName = "MenuDivider";
 var _default = MenuDivider;
 exports.default = _default;

package/lib/components/menu/menu-divider/menu-divider.style.d.ts

@@ -0,0 +1,6 @@
+import { MenuDividerProps } from "./menu-divider.component";
+import { MenuType } from "../menu.context";
+declare const StyledDivider: import("styled-components").StyledComponent<"div", any, MenuDividerProps & {
+    menuType: MenuType;
+}, never>;
+export default StyledDivider;

package/lib/components/menu/menu-divider/package.json

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

package/lib/components/menu/menu-full-screen/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./menu-full-screen";
-export * from "./menu-full-screen";
+export { default } from "./menu-full-screen.component";
+export type { MenuFullscreenProps } from "./menu-full-screen.component";

package/lib/components/menu/menu-full-screen/menu-full-screen.component.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface MenuFullscreenProps extends TagProps {
+    /** The child elements to render */
+    children?: React.ReactNode;
+    /** Sets whether the component is open or closed */
+    isOpen?: boolean;
+    /** The start position for the component to open from */
+    startPosition?: "left" | "right";
+    /** A callback to be called when the close icon is clicked or enter is pressed when focused */
+    onClose: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLButtonElement>) => void;
+}
+export declare const MenuFullscreen: ({ children, isOpen, startPosition, onClose, ...rest }: MenuFullscreenProps) => JSX.Element;
+export default MenuFullscreen;

package/lib/components/menu/menu-full-screen/menu-full-screen.component.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.MenuFullscreen = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -29,6 +29,8 @@ var _portal = _interopRequireDefault(require("../../portal"));
 
 var _menuDivider = _interopRequireDefault(require("../menu-divider/menu-divider.component"));
 
+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; }
@@ -44,11 +46,12 @@ const MenuFullscreen = ({
   onClose,
   ...rest
 }) => {
-  const menuWrapperRef = (0, _react.useRef)();
-  const menuContentRef = (0, _react.useRef)();
+  const menuWrapperRef = (0, _react.useRef)(null);
+  const menuContentRef = (0, _react.useRef)(null);
   const {
     menuType
   } = (0, _react.useContext)(_menu2.default);
+  const isDarkVariant = ["dark", "black"].includes(menuType);
 
   const handleKeyDown = ev => {
     /* istanbul ignore else */
@@ -57,31 +60,18 @@ const MenuFullscreen = ({
     }
   };
 
-  const scrollVariants = {
-    light: "light",
-    dark: "dark",
-    white: "light",
-    black: "dark"
-  };
-  const iconColors = {
-    light: undefined,
-    dark: "#FFFFFF",
-    white: undefined,
-    black: "#FFFFFF"
-  };
   return /*#__PURE__*/_react.default.createElement("li", {
     "aria-label": "menu-fullscreen"
   }, /*#__PURE__*/_react.default.createElement(_portal.default, null, /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
     wrapperRef: menuWrapperRef,
     isOpen: isOpen
   }, /*#__PURE__*/_react.default.createElement(_menuFullScreen.StyledMenuFullscreen, _extends({
-    "data-component": "menu-fullscreen",
     ref: menuWrapperRef,
     isOpen: isOpen,
     menuType: menuType,
     startPosition: startPosition,
     onKeyDown: handleKeyDown
-  }, rest), /*#__PURE__*/_react.default.createElement(_menuFullScreen.StyledMenuFullscreenHeader, {
+  }, rest, (0, _tags.default)("menu-fullscreen", rest)), /*#__PURE__*/_react.default.createElement(_menuFullScreen.StyledMenuFullscreenHeader, {
     isOpen: isOpen,
     menuType: menuType,
     startPosition: startPosition
@@ -91,10 +81,10 @@ const MenuFullscreen = ({
     "data-element": "close"
   }, /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: "close",
-    color: iconColors[menuType]
+    color: isDarkVariant ? "--colorsYang100" : undefined
   }))), /*#__PURE__*/_react.default.createElement(_box.default, {
     overflowY: "auto",
-    scrollVariant: scrollVariants[menuType],
+    scrollVariant: isDarkVariant ? "dark" : "light",
     width: "100%",
     height: "calc(100% - 40px)"
   }, /*#__PURE__*/_react.default.createElement(_menu.StyledMenuWrapper, {
@@ -109,23 +99,24 @@ const MenuFullscreen = ({
     value: {
       inFullscreenView: true,
       menuType,
-      inMenu: true
+      inMenu: true,
+      openSubmenuId: null,
+      setOpenSubmenuId:
+      /* istanbul ignore next */
+      () => {}
     }
   }, _react.default.Children.map(children, (child, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, child, index < _react.default.Children.count(children) - 1 && /*#__PURE__*/_react.default.createElement(_menuDivider.default, null))))))))));
 };
 
+exports.MenuFullscreen = MenuFullscreen;
 MenuFullscreen.propTypes = {
-  /** The child elements to render */
-  children: _propTypes.default.node,
-
-  /** Sets whether the component is open or closed */
-  isOpen: _propTypes.default.bool,
-
-  /** The start position for the component to open from */
-  startPosition: _propTypes.default.oneOf(["left", "right"]),
-
-  /** A callback to be called when the close icon is clicked or enter is pressed when focused */
-  onClose: _propTypes.default.func.isRequired
+  "children": _propTypes.default.node,
+  "data-component": _propTypes.default.string,
+  "data-element": _propTypes.default.string,
+  "data-role": _propTypes.default.string,
+  "isOpen": _propTypes.default.bool,
+  "onClose": _propTypes.default.func.isRequired,
+  "startPosition": _propTypes.default.oneOf(["left", "right"])
 };
 var _default = MenuFullscreen;
 exports.default = _default;

package/lib/components/menu/menu-full-screen/menu-full-screen.style.d.ts

@@ -0,0 +1,8 @@
+import { MenuFullscreenProps } from "./menu-full-screen.component";
+import { MenuType } from "../menu.context";
+interface StyledMenuFullScreenProps extends Pick<MenuFullscreenProps, "isOpen" | "startPosition"> {
+    menuType: MenuType;
+}
+declare const StyledMenuFullscreen: import("styled-components").StyledComponent<"div", any, StyledMenuFullScreenProps, never>;
+declare const StyledMenuFullscreenHeader: import("styled-components").StyledComponent<"div", any, StyledMenuFullScreenProps, never>;
+export { StyledMenuFullscreen, StyledMenuFullscreenHeader };

package/lib/components/menu/menu-full-screen/menu-full-screen.style.js

@@ -50,41 +50,43 @@ const StyledMenuFullscreen = _styledComponents.default.div`
     background-color: ${_menu.default[menuType].background};
     z-index: ${theme.zIndex.fullScreenModal};
 
-    ${menuType === "dark" && (0, _styledComponents.css)`
-      ${_search.default} span > [data-component="icon"] {
-        color: var(--colorsUtilityMajor200);
-
-        &:hover {
-          color: var(--colorsUtilityMajor150);
+    && {
+      ${menuType === "dark" && (0, _styledComponents.css)`
+        ${_search.default} span > [data-component="icon"] {
+          color: var(--colorsUtilityMajor200);
+
+          &:hover {
+            color: var(--colorsUtilityMajor150);
+          }
         }
-      }
-    `}
+      `}
 
-    ${menuType === "light" && (0, _styledComponents.css)`
-      ${_search.default} span > [data-component="icon"] {
-        color: var(--colorsUtilityMajor200);
+      ${menuType === "light" && (0, _styledComponents.css)`
+        ${_search.default} span > [data-component="icon"] {
+          color: var(--colorsUtilityMajor200);
 
-        &:hover {
-          color: var(--colorsUtilityMajor400);
+          &:hover {
+            color: var(--colorsUtilityMajor400);
+          }
         }
-      }
-    `}
+      `}
 
-    ${_search.default} {
-      ${_icon.default} {
-        display: inline-flex;
-        margin-right: 0;
-        bottom: auto;
-      }
+      ${_search.default} {
+        ${_icon.default} {
+          display: inline-flex;
+          margin-right: 0;
+          bottom: auto;
+        }
 
-      ${_button.default} {
-        display: flex;
-        line-height: normal;
-        padding-bottom: 0;
+        ${_button.default} {
+          display: flex;
+          line-height: normal;
+          padding-bottom: 0;
 
-        &:focus {
-          outline: solid 3px var(--colorsSemanticFocus500);
-          box-shadow: none;
+          &:focus {
+            outline: solid 3px var(--colorsSemanticFocus500);
+            box-shadow: none;
+          }
         }
       }
     }

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

@@ -1,2 +1,2 @@
-export { default } from "./menu-item";
-export * from "./menu-item";
+export { default } from "./menu-item.component";
+export type { MenuWithChildren, MenuWithIcon, VariantType, } from "./menu-item.component";

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

@@ -0,0 +1,67 @@
+import React from "react";
+import { FlexboxProps, LayoutProps, MaxWidthProps, PaddingProps } from "styled-system";
+import { IconType } from "../../icon";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export declare type VariantType = "default" | "alternate";
+interface MenuItemBaseProps extends TagProps, LayoutProps, FlexboxProps, PaddingProps {
+    /** Custom className */
+    className?: string;
+    /** onClick handler */
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    /** Defines which direction the submenu will hang eg. left/right */
+    submenuDirection?: string;
+    /** Is the menu item the currently selected item. */
+    selected?: boolean;
+    /** A title for the menu item that has a submenu. */
+    submenu?: string | boolean;
+    /** The href to use for the menu item. */
+    href?: string;
+    /** onKeyDown handler */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** The target to use for the menu item. */
+    target?: string;
+    /** The rel attribute to be used for the underlying <a> tag */
+    rel?: string;
+    /** set the colour variant for a menuType */
+    variant?: VariantType;
+    /** Flag to display the dropdown arrow when an item has a submenu */
+    showDropdownArrow?: boolean;
+    /** If no text is provided an ariaLabel should be given to facilitate accessibility. */
+    ariaLabel?: string;
+    /** Callback triggered when submenu opens. Only valid with submenu prop */
+    onSubmenuOpen?: () => void;
+    /** Callback triggered when submenu closes. Only valid with submenu prop */
+    onSubmenuClose?: () => void;
+    /**
+      @ignore @private
+      private prop, used inside ScrollableBlock to ensure the MenuItem's color variant overrides the CSS
+      for other MenuItems inside the block
+     */
+    overrideColor?: boolean;
+    /** @private @ignore */
+    "data-component"?: string;
+    /** When set the submenu opens by click instead of hover */
+    clickToOpen?: boolean;
+    /** Sets the maxWidth of the MenuItem */
+    maxWidth?: MaxWidthProps["maxWidth"];
+    /**
+     * @private @ignore
+     * Renders MenuItem as a div element
+     * */
+    as?: "div";
+}
+export interface MenuWithChildren extends MenuItemBaseProps {
+    children?: React.ReactNode;
+    /** Either prop `icon` must be defined or this node must have children. */
+    icon?: IconType;
+}
+export interface MenuWithIcon extends MenuItemBaseProps {
+    /** Either prop `icon` must be defined or this node must have children. */
+    icon: IconType;
+    children?: React.ReactNode;
+}
+export declare const MenuItem: {
+    ({ submenu, children, href, onClick, target, submenuDirection, icon, selected, onKeyDown, variant, showDropdownArrow, ariaLabel, clickToOpen, maxWidth, onSubmenuOpen, onSubmenuClose, overrideColor, rel, as, ...rest }: MenuWithChildren | MenuWithIcon): JSX.Element;
+    displayName: string;
+};
+export default MenuItem;