@xqmsg/ui-core 0.25.0 → 0.26.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.25.0",
+  "version": "0.26.0",
   "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/Input.stories.tsx

@@ -113,7 +113,7 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
   return (
     <Form formHandler={formHandler}>
       <Input
-        label="To"
+        label="Pilled Text Input - scroll mode"
         name="recipients"
         inputType="pilled-text"
         placeholder="Enter email address..."
@@ -126,6 +126,23 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
         ariaLabel="email input"
         isRequired
         truncatePillLength={1000}
+        overflowMode="scroll"
+      />
+      <Input
+        label="Pilled Text - wrap mode"
+        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}
+        overflowMode="wrap"
       />
       <Input
         {...args}

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;
 
@@ -283,6 +326,8 @@ const StackedPilledInput = React.forwardRef<
           onClick={() => {
             if (isFocussed && tokenIndex !== null) {
               setTokenIndex(null);
+            } else if (!scrollMode) {
+              setIsFocussed(true);
             }
 
             if (!disabled) {
@@ -301,7 +346,8 @@ const StackedPilledInput = React.forwardRef<
             overflowX={scrollMode ? 'scroll' : 'hidden'}
             flexWrap={scrollMode ? 'nowrap' : 'wrap'}
             overflowY="hidden"
-            maxWidth={isFocussed ? '80%' : '100%'}
+            width={scrollMode ? 'auto' : '100%'}
+            maxWidth={isFocussed && scrollMode ? '80%' : '100%'}
             style={{
               scrollbarWidth: 'none' /* Firefox */,
               msOverflowStyle: 'none',
@@ -312,29 +358,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,12 +404,46 @@ const StackedPilledInput = React.forwardRef<
               <Text
                 color={colors.label.secondary.light}
                 fontSize={isMobile ? '17px' : '13px'}
+                pointerEvents="none"
               >
                 {placeholder}
               </Text>
             ) : null}
+            {!disabled && !scrollMode && (
+              <Flex
+                flex={1}
+                minWidth={isFocussed && !tokenIndex ? 'auto' : '100px'}
+              >
+                <Input
+                  onKeyDown={onHandleKeyDown}
+                  type="text"
+                  padding={0}
+                  alignContent="flex-start"
+                  float="right"
+                  border="none"
+                  height="auto"
+                  color={
+                    tokenIndex !== null ? 'transparent' : colors.label.primary
+                  }
+                  _focus={{ boxShadow: 'none !important' }}
+                  value={localValue}
+                  onChange={handleOnChange}
+                  ref={inputRef}
+                  onFocus={() => setIsFocussed(true)}
+                  fontSize={isMobile ? '17px' : '13px'}
+                  lineHeight={1.5}
+                  placeholder={
+                    isMobile && label && lastestFormValueToArray.length === 0
+                      ? (label as string)
+                      : ''
+                  }
+                  variant={variant}
+                  style={isMobile ? { border: 'none' } : undefined}
+                />
+              </Flex>
+            )}
           </Flex>
-          {!disabled && (
+          {!disabled && scrollMode && (
             <Flex flex={1} minWidth={isFocussed && !tokenIndex ? '20%' : 0}>
               <Input
                 onKeyDown={onHandleKeyDown}
@@ -373,10 +461,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="1.5"
+        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>
   );