@bitrise/bitkit 13.302.0 → 13.303.0

package/package.json

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

package/src/Components/Dropdown/Dropdown.tsx

@@ -29,6 +29,7 @@ import { AvatarProps } from '../Avatar/Avatar';
 import { getDataAttributes } from '../../utils/utils';
 import Tag from '../Tag/Tag';
 import Box from '../Box/Box';
+import Text from '../Text/Text';
 import IconButton from '../IconButton/IconButton';
 import { DropdownEventArgs, DropdownProvider, useDropdownContext, useDropdownStyles } from './Dropdown.context';
 import { DropdownDetailedOption, DropdownGroup, DropdownOption, DropdownOptionProps } from './DropdownOption';
@@ -38,7 +39,14 @@ import { NoResultsFound, useSimpleSearch } from './hooks/useSimpleSearch';
 import { isSearchable } from './isNodeMatch';
 import { DropdownProps } from './DropdownProps';
 
-const MultiSelectContext = createContext<{ invalidValues?: string[] } | undefined>(undefined);
+const MultiSelectContext = createContext<
+  | {
+      invalidValues?: string[];
+      isConstrained?: boolean;
+      itemType?: string;
+    }
+  | undefined
+>(undefined);
 
 type DropdownSearchCustomProps = {
   value?: string;
@@ -134,7 +142,11 @@ function findOption<T>(
     if (React.isValidElement(elem) && !elem.props.isDisabled) {
       const optValue = typeof elem.props.value === 'undefined' ? null : elem.props.value;
       if (elem.type === DropdownOption && optValue === value) {
-        return { index: elem.props.index, label: elem.props.children, avatar: elem.props.avatar };
+        return {
+          index: elem.props.index,
+          label: elem.props.children,
+          avatar: elem.props.avatar,
+        };
       }
       const ch =
         findOption(elem.props.children, value) || (isSearchable(elem.type) && findOption(elem.type(elem.props), value));
@@ -203,7 +215,12 @@ function useDropdown<T>({
     listRef,
     setActiveIndex,
     setSelectedIndex,
-  } = useFloatingDropdown({ dropdownWidth, enabled: !readOnly, optionsRef, placement });
+  } = useFloatingDropdown({
+    dropdownWidth,
+    enabled: !readOnly,
+    optionsRef,
+    placement,
+  });
 
   const multiSelectContext = useContext(MultiSelectContext);
   const isMultiSelect = Boolean(multiSelectContext);
@@ -304,46 +321,63 @@ function useDropdown<T>({
         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 colors = multiSelectContext?.invalidValues?.includes(formValueItem) ? 'red' : 'neutral';
-                  return (
-                    <Tag
-                      colorScheme={colors}
-                      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"
-                    >
-                      {labelCache.get(formValueItem) || fallback?.(formValueItem) || formValueItem}
-                    </Tag>
-                  );
-                })}
+              {multiSelectContext?.isConstrained ? (
+                <>
+                  <Tag
+                    size="sm"
+                    colorScheme="neutral"
+                    onClose={(event) => {
+                      event.stopPropagation();
+                      setFormValue([] as T);
+                    }}
+                    isDisabled={disabled}
+                  >
+                    {formValue.length}
+                  </Tag>
+                  <Text>{`${multiSelectContext.itemType} selected`}</Text>
+                </>
+              ) : (
+                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 colors = multiSelectContext?.invalidValues?.includes(formValueItem) ? 'red' : 'neutral';
+                    return (
+                      <Tag
+                        colorScheme={colors}
+                        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"
+                      >
+                        {labelCache.get(formValueItem) || fallback?.(formValueItem) || formValueItem}
+                      </Tag>
+                    );
+                  })
+              )}
             </Box>
             <IconButton
               aria-label="Clear all"
@@ -377,7 +411,7 @@ function useDropdown<T>({
         setSelectedAvatar(undefined);
       }
     }
-  }, [refdChildren, formValue]);
+  }, [refdChildren, formValue, multiSelectContext]);
   return {
     avatar: selectedAvatar,
     context,
@@ -587,11 +621,20 @@ export function typedDropdown<T>() {
   };
 }
 
-export const MultiSelectDropdown = (props: DropdownProps<(string | null)[]> & { invalidValues?: string[] }) => {
+export const MultiSelectDropdown = (
+  props: DropdownProps<(string | null)[]> & {
+    invalidValues?: string[];
+    isConstrained?: boolean;
+    itemType?: string;
+  },
+) => {
   const { Dropdown: TypedDropdown } = typedDropdown<(string | null)[]>();
 
-  const { children, invalidValues, ...rest } = props;
-  const contextValue = useMemo(() => ({ invalidValues }), [invalidValues]);
+  const { children, invalidValues, isConstrained, itemType, ...rest } = props;
+  const contextValue = useMemo(
+    () => ({ invalidValues, isConstrained, itemType }),
+    [invalidValues, isConstrained, itemType],
+  );
 
   return (
     <MultiSelectContext.Provider value={contextValue}>