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

package/components/RangeSlider/spec.js

@@ -1,10 +1,34 @@
-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 from'react';import{shallow,mount}from'enzyme';import RangeSlider from"./index";import RangeSliderHandle from"./components/Handle";import{generateLinearEasingCallback,generateExponentialEasingCallback,getAbsoluteValue,getRelativeValue}from"./helper";/**
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import RangeSlider from "./index";
+import RangeSliderHandle from "./components/Handle";
+import { generateLinearEasingCallback, generateExponentialEasingCallback, getAbsoluteValue, getRelativeValue } from "./helper";
+
+/**
  * Creates a (fake) touch event.
  * @param {number} pageX the x page offset of the simulated touch event
  * @returns {Object} the new fake event containing only the properties required for testing.
- */var createTouchEvent=function createTouchEvent(pageX){// Simulate a handle of 16px width.
-var simulatedHandleWidth=16;var simulatedHandleHalfWidth=simulatedHandleWidth/2;var touchEvent={target:{offsetWidth:simulatedHandleWidth,getBoundingClientRect:function getBoundingClientRect(){return{// Simulate a touch on the center of the handle.
-left:pageX-simulatedHandleHalfWidth};}},touches:[{pageX:pageX}]};return touchEvent;};/**
+ */
+const createTouchEvent = pageX => {
+  // Simulate a handle of 16px width.
+  const simulatedHandleWidth = 16;
+  const simulatedHandleHalfWidth = simulatedHandleWidth / 2;
+  const touchEvent = {
+    target: {
+      offsetWidth: simulatedHandleWidth,
+      getBoundingClientRect: () => ({
+        // Simulate a touch on the center of the handle.
+        left: pageX - simulatedHandleHalfWidth
+      })
+    },
+    touches: [{
+      pageX
+    }]
+  };
+  return touchEvent;
+};
+
+/**
  * Simulates a series of touch events.
  * This function will automatically validate the from/to values of the range slider.
  * An extra testCallback may be provided to perform additional checks.
@@ -18,24 +42,149 @@ left:pageX-simulatedHandleHalfWidth};}},touches:[{pageX:pageX}]};return touchEve
  * @param {number} resolutionOrFactor The resolution or factor for the easing function.
  * @param {Array} simulateSteps A set of relative horizontal pixel movements to simulate.
  * @param {Function} testCallback An optional callback for the onChange event of the slider.
- */var simulateInputTest=function simulateInputTest(pxWidth,pxOffset,min,max,value,easing,resolutionOrFactor,simulateSteps,testCallback){var config={totalPixelWidth:pxWidth,leftPixelOffset:pxOffset,min:min,max:max,easing:easing,resolution:resolutionOrFactor,factor:resolutionOrFactor,initialValue:value,valuePixelSize:pxWidth/(max-min),currentTouchDeltaX:0};config.currentTouchDeltaX=config.valuePixelSize*value[1];var ease={linear:generateLinearEasingCallback(config.resolution),exponential:generateExponentialEasingCallback(config.factor)}[config.easing];// eslint-disable-next-line require-jsdoc
-var callback=function callback(_ref){var _ref2=_slicedToArray(_ref,2),from=_ref2[0],to=_ref2[1];var currentTouchDeltaX=config.currentTouchDeltaX,valuePixelSize=config.valuePixelSize;var relativeValue=getRelativeValue(currentTouchDeltaX/valuePixelSize,min,max);var expected=getAbsoluteValue(ease(relativeValue),config.min,config.max,true);expect(expected===from||expected===to).toBe(true);if(testCallback){testCallback(config,from,to);}};var wrapper=mount(React.createElement(RangeSlider,{min:config.min,max:config.max,value:config.initialValue,easing:easing,resolution:config.resolution,factor:config.factor,onChange:callback}));expect(wrapper).toMatchSnapshot();// Create a simulated touch event.
-var pageX=config.leftPixelOffset+config.currentTouchDeltaX;var touchEvent=createTouchEvent(pageX);var inst=wrapper.instance();inst.handleTouchStart(touchEvent,1);simulateSteps.forEach(function(deltaX){config.currentTouchDeltaX+=deltaX;touchEvent.touches[0].pageX=config.leftPixelOffset+config.currentTouchDeltaX;Object.defineProperty(inst.domElement,'offsetLeft',{get:function get(){return config.leftPixelOffset;},configurable:true});Object.defineProperty(inst.domElement,'offsetWidth',{get:function get(){return config.totalPixelWidth;},configurable:true});inst.handleTouchMove(touchEvent);});inst.handleTouchEnd();};describe.skip('<RangeSlider />',function(){/**
+ */
+const simulateInputTest = (pxWidth, pxOffset, min, max, value, easing, resolutionOrFactor, simulateSteps, testCallback) => {
+  const config = {
+    totalPixelWidth: pxWidth,
+    leftPixelOffset: pxOffset,
+    min,
+    max,
+    easing,
+    resolution: resolutionOrFactor,
+    factor: resolutionOrFactor,
+    initialValue: value,
+    valuePixelSize: pxWidth / (max - min),
+    currentTouchDeltaX: 0
+  };
+  config.currentTouchDeltaX = config.valuePixelSize * value[1];
+  const ease = {
+    linear: generateLinearEasingCallback(config.resolution),
+    exponential: generateExponentialEasingCallback(config.factor)
+  }[config.easing];
+
+  // eslint-disable-next-line require-jsdoc
+  const callback = ([from, to]) => {
+    const {
+      currentTouchDeltaX,
+      valuePixelSize
+    } = config;
+    const relativeValue = getRelativeValue(currentTouchDeltaX / valuePixelSize, min, max);
+    const expected = getAbsoluteValue(ease(relativeValue), config.min, config.max, true);
+    expect(expected === from || expected === to).toBe(true);
+    if (testCallback) {
+      testCallback(config, from, to);
+    }
+  };
+  const wrapper = mount(/*#__PURE__*/React.createElement(RangeSlider, {
+    min: config.min,
+    max: config.max,
+    value: config.initialValue,
+    easing: easing,
+    resolution: config.resolution,
+    factor: config.factor,
+    onChange: callback
+  }));
+  expect(wrapper).toMatchSnapshot();
+
+  // Create a simulated touch event.
+  const pageX = config.leftPixelOffset + config.currentTouchDeltaX;
+  const touchEvent = createTouchEvent(pageX);
+  const inst = wrapper.instance();
+  inst.handleTouchStart(touchEvent, 1);
+  simulateSteps.forEach(deltaX => {
+    config.currentTouchDeltaX += deltaX;
+    touchEvent.touches[0].pageX = config.leftPixelOffset + config.currentTouchDeltaX;
+    Object.defineProperty(inst.domElement, 'offsetLeft', {
+      get: () => config.leftPixelOffset,
+      configurable: true
+    });
+    Object.defineProperty(inst.domElement, 'offsetWidth', {
+      get: () => config.totalPixelWidth,
+      configurable: true
+    });
+    inst.handleTouchMove(touchEvent);
+  });
+  inst.handleTouchEnd();
+};
+describe.skip('<RangeSlider />', () => {
+  /**
    * Simple attribute tests
-   */it('renders with boundaries',function(){var wrapper=shallow(React.createElement(RangeSlider,{min:0,max:100}));expect(wrapper).toMatchSnapshot();expect(wrapper.find(RangeSliderHandle).length).toBe(2);});it('renders without boundaries',function(){var wrapper=shallow(React.createElement(RangeSlider,null));expect(wrapper).toMatchSnapshot();expect(wrapper.find(RangeSliderHandle).length).toBe(2);});it('renders without a value pair',function(){var wrapper=shallow(React.createElement(RangeSlider,{value:[10,50]}));expect(wrapper).toMatchSnapshot();expect(wrapper.find(RangeSliderHandle).length).toBe(2);});/**
+   */
+
+  it('renders with boundaries', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(RangeSlider, {
+      min: 0,
+      max: 100
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(RangeSliderHandle).length).toBe(2);
+  });
+  it('renders without boundaries', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(RangeSlider, null));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(RangeSliderHandle).length).toBe(2);
+  });
+  it('renders without a value pair', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(RangeSlider, {
+      value: [10, 50]
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(RangeSliderHandle).length).toBe(2);
+  });
+
+  /**
    * Callback tests
-   */it('emits onChange if handle was touched (linear)',function(){simulateInputTest(100,73,// Range slider pixel width and offset.
-0,100,// Range slider minimum and maximum value.
-[50,75],// Initial value.
-'linear',// Which wasing should be used.
-0.01,// Resolution.
-[// A series of pixel offsets to move the slider handle.
-+0,+3,-15,+17,-80,+75]);});it('emits onChange if handle was touched (exponential)',function(){simulateInputTest(78,12,// Range slider pixel width and offset.
-0,1000,// Range slider minimum maximum value.
-[10,450],// Initial value.
-'exponential',// Which wasing should be used.
-0.01,// Resolution.
-[// A series of pixel offsets to move the slider handle.
-+10,+10,+10,+10,+10,+10,+10,+10,-10,-10,-10,-10,-10,-10,-10,-10,+3,-15,+17,-80,+104,-23,-12,+67]);});it('emits onChange if the outer range was touched',function(){// eslint-disable-next-line require-jsdoc
-var callback=function callback(value){return expect(value).toEqual([-80,0]);};var wrapper=mount(React.createElement(RangeSlider,{min:-100,max:100,value:[0,0],onChange:callback}));// Create a simulated touch event at a page x offset of 20px.
-var touchEvent=createTouchEvent(20);var inst=wrapper.instance();Object.defineProperty(inst.domElement,'offsetLeft',{get:function get(){return 0;},configurable:true});Object.defineProperty(inst.domElement,'offsetWidth',{get:function get(){return 200;},configurable:true});inst.handleRangeTouch(touchEvent);});});
+   */
+  it('emits onChange if handle was touched (linear)', () => {
+    simulateInputTest(100, 73,
+    // Range slider pixel width and offset.
+    0, 100,
+    // Range slider minimum and maximum value.
+    [50, 75],
+    // Initial value.
+    'linear',
+    // Which wasing should be used.
+    0.01,
+    // Resolution.
+    [
+    // A series of pixel offsets to move the slider handle.
+    +0, +3, -15, +17, -80, +75]);
+  });
+  it('emits onChange if handle was touched (exponential)', () => {
+    simulateInputTest(78, 12,
+    // Range slider pixel width and offset.
+    0, 1000,
+    // Range slider minimum maximum value.
+    [10, 450],
+    // Initial value.
+    'exponential',
+    // Which wasing should be used.
+    0.01,
+    // Resolution.
+    [
+    // A series of pixel offsets to move the slider handle.
+    +10, +10, +10, +10, +10, +10, +10, +10, -10, -10, -10, -10, -10, -10, -10, -10, +3, -15, +17, -80, +104, -23, -12, +67]);
+  });
+  it('emits onChange if the outer range was touched', () => {
+    // eslint-disable-next-line require-jsdoc
+    const callback = value => expect(value).toEqual([-80, 0]);
+    const wrapper = mount(/*#__PURE__*/React.createElement(RangeSlider, {
+      min: -100,
+      max: 100,
+      value: [0, 0],
+      onChange: callback
+    }));
+    // Create a simulated touch event at a page x offset of 20px.
+    const touchEvent = createTouchEvent(20);
+    const inst = wrapper.instance();
+    Object.defineProperty(inst.domElement, 'offsetLeft', {
+      get: () => 0,
+      configurable: true
+    });
+    Object.defineProperty(inst.domElement, 'offsetWidth', {
+      get: () => 200,
+      configurable: true
+    });
+    inst.handleRangeTouch(touchEvent);
+  });
+});

package/components/RangeSlider/style.js

@@ -1 +1,18 @@
-import{css}from'glamor';var container=css({position:'relative'});var outerRange=css({minHeight:1,position:'relative'}).toString();var range=css({left:0,right:0,position:'absolute'}).toString();export default{container:container,outerRange:outerRange,range:range};
+import { css } from 'glamor';
+const container = css({
+  position: 'relative'
+});
+const outerRange = css({
+  minHeight: 1,
+  position: 'relative'
+}).toString();
+const range = css({
+  left: 0,
+  right: 0,
+  position: 'absolute'
+}).toString();
+export default {
+  container,
+  outerRange,
+  range
+};

package/components/ResponsiveContainer/ResponsiveContainer.js

@@ -1,6 +1,45 @@
-import PropTypes from'prop-types';import{useResponsiveValue}from"./hooks";/**
+import PropTypes from 'prop-types';
+import { useResponsiveValue } from "./hooks";
+
+/**
  * Renders a responsive container that allows to render based on width.
  * @param {Object} props Component props.
  * @returns {React.Node}
- */var ResponsiveContainer=function ResponsiveContainer(_ref){var breakpoint=_ref.breakpoint,webOnly=_ref.webOnly,webAlways=_ref.webAlways,appOnly=_ref.appOnly,appAlways=_ref.appAlways,children=_ref.children;var render=useResponsiveValue(breakpoint,{webOnly:webOnly,webAlways:webAlways,appOnly:appOnly,appAlways:appAlways});if(!render){return null;}return children;};ResponsiveContainer.propTypes={appAlways:PropTypes.bool,appOnly:PropTypes.bool,breakpoint:PropTypes.string,// eslint-disable-next-line react/forbid-prop-types
-children:PropTypes.any,webAlways:PropTypes.bool,webOnly:PropTypes.bool};ResponsiveContainer.defaultProps={children:null,breakpoint:'>=xs',appAlways:false,webAlways:false,webOnly:false,appOnly:false};export default ResponsiveContainer;
+ */
+const ResponsiveContainer = ({
+  breakpoint,
+  webOnly,
+  webAlways,
+  appOnly,
+  appAlways,
+  children
+}) => {
+  const render = useResponsiveValue(breakpoint, {
+    webOnly,
+    webAlways,
+    appOnly,
+    appAlways
+  });
+  if (!render) {
+    return null;
+  }
+  return children;
+};
+ResponsiveContainer.propTypes = {
+  appAlways: PropTypes.bool,
+  appOnly: PropTypes.bool,
+  breakpoint: PropTypes.string,
+  // eslint-disable-next-line react/forbid-prop-types
+  children: PropTypes.any,
+  webAlways: PropTypes.bool,
+  webOnly: PropTypes.bool
+};
+ResponsiveContainer.defaultProps = {
+  children: null,
+  breakpoint: '>=xs',
+  appAlways: false,
+  webAlways: false,
+  webOnly: false,
+  appOnly: false
+};
+export default ResponsiveContainer;

package/components/ResponsiveContainer/breakpoints.js

@@ -1,14 +1,68 @@
 // Ugly imports to avoid breaking tests due to circular dependencies
-import{isIOSTheme}from'@shopgate/engage/core/helpers/isIOSTheme';import{hasWebBridge}from'@shopgate/engage/core/helpers/bridge';import{IS_PAGE_PREVIEW_ACTIVE}from'@shopgate/engage/page/constants';var iosThemeActive=isIOSTheme();/* eslint-disable extra-rules/no-single-line-objects */var breakpoints=[{name:'xs',from:0,to:600},{name:'sm',from:600,to:960},{name:'md',from:960,to:1280},{name:'lg',from:1280,to:1920},{name:'xl',from:1920,to:Number.MAX_VALUE}];/* eslint-enable extra-rules/no-single-line-objects */ /**
+import { isIOSTheme } from '@shopgate/engage/core/helpers/isIOSTheme';
+import { hasWebBridge } from '@shopgate/engage/core/helpers/bridge';
+import { IS_PAGE_PREVIEW_ACTIVE } from '@shopgate/engage/page/constants';
+const iosThemeActive = isIOSTheme();
+
+/* eslint-disable extra-rules/no-single-line-objects */
+const breakpoints = [{
+  name: 'xs',
+  from: 0,
+  to: 600
+}, {
+  name: 'sm',
+  from: 600,
+  to: 960
+}, {
+  name: 'md',
+  from: 960,
+  to: 1280
+}, {
+  name: 'lg',
+  from: 1280,
+  to: 1920
+}, {
+  name: 'xl',
+  from: 1920,
+  to: Number.MAX_VALUE
+}];
+/* eslint-enable extra-rules/no-single-line-objects */
+
+/**
  * Generates a media query for different breakpoints and platform.
  * @param {Object} comparators Comparators.
  * @param {string} breakpoint Breakpoint rule.
  * @param {Object} params Parameters needed to generation.
  * @returns {string}
- */export var parser=function parser(comparators,breakpoint){var _ref=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{},_ref$appAlways=_ref.appAlways,appAlways=_ref$appAlways===void 0?false:_ref$appAlways,_ref$appOnly=_ref.appOnly,appOnly=_ref$appOnly===void 0?false:_ref$appOnly,_ref$webOnly=_ref.webOnly,webOnly=_ref$webOnly===void 0?false:_ref$webOnly,_ref$webAlways=_ref.webAlways,webAlways=_ref$webAlways===void 0?false:_ref$webAlways;// Parse breakpoint prop into the comparator and the breakpoint name.
-var breakpointStart=breakpoint.search(/[a-zA-Z]/);var comparatorString=breakpoint.substring(0,breakpointStart===-1?0:breakpointStart);var breakpointString=breakpoint.substring(breakpointStart===-1?0:breakpointStart);// Get configuration.
-var comparator=comparators[comparatorString];var config=breakpoints.find(function(b){return b.name===breakpointString;});// Web / App config.
-// Handle iOS theme as app for now so that media queries in shared components only work for app
-var isWeb=hasWebBridge()&&!iosThemeActive&&!IS_PAGE_PREVIEW_ACTIVE;// Always mode.
-if(webAlways&&isWeb||appAlways&&!isWeb){return true;}// Return media query that never evaluates for now.
-if(appOnly&&isWeb||webOnly&&!isWeb){return false;}return comparator(config.from,config.to,window.innerWidth);};export default breakpoints;
+ */
+export const parser = (comparators, breakpoint, {
+  appAlways = false,
+  appOnly = false,
+  webOnly = false,
+  webAlways = false
+} = {}) => {
+  // Parse breakpoint prop into the comparator and the breakpoint name.
+  const breakpointStart = breakpoint.search(/[a-zA-Z]/);
+  const comparatorString = breakpoint.substring(0, breakpointStart === -1 ? 0 : breakpointStart);
+  const breakpointString = breakpoint.substring(breakpointStart === -1 ? 0 : breakpointStart);
+
+  // Get configuration.
+  const comparator = comparators[comparatorString];
+  const config = breakpoints.find(b => b.name === breakpointString);
+
+  // Web / App config.
+  // Handle iOS theme as app for now so that media queries in shared components only work for app
+  const isWeb = hasWebBridge() && !iosThemeActive && !IS_PAGE_PREVIEW_ACTIVE;
+
+  // Always mode.
+  if (webAlways && isWeb || appAlways && !isWeb) {
+    return true;
+  }
+
+  // Return media query that never evaluates for now.
+  if (appOnly && isWeb || webOnly && !isWeb) {
+    return false;
+  }
+  return comparator(config.from, config.to, window.innerWidth);
+};
+export default breakpoints;

package/components/ResponsiveContainer/condition.js

@@ -1,6 +1,19 @@
-import{parser}from"./breakpoints";var comparators={'>=':function _(from,to,width){return width>=from;},'>':function _(from,to,width){return width>=to;},'<':function _(from,to,width){return width<from;},'<=':function _(from,to,width){return width<to;},'':function _(from,to,width){return width>=from&&width<to;}};/**
+import { parser } from "./breakpoints";
+const comparators = {
+  '>=': (from, to, width) => width >= from,
+  '>': (from, to, width) => width >= to,
+  '<': (from, to, width) => width < from,
+  '<=': (from, to, width) => width < to,
+  '': (from, to, width) => width >= from && width < to
+};
+
+/**
  * Tests if responsive condition applies.
  * @param {string} breakpoint Breakpoint rule.
  * @param {Object} params Parameters needed to generation.
  * @returns {string}
- */export var responsiveCondition=function responsiveCondition(breakpoint){var params=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var parsed=parser(comparators,breakpoint,params);return parsed;};
+ */
+export const responsiveCondition = (breakpoint, params = {}) => {
+  const parsed = parser(comparators, breakpoint, params);
+  return parsed;
+};

package/components/ResponsiveContainer/hooks.js

@@ -1,4 +1,15 @@
-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 _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{useState,useMemo,useEffect}from'react';import{addListener}from"./listener";import{parser}from"./breakpoints";var comparators={'>=':function _(from,to,width){return width>=from;},'>':function _(from,to,width){return width>=to;},'<':function _(from,to,width){return width<from;},'<=':function _(from,to,width){return width<to;},'':function _(from,to,width){return width>=from&&width<to;}};/**
+import { useState, useMemo, useEffect } from 'react';
+import { addListener } from "./listener";
+import { parser } from "./breakpoints";
+const comparators = {
+  '>=': (from, to, width) => width >= from,
+  '>': (from, to, width) => width >= to,
+  '<': (from, to, width) => width < from,
+  '<=': (from, to, width) => width < to,
+  '': (from, to, width) => width >= from && width < to
+};
+
+/**
  * Custom hook to determine the visibility or value based on the current active breakpoint
  * and provided conditions.
  * It listens for changes in the viewport or platform breakpoints and returns a value.
@@ -14,7 +25,45 @@ function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimi
  * @param {boolean} [options.appAlways=false] If true, the hook will always match in PWA app mode,
  * regardless of the breakpoint.
  * @returns {boolean}
- */export var useResponsiveValue=function useResponsiveValue(){var breakpoint=arguments.length>0&&arguments[0]!==undefined?arguments[0]:'>=xs';var options=arguments.length>1?arguments[1]:undefined;var _valueMatch$valueMiss=_extends({valueMatch:true,valueMiss:false,appAlways:false,appOnly:false,webAlways:false,webOnly:false},options),webOnly=_valueMatch$valueMiss.webOnly,webAlways=_valueMatch$valueMiss.webAlways,appOnly=_valueMatch$valueMiss.appOnly,appAlways=_valueMatch$valueMiss.appAlways,valueMiss=_valueMatch$valueMiss.valueMiss,valueMatch=_valueMatch$valueMiss.valueMatch;// Active breakpoint used for triggering rerenders on resize.
-var _useState=useState(null),_useState2=_slicedToArray(_useState,2),activeBreakpoint=_useState2[0],setActiveBreakpoint=_useState2[1];// Calculate if we have a match for the conditions
-/* eslint-disable react-hooks/exhaustive-deps */var isMatch=useMemo(function(){var parsed=parser(comparators,breakpoint,{breakpoint:breakpoint,webOnly:webOnly,webAlways:webAlways,appOnly:appOnly,appAlways:appAlways});return parsed;},[activeBreakpoint,breakpoint]);/* eslint-enable react-hooks/exhaustive-deps */ // Watch for resize changes.
-useEffect(function(){return addListener(function(newBreakpoint){setActiveBreakpoint(newBreakpoint);});},[]);return isMatch?valueMatch:valueMiss;};
+ */
+export const useResponsiveValue = (breakpoint = '>=xs', options) => {
+  const {
+    webOnly,
+    webAlways,
+    appOnly,
+    appAlways,
+    valueMiss,
+    valueMatch
+  } = {
+    valueMatch: true,
+    valueMiss: false,
+    appAlways: false,
+    appOnly: false,
+    webAlways: false,
+    webOnly: false,
+    ...options
+  };
+
+  // Active breakpoint used for triggering rerenders on resize.
+  const [activeBreakpoint, setActiveBreakpoint] = useState(null);
+
+  // Calculate if we have a match for the conditions
+  /* eslint-disable react-hooks/exhaustive-deps */
+  const isMatch = useMemo(() => {
+    const parsed = parser(comparators, breakpoint, {
+      breakpoint,
+      webOnly,
+      webAlways,
+      appOnly,
+      appAlways
+    });
+    return parsed;
+  }, [activeBreakpoint, breakpoint]);
+  /* eslint-enable react-hooks/exhaustive-deps */
+
+  // Watch for resize changes.
+  useEffect(() => addListener(newBreakpoint => {
+    setActiveBreakpoint(newBreakpoint);
+  }), []);
+  return isMatch ? valueMatch : valueMiss;
+};

package/components/ResponsiveContainer/index.js

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

package/components/ResponsiveContainer/listener.js

@@ -1,10 +1,35 @@
-import debounce from'lodash/debounce';import breakpoints from"./breakpoints";var listeners=[];/**
+import debounce from 'lodash/debounce';
+import breakpoints from "./breakpoints";
+let listeners = [];
+
+/**
  * Adds a new listener to breakpoint changes.
  * @param {Function} cb The callback that shall be triggered.
  * @returns {Function}
- */export var addListener=function addListener(cb){listeners.push(cb);return function(){listeners=listeners.filter(function(a){return a!==cb;});};};/**
+ */
+export const addListener = cb => {
+  listeners.push(cb);
+  return () => {
+    listeners = listeners.filter(a => a !== cb);
+  };
+};
+
+/**
  * Calculates the active breakpoint.
  * @returns {Object}
- */var getActiveBreakpoint=function getActiveBreakpoint(){return breakpoints.find(function(bp){return bp.from<=document.documentElement.clientWidth&&bp.to>=document.documentElement.clientWidth;});};var activeBreakpoint=getActiveBreakpoint();/**
+ */
+const getActiveBreakpoint = () => breakpoints.find(bp => bp.from <= document.documentElement.clientWidth && bp.to >= document.documentElement.clientWidth);
+let activeBreakpoint = getActiveBreakpoint();
+
+/**
  * Handles any event that might cause a breakpoint change.
- */var handleEvent=function handleEvent(){var newBreakpoint=getActiveBreakpoint();if(activeBreakpoint.name!==newBreakpoint.name){activeBreakpoint=newBreakpoint;listeners.forEach(function(listener){return listener(newBreakpoint);});}};window.addEventListener('resize',debounce(handleEvent,200));window.addEventListener('orientationchange',handleEvent);
+ */
+const handleEvent = () => {
+  const newBreakpoint = getActiveBreakpoint();
+  if (activeBreakpoint.name !== newBreakpoint.name) {
+    activeBreakpoint = newBreakpoint;
+    listeners.forEach(listener => listener(newBreakpoint));
+  }
+};
+window.addEventListener('resize', debounce(handleEvent, 200));
+window.addEventListener('orientationchange', handleEvent);

package/components/ResponsiveContainer/mediaQuery.js

@@ -1,8 +1,28 @@
-import{parser}from"./breakpoints";var comparators={'>=':function _(from){return"@media (min-width: ".concat(from,"px)");},'>':function _(from,to){return"@media (min-width: ".concat(to,"px)");},'<':function _(from){return"@media (max-width: ".concat(from+1,"px)");},'<=':function _(from,to){return"@media (max-width: ".concat(to-1,"px)");},'':function _(from,to){return"@media (min-width: ".concat(from,"px) and (max-width: ").concat(to,"px)");}};/**
+import { parser } from "./breakpoints";
+const comparators = {
+  '>=': from => `@media (min-width: ${from}px)`,
+  '>': (from, to) => `@media (min-width: ${to}px)`,
+  '<': from => `@media (max-width: ${from + 1}px)`,
+  '<=': (from, to) => `@media (max-width: ${to - 1}px)`,
+  '': (from, to) => `@media (min-width: ${from}px) and (max-width: ${to}px)`
+};
+
+/**
  * Generates a media query for different breakpoints and platform.
  * @param {string} breakpoint Breakpoint rule.
  * @param {Object} params Parameters needed to generation.
  * @returns {string}
- */export var responsiveMediaQuery=function responsiveMediaQuery(breakpoint){var params=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var parsed=parser(comparators,breakpoint,params);// Return media query that never evaluates for now.
-if(!parsed){return'@media (height: 0)';}// Return media query that evaluates always.
-if(parsed===true){return'@media (min-height: 0)';}return parsed;};
+ */
+export const responsiveMediaQuery = (breakpoint, params = {}) => {
+  const parsed = parser(comparators, breakpoint, params);
+
+  // Return media query that never evaluates for now.
+  if (!parsed) {
+    return '@media (height: 0)';
+  }
+  // Return media query that evaluates always.
+  if (parsed === true) {
+    return '@media (min-height: 0)';
+  }
+  return parsed;
+};

package/components/ScrollHeader/index.js

@@ -1,4 +1,11 @@
-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 _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,forwardRef,useEffect}from'react';import PropTypes from'prop-types';import classNames from'classnames';import{useScrollDirectionChange}from'@shopgate/engage/core/hooks';import{root,scrolledIn,scrolledOut,transition}from"./style";/* eslint-disable react/prop-types */ /**
+import React, { useState, forwardRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { useScrollDirectionChange } from '@shopgate/engage/core/hooks';
+import { root, scrolledIn, scrolledOut, transition } from "./style";
+
+/* eslint-disable react/prop-types */
+/**
  * A container component that hides its content on scroll down and shows it on scroll up.
  *
  * @param {Object} props The component props.
@@ -20,4 +27,69 @@ function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj
  * @param {React.ReactNode} props.children  Content of the header.
  * @param {React.Ref<HTMLDivElement>} ref   Forwarded ref to the header `<div>`.
  * @returns {JSX.Element}
- */function ScrollHeaderBase(_ref,ref){var className=_ref.className,children=_ref.children,_ref$hideOnScroll=_ref.hideOnScroll,hideOnScroll=_ref$hideOnScroll===void 0?true:_ref$hideOnScroll,_ref$scrollOffset=_ref.scrollOffset,scrollOffset=_ref$scrollOffset===void 0?100:_ref$scrollOffset,_ref$onlyShowAtTop=_ref.onlyShowAtTop,onlyShowAtTop=_ref$onlyShowAtTop===void 0?false:_ref$onlyShowAtTop,_ref$onlyShowAtTopOff=_ref.onlyShowAtTopOffset,onlyShowAtTopOffset=_ref$onlyShowAtTopOff===void 0?0:_ref$onlyShowAtTopOff,onChange=_ref.onChange,classes=_ref.classes;var _useState=useState(false),_useState2=_slicedToArray(_useState,2),shouldHideHeader=_useState2[0],setShouldHideHeader=_useState2[1];useScrollDirectionChange({enabled:hideOnScroll,offset:scrollOffset,onlyFireOnScrollUpAtTop:onlyShowAtTop,onlyFireOnScrollUpAtTopOffset:onlyShowAtTopOffset,onScrollDown:function onScrollDown(){setShouldHideHeader(true);},onScrollUp:function onScrollUp(){setShouldHideHeader(false);}});useEffect(function(){if(typeof onChange!=='function'){return;}onChange(!shouldHideHeader);},[onChange,shouldHideHeader]);return React.createElement("div",{ref:ref,className:classNames(root,transition,className,_defineProperty(_defineProperty({},classNames(scrolledIn,classes===null||classes===void 0?void 0:classes.scrolledIn),!shouldHideHeader),classNames(scrolledOut,classes===null||classes===void 0?void 0:classes.scrolledOut),shouldHideHeader))},children);}/* eslint-enable react/prop-types */var ScrollHeader=forwardRef(ScrollHeaderBase);ScrollHeader.displayName='ScrollHeader';ScrollHeader.propTypes={children:PropTypes.node.isRequired,classes:PropTypes.shape({scrolledIn:PropTypes.string,scrolledOut:PropTypes.string}),className:PropTypes.string,hideOnScroll:PropTypes.bool,onChange:PropTypes.func,onlyShowAtTop:PropTypes.bool,onlyShowAtTopOffset:PropTypes.number,scrollOffset:PropTypes.number};ScrollHeader.defaultProps={className:null,hideOnScroll:true,scrollOffset:100,classes:{},onChange:null,onlyShowAtTop:false,onlyShowAtTopOffset:0};export default ScrollHeader;
+ */
+function ScrollHeaderBase({
+  className,
+  children,
+  hideOnScroll = true,
+  scrollOffset = 100,
+  onlyShowAtTop = false,
+  onlyShowAtTopOffset = 0,
+  onChange,
+  classes
+}, ref) {
+  const [shouldHideHeader, setShouldHideHeader] = useState(false);
+  useScrollDirectionChange({
+    enabled: hideOnScroll,
+    offset: scrollOffset,
+    onlyFireOnScrollUpAtTop: onlyShowAtTop,
+    onlyFireOnScrollUpAtTopOffset: onlyShowAtTopOffset,
+    onScrollDown: () => {
+      setShouldHideHeader(true);
+    },
+    onScrollUp: () => {
+      setShouldHideHeader(false);
+    }
+  });
+  useEffect(() => {
+    if (typeof onChange !== 'function') {
+      return;
+    }
+    onChange(!shouldHideHeader);
+  }, [onChange, shouldHideHeader]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: classNames(root, transition, className, {
+      [classNames(scrolledIn, classes?.scrolledIn)]: !shouldHideHeader,
+      [classNames(scrolledOut, classes?.scrolledOut)]: shouldHideHeader
+    })
+  }, children);
+}
+
+/* eslint-enable react/prop-types */
+
+const ScrollHeader = /*#__PURE__*/forwardRef(ScrollHeaderBase);
+ScrollHeader.displayName = 'ScrollHeader';
+ScrollHeader.propTypes = {
+  children: PropTypes.node.isRequired,
+  classes: PropTypes.shape({
+    scrolledIn: PropTypes.string,
+    scrolledOut: PropTypes.string
+  }),
+  className: PropTypes.string,
+  hideOnScroll: PropTypes.bool,
+  onChange: PropTypes.func,
+  onlyShowAtTop: PropTypes.bool,
+  onlyShowAtTopOffset: PropTypes.number,
+  scrollOffset: PropTypes.number
+};
+ScrollHeader.defaultProps = {
+  className: null,
+  hideOnScroll: true,
+  scrollOffset: 100,
+  classes: {},
+  onChange: null,
+  onlyShowAtTop: false,
+  onlyShowAtTopOffset: 0
+};
+export default ScrollHeader;

package/components/ScrollHeader/style.js

@@ -1 +1,25 @@
-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{css}from'glamor';import{responsiveMediaQuery}from'@shopgate/engage/styles';export var root=css(_defineProperty({position:'sticky',left:0,backgroundColor:'#fff'},responsiveMediaQuery('<=xs',{appAlways:true}),{boxShadow:'rgba(0, 0, 0, 0.118) 0px 1px 6px, rgba(0, 0, 0, 0.118) 0px 1px 4px'}));export var scrolledIn=css({'&&':{transform:'translateY(0%)'}});export var scrolledOut=css({'&&':{transform:'translateY(-250%)'}});export var transition=css({transition:'transform 0.2s ease,transform 0.2s'});
+import { css } from 'glamor';
+import { responsiveMediaQuery } from '@shopgate/engage/styles';
+export const root = css({
+  position: 'sticky',
+  left: 0,
+  backgroundColor: '#fff',
+  [responsiveMediaQuery('<=xs', {
+    appAlways: true
+  })]: {
+    boxShadow: 'rgba(0, 0, 0, 0.118) 0px 1px 6px, rgba(0, 0, 0, 0.118) 0px 1px 4px'
+  }
+});
+export const scrolledIn = css({
+  '&&': {
+    transform: 'translateY(0%)'
+  }
+});
+export const scrolledOut = css({
+  '&&': {
+    transform: 'translateY(-250%)'
+  }
+});
+export const transition = css({
+  transition: 'transform 0.2s ease,transform 0.2s'
+});