@gobolt/genesis 0.4.7 → 0.4.10

package/dist/components/OverflowMenu/OverflowMenu.d.ts

@@ -3,7 +3,7 @@ import { OverflowMenuItemProps } from '../OverflowMenuItem';
 export interface OverflowMenuProps {
     items?: OverflowMenuItemProps[];
     children?: React.ReactNode;
-    trigger: React.ReactNode;
+    trigger?: React.ReactNode;
     isOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
     placement?: "bottom" | "top" | "left" | "right";

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

@@ -28,6 +28,7 @@ export interface TableProps<T extends Record<string, any>> {
             name?: string;
         };
     };
+    onRowClick?: (record: T, index: number, event: React.MouseEvent) => void;
     onChange?: (pagination: TablePaginationConfig, filters: Record<string, any>, sorter: SorterResult<T> | SorterResult<T>[], extra: any) => void;
     loading?: boolean;
     pagination?: (TablePaginationConfig & {
@@ -58,5 +59,5 @@ export type SorterResult<T> = {
     field?: keyof T | string | React.Key | readonly React.Key[];
     columnKey?: React.Key;
 };
-declare function Table<T extends Record<string, any>>({ columns, dataSource, rowKey, size, onChange, rowSelection, pagination, isMainContentCell, isMaterializedView, materializedViewConfig, ...rest }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function Table<T extends Record<string, any>>({ columns, dataSource, rowKey, size, onChange, rowSelection, onRowClick, pagination, isMainContentCell, isMaterializedView, materializedViewConfig, ...rest }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
 export default Table;

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/components/Table/useTable.d.ts

@@ -15,15 +15,19 @@ export type UseTableConfig = {
 };
 export declare const useTable: <T extends Record<string, any>>(useTableConfig: any) => {
     isLoading: boolean;
+    hasErrored: boolean;
     rowSelection: {
         type: SelectionType;
-        onChange: (selectedRowKeys: React.Key[], selectedRows: T[]) => void;
+        selectedRowKeys: import('react').Key[];
+        onChange: (newSelectedRowKeys: React.Key[], newSelectedRows: T[]) => void;
         getCheckboxProps: (record: any) => unknown;
     };
     selectedRows: T[];
+    selectedRowKeys: import('react').Key[];
     hasSettings: boolean;
     hasFilter: boolean;
     updateDataSource: (newDataSource: T[]) => void;
+    retry: () => void;
     dataSource: T[];
     columns: ColumnsType<T>;
     error: Error | null;

package/dist/components/TableWithControls/TableWithControls.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { TableProps } from '../Table';
 import { TableControlsData } from '../Table/TableControls/TableControls';
 import { ActionEvent, TableEventPayload } from '../../types/events';
@@ -5,6 +6,7 @@ export interface TableWithControlsProps {
     tableControlsData: TableControlsData;
     tableData: TableProps<Record<string, any>>;
     onChange: (event: ActionEvent<TableEventPayload>) => void;
+    onRowClick?: (record: Record<string, any>, index: number, event: React.MouseEvent) => void;
 }
-declare const TableWithControls: ({ tableData, tableControlsData, onChange, }: TableWithControlsProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableWithControls: ({ tableData, tableControlsData, onChange, onRowClick, }: TableWithControlsProps) => import("react/jsx-runtime").JSX.Element;
 export default TableWithControls;

package/dist/components/TableWithControls/useTableWithControls.d.ts

@@ -20,12 +20,15 @@ export declare const useTableWithControls: (tableConfig: UseTableConfig) => {
         };
         totalRecords: number;
     };
-    dataSource: Record<string, any>[];
+    dataSource: any[];
     columns: import('antd').TableColumnsType<Record<string, any>>;
     rowSelection: {
         type: import('../Table/Table').SelectionType;
-        onChange: (selectedRowKeys: React.Key[], selectedRows: Record<string, any>[]) => void;
+        selectedRowKeys: import('react').Key[];
+        onChange: (newSelectedRowKeys: React.Key[], newSelectedRows: Record<string, any>[]) => void;
         getCheckboxProps: (record: any) => unknown;
     };
+    selectedRows: Record<string, any>[];
+    selectedRowKeys: import('react').Key[];
     updateDataSource: (newDataSource: Record<string, any>[]) => void;
-} | null;
+};

package/dist/index.cjs

@@ -60250,6 +60250,9 @@ function FaCircleCheck(props) {
 function HiClock(props) {
   return GenIcon({ "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z", "clipRule": "evenodd" }, "child": [] }] })(props);
 }
+function HiDotsHorizontal(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "d": "M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" }, "child": [] }] })(props);
+}
 function HiExclamationCircle(props) {
   return GenIcon({ "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z", "clipRule": "evenodd" }, "child": [] }] })(props);
 }
@@ -77644,8 +77647,10 @@ const Tooltip2 = ({
             }
           ) }),
           open: isVisible2,
-          overlayStyle: {
-            pointerEvents: "none"
+          styles: {
+            root: {
+              pointerEvents: "none"
+            }
           },
           children: children2
         }
@@ -80515,10 +80520,13 @@ const OverflowMenuItem$1 = styled.div`
 const OverflowMenuItem = ({ children: children2, onClick }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(OverflowMenuItem$1, { onClick, children: children2 });
 };
+const DefaultTrigger = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Button$1, { isIconButton: true, themeType: "secondary", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(HiDotsHorizontal, {}) });
+};
 const OverflowMenu = ({
   items,
   children: children2,
-  trigger,
+  trigger = /* @__PURE__ */ jsxRuntime.jsx(DefaultTrigger, {}),
   isOpen: controlledIsOpen,
   onOpenChange,
   placement = "bottom",
@@ -80795,7 +80803,7 @@ const getCombinedPercent = (firstBarData, secondBarData) => {
   if (firstBarData?.value !== void 0 && secondBarData?.value !== void 0) {
     const total = firstBarData.value + secondBarData.value;
     const dividedBy = total / 2;
-    return Math.round(dividedBy * 10) / 10;
+    return Math.round(dividedBy);
   }
   return firstBarData?.value || 0;
 };
@@ -83519,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)`
@@ -83969,6 +83983,7 @@ function Table({
   size = "small",
   onChange,
   rowSelection,
+  onRowClick,
   pagination,
   isMainContentCell = false,
   isMaterializedView = false,
@@ -83981,6 +83996,10 @@ function Table({
   const [dynamicHeight, setDynamicHeight] = React__namespace.useState(
     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(() => {
@@ -84083,6 +84102,60 @@ function Table({
     return rest.scroll;
   }, [isMaterializedView, materializedViewConfig, dynamicHeight, rest.scroll]);
   const tableDataSource = isMaterializedView ? materializedData : dataSource;
+  const handleRowMouseDown = React__namespace.useCallback(
+    (record, index2, event) => {
+      const target = event.target;
+      const isInteractiveElement = target.closest(
+        'button, a, input, select, textarea, [role="button"], [onclick], .ant-checkbox-wrapper, .ant-checkbox'
+      );
+      if (isInteractiveElement) {
+        return;
+      }
+      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("Row clicked:", record, "index:", index2);
+      const target = event.target;
+      const isInteractiveElement = target.closest(
+        '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 click due to interactive element");
+        return;
+      }
+      if (onRowClick) {
+        onRowClick(record, index2, event);
+      }
+    },
+    [onRowClick]
+  );
+  const enhancedRowSelection = React__namespace.useMemo(() => {
+    if (!rowSelection) return;
+    return {
+      ...rowSelection,
+      selectedRowKeys,
+      // Use internal state
+      // Override the onChange to ensure we get the latest data
+      onChange: (selectedRowKeys2, selectedRows) => {
+        console.log("Row selection changed:", selectedRowKeys2, selectedRows);
+        setSelectedRowKeys(selectedRowKeys2);
+        if (rowSelection.onChange) {
+          rowSelection.onChange(selectedRowKeys2, selectedRows);
+        }
+      }
+    };
+  }, [rowSelection, selectedRowKeys]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, children: /* @__PURE__ */ jsxRuntime.jsx(
     Table$1,
     {
@@ -84094,7 +84167,24 @@ function Table({
       locale: { emptyText: "No Data" },
       size,
       onChange,
-      rowSelection,
+      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: onRowClick ? "pointer" : "default",
+            opacity: isDisabled ? 0.6 : 1
+          },
+          className: isPressed ? "ant-table-row-pressed" : ""
+        };
+      },
       pagination: paginationConfig,
       scroll: scrollConfig,
       onScroll: isMaterializedView ? handleScroll : void 0,
@@ -84108,6 +84198,7 @@ const TablePagination = ({
   dataSource,
   rowSelection,
   onChange,
+  onRowClick,
   paginationStyle = PaginationStyle.SIMPLE,
   pageSize = 10,
   isMainContentCell
@@ -84126,6 +84217,7 @@ const TablePagination = ({
         dataSource: paginatedData,
         rowSelection,
         onChange,
+        onRowClick,
         pagination: false,
         isMainContentCell
       }
@@ -84155,6 +84247,9 @@ const defaultRowSelection = (record) => ({
 });
 const useTable = (useTableConfig) => {
   const [isLoading, setLoading] = React.useState(true);
+  const [hasErrored, setHasErrored] = React.useState(false);
+  const hasFetchedRef = React.useRef(false);
+  const isDisabledRef = React.useRef(false);
   const {
     columns,
     filters = null,
@@ -84181,14 +84276,39 @@ const useTable = (useTableConfig) => {
     error: null
   });
   const [selectedRows, setSelectedRows] = React.useState([]);
+  const [selectedRowKeys, setSelectedRowKeys] = React.useState([]);
+  const memoizedFetchOptions = React.useMemo(
+    () => fetchOptions,
+    [fetchOptions.method, fetchOptions.headers, fetchOptions.body]
+  );
   React.useEffect(() => {
-    if (disableAutoFetch && initialDataSource.length > 0) {
+    if (disableAutoFetch) {
+      isDisabledRef.current = true;
+      setLoading(false);
+      return;
+    }
+    if (hasFetchedRef.current || hasErrored || isDisabledRef.current) {
       setLoading(false);
       return;
     }
     const fetchData = async () => {
       try {
-        const response = await fetch(fetchUrl, fetchOptions);
+        hasFetchedRef.current = true;
+        const response = await fetch(fetchUrl, memoizedFetchOptions);
+        if (response.status === 404) {
+          console.warn(`Table data not found at ${fetchUrl}, stopping retries`);
+          setHasErrored(true);
+          setData({
+            dataSource: initialDataSource,
+            columns,
+            error: new Error(`Data not found at ${fetchUrl}`)
+          });
+          setLoading(false);
+          return;
+        }
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
         const result = await response.json();
         const sourceData = result.data || [];
         setOriginalData(sourceData);
@@ -84197,10 +84317,12 @@ const useTable = (useTableConfig) => {
           columns,
           error: null
         });
+        setHasErrored(false);
       } catch (error2) {
         console.error("Error fetching table data:", error2);
+        setHasErrored(true);
         setData({
-          dataSource: [],
+          dataSource: initialDataSource,
           columns,
           error: error2 instanceof Error ? error2 : new Error(String(error2))
         });
@@ -84213,11 +84335,19 @@ const useTable = (useTableConfig) => {
     } else {
       fetchData();
     }
-  }, [fetchOptions, disableAutoFetch, initialDataSource]);
+  }, [
+    memoizedFetchOptions,
+    disableAutoFetch,
+    hasErrored,
+    fetchUrl,
+    columns,
+    initialDataSource
+  ]);
   const handleRowSelection = React.useCallback(
-    (selectedRowKeys, selectedRows2) => {
-      console.log("Row Selected:", selectedRowKeys, selectedRows2);
-      setSelectedRows(selectedRows2);
+    (newSelectedRowKeys, newSelectedRows) => {
+      console.log("Row Selected:", newSelectedRowKeys, newSelectedRows);
+      setSelectedRowKeys(newSelectedRowKeys);
+      setSelectedRows(newSelectedRows);
     },
     []
   );
@@ -84228,19 +84358,29 @@ const useTable = (useTableConfig) => {
       dataSource: newDataSource
     }));
   }, []);
+  const retry = React.useCallback(() => {
+    setHasErrored(false);
+    hasFetchedRef.current = false;
+    isDisabledRef.current = false;
+    setLoading(true);
+  }, []);
   const rowSelection = {
     type: selectionType,
+    selectedRowKeys,
     onChange: handleRowSelection,
     getCheckboxProps: disableRowSelection
   };
   return {
     ...data,
     isLoading,
+    hasErrored,
     rowSelection,
     selectedRows,
+    selectedRowKeys,
     hasSettings,
     hasFilter,
-    updateDataSource
+    updateDataSource,
+    retry
   };
 };
 function HiMiniAdjustmentsVertical(props) {
@@ -84514,7 +84654,8 @@ const TableControls = ({
 const TableWithControls = ({
   tableData,
   tableControlsData: tableControlsData2,
-  onChange
+  onChange,
+  onRowClick
 }) => {
   const { primaryTableRowData, secondaryTableRowData } = tableControlsData2;
   const {
@@ -84551,6 +84692,7 @@ const TableWithControls = ({
         columns,
         rowSelection,
         onChange: onTableChange,
+        onRowClick,
         isMaterializedView,
         materializedViewConfig
       }
@@ -84628,6 +84770,36 @@ const mockColumns = [
         isProgressCombined: true
       });
     }
+  },
+  {
+    title: "Actions",
+    key: "actions",
+    render: (record) => {
+      const menuItems = [
+        {
+          id: "edit",
+          children: "Edit",
+          onClick: () => {
+            console.log("Edit clicked for record:", record.id);
+          }
+        },
+        {
+          id: "delete",
+          children: "Delete",
+          onClick: () => {
+            console.log("Delete clicked for record:", record.id);
+          }
+        }
+      ];
+      return React.createElement(OverflowMenu, {
+        items: menuItems,
+        onItemClick: (item) => {
+          if (item.onClick) {
+            item.onClick();
+          }
+        }
+      });
+    }
   }
 ];
 mockColumns.map((column2) => ({
@@ -85037,9 +85209,10 @@ const startingUseTableConfig = {
   dataSource: []
 };
 const useTableWithControls = (tableConfig) => {
-  const [useTableConfig, setUseTableConfig] = React.useState(
-    startingUseTableConfig
-  );
+  const [useTableConfig, setUseTableConfig] = React.useState(() => ({
+    ...startingUseTableConfig,
+    ...tableConfig
+  }));
   const [groups, setGroups] = React.useState(
     tableControlsData.secondaryTableRowData.groups
   );
@@ -85050,20 +85223,22 @@ const useTableWithControls = (tableConfig) => {
   });
   const { secondaryTableRowData } = tableControlsData;
   const {
-    dataSource,
+    dataSource: hookDataSource,
     columns,
     rowSelection,
+    selectedRows,
+    selectedRowKeys,
     hasSettings,
     hasFilter,
     updateDataSource
   } = useTable(useTableConfig);
+  const dataSource = tableConfig.dataSource || hookDataSource;
   const safeDataSource = dataSource || [];
   const newSecondaryTableRowData = {
     ...secondaryTableRowData,
     groups,
     totalRecords: safeDataSource.length
   };
-  if (!dataSource) return null;
   const onGroupItemClick = (title, item) => {
     const newGroups = { ...groups };
     newGroups[title] = newGroups[title].filter((group) => group !== item);
@@ -85153,6 +85328,8 @@ const useTableWithControls = (tableConfig) => {
     dataSource: safeDataSource,
     columns,
     rowSelection,
+    selectedRows,
+    selectedRowKeys,
     updateDataSource
   };
 };

package/dist/index.js

@@ -60232,6 +60232,9 @@ function FaCircleCheck(props) {
 function HiClock(props) {
   return GenIcon({ "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z", "clipRule": "evenodd" }, "child": [] }] })(props);
 }
+function HiDotsHorizontal(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "d": "M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" }, "child": [] }] })(props);
+}
 function HiExclamationCircle(props) {
   return GenIcon({ "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z", "clipRule": "evenodd" }, "child": [] }] })(props);
 }
@@ -77626,8 +77629,10 @@ const Tooltip2 = ({
             }
           ) }),
           open: isVisible2,
-          overlayStyle: {
-            pointerEvents: "none"
+          styles: {
+            root: {
+              pointerEvents: "none"
+            }
           },
           children: children2
         }
@@ -80497,10 +80502,13 @@ const OverflowMenuItem$1 = styled.div`
 const OverflowMenuItem = ({ children: children2, onClick }) => {
   return /* @__PURE__ */ jsx(OverflowMenuItem$1, { onClick, children: children2 });
 };
+const DefaultTrigger = () => {
+  return /* @__PURE__ */ jsx(Button$1, { isIconButton: true, themeType: "secondary", size: "small", children: /* @__PURE__ */ jsx(HiDotsHorizontal, {}) });
+};
 const OverflowMenu = ({
   items,
   children: children2,
-  trigger,
+  trigger = /* @__PURE__ */ jsx(DefaultTrigger, {}),
   isOpen: controlledIsOpen,
   onOpenChange,
   placement = "bottom",
@@ -80777,7 +80785,7 @@ const getCombinedPercent = (firstBarData, secondBarData) => {
   if (firstBarData?.value !== void 0 && secondBarData?.value !== void 0) {
     const total = firstBarData.value + secondBarData.value;
     const dividedBy = total / 2;
-    return Math.round(dividedBy * 10) / 10;
+    return Math.round(dividedBy);
   }
   return firstBarData?.value || 0;
 };
@@ -83501,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)`
@@ -83951,6 +83965,7 @@ function Table({
   size = "small",
   onChange,
   rowSelection,
+  onRowClick,
   pagination,
   isMainContentCell = false,
   isMaterializedView = false,
@@ -83963,6 +83978,10 @@ function Table({
   const [dynamicHeight, setDynamicHeight] = React.useState(
     400
   );
+  const [selectedRowKeys, setSelectedRowKeys] = React.useState([]);
+  const [pressedRowKey, setPressedRowKey] = React.useState(
+    null
+  );
   const tableRef = React.useRef(null);
   const containerRef = React.useRef(null);
   React.useEffect(() => {
@@ -84065,6 +84084,60 @@ function Table({
     return rest.scroll;
   }, [isMaterializedView, materializedViewConfig, dynamicHeight, rest.scroll]);
   const tableDataSource = isMaterializedView ? materializedData : dataSource;
+  const handleRowMouseDown = React.useCallback(
+    (record, index2, event) => {
+      const target = event.target;
+      const isInteractiveElement = target.closest(
+        'button, a, input, select, textarea, [role="button"], [onclick], .ant-checkbox-wrapper, .ant-checkbox'
+      );
+      if (isInteractiveElement) {
+        return;
+      }
+      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("Row clicked:", record, "index:", index2);
+      const target = event.target;
+      const isInteractiveElement = target.closest(
+        '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 click due to interactive element");
+        return;
+      }
+      if (onRowClick) {
+        onRowClick(record, index2, event);
+      }
+    },
+    [onRowClick]
+  );
+  const enhancedRowSelection = React.useMemo(() => {
+    if (!rowSelection) return;
+    return {
+      ...rowSelection,
+      selectedRowKeys,
+      // Use internal state
+      // Override the onChange to ensure we get the latest data
+      onChange: (selectedRowKeys2, selectedRows) => {
+        console.log("Row selection changed:", selectedRowKeys2, selectedRows);
+        setSelectedRowKeys(selectedRowKeys2);
+        if (rowSelection.onChange) {
+          rowSelection.onChange(selectedRowKeys2, selectedRows);
+        }
+      }
+    };
+  }, [rowSelection, selectedRowKeys]);
   return /* @__PURE__ */ jsx("div", { ref: containerRef, children: /* @__PURE__ */ jsx(
     Table$1,
     {
@@ -84076,7 +84149,24 @@ function Table({
       locale: { emptyText: "No Data" },
       size,
       onChange,
-      rowSelection,
+      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: onRowClick ? "pointer" : "default",
+            opacity: isDisabled ? 0.6 : 1
+          },
+          className: isPressed ? "ant-table-row-pressed" : ""
+        };
+      },
       pagination: paginationConfig,
       scroll: scrollConfig,
       onScroll: isMaterializedView ? handleScroll : void 0,
@@ -84090,6 +84180,7 @@ const TablePagination = ({
   dataSource,
   rowSelection,
   onChange,
+  onRowClick,
   paginationStyle = PaginationStyle.SIMPLE,
   pageSize = 10,
   isMainContentCell
@@ -84108,6 +84199,7 @@ const TablePagination = ({
         dataSource: paginatedData,
         rowSelection,
         onChange,
+        onRowClick,
         pagination: false,
         isMainContentCell
       }
@@ -84137,6 +84229,9 @@ const defaultRowSelection = (record) => ({
 });
 const useTable = (useTableConfig) => {
   const [isLoading, setLoading] = useState(true);
+  const [hasErrored, setHasErrored] = useState(false);
+  const hasFetchedRef = useRef(false);
+  const isDisabledRef = useRef(false);
   const {
     columns,
     filters = null,
@@ -84163,14 +84258,39 @@ const useTable = (useTableConfig) => {
     error: null
   });
   const [selectedRows, setSelectedRows] = useState([]);
+  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+  const memoizedFetchOptions = useMemo$1(
+    () => fetchOptions,
+    [fetchOptions.method, fetchOptions.headers, fetchOptions.body]
+  );
   useEffect(() => {
-    if (disableAutoFetch && initialDataSource.length > 0) {
+    if (disableAutoFetch) {
+      isDisabledRef.current = true;
+      setLoading(false);
+      return;
+    }
+    if (hasFetchedRef.current || hasErrored || isDisabledRef.current) {
       setLoading(false);
       return;
     }
     const fetchData = async () => {
       try {
-        const response = await fetch(fetchUrl, fetchOptions);
+        hasFetchedRef.current = true;
+        const response = await fetch(fetchUrl, memoizedFetchOptions);
+        if (response.status === 404) {
+          console.warn(`Table data not found at ${fetchUrl}, stopping retries`);
+          setHasErrored(true);
+          setData({
+            dataSource: initialDataSource,
+            columns,
+            error: new Error(`Data not found at ${fetchUrl}`)
+          });
+          setLoading(false);
+          return;
+        }
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
         const result = await response.json();
         const sourceData = result.data || [];
         setOriginalData(sourceData);
@@ -84179,10 +84299,12 @@ const useTable = (useTableConfig) => {
           columns,
           error: null
         });
+        setHasErrored(false);
       } catch (error2) {
         console.error("Error fetching table data:", error2);
+        setHasErrored(true);
         setData({
-          dataSource: [],
+          dataSource: initialDataSource,
           columns,
           error: error2 instanceof Error ? error2 : new Error(String(error2))
         });
@@ -84195,11 +84317,19 @@ const useTable = (useTableConfig) => {
     } else {
       fetchData();
     }
-  }, [fetchOptions, disableAutoFetch, initialDataSource]);
+  }, [
+    memoizedFetchOptions,
+    disableAutoFetch,
+    hasErrored,
+    fetchUrl,
+    columns,
+    initialDataSource
+  ]);
   const handleRowSelection = useCallback(
-    (selectedRowKeys, selectedRows2) => {
-      console.log("Row Selected:", selectedRowKeys, selectedRows2);
-      setSelectedRows(selectedRows2);
+    (newSelectedRowKeys, newSelectedRows) => {
+      console.log("Row Selected:", newSelectedRowKeys, newSelectedRows);
+      setSelectedRowKeys(newSelectedRowKeys);
+      setSelectedRows(newSelectedRows);
     },
     []
   );
@@ -84210,19 +84340,29 @@ const useTable = (useTableConfig) => {
       dataSource: newDataSource
     }));
   }, []);
+  const retry = useCallback(() => {
+    setHasErrored(false);
+    hasFetchedRef.current = false;
+    isDisabledRef.current = false;
+    setLoading(true);
+  }, []);
   const rowSelection = {
     type: selectionType,
+    selectedRowKeys,
     onChange: handleRowSelection,
     getCheckboxProps: disableRowSelection
   };
   return {
     ...data,
     isLoading,
+    hasErrored,
     rowSelection,
     selectedRows,
+    selectedRowKeys,
     hasSettings,
     hasFilter,
-    updateDataSource
+    updateDataSource,
+    retry
   };
 };
 function HiMiniAdjustmentsVertical(props) {
@@ -84496,7 +84636,8 @@ const TableControls = ({
 const TableWithControls = ({
   tableData,
   tableControlsData: tableControlsData2,
-  onChange
+  onChange,
+  onRowClick
 }) => {
   const { primaryTableRowData, secondaryTableRowData } = tableControlsData2;
   const {
@@ -84533,6 +84674,7 @@ const TableWithControls = ({
         columns,
         rowSelection,
         onChange: onTableChange,
+        onRowClick,
         isMaterializedView,
         materializedViewConfig
       }
@@ -84610,6 +84752,36 @@ const mockColumns = [
         isProgressCombined: true
       });
     }
+  },
+  {
+    title: "Actions",
+    key: "actions",
+    render: (record) => {
+      const menuItems = [
+        {
+          id: "edit",
+          children: "Edit",
+          onClick: () => {
+            console.log("Edit clicked for record:", record.id);
+          }
+        },
+        {
+          id: "delete",
+          children: "Delete",
+          onClick: () => {
+            console.log("Delete clicked for record:", record.id);
+          }
+        }
+      ];
+      return React__default.createElement(OverflowMenu, {
+        items: menuItems,
+        onItemClick: (item) => {
+          if (item.onClick) {
+            item.onClick();
+          }
+        }
+      });
+    }
   }
 ];
 mockColumns.map((column2) => ({
@@ -85019,9 +85191,10 @@ const startingUseTableConfig = {
   dataSource: []
 };
 const useTableWithControls = (tableConfig) => {
-  const [useTableConfig, setUseTableConfig] = useState(
-    startingUseTableConfig
-  );
+  const [useTableConfig, setUseTableConfig] = useState(() => ({
+    ...startingUseTableConfig,
+    ...tableConfig
+  }));
   const [groups, setGroups] = useState(
     tableControlsData.secondaryTableRowData.groups
   );
@@ -85032,20 +85205,22 @@ const useTableWithControls = (tableConfig) => {
   });
   const { secondaryTableRowData } = tableControlsData;
   const {
-    dataSource,
+    dataSource: hookDataSource,
     columns,
     rowSelection,
+    selectedRows,
+    selectedRowKeys,
     hasSettings,
     hasFilter,
     updateDataSource
   } = useTable(useTableConfig);
+  const dataSource = tableConfig.dataSource || hookDataSource;
   const safeDataSource = dataSource || [];
   const newSecondaryTableRowData = {
     ...secondaryTableRowData,
     groups,
     totalRecords: safeDataSource.length
   };
-  if (!dataSource) return null;
   const onGroupItemClick = (title, item) => {
     const newGroups = { ...groups };
     newGroups[title] = newGroups[title].filter((group) => group !== item);
@@ -85135,6 +85310,8 @@ const useTableWithControls = (tableConfig) => {
     dataSource: safeDataSource,
     columns,
     rowSelection,
+    selectedRows,
+    selectedRowKeys,
     updateDataSource
   };
 };

package/package.json

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