From be421b7e8871e440273e05f4d57aef14f7f7d1c4 Mon Sep 17 00:00:00 2001
From: Vasilii Burlacu <v.burlacu@atwix.com>
Date: Fri, 19 Feb 2021 15:52:19 +0200
Subject: [PATCH 01/39] #1222 - a11y for Layered Navigation

---
 .../venia-ui/lib/components/Button/button.js  |  2 ++
 .../lib/components/Checkbox/checkbox.js       |  4 ++--
 .../CurrentFilters/currentFilter.js           | 11 ++++++++-
 .../CurrentFilters/currentFilters.js          |  9 ++++++-
 .../FilterModal/FilterList/filterDefault.js   | 19 ++++++++++++++-
 .../lib/components/FilterModal/filterBlock.js | 16 +++++++++++++
 .../components/FilterModal/filterFooter.js    | 14 ++++++-----
 .../lib/components/FilterModal/filterModal.js | 24 +++++++++++++++----
 .../lib/components/Trigger/trigger.js         |  4 ++--
 9 files changed, 86 insertions(+), 17 deletions(-)

diff --git a/packages/venia-ui/lib/components/Button/button.js b/packages/venia-ui/lib/components/Button/button.js
index 1a373627d6..b3b666deaf 100644
--- a/packages/venia-ui/lib/components/Button/button.js
+++ b/packages/venia-ui/lib/components/Button/button.js
@@ -25,6 +25,7 @@ const Button = props => {
         type,
         negative,
         disabled,
+        ariaLabel,
         ...restProps
     } = props;
     const classes = mergeClasses(defaultClasses, propClasses);
@@ -35,6 +36,7 @@ const Button = props => {
             className={rootClassName}
             type={type}
             disabled={disabled}
+            aria-label={ariaLabel}
             {...restProps}
         >
             <span className={classes.content}>{children}</span>
diff --git a/packages/venia-ui/lib/components/Checkbox/checkbox.js b/packages/venia-ui/lib/components/Checkbox/checkbox.js
index 41f5e56806..baafb91eaa 100644
--- a/packages/venia-ui/lib/components/Checkbox/checkbox.js
+++ b/packages/venia-ui/lib/components/Checkbox/checkbox.js
@@ -33,13 +33,13 @@ export class Checkbox extends Component {
     };
 
     render() {
-        const { classes, fieldState, id, label, message, ...rest } = this.props;
+        const { classes, fieldState, id, label, message, ariaLabel, ...rest } = this.props;
         const { value: checked } = fieldState;
         const icon = checked ? checkedIcon : uncheckedIcon;
 
         return (
             <Fragment>
-                <label className={classes.root} htmlFor={id}>
+                <label className={classes.root} htmlFor={id} aria-label={ariaLabel}>
                     <BasicCheckbox
                         {...rest}
                         className={classes.input}
diff --git a/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilter.js b/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilter.js
index 23a57203f4..4686827ef6 100644
--- a/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilter.js
+++ b/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilter.js
@@ -1,4 +1,5 @@
 import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl';
 import { shape, string } from 'prop-types';
 import { X as Remove } from 'react-feather';
 
@@ -9,15 +10,23 @@ import defaultClasses from './currentFilter.css';
 
 const CurrentFilter = props => {
     const { group, item, removeItem } = props;
+    const { formatMessage } = useIntl();
     const classes = mergeClasses(defaultClasses, props.classes);
 
     const handleClick = useCallback(() => {
         removeItem({ group, item });
     }, [group, item, removeItem]);
 
+    const ariaLabel = formatMessage({
+        id: 'filterModal.action.clearFilterItem.ariaLabel',
+        defaultMessage: 'Clear filter "{name}"'
+    }, {
+        name: item.title
+    });
+
     return (
         <span className={classes.root}>
-            <Trigger action={handleClick}>
+            <Trigger action={handleClick} ariaLabel={ariaLabel}>
                 <Icon size={20} src={Remove} />
             </Trigger>
             <span className={classes.text}>{item.title}</span>
diff --git a/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilters.js b/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilters.js
index a2051738dd..52a28d5503 100644
--- a/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilters.js
+++ b/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilters.js
@@ -4,11 +4,13 @@ import { shape, string } from 'prop-types';
 import { mergeClasses } from '../../../classify';
 import CurrentFilter from './currentFilter';
 import defaultClasses from './currentFilters.css';
+import { useIntl } from "react-intl";
 
 const CurrentFilters = props => {
     const { filterApi, filterState } = props;
     const { removeItem } = filterApi;
     const classes = mergeClasses(defaultClasses, props.classes);
+    const { formatMessage } = useIntl();
 
     // create elements and params at the same time for efficiency
     const filterElements = useMemo(() => {
@@ -33,7 +35,12 @@ const CurrentFilters = props => {
         return elements;
     }, [classes.item, filterState, removeItem]);
 
-    return <ul className={classes.root}>{filterElements}</ul>;
+    const currentFiltersAriaLabel = formatMessage({
+        id: 'filterModal.currentFilters.ariaLabel',
+        defaultMessage: 'Current Filters'
+    });
+
+    return <ul className={classes.root} aria-label={currentFiltersAriaLabel}>{filterElements}</ul>;
 };
 
 CurrentFilters.propTypes = {
diff --git a/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js b/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js
index 968ef03cec..67f8f7689a 100644
--- a/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js
+++ b/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useIntl } from "react-intl";
 import { bool, shape, string } from 'prop-types';
 
 import Checkbox from '../../Checkbox';
@@ -6,10 +7,25 @@ import { mergeClasses } from '../../../classify';
 import defaultClasses from './filterDefault.css';
 
 const FilterDefault = props => {
-    const { classes: propsClasses, isSelected, item, ...restProps } = props;
+    const { classes: propsClasses, isSelected, item, title, ...restProps } = props;
     const { label, value_index } = item || {};
+    const { formatMessage } = useIntl();
     const classes = mergeClasses(defaultClasses, propsClasses);
 
+    const ariaLabel = !isSelected
+        ? formatMessage({
+            id: 'filterModal.item.applyFilter',
+            defaultMessage: 'Apply filter "{optionName}".',
+        }, {
+            optionName: label
+        })
+        : formatMessage({
+            id: 'filterModal.item.clearFilter',
+            defaultMessage: 'Remove filter "{optionName}".'
+        }, {
+            optionName: label
+        });
+
     return (
         <Checkbox
             classes={classes.root}
@@ -18,6 +34,7 @@ const FilterDefault = props => {
                 value: isSelected
             }}
             label={label}
+            ariaLabel={ariaLabel}
             {...restProps}
         />
     );
diff --git a/packages/venia-ui/lib/components/FilterModal/filterBlock.js b/packages/venia-ui/lib/components/FilterModal/filterBlock.js
index bbd7dfa22a..c65af90855 100644
--- a/packages/venia-ui/lib/components/FilterModal/filterBlock.js
+++ b/packages/venia-ui/lib/components/FilterModal/filterBlock.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useIntl } from 'react-intl';
 import { arrayOf, shape, string } from 'prop-types';
 import { ChevronDown as ArrowDown, ChevronUp as ArrowUp } from 'react-feather';
 import { Form } from 'informed';
@@ -12,6 +13,7 @@ import defaultClasses from './filterBlock.css';
 
 const FilterBlock = props => {
     const { filterApi, filterState, group, items, name } = props;
+    const { formatMessage } = useIntl();
     const talonProps = useFilterBlock();
     const { handleClick, isExpanded } = talonProps;
     const iconSrc = isExpanded ? ArrowUp : ArrowDown;
@@ -19,6 +21,19 @@ const FilterBlock = props => {
     const listClass = isExpanded
         ? classes.list_expanded
         : classes.list_collapsed;
+    const toggleItemOptionsAriaLabel = isExpanded
+        ? formatMessage({
+            id: 'filterModal.item.hideOptions',
+            defaultMessage: 'Hide "{itemName}" options.',
+        }, {
+            itemName: name
+        })
+        : formatMessage({
+            id: 'filterModal.item.showOptions',
+            defaultMessage: 'Show "{itemName}" options.'
+        }, {
+            itemName: name
+        });
 
     return (
         <li className={classes.root}>
@@ -26,6 +41,7 @@ const FilterBlock = props => {
                 className={classes.trigger}
                 onClick={handleClick}
                 type="button"
+                aria-label={toggleItemOptionsAriaLabel}
             >
                 <span className={classes.header}>
                     <span className={classes.name}>{name}</span>
diff --git a/packages/venia-ui/lib/components/FilterModal/filterFooter.js b/packages/venia-ui/lib/components/FilterModal/filterFooter.js
index e9dca7b63a..eaff5d7799 100644
--- a/packages/venia-ui/lib/components/FilterModal/filterFooter.js
+++ b/packages/venia-ui/lib/components/FilterModal/filterFooter.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { useIntl } from 'react-intl';
 import { bool, func, shape, string } from 'prop-types';
 import { useFilterFooter } from '@magento/peregrine/lib/talons/FilterModal';
 
@@ -9,19 +9,21 @@ import defaultClasses from './filterFooter.css';
 
 const FilterFooter = props => {
     const { applyFilters, hasFilters, isOpen } = props;
+    const { formatMessage } = useIntl();
     const { touched } = useFilterFooter({
         hasFilters,
         isOpen
     });
     const classes = mergeClasses(defaultClasses, props.classes);
+    const buttonLabel = formatMessage({
+        id: 'filterFooter.results',
+        defaultMessage: 'See Results'
+    });
 
     return (
         <div className={classes.root}>
-            <Button disabled={!touched} onClick={applyFilters} priority="high">
-                <FormattedMessage
-                    id={'filterFooter.results'}
-                    defaultMessage={'See Results'}
-                />
+            <Button disabled={!touched} onClick={applyFilters} aria-label={buttonLabel} priority="high">
+                {buttonLabel}
             </Button>
         </div>
     );
diff --git a/packages/venia-ui/lib/components/FilterModal/filterModal.js b/packages/venia-ui/lib/components/FilterModal/filterModal.js
index 8c381cde69..e38e9cbe4d 100644
--- a/packages/venia-ui/lib/components/FilterModal/filterModal.js
+++ b/packages/venia-ui/lib/components/FilterModal/filterModal.js
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { array, arrayOf, shape, string } from 'prop-types';
 import { X as CloseIcon } from 'react-feather';
 import { useFilterModal } from '@magento/peregrine/lib/talons/FilterModal';
@@ -20,6 +20,7 @@ import defaultClasses from './filterModal.css';
  */
 const FilterModal = props => {
     const { filters } = props;
+    const { formatMessage } = useIntl();
     const talonProps = useFilterModal({ filters });
     const {
         filterApi,
@@ -55,9 +56,14 @@ const FilterModal = props => {
         [filterApi, filterItems, filterNames, filterState]
     );
 
+    const clearAllAriaLabel = formatMessage({
+        id: 'filterModal.action.clearAll.ariaLabel',
+        defaultMessage: 'Clear all filters'
+    })
+
     const clearAll = filterState.size ? (
         <div className={classes.action}>
-            <LinkButton type="button" onClick={handleReset}>
+            <LinkButton type="button" onClick={handleReset} ariaLabel={clearAllAriaLabel}>
                 <FormattedMessage
                     id={'filterModal.action'}
                     defaultMessage={'Clear all'}
@@ -66,6 +72,16 @@ const FilterModal = props => {
         </div>
     ) : null;
 
+    const filtersAriaLabel = formatMessage({
+        id: 'filterModal.filters.ariaLabel',
+        defaultMessage: 'Filters'
+    });
+
+    const closeAriaLabel = formatMessage({
+        id: 'filterModal.filters.close.ariaLabel',
+        defaultMessage: 'Close'
+    });
+
     return (
         <Portal>
             <aside className={modalClass}>
@@ -77,7 +93,7 @@ const FilterModal = props => {
                                 defaultMessage={'Filters'}
                             />
                         </h2>
-                        <button onClick={handleClose}>
+                        <button onClick={handleClose} aria-label={closeAriaLabel}>
                             <Icon src={CloseIcon} />
                         </button>
                     </div>
@@ -87,7 +103,7 @@ const FilterModal = props => {
                         filterState={filterState}
                     />
                     {clearAll}
-                    <ul className={classes.blocks}>{filtersList}</ul>
+                    <ul className={classes.blocks} aria-label={filtersAriaLabel}>{filtersList}</ul>
                 </div>
                 <FilterFooter
                     applyFilters={handleApply}
diff --git a/packages/venia-ui/lib/components/Trigger/trigger.js b/packages/venia-ui/lib/components/Trigger/trigger.js
index 8522883225..69acd86c9c 100644
--- a/packages/venia-ui/lib/components/Trigger/trigger.js
+++ b/packages/venia-ui/lib/components/Trigger/trigger.js
@@ -15,12 +15,12 @@ import defaultClasses from './trigger.css';
  * @returns {React.Element} A React component that when triggered invokes the action.
  */
 const Trigger = props => {
-    const { action, children } = props;
+    const { action, children, ariaLabel } = props;
 
     const classes = mergeClasses(defaultClasses, props.classes);
 
     return (
-        <button className={classes.root} type="button" onClick={action}>
+        <button className={classes.root} type="button" onClick={action} aria-label={ariaLabel}>
             {children}
         </button>
     );

From ddc4bcf9429edec0ddf339aacdb8038df30bf15c Mon Sep 17 00:00:00 2001
From: Vasilii Burlacu <v.burlacu@atwix.com>
Date: Tue, 23 Feb 2021 15:43:36 +0200
Subject: [PATCH 02/39] Added focus trap and a11y adjustments for Layered
 Navigation

---
 .../lib/talons/FilterModal/useFilterModal.js  |  25 +-
 .../lib/components/FilterModal/filterBlock.js |  34 +-
 .../components/FilterModal/filterFooter.js    |   2 +-
 .../lib/components/FilterModal/filterModal.js |  88 ++-
 packages/venia-ui/package.json                |   1 +
 yarn.lock                                     | 691 ++++++++++++++++++
 6 files changed, 790 insertions(+), 51 deletions(-)

diff --git a/packages/peregrine/lib/talons/FilterModal/useFilterModal.js b/packages/peregrine/lib/talons/FilterModal/useFilterModal.js
index 71b839ecf2..7493f445c4 100644
--- a/packages/peregrine/lib/talons/FilterModal/useFilterModal.js
+++ b/packages/peregrine/lib/talons/FilterModal/useFilterModal.js
@@ -21,7 +21,7 @@ import DEFAULT_OPERATIONS from './filterModal.gql';
  * }}
  */
 export const useFilterModal = props => {
-    const { filters } = props;
+    const { filters, closeFiltersModalButtonRef } = props;
 
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
     const { getFilterInputsQuery } = operations;
@@ -154,6 +154,27 @@ export const useFilterModal = props => {
         setIsApplying(true);
     }, [filterApi, setIsApplying]);
 
+    const handleKeyDownActions = useCallback((event) => {
+        // do not handle keyboard actions when the modal is closed
+        if (!isOpen) {
+            return;
+        }
+
+        switch (event.keyCode) {
+            // when "Esc" key fired -> close the modal
+            case 27:
+                handleClose();
+                break;
+        }
+    }, [isOpen, handleClose]);
+
+    const handleTransitionEnd = useCallback(() => {
+        // focus the close button once the modal has been drawn on the screen
+        if (isOpen) {
+            closeFiltersModalButtonRef.current.focus();
+        }
+    }, [isOpen, closeFiltersModalButtonRef]);
+
     return {
         filterApi,
         filterItems,
@@ -163,6 +184,8 @@ export const useFilterModal = props => {
         handleApply,
         handleClose,
         handleReset,
+        handleKeyDownActions,
+        handleTransitionEnd,
         isApplying,
         isOpen
     };
diff --git a/packages/venia-ui/lib/components/FilterModal/filterBlock.js b/packages/venia-ui/lib/components/FilterModal/filterBlock.js
index c65af90855..ee45c24866 100644
--- a/packages/venia-ui/lib/components/FilterModal/filterBlock.js
+++ b/packages/venia-ui/lib/components/FilterModal/filterBlock.js
@@ -21,26 +21,45 @@ const FilterBlock = props => {
     const listClass = isExpanded
         ? classes.list_expanded
         : classes.list_collapsed;
+
+    const itemAriaLabel = formatMessage({
+        id: 'filterModal.item.ariaLabel',
+        defaultMessage: 'Filter products by "{itemName}".',
+    }, {
+        itemName: name
+    });
+
     const toggleItemOptionsAriaLabel = isExpanded
         ? formatMessage({
             id: 'filterModal.item.hideOptions',
-            defaultMessage: 'Hide "{itemName}" options.',
+            defaultMessage: 'Hide "{itemName}" filter item options.',
         }, {
             itemName: name
         })
         : formatMessage({
             id: 'filterModal.item.showOptions',
-            defaultMessage: 'Show "{itemName}" options.'
+            defaultMessage: 'Show "{itemName}" filter item options.'
         }, {
             itemName: name
         });
 
+    const filterItemOptions = isExpanded &&
+        <Form className={listClass}>
+            <FilterList
+                filterApi={filterApi}
+                filterState={filterState}
+                group={group}
+                items={items}
+            />
+        </Form>;
+
     return (
-        <li className={classes.root}>
+        <li className={classes.root} aria-label={itemAriaLabel}>
             <button
                 className={classes.trigger}
                 onClick={handleClick}
                 type="button"
+                aria-expanded={isExpanded}
                 aria-label={toggleItemOptionsAriaLabel}
             >
                 <span className={classes.header}>
@@ -48,14 +67,7 @@ const FilterBlock = props => {
                     <Icon src={iconSrc} />
                 </span>
             </button>
-            <Form className={listClass}>
-                <FilterList
-                    filterApi={filterApi}
-                    filterState={filterState}
-                    group={group}
-                    items={items}
-                />
-            </Form>
+            {filterItemOptions}
         </li>
     );
 };
diff --git a/packages/venia-ui/lib/components/FilterModal/filterFooter.js b/packages/venia-ui/lib/components/FilterModal/filterFooter.js
index eaff5d7799..ac6d7a57e4 100644
--- a/packages/venia-ui/lib/components/FilterModal/filterFooter.js
+++ b/packages/venia-ui/lib/components/FilterModal/filterFooter.js
@@ -22,7 +22,7 @@ const FilterFooter = props => {
 
     return (
         <div className={classes.root}>
-            <Button disabled={!touched} onClick={applyFilters} aria-label={buttonLabel} priority="high">
+            <Button disabled={!touched} onClick={applyFilters} aria-label={buttonLabel} aria-disabled={!touched} priority="high">
                 {buttonLabel}
             </Button>
         </div>
diff --git a/packages/venia-ui/lib/components/FilterModal/filterModal.js b/packages/venia-ui/lib/components/FilterModal/filterModal.js
index e38e9cbe4d..ed42b49778 100644
--- a/packages/venia-ui/lib/components/FilterModal/filterModal.js
+++ b/packages/venia-ui/lib/components/FilterModal/filterModal.js
@@ -1,5 +1,6 @@
-import React, { useMemo } from 'react';
+import React, {useEffect, useCallback, useMemo, useRef} from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
+import { FocusScope } from 'react-aria';
 import { array, arrayOf, shape, string } from 'prop-types';
 import { X as CloseIcon } from 'react-feather';
 import { useFilterModal } from '@magento/peregrine/lib/talons/FilterModal';
@@ -21,7 +22,8 @@ import defaultClasses from './filterModal.css';
 const FilterModal = props => {
     const { filters } = props;
     const { formatMessage } = useIntl();
-    const talonProps = useFilterModal({ filters });
+    const closeFiltersModalButtonRef = useRef();
+    const talonProps = useFilterModal({ filters, closeFiltersModalButtonRef });
     const {
         filterApi,
         filterItems,
@@ -30,6 +32,8 @@ const FilterModal = props => {
         handleApply,
         handleClose,
         handleReset,
+        handleKeyDownActions,
+        handleTransitionEnd,
         isOpen
     } = talonProps;
 
@@ -56,9 +60,19 @@ const FilterModal = props => {
         [filterApi, filterItems, filterNames, filterState]
     );
 
+    const filtersAriaLabel = formatMessage({
+        id: 'filterModal.filters.ariaLabel',
+        defaultMessage: 'Filters'
+    });
+
+    const closeAriaLabel = formatMessage({
+        id: 'filterModal.filters.close.ariaLabel',
+        defaultMessage: 'Close filters popup.'
+    });
+
     const clearAllAriaLabel = formatMessage({
         id: 'filterModal.action.clearAll.ariaLabel',
-        defaultMessage: 'Clear all filters'
+        defaultMessage: 'Clear all applied filters'
     })
 
     const clearAll = filterState.size ? (
@@ -72,45 +86,43 @@ const FilterModal = props => {
         </div>
     ) : null;
 
-    const filtersAriaLabel = formatMessage({
-        id: 'filterModal.filters.ariaLabel',
-        defaultMessage: 'Filters'
-    });
-
-    const closeAriaLabel = formatMessage({
-        id: 'filterModal.filters.close.ariaLabel',
-        defaultMessage: 'Close'
-    });
-
     return (
         <Portal>
-            <aside className={modalClass}>
-                <div className={classes.body}>
-                    <div className={classes.header}>
-                        <h2 className={classes.headerTitle}>
-                            <FormattedMessage
-                                id={'filterModal.headerTitle'}
-                                defaultMessage={'Filters'}
-                            />
-                        </h2>
-                        <button onClick={handleClose} aria-label={closeAriaLabel}>
-                            <Icon src={CloseIcon} />
-                        </button>
+            <FocusScope contain>
+                {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+                <aside className={modalClass}
+                       onKeyDown={handleKeyDownActions}
+                       onTransitionEnd={handleTransitionEnd}>
+                    <div className={classes.body}>
+                        <div className={classes.header}>
+                            <h2 className={classes.headerTitle}>
+                                <FormattedMessage
+                                    id={'filterModal.headerTitle'}
+                                    defaultMessage={'Filters'}
+                                />
+                            </h2>
+                            <button onClick={handleClose}
+                                    ref={closeFiltersModalButtonRef}
+                                    aria-disabled={false}
+                                    aria-label={closeAriaLabel}>
+                                <Icon src={CloseIcon} />
+                            </button>
+                        </div>
+                        <CurrentFilters
+                            filterApi={filterApi}
+                            filterNames={filterNames}
+                            filterState={filterState}
+                        />
+                        {clearAll}
+                        <ul className={classes.blocks} aria-label={filtersAriaLabel}>{filtersList}</ul>
                     </div>
-                    <CurrentFilters
-                        filterApi={filterApi}
-                        filterNames={filterNames}
-                        filterState={filterState}
+                    <FilterFooter
+                        applyFilters={handleApply}
+                        hasFilters={!!filterState.size}
+                        isOpen={isOpen}
                     />
-                    {clearAll}
-                    <ul className={classes.blocks} aria-label={filtersAriaLabel}>{filtersList}</ul>
-                </div>
-                <FilterFooter
-                    applyFilters={handleApply}
-                    hasFilters={!!filterState.size}
-                    isOpen={isOpen}
-                />
-            </aside>
+                </aside>
+            </FocusScope>
         </Portal>
     );
 };
diff --git a/packages/venia-ui/package.json b/packages/venia-ui/package.json
index e86f300910..ca5d55ac12 100644
--- a/packages/venia-ui/package.json
+++ b/packages/venia-ui/package.json
@@ -41,6 +41,7 @@
     "lodash.throttle": "~4.1.1",
     "memoize-one": "~5.0.0",
     "prop-types": "~15.7.2",
+    "react-aria": "~3.4.0",
     "react-feather": "~2.0.3",
     "react-helmet-async": "^1.0.2",
     "react-slick": "~0.25.2",
diff --git a/yarn.lock b/yarn.lock
index 3dfdcb4a9e..dffaaeeb0d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1782,6 +1782,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.6.2":
+  version "7.13.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.2.tgz#9511c87d2808b2cf5fb9e9c5cf0d1ab789d75499"
+  integrity sha512-U9plpxyudmZNYe12YI6cXyeWTWYCTq2u1h+C0XVtC3+BoiuzTh1BHlMJgxMrbKTombYkf7wQGqoxYkptFehuZw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.8.4":
   version "7.9.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.6.tgz#a9102eb5cadedf3f31d08a9ecf294af7827ea29f"
@@ -2186,6 +2193,21 @@
   resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
   integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
 
+"@internationalized/message@3.0.0-alpha.0":
+  version "3.0.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/@internationalized/message/-/message-3.0.0-alpha.0.tgz#83015e2057d2b6b5034a3e23983b1e051f9d9e36"
+  integrity sha512-NT2eiVq5f5z7Yi9Hmchb8GAGYjEpYbYcD4u/Oxo5XG9XFbrnz7zNvrJJlzuQ+2jPozabq6pFKurqaFmM49DYUg==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    intl-messageformat "^2.2.0"
+
+"@internationalized/number@3.0.0-alpha.0":
+  version "3.0.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/@internationalized/number/-/number-3.0.0-alpha.0.tgz#27190fbc1d73a24ac96dfafdfe7aa4e520090eed"
+  integrity sha512-8aOD2I3HmEscIZO/cm1jkcrYMSmRPhoW9G1OsuQb4Ge/Y9HsJVGB9otTylUEXJUmoXi/eD8Mr1gx3+0FLCM4eA==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.0.0.tgz#10602de5570baea82f8afbfa2630b24e7a8cfe5b"
@@ -2551,6 +2573,620 @@
     prop-types "^15.6.1"
     react-lifecycles-compat "^3.0.4"
 
+"@react-aria/breadcrumbs@^3.1.2":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@react-aria/breadcrumbs/-/breadcrumbs-3.1.2.tgz#5d215d84a2e294db60d3ca62361d9ccdf332dbf4"
+  integrity sha512-rrRxHthNF4SRqufOi2nf9ii84weT+SOhEk3cOpgmcLUhQg9G9uFUc53W7LBOrLxG8HvgwMZoktq7ru3fmUFkXg==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/i18n" "^3.1.2"
+    "@react-aria/interactions" "^3.2.1"
+    "@react-aria/link" "^3.1.2"
+    "@react-aria/utils" "^3.5.0"
+    "@react-types/breadcrumbs" "^3.2.0"
+    "@react-types/shared" "^3.2.1"
+
+"@react-aria/button@^3.3.1":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@react-aria/button/-/button-3.3.1.tgz#f180ffa95e3e822b7da4937421cf8280dd17af17"
+  integrity sha512-LXNuo0L79AhYqnxV+Y3J3xt7hPcmCVCEpZaC/dBzovR1MLunrdpk3QAXsRt3tqza1XvoqdvNhNHQm1Z1kyBTUg==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/focus" "^3.2.2"
+    "@react-aria/i18n" "^3.3.0"
+    "@react-aria/interactions" "^3.3.3"
+    "@react-aria/utils" "^3.6.0"
+    "@react-stately/toggle" "^3.2.1"
+    "@react-types/button" "^3.3.1"
+
+"@react-aria/checkbox@^3.2.1":
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/@react-aria/checkbox/-/checkbox-3.2.1.tgz#493d9d584b4db474645a4565c4f899ee3a579f07"
+  integrity sha512-XnypnlVIfhB3CD7eSjSds8hNkzHgnhu0t48I1D0jYdL1O6tQC4UytPdIqlemRYBVHDloZkWerbjenpHnxhv8iA==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/label" "^3.1.1"
+    "@react-aria/toggle" "^3.1.1"
+    "@react-aria/utils" "^3.3.0"
+    "@react-stately/checkbox" "^3.0.1"
+    "@react-stately/toggle" "^3.2.1"
+    "@react-types/checkbox" "^3.2.1"
+
+"@react-aria/dialog@^3.1.2":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@react-aria/dialog/-/dialog-3.1.2.tgz#868970e7fdaa6ddb91a0d8d5b492778607d417fd"
+  integrity sha512-CUHzLdcKxnQ1IpbJOJ3BIDe762QoTOFXZfDAheNiTi24ym85w7KkW7dnfJDK2+J5RY15c5KWooOZvTaBmIJ7Xw==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/focus" "^3.2.2"
+    "@react-aria/utils" "^3.3.0"
+    "@react-stately/overlays" "^3.1.1"
+    "@react-types/dialog" "^3.3.0"
+
+"@react-aria/focus@^3.2.2", "@react-aria/focus@^3.2.3":
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/@react-aria/focus/-/focus-3.2.3.tgz#3e4137498a7fb5235d056c30fd94ab4a82e73aea"
+  integrity sha512-+OWmJMivrq3f8ApWihH1KJYqYj3rZV34YJORacBohcAsF1Qd1V1/P+w3dMkf24kV0wqAiWePCF1FwgnrL/rYzQ==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/interactions" "^3.3.0"
+    "@react-aria/utils" "^3.4.0"
+    "@react-types/shared" "^3.3.0"
+    clsx "^1.1.1"
+
+"@react-aria/i18n@^3.1.2", "@react-aria/i18n@^3.3.0":
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/@react-aria/i18n/-/i18n-3.3.0.tgz#7f92ae81f6536b19b17b89c0991ddb6c10f2512a"
+  integrity sha512-8KYk0tQiEf9Kd9xdF4cKliP1169WSIryKFnZgnm9dvZl96TyfDK1xJpZQy58XjRdbS/H45CKydFmMcZEElu3BQ==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@internationalized/message" "3.0.0-alpha.0"
+    "@internationalized/number" "3.0.0-alpha.0"
+    "@react-aria/ssr" "^3.0.1"
+    "@react-aria/utils" "^3.6.0"
+    "@react-types/shared" "^3.4.0"
+
+"@react-aria/interactions@^3.2.1", "@react-aria/interactions@^3.3.0", "@react-aria/interactions@^3.3.3":
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/@react-aria/interactions/-/interactions-3.3.3.tgz#02852a11530f73d1ae4525cdef7c2595acde2fdc"
+  integrity sha512-wq6YwVFMzT7jdpVGqGoqXPCANHl6BvOOL1Lrg3vb+df5pvoCFNWBytqv/yQVpT4PKOSUbxSBdOTubvtZlu0l+g==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/utils" "^3.6.0"
+    "@react-types/shared" "^3.4.0"
+
+"@react-aria/label@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@react-aria/label/-/label-3.1.1.tgz#03dc5c4813cd1f51760ba48783c186c2eeda1189"
+  integrity sha512-9kZKJonYSXeY6hZULZrsujAb6uXDGEy8qPq0tjTVoTA3+gx26LOmLCLgvHFtxUK1e4s99rHmaSPdOtq5qu3EVQ==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/utils" "^3.3.0"
+    "@react-types/label" "^3.2.1"
+    "@react-types/shared" "^3.2.1"
+
+"@react-aria/link@^3.1.2":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@react-aria/link/-/link-3.1.2.tgz#0a39e44fb1a7bb30e2ef0c88e0f248462998c87a"
+  integrity sha512-ONAyB+2irMSNnv2qZKw51AwYv1GzFXAn+N4nWxreI+TIzhAA6JBkMYT9I6JFqx51UwvGI+ys0YXAMJVIBeZRvA==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/interactions" "^3.2.1"
+    "@react-aria/utils" "^3.3.0"
+    "@react-types/link" "^3.1.1"
+    "@react-types/shared" "^3.2.1"
+
+"@react-aria/listbox@^3.2.4":
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/@react-aria/listbox/-/listbox-3.2.4.tgz#3162e47d64e1f6cd8fdfe45766cb88c3852a525d"
+  integrity sha512-IYs4oS2wzWVcWEtKG57zZLZI507WlDy24wuzymwgFxxIRXDVaBsSMOs7+uE7N1P4fLOa1yAlv170AvKDDbIJ2g==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/interactions" "^3.3.3"
+    "@react-aria/label" "^3.1.1"
+    "@react-aria/selection" "^3.3.2"
+    "@react-aria/utils" "^3.6.0"
+    "@react-stately/collections" "^3.3.0"
+    "@react-stately/list" "^3.2.2"
+    "@react-types/listbox" "^3.1.1"
+    "@react-types/shared" "^3.4.0"
+
+"@react-aria/menu@^3.1.4":
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/@react-aria/menu/-/menu-3.1.4.tgz#5ad8c360505ab079c05c30a401331b55b1038794"
+  integrity sha512-e1DXZqvqIgPWmYkj7DTGmsPPZJzMRHkOp9+qLS6lVjgSvdzKZPi96MJPanMYB7NB/oEsaFiOE7W3q4EhuA0j8g==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/interactions" "^3.3.3"
+    "@react-aria/overlays" "^3.6.1"
+    "@react-aria/selection" "^3.3.2"
+    "@react-aria/utils" "^3.6.0"
+    "@react-stately/collections" "^3.3.0"
+    "@react-stately/menu" "^3.2.1"
+    "@react-stately/tree" "^3.1.2"
+    "@react-types/button" "^3.3.1"
+    "@react-types/menu" "^3.1.1"
+    "@react-types/shared" "^3.4.0"
+
+"@react-aria/meter@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@react-aria/meter/-/meter-3.1.1.tgz#2b3bff2cc2b8c3f552a5edbea444ce9d9f073079"
+  integrity sha512-Soh+jDEA7onv/wbbdhxUvNqnNp1WgHY3eMDjOXkGpTVozc8wUwMxBCwdPTIXnxMyvFXbzqYNGZOxF/9gsO32yg==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/progress" "^3.1.1"
+    "@react-types/meter" "^3.1.1"
+    "@react-types/shared" "^3.2.1"
+
+"@react-aria/overlays@^3.6.1":
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/@react-aria/overlays/-/overlays-3.6.1.tgz#0354088b27f925d64c6900f236198b6a869f83d3"
+  integrity sha512-rZrx39yZBzc9WbgX6fADmcht0pCFdTQl+9+sZwWb419SFPAGRzMUU1h9kai/5u0Yp4osPrJeu0hEz/rM4fBJOw==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/i18n" "^3.3.0"
+    "@react-aria/interactions" "^3.3.3"
+    "@react-aria/utils" "^3.6.0"
+    "@react-aria/visually-hidden" "^3.2.1"
+    "@react-stately/overlays" "^3.1.1"
+    "@react-types/button" "^3.3.1"
+    "@react-types/overlays" "^3.4.0"
+    dom-helpers "^3.3.1"
+
+"@react-aria/progress@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@react-aria/progress/-/progress-3.1.1.tgz#053b7c15a67ca4a4c9feb50f4a4f2f5c2345521f"
+  integrity sha512-Y17ziWi5EoveF8QFQ+JyOvCjUCIYVNQUbr+TpuBossTQd3XEK/Dje0I/ZJ65q+tuBEtfnW2qoWpZzYCrQnGu9Q==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/i18n" "^3.1.2"
+    "@react-aria/label" "^3.1.1"
+    "@react-aria/utils" "^3.3.0"
+    "@react-types/progress" "^3.1.1"
+    "@react-types/shared" "^3.2.1"
+
+"@react-aria/radio@^3.1.3":
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/@react-aria/radio/-/radio-3.1.3.tgz#65b156fc61a9e747dcacfbc8cf6043a3fc38a923"
+  integrity sha512-Q4Z1Fld9InZPnAAKqH3HcLiH0MO6rCMBOXJif6bs1HUlagc3vzT3e235dWCxzmn3XCqAOooX/sLD8O3sA8ZvfA==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/focus" "^3.2.2"
+    "@react-aria/i18n" "^3.3.0"
+    "@react-aria/interactions" "^3.3.3"
+    "@react-aria/label" "^3.1.1"
+    "@react-aria/utils" "^3.6.0"
+    "@react-stately/radio" "^3.3.0"
+    "@react-types/radio" "^3.1.1"
+
+"@react-aria/searchfield@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@react-aria/searchfield/-/searchfield-3.1.1.tgz#5fdd74d0b39633aebf2f66050a74d6cc03fd953f"
+  integrity sha512-wM6EMCAytuG3XwLYBkesj+l8k17esFT7hmYqOrj56LZ7fYkP5vIA5kpgLudPpovbUCVAMN8IEp84qDVtl9khGA==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/i18n" "^3.1.2"
+    "@react-aria/interactions" "^3.2.1"
+    "@react-aria/textfield" "^3.2.1"
+    "@react-aria/utils" "^3.3.0"
+    "@react-stately/searchfield" "^3.1.1"
+    "@react-types/button" "^3.2.1"
+    "@react-types/searchfield" "^3.1.1"
+    "@react-types/shared" "^3.2.1"
+
+"@react-aria/select@^3.3.0":
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/@react-aria/select/-/select-3.3.0.tgz#81884563e59fa4a86e74f87a52c5abc60ec83956"
+  integrity sha512-7zbQncmafiMAZCslSe2hAeyCKxgqWuf83zOd23NPrEumA/i3h8cnCs1CoCA+xCFvsXCWtHgRhEFXqZlAlNOiLQ==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/i18n" "^3.3.0"
+    "@react-aria/interactions" "^3.3.3"
+    "@react-aria/label" "^3.1.1"
+    "@react-aria/menu" "^3.1.4"
+    "@react-aria/selection" "^3.3.2"
+    "@react-aria/utils" "^3.6.0"
+    "@react-aria/visually-hidden" "^3.2.1"
+    "@react-stately/select" "^3.1.1"
+    "@react-types/button" "^3.3.1"
+    "@react-types/select" "^3.2.0"
+    "@react-types/shared" "^3.4.0"
+
+"@react-aria/selection@^3.3.2":
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/@react-aria/selection/-/selection-3.3.2.tgz#35e46335d8882b1ee887d5f3c245117a29794d4e"
+  integrity sha512-HhMJR8UN7MQg0XqNbFIhuH0YDf7tEAp+xa5KfyyXjAG7sjTkoYwB212NfxtevNChnXWb19gdoF0IEVHVKuoxkA==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/focus" "^3.2.3"
+    "@react-aria/i18n" "^3.3.0"
+    "@react-aria/interactions" "^3.3.3"
+    "@react-aria/utils" "^3.6.0"
+    "@react-stately/collections" "^3.3.0"
+    "@react-stately/selection" "^3.3.0"
+    "@react-types/shared" "^3.4.0"
+
+"@react-aria/separator@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@react-aria/separator/-/separator-3.1.1.tgz#bfcd71bb5ab50dc04a7f307b84bd77955f08002f"
+  integrity sha512-VbiqQsTtKKMjvMcPVWgTbDHzx7qMP3VFC+y9cEVajicMwRoO4bn7kJgcSzainXpWx70bhT5RW1mt84fzxMF+Lg==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/utils" "^3.3.0"
+    "@react-types/shared" "^3.2.1"
+
+"@react-aria/slider@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@react-aria/slider/-/slider-3.0.1.tgz#c1d99d7303fe269bd57a9504ba13c6b34c830fd3"
+  integrity sha512-qRmdn+6BrcgDkUqlPmkqr11GOxpOdeNjTAMYPCD5cXxbZdio1INGDtIQkQG8G7RIBld1Auhq7leeFfT4f7vhdg==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/focus" "^3.2.3"
+    "@react-aria/i18n" "^3.3.0"
+    "@react-aria/interactions" "^3.3.3"
+    "@react-aria/label" "^3.1.1"
+    "@react-aria/utils" "^3.6.0"
+    "@react-stately/radio" "^3.3.0"
+    "@react-stately/slider" "^3.0.1"
+    "@react-types/radio" "^3.1.1"
+    "@react-types/slider" "^3.0.1"
+
+"@react-aria/ssr@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.0.1.tgz#5f7c111f9ecd184b8f6140139703c1ee552dca30"
+  integrity sha512-rweMNcSkUO4YkcmgFIoZFvgPyHN2P9DOjq3VOHnZ8SG3Y4TTvSY6Iv90KgzeEfmWCUqqt65FYH4JgrpGNToEMw==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+
+"@react-aria/switch@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@react-aria/switch/-/switch-3.1.1.tgz#a67239302908426dedc383a05bf7543190bec948"
+  integrity sha512-VPuonUcZ0IFs3FAAL3cAWtZr95DH0nyzTWDgVfbfGQCz6zVcD1R6OlA0mUPEdqUl5jQamBvFIk/W/5KbtrpdQw==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/toggle" "^3.1.1"
+    "@react-stately/toggle" "^3.2.1"
+    "@react-types/switch" "^3.1.1"
+
+"@react-aria/textfield@^3.2.1", "@react-aria/textfield@^3.2.2":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@react-aria/textfield/-/textfield-3.2.2.tgz#2e8195668464911d4f7a363d19da8786c10afd22"
+  integrity sha512-oIIvy82uBTZqNyHivObFbVtUFMU7GsssIq8T195c0hiuUISoaUxhrV1zlqeo3Ny/WOf275+kGF3UNnkWXihmBg==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/focus" "^3.2.2"
+    "@react-aria/label" "^3.1.1"
+    "@react-aria/utils" "^3.4.1"
+    "@react-types/shared" "^3.2.1"
+    "@react-types/textfield" "^3.2.2"
+
+"@react-aria/toggle@^3.1.1":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@react-aria/toggle/-/toggle-3.1.2.tgz#b21c55c103cbeb47baed1e76406aca778e77e8dd"
+  integrity sha512-oFGo1ABma44hTZvBJWAgpxDr1FkRegk/UL9rAYvrKTBQIRXarvHm0Yv4BmHq/ZWYhHhNWsg07A6CntBQBZFG/A==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/focus" "^3.2.2"
+    "@react-aria/interactions" "^3.3.3"
+    "@react-aria/utils" "^3.6.0"
+    "@react-stately/toggle" "^3.2.1"
+    "@react-types/checkbox" "^3.2.2"
+    "@react-types/shared" "^3.4.0"
+    "@react-types/switch" "^3.1.1"
+
+"@react-aria/tooltip@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@react-aria/tooltip/-/tooltip-3.1.1.tgz#e0dfdd9e51b581563f684927249d70e1bad761e3"
+  integrity sha512-wTszWN6lG3A9Ofdrhv1vG9aOmoqzuUZCbG9ZbXZ9+RtiOMwP/WnuSLWXcMH+KaWYpaImy7h1MDfOgHeaPxCbag==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/focus" "^3.2.3"
+    "@react-aria/interactions" "^3.3.3"
+    "@react-aria/overlays" "^3.6.1"
+    "@react-aria/utils" "^3.6.0"
+    "@react-stately/tooltip" "^3.0.2"
+    "@react-types/shared" "^3.4.0"
+    "@react-types/tooltip" "^3.1.1"
+
+"@react-aria/utils@^3.3.0", "@react-aria/utils@^3.4.0", "@react-aria/utils@^3.4.1", "@react-aria/utils@^3.5.0", "@react-aria/utils@^3.6.0":
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/@react-aria/utils/-/utils-3.6.0.tgz#b7446f202469015713af8bf2812b748e694eca12"
+  integrity sha512-DO5F00T5NQ7j3GGWvruV8HrEd3YcN7KfbbvKvNZ3JWHETHNJxIc2xBz4Af6FSQzAjHkOrapd++SNoNLutRSz9Q==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/ssr" "^3.0.1"
+    "@react-stately/utils" "^3.2.0"
+    "@react-types/shared" "^3.4.0"
+    clsx "^1.1.1"
+
+"@react-aria/visually-hidden@^3.2.1":
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/@react-aria/visually-hidden/-/visually-hidden-3.2.1.tgz#c022c562346140a473242448045add59269a74fd"
+  integrity sha512-ba7bQD09MuzUghtPyrQoXHgQnRRfOu039roVKPz2em9gHD0Wy4ap2UPwlzx35KzNq6FdCzMDZeSZHSnUWlzKnw==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/interactions" "^3.2.1"
+    "@react-aria/utils" "^3.3.0"
+    clsx "^1.1.1"
+
+"@react-stately/checkbox@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@react-stately/checkbox/-/checkbox-3.0.1.tgz#2e48a2085f1559549df62c1eda78299127acaf80"
+  integrity sha512-5rUx31X2NX78+vu/Ig4F9u0GnCeLAKD9N+BeGZXzJ/pTBIxoS/iAd9hegic4HKeulSrdYgNEpy3MMUPxhM9BkQ==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-stately/toggle" "^3.2.1"
+    "@react-stately/utils" "^3.1.1"
+    "@react-types/checkbox" "^3.2.1"
+
+"@react-stately/collections@^3.2.1", "@react-stately/collections@^3.3.0":
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/@react-stately/collections/-/collections-3.3.0.tgz#d1e66077b47a8b6a9abcac66f1052d4b8851ce47"
+  integrity sha512-Y8Pfugw/tYbcR9F6GTiTkd9O4FiXErxi5aDLSZ/knS6v0pvr3EHsC3T7jLW+48dSNrwl+HkMe5ECMhWSUA1jRQ==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-types/shared" "^3.2.1"
+
+"@react-stately/list@^3.2.1", "@react-stately/list@^3.2.2":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@react-stately/list/-/list-3.2.2.tgz#fb368cc7678503179202d11aef0ef8d48d1cbf12"
+  integrity sha512-8sJvy0cUhllhUMadYjX1qKmTxAWMRGxkvZpU/6reOEChlvibjAwbn2paoR8yZ+ppieeQOBe+AAYTl53gK8fKDA==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-stately/collections" "^3.3.0"
+    "@react-stately/selection" "^3.2.1"
+    "@react-stately/utils" "^3.1.1"
+    "@react-types/shared" "^3.2.1"
+
+"@react-stately/menu@^3.2.1":
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/@react-stately/menu/-/menu-3.2.1.tgz#314646217e5dd49fa1da6886d33f485d44d6f0dd"
+  integrity sha512-8cpCynynjjn3qWNzrZMJEpsdk4tkXK9q3Xaw0ADqVym/NC/wPU3P3cqL4HY+ETar01tS2x8K23qYHbOZz0cQtQ==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-stately/overlays" "^3.1.1"
+    "@react-stately/utils" "^3.1.1"
+    "@react-types/menu" "^3.1.1"
+    "@react-types/shared" "^3.2.1"
+
+"@react-stately/overlays@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@react-stately/overlays/-/overlays-3.1.1.tgz#6c1a393b77148184f7b1df22ece832d694d5a8b4"
+  integrity sha512-79YYXvmWKflezNPhc4fvXA1rDZurZvvEJcmbStNlR5Ryrnk/sQiOQCoVWooi2M4glSMT3UOTvD7YEnXxARcuIQ==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-stately/utils" "^3.1.1"
+    "@react-types/overlays" "^3.2.1"
+
+"@react-stately/radio@^3.3.0":
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/@react-stately/radio/-/radio-3.3.0.tgz#6c8c980370f267011bbc0a79c080b4bf35274c1b"
+  integrity sha512-CcQT/UtiPx7Cy3+9gGcY/J3YH61/U3pw8jwoHA7lBBbqKH7b5Wjbis/UP9wv4tDBeUYPV0MdXlJjGBjyKt5Kow==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-stately/utils" "^3.2.0"
+    "@react-types/radio" "^3.1.1"
+
+"@react-stately/searchfield@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@react-stately/searchfield/-/searchfield-3.1.1.tgz#fcada7bff9cac5bc4ffed11ba9cd06b8513be72a"
+  integrity sha512-asSTsM+H7kZB8XCIAQO0nqMm5onS+2d1yT351NEj42eAsliz5Zf/eZAsEo4Up8W77scDPxhFpaUigYMqjoFPyQ==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-stately/utils" "^3.1.1"
+    "@react-types/searchfield" "^3.1.1"
+    "@react-types/shared" "^3.2.1"
+
+"@react-stately/select@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@react-stately/select/-/select-3.1.1.tgz#f49602ee7fc71f14550360bfa7c5becab58ac877"
+  integrity sha512-cl63nW66IJPsn9WQjKvghAIFKdFKuU1txx4zdEGY9tcwB/Yc+bgniLGOOTExJqN/RdPW9uBny5jjWcc4OQXyJA==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-stately/collections" "^3.2.1"
+    "@react-stately/list" "^3.2.1"
+    "@react-stately/menu" "^3.2.1"
+    "@react-stately/selection" "^3.2.1"
+    "@react-stately/utils" "^3.1.1"
+    "@react-types/select" "^3.1.1"
+    "@react-types/shared" "^3.2.1"
+
+"@react-stately/selection@^3.2.1", "@react-stately/selection@^3.3.0":
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/@react-stately/selection/-/selection-3.3.0.tgz#2feebf1be600a3ae8cca32c2fcedc2c5703e8541"
+  integrity sha512-nVE3GOl9763t63Z+Cd5xwtGeXtSQVmYNfFfW6U0kdTm/y6SbBHYMauatAOzzMzayGmGeTmh4p8AQA8Du+Hm9Ug==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-stately/collections" "^3.2.1"
+    "@react-stately/utils" "^3.1.1"
+    "@react-types/shared" "^3.3.0"
+
+"@react-stately/slider@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@react-stately/slider/-/slider-3.0.1.tgz#076c149947ae45f5eda30178b368ad0c4052f2a3"
+  integrity sha512-gGpfdVbTmdsOvrmZvFx4hJ5b7nczvAWdHR/tFFJKfxH0/V8NudZ5hGnawY84R3x+OvgV+tKUfifEUKA+oJyG5w==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/i18n" "^3.3.0"
+    "@react-aria/utils" "^3.6.0"
+    "@react-stately/utils" "^3.2.0"
+    "@react-types/slider" "^3.0.1"
+
+"@react-stately/toggle@^3.2.1":
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/@react-stately/toggle/-/toggle-3.2.1.tgz#8b10b5eb99c3c4df2c36d17a5f23b77773ed7722"
+  integrity sha512-gZVuJ8OYoATUoXzdprsyx6O1w3wCrN+J0KnjhrjjKTrBG68n3pZH0p6dM0XpsaCzlSv0UgNa4fhHS3dYfr/ovw==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-stately/utils" "^3.1.1"
+    "@react-types/checkbox" "^3.2.1"
+    "@react-types/shared" "^3.2.1"
+
+"@react-stately/tooltip@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@react-stately/tooltip/-/tooltip-3.0.2.tgz#8440728c5ad51598368f3641c46cecbd1c523241"
+  integrity sha512-edFj2nDwu2eT9/nhnZwX/QAlf1bMtVheEGNhKKO99usXjLXE/e4v82diPtsPJBYoAyB3bLra4gjad5HBy33wSQ==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-stately/overlays" "^3.1.1"
+    "@react-stately/utils" "^3.2.0"
+    "@react-types/tooltip" "^3.1.1"
+
+"@react-stately/tree@^3.1.2":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@react-stately/tree/-/tree-3.1.2.tgz#54e49cc7fa283ce21d67f642522c8f281c58b309"
+  integrity sha512-i3HOx/UQXA48qR5p/44JdX2lPb+3f3c2h/4YX+1fDtxjn0r/JkaEnPfo6zYTf40b7dU9mMOLWNF2qbGo59uIyQ==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-stately/collections" "^3.2.1"
+    "@react-stately/selection" "^3.2.1"
+    "@react-stately/utils" "^3.1.1"
+    "@react-types/shared" "^3.2.1"
+
+"@react-stately/utils@^3.1.1", "@react-stately/utils@^3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@react-stately/utils/-/utils-3.2.0.tgz#0b90a70fee3236025ad8bed1f0e3555d5fc10296"
+  integrity sha512-vVBJvHVLnQySgqZ7OfP3ngDdwfGscJDsSD3WcN5ntHiT3JlZ5bksQReDkJEs20SFu2ST4w/0K7O4m97SbuMl2Q==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+
+"@react-types/breadcrumbs@^3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@react-types/breadcrumbs/-/breadcrumbs-3.2.0.tgz#c30d236f4073bebb89d7e2603e1d077e4e26b818"
+  integrity sha512-LmYOZwEbVl3QnjCmc6H3qVTukAQ2mAzwP2jxzmAnzk3dD+jPhsij/G8PWgTZI3oXCM/vSmLxqG8ga7FtrAx2SQ==
+  dependencies:
+    "@react-types/shared" "^3.2.1"
+
+"@react-types/button@^3.2.1", "@react-types/button@^3.3.1":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@react-types/button/-/button-3.3.1.tgz#4bdd325bc7df19c33911af256f63eae91e2a452e"
+  integrity sha512-xKLGSzGfsDBMe0SM7icOLNmzW38sdNSDSGMdrTLd3ygxb6pXY/LlcTdx7Sq28hdW8XL/ikFAnoQeS1VLXZHj7w==
+  dependencies:
+    "@react-types/shared" "^3.4.0"
+
+"@react-types/checkbox@^3.2.1", "@react-types/checkbox@^3.2.2":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@react-types/checkbox/-/checkbox-3.2.2.tgz#7182d44a533e2ffd2c9118372cbc2c33b006eb18"
+  integrity sha512-WAAqLdjf6GUWjsMN5NaFMFumOtGTq+3+48CpM0ah2L+qmhMdj1s4gvHDerhls6u4ovRK/7zhg7XK+qQwcYVqMg==
+  dependencies:
+    "@react-types/shared" "^3.4.0"
+
+"@react-types/dialog@^3.3.0":
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/@react-types/dialog/-/dialog-3.3.0.tgz#60a2b53f250ee082b53aef9340c80f1afe654bc7"
+  integrity sha512-63Vsr/UOZiaajlNDQUgWDi6v3EMenV1f8Cwh+L4lcyIJnbC6WeC2VEV3ld/TYVC0U58SQ0k7u2EIyHkWjc5kdQ==
+  dependencies:
+    "@react-types/overlays" "^3.2.1"
+    "@react-types/shared" "^3.2.1"
+
+"@react-types/label@^3.2.1":
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/@react-types/label/-/label-3.4.0.tgz#6023dc9dd0146324ead52e08540cd60e57a3e27f"
+  integrity sha512-l84ysm1dcjL/5qVk9iN74z+/Ul0999XqnwTu6aTbuwAXqMk2sTU45eK2Yp/FJ7YWeflcF1vsomTkjMkX0BHKMw==
+  dependencies:
+    "@react-types/shared" "^3.4.0"
+
+"@react-types/link@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@react-types/link/-/link-3.1.1.tgz#6cbaa0b1e5cf1492dd59a8f8f645308848395306"
+  integrity sha512-sTyr6fEjwBWXGp/7iU/+ncO0O8YHnf53ZdB7+vOZX+7w1smQ2yVAllRHrREcnEXijMBfuoWf2i0pNqgQBdmLwQ==
+  dependencies:
+    "@react-aria/interactions" "^3.2.1"
+    "@react-types/shared" "^3.2.1"
+
+"@react-types/listbox@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@react-types/listbox/-/listbox-3.1.1.tgz#b896303ccb87123cf59ee2c089953d7928497c9b"
+  integrity sha512-HAljfdpbyLoJL9iwqz7Fw9MOmRwfzODeN+sr5ncE0eXJxnRBFhb5LjbjAN1dUBrKFBkv3etGlYu5HvX+PJjpew==
+  dependencies:
+    "@react-types/shared" "^3.2.1"
+
+"@react-types/menu@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@react-types/menu/-/menu-3.1.1.tgz#e5aa52ac07c083243540dd5da0790a85fd1628c6"
+  integrity sha512-/xZWp4/3P/8dKFAGuzxz8IccSXvJH0TmHIk2/xnj2Eyw9152IfutIpOda3iswhjrx1LEkzUgdJ8bCdiebgg6QQ==
+  dependencies:
+    "@react-types/overlays" "^3.2.1"
+    "@react-types/shared" "^3.2.1"
+
+"@react-types/meter@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@react-types/meter/-/meter-3.1.1.tgz#1a89c77c0f847fc741984703a22af266eae1429f"
+  integrity sha512-82dltyAhCIfyuwfyu+dijEUC08+G7imX3x7QVPSWIHfXusWbWXQG9YzBXJkmCoZlMPEMhEtA6l5niHM3gMD/Zg==
+  dependencies:
+    "@react-types/progress" "^3.1.1"
+    "@react-types/shared" "^3.2.1"
+
+"@react-types/overlays@^3.2.1", "@react-types/overlays@^3.4.0":
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/@react-types/overlays/-/overlays-3.4.0.tgz#3c4619906bb12e3697e770b59c2090bb18da25bd"
+  integrity sha512-ddiMB6JXR7acQnRFEL2/6SSdBropmNrcAFk3qFCfovuVZh6STYhPmoAgj06mJFDoAD63pxayysfPG2EvLl2yAw==
+  dependencies:
+    "@react-types/shared" "^3.3.0"
+
+"@react-types/progress@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@react-types/progress/-/progress-3.1.1.tgz#e2a99eab26e2b3117f65f78ccb320eae1cdbf693"
+  integrity sha512-Q9mgDbUw7Dcexd2CAo/NRanQ+7btHYAzjphoVSrIUwTsmgg4/WsPjZ3fplVyyRnzoYEjME/b7Og5HZ+ZEFTvsA==
+  dependencies:
+    "@react-types/shared" "^3.2.1"
+
+"@react-types/radio@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@react-types/radio/-/radio-3.1.1.tgz#5b1b11ff3043ac902e8970e49260f2664da80e5e"
+  integrity sha512-neInMjlbZyyGYYyeDJk9BcEejLczvsBiyk/swSUHmQ99eNIjK3ptUHTNdXM1xBBc3zI1SvBxOQr+uGeeEszvxw==
+  dependencies:
+    "@react-types/shared" "^3.2.1"
+
+"@react-types/searchfield@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@react-types/searchfield/-/searchfield-3.1.1.tgz#bbbb8984706c02559810328791cdfb8d418336a0"
+  integrity sha512-qNVrO3bIM9TcZHVuU7QI12LHShosvp3D297xw/iGLQoyaL0/W68d4dJs5ujU5ZRj8/gGRhAQiparpRs9hiHkxw==
+  dependencies:
+    "@react-types/textfield" "^3.2.1"
+
+"@react-types/select@^3.1.1", "@react-types/select@^3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@react-types/select/-/select-3.2.0.tgz#31b9e0f94fc24f053f4a1f073e174ffd59bac055"
+  integrity sha512-9vYhQWr1iB+3KWTZ1RxS2xZq0n0CJfsTRbEr0akLrtE/pRLC4O4l8RMFD49HyX0fShvz1FStmxTE2x7k8yVc4w==
+  dependencies:
+    "@react-types/shared" "^3.4.0"
+
+"@react-types/shared@^3.2.1", "@react-types/shared@^3.3.0", "@react-types/shared@^3.4.0":
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/@react-types/shared/-/shared-3.4.0.tgz#a7cbf8c676b4b3b7b687bcdc8e44828c34d115f4"
+  integrity sha512-qYuL9JdIVC5JQmUgmurtm4JZQrg6IUy8wrMbaqNbt1e85Zg7A6ff1ffFrZ5IIgc1LDxYC7BB9KtL/bCgnjqrng==
+
+"@react-types/slider@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@react-types/slider/-/slider-3.0.1.tgz#b663c06765c5517f5d433e6158ad29d12eeaac4e"
+  integrity sha512-EUWogUMH/dU01+adJ7/Hlu6mP0thbXw8ftmWbPVMLWqweV2dEzRkvQZ8d9+q2JFMSNXwMSWvuMSVSnPKFbUXeQ==
+  dependencies:
+    "@react-types/shared" "^3.4.0"
+
+"@react-types/switch@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@react-types/switch/-/switch-3.1.1.tgz#7909a8f7c2cb68ab7536efd03af3be3417e0eca3"
+  integrity sha512-nI5J/1CrJrVANwgikXyPMqxWJ4UyefzE4Vz/TwTgoXQ9v+LRNo22wbisfh1EmJAlZ0E52X/iKViVaBroNty+EA==
+  dependencies:
+    "@react-types/checkbox" "^3.2.1"
+    "@react-types/shared" "^3.2.1"
+
+"@react-types/textfield@^3.2.1", "@react-types/textfield@^3.2.2":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@react-types/textfield/-/textfield-3.2.2.tgz#2f310c125df7c4a64a19d7c5064537218f909d38"
+  integrity sha512-S+U+Uc0WDgMK8X28j5WUtmkCL25iTQ+oGfCRFf4/GJtiwfO9lVLCgH/NWxpoVuNsPGvt36rlDnyS82Ge9H1/qA==
+  dependencies:
+    "@react-types/shared" "^3.2.1"
+
+"@react-types/tooltip@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@react-types/tooltip/-/tooltip-3.1.1.tgz#7d45a4dd8c57c422a1a2dcb03b6c043e7481c3ca"
+  integrity sha512-18gM2Co9tzCDfN0tEdfboD18sXDtD6YiKctd8HQ8tBiRO4IF1ce9ubKe6++Lj+38GQPq7GWFFoUiS1WArTWIHA==
+  dependencies:
+    "@react-types/overlays" "^3.4.0"
+    "@react-types/shared" "^3.4.0"
+
 "@rollup/plugin-babel@^5.2.0":
   version "5.2.3"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.2.3.tgz#ee8fffbaa62a6c9ccd41b1bfca32e81f847700ee"
@@ -5775,6 +6411,11 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
 
+clsx@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -6936,6 +7577,13 @@ dom-converter@^0.2:
   dependencies:
     utila "~0.4"
 
+dom-helpers@^3.3.1:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
+  integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -9975,6 +10623,11 @@ intl-locales-supported@~1.8.12:
   resolved "https://registry.yarnpkg.com/intl-locales-supported/-/intl-locales-supported-1.8.12.tgz#bbd83475a1cda61dc026309ca61f64c450af8ccb"
   integrity sha512-FJPl7p1LYO/C+LpwlDcvVpq7AeFTdFgwnq1JjdNYKjb51xkIxssXRR8LaA0fJFogjwRRztqw1ahgSJMSZsSFdw==
 
+intl-messageformat-parser@1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/intl-messageformat-parser/-/intl-messageformat-parser-1.4.0.tgz#b43d45a97468cadbe44331d74bb1e8dea44fc075"
+  integrity sha1-tD1FqXRoytvkQzHXS7Ho3qRPwHU=
+
 intl-messageformat-parser@^6.0.4:
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/intl-messageformat-parser/-/intl-messageformat-parser-6.0.4.tgz#487a16ad58ee681ae67a3e86bae76ae7b7e7e03c"
@@ -9982,6 +10635,13 @@ intl-messageformat-parser@^6.0.4:
   dependencies:
     "@formatjs/ecma402-abstract" "^1.1.0"
 
+intl-messageformat@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-2.2.0.tgz#345bcd46de630b7683330c2e52177ff5eab484fc"
+  integrity sha1-NFvNRt5jC3aDMwwuUhd/9eq0hPw=
+  dependencies:
+    intl-messageformat-parser "1.4.0"
+
 intl-messageformat@^9.3.5:
   version "9.3.5"
   resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-9.3.5.tgz#8b8fdfcf5d20e85682da24d4f709ef5903742310"
@@ -14276,6 +14936,37 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.7, rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-aria@~3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/react-aria/-/react-aria-3.4.0.tgz#904d7346a032970a0b4dc1904176ade96db5cdb2"
+  integrity sha512-PH8OFLe2xZGrIQfRIDLWHKUEog/UwE8H9L0MhYw9TmlJaW1Lc/ir69HiX/bOQJz6V/9XtDIKtNIXX3Fo1lsAJQ==
+  dependencies:
+    "@react-aria/breadcrumbs" "^3.1.2"
+    "@react-aria/button" "^3.3.1"
+    "@react-aria/checkbox" "^3.2.1"
+    "@react-aria/dialog" "^3.1.2"
+    "@react-aria/focus" "^3.2.3"
+    "@react-aria/i18n" "^3.3.0"
+    "@react-aria/interactions" "^3.3.3"
+    "@react-aria/label" "^3.1.1"
+    "@react-aria/link" "^3.1.2"
+    "@react-aria/listbox" "^3.2.4"
+    "@react-aria/menu" "^3.1.4"
+    "@react-aria/meter" "^3.1.1"
+    "@react-aria/overlays" "^3.6.1"
+    "@react-aria/progress" "^3.1.1"
+    "@react-aria/radio" "^3.1.3"
+    "@react-aria/searchfield" "^3.1.1"
+    "@react-aria/select" "^3.3.0"
+    "@react-aria/separator" "^3.1.1"
+    "@react-aria/slider" "^3.0.1"
+    "@react-aria/ssr" "^3.0.1"
+    "@react-aria/switch" "^3.1.1"
+    "@react-aria/textfield" "^3.2.2"
+    "@react-aria/tooltip" "^3.1.1"
+    "@react-aria/utils" "^3.6.0"
+    "@react-aria/visually-hidden" "^3.2.1"
+
 react-color@^2.17.0:
   version "2.19.3"
   resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.19.3.tgz#ec6c6b4568312a3c6a18420ab0472e146aa5683d"

From 0e96689a6c8c3048157a0f4c0fafdaa43cbe82da Mon Sep 17 00:00:00 2001
From: Vasilii Burlacu <v.burlacu@atwix.com>
Date: Wed, 3 Mar 2021 14:41:50 +0200
Subject: [PATCH 03/39] run prettier

---
 .../lib/talons/FilterModal/useFilterModal.js  | 27 +++++-----
 .../lib/components/Checkbox/checkbox.js       | 16 +++++-
 .../CurrentFilters/currentFilter.js           | 15 +++---
 .../CurrentFilters/currentFilters.js          |  8 ++-
 .../FilterModal/FilterList/filterDefault.js   | 40 +++++++++------
 .../lib/components/FilterModal/filterBlock.js | 50 +++++++++++--------
 .../components/FilterModal/filterFooter.js    |  8 ++-
 .../lib/components/FilterModal/filterModal.js | 35 +++++++++----
 .../lib/components/Trigger/trigger.js         |  7 ++-
 9 files changed, 137 insertions(+), 69 deletions(-)

diff --git a/packages/peregrine/lib/talons/FilterModal/useFilterModal.js b/packages/peregrine/lib/talons/FilterModal/useFilterModal.js
index 7493f445c4..b15bb923fd 100644
--- a/packages/peregrine/lib/talons/FilterModal/useFilterModal.js
+++ b/packages/peregrine/lib/talons/FilterModal/useFilterModal.js
@@ -154,19 +154,22 @@ export const useFilterModal = props => {
         setIsApplying(true);
     }, [filterApi, setIsApplying]);
 
-    const handleKeyDownActions = useCallback((event) => {
-        // do not handle keyboard actions when the modal is closed
-        if (!isOpen) {
-            return;
-        }
+    const handleKeyDownActions = useCallback(
+        event => {
+            // do not handle keyboard actions when the modal is closed
+            if (!isOpen) {
+                return;
+            }
 
-        switch (event.keyCode) {
-            // when "Esc" key fired -> close the modal
-            case 27:
-                handleClose();
-                break;
-        }
-    }, [isOpen, handleClose]);
+            switch (event.keyCode) {
+                // when "Esc" key fired -> close the modal
+                case 27:
+                    handleClose();
+                    break;
+            }
+        },
+        [isOpen, handleClose]
+    );
 
     const handleTransitionEnd = useCallback(() => {
         // focus the close button once the modal has been drawn on the screen
diff --git a/packages/venia-ui/lib/components/Checkbox/checkbox.js b/packages/venia-ui/lib/components/Checkbox/checkbox.js
index baafb91eaa..11438bec88 100644
--- a/packages/venia-ui/lib/components/Checkbox/checkbox.js
+++ b/packages/venia-ui/lib/components/Checkbox/checkbox.js
@@ -33,13 +33,25 @@ export class Checkbox extends Component {
     };
 
     render() {
-        const { classes, fieldState, id, label, message, ariaLabel, ...rest } = this.props;
+        const {
+            classes,
+            fieldState,
+            id,
+            label,
+            message,
+            ariaLabel,
+            ...rest
+        } = this.props;
         const { value: checked } = fieldState;
         const icon = checked ? checkedIcon : uncheckedIcon;
 
         return (
             <Fragment>
-                <label className={classes.root} htmlFor={id} aria-label={ariaLabel}>
+                <label
+                    className={classes.root}
+                    htmlFor={id}
+                    aria-label={ariaLabel}
+                >
                     <BasicCheckbox
                         {...rest}
                         className={classes.input}
diff --git a/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilter.js b/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilter.js
index 4686827ef6..c6bf599921 100644
--- a/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilter.js
+++ b/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilter.js
@@ -17,12 +17,15 @@ const CurrentFilter = props => {
         removeItem({ group, item });
     }, [group, item, removeItem]);
 
-    const ariaLabel = formatMessage({
-        id: 'filterModal.action.clearFilterItem.ariaLabel',
-        defaultMessage: 'Clear filter "{name}"'
-    }, {
-        name: item.title
-    });
+    const ariaLabel = formatMessage(
+        {
+            id: 'filterModal.action.clearFilterItem.ariaLabel',
+            defaultMessage: 'Clear filter "{name}"'
+        },
+        {
+            name: item.title
+        }
+    );
 
     return (
         <span className={classes.root}>
diff --git a/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilters.js b/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilters.js
index 52a28d5503..86f0732ec8 100644
--- a/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilters.js
+++ b/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilters.js
@@ -4,7 +4,7 @@ import { shape, string } from 'prop-types';
 import { mergeClasses } from '../../../classify';
 import CurrentFilter from './currentFilter';
 import defaultClasses from './currentFilters.css';
-import { useIntl } from "react-intl";
+import { useIntl } from 'react-intl';
 
 const CurrentFilters = props => {
     const { filterApi, filterState } = props;
@@ -40,7 +40,11 @@ const CurrentFilters = props => {
         defaultMessage: 'Current Filters'
     });
 
-    return <ul className={classes.root} aria-label={currentFiltersAriaLabel}>{filterElements}</ul>;
+    return (
+        <ul className={classes.root} aria-label={currentFiltersAriaLabel}>
+            {filterElements}
+        </ul>
+    );
 };
 
 CurrentFilters.propTypes = {
diff --git a/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js b/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js
index 67f8f7689a..bd87d893d5 100644
--- a/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js
+++ b/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useIntl } from "react-intl";
+import { useIntl } from 'react-intl';
 import { bool, shape, string } from 'prop-types';
 
 import Checkbox from '../../Checkbox';
@@ -7,24 +7,36 @@ import { mergeClasses } from '../../../classify';
 import defaultClasses from './filterDefault.css';
 
 const FilterDefault = props => {
-    const { classes: propsClasses, isSelected, item, title, ...restProps } = props;
+    const {
+        classes: propsClasses,
+        isSelected,
+        item,
+        title,
+        ...restProps
+    } = props;
     const { label, value_index } = item || {};
     const { formatMessage } = useIntl();
     const classes = mergeClasses(defaultClasses, propsClasses);
 
     const ariaLabel = !isSelected
-        ? formatMessage({
-            id: 'filterModal.item.applyFilter',
-            defaultMessage: 'Apply filter "{optionName}".',
-        }, {
-            optionName: label
-        })
-        : formatMessage({
-            id: 'filterModal.item.clearFilter',
-            defaultMessage: 'Remove filter "{optionName}".'
-        }, {
-            optionName: label
-        });
+        ? formatMessage(
+              {
+                  id: 'filterModal.item.applyFilter',
+                  defaultMessage: 'Apply filter "{optionName}".'
+              },
+              {
+                  optionName: label
+              }
+          )
+        : formatMessage(
+              {
+                  id: 'filterModal.item.clearFilter',
+                  defaultMessage: 'Remove filter "{optionName}".'
+              },
+              {
+                  optionName: label
+              }
+          );
 
     return (
         <Checkbox
diff --git a/packages/venia-ui/lib/components/FilterModal/filterBlock.js b/packages/venia-ui/lib/components/FilterModal/filterBlock.js
index ee45c24866..a859d7f827 100644
--- a/packages/venia-ui/lib/components/FilterModal/filterBlock.js
+++ b/packages/venia-ui/lib/components/FilterModal/filterBlock.js
@@ -22,28 +22,37 @@ const FilterBlock = props => {
         ? classes.list_expanded
         : classes.list_collapsed;
 
-    const itemAriaLabel = formatMessage({
-        id: 'filterModal.item.ariaLabel',
-        defaultMessage: 'Filter products by "{itemName}".',
-    }, {
-        itemName: name
-    });
+    const itemAriaLabel = formatMessage(
+        {
+            id: 'filterModal.item.ariaLabel',
+            defaultMessage: 'Filter products by "{itemName}".'
+        },
+        {
+            itemName: name
+        }
+    );
 
     const toggleItemOptionsAriaLabel = isExpanded
-        ? formatMessage({
-            id: 'filterModal.item.hideOptions',
-            defaultMessage: 'Hide "{itemName}" filter item options.',
-        }, {
-            itemName: name
-        })
-        : formatMessage({
-            id: 'filterModal.item.showOptions',
-            defaultMessage: 'Show "{itemName}" filter item options.'
-        }, {
-            itemName: name
-        });
+        ? formatMessage(
+              {
+                  id: 'filterModal.item.hideOptions',
+                  defaultMessage: 'Hide "{itemName}" filter item options.'
+              },
+              {
+                  itemName: name
+              }
+          )
+        : formatMessage(
+              {
+                  id: 'filterModal.item.showOptions',
+                  defaultMessage: 'Show "{itemName}" filter item options.'
+              },
+              {
+                  itemName: name
+              }
+          );
 
-    const filterItemOptions = isExpanded &&
+    const filterItemOptions = isExpanded && (
         <Form className={listClass}>
             <FilterList
                 filterApi={filterApi}
@@ -51,7 +60,8 @@ const FilterBlock = props => {
                 group={group}
                 items={items}
             />
-        </Form>;
+        </Form>
+    );
 
     return (
         <li className={classes.root} aria-label={itemAriaLabel}>
diff --git a/packages/venia-ui/lib/components/FilterModal/filterFooter.js b/packages/venia-ui/lib/components/FilterModal/filterFooter.js
index ac6d7a57e4..c7a551957e 100644
--- a/packages/venia-ui/lib/components/FilterModal/filterFooter.js
+++ b/packages/venia-ui/lib/components/FilterModal/filterFooter.js
@@ -22,7 +22,13 @@ const FilterFooter = props => {
 
     return (
         <div className={classes.root}>
-            <Button disabled={!touched} onClick={applyFilters} aria-label={buttonLabel} aria-disabled={!touched} priority="high">
+            <Button
+                disabled={!touched}
+                onClick={applyFilters}
+                aria-label={buttonLabel}
+                aria-disabled={!touched}
+                priority="high"
+            >
                 {buttonLabel}
             </Button>
         </div>
diff --git a/packages/venia-ui/lib/components/FilterModal/filterModal.js b/packages/venia-ui/lib/components/FilterModal/filterModal.js
index ed42b49778..53fde933c2 100644
--- a/packages/venia-ui/lib/components/FilterModal/filterModal.js
+++ b/packages/venia-ui/lib/components/FilterModal/filterModal.js
@@ -1,4 +1,4 @@
-import React, {useEffect, useCallback, useMemo, useRef} from 'react';
+import React, { useEffect, useCallback, useMemo, useRef } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { FocusScope } from 'react-aria';
 import { array, arrayOf, shape, string } from 'prop-types';
@@ -73,11 +73,15 @@ const FilterModal = props => {
     const clearAllAriaLabel = formatMessage({
         id: 'filterModal.action.clearAll.ariaLabel',
         defaultMessage: 'Clear all applied filters'
-    })
+    });
 
     const clearAll = filterState.size ? (
         <div className={classes.action}>
-            <LinkButton type="button" onClick={handleReset} ariaLabel={clearAllAriaLabel}>
+            <LinkButton
+                type="button"
+                onClick={handleReset}
+                ariaLabel={clearAllAriaLabel}
+            >
                 <FormattedMessage
                     id={'filterModal.action'}
                     defaultMessage={'Clear all'}
@@ -90,9 +94,11 @@ const FilterModal = props => {
         <Portal>
             <FocusScope contain>
                 {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
-                <aside className={modalClass}
-                       onKeyDown={handleKeyDownActions}
-                       onTransitionEnd={handleTransitionEnd}>
+                <aside
+                    className={modalClass}
+                    onKeyDown={handleKeyDownActions}
+                    onTransitionEnd={handleTransitionEnd}
+                >
                     <div className={classes.body}>
                         <div className={classes.header}>
                             <h2 className={classes.headerTitle}>
@@ -101,10 +107,12 @@ const FilterModal = props => {
                                     defaultMessage={'Filters'}
                                 />
                             </h2>
-                            <button onClick={handleClose}
-                                    ref={closeFiltersModalButtonRef}
-                                    aria-disabled={false}
-                                    aria-label={closeAriaLabel}>
+                            <button
+                                onClick={handleClose}
+                                ref={closeFiltersModalButtonRef}
+                                aria-disabled={false}
+                                aria-label={closeAriaLabel}
+                            >
                                 <Icon src={CloseIcon} />
                             </button>
                         </div>
@@ -114,7 +122,12 @@ const FilterModal = props => {
                             filterState={filterState}
                         />
                         {clearAll}
-                        <ul className={classes.blocks} aria-label={filtersAriaLabel}>{filtersList}</ul>
+                        <ul
+                            className={classes.blocks}
+                            aria-label={filtersAriaLabel}
+                        >
+                            {filtersList}
+                        </ul>
                     </div>
                     <FilterFooter
                         applyFilters={handleApply}
diff --git a/packages/venia-ui/lib/components/Trigger/trigger.js b/packages/venia-ui/lib/components/Trigger/trigger.js
index 69acd86c9c..534ee26a8f 100644
--- a/packages/venia-ui/lib/components/Trigger/trigger.js
+++ b/packages/venia-ui/lib/components/Trigger/trigger.js
@@ -20,7 +20,12 @@ const Trigger = props => {
     const classes = mergeClasses(defaultClasses, props.classes);
 
     return (
-        <button className={classes.root} type="button" onClick={action} aria-label={ariaLabel}>
+        <button
+            className={classes.root}
+            type="button"
+            onClick={action}
+            aria-label={ariaLabel}
+        >
             {children}
         </button>
     );

From d7c04fe1870785a1af6fd14e77bb0bd183b8c7f1 Mon Sep 17 00:00:00 2001
From: Vasilii Burlacu <v.burlacu@atwix.com>
Date: Wed, 3 Mar 2021 14:45:03 +0200
Subject: [PATCH 04/39] run eslint

---
 .../lib/components/FilterModal/FilterList/filterDefault.js      | 1 -
 packages/venia-ui/lib/components/FilterModal/filterModal.js     | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js b/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js
index bd87d893d5..04d9ed590c 100644
--- a/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js
+++ b/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js
@@ -11,7 +11,6 @@ const FilterDefault = props => {
         classes: propsClasses,
         isSelected,
         item,
-        title,
         ...restProps
     } = props;
     const { label, value_index } = item || {};
diff --git a/packages/venia-ui/lib/components/FilterModal/filterModal.js b/packages/venia-ui/lib/components/FilterModal/filterModal.js
index 53fde933c2..ba5860474b 100644
--- a/packages/venia-ui/lib/components/FilterModal/filterModal.js
+++ b/packages/venia-ui/lib/components/FilterModal/filterModal.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback, useMemo, useRef } from 'react';
+import React, { useMemo, useRef } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { FocusScope } from 'react-aria';
 import { array, arrayOf, shape, string } from 'prop-types';

From 388d4fa03f113c3c73a5953d36ae418dfca6e957 Mon Sep 17 00:00:00 2001
From: Vasilii Burlacu <v.burlacu@atwix.com>
Date: Wed, 3 Mar 2021 15:04:58 +0200
Subject: [PATCH 05/39] run prettier

---
 .../lib/components/FilterModal/FilterList/filterDefault.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js b/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js
index 04d9ed590c..db0594bcaa 100644
--- a/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js
+++ b/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js
@@ -7,12 +7,7 @@ import { mergeClasses } from '../../../classify';
 import defaultClasses from './filterDefault.css';
 
 const FilterDefault = props => {
-    const {
-        classes: propsClasses,
-        isSelected,
-        item,
-        ...restProps
-    } = props;
+    const { classes: propsClasses, isSelected, item, ...restProps } = props;
     const { label, value_index } = item || {};
     const { formatMessage } = useIntl();
     const classes = mergeClasses(defaultClasses, propsClasses);

From 3b3bb44c9c0816523806408a342dca3b07a3421a Mon Sep 17 00:00:00 2001
From: Vasilii Burlacu <v.burlacu@atwix.com>
Date: Thu, 4 Mar 2021 15:19:25 +0200
Subject: [PATCH 06/39] fixed issue "focus on close button after applying
 filter item option"

---
 .../lib/talons/FilterModal/useFilterModal.js        | 13 +++----------
 .../RootComponents/Category/useCategoryContent.js   | 13 ++++++++++---
 .../lib/RootComponents/Category/categoryContent.js  |  4 +++-
 .../lib/components/FilterModal/filterModal.js       | 10 +++-------
 4 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/packages/peregrine/lib/talons/FilterModal/useFilterModal.js b/packages/peregrine/lib/talons/FilterModal/useFilterModal.js
index b15bb923fd..d4a524fef9 100644
--- a/packages/peregrine/lib/talons/FilterModal/useFilterModal.js
+++ b/packages/peregrine/lib/talons/FilterModal/useFilterModal.js
@@ -21,7 +21,7 @@ import DEFAULT_OPERATIONS from './filterModal.gql';
  * }}
  */
 export const useFilterModal = props => {
-    const { filters, closeFiltersModalButtonRef } = props;
+    const { filters, handleCloseFilters } = props;
 
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
     const { getFilterInputsQuery } = operations;
@@ -147,7 +147,8 @@ export const useFilterModal = props => {
 
     const handleClose = useCallback(() => {
         closeDrawer();
-    }, [closeDrawer]);
+        handleCloseFilters();
+    }, [closeDrawer, handleCloseFilters]);
 
     const handleReset = useCallback(() => {
         filterApi.clear();
@@ -171,13 +172,6 @@ export const useFilterModal = props => {
         [isOpen, handleClose]
     );
 
-    const handleTransitionEnd = useCallback(() => {
-        // focus the close button once the modal has been drawn on the screen
-        if (isOpen) {
-            closeFiltersModalButtonRef.current.focus();
-        }
-    }, [isOpen, closeFiltersModalButtonRef]);
-
     return {
         filterApi,
         filterItems,
@@ -188,7 +182,6 @@ export const useFilterModal = props => {
         handleClose,
         handleReset,
         handleKeyDownActions,
-        handleTransitionEnd,
         isApplying,
         isOpen
     };
diff --git a/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js b/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js
index 481889a646..203febd6ee 100644
--- a/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js
+++ b/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js
@@ -31,15 +31,20 @@ export const useCategoryContent = props => {
 
     const placeholderItems = Array.from({ length: pageSize }).fill(null);
     const [loadFilters, setLoadFilters] = useState(false);
-    const [, { toggleDrawer }] = useAppContext();
+    const [showFiltersModal, setShowFiltersModal] = useState(false);
+    const [, { toggleDrawer, closeDrawer }] = useAppContext();
 
     const handleLoadFilters = useCallback(() => {
         setLoadFilters(true);
     }, [setLoadFilters]);
     const handleOpenFilters = useCallback(() => {
-        setLoadFilters(true);
+        setShowFiltersModal(true);
         toggleDrawer(DRAWER_NAME);
-    }, [setLoadFilters, toggleDrawer]);
+    }, [setShowFiltersModal, toggleDrawer]);
+    const handleCloseFilters = useCallback(() => {
+        setShowFiltersModal(false);
+        closeDrawer(DRAWER_NAME);
+    }, [setShowFiltersModal, closeDrawer]);
 
     const [getFilters, { data: filterData }] = useLazyQuery(
         getProductFiltersByCategoryQuery,
@@ -77,8 +82,10 @@ export const useCategoryContent = props => {
         categoryName,
         categoryDescription,
         filters,
+        showFiltersModal,
         handleLoadFilters,
         handleOpenFilters,
+        handleCloseFilters,
         items,
         loadFilters,
         pageTitle,
diff --git a/packages/venia-ui/lib/RootComponents/Category/categoryContent.js b/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
index 765af78630..626741372a 100644
--- a/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
+++ b/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
@@ -32,6 +32,8 @@ const CategoryContent = props => {
         filters,
         handleLoadFilters,
         handleOpenFilters,
+        handleCloseFilters,
+        showFiltersModal,
         items,
         pageTitle,
         totalPagesFromData
@@ -79,7 +81,7 @@ const CategoryContent = props => {
     // If you want to defer the loading of the FilterModal until user interaction
     // (hover, focus, click), simply add the talon's `loadFilters` prop as
     // part of the conditional here.
-    const modal = filters ? <FilterModal filters={filters} /> : null;
+    const modal = showFiltersModal ? <FilterModal filters={filters} handleCloseFilters={handleCloseFilters} /> : null;
 
     const categoryDescriptionElement = categoryDescription ? (
         <RichContent html={categoryDescription} />
diff --git a/packages/venia-ui/lib/components/FilterModal/filterModal.js b/packages/venia-ui/lib/components/FilterModal/filterModal.js
index ba5860474b..8d2a1cede9 100644
--- a/packages/venia-ui/lib/components/FilterModal/filterModal.js
+++ b/packages/venia-ui/lib/components/FilterModal/filterModal.js
@@ -20,10 +20,9 @@ import defaultClasses from './filterModal.css';
  * @param {Object} props.filters - filters to display
  */
 const FilterModal = props => {
-    const { filters } = props;
+    const { filters, handleCloseFilters } = props;
     const { formatMessage } = useIntl();
-    const closeFiltersModalButtonRef = useRef();
-    const talonProps = useFilterModal({ filters, closeFiltersModalButtonRef });
+    const talonProps = useFilterModal({ filters, handleCloseFilters });
     const {
         filterApi,
         filterItems,
@@ -33,7 +32,6 @@ const FilterModal = props => {
         handleClose,
         handleReset,
         handleKeyDownActions,
-        handleTransitionEnd,
         isOpen
     } = talonProps;
 
@@ -92,12 +90,11 @@ const FilterModal = props => {
 
     return (
         <Portal>
-            <FocusScope contain>
+            <FocusScope contain restoreFocus autoFocus>
                 {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
                 <aside
                     className={modalClass}
                     onKeyDown={handleKeyDownActions}
-                    onTransitionEnd={handleTransitionEnd}
                 >
                     <div className={classes.body}>
                         <div className={classes.header}>
@@ -109,7 +106,6 @@ const FilterModal = props => {
                             </h2>
                             <button
                                 onClick={handleClose}
-                                ref={closeFiltersModalButtonRef}
                                 aria-disabled={false}
                                 aria-label={closeAriaLabel}
                             >

From 78b73256f96887550607010cca22afacbf4985bd Mon Sep 17 00:00:00 2001
From: Vasilii Burlacu <v.burlacu@atwix.com>
Date: Thu, 4 Mar 2021 15:47:45 +0200
Subject: [PATCH 07/39] remove filter modal from DOM when drawer closes

---
 .../lib/talons/FilterModal/useFilterModal.js         | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/peregrine/lib/talons/FilterModal/useFilterModal.js b/packages/peregrine/lib/talons/FilterModal/useFilterModal.js
index d4a524fef9..69d58a2d51 100644
--- a/packages/peregrine/lib/talons/FilterModal/useFilterModal.js
+++ b/packages/peregrine/lib/talons/FilterModal/useFilterModal.js
@@ -123,11 +123,11 @@ export const useFilterModal = props => {
         }
     }, [filterKeys, filterState, history, isApplying, pathname, search]);
 
-    // on drawer toggle, read filter state from location
     useEffect(() => {
         const justOpened = prevDrawer.current === null && drawer === 'filter';
         const justClosed = prevDrawer.current === 'filter' && drawer === null;
 
+        // on drawer toggle, read filter state from location
         if (justOpened || justClosed) {
             const nextState = getStateFromSearch(
                 search,
@@ -137,8 +137,14 @@ export const useFilterModal = props => {
 
             filterApi.setItems(nextState);
         }
+
+        // on drawer close, update the modal visibility state
+        if (justClosed) {
+            handleCloseFilters();
+        }
+
         prevDrawer.current = drawer;
-    }, [drawer, filterApi, filterItems, filterKeys, search]);
+    }, [drawer, filterApi, filterItems, filterKeys, search, handleCloseFilters]);
 
     const handleApply = useCallback(() => {
         setIsApplying(true);
@@ -147,7 +153,7 @@ export const useFilterModal = props => {
 
     const handleClose = useCallback(() => {
         closeDrawer();
-        handleCloseFilters();
+        // handleCloseFilters();
     }, [closeDrawer, handleCloseFilters]);
 
     const handleReset = useCallback(() => {

From 495e1093799cd7459edd9520e0d6903a1cb3f03c Mon Sep 17 00:00:00 2001
From: Vasilii Burlacu <v.burlacu@atwix.com>
Date: Thu, 4 Mar 2021 16:03:04 +0200
Subject: [PATCH 08/39] eslint and prettier fixes

---
 .../lib/talons/FilterModal/useFilterModal.js          | 11 +++++++++--
 .../lib/RootComponents/Category/categoryContent.js    |  7 ++++++-
 .../lib/components/FilterModal/filterModal.js         |  8 +++-----
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/packages/peregrine/lib/talons/FilterModal/useFilterModal.js b/packages/peregrine/lib/talons/FilterModal/useFilterModal.js
index 69d58a2d51..d08098d1d2 100644
--- a/packages/peregrine/lib/talons/FilterModal/useFilterModal.js
+++ b/packages/peregrine/lib/talons/FilterModal/useFilterModal.js
@@ -144,7 +144,14 @@ export const useFilterModal = props => {
         }
 
         prevDrawer.current = drawer;
-    }, [drawer, filterApi, filterItems, filterKeys, search, handleCloseFilters]);
+    }, [
+        drawer,
+        filterApi,
+        filterItems,
+        filterKeys,
+        search,
+        handleCloseFilters
+    ]);
 
     const handleApply = useCallback(() => {
         setIsApplying(true);
@@ -154,7 +161,7 @@ export const useFilterModal = props => {
     const handleClose = useCallback(() => {
         closeDrawer();
         // handleCloseFilters();
-    }, [closeDrawer, handleCloseFilters]);
+    }, [closeDrawer]);
 
     const handleReset = useCallback(() => {
         filterApi.clear();
diff --git a/packages/venia-ui/lib/RootComponents/Category/categoryContent.js b/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
index 626741372a..9a311fa537 100644
--- a/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
+++ b/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
@@ -81,7 +81,12 @@ const CategoryContent = props => {
     // If you want to defer the loading of the FilterModal until user interaction
     // (hover, focus, click), simply add the talon's `loadFilters` prop as
     // part of the conditional here.
-    const modal = showFiltersModal ? <FilterModal filters={filters} handleCloseFilters={handleCloseFilters} /> : null;
+    const modal = showFiltersModal ? (
+        <FilterModal
+            filters={filters}
+            handleCloseFilters={handleCloseFilters}
+        />
+    ) : null;
 
     const categoryDescriptionElement = categoryDescription ? (
         <RichContent html={categoryDescription} />
diff --git a/packages/venia-ui/lib/components/FilterModal/filterModal.js b/packages/venia-ui/lib/components/FilterModal/filterModal.js
index 8d2a1cede9..0c1e8efd1a 100644
--- a/packages/venia-ui/lib/components/FilterModal/filterModal.js
+++ b/packages/venia-ui/lib/components/FilterModal/filterModal.js
@@ -1,4 +1,4 @@
-import React, { useMemo, useRef } from 'react';
+import React, { useMemo } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { FocusScope } from 'react-aria';
 import { array, arrayOf, shape, string } from 'prop-types';
@@ -90,12 +90,10 @@ const FilterModal = props => {
 
     return (
         <Portal>
+            {/* eslint-disable-next-line jsx-a11y/no-autofocus */}
             <FocusScope contain restoreFocus autoFocus>
                 {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
-                <aside
-                    className={modalClass}
-                    onKeyDown={handleKeyDownActions}
-                >
+                <aside className={modalClass} onKeyDown={handleKeyDownActions}>
                     <div className={classes.body}>
                         <div className={classes.header}>
                             <h2 className={classes.headerTitle}>

From 8baef15a73b6020264c65ff4a0d5a1c8d29325c0 Mon Sep 17 00:00:00 2001
From: Vasilii Burlacu <v.burlacu@atwix.com>
Date: Mon, 5 Apr 2021 07:59:09 +0300
Subject: [PATCH 09/39] progress: fixing issue - focus not set to "Filters"
 button after filters applied

---
 .../Category/useCategoryContent.js            | 31 +++++++++++++++++--
 .../Category/categoryContent.js               |  4 ++-
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js b/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js
index 203febd6ee..c0baa757b8 100644
--- a/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js
+++ b/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js
@@ -1,10 +1,12 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState, useRef } from 'react';
 import { useLazyQuery } from '@apollo/client';
 
 import mergeOperations from '../../../util/shallowMerge';
 import { useAppContext } from '../../../context/app';
 
 import DEFAULT_OPERATIONS from './categoryContent.gql';
+import { useFilterState } from "../../FilterModal";
+import {getStateFromSearch} from "../../FilterModal/helpers";
 
 const DRAWER_NAME = 'filter';
 
@@ -32,7 +34,10 @@ export const useCategoryContent = props => {
     const placeholderItems = Array.from({ length: pageSize }).fill(null);
     const [loadFilters, setLoadFilters] = useState(false);
     const [showFiltersModal, setShowFiltersModal] = useState(false);
-    const [, { toggleDrawer, closeDrawer }] = useAppContext();
+    const [openFiltersFocus, setOpenFiltersFocus] = useState(false);
+    const [filterState] = useFilterState();
+    const [{ drawer }, { toggleDrawer, closeDrawer }] = useAppContext();
+    const prevDrawer = useRef(null);
 
     const handleLoadFilters = useCallback(() => {
         setLoadFilters(true);
@@ -66,6 +71,25 @@ export const useCategoryContent = props => {
         }
     }, [categoryId, getFilters]);
 
+    // Focus for the button that opens filters should be set
+    // when filters just applied and filters drawer just closed
+    useEffect(() => {
+        const justClosed = prevDrawer.current === 'filter' && drawer === null;
+console.log(justClosed, prevDrawer.current, drawer);
+        // on drawer close, update the modal visibility state
+        // if (justClosed) {
+        //     setOpenFiltersFocus(true);
+        // } else {
+        //     setOpenFiltersFocus(false);
+        // }
+console.log(filterState, filterState.size);
+        prevDrawer.current = drawer;
+    }, [
+        drawer,
+        // setOpenFiltersFocus,
+        filterState
+    ]);
+
     const filters = filterData ? filterData.products.aggregations : null;
     const items = data ? data.products.items : placeholderItems;
     const totalPagesFromData = data
@@ -89,6 +113,7 @@ export const useCategoryContent = props => {
         items,
         loadFilters,
         pageTitle,
-        totalPagesFromData
+        totalPagesFromData,
+        openFiltersFocus
     };
 };
diff --git a/packages/venia-ui/lib/RootComponents/Category/categoryContent.js b/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
index 9a311fa537..8062a64aab 100644
--- a/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
+++ b/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
@@ -36,7 +36,8 @@ const CategoryContent = props => {
         showFiltersModal,
         items,
         pageTitle,
-        totalPagesFromData
+        totalPagesFromData,
+        openFiltersFocus
     } = talonProps;
 
     const classes = mergeClasses(defaultClasses, props.classes);
@@ -49,6 +50,7 @@ const CategoryContent = props => {
             onFocus={handleLoadFilters}
             onMouseOver={handleLoadFilters}
             type="button"
+            autoFocus={openFiltersFocus}
         >
             <FormattedMessage
                 id={'categoryContent.filter'}

From b205c93d36d49b8e1d2f5561203a2f2f9d6216c8 Mon Sep 17 00:00:00 2001
From: sirugh <rugh@adobe.com>
Date: Tue, 6 Apr 2021 12:42:36 -0500
Subject: [PATCH 10/39] prevent filter button from unmounting when applying
 uncached filters

Signed-off-by: sirugh <rugh@adobe.com>
---
 .../Category/categoryContent.gql.js           | 11 ++++
 .../Category/categoryFragments.gql.js         |  3 -
 .../Category/useCategoryContent.js            | 45 +++++++-------
 .../lib/RootComponents/Category/category.js   |  7 +--
 .../Category/categoryContent.js               | 60 +++++++++++++------
 5 files changed, 77 insertions(+), 49 deletions(-)

diff --git a/packages/peregrine/lib/talons/RootComponents/Category/categoryContent.gql.js b/packages/peregrine/lib/talons/RootComponents/Category/categoryContent.gql.js
index d01e9eb2a2..378d86411a 100644
--- a/packages/peregrine/lib/talons/RootComponents/Category/categoryContent.gql.js
+++ b/packages/peregrine/lib/talons/RootComponents/Category/categoryContent.gql.js
@@ -18,6 +18,17 @@ export const GET_PRODUCT_FILTERS_BY_CATEGORY = gql`
     }
 `;
 
+export const GET_CATEGORY_CONTENT = gql`
+    query getCategoryData($id: Int!) {
+        category(id: $id) {
+            id
+            name
+            description
+        }
+    }
+`;
+
 export default {
+    getCategoryContentQuery: GET_CATEGORY_CONTENT,
     getProductFiltersByCategoryQuery: GET_PRODUCT_FILTERS_BY_CATEGORY
 };
diff --git a/packages/peregrine/lib/talons/RootComponents/Category/categoryFragments.gql.js b/packages/peregrine/lib/talons/RootComponents/Category/categoryFragments.gql.js
index d3596a87cb..39809f13d2 100644
--- a/packages/peregrine/lib/talons/RootComponents/Category/categoryFragments.gql.js
+++ b/packages/peregrine/lib/talons/RootComponents/Category/categoryFragments.gql.js
@@ -3,9 +3,6 @@ import { gql } from '@apollo/client';
 export const CategoryFragment = gql`
     fragment CategoryFragment on CategoryTree {
         id
-        description
-        name
-        product_count
         meta_title
         meta_keywords
         meta_description
diff --git a/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js b/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js
index e694fd5b2c..307dba2078 100644
--- a/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js
+++ b/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js
@@ -1,12 +1,11 @@
 import { useCallback, useEffect, useState, useRef } from 'react';
-import { useLazyQuery } from '@apollo/client';
+import { useLazyQuery, useQuery } from '@apollo/client';
 
 import mergeOperations from '../../../util/shallowMerge';
 import { useAppContext } from '../../../context/app';
 
 import DEFAULT_OPERATIONS from './categoryContent.gql';
 import { useFilterState } from '../../FilterModal';
-import { getStateFromSearch } from '../../FilterModal/helpers';
 
 const DRAWER_NAME = 'filter';
 
@@ -28,12 +27,15 @@ export const useCategoryContent = props => {
     const { categoryId, data, pageSize = 6 } = props;
 
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
-    const { getProductFiltersByCategoryQuery } = operations;
+
+    const {
+        getCategoryContentQuery,
+        getProductFiltersByCategoryQuery
+    } = operations;
 
     const placeholderItems = Array.from({ length: pageSize }).fill(null);
     const [loadFilters, setLoadFilters] = useState(false);
     const [showFiltersModal, setShowFiltersModal] = useState(false);
-    const [openFiltersFocus, setOpenFiltersFocus] = useState(false);
     const [filterState] = useFilterState();
     const [{ drawer }, { toggleDrawer, closeDrawer }] = useAppContext();
     const prevDrawer = useRef(null);
@@ -41,10 +43,12 @@ export const useCategoryContent = props => {
     const handleLoadFilters = useCallback(() => {
         setLoadFilters(true);
     }, [setLoadFilters]);
+
     const handleOpenFilters = useCallback(() => {
         setShowFiltersModal(true);
         toggleDrawer(DRAWER_NAME);
     }, [setShowFiltersModal, toggleDrawer]);
+
     const handleCloseFilters = useCallback(() => {
         setShowFiltersModal(false);
         closeDrawer(DRAWER_NAME);
@@ -58,6 +62,15 @@ export const useCategoryContent = props => {
         }
     );
 
+    const { data: categoryData } = useQuery(getCategoryContentQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first',
+        skip: !categoryId,
+        variables: {
+            id: categoryId
+        }
+    });
+
     useEffect(() => {
         if (categoryId) {
             getFilters({
@@ -73,29 +86,18 @@ export const useCategoryContent = props => {
     // Focus for the button that opens filters should be set
     // when filters just applied and filters drawer just closed
     useEffect(() => {
-        const justClosed = prevDrawer.current === 'filter' && drawer === null;
-        console.log(justClosed, prevDrawer.current, drawer);
-        // on drawer close, update the modal visibility state
-        // if (justClosed) {
-        //     setOpenFiltersFocus(true);
-        // } else {
-        //     setOpenFiltersFocus(false);
-        // }
-        console.log(filterState, filterState.size);
         prevDrawer.current = drawer;
-    }, [
-        drawer,
-        // setOpenFiltersFocus,
-        filterState
-    ]);
+    }, [drawer, filterState]);
 
     const filters = filterData ? filterData.products.aggregations : null;
     const items = data ? data.products.items : placeholderItems;
     const totalPagesFromData = data
         ? data.products.page_info.total_pages
         : null;
-    const categoryName = data ? data.category.name : null;
-    const categoryDescription = data ? data.category.description : null;
+    const categoryName = categoryData ? categoryData.category.name : null;
+    const categoryDescription = categoryData
+        ? categoryData.category.description
+        : null;
 
     return {
         categoryName,
@@ -107,7 +109,6 @@ export const useCategoryContent = props => {
         handleCloseFilters,
         items,
         loadFilters,
-        totalPagesFromData,
-        openFiltersFocus
+        totalPagesFromData
     };
 };
diff --git a/packages/venia-ui/lib/RootComponents/Category/category.js b/packages/venia-ui/lib/RootComponents/Category/category.js
index 4182ea27da..62d6c65dc9 100644
--- a/packages/venia-ui/lib/RootComponents/Category/category.js
+++ b/packages/venia-ui/lib/RootComponents/Category/category.js
@@ -2,7 +2,6 @@ import React, { Fragment } from 'react';
 import { number, shape, string } from 'prop-types';
 import { useCategory } from '@magento/peregrine/lib/talons/RootComponents/Category';
 import { mergeClasses } from '../../classify';
-import { fullPageLoadingIndicator } from '../../components/LoadingIndicator';
 
 import CategoryContent from './categoryContent';
 import defaultClasses from './category.css';
@@ -33,11 +32,6 @@ const Category = props => {
     const classes = mergeClasses(defaultClasses, props.classes);
 
     if (!categoryData) {
-        // Show the loading indicator until data has been fetched.
-        if (loading) {
-            return fullPageLoadingIndicator;
-        }
-
         if (error && pageControl.currentPage === 1) {
             if (process.env.NODE_ENV !== 'production') {
                 console.error(error);
@@ -54,6 +48,7 @@ const Category = props => {
                 categoryId={id}
                 classes={classes}
                 data={categoryData}
+                isLoading={loading}
                 pageControl={pageControl}
                 sortProps={sortProps}
                 pageSize={pageSize}
diff --git a/packages/venia-ui/lib/RootComponents/Category/categoryContent.js b/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
index 034cd6e5b3..18a1098994 100644
--- a/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
+++ b/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
@@ -1,4 +1,4 @@
-import React, { Fragment, Suspense } from 'react';
+import React, { Fragment, Suspense, useMemo } from 'react';
 import { array, number, shape, string } from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { useCategoryContent } from '@magento/peregrine/lib/talons/RootComponents/Category';
@@ -13,11 +13,19 @@ import ProductSort from '../../components/ProductSort';
 import RichContent from '../../components/RichContent';
 import defaultClasses from './category.css';
 import NoProductsFound from './NoProductsFound';
+import { fullPageLoadingIndicator } from '../../components/LoadingIndicator';
 
 const FilterModal = React.lazy(() => import('../../components/FilterModal'));
 
 const CategoryContent = props => {
-    const { categoryId, data, pageControl, sortProps, pageSize } = props;
+    const {
+        categoryId,
+        data,
+        isLoading,
+        pageControl,
+        sortProps,
+        pageSize
+    } = props;
     const [currentSort] = sortProps;
 
     const talonProps = useCategoryContent({
@@ -35,8 +43,7 @@ const CategoryContent = props => {
         handleCloseFilters,
         showFiltersModal,
         items,
-        totalPagesFromData,
-        openFiltersFocus
+        totalPagesFromData
     } = talonProps;
 
     const classes = mergeClasses(defaultClasses, props.classes);
@@ -49,7 +56,6 @@ const CategoryContent = props => {
             onFocus={handleLoadFilters}
             onMouseOver={handleLoadFilters}
             type="button"
-            autoFocus={openFiltersFocus}
         >
             <FormattedMessage
                 id={'categoryContent.filter'}
@@ -93,18 +99,34 @@ const CategoryContent = props => {
         <RichContent html={categoryDescription} />
     ) : null;
 
-    const content = totalPagesFromData ? (
-        <Fragment>
-            <section className={classes.gallery}>
-                <Gallery items={items} />
-            </section>
-            <div className={classes.pagination}>
-                <Pagination pageControl={pageControl} />
-            </div>
-        </Fragment>
-    ) : (
-        <NoProductsFound categoryId={categoryId} />
-    );
+    const content = useMemo(() => {
+        if (totalPagesFromData) {
+            return (
+                <Fragment>
+                    <section className={classes.gallery}>
+                        <Gallery items={items} />
+                    </section>
+                    <div className={classes.pagination}>
+                        <Pagination pageControl={pageControl} />
+                    </div>
+                </Fragment>
+            );
+        } else {
+            if (isLoading) {
+                return fullPageLoadingIndicator;
+            } else {
+                return <NoProductsFound categoryId={categoryId} />;
+            }
+        }
+    }, [
+        categoryId,
+        classes.gallery,
+        classes.pagination,
+        isLoading,
+        items,
+        pageControl,
+        totalPagesFromData
+    ]);
 
     return (
         <Fragment>
@@ -112,7 +134,9 @@ const CategoryContent = props => {
             <StoreTitle>{categoryName}</StoreTitle>
             <article className={classes.root}>
                 <h1 className={classes.title}>
-                    <div className={classes.categoryTitle}>{categoryName}</div>
+                    <div className={classes.categoryTitle}>
+                        {categoryName || '...'}
+                    </div>
                 </h1>
                 {categoryDescriptionElement}
                 <div className={classes.headerButtons}>

From 7fb4dfad65560f29d36adbfd7acac78b06b71623 Mon Sep 17 00:00:00 2001
From: Vasilii Burlacu <v.burlacu@atwix.com>
Date: Sat, 17 Apr 2021 17:06:07 +0300
Subject: [PATCH 11/39] Made the Filter Button and Sorted By Container reusable
 components and use them on Category and Search pages

---
 .../lib/talons/FilterModal/useFilterModal.js  | 81 ++++++++++---------
 .../Category/useCategoryContent.js            | 25 ------
 .../lib/RootComponents/Category/category.css  | 16 ----
 .../Category/categoryContent.js               | 63 ++++-----------
 .../lib/components/FilterModal/filterModal.js |  8 +-
 .../filterModalOpenButton.css                 |  4 +
 .../filterModalOpenButton.js                  | 46 +++++++++++
 .../components/FilterModalOpenButton/index.js |  1 +
 .../lib/components/SearchPage/searchPage.js   | 39 +++------
 .../lib/components/SortedByContainer/index.js |  1 +
 .../SortedByContainer/sortedByContainer.css   | 10 +++
 .../SortedByContainer/sortedByContainer.js    | 43 ++++++++++
 12 files changed, 179 insertions(+), 158 deletions(-)
 create mode 100644 packages/venia-ui/lib/components/FilterModalOpenButton/filterModalOpenButton.css
 create mode 100644 packages/venia-ui/lib/components/FilterModalOpenButton/filterModalOpenButton.js
 create mode 100644 packages/venia-ui/lib/components/FilterModalOpenButton/index.js
 create mode 100644 packages/venia-ui/lib/components/SortedByContainer/index.js
 create mode 100644 packages/venia-ui/lib/components/SortedByContainer/sortedByContainer.css
 create mode 100644 packages/venia-ui/lib/components/SortedByContainer/sortedByContainer.js

diff --git a/packages/peregrine/lib/talons/FilterModal/useFilterModal.js b/packages/peregrine/lib/talons/FilterModal/useFilterModal.js
index d08098d1d2..97aa9d8710 100644
--- a/packages/peregrine/lib/talons/FilterModal/useFilterModal.js
+++ b/packages/peregrine/lib/talons/FilterModal/useFilterModal.js
@@ -21,16 +21,17 @@ import DEFAULT_OPERATIONS from './filterModal.gql';
  * }}
  */
 export const useFilterModal = props => {
-    const { filters, handleCloseFilters } = props;
+    const { filters } = props;
 
+    const DRAWER_NAME = 'filter';
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
     const { getFilterInputsQuery } = operations;
 
     const [isApplying, setIsApplying] = useState(false);
-    const [{ drawer }, { closeDrawer }] = useAppContext();
+    const [{ drawer }, { toggleDrawer, closeDrawer }] = useAppContext();
     const [filterState, filterApi] = useFilterState();
     const prevDrawer = useRef(null);
-    const isOpen = drawer === 'filter';
+    const isOpen = drawer === DRAWER_NAME;
 
     const history = useHistory();
     const { pathname, search } = useLocation();
@@ -123,45 +124,18 @@ export const useFilterModal = props => {
         }
     }, [filterKeys, filterState, history, isApplying, pathname, search]);
 
-    useEffect(() => {
-        const justOpened = prevDrawer.current === null && drawer === 'filter';
-        const justClosed = prevDrawer.current === 'filter' && drawer === null;
-
-        // on drawer toggle, read filter state from location
-        if (justOpened || justClosed) {
-            const nextState = getStateFromSearch(
-                search,
-                filterKeys,
-                filterItems
-            );
-
-            filterApi.setItems(nextState);
-        }
-
-        // on drawer close, update the modal visibility state
-        if (justClosed) {
-            handleCloseFilters();
-        }
+    const handleOpen = useCallback(() => {
+        toggleDrawer(DRAWER_NAME);
+    }, [toggleDrawer]);
 
-        prevDrawer.current = drawer;
-    }, [
-        drawer,
-        filterApi,
-        filterItems,
-        filterKeys,
-        search,
-        handleCloseFilters
-    ]);
+    const handleClose = useCallback(() => {
+        closeDrawer(DRAWER_NAME);
+    }, [closeDrawer]);
 
     const handleApply = useCallback(() => {
         setIsApplying(true);
-        closeDrawer();
-    }, [closeDrawer]);
-
-    const handleClose = useCallback(() => {
-        closeDrawer();
-        // handleCloseFilters();
-    }, [closeDrawer]);
+        handleClose();
+    }, [handleClose]);
 
     const handleReset = useCallback(() => {
         filterApi.clear();
@@ -185,6 +159,36 @@ export const useFilterModal = props => {
         [isOpen, handleClose]
     );
 
+    useEffect(() => {
+        const justOpened = prevDrawer.current === null && drawer === DRAWER_NAME;
+        const justClosed = prevDrawer.current === DRAWER_NAME && drawer === null;
+
+        // on drawer toggle, read filter state from location
+        if (justOpened || justClosed) {
+            const nextState = getStateFromSearch(
+                search,
+                filterKeys,
+                filterItems
+            );
+
+            filterApi.setItems(nextState);
+        }
+
+        // on drawer close, update the modal visibility state
+        if (justClosed) {
+            handleClose();
+        }
+
+        prevDrawer.current = drawer;
+    }, [
+        drawer,
+        filterApi,
+        filterItems,
+        filterKeys,
+        search,
+        handleClose
+    ]);
+
     return {
         filterApi,
         filterItems,
@@ -192,6 +196,7 @@ export const useFilterModal = props => {
         filterNames,
         filterState,
         handleApply,
+        handleOpen,
         handleClose,
         handleReset,
         handleKeyDownActions,
diff --git a/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js b/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js
index 307dba2078..a518bc2934 100644
--- a/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js
+++ b/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js
@@ -7,8 +7,6 @@ import { useAppContext } from '../../../context/app';
 import DEFAULT_OPERATIONS from './categoryContent.gql';
 import { useFilterState } from '../../FilterModal';
 
-const DRAWER_NAME = 'filter';
-
 /**
  * Returns props necessary to render the categoryContent component.
  *
@@ -35,25 +33,11 @@ export const useCategoryContent = props => {
 
     const placeholderItems = Array.from({ length: pageSize }).fill(null);
     const [loadFilters, setLoadFilters] = useState(false);
-    const [showFiltersModal, setShowFiltersModal] = useState(false);
-    const [filterState] = useFilterState();
-    const [{ drawer }, { toggleDrawer, closeDrawer }] = useAppContext();
-    const prevDrawer = useRef(null);
 
     const handleLoadFilters = useCallback(() => {
         setLoadFilters(true);
     }, [setLoadFilters]);
 
-    const handleOpenFilters = useCallback(() => {
-        setShowFiltersModal(true);
-        toggleDrawer(DRAWER_NAME);
-    }, [setShowFiltersModal, toggleDrawer]);
-
-    const handleCloseFilters = useCallback(() => {
-        setShowFiltersModal(false);
-        closeDrawer(DRAWER_NAME);
-    }, [setShowFiltersModal, closeDrawer]);
-
     const [getFilters, { data: filterData }] = useLazyQuery(
         getProductFiltersByCategoryQuery,
         {
@@ -83,12 +67,6 @@ export const useCategoryContent = props => {
         }
     }, [categoryId, getFilters]);
 
-    // Focus for the button that opens filters should be set
-    // when filters just applied and filters drawer just closed
-    useEffect(() => {
-        prevDrawer.current = drawer;
-    }, [drawer, filterState]);
-
     const filters = filterData ? filterData.products.aggregations : null;
     const items = data ? data.products.items : placeholderItems;
     const totalPagesFromData = data
@@ -103,10 +81,7 @@ export const useCategoryContent = props => {
         categoryName,
         categoryDescription,
         filters,
-        showFiltersModal,
         handleLoadFilters,
-        handleOpenFilters,
-        handleCloseFilters,
         items,
         loadFilters,
         totalPagesFromData
diff --git a/packages/venia-ui/lib/RootComponents/Category/category.css b/packages/venia-ui/lib/RootComponents/Category/category.css
index d589a6f023..ee8b2050dd 100644
--- a/packages/venia-ui/lib/RootComponents/Category/category.css
+++ b/packages/venia-ui/lib/RootComponents/Category/category.css
@@ -31,19 +31,3 @@
     line-height: 1.375rem;
     text-align: center;
 }
-
-.sortContainer {
-    color: rgb(var(--venia-global-color-text-alt));
-    text-align: center;
-    font-size: 0.875rem;
-    padding-bottom: 1rem;
-}
-
-.sortText {
-    font-weight: 600;
-}
-
-.filterButton {
-    composes: root_lowPriority from '../../components/Button/button.css';
-    min-width: 6.25rem;
-}
diff --git a/packages/venia-ui/lib/RootComponents/Category/categoryContent.js b/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
index 18a1098994..f3c290be32 100644
--- a/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
+++ b/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
@@ -1,11 +1,9 @@
 import React, { Fragment, Suspense, useMemo } from 'react';
 import { array, number, shape, string } from 'prop-types';
-import { FormattedMessage } from 'react-intl';
 import { useCategoryContent } from '@magento/peregrine/lib/talons/RootComponents/Category';
 
 import { mergeClasses } from '../../classify';
 import Breadcrumbs from '../../components/Breadcrumbs';
-import Button from '../../components/Button';
 import Gallery from '../../components/Gallery';
 import { StoreTitle } from '../../components/Head';
 import Pagination from '../../components/Pagination';
@@ -14,6 +12,8 @@ import RichContent from '../../components/RichContent';
 import defaultClasses from './category.css';
 import NoProductsFound from './NoProductsFound';
 import { fullPageLoadingIndicator } from '../../components/LoadingIndicator';
+import SortedByContainer from "../../components/SortedByContainer";
+import FilterModalOpenButton from "../../components/FilterModalOpenButton";
 
 const FilterModal = React.lazy(() => import('../../components/FilterModal'));
 
@@ -38,62 +38,31 @@ const CategoryContent = props => {
         categoryName,
         categoryDescription,
         filters,
-        handleLoadFilters,
-        handleOpenFilters,
-        handleCloseFilters,
-        showFiltersModal,
         items,
         totalPagesFromData
     } = talonProps;
 
     const classes = mergeClasses(defaultClasses, props.classes);
 
-    const maybeFilterButtons = filters ? (
-        <Button
-            priority={'low'}
-            classes={{ root_lowPriority: classes.filterButton }}
-            onClick={handleOpenFilters}
-            onFocus={handleLoadFilters}
-            onMouseOver={handleLoadFilters}
-            type="button"
-        >
-            <FormattedMessage
-                id={'categoryContent.filter'}
-                defaultMessage={'Filter'}
-            />
-        </Button>
+    const maybeFilterButtons = filters && filters.length ? (
+        <FilterModalOpenButton filters={filters} />
     ) : null;
 
+    const filtersModal = filters && filters.length ? (
+        <FilterModal filters={filters} />
+    ) : null;
+
+    const filtersAndTotalPagesPresent = !!(totalPagesFromData && filters);
+
     const maybeSortButton =
-        totalPagesFromData && filters ? (
+        filtersAndTotalPagesPresent ? (
             <ProductSort sortProps={sortProps} />
         ) : null;
 
-    const maybeSortContainer =
-        totalPagesFromData && filters ? (
-            <div className={classes.sortContainer}>
-                <FormattedMessage
-                    id={'categoryContent.itemsSortedBy'}
-                    defaultMessage={'Items sorted by '}
-                />
-                <span className={classes.sortText}>
-                    <FormattedMessage
-                        id={currentSort.sortId}
-                        defaultMessage={currentSort.sortText}
-                    />
-                </span>
-            </div>
-        ) : null;
-
-    // If you want to defer the loading of the FilterModal until user interaction
-    // (hover, focus, click), simply add the talon's `loadFilters` prop as
-    // part of the conditional here.
-    const modal = showFiltersModal ? (
-        <FilterModal
-            filters={filters}
-            handleCloseFilters={handleCloseFilters}
-        />
-    ) : null;
+    const maybeSortContainer = <SortedByContainer
+        shouldDisplay={filtersAndTotalPagesPresent}
+        currentSort={currentSort}
+    />;
 
     const categoryDescriptionElement = categoryDescription ? (
         <RichContent html={categoryDescription} />
@@ -145,7 +114,7 @@ const CategoryContent = props => {
                 </div>
                 {maybeSortContainer}
                 {content}
-                <Suspense fallback={null}>{modal}</Suspense>
+                <Suspense fallback={null}>{filtersModal}</Suspense>
             </article>
         </Fragment>
     );
diff --git a/packages/venia-ui/lib/components/FilterModal/filterModal.js b/packages/venia-ui/lib/components/FilterModal/filterModal.js
index 0c1e8efd1a..461a151b8f 100644
--- a/packages/venia-ui/lib/components/FilterModal/filterModal.js
+++ b/packages/venia-ui/lib/components/FilterModal/filterModal.js
@@ -20,9 +20,9 @@ import defaultClasses from './filterModal.css';
  * @param {Object} props.filters - filters to display
  */
 const FilterModal = props => {
-    const { filters, handleCloseFilters } = props;
+    const { filters } = props;
     const { formatMessage } = useIntl();
-    const talonProps = useFilterModal({ filters, handleCloseFilters });
+    const talonProps = useFilterModal({ filters });
     const {
         filterApi,
         filterItems,
@@ -88,6 +88,10 @@ const FilterModal = props => {
         </div>
     ) : null;
 
+    // If you want to defer the loading of the FilterModal until user interaction
+    // (hover, focus, click), simply add the talon's `loadFilters` prop as
+    // part of the conditional here.
+
     return (
         <Portal>
             {/* eslint-disable-next-line jsx-a11y/no-autofocus */}
diff --git a/packages/venia-ui/lib/components/FilterModalOpenButton/filterModalOpenButton.css b/packages/venia-ui/lib/components/FilterModalOpenButton/filterModalOpenButton.css
new file mode 100644
index 0000000000..588ca7de5c
--- /dev/null
+++ b/packages/venia-ui/lib/components/FilterModalOpenButton/filterModalOpenButton.css
@@ -0,0 +1,4 @@
+.filterButton {
+    composes: root_lowPriority from '../../components/Button/button.css';
+    min-width: 6.25rem;
+}
diff --git a/packages/venia-ui/lib/components/FilterModalOpenButton/filterModalOpenButton.js b/packages/venia-ui/lib/components/FilterModalOpenButton/filterModalOpenButton.js
new file mode 100644
index 0000000000..6cdadcf752
--- /dev/null
+++ b/packages/venia-ui/lib/components/FilterModalOpenButton/filterModalOpenButton.js
@@ -0,0 +1,46 @@
+import React from "react";
+import { func, shape, string } from "prop-types";
+import { FormattedMessage } from "react-intl";
+import Button from "../Button";
+import {mergeClasses} from "../../classify";
+import defaultClasses from "./filterModalOpenButton.css";
+import {useFilterModal} from "@magento/peregrine/lib/talons/FilterModal";
+
+const FilterModalOpenButton = props => {
+    const {
+        filters,
+        classes: propsClasses
+    } = props;
+    const classes = mergeClasses(defaultClasses, propsClasses);
+    const {
+        handleOpen,
+    } = useFilterModal({ filters });
+
+    return (
+        <Button
+            priority={'low'}
+            classes={{
+                root_lowPriority: classes.filterButton
+            }}
+            onClick={handleOpen}
+            // onFocus={onFocusAction}
+            // onMouseOver={onMouseOverAction}
+            type="button"
+        >
+            <FormattedMessage
+                id={'productList.filter'}
+                defaultMessage={'Filter'}
+            />
+        </Button>
+    );
+}
+
+export default FilterModalOpenButton;
+
+FilterModalOpenButton.propTypes = {
+    handleOpenFilters: func,
+    handleLoadFilters: func,
+    classes: shape({
+        filterButton: string
+    })
+}
diff --git a/packages/venia-ui/lib/components/FilterModalOpenButton/index.js b/packages/venia-ui/lib/components/FilterModalOpenButton/index.js
new file mode 100644
index 0000000000..710851c701
--- /dev/null
+++ b/packages/venia-ui/lib/components/FilterModalOpenButton/index.js
@@ -0,0 +1 @@
+export { default } from './filterModalOpenButton';
diff --git a/packages/venia-ui/lib/components/SearchPage/searchPage.js b/packages/venia-ui/lib/components/SearchPage/searchPage.js
index 1a746e802e..937507698d 100644
--- a/packages/venia-ui/lib/components/SearchPage/searchPage.js
+++ b/packages/venia-ui/lib/components/SearchPage/searchPage.js
@@ -11,6 +11,8 @@ import { fullPageLoadingIndicator } from '../LoadingIndicator';
 import ProductSort from '../ProductSort';
 import Button from '../Button';
 import defaultClasses from './searchPage.css';
+import SortedByContainer from "../SortedByContainer";
+import FilterModalOpenButton from "../FilterModalOpenButton";
 
 const FilterModal = React.lazy(() => import('../FilterModal'));
 
@@ -24,7 +26,6 @@ const SearchPage = props => {
         error,
         filters,
         loading,
-        openDrawer,
         pageControl,
         searchCategory,
         searchTerm,
@@ -76,21 +77,9 @@ const SearchPage = props => {
     const totalCount = data.products.total_count || 0;
 
     const maybeFilterButtons =
-        filters && filters.length ? (
-            <Button
-                priority={'low'}
-                classes={{
-                    root_lowPriority: classes.filterButton
-                }}
-                onClick={openDrawer}
-                type="button"
-            >
-                <FormattedMessage
-                    id={'searchPage.filterButton'}
-                    defaultMessage={'Filter'}
-                />
-            </Button>
-        ) : null;
+        filters && filters.length ?
+            <FilterModalOpenButton filters={filters} />
+        : null;
 
     const maybeFilterModal =
         filters && filters.length ? <FilterModal filters={filters} /> : null;
@@ -99,20 +88,10 @@ const SearchPage = props => {
         <ProductSort sortProps={sortProps} />
     ) : null;
 
-    const maybeSortContainer = totalCount ? (
-        <span className={classes.sortContainer}>
-            <FormattedMessage
-                id={'searchPage.sortContainer'}
-                defaultMessage={'Items sorted by '}
-            />
-            <span className={classes.sortText}>
-                <FormattedMessage
-                    id={currentSort.sortId}
-                    defaultMessage={currentSort.sortText}
-                />
-            </span>
-        </span>
-    ) : null;
+    const maybeSortContainer = <SortedByContainer
+        shouldDisplay={!!totalCount}
+        currentSort={currentSort}
+    />;
 
     const searchResultsHeading = searchTerm ? (
         <FormattedMessage
diff --git a/packages/venia-ui/lib/components/SortedByContainer/index.js b/packages/venia-ui/lib/components/SortedByContainer/index.js
new file mode 100644
index 0000000000..9ef98b00e1
--- /dev/null
+++ b/packages/venia-ui/lib/components/SortedByContainer/index.js
@@ -0,0 +1 @@
+export { default } from './sortedByContainer';
diff --git a/packages/venia-ui/lib/components/SortedByContainer/sortedByContainer.css b/packages/venia-ui/lib/components/SortedByContainer/sortedByContainer.css
new file mode 100644
index 0000000000..4c718cbe69
--- /dev/null
+++ b/packages/venia-ui/lib/components/SortedByContainer/sortedByContainer.css
@@ -0,0 +1,10 @@
+.root {
+    color: rgb(var(--venia-global-color-text-alt));
+    text-align: center;
+    font-size: 0.875rem;
+    padding-bottom: 1rem;
+}
+
+.sortText {
+    font-weight: 600;
+}
diff --git a/packages/venia-ui/lib/components/SortedByContainer/sortedByContainer.js b/packages/venia-ui/lib/components/SortedByContainer/sortedByContainer.js
new file mode 100644
index 0000000000..d9b5a54874
--- /dev/null
+++ b/packages/venia-ui/lib/components/SortedByContainer/sortedByContainer.js
@@ -0,0 +1,43 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { FormattedMessage } from "react-intl";
+import { mergeClasses } from "../../classify";
+import defaultClasses from "./sortedByContainer.css";
+
+const SortedByContainer = props  => {
+    const {
+        shouldDisplay,
+        currentSort
+    } = props;
+
+    if (!shouldDisplay) {
+        return null;
+    }
+
+    const classes = mergeClasses(defaultClasses, props.classes);
+
+    return (
+        <span className={classes.root}>
+            <FormattedMessage
+                id={'searchPage.sortContainer'}
+                defaultMessage={'Items sorted by '}
+            />
+            <span className={classes.sortText}>
+                <FormattedMessage
+                    id={currentSort.sortId}
+                    defaultMessage={currentSort.sortText}
+                />
+            </span>
+        </span>
+    );
+}
+
+export default SortedByContainer;
+
+SortedByContainer.propTypes = {
+    shouldDisplay: PropTypes.bool,
+    currentSort: PropTypes.shape({
+        sortId: PropTypes.string,
+        sortText: PropTypes.string
+    })
+}

From 47c348096971b15b19108b87f6202ae9d65b5066 Mon Sep 17 00:00:00 2001
From: Vasilii Burlacu <v.burlacu@atwix.com>
Date: Sat, 17 Apr 2021 17:13:22 +0300
Subject: [PATCH 12/39] Fix issue: filter modal not autofocused and on filter
 modal close the initial button not focused back

---
 packages/venia-ui/lib/components/FilterModal/filterModal.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/venia-ui/lib/components/FilterModal/filterModal.js b/packages/venia-ui/lib/components/FilterModal/filterModal.js
index 461a151b8f..fa5eb955b5 100644
--- a/packages/venia-ui/lib/components/FilterModal/filterModal.js
+++ b/packages/venia-ui/lib/components/FilterModal/filterModal.js
@@ -91,6 +91,9 @@ const FilterModal = props => {
     // If you want to defer the loading of the FilterModal until user interaction
     // (hover, focus, click), simply add the talon's `loadFilters` prop as
     // part of the conditional here.
+    if (!isOpen) {
+        return null;
+    }
 
     return (
         <Portal>

From 88e1e400671a4a00e7d2a2d6cdef55ae3fb63635 Mon Sep 17 00:00:00 2001
From: Vasilii Burlacu <v.burlacu@atwix.com>
Date: Sat, 17 Apr 2021 17:24:40 +0300
Subject: [PATCH 13/39] Codestyle fixes

---
 .../components/FilterModalOpenButton/filterModalOpenButton.js | 4 ++--
 packages/venia-ui/lib/components/SearchPage/searchPage.js     | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/venia-ui/lib/components/FilterModalOpenButton/filterModalOpenButton.js b/packages/venia-ui/lib/components/FilterModalOpenButton/filterModalOpenButton.js
index 6cdadcf752..e8da11234e 100644
--- a/packages/venia-ui/lib/components/FilterModalOpenButton/filterModalOpenButton.js
+++ b/packages/venia-ui/lib/components/FilterModalOpenButton/filterModalOpenButton.js
@@ -2,9 +2,9 @@ import React from "react";
 import { func, shape, string } from "prop-types";
 import { FormattedMessage } from "react-intl";
 import Button from "../Button";
-import {mergeClasses} from "../../classify";
+import { mergeClasses } from "../../classify";
 import defaultClasses from "./filterModalOpenButton.css";
-import {useFilterModal} from "@magento/peregrine/lib/talons/FilterModal";
+import { useFilterModal } from "@magento/peregrine/lib/talons/FilterModal";
 
 const FilterModalOpenButton = props => {
     const {
diff --git a/packages/venia-ui/lib/components/SearchPage/searchPage.js b/packages/venia-ui/lib/components/SearchPage/searchPage.js
index 937507698d..996d7fed52 100644
--- a/packages/venia-ui/lib/components/SearchPage/searchPage.js
+++ b/packages/venia-ui/lib/components/SearchPage/searchPage.js
@@ -9,7 +9,6 @@ import Pagination from '../../components/Pagination';
 import Gallery from '../Gallery';
 import { fullPageLoadingIndicator } from '../LoadingIndicator';
 import ProductSort from '../ProductSort';
-import Button from '../Button';
 import defaultClasses from './searchPage.css';
 import SortedByContainer from "../SortedByContainer";
 import FilterModalOpenButton from "../FilterModalOpenButton";

From fd00536adf97ff355c381b7e25fe5949c19d4314 Mon Sep 17 00:00:00 2001
From: Vasilii Burlacu <v.burlacu@atwix.com>
Date: Sat, 17 Apr 2021 18:18:02 +0300
Subject: [PATCH 14/39] Made the 'Filters' button on search page focused after
 applying filter with non-cached valued

---
 .../lib/components/SearchPage/searchPage.js   | 89 +++++++++++--------
 1 file changed, 52 insertions(+), 37 deletions(-)

diff --git a/packages/venia-ui/lib/components/SearchPage/searchPage.js b/packages/venia-ui/lib/components/SearchPage/searchPage.js
index 996d7fed52..32b74bc988 100644
--- a/packages/venia-ui/lib/components/SearchPage/searchPage.js
+++ b/packages/venia-ui/lib/components/SearchPage/searchPage.js
@@ -1,4 +1,4 @@
-import React, { Fragment, Suspense } from 'react';
+import React, { Fragment, Suspense, useMemo } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { shape, string } from 'prop-types';
 
@@ -17,11 +17,14 @@ const FilterModal = React.lazy(() => import('../FilterModal'));
 
 const SearchPage = props => {
     const classes = mergeClasses(defaultClasses, props.classes);
-
     const talonProps = useSearchPage();
-
     const {
-        data,
+        data = {
+            products: {
+                items: [],
+                total_count: 0
+            }
+        },
         error,
         filters,
         loading,
@@ -30,13 +33,20 @@ const SearchPage = props => {
         searchTerm,
         sortProps
     } = talonProps;
-    const { formatMessage } = useIntl();
 
-    const [currentSort] = sortProps;
+    const {
+        products: {
+            items: productItems,
+            total_count: productsCount
+        }
+    } = data;
 
-    if (!data) {
+    const { formatMessage } = useIntl();
+    const [currentSort] = sortProps;
+    const content = useMemo(() => {
         if (loading) return fullPageLoadingIndicator;
-        else if (error) {
+
+        if (error) {
             return (
                 <div className={classes.noResult}>
                     <FormattedMessage
@@ -48,32 +58,37 @@ const SearchPage = props => {
                 </div>
             );
         }
-    }
-
-    let content;
-    if (data.products.items.length === 0) {
-        content = (
-            <div className={classes.noResult}>
-                <FormattedMessage
-                    id={'searchPage.noResultImportant'}
-                    defaultMessage={'No results found!'}
-                />
-            </div>
-        );
-    } else {
-        content = (
-            <Fragment>
-                <section className={classes.gallery}>
-                    <Gallery items={data.products.items} />
-                </section>
-                <section className={classes.pagination}>
-                    <Pagination pageControl={pageControl} />
-                </section>
-            </Fragment>
-        );
-    }
-
-    const totalCount = data.products.total_count || 0;
+
+        if (productItems.length === 0) {
+            return (
+                <div className={classes.noResult}>
+                    <FormattedMessage
+                        id={'searchPage.noResultImportant'}
+                        defaultMessage={'No results found!'}
+                    />
+                </div>
+            );
+        } else {
+            return (
+                <Fragment>
+                    <section className={classes.gallery}>
+                        <Gallery items={productItems} />
+                    </section>
+                    <section className={classes.pagination}>
+                        <Pagination pageControl={pageControl} />
+                    </section>
+                </Fragment>
+            );
+        }
+    }, [
+        classes.gallery,
+        classes.noResult,
+        classes.pagination,
+        error,
+        loading,
+        pageControl,
+        productItems
+    ]);
 
     const maybeFilterButtons =
         filters && filters.length ?
@@ -83,12 +98,12 @@ const SearchPage = props => {
     const maybeFilterModal =
         filters && filters.length ? <FilterModal filters={filters} /> : null;
 
-    const maybeSortButton = totalCount ? (
+    const maybeSortButton = productsCount ? (
         <ProductSort sortProps={sortProps} />
     ) : null;
 
     const maybeSortContainer = <SortedByContainer
-        shouldDisplay={!!totalCount}
+        shouldDisplay={!!productsCount}
         currentSort={currentSort}
     />;
 
@@ -120,7 +135,7 @@ const SearchPage = props => {
                             id: 'searchPage.totalPages',
                             defaultMessage: `items`
                         },
-                        { totalCount }
+                        { totalCount: productsCount }
                     )}
                 </span>
                 <div className={classes.headerButtons}>

From 18b6e9c6527be60d20a05714a49c719813f31ffa Mon Sep 17 00:00:00 2001
From: Vasilii Burlacu <v.burlacu@atwix.com>
Date: Fri, 23 Apr 2021 20:35:39 +0300
Subject: [PATCH 15/39] Added  adjustments as per maintainer review

---
 .../lib/talons/FilterModal/useFilterModal.js  |  5 ++--
 packages/venia-ui/i18n/en_US.json             | 12 +++++++-
 .../Category/categoryContent.js               |  7 ++---
 .../CurrentFilters/currentFilter.js           |  2 +-
 .../FilterModal/FilterList/filterDefault.js   |  4 +--
 .../lib/components/FilterModal/filterBlock.js |  6 ++--
 .../lib/components/SearchPage/searchPage.js   | 28 +++++++------------
 .../SortedByContainer/sortedByContainer.js    |  5 ----
 8 files changed, 33 insertions(+), 36 deletions(-)

diff --git a/packages/peregrine/lib/talons/FilterModal/useFilterModal.js b/packages/peregrine/lib/talons/FilterModal/useFilterModal.js
index 97aa9d8710..194b1ae90f 100644
--- a/packages/peregrine/lib/talons/FilterModal/useFilterModal.js
+++ b/packages/peregrine/lib/talons/FilterModal/useFilterModal.js
@@ -10,6 +10,8 @@ import { getSearchFromState, getStateFromSearch, stripHtml } from './helpers';
 
 import DEFAULT_OPERATIONS from './filterModal.gql';
 
+const DRAWER_NAME = 'filter';
+
 /**
  * Filter Modal talon.
  *
@@ -23,7 +25,6 @@ import DEFAULT_OPERATIONS from './filterModal.gql';
 export const useFilterModal = props => {
     const { filters } = props;
 
-    const DRAWER_NAME = 'filter';
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
     const { getFilterInputsQuery } = operations;
 
@@ -129,7 +130,7 @@ export const useFilterModal = props => {
     }, [toggleDrawer]);
 
     const handleClose = useCallback(() => {
-        closeDrawer(DRAWER_NAME);
+        closeDrawer();
     }, [closeDrawer]);
 
     const handleApply = useCallback(() => {
diff --git a/packages/venia-ui/i18n/en_US.json b/packages/venia-ui/i18n/en_US.json
index a6923ee25c..fd1e563028 100644
--- a/packages/venia-ui/i18n/en_US.json
+++ b/packages/venia-ui/i18n/en_US.json
@@ -398,5 +398,15 @@
     "wishlistPage.disabledMessage": "Sorry, this feature has been disabled.",
     "wishlistPage.fetchErrorMessage": "Something went wrong. Please refresh and try again.",
     "wishlistPage.headingText": "Favorites Lists",
-    "wishlistPage.wishlistDisabledMessage": "The wishlist is not currently available."
+    "wishlistPage.wishlistDisabledMessage": "The wishlist is not currently available.",
+    "filterModal.action.clearFilterItem.ariaLabel": "Clear filter \"{name}\"",
+    "filterModal.currentFilters.ariaLabel": "Current Filters",
+    "filterModal.item.applyFilter": "Apply filter \"{optionName}\".",
+    "filterModal.item.clearFilter": "Remove filter \"{optionName}\".",
+    "filterModal.item.ariaLabel": "Filter products by \"{itemName}\"",
+    "filterModal.item.hideOptions": "Hide \"{itemName}\" filter item options.",
+    "filterModal.item.showOptions": "Show \"{itemName}\" filter item options.",
+    "filterModal.filters.ariaLabel": "Filters",
+    "filterModal.filters.close.ariaLabel": "Close filters popup.",
+    "filterModal.action.clearAll.ariaLabel": "Clear all applied filters"
 }
diff --git a/packages/venia-ui/lib/RootComponents/Category/categoryContent.js b/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
index f3c290be32..9ac1029c80 100644
--- a/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
+++ b/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
@@ -52,17 +52,16 @@ const CategoryContent = props => {
         <FilterModal filters={filters} />
     ) : null;
 
-    const filtersAndTotalPagesPresent = !!(totalPagesFromData && filters);
+    const filtersAndTotalPagesPresent = !!(totalPagesFromData && filters && filters.length);
 
     const maybeSortButton =
         filtersAndTotalPagesPresent ? (
             <ProductSort sortProps={sortProps} />
         ) : null;
 
-    const maybeSortContainer = <SortedByContainer
-        shouldDisplay={filtersAndTotalPagesPresent}
+    const maybeSortContainer = filtersAndTotalPagesPresent ? <SortedByContainer
         currentSort={currentSort}
-    />;
+    /> : null;
 
     const categoryDescriptionElement = categoryDescription ? (
         <RichContent html={categoryDescription} />
diff --git a/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilter.js b/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilter.js
index c6bf599921..ec4f72b9d9 100644
--- a/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilter.js
+++ b/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilter.js
@@ -20,7 +20,7 @@ const CurrentFilter = props => {
     const ariaLabel = formatMessage(
         {
             id: 'filterModal.action.clearFilterItem.ariaLabel',
-            defaultMessage: 'Clear filter "{name}"'
+            defaultMessage: 'Clear filter'
         },
         {
             name: item.title
diff --git a/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js b/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js
index db0594bcaa..4bd0668361 100644
--- a/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js
+++ b/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js
@@ -16,7 +16,7 @@ const FilterDefault = props => {
         ? formatMessage(
               {
                   id: 'filterModal.item.applyFilter',
-                  defaultMessage: 'Apply filter "{optionName}".'
+                  defaultMessage: 'Apply filter'
               },
               {
                   optionName: label
@@ -25,7 +25,7 @@ const FilterDefault = props => {
         : formatMessage(
               {
                   id: 'filterModal.item.clearFilter',
-                  defaultMessage: 'Remove filter "{optionName}".'
+                  defaultMessage: 'Remove filter'
               },
               {
                   optionName: label
diff --git a/packages/venia-ui/lib/components/FilterModal/filterBlock.js b/packages/venia-ui/lib/components/FilterModal/filterBlock.js
index a859d7f827..cc701820ce 100644
--- a/packages/venia-ui/lib/components/FilterModal/filterBlock.js
+++ b/packages/venia-ui/lib/components/FilterModal/filterBlock.js
@@ -25,7 +25,7 @@ const FilterBlock = props => {
     const itemAriaLabel = formatMessage(
         {
             id: 'filterModal.item.ariaLabel',
-            defaultMessage: 'Filter products by "{itemName}".'
+            defaultMessage: 'Filter products by'
         },
         {
             itemName: name
@@ -36,7 +36,7 @@ const FilterBlock = props => {
         ? formatMessage(
               {
                   id: 'filterModal.item.hideOptions',
-                  defaultMessage: 'Hide "{itemName}" filter item options.'
+                  defaultMessage: 'Hide filter item options.'
               },
               {
                   itemName: name
@@ -45,7 +45,7 @@ const FilterBlock = props => {
         : formatMessage(
               {
                   id: 'filterModal.item.showOptions',
-                  defaultMessage: 'Show "{itemName}" filter item options.'
+                  defaultMessage: 'Show filter item options.'
               },
               {
                   itemName: name
diff --git a/packages/venia-ui/lib/components/SearchPage/searchPage.js b/packages/venia-ui/lib/components/SearchPage/searchPage.js
index 32b74bc988..6db27d1895 100644
--- a/packages/venia-ui/lib/components/SearchPage/searchPage.js
+++ b/packages/venia-ui/lib/components/SearchPage/searchPage.js
@@ -34,19 +34,12 @@ const SearchPage = props => {
         sortProps
     } = talonProps;
 
-    const {
-        products: {
-            items: productItems,
-            total_count: productsCount
-        }
-    } = data;
-
     const { formatMessage } = useIntl();
     const [currentSort] = sortProps;
     const content = useMemo(() => {
-        if (loading) return fullPageLoadingIndicator;
+        if (!data && loading) return fullPageLoadingIndicator;
 
-        if (error) {
+        if (!data && error) {
             return (
                 <div className={classes.noResult}>
                     <FormattedMessage
@@ -59,7 +52,7 @@ const SearchPage = props => {
             );
         }
 
-        if (productItems.length === 0) {
+        if (data.products.items.length === 0) {
             return (
                 <div className={classes.noResult}>
                     <FormattedMessage
@@ -72,7 +65,7 @@ const SearchPage = props => {
             return (
                 <Fragment>
                     <section className={classes.gallery}>
-                        <Gallery items={productItems} />
+                        <Gallery items={data.products.items} />
                     </section>
                     <section className={classes.pagination}>
                         <Pagination pageControl={pageControl} />
@@ -86,8 +79,8 @@ const SearchPage = props => {
         classes.pagination,
         error,
         loading,
-        pageControl,
-        productItems
+        data,
+        pageControl
     ]);
 
     const maybeFilterButtons =
@@ -98,14 +91,13 @@ const SearchPage = props => {
     const maybeFilterModal =
         filters && filters.length ? <FilterModal filters={filters} /> : null;
 
-    const maybeSortButton = productsCount ? (
+    const maybeSortButton = data.products.total_count ? (
         <ProductSort sortProps={sortProps} />
     ) : null;
 
-    const maybeSortContainer = <SortedByContainer
-        shouldDisplay={!!productsCount}
+    const maybeSortContainer = data.products.total_count ? <SortedByContainer
         currentSort={currentSort}
-    />;
+    /> : null;
 
     const searchResultsHeading = searchTerm ? (
         <FormattedMessage
@@ -135,7 +127,7 @@ const SearchPage = props => {
                             id: 'searchPage.totalPages',
                             defaultMessage: `items`
                         },
-                        { totalCount: productsCount }
+                        { totalCount: data.products.total_count }
                     )}
                 </span>
                 <div className={classes.headerButtons}>
diff --git a/packages/venia-ui/lib/components/SortedByContainer/sortedByContainer.js b/packages/venia-ui/lib/components/SortedByContainer/sortedByContainer.js
index d9b5a54874..b180d32476 100644
--- a/packages/venia-ui/lib/components/SortedByContainer/sortedByContainer.js
+++ b/packages/venia-ui/lib/components/SortedByContainer/sortedByContainer.js
@@ -6,14 +6,9 @@ import defaultClasses from "./sortedByContainer.css";
 
 const SortedByContainer = props  => {
     const {
-        shouldDisplay,
         currentSort
     } = props;
 
-    if (!shouldDisplay) {
-        return null;
-    }
-
     const classes = mergeClasses(defaultClasses, props.classes);
 
     return (

From fb2a156f6bce68b3f18be7b2e2e09788f7bd6ec5 Mon Sep 17 00:00:00 2001
From: Vasilii Burlacu <v.burlacu@atwix.com>
Date: Fri, 23 Apr 2021 20:38:27 +0300
Subject: [PATCH 16/39] Codestyle fixes after lint and prettier

---
 .../lib/talons/FilterModal/useFilterModal.js  | 15 +++-----
 .../Category/useCategoryContent.js            |  4 +--
 .../Category/categoryContent.js               | 35 ++++++++++---------
 .../filterModalOpenButton.js                  | 27 ++++++--------
 .../lib/components/SearchPage/searchPage.js   | 14 ++++----
 .../SortedByContainer/sortedByContainer.js    | 20 +++++------
 6 files changed, 52 insertions(+), 63 deletions(-)

diff --git a/packages/peregrine/lib/talons/FilterModal/useFilterModal.js b/packages/peregrine/lib/talons/FilterModal/useFilterModal.js
index 194b1ae90f..409b242f6c 100644
--- a/packages/peregrine/lib/talons/FilterModal/useFilterModal.js
+++ b/packages/peregrine/lib/talons/FilterModal/useFilterModal.js
@@ -161,8 +161,10 @@ export const useFilterModal = props => {
     );
 
     useEffect(() => {
-        const justOpened = prevDrawer.current === null && drawer === DRAWER_NAME;
-        const justClosed = prevDrawer.current === DRAWER_NAME && drawer === null;
+        const justOpened =
+            prevDrawer.current === null && drawer === DRAWER_NAME;
+        const justClosed =
+            prevDrawer.current === DRAWER_NAME && drawer === null;
 
         // on drawer toggle, read filter state from location
         if (justOpened || justClosed) {
@@ -181,14 +183,7 @@ export const useFilterModal = props => {
         }
 
         prevDrawer.current = drawer;
-    }, [
-        drawer,
-        filterApi,
-        filterItems,
-        filterKeys,
-        search,
-        handleClose
-    ]);
+    }, [drawer, filterApi, filterItems, filterKeys, search, handleClose]);
 
     return {
         filterApi,
diff --git a/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js b/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js
index a518bc2934..62562a4fe8 100644
--- a/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js
+++ b/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js
@@ -1,11 +1,9 @@
-import { useCallback, useEffect, useState, useRef } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useLazyQuery, useQuery } from '@apollo/client';
 
 import mergeOperations from '../../../util/shallowMerge';
-import { useAppContext } from '../../../context/app';
 
 import DEFAULT_OPERATIONS from './categoryContent.gql';
-import { useFilterState } from '../../FilterModal';
 
 /**
  * Returns props necessary to render the categoryContent component.
diff --git a/packages/venia-ui/lib/RootComponents/Category/categoryContent.js b/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
index 9ac1029c80..fa4c4fe356 100644
--- a/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
+++ b/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
@@ -12,8 +12,8 @@ import RichContent from '../../components/RichContent';
 import defaultClasses from './category.css';
 import NoProductsFound from './NoProductsFound';
 import { fullPageLoadingIndicator } from '../../components/LoadingIndicator';
-import SortedByContainer from "../../components/SortedByContainer";
-import FilterModalOpenButton from "../../components/FilterModalOpenButton";
+import SortedByContainer from '../../components/SortedByContainer';
+import FilterModalOpenButton from '../../components/FilterModalOpenButton';
 
 const FilterModal = React.lazy(() => import('../../components/FilterModal'));
 
@@ -44,24 +44,27 @@ const CategoryContent = props => {
 
     const classes = mergeClasses(defaultClasses, props.classes);
 
-    const maybeFilterButtons = filters && filters.length ? (
-        <FilterModalOpenButton filters={filters} />
-    ) : null;
+    const maybeFilterButtons =
+        filters && filters.length ? (
+            <FilterModalOpenButton filters={filters} />
+        ) : null;
 
-    const filtersModal = filters && filters.length ? (
-        <FilterModal filters={filters} />
-    ) : null;
+    const filtersModal =
+        filters && filters.length ? <FilterModal filters={filters} /> : null;
 
-    const filtersAndTotalPagesPresent = !!(totalPagesFromData && filters && filters.length);
+    const filtersAndTotalPagesPresent = !!(
+        totalPagesFromData &&
+        filters &&
+        filters.length
+    );
 
-    const maybeSortButton =
-        filtersAndTotalPagesPresent ? (
-            <ProductSort sortProps={sortProps} />
-        ) : null;
+    const maybeSortButton = filtersAndTotalPagesPresent ? (
+        <ProductSort sortProps={sortProps} />
+    ) : null;
 
-    const maybeSortContainer = filtersAndTotalPagesPresent ? <SortedByContainer
-        currentSort={currentSort}
-    /> : null;
+    const maybeSortContainer = filtersAndTotalPagesPresent ? (
+        <SortedByContainer currentSort={currentSort} />
+    ) : null;
 
     const categoryDescriptionElement = categoryDescription ? (
         <RichContent html={categoryDescription} />
diff --git a/packages/venia-ui/lib/components/FilterModalOpenButton/filterModalOpenButton.js b/packages/venia-ui/lib/components/FilterModalOpenButton/filterModalOpenButton.js
index e8da11234e..3f7bf9f1e7 100644
--- a/packages/venia-ui/lib/components/FilterModalOpenButton/filterModalOpenButton.js
+++ b/packages/venia-ui/lib/components/FilterModalOpenButton/filterModalOpenButton.js
@@ -1,20 +1,15 @@
-import React from "react";
-import { func, shape, string } from "prop-types";
-import { FormattedMessage } from "react-intl";
-import Button from "../Button";
-import { mergeClasses } from "../../classify";
-import defaultClasses from "./filterModalOpenButton.css";
-import { useFilterModal } from "@magento/peregrine/lib/talons/FilterModal";
+import React from 'react';
+import { func, shape, string } from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import Button from '../Button';
+import { mergeClasses } from '../../classify';
+import defaultClasses from './filterModalOpenButton.css';
+import { useFilterModal } from '@magento/peregrine/lib/talons/FilterModal';
 
 const FilterModalOpenButton = props => {
-    const {
-        filters,
-        classes: propsClasses
-    } = props;
+    const { filters, classes: propsClasses } = props;
     const classes = mergeClasses(defaultClasses, propsClasses);
-    const {
-        handleOpen,
-    } = useFilterModal({ filters });
+    const { handleOpen } = useFilterModal({ filters });
 
     return (
         <Button
@@ -33,7 +28,7 @@ const FilterModalOpenButton = props => {
             />
         </Button>
     );
-}
+};
 
 export default FilterModalOpenButton;
 
@@ -43,4 +38,4 @@ FilterModalOpenButton.propTypes = {
     classes: shape({
         filterButton: string
     })
-}
+};
diff --git a/packages/venia-ui/lib/components/SearchPage/searchPage.js b/packages/venia-ui/lib/components/SearchPage/searchPage.js
index 6db27d1895..7cff010ffb 100644
--- a/packages/venia-ui/lib/components/SearchPage/searchPage.js
+++ b/packages/venia-ui/lib/components/SearchPage/searchPage.js
@@ -10,8 +10,8 @@ import Gallery from '../Gallery';
 import { fullPageLoadingIndicator } from '../LoadingIndicator';
 import ProductSort from '../ProductSort';
 import defaultClasses from './searchPage.css';
-import SortedByContainer from "../SortedByContainer";
-import FilterModalOpenButton from "../FilterModalOpenButton";
+import SortedByContainer from '../SortedByContainer';
+import FilterModalOpenButton from '../FilterModalOpenButton';
 
 const FilterModal = React.lazy(() => import('../FilterModal'));
 
@@ -84,9 +84,9 @@ const SearchPage = props => {
     ]);
 
     const maybeFilterButtons =
-        filters && filters.length ?
+        filters && filters.length ? (
             <FilterModalOpenButton filters={filters} />
-        : null;
+        ) : null;
 
     const maybeFilterModal =
         filters && filters.length ? <FilterModal filters={filters} /> : null;
@@ -95,9 +95,9 @@ const SearchPage = props => {
         <ProductSort sortProps={sortProps} />
     ) : null;
 
-    const maybeSortContainer = data.products.total_count ? <SortedByContainer
-        currentSort={currentSort}
-    /> : null;
+    const maybeSortContainer = data.products.total_count ? (
+        <SortedByContainer currentSort={currentSort} />
+    ) : null;
 
     const searchResultsHeading = searchTerm ? (
         <FormattedMessage
diff --git a/packages/venia-ui/lib/components/SortedByContainer/sortedByContainer.js b/packages/venia-ui/lib/components/SortedByContainer/sortedByContainer.js
index b180d32476..d073cbacd2 100644
--- a/packages/venia-ui/lib/components/SortedByContainer/sortedByContainer.js
+++ b/packages/venia-ui/lib/components/SortedByContainer/sortedByContainer.js
@@ -1,13 +1,11 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { FormattedMessage } from "react-intl";
-import { mergeClasses } from "../../classify";
-import defaultClasses from "./sortedByContainer.css";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { mergeClasses } from '../../classify';
+import defaultClasses from './sortedByContainer.css';
 
-const SortedByContainer = props  => {
-    const {
-        currentSort
-    } = props;
+const SortedByContainer = props => {
+    const { currentSort } = props;
 
     const classes = mergeClasses(defaultClasses, props.classes);
 
@@ -25,7 +23,7 @@ const SortedByContainer = props  => {
             </span>
         </span>
     );
-}
+};
 
 export default SortedByContainer;
 
@@ -35,4 +33,4 @@ SortedByContainer.propTypes = {
         sortId: PropTypes.string,
         sortText: PropTypes.string
     })
-}
+};

From f941c2ab80ea0583d389cc9ace41f2b900e84907 Mon Sep 17 00:00:00 2001
From: Vasilii Burlacu <v.burlacu@atwix.com>
Date: Fri, 23 Apr 2021 21:24:42 +0300
Subject: [PATCH 17/39] Do not unmount component when filter item is not
 expanded

---
 packages/venia-ui/lib/components/FilterModal/filterBlock.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/venia-ui/lib/components/FilterModal/filterBlock.js b/packages/venia-ui/lib/components/FilterModal/filterBlock.js
index cc701820ce..3ae8b6a24e 100644
--- a/packages/venia-ui/lib/components/FilterModal/filterBlock.js
+++ b/packages/venia-ui/lib/components/FilterModal/filterBlock.js
@@ -52,7 +52,7 @@ const FilterBlock = props => {
               }
           );
 
-    const filterItemOptions = isExpanded && (
+    const filterItemOptions = (
         <Form className={listClass}>
             <FilterList
                 filterApi={filterApi}

From 5ffe970c05a1b6e0b54b33e03d219a28db46c653 Mon Sep 17 00:00:00 2001
From: Vasilii Burlacu <v.burlacu@atwix.com>
Date: Fri, 23 Apr 2021 21:37:17 +0300
Subject: [PATCH 18/39] Cover case when data can be falsy

---
 packages/venia-ui/lib/components/SearchPage/searchPage.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/venia-ui/lib/components/SearchPage/searchPage.js b/packages/venia-ui/lib/components/SearchPage/searchPage.js
index 7cff010ffb..e76d36903f 100644
--- a/packages/venia-ui/lib/components/SearchPage/searchPage.js
+++ b/packages/venia-ui/lib/components/SearchPage/searchPage.js
@@ -52,6 +52,10 @@ const SearchPage = props => {
             );
         }
 
+        if (!data) {
+            return null;
+        }
+
         if (data.products.items.length === 0) {
             return (
                 <div className={classes.noResult}>

From bb0616bff372537f160275bcc26b27c0b6f02189 Mon Sep 17 00:00:00 2001
From: Vasilii Burlacu <v.burlacu@atwix.com>
Date: Fri, 23 Apr 2021 21:45:02 +0300
Subject: [PATCH 19/39] order translations alphabetically

---
 packages/venia-ui/i18n/en_US.json | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/venia-ui/i18n/en_US.json b/packages/venia-ui/i18n/en_US.json
index fd1e563028..6a28e5b7a2 100644
--- a/packages/venia-ui/i18n/en_US.json
+++ b/packages/venia-ui/i18n/en_US.json
@@ -141,7 +141,17 @@
     "field.optional": "Optional",
     "filterFooter.results": "See Results",
     "filterModal.action": "Clear all",
+    "filterModal.action.clearAll.ariaLabel": "Clear all applied filters",
+    "filterModal.action.clearFilterItem.ariaLabel": "Clear filter \"{name}\"",
+    "filterModal.currentFilters.ariaLabel": "Current Filters",
+    "filterModal.filters.ariaLabel": "Filters",
+    "filterModal.filters.close.ariaLabel": "Close filters popup.",
     "filterModal.headerTitle": "Filters",
+    "filterModal.item.applyFilter": "Apply filter \"{optionName}\".",
+    "filterModal.item.ariaLabel": "Filter products by \"{itemName}\"",
+    "filterModal.item.clearFilter": "Remove filter \"{optionName}\".",
+    "filterModal.item.hideOptions": "Hide \"{itemName}\" filter item options.",
+    "filterModal.item.showOptions": "Show \"{itemName}\" filter item options.",
     "filterSearch.name": "Enter a {name}",
     "footer.calloutText": "Lorem ipsum dolor sit amet, consectetur adipsicing elit, sed do eiusmod tempor incididunt ut labore et dolore.",
     "footer.followText": "Follow Us!",
@@ -398,15 +408,5 @@
     "wishlistPage.disabledMessage": "Sorry, this feature has been disabled.",
     "wishlistPage.fetchErrorMessage": "Something went wrong. Please refresh and try again.",
     "wishlistPage.headingText": "Favorites Lists",
-    "wishlistPage.wishlistDisabledMessage": "The wishlist is not currently available.",
-    "filterModal.action.clearFilterItem.ariaLabel": "Clear filter \"{name}\"",
-    "filterModal.currentFilters.ariaLabel": "Current Filters",
-    "filterModal.item.applyFilter": "Apply filter \"{optionName}\".",
-    "filterModal.item.clearFilter": "Remove filter \"{optionName}\".",
-    "filterModal.item.ariaLabel": "Filter products by \"{itemName}\"",
-    "filterModal.item.hideOptions": "Hide \"{itemName}\" filter item options.",
-    "filterModal.item.showOptions": "Show \"{itemName}\" filter item options.",
-    "filterModal.filters.ariaLabel": "Filters",
-    "filterModal.filters.close.ariaLabel": "Close filters popup.",
-    "filterModal.action.clearAll.ariaLabel": "Clear all applied filters"
+    "wishlistPage.wishlistDisabledMessage": "The wishlist is not currently available."
 }

From e6138e58d03c2cb839a6fc71f9dfe71667166586 Mon Sep 17 00:00:00 2001
From: Vasilii Burlacu <v.burlacu@atwix.com>
Date: Mon, 26 Apr 2021 19:19:02 +0300
Subject: [PATCH 20/39] Added review adjustments and codestyle fixes

---
 .../Category/useCategoryContent.js            | 11 +---------
 packages/venia-ui/i18n/en_US.json             |  1 +
 .../lib/components/FilterModal/filterBlock.js | 20 ++++++++-----------
 .../lib/components/FilterModal/filterModal.js |  3 ---
 .../filterModalOpenButton.js                  |  2 --
 .../lib/components/SearchPage/searchPage.js   |  7 +------
 6 files changed, 11 insertions(+), 33 deletions(-)

diff --git a/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js b/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js
index 62562a4fe8..4933823c13 100644
--- a/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js
+++ b/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useLazyQuery, useQuery } from '@apollo/client';
 
 import mergeOperations from '../../../util/shallowMerge';
@@ -14,8 +14,6 @@ import DEFAULT_OPERATIONS from './categoryContent.gql';
  * @returns {number} result.categoryId - This category's ID.
  * @returns {string} result.categoryName - This category's name.
  * @returns {object} result.filters - The filters object.
- * @returns {func}   result.handleLoadFilters - A callback function to signal the user's intent to interact with the filters.
- * @returns {func}   result.handleOpenFilters - A callback function that actually opens the filter drawer.
  * @returns {object} result.items - The items in this category.
  * @returns {bool}   result.loadFilters - Whether or not the user has signalled their intent to interact with the filters.
  */
@@ -30,11 +28,6 @@ export const useCategoryContent = props => {
     } = operations;
 
     const placeholderItems = Array.from({ length: pageSize }).fill(null);
-    const [loadFilters, setLoadFilters] = useState(false);
-
-    const handleLoadFilters = useCallback(() => {
-        setLoadFilters(true);
-    }, [setLoadFilters]);
 
     const [getFilters, { data: filterData }] = useLazyQuery(
         getProductFiltersByCategoryQuery,
@@ -79,9 +72,7 @@ export const useCategoryContent = props => {
         categoryName,
         categoryDescription,
         filters,
-        handleLoadFilters,
         items,
-        loadFilters,
         totalPagesFromData
     };
 };
diff --git a/packages/venia-ui/i18n/en_US.json b/packages/venia-ui/i18n/en_US.json
index 6a28e5b7a2..649137d38e 100644
--- a/packages/venia-ui/i18n/en_US.json
+++ b/packages/venia-ui/i18n/en_US.json
@@ -310,6 +310,7 @@
     "productFullDetail.productDescription": "Product Description",
     "productFullDetail.unavailableProduct": "This product is currently unavailable for purchase.",
     "productList.each": " ea.",
+    "productList.filter": "Filter",
     "productList.outOfStock": "Out-of-stock",
     "productList.quantity": "Qty : {quantity}",
     "productListing.loading": "Fetching Cart...",
diff --git a/packages/venia-ui/lib/components/FilterModal/filterBlock.js b/packages/venia-ui/lib/components/FilterModal/filterBlock.js
index 3ae8b6a24e..67446d6d6e 100644
--- a/packages/venia-ui/lib/components/FilterModal/filterBlock.js
+++ b/packages/venia-ui/lib/components/FilterModal/filterBlock.js
@@ -52,17 +52,6 @@ const FilterBlock = props => {
               }
           );
 
-    const filterItemOptions = (
-        <Form className={listClass}>
-            <FilterList
-                filterApi={filterApi}
-                filterState={filterState}
-                group={group}
-                items={items}
-            />
-        </Form>
-    );
-
     return (
         <li className={classes.root} aria-label={itemAriaLabel}>
             <button
@@ -77,7 +66,14 @@ const FilterBlock = props => {
                     <Icon src={iconSrc} />
                 </span>
             </button>
-            {filterItemOptions}
+            <Form className={listClass}>
+                <FilterList
+                    filterApi={filterApi}
+                    filterState={filterState}
+                    group={group}
+                    items={items}
+                />
+            </Form>
         </li>
     );
 };
diff --git a/packages/venia-ui/lib/components/FilterModal/filterModal.js b/packages/venia-ui/lib/components/FilterModal/filterModal.js
index fa5eb955b5..7547bdbae0 100644
--- a/packages/venia-ui/lib/components/FilterModal/filterModal.js
+++ b/packages/venia-ui/lib/components/FilterModal/filterModal.js
@@ -88,9 +88,6 @@ const FilterModal = props => {
         </div>
     ) : null;
 
-    // If you want to defer the loading of the FilterModal until user interaction
-    // (hover, focus, click), simply add the talon's `loadFilters` prop as
-    // part of the conditional here.
     if (!isOpen) {
         return null;
     }
diff --git a/packages/venia-ui/lib/components/FilterModalOpenButton/filterModalOpenButton.js b/packages/venia-ui/lib/components/FilterModalOpenButton/filterModalOpenButton.js
index 3f7bf9f1e7..72fe793b09 100644
--- a/packages/venia-ui/lib/components/FilterModalOpenButton/filterModalOpenButton.js
+++ b/packages/venia-ui/lib/components/FilterModalOpenButton/filterModalOpenButton.js
@@ -18,8 +18,6 @@ const FilterModalOpenButton = props => {
                 root_lowPriority: classes.filterButton
             }}
             onClick={handleOpen}
-            // onFocus={onFocusAction}
-            // onMouseOver={onMouseOverAction}
             type="button"
         >
             <FormattedMessage
diff --git a/packages/venia-ui/lib/components/SearchPage/searchPage.js b/packages/venia-ui/lib/components/SearchPage/searchPage.js
index e76d36903f..5441566bce 100644
--- a/packages/venia-ui/lib/components/SearchPage/searchPage.js
+++ b/packages/venia-ui/lib/components/SearchPage/searchPage.js
@@ -19,12 +19,7 @@ const SearchPage = props => {
     const classes = mergeClasses(defaultClasses, props.classes);
     const talonProps = useSearchPage();
     const {
-        data = {
-            products: {
-                items: [],
-                total_count: 0
-            }
-        },
+        data,
         error,
         filters,
         loading,

From 33ce8d5a282dfe67788f93791d9d58af92374351 Mon Sep 17 00:00:00 2001
From: Vasilii Burlacu <v.burlacu@atwix.com>
Date: Mon, 26 Apr 2021 19:25:25 +0300
Subject: [PATCH 21/39] Update prop types

---
 .../FilterModalOpenButton/filterModalOpenButton.js           | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/venia-ui/lib/components/FilterModalOpenButton/filterModalOpenButton.js b/packages/venia-ui/lib/components/FilterModalOpenButton/filterModalOpenButton.js
index 72fe793b09..b231b56ed0 100644
--- a/packages/venia-ui/lib/components/FilterModalOpenButton/filterModalOpenButton.js
+++ b/packages/venia-ui/lib/components/FilterModalOpenButton/filterModalOpenButton.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { func, shape, string } from 'prop-types';
+import { shape, string, array } from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import Button from '../Button';
 import { mergeClasses } from '../../classify';
@@ -31,8 +31,7 @@ const FilterModalOpenButton = props => {
 export default FilterModalOpenButton;
 
 FilterModalOpenButton.propTypes = {
-    handleOpenFilters: func,
-    handleLoadFilters: func,
+    filters: array,
     classes: shape({
         filterButton: string
     })

From 26a6ff684b7dccf0d8b32f2e42ce65a0a4156f47 Mon Sep 17 00:00:00 2001
From: Vasilii Burlacu <v.burlacu@atwix.com>
Date: Mon, 26 Apr 2021 19:29:54 +0300
Subject: [PATCH 22/39] Fix issues on the search page

---
 packages/venia-ui/lib/components/SearchPage/searchPage.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/venia-ui/lib/components/SearchPage/searchPage.js b/packages/venia-ui/lib/components/SearchPage/searchPage.js
index 5441566bce..1ec47e205c 100644
--- a/packages/venia-ui/lib/components/SearchPage/searchPage.js
+++ b/packages/venia-ui/lib/components/SearchPage/searchPage.js
@@ -90,11 +90,11 @@ const SearchPage = props => {
     const maybeFilterModal =
         filters && filters.length ? <FilterModal filters={filters} /> : null;
 
-    const maybeSortButton = data.products.total_count ? (
+    const maybeSortButton = data && data.products.total_count ? (
         <ProductSort sortProps={sortProps} />
     ) : null;
 
-    const maybeSortContainer = data.products.total_count ? (
+    const maybeSortContainer = data && data.products.total_count ? (
         <SortedByContainer currentSort={currentSort} />
     ) : null;
 
@@ -126,7 +126,7 @@ const SearchPage = props => {
                             id: 'searchPage.totalPages',
                             defaultMessage: `items`
                         },
-                        { totalCount: data.products.total_count }
+                        { totalCount: !data ? 0 : data.products.total_count }
                     )}
                 </span>
                 <div className={classes.headerButtons}>

From 9339835c03e8e4d14dd97970b1715f7d8047d7f2 Mon Sep 17 00:00:00 2001
From: Vasilii Burlacu <v.burlacu@atwix.com>
Date: Thu, 29 Apr 2021 21:26:11 +0300
Subject: [PATCH 23/39] Fix focus order issue

Focus don't go to next filter item when filter item options rendered but hidden by css.
---
 .../lib/components/FilterModal/FilterList/filterDefault.js     | 3 ++-
 .../lib/components/FilterModal/FilterList/filterItem.js        | 3 ++-
 .../lib/components/FilterModal/FilterList/filterList.js        | 3 ++-
 packages/venia-ui/lib/components/FilterModal/filterBlock.js    | 1 +
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js b/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js
index 4bd0668361..00b3c6ef0b 100644
--- a/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js
+++ b/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js
@@ -7,7 +7,7 @@ import { mergeClasses } from '../../../classify';
 import defaultClasses from './filterDefault.css';
 
 const FilterDefault = props => {
-    const { classes: propsClasses, isSelected, item, ...restProps } = props;
+    const { classes: propsClasses, isSelected, item, isExpanded, ...restProps } = props;
     const { label, value_index } = item || {};
     const { formatMessage } = useIntl();
     const classes = mergeClasses(defaultClasses, propsClasses);
@@ -39,6 +39,7 @@ const FilterDefault = props => {
             fieldState={{
                 value: isSelected
             }}
+            disabled={!isExpanded}
             label={label}
             ariaLabel={ariaLabel}
             {...restProps}
diff --git a/packages/venia-ui/lib/components/FilterModal/FilterList/filterItem.js b/packages/venia-ui/lib/components/FilterModal/FilterList/filterItem.js
index da5a5efab9..13090ca354 100644
--- a/packages/venia-ui/lib/components/FilterModal/FilterList/filterItem.js
+++ b/packages/venia-ui/lib/components/FilterModal/FilterList/filterItem.js
@@ -5,7 +5,7 @@ import setValidator from '@magento/peregrine/lib/validators/set';
 import FilterDefault from './filterDefault';
 
 const FilterItem = props => {
-    const { filterApi, filterState, group, item } = props;
+    const { filterApi, filterState, group, item, isExpanded } = props;
     const { toggleItem } = filterApi;
     const { title, value } = item;
     const isSelected = filterState && filterState.has(item);
@@ -26,6 +26,7 @@ const FilterItem = props => {
     return (
         <FilterDefault
             isSelected={isSelected}
+            isExpanded={isExpanded}
             item={tileItem}
             onClick={handleClick}
             title={title}
diff --git a/packages/venia-ui/lib/components/FilterModal/FilterList/filterList.js b/packages/venia-ui/lib/components/FilterModal/FilterList/filterList.js
index cab655d5e2..597c8fd863 100644
--- a/packages/venia-ui/lib/components/FilterModal/FilterList/filterList.js
+++ b/packages/venia-ui/lib/components/FilterModal/FilterList/filterList.js
@@ -9,7 +9,7 @@ import defaultClasses from './filterList.css';
 const labels = new WeakMap();
 
 const FilterList = props => {
-    const { filterApi, filterState, group, items } = props;
+    const { filterApi, filterState, group, items, isExpanded } = props;
     const classes = mergeClasses(defaultClasses, props.classes);
 
     // memoize item creation
@@ -28,6 +28,7 @@ const FilterList = props => {
                             filterState={filterState}
                             group={group}
                             item={item}
+                            isExpanded={isExpanded}
                         />
                     </li>
                 );
diff --git a/packages/venia-ui/lib/components/FilterModal/filterBlock.js b/packages/venia-ui/lib/components/FilterModal/filterBlock.js
index 67446d6d6e..377320bab3 100644
--- a/packages/venia-ui/lib/components/FilterModal/filterBlock.js
+++ b/packages/venia-ui/lib/components/FilterModal/filterBlock.js
@@ -72,6 +72,7 @@ const FilterBlock = props => {
                     filterState={filterState}
                     group={group}
                     items={items}
+                    isExpanded={isExpanded}
                 />
             </Form>
         </li>

From dadb3f437c44eed65500dfa4945eccab42536328 Mon Sep 17 00:00:00 2001
From: Vasilii Burlacu <v.burlacu@atwix.com>
Date: Thu, 29 Apr 2021 22:11:13 +0300
Subject: [PATCH 24/39] codestyle fixes

---
 .../FilterModal/FilterList/filterDefault.js        |  8 +++++++-
 .../FilterModal/FilterList/filterList.js           |  2 +-
 .../lib/components/SearchPage/searchPage.js        | 14 ++++++++------
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js b/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js
index 00b3c6ef0b..49cac04c4f 100644
--- a/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js
+++ b/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js
@@ -7,7 +7,13 @@ import { mergeClasses } from '../../../classify';
 import defaultClasses from './filterDefault.css';
 
 const FilterDefault = props => {
-    const { classes: propsClasses, isSelected, item, isExpanded, ...restProps } = props;
+    const {
+        classes: propsClasses,
+        isSelected,
+        item,
+        isExpanded,
+        ...restProps
+    } = props;
     const { label, value_index } = item || {};
     const { formatMessage } = useIntl();
     const classes = mergeClasses(defaultClasses, propsClasses);
diff --git a/packages/venia-ui/lib/components/FilterModal/FilterList/filterList.js b/packages/venia-ui/lib/components/FilterModal/FilterList/filterList.js
index 597c8fd863..728aa4308b 100644
--- a/packages/venia-ui/lib/components/FilterModal/FilterList/filterList.js
+++ b/packages/venia-ui/lib/components/FilterModal/FilterList/filterList.js
@@ -39,7 +39,7 @@ const FilterList = props => {
 
                 return element;
             }),
-        [classes, filterApi, filterState, group, items]
+        [classes, filterApi, filterState, group, items, isExpanded]
     );
 
     return (
diff --git a/packages/venia-ui/lib/components/SearchPage/searchPage.js b/packages/venia-ui/lib/components/SearchPage/searchPage.js
index 1ec47e205c..64965a23b1 100644
--- a/packages/venia-ui/lib/components/SearchPage/searchPage.js
+++ b/packages/venia-ui/lib/components/SearchPage/searchPage.js
@@ -90,13 +90,15 @@ const SearchPage = props => {
     const maybeFilterModal =
         filters && filters.length ? <FilterModal filters={filters} /> : null;
 
-    const maybeSortButton = data && data.products.total_count ? (
-        <ProductSort sortProps={sortProps} />
-    ) : null;
+    const maybeSortButton =
+        data && data.products.total_count ? (
+            <ProductSort sortProps={sortProps} />
+        ) : null;
 
-    const maybeSortContainer = data && data.products.total_count ? (
-        <SortedByContainer currentSort={currentSort} />
-    ) : null;
+    const maybeSortContainer =
+        data && data.products.total_count ? (
+            <SortedByContainer currentSort={currentSort} />
+        ) : null;
 
     const searchResultsHeading = searchTerm ? (
         <FormattedMessage

From c48a1bbb80f3c73c228cb48073f3a2042a41969f Mon Sep 17 00:00:00 2001
From: Vasilii Burlacu <v.burlacu@atwix.com>
Date: Fri, 30 Apr 2021 08:46:50 +0300
Subject: [PATCH 25/39] Fixing failed tests for the Search Page after recent
 adjustments/refactor

---
 .../__snapshots__/searchPage.spec.js.snap     | 316 +++++++++---------
 .../SearchPage/__tests__/searchPage.spec.js   |   2 +
 .../lib/components/SearchPage/searchPage.js   |   6 +-
 3 files changed, 167 insertions(+), 157 deletions(-)

diff --git a/packages/venia-ui/lib/components/SearchPage/__tests__/__snapshots__/searchPage.spec.js.snap b/packages/venia-ui/lib/components/SearchPage/__tests__/__snapshots__/searchPage.spec.js.snap
index d70f7ac46f..becaf11954 100644
--- a/packages/venia-ui/lib/components/SearchPage/__tests__/__snapshots__/searchPage.spec.js.snap
+++ b/packages/venia-ui/lib/components/SearchPage/__tests__/__snapshots__/searchPage.spec.js.snap
@@ -52,14 +52,33 @@ exports[`Search Page Component error view does not render when data is present 1
 `;
 
 exports[`Search Page Component error view renders when data is not present and not loading 1`] = `
-<div
-  className="noResult"
+<article
+  className="root"
 >
-  <mock-FormattedMessage
-    defaultMessage="No results found. The search term may be missing or invalid."
-    id="searchPage.noResult"
+  <div
+    className="categoryTop"
+  >
+    <span
+      className="totalPages"
+    >
+      0 items
+    </span>
+    <div
+      className="headerButtons"
+    />
+  </div>
+  <div
+    className="heading"
   />
-</div>
+  <div
+    className="noResult"
+  >
+    <mock-FormattedMessage
+      defaultMessage="No results found. The search term may be missing or invalid."
+      id="searchPage.noResult"
+    />
+  </div>
+</article>
 `;
 
 exports[`Search Page Component filter button/modal does not render if there are no filters 1`] = `
@@ -128,21 +147,13 @@ exports[`Search Page Component filter button/modal renders when there are filter
     <div
       className="headerButtons"
     >
-      <button
-        className="root_lowPriority"
-        disabled={false}
-        onClick={[MockFunction]}
-        type="button"
-      >
-        <span
-          className="content"
-        >
-          <mock-FormattedMessage
-            defaultMessage="Filter"
-            id="searchPage.filterButton"
-          />
-        </span>
-      </button>
+      <FilterModalOpenButton
+        filters={
+          Array [
+            Object {},
+          ]
+        }
+      />
     </div>
   </div>
   <div
@@ -239,83 +250,102 @@ exports[`Search Page Component loading indicator does not render when data is pr
 `;
 
 exports[`Search Page Component loading indicator renders when data is not present 1`] = `
-<div
-  className="global"
+<article
+  className="root"
 >
-  <span
-    className="root"
-  >
-    <svg
-      className="icon"
-      fill="none"
-      height={64}
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-      viewBox="0 0 24 24"
-      width={64}
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <line
-        x1="12"
-        x2="12"
-        y1="2"
-        y2="6"
-      />
-      <line
-        x1="12"
-        x2="12"
-        y1="18"
-        y2="22"
-      />
-      <line
-        x1="4.93"
-        x2="7.76"
-        y1="4.93"
-        y2="7.76"
-      />
-      <line
-        x1="16.24"
-        x2="19.07"
-        y1="16.24"
-        y2="19.07"
-      />
-      <line
-        x1="2"
-        x2="6"
-        y1="12"
-        y2="12"
-      />
-      <line
-        x1="18"
-        x2="22"
-        y1="12"
-        y2="12"
-      />
-      <line
-        x1="4.93"
-        x2="7.76"
-        y1="19.07"
-        y2="16.24"
-      />
-      <line
-        x1="16.24"
-        x2="19.07"
-        y1="7.76"
-        y2="4.93"
-      />
-    </svg>
-  </span>
-  <span
-    className="message"
+  <div
+    className="categoryTop"
   >
-    <mock-FormattedMessage
-      defaultMessage="Fetching Data..."
-      id="loadingIndicator.message"
+    <span
+      className="totalPages"
+    >
+      0 items
+    </span>
+    <div
+      className="headerButtons"
     />
-  </span>
-</div>
+  </div>
+  <div
+    className="heading"
+  />
+  <div
+    className="global"
+  >
+    <span
+      className="root"
+    >
+      <svg
+        className="icon"
+        fill="none"
+        height={64}
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        viewBox="0 0 24 24"
+        width={64}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <line
+          x1="12"
+          x2="12"
+          y1="2"
+          y2="6"
+        />
+        <line
+          x1="12"
+          x2="12"
+          y1="18"
+          y2="22"
+        />
+        <line
+          x1="4.93"
+          x2="7.76"
+          y1="4.93"
+          y2="7.76"
+        />
+        <line
+          x1="16.24"
+          x2="19.07"
+          y1="16.24"
+          y2="19.07"
+        />
+        <line
+          x1="2"
+          x2="6"
+          y1="12"
+          y2="12"
+        />
+        <line
+          x1="18"
+          x2="22"
+          y1="12"
+          y2="12"
+        />
+        <line
+          x1="4.93"
+          x2="7.76"
+          y1="19.07"
+          y2="16.24"
+        />
+        <line
+          x1="16.24"
+          x2="19.07"
+          y1="7.76"
+          y2="4.93"
+        />
+      </svg>
+    </span>
+    <span
+      className="message"
+    >
+      <mock-FormattedMessage
+        defaultMessage="Fetching Data..."
+        id="loadingIndicator.message"
+      />
+    </span>
+  </div>
+</article>
 `;
 
 exports[`Search Page Component search results does not render if data returned has empty array 1`] = `
@@ -381,21 +411,15 @@ exports[`Search Page Component search results heading renders a generic message
         }
       />
     </div>
-    <span
-      className="sortContainer"
-    >
-      <mock-FormattedMessage
-        defaultMessage="Items sorted by "
-        id="searchPage.sortContainer"
-      />
-      <span
-        className="sortText"
-      >
-        <mock-FormattedMessage
-          defaultMessage="Best Match"
-        />
-      </span>
-    </span>
+    <SortedByContainer
+      currentSort={
+        Object {
+          "sortAttribute": "relevance",
+          "sortDirection": "DESC",
+          "sortText": "Best Match",
+        }
+      }
+    />
   </div>
   <div
     className="heading"
@@ -460,21 +484,15 @@ exports[`Search Page Component search results heading renders a specific message
         }
       />
     </div>
-    <span
-      className="sortContainer"
-    >
-      <mock-FormattedMessage
-        defaultMessage="Items sorted by "
-        id="searchPage.sortContainer"
-      />
-      <span
-        className="sortText"
-      >
-        <mock-FormattedMessage
-          defaultMessage="Best Match"
-        />
-      </span>
-    </span>
+    <SortedByContainer
+      currentSort={
+        Object {
+          "sortAttribute": "relevance",
+          "sortDirection": "DESC",
+          "sortText": "Best Match",
+        }
+      }
+    />
   </div>
   <div
     className="heading"
@@ -632,21 +650,15 @@ exports[`Search Page Component sort button/container renders when total count >
         }
       />
     </div>
-    <span
-      className="sortContainer"
-    >
-      <mock-FormattedMessage
-        defaultMessage="Items sorted by "
-        id="searchPage.sortContainer"
-      />
-      <span
-        className="sortText"
-      >
-        <mock-FormattedMessage
-          defaultMessage="Best Match"
-        />
-      </span>
-    </span>
+    <SortedByContainer
+      currentSort={
+        Object {
+          "sortAttribute": "relevance",
+          "sortDirection": "DESC",
+          "sortText": "Best Match",
+        }
+      }
+    />
   </div>
   <div
     className="heading"
@@ -746,21 +758,15 @@ exports[`Search Page Component total count renders results from data 1`] = `
         }
       />
     </div>
-    <span
-      className="sortContainer"
-    >
-      <mock-FormattedMessage
-        defaultMessage="Items sorted by "
-        id="searchPage.sortContainer"
-      />
-      <span
-        className="sortText"
-      >
-        <mock-FormattedMessage
-          defaultMessage="Best Match"
-        />
-      </span>
-    </span>
+    <SortedByContainer
+      currentSort={
+        Object {
+          "sortAttribute": "relevance",
+          "sortDirection": "DESC",
+          "sortText": "Best Match",
+        }
+      }
+    />
   </div>
   <div
     className="heading"
diff --git a/packages/venia-ui/lib/components/SearchPage/__tests__/searchPage.spec.js b/packages/venia-ui/lib/components/SearchPage/__tests__/searchPage.spec.js
index b074b9e4cd..cb0dde0d92 100644
--- a/packages/venia-ui/lib/components/SearchPage/__tests__/searchPage.spec.js
+++ b/packages/venia-ui/lib/components/SearchPage/__tests__/searchPage.spec.js
@@ -12,6 +12,8 @@ jest.mock('../../FilterModal', () => 'FilterModal');
 jest.mock('../../ProductSort', () => 'ProductSort');
 jest.mock('../../../components/Pagination', () => 'Pagination');
 jest.mock('@magento/venia-ui/lib/classify');
+jest.mock('../../SortedByContainer', () => 'SortedByContainer');
+jest.mock('../../FilterModalOpenButton', () => 'FilterModalOpenButton');
 
 const talonProps = {
     data: {
diff --git a/packages/venia-ui/lib/components/SearchPage/searchPage.js b/packages/venia-ui/lib/components/SearchPage/searchPage.js
index 64965a23b1..37d2839b3a 100644
--- a/packages/venia-ui/lib/components/SearchPage/searchPage.js
+++ b/packages/venia-ui/lib/components/SearchPage/searchPage.js
@@ -82,6 +82,8 @@ const SearchPage = props => {
         pageControl
     ]);
 
+    const productsCount = data && data.products && data.products.total_count ? data.products.total_count : 0;
+
     const maybeFilterButtons =
         filters && filters.length ? (
             <FilterModalOpenButton filters={filters} />
@@ -100,7 +102,7 @@ const SearchPage = props => {
             <SortedByContainer currentSort={currentSort} />
         ) : null;
 
-    const searchResultsHeading = searchTerm ? (
+    const searchResultsHeading = !data ? null : searchTerm ? (
         <FormattedMessage
             id={'searchPage.searchTerm'}
             values={{
@@ -128,7 +130,7 @@ const SearchPage = props => {
                             id: 'searchPage.totalPages',
                             defaultMessage: `items`
                         },
-                        { totalCount: !data ? 0 : data.products.total_count }
+                        { totalCount: productsCount }
                     )}
                 </span>
                 <div className={classes.headerButtons}>

From 42b4d9fb3ac23a21c4b0fd381212669a2efbb970 Mon Sep 17 00:00:00 2001
From: Vasilii Burlacu <v.burlacu@atwix.com>
Date: Fri, 30 Apr 2021 21:12:14 +0300
Subject: [PATCH 26/39] fix tests for categoryContent

---
 .../__tests__/categoryContent.spec.js         | 34 +++++++++++++------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/packages/venia-ui/lib/RootComponents/Category/__tests__/categoryContent.spec.js b/packages/venia-ui/lib/RootComponents/Category/__tests__/categoryContent.spec.js
index 15d0fa30ea..9f2b2af8cb 100644
--- a/packages/venia-ui/lib/RootComponents/Category/__tests__/categoryContent.spec.js
+++ b/packages/venia-ui/lib/RootComponents/Category/__tests__/categoryContent.spec.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { createTestInstance } from '@magento/peregrine';
-
+import { useCategoryContent } from '@magento/peregrine/lib/talons/RootComponents/Category';
 import CategoryContent from '../categoryContent';
 
 jest.mock('@magento/peregrine/lib/context/app', () => {
@@ -17,9 +17,15 @@ jest.mock('../../../components/Head', () => ({
     StoreTitle: () => 'Title'
 }));
 
+jest.mock('@magento/peregrine/lib/talons/RootComponents/Category', () => ({
+    useCategoryContent: jest.fn()
+}));
+
 jest.mock('../../../components/Breadcrumbs', () => 'Breadcrumbs');
 jest.mock('../../../components/Gallery', () => 'Gallery');
 jest.mock('../../../components/Pagination', () => 'Pagination');
+jest.mock('../../../components/SortedByContainer', () => 'SortedByContainer');
+jest.mock('../../../components/FilterModalOpenButton', () => 'FilterModalOpenButton');
 jest.mock('../NoProductsFound', () => 'NoProductsFound');
 
 const classes = {
@@ -34,12 +40,18 @@ const sortProps = [
     jest.fn()
 ];
 
+const talonProps = {
+    categoryName: 'Name',
+    categoryDescription: 'test',
+    filters: {},
+    items: {
+        id: 1
+    },
+    totalPagesFromData: 1
+};
+
 test('renders the correct tree', () => {
     const data = {
-        category: {
-            name: 'Name',
-            description: 'test'
-        },
         products: {
             items: {
                 id: 1
@@ -49,7 +61,7 @@ test('renders the correct tree', () => {
             }
         }
     };
-
+    useCategoryContent.mockReturnValueOnce(talonProps);
     const instance = createTestInstance(
         <CategoryContent
             pageControl={{}}
@@ -65,10 +77,6 @@ test('renders the correct tree', () => {
 
 test('renders empty page', () => {
     const data = {
-        category: {
-            name: 'Empty Name',
-            description: 'test'
-        },
         products: {
             items: null,
             page_info: {
@@ -76,7 +84,11 @@ test('renders empty page', () => {
             }
         }
     };
-
+    useCategoryContent.mockReturnValueOnce({
+        ...talonProps,
+        categoryName: 'Empty Name',
+        totalPagesFromData: 0
+    });
     const instance = createTestInstance(
         <CategoryContent
             pageControl={{}}

From 7d8eb63cdada566209693dd18958358093cde2da Mon Sep 17 00:00:00 2001
From: Vasilii Burlacu <v.burlacu@atwix.com>
Date: Fri, 30 Apr 2021 22:14:04 +0300
Subject: [PATCH 27/39] fix failed tests for useCategoryContent.spec.js

---
 .../useCategoryContent.spec.js.snap           | 10 +--
 .../__tests__/useCategoryContent.spec.js      | 72 +++++--------------
 2 files changed, 20 insertions(+), 62 deletions(-)

diff --git a/packages/peregrine/lib/talons/RootComponents/Category/__tests__/__snapshots__/useCategoryContent.spec.js.snap b/packages/peregrine/lib/talons/RootComponents/Category/__tests__/__snapshots__/useCategoryContent.spec.js.snap
index 9ccf94613f..a1f4d20f7c 100644
--- a/packages/peregrine/lib/talons/RootComponents/Category/__tests__/__snapshots__/useCategoryContent.spec.js.snap
+++ b/packages/peregrine/lib/talons/RootComponents/Category/__tests__/__snapshots__/useCategoryContent.spec.js.snap
@@ -2,11 +2,9 @@
 
 exports[`handles no data prop 1`] = `
 Object {
-  "categoryDescription": null,
-  "categoryName": null,
+  "categoryDescription": "Jewelry category",
+  "categoryName": "Jewelry",
   "filters": null,
-  "handleLoadFilters": [Function],
-  "handleOpenFilters": [Function],
   "items": Array [
     null,
     null,
@@ -18,7 +16,6 @@ Object {
     null,
     null,
   ],
-  "loadFilters": false,
   "totalPagesFromData": null,
 }
 `;
@@ -32,8 +29,6 @@ Object {
       "label": "Label",
     },
   ],
-  "handleLoadFilters": [Function],
-  "handleOpenFilters": [Function],
   "items": Array [
     Object {
       "id": 1,
@@ -44,7 +39,6 @@ Object {
       "name": "Necklace",
     },
   ],
-  "loadFilters": false,
   "totalPagesFromData": 1,
 }
 `;
diff --git a/packages/peregrine/lib/talons/RootComponents/Category/__tests__/useCategoryContent.spec.js b/packages/peregrine/lib/talons/RootComponents/Category/__tests__/useCategoryContent.spec.js
index 2fccc69fd9..6a06eeb752 100644
--- a/packages/peregrine/lib/talons/RootComponents/Category/__tests__/useCategoryContent.spec.js
+++ b/packages/peregrine/lib/talons/RootComponents/Category/__tests__/useCategoryContent.spec.js
@@ -2,10 +2,7 @@ import React from 'react';
 import { createTestInstance } from '@magento/peregrine';
 
 import { useCategoryContent } from '../useCategoryContent';
-import { useLazyQuery } from '@apollo/client';
-import { act } from 'react-test-renderer';
-
-import { useAppContext } from '../../../../context/app';
+import { useLazyQuery, useQuery } from '@apollo/client';
 
 global.STORE_NAME = 'Venia';
 
@@ -23,7 +20,8 @@ jest.mock('@apollo/client', () => {
     const apolloClient = jest.requireActual('@apollo/client');
     return {
         ...apolloClient,
-        useLazyQuery: jest.fn()
+        useLazyQuery: jest.fn(),
+        useQuery: jest.fn()
     };
 });
 const Component = props => {
@@ -35,10 +33,6 @@ const Component = props => {
 const mockProps = {
     categoryId: 3,
     data: {
-        category: {
-            name: 'Jewelry',
-            description: 'Jewelry category'
-        },
         products: {
             page_info: {
                 total_pages: 1
@@ -66,6 +60,12 @@ const mockProductFiltersByCategoryData = {
         ]
     }
 };
+const mockCategoryData = {
+    category: {
+        name: 'Jewelry',
+        description: 'Jewelry category'
+    }
+}
 
 const mockGetFilters = jest.fn();
 
@@ -74,60 +74,20 @@ useLazyQuery.mockReturnValue([
     { data: mockProductFiltersByCategoryData }
 ]);
 
+useQuery.mockReturnValue(
+    { data: mockCategoryData }
+);
+
 it('returns the proper shape', () => {
     const rendered = createTestInstance(<Component {...mockProps} />);
 
     const talonProps = rendered.root.findByType('i').props;
 
     expect(mockGetFilters).toHaveBeenCalled();
+    expect(useQuery).toHaveBeenCalled();
     expect(talonProps).toMatchSnapshot();
 });
 
-it('sets the filter loading state', () => {
-    const rendered = createTestInstance(<Component {...mockProps} />);
-
-    const talonProps = rendered.root.findByType('i').props;
-
-    const { loadFilters, handleLoadFilters } = talonProps;
-
-    expect(loadFilters).toBeFalsy();
-
-    act(() => {
-        handleLoadFilters();
-    });
-
-    const updatedProps = rendered.root.findByType('i').props;
-
-    expect(updatedProps.loadFilters).toBeTruthy();
-});
-
-it('toggles drawer when opening filters', () => {
-    const mockToggleDrawer = jest.fn();
-    useAppContext.mockReturnValue([
-        {},
-        {
-            toggleDrawer: mockToggleDrawer
-        }
-    ]);
-
-    const rendered = createTestInstance(<Component {...mockProps} />);
-
-    const talonProps = rendered.root.findByType('i').props;
-
-    const { loadFilters, handleOpenFilters } = talonProps;
-
-    expect(loadFilters).toBeFalsy();
-
-    act(() => {
-        handleOpenFilters();
-    });
-
-    const updatedProps = rendered.root.findByType('i').props;
-
-    expect(updatedProps.loadFilters).toBeTruthy();
-    expect(mockToggleDrawer).toHaveBeenCalled();
-});
-
 it('handles default category id', () => {
     const testProps = Object.assign({}, mockProps, {
         categoryId: 0
@@ -153,6 +113,10 @@ it('handles no data prop', () => {
         data: null,
         pageSize: 9
     };
+    useLazyQuery.mockReturnValue([
+        mockGetFilters,
+        { data: null }
+    ]);
 
     const rendered = createTestInstance(<Component {...testProps} />);
 

From 393fae0066904010b464296bfae6c24e4839ccb7 Mon Sep 17 00:00:00 2001
From: sirugh <rugh@adobe.com>
Date: Thu, 6 May 2021 11:20:06 -0500
Subject: [PATCH 28/39] Update jsdoc

Signed-off-by: sirugh <rugh@adobe.com>
---
 .../lib/talons/RootComponents/Category/useCategoryContent.js  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js b/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js
index 4933823c13..27d32dd3f1 100644
--- a/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js
+++ b/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js
@@ -11,11 +11,11 @@ import DEFAULT_OPERATIONS from './categoryContent.gql';
  * @param {object} props.data - The results of a getCategory GraphQL query.
  *
  * @returns {object} result
- * @returns {number} result.categoryId - This category's ID.
+ * @returns {number} result.categoryDescription - This category's description.
  * @returns {string} result.categoryName - This category's name.
  * @returns {object} result.filters - The filters object.
  * @returns {object} result.items - The items in this category.
- * @returns {bool}   result.loadFilters - Whether or not the user has signalled their intent to interact with the filters.
+ * @returns {number} result.totalPagesFromData - The total amount of pages for the query.
  */
 export const useCategoryContent = props => {
     const { categoryId, data, pageSize = 6 } = props;

From 11679ab6277eda4b7b930cf314eab972660b02b3 Mon Sep 17 00:00:00 2001
From: sirugh <rugh@adobe.com>
Date: Thu, 6 May 2021 11:41:00 -0500
Subject: [PATCH 29/39] run prettier

Signed-off-by: sirugh <rugh@adobe.com>
---
 .../Category/__tests__/useCategoryContent.spec.js     | 11 +++--------
 .../Category/__tests__/categoryContent.spec.js        |  5 ++++-
 .../venia-ui/lib/components/SearchPage/searchPage.js  |  5 ++++-
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/peregrine/lib/talons/RootComponents/Category/__tests__/useCategoryContent.spec.js b/packages/peregrine/lib/talons/RootComponents/Category/__tests__/useCategoryContent.spec.js
index 6a06eeb752..1f58650902 100644
--- a/packages/peregrine/lib/talons/RootComponents/Category/__tests__/useCategoryContent.spec.js
+++ b/packages/peregrine/lib/talons/RootComponents/Category/__tests__/useCategoryContent.spec.js
@@ -65,7 +65,7 @@ const mockCategoryData = {
         name: 'Jewelry',
         description: 'Jewelry category'
     }
-}
+};
 
 const mockGetFilters = jest.fn();
 
@@ -74,9 +74,7 @@ useLazyQuery.mockReturnValue([
     { data: mockProductFiltersByCategoryData }
 ]);
 
-useQuery.mockReturnValue(
-    { data: mockCategoryData }
-);
+useQuery.mockReturnValue({ data: mockCategoryData });
 
 it('returns the proper shape', () => {
     const rendered = createTestInstance(<Component {...mockProps} />);
@@ -113,10 +111,7 @@ it('handles no data prop', () => {
         data: null,
         pageSize: 9
     };
-    useLazyQuery.mockReturnValue([
-        mockGetFilters,
-        { data: null }
-    ]);
+    useLazyQuery.mockReturnValue([mockGetFilters, { data: null }]);
 
     const rendered = createTestInstance(<Component {...testProps} />);
 
diff --git a/packages/venia-ui/lib/RootComponents/Category/__tests__/categoryContent.spec.js b/packages/venia-ui/lib/RootComponents/Category/__tests__/categoryContent.spec.js
index 9f2b2af8cb..07d24c9797 100644
--- a/packages/venia-ui/lib/RootComponents/Category/__tests__/categoryContent.spec.js
+++ b/packages/venia-ui/lib/RootComponents/Category/__tests__/categoryContent.spec.js
@@ -25,7 +25,10 @@ jest.mock('../../../components/Breadcrumbs', () => 'Breadcrumbs');
 jest.mock('../../../components/Gallery', () => 'Gallery');
 jest.mock('../../../components/Pagination', () => 'Pagination');
 jest.mock('../../../components/SortedByContainer', () => 'SortedByContainer');
-jest.mock('../../../components/FilterModalOpenButton', () => 'FilterModalOpenButton');
+jest.mock(
+    '../../../components/FilterModalOpenButton',
+    () => 'FilterModalOpenButton'
+);
 jest.mock('../NoProductsFound', () => 'NoProductsFound');
 
 const classes = {
diff --git a/packages/venia-ui/lib/components/SearchPage/searchPage.js b/packages/venia-ui/lib/components/SearchPage/searchPage.js
index 37d2839b3a..60d7b3eab0 100644
--- a/packages/venia-ui/lib/components/SearchPage/searchPage.js
+++ b/packages/venia-ui/lib/components/SearchPage/searchPage.js
@@ -82,7 +82,10 @@ const SearchPage = props => {
         pageControl
     ]);
 
-    const productsCount = data && data.products && data.products.total_count ? data.products.total_count : 0;
+    const productsCount =
+        data && data.products && data.products.total_count
+            ? data.products.total_count
+            : 0;
 
     const maybeFilterButtons =
         filters && filters.length ? (

From d9f81a7b022d22a13cdf905ac75138bdfc16b092 Mon Sep 17 00:00:00 2001
From: sirugh <rugh@adobe.com>
Date: Thu, 6 May 2021 11:55:12 -0500
Subject: [PATCH 30/39] fix tests, remove old loading indicator tests for
 category component

Signed-off-by: sirugh <rugh@adobe.com>
---
 .../__tests__/useFilterModal.spec.js          |   2 +
 .../lib/talons/FilterModal/useFilterModal.js  |   4 +-
 .../__snapshots__/category.spec.js.snap       | 112 +-----------------
 .../Category/__tests__/category.spec.js       |  20 ----
 4 files changed, 6 insertions(+), 132 deletions(-)

diff --git a/packages/peregrine/lib/talons/FilterModal/__tests__/useFilterModal.spec.js b/packages/peregrine/lib/talons/FilterModal/__tests__/useFilterModal.spec.js
index 706ad2be31..6157053688 100644
--- a/packages/peregrine/lib/talons/FilterModal/__tests__/useFilterModal.spec.js
+++ b/packages/peregrine/lib/talons/FilterModal/__tests__/useFilterModal.spec.js
@@ -131,6 +131,8 @@ describe('#useFilterModal', () => {
             filterState: expect.any(Object),
             handleApply: expect.any(Function),
             handleClose: expect.any(Function),
+            handleKeyDownActions: expect.any(Function),
+            handleOpen: expect.any(Function),
             handleReset: expect.any(Function),
             isApplying: expect.any(Boolean),
             isOpen: expect.any(Boolean)
diff --git a/packages/peregrine/lib/talons/FilterModal/useFilterModal.js b/packages/peregrine/lib/talons/FilterModal/useFilterModal.js
index 409b242f6c..32459e1a6e 100644
--- a/packages/peregrine/lib/talons/FilterModal/useFilterModal.js
+++ b/packages/peregrine/lib/talons/FilterModal/useFilterModal.js
@@ -192,10 +192,10 @@ export const useFilterModal = props => {
         filterNames,
         filterState,
         handleApply,
-        handleOpen,
         handleClose,
-        handleReset,
         handleKeyDownActions,
+        handleOpen,
+        handleReset,
         isApplying,
         isOpen
     };
diff --git a/packages/venia-ui/lib/RootComponents/Category/__tests__/__snapshots__/category.spec.js.snap b/packages/venia-ui/lib/RootComponents/Category/__tests__/__snapshots__/category.spec.js.snap
index bbdc65c7b8..52fcecad21 100644
--- a/packages/venia-ui/lib/RootComponents/Category/__tests__/__snapshots__/category.spec.js.snap
+++ b/packages/venia-ui/lib/RootComponents/Category/__tests__/__snapshots__/category.spec.js.snap
@@ -15,6 +15,7 @@ Array [
         },
       }
     }
+    isLoading={false}
     pageControl={
       Object {
         "currentPage": 1,
@@ -77,116 +78,6 @@ exports[`Category Root Component error view renders when data is not present and
 </div>
 `;
 
-exports[`Category Root Component loading indicator does not render when data is present 1`] = `
-Array [
-  "Meta",
-  <CategoryContent
-    categoryId={3}
-    classes={Object {}}
-    data={
-      Object {
-        "products": Object {
-          "page_info": Object {
-            "total_pages": 6,
-          },
-        },
-      }
-    }
-    pageControl={
-      Object {
-        "currentPage": 1,
-        "setPage": [MockFunction],
-        "totalPages": 6,
-      }
-    }
-    pageSize={12}
-    sortProps={
-      Array [
-        Object {
-          "sortAttribute": "relevance",
-          "sortDirection": "DESC",
-          "sortText": "Best Match",
-        },
-        [MockFunction],
-      ]
-    }
-  />,
-]
-`;
-
-exports[`Category Root Component loading indicator renders when data is not present 1`] = `
-<div>
-  <span>
-    <svg
-      fill="none"
-      height={64}
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-      viewBox="0 0 24 24"
-      width={64}
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <line
-        x1="12"
-        x2="12"
-        y1="2"
-        y2="6"
-      />
-      <line
-        x1="12"
-        x2="12"
-        y1="18"
-        y2="22"
-      />
-      <line
-        x1="4.93"
-        x2="7.76"
-        y1="4.93"
-        y2="7.76"
-      />
-      <line
-        x1="16.24"
-        x2="19.07"
-        y1="16.24"
-        y2="19.07"
-      />
-      <line
-        x1="2"
-        x2="6"
-        y1="12"
-        y2="12"
-      />
-      <line
-        x1="18"
-        x2="22"
-        y1="12"
-        y2="12"
-      />
-      <line
-        x1="4.93"
-        x2="7.76"
-        y1="19.07"
-        y2="16.24"
-      />
-      <line
-        x1="16.24"
-        x2="19.07"
-        y1="7.76"
-        y2="4.93"
-      />
-    </svg>
-  </span>
-  <span>
-    <mock-FormattedMessage
-      defaultMessage="Fetching Data..."
-      id="loadingIndicator.message"
-    />
-  </span>
-</div>
-`;
-
 exports[`Category Root Component renders the correct tree 1`] = `
 Array [
   "Meta",
@@ -202,6 +93,7 @@ Array [
         },
       }
     }
+    isLoading={false}
     pageControl={
       Object {
         "currentPage": 1,
diff --git a/packages/venia-ui/lib/RootComponents/Category/__tests__/category.spec.js b/packages/venia-ui/lib/RootComponents/Category/__tests__/category.spec.js
index d313316973..081499081f 100644
--- a/packages/venia-ui/lib/RootComponents/Category/__tests__/category.spec.js
+++ b/packages/venia-ui/lib/RootComponents/Category/__tests__/category.spec.js
@@ -59,26 +59,6 @@ describe('Category Root Component', () => {
         expect(tree.toJSON()).toMatchSnapshot();
     });
 
-    describe('loading indicator', () => {
-        test('does not render when data is present', () => {
-            useCategory.mockReturnValueOnce({
-                ...talonProps,
-                loading: true
-            });
-            const tree = createTestInstance(<Category {...categoryProps} />);
-            expect(tree.toJSON()).toMatchSnapshot();
-        });
-        test('renders when data is not present', () => {
-            useCategory.mockReturnValueOnce({
-                ...talonProps,
-                loading: true,
-                categoryData: undefined
-            });
-            const tree = createTestInstance(<Category {...categoryProps} />);
-            expect(tree.toJSON()).toMatchSnapshot();
-        });
-    });
-
     describe('error view', () => {
         test('does not render when data is present', () => {
             useCategory.mockReturnValueOnce({

From 27adecbf6b8c3adfe59b16b35305c1aae7a42cb8 Mon Sep 17 00:00:00 2001
From: sirugh <rugh@adobe.com>
Date: Thu, 6 May 2021 12:49:56 -0500
Subject: [PATCH 31/39] jsdoc fix

Signed-off-by: sirugh <rugh@adobe.com>
---
 .../lib/talons/RootComponents/Category/useCategoryContent.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js b/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js
index 27d32dd3f1..98a514c8e5 100644
--- a/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js
+++ b/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js
@@ -11,7 +11,7 @@ import DEFAULT_OPERATIONS from './categoryContent.gql';
  * @param {object} props.data - The results of a getCategory GraphQL query.
  *
  * @returns {object} result
- * @returns {number} result.categoryDescription - This category's description.
+ * @returns {string} result.categoryDescription - This category's description.
  * @returns {string} result.categoryName - This category's name.
  * @returns {object} result.filters - The filters object.
  * @returns {object} result.items - The items in this category.

From 8e581afbd9f79180db3e96a69aa86d3fde628535 Mon Sep 17 00:00:00 2001
From: sirugh <rugh@adobe.com>
Date: Thu, 6 May 2021 16:29:57 -0500
Subject: [PATCH 32/39] Render filter and sort buttons if filters exist

Signed-off-by: sirugh <rugh@adobe.com>
---
 .../Category/categoryContent.js               |  26 ++---
 .../__snapshots__/searchPage.spec.js.snap     | 109 ++++--------------
 .../lib/components/SearchPage/searchPage.js   |  34 +++---
 3 files changed, 49 insertions(+), 120 deletions(-)

diff --git a/packages/venia-ui/lib/RootComponents/Category/categoryContent.js b/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
index fa4c4fe356..d140e7625c 100644
--- a/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
+++ b/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
@@ -44,25 +44,21 @@ const CategoryContent = props => {
 
     const classes = mergeClasses(defaultClasses, props.classes);
 
-    const maybeFilterButtons =
-        filters && filters.length ? (
-            <FilterModalOpenButton filters={filters} />
-        ) : null;
-
-    const filtersModal =
-        filters && filters.length ? <FilterModal filters={filters} /> : null;
-
-    const filtersAndTotalPagesPresent = !!(
-        totalPagesFromData &&
-        filters &&
-        filters.length
-    );
+    const shouldShowButtons = !!(filters && filters.length);
+
+    const maybeFilterButtons = shouldShowButtons ? (
+        <FilterModalOpenButton filters={filters} />
+    ) : null;
+
+    const filtersModal = shouldShowButtons ? (
+        <FilterModal filters={filters} />
+    ) : null;
 
-    const maybeSortButton = filtersAndTotalPagesPresent ? (
+    const maybeSortButton = shouldShowButtons ? (
         <ProductSort sortProps={sortProps} />
     ) : null;
 
-    const maybeSortContainer = filtersAndTotalPagesPresent ? (
+    const maybeSortContainer = shouldShowButtons ? (
         <SortedByContainer currentSort={currentSort} />
     ) : null;
 
diff --git a/packages/venia-ui/lib/components/SearchPage/__tests__/__snapshots__/searchPage.spec.js.snap b/packages/venia-ui/lib/components/SearchPage/__tests__/__snapshots__/searchPage.spec.js.snap
index becaf11954..8fa9a1d0ab 100644
--- a/packages/venia-ui/lib/components/SearchPage/__tests__/__snapshots__/searchPage.spec.js.snap
+++ b/packages/venia-ui/lib/components/SearchPage/__tests__/__snapshots__/searchPage.spec.js.snap
@@ -154,7 +154,28 @@ exports[`Search Page Component filter button/modal renders when there are filter
           ]
         }
       />
+      <ProductSort
+        sortProps={
+          Array [
+            Object {
+              "sortAttribute": "relevance",
+              "sortDirection": "DESC",
+              "sortText": "Best Match",
+            },
+            [MockFunction],
+          ]
+        }
+      />
     </div>
+    <SortedByContainer
+      currentSort={
+        Object {
+          "sortAttribute": "relevance",
+          "sortDirection": "DESC",
+          "sortText": "Best Match",
+        }
+      }
+    />
   </div>
   <div
     className="heading"
@@ -397,28 +418,6 @@ exports[`Search Page Component search results heading renders a generic message
     </span>
     <div
       className="headerButtons"
-    >
-      <ProductSort
-        sortProps={
-          Array [
-            Object {
-              "sortAttribute": "relevance",
-              "sortDirection": "DESC",
-              "sortText": "Best Match",
-            },
-            [MockFunction],
-          ]
-        }
-      />
-    </div>
-    <SortedByContainer
-      currentSort={
-        Object {
-          "sortAttribute": "relevance",
-          "sortDirection": "DESC",
-          "sortText": "Best Match",
-        }
-      }
     />
   </div>
   <div
@@ -470,28 +469,6 @@ exports[`Search Page Component search results heading renders a specific message
     </span>
     <div
       className="headerButtons"
-    >
-      <ProductSort
-        sortProps={
-          Array [
-            Object {
-              "sortAttribute": "relevance",
-              "sortDirection": "DESC",
-              "sortText": "Best Match",
-            },
-            [MockFunction],
-          ]
-        }
-      />
-    </div>
-    <SortedByContainer
-      currentSort={
-        Object {
-          "sortAttribute": "relevance",
-          "sortDirection": "DESC",
-          "sortText": "Best Match",
-        }
-      }
     />
   </div>
   <div
@@ -636,28 +613,6 @@ exports[`Search Page Component sort button/container renders when total count >
     </span>
     <div
       className="headerButtons"
-    >
-      <ProductSort
-        sortProps={
-          Array [
-            Object {
-              "sortAttribute": "relevance",
-              "sortDirection": "DESC",
-              "sortText": "Best Match",
-            },
-            [MockFunction],
-          ]
-        }
-      />
-    </div>
-    <SortedByContainer
-      currentSort={
-        Object {
-          "sortAttribute": "relevance",
-          "sortDirection": "DESC",
-          "sortText": "Best Match",
-        }
-      }
     />
   </div>
   <div
@@ -744,28 +699,6 @@ exports[`Search Page Component total count renders results from data 1`] = `
     </span>
     <div
       className="headerButtons"
-    >
-      <ProductSort
-        sortProps={
-          Array [
-            Object {
-              "sortAttribute": "relevance",
-              "sortDirection": "DESC",
-              "sortText": "Best Match",
-            },
-            [MockFunction],
-          ]
-        }
-      />
-    </div>
-    <SortedByContainer
-      currentSort={
-        Object {
-          "sortAttribute": "relevance",
-          "sortDirection": "DESC",
-          "sortText": "Best Match",
-        }
-      }
     />
   </div>
   <div
diff --git a/packages/venia-ui/lib/components/SearchPage/searchPage.js b/packages/venia-ui/lib/components/SearchPage/searchPage.js
index 60d7b3eab0..361be28a23 100644
--- a/packages/venia-ui/lib/components/SearchPage/searchPage.js
+++ b/packages/venia-ui/lib/components/SearchPage/searchPage.js
@@ -87,23 +87,23 @@ const SearchPage = props => {
             ? data.products.total_count
             : 0;
 
-    const maybeFilterButtons =
-        filters && filters.length ? (
-            <FilterModalOpenButton filters={filters} />
-        ) : null;
-
-    const maybeFilterModal =
-        filters && filters.length ? <FilterModal filters={filters} /> : null;
-
-    const maybeSortButton =
-        data && data.products.total_count ? (
-            <ProductSort sortProps={sortProps} />
-        ) : null;
-
-    const maybeSortContainer =
-        data && data.products.total_count ? (
-            <SortedByContainer currentSort={currentSort} />
-        ) : null;
+    const shouldShowButtons = !!(filters && filters.length);
+
+    const maybeFilterButtons = shouldShowButtons ? (
+        <FilterModalOpenButton filters={filters} />
+    ) : null;
+
+    const maybeFilterModal = shouldShowButtons ? (
+        <FilterModal filters={filters} />
+    ) : null;
+
+    const maybeSortButton = shouldShowButtons ? (
+        <ProductSort sortProps={sortProps} />
+    ) : null;
+
+    const maybeSortContainer = shouldShowButtons ? (
+        <SortedByContainer currentSort={currentSort} />
+    ) : null;
 
     const searchResultsHeading = !data ? null : searchTerm ? (
         <FormattedMessage

From 7ad0d8e2c2b039b2dd32fe14f52d70fce963f736 Mon Sep 17 00:00:00 2001
From: sirugh <rugh@adobe.com>
Date: Thu, 6 May 2021 18:28:41 -0500
Subject: [PATCH 33/39] dont render sort button if there are no results

Signed-off-by: sirugh <rugh@adobe.com>
---
 .../RootComponents/Category/categoryContent.js   | 16 +++++++++-------
 .../lib/components/SearchPage/searchPage.js      | 16 +++++++++-------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/packages/venia-ui/lib/RootComponents/Category/categoryContent.js b/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
index d140e7625c..acd80212ac 100644
--- a/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
+++ b/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
@@ -54,13 +54,15 @@ const CategoryContent = props => {
         <FilterModal filters={filters} />
     ) : null;
 
-    const maybeSortButton = shouldShowButtons ? (
-        <ProductSort sortProps={sortProps} />
-    ) : null;
-
-    const maybeSortContainer = shouldShowButtons ? (
-        <SortedByContainer currentSort={currentSort} />
-    ) : null;
+    const maybeSortButton =
+        shouldShowButtons && totalPagesFromData ? (
+            <ProductSort sortProps={sortProps} />
+        ) : null;
+
+    const maybeSortContainer =
+        shouldShowButtons && totalPagesFromData ? (
+            <SortedByContainer currentSort={currentSort} />
+        ) : null;
 
     const categoryDescriptionElement = categoryDescription ? (
         <RichContent html={categoryDescription} />
diff --git a/packages/venia-ui/lib/components/SearchPage/searchPage.js b/packages/venia-ui/lib/components/SearchPage/searchPage.js
index 361be28a23..2144a036fb 100644
--- a/packages/venia-ui/lib/components/SearchPage/searchPage.js
+++ b/packages/venia-ui/lib/components/SearchPage/searchPage.js
@@ -97,13 +97,15 @@ const SearchPage = props => {
         <FilterModal filters={filters} />
     ) : null;
 
-    const maybeSortButton = shouldShowButtons ? (
-        <ProductSort sortProps={sortProps} />
-    ) : null;
-
-    const maybeSortContainer = shouldShowButtons ? (
-        <SortedByContainer currentSort={currentSort} />
-    ) : null;
+    const maybeSortButton =
+        shouldShowButtons && productsCount ? (
+            <ProductSort sortProps={sortProps} />
+        ) : null;
+
+    const maybeSortContainer =
+        shouldShowButtons && productsCount ? (
+            <SortedByContainer currentSort={currentSort} />
+        ) : null;
 
     const searchResultsHeading = !data ? null : searchTerm ? (
         <FormattedMessage

From 5ed8c3cd1ae69cfc8662c8a997fc771d7305b5c5 Mon Sep 17 00:00:00 2001
From: sirugh <rugh@adobe.com>
Date: Fri, 7 May 2021 08:44:52 -0500
Subject: [PATCH 34/39] SortedBy container should be a div

Signed-off-by: sirugh <rugh@adobe.com>
---
 .../lib/components/SortedByContainer/sortedByContainer.js     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/venia-ui/lib/components/SortedByContainer/sortedByContainer.js b/packages/venia-ui/lib/components/SortedByContainer/sortedByContainer.js
index d073cbacd2..b717c024af 100644
--- a/packages/venia-ui/lib/components/SortedByContainer/sortedByContainer.js
+++ b/packages/venia-ui/lib/components/SortedByContainer/sortedByContainer.js
@@ -10,7 +10,7 @@ const SortedByContainer = props => {
     const classes = mergeClasses(defaultClasses, props.classes);
 
     return (
-        <span className={classes.root}>
+        <div className={classes.root}>
             <FormattedMessage
                 id={'searchPage.sortContainer'}
                 defaultMessage={'Items sorted by '}
@@ -21,7 +21,7 @@ const SortedByContainer = props => {
                     defaultMessage={currentSort.sortText}
                 />
             </span>
-        </span>
+        </div>
     );
 };
 

From 96613478c60e34bb5d29887f7ec1b55669950d4f Mon Sep 17 00:00:00 2001
From: sirugh <rugh@adobe.com>
Date: Fri, 7 May 2021 08:49:13 -0500
Subject: [PATCH 35/39] different behavior for category and search for
 rendering sort buttons

Signed-off-by: sirugh <rugh@adobe.com>
---
 .../Category/categoryContent.js               | 26 +++++++++++--------
 .../lib/components/SearchPage/searchPage.js   | 23 ++++++++--------
 2 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/packages/venia-ui/lib/RootComponents/Category/categoryContent.js b/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
index acd80212ac..3e6d7862a8 100644
--- a/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
+++ b/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
@@ -44,25 +44,29 @@ const CategoryContent = props => {
 
     const classes = mergeClasses(defaultClasses, props.classes);
 
-    const shouldShowButtons = !!(filters && filters.length);
+    const shouldShowFilterButtons = filters && filters.length;
 
-    const maybeFilterButtons = shouldShowButtons ? (
+    // On the category page, we can show sort buttons whenever filter buttons
+    // are rendered unlike on search where we hide sort if there are no
+    // products. If there are no products on the category page, then this will
+    // be false as there won't be filters.
+    const shouldShowSortButtons = shouldShowFilterButtons;
+
+    const maybeFilterButtons = shouldShowFilterButtons ? (
         <FilterModalOpenButton filters={filters} />
     ) : null;
 
-    const filtersModal = shouldShowButtons ? (
+    const filtersModal = shouldShowFilterButtons ? (
         <FilterModal filters={filters} />
     ) : null;
 
-    const maybeSortButton =
-        shouldShowButtons && totalPagesFromData ? (
-            <ProductSort sortProps={sortProps} />
-        ) : null;
+    const maybeSortButton = shouldShowSortButtons ? (
+        <ProductSort sortProps={sortProps} />
+    ) : null;
 
-    const maybeSortContainer =
-        shouldShowButtons && totalPagesFromData ? (
-            <SortedByContainer currentSort={currentSort} />
-        ) : null;
+    const maybeSortContainer = shouldShowSortButtons ? (
+        <SortedByContainer currentSort={currentSort} />
+    ) : null;
 
     const categoryDescriptionElement = categoryDescription ? (
         <RichContent html={categoryDescription} />
diff --git a/packages/venia-ui/lib/components/SearchPage/searchPage.js b/packages/venia-ui/lib/components/SearchPage/searchPage.js
index 2144a036fb..555cb5cc77 100644
--- a/packages/venia-ui/lib/components/SearchPage/searchPage.js
+++ b/packages/venia-ui/lib/components/SearchPage/searchPage.js
@@ -87,25 +87,26 @@ const SearchPage = props => {
             ? data.products.total_count
             : 0;
 
-    const shouldShowButtons = !!(filters && filters.length);
+    const shouldShowFilterButtons = filters && filters.length;
 
-    const maybeFilterButtons = shouldShowButtons ? (
+    // On the search page, if there are no products we can hide the sort buttons
+    const shouldShowSortButtons = shouldShowFilterButtons && productsCount;
+
+    const maybeFilterButtons = shouldShowFilterButtons ? (
         <FilterModalOpenButton filters={filters} />
     ) : null;
 
-    const maybeFilterModal = shouldShowButtons ? (
+    const maybeFilterModal = shouldShowFilterButtons ? (
         <FilterModal filters={filters} />
     ) : null;
 
-    const maybeSortButton =
-        shouldShowButtons && productsCount ? (
-            <ProductSort sortProps={sortProps} />
-        ) : null;
+    const maybeSortButton = shouldShowSortButtons ? (
+        <ProductSort sortProps={sortProps} />
+    ) : null;
 
-    const maybeSortContainer =
-        shouldShowButtons && productsCount ? (
-            <SortedByContainer currentSort={currentSort} />
-        ) : null;
+    const maybeSortContainer = shouldShowSortButtons ? (
+        <SortedByContainer currentSort={currentSort} />
+    ) : null;
 
     const searchResultsHeading = !data ? null : searchTerm ? (
         <FormattedMessage

From 369d223da075517aaa174ce4f012a48b0c082ffd Mon Sep 17 00:00:00 2001
From: sirugh <rugh@adobe.com>
Date: Fri, 7 May 2021 09:19:28 -0500
Subject: [PATCH 36/39] Add tests for categoryContent

---
 .../categoryContent.spec.js.snap              | 400 +++++++++++++++++-
 .../__tests__/categoryContent.spec.js         | 119 ++++--
 .../__snapshots__/searchPage.spec.js.snap     | 109 ++++-
 .../lib/components/SearchPage/searchPage.js   |   2 +-
 4 files changed, 552 insertions(+), 78 deletions(-)

diff --git a/packages/venia-ui/lib/RootComponents/Category/__tests__/__snapshots__/categoryContent.spec.js.snap b/packages/venia-ui/lib/RootComponents/Category/__tests__/__snapshots__/categoryContent.spec.js.snap
index dcd0dc4853..847c35f0dc 100644
--- a/packages/venia-ui/lib/RootComponents/Category/__tests__/__snapshots__/categoryContent.spec.js.snap
+++ b/packages/venia-ui/lib/RootComponents/Category/__tests__/__snapshots__/categoryContent.spec.js.snap
@@ -1,42 +1,409 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`filter button/modal does not render if there are no filters 1`] = `
+Array [
+  <Breadcrumbs
+    categoryId={42}
+  />,
+  "Title",
+  <article
+    className="root"
+  >
+    <h1
+      className="title"
+    >
+      <div
+        className="categoryTitle"
+      >
+        Name
+      </div>
+    </h1>
+    <div
+      className="headerButtons"
+    />
+    <section
+      className="gallery"
+    >
+      <Gallery
+        items={
+          Object {
+            "id": 1,
+          }
+        }
+      />
+    </section>
+    <div
+      className="pagination"
+    >
+      <Pagination
+        pageControl={Object {}}
+      />
+    </div>
+  </article>,
+]
+`;
+
+exports[`filter button/modal renders when there are filters 1`] = `
+Array [
+  <Breadcrumbs
+    categoryId={42}
+  />,
+  "Title",
+  <article
+    className="root"
+  >
+    <h1
+      className="title"
+    >
+      <div
+        className="categoryTitle"
+      >
+        Name
+      </div>
+    </h1>
+    <div
+      className="headerButtons"
+    >
+      <FilterModalOpenButton
+        filters={
+          Array [
+            Object {},
+          ]
+        }
+      />
+      <div
+        className="root"
+      >
+        <button
+          className="root_lowPriority"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <span
+            className="content"
+          >
+            <mock-FormattedMessage
+              defaultMessage="Sort"
+              id="productSort.sortButton"
+            />
+          </span>
+        </button>
+      </div>
+    </div>
+    <SortedByContainer
+      currentSort={
+        Object {
+          "sortAttribute": "",
+          "sortDirection": "",
+          "sortText": "",
+        }
+      }
+    />
+    <section
+      className="gallery"
+    >
+      <Gallery
+        items={
+          Object {
+            "id": 1,
+          }
+        }
+      />
+    </section>
+    <div
+      className="pagination"
+    >
+      <Pagination
+        pageControl={Object {}}
+      />
+    </div>
+    <require('../../components/FilterModal')
+      filters={
+        Array [
+          Object {},
+        ]
+      }
+    />
+  </article>,
+]
+`;
+
 exports[`renders empty page 1`] = `
 Array [
-  <Breadcrumbs />,
+  <Breadcrumbs
+    categoryId={42}
+  />,
   "Title",
   <article
-    className="a"
+    className="root"
   >
     <h1
-      className="b"
+      className="title"
     >
-      <div>
+      <div
+        className="categoryTitle"
+      >
         Empty Name
       </div>
     </h1>
-    <div />
-    <NoProductsFound />
+    <div
+      className="headerButtons"
+    />
+    <NoProductsFound
+      categoryId={42}
+    />
+  </article>,
+]
+`;
+
+exports[`renders loading indicator if no data and  loading 1`] = `
+Array [
+  <Breadcrumbs
+    categoryId={42}
+  />,
+  "Title",
+  <article
+    className="root"
+  >
+    <h1
+      className="title"
+    >
+      <div
+        className="categoryTitle"
+      >
+        Name
+      </div>
+    </h1>
+    <div
+      className="headerButtons"
+    />
+    <div
+      className="global"
+    >
+      <span
+        className="root"
+      >
+        <svg
+          className="icon"
+          fill="none"
+          height={64}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width={64}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <line
+            x1="12"
+            x2="12"
+            y1="2"
+            y2="6"
+          />
+          <line
+            x1="12"
+            x2="12"
+            y1="18"
+            y2="22"
+          />
+          <line
+            x1="4.93"
+            x2="7.76"
+            y1="4.93"
+            y2="7.76"
+          />
+          <line
+            x1="16.24"
+            x2="19.07"
+            y1="16.24"
+            y2="19.07"
+          />
+          <line
+            x1="2"
+            x2="6"
+            y1="12"
+            y2="12"
+          />
+          <line
+            x1="18"
+            x2="22"
+            y1="12"
+            y2="12"
+          />
+          <line
+            x1="4.93"
+            x2="7.76"
+            y1="19.07"
+            y2="16.24"
+          />
+          <line
+            x1="16.24"
+            x2="19.07"
+            y1="7.76"
+            y2="4.93"
+          />
+        </svg>
+      </span>
+      <span
+        className="message"
+      >
+        <mock-FormattedMessage
+          defaultMessage="Fetching Data..."
+          id="loadingIndicator.message"
+        />
+      </span>
+    </div>
   </article>,
 ]
 `;
 
 exports[`renders the correct tree 1`] = `
 Array [
-  <Breadcrumbs />,
+  <Breadcrumbs
+    categoryId={42}
+  />,
+  "Title",
+  <article
+    className="root"
+  >
+    <h1
+      className="title"
+    >
+      <div
+        className="categoryTitle"
+      >
+        Name
+      </div>
+    </h1>
+    <div
+      className="headerButtons"
+    />
+    <section
+      className="gallery"
+    >
+      <Gallery
+        items={
+          Object {
+            "id": 1,
+          }
+        }
+      />
+    </section>
+    <div
+      className="pagination"
+    >
+      <Pagination
+        pageControl={Object {}}
+      />
+    </div>
+  </article>,
+]
+`;
+
+exports[`sort button/container does not render if there are no filters 1`] = `
+Array [
+  <Breadcrumbs
+    categoryId={42}
+  />,
   "Title",
   <article
-    className="a"
+    className="root"
   >
     <h1
-      className="b"
+      className="title"
     >
-      <div>
+      <div
+        className="categoryTitle"
+      >
         Name
       </div>
     </h1>
-    <div />
+    <div
+      className="headerButtons"
+    />
+    <section
+      className="gallery"
+    >
+      <Gallery
+        items={
+          Object {
+            "id": 1,
+          }
+        }
+      />
+    </section>
+    <div
+      className="pagination"
+    >
+      <Pagination
+        pageControl={Object {}}
+      />
+    </div>
+  </article>,
+]
+`;
+
+exports[`sort button/container renders when there are filters 1`] = `
+Array [
+  <Breadcrumbs
+    categoryId={42}
+  />,
+  "Title",
+  <article
+    className="root"
+  >
+    <h1
+      className="title"
+    >
+      <div
+        className="categoryTitle"
+      >
+        Name
+      </div>
+    </h1>
+    <div
+      className="headerButtons"
+    >
+      <FilterModalOpenButton
+        filters={
+          Array [
+            Object {},
+          ]
+        }
+      />
+      <div
+        className="root"
+      >
+        <button
+          className="root_lowPriority"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <span
+            className="content"
+          >
+            <mock-FormattedMessage
+              defaultMessage="Sort"
+              id="productSort.sortButton"
+            />
+          </span>
+        </button>
+      </div>
+    </div>
+    <SortedByContainer
+      currentSort={
+        Object {
+          "sortAttribute": "",
+          "sortDirection": "",
+          "sortText": "",
+        }
+      }
+    />
     <section
-      className="c"
+      className="gallery"
     >
       <Gallery
         items={
@@ -47,12 +414,19 @@ Array [
       />
     </section>
     <div
-      className="d"
+      className="pagination"
     >
       <Pagination
         pageControl={Object {}}
       />
     </div>
+    <require('../../components/FilterModal')
+      filters={
+        Array [
+          Object {},
+        ]
+      }
+    />
   </article>,
 ]
 `;
diff --git a/packages/venia-ui/lib/RootComponents/Category/__tests__/categoryContent.spec.js b/packages/venia-ui/lib/RootComponents/Category/__tests__/categoryContent.spec.js
index 07d24c9797..0b8520aaff 100644
--- a/packages/venia-ui/lib/RootComponents/Category/__tests__/categoryContent.spec.js
+++ b/packages/venia-ui/lib/RootComponents/Category/__tests__/categoryContent.spec.js
@@ -3,6 +3,7 @@ import { createTestInstance } from '@magento/peregrine';
 import { useCategoryContent } from '@magento/peregrine/lib/talons/RootComponents/Category';
 import CategoryContent from '../categoryContent';
 
+jest.mock('@magento/venia-ui/lib/classify');
 jest.mock('@magento/peregrine/lib/context/app', () => {
     const state = {};
     const api = {
@@ -31,18 +32,24 @@ jest.mock(
 );
 jest.mock('../NoProductsFound', () => 'NoProductsFound');
 
-const classes = {
-    root: 'a',
-    title: 'b',
-    gallery: 'c',
-    pagination: 'd'
+const defaultProps = {
+    categoryId: 42,
+    data: {
+        products: {
+            items: {
+                id: 1
+            }
+        }
+    },
+    isLoading: false,
+    pageControl: {},
+    sortProps: [
+        { sortDirection: '', sortAttribute: '', sortText: '' },
+        jest.fn()
+    ],
+    pageSize: 6
 };
 
-const sortProps = [
-    { sortDirection: '', sortAttribute: '', sortText: '' },
-    jest.fn()
-];
-
 const talonProps = {
     categoryName: 'Name',
     categoryDescription: 'test',
@@ -54,37 +61,17 @@ const talonProps = {
 };
 
 test('renders the correct tree', () => {
-    const data = {
-        products: {
-            items: {
-                id: 1
-            },
-            page_info: {
-                total_pages: 1
-            }
-        }
-    };
     useCategoryContent.mockReturnValueOnce(talonProps);
-    const instance = createTestInstance(
-        <CategoryContent
-            pageControl={{}}
-            data={data}
-            pageSize={6}
-            sortProps={sortProps}
-            classes={classes}
-        />
-    );
+    const instance = createTestInstance(<CategoryContent {...defaultProps} />);
 
     expect(instance.toJSON()).toMatchSnapshot();
 });
 
 test('renders empty page', () => {
-    const data = {
+    const props = {
+        ...defaultProps,
         products: {
-            items: null,
-            page_info: {
-                total_pages: 0
-            }
+            items: null
         }
     };
     useCategoryContent.mockReturnValueOnce({
@@ -92,15 +79,61 @@ test('renders empty page', () => {
         categoryName: 'Empty Name',
         totalPagesFromData: 0
     });
-    const instance = createTestInstance(
-        <CategoryContent
-            pageControl={{}}
-            data={data}
-            pageSize={6}
-            sortProps={sortProps}
-            classes={classes}
-        />
-    );
+    const instance = createTestInstance(<CategoryContent {...props} />);
 
     expect(instance.toJSON()).toMatchSnapshot();
 });
+
+test('renders loading indicator if no data and  loading', () => {
+    const props = {
+        ...defaultProps,
+        isLoading: true
+    };
+    useCategoryContent.mockReturnValueOnce({
+        ...talonProps,
+        totalPagesFromData: 0
+    });
+    const instance = createTestInstance(<CategoryContent {...props} />);
+
+    expect(instance.toJSON()).toMatchSnapshot();
+});
+
+describe('filter button/modal', () => {
+    test('does not render if there are no filters', () => {
+        useCategoryContent.mockReturnValueOnce({
+            ...talonProps,
+            filters: []
+        });
+        const tree = createTestInstance(<CategoryContent {...defaultProps} />);
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    test('renders when there are filters', () => {
+        useCategoryContent.mockReturnValueOnce({
+            ...talonProps,
+            filters: [{}]
+        });
+        const tree = createTestInstance(<CategoryContent {...defaultProps} />);
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+});
+
+describe('sort button/container', () => {
+    test('does not render if there are no filters', () => {
+        useCategoryContent.mockReturnValueOnce({
+            ...talonProps,
+            filters: []
+        });
+        const tree = createTestInstance(<CategoryContent {...defaultProps} />);
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    test('renders when there are filters', () => {
+        useCategoryContent.mockReturnValueOnce({
+            ...talonProps,
+            filters: [{}]
+        });
+        const tree = createTestInstance(<CategoryContent {...defaultProps} />);
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+});
diff --git a/packages/venia-ui/lib/components/SearchPage/__tests__/__snapshots__/searchPage.spec.js.snap b/packages/venia-ui/lib/components/SearchPage/__tests__/__snapshots__/searchPage.spec.js.snap
index 8fa9a1d0ab..becaf11954 100644
--- a/packages/venia-ui/lib/components/SearchPage/__tests__/__snapshots__/searchPage.spec.js.snap
+++ b/packages/venia-ui/lib/components/SearchPage/__tests__/__snapshots__/searchPage.spec.js.snap
@@ -154,28 +154,7 @@ exports[`Search Page Component filter button/modal renders when there are filter
           ]
         }
       />
-      <ProductSort
-        sortProps={
-          Array [
-            Object {
-              "sortAttribute": "relevance",
-              "sortDirection": "DESC",
-              "sortText": "Best Match",
-            },
-            [MockFunction],
-          ]
-        }
-      />
     </div>
-    <SortedByContainer
-      currentSort={
-        Object {
-          "sortAttribute": "relevance",
-          "sortDirection": "DESC",
-          "sortText": "Best Match",
-        }
-      }
-    />
   </div>
   <div
     className="heading"
@@ -418,6 +397,28 @@ exports[`Search Page Component search results heading renders a generic message
     </span>
     <div
       className="headerButtons"
+    >
+      <ProductSort
+        sortProps={
+          Array [
+            Object {
+              "sortAttribute": "relevance",
+              "sortDirection": "DESC",
+              "sortText": "Best Match",
+            },
+            [MockFunction],
+          ]
+        }
+      />
+    </div>
+    <SortedByContainer
+      currentSort={
+        Object {
+          "sortAttribute": "relevance",
+          "sortDirection": "DESC",
+          "sortText": "Best Match",
+        }
+      }
     />
   </div>
   <div
@@ -469,6 +470,28 @@ exports[`Search Page Component search results heading renders a specific message
     </span>
     <div
       className="headerButtons"
+    >
+      <ProductSort
+        sortProps={
+          Array [
+            Object {
+              "sortAttribute": "relevance",
+              "sortDirection": "DESC",
+              "sortText": "Best Match",
+            },
+            [MockFunction],
+          ]
+        }
+      />
+    </div>
+    <SortedByContainer
+      currentSort={
+        Object {
+          "sortAttribute": "relevance",
+          "sortDirection": "DESC",
+          "sortText": "Best Match",
+        }
+      }
     />
   </div>
   <div
@@ -613,6 +636,28 @@ exports[`Search Page Component sort button/container renders when total count >
     </span>
     <div
       className="headerButtons"
+    >
+      <ProductSort
+        sortProps={
+          Array [
+            Object {
+              "sortAttribute": "relevance",
+              "sortDirection": "DESC",
+              "sortText": "Best Match",
+            },
+            [MockFunction],
+          ]
+        }
+      />
+    </div>
+    <SortedByContainer
+      currentSort={
+        Object {
+          "sortAttribute": "relevance",
+          "sortDirection": "DESC",
+          "sortText": "Best Match",
+        }
+      }
     />
   </div>
   <div
@@ -699,6 +744,28 @@ exports[`Search Page Component total count renders results from data 1`] = `
     </span>
     <div
       className="headerButtons"
+    >
+      <ProductSort
+        sortProps={
+          Array [
+            Object {
+              "sortAttribute": "relevance",
+              "sortDirection": "DESC",
+              "sortText": "Best Match",
+            },
+            [MockFunction],
+          ]
+        }
+      />
+    </div>
+    <SortedByContainer
+      currentSort={
+        Object {
+          "sortAttribute": "relevance",
+          "sortDirection": "DESC",
+          "sortText": "Best Match",
+        }
+      }
     />
   </div>
   <div
diff --git a/packages/venia-ui/lib/components/SearchPage/searchPage.js b/packages/venia-ui/lib/components/SearchPage/searchPage.js
index 555cb5cc77..ebfd95e290 100644
--- a/packages/venia-ui/lib/components/SearchPage/searchPage.js
+++ b/packages/venia-ui/lib/components/SearchPage/searchPage.js
@@ -90,7 +90,7 @@ const SearchPage = props => {
     const shouldShowFilterButtons = filters && filters.length;
 
     // On the search page, if there are no products we can hide the sort buttons
-    const shouldShowSortButtons = shouldShowFilterButtons && productsCount;
+    const shouldShowSortButtons = productsCount;
 
     const maybeFilterButtons = shouldShowFilterButtons ? (
         <FilterModalOpenButton filters={filters} />

From 81dec3345c8a540785759d5fa98c2a73c479ced9 Mon Sep 17 00:00:00 2001
From: Stephen <sirugh@users.noreply.github.com>
Date: Fri, 7 May 2021 10:08:04 -0500
Subject: [PATCH 37/39] remote extra whitespace

Co-authored-by: Tommy Wiebell <twiebell@adobe.com>
---
 .../RootComponents/Category/__tests__/categoryContent.spec.js   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/venia-ui/lib/RootComponents/Category/__tests__/categoryContent.spec.js b/packages/venia-ui/lib/RootComponents/Category/__tests__/categoryContent.spec.js
index 0b8520aaff..1903381693 100644
--- a/packages/venia-ui/lib/RootComponents/Category/__tests__/categoryContent.spec.js
+++ b/packages/venia-ui/lib/RootComponents/Category/__tests__/categoryContent.spec.js
@@ -84,7 +84,7 @@ test('renders empty page', () => {
     expect(instance.toJSON()).toMatchSnapshot();
 });
 
-test('renders loading indicator if no data and  loading', () => {
+test('renders loading indicator if no data and loading', () => {
     const props = {
         ...defaultProps,
         isLoading: true

From 9aad9453ecd7e80bad941405a85df3ea278530fd Mon Sep 17 00:00:00 2001
From: sirugh <rugh@adobe.com>
Date: Fri, 7 May 2021 13:42:38 -0500
Subject: [PATCH 38/39] whitespace caused rename

Signed-off-by: sirugh <rugh@adobe.com>
---
 .../__tests__/__snapshots__/categoryContent.spec.js.snap        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/venia-ui/lib/RootComponents/Category/__tests__/__snapshots__/categoryContent.spec.js.snap b/packages/venia-ui/lib/RootComponents/Category/__tests__/__snapshots__/categoryContent.spec.js.snap
index 847c35f0dc..d1a39988b5 100644
--- a/packages/venia-ui/lib/RootComponents/Category/__tests__/__snapshots__/categoryContent.spec.js.snap
+++ b/packages/venia-ui/lib/RootComponents/Category/__tests__/__snapshots__/categoryContent.spec.js.snap
@@ -157,7 +157,7 @@ Array [
 ]
 `;
 
-exports[`renders loading indicator if no data and  loading 1`] = `
+exports[`renders loading indicator if no data and loading 1`] = `
 Array [
   <Breadcrumbs
     categoryId={42}

From 3551640561940aa91477405253e02533825a53ac Mon Sep 17 00:00:00 2001
From: sirugh <rugh@adobe.com>
Date: Fri, 7 May 2021 16:30:16 -0500
Subject: [PATCH 39/39] Only render sort button if there are products

Signed-off-by: sirugh <rugh@adobe.com>
---
 .../categoryContent.spec.js.snap              | 97 ++++++++++++-------
 .../__tests__/categoryContent.spec.js         |  8 +-
 .../Category/categoryContent.js               |  7 +-
 .../lib/components/SearchPage/searchPage.js   |  2 +-
 4 files changed, 70 insertions(+), 44 deletions(-)

diff --git a/packages/venia-ui/lib/RootComponents/Category/__tests__/__snapshots__/categoryContent.spec.js.snap b/packages/venia-ui/lib/RootComponents/Category/__tests__/__snapshots__/categoryContent.spec.js.snap
index d1a39988b5..f19045737d 100644
--- a/packages/venia-ui/lib/RootComponents/Category/__tests__/__snapshots__/categoryContent.spec.js.snap
+++ b/packages/venia-ui/lib/RootComponents/Category/__tests__/__snapshots__/categoryContent.spec.js.snap
@@ -20,6 +20,35 @@ Array [
     </h1>
     <div
       className="headerButtons"
+    >
+      <div
+        className="root"
+      >
+        <button
+          className="root_lowPriority"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <span
+            className="content"
+          >
+            <mock-FormattedMessage
+              defaultMessage="Sort"
+              id="productSort.sortButton"
+            />
+          </span>
+        </button>
+      </div>
+    </div>
+    <SortedByContainer
+      currentSort={
+        Object {
+          "sortAttribute": "",
+          "sortDirection": "",
+          "sortText": "",
+        }
+      }
     />
     <section
       className="gallery"
@@ -279,6 +308,35 @@ Array [
     </h1>
     <div
       className="headerButtons"
+    >
+      <div
+        className="root"
+      >
+        <button
+          className="root_lowPriority"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <span
+            className="content"
+          >
+            <mock-FormattedMessage
+              defaultMessage="Sort"
+              id="productSort.sortButton"
+            />
+          </span>
+        </button>
+      </div>
+    </div>
+    <SortedByContainer
+      currentSort={
+        Object {
+          "sortAttribute": "",
+          "sortDirection": "",
+          "sortText": "",
+        }
+      }
     />
     <section
       className="gallery"
@@ -302,7 +360,7 @@ Array [
 ]
 `;
 
-exports[`sort button/container does not render if there are no filters 1`] = `
+exports[`sort button/container does not render if there are no products 1`] = `
 Array [
   <Breadcrumbs
     categoryId={42}
@@ -323,29 +381,14 @@ Array [
     <div
       className="headerButtons"
     />
-    <section
-      className="gallery"
-    >
-      <Gallery
-        items={
-          Object {
-            "id": 1,
-          }
-        }
-      />
-    </section>
-    <div
-      className="pagination"
-    >
-      <Pagination
-        pageControl={Object {}}
-      />
-    </div>
+    <NoProductsFound
+      categoryId={42}
+    />
   </article>,
 ]
 `;
 
-exports[`sort button/container renders when there are filters 1`] = `
+exports[`sort button/container renders when there are products 1`] = `
 Array [
   <Breadcrumbs
     categoryId={42}
@@ -366,13 +409,6 @@ Array [
     <div
       className="headerButtons"
     >
-      <FilterModalOpenButton
-        filters={
-          Array [
-            Object {},
-          ]
-        }
-      />
       <div
         className="root"
       >
@@ -420,13 +456,6 @@ Array [
         pageControl={Object {}}
       />
     </div>
-    <require('../../components/FilterModal')
-      filters={
-        Array [
-          Object {},
-        ]
-      }
-    />
   </article>,
 ]
 `;
diff --git a/packages/venia-ui/lib/RootComponents/Category/__tests__/categoryContent.spec.js b/packages/venia-ui/lib/RootComponents/Category/__tests__/categoryContent.spec.js
index 1903381693..76fac18f73 100644
--- a/packages/venia-ui/lib/RootComponents/Category/__tests__/categoryContent.spec.js
+++ b/packages/venia-ui/lib/RootComponents/Category/__tests__/categoryContent.spec.js
@@ -119,19 +119,19 @@ describe('filter button/modal', () => {
 });
 
 describe('sort button/container', () => {
-    test('does not render if there are no filters', () => {
+    test('does not render if there are no products', () => {
         useCategoryContent.mockReturnValueOnce({
             ...talonProps,
-            filters: []
+            totalPagesFromData: 0
         });
         const tree = createTestInstance(<CategoryContent {...defaultProps} />);
         expect(tree.toJSON()).toMatchSnapshot();
     });
 
-    test('renders when there are filters', () => {
+    test('renders when there are products', () => {
         useCategoryContent.mockReturnValueOnce({
             ...talonProps,
-            filters: [{}]
+            totalPagesFromData: 1
         });
         const tree = createTestInstance(<CategoryContent {...defaultProps} />);
         expect(tree.toJSON()).toMatchSnapshot();
diff --git a/packages/venia-ui/lib/RootComponents/Category/categoryContent.js b/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
index 3e6d7862a8..ce2bac96d1 100644
--- a/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
+++ b/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
@@ -46,11 +46,8 @@ const CategoryContent = props => {
 
     const shouldShowFilterButtons = filters && filters.length;
 
-    // On the category page, we can show sort buttons whenever filter buttons
-    // are rendered unlike on search where we hide sort if there are no
-    // products. If there are no products on the category page, then this will
-    // be false as there won't be filters.
-    const shouldShowSortButtons = shouldShowFilterButtons;
+    // If there are no products we can hide the sort button.
+    const shouldShowSortButtons = totalPagesFromData;
 
     const maybeFilterButtons = shouldShowFilterButtons ? (
         <FilterModalOpenButton filters={filters} />
diff --git a/packages/venia-ui/lib/components/SearchPage/searchPage.js b/packages/venia-ui/lib/components/SearchPage/searchPage.js
index ebfd95e290..7ac40f2d94 100644
--- a/packages/venia-ui/lib/components/SearchPage/searchPage.js
+++ b/packages/venia-ui/lib/components/SearchPage/searchPage.js
@@ -89,7 +89,7 @@ const SearchPage = props => {
 
     const shouldShowFilterButtons = filters && filters.length;
 
-    // On the search page, if there are no products we can hide the sort buttons
+    // If there are no products we can hide the sort button.
     const shouldShowSortButtons = productsCount;
 
     const maybeFilterButtons = shouldShowFilterButtons ? (