@gobolt/genesis 0.4.7 → 0.4.9

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/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);
 }
@@ -80515,10 +80518,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 +80801,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;
 };
@@ -83969,6 +83975,7 @@ function Table({
   size = "small",
   onChange,
   rowSelection,
+  onRowClick,
   pagination,
   isMainContentCell = false,
   isMaterializedView = false,
@@ -83981,6 +83988,7 @@ function Table({
   const [dynamicHeight, setDynamicHeight] = React__namespace.useState(
     400
   );
+  const [selectedRowKeys, setSelectedRowKeys] = React__namespace.useState([]);
   const tableRef = React__namespace.useRef(null);
   const containerRef = React__namespace.useRef(null);
   React__namespace.useEffect(() => {
@@ -84083,6 +84091,61 @@ function Table({
     return rest.scroll;
   }, [isMaterializedView, materializedViewConfig, dynamicHeight, rest.scroll]);
   const tableDataSource = isMaterializedView ? materializedData : dataSource;
+  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]'
+      );
+      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");
+        return;
+      }
+      if (rowSelection.getCheckboxProps) {
+        const checkboxProps = rowSelection.getCheckboxProps(record);
+        if (checkboxProps.disabled) {
+          console.log("Row is disabled for selection:", record);
+          return;
+        }
+      }
+      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]
+  );
+  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 +84157,17 @@ function Table({
       locale: { emptyText: "No Data" },
       size,
       onChange,
-      rowSelection,
+      rowSelection: enhancedRowSelection,
+      onRow: (record, index2) => {
+        const isDisabled = rowSelection?.getCheckboxProps?.(record)?.disabled ?? false;
+        return {
+          onClick: (event) => handleRowClick(record, index2 ?? 0, event),
+          style: {
+            cursor: rowSelection && !isDisabled ? "pointer" : "default",
+            opacity: isDisabled ? 0.6 : 1
+          }
+        };
+      },
       pagination: paginationConfig,
       scroll: scrollConfig,
       onScroll: isMaterializedView ? handleScroll : void 0,
@@ -84155,6 +84228,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 +84257,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 +84298,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 +84316,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 +84339,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 +84635,8 @@ const TableControls = ({
 const TableWithControls = ({
   tableData,
   tableControlsData: tableControlsData2,
-  onChange
+  onChange,
+  onRowClick
 }) => {
   const { primaryTableRowData, secondaryTableRowData } = tableControlsData2;
   const {
@@ -84551,6 +84673,7 @@ const TableWithControls = ({
         columns,
         rowSelection,
         onChange: onTableChange,
+        onRowClick,
         isMaterializedView,
         materializedViewConfig
       }
@@ -84628,6 +84751,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 +85190,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 +85204,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 +85309,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);
 }
@@ -80497,10 +80500,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 +80783,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;
 };
@@ -83951,6 +83957,7 @@ function Table({
   size = "small",
   onChange,
   rowSelection,
+  onRowClick,
   pagination,
   isMainContentCell = false,
   isMaterializedView = false,
@@ -83963,6 +83970,7 @@ function Table({
   const [dynamicHeight, setDynamicHeight] = React.useState(
     400
   );
+  const [selectedRowKeys, setSelectedRowKeys] = React.useState([]);
   const tableRef = React.useRef(null);
   const containerRef = React.useRef(null);
   React.useEffect(() => {
@@ -84065,6 +84073,61 @@ function Table({
     return rest.scroll;
   }, [isMaterializedView, materializedViewConfig, dynamicHeight, rest.scroll]);
   const tableDataSource = isMaterializedView ? materializedData : dataSource;
+  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]'
+      );
+      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");
+        return;
+      }
+      if (rowSelection.getCheckboxProps) {
+        const checkboxProps = rowSelection.getCheckboxProps(record);
+        if (checkboxProps.disabled) {
+          console.log("Row is disabled for selection:", record);
+          return;
+        }
+      }
+      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]
+  );
+  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 +84139,17 @@ function Table({
       locale: { emptyText: "No Data" },
       size,
       onChange,
-      rowSelection,
+      rowSelection: enhancedRowSelection,
+      onRow: (record, index2) => {
+        const isDisabled = rowSelection?.getCheckboxProps?.(record)?.disabled ?? false;
+        return {
+          onClick: (event) => handleRowClick(record, index2 ?? 0, event),
+          style: {
+            cursor: rowSelection && !isDisabled ? "pointer" : "default",
+            opacity: isDisabled ? 0.6 : 1
+          }
+        };
+      },
       pagination: paginationConfig,
       scroll: scrollConfig,
       onScroll: isMaterializedView ? handleScroll : void 0,
@@ -84137,6 +84210,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 +84239,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 +84280,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 +84298,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 +84321,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 +84617,8 @@ const TableControls = ({
 const TableWithControls = ({
   tableData,
   tableControlsData: tableControlsData2,
-  onChange
+  onChange,
+  onRowClick
 }) => {
   const { primaryTableRowData, secondaryTableRowData } = tableControlsData2;
   const {
@@ -84533,6 +84655,7 @@ const TableWithControls = ({
         columns,
         rowSelection,
         onChange: onTableChange,
+        onRowClick,
         isMaterializedView,
         materializedViewConfig
       }
@@ -84610,6 +84733,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 +85172,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 +85186,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 +85291,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.9",
   "description": "genesis design system",
   "author": "gobolt",
   "license": "MIT",