@ornery/ui-grid-react 0.1.9 → 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

@@ -1,4 +1,11 @@
 .ui-grid-host {
+  /* Stretch to fill the parent so the autoresize observer can measure a
+     deterministic height. Consumers can override these properties to opt
+     back into intrinsic sizing. */
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
   --_ui-grid-border-color: var(--ui-grid-border-color, var(--app-ui-grid-border-color, #d4d4d8));
   --_ui-grid-header-background: var(
     --ui-grid-header-background,
@@ -221,6 +228,12 @@
   border: 1px solid var(--ui-grid-border-color);
   box-shadow: var(--ui-grid-shadow);
   overflow: hidden;
+  /* Allow the frame to grow inside the flexed host so the body grid can fill
+     the available height when no explicit viewportHeight is set. */
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
 }
 
 .metrics-strip {
@@ -266,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,
@@ -313,6 +359,7 @@
   background: var(--ui-grid-header-background);
   font-weight: var(--ui-grid-header-weight);
   align-items: center;
+  position: relative;
 }
 
 .header-cell[draggable='true'] {
@@ -337,6 +384,38 @@
   z-index: var(--ui-grid-pin-menu-open-z-index);
 }
 
+.column-resizer {
+  position: absolute;
+  top: 0;
+  right: -4px;
+  width: 8px;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: col-resize;
+  z-index: 5;
+}
+
+.column-resizer::after {
+  content: '';
+  position: absolute;
+  top: 20%;
+  bottom: 20%;
+  left: 50%;
+  width: 2px;
+  transform: translateX(-50%);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--ui-grid-border-color, #888) 80%, transparent);
+  opacity: 0;
+  transition: opacity 120ms ease;
+}
+
+.header-cell:hover .column-resizer::after,
+.column-resizer:focus-visible::after {
+  opacity: 1;
+}
+
 .header-label {
   min-width: 0;
   display: block;