@bitrise/bitkit 13.251.0 → 13.252.0

package/package.json

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

package/src/Components/Dropdown/Dropdown.tsx

@@ -37,7 +37,7 @@ import { NoResultsFound, useSimpleSearch } from './hooks/useSimpleSearch';
 import { isSearchable } from './isNodeMatch';
 import { DropdownProps } from './DropdownProps';
 
-const MultiSelectContext = createContext(false);
+const MultiSelectContext = createContext<{ invalidValues?: string[] } | undefined>(undefined);
 
 type DropdownSearchCustomProps = {
   value: string;
@@ -174,7 +174,8 @@ function useDropdown<T>({
     setSelectedIndex,
   } = useFloatingDropdown({ dropdownWidth, enabled: !readOnly, optionsRef, placement });
 
-  const isMultiSelect = useContext(MultiSelectContext);
+  const multiSelectContext = useContext(MultiSelectContext);
+  const isMultiSelect = Boolean(multiSelectContext);
 
   const [formValue, setFormValue] = useControllableState<T>({
     defaultValue: isMultiSelect ? defaultValue || ([] as T) : defaultValue,
@@ -291,9 +292,10 @@ function useDropdown<T>({
                     return <>{formValueItem}</>;
                   }
 
+                  const colors = multiSelectContext?.invalidValues?.includes(formValueItem) ? 'red' : 'neutral';
                   return (
                     <Tag
-                      colorScheme="neutral"
+                      colorScheme={colors}
                       isDisabled={disabled}
                       key={formValueItem}
                       onClose={(event) => {
@@ -556,13 +558,14 @@ export function typedDropdown<T>() {
   };
 }
 
-export const MultiSelectDropdown = (props: DropdownProps<(string | null)[]>) => {
+export const MultiSelectDropdown = (props: DropdownProps<(string | null)[]> & { invalidValues?: string[] }) => {
   const { Dropdown: TypedDropdown } = typedDropdown<(string | null)[]>();
 
-  const { children, ...rest } = props;
+  const { children, invalidValues, ...rest } = props;
+  const contextValue = useMemo(() => ({ invalidValues }), [invalidValues]);
 
   return (
-    <MultiSelectContext.Provider value>
+    <MultiSelectContext.Provider value={contextValue}>
       <TypedDropdown {...rest}>{children}</TypedDropdown>
     </MultiSelectContext.Provider>
   );