@qoretechnologies/reqore 0.28.6 → 0.29.1

package/src/components/Textarea/index.tsx

@@ -81,9 +81,9 @@ export const StyledTextarea = styled(StyledEffect)<IReqoreTextareaStyle>`
   border-radius: ${({ minimal, rounded, _size }) =>
     minimal || !rounded ? 0 : RADIUS_FROM_SIZE[_size]}px;
   border: ${({ minimal, theme, flat }) =>
-    !minimal && !flat ? `1px solid ${changeLightness(theme.main, 0.05)}` : 0};
+    !minimal && !flat ? `1px solid ${changeLightness(theme.main, 0.2)}` : 0};
   border-bottom: ${({ minimal, theme, flat }) =>
-    minimal && !flat ? `0.5px solid ${changeLightness(theme.main, 0.05)}` : undefined};
+    minimal && !flat ? `0.5px solid ${changeLightness(theme.main, 0.2)}` : undefined};
 
   transition: all 0.2s ease-out;
 
@@ -94,7 +94,7 @@ export const StyledTextarea = styled(StyledEffect)<IReqoreTextareaStyle>`
           &:focus,
           &:hover {
             outline: none;
-            border-color: ${({ theme }) => changeLightness(theme.main, 0.1)};
+            border-color: ${({ theme }) => changeLightness(theme.main, 0.25)};
           }
         `
       : undefined}

package/src/components/Tree/index.tsx

@@ -106,9 +106,9 @@ export const ReqoreTree = ({
             <ReqoreControlGroup size={size}>
               <ReqoreButton
                 className='reqore-tree-toggle'
-                icon={isObject ? (isExpandable ? 'ArrowDownSFill' : 'ArrowRightSFill') : undefined}
-                intent={isObject && isExpandable ? 'info' : undefined}
-                onClick={isObject ? () => handleItemClick(stateKey, isExpandable) : undefined}
+                icon={isExpandable ? 'ArrowDownSFill' : 'ArrowRightSFill'}
+                intent={isExpandable ? 'info' : undefined}
+                onClick={() => handleItemClick(stateKey, isExpandable)}
                 flat
               >
                 {displayKey}

package/src/containers/PopoverProvider.tsx

@@ -3,6 +3,7 @@ import React, { MutableRefObject, useCallback, useEffect, useState } from 'react
 import Popover from '../components/InternalPopover';
 import PopoverContext from '../context/PopoverContext';
 import { IPopoverOptions } from '../hooks/usePopover';
+import { useReqore } from '../hooks/useReqore';
 
 export interface IReqorePopoverProviderProps {
   children: any;
@@ -16,6 +17,7 @@ export interface IPopoverData extends IPopoverOptions {
 
 const PopoverProvider: React.FC<IReqorePopoverProviderProps> = ({ children, uiScale }) => {
   const [popovers, setPopovers] = useState<IPopoverData[]>([]);
+  const { closePopoversOnEscPress } = useReqore();
 
   const handleClick = useCallback(
     (event: MouseEvent) => {
@@ -27,8 +29,6 @@ const PopoverProvider: React.FC<IReqorePopoverProviderProps> = ({ children, uiSc
             !popperRef.current.contains(event.target) &&
             !targetElement?.contains(event.target as Node))
         ) {
-          targetElement.style.position = 'initial';
-          targetElement.style.zIndex = 'initial';
           removePopover(id);
         }
       });
@@ -36,21 +36,52 @@ const PopoverProvider: React.FC<IReqorePopoverProviderProps> = ({ children, uiSc
     [popovers]
   );
 
+  // Close last popover when ESC is pressed
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        const lastPopover = popovers[popovers.length - 1];
+
+        if (lastPopover) {
+          removePopover(lastPopover.id);
+        }
+      }
+    },
+    [popovers]
+  );
+
   const removePopover = (id: string) => {
-    setPopovers((cur: IPopoverData[]) => [...cur].filter((p) => p.id !== id));
+    // Get the popover
+    const popover = popovers.find((p) => p.id === id);
+
+    if (popover) {
+      // Remove the blur
+      if (popover.blur > 0) {
+        popover.targetElement.style.position = 'initial';
+        popover.targetElement.style.zIndex = 'initial';
+      }
+      // Remove the popover
+      setPopovers((cur: IPopoverData[]) => [...cur].filter((p) => p.id !== id));
+    }
   };
 
   useEffect(() => {
     document.addEventListener('click', handleClick);
 
+    if (closePopoversOnEscPress) {
+      document.addEventListener('keydown', handleKeyDown);
+    }
+
     return () => {
       document.removeEventListener('click', handleClick);
+      document.removeEventListener('keydown', handleKeyDown);
     };
   }, [popovers]);
 
   useEffect(() => {
     if (!size(popovers)) {
       document.removeEventListener('click', handleClick);
+      document.removeEventListener('keydown', handleKeyDown);
     }
   }, [popovers]);
 
@@ -72,6 +103,7 @@ const PopoverProvider: React.FC<IReqorePopoverProviderProps> = ({ children, uiSc
             }, [])
           );
         },
+        isPopoverOpen: (popoverId: string) => !!popovers.find((p) => p.id === popoverId),
         removePopover,
         popovers,
       }}

package/src/containers/ReqoreProvider.tsx

@@ -47,7 +47,7 @@ export interface IReqoreConfirmationModal {
   intent?: TReqoreIntent;
 }
 
-const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options }) => {
+const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options = {} }) => {
   const [notifications, setNotifications] = useState<IReqoreNotificationData[] | null>([]);
   const [confirmationModal, setConfirmationModal] = useState<IReqoreConfirmationModal>({});
   const latestZIndex = useRef<number>(9000);
@@ -121,17 +121,19 @@ const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options }) =
           isTablet,
           isMobileOrTablet,
           getAndIncreaseZIndex,
-          animations: options?.animations || { buttons: true, dialogs: true },
+          animations: options.animations || { buttons: true, dialogs: true },
+          closePopoversOnEscPress:
+            'closePopoversOnEscPress' in options ? options.closePopoversOnEscPress : true,
         }}
       >
         {size(notifications) > 0 ? (
-          <ReqoreNotificationsWrapper position={options?.notificationsPosition}>
+          <ReqoreNotificationsWrapper position={options.notificationsPosition}>
             {notifications.map((notification) => (
               <ReqoreNotification
                 {...notification}
                 key={notification.id}
                 onClick={
-                  notification?.onClick
+                  notification.onClick
                     ? () => void notification.onClick(notification.id)
                     : undefined
                 }

package/src/containers/UIProvider.tsx

@@ -18,6 +18,7 @@ export interface IReqoreOptions {
     buttons?: boolean;
     dialogs?: boolean;
   };
+  closePopoversOnEscPress?: boolean;
 }
 export interface IReqoreUIProviderProps {
   children?: any;

package/src/context/PopoverContext.tsx

@@ -5,6 +5,7 @@ export default createContext<{
   addPopover?: (popoverData: IPopoverData) => void;
   removePopover?: (popoverId: string) => void;
   updatePopover?: (popoverId: string, popoverData: Partial<IPopoverData>) => void;
+  isPopoverOpen?: (popoverId: string) => boolean;
   popovers?: IPopoverData[];
   uiScale?: number;
 }>({});

package/src/context/ReqoreContext.tsx

@@ -12,6 +12,7 @@ export interface IReqoreContext {
   readonly isMobileOrTablet?: boolean;
   readonly getAndIncreaseZIndex?: () => number;
   readonly animations?: IReqoreOptions['animations'];
+  readonly closePopoversOnEscPress?: boolean;
 }
 
 export default createContext<IReqoreContext>({
@@ -23,4 +24,5 @@ export default createContext<IReqoreContext>({
     buttons: true,
     dialogs: true,
   },
+  closePopoversOnEscPress: true,
 });

package/src/helpers/colors.ts

@@ -1,5 +1,5 @@
-import { cloneDeep, merge } from 'lodash';
-import { darken, getLuminance, lighten, readableColor } from 'polished';
+import { cloneDeep, merge, reduce } from 'lodash';
+import { darken, getLuminance, lighten, mix, readableColor } from 'polished';
 import { TReqoreEffectColor, TReqoreEffectColorList, TReqoreHexColor } from '../components/Effect';
 import { Colors } from '../constants/colors';
 import { DEFAULT_INTENTS, IReqoreTheme, TReqoreIntent } from '../constants/theme';
@@ -124,14 +124,14 @@ export const mergeThemes = (element: string, theme: IReqoreTheme, customTheme: a
     return clonedTheme;
   }
 
-  if (element === 'main' && customTheme) {
+  if (element === 'main') {
     merge(clonedTheme, {
       main: customTheme.main,
       originalMain: clonedTheme.main,
       text: customTheme.text,
     });
   } else {
-    merge(clonedTheme, { [element]: customTheme || {}, text: customTheme.text });
+    merge(clonedTheme, { [element]: customTheme, text: customTheme.text });
   }
 
   return clonedTheme;
@@ -189,3 +189,51 @@ export const getColorFromMaybeString = (
 
   return _color;
 };
+
+export const createEffectGradient = (
+  theme: IReqoreTheme,
+  colors: Record<number, TReqoreEffectColor>,
+  lighten: number = 0,
+  minimal?: boolean
+): string => {
+  return reduce(
+    colors,
+    (colorsString, color, percentage) => {
+      return `${colorsString}, ${
+        minimal ? theme.main : changeLightness(getColorFromMaybeString(theme, color), lighten)
+      } ${percentage}%`;
+    },
+    ''
+  );
+};
+
+export const getNthGradientColor = (
+  theme: IReqoreTheme,
+  colors?: Record<number, TReqoreEffectColor>,
+  nth: number = 1
+): TReqoreHexColor | undefined => {
+  if (colors) {
+    return getColorFromMaybeString(theme, Object.values(colors)[nth - 1]);
+  }
+
+  return undefined;
+};
+
+export const getGradientMix = (
+  theme: IReqoreTheme,
+  colors: Record<number, TReqoreEffectColor>,
+  fallback?: TReqoreHexColor
+): TReqoreHexColor | undefined => {
+  if (colors && Object.keys(colors).length === 2) {
+    const gradientColor1: TReqoreHexColor = getNthGradientColor(theme, colors);
+    const gradientColor2: TReqoreHexColor = getNthGradientColor(theme, colors, 2);
+
+    return mix(
+      0.5,
+      gradientColor1 === '#00000000' ? theme.main : gradientColor1,
+      gradientColor2 === '#00000000' ? theme.main : gradientColor2
+    ) as TReqoreHexColor;
+  }
+
+  return fallback;
+};

package/src/hooks/usePopover.tsx

@@ -2,6 +2,7 @@ import { Placement } from '@popperjs/core';
 import { MutableRefObject, useContext, useEffect, useMemo, useRef } from 'react';
 import { useUnmount, useUpdateEffect } from 'react-use';
 import shortid from 'shortid';
+import { IPopoverData } from '../containers/PopoverProvider';
 import PopoverContext from '../context/PopoverContext';
 import {
   IReqoreIntent,
@@ -25,6 +26,13 @@ const endEvents = {
   focus: null,
 };
 
+export interface IPopoverControls {
+  open: () => void;
+  close: () => void;
+  isOpen: () => boolean;
+  id: string;
+}
+
 export interface IPopover
   extends IReqoreIntent,
     IWithReqoreMinimal,
@@ -50,6 +58,7 @@ export interface IPopover
 
 export interface IPopoverOptions extends IPopover {
   targetElement?: HTMLElement;
+  passPopoverData?: (data: IPopoverControls) => void;
 }
 
 const usePopover = ({
@@ -64,14 +73,15 @@ const usePopover = ({
   openOnMount = false,
   delay,
   ...rest
-}: IPopoverOptions) => {
-  const { addPopover, removePopover, updatePopover, popovers } = useContext(PopoverContext);
+}: IPopoverOptions): IPopoverControls => {
+  const { addPopover, removePopover, updatePopover, popovers, isPopoverOpen } =
+    useContext(PopoverContext);
   const { current }: MutableRefObject<string> = useRef(shortid.generate());
   let { current: timeout }: MutableRefObject<any> = useRef(0);
 
   const startEvent = startEvents[handler];
   const endEvent = endEvents[handler];
-  const currentPopover = useMemo(
+  const currentPopover: IPopoverData = useMemo(
     () => popovers?.find((p) => p.id === current),
     [popovers, current]
   );
@@ -97,7 +107,7 @@ const usePopover = ({
 
   const _addPopover = () => {
     if (currentPopover) {
-      if (handler !== 'hoverStay') {
+      if (handler !== 'hoverStay' && handler !== 'focus') {
         _removePopover?.();
       }
     } else if (show) {
@@ -112,11 +122,6 @@ const usePopover = ({
   };
 
   const _removePopover = () => {
-    if (rest?.blur > 0) {
-      targetElement.style.position = 'initial';
-      targetElement.style.zIndex = 'initial';
-    }
-
     cancelTimeout();
     removePopover?.(current);
   };
@@ -188,7 +193,16 @@ const usePopover = ({
     cancelTimeout();
   });
 
-  return current;
+  return {
+    id: current,
+    open: () => {
+      if (!isPopoverOpen(current)) {
+        openPopover();
+      }
+    },
+    close: () => _removePopover(),
+    isOpen: () => isPopoverOpen(current),
+  };
 };
 
 export default usePopover;

package/src/hooks/useReqore.ts

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import ReqoreContext, { IReqoreContext } from '../context/ReqoreContext';
+
+export const useReqore = (): IReqoreContext => {
+  const reqore = useContext(ReqoreContext);
+
+  if (!reqore) {
+    throw new Error('Reqore context is not defined');
+  }
+
+  return reqore;
+};

package/src/hooks/useTheme.ts

@@ -14,11 +14,16 @@ export interface IReqoreCustomTheme extends Partial<Omit<IReqoreTheme, 'main' |
 }
 
 export const useReqoreTheme = (
-  element: string,
+  element?: string,
   customTheme: IReqoreCustomTheme = {},
   intent?: TReqoreIntent
 ) => {
   const theme: IReqoreTheme = useContext<IReqoreTheme>(ThemeContext);
+
+  if (!element) {
+    return theme;
+  }
+
   let _customTheme: IReqoreCustomTheme = cloneDeep(customTheme);
 
   if (_customTheme.main) {

package/src/index.tsx

@@ -30,6 +30,7 @@ export { default as ReqoreMenuDivider } from './components/Menu/divider';
 export { default as ReqoreMenuItem } from './components/Menu/item';
 export { default as ReqoreMessage } from './components/Message';
 export { ReqoreModal } from './components/Modal';
+export { ReqoreMultiSelect } from './components/MultiSelect';
 export { ReqoreFooter, ReqoreHeader } from './components/Navbar';
 export { default as ReqoreNavbarDivider } from './components/Navbar/divider';
 export { default as ReqoreNavbarGroup } from './components/Navbar/group';
@@ -58,3 +59,5 @@ export { default as ReqoreUIProvider } from './containers/UIProvider';
 export { default as ReqoreContext } from './context/ReqoreContext';
 export { default as ReqoreThemeContext } from './context/ThemeContext';
 export { default as useLatestZIndex } from './hooks/useLatestZIndex';
+export { useReqore } from './hooks/useReqore';
+export { useReqoreTheme } from './hooks/useTheme';

package/src/mock/collectionData.tsx

@@ -16,12 +16,12 @@ export default [
     tags: [
       {
         label: 23,
-        badge: true,
+        asBadge: true,
       },
       {
         label: 2022,
         labelKey: 'Year',
-        badge: true,
+        asBadge: true,
         onRemoveClick: noop,
       },
     ],
@@ -69,12 +69,12 @@ export default [
     tags: [
       {
         label: 23,
-        badge: true,
+        asBadge: true,
       },
       {
         label: 2022,
         labelKey: 'Year',
-        badge: true,
+        asBadge: true,
         onRemoveClick: noop(),
       },
     ],
@@ -273,12 +273,12 @@ export default [
     tags: [
       {
         label: 23,
-        badge: true,
+        asBadge: true,
       },
       {
         label: 2022,
         labelKey: 'Year',
-        badge: true,
+        asBadge: true,
         onRemoveClick: noop,
       },
     ],

package/src/mock/multiSelect.ts

@@ -0,0 +1,69 @@
+import { TReqoreMultiSelectItem } from '../components/MultiSelect';
+
+export const MultiSelectItems: TReqoreMultiSelectItem[] = [
+  {
+    label: 'Existing item 1',
+    value: 'Existing item 1',
+    icon: 'SunCloudyLine',
+  },
+  {
+    label: 'Existing item 2',
+    value: 'Existing item 2',
+    icon: 'BatteryChargeFill',
+  },
+  {
+    label: 'Existing item 3',
+    value: 'Existing item 3',
+    icon: 'DropboxFill',
+    intent: 'info',
+    rightIcon: 'SunLine',
+  },
+  {
+    label: 'Existing item 4',
+    value: 'Existing item 4',
+    icon: 'PagesLine',
+    effect: { gradient: { colors: { 0: 'success', 100: 'info:darken:1' } } },
+  },
+  {
+    disabled: true,
+    label: 'Disabled item',
+    value: 'Disabled item',
+    icon: 'StopCircleLine',
+  },
+  {
+    minimal: true,
+    label: 'Minimal item',
+    value: 'Minimal item',
+    icon: 'StopCircleLine',
+  },
+  {
+    divider: true,
+    icon: 'CheckDoubleLine',
+  },
+  {
+    value: 'itemWithNoLabel',
+    icon: 'TakeawayLine',
+    actions: [
+      {
+        icon: 'ArrowLeftUpFill',
+        onClick: () => console.log('clicked'),
+        intent: 'pending',
+      },
+    ],
+  },
+  {
+    label: 'Other Item 1',
+    value: 'Other Item 1',
+    icon: 'MapFill',
+  },
+  {
+    label: 'Other Item 2',
+    value: 'Other Item 2',
+    icon: 'ArrowLeftUpFill',
+  },
+  {
+    label: 'Other Item 3',
+    value: 'Other Item 3',
+    icon: 'MicLine',
+  },
+];

package/src/stories/Button/Button.stories.tsx

@@ -32,17 +32,29 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
         <ReqoreButton {...buttonProps} active tooltip='hello'>
           Active
         </ReqoreButton>
+        <ReqoreButton {...buttonProps} minimal flat>
+          Minimal
+        </ReqoreButton>
+        <ReqoreButton {...buttonProps} readOnly onClick={alert}>
+          Read only
+        </ReqoreButton>
+      </ReqoreControlGroup>
+      <br />
+      <ReqoreControlGroup size={buttonProps.size}>
+        <ReqoreButton {...buttonProps} active flat={false} tooltip='hello'>
+          Active Not Flat
+        </ReqoreButton>
         <ReqoreButton {...buttonProps} flat={false}>
           Not Flat
         </ReqoreButton>
-        <ReqoreButton {...buttonProps} minimal>
-          Minimal
+        <ReqoreButton {...buttonProps} minimal flat={false}>
+          Minimal not flat
         </ReqoreButton>
-        <ReqoreButton {...buttonProps} minimal flat>
-          Minimal flat
+        <ReqoreButton {...buttonProps} readOnly onClick={alert} flat={false}>
+          Read only not flat
         </ReqoreButton>
-        <ReqoreButton {...buttonProps} readOnly onClick={alert}>
-          Read only
+        <ReqoreButton {...buttonProps} disabled flat={false}>
+          Disabled not flat
         </ReqoreButton>
       </ReqoreControlGroup>
       <br />
@@ -98,10 +110,10 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
       <br />
       <ReqoreControlGroup>
         <ReqoreButton {...buttonProps} readOnly badge={10} onClick={alert}>
-          With Badge
+          Read only with badge
         </ReqoreButton>
         <ReqoreButton {...buttonProps} minimal badge={20} onClick={alert}>
-          With Badge
+          Minimal with badge
         </ReqoreButton>
         <ReqoreButton
           {...buttonProps}

package/src/stories/Checkbox/Checkbox.stories.tsx

@@ -9,13 +9,48 @@ export default {
 
 const Template: ComponentStory<typeof Checkbox> = (args) => {
   return (
-    <ReqoreControlGroup>
-      <ReqoreCheckbox {...args} />
-      <ReqoreCheckbox {...args} label='Label' labelDetail='Detail' labelDetailPosition='left' />
-      <ReqoreCheckbox {...args} checked tooltip='I am checked' />
-      <ReqoreCheckbox {...args} disabled />
-      <ReqoreCheckbox {...args} label='Label' labelDetail='Detail' labelPosition='left' />
-      <ReqoreCheckbox {...args} label='Read Only' labelPosition='left' readOnly />
+    <ReqoreControlGroup vertical>
+      <ReqoreControlGroup>
+        <ReqoreCheckbox {...args} />
+        <ReqoreCheckbox {...args} label='Label' labelDetail='Detail' labelDetailPosition='left' />
+        <ReqoreCheckbox {...args} checked tooltip='I am checked' />
+        <ReqoreCheckbox {...args} disabled />
+        <ReqoreCheckbox {...args} label='Label' labelDetail='Detail' labelPosition='left' />
+        <ReqoreCheckbox {...args} label='Read Only' labelPosition='left' readOnly />
+      </ReqoreControlGroup>
+      <ReqoreControlGroup>
+        <ReqoreCheckbox {...args} intent='info' />
+        <ReqoreCheckbox
+          {...args}
+          label='Label'
+          labelDetail='Detail'
+          labelDetailPosition='left'
+          labelEffect={{ gradient: { colors: { 0: 'danger:lighten:1', 100: '#ff6700' } } }}
+        />
+        <ReqoreCheckbox
+          {...args}
+          checked
+          tooltip='I am checked'
+          effect={{ gradient: { colors: { 0: '#00fafd', 100: '#ff00d0' } } }}
+        />
+        <ReqoreCheckbox {...args} disabled onText='yes' offText='no' />
+        <ReqoreCheckbox
+          {...args}
+          label='Label'
+          labelDetail='Detail'
+          labelPosition='left'
+          checkedIcon='EmotionHappyFill'
+          uncheckedIcon='EmotionSadFill'
+        />
+        <ReqoreCheckbox
+          {...args}
+          label='Read Only'
+          labelPosition='left'
+          readOnly
+          checked
+          image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
+        />
+      </ReqoreControlGroup>
     </ReqoreControlGroup>
   );
 };

package/src/stories/ControlGroup/ControlGroup.stories.tsx

@@ -2,7 +2,7 @@ import { Meta, Story } from '@storybook/react/types-6-0';
 import { IReqoreControlGroupProps } from '../../components/ControlGroup';
 import ReqoreInput from '../../components/Input';
 import { ReqoreButton, ReqoreControlGroup, ReqoreTag } from '../../index';
-import { GapSizeArg, MinimalArg, SizeArg, argManager } from '../utils/args';
+import { argManager, GapSizeArg, MinimalArg, SizeArg } from '../utils/args';
 
 const { createArg } = argManager<IReqoreControlGroupProps>();
 
@@ -39,7 +39,7 @@ const Template: Story<IReqoreControlGroupProps> = (args: IReqoreControlGroupProp
       <ReqoreButton>Button</ReqoreButton>
       <ReqoreButton
         flat={false}
-        effect={{ gradient: { colors: { 0: 'success', 100: 'success:darken:1' } } }}
+        effect={{ gradient: { colors: { 0: 'success', 100: 'info:darken:1' } } }}
       >
         Non flat Button
       </ReqoreButton>
@@ -60,6 +60,11 @@ Minimal.args = {
   minimal: true,
 };
 
+export const NotFlat = Template.bind({});
+NotFlat.args = {
+  flat: false,
+};
+
 export const Vertical = Template.bind({});
 Vertical.args = {
   vertical: true,

package/src/stories/Dropdown/Dropdown.stories.tsx

@@ -47,6 +47,11 @@ export default {
           value: 'i aM diSAblEd',
           icon: 'StopCircleLine',
         },
+        {
+          divider: true,
+          label: 'Divider',
+          dividerAlign: 'left',
+        },
         {
           selected: true,
           value: 'Hello',
@@ -125,7 +130,7 @@ export default {
 } as Meta<IReqoreDropdownProps>;
 
 const Template: Story<IReqoreDropdownProps> = (args: IReqoreDropdownProps) => {
-  const [selected, setSelected] = useState<string[]>(['Item 3', 'Item 6']);
+  const [selected, setSelected] = useState<(string | number)[]>(['Item 3', 'Item 6']);
 
   if (args.multiSelect) {
     return (