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

package/components/Select/index.js

@@ -1,15 +1,27 @@
-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 styles from "./style";
+import { makeStyles } from '@shopgate/engage/styles';
 import SelectItem from "./components/Item";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_PLACEHOLDER_TEXT = 'Select ...';
+const useStyles = makeStyles()(() => ({
+  container: {
+    margin: 0,
+    padding: 0
+  },
+  selectHandle: {
+    float: 'right'
+  },
+  items: {
+    position: 'absolute',
+    width: '100%'
+  }
+}));
 
 /**
  * Finds an item in a list of items by value.
- * @param {Array} items - The list of items.
- * @param {*} value - The value to look for.
+ * @param {Array} items The list of items.
+ * @param {*} value The value to look for.
  * @returns {*} The found item or undefined.
  */
 const findItemByValue = (items, value) => items.filter(item => item.value === value).shift();
@@ -17,7 +29,7 @@ const findItemByValue = (items, value) => items.filter(item => item.value === va
 /**
  * Converts an item of any type (e.g. string or number)
  * to an object representation containing value and label properties.
- * @param {*} item - An item of any type.
+ * @param {*} item An item of any type.
  * @returns {Object} An object representation of the item.
  */
 const normalizeItem = item => ({
@@ -27,149 +39,101 @@ const normalizeItem = item => ({
 
 /**
  * The select component.
- * @param {Object} props - The component props.
- * @param {React.Children} props.children - Some content to display inside.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
  */
-let Select = /*#__PURE__*/function (_Component) {
-  /**
-   * The constructor.
-   * @param {Object} props - The component props.
-   */
-  function Select(props) {
-    var _this;
-    _this = _Component.call(this, props) || this;
-    /**
-     * Triggers the onChange callback if the selected value has changed.
-     * @param {Object} nextState - The next state.
-     */
-    _this.triggerChangeCallback = nextState => {
-      if (_this.state.selected && _this.state.selected.value === nextState.selected.value) {
-        return;
-      }
-      if (_this.props.onChange instanceof Function) {
-        _this.props.onChange(nextState.selected.value);
+const Select = ({
+  className,
+  items,
+  onChange,
+  placeholder,
+  value
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const domElement = useRef(null);
+  const [selected, setSelected] = useState(() => {
+    if (!value) {
+      return null;
+    }
+    return normalizeItem(findItemByValue(items, value));
+  });
+  const [isOpen, setIsOpen] = useState(false);
+  useEffect(() => {
+    if (!value) {
+      setSelected(null);
+      return;
+    }
+    const next = normalizeItem(findItemByValue(items, value));
+    setSelected(prev => {
+      if (!prev || prev.value !== next?.value) {
+        return next;
       }
-    };
-    /**
-     * Handles any interaction the user does outside of the component.
-     * In this case the select gets closed.
-     * @param {Event} event - The event of the user interaction (e.g. TouchEvent).
-     */
-    _this.handleInteractionOutside = event => {
-      if (!_this.domElement.contains(event.target)) {
-        _this.setState({
-          isOpen: false
-        });
+      return prev;
+    });
+  }, [value, items]);
+  useEffect(() => {
+    // eslint-disable-next-line require-jsdoc
+    const handleInteractionOutside = event => {
+      if (domElement.current && !domElement.current.contains(event.target)) {
+        setIsOpen(false);
       }
     };
-    /**
-     * Gets called when a new item is selected
-     * @param {*} value - The selected value.
-     * @param {string} label - The selected label.
-     */
-    _this.handleItemSelect = (value, label) => {
-      const stateUpdate = {
-        selected: {
-          label,
-          value
-        },
-        isOpen: false
-      };
-      _this.triggerChangeCallback(stateUpdate);
-      _this.setState(stateUpdate);
-    };
-    /**
-     * Toggles the open state of the component.
-     */
-    _this.toggleOpenState = () => {
-      _this.setState(({
-        isOpen
-      }) => ({
-        isOpen: !isOpen
-      }));
-    };
-    _this.state = {
-      selected: null,
-      isOpen: false
-    };
-    _this.domElement = null;
-    if (props.value) {
-      _this.state.selected = normalizeItem(findItemByValue(props.items, props.value));
+    document.addEventListener('touchstart', handleInteractionOutside);
+    return () => document.removeEventListener('touchstart', handleInteractionOutside);
+  }, []);
+  const triggerChangeCallback = useCallback(nextSelected => {
+    if (selected && selected.value === nextSelected.value) {
+      return;
     }
-    return _this;
-  }
-
-  /**
-   * Adds event listener when the component is mounted.
-   */
-  _inheritsLoose(Select, _Component);
-  var _proto = Select.prototype;
-  _proto.componentDidMount = function componentDidMount() {
-    document.addEventListener('touchstart', this.handleInteractionOutside);
-  }
-
-  /**
-   * Updates the selected item when the value prop changes.
-   * @param {Object} nextProps - The next props.
-   */;
-  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
-    if (!this.state.selected || nextProps.value !== this.state.selected.value) {
-      this.state.selected = normalizeItem(findItemByValue(nextProps.items, nextProps.value));
+    if (onChange instanceof Function) {
+      onChange(nextSelected.value);
     }
-  }
-
-  /**
-   * Removes event listener when the component will unmount.
-   */;
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    document.removeEventListener('touchstart', this.handleInteractionOutside);
-  };
-  /**
-   * Renders the component.
-   * @returns {JSX}
-   */
-  _proto.render = function render() {
-    const hasSelection = this.state.selected && this.state.selected.value !== undefined;
-    const selectedLabel = hasSelection ? this.state.selected.label : this.props.placeholder;
-    const items = this.state.isOpen ? /*#__PURE__*/_jsx("div", {
-      className: styles.items,
-      children: this.props.items.map(item => {
-        const normalizedItem = normalizeItem(item);
-        const selected = hasSelection && this.state.selected.value === normalizedItem.value;
-        return /*#__PURE__*/_jsx(SelectItem, {
-          value: normalizedItem.value,
-          label: normalizedItem.label,
-          selected: selected,
-          onSelect: this.handleItemSelect
-        }, normalizedItem.value);
-      })
-    }) : null;
-    return /*#__PURE__*/_jsxs("div", {
-      className: `${styles.container} ${this.props.className} common_select`,
-      ref: ref => {
-        this.domElement = ref;
-      },
-      children: [/*#__PURE__*/_jsxs("div", {
-        onTouchStart: this.toggleOpenState,
-        children: [/*#__PURE__*/_jsx("span", {
-          children: selectedLabel
-        }), /*#__PURE__*/_jsx("span", {
-          className: styles.selectHandle,
-          children: "\u25BE"
-        })]
-      }), items]
-    });
-  };
-  return Select;
-}(Component);
-/**
- * The component prop types.
- * @type {Object}
- */
-/**
- * The component default props.
- * @type {Object}
- */
+  }, [onChange, selected]);
+  const handleItemSelect = useCallback((itemValue, label) => {
+    const stateUpdate = {
+      label,
+      value: itemValue
+    };
+    triggerChangeCallback(stateUpdate);
+    setSelected(stateUpdate);
+    setIsOpen(false);
+  }, [triggerChangeCallback]);
+  const toggleOpenState = useCallback(() => {
+    setIsOpen(open => !open);
+  }, []);
+  const hasSelection = selected && selected.value !== undefined;
+  const selectedLabel = hasSelection ? selected.label : placeholder;
+  const itemsMarkup = isOpen ? /*#__PURE__*/_jsx("div", {
+    className: classes.items,
+    children: items.map(item => {
+      const normalizedItem = normalizeItem(item);
+      const itemSelected = hasSelection && selected.value === normalizedItem.value;
+      return /*#__PURE__*/_jsx(SelectItem, {
+        value: normalizedItem.value,
+        label: normalizedItem.label,
+        selected: itemSelected,
+        onSelect: handleItemSelect
+      }, normalizedItem.value);
+    })
+  }) : null;
+  return /*#__PURE__*/_jsxs("div", {
+    className: cx(classes.container, className, 'common_select'),
+    ref: domElement,
+    children: [/*#__PURE__*/_jsxs("div", {
+      onTouchStart: toggleOpenState,
+      role: "presentation",
+      children: [/*#__PURE__*/_jsx("span", {
+        children: selectedLabel
+      }), /*#__PURE__*/_jsx("span", {
+        className: classes.selectHandle,
+        children: "\u25BE"
+      })]
+    }), itemsMarkup]
+  });
+};
 Select.defaultProps = {
   className: '',
   items: [],
@@ -177,4 +141,4 @@ Select.defaultProps = {
   placeholder: DEFAULT_PLACEHOLDER_TEXT,
   value: null
 };
-export default Select;
+export default /*#__PURE__*/memo(Select);

package/components/Select/spec.js

@@ -1,22 +1,56 @@
 import React from 'react';
-import { shallow, mount } from 'enzyme';
+import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
 import Select from "./index";
 import SelectItem from "./components/Item";
+
+/**
+ * Returns whether the given Enzyme wrapper contains at least one node
+ * with a class name that ends with the provided suffix.
+ *
+ * This checks individual class tokens, so it works with elements that
+ * have multiple classes.
+ *
+ * @param {Object} wrapper Enzyme wrapper (mount or shallow result).
+ * @param {string} suffix Class name suffix to match, e.g. "-innerShadow".
+ * @returns {boolean} True if a matching node exists.
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
+export function containsClassWithEnding(wrapper, suffix) {
+  if (!wrapper || typeof wrapper.findWhere !== 'function' || !suffix) {
+    return false;
+  }
+  return wrapper.findWhere(node => {
+    const className = node.prop('className');
+    if (typeof className !== 'string') {
+      return false;
+    }
+    return className.split(/\s+/).some(cls => cls.endsWith(suffix));
+  }).length > 0;
+}
+
+/**
+ * Helper to simulate toggling the open state by touching the handle area.
+ * @param {Object} wrapper Enzyme wrapper.
+ */
+const toggleOpen = wrapper => {
+  wrapper.find('[role="presentation"]').simulate('touchstart');
+  wrapper.update();
+};
 describe('<Select />', () => {
   jest.useFakeTimers();
   it('opens and closes the item list', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(Select, {}));
-    let previousOpenState = wrapper.state('isOpen');
-    wrapper.instance().toggleOpenState();
-    expect(wrapper.state('isOpen')).toBe(!previousOpenState);
-    previousOpenState = wrapper.state('isOpen');
-    wrapper.instance().toggleOpenState();
-    expect(wrapper.state('isOpen')).toBe(!previousOpenState);
+    const wrapper = mount(/*#__PURE__*/_jsx(Select, {}));
+    expect(wrapper.find(SelectItem).length).toBe(0);
+    toggleOpen(wrapper);
+    // opened – still 0 items because no items prop
+    expect(containsClassWithEnding(wrapper, '-items')).toBe(true);
+    toggleOpen(wrapper);
+    expect(containsClassWithEnding(wrapper, '-items')).toBe(false);
   });
   it('renders without items', () => {
     const wrapper = mount(/*#__PURE__*/_jsx(Select, {}));
-    wrapper.instance().toggleOpenState();
+    toggleOpen(wrapper);
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find(SelectItem).length).toBe(0);
   });
@@ -33,8 +67,7 @@ describe('<Select />', () => {
     const wrapper = mount(/*#__PURE__*/_jsx(Select, {
       items: items
     }));
-    wrapper.instance().toggleOpenState();
-    wrapper.update();
+    toggleOpen(wrapper);
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find(SelectItem).length).toBe(items.length);
   });
@@ -48,8 +81,7 @@ describe('<Select />', () => {
     const wrapper = mount(/*#__PURE__*/_jsx(Select, {
       items: items
     }));
-    wrapper.instance().toggleOpenState();
-    wrapper.update();
+    toggleOpen(wrapper);
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find(SelectItem).length).toBe(items.length);
     let i = 0;
@@ -80,10 +112,11 @@ describe('<Select />', () => {
       items: items,
       onChange: callback
     }));
-    wrapper.instance().toggleOpenState();
-    wrapper.update();
+    toggleOpen(wrapper);
     expect(wrapper).toMatchSnapshot();
     const node = wrapper.find(SelectItem).at(selectionIndex);
-    node.prop('onSelect')(node.prop('value'), node.prop('label'));
+    act(() => {
+      node.prop('onSelect')(node.prop('value'), node.prop('label'));
+    });
   });
 });

package/components/SelectBox/components/Item/index.js

@@ -1,62 +1,60 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { Component } from 'react';
-import classNames from 'classnames';
+import React, { useCallback, memo } from 'react';
 import PropTypes from 'prop-types';
+import { makeStyles } from '@shopgate/engage/styles';
 import I18n from "../../../I18n";
-import { item } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(() => ({
+  item: {
+    cursor: 'pointer'
+  }
+}));
 
 /**
  * The SelectBoxItem component.
- * @param {Object} props The components props.
- * @returns {JSX}
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-let SelectBoxItem = /*#__PURE__*/function (_Component) {
-  function SelectBoxItem(...args) {
-    var _this;
-    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
-    /**
-     * Calls the handleSelectionUpdate prop and prevents further events.
-     */
-    _this.handleSelectionUpdate = () => {
-      _this.props.handleSelectionUpdate(_this.props.value);
-    };
-    return _this;
-  }
-  _inheritsLoose(SelectBoxItem, _Component);
-  var _proto = SelectBoxItem.prototype;
-  /**
-   * Renders the component
-   * @returns {JSX}
-   */
-  _proto.render = function render() {
-    const Wrapper = this.props.wrapper;
-    const {
-      selectItem,
-      selectItemSelected
-    } = this.props.classNames;
-    return /*#__PURE__*/_jsx("li", {
-      className: classNames(selectItem, item, {
-        [selectItemSelected]: this.props.isSelected
-      }),
-      onKeyUp: () => {},
-      onClick: this.handleSelectionUpdate,
-      "data-test-id": this.props.label,
-      role: "menuitem",
-      ref: this.props.forwardedRef,
-      tabIndex: this.props.isSelected ? '0' : '-1',
-      "aria-current": this.props.isSelected,
-      children: /*#__PURE__*/_jsx(Wrapper, {
-        children: /*#__PURE__*/_jsx(I18n.Text, {
-          string: this.props.label
-        })
+const SelectBoxItem = ({
+  handleSelectionUpdate,
+  isSelected,
+  label,
+  value,
+  wrapper: Wrapper,
+  classNames: classNamesProp,
+  forwardedRef
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const {
+    selectItem,
+    selectItemSelected
+  } = classNamesProp;
+  const onSelect = useCallback(() => {
+    handleSelectionUpdate(value);
+  }, [handleSelectionUpdate, value]);
+  return /*#__PURE__*/_jsx("li", {
+    className: cx(classes.item, {
+      [selectItemSelected]: isSelected,
+      selectItem
+    }),
+    onKeyUp: () => {},
+    onClick: onSelect,
+    "data-test-id": label,
+    role: "menuitem",
+    ref: forwardedRef,
+    tabIndex: isSelected ? '0' : '-1',
+    "aria-current": isSelected,
+    children: /*#__PURE__*/_jsx(Wrapper, {
+      children: /*#__PURE__*/_jsx(I18n.Text, {
+        string: label
       })
-    });
-  };
-  return SelectBoxItem;
-}(Component);
+    })
+  });
+};
 SelectBoxItem.defaultProps = {
   forwardedRef: null,
   classNames: {}
 };
-export default SelectBoxItem;
+export default /*#__PURE__*/memo(SelectBoxItem);