@xqmsg/ui-core 0.24.2 → 0.24.4

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

@@ -2,18 +2,15 @@ import React, {
   KeyboardEventHandler,
   useEffect,
   useRef,
-  useMemo,
   useState,
 } from 'react';
 import { Box, Input, InputGroup, InputRightElement } from '@chakra-ui/react';
 import { FieldOptions } from '../InputTypes';
 import { StackedInputProps } from '../StackedInput/StackedInput';
-import colors from '../../../theme/foundations/colors';
 import { UseFormSetValue, FieldValues, Control } from 'react-hook-form';
 import { Dropdown } from '../components/dropdown';
 import { useOnClickOutside } from '../../../hooks/useOnOutsideClick';
 import { Dropdown as DropdownIcon } from '../../icons/dropdown';
-import { debounce } from 'lodash';
 
 export interface StackedSelectProps extends StackedInputProps {
   options: FieldOptions;
@@ -21,6 +18,7 @@ export interface StackedSelectProps extends StackedInputProps {
   setValue: UseFormSetValue<FieldValues>;
   control: Control<FieldValues, any>;
   handleOnChange: (value?: string) => void;
+  loadingOptions?: boolean;
 }
 
 /**
@@ -37,6 +35,7 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
       disabled,
       value,
       fullOptions,
+      loadingOptions,
       ...props
     },
     _ref
@@ -51,7 +50,9 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
     const [optionIndex, setOptionIndex] = useState<number | null>(null);
     const [position, setPosition] = useState<'top' | 'bottom'>('top');
     const [searchValue, setSearchValue] = useState('');
-    const [debouncedSearchValue, setDebouncedSearchValue] = useState('');
+    const [filteredOptions, setFilteredOptions] = useState<FieldOptions>(
+      options
+    );
 
     const boundingClientRect = dropdownRef.current?.getBoundingClientRect() as DOMRect;
 
@@ -70,9 +71,12 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
         (fullOptions || options).find(option => option.value === value)
           ?.label ?? ''
       );
-    }, [fullOptions, value]);
+    }, [fullOptions, options, value]);
 
-    useOnClickOutside(dropdownRef, () => setIsFocussed(false));
+    useOnClickOutside(dropdownRef, () => {
+      setIsFocussed(false);
+      setSearchValue('');
+    });
 
     const handleOnSelectItem = (option: {
       label: string;
@@ -85,10 +89,14 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
       setValue(name as string, option.value);
       setSelectedOption(option.label);
       setIsFocussed(false);
+      setSearchValue('');
     };
 
     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 &&
@@ -98,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')
@@ -108,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);
@@ -123,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);
@@ -139,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) {
@@ -173,21 +181,27 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
           top: idx * 24,
           behavior: 'smooth',
         });
-
-        setSearchValue('');
-        setDebouncedSearchValue('');
       }
     }, [options, searchValue]);
 
-    const updateSearchValue = useMemo(() => {
-      return debounce(val => {
-        setSearchValue(val);
-      }, 1000);
-    }, []);
+    useEffect(() => {
+      setFilteredOptions(
+        options.filter(element => {
+          return element.label
+            .toLowerCase()
+            .includes(searchValue.toLowerCase());
+        })
+      );
+    }, [options, searchValue]);
 
-    const update = (value: string) => {
-      updateSearchValue(value);
-      setDebouncedSearchValue(value);
+    const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const initialOptionIndex =
+        filteredOptions.length && filteredOptions[0]?.value === 'section_header'
+          ? 1
+          : 0;
+      setOptionIndex(initialOptionIndex);
+      const { value } = e.target;
+      setSearchValue(value);
     };
 
     return (
@@ -198,21 +212,19 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
             {...props}
             ref={_ref}
             onClick={() => setIsFocussed(!isFocussed)}
-            cursor="pointer"
-            color="transparent"
+            cursor={isFocussed ? 'default' : 'pointer'}
+            color={loadingOptions ? 'transparent' : 'inital'}
             fontSize="13px"
-            textShadow={`0 0 0 ${colors.label.primary.light}`}
-            value={selectedOption}
-            disabled={disabled}
+            value={isFocussed ? searchValue : selectedOption}
             autoComplete="off"
-            onChange={e => update(debouncedSearchValue.concat(e.target.value))}
+            onChange={handleInput}
             onKeyDown={handleOnKeyDown}
           />
           <InputRightElement
             cursor={disabled ? 'not-allowed' : 'pointer'}
             onClick={() => !disabled && setIsFocussed(!isFocussed)}
           >
-            <DropdownIcon boxSize="16px" disabled={disabled} />
+            <DropdownIcon boxSize="12px" disabled={disabled} />
           </InputRightElement>
         </InputGroup>
         {isFocussed && (
@@ -220,8 +232,9 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
             position={position}
             dropdownRef={dropdownMenuRef}
             onSelectItem={handleOnSelectItem}
-            options={options}
+            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';
 
@@ -9,6 +9,8 @@ export interface DropdownProps {
   dropdownRef: RefObject<HTMLDivElement>;
   position: 'top' | 'bottom';
   optionIndex?: number | null;
+  children?: React.ReactNode;
+  loading?: boolean;
 }
 
 /**
@@ -20,8 +22,45 @@ export const Dropdown: React.FC<DropdownProps> = ({
   dropdownRef,
   position,
   optionIndex,
+  children,
+  loading = false,
 }) => {
   const DropdownContent = useMemo(() => {
+    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"
+          fontSize="13px"
+          px="8px"
+          py="4px"
+          width="100%"
+          color={colors.label.primary.light}
+          bg="inherit"
+          whiteSpace="nowrap"
+        >
+          No options
+        </Box>
+      );
+    }
     return options.map((option, idx) => (
       <Box key={idx} width="100%" role="combobox">
         {option.value === 'section_header' &&
@@ -79,13 +118,8 @@ export const Dropdown: React.FC<DropdownProps> = ({
     ));
   }, [onSelectItem, optionIndex, options]);
 
-  if (!options) return null;
-
   return (
     <Flex
-      flexDirection="column"
-      ref={dropdownRef}
-      scrollMargin="15px"
       bg={colors.fill.light.quaternary}
       backdropFilter="auto"
       backdropBlur="64px"
@@ -94,18 +128,33 @@ export const Dropdown: React.FC<DropdownProps> = ({
       borderColor={colors.fill.light.tertiary}
       mt="3px"
       maxH="240px"
-      overflowY="auto"
+      position="absolute"
       px="8px"
       py="4px"
-      position="absolute"
-      top={position === 'top' ? 26 : undefined}
-      bottom={position === 'bottom' ? 30 : undefined}
-      width="fit-content"
+      overflow="hidden"
       minWidth="100%"
       zIndex={100}
       tabIndex={-2000}
+      alignItems="flex-start"
+      flexDirection="column"
+      top={position === 'top' ? 26 : undefined}
+      bottom={position === 'bottom' ? 30 : undefined}
     >
-      {DropdownContent}
+      {children && (
+        <Box width="100%" mb={2} mt={1}>
+          {children}
+        </Box>
+      )}
+      <Flex
+        width="fit-content"
+        overflowY="auto"
+        flexDirection="column"
+        ref={dropdownRef}
+        minWidth="100%"
+        scrollMargin="15px"
+      >
+        {DropdownContent}
+      </Flex>
     </Flex>
   );
 };

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':