@graphcommerce/ecommerce-ui 9.0.0-canary.105 → 9.0.0-canary.107

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/components/FormComponents/CheckboxElement.tsx +9 -2
  3. package/components/FormComponents/NumberFieldElement.tsx +8 -8
  4. package/components/FormComponents/SelectElement.tsx +2 -2
  5. package/components/FormComponents/TextFieldElement.tsx +2 -2
  6. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @graphcommerce/ecommerce-ui
2
2
 
3
+ ## 9.0.0-canary.107
4
+
5
+ ### Patch Changes
6
+
7
+ - [#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))
8
+
9
+ ## 9.0.0-canary.106
10
+
3
11
  ## 9.0.0-canary.105
4
12
 
5
13
  ## 9.0.0-canary.104
package/components/FormComponents/CheckboxElement.tsx CHANGED
@@ -8,7 +8,14 @@ import type {
8
8
  SxProps,
9
9
  Theme,
10
10
  } from '@mui/material'
11
- import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText } from '@mui/material'
11
+ import {
12
+ Checkbox,
13
+ FormControl,
14
+ FormControlLabel,
15
+ FormGroup,
16
+ FormHelperText,
17
+ useForkRef,
18
+ } from '@mui/material'
12
19
 
13
20
  export type CheckboxElementProps<T extends FieldValues> = Omit<CheckboxProps, 'name'> & {
14
21
  label?: FormControlLabelProps['label']
@@ -62,7 +69,7 @@ export function CheckboxElement<TFieldValues extends FieldValues>(
62
69
  <Checkbox
63
70
  {...rest}
64
71
  {...field}
65
- inputRef={ref}
72
+ inputRef={useForkRef(ref, rest.inputRef)}
66
73
  color={rest.color || 'primary'}
67
74
  sx={{
68
75
  ...(Array.isArray(sx) ? sx : [sx]),
package/components/FormComponents/NumberFieldElement.tsx CHANGED
@@ -1,15 +1,15 @@
1
1
  import {
2
- IconSvg,
3
2
  extendableComponent,
4
3
  iconMin,
5
4
  iconPlus,
5
+ IconSvg,
6
6
  responsiveVal,
7
7
  } from '@graphcommerce/next-ui'
8
8
  import type { ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
9
9
  import { Controller, useController } from '@graphcommerce/react-hook-form'
10
10
  import { i18n } from '@lingui/core'
11
11
  import type { IconButtonProps, SxProps, TextFieldProps, Theme } from '@mui/material'
12
- import { Fab, TextField } from '@mui/material'
12
+ import { Fab, TextField, useForkRef } from '@mui/material'
13
13
 
14
14
  export type NumberFieldElementProps<T extends FieldValues = FieldValues> = Omit<
15
15
  TextFieldProps,
@@ -44,7 +44,7 @@ export function NumberFieldElement<T extends FieldValues>(props: NumberFieldElem
44
44
  variant = 'outlined',
45
45
  disabled,
46
46
  shouldUnregister,
47
- ...textFieldProps
47
+ ...rest
48
48
  } = props
49
49
 
50
50
  const classes = withState({ size })
@@ -69,22 +69,22 @@ export function NumberFieldElement<T extends FieldValues>(props: NumberFieldElem
69
69
 
70
70
  return (
71
71
  <TextField
72
- {...textFieldProps}
72
+ {...rest}
73
73
  {...field}
74
- inputRef={ref}
74
+ inputRef={useForkRef(ref, rest.inputRef)}
75
75
  value={value ?? ''}
76
76
  onChange={(ev) => {
77
77
  const newValue = (ev.target as HTMLInputElement).valueAsNumber
78
78
  onChange(Number.isNaN(newValue) ? '' : newValue)
79
- textFieldProps.onChange?.(ev)
79
+ rest.onChange?.(ev)
80
80
  }}
81
81
  variant={variant}
82
82
  required={required}
83
83
  error={invalid}
84
- helperText={error ? error.message : textFieldProps.helperText}
84
+ helperText={error ? error.message : rest.helperText}
85
85
  size={size}
86
86
  type='number'
87
- className={`${textFieldProps.className ?? ''} ${classes.quantity}`}
87
+ className={`${rest.className ?? ''} ${classes.quantity}`}
88
88
  sx={[
89
89
  {
90
90
  width: responsiveVal(90, 120),
package/components/FormComponents/SelectElement.tsx CHANGED
@@ -3,7 +3,7 @@ import type { ControllerProps, FieldValues } from '@graphcommerce/react-hook-for
3
3
  import { useController } from '@graphcommerce/react-hook-form'
4
4
  import { i18n } from '@lingui/core'
5
5
  import type { TextFieldProps } from '@mui/material'
6
- import { MenuItem, TextField } from '@mui/material'
6
+ import { MenuItem, TextField, useForkRef } from '@mui/material'
7
7
 
8
8
  type OptionBase = { id: string | number; label: string | number }
9
9
 
@@ -63,7 +63,7 @@ export function SelectElement<TFieldValues extends FieldValues, O extends Option
63
63
  {...rest}
64
64
  value={value ?? ''}
65
65
  {...field}
66
- inputRef={ref}
66
+ inputRef={useForkRef(ref, rest.inputRef)}
67
67
  onChange={(event) => {
68
68
  let item: number | string | O | undefined = event.target.value
69
69
  if (type === 'number') item = Number(item)
package/components/FormComponents/TextFieldElement.tsx CHANGED
@@ -4,7 +4,7 @@ import type { FieldValues, UseControllerProps } from '@graphcommerce/react-hook-
4
4
  import { emailPattern, useController } from '@graphcommerce/react-hook-form'
5
5
  import { i18n } from '@lingui/core'
6
6
  import type { TextFieldProps } from '@mui/material'
7
- import { TextField } from '@mui/material'
7
+ import { TextField, useForkRef } from '@mui/material'
8
8
  import React, { useState } from 'react'
9
9
 
10
10
  export type TextFieldElementProps<T extends FieldValues = FieldValues> = Omit<
@@ -68,7 +68,7 @@ export function TextFieldElement<TFieldValues extends FieldValues>({
68
68
  onChange(type === 'number' && ev.target.value ? Number(ev.target.value) : ev.target.value)
69
69
  rest.onChange?.(ev)
70
70
  }}
71
- inputRef={ref}
71
+ inputRef={useForkRef(ref, rest.inputRef)}
72
72
  required={required}
73
73
  type={type}
74
74
  error={Boolean(error) || rest.error}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@graphcommerce/ecommerce-ui",
3
3
  "homepage": "https://www.graphcommerce.org/",
4
4
  "repository": "github:graphcommerce-org/graphcommerce",
5
- "version": "9.0.0-canary.105",
5
+ "version": "9.0.0-canary.107",
6
6
  "sideEffects": false,
7
7
  "prettier": "@graphcommerce/prettier-config-pwa",
8
8
  "eslintConfig": {
@@ -12,12 +12,12 @@
12
12
  }
13
13
  },
14
14
  "peerDependencies": {
15
- "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.105",
16
- "@graphcommerce/graphql": "^9.0.0-canary.105",
17
- "@graphcommerce/next-ui": "^9.0.0-canary.105",
18
- "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.105",
19
- "@graphcommerce/react-hook-form": "^9.0.0-canary.105",
20
- "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.105",
15
+ "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.107",
16
+ "@graphcommerce/graphql": "^9.0.0-canary.107",
17
+ "@graphcommerce/next-ui": "^9.0.0-canary.107",
18
+ "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.107",
19
+ "@graphcommerce/react-hook-form": "^9.0.0-canary.107",
20
+ "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.107",
21
21
  "@lingui/core": "^4.2.1",
22
22
  "@lingui/macro": "^4.2.1",
23
23
  "@lingui/react": "^4.2.1",