@graphcommerce/ecommerce-ui 1.5.2 → 1.5.4

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @graphcommerce/ecommerce-ui
 
+## 1.5.4
+
+### Patch Changes
+
+- [#1655](https://github.com/graphcommerce-org/graphcommerce/pull/1655) [`3dde492ad`](https://github.com/graphcommerce-org/graphcommerce/commit/3dde492ad3a49d96481eeb7453fb305d0017b1a5) Thanks [@FrankHarland](https://github.com/FrankHarland)! - Added Google Analytics support.
+
+- Updated dependencies [[`9e630670f`](https://github.com/graphcommerce-org/graphcommerce/commit/9e630670ff6c952ab7b938d890b5509804985cf3), [`cf3518499`](https://github.com/graphcommerce-org/graphcommerce/commit/cf351849999ad6fe73ce2bb258098a7dd301d517), [`2e9fa5984`](https://github.com/graphcommerce-org/graphcommerce/commit/2e9fa5984a07ff14fc1b3a4f62189a26e8e3ecdd), [`adf13069a`](https://github.com/graphcommerce-org/graphcommerce/commit/adf13069af6460c960276b402237371c12fc6dec), [`1b1504c9b`](https://github.com/graphcommerce-org/graphcommerce/commit/1b1504c9b0e51f2787bce91e1ff1940f540411d6), [`8a34f8081`](https://github.com/graphcommerce-org/graphcommerce/commit/8a34f808186274a6fe1d4f309472f1a9c6d00efd)]:
+  - @graphcommerce/next-ui@4.28.1
+  - @graphcommerce/graphql@3.5.0
+
+## 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/ComposedSubmitButton/ComposedSubmitButton.tsx

@@ -7,7 +7,8 @@ type ComposedSubmitButtonProps = ComposedSubmitRenderComponentProps &
 
 /** Makes a ComposedSubmitRenderComponent rendered as a LinkOrButton */
 export const ComposedSubmitButton = forwardRef<HTMLButtonElement, ComposedSubmitButtonProps>(
-  ({ buttonState, submit, error, children, ...otherProps }, ref) => {
+  (props, ref) => {
+    const { buttonState, submit, error, children, onClick, ...otherProps } = props
     const loading =
       buttonState.isSubmitting || (buttonState.isSubmitSuccessful && !error) ? true : undefined
 
@@ -20,7 +21,10 @@ export const ComposedSubmitButton = forwardRef<HTMLButtonElement, ComposedSubmit
         type='submit'
         {...otherProps}
         loading={loading}
-        onClick={submit}
+        onClick={(e) => {
+          onClick?.(e)
+          return submit()
+        }}
       >
         {children}
       </Button>

package/components/FormComponents/SelectElement.tsx

@@ -0,0 +1,85 @@
+import { Controller, ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
+import { MenuItem, TextField, TextFieldProps } from '@mui/material'
+
+export type SelectElementProps<T extends FieldValues> = Omit<
+  TextFieldProps,
+  'name' | 'type' | 'onChange' | 'defaultValue'
+> & {
+  validation?: ControllerProps['rules']
+  options?: { id: string | number; label: string | number }[] | any[]
+  valueKey?: string
+  labelKey?: string
+  type?: 'string' | 'number'
+  objectOnChange?: boolean
+  onChange?: (value: any) => void
+} & Pick<ControllerProps<T>, 'control' | 'defaultValue' | 'name'>
+
+export function SelectElement<TFieldValues extends FieldValues>({
+  name,
+  required,
+  valueKey = 'id',
+  labelKey = 'label',
+  options = [],
+  type,
+  objectOnChange,
+  validation = {},
+  control,
+  defaultValue,
+  ...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}
+      defaultValue={defaultValue}
+      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/components/WaitForQueries/WaitForQueries.tsx

@@ -2,7 +2,7 @@ import { QueryResult } from '@graphcommerce/graphql'
 import React, { startTransition, useEffect, useState } from 'react'
 
 export type WaitForQueriesProps = {
-  waitFor: QueryResult<any, any> | QueryResult<any, any>[] | undefined
+  waitFor: QueryResult<any, any> | boolean | (QueryResult<any, any> | boolean)[] | undefined
   children: React.ReactNode
   fallback?: React.ReactNode
 }
@@ -17,9 +17,10 @@ export const WaitForQueries = (props: WaitForQueriesProps) => {
   useEffect(() => startTransition(() => setMounted(true)), [])
 
   // We are done when all queries either have data or an error.
-  const isDone = (Array.isArray(waitFor) ? waitFor : [waitFor]).every(
-    (res) => (typeof res === 'undefined' || res.data || res.error || !res.loading) && mounted,
-  )
+  const isDone = (Array.isArray(waitFor) ? waitFor : [waitFor]).every((res) => {
+    if (typeof res === 'boolean') return res && mounted
+    return (typeof res === 'undefined' || res.data || res.error || !res.loading) && mounted
+  })
 
   return <>{isDone && mounted ? children : fallback}</>
 }

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.4",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,9 +12,9 @@
     }
   },
   "dependencies": {
-    "@graphcommerce/graphql": "3.4.8",
-    "@graphcommerce/next-ui": "4.28.0",
-    "@graphcommerce/react-hook-form": "3.3.4",
+    "@graphcommerce/graphql": "3.5.0",
+    "@graphcommerce/next-ui": "4.28.1",
+    "@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"