carbon-react 106.6.1 → 106.6.4

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

@@ -50,6 +50,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
   asPassiveItem,
   onSubmenuOpen,
   onSubmenuClose,
+  onClick,
   ...rest
 }, ref) => {
   const [blockDoubleFocus, setBlockDoubleFocus] = (0, _react.useState)(false);
@@ -214,6 +215,17 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
       closeSubmenu();
     }
   }, [closeSubmenu]);
+
+  const handleClick = event => {
+    if (clickToOpen) {
+      openSubmenu();
+    }
+
+    if (onClick) {
+      onClick(event);
+    }
+  };
+
   (0, _react.useEffect)(() => {
     if (characterString !== "") {
       const nextIndex = (0, _keyboardNavigation.characterNavigation)(characterString, _react.default.Children.toArray(formattedChildren), submenuFocusIndex);
@@ -267,7 +279,6 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
     "data-component": "submenu-wrapper",
     onMouseOver: !clickToOpen ? () => openSubmenu() : undefined,
     onMouseLeave: () => closeSubmenu(),
-    onClick: clickToOpen ? () => openSubmenu() : undefined,
     ref: submenuRef,
     isSubmenuOpen: submenuOpen
   }, /*#__PURE__*/_react.default.createElement(_menuItem.default, _extends({}, rest, {
@@ -282,14 +293,17 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
     hasSubmenu: true,
     showDropdownArrow: showDropdownArrow,
     onKeyDown: handleKeyDown,
+    onClick: handleClick,
     clickToOpen: clickToOpen,
     href: href,
-    maxWidth: maxWidth
+    maxWidth: maxWidth,
+    "aria-expanded": submenuOpen
   }), title), submenuOpen && /*#__PURE__*/_react.default.createElement(_submenu.StyledSubmenu, {
     "data-component": "submenu",
     submenuDirection: submenuDirection,
     variant: variant,
-    menuType: menuContext.menuType
+    menuType: menuContext.menuType,
+    role: "list"
   }, _react.default.Children.map(children, (child, index) => /*#__PURE__*/_react.default.createElement(_submenu2.default.Provider, {
     value: {
       isFocused: !blockDoubleFocus && submenuFocusIndex === index,
@@ -347,7 +361,10 @@ Submenu.propTypes = {
   onSubmenuOpen: _propTypes.default.func,
 
   /** Callback triggered when submenu closes. Only valid with submenu prop */
-  onSubmenuClose: _propTypes.default.func
+  onSubmenuClose: _propTypes.default.func,
+
+  /** Callback triggered when the top-level menu item is clicked */
+  onClick: _propTypes.default.func
 };
 var _default = Submenu;
 exports.default = _default;

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

@@ -61,7 +61,8 @@ const Menu = ({
     "data-component": "menu",
     menuType: menuType
   }, rest, {
-    ref: ref
+    ref: ref,
+    role: "list"
   }), _react.default.Children.map(children, (child, index) => {
     const isFocused = focusedItemIndex === index;
     return /*#__PURE__*/_react.default.createElement(_menu2.default.Provider, {

package/lib/components/menu/scrollable-block/scrollable-block.component.js

@@ -47,12 +47,14 @@ const ScrollableBlock = ({
   return /*#__PURE__*/_react.default.createElement(_scrollableBlock.default, _extends({
     "data-component": "submenu-scrollable-block",
     menuType: menuContext.menuType,
-    variant: variant
+    variant: variant,
+    role: "presentation"
   }, rest), /*#__PURE__*/_react.default.createElement(_box.default, {
     overflowY: "scroll",
     scrollVariant: scrollVariants[menuContext.menuType],
     height: height,
-    p: 0
+    p: 0,
+    role: "presentation"
   }, _react.default.Children.map(children, (child, index) => {
     let isFocused = false;
     const blockItemFocused = focusIndex >= blockIndex;

package/lib/components/modal/modal.component.js

@@ -17,7 +17,7 @@ var _portal = _interopRequireDefault(require("../portal"));
 
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 
-var _modalManager = _interopRequireDefault(require("./__internal__/modal-manager"));
+var _useModalManager = _interopRequireDefault(require("../../hooks/__internal__/useModalManager"));
 
 var _modal = require("./modal.style");
 
@@ -46,8 +46,6 @@ const Modal = ({
   const ref = (0, _react.useRef)();
   const backgroundNodeRef = (0, _react.useRef)();
   const contentNodeRef = (0, _react.useRef)();
-  const listenerAdded = (0, _react.useRef)(false);
-  const modalRegistered = (0, _react.useRef)(false);
   const [isAnimationComplete, setAnimationComplete] = (0, _react.useState)(false);
   const [triggerRefocusFlag, setTriggerRefocusFlag] = (0, _react.useState)(false);
   const {
@@ -73,69 +71,12 @@ const Modal = ({
     };
   }, [allowScroll, enableBackgroundUI]);
   const closeModal = (0, _react.useCallback)(ev => {
-    const isTopmost = _modalManager.default.isTopmost(ref.current);
-
-    if (onCancel && !disableClose && !disableEscKey && _events.default.isEscKey(ev) && isTopmost) {
+    if (onCancel && !disableClose && !disableEscKey && _events.default.isEscKey(ev)) {
       ev.stopImmediatePropagation();
       onCancel(ev);
     }
   }, [disableClose, disableEscKey, onCancel]);
-  const addListener = (0, _react.useCallback)(() => {
-    /* istanbul ignore else */
-    if (!listenerAdded.current) {
-      document.addEventListener("keyup", closeModal);
-      listenerAdded.current = true;
-    }
-  }, [closeModal]);
-  const removeListener = (0, _react.useCallback)(() => {
-    if (listenerAdded.current) {
-      document.removeEventListener("keyup", closeModal);
-      listenerAdded.current = false;
-    }
-  }, [closeModal]);
-  (0, _react.useEffect)(() => {
-    if (open) {
-      addListener();
-    }
-
-    if (!open) {
-      removeListener();
-    }
-  }, [addListener, open, removeListener]);
-  (0, _react.useEffect)(() => {
-    return () => {
-      removeListener();
-    };
-  }, [removeListener]);
-  const registerModal = (0, _react.useCallback)(() => {
-    /* istanbul ignore else */
-    if (!modalRegistered.current) {
-      _modalManager.default.addModal(ref.current, setTriggerRefocusFlag);
-
-      modalRegistered.current = true;
-    }
-  }, []);
-  const unregisterModal = (0, _react.useCallback)(() => {
-    if (modalRegistered.current) {
-      _modalManager.default.removeModal(ref.current);
-
-      modalRegistered.current = false;
-    }
-  }, []);
-  (0, _react.useEffect)(() => {
-    if (open) {
-      registerModal();
-    }
-
-    if (!open) {
-      unregisterModal();
-    }
-  }, [open, registerModal, unregisterModal]);
-  (0, _react.useEffect)(() => {
-    return () => {
-      unregisterModal();
-    };
-  }, [unregisterModal]);
+  (0, _useModalManager.default)(open, closeModal, ref, setTriggerRefocusFlag);
   let background;
   let content;
 

package/lib/components/toast/toast.component.js

@@ -21,12 +21,12 @@ var _toast = require("./toast.style");
 
 var _iconButton = _interopRequireDefault(require("../icon-button"));
 
-var _modalManager = _interopRequireDefault(require("../modal/__internal__/modal-manager"));
-
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 
+var _useModalManager = _interopRequireDefault(require("../../hooks/__internal__/useModalManager"));
+
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -68,25 +68,12 @@ const Toast = ({
     return (0, _classnames.default)(className);
   }, [className]);
   const dismissToast = (0, _react.useCallback)(ev => {
-    const isTopmost = _modalManager.default.isTopmost(toastRef.current);
-
-    if (onDismiss && _events.default.isEscKey(ev) && isTopmost) {
+    if (onDismiss && _events.default.isEscKey(ev)) {
       ev.stopImmediatePropagation();
       onDismiss(ev);
     }
   }, [onDismiss]);
-  (0, _react.useEffect)(() => {
-    const currentElement = toastRef.current;
-
-    _modalManager.default.addModal(currentElement);
-
-    document.addEventListener("keyup", dismissToast);
-    return () => {
-      _modalManager.default.removeModal(currentElement);
-
-      document.removeEventListener("keyup", dismissToast);
-    };
-  }, [dismissToast]);
+  (0, _useModalManager.default)(open, dismissToast, toastRef);
   (0, _react.useEffect)(() => {
     clearTimeout(timer.current);
 

package/lib/hooks/__internal__/useModalManager/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./useModalManager";

package/lib/hooks/__internal__/useModalManager/index.js

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

package/lib/hooks/__internal__/useModalManager/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../esm/hooks/__internal__/useModalManager/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/hooks/__internal__/useModalManager/useModalManager.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const useModalManager: (open: boolean, closeModal: (e: KeyboardEvent) => void, modalRef: React.RefObject<HTMLElement>, setTriggerRefocusFlag?: ((flag: boolean) => void) | undefined) => void;
+export default useModalManager;

package/lib/hooks/__internal__/useModalManager/useModalManager.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _modalManager = _interopRequireDefault(require("../../../components/modal/__internal__/modal-manager"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const useModalManager = (open, closeModal, modalRef, setTriggerRefocusFlag) => {
+  const listenerAdded = (0, _react.useRef)(false);
+  const modalRegistered = (0, _react.useRef)(false);
+  const handleClose = (0, _react.useCallback)(ev => {
+    const isTopmost = _modalManager.default.isTopmost(modalRef.current);
+
+    if (isTopmost) {
+      closeModal(ev);
+    }
+  }, [modalRef, closeModal]);
+  const addListener = (0, _react.useCallback)(() => {
+    /* istanbul ignore else */
+    if (!listenerAdded.current) {
+      document.addEventListener("keyup", handleClose);
+      listenerAdded.current = true;
+    }
+  }, [handleClose]);
+  const removeListener = (0, _react.useCallback)(() => {
+    if (listenerAdded.current) {
+      document.removeEventListener("keyup", handleClose);
+      listenerAdded.current = false;
+    }
+  }, [handleClose]);
+  (0, _react.useEffect)(() => {
+    if (open) {
+      addListener();
+    } else {
+      removeListener();
+    }
+  }, [addListener, open, removeListener]);
+  (0, _react.useEffect)(() => {
+    return () => {
+      removeListener();
+    };
+  }, [removeListener]);
+  const registerModal = (0, _react.useCallback)(() => {
+    /* istanbul ignore else */
+    if (!modalRegistered.current) {
+      _modalManager.default.addModal(modalRef.current, setTriggerRefocusFlag);
+
+      modalRegistered.current = true;
+    }
+  }, [modalRef, setTriggerRefocusFlag]);
+  const unregisterModal = (0, _react.useCallback)(() => {
+    if (modalRegistered.current) {
+      _modalManager.default.removeModal(modalRef.current);
+
+      modalRegistered.current = false;
+    }
+  }, [modalRef]);
+  (0, _react.useEffect)(() => {
+    if (open) {
+      registerModal();
+    } else {
+      unregisterModal();
+    }
+  }, [open, registerModal, unregisterModal]);
+  (0, _react.useEffect)(() => {
+    return () => {
+      unregisterModal();
+    };
+  }, [unregisterModal]);
+};
+
+var _default = useModalManager;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "106.6.1",
+  "version": "106.6.4",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -98,6 +98,7 @@
     "@types/react": "16.9.56",
     "@types/react-dom": "16.9.8",
     "@types/react-test-renderer": "^17.0.1",
+    "@types/sprintf-js": "^1.1.2",
     "@types/styled-components": "^5.1.9",
     "@types/uuid": "^8.3.3",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
@@ -112,6 +113,7 @@
     "conventional-changelog-conventionalcommits": "^4.5.0",
     "core-js": "^3.20.3",
     "cross-env": "^5.2.0",
+    "css-loader": "4.0.0",
     "cypress": "^9.6.0",
     "cypress-axe": "^0.14.0",
     "cypress-cucumber-preprocessor": "^4.3.1",
@@ -138,6 +140,7 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "events": "~1.1.1",
     "fast-glob": "^3.2.7",
+    "file-loader": "^6.2.0",
     "fs-extra": "^10.0.0",
     "husky": "^4.3.6",
     "jest": "^26.6.3",
@@ -159,6 +162,7 @@
     "ts-node": "^10.4.0",
     "typescript": "^4.6.2",
     "typescript-to-proptypes": "^2.2.1",
+    "url-loader": "^4.1.1",
     "uuid": "^8.3.2",
     "webpack-dev-server": "^4.0.0"
   },

package/esm/components/action-popover/action-popover-divider/action-popover-divider.d.ts

@@ -1,12 +0,0 @@
-import { StyledComponentProps } from "styled-components";
-
-declare function ActionPopoverDivider(
-  attrs: StyledComponentProps<
-    "div",
-    Record<string, unknown>,
-    Record<string, unknown>,
-    ""
-  >
-): JSX.Element;
-
-export default ActionPopoverDivider;

package/esm/components/action-popover/action-popover-item/action-popover-item.d.ts

@@ -1,26 +0,0 @@
-import { IconType } from "components/icon/icon";
-import * as React from "react";
-import { ActionPopoverMenuProps } from "../action-popover-menu/action-popover-menu";
-
-export interface ActionPopoverItemProps {
-  /** The text label to display for this Item */
-  children: string;
-  /** Flag to indicate if item is disabled */
-  disabled?: boolean;
-  /** allows to provide download prop that works dependent with href */
-  download?: boolean;
-  /** allows to provide href prop */
-  href?: string;
-  /** The name of the icon to display next to the label */
-  icon?: IconType;
-  /** Callback to run when item is clicked */
-  onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
-  /** Submenu component for item */
-  submenu?: React.ReactElement<ActionPopoverMenuProps>;
-}
-
-declare function MenuItem(props: ActionPopoverItemProps): JSX.Element;
-declare function ActionPopoverItem(props: ActionPopoverItemProps): JSX.Element;
-
-export { MenuItem };
-export default ActionPopoverItem;

package/esm/components/action-popover/action-popover-menu/action-popover-menu.d.ts

@@ -1,33 +0,0 @@
-import * as React from "react";
-import ActionPopoverDivider from "../action-popover-divider/action-popover-divider";
-import { ActionPopoverItemProps } from "../action-popover-item/action-popover-item";
-
-type ActionPopoverChild =
-  | React.ReactElement<ActionPopoverItemProps>
-  | typeof ActionPopoverDivider
-  | boolean
-  | null
-  | undefined;
-
-export interface ActionPopoverMenuProps {
-  /** Children for the menu */
-  children?: ActionPopoverChild | ActionPopoverChild[];
-  /** Index to control which item is focused */
-  focusIndex?: number;
-  /** Flag to indicate whether a menu should open */
-  isOpen?: boolean;
-  /** A unique ID for the menu */
-  menuID?: string;
-  /** Callback to set the index of the focused item */
-  setFocusIndex?: (args: number) => any;
-  /** Callback to set the isOpen flag */
-  setOpen?: (args: boolean) => any;
-  /** Unique ID for the menu's parent */
-  parentID?: string;
-}
-
-declare function ActionPopoverMenu(
-  props: ActionPopoverMenuProps & React.RefAttributes<HTMLDivElement>
-): JSX.Element;
-
-export default ActionPopoverMenu;

package/esm/components/action-popover/action-popover-menu-button/action-popover-menu-button.d.ts

@@ -1,13 +0,0 @@
-export interface ActionPopoverMenuButtonProps {
-  children?: string;
-  buttonType?: string;
-  iconType?: string;
-  iconPosition?: string;
-  size?: string;
-}
-
-declare function ActionPopoverMenuButton(
-  props: ActionPopoverMenuButtonProps
-): JSX.Element;
-
-export default ActionPopoverMenuButton;

package/esm/components/action-popover/action-popover.d.ts

@@ -1,39 +0,0 @@
-import * as React from "react";
-import { MarginProps } from "styled-system";
-import ActionPopoverDivider from "./action-popover-divider/action-popover-divider";
-import { ActionPopoverItemProps } from "./action-popover-item/action-popover-item";
-
-export interface RenderButtonProps {
-  tabIndex: number;
-  "data-element": string;
-}
-
-type ActionPopoverChild =
-  | React.ReactElement<ActionPopoverItemProps>
-  | typeof ActionPopoverDivider
-  | boolean
-  | null
-  | undefined;
-
-export interface ActionPopoverProps extends MarginProps {
-  /** Children for popover component */
-  children?: ActionPopoverChild | ActionPopoverChild[];
-  /** Horizontal alignment of menu items content */
-  horizontalAlignment?: "left" | "right";
-  /** Unique ID */
-  id?: string;
-  /** Callback to be called on menu open */
-  onOpen?: () => void;
-  /** Callback to be called on menu close */
-  onClose?: () => void;
-  /** Set whether the menu should open above or below the button */
-  placement?: "bottom" | "top";
-  /** Render a custom menu button to override default ellipsis icon */
-  renderButton?: (buttonProps: RenderButtonProps) => React.ReactNode;
-  /** Boolean to control whether menu should align to right */
-  rightAlignMenu?: boolean;
-}
-
-declare function ActionPopover(props: ActionPopoverProps): JSX.Element;
-
-export default ActionPopover;

package/esm/components/box/box.d.ts

@@ -1,31 +0,0 @@
-import * as React from "react";
-import { StyledComponentProps } from "styled-components";
-import {
-  ColorProps,
-  FlexboxProps,
-  LayoutProps,
-  SpaceProps,
-} from "styled-system";
-
-export interface BoxProps
-  extends SpaceProps,
-    ColorProps,
-    LayoutProps,
-    FlexboxProps {
-  as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
-  overflowWrap?: "break-word" | "anywhere";
-  scrollVariant?: "light" | "dark";
-}
-
-/**
- * HTML color prop have to be removed from the StyledComponentProps
- * as it's type conflicts with StyledSystem color prop
- */
-type PropsWithoutColor = Omit<
-  StyledComponentProps<"div", Record<string, unknown>, BoxProps, "">,
-  "color"
->;
-
-declare function Box(attrs: PropsWithoutColor & ColorProps): JSX.Element;
-
-export default Box;

package/esm/components/button-bar/button-bar.d.ts

@@ -1,24 +0,0 @@
-import Button from "components/button/button";
-import IconButton from "components/icon-button";
-import { SpaceProps } from "styled-system";
-
-type ButtonBarChild =
-  | typeof Button
-  | typeof IconButton
-  | boolean
-  | null
-  | undefined;
-
-export interface ButtonBarProps extends SpaceProps {
-  children: ButtonBarChild | ButtonBarChild[];
-  /** Apply fullWidth style to the button bar */
-  fullWidth?: boolean;
-  /** Defines an Icon position for buttons: "before" | "after" */
-  iconPosition?: "before" | "after";
-  /** Assigns a size to the buttons: "small" | "medium" | "large" */
-  size?: "small" | "medium" | "large";
-}
-
-declare function ButtonBar(props: ButtonBarProps): JSX.Element;
-
-export default ButtonBar;

package/lib/components/action-popover/action-popover-divider/action-popover-divider.d.ts

@@ -1,12 +0,0 @@
-import { StyledComponentProps } from "styled-components";
-
-declare function ActionPopoverDivider(
-  attrs: StyledComponentProps<
-    "div",
-    Record<string, unknown>,
-    Record<string, unknown>,
-    ""
-  >
-): JSX.Element;
-
-export default ActionPopoverDivider;

package/lib/components/action-popover/action-popover-item/action-popover-item.d.ts

@@ -1,26 +0,0 @@
-import { IconType } from "components/icon/icon";
-import * as React from "react";
-import { ActionPopoverMenuProps } from "../action-popover-menu/action-popover-menu";
-
-export interface ActionPopoverItemProps {
-  /** The text label to display for this Item */
-  children: string;
-  /** Flag to indicate if item is disabled */
-  disabled?: boolean;
-  /** allows to provide download prop that works dependent with href */
-  download?: boolean;
-  /** allows to provide href prop */
-  href?: string;
-  /** The name of the icon to display next to the label */
-  icon?: IconType;
-  /** Callback to run when item is clicked */
-  onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
-  /** Submenu component for item */
-  submenu?: React.ReactElement<ActionPopoverMenuProps>;
-}
-
-declare function MenuItem(props: ActionPopoverItemProps): JSX.Element;
-declare function ActionPopoverItem(props: ActionPopoverItemProps): JSX.Element;
-
-export { MenuItem };
-export default ActionPopoverItem;

package/lib/components/action-popover/action-popover-menu/action-popover-menu.d.ts

@@ -1,33 +0,0 @@
-import * as React from "react";
-import ActionPopoverDivider from "../action-popover-divider/action-popover-divider";
-import { ActionPopoverItemProps } from "../action-popover-item/action-popover-item";
-
-type ActionPopoverChild =
-  | React.ReactElement<ActionPopoverItemProps>
-  | typeof ActionPopoverDivider
-  | boolean
-  | null
-  | undefined;
-
-export interface ActionPopoverMenuProps {
-  /** Children for the menu */
-  children?: ActionPopoverChild | ActionPopoverChild[];
-  /** Index to control which item is focused */
-  focusIndex?: number;
-  /** Flag to indicate whether a menu should open */
-  isOpen?: boolean;
-  /** A unique ID for the menu */
-  menuID?: string;
-  /** Callback to set the index of the focused item */
-  setFocusIndex?: (args: number) => any;
-  /** Callback to set the isOpen flag */
-  setOpen?: (args: boolean) => any;
-  /** Unique ID for the menu's parent */
-  parentID?: string;
-}
-
-declare function ActionPopoverMenu(
-  props: ActionPopoverMenuProps & React.RefAttributes<HTMLDivElement>
-): JSX.Element;
-
-export default ActionPopoverMenu;

package/lib/components/action-popover/action-popover-menu-button/action-popover-menu-button.d.ts

@@ -1,13 +0,0 @@
-export interface ActionPopoverMenuButtonProps {
-  children?: string;
-  buttonType?: string;
-  iconType?: string;
-  iconPosition?: string;
-  size?: string;
-}
-
-declare function ActionPopoverMenuButton(
-  props: ActionPopoverMenuButtonProps
-): JSX.Element;
-
-export default ActionPopoverMenuButton;