@bitrise/bitkit 13.224.0 → 13.225.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.224.0",
+  "version": "13.225.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Components/Dropdown/Dropdown.context.tsx

@@ -9,6 +9,7 @@ export type DropdownEventArgs<T> = { value: T; index: number | undefined; label:
 
 type DropdownContext<T> = {
   formValue: T;
+  isMultiSelect: boolean;
   onOptionSelected: (arg: DropdownEventArgs<T>) => void;
   listRef: React.RefObject<(HTMLElement | null)[]>;
   searchValue: string;

package/src/Components/Dropdown/Dropdown.theme.ts

@@ -4,6 +4,7 @@ import { DropdownProps } from './DropdownProps';
 type DropdownStateProps = Pick<DropdownProps<string | null>, 'disabled' | 'readOnly' | 'isWarning' | 'isError'> & {
   placeholder: boolean;
   isOpen: boolean;
+  isMultiSelect: boolean;
   hasAvatar: boolean;
 };
 
@@ -69,7 +70,7 @@ const getButtonContentColor = ({ disabled, placeholder }: DropdownStateProps) =>
 
 const DropdownTheme = {
   baseStyle: (props: DropdownStateProps) => {
-    const { disabled, readOnly, hasAvatar, isError } = props;
+    const { disabled, isMultiSelect, readOnly, hasAvatar, isError } = props;
     return {
       field: {
         _hover:
@@ -131,7 +132,7 @@ const DropdownTheme = {
         cursor: 'pointer',
         paddingLeft: hasAvatar ? '12' : '16',
         paddingRight: '24',
-        paddingY: '8',
+        paddingY: isMultiSelect ? '12' : '8',
         textAlign: 'start',
         userSelect: 'none',
         w: '100%',
@@ -164,28 +165,40 @@ const DropdownTheme = {
     };
   },
   sizes: {
-    lg: ({ hasAvatar }: DropdownStateProps) => ({
-      field: {
-        fontSize: '3',
-        gap: rem('8'),
-        height: '48',
-        paddingLeft: hasAvatar ? rem('12') : rem('16'),
-        paddingRight: rem('16'),
-      },
-    }),
-    md: {
-      field: {
-        fontSize: '2',
-        gap: rem('8'),
-        height: '40',
-        paddingLeft: rem('12'),
-        paddingRight: rem('12'),
-      },
-      item: {
-        fontSize: '2',
-        paddingLeft: rem('16'),
-        paddingRight: rem('16'),
-      },
+    lg: ({ hasAvatar, isMultiSelect }: DropdownStateProps) => {
+      return {
+        field: {
+          fontSize: '3',
+          gap: rem('8'),
+          height: isMultiSelect ? 'auto' : '48',
+          minH: isMultiSelect ? '48' : undefined,
+          paddingLeft: hasAvatar ? rem('12') : rem('16'),
+          paddingRight: rem('16'),
+          paddingTop: isMultiSelect ? rem('7') : '0',
+          paddingBottom: isMultiSelect ? rem('7') : '0',
+        },
+      };
+    },
+    md: ({ isMultiSelect }: DropdownStateProps) => {
+      return {
+        field: {
+          fontSize: '2',
+          gap: rem('8'),
+          height: isMultiSelect ? 'auto' : '40',
+          minH: isMultiSelect ? '40' : undefined,
+          paddingLeft: rem('12'),
+          paddingRight: rem('12'),
+          paddingTop: isMultiSelect ? rem('8') : '0',
+          paddingBottom: isMultiSelect ? rem('8') : '0',
+        },
+        item: {
+          fontSize: '2',
+          paddingLeft: rem('16'),
+          paddingRight: rem('16'),
+          paddingTop: isMultiSelect ? rem('8') : '0',
+          paddingBottom: isMultiSelect ? rem('8') : '0',
+        },
+      };
     },
   },
 };

package/src/Components/Dropdown/Dropdown.tsx

@@ -1,8 +1,10 @@
 import React, {
   cloneElement,
+  createContext,
   forwardRef,
   ReactNode,
   useCallback,
+  useContext,
   useEffect,
   useId,
   useMemo,
@@ -24,6 +26,9 @@ import SearchInput from '../SearchInput/SearchInput';
 import FormLabel from '../Form/FormLabel';
 import { AvatarProps } from '../Avatar/Avatar';
 import { getDataAttributes } from '../../utils/utils';
+import Tag from '../Tag/Tag';
+import Box from '../Box/Box';
+import IconButton from '../IconButton/IconButton';
 import { DropdownEventArgs, DropdownProvider, useDropdownContext, useDropdownStyles } from './Dropdown.context';
 import { DropdownDetailedOption, DropdownGroup, DropdownOption, DropdownOptionProps } from './DropdownOption';
 import DropdownButton from './DropdownButton';
@@ -32,6 +37,8 @@ import { NoResultsFound, useSimpleSearch } from './hooks/useSimpleSearch';
 import { isSearchable } from './isNodeMatch';
 import { DropdownProps } from './DropdownProps';
 
+const MultiSelectContext = createContext(false);
+
 type DropdownSearchCustomProps = {
   value: string;
   onChange: (newValue: string) => void;
@@ -141,6 +148,7 @@ function findOption<T>(
 function useDropdown<T>({
   children,
   defaultValue,
+  disabled,
   dropdownWidth = 'match',
   name,
   onChange,
@@ -165,8 +173,11 @@ function useDropdown<T>({
     setActiveIndex,
     setSelectedIndex,
   } = useFloatingDropdown({ dropdownWidth, enabled: !readOnly, optionsRef, placement });
+
+  const isMultiSelect = useContext(MultiSelectContext);
+
   const [formValue, setFormValue] = useControllableState<T>({
-    defaultValue,
+    defaultValue: isMultiSelect ? defaultValue || ([] as T) : defaultValue,
     onChange: (newValue) => onChange?.({ target: { name, value: newValue } }),
     value,
   });
@@ -195,7 +206,17 @@ function useDropdown<T>({
 
   const onOptionSelected = useCallback(
     (args: DropdownEventArgs<T>) => {
-      setFormValue(args.value);
+      setFormValue((previous) => {
+        if (Array.isArray(previous)) {
+          if (previous.includes(args.value)) {
+            return previous.filter((aPrevious) => aPrevious !== args.value) as T;
+          }
+
+          return [...previous, args.value] as T;
+        }
+
+        return args.value;
+      });
       close();
     },
     [close, setFormValue],
@@ -205,6 +226,7 @@ function useDropdown<T>({
       activeIndex,
       formValue,
       getItemProps,
+      isMultiSelect,
       listRef,
       onOptionSelected,
       searchOnChange,
@@ -228,15 +250,84 @@ function useDropdown<T>({
   );
 
   useEffect(() => {
-    const currentOption = findOption(refdChildren, formValue);
-    if (currentOption) {
-      setFormLabel(currentOption.label);
-      setSelectedIndex(currentOption.index);
-      setSelectedAvatar(currentOption.avatar);
-    } else {
-      setFormLabel(null);
+    if (Array.isArray(formValue)) {
+      setFormLabel(
+        formValue.length > 0 ? (
+          <Box alignItems="center" display="flex" gap={8}>
+            <Box display="flex" flexGrow={1} flexWrap="wrap" gap={8}>
+              {formValue
+                ?.sort((a, b) => {
+                  if (typeof a === 'string' && typeof b === 'string') {
+                    return a.localeCompare(b);
+                  }
+
+                  if (a === null) {
+                    return -1;
+                  }
+
+                  return 1;
+                })
+                .map((formValueItem) => {
+                  if (typeof formValueItem !== 'string' && formValueItem !== null) {
+                    return <>{formValueItem}</>;
+                  }
+
+                  const currentOption = findOption(refdChildren, formValueItem);
+
+                  return (
+                    <Tag
+                      colorScheme="neutral"
+                      isDisabled={disabled}
+                      key={formValueItem}
+                      onClose={(event) => {
+                        event.stopPropagation();
+
+                        setFormValue((previous: T) => {
+                          if (!Array.isArray(previous)) {
+                            return previous;
+                          }
+
+                          return previous.filter((aPrevious) => aPrevious !== formValueItem) as T;
+                        });
+                      }}
+                      size="sm"
+                    >
+                      {currentOption?.label || formValueItem}
+                    </Tag>
+                  );
+                })}
+            </Box>
+            <IconButton
+              aria-label="Clear all"
+              as="span"
+              color="icon/secondary"
+              iconName="Cross"
+              iconSize="24"
+              isDisabled={disabled}
+              onClick={(event) => {
+                event.stopPropagation();
+
+                setFormValue([] as T);
+              }}
+              size="sm"
+              variant="tertiary"
+            />
+          </Box>
+        ) : null,
+      );
       setSelectedIndex(null);
       setSelectedAvatar(undefined);
+    } else {
+      const currentOption = findOption(refdChildren, formValue);
+      if (currentOption) {
+        setFormLabel(currentOption.label);
+        setSelectedIndex(currentOption.index);
+        setSelectedAvatar(currentOption.avatar);
+      } else {
+        setFormLabel(null);
+        setSelectedIndex(null);
+        setSelectedAvatar(undefined);
+      }
     }
   }, [refdChildren, formValue]);
   return {
@@ -311,6 +402,7 @@ const Dropdown = forwardRef<Element, DropdownProps<string | null>>(
       ...rest
     } = useDropdown({
       defaultValue,
+      disabled,
       dropdownWidth,
       isWarning,
       name,
@@ -323,10 +415,12 @@ const Dropdown = forwardRef<Element, DropdownProps<string | null>>(
       value,
       ...props,
     });
+
     const dropdownStyles = useMultiStyleConfig('Dropdown', {
       hasAvatar: Boolean(avatar),
       disabled,
       isError,
+      isMultiSelect: useContext(MultiSelectContext),
       isOpen,
       isWarning,
       placeholder: !formLabel,
@@ -443,4 +537,16 @@ export function typedDropdown<T>() {
   };
 }
 
+export const MultiSelectDropdown = (props: DropdownProps<(string | null)[]>) => {
+  const { Dropdown: TypedDropdown } = typedDropdown<(string | null)[]>();
+
+  const { children, ...rest } = props;
+
+  return (
+    <MultiSelectContext.Provider value>
+      <TypedDropdown {...rest}>{children}</TypedDropdown>
+    </MultiSelectContext.Provider>
+  );
+};
+
 export default Dropdown;

package/src/Components/Dropdown/DropdownOption.tsx

@@ -5,6 +5,7 @@ import Text, { TextProps } from '../Text/Text';
 import Divider from '../Divider/Divider';
 import Box from '../Box/Box';
 import Icon from '../Icon/Icon';
+import Checkbox from '../Form/Checkbox/Checkbox';
 import { useDropdownContext, useDropdownStyles } from './Dropdown.context';
 
 export type DropdownOptionProps<T> = {
@@ -27,7 +28,9 @@ const DropdownOption = <T = string,>({
   const { item } = useDropdownStyles();
   const ctx = useDropdownContext<T | null>();
   const { index } = rest as { index?: number };
-  const isSelected = value === ctx.formValue;
+  const isSelected = !!(
+    ctx.formValue && (Array.isArray(ctx.formValue) ? ctx.formValue.includes(value) : ctx.formValue === value)
+  );
 
   return (
     <chakra.div
@@ -61,8 +64,17 @@ const DropdownOption = <T = string,>({
     >
       <Box display="flex" alignItems="center" gap="8">
         {avatar && <Avatar size={ctx.size === 'lg' ? '32' : '24'} {...avatar} />}
-        <Box flex="1">{children}</Box>
-        {isSelected && <Icon name="Check" color="icon/interactive" />}
+        {ctx.isMultiSelect ? (
+          <>
+            <Checkbox isChecked={isSelected} />
+            <Box flex="1">{children}</Box>
+          </>
+        ) : (
+          <>
+            <Box flex="1">{children}</Box>
+            {isSelected && <Icon name="Check" color="icon/interactive" />}
+          </>
+        )}
       </Box>
     </chakra.div>
   );

package/src/Components/IconButton/IconButton.tsx

@@ -3,7 +3,7 @@ import Icon, { IconProps, TypeIconName } from '../Icon/Icon';
 import Tooltip, { TooltipProps } from '../Tooltip/Tooltip';
 
 export interface IconButtonProps extends ChakraIconButtonProps {
-  as?: 'a' | 'button';
+  as?: 'a' | 'button' | 'span';
   disabled?: never;
   iconName: TypeIconName;
   isDanger?: boolean;
@@ -35,7 +35,7 @@ const IconButton = forwardRef<IconButtonProps, 'button'>((props, ref) => {
     ...rest
   } = props;
   const properties: ChakraIconButtonProps = {
-    as: isDisabled ? 'button' : as,
+    as: as === 'a' && isDisabled ? 'button' : as,
     icon: <Icon name={iconName} size={iconSize || (size === 'lg' ? '24' : '16')} />,
     isDisabled,
     size,

package/src/Components/Tag/Tag.tsx

@@ -19,7 +19,7 @@ export interface TagProps extends Omit<ChakraTagProps, 'colorScheme' | 'size' |
   iconName?: TypeIconName;
   isDisabled?: boolean;
   isLoading?: boolean;
-  onClose?: () => void;
+  onClose?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   size?: 'sm' | 'md';
   withIcon?: boolean;
 }
@@ -66,7 +66,7 @@ const Tag = forwardRef<TagProps, 'span'>((props, ref) => {
       </Text>
       {!!onClose && (
         <Tooltip isDisabled={!closeButtonTooltip} label={closeButtonTooltip}>
-          <TagCloseButton isDisabled={isDisabled || isLoading} onClick={onClose}>
+          <TagCloseButton as="span" isDisabled={isDisabled || isLoading} onClick={onClose}>
             <Icon name="Cross" size="16" />
           </TagCloseButton>
         </Tooltip>