@xqmsg/ui-core 0.24.3 → 0.24.4

package/src/components/input/StackedSelect/index.tsx

@@ -18,6 +18,7 @@ export interface StackedSelectProps extends StackedInputProps {
   setValue: UseFormSetValue<FieldValues>;
   control: Control<FieldValues, any>;
   handleOnChange: (value?: string) => void;
+  loadingOptions?: boolean;
 }
 
 /**
@@ -34,6 +35,7 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
       disabled,
       value,
       fullOptions,
+      loadingOptions,
       ...props
     },
     _ref
@@ -91,7 +93,10 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
     };
 
     const handleOnKeyDown: KeyboardEventHandler<HTMLInputElement> = e => {
-      const initialOptionIndex = options[0].value === 'section_header' ? 1 : 0;
+      const initialOptionIndex =
+        filteredOptions.length && filteredOptions[0].value === 'section_header'
+          ? 1
+          : 0;
 
       if (
         !isFocussed &&
@@ -101,7 +106,7 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
         return setOptionIndex(initialOptionIndex);
       }
 
-      if (isFocussed) {
+      if (isFocussed && filteredOptions.length > 0) {
         if (
           optionIndex === null &&
           (e.key === 'Enter' || e.key === 'ArrowUp' || e.key === 'ArrowDown')
@@ -111,8 +116,8 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
 
         if (e.key === 'ArrowUp' && optionIndex !== null && optionIndex > 0) {
           const incrementValue =
-            options[optionIndex - 1] &&
-            options[optionIndex - 1].value === 'section_header'
+            filteredOptions[optionIndex - 1] &&
+            filteredOptions[optionIndex - 1].value === 'section_header'
               ? 2
               : 1;
           setOptionIndex(optionIndex - incrementValue);
@@ -126,11 +131,11 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
         if (
           e.key === 'ArrowDown' &&
           optionIndex !== null &&
-          optionIndex < options.length
+          optionIndex < filteredOptions.length
         ) {
           const incrementValue =
-            options[optionIndex + 1] &&
-            options[optionIndex + 1].value === 'section_header'
+            filteredOptions[optionIndex + 1] &&
+            filteredOptions[optionIndex + 1].value === 'section_header'
               ? 2
               : 1;
           setOptionIndex(optionIndex + incrementValue);
@@ -142,7 +147,7 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
         }
 
         if (e.key === 'Enter' && optionIndex !== null) {
-          const option = options.find((_, idx) => optionIndex === idx);
+          const option = filteredOptions.find((_, idx) => optionIndex === idx);
           if (!option) return;
 
           if (handleOnChange) {
@@ -191,12 +196,13 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
 
     const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
       const initialOptionIndex =
-        filteredOptions[0]?.value === 'section_header' ? 1 : 0;
+        filteredOptions.length && filteredOptions[0]?.value === 'section_header'
+          ? 1
+          : 0;
       setOptionIndex(initialOptionIndex);
       const { value } = e.target;
       setSearchValue(value);
     };
-    console.log(searchValue);
 
     return (
       <Box ref={dropdownRef} position="relative">
@@ -206,7 +212,8 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
             {...props}
             ref={_ref}
             onClick={() => setIsFocussed(!isFocussed)}
-            cursor={isFocussed ? 'select' : 'pointer'}
+            cursor={isFocussed ? 'default' : 'pointer'}
+            color={loadingOptions ? 'transparent' : 'inital'}
             fontSize="13px"
             value={isFocussed ? searchValue : selectedOption}
             autoComplete="off"
@@ -227,6 +234,7 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
             onSelectItem={handleOnSelectItem}
             options={filteredOptions}
             optionIndex={optionIndex}
+            loading={loadingOptions}
           />
         )}
       </Box>

package/src/components/input/components/dropdown/index.tsx

@@ -1,5 +1,5 @@
 import React, { RefObject, useMemo } from 'react';
-import { Box, Flex } from '@chakra-ui/react';
+import { Box, Flex, Spinner } from '@chakra-ui/react';
 import colors from '../../../../../src/theme/foundations/colors';
 import { FieldOption, FieldOptions } from '../../InputTypes';
 
@@ -10,6 +10,7 @@ export interface DropdownProps {
   position: 'top' | 'bottom';
   optionIndex?: number | null;
   children?: React.ReactNode;
+  loading?: boolean;
 }
 
 /**
@@ -22,9 +23,29 @@ export const Dropdown: React.FC<DropdownProps> = ({
   position,
   optionIndex,
   children,
+  loading = false,
 }) => {
   const DropdownContent = useMemo(() => {
-    if (!options || options.length === 0) {
+    if (loading) {
+      return (
+        <Box
+          borderRadius="inherit"
+          fontSize="13px"
+          px="8px"
+          py="4px"
+          width="100%"
+          color={colors.label.primary.light}
+          bg="inherit"
+          whiteSpace="nowrap"
+        >
+          <Flex alignItems="center">
+            Loading
+            <Spinner size="xs" opacity={0.5} ml={2} />
+          </Flex>
+        </Box>
+      );
+    }
+    if (!loading && (!options || options.length === 0)) {
       return (
         <Box
           borderRadius="inherit"

package/src/components/input/index.tsx

@@ -51,6 +51,7 @@ export interface InputProps<T extends FieldValues = FieldValues>
   rightElement?: React.ReactNode;
   variant?: string;
   separators?: string[];
+  loadingOptions?: boolean;
 }
 
 /**
@@ -84,6 +85,7 @@ export function Input<T extends FieldValues>({
   setError,
   clearErrors,
   separators,
+  loadingOptions = false,
 }: InputProps<T>) {
   function selectedInputField<T extends Element = Element>(
     onChange: ((e: ChangeEvent<T>) => void) | ((v?: string) => void),
@@ -150,6 +152,7 @@ export function Input<T extends FieldValues>({
             defaultValue={defaultValue}
             placeholder={placeholder}
             fullOptions={fullOptions}
+            loadingOptions={loadingOptions}
           />
         );
       case 'textarea':
@@ -207,6 +210,7 @@ export function Input<T extends FieldValues>({
             setError={setError as UseFormSetError<FieldValues>}
             clearErrors={clearErrors as UseFormClearErrors<FieldValues>}
             placeholder={placeholder}
+            loadingOptions={loadingOptions}
           />
         );
       case 'pilled-text':