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

package/a11y/action-creators/index.js

@@ -1,9 +1,19 @@
-import{A11Y_INCREASE_MODAL_COUNT,A11Y_DECREASE_MODAL_COUNT}from"../constants";/**
+import { A11Y_INCREASE_MODAL_COUNT, A11Y_DECREASE_MODAL_COUNT } from "../constants";
+
+/**
  * Increases the modal count inside the A11Y state. Used to determine if parts of the app needs to
  * be hidden for screen readers to improve accessibility.
  * @returns {Object} The Redux action object
- */export var increaseModalCount=function increaseModalCount(){return{type:A11Y_INCREASE_MODAL_COUNT};};/**
+ */
+export const increaseModalCount = () => ({
+  type: A11Y_INCREASE_MODAL_COUNT
+});
+
+/**
  * Decreases the modal count inside the A11Y state. Used to determine if parts of the app needs to
  * be hidden for screen readers to improve accessibility.
  * @returns {Object} The Redux action object
- */export var decreaseModalCount=function decreaseModalCount(){return{type:A11Y_DECREASE_MODAL_COUNT};};
+ */
+export const decreaseModalCount = () => ({
+  type: A11Y_DECREASE_MODAL_COUNT
+});

package/a11y/components/FocusTrap/index.js

@@ -1 +1,2 @@
-import{FocusTrap}from'focus-trap-react';export default FocusTrap;
+import { FocusTrap } from 'focus-trap-react';
+export default FocusTrap;

package/a11y/components/LiveMessage/index.js

@@ -1,7 +1,29 @@
-import React from'react';import PropTypes from'prop-types';import{I18n}from"../../../components";import styles from"./styles";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import { I18n } from "../../../components";
+import styles from "./styles";
+
+/**
  * The LiveMessage component can be used to broadcast "aria-live" messages to assistive technology.
  * @param {string} message The message - i18n placeholders are supported.
  * @param {Object} params Optional params for the message.
  * @param {string} 'aria-live' The aria-live type.
  * @returns {JSX}
- */var LiveMessage=function LiveMessage(_ref){var message=_ref.message,params=_ref.params,ariaLive=_ref['aria-live'];return React.createElement("div",{className:styles,role:"log","aria-live":ariaLive},React.createElement(I18n.Text,{string:message,params:params}));};LiveMessage.defaultProps={'aria-live':'polite',params:null};export default LiveMessage;
+ */
+const LiveMessage = ({
+  message,
+  params,
+  'aria-live': ariaLive
+}) => /*#__PURE__*/React.createElement("div", {
+  className: styles,
+  role: "log",
+  "aria-live": ariaLive
+}, /*#__PURE__*/React.createElement(I18n.Text, {
+  string: message,
+  params: params
+}));
+LiveMessage.defaultProps = {
+  'aria-live': 'polite',
+  params: null
+};
+export default LiveMessage;

package/a11y/components/LiveMessage/styles.js

@@ -1 +1,12 @@
-import{css}from'glamor';export default css({clip:'rect(1px, 1px, 1px, 1px)',height:'1px',margin:0,overflow:'hidden',padding:0,position:'absolute',whiteSpace:'nowrap',width:'1px',zIndex:-1000});
+import { css } from 'glamor';
+export default css({
+  clip: 'rect(1px, 1px, 1px, 1px)',
+  height: '1px',
+  margin: 0,
+  overflow: 'hidden',
+  padding: 0,
+  position: 'absolute',
+  whiteSpace: 'nowrap',
+  width: '1px',
+  zIndex: -1000
+});

package/a11y/components/LiveMessenger/constants.js

@@ -1 +1,3 @@
-export var EVENT_LIVE_MESSAGE='event.live_message';export var LIVE_MESSAGE_TYPE_POLITE='polite';export var LIVE_MESSAGE_TYPE_ASSERTIVE='assertive';
+export const EVENT_LIVE_MESSAGE = 'event.live_message';
+export const LIVE_MESSAGE_TYPE_POLITE = 'polite';
+export const LIVE_MESSAGE_TYPE_ASSERTIVE = 'assertive';

package/a11y/components/LiveMessenger/helpers.js

@@ -1,4 +1,7 @@
-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{UIEvents}from"../../../core";import{EVENT_LIVE_MESSAGE,LIVE_MESSAGE_TYPE_POLITE}from"./constants";/**
+import { UIEvents } from "../../../core";
+import { EVENT_LIVE_MESSAGE, LIVE_MESSAGE_TYPE_POLITE } from "./constants";
+
+/**
  * Broadcasts a live message to a LiveMessenger component.
  * @param {string} message The message.
  * @param {Object} options Additional options.
@@ -7,5 +10,23 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  * @param {string} options.id Id of the LiveMessenger component which sets the message.
  * @param {boolean} options.force If set to TRUE the LiveMessenger component will read the text,
  * even if the same was broadcasted before.
- */export function broadcastLiveMessage(message){var options=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var defaults={type:LIVE_MESSAGE_TYPE_POLITE,params:null,id:null};if(!message){return;}var params=_extends({},defaults,{},options);UIEvents.emit(EVENT_LIVE_MESSAGE,message,params);setTimeout(function(){// Clear the live area after a short time, so that the screen reader can't focus the element.
-UIEvents.emit(EVENT_LIVE_MESSAGE,'',params);},100);}
+ */
+export function broadcastLiveMessage(message, options = {}) {
+  const defaults = {
+    type: LIVE_MESSAGE_TYPE_POLITE,
+    params: null,
+    id: null
+  };
+  if (!message) {
+    return;
+  }
+  const params = {
+    ...defaults,
+    ...options
+  };
+  UIEvents.emit(EVENT_LIVE_MESSAGE, message, params);
+  setTimeout(() => {
+    // Clear the live area after a short time, so that the screen reader can't focus the element.
+    UIEvents.emit(EVENT_LIVE_MESSAGE, '', params);
+  }, 100);
+}

package/a11y/components/LiveMessenger/index.js

@@ -1,9 +1,67 @@
-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;}import React,{useState,useLayoutEffect,useCallback}from'react';import PropTypes from'prop-types';import{UIEvents}from'@shopgate/engage/core';import LiveMessage from"../LiveMessage";import{EVENT_LIVE_MESSAGE,LIVE_MESSAGE_TYPE_ASSERTIVE,LIVE_MESSAGE_TYPE_POLITE}from"./constants";/**
+import React, { useState, useLayoutEffect, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { UIEvents } from '@shopgate/engage/core';
+import LiveMessage from "../LiveMessage";
+import { EVENT_LIVE_MESSAGE, LIVE_MESSAGE_TYPE_ASSERTIVE, LIVE_MESSAGE_TYPE_POLITE } from "./constants";
+
+/**
  * The LiveMessenger component can be used to broadcast `aria-live` messages to assistive
  * technology. It can be placed somewhere within the DOM, and receives its updates via
  * EVENT_LIVE_MESSAGE event.
  * @param {string} id An optional id for the messenger.
  * @returns {JSX}
- */var LiveMessenger=function LiveMessenger(_ref){var id=_ref.id;var _useState=useState({message:'',params:null}),_useState2=_slicedToArray(_useState,2),assertive=_useState2[0],setAssertive=_useState2[1];var _useState3=useState({message:'',params:null}),_useState4=_slicedToArray(_useState3,2),polite=_useState4[0],setPolite=_useState4[1];var handleMessage=useCallback(function(message,options){var _options$type=options.type,type=_options$type===void 0?LIVE_MESSAGE_TYPE_POLITE:_options$type,_options$id=options.id,instanceId=_options$id===void 0?null:_options$id,_options$params=options.params,params=_options$params===void 0?null:_options$params;if(id!==instanceId){return;}if(type===LIVE_MESSAGE_TYPE_ASSERTIVE){setAssertive({message:message,params:params});}else if(type===LIVE_MESSAGE_TYPE_POLITE){setPolite({message:message,params:params});}// eslint-disable-next-line react-hooks/exhaustive-deps
-},[]);useLayoutEffect(function(){UIEvents.addListener(EVENT_LIVE_MESSAGE,handleMessage);return function(){UIEvents.removeListener(EVENT_LIVE_MESSAGE,handleMessage);};// eslint-disable-next-line react-hooks/exhaustive-deps
-},[]);return React.createElement("div",null,React.createElement(LiveMessage,{"aria-live":"assertive",message:assertive.message,params:assertive.params}),React.createElement(LiveMessage,{"aria-live":"polite",message:polite.message,params:polite.params}));};LiveMessenger.defaultProps={id:null};export default LiveMessenger;
+ */
+const LiveMessenger = ({
+  id
+}) => {
+  const [assertive, setAssertive] = useState({
+    message: '',
+    params: null
+  });
+  const [polite, setPolite] = useState({
+    message: '',
+    params: null
+  });
+  const handleMessage = useCallback((message, options) => {
+    const {
+      type = LIVE_MESSAGE_TYPE_POLITE,
+      id: instanceId = null,
+      params = null
+    } = options;
+    if (id !== instanceId) {
+      return;
+    }
+    if (type === LIVE_MESSAGE_TYPE_ASSERTIVE) {
+      setAssertive({
+        message,
+        params
+      });
+    } else if (type === LIVE_MESSAGE_TYPE_POLITE) {
+      setPolite({
+        message,
+        params
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useLayoutEffect(() => {
+    UIEvents.addListener(EVENT_LIVE_MESSAGE, handleMessage);
+    return () => {
+      UIEvents.removeListener(EVENT_LIVE_MESSAGE, handleMessage);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(LiveMessage, {
+    "aria-live": "assertive",
+    message: assertive.message,
+    params: assertive.params
+  }), /*#__PURE__*/React.createElement(LiveMessage, {
+    "aria-live": "polite",
+    message: polite.message,
+    params: polite.params
+  }));
+};
+LiveMessenger.defaultProps = {
+  id: null
+};
+export default LiveMessenger;

package/a11y/components/ModalStateTracker/index.js

@@ -1,4 +1,7 @@
-import PropTypes from'prop-types';import{useTrackModalState}from'@shopgate/engage/a11y/hooks';/**
+import PropTypes from 'prop-types';
+import { useTrackModalState } from '@shopgate/engage/a11y/hooks';
+
+/**
  * Helper component to be used inside modal-like class components to track their visibility and
  * apply a11y optimizations to the app.
  *
@@ -11,4 +14,19 @@ import PropTypes from'prop-types';import{useTrackModalState}from'@shopgate/engag
  * component mounts/unmounts based on visibility.
  * @param {ReactNode} props.children The component children.
  * @returns {JSX.Element}
- */var ModalStateTracker=function ModalStateTracker(_ref){var children=_ref.children,isVisible=_ref.isVisible;useTrackModalState(isVisible);return children;};ModalStateTracker.propTypes={children:PropTypes.node.isRequired,isVisible:PropTypes.bool};ModalStateTracker.defaultProps={isVisible:undefined};export default ModalStateTracker;
+ */
+const ModalStateTracker = ({
+  children,
+  isVisible
+}) => {
+  useTrackModalState(isVisible);
+  return children;
+};
+ModalStateTracker.propTypes = {
+  children: PropTypes.node.isRequired,
+  isVisible: PropTypes.bool
+};
+ModalStateTracker.defaultProps = {
+  isVisible: undefined
+};
+export default ModalStateTracker;

package/a11y/components/Navigation/index.js

@@ -1,7 +1,45 @@
-import React from'react';import PropTypes from'prop-types';import{Link,I18n}from'@shopgate/engage/components';import styles from"./style";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link, I18n } from '@shopgate/engage/components';
+import styles from "./style";
+
+/**
  * @param {Object} props component props.
  * @param {string} props.title Navigation title.
  * @param {Array} props.entries Navigation entries.
  * @param {Object} context  The component context.
  * @returns {JSX}
- */var Navigation=function Navigation(_ref,context){var title=_ref.title,entries=_ref.entries;var _context$i18n=context.i18n(),__=_context$i18n.__;if(!entries||!entries.length){return null;}return React.createElement("nav",{"aria-label":title?__(title):null},React.createElement("ul",{className:styles},entries.map(function(_ref2){var entryTitle=_ref2.title,link=_ref2.link;return React.createElement("li",{key:link},React.createElement(Link,{href:link},React.createElement(I18n.Text,{string:entryTitle})));})));};Navigation.defaultProps={title:null,entries:[]};Navigation.contextTypes={i18n:PropTypes.func};export default Navigation;
+ */
+const Navigation = ({
+  title,
+  entries
+}, context) => {
+  const {
+    __
+  } = context.i18n();
+  if (!entries || !entries.length) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("nav", {
+    "aria-label": title ? __(title) : null
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: styles
+  }, entries.map(({
+    title: entryTitle,
+    link
+  }) => /*#__PURE__*/React.createElement("li", {
+    key: link
+  }, /*#__PURE__*/React.createElement(Link, {
+    href: link
+  }, /*#__PURE__*/React.createElement(I18n.Text, {
+    string: entryTitle
+  }))))));
+};
+Navigation.defaultProps = {
+  title: null,
+  entries: []
+};
+Navigation.contextTypes = {
+  i18n: PropTypes.func
+};
+export default Navigation;

package/a11y/components/Navigation/style.js

@@ -1 +1,12 @@
-import{css}from'glamor';export default css({clip:'rect(1px, 1px, 1px, 1px)',height:'1px',margin:0,overflow:'hidden',padding:0,position:'absolute',whiteSpace:'nowrap',width:'1px',zIndex:-1000});
+import { css } from 'glamor';
+export default css({
+  clip: 'rect(1px, 1px, 1px, 1px)',
+  height: '1px',
+  margin: 0,
+  overflow: 'hidden',
+  padding: 0,
+  position: 'absolute',
+  whiteSpace: 'nowrap',
+  width: '1px',
+  zIndex: -1000
+});

package/a11y/components/Section/index.js

@@ -1,10 +1,27 @@
-var _excluded=["title","titleParams","children"];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,useMemo,useLayoutEffect}from'react';import PropTypes from'prop-types';import kebabCase from'lodash/kebabCase';import{I18n}from'@shopgate/engage/components';import VisuallyHidden from"../VisuallyHidden";/**
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useRef, useState, useMemo, useLayoutEffect } from 'react';
+import PropTypes from 'prop-types';
+import kebabCase from 'lodash/kebabCase';
+import { I18n } from '@shopgate/engage/components';
+import VisuallyHidden from "../VisuallyHidden";
+
+/**
  * Checks the section ref has suitable child nodes.
  * @param {Object} ref A React ref.
  * @param {string} headlineId The ID of the section headline.
  * @returns {bool}
-*/var hasChildNodes=function hasChildNodes(ref,headlineId){if(!ref.current){return false;}// Determine all child nodes except the headline.
-var childNodes=[].filter.call(ref.current.childNodes,function(el){return el.getAttribute('id')!==headlineId;});return childNodes.length>0;};/**
+*/
+const hasChildNodes = (ref, headlineId) => {
+  if (!ref.current) {
+    return false;
+  }
+
+  // Determine all child nodes except the headline.
+  const childNodes = [].filter.call(ref.current.childNodes, el => el.getAttribute('id') !== headlineId);
+  return childNodes.length > 0;
+};
+
+/**
  * The Section component is supposed to be used to structure the content to improve a11y. It
  * renders a headline on top which is only visible for screen readers and describes the section.
  * Internally a MutationObserver maintains the visibility based on the presence of rendered content.
@@ -14,4 +31,47 @@ var childNodes=[].filter.call(ref.current.childNodes,function(el){return el.getA
  * @param {Object} [props.className=null] A class name for the section.
  * @param {NodeList} [props.children=null] Component children.
  * @returns {JSX.Element}
- */function Section(props){var title=props.title,titleParams=props.titleParams,children=props.children,rest=_objectWithoutProperties(props,_excluded);var contentRef=useRef(null);var _useState=useState(false),_useState2=_slicedToArray(_useState,2),hasContent=_useState2[0],setHasContent=_useState2[1];var id=useMemo(function(){return kebabCase(title);},[title]);var observer=useMemo(function(){return new MutationObserver(function(){setHasContent(hasChildNodes(contentRef,id));});},[contentRef,id]);useLayoutEffect(function(){setHasContent(hasChildNodes(contentRef,id));observer.observe(contentRef.current,{childList:true});return function(){observer.disconnect();};},[contentRef,id,observer]);if(!hasContent){return React.createElement("section",_extends({},rest,{ref:contentRef}),children);}return React.createElement("section",_extends({},rest,{ref:contentRef,"aria-labelledby":id}),React.createElement(VisuallyHidden,null,React.createElement("h2",{id:id},React.createElement(I18n.Text,{string:title,params:titleParams}))),children);}Section.defaultProps={children:null,className:'',titleParams:{}};export default Section;
+ */
+function Section(props) {
+  const {
+    title,
+    titleParams,
+    children,
+    ...rest
+  } = props;
+  const contentRef = useRef(null);
+  const [hasContent, setHasContent] = useState(false);
+  const id = useMemo(() => kebabCase(title), [title]);
+  const observer = useMemo(() => new MutationObserver(() => {
+    setHasContent(hasChildNodes(contentRef, id));
+  }), [contentRef, id]);
+  useLayoutEffect(() => {
+    setHasContent(hasChildNodes(contentRef, id));
+    observer.observe(contentRef.current, {
+      childList: true
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, [contentRef, id, observer]);
+  if (!hasContent) {
+    return /*#__PURE__*/React.createElement("section", _extends({}, rest, {
+      ref: contentRef
+    }), children);
+  }
+  return /*#__PURE__*/React.createElement("section", _extends({}, rest, {
+    ref: contentRef,
+    "aria-labelledby": id
+  }), /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("h2", {
+    id: id
+  }, /*#__PURE__*/React.createElement(I18n.Text, {
+    string: title,
+    params: titleParams
+  }))), children);
+}
+Section.defaultProps = {
+  children: null,
+  className: '',
+  titleParams: {}
+};
+export default Section;

package/a11y/components/VisuallyHidden/index.js

@@ -1,8 +1,32 @@
-import React from'react';import PropTypes from'prop-types';import{css}from'glamor';var styles={root:css({position:'absolute !important',height:'1px',width:'1px',overflow:'hidden',clip:'rect(1px, 1px, 1px, 1px)',whiteSpace:'nowrap'})};/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from 'glamor';
+const styles = {
+  root: css({
+    position: 'absolute !important',
+    height: '1px',
+    width: '1px',
+    overflow: 'hidden',
+    clip: 'rect(1px, 1px, 1px, 1px)',
+    whiteSpace: 'nowrap'
+  })
+};
+
+/**
  * This component surrounds its children with a wrapper that takes care that they are not visible
  * on the screen, but still accessible by a screen reader.
  * @param {Object} props The component props
  * @param {Object} [props.tag='span'] The tag to be used for the component
  * @param {Object} props.children Component children
  * @returns {JSX.Element}
- */var VisuallyHidden=function VisuallyHidden(_ref){var _ref$tag=_ref.tag,tag=_ref$tag===void 0?'span':_ref$tag,children=_ref.children;return React.createElement(tag,{className:styles.root},children);};VisuallyHidden.defaultProps={tag:'span'};export default VisuallyHidden;
+ */
+const VisuallyHidden = ({
+  tag = 'span',
+  children
+}) => /*#__PURE__*/React.createElement(tag, {
+  className: styles.root
+}, children);
+VisuallyHidden.defaultProps = {
+  tag: 'span'
+};
+export default VisuallyHidden;

package/a11y/components/index.js

@@ -1 +1,7 @@
-export{default as LiveMessage}from"./LiveMessage";export{default as LiveMessenger}from"./LiveMessenger";export{default as Navigation}from"./Navigation";export{default as ModalStateTracker}from"./ModalStateTracker";export{default as Section}from"./Section";export{default as VisuallyHidden}from"./VisuallyHidden";export{default as FocusTrap}from"./FocusTrap";
+export { default as LiveMessage } from "./LiveMessage";
+export { default as LiveMessenger } from "./LiveMessenger";
+export { default as Navigation } from "./Navigation";
+export { default as ModalStateTracker } from "./ModalStateTracker";
+export { default as Section } from "./Section";
+export { default as VisuallyHidden } from "./VisuallyHidden";
+export { default as FocusTrap } from "./FocusTrap";

package/a11y/constants/index.js

@@ -1 +1,3 @@
-export*from"../components/LiveMessenger/constants";export var A11Y_INCREASE_MODAL_COUNT='A11Y_INCREASE_MODAL_COUNT';export var A11Y_DECREASE_MODAL_COUNT='A11Y_DECREASE_MODAL_COUNT';
+export * from "../components/LiveMessenger/constants";
+export const A11Y_INCREASE_MODAL_COUNT = 'A11Y_INCREASE_MODAL_COUNT';
+export const A11Y_DECREASE_MODAL_COUNT = 'A11Y_DECREASE_MODAL_COUNT';

package/a11y/helpers/index.js

@@ -1 +1 @@
-export*from"../components/LiveMessenger/helpers";
+export * from "../components/LiveMessenger/helpers";

package/a11y/hooks/index.js

@@ -1,9 +1,31 @@
-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;}import{useEffect,useState,useRef}from'react';import{useDispatch}from'react-redux';import{increaseModalCount,decreaseModalCount}from"../action-creators";/**
+import { useEffect, useState, useRef } from 'react';
+import { useDispatch } from 'react-redux';
+import { increaseModalCount, decreaseModalCount } from "../action-creators";
+
+/**
  * The useReduceMotion hook
  * to determine whether the user selected reduced motion in the phone settings
  * @returns {boolean} whether the user prefers reduced motions in the settings
- */export var useReduceMotion=function useReduceMotion(){var _useState=useState(window.matchMedia('(prefers-reduced-motion: reduce)').matches),_useState2=_slicedToArray(_useState,2),matches=_useState2[0],setMatch=_useState2[1];useEffect(function(){var mq=window.matchMedia('(prefers-reduced-motion: reduce)');// eslint-disable-next-line require-jsdoc
-var handleChange=function handleChange(){setMatch(mq.matches);};handleChange();mq.addEventListener('change',handleChange);return function(){mq.removeEventListener('change',handleChange);};},[]);return matches;};/**
+ */
+export const useReduceMotion = () => {
+  const [matches, setMatch] = useState(window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+  useEffect(() => {
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
+
+    // eslint-disable-next-line require-jsdoc
+    const handleChange = () => {
+      setMatch(mq.matches);
+    };
+    handleChange();
+    mq.addEventListener('change', handleChange);
+    return () => {
+      mq.removeEventListener('change', handleChange);
+    };
+  }, []);
+  return matches;
+};
+
+/**
  * Tracks when a modal-like component is considered "visible", and dispatches Redux
  * actions accordingly. This is useful for global tracking of visible overlays,
  * modals, drawers, or any component with a similar behavior.
@@ -32,6 +54,27 @@ var handleChange=function handleChange(){setMatch(mq.matches);};handleChange();m
  *   useTrackModalState(); // defaults to `true`
  *   return <div className="tooltip">Hello!</div>;
  * }
- */export function useTrackModalState(){var isVisible=arguments.length>0&&arguments[0]!==undefined?arguments[0]:true;var dispatch=useDispatch();var wasVisible=useRef(false);// React to changes in visibility
-useEffect(function(){if(isVisible&&!wasVisible.current){dispatch(increaseModalCount());wasVisible.current=true;}else if(!isVisible&&wasVisible.current){dispatch(decreaseModalCount());wasVisible.current=false;}},[isVisible,dispatch]);// On unmount, dispatch hide if it was still visible
-useEffect(function(){return function(){if(wasVisible.current){dispatch(decreaseModalCount());wasVisible.current=false;}};},[dispatch]);}
+ */
+export function useTrackModalState(isVisible = true) {
+  const dispatch = useDispatch();
+  const wasVisible = useRef(false);
+
+  // React to changes in visibility
+  useEffect(() => {
+    if (isVisible && !wasVisible.current) {
+      dispatch(increaseModalCount());
+      wasVisible.current = true;
+    } else if (!isVisible && wasVisible.current) {
+      dispatch(decreaseModalCount());
+      wasVisible.current = false;
+    }
+  }, [isVisible, dispatch]);
+
+  // On unmount, dispatch hide if it was still visible
+  useEffect(() => () => {
+    if (wasVisible.current) {
+      dispatch(decreaseModalCount());
+      wasVisible.current = false;
+    }
+  }, [dispatch]);
+}

package/a11y/index.js

@@ -1 +1,5 @@
-/** @module a11y */export{LiveMessage,LiveMessenger,Navigation,Section,VisuallyHidden}from"./components";export*from"./constants";export*from"./helpers";
+/** @module a11y */
+
+export { LiveMessage, LiveMessenger, Navigation, Section, VisuallyHidden } from "./components";
+export * from "./constants";
+export * from "./helpers";

package/a11y/reducers/index.js

@@ -1,6 +1,41 @@
-import{produce}from'immer';import{isDev,logger}from'@shopgate/engage/core/helpers';import{A11Y_INCREASE_MODAL_COUNT,A11Y_DECREASE_MODAL_COUNT}from"../constants";var defaultState={modalCount:0};/**
+import { produce } from 'immer';
+import { isDev, logger } from '@shopgate/engage/core/helpers';
+import { A11Y_INCREASE_MODAL_COUNT, A11Y_DECREASE_MODAL_COUNT } from "../constants";
+const defaultState = {
+  modalCount: 0
+};
+
+/**
  * Stores a11y state
  * @param {Object} [state={}] The current state.
  * @param {Object} action The action object.
  * @returns {Object} The new state.
- */export default function a11y(){var state=arguments.length>0&&arguments[0]!==undefined?arguments[0]:defaultState;var action=arguments.length>1?arguments[1]:undefined;/* eslint-disable no-param-reassign */var producer=produce(function(draft){switch(action.type){case A11Y_INCREASE_MODAL_COUNT:{draft.modalCount+=1;break;}case A11Y_DECREASE_MODAL_COUNT:{draft.modalCount-=1;if(draft.modalCount<0){if(isDev){logger.warn('Modal count is negative, resetting to 0');}draft.modalCount=0;}break;}default:break;}});/* eslint-enable no-param-reassign */return producer(state);}
+ */
+export default function a11y(state = defaultState, action) {
+  /* eslint-disable no-param-reassign */
+  const producer = produce(draft => {
+    switch (action.type) {
+      case A11Y_INCREASE_MODAL_COUNT:
+        {
+          draft.modalCount += 1;
+          break;
+        }
+      case A11Y_DECREASE_MODAL_COUNT:
+        {
+          draft.modalCount -= 1;
+          if (draft.modalCount < 0) {
+            if (isDev) {
+              logger.warn('Modal count is negative, resetting to 0');
+            }
+            draft.modalCount = 0;
+          }
+          break;
+        }
+      default:
+        break;
+    }
+  });
+  /* eslint-enable no-param-reassign */
+
+  return producer(state);
+}

package/a11y/selectors/index.js

@@ -1,8 +1,14 @@
-import{createSelector}from'reselect';/**
+import { createSelector } from 'reselect';
+
+/**
  * Retrieves the a11y state from the store.
  * @param {Object} state The current application state.
  * @return {Object} The a11y state.
- */var getState=function getState(state){return state.a11y;};/**
+ */
+const getState = state => state.a11y;
+
+/**
  * Creates a selector that returns the number of currently open modals.
  * @type {(state: any) => number}
- */export var getModalCount=createSelector(getState,function(a11y){return a11y.modalCount;});
+ */
+export const getModalCount = createSelector(getState, a11y => a11y.modalCount);

package/a11y/styles.js

@@ -1,2 +1,16 @@
-import{css}from'glamor';// global class for screen readers only, visually hidden
-css.global('.sr-only',{border:'0',clip:'rect(0 0 0 0)',height:'1px',margin:'-1px',overflow:'hidden',padding:'0',position:'absolute',width:'1px',whiteSpace:'nowrap',top:0,left:0});
+import { css } from 'glamor';
+
+// global class for screen readers only, visually hidden
+css.global('.sr-only', {
+  border: '0',
+  clip: 'rect(0 0 0 0)',
+  height: '1px',
+  margin: '-1px',
+  overflow: 'hidden',
+  padding: '0',
+  position: 'absolute',
+  width: '1px',
+  whiteSpace: 'nowrap',
+  top: 0,
+  left: 0
+});

package/account/actions/addContacts.js

@@ -1,4 +1,33 @@
-import _regeneratorRuntime from"@babel/runtime/regenerator";function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value;}catch(error){reject(error);return;}if(info.done){resolve(value);}else{Promise.resolve(value).then(_next,_throw);}}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value);}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err);}_next(undefined);});};}import{PipelineRequest}from'@shopgate/engage/core/classes';import{ADD_CUSTOMER_CONTACT,ADD_CUSTOMER_CONTACT_SUCCESS,ADD_CUSTOMER_CONTACT_ERROR}from"../constants/actions";/**
+import { PipelineRequest } from '@shopgate/engage/core/classes';
+import { ADD_CUSTOMER_CONTACT, ADD_CUSTOMER_CONTACT_SUCCESS, ADD_CUSTOMER_CONTACT_ERROR } from "../constants/actions";
+
+/**
  * Starts entering the checkout process for the customer.
  * @returns {Function}
- */export var addCustomerContacts=function addCustomerContacts(_ref){var contacts=_ref.contacts;return(/*#__PURE__*/function(){var _ref2=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(dispatch){var response;return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:dispatch({type:ADD_CUSTOMER_CONTACT,contacts:contacts});_context.prev=1;_context.next=4;return new PipelineRequest('shopgate.customer.addContacts').setTrusted().setInput({contacts:contacts}).dispatch();case 4:response=_context.sent;dispatch({type:ADD_CUSTOMER_CONTACT_SUCCESS,contacts:contacts});_context.next=12;break;case 8:_context.prev=8;_context.t0=_context["catch"](1);dispatch({type:ADD_CUSTOMER_CONTACT_ERROR,contacts:contacts,error:_context.t0});throw _context.t0;case 12:return _context.abrupt("return",response);case 13:case"end":return _context.stop();}},_callee,null,[[1,8]]);}));return function(_x){return _ref2.apply(this,arguments);};}());};
+ */
+export const addCustomerContacts = ({
+  contacts
+}) => async dispatch => {
+  dispatch({
+    type: ADD_CUSTOMER_CONTACT,
+    contacts
+  });
+  let response;
+  try {
+    response = await new PipelineRequest('shopgate.customer.addContacts').setTrusted().setInput({
+      contacts
+    }).dispatch();
+    dispatch({
+      type: ADD_CUSTOMER_CONTACT_SUCCESS,
+      contacts
+    });
+  } catch (error) {
+    dispatch({
+      type: ADD_CUSTOMER_CONTACT_ERROR,
+      contacts,
+      error
+    });
+    throw error;
+  }
+  return response;
+};