@graphcommerce/ecommerce-ui 8.0.3-canary.3 → 8.0.3-canary.5

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @graphcommerce/ecommerce-ui
 
+## 8.0.3-canary.5
+
+### Patch Changes
+
+- [#2212](https://github.com/graphcommerce-org/graphcommerce/pull/2212) [`e12d1dc`](https://github.com/graphcommerce-org/graphcommerce/commit/e12d1dc201bf7b23a996bd58a256a117b91a9334) - Rename validation to rules for all Form field components and deprecate validation
+  ([@paales](https://github.com/paales))
+
+## 8.0.3-canary.4
+
+### Patch Changes
+
+- [#2203](https://github.com/graphcommerce-org/graphcommerce/pull/2203) [`7ef7dc7`](https://github.com/graphcommerce-org/graphcommerce/commit/7ef7dc7631f61a2feba67a531a210df9c22fed4b) - CheckboxElement, MultiSelectElement, NumberFieldElement, SelectElement, SliderElement and TextFieldElement have their inputRef passed, allowing focus to be set by the form.
+  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
 ## 8.0.3-canary.3
 
 ## 8.0.3-canary.2

package/components/FormComponents/CheckboxButtonGroup.tsx

@@ -21,6 +21,7 @@ export type CheckboxButtonGroupProps<T extends FieldValues> = {
   options: { id: string | number; label: string }[] | any[]
   helperText?: string
   required?: boolean
+  /** @deprecated Form value parsing should happen in the handleSubmit function of the form */
   parseError?: (error: FieldError) => string
   label?: string
   labelKey?: string

package/components/FormComponents/CheckboxElement.tsx

@@ -19,6 +19,7 @@ import {
 } from '@mui/material'
 
 export type CheckboxElementProps<T extends FieldValues> = Omit<CheckboxProps, 'name'> & {
+  /** @deprecated Form value parsing should happen in the handleSubmit function of the form */
   parseError?: (error: FieldError) => string
   label?: FormControlLabelProps['label']
   helperText?: string
@@ -47,7 +48,8 @@ export function CheckboxElement<TFieldValues extends FieldValues>({
       name={name}
       rules={rules}
       control={control}
-      render={({ field: { value, onChange }, fieldState: { invalid, error } }) => {
+      render={({ field: { value, onChange, ref, ...field }, fieldState: { invalid, error } }) => {
+        // eslint-disable-next-line no-nested-ternary
         const parsedHelperText = error
           ? typeof parseError === 'function'
             ? parseError(error)
@@ -61,6 +63,8 @@ export function CheckboxElement<TFieldValues extends FieldValues>({
                 control={
                   <Checkbox
                     {...rest}
+                    {...field}
+                    inputRef={ref}
                     color={rest.color || 'primary'}
                     sx={{
                       ...(Array.isArray(sx) ? sx : [sx]),
@@ -68,9 +72,7 @@ export function CheckboxElement<TFieldValues extends FieldValues>({
                     }}
                     value={value}
                     checked={!!value}
-                    onChange={() => {
-                      onChange(!value)
-                    }}
+                    onChange={() => onChange(!value)}
                   />
                 }
               />

package/components/FormComponents/MultiSelectElement.tsx

@@ -27,6 +27,7 @@ export type MultiSelectElementProps<T extends FieldValues> = Omit<SelectProps, '
   itemValue?: string
   itemLabel?: string
   required?: boolean
+  /** @deprecated Form value parsing should happen in the handleSubmit function of the form */
   parseError?: (error: FieldError) => string
   minWidth?: number
   menuMaxHeight?: number
@@ -72,7 +73,7 @@ export function MultiSelectElement<TFieldValues extends FieldValues>(
       name={name}
       rules={rules}
       control={control}
-      render={({ field: { value, onChange, onBlur }, fieldState: { invalid, error } }) => {
+      render={({ field: { value, onChange, ...field }, fieldState: { invalid, error } }) => {
         helperText = error
           ? typeof parseError === 'function'
             ? parseError(error)
@@ -102,6 +103,7 @@ export function MultiSelectElement<TFieldValues extends FieldValues>(
             )}
             <Select
               {...rest}
+              {...field}
               id={rest.id || `select-multi-select-${name}`}
               multiple
               label={label || undefined}
@@ -109,7 +111,6 @@ export function MultiSelectElement<TFieldValues extends FieldValues>(
               value={value || []}
               required={required}
               onChange={onChange}
-              onBlur={onBlur}
               MenuProps={{
                 ...rest.MenuProps,
                 PaperProps: {
@@ -126,23 +127,23 @@ export function MultiSelectElement<TFieldValues extends FieldValues>(
                 typeof rest.renderValue === 'function'
                   ? rest.renderValue
                   : showChips
-                  ? (selected) => (
-                      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-                        {((selected as any[]) || []).map((selectedValue) => (
-                          <Chip
-                            key={selectedValue}
-                            label={selectedValue}
-                            style={{ display: 'flex', flexWrap: 'wrap' }}
-                            onDelete={() => {
-                              onChange(value.filter((i: any) => i !== selectedValue))
-                              // setValue(name, formValue.filter((i: any) => i !== value), { shouldValidate: true })
-                            }}
-                            deleteIcon={<IconSvg src={iconClose} />}
-                          />
-                        ))}
-                      </div>
-                    )
-                  : (selected) => (Array.isArray(selected) ? selected.join(', ') : '')
+                    ? (selected) => (
+                        <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+                          {((selected as any[]) || []).map((selectedValue) => (
+                            <Chip
+                              key={selectedValue}
+                              label={selectedValue}
+                              style={{ display: 'flex', flexWrap: 'wrap' }}
+                              onDelete={() => {
+                                onChange(value.filter((i: any) => i !== selectedValue))
+                                // setValue(name, formValue.filter((i: any) => i !== value), { shouldValidate: true })
+                              }}
+                              deleteIcon={<IconSvg src={iconClose} />}
+                            />
+                          ))}
+                        </div>
+                      )
+                    : (selected) => (Array.isArray(selected) ? selected.join(', ') : '')
               }
             >
               {options.map((item) => {

package/components/FormComponents/NumberFieldElement.tsx

@@ -54,21 +54,21 @@ export function NumberFieldElement<T extends FieldValues>(props: NumberFieldElem
       control={control}
       rules={rules}
       defaultValue={defaultValue}
-      render={({ field: { value, onChange, onBlur }, fieldState: { invalid, error } }) => {
+      render={({ field: { value, onChange, ref, ...field }, fieldState: { invalid, error } }) => {
         const valueAsNumber = value ? parseFloat(value) : 0
 
         return (
           <TextField
             {...textFieldProps}
-            variant={variant}
-            name={name}
+            {...field}
+            inputRef={ref}
             value={value ?? ''}
             onChange={(ev) => {
               const newValue = (ev.target as HTMLInputElement).valueAsNumber
               onChange(Number.isNaN(newValue) ? '' : newValue)
               textFieldProps.onChange?.(ev)
             }}
-            onBlur={onBlur}
+            variant={variant}
             required={required}
             error={invalid}
             helperText={error ? error.message : textFieldProps.helperText}

package/components/FormComponents/PasswordRepeatElement.tsx

@@ -14,7 +14,7 @@ export function PasswordRepeatElement<TFieldValues extends FieldValues>({
   return (
     <PasswordElement
       {...rest}
-      validation={{
+      rules={{
         validate: (value: string) =>
           value === pwValue || i18n._(/* i18n */ "Passwords don't match"),
       }}

package/components/FormComponents/RadioButtonGroup.tsx

@@ -20,6 +20,7 @@ export type RadioButtonGroupProps<T extends FieldValues> = {
   options: { label: string; id: string | number }[] | any[]
   helperText?: string
   required?: boolean
+  /** @deprecated Form value parsing should happen in the handleSubmit function of the form */
   parseError?: (error: FieldError) => string
   label?: string
   labelKey?: string

package/components/FormComponents/SelectElement.tsx

@@ -8,6 +8,7 @@ export type SelectElementProps<T extends FieldValues, O extends OptionBase> = Om
   TextFieldProps,
   'name' | 'type' | 'onChange' | 'defaultValue'
 > & {
+  /** @deprecated Please use the rules props instead */
   validation?: ControllerProps<T>['rules']
   options?: O[]
   type?: 'string' | 'number'
@@ -19,25 +20,26 @@ export function SelectElement<TFieldValues extends FieldValues, O extends Option
   required,
   options = [],
   type,
-  validation = {},
+  validation,
   control,
   defaultValue,
+  rules = validation ?? {},
   ...rest
 }: SelectElementProps<TFieldValues, O>): JSX.Element {
   const isNativeSelect = !!rest.SelectProps?.native
   const ChildComponent = isNativeSelect ? 'option' : MenuItem
 
-  if (required && !validation.required) {
-    validation.required = i18n._(/* i18n */ 'This field is required')
+  if (required && !rules.required) {
+    rules.required = i18n._(/* i18n */ 'This field is required')
   }
 
   return (
     <Controller
       name={name}
-      rules={validation}
+      rules={rules}
       control={control}
       defaultValue={defaultValue}
-      render={({ field: { onBlur, onChange, value }, fieldState: { invalid, error } }) => {
+      render={({ field: { onChange, value, ref, ...field }, fieldState: { invalid, error } }) => {
         // handle shrink on number input fields
         if (type === 'number' && typeof value !== 'undefined') {
           rest.InputLabelProps = rest.InputLabelProps || {}
@@ -47,9 +49,9 @@ export function SelectElement<TFieldValues extends FieldValues, O extends Option
         return (
           <TextField
             {...rest}
-            name={name}
             value={value ?? ''}
-            onBlur={onBlur}
+            {...field}
+            inputRef={ref}
             onChange={(event) => {
               let item: number | string | O | undefined = event.target.value
               if (type === 'number') item = Number(item)

package/components/FormComponents/SliderElement.tsx

@@ -16,6 +16,7 @@ import {
 
 export type SliderElementProps<T extends FieldValues> = Omit<SliderProps, 'control'> & {
   label?: string
+  /** @deprecated Form value parsing should happen in the handleSubmit function of the form */
   parseError?: (error: FieldError) => string
   required?: boolean
   formControlProps?: FormControlProps
@@ -39,7 +40,7 @@ export function SliderElement<TFieldValues extends FieldValues>({
       name={name}
       control={control}
       rules={rules}
-      render={({ field: { onChange, value }, fieldState: { invalid, error } }) => {
+      render={({ field, fieldState: { invalid, error } }) => {
         const parsedHelperText = error
           ? typeof parseError === 'function'
             ? parseError(error)
@@ -52,12 +53,7 @@ export function SliderElement<TFieldValues extends FieldValues>({
                 {label}
               </FormLabel>
             )}
-            <Slider
-              {...other}
-              value={value}
-              onChange={onChange}
-              valueLabelDisplay={other.valueLabelDisplay || 'auto'}
-            />
+            <Slider {...other} {...field} valueLabelDisplay={other.valueLabelDisplay || 'auto'} />
             {parsedHelperText && (
               <FormHelperText error={invalid}>{parsedHelperText}</FormHelperText>
             )}

package/components/FormComponents/TextFieldElement.tsx

@@ -1,10 +1,5 @@
 /* eslint-disable no-nested-ternary */
-import {
-  Controller,
-  FieldError,
-  FieldValues,
-  UseControllerProps,
-} from '@graphcommerce/react-hook-form'
+import { Controller, FieldValues, UseControllerProps } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import { TextField, TextFieldProps } from '@mui/material'
 
@@ -12,8 +7,9 @@ export type TextFieldElementProps<T extends FieldValues = FieldValues> = Omit<
   TextFieldProps,
   'name' | 'defaultValue'
 > & {
+  /** @deprecated Please use the rules props instead */
   validation?: UseControllerProps<T>['rules']
-} & Omit<UseControllerProps<T>, 'rules'>
+} & UseControllerProps<T>
 
 export function TextFieldElement<TFieldValues extends FieldValues>({
   validation = {},
@@ -22,14 +18,15 @@ export function TextFieldElement<TFieldValues extends FieldValues>({
   name,
   control,
   defaultValue,
+  rules = validation,
   ...rest
 }: TextFieldElementProps<TFieldValues>): JSX.Element {
-  if (required && !validation.required) {
-    validation.required = i18n._(/* i18n */ 'This field is required')
+  if (required && !rules.required) {
+    rules.required = i18n._(/* i18n */ 'This field is required')
   }
 
-  if (type === 'email' && !validation.pattern) {
-    validation.pattern = {
+  if (type === 'email' && !rules.pattern) {
+    rules.pattern = {
       // eslint-disable-next-line no-useless-escape
       value:
         /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
@@ -41,25 +38,23 @@ export function TextFieldElement<TFieldValues extends FieldValues>({
     <Controller
       name={name}
       control={control}
-      rules={validation}
+      rules={rules}
       defaultValue={defaultValue}
-      render={({ field: { value, onChange, onBlur, ref }, fieldState: { error } }) => (
+      render={({ field: { onChange, ref, ...field }, fieldState: { error } }) => (
         <TextField
           {...rest}
-          name={name}
-          value={value ?? ''}
+          {...field}
           onChange={(ev) => {
             onChange(
               type === 'number' && ev.target.value ? Number(ev.target.value) : ev.target.value,
             )
             rest.onChange?.(ev)
           }}
-          onBlur={onBlur}
+          inputRef={ref}
           required={required}
           type={type}
           error={Boolean(error) || rest.error}
           helperText={error ? error.message : rest.helperText}
-          inputRef={ref}
         />
       )}
     />

package/components/FormComponents/ToggleButtonGroup.tsx

@@ -25,6 +25,7 @@ type SingleToggleButtonProps = Omit<ToggleButtonProps, 'value' | 'children'> & {
 export type ToggleButtonGroupElementProps<T extends FieldValues> = ToggleButtonGroupProps & {
   required?: boolean
   label?: string
+  /** @deprecated Form value parsing should happen in the handleSubmit function of the form */
   parseError?: (error: FieldError) => string
   options: SingleToggleButtonProps[]
   formLabelProps?: FormLabelProps

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/ecommerce-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.0.3-canary.3",
+  "version": "8.0.3-canary.5",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,12 +12,12 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.0.3-canary.3",
-    "@graphcommerce/graphql": "^8.0.3-canary.3",
-    "@graphcommerce/next-ui": "^8.0.3-canary.3",
-    "@graphcommerce/prettier-config-pwa": "^8.0.3-canary.3",
-    "@graphcommerce/react-hook-form": "^8.0.3-canary.3",
-    "@graphcommerce/typescript-config-pwa": "^8.0.3-canary.3",
+    "@graphcommerce/eslint-config-pwa": "^8.0.3-canary.5",
+    "@graphcommerce/graphql": "^8.0.3-canary.5",
+    "@graphcommerce/next-ui": "^8.0.3-canary.5",
+    "@graphcommerce/prettier-config-pwa": "^8.0.3-canary.5",
+    "@graphcommerce/react-hook-form": "^8.0.3-canary.5",
+    "@graphcommerce/typescript-config-pwa": "^8.0.3-canary.5",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",