@xqmsg/ui-core 0.24.8 → 0.24.10
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.
- package/dist/components/input/StackedSelect/index.d.ts +1 -0
- package/dist/components/input/index.d.ts +2 -1
- package/dist/ui-core.cjs.development.js +20 -21
- package/dist/ui-core.cjs.development.js.map +1 -1
- package/dist/ui-core.cjs.production.min.js +1 -1
- package/dist/ui-core.cjs.production.min.js.map +1 -1
- package/dist/ui-core.esm.js +20 -21
- package/dist/ui-core.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/icons/workspace/index.tsx +1 -1
- package/src/components/input/Input.stories.tsx +1 -0
- package/src/components/input/StackedMultiSelect/index.tsx +2 -1
- package/src/components/input/StackedSelect/index.tsx +12 -8
- package/src/components/input/index.tsx +3 -9
package/package.json
CHANGED
|
@@ -16,7 +16,7 @@ export const Workspace: React.FC<WorkspaceProps> = ({
|
|
|
16
16
|
filled = false,
|
|
17
17
|
}) => {
|
|
18
18
|
if (filled) {
|
|
19
|
-
return <WorkspaceIcon boxSize={boxSize} />;
|
|
19
|
+
return <WorkspaceIcon width={boxSize} height={boxSize} />;
|
|
20
20
|
}
|
|
21
21
|
return <Image src={path} boxSize={boxSize} />;
|
|
22
22
|
};
|
|
@@ -339,6 +339,7 @@ const StackedMultiSelect = React.forwardRef<
|
|
|
339
339
|
width="0"
|
|
340
340
|
autoComplete="off"
|
|
341
341
|
type="text"
|
|
342
|
+
ref={inputRef}
|
|
342
343
|
tabIndex={-1}
|
|
343
344
|
_focus={{ boxShadow: 'none !important' }}
|
|
344
345
|
/>
|
|
@@ -356,7 +357,7 @@ const StackedMultiSelect = React.forwardRef<
|
|
|
356
357
|
loading={loadingOptions}
|
|
357
358
|
>
|
|
358
359
|
<Input
|
|
359
|
-
|
|
360
|
+
autoFocus
|
|
360
361
|
value={searchValue}
|
|
361
362
|
onChange={handleInput}
|
|
362
363
|
disabled={loadingOptions}
|
|
@@ -19,6 +19,7 @@ export interface StackedSelectProps extends StackedInputProps {
|
|
|
19
19
|
control: Control<FieldValues, any>;
|
|
20
20
|
handleOnChange: (value?: string) => void;
|
|
21
21
|
loadingOptions?: boolean;
|
|
22
|
+
searchable?: boolean;
|
|
22
23
|
}
|
|
23
24
|
|
|
24
25
|
/**
|
|
@@ -36,6 +37,7 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
|
|
|
36
37
|
value,
|
|
37
38
|
fullOptions,
|
|
38
39
|
loadingOptions,
|
|
40
|
+
searchable = true,
|
|
39
41
|
...props
|
|
40
42
|
},
|
|
41
43
|
_ref
|
|
@@ -195,13 +197,16 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
|
|
|
195
197
|
}, [options, searchValue]);
|
|
196
198
|
|
|
197
199
|
const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
200
|
+
if (searchable) {
|
|
201
|
+
const initialOptionIndex =
|
|
202
|
+
filteredOptions.length &&
|
|
203
|
+
filteredOptions[0]?.value === 'section_header'
|
|
204
|
+
? 1
|
|
205
|
+
: 0;
|
|
206
|
+
setOptionIndex(initialOptionIndex);
|
|
207
|
+
const { value } = e.target;
|
|
208
|
+
setSearchValue(value);
|
|
209
|
+
}
|
|
205
210
|
};
|
|
206
211
|
|
|
207
212
|
return (
|
|
@@ -213,7 +218,6 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
|
|
|
213
218
|
ref={_ref}
|
|
214
219
|
onClick={() => setIsFocussed(!isFocussed)}
|
|
215
220
|
cursor={isFocussed ? 'default' : 'pointer'}
|
|
216
|
-
color={loadingOptions ? 'transparent' : 'inital'}
|
|
217
221
|
fontSize="13px"
|
|
218
222
|
value={isFocussed ? searchValue : selectedOption}
|
|
219
223
|
autoComplete="off"
|
|
@@ -52,6 +52,7 @@ export interface InputProps<T extends FieldValues = FieldValues>
|
|
|
52
52
|
separators?: string[];
|
|
53
53
|
loadingOptions?: boolean;
|
|
54
54
|
truncatePillLength?: number;
|
|
55
|
+
searchable?: boolean;
|
|
55
56
|
}
|
|
56
57
|
|
|
57
58
|
/**
|
|
@@ -86,6 +87,7 @@ export function Input<T extends FieldValues>({
|
|
|
86
87
|
separators,
|
|
87
88
|
loadingOptions = false,
|
|
88
89
|
truncatePillLength,
|
|
90
|
+
searchable,
|
|
89
91
|
}: InputProps<T>) {
|
|
90
92
|
function selectedInputField<T extends Element = Element>(
|
|
91
93
|
onChange: ((e: ChangeEvent<T>) => void) | ((v?: string) => void),
|
|
@@ -93,10 +95,6 @@ export function Input<T extends FieldValues>({
|
|
|
93
95
|
ref: RefCallBack,
|
|
94
96
|
value: string
|
|
95
97
|
) {
|
|
96
|
-
if (inputType === 'text') {
|
|
97
|
-
console.log(errorText);
|
|
98
|
-
console.log(isInvalid);
|
|
99
|
-
}
|
|
100
98
|
switch (inputType) {
|
|
101
99
|
case 'text':
|
|
102
100
|
return (
|
|
@@ -119,8 +117,6 @@ export function Input<T extends FieldValues>({
|
|
|
119
117
|
value={value}
|
|
120
118
|
variant={variant}
|
|
121
119
|
label={label as string}
|
|
122
|
-
setError={setError as UseFormSetError<FieldValues>}
|
|
123
|
-
clearErrors={clearErrors as UseFormClearErrors<FieldValues>}
|
|
124
120
|
/>
|
|
125
121
|
);
|
|
126
122
|
case 'radio':
|
|
@@ -151,8 +147,6 @@ export function Input<T extends FieldValues>({
|
|
|
151
147
|
onBlur={onBlur}
|
|
152
148
|
setValue={setValue as UseFormSetValue<FieldValues>}
|
|
153
149
|
control={control as Control<FieldValues, any>}
|
|
154
|
-
setError={setError as UseFormSetError<FieldValues>}
|
|
155
|
-
clearErrors={clearErrors as UseFormClearErrors<FieldValues>}
|
|
156
150
|
ref={ref}
|
|
157
151
|
disabled={disabled}
|
|
158
152
|
value={value}
|
|
@@ -160,6 +154,7 @@ export function Input<T extends FieldValues>({
|
|
|
160
154
|
placeholder={placeholder}
|
|
161
155
|
fullOptions={fullOptions}
|
|
162
156
|
loadingOptions={loadingOptions}
|
|
157
|
+
searchable={searchable}
|
|
163
158
|
/>
|
|
164
159
|
);
|
|
165
160
|
case 'textarea':
|
|
@@ -304,7 +299,6 @@ export function Input<T extends FieldValues>({
|
|
|
304
299
|
)}
|
|
305
300
|
{isInvalid && <FormErrorMessage>{errorText}</FormErrorMessage>}
|
|
306
301
|
{helperText && <FormHelperText>{helperText}</FormHelperText>}
|
|
307
|
-
{errorText} {isInvalid?.toString()}
|
|
308
302
|
</FormControl>
|
|
309
303
|
)}
|
|
310
304
|
/>
|