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

package/Form/RadioGroup/components/Item/index.js

@@ -1,66 +1,82 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import _camelCase from "lodash/camelCase";
-import React, { PureComponent } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import { I18n, CheckedIcon, UncheckedIcon } from '@shopgate/engage/components';
-import style from "./style";
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  container: {
+    display: 'flex',
+    marginLeft: -1
+  },
+  icon: {
+    width: 24,
+    height: 24,
+    flexShrink: 0
+  },
+  disabled: {
+    opacity: 0.25,
+    pointerEvents: 'none'
+  },
+  label: {
+    flex: 1,
+    fontSize: '1rem',
+    lineHeight: 1.5,
+    marginLeft: theme.spacing(1),
+    marginBottom: theme.spacing(1)
+  },
+  active: {
+    color: 'var(--color-primary)'
+  }
+}));
 
 /**
  * RadioItem component.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-let RadioItem = /*#__PURE__*/function (_PureComponent) {
-  function RadioItem() {
-    return _PureComponent.apply(this, arguments) || this;
-  }
-  _inheritsLoose(RadioItem, _PureComponent);
-  var _proto = RadioItem.prototype;
-  /**
-   * Renders the component.
-   * @returns {JSX.Element}
-   */
-  _proto.render = function render() {
-    const {
-      label: ItemLabel,
-      name,
-      onChange,
-      checked,
-      className,
-      attributes,
-      id
-    } = this.props;
-    const {
-      disabled
-    } = attributes || {};
-    return /*#__PURE__*/_jsxs("label", {
-      className: classNames(style.container, className, {
-        [style.disabled]: !!disabled
-      }, _camelCase(name), 'radioItem'),
-      htmlFor: id || name,
-      children: [checked && /*#__PURE__*/_jsx(CheckedIcon, {
-        className: classNames(style.active, style.icon, 'checkedIcon')
-      }), !checked && /*#__PURE__*/_jsx(UncheckedIcon, {
-        className: classNames(style.icon, 'uncheckedIcon')
-      }), /*#__PURE__*/_jsx("input", {
-        className: classNames('sr-only', 'input'),
-        checked: checked,
-        id: id || name,
-        type: "radio",
-        name: name,
-        onChange: onChange,
-        "aria-labelledby": `${id || name}-label`,
-        ...attributes
-      }), /*#__PURE__*/_jsx(I18n.Text, {
-        string: ItemLabel,
-        "aria-hidden": true,
-        id: `${id || name}-label`,
-        className: classNames(style.label, 'label')
-      })]
-    });
-  };
-  return RadioItem;
-}(PureComponent);
+const RadioItem = ({
+  label: ItemLabel,
+  name,
+  onChange,
+  checked,
+  className,
+  attributes,
+  id
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const {
+    disabled
+  } = attributes || {};
+  return /*#__PURE__*/_jsxs("label", {
+    className: cx(classes.container, className, {
+      [classes.disabled]: !!disabled
+    }, _camelCase(name), 'radioItem'),
+    htmlFor: id || name,
+    children: [checked && /*#__PURE__*/_jsx(CheckedIcon, {
+      className: cx(classes.active, classes.icon, 'checkedIcon')
+    }), !checked && /*#__PURE__*/_jsx(UncheckedIcon, {
+      className: cx(classes.icon, 'uncheckedIcon')
+    }), /*#__PURE__*/_jsx("input", {
+      className: cx('sr-only', 'input'),
+      checked: checked,
+      id: id || name,
+      type: "radio",
+      name: name,
+      onChange: onChange,
+      "aria-labelledby": `${id || name}-label`,
+      ...attributes
+    }), /*#__PURE__*/_jsx(I18n.Text, {
+      string: ItemLabel,
+      "aria-hidden": true,
+      id: `${id || name}-label`,
+      className: cx(classes.label, 'label')
+    })]
+  });
+};
 RadioItem.defaultProps = {
   attributes: null,
   id: null,

package/Form/RadioGroup/index.js

@@ -1,103 +1,92 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { Component, Children, cloneElement } from 'react';
+import React, { Children, cloneElement, useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import FormElement from '@shopgate/pwa-ui-shared/FormElement';
-import style from "./style";
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()((_t, {
+  direction
+}) => ({
+  container: {
+    display: 'flex',
+    flexDirection: direction
+  }
+}));
 
 /**
- * RadioGroup component.
+ * Radio group: clones children (radio items) with shared `name`, `checked`, and `onChange`.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-let RadioGroup = /*#__PURE__*/function (_Component) {
-  /**
-   * Initializes the component.
-   * @param {Object} props The components props.
-   */
-  function RadioGroup(props) {
-    var _this;
-    _this = _Component.call(this, props) || this;
-    /**
-     * @param {string} event click from radio element
-     */
-    _this.handleChange = ({
-      target: {
-        name
-      }
-    }) => {
-      if (_this.props.disabled) {
-        return;
-      }
-      if (!_this.props.isControlled) {
-        _this.setState({
-          value: name
-        });
-      }
-      _this.props.onChange(name);
-    };
-    _this.state = {
-      value: props.value
-    };
-    return _this;
-  }
+const RadioGroup = ({
+  name,
+  children,
+  className,
+  direction,
+  disabled,
+  errorText,
+  isControlled,
+  label,
+  onChange,
+  showErrorText,
+  translateErrorText,
+  value: valueProp
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles({
+    direction
+  });
+  const [selectedValue, setSelectedValue] = useState(valueProp);
+  useEffect(() => {
+    if (isControlled) {
+      setSelectedValue(valueProp);
+    }
+  }, [isControlled, valueProp]);
 
   /**
-   * @param {Object} nextProps props
+   * @param {{ target: { name: string } }} event Change event from a radio input.
    */
-  _inheritsLoose(RadioGroup, _Component);
-  var _proto = RadioGroup.prototype;
-  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.props.isControlled && this.state.value !== nextProps.value) {
-      this.setState({
-        value: nextProps.value
-      });
+  const handleItemChange = useCallback(({
+    target: {
+      name: itemName
     }
-  };
-  /**
-   * Renders the component.
-   * @returns {JSX}
-   */
-  _proto.render = function render() {
-    const {
-      children,
-      className,
-      label,
-      errorText,
-      direction,
-      name,
-      translateErrorText,
-      disabled,
-      showErrorText
-    } = this.props;
-    return /*#__PURE__*/_jsx(FormElement, {
-      className: classNames(className, 'radioGroup', 'ui-shared__form__radio-group', {
-        disabled
-      }),
-      label: label,
-      labelStatic: true,
-      errorText: errorText,
-      translateErrorText: translateErrorText,
-      showErrorText: showErrorText,
-      htmlFor: "none",
-      hasUnderline: false,
-      hasValue: true,
-      children: /*#__PURE__*/_jsx("div", {
-        className: classNames(style.container(direction), 'radioGroup'),
-        children: Children.map(children, child => {
-          if (!child) {
-            return null;
-          }
-          return /*#__PURE__*/cloneElement(child, {
-            key: `${name}_${child.props.name}`,
-            checked: this.state.value === child.props.name,
-            onChange: this.handleChange
-          });
-        })
+  }) => {
+    if (disabled) {
+      return;
+    }
+    if (!isControlled) {
+      setSelectedValue(itemName);
+    }
+    onChange(itemName);
+  }, [disabled, isControlled, onChange]);
+  return /*#__PURE__*/_jsx(FormElement, {
+    className: cx(className, 'radioGroup', 'ui-shared__form__radio-group', {
+      disabled
+    }),
+    label: label,
+    labelStatic: true,
+    errorText: errorText,
+    translateErrorText: translateErrorText,
+    showErrorText: showErrorText,
+    htmlFor: "none",
+    hasUnderline: false,
+    hasValue: true,
+    children: /*#__PURE__*/_jsx("div", {
+      className: cx(classes.container, 'radioGroup'),
+      children: Children.map(children, child => {
+        if (!child) {
+          return null;
+        }
+        return /*#__PURE__*/cloneElement(child, {
+          key: `${name}_${child.props.name}`,
+          checked: selectedValue === child.props.name,
+          onChange: handleItemChange
+        });
       })
-    });
-  };
-  return RadioGroup;
-}(Component);
+    })
+  });
+};
 RadioGroup.defaultProps = {
   onChange: () => {},
   children: null,

package/Form/Select/index.js

@@ -1,139 +1,118 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { Component } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import { makeStyles } from '@shopgate/engage/styles';
 import Chevron from "../../icons/ChevronIcon";
 import FormElement from "../../FormElement";
-import styles from "./style";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  select: {
+    appearance: 'none',
+    position: 'relative',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    padding: '0 20px 0 0',
+    width: '100%',
+    margin: '24px 0 0 0',
+    outline: 0,
+    fontSize: 16,
+    lineHeight: '19px',
+    zIndex: 10
+  },
+  chevron: {
+    position: 'absolute',
+    top: '50%',
+    right: 0,
+    transform: 'translateY(-50%) rotateZ(-90deg)',
+    fontSize: '1.3em !important',
+    marginTop: -3
+  }
+});
 
 /**
- * A component that provides a styled select for user input in material design.
+ * Styled select for material-style forms (native select + chevron).
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-let Select = /*#__PURE__*/function (_Component) {
-  /**
-   * Creates a new text field component.
-   * @param {Object} props The component properties.
-   */
-  function Select(props) {
-    var _this;
-    _this = _Component.call(this, props) || this;
-    /**
-     * @param {string} value The entered text.
-     */
-    _this.handleChange = ({
-      target
-    }) => {
-      const {
-        multiple
-      } = _this.props;
-      let {
-        value
-      } = target;
-      if (multiple) {
-        value = Array.from(target.selectedOptions, option => option.value);
-      }
-      if (!_this.props.isControlled) {
-        _this.setState({
-          value
-        });
-      }
-      _this.props.onChange(value);
-    };
-    /**
-     * @param {boolean} isFocused focused
-     */
-    _this.handleFocusChange = isFocused => {
-      _this.setState({
-        isFocused
-      });
-    };
-    _this.state = {
-      value: props.value,
-      isFocused: false
-    };
-    return _this;
-  }
-
-  /**
-   * Corrects the selected value to the first option when the initial value is not located within
-   * the options.
-   */
-  _inheritsLoose(Select, _Component);
-  var _proto = Select.prototype;
-  _proto.componentDidMount = function componentDidMount() {
-    const {
-      multiple,
-      options
-    } = this.props;
-    const {
-      value
-    } = this.state;
-    if (!multiple && options?.[value] === undefined) {
-      const fallback = Object.entries(options)?.[0]?.[0];
-      if (fallback !== undefined) {
-        this.handleChange({
-          target: {
-            value: fallback
-          }
-        });
-      }
+const Select = ({
+  name,
+  options,
+  translateErrorText,
+  disabled,
+  multiple,
+  size,
+  showErrorText,
+  className,
+  placeholder,
+  label,
+  errorText,
+  required,
+  isControlled,
+  onChange,
+  value: valueProp,
+  'aria-invalid': ariaInvalid,
+  'aria-describedby': ariaDescribedBy
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const [value, setValue] = useState(valueProp);
+  const [isFocused, setIsFocused] = useState(false);
+  useEffect(() => {
+    setValue(valueProp);
+  }, [valueProp]);
+  useEffect(() => {
+    if (multiple || options?.[valueProp] !== undefined) {
+      return;
     }
-  }
-
-  /**
-   * Update state with new props.
-   * @param {Object} nextProps The new props.
-   */;
-  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({
-      value: nextProps.value
-    });
-  };
-  /**
-   * @return {JSX.Element}
-   */
-  _proto.render = function render() {
-    const {
-      name,
-      options,
-      translateErrorText,
-      disabled,
-      multiple,
-      size,
-      showErrorText,
-      className,
-      placeholder,
-      label,
-      errorText,
-      required,
-      'aria-invalid': ariaInvalid,
-      'aria-describedby': ariaDescribedBy
-    } = this.props;
-    const {
-      value,
-      isFocused
-    } = this.state;
-    return /*#__PURE__*/_jsxs(FormElement, {
-      className: `${className} ui-shared__form__select`,
-      placeholder: placeholder,
-      htmlFor: name,
-      label: label,
-      errorText: errorText,
-      translateErrorText: translateErrorText,
-      isFocused: isFocused,
-      hasValue: !!value || !!options[''],
-      hasPlaceholder: !disabled || value !== '',
-      disabled: disabled,
-      showErrorText: showErrorText,
+    const fallback = Object.entries(options)?.[0]?.[0];
+    if (fallback === undefined) {
+      return;
+    }
+    if (!isControlled) {
+      setValue(fallback);
+    }
+    onChange(fallback);
+    // Intentionally mount-only (same as legacy componentDidMount).
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const handleChange = useCallback(({
+    target
+  }) => {
+    let next = target.value;
+    if (multiple) {
+      next = Array.from(target.selectedOptions, option => option.value);
+    }
+    if (!isControlled) {
+      setValue(next);
+    }
+    onChange(next);
+  }, [isControlled, multiple, onChange]);
+  const handleFocusChange = useCallback(focused => {
+    setIsFocused(focused);
+  }, []);
+  return /*#__PURE__*/_jsx(FormElement, {
+    className: cx(className, 'ui-shared__form__select'),
+    placeholder: placeholder,
+    htmlFor: name,
+    label: label,
+    errorText: errorText,
+    translateErrorText: translateErrorText,
+    isFocused: isFocused,
+    hasValue: !!value || !!options[''],
+    hasPlaceholder: !disabled || value !== '',
+    disabled: disabled,
+    showErrorText: showErrorText,
+    children: /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("select", {
         id: name,
         name: name,
-        onChange: this.handleChange,
-        onFocus: () => this.handleFocusChange(true),
-        onBlur: () => this.handleFocusChange(false),
+        onChange: handleChange,
+        onFocus: () => handleFocusChange(true),
+        onBlur: () => handleFocusChange(false),
         value: value,
-        className: classNames(styles.select, 'select'),
+        className: cx(classes.select, 'select'),
         disabled: disabled,
         required: required,
         "aria-invalid": ariaInvalid,
@@ -148,12 +127,11 @@ let Select = /*#__PURE__*/function (_Component) {
           children: options[key]
         }, `${name}_${key}`))
       }), /*#__PURE__*/_jsx(Chevron, {
-        className: styles.chevron
+        className: classes.chevron
       })]
-    });
-  };
-  return Select;
-}(Component);
+    })
+  });
+};
 Select.defaultProps = {
   'aria-invalid': false,
   'aria-describedby': null,

package/Form/SelectContextChoices/index.js

@@ -1,17 +1,37 @@
+import "core-js/modules/es.array.includes.js";
 import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import pick from 'lodash/pick';
-import { i18n } from '@shopgate/engage/core';
+import { i18n } from '@shopgate/engage/core/helpers';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles } from '@shopgate/engage/styles';
 import Chevron from "../../icons/ChevronIcon";
 import InfoField from "../InfoField";
 import ContextMenu from "../../ContextMenu";
-import styles from "./style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  chevron: {
+    position: 'absolute',
+    top: '50%',
+    right: 0,
+    transform: 'translateY(-50%) rotateZ(-90deg)',
+    fontSize: '1.3em !important',
+    marginTop: -3
+  },
+  toggle: {
+    fontSize: '1rem',
+    paddingRight: '2rem'
+  },
+  itemSelected: {
+    backgroundColor: themeConfig.colors.shade8,
+    fontWeight: 500
+  }
+});
 
 /**
- * @param {Object} props .
+ * @param {Object} props Props.
  * @returns {JSX}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SelectContextChoices = ({
   options,
   onChange,
@@ -22,6 +42,9 @@ const SelectContextChoices = ({
   errorText,
   showErrorText
 }) => {
+  const {
+    classes
+  } = useStyles();
   const [opened, setOpened] = useState(false);
   const onMenuChange = useCallback(({
     active
@@ -32,7 +55,6 @@ const SelectContextChoices = ({
     if (key === '') {
       onChange([]);
     } else if (value.includes(key)) {
-      // Eliminate value
       onChange(value.filter(v => v !== key));
     } else {
       onChange([].concat(value, [key]));
@@ -47,14 +69,14 @@ const SelectContextChoices = ({
     showErrorText: showErrorText,
     hasValue: true,
     rightElement: /*#__PURE__*/_jsx(Chevron, {
-      className: styles.chevron
+      className: classes.chevron
     }),
     children: [/*#__PURE__*/_jsxs("div", {
       role: "button",
       onClick: () => setOpened(true),
       "aria-hidden": true,
       tabIndex: "0",
-      className: styles.toggle,
+      className: classes.toggle,
       children: [!hasValue && (placeholder || i18n.text('common.please_choose')), hasValue && values.join(', ')]
     }), /*#__PURE__*/_jsx(ContextMenu, {
       isOpened: opened,
@@ -64,7 +86,7 @@ const SelectContextChoices = ({
       children: Object.keys(options).map(key => /*#__PURE__*/_jsx(ContextMenu.Item, {
         autoClose: false,
         onClick: () => onItemClick(key),
-        className: hasValue && value.includes(key) ? styles.itemSelected : '',
+        className: hasValue && value.includes(key) ? classes.itemSelected : '',
         children: options[key]
       }, key))
     })]