@graphcommerce/next-ui 9.0.4-canary.1 → 9.0.4-canary.11

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # Change Log
 
+## 9.0.4-canary.11
+
+### Patch Changes
+
+- [#2485](https://github.com/graphcommerce-org/graphcommerce/pull/2485) [`b0ec078`](https://github.com/graphcommerce-org/graphcommerce/commit/b0ec0784a0b3ca977598ded3777d23bc929072b0) - Added a CurrencySymbol component that renders the current currency symbol ([@paales](https://github.com/paales))
+
+## 9.0.4-canary.10
+
+## 9.0.4-canary.9
+
+## 9.0.4-canary.8
+
+## 9.0.4-canary.7
+
+## 9.0.4-canary.6
+
+### Patch Changes
+
+- [#2478](https://github.com/graphcommerce-org/graphcommerce/pull/2478) [`32bccbb`](https://github.com/graphcommerce-org/graphcommerce/commit/32bccbba4b000247d7e01e487f6d48b6dec07fb5) - Nesting multiple Containers will not increase the padding, will only be applied once. ([@paales](https://github.com/paales))
+
+## 9.0.4-canary.5
+
+## 9.0.4-canary.4
+
+## 9.0.4-canary.3
+
+## 9.0.4-canary.2
+
+### Patch Changes
+
+- [#2473](https://github.com/graphcommerce-org/graphcommerce/pull/2473) [`8df172e`](https://github.com/graphcommerce-org/graphcommerce/commit/8df172e4fa1364892d53bc96a437d037d245de35) - Do not warn about `:first-child` since all css is hoisted out of the components. ([@paales](https://github.com/paales))
+
+- [#2473](https://github.com/graphcommerce-org/graphcommerce/pull/2473) [`b076b2a`](https://github.com/graphcommerce-org/graphcommerce/commit/b076b2ae4881bebf1d2debd5333a83f220c26ca7) - Also accept false as value for sxx ([@paales](https://github.com/paales))
+
 ## 9.0.4-canary.1
 
 ### Patch Changes

package/Container/Container.tsx

@@ -76,10 +76,14 @@ export const Container = React.forwardRef(
         className={[className, classes.root].filter((v) => !!v).join(' ')}
         sx={[
           {
+            width: '100%',
             pl: !breakoutLeft ? padding : undefined,
             pr: !breakoutRight ? padding : undefined,
             '&.breakoutLeft': { pl: 'unset' },
             '&.breakoutRight': { pr: 'unset' },
+
+            // Nesting containers will not have padding applied.
+            '.MuiContainer-root &': { pl: 0, pr: 0 },
           },
           ...(Array.isArray(sx) ? sx : [sx]),
         ]}

package/Intl/CurrencySymbol/CurrencySymbol.tsx

@@ -0,0 +1,19 @@
+import { Box } from '@mui/material'
+import { forwardRef } from 'react'
+import {
+  useIntlNumberFormat,
+  type UseIntlNumberFormatOptions,
+} from '../NumberFormat/useIntlNumberFormat'
+
+export type CurrencySymbolProps = Omit<UseIntlNumberFormatOptions, 'numberStyle'>
+
+/** @public */
+export const CurrencySymbol = forwardRef<HTMLSpanElement, CurrencySymbolProps>((props, ref) => {
+  const formatter = useIntlNumberFormat({ ...props, numberStyle: 'currency' })
+
+  return (
+    <Box component='span' suppressHydrationWarning ref={ref}>
+      {formatter.formatToParts(1).find((part) => part.type === 'currency')?.value}
+    </Box>
+  )
+})

package/Intl/CurrencySymbol/index.ts

@@ -0,0 +1 @@
+export * from './CurrencySymbol'

package/Intl/index.ts

@@ -9,3 +9,4 @@ export * from './NumberFormat' // Intl.NumberFormat
 // export * from './PluralRules' // Intl.PluralRules
 export * from './RelativeTimeFormat' // Intl.RelativeTimeFormat
 // export * from './Segmenter' // Intl.Segmenter
+export * from './CurrencySymbol'

package/Styles/createEmotionCache.ts

@@ -10,5 +10,7 @@ export const createEmotionCache = () => {
     insertionPoint = emotionInsertionPoint ?? undefined
   }
 
-  return createCache({ key: 'mui-style', insertionPoint, stylisPlugins: [] })
+  const cache = createCache({ key: 'mui-style', insertionPoint, stylisPlugins: [] })
+  cache.compat = true
+  return cache
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.4-canary.1",
+  "version": "9.0.4-canary.11",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -24,13 +24,13 @@
     "@emotion/react": "^11",
     "@emotion/server": "^11",
     "@emotion/styled": "^11",
-    "@graphcommerce/eslint-config-pwa": "^9.0.4-canary.1",
-    "@graphcommerce/framer-next-pages": "^9.0.4-canary.1",
-    "@graphcommerce/framer-scroller": "^9.0.4-canary.1",
-    "@graphcommerce/framer-utils": "^9.0.4-canary.1",
-    "@graphcommerce/image": "^9.0.4-canary.1",
-    "@graphcommerce/prettier-config-pwa": "^9.0.4-canary.1",
-    "@graphcommerce/typescript-config-pwa": "^9.0.4-canary.1",
+    "@graphcommerce/eslint-config-pwa": "^9.0.4-canary.11",
+    "@graphcommerce/framer-next-pages": "^9.0.4-canary.11",
+    "@graphcommerce/framer-scroller": "^9.0.4-canary.11",
+    "@graphcommerce/framer-utils": "^9.0.4-canary.11",
+    "@graphcommerce/image": "^9.0.4-canary.11",
+    "@graphcommerce/prettier-config-pwa": "^9.0.4-canary.11",
+    "@graphcommerce/typescript-config-pwa": "^9.0.4-canary.11",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/utils/sxx.ts

@@ -9,8 +9,10 @@ import type { SxProps, Theme } from '@mui/material'
  * sxx({ position: 'absolute', right: 0, top: 0 }, props.sx)
  * ```
  */
-export const sxx = (...sxPropsArray: (SxProps<Theme> | undefined)[]): SxProps<Theme> =>
+export const sxx = (
+  ...sxPropsArray: (SxProps<Theme> | undefined | null | false)[]
+): SxProps<Theme> =>
   sxPropsArray
-    .filter((v) => v !== undefined)
+    .filter((v) => !!v)
     .map((sx) => (Array.isArray(sx) ? sx : [sx]))
     .flat(1)