@xqmsg/ui-core 0.24.1 → 0.24.3

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;
@@ -51,7 +48,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 +69,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,6 +87,7 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
       setValue(name as string, option.value);
       setSelectedOption(option.label);
       setIsFocussed(false);
+      setSearchValue('');
     };
 
     const handleOnKeyDown: KeyboardEventHandler<HTMLInputElement> = e => {
@@ -173,22 +176,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[0]?.value === 'section_header' ? 1 : 0;
+      setOptionIndex(initialOptionIndex);
+      const { value } = e.target;
+      setSearchValue(value);
     };
+    console.log(searchValue);
 
     return (
       <Box ref={dropdownRef} position="relative">
@@ -198,21 +206,18 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
             {...props}
             ref={_ref}
             onClick={() => setIsFocussed(!isFocussed)}
-            cursor="pointer"
-            color="transparent"
+            cursor={isFocussed ? 'select' : 'pointer'}
             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,7 +225,7 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
             position={position}
             dropdownRef={dropdownMenuRef}
             onSelectItem={handleOnSelectItem}
-            options={options}
+            options={filteredOptions}
             optionIndex={optionIndex}
           />
         )}

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

@@ -9,6 +9,7 @@ export interface DropdownProps {
   dropdownRef: RefObject<HTMLDivElement>;
   position: 'top' | 'bottom';
   optionIndex?: number | null;
+  children?: React.ReactNode;
 }
 
 /**
@@ -20,8 +21,25 @@ export const Dropdown: React.FC<DropdownProps> = ({
   dropdownRef,
   position,
   optionIndex,
+  children,
 }) => {
   const DropdownContent = useMemo(() => {
+    if (!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 +97,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 +107,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/components/label/index.tsx

@@ -1,11 +1,19 @@
 import React from 'react';
-import { Box, FormLabel, Tooltip } from '@chakra-ui/react';
+import {
+  Box,
+  FormLabel,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+} from '@chakra-ui/react';
 import colors from '../../../../../src/theme/foundations/colors';
-import { QuestionOutlineIcon } from '@chakra-ui/icons';
+import { QuestionIcon } from '@chakra-ui/icons';
 
 export interface LabelProps {
   label: string;
-  tooltipText?: string;
+  tooltipText?: string | React.ReactNode;
   isRequired?: boolean;
 }
 
@@ -26,9 +34,17 @@ export const Label: React.FC<LabelProps> = ({
         </Box>
       )}
       {!!tooltipText && (
-        <Tooltip label={tooltipText} placement="top">
-          <QuestionOutlineIcon boxSize="13px" ml="8px" />
-        </Tooltip>
+        <Popover trigger="hover" placement="top">
+          <PopoverTrigger>
+            <Box as="span">
+              <QuestionIcon boxSize="13px" ml={1} color={colors.fill.action} />
+            </Box>
+          </PopoverTrigger>
+          <PopoverContent>
+            <PopoverArrow />
+            <PopoverBody>{tooltipText}</PopoverBody>
+          </PopoverContent>
+        </Popover>
       )}
     </FormLabel>
   );

package/src/components/input/index.tsx

@@ -42,7 +42,7 @@ export interface InputProps<T extends FieldValues = FieldValues>
   control: Control<T, any>;
   onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
   disabled?: boolean;
-  tooltipText?: string;
+  tooltipText?: string | React.ReactNode;
   setValue: UseFormSetValue<T>;
   setError: UseFormSetError<T>;
   clearErrors: UseFormClearErrors<T>;

package/src/components/tabs/TabsWrapper.stories.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import { Text } from '../text';
-import { Table, TableProps } from '../table';
-import { TableBody, TableHeaders } from '../table/TableTypes';
+import { SimpleTable, SimpleTableProps } from '../SimpleTable/SimpleTable';
+import { TableBody, TableHeaders } from '../SimpleTable/TableTypes';
 import { useMemo, useState } from '@storybook/addons';
 import { TabsWrapper, TabsWrapperProps } from '.';
 
@@ -48,7 +48,7 @@ enum Foo {
 }
 
 export default meta;
-const Template: Story<TableProps<typeof tableColumns>> = args => {
+const Template: Story<SimpleTableProps<typeof tableColumns>> = args => {
   const [index, setIndex] = useState(Foo.ALL);
 
   const body = useMemo(() => {
@@ -69,7 +69,7 @@ const Template: Story<TableProps<typeof tableColumns>> = args => {
       navIndex={index}
       setNavIndex={(index: number) => setIndex(index)}
     >
-      <Table
+      <SimpleTable
         {...args}
         body={body}
         borderTopRadius={false}

package/src/index.tsx

@@ -38,6 +38,9 @@ export * from './components/input';
 // Select
 export { SelectNative } from './components/select';
 
+// Label
+export * from './components/input/components/label';
+
 // Layout
 export * from './components/layout';
 
@@ -54,7 +57,7 @@ export * from './components/modal';
 export * from './components/navigation';
 
 // Table
-export * from './components/table';
+export { SimpleTable } from './components/SimpleTable/SimpleTable';
 
 // Table Nav
 export * from './components/tabs';

package/src/theme/components/popover.ts

@@ -0,0 +1,7 @@
+export default {
+  baseStyle: {
+    content: {
+      w: '100%',
+    },
+  },
+};

package/src/theme/customXQChakraTheme.ts

@@ -14,6 +14,7 @@ import FormLabel from './components/form-label';
 import Input from './components/input';
 import Link from './components/link';
 import Modal from './components/modal';
+import Popover from './components/popover';
 import Select from './components/select';
 import Switch from './components/switch';
 import Table from './components/table';
@@ -39,6 +40,7 @@ const customXQChakraTheme = extendTheme({
     Input,
     Link,
     Modal,
+    Popover,
     Select,
     Switch,
     Table,

package/dist/components/table/Table.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta } from '@storybook/react';
-import { TableProps } from '.';
-declare const tableColumns: string[];
-declare const meta: Meta<TableProps<typeof tableColumns>>;
-export default meta;
-export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, TableProps<string[]>>;