carbon-react 114.5.1 → 114.6.0

package/esm/components/vertical-menu/vertical-menu.component.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface VerticalMenuProps extends TagProps {
+    /** An aria-label attribute for the menu */
+    "aria-label"?: string;
+    /** An aria-labelledby attribute for the menu */
+    "aria-labelledby"?: string;
+    /** Width of the menu */
+    width?: string;
+    /** Content of the menu - VerticalMenuItem */
+    children: React.ReactNode;
+    /** Height of the menu */
+    height?: string;
+}
+export declare const VerticalMenu: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, width, children, height, ...rest }: VerticalMenuProps) => JSX.Element;
+export default VerticalMenu;

package/esm/components/vertical-menu/vertical-menu.component.js

@@ -0,0 +1,41 @@
+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 from "react";
+import PropTypes from "prop-types";
+import tagComponent from "../../__internal__/utils/helpers/tags";
+import { StyledVerticalMenu, StyledList } from "./vertical-menu.style";
+
+const VerticalMenu = ({
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  width = "322px",
+  children,
+  height = "100%",
+  ...rest
+}) => {
+  return /*#__PURE__*/React.createElement(StyledVerticalMenu, _extends({
+    boxSizing: "border-box",
+    scrollVariant: "light",
+    backgroundColor: "var(--colorsComponentsLeftnavWinterStandardBackground)",
+    width: width,
+    height: height,
+    py: 1,
+    as: "nav",
+    overflow: "auto",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy
+  }, tagComponent("vertical-menu", rest)), /*#__PURE__*/React.createElement(StyledList, null, children));
+};
+
+VerticalMenu.propTypes = {
+  "aria-label": PropTypes.string,
+  "aria-labelledby": PropTypes.string,
+  "children": PropTypes.node,
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
+  "height": PropTypes.string,
+  "width": PropTypes.string
+};
+export { VerticalMenu };
+export default VerticalMenu;

package/esm/components/vertical-menu/vertical-menu.style.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { PaddingProps } from "styled-system";
+export declare const StyledList: import("styled-components").StyledComponent<"ul", any, {}, never>;
+interface StyledVerticalMenuProps extends PaddingProps {
+    active?: boolean;
+    height: string;
+}
+export declare const StyledVerticalMenuItem: import("styled-components").StyledComponent<"div", any, StyledVerticalMenuProps, never>;
+export declare const StyledTitle: import("styled-components").StyledComponent<"h3", any, {}, never>;
+export declare const StyledAdornment: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTitleIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+export declare const StyledChevronIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+export declare const StyledVerticalMenu: import("styled-components").StyledComponent<"div", any, import("../box").BoxProps, never>;
+export declare const StyledVerticalMenuFullScreen: import("styled-components").StyledComponent<"div", any, import("../box").BoxProps, never>;
+export {};

package/esm/components/vertical-menu/vertical-menu.style.js

@@ -0,0 +1,127 @@
+import styled, { css } from "styled-components";
+import { padding } from "styled-system";
+import StyledIcon from "../icon/icon.style";
+import Icon from "../icon";
+import Box from "../box";
+export const StyledList = styled.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;
+export const StyledVerticalMenuItem = styled.div`
+  min-height: ${({
+  height
+}) => height};
+  width: 100%;
+  display: flex;
+  border: none;
+  align-items: center;
+  font-weight: 600;
+  font-size: 14px;
+  cursor: pointer;
+  color: var(--colorsComponentsLeftnavWinterStandardContent);
+  position: relative;
+  box-sizing: border-box;
+  text-decoration: none;
+  background-color: var(--colorsComponentsLeftnavWinterStandardBackground);
+
+  ${padding}
+
+  &:hover {
+    background-color: var(--colorsComponentsLeftnavWinterStandardHover);
+  }
+
+  &:focus {
+    outline: 3px solid var(--colorsSemanticFocus500);
+    outline-offset: -3px;
+  }
+
+  ${({
+  active
+}) => active && css`
+      &:before {
+        background: var(--colorsComponentsLeftnavWinterStandardSelected);
+        content: "";
+        height: calc(100% - 16px);
+        left: 24px;
+        position: absolute;
+        top: 8px;
+        width: calc(100% - 48px);
+        z-index: 0;
+      }
+
+      &:hover {
+        &:before {
+          background: var(--colorsComponentsLeftnavWinterStandardHover);
+        }
+      }
+    `}
+
+  ${StyledIcon} {
+    width: 20px;
+  }
+`;
+export const StyledTitle = styled.h3`
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 21px;
+  margin: 0;
+  z-index: 1;
+  text-align: left;
+`;
+export const StyledAdornment = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex: 1;
+`;
+export const StyledTitleIcon = styled(Icon)`
+  margin-right: 12px;
+  width: 20px;
+  color: var(--colorsComponentsLeftnavWinterStandardContent);
+`;
+export const StyledChevronIcon = styled(Icon)`
+  margin-left: auto;
+  padding-left: 12px;
+  width: 20px;
+  color: var(--colorsComponentsLeftnavWinterStandardContent);
+`;
+export const StyledVerticalMenu = styled(Box)`
+  // TODO remove hardcoded values when DS have had chance to review which token to use
+  &::-webkit-scrollbar-track {
+    background-color: #cccccc;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: #808080;
+  }
+  &::-webkit-scrollbar {
+    width: 12px;
+  }
+`;
+export const StyledVerticalMenuFullScreen = styled(Box)`
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  height: 100vh;
+  width: 100%;
+  outline: none;
+  padding: 8px 0px;
+  overflow: auto;
+  background-color: var(--colorsComponentsLeftnavWinterStandardBackground);
+  box-sizing: border-box;
+  transition: all 0.3s ease;
+  z-index: ${({
+  theme
+}) => theme.zIndex.fullScreenModal};
+
+  // TODO remove hardcoded values when DS have had chance to review which token to use
+  &::-webkit-scrollbar-track {
+    background-color: #cccccc;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: #808080;
+  }
+  &::-webkit-scrollbar {
+    width: 12px;
+  }
+`;

package/esm/locales/en-gb.js

@@ -127,6 +127,11 @@ const enGB = {
     ariaLabels: {
       close: () => "Close"
     }
+  },
+  verticalMenuFullScreen: {
+    ariaLabels: {
+      close: () => "Close"
+    }
   }
 };
 export default enGB;

package/esm/locales/locale.d.ts

@@ -101,5 +101,10 @@ interface Locale {
             close: () => string;
         };
     };
+    verticalMenuFullScreen: {
+        ariaLabels: {
+            close: () => string;
+        };
+    };
 }
 export default Locale;

package/esm/locales/pl-pl.js

@@ -125,6 +125,11 @@ const plPL = {
     ariaLabels: {
       close: () => "Zamknij"
     }
+  },
+  verticalMenuFullScreen: {
+    ariaLabels: {
+      close: () => "Zamknij"
+    }
   }
 };
 export default plPL;

package/lib/components/i18n-provider/i18n-provider.component.js

@@ -128,6 +128,11 @@ I18nProvider.propTypes = {
       "ariaLabels": _propTypes.default.shape({
         "close": _propTypes.default.func.isRequired
       }).isRequired
+    }),
+    "verticalMenuFullScreen": _propTypes.default.shape({
+      "ariaLabels": _propTypes.default.shape({
+        "close": _propTypes.default.func.isRequired
+      }).isRequired
     })
   })
 };

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

@@ -0,0 +1,8 @@
+export { default as VerticalMenu } from "./vertical-menu.component";
+export type { VerticalMenuProps } from "./vertical-menu.component";
+export { default as VerticalMenuItem } from "./vertical-menu-item.component";
+export type { VerticalMenuItemProps } from "./vertical-menu-item.component";
+export { default as VerticalMenuFullScreen } from "./vertical-menu-full-screen.component";
+export type { VerticalMenuFullScreenProps } from "./vertical-menu-full-screen.component";
+export { default as VerticalMenuTrigger } from "./vertical-menu-trigger.component";
+export type { VerticalMenuTriggerProps } from "./vertical-menu-trigger.component";

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

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "VerticalMenu", {
+  enumerable: true,
+  get: function () {
+    return _verticalMenu.default;
+  }
+});
+Object.defineProperty(exports, "VerticalMenuItem", {
+  enumerable: true,
+  get: function () {
+    return _verticalMenuItem.default;
+  }
+});
+Object.defineProperty(exports, "VerticalMenuFullScreen", {
+  enumerable: true,
+  get: function () {
+    return _verticalMenuFullScreen.default;
+  }
+});
+Object.defineProperty(exports, "VerticalMenuTrigger", {
+  enumerable: true,
+  get: function () {
+    return _verticalMenuTrigger.default;
+  }
+});
+
+var _verticalMenu = _interopRequireDefault(require("./vertical-menu.component"));
+
+var _verticalMenuItem = _interopRequireDefault(require("./vertical-menu-item.component"));
+
+var _verticalMenuFullScreen = _interopRequireDefault(require("./vertical-menu-full-screen.component"));
+
+var _verticalMenuTrigger = _interopRequireDefault(require("./vertical-menu-trigger.component"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

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

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface VerticalMenuFullScreenProps extends TagProps {
+    /** An aria-label attribute for the menu */
+    "aria-label"?: string;
+    /** An aria-labelledby attribute for the menu */
+    "aria-labelledby"?: string;
+    /**  Content of the menu - VerticalMenuItem */
+    children: React.ReactNode;
+    /** Whether the menu is open or not */
+    isOpen: boolean;
+    /** A callback to be called when the close icon is clicked or enter is pressed when focused */
+    onClose: (ev: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
+}
+export declare const VerticalMenuFullScreen: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, isOpen, onClose, ...rest }: VerticalMenuFullScreenProps) => JSX.Element | null;
+export default VerticalMenuFullScreen;

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

@@ -0,0 +1,104 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.VerticalMenuFullScreen = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
+
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+
+var _portal = _interopRequireDefault(require("../portal"));
+
+var _focusTrap = _interopRequireDefault(require("../../__internal__/focus-trap/focus-trap.component"));
+
+var _iconButton = _interopRequireDefault(require("../icon-button"));
+
+var _icon = _interopRequireDefault(require("../icon"));
+
+var _box = _interopRequireDefault(require("../box"));
+
+var _verticalMenu = require("./vertical-menu.style");
+
+var _verticalMenuFullScreen = _interopRequireDefault(require("./vertical-menu-full-screen.context"));
+
+var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events/events"));
+
+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 VerticalMenuFullScreen = ({
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  children,
+  isOpen,
+  onClose,
+  ...rest
+}) => {
+  const l = (0, _useLocale.default)();
+  const menuWrapperRef = (0, _react.useRef)(null);
+  const handleKeyDown = (0, _react.useCallback)(ev => {
+    // istanbul ignore else
+    if (_events.default.isEscKey(ev)) {
+      onClose(ev);
+    }
+  }, [onClose]); // TODO remove this as part of FE-5650
+
+  if (!isOpen) return null;
+  return /*#__PURE__*/_react.default.createElement(_portal.default, null, /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
+    isOpen: isOpen,
+    wrapperRef: menuWrapperRef
+  }, /*#__PURE__*/_react.default.createElement(_verticalMenu.StyledVerticalMenuFullScreen, _extends({
+    ref: menuWrapperRef,
+    scrollVariant: "light",
+    as: "nav",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    onKeyDown: handleKeyDown
+  }, (0, _tags.default)("vertical-menu-full-screen", rest)), /*#__PURE__*/_react.default.createElement(_box.default, {
+    display: "flex",
+    justifyContent: "flex-end",
+    height: "60px",
+    alignItems: "flex-start",
+    px: "20px",
+    pt: "20px",
+    boxSizing: "border-box"
+  }, /*#__PURE__*/_react.default.createElement(_iconButton.default, {
+    "aria-label": l.verticalMenuFullScreen.ariaLabels.close(),
+    onAction: onClose,
+    "data-element": "close"
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    type: "close",
+    color: "var(--colorsComponentsLeftnavWinterStandardContent)",
+    bgSize: "small",
+    fontSize: "medium"
+  }))), /*#__PURE__*/_react.default.createElement(_verticalMenuFullScreen.default.Provider, {
+    value: {
+      isFullScreen: true
+    }
+  }, /*#__PURE__*/_react.default.createElement(_verticalMenu.StyledList, null, children)))));
+};
+
+exports.VerticalMenuFullScreen = VerticalMenuFullScreen;
+VerticalMenuFullScreen.propTypes = {
+  "aria-label": _propTypes.default.string,
+  "aria-labelledby": _propTypes.default.string,
+  "children": _propTypes.default.node,
+  "data-component": _propTypes.default.string,
+  "data-element": _propTypes.default.string,
+  "data-role": _propTypes.default.string,
+  "isOpen": _propTypes.default.bool.isRequired,
+  "onClose": _propTypes.default.func.isRequired
+};
+var _default = VerticalMenuFullScreen;
+exports.default = _default;

package/lib/components/vertical-menu/vertical-menu-full-screen.context.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+declare const VerticalMenuFullScreenContext: React.Context<{
+    isFullScreen: boolean;
+}>;
+export default VerticalMenuFullScreenContext;

package/lib/components/vertical-menu/vertical-menu-full-screen.context.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const VerticalMenuFullScreenContext = /*#__PURE__*/_react.default.createContext({
+  isFullScreen: false
+});
+
+var _default = VerticalMenuFullScreenContext;
+exports.default = _default;

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

@@ -0,0 +1,25 @@
+import React from "react";
+import { PaddingProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+import { IconType } from "../icon";
+export interface VerticalMenuItemProps<T = React.ElementType> extends PaddingProps, TagProps {
+    /** Children of the menu item - another level of VerticalMenuItems */
+    children?: React.ReactNode;
+    /** Title of the menu item */
+    title: string;
+    /** Adornment of the menu item meant to be rendered on the right side */
+    adornment?: React.ReactNode | ((isOpen: boolean) => React.ReactNode);
+    /** Icon meant to be rendered on the left side */
+    iconType?: IconType;
+    /** Whether the menu item is active or not */
+    active?: boolean | ((isOpen: boolean) => boolean);
+    /** Height of the menu item */
+    height?: string;
+    /**  Href, when passed the menu item will be rendered as an anchor tag */
+    href?: string;
+    /** Optional component to render instead of the default div, useful for rendering router link components */
+    component?: T;
+}
+declare type InferredComponentProps<T extends React.ElementType> = Omit<React.ComponentProps<T>, keyof VerticalMenuItemProps<T>>;
+export declare const VerticalMenuItem: <T>({ title, iconType, adornment, children, component, active, height, href, ...rest }: T extends React.ElementType<any> ? InferredComponentProps<T> & VerticalMenuItemProps<T> : VerticalMenuItemProps<React.ElementType<any>>) => JSX.Element;
+export default VerticalMenuItem;