@graphcommerce/ecommerce-ui 6.0.0-canary.26 → 6.0.0-canary.27

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @graphcommerce/ecommerce-ui
 
+## 6.0.0-canary.27
+
+### Patch Changes
+
+- [#1821](https://github.com/graphcommerce-org/graphcommerce/pull/1821) [`1abc50a21`](https://github.com/graphcommerce-org/graphcommerce/commit/1abc50a21103270fad04e4a9ea892ee1e75233e9) - Fix regression bugs and upgrade packages to latest versions ([@paales](https://github.com/paales))
+
 ## 6.0.0-canary.26
 
 ## 6.0.0-canary.25

package/components/FormComponents/AutoCompleteElement.tsx

@@ -52,7 +52,7 @@ export function AutocompleteElement<TFieldValues extends FieldValues>({
   boolean | undefined,
   boolean | undefined
 >) {
-  const validationRules: ControllerProps['rules'] = {
+  const validationRules: ControllerProps<TFieldValues>['rules'] = {
     ...rules,
     ...(required && {
       required: rules?.required || 'This field is required',
@@ -64,7 +64,7 @@ export function AutocompleteElement<TFieldValues extends FieldValues>({
       control={control}
       rules={validationRules}
       render={({ field: { onChange, onBlur, value, ...fieldRest }, fieldState: { error } }) => {
-        const values = Array.isArray(value) ? (value as typeof value[]) : [value]
+        const values = Array.isArray(value) ? (value as (typeof value)[]) : [value]
         let currentValue = multiple ? value || [] : value || null
         if (matchId) {
           currentValue = multiple

package/components/FormComponents/NumberFieldElement.tsx

@@ -33,9 +33,7 @@ const { withState } = extendableComponent<OwnerState, typeof componentName, type
   parts,
 )
 
-export function NumberFieldElement<T extends FieldValues = FieldValues>(
-  props: NumberFieldElementProps<T>,
-) {
+export function NumberFieldElement<T extends FieldValues>(props: NumberFieldElementProps<T>) {
   const {
     DownProps = {},
     UpProps = {},

package/components/FormComponents/SelectElement.tsx

@@ -5,7 +5,7 @@ export type SelectElementProps<T extends FieldValues> = Omit<
   TextFieldProps,
   'name' | 'type' | 'onChange' | 'defaultValue'
 > & {
-  validation?: ControllerProps['rules']
+  validation?: ControllerProps<T>['rules']
   options?: { id: string | number; label: string | number }[] | any[]
   valueKey?: string
   labelKey?: string

package/components/FormComponents/TextFieldElement.tsx

@@ -1,8 +1,10 @@
+/* eslint-disable no-nested-ternary */
 import {
   Controller,
   ControllerProps,
   FieldError,
   FieldValues,
+  UseControllerProps,
 } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import { TextField, TextFieldProps } from '@mui/material'
@@ -11,12 +13,11 @@ export type TextFieldElementProps<T extends FieldValues = FieldValues> = Omit<
   TextFieldProps,
   'name' | 'defaultValue'
 > & {
-  validation?: ControllerProps['rules']
+  validation?: UseControllerProps<T>['rules']
   parseError?: (error: FieldError) => string
-} & Omit<ControllerProps<T>, 'render'>
+} & UseControllerProps<T>
 
-/** This is a copy of the default one, but allowing defaultValue */
-export function TextFieldElement<TFieldValues extends FieldValues = FieldValues>({
+export function TextFieldElement<TFieldValues extends FieldValues>({
   validation = {},
   parseError,
   type,
@@ -45,21 +46,21 @@ export function TextFieldElement<TFieldValues extends FieldValues = FieldValues>
       control={control}
       rules={validation}
       defaultValue={defaultValue}
-      render={({ field: { value, onChange, onBlur }, fieldState: { invalid, error } }) => (
+      render={({ field: { value, onChange, onBlur, ref }, fieldState: { error } }) => (
         <TextField
           {...rest}
           name={name}
           value={value ?? ''}
           onChange={(ev) => {
-            onChange(ev)
-            if (typeof rest.onChange === 'function') {
-              rest?.onChange(ev)
-            }
+            onChange(
+              type === 'number' && ev.target.value ? Number(ev.target.value) : ev.target.value,
+            )
+            rest.onChange?.(ev)
           }}
           onBlur={onBlur}
           required={required}
           type={type}
-          error={invalid}
+          error={!!error}
           helperText={
             error
               ? typeof parseError === 'function'
@@ -67,6 +68,7 @@ export function TextFieldElement<TFieldValues extends FieldValues = FieldValues>
                 : error.message
               : rest.helperText
           }
+          inputRef={ref}
         />
       )}
     />

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/ecommerce-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "6.0.0-canary.26",
+  "version": "6.0.0-canary.27",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,21 +12,21 @@
     }
   },
   "dependencies": {
-    "@graphcommerce/graphql": "6.0.0-canary.26",
-    "@graphcommerce/next-ui": "6.0.0-canary.26",
-    "@graphcommerce/react-hook-form": "6.0.0-canary.26"
+    "@graphcommerce/graphql": "6.0.0-canary.27",
+    "@graphcommerce/next-ui": "6.0.0-canary.27",
+    "@graphcommerce/react-hook-form": "6.0.0-canary.27"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "6.0.0-canary.26",
-    "@graphcommerce/prettier-config-pwa": "6.0.0-canary.26",
-    "@graphcommerce/typescript-config-pwa": "6.0.0-canary.26"
+    "@graphcommerce/eslint-config-pwa": "6.0.0-canary.27",
+    "@graphcommerce/prettier-config-pwa": "6.0.0-canary.27",
+    "@graphcommerce/typescript-config-pwa": "6.0.0-canary.27"
   },
   "peerDependencies": {
     "@lingui/react": "^3.13.2",
     "@lingui/core": "^3.13.2",
     "@mui/material": "^5.10.16",
     "framer-motion": "^7.0.0",
-    "next": "^13.1.1",
+    "next": "^13.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }