@graphcommerce/next-ui 9.1.0-canary.43 → 9.1.0-canary.45

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 (5) hide show
  1. package/CHANGELOG.md +8 -10
  2. package/Intl/DateTimeFormat/DateTimeFormat.tsx +7 -2
  3. package/Intl/NumberFormat/NumberFormat.tsx +6 -2
  4. package/Intl/RelativeTimeFormat/RelativeTimeFormat.tsx +13 -2
  5. package/package.json +8 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # Change Log
2
2
 
3
+ ## 9.1.0-canary.45
4
+
5
+ ## 9.1.0-canary.44
6
+
7
+ ### Patch Changes
8
+
9
+ - [`b423879`](https://github.com/graphcommerce-org/graphcommerce/commit/b4238796f1f8cce62325e57d90cc7a84a921a0fa) - DateTimeFormat, NumberFormat and RelativeTimeFormat (and all derivatives) will now wrap all number parts in a span, so that individual parts can be styled properly. ([@paales](https://github.com/paales))
10
+
3
11
  ## 9.1.0-canary.43
4
12
 
5
13
  ## 9.1.0-canary.42
@@ -169,7 +177,6 @@
169
177
  ```
170
178
 
171
179
  When to use, replacement for:
172
-
173
180
  1. useMediaQuery: When you are now using useMediaQuery to conditionally render content for mobile or desktop. a. Is very slow as it has to wait for the JS to initialize on pageload. b. Can cause CLS problems if the useMediaQuery is used to render elements in the viewport. c. Can cause LCP issues if useMediaQuery is used to render the LCP element. d. Causes TBT problems as a component always needs to be rerendered. (And bad TBT can cause INP problems) e. HTML isn't present in the DOM, which can cause SEO issues.
174
181
  2. CSS Media query: When you are using CSS to show or hide content based on media queries. a. Causes TBT problems as both code paths need to be rendered. (And bad TBT can cause INP problems)
175
182
 
@@ -188,7 +195,6 @@
188
195
  ### Minor Changes
189
196
 
190
197
  - [#2216](https://github.com/graphcommerce-org/graphcommerce/pull/2216) [`74eb239`](https://github.com/graphcommerce-org/graphcommerce/commit/74eb2393a64988649178d59f53b33d41fecdd769) - Added Intl components, deprecated `useNumberFormat` and `useDateTimeFormatter`, and replaced usage sites. New components and hooks:
191
-
192
198
  - `<DisplayNames />` and `useIntlDisplayNames`
193
199
  - `<DateTimeFormat />`, `<DateFormat/>`, `<TimeFormat />` and `useIntlDateTimeFormat`
194
200
  - `<ListFormat />` and `useIntlListFormat`
@@ -429,7 +435,6 @@
429
435
  ### Minor Changes
430
436
 
431
437
  - [#1822](https://github.com/graphcommerce-org/graphcommerce/pull/1822) [`cc02c46e3`](https://github.com/graphcommerce-org/graphcommerce/commit/cc02c46e32c9a44a90789591f43d91ae234dac84) - Added Facebook Open Graph tags to product pages:
432
-
433
438
  - og:title
434
439
  - og:image
435
440
  - og:url
@@ -441,7 +446,6 @@
441
446
  - product:category ([@KMalkowski](https://github.com/KMalkowski))
442
447
 
443
448
  - [#1830](https://github.com/graphcommerce-org/graphcommerce/pull/1830) [`fafa76ba9`](https://github.com/graphcommerce-org/graphcommerce/commit/fafa76ba9e655739171abc553d309795c9d8e5c2) - Overlays now use an additional scroll container to handle vertical scroll, fixing:
444
-
445
449
  - Scrolling on desktop will not close the overlay when there is content to be scrolled
446
450
  - Scrolling will not snap to bottom / top when the content is barely scrollable
447
451
  - Dragging will only open or close the drawer, not something inbetween
@@ -509,7 +513,6 @@
509
513
  - [#1745](https://github.com/graphcommerce-org/graphcommerce/pull/1745) [`b1444b933`](https://github.com/graphcommerce-org/graphcommerce/commit/b1444b9336107d3ac111563f9b62a884f1b26a8d) - Bring password reset page more in line with standard forms, add missing translations. ([@github-actions](https://github.com/apps/github-actions))
510
514
 
511
515
  - [#1752](https://github.com/graphcommerce-org/graphcommerce/pull/1752) [`2a6a4d9ec`](https://github.com/graphcommerce-org/graphcommerce/commit/2a6a4d9ecfa1b58a66ba9b9d00016d6feda9aa95) - Updated dependencies to latest versions, except for nextjs; Solve tons of peer dependency issues.
512
-
513
516
  - Updated the @mui/material package
514
517
  - Removed dependencies on react-hook-form-mui and @playwright/test
515
518
  - Upgraded dependencies including type-fest and graphql-mesh
@@ -706,7 +709,6 @@
706
709
  - [#1610](https://github.com/graphcommerce-org/graphcommerce/pull/1610) [`bb94e7045`](https://github.com/graphcommerce-org/graphcommerce/commit/bb94e7045460cb671c45d612a0833731d7c20c30) Thanks [@mikekeehnen](https://github.com/mikekeehnen)! - Previously when the persisted selected value didn't exist in the list of ActionCard items, all items would be hidden. In this fix we set the hidden prop in the ActionCardList component, where we check if the value exists, if not, we display all items
707
710
 
708
711
  * [#1602](https://github.com/graphcommerce-org/graphcommerce/pull/1602) [`5f781a217`](https://github.com/graphcommerce-org/graphcommerce/commit/5f781a217ce63ed56bc1a9983487b04400a8a315) Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Default styles and layout fixes
709
-
710
712
  - Scaled icons and fonts down. Size in typography is now more gradual: https://graphcommerce.vercel.app/test/typography
711
713
  - Multiple accessibility fixes. Missing button/input labels, and fixed spacing issues resulting in high % appropriately sized tap targets
712
714
  - Replaced responsiveVal usage with better performaning breakpointVal where possible
@@ -816,7 +818,6 @@
816
818
  ### Minor Changes
817
819
 
818
820
  - [#1566](https://github.com/graphcommerce-org/graphcommerce/pull/1566) [`e167992df`](https://github.com/graphcommerce-org/graphcommerce/commit/e167992dfdc6964a392af719667f8a188626ab1b) Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Introduced `@graphcommerce/next-ui/navigation` component.
819
-
820
821
  - Navigation is always present in the DOM
821
822
  - Configurable in LayoutNavigation.tsx
822
823
  - Show categories directly, or nest them in a 'products' button
@@ -948,7 +949,6 @@
948
949
  ### Patch Changes
949
950
 
950
951
  - [#1509](https://github.com/graphcommerce-org/graphcommerce/pull/1509) [`0ab7c5465`](https://github.com/graphcommerce-org/graphcommerce/commit/0ab7c5465441cba9bf8cd185a6790ce2f443f4ed) Thanks [@paales](https://github.com/paales)! - SidebarGallery improvements (product page):
951
-
952
952
  - Prevent vertical scrolling
953
953
  - Disable zoom fab when there are no images
954
954
  - Hide scroller dots when there in only one image
@@ -1151,7 +1151,6 @@
1151
1151
  - [#1353](https://github.com/graphcommerce-org/graphcommerce/pull/1353) [`0e5ee7ba8`](https://github.com/graphcommerce-org/graphcommerce/commit/0e5ee7ba89698e5e711001e846ed182528060cba) Thanks [@paales](https://github.com/paales)! - Eslint: enable rules that were previously disabled and make fixes
1152
1152
 
1153
1153
  * [#1360](https://github.com/graphcommerce-org/graphcommerce/pull/1360) [`829b8690b`](https://github.com/graphcommerce-org/graphcommerce/commit/829b8690bc5d0a46e596299e4120e9837a9f179c) Thanks [@paales](https://github.com/paales)! - Lots of fixes for LayoutOverlay:
1154
-
1155
1154
  - When interacting with an overlay it causes browser resizes on mobile and causing a janky experience.
1156
1155
  - Allow interaction with the previous layer after it has been closed, instead of waiting for the actual route to complete.
1157
1156
  - Allow scrolling to the the bottom in the overlay when the height is just a bit higher than the window.
@@ -1308,7 +1307,6 @@
1308
1307
  - [#1281](https://github.com/ho-nl/m2-pwa/pull/1281) [`3a719c88c`](https://github.com/ho-nl/m2-pwa/commit/3a719c88cad1eab58602de28c41adc0fc4827e1d) Thanks [@paales](https://github.com/paales)! - Make sure we're able to style the backdrop and the regular overlay for LayoutOverlay
1309
1308
 
1310
1309
  * [#1284](https://github.com/ho-nl/m2-pwa/pull/1284) [`5ffcb56bf`](https://github.com/ho-nl/m2-pwa/commit/5ffcb56bfcbe49ebeaf24f9341e819a145ab9a14) Thanks [@paales](https://github.com/paales)! - SvgIcon is now more extenable and flexible:
1311
-
1312
1310
  - It will automatically calculate the stroke-width of the SVG based on the rendered size, allowing for a more flexible use for icons.
1313
1311
 
1314
1312
  - Make SvgIcon themable in your own Theme.
package/Intl/DateTimeFormat/DateTimeFormat.tsx CHANGED
@@ -17,8 +17,13 @@ export function DateTimeFormat(props: DateTimeFormatProps) {
17
17
 
18
18
  const dateValue = useMemo(() => toDate(date), [date])
19
19
  return (
20
- <Box component='span' suppressHydrationWarning sx={sx}>
21
- {dateValue ? formatter.format(dateValue) : null}
20
+ <Box component='span' className='DateTimeFormat' suppressHydrationWarning sx={sx}>
21
+ {dateValue &&
22
+ formatter.formatToParts(dateValue).map((part) => (
23
+ <span className={part.type} key={part.type} suppressHydrationWarning>
24
+ {part.value}
25
+ </span>
26
+ ))}
22
27
  </Box>
23
28
  )
24
29
  }
package/Intl/NumberFormat/NumberFormat.tsx CHANGED
@@ -16,8 +16,12 @@ export const NumberFormat = forwardRef<HTMLSpanElement, NumberFormatProps>((prop
16
16
  const formatter = useIntlNumberFormat(options)
17
17
 
18
18
  return (
19
- <Box component='span' suppressHydrationWarning ref={ref} sx={sx}>
20
- {formatter.format(value)}
19
+ <Box component='span' className='NumberFormat' suppressHydrationWarning ref={ref} sx={sx}>
20
+ {formatter.formatToParts(value).map((part) => (
21
+ <span className={part.type} key={part.type} suppressHydrationWarning>
22
+ {part.value}
23
+ </span>
24
+ ))}
21
25
  </Box>
22
26
  )
23
27
  })
package/Intl/RelativeTimeFormat/RelativeTimeFormat.tsx CHANGED
@@ -34,8 +34,19 @@ export const RelativeTimeFormat = forwardRef<HTMLSpanElement, RelativeTimeFormat
34
34
  const result = relativeTimeFormatUnitAuto({ value, unit })
35
35
 
36
36
  return (
37
- <Box component='span' suppressHydrationWarning ref={ref} {...rest}>
38
- {result.value ? formatter.format(result.value, result.unit) : null}
37
+ <Box
38
+ component='span'
39
+ className='RelativeTimeFormat'
40
+ suppressHydrationWarning
41
+ ref={ref}
42
+ {...rest}
43
+ >
44
+ {result.value &&
45
+ formatter.formatToParts(result.value, result.unit).map((part) => (
46
+ <span className={part.type} key={part.type} suppressHydrationWarning>
47
+ {part.value}
48
+ </span>
49
+ ))}
39
50
  </Box>
40
51
  )
41
52
  },
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@graphcommerce/next-ui",
3
3
  "homepage": "https://www.graphcommerce.org/",
4
4
  "repository": "github:graphcommerce-org/graphcommerce",
5
- "version": "9.1.0-canary.43",
5
+ "version": "9.1.0-canary.45",
6
6
  "sideEffects": false,
7
7
  "prettier": "@graphcommerce/prettier-config-pwa",
8
8
  "eslintConfig": {
@@ -24,13 +24,13 @@
24
24
  "@emotion/react": "^11",
25
25
  "@emotion/server": "^11",
26
26
  "@emotion/styled": "^11",
27
- "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.43",
28
- "@graphcommerce/framer-next-pages": "^9.1.0-canary.43",
29
- "@graphcommerce/framer-scroller": "^9.1.0-canary.43",
30
- "@graphcommerce/framer-utils": "^9.1.0-canary.43",
31
- "@graphcommerce/image": "^9.1.0-canary.43",
32
- "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.43",
33
- "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.43",
27
+ "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.45",
28
+ "@graphcommerce/framer-next-pages": "^9.1.0-canary.45",
29
+ "@graphcommerce/framer-scroller": "^9.1.0-canary.45",
30
+ "@graphcommerce/framer-utils": "^9.1.0-canary.45",
31
+ "@graphcommerce/image": "^9.1.0-canary.45",
32
+ "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.45",
33
+ "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.45",
34
34
  "@lingui/core": "^4.2.1",
35
35
  "@lingui/macro": "^4.2.1",
36
36
  "@lingui/react": "^4.2.1",