@bitrise/bitkit 13.269.0 → 13.271.0

package/package.json

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

package/src/Components/Card/Card.theme.ts

@@ -9,11 +9,11 @@ const CardTheme = {
       _hover:
         as === 'a' || as === 'button' || withHover
           ? {
-              backgroundColor: 'neutral.95',
-              borderColor: 'neutral.90',
+              backgroundColor: 'border/on-contrast',
+              borderColor: 'border/regular',
             }
           : undefined,
-      backgroundColor: 'neutral.100',
+      backgroundColor: 'border/inverse',
       border: '1px solid',
       borderRadius: '8',
       display: 'block',
@@ -22,13 +22,17 @@ const CardTheme = {
   },
   variants: {
     elevated: {
-      borderColor: 'neutral.93',
+      borderColor: 'border/minimal',
       boxShadow: 'medium',
     },
     outline: {
-      borderColor: 'neutral.90',
+      borderColor: 'border/regular',
       boxShadow: 'none',
     },
+    minElevated: {
+      borderColor: 'border/minimal',
+      boxShadow: 'small',
+    },
   },
 };
 

package/src/Components/Card/Card.tsx

@@ -3,7 +3,7 @@ import Box, { BoxProps } from '../Box/Box';
 
 export interface CardProps extends BoxProps {
   href?: string;
-  variant?: 'elevated' | 'outline';
+  variant?: 'elevated' | 'outline' | 'minElevated';
   withHover?: boolean;
 }
 

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,