@xqmsg/ui-core 0.14.0 → 0.14.1

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 (9) hide show
  1. package/dist/ui-core.cjs.development.js +21 -5
  2. package/dist/ui-core.cjs.development.js.map +1 -1
  3. package/dist/ui-core.cjs.production.min.js +1 -1
  4. package/dist/ui-core.cjs.production.min.js.map +1 -1
  5. package/dist/ui-core.esm.js +22 -6
  6. package/dist/ui-core.esm.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/components/input/StackedSelect/StackedSelect.tsx +9 -10
  9. package/src/components/input/index.tsx +143 -160
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.14.0",
2
+ "version": "0.14.1",
3
3
  "license": "MIT",
4
4
  "main": "dist/index.js",
5
5
  "typings": "dist/index.d.ts",
package/src/components/input/StackedSelect/StackedSelect.tsx CHANGED
@@ -13,6 +13,7 @@ import colors from '../../../../src/theme/foundations/colors';
13
13
  import { UseFormSetValue, FieldValues, Control } from 'react-hook-form';
14
14
  import SubtractIcon from './assets/svg/subtract.svg';
15
15
  import { Dropdown } from '../components/dropdown';
16
+ import useDidMountEffect from '../../../hooks/useDidMountEffect';
16
17
 
17
18
  export interface StackedSelectProps extends StackedInputProps {
18
19
  options: FieldOptions;
@@ -26,23 +27,21 @@ export interface StackedSelectProps extends StackedInputProps {
26
27
  */
27
28
  const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
28
29
  (
29
- {
30
- isRequired,
31
- options,
32
- name,
33
- setValue,
34
- handleOnChange,
35
- defaultValue,
36
- ...props
37
- },
30
+ { isRequired, options, name, setValue, handleOnChange, value, ...props },
38
31
  _ref
39
32
  ) => {
40
33
  const dropdownRef = useRef(null);
41
34
  const [isFocussed, setIsFocussed] = useState(false);
42
35
  const [selectedOption, setSelectedOption] = useState(
43
- options.find(option => option.value === defaultValue)?.label ?? ''
36
+ options.find(option => option.value === value)?.label ?? ''
44
37
  );
45
38
 
39
+ useDidMountEffect(() => {
40
+ setSelectedOption(
41
+ options.find(option => option.value === value)?.label ?? ''
42
+ );
43
+ }, [value]);
44
+
46
45
  useOutsideClick({ ref: dropdownRef, handler: () => setIsFocussed(false) });
47
46
 
48
47
  const handleOnSelectItem = (option: {
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';
@@ -64,165 +64,148 @@ export function Input<T extends FieldValues>({
64
64
  onChange,
65
65
  setValue,
66
66
  }: 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
- );
67
+ const selectedInputField = (
68
+ onChange: () => void,
69
+ onBlur: () => void,
70
+ ref: RefCallBack,
71
+ value: string
72
+ ) => {
73
+ switch (inputType) {
74
+ case 'text':
75
+ return (
76
+ <StackedInput
77
+ className={`input-${inputType} ${className ?? ''}`}
78
+ aria-label={ariaLabel}
79
+ name={name}
80
+ id={name}
81
+ placeholder={placeholder}
82
+ maxLength={maxLength}
83
+ isRequired={isRequired}
84
+ isInvalid={isInvalid}
85
+ onChange={onChange}
86
+ onBlur={onBlur}
87
+ ref={ref}
88
+ disabled={disabled}
89
+ value={value}
90
+ />
91
+ );
92
+ case 'radio':
93
+ return (
94
+ <StackedRadioGroup
95
+ className={`input-${inputType} ${className ?? ''}`}
96
+ name={name}
97
+ id={name}
98
+ isInvalid={isInvalid}
99
+ options={options as FieldOptions}
100
+ onChange={onChange}
101
+ onBlur={onBlur}
102
+ ref={ref}
103
+ disabled={disabled}
104
+ value={value}
105
+ />
106
+ );
107
+ case 'select':
108
+ return (
109
+ <StackedSelect
110
+ className={`input-${inputType} ${className ?? ''}`}
111
+ name={name}
112
+ id={name}
113
+ isRequired={isRequired}
114
+ isInvalid={isInvalid}
115
+ options={options as FieldOptions}
116
+ handleOnChange={onChange}
117
+ onBlur={onBlur}
118
+ setValue={setValue as UseFormSetValue<FieldValues>}
119
+ control={control as Control<FieldValues, any>}
120
+ ref={ref}
121
+ disabled={disabled}
122
+ value={value}
123
+ defaultValue={defaultValue}
124
+ placeholder={placeholder}
125
+ />
126
+ );
127
+ case 'textarea':
128
+ return (
129
+ <StackedTextarea
130
+ className={`input-${inputType} ${className ?? ''}`}
131
+ name={name}
132
+ id={name}
133
+ maxLength={maxLength}
134
+ isInvalid={isInvalid}
135
+ onChange={onChange}
136
+ onBlur={onBlur}
137
+ ref={ref}
138
+ disabled={disabled}
139
+ value={value}
140
+ />
141
+ );
142
+ case 'checkbox':
143
+ return (
144
+ <StackedCheckBoxGroup
145
+ className={`input-${inputType} ${className ?? ''}`}
146
+ name={name}
147
+ id={name}
148
+ isInvalid={isInvalid}
149
+ options={options as FieldOptions}
150
+ onChange={onChange}
151
+ onBlur={onBlur}
152
+ ref={ref}
153
+ disabled={disabled}
154
+ value={value}
155
+ />
156
+ );
157
+ case 'multi-select':
158
+ return (
159
+ <StackedMultiSelect
160
+ className={`input-${inputType} ${className ?? ''}`}
161
+ name={name}
162
+ id={name}
163
+ isInvalid={isInvalid}
164
+ options={options as FieldOptions}
165
+ onChange={onChange}
166
+ onBlur={onBlur}
167
+ ref={ref}
168
+ disabled={disabled}
169
+ value={value}
170
+ setValue={setValue as UseFormSetValue<FieldValues>}
171
+ control={control as Control<FieldValues, any>}
172
+ placeholder={placeholder}
173
+ />
174
+ );
175
+ case 'pilled-text':
176
+ return (
177
+ <StackedPilledInput
178
+ className={`input-${inputType} ${className ?? ''}`}
179
+ aria-label={ariaLabel}
180
+ name={name}
181
+ id={name}
182
+ isInvalid={isInvalid}
183
+ onChange={onChange}
184
+ onBlur={onBlur}
185
+ ref={ref}
186
+ disabled={disabled}
187
+ value={value}
188
+ setValue={setValue as UseFormSetValue<FieldValues>}
189
+ control={control as Control<FieldValues, any>}
190
+ />
191
+ );
192
+ case 'switch':
193
+ return (
194
+ <StackedSwitch
195
+ className={`input-${inputType} ${className ?? ''}`}
196
+ name={name}
197
+ id={name}
198
+ isInvalid={isInvalid}
199
+ onChange={onChange}
200
+ onBlur={onBlur}
201
+ ref={ref}
202
+ value={value}
203
+ />
204
+ );
205
+ default:
206
+ return null;
207
+ }
208
+ };
226
209
 
227
210
  return (
228
211
  <Controller