@gobolt/genesis 0.4.17 → 0.4.18

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

@@ -13,5 +13,5 @@ export interface OverflowMenuProps {
     style?: React.CSSProperties;
     onItemClick?: (item: OverflowMenuItemProps) => void;
 }
-declare const OverflowMenu: React.FC<OverflowMenuProps>;
+declare const OverflowMenu: React.ForwardRefExoticComponent<OverflowMenuProps & React.RefAttributes<HTMLDivElement>>;
 export default OverflowMenu;

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

@@ -1,3 +1,3 @@
 import { InfiniteScrollTableProps } from './types';
-declare const InfiniteScrollTable: <T>({ columns: initialColumns, fetchService, scrollHeight, scrollWidth, onChange, }: InfiniteScrollTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const InfiniteScrollTable: <T>({ columns: initialColumns, fetchService, scrollHeight, scrollWidth, onChange, rowSelection, onRowClick, onRowSelectionChange, onDataChange, }: InfiniteScrollTableProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default InfiniteScrollTable;

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

@@ -43,6 +43,8 @@ export interface TableProps<T extends Record<string, any>> {
     };
     onRowClick?: (record: T, index: number, event: React.MouseEvent) => void;
     onChange?: (pagination: TablePaginationConfig, filters: Record<string, any>, sorter: SorterResult<T> | SorterResult<T>[], extra: any) => void;
+    onRowSelectionChange?: (setSelectedRowKeys: (keys: React.Key[]) => void) => void;
+    onDataChange?: (data: T[]) => void;
     loading?: boolean;
     pagination?: (TablePaginationConfig & {
         paginationStyle?: PaginationStyle;
@@ -79,5 +81,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, onRowClick, pagination, isMainContentCell, isInfiniteScroll, infiniteScrollConfig, enableRowKeyValidation, onRowKeyError, ...rest }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function Table<T extends Record<string, any>>({ columns, dataSource, rowKey, size, onChange, rowSelection, onRowClick, onRowSelectionChange, onDataChange, pagination, isMainContentCell, isInfiniteScroll, infiniteScrollConfig, enableRowKeyValidation, onRowKeyError, ...rest }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
 export default Table;

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

@@ -14,6 +14,8 @@ export interface TableWithControlsProps {
     infiniteScrollConfig?: InfiniteScrollConfig<Record<string, any>>;
     paginationStyle?: PaginationStyle;
     onRowClick?: (record: Record<string, any>, index: number, event: React.MouseEvent) => void;
+    onRowSelectionChange?: (setSelectedRowKeys: (keys: React.Key[]) => void) => void;
+    onDataChange?: (data: Record<string, any>[]) => void;
 }
-declare const TableWithControls: ({ tableData, tableControlsData, onChange, onRowClick, tableType, isInfiniteScroll, infiniteScrollConfig, paginationStyle, }: TableWithControlsProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableWithControls: ({ tableData, tableControlsData, onChange, onRowClick, onRowSelectionChange, onDataChange, tableType, isInfiniteScroll, infiniteScrollConfig, paginationStyle, }: TableWithControlsProps) => import("react/jsx-runtime").JSX.Element;
 export default TableWithControls;

package/dist/index.cjs

@@ -80966,112 +80966,136 @@ const OverflowMenuItem = ({ children: children2, onClick }) => {
 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 = /* @__PURE__ */ jsxRuntime.jsx(DefaultTrigger, {}),
-  isOpen: controlledIsOpen,
-  onOpenChange,
-  placement = "bottom",
-  alignment = "left",
-  offset: offset2 = 8,
-  className,
-  style: style2,
-  onItemClick
-}) => {
-  const [internalIsOpen, setInternalIsOpen] = React.useState(false);
-  const [isAnimating, setIsAnimating] = React.useState(false);
-  const triggerRef = React.useRef(null);
-  const menuRef = React.useRef(null);
-  const { theme } = useGenesis();
-  const isOpen = controlledIsOpen === void 0 ? internalIsOpen : controlledIsOpen;
-  const handleOpenChange = React.useCallback(
-    (open) => {
-      if (onOpenChange) {
-        onOpenChange(open);
-      } else {
-        setInternalIsOpen(open);
-      }
-    },
-    [onOpenChange]
-  );
-  const handleTriggerClick = () => {
-    handleOpenChange(!isOpen);
-  };
-  const handleClickOutside = React.useCallback(
-    (event) => {
-      if (triggerRef.current && menuRef.current && !triggerRef.current.contains(event.target) && !menuRef.current.contains(event.target)) {
-        handleOpenChange(false);
-      }
-    },
-    [handleOpenChange]
-  );
-  React.useEffect(() => {
-    if (isOpen) {
-      const timer2 = setTimeout(() => {
-        setIsAnimating(true);
-      }, 10);
-      document.addEventListener("mousedown", handleClickOutside);
-      return () => {
-        clearTimeout(timer2);
-        document.removeEventListener("mousedown", handleClickOutside);
-      };
-    } else {
-      setIsAnimating(false);
-      document.removeEventListener("mousedown", handleClickOutside);
-    }
-  }, [isOpen, handleClickOutside]);
-  const getMenuStyle = React.useMemo(() => {
-    const baseStyle = {
-      position: "absolute",
-      zIndex: 1e3,
-      ...style2
+const OverflowMenu = React.forwardRef(
+  ({
+    items,
+    children: children2,
+    trigger = /* @__PURE__ */ jsxRuntime.jsx(DefaultTrigger, {}),
+    isOpen: controlledIsOpen,
+    onOpenChange,
+    placement = "bottom",
+    alignment = "left",
+    offset: offset2 = 8,
+    className,
+    style: style2,
+    onItemClick
+  }, ref) => {
+    const [internalIsOpen, setInternalIsOpen] = React.useState(false);
+    const [isAnimating, setIsAnimating] = React.useState(false);
+    const triggerRef = React.useRef(null);
+    const menuRef = React.useRef(null);
+    const { theme } = useGenesis();
+    const isOpen = controlledIsOpen === void 0 ? internalIsOpen : controlledIsOpen;
+    const handleOpenChange = React.useCallback(
+      (open) => {
+        if (onOpenChange) {
+          onOpenChange(open);
+        } else {
+          setInternalIsOpen(open);
+        }
+      },
+      [onOpenChange]
+    );
+    const handleTriggerClick = () => {
+      handleOpenChange(!isOpen);
     };
-    switch (placement) {
-      case "bottom": {
-        return {
-          ...baseStyle,
-          top: `calc(100% + ${offset2}px)`,
-          ...alignment === "right" ? { right: 0 } : { left: 0 }
-        };
-      }
-      case "top": {
-        return {
-          ...baseStyle,
-          bottom: `calc(100% + ${offset2}px)`,
-          ...alignment === "right" ? { right: 0 } : { left: 0 }
-        };
-      }
-      case "left": {
-        return {
-          ...baseStyle,
-          top: 0,
-          right: `calc(100% + ${offset2}px)`,
-          ...alignment === "right" ? { bottom: 0 } : {}
-        };
-      }
-      case "right": {
-        return {
-          ...baseStyle,
-          top: 0,
-          left: `calc(100% + ${offset2}px)`,
-          ...alignment === "right" ? { bottom: 0 } : {}
+    const handleClickOutside = React.useCallback(
+      (event) => {
+        if (triggerRef.current && menuRef.current && !triggerRef.current.contains(event.target) && !menuRef.current.contains(event.target)) {
+          handleOpenChange(false);
+        }
+      },
+      [handleOpenChange]
+    );
+    React.useEffect(() => {
+      if (isOpen) {
+        const timer2 = setTimeout(() => {
+          setIsAnimating(true);
+        }, 10);
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+          clearTimeout(timer2);
+          document.removeEventListener("mousedown", handleClickOutside);
         };
+      } else {
+        setIsAnimating(false);
+        document.removeEventListener("mousedown", handleClickOutside);
       }
-      default: {
-        return baseStyle;
+    }, [isOpen, handleClickOutside]);
+    const getMenuStyle = React.useMemo(() => {
+      const baseStyle = {
+        position: "absolute",
+        zIndex: 1e3,
+        ...style2
+      };
+      switch (placement) {
+        case "bottom": {
+          return {
+            ...baseStyle,
+            top: `calc(100% + ${offset2}px)`,
+            ...alignment === "right" ? { right: 0 } : { left: 0 }
+          };
+        }
+        case "top": {
+          return {
+            ...baseStyle,
+            bottom: `calc(100% + ${offset2}px)`,
+            ...alignment === "right" ? { right: 0 } : { left: 0 }
+          };
+        }
+        case "left": {
+          return {
+            ...baseStyle,
+            top: 0,
+            right: `calc(100% + ${offset2}px)`,
+            ...alignment === "right" ? { bottom: 0 } : {}
+          };
+        }
+        case "right": {
+          return {
+            ...baseStyle,
+            top: 0,
+            left: `calc(100% + ${offset2}px)`,
+            ...alignment === "right" ? { bottom: 0 } : {}
+          };
+        }
+        default: {
+          return baseStyle;
+        }
       }
+    }, [placement, alignment, offset2, style2]);
+    const handleItemClick = React.useCallback(
+      (item) => {
+        onItemClick?.(item);
+        handleOpenChange(false);
+      },
+      [onItemClick, handleOpenChange]
+    );
+    if (items && items.length > 0) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(OverflowMenuWrapper, { ref, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { ref: triggerRef, onClick: handleTriggerClick, children: trigger }),
+        isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+          OverflowMenuContainer,
+          {
+            ref: menuRef,
+            theme,
+            className,
+            style: getMenuStyle,
+            $isAnimating: isAnimating,
+            $placement: placement,
+            children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+              OverflowMenuItem,
+              {
+                ...item,
+                onClick: () => handleItemClick(item)
+              },
+              item.id
+            ))
+          }
+        )
+      ] });
     }
-  }, [placement, alignment, offset2, style2]);
-  const handleItemClick = React.useCallback(
-    (item) => {
-      onItemClick?.(item);
-      handleOpenChange(false);
-    },
-    [onItemClick, handleOpenChange]
-  );
-  if (items && items.length > 0) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(OverflowMenuWrapper, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(OverflowMenuWrapper, { ref, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { ref: triggerRef, onClick: handleTriggerClick, children: trigger }),
       isOpen && /* @__PURE__ */ jsxRuntime.jsx(
         OverflowMenuContainer,
@@ -81082,34 +81106,13 @@ const OverflowMenu = ({
           style: getMenuStyle,
           $isAnimating: isAnimating,
           $placement: placement,
-          children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-            OverflowMenuItem,
-            {
-              ...item,
-              onClick: () => handleItemClick(item)
-            },
-            item.id
-          ))
+          children: children2
         }
       )
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(OverflowMenuWrapper, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: triggerRef, onClick: handleTriggerClick, children: trigger }),
-    isOpen && /* @__PURE__ */ jsxRuntime.jsx(
-      OverflowMenuContainer,
-      {
-        ref: menuRef,
-        theme,
-        className,
-        style: getMenuStyle,
-        $isAnimating: isAnimating,
-        $placement: placement,
-        children: children2
-      }
-    )
-  ] });
-};
+);
+OverflowMenu.displayName = "OverflowMenu";
 const getGenesisClass$6 = (theme) => ``;
 const Popover$1 = styled(Popconfirm)`
   ${({ theme }) => {
@@ -84482,12 +84485,37 @@ const InfiniteScrollTable = ({
   fetchService,
   scrollHeight = 600,
   scrollWidth = 1300,
-  onChange
+  onChange,
+  rowSelection,
+  onRowClick,
+  onRowSelectionChange,
+  onDataChange
 }) => {
   const observer = React.useRef();
   const [scrollableNode, setScrollableNode] = React.useState(
     null
   );
+  const [selectedRowKeys, setSelectedRowKeys] = React.useState([]);
+  const [selectedRows, setSelectedRows] = React.useState([]);
+  const handleRowSelection = React.useCallback(
+    (newSelectedRowKeys, newSelectedRows) => {
+      setSelectedRowKeys(newSelectedRowKeys);
+      setSelectedRows(newSelectedRows);
+      if (rowSelection?.onChange) {
+        rowSelection.onChange(newSelectedRowKeys, newSelectedRows);
+      }
+    },
+    [rowSelection]
+  );
+  const defaultRowSelection2 = {
+    type: "checkbox",
+    selectedRowKeys,
+    onChange: handleRowSelection,
+    getCheckboxProps: (record) => ({
+      name: record.id || record.key || String(record)
+    })
+  };
+  const finalRowSelection = rowSelection || defaultRowSelection2;
   const tableContainerRef = React.useCallback((node2) => {
     if (node2 !== null) {
       const scrollNode = node2.querySelector(".ant-table-body");
@@ -84540,6 +84568,21 @@ const InfiniteScrollTable = ({
   );
   const dataSource = data?.pages.flatMap((page) => page.docs) ?? [];
   const totalDocs = data?.pages?.[0]?.totalDocs ?? 0;
+  React.useEffect(() => {
+    if (onRowSelectionChange) {
+      const wrappedSetSelectedRowKeys = (keys2) => {
+        setSelectedRowKeys(keys2);
+      };
+      onRowSelectionChange(wrappedSetSelectedRowKeys);
+    }
+  }, [onRowSelectionChange]);
+  const dataSentRef = React.useRef(false);
+  React.useEffect(() => {
+    if (onDataChange && dataSource.length > 0 && !dataSentRef.current) {
+      onDataChange(dataSource);
+      dataSentRef.current = true;
+    }
+  }, [dataSource, onDataChange]);
   React.useEffect(() => {
     if (onChange) {
       const dataChangeEvent = {
@@ -84571,79 +84614,73 @@ const InfiniteScrollTable = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      style: {
-        backgroundColor: "white",
-        padding: "24px",
-        borderRadius: "8px",
-        boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)",
-        marginBottom: "24px"
-      },
-      ref: tableContainerRef,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: tableContainerRef, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, ref: tableContainerRef, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
             .infinite-scroll-table .ant-pagination {
               display: none !important;
             }
           ` }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "infinite-scroll-table", children: /* @__PURE__ */ jsxRuntime.jsx(
-            ForwardTable,
-            {
-              dataSource,
-              columns: resizableColumns,
-              components: { header: { cell: ResizableTitle } },
-              rowKey: "id",
-              pagination: false,
-              showSorterTooltip: false,
-              size: "small",
-              scroll: { y: scrollHeight, x: scrollWidth },
-              onChange: () => {
-              },
-              onRow: (record, index2) => {
-                if (index2 === dataSource.length - 1) {
-                  return { ref: lastRowRef };
-                }
-                return {};
-              }
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "infinite-scroll-table", children: /* @__PURE__ */ jsxRuntime.jsx(
+        ForwardTable,
+        {
+          dataSource,
+          columns: resizableColumns,
+          components: { header: { cell: ResizableTitle } },
+          rowKey: "id",
+          pagination: false,
+          showSorterTooltip: false,
+          size: "small",
+          scroll: { y: scrollHeight, x: scrollWidth },
+          onChange: () => {
+          },
+          rowSelection: finalRowSelection,
+          onRow: (record, index2) => {
+            const rowProps = {};
+            if (index2 === dataSource.length - 1) {
+              rowProps.ref = lastRowRef;
             }
-          ) }),
-          isFetchingNextPage && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                bottom: 0,
-                left: 0,
-                width: "100%",
-                padding: "16px",
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                backgroundColor: "rgba(255, 255, 255, 0.7)",
-                backdropFilter: "blur(2px)",
-                zIndex: 10
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsx(Spin, {})
+            if (onRowClick && index2 !== void 0) {
+              rowProps.onClick = (event) => {
+                onRowClick(record, index2, event);
+              };
             }
-          )
-        ] }),
-        !hasNextPage && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            style: {
-              textAlign: "center",
-              padding: "20px",
-              borderTop: "1px solid #f0f0f0"
-            },
-            children: /* @__PURE__ */ jsxRuntime.jsx(Typography$1.Text, { type: "secondary", children: "No more rows to load." })
+            return rowProps;
           }
-        )
-      ]
-    }
-  );
+        }
+      ) }),
+      isFetchingNextPage && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            bottom: 0,
+            left: 0,
+            width: "100%",
+            padding: "16px",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            backgroundColor: "rgba(255, 255, 255, 0.7)",
+            backdropFilter: "blur(2px)",
+            zIndex: 10
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(Spin, {})
+        }
+      )
+    ] }),
+    !hasNextPage && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          textAlign: "center",
+          padding: "20px",
+          borderTop: "1px solid #f0f0f0"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(Typography$1.Text, { type: "secondary", children: "No more rows to load." })
+      }
+    )
+  ] });
 };
 const getRowKey = (record, rowKey, index2, enableValidation = true) => {
   try {
@@ -84695,6 +84732,8 @@ function Table({
   onChange,
   rowSelection,
   onRowClick,
+  onRowSelectionChange,
+  onDataChange,
   pagination,
   isMainContentCell = false,
   isInfiniteScroll = false,
@@ -84749,7 +84788,9 @@ function Table({
         fetchService: infiniteScrollConfig.fetchService,
         title: infiniteScrollConfig.title,
         scrollHeight: infiniteScrollConfig.scrollHeight,
-        scrollWidth: infiniteScrollConfig.scrollWidth
+        scrollWidth: infiniteScrollConfig.scrollWidth,
+        onRowSelectionChange,
+        onDataChange
       }
     );
   }
@@ -85370,9 +85411,10 @@ const TableWithControls = ({
   tableControlsData: tableControlsData2,
   onChange,
   onRowClick,
+  onRowSelectionChange,
+  onDataChange,
   tableType = "table",
   isInfiniteScroll,
-  // Deprecated: use tableType instead
   infiniteScrollConfig,
   paginationStyle
 }) => {
@@ -85383,7 +85425,14 @@ const TableWithControls = ({
     totalResults: 0
   });
   const { primaryTableRowData, secondaryTableRowData } = tableControlsData2;
-  const { dataSource, columns, rowSelection, hasSettings, hasFilter } = tableData;
+  const {
+    dataSource,
+    columns,
+    rowSelection,
+    hasSettings,
+    hasFilter,
+    onRowClick: tableOnRowClick
+  } = tableData;
   const actualTableType = isInfiniteScroll ? "infiniteScroll" : tableType;
   const onTableControlsChange = (event) => {
     onChange(event);
@@ -85423,7 +85472,11 @@ const TableWithControls = ({
             title: infiniteScrollConfig.title,
             scrollHeight: infiniteScrollConfig.scrollHeight,
             scrollWidth: infiniteScrollConfig.scrollWidth,
-            onChange: onInfiniteScrollTableChange
+            onChange: onInfiniteScrollTableChange,
+            rowSelection,
+            onRowClick: tableOnRowClick || onRowClick,
+            onRowSelectionChange,
+            onDataChange
           }
         );
       }
@@ -85449,7 +85502,8 @@ const TableWithControls = ({
             columns,
             rowSelection,
             onChange: onTableChange,
-            onRowClick
+            onRowClick,
+            onRowSelectionChange
           }
         );
       }

package/dist/index.js

@@ -80948,112 +80948,136 @@ const OverflowMenuItem = ({ children: children2, onClick }) => {
 const DefaultTrigger = () => {
   return /* @__PURE__ */ jsx(Button$1, { isIconButton: true, themeType: "secondary", size: "small", children: /* @__PURE__ */ jsx(HiDotsHorizontal, {}) });
 };
-const OverflowMenu = ({
-  items,
-  children: children2,
-  trigger = /* @__PURE__ */ jsx(DefaultTrigger, {}),
-  isOpen: controlledIsOpen,
-  onOpenChange,
-  placement = "bottom",
-  alignment = "left",
-  offset: offset2 = 8,
-  className,
-  style: style2,
-  onItemClick
-}) => {
-  const [internalIsOpen, setInternalIsOpen] = useState(false);
-  const [isAnimating, setIsAnimating] = useState(false);
-  const triggerRef = useRef(null);
-  const menuRef = useRef(null);
-  const { theme } = useGenesis();
-  const isOpen = controlledIsOpen === void 0 ? internalIsOpen : controlledIsOpen;
-  const handleOpenChange = useCallback(
-    (open) => {
-      if (onOpenChange) {
-        onOpenChange(open);
-      } else {
-        setInternalIsOpen(open);
-      }
-    },
-    [onOpenChange]
-  );
-  const handleTriggerClick = () => {
-    handleOpenChange(!isOpen);
-  };
-  const handleClickOutside = useCallback(
-    (event) => {
-      if (triggerRef.current && menuRef.current && !triggerRef.current.contains(event.target) && !menuRef.current.contains(event.target)) {
-        handleOpenChange(false);
-      }
-    },
-    [handleOpenChange]
-  );
-  useEffect(() => {
-    if (isOpen) {
-      const timer2 = setTimeout(() => {
-        setIsAnimating(true);
-      }, 10);
-      document.addEventListener("mousedown", handleClickOutside);
-      return () => {
-        clearTimeout(timer2);
-        document.removeEventListener("mousedown", handleClickOutside);
-      };
-    } else {
-      setIsAnimating(false);
-      document.removeEventListener("mousedown", handleClickOutside);
-    }
-  }, [isOpen, handleClickOutside]);
-  const getMenuStyle = useMemo$1(() => {
-    const baseStyle = {
-      position: "absolute",
-      zIndex: 1e3,
-      ...style2
+const OverflowMenu = forwardRef(
+  ({
+    items,
+    children: children2,
+    trigger = /* @__PURE__ */ jsx(DefaultTrigger, {}),
+    isOpen: controlledIsOpen,
+    onOpenChange,
+    placement = "bottom",
+    alignment = "left",
+    offset: offset2 = 8,
+    className,
+    style: style2,
+    onItemClick
+  }, ref) => {
+    const [internalIsOpen, setInternalIsOpen] = useState(false);
+    const [isAnimating, setIsAnimating] = useState(false);
+    const triggerRef = useRef(null);
+    const menuRef = useRef(null);
+    const { theme } = useGenesis();
+    const isOpen = controlledIsOpen === void 0 ? internalIsOpen : controlledIsOpen;
+    const handleOpenChange = useCallback(
+      (open) => {
+        if (onOpenChange) {
+          onOpenChange(open);
+        } else {
+          setInternalIsOpen(open);
+        }
+      },
+      [onOpenChange]
+    );
+    const handleTriggerClick = () => {
+      handleOpenChange(!isOpen);
     };
-    switch (placement) {
-      case "bottom": {
-        return {
-          ...baseStyle,
-          top: `calc(100% + ${offset2}px)`,
-          ...alignment === "right" ? { right: 0 } : { left: 0 }
-        };
-      }
-      case "top": {
-        return {
-          ...baseStyle,
-          bottom: `calc(100% + ${offset2}px)`,
-          ...alignment === "right" ? { right: 0 } : { left: 0 }
-        };
-      }
-      case "left": {
-        return {
-          ...baseStyle,
-          top: 0,
-          right: `calc(100% + ${offset2}px)`,
-          ...alignment === "right" ? { bottom: 0 } : {}
-        };
-      }
-      case "right": {
-        return {
-          ...baseStyle,
-          top: 0,
-          left: `calc(100% + ${offset2}px)`,
-          ...alignment === "right" ? { bottom: 0 } : {}
+    const handleClickOutside = useCallback(
+      (event) => {
+        if (triggerRef.current && menuRef.current && !triggerRef.current.contains(event.target) && !menuRef.current.contains(event.target)) {
+          handleOpenChange(false);
+        }
+      },
+      [handleOpenChange]
+    );
+    useEffect(() => {
+      if (isOpen) {
+        const timer2 = setTimeout(() => {
+          setIsAnimating(true);
+        }, 10);
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+          clearTimeout(timer2);
+          document.removeEventListener("mousedown", handleClickOutside);
         };
+      } else {
+        setIsAnimating(false);
+        document.removeEventListener("mousedown", handleClickOutside);
       }
-      default: {
-        return baseStyle;
+    }, [isOpen, handleClickOutside]);
+    const getMenuStyle = useMemo$1(() => {
+      const baseStyle = {
+        position: "absolute",
+        zIndex: 1e3,
+        ...style2
+      };
+      switch (placement) {
+        case "bottom": {
+          return {
+            ...baseStyle,
+            top: `calc(100% + ${offset2}px)`,
+            ...alignment === "right" ? { right: 0 } : { left: 0 }
+          };
+        }
+        case "top": {
+          return {
+            ...baseStyle,
+            bottom: `calc(100% + ${offset2}px)`,
+            ...alignment === "right" ? { right: 0 } : { left: 0 }
+          };
+        }
+        case "left": {
+          return {
+            ...baseStyle,
+            top: 0,
+            right: `calc(100% + ${offset2}px)`,
+            ...alignment === "right" ? { bottom: 0 } : {}
+          };
+        }
+        case "right": {
+          return {
+            ...baseStyle,
+            top: 0,
+            left: `calc(100% + ${offset2}px)`,
+            ...alignment === "right" ? { bottom: 0 } : {}
+          };
+        }
+        default: {
+          return baseStyle;
+        }
       }
+    }, [placement, alignment, offset2, style2]);
+    const handleItemClick = useCallback(
+      (item) => {
+        onItemClick?.(item);
+        handleOpenChange(false);
+      },
+      [onItemClick, handleOpenChange]
+    );
+    if (items && items.length > 0) {
+      return /* @__PURE__ */ jsxs(OverflowMenuWrapper, { ref, children: [
+        /* @__PURE__ */ jsx("div", { ref: triggerRef, onClick: handleTriggerClick, children: trigger }),
+        isOpen && /* @__PURE__ */ jsx(
+          OverflowMenuContainer,
+          {
+            ref: menuRef,
+            theme,
+            className,
+            style: getMenuStyle,
+            $isAnimating: isAnimating,
+            $placement: placement,
+            children: items.map((item) => /* @__PURE__ */ jsx(
+              OverflowMenuItem,
+              {
+                ...item,
+                onClick: () => handleItemClick(item)
+              },
+              item.id
+            ))
+          }
+        )
+      ] });
     }
-  }, [placement, alignment, offset2, style2]);
-  const handleItemClick = useCallback(
-    (item) => {
-      onItemClick?.(item);
-      handleOpenChange(false);
-    },
-    [onItemClick, handleOpenChange]
-  );
-  if (items && items.length > 0) {
-    return /* @__PURE__ */ jsxs(OverflowMenuWrapper, { children: [
+    return /* @__PURE__ */ jsxs(OverflowMenuWrapper, { ref, children: [
       /* @__PURE__ */ jsx("div", { ref: triggerRef, onClick: handleTriggerClick, children: trigger }),
       isOpen && /* @__PURE__ */ jsx(
         OverflowMenuContainer,
@@ -81064,34 +81088,13 @@ const OverflowMenu = ({
           style: getMenuStyle,
           $isAnimating: isAnimating,
           $placement: placement,
-          children: items.map((item) => /* @__PURE__ */ jsx(
-            OverflowMenuItem,
-            {
-              ...item,
-              onClick: () => handleItemClick(item)
-            },
-            item.id
-          ))
+          children: children2
         }
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs(OverflowMenuWrapper, { children: [
-    /* @__PURE__ */ jsx("div", { ref: triggerRef, onClick: handleTriggerClick, children: trigger }),
-    isOpen && /* @__PURE__ */ jsx(
-      OverflowMenuContainer,
-      {
-        ref: menuRef,
-        theme,
-        className,
-        style: getMenuStyle,
-        $isAnimating: isAnimating,
-        $placement: placement,
-        children: children2
-      }
-    )
-  ] });
-};
+);
+OverflowMenu.displayName = "OverflowMenu";
 const getGenesisClass$6 = (theme) => ``;
 const Popover$1 = styled(Popconfirm)`
   ${({ theme }) => {
@@ -84464,12 +84467,37 @@ const InfiniteScrollTable = ({
   fetchService,
   scrollHeight = 600,
   scrollWidth = 1300,
-  onChange
+  onChange,
+  rowSelection,
+  onRowClick,
+  onRowSelectionChange,
+  onDataChange
 }) => {
   const observer = useRef();
   const [scrollableNode, setScrollableNode] = useState(
     null
   );
+  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+  const [selectedRows, setSelectedRows] = useState([]);
+  const handleRowSelection = useCallback(
+    (newSelectedRowKeys, newSelectedRows) => {
+      setSelectedRowKeys(newSelectedRowKeys);
+      setSelectedRows(newSelectedRows);
+      if (rowSelection?.onChange) {
+        rowSelection.onChange(newSelectedRowKeys, newSelectedRows);
+      }
+    },
+    [rowSelection]
+  );
+  const defaultRowSelection2 = {
+    type: "checkbox",
+    selectedRowKeys,
+    onChange: handleRowSelection,
+    getCheckboxProps: (record) => ({
+      name: record.id || record.key || String(record)
+    })
+  };
+  const finalRowSelection = rowSelection || defaultRowSelection2;
   const tableContainerRef = useCallback((node2) => {
     if (node2 !== null) {
       const scrollNode = node2.querySelector(".ant-table-body");
@@ -84522,6 +84550,21 @@ const InfiniteScrollTable = ({
   );
   const dataSource = data?.pages.flatMap((page) => page.docs) ?? [];
   const totalDocs = data?.pages?.[0]?.totalDocs ?? 0;
+  useEffect(() => {
+    if (onRowSelectionChange) {
+      const wrappedSetSelectedRowKeys = (keys2) => {
+        setSelectedRowKeys(keys2);
+      };
+      onRowSelectionChange(wrappedSetSelectedRowKeys);
+    }
+  }, [onRowSelectionChange]);
+  const dataSentRef = useRef(false);
+  useEffect(() => {
+    if (onDataChange && dataSource.length > 0 && !dataSentRef.current) {
+      onDataChange(dataSource);
+      dataSentRef.current = true;
+    }
+  }, [dataSource, onDataChange]);
   useEffect(() => {
     if (onChange) {
       const dataChangeEvent = {
@@ -84553,79 +84596,73 @@ const InfiniteScrollTable = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        backgroundColor: "white",
-        padding: "24px",
-        borderRadius: "8px",
-        boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)",
-        marginBottom: "24px"
-      },
-      ref: tableContainerRef,
-      children: [
-        /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-          /* @__PURE__ */ jsx("style", { children: `
+  return /* @__PURE__ */ jsxs("div", { ref: tableContainerRef, children: [
+    /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, ref: tableContainerRef, children: [
+      /* @__PURE__ */ jsx("style", { children: `
             .infinite-scroll-table .ant-pagination {
               display: none !important;
             }
           ` }),
-          /* @__PURE__ */ jsx("div", { className: "infinite-scroll-table", children: /* @__PURE__ */ jsx(
-            ForwardTable,
-            {
-              dataSource,
-              columns: resizableColumns,
-              components: { header: { cell: ResizableTitle } },
-              rowKey: "id",
-              pagination: false,
-              showSorterTooltip: false,
-              size: "small",
-              scroll: { y: scrollHeight, x: scrollWidth },
-              onChange: () => {
-              },
-              onRow: (record, index2) => {
-                if (index2 === dataSource.length - 1) {
-                  return { ref: lastRowRef };
-                }
-                return {};
-              }
+      /* @__PURE__ */ jsx("div", { className: "infinite-scroll-table", children: /* @__PURE__ */ jsx(
+        ForwardTable,
+        {
+          dataSource,
+          columns: resizableColumns,
+          components: { header: { cell: ResizableTitle } },
+          rowKey: "id",
+          pagination: false,
+          showSorterTooltip: false,
+          size: "small",
+          scroll: { y: scrollHeight, x: scrollWidth },
+          onChange: () => {
+          },
+          rowSelection: finalRowSelection,
+          onRow: (record, index2) => {
+            const rowProps = {};
+            if (index2 === dataSource.length - 1) {
+              rowProps.ref = lastRowRef;
             }
-          ) }),
-          isFetchingNextPage && /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                bottom: 0,
-                left: 0,
-                width: "100%",
-                padding: "16px",
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                backgroundColor: "rgba(255, 255, 255, 0.7)",
-                backdropFilter: "blur(2px)",
-                zIndex: 10
-              },
-              children: /* @__PURE__ */ jsx(Spin, {})
+            if (onRowClick && index2 !== void 0) {
+              rowProps.onClick = (event) => {
+                onRowClick(record, index2, event);
+              };
             }
-          )
-        ] }),
-        !hasNextPage && /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              textAlign: "center",
-              padding: "20px",
-              borderTop: "1px solid #f0f0f0"
-            },
-            children: /* @__PURE__ */ jsx(Typography$1.Text, { type: "secondary", children: "No more rows to load." })
+            return rowProps;
           }
-        )
-      ]
-    }
-  );
+        }
+      ) }),
+      isFetchingNextPage && /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            bottom: 0,
+            left: 0,
+            width: "100%",
+            padding: "16px",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            backgroundColor: "rgba(255, 255, 255, 0.7)",
+            backdropFilter: "blur(2px)",
+            zIndex: 10
+          },
+          children: /* @__PURE__ */ jsx(Spin, {})
+        }
+      )
+    ] }),
+    !hasNextPage && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          textAlign: "center",
+          padding: "20px",
+          borderTop: "1px solid #f0f0f0"
+        },
+        children: /* @__PURE__ */ jsx(Typography$1.Text, { type: "secondary", children: "No more rows to load." })
+      }
+    )
+  ] });
 };
 const getRowKey = (record, rowKey, index2, enableValidation = true) => {
   try {
@@ -84677,6 +84714,8 @@ function Table({
   onChange,
   rowSelection,
   onRowClick,
+  onRowSelectionChange,
+  onDataChange,
   pagination,
   isMainContentCell = false,
   isInfiniteScroll = false,
@@ -84731,7 +84770,9 @@ function Table({
         fetchService: infiniteScrollConfig.fetchService,
         title: infiniteScrollConfig.title,
         scrollHeight: infiniteScrollConfig.scrollHeight,
-        scrollWidth: infiniteScrollConfig.scrollWidth
+        scrollWidth: infiniteScrollConfig.scrollWidth,
+        onRowSelectionChange,
+        onDataChange
       }
     );
   }
@@ -85352,9 +85393,10 @@ const TableWithControls = ({
   tableControlsData: tableControlsData2,
   onChange,
   onRowClick,
+  onRowSelectionChange,
+  onDataChange,
   tableType = "table",
   isInfiniteScroll,
-  // Deprecated: use tableType instead
   infiniteScrollConfig,
   paginationStyle
 }) => {
@@ -85365,7 +85407,14 @@ const TableWithControls = ({
     totalResults: 0
   });
   const { primaryTableRowData, secondaryTableRowData } = tableControlsData2;
-  const { dataSource, columns, rowSelection, hasSettings, hasFilter } = tableData;
+  const {
+    dataSource,
+    columns,
+    rowSelection,
+    hasSettings,
+    hasFilter,
+    onRowClick: tableOnRowClick
+  } = tableData;
   const actualTableType = isInfiniteScroll ? "infiniteScroll" : tableType;
   const onTableControlsChange = (event) => {
     onChange(event);
@@ -85405,7 +85454,11 @@ const TableWithControls = ({
             title: infiniteScrollConfig.title,
             scrollHeight: infiniteScrollConfig.scrollHeight,
             scrollWidth: infiniteScrollConfig.scrollWidth,
-            onChange: onInfiniteScrollTableChange
+            onChange: onInfiniteScrollTableChange,
+            rowSelection,
+            onRowClick: tableOnRowClick || onRowClick,
+            onRowSelectionChange,
+            onDataChange
           }
         );
       }
@@ -85431,7 +85484,8 @@ const TableWithControls = ({
             columns,
             rowSelection,
             onChange: onTableChange,
-            onRowClick
+            onRowClick,
+            onRowSelectionChange
           }
         );
       }

package/package.json

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