@graphcommerce/next-ui 9.1.0-canary.16 → 9.1.0-canary.17

package/ActionCard/ActionCard.tsx

@@ -186,9 +186,9 @@ export function ActionCard<C extends React.ElementType = typeof Box>(props: Acti
           '&.variantOutlined': {
             backgroundColor: theme.palette.background.paper,
             boxShadow: `inset 0 0 0 1px ${theme.palette.divider}`,
-            '&:not(:last-of-type)': {
-              marginBottom: '-2px',
-            },
+            // '&:not(:last-of-type)': {
+            //   marginBottom: '-2px',
+            // },
             '&.layoutList': {
               borderRadius: 0,
               '&:first-of-type': {
@@ -296,6 +296,7 @@ export function ActionCard<C extends React.ElementType = typeof Box>(props: Acti
               display: 'flex',
               flexDirection: 'column',
               alignItems: 'flex-start',
+              justifyContent: 'center',
             }}
           >
             {title && (
@@ -348,7 +349,7 @@ export function ActionCard<C extends React.ElementType = typeof Box>(props: Acti
           )}
           {...slotProps.end}
         >
-          {action && (
+          {(action || reset) && (
             <Box
               className={classes.action}
               sx={sxx(

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # Change Log
 
+## 9.1.0-canary.17
+
 ## 9.1.0-canary.16
 
 ## 9.1.0-canary.15

package/FlagAvatar/FlagAvatar.tsx

@@ -1,19 +1,29 @@
-import type { AvatarProps } from '@mui/material'
-import { Avatar } from '@mui/material'
+import type { BoxProps } from '@mui/material'
+import { Box } from '@mui/material'
+import { useIntlDisplayNames } from '../Intl'
+import { sxx } from '../utils/sxx'
 
-export type FlagAvatarProps = { country: string } & Omit<AvatarProps, 'src'>
+export type FlagAvatarProps = { country: string; size: string } & Omit<BoxProps<'img'>, 'src'>
 
 export function FlagAvatar(props: FlagAvatarProps) {
-  const { country, ...avatarProps } = props
+  const { country, size, sx, ...avatarProps } = props
+
+  const displayName = useIntlDisplayNames({ type: 'region' })
 
   return (
-    <Avatar
+    <Box
+      component='img'
       {...avatarProps}
-      imgProps={{ loading: 'lazy' }}
-      alt={country}
-      src={`https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.3/flags/1x1/${country}.svg`}
-    >
-      {country.toLocaleUpperCase()}
-    </Avatar>
+      src={`https://flagcdn.com/${country}.svg`}
+      alt={displayName.of(country)}
+      sx={sxx(
+        {
+          width: size,
+          borderRadius: '2px',
+          height: size,
+        },
+        sx,
+      )}
+    />
   )
 }

package/Intl/CurrencySymbol/CurrencySymbol.tsx

@@ -1,5 +1,6 @@
 import { Box, type SxProps, type Theme } from '@mui/material'
 import { forwardRef } from 'react'
+import { DisplayNames } from '../DisplayNames'
 import {
   useIntlNumberFormat,
   type UseIntlNumberFormatOptions,
@@ -7,16 +8,23 @@ import {
 
 export type CurrencySymbolProps = Omit<UseIntlNumberFormatOptions, 'numberStyle'> & {
   sx?: SxProps<Theme>
+  variant?: 'symbol' | 'full'
 }
 
 /** @public */
 export const CurrencySymbol = forwardRef<HTMLSpanElement, CurrencySymbolProps>((props, ref) => {
-  const { sx, ...options } = props
+  const { sx, variant = 'symbol', ...options } = props
   const formatter = useIntlNumberFormat({ ...options, numberStyle: 'currency' })
 
   return (
     <Box component='span' suppressHydrationWarning ref={ref} sx={sx}>
       {formatter.formatToParts(1).find((part) => part.type === 'currency')?.value}
+      {options.currency && variant === 'full' && (
+        <>
+          {' – '}
+          {options.currency} – <DisplayNames type='currency' code={options.currency} />
+        </>
+      )}
     </Box>
   )
 })

package/Intl/ListFormat/useIntlListFormat.ts

@@ -9,7 +9,7 @@ export type UseIntlListFormatOptions = {
   UseIntlLocalesArgumentOptions
 
 export function useIntlListFormat(props: UseIntlListFormatOptions) {
-  const [locales, options] = useIntlLocalesArgument(props)
-  const memoOptions = useMemoObject({ ...options })
+  const [locales, { listStyle: style, ...options }] = useIntlLocalesArgument(props)
+  const memoOptions = useMemoObject({ style, ...options })
   return useMemo(() => new Intl.ListFormat(locales, memoOptions), [locales, memoOptions])
 }

package/hooks/useStorefrontConfig.ts

@@ -5,6 +5,6 @@ import { storefrontConfig } from '../utils/storefrontConfig'
 export function useStorefrontConfig(locale?: string | undefined) {
   const routerLocale = useRouter().locale
   const config = storefrontConfig(locale ?? routerLocale)
-  if (!config) throw Error(`No storefront config found for locale ${locale}`)
+  if (!config) throw Error(`No storefront config found for locale '${locale}'`)
   return config
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.1.0-canary.16",
+  "version": "9.1.0-canary.17",
   "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.1.0-canary.16",
-    "@graphcommerce/framer-next-pages": "^9.1.0-canary.16",
-    "@graphcommerce/framer-scroller": "^9.1.0-canary.16",
-    "@graphcommerce/framer-utils": "^9.1.0-canary.16",
-    "@graphcommerce/image": "^9.1.0-canary.16",
-    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.16",
-    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.16",
+    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.17",
+    "@graphcommerce/framer-next-pages": "^9.1.0-canary.17",
+    "@graphcommerce/framer-scroller": "^9.1.0-canary.17",
+    "@graphcommerce/framer-utils": "^9.1.0-canary.17",
+    "@graphcommerce/image": "^9.1.0-canary.17",
+    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.17",
+    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.17",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",