@salesforce/retail-react-app 4.0.0 → 4.1.0-nightly-20240812080155

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## v4.1.0-dev (Aug 8, 2024)
+
+### Bug Fixes
+- The unused `njwt` npm package had a security vulnerability, since it was unused, the package has been dropped
+
+### Accessibility Improvements
+- A11y: Fix search bar header element focus order [#1969](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1969)
+
 ## v4.0.0 (Aug 7, 2024)
 
 ### New Features

package/app/components/header/index.jsx

@@ -48,9 +48,39 @@ import {
 import {navLinks, messages} from '@salesforce/retail-react-app/app/pages/account/constant'
 import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation'
 import LoadingSpinner from '@salesforce/retail-react-app/app/components/loading-spinner'
+import {HideOnDesktop, HideOnMobile} from '@salesforce/retail-react-app/app/components/responsive'
 import {isHydrated, noop} from '@salesforce/retail-react-app/app/utils/utils'
 import {STORE_LOCATOR_IS_ENABLED} from '@salesforce/retail-react-app/app/constants'
 const IconButtonWithRegistration = withRegistration(IconButton)
+
+/**
+ * Search bar for the header.
+ *
+ * The search bar is a simple input field with a search icon.
+ * It can be used to search for products or navigate to a
+ * specific page.
+ *
+ * @param props {object} the component props
+ * @returns {Element} the search bar element
+ */
+const SearchBar = (props) => {
+    const styles = useMultiStyleConfig('Header')
+    const intl = useIntl()
+    const placeholder = intl.formatMessage({
+        id: 'header.field.placeholder.search_for_products',
+        defaultMessage: 'Search for products...'
+    })
+    return (
+        <Box {...styles.searchContainer}>
+            <Search
+                aria-label={placeholder}
+                placeholder={placeholder}
+                {...styles.search}
+                {...props}
+            />
+        </Box>
+    )
+}
 /**
  * The header is the main source for accessing
  * navigation, search, basket, and other
@@ -125,11 +155,6 @@ const Header = ({
         }
     }
 
-    const placeholder = intl.formatMessage({
-        id: 'header.field.placeholder.search_for_products',
-        defaultMessage: 'Search for products...'
-    })
-
     return (
         <Box {...styles.container} {...props}>
             <Box {...styles.content}>
@@ -161,13 +186,9 @@ const Header = ({
                         onClick={onLogoClick}
                     />
                     <Box {...styles.bodyContainer}>{children}</Box>
-                    <Box {...styles.searchContainer}>
-                        <Search
-                            aria-label={placeholder}
-                            placeholder={placeholder}
-                            {...styles.search}
-                        />
-                    </Box>
+                    <HideOnMobile>
+                        <SearchBar />
+                    </HideOnMobile>
                     <IconButtonWithRegistration
                         icon={<AccountIcon />}
                         aria-label={intl.formatMessage({
@@ -318,6 +339,9 @@ const Header = ({
                         {...styles.icons}
                         onClick={onMyCartClick}
                     />
+                    <HideOnDesktop display={{base: 'contents', lg: 'none'}}>
+                        <SearchBar />
+                    </HideOnDesktop>
                 </Flex>
             </Box>
         </Box>

package/app/components/responsive/index.jsx

@@ -11,19 +11,29 @@ import {Box} from '@salesforce/retail-react-app/app/components/shared/ui'
 /**
  * Render the children in the DOM but visually hide them on desktop
  * @param children - isomorphic components used within a responsive design
+ * @param rest - additional props to be passed to the Box component
  */
-export const HideOnDesktop = ({children}) => (
-    <Box display={{base: 'block', lg: 'none'}}>{children}</Box>
+export const HideOnDesktop = ({children, ...rest}) => (
+    <Box display={{base: 'block', lg: 'none'}} {...rest}>
+        {children}
+    </Box>
 )
-HideOnDesktop.propTypes = {children: PropTypes.node}
+HideOnDesktop.propTypes = {
+    children: PropTypes.node
+}
 
 /**
  * Render the children in the DOM but visually hide them on mobile
  * @param children - isomorphic components used within a responsive design
+ * @param rest - additional props to be passed to the Box component
  */
-export const HideOnMobile = ({children}) => (
-    <Box display={{base: 'none', lg: 'block'}}>{children}</Box>
+export const HideOnMobile = ({children, ...rest}) => (
+    <Box display={{base: 'none', lg: 'block'}} {...rest}>
+        {children}
+    </Box>
 )
-HideOnMobile.propTypes = {children: PropTypes.node}
+HideOnMobile.propTypes = {
+    children: PropTypes.node
+}
 
 export default {HideOnMobile, HideOnDesktop}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/retail-react-app",
-  "version": "4.0.0",
+  "version": "4.1.0-nightly-20240812080155",
   "license": "See license in LICENSE",
   "author": "cc-pwa-kit@salesforce.com",
   "ccExtensibility": {
@@ -45,10 +45,10 @@
     "@lhci/cli": "^0.11.0",
     "@loadable/component": "^5.15.3",
     "@peculiar/webcrypto": "^1.4.2",
-    "@salesforce/commerce-sdk-react": "3.0.0",
-    "@salesforce/pwa-kit-dev": "3.7.0",
-    "@salesforce/pwa-kit-react-sdk": "3.7.0",
-    "@salesforce/pwa-kit-runtime": "3.7.0",
+    "@salesforce/commerce-sdk-react": "3.1.0-nightly-20240812080155",
+    "@salesforce/pwa-kit-dev": "3.8.0-nightly-20240812080155",
+    "@salesforce/pwa-kit-react-sdk": "3.8.0-nightly-20240812080155",
+    "@salesforce/pwa-kit-runtime": "3.8.0-nightly-20240812080155",
     "@tanstack/react-query": "^4.28.0",
     "@tanstack/react-query-devtools": "^4.29.1",
     "@testing-library/dom": "^9.0.1",
@@ -71,7 +71,6 @@
     "lodash": "^4.17.21",
     "msw": "^1.2.1",
     "nanoid": "^3.3.4",
-    "njwt": "^1.2.0",
     "prop-types": "^15.8.1",
     "query-string": "^7.1.3",
     "raf": "^3.4.1",
@@ -100,5 +99,5 @@
       "maxSize": "320 kB"
     }
   ],
-  "gitHead": "7a47e6b91a5a0edc69c999115345b9bd5154935f"
+  "gitHead": "b47093bf6cc3a30ed04f11edd959baaf12939273"
 }