@graphcommerce/ecommerce-ui 9.1.0-canary.51 → 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 +12 -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 +10 -6
  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,17 @@
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
+
9
+ ## 9.1.0-canary.52
10
+
11
+ ### Patch Changes
12
+
13
+ - [`ea7af54`](https://github.com/graphcommerce-org/graphcommerce/commit/ea7af54048506228b6fde04d3bba764358b7f7e0) - Round step increment also max to two decimals as we might else get very long numbers ([@paales](https://github.com/paales))
14
+
3
15
  ## 9.1.0-canary.51
4
16
 
5
17
  ## 9.1.0-canary.50
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
@@ -34,6 +34,13 @@ const { withState } = extendableComponent<OwnerState, typeof componentName, type
34
34
  parts,
35
35
  )
36
36
 
37
+ const roundStep = (value: number, step: number) => {
38
+ // Round to nearest step
39
+ const newStepValue = Math.round(value / step) * step
40
+ // Round to max 2 decimals
41
+ return Math.round(newStepValue * 100) / 100
42
+ }
43
+
37
44
  /** @public */
38
45
  function NumberFieldElementBase(props: NumberFieldElementProps) {
39
46
  const {
@@ -49,7 +56,6 @@ function NumberFieldElementBase(props: NumberFieldElementProps) {
49
56
  required,
50
57
  defaultValue,
51
58
  variant = 'outlined',
52
- disabled: disabledField,
53
59
  shouldUnregister,
54
60
  ...rest
55
61
  } = props
@@ -68,14 +74,13 @@ function NumberFieldElementBase(props: NumberFieldElementProps) {
68
74
  }
69
75
 
70
76
  const {
71
- field: { value, onChange, ref, onBlur, disabled },
77
+ field: { value, onChange, ref, onBlur },
72
78
  fieldState: { invalid, error },
73
79
  } = useController({
74
80
  name,
75
81
  control,
76
82
  rules,
77
83
  defaultValue,
78
- disabled: disabledField,
79
84
  shouldUnregister,
80
85
  })
81
86
 
@@ -86,7 +91,6 @@ function NumberFieldElementBase(props: NumberFieldElementProps) {
86
91
  <TextField
87
92
  {...rest}
88
93
  onBlur={onBlur}
89
- disabled={disabled}
90
94
  inputRef={useForkRef(ref, rest.inputRef)}
91
95
  value={value ?? ''}
92
96
  onChange={(ev) => {
@@ -139,7 +143,7 @@ function NumberFieldElementBase(props: NumberFieldElementProps) {
139
143
  )
140
144
  return
141
145
  // Round to nearest step
142
- onChange(Math.round((valueAsNumber - step) / step) * step)
146
+ onChange(roundStep(valueAsNumber - step, step))
143
147
  }}
144
148
  sx={{
145
149
  boxShadow: variant === 'standard' ? 4 : 0,
@@ -161,7 +165,7 @@ function NumberFieldElementBase(props: NumberFieldElementProps) {
161
165
  onClick={() => {
162
166
  if (valueAsNumber >= (inputProps.max ?? Infinity)) return
163
167
  // Round to nearest step
164
- onChange(Math.round((valueAsNumber + step) / step) * step)
168
+ onChange(roundStep(valueAsNumber + step, step))
165
169
  }}
166
170
  sx={{
167
171
  boxShadow: variant === 'standard' ? 4 : 0,
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.51",
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.51",
16
- "@graphcommerce/graphql": "^9.1.0-canary.51",
17
- "@graphcommerce/next-ui": "^9.1.0-canary.51",
18
- "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.51",
19
- "@graphcommerce/react-hook-form": "^9.1.0-canary.51",
20
- "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.51",
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",