carbon-react 117.4.1 → 117.6.0

package/esm/components/menu/index.js

@@ -1,6 +1,6 @@
 export { default as Menu } from "./menu.component";
-export { default as MenuItem } from "./menu-item/menu-item.component";
-export { default as MenuDivider } from "./menu-divider/menu-divider.component";
-export { default as MenuSegmentTitle } from "./menu-segment-title/menu-segment-title.component";
-export { default as MenuFullscreen } from "./menu-full-screen/menu-full-screen.component";
-export { default as ScrollableBlock } from "./scrollable-block/scrollable-block.component";
+export { default as MenuItem } from "./menu-item";
+export { default as MenuDivider } from "./menu-divider";
+export { default as MenuSegmentTitle } from "./menu-segment-title";
+export { default as MenuFullscreen } from "./menu-full-screen";
+export { default as ScrollableBlock } from "./scrollable-block";

package/esm/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/esm/components/menu/menu-divider/index.js

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

package/esm/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/esm/components/menu/menu-divider/menu-divider.component.js

@@ -1,23 +1,30 @@
+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 StyledDivider from "./menu-divider.style";
 import MenuContext from "../menu.context";
 import { StyledMenuItem } from "../menu.style";
+import tagComponent from "../../../__internal__/utils/helpers/tags";
 const MenuDivider = /*#__PURE__*/React.forwardRef(({
-  size = "default"
+  size = "default",
+  ...rest
 }, ref) => {
   const menuContext = useContext(MenuContext);
   return /*#__PURE__*/React.createElement(StyledMenuItem, {
     inSubmenu: true
-  }, /*#__PURE__*/React.createElement(StyledDivider, {
-    size: size,
-    "data-component": "menu-divider",
+  }, /*#__PURE__*/React.createElement(StyledDivider, _extends({
+    size: size
+  }, tagComponent("menu-divider", rest), {
     menuType: menuContext.menuType,
     ref: ref
-  }));
+  })));
 });
 MenuDivider.propTypes = {
-  /** sets the size of the MenuDivider */
-  size: PropTypes.oneOf(["default", "large"])
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
+  "size": PropTypes.oneOf(["default", "large"])
 };
+MenuDivider.displayName = "MenuDivider";
 export default MenuDivider;

package/esm/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/esm/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/esm/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/esm/components/menu/menu-full-screen/menu-full-screen.component.js

@@ -12,6 +12,7 @@ import IconButton from "../../icon-button";
 import Icon from "../../icon";
 import Portal from "../../portal";
 import MenuDivider from "../menu-divider/menu-divider.component";
+import tagComponent from "../../../__internal__/utils/helpers/tags";
 
 const MenuFullscreen = ({
   children,
@@ -20,11 +21,12 @@ const MenuFullscreen = ({
   onClose,
   ...rest
 }) => {
-  const menuWrapperRef = useRef();
-  const menuContentRef = useRef();
+  const menuWrapperRef = useRef(null);
+  const menuContentRef = useRef(null);
   const {
     menuType
   } = useContext(MenuContext);
+  const isDarkVariant = ["dark", "black"].includes(menuType);
 
   const handleKeyDown = ev => {
     /* istanbul ignore else */
@@ -33,31 +35,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.createElement("li", {
     "aria-label": "menu-fullscreen"
   }, /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(FocusTrap, {
     wrapperRef: menuWrapperRef,
     isOpen: isOpen
   }, /*#__PURE__*/React.createElement(StyledMenuFullscreen, _extends({
-    "data-component": "menu-fullscreen",
     ref: menuWrapperRef,
     isOpen: isOpen,
     menuType: menuType,
     startPosition: startPosition,
     onKeyDown: handleKeyDown
-  }, rest), /*#__PURE__*/React.createElement(StyledMenuFullscreenHeader, {
+  }, rest, tagComponent("menu-fullscreen", rest)), /*#__PURE__*/React.createElement(StyledMenuFullscreenHeader, {
     isOpen: isOpen,
     menuType: menuType,
     startPosition: startPosition
@@ -67,10 +56,10 @@ const MenuFullscreen = ({
     "data-element": "close"
   }, /*#__PURE__*/React.createElement(Icon, {
     type: "close",
-    color: iconColors[menuType]
+    color: isDarkVariant ? "--colorsYang100" : undefined
   }))), /*#__PURE__*/React.createElement(Box, {
     overflowY: "auto",
-    scrollVariant: scrollVariants[menuType],
+    scrollVariant: isDarkVariant ? "dark" : "light",
     width: "100%",
     height: "calc(100% - 40px)"
   }, /*#__PURE__*/React.createElement(StyledMenuWrapper, {
@@ -85,22 +74,23 @@ const MenuFullscreen = ({
     value: {
       inFullscreenView: true,
       menuType,
-      inMenu: true
+      inMenu: true,
+      openSubmenuId: null,
+      setOpenSubmenuId:
+      /* istanbul ignore next */
+      () => {}
     }
   }, React.Children.map(children, (child, index) => /*#__PURE__*/React.createElement(React.Fragment, null, child, index < React.Children.count(children) - 1 && /*#__PURE__*/React.createElement(MenuDivider, null))))))))));
 };
 
 MenuFullscreen.propTypes = {
-  /** The child elements to render */
-  children: PropTypes.node,
-
-  /** Sets whether the component is open or closed */
-  isOpen: PropTypes.bool,
-
-  /** The start position for the component to open from */
-  startPosition: PropTypes.oneOf(["left", "right"]),
-
-  /** A callback to be called when the close icon is clicked or enter is pressed when focused */
-  onClose: PropTypes.func.isRequired
+  "children": PropTypes.node,
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
+  "isOpen": PropTypes.bool,
+  "onClose": PropTypes.func.isRequired,
+  "startPosition": PropTypes.oneOf(["left", "right"])
 };
+export { MenuFullscreen };
 export default MenuFullscreen;

package/esm/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/esm/components/menu/menu-full-screen/menu-full-screen.style.js

@@ -29,41 +29,43 @@ const StyledMenuFullscreen = styled.div`
     background-color: ${menuConfigVariants[menuType].background};
     z-index: ${theme.zIndex.fullScreenModal};
 
-    ${menuType === "dark" && css`
-      ${StyledSearch} span > [data-component="icon"] {
-        color: var(--colorsUtilityMajor200);
+    && {
+      ${menuType === "dark" && css`
+        ${StyledSearch} span > [data-component="icon"] {
+          color: var(--colorsUtilityMajor200);
 
-        &:hover {
-          color: var(--colorsUtilityMajor150);
+          &:hover {
+            color: var(--colorsUtilityMajor150);
+          }
         }
-      }
-    `}
+      `}
 
-    ${menuType === "light" && css`
-      ${StyledSearch} span > [data-component="icon"] {
-        color: var(--colorsUtilityMajor200);
+      ${menuType === "light" && css`
+        ${StyledSearch} span > [data-component="icon"] {
+          color: var(--colorsUtilityMajor200);
 
-        &:hover {
-          color: var(--colorsUtilityMajor400);
+          &:hover {
+            color: var(--colorsUtilityMajor400);
+          }
         }
-      }
-    `}
+      `}
 
-    ${StyledSearch} {
-      ${StyledIcon} {
-        display: inline-flex;
-        margin-right: 0;
-        bottom: auto;
-      }
+      ${StyledSearch} {
+        ${StyledIcon} {
+          display: inline-flex;
+          margin-right: 0;
+          bottom: auto;
+        }
 
-      ${StyledButton} {
-        display: flex;
-        line-height: normal;
-        padding-bottom: 0;
+        ${StyledButton} {
+          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/esm/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/esm/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;