@graphcommerce/ecommerce-ui 1.5.0 → 1.5.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @graphcommerce/ecommerce-ui
 
+## 1.5.1
+
+### Patch Changes
+
+- [#1660](https://github.com/graphcommerce-org/graphcommerce/pull/1660) [`e5048c5ec`](https://github.com/graphcommerce-org/graphcommerce/commit/e5048c5ec52b83dbe70a246ffdcea65b55a884c6) Thanks [@paales](https://github.com/paales)! - Flatten the NumberFieldElement to use the Controller directly
+
+- Updated dependencies [[`75ae24a93`](https://github.com/graphcommerce-org/graphcommerce/commit/75ae24a93bd74e3b9b7efda21ec7ba6fbe9a3a75)]:
+  - @graphcommerce/react-hook-form@3.3.4
+
 ## 1.5.0
 
 ### Minor Changes

package/components/FormComponents/NumberFieldElement.tsx

@@ -5,32 +5,33 @@ import {
   IconSvg,
   responsiveVal,
 } from '@graphcommerce/next-ui'
-import { FieldValues } from '@graphcommerce/react-hook-form'
+import { Controller, ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import {
   IconButton,
   IconButtonProps,
   SxProps,
-  useForkRef,
   Theme,
-  useEventCallback,
+  TextField,
+  TextFieldProps,
 } from '@mui/material'
-import { ChangeEvent, Ref, useRef } from 'react'
-import { TextFieldElement, TextFieldElementProps } from './TextFieldElement'
 
 export type NumberFieldElementProps<T extends FieldValues = FieldValues> = Omit<
-  TextFieldElementProps<T>,
-  'type'
+  TextFieldProps,
+  'type' | 'defaultValue'
 > & {
   DownProps?: IconButtonProps
   UpProps?: IconButtonProps
   sx?: SxProps<Theme>
-}
+} & Omit<ControllerProps<T>, 'render'>
 
 type OwnerState = { size?: 'small' | 'medium' }
-const name = 'TextInputNumber' as const
+const componentName = 'TextInputNumber' as const
 const parts = ['quantity', 'quantityInput', 'button'] as const
-const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
+const { withState } = extendableComponent<OwnerState, typeof componentName, typeof parts>(
+  componentName,
+  parts,
+)
 
 export function NumberFieldElement<T extends FieldValues = FieldValues>(
   props: NumberFieldElementProps<T>,
@@ -39,81 +40,100 @@ export function NumberFieldElement<T extends FieldValues = FieldValues>(
     DownProps = {},
     UpProps = {},
     inputProps = {},
-    inputRef,
     sx = [],
     size = 'medium',
+    control,
+    name,
+    rules = {},
+    required,
+    defaultValue,
     ...textFieldProps
   } = props
 
   const classes = withState({ size })
-  const ref = useRef<HTMLInputElement>(null)
-  const forkRef = useForkRef(ref, inputRef as Ref<HTMLInputElement>)
 
-  return (
-    <TextFieldElement
-      {...textFieldProps}
-      size={size}
-      type='number'
-      inputRef={forkRef}
-      className={`${textFieldProps.className ?? ''} ${classes.quantity}`}
-      sx={[{ width: responsiveVal(80, 120) }, ...(Array.isArray(sx) ? sx : [sx])]}
-      autoComplete='off'
-      InputProps={{
-        ...textFieldProps.InputProps,
-        startAdornment: (
-          <IconButton
-            aria-label={i18n._(/* i18n */ 'Decrease')}
-            size='medium'
-            edge='start'
-            onClick={useEventCallback(() => {
-              if ((ref.current?.value ?? Infinity) >= inputProps.max) return
+  if (required && !rules.required) {
+    rules.required = i18n._(/* i18n */ 'This field is required')
+  }
 
-              ref.current?.stepUp()
-              ref.current?.dispatchEvent(new Event('change', { bubbles: true }))
-            })}
-            tabIndex={-1}
-            color='inherit'
-            {...DownProps}
-            className={`${classes.button} ${DownProps.className ?? ''}`}
-          >
-            {DownProps.children ?? <IconSvg src={iconMin} size='small' />}
-          </IconButton>
-        ),
-        endAdornment: (
-          <IconButton
-            aria-label={i18n._(/* i18n */ 'Increase')}
-            size='medium'
-            edge='end'
-            onClick={useEventCallback(() => {
-              if ((ref.current?.value ?? 0) <= inputProps.min) return
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={rules}
+      defaultValue={defaultValue}
+      render={({ field: { value, onChange, onBlur }, fieldState: { invalid, error } }) => {
+        const valueAsNumber = value ? parseFloat(value) : 0
 
-              ref.current?.stepDown()
-              ref.current?.dispatchEvent(new Event('change', { bubbles: true }))
-            })}
-            tabIndex={-1}
-            color='inherit'
-            {...UpProps}
-            className={`${classes.button} ${UpProps.className ?? ''}`}
-          >
-            {UpProps.children ?? <IconSvg src={iconPlus} size='small' />}
-          </IconButton>
-        ),
-      }}
-      onChange={(e: ChangeEvent<HTMLInputElement>) => {
-        if (textFieldProps.onChange) textFieldProps.onChange(e)
-      }}
-      inputProps={{
-        ...inputProps,
-        'aria-label': i18n._(/* i18n */ 'Number'),
-        sx: [
-          {
-            textAlign: 'center',
-            '&::-webkit-inner-spin-button,&::-webkit-outer-spin-button': {
-              appearance: 'none',
-            },
-          },
-        ],
-        className: `${inputProps?.className ?? ''} ${classes.quantityInput}`,
+        return (
+          <TextField
+            {...textFieldProps}
+            name={name}
+            value={value ?? ''}
+            onChange={(ev) => {
+              const newValue = (ev.target as HTMLInputElement).valueAsNumber
+              onChange(Number.isNaN(newValue) ? '' : newValue)
+              textFieldProps.onChange?.(ev)
+            }}
+            onBlur={onBlur}
+            required={required}
+            error={invalid}
+            helperText={error ? error.message : textFieldProps.helperText}
+            size={size}
+            type='number'
+            className={`${textFieldProps.className ?? ''} ${classes.quantity}`}
+            sx={[{ width: responsiveVal(80, 120) }, ...(Array.isArray(sx) ? sx : [sx])]}
+            autoComplete='off'
+            InputProps={{
+              ...textFieldProps.InputProps,
+              startAdornment: (
+                <IconButton
+                  aria-label={i18n._(/* i18n */ 'Decrease')}
+                  size='medium'
+                  edge='start'
+                  onClick={() => {
+                    if ((valueAsNumber || Infinity) <= inputProps.min) return
+                    onChange(value - 1)
+                  }}
+                  tabIndex={-1}
+                  color='inherit'
+                  {...DownProps}
+                  className={`${classes.button} ${DownProps.className ?? ''}`}
+                >
+                  {DownProps.children ?? <IconSvg src={iconMin} size='small' />}
+                </IconButton>
+              ),
+              endAdornment: (
+                <IconButton
+                  aria-label={i18n._(/* i18n */ 'Increase')}
+                  size='medium'
+                  edge='end'
+                  onClick={() => {
+                    if (valueAsNumber >= (inputProps.max ?? Infinity)) return
+                    onChange(valueAsNumber + 1)
+                  }}
+                  tabIndex={-1}
+                  color='inherit'
+                  {...UpProps}
+                  className={`${classes.button} ${UpProps.className ?? ''}`}
+                >
+                  {UpProps.children ?? <IconSvg src={iconPlus} size='small' />}
+                </IconButton>
+              ),
+            }}
+            inputProps={{
+              ...inputProps,
+              'aria-label': i18n._(/* i18n */ 'Number'),
+              className: `${inputProps?.className ?? ''} ${classes.quantityInput}`,
+              sx: {
+                textAlign: 'center',
+                '&::-webkit-inner-spin-button,&::-webkit-outer-spin-button': {
+                  appearance: 'none',
+                },
+              },
+            }}
+          />
+        )
       }}
     />
   )

package/components/FormComponents/TextFieldElement.tsx

@@ -4,6 +4,7 @@ import {
   FieldError,
   FieldValues,
 } from '@graphcommerce/react-hook-form'
+import { i18n } from '@lingui/core'
 import { TextField, TextFieldProps } from '@mui/material'
 
 export type TextFieldElementProps<T extends FieldValues = FieldValues> = Omit<
@@ -26,7 +27,7 @@ export function TextFieldElement<TFieldValues extends FieldValues = FieldValues>
   ...rest
 }: TextFieldElementProps<TFieldValues>): JSX.Element {
   if (required && !validation.required) {
-    validation.required = 'This field is required'
+    validation.required = i18n._(/* i18n */ 'This field is required')
   }
 
   if (type === 'email' && !validation.pattern) {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/ecommerce-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -14,7 +14,7 @@
   "dependencies": {
     "@graphcommerce/graphql": "3.4.8",
     "@graphcommerce/next-ui": "4.27.0",
-    "@graphcommerce/react-hook-form": "3.3.3",
+    "@graphcommerce/react-hook-form": "3.3.4",
     "@mui/icons-material": "^5.10.3",
     "@mui/x-date-pickers": "^5.0.0",
     "react-hook-form-mui": "^5.7.1"