@graphcommerce/next-ui 4.21.0 → 4.23.1

package/Row/ImageTextBoxed/ImageTextBoxed.tsx

@@ -1,6 +1,7 @@
 import { Box, SxProps, Theme } from '@mui/material'
 import React from 'react'
 import { extendableComponent } from '../../Styles'
+import { breakpointVal } from '../../Styles/breakpointVal'
 import { responsiveVal } from '../../Styles/responsiveVal'
 import { Row } from '../Row'
 
@@ -32,7 +33,12 @@ export function ImageTextBoxed(props: ImageTextBoxedProps) {
             gridTemplateColumns: '1fr auto',
             columnGap: `${theme.spacings.lg}`,
           },
-          borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
+          ...breakpointVal(
+            'borderRadius',
+            theme.shape.borderRadius * 2,
+            theme.shape.borderRadius * 3,
+            theme.breakpoints.values,
+          ),
           overflow: 'hidden',
         })}
       >

package/Row/ParagraphWithSidebarSlide/ParagraphWithSidebarSlide.tsx

@@ -1,6 +1,6 @@
 import { Box, ContainerProps } from '@mui/material'
 import { extendableComponent } from '../../Styles'
-import { responsiveVal } from '../../Styles/responsiveVal'
+import { breakpointVal } from '../../Styles/breakpointVal'
 import { Row } from '../Row'
 
 export type ParagraphWithSidebarSlideProps = ContainerProps & {
@@ -46,9 +46,11 @@ export function ParagraphWithSidebarSlide(props: ParagraphWithSidebarSlideProps)
                 filter: 'brightness(100%)',
                 height: '100%',
               },
-              borderRadius: responsiveVal(
+              ...breakpointVal(
+                'borderRadius',
                 theme.shape.borderRadius * 2,
                 theme.shape.borderRadius * 3,
+                theme.breakpoints.values,
               ),
             },
           })}

package/Row/SpecialBanner/SpecialBanner.tsx

@@ -1,5 +1,6 @@
 import { Box, ContainerProps, Typography } from '@mui/material'
 import { extendableComponent } from '../../Styles'
+import { breakpointVal } from '../../Styles/breakpointVal'
 import { responsiveVal } from '../../Styles/responsiveVal'
 import { Row } from '../Row'
 
@@ -31,7 +32,12 @@ export function SpecialBanner(props: SpecialBannerProps) {
           paddingTop: theme.spacings.lg,
           paddingBottom: theme.spacings.lg,
           justifySelf: 'start',
-          borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
+          ...breakpointVal(
+            'borderRadius',
+            theme.shape.borderRadius * 2,
+            theme.shape.borderRadius * 3,
+            theme.breakpoints.values,
+          ),
           [theme.breakpoints.up('md')]: {
             padding: 0,
             background: 'none',
@@ -51,9 +57,11 @@ export function SpecialBanner(props: SpecialBannerProps) {
               width: responsiveVal(200, 900),
               height: 'auto',
               objectFit: 'cover',
-              borderRadius: responsiveVal(
+              ...breakpointVal(
+                'borderRadius',
                 theme.shape.borderRadius * 2,
                 theme.shape.borderRadius * 3,
+                theme.breakpoints.values,
               ),
             },
             [theme.breakpoints.up('lg')]: {

package/Snackbar/MessageSnackbarImpl.tsx

@@ -1,3 +1,4 @@
+import { breakpointVal } from '@graphcommerce/next-ui'
 import {
   Fab,
   Snackbar,
@@ -65,8 +66,6 @@ export default function MessageSnackbarImpl(props: MessageSnackbarImplProps) {
   }, [open])
 
   const hideSnackbar = (e) => {
-    e.preventDefault()
-
     setShowSnackbar(false)
     onClose?.()
   }
@@ -86,20 +85,25 @@ export default function MessageSnackbarImpl(props: MessageSnackbarImplProps) {
         message={message}
         anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
         open={showSnackbar}
-        autoHideDuration={autoHide ? 6000 : null}
+        autoHideDuration={autoHide ? 5000 : null}
         className={classes.root}
         sx={sx}
         onClose={hideSnackbar}
       >
         <SnackbarContent
-          elevation={12}
+          elevation={16}
           className={classes.content}
           sx={(theme) => ({
             '&.variantPill': {
               backgroundColor: theme.palette.background.paper,
               color: theme.palette.text.primary,
               [theme.breakpoints.up('md')]: {
-                borderRadius: '99em',
+                ...breakpointVal(
+                  'borderRadius',
+                  theme.shape.borderRadius * 3,
+                  theme.shape.borderRadius * 4,
+                  theme.breakpoints.values,
+                ),
               },
               padding: theme.spacings.xxs,
             },

package/Stepper/Stepper.tsx

@@ -1,6 +1,5 @@
 import { Box, SxProps, Theme } from '@mui/material'
 import { extendableComponent } from '../Styles'
-import { responsiveVal } from '../Styles/responsiveVal'
 
 export type StepperProps = {
   steps: number
@@ -32,7 +31,7 @@ export function Stepper(props: StepperProps) {
         <Box
           sx={[
             {
-              height: responsiveVal(2, 3),
+              height: 2,
               bgcolor: 'divider',
             },
             currentStep - 1 >= step && {

package/Styles/breakpointVal.tsx

@@ -6,7 +6,7 @@ export function breakpointVal(
 ) {
   const minSize = 320
   const breakpoints = Object.values(breakpointsObject)
-  const spread = breakpoints[breakpoints.length - 1] - minSize
+  const spread = breakpoints[breakpoints.length - 1]
 
   const entries = {}
 

package/TextInputNumber/TextInputNumber.tsx

@@ -1,3 +1,4 @@
+import { i18n } from '@lingui/core'
 import {
   IconButton,
   IconButtonProps,
@@ -15,7 +16,7 @@ import { iconMin, iconPlus } from '../icons'
 
 export type IconButtonPropsOmit = Omit<
   IconButtonProps,
-  'aria-label' | 'size' | 'onMouseDown' | 'onMouseUp' | 'disabled'
+  'aria-labelledby' | 'aria-label' | 'size' | 'onMouseDown' | 'onMouseUp' | 'disabled'
 >
 
 export type TextInputNumberProps = Omit<TextFieldProps, 'type'> & {
@@ -95,7 +96,6 @@ export function TextInputNumber(props: TextInputNumberProps) {
       sx={[
         {
           width: responsiveVal(80, 120),
-          backgroundColor: 'inherit',
         },
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
@@ -104,7 +104,7 @@ export function TextInputNumber(props: TextInputNumberProps) {
         ...textFieldProps.InputProps,
         startAdornment: (
           <IconButton
-            aria-label='step down'
+            aria-label={i18n._(/* i18n */ 'Decrease')}
             size='medium'
             edge='start'
             onPointerDown={() => setDirection('down')}
@@ -120,7 +120,7 @@ export function TextInputNumber(props: TextInputNumberProps) {
         ),
         endAdornment: (
           <IconButton
-            aria-label='step up'
+            aria-label={i18n._(/* i18n */ 'Increase')}
             size='medium'
             edge='end'
             onPointerDown={() => setDirection('up')}
@@ -141,6 +141,7 @@ export function TextInputNumber(props: TextInputNumberProps) {
       }}
       inputProps={{
         ...inputProps,
+        'aria-label': i18n._(/* i18n */ 'Number'),
         sx: [
           {
             textAlign: 'center',

package/Theme/MuiButton.ts

@@ -22,7 +22,10 @@ export const MuiButtonResponsive: ButtonVariants = [
     props: { size: 'small' },
     style: ({ theme }) => ({
       ...theme.typography.body2,
-      padding: `${responsiveVal(3, 5)} ${responsiveVal(9, 15)}`,
+      padding: `${responsiveVal(3, 5)} ${responsiveVal(8, 15)}`,
+      '&.MuiLoadingButton-loading:hover': {
+        backgroundColor: theme.palette.action.disabledBackground,
+      },
       '& .MuiLoadingButton-loadingIndicatorEnd': { right: responsiveVal(9, 15) },
       '& .MuiLoadingButton-loadingIndicatorStart': { left: responsiveVal(9, 15) },
     }),
@@ -31,7 +34,10 @@ export const MuiButtonResponsive: ButtonVariants = [
     props: { size: 'medium' },
     style: ({ theme }) => ({
       ...theme.typography.body1,
-      padding: `${responsiveVal(8, 11)} ${responsiveVal(16, 24)}`,
+      padding: `${responsiveVal(7, 9)} ${responsiveVal(15, 22)}`,
+      '&.MuiLoadingButton-loading:hover': {
+        backgroundColor: theme.palette.action.disabledBackground,
+      },
       '& .MuiLoadingButton-loadingIndicatorEnd': { right: responsiveVal(16, 24) },
       '& .MuiLoadingButton-loadingIndicatorStart': { left: responsiveVal(16, 24) },
     }),
@@ -41,7 +47,10 @@ export const MuiButtonResponsive: ButtonVariants = [
     style: ({ theme }) => ({
       ...theme.typography.subtitle1,
       fontWeight: theme.typography.fontWeightBold,
-      padding: `${responsiveVal(10, 15)} ${responsiveVal(30, 60)}`,
+      padding: `${responsiveVal(10, 15)} ${responsiveVal(28, 58)}`,
+      '&.MuiLoadingButton-loading:hover': {
+        backgroundColor: theme.palette.action.disabledBackground,
+      },
       '& .MuiLoadingButton-loadingIndicatorEnd': { right: responsiveVal(30, 60) },
       '& .MuiLoadingButton-loadingIndicatorStart': { left: responsiveVal(30, 60) },
     }),

package/Theme/MuiFab.ts

@@ -27,8 +27,8 @@ const defaultSizes: FabSizes = {
    */
   small: '40px',
   medium: '48px',
-  large: '56px',
-  responsive: responsiveVal(40, 56),
+  large: '54px',
+  responsive: responsiveVal(40, 54),
 }
 
 function fabSize(size: FabSize, theme: Theme) {

package/ToggleButton/ToggleButton.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Button, ButtonProps } from '@mui/material'
+import { alpha, Button, ButtonProps } from '@mui/material'
 import React, { FormEvent } from 'react'
 import { extendableComponent } from '../Styles'
-import { responsiveVal } from '../Styles/responsiveVal'
+import { breakpointVal } from '../Styles/breakpointVal'
 
 export type ToggleButtonProps = Omit<ButtonProps, 'onClick' | 'onChange'> & {
   selected?: boolean
@@ -72,16 +72,26 @@ export const ToggleButton = React.forwardRef<any, ToggleButtonProps>((props, ref
             border: `1px solid ${theme.palette[color]?.main ?? theme.palette.primary.main}`,
             boxShadow: `inset 0 0 0 1px ${
               theme.palette[color]?.main ?? theme.palette.primary.main
-            }`,
+            },0 0 0 4px ${alpha(
+              theme.palette.primary.main,
+              theme.palette.action.hoverOpacity,
+            )} !important`,
           },
           ':not(&.sizeSmall)': {
-            borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
+            ...breakpointVal(
+              'borderRadius',
+              theme.shape.borderRadius * 2,
+              theme.shape.borderRadius * 3,
+              theme.breakpoints.values,
+            ),
             padding: `${theme.spacings.xxs} ${theme.spacings.xs}`,
           },
           '&.sizeSmall': {
-            borderRadius: responsiveVal(
+            ...breakpointVal(
+              'borderRadius',
               theme.shape.borderRadius * 1,
               theme.shape.borderRadius * 1.5,
+              theme.breakpoints.values,
             ),
             padding: `8px 12px`,
           },

package/hooks/index.ts

@@ -1,3 +1,4 @@
 export * from './useDateTimeFormat'
 export * from './useNumberFormat'
 export * from './useUrlQuery'
+export * from './useMemoDeep'

package/hooks/useMemoDeep.ts

@@ -0,0 +1,15 @@
+import { equal } from '@wry/equality'
+import { DependencyList, useMemo, useRef } from 'react'
+
+export function useMemoDeep<T>(factory: () => T, deps: DependencyList | undefined): T {
+  const ref = useRef<DependencyList | undefined>(undefined)
+  const signalRef = useRef<number>(0)
+
+  if (!equal(deps, ref.current)) {
+    ref.current = deps
+    signalRef.current += 1
+  }
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return useMemo(() => factory(), [signalRef.current])
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.21.0",
+  "version": "4.23.1",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -19,10 +19,10 @@
     "@emotion/react": "^11.9.3",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.9.3",
-    "@graphcommerce/framer-next-pages": "3.2.5",
-    "@graphcommerce/framer-scroller": "2.1.32",
-    "@graphcommerce/framer-utils": "3.1.5",
-    "@graphcommerce/image": "3.1.8",
+    "@graphcommerce/framer-next-pages": "3.3.0",
+    "@graphcommerce/framer-scroller": "2.1.35",
+    "@graphcommerce/framer-utils": "3.2.0",
+    "@graphcommerce/image": "3.1.9",
     "cookie": "^0.5.0",
     "react-is": "^18.2.0",
     "schema-dts": "^1.1.0"