@xqmsg/ui-core 0.24.11 → 0.25.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.24.11",
+  "version": "0.25.0",
   "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

@@ -14,6 +14,7 @@ export const Close: React.FC<CloseProps> = ({ boxSize, onClick }) => {
     <CloseIcon
       width={boxSize}
       height={boxSize}
+      flexBasis={boxSize}
       onClick={onClick}
       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) {
@@ -290,12 +292,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={{
@@ -323,11 +327,14 @@ const StackedPilledInput = React.forwardRef<
                     }
                     borderRadius="full"
                     onClick={() => setTokenIndex(index)}
-                    width="100%"
+                    width={scrollMode ? '100%' : 'auto'}
+                    maxWidth={'100%'}
                     id={`${name}_token_${index}`}
                   >
                     <Token
+                      maxWidth={'100%'}
                       label={label}
+                      showClose={!isFocussed || tokenIndex === index}
                       onDelete={(e: any) => {
                         e.stopPropagation();
                         e.preventDefault();

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

@@ -9,6 +9,8 @@ export interface TokenProps {
   onDelete: any;
   isMobile?: boolean;
   truncateLength?: number;
+  showClose?: boolean;
+  maxWidth?: string | number;
 }
 
 // For v1 we are truncating the label at 15 characters to avoid overflow
@@ -17,6 +19,8 @@ const Token: React.FC<TokenProps> = ({
   onDelete,
   isMobile = false,
   truncateLength = 15,
+  showClose = true,
+  maxWidth = 'auto',
 }) => {
   return (
     <Flex
@@ -26,6 +30,7 @@ const Token: React.FC<TokenProps> = ({
       alignItems="center"
       width="fit-content"
       w="auto"
+      maxWidth={maxWidth}
       h={isMobile ? '18px' : '16px'}
       pl="6px"
       pr="2px"
@@ -34,16 +39,22 @@ const Token: React.FC<TokenProps> = ({
     >
       <Text
         whiteSpace="nowrap"
+        wordBreak="break-word"
         color={colors.label.primary.light}
         fontSize={isMobile ? '17px' : '13px'}
         pr="4px"
+        maxWidth={maxWidth}
+        overflow="hidden"
+        textOverflow="ellipsis"
       >
         {truncate(label.trim(), {
           length: truncateLength,
           omission: '...',
         })}
       </Text>
-      <Close boxSize={isMobile ? '17px' : '11px'} onClick={onDelete} />
+      {showClose && (
+        <Close boxSize={isMobile ? '17px' : '11px'} onClick={onDelete} />
+      )}
     </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':