@bitrise/bitkit 13.270.0 → 13.271.0

package/package.json

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

package/src/Components/Dropdown/Dropdown.tsx

@@ -146,6 +146,26 @@ function findOption<T>(
   return null;
 }
 
+const DropdownLabelCacheContext = createContext<Map<unknown, ReactNode> | null>(null);
+
+const useLabelCache = () => {
+  const contextCache = useContext(DropdownLabelCacheContext);
+  const localCache = useRef<Map<unknown, ReactNode> | null>(null);
+  if (contextCache) {
+    return contextCache;
+  }
+  if (!localCache.current) {
+    localCache.current = new Map();
+  }
+  return localCache.current;
+};
+
+export const DropdownLabelCache = ({ children }: { children: ReactNode }) => {
+  const value = useMemo(() => new Map(), []);
+
+  return <DropdownLabelCacheContext.Provider value={value}>{children}</DropdownLabelCacheContext.Provider>;
+};
+
 function useDropdown<T>({
   children,
   defaultValue,
@@ -208,15 +228,13 @@ 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();
+  const labelCache = useLabelCache();
 
   // 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));
+    if (Array.isArray(value)) {
+      const removed = [...labelCache.keys()].filter((key) => !value.includes(key));
+      removed.forEach((remove) => labelCache.delete(remove));
     }
   }, [value]);
 
@@ -225,10 +243,10 @@ function useDropdown<T>({
       setFormValue((previous) => {
         if (Array.isArray(previous)) {
           if (previous.includes(args.value)) {
-            labelMapRef.current?.delete(args.value);
+            labelCache.delete(args.value);
             return previous.filter((aPrevious) => aPrevious !== args.value) as T;
           }
-          labelMapRef.current?.set(args.value, args.label);
+          labelCache.set(args.value, args.label);
 
           return [...previous, args.value] as T;
         }
@@ -312,7 +330,7 @@ function useDropdown<T>({
                       }}
                       size="sm"
                     >
-                      {labelMapRef.current?.get(formValueItem) || formValueItem}
+                      {labelCache.get(formValueItem) || formValueItem}
                     </Tag>
                   );
                 })}

package/src/index.ts

@@ -149,6 +149,7 @@ export type { DropdownProps } from './Components/Dropdown/DropdownProps';
 export {
   default as Dropdown,
   MultiSelectDropdown,
+  DropdownLabelCache,
   DropdownOption,
   DropdownGroup,
   DropdownSearch,