@xqmsg/ui-core 0.24.3 → 0.24.5

package/dist/components/input/StackedInput/StackedInput.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 import { InputFieldProps } from '../InputTypes';
 export interface StackedInputProps extends InputFieldProps {
     isRequired?: boolean;
-    allowDefault?: boolean;
     leftElement?: React.ReactNode;
     rightElement?: React.ReactNode;
     variant?: string;

package/dist/components/input/StackedMultiSelect/index.d.ts

@@ -7,6 +7,7 @@ export interface StackedMultiSelectProps extends ReactSelectFieldProps {
     setError: UseFormSetError<FieldValues>;
     clearErrors: UseFormClearErrors<FieldValues>;
     control: Control<FieldValues, any>;
+    loadingOptions?: boolean;
 }
 /**
  * A functional React component utilized to render the `StackedMultiSelect` component.

package/dist/components/input/StackedSelect/index.d.ts

@@ -8,6 +8,7 @@ export interface StackedSelectProps extends StackedInputProps {
     setValue: UseFormSetValue<FieldValues>;
     control: Control<FieldValues, any>;
     handleOnChange: (value?: string) => void;
+    loadingOptions?: boolean;
 }
 /**
  * A functional React component utilized to render the `StackedSelect` component.

package/dist/components/input/StackedTextarea/StackedTextarea.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 import { TextareaFieldProps } from '../InputTypes';
 export interface StackedTextareaProps extends TextareaFieldProps {
     isRequired?: boolean;
-    allowDefault?: boolean;
     variant: string;
     label?: string;
 }

package/dist/components/input/components/dropdown/index.d.ts

@@ -7,6 +7,7 @@ export interface DropdownProps {
     position: 'top' | 'bottom';
     optionIndex?: number | null;
     children?: React.ReactNode;
+    loading?: boolean;
 }
 /**
  * A functional React component utilized to render the `Dropdown` component

package/dist/components/input/index.d.ts

@@ -21,13 +21,13 @@ export interface InputProps<T extends FieldValues = FieldValues> extends Validat
     setError: UseFormSetError<T>;
     clearErrors: UseFormClearErrors<T>;
     leftElement?: React.ReactNode;
-    allowDefault?: boolean;
     rightElement?: React.ReactNode;
     variant?: string;
     separators?: string[];
+    loadingOptions?: boolean;
 }
 /**
  * A functional React component utilized to render the `Input` component. Utilizes a switch statement
  * to render the correct input based on the `inputType`.
  */
-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, allowDefault, variant, onChange, setValue, setError, clearErrors, separators, }: InputProps<T>): React.JSX.Element;
+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, }: InputProps<T>): React.JSX.Element;

package/dist/components/select/index.d.ts

@@ -20,7 +20,6 @@ export interface SelectNativeProps<T extends FieldValues> extends ValidationProp
     setValue: UseFormSetValue<T>;
     setError: UseFormSetError<T>;
     clearErrors: UseFormClearErrors<T>;
-    allowDefault?: boolean;
 }
 /**
  * A functional React component utilized to render the `SelectNative` component.

package/dist/ui-core.cjs.development.js

@@ -814,7 +814,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var _excluded = ["type", "isRequired", "rightElement", "leftElement", "defaultValue", "allowDefault", "variant", "label"];
+var _excluded = ["type", "isRequired", "rightElement", "leftElement", "defaultValue", "variant", "label"];
 /**
  * A functional React component utilized to render the `StackedInput` component.
  */
@@ -825,7 +825,6 @@ var StackedInput = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref)
     rightElement = _ref2.rightElement,
     leftElement = _ref2.leftElement,
     defaultValue = _ref2.defaultValue,
-    allowDefault = _ref2.allowDefault,
     variant = _ref2.variant,
     label = _ref2.label,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded);
@@ -838,13 +837,7 @@ var StackedInput = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref)
     ref: _ref,
     defaultValue: defaultValue,
     fontSize: isMobile ? '17px' : '13px',
-    variant: variant,
-    onKeyDown: function onKeyDown(e) {
-      if (e.key === 'Enter' && !allowDefault) {
-        e.stopPropagation();
-        e.preventDefault();
-      }
-    }
+    variant: variant
   })), rightElement && rightElement);
 });
 
@@ -880,9 +873,29 @@ var Dropdown = function Dropdown(_ref) {
     dropdownRef = _ref.dropdownRef,
     position = _ref.position,
     optionIndex = _ref.optionIndex,
-    children = _ref.children;
+    children = _ref.children,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading;
   var DropdownContent = React.useMemo(function () {
-    if (!options || options.length === 0) {
+    if (loading) {
+      return /*#__PURE__*/React__default.createElement(react.Box, {
+        borderRadius: "inherit",
+        fontSize: "13px",
+        px: "8px",
+        py: "4px",
+        width: "100%",
+        color: colors.label.primary.light,
+        bg: "inherit",
+        whiteSpace: "nowrap"
+      }, /*#__PURE__*/React__default.createElement(react.Flex, {
+        alignItems: "center"
+      }, "Loading", /*#__PURE__*/React__default.createElement(react.Spinner, {
+        size: "xs",
+        opacity: 0.5,
+        ml: 2
+      })));
+    }
+    if (!loading && (!options || options.length === 0)) {
       return /*#__PURE__*/React__default.createElement(react.Box, {
         borderRadius: "inherit",
         fontSize: "13px",
@@ -1028,7 +1041,7 @@ var Dropdown$1 = function Dropdown(_ref) {
   });
 };
 
-var _excluded$1 = ["isRequired", "options", "name", "setValue", "handleOnChange", "disabled", "value", "fullOptions"];
+var _excluded$1 = ["isRequired", "options", "name", "setValue", "handleOnChange", "disabled", "value", "fullOptions", "loadingOptions"];
 /**
  * A functional React component utilized to render the `StackedSelect` component.
  */
@@ -1042,6 +1055,7 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
     disabled = _ref2.disabled,
     value = _ref2.value,
     fullOptions = _ref2.fullOptions,
+    loadingOptions = _ref2.loadingOptions,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded$1);
   var dropdownRef = React.useRef(null);
   var dropdownMenuRef = React.useRef(null);
@@ -1095,27 +1109,27 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
     setSearchValue('');
   };
   var handleOnKeyDown = function handleOnKeyDown(e) {
-    var initialOptionIndex = options[0].value === 'section_header' ? 1 : 0;
+    var initialOptionIndex = filteredOptions.length && filteredOptions[0].value === 'section_header' ? 1 : 0;
     if (!isFocussed && (e.key === 'Enter' || e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
       setIsFocussed(true);
       return setOptionIndex(initialOptionIndex);
     }
-    if (isFocussed) {
+    if (isFocussed && filteredOptions.length > 0) {
       if (optionIndex === null && (e.key === 'Enter' || e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
         return setOptionIndex(initialOptionIndex);
       }
       if (e.key === 'ArrowUp' && optionIndex !== null && optionIndex > 0) {
         var _dropdownMenuRef$curr;
-        var incrementValue = options[optionIndex - 1] && options[optionIndex - 1].value === 'section_header' ? 2 : 1;
+        var incrementValue = filteredOptions[optionIndex - 1] && filteredOptions[optionIndex - 1].value === 'section_header' ? 2 : 1;
         setOptionIndex(optionIndex - incrementValue);
         return (_dropdownMenuRef$curr = dropdownMenuRef.current) == null ? void 0 : _dropdownMenuRef$curr.scrollTo({
           top: optionIndex * 24,
           behavior: 'smooth'
         });
       }
-      if (e.key === 'ArrowDown' && optionIndex !== null && optionIndex < options.length) {
+      if (e.key === 'ArrowDown' && optionIndex !== null && optionIndex < filteredOptions.length) {
         var _dropdownMenuRef$curr2;
-        var _incrementValue = options[optionIndex + 1] && options[optionIndex + 1].value === 'section_header' ? 2 : 1;
+        var _incrementValue = filteredOptions[optionIndex + 1] && filteredOptions[optionIndex + 1].value === 'section_header' ? 2 : 1;
         setOptionIndex(optionIndex + _incrementValue);
         return (_dropdownMenuRef$curr2 = dropdownMenuRef.current) == null ? void 0 : _dropdownMenuRef$curr2.scrollTo({
           top: optionIndex * 24,
@@ -1123,7 +1137,7 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
         });
       }
       if (e.key === 'Enter' && optionIndex !== null) {
-        var option = options.find(function (_, idx) {
+        var option = filteredOptions.find(function (_, idx) {
           return optionIndex === idx;
         });
         if (!option) return;
@@ -1161,12 +1175,11 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
   }, [options, searchValue]);
   var handleInput = function handleInput(e) {
     var _filteredOptions$;
-    var initialOptionIndex = ((_filteredOptions$ = filteredOptions[0]) == null ? void 0 : _filteredOptions$.value) === 'section_header' ? 1 : 0;
+    var initialOptionIndex = filteredOptions.length && ((_filteredOptions$ = filteredOptions[0]) == null ? void 0 : _filteredOptions$.value) === 'section_header' ? 1 : 0;
     setOptionIndex(initialOptionIndex);
     var value = e.target.value;
     setSearchValue(value);
   };
-  console.log(searchValue);
   return /*#__PURE__*/React__default.createElement(react.Box, {
     ref: dropdownRef,
     position: "relative"
@@ -1177,7 +1190,8 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
     onClick: function onClick() {
       return setIsFocussed(!isFocussed);
     },
-    cursor: isFocussed ? 'select' : 'pointer',
+    cursor: isFocussed ? 'default' : 'pointer',
+    color: loadingOptions ? 'transparent' : 'inital',
     fontSize: "13px",
     value: isFocussed ? searchValue : selectedOption,
     autoComplete: "off",
@@ -1196,17 +1210,17 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
     dropdownRef: dropdownMenuRef,
     onSelectItem: handleOnSelectItem,
     options: filteredOptions,
-    optionIndex: optionIndex
+    optionIndex: optionIndex,
+    loading: loadingOptions
   }));
 });
 
-var _excluded$2 = ["isRequired", "allowDefault", "variant", "label"];
+var _excluded$2 = ["isRequired", "variant", "label"];
 /**
  * A functional React component utilized to render the `StackedTextarea` component.
  */
 var StackedTextarea = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref) {
-  var allowDefault = _ref2.allowDefault,
-    variant = _ref2.variant,
+  var variant = _ref2.variant,
     label = _ref2.label,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded$2);
   var isMobile = variant === 'mobile';
@@ -1216,26 +1230,14 @@ var StackedTextarea = /*#__PURE__*/React__default.forwardRef(function (_ref2, _r
     }, props, {
       variant: variant,
       fontSize: "17px",
-      placeholder: label != null ? label : '',
-      onKeyDown: function onKeyDown(e) {
-        if (e.key === 'Enter' && !allowDefault) {
-          e.stopPropagation();
-          e.preventDefault();
-        }
-      }
+      placeholder: label != null ? label : ''
     })));
   }
   return /*#__PURE__*/React__default.createElement(react.Textarea, Object.assign({
     ref: _ref
   }, props, {
     variant: variant,
-    fontSize: "13px",
-    onKeyDown: function onKeyDown(e) {
-      if (e.key === 'Enter' && !allowDefault) {
-        e.stopPropagation();
-        e.preventDefault();
-      }
-    }
+    fontSize: "13px"
   }));
 });
 
@@ -1314,7 +1316,8 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     control = _ref2.control,
     name = _ref2.name,
     placeholder = _ref2.placeholder,
-    disabled = _ref2.disabled;
+    disabled = _ref2.disabled,
+    loadingOptions = _ref2.loadingOptions;
   var watchedValue = reactHookForm.useWatch({
     control: control,
     name: name
@@ -1499,7 +1502,6 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
   }, [localOptions, searchValue]);
   var handleInput = function handleInput(e) {
     var _filteredOptions$;
-    console.log(e);
     var initialOptionIndex = ((_filteredOptions$ = filteredOptions[0]) == null ? void 0 : _filteredOptions$.value) === 'section_header' ? 1 : 0;
     setOptionIndex(initialOptionIndex);
     var value = e.target.value;
@@ -1588,10 +1590,12 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     },
     options: filteredOptions,
     position: position,
-    optionIndex: optionIndex
+    optionIndex: optionIndex,
+    loading: loadingOptions
   }, /*#__PURE__*/React__default.createElement(react.Input, {
     value: searchValue,
-    onChange: handleInput
+    onChange: handleInput,
+    disabled: loadingOptions
   })));
 });
 
@@ -1927,14 +1931,15 @@ function Input(_ref) {
     disabled = _ref.disabled,
     rightElement = _ref.rightElement,
     leftElement = _ref.leftElement,
-    allowDefault = _ref.allowDefault,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'default' : _ref$variant,
     onChange = _ref.onChange,
     setValue = _ref.setValue,
     setError = _ref.setError,
     clearErrors = _ref.clearErrors,
-    separators = _ref.separators;
+    separators = _ref.separators,
+    _ref$loadingOptions = _ref.loadingOptions,
+    loadingOptions = _ref$loadingOptions === void 0 ? false : _ref$loadingOptions;
   function selectedInputField(onChange, onBlur, ref, value) {
     switch (inputType) {
       case 'text':
@@ -1955,7 +1960,6 @@ function Input(_ref) {
           disabled: disabled,
           defaultValue: defaultValue,
           value: value,
-          allowDefault: allowDefault,
           variant: variant,
           label: label
         });
@@ -1989,7 +1993,8 @@ function Input(_ref) {
           value: value,
           defaultValue: defaultValue,
           placeholder: placeholder,
-          fullOptions: fullOptions
+          fullOptions: fullOptions,
+          loadingOptions: loadingOptions
         });
       case 'textarea':
         return /*#__PURE__*/React__default.createElement(StackedTextarea, {
@@ -2040,7 +2045,8 @@ function Input(_ref) {
           control: control,
           setError: setError,
           clearErrors: clearErrors,
-          placeholder: placeholder
+          placeholder: placeholder,
+          loadingOptions: loadingOptions
         });
       case 'pilled-text':
         return /*#__PURE__*/React__default.createElement(StackedPilledInput, {