@graphcommerce/ecommerce-ui 9.1.0-canary.52 → 9.1.0-canary.53

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 (13) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/components/FormComponents/ActionCardListForm.tsx +2 -3
  3. package/components/FormComponents/CheckboxButtonGroup.tsx +2 -3
  4. package/components/FormComponents/CheckboxElement.tsx +1 -4
  5. package/components/FormComponents/InputBaseElement.tsx +5 -3
  6. package/components/FormComponents/MultiSelectElement.tsx +0 -2
  7. package/components/FormComponents/NumberFieldElement.tsx +1 -4
  8. package/components/FormComponents/RadioButtonGroup.tsx +2 -3
  9. package/components/FormComponents/SliderElement.tsx +7 -3
  10. package/components/FormComponents/SwitchElement.tsx +8 -11
  11. package/components/FormComponents/TextFieldElement.tsx +1 -4
  12. package/components/FormComponents/ToggleButtonGroup.tsx +1 -4
  13. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @graphcommerce/ecommerce-ui
2
2
 
3
+ ## 9.1.0-canary.53
4
+
5
+ ### Patch Changes
6
+
7
+ - [#2541](https://github.com/graphcommerce-org/graphcommerce/pull/2541) [`09e67d6`](https://github.com/graphcommerce-org/graphcommerce/commit/09e67d6cb266ed4714a209ef90e49c3963962604) - Fix issue where setting required on the controller caused the form to submit without variables ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
8
+
3
9
  ## 9.1.0-canary.52
4
10
 
5
11
  ### Patch Changes
package/components/FormComponents/ActionCardListForm.tsx CHANGED
@@ -37,7 +37,7 @@ export function ActionCardListForm<
37
37
  errorMessage,
38
38
  defaultValue,
39
39
  multiple,
40
- disabled: disabledField,
40
+ disabled,
41
41
  shouldUnregister,
42
42
  requireOptionSelection,
43
43
  ...other
@@ -54,7 +54,7 @@ export function ActionCardListForm<
54
54
  )
55
55
 
56
56
  const {
57
- field: { onChange, value, ref, onBlur, disabled },
57
+ field: { onChange, value, ref, onBlur },
58
58
  fieldState,
59
59
  formState,
60
60
  } = useController({
@@ -63,7 +63,6 @@ export function ActionCardListForm<
63
63
  name,
64
64
  defaultValue,
65
65
  rules: { required, ...rules },
66
- disabled: disabledField,
67
66
  shouldUnregister,
68
67
  })
69
68
 
package/components/FormComponents/CheckboxButtonGroup.tsx CHANGED
@@ -46,7 +46,7 @@ function CheckboxButtonGroupBase(props: CheckboxButtonGroupProps) {
46
46
  required,
47
47
  labelKey = 'label',
48
48
  valueKey = 'id',
49
- disabled: disabledField,
49
+ disabled,
50
50
  row,
51
51
  control,
52
52
  checkboxColor,
@@ -57,14 +57,13 @@ function CheckboxButtonGroupBase(props: CheckboxButtonGroupProps) {
57
57
 
58
58
  const theme = useTheme()
59
59
  const {
60
- field: { value = [], onChange, onBlur, ref, disabled },
60
+ field: { value = [], onChange, onBlur, ref },
61
61
  fieldState: { invalid, error },
62
62
  } = useController({
63
63
  name,
64
64
  rules: required ? { required: i18n._(/* i18n */ 'This field is required') } : undefined,
65
65
  control,
66
66
  defaultValue,
67
- disabled: disabledField,
68
67
  shouldUnregister,
69
68
  })
70
69
 
package/components/FormComponents/CheckboxElement.tsx CHANGED
@@ -43,7 +43,6 @@ function CheckboxElementBase(props: CheckboxElementProps): JSX.Element {
43
43
  sx,
44
44
  formControl,
45
45
  defaultValue,
46
- disabled: disabledField,
47
46
  shouldUnregister,
48
47
  ...rest
49
48
  } = props
@@ -53,14 +52,13 @@ function CheckboxElementBase(props: CheckboxElementProps): JSX.Element {
53
52
  }
54
53
 
55
54
  const {
56
- field: { value, onChange, ref, onBlur, disabled },
55
+ field: { value, onChange, ref, onBlur },
57
56
  fieldState: { invalid, error },
58
57
  } = useController({
59
58
  name,
60
59
  rules,
61
60
  control,
62
61
  defaultValue,
63
- disabled: disabledField,
64
62
  shouldUnregister,
65
63
  })
66
64
 
@@ -75,7 +73,6 @@ function CheckboxElementBase(props: CheckboxElementProps): JSX.Element {
75
73
  <Checkbox
76
74
  {...rest}
77
75
  onBlur={onBlur}
78
- disabled={disabled}
79
76
  name={name}
80
77
  inputRef={useForkRef(ref, rest.inputRef)}
81
78
  color={rest.color || 'primary'}
package/components/FormComponents/InputBaseElement.tsx CHANGED
@@ -2,7 +2,7 @@ import type { FieldValues } from '@graphcommerce/react-hook-form'
2
2
  import { useController } from '@graphcommerce/react-hook-form'
3
3
  import { i18n } from '@lingui/core'
4
4
  import type { InputBaseProps } from '@mui/material'
5
- import { InputBase } from '@mui/material'
5
+ import { InputBase, useForkRef } from '@mui/material'
6
6
  import React from 'react'
7
7
  import type { FieldElementProps } from './types'
8
8
 
@@ -24,8 +24,9 @@ function InputBaseElementBase(
24
24
  defaultValue,
25
25
  rules = {},
26
26
  shouldUnregister,
27
- disabled: disabledField,
28
27
  ref,
28
+ inputRef,
29
+ disabled,
29
30
  ...rest
30
31
  } = props
31
32
 
@@ -42,13 +43,14 @@ function InputBaseElementBase(
42
43
  rules,
43
44
  defaultValue,
44
45
  shouldUnregister,
45
- disabled: disabledField,
46
46
  })
47
47
 
48
48
  return (
49
49
  <InputBase
50
50
  {...rest}
51
51
  {...field}
52
+ disabled={disabled}
53
+ inputRef={useForkRef(field.ref, inputRef)}
52
54
  ref={ref}
53
55
  required={required}
54
56
  type={type}
package/components/FormComponents/MultiSelectElement.tsx CHANGED
@@ -58,7 +58,6 @@ export function MultiSelectElement<TFieldValues extends FieldValues>(
58
58
  formControlProps,
59
59
  shouldUnregister,
60
60
  defaultValue,
61
- disabled: disabledField,
62
61
  ...rest
63
62
  } = props
64
63
  if (required && !rules.required) {
@@ -73,7 +72,6 @@ export function MultiSelectElement<TFieldValues extends FieldValues>(
73
72
  rules,
74
73
  control,
75
74
  defaultValue,
76
- disabled: disabledField,
77
75
  shouldUnregister,
78
76
  })
79
77
 
package/components/FormComponents/NumberFieldElement.tsx CHANGED
@@ -56,7 +56,6 @@ function NumberFieldElementBase(props: NumberFieldElementProps) {
56
56
  required,
57
57
  defaultValue,
58
58
  variant = 'outlined',
59
- disabled: disabledField,
60
59
  shouldUnregister,
61
60
  ...rest
62
61
  } = props
@@ -75,14 +74,13 @@ function NumberFieldElementBase(props: NumberFieldElementProps) {
75
74
  }
76
75
 
77
76
  const {
78
- field: { value, onChange, ref, onBlur, disabled },
77
+ field: { value, onChange, ref, onBlur },
79
78
  fieldState: { invalid, error },
80
79
  } = useController({
81
80
  name,
82
81
  control,
83
82
  rules,
84
83
  defaultValue,
85
- disabled: disabledField,
86
84
  shouldUnregister,
87
85
  })
88
86
 
@@ -93,7 +91,6 @@ function NumberFieldElementBase(props: NumberFieldElementProps) {
93
91
  <TextField
94
92
  {...rest}
95
93
  onBlur={onBlur}
96
- disabled={disabled}
97
94
  inputRef={useForkRef(ref, rest.inputRef)}
98
95
  value={value ?? ''}
99
96
  onChange={(ev) => {
package/components/FormComponents/RadioButtonGroup.tsx CHANGED
@@ -50,21 +50,20 @@ function RadioButtonGroupBase(props: RadioButtonGroupProps): JSX.Element {
50
50
  row,
51
51
  control,
52
52
  defaultValue,
53
- disabled: disabledField,
53
+ disabled,
54
54
  shouldUnregister,
55
55
  ...rest
56
56
  } = props
57
57
 
58
58
  const theme = useTheme()
59
59
  const {
60
- field: { value, onChange, onBlur, ref, disabled },
60
+ field: { value, onChange, onBlur, ref },
61
61
  fieldState: { invalid, error },
62
62
  } = useController({
63
63
  name,
64
64
  rules: required ? { required: i18n._(/* i18n */ 'This field is required') } : undefined,
65
65
  control,
66
66
  defaultValue,
67
- disabled: disabledField,
68
67
  shouldUnregister,
69
68
  })
70
69
 
package/components/FormComponents/SliderElement.tsx CHANGED
@@ -31,8 +31,8 @@ function SliderElementBase(props: SliderElementProps): JSX.Element {
31
31
  required,
32
32
  formControlProps,
33
33
  defaultValue,
34
- disabled: disabledField,
35
34
  shouldUnregister,
35
+ disabled,
36
36
  ...other
37
37
  } = props
38
38
 
@@ -48,7 +48,6 @@ function SliderElementBase(props: SliderElementProps): JSX.Element {
48
48
  control,
49
49
  rules,
50
50
  defaultValue,
51
- disabled: disabledField,
52
51
  shouldUnregister,
53
52
  })
54
53
 
@@ -61,7 +60,12 @@ function SliderElementBase(props: SliderElementProps): JSX.Element {
61
60
  {label}
62
61
  </FormLabel>
63
62
  )}
64
- <Slider {...other} {...field} valueLabelDisplay={other.valueLabelDisplay || 'auto'} />
63
+ <Slider
64
+ {...other}
65
+ {...field}
66
+ valueLabelDisplay={other.valueLabelDisplay || 'auto'}
67
+ disabled={disabled}
68
+ />
65
69
  {parsedHelperText && <FormHelperText error={invalid}>{parsedHelperText}</FormHelperText>}
66
70
  </FormControl>
67
71
  )
package/components/FormComponents/SwitchElement.tsx CHANGED
@@ -18,26 +18,23 @@ type SwitchElementComponent = <TFieldValues extends FieldValues>(
18
18
  ) => React.ReactNode
19
19
 
20
20
  function SwitchElementBase(props: SwitchElementProps): JSX.Element {
21
- const {
22
- name,
23
- control,
24
- defaultValue,
25
- disabled: disabledField,
26
- shouldUnregister,
27
- rules,
28
- ...other
29
- } = props
21
+ const { name, control, defaultValue, shouldUnregister, rules, disabled, ...other } = props
30
22
 
31
23
  const { field } = useController({
32
24
  name,
33
25
  control,
34
26
  defaultValue,
35
- disabled: disabledField,
36
27
  shouldUnregister,
37
28
  rules,
38
29
  })
39
30
 
40
- return <FormControlLabel control={<Switch {...field} checked={!!field.value} />} {...other} />
31
+ return (
32
+ <FormControlLabel
33
+ control={<Switch {...field} checked={!!field.value} />}
34
+ {...other}
35
+ disabled={disabled}
36
+ />
37
+ )
41
38
  }
42
39
 
43
40
  /** @public */
package/components/FormComponents/TextFieldElement.tsx CHANGED
@@ -53,7 +53,6 @@ function TextFieldElementBase(props: TextFieldElementProps): JSX.Element {
53
53
  defaultValue,
54
54
  rules = {},
55
55
  shouldUnregister,
56
- disabled: disabledField,
57
56
  type = 'text',
58
57
  required,
59
58
  showValid,
@@ -73,7 +72,7 @@ function TextFieldElementBase(props: TextFieldElementProps): JSX.Element {
73
72
  }
74
73
 
75
74
  const {
76
- field: { onChange, ref, value = '', onBlur, disabled },
75
+ field: { onChange, ref, value = '', onBlur },
77
76
  fieldState: { error },
78
77
  } = useController({
79
78
  name,
@@ -81,7 +80,6 @@ function TextFieldElementBase(props: TextFieldElementProps): JSX.Element {
81
80
  rules,
82
81
  defaultValue,
83
82
  shouldUnregister,
84
- disabled: disabledField,
85
83
  })
86
84
 
87
85
  // https://stackoverflow.com/questions/76830737/chrome-autofill-causes-textbox-collision-for-textfield-label-and-value
@@ -101,7 +99,6 @@ function TextFieldElementBase(props: TextFieldElementProps): JSX.Element {
101
99
  {...rest}
102
100
  onBlur={onBlur}
103
101
  name={name}
104
- disabled={disabled}
105
102
  value={toValue(value, type)}
106
103
  inputProps={{ ...rest.inputProps, onAnimationStart }}
107
104
  onChange={(ev) => {
package/components/FormComponents/ToggleButtonGroup.tsx CHANGED
@@ -35,7 +35,6 @@ export function ToggleButtonGroupElement<TFieldValues extends FieldValues = Fiel
35
35
  helperText,
36
36
  formLabelProps,
37
37
  defaultValue,
38
- disabled: disabledField,
39
38
  shouldUnregister,
40
39
  ...toggleButtonGroupProps
41
40
  }: ToggleButtonGroupElementProps<TFieldValues>) {
@@ -46,14 +45,13 @@ export function ToggleButtonGroupElement<TFieldValues extends FieldValues = Fiel
46
45
  const isRequired = required || !!rules?.required
47
46
 
48
47
  const {
49
- field: { value, onChange, onBlur, disabled },
48
+ field: { value, onChange, onBlur },
50
49
  fieldState: { invalid, error },
51
50
  } = useController({
52
51
  name,
53
52
  control,
54
53
  rules,
55
54
  defaultValue,
56
- disabled: disabledField,
57
55
  shouldUnregister,
58
56
  })
59
57
 
@@ -75,7 +73,6 @@ export function ToggleButtonGroupElement<TFieldValues extends FieldValues = Fiel
75
73
  {...toggleButtonGroupProps}
76
74
  value={value}
77
75
  onBlur={onBlur}
78
- disabled={disabled}
79
76
  onChange={(event, val) => {
80
77
  onChange(val)
81
78
  if (typeof toggleButtonGroupProps.onChange === 'function') {
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.1.0-canary.52",
5
+ "version": "9.1.0-canary.53",
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.1.0-canary.52",
16
- "@graphcommerce/graphql": "^9.1.0-canary.52",
17
- "@graphcommerce/next-ui": "^9.1.0-canary.52",
18
- "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.52",
19
- "@graphcommerce/react-hook-form": "^9.1.0-canary.52",
20
- "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.52",
15
+ "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.53",
16
+ "@graphcommerce/graphql": "^9.1.0-canary.53",
17
+ "@graphcommerce/next-ui": "^9.1.0-canary.53",
18
+ "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.53",
19
+ "@graphcommerce/react-hook-form": "^9.1.0-canary.53",
20
+ "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.53",
21
21
  "@lingui/core": "^4.2.1",
22
22
  "@lingui/macro": "^4.2.1",
23
23
  "@lingui/react": "^4.2.1",