@xqmsg/ui-core 0.25.0 → 0.25.1

package/package.json

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

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

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

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

@@ -150,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
               )
             )
           );
@@ -172,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;
 
@@ -312,29 +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)}
+                    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={!isFocussed || tokenIndex === index}
+                      showClose={true}
+                      isSelected={tokenIndex === index}
                       onDelete={(e: any) => {
                         e.stopPropagation();
                         e.preventDefault();
@@ -350,6 +401,7 @@ const StackedPilledInput = React.forwardRef<
               <Text
                 color={colors.label.secondary.light}
                 fontSize={isMobile ? '17px' : '13px'}
+                pointerEvents="none"
               >
                 {placeholder}
               </Text>
@@ -373,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

@@ -11,6 +11,7 @@ export interface TokenProps {
   truncateLength?: number;
   showClose?: boolean;
   maxWidth?: string | number;
+  isSelected?: boolean;
 }
 
 // For v1 we are truncating the label at 15 characters to avoid overflow
@@ -21,28 +22,35 @@ const Token: React.FC<TokenProps> = ({
   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"
       maxWidth={maxWidth}
-      h={isMobile ? '18px' : '16px'}
-      pl="6px"
-      pr="2px"
+      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"
@@ -53,7 +61,18 @@ const Token: React.FC<TokenProps> = ({
         })}
       </Text>
       {showClose && (
-        <Close boxSize={isMobile ? '17px' : '11px'} onClick={onDelete} />
+        <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>
   );