@shopgate/engage 7.30.0-alpha.7 → 7.30.0-alpha.8

package/components/PickerUtilize/index.js

@@ -1,17 +1,96 @@
-var _excluded=["hasButton","sheetProps"];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 _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}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);}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{SheetList,Picker as BasePicker,Sheet}from'@shopgate/engage/components';import{ViewContext}from'@shopgate/engage/components/View';import Button from"./components/Button";import styles from"./style";/**
+import _extends from "@babel/runtime/helpers/extends";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { SheetList, Picker as BasePicker, Sheet } from '@shopgate/engage/components';
+import { ViewContext } from '@shopgate/engage/components/View';
+import Button from "./components/Button";
+import styles from "./style";
+
+/**
  * The template version of the Picker component.
  * @param {Object} props The same component props as in the base Picker component.
- */var PickerUtilize=/*#__PURE__*/function(_Component){/**
+ */
+class PickerUtilize extends Component {
+  /**
    * Constructor
    * @param {Object} props Props of the component
-   */function PickerUtilize(props){var _this2;_classCallCheck(this,PickerUtilize);_this2=_callSuper(this,PickerUtilize,[props]);/**
-   * Focuses the picker button for screen readers.
-   */_defineProperty(_this2,"onDidOpen",function(){_this2.props.setViewAriaHidden(true);if(_this2.firstSelectableItemRef.current){_this2.firstSelectableItemRef.current.focus();}});/**
-   * Focuses the first selectable item for screen readers.
-   */_defineProperty(_this2,"onClose",function(){_this2.props.setViewAriaHidden(false);if(_this2.pickerRef.current){_this2.pickerRef.current.focus();}});_this2.modalComponent=function(sheetProps){return React.createElement(Sheet,_extends({},_extends({},_this2.props.sheetProps,{},sheetProps),{title:_this2.props.label,onDidOpen:_this2.onDidOpen}));};_this2.pickerRef=React.createRef();_this2.firstSelectableItemRef=React.createRef();_this2.listComponent=function(prps){return React.createElement(SheetList,null,prps.items.map(function(item,index){return React.createElement(SheetList.Item,{key:item.value,title:item.label,onClick:function onClick(){setTimeout(function(){prps.onSelect(item.value);prps.onClose();},_this2.props.clickDelay);},isDisabled:item.disabled,isSelected:index===prps.selectedIndex,rightComponent:item.rightComponent,testId:item.label,ref:index===prps.selectedIndex?_this2.firstSelectableItemRef:null});}));};return _this2;}_inherits(PickerUtilize,_Component);return _createClass(PickerUtilize,[{key:"render",value:/**
+   */
+  constructor(props) {
+    super(props);
+    /**
+     * Focuses the picker button for screen readers.
+     */
+    this.onDidOpen = () => {
+      this.props.setViewAriaHidden(true);
+      if (this.firstSelectableItemRef.current) {
+        this.firstSelectableItemRef.current.focus();
+      }
+    };
+    /**
+     * Focuses the first selectable item for screen readers.
+     */
+    this.onClose = () => {
+      this.props.setViewAriaHidden(false);
+      if (this.pickerRef.current) {
+        this.pickerRef.current.focus();
+      }
+    };
+    this.modalComponent = sheetProps => /*#__PURE__*/React.createElement(Sheet, _extends({}, this.props.sheetProps, sheetProps, {
+      title: this.props.label,
+      onDidOpen: this.onDidOpen
+    }));
+    this.pickerRef = /*#__PURE__*/React.createRef();
+    this.firstSelectableItemRef = /*#__PURE__*/React.createRef();
+    this.listComponent = prps => /*#__PURE__*/React.createElement(SheetList, null, prps.items.map((item, index) => /*#__PURE__*/React.createElement(SheetList.Item, {
+      key: item.value,
+      title: item.label,
+      onClick: () => {
+        setTimeout(() => {
+          prps.onSelect(item.value);
+          prps.onClose();
+        }, this.props.clickDelay);
+      },
+      isDisabled: item.disabled,
+      isSelected: index === prps.selectedIndex,
+      rightComponent: item.rightComponent,
+      testId: item.label,
+      ref: index === prps.selectedIndex ? this.firstSelectableItemRef : null
+    })));
+  }
+  /**
    * Render
    * @returns {JSX}
-   */function render(){var _this$props=this.props,hasButton=_this$props.hasButton,ignore=_this$props.sheetProps,restProps=_objectWithoutProperties(_this$props,_excluded);return React.createElement(BasePicker,_extends({},restProps,{className:"".concat(hasButton?styles:''," engage__picker-utilize"),modalComponent:this.modalComponent,buttonProps:this.props.buttonProps,buttonComponent:this.props.buttonComponent||Button,listComponent:this.listComponent,onClose:this.onClose,ref:this.pickerRef}));}}]);}(Component);_defineProperty(PickerUtilize,"defaultProps",{buttonComponent:null,buttonProps:{},/**
-     * Time in ms that delays picker interaction in order
-     * to let animations complete first.
-     */clickDelay:150,hasButton:true,sheetProps:{}});export default(function(props){return React.createElement(ViewContext.Consumer,null,function(_ref){var setAriaHidden=_ref.setAriaHidden;return React.createElement(PickerUtilize,_extends({},props,{setViewAriaHidden:setAriaHidden}));});});
+   */
+  render() {
+    const {
+      hasButton,
+      sheetProps: ignore,
+      ...restProps
+    } = this.props;
+    return /*#__PURE__*/React.createElement(BasePicker, _extends({}, restProps, {
+      className: `${hasButton ? styles : ''} engage__picker-utilize`,
+      modalComponent: this.modalComponent,
+      buttonProps: this.props.buttonProps,
+      buttonComponent: this.props.buttonComponent || Button,
+      listComponent: this.listComponent,
+      onClose: this.onClose,
+      ref: this.pickerRef
+    }));
+  }
+}
+PickerUtilize.defaultProps = {
+  buttonComponent: null,
+  buttonProps: {},
+  /**
+   * Time in ms that delays picker interaction in order
+   * to let animations complete first.
+   */
+  clickDelay: 150,
+  hasButton: true,
+  sheetProps: {}
+};
+export default props => /*#__PURE__*/React.createElement(ViewContext.Consumer, null, ({
+  setAriaHidden
+}) => /*#__PURE__*/React.createElement(PickerUtilize, _extends({}, props, {
+  setViewAriaHidden: setAriaHidden
+})));

package/components/PickerUtilize/spec.js

@@ -1,2 +1,32 @@
-import React from'react';import{mount}from'enzyme';import Picker from"./index";jest.mock('@shopgate/engage/components/View');jest.mock('@shopgate/engage/components',function(){// eslint-disable-next-line require-jsdoc
-function SheetList(_ref){var children=_ref.children;return children;}SheetList.Item=function Item(){return null;};return{SheetList:SheetList,Sheet:function Sheet(_ref2){var children=_ref2.children;return children;},Picker:jest.requireActual('@shopgate/engage/components/Picker')["default"],ConnectedReactPortal:jest.requireActual('@shopgate/engage/components/ConnectedReactPortal/__mocks__')["default"]};});describe('<Picker />',function(){it('should render the picker',function(){var label='Picker label';var wrapper=mount(React.createElement(Picker,{label:label}));expect(wrapper).toMatchSnapshot();});});
+import React from 'react';
+import { mount } from 'enzyme';
+import Picker from "./index";
+jest.mock('@shopgate/engage/components/View');
+jest.mock('@shopgate/engage/components', () => {
+  // eslint-disable-next-line require-jsdoc
+  function SheetList({
+    children
+  }) {
+    return children;
+  }
+  SheetList.Item = function Item() {
+    return null;
+  };
+  return {
+    SheetList,
+    Sheet: ({
+      children
+    }) => children,
+    Picker: jest.requireActual('@shopgate/engage/components/Picker').default,
+    ConnectedReactPortal: jest.requireActual('@shopgate/engage/components/ConnectedReactPortal/__mocks__').default
+  };
+});
+describe('<Picker />', () => {
+  it('should render the picker', () => {
+    const label = 'Picker label';
+    const wrapper = mount(/*#__PURE__*/React.createElement(Picker, {
+      label: label
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+});

package/components/PickerUtilize/style.js

@@ -1 +1,10 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables;export default css({display:'flex',marginBottom:variables.gap.small,minHeight:56}).toString();
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  variables
+} = themeConfig;
+export default css({
+  display: 'flex',
+  marginBottom: variables.gap.small,
+  minHeight: 56
+}).toString();

package/components/QuantityInput/QuantityInput.js

@@ -1,9 +1,123 @@
-var _excluded=["className","onChange","onFocus","onBlur","value","maxDecimals","unit","minValue","maxValue","onKeyDown"];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);}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 _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}import React,{useRef,useState,useCallback,useLayoutEffect,useEffect,forwardRef}from'react';import PropTypes from'prop-types';import noop from'lodash/noop';import{isIOs}from'@shopgate/pwa-core';import{parseFloatString,formatFloat}from"./helper";/**
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useRef, useState, useCallback, useLayoutEffect, useEffect, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import noop from 'lodash/noop';
+import { isIOs } from '@shopgate/pwa-core';
+import { parseFloatString, formatFloat } from "./helper";
+
+/**
  * A Quantity Input with unit support.
  * @returns {JSX}
- */var QuantityInput=forwardRef(function(_ref,outerInputRef){var className=_ref.className,onChange=_ref.onChange,customOnFocus=_ref.onFocus,customOnBlur=_ref.onBlur,value=_ref.value,maxDecimals=_ref.maxDecimals,unit=_ref.unit,minValue=_ref.minValue,maxValue=_ref.maxValue,onKeyDown=_ref.onKeyDown,inputProps=_objectWithoutProperties(_ref,_excluded);var inputRef=outerInputRef||useRef();var _useState=useState(formatFloat(value,maxDecimals)),_useState2=_slicedToArray(_useState,2),inputValue=_useState2[0],setInputValue=_useState2[1];var _useState3=useState(false),_useState4=_slicedToArray(_useState3,2),isFocused=_useState4[0],setIsFocused=_useState4[1];var onFocus=useCallback(function(event){customOnFocus(event);setIsFocused(true);},[customOnFocus]);var onBlur=useCallback(function(event){var newValue=parseFloatString(inputValue,maxDecimals);setIsFocused(false);// If invalid switch to old value.
-if(Number.isNaN(parseFloat(inputValue))){setInputValue(formatFloat(value,maxDecimals));return;}if(minValue&&newValue<minValue){newValue=minValue;}if(maxValue&&newValue>maxValue){newValue=maxValue;}setInputValue("".concat(newValue));if(newValue!==value){onChange(newValue);}customOnBlur(event,newValue);},[customOnBlur,inputValue,maxDecimals,maxValue,minValue,onChange,value]);var handleChange=useCallback(function(event){var newValue=event.target.value;setInputValue(newValue);},[]);var handleKeyDown=useCallback(function(event){if(event.key==='Enter'){// Prevents false positive validation error when enter key is pressed inside input
-event.preventDefault();if(inputRef.current){inputRef.current.blur();}}if(typeof onKeyDown==='function'){onKeyDown(event);}},[inputRef,onKeyDown]);// Select the current input value after focus.
-useLayoutEffect(function(){if(isFocused&&isIOs){inputRef.current.select();}},[inputRef,isFocused]);// Sync actual float value with displayed content.
-useEffect(function(){setInputValue(formatFloat(value,maxDecimals));},[maxDecimals,value]);// Stop the context menu from opening.
-useLayoutEffect(function(){inputRef.current.addEventListener('contextmenu',function(event){event.preventDefault();event.stopPropagation();return false;});},[inputRef]);var displayedValue=!isFocused&&unit?"".concat(inputValue," ").concat(unit):inputValue;return React.createElement("input",_extends({ref:inputRef},inputProps,{inputMode:maxDecimals>0?'decimal':'numeric'/* Pattern signals some browsers to use specialized keyboard (if inputmode not supported */,pattern:maxDecimals>0?'[0-9.,]*':'[0–9]*',onFocus:onFocus,onBlur:onBlur,className:className,value:displayedValue,onChange:handleChange,onKeyDown:handleKeyDown,onClick:function onClick(event){event.preventDefault();event.stopPropagation();if(inputRef.current){inputRef.current.focus();}}}));});QuantityInput.defaultProps={className:'',maxDecimals:2,unit:null,minValue:null,maxValue:null,onFocus:noop,onChange:noop,onBlur:noop,onKeyDown:noop};export default QuantityInput;
+ */
+const QuantityInput = /*#__PURE__*/forwardRef(({
+  className,
+  onChange,
+  onFocus: customOnFocus,
+  onBlur: customOnBlur,
+  value,
+  maxDecimals,
+  unit,
+  minValue,
+  maxValue,
+  onKeyDown,
+  ...inputProps
+}, outerInputRef) => {
+  const inputRef = outerInputRef || useRef();
+  const [inputValue, setInputValue] = useState(formatFloat(value, maxDecimals));
+  const [isFocused, setIsFocused] = useState(false);
+  const onFocus = useCallback(event => {
+    customOnFocus(event);
+    setIsFocused(true);
+  }, [customOnFocus]);
+  const onBlur = useCallback(event => {
+    let newValue = parseFloatString(inputValue, maxDecimals);
+    setIsFocused(false);
+
+    // If invalid switch to old value.
+    if (Number.isNaN(parseFloat(inputValue))) {
+      setInputValue(formatFloat(value, maxDecimals));
+      return;
+    }
+    if (minValue && newValue < minValue) {
+      newValue = minValue;
+    }
+    if (maxValue && newValue > maxValue) {
+      newValue = maxValue;
+    }
+    setInputValue(`${newValue}`);
+    if (newValue !== value) {
+      onChange(newValue);
+    }
+    customOnBlur(event, newValue);
+  }, [customOnBlur, inputValue, maxDecimals, maxValue, minValue, onChange, value]);
+  const handleChange = useCallback(event => {
+    const newValue = event.target.value;
+    setInputValue(newValue);
+  }, []);
+  const handleKeyDown = useCallback(event => {
+    if (event.key === 'Enter') {
+      // Prevents false positive validation error when enter key is pressed inside input
+      event.preventDefault();
+      if (inputRef.current) {
+        inputRef.current.blur();
+      }
+    }
+    if (typeof onKeyDown === 'function') {
+      onKeyDown(event);
+    }
+  }, [inputRef, onKeyDown]);
+
+  // Select the current input value after focus.
+  useLayoutEffect(() => {
+    if (isFocused && isIOs) {
+      inputRef.current.select();
+    }
+  }, [inputRef, isFocused]);
+
+  // Sync actual float value with displayed content.
+  useEffect(() => {
+    setInputValue(formatFloat(value, maxDecimals));
+  }, [maxDecimals, value]);
+
+  // Stop the context menu from opening.
+  useLayoutEffect(() => {
+    inputRef.current.addEventListener('contextmenu', event => {
+      event.preventDefault();
+      event.stopPropagation();
+      return false;
+    });
+  }, [inputRef]);
+  const displayedValue = !isFocused && unit ? `${inputValue} ${unit}` : inputValue;
+  return /*#__PURE__*/React.createElement("input", _extends({
+    ref: inputRef
+  }, inputProps, {
+    inputMode: maxDecimals > 0 ? 'decimal' : 'numeric'
+    /* Pattern signals some browsers to use specialized keyboard (if inputmode not supported */,
+    pattern: maxDecimals > 0 ? '[0-9.,]*' : '[0–9]*',
+    onFocus: onFocus,
+    onBlur: onBlur,
+    className: className,
+    value: displayedValue,
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    onClick: event => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (inputRef.current) {
+        inputRef.current.focus();
+      }
+    }
+  }));
+});
+QuantityInput.defaultProps = {
+  className: '',
+  maxDecimals: 2,
+  unit: null,
+  minValue: null,
+  maxValue: null,
+  onFocus: noop,
+  onChange: noop,
+  onBlur: noop,
+  onKeyDown: noop
+};
+export default QuantityInput;

package/components/QuantityInput/helper.js

@@ -1,19 +1,40 @@
-import{i18n}from'@shopgate/engage/core';/**
+import "core-js/modules/es.string.replace.js";
+import { i18n } from '@shopgate/engage/core';
+
+/**
  * Formats a float number to a string with limited decimals
  * and no grouping.
  * @param {number} value Value
  * @param {number} decimals Decimals
  * @param {string} locale Locale
  * @returns {string}
- */var formatFloatLocale=function formatFloatLocale(value,decimals){var locale=arguments.length>2&&arguments[2]!==undefined?arguments[2]:navigator.language;try{return value.toLocaleString(locale,{style:'decimal',useGrouping:false,minimumFractionDigits:decimals,maximumFractionDigits:decimals}).toString();}catch(err){return i18n.number(value,decimals);}};/**
+ */
+const formatFloatLocale = (value, decimals, locale = navigator.language) => {
+  try {
+    return value.toLocaleString(locale, {
+      style: 'decimal',
+      useGrouping: false,
+      minimumFractionDigits: decimals,
+      maximumFractionDigits: decimals
+    }).toString();
+  } catch (err) {
+    return i18n.number(value, decimals);
+  }
+};
+
+/**
  * Parses a float string to a float.
  * TODO: Needs to handle localized inputs like: 1,000,000.32 or 1.000.000,32
  * @param {string} value The string value.
  * @param {number} decimals The amount of decimals.
  * @returns {number}
- */export var parseFloatString=function parseFloatString(value,decimals){return+parseFloat(value.replace(',','.')).toFixed(decimals);};/**
+ */
+export const parseFloatString = (value, decimals) => +parseFloat(value.replace(',', '.')).toFixed(decimals);
+
+/**
  * Formats a float to a string.
  * @param {float} value The float value.
  * @param {number} decimals The amount of decimals.
  * @returns {string}
- */export var formatFloat=function formatFloat(value,decimals){return formatFloatLocale(value,decimals);};
+ */
+export const formatFloat = (value, decimals) => formatFloatLocale(value, decimals);

package/components/QuantityInput/index.js

@@ -1 +1 @@
-export{default}from"./QuantityInput";
+export { default } from "./QuantityInput";

package/components/QuantityLabel/QuantityLabel.js

@@ -1,4 +1,28 @@
-import React,{useMemo}from'react';import PropTypes from'prop-types';import{formatFloat}from"../QuantityInput/helper";/**
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { formatFloat } from "../QuantityInput/helper";
+
+/**
  * @param {Object} props The component props.
  * @returns {JSX}
- */var QuantityLabel=function QuantityLabel(_ref){var value=_ref.value,maxDecimals=_ref.maxDecimals,unit=_ref.unit,className=_ref.className;var output=useMemo(function(){var formatted=formatFloat(value,maxDecimals);return unit?"".concat(formatted," ").concat(unit):formatted;},[maxDecimals,unit,value]);return React.createElement("span",{className:className},output);};QuantityLabel.defaultProps={className:'',maxDecimals:2,unit:null};export default QuantityLabel;
+ */
+const QuantityLabel = ({
+  value,
+  maxDecimals,
+  unit,
+  className
+}) => {
+  const output = useMemo(() => {
+    const formatted = formatFloat(value, maxDecimals);
+    return unit ? `${formatted} ${unit}` : formatted;
+  }, [maxDecimals, unit, value]);
+  return /*#__PURE__*/React.createElement("span", {
+    className: className
+  }, output);
+};
+QuantityLabel.defaultProps = {
+  className: '',
+  maxDecimals: 2,
+  unit: null
+};
+export default QuantityLabel;

package/components/QuantityLabel/index.js

@@ -1 +1 @@
-export{default}from"./QuantityLabel";
+export { default } from "./QuantityLabel";

package/components/Radio/Radio.js

@@ -1,5 +1,118 @@
-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 React from'react';import PropTypes from'prop-types';import classNames from'classnames';import{css}from'glamor';import CheckedIcon from'@shopgate/pwa-ui-shared/icons/RadioCheckedIcon';import UncheckedIcon from'@shopgate/pwa-ui-shared/icons/RadioUncheckedIcon';import{Ripple}from'@shopgate/engage/components';import{useRadioGroup}from"../RadioGroup";var styles={root:css({display:'inline-flex',alignItems:'inherit',justifyContent:'inherit',position:'relative',borderRadius:'50%'}).toString(),input:css({top:0,left:0,margin:0,opacity:0,padding:0,position:'absolute',zIndex:1,width:'100%',height:'100%'}).toString(),radioContainer:css({display:'flex',position:'relative',width:24,height:24}).toString(),radio:css({height:'100%',width:'100%'}).toString(),radioChecked:css({color:'var(--color-primary)'}).toString(),radioDisabled:css({opacity:0.5,pointerEvents:'none'}).toString(),ripple:css({padding:12}).toString()};/**
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { css } from 'glamor';
+import CheckedIcon from '@shopgate/pwa-ui-shared/icons/RadioCheckedIcon';
+import UncheckedIcon from '@shopgate/pwa-ui-shared/icons/RadioUncheckedIcon';
+import { Ripple } from '@shopgate/engage/components';
+import { useRadioGroup } from "../RadioGroup";
+const styles = {
+  root: css({
+    display: 'inline-flex',
+    alignItems: 'inherit',
+    justifyContent: 'inherit',
+    position: 'relative',
+    borderRadius: '50%'
+  }).toString(),
+  input: css({
+    top: 0,
+    left: 0,
+    margin: 0,
+    opacity: 0,
+    padding: 0,
+    position: 'absolute',
+    zIndex: 1,
+    width: '100%',
+    height: '100%'
+  }).toString(),
+  radioContainer: css({
+    display: 'flex',
+    position: 'relative',
+    width: 24,
+    height: 24
+  }).toString(),
+  radio: css({
+    height: '100%',
+    width: '100%'
+  }).toString(),
+  radioChecked: css({
+    color: 'var(--color-primary)'
+  }).toString(),
+  radioDisabled: css({
+    opacity: 0.5,
+    pointerEvents: 'none'
+  }).toString(),
+  ripple: css({
+    padding: 12
+  }).toString()
+};
+
+/**
  * The Radio component
  * @param {Object} props The component props
  * @returns {JSX}
- */var Radio=function Radio(_ref){var classes=_ref.classes,nameProp=_ref.name,onChangeProp=_ref.onChange,checkedProp=_ref.checked,disabledProp=_ref.disabled,valueProp=_ref.value,attributes=_ref.attributes;var radioGroup=useRadioGroup();var name=nameProp;var checked=checkedProp;var onChange=onChangeProp;if(radioGroup){if(checked===null){checked=radioGroup.value===valueProp;}if(typeof radioGroup.name!=='undefined'){name=radioGroup.name;}if(typeof radioGroup.onChange!=='undefined'){onChange=radioGroup.onChange;}}return React.createElement("span",{className:classNames(styles.root,classes.root)},React.createElement(Ripple,{className:styles.ripple,color:"var(--color-primary)"},React.createElement("input",_extends({className:styles.input,type:"radio",name:name,value:valueProp,checked:checked,onChange:onChange,disabled:disabledProp,id:"".concat(name,"_").concat(valueProp)},attributes)),React.createElement("div",{className:classNames(styles.radioContainer,_defineProperty(_defineProperty({},styles.radioDisabled,disabledProp),classes.disabled,disabledProp))},checked&&React.createElement(CheckedIcon,{className:classNames(styles.radio,styles.radioChecked,classes.radioChecked,'checkedIcon')}),!checked&&React.createElement(UncheckedIcon,{className:classNames(styles.radio,classes.radioUnchecked,'uncheckedIcon')}))));};Radio.defaultProps={classes:{},checked:null,disabled:false,onChange:null,name:null,value:null,attributes:null};export default Radio;
+ */
+const Radio = ({
+  classes,
+  name: nameProp,
+  onChange: onChangeProp,
+  checked: checkedProp,
+  disabled: disabledProp,
+  value: valueProp,
+  attributes
+}) => {
+  const radioGroup = useRadioGroup();
+  let name = nameProp;
+  let checked = checkedProp;
+  let onChange = onChangeProp;
+  if (radioGroup) {
+    if (checked === null) {
+      checked = radioGroup.value === valueProp;
+    }
+    if (typeof radioGroup.name !== 'undefined') {
+      ({
+        name
+      } = radioGroup);
+    }
+    if (typeof radioGroup.onChange !== 'undefined') {
+      ({
+        onChange
+      } = radioGroup);
+    }
+  }
+  return /*#__PURE__*/React.createElement("span", {
+    className: classNames(styles.root, classes.root)
+  }, /*#__PURE__*/React.createElement(Ripple, {
+    className: styles.ripple,
+    color: "var(--color-primary)"
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    className: styles.input,
+    type: "radio",
+    name: name,
+    value: valueProp,
+    checked: checked,
+    onChange: onChange,
+    disabled: disabledProp,
+    id: `${name}_${valueProp}`
+  }, attributes)), /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.radioContainer, {
+      [styles.radioDisabled]: disabledProp,
+      [classes.disabled]: disabledProp
+    })
+  }, checked && /*#__PURE__*/React.createElement(CheckedIcon, {
+    className: classNames(styles.radio, styles.radioChecked, classes.radioChecked, 'checkedIcon')
+  }), !checked && /*#__PURE__*/React.createElement(UncheckedIcon, {
+    className: classNames(styles.radio, classes.radioUnchecked, 'uncheckedIcon')
+  }))));
+};
+Radio.defaultProps = {
+  classes: {},
+  checked: null,
+  disabled: false,
+  onChange: null,
+  name: null,
+  value: null,
+  attributes: null
+};
+export default Radio;

package/components/Radio/index.js

@@ -1 +1 @@
-export{default}from"./Radio";
+export { default } from "./Radio";

package/components/RadioCard/RadioCard.js

@@ -1,9 +1,110 @@
-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 from'react';import PropTypes from'prop-types';import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import classNames from'classnames';import Card from'@shopgate/pwa-ui-shared/Card';import{useRadioGroup}from"../RadioGroup";import Radio from"../Radio";var variables=themeConfig.variables;var styles={card:css({borderRadius:4,padding:'8px 8px 8px 4px',display:'flex',alignItems:'center'}).toString(),content:css({padding:"".concat(variables.gap.small,"px ").concat(variables.gap.small,"px ").concat(variables.gap.small,"px 0"),width:'100%'}).toString(),contentDisabled:css({opacity:0.5,pointerEvents:'none'}).toString(),radio:css({alignItems:'center'}).toString()};/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import classNames from 'classnames';
+import Card from '@shopgate/pwa-ui-shared/Card';
+import { useRadioGroup } from "../RadioGroup";
+import Radio from "../Radio";
+const {
+  variables
+} = themeConfig;
+const styles = {
+  card: css({
+    borderRadius: 4,
+    padding: '8px 8px 8px 4px',
+    display: 'flex',
+    alignItems: 'center'
+  }).toString(),
+  content: css({
+    padding: `${variables.gap.small}px ${variables.gap.small}px ${variables.gap.small}px 0`,
+    width: '100%'
+  }).toString(),
+  contentDisabled: css({
+    opacity: 0.5,
+    pointerEvents: 'none'
+  }).toString(),
+  radio: css({
+    alignItems: 'center'
+  }).toString()
+};
+
+/**
  * The default card component
  * @param {Object} props The component props
  * @returns {JSX}
- */var CardComponent=function CardComponent(_ref){var children=_ref.children,className=_ref.className;return React.createElement(Card,{className:classNames(styles.card,className)},children);};CardComponent.defaultProps={children:null,className:null};/**
+ */
+const CardComponent = ({
+  children,
+  className
+}) => /*#__PURE__*/React.createElement(Card, {
+  className: classNames(styles.card, className)
+}, children);
+CardComponent.defaultProps = {
+  children: null,
+  className: null
+};
+
+/**
  * The RadioCard component
  * @param {Object} props The component props
  * @returns {JSX}
- */var RadioCard=function RadioCard(_ref2){var children=_ref2.children,nameProp=_ref2.name,onChange=_ref2.onChange,checked=_ref2.checked,disabledProp=_ref2.disabled,value=_ref2.value,attributes=_ref2.attributes,classes=_ref2.classes,RenderCard=_ref2.renderCard;var radioGroup=useRadioGroup();var name=nameProp;var disabled=disabledProp;if(radioGroup){if(typeof radioGroup.name!=='undefined'){name=radioGroup.name;}if(typeof radioGroup.disabled!=='undefined'){disabled=radioGroup.disabled;}}return React.createElement(RenderCard,{className:classes.root},React.createElement(Radio,{name:name,value:value,onChange:onChange,disabled:disabled,checked:checked,attributes:attributes,classes:{root:styles.radio}}),React.createElement("label",{htmlFor:"".concat(name,"_").concat(value),className:classNames(styles.content,_defineProperty(_defineProperty({},styles.contentDisabled,disabled),classes.disabled,disabled))},children));};RadioCard.defaultProps={children:null,checked:null,classes:{},disabled:false,onChange:null,name:null,value:null,attributes:null,renderCard:CardComponent};export default RadioCard;
+ */
+const RadioCard = ({
+  children,
+  name: nameProp,
+  onChange,
+  checked,
+  disabled: disabledProp,
+  value,
+  attributes,
+  classes,
+  renderCard: RenderCard
+}) => {
+  const radioGroup = useRadioGroup();
+  let name = nameProp;
+  let disabled = disabledProp;
+  if (radioGroup) {
+    if (typeof radioGroup.name !== 'undefined') {
+      ({
+        name
+      } = radioGroup);
+    }
+    if (typeof radioGroup.disabled !== 'undefined') {
+      ({
+        disabled
+      } = radioGroup);
+    }
+  }
+  return /*#__PURE__*/React.createElement(RenderCard, {
+    className: classes.root
+  }, /*#__PURE__*/React.createElement(Radio, {
+    name: name,
+    value: value,
+    onChange: onChange,
+    disabled: disabled,
+    checked: checked,
+    attributes: attributes,
+    classes: {
+      root: styles.radio
+    }
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: `${name}_${value}`,
+    className: classNames(styles.content, {
+      [styles.contentDisabled]: disabled,
+      [classes.disabled]: disabled
+    })
+  }, children));
+};
+RadioCard.defaultProps = {
+  children: null,
+  checked: null,
+  classes: {},
+  disabled: false,
+  onChange: null,
+  name: null,
+  value: null,
+  attributes: null,
+  renderCard: CardComponent
+};
+export default RadioCard;

package/components/RadioCard/index.js

@@ -1 +1 @@
-export{default}from"./RadioCard";
+export { default } from "./RadioCard";

package/components/RadioGroup/RadioGroup.context.js

@@ -1 +1,3 @@
-import React from'react';var initialContext={};export default React.createContext(initialContext);
+import React from 'react';
+const initialContext = {};
+export default /*#__PURE__*/React.createContext(initialContext);