@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
|
@@ -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",
|
|
@@ -1575,6 +1578,7 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
|
|
|
1575
1578
|
width: "0",
|
|
1576
1579
|
autoComplete: "off",
|
|
1577
1580
|
type: "text",
|
|
1581
|
+
ref: inputRef,
|
|
1578
1582
|
tabIndex: -1,
|
|
1579
1583
|
_focus: {
|
|
1580
1584
|
boxShadow: 'none !important'
|
|
@@ -1596,7 +1600,7 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
|
|
|
1596
1600
|
optionIndex: optionIndex,
|
|
1597
1601
|
loading: loadingOptions
|
|
1598
1602
|
}, /*#__PURE__*/React__default.createElement(react.Input, {
|
|
1599
|
-
|
|
1603
|
+
autoFocus: true,
|
|
1600
1604
|
value: searchValue,
|
|
1601
1605
|
onChange: handleInput,
|
|
1602
1606
|
disabled: loadingOptions
|
|
@@ -1946,12 +1950,9 @@ 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
|
-
if (inputType === 'text') {
|
|
1952
|
-
console.log(errorText);
|
|
1953
|
-
console.log(isInvalid);
|
|
1954
|
-
}
|
|
1955
1956
|
switch (inputType) {
|
|
1956
1957
|
case 'text':
|
|
1957
1958
|
return /*#__PURE__*/React__default.createElement(StackedInput, {
|
|
@@ -1972,9 +1973,7 @@ function Input(_ref) {
|
|
|
1972
1973
|
defaultValue: defaultValue,
|
|
1973
1974
|
value: value,
|
|
1974
1975
|
variant: variant,
|
|
1975
|
-
label: label
|
|
1976
|
-
setError: setError,
|
|
1977
|
-
clearErrors: clearErrors
|
|
1976
|
+
label: label
|
|
1978
1977
|
});
|
|
1979
1978
|
case 'radio':
|
|
1980
1979
|
return /*#__PURE__*/React__default.createElement(StackedRadioGroup, {
|
|
@@ -2001,15 +2000,14 @@ function Input(_ref) {
|
|
|
2001
2000
|
onBlur: onBlur,
|
|
2002
2001
|
setValue: setValue,
|
|
2003
2002
|
control: control,
|
|
2004
|
-
setError: setError,
|
|
2005
|
-
clearErrors: clearErrors,
|
|
2006
2003
|
ref: ref,
|
|
2007
2004
|
disabled: disabled,
|
|
2008
2005
|
value: value,
|
|
2009
2006
|
defaultValue: defaultValue,
|
|
2010
2007
|
placeholder: placeholder,
|
|
2011
2008
|
fullOptions: fullOptions,
|
|
2012
|
-
loadingOptions: loadingOptions
|
|
2009
|
+
loadingOptions: loadingOptions,
|
|
2010
|
+
searchable: searchable
|
|
2013
2011
|
});
|
|
2014
2012
|
case 'textarea':
|
|
2015
2013
|
return /*#__PURE__*/React__default.createElement(StackedTextarea, {
|
|
@@ -2126,7 +2124,7 @@ function Input(_ref) {
|
|
|
2126
2124
|
tooltipText: tooltipText,
|
|
2127
2125
|
label: label,
|
|
2128
2126
|
isRequired: isRequired
|
|
2129
|
-
}), selectedInputField(onChange ? onChange : fieldOnChange, onBlur, ref, value), isInvalid && /*#__PURE__*/React__default.createElement(react.FormErrorMessage, null, errorText), helperText && /*#__PURE__*/React__default.createElement(react.FormHelperText, null, helperText)
|
|
2127
|
+
}), selectedInputField(onChange ? onChange : fieldOnChange, onBlur, ref, value), isInvalid && /*#__PURE__*/React__default.createElement(react.FormErrorMessage, null, errorText), helperText && /*#__PURE__*/React__default.createElement(react.FormHelperText, null, helperText));
|
|
2130
2128
|
}
|
|
2131
2129
|
});
|
|
2132
2130
|
}
|
|
@@ -3042,7 +3040,8 @@ var Workspace = function Workspace(_ref) {
|
|
|
3042
3040
|
filled = _ref$filled === void 0 ? false : _ref$filled;
|
|
3043
3041
|
if (filled) {
|
|
3044
3042
|
return /*#__PURE__*/React__default.createElement(Memo$w, {
|
|
3045
|
-
|
|
3043
|
+
width: boxSize,
|
|
3044
|
+
height: boxSize
|
|
3046
3045
|
});
|
|
3047
3046
|
}
|
|
3048
3047
|
return /*#__PURE__*/React__default.createElement(react.Image, {
|