@xqmsg/ui-core 0.25.1 → 0.26.0

package/package.json

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

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

@@ -326,6 +326,8 @@ const StackedPilledInput = React.forwardRef<
           onClick={() => {
             if (isFocussed && tokenIndex !== null) {
               setTokenIndex(null);
+            } else if (!scrollMode) {
+              setIsFocussed(true);
             }
 
             if (!disabled) {
@@ -344,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',
@@ -406,8 +409,41 @@ const StackedPilledInput = React.forwardRef<
                 {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}

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

@@ -49,7 +49,7 @@ const Token: React.FC<TokenProps> = ({
         wordBreak="break-word"
         color={colors.label.primary.light}
         fontSize={isMobile ? '17px' : '13px'}
-        lineHeight={isMobile ? '17px' : '13px'}
+        lineHeight="1.5"
         pr="2px"
         maxWidth={maxWidth}
         overflow="hidden"