@graphcommerce/next-ui 4.21.0 → 4.22.0

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.22.0",
   "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.33",
+    "@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"