@shopgate/pwa-common 7.30.3 → 7.31.0-alpha.1

package/components/SelectBox/index.js

@@ -1,176 +1,156 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { Component } from 'react';
+import React, { useState, useEffect, useRef, useCallback, memo } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import find from 'lodash/find';
+import { makeStyles } from '@shopgate/engage/styles';
 import Dropdown from "../Dropdown";
 import I18n from "../I18n";
 import SelectBoxItem from "./components/Item";
-import styles from "./style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(() => ({
+  overlay: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    overflow: 'auto',
+    zIndex: 1,
+    outline: 0
+  }
+}));
 
 /**
  * The select box component.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-let SelectBox = /*#__PURE__*/function (_Component) {
-  /**
-   * Initializes the component.
-   * @param {Object} props The components props.
-   */
-  function SelectBox(props) {
-    var _this;
-    _this = _Component.call(this, props) || this;
-    /**
-     * Handles any interaction the user does outside of the component.
-     * In this case the select gets closed.
-     * @param {Object} event The event object.
-     */
-    _this.handleInteractionOutside = event => {
-      _this.setState({
-        isOpen: false
-      });
-      event.preventDefault();
-      event.stopPropagation();
-    };
-    /**
-     * Sets the open state to true
-     */
-    _this.handleOpenList = () => {
-      if (_this.state.isOpen) {
-        return;
-      }
-      _this.setState({
-        isOpen: true
-      });
-      if (_this.firstItemRef) {
-        _this.firstItemRef.focus();
-      }
-    };
-    /**
-     * Sets the new active selection.
-     * @param {string} value Value of the selected item.
-     */
-    _this.handleSelectionUpdate = value => {
-      const selection = find(_this.props.items, {
-        value
-      });
-      _this.setState({
-        selected: selection,
-        isOpen: false
-      });
+const SelectBox = ({
+  icon: Icon,
+  item: Item,
+  items,
+  className,
+  classNames: classNamesProp,
+  defaultText,
+  duration,
+  handleSelectionUpdate,
+  initialValue,
+  testId
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState(() => find(items, {
+    value: initialValue
+  }));
+  const controlRef = useRef(null);
+  const firstItemRef = useRef(null);
+  useEffect(() => {
+    setSelected(find(items, {
+      value: initialValue
+    }));
+  }, [initialValue, items]);
+  const handleInteractionOutside = useCallback(event => {
+    setIsOpen(false);
+    event.preventDefault();
+    event.stopPropagation();
+  }, []);
+  const handleOpenList = useCallback(() => {
+    if (isOpen) {
+      return;
+    }
+    setIsOpen(true);
+    if (firstItemRef.current) {
+      firstItemRef.current.focus();
+    }
+  }, [isOpen]);
+  const handleSelectionUpdateInner = useCallback(value => {
+    const selection = find(items, {
+      value
+    });
+    setSelected(selection);
+    setIsOpen(false);
+    setTimeout(() => {
+      handleSelectionUpdate(selection.value);
+    }, duration);
+    if (controlRef.current) {
+      controlRef.current.focus();
+    }
+  }, [duration, handleSelectionUpdate, items]);
 
-      // Delay the callback to make sure actions are fired after animations are done.
-      setTimeout(() => {
-        _this.props.handleSelectionUpdate(selection.value);
-      }, _this.props.duration);
-      if (_this.controlRef) {
-        _this.controlRef.focus();
-      }
-    };
-    /** @param {HTMLElement} ref The element */
-    _this.setControlRef = ref => {
-      _this.controlRef = ref;
-    };
-    /** @param {HTMLElement} ref The element */
-    _this.setFirstItemRef = ref => {
-      _this.firstItemRef = ref;
-    };
-    _this.state = {
-      isOpen: false,
-      selected: find(props.items, {
-        value: props.initialValue
-      })
-    };
-    return _this;
-  }
+  // eslint-disable-next-line require-jsdoc
+  const setControlRef = ref => {
+    controlRef.current = ref;
+  };
 
-  /**
-   * Reset selected when changing the initial value.
-    * @param {Object} nextProps The next props the component will receive.
-   */
-  _inheritsLoose(SelectBox, _Component);
-  var _proto = SelectBox.prototype;
-  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.props.initialValue !== nextProps.initialValue) {
-      this.setState({
-        selected: find(nextProps.items, {
-          value: nextProps.initialValue
-        })
-      });
-    }
+  // eslint-disable-next-line require-jsdoc
+  const setFirstItemRef = ref => {
+    firstItemRef.current = ref;
   };
-  /**
-   * Renders the component
-   * @returns {JSX}
-   */
-  _proto.render = function render() {
-    const Icon = this.props.icon;
-    const {
-      icon,
-      iconOpen = null,
-      selection,
-      button,
-      dropdown,
-      selectItem,
-      selectItemSelected
-    } = this.props.classNames;
-    const buttonLabel = this.state.selected ? this.state.selected.label : this.props.defaultText;
-    const iconClasses = classNames(icon, {
-      [iconOpen]: this.state.isOpen && iconOpen !== null
-    });
-    return /*#__PURE__*/_jsxs("div", {
-      className: `${this.props.className} common__select-box`,
-      "data-test-id": this.props.testId,
-      children: [/*#__PURE__*/_jsxs("button", {
-        className: button,
-        onClick: this.handleOpenList,
-        "data-test-id": buttonLabel,
-        type: "button",
-        "aria-haspopup": true,
-        "aria-expanded": this.state.isOpen ? true : null,
-        "aria-controls": buttonLabel,
-        ref: this.setControlRef,
-        children: [/*#__PURE__*/_jsx("span", {
-          className: selection,
-          children: /*#__PURE__*/_jsx(I18n.Text, {
-            string: buttonLabel
-          })
-        }), /*#__PURE__*/_jsx("div", {
-          className: iconClasses,
-          children: /*#__PURE__*/_jsx(Icon, {})
-        })]
-      }), /*#__PURE__*/_jsx(Dropdown, {
-        className: dropdown,
-        isOpen: this.state.isOpen,
-        duration: this.props.duration,
-        children: /*#__PURE__*/_jsx("ul", {
-          role: "menu",
-          id: buttonLabel,
-          tabIndex: "-1",
-          children: this.props.items.map(item => /*#__PURE__*/_jsx(SelectBoxItem, {
-            classNames: {
-              selectItem,
-              selectItemSelected
-            },
-            wrapper: this.props.item,
-            value: item.value,
-            label: item.label,
-            handleSelectionUpdate: this.handleSelectionUpdate,
-            isSelected: buttonLabel === item.label,
-            forwardedRef: buttonLabel === item.label ? this.setFirstItemRef : null
-          }, item.value))
+  const {
+    icon: iconClass,
+    iconOpen = null,
+    selection,
+    button,
+    dropdown,
+    selectItem,
+    selectItemSelected
+  } = classNamesProp;
+  const buttonLabel = selected ? selected.label : defaultText;
+  return /*#__PURE__*/_jsxs("div", {
+    className: cx(className, 'common__select-box'),
+    "data-test-id": testId,
+    children: [/*#__PURE__*/_jsxs("button", {
+      className: button,
+      onClick: handleOpenList,
+      "data-test-id": buttonLabel,
+      type: "button",
+      "aria-haspopup": true,
+      "aria-expanded": isOpen ? true : null,
+      "aria-controls": buttonLabel,
+      ref: setControlRef,
+      children: [/*#__PURE__*/_jsx("span", {
+        className: selection,
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: buttonLabel
         })
-      }), this.state.isOpen && /*#__PURE__*/_jsx("button", {
-        className: styles.overlay,
-        onClick: this.handleInteractionOutside,
-        onTouchMove: this.handleInteractionOutside,
-        type: "button",
-        "aria-hidden": true
+      }), /*#__PURE__*/_jsx("div", {
+        className: cx(iconClass, {
+          [iconOpen]: isOpen && iconOpen !== null
+        }),
+        children: /*#__PURE__*/_jsx(Icon, {})
       })]
-    });
-  };
-  return SelectBox;
-}(Component);
+    }), /*#__PURE__*/_jsx(Dropdown, {
+      className: dropdown,
+      isOpen: isOpen,
+      duration: duration,
+      children: /*#__PURE__*/_jsx("ul", {
+        role: "menu",
+        id: buttonLabel,
+        tabIndex: "-1",
+        children: items.map(item => /*#__PURE__*/_jsx(SelectBoxItem, {
+          classNames: {
+            selectItem,
+            selectItemSelected
+          },
+          wrapper: Item,
+          value: item.value,
+          label: item.label,
+          handleSelectionUpdate: handleSelectionUpdateInner,
+          isSelected: buttonLabel === item.label,
+          forwardedRef: buttonLabel === item.label ? setFirstItemRef : null
+        }, item.value))
+      })
+    }), isOpen && /*#__PURE__*/_jsx("button", {
+      className: classes.overlay,
+      onClick: handleInteractionOutside,
+      onTouchMove: handleInteractionOutside,
+      type: "button",
+      "aria-hidden": true
+    })]
+  });
+};
 SelectBox.defaultProps = {
   className: '',
   classNames: {},
@@ -180,4 +160,4 @@ SelectBox.defaultProps = {
   initialValue: null,
   testId: null
 };
-export default SelectBox;
+export default /*#__PURE__*/memo(SelectBox);

package/components/SurroundPortals/index.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export interface SurroundPortalsProps {
+    /**
+     * The name of the main portal.
+     * The additional portals will be named `${portalName}.before` and `${portalName}.after`.
+     */
+    portalName: string;
+    /**
+     * Optional props to be passed to all three portals.
+     */
+    portalProps?: Record<string, unknown>;
+    children?: React.ReactNode;
+}
+/**
+ * The SurroundPortals component renders three Portal components. The main portal is wrapped around
+ * its children, the two additional portals are rendered before and after the main portal.
+ * The names of the additional portals are automatically created from the name of the main portal
+ * with a ".before" and ".after" suffix.
+ *
+ * @returns The SurroundPortals component.
+ */
+declare const SurroundPortals: ({ portalName, portalProps, children, }: SurroundPortalsProps) => import("react/jsx-runtime").JSX.Element;
+export default SurroundPortals;
+//# sourceMappingURL=index.d.ts.map

package/components/SurroundPortals/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/SurroundPortals/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;GAOG;AACH,QAAA,MAAM,eAAe,GAAI,wCAItB,oBAAoB,4CAQtB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/components/SurroundPortals/index.js

@@ -1,21 +1,15 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import Portal from "../Portal";
 import { AFTER, BEFORE } from "../../constants/Portals";
-
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * The SurroundPortals component renders three Portal component. The main portal is wrapped around
+ * The SurroundPortals component renders three Portal components. The main portal is wrapped around
  * its children, the two additional portals are rendered before and after the main portal.
  * The names of the additional portals are automatically created from the name of the main portal
  * with a ".before" and ".after" suffix.
  *
- * @param {Object} props The component props
- * @param {string} props.portalName Name for the main portal
- * @param {Object} props.portalProps Props that are assigned to the portals
- * @param {React.ReactNode} props.children Component children
- * @returns {JSX.Element}
+ * @returns The SurroundPortals component.
  */
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const SurroundPortals = ({
   portalName,
   portalProps,
@@ -33,8 +27,4 @@ const SurroundPortals = ({
     props: portalProps
   })]
 });
-SurroundPortals.defaultProps = {
-  children: null,
-  portalProps: null
-};
 export default SurroundPortals;

package/components/Swiper/components/SwiperItem/index.js

@@ -1,8 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import { SwiperSlide } from 'swiper/react';
-import { item } from "./styles";
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(() => ({
+  item: {
+    position: 'relative',
+    height: '100%'
+  }
+}));
 
 /**
  * @typedef {import('swiper/react').SwiperSlideProps} SwiperSlideProps
@@ -13,15 +19,18 @@ import { item } from "./styles";
  * @param {SwiperSlideProps} props The component props.
  * @returns {React.Node}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 function SwiperItem({
   children,
   className,
   ...slideProps
 }) {
+  const {
+    classes,
+    cx
+  } = useStyles();
   return /*#__PURE__*/_jsx(SwiperSlide, {
     ...slideProps,
-    className: classNames(item, className),
+    className: cx(classes.item, className),
     "data-test-id": "Slider",
     children: children
   });

package/components/Swiper/components/SwiperItem/spec.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
+import { CLASS_PREFIX } from '@shopgate/engage/styles/tss';
 import SwiperItem from '.';
 import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('react', () => ({
@@ -12,7 +13,7 @@ describe('<SwiperItem />', () => {
       children: /*#__PURE__*/_jsx("div", {})
     }));
     expect(wrapper).toMatchSnapshot();
-    expect(wrapper.html()).toEqual('<div class="swiper-slide css-10a4qrv" data-test-id="Slider"><div></div></div>');
+    expect(wrapper.html()).toMatch(new RegExp(`^<div class="swiper-slide ${CLASS_PREFIX}-[^"]+" data-test-id="Slider"><div></div></div>$`));
   });
   it('should add custom className', () => {
     const wrapper = shallow(/*#__PURE__*/_jsx(SwiperItem, {
@@ -20,6 +21,6 @@ describe('<SwiperItem />', () => {
       children: /*#__PURE__*/_jsx("div", {})
     }));
     expect(wrapper).toMatchSnapshot();
-    expect(wrapper.html()).toEqual('<div class="swiper-slide css-10a4qrv test" data-test-id="Slider"><div></div></div>');
+    expect(wrapper.html()).toMatch(new RegExp(`^<div class="swiper-slide ${CLASS_PREFIX}-[^"]+ test" data-test-id="Slider"><div></div></div>$`));
   });
 });

package/components/Swiper/index.js

@@ -1,6 +1,5 @@
 import React, { useMemo, useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import cls from 'classnames';
 import { A11y, Autoplay, FreeMode, Navigation, Pagination, Zoom } from 'swiper/modules';
 import { Swiper as OriginalSwiper } from 'swiper/react';
 import 'swiper/css';
@@ -9,8 +8,74 @@ import 'swiper/css/pagination';
 import 'swiper/css/navigation';
 import 'swiper/css/zoom';
 import { useReduceMotion } from '@shopgate/engage/a11y/hooks';
+import { makeStyles } from '@shopgate/engage/styles';
+import { themeColors } from '@shopgate/pwa-common/helpers/config';
 import SwiperItem from "./components/SwiperItem";
-import { container, innerContainer, zoomFix, buttonNext, buttonPrev } from "./styles";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(() => ({
+  container: {
+    position: 'relative',
+    maxHeight: '100%'
+  },
+  innerContainer: {
+    overflow: 'hidden',
+    '--swiper-navigation-color': themeColors.gray,
+    '& .swiper-wrapper': {
+      alignItems: 'stretch'
+    },
+    '& .swiper-slide': {
+      height: 'auto'
+    },
+    '& .swiper-pagination': {
+      '& .swiper-pagination-bullet': {
+        background: themeColors.gray,
+        opacity: '.5',
+        margin: '0 4px',
+        transition: 'opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1)',
+        border: `1px solid ${themeColors.dark}`
+      },
+      '& .swiper-pagination-bullet-active.swiper-pagination-bullet-active-main': {
+        opacity: 1
+      }
+    },
+    '& .swiper-pagination-fraction': {
+      top: 'var(--swiper-pagination-fraction-top-offset, 4px)',
+      left: 'auto',
+      right: 0,
+      bottom: 'auto',
+      fontSize: 12,
+      background: themeColors.background,
+      borderRadius: '50px',
+      width: 'fit-content',
+      padding: '4px 8px',
+      margin: '4px 16px',
+      transition: 'opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1)'
+    },
+    '& .swiper-pagination-progressbar': {
+      background: themeColors.shade7,
+      '& .swiper-pagination-progressbar-fill': {
+        background: themeColors.dark
+      }
+    }
+  },
+  zoomFix: {
+    '& .swiper-slide': {
+      overflow: 'hidden'
+    }
+  },
+  buttonNext: {
+    backgroundImage: "url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23808080'%2F%3E%3C%2Fsvg%3E\") !important",
+    '&:after': {
+      color: 'transparent'
+    }
+  },
+  buttonPrev: {
+    backgroundImage: "url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23808080'%2F%3E%3C%2Fsvg%3E\") !important",
+    '&:after': {
+      color: 'transparent'
+    }
+  }
+}));
 
 /**
  * @typedef {import('swiper/react').SwiperProps} SwiperCmpProps
@@ -25,7 +90,6 @@ import { container, innerContainer, zoomFix, buttonNext, buttonPrev } from "./st
  * @param {SwiperClass} swiper Swiper instance
  * @param {boolean} loop Whether the loop mode should be enabled or not.
  */
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const handleLoopPropUpdate = (swiper, loop) => {
   const realIndex = swiper?.realIndex || 0;
 
@@ -67,6 +131,10 @@ const Swiper = ({
   paginationType: paginationTypeProp,
   ...swiperProps
 }) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   const useFraction = maxIndicators && maxIndicators < children.length;
   const paginationType = useFraction ? 'fraction' : 'bullets';
   const showPagination = indicators && children.length > 1;
@@ -81,15 +149,15 @@ const Swiper = ({
     if (hasControls) {
       nav = {
         // Important to use dot notation (swiper uses it as selector internally)
-        nextEl: `.swiper-button-next.${buttonNext}`,
-        prevEl: `.swiper-button-prev.${buttonPrev}`
+        nextEl: `.swiper-button-next.${classes.buttonNext}`,
+        prevEl: `.swiper-button-prev.${classes.buttonPrev}`
       };
     }
     if (typeof controls === 'object') {
       nav = controls;
     }
     return nav;
-  }, [controls, hasControls]);
+  }, [controls, hasControls, classes.buttonNext, classes.buttonPrev]);
   const handleSlideChange = useCallback(swiper => {
     if (typeof onSlideChange === 'function') {
       onSlideChange(swiper.realIndex, swiper);
@@ -101,8 +169,8 @@ const Swiper = ({
    */
   const internalProps = useMemo(() => ({
     modules: [A11y, Autoplay, FreeMode, Navigation, Pagination, Zoom].concat(Array.isArray(additionalModules) ? additionalModules : []),
-    className: cls(innerContainer, classNames.container, {
-      [zoomFix]: swiperProps?.zoom
+    className: cx(classes.innerContainer, classNames.container, {
+      [classes.zoomFix]: swiperProps?.zoom
     }),
     autoplay: autoPlay ? {
       delay: interval
@@ -122,7 +190,7 @@ const Swiper = ({
     allowSlidePrev: !disabled,
     allowSlideNext: !disabled,
     onSlideChange: handleSlideChange
-  }), [additionalModules, classNames.container, classNames.bulletClass, classNames.bulletActiveClass, swiperProps, autoPlay, interval, navigation, showPagination, paginationTypeProp, paginationType, indicators, children.length, disabled, handleSlideChange]);
+  }), [additionalModules, classNames.container, classNames.bulletClass, classNames.bulletActiveClass, classes.innerContainer, classes.zoomFix, swiperProps, autoPlay, interval, navigation, showPagination, paginationTypeProp, paginationType, indicators, children.length, disabled, handleSlideChange, cx]);
   useEffect(() => {
     if (!internalProps.autoplay && !swiperProps.autoplay) {
       if (swiperRef.current?.swiper?.autoplay) {
@@ -187,7 +255,7 @@ const Swiper = ({
     }
   }, [delay, loopProp, onBreakpoint]);
   return /*#__PURE__*/_jsx("div", {
-    className: cls(container, className, 'common__swiper'),
+    className: cx(classes.container, className, 'common__swiper'),
     "aria-hidden": ariaHidden,
     children: /*#__PURE__*/_jsxs(OriginalSwiper, {
       "aria-live": "off",
@@ -201,9 +269,9 @@ const Swiper = ({
       ref: swiperRef,
       children: [children, hasControls && /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx("div", {
-          className: `swiper-button-next ${buttonNext}`
+          className: cx('swiper-button-next', classes.buttonNext)
         }), /*#__PURE__*/_jsx("div", {
-          className: `swiper-button-prev ${buttonPrev}`
+          className: cx('swiper-button-prev', classes.buttonPrev)
         })]
       })]
     })