@graphcommerce/ecommerce-ui 9.0.4-canary.12 → 9.0.4-canary.13

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 +4 -3
  3. package/components/FormComponents/CheckboxButtonGroup.tsx +4 -4
  4. package/components/FormComponents/CheckboxElement.tsx +3 -3
  5. package/components/FormComponents/InputBaseElement.tsx +2 -2
  6. package/components/FormComponents/MultiSelectElement.tsx +2 -2
  7. package/components/FormComponents/NumberFieldElement.tsx +5 -4
  8. package/components/FormComponents/RadioButtonGroup.tsx +12 -4
  9. package/components/FormComponents/SliderElement.tsx +2 -2
  10. package/components/FormComponents/SwitchElement.tsx +10 -2
  11. package/components/FormComponents/TextFieldElement.tsx +10 -3
  12. package/components/FormComponents/ToggleButtonGroup.tsx +4 -3
  13. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @graphcommerce/ecommerce-ui
2
2
 
3
+ ## 9.0.4-canary.13
4
+
5
+ ### Patch Changes
6
+
7
+ - [`5a9adde`](https://github.com/graphcommerce-org/graphcommerce/commit/5a9addee16aa9dc8f4ce6f8fa4b3fe6c11b90d8f) - FormElements now are now disabled when the whole form is disabled. ([@paales](https://github.com/paales))
8
+
3
9
  ## 9.0.4-canary.12
4
10
 
5
11
  ## 9.0.4-canary.11
package/components/FormComponents/ActionCardListForm.tsx CHANGED
@@ -37,7 +37,7 @@ export function ActionCardListForm<
37
37
  errorMessage,
38
38
  defaultValue,
39
39
  multiple,
40
- disabled,
40
+ disabled: disabledField,
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 },
57
+ field: { onChange, value, ref, onBlur, disabled },
58
58
  fieldState,
59
59
  formState,
60
60
  } = useController({
@@ -63,7 +63,7 @@ export function ActionCardListForm<
63
63
  name,
64
64
  defaultValue,
65
65
  rules: { required, ...rules },
66
- disabled,
66
+ disabled: disabledField,
67
67
  shouldUnregister,
68
68
  })
69
69
 
@@ -93,6 +93,7 @@ export function ActionCardListForm<
93
93
  value={item.value}
94
94
  selected={onSelect(item.value, value)}
95
95
  onReset={handleReset}
96
+ disabled={disabled}
96
97
  />
97
98
  ))}
98
99
  </ActionCardList>
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,
49
+ disabled: disabledField,
50
50
  row,
51
51
  control,
52
52
  checkboxColor,
@@ -57,14 +57,14 @@ function CheckboxButtonGroupBase(props: CheckboxButtonGroupProps) {
57
57
 
58
58
  const theme = useTheme()
59
59
  const {
60
- field: { value = [], onChange },
60
+ field: { value = [], onChange, onBlur, ref, disabled },
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,
67
+ disabled: disabledField,
68
68
  shouldUnregister,
69
69
  })
70
70
 
@@ -88,7 +88,7 @@ function CheckboxButtonGroupBase(props: CheckboxButtonGroupProps) {
88
88
  return (
89
89
  <FormControl error={invalid} required={required}>
90
90
  {label && <FormLabel error={invalid}>{label}</FormLabel>}
91
- <FormGroup row={row}>
91
+ <FormGroup row={row} ref={ref} onBlur={onBlur}>
92
92
  {options.map((option) => {
93
93
  const optionKey = option[valueKey]
94
94
  const isChecked = (value as (string | number)[]).includes(optionKey)
package/components/FormComponents/CheckboxElement.tsx CHANGED
@@ -43,7 +43,7 @@ function CheckboxElementBase(props: CheckboxElementProps): JSX.Element {
43
43
  sx,
44
44
  formControl,
45
45
  defaultValue,
46
- disabled,
46
+ disabled: disabledField,
47
47
  shouldUnregister,
48
48
  ...rest
49
49
  } = props
@@ -53,14 +53,14 @@ function CheckboxElementBase(props: CheckboxElementProps): JSX.Element {
53
53
  }
54
54
 
55
55
  const {
56
- field: { value, onChange, ref, onBlur },
56
+ field: { value, onChange, ref, onBlur, disabled },
57
57
  fieldState: { invalid, error },
58
58
  } = useController({
59
59
  name,
60
60
  rules,
61
61
  control,
62
62
  defaultValue,
63
- disabled,
63
+ disabled: disabledField,
64
64
  shouldUnregister,
65
65
  })
66
66
 
package/components/FormComponents/InputBaseElement.tsx CHANGED
@@ -24,7 +24,7 @@ function InputBaseElementBase(
24
24
  defaultValue,
25
25
  rules = {},
26
26
  shouldUnregister,
27
- disabled,
27
+ disabled: disabledField,
28
28
  ref,
29
29
  ...rest
30
30
  } = props
@@ -42,7 +42,7 @@ function InputBaseElementBase(
42
42
  rules,
43
43
  defaultValue,
44
44
  shouldUnregister,
45
- disabled,
45
+ disabled: disabledField,
46
46
  })
47
47
 
48
48
  return (
package/components/FormComponents/MultiSelectElement.tsx CHANGED
@@ -58,7 +58,7 @@ export function MultiSelectElement<TFieldValues extends FieldValues>(
58
58
  formControlProps,
59
59
  shouldUnregister,
60
60
  defaultValue,
61
- disabled,
61
+ disabled: disabledField,
62
62
  ...rest
63
63
  } = props
64
64
  if (required && !rules.required) {
@@ -73,7 +73,7 @@ export function MultiSelectElement<TFieldValues extends FieldValues>(
73
73
  rules,
74
74
  control,
75
75
  defaultValue,
76
- disabled,
76
+ disabled: disabledField,
77
77
  shouldUnregister,
78
78
  })
79
79
 
package/components/FormComponents/NumberFieldElement.tsx CHANGED
@@ -48,7 +48,7 @@ function NumberFieldElementBase(props: NumberFieldElementProps) {
48
48
  required,
49
49
  defaultValue,
50
50
  variant = 'outlined',
51
- disabled,
51
+ disabled: disabledField,
52
52
  shouldUnregister,
53
53
  ...rest
54
54
  } = props
@@ -67,14 +67,14 @@ function NumberFieldElementBase(props: NumberFieldElementProps) {
67
67
  }
68
68
 
69
69
  const {
70
- field: { value, onChange, ref, ...field },
70
+ field: { value, onChange, ref, onBlur, disabled },
71
71
  fieldState: { invalid, error },
72
72
  } = useController({
73
73
  name,
74
74
  control,
75
75
  rules,
76
76
  defaultValue,
77
- disabled,
77
+ disabled: disabledField,
78
78
  shouldUnregister,
79
79
  })
80
80
 
@@ -83,7 +83,8 @@ function NumberFieldElementBase(props: NumberFieldElementProps) {
83
83
  return (
84
84
  <TextField
85
85
  {...rest}
86
- {...field}
86
+ onBlur={onBlur}
87
+ disabled={disabled}
87
88
  inputRef={useForkRef(ref, rest.inputRef)}
88
89
  value={value ?? ''}
89
90
  onChange={(ev) => {
package/components/FormComponents/RadioButtonGroup.tsx CHANGED
@@ -50,21 +50,21 @@ function RadioButtonGroupBase(props: RadioButtonGroupProps): JSX.Element {
50
50
  row,
51
51
  control,
52
52
  defaultValue,
53
- disabled,
53
+ disabled: disabledField,
54
54
  shouldUnregister,
55
55
  ...rest
56
56
  } = props
57
57
 
58
58
  const theme = useTheme()
59
59
  const {
60
- field: { value, onChange },
60
+ field: { value, onChange, onBlur, ref, disabled },
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,
67
+ disabled: disabledField,
68
68
  shouldUnregister,
69
69
  })
70
70
 
@@ -79,7 +79,14 @@ function RadioButtonGroupBase(props: RadioButtonGroupProps): JSX.Element {
79
79
  return (
80
80
  <FormControl error={invalid} required={required}>
81
81
  {label && <FormLabel error={invalid}>{label}</FormLabel>}
82
- <RadioGroup onChange={handleChange} name={name} row={row} value={value ?? ''}>
82
+ <RadioGroup
83
+ onChange={handleChange}
84
+ onBlur={onBlur}
85
+ ref={ref}
86
+ name={name}
87
+ row={row}
88
+ value={value ?? ''}
89
+ >
83
90
  {emptyOptionLabel && (
84
91
  <FormControlLabel
85
92
  control={
@@ -100,6 +107,7 @@ function RadioButtonGroupBase(props: RadioButtonGroupProps): JSX.Element {
100
107
  <FormControlLabel
101
108
  control={
102
109
  <Radio
110
+ disabled={disabled}
103
111
  sx={{
104
112
  color: invalid ? theme.palette.error.main : undefined,
105
113
  }}
package/components/FormComponents/SliderElement.tsx CHANGED
@@ -31,7 +31,7 @@ function SliderElementBase(props: SliderElementProps): JSX.Element {
31
31
  required,
32
32
  formControlProps,
33
33
  defaultValue,
34
- disabled,
34
+ disabled: disabledField,
35
35
  shouldUnregister,
36
36
  ...other
37
37
  } = props
@@ -48,7 +48,7 @@ function SliderElementBase(props: SliderElementProps): JSX.Element {
48
48
  control,
49
49
  rules,
50
50
  defaultValue,
51
- disabled,
51
+ disabled: disabledField,
52
52
  shouldUnregister,
53
53
  })
54
54
 
package/components/FormComponents/SwitchElement.tsx CHANGED
@@ -18,13 +18,21 @@ type SwitchElementComponent = <TFieldValues extends FieldValues>(
18
18
  ) => React.ReactNode
19
19
 
20
20
  function SwitchElementBase(props: SwitchElementProps): JSX.Element {
21
- const { name, control, defaultValue, disabled, shouldUnregister, rules, ...other } = props
21
+ const {
22
+ name,
23
+ control,
24
+ defaultValue,
25
+ disabled: disabledField,
26
+ shouldUnregister,
27
+ rules,
28
+ ...other
29
+ } = props
22
30
 
23
31
  const { field } = useController({
24
32
  name,
25
33
  control,
26
34
  defaultValue,
27
- disabled,
35
+ disabled: disabledField,
28
36
  shouldUnregister,
29
37
  rules,
30
38
  })
package/components/FormComponents/TextFieldElement.tsx CHANGED
@@ -25,7 +25,7 @@ function TextFieldElementBase(props: TextFieldElementProps): JSX.Element {
25
25
  defaultValue,
26
26
  rules = {},
27
27
  shouldUnregister,
28
- disabled,
28
+ disabled: disabledField,
29
29
  type,
30
30
  required,
31
31
  showValid,
@@ -44,9 +44,16 @@ function TextFieldElementBase(props: TextFieldElementProps): JSX.Element {
44
44
  }
45
45
 
46
46
  const {
47
- field: { onChange, ref, value = '', onBlur },
47
+ field: { onChange, ref, value = '', onBlur, disabled },
48
48
  fieldState: { error },
49
- } = useController({ name, control, rules, defaultValue, shouldUnregister, disabled })
49
+ } = useController({
50
+ name,
51
+ control,
52
+ rules,
53
+ defaultValue,
54
+ shouldUnregister,
55
+ disabled: disabledField,
56
+ })
50
57
 
51
58
  // https://stackoverflow.com/questions/76830737/chrome-autofill-causes-textbox-collision-for-textfield-label-and-value
52
59
  const [hasAutofill, setHasAutofill] = useState(false)
package/components/FormComponents/ToggleButtonGroup.tsx CHANGED
@@ -35,7 +35,7 @@ export function ToggleButtonGroupElement<TFieldValues extends FieldValues = Fiel
35
35
  helperText,
36
36
  formLabelProps,
37
37
  defaultValue,
38
- disabled,
38
+ disabled: disabledField,
39
39
  shouldUnregister,
40
40
  ...toggleButtonGroupProps
41
41
  }: ToggleButtonGroupElementProps<TFieldValues>) {
@@ -46,14 +46,14 @@ export function ToggleButtonGroupElement<TFieldValues extends FieldValues = Fiel
46
46
  const isRequired = required || !!rules?.required
47
47
 
48
48
  const {
49
- field: { value, onChange, onBlur },
49
+ field: { value, onChange, onBlur, disabled },
50
50
  fieldState: { invalid, error },
51
51
  } = useController({
52
52
  name,
53
53
  control,
54
54
  rules,
55
55
  defaultValue,
56
- disabled,
56
+ disabled: disabledField,
57
57
  shouldUnregister,
58
58
  })
59
59
 
@@ -75,6 +75,7 @@ export function ToggleButtonGroupElement<TFieldValues extends FieldValues = Fiel
75
75
  {...toggleButtonGroupProps}
76
76
  value={value}
77
77
  onBlur={onBlur}
78
+ disabled={disabled}
78
79
  onChange={(event, val) => {
79
80
  onChange(val)
80
81
  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.0.4-canary.12",
5
+ "version": "9.0.4-canary.13",
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.4-canary.12",
16
- "@graphcommerce/graphql": "^9.0.4-canary.12",
17
- "@graphcommerce/next-ui": "^9.0.4-canary.12",
18
- "@graphcommerce/prettier-config-pwa": "^9.0.4-canary.12",
19
- "@graphcommerce/react-hook-form": "^9.0.4-canary.12",
20
- "@graphcommerce/typescript-config-pwa": "^9.0.4-canary.12",
15
+ "@graphcommerce/eslint-config-pwa": "^9.0.4-canary.13",
16
+ "@graphcommerce/graphql": "^9.0.4-canary.13",
17
+ "@graphcommerce/next-ui": "^9.0.4-canary.13",
18
+ "@graphcommerce/prettier-config-pwa": "^9.0.4-canary.13",
19
+ "@graphcommerce/react-hook-form": "^9.0.4-canary.13",
20
+ "@graphcommerce/typescript-config-pwa": "^9.0.4-canary.13",
21
21
  "@lingui/core": "^4.2.1",
22
22
  "@lingui/macro": "^4.2.1",
23
23
  "@lingui/react": "^4.2.1",