carbon-react 94.0.2 → 94.1.2

package/lib/components/action-popover/action-popover.component.js

@@ -56,7 +56,7 @@ const ActionPopover = ({
   const [isOpen, setOpenState] = (0, _react.useState)(false);
   const [focusIndex, setFocusIndex] = (0, _react.useState)(0);
   const [guid] = (0, _react.useState)((0, _guid.default)());
-  const button = (0, _react.useRef)();
+  const buttonRef = (0, _react.useRef)();
   const menu = (0, _react.useRef)();
   const itemCount = (0, _react.useMemo)(() => {
     return _react.default.Children.toArray(children).filter(child => child.type === _actionPopoverItem.default).length;
@@ -94,7 +94,7 @@ const ActionPopover = ({
 
     if (!isOpening) {
       // Closing the menu should focus the MenuButton
-      button.current.focus();
+      buttonRef.current.querySelector("[data-component='action-popover-button']").focus();
     }
   }, [isOpen, setOpen]); // Keyboard commands implemented as recommended by WAI-ARIA best practices
   // https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-actions.html
@@ -112,7 +112,7 @@ const ActionPopover = ({
       setOpen(true);
     }
   }, [itemCount, setOpen]);
-  const focusButton = (0, _react.useCallback)(() => button.current.focus(), []);
+  const focusButton = (0, _react.useCallback)(() => buttonRef.current.querySelector("[data-component='action-popover-button']").focus(), []);
   (0, _react.useEffect)(() => {
     const handler = ({
       target
@@ -120,7 +120,7 @@ const ActionPopover = ({
       // If the event didn't came from part of this component, close the menu.
       // There will be multiple document click listeners but we cant prevent propagation because it will interfere with
       // other instances on the same page
-      if (!button.current.contains(target) && menu.current && !menu.current.contains(target)) {
+      if (!buttonRef.current.contains(target) && menu.current && !menu.current.contains(target)) {
         setOpen(false);
       }
     };
@@ -136,23 +136,37 @@ const ActionPopover = ({
     };
   }, [setOpen]);
 
-  const menuButton = () => {
+  const menuButton = menuID => {
     if (renderButton) {
       return renderButton({
-        tabIndex: -1,
-        "data-element": "action-popover-menu-button"
+        tabIndex: isOpen ? "-1" : "0",
+        "data-component": "action-popover-button",
+        ariaAttributes: {
+          "aria-haspopup": "true",
+          "aria-label": l.actionPopover.ariaLabel(),
+          "aria-controls": menuID,
+          "aria-expanded": isOpen
+        }
       });
     }
 
-    return /*#__PURE__*/_react.default.createElement(_actionPopover.ButtonIcon, {
+    return /*#__PURE__*/_react.default.createElement(_actionPopover.StyledButtonIcon, {
+      role: "button",
+      "aria-haspopup": "true",
+      "aria-label": l.actionPopover.ariaLabel(),
+      "aria-controls": menuID,
+      "aria-expanded": isOpen,
+      tabIndex: isOpen ? "-1" : "0",
+      "data-component": "action-popover-button"
+    }, /*#__PURE__*/_react.default.createElement(_actionPopover.ButtonIcon, {
       type: "ellipsis_vertical"
-    });
+    }));
   };
 
   const parentID = id || `ActionPopoverButton_${guid}`;
   const menuID = `ActionPopoverMenu_${guid}`;
   const menuProps = {
-    button,
+    buttonRef,
     parentID,
     setFocusIndex,
     focusIndex,
@@ -165,18 +179,12 @@ const ActionPopover = ({
   };
   return /*#__PURE__*/_react.default.createElement(_actionPopover.MenuButton, _extends({
     id: parentID,
-    "data-component": "action-popover-button",
-    role: "button",
-    "aria-haspopup": "true",
-    "aria-label": l.actionPopover.ariaLabel(),
-    "aria-controls": menuID,
-    "aria-expanded": isOpen,
-    tabIndex: isOpen ? "-1" : "0",
+    "data-component": "action-popover-wrapper",
     onKeyDown: onButtonKeyDown,
     onClick: onButtonClick,
     isOpen,
-    ref: button
-  }, rest), menuButton(), /*#__PURE__*/_react.default.createElement(_actionPopoverContext.default.Provider, {
+    ref: buttonRef
+  }, rest), menuButton(menuID), /*#__PURE__*/_react.default.createElement(_actionPopoverContext.default.Provider, {
     value: {
       setOpenPopover: setOpen,
       focusButton,
@@ -184,7 +192,7 @@ const ActionPopover = ({
     }
   }, isOpen && /*#__PURE__*/_react.default.createElement(_popover.default, {
     placement: mappedPlacement,
-    reference: button
+    reference: buttonRef
   }, /*#__PURE__*/_react.default.createElement(_actionPopoverMenu.default, _extends({
     "data-component": "action-popover",
     role: "menu",

package/lib/components/action-popover/action-popover.style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledMenuItem = exports.MenuButtonOverrideWrapper = exports.SubMenuItemIcon = exports.MenuItemDivider = exports.MenuItemIcon = exports.ButtonIcon = exports.MenuButton = exports.MenuItemFactory = exports.Menu = void 0;
+exports.StyledMenuItem = exports.MenuButtonOverrideWrapper = exports.SubMenuItemIcon = exports.MenuItemDivider = exports.MenuItemIcon = exports.StyledButtonIcon = exports.ButtonIcon = exports.MenuButton = exports.MenuItemFactory = exports.Menu = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -131,16 +131,6 @@ const MenuButton = _styledComponents.default.div`
   isOpen,
   theme
 }) => isOpen && `background-color: ${theme.colors.white}`}
-  &:hover, &:focus {
-    background-color: ${({
-  theme
-}) => theme.colors.white};
-  }
-  &:focus {
-    outline: 2px solid ${({
-  theme
-}) => theme.colors.focus};
-  }
 `;
 /**
  * Creates a factory that returns a styled component with a custom
@@ -168,6 +158,21 @@ const iconThemeProviderFactory = (Component, themeFn) => (0, _styledComponents.w
 
 const ButtonIcon = iconThemeProviderFactory(_icon.default, palette => palette.slate);
 exports.ButtonIcon = ButtonIcon;
+const StyledButtonIcon = _styledComponents.default.div`
+  &:hover,
+  &:focus {
+    background-color: ${({
+  theme
+}) => theme.colors.white};
+  }
+
+  &:focus {
+    outline: 2px solid ${({
+  theme
+}) => theme.colors.focus};
+  }
+`;
+exports.StyledButtonIcon = StyledButtonIcon;
 const MenuItemIcon = (0, _styledComponents.default)(iconThemeProviderFactory(_icon.default, () => "inherit"))`
   ${({
   theme,
@@ -203,13 +208,18 @@ exports.SubMenuItemIcon = SubMenuItemIcon;
 const MenuButtonOverrideWrapper = _styledComponents.default.div`
   ${({
   theme
-}) => `
+}) => (0, _styledComponents.css)`
     ${_button.default} {
       padding: 0px ${theme.spacing}px;
       width: 100%;
       &:focus {
         outline-width: 2px;
       }
+
+      &:hover,
+      &:focus {
+        background-color: ${theme.colors.white};
+      }
     }
   `}
 `;

package/lib/components/button/button.component.js

@@ -71,6 +71,7 @@ const renderStyledButton = buttonProps => {
     href,
     ref,
     px,
+    m = 0,
     size,
     noWrap,
     tooltipMessage,
@@ -117,6 +118,7 @@ const renderStyledButton = buttonProps => {
     iconType: iconType,
     size: size,
     px: px || paddingX,
+    m: m,
     noWrap: noWrap,
     iconOnly: !rest.children && iconType,
     target: target,

package/lib/components/dismissible-box/dismissible-box.component.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
+
+var _dismissibleBox = _interopRequireDefault(require("./dismissible-box.style"));
+
+var _iconButton = _interopRequireDefault(require("../icon-button"));
+
+var _icon = _interopRequireDefault(require("../icon"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 variantStyles = {
+  light: {
+    backgroundColor: "#FFFFFF"
+  },
+  dark: {
+    backgroundColor: "slateTint90"
+  }
+};
+
+const DismissibleBox = ({
+  hasBorderLeftHighlight = true,
+  children,
+  onClose,
+  variant = "light",
+  ...rest
+}) => /*#__PURE__*/_react.default.createElement(_dismissibleBox.default, _extends({
+  backgroundColor: variantStyles[variant].backgroundColor,
+  p: "20px 24px 20px 20px",
+  hasBorderLeftHighlight: hasBorderLeftHighlight
+}, rest, {
+  minWidth: "600px",
+  display: "flex",
+  justifyContent: "space-between"
+}), children, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_iconButton.default, {
+  onAction: onClose,
+  "aria-label": "close-button",
+  ml: 3
+}, /*#__PURE__*/_react.default.createElement(_icon.default, {
+  type: "close",
+  color: "slateTint20"
+}))));
+
+DismissibleBox.propTypes = { ..._propTypes2.default.space,
+
+  /** Flag to control whether the thicker left border highlight should be rendered */
+  hasBorderLeftHighlight: _propTypes.default.bool,
+
+  /** The content to render in the component */
+  children: _propTypes.default.node,
+
+  /** Callback to be called when the close icon button is clicked */
+  onClose: _propTypes.default.func.isRequired,
+
+  /** Use this prop to override the default width. Numbers from 0-1 are converted to percentage widths. Numbers greater
+   * than 1 are converted to pixel values. String values are passed as raw CSS values. And arrays are converted to
+   * responsive width styles. If theme.sizes is defined, the width prop will attempt to pick up values from the theme.
+   * Please note this component has a minWidth of 600px */
+  width: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+
+  /** Set the base color variant */
+  variant: _propTypes.default.oneOf(["light", "dark"])
+};
+var _default = DismissibleBox;
+exports.default = _default;

package/lib/components/dismissible-box/dismissible-box.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { SpaceProps } from "styled-system";
+
+type BorderOptions = "top" | "bottom" | "right" | "none";
+
+export interface DismissibleBoxProps extends SpaceProps {
+  /** Flag to control whether the thicker left border highlight should be rendered */
+  hasBorderLeftHighlight?: boolean;
+  /** The content to render in the component */
+  children?: React.ReactNode;
+  /** Callback to be called when the close icon button is clicked */
+  onClose: React.MouseEventHandler<HTMLButtonElement>;
+  /** Set the base color variant */
+  variant?: "light" | "dark";
+}
+
+declare function DismissibleBox(props: DismissibleBoxProps): JSX.Element;
+
+export default DismissibleBox;

package/lib/components/dismissible-box/dismissible-box.style.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _box = _interopRequireDefault(require("../box"));
+
+var _color = require("../../style/utils/color");
+
+var _icon = _interopRequireDefault(require("../icon/icon.style"));
+
+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; }
+
+var _default = (0, _styledComponents.default)(_box.default)`
+  ${({
+  hasBorderLeftHighlight,
+  theme
+}) => (0, _styledComponents.css)`
+    word-break: break-word;
+
+    border: 1px solid ${(0, _color.toColor)(theme, "slateTint80")};
+
+    ${hasBorderLeftHighlight && `
+      border-left: none;
+      box-shadow: -4px 0 0 0 ${(0, _color.toColor)(theme, "slateTint20")};
+    `}
+
+    ${_icon.default}:hover {
+      color: ${theme.palette.slate};
+    }
+  `}
+`;
+
+exports.default = _default;

package/lib/components/dismissible-box/index.d.ts

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

package/lib/components/dismissible-box/index.js

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

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

@@ -17,6 +17,8 @@ var _menu2 = _interopRequireDefault(require("../menu.context"));
 
 var _focusTrap = _interopRequireDefault(require("../../../__internal__/focus-trap"));
 
+var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
+
 var _box = _interopRequireDefault(require("../../box"));
 
 var _iconButton = _interopRequireDefault(require("../../icon-button"));
@@ -47,17 +49,39 @@ const MenuFullscreen = ({
   const {
     menuType
   } = (0, _react.useContext)(_menu2.default);
+
+  const handleKeyDown = ev => {
+    /* istanbul ignore else */
+    if (_events.default.isEscKey(ev)) {
+      onClose(ev);
+    }
+  };
+
+  (0, _react.useLayoutEffect)(() => {
+    const checkTransitionEnd = () => {
+      menuContentRef.current.focus();
+    };
+
+    const wrapperRef = menuWrapperRef.current;
+
+    if (isOpen) {
+      wrapperRef.addEventListener("transitionend", checkTransitionEnd);
+    } else {
+      wrapperRef.removeEventListener("transitionend", checkTransitionEnd);
+    }
+  }, [isOpen]);
   return /*#__PURE__*/_react.default.createElement("li", {
-    "aria-label": "menu fullscreen",
-    role: "menuitem"
+    "aria-label": "menu-fullscreen"
   }, /*#__PURE__*/_react.default.createElement(_portal.default, null, /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
+    autoFocus: false,
     wrapperRef: menuWrapperRef
   }, /*#__PURE__*/_react.default.createElement(_menuFullScreen.StyledMenuFullscreen, _extends({
     "data-component": "menu-fullscreen",
     ref: menuWrapperRef,
     isOpen: isOpen,
     menuType: menuType,
-    startPosition: startPosition
+    startPosition: startPosition,
+    onKeyDown: handleKeyDown
   }, rest), /*#__PURE__*/_react.default.createElement(_menuFullScreen.StyledMenuFullscreenHeader, {
     isOpen: isOpen,
     menuType: menuType,
@@ -80,8 +104,9 @@ const MenuFullscreen = ({
     ref: menuContentRef,
     display: "flex",
     flexDirection: "column",
-    role: "menu",
-    inFullscreenView: true
+    role: "list",
+    inFullscreenView: true,
+    tabIndex: -1
   }, _react.default.Children.map(children, (child, index) => /*#__PURE__*/_react.default.createElement(_menu2.default.Provider, {
     value: {
       inFullscreenView: true,

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

@@ -83,21 +83,6 @@ const StyledMenuFullscreenHeader = _styledComponents.default.div`
       background-color: ${theme.menu.dark.submenuBackground};
     `}
   `}
-
-  ${({
-  isOpen,
-  startPosition
-}) => (0, _styledComponents.css)`
-    ${isOpen && (0, _styledComponents.css)`
-      ${startPosition}: 0;
-      transition: all 0.3s ease;
-    `}
-
-    ${!isOpen && (0, _styledComponents.css)`
-      ${startPosition}: -100vw;
-      transition: all 0.3s ease;
-    `}
-  `}
 `;
 exports.StyledMenuFullscreenHeader = StyledMenuFullscreenHeader;
 StyledMenuFullscreen.defaultProps = {

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

@@ -22,6 +22,7 @@ const StyledMenuWrapper = _styledComponents.default.ul`
   list-style: none;
   margin: 0;
   padding: 0;
+  outline: none;
 
   ${_styledSystem.layout}
   ${_styledSystem.flexbox}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "94.0.2",
+  "version": "94.1.2",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -118,7 +118,6 @@
     "jest-styled-components": "^6.3.1",
     "lint-staged": "^10.5.3",
     "mockdate": "^2.0.2",
-    "moxios": "^0.4.0",
     "prettier": "^2.1.2",
     "raf": "^3.4.0",
     "react": "^16.12.0",
@@ -127,18 +126,16 @@
     "rimraf": "^3.0.2",
     "semantic-release": "^17.4.7",
     "semver": "^7.3.5",
+    "sprintf-js": "^1.1.2",
     "styled-components": "^4.4.1",
-    "typescript": "^3.9.5",
-    "xhr-mock": "^2.5.1"
+    "typescript": "^3.9.5"
   },
   "dependencies": {
     "@popperjs/core": "^2.9.0",
     "@styled-system/prop-types": "^5.1.5",
     "@tippyjs/react": "^4.2.5",
-    "bignumber.js": "^9.0.1",
     "classnames": "~2.2.6",
     "crypto-js": "~3.3.0",
-    "escape-string-regexp": "^4.0.0",
     "immutable": "~3.8.2",
     "invariant": "^2.2.4",
     "lodash": "^4.17.20",
@@ -150,9 +147,7 @@
     "react-dnd-html5-backend": "^10.0.2",
     "react-is": "^17.0.2",
     "react-transition-group": "^4.4.1",
-    "sprintf-js": "^1.1.2",
     "styled-system": "^5.1.5",
-    "superagent": "~3.8.2",
     "wait-on": "^5.2.1"
   },
   "cypress-cucumber-preprocessor": {