@xqmsg/ui-core 0.14.0 → 0.14.2

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 (19) hide show
  1. package/dist/components/input/StackedMultiSelect/index.d.ts +4 -1
  2. package/dist/components/input/StackedPilledInput/index.d.ts +4 -1
  3. package/dist/components/input/index.d.ts +4 -2
  4. package/dist/ui-core.cjs.development.js +119 -29
  5. package/dist/ui-core.cjs.development.js.map +1 -1
  6. package/dist/ui-core.cjs.production.min.js +1 -1
  7. package/dist/ui-core.cjs.production.min.js.map +1 -1
  8. package/dist/ui-core.esm.js +122 -32
  9. package/dist/ui-core.esm.js.map +1 -1
  10. package/package.json +1 -1
  11. package/src/components/form/section/index.tsx +2 -0
  12. package/src/components/input/Input.stories.tsx +10 -0
  13. package/src/components/input/StackedMultiSelect/index.tsx +153 -101
  14. package/src/components/input/StackedPilledInput/index.tsx +231 -191
  15. package/src/components/input/StackedSelect/StackedSelect.tsx +9 -10
  16. package/src/components/input/components/dropdown/index.tsx +7 -2
  17. package/src/components/input/components/token/assets/svg/close.svg +1 -1
  18. package/src/components/input/components/token/index.tsx +15 -9
  19. package/src/components/input/index.tsx +155 -160
package/src/components/input/index.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useCallback } from 'react';
1
+ import React from 'react';
2
2
  import StackedCheckBoxGroup from './StackedCheckbox/StackedCheckboxGroup';
3
3
  import StackedInput from './StackedInput/StackedInput';
4
4
  import StackedRadioGroup from './StackedRadio/StackedRadioGroup';
@@ -17,6 +17,8 @@ import {
17
17
  Path,
18
18
  PathValue,
19
19
  RefCallBack,
20
+ UseFormClearErrors,
21
+ UseFormSetError,
20
22
  UseFormSetValue,
21
23
  } from 'react-hook-form';
22
24
  import StackedMultiSelect from './StackedMultiSelect';
@@ -39,6 +41,8 @@ export interface InputProps<T extends FieldValues> extends ValidationProps {
39
41
  onChange?: (value?: string) => void;
40
42
  disabled?: boolean;
41
43
  setValue: UseFormSetValue<T>;
44
+ setError: UseFormSetError<T>;
45
+ clearErrors: UseFormClearErrors<T>;
42
46
  }
43
47
 
44
48
  /**
@@ -63,166 +67,157 @@ export function Input<T extends FieldValues>({
63
67
  disabled,
64
68
  onChange,
65
69
  setValue,
70
+ setError,
71
+ clearErrors,
66
72
  }: InputProps<T>) {
67
- const selectedInputField = useCallback(
68
- (
69
- onChange: () => void,
70
- onBlur: () => void,
71
- ref: RefCallBack,
72
- value: string
73
- ) => {
74
- switch (inputType) {
75
- case 'text':
76
- return (
77
- <StackedInput
78
- className={`input-${inputType} ${className ?? ''}`}
79
- aria-label={ariaLabel}
80
- name={name}
81
- id={name}
82
- placeholder={placeholder}
83
- maxLength={maxLength}
84
- isRequired={isRequired}
85
- isInvalid={isInvalid}
86
- onChange={onChange}
87
- onBlur={onBlur}
88
- ref={ref}
89
- disabled={disabled}
90
- value={value}
91
- />
92
- );
93
- case 'radio':
94
- return (
95
- <StackedRadioGroup
96
- className={`input-${inputType} ${className ?? ''}`}
97
- name={name}
98
- id={name}
99
- isInvalid={isInvalid}
100
- options={options as FieldOptions}
101
- onChange={onChange}
102
- onBlur={onBlur}
103
- ref={ref}
104
- disabled={disabled}
105
- value={value}
106
- />
107
- );
108
- case 'select':
109
- return (
110
- <StackedSelect
111
- className={`input-${inputType} ${className ?? ''}`}
112
- name={name}
113
- id={name}
114
- isRequired={isRequired}
115
- isInvalid={isInvalid}
116
- options={options as FieldOptions}
117
- handleOnChange={onChange}
118
- onBlur={onBlur}
119
- setValue={setValue as UseFormSetValue<FieldValues>}
120
- control={control as Control<FieldValues, any>}
121
- ref={ref}
122
- disabled={disabled}
123
- value={value}
124
- defaultValue={defaultValue}
125
- placeholder={placeholder}
126
- />
127
- );
128
- case 'textarea':
129
- return (
130
- <StackedTextarea
131
- className={`input-${inputType} ${className ?? ''}`}
132
- name={name}
133
- id={name}
134
- maxLength={maxLength}
135
- isInvalid={isInvalid}
136
- onChange={onChange}
137
- onBlur={onBlur}
138
- ref={ref}
139
- disabled={disabled}
140
- value={value}
141
- />
142
- );
143
- case 'checkbox':
144
- return (
145
- <StackedCheckBoxGroup
146
- className={`input-${inputType} ${className ?? ''}`}
147
- name={name}
148
- id={name}
149
- isInvalid={isInvalid}
150
- options={options as FieldOptions}
151
- onChange={onChange}
152
- onBlur={onBlur}
153
- ref={ref}
154
- disabled={disabled}
155
- value={value}
156
- />
157
- );
158
- case 'multi-select':
159
- return (
160
- <StackedMultiSelect
161
- className={`input-${inputType} ${className ?? ''}`}
162
- name={name}
163
- id={name}
164
- isInvalid={isInvalid}
165
- options={options as FieldOptions}
166
- onChange={onChange}
167
- onBlur={onBlur}
168
- ref={ref}
169
- disabled={disabled}
170
- value={value}
171
- setValue={setValue as UseFormSetValue<FieldValues>}
172
- control={control as Control<FieldValues, any>}
173
- placeholder={placeholder}
174
- />
175
- );
176
- case 'pilled-text':
177
- return (
178
- <StackedPilledInput
179
- className={`input-${inputType} ${className ?? ''}`}
180
- aria-label={ariaLabel}
181
- name={name}
182
- id={name}
183
- isInvalid={isInvalid}
184
- onChange={onChange}
185
- onBlur={onBlur}
186
- ref={ref}
187
- disabled={disabled}
188
- value={value}
189
- setValue={setValue as UseFormSetValue<FieldValues>}
190
- control={control as Control<FieldValues, any>}
191
- />
192
- );
193
- case 'switch':
194
- return (
195
- <StackedSwitch
196
- className={`input-${inputType} ${className ?? ''}`}
197
- name={name}
198
- id={name}
199
- isInvalid={isInvalid}
200
- onChange={onChange}
201
- onBlur={onBlur}
202
- ref={ref}
203
- value={value}
204
- />
205
- );
206
- default:
207
- return null;
208
- }
209
- },
210
- [
211
- ariaLabel,
212
- className,
213
- control,
214
- defaultValue,
215
- disabled,
216
- inputType,
217
- isInvalid,
218
- isRequired,
219
- maxLength,
220
- name,
221
- options,
222
- placeholder,
223
- setValue,
224
- ]
225
- );
73
+ const selectedInputField = (
74
+ onChange: () => void,
75
+ onBlur: () => void,
76
+ ref: RefCallBack,
77
+ value: string
78
+ ) => {
79
+ switch (inputType) {
80
+ case 'text':
81
+ return (
82
+ <StackedInput
83
+ className={`input-${inputType} ${className ?? ''}`}
84
+ aria-label={ariaLabel}
85
+ name={name}
86
+ id={name}
87
+ placeholder={placeholder}
88
+ maxLength={maxLength}
89
+ isRequired={isRequired}
90
+ isInvalid={isInvalid}
91
+ onChange={onChange}
92
+ onBlur={onBlur}
93
+ ref={ref}
94
+ disabled={disabled}
95
+ value={value}
96
+ />
97
+ );
98
+ case 'radio':
99
+ return (
100
+ <StackedRadioGroup
101
+ className={`input-${inputType} ${className ?? ''}`}
102
+ name={name}
103
+ id={name}
104
+ isInvalid={isInvalid}
105
+ options={options as FieldOptions}
106
+ onChange={onChange}
107
+ onBlur={onBlur}
108
+ ref={ref}
109
+ disabled={disabled}
110
+ value={value}
111
+ />
112
+ );
113
+ case 'select':
114
+ return (
115
+ <StackedSelect
116
+ className={`input-${inputType} ${className ?? ''}`}
117
+ name={name}
118
+ id={name}
119
+ isRequired={isRequired}
120
+ isInvalid={isInvalid}
121
+ options={options as FieldOptions}
122
+ handleOnChange={onChange}
123
+ onBlur={onBlur}
124
+ setValue={setValue as UseFormSetValue<FieldValues>}
125
+ control={control as Control<FieldValues, any>}
126
+ ref={ref}
127
+ disabled={disabled}
128
+ value={value}
129
+ defaultValue={defaultValue}
130
+ placeholder={placeholder}
131
+ />
132
+ );
133
+ case 'textarea':
134
+ return (
135
+ <StackedTextarea
136
+ className={`input-${inputType} ${className ?? ''}`}
137
+ name={name}
138
+ id={name}
139
+ maxLength={maxLength}
140
+ isInvalid={isInvalid}
141
+ onChange={onChange}
142
+ onBlur={onBlur}
143
+ ref={ref}
144
+ disabled={disabled}
145
+ value={value}
146
+ />
147
+ );
148
+ case 'checkbox':
149
+ return (
150
+ <StackedCheckBoxGroup
151
+ className={`input-${inputType} ${className ?? ''}`}
152
+ name={name}
153
+ id={name}
154
+ isInvalid={isInvalid}
155
+ options={options as FieldOptions}
156
+ onChange={onChange}
157
+ onBlur={onBlur}
158
+ ref={ref}
159
+ disabled={disabled}
160
+ value={value}
161
+ />
162
+ );
163
+ case 'multi-select':
164
+ return (
165
+ <StackedMultiSelect
166
+ className={`input-${inputType} ${className ?? ''}`}
167
+ name={name}
168
+ id={name}
169
+ isInvalid={isInvalid}
170
+ options={options as FieldOptions}
171
+ onChange={onChange}
172
+ onBlur={onBlur}
173
+ ref={ref}
174
+ disabled={disabled}
175
+ value={value}
176
+ setValue={setValue as UseFormSetValue<FieldValues>}
177
+ control={control as Control<FieldValues, any>}
178
+ setError={setError as UseFormSetError<FieldValues>}
179
+ clearErrors={clearErrors as UseFormClearErrors<FieldValues>}
180
+ placeholder={placeholder}
181
+ maxLength={maxLength}
182
+ />
183
+ );
184
+ case 'pilled-text':
185
+ return (
186
+ <StackedPilledInput
187
+ className={`input-${inputType} ${className ?? ''}`}
188
+ aria-label={ariaLabel}
189
+ name={name}
190
+ id={name}
191
+ isInvalid={isInvalid}
192
+ onChange={onChange}
193
+ onBlur={onBlur}
194
+ ref={ref}
195
+ disabled={disabled}
196
+ value={value}
197
+ setValue={setValue as UseFormSetValue<FieldValues>}
198
+ setError={setError as UseFormSetError<FieldValues>}
199
+ clearErrors={clearErrors as UseFormClearErrors<FieldValues>}
200
+ control={control as Control<FieldValues, any>}
201
+ maxLength={maxLength}
202
+ />
203
+ );
204
+ case 'switch':
205
+ return (
206
+ <StackedSwitch
207
+ className={`input-${inputType} ${className ?? ''}`}
208
+ name={name}
209
+ id={name}
210
+ isInvalid={isInvalid}
211
+ onChange={onChange}
212
+ onBlur={onBlur}
213
+ ref={ref}
214
+ value={value}
215
+ />
216
+ );
217
+ default:
218
+ return null;
219
+ }
220
+ };
226
221
 
227
222
  return (
228
223
  <Controller