@shopgate/engage 7.28.0-beta.6 → 7.29.0-alpha.2

package/styles/theme/hooks/index.js

@@ -0,0 +1 @@
+export{default as useActiveBreakpoint}from"./useActiveBreakpoint";export{default as useMediaQuery}from"./useMediaQuery";export{default as useResponsiveValue}from"./useResponsiveValue";export{default as useTheme}from"./useTheme";

package/styles/theme/hooks/useActiveBreakpoint.d.ts

@@ -0,0 +1,18 @@
+import { Breakpoint } from '..';
+
+/**
+ * Returns the active breakpoint for the current window size.
+ *
+ * @example
+ * ```js
+ * import React from 'react';
+ * import { useActiveBreakpoint } from '@shopgate/engage/styles';
+ *
+ * export default function MyComponent() {
+ *   const activeBreakpoint = useActiveBreakpoint();
+ *
+ *   return (<span>{`active breakpoint: ${activeBreakpoint}`}</span>)
+ * }
+ * ```
+ */
+export default function useActiveBreakpoint(): Breakpoint;

package/styles/theme/hooks/useActiveBreakpoint.js

@@ -0,0 +1,4 @@
+import{useContext}from'react';import{ActiveBreakpointContext}from"../providers/ActiveBreakpointProvider";// eslint-disable-next-line valid-jsdoc
+/**
+ * Returns the active breakpoint for the current window size.
+ */var useActiveBreakpoint=function useActiveBreakpoint(){return useContext(ActiveBreakpointContext);};export default useActiveBreakpoint;

package/styles/theme/hooks/useMediaQuery.d.ts

@@ -0,0 +1,33 @@
+import { Theme } from '..';
+
+/**
+ * Creates a media query hook that can be used to check if a media query matches the current
+ * viewport.
+ * @param {string|ThemeFn} queryInput The media query string or a function that receives the theme
+ * and returns a media query string.
+ * @returns {boolean} Returns true if the media query matches, false otherwise.
+ *
+ * @example Use the useTheme hook to get access to the breakpoint helper functions:
+ * ```js
+ * import React from 'react';
+ * import { useTheme, useMediaQuery } from '@shopgate/engage/styles';
+ *
+ * export default function MyComponent() {
+ *   const theme = useTheme();
+ *   const matches = useMediaQuery(theme.breakpoints.up('sm'));
+ *
+ *   return (<span>{`theme.breakpoints.up('sm') matches: ${matches}`}</span>)
+ * }
+ *```
+ * @example Alternatively, you can use a callback function, accepting the theme as a first argument:
+ * ```js
+ * import React from 'react';
+ * import { useMediaQuery } from '@shopgate/engage/styles';
+ *
+ * export default function MyComponent() {
+ *   const matches = useMediaQuery((theme) => theme.breakpoints.up('sm'));
+ *
+ *   return (<span>{`theme.breakpoints.up('sm') matches: ${matches}`}</span>)
+ * }
+ */
+export default function useMediaQuery(queryInput: string | ((theme: Theme) => string)): boolean;

package/styles/theme/hooks/useMediaQuery.js

@@ -0,0 +1,20 @@
+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{useState,useEffect}from'react';import useTheme from"./useTheme";/**
+ * React hook to check if a media query matches the current viewport.
+ * Doesn't accept media query strings that start with '@media'.
+ * @param {string} query A media query string, e.g. '(min-width: 600px)'
+ * @returns {boolean} Returns true if the media query matches, false otherwise.
+ */var useMediaQueryInternal=function useMediaQueryInternal(query){var _useState=useState(function(){return window.matchMedia(query).matches;}),_useState2=_slicedToArray(_useState,2),match=_useState2[0],setMatch=_useState2[1];useEffect(function(){var queryList=window.matchMedia(query);/**
+     * Update the match state when the media query changes.
+     */var updateMatch=function updateMatch(){setMatch(queryList.matches);};queryList.addEventListener('change',updateMatch);return function(){queryList.removeEventListener('change',updateMatch);};},[query]);return match;};/**
+ * @typedef {import('./useTheme').Theme} Theme
+ */ /**
+ * @callback ThemeFn
+ * @param {Theme} theme The current theme object.
+ */ /**
+ * Creates a media query hook that can be used to check if a media query matches the current
+ * viewport.
+ * @param {string|ThemeFn} queryInput The media query string or a function that receives the theme
+ * and returns a media query string.
+ * @returns {boolean} Returns true if the media query matches, false otherwise.
+ */var useMediaQuery=function useMediaQuery(queryInput){var theme=useTheme();var query=typeof queryInput==='function'?queryInput(theme):queryInput;// Remove the '@media' prefix if it exists, as useMediaQueryInternal expects a plain media query.
+query=query.replace(/^@media( ?)/m,'');var match=useMediaQueryInternal(query);return match;};export default useMediaQuery;

package/styles/theme/hooks/useResponsiveValue.d.ts

@@ -0,0 +1,27 @@
+import { Breakpoint } from '..';
+
+type BreakpointValueMap<T> = Partial<Record<Breakpoint, T>>;
+
+/**
+ * Returns the value for the current breakpoint based on the provided responsive values object.
+ * It is also responsive to window resizing and returning the appropriate value according to the
+ * new window size.
+ * @param values The responsive values object
+ * @example
+ * ```js
+ * import React from 'react';
+ * import { useResponsiveValue } from '@shopgate/engage/styles';
+ *
+ * export default function MyComponent() {
+ *   const flexDir = useResponsiveValue({
+ *     xs: "column",
+ *     lg: "row"
+ *   });
+ *
+ *   return (<span style={{ display: 'flex', flexDirection: flexDir }} />)
+ * }
+ * ```
+ */
+export default function useResponsiveValue<const T extends BreakpointValueMap<any>>(
+  values: T
+): T[keyof T];

package/styles/theme/hooks/useResponsiveValue.js

@@ -0,0 +1,4 @@
+import useTheme from"./useTheme";import useActiveBreakpoint from"./useActiveBreakpoint";// eslint-disable-next-line require-jsdoc
+var useResponsiveValue=function useResponsiveValue(values){var theme=useTheme();var active=useActiveBreakpoint();if(!active)return undefined;// Get the keys of the breakpoints in the theme
+var breakpoints=[].concat(theme.breakpoints.keys);var activeIndex=breakpoints.indexOf(active);// Walk from the active breakpoint down to smallest
+for(var i=activeIndex;i>=0;i-=1){var bp=breakpoints[i];if(values[bp]!==undefined){return values[bp];}}return undefined;};export default useResponsiveValue;

package/styles/theme/hooks/useTheme.d.ts

@@ -0,0 +1,8 @@
+import { type Theme } from '..';
+
+export type { Theme } from '..';
+
+/**
+ * Returns the theme object.
+ */
+export default function useTheme<T = Theme>(): T;

package/styles/theme/hooks/useTheme.js

@@ -0,0 +1,4 @@
+import{useContext}from'react';import{ThemeContext}from"../providers/ThemeProvider";// eslint-disable-next-line valid-jsdoc
+/**
+ * Returns the theme object.
+ */var useTheme=function useTheme(){return useContext(ThemeContext);};export default useTheme;

package/styles/theme/index.d.ts

@@ -0,0 +1,8 @@
+export { default as ThemeProvider } from './providers/ThemeProvider';
+export { createTheme, Theme, Breakpoint } from './createTheme';
+export {
+  useActiveBreakpoint,
+  useMediaQuery,
+  useResponsiveValue,
+  useTheme,
+} from './hooks';

package/styles/theme/index.js

@@ -0,0 +1 @@
+export{default as ThemeProvider}from"./providers/ThemeProvider";export{createTheme}from"./createTheme";export{useActiveBreakpoint,useMediaQuery,useResponsiveValue,useTheme}from"./hooks";

package/styles/theme/providers/ActiveBreakpointProvider.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode, JSX, Context } from 'react';
+import { Breakpoint } from '..';
+
+/**
+ * React Context for current active breakpoint.
+ */
+export const ActiveBreakpointContext: Context<Breakpoint | undefined>;
+
+/**
+ * Props for the ActiveBreakpointProvider.
+ */
+export interface ActiveBreakpointProviderProps {
+  children: ReactNode;
+}
+
+/**
+ * Provides the current active breakpoint to child components.
+ */
+declare function ActiveBreakpointProvider(props: ActiveBreakpointProviderProps): JSX.Element;
+
+export default ActiveBreakpointProvider;

package/styles/theme/providers/ActiveBreakpointProvider.js

@@ -0,0 +1,13 @@
+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,{createContext,useEffect,useState}from'react';import PropTypes from'prop-types';import{useTheme}from'@shopgate/engage/styles';/**
+ * @typedef {import('..').Breakpoint} Breakpoint
+ */ /** @type {import('react').Context<Breakpoint>} */export var ActiveBreakpointContext=createContext(undefined);/**
+ * @param {Object} props The component props
+ * @param {React.ReactNode} props.children The children to render within the provider
+ * @returns {JSX.Element} The ActiveBreakpointProvider component
+ */var ActiveBreakpointProvider=function ActiveBreakpointProvider(_ref){var children=_ref.children;var theme=useTheme();// ['xl', 'lg', ..., 'xs']
+var breakpoints=[].concat(theme.breakpoints.keys).reverse();/**
+   * Retrieve the initial breakpoint based on the current window size.
+   * @returns {Breakpoint|undefined} The initial breakpoint based on the current window size.
+   */var getInitialBreakpoint=function getInitialBreakpoint(){if(typeof window==='undefined')return undefined;return breakpoints.find(function(bp){return window.matchMedia(theme.breakpoints.up(bp).replace(/^@media( ?)/m,'')).matches;});};/** @type {[Breakpoint, React.Dispatch<React.SetStateAction<Breakpoint>>]} */var _useState=useState(getInitialBreakpoint),_useState2=_slicedToArray(_useState,2),active=_useState2[0],setActive=_useState2[1];useEffect(function(){if(typeof window==='undefined')return undefined;var queries=breakpoints.map(function(bp){return{bp:bp,mql:window.matchMedia(theme.breakpoints.up(bp).replace(/^@media( ?)/m,''))};});/**
+     * Updates the active breakpoint based on the current media query matches.
+     */var update=function update(){var matched=queries.find(function(_ref2){var mql=_ref2.mql;return mql.matches;});setActive(matched===null||matched===void 0?void 0:matched.bp);};queries.forEach(function(_ref3){var mql=_ref3.mql;return mql.addEventListener('change',update);});return function(){return queries.forEach(function(_ref4){var mql=_ref4.mql;return mql.removeEventListener('change',update);});};},[breakpoints,theme]);return React.createElement(ActiveBreakpointContext.Provider,{value:active},children);};export default ActiveBreakpointProvider;

package/styles/theme/providers/ThemeProvider.d.ts

@@ -0,0 +1,18 @@
+import { Theme } from '..';
+
+export const ThemeContext: React.Context<Theme>;
+
+export interface ThemeProviderProps<Theme = Theme> {
+  children: React.ReactNode;
+  /**
+   * The theme object to provide to the context.
+   */
+  theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
+}
+
+/**
+ * The ThemeProvider component provides the theme context to its children.
+ */
+export default function ThemeProvider<T = Theme>(
+  props: ThemeProviderProps<T>
+): React.ReactElement<ThemeProviderProps<T>>;

package/styles/theme/providers/ThemeProvider.js

@@ -0,0 +1,7 @@
+import React,{createContext,memo}from'react';import PropTypes from'prop-types';import ActiveBreakpointProvider from"./ActiveBreakpointProvider";/** @typedef {import('../index').Theme} Theme */ /** @type {import('react').Context<Theme>} */export var ThemeContext=createContext();/**
+ * The ThemeProvider component provides the theme context to its children.
+ * @param {Object} props The component props
+ * @param {Theme} props.theme The theme object to provide
+ * @param {React.ReactNode} props.children The children to render within the provider
+ * @returns {JSX.Element} The ThemeProvider component
+ */var ThemeProvider=function ThemeProvider(_ref){var children=_ref.children,theme=_ref.theme;return React.createElement(ThemeContext.Provider,{value:theme},React.createElement(ActiveBreakpointProvider,null,children));};export default memo(ThemeProvider);

package/styles/tss/index.js

@@ -0,0 +1,3 @@
+import createCache from'@emotion/cache';import{createMakeAndWithStyles,createTss}from'tss-react';import{useTheme}from'@shopgate/engage/styles';export{GlobalStyles,keyframes}from'tss-react';export var emotionCache=createCache({// All tss-react styles will be prefixed with `.tss-*` instead of `.css-*`
+key:'tss'});var _createTss=createTss({useContext:useTheme}),tss=_createTss.tss;// Create makeStyles and withStyles functions for tss-react package
+export{tss};var _createMakeAndWithSty=createMakeAndWithStyles({useTheme:useTheme}),makeStyles=_createMakeAndWithSty.makeStyles,withStyles=_createMakeAndWithSty.withStyles;export{makeStyles,withStyles};

package/tracking/selectors/cookieConsent.js

@@ -1,4 +1,4 @@
-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{createSelector}from'reselect';import{appConfig}from'@shopgate/engage';import{appSupportsCookieConsent}from'@shopgate/engage/core/helpers';var _appConfig$cookieCons=appConfig.cookieConsent,_appConfig$cookieCons2=_appConfig$cookieCons===void 0?{}:_appConfig$cookieCons,isCookieConsentActivated=_appConfig$cookieCons2.isCookieConsentActivated,showComfortCookiesToggle=_appConfig$cookieCons2.showComfortCookiesToggle;/**
+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{createSelector}from'reselect';import{appConfig}from'@shopgate/engage';import{IS_PAGE_PREVIEW_ACTIVE}from'@shopgate/engage/page/constants';import{appSupportsCookieConsent}from'@shopgate/engage/core/helpers';var _appConfig$cookieCons=appConfig.cookieConsent,_appConfig$cookieCons2=_appConfig$cookieCons===void 0?{}:_appConfig$cookieCons,isCookieConsentActivated=_appConfig$cookieCons2.isCookieConsentActivated,showComfortCookiesToggle=_appConfig$cookieCons2.showComfortCookiesToggle;/**
  * Selects the cookie consent modal state.
  * @param {Object} state The current state of the cookie consent modal.
  * @returns {Object} whether cookie consent modal is shown.
@@ -11,7 +11,7 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  * inactive, app doesn't support the feature).
  * @returns {boolean} Whether the cookie consent process is handled either by user
  * or by app/feature settings
- */export var getIsCookieConsentHandled=createSelector(getCookieSettingsState,function(settingsState){if(!isCookieConsentActivated||!appSupportsCookieConsent()){return true;}return(settingsState===null||settingsState===void 0?void 0:settingsState.comfortCookiesAccepted)!==null||(settingsState===null||settingsState===void 0?void 0:settingsState.statisticsCookiesAccepted)!==null;});/**
+ */export var getIsCookieConsentHandled=createSelector(getCookieSettingsState,function(settingsState){if(!isCookieConsentActivated||!appSupportsCookieConsent()||IS_PAGE_PREVIEW_ACTIVE){return true;}return(settingsState===null||settingsState===void 0?void 0:settingsState.comfortCookiesAccepted)!==null||(settingsState===null||settingsState===void 0?void 0:settingsState.statisticsCookiesAccepted)!==null;});/**
  * Selects the property of the comfort cookie settings.
  * @private This selector is intended to be used internally. When a cookie consent status needs
  * to be checked for a feature, please use `getAreComfortCookiesAccepted` instead.