@graphcommerce/magento-search 10.0.0-canary.67 → 10.0.0-canary.72

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/components/CategorySearchResult/CategorySearchResult.tsx +13 -7
  3. package/components/NoSearchResults/NoSearchResults.tsx +4 -4
  4. package/components/ProductFiltersPro/SearchField.tsx +5 -5
  5. package/components/SearchButton/SearchButton.tsx +21 -12
  6. package/components/SearchDivider/SearchDivider.tsx +1 -1
  7. package/components/SearchLink/SearchLink.tsx +5 -7
  8. package/package.json +13 -13
  9. package/utils/productListApplySearchDefaults.ts +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # Change Log
2
2
 
3
+ ## 10.0.0-canary.72
4
+
5
+ ## 10.0.0-canary.71
6
+
7
+ ## 10.0.0-canary.70
8
+
9
+ ### Major Changes
10
+
11
+ - [#2565](https://github.com/graphcommerce-org/graphcommerce/pull/2565) [`c96dfcd`](https://github.com/graphcommerce-org/graphcommerce/commit/c96dfcdca981baca387c270ad9e2b9515cdd00cc) - Updated to Apollo Client 4 ([@paales](https://github.com/paales))
12
+
13
+ ## 10.0.0-canary.69
14
+
15
+ ## 10.0.0-canary.68
16
+
17
+ ### Major Changes
18
+
19
+ - [#2557](https://github.com/graphcommerce-org/graphcommerce/pull/2557) [`ceaadd8`](https://github.com/graphcommerce-org/graphcommerce/commit/ceaadd87f0648982a068a3b07b1fa149c9127f49) - ## Material UI v5 → v7 Migration
20
+
21
+ This release upgrades Material UI from v5 to v7 with full CSS variables support. ([@paales](https://github.com/paales))
22
+
3
23
  ## 10.0.0-canary.67
4
24
 
5
25
  ## 10.0.0-canary.66
package/components/CategorySearchResult/CategorySearchResult.tsx CHANGED
@@ -1,4 +1,10 @@
1
- import { extendableComponent, Highlight, iconChevronRight, IconSvg } from '@graphcommerce/next-ui'
1
+ import {
2
+ extendableComponent,
3
+ Highlight,
4
+ iconChevronRight,
5
+ IconSvg,
6
+ sxx,
7
+ } from '@graphcommerce/next-ui'
2
8
  import type { SxProps, Theme } from '@mui/material'
3
9
  import { Button } from '@mui/material'
4
10
  import React from 'react'
@@ -23,9 +29,9 @@ export function CategorySearchResult(props: CategorySearchResultProps) {
23
29
  variant='pill'
24
30
  className={classes.root}
25
31
  endIcon={<IconSvg src={iconChevronRight} size='small' />}
26
- sx={[
32
+ sx={sxx(
27
33
  (theme) => ({
28
- background: theme.palette.background.default,
34
+ background: theme.vars.palette.background.default,
29
35
  padding: `${theme.spacings.xs} 18px ${theme.spacings.xs} 14px`,
30
36
  display: 'flex',
31
37
  justifyContent: 'space-between',
@@ -33,17 +39,17 @@ export function CategorySearchResult(props: CategorySearchResultProps) {
33
39
  maxWidth: 'unset',
34
40
  borderRadius: '0',
35
41
  '&:not(&:last-of-type)': {
36
- borderBottom: `1px solid ${theme.palette.divider}`,
42
+ borderBottom: `1px solid ${theme.vars.palette.divider}`,
37
43
  },
38
44
  '&:focus': {
39
45
  boxShadow: 'none',
40
46
  },
41
47
  '&:hover': {
42
- background: theme.palette.background.paper,
48
+ background: theme.vars.palette.background.paper,
43
49
  },
44
50
  }),
45
- ...(Array.isArray(sx) ? sx : [sx]),
46
- ]}
51
+ sx,
52
+ )}
47
53
  >
48
54
  <div>
49
55
  {catProps?.breadcrumbs?.map((breadcrumb, index) => (
package/components/NoSearchResults/NoSearchResults.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { extendableComponent } from '@graphcommerce/next-ui'
1
+ import { extendableComponent, sxx } from '@graphcommerce/next-ui'
2
2
  import { Trans } from '@lingui/react/macro'
3
3
  import type { SxProps, Theme } from '@mui/material'
4
4
  import { Box, Typography } from '@mui/material'
@@ -19,14 +19,14 @@ export function NoSearchResults(props: NoSearchResultsProps) {
19
19
  return (
20
20
  <Box
21
21
  className={classes.root}
22
- sx={[
22
+ sx={sxx(
23
23
  (theme) => ({
24
24
  marginTop: theme.spacings.md,
25
25
  marginBottom: theme.spacings.sm,
26
26
  textAlign: 'center',
27
27
  }),
28
- ...(Array.isArray(sx) ? sx : [sx]),
29
- ]}
28
+ sx,
29
+ )}
30
30
  >
31
31
  <Typography variant='h5' align='center'>
32
32
  <Trans>We couldn't find any products.</Trans>
package/components/ProductFiltersPro/SearchField.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { iconSearch, IconSvg, showPageLoadIndicator } from '@graphcommerce/next-ui'
1
+ import { iconSearch, IconSvg, showPageLoadIndicator, sxx } from '@graphcommerce/next-ui'
2
2
  import type { FabProps } from '@mui/material'
3
3
  import { Fab } from '@mui/material'
4
4
  import dynamic from 'next/dynamic'
@@ -53,10 +53,10 @@ export function SearchField(props: SearchFieldProps) {
53
53
  color='inherit'
54
54
  size='large'
55
55
  {...fab}
56
- sx={[
57
- { display: { xs: visible ? 'none' : 'inline-flex' } },
58
- ...(Array.isArray(fab?.sx) ? fab.sx : [fab?.sx]),
59
- ]}
56
+ sx={sxx(
57
+ visible ? { display: { xs: 'none' } } : { display: { xs: 'inline-flex' } },
58
+ fab?.sx,
59
+ )}
60
60
  >
61
61
  <IconSvg src={iconSearch} size='large' />
62
62
  </Fab>
package/components/SearchButton/SearchButton.tsx CHANGED
@@ -1,4 +1,10 @@
1
- import { extendableComponent, iconSearch, IconSvg, responsiveVal } from '@graphcommerce/next-ui'
1
+ import {
2
+ extendableComponent,
3
+ iconSearch,
4
+ IconSvg,
5
+ responsiveVal,
6
+ sxx,
7
+ } from '@graphcommerce/next-ui'
2
8
  import { Trans } from '@lingui/react/macro'
3
9
  // eslint-disable-next-line @typescript-eslint/no-restricted-imports
4
10
  import type { TextFieldProps } from '@mui/material'
@@ -26,20 +32,13 @@ export function SearchButton(props: SearchButtonProps) {
26
32
  className={classes.root}
27
33
  label={label ?? <Trans>Search...</Trans>}
28
34
  id='search-input'
29
- InputLabelProps={{ shrink: false }}
30
- InputProps={{
31
- readOnly: true,
32
- endAdornment: <IconSvg src={iconSearch} size='medium' />,
33
- classes: { root: classes.inputRoot },
34
- ...InputProps,
35
- }}
36
35
  {...textFieldProps}
37
- sx={[
36
+ sx={sxx(
38
37
  (theme) => ({
39
38
  marginRight: theme.spacings.xxs,
40
39
  width: responsiveVal(64, 172),
41
40
  '& fieldset': {
42
- border: `1px solid ${theme.palette.divider}`,
41
+ border: `1px solid ${theme.vars.palette.divider}`,
43
42
  },
44
43
  [theme.breakpoints.down('md')]: {
45
44
  width: '100%',
@@ -50,8 +49,18 @@ export function SearchButton(props: SearchButtonProps) {
50
49
  marginRight: 0,
51
50
  },
52
51
  }),
53
- ...(Array.isArray(sx) ? sx : [sx]),
54
- ]}
52
+ sx,
53
+ )}
54
+ slotProps={{
55
+ input: {
56
+ readOnly: true,
57
+ endAdornment: <IconSvg src={iconSearch} size='medium' />,
58
+ classes: { root: classes.inputRoot },
59
+ ...InputProps,
60
+ },
61
+
62
+ inputLabel: { shrink: false },
63
+ }}
55
64
  />
56
65
  )
57
66
  }
package/components/SearchDivider/SearchDivider.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import { styled } from '@mui/material'
2
2
 
3
3
  export const SearchDivider = styled('div', { name: 'SearchDivider' })(({ theme }) => ({
4
- borderBottom: `1px solid ${theme.palette.divider}`,
4
+ borderBottom: `1px solid ${theme.vars.palette.divider}`,
5
5
  width: '100%',
6
6
  marginTop: theme.spacings.md,
7
7
  marginBottom: theme.spacings.md,
package/components/SearchLink/SearchLink.tsx CHANGED
@@ -3,6 +3,7 @@ import {
3
3
  iconSearch,
4
4
  IconSvg,
5
5
  responsiveVal,
6
+ sxx,
6
7
  useFabSize,
7
8
  useIconSvgSize,
8
9
  } from '@graphcommerce/next-ui'
@@ -59,7 +60,7 @@ export function SearchLink(props: SearchLinkProps) {
59
60
  onClick={handleClick}
60
61
  onKeyDown={handleKeyDown}
61
62
  tabIndex={0}
62
- sx={[
63
+ sx={sxx(
63
64
  (theme) => ({
64
65
  justifySelf: 'center',
65
66
  marginRight: `calc((${fabSize} - ${iconSize}) / 2)`,
@@ -79,8 +80,8 @@ export function SearchLink(props: SearchLinkProps) {
79
80
  borderColor: 'text.secondary',
80
81
  },
81
82
  }),
82
- ...(Array.isArray(sx) ? sx : [sx]),
83
- ]}
83
+ sx,
84
+ )}
84
85
  {...linkProps}
85
86
  >
86
87
  <div className={classes.text}>{children ?? <>&nbsp;</>}</div>
@@ -96,10 +97,7 @@ export function SearchLink(props: SearchLinkProps) {
96
97
  rel='noindex'
97
98
  size={size ?? 'large'}
98
99
  color={color ?? 'inherit'}
99
- sx={[
100
- { display: { xs: 'inline-flex', [breakpoint]: 'none' } },
101
- ...(Array.isArray(fabSx) ? fabSx : [fabSx]),
102
- ]}
100
+ sx={sxx({ display: { xs: 'inline-flex', [breakpoint]: 'none' } }, fabSx)}
103
101
  {...fabProps}
104
102
  >
105
103
  <IconSvg src={iconSearch} size='large' sx={{ color: 'text.primary' }} />
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@graphcommerce/magento-search",
3
3
  "homepage": "https://www.graphcommerce.org/",
4
4
  "repository": "github:graphcommerce-org/graphcommerce",
5
- "version": "10.0.0-canary.67",
5
+ "version": "10.0.0-canary.72",
6
6
  "sideEffects": false,
7
7
  "prettier": "@graphcommerce/prettier-config-pwa",
8
8
  "eslintConfig": {
@@ -12,21 +12,21 @@
12
12
  }
13
13
  },
14
14
  "peerDependencies": {
15
- "@graphcommerce/ecommerce-ui": "^10.0.0-canary.67",
16
- "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.67",
17
- "@graphcommerce/framer-utils": "^10.0.0-canary.67",
18
- "@graphcommerce/graphql": "^10.0.0-canary.67",
19
- "@graphcommerce/image": "^10.0.0-canary.67",
20
- "@graphcommerce/magento-product": "^10.0.0-canary.67",
21
- "@graphcommerce/magento-store": "^10.0.0-canary.67",
22
- "@graphcommerce/next-ui": "^10.0.0-canary.67",
23
- "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.67",
24
- "@graphcommerce/react-hook-form": "^10.0.0-canary.67",
25
- "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.67",
15
+ "@graphcommerce/ecommerce-ui": "^10.0.0-canary.72",
16
+ "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.72",
17
+ "@graphcommerce/framer-utils": "^10.0.0-canary.72",
18
+ "@graphcommerce/graphql": "^10.0.0-canary.72",
19
+ "@graphcommerce/image": "^10.0.0-canary.72",
20
+ "@graphcommerce/magento-product": "^10.0.0-canary.72",
21
+ "@graphcommerce/magento-store": "^10.0.0-canary.72",
22
+ "@graphcommerce/next-ui": "^10.0.0-canary.72",
23
+ "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.72",
24
+ "@graphcommerce/react-hook-form": "^10.0.0-canary.72",
25
+ "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.72",
26
26
  "@lingui/core": "^5",
27
27
  "@lingui/macro": "^5",
28
28
  "@lingui/react": "^5",
29
- "@mui/material": "^5.10.16",
29
+ "@mui/material": "^7.0.0",
30
30
  "framer-motion": "*",
31
31
  "next": "*",
32
32
  "react": "^19.2.0",
package/utils/productListApplySearchDefaults.ts CHANGED
@@ -27,16 +27,16 @@ export function useProductListApplySearchDefaults(
27
27
 
28
28
  export function productListApplySearchDefaults(
29
29
  params: ProductListParams,
30
- conf: StoreConfigQuery,
30
+ conf: StoreConfigQuery | undefined,
31
31
  ): ProductListQueryVariables
32
32
  export function productListApplySearchDefaults(
33
33
  params: ProductListParams | undefined,
34
- conf: StoreConfigQuery,
34
+ conf: StoreConfigQuery | undefined,
35
35
  ): ProductListQueryVariables | undefined {
36
36
  if (!params) return params
37
37
  const newParams = cloneDeep(params)
38
38
 
39
- if (!newParams.pageSize) newParams.pageSize = conf.storeConfig?.grid_per_page ?? 12
39
+ if (!newParams.pageSize) newParams.pageSize = conf?.storeConfig?.grid_per_page ?? 12
40
40
 
41
41
  if (Object.keys(newParams.sort).length === 0) {
42
42
  newParams.sort = { relevance: 'DESC' }