@gobolt/genesis 0.4.9 → 0.4.11

package/dist/components/Table/TablePagination.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { PaginationStyle } from './TableControls/CustomPagination';
 import { ColumnType } from 'antd/es/table';
 export interface TablePaginationProps<T> {
@@ -5,9 +6,10 @@ export interface TablePaginationProps<T> {
     dataSource: T[];
     rowSelection?: any;
     onChange?: (...arguments_: any[]) => void;
+    onRowClick?: (record: T, index: number, event: React.MouseEvent) => void;
     paginationStyle?: PaginationStyle;
     pageSize?: number;
     isMainContentCell?: boolean;
 }
-declare const TablePagination: <T extends Record<string, any>>({ columns, dataSource, rowSelection, onChange, paginationStyle, pageSize, isMainContentCell, }: TablePaginationProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const TablePagination: <T extends Record<string, any>>({ columns, dataSource, rowSelection, onChange, onRowClick, paginationStyle, pageSize, isMainContentCell, }: TablePaginationProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default TablePagination;

package/dist/index.cjs

@@ -77647,8 +77647,10 @@ const Tooltip2 = ({
             }
           ) }),
           open: isVisible2,
-          overlayStyle: {
-            pointerEvents: "none"
+          styles: {
+            root: {
+              pointerEvents: "none"
+            }
           },
           children: children2
         }
@@ -83525,6 +83527,12 @@ const getGenesisClass$1 = ({ colors: colors2, borderRadius: borderRadius2, sizin
       background-color: ${components2.tableCell.selected} !important;
       color: #fff !important;
     }
+
+    .ant-table-tbody > tr.ant-table-row-pressed > td,
+    .ant-table-tbody > tr.ant-table-row-pressed > .ant-table-cell {
+      background-color: ${components2.tableCell.selected} !important;
+      color: #fff !important;
+    }
   `;
 };
 const Table$1 = styled(ForwardTable)`
@@ -83989,6 +83997,9 @@ function Table({
     400
   );
   const [selectedRowKeys, setSelectedRowKeys] = React__namespace.useState([]);
+  const [pressedRowKey, setPressedRowKey] = React__namespace.useState(
+    null
+  );
   const tableRef = React__namespace.useRef(null);
   const containerRef = React__namespace.useRef(null);
   React__namespace.useEffect(() => {
@@ -84091,44 +84102,85 @@ function Table({
     return rest.scroll;
   }, [isMaterializedView, materializedViewConfig, dynamicHeight, rest.scroll]);
   const tableDataSource = isMaterializedView ? materializedData : dataSource;
-  const handleRowClick = React__namespace.useCallback(
+  React__namespace.useEffect(() => {
+    if (tableDataSource && tableDataSource.length > 0) {
+      console.log(
+        "Genesis Table - tableDataSource length:",
+        tableDataSource.length
+      );
+      console.log("Genesis Table - rowKey type:", typeof rowKey);
+      tableDataSource.slice(0, 3).map((record, index2) => {
+        const key = typeof rowKey === "function" ? rowKey(record) : record[rowKey];
+        console.log(
+          `Genesis Table - Record ${index2} key:`,
+          key,
+          "Record:",
+          record
+        );
+        return key;
+      });
+      const allKeys = tableDataSource.map(
+        (record) => typeof rowKey === "function" ? rowKey(record) : record[rowKey]
+      );
+      const uniqueKeys = [...new Set(allKeys)];
+      console.log(
+        `Genesis Table - Total keys: ${allKeys.length}, Unique keys: ${uniqueKeys.length}`
+      );
+      if (allKeys.length !== uniqueKeys.length) {
+        console.error("Genesis Table - DUPLICATE KEYS FOUND:", allKeys);
+        const duplicates = allKeys.filter(
+          (key, index2) => allKeys.indexOf(key) !== index2
+        );
+        console.error("Genesis Table - Duplicate keys:", [
+          ...new Set(duplicates)
+        ]);
+      }
+    }
+  }, [tableDataSource, rowKey]);
+  const handleRowMouseDown = React__namespace.useCallback(
     (record, index2, event) => {
-      console.log("Row clicked:", record, "index:", index2);
       const target = event.target;
       const isInteractiveElement = target.closest(
-        'button, a, input, select, textarea, [role="button"], [onclick]'
+        'button, a, input, select, textarea, [role="button"], [onclick], .ant-checkbox-wrapper, .ant-checkbox'
       );
-      console.log("Is interactive element:", isInteractiveElement);
       if (isInteractiveElement) {
-        console.log("Skipping row selection due to interactive element");
         return;
       }
-      if (!rowSelection || !rowSelection.onChange) {
-        console.log("No row selection or onChange handler");
+      const recordKey = typeof rowKey === "function" ? rowKey(record) : record[rowKey];
+      setPressedRowKey(recordKey);
+    },
+    [rowKey]
+  );
+  const handleRowMouseUp = React__namespace.useCallback(
+    (record, index2, event) => {
+      setPressedRowKey(null);
+    },
+    []
+  );
+  const handleRowClick = React__namespace.useCallback(
+    (record, index2, event) => {
+      console.log("Genesis Table - Row clicked:", record, "index:", index2);
+      console.log("Genesis Table - onRowClick function:", onRowClick);
+      const target = event.target;
+      const isInteractiveElement = target.closest(
+        'button, a, input, select, textarea, [role="button"], [onclick], .ant-checkbox-wrapper, .ant-checkbox'
+      );
+      console.log("Genesis Table - Target element:", target);
+      console.log("Genesis Table - Target tagName:", target.tagName);
+      console.log("Genesis Table - Target className:", target.className);
+      console.log("Genesis Table - Is interactive element:", isInteractiveElement);
+      if (isInteractiveElement) {
+        console.log("Genesis Table - Skipping row click due to interactive element");
         return;
       }
-      if (rowSelection.getCheckboxProps) {
-        const checkboxProps = rowSelection.getCheckboxProps(record);
-        if (checkboxProps.disabled) {
-          console.log("Row is disabled for selection:", record);
-          return;
-        }
+      if (onRowClick) {
+        console.log("Genesis Table - Calling onRowClick function");
+        onRowClick(record, index2, event);
+      } else {
+        console.log("Genesis Table - onRowClick not provided");
       }
-      const currentSelectedKeys = selectedRowKeys;
-      const recordKey = typeof rowKey === "function" ? rowKey(record) : record[rowKey];
-      console.log("Current selected keys:", currentSelectedKeys);
-      console.log("Record key:", recordKey);
-      const newSelectedKeys = currentSelectedKeys.includes(recordKey) ? currentSelectedKeys.filter((key) => key !== recordKey) : [...currentSelectedKeys, recordKey];
-      console.log("New selected keys:", newSelectedKeys);
-      setSelectedRowKeys(newSelectedKeys);
-      const selectedRows = tableDataSource.filter((record2) => {
-        const key = typeof rowKey === "function" ? rowKey(record2) : record2[rowKey];
-        return newSelectedKeys.includes(key);
-      });
-      console.log("Selected rows:", selectedRows);
-      rowSelection.onChange(newSelectedKeys, selectedRows);
     },
-    [rowSelection, rowKey, tableDataSource, selectedRowKeys]
+    [onRowClick]
   );
   const enhancedRowSelection = React__namespace.useMemo(() => {
     if (!rowSelection) return;
@@ -84160,12 +84212,19 @@ function Table({
       rowSelection: enhancedRowSelection,
       onRow: (record, index2) => {
         const isDisabled = rowSelection?.getCheckboxProps?.(record)?.disabled ?? false;
+        const recordKey = typeof rowKey === "function" ? rowKey(record) : record[rowKey];
+        const isPressed = pressedRowKey === recordKey;
         return {
           onClick: (event) => handleRowClick(record, index2 ?? 0, event),
+          onMouseDown: (event) => handleRowMouseDown(record, index2 ?? 0, event),
+          onMouseUp: (event) => handleRowMouseUp(record, index2 ?? 0, event),
+          onMouseLeave: () => setPressedRowKey(null),
+          // Clear pressed state when mouse leaves
           style: {
-            cursor: rowSelection && !isDisabled ? "pointer" : "default",
+            cursor: onRowClick ? "pointer" : "default",
             opacity: isDisabled ? 0.6 : 1
-          }
+          },
+          className: isPressed ? "ant-table-row-pressed" : ""
         };
       },
       pagination: paginationConfig,
@@ -84181,6 +84240,7 @@ const TablePagination = ({
   dataSource,
   rowSelection,
   onChange,
+  onRowClick,
   paginationStyle = PaginationStyle.SIMPLE,
   pageSize = 10,
   isMainContentCell
@@ -84199,6 +84259,7 @@ const TablePagination = ({
         dataSource: paginatedData,
         rowSelection,
         onChange,
+        onRowClick,
         pagination: false,
         isMainContentCell
       }

package/dist/index.js

@@ -77629,8 +77629,10 @@ const Tooltip2 = ({
             }
           ) }),
           open: isVisible2,
-          overlayStyle: {
-            pointerEvents: "none"
+          styles: {
+            root: {
+              pointerEvents: "none"
+            }
           },
           children: children2
         }
@@ -83507,6 +83509,12 @@ const getGenesisClass$1 = ({ colors: colors2, borderRadius: borderRadius2, sizin
       background-color: ${components2.tableCell.selected} !important;
       color: #fff !important;
     }
+
+    .ant-table-tbody > tr.ant-table-row-pressed > td,
+    .ant-table-tbody > tr.ant-table-row-pressed > .ant-table-cell {
+      background-color: ${components2.tableCell.selected} !important;
+      color: #fff !important;
+    }
   `;
 };
 const Table$1 = styled(ForwardTable)`
@@ -83971,6 +83979,9 @@ function Table({
     400
   );
   const [selectedRowKeys, setSelectedRowKeys] = React.useState([]);
+  const [pressedRowKey, setPressedRowKey] = React.useState(
+    null
+  );
   const tableRef = React.useRef(null);
   const containerRef = React.useRef(null);
   React.useEffect(() => {
@@ -84073,44 +84084,85 @@ function Table({
     return rest.scroll;
   }, [isMaterializedView, materializedViewConfig, dynamicHeight, rest.scroll]);
   const tableDataSource = isMaterializedView ? materializedData : dataSource;
-  const handleRowClick = React.useCallback(
+  React.useEffect(() => {
+    if (tableDataSource && tableDataSource.length > 0) {
+      console.log(
+        "Genesis Table - tableDataSource length:",
+        tableDataSource.length
+      );
+      console.log("Genesis Table - rowKey type:", typeof rowKey);
+      tableDataSource.slice(0, 3).map((record, index2) => {
+        const key = typeof rowKey === "function" ? rowKey(record) : record[rowKey];
+        console.log(
+          `Genesis Table - Record ${index2} key:`,
+          key,
+          "Record:",
+          record
+        );
+        return key;
+      });
+      const allKeys = tableDataSource.map(
+        (record) => typeof rowKey === "function" ? rowKey(record) : record[rowKey]
+      );
+      const uniqueKeys = [...new Set(allKeys)];
+      console.log(
+        `Genesis Table - Total keys: ${allKeys.length}, Unique keys: ${uniqueKeys.length}`
+      );
+      if (allKeys.length !== uniqueKeys.length) {
+        console.error("Genesis Table - DUPLICATE KEYS FOUND:", allKeys);
+        const duplicates = allKeys.filter(
+          (key, index2) => allKeys.indexOf(key) !== index2
+        );
+        console.error("Genesis Table - Duplicate keys:", [
+          ...new Set(duplicates)
+        ]);
+      }
+    }
+  }, [tableDataSource, rowKey]);
+  const handleRowMouseDown = React.useCallback(
     (record, index2, event) => {
-      console.log("Row clicked:", record, "index:", index2);
       const target = event.target;
       const isInteractiveElement = target.closest(
-        'button, a, input, select, textarea, [role="button"], [onclick]'
+        'button, a, input, select, textarea, [role="button"], [onclick], .ant-checkbox-wrapper, .ant-checkbox'
       );
-      console.log("Is interactive element:", isInteractiveElement);
       if (isInteractiveElement) {
-        console.log("Skipping row selection due to interactive element");
         return;
       }
-      if (!rowSelection || !rowSelection.onChange) {
-        console.log("No row selection or onChange handler");
+      const recordKey = typeof rowKey === "function" ? rowKey(record) : record[rowKey];
+      setPressedRowKey(recordKey);
+    },
+    [rowKey]
+  );
+  const handleRowMouseUp = React.useCallback(
+    (record, index2, event) => {
+      setPressedRowKey(null);
+    },
+    []
+  );
+  const handleRowClick = React.useCallback(
+    (record, index2, event) => {
+      console.log("Genesis Table - Row clicked:", record, "index:", index2);
+      console.log("Genesis Table - onRowClick function:", onRowClick);
+      const target = event.target;
+      const isInteractiveElement = target.closest(
+        'button, a, input, select, textarea, [role="button"], [onclick], .ant-checkbox-wrapper, .ant-checkbox'
+      );
+      console.log("Genesis Table - Target element:", target);
+      console.log("Genesis Table - Target tagName:", target.tagName);
+      console.log("Genesis Table - Target className:", target.className);
+      console.log("Genesis Table - Is interactive element:", isInteractiveElement);
+      if (isInteractiveElement) {
+        console.log("Genesis Table - Skipping row click due to interactive element");
         return;
       }
-      if (rowSelection.getCheckboxProps) {
-        const checkboxProps = rowSelection.getCheckboxProps(record);
-        if (checkboxProps.disabled) {
-          console.log("Row is disabled for selection:", record);
-          return;
-        }
+      if (onRowClick) {
+        console.log("Genesis Table - Calling onRowClick function");
+        onRowClick(record, index2, event);
+      } else {
+        console.log("Genesis Table - onRowClick not provided");
       }
-      const currentSelectedKeys = selectedRowKeys;
-      const recordKey = typeof rowKey === "function" ? rowKey(record) : record[rowKey];
-      console.log("Current selected keys:", currentSelectedKeys);
-      console.log("Record key:", recordKey);
-      const newSelectedKeys = currentSelectedKeys.includes(recordKey) ? currentSelectedKeys.filter((key) => key !== recordKey) : [...currentSelectedKeys, recordKey];
-      console.log("New selected keys:", newSelectedKeys);
-      setSelectedRowKeys(newSelectedKeys);
-      const selectedRows = tableDataSource.filter((record2) => {
-        const key = typeof rowKey === "function" ? rowKey(record2) : record2[rowKey];
-        return newSelectedKeys.includes(key);
-      });
-      console.log("Selected rows:", selectedRows);
-      rowSelection.onChange(newSelectedKeys, selectedRows);
     },
-    [rowSelection, rowKey, tableDataSource, selectedRowKeys]
+    [onRowClick]
   );
   const enhancedRowSelection = React.useMemo(() => {
     if (!rowSelection) return;
@@ -84142,12 +84194,19 @@ function Table({
       rowSelection: enhancedRowSelection,
       onRow: (record, index2) => {
         const isDisabled = rowSelection?.getCheckboxProps?.(record)?.disabled ?? false;
+        const recordKey = typeof rowKey === "function" ? rowKey(record) : record[rowKey];
+        const isPressed = pressedRowKey === recordKey;
         return {
           onClick: (event) => handleRowClick(record, index2 ?? 0, event),
+          onMouseDown: (event) => handleRowMouseDown(record, index2 ?? 0, event),
+          onMouseUp: (event) => handleRowMouseUp(record, index2 ?? 0, event),
+          onMouseLeave: () => setPressedRowKey(null),
+          // Clear pressed state when mouse leaves
           style: {
-            cursor: rowSelection && !isDisabled ? "pointer" : "default",
+            cursor: onRowClick ? "pointer" : "default",
             opacity: isDisabled ? 0.6 : 1
-          }
+          },
+          className: isPressed ? "ant-table-row-pressed" : ""
         };
       },
       pagination: paginationConfig,
@@ -84163,6 +84222,7 @@ const TablePagination = ({
   dataSource,
   rowSelection,
   onChange,
+  onRowClick,
   paginationStyle = PaginationStyle.SIMPLE,
   pageSize = 10,
   isMainContentCell
@@ -84181,6 +84241,7 @@ const TablePagination = ({
         dataSource: paginatedData,
         rowSelection,
         onChange,
+        onRowClick,
         pagination: false,
         isMainContentCell
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gobolt/genesis",
-  "version": "0.4.9",
+  "version": "0.4.11",
   "description": "genesis design system",
   "author": "gobolt",
   "license": "MIT",