@osdk/react-components 0.1.0-beta.1 → 0.1.0-beta.2

package/build/cjs/public/experimental.cjs

@@ -1315,10 +1315,10 @@ function passiveEventSupported() {
         return false;
       }
     };
-    const noop = () => {
+    const noop2 = () => {
     };
-    window.addEventListener("test", noop, options);
-    window.removeEventListener("test", noop);
+    window.addEventListener("test", noop2, options);
+    window.removeEventListener("test", noop2);
   } catch (err) {
     supported = false;
   }
@@ -2782,7 +2782,7 @@ var useDefaultTableStates = ({
   };
 };
 var PAGE_SIZE = 50;
-function useObjectTableData(objectSet, columnDefinitions) {
+function useObjectTableData(objectSet, columnDefinitions, filter) {
   const withProperties = React2.useMemo(() => {
     if (!columnDefinitions) {
       return;
@@ -2799,10 +2799,232 @@ function useObjectTableData(objectSet, columnDefinitions) {
   }, [columnDefinitions]);
   return experimental.useObjectSet(objectSet, {
     withProperties,
-    pageSize: PAGE_SIZE
+    pageSize: PAGE_SIZE,
+    where: filter
   });
 }
 
+// src/object-table/utils/getRowId.ts
+var getRowId = (row) => {
+  return getRowIdFromPrimaryKey(row.$primaryKey);
+};
+var getRowIdFromPrimaryKey = (primaryKey) => primaryKey.toString();
+
+// src/object-table/hooks/useRowSelection.ts
+function useRowSelection({
+  selectionMode = "none",
+  selectedRows,
+  onRowSelection,
+  data
+}) {
+  const [internalRowSelection, setInternalRowSelection] = React2.useState({});
+  const [lastSelectedRowIndex, setLastSelectedRowIndex] = React2.useState(null);
+  const isControlled = selectedRows !== void 0;
+  const isSelectionEnabled = selectionMode !== "none";
+  const rowSelectionState = React2.useMemo(() => {
+    if (!isSelectionEnabled) return {};
+    if (isControlled && selectedRows) {
+      return getRowSelectionState(selectedRows);
+    }
+    return internalRowSelection;
+  }, [isSelectionEnabled, isControlled, selectedRows, internalRowSelection]);
+  const selectedCount = Object.values(rowSelectionState).filter(Boolean).length;
+  const totalCount = data?.length ?? 0;
+  const isAllSelected = totalCount > 0 && selectedCount === totalCount;
+  const hasSelection = selectedCount > 0;
+  const onToggleAll = React2.useCallback(() => {
+    if (!isSelectionEnabled || !data) return;
+    const newSelectedRows = isAllSelected ? [] : data.map((item) => item.$primaryKey);
+    if (!isControlled) {
+      setInternalRowSelection(getRowSelectionState(newSelectedRows));
+    }
+    onRowSelection?.(newSelectedRows);
+  }, [isSelectionEnabled, data, isAllSelected, isControlled, onRowSelection]);
+  const onToggleRow = React2.useCallback((rowId, rowIndex, isShiftClick = false) => {
+    if (!isSelectionEnabled || !data) return;
+    let newSelectedRows = [];
+    if (selectionMode === "single") {
+      newSelectedRows = getSingleSelectionRows({
+        rowId,
+        rowIndex,
+        data,
+        rowSelectionState
+      });
+      setLastSelectedRowIndex(rowIndex);
+    } else {
+      if (isShiftClick && lastSelectedRowIndex != null) {
+        newSelectedRows = getRangeSelectionRows({
+          rowIndex,
+          data,
+          lastSelectedRowIndex,
+          rowSelectionState
+        });
+      } else {
+        newSelectedRows = getMultipleSelectionRows({
+          rowIndex,
+          data,
+          rowSelectionState
+        });
+      }
+      setLastSelectedRowIndex(rowIndex);
+    }
+    if (!isControlled) {
+      setInternalRowSelection(getRowSelectionState(newSelectedRows));
+    }
+    onRowSelection?.(newSelectedRows);
+  }, [isSelectionEnabled, data, selectionMode, lastSelectedRowIndex, isControlled, rowSelectionState, onRowSelection]);
+  return {
+    rowSelection: rowSelectionState,
+    isAllSelected,
+    hasSelection,
+    onToggleAll,
+    onToggleRow
+  };
+}
+function getSingleSelectionRows({
+  rowId,
+  rowIndex,
+  data,
+  rowSelectionState
+}) {
+  const primaryKey = data[rowIndex].$primaryKey;
+  const newSelectedRows = rowSelectionState[rowId] ? [] : [primaryKey];
+  return newSelectedRows;
+}
+function getRangeSelectionRows({
+  lastSelectedRowIndex,
+  rowIndex,
+  data,
+  rowSelectionState
+}) {
+  if (lastSelectedRowIndex != null) {
+    const rowsInRange = getRowsInRange(data, lastSelectedRowIndex, rowIndex);
+    const primaryKeysInRange = rowsInRange.map((item) => item.$primaryKey);
+    const currentlySelected = getSelectedPrimaryKeys(rowSelectionState, data);
+    const newSelectedRows = [...currentlySelected];
+    primaryKeysInRange.forEach((item) => {
+      if (!newSelectedRows.includes(item)) {
+        newSelectedRows.push(item);
+      }
+    });
+    return newSelectedRows;
+  }
+  return [];
+}
+function getMultipleSelectionRows({
+  rowIndex,
+  data,
+  rowSelectionState
+}) {
+  const primaryKey = data[rowIndex].$primaryKey;
+  const currentlySelected = getSelectedPrimaryKeys(rowSelectionState, data);
+  const newSelectedRows = currentlySelected.includes(primaryKey) ? currentlySelected.filter((i) => i !== primaryKey) : [...currentlySelected, primaryKey];
+  return newSelectedRows;
+}
+function getRowsInRange(data, startIndex, endIndex) {
+  const start = Math.min(startIndex, endIndex);
+  const end = Math.max(startIndex, endIndex);
+  const rows = [];
+  for (let i = start; i <= end; i++) {
+    const item = data[i];
+    if (item) {
+      rows.push(item);
+    }
+  }
+  return rows;
+}
+function getRowSelectionState(primaryKeys) {
+  return primaryKeys.reduce((acc, primaryKey) => {
+    acc[getRowIdFromPrimaryKey(primaryKey)] = true;
+    return acc;
+  }, {});
+}
+function getSelectedPrimaryKeys(selectionState, data) {
+  return data.filter((item) => selectionState[getRowId(item)]).map((item) => item.$primaryKey);
+}
+function SelectionHeaderCell({
+  isAllSelected,
+  hasSelection,
+  onToggleAll
+}) {
+  return /* @__PURE__ */ React2__namespace.default.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "100%"
+    }
+  }, /* @__PURE__ */ React2__namespace.default.createElement("input", {
+    type: "checkbox",
+    checked: isAllSelected,
+    ref: (input) => {
+      if (input) input.indeterminate = hasSelection && !isAllSelected;
+    },
+    onChange: onToggleAll,
+    "aria-label": "Select all rows"
+  }));
+}
+var noop = () => {
+};
+function SelectionCell({
+  row,
+  onToggleRow
+}) {
+  const isSelected = row.getIsSelected();
+  const handleClick = React2.useCallback((e) => {
+    e.stopPropagation();
+    onToggleRow(row.id, row.index, e.shiftKey);
+  }, [row, onToggleRow]);
+  return /* @__PURE__ */ React2__namespace.default.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "100%"
+    }
+  }, /* @__PURE__ */ React2__namespace.default.createElement("input", {
+    type: "checkbox",
+    checked: isSelected,
+    onClick: handleClick,
+    onChange: noop,
+    "aria-label": `Select row ${row.index + 1}`
+  }));
+}
+
+// src/object-table/hooks/useSelectionColumn.tsx
+var SELECTION_COLUMN_ID = "__selection__";
+var useSelectionColumn = ({
+  selectionMode,
+  isAllSelected,
+  hasSelection,
+  onToggleAll,
+  onToggleRow
+}) => {
+  const selectionColumn = React2.useMemo(() => {
+    if (selectionMode === "none") return null;
+    return {
+      id: SELECTION_COLUMN_ID,
+      header: () => selectionMode === "multiple" ? /* @__PURE__ */ React2__namespace.default.createElement(SelectionHeaderCell, {
+        isAllSelected,
+        hasSelection,
+        onToggleAll
+      }) : null,
+      cell: ({
+        row
+      }) => /* @__PURE__ */ React2__namespace.default.createElement(SelectionCell, {
+        row,
+        onToggleRow
+      }),
+      size: 50,
+      minSize: 50,
+      maxSize: 50,
+      enableSorting: false,
+      enableResizing: false
+    };
+  }, [selectionMode, isAllSelected, hasSelection, onToggleAll, onToggleRow]);
+  return selectionColumn;
+};
+
 // ../../node_modules/.pnpm/@tanstack+virtual-core@3.13.17/node_modules/@tanstack/virtual-core/dist/esm/utils.js
 function memo2(getDeps, fn, opts) {
   let deps = opts.initialDeps ?? [];
@@ -3672,10 +3894,104 @@ function useVirtualizer(options) {
     ...options
   });
 }
+function CellContextMenu({
+  cell,
+  position,
+  onClose,
+  renderContent
+}) {
+  const ref = React2.useRef(null);
+  React2.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__ */ React2__namespace.default.createElement("div", {
+    ref,
+    style: {
+      position: "fixed",
+      zIndex: 9999,
+      left: position.left,
+      top: position.top,
+      minWidth: position.width
+    }
+  }, renderContent(cell.row.original, cell)), document.body);
+}
+var useCellContextMenu = ({
+  tdRef
+}) => {
+  const [popoverPosition, setPopoverPosition] = React2.useState(null);
+  const [isContextMenuOpen, setIsContextMenuOpen] = React2.useState(false);
+  const handleOpenContextMenu = React2.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 = React2.useCallback(() => {
+    setIsContextMenuOpen(false);
+    setPopoverPosition(null);
+  }, []);
+  return {
+    isContextMenuOpen,
+    handleOpenContextMenu,
+    handleCloseContextMenu,
+    popoverPosition
+  };
+};
+
+// src/object-table/TableCell.tsx
+function TableCell({
+  cell,
+  renderCellContextMenu
+}) {
+  const tdRef = React2.useRef(null);
+  const isSelectColumn = cell.column.id === SELECTION_COLUMN_ID;
+  const {
+    isContextMenuOpen,
+    handleOpenContextMenu,
+    handleCloseContextMenu,
+    popoverPosition
+  } = useCellContextMenu({
+    tdRef
+  });
+  const shouldRenderContextMenu = !isSelectColumn && isContextMenuOpen && !!popoverPosition && !!renderCellContextMenu;
+  return /* @__PURE__ */ React2__namespace.default.createElement(React2__namespace.default.Fragment, null, /* @__PURE__ */ React2__namespace.default.createElement("td", {
+    ref: tdRef,
+    style: {
+      display: "flex",
+      alignItems: "center",
+      width: cell.column.getSize()
+    },
+    onContextMenu: handleOpenContextMenu
+  }, flexRender(cell.column.columnDef.cell, cell.getContext())), shouldRenderContextMenu && /* @__PURE__ */ React2__namespace.default.createElement(CellContextMenu, {
+    cell,
+    position: popoverPosition,
+    onClose: handleCloseContextMenu,
+    renderContent: renderCellContextMenu
+  }));
+}
+
+// src/object-table/TableRow.tsx
 function TableRow({
   row,
   virtualRow,
-  onRowClick
+  onRowClick,
+  renderCellContextMenu
 }) {
   const handleClick = React2.useCallback(() => {
     onRowClick?.(row.original);
@@ -3688,14 +4004,11 @@ function TableRow({
       display: "flex"
     },
     onClick: handleClick
-  }, row.getVisibleCells().map((cell) => /* @__PURE__ */ React2__namespace.default.createElement("td", {
+  }, row.getVisibleCells().map((cell) => /* @__PURE__ */ React2__namespace.default.createElement(TableCell, {
     key: cell.id,
-    style: {
-      display: "flex",
-      alignItems: "center",
-      width: cell.column.getSize()
-    }
-  }, flexRender(cell.column.columnDef.cell, cell.getContext()))));
+    cell,
+    renderCellContextMenu
+  })));
 }
 
 // src/object-table/TableBody.tsx
@@ -3703,6 +4016,7 @@ function TableBody({
   rows,
   tableContainerRef,
   onRowClick,
+  renderCellContextMenu,
   rowHeight = 40
 }) {
   const rowVirtualizer = useVirtualizer({
@@ -3726,12 +4040,13 @@ function TableBody({
       key: row.id,
       row,
       virtualRow,
-      onRowClick
+      onRowClick,
+      renderCellContextMenu
     });
   }));
 }
 function TableHeader({
-  headerGroups
+  table
 }) {
   return /* @__PURE__ */ React2__namespace.default.createElement("thead", {
     style: {
@@ -3740,7 +4055,7 @@ function TableHeader({
       top: 0,
       zIndex: 1
     }
-  }, headerGroups.map((headerGroup) => /* @__PURE__ */ React2__namespace.default.createElement("tr", {
+  }, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React2__namespace.default.createElement("tr", {
     key: headerGroup.id,
     style: {
       display: "flex"
@@ -3753,9 +4068,25 @@ function TableHeader({
         display: "flex",
         width: header.getSize(),
         justifyContent: "flex-start",
-        alignItems: "center"
+        alignItems: "center",
+        position: "relative"
       }
-    }, header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()))
+    }, header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanResize() && /* @__PURE__ */ React2__namespace.default.createElement("div", {
+      onDoubleClick: () => header.column.resetSize(),
+      onMouseDown: header.getResizeHandler(),
+      onTouchStart: header.getResizeHandler(),
+      style: {
+        position: "absolute",
+        right: 0,
+        top: 0,
+        height: "100%",
+        width: "3px",
+        cursor: "col-resize",
+        touchAction: "none",
+        zIndex: 11,
+        transform: header.column.getIsResizing() ? `translateX(${table.getState().columnSizingInfo.deltaOffset ?? 0}px)` : ""
+      }
+    }))
   )))));
 }
 
@@ -3765,7 +4096,8 @@ function Table({
   isLoading,
   fetchNextPage,
   onRowClick,
-  rowHeight
+  rowHeight,
+  renderCellContextMenu
 }) {
   const tableContainerRef = React2.useRef(null);
   const fetchingRef = React2.useRef(false);
@@ -3796,7 +4128,9 @@ function Table({
       // needed for sticky header
       height: "100%",
       // needed for scrolling
-      overflow: "auto"
+      overflow: "auto",
+      cursor: table.getState().columnSizingInfo?.isResizingColumn ? "col-resize" : "default",
+      userSelect: table.getState().columnSizingInfo?.isResizingColumn ? "none" : "auto"
     },
     onScroll: handleScroll
   }, /* @__PURE__ */ React2__namespace.default.createElement("table", {
@@ -3804,12 +4138,13 @@ function Table({
       display: "grid"
     }
   }, /* @__PURE__ */ React2__namespace.default.createElement(TableHeader, {
-    headerGroups: table.getHeaderGroups()
+    table
   }), /* @__PURE__ */ React2__namespace.default.createElement(TableBody, {
     rows: table.getRowModel().rows,
     tableContainerRef,
     onRowClick,
-    rowHeight
+    rowHeight,
+    renderCellContextMenu
   })));
 }
 
@@ -3818,14 +4153,18 @@ function ObjectTable({
   objectSet,
   objectType,
   columnDefinitions,
-  onRowClick,
-  rowHeight
+  filter,
+  onRowSelection,
+  renderCellContextMenu,
+  selectionMode = "none",
+  selectedRows,
+  ...props
 }) {
   const {
     data,
     fetchMore,
     isLoading
-  } = useObjectTableData(objectSet, columnDefinitions);
+  } = useObjectTableData(objectSet, columnDefinitions, filter);
   const {
     columns,
     loading: isColumnsLoading
@@ -3835,21 +4174,58 @@ function ObjectTable({
   } = useDefaultTableStates({
     columnDefinitions
   });
+  const [columnSizing, setColumnSizing] = React2.useState({});
+  const {
+    rowSelection,
+    isAllSelected,
+    hasSelection,
+    onToggleAll,
+    onToggleRow
+  } = useRowSelection({
+    selectionMode,
+    selectedRows,
+    onRowSelection,
+    data
+  });
+  const selectionColumn = useSelectionColumn({
+    selectionMode,
+    isAllSelected,
+    hasSelection,
+    onToggleAll,
+    onToggleRow
+  });
+  const allColumns = React2.useMemo(() => {
+    return selectionColumn ? [selectionColumn, ...columns] : columns;
+  }, [selectionColumn, columns]);
   const table = useReactTable({
     data: data ?? [],
-    columns,
+    columns: allColumns,
     getCoreRowModel: getCoreRowModel(),
     state: {
-      columnVisibility
-    }
+      columnVisibility,
+      rowSelection,
+      columnSizing
+    },
+    onColumnSizingChange: setColumnSizing,
+    enableRowSelection: selectionMode !== "none",
+    columnResizeMode: "onChange",
+    columnResizeDirection: "ltr",
+    defaultColumn: {
+      minSize: 80
+    },
+    getRowId
   });
+  const onRenderCellContextMenu = React2.useCallback((row, cell) => {
+    return renderCellContextMenu?.(row, cell.getValue());
+  }, [renderCellContextMenu]);
   const isTableLoading = isLoading || isColumnsLoading;
   return /* @__PURE__ */ React2__namespace.default.createElement(Table, {
     table,
     isLoading: isTableLoading,
     fetchNextPage: fetchMore,
-    onRowClick,
-    rowHeight
+    onRowClick: props.onRowClick,
+    rowHeight: props.rowHeight,
+    renderCellContextMenu: onRenderCellContextMenu
   });
 }
 /*! Bundled license information: