@ornery/ui-grid-react 0.1.10 → 1.0.0

package/src/gridStateMath.test.ts

@@ -28,7 +28,7 @@ describe('gridStateMath', () => {
   it('builds grid template columns deterministically', () => {
     expect(
       buildGridTemplateColumns(orderVisibleColumns(columns, ['status', 'revenue', 'customer'])),
-    ).toBe('2fr 120px minmax(11rem, max-content)');
+    ).toBe('2fr 120px minmax(11rem, 1fr)');
   });
 
   it('resolves benchmark iterations with a minimum of one', () => {
@@ -43,9 +43,9 @@ describe('gridStateMath', () => {
   });
 
   it('computes viewport height and viewport rows', () => {
-    expect(computeViewportHeightPx(undefined, undefined)).toBe('560px');
+    expect(computeViewportHeightPx(undefined, undefined)).toBe('440px');
     expect(computeViewportHeightPx(620, 480)).toBe('620px');
-    expect(computeViewportRows(undefined, undefined)).toBe(13);
+    expect(computeViewportRows(undefined, undefined)).toBe(10);
     expect(computeViewportRows(220, 44)).toBe(5);
   });
 });

package/src/gridStateMath.ts

@@ -34,12 +34,15 @@ export function formatPaginationSummary(
 }
 
 export function computeViewportHeightPx(
-  viewportHeight?: number,
   autoViewportHeight?: number | null,
+  minRowsToShow?: number,
+  rowHeight?: number,
 ): string {
-  return `${viewportHeight ?? autoViewportHeight ?? 560}px`;
+  const fallback = (minRowsToShow ?? 10) * (rowHeight ?? 44);
+  return `${autoViewportHeight ?? fallback}px`;
 }
 
-export function computeViewportRows(viewportHeight?: number, rowHeight?: number): number {
-  return Math.max(1, Math.ceil((viewportHeight ?? 560) / (rowHeight ?? 44)));
+export function computeViewportRows(autoViewportHeight?: number | null, rowHeight?: number, minRowsToShow?: number): number {
+  const height = autoViewportHeight ?? (minRowsToShow ?? 10) * (rowHeight ?? 44);
+  return Math.max(1, Math.ceil(height / (rowHeight ?? 44)));
 }

package/src/index.ts

@@ -1,27 +1,11 @@
 export { UiGrid } from './UiGrid';
-export type { UiGridProps } from './UiGrid';
-export { mountUiGrid, updateUiGrid, styledCell } from './mountUiGrid';
+export type { UiGridProps, UiGridCellRenderers } from './UiGrid';
+export { mountUiGrid, updateUiGrid, styledCell, datePickerCell } from './mountUiGrid';
 export {
   mountUiGridCustomElement,
   type MountUiGridCustomElementOptions,
   type MountedUiGridCustomElement,
 } from './vanillaAdapter';
-export { useGridState } from './useGridState';
-export type { UseGridStateResult } from './useGridState';
-export { useVirtualScroll } from './useVirtualScroll';
-export type { UseVirtualScrollOptions, UseVirtualScrollResult } from './useVirtualScroll';
-export {
-  orderVisibleColumns,
-  buildGridTemplateColumns,
-  resolveBenchmarkIterations,
-  formatPaginationSummary,
-  computeViewportHeightPx,
-  computeViewportRows,
-} from './gridStateMath';
-export {
-  enableReactUiGridWasmEngine,
-  registerReactUiGridWasmEngineFromModule,
-} from './rustWasmGridEngine';
 
 export type {
   GridOptions,

package/src/mountUiGrid.tsx

@@ -25,4 +25,30 @@ export function styledCell(
     { style: { color, fontVariantNumeric: 'tabular-nums', ...extraStyle } },
     text,
   );
+}
+
+/** Create a date <input> React node — usable from non-TSX contexts. */
+export function datePickerCell(
+  value: string,
+  onChange?: (newValue: string) => void,
+  extraStyle?: React.CSSProperties,
+): React.ReactNode {
+  return React.createElement('input', {
+    type: 'date',
+    value: value || '',
+    onChange: onChange
+      ? (e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)
+      : undefined,
+    style: {
+      font: 'inherit',
+      fontSize: '0.85rem',
+      border: '1px solid color-mix(in srgb, currentColor 20%, transparent)',
+      borderRadius: '6px',
+      padding: '0.2rem 0.4rem',
+      background: 'var(--ui-grid-surface, white)',
+      color: 'inherit',
+      cursor: 'pointer',
+      ...extraStyle,
+    },
+  });
 }

package/src/test-setup.ts

@@ -0,0 +1,13 @@
+if (typeof ShadowRoot !== 'undefined') {
+  const proto = ShadowRoot.prototype as unknown as Record<string, unknown>;
+  if (!('adoptedStyleSheets' in proto)) {
+    Object.defineProperty(proto, 'adoptedStyleSheets', {
+      get() {
+        return (this as unknown as Record<string, unknown>)['_adoptedStyleSheets'] ?? [];
+      },
+      set(sheets: CSSStyleSheet[]) {
+        (this as unknown as Record<string, unknown>)['_adoptedStyleSheets'] = sheets;
+      },
+    });
+  }
+}

package/src/ui-grid.css

@@ -279,37 +279,70 @@
   color: var(--ui-grid-muted-color);
 }
 
+/*
+ * Grid table layout. Header + filter rows live in their own
+ * non-user-scrollable strips (real scroll containers so `position: sticky`
+ * on pinned cells anchors correctly); the body has its own viewport with
+ * visible scrollbars. Horizontal scroll on the body is mirrored onto the
+ * strips imperatively via React's onScroll/onWheel handlers so the columns
+ * always stay aligned.
+ */
 .grid-table {
-  display: grid;
+  position: relative;
+  display: flex;
+  flex-direction: column;
   min-height: 0;
   width: 100%;
   min-width: 0;
-  overflow-x: auto;
-  overflow-y: hidden;
+  overflow-anchor: none;
 }
 
-.header-grid,
-.filter-grid,
-.body-grid {
-  display: grid;
-  width: max-content;
-  min-width: 100%;
-}
-
-.header-grid,
-.filter-grid {
+.grid-header-strip,
+.grid-filter-strip {
+  flex: 0 0 auto;
   position: sticky;
   z-index: 3;
+  background: var(--ui-grid-surface);
+  /* Real scroll container so pinned sticky cells anchor to something,
+   * but we don't want the user scrolling it directly. JS drives the
+   * scrollLeft, the wheel handler forwards gestures to the body, and
+   * the scrollbar is hidden. */
+  overflow-x: scroll;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  touch-action: pan-y;
+  overscroll-behavior-x: none;
+}
+
+.grid-header-strip::-webkit-scrollbar,
+.grid-filter-strip::-webkit-scrollbar {
+  display: none;
 }
 
-.header-grid {
+.grid-header-strip {
   top: 0;
 }
 
-.filter-grid {
+.grid-filter-strip {
   top: var(--ui-grid-header-sticky-top, 0px);
 }
 
+.grid-body-viewport {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-x: auto;
+  overflow-anchor: none;
+  overscroll-behavior-x: none;
+}
+
+.header-grid,
+.filter-grid,
+.body-grid {
+  display: grid;
+  width: max-content;
+  min-width: 100%;
+}
+
 .header-cell,
 .filter-cell,
 .body-cell,

package/src/useGridState.ts

@@ -1183,9 +1183,9 @@ export function useGridState(
 
   // --- Auto resize effect ---
 
-  // Auto-resize is on by default so the grid fills its container. Setting an
-  // explicit `viewportHeight` opts back into fixed sizing because the observer
-  // only writes `autoViewportHeight` when `viewportHeight` is unset.
+  // Auto-resize is on by default so the grid fills its container. The
+  // ResizeObserver measures the host element and writes `autoViewportHeight`
+  // so the grid always fills available space (matching the old ui-grid).
   useEffect(() => {
     if (!FEATURE_AUTO_RESIZE) return;
 
@@ -1206,14 +1206,14 @@ export function useGridState(
       lastGridHeightRef.current = nextHeight;
       lastGridWidthRef.current = nextWidth;
 
-      if (!options.viewportHeight && nextHeight > 0) {
+      if (nextHeight > 0) {
         setAutoViewportHeight(nextHeight);
       }
     });
 
     if (!observer) return;
     return () => observer.disconnect();
-  }, [options.enableAutoResize, options.viewportHeight, gridApi]);
+  }, [options.enableAutoResize, gridApi]);
 
   // --- Computed values ---
 
@@ -1225,7 +1225,7 @@ export function useGridState(
   const paginationCurrentPage = getCurrentPageValueFn();
   const paginationTotalPages = getTotalPagesValueFn();
   const paginationSelectedPageSize = effectivePageSizeFn(pipeline.totalItems);
-  const viewportHeightPx = computeViewportHeightPx(options.viewportHeight, autoViewportHeight);
+  const viewportHeightPx = computeViewportHeightPx(autoViewportHeight, options.minRowsToShow, options.rowHeight);
 
   // --- Display helper functions ---
 
@@ -1770,8 +1770,9 @@ export function useGridState(
       startIndex,
       visibleRows: pipelineRef.current.visibleRows.length,
       viewportRows: computeViewportRows(
-        optionsRef.current.viewportHeight,
+        autoViewportHeight,
         optionsRef.current.rowHeight,
+        optionsRef.current.minRowsToShow,
       ),
       threshold: optionsRef.current.infiniteScrollRowsFromEnd ?? 20,
       setState: (state) => setInfiniteScrollState(state),

package/tsconfig.dts.json

@@ -7,9 +7,10 @@
     "outDir": "./dist",
     "rootDir": "./src",
     "paths": {
-      "@ornery/ui-grid-core": ["../ui-grid-core/dist/index.d.ts"]
+      "@ornery/ui-grid-core": ["../ui-grid-core/dist/index.d.ts"],
+      "@ornery/ui-grid-vanilla": ["../ui-grid-vanilla/dist/index.d.ts"]
     }
   },
   "include": ["src/**/*.ts", "src/**/*.tsx"],
-  "exclude": ["src/**/*.test.ts", "src/**/*.test.tsx"]
+  "exclude": ["src/**/*.test.ts", "src/**/*.test.tsx", "src/test-setup.ts"]
 }

package/tsconfig.json

@@ -7,7 +7,8 @@
     "declarationMap": true,
     "baseUrl": ".",
     "paths": {
-      "@ornery/ui-grid-core": ["../ui-grid-core/src/index.ts"]
+      "@ornery/ui-grid-core": ["../ui-grid-core/src/index.ts"],
+      "@ornery/ui-grid-vanilla": ["../ui-grid-vanilla/src/index.ts"]
     }
   },
   "include": ["src"]

package/vitest.config.ts

@@ -5,10 +5,12 @@ export default defineConfig({
   resolve: {
     alias: {
       '@ornery/ui-grid-core': path.resolve(__dirname, '../ui-grid-core/src/index.ts'),
+      '@ornery/ui-grid-vanilla': path.resolve(__dirname, '../ui-grid-vanilla/src/index.ts'),
     },
   },
   test: {
     environment: 'jsdom',
     globals: true,
+    setupFiles: ['./src/test-setup.ts'],
   },
 });