@graphcommerce/ecommerce-ui 5.2.0-canary.2 → 5.2.0-canary.3

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @graphcommerce/ecommerce-ui
 
+## 5.2.0-canary.3
+
 ## 5.2.0-canary.2
 
 ## 5.2.0-canary.1

package/components/FormComponents/AutoCompleteElement.tsx

@@ -20,13 +20,10 @@ export type AutocompleteElementProps<
   M extends boolean | undefined,
   D extends boolean | undefined,
 > = {
-  name: Path<F>
-  control?: Control<F>
   options: T[]
   loading?: boolean
   multiple?: M
   matchId?: boolean
-  rules?: ControllerProps['rules']
   required?: boolean
   label?: TextFieldProps['label']
   showCheckbox?: boolean
@@ -35,7 +32,7 @@ export type AutocompleteElementProps<
     'name' | 'options' | 'loading' | 'renderInput'
   >
   textFieldProps?: Omit<TextFieldProps, 'name' | 'required' | 'label'>
-}
+} & ControllerProps<F>
 
 type AutoDefault = {
   id: string | number // must keep id in case of keepObject

package/components/FormComponents/CheckboxButtonGroup.tsx

@@ -1,9 +1,8 @@
 import {
-  Control,
   FieldError,
-  Path,
   useController,
   FieldValues,
+  UseControllerProps,
 } from '@graphcommerce/react-hook-form'
 import {
   Checkbox,
@@ -19,7 +18,6 @@ import {
 export type CheckboxButtonGroupProps<T extends FieldValues> = {
   options: { id: string | number; label: string }[] | any[]
   helperText?: string
-  name: Path<T>
   required?: boolean
   parseError?: (error: FieldError) => string
   label?: string
@@ -29,9 +27,8 @@ export type CheckboxButtonGroupProps<T extends FieldValues> = {
   returnObject?: boolean
   disabled?: boolean
   row?: boolean
-  control?: Control<T>
   checkboxColor?: CheckboxProps['color']
-}
+} & UseControllerProps<T>
 
 export function CheckboxButtonGroup<TFieldValues extends FieldValues>({
   helperText,

package/components/FormComponents/CheckboxElement.tsx

@@ -1,9 +1,7 @@
 import {
-  Control,
   Controller,
   ControllerProps,
   FieldError,
-  Path,
   FieldValues,
 } from '@graphcommerce/react-hook-form'
 import {
@@ -17,17 +15,14 @@ import {
 } from '@mui/material'
 
 export type CheckboxElementProps<T extends FieldValues> = Omit<CheckboxProps, 'name'> & {
-  validation?: ControllerProps['rules']
-  name: Path<T>
   parseError?: (error: FieldError) => string
   label?: FormControlLabelProps['label']
   helperText?: string
-  control?: Control<T>
-}
+} & Omit<ControllerProps<T>, 'render'>
 
 export function CheckboxElement<TFieldValues extends FieldValues>({
   name,
-  validation = {},
+  rules = {},
   required,
   parseError,
   label,
@@ -35,14 +30,14 @@ export function CheckboxElement<TFieldValues extends FieldValues>({
   helperText,
   ...rest
 }: CheckboxElementProps<TFieldValues>): JSX.Element {
-  if (required && !validation.required) {
-    validation.required = 'This field is required'
+  if (required && !rules.required) {
+    rules.required = 'This field is required'
   }
 
   return (
     <Controller
       name={name}
-      rules={validation}
+      rules={rules}
       control={control}
       render={({ field: { value, onChange }, fieldState: { invalid, error } }) => {
         const parsedHelperText = error

package/components/FormComponents/MultiSelectElement.tsx

@@ -1,6 +1,11 @@
 /* eslint-disable no-nested-ternary */
 import { IconSvg, iconClose } from '@graphcommerce/next-ui'
-import { Control, Controller, FieldError, Path, FieldValues } from '@graphcommerce/react-hook-form'
+import {
+  Controller,
+  FieldError,
+  FieldValues,
+  ControllerProps,
+} from '@graphcommerce/react-hook-form'
 import {
   Checkbox,
   Chip,
@@ -21,18 +26,15 @@ export type MultiSelectElementProps<T extends FieldValues> = Omit<SelectProps, '
   itemValue?: string
   itemLabel?: string
   required?: boolean
-  validation?: any
-  name: Path<T>
   parseError?: (error: FieldError) => string
   minWidth?: number
   menuMaxHeight?: number
   menuMaxWidth?: number
   helperText?: string
   showChips?: boolean
-  control?: Control<T>
   showCheckbox?: boolean
   formControlProps?: Omit<FormControlProps, 'fullWidth' | 'variant'>
-}
+} & Omit<ControllerProps<T>, 'render'>
 
 const ITEM_HEIGHT = 48
 const ITEM_PADDING_TOP = 8
@@ -47,7 +49,7 @@ export function MultiSelectElement<TFieldValues extends FieldValues>(
     itemValue = '',
     itemLabel = 'label',
     required = false,
-    validation = {},
+    rules = {},
     parseError,
     name,
     menuMaxHeight = ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
@@ -60,14 +62,14 @@ export function MultiSelectElement<TFieldValues extends FieldValues>(
     formControlProps,
     ...rest
   } = props
-  if (required && !validation.required) {
-    validation.required = 'This field is required'
+  if (required && !rules.required) {
+    rules.required = 'This field is required'
   }
 
   return (
     <Controller
       name={name}
-      rules={validation}
+      rules={rules}
       control={control}
       render={({ field: { value, onChange, onBlur }, fieldState: { invalid, error } }) => {
         helperText = error

package/components/FormComponents/PasswordRepeatElement.tsx

@@ -3,16 +3,14 @@ import { i18n } from '@lingui/core'
 import { PasswordElement, PasswordElementProps } from './PasswordElement'
 
 export type PasswordRepeatElementProps<T extends FieldValues> = PasswordElementProps<T> & {
-  passwordFieldName: Path<T>
+  passwordFieldName: PasswordElementProps<T>['name']
 }
+
 export function PasswordRepeatElement<TFieldValues extends FieldValues>({
   passwordFieldName,
   ...rest
 }: PasswordRepeatElementProps<TFieldValues>) {
-  const pwValue = useWatch({
-    name: passwordFieldName,
-    control: rest.control,
-  })
+  const pwValue = useWatch({ name: passwordFieldName, control: rest.control })
   return (
     <PasswordElement
       {...rest}

package/components/FormComponents/RadioButtonGroup.tsx

@@ -1,9 +1,8 @@
 import {
-  Control,
   FieldError,
-  Path,
   useController,
   FieldValues,
+  UseControllerProps,
 } from '@graphcommerce/react-hook-form'
 import {
   FormControl,
@@ -19,7 +18,6 @@ import { ChangeEvent } from 'react'
 export type RadioButtonGroupProps<T extends FieldValues> = {
   options: { label: string; id: string | number }[] | any[]
   helperText?: string
-  name: Path<T>
   required?: boolean
   parseError?: (error: FieldError) => string
   label?: string
@@ -30,8 +28,7 @@ export type RadioButtonGroupProps<T extends FieldValues> = {
   onChange?: (value: any) => void
   returnObject?: boolean
   row?: boolean
-  control?: Control<T>
-}
+} & UseControllerProps<T>
 
 export function RadioButtonGroup<TFieldValues extends FieldValues>({
   helperText,

package/components/FormComponents/SelectElement.tsx

@@ -12,7 +12,7 @@ export type SelectElementProps<T extends FieldValues> = Omit<
   type?: 'string' | 'number'
   objectOnChange?: boolean
   onChange?: (value: any) => void
-} & Pick<ControllerProps<T>, 'control' | 'defaultValue' | 'name'>
+} & Omit<ControllerProps<T>, 'render'>
 
 export function SelectElement<TFieldValues extends FieldValues>({
   name,

package/components/FormComponents/SliderElement.tsx

@@ -1,9 +1,7 @@
 import {
-  Control,
   Controller,
   ControllerProps,
   FieldError,
-  Path,
   FieldValues,
 } from '@graphcommerce/react-hook-form'
 import {
@@ -16,14 +14,11 @@ import {
 } from '@mui/material'
 
 export type SliderElementProps<T extends FieldValues> = Omit<SliderProps, 'control'> & {
-  name: Path<T>
-  control?: Control<T>
   label?: string
-  rules?: ControllerProps['rules']
   parseError?: (error: FieldError) => string
   required?: boolean
   formControlProps?: FormControlProps
-}
+} & Omit<ControllerProps<T>, 'render'>
 
 export function SliderElement<TFieldValues extends FieldValues>({
   name,

package/components/FormComponents/SwitchElement.tsx

@@ -1,12 +1,9 @@
-import { Control, Controller, Path, FieldValues } from '@graphcommerce/react-hook-form'
+import { Controller, FieldValues, ControllerProps } from '@graphcommerce/react-hook-form'
 import { FormControlLabel, FormControlLabelProps, Switch } from '@mui/material'
 
 type IProps = Omit<FormControlLabelProps, 'control'>
 
-export type SwitchElementProps<T extends FieldValues> = IProps & {
-  name: Path<T>
-  control?: Control<T>
-}
+export type SwitchElementProps<T extends FieldValues> = IProps & Omit<ControllerProps<T>, 'render'>
 
 export function SwitchElement<TFieldValues extends FieldValues>({
   name,

package/components/FormComponents/TextFieldElement.tsx

@@ -13,7 +13,7 @@ export type TextFieldElementProps<T extends FieldValues = FieldValues> = Omit<
 > & {
   validation?: ControllerProps['rules']
   parseError?: (error: FieldError) => string
-} & Pick<ControllerProps<T>, 'control' | 'defaultValue' | 'name'>
+} & Omit<ControllerProps<T>, 'render'>
 
 /** This is a copy of the default one, but allowing defaultValue */
 export function TextFieldElement<TFieldValues extends FieldValues = FieldValues>({

package/components/FormComponents/ToggleButtonGroup.tsx

@@ -1,9 +1,7 @@
 import {
-  Control,
   Controller,
   ControllerProps,
   FieldError,
-  Path,
   FieldValues,
 } from '@graphcommerce/react-hook-form'
 import {
@@ -26,20 +24,17 @@ type SingleToggleButtonProps = Omit<ToggleButtonProps, 'value' | 'children'> & {
 export type ToggleButtonGroupElementProps<T extends FieldValues> = ToggleButtonGroupProps & {
   required?: boolean
   label?: string
-  validation?: ControllerProps['rules']
-  name: Path<T>
   parseError?: (error: FieldError) => string
-  control?: Control<T>
   options: SingleToggleButtonProps[]
   formLabelProps?: FormLabelProps
   helperText?: string
-}
+} & Omit<ControllerProps<T>, 'render'>
 
 export function ToggleButtonGroupElement<TFieldValues extends FieldValues = FieldValues>({
   name,
   control,
   label,
-  validation = {},
+  rules = {},
   required,
   options = [],
   parseError,
@@ -47,16 +42,16 @@ export function ToggleButtonGroupElement<TFieldValues extends FieldValues = Fiel
   formLabelProps,
   ...toggleButtonGroupProps
 }: ToggleButtonGroupElementProps<TFieldValues>) {
-  if (required && !validation.required) {
-    validation.required = 'This field is required'
+  if (required && !rules.required) {
+    rules.required = 'This field is required'
   }
 
-  const isRequired = required || !!validation?.required
+  const isRequired = required || !!rules?.required
   return (
     <Controller
       name={name}
       control={control}
-      rules={validation}
+      rules={rules}
       render={({ field: { value, onChange, onBlur }, fieldState: { invalid, error } }) => {
         const renderHelperText = error
           ? typeof parseError === 'function'

package/package.json

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