@graphcommerce/next-ui 7.0.0-canary.21 → 7.0.0

package/Styles/__tests__/spreadVal.test.ts

@@ -1,7 +1,7 @@
 import { spreadLinear, spreadVal } from '../spreadVal'
 
 it('generates the right spreadVal', () => {
-  const s = (val: any) => JSON.stringify(val)
+  const s = (val: unknown) => JSON.stringify(val)
 
   expect(s(spreadLinear(15, 18, 'xl'))).toMatchInlineSnapshot(`"[15,15.53,16.2,17.28,18]"`)
   expect(s(spreadLinear(15, 18))).toMatchInlineSnapshot(`"[15,16.31,18,18,18]"`)

package/TextInputNumber/TextInputNumber.tsx

@@ -1,12 +1,14 @@
 import { i18n } from '@lingui/core'
 import {
-  IconButton,
   IconButtonProps,
   SxProps,
+  Box,
+  // eslint-disable-next-line @typescript-eslint/no-restricted-imports
   TextField,
   TextFieldProps,
   useForkRef,
   Theme,
+  Fab,
 } from '@mui/material'
 import { ChangeEvent, Ref, useCallback, useEffect, useRef, useState } from 'react'
 import { IconSvg } from '../IconSvg'
@@ -36,6 +38,7 @@ export function TextInputNumber(props: TextInputNumberProps) {
     UpProps = {},
     inputProps = {},
     inputRef,
+    variant = 'outlined',
     sx = [],
     ...textFieldProps
   } = props
@@ -91,11 +94,27 @@ export function TextInputNumber(props: TextInputNumberProps) {
     <TextField
       {...textFieldProps}
       type='number'
+      variant={variant}
       inputRef={forkRef}
       className={`${textFieldProps.className ?? ''} ${classes.quantity}`}
       sx={[
         {
-          width: responsiveVal(80, 120),
+          width: responsiveVal(90, 120),
+        },
+        {
+          '& .MuiOutlinedInput-root': {
+            px: '3px',
+            display: 'grid',
+            gridTemplateColumns: '1fr auto 1fr',
+          },
+        },
+        variant === 'standard' && {
+          '& .MuiOutlinedInput-input': {
+            padding: 0,
+          },
+          '& .MuiOutlinedInput-notchedOutline': {
+            display: 'none',
+          },
         },
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
@@ -103,36 +122,36 @@ export function TextInputNumber(props: TextInputNumberProps) {
       InputProps={{
         ...textFieldProps.InputProps,
         startAdornment: (
-          <IconButton
-            aria-label={i18n._(/* i18n */ 'Decrease')}
-            size='medium'
-            edge='start'
-            onPointerDown={() => setDirection('down')}
-            onPointerUp={stop}
-            // disabled={textFieldProps.disabled || disabled === 'min'}
-            tabIndex={-1}
-            color='inherit'
-            {...DownProps}
-            className={`${classes.button} ${DownProps.className ?? ''}`}
-          >
-            {DownProps.children ?? <IconSvg src={iconMin} size='small' />}
-          </IconButton>
+          <Box>
+            <Fab
+              aria-label={i18n._(/* i18n */ 'Decrease')}
+              size='smaller'
+              sx={{ boxShadow: variant === 'standard' ? 4 : 0, minHeight: '30px' }}
+              onPointerDown={() => setDirection('down')}
+              onPointerUp={stop}
+              tabIndex={-1}
+              {...DownProps}
+              className={`${classes.button} ${DownProps.className ?? ''}`}
+            >
+              {DownProps.children ?? <IconSvg src={iconMin} size='small' />}
+            </Fab>
+          </Box>
         ),
         endAdornment: (
-          <IconButton
-            aria-label={i18n._(/* i18n */ 'Increase')}
-            size='medium'
-            edge='end'
-            onPointerDown={() => setDirection('up')}
-            onPointerUp={() => setDirection(null)}
-            // disabled={textFieldProps.disabled || disabled === 'max'}
-            tabIndex={-1}
-            color='inherit'
-            {...UpProps}
-            className={`${classes.button} ${UpProps.className ?? ''}`}
-          >
-            {UpProps.children ?? <IconSvg src={iconPlus} size='small' />}
-          </IconButton>
+          <Box>
+            <Fab
+              aria-label={i18n._(/* i18n */ 'Increase')}
+              size='smaller'
+              sx={{ boxShadow: variant === 'standard' ? 4 : 0, minHeight: '30px' }}
+              onPointerDown={() => setDirection('up')}
+              onPointerUp={() => setDirection(null)}
+              tabIndex={-1}
+              {...UpProps}
+              className={`${classes.button} ${UpProps.className ?? ''}`}
+            >
+              {UpProps.children ?? <IconSvg src={iconPlus} size='small' />}
+            </Fab>
+          </Box>
         ),
       }}
       onChange={(e: ChangeEvent<HTMLInputElement>) => {
@@ -144,6 +163,7 @@ export function TextInputNumber(props: TextInputNumberProps) {
         'aria-label': i18n._(/* i18n */ 'Number'),
         sx: [
           {
+            typography: 'body1',
             textAlign: 'center',
             '&::-webkit-inner-spin-button,&::-webkit-outer-spin-button': {
               appearance: 'none',

package/Theme/MuiButton.ts

@@ -89,19 +89,19 @@ export const MuiButtonPill: ButtonVariants = [
   {
     props: { variant: 'pill', size: 'small' },
     style: ({ theme }) => ({
-      '&:not(.Mui-disabled)': { boxShadow: theme.shadows[2] },
+      '&:not(.Mui-disabled):not(.MuiButton-disableElevation)': { boxShadow: theme.shadows[2] },
     }),
   },
   {
     props: { variant: 'pill', size: 'medium' },
     style: ({ theme }) => ({
-      '&:not(.Mui-disabled)': { boxShadow: theme.shadows[4] },
+      '&:not(.Mui-disabled):not(.MuiButton-disableElevation)': { boxShadow: theme.shadows[4] },
     }),
   },
   {
     props: { variant: 'pill', size: 'large' },
     style: ({ theme }) => ({
-      '&:not(.Mui-disabled)': { boxShadow: theme.shadows[6] },
+      '&:not(.Mui-disabled):not(.MuiButton-disableElevation)': { boxShadow: theme.shadows[6] },
     }),
   },
   {
@@ -161,7 +161,7 @@ export const MuiButtonInline: ButtonVariants = [
   {
     props: { variant: 'inline', size: 'small' },
     style: ({ theme }) => ({
-      margin: `calc(${theme.spacings.xxs} / 2 * -1 )`,
+      margin: `calc(${theme.spacings.xxs} * -1 )`,
       padding: '3px 9px',
 
       '& .MuiLoadingButton-loadingIndicatorEnd': { right: 3 },

package/Theme/MuiFab.ts

@@ -25,9 +25,12 @@ const defaultSizes: FabSizes = {
    * Default values picked from MUI:
    * https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Fab/Fab.js
    */
+  smaller: '30px',
   small: '40px',
   medium: '48px',
   large: '54px',
+  responsiveSmall: responsiveVal(30, 40),
+  responsiveMedium: responsiveVal(36, 48),
   responsive: responsiveVal(40, 54),
 }
 
@@ -43,6 +46,9 @@ export const useFabSize = (size: FabSize) => {
 declare module '@mui/material/Fab/Fab' {
   interface FabPropsSizeOverrides {
     responsive: true
+    responsiveSmall: true
+    responsiveMedium: true
+    smaller: true
   }
   // todo: Wait for the color prop to be exendable and then add inverted
   // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Fab/Fab.js#L193-L202
@@ -60,7 +66,15 @@ function fabWidthHeight(size: FabSize, theme: Theme) {
 
 type FabVariants = NonNullable<ComponentsVariants['MuiFab']>
 
-const sizes: FabSize[] = ['small', 'medium', 'large', 'responsive']
+const sizes: FabSize[] = [
+  'smaller',
+  'small',
+  'medium',
+  'large',
+  'responsive',
+  'responsiveSmall',
+  'responsiveMedium',
+]
 
 /**
  * This defines the sizes for the added responsive variant.

package/hooks/useDateTimeFormat.ts

@@ -5,6 +5,13 @@ export type DateTimeFormatProps = Intl.DateTimeFormatOptions
 
 export function useDateTimeFormat(props?: DateTimeFormatProps) {
   const { locale } = useRouter()
-  const formatter = useMemo(() => new Intl.DateTimeFormat(locale, props), [locale, props])
+
+  // Remove optional dialect from locale, which Intl.NumberFormat does not support.
+  const strippedLocale = locale?.split('-', 2).join('-')
+
+  const formatter = useMemo(
+    () => new Intl.DateTimeFormat(strippedLocale, props),
+    [strippedLocale, props],
+  )
   return formatter
 }

package/hooks/useNumberFormat.ts

@@ -5,6 +5,13 @@ export type NumberFormatProps = Intl.NumberFormatOptions
 
 export function useNumberFormat(props?: NumberFormatProps) {
   const { locale } = useRouter()
-  const formatter = useMemo(() => new Intl.NumberFormat(locale, props), [locale, props])
+
+  // Remove optional dialect from locale, which Intl.NumberFormat does not support.
+  const strippedLocale = locale?.split('-', 2).join('-')
+
+  const formatter = useMemo(
+    () => new Intl.NumberFormat(strippedLocale, props),
+    [strippedLocale, props],
+  )
   return formatter
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "7.0.0-canary.21",
+  "version": "7.0.0",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -14,29 +14,30 @@
     }
   },
   "dependencies": {
-    "@emotion/cache": "^11.10.5",
-    "@emotion/react": "^11.10.6",
-    "@emotion/server": "^11.4.0",
-    "@emotion/styled": "^11.10.6",
-    "@graphcommerce/framer-next-pages": "7.0.0-canary.21",
-    "@graphcommerce/framer-scroller": "7.0.0-canary.21",
-    "@graphcommerce/framer-utils": "7.0.0-canary.21",
-    "@graphcommerce/image": "7.0.0-canary.21",
+    "@emotion/cache": "^11.11.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/server": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@graphcommerce/framer-next-pages": "7.0.0",
+    "@graphcommerce/framer-scroller": "7.0.0",
+    "@graphcommerce/framer-utils": "7.0.0",
+    "@graphcommerce/image": "7.0.0",
     "cookie": "^0.5.0",
     "react-is": "^18.2.0",
     "schema-dts": "^1.1.0"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "7.0.0-canary.21",
-    "@graphcommerce/prettier-config-pwa": "7.0.0-canary.21",
-    "@graphcommerce/typescript-config-pwa": "7.0.0-canary.21",
+    "@graphcommerce/eslint-config-pwa": "7.0.0",
+    "@graphcommerce/prettier-config-pwa": "7.0.0",
+    "@graphcommerce/typescript-config-pwa": "7.0.0",
     "@types/cookie": "^0.5.1",
-    "@types/react-is": "^17.0.3",
-    "typescript": "4.9.5"
+    "@types/react-is": "^18.2.1",
+    "typescript": "5.1.3"
   },
   "peerDependencies": {
-    "@lingui/core": "^3.13.2",
-    "@lingui/react": "^3.13.2",
+    "@lingui/core": "^4.2.1",
+    "@lingui/react": "^4.2.1",
+    "@lingui/macro": "^4.2.1",
     "@mui/lab": "^5.0.0-alpha.68",
     "@mui/material": "^5.10.16",
     "framer-motion": "^10.0.0",