@xqmsg/ui-core 0.24.9 → 0.24.11

package/package.json

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

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/workspace/index.tsx

@@ -16,7 +16,7 @@ export const Workspace: React.FC<WorkspaceProps> = ({
   filled = false,
 }) => {
   if (filled) {
-    return <WorkspaceIcon boxSize={boxSize} />;
+    return <WorkspaceIcon width={boxSize} height={boxSize} />;
   }
   return <Image src={path} boxSize={boxSize} />;
 };

package/src/components/input/Input.stories.tsx

@@ -221,6 +221,7 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
         setValue={form.setValue}
         name="prop4"
         defaultValue={'value1'}
+        searchable={false}
         tooltipText={
           <Box>
             <Text fontSize={13}>Explanation!</Text>

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);
@@ -357,6 +353,7 @@ const StackedMultiSelect = React.forwardRef<
             loading={loadingOptions}
           >
             <Input
+              autoFocus
               value={searchValue}
               onChange={handleInput}
               disabled={loadingOptions}

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,12 +13,13 @@ 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;
   loadingOptions?: boolean;
+  searchable?: boolean;
 }
 
 /**
@@ -36,6 +37,7 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
       value,
       fullOptions,
       loadingOptions,
+      searchable = true,
       ...props
     },
     _ref
@@ -50,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
     );
 
@@ -195,13 +197,16 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
     }, [options, searchValue]);
 
     const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
-      const initialOptionIndex =
-        filteredOptions.length && filteredOptions[0]?.value === 'section_header'
-          ? 1
-          : 0;
-      setOptionIndex(initialOptionIndex);
-      const { value } = e.target;
-      setSearchValue(value);
+      if (searchable) {
+        const initialOptionIndex =
+          filteredOptions.length &&
+          filteredOptions[0]?.value === 'section_header'
+            ? 1
+            : 0;
+        setOptionIndex(initialOptionIndex);
+        const { value } = e.target;
+        setSearchValue(value);
+      }
     };
 
     return (
@@ -213,7 +218,6 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
             ref={_ref}
             onClick={() => setIsFocussed(!isFocussed)}
             cursor={isFocussed ? 'default' : 'pointer'}
-            color={loadingOptions ? 'transparent' : 'inital'}
             fontSize="13px"
             value={isFocussed ? searchValue : selectedOption}
             autoComplete="off"

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/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>;
@@ -52,6 +52,7 @@ export interface InputProps<T extends FieldValues = FieldValues>
   separators?: string[];
   loadingOptions?: boolean;
   truncatePillLength?: number;
+  searchable?: boolean;
 }
 
 /**
@@ -86,6 +87,7 @@ export function Input<T extends FieldValues>({
   separators,
   loadingOptions = false,
   truncatePillLength,
+  searchable,
 }: InputProps<T>) {
   function selectedInputField<T extends Element = Element>(
     onChange: ((e: ChangeEvent<T>) => void) | ((v?: string) => void),
@@ -124,7 +126,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}
@@ -140,7 +142,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>}
@@ -152,6 +154,7 @@ export function Input<T extends FieldValues>({
             placeholder={placeholder}
             fullOptions={fullOptions}
             loadingOptions={loadingOptions}
+            searchable={searchable}
           />
         );
       case 'textarea':
@@ -198,7 +201,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}

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,