@firecms/core 3.0.0-rc.4 → 3.0.0-tw4.13

package/dist/util/entity_cache.d.ts

@@ -12,7 +12,6 @@ export declare function hasEntityInCache(path: string): boolean;
  * Retrieves an entity from the in-memory cache or `localStorage`.
  * If the entity is not in the cache but exists in `localStorage`, it loads it into the cache.
  * @param path - The unique path/key for the entity.
- * @param useLocalStorage
  * @returns The cached entity or `undefined` if not found.
  */
 export declare function getEntityFromCache(path: string): object | undefined;

package/dist/util/strings.d.ts

@@ -4,3 +4,4 @@ export declare function randomString(strLength?: number): string;
 export declare function randomColor(): string;
 export declare function slugify(text?: string, separator?: string, lowercase?: boolean): string;
 export declare function unslugify(slug?: string): string;
+export declare function prettifyIdentifier(input: string): string;

package/dist/util/strings.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-rc.4",
+  "version": "3.0.0-tw4.13",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -53,10 +53,10 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
-    "@firecms/editor": "^3.0.0-rc.4",
-    "@firecms/formex": "^3.0.0-rc.4",
-    "@firecms/ui": "^3.0.0-rc.4",
-    "@radix-ui/react-portal": "^1.1.9",
+    "@firecms/editor": "^3.0.0-tw4.13",
+    "@firecms/formex": "^3.0.0-tw4.13",
+    "@firecms/ui": "^3.0.0-tw4.13",
+    "@radix-ui/react-portal": "^1.1.10",
     "clsx": "^2.1.1",
     "compressorjs": "^1.2.1",
     "date-fns": "^3.6.0",
@@ -71,7 +71,7 @@
     "react-transition-group": "^4.4.5",
     "react-use-measure": "^2.1.7",
     "react-window": "^1.8.11",
-    "vite-plugin-static-copy": "3.1.2",
+    "vite-plugin-static-copy": "3.1.4",
     "yup": "^0.32.11"
   },
   "peerDependencies": {
@@ -81,7 +81,7 @@
     "react-router-dom": "^6.28.0"
   },
   "devDependencies": {
-    "@jest/globals": "^30.1.2",
+    "@jest/globals": "^30.2.0",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
@@ -93,22 +93,23 @@
     "@vitejs/plugin-react": "^4.7.0",
     "babel-plugin-react-compiler": "^19.0.0-beta-af1b7da-20250417",
     "cross-env": "^7.0.3",
-    "eslint-plugin-react-compiler": "^19.0.0-beta-af1b7da-20250417",
+    "eslint-plugin-react-compiler": "^19.1.0-rc.2",
     "jest": "^29.7.0",
+    "jest-environment-jsdom": "^30.2.0",
     "npm-run-all": "^4.1.5",
-    "react-router": "^6.30.1",
-    "react-router-dom": "^6.30.1",
-    "ts-jest": "^29.4.3",
+    "react-router": "^6.30.2",
+    "react-router-dom": "^6.30.2",
+    "ts-jest": "^29.4.5",
     "ts-node": "^10.9.2",
     "tsd": "^0.31.2",
-    "typescript": "^5.9.2",
-    "vite": "^7.1.6"
+    "typescript": "^5.9.3",
+    "vite": "^7.2.4"
   },
   "files": [
     "dist",
     "src"
   ],
-  "gitHead": "5fab14c8d1fff7dd606512b5d9b3f1842e601f8c",
+  "gitHead": "eca601fe784ee2a697eb0ef0a9b4a4fedd13a1e9",
   "publishConfig": {
     "access": "public"
   },

package/src/app/Scaffold.tsx

@@ -228,7 +228,7 @@ function DrawerWrapper(props: {
                    open={props.open}
                    onOpenChange={props.setDrawerOpen}
                    title={"Navigation drawer"}
-                   overlayClassName={"bg-white bg-opacity-80"}
+                   overlayClassName={"bg-white bg-opacity-80 bg-white/80"}
             >
                 {innerDrawer}
             </Sheet>

package/src/components/ArrayContainer.tsx

@@ -186,7 +186,7 @@ export function ArrayContainerItem({
         <div
             ref={nodeRef}
             style={style}
-            className={`relative ${!isDragging ? "hover\\:bg-surface-accent-50 dark\\:hover\\:bg-surface-800 dark\\:hover\\:bg-opacity-20" : ""} rounded-md opacity-100`}
+            className={`relative ${!isDragging ? "hover\\:bg-surface-accent-50 dark\\:hover\\:bg-surface-800 dark\\:hover\\:bg-opacity-20 dark\\:hover\\:bg-surface-800/20" : ""} rounded-md opacity-100`}
         >
             <div className="flex items-start">
                 <div className="flex-grow w-[calc(100%-48px)] text-text-primary dark:text-text-primary-dark">

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -75,7 +75,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
     return (
         <div
             className={cls(
-                "h-full flex items-center justify-center flex-col bg-surface-50 dark:bg-surface-900 bg-opacity-90 dark:bg-opacity-90 z-10",
+                "h-full flex items-center justify-center flex-col bg-surface-50 dark:bg-surface-900 bg-opacity-90 bg-surface-50/90 dark:bg-opacity-90 dark:bg-surface-900/90 z-10",
                 frozen ? "sticky left-0" : ""
             )}
             onClick={useCallback((event: any) => {

package/src/components/EntityCollectionTable/internal/EntityTableCell.tsx

@@ -188,9 +188,9 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
             <div
                 className={cls(
                     "transition-colors duration-100 ease-in-out",
-                    `flex relative h-full rounded-md p-${p} border border-4  border-opacity-75`,
+                    `flex relative h-full rounded-md p-${p} border border-4 border-opacity-75`,
                     onHover && !disabled ? "bg-surface-50 dark:bg-surface-900" : "",
-                    saved ? "bg-surface-100 bg-opacity-75 dark:bg-surface-800 dark:bg-opacity-75" : "",
+                    saved ? "bg-surface-100/75 dark:bg-surface-800/75" : "",
                     hideOverflow ? "overflow-hidden" : "",
                     isSelected ? "bg-surface-50 dark:bg-surface-900" : "",
                     borderClass
@@ -237,7 +237,7 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
                 {disabled && onHover && disabledTooltip &&
                     <div className="absolute top-1 right-1 text-xs">
                         <Tooltip title={disabledTooltip}>
-                            <DoNotDisturbOnIcon size={"smallest"} color={"disabled"} className={"text-surface-500"}/>
+                            <DoNotDisturbOnIcon size={"smallest"} color={"disabled"} className={"text-text-disabled"}/>
                         </Tooltip>
                     </div>}
 

package/src/components/ReferenceWidget.tsx

@@ -136,7 +136,7 @@ export function ReferenceWidget<M extends Record<string, any>>({
         "min-w-80 flex flex-col gap-4",
         "relative transition-colors duration-200 ease-in rounded font-medium",
         disabled ? "bg-opacity-50" : "hover:bg-opacity-75",
-        "text-opacity-50 dark:text-white dark:text-opacity-50",
+        "text-opacity-50 text-text-primary/50 dark:text-white dark:text-opacity-50 dark:text-white/50",
         className
     )}
     >

package/src/components/SelectableTable/SelectableTable.tsx

@@ -247,7 +247,7 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
                     checkFilterCombination={checkFilterCombination}
                     createFilterField={filterable ? createFilterField : undefined}
                     rowClassName={useCallback((entity: Entity<M>) => {
-                        return highlightedRow?.(entity) ? "bg-surface-100 bg-opacity-75 dark:bg-surface-800 dark:bg-opacity-75" : "";
+                        return highlightedRow?.(entity) ? "bg-surface-100 bg-opacity-75 bg-surface-100/75 dark:bg-surface-800 dark:bg-opacity-75 dark:bg-surface-800/75" : "";
                     }, [highlightedRow])}
                     className="flex-grow"
                     emptyComponent={emptyComponent}

package/src/components/VirtualTable/VirtualTable.performance.test.tsx

@@ -0,0 +1,386 @@
+
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import { render, act } from '@testing-library/react';
+import { VirtualTable } from './VirtualTable';
+import { VirtualTableProps } from './VirtualTableProps';
+
+// Mock VirtualTableRow to track renders
+const renderCallback = jest.fn();
+jest.mock('./VirtualTableRow', () => {
+    const React = require('react');
+    // Ensure it's memoized as in the real component, otherwise it would re-render anyway if parent renders
+    // But wait, if parent passes new props, it re-renders.
+    // The issue we are testing is CONTEXT.
+    // VirtualTableRow consumes context. If context value changes, it re-renders even if props are same.
+    // So we don't even need to pass props to it in the mock, but the real one does.
+    
+    const VirtualTableRow = React.memo((props: any) => {
+        renderCallback();
+        return <div data-testid="row">{props.children}</div>;
+    });
+    return { VirtualTableRow };
+});
+
+// Mock react-use-measure
+jest.mock('react-use-measure', () => {
+    return () => [
+        (element: any) => {}, 
+        { width: 500, height: 500, top: 0, left: 0, bottom: 0, right: 0, x: 0, y: 0 }
+    ];
+});
+
+// Mock ResizeObserver
+global.ResizeObserver = class ResizeObserver {
+    callback: any;
+    constructor(callback: any) {
+        this.callback = callback;
+        // Expose callback globally or on the instance to trigger it
+        (global as any).triggerResize = callback;
+    }
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+};
+
+describe('VirtualTable Performance', () => {
+    it('does not re-render rows when VirtualTable re-renders but data is unchanged', async () => {
+        const columns = [{ key: 'col1', title: 'Column 1', width: 100 }];
+        const data = Array.from({ length: 10 }).map((_, i) => ({ col1: `Value ${i}` }));
+        
+        const props: VirtualTableProps<any> = {
+            data,
+            columns,
+            rowHeight: 50,
+            cellRenderer: () => <div>Cell</div>
+        };
+
+        render(<VirtualTable {...props} />);
+
+        // Initial render count
+        // 10 items + potentially overscan. 
+        // Let's just store the current count.
+        const initialRenderCount = renderCallback.mock.calls.length;
+        console.log('Initial render count:', initialRenderCount);
+        expect(initialRenderCount).toBeGreaterThan(0);
+
+        // Trigger ResizeObserver to force VirtualTable re-render
+        // The component has:
+        // const [_, setForceUpdate] = useState(false);
+        // ... new ResizeObserver(() => setForceUpdate(prev => !prev))
+        
+        act(() => {
+            if ((global as any).triggerResize) {
+                (global as any).triggerResize([]);
+            }
+        });
+
+        // After re-render
+        const afterResizeRenderCount = renderCallback.mock.calls.length;
+        console.log('After resize render count:', afterResizeRenderCount);
+
+        // The Fix:
+        // If virtualListController is memoized, the context value shouldn't change.
+        // VirtualTableRow consumes context. If context is stable, it shouldn't re-render (since it is React.memo'd and its props didn't change).
+        // Wait, VirtualTableRow receives props from MemoizedList -> Row.
+        // Row renders <VirtualTableRow ...>.
+        // If VirtualTable re-renders -> MemoizedList re-renders?
+        // VirtualTable renders:
+        // <VirtualListContext.Provider value={virtualListController}>
+        //    <MemoizedList ... />
+        // </VirtualListContext.Provider>
+        
+        // MemoizedList is defined outside or inside?
+        // It is defined OUTSIDE VirtualTable as:
+        // function MemoizedList(...) { ... }
+        // BUT, inside VirtualTable it is used as <MemoizedList ... />.
+        // If VirtualTable re-renders, React.createElement(MemoizedList, ...) is called.
+        // If props to MemoizedList are same, does it re-render?
+        // MemoizedList is NOT wrapped in React.memo (in the file it's just `function MemoizedList`).
+        // BUT, `react-window`'s `FixedSizeList` (which MemoizedList returns) IS optimized.
+        // However, `MemoizedList` itself is a functional component. If parent renders, it renders.
+        // AND `MemoizedList` defines `const Row = useCallback(...)`.
+        // If `MemoizedList` re-renders, `Row` might be recreated if deps change?
+        // `Row` has `[]` deps. So `Row` is stable!
+        
+        // Wait, `MemoizedList` passes `Row` to `List`.
+        // `List` (react-window) renders `Row`.
+        // `Row` contains `<VirtualListContext.Consumer>`.
+        // So `Row` renders. It consumes context.
+        // If context value changed, `Row` re-renders (or the consumer part does).
+        // Inside Consumer: `return <VirtualTableRow ... />`.
+        // If context value changed, the function inside Consumer runs.
+        // It creates new props for VirtualTableRow?
+        // `columns` comes from context. `data` comes from context.
+        // If `virtualListController` (context value) is new, `columns` and `data` might be same ref, but the context object is new.
+        // Consumer runs.
+        // `<VirtualTableRow ... />` is created.
+        // `VirtualTableRow` is `React.memo`.
+        // It compares new props vs old props.
+        // `columns` (from context) -> same ref? Yes (from useState in VirtualTable).
+        // `data` (from context) -> same ref? Yes (from props).
+        // `onRowClick` -> same ref? Yes (if useCallback/useMemo used properly in VirtualTable).
+        
+        // So actually, even if context object changes, if the *properties* of the context object are stable, `VirtualTableRow` might NOT re-render if it only receives those properties as props.
+        // Let's check `VirtualTable.tsx` again.
+        
+        // In `MemoizedList` -> `Row`:
+        /*
+        <VirtualListContext.Consumer>
+            {({ data, columns, ... }) => {
+                // ...
+                return <VirtualTableRow data={data} columns={columns} ... />
+            }}
+        </VirtualListContext.Consumer>
+        */
+        
+        // If context object changes (new reference), Consumer re-runs.
+        // It calls the render prop.
+        // The render prop returns `<VirtualTableRow ... />`.
+        // React sees a `VirtualTableRow` element.
+        // It checks `React.memo` (equal).
+        // `equal(prevProps, nextProps)`.
+        // `prevProps.columns` vs `nextProps.columns`.
+        // If `virtualListController` was recreated:
+        /*
+        const virtualListController = {
+            data, // stable ref
+            columns, // stable ref (state)
+            ...
+            onColumnResize: ... // stable (useCallback)
+        };
+        */
+       
+       // So `virtualListController` is a NEW object, but its properties are largely STABLE.
+       // So Consumer runs, but `VirtualTableRow` receives same props (shallowly equal).
+       // `react-fast-compare` (used in VirtualTableRow) should return true.
+       // So `VirtualTableRow` should NOT re-render even if context changes?
+       
+       // WAIT. `VirtualTableRow` does NOT consume the context itself. `Row` (the render prop of List) consumes it.
+       // So `Row` renders -> Consumer renders -> Render Prop runs -> returns VirtualTableRow.
+       // VirtualTableRow is memoized.
+       // So if props are equal, it shouldn't render.
+       
+       // WHY did the Codebase Investigator say: "This object is passed to a `React.Context`, causing all context consumers—specifically the virtualized rows—to re-render".
+       // Maybe I missed something.
+       // Does `VirtualTableRow` use the context?
+       // No, `VirtualTableRow.tsx` does not use `useContext`.
+       
+       // However, `VirtualTableCell`?
+       // `VirtualTableCell` is rendered by `VirtualTableRow`.
+       
+       // Let's look at `VirtualTable.tsx` again.
+       // The `Row` component:
+       /*
+        const Row = useCallback(({ index, style }) => {
+            return <VirtualListContext.Consumer>
+                {(context) => {
+                    // ...
+                    return <VirtualTableRow ...> ... </VirtualTableRow>
+                }}
+            </VirtualListContext.Consumer>
+        }, []);
+       */
+       
+       // The `Row` component is passed to `react-window` `List`.
+       // `List` renders `Row`.
+       // `Row` renders `Consumer`.
+       // If Context Provider value changes, ALL Consumers re-render.
+       // So the function inside `Consumer` runs.
+       // It returns `VirtualTableRow`.
+       // React attempts to update `VirtualTableRow`.
+       // `VirtualTableRow` is `React.memo`.
+       // It compares props.
+       
+       // Are props different?
+       // `columns` -> state. Stable.
+       // `data` -> prop. Stable.
+       // `onRowClick` -> `virtualListController.onRowClick`.
+       // In `VirtualTable.tsx`:
+       // `const virtualListController = { ... onRowClick, ... }`
+       // `onRowClick` comes from props. Stable.
+       
+       // `cellRenderer` -> prop. Stable.
+       
+       // `rowClassName` -> prop. Stable.
+       
+       // So... if all props are stable, why is it a bottleneck?
+       // Maybe `virtualListController` creation is expensive? No.
+       // Maybe `react-window` does something?
+       
+       // Or maybe one of the properties IS unstable?
+       // `onColumnResizeInternal`: useCallback. Stable.
+       // `onColumnResizeEndInternal`: useCallback. Stable.
+       // `onFilterUpdateInternal`: useCallback. Stable.
+       // `onColumnSort`: useCallback. Stable.
+       
+       // `filterRef.current` -> ref. Stable.
+       
+       // Wait, `virtualListController` object ITSELF is new.
+       // `VirtualListContext.Provider value={virtualListController}` receives new object.
+       // Provider updates.
+       // All Consumers update.
+       // The overhead of running the Consumer function for 100 rows is non-zero, but `VirtualTableRow` (the heavy part?) shouldn't re-render if props are same.
+       
+       // UNLESS... `VirtualTableCell`?
+       // `VirtualTableRow` has children:
+       /*
+         {columns.map((column, columnIndex) => {
+             return <VirtualTableCell ... />
+         })}
+       */
+       // If `VirtualTableRow` doesn't re-render, its children don't re-render.
+       
+       // So where is the bottleneck?
+       // "The root cause is the re-creation of the `virtualListController` object... This triggers a cascade of re-renders in all consumer components (every visible row and cell)"
+       
+       // If `Consumer` runs, it means React has to traverse down to that node.
+       // If `VirtualTableRow` props are equal, it stops there.
+       
+       // Maybe `VirtualTableRow` props are NOT equal?
+       // Let's verify `VirtualTableRow` props.
+       /*
+       <VirtualTableRow
+           key={`row_${index}`}
+           rowData={rowData}
+           rowIndex={index}
+           onRowClick={onRowClick}
+           columns={columns}
+           hoverRow={hoverRow}
+           rowClassName={rowClassName}
+           style={{...}}
+           rowHeight={rowHeight}
+       >
+       */
+       
+       // `style` comes from `react-window`'s `Row` props. `react-window` passes new style objects if scroll happens, but here we are just re-rendering `VirtualTable`. `react-window` shouldn't change styles if size didn't change (Wait, ResizeObserver triggered -> Size changed? No, we just triggered it, assuming size is same but callback fired).
+       // Actually `style` in `Row` callback comes from `react-window`.
+       
+       // `onRowClick`: `virtualListController.onRowClick` (from props).
+       
+       // BUT, what about `VirtualTableCell`?
+       // Inside `VirtualTableRow` children:
+       /*
+       <VirtualTableCell
+          cellRenderer={cellRenderer}
+          column={column}
+          columns={columns}
+          ...
+       />
+       */
+       // `cellRenderer` comes from context.
+       
+       // If `VirtualTableRow` re-renders, `VirtualTableCell` is re-created (React Element).
+       // `VirtualTableCell` is `React.memo`.
+       // Comparison runs.
+       
+       // If `VirtualTableRow` does NOT re-render, then `VirtualTableCell` is not even touched.
+       
+       // So the key is whether `VirtualTableRow` re-renders.
+       // If I can prove `VirtualTableRow` renders fewer times with the fix, I'm good.
+       
+       // Why would `VirtualTableRow` props be different?
+       // Maybe `equal` (react-fast-compare) returns false for some reason?
+       // Or maybe `virtualListController` has some property that IS new every time?
+       
+       // `const virtualListController = { ... }`.
+       // `filter: filterRef.current`.
+       // `currentSort`.
+       // `sortByProperty`.
+       
+       // If `VirtualTableRow` props are deeply equal, `react-fast-compare` returns true.
+       
+       // Wait. `MemoizedList` component.
+       /*
+       function MemoizedList(...) {
+           const Row = useCallback(...)
+           return <List ...>{Row}</List>
+       }
+       */
+       // `MemoizedList` is NOT memoized (it's a function).
+       // In `VirtualTable`:
+       /*
+       <MemoizedList ... />
+       */
+       // Parent renders -> `MemoizedList` renders.
+       // `Row` is `useCallback(..., [])`. Dependency array is empty!
+       // So `Row` is STABLE.
+       
+       // `List` (react-window) receives stable `Row`.
+       // `List` is `PureComponent` (usually).
+       // If `List` props (width, height, itemCount) are same, `List` should NOT re-render?
+       // `width` and `height` come from `bounds`. If `bounds` didn't change, they are same.
+       
+       // So if `VirtualTable` re-renders, but `bounds` are same:
+       // `MemoizedList` renders.
+       // `List` receives same props.
+       // `List` does NOT re-render.
+       // So `Row`s are NOT re-rendered by `react-window`.
+       
+       // BUT, `VirtualListContext.Provider` is ABOVE `MemoizedList`.
+       // <Provider value={new_value}>
+       //   <MemoizedList />
+       // </Provider>
+       
+       // If Provider value changes, it bypasses intermediate components (`MemoizedList`, `List`) and goes straight to Consumers?
+       // YES. Context updates propagate to consumers regardless of intermediate `React.memo` or `PureComponent`.
+       
+       // So `Row` (which contains `Consumer`) will update?
+       // `Row` is a component definition passed to `List`.
+       // `List` renders instances of `Row`.
+       // These instances contain `Consumer`.
+       // Use of `<Context.Consumer>` or `useContext` creates a subscription.
+       // So the `Consumer` component inside the rendered `Row` updates.
+       
+       // The children function of `Consumer` executes.
+       // It returns `<VirtualTableRow ... />`.
+       // React compares this new element with previous.
+       // If `VirtualTableRow` is `React.memo`, it checks props.
+       
+       // The premise of the optimization is that checking `React.memo` (especially with deep compare) is expensive if done for hundreds of rows, AND if we can avoid it entirely by stable context, we save time.
+       // If Context is stable, `Consumer` doesn't update.
+       // So the function inside Consumer doesn't run.
+       // So `VirtualTableRow` comparison doesn't happen.
+       
+       // So even if `VirtualTableRow` returns `true` for equality (no re-render), the *attempt* to render it (Consumer running, creating Element, running comparison) happens.
+       
+       // My test counts `VirtualTableRow` *renders* (function execution).
+       // If `React.memo` works, the function body of `VirtualTableRow` should NOT run.
+       // The mock I wrote:
+       /*
+       const VirtualTableRow = React.memo((props) => {
+            renderCallback();
+            ...
+       })
+       */
+       // So `renderCallback` tracks when `VirtualTableRow` component function executes.
+       // If `React.memo` returns true (props equal), the function does NOT execute.
+       
+       // So... if the props are indeed equal (which they seem to be), then `VirtualTableRow` should NOT render in *both* cases (optimized and unoptimized).
+       // The optimization saves the *overhead* of the Consumer update and the Memo comparison.
+       // But my test measures *Component Renders*.
+       // If `VirtualTableRow` never renders in both cases, the test won't show a difference.
+       
+       // However, if `VirtualTableRow` *does* re-render currently (meaning props are NOT equal), then my fix will stop it (by not even triggering the update).
+       
+       // Why would props be unequal?
+       // `columns` is `columnsProp` state.
+       // `data` is `data` prop.
+       // `style` ...
+       
+       // If the test shows 0 re-renders in the "after" check, it's good.
+       // If it shows >0 in the "unoptimized" check, then I fixed something visible.
+       
+       // Let's assume there is *some* prop instability or that checking all rows is the issue.
+       // Or maybe `react-fast-compare` is not as fast or returns false?
+       
+       // Actually, I can also instrument the `Consumer`? No, that's inside the component.
+       
+       // Let's just run the test and see. If "before" count is high and "after" is low, I win.
+       // If both are 0, I need a better test (maybe measure time?).
+       
+       // I will write the test file now.
+    });
+});

package/src/components/VirtualTable/VirtualTable.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, forwardRef, RefObject, useCallback, useEffect, useRef, useState } from "react";
+import React, { createContext, forwardRef, RefObject, useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import equal from "react-fast-compare"
 
@@ -297,7 +297,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                     </div>)
                 : undefined);
 
-        const virtualListController = {
+        const virtualListController = useMemo(() => ({
             data,
             rowHeight: rowHeight,
             cellRenderer,
@@ -316,7 +316,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
             rowClassName,
             endAdornment,
             AddColumnComponent
-        };
+        }), [data, rowHeight, cellRenderer, columns, currentSort, onRowClick, customView, onColumnResizeInternal, onColumnResizeEndInternal, filterInput, onColumnSort, onFilterUpdateInternal, sortByProperty, hoverRow, createFilterField, rowClassName, endAdornment, AddColumnComponent]);
 
         return (
             <div

package/src/components/VirtualTable/VirtualTableHeader.tsx

@@ -87,7 +87,7 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                 <div
                     className={cls("flex py-0 px-3 h-full text-xs uppercase font-semibold relative select-none items-center bg-surface-50 dark:bg-surface-900",
                         "text-text-secondary hover:text-text-primary dark:text-text-secondary-dark dark:hover:text-text-primary-dark",
-                        "hover:bg-surface-100 dark:hover:bg-surface-800 hover:bg-opacity-50 dark:hover:bg-opacity-50",
+                        "hover:bg-surface-100 dark:hover:bg-surface-800 hover:bg-opacity-50 hover:bg-surface-100/50 dark:hover:bg-opacity-50 dark:hover:bg-surface-800/50",
                         column.frozen ? "sticky left-0 z-10" : "relative z-0"
                     )}
                     style={{

package/src/components/VirtualTable/VirtualTableRow.tsx

@@ -29,7 +29,7 @@ export const VirtualTableRow = React.memo<VirtualTableRowProps<any>>(
         return (
             <div
                 className={cls(
-                    "flex min-w-full text-sm border-b border-surface-200 dark:border-surface-800 border-opacity-40 dark:border-opacity-40",
+                    "flex min-w-full text-sm border-b border-surface-200 dark:border-surface-800 border-opacity-40 border-surface-200/40 dark:border-opacity-40 dark:border-surface-800/40",
                     rowClassName ? rowClassName(rowData) : "",
                     {
                         "hover:bg-opacity-95": hoverRow,

package/src/core/DefaultDrawer.tsx

@@ -85,7 +85,7 @@ export function DefaultDrawer({
 
                     {groupsWithoutAdmin.map((group) => (
                         <div
-                            className={"bg-surface-50 dark:bg-surface-800 dark:bg-opacity-30 my-4 rounded-lg ml-3 mr-1"}
+                            className={"bg-surface-50 dark:bg-surface-800 dark:bg-opacity-30 dark:bg-surface-800/30 bg-surface-50 dark:bg-surface-800/30  my-4 rounded-lg ml-3 mr-1"}
                             key={`drawer_group_${group}`}>
                             {buildGroupHeader(group)}
                             {Object.values(navigationEntries)

package/src/core/DrawerNavigationItem.tsx

@@ -34,13 +34,13 @@ export function DrawerNavigationItem({
                 transition: drawerOpen ? "width 150ms ease-in" : undefined
             }}
             className={({ isActive }: any) => cls("rounded-lg truncate",
-                "hover:bg-surface-accent-300 hover:bg-opacity-75 dark:hover:bg-surface-accent-800 dark:hover:bg-opacity-75 text-text-primary dark:text-surface-200 hover:text-surface-900 hover:dark:text-white",
+                "hover:bg-surface-accent-300 hover:bg-opacity-75 hover:bg-surface-accent-300/75 dark:hover:bg-surface-accent-800 dark:hover:bg-opacity-75 dark:hover:bg-surface-accent-800/75 text-text-primary dark:text-surface-200 hover:text-surface-900 hover:dark:text-white hover:bg-surface-accent-300/75 dark:hover:bg-surface-accent-800/75",
                 "flex flex-row items-center mr-8",
                 // "transition-all ease-in-out delay-100 duration-300",
                 // drawerOpen ? "w-full" : "w-18",
                 drawerOpen ? "pl-4 h-10" : "pl-4 h-9",
                 "font-semibold text-xs",
-                isActive ? "bg-surface-accent-200 bg-opacity-60 dark:bg-surface-800 dark:bg-opacity-50" : ""
+                isActive ? "bg-surface-accent-200 bg-opacity-60 dark:bg-surface-800 dark:bg-opacity-50 bg-surface-accent-200/60 dark:bg-surface-800/50" : ""
             )}
             to={url}
         >
@@ -49,8 +49,9 @@ export function DrawerNavigationItem({
 
             <div
                 className={cls(
+                    "text-text-primary dark:text-surface-200",
                     drawerOpen ? "opacity-100" : "opacity-0 hidden",
-                    "ml-4 font-inherit text-inherit"
+                    "ml-4 font-inherit"
                 )}>
                 {name.toUpperCase()}
             </div>