@osdk/react-components 0.1.0-beta.6 → 0.1.0

package/build/cjs/public/experimental.cjs

@@ -1,20 +1,20 @@
 'use strict';
 
 var reactTable = require('@tanstack/react-table');
-var React9 = require('react');
+var React7 = require('react');
 var react = require('@osdk/react');
 var experimental = require('@osdk/react/experimental');
 var checkbox = require('@base-ui/react/checkbox');
 var icons = require('@blueprintjs/icons');
-var classNames = require('classnames');
+var classNames2 = require('classnames');
+var menu = require('@base-ui/react/menu');
 var reactVirtual = require('@tanstack/react-virtual');
 var reactDom = require('react-dom');
-var menu = require('@base-ui/react/menu');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React9__default = /*#__PURE__*/_interopDefault(React9);
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var React7__default = /*#__PURE__*/_interopDefault(React7);
+var classNames2__default = /*#__PURE__*/_interopDefault(classNames2);
 
 // src/object-table/ObjectTable.tsx
 function useColumnDefs(objectType, columnDefinitions) {
@@ -23,7 +23,7 @@ function useColumnDefs(objectType, columnDefinitions) {
     loading,
     error
   } = react.useOsdkMetadata(objectType);
-  const columns = React9.useMemo(() => {
+  const columns = React7.useMemo(() => {
     const objectProperties = metadata?.properties;
     if (columnDefinitions) {
       return getColumnsFromColumnDefinitions(columnDefinitions, objectProperties);
@@ -56,8 +56,12 @@ function getColumnsFromColumnDefinitions(columnDefinitions, objectProperties) {
       accessorKey: colKey,
       header: renderHeader ?? propertyMetadata?.displayName,
       size: width,
-      minSize: minWidth,
-      maxSize: maxWidth,
+      ...minWidth ? {
+        minSize: minWidth
+      } : {},
+      ...maxWidth ? {
+        maxSize: maxWidth
+      } : {},
       enableResizing: resizable,
       enableSorting: orderable,
       enableColumnFilter: filterable,
@@ -89,11 +93,11 @@ var useColumnPinning = ({
   hasSelectionColumn,
   onColumnsPinnedChanged
 }) => {
-  const [columnPinning, setColumnPinning] = React9.useState({
+  const [columnPinning, setColumnPinning] = React7.useState({
     left: [],
     right: []
   });
-  React9.useEffect(() => {
+  React7.useEffect(() => {
     const defaultState = getColumnPinningStateFromColumnDefs(columnDefinitions);
     const selectionCol = hasSelectionColumn ? [SELECTION_COLUMN_ID] : [];
     setColumnPinning({
@@ -101,7 +105,7 @@ var useColumnPinning = ({
       right: [...defaultState.right ?? []]
     });
   }, [columnDefinitions, hasSelectionColumn]);
-  const onColumnPinningChange = React9.useCallback((updater) => {
+  const onColumnPinningChange = React7.useCallback((updater) => {
     setColumnPinning((prev) => {
       const newPinning = typeof updater === "function" ? updater(prev) : updater;
       if (onColumnsPinnedChanged) {
@@ -158,7 +162,7 @@ function convertColumnPinningStateToArray(pinningState) {
 var useColumnVisibility = ({
   columnDefinitions
 }) => {
-  const columnVisibility = React9.useMemo(() => {
+  const columnVisibility = React7.useMemo(() => {
     if (columnDefinitions) {
       const colVisibility = columnDefinitions.reduce((acc, colDef) => {
         if (colDef.isVisible !== void 0) {
@@ -179,8 +183,8 @@ var useColumnVisibility = ({
   return columnVisibility;
 };
 var PAGE_SIZE = 50;
-function useObjectTableData(objectSet, columnDefinitions, filter, sorting) {
-  const orderBy = React9.useMemo(() => {
+function useObjectTableData(objectOrInterfaceType, columnDefinitions, filter, sorting) {
+  const orderBy = React7.useMemo(() => {
     if (!sorting || sorting.length === 0) {
       return void 0;
     }
@@ -189,13 +193,16 @@ function useObjectTableData(objectSet, columnDefinitions, filter, sorting) {
       return acc;
     }, {});
   }, [sorting]);
-  const withProperties = React9.useMemo(() => {
+  const withProperties = React7.useMemo(() => {
     if (!columnDefinitions) {
       return;
     }
     const rdpColumns = columnDefinitions.map((colDef) => colDef.locator).filter((colLocator) => {
       return colLocator.type === "rdp";
     });
+    if (!rdpColumns.length) {
+      return;
+    }
     return rdpColumns.reduce((acc, cur) => {
       return {
         ...acc,
@@ -203,7 +210,7 @@ function useObjectTableData(objectSet, columnDefinitions, filter, sorting) {
       };
     }, {});
   }, [columnDefinitions]);
-  return experimental.useObjectSet(objectSet, {
+  return experimental.useOsdkObjects(objectOrInterfaceType, {
     withProperties,
     pageSize: PAGE_SIZE,
     where: filter,
@@ -224,11 +231,11 @@ function useRowSelection({
   onRowSelection,
   data
 }) {
-  const [internalRowSelection, setInternalRowSelection] = React9.useState({});
-  const [lastSelectedRowIndex, setLastSelectedRowIndex] = React9.useState(null);
+  const [internalRowSelection, setInternalRowSelection] = React7.useState({});
+  const [lastSelectedRowIndex, setLastSelectedRowIndex] = React7.useState(null);
   const isControlled = selectedRows !== void 0;
   const isSelectionEnabled = selectionMode !== "none";
-  const rowSelectionState = React9.useMemo(() => {
+  const rowSelectionState = React7.useMemo(() => {
     if (!isSelectionEnabled) return {};
     if (isControlled && selectedRows) {
       return getRowSelectionState(selectedRows);
@@ -239,7 +246,7 @@ function useRowSelection({
   const totalCount = data?.length ?? 0;
   const isAllSelected = totalCount > 0 && selectedCount === totalCount;
   const hasSelection = selectedCount > 0;
-  const onToggleAll = React9.useCallback(() => {
+  const onToggleAll = React7.useCallback(() => {
     if (!isSelectionEnabled || !data) return;
     const newSelectedRows = isAllSelected ? [] : data.map((item) => item.$primaryKey);
     if (!isControlled) {
@@ -247,7 +254,7 @@ function useRowSelection({
     }
     onRowSelection?.(newSelectedRows);
   }, [isSelectionEnabled, data, isAllSelected, isControlled, onRowSelection]);
-  const onToggleRow = React9.useCallback((rowId, rowIndex, isShiftClick = false) => {
+  const onToggleRow = React7.useCallback((rowId, rowIndex, isShiftClick = false) => {
     if (!isSelectionEnabled || !data) return;
     let newSelectedRows = [];
     if (selectionMode === "single") {
@@ -369,14 +376,14 @@ function Checkbox({
   indicatorProps,
   ...rest
 }) {
-  return /* @__PURE__ */ React9__default.default.createElement(checkbox.Checkbox.Root, _extends({
-    className: classNames__default.default(Checkbox_default.osdkCheckboxRoot, className),
+  return /* @__PURE__ */ React7__default.default.createElement(checkbox.Checkbox.Root, _extends({
+    className: classNames2__default.default(Checkbox_default.osdkCheckboxRoot, className),
     indeterminate
-  }, rest), /* @__PURE__ */ React9__default.default.createElement(checkbox.Checkbox.Indicator, _extends({}, indicatorProps, {
-    className: classNames__default.default(Checkbox_default.osdkCheckboxIndicator, indicatorProps?.className)
-  }), indeterminate ? /* @__PURE__ */ React9__default.default.createElement(icons.Minus, {
+  }, rest), /* @__PURE__ */ React7__default.default.createElement(checkbox.Checkbox.Indicator, _extends({}, indicatorProps, {
+    className: classNames2__default.default(Checkbox_default.osdkCheckboxIndicator, indicatorProps?.className)
+  }), indeterminate ? /* @__PURE__ */ React7__default.default.createElement(icons.Minus, {
     color: "currentColor"
-  }) : /* @__PURE__ */ React9__default.default.createElement(icons.Tick, {
+  }) : /* @__PURE__ */ React7__default.default.createElement(icons.Tick, {
     color: "currentColor"
   })));
 }
@@ -387,7 +394,7 @@ function SelectionHeaderCell({
   hasSelection,
   onToggleAll
 }) {
-  return /* @__PURE__ */ React9__default.default.createElement(Checkbox, {
+  return /* @__PURE__ */ React7__default.default.createElement(Checkbox, {
     indeterminate: hasSelection && !isAllSelected,
     checked: isAllSelected,
     onCheckedChange: onToggleAll,
@@ -398,11 +405,11 @@ function SelectionCell({
   row,
   onToggleRow
 }) {
-  const handleClick = React9.useCallback((event) => {
+  const handleClick = React7.useCallback((event) => {
     const isShiftClick = event.shiftKey;
     onToggleRow(row.id, row.index, isShiftClick);
   }, [row, onToggleRow]);
-  return /* @__PURE__ */ React9__default.default.createElement(Checkbox, {
+  return /* @__PURE__ */ React7__default.default.createElement(Checkbox, {
     checked: row.getIsSelected(),
     onClick: handleClick,
     "aria-label": `Select row ${row.index + 1}`
@@ -417,18 +424,18 @@ var useSelectionColumn = ({
   onToggleAll,
   onToggleRow
 }) => {
-  const selectionColumn = React9.useMemo(() => {
+  const selectionColumn = React7.useMemo(() => {
     if (selectionMode === "none") return null;
     const colDef = {
       id: SELECTION_COLUMN_ID,
-      header: () => selectionMode === "multiple" ? /* @__PURE__ */ React9__default.default.createElement(SelectionHeaderCell, {
+      header: () => selectionMode === "multiple" ? /* @__PURE__ */ React7__default.default.createElement(SelectionHeaderCell, {
         isAllSelected,
         hasSelection,
         onToggleAll
       }) : null,
       cell: ({
         row
-      }) => /* @__PURE__ */ React9__default.default.createElement(SelectionCell, {
+      }) => /* @__PURE__ */ React7__default.default.createElement(SelectionCell, {
         row,
         onToggleRow
       }),
@@ -448,10 +455,10 @@ var useTableSorting = ({
   defaultOrderBy,
   onOrderByChanged
 }) => {
-  const [internalSorting, setInternalSorting] = React9.useState(() => defaultOrderBy ? convertOrderByToSortingState(defaultOrderBy) : []);
+  const [internalSorting, setInternalSorting] = React7.useState(() => defaultOrderBy ? convertOrderByToSortingState(defaultOrderBy) : []);
   const isControlled = orderBy !== void 0;
-  const sortingState = React9.useMemo(() => orderBy ? convertOrderByToSortingState(orderBy) : internalSorting, [orderBy, internalSorting]);
-  const onSortingChange = React9.useCallback((updater) => {
+  const sortingState = React7.useMemo(() => orderBy ? convertOrderByToSortingState(orderBy) : internalSorting, [orderBy, internalSorting]);
+  const onSortingChange = React7.useCallback((updater) => {
     const newSorting = typeof updater === "function" ? updater(sortingState) : updater;
     if (!isControlled) {
       setInternalSorting(newSorting);
@@ -485,187 +492,57 @@ function convertSortingStateToOrderBy(sorting) {
   }));
 }
 
-// src/object-table/Table.module.css
-var Table_default = {};
-
-// src/object-table/TableBody.module.css
-var TableBody_default = {};
-
-// src/object-table/CellContextMenu.module.css
-var CellContextMenu_default = {};
-
-// src/object-table/CellContextMenu.tsx
-function CellContextMenu({
-  cell,
-  position,
-  onClose,
-  renderContent
-}) {
-  const ref = React9.useRef(null);
-  React9.useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (ref.current && !ref.current.contains(event.target)) {
-        onClose();
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [onClose]);
-  return /* @__PURE__ */ reactDom.createPortal(/* @__PURE__ */ React9__default.default.createElement("div", {
-    ref,
-    className: CellContextMenu_default.osdkCellContextMenu,
-    style: {
-      left: position.left,
-      top: position.top,
-      minWidth: position.width
-    }
-  }, renderContent(cell.row.original, cell)), document.body);
-}
-var useCellContextMenu = ({
-  tdRef
-}) => {
-  const [popoverPosition, setPopoverPosition] = React9.useState(null);
-  const [isContextMenuOpen, setIsContextMenuOpen] = React9.useState(false);
-  const handleOpenContextMenu = React9.useCallback((event) => {
-    event.preventDefault();
-    event.stopPropagation();
-    if (tdRef.current) {
-      const rect = tdRef.current.getBoundingClientRect();
-      const position = {
-        left: rect.left,
-        top: rect.bottom,
-        width: rect.width
-      };
-      setPopoverPosition(position);
-      setIsContextMenuOpen(true);
-    }
-  }, [tdRef]);
-  const handleCloseContextMenu = React9.useCallback(() => {
-    setIsContextMenuOpen(false);
-    setPopoverPosition(null);
-  }, []);
-  return {
-    isContextMenuOpen,
-    handleOpenContextMenu,
-    handleCloseContextMenu,
-    popoverPosition
-  };
-};
+// src/object-table/LoadingCell.module.css
+var LoadingCell_default = {};
 
 // src/object-table/TableCell.module.css
 var TableCell_default = {};
 
-// src/object-table/utils/getColumnPinningStyles.ts
-function getColumnPinningStyles(column) {
-  const isPinned = column.getIsPinned();
-  return {
-    columnStyles: {
-      left: isPinned === "left" ? `${column.getStart("left")}px` : void 0,
-      right: isPinned === "right" ? `${column.getAfter("right")}px` : void 0,
-      width: column.getSize()
-    }
-  };
-}
-
-// src/object-table/TableCell.tsx
-function TableCell({
-  cell,
-  renderCellContextMenu
+// src/object-table/LoadingCell.tsx
+function LoadingCell({
+  width
 }) {
-  const tdRef = React9.useRef(null);
-  const isSelectColumn = cell.column.id === SELECTION_COLUMN_ID;
-  const {
-    isContextMenuOpen,
-    handleOpenContextMenu,
-    handleCloseContextMenu,
-    popoverPosition
-  } = useCellContextMenu({
-    tdRef
-  });
-  const shouldRenderContextMenu = !isSelectColumn && isContextMenuOpen && !!popoverPosition && !!renderCellContextMenu;
-  const {
-    columnStyles
-  } = getColumnPinningStyles(cell.column);
-  return /* @__PURE__ */ React9__default.default.createElement(React9__default.default.Fragment, null, /* @__PURE__ */ React9__default.default.createElement("td", {
-    ref: tdRef,
-    "data-pinned": cell.column.getIsPinned(),
+  return /* @__PURE__ */ React7__default.default.createElement("td", {
     className: TableCell_default.osdkTableCell,
-    style: columnStyles,
-    onContextMenu: handleOpenContextMenu
-  }, /* @__PURE__ */ React9__default.default.createElement("div", {
-    className: TableCell_default.osdkTableCellContent
-  }, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()))), shouldRenderContextMenu && /* @__PURE__ */ React9__default.default.createElement(CellContextMenu, {
-    cell,
-    position: popoverPosition,
-    onClose: handleCloseContextMenu,
-    renderContent: renderCellContextMenu
+    style: {
+      width
+    }
+  }, /* @__PURE__ */ React7__default.default.createElement("div", {
+    className: classNames2__default.default(LoadingCell_default.osdkLoadingCell, LoadingCell_default.osdkCellSkeleton)
   }));
 }
 
 // src/object-table/TableRow.module.css
 var TableRow_default = {};
 
-// src/object-table/TableRow.tsx
-function TableRow({
-  row,
-  virtualRow,
-  onRowClick,
-  renderCellContextMenu
+// src/object-table/LoadingRow.tsx
+function LoadingRow({
+  headers,
+  columnCount,
+  translateY,
+  rowHeight = 40,
+  columnWidth = 80
 }) {
-  const handleClick = React9.useCallback(() => {
-    onRowClick?.(row.original);
-  }, [onRowClick, row.original]);
-  return /* @__PURE__ */ React9__default.default.createElement("tr", {
-    "data-selected": row.getIsSelected(),
+  return /* @__PURE__ */ React7__default.default.createElement("tr", {
     className: TableRow_default.osdkTableRow,
     style: {
-      height: `${virtualRow.size}px`,
-      transform: `translateY(${virtualRow.start}px)`
-    },
-    onClick: handleClick
-  }, row.getVisibleCells().map((cell) => /* @__PURE__ */ React9__default.default.createElement(TableCell, {
-    key: cell.id,
-    cell,
-    renderCellContextMenu
-  })));
-}
-
-// src/object-table/TableBody.tsx
-function TableBody({
-  rows,
-  tableContainerRef,
-  onRowClick,
-  renderCellContextMenu,
-  rowHeight = 40
-}) {
-  const rowVirtualizer = reactVirtual.useVirtualizer({
-    count: rows.length,
-    estimateSize: () => rowHeight,
-    getScrollElement: () => tableContainerRef.current,
-    overscan: 5
-  });
-  React9.useLayoutEffect(() => {
-    rowVirtualizer.measure();
-  }, [rowVirtualizer, rows.length]);
-  return /* @__PURE__ */ React9__default.default.createElement("tbody", {
-    className: TableBody_default.osdkTableBody,
-    style: {
-      height: `${rowVirtualizer.getTotalSize()}px`
+      height: `${rowHeight}px`,
+      transform: `translateY(${translateY}px)`
     }
-  }, rowVirtualizer.getVirtualItems().map((virtualRow) => {
-    const row = rows[virtualRow.index];
-    return /* @__PURE__ */ React9__default.default.createElement(TableRow, {
-      key: row.id,
-      row,
-      virtualRow,
-      onRowClick,
-      renderCellContextMenu
+  }, /* @__PURE__ */ React7__default.default.createElement(React7__default.default.Fragment, null, Array.from({
+    length: columnCount
+  }).map((_, index) => {
+    const width = headers.length > index ? headers[index].getSize() : columnWidth;
+    return /* @__PURE__ */ React7__default.default.createElement(LoadingCell, {
+      key: `loading-cell-${index}`,
+      width
     });
-  }));
+  })));
 }
 
+// src/object-table/TableBody.module.css
+var TableBody_default = {};
+
 // src/object-table/TableHeader.module.css
 var TableHeader_default = {};
 
@@ -676,7 +553,7 @@ var TableHeaderContent_default = {};
 function TableHeaderContent({
   header
 }) {
-  return /* @__PURE__ */ React9__default.default.createElement("div", {
+  return /* @__PURE__ */ React7__default.default.createElement("div", {
     className: TableHeaderContent_default.osdkHeaderContent
   }, reactTable.flexRender(header.column.columnDef.header, header.getContext()));
 }
@@ -691,14 +568,14 @@ function HeaderMenuItem({
   label,
   active = false
 }) {
-  return /* @__PURE__ */ React9__default.default.createElement(menu.Menu.Item, {
+  return /* @__PURE__ */ React7__default.default.createElement(menu.Menu.Item, {
     closeOnClick: true,
-    className: classNames__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderMenuItem, active && TableHeaderWithPopover_default.osdkHeaderActiveMenuItem),
+    className: classNames2__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderMenuItem, active && TableHeaderWithPopover_default.osdkHeaderActiveMenuItem),
     onClick
-  }, /* @__PURE__ */ React9__default.default.createElement(Icon, {
+  }, /* @__PURE__ */ React7__default.default.createElement(Icon, {
     className: TableHeaderWithPopover_default.osdkHeaderIcon,
     color: "currentColor"
-  }), /* @__PURE__ */ React9__default.default.createElement("span", null, label));
+  }), /* @__PURE__ */ React7__default.default.createElement("span", null, label));
 }
 function TableHeaderWithPopover({
   header,
@@ -707,8 +584,8 @@ function TableHeaderWithPopover({
   onSortChange,
   onResetSize
 }) {
-  const [isOpen, setIsOpen] = React9.useState(false);
-  const handlePinLeft = React9.useCallback(() => {
+  const [isOpen, setIsOpen] = React7.useState(false);
+  const handlePinLeft = React7.useCallback(() => {
     setColumnPinning((prev) => {
       return {
         left: [...prev.left || [], header.column.id],
@@ -716,7 +593,7 @@ function TableHeaderWithPopover({
       };
     });
   }, [header.column.id, setColumnPinning]);
-  const handleUnpin = React9.useCallback(() => {
+  const handleUnpin = React7.useCallback(() => {
     setColumnPinning((prev) => {
       return {
         left: prev.left?.filter((id) => id !== header.column.id) || [],
@@ -724,109 +601,121 @@ function TableHeaderWithPopover({
       };
     });
   }, [header.column.id, setColumnPinning]);
-  const handleSortAscending = React9.useCallback(() => {
+  const handleSortAscending = React7.useCallback(() => {
     header.column.toggleSorting(false);
     onSortChange?.([{
       id: header.column.id,
       desc: false
     }]);
   }, [header.column, onSortChange]);
-  const handleSortDescending = React9.useCallback(() => {
+  const handleSortDescending = React7.useCallback(() => {
     header.column.toggleSorting(true);
     onSortChange?.([{
       id: header.column.id,
       desc: true
     }]);
   }, [header.column, onSortChange]);
-  const handleClearAllSorts = React9.useCallback(() => {
+  const handleClearAllSorts = React7.useCallback(() => {
     header.column.clearSorting();
     onSortChange?.([]);
   }, [header.column, onSortChange]);
-  const handleResetSize = React9.useCallback(() => {
+  const handleResetSize = React7.useCallback(() => {
     header.column.resetSize();
     if (onResetSize) {
       onResetSize();
     }
   }, [header.column, onResetSize]);
-  const handleInteraction = React9.useCallback((e) => {
+  const handleInteraction = React7.useCallback((e) => {
     e.preventDefault();
     setIsOpen((prev) => !prev);
   }, []);
   const isSorted = header.column.getIsSorted();
   const isSortable = header.column.getCanSort();
-  return /* @__PURE__ */ React9__default.default.createElement(menu.Menu.Root, {
+  return /* @__PURE__ */ React7__default.default.createElement(menu.Menu.Root, {
     open: isOpen,
     onOpenChange: setIsOpen
-  }, /* @__PURE__ */ React9__default.default.createElement("div", {
-    className: classNames__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderContainer),
+  }, /* @__PURE__ */ React7__default.default.createElement("div", {
+    className: classNames2__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderContainer),
     onContextMenu: handleInteraction
-  }, /* @__PURE__ */ React9__default.default.createElement("div", {
-    className: classNames__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderContentLeft)
-  }, isColumnPinned && /* @__PURE__ */ React9__default.default.createElement(icons.Pin, {
+  }, /* @__PURE__ */ React7__default.default.createElement("div", {
+    className: classNames2__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderContentLeft)
+  }, isColumnPinned && /* @__PURE__ */ React7__default.default.createElement(icons.Pin, {
     className: TableHeaderWithPopover_default.osdkHeaderIcon,
     color: "currentColor"
-  }), /* @__PURE__ */ React9__default.default.createElement(TableHeaderContent, {
+  }), /* @__PURE__ */ React7__default.default.createElement(TableHeaderContent, {
     header
-  })), /* @__PURE__ */ React9__default.default.createElement("div", {
-    className: classNames__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderContentRight)
-  }, isSorted && /* @__PURE__ */ React9__default.default.createElement("div", {
+  })), /* @__PURE__ */ React7__default.default.createElement("div", {
+    className: classNames2__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderContentRight)
+  }, isSorted && /* @__PURE__ */ React7__default.default.createElement("div", {
     className: TableHeaderWithPopover_default.osdkCenterContainer
-  }, isSorted === "asc" ? /* @__PURE__ */ React9__default.default.createElement(icons.SortAlphabetical, {
+  }, isSorted === "asc" ? /* @__PURE__ */ React7__default.default.createElement(icons.SortAlphabetical, {
     className: TableHeaderWithPopover_default.osdkHeaderIcon,
     color: "currentColor"
-  }) : /* @__PURE__ */ React9__default.default.createElement(icons.SortAlphabeticalDesc, {
+  }) : /* @__PURE__ */ React7__default.default.createElement(icons.SortAlphabeticalDesc, {
     className: TableHeaderWithPopover_default.osdkHeaderIcon,
     color: "currentColor"
-  })), /* @__PURE__ */ React9__default.default.createElement(menu.Menu.Trigger, {
+  })), /* @__PURE__ */ React7__default.default.createElement(menu.Menu.Trigger, {
     "aria-label": `Open header menu for column with id=${header.column.id}`,
-    className: classNames__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkHeaderPopoverTrigger)
-  }, /* @__PURE__ */ React9__default.default.createElement(icons.ChevronDown, {
+    className: classNames2__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkHeaderPopoverTrigger)
+  }, /* @__PURE__ */ React7__default.default.createElement(icons.ChevronDown, {
     className: TableHeaderWithPopover_default.osdkHeaderIcon
-  }))), /* @__PURE__ */ React9__default.default.createElement(menu.Menu.Portal, {
+  }))), /* @__PURE__ */ React7__default.default.createElement(menu.Menu.Portal, {
     container: document.body
-  }, /* @__PURE__ */ React9__default.default.createElement(menu.Menu.Positioner, {
+  }, /* @__PURE__ */ React7__default.default.createElement(menu.Menu.Positioner, {
     sideOffset: 4
-  }, /* @__PURE__ */ React9__default.default.createElement(menu.Menu.Popup, {
+  }, /* @__PURE__ */ React7__default.default.createElement(menu.Menu.Popup, {
     className: TableHeaderWithPopover_default.osdkHeaderPopup
-  }, !isColumnPinned && /* @__PURE__ */ React9__default.default.createElement(HeaderMenuItem, {
+  }, !isColumnPinned && /* @__PURE__ */ React7__default.default.createElement(HeaderMenuItem, {
     onClick: handlePinLeft,
     icon: icons.Pin,
     label: "Pin column"
-  }), isColumnPinned && /* @__PURE__ */ React9__default.default.createElement(HeaderMenuItem, {
+  }), isColumnPinned && /* @__PURE__ */ React7__default.default.createElement(HeaderMenuItem, {
     onClick: handleUnpin,
     icon: icons.Unpin,
     label: "Unpin Column",
     active: true
-  }), isSortable && /* @__PURE__ */ React9__default.default.createElement(React9__default.default.Fragment, null, /* @__PURE__ */ React9__default.default.createElement(HeaderMenuItem, {
+  }), isSortable && /* @__PURE__ */ React7__default.default.createElement(React7__default.default.Fragment, null, /* @__PURE__ */ React7__default.default.createElement(HeaderMenuItem, {
     onClick: handleSortAscending,
     icon: icons.SortAlphabetical,
     label: "Sort ascending",
     active: isSorted === "asc"
-  }), /* @__PURE__ */ React9__default.default.createElement(HeaderMenuItem, {
+  }), /* @__PURE__ */ React7__default.default.createElement(HeaderMenuItem, {
     onClick: handleSortDescending,
     icon: icons.SortAlphabeticalDesc,
     label: "Sort descending",
     active: isSorted === "desc"
-  })), !!isSorted && /* @__PURE__ */ React9__default.default.createElement(HeaderMenuItem, {
+  })), !!isSorted && /* @__PURE__ */ React7__default.default.createElement(HeaderMenuItem, {
     onClick: handleClearAllSorts,
     icon: icons.Remove,
     label: "Clear all sorts"
-  }), /* @__PURE__ */ React9__default.default.createElement(HeaderMenuItem, {
+  }), /* @__PURE__ */ React7__default.default.createElement(HeaderMenuItem, {
     onClick: handleResetSize,
     icon: icons.VerticalDistribution,
     label: "Reset Column Size"
   }))))));
 }
 
+// src/object-table/utils/getColumnPinningStyles.ts
+function getColumnPinningStyles(column) {
+  const isPinned = column.getIsPinned();
+  return {
+    columnStyles: {
+      left: isPinned === "left" ? `${column.getStart("left")}px` : void 0,
+      right: isPinned === "right" ? `${column.getAfter("right")}px` : void 0,
+      width: column.getSize()
+    }
+  };
+}
+
 // src/object-table/TableHeader.tsx
 function TableHeader({
   table
 }) {
   const isResizing = !!table.getState().columnSizingInfo?.isResizingColumn;
-  return /* @__PURE__ */ React9__default.default.createElement("thead", {
+  return /* @__PURE__ */ React7__default.default.createElement("thead", {
     className: TableHeader_default.osdkTableHeader,
     "data-resizing": isResizing
-  }, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React9__default.default.createElement("tr", {
+  }, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React7__default.default.createElement("tr", {
     key: headerGroup.id,
     className: TableHeader_default.osdkTableHeaderRow
   }, headerGroup.headers.map((header) => {
@@ -835,18 +724,18 @@ function TableHeader({
     } = getColumnPinningStyles(header.column);
     const isColumnPinned = header.column.getIsPinned();
     const isSelectColumn = header.id === SELECTION_COLUMN_ID;
-    return /* @__PURE__ */ React9__default.default.createElement("th", {
+    return /* @__PURE__ */ React7__default.default.createElement("th", {
       key: header.id,
       "data-pinned": header.column.getIsPinned(),
       className: TableHeader_default.osdkTableHeaderCell,
       style: columnStyles
-    }, header.isPlaceholder ? null : isSelectColumn ? /* @__PURE__ */ React9__default.default.createElement(TableHeaderContent, {
+    }, header.isPlaceholder ? null : isSelectColumn ? /* @__PURE__ */ React7__default.default.createElement(TableHeaderContent, {
       header
-    }) : /* @__PURE__ */ React9__default.default.createElement(TableHeaderWithPopover, {
+    }) : /* @__PURE__ */ React7__default.default.createElement(TableHeaderWithPopover, {
       header,
       isColumnPinned,
       setColumnPinning: table.setColumnPinning
-    }), header.column.getCanResize() && /* @__PURE__ */ React9__default.default.createElement("div", {
+    }), header.column.getCanResize() && /* @__PURE__ */ React7__default.default.createElement("div", {
       className: TableHeader_default.osdkTableHeaderResizer,
       onDoubleClick: () => header.column.resetSize(),
       onMouseDown: header.getResizeHandler(),
@@ -855,6 +744,265 @@ function TableHeader({
   }))));
 }
 
+// src/object-table/LoadingStateTable.tsx
+var MIN_ROWS = 5;
+function LoadingStateTable({
+  table,
+  tableContainerRef,
+  headerGroups,
+  rowHeight = 40,
+  columnWidth = 120
+}) {
+  const isSelectionEnabled = table.options.enableRowSelection;
+  const minHeaderCount = isSelectionEnabled ? 1 : 0;
+  const headers = headerGroups[0]?.headers ?? [];
+  const hasHeadersLoaded = headers.length > minHeaderCount;
+  const headerRef = React7.useRef(null);
+  const bodyRef = React7.useRef(null);
+  const [loadingRowCount, setLoadingRowCount] = React7.useState(MIN_ROWS);
+  const [loadingColumnCount, setLoadingColumnCount] = React7.useState(headers.length);
+  React7.useEffect(() => {
+    if (hasHeadersLoaded) {
+      setLoadingColumnCount(headers.length);
+    } else {
+      if (tableContainerRef.current) {
+        const tableWidth = tableContainerRef.current.clientWidth;
+        if (tableWidth > 0) {
+          const columnsNeeded = Math.ceil(tableWidth / columnWidth);
+          setLoadingColumnCount(columnsNeeded);
+        }
+      }
+    }
+  }, [columnWidth, hasHeadersLoaded, headers, tableContainerRef]);
+  React7.useEffect(() => {
+    if (tableContainerRef.current) {
+      const containerHeight = tableContainerRef.current.clientHeight;
+      const availableHeight = containerHeight - rowHeight;
+      if (availableHeight > 0) {
+        const rowsNeeded = Math.ceil(availableHeight / rowHeight);
+        setLoadingRowCount(Math.max(rowsNeeded, MIN_ROWS));
+      }
+    }
+  }, [tableContainerRef, rowHeight]);
+  return /* @__PURE__ */ React7__default.default.createElement(React7__default.default.Fragment, null, hasHeadersLoaded ? /* @__PURE__ */ React7__default.default.createElement(TableHeader, {
+    table
+  }) : /* @__PURE__ */ React7__default.default.createElement("thead", {
+    className: TableHeader_default.osdkTableHeader,
+    ref: headerRef
+  }, /* @__PURE__ */ React7__default.default.createElement("tr", {
+    className: TableHeader_default.osdkTableHeaderRow
+  }, Array.from({
+    length: loadingColumnCount
+  }).map((_, index) => {
+    const width = headers.length > index ? headers[index].getSize() : columnWidth;
+    return /* @__PURE__ */ React7__default.default.createElement("th", {
+      key: `loading-header-${index}`,
+      className: TableHeader_default.osdkTableHeaderCell,
+      style: {
+        width
+      }
+    }, /* @__PURE__ */ React7__default.default.createElement("div", {
+      className: classNames2__default.default(TableHeader_default.osdkLoadingHeaderCell, LoadingCell_default.osdkCellSkeleton)
+    }));
+  }))), /* @__PURE__ */ React7__default.default.createElement("tbody", {
+    className: TableBody_default.osdkTableBody,
+    ref: bodyRef
+  }, Array.from({
+    length: loadingRowCount
+  }).map((_, index) => /* @__PURE__ */ React7__default.default.createElement(LoadingRow, {
+    key: `skeleton-${index}`,
+    columnCount: loadingColumnCount,
+    headers,
+    translateY: rowHeight * index,
+    rowHeight,
+    columnWidth
+  }))));
+}
+
+// src/object-table/NonIdealState.module.css
+var NonIdealState_default = {};
+
+// src/object-table/NonIdealState.tsx
+function NonIdealState({
+  message
+}) {
+  return /* @__PURE__ */ React7__default.default.createElement("div", {
+    className: NonIdealState_default.container
+  }, /* @__PURE__ */ React7__default.default.createElement("div", {
+    className: NonIdealState_default.message
+  }, message));
+}
+
+// src/object-table/Table.module.css
+var Table_default = {};
+
+// src/object-table/CellContextMenu.module.css
+var CellContextMenu_default = {};
+
+// src/object-table/CellContextMenu.tsx
+function CellContextMenu({
+  cell,
+  position,
+  onClose,
+  renderContent
+}) {
+  const ref = React7.useRef(null);
+  React7.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [onClose]);
+  return /* @__PURE__ */ reactDom.createPortal(/* @__PURE__ */ React7__default.default.createElement("div", {
+    ref,
+    className: CellContextMenu_default.osdkCellContextMenu,
+    style: {
+      left: position.left,
+      top: position.top,
+      minWidth: position.width
+    }
+  }, renderContent(cell.row.original, cell)), document.body);
+}
+var useCellContextMenu = ({
+  tdRef
+}) => {
+  const [popoverPosition, setPopoverPosition] = React7.useState(null);
+  const [isContextMenuOpen, setIsContextMenuOpen] = React7.useState(false);
+  const handleOpenContextMenu = React7.useCallback((event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (tdRef.current) {
+      const rect = tdRef.current.getBoundingClientRect();
+      const position = {
+        left: rect.left,
+        top: rect.bottom,
+        width: rect.width
+      };
+      setPopoverPosition(position);
+      setIsContextMenuOpen(true);
+    }
+  }, [tdRef]);
+  const handleCloseContextMenu = React7.useCallback(() => {
+    setIsContextMenuOpen(false);
+    setPopoverPosition(null);
+  }, []);
+  return {
+    isContextMenuOpen,
+    handleOpenContextMenu,
+    handleCloseContextMenu,
+    popoverPosition
+  };
+};
+
+// src/object-table/TableCell.tsx
+function TableCell({
+  cell,
+  renderCellContextMenu
+}) {
+  const tdRef = React7.useRef(null);
+  const isSelectColumn = cell.column.id === SELECTION_COLUMN_ID;
+  const {
+    isContextMenuOpen,
+    handleOpenContextMenu,
+    handleCloseContextMenu,
+    popoverPosition
+  } = useCellContextMenu({
+    tdRef
+  });
+  const shouldRenderContextMenu = !isSelectColumn && isContextMenuOpen && !!popoverPosition && !!renderCellContextMenu;
+  const {
+    columnStyles
+  } = getColumnPinningStyles(cell.column);
+  return /* @__PURE__ */ React7__default.default.createElement(React7__default.default.Fragment, null, /* @__PURE__ */ React7__default.default.createElement("td", {
+    ref: tdRef,
+    "data-pinned": cell.column.getIsPinned(),
+    className: TableCell_default.osdkTableCell,
+    style: columnStyles,
+    onContextMenu: handleOpenContextMenu
+  }, /* @__PURE__ */ React7__default.default.createElement("div", {
+    className: TableCell_default.osdkTableCellContent
+  }, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()))), shouldRenderContextMenu && /* @__PURE__ */ React7__default.default.createElement(CellContextMenu, {
+    cell,
+    position: popoverPosition,
+    onClose: handleCloseContextMenu,
+    renderContent: renderCellContextMenu
+  }));
+}
+
+// src/object-table/TableRow.tsx
+function TableRow({
+  row,
+  virtualRow,
+  onRowClick,
+  renderCellContextMenu
+}) {
+  const handleClick = React7.useCallback(() => {
+    onRowClick?.(row.original);
+  }, [onRowClick, row.original]);
+  return /* @__PURE__ */ React7__default.default.createElement("tr", {
+    "data-selected": row.getIsSelected(),
+    className: TableRow_default.osdkTableRow,
+    style: {
+      height: `${virtualRow.size}px`,
+      transform: `translateY(${virtualRow.start}px)`
+    },
+    onClick: handleClick
+  }, row.getVisibleCells().map((cell) => /* @__PURE__ */ React7__default.default.createElement(TableCell, {
+    key: cell.id,
+    cell,
+    renderCellContextMenu
+  })));
+}
+
+// src/object-table/TableBody.tsx
+function TableBody({
+  rows,
+  tableContainerRef,
+  onRowClick,
+  renderCellContextMenu,
+  rowHeight = 40,
+  isLoadingMore = false,
+  headerGroups = []
+}) {
+  const rowVirtualizer = reactVirtual.useVirtualizer({
+    count: rows.length,
+    estimateSize: () => rowHeight,
+    getScrollElement: () => tableContainerRef.current,
+    overscan: 5
+  });
+  React7.useLayoutEffect(() => {
+    rowVirtualizer.measure();
+  }, [rowVirtualizer, rows.length]);
+  const totalSize = rowVirtualizer.getTotalSize();
+  const bodyHeight = isLoadingMore ? totalSize + rowHeight : totalSize;
+  const headers = headerGroups[0]?.headers ?? [];
+  return /* @__PURE__ */ React7__default.default.createElement("tbody", {
+    className: TableBody_default.osdkTableBody,
+    style: {
+      height: `${bodyHeight}px`
+    }
+  }, rowVirtualizer.getVirtualItems().map((virtualRow) => {
+    const row = rows[virtualRow.index];
+    return /* @__PURE__ */ React7__default.default.createElement(TableRow, {
+      key: row.id,
+      row,
+      virtualRow,
+      onRowClick,
+      renderCellContextMenu
+    });
+  }), isLoadingMore && /* @__PURE__ */ React7__default.default.createElement(LoadingRow, {
+    headers,
+    translateY: totalSize,
+    rowHeight,
+    columnCount: headers.length
+  }));
+}
+
 // src/object-table/Table.tsx
 function BaseTable({
   table,
@@ -863,48 +1011,69 @@ function BaseTable({
   onRowClick,
   rowHeight,
   renderCellContextMenu,
-  className
+  className,
+  error
 }) {
-  const tableContainerRef = React9.useRef(null);
-  const fetchingRef = React9.useRef(false);
-  const fetchMoreOnEndReached = React9.useCallback(async (containerRefElement) => {
-    if (containerRefElement && !fetchingRef.current) {
+  const tableContainerRef = React7.useRef(null);
+  const [isLoadingMore, setIsLoadingMore] = React7.useState(false);
+  const fetchingRef = React7.useRef(false);
+  React7.useEffect(() => {
+    if (!isLoading || fetchNextPage == null) {
+      setIsLoadingMore(false);
+    }
+  }, [isLoading, fetchNextPage]);
+  const fetchMoreOnEndReached = React7.useCallback(async (containerRefElement) => {
+    if (containerRefElement && !fetchingRef.current && !isLoadingMore) {
       const {
         scrollHeight,
         scrollTop,
         clientHeight
       } = containerRefElement;
-      if (scrollHeight - scrollTop - clientHeight < 100 && !isLoading) {
+      if (scrollHeight - scrollTop - clientHeight < 100 && !isLoading && fetchNextPage != null) {
         fetchingRef.current = true;
+        setIsLoadingMore(true);
         try {
-          await fetchNextPage?.();
+          await fetchNextPage();
         } finally {
           fetchingRef.current = false;
         }
       }
     }
-  }, [fetchNextPage, isLoading]);
-  const handleScroll = React9.useCallback(async (e) => {
+  }, [fetchNextPage, isLoading, isLoadingMore]);
+  const handleScroll = React7.useCallback(async (e) => {
     await fetchMoreOnEndReached(e.currentTarget);
   }, [fetchMoreOnEndReached]);
-  return /* @__PURE__ */ React9__default.default.createElement("div", {
+  const rows = table.getRowModel().rows;
+  const headerGroups = table.getHeaderGroups();
+  const hasData = rows.length > 0;
+  return /* @__PURE__ */ React7__default.default.createElement("div", {
     ref: tableContainerRef,
-    className: classNames__default.default(Table_default.osdkTableContainer, className),
+    className: classNames2__default.default(Table_default.osdkTableContainer, className),
     onScroll: handleScroll
-  }, /* @__PURE__ */ React9__default.default.createElement("table", null, /* @__PURE__ */ React9__default.default.createElement(TableHeader, {
+  }, /* @__PURE__ */ React7__default.default.createElement("table", null, isLoading && !hasData ? /* @__PURE__ */ React7__default.default.createElement(LoadingStateTable, {
+    table,
+    headerGroups,
+    rowHeight,
+    tableContainerRef
+  }) : /* @__PURE__ */ React7__default.default.createElement(React7__default.default.Fragment, null, /* @__PURE__ */ React7__default.default.createElement(TableHeader, {
     table
-  }), /* @__PURE__ */ React9__default.default.createElement(TableBody, {
-    rows: table.getRowModel().rows,
+  }), !hasData && error == null ? /* @__PURE__ */ React7__default.default.createElement(NonIdealState, {
+    message: "No Data"
+  }) : /* @__PURE__ */ React7__default.default.createElement(TableBody, {
+    rows,
     tableContainerRef,
     onRowClick,
     rowHeight,
-    renderCellContextMenu
+    renderCellContextMenu,
+    isLoadingMore,
+    headerGroups
+  })), error != null && /* @__PURE__ */ React7__default.default.createElement(NonIdealState, {
+    message: `Error Loading Data: ${error.message}`
   })));
 }
 
 // src/object-table/ObjectTable.tsx
 function ObjectTable({
-  objectSet,
   objectType,
   columnDefinitions,
   filter,
@@ -918,7 +1087,7 @@ function ObjectTable({
   selectedRows,
   ...props
 }) {
-  const [columnSizing, setColumnSizing] = React9.useState({});
+  const [columnSizing, setColumnSizing] = React7.useState({});
   const {
     sorting,
     onSortingChange
@@ -930,8 +1099,9 @@ function ObjectTable({
   const {
     data,
     fetchMore,
-    isLoading
-  } = useObjectTableData(objectSet, columnDefinitions, filter, sorting);
+    isLoading,
+    error
+  } = useObjectTableData(objectType, columnDefinitions, filter, sorting);
   const {
     columns,
     loading: isColumnsLoading
@@ -958,7 +1128,7 @@ function ObjectTable({
     onToggleAll,
     onToggleRow
   });
-  const allColumns = React9.useMemo(() => {
+  const allColumns = React7.useMemo(() => {
     return selectionColumn ? [selectionColumn, ...columns] : columns;
   }, [selectionColumn, columns]);
   const {
@@ -993,18 +1163,19 @@ function ObjectTable({
     },
     getRowId
   });
-  const onRenderCellContextMenu = React9.useCallback((row, cell) => {
+  const onRenderCellContextMenu = React7.useCallback((row, cell) => {
     return renderCellContextMenu?.(row, cell.getValue());
   }, [renderCellContextMenu]);
   const isTableLoading = isLoading || isColumnsLoading;
-  return /* @__PURE__ */ React9__default.default.createElement(BaseTable, {
+  return /* @__PURE__ */ React7__default.default.createElement(BaseTable, {
     table,
     isLoading: isTableLoading,
     fetchNextPage: fetchMore,
     onRowClick: props.onRowClick,
     rowHeight: props.rowHeight,
     renderCellContextMenu: onRenderCellContextMenu,
-    className: props.className
+    className: props.className,
+    error
   });
 }