@graphcommerce/ecommerce-ui 8.0.3-canary.4 → 8.1.0-canary.3

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 (8) hide show
  1. package/CHANGELOG.md +3 -10
  2. package/components/FormComponents/CheckboxElement.tsx +4 -5
  3. package/components/FormComponents/MultiSelectElement.tsx +19 -19
  4. package/components/FormComponents/NumberFieldElement.tsx +4 -4
  5. package/components/FormComponents/SelectElement.tsx +3 -3
  6. package/components/FormComponents/SliderElement.tsx +7 -2
  7. package/components/FormComponents/TextFieldElement.tsx +5 -3
  8. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -1,21 +1,14 @@
1
1
  # @graphcommerce/ecommerce-ui
2
2
 
3
- ## 8.0.3-canary.4
4
-
5
- ### Patch Changes
6
-
7
- - [#2203](https://github.com/graphcommerce-org/graphcommerce/pull/2203) [`7ef7dc7`](https://github.com/graphcommerce-org/graphcommerce/commit/7ef7dc7631f61a2feba67a531a210df9c22fed4b) - CheckboxElement, MultiSelectElement, NumberFieldElement, SelectElement, SliderElement and TextFieldElement have their inputRef passed, allowing focus to be set by the form.
8
- ([@Jessevdpoel](https://github.com/Jessevdpoel))
9
-
10
- ## 8.0.3-canary.3
11
-
12
- ## 8.0.3-canary.2
3
+ ## 8.1.0-canary.3
13
4
 
14
5
  ### Patch Changes
15
6
 
16
7
  - [#2205](https://github.com/graphcommerce-org/graphcommerce/pull/2205) [`eb14696`](https://github.com/graphcommerce-org/graphcommerce/commit/eb14696fc65e084a06790c88a8218fb3003f7c2c) - `<WaitForQueries/>` will default to loading, restoring the previous behavior. This might introduce , this might introduce an additional spinner but prevents a flash where it is shown that there is no cart
17
8
  ([@paales](https://github.com/paales))
18
9
 
10
+ ## 8.1.0-canary.2
11
+
19
12
  ## 8.0.3-canary.1
20
13
 
21
14
  ## 8.0.3-canary.0
package/components/FormComponents/CheckboxElement.tsx CHANGED
@@ -47,8 +47,7 @@ export function CheckboxElement<TFieldValues extends FieldValues>({
47
47
  name={name}
48
48
  rules={rules}
49
49
  control={control}
50
- render={({ field: { value, onChange, ref, ...field }, fieldState: { invalid, error } }) => {
51
- // eslint-disable-next-line no-nested-ternary
50
+ render={({ field: { value, onChange }, fieldState: { invalid, error } }) => {
52
51
  const parsedHelperText = error
53
52
  ? typeof parseError === 'function'
54
53
  ? parseError(error)
@@ -62,8 +61,6 @@ export function CheckboxElement<TFieldValues extends FieldValues>({
62
61
  control={
63
62
  <Checkbox
64
63
  {...rest}
65
- {...field}
66
- inputRef={ref}
67
64
  color={rest.color || 'primary'}
68
65
  sx={{
69
66
  ...(Array.isArray(sx) ? sx : [sx]),
@@ -71,7 +68,9 @@ export function CheckboxElement<TFieldValues extends FieldValues>({
71
68
  }}
72
69
  value={value}
73
70
  checked={!!value}
74
- onChange={() => onChange(!value)}
71
+ onChange={() => {
72
+ onChange(!value)
73
+ }}
75
74
  />
76
75
  }
77
76
  />
package/components/FormComponents/MultiSelectElement.tsx CHANGED
@@ -72,7 +72,7 @@ export function MultiSelectElement<TFieldValues extends FieldValues>(
72
72
  name={name}
73
73
  rules={rules}
74
74
  control={control}
75
- render={({ field: { value, onChange, ...field }, fieldState: { invalid, error } }) => {
75
+ render={({ field: { value, onChange, onBlur }, fieldState: { invalid, error } }) => {
76
76
  helperText = error
77
77
  ? typeof parseError === 'function'
78
78
  ? parseError(error)
@@ -102,7 +102,6 @@ export function MultiSelectElement<TFieldValues extends FieldValues>(
102
102
  )}
103
103
  <Select
104
104
  {...rest}
105
- {...field}
106
105
  id={rest.id || `select-multi-select-${name}`}
107
106
  multiple
108
107
  label={label || undefined}
@@ -110,6 +109,7 @@ export function MultiSelectElement<TFieldValues extends FieldValues>(
110
109
  value={value || []}
111
110
  required={required}
112
111
  onChange={onChange}
112
+ onBlur={onBlur}
113
113
  MenuProps={{
114
114
  ...rest.MenuProps,
115
115
  PaperProps: {
@@ -126,23 +126,23 @@ export function MultiSelectElement<TFieldValues extends FieldValues>(
126
126
  typeof rest.renderValue === 'function'
127
127
  ? rest.renderValue
128
128
  : showChips
129
- ? (selected) => (
130
- <div style={{ display: 'flex', flexWrap: 'wrap' }}>
131
- {((selected as any[]) || []).map((selectedValue) => (
132
- <Chip
133
- key={selectedValue}
134
- label={selectedValue}
135
- style={{ display: 'flex', flexWrap: 'wrap' }}
136
- onDelete={() => {
137
- onChange(value.filter((i: any) => i !== selectedValue))
138
- // setValue(name, formValue.filter((i: any) => i !== value), { shouldValidate: true })
139
- }}
140
- deleteIcon={<IconSvg src={iconClose} />}
141
- />
142
- ))}
143
- </div>
144
- )
145
- : (selected) => (Array.isArray(selected) ? selected.join(', ') : '')
129
+ ? (selected) => (
130
+ <div style={{ display: 'flex', flexWrap: 'wrap' }}>
131
+ {((selected as any[]) || []).map((selectedValue) => (
132
+ <Chip
133
+ key={selectedValue}
134
+ label={selectedValue}
135
+ style={{ display: 'flex', flexWrap: 'wrap' }}
136
+ onDelete={() => {
137
+ onChange(value.filter((i: any) => i !== selectedValue))
138
+ // setValue(name, formValue.filter((i: any) => i !== value), { shouldValidate: true })
139
+ }}
140
+ deleteIcon={<IconSvg src={iconClose} />}
141
+ />
142
+ ))}
143
+ </div>
144
+ )
145
+ : (selected) => (Array.isArray(selected) ? selected.join(', ') : '')
146
146
  }
147
147
  >
148
148
  {options.map((item) => {
package/components/FormComponents/NumberFieldElement.tsx CHANGED
@@ -54,21 +54,21 @@ export function NumberFieldElement<T extends FieldValues>(props: NumberFieldElem
54
54
  control={control}
55
55
  rules={rules}
56
56
  defaultValue={defaultValue}
57
- render={({ field: { value, onChange, ref, ...field }, fieldState: { invalid, error } }) => {
57
+ render={({ field: { value, onChange, onBlur }, fieldState: { invalid, error } }) => {
58
58
  const valueAsNumber = value ? parseFloat(value) : 0
59
59
 
60
60
  return (
61
61
  <TextField
62
62
  {...textFieldProps}
63
- {...field}
64
- inputRef={ref}
63
+ variant={variant}
64
+ name={name}
65
65
  value={value ?? ''}
66
66
  onChange={(ev) => {
67
67
  const newValue = (ev.target as HTMLInputElement).valueAsNumber
68
68
  onChange(Number.isNaN(newValue) ? '' : newValue)
69
69
  textFieldProps.onChange?.(ev)
70
70
  }}
71
- variant={variant}
71
+ onBlur={onBlur}
72
72
  required={required}
73
73
  error={invalid}
74
74
  helperText={error ? error.message : textFieldProps.helperText}
package/components/FormComponents/SelectElement.tsx CHANGED
@@ -37,7 +37,7 @@ export function SelectElement<TFieldValues extends FieldValues, O extends Option
37
37
  rules={validation}
38
38
  control={control}
39
39
  defaultValue={defaultValue}
40
- render={({ field: { onChange, value, ref, ...field }, fieldState: { invalid, error } }) => {
40
+ render={({ field: { onBlur, onChange, value }, fieldState: { invalid, error } }) => {
41
41
  // handle shrink on number input fields
42
42
  if (type === 'number' && typeof value !== 'undefined') {
43
43
  rest.InputLabelProps = rest.InputLabelProps || {}
@@ -47,9 +47,9 @@ export function SelectElement<TFieldValues extends FieldValues, O extends Option
47
47
  return (
48
48
  <TextField
49
49
  {...rest}
50
+ name={name}
50
51
  value={value ?? ''}
51
- {...field}
52
- inputRef={ref}
52
+ onBlur={onBlur}
53
53
  onChange={(event) => {
54
54
  let item: number | string | O | undefined = event.target.value
55
55
  if (type === 'number') item = Number(item)
package/components/FormComponents/SliderElement.tsx CHANGED
@@ -39,7 +39,7 @@ export function SliderElement<TFieldValues extends FieldValues>({
39
39
  name={name}
40
40
  control={control}
41
41
  rules={rules}
42
- render={({ field, fieldState: { invalid, error } }) => {
42
+ render={({ field: { onChange, value }, fieldState: { invalid, error } }) => {
43
43
  const parsedHelperText = error
44
44
  ? typeof parseError === 'function'
45
45
  ? parseError(error)
@@ -52,7 +52,12 @@ export function SliderElement<TFieldValues extends FieldValues>({
52
52
  {label}
53
53
  </FormLabel>
54
54
  )}
55
- <Slider {...other} {...field} valueLabelDisplay={other.valueLabelDisplay || 'auto'} />
55
+ <Slider
56
+ {...other}
57
+ value={value}
58
+ onChange={onChange}
59
+ valueLabelDisplay={other.valueLabelDisplay || 'auto'}
60
+ />
56
61
  {parsedHelperText && (
57
62
  <FormHelperText error={invalid}>{parsedHelperText}</FormHelperText>
58
63
  )}
package/components/FormComponents/TextFieldElement.tsx CHANGED
@@ -43,21 +43,23 @@ export function TextFieldElement<TFieldValues extends FieldValues>({
43
43
  control={control}
44
44
  rules={validation}
45
45
  defaultValue={defaultValue}
46
- render={({ field: { onChange, ref, ...field }, fieldState: { error } }) => (
46
+ render={({ field: { value, onChange, onBlur, ref }, fieldState: { error } }) => (
47
47
  <TextField
48
48
  {...rest}
49
- {...field}
49
+ name={name}
50
+ value={value ?? ''}
50
51
  onChange={(ev) => {
51
52
  onChange(
52
53
  type === 'number' && ev.target.value ? Number(ev.target.value) : ev.target.value,
53
54
  )
54
55
  rest.onChange?.(ev)
55
56
  }}
56
- inputRef={ref}
57
+ onBlur={onBlur}
57
58
  required={required}
58
59
  type={type}
59
60
  error={Boolean(error) || rest.error}
60
61
  helperText={error ? error.message : rest.helperText}
62
+ inputRef={ref}
61
63
  />
62
64
  )}
63
65
  />
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": "8.0.3-canary.4",
5
+ "version": "8.1.0-canary.3",
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": "^8.0.3-canary.4",
16
- "@graphcommerce/graphql": "^8.0.3-canary.4",
17
- "@graphcommerce/next-ui": "^8.0.3-canary.4",
18
- "@graphcommerce/prettier-config-pwa": "^8.0.3-canary.4",
19
- "@graphcommerce/react-hook-form": "^8.0.3-canary.4",
20
- "@graphcommerce/typescript-config-pwa": "^8.0.3-canary.4",
15
+ "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.3",
16
+ "@graphcommerce/graphql": "^8.1.0-canary.3",
17
+ "@graphcommerce/next-ui": "^8.1.0-canary.3",
18
+ "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.3",
19
+ "@graphcommerce/react-hook-form": "^8.1.0-canary.3",
20
+ "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.3",
21
21
  "@lingui/core": "^4.2.1",
22
22
  "@lingui/macro": "^4.2.1",
23
23
  "@lingui/react": "^4.2.1",