@bitrise/bitkit 13.234.0 → 13.236.0

package/package.json

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

package/src/Components/Dropdown/Dropdown.tsx

@@ -178,7 +178,9 @@ function useDropdown<T>({
 
   const [formValue, setFormValue] = useControllableState<T>({
     defaultValue: isMultiSelect ? defaultValue || ([] as T) : defaultValue,
-    onChange: (newValue) => onChange?.({ target: { name, value: newValue } }),
+    onChange: (newValue) => {
+      onChange?.({ target: { name, value: newValue } });
+    },
     value,
   });
   const [formLabel, setFormLabel] = useState<ReactNode>();
@@ -204,13 +206,27 @@ function useDropdown<T>({
     onSearch: () => setActiveIndex(null),
   });
 
+  // this can just be a ref as it will always be updated when formValue is, which will cause a re-render
+  const labelMapRef = useRef<Map<T, ReactNode>>();
+  if (!labelMapRef.current) labelMapRef.current = new Map();
+
+  // clear map when value is changed from the outside
+  useEffect(() => {
+    if (labelMapRef.current && Array.isArray(value)) {
+      const removed = labelMapRef.current.keys().filter((key) => !value.includes(key));
+      removed.forEach((remove) => labelMapRef.current?.delete(remove));
+    }
+  }, [value]);
+
   const onOptionSelected = useCallback(
     (args: DropdownEventArgs<T>) => {
       setFormValue((previous) => {
         if (Array.isArray(previous)) {
           if (previous.includes(args.value)) {
+            labelMapRef.current?.delete(args.value);
             return previous.filter((aPrevious) => aPrevious !== args.value) as T;
           }
+          labelMapRef.current?.set(args.value, args.label);
 
           return [...previous, args.value] as T;
         }
@@ -275,8 +291,6 @@ function useDropdown<T>({
                     return <>{formValueItem}</>;
                   }
 
-                  const currentOption = findOption(refdChildren, formValueItem);
-
                   return (
                     <Tag
                       colorScheme="neutral"
@@ -295,7 +309,7 @@ function useDropdown<T>({
                       }}
                       size="sm"
                     >
-                      {currentOption?.label || formValueItem}
+                      {labelMapRef.current?.get(formValueItem) || formValueItem}
                     </Tag>
                   );
                 })}

package/src/Components/ProgressIndicator/ProgressIndicator.tsx

@@ -139,7 +139,7 @@ const RealStage = ({
         )}
       </Box>
       <Box sx={style.labelContainer}>
-        {action && !isDisabled ? (
+        {action && !isDisabled && !isSkipped ? (
           <Link
             as={action.href ? 'a' : 'button'}
             colorScheme="purple"