@bitrise/bitkit 13.274.0 → 13.276.0

package/package.json

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

package/src/Components/Dropdown/Dropdown.tsx

@@ -146,7 +146,10 @@ function findOption<T>(
   return null;
 }
 
-const DropdownLabelCacheContext = createContext<Map<unknown, ReactNode> | null>(null);
+const DropdownLabelCacheContext = createContext<{
+  map: Map<unknown, ReactNode>;
+  fallback?: (value: unknown) => ReactNode;
+} | null>(null);
 
 const useLabelCache = () => {
   const contextCache = useContext(DropdownLabelCacheContext);
@@ -157,11 +160,18 @@ const useLabelCache = () => {
   if (!localCache.current) {
     localCache.current = new Map();
   }
-  return localCache.current;
+  return { map: localCache.current };
 };
 
-export const DropdownLabelCache = ({ children }: { children: ReactNode }) => {
-  const value = useMemo(() => new Map(), []);
+export const DropdownLabelCache = ({
+  children,
+  fallback,
+}: {
+  children: ReactNode;
+  fallback?: (value: unknown) => ReactNode;
+}) => {
+  const map = useMemo(() => new Map<unknown, ReactNode>(), []);
+  const value = useMemo(() => ({ map, fallback }), [map, fallback]);
 
   return <DropdownLabelCacheContext.Provider value={value}>{children}</DropdownLabelCacheContext.Provider>;
 };
@@ -228,7 +238,7 @@ function useDropdown<T>({
     onSearch: () => setActiveIndex(null),
   });
 
-  const labelCache = useLabelCache();
+  const { map: labelCache, fallback } = useLabelCache();
 
   // clear map when value is changed from the outside
   useEffect(() => {
@@ -330,7 +340,7 @@ function useDropdown<T>({
                       }}
                       size="sm"
                     >
-                      {labelCache.get(formValueItem) || formValueItem}
+                      {labelCache.get(formValueItem) || fallback?.(formValueItem) || formValueItem}
                     </Tag>
                   );
                 })}

package/src/Components/Table/CheckableRow.tsx

@@ -8,6 +8,7 @@ import Tr, { RowProps } from './Tr';
 export interface CheckableRowProps extends RowProps {
   id: string;
   isDisabled?: boolean;
+  isReversed?: boolean;
   label: ReactNode;
   name: string;
   tooltipProps?: Omit<TooltipProps, 'children' | 'shouldWrapChildren'>;
@@ -15,7 +16,7 @@ export interface CheckableRowProps extends RowProps {
 }
 
 const CheckableRow = (props: CheckableRowProps) => {
-  const { children, id, isDisabled, label, name, tooltipProps, value, ...rest } = props;
+  const { children, id, isDisabled, isReversed, label, name, tooltipProps, value, ...rest } = props;
 
   return (
     <Tooltip isDisabled={!tooltipProps} placement="right" {...tooltipProps}>
@@ -35,15 +36,22 @@ const CheckableRow = (props: CheckableRowProps) => {
         transform="scale(1)"
         {...rest}
       >
-        <Td>
-          <Checkbox id={id} isDisabled={isDisabled} name={name} value={value} zIndex="1" />
-        </Td>
+        {!isReversed && (
+          <Td>
+            <Checkbox id={id} isDisabled={isDisabled} name={name} value={value} zIndex="1" />
+          </Td>
+        )}
         <Td>
           <LinkOverlay as="label" cursor={isDisabled ? 'not-allowed' : 'pointer'} htmlFor={id}>
             {label}
           </LinkOverlay>
         </Td>
         {children}
+        {!!isReversed && (
+          <Td textAlign="right">
+            <Checkbox id={id} isDisabled={isDisabled} name={name} value={value} zIndex="1" />
+          </Td>
+        )}
       </LinkBox>
     </Tooltip>
   );