@xqmsg/ui-core 0.24.9 → 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 +17 -10
- 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 +17 -10
- 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 +1 -0
- package/src/components/input/StackedSelect/index.tsx +12 -8
- package/src/components/input/index.tsx +3 -0
|
@@ -9,6 +9,7 @@ export interface StackedSelectProps extends StackedInputProps {
|
|
|
9
9
|
control: Control<FieldValues, any>;
|
|
10
10
|
handleOnChange: (value?: string) => void;
|
|
11
11
|
loadingOptions?: boolean;
|
|
12
|
+
searchable?: boolean;
|
|
12
13
|
}
|
|
13
14
|
/**
|
|
14
15
|
* A functional React component utilized to render the `StackedSelect` component.
|
|
@@ -26,9 +26,10 @@ export interface InputProps<T extends FieldValues = FieldValues> extends Validat
|
|
|
26
26
|
separators?: string[];
|
|
27
27
|
loadingOptions?: boolean;
|
|
28
28
|
truncatePillLength?: number;
|
|
29
|
+
searchable?: boolean;
|
|
29
30
|
}
|
|
30
31
|
/**
|
|
31
32
|
* A functional React component utilized to render the `Input` component. Utilizes a switch statement
|
|
32
33
|
* to render the correct input based on the `inputType`.
|
|
33
34
|
*/
|
|
34
|
-
export declare function Input<T extends FieldValues>({ inputType, label, ariaLabel, className, placeholder, name, helperText, options, tooltipText, isInvalid, errorText, isRequired, maxLength, defaultValue, fullOptions, control, disabled, rightElement, leftElement, variant, onChange, setValue, setError, clearErrors, separators, loadingOptions, truncatePillLength, }: InputProps<T>): React.JSX.Element;
|
|
35
|
+
export declare function Input<T extends FieldValues>({ inputType, label, ariaLabel, className, placeholder, name, helperText, options, tooltipText, isInvalid, errorText, isRequired, maxLength, defaultValue, fullOptions, control, disabled, rightElement, leftElement, variant, onChange, setValue, setError, clearErrors, separators, loadingOptions, truncatePillLength, searchable, }: InputProps<T>): React.JSX.Element;
|
|
@@ -1041,7 +1041,7 @@ var Dropdown$1 = function Dropdown(_ref) {
|
|
|
1041
1041
|
});
|
|
1042
1042
|
};
|
|
1043
1043
|
|
|
1044
|
-
var _excluded$1 = ["isRequired", "options", "name", "setValue", "handleOnChange", "disabled", "value", "fullOptions", "loadingOptions"];
|
|
1044
|
+
var _excluded$1 = ["isRequired", "options", "name", "setValue", "handleOnChange", "disabled", "value", "fullOptions", "loadingOptions", "searchable"];
|
|
1045
1045
|
/**
|
|
1046
1046
|
* A functional React component utilized to render the `StackedSelect` component.
|
|
1047
1047
|
*/
|
|
@@ -1056,6 +1056,8 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
|
|
|
1056
1056
|
value = _ref2.value,
|
|
1057
1057
|
fullOptions = _ref2.fullOptions,
|
|
1058
1058
|
loadingOptions = _ref2.loadingOptions,
|
|
1059
|
+
_ref2$searchable = _ref2.searchable,
|
|
1060
|
+
searchable = _ref2$searchable === void 0 ? true : _ref2$searchable,
|
|
1059
1061
|
props = _objectWithoutPropertiesLoose(_ref2, _excluded$1);
|
|
1060
1062
|
var dropdownRef = React.useRef(null);
|
|
1061
1063
|
var dropdownMenuRef = React.useRef(null);
|
|
@@ -1174,11 +1176,13 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
|
|
|
1174
1176
|
}));
|
|
1175
1177
|
}, [options, searchValue]);
|
|
1176
1178
|
var handleInput = function handleInput(e) {
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1179
|
+
if (searchable) {
|
|
1180
|
+
var _filteredOptions$;
|
|
1181
|
+
var initialOptionIndex = filteredOptions.length && ((_filteredOptions$ = filteredOptions[0]) == null ? void 0 : _filteredOptions$.value) === 'section_header' ? 1 : 0;
|
|
1182
|
+
setOptionIndex(initialOptionIndex);
|
|
1183
|
+
var _value = e.target.value;
|
|
1184
|
+
setSearchValue(_value);
|
|
1185
|
+
}
|
|
1182
1186
|
};
|
|
1183
1187
|
return /*#__PURE__*/React__default.createElement(react.Box, {
|
|
1184
1188
|
ref: dropdownRef,
|
|
@@ -1191,7 +1195,6 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
|
|
|
1191
1195
|
return setIsFocussed(!isFocussed);
|
|
1192
1196
|
},
|
|
1193
1197
|
cursor: isFocussed ? 'default' : 'pointer',
|
|
1194
|
-
color: loadingOptions ? 'transparent' : 'inital',
|
|
1195
1198
|
fontSize: "13px",
|
|
1196
1199
|
value: isFocussed ? searchValue : selectedOption,
|
|
1197
1200
|
autoComplete: "off",
|
|
@@ -1597,6 +1600,7 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
|
|
|
1597
1600
|
optionIndex: optionIndex,
|
|
1598
1601
|
loading: loadingOptions
|
|
1599
1602
|
}, /*#__PURE__*/React__default.createElement(react.Input, {
|
|
1603
|
+
autoFocus: true,
|
|
1600
1604
|
value: searchValue,
|
|
1601
1605
|
onChange: handleInput,
|
|
1602
1606
|
disabled: loadingOptions
|
|
@@ -1946,7 +1950,8 @@ function Input(_ref) {
|
|
|
1946
1950
|
separators = _ref.separators,
|
|
1947
1951
|
_ref$loadingOptions = _ref.loadingOptions,
|
|
1948
1952
|
loadingOptions = _ref$loadingOptions === void 0 ? false : _ref$loadingOptions,
|
|
1949
|
-
truncatePillLength = _ref.truncatePillLength
|
|
1953
|
+
truncatePillLength = _ref.truncatePillLength,
|
|
1954
|
+
searchable = _ref.searchable;
|
|
1950
1955
|
function selectedInputField(onChange, onBlur, ref, value) {
|
|
1951
1956
|
switch (inputType) {
|
|
1952
1957
|
case 'text':
|
|
@@ -2001,7 +2006,8 @@ function Input(_ref) {
|
|
|
2001
2006
|
defaultValue: defaultValue,
|
|
2002
2007
|
placeholder: placeholder,
|
|
2003
2008
|
fullOptions: fullOptions,
|
|
2004
|
-
loadingOptions: loadingOptions
|
|
2009
|
+
loadingOptions: loadingOptions,
|
|
2010
|
+
searchable: searchable
|
|
2005
2011
|
});
|
|
2006
2012
|
case 'textarea':
|
|
2007
2013
|
return /*#__PURE__*/React__default.createElement(StackedTextarea, {
|
|
@@ -3034,7 +3040,8 @@ var Workspace = function Workspace(_ref) {
|
|
|
3034
3040
|
filled = _ref$filled === void 0 ? false : _ref$filled;
|
|
3035
3041
|
if (filled) {
|
|
3036
3042
|
return /*#__PURE__*/React__default.createElement(Memo$w, {
|
|
3037
|
-
|
|
3043
|
+
width: boxSize,
|
|
3044
|
+
height: boxSize
|
|
3038
3045
|
});
|
|
3039
3046
|
}
|
|
3040
3047
|
return /*#__PURE__*/React__default.createElement(react.Image, {
|