@xqmsg/ui-core 0.24.10 → 0.25.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.24.10",
+  "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/form/FormTypes.ts

@@ -1,11 +1,11 @@
-import { FieldOptions, InputType } from '../input/InputTypes';
+import { FieldOption, InputType } from '../input/InputTypes';
 
 export interface FormInput {
   label: string;
   name: string;
   ariaLabel: string;
   inputType: InputType;
-  options?: FieldOptions;
+  options?: FieldOption[];
   placeholder?: string;
   isRequired: boolean;
   maxLength?: number;

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/InputTypes.ts

@@ -24,8 +24,6 @@ export type FieldOption = {
   sortValue: number;
 };
 
-export type FieldOptions = FieldOption[];
-
 export interface ValidationProps {
   isRequired: boolean;
   isInvalid?: boolean;

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

@@ -5,11 +5,7 @@ import React, {
   useState,
 } from 'react';
 import { Box, Flex, Text, Input } from '@chakra-ui/react';
-import {
-  FieldOption,
-  FieldOptions,
-  ReactSelectFieldProps,
-} from '../InputTypes';
+import { FieldOption, ReactSelectFieldProps } from '../InputTypes';
 import colors from '../../../theme/foundations/colors';
 import {
   Control,
@@ -25,7 +21,7 @@ import Token from '../components/token';
 import { useOnClickOutside } from '../../../hooks/useOnOutsideClick';
 
 export interface StackedMultiSelectProps extends ReactSelectFieldProps {
-  options: FieldOptions;
+  options: FieldOption[];
   setValue: UseFormSetValue<FieldValues>;
   setError: UseFormSetError<FieldValues>;
   clearErrors: UseFormClearErrors<FieldValues>;
@@ -51,9 +47,9 @@ const StackedMultiSelect = React.forwardRef<
     const inputRef = useRef<HTMLInputElement>(null);
 
     const [isInit, setIsInit] = useState(false);
-    const [localValues, setLocalValues] = useState<FieldOptions>([]);
-    const [localOptions, setLocalOptions] = useState<FieldOptions>(options);
-    const [filteredOptions, setFilteredOptions] = useState<FieldOptions>(
+    const [localValues, setLocalValues] = useState<FieldOption[]>([]);
+    const [localOptions, setLocalOptions] = useState<FieldOption[]>(options);
+    const [filteredOptions, setFilteredOptions] = useState<FieldOption[]>(
       localOptions
     );
     const [isFocussed, setIsFocussed] = useState(false);

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/StackedRadio/StackedRadioGroup.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import { Flex, InputGroup, Radio, RadioGroup } from '@chakra-ui/react';
-import { FieldOptions, SelectFieldProps } from '../InputTypes';
+import { FieldOption, SelectFieldProps } from '../InputTypes';
 
 export interface StackedRadioGroupProps extends SelectFieldProps {
   flexDirection?: 'row' | 'column';
-
-  options: FieldOptions;
+  options: FieldOption[];
 }
 
 /**

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

@@ -5,7 +5,7 @@ import React, {
   useState,
 } from 'react';
 import { Box, Input, InputGroup, InputRightElement } from '@chakra-ui/react';
-import { FieldOptions } from '../InputTypes';
+import { FieldOption } from '../InputTypes';
 import { StackedInputProps } from '../StackedInput/StackedInput';
 import { UseFormSetValue, FieldValues, Control } from 'react-hook-form';
 import { Dropdown } from '../components/dropdown';
@@ -13,8 +13,8 @@ import { useOnClickOutside } from '../../../hooks/useOnOutsideClick';
 import { Dropdown as DropdownIcon } from '../../icons/dropdown';
 
 export interface StackedSelectProps extends StackedInputProps {
-  options: FieldOptions;
-  fullOptions?: FieldOptions;
+  options: FieldOption[];
+  fullOptions?: FieldOption[];
   setValue: UseFormSetValue<FieldValues>;
   control: Control<FieldValues, any>;
   handleOnChange: (value?: string) => void;
@@ -52,7 +52,7 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
     const [optionIndex, setOptionIndex] = useState<number | null>(null);
     const [position, setPosition] = useState<'top' | 'bottom'>('top');
     const [searchValue, setSearchValue] = useState('');
-    const [filteredOptions, setFilteredOptions] = useState<FieldOptions>(
+    const [filteredOptions, setFilteredOptions] = useState<FieldOption[]>(
       options
     );
 

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

@@ -1,11 +1,11 @@
 import React, { RefObject, useMemo } from 'react';
 import { Box, Flex, Spinner } from '@chakra-ui/react';
 import colors from '../../../../../src/theme/foundations/colors';
-import { FieldOption, FieldOptions } from '../../InputTypes';
+import { FieldOption } from '../../InputTypes';
 
 export interface DropdownProps {
   onSelectItem: (option: FieldOption) => void;
-  options: FieldOptions;
+  options: FieldOption[];
   dropdownRef: RefObject<HTMLDivElement>;
   position: 'top' | 'bottom';
   optionIndex?: number | null;

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

@@ -4,7 +4,7 @@ import StackedInput from './StackedInput/StackedInput';
 import StackedRadioGroup from './StackedRadio/StackedRadioGroup';
 import StackedSelect from './StackedSelect';
 import StackedTextarea from './StackedTextarea/StackedTextarea';
-import { FieldOptions, ValidationProps, InputType } from './InputTypes';
+import { FieldOption, ValidationProps, InputType } from './InputTypes';
 import {
   FormControl,
   FormErrorMessage,
@@ -35,8 +35,8 @@ export interface InputProps<T extends FieldValues = FieldValues>
   defaultValue?: string;
   label?: string;
   className?: string;
-  options?: FieldOptions;
-  fullOptions?: FieldOptions;
+  options?: FieldOption[];
+  fullOptions?: FieldOption[];
   maxLength?: number;
   helperText?: React.ReactNode;
   control: Control<T, any>;
@@ -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),
@@ -126,7 +128,7 @@ export function Input<T extends FieldValues>({
             name={name}
             id={name}
             isInvalid={isInvalid}
-            options={options as FieldOptions}
+            options={options as FieldOption[]}
             onChange={onChange as (e: ChangeEvent) => void}
             onBlur={onBlur}
             ref={ref}
@@ -142,7 +144,7 @@ export function Input<T extends FieldValues>({
             id={name}
             isRequired={isRequired}
             isInvalid={isInvalid}
-            options={options as FieldOptions}
+            options={options as FieldOption[]}
             handleOnChange={onChange as (v?: string) => void}
             onBlur={onBlur}
             setValue={setValue as UseFormSetValue<FieldValues>}
@@ -201,7 +203,7 @@ export function Input<T extends FieldValues>({
             name={name}
             id={name}
             isInvalid={isInvalid}
-            options={options as FieldOptions}
+            options={options as FieldOption[]}
             onChange={onChange as (e: ChangeEvent) => void}
             onBlur={onBlur}
             ref={ref}
@@ -238,6 +240,7 @@ export function Input<T extends FieldValues>({
             label={label}
             separators={separators}
             truncatePillLength={truncatePillLength}
+            mode={overflowMode}
           />
         );
       case 'switch':

package/src/components/select/index.tsx

@@ -15,7 +15,7 @@ import {
   UseFormSetError,
   UseFormSetValue,
 } from 'react-hook-form';
-import { FieldOptions, ValidationProps } from 'src/components/input/InputTypes';
+import { FieldOption, ValidationProps } from 'src/components/input/InputTypes';
 
 export interface SelectNativeProps<T extends FieldValues>
   extends ValidationProps,
@@ -28,8 +28,8 @@ export interface SelectNativeProps<T extends FieldValues>
   defaultValue?: string;
   label?: string;
   className?: string;
-  options?: FieldOptions;
-  fullOptions?: FieldOptions;
+  options?: FieldOption[];
+  fullOptions?: FieldOption[];
   helperText?: React.ReactNode;
   control: Control<T, unknown>;
   onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;

package/src/components/toolbar/components/actions/sort/index.tsx

@@ -2,11 +2,11 @@ import React, { useRef, useState } from 'react';
 import { Box, Flex, useOutsideClick } from '@chakra-ui/react';
 import { ChevronDown, TableOutline } from '../../../../icons';
 import { Dropdown } from '../../dropdown';
-import { FieldOption, FieldOptions } from '../../../../input/InputTypes';
+import { FieldOption } from '../../../../input/InputTypes';
 
 export interface SortProps {
   onSelectItem: (option: FieldOption) => void;
-  sortOptions: FieldOptions;
+  sortOptions: FieldOption[];
 }
 
 /**

package/src/components/toolbar/components/dropdown/index.tsx

@@ -1,12 +1,12 @@
 import React, { RefObject, useMemo } from 'react';
 import { Box, Flex } from '@chakra-ui/react';
 import colors from '../../../../theme/foundations/colors';
-import { FieldOption, FieldOptions } from '../../../input/InputTypes';
+import { FieldOption } from '../../../input/InputTypes';
 import { Checkmark } from '../../../icons';
 
 export interface DropdownProps {
   onSelectItem: (option: FieldOption) => void;
-  options: FieldOptions;
+  options: FieldOption[];
   dropdownRef: RefObject<HTMLDivElement>;
   position: 'top' | 'bottom';
   optionIndex: number | null;

package/src/theme/components/menu.ts

@@ -0,0 +1,78 @@
+import { mode } from '@chakra-ui/theme-tools';
+import colors from '../foundations/colors';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Dict = Record<string, any>;
+
+const parts = ['item', 'command', 'list', 'button', 'groupTitle'];
+
+function baseStyleList(props: Dict) {
+  return {
+    bg: colors.fill.light.quaternary,
+    boxShadow: mode(`2xl`, `dark-lg`)(props),
+    color: 'inherit',
+    minW: '3xs',
+    py: 4,
+    px: 2,
+    zIndex: 'docked',
+    borderWidth: 0,
+    overflow: 'hidden',
+    backdropFilter: 'auto',
+    backdropBlur: '64px',
+    borderRadius: '4px',
+    border: '0.25px solid',
+    borderColor: colors.fill.light.tertiary,
+  };
+}
+
+function baseStyleItem(props: Dict) {
+  return {
+    fontSize: '13px;',
+    fontWeight: 500,
+    lineHeight: '16px',
+    py: 3,
+    px: 4,
+    borderRadius: '4px',
+    width: '100%',
+    transition: 'background 50ms ease-in 0s',
+    _hover: {
+      color: colors.white,
+      background: colors.fill.action,
+    },
+    _active: {
+      bg: mode(`gray.200`, `whiteAlpha.200`)(props),
+    },
+    _expanded: {
+      bg: mode(`gray.100`, `whiteAlpha.100`)(props),
+    },
+    _disabled: {
+      opacity: 0.4,
+      cursor: 'not-allowed',
+    },
+  };
+}
+
+const baseStyleGroupTitle = {
+  mx: 4,
+  my: 2,
+  fontWeight: 'semibold',
+  fontSize: 'sm',
+};
+
+const baseStyleCommand = {
+  opacity: 0.6,
+};
+
+const baseStyle = (props: Dict) => {
+  return {
+    list: baseStyleList(props),
+    item: baseStyleItem(props),
+    groupTitle: baseStyleGroupTitle,
+    command: baseStyleCommand,
+  };
+};
+
+export default {
+  parts,
+  baseStyle,
+};

package/src/theme/customXQChakraTheme.ts

@@ -13,6 +13,7 @@ import FormError from './components/form-error';
 import FormLabel from './components/form-label';
 import Input from './components/input';
 import Link from './components/link';
+import Menu from './components/menu';
 import Modal from './components/modal';
 import Popover from './components/popover';
 import Select from './components/select';
@@ -39,6 +40,7 @@ const customXQChakraTheme = extendTheme({
     FormLabel,
     Input,
     Link,
+    Menu,
     Modal,
     Popover,
     Select,