@shopgate/pwa-ui-material 7.30.3 → 7.31.0-alpha.1

package/NavDrawer/index.js

@@ -1,151 +1,160 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { Component, Fragment } from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import noop from 'lodash/noop';
 import Transition from 'react-transition-group/Transition';
 import { Backdrop } from '@shopgate/engage/components';
 import { ModalStateTracker } from '@shopgate/engage/a11y/components';
 import { UIEvents } from '@shopgate/pwa-core';
+import { themeShadows, themeColors } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles } from '@shopgate/engage/styles';
 import Divider from "./components/Divider";
 import Item from "./components/Item";
 import Section from "./components/Section";
 import Title from "./components/Title";
-import { contentStyle, drawerStyle } from "./style";
 import transition from "./transition";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const OPEN = 'navdrawer_open';
 const CLOSE = 'navdrawer_close';
+const useStyles = makeStyles()({
+  content: {
+    fontSize: 14,
+    height: '100%',
+    overflowY: 'scroll',
+    paddingBottom: 'var(--safe-area-inset-bottom)',
+    WebkitOverflowScrolling: 'touch'
+  },
+  drawer: {
+    background: themeColors.light,
+    boxShadow: themeShadows.navDrawer,
+    color: themeColors.dark,
+    height: '100vh',
+    left: 0,
+    maxWidth: '300px',
+    position: 'fixed',
+    top: 0,
+    transition: 'transform 300ms cubic-bezier(0.25, 0.1, 0.25, 1)',
+    width: '100%',
+    willChange: 'transform',
+    zIndex: 50,
+    '@media(max-width: 480px)': {
+      maxWidth: '67vw'
+    }
+  }
+});
 
 /**
- * The NavDrawer component
+ * Material navigation drawer; opens/closes via `NavDrawer.open()` / `NavDrawer.close()` (UIEvents).
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
  */
-let NavDrawer = /*#__PURE__*/function (_Component) {
-  /**
-   * @param {Object} props The component props.
-   */
-  function NavDrawer(props) {
-    var _this;
-    _this = _Component.call(this, props) || this;
-    _this.onEntering = () => {
-      _this.props.onOpen();
-    };
-    _this.onEntered = () => {
-      if (_this.a11yCloseRef.current) {
-        _this.a11yCloseRef.current.focus();
-      }
-    };
-    _this.onExited = () => {
-      _this.contentRef.current.scrollTop = 0;
-      if (_this.triggerElement && typeof _this.triggerElement.focus === 'function') {
-        // Focus the element that triggered the NavDrawer after it closes
-        _this.triggerElement.focus();
-      }
-    };
-    _this.onExiting = () => {
-      _this.props.onClose();
+const NavDrawer = ({
+  children,
+  'aria-hidden': ariaHiddenProp,
+  onClose,
+  onOpen
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const [open, setOpen] = useState(false);
+  const contentRef = useRef(null);
+  const a11yCloseRef = useRef(null);
+  const triggerElementRef = useRef(null);
+  useEffect(() => {
+    /**
+     * Opens the drawer and stores the active element for focus restore.
+     * @returns {void}
+     */
+    const handleOpenEvent = () => {
+      triggerElementRef.current = document.activeElement;
+      setOpen(true);
     };
-    _this.open = () => {
-      // Save a reference to the element that triggered the NavDrawer
-      _this.triggerElement = document.activeElement;
-      _this.setState({
-        open: true
-      });
+    /**
+     * Closes the drawer (event listener).
+     * @returns {void}
+     */
+    const handleCloseEvent = () => {
+      setOpen(false);
     };
-    _this.close = () => {
-      _this.setState({
-        open: false
-      });
+    UIEvents.addListener(OPEN, handleOpenEvent);
+    UIEvents.addListener(CLOSE, handleCloseEvent);
+    return () => {
+      UIEvents.removeListener(OPEN, handleOpenEvent);
+      UIEvents.removeListener(CLOSE, handleCloseEvent);
     };
-    _this.contentRef = /*#__PURE__*/React.createRef();
-    _this.a11yCloseRef = /*#__PURE__*/React.createRef();
-    _this.state = {
-      open: false
-    };
-
-    // Save a reference to the element that triggered the NavDrawer
-    _this.triggerElement = null;
-    UIEvents.addListener(OPEN, _this.open);
-    UIEvents.addListener(CLOSE, _this.close);
-    return _this;
-  }
-
-  /**
-   * @param {Object} nextProps The next component props.
-   * @param {Object} nextState The next component state.
-   * @returns {JSX}
-   */
-  _inheritsLoose(NavDrawer, _Component);
-  var _proto = NavDrawer.prototype;
-  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
-    return this.state.open !== nextState.open;
-  }
-
-  /**
-   * The unmount lifecycle hook
-   */;
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    UIEvents.removeListener(OPEN, this.open);
-    UIEvents.removeListener(CLOSE, this.close);
-  };
-  /**
-   * @returns {JSX}
-   */
-  _proto.render = function render() {
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Transition, {
-        onEntering: this.onEntering,
-        onEntered: this.onEntered,
-        onExited: this.onExited,
-        onExiting: this.onExiting,
-        in: this.state.open,
-        timeout: 300,
-        children: state => {
-          const ariaHidden = this.props['aria-hidden'] || state === 'exited';
-          return /*#__PURE__*/_jsx(ModalStateTracker, {
-            isVisible: this.state.open,
-            children: /*#__PURE__*/_jsxs("section", {
-              className: `${drawerStyle} ui-material__nav-drawer`,
-              "data-test-id": "NavDrawer",
-              style: transition[state],
-              "aria-hidden": ariaHidden,
-              tabIndex: "-1",
-              children: [/*#__PURE__*/_jsx(Item, {
-                label: "common.close",
-                ref: this.a11yCloseRef,
-                srOnly: true
-              }), /*#__PURE__*/_jsx("nav", {
-                className: contentStyle,
-                ref: this.contentRef,
-                children: this.props.children
-              })]
-            })
-          });
-        }
-      }), /*#__PURE__*/_jsx(Backdrop, {
-        isVisible: this.state.open,
-        level: 4,
-        onClick: this.close,
-        opacity: 20
-      })]
-    });
-  };
-  return NavDrawer;
-}(Component);
+  }, []);
+  const closeDrawer = useCallback(() => {
+    setOpen(false);
+  }, []);
+  const handleEntering = useCallback(() => {
+    onOpen();
+  }, [onOpen]);
+  const handleEntered = useCallback(() => {
+    a11yCloseRef.current?.focus();
+  }, []);
+  const handleExiting = useCallback(() => {
+    onClose();
+  }, [onClose]);
+  const handleExited = useCallback(() => {
+    if (contentRef.current) {
+      contentRef.current.scrollTop = 0;
+    }
+    const trigger = triggerElementRef.current;
+    if (trigger && typeof trigger.focus === 'function') {
+      trigger.focus();
+    }
+  }, []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Transition, {
+      onEntering: handleEntering,
+      onEntered: handleEntered,
+      onExited: handleExited,
+      onExiting: handleExiting,
+      in: open,
+      timeout: 300,
+      children: state => /*#__PURE__*/_jsx(ModalStateTracker, {
+        isVisible: open,
+        children: /*#__PURE__*/_jsxs("section", {
+          className: cx(classes.drawer, 'ui-material__nav-drawer'),
+          "data-test-id": "NavDrawer",
+          style: transition[state],
+          "aria-hidden": ariaHiddenProp || state === 'exited',
+          tabIndex: "-1",
+          children: [/*#__PURE__*/_jsx(Item, {
+            label: "common.close",
+            ref: a11yCloseRef,
+            srOnly: true
+          }), /*#__PURE__*/_jsx("nav", {
+            className: classes.content,
+            ref: contentRef,
+            children: children
+          })]
+        })
+      })
+    }), /*#__PURE__*/_jsx(Backdrop, {
+      isVisible: open,
+      level: 4,
+      onClick: closeDrawer,
+      opacity: 20
+    })]
+  });
+};
+NavDrawer.defaultProps = {
+  'aria-hidden': false,
+  onClose: noop,
+  onOpen: noop
+};
 NavDrawer.EVENT_OPEN = OPEN;
 NavDrawer.EVENT_CLOSE = CLOSE;
 NavDrawer.Divider = Divider;
 NavDrawer.Item = Item;
 NavDrawer.Section = Section;
 NavDrawer.Title = Title;
-NavDrawer.close = () => {
-  UIEvents.emit(CLOSE);
-};
 NavDrawer.open = () => {
   UIEvents.emit(OPEN);
 };
-NavDrawer.defaultProps = {
-  'aria-hidden': false,
-  onClose: noop,
-  onOpen: noop
+NavDrawer.close = () => {
+  UIEvents.emit(CLOSE);
 };
 export default NavDrawer;

package/NavDrawer/spec.js

@@ -1,10 +1,95 @@
+import "core-js/modules/es.array.reduce.js";
+/* eslint-disable global-require, extra-rules/no-single-line-objects */
 import React from 'react';
 import { shallow, mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
+import Transition from 'react-transition-group/Transition';
+jest.unmock('@shopgate/pwa-core');
+jest.mock('@shopgate/engage/styles', () => ({
+  makeStyles: () => function mockUseStylesFactory(defs) {
+    return function useStylesMock() {
+      const keys = Object.keys(defs);
+      const classes = keys.reduce((acc, key) => {
+        acc[key] = `mock-class-${key}`;
+        return acc;
+      }, {});
+      const cx = (...parts) => parts.filter(Boolean).join(' ');
+      return {
+        classes,
+        cx
+      };
+    };
+  }
+}));
+jest.mock('@shopgate/engage/components', () => {
+  const mockReact = require('react');
+  const mockPropTypes = require('prop-types');
+  function Backdrop(props) {
+    const {
+      isVisible,
+      onClick
+    } = props;
+    if (!isVisible) {
+      return null;
+    }
+    return mockReact.createElement('button', {
+      type: 'button',
+      'aria-label': 'Close',
+      'data-test-id': 'NavDrawerBackdrop',
+      onClick
+    });
+  }
+  Backdrop.propTypes = {
+    isVisible: mockPropTypes.bool,
+    onClick: mockPropTypes.func
+  };
+  Backdrop.defaultProps = {
+    isVisible: false,
+    onClick: undefined
+  };
+  Backdrop.displayName = 'Backdrop';
+  return {
+    Backdrop
+  };
+});
+jest.mock('@shopgate/engage/a11y/components', () => {
+  const mockPropTypes = require('prop-types');
+  function ModalStateTracker(props) {
+    return props.children;
+  }
+  ModalStateTracker.propTypes = {
+    children: mockPropTypes.node
+  };
+  ModalStateTracker.defaultProps = {
+    children: null
+  };
+  return {
+    ModalStateTracker
+  };
+});
+jest.mock("./components/Item", () => {
+  const mockReact = require('react');
+  const mockPropTypes = require('prop-types');
+  const ItemWithRef = mockReact.forwardRef((props, ref) => mockReact.createElement('button', {
+    type: 'button',
+    ref,
+    'data-test-id': 'nav-drawer-item'
+  }, props.label));
+  ItemWithRef.propTypes = {
+    label: mockPropTypes.string
+  };
+  ItemWithRef.defaultProps = {
+    label: ''
+  };
+  return {
+    __esModule: true,
+    default: ItemWithRef
+  };
+});
+
+// eslint-disable-next-line import/first
 import NavDrawer from "./index";
 import { jsx as _jsx } from "react/jsx-runtime";
-jest.unmock('@shopgate/pwa-core');
-jest.mock('@shopgate/engage/components');
-jest.mock('@shopgate/engage/a11y/components');
 describe('NavDrawer', () => {
   it('should match the snapshot', () => {
     const wrapper = shallow(/*#__PURE__*/_jsx(NavDrawer, {
@@ -20,22 +105,35 @@ describe('NavDrawer', () => {
       onClose: onClose,
       children: "Content"
     }));
-    NavDrawer.open();
-    expect(wrapper.state().open).toEqual(true);
+    act(() => {
+      NavDrawer.open();
+    });
+    wrapper.update();
+    expect(wrapper.find(Transition).prop('in')).toEqual(true);
     expect(onOpen).toHaveBeenCalled();
     expect(onClose).not.toHaveBeenCalled();
-    NavDrawer.close();
-    expect(wrapper.state().open).toEqual(false);
+    act(() => {
+      NavDrawer.close();
+    });
+    wrapper.update();
+    expect(wrapper.find(Transition).prop('in')).toEqual(false);
     expect(onClose).toHaveBeenCalled();
   });
   it('should close when Backdrop is clicked', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(NavDrawer, {
+    const wrapper = mount(/*#__PURE__*/_jsx(NavDrawer, {
       children: "Content"
     }));
-    const backdrop = wrapper.find('Backdrop');
-    NavDrawer.open();
-    expect(wrapper.state().open).toEqual(true);
-    backdrop.simulate('click');
-    expect(wrapper.state().open).toEqual(false);
+    act(() => {
+      NavDrawer.open();
+    });
+    wrapper.update();
+    expect(wrapper.find(Transition).prop('in')).toEqual(true);
+    const backdrop = wrapper.find('[data-test-id="NavDrawerBackdrop"]');
+    act(() => {
+      backdrop.simulate('click');
+    });
+    wrapper.update();
+    expect(wrapper.find(Transition).prop('in')).toEqual(false);
   });
-});
+});
+/* eslint-enable global-require, extra-rules/no-single-line-objects */