@shopgate/pwa-ui-shared 7.30.0-alpha.6 → 7.30.0-alpha.8

package/Chip/style.js

@@ -1,10 +1,78 @@
-function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return 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);}import{css}from'glamor';import{responsiveMediaQuery}from'@shopgate/engage/styles';import{hasNewServices}from'@shopgate/engage/core/helpers';import{themeConfig}from'@shopgate/engage';/**
+import { css } from 'glamor';
+import { responsiveMediaQuery } from '@shopgate/engage/styles';
+import { hasNewServices } from '@shopgate/engage/core/helpers';
+import { themeConfig } from '@shopgate/engage';
+
+/**
  * Gets a basic style object for the chip layout.
  * @param {boolean} hasRemoveButton Whether this chip has a remove button.
  * @returns {Object} The style object.
- */var chipBase=function chipBase(){var hasRemoveButton=arguments.length>0&&arguments[0]!==undefined?arguments[0]:true;return{display:'flex',alignItems:'center',borderRadius:26,outline:0,height:26,paddingRight:themeConfig.variables.gap.small,paddingLeft:themeConfig.variables.gap.small*(hasRemoveButton?0.5:1),marginRight:5,marginTop:4,marginBottom:4,minWidth:0};};/**
+ */
+const chipBase = (hasRemoveButton = true) => ({
+  display: 'flex',
+  alignItems: 'center',
+  borderRadius: 26,
+  outline: 0,
+  height: 26,
+  paddingRight: themeConfig.variables.gap.small,
+  paddingLeft: themeConfig.variables.gap.small * (hasRemoveButton ? 0.5 : 1),
+  marginRight: 5,
+  marginTop: 4,
+  marginBottom: 4,
+  minWidth: 0
+});
+
+/**
  * Gets a style class for the chip layout.
  * @param {boolean} hasRemoveButton Whether this chip has a remove button.
  * @param {boolean} inverted Whether the colors of the chip are inverted.
  * @returns {string} The style class name.
- */var chip=function chip(){var hasRemoveButton=arguments.length>0&&arguments[0]!==undefined?arguments[0]:true;var inverted=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;return css(_extends({},chipBase(hasRemoveButton),{},hasNewServices()?{backgroundColor:inverted?'var(--color-primary)':'var(--color-primary-contrast)',color:inverted?'var(--color-primary-contrast)':'var(--color-primary)'}:{backgroundColor:inverted?'var(--color-secondary)':'var(--color-secondary-contrast)',color:inverted?'var(--color-secondary-contrast)':'var(--color-secondary)','--color-text-high-emphasis':inverted?'var(--color-secondary-contrast)':'var(--color-secondary)'})).toString();};var removeButton=css(_defineProperty({flexShrink:0,padding:0},responsiveMediaQuery('>xs',{webOnly:true}),{padding:'0 5px',fontSize:'1.125rem'})).toString();var name=css(_defineProperty({paddingLeft:themeConfig.variables.gap.small*0.5,paddingRight:themeConfig.variables.gap.small*0.5,paddingTop:3,paddingBottom:3,fontSize:12,fontWeight:500,textOverflow:'ellipsis',maxWidth:'100%',whiteSpace:'nowrap',overflow:'hidden',display:'block',lineHeight:'1',color:'inherit'},responsiveMediaQuery('>xs',{webOnly:true}),{fontSize:'0.875rem',lineHeight:'1.25rem',padding:'6px 8px 6px 0'})).toString();export default{chip:chip,removeButton:removeButton,name:name};
+ */
+const chip = (hasRemoveButton = true, inverted = false) => css({
+  ...chipBase(hasRemoveButton),
+  ...(hasNewServices() ? {
+    backgroundColor: inverted ? 'var(--color-primary)' : 'var(--color-primary-contrast)',
+    color: inverted ? 'var(--color-primary-contrast)' : 'var(--color-primary)'
+  } : {
+    backgroundColor: inverted ? 'var(--color-secondary)' : 'var(--color-secondary-contrast)',
+    color: inverted ? 'var(--color-secondary-contrast)' : 'var(--color-secondary)',
+    '--color-text-high-emphasis': inverted ? 'var(--color-secondary-contrast)' : 'var(--color-secondary)'
+  })
+}).toString();
+const removeButton = css({
+  flexShrink: 0,
+  padding: 0,
+  [responsiveMediaQuery('>xs', {
+    webOnly: true
+  })]: {
+    padding: '0 5px',
+    fontSize: '1.125rem'
+  }
+}).toString();
+const name = css({
+  paddingLeft: themeConfig.variables.gap.small * 0.5,
+  paddingRight: themeConfig.variables.gap.small * 0.5,
+  paddingTop: 3,
+  paddingBottom: 3,
+  fontSize: 12,
+  fontWeight: 500,
+  textOverflow: 'ellipsis',
+  maxWidth: '100%',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  display: 'block',
+  lineHeight: '1',
+  color: 'inherit',
+  [responsiveMediaQuery('>xs', {
+    webOnly: true
+  })]: {
+    fontSize: '0.875rem',
+    lineHeight: '1.25rem',
+    padding: '6px 8px 6px 0'
+  }
+}).toString();
+export default {
+  chip,
+  removeButton,
+  name
+};

package/ContextMenu/ContextMenu.hooks.js

@@ -1,4 +1,8 @@
-import{useContext}from'react';import ContextMenuContext from"./ContextMenuProvider.context";// eslint-disable-next-line valid-jsdoc
+import { useContext } from 'react';
+import ContextMenuContext from "./ContextMenuProvider.context";
+
+// eslint-disable-next-line valid-jsdoc
 /**
  * Returns the value of the context menu provider state.
- */export var useContextMenu=function useContextMenu(){return useContext(ContextMenuContext);};
+ */
+export const useContextMenu = () => useContext(ContextMenuContext);

package/ContextMenu/ContextMenuProvider.context.js

@@ -1,7 +1,13 @@
-import{createContext}from'react';/**
+import { createContext } from 'react';
+
+/**
  * @typedef {Object} ContextMenuContextType
  * @property {(event: React.MouseEvent<HTMLButtonElement>) => void} handleMenuToggle
  * Toggles visibility of the ContextMenu.
- */ /**
+ */
+
+/**
  * @type {ContextMenuContextType}
- */var initialContext={};export default createContext(initialContext);
+ */
+const initialContext = {};
+export default /*#__PURE__*/createContext(initialContext);

package/ContextMenu/ContextMenuProvider.js

@@ -1,8 +1,27 @@
-import React,{useMemo}from'react';import PropTypes from'prop-types';import Context from"./ContextMenuProvider.context";/**
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import Context from "./ContextMenuProvider.context";
+
+/**
  * The Context Menu Provider
  *
  * @param {Object} props The component props.
  * @param {Object} props.children The component props.
  * @param {Object} props.handleMenuToggle Toggles visibility of the ContextMenu.
  * @returns {JSX}
- */var ContextMenuProvider=function ContextMenuProvider(_ref){var children=_ref.children,handleMenuToggle=_ref.handleMenuToggle;var value=useMemo(function(){return{handleMenuToggle:handleMenuToggle};},[handleMenuToggle]);return React.createElement(Context.Provider,{value:value},children);};ContextMenuProvider.defaultProps={handleMenuToggle:function handleMenuToggle(){}};export default ContextMenuProvider;
+ */
+const ContextMenuProvider = ({
+  children,
+  handleMenuToggle
+}) => {
+  const value = useMemo(() => ({
+    handleMenuToggle
+  }), [handleMenuToggle]);
+  return /*#__PURE__*/React.createElement(Context.Provider, {
+    value: value
+  }, children);
+};
+ContextMenuProvider.defaultProps = {
+  handleMenuToggle: () => {}
+};
+export default ContextMenuProvider;

package/ContextMenu/components/Item/index.js

@@ -1,16 +1,78 @@
-import React,{useCallback}from'react';import PropTypes from'prop-types';import noop from'lodash/noop';import classNames from'classnames';import Glow from"../../../Glow";import{getItemClass}from"./style";import{useContextMenu}from"../../ContextMenu.hooks";/**
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import noop from 'lodash/noop';
+import classNames from 'classnames';
+import Glow from "../../../Glow";
+import { getItemClass } from "./style";
+import { useContextMenu } from "../../ContextMenu.hooks";
+
+/**
  * A delay in ms after that the closeMenu callback gets triggered.
  * @type {number}
- */var CLOSE_DELAY=250;/**
+ */
+const CLOSE_DELAY = 250;
+
+/**
  * The Context Menu Item component.
  * @param {Object} props The component props.
  * @returns {JSX.Element}
- */var Item=function Item(_ref){var children=_ref.children,onClick=_ref.onClick,disabled=_ref.disabled,autoClose=_ref.autoClose,className=_ref.className;var _useContextMenu=useContextMenu(),handleMenuToggle=_useContextMenu.handleMenuToggle;/**
+ */
+const Item = ({
+  children,
+  onClick,
+  disabled,
+  autoClose,
+  className
+}) => {
+  const {
+    handleMenuToggle
+  } = useContextMenu();
+
+  /**
     * Handles the click event.
     * @param {Event} event The click event.
     * @returns {void}
-    */var handleClick=useCallback(function(event){event.persist();setTimeout(function(){if(autoClose){handleMenuToggle(event);}setTimeout(function(){onClick(event);},0);},autoClose?CLOSE_DELAY:0);},[autoClose,handleMenuToggle,onClick]);/**
+    */
+  const handleClick = useCallback(event => {
+    event.persist();
+    setTimeout(() => {
+      if (autoClose) {
+        handleMenuToggle(event);
+      }
+      setTimeout(() => {
+        onClick(event);
+      }, 0);
+    }, autoClose ? CLOSE_DELAY : 0);
+  }, [autoClose, handleMenuToggle, onClick]);
+
+  /**
    * Handles the keypress event for screen readers.
    * @param {Event} event The click event.
    * @returns {void}
-   */var handleKeyPress=useCallback(function(event){if(event.key==='Enter'||event.key===' '){event.preventDefault();handleClick(event);}},[handleClick]);return React.createElement(Glow,{disabled:disabled},React.createElement("div",{className:classNames(getItemClass(disabled),className),onClick:disabled?noop:handleClick,"data-test-id":"contextMenuButton","aria-disabled":disabled,role:"button",tabIndex:disabled?-1:0,onKeyDown:!disabled?handleKeyPress:undefined},children));};Item.defaultProps={autoClose:true,children:null,className:'',onClick:function onClick(){},disabled:false};export default Item;
+   */
+  const handleKeyPress = useCallback(event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleClick(event);
+    }
+  }, [handleClick]);
+  return /*#__PURE__*/React.createElement(Glow, {
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(getItemClass(disabled), className),
+    onClick: disabled ? noop : handleClick,
+    "data-test-id": "contextMenuButton",
+    "aria-disabled": disabled,
+    role: "button",
+    tabIndex: disabled ? -1 : 0,
+    onKeyDown: !disabled ? handleKeyPress : undefined
+  }, children));
+};
+Item.defaultProps = {
+  autoClose: true,
+  children: null,
+  className: '',
+  onClick: () => {},
+  disabled: false
+};
+export default Item;

package/ContextMenu/components/Item/style.js

@@ -1,5 +1,34 @@
-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{css}from'glamor';import Color from'color';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{getCSSCustomProp}from'@shopgate/engage/styles';/**
+import { css } from 'glamor';
+import Color from 'color';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { getCSSCustomProp } from '@shopgate/engage/styles';
+
+/**
  * Get the item class.
- * @param {bool} disabled Disabled.
+ * @param {boolean} disabled Disabled.
  * @returns {string}
- */export var getItemClass=function getItemClass(disabled){var background=themeConfig.colors.shade8;var customPropColor=getCSSCustomProp('--color-primary');if(customPropColor){background=Color(customPropColor).alpha(0.04);}return css(_extends({position:'relative',whiteSpace:'nowrap',marginBottom:2,padding:"".concat(themeConfig.variables.gap.big*0.875,"px ").concat(themeConfig.variables.gap.big*1.375,"px"),lineHeight:1,zIndex:1,color:disabled?'var(--color-text-low-emphasis)':'inherits'},!disabled?{cursor:'pointer',':hover':{background:background}}:{cursor:'default'})).toString();};
+ */
+export const getItemClass = disabled => {
+  let background = themeConfig.colors.shade8;
+  const customPropColor = getCSSCustomProp('--color-primary');
+  if (customPropColor) {
+    background = Color(customPropColor).alpha(0.04);
+  }
+  return css({
+    position: 'relative',
+    whiteSpace: 'nowrap',
+    marginBottom: 2,
+    padding: `${themeConfig.variables.gap.big * 0.875}px ${themeConfig.variables.gap.big * 1.375}px`,
+    lineHeight: 1,
+    zIndex: 1,
+    color: disabled ? 'var(--color-text-low-emphasis)' : 'inherits',
+    ...(!disabled ? {
+      cursor: 'pointer',
+      ':hover': {
+        background
+      }
+    } : {
+      cursor: 'default'
+    })
+  }).toString();
+};

package/ContextMenu/components/Position/index.js

@@ -1,16 +1,67 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Component}from'react';import PropTypes from'prop-types';import clamp from'lodash/clamp';import styles from"./style";/**
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import clamp from 'lodash/clamp';
+import styles from "./style";
+
+/**
  * The Context Menu Position component.
- */var Position=/*#__PURE__*/function(_Component){/**
+ */
+class Position extends Component {
+  /**
    * The Constructor.
    * @param {Object} props The component props.
-   */function Position(props){var _this2;_classCallCheck(this,Position);_this2=_callSuper(this,Position,[props]);_this2.elementRef=null;return _this2;}/**
+   */
+  constructor(props) {
+    super(props);
+    this.elementRef = null;
+  }
+
+  /**
    * Calculate and apply the correct menu position after mounting.
-   */_inherits(Position,_Component);return _createClass(Position,[{key:"componentDidMount",value:function componentDidMount(){var offset=this.props.offset;// Get ref to the actual child DOM element and calculate bounding rect.
-var _this$elementRef$chil=_slicedToArray(this.elementRef.childNodes,1),child=_this$elementRef$chil[0];var bounds=child.getBoundingClientRect();// Get window dimensions
-var width=window.innerWidth;var height=window.innerHeight;// Get the outer gap from styles
-var gap=styles.outerGap;// Calculate clamped menu position
-var left=clamp(offset.left,0,width-bounds.width-gap*2);var top=clamp(offset.top-gap,0,height-bounds.height-gap*2);// Assign position directly w/o re-rendering the component
-this.elementRef.style.left="".concat(left,"px");this.elementRef.style.top="".concat(top,"px");}/**
+   */
+  componentDidMount() {
+    const {
+      offset
+    } = this.props;
+
+    // Get ref to the actual child DOM element and calculate bounding rect.
+    const [child] = this.elementRef.childNodes;
+    const bounds = child.getBoundingClientRect();
+
+    // Get window dimensions
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+
+    // Get the outer gap from styles
+    const gap = styles.outerGap;
+
+    // Calculate clamped menu position
+    const left = clamp(offset.left, 0, width - bounds.width - gap * 2);
+    const top = clamp(offset.top - gap, 0, height - bounds.height - gap * 2);
+
+    // Assign position directly w/o re-rendering the component
+    this.elementRef.style.left = `${left}px`;
+    this.elementRef.style.top = `${top}px`;
+  }
+
+  /**
    * Renders the component.
    * @returns {JSX}
-   */},{key:"render",value:function render(){var _this3=this;return React.createElement("div",{ref:function ref(_ref){_this3.elementRef=_ref;},className:styles.container},this.props.children);}}]);}(Component);_defineProperty(Position,"defaultProps",{children:null,offset:{top:0,left:0}});export default Position;
+   */
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref => {
+        this.elementRef = ref;
+      },
+      className: styles.container
+    }, this.props.children);
+  }
+}
+Position.defaultProps = {
+  children: null,
+  offset: {
+    top: 0,
+    left: 0
+  }
+};
+export default Position;

package/ContextMenu/components/Position/style.js

@@ -1 +1,11 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var outerGap=themeConfig.variables.gap.small;var container=css({position:'absolute',margin:outerGap}).toString();export default{container:container,outerGap:outerGap};
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const outerGap = themeConfig.variables.gap.small;
+const container = css({
+  position: 'absolute',
+  margin: outerGap
+}).toString();
+export default {
+  container,
+  outerGap
+};

package/ContextMenu/index.js

@@ -1,4 +1,17 @@
-function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import React,{useState,useEffect,useRef,useCallback}from'react';import PropTypes from'prop-types';import{ConnectedReactPortal}from'@shopgate/engage/components';import classNames from'classnames';import Backdrop from'@shopgate/pwa-common/components/Backdrop';import{FocusTrap}from'@shopgate/engage/a11y/components';import{i18n}from'@shopgate/engage/core';import MoreVertIcon from"../icons/MoreVertIcon";import Position from"./components/Position";import Item from"./components/Item";import styles from"./style";import ContextMenuProvider from"./ContextMenuProvider";/**
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { ConnectedReactPortal } from '@shopgate/engage/components';
+import classNames from 'classnames';
+import Backdrop from '@shopgate/pwa-common/components/Backdrop';
+import { FocusTrap } from '@shopgate/engage/a11y/components';
+import { i18n } from '@shopgate/engage/core';
+import MoreVertIcon from "../icons/MoreVertIcon";
+import Position from "./components/Position";
+import Item from "./components/Item";
+import styles from "./style";
+import ContextMenuProvider from "./ContextMenuProvider";
+
+/**
  * The Context Menu component.
   * @param {Object} props The component props.
   * @param {Object} props.children The menu items.
@@ -11,7 +24,115 @@ function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj
   * @param {boolean} props.scroll Whether the menu should be scrollable.
   * @param {boolean} props.showToggle Whether the toggle button should be shown.
   * @returns {JSX}
-  */var ContextMenu=function ContextMenu(props){var children=props.children,classes=props.classes,disabled=props.disabled,showToggle=props.showToggle,scroll=props.scroll,isOpened=props.isOpened,onStateChange=props.onStateChange;var _useState=useState(isOpened),_useState2=_slicedToArray(_useState,2),active=_useState2[0],setActive=_useState2[1];var elementRef=useRef(null);var menuRef=useRef(null);useEffect(function(){if(typeof isOpened==='boolean'&&active!==isOpened){setActive(isOpened);}},[active,isOpened]);useEffect(function(){if(active&&menuRef.current){menuRef.current.focus();}},[active]);/**
+  */
+const ContextMenu = props => {
+  const {
+    children,
+    classes,
+    disabled,
+    showToggle,
+    scroll,
+    isOpened,
+    onStateChange
+  } = props;
+  const [active, setActive] = useState(isOpened);
+  const elementRef = useRef(null);
+  const menuRef = useRef(null);
+  useEffect(() => {
+    if (typeof isOpened === 'boolean' && active !== isOpened) {
+      setActive(isOpened);
+    }
+  }, [active, isOpened]);
+  useEffect(() => {
+    if (active && menuRef.current) {
+      menuRef.current.focus();
+    }
+  }, [active]);
+
+  /**
    * Handles the menu toggle.
    * @param {Object} e The event object.
-  */var handleMenuToggle=useCallback(function(e){if(e){e.preventDefault();e.stopPropagation();}if(elementRef.current){setActive(function(prevActive){var newState=!prevActive;if(onStateChange){onStateChange({active:newState});}return newState;});}},[onStateChange]);var offset=elementRef.current?elementRef.current.getBoundingClientRect():{top:0,left:0};var useScroll=typeof scroll==='boolean'&&!!scroll;return React.createElement("div",{"data-test-id":"contextMenu",ref:elementRef,className:classNames(styles.container,classes.container,'ui-shared__context-menu')},showToggle&&React.createElement("button",{className:classNames(styles.button,classes.button,_defineProperty({},styles.disabled,disabled)),onClick:handleMenuToggle,disabled:disabled,type:"button","aria-label":i18n.text('navigation.open_menu'),"aria-haspopup":"true","aria-expanded":active,"aria-controls":"contextMenuDialog"},React.createElement(MoreVertIcon,{"aria-hidden":true})),React.createElement(ConnectedReactPortal,{isOpened:active},React.createElement(FocusTrap,{active:active},React.createElement("div",{className:styles.overlay},React.createElement(Backdrop,{isVisible:true,level:0,opacity:0,onClick:handleMenuToggle}),React.createElement(Position,{offset:offset},React.createElement(ContextMenuProvider,{handleMenuToggle:handleMenuToggle},React.createElement("div",{className:classNames(styles.menu,_defineProperty({},styles.scrollable,useScroll)),ref:menuRef,tabIndex:"-1","aria-modal":"true",role:"dialog"},children,React.createElement("button",{onClick:handleMenuToggle,className:"sr-only","aria-label":i18n.text('common.close'),type:"button"},i18n.text('common.close')))))))));};ContextMenu.defaultProps={children:null,classes:{container:'',button:''},disabled:false,showToggle:true,isOpened:null,onStateChange:null,scroll:null};ContextMenu.Item=Item;export default ContextMenu;
+  */
+  const handleMenuToggle = useCallback(e => {
+    if (e) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+    if (elementRef.current) {
+      setActive(prevActive => {
+        const newState = !prevActive;
+        if (onStateChange) {
+          onStateChange({
+            active: newState
+          });
+        }
+        return newState;
+      });
+    }
+  }, [onStateChange]);
+  const offset = elementRef.current ? elementRef.current.getBoundingClientRect() : {
+    top: 0,
+    left: 0
+  };
+  const useScroll = typeof scroll === 'boolean' && !!scroll;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "contextMenu",
+    ref: elementRef,
+    className: classNames(styles.container, classes.container, 'ui-shared__context-menu')
+  }, showToggle && /*#__PURE__*/React.createElement("button", {
+    className: classNames(styles.button, classes.button, {
+      [styles.disabled]: disabled
+    }),
+    onClick: handleMenuToggle,
+    disabled: disabled,
+    type: "button",
+    "aria-label": i18n.text('navigation.open_menu'),
+    "aria-haspopup": "true",
+    "aria-expanded": active,
+    "aria-controls": "contextMenuDialog"
+  }, /*#__PURE__*/React.createElement(MoreVertIcon, {
+    "aria-hidden": true
+  })), /*#__PURE__*/React.createElement(ConnectedReactPortal, {
+    isOpened: active
+  }, /*#__PURE__*/React.createElement(FocusTrap, {
+    active: active
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.overlay
+  }, /*#__PURE__*/React.createElement(Backdrop, {
+    isVisible: true,
+    level: 0,
+    opacity: 0,
+    onClick: handleMenuToggle
+  }), /*#__PURE__*/React.createElement(Position, {
+    offset: offset
+  }, /*#__PURE__*/React.createElement(ContextMenuProvider, {
+    handleMenuToggle: handleMenuToggle
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.menu, {
+      [styles.scrollable]: useScroll
+    }),
+    ref: menuRef,
+    tabIndex: "-1",
+    "aria-modal": "true",
+    role: "dialog"
+  }, children, /*#__PURE__*/React.createElement("button", {
+    onClick: handleMenuToggle,
+    className: "sr-only",
+    "aria-label": i18n.text('common.close'),
+    type: "button"
+  }, i18n.text('common.close')))))))));
+};
+ContextMenu.defaultProps = {
+  children: null,
+  classes: {
+    container: '',
+    button: ''
+  },
+  disabled: false,
+  showToggle: true,
+  isOpened: null,
+  onStateChange: null,
+  scroll: null
+};
+ContextMenu.Item = Item;
+export default ContextMenu;

package/ContextMenu/spec.js

@@ -1,3 +1,102 @@
-import React from'react';import{mount,shallow}from'enzyme';import{act}from'react-dom/test-utils';import Backdrop from'@shopgate/pwa-common/components/Backdrop';import ContextMenu from"./index";jest.mock('@shopgate/engage/components');global.requestAnimationFrame=function(fn){return fn();};jest.useFakeTimers();describe('<ContextMenu />',function(){var mockItemAClick=jest.fn();var mockItemBClick=jest.fn();var numMenuItems=2;describe('Snapshot test',function(){it('should match snapshot',function(){var wrapper=shallow(React.createElement(ContextMenu,{isOpened:true},React.createElement(ContextMenu.Item,{onClick:mockItemAClick,className:"menu-active-item"},'Item A'),React.createElement(ContextMenu.Item,{onClick:mockItemBClick,className:"menu-active-item"},'Item B')));expect(wrapper).toMatchSnapshot();});it('should match snapshot without toggle',function(){var wrapper=shallow(React.createElement(ContextMenu,{isOpened:true,showToggle:false},React.createElement(ContextMenu.Item,{onClick:mockItemAClick,className:"menu-active-item"},'Item A')));expect(wrapper).toMatchSnapshot();});});describe('Given the component was mounted to the DOM',function(){var renderedElement;/**
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import { act } from 'react-dom/test-utils';
+import Backdrop from '@shopgate/pwa-common/components/Backdrop';
+import ContextMenu from "./index";
+jest.mock('@shopgate/engage/components');
+global.requestAnimationFrame = fn => fn();
+jest.useFakeTimers();
+describe('<ContextMenu />', () => {
+  const mockItemAClick = jest.fn();
+  const mockItemBClick = jest.fn();
+  const numMenuItems = 2;
+  describe('Snapshot test', () => {
+    it('should match snapshot', () => {
+      const wrapper = shallow(/*#__PURE__*/React.createElement(ContextMenu, {
+        isOpened: true
+      }, /*#__PURE__*/React.createElement(ContextMenu.Item, {
+        onClick: mockItemAClick,
+        className: "menu-active-item"
+      }, 'Item A'), /*#__PURE__*/React.createElement(ContextMenu.Item, {
+        onClick: mockItemBClick,
+        className: "menu-active-item"
+      }, 'Item B')));
+      expect(wrapper).toMatchSnapshot();
+    });
+    it('should match snapshot without toggle', () => {
+      const wrapper = shallow(/*#__PURE__*/React.createElement(ContextMenu, {
+        isOpened: true,
+        showToggle: false
+      }, /*#__PURE__*/React.createElement(ContextMenu.Item, {
+        onClick: mockItemAClick,
+        className: "menu-active-item"
+      }, 'Item A')));
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+  describe('Given the component was mounted to the DOM', () => {
+    let renderedElement;
+
+    /**
      * The view component
-     */var renderComponent=function renderComponent(){renderedElement=mount(React.createElement(ContextMenu,null,React.createElement(ContextMenu.Item,{onClick:mockItemAClick},"Item A"),React.createElement(ContextMenu.Item,{onClick:mockItemBClick},"Item B")));};beforeEach(renderComponent);it('should match snapshot',function(){expect(renderedElement).toMatchSnapshot();});it('should have active state set to false',function(){expect(renderedElement.find('ConnectedReactPortal').prop('isOpened')).toBe(null);});it('should render the toggle button',function(){expect(renderedElement.find('button').length).toBe(1);});it('should not render any context menu items',function(){expect(renderedElement.find(ContextMenu.Item).length).toBe(0);});describe('Given toggle button gets clicked',function(){beforeEach(function(){renderedElement.find('button').simulate('click');renderedElement.update();});it('should have active state set to true',function(){expect(renderedElement.find('ConnectedReactPortal').prop('isOpened')).toBe(true);});it('should render the actual context menu w/ items',function(){expect(renderedElement.find(ContextMenu.Item).length).toBe(numMenuItems);});describe('Given the first item gets clicked',function(){beforeEach(function(){act(function(){renderedElement.find(ContextMenu.Item).first().children().find('[data-test-id="contextMenuButton"]').first().simulate('click');jest.runAllTimers();});});it('should call the related click handler',function(){expect(mockItemAClick).toBeCalled();});it('should close the context menu',function(){renderedElement.update();expect(renderedElement.find(ContextMenu.Item).length).toBe(0);});});describe('Given the backdrop gets clicked',function(){beforeEach(function(){renderedElement.find(Backdrop).children().find('[onClick]').simulate('click');});it('should have active state reset to false',function(){expect(renderedElement.find('ConnectedReactPortal').prop('isOpened')).toBe(false);});it('should close the context menu',function(){expect(renderedElement.find(ContextMenu.Item).length).toBe(0);});});});});});
+     */
+    const renderComponent = () => {
+      renderedElement = mount(/*#__PURE__*/React.createElement(ContextMenu, null, /*#__PURE__*/React.createElement(ContextMenu.Item, {
+        onClick: mockItemAClick
+      }, "Item A"), /*#__PURE__*/React.createElement(ContextMenu.Item, {
+        onClick: mockItemBClick
+      }, "Item B")));
+    };
+    beforeEach(renderComponent);
+    it('should match snapshot', () => {
+      expect(renderedElement).toMatchSnapshot();
+    });
+    it('should have active state set to false', () => {
+      expect(renderedElement.find('ConnectedReactPortal').prop('isOpened')).toBe(null);
+    });
+    it('should render the toggle button', () => {
+      expect(renderedElement.find('button').length).toBe(1);
+    });
+    it('should not render any context menu items', () => {
+      expect(renderedElement.find(ContextMenu.Item).length).toBe(0);
+    });
+    describe('Given toggle button gets clicked', () => {
+      beforeEach(() => {
+        renderedElement.find('button').simulate('click');
+        renderedElement.update();
+      });
+      it('should have active state set to true', () => {
+        expect(renderedElement.find('ConnectedReactPortal').prop('isOpened')).toBe(true);
+      });
+      it('should render the actual context menu w/ items', () => {
+        expect(renderedElement.find(ContextMenu.Item).length).toBe(numMenuItems);
+      });
+      describe('Given the first item gets clicked', () => {
+        beforeEach(() => {
+          act(() => {
+            renderedElement.find(ContextMenu.Item).first().children().find('[data-test-id="contextMenuButton"]').first().simulate('click');
+            jest.runAllTimers();
+          });
+        });
+        it('should call the related click handler', () => {
+          expect(mockItemAClick).toBeCalled();
+        });
+        it('should close the context menu', () => {
+          renderedElement.update();
+          expect(renderedElement.find(ContextMenu.Item).length).toBe(0);
+        });
+      });
+      describe('Given the backdrop gets clicked', () => {
+        beforeEach(() => {
+          renderedElement.find(Backdrop).children().find('[onClick]').simulate('click');
+        });
+        it('should have active state reset to false', () => {
+          expect(renderedElement.find('ConnectedReactPortal').prop('isOpened')).toBe(false);
+        });
+        it('should close the context menu', () => {
+          expect(renderedElement.find(ContextMenu.Item).length).toBe(0);
+        });
+      });
+    });
+  });
+});