@xqmsg/ui-core 0.14.5 → 0.15.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.14.5",
+  "version": "0.15.1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/banner/index.tsx

@@ -1,17 +1,10 @@
 import React, { ReactNode, useMemo } from 'react';
-import {
-  Alert,
-  AlertDescription,
-  Box,
-  Button,
-  Flex,
-  Image,
-} from '@chakra-ui/react';
+import { Alert, AlertDescription, Box, Flex, Image } from '@chakra-ui/react';
 import ErrorIcon from './assets/svg/error.svg';
 import PositiveIcon from './assets/svg/positive.svg';
 import NeutralIcon from './assets/svg/neutral.svg';
 import WarningIcon from './assets/svg/warning.svg';
-import colors from '../../../src/theme/foundations/colors';
+import { Button } from '../button';
 
 export type BannerVariant = 'positive' | 'warning' | 'error' | 'neutral';
 
@@ -54,13 +47,12 @@ export const Banner: React.FC<BannerProps> = ({
         {onClick && buttonText && (
           <Flex pt="8px" justifyContent="flex-end">
             <Button
-              size="sm"
-              bg="white"
-              color={colors.fill.action}
+              variant="secondary"
               onClick={onClick}
-            >
-              {buttonText}
-            </Button>
+              text={buttonText}
+              width="variable"
+              ariaLabel="banner button"
+            />
           </Flex>
         )}
       </AlertDescription>

package/src/components/button/Button.stories.tsx

@@ -38,13 +38,23 @@ const meta: Meta<ButtonProps> = {
 export default meta;
 const Template: Story<ButtonProps> = args => (
   <Flex flexDir="column" height="200px" justifyContent="space-between">
-    <Button {...args} text="Solid Fixed" variant="solid" width="fixed" />
-    <Button {...args} text="Outline Fixed" variant="outline" width="fixed" />
-    <Button {...args} text="Solid Variable" variant="solid" width="variable" />
+    <Button {...args} text="Primary Fixed" variant="primary" width="fixed" />
     <Button
       {...args}
-      text="Outline Variable"
-      variant="outline"
+      text="Secondary Fixed"
+      variant="secondary"
+      width="fixed"
+    />
+    <Button
+      {...args}
+      text="Primary Variable"
+      variant="primary"
+      width="variable"
+    />
+    <Button
+      {...args}
+      text="Secondary Variable"
+      variant="secondary"
       width="variable"
     />
   </Flex>

package/src/components/button/index.tsx

@@ -21,7 +21,7 @@ export const Button: React.FC<ButtonProps> = ({
   text,
   type = 'button',
   ariaLabel,
-  variant = 'solid',
+  variant = 'primary',
   disabled,
   className,
   width,
@@ -34,7 +34,7 @@ export const Button: React.FC<ButtonProps> = ({
       disabled={disabled}
       aria-label={ariaLabel}
       className={className}
-      width={width === 'variable' ? '100%' : 'fit-content'}
+      width={width === 'fixed' ? '100%' : 'fit-content'}
     >
       {text}
     </ChakraButton>

package/src/components/input/Input.stories.tsx

@@ -5,6 +5,7 @@ import { Input, InputProps } from '.';
 import { useFormHandler } from '../form/hooks/useFormHandler';
 import * as Yup from 'yup';
 import { Form } from '../form';
+import { Box } from '@chakra-ui/react';
 
 const meta: Meta<InputProps<StoryFormSchema>> = {
   title: 'Input example',
@@ -96,60 +97,76 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
 
   const { form } = formHandler;
 
-  console.log(form.formState.errors);
-
   return (
     <Form formHandler={formHandler}>
-      <Input
-        {...args}
-        inputType="multi-select"
-        setValue={form.setValue}
-        setError={form.setError}
-        clearErrors={form.clearErrors}
-        isInvalid={!!form.formState.errors['prop5']?.message}
-        errorText={form.formState.errors['prop5']?.message}
-        name="prop5"
-      />
-      <Input
-        {...args}
-        inputType="select"
-        setValue={form.setValue}
-        name="prop4"
-      />
-      <Input
-        {...args}
-        inputType="text"
-        name="prop3"
-        onChange={e => form.setValue('prop3', e.target.value)}
-      />
-      <Input
-        {...args}
-        inputType="textarea"
-        name="prop2"
-        onChange={e => form.setValue('prop2', e.target.value)}
-      />
-      <Input
-        {...args}
-        name="prop"
-        inputType="pilled-text"
-        setValue={form.setValue}
-        setError={form.setError}
-        clearErrors={form.clearErrors}
-        isInvalid={!!form.formState.errors['prop']?.message}
-        errorText={form.formState.errors['prop']?.message}
-      />
-      <Input
-        {...args}
-        name="prop6"
-        inputType="switch"
-        setValue={form.setValue}
-      />
-      <Input
-        {...args}
-        name="prop6"
-        inputType="checkbox"
-        setValue={form.setValue}
-      />
+      <Box overflowY={'auto'} height="100%" width="100px" overflow="visible">
+        <Input
+          {...args}
+          inputType="multi-select"
+          setValue={form.setValue}
+          setError={form.setError}
+          clearErrors={form.clearErrors}
+          isInvalid={!!form.formState.errors['prop5']?.message}
+          errorText={form.formState.errors['prop5']?.message}
+          name="prop5"
+        />
+        <Input
+          {...args}
+          inputType="text"
+          name="prop3"
+          onChange={e => form.setValue('prop3', e.target.value)}
+        />
+        <Input
+          {...args}
+          inputType="textarea"
+          name="prop2"
+          onChange={e => form.setValue('prop2', e.target.value)}
+        />
+        <Input
+          {...args}
+          name="prop"
+          inputType="pilled-text"
+          setValue={form.setValue}
+          setError={form.setError}
+          clearErrors={form.clearErrors}
+          isInvalid={!!form.formState.errors['prop']?.message}
+          errorText={form.formState.errors['prop']?.message}
+        />
+        <Input
+          {...args}
+          inputType="select"
+          setValue={form.setValue}
+          name="prop4"
+        />
+        <Input
+          {...args}
+          name="prop6"
+          inputType="switch"
+          setValue={form.setValue}
+        />
+        <Input
+          {...args}
+          name="prop6"
+          inputType="checkbox"
+          setValue={form.setValue}
+        />{' '}
+        <Input
+          {...args}
+          inputType="multi-select"
+          setValue={form.setValue}
+          setError={form.setError}
+          clearErrors={form.clearErrors}
+          isInvalid={!!form.formState.errors['prop5']?.message}
+          errorText={form.formState.errors['prop5']?.message}
+          name="prop5"
+        />
+        <Input
+          {...args}
+          inputType="select"
+          setValue={form.setValue}
+          name="prop4"
+        />
+      </Box>
     </Form>
   );
 };
@@ -177,7 +194,7 @@ Default.args = {
     },
     {
       value: 'value4',
-      label: 'Value 4',
+      label: 'Value 4 Which is very long',
       sortValue: 4,
     },
     { value: 'section_header', label: 'Section 2', sortValue: 5 },
@@ -191,6 +208,31 @@ Default.args = {
       label: 'Value 6',
       sortValue: 7,
     },
+    {
+      value: 'value7',
+      label: 'Value 7',
+      sortValue: 8,
+    },
+    {
+      value: 'value8',
+      label: 'Value 8',
+      sortValue: 9,
+    },
+    {
+      value: 'value9',
+      label: 'Value 9',
+      sortValue: 10,
+    },
+    {
+      value: 'value10',
+      label: 'Balue 10',
+      sortValue: 11,
+    },
+    {
+      value: 'value11',
+      label: 'C 11',
+      sortValue: 12,
+    },
   ],
   isRequired: true,
   isInvalid: false,

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

@@ -1,5 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Box, Flex, Text, Image, useOutsideClick } from '@chakra-ui/react';
+import {
+  Box,
+  Flex,
+  Text,
+  Image,
+  useOutsideClick,
+  Input,
+} from '@chakra-ui/react';
 import {
   FieldOption,
   FieldOptions,
@@ -24,8 +31,6 @@ export interface StackedMultiSelectProps extends ReactSelectFieldProps {
   setError: UseFormSetError<FieldValues>;
   clearErrors: UseFormClearErrors<FieldValues>;
   control: Control<FieldValues, any>;
-  // Number of allowed options
-  maxLength?: number;
 }
 
 /**
@@ -34,160 +39,198 @@ export interface StackedMultiSelectProps extends ReactSelectFieldProps {
 const StackedMultiSelect = React.forwardRef<
   HTMLInputElement,
   StackedMultiSelectProps
->(
-  (
-    {
-      options,
-      setValue,
-      control,
-      name,
-      placeholder,
-      disabled,
-      maxLength,
-      setError,
-    },
-    _ref
-  ) => {
-    const watchedValue = useWatch({ control, name: name as string });
-    const dropdownRef = useRef(null);
-
-    const [localValues, setLocalValues] = useState<FieldOptions>([]);
-    const [localOptions, setLocalOptions] = useState<FieldOptions>(options);
-    const [isFocussed, setIsFocussed] = useState(false);
-
-    useOutsideClick({
-      ref: dropdownRef,
-      handler: () => {
-        if (maxLength && localValues.length > maxLength) {
-          setError(name as string, {
-            message: `Exceeded maximum of ${maxLength} options`,
-          });
-        }
-
-        return setIsFocussed(false);
-      },
-    });
-
-    // gets latest watched form value (common delimited) from RHF state and creates a list
-    useEffect(() => {
-      if (watchedValue !== undefined && !watchedValue.length) {
-        setLocalValues([]);
-      }
-
-      if (
-        maxLength &&
-        watchedValue !== undefined &&
-        watchedValue.length <= maxLength &&
-        watchedValue?.length
-      ) {
-        setLocalValues(
-          watchedValue
-            .split(',')
-            .filter(Boolean)
-            .map((value: string) =>
-              options.find(option => option.value === value)
-            )
-        );
-      }
-    }, [maxLength, options, watchedValue]);
-
-    const handleChange = (option: FieldOption) => {
-      console.log(localValues.length, maxLength);
-
-      if (maxLength && localValues.length > maxLength) {
-        return setError(name as string, {
-          message: `Exceeded maximum of ${maxLength} options`,
+>(({ options, setValue, control, name, placeholder, disabled }, _ref) => {
+  const watchedValue = useWatch({ control, name: name as string });
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const dropdownMenuRef = useRef<HTMLDivElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const [localValues, setLocalValues] = useState<FieldOptions>([]);
+  const [localOptions, setLocalOptions] = useState<FieldOptions>(options);
+  const [isFocussed, setIsFocussed] = useState(false);
+  const [shouldSideScroll, setShouldSideScroll] = useState(false);
+  const [position, setPosition] = useState<'top' | 'bottom'>('top');
+
+  const boundingClientRect = dropdownRef.current?.getBoundingClientRect() as DOMRect;
+
+  useEffect(() => {
+    if (window.innerHeight - (boundingClientRect?.y + 240) >= 0) {
+      setPosition('top');
+    } else {
+      setPosition('bottom');
+    }
+  }, [boundingClientRect]);
+
+  useOutsideClick({
+    ref: dropdownRef,
+    handler: () => setIsFocussed(false),
+  });
+
+  // gets latest watched form value (common delimited) from RHF state and creates a list
+  useEffect(() => {
+    if (watchedValue !== undefined && !watchedValue.length) {
+      setLocalValues([]);
+    }
+
+    if (watchedValue !== undefined && watchedValue?.length) {
+      if (shouldSideScroll) {
+        (scrollRef.current as HTMLDivElement).scrollTo({
+          left: scrollRef.current?.scrollWidth,
+          behavior: 'smooth',
         });
+        setShouldSideScroll(false);
       }
 
-      const newValue = [...localValues, option]
-        .map(({ value }) => value)
-        .join(',');
-
-      setValue(name as string, newValue, {
-        shouldValidate: true,
-        shouldDirty: true,
-      });
-
-      setLocalOptions(prevLocalOptions =>
-        prevLocalOptions.filter(prevLocalOption => prevLocalOption !== option)
+      setLocalValues(
+        watchedValue
+          .split(',')
+          .filter(Boolean)
+          .map((value: string) =>
+            options.find(option => option.value === value)
+          )
       );
+    }
+  }, [options, shouldSideScroll, watchedValue]);
+
+  const handleChange = (option: FieldOption) => {
+    setShouldSideScroll(true);
+    const newValue = [...localValues, option]
+      .map(({ value }) => value)
+      .join(',');
+
+    setValue(name as string, newValue, {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
 
-      setLocalValues(prevLocalValues => [...prevLocalValues, option]);
-    };
+    setLocalOptions(prevLocalOptions =>
+      prevLocalOptions.filter(prevLocalOption => prevLocalOption !== option)
+    );
 
-    const handleDelete = (option: FieldOption) => {
-      const newValue = localValues
-        .filter(localValue => localValue !== option)
-        .map(({ value }) => value)
-        .join(',');
+    setLocalValues(prevLocalValues => [...prevLocalValues, option]);
+  };
 
-      setValue(name as string, newValue, {
-        shouldValidate: true,
-        shouldDirty: true,
-      });
+  const handleDelete = (option: FieldOption) => {
+    const newValue = localValues
+      .filter(localValue => localValue !== option)
+      .map(({ value }) => value)
+      .join(',');
 
-      setLocalOptions(prevLocalOptions =>
-        [...prevLocalOptions, option].sort((a, b) => a.sortValue - b.sortValue)
-      );
+    setValue(name as string, newValue, {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
 
-      setLocalValues(prevLocalValues =>
-        prevLocalValues.filter(prevLocalValue => prevLocalValue !== option)
-      );
-    };
+    setLocalOptions(prevLocalOptions =>
+      [...prevLocalOptions, option].sort((a, b) => a.sortValue - b.sortValue)
+    );
 
-    return (
-      <Box ref={dropdownRef} position="relative">
+    setLocalValues(prevLocalValues =>
+      prevLocalValues.filter(prevLocalValue => prevLocalValue !== option)
+    );
+  };
+
+  return (
+    <Box
+      ref={dropdownRef}
+      position="relative"
+      onKeyDown={e => {
+        if (isFocussed) {
+          if (e.key === 'Tab') {
+            return setIsFocussed(false);
+          }
+
+          const idx = options.findIndex(
+            option => option.label[0].toLocaleLowerCase() === e.key
+          );
+
+          dropdownMenuRef.current?.scrollTo({
+            top: idx * 27,
+            behavior: 'smooth',
+          });
+        }
+      }}
+    >
+      <Flex
+        fontSize="13px"
+        h="26px"
+        border={isFocussed ? '2px solid' : '1px solid'}
+        borderColor={isFocussed ? colors.border.focus : colors.border.default}
+        py="5px"
+        pl="8px"
+        borderRadius="4px"
+        alignItems="center"
+        justifyContent="space-between"
+        onClick={() => {
+          if (!disabled) {
+            if (isFocussed) {
+              return setIsFocussed(false);
+            }
+
+            inputRef.current?.focus();
+            setIsFocussed(true);
+          }
+        }}
+        bg={disabled ? colors.fill.light.quaternary : '#ffffff'}
+        cursor={disabled ? 'not-allowed' : 'pointer'}
+      >
         <Flex
-          fontSize="13px"
-          border={isFocussed ? '2px solid' : '1px solid'}
-          borderColor={isFocussed ? colors.border.focus : colors.border.default}
-          py="5px"
-          pl="8px"
-          borderRadius="4px"
           alignItems="center"
-          justifyContent="space-between"
-          onClick={() => !disabled && setIsFocussed(true)}
-          bg={disabled ? colors.fill.light.quaternary : '#ffffff'}
-          cursor={disabled ? 'not-allowed' : 'pointer'}
+          h="inherit"
+          width="90%"
+          overflowX="scroll"
+          style={{
+            scrollbarWidth: 'none' /* Firefox */,
+            msOverflowStyle: 'none',
+          }}
+          sx={{
+            '::-webkit-scrollbar': {
+              display: 'none',
+            },
+          }}
+          ref={scrollRef}
         >
-          <Flex
-            height="28px"
-            alignItems="center"
-            overflowX="auto"
-            maxWidth="90%"
-            style={{
-              scrollbarWidth: 'none' /* Firefox */,
-            }}
-          >
-            {localValues.length ? (
-              localValues.map(option => (
-                <Box mr="4px">
-                  <Token
-                    label={option.label}
-                    onDelete={() => handleDelete(option)}
-                  />
-                </Box>
-              ))
-            ) : (
-              <Text color={colors.label.secondary.light} fontSize="13px">
-                {placeholder}
-              </Text>
-            )}
-          </Flex>
-          <Flex width="39px" justifyContent="center" alignItems="center">
-            <Image src={SubtractIcon} alt="subtract" boxSize="16px" />
-          </Flex>
+          {localValues.length ? (
+            localValues.map(option => (
+              <Box mr="4px" width="fit-content" h="16px" borderRadius="full">
+                <Token
+                  label={option.label}
+                  onDelete={() => handleDelete(option)}
+                />
+              </Box>
+            ))
+          ) : (
+            <Text color={colors.label.secondary.light} fontSize="13px">
+              {placeholder}
+            </Text>
+          )}
         </Flex>
-        {isFocussed && (
-          <Dropdown
-            onSelectItem={option => handleChange(option)}
-            options={localOptions}
-          />
-        )}
-      </Box>
-    );
-  }
-);
+        <Input
+          padding={0}
+          border="none"
+          height="0"
+          width="0"
+          autoComplete="off"
+          type="text"
+          ref={inputRef}
+          tabIndex={-1}
+          _focus={{ boxShadow: 'none !important' }}
+        />
+        <Flex mr="4px" justifyContent="center" alignItems="center">
+          <Image src={SubtractIcon} alt="subtract" boxSize="16px" />
+        </Flex>
+      </Flex>
+      {isFocussed && (
+        <Dropdown
+          dropdownRef={dropdownMenuRef}
+          onSelectItem={option => handleChange(option)}
+          options={localOptions}
+          position={position}
+        />
+      )}
+    </Box>
+  );
+});
 
 export default StackedMultiSelect;