@shopgate/engage 7.32.0-beta.14 → 7.32.0-beta.15

package/filter/components/FilterPageContent/components/Selector/index.d.ts

@@ -0,0 +1,43 @@
+export interface FilterValue {
+    /**
+     * Id of the filter value.
+     */
+    id: string;
+    /**
+     * Display label of the filter value.
+     */
+    label: string;
+    /**
+     * Number of products available for the filter value.
+     */
+    hits?: number;
+}
+export interface SelectorProps {
+    /**
+     * Id of the filter.
+     */
+    id: string;
+    /**
+     * Display label of the filter.
+     */
+    label: string;
+    /**
+     * The selectable values of the filter.
+     */
+    values: FilterValue[];
+    /**
+     * Whether multiple values can be selected at once.
+     */
+    multi?: boolean;
+    /**
+     * Invoked with the filter id and the updated selection whenever a value is toggled.
+     */
+    onChange?: (id: string, selected: string[]) => void;
+    /**
+     * The currently selected value ids.
+     */
+    selected?: string[] | null;
+}
+declare const _default: import("react").MemoExoticComponent<({ id, label, values, multi, onChange, selected: selectedFromProps, }: SelectorProps) => import("react").JSX.Element>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/filter/components/FilterPageContent/components/Selector/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../filter/components/FilterPageContent/components/Selector/index.tsx"],"names":[],"mappings":"AA4CA,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpD;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;CAC5B;mIAaE,aAAa;AAwFhB,wBAA8B"}

package/filter/components/FilterPageContent/components/Selector/index.js

@@ -1,37 +1,54 @@
 import "core-js/modules/es.array.includes.js";
-import React, { useState, useEffect, useCallback, memo } from 'react';
-import PropTypes from 'prop-types';
+import { useState, useEffect, useCallback, useMemo, memo } from 'react';
+import noop from 'lodash/noop';
 import { Accordion, SurroundPortals } from '@shopgate/engage/components';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { makeStyles } from '@shopgate/engage/styles';
 import { FilterItem } from '@shopgate/engage/filter';
 import { PORTAL_FILTER_SELECTOR } from '@shopgate/engage/filter/constants';
-import ValueButton from "./components/ValueButton";
+import ValueCheckbox from "./components/ValueCheckbox";
 import Toggle from "./components/Toggle";
 import Selected from "./components/Selected";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()(theme => ({
   accordion: {
     overflow: 'hidden'
   },
+  chevron: {
+    alignSelf: 'flex-start'
+  },
   content: {
-    marginLeft: -8,
-    marginBottom: -8
+    paddingBottom: theme.spacing(1),
+    display: 'flex',
+    flexDirection: 'column'
   }
 }));
 
 /**
- * The selector component.
- * @param {Object} props Props.
- * @returns {JSX.Element}
+ * Formats selected filter value labels into a readable enumeration.
+ * @param labels Labels of the selected values.
+ * @returns The formatted enumeration.
+ */
+const formatSelectedLabels = labels => {
+  const {
+    ListFormat
+  } = Intl;
+  if (typeof ListFormat !== 'function') {
+    return labels.join(', ');
+  }
+  return new ListFormat(i18n.getLang()).format(labels);
+};
+/**
+ * The selector component renders a single filter as an accordion with selectable values.
+ * @returns The rendered component.
  */
 const Selector = ({
   id,
   label,
   values,
-  multi,
-  onChange,
-  selected: selectedFromProps
+  multi = false,
+  onChange = noop,
+  selected: selectedFromProps = null
 }) => {
   const {
     classes
@@ -40,10 +57,7 @@ const Selector = ({
   useEffect(() => {
     setSelected(selectedFromProps || []);
   }, [selectedFromProps]);
-  const handleClick = useCallback(event => {
-    const {
-      value
-    } = event.target;
+  const handleToggle = useCallback(value => {
     setSelected(prev => {
       let newSelected = [].concat(prev, [value]);
       if (!multi && prev.length === 1) {
@@ -56,21 +70,24 @@ const Selector = ({
       return newSelected;
     });
   }, [id, multi, onChange]);
-  const handlePortalChange = useCallback(updatedId => {
-    handleClick({
-      target: {
-        value: updatedId
-      }
-    });
-  }, [handleClick]);
-  const renderLabel = useCallback(props => /*#__PURE__*/_jsx(Toggle, {
-    ...props,
+  const selectedValues = useMemo(() => values.filter(value => selected.includes(value.id)), [selected, values]);
+  const renderLabel = useCallback(() => /*#__PURE__*/_jsx(Toggle, {
     label: label,
     selected: /*#__PURE__*/_jsx(Selected, {
-      values: values,
-      selected: selected
+      values: selectedValues
     })
-  }), [label, selected, values]);
+  }), [label, selectedValues]);
+  const handleLabel = useMemo(() => {
+    if (selectedValues.length === 0) {
+      return i18n.text('filter.filter_by', {
+        label
+      });
+    }
+    return i18n.text('filter.filter_by_with_selected', {
+      label,
+      selected: formatSelectedLabels(selectedValues.map(value => value.label))
+    });
+  }, [label, selectedValues]);
   return /*#__PURE__*/_jsx(SurroundPortals, {
     portalName: PORTAL_FILTER_SELECTOR,
     portalProps: {
@@ -81,32 +98,27 @@ const Selector = ({
         isMultiSelect: multi
       },
       selectedValueIds: selected,
-      onChange: handlePortalChange
+      onChange: handleToggle
     },
     children: /*#__PURE__*/_jsx(FilterItem, {
       children: /*#__PURE__*/_jsx(Accordion, {
         renderLabel: renderLabel,
         testId: id,
-        handleLabel: i18n.text('filter.filter_by', {
-          label
-        }),
+        handleLabel: handleLabel,
         className: classes.accordion,
+        chevronClassName: classes.chevron,
         children: /*#__PURE__*/_jsx("div", {
           className: classes.content,
-          children: values.map(value => /*#__PURE__*/_jsx(ValueButton, {
+          children: values.map(value => /*#__PURE__*/_jsx(ValueCheckbox, {
             id: value.id,
             label: value.label,
-            isActive: selected && selected.includes(value.id),
-            onClick: handleClick
+            hits: value.hits,
+            isActive: selected.includes(value.id),
+            onToggle: handleToggle
           }, value.id))
         })
       })
     })
   });
 };
-Selector.defaultProps = {
-  multi: false,
-  onChange() {},
-  selected: null
-};
 export default /*#__PURE__*/memo(Selector);

package/filter/components/FilterPageContent/index.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentType } from 'react';
+export interface FilterPageContentProps {
+    /**
+     * The component to be rendered as the app bar.
+     */
+    AppBarComponent?: ComponentType<{
+        title?: string;
+    }> | null;
+}
+/**
+ * The FilterPageContent component renders all filters for the filter page.
+ * @returns The rendered component.
+ */
+declare const FilterPageContent: ({ AppBarComponent }: FilterPageContentProps) => import("react").JSX.Element;
+export default FilterPageContent;
+//# sourceMappingURL=index.d.ts.map

package/filter/components/FilterPageContent/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../filter/components/FilterPageContent/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAyB3C,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG,IAAI,CAAC;CAC5D;AAED;;;GAGG;AACH,QAAA,MAAM,iBAAiB,GAAI,qBAA4B,sBAAsB,gCAmD5E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/filter/components/FilterPageContent/index.js

@@ -1,78 +1,72 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { SurroundPortals, ResponsiveContainer } from '@shopgate/engage/components';
+import { Fragment } from 'react';
+import { SurroundPortals } from '@shopgate/engage/components';
 import { useFilterPage } from '@shopgate/engage/filter/hooks';
+import { makeStyles } from '@shopgate/engage/styles';
 import { PORTAL_FILTER_PRICE_RANGE, PORTAL_FILTER_PAGE_CONTENT, FILTER_TYPE_RANGE, FILTER_TYPE_MULTISELECT, PriceSlider } from '@shopgate/engage/filter';
 import Selector from "./components/Selector";
-import ApplyButton from "./components/ApplyButton";
-import ResetButton from "./components/ResetButton";
-
+import FilterButtonBar from "./components/FilterButtonBar";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  content: {
+    color: theme.palette.text.primary,
+    [theme.breakpoints.up('md')]: {
+      width: '100%',
+      maxWidth: 640,
+      margin: '0 auto'
+    }
+  }
+}));
 /**
  * The FilterPageContent component renders all filters for the filter page.
- * @param {Object} props The component props.
- * @param {React.ComponentType} props.AppBarComponent The component to be rendered as the app bar
- * @returns {JSX.Element}
+ * @returns The rendered component.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const FilterPageContent = ({
-  AppBarComponent
+  AppBarComponent = null
 }) => {
+  const {
+    classes
+  } = useStyles();
   const {
     apiFilters,
-    resetPossible,
-    hasChanged,
-    applyFilters,
-    resetAllFilters,
     getSelectedFilterValues,
     updateSelectedFilterValues
   } = useFilterPage();
   return /*#__PURE__*/_jsxs(SurroundPortals, {
     portalName: PORTAL_FILTER_PAGE_CONTENT,
     children: [AppBarComponent && /*#__PURE__*/_jsx(AppBarComponent, {
-      title: "titles.filter",
-      right: /*#__PURE__*/_jsx(ApplyButton, {
-        disabled: !hasChanged,
-        onClick: applyFilters
-      })
-    }), apiFilters.map(filter => {
-      const portalProps = {
-        filter
-      };
-      const value = getSelectedFilterValues(filter.id);
-      if (filter.type === FILTER_TYPE_RANGE) {
-        return /*#__PURE__*/_jsx(Fragment, {
-          children: /*#__PURE__*/_jsx(SurroundPortals, {
-            portalName: PORTAL_FILTER_PRICE_RANGE,
-            portalProps: portalProps,
-            children: /*#__PURE__*/_jsx(PriceSlider, {
-              id: filter.id,
-              min: filter.minimum,
-              max: filter.maximum,
-              onChange: updateSelectedFilterValues,
-              value: value
-            }, filter.id)
-          })
+      title: "titles.filter"
+    }), /*#__PURE__*/_jsx("div", {
+      className: classes.content,
+      children: apiFilters.map(filter => {
+        const portalProps = {
+          filter
+        };
+        const value = getSelectedFilterValues(filter.id);
+        if (filter.type === FILTER_TYPE_RANGE) {
+          return /*#__PURE__*/_jsx(Fragment, {
+            children: /*#__PURE__*/_jsx(SurroundPortals, {
+              portalName: PORTAL_FILTER_PRICE_RANGE,
+              portalProps: portalProps,
+              children: /*#__PURE__*/_jsx(PriceSlider, {
+                id: filter.id,
+                min: filter.minimum,
+                max: filter.maximum,
+                onChange: updateSelectedFilterValues,
+                value: value
+              }, filter.id)
+            })
+          }, filter.id);
+        }
+        return /*#__PURE__*/_jsx(Selector, {
+          id: filter.id,
+          label: filter.label,
+          values: filter.values,
+          multi: filter.type === FILTER_TYPE_MULTISELECT,
+          onChange: updateSelectedFilterValues,
+          selected: value
         }, filter.id);
-      }
-      return /*#__PURE__*/_jsx(Selector, {
-        id: filter.id,
-        label: filter.label,
-        values: filter.values,
-        multi: filter.type === FILTER_TYPE_MULTISELECT,
-        onChange: updateSelectedFilterValues,
-        selected: value
-      }, filter.id);
-    }), /*#__PURE__*/_jsx(ResponsiveContainer, {
-      breakpoint: "<sm",
-      appAlways: true,
-      children: /*#__PURE__*/_jsx(ResetButton, {
-        disabled: !resetPossible,
-        onClick: resetAllFilters
       })
-    })]
+    }), /*#__PURE__*/_jsx(FilterButtonBar, {})]
   });
 };
-FilterPageContent.defaultProps = {
-  AppBarComponent: null
-};
 export default FilterPageContent;

package/filter/components/PriceSlider/components/Label/index.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.string.replace.js";
-import React, { memo, useState, useEffect, useRef } from 'react';
+import React, { memo, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import appConfig from '@shopgate/pwa-common/helpers/config';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
@@ -10,39 +10,23 @@ const {
   currency
 } = appConfig;
 const useStyles = makeStyles()(theme => ({
-  price: {
-    color: theme.palette.secondary.main,
-    display: 'inline-block',
-    fontWeight: theme.typography.fontWeightMedium,
-    textAlign: 'center'
-  },
-  editableContainer: {
-    position: 'relative'
-  },
   editableField: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
+    color: theme.palette.text.primary,
+    fontWeight: theme.typography.fontWeightMedium,
     textAlign: 'center',
-    background: 'transparent',
-    zIndex: 2,
-    textIndent: -800,
+    background: theme.palette.background.surface,
     outline: 'none',
-    padding: 0,
-    margin: 0,
-    border: '1px solid transparent',
+    padding: theme.spacing(0.5, 0),
+    margin: theme.spacing(0, 0.5),
+    border: `1px solid ${theme.components.input.border}`,
     borderRadius: 3,
     ':focus': {
-      background: theme.components.input.background,
-      textIndent: 0,
       borderColor: theme.components.border.medium
     },
     [responsiveMediaQuery('>=xs', {
       webOnly: true
     })]: {
       borderColor: theme.palette.primary.main,
-      padding: '4px 0',
-      top: -4,
       ':focus': {
         borderColor: theme.palette.primary.main
       }
@@ -58,9 +42,24 @@ const useStyles = makeStyles()(theme => ({
     clip: 'rect(0, 0, 0, 0)',
     whiteSpace: 'nowrap',
     border: 0
+  },
+  priceField: {
+    display: 'inline-flex',
+    alignItems: 'center'
+  },
+  currencySymbol: {
+    color: theme.palette.text.secondary,
+    marginRight: theme.spacing(0.25)
   }
 }));
 
+/**
+ * Builds the width a price field needs to fit the longer of its value and the highest price.
+ * @param {number} length Amount of characters the field has to fit.
+ * @returns {string}
+ */
+const fieldWidth = length => `${length + 2}ch`;
+
 /**
  * The filter price range slider label component.
  * @param {Object} props The component props.
@@ -78,10 +77,6 @@ function Label(props) {
   } = props;
   const [minValue, setMinValue] = useState(priceMin);
   const [maxValue, setMaxValue] = useState(priceMax);
-  const [minOffset, setMinOffset] = useState(0);
-  const [maxOffset, setMMaxOffset] = useState(0);
-  const minRef = useRef(null);
-  const maxRef = useRef(null);
 
   // Set new values, when prices change from outside.
   useEffect(() => {
@@ -89,12 +84,6 @@ function Label(props) {
     setMaxValue(priceMax);
   }, [priceMin, priceMax]);
 
-  // Store the leftOffset when the reference changes.
-  useEffect(() => {
-    setMinOffset(minRef.current.offsetLeft);
-    setMMaxOffset(maxRef.current.offsetLeft);
-  }, [minRef, maxRef]);
-
   /**
    * Selects the field content on click.
    * @param {SyntheticEvent} event The click event object.
@@ -102,7 +91,7 @@ function Label(props) {
   function handleFieldClick({
     target
   }) {
-    target.setSelectionRange(0, target.value.length);
+    target.select();
   }
 
   /**
@@ -135,7 +124,6 @@ function Label(props) {
     currency
   }).format('0').replace('0.00', '');
   return /*#__PURE__*/_jsxs("div", {
-    className: classes.editableContainer,
     children: [/*#__PURE__*/_jsx("span", {
       className: classes.srOnly,
       children: i18n.text('price.range', {
@@ -147,70 +135,57 @@ function Label(props) {
       "aria-hidden": true,
       children: [/*#__PURE__*/_jsx(I18n.Placeholder, {
         forKey: "fromPrice",
-        children: /*#__PURE__*/_jsx("span", {
-          className: classes.price,
-          style: {
-            minWidth: priceLength
-          },
-          ref: minRef,
-          children: /*#__PURE__*/_jsx(I18n.Price, {
-            price: priceMin,
-            currency: currency,
-            fractions: false
-          })
+        children: /*#__PURE__*/_jsxs("span", {
+          className: classes.priceField,
+          children: [/*#__PURE__*/_jsx("span", {
+            "aria-hidden": true,
+            className: classes.currencySymbol,
+            id: "price-slider-currency-label-min",
+            children: currencySymbol
+          }), /*#__PURE__*/_jsx("input", {
+            type: "number",
+            inputMode: "numeric",
+            pattern: "[0-9]*",
+            id: "priceMin",
+            name: "priceMin",
+            value: minValue,
+            onChange: handleChangeMin,
+            onClick: handleFieldClick,
+            style: {
+              width: fieldWidth(Math.max(priceLength, String(minValue).length))
+            },
+            className: classes.editableField,
+            "aria-label": i18n.text('price.range_from'),
+            "aria-describedby": "price-slider-currency-label-min"
+          })]
         })
       }), /*#__PURE__*/_jsx(I18n.Placeholder, {
         forKey: "toPrice",
-        children: /*#__PURE__*/_jsx("span", {
-          className: classes.price,
-          style: {
-            minWidth: priceLength
-          },
-          ref: maxRef,
-          children: /*#__PURE__*/_jsx(I18n.Price, {
-            price: priceMax,
-            currency: currency,
-            fractions: false
-          })
+        children: /*#__PURE__*/_jsxs("span", {
+          className: classes.priceField,
+          children: [/*#__PURE__*/_jsx("span", {
+            "aria-hidden": true,
+            className: classes.currencySymbol,
+            id: "price-slider-currency-label-max",
+            children: currencySymbol
+          }), /*#__PURE__*/_jsx("input", {
+            type: "number",
+            inputMode: "numeric",
+            pattern: "[0-9]*",
+            id: "priceMax",
+            name: "priceMax",
+            value: maxValue,
+            onChange: handleChangeMax,
+            onClick: handleFieldClick,
+            style: {
+              width: fieldWidth(Math.max(priceLength, String(maxValue).length))
+            },
+            className: classes.editableField,
+            "aria-label": i18n.text('price.range_to'),
+            "aria-describedby": "price-slider-currency-label-max"
+          })]
         })
       })]
-    }), /*#__PURE__*/_jsx("span", {
-      "aria-hidden": true,
-      hidden: true,
-      id: "price-slider-currency-label",
-      children: currencySymbol
-    }), /*#__PURE__*/_jsx("input", {
-      type: "number",
-      inputMode: "numeric",
-      pattern: "[0-9]*",
-      id: "priceMin",
-      name: "priceMin",
-      value: minValue,
-      onChange: handleChangeMin,
-      onClick: handleFieldClick,
-      style: {
-        width: priceLength,
-        left: minOffset
-      },
-      className: classes.editableField,
-      "aria-label": i18n.text('price.range_from'),
-      "aria-describedby": "price-slider-currency-label"
-    }), /*#__PURE__*/_jsx("input", {
-      type: "number",
-      inputMode: "numeric",
-      pattern: "[0-9]*",
-      id: "priceMax",
-      name: "priceMax",
-      value: maxValue,
-      onChange: handleChangeMax,
-      onClick: handleFieldClick,
-      style: {
-        width: priceLength,
-        left: maxOffset
-      },
-      className: classes.editableField,
-      "aria-label": i18n.text('price.range_to'),
-      "aria-describedby": "price-slider-currency-label"
     })]
   });
 }