carbon-react 154.0.0 → 154.1.0

package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.component.js

@@ -0,0 +1,196 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ResponsiveVerticalMenu = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _responsiveVerticalMenu = require("./responsive-vertical-menu.context");
+var _responsiveVerticalMenu2 = require("./responsive-vertical-menu.style");
+var _box = _interopRequireDefault(require("../../box"));
+var _modal = _interopRequireDefault(require("../../modal"));
+var _useIsAboveBreakpoint = _interopRequireDefault(require("../../../hooks/__internal__/useIsAboveBreakpoint"));
+var _useMediaQuery = _interopRequireDefault(require("../../../hooks/useMediaQuery"));
+var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags"));
+var _depth = require("./__internal__/depth.context");
+var _focus = require("./__internal__/focus.context");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const BaseMenu = ({
+  children,
+  height,
+  responsiveBreakpoint = 700,
+  width,
+  ...rest
+}) => {
+  const {
+    activeMenuItem,
+    buttonRef,
+    containerRef,
+    menuRef,
+    responsiveMode,
+    setActiveMenuItem,
+    setReducedMotion,
+    setResponsiveMode
+  } = (0, _responsiveVerticalMenu.useResponsiveVerticalMenu)();
+  const [active, setActive] = (0, _react.useState)(false);
+  const largeScreen = (0, _useIsAboveBreakpoint.default)(responsiveBreakpoint);
+  const [left, setLeft] = (0, _react.useState)("auto");
+  const [responsiveWidth, setResponsiveWidth] = (0, _react.useState)("100%");
+  const [top, setTop] = (0, _react.useState)("auto");
+  const subMenuRef = (0, _react.useRef)(null);
+  const reduceMotion = !(0, _useMediaQuery.default)("screen and (prefers-reduced-motion: no-preference)");
+  const {
+    current: menu
+  } = menuRef;
+  const {
+    current: button
+  } = buttonRef;
+  const measureDimensions = (0, _react.useCallback)(() => {
+    // Only calculate the width of the menu if the menu is open in responsive mode
+    if (active && responsiveMode) {
+      // Get the width of the menu container. The ref might not be set yet, hence
+      // the use of `document.querySelector` to find the menu container.
+      const menuContainer = menu || document.querySelector("[id='responsive-vertical-menu-primary']");
+      /* istanbul ignore else */
+      if (menuContainer) {
+        setResponsiveWidth(`${menuContainer.getBoundingClientRect().width - 16}px`);
+      }
+    }
+    if (activeMenuItem && menu) {
+      setLeft(`${menu.getBoundingClientRect().right}px`);
+    } else {
+      setLeft("auto");
+    }
+    if (activeMenuItem && button) {
+      setTop(`${button.getBoundingClientRect().bottom}px`);
+    } else {
+      setTop("auto");
+    }
+  }, [active, menu, responsiveMode, activeMenuItem, button]);
+  const handleOutsideClick = (0, _react.useCallback)(event => {
+    const notInContainer = containerRef.current && !containerRef.current.contains(event.target);
+    if (notInContainer) {
+      setActive(false);
+    }
+  }, [containerRef]);
+  const handleActiveToggle = (0, _react.useCallback)(() => {
+    setActive(previousState => !previousState);
+    // Make sure the menu is closed when the button is clicked (prevents historic menu items being retained in memory)
+    setActiveMenuItem(null);
+  }, [setActiveMenuItem]);
+  (0, _react.useLayoutEffect)(() => {
+    measureDimensions();
+  }, [active, measureDimensions, menu, responsiveMode]);
+  (0, _react.useEffect)(() => {
+    const handleBlur = () => {
+      setTimeout(() => {
+        if (containerRef.current && !containerRef.current.contains(document.activeElement)) {
+          setActive(false);
+        }
+      }, 0);
+    };
+    const handleClose = e => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        setActive(false);
+      }
+    };
+    const currentContainer = containerRef.current;
+    if (active && !responsiveMode) {
+      document.addEventListener("keydown", handleClose);
+      window.addEventListener("click", handleOutsideClick);
+      currentContainer?.addEventListener("focusout", handleBlur);
+    }
+    return () => {
+      document.removeEventListener("keydown", handleClose);
+      window.removeEventListener("click", handleOutsideClick);
+      currentContainer?.removeEventListener("focusout", handleBlur);
+    };
+  }, [active, containerRef, handleOutsideClick, responsiveMode]);
+  (0, _react.useEffect)(() => {
+    setReducedMotion?.(reduceMotion);
+    setResponsiveMode?.(!largeScreen);
+  }, [largeScreen, reduceMotion, setReducedMotion, setResponsiveMode]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: containerRef
+  }, /*#__PURE__*/_react.default.createElement(_responsiveVerticalMenu2.StyledButton, {
+    active: active,
+    buttonType: "tertiary",
+    "data-component": "responsive-vertical-menu-launcher",
+    "data-role": "responsive-vertical-menu-launcher",
+    iconType: "squares_nine",
+    id: "responsive-vertical-menu-launcher",
+    onClick: handleActiveToggle,
+    ref: buttonRef
+  }), responsiveMode ? /*#__PURE__*/_react.default.createElement(_modal.default, {
+    open: active
+  }, /*#__PURE__*/_react.default.createElement(_box.default, {
+    position: "fixed",
+    top: 0,
+    width: responsiveWidth
+  }, /*#__PURE__*/_react.default.createElement(_box.default, {
+    display: "flex",
+    justifyContent: "flex-end",
+    width: "100%",
+    backgroundColor: "var(--colorsGray850)",
+    p: 1
+  }, /*#__PURE__*/_react.default.createElement(_responsiveVerticalMenu2.StyledCloseButton, {
+    "aria-label": "close-menu",
+    "data-component": "responsive-vertical-menu-close",
+    "data-role": "responsive-vertical-menu-close",
+    iconType: "close",
+    size: "small",
+    buttonType: "tertiary",
+    onClick: () => {
+      setActive(false);
+      setActiveMenuItem(null);
+    }
+  })), /*#__PURE__*/_react.default.createElement(_responsiveVerticalMenu2.StyledResponsiveMenu, {
+    height: height,
+    id: "responsive-vertical-menu-primary",
+    menu: "primary",
+    reduceMotion: reduceMotion,
+    ref: menuRef,
+    responsive: true,
+    tabIndex: -1,
+    top: "48px",
+    width: width
+  }, children))) : /*#__PURE__*/_react.default.createElement(_responsiveVerticalMenu2.StyledGlobalVerticalMenuWrapper, _extends({}, rest, (0, _tags.default)("responsive-vertical-menu", rest)), active && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_responsiveVerticalMenu2.StyledResponsiveMenu, {
+    childOpen: !!activeMenuItem,
+    "data-component": "responsive-vertical-menu-primary",
+    "data-role": "responsive-vertical-menu-primary",
+    height: height || "100%",
+    id: "responsive-vertical-menu-primary",
+    menu: "primary",
+    reduceMotion: reduceMotion,
+    ref: menuRef,
+    responsive: false,
+    tabIndex: -1,
+    top: top,
+    width: width
+  }, children), activeMenuItem ? /*#__PURE__*/_react.default.createElement(_responsiveVerticalMenu2.StyledResponsiveMenu, {
+    "data-component": "responsive-vertical-menu-secondary",
+    "data-role": "responsive-vertical-menu-secondary",
+    height: height || "100%",
+    id: "responsive-vertical-menu-secondary",
+    left: left,
+    menu: "secondary",
+    reduceMotion: reduceMotion,
+    ref: subMenuRef,
+    responsive: false,
+    tabIndex: -1,
+    top: top,
+    width: width
+  }, activeMenuItem.children) : null)));
+};
+const ResponsiveVerticalMenu = ({
+  children,
+  ...props
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_depth.DepthProvider, null, /*#__PURE__*/_react.default.createElement(_focus.MenuFocusProvider, null, /*#__PURE__*/_react.default.createElement(BaseMenu, props, children)));
+};
+exports.ResponsiveVerticalMenu = ResponsiveVerticalMenu;
+var _default = exports.default = ResponsiveVerticalMenu;

package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.context.d.ts

@@ -0,0 +1,28 @@
+import React, { ReactNode, RefObject } from "react";
+import { IconType } from "../../icon/icon-type";
+export interface ResponsiveVerticalMenuButtonItem {
+    children?: ReactNode;
+    customIcon?: ReactNode;
+    divider?: boolean;
+    href?: string;
+    icon?: IconType;
+    id: string;
+    label?: string;
+}
+export interface MenuContextType {
+    activeMenuItem: ResponsiveVerticalMenuButtonItem | null;
+    buttonRef: RefObject<HTMLButtonElement>;
+    containerRef: RefObject<HTMLDivElement>;
+    menuRef: RefObject<HTMLDivElement>;
+    reducedMotion?: boolean;
+    responsiveMode?: boolean;
+    setActiveMenuItem: (item: ResponsiveVerticalMenuButtonItem | null) => void;
+    setReducedMotion?: (reducedMotion: boolean) => void;
+    setResponsiveMode?: (responsiveMode: boolean) => void;
+}
+export declare const ResponsiveVerticalMenuContext: React.Context<MenuContextType | null>;
+export declare const useResponsiveVerticalMenu: () => MenuContextType;
+export interface ResponsiveVerticalMenuProviderProps {
+    children: ReactNode;
+}
+export declare const ResponsiveVerticalMenuProvider: ({ children, }: ResponsiveVerticalMenuProviderProps) => React.JSX.Element;

package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.context.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useResponsiveVerticalMenu = exports.ResponsiveVerticalMenuProvider = exports.ResponsiveVerticalMenuContext = void 0;
+var _react = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const ResponsiveVerticalMenuContext = exports.ResponsiveVerticalMenuContext = /*#__PURE__*/(0, _react.createContext)(null);
+const useResponsiveVerticalMenu = () => {
+  const context = (0, _react.useContext)(ResponsiveVerticalMenuContext);
+  if (context === null) {
+    throw new Error("useResponsiveVerticalMenu must be used within a ResponsiveVerticalMenuProvider");
+  }
+  return context;
+};
+exports.useResponsiveVerticalMenu = useResponsiveVerticalMenu;
+const ResponsiveVerticalMenuProvider = ({
+  children
+}) => {
+  const [activeMenuItem, setActiveMenuItem] = (0, _react.useState)(null);
+  const buttonRef = (0, _react.useRef)(null);
+  const containerRef = (0, _react.useRef)(null);
+  const menuRef = (0, _react.useRef)(null);
+  const [responsiveMode, setResponsiveMode] = (0, _react.useState)(false);
+  const [reducedMotion, setReducedMotion] = (0, _react.useState)(false);
+  return /*#__PURE__*/_react.default.createElement(ResponsiveVerticalMenuContext.Provider, {
+    value: {
+      activeMenuItem,
+      buttonRef,
+      containerRef,
+      menuRef,
+      reducedMotion,
+      responsiveMode,
+      setActiveMenuItem,
+      setReducedMotion,
+      setResponsiveMode
+    }
+  }, children);
+};
+exports.ResponsiveVerticalMenuProvider = ResponsiveVerticalMenuProvider;

package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.style.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+interface StyledResponsiveMenuProps {
+    childOpen?: boolean;
+    height?: string;
+    iconsVisible?: boolean;
+    left?: string;
+    reduceMotion: boolean;
+    responsive?: boolean;
+    menu: "primary" | "secondary" | "tertiary";
+    top?: string;
+    width?: string;
+}
+interface StyledButtonProps {
+    active?: boolean;
+}
+export declare const StyledButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../button").ButtonProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>, any, StyledButtonProps, never>;
+export declare const StyledCloseButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../button").ButtonProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>, any, {}, never>;
+export declare const StyledGlobalVerticalMenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledResponsiveMenu: import("styled-components").StyledComponent<"div", any, StyledResponsiveMenuProps, never>;
+export {};

package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.style.js

@@ -0,0 +1,104 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledResponsiveMenu = exports.StyledGlobalVerticalMenuWrapper = exports.StyledCloseButton = exports.StyledButton = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _button = _interopRequireDefault(require("../../button"));
+var _addFocusStyling = _interopRequireDefault(require("../../../style/utils/add-focus-styling"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledButton = exports.StyledButton = (0, _styledComponents.default)(_button.default)`
+  border-radius: 0;
+  background-color: var(
+    ${({
+  active
+}) => active ? "--colorsActionMinorGray700" : "--colorsUtilityYin100"}
+  );
+
+  [data-component="icon"] {
+    color: var(--colorsUtilityYang100);
+  }
+
+  &:focus {
+    appearance: none;
+    -webkit-appearance: none;
+    -webkit-box-shadow: ${(0, _addFocusStyling.default)(true)};
+    box-shadow: ${(0, _addFocusStyling.default)(true)};
+    border: 1px solid black;
+    outline: transparent 3px solid;
+  }
+`;
+const StyledCloseButton = exports.StyledCloseButton = (0, _styledComponents.default)(_button.default)`
+  border-radius: 0;
+
+  [data-component="icon"] {
+    color: var(--colorsUtilityYang100);
+  }
+`;
+const StyledGlobalVerticalMenuWrapper = exports.StyledGlobalVerticalMenuWrapper = _styledComponents.default.div`
+  background-color: black;
+  color: white;
+  display: flex;
+  flex-direction: row;
+  position: absolute;
+  width: fit-content;
+`;
+const StyledResponsiveMenu = exports.StyledResponsiveMenu = _styledComponents.default.div`
+  align-items: center;
+  background-color: var(--colorsUtilityYin100);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: ${({
+  height
+}) => height || "100%"};
+  justify-content: flex-start;
+  overflow-y: auto;
+  padding-bottom: var(--spacing100);
+  ${({
+  responsive
+}) => !responsive && (0, _styledComponents.css)`
+      padding-left: var(--spacing200);
+      padding-right: var(--spacing200);
+    `};
+  padding-top: var(--spacing100);
+  position: fixed;
+  top: ${({
+  top
+}) => top};
+  width: ${({
+  width
+}) => width || "100%"};
+  max-width: 375px;
+  z-index: 1000;
+  border-right: ${({
+  childOpen,
+  menu
+}) => menu === "secondary" || !childOpen && menu === "primary" ? "2px solid var(--colorsGray850)" : "1px solid var(--colorsGray850)"};
+
+  ${({
+  childOpen
+}) => childOpen && (0, _styledComponents.css)`
+      padding-right: calc(var(--spacing200) + 1px);
+    `}
+
+  ${({
+  height,
+  left,
+  menu
+}) => menu === "secondary" && (0, _styledComponents.css)`
+      left: ${left};
+      min-height: ${height};
+    `}
+
+    ${({
+  responsive
+}) => !responsive && (0, _styledComponents.css)`
+      & > :last-child {
+        margin-bottom: 40px;
+      }
+    `}
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "154.0.0",
+  "version": "154.1.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",