@graphcommerce/ecommerce-ui 1.5.2 → 1.5.3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @graphcommerce/ecommerce-ui
 
+## 1.5.3
+
+### Patch Changes
+
+- [#1665](https://github.com/graphcommerce-org/graphcommerce/pull/1665) [`fc32b9ab3`](https://github.com/graphcommerce-org/graphcommerce/commit/fc32b9ab3818eb99c546a89e7f42045a6fbfba81) Thanks [@paales](https://github.com/paales)! - Checkout page didn’t work, because the SelectElement broke when it received a null value.
+
+- Updated dependencies [[`1f2e14ba8`](https://github.com/graphcommerce-org/graphcommerce/commit/1f2e14ba8b674b87257a123e8cb215157890eb22)]:
+  - @graphcommerce/react-hook-form@3.3.5
+
 ## 1.5.2
 
 ### Patch Changes

package/components/FormComponents/SelectElement.tsx

@@ -0,0 +1,91 @@
+import {
+  Control,
+  Controller,
+  ControllerProps,
+  Path,
+  FieldValues,
+} from '@graphcommerce/react-hook-form'
+import { MenuItem, TextField, TextFieldProps } from '@mui/material'
+
+export type SelectElementProps<T extends FieldValues> = Omit<
+  TextFieldProps,
+  'name' | 'type' | 'onChange'
+> & {
+  validation?: ControllerProps['rules']
+  name: Path<T>
+  options?: { id: string | number; label: string | number }[] | any[]
+  valueKey?: string
+  labelKey?: string
+  type?: 'string' | 'number'
+  objectOnChange?: boolean
+  onChange?: (value: any) => void
+  control?: Control<T>
+}
+
+export function SelectElement<TFieldValues extends FieldValues>({
+  name,
+  required,
+  valueKey = 'id',
+  labelKey = 'label',
+  options = [],
+  type,
+  objectOnChange,
+  validation = {},
+  control,
+  ...rest
+}: SelectElementProps<TFieldValues>): JSX.Element {
+  const isNativeSelect = !!rest.SelectProps?.native
+  const ChildComponent = isNativeSelect ? 'option' : MenuItem
+
+  if (required && !validation.required) {
+    validation.required = 'This field is required'
+  }
+
+  return (
+    <Controller
+      name={name}
+      rules={validation}
+      control={control}
+      render={({ field: { onBlur, onChange, value }, fieldState: { invalid, error } }) => {
+        // handle shrink on number input fields
+        if (type === 'number' && typeof value !== 'undefined') {
+          rest.InputLabelProps = rest.InputLabelProps || {}
+          rest.InputLabelProps.shrink = true
+        }
+
+        return (
+          <TextField
+            {...rest}
+            name={name}
+            value={value ?? ''}
+            onBlur={onBlur}
+            onChange={(event) => {
+              let item: number | string = event.target.value
+              if (type === 'number') {
+                item = Number(item)
+              }
+              onChange(item)
+              if (typeof rest.onChange === 'function') {
+                if (objectOnChange) {
+                  item = options.find((i) => i[valueKey] === item)
+                }
+                rest.onChange(item)
+              }
+            }}
+            select
+            required={required}
+            error={invalid}
+            helperText={error ? error.message : rest.helperText}
+          >
+            {isNativeSelect && <option />}
+            {options.map((item: any) => (
+              <ChildComponent key={item[valueKey]} value={item[valueKey]}>
+                {item[labelKey]}
+              </ChildComponent>
+            ))}
+          </TextField>
+        )
+      }}
+    />
+  )
+}

package/components/FormComponents/index.ts

@@ -6,7 +6,6 @@ export {
   PasswordElement,
   PasswordRepeatElement,
   RadioButtonGroup,
-  SelectElement,
   SliderElement,
   SwitchElement,
   ToggleButtonGroupElement,
@@ -19,11 +18,11 @@ export type {
   PasswordElementProps,
   PasswordRepeatElementProps,
   RadioButtonGroupProps,
-  SelectElementProps,
   SliderElementProps,
   SwitchElementProps,
   ToggleButtonGroupElementProps,
 } from 'react-hook-form-mui'
 
 export * from './TextFieldElement'
+export * from './SelectElement'
 export * from './NumberFieldElement'

package/package.json

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