@riosst100/pwa-marketplace 1.8.0 → 1.8.2

package/src/overwrites/peregrine/lib/talons/MegaMenu/useMegaMenu.js

@@ -1,199 +1,199 @@
-import { useMemo, useState, useCallback, useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
-import { useInternalLink } from '../../hooks/useInternalLink';
-
-import { useQuery } from '@apollo/client';
-import { useEventListener } from '../../hooks/useEventListener';
-
-import mergeOperations from '../../util/shallowMerge';
-import DEFAULT_OPERATIONS from './megaMenu.gql';
-
-/**
- * The useMegaMenu talon complements the MegaMenu component.
- *
- * @param {Object} props
- * @param {*} props.operations GraphQL operations used by talons
- * @param {React.RefObject} props.mainNavRef Reference to main navigation DOM node
- *
- * @return {MegaMenuTalonProps}
- */
-export const useMegaMenu = (props = {}) => {
-    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
-    const { getMegaMenuQuery, getStoreConfigQuery } = operations;
-
-    const location = useLocation();
-    const [activeCategoryId, setActiveCategoryId] = useState(null);
-    const [subMenuState, setSubMenuState] = useState(false);
-    const [disableFocus, setDisableFocus] = useState(false);
-
-    const { data: storeConfigData } = useQuery(getStoreConfigQuery, {
-        fetchPolicy: 'cache-and-network'
-    });
-
-    const { data } = useQuery(getMegaMenuQuery, {
-        fetchPolicy: 'cache-and-network',
-        nextFetchPolicy: 'cache-first'
-    });
-
-    const categoryUrlSuffix = useMemo(() => {
-        if (storeConfigData) {
-            return storeConfigData.storeConfig.category_url_suffix;
-        }
-    }, [storeConfigData]);
-
-    /**
-     * Check if category should be visible on the storefront.
-     *
-     * @param {MegaMenuCategory} category
-     * @returns {boolean}
-     */
-    const shouldRenderMegaMenuItem = category => {
-        return !!category.include_in_menu;
-    };
-
-    /**
-     * Check if category is the active category based on the current location.
-     *
-     * @param {MegaMenuCategory} category
-     * @returns {boolean}
-     */
-
-    const isActive = useCallback(
-        ({ url_path }) => {
-            if (!url_path) return false;
-
-            const categoryUrlPath = `/${url_path}${categoryUrlSuffix || ''}`;
-
-            return location.pathname === categoryUrlPath;
-        },
-        [location.pathname, categoryUrlSuffix]
-    );
-
-    /**
-     * Recursively map data returned by GraphQL query.
-     *
-     * @param {MegaMenuCategory} category
-     * @param {array} - path from the given category to the first level category
-     * @param {boolean} isRoot - describes is category a root category
-     * @return {MegaMenuCategory}
-     */
-    const processData = useCallback(
-        (category, path = [], isRoot = true) => {
-            if (!category) {
-                return;
-            }
-
-            const megaMenuCategory = Object.assign({}, category);
-
-            if (!isRoot) {
-                megaMenuCategory.path = [...path, category.uid];
-            }
-
-            megaMenuCategory.isActive = isActive(megaMenuCategory);
-
-            if (megaMenuCategory.children) {
-                megaMenuCategory.children = [...megaMenuCategory.children]
-                    .filter(category => shouldRenderMegaMenuItem(category))
-                    .sort((a, b) => (a.position > b.position ? 1 : -1))
-                    .map(child =>
-                        processData(child, megaMenuCategory.path, false)
-                    );
-            }
-
-            return megaMenuCategory;
-        },
-        [isActive]
-    );
-
-    const megaMenuData = useMemo(() => {
-        return data ? processData(data.categoryList[0]) : {};
-    }, [data, processData]);
-
-    const findActiveCategory = useCallback(
-        (pathname, category) => {
-            if (isActive(category)) {
-                return category;
-            }
-
-            if (category.children) {
-                return category.children.find(category =>
-                    findActiveCategory(pathname, category)
-                );
-            }
-        },
-        [isActive]
-    );
-
-    const handleClickOutside = e => {
-        if (!props.mainNavRef.current.contains(e.target)) {
-            setSubMenuState(false);
-            setDisableFocus(true);
-        }
-    };
-
-    useEventListener(globalThis, 'keydown', handleClickOutside);
-
-    const handleSubMenuFocus = useCallback(() => {
-        setSubMenuState(true);
-    }, [setSubMenuState]);
-
-    useEffect(() => {
-        const activeCategory = findActiveCategory(
-            location.pathname,
-            megaMenuData
-        );
-
-        if (activeCategory) {
-            setActiveCategoryId(activeCategory.path[0]);
-        } else {
-            setActiveCategoryId(null);
-        }
-    }, [findActiveCategory, location.pathname, megaMenuData]);
-
-    /**
-     * Sets next root component to show proper loading effect
-     *
-     * @returns {void}
-     */
-    const { setShimmerType } = useInternalLink('category');
-
-    return {
-        megaMenuData,
-        activeCategoryId,
-        categoryUrlSuffix,
-        handleClickOutside,
-        subMenuState,
-        disableFocus,
-        handleSubMenuFocus,
-        handleNavigate: setShimmerType
-    };
-};
-
-/** JSDocs type definitions */
-
-/**
- * @typedef {Object} MegaMenuTalonProps
- *
- * @property {MegaMenuCategory} megaMenuData - The Object with categories contains only categories
- *                                             with the include_in_menu = 1 flag. The categories are sorted
- *                                             based on the field position.
- * @property {String} activeCategoryId returns the currently selected category uid.
- * @property {String} categoryUrlSuffix  store's category url suffix to construct category URL
- * @property {Function} handleClickOutside function to handle mouse/key events.
- * @property {Boolean} subMenuState maintaining sub-menu open/close state
- * @property {Boolean} disableFocus state to disable focus
- * @property {Function} handleSubMenuFocus toggle function to handle sub-menu focus
- * @property {function} handleNavigate - callback to fire on link click
- */
-
-/**
- * Object type returned by the {@link useMegaMenu} talon.
- * @typedef {Object} MegaMenuCategory
- *
- * @property {String} uid - uid of the category
- * @property {int} include_in_menu - describes if category should be included in menu
- * @property {String} name - name of the category
- * @property {int} position - value used for sorting
- * @property {String} url_path - URL path for a category
- * @property {MegaMenuCategory} children - child category
- */
+import { useMemo, useState, useCallback, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useInternalLink } from '../../hooks/useInternalLink';
+
+import { useQuery } from '@apollo/client';
+import { useEventListener } from '../../hooks/useEventListener';
+
+import mergeOperations from '../../util/shallowMerge';
+import DEFAULT_OPERATIONS from './megaMenu.gql';
+
+/**
+ * The useMegaMenu talon complements the MegaMenu component.
+ *
+ * @param {Object} props
+ * @param {*} props.operations GraphQL operations used by talons
+ * @param {React.RefObject} props.mainNavRef Reference to main navigation DOM node
+ *
+ * @return {MegaMenuTalonProps}
+ */
+export const useMegaMenu = (props = {}) => {
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { getMegaMenuQuery, getStoreConfigQuery } = operations;
+
+    const location = useLocation();
+    const [activeCategoryId, setActiveCategoryId] = useState(null);
+    const [subMenuState, setSubMenuState] = useState(false);
+    const [disableFocus, setDisableFocus] = useState(false);
+
+    const { data: storeConfigData } = useQuery(getStoreConfigQuery, {
+        fetchPolicy: 'cache-and-network'
+    });
+
+    const { data } = useQuery(getMegaMenuQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const categoryUrlSuffix = useMemo(() => {
+        if (storeConfigData) {
+            return storeConfigData.storeConfig.category_url_suffix;
+        }
+    }, [storeConfigData]);
+
+    /**
+     * Check if category should be visible on the storefront.
+     *
+     * @param {MegaMenuCategory} category
+     * @returns {boolean}
+     */
+    const shouldRenderMegaMenuItem = category => {
+        return !!category.include_in_menu;
+    };
+
+    /**
+     * Check if category is the active category based on the current location.
+     *
+     * @param {MegaMenuCategory} category
+     * @returns {boolean}
+     */
+
+    const isActive = useCallback(
+        ({ url_path }) => {
+            if (!url_path) return false;
+
+            const categoryUrlPath = `/${url_path}${categoryUrlSuffix || ''}`;
+
+            return location.pathname === categoryUrlPath;
+        },
+        [location.pathname, categoryUrlSuffix]
+    );
+
+    /**
+     * Recursively map data returned by GraphQL query.
+     *
+     * @param {MegaMenuCategory} category
+     * @param {array} - path from the given category to the first level category
+     * @param {boolean} isRoot - describes is category a root category
+     * @return {MegaMenuCategory}
+     */
+    const processData = useCallback(
+        (category, path = [], isRoot = true) => {
+            if (!category) {
+                return;
+            }
+
+            const megaMenuCategory = Object.assign({}, category);
+
+            if (!isRoot) {
+                megaMenuCategory.path = [...path, category.uid];
+            }
+
+            megaMenuCategory.isActive = isActive(megaMenuCategory);
+
+            if (megaMenuCategory.children) {
+                megaMenuCategory.children = [...megaMenuCategory.children]
+                    .filter(category => shouldRenderMegaMenuItem(category))
+                    .sort((a, b) => (a.position > b.position ? 1 : -1))
+                    .map(child =>
+                        processData(child, megaMenuCategory.path, false)
+                    );
+            }
+
+            return megaMenuCategory;
+        },
+        [isActive]
+    );
+
+    const megaMenuData = useMemo(() => {
+        return data ? processData(data.categoryList[0]) : {};
+    }, [data, processData]);
+
+    const findActiveCategory = useCallback(
+        (pathname, category) => {
+            if (isActive(category)) {
+                return category;
+            }
+
+            if (category.children) {
+                return category.children.find(category =>
+                    findActiveCategory(pathname, category)
+                );
+            }
+        },
+        [isActive]
+    );
+
+    const handleClickOutside = e => {
+        if (!props.mainNavRef.current.contains(e.target)) {
+            setSubMenuState(false);
+            setDisableFocus(true);
+        }
+    };
+
+    useEventListener(globalThis, 'keydown', handleClickOutside);
+
+    const handleSubMenuFocus = useCallback(() => {
+        setSubMenuState(true);
+    }, [setSubMenuState]);
+
+    useEffect(() => {
+        const activeCategory = findActiveCategory(
+            location.pathname,
+            megaMenuData
+        );
+
+        if (activeCategory) {
+            setActiveCategoryId(activeCategory.path[0]);
+        } else {
+            setActiveCategoryId(null);
+        }
+    }, [findActiveCategory, location.pathname, megaMenuData]);
+
+    /**
+     * Sets next root component to show proper loading effect
+     *
+     * @returns {void}
+     */
+    const { setShimmerType } = useInternalLink('category');
+
+    return {
+        megaMenuData,
+        activeCategoryId,
+        categoryUrlSuffix,
+        handleClickOutside,
+        subMenuState,
+        disableFocus,
+        handleSubMenuFocus,
+        handleNavigate: setShimmerType
+    };
+};
+
+/** JSDocs type definitions */
+
+/**
+ * @typedef {Object} MegaMenuTalonProps
+ *
+ * @property {MegaMenuCategory} megaMenuData - The Object with categories contains only categories
+ *                                             with the include_in_menu = 1 flag. The categories are sorted
+ *                                             based on the field position.
+ * @property {String} activeCategoryId returns the currently selected category uid.
+ * @property {String} categoryUrlSuffix  store's category url suffix to construct category URL
+ * @property {Function} handleClickOutside function to handle mouse/key events.
+ * @property {Boolean} subMenuState maintaining sub-menu open/close state
+ * @property {Boolean} disableFocus state to disable focus
+ * @property {Function} handleSubMenuFocus toggle function to handle sub-menu focus
+ * @property {function} handleNavigate - callback to fire on link click
+ */
+
+/**
+ * Object type returned by the {@link useMegaMenu} talon.
+ * @typedef {Object} MegaMenuCategory
+ *
+ * @property {String} uid - uid of the category
+ * @property {int} include_in_menu - describes if category should be included in menu
+ * @property {String} name - name of the category
+ * @property {int} position - value used for sorting
+ * @property {String} url_path - URL path for a category
+ * @property {MegaMenuCategory} children - child category
+ */

package/src/overwrites/peregrine/lib/talons/MegaMenu/useMegaMenuItem.js

@@ -1,66 +1,66 @@
-import { useCallback, useMemo, useState } from 'react';
-
-export const useMegaMenuItem = props => {
-    const { category, activeCategoryId, subMenuState, disableFocus } = props;
-
-    const [isFocused, setIsFocused] = useState(false);
-    const isActive = category.id === activeCategoryId;
-
-    const handleMenuItemFocus = useCallback(() => {
-        setIsFocused(true);
-    }, [setIsFocused]);
-
-    const handleCloseSubMenu = useCallback(() => {
-        setIsFocused(false);
-    }, [setIsFocused]);
-
-    const isMenuActive = useMemo(() => {
-        if (!isFocused) {
-            return false;
-        }
-        if (subMenuState) {
-            return true;
-        } else if (disableFocus) {
-            setIsFocused(false);
-        }
-        return false;
-    }, [isFocused, subMenuState, disableFocus]);
-
-    const handleKeyDown = useCallback(
-        event => {
-            const { key: pressedKey, shiftKey } = event;
-
-            // checking down arrow and spacebar
-            if (pressedKey === 'ArrowDown' || pressedKey === ' ') {
-                event.preventDefault();
-                if (category.children.length || category.name == "Lego") {
-                    setIsFocused(true);
-                } else {
-                    setIsFocused(false);
-                }
-
-                return;
-            }
-
-            //checking up arrow or escape
-            if (pressedKey === 'ArrowUp' || pressedKey === 'Escape') {
-                setIsFocused(false);
-            }
-
-            //checking Tab with Shift
-            if (shiftKey && pressedKey === 'Tab') {
-                setIsFocused(false);
-            }
-        },
-        [category.children.length, category.name]
-    );
-
-    return {
-        isFocused,
-        isActive,
-        handleMenuItemFocus,
-        handleCloseSubMenu,
-        isMenuActive,
-        handleKeyDown
-    };
-};
+import { useCallback, useMemo, useState } from 'react';
+
+export const useMegaMenuItem = props => {
+    const { category, activeCategoryId, subMenuState, disableFocus } = props;
+
+    const [isFocused, setIsFocused] = useState(false);
+    const isActive = category.id === activeCategoryId;
+
+    const handleMenuItemFocus = useCallback(() => {
+        setIsFocused(true);
+    }, [setIsFocused]);
+
+    const handleCloseSubMenu = useCallback(() => {
+        setIsFocused(false);
+    }, [setIsFocused]);
+
+    const isMenuActive = useMemo(() => {
+        if (!isFocused) {
+            return false;
+        }
+        if (subMenuState) {
+            return true;
+        } else if (disableFocus) {
+            setIsFocused(false);
+        }
+        return false;
+    }, [isFocused, subMenuState, disableFocus]);
+
+    const handleKeyDown = useCallback(
+        event => {
+            const { key: pressedKey, shiftKey } = event;
+
+            // checking down arrow and spacebar
+            if (pressedKey === 'ArrowDown' || pressedKey === ' ') {
+                event.preventDefault();
+                if (category.children.length || category.name == "Lego") {
+                    setIsFocused(true);
+                } else {
+                    setIsFocused(false);
+                }
+
+                return;
+            }
+
+            //checking up arrow or escape
+            if (pressedKey === 'ArrowUp' || pressedKey === 'Escape') {
+                setIsFocused(false);
+            }
+
+            //checking Tab with Shift
+            if (shiftKey && pressedKey === 'Tab') {
+                setIsFocused(false);
+            }
+        },
+        [category.children.length, category.name]
+    );
+
+    return {
+        isFocused,
+        isActive,
+        handleMenuItemFocus,
+        handleCloseSubMenu,
+        isMenuActive,
+        handleKeyDown
+    };
+};

package/src/overwrites/peregrine/lib/talons/MegaMenu/useSubMenu.js

@@ -1,20 +1,20 @@
-import { useKeyboard } from 'react-aria';
-
-export const useSubMenu = props => {
-    const { isFocused, subMenuState, handleCloseSubMenu } = props;
-
-    const { keyboardProps } = useKeyboard({
-        onKeyDown: e => {
-            //checking for Tab without Shift
-            if (!e.shiftKey && e.key === 'Tab') {
-                e.target.addEventListener('blur', handleCloseSubMenu);
-            } else {
-                e.target.removeEventListener('blur', handleCloseSubMenu);
-            }
-        }
-    });
-
-    const isSubMenuActive = isFocused && subMenuState;
-
-    return { keyboardProps, isSubMenuActive };
-};
+import { useKeyboard } from 'react-aria';
+
+export const useSubMenu = props => {
+    const { isFocused, subMenuState, handleCloseSubMenu } = props;
+
+    const { keyboardProps } = useKeyboard({
+        onKeyDown: e => {
+            //checking for Tab without Shift
+            if (!e.shiftKey && e.key === 'Tab') {
+                e.target.addEventListener('blur', handleCloseSubMenu);
+            } else {
+                e.target.removeEventListener('blur', handleCloseSubMenu);
+            }
+        }
+    });
+
+    const isSubMenuActive = isFocused && subMenuState;
+
+    return { keyboardProps, isSubMenuActive };
+};