@neo4j-ndl/react 4.20.0 → 4.21.0

package/lib/esm/data-grid/helpers/index.js

@@ -22,8 +22,8 @@
 /**
  * Modified from here: https://gist.github.com/kottenator/9d936eb3e4e3c3e02598
  *
- * @param current Current Index
- * @param max Max Index
+ * @param current - Current index
+ * @param max - Max index
  * @returns
  */
 export const userFriendlyPagination = (current, max) => {
@@ -34,22 +34,24 @@ export const userFriendlyPagination = (current, max) => {
     const range = [];
     const rangeWithDots = [];
     let length;
-    for (let i = 1; i <= last; i += 1) {
-        if (i === 1 || i === last || (i >= left && i < right)) {
-            range.push(i);
+    for (let pageIndex = 1; pageIndex <= last; pageIndex += 1) {
+        if (pageIndex === 1 ||
+            pageIndex === last ||
+            (pageIndex >= left && pageIndex < right)) {
+            range.push(pageIndex);
         }
     }
-    for (let i = 0; i < range.length; i += 1) {
+    for (let rangeIndex = 0; rangeIndex < range.length; rangeIndex += 1) {
         if (length) {
-            if (range[i] - length === 2) {
+            if (range[rangeIndex] - length === 2) {
                 rangeWithDots.push(length + 1);
             }
-            else if (range[i] - length !== 1) {
+            else if (range[rangeIndex] - length !== 1) {
                 rangeWithDots.push('...');
             }
         }
-        rangeWithDots.push(range[i]);
-        length = range[i];
+        rangeWithDots.push(range[rangeIndex]);
+        length = range[rangeIndex];
     }
     return rangeWithDots;
 };
@@ -72,18 +74,18 @@ export const gridGenerator = (table) => {
     // If there are actions, we want the last column to be fixed sized
     // and the rest to be auto.
     return visibleColumns
-        .map((i, idx) => {
+        .map((column, idx) => {
         var _a;
         return visibleColumns.length === idx + 1
-            ? `minmax(${i.getSize()}px ,auto)`
-            : `minmax(${((_a = table.getColumn(i.id)) === null || _a === void 0 ? void 0 : _a.columnDef.minSize) || defaultMin}px,${i.getSize()}px)`;
+            ? `minmax(${column.getSize()}px ,auto)`
+            : `minmax(${((_a = table.getColumn(column.id)) === null || _a === void 0 ? void 0 : _a.columnDef.minSize) || defaultMin}px,${column.getSize()}px)`;
     })
         .join(' ');
 };
 /**
  * Check if the column is size constrained,
  * so we can let the column's width grow with `flex-grow: 1`
- * @param columnDef
+ * @param columnDef - Column definition
  */
 export const isSizeConstrained = (columnDef) => columnDef.size !== undefined && columnDef.size !== 150;
 export var ResizeDirection;
@@ -97,8 +99,8 @@ const isLastColumnId = (headers, columnId) => {
 };
 /**
  * Function to resize the column
- * @param direction direction to resize
- * @param header the header cell that is being resized
+ * @param direction - Direction to resize
+ * @param header - The header cell that is being resized
  */
 export const resizeColumn = (direction, header) => {
     var _a, _b, _c;
@@ -156,7 +158,7 @@ export const updateColumnWidths = (table, totalWidth) => {
             ? ACTION_CELL_SIZE
             : Math.floor((_b = col.columnDef.maxSize) !== null && _b !== void 0 ? _b : availableResizableWidth);
     });
-    const sumResizableMinWidths = resizableMinWidths.reduce((sum, w) => sum + w, 0);
+    const sumResizableMinWidths = resizableMinWidths.reduce((sum, width) => sum + width, 0);
     // If available width for resizable columns is less than or equal to the sum of their minimum widths,
     // assign each resizable column its minimum width.
     if (sumResizableMinWidths >= availableResizableWidth) {
@@ -199,47 +201,47 @@ export const updateColumnWidths = (table, totalWidth) => {
 };
 // Helper function to distribute available width proportionally within min and max bounds.
 const distributeProportional = (total, weights, minBounds, maxBounds) => {
-    const n = weights.length;
-    const result = new Array(n).fill(0);
+    const count = weights.length;
+    const result = new Array(count).fill(0);
     const freeIndices = new Set();
-    for (let i = 0; i < n; i++) {
-        freeIndices.add(i);
+    for (let index = 0; index < count; index++) {
+        freeIndices.add(index);
     }
     let remaining = total;
     while (freeIndices.size > 0) {
         const free = Array.from(freeIndices);
-        const totalFreeWeight = free.reduce((sum, i) => sum + weights[i], 0);
+        const totalFreeWeight = free.reduce((sum, index) => sum + weights[index], 0);
         let isUpdated = false;
-        for (const i of free) {
-            const alloc = remaining * (weights[i] / totalFreeWeight);
-            if (alloc < minBounds[i]) {
-                result[i] = minBounds[i];
-                remaining -= minBounds[i];
-                freeIndices.delete(i);
+        for (const index of free) {
+            const alloc = remaining * (weights[index] / totalFreeWeight);
+            if (alloc < minBounds[index]) {
+                result[index] = minBounds[index];
+                remaining -= minBounds[index];
+                freeIndices.delete(index);
                 isUpdated = true;
             }
-            else if (alloc > maxBounds[i]) {
-                result[i] = maxBounds[i];
-                remaining -= maxBounds[i];
-                freeIndices.delete(i);
+            else if (alloc > maxBounds[index]) {
+                result[index] = maxBounds[index];
+                remaining -= maxBounds[index];
+                freeIndices.delete(index);
                 isUpdated = true;
             }
         }
         if (!isUpdated) {
-            for (const i of free) {
-                result[i] = remaining * (weights[i] / totalFreeWeight);
+            for (const index of free) {
+                result[index] = remaining * (weights[index] / totalFreeWeight);
             }
             break;
         }
     }
     // Round results and distribute remaining pixels to avoid rounding issues.
-    const rounded = result.map((v) => Math.floor(v));
-    const allocatedSum = rounded.reduce((sum, v) => sum + v, 0);
+    const rounded = result.map((value) => Math.floor(value));
+    const allocatedSum = rounded.reduce((sum, value) => sum + value, 0);
     let diff = total - allocatedSum;
-    for (let i = 0; i < n && diff > 0; i++) {
-        if (rounded[i] < maxBounds[i]) {
-            const add = Math.min(diff, maxBounds[i] - rounded[i]);
-            rounded[i] += add;
+    for (let index = 0; index < count && diff > 0; index++) {
+        if (rounded[index] < maxBounds[index]) {
+            const add = Math.min(diff, maxBounds[index] - rounded[index]);
+            rounded[index] += add;
             diff -= add;
         }
     }

package/lib/esm/data-grid/helpers/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/data-grid/helpers/index.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport {\n  type ColumnDef,\n  type Header as HeaderType,\n  type RowData,\n  type Table,\n} from '@tanstack/react-table';\n\n/**\n * Modified from here: https://gist.github.com/kottenator/9d936eb3e4e3c3e02598\n *\n * @param current Current Index\n * @param max Max Index\n * @returns\n */\nexport const userFriendlyPagination = (current: number, max: number) => {\n  const last = max;\n  const delta = 1;\n  const left = current - delta;\n  const right = current + delta + 1;\n  const range = [];\n  const rangeWithDots = [];\n  let length: number | undefined;\n\n  for (let i = 1; i <= last; i += 1) {\n    if (i === 1 || i === last || (i >= left && i < right)) {\n      range.push(i);\n    }\n  }\n\n  for (let i = 0; i < range.length; i += 1) {\n    if (length) {\n      if (range[i] - length === 2) {\n        rangeWithDots.push(length + 1);\n      } else if (range[i] - length !== 1) {\n        rangeWithDots.push('...');\n      }\n    }\n    rangeWithDots.push(range[i]);\n    length = range[i];\n  }\n\n  return rangeWithDots;\n};\n\n/**\n * Simple helper to generate inline grid style\n * to be responsive.\n *\n * Secret sauce:\n * The last element takes an \"auto\" width, so it will\n * fill the available space, and the result till be for 4 columns:\n * minmax(min column1Sizepx,column1Sizepx) minmax(min column2Sizepx,column2Sizepx) ... minmax(columnNSizepx, auto)\n */\nexport const gridGenerator = <T extends RowData>(table: Table<T>) => {\n  const visibleColumns = table.getVisibleFlatColumns();\n  const tableDefaultMin = table._getDefaultColumnDef().minSize;\n  // 20 is the default value that is set in Tanstack. For us the min size is too\n  // small so we increase it to look better per default.\n  // https://github.com/TanStack/table/blob/main/docs/guide/column-sizing.md\n  const defaultMin = tableDefaultMin !== 20 ? tableDefaultMin : 100;\n\n  // If there are actions, we want the last column to be fixed sized\n  // and the rest to be auto.\n  return visibleColumns\n    .map((i, idx) =>\n      visibleColumns.length === idx + 1\n        ? `minmax(${i.getSize()}px ,auto)`\n        : `minmax(${\n            table.getColumn(i.id)?.columnDef.minSize || defaultMin\n          }px,${i.getSize()}px)`,\n    )\n    .join(' ');\n};\n\n/**\n * Check if the column is size constrained,\n * so we can let the column's width grow with `flex-grow: 1`\n * @param columnDef\n */\nexport const isSizeConstrained = <T extends RowData>(columnDef: ColumnDef<T>) =>\n  columnDef.size !== undefined && columnDef.size !== 150;\n\nexport enum ResizeDirection {\n  LEFT = 'left',\n  RIGHT = 'right',\n}\n\nconst isLastColumnId = <T extends RowData>(\n  headers: HeaderType<T, unknown>[],\n  columnId: T,\n) => {\n  const columnIndex = headers.findIndex((header) => header.id === columnId);\n  return columnIndex === headers.length - 1;\n};\n\n/**\n * Function to resize the column\n * @param direction direction to resize\n * @param header the header cell that is being resized\n */\nexport const resizeColumn = <T extends RowData>(\n  direction: ResizeDirection,\n  header: HeaderType<T, unknown>,\n) => {\n  const RESIZE_AMOUNT = 5; // Pixels to shift\n  const currentColumnId = header.column.id;\n  const table = header.getContext().table;\n  const maxColumnWidth = header.column.columnDef.maxSize ?? window.innerWidth;\n  const minColumnWidth = header.column.columnDef.minSize ?? 0;\n  const maxTableRowWidth =\n    document.querySelector('.ndl-data-grid-thead')?.getBoundingClientRect()\n      .width || 0;\n\n  const adjustColumnWidth = (currentWidth: number, adjustment: number) => {\n    return Math.min(\n      Math.max(currentWidth + adjustment, minColumnWidth),\n      maxColumnWidth,\n    );\n  };\n\n  if (direction === ResizeDirection.LEFT) {\n    table.setColumnSizing((currentSizes) => {\n      const newWidth = adjustColumnWidth(\n        currentSizes[currentColumnId],\n        -RESIZE_AMOUNT,\n      );\n      return { ...currentSizes, [currentColumnId]: newWidth };\n    });\n  } else if (direction === ResizeDirection.RIGHT) {\n    table.setColumnSizing((currentSizes) => {\n      if (isLastColumnId(header.headerGroup.headers, currentColumnId as T)) {\n        // Calculate the total width of the current columns combined\n        const totalCurrentWidth = Object.values(currentSizes).reduce(\n          (total, size) => total + (isNaN(size) ? 0 : size),\n          0,\n        );\n        if (totalCurrentWidth + RESIZE_AMOUNT >= maxTableRowWidth) {\n          return currentSizes;\n        }\n      }\n      const newWidth = adjustColumnWidth(\n        currentSizes[currentColumnId],\n        RESIZE_AMOUNT,\n      );\n      return { ...currentSizes, [currentColumnId]: newWidth };\n    });\n  }\n};\n\nexport const ACTION_CELL_SIZE = 40;\n\nexport const updateColumnWidths = <T extends RowData>(\n  table: Table<T>,\n  totalWidth: number,\n) => {\n  const columns = table.getAllColumns();\n  const availableWidth = Math.floor(totalWidth);\n\n  // Separate pinned and resizable (unpinned) columns\n  const pinnedColumns = columns.filter((col) => col.getIsPinned());\n  const resizableColumns = columns.filter((col) => !col.getIsPinned());\n\n  // Sum of pinned widths (pinned columns should remain unchanged)\n  const totalPinnedWidth = pinnedColumns.reduce(\n    (sum, col) => sum + col.getSize(),\n    0,\n  );\n\n  // Available width for resizable columns\n  const availableResizableWidth = availableWidth - totalPinnedWidth;\n\n  // Calculate min widths for resizable columns\n  const resizableMinWidths = resizableColumns.map((col) =>\n    col.columnDef.meta?.isActionCell\n      ? ACTION_CELL_SIZE\n      : Math.floor(col.columnDef.minSize ?? 0),\n  );\n\n  // Calculate max widths for resizable columns\n  const resizableMaxWidths = resizableColumns.map((col) =>\n    col.columnDef.meta?.isActionCell\n      ? ACTION_CELL_SIZE\n      : Math.floor(col.columnDef.maxSize ?? availableResizableWidth),\n  );\n\n  const sumResizableMinWidths = resizableMinWidths.reduce(\n    (sum, w) => sum + w,\n    0,\n  );\n\n  // If available width for resizable columns is less than or equal to the sum of their minimum widths,\n  // assign each resizable column its minimum width.\n  if (sumResizableMinWidths >= availableResizableWidth) {\n    const newSizing = resizableColumns.reduce(\n      (acc, col, index) => ({ ...acc, [col.id]: resizableMinWidths[index] }),\n      {} as Record<string, number>,\n    );\n    // Preserve pinned columns unchanged.\n    pinnedColumns.forEach((col) => {\n      newSizing[col.id] = col.getSize();\n    });\n    table.setColumnSizing(() => newSizing);\n    return;\n  }\n\n  // Calculate proportional weights for resizable columns based on columnDef.size (default 20),\n  // but if `isActionCell` is true, use ACTION_CELL_SIZE.\n  const resizableWeights = resizableColumns.map((col) =>\n    col.columnDef.meta?.isActionCell\n      ? ACTION_CELL_SIZE\n      : typeof col.columnDef.size === 'number'\n        ? col.columnDef.size\n        : 20,\n  );\n\n  const allocatedResizableWidths = distributeProportional(\n    availableResizableWidth,\n    resizableWeights,\n    resizableMinWidths,\n    resizableMaxWidths,\n  );\n\n  // Compose the final sizing object.\n  const finalSizing = {} as Record<string, number>;\n  // Preserve pinned columns with current sizes.\n  pinnedColumns.forEach((col) => {\n    if (col.columnDef.meta?.isActionCell) {\n      finalSizing[col.id] = ACTION_CELL_SIZE;\n    } else {\n      finalSizing[col.id] = col.getSize();\n    }\n  });\n  // Assign computed widths to resizable columns.\n  resizableColumns.forEach((col, index) => {\n    finalSizing[col.id] = allocatedResizableWidths[index];\n  });\n\n  table.setColumnSizing(() => finalSizing);\n};\n\n// Helper function to distribute available width proportionally within min and max bounds.\nconst distributeProportional = (\n  total: number,\n  weights: number[],\n  minBounds: number[],\n  maxBounds: number[],\n): number[] => {\n  const n = weights.length;\n  const result = new Array(n).fill(0);\n  const freeIndices = new Set<number>();\n  for (let i = 0; i < n; i++) {\n    freeIndices.add(i);\n  }\n  let remaining = total;\n\n  while (freeIndices.size > 0) {\n    const free = Array.from(freeIndices);\n    const totalFreeWeight = free.reduce((sum, i) => sum + weights[i], 0);\n    let isUpdated = false;\n    for (const i of free) {\n      const alloc = remaining * (weights[i] / totalFreeWeight);\n      if (alloc < minBounds[i]) {\n        result[i] = minBounds[i];\n        remaining -= minBounds[i];\n        freeIndices.delete(i);\n        isUpdated = true;\n      } else if (alloc > maxBounds[i]) {\n        result[i] = maxBounds[i];\n        remaining -= maxBounds[i];\n        freeIndices.delete(i);\n        isUpdated = true;\n      }\n    }\n    if (!isUpdated) {\n      for (const i of free) {\n        result[i] = remaining * (weights[i] / totalFreeWeight);\n      }\n      break;\n    }\n  }\n\n  // Round results and distribute remaining pixels to avoid rounding issues.\n  const rounded = result.map((v) => Math.floor(v));\n  const allocatedSum = rounded.reduce((sum, v) => sum + v, 0);\n  let diff = total - allocatedSum;\n  for (let i = 0; i < n && diff > 0; i++) {\n    if (rounded[i] < maxBounds[i]) {\n      const add = Math.min(diff, maxBounds[i] - rounded[i]);\n      rounded[i] += add;\n      diff -= add;\n    }\n  }\n  return rounded;\n};\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/data-grid/helpers/index.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport {\n  type ColumnDef,\n  type Header as HeaderType,\n  type RowData,\n  type Table,\n} from '@tanstack/react-table';\n\n/**\n * Modified from here: https://gist.github.com/kottenator/9d936eb3e4e3c3e02598\n *\n * @param current - Current index\n * @param max - Max index\n * @returns\n */\nexport const userFriendlyPagination = (current: number, max: number) => {\n  const last = max;\n  const delta = 1;\n  const left = current - delta;\n  const right = current + delta + 1;\n  const range = [];\n  const rangeWithDots = [];\n  let length: number | undefined;\n\n  for (let pageIndex = 1; pageIndex <= last; pageIndex += 1) {\n    if (\n      pageIndex === 1 ||\n      pageIndex === last ||\n      (pageIndex >= left && pageIndex < right)\n    ) {\n      range.push(pageIndex);\n    }\n  }\n\n  for (let rangeIndex = 0; rangeIndex < range.length; rangeIndex += 1) {\n    if (length) {\n      if (range[rangeIndex] - length === 2) {\n        rangeWithDots.push(length + 1);\n      } else if (range[rangeIndex] - length !== 1) {\n        rangeWithDots.push('...');\n      }\n    }\n    rangeWithDots.push(range[rangeIndex]);\n    length = range[rangeIndex];\n  }\n\n  return rangeWithDots;\n};\n\n/**\n * Simple helper to generate inline grid style\n * to be responsive.\n *\n * Secret sauce:\n * The last element takes an \"auto\" width, so it will\n * fill the available space, and the result till be for 4 columns:\n * minmax(min column1Sizepx,column1Sizepx) minmax(min column2Sizepx,column2Sizepx) ... minmax(columnNSizepx, auto)\n */\nexport const gridGenerator = <T extends RowData>(table: Table<T>) => {\n  const visibleColumns = table.getVisibleFlatColumns();\n  const tableDefaultMin = table._getDefaultColumnDef().minSize;\n  // 20 is the default value that is set in Tanstack. For us the min size is too\n  // small so we increase it to look better per default.\n  // https://github.com/TanStack/table/blob/main/docs/guide/column-sizing.md\n  const defaultMin = tableDefaultMin !== 20 ? tableDefaultMin : 100;\n\n  // If there are actions, we want the last column to be fixed sized\n  // and the rest to be auto.\n  return visibleColumns\n    .map((column, idx) =>\n      visibleColumns.length === idx + 1\n        ? `minmax(${column.getSize()}px ,auto)`\n        : `minmax(${\n            table.getColumn(column.id)?.columnDef.minSize || defaultMin\n          }px,${column.getSize()}px)`,\n    )\n    .join(' ');\n};\n\n/**\n * Check if the column is size constrained,\n * so we can let the column's width grow with `flex-grow: 1`\n * @param columnDef - Column definition\n */\nexport const isSizeConstrained = <T extends RowData>(columnDef: ColumnDef<T>) =>\n  columnDef.size !== undefined && columnDef.size !== 150;\n\nexport enum ResizeDirection {\n  LEFT = 'left',\n  RIGHT = 'right',\n}\n\nconst isLastColumnId = <T extends RowData>(\n  headers: HeaderType<T, unknown>[],\n  columnId: T,\n) => {\n  const columnIndex = headers.findIndex((header) => header.id === columnId);\n  return columnIndex === headers.length - 1;\n};\n\n/**\n * Function to resize the column\n * @param direction - Direction to resize\n * @param header - The header cell that is being resized\n */\nexport const resizeColumn = <T extends RowData>(\n  direction: ResizeDirection,\n  header: HeaderType<T, unknown>,\n) => {\n  const RESIZE_AMOUNT = 5; // Pixels to shift\n  const currentColumnId = header.column.id;\n  const table = header.getContext().table;\n  const maxColumnWidth = header.column.columnDef.maxSize ?? window.innerWidth;\n  const minColumnWidth = header.column.columnDef.minSize ?? 0;\n  const maxTableRowWidth =\n    document.querySelector('.ndl-data-grid-thead')?.getBoundingClientRect()\n      .width || 0;\n\n  const adjustColumnWidth = (currentWidth: number, adjustment: number) => {\n    return Math.min(\n      Math.max(currentWidth + adjustment, minColumnWidth),\n      maxColumnWidth,\n    );\n  };\n\n  if (direction === ResizeDirection.LEFT) {\n    table.setColumnSizing((currentSizes) => {\n      const newWidth = adjustColumnWidth(\n        currentSizes[currentColumnId],\n        -RESIZE_AMOUNT,\n      );\n      return { ...currentSizes, [currentColumnId]: newWidth };\n    });\n  } else if (direction === ResizeDirection.RIGHT) {\n    table.setColumnSizing((currentSizes) => {\n      if (isLastColumnId(header.headerGroup.headers, currentColumnId as T)) {\n        // Calculate the total width of the current columns combined\n        const totalCurrentWidth = Object.values(currentSizes).reduce(\n          (total, size) => total + (isNaN(size) ? 0 : size),\n          0,\n        );\n        if (totalCurrentWidth + RESIZE_AMOUNT >= maxTableRowWidth) {\n          return currentSizes;\n        }\n      }\n      const newWidth = adjustColumnWidth(\n        currentSizes[currentColumnId],\n        RESIZE_AMOUNT,\n      );\n      return { ...currentSizes, [currentColumnId]: newWidth };\n    });\n  }\n};\n\nexport const ACTION_CELL_SIZE = 40;\n\nexport const updateColumnWidths = <T extends RowData>(\n  table: Table<T>,\n  totalWidth: number,\n) => {\n  const columns = table.getAllColumns();\n  const availableWidth = Math.floor(totalWidth);\n\n  // Separate pinned and resizable (unpinned) columns\n  const pinnedColumns = columns.filter((col) => col.getIsPinned());\n  const resizableColumns = columns.filter((col) => !col.getIsPinned());\n\n  // Sum of pinned widths (pinned columns should remain unchanged)\n  const totalPinnedWidth = pinnedColumns.reduce(\n    (sum, col) => sum + col.getSize(),\n    0,\n  );\n\n  // Available width for resizable columns\n  const availableResizableWidth = availableWidth - totalPinnedWidth;\n\n  // Calculate min widths for resizable columns\n  const resizableMinWidths = resizableColumns.map((col) =>\n    col.columnDef.meta?.isActionCell\n      ? ACTION_CELL_SIZE\n      : Math.floor(col.columnDef.minSize ?? 0),\n  );\n\n  // Calculate max widths for resizable columns\n  const resizableMaxWidths = resizableColumns.map((col) =>\n    col.columnDef.meta?.isActionCell\n      ? ACTION_CELL_SIZE\n      : Math.floor(col.columnDef.maxSize ?? availableResizableWidth),\n  );\n\n  const sumResizableMinWidths = resizableMinWidths.reduce(\n    (sum, width) => sum + width,\n    0,\n  );\n\n  // If available width for resizable columns is less than or equal to the sum of their minimum widths,\n  // assign each resizable column its minimum width.\n  if (sumResizableMinWidths >= availableResizableWidth) {\n    const newSizing = resizableColumns.reduce(\n      (acc, col, index) => ({ ...acc, [col.id]: resizableMinWidths[index] }),\n      {} as Record<string, number>,\n    );\n    // Preserve pinned columns unchanged.\n    pinnedColumns.forEach((col) => {\n      newSizing[col.id] = col.getSize();\n    });\n    table.setColumnSizing(() => newSizing);\n    return;\n  }\n\n  // Calculate proportional weights for resizable columns based on columnDef.size (default 20),\n  // but if `isActionCell` is true, use ACTION_CELL_SIZE.\n  const resizableWeights = resizableColumns.map((col) =>\n    col.columnDef.meta?.isActionCell\n      ? ACTION_CELL_SIZE\n      : typeof col.columnDef.size === 'number'\n        ? col.columnDef.size\n        : 20,\n  );\n\n  const allocatedResizableWidths = distributeProportional(\n    availableResizableWidth,\n    resizableWeights,\n    resizableMinWidths,\n    resizableMaxWidths,\n  );\n\n  // Compose the final sizing object.\n  const finalSizing = {} as Record<string, number>;\n  // Preserve pinned columns with current sizes.\n  pinnedColumns.forEach((col) => {\n    if (col.columnDef.meta?.isActionCell) {\n      finalSizing[col.id] = ACTION_CELL_SIZE;\n    } else {\n      finalSizing[col.id] = col.getSize();\n    }\n  });\n  // Assign computed widths to resizable columns.\n  resizableColumns.forEach((col, index) => {\n    finalSizing[col.id] = allocatedResizableWidths[index];\n  });\n\n  table.setColumnSizing(() => finalSizing);\n};\n\n// Helper function to distribute available width proportionally within min and max bounds.\nconst distributeProportional = (\n  total: number,\n  weights: number[],\n  minBounds: number[],\n  maxBounds: number[],\n): number[] => {\n  const count = weights.length;\n  const result = new Array(count).fill(0);\n  const freeIndices = new Set<number>();\n  for (let index = 0; index < count; index++) {\n    freeIndices.add(index);\n  }\n  let remaining = total;\n\n  while (freeIndices.size > 0) {\n    const free = Array.from(freeIndices);\n    const totalFreeWeight = free.reduce(\n      (sum, index) => sum + weights[index],\n      0,\n    );\n    let isUpdated = false;\n    for (const index of free) {\n      const alloc = remaining * (weights[index] / totalFreeWeight);\n      if (alloc < minBounds[index]) {\n        result[index] = minBounds[index];\n        remaining -= minBounds[index];\n        freeIndices.delete(index);\n        isUpdated = true;\n      } else if (alloc > maxBounds[index]) {\n        result[index] = maxBounds[index];\n        remaining -= maxBounds[index];\n        freeIndices.delete(index);\n        isUpdated = true;\n      }\n    }\n    if (!isUpdated) {\n      for (const index of free) {\n        result[index] = remaining * (weights[index] / totalFreeWeight);\n      }\n      break;\n    }\n  }\n\n  // Round results and distribute remaining pixels to avoid rounding issues.\n  const rounded = result.map((value) => Math.floor(value));\n  const allocatedSum = rounded.reduce((sum, value) => sum + value, 0);\n  let diff = total - allocatedSum;\n  for (let index = 0; index < count && diff > 0; index++) {\n    if (rounded[index] < maxBounds[index]) {\n      const add = Math.min(diff, maxBounds[index] - rounded[index]);\n      rounded[index] += add;\n      diff -= add;\n    }\n  }\n  return rounded;\n};\n"]}

package/lib/esm/data-grid/stories/datagrid-in-dialog.story.js

@@ -28,7 +28,10 @@ const columnHelper = createColumnHelper();
 const actionsColumn = (tableNav) => ({
     cell: ({ row }) => {
         const options = ['Edit', 'Delete', 'View'];
-        const dropdownOptions = options.map((o) => ({ label: o, value: o }));
+        const dropdownOptions = options.map((option) => ({
+            label: option,
+            value: option,
+        }));
         // eslint-disable-next-line react-hooks/rules-of-hooks
         const [selected, setSelected] = useState(dropdownOptions[0]);
         // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -36,16 +39,16 @@ const actionsColumn = (tableNav) => ({
         return (_jsx("div", { "data-testid": `ndl-actions-cell-row-${row.index}`, className: "n-flex n-flex-row n-gap-token-8", children: _jsx(Select, { ariaLabel: `actions-select-row-${row.index}`, type: "select", selectProps: {
                     menuPortalTarget: portalTarget,
                     menuPosition: 'fixed',
-                    onChange: (e) => {
-                        if (!e) {
+                    onChange: (event) => {
+                        if (!event) {
                             return;
                         }
-                        setSelected(e);
+                        setSelected(event);
                     },
-                    onKeyDown: (e) => {
+                    onKeyDown: (event) => {
                         // Stop propagation of arrow down to the table, to avoid moving to the next item in the cell
-                        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
-                            e.stopPropagation();
+                        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                            event.stopPropagation();
                         }
                     },
                     onMenuClose: () => {

package/lib/esm/data-grid/stories/datagrid-in-dialog.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"datagrid-in-dialog.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-in-dialog.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n  DataGrid,\n  type DataGridNav,\n  Dialog,\n  FilledButton,\n  Select,\n  useDataGridContext,\n} from '@neo4j-ndl/react';\nimport {\n  type ColumnDef,\n  type ColumnMeta,\n  createColumnHelper,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\nimport { useRef, useState } from 'react';\n\nimport { TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n  name: string;\n  age: number;\n  cypherCommand: string;\n};\n\nconst columnHelper = createColumnHelper<TestDataFormat>();\n\nconst actionsColumn: (tableNav: DataGridNav) => ColumnDef<TestDataFormat> = (\n  tableNav,\n) => ({\n  cell: ({ row }) => {\n    const options = ['Edit', 'Delete', 'View'];\n    const dropdownOptions = options.map((o) => ({ label: o, value: o }));\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const [selected, setSelected] = useState(dropdownOptions[0]);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const { portalTarget } = useDataGridContext();\n\n    return (\n      <div\n        data-testid={`ndl-actions-cell-row-${row.index}`}\n        className=\"n-flex n-flex-row n-gap-token-8\"\n      >\n        <Select\n          ariaLabel={`actions-select-row-${row.index}`}\n          type=\"select\"\n          selectProps={{\n            menuPortalTarget: portalTarget,\n            menuPosition: 'fixed',\n            onChange: (e) => {\n              if (!e) {\n                return;\n              }\n              setSelected(e);\n            },\n            onKeyDown: (e) => {\n              // Stop propagation of arrow down to the table, to avoid moving to the next item in the cell\n              if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n                e.stopPropagation();\n              }\n            },\n            onMenuClose: () => {\n              console.info(\n                'Start listening to keyboard events for table navigation',\n              );\n              tableNav.enable();\n            },\n            onMenuOpen: () => {\n              console.info(\n                'Stop listening to keyboard events for table navigation',\n              );\n              tableNav.disable();\n            },\n            options: dropdownOptions,\n            value: selected,\n          }}\n        />\n      </div>\n    );\n  },\n  header: 'Custom Select',\n  id: 'custom-select',\n  minSize: 150,\n});\n\nconst Component = () => {\n  const [data, setData] = useState(TABLE_DEMO_DATA);\n  const [isAgeFilterApplied, setIsAgeFilterApplied] = useState(false);\n\n  const ColumnActions: ColumnMeta<TestDataFormat, unknown> = {\n    columnActions: {\n      actions: [\n        {\n          onClick: () => {\n            if (isAgeFilterApplied) {\n              setData(TABLE_DEMO_DATA);\n              setIsAgeFilterApplied(false);\n              return;\n            } else {\n              const filteredData = data.filter((item) => item.age >= 18);\n              setData(filteredData);\n              setIsAgeFilterApplied(true);\n            }\n          },\n          title: 'Age >= 18',\n        },\n      ],\n    },\n  };\n\n  const regularColumns = [\n    columnHelper.accessor('name', {\n      cell: (cell) => (\n        <DataGrid.InlineEditCell\n          cell={cell}\n          value={cell.getValue()}\n          ariaLabel=\"edit name\"\n        />\n      ),\n      maxSize: 300,\n      meta: {\n        isInlineEditCell: {\n          onEditChange: (newValue, cell) => {\n            setData((oldData) => {\n              return oldData.map((row) => {\n                if (row.name === cell.row.original.name) {\n                  return {\n                    ...row,\n                    name: newValue,\n                  };\n                }\n                return row;\n              });\n            });\n          },\n        },\n      },\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => {\n        return (\n          <DataGrid.DropDownCell\n            cell={info}\n            options={[\n              {\n                label: '12',\n                value: '12',\n              },\n              {\n                label: '32',\n                value: '32',\n              },\n              {\n                label: '37',\n                value: '37',\n              },\n              {\n                label: '39',\n                value: '39',\n              },\n              {\n                label: '51',\n                value: '51',\n              },\n            ]}\n            ariaLabel=\"select age\"\n            portalTarget={document.getElementById('default-menu')}\n          />\n        );\n      },\n      meta: {\n        isDropDownCell: {\n          onChange: (newValue, cell) => {\n            if (newValue === undefined) {\n              // No change\n              return;\n            }\n\n            const parsedValue = parseInt(newValue, 10);\n\n            if (isNaN(parsedValue)) {\n              return;\n            }\n\n            setData((oldData) => {\n              return oldData.map((row) => {\n                if (row.name === cell.row.original.name) {\n                  return {\n                    ...row,\n                    age: parsedValue,\n                  };\n                }\n                return row;\n              });\n            });\n          },\n        },\n        ...ColumnActions,\n      },\n      minSize: 120,\n    }),\n    columnHelper.accessor('cypherCommand', {\n      cell: (info) => info.getValue(),\n      minSize: 400,\n      size: 400,\n    }),\n  ];\n\n  const allColumns = (tableNav: DataGridNav) => [\n    ...regularColumns,\n    actionsColumn(tableNav),\n  ];\n\n  const tableNavRef = useRef<DataGridNav>(null!);\n  const table = useReactTable({\n    autoResetPageIndex: false,\n    columnResizeMode: 'onChange',\n    columns: allColumns(tableNavRef.current),\n    data: data,\n    debugColumns: true,\n    debugHeaders: true,\n    debugTable: true,\n    defaultColumn: {\n      maxSize: 800,\n      minSize: 80,\n    },\n    enableSorting: true,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    initialState: {\n      pagination: {\n        pageSize: 5,\n      },\n    },\n  });\n\n  // Modal code\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const handleClick = () => setIsOpen((prev) => !prev);\n  const handleClose = () => setIsOpen(false);\n\n  // DataGrid code\n  return (\n    <div className=\"n-w-full\">\n      <div className=\"n-flex n-justify-center\">\n        <FilledButton onClick={handleClick}>Open Dialog</FilledButton>\n      </div>\n      <Dialog\n        className=\"n-p-token-8 n-bg-neutral-10 n-max-w-max n-rounded-lg\"\n        htmlAttributes={{\n          id: 'default-menu',\n        }}\n        onClose={handleClose}\n        isOpen={isOpen}\n        hasDisabledCloseButton={true}\n      >\n        <Dialog.Content>\n          <DataGrid\n            portalTarget={document.getElementById('default-menu')}\n            isResizable={true}\n            tableInstance={table}\n            tableNavRef={tableNavRef}\n            isKeyboardNavigable={true}\n            styling={{\n              borderStyle: 'horizontal',\n              hasZebraStriping: false,\n            }}\n          />\n        </Dialog.Content>\n      </Dialog>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"datagrid-in-dialog.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-in-dialog.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n  DataGrid,\n  type DataGridNav,\n  Dialog,\n  FilledButton,\n  Select,\n  useDataGridContext,\n} from '@neo4j-ndl/react';\nimport {\n  type ColumnDef,\n  type ColumnMeta,\n  createColumnHelper,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\nimport { useRef, useState } from 'react';\n\nimport { TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n  name: string;\n  age: number;\n  cypherCommand: string;\n};\n\nconst columnHelper = createColumnHelper<TestDataFormat>();\n\nconst actionsColumn: (tableNav: DataGridNav) => ColumnDef<TestDataFormat> = (\n  tableNav,\n) => ({\n  cell: ({ row }) => {\n    const options = ['Edit', 'Delete', 'View'];\n    const dropdownOptions = options.map((option) => ({\n      label: option,\n      value: option,\n    }));\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const [selected, setSelected] = useState(dropdownOptions[0]);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const { portalTarget } = useDataGridContext();\n\n    return (\n      <div\n        data-testid={`ndl-actions-cell-row-${row.index}`}\n        className=\"n-flex n-flex-row n-gap-token-8\"\n      >\n        <Select\n          ariaLabel={`actions-select-row-${row.index}`}\n          type=\"select\"\n          selectProps={{\n            menuPortalTarget: portalTarget,\n            menuPosition: 'fixed',\n            onChange: (event) => {\n              if (!event) {\n                return;\n              }\n              setSelected(event);\n            },\n            onKeyDown: (event) => {\n              // Stop propagation of arrow down to the table, to avoid moving to the next item in the cell\n              if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n                event.stopPropagation();\n              }\n            },\n            onMenuClose: () => {\n              console.info(\n                'Start listening to keyboard events for table navigation',\n              );\n              tableNav.enable();\n            },\n            onMenuOpen: () => {\n              console.info(\n                'Stop listening to keyboard events for table navigation',\n              );\n              tableNav.disable();\n            },\n            options: dropdownOptions,\n            value: selected,\n          }}\n        />\n      </div>\n    );\n  },\n  header: 'Custom Select',\n  id: 'custom-select',\n  minSize: 150,\n});\n\nconst Component = () => {\n  const [data, setData] = useState(TABLE_DEMO_DATA);\n  const [isAgeFilterApplied, setIsAgeFilterApplied] = useState(false);\n\n  const ColumnActions: ColumnMeta<TestDataFormat, unknown> = {\n    columnActions: {\n      actions: [\n        {\n          onClick: () => {\n            if (isAgeFilterApplied) {\n              setData(TABLE_DEMO_DATA);\n              setIsAgeFilterApplied(false);\n              return;\n            } else {\n              const filteredData = data.filter((item) => item.age >= 18);\n              setData(filteredData);\n              setIsAgeFilterApplied(true);\n            }\n          },\n          title: 'Age >= 18',\n        },\n      ],\n    },\n  };\n\n  const regularColumns = [\n    columnHelper.accessor('name', {\n      cell: (cell) => (\n        <DataGrid.InlineEditCell\n          cell={cell}\n          value={cell.getValue()}\n          ariaLabel=\"edit name\"\n        />\n      ),\n      maxSize: 300,\n      meta: {\n        isInlineEditCell: {\n          onEditChange: (newValue, cell) => {\n            setData((oldData) => {\n              return oldData.map((row) => {\n                if (row.name === cell.row.original.name) {\n                  return {\n                    ...row,\n                    name: newValue,\n                  };\n                }\n                return row;\n              });\n            });\n          },\n        },\n      },\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => {\n        return (\n          <DataGrid.DropDownCell\n            cell={info}\n            options={[\n              {\n                label: '12',\n                value: '12',\n              },\n              {\n                label: '32',\n                value: '32',\n              },\n              {\n                label: '37',\n                value: '37',\n              },\n              {\n                label: '39',\n                value: '39',\n              },\n              {\n                label: '51',\n                value: '51',\n              },\n            ]}\n            ariaLabel=\"select age\"\n            portalTarget={document.getElementById('default-menu')}\n          />\n        );\n      },\n      meta: {\n        isDropDownCell: {\n          onChange: (newValue, cell) => {\n            if (newValue === undefined) {\n              // No change\n              return;\n            }\n\n            const parsedValue = parseInt(newValue, 10);\n\n            if (isNaN(parsedValue)) {\n              return;\n            }\n\n            setData((oldData) => {\n              return oldData.map((row) => {\n                if (row.name === cell.row.original.name) {\n                  return {\n                    ...row,\n                    age: parsedValue,\n                  };\n                }\n                return row;\n              });\n            });\n          },\n        },\n        ...ColumnActions,\n      },\n      minSize: 120,\n    }),\n    columnHelper.accessor('cypherCommand', {\n      cell: (info) => info.getValue(),\n      minSize: 400,\n      size: 400,\n    }),\n  ];\n\n  const allColumns = (tableNav: DataGridNav) => [\n    ...regularColumns,\n    actionsColumn(tableNav),\n  ];\n\n  const tableNavRef = useRef<DataGridNav>(null!);\n  const table = useReactTable({\n    autoResetPageIndex: false,\n    columnResizeMode: 'onChange',\n    columns: allColumns(tableNavRef.current),\n    data: data,\n    debugColumns: true,\n    debugHeaders: true,\n    debugTable: true,\n    defaultColumn: {\n      maxSize: 800,\n      minSize: 80,\n    },\n    enableSorting: true,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    initialState: {\n      pagination: {\n        pageSize: 5,\n      },\n    },\n  });\n\n  // Modal code\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const handleClick = () => setIsOpen((prev) => !prev);\n  const handleClose = () => setIsOpen(false);\n\n  // DataGrid code\n  return (\n    <div className=\"n-w-full\">\n      <div className=\"n-flex n-justify-center\">\n        <FilledButton onClick={handleClick}>Open Dialog</FilledButton>\n      </div>\n      <Dialog\n        className=\"n-p-token-8 n-bg-neutral-10 n-max-w-max n-rounded-lg\"\n        htmlAttributes={{\n          id: 'default-menu',\n        }}\n        onClose={handleClose}\n        isOpen={isOpen}\n        hasDisabledCloseButton={true}\n      >\n        <Dialog.Content>\n          <DataGrid\n            portalTarget={document.getElementById('default-menu')}\n            isResizable={true}\n            tableInstance={table}\n            tableNavRef={tableNavRef}\n            isKeyboardNavigable={true}\n            styling={{\n              borderStyle: 'horizontal',\n              hasZebraStriping: false,\n            }}\n          />\n        </Dialog.Content>\n      </Dialog>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/data-grid/stories/datagrid-keyboard-navigation.story.js

@@ -35,7 +35,10 @@ const selectableColumn = {
 const actionsColumn = (tableNav) => ({
     cell: ({ row }) => {
         const options = ['Edit', 'Delete', 'View'];
-        const dropdownOptions = options.map((o) => ({ label: o, value: o }));
+        const dropdownOptions = options.map((option) => ({
+            label: option,
+            value: option,
+        }));
         // eslint-disable-next-line react-hooks/rules-of-hooks
         const [selected, setSelected] = useState(dropdownOptions[0]);
         // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -46,16 +49,16 @@ const actionsColumn = (tableNav) => ({
                         type: 'button',
                     }, children: _jsx(MegaphoneIconOutline, {}) }), _jsx(Select, { ariaLabel: `actions-select-row-${row.index}`, type: "select", selectProps: {
                         menuPortalTarget: portalTarget,
-                        onChange: (e) => {
-                            if (!e) {
+                        onChange: (event) => {
+                            if (!event) {
                                 return;
                             }
-                            setSelected(e);
+                            setSelected(event);
                         },
-                        onKeyDown: (e) => {
+                        onKeyDown: (event) => {
                             // Stop propagation of arrow down to the table, to avoid moving to the next item in the cell
-                            if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
-                                e.stopPropagation();
+                            if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                                event.stopPropagation();
                             }
                         },
                         onMenuClose: () => {

package/lib/esm/data-grid/stories/datagrid-keyboard-navigation.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"datagrid-keyboard-navigation.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-keyboard-navigation.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n  Checkbox,\n  DataGrid,\n  type DataGridNav,\n  IconButton,\n  Select,\n  useDataGridContext,\n} from '@neo4j-ndl/react';\nimport { MegaphoneIconOutline } from '@neo4j-ndl/react/icons';\nimport {\n  type ColumnDef,\n  createColumnHelper,\n  getCoreRowModel,\n  getPaginationRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\nimport { useRef, useState } from 'react';\n\nimport { TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n  name: string;\n  age: number;\n  cypherCommand: string;\n};\n\nconst selectableColumn: ColumnDef<TestDataFormat> = {\n  cell: ({ row }) => (\n    <Checkbox\n      ariaLabel={`row-${row.index}`}\n      isChecked={row.getIsSelected() || false}\n      onChange={row.getToggleSelectedHandler()}\n    />\n  ),\n  header: ({ table }) => (\n    <Checkbox\n      ariaLabel=\"Select all rows\"\n      isChecked={table.getIsAllRowsSelected() || false}\n      onChange={table.getToggleAllRowsSelectedHandler()}\n      isIndeterminate={table.getIsSomeRowsSelected()}\n    />\n  ),\n  id: 'select',\n  maxSize: 80,\n  size: 80,\n};\n\nconst actionsColumn: (tableNav: DataGridNav) => ColumnDef<TestDataFormat> = (\n  tableNav,\n) => ({\n  cell: ({ row }) => {\n    const options = ['Edit', 'Delete', 'View'];\n    const dropdownOptions = options.map((o) => ({ label: o, value: o }));\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const [selected, setSelected] = useState(dropdownOptions[0]);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const { portalTarget } = useDataGridContext();\n\n    return (\n      <div\n        data-testid={`ndl-actions-cell-row-${row.index}`}\n        className=\"n-flex n-flex-row n-gap-token-8\"\n      >\n        <IconButton\n          description=\"Megaphone\"\n          onClick={() => {\n            alert(\"Let's get loud 📣\");\n          }}\n          htmlAttributes={{\n            type: 'button',\n          }}\n        >\n          <MegaphoneIconOutline />\n        </IconButton>\n        <Select\n          ariaLabel={`actions-select-row-${row.index}`}\n          type=\"select\"\n          selectProps={{\n            menuPortalTarget: portalTarget,\n            onChange: (e) => {\n              if (!e) {\n                return;\n              }\n              setSelected(e);\n            },\n            onKeyDown: (e) => {\n              // Stop propagation of arrow down to the table, to avoid moving to the next item in the cell\n              if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n                e.stopPropagation();\n              }\n            },\n            onMenuClose: () => {\n              console.info(\n                'Start listening to keyboard events for table navigation',\n              );\n              tableNav.enable();\n            },\n            onMenuOpen: () => {\n              console.info(\n                'Stop listening to keyboard events for table navigation',\n              );\n              tableNav.disable();\n            },\n            options: dropdownOptions,\n            value: selected,\n          }}\n        />\n      </div>\n    );\n  },\n  header: 'actions',\n  id: 'actions',\n});\n\nconst allColumns = (tableNav: DataGridNav) => {\n  const columnHelper = createColumnHelper<TestDataFormat>();\n\n  const commonColumns = [\n    columnHelper.accessor('name', {\n      cell: (info) => info.getValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Name',\n      maxSize: 300,\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => info.renderValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Age',\n      minSize: 80,\n    }),\n  ];\n\n  return [selectableColumn, ...commonColumns, actionsColumn(tableNav)];\n};\n\nconst Component = () => {\n  const [rowSelection, setRowSelection] = useState({});\n  const ref = useRef<HTMLDivElement>(null);\n  const tableNavRef = useRef<DataGridNav>(null!);\n\n  const table = useReactTable({\n    columnResizeMode: 'onChange',\n    columns: allColumns(tableNavRef.current),\n    data: TABLE_DEMO_DATA,\n    enableSorting: false,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    initialState: {\n      pagination: {\n        pageSize: 5,\n      },\n    },\n    onRowSelectionChange: setRowSelection,\n    state: {\n      rowSelection,\n    },\n  });\n\n  return (\n    <>\n      <DataGrid\n        isResizable={false}\n        isKeyboardNavigable={true}\n        styling={{\n          borderStyle: 'all-sides',\n        }}\n        tableNavRef={tableNavRef}\n        tableInstance={table}\n        ref={ref}\n        portalTarget={document.body}\n      />\n    </>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"datagrid-keyboard-navigation.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-keyboard-navigation.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n  Checkbox,\n  DataGrid,\n  type DataGridNav,\n  IconButton,\n  Select,\n  useDataGridContext,\n} from '@neo4j-ndl/react';\nimport { MegaphoneIconOutline } from '@neo4j-ndl/react/icons';\nimport {\n  type ColumnDef,\n  createColumnHelper,\n  getCoreRowModel,\n  getPaginationRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\nimport { useRef, useState } from 'react';\n\nimport { TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n  name: string;\n  age: number;\n  cypherCommand: string;\n};\n\nconst selectableColumn: ColumnDef<TestDataFormat> = {\n  cell: ({ row }) => (\n    <Checkbox\n      ariaLabel={`row-${row.index}`}\n      isChecked={row.getIsSelected() || false}\n      onChange={row.getToggleSelectedHandler()}\n    />\n  ),\n  header: ({ table }) => (\n    <Checkbox\n      ariaLabel=\"Select all rows\"\n      isChecked={table.getIsAllRowsSelected() || false}\n      onChange={table.getToggleAllRowsSelectedHandler()}\n      isIndeterminate={table.getIsSomeRowsSelected()}\n    />\n  ),\n  id: 'select',\n  maxSize: 80,\n  size: 80,\n};\n\nconst actionsColumn: (tableNav: DataGridNav) => ColumnDef<TestDataFormat> = (\n  tableNav,\n) => ({\n  cell: ({ row }) => {\n    const options = ['Edit', 'Delete', 'View'];\n    const dropdownOptions = options.map((option) => ({\n      label: option,\n      value: option,\n    }));\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const [selected, setSelected] = useState(dropdownOptions[0]);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const { portalTarget } = useDataGridContext();\n\n    return (\n      <div\n        data-testid={`ndl-actions-cell-row-${row.index}`}\n        className=\"n-flex n-flex-row n-gap-token-8\"\n      >\n        <IconButton\n          description=\"Megaphone\"\n          onClick={() => {\n            alert(\"Let's get loud 📣\");\n          }}\n          htmlAttributes={{\n            type: 'button',\n          }}\n        >\n          <MegaphoneIconOutline />\n        </IconButton>\n        <Select\n          ariaLabel={`actions-select-row-${row.index}`}\n          type=\"select\"\n          selectProps={{\n            menuPortalTarget: portalTarget,\n            onChange: (event) => {\n              if (!event) {\n                return;\n              }\n              setSelected(event);\n            },\n            onKeyDown: (event) => {\n              // Stop propagation of arrow down to the table, to avoid moving to the next item in the cell\n              if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n                event.stopPropagation();\n              }\n            },\n            onMenuClose: () => {\n              console.info(\n                'Start listening to keyboard events for table navigation',\n              );\n              tableNav.enable();\n            },\n            onMenuOpen: () => {\n              console.info(\n                'Stop listening to keyboard events for table navigation',\n              );\n              tableNav.disable();\n            },\n            options: dropdownOptions,\n            value: selected,\n          }}\n        />\n      </div>\n    );\n  },\n  header: 'actions',\n  id: 'actions',\n});\n\nconst allColumns = (tableNav: DataGridNav) => {\n  const columnHelper = createColumnHelper<TestDataFormat>();\n\n  const commonColumns = [\n    columnHelper.accessor('name', {\n      cell: (info) => info.getValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Name',\n      maxSize: 300,\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => info.renderValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Age',\n      minSize: 80,\n    }),\n  ];\n\n  return [selectableColumn, ...commonColumns, actionsColumn(tableNav)];\n};\n\nconst Component = () => {\n  const [rowSelection, setRowSelection] = useState({});\n  const ref = useRef<HTMLDivElement>(null);\n  const tableNavRef = useRef<DataGridNav>(null!);\n\n  const table = useReactTable({\n    columnResizeMode: 'onChange',\n    columns: allColumns(tableNavRef.current),\n    data: TABLE_DEMO_DATA,\n    enableSorting: false,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    initialState: {\n      pagination: {\n        pageSize: 5,\n      },\n    },\n    onRowSelectionChange: setRowSelection,\n    state: {\n      rowSelection,\n    },\n  });\n\n  return (\n    <>\n      <DataGrid\n        isResizable={false}\n        isKeyboardNavigable={true}\n        styling={{\n          borderStyle: 'all-sides',\n        }}\n        tableNavRef={tableNavRef}\n        tableInstance={table}\n        ref={ref}\n        portalTarget={document.body}\n      />\n    </>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/data-grid/stories/datagrid-rule-based-styling-datetime.story.js

@@ -114,8 +114,8 @@ const data = [
  *   2026-07-15T00:00:00[Europe/Stockholm] = 2026-07-14T22:00:00Z
  *
  * Business hours (Stockholm):
- *   { time: '09:00:00+02:00' } resolves to 07:00 UTC (25 200 000 ms)
- *   { time: '17:00:00+02:00' } resolves to 15:00 UTC (54 000 000 ms)
+ *   `{ time: '09:00:00+02:00' }` resolves to 07:00 UTC (25 200 000 ms)
+ *   `{ time: '17:00:00+02:00' }` resolves to 15:00 UTC (54 000 000 ms)
  */
 const styleRules = [
     // Near-future date cells use temporal literals directly as gradient
@@ -257,13 +257,13 @@ const Component = () => {
         columnHelper.accessor('scheduledTimeMs', {
             cell: (info) => {
                 const ms = info.getValue();
-                const h = Math.floor(ms / 3600000)
+                const hours = Math.floor(ms / 3600000)
                     .toString()
                     .padStart(2, '0');
-                const m = Math.floor((ms % 3600000) / 60000)
+                const minutes = Math.floor((ms % 3600000) / 60000)
                     .toString()
                     .padStart(2, '0');
-                return `${h}:${m} UTC`;
+                return `${hours}:${minutes} UTC`;
             },
             header: () => 'Time (UTC)',
             minSize: 110,

package/lib/esm/data-grid/stories/datagrid-rule-based-styling-datetime.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"datagrid-rule-based-styling-datetime.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-rule-based-styling-datetime.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DataGrid } from '@neo4j-ndl/react';\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\n\nimport { type DataGridStyleRule } from '../style-rules/types';\n\ntype EventRow = {\n  event: string;\n  /**\n   * JS Date coerced from the event's local ISO string. Natively converted to\n   * Unix ms by the engine and compared against { datetime: \"...\" } literals.\n   */\n  scheduledDate: Date;\n  /**\n   * UTC milliseconds since midnight. Compared against { time: \"...\" } literals\n   * that are defined in Stockholm / CEST (+02:00) time — the engine normalises\n   * both sides to UTC before comparing.\n   */\n  scheduledTimeMs: number;\n  /** Human-readable local time shown in the cell, e.g. \"09:00 CEST (+02:00)\". */\n  localTimeDisplay: string;\n  status: 'confirmed' | 'delayed' | 'cancelled';\n};\n\nconst data: EventRow[] = [\n  // ── Past events (before start of 2026-06-25 in Stockholm / CEST) ──────────\n  {\n    event: 'Quarterly review',\n    localTimeDisplay: '09:00 CEST (+02:00)',\n    // 09:00 Stockholm CEST = 07:00 UTC\n    scheduledDate: new Date('2026-06-10T09:00:00+02:00'),\n    scheduledTimeMs: 7 * 3_600_000,\n    status: 'confirmed',\n  },\n  {\n    event: 'Security audit',\n    localTimeDisplay: '07:30 BST (+01:00)',\n    // 07:30 London BST (+01:00) = 06:30 UTC — before Stockholm opens\n    scheduledDate: new Date('2026-06-18T07:30:00+01:00'),\n    scheduledTimeMs: 6 * 3_600_000 + 30 * 60_000,\n    status: 'delayed',\n  },\n  // ── Today (2026-06-25 in Stockholm / CEST) ─────────────────────────────────\n  {\n    event: 'Customer demo',\n    localTimeDisplay: '09:00 EDT (-04:00)',\n    // 09:00 New York EDT (-04:00) = 13:00 UTC\n    scheduledDate: new Date('2026-06-25T09:00:00-04:00'),\n    scheduledTimeMs: 13 * 3_600_000,\n    status: 'confirmed',\n  },\n  {\n    event: 'Platform migration',\n    localTimeDisplay: '22:00 CEST (+02:00)',\n    // 22:00 Stockholm CEST (+02:00) = 20:00 UTC — after Stockholm closes\n    scheduledDate: new Date('2026-06-25T22:00:00+02:00'),\n    scheduledTimeMs: 20 * 3_600_000,\n    status: 'confirmed',\n  },\n  // ── Near future (up to and including 2026-07-14 in Stockholm) ─────────────\n  {\n    event: 'Board presentation',\n    localTimeDisplay: '10:00 SGT (+08:00)',\n    // 10:00 Singapore SGT (+08:00) = 02:00 UTC — before Stockholm opens\n    scheduledDate: new Date('2026-07-02T10:00:00+08:00'),\n    scheduledTimeMs: 2 * 3_600_000,\n    status: 'confirmed',\n  },\n  {\n    event: 'Partner onboarding',\n    localTimeDisplay: '13:15 CEST (+02:00)',\n    // 13:15 Paris CEST (+02:00) = 11:15 UTC\n    scheduledDate: new Date('2026-07-08T13:15:00+02:00'),\n    scheduledTimeMs: 11 * 3_600_000 + 15 * 60_000,\n    status: 'confirmed',\n  },\n  {\n    event: 'Architecture summit',\n    localTimeDisplay: '08:00 CEST (+02:00)',\n    // 08:00 Amsterdam CEST (+02:00) = 06:00 UTC\n    scheduledDate: new Date('2026-07-11T08:00:00+02:00'),\n    scheduledTimeMs: 6 * 3_600_000,\n    status: 'confirmed',\n  },\n  {\n    event: 'Annual conference',\n    localTimeDisplay: '09:00 PDT (-07:00)',\n    // 09:00 San Francisco PDT (-07:00) = 16:00 UTC — after Stockholm closes\n    scheduledDate: new Date('2026-07-13T09:00:00-07:00'),\n    scheduledTimeMs: 16 * 3_600_000,\n    status: 'confirmed',\n  },\n  // ── Far future (after 2026-07-15T00:00 Stockholm / CEST = 2026-07-14T22:00Z)\n  {\n    event: 'Year-end planning',\n    localTimeDisplay: '09:00 JST (+09:00)',\n    // 09:00 Tokyo JST (+09:00) = 00:00 UTC — midnight, well before Stockholm opens\n    scheduledDate: new Date('2026-11-20T09:00:00+09:00'),\n    scheduledTimeMs: 0,\n    status: 'cancelled',\n  },\n];\n\n/**\n * All date and time boundaries are anchored to Stockholm in June–July 2026.\n * Date literals use RFC 9557 IANA bracket notation — the UTC offset is inferred\n * from the named zone (CEST = +02:00 in this period); writing `+02:00` explicitly\n * is optional. Time literals use UTC-offset notation.\n *\n * \"Today\" from a Stockholm perspective:\n *   2026-06-25T00:00:00[Europe/Stockholm] = 2026-06-24T22:00:00Z\n *   2026-06-26T00:00:00[Europe/Stockholm] = 2026-06-25T22:00:00Z\n *\n * \"Far future\" threshold:\n *   2026-07-15T00:00:00[Europe/Stockholm] = 2026-07-14T22:00:00Z\n *\n * Business hours (Stockholm):\n *   { time: '09:00:00+02:00' } resolves to 07:00 UTC (25 200 000 ms)\n *   { time: '17:00:00+02:00' } resolves to 15:00 UTC (54 000 000 ms)\n */\nconst styleRules: DataGridStyleRule[] = [\n  // Near-future date cells use temporal literals directly as gradient\n  // boundaries. Several rows are spread across this interval so the progression\n  // from amber to blue is easy to see.\n  {\n    apply: {\n      colorRange: {\n        maxColor: '#dbeafe',\n        maxValue: {\n          datetime: '2026-07-15T00:00:00[Europe/Stockholm]',\n        },\n        minColor: '#fef3c7',\n        minValue: {\n          datetime: '2026-06-26T00:00:00[Europe/Stockholm]',\n        },\n        onColumn: 'scheduledDate',\n      },\n    },\n    column: 'scheduledDate',\n    priority: 0,\n  },\n  // Past events — entire row in muted red\n  {\n    apply: {\n      color: { value: '#fee2e2' },\n      textColor: { value: '#7f1d1d' },\n    },\n    column: null,\n    priority: 1,\n    where: {\n      lessThan: [\n        { column: 'scheduledDate' },\n        { datetime: '2026-06-25T00:00:00[Europe/Stockholm]' },\n      ],\n    },\n  },\n  // Today (in Stockholm timezone) — entire row in amber\n  {\n    apply: {\n      color: { value: '#fef9c3' },\n      textColor: { value: '#713f12' },\n    },\n    column: null,\n    priority: 1,\n    where: {\n      and: [\n        {\n          greaterThanOrEqual: [\n            { column: 'scheduledDate' },\n            { datetime: '2026-06-25T00:00:00[Europe/Stockholm]' },\n          ],\n        },\n        {\n          lessThan: [\n            { column: 'scheduledDate' },\n            { datetime: '2026-06-26T00:00:00[Europe/Stockholm]' },\n          ],\n        },\n      ],\n    },\n  },\n  // Far future (after 2026-07-15 midnight Stockholm time) — entire row in green\n  {\n    apply: {\n      color: { value: '#dcfce7' },\n      textColor: { value: '#14532d' },\n    },\n    column: null,\n    priority: 1,\n    where: {\n      greaterThanOrEqual: [\n        { column: 'scheduledDate' },\n        { datetime: '2026-07-15T00:00:00[Europe/Stockholm]' },\n      ],\n    },\n  },\n  // Outside Stockholm business hours (before 09:00 CEST or from 17:00 CEST) —\n  // time cell in orange. The { time: \"...\" } literals carry an offset so the\n  // engine normalises them to UTC before comparing against scheduledTimeMs.\n  {\n    apply: {\n      color: { value: '#ffedd5' },\n      textColor: { value: '#7c2d12' },\n    },\n    column: 'scheduledTimeMs',\n    priority: 2,\n    where: {\n      or: [\n        {\n          lessThan: [{ column: 'scheduledTimeMs' }, { time: '09:00:00+02:00' }],\n        },\n        {\n          greaterThanOrEqual: [\n            { column: 'scheduledTimeMs' },\n            { time: '17:00:00+02:00' },\n          ],\n        },\n      ],\n    },\n  },\n  // Cancelled events — all cells grayed out at highest priority\n  {\n    apply: {\n      color: { value: '#f3f4f6' },\n      textColor: { value: '#9ca3af' },\n    },\n    column: null,\n    priority: 5,\n    where: { equal: [{ column: 'status' }, 'cancelled'] },\n  },\n];\n\nconst Component = () => {\n  const columnHelper = createColumnHelper<EventRow>();\n\n  const columns = [\n    columnHelper.accessor('event', {\n      cell: (info) => info.getValue(),\n      header: () => 'Event',\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('scheduledDate', {\n      cell: (info) =>\n        info.getValue().toLocaleDateString('en-GB', {\n          day: 'numeric',\n          month: 'short',\n          timeZone: 'Europe/Stockholm',\n          year: 'numeric',\n        }),\n      header: () => 'Date (Stockholm)',\n      minSize: 150,\n      size: 170,\n    }),\n    columnHelper.accessor('localTimeDisplay', {\n      cell: (info) => info.getValue(),\n      header: () => 'Local time',\n      minSize: 160,\n      size: 180,\n    }),\n    columnHelper.accessor('scheduledTimeMs', {\n      cell: (info) => {\n        const ms = info.getValue();\n        const h = Math.floor(ms / 3_600_000)\n          .toString()\n          .padStart(2, '0');\n        const m = Math.floor((ms % 3_600_000) / 60_000)\n          .toString()\n          .padStart(2, '0');\n        return `${h}:${m} UTC`;\n      },\n      header: () => 'Time (UTC)',\n      minSize: 110,\n      size: 130,\n    }),\n    columnHelper.accessor('status', {\n      cell: (info) => info.getValue(),\n      header: () => 'Status',\n      minSize: 100,\n      size: 120,\n    }),\n  ];\n\n  const table = useReactTable({\n    columnResizeMode: 'onChange',\n    columns,\n    data,\n    defaultColumn: {\n      maxSize: 800,\n      minSize: 80,\n    },\n    enableSorting: true,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    initialState: {\n      pagination: { pageSize: 10 },\n    },\n  });\n\n  return (\n    <div className=\"n-w-full n-bg-light-neutral-text-weakest\">\n      <DataGrid\n        isResizable={false}\n        isKeyboardNavigable={false}\n        tableInstance={table}\n        styleRules={styleRules}\n        styling={{\n          borderStyle: 'all-sides',\n          hasHoverEffects: true,\n          hasZebraStriping: false,\n        }}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"datagrid-rule-based-styling-datetime.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-rule-based-styling-datetime.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DataGrid } from '@neo4j-ndl/react';\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\n\nimport { type DataGridStyleRule } from '../style-rules/types';\n\ntype EventRow = {\n  event: string;\n  /**\n   * JS Date coerced from the event's local ISO string. Natively converted to\n   * Unix ms by the engine and compared against `{ datetime: \"...\" }` literals.\n   */\n  scheduledDate: Date;\n  /**\n   * UTC milliseconds since midnight. Compared against `{ time: \"...\" }` literals\n   * that are defined in Stockholm / CEST (+02:00) time — the engine normalises\n   * both sides to UTC before comparing.\n   */\n  scheduledTimeMs: number;\n  /** Human-readable local time shown in the cell, e.g. \"09:00 CEST (+02:00)\". */\n  localTimeDisplay: string;\n  status: 'confirmed' | 'delayed' | 'cancelled';\n};\n\nconst data: EventRow[] = [\n  // ── Past events (before start of 2026-06-25 in Stockholm / CEST) ──────────\n  {\n    event: 'Quarterly review',\n    localTimeDisplay: '09:00 CEST (+02:00)',\n    // 09:00 Stockholm CEST = 07:00 UTC\n    scheduledDate: new Date('2026-06-10T09:00:00+02:00'),\n    scheduledTimeMs: 7 * 3_600_000,\n    status: 'confirmed',\n  },\n  {\n    event: 'Security audit',\n    localTimeDisplay: '07:30 BST (+01:00)',\n    // 07:30 London BST (+01:00) = 06:30 UTC — before Stockholm opens\n    scheduledDate: new Date('2026-06-18T07:30:00+01:00'),\n    scheduledTimeMs: 6 * 3_600_000 + 30 * 60_000,\n    status: 'delayed',\n  },\n  // ── Today (2026-06-25 in Stockholm / CEST) ─────────────────────────────────\n  {\n    event: 'Customer demo',\n    localTimeDisplay: '09:00 EDT (-04:00)',\n    // 09:00 New York EDT (-04:00) = 13:00 UTC\n    scheduledDate: new Date('2026-06-25T09:00:00-04:00'),\n    scheduledTimeMs: 13 * 3_600_000,\n    status: 'confirmed',\n  },\n  {\n    event: 'Platform migration',\n    localTimeDisplay: '22:00 CEST (+02:00)',\n    // 22:00 Stockholm CEST (+02:00) = 20:00 UTC — after Stockholm closes\n    scheduledDate: new Date('2026-06-25T22:00:00+02:00'),\n    scheduledTimeMs: 20 * 3_600_000,\n    status: 'confirmed',\n  },\n  // ── Near future (up to and including 2026-07-14 in Stockholm) ─────────────\n  {\n    event: 'Board presentation',\n    localTimeDisplay: '10:00 SGT (+08:00)',\n    // 10:00 Singapore SGT (+08:00) = 02:00 UTC — before Stockholm opens\n    scheduledDate: new Date('2026-07-02T10:00:00+08:00'),\n    scheduledTimeMs: 2 * 3_600_000,\n    status: 'confirmed',\n  },\n  {\n    event: 'Partner onboarding',\n    localTimeDisplay: '13:15 CEST (+02:00)',\n    // 13:15 Paris CEST (+02:00) = 11:15 UTC\n    scheduledDate: new Date('2026-07-08T13:15:00+02:00'),\n    scheduledTimeMs: 11 * 3_600_000 + 15 * 60_000,\n    status: 'confirmed',\n  },\n  {\n    event: 'Architecture summit',\n    localTimeDisplay: '08:00 CEST (+02:00)',\n    // 08:00 Amsterdam CEST (+02:00) = 06:00 UTC\n    scheduledDate: new Date('2026-07-11T08:00:00+02:00'),\n    scheduledTimeMs: 6 * 3_600_000,\n    status: 'confirmed',\n  },\n  {\n    event: 'Annual conference',\n    localTimeDisplay: '09:00 PDT (-07:00)',\n    // 09:00 San Francisco PDT (-07:00) = 16:00 UTC — after Stockholm closes\n    scheduledDate: new Date('2026-07-13T09:00:00-07:00'),\n    scheduledTimeMs: 16 * 3_600_000,\n    status: 'confirmed',\n  },\n  // ── Far future (after 2026-07-15T00:00 Stockholm / CEST = 2026-07-14T22:00Z)\n  {\n    event: 'Year-end planning',\n    localTimeDisplay: '09:00 JST (+09:00)',\n    // 09:00 Tokyo JST (+09:00) = 00:00 UTC — midnight, well before Stockholm opens\n    scheduledDate: new Date('2026-11-20T09:00:00+09:00'),\n    scheduledTimeMs: 0,\n    status: 'cancelled',\n  },\n];\n\n/**\n * All date and time boundaries are anchored to Stockholm in June–July 2026.\n * Date literals use RFC 9557 IANA bracket notation — the UTC offset is inferred\n * from the named zone (CEST = +02:00 in this period); writing `+02:00` explicitly\n * is optional. Time literals use UTC-offset notation.\n *\n * \"Today\" from a Stockholm perspective:\n *   2026-06-25T00:00:00[Europe/Stockholm] = 2026-06-24T22:00:00Z\n *   2026-06-26T00:00:00[Europe/Stockholm] = 2026-06-25T22:00:00Z\n *\n * \"Far future\" threshold:\n *   2026-07-15T00:00:00[Europe/Stockholm] = 2026-07-14T22:00:00Z\n *\n * Business hours (Stockholm):\n *   `{ time: '09:00:00+02:00' }` resolves to 07:00 UTC (25 200 000 ms)\n *   `{ time: '17:00:00+02:00' }` resolves to 15:00 UTC (54 000 000 ms)\n */\nconst styleRules: DataGridStyleRule[] = [\n  // Near-future date cells use temporal literals directly as gradient\n  // boundaries. Several rows are spread across this interval so the progression\n  // from amber to blue is easy to see.\n  {\n    apply: {\n      colorRange: {\n        maxColor: '#dbeafe',\n        maxValue: {\n          datetime: '2026-07-15T00:00:00[Europe/Stockholm]',\n        },\n        minColor: '#fef3c7',\n        minValue: {\n          datetime: '2026-06-26T00:00:00[Europe/Stockholm]',\n        },\n        onColumn: 'scheduledDate',\n      },\n    },\n    column: 'scheduledDate',\n    priority: 0,\n  },\n  // Past events — entire row in muted red\n  {\n    apply: {\n      color: { value: '#fee2e2' },\n      textColor: { value: '#7f1d1d' },\n    },\n    column: null,\n    priority: 1,\n    where: {\n      lessThan: [\n        { column: 'scheduledDate' },\n        { datetime: '2026-06-25T00:00:00[Europe/Stockholm]' },\n      ],\n    },\n  },\n  // Today (in Stockholm timezone) — entire row in amber\n  {\n    apply: {\n      color: { value: '#fef9c3' },\n      textColor: { value: '#713f12' },\n    },\n    column: null,\n    priority: 1,\n    where: {\n      and: [\n        {\n          greaterThanOrEqual: [\n            { column: 'scheduledDate' },\n            { datetime: '2026-06-25T00:00:00[Europe/Stockholm]' },\n          ],\n        },\n        {\n          lessThan: [\n            { column: 'scheduledDate' },\n            { datetime: '2026-06-26T00:00:00[Europe/Stockholm]' },\n          ],\n        },\n      ],\n    },\n  },\n  // Far future (after 2026-07-15 midnight Stockholm time) — entire row in green\n  {\n    apply: {\n      color: { value: '#dcfce7' },\n      textColor: { value: '#14532d' },\n    },\n    column: null,\n    priority: 1,\n    where: {\n      greaterThanOrEqual: [\n        { column: 'scheduledDate' },\n        { datetime: '2026-07-15T00:00:00[Europe/Stockholm]' },\n      ],\n    },\n  },\n  // Outside Stockholm business hours (before 09:00 CEST or from 17:00 CEST) —\n  // time cell in orange. The { time: \"...\" } literals carry an offset so the\n  // engine normalises them to UTC before comparing against scheduledTimeMs.\n  {\n    apply: {\n      color: { value: '#ffedd5' },\n      textColor: { value: '#7c2d12' },\n    },\n    column: 'scheduledTimeMs',\n    priority: 2,\n    where: {\n      or: [\n        {\n          lessThan: [{ column: 'scheduledTimeMs' }, { time: '09:00:00+02:00' }],\n        },\n        {\n          greaterThanOrEqual: [\n            { column: 'scheduledTimeMs' },\n            { time: '17:00:00+02:00' },\n          ],\n        },\n      ],\n    },\n  },\n  // Cancelled events — all cells grayed out at highest priority\n  {\n    apply: {\n      color: { value: '#f3f4f6' },\n      textColor: { value: '#9ca3af' },\n    },\n    column: null,\n    priority: 5,\n    where: { equal: [{ column: 'status' }, 'cancelled'] },\n  },\n];\n\nconst Component = () => {\n  const columnHelper = createColumnHelper<EventRow>();\n\n  const columns = [\n    columnHelper.accessor('event', {\n      cell: (info) => info.getValue(),\n      header: () => 'Event',\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('scheduledDate', {\n      cell: (info) =>\n        info.getValue().toLocaleDateString('en-GB', {\n          day: 'numeric',\n          month: 'short',\n          timeZone: 'Europe/Stockholm',\n          year: 'numeric',\n        }),\n      header: () => 'Date (Stockholm)',\n      minSize: 150,\n      size: 170,\n    }),\n    columnHelper.accessor('localTimeDisplay', {\n      cell: (info) => info.getValue(),\n      header: () => 'Local time',\n      minSize: 160,\n      size: 180,\n    }),\n    columnHelper.accessor('scheduledTimeMs', {\n      cell: (info) => {\n        const ms = info.getValue();\n        const hours = Math.floor(ms / 3_600_000)\n          .toString()\n          .padStart(2, '0');\n        const minutes = Math.floor((ms % 3_600_000) / 60_000)\n          .toString()\n          .padStart(2, '0');\n        return `${hours}:${minutes} UTC`;\n      },\n      header: () => 'Time (UTC)',\n      minSize: 110,\n      size: 130,\n    }),\n    columnHelper.accessor('status', {\n      cell: (info) => info.getValue(),\n      header: () => 'Status',\n      minSize: 100,\n      size: 120,\n    }),\n  ];\n\n  const table = useReactTable({\n    columnResizeMode: 'onChange',\n    columns,\n    data,\n    defaultColumn: {\n      maxSize: 800,\n      minSize: 80,\n    },\n    enableSorting: true,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    initialState: {\n      pagination: { pageSize: 10 },\n    },\n  });\n\n  return (\n    <div className=\"n-w-full n-bg-light-neutral-text-weakest\">\n      <DataGrid\n        isResizable={false}\n        isKeyboardNavigable={false}\n        tableInstance={table}\n        styleRules={styleRules}\n        styling={{\n          borderStyle: 'all-sides',\n          hasHoverEffects: true,\n          hasZebraStriping: false,\n        }}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/data-grid/stories/datagrid-search-and-filters.stories.js

@@ -147,7 +147,7 @@ export const Searchable = () => {
         }
         return false;
     };
-    return (_jsxs("div", { className: "n-flex n-flex-col", ref: ref, children: [_jsx("div", { className: "n-flex n-flex-col n-gap-token-16 n-pb-token-16", children: _jsxs("div", { className: "n-flex n-gap-token-8", children: [_jsx(TextInput, { "aria-label": "Table search", value: globalFilter, placeholder: "Search", leadingElement: _jsx(MagnifyingGlassIconOutline, {}), isClearable: true, onChange: (e) => setGlobalFilter(e.target.value) }), _jsx(OpenFilterMenuIconButton, { isOpen: isOpen, onClick: handleClick, description: "Filter Menu" })] }) }), _jsx(Divider, {}), _jsx(DataGrid, { isResizable: true, tableInstance: table }), _jsx(Popover, { isOpen: isOpen, anchorElement: anchorEl, onOpenChange: (isOpen) => {
+    return (_jsxs("div", { className: "n-flex n-flex-col", ref: ref, children: [_jsx("div", { className: "n-flex n-flex-col n-gap-token-16 n-pb-token-16", children: _jsxs("div", { className: "n-flex n-gap-token-8", children: [_jsx(TextInput, { "aria-label": "Table search", value: globalFilter, placeholder: "Search", leadingElement: _jsx(MagnifyingGlassIconOutline, {}), isClearable: true, onChange: (event) => setGlobalFilter(event.target.value) }), _jsx(OpenFilterMenuIconButton, { isOpen: isOpen, onClick: handleClick, description: "Filter Menu" })] }) }), _jsx(Divider, {}), _jsx(DataGrid, { isResizable: true, tableInstance: table }), _jsx(Popover, { isOpen: isOpen, anchorElement: anchorEl, onOpenChange: (isOpen) => {
                     if (!isOpen) {
                         handleClose();
                     }