@xqmsg/ui-core 0.24.11 → 0.25.1

package/package.json

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

package/src/components/SimpleTable/SimpleTable.tsx

@@ -3,6 +3,7 @@ import {
   ReadonlyTableColumns,
   TableBody,
   TableColumns,
+  TableColumnsWidths,
   TableHeaders,
 } from './TableTypes';
 import { generateTableColumnsAsConst } from './utils/generateTableColumns';
@@ -27,6 +28,8 @@ export interface SimpleTableProps<T extends ReadonlyTableColumns> {
   loading?: boolean;
   loadMore?: () => void;
   placeholder?: string;
+  layout?: 'fixed' | 'auto';
+  columnsWidths?: TableColumnsWidths<T>;
 }
 
 /**
@@ -38,6 +41,8 @@ export function SimpleTable<T extends ReadonlyTableColumns>({
   body,
   loading,
   loadMore,
+  layout = 'auto',
+  columnsWidths,
 }: SimpleTableProps<T>) {
   const columnsAsConst = generateTableColumnsAsConst(columns);
 
@@ -50,14 +55,16 @@ export function SimpleTable<T extends ReadonlyTableColumns>({
           style={{
             borderCollapse: 'separate',
             borderSpacing: '0px',
+            tableLayout: layout,
           }}
         >
-          {headers && (
+          {(headers || columnsWidths) && (
             <Thead>
               <Tr _odd={{ bg: colors.label.primary.dark }}>
                 {columnsAsConst.map((column, idx) => (
-                  // @ts-ignore
-                  <Th key={idx}>{headers[column]}</Th>
+                  <Th key={idx} width={columnsWidths?.[column as T[number]]}>
+                    {headers && headers[column as T[number]]}
+                  </Th>
                 ))}
               </Tr>
             </Thead>

package/src/components/SimpleTable/TableTypes.ts

@@ -8,6 +8,10 @@ export type TableHeaders<K extends ReadonlyTableColumns> = {
   [k in K[number]]: ReactNode;
 };
 
+export type TableColumnsWidths<K extends ReadonlyTableColumns> = {
+  [k in K[number]]: string | number;
+};
+
 export type TableRow<K extends ReadonlyTableColumns> = {
   [k in K[number]]: ReactNode;
 };

package/src/components/icons/close/index.tsx

@@ -16,6 +16,7 @@ export const Close: React.FC<CloseProps> = ({ boxSize, onClick }) => {
       height={boxSize}
       onClick={onClick}
       cursor="pointer"
+      style={{ flexBasis: boxSize, cursor: 'pointer' }}
     />
   );
 };

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

@@ -112,6 +112,21 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
 
   return (
     <Form formHandler={formHandler}>
+      <Input
+        label="To"
+        name="recipients"
+        inputType="pilled-text"
+        placeholder="Enter email address..."
+        isInvalid={!!form.formState.errors['prop5']?.message}
+        errorText={form.formState.errors['prop5']?.message}
+        control={form.control}
+        setValue={form.setValue}
+        setError={form.setError}
+        clearErrors={form.clearErrors}
+        ariaLabel="email input"
+        isRequired
+        truncatePillLength={1000}
+      />
       <Input
         {...args}
         inputType="multi-select"

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

@@ -21,6 +21,7 @@ export interface StackedPilledInputProps extends InputFieldProps {
   variant?: string;
   label?: string;
   truncatePillLength?: number;
+  mode?: 'scroll' | 'wrap';
 }
 
 /**
@@ -41,6 +42,7 @@ const StackedPilledInput = React.forwardRef<
       variant,
       label,
       truncatePillLength,
+      mode = 'scroll',
     },
     _ref
   ) => {
@@ -60,7 +62,7 @@ const StackedPilledInput = React.forwardRef<
     const latestTokenElement = document.getElementById(
       `${name}_token_${lastestFormValueToArray.length - 1}`
     );
-
+    const scrollMode = mode === 'scroll';
     // gets latest watched form value (common delimited) from RHF state and creates a list
     useEffect(() => {
       if (watchedValue !== undefined && !watchedValue.length) {
@@ -148,19 +150,58 @@ const StackedPilledInput = React.forwardRef<
         });
       }
 
-      if (!localValue.trim().length && lastestFormValueToArray.length) {
-        if (e.key === 'Backspace' && tokenIndex !== null) {
-          setLocalValue(
-            lastestFormValueToArray[tokenIndex].substring(
-              0,
-              lastestFormValueToArray[tokenIndex].length
-            )
-          );
+      if (e.key === 'Backspace') {
+        // If input is empty and there are tokens
+        if (!localValue.length && lastestFormValueToArray.length) {
+          // If a token is selected, move it to input
+          if (tokenIndex !== null) {
+            setLocalValue(
+              lastestFormValueToArray[tokenIndex].substring(
+                0,
+                lastestFormValueToArray[tokenIndex].length
+              )
+            );
+
+            const filteredUniqueValues = Array.from(
+              new Set(
+                [...lastestFormValueToArray].filter(
+                  value => value !== lastestFormValueToArray[tokenIndex]
+                )
+              )
+            );
+
+            setValue(name as string, filteredUniqueValues.toString(), {
+              shouldValidate: true,
+              shouldDirty: true,
+            });
+
+            return setTokenIndex(null);
+          } else {
+            // No token selected, move last token to input
+            const lastToken =
+              lastestFormValueToArray[lastestFormValueToArray.length - 1];
+            setLocalValue(lastToken);
 
+            const filteredUniqueValues = lastestFormValueToArray.slice(0, -1);
+
+            setValue(name as string, filteredUniqueValues.toString(), {
+              shouldValidate: true,
+              shouldDirty: true,
+            });
+
+            e.preventDefault();
+            return;
+          }
+        }
+      }
+
+      if (e.key === 'Delete') {
+        // If a token is selected, remove it completely
+        if (tokenIndex !== null && lastestFormValueToArray.length) {
           const filteredUniqueValues = Array.from(
             new Set(
               [...lastestFormValueToArray].filter(
-                value => value !== lastestFormValueToArray[tokenIndex]
+                (_, index) => index !== tokenIndex
               )
             )
           );
@@ -170,9 +211,13 @@ const StackedPilledInput = React.forwardRef<
             shouldDirty: true,
           });
 
-          return setTokenIndex(null);
+          setTokenIndex(null);
+          e.preventDefault();
+          return;
         }
+      }
 
+      if (!localValue.trim().length && lastestFormValueToArray.length) {
         if (e.key === 'ArrowLeft') {
           if (tokenIndex === 0) return;
 
@@ -290,12 +335,14 @@ const StackedPilledInput = React.forwardRef<
           bg={disabled ? colors.fill.light.quaternary : '#ffffff'}
           cursor={disabled ? 'not-allowed' : 'pointer'}
           ref={inputWrapperRef}
-          h={isMobile ? '48px' : '26px'}
+          h={isMobile ? '48px' : scrollMode ? '26px' : 'auto'}
+          minH={isMobile ? '48px' : '26px'}
         >
           <Flex
             h="100%"
             alignItems="center"
-            overflowX="scroll"
+            overflowX={scrollMode ? 'scroll' : 'hidden'}
+            flexWrap={scrollMode ? 'nowrap' : 'wrap'}
             overflowY="hidden"
             maxWidth={isFocussed ? '80%' : '100%'}
             style={{
@@ -308,26 +355,37 @@ const StackedPilledInput = React.forwardRef<
               },
             }}
             ref={scrollRef}
-            zIndex={99}
             onKeyDown={onHandleKeyDown}
           >
             {lastestFormValueToArray.length
               ? lastestFormValueToArray.map((label, index) => (
                   <Box
                     key={index}
-                    mr="4px"
+                    mr="2px"
                     border={
                       tokenIndex === index
                         ? `1px solid ${colors.border.focus}`
                         : 'none'
                     }
-                    borderRadius="full"
-                    onClick={() => setTokenIndex(index)}
-                    width="100%"
+                    borderRadius="md"
+                    onClick={e => {
+                      e.stopPropagation();
+                      // Don't change selection if clicking on already selected token
+                      if (tokenIndex === index) {
+                        return;
+                      }
+                      setTokenIndex(index);
+                    }}
+                    width={scrollMode ? '100%' : 'auto'}
+                    maxWidth={'100%'}
                     id={`${name}_token_${index}`}
+                    cursor="default"
                   >
                     <Token
+                      maxWidth={'100%'}
                       label={label}
+                      showClose={true}
+                      isSelected={tokenIndex === index}
                       onDelete={(e: any) => {
                         e.stopPropagation();
                         e.preventDefault();
@@ -343,6 +401,7 @@ const StackedPilledInput = React.forwardRef<
               <Text
                 color={colors.label.secondary.light}
                 fontSize={isMobile ? '17px' : '13px'}
+                pointerEvents="none"
               >
                 {placeholder}
               </Text>
@@ -366,10 +425,6 @@ const StackedPilledInput = React.forwardRef<
                 onChange={handleOnChange}
                 ref={inputRef}
                 onFocus={() => setIsFocussed(true)}
-                onBlur={() => {
-                  setIsFocussed(false);
-                  return setTokenIndex(null);
-                }}
                 placeholder={
                   isMobile && label && lastestFormValueToArray.length === 0
                     ? (label as string)

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

@@ -9,6 +9,9 @@ export interface TokenProps {
   onDelete: any;
   isMobile?: boolean;
   truncateLength?: number;
+  showClose?: boolean;
+  maxWidth?: string | number;
+  isSelected?: boolean;
 }
 
 // For v1 we are truncating the label at 15 characters to avoid overflow
@@ -17,33 +20,60 @@ const Token: React.FC<TokenProps> = ({
   onDelete,
   isMobile = false,
   truncateLength = 15,
+  showClose = true,
+  maxWidth = 'auto',
+  isSelected = false,
 }) => {
+  // in pixels
+  const closeBoxSize = isMobile ? 20 : 15;
+  const closeBoxGap = isMobile ? 4 : 2;
+  const closeBoxPadding = closeBoxSize + closeBoxGap;
   return (
     <Flex
       key={label}
-      borderRadius={'full'}
+      borderRadius={'md'}
       backgroundColor="#7676801F"
       alignItems="center"
       width="fit-content"
       w="auto"
-      h={isMobile ? '18px' : '16px'}
-      pl="6px"
-      pr="2px"
+      maxWidth={maxWidth}
+      h={'18px'}
+      px="4px"
       py="2px"
+      pr={showClose ? closeBoxPadding : '4px'}
       position="relative"
+      cursor="default"
     >
       <Text
         whiteSpace="nowrap"
+        wordBreak="break-word"
         color={colors.label.primary.light}
         fontSize={isMobile ? '17px' : '13px'}
-        pr="4px"
+        lineHeight={isMobile ? '17px' : '13px'}
+        pr="2px"
+        maxWidth={maxWidth}
+        overflow="hidden"
+        textOverflow="ellipsis"
       >
         {truncate(label.trim(), {
           length: truncateLength,
           omission: '...',
         })}
       </Text>
-      <Close boxSize={isMobile ? '17px' : '11px'} onClick={onDelete} />
+      {showClose && (
+        <Flex
+          height="100%"
+          position="absolute"
+          top={0}
+          bottom={0}
+          right={0}
+          justifyContent="center"
+          alignItems="center"
+          cursor={isSelected ? 'default' : 'pointer'}
+        >
+          <Close boxSize={`${closeBoxSize}px`} onClick={onDelete} />
+        </Flex>
+      )}
     </Flex>
   );
 };

package/src/components/input/index.tsx

@@ -53,6 +53,7 @@ export interface InputProps<T extends FieldValues = FieldValues>
   loadingOptions?: boolean;
   truncatePillLength?: number;
   searchable?: boolean;
+  overflowMode?: 'scroll' | 'wrap';
 }
 
 /**
@@ -88,6 +89,7 @@ export function Input<T extends FieldValues>({
   loadingOptions = false,
   truncatePillLength,
   searchable,
+  overflowMode = 'scroll',
 }: InputProps<T>) {
   function selectedInputField<T extends Element = Element>(
     onChange: ((e: ChangeEvent<T>) => void) | ((v?: string) => void),
@@ -238,6 +240,7 @@ export function Input<T extends FieldValues>({
             label={label}
             separators={separators}
             truncatePillLength={truncatePillLength}
+            mode={overflowMode}
           />
         );
       case 'switch':