@graphcommerce/ecommerce-ui 9.0.0-canary.106 → 9.0.0-canary.108

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @graphcommerce/ecommerce-ui
 
+## 9.0.0-canary.108
+
+### Patch Changes
+
+- [#2424](https://github.com/graphcommerce-org/graphcommerce/pull/2424) [`66b4188`](https://github.com/graphcommerce-org/graphcommerce/commit/66b418809ad4db2a465c4112ff9850ce0cfe611c) - Omit disableUnderline prop for ‘outlined’ variant, because its not supported. ([@carlocarels90](https://github.com/carlocarels90))
+
+- [#2438](https://github.com/graphcommerce-org/graphcommerce/pull/2438) [`cb8d2f0`](https://github.com/graphcommerce-org/graphcommerce/commit/cb8d2f0059d64242260e30ce34655868f204ef4c) - Made all component prop types exported ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2438](https://github.com/graphcommerce-org/graphcommerce/pull/2438) [`49937fd`](https://github.com/graphcommerce-org/graphcommerce/commit/49937fd765338e25899d427ee4d799fa7978faeb) - Allow changing various props for internal components ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 9.0.0-canary.107
+
+### Patch Changes
+
+- [#2436](https://github.com/graphcommerce-org/graphcommerce/pull/2436) [`55f94c5`](https://github.com/graphcommerce-org/graphcommerce/commit/55f94c5dd70e88b8fbfb46e75b500db296937c33) - Added ref forwarding for the inputRef ([@paales](https://github.com/paales))
+
 ## 9.0.0-canary.106
 
 ## 9.0.0-canary.105

package/components/ApolloError/ApolloErrorSnackbar.tsx

@@ -8,7 +8,7 @@ export type ApolloErrorSnackbarProps = {
 } & Pick<ErrorSnackbarProps, 'action' | 'onClose'>
 
 export function ApolloErrorSnackbar(props: ApolloErrorSnackbarProps) {
-  const { error, action, ...passedProps } = props
+  const { error, ...passedProps } = props
 
   if (!error) return null
 

package/components/ComposedSubmitButton/ComposedSubmitButton.tsx

@@ -3,7 +3,7 @@ import { Button, IconSvg, iconChevronRight } from '@graphcommerce/next-ui'
 import type { ComposedSubmitRenderComponentProps } from '@graphcommerce/react-hook-form'
 import { forwardRef } from 'react'
 
-type ComposedSubmitButtonProps = ComposedSubmitRenderComponentProps &
+export type ComposedSubmitButtonProps = ComposedSubmitRenderComponentProps &
   Omit<ButtonProps, 'loading' | 'onSubmit'>
 
 /** Makes a ComposedSubmitRenderComponent rendered as a LinkOrButton */

package/components/ComposedSubmitButton/ComposedSubmitLinkOrButton.tsx

@@ -3,7 +3,7 @@ import { IconSvg, LinkOrButton, iconChevronRight } from '@graphcommerce/next-ui'
 import type { ComposedSubmitRenderComponentProps } from '@graphcommerce/react-hook-form'
 import { forwardRef } from 'react'
 
-type ComposedLinkOrButtonProps = ComposedSubmitRenderComponentProps &
+export type ComposedLinkOrButtonProps = ComposedSubmitRenderComponentProps &
   Omit<LinkOrButtonProps, 'loading'>
 
 /** Makes a ComposedSubmitRenderComponent rendered as a LinkOrButton */

package/components/FormComponents/CheckboxElement.tsx

@@ -8,7 +8,14 @@ import type {
   SxProps,
   Theme,
 } from '@mui/material'
-import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText } from '@mui/material'
+import {
+  Checkbox,
+  FormControl,
+  FormControlLabel,
+  FormGroup,
+  FormHelperText,
+  useForkRef,
+} from '@mui/material'
 
 export type CheckboxElementProps<T extends FieldValues> = Omit<CheckboxProps, 'name'> & {
   label?: FormControlLabelProps['label']
@@ -62,7 +69,7 @@ export function CheckboxElement<TFieldValues extends FieldValues>(
             <Checkbox
               {...rest}
               {...field}
-              inputRef={ref}
+              inputRef={useForkRef(ref, rest.inputRef)}
               color={rest.color || 'primary'}
               sx={{
                 ...(Array.isArray(sx) ? sx : [sx]),

package/components/FormComponents/NumberFieldElement.tsx

@@ -1,15 +1,15 @@
 import {
-  IconSvg,
   extendableComponent,
   iconMin,
   iconPlus,
+  IconSvg,
   responsiveVal,
 } from '@graphcommerce/next-ui'
 import type { ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
 import { Controller, useController } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import type { IconButtonProps, SxProps, TextFieldProps, Theme } from '@mui/material'
-import { Fab, TextField } from '@mui/material'
+import { Fab, TextField, useForkRef } from '@mui/material'
 
 export type NumberFieldElementProps<T extends FieldValues = FieldValues> = Omit<
   TextFieldProps,
@@ -44,11 +44,18 @@ export function NumberFieldElement<T extends FieldValues>(props: NumberFieldElem
     variant = 'outlined',
     disabled,
     shouldUnregister,
-    ...textFieldProps
+    ...rest
   } = props
 
   const classes = withState({ size })
 
+  let InputPropsFiltered = InputProps
+
+  if (variant === 'outlined' && 'disableUnderline' in InputPropsFiltered) {
+    const { disableUnderline, ...filteredInputProps } = InputPropsFiltered
+    InputPropsFiltered = filteredInputProps
+  }
+
   if (required && !rules.required) {
     rules.required = i18n._(/* i18n */ 'This field is required')
   }
@@ -69,22 +76,22 @@ export function NumberFieldElement<T extends FieldValues>(props: NumberFieldElem
 
   return (
     <TextField
-      {...textFieldProps}
+      {...rest}
       {...field}
-      inputRef={ref}
+      inputRef={useForkRef(ref, rest.inputRef)}
       value={value ?? ''}
       onChange={(ev) => {
         const newValue = (ev.target as HTMLInputElement).valueAsNumber
         onChange(Number.isNaN(newValue) ? '' : newValue)
-        textFieldProps.onChange?.(ev)
+        rest.onChange?.(ev)
       }}
       variant={variant}
       required={required}
       error={invalid}
-      helperText={error ? error.message : textFieldProps.helperText}
+      helperText={error ? error.message : rest.helperText}
       size={size}
       type='number'
-      className={`${textFieldProps.className ?? ''} ${classes.quantity}`}
+      className={`${rest.className ?? ''} ${classes.quantity}`}
       sx={[
         {
           width: responsiveVal(90, 120),
@@ -111,7 +118,7 @@ export function NumberFieldElement<T extends FieldValues>(props: NumberFieldElem
       ]}
       autoComplete='off'
       InputProps={{
-        ...InputProps,
+        ...InputPropsFiltered,
         startAdornment: (
           <Fab
             aria-label={i18n._(/* i18n */ 'Decrease')}

package/components/FormComponents/SelectElement.tsx

@@ -3,7 +3,7 @@ import type { ControllerProps, FieldValues } from '@graphcommerce/react-hook-for
 import { useController } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import type { TextFieldProps } from '@mui/material'
-import { MenuItem, TextField } from '@mui/material'
+import { MenuItem, TextField, useForkRef } from '@mui/material'
 
 type OptionBase = { id: string | number; label: string | number }
 
@@ -63,7 +63,7 @@ export function SelectElement<TFieldValues extends FieldValues, O extends Option
       {...rest}
       value={value ?? ''}
       {...field}
-      inputRef={ref}
+      inputRef={useForkRef(ref, rest.inputRef)}
       onChange={(event) => {
         let item: number | string | O | undefined = event.target.value
         if (type === 'number') item = Number(item)

package/components/FormComponents/TextFieldElement.tsx

@@ -4,7 +4,7 @@ import type { FieldValues, UseControllerProps } from '@graphcommerce/react-hook-
 import { emailPattern, useController } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import type { TextFieldProps } from '@mui/material'
-import { TextField } from '@mui/material'
+import { TextField, useForkRef } from '@mui/material'
 import React, { useState } from 'react'
 
 export type TextFieldElementProps<T extends FieldValues = FieldValues> = Omit<
@@ -68,7 +68,7 @@ export function TextFieldElement<TFieldValues extends FieldValues>({
         onChange(type === 'number' && ev.target.value ? Number(ev.target.value) : ev.target.value)
         rest.onChange?.(ev)
       }}
-      inputRef={ref}
+      inputRef={useForkRef(ref, rest.inputRef)}
       required={required}
       type={type}
       error={Boolean(error) || rest.error}

package/package.json

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