@graphcommerce/magento-search 10.0.0-canary.66 → 10.0.0-canary.68

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 (8) hide show
  1. package/CHANGELOG.md +10 -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
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # Change Log
2
2
 
3
+ ## 10.0.0-canary.68
4
+
5
+ ### Major Changes
6
+
7
+ - [#2557](https://github.com/graphcommerce-org/graphcommerce/pull/2557) [`ceaadd8`](https://github.com/graphcommerce-org/graphcommerce/commit/ceaadd87f0648982a068a3b07b1fa149c9127f49) - ## Material UI v5 → v7 Migration
8
+
9
+ This release upgrades Material UI from v5 to v7 with full CSS variables support. ([@paales](https://github.com/paales))
10
+
11
+ ## 10.0.0-canary.67
12
+
3
13
  ## 10.0.0-canary.66
4
14
 
5
15
  ## 10.0.0-canary.65
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.66",
5
+ "version": "10.0.0-canary.68",
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.66",
16
- "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.66",
17
- "@graphcommerce/framer-utils": "^10.0.0-canary.66",
18
- "@graphcommerce/graphql": "^10.0.0-canary.66",
19
- "@graphcommerce/image": "^10.0.0-canary.66",
20
- "@graphcommerce/magento-product": "^10.0.0-canary.66",
21
- "@graphcommerce/magento-store": "^10.0.0-canary.66",
22
- "@graphcommerce/next-ui": "^10.0.0-canary.66",
23
- "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.66",
24
- "@graphcommerce/react-hook-form": "^10.0.0-canary.66",
25
- "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.66",
15
+ "@graphcommerce/ecommerce-ui": "^10.0.0-canary.68",
16
+ "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.68",
17
+ "@graphcommerce/framer-utils": "^10.0.0-canary.68",
18
+ "@graphcommerce/graphql": "^10.0.0-canary.68",
19
+ "@graphcommerce/image": "^10.0.0-canary.68",
20
+ "@graphcommerce/magento-product": "^10.0.0-canary.68",
21
+ "@graphcommerce/magento-store": "^10.0.0-canary.68",
22
+ "@graphcommerce/next-ui": "^10.0.0-canary.68",
23
+ "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.68",
24
+ "@graphcommerce/react-hook-form": "^10.0.0-canary.68",
25
+ "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.68",
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",