@osdk/react-components 0.2.0-beta.3 → 0.2.0-beta.4

package/build/cjs/public/experimental.cjs

@@ -1,8 +1,9 @@
 'use strict';
 
 var reactTable = require('@tanstack/react-table');
-var React10 = require('react');
+var React12 = require('react');
 var react = require('@osdk/react');
+var input = require('@base-ui/react/input');
 var experimental = require('@osdk/react/experimental');
 var checkbox = require('@base-ui/react/checkbox');
 var icons = require('@blueprintjs/icons');
@@ -13,24 +14,136 @@ var sortable = require('@dnd-kit/sortable');
 var dialog = require('@base-ui/react/dialog');
 var core = require('@dnd-kit/core');
 var utilities = require('@dnd-kit/utilities');
-var input = require('@base-ui/react/input');
 var menu = require('@base-ui/react/menu');
 var reactVirtual = require('@tanstack/react-virtual');
 var reactDom = require('react-dom');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React10__default = /*#__PURE__*/_interopDefault(React10);
+var React12__default = /*#__PURE__*/_interopDefault(React12);
 var classNames7__default = /*#__PURE__*/_interopDefault(classNames7);
 
 // src/object-table/ObjectTable.tsx
+
+// src/object-table/EditableCell.module.css
+var EditableCell_default = {};
+
+// src/object-table/EditableCell.tsx
+var NUMBER_TYPES = ["double", "integer", "long", "float", "decimal", "byte", "short"];
+function valueToString(value) {
+  if (value == null) {
+    return "";
+  }
+  if (typeof value === "object") {
+    return JSON.stringify(value);
+  }
+  return String(value);
+}
+function parseValueByType(value, dataType) {
+  if (!dataType || !NUMBER_TYPES.includes(dataType)) {
+    return value;
+  }
+  if (value === "") {
+    return null;
+  }
+  const parsedNumber = Number(value);
+  if (isNaN(parsedNumber)) {
+    return value;
+  }
+  return parsedNumber;
+}
+function EditableCell({
+  initialValue,
+  currentValue,
+  cellId,
+  dataType,
+  onCellEdit
+}) {
+  const [value, setValue] = React12.useState(valueToString(currentValue));
+  const isCancelled = React12.useRef(false);
+  React12.useEffect(() => {
+    setValue(valueToString(currentValue));
+  }, [currentValue]);
+  const handleBlur = React12.useCallback(() => {
+    if (isCancelled.current) {
+      isCancelled.current = false;
+      return;
+    }
+    const parsedValue = parseValueByType(value, dataType);
+    onCellEdit?.(cellId, {
+      newValue: parsedValue,
+      oldValue: initialValue
+    });
+  }, [value, initialValue, onCellEdit, cellId, dataType]);
+  const handleChange = React12.useCallback((value2) => {
+    setValue(value2);
+  }, []);
+  const handleKeyDown = React12.useCallback((e) => {
+    if (e.key === "Enter") {
+      e.currentTarget.blur();
+    }
+    if (e.key === "Escape") {
+      isCancelled.current = true;
+      setValue(valueToString(currentValue));
+      e.currentTarget.blur();
+    }
+  }, [currentValue]);
+  const inputType = dataType && NUMBER_TYPES.includes(dataType) ? "number" : "text";
+  return /* @__PURE__ */ React12__default.default.createElement(input.Input, {
+    className: EditableCell_default.osdkEditableInput,
+    type: inputType,
+    value,
+    onValueChange: handleChange,
+    onBlur: handleBlur,
+    onKeyDown: handleKeyDown
+  });
+}
+
+// src/object-table/utils/getCellId.ts
+function getCellId(cellIdentifier) {
+  return JSON.stringify(cellIdentifier);
+}
+function getCellIdentifier(cellId) {
+  const parsed = JSON.parse(cellId);
+  if (typeof parsed === "object" && parsed != null && "rowId" in parsed && "columnId" in parsed) {
+    return parsed;
+  }
+  throw new Error("Parsed cellId does not have required properties");
+}
+
+// src/object-table/DefaultCellRenderer.tsx
+function renderDefaultCell(cellContext) {
+  const meta = cellContext.table.options.meta;
+  const columnMeta = cellContext.column.columnDef.meta;
+  if (!columnMeta?.editable || !meta?.onCellEdit) {
+    return cellContext.getValue();
+  }
+  const rowId = cellContext.row.id;
+  const columnId = cellContext.column.id;
+  const cellId = getCellId({
+    rowId,
+    columnId
+  });
+  const cellEdits = meta.cellEdits;
+  const editedValue = cellEdits?.[cellId];
+  const currentValue = editedValue?.newValue ?? cellContext.getValue();
+  return /* @__PURE__ */ React12__default.default.createElement(EditableCell, {
+    initialValue: cellContext.getValue(),
+    currentValue,
+    cellId,
+    dataType: columnMeta?.dataType,
+    onCellEdit: meta.onCellEdit
+  });
+}
+
+// src/object-table/hooks/useColumnDefs.ts
 function useColumnDefs(objectType, columnDefinitions) {
   const {
     metadata,
     loading,
     error
   } = react.useOsdkMetadata(objectType);
-  const columns = React10.useMemo(() => {
+  const columns = React12.useMemo(() => {
     const objectProperties = metadata?.properties;
     if (columnDefinitions) {
       return getColumnsFromColumnDefinitions(columnDefinitions, objectProperties);
@@ -53,19 +166,23 @@ function getColumnsFromColumnDefinitions(columnDefinitions, objectProperties) {
       resizable,
       orderable,
       filterable,
+      editable,
       renderCell,
       renderHeader,
       columnName
     } = col;
     const propertyMetadata = locator.type === "property" ? objectProperties?.[locator.id] : void 0;
     const colKey = locator.id;
+    const dataType = propertyMetadata?.type && typeof propertyMetadata.type === "string" ? propertyMetadata.type : void 0;
     const colDef = {
       id: colKey,
       accessorKey: colKey,
       header: renderHeader ?? (columnName || propertyMetadata?.displayName),
       meta: {
         columnName: columnName || propertyMetadata?.displayName,
-        isVisible: col.isVisible !== false
+        isVisible: col.isVisible !== false,
+        editable,
+        dataType
       },
       size: width,
       ...minWidth ? {
@@ -79,7 +196,10 @@ function getColumnsFromColumnDefinitions(columnDefinitions, objectProperties) {
       enableColumnFilter: filterable,
       cell: (cellContext) => {
         const object = cellContext.row.original;
-        return renderCell ? renderCell(object, locator) : cellContext.getValue();
+        if (renderCell) {
+          return renderCell(object, locator);
+        }
+        return renderDefaultCell(cellContext);
       }
     };
     return colDef;
@@ -105,11 +225,11 @@ var useColumnPinning = ({
   hasSelectionColumn,
   onColumnsPinnedChanged
 }) => {
-  const [columnPinning, setColumnPinning] = React10.useState({
+  const [columnPinning, setColumnPinning] = React12.useState({
     left: [],
     right: []
   });
-  React10.useEffect(() => {
+  React12.useEffect(() => {
     const defaultState = getColumnPinningStateFromColumnDefs(columnDefinitions);
     const selectionCol = hasSelectionColumn ? [SELECTION_COLUMN_ID] : [];
     setColumnPinning({
@@ -117,7 +237,7 @@ var useColumnPinning = ({
       right: [...defaultState.right ?? []]
     });
   }, [columnDefinitions, hasSelectionColumn]);
-  const onColumnPinningChange = React10.useCallback((updater) => {
+  const onColumnPinningChange = React12.useCallback((updater) => {
     setColumnPinning((prev) => {
       const newPinning = typeof updater === "function" ? updater(prev) : updater;
       if (onColumnsPinnedChanged) {
@@ -174,8 +294,8 @@ function convertColumnPinningStateToArray(pinningState) {
 var useColumnResize = ({
   onColumnResize
 }) => {
-  const [columnSizing, setColumnSizing] = React10.useState({});
-  const onColumnSizingChange = React10.useCallback((updater) => {
+  const [columnSizing, setColumnSizing] = React12.useState({});
+  const onColumnSizingChange = React12.useCallback((updater) => {
     setColumnSizing((prev) => {
       const newState = typeof updater === "function" ? updater(prev) : updater;
       if (onColumnResize) {
@@ -202,15 +322,15 @@ var useColumnVisibility = ({
   allColumns,
   onColumnVisibilityChanged
 }) => {
-  const [columnVisibility, setColumnVisibility] = React10.useState(() => getColumnVisibilityState(allColumns));
-  const [columnOrder, setColumnOrder] = React10.useState(() => getColumnOrder(allColumns));
-  React10.useEffect(() => {
+  const [columnVisibility, setColumnVisibility] = React12.useState(() => getColumnVisibilityState(allColumns));
+  const [columnOrder, setColumnOrder] = React12.useState(() => getColumnOrder(allColumns));
+  React12.useEffect(() => {
     setColumnVisibility(getColumnVisibilityState(allColumns));
   }, [allColumns]);
-  React10.useEffect(() => {
+  React12.useEffect(() => {
     setColumnOrder(getColumnOrder(allColumns));
   }, [allColumns]);
-  const onColumnVisibilityChange = React10.useCallback((updaterOrValue) => {
+  const onColumnVisibilityChange = React12.useCallback((updaterOrValue) => {
     setColumnVisibility((prev) => {
       const newState = typeof updaterOrValue === "function" ? updaterOrValue(prev) : updaterOrValue;
       if (onColumnVisibilityChanged) {
@@ -223,7 +343,7 @@ var useColumnVisibility = ({
       return newState;
     });
   }, [onColumnVisibilityChanged]);
-  const onColumnOrderChange = React10.useCallback((updaterOrValue) => {
+  const onColumnOrderChange = React12.useCallback((updaterOrValue) => {
     setColumnOrder((prev) => {
       const newState = typeof updaterOrValue === "function" ? updaterOrValue(prev) : updaterOrValue;
       return newState;
@@ -251,9 +371,45 @@ var getColumnVisibilityState = (allColumns) => {
 var getColumnOrder = (allColumns) => {
   return allColumns.map((col) => col.id ?? col.accessorKey).filter((id) => id != null);
 };
+function useEditableTable({
+  onCellValueChanged,
+  onSubmitEdits
+}) {
+  const [cellEdits, setCellEdits] = React12.useState({});
+  const handleCellEdit = React12.useCallback((cellId, state) => {
+    const cellIdentifier = getCellIdentifier(cellId);
+    if (state.newValue === state.oldValue) {
+      setCellEdits((prev) => {
+        const {
+          [cellId]: _,
+          ...rest
+        } = prev;
+        return rest;
+      });
+    } else {
+      setCellEdits((prev) => ({
+        ...prev,
+        [cellId]: state
+      }));
+    }
+    onCellValueChanged?.(cellIdentifier, state);
+  }, [onCellValueChanged]);
+  const clearEdits = React12.useCallback(() => {
+    setCellEdits({});
+  }, []);
+  const handleSubmitEdits = React12.useCallback(async () => {
+    await onSubmitEdits?.(cellEdits);
+  }, [cellEdits, onSubmitEdits]);
+  return {
+    cellEdits,
+    handleCellEdit,
+    handleSubmitEdits,
+    clearEdits
+  };
+}
 var PAGE_SIZE = 50;
 function useObjectTableData(objectOrInterfaceType, columnDefinitions, filter, sorting) {
-  const orderBy = React10.useMemo(() => {
+  const orderBy = React12.useMemo(() => {
     if (!sorting || sorting.length === 0) {
       return void 0;
     }
@@ -262,7 +418,7 @@ function useObjectTableData(objectOrInterfaceType, columnDefinitions, filter, so
       return acc;
     }, {});
   }, [sorting]);
-  const withProperties = React10.useMemo(() => {
+  const withProperties = React12.useMemo(() => {
     if (!columnDefinitions) {
       return;
     }
@@ -300,11 +456,11 @@ function useRowSelection({
   onRowSelection,
   data
 }) {
-  const [internalRowSelection, setInternalRowSelection] = React10.useState({});
-  const [lastSelectedRowIndex, setLastSelectedRowIndex] = React10.useState(null);
+  const [internalRowSelection, setInternalRowSelection] = React12.useState({});
+  const [lastSelectedRowIndex, setLastSelectedRowIndex] = React12.useState(null);
   const isControlled = selectedRows !== void 0;
   const enableRowSelection = selectionMode !== "none";
-  const rowSelectionState = React10.useMemo(() => {
+  const rowSelectionState = React12.useMemo(() => {
     if (!enableRowSelection) return {};
     if (isControlled && selectedRows) {
       return getRowSelectionState(selectedRows);
@@ -315,7 +471,7 @@ function useRowSelection({
   const totalCount = data?.length ?? 0;
   const isAllSelected = totalCount > 0 && selectedCount === totalCount;
   const hasSelection = selectedCount > 0;
-  const onToggleAll = React10.useCallback(() => {
+  const onToggleAll = React12.useCallback(() => {
     if (!enableRowSelection || !data) return;
     const newSelectedRows = isAllSelected ? [] : data.map((item) => item.$primaryKey);
     if (!isControlled) {
@@ -323,7 +479,7 @@ function useRowSelection({
     }
     onRowSelection?.(newSelectedRows);
   }, [enableRowSelection, data, isAllSelected, isControlled, onRowSelection]);
-  const onToggleRow = React10.useCallback((rowId, rowIndex, isShiftClick = false) => {
+  const onToggleRow = React12.useCallback((rowId, rowIndex, isShiftClick = false) => {
     if (!enableRowSelection || !data) return;
     let newSelectedRows = [];
     if (selectionMode === "single") {
@@ -446,14 +602,14 @@ function Checkbox({
   indicatorProps,
   ...rest
 }) {
-  return /* @__PURE__ */ React10__default.default.createElement(checkbox.Checkbox.Root, _extends({
+  return /* @__PURE__ */ React12__default.default.createElement(checkbox.Checkbox.Root, _extends({
     className: classNames7__default.default(Checkbox_default.osdkCheckboxRoot, className),
     indeterminate
-  }, rest), /* @__PURE__ */ React10__default.default.createElement(checkbox.Checkbox.Indicator, _extends({}, indicatorProps, {
+  }, rest), /* @__PURE__ */ React12__default.default.createElement(checkbox.Checkbox.Indicator, _extends({}, indicatorProps, {
     className: classNames7__default.default(Checkbox_default.osdkCheckboxIndicator, indicatorProps?.className)
-  }), indeterminate ? /* @__PURE__ */ React10__default.default.createElement(icons.Minus, {
+  }), indeterminate ? /* @__PURE__ */ React12__default.default.createElement(icons.Minus, {
     color: "currentColor"
-  }) : /* @__PURE__ */ React10__default.default.createElement(icons.Tick, {
+  }) : /* @__PURE__ */ React12__default.default.createElement(icons.Tick, {
     color: "currentColor"
   })));
 }
@@ -464,7 +620,7 @@ function SelectionHeaderCell({
   hasSelection,
   onToggleAll
 }) {
-  return /* @__PURE__ */ React10__default.default.createElement(Checkbox, {
+  return /* @__PURE__ */ React12__default.default.createElement(Checkbox, {
     indeterminate: hasSelection && !isAllSelected,
     checked: isAllSelected,
     onCheckedChange: onToggleAll,
@@ -475,11 +631,11 @@ function SelectionCell({
   row,
   onToggleRow
 }) {
-  const handleClick = React10.useCallback((event) => {
+  const handleClick = React12.useCallback((event) => {
     const isShiftClick = event.shiftKey;
     onToggleRow(row.id, row.index, isShiftClick);
   }, [row, onToggleRow]);
-  return /* @__PURE__ */ React10__default.default.createElement(Checkbox, {
+  return /* @__PURE__ */ React12__default.default.createElement(Checkbox, {
     checked: row.getIsSelected(),
     onClick: handleClick,
     "aria-label": `Select row ${row.index + 1}`
@@ -494,26 +650,26 @@ var useSelectionColumn = ({
   onToggleAll,
   onToggleRow
 }) => {
-  const isAllSelectedRef = React10.useRef(isAllSelected);
+  const isAllSelectedRef = React12.useRef(isAllSelected);
   isAllSelectedRef.current = isAllSelected;
-  const hasSelectionRef = React10.useRef(hasSelection);
+  const hasSelectionRef = React12.useRef(hasSelection);
   hasSelectionRef.current = hasSelection;
-  const onToggleAllRef = React10.useRef(onToggleAll);
+  const onToggleAllRef = React12.useRef(onToggleAll);
   onToggleAllRef.current = onToggleAll;
-  const onToggleRowRef = React10.useRef(onToggleRow);
+  const onToggleRowRef = React12.useRef(onToggleRow);
   onToggleRowRef.current = onToggleRow;
-  const selectionColumn = React10.useMemo(() => {
+  const selectionColumn = React12.useMemo(() => {
     if (selectionMode === "none") return null;
     const colDef = {
       id: SELECTION_COLUMN_ID,
-      header: () => selectionMode === "multiple" ? /* @__PURE__ */ React10__default.default.createElement(SelectionHeaderCell, {
+      header: () => selectionMode === "multiple" ? /* @__PURE__ */ React12__default.default.createElement(SelectionHeaderCell, {
         isAllSelected: isAllSelectedRef.current,
         hasSelection: hasSelectionRef.current,
         onToggleAll: onToggleAllRef.current
       }) : null,
       cell: ({
         row
-      }) => /* @__PURE__ */ React10__default.default.createElement(SelectionCell, {
+      }) => /* @__PURE__ */ React12__default.default.createElement(SelectionCell, {
         row,
         onToggleRow: onToggleRowRef.current
       }),
@@ -533,10 +689,10 @@ var useTableSorting = ({
   defaultOrderBy,
   onOrderByChanged
 }) => {
-  const [internalSorting, setInternalSorting] = React10.useState(() => defaultOrderBy ? convertOrderByToSortingState(defaultOrderBy) : []);
+  const [internalSorting, setInternalSorting] = React12.useState(() => defaultOrderBy ? convertOrderByToSortingState(defaultOrderBy) : []);
   const isControlled = orderBy !== void 0;
-  const sortingState = React10.useMemo(() => orderBy ? convertOrderByToSortingState(orderBy) : internalSorting, [orderBy, internalSorting]);
-  const onSortingChange = React10.useCallback((updater) => {
+  const sortingState = React12.useMemo(() => orderBy ? convertOrderByToSortingState(orderBy) : internalSorting, [orderBy, internalSorting]);
+  const onSortingChange = React12.useCallback((updater) => {
     const newSorting = typeof updater === "function" ? updater(sortingState) : updater;
     if (!isControlled) {
       setInternalSorting(newSorting);
@@ -570,6 +726,29 @@ function convertSortingStateToOrderBy(sorting) {
   }));
 }
 
+// src/base-components/action-button/ActionButton.module.css
+var ActionButton_default = {};
+
+// src/base-components/action-button/ActionButton.tsx
+function _extends2() {
+  return _extends2 = Object.assign ? Object.assign.bind() : function(n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends2.apply(null, arguments);
+}
+function ActionButton({
+  variant = "secondary",
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ React12__default.default.createElement(button.Button, _extends2({
+    className: classNames7__default.default(ActionButton_default.button, variant === "primary" ? ActionButton_default.primaryButton : ActionButton_default.secondaryButton, className)
+  }, rest));
+}
+
 // src/object-table/LoadingCell.module.css
 var LoadingCell_default = {};
 
@@ -580,12 +759,12 @@ var TableCell_default = {};
 function LoadingCell({
   width
 }) {
-  return /* @__PURE__ */ React10__default.default.createElement("td", {
+  return /* @__PURE__ */ React12__default.default.createElement("td", {
     className: TableCell_default.osdkTableCell,
     style: {
       width
     }
-  }, /* @__PURE__ */ React10__default.default.createElement("div", {
+  }, /* @__PURE__ */ React12__default.default.createElement("div", {
     className: classNames7__default.default(LoadingCell_default.osdkLoadingCell, LoadingCell_default.osdkCellSkeleton)
   }));
 }
@@ -601,17 +780,17 @@ function LoadingRow({
   rowHeight = 40,
   columnWidth = 80
 }) {
-  return /* @__PURE__ */ React10__default.default.createElement("tr", {
+  return /* @__PURE__ */ React12__default.default.createElement("tr", {
     className: TableRow_default.osdkTableRow,
     style: {
       height: `${rowHeight}px`,
       transform: `translateY(${translateY}px)`
     }
-  }, /* @__PURE__ */ React10__default.default.createElement(React10__default.default.Fragment, null, Array.from({
+  }, /* @__PURE__ */ React12__default.default.createElement(React12__default.default.Fragment, null, Array.from({
     length: columnCount
   }).map((_, index) => {
     const width = headers.length > index ? headers[index].getSize() : columnWidth;
-    return /* @__PURE__ */ React10__default.default.createElement(LoadingCell, {
+    return /* @__PURE__ */ React12__default.default.createElement(LoadingCell, {
       key: `loading-cell-${index}`,
       width
     });
@@ -621,29 +800,6 @@ function LoadingRow({
 // src/object-table/TableBody.module.css
 var TableBody_default = {};
 
-// src/base-components/action-button/ActionButton.module.css
-var ActionButton_default = {};
-
-// src/base-components/action-button/ActionButton.tsx
-function _extends2() {
-  return _extends2 = Object.assign ? Object.assign.bind() : function(n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends2.apply(null, arguments);
-}
-function ActionButton({
-  variant = "secondary",
-  className,
-  ...rest
-}) {
-  return /* @__PURE__ */ React10__default.default.createElement(button.Button, _extends2({
-    className: classNames7__default.default(ActionButton_default.button, variant === "primary" ? ActionButton_default.primaryButton : ActionButton_default.secondaryButton, className)
-  }, rest));
-}
-
 // src/base-components/dialog/Dialog.module.css
 var Dialog_default = {};
 
@@ -656,25 +812,25 @@ function Dialog({
   footer,
   className
 }) {
-  return /* @__PURE__ */ React10__default.default.createElement(dialog.Dialog.Root, {
+  return /* @__PURE__ */ React12__default.default.createElement(dialog.Dialog.Root, {
     open: isOpen,
     onOpenChange
-  }, /* @__PURE__ */ React10__default.default.createElement(dialog.Dialog.Portal, null, /* @__PURE__ */ React10__default.default.createElement(dialog.Dialog.Backdrop, {
+  }, /* @__PURE__ */ React12__default.default.createElement(dialog.Dialog.Portal, null, /* @__PURE__ */ React12__default.default.createElement(dialog.Dialog.Backdrop, {
     className: Dialog_default.backdrop
-  }), /* @__PURE__ */ React10__default.default.createElement(dialog.Dialog.Popup, {
+  }), /* @__PURE__ */ React12__default.default.createElement(dialog.Dialog.Popup, {
     className: classNames7__default.default(Dialog_default.popup, className)
-  }, /* @__PURE__ */ React10__default.default.createElement("div", {
+  }, /* @__PURE__ */ React12__default.default.createElement("div", {
     className: Dialog_default.header
-  }, /* @__PURE__ */ React10__default.default.createElement(dialog.Dialog.Title, {
+  }, /* @__PURE__ */ React12__default.default.createElement(dialog.Dialog.Title, {
     className: Dialog_default.title
-  }, title), /* @__PURE__ */ React10__default.default.createElement(dialog.Dialog.Close, {
+  }, title), /* @__PURE__ */ React12__default.default.createElement(dialog.Dialog.Close, {
     className: Dialog_default.closeButton,
     "aria-label": "Close dialog"
-  }, /* @__PURE__ */ React10__default.default.createElement(icons.Cross, {
+  }, /* @__PURE__ */ React12__default.default.createElement(icons.Cross, {
     className: Dialog_default.closeIcon
-  }))), /* @__PURE__ */ React10__default.default.createElement("div", {
+  }))), /* @__PURE__ */ React12__default.default.createElement("div", {
     className: Dialog_default.body
-  }, children), footer != null && /* @__PURE__ */ React10__default.default.createElement("div", {
+  }, children), footer != null && /* @__PURE__ */ React12__default.default.createElement("div", {
     className: Dialog_default.footer
   }, footer))));
 }
@@ -712,27 +868,27 @@ function DraggableListItem({
     transform: utilities.CSS.Transform.toString(transform),
     transition
   };
-  const handleRemove = React10.useCallback(() => {
+  const handleRemove = React12.useCallback(() => {
     onRemove?.(item.id);
   }, [item.id, onRemove]);
   const RemoveIcon = removeIconVariant === "trash" ? icons.Trash : icons.SmallCross;
-  return /* @__PURE__ */ React10__default.default.createElement("div", {
+  return /* @__PURE__ */ React12__default.default.createElement("div", {
     ref: setNodeRef,
     style,
     className: DraggableList_default.draggableItem,
     "data-dragging": isDragging
-  }, /* @__PURE__ */ React10__default.default.createElement("div", _extends3({
+  }, /* @__PURE__ */ React12__default.default.createElement("div", _extends3({
     className: DraggableList_default.dragHandle,
     "aria-label": `Reorder ${item.label}`
-  }, attributes, listeners), /* @__PURE__ */ React10__default.default.createElement(icons.DragHandleVertical, {
+  }, attributes, listeners), /* @__PURE__ */ React12__default.default.createElement(icons.DragHandleVertical, {
     className: DraggableList_default.icon
-  })), /* @__PURE__ */ React10__default.default.createElement("div", {
+  })), /* @__PURE__ */ React12__default.default.createElement("div", {
     className: DraggableList_default.itemContent
-  }, renderContent ? renderContent(item) : item.label), onRemove && /* @__PURE__ */ React10__default.default.createElement(button.Button, {
+  }, renderContent ? renderContent(item) : item.label), onRemove && /* @__PURE__ */ React12__default.default.createElement(button.Button, {
     className: DraggableList_default.removeButton,
     onClick: handleRemove,
     "aria-label": `Remove ${item.label}`
-  }, /* @__PURE__ */ React10__default.default.createElement(RemoveIcon, {
+  }, /* @__PURE__ */ React12__default.default.createElement(RemoveIcon, {
     className: DraggableList_default.icon
   })));
 }
@@ -745,7 +901,7 @@ function DraggableList({
   emptyMessage,
   className
 }) {
-  const itemIds = React10.useMemo(() => items.map((item) => item.id), [items]);
+  const itemIds = React12.useMemo(() => items.map((item) => item.id), [items]);
   const sensors = core.useSensors(core.useSensor(core.PointerSensor, {
     activationConstraint: {
       distance: 5
@@ -753,7 +909,7 @@ function DraggableList({
   }), core.useSensor(core.KeyboardSensor, {
     coordinateGetter: sortable.sortableKeyboardCoordinates
   }));
-  const handleDragEnd = React10.useCallback((event) => {
+  const handleDragEnd = React12.useCallback((event) => {
     const {
       active,
       over
@@ -764,31 +920,31 @@ function DraggableList({
       onReorder(oldIndex, newIndex);
     }
   }, [items, onReorder]);
-  const containerRef = React10.useRef(null);
+  const containerRef = React12.useRef(null);
   useKeyboardEvents(containerRef);
   const DndContext = core.DndContext;
-  return /* @__PURE__ */ React10__default.default.createElement("div", {
+  return /* @__PURE__ */ React12__default.default.createElement("div", {
     ref: containerRef,
     className: classNames7__default.default(DraggableList_default.draggableListContainer, className)
-  }, /* @__PURE__ */ React10__default.default.createElement(DndContext, {
+  }, /* @__PURE__ */ React12__default.default.createElement(DndContext, {
     sensors,
     collisionDetection: core.closestCenter,
     onDragEnd: handleDragEnd
-  }, /* @__PURE__ */ React10__default.default.createElement(sortable.SortableContext, {
+  }, /* @__PURE__ */ React12__default.default.createElement(sortable.SortableContext, {
     items: itemIds,
     strategy: sortable.verticalListSortingStrategy
-  }, items.map((item) => /* @__PURE__ */ React10__default.default.createElement(DraggableListItem, {
+  }, items.map((item) => /* @__PURE__ */ React12__default.default.createElement(DraggableListItem, {
     key: item.id,
     item,
     onRemove,
     removeIconVariant,
     renderContent
-  })))), items.length === 0 && emptyMessage && /* @__PURE__ */ React10__default.default.createElement("div", {
+  })))), items.length === 0 && emptyMessage && /* @__PURE__ */ React12__default.default.createElement("div", {
     className: DraggableList_default.emptyState
   }, emptyMessage));
 }
 var useKeyboardEvents = (containerRef) => {
-  React10.useEffect(() => {
+  React12.useEffect(() => {
     const el = containerRef.current;
     if (el == null) {
       return;
@@ -825,11 +981,11 @@ function SearchBar({
   className,
   onKeyDown
 }) {
-  return /* @__PURE__ */ React10__default.default.createElement("div", {
+  return /* @__PURE__ */ React12__default.default.createElement("div", {
     className: classNames7__default.default(SearchBar_default.searchBar, className)
-  }, /* @__PURE__ */ React10__default.default.createElement(icons.Search, {
+  }, /* @__PURE__ */ React12__default.default.createElement(icons.Search, {
     className: SearchBar_default.searchIcon
-  }), /* @__PURE__ */ React10__default.default.createElement(input.Input, {
+  }), /* @__PURE__ */ React12__default.default.createElement(input.Input, {
     type: "text",
     placeholder,
     "aria-label": ariaLabel ?? placeholder,
@@ -853,9 +1009,9 @@ function ColumnConfigDialog({
   onApply,
   isValidConfig
 }) {
-  const [visibleColumns, setVisibleColumns] = React10.useState([]);
-  const [searchQuery, setSearchQuery] = React10.useState("");
-  const allColumns = React10.useMemo(() => {
+  const [visibleColumns, setVisibleColumns] = React12.useState([]);
+  const [searchQuery, setSearchQuery] = React12.useState("");
+  const allColumns = React12.useMemo(() => {
     return columnOptions.map((opt) => {
       const isVisible = currentVisibility ? currentVisibility[opt.id] : false;
       return {
@@ -865,7 +1021,7 @@ function ColumnConfigDialog({
       };
     });
   }, [columnOptions, currentVisibility]);
-  React10.useEffect(() => {
+  React12.useEffect(() => {
     if (isOpen) {
       const visibleCols = allColumns.filter((col) => col.isVisible);
       if (!!currentColumnOrder?.length) {
@@ -881,19 +1037,19 @@ function ColumnConfigDialog({
       setSearchQuery("");
     }
   }, [isOpen, allColumns, currentColumnOrder]);
-  const handleApply = React10.useCallback(() => {
+  const handleApply = React12.useCallback(() => {
     onApply(getColumnConfig(allColumns, visibleColumns));
     onClose();
   }, [allColumns, visibleColumns, onApply, onClose]);
   const isValid = isValidConfig ? isValidConfig(getColumnConfig(allColumns, visibleColumns)) : true;
   const isApplyDisabled = visibleColumns.length === 0 || !isValid;
-  const handleReorderColumns = React10.useCallback((fromIndex, toIndex) => {
+  const handleReorderColumns = React12.useCallback((fromIndex, toIndex) => {
     setVisibleColumns((items) => sortable.arrayMove(items, fromIndex, toIndex));
   }, []);
-  const handleRemoveColumn = React10.useCallback((columnId) => {
+  const handleRemoveColumn = React12.useCallback((columnId) => {
     setVisibleColumns((prev) => prev.filter((col) => col.id !== columnId));
   }, []);
-  const handleToggleColumn = React10.useCallback((column) => {
+  const handleToggleColumn = React12.useCallback((column) => {
     setVisibleColumns((prev) => {
       const isCurrentlyVisible = prev.some((col) => col.id === column.id);
       if (isCurrentlyVisible) {
@@ -903,10 +1059,10 @@ function ColumnConfigDialog({
       }
     });
   }, []);
-  const handleSearchChange = React10.useCallback((event) => {
+  const handleSearchChange = React12.useCallback((event) => {
     setSearchQuery(event.target.value);
   }, []);
-  const handleSelectAll = React10.useCallback((columns) => {
+  const handleSelectAll = React12.useCallback((columns) => {
     setVisibleColumns((prev) => {
       const allSelected = columns.every((col) => prev.some((v) => v.id === col.id));
       if (allSelected) {
@@ -917,33 +1073,33 @@ function ColumnConfigDialog({
       }
     });
   }, []);
-  const filteredAvailableColumns = React10.useMemo(() => {
+  const filteredAvailableColumns = React12.useMemo(() => {
     const query = searchQuery.toLowerCase().trim();
     if (!query) {
       return allColumns;
     }
     return allColumns.filter((col) => (col.label?.toLowerCase().includes(query) ?? false) || col.id.toLowerCase().includes(query));
   }, [allColumns, searchQuery]);
-  const footer = React10.useMemo(() => /* @__PURE__ */ React10__default.default.createElement(React10__default.default.Fragment, null, /* @__PURE__ */ React10__default.default.createElement(ActionButton, {
+  const footer = React12.useMemo(() => /* @__PURE__ */ React12__default.default.createElement(React12__default.default.Fragment, null, /* @__PURE__ */ React12__default.default.createElement(ActionButton, {
     onClick: onClose
-  }, "Cancel"), /* @__PURE__ */ React10__default.default.createElement(ActionButton, {
+  }, "Cancel"), /* @__PURE__ */ React12__default.default.createElement(ActionButton, {
     variant: "primary",
     onClick: handleApply,
     disabled: isApplyDisabled
   }, "Apply")), [onClose, handleApply, isApplyDisabled]);
-  return /* @__PURE__ */ React10__default.default.createElement(Dialog, {
+  return /* @__PURE__ */ React12__default.default.createElement(Dialog, {
     isOpen,
     onOpenChange: onClose,
     title: DialogTitle,
     footer,
     className: ColumnConfigDialog_default.columnConfigDialog
-  }, /* @__PURE__ */ React10__default.default.createElement("div", {
+  }, /* @__PURE__ */ React12__default.default.createElement("div", {
     className: ColumnConfigDialog_default.dialogLayout
-  }, /* @__PURE__ */ React10__default.default.createElement(VisibleColumnsList, {
+  }, /* @__PURE__ */ React12__default.default.createElement(VisibleColumnsList, {
     columns: visibleColumns,
     onReorder: handleReorderColumns,
     onRemove: handleRemoveColumn
-  }), /* @__PURE__ */ React10__default.default.createElement(AvailableColumnsList, {
+  }), /* @__PURE__ */ React12__default.default.createElement(AvailableColumnsList, {
     visibleColumns,
     searchQuery,
     onSearchChange: handleSearchChange,
@@ -952,9 +1108,9 @@ function ColumnConfigDialog({
     filteredColumns: filteredAvailableColumns
   })));
 }
-var DialogTitle = /* @__PURE__ */ React10__default.default.createElement("div", {
+var DialogTitle = /* @__PURE__ */ React12__default.default.createElement("div", {
   className: ColumnConfigDialog_default.title
-}, /* @__PURE__ */ React10__default.default.createElement(icons.Cog, null), "Configure Table Columns");
+}, /* @__PURE__ */ React12__default.default.createElement(icons.Cog, null), "Configure Table Columns");
 var getColumnConfig = (allColumns, visibleColumns) => {
   const hiddenColumns = allColumns.filter((col) => !visibleColumns.some((v) => v.id === col.id));
   return [...visibleColumns.map((col) => ({
@@ -970,17 +1126,17 @@ function VisibleColumnsList({
   onReorder,
   onRemove
 }) {
-  return /* @__PURE__ */ React10__default.default.createElement("div", {
+  return /* @__PURE__ */ React12__default.default.createElement("div", {
     className: ColumnConfigDialog_default.visibleColumnsContainer
-  }, /* @__PURE__ */ React10__default.default.createElement("div", {
+  }, /* @__PURE__ */ React12__default.default.createElement("div", {
     className: ColumnConfigDialog_default.sectionHeader
-  }, /* @__PURE__ */ React10__default.default.createElement("div", {
+  }, /* @__PURE__ */ React12__default.default.createElement("div", {
     className: ColumnConfigDialog_default.sectionTitle
-  }, /* @__PURE__ */ React10__default.default.createElement("span", null, "Visible Columns"), /* @__PURE__ */ React10__default.default.createElement("span", {
+  }, /* @__PURE__ */ React12__default.default.createElement("span", null, "Visible Columns"), /* @__PURE__ */ React12__default.default.createElement("span", {
     className: ColumnConfigDialog_default.countTag
-  }, columns.length)), /* @__PURE__ */ React10__default.default.createElement("div", {
+  }, columns.length)), /* @__PURE__ */ React12__default.default.createElement("div", {
     className: ColumnConfigDialog_default.sectionHint
-  }, "Drag to reorder")), /* @__PURE__ */ React10__default.default.createElement(DraggableList, {
+  }, "Drag to reorder")), /* @__PURE__ */ React12__default.default.createElement(DraggableList, {
     items: columns,
     onReorder,
     onRemove,
@@ -1001,42 +1157,42 @@ function AvailableColumnsList({
   const totalCount = filteredColumns.length;
   const allFilteredSelected = filteredColumns.every((col) => visibleColumns.some((v) => v.id === col.id));
   const someFilteredSelected = filteredColumns.some((col) => visibleColumns.some((v) => v.id === col.id));
-  const handleSelectAllClick = React10.useCallback(() => {
+  const handleSelectAllClick = React12.useCallback(() => {
     onSelectAll(filteredColumns);
   }, [filteredColumns, onSelectAll]);
-  return /* @__PURE__ */ React10__default.default.createElement("div", {
+  return /* @__PURE__ */ React12__default.default.createElement("div", {
     className: ColumnConfigDialog_default.availableColumnsContainer
-  }, /* @__PURE__ */ React10__default.default.createElement("div", {
+  }, /* @__PURE__ */ React12__default.default.createElement("div", {
     className: classNames7__default.default(ColumnConfigDialog_default.sectionHeader, ColumnConfigDialog_default.sectionTitle)
-  }, "Add or Remove Columns"), /* @__PURE__ */ React10__default.default.createElement(SearchBar, {
+  }, "Add or Remove Columns"), /* @__PURE__ */ React12__default.default.createElement(SearchBar, {
     value: searchQuery,
     onChange: onSearchChange,
     placeholder: "Search...",
     "aria-label": "Search available columns",
     className: ColumnConfigDialog_default.searchContainer
-  }), /* @__PURE__ */ React10__default.default.createElement(collapsible.Collapsible.Root, {
+  }), /* @__PURE__ */ React12__default.default.createElement(collapsible.Collapsible.Root, {
     defaultOpen: true,
     className: ColumnConfigDialog_default.propertiesList
-  }, /* @__PURE__ */ React10__default.default.createElement("div", {
+  }, /* @__PURE__ */ React12__default.default.createElement("div", {
     className: ColumnConfigDialog_default.categoryHeader
-  }, /* @__PURE__ */ React10__default.default.createElement(Checkbox, {
+  }, /* @__PURE__ */ React12__default.default.createElement(Checkbox, {
     checked: allFilteredSelected,
     indeterminate: someFilteredSelected && !allFilteredSelected,
     onCheckedChange: handleSelectAllClick,
     className: ColumnConfigDialog_default.checkbox
-  }), /* @__PURE__ */ React10__default.default.createElement(collapsible.Collapsible.Trigger, {
+  }), /* @__PURE__ */ React12__default.default.createElement(collapsible.Collapsible.Trigger, {
     className: ColumnConfigDialog_default.categoryTrigger
-  }, /* @__PURE__ */ React10__default.default.createElement("span", {
+  }, /* @__PURE__ */ React12__default.default.createElement("span", {
     className: ColumnConfigDialog_default.categoryTitle
-  }, "All Columns"), /* @__PURE__ */ React10__default.default.createElement("span", {
+  }, "All Columns"), /* @__PURE__ */ React12__default.default.createElement("span", {
     className: ColumnConfigDialog_default.categoryCount
-  }, selectedCount, "/", totalCount), /* @__PURE__ */ React10__default.default.createElement(icons.CaretDown, {
+  }, selectedCount, "/", totalCount), /* @__PURE__ */ React12__default.default.createElement(icons.CaretDown, {
     className: ColumnConfigDialog_default.caretIcon
-  }))), /* @__PURE__ */ React10__default.default.createElement(collapsible.Collapsible.Panel, {
+  }))), /* @__PURE__ */ React12__default.default.createElement(collapsible.Collapsible.Panel, {
     className: ColumnConfigDialog_default.propertyList
-  }, filteredColumns.length === 0 ? /* @__PURE__ */ React10__default.default.createElement("div", {
+  }, filteredColumns.length === 0 ? /* @__PURE__ */ React12__default.default.createElement("div", {
     className: ColumnConfigDialog_default.emptyState
-  }, "No matching columns found") : filteredColumns.map((column) => /* @__PURE__ */ React10__default.default.createElement(PropertyItem, {
+  }, "No matching columns found") : filteredColumns.map((column) => /* @__PURE__ */ React12__default.default.createElement(PropertyItem, {
     key: column.id,
     column,
     isSelected: visibleColumns.some((v) => v.id === column.id),
@@ -1049,19 +1205,19 @@ function PropertyItem({
   onToggle,
   showInfoIcon = false
 }) {
-  const handleClick = React10.useCallback(() => {
+  const handleClick = React12.useCallback(() => {
     onToggle(column);
   }, [onToggle, column]);
-  return /* @__PURE__ */ React10__default.default.createElement("div", {
+  return /* @__PURE__ */ React12__default.default.createElement("div", {
     className: ColumnConfigDialog_default.propertyItem
-  }, /* @__PURE__ */ React10__default.default.createElement(Checkbox, {
+  }, /* @__PURE__ */ React12__default.default.createElement(Checkbox, {
     checked: isSelected,
     onCheckedChange: handleClick,
     className: ColumnConfigDialog_default.checkbox
-  }), /* @__PURE__ */ React10__default.default.createElement(button.Button, {
+  }), /* @__PURE__ */ React12__default.default.createElement(button.Button, {
     onClick: handleClick,
     className: ColumnConfigDialog_default.propertyName
-  }, column.label), showInfoIcon && /* @__PURE__ */ React10__default.default.createElement(icons.SmallInfoSign, {
+  }, column.label), showInfoIcon && /* @__PURE__ */ React12__default.default.createElement(icons.SmallInfoSign, {
     className: ColumnConfigDialog_default.infoIcon
   }));
 }
@@ -1074,8 +1230,8 @@ function SortableItemsList({
   onRemove,
   className
 }) {
-  const renderContent = React10.useCallback((item) => item.content, []);
-  return /* @__PURE__ */ React10__default.default.createElement(DraggableList, {
+  const renderContent = React12.useCallback((item) => item.content, []);
+  return /* @__PURE__ */ React12__default.default.createElement(DraggableList, {
     items,
     onReorder,
     onRemove,
@@ -1093,9 +1249,9 @@ function MultiColumnSortDialog({
   currentSorting,
   columnOptions
 }) {
-  const [selectedSortColumns, setSelectedSortColumns] = React10.useState([]);
-  const [menuSearchQuery, setMenuSearchQuery] = React10.useState("");
-  React10.useEffect(() => {
+  const [selectedSortColumns, setSelectedSortColumns] = React12.useState([]);
+  const [menuSearchQuery, setMenuSearchQuery] = React12.useState("");
+  React12.useEffect(() => {
     if (isOpen) {
       const selectedColumns = [];
       for (const sort of currentSorting) {
@@ -1110,25 +1266,25 @@ function MultiColumnSortDialog({
       setSelectedSortColumns(selectedColumns);
     }
   }, [isOpen, currentSorting, columnOptions]);
-  const handleAddColumn = React10.useCallback((column) => {
+  const handleAddColumn = React12.useCallback((column) => {
     setSelectedSortColumns((prev) => [...prev, {
       ...column,
       direction: "asc"
     }]);
   }, []);
-  const handleRemoveSortColumn = React10.useCallback((id) => {
+  const handleRemoveSortColumn = React12.useCallback((id) => {
     setSelectedSortColumns((prev) => prev.filter((item) => item.id !== id));
   }, []);
-  const handleReorderSortColumns = React10.useCallback((fromIndex, toIndex) => {
+  const handleReorderSortColumns = React12.useCallback((fromIndex, toIndex) => {
     setSelectedSortColumns((items) => sortable.arrayMove(items, fromIndex, toIndex));
   }, []);
-  const handleToggleSortDirection = React10.useCallback((id) => {
+  const handleToggleSortDirection = React12.useCallback((id) => {
     setSelectedSortColumns((prev) => prev.map((item) => item.id === id ? {
       ...item,
       direction: item.direction === "asc" ? "desc" : "asc"
     } : item));
   }, []);
-  const handleApply = React10.useCallback(() => {
+  const handleApply = React12.useCallback(() => {
     const sortingState = selectedSortColumns.map((col) => ({
       id: col.id,
       desc: col.direction === "desc"
@@ -1136,100 +1292,100 @@ function MultiColumnSortDialog({
     onApply(sortingState);
     onClose();
   }, [selectedSortColumns, onApply, onClose]);
-  const availableColumns = React10.useMemo(() => columnOptions.filter((col) => col.canSort && !selectedSortColumns.some((selected) => selected.id === col.id)), [columnOptions, selectedSortColumns]);
-  const filteredAvailableColumns = React10.useMemo(() => {
+  const availableColumns = React12.useMemo(() => columnOptions.filter((col) => col.canSort && !selectedSortColumns.some((selected) => selected.id === col.id)), [columnOptions, selectedSortColumns]);
+  const filteredAvailableColumns = React12.useMemo(() => {
     const query = menuSearchQuery.toLowerCase().trim();
     if (!query) {
       return availableColumns;
     }
     return availableColumns.filter((col) => col.name.toLowerCase().includes(query));
   }, [availableColumns, menuSearchQuery]);
-  const handleMenuSearchChange = React10.useCallback((event) => {
+  const handleMenuSearchChange = React12.useCallback((event) => {
     setMenuSearchQuery(event.target.value);
   }, []);
-  const handleMenuOpenChange = React10.useCallback((open) => {
+  const handleMenuOpenChange = React12.useCallback((open) => {
     if (open) {
       setMenuSearchQuery("");
     }
   }, []);
-  const sortableItems = React10.useMemo(() => {
+  const sortableItems = React12.useMemo(() => {
     return selectedSortColumns.map((item) => ({
       id: item.id,
       label: item.name,
-      content: /* @__PURE__ */ React10__default.default.createElement("div", {
+      content: /* @__PURE__ */ React12__default.default.createElement("div", {
         className: MultiColumnSortDialog_default.sortColumnItem
-      }, /* @__PURE__ */ React10__default.default.createElement("span", {
+      }, /* @__PURE__ */ React12__default.default.createElement("span", {
         className: classNames7__default.default(MultiColumnSortDialog_default.sortColumnName, MultiColumnSortDialog_default.truncate)
-      }, item.name), /* @__PURE__ */ React10__default.default.createElement(button.Button, {
+      }, item.name), /* @__PURE__ */ React12__default.default.createElement(button.Button, {
         className: MultiColumnSortDialog_default.sortDirectionButton,
         onClick: () => handleToggleSortDirection(item.id),
         "aria-label": `Toggle sort direction for ${item.name}`
-      }, item.direction === "asc" ? /* @__PURE__ */ React10__default.default.createElement(icons.SortAlphabetical, {
+      }, item.direction === "asc" ? /* @__PURE__ */ React12__default.default.createElement(icons.SortAlphabetical, {
         className: MultiColumnSortDialog_default.sortIcon
-      }) : /* @__PURE__ */ React10__default.default.createElement(icons.SortAlphabeticalDesc, {
+      }) : /* @__PURE__ */ React12__default.default.createElement(icons.SortAlphabeticalDesc, {
         className: MultiColumnSortDialog_default.sortIcon
       })))
     }));
   }, [selectedSortColumns, handleToggleSortDirection]);
-  const footer = React10.useMemo(() => /* @__PURE__ */ React10__default.default.createElement(React10__default.default.Fragment, null, /* @__PURE__ */ React10__default.default.createElement(ActionButton, {
+  const footer = React12.useMemo(() => /* @__PURE__ */ React12__default.default.createElement(React12__default.default.Fragment, null, /* @__PURE__ */ React12__default.default.createElement(ActionButton, {
     onClick: onClose
-  }, "Cancel"), /* @__PURE__ */ React10__default.default.createElement(ActionButton, {
+  }, "Cancel"), /* @__PURE__ */ React12__default.default.createElement(ActionButton, {
     variant: "primary",
     onClick: handleApply
   }, "Apply")), [handleApply, onClose]);
-  return /* @__PURE__ */ React10__default.default.createElement(Dialog, {
+  return /* @__PURE__ */ React12__default.default.createElement(Dialog, {
     isOpen,
     onOpenChange: onClose,
     title: DialogTitle2,
     footer
-  }, /* @__PURE__ */ React10__default.default.createElement("div", {
+  }, /* @__PURE__ */ React12__default.default.createElement("div", {
     className: MultiColumnSortDialog_default.sortColumnsList
-  }, /* @__PURE__ */ React10__default.default.createElement(SortableItemsList, {
+  }, /* @__PURE__ */ React12__default.default.createElement(SortableItemsList, {
     items: sortableItems,
     onReorder: handleReorderSortColumns,
     onRemove: handleRemoveSortColumn,
     className: MultiColumnSortDialog_default.sortableList
-  }), /* @__PURE__ */ React10__default.default.createElement(menu.Menu.Root, {
+  }), /* @__PURE__ */ React12__default.default.createElement(menu.Menu.Root, {
     onOpenChange: handleMenuOpenChange
-  }, /* @__PURE__ */ React10__default.default.createElement(menu.Menu.Trigger, {
+  }, /* @__PURE__ */ React12__default.default.createElement(menu.Menu.Trigger, {
     className: MultiColumnSortDialog_default.addColumnButton,
     disabled: availableColumns.length === 0,
     "aria-label": "Add column to sort"
-  }, /* @__PURE__ */ React10__default.default.createElement(icons.Add, {
+  }, /* @__PURE__ */ React12__default.default.createElement(icons.Add, {
     className: MultiColumnSortDialog_default.addIcon
-  }), /* @__PURE__ */ React10__default.default.createElement("span", {
+  }), /* @__PURE__ */ React12__default.default.createElement("span", {
     className: MultiColumnSortDialog_default.addColumnText
-  }, "Add Column to Sort"), /* @__PURE__ */ React10__default.default.createElement(icons.CaretDown, {
+  }, "Add Column to Sort"), /* @__PURE__ */ React12__default.default.createElement(icons.CaretDown, {
     color: "currentColor"
-  })), /* @__PURE__ */ React10__default.default.createElement(menu.Menu.Portal, null, /* @__PURE__ */ React10__default.default.createElement(menu.Menu.Positioner, {
+  })), /* @__PURE__ */ React12__default.default.createElement(menu.Menu.Portal, null, /* @__PURE__ */ React12__default.default.createElement(menu.Menu.Positioner, {
     className: MultiColumnSortDialog_default.menuPositioner,
     sideOffset: 4
-  }, /* @__PURE__ */ React10__default.default.createElement(menu.Menu.Popup, {
+  }, /* @__PURE__ */ React12__default.default.createElement(menu.Menu.Popup, {
     className: MultiColumnSortDialog_default.dropdownMenu
-  }, /* @__PURE__ */ React10__default.default.createElement(SearchBar, {
+  }, /* @__PURE__ */ React12__default.default.createElement(SearchBar, {
     value: menuSearchQuery,
     onChange: handleMenuSearchChange,
     placeholder: "Search columns",
     "aria-label": "Search columns to sort",
     className: MultiColumnSortDialog_default.menuSearchContainer,
     onKeyDown: (e) => e.stopPropagation()
-  }), filteredAvailableColumns.map((column) => /* @__PURE__ */ React10__default.default.createElement(AvailableColumnMenuItem, {
+  }), filteredAvailableColumns.map((column) => /* @__PURE__ */ React12__default.default.createElement(AvailableColumnMenuItem, {
     key: column.id,
     column,
     onAddColumn: handleAddColumn
-  })), filteredAvailableColumns.length === 0 && /* @__PURE__ */ React10__default.default.createElement("div", {
+  })), filteredAvailableColumns.length === 0 && /* @__PURE__ */ React12__default.default.createElement("div", {
     className: MultiColumnSortDialog_default.menuEmptyState
   }, "No matching columns")))))));
 }
-var DialogTitle2 = /* @__PURE__ */ React10__default.default.createElement("div", {
+var DialogTitle2 = /* @__PURE__ */ React12__default.default.createElement("div", {
   className: MultiColumnSortDialog_default.title
-}, /* @__PURE__ */ React10__default.default.createElement(icons.Cog, null), "Sort on Multiple Columns");
+}, /* @__PURE__ */ React12__default.default.createElement(icons.Cog, null), "Sort on Multiple Columns");
 function AvailableColumnMenuItem({
   column,
   onAddColumn
 }) {
-  const onClick = React10.useCallback(() => onAddColumn(column), [onAddColumn, column]);
-  return /* @__PURE__ */ React10__default.default.createElement(menu.Menu.Item, {
+  const onClick = React12.useCallback(() => onAddColumn(column), [onAddColumn, column]);
+  return /* @__PURE__ */ React12__default.default.createElement(menu.Menu.Item, {
     className: classNames7__default.default(MultiColumnSortDialog_default.dropdownItem, MultiColumnSortDialog_default.truncate),
     onClick
   }, column.name);
@@ -1245,7 +1401,7 @@ var TableHeaderContent_default = {};
 function TableHeaderContent({
   header
 }) {
-  return /* @__PURE__ */ React10__default.default.createElement("div", {
+  return /* @__PURE__ */ React12__default.default.createElement("div", {
     className: TableHeaderContent_default.osdkHeaderContent
   }, reactTable.flexRender(header.column.columnDef.header, header.getContext()));
 }
@@ -1260,14 +1416,14 @@ function HeaderMenuItem({
   label,
   active = false
 }) {
-  return /* @__PURE__ */ React10__default.default.createElement(menu.Menu.Item, {
+  return /* @__PURE__ */ React12__default.default.createElement(menu.Menu.Item, {
     closeOnClick: true,
     className: classNames7__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderMenuItem, active && TableHeaderWithPopover_default.osdkHeaderActiveMenuItem),
     onClick
-  }, /* @__PURE__ */ React10__default.default.createElement(Icon, {
+  }, /* @__PURE__ */ React12__default.default.createElement(Icon, {
     className: TableHeaderWithPopover_default.osdkHeaderIcon,
     color: "currentColor"
-  }), /* @__PURE__ */ React10__default.default.createElement("span", null, label));
+  }), /* @__PURE__ */ React12__default.default.createElement("span", null, label));
 }
 function TableHeaderWithPopover({
   header,
@@ -1290,8 +1446,8 @@ function TableHeaderWithPopover({
     setSorting
   } = table;
   const currentSorting = table.getState().sorting;
-  const [isOpen, setIsOpen] = React10.useState(false);
-  const handlePinLeft = React10.useCallback(() => {
+  const [isOpen, setIsOpen] = React12.useState(false);
+  const handlePinLeft = React12.useCallback(() => {
     setColumnPinning((prev) => {
       return {
         left: [...prev.left || [], header.column.id],
@@ -1299,7 +1455,7 @@ function TableHeaderWithPopover({
       };
     });
   }, [header.column.id, setColumnPinning]);
-  const handleUnpin = React10.useCallback(() => {
+  const handleUnpin = React12.useCallback(() => {
     setColumnPinning((prev) => {
       return {
         left: prev.left?.filter((id) => id !== header.column.id) || [],
@@ -1307,39 +1463,39 @@ function TableHeaderWithPopover({
       };
     });
   }, [header.column.id, setColumnPinning]);
-  const handleSortAscending = React10.useCallback(() => {
+  const handleSortAscending = React12.useCallback(() => {
     header.column.toggleSorting(false);
     setSorting?.([{
       id: header.column.id,
       desc: false
     }]);
   }, [header.column, setSorting]);
-  const handleSortDescending = React10.useCallback(() => {
+  const handleSortDescending = React12.useCallback(() => {
     header.column.toggleSorting(true);
     setSorting?.([{
       id: header.column.id,
       desc: true
     }]);
   }, [header.column, setSorting]);
-  const handleClearAllSorts = React10.useCallback(() => {
+  const handleClearAllSorts = React12.useCallback(() => {
     header.column.clearSorting();
     setSorting?.([]);
   }, [header.column, setSorting]);
-  const handleResetSize = React10.useCallback(() => {
+  const handleResetSize = React12.useCallback(() => {
     header.column.resetSize();
     if (onResetSize) {
       onResetSize();
     }
   }, [header.column, onResetSize]);
-  const handleInteraction = React10.useCallback((e) => {
+  const handleInteraction = React12.useCallback((e) => {
     e.preventDefault();
     setIsOpen((prev) => !prev);
   }, []);
-  const handleOpenColumnConfig = React10.useCallback(() => {
+  const handleOpenColumnConfig = React12.useCallback(() => {
     onOpenColumnConfig?.();
     setIsOpen(false);
   }, [onOpenColumnConfig]);
-  const handleOpenMultiSort = React10.useCallback(() => {
+  const handleOpenMultiSort = React12.useCallback(() => {
     onOpenMultiSort?.();
     setIsOpen(false);
   }, [onOpenMultiSort]);
@@ -1347,72 +1503,72 @@ function TableHeaderWithPopover({
   const isSortable = header.column.getCanSort();
   const sortIndex = currentSorting?.findIndex((s) => s.id === header.column.id) ?? -1;
   const hasAnyMenuItems = showPinningItems || showSortingItems && isSortable || showResizeItem || showConfigItem;
-  return /* @__PURE__ */ React10__default.default.createElement(React10__default.default.Fragment, null, /* @__PURE__ */ React10__default.default.createElement(menu.Menu.Root, {
+  return /* @__PURE__ */ React12__default.default.createElement(React12__default.default.Fragment, null, /* @__PURE__ */ React12__default.default.createElement(menu.Menu.Root, {
     open: isOpen,
     onOpenChange: setIsOpen
-  }, /* @__PURE__ */ React10__default.default.createElement("div", {
+  }, /* @__PURE__ */ React12__default.default.createElement("div", {
     className: classNames7__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderContainer),
     onContextMenu: handleInteraction
-  }, /* @__PURE__ */ React10__default.default.createElement("div", {
+  }, /* @__PURE__ */ React12__default.default.createElement("div", {
     className: classNames7__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderContentLeft)
-  }, isColumnPinned && /* @__PURE__ */ React10__default.default.createElement(icons.Pin, {
+  }, isColumnPinned && /* @__PURE__ */ React12__default.default.createElement(icons.Pin, {
     className: TableHeaderWithPopover_default.osdkHeaderIcon,
     color: "currentColor"
-  }), /* @__PURE__ */ React10__default.default.createElement(TableHeaderContent, {
+  }), /* @__PURE__ */ React12__default.default.createElement(TableHeaderContent, {
     header
-  })), /* @__PURE__ */ React10__default.default.createElement("div", {
+  })), /* @__PURE__ */ React12__default.default.createElement("div", {
     className: classNames7__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderContentRight)
-  }, isSorted && /* @__PURE__ */ React10__default.default.createElement("div", {
+  }, isSorted && /* @__PURE__ */ React12__default.default.createElement("div", {
     className: TableHeaderWithPopover_default.osdkCenterContainer
-  }, isSorted === "asc" ? /* @__PURE__ */ React10__default.default.createElement(icons.SortAlphabetical, {
+  }, isSorted === "asc" ? /* @__PURE__ */ React12__default.default.createElement(icons.SortAlphabetical, {
     className: TableHeaderWithPopover_default.osdkHeaderIcon
-  }) : /* @__PURE__ */ React10__default.default.createElement(icons.SortAlphabeticalDesc, {
+  }) : /* @__PURE__ */ React12__default.default.createElement(icons.SortAlphabeticalDesc, {
     className: TableHeaderWithPopover_default.osdkHeaderIcon
-  }), currentSorting.length > 1 && sortIndex >= 0 && /* @__PURE__ */ React10__default.default.createElement("span", {
+  }), currentSorting.length > 1 && sortIndex >= 0 && /* @__PURE__ */ React12__default.default.createElement("span", {
     className: TableHeaderWithPopover_default.sortIndex
-  }, sortIndex + 1)), hasAnyMenuItems && /* @__PURE__ */ React10__default.default.createElement(menu.Menu.Trigger, {
+  }, sortIndex + 1)), hasAnyMenuItems && /* @__PURE__ */ React12__default.default.createElement(menu.Menu.Trigger, {
     "aria-label": `Open header menu for column with id=${header.column.id}`,
     className: classNames7__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkHeaderPopoverTrigger)
-  }, /* @__PURE__ */ React10__default.default.createElement(icons.ChevronDown, {
+  }, /* @__PURE__ */ React12__default.default.createElement(icons.ChevronDown, {
     className: TableHeaderWithPopover_default.osdkHeaderIcon
-  }))), /* @__PURE__ */ React10__default.default.createElement(menu.Menu.Portal, {
+  }))), /* @__PURE__ */ React12__default.default.createElement(menu.Menu.Portal, {
     container: document.body
-  }, /* @__PURE__ */ React10__default.default.createElement(menu.Menu.Positioner, {
+  }, /* @__PURE__ */ React12__default.default.createElement(menu.Menu.Positioner, {
     sideOffset: 4
-  }, /* @__PURE__ */ React10__default.default.createElement(menu.Menu.Popup, {
+  }, /* @__PURE__ */ React12__default.default.createElement(menu.Menu.Popup, {
     className: TableHeaderWithPopover_default.osdkHeaderPopup
-  }, showPinningItems && !isColumnPinned && /* @__PURE__ */ React10__default.default.createElement(HeaderMenuItem, {
+  }, showPinningItems && !isColumnPinned && /* @__PURE__ */ React12__default.default.createElement(HeaderMenuItem, {
     onClick: handlePinLeft,
     icon: icons.Pin,
     label: "Pin column"
-  }), showPinningItems && isColumnPinned && /* @__PURE__ */ React10__default.default.createElement(HeaderMenuItem, {
+  }), showPinningItems && isColumnPinned && /* @__PURE__ */ React12__default.default.createElement(HeaderMenuItem, {
     onClick: handleUnpin,
     icon: icons.Unpin,
     label: "Unpin Column",
     active: true
-  }), showSortingItems && isSortable && /* @__PURE__ */ React10__default.default.createElement(React10__default.default.Fragment, null, /* @__PURE__ */ React10__default.default.createElement(HeaderMenuItem, {
+  }), showSortingItems && isSortable && /* @__PURE__ */ React12__default.default.createElement(React12__default.default.Fragment, null, /* @__PURE__ */ React12__default.default.createElement(HeaderMenuItem, {
     onClick: handleSortAscending,
     icon: icons.SortAlphabetical,
     label: "Sort ascending",
     active: isSorted === "asc"
-  }), /* @__PURE__ */ React10__default.default.createElement(HeaderMenuItem, {
+  }), /* @__PURE__ */ React12__default.default.createElement(HeaderMenuItem, {
     onClick: handleSortDescending,
     icon: icons.SortAlphabeticalDesc,
     label: "Sort descending",
     active: isSorted === "desc"
-  }), columnOptions?.some((col) => col.canSort) && /* @__PURE__ */ React10__default.default.createElement(HeaderMenuItem, {
+  }), columnOptions?.some((col) => col.canSort) && /* @__PURE__ */ React12__default.default.createElement(HeaderMenuItem, {
     onClick: handleOpenMultiSort,
     icon: icons.Sort,
     label: "Sort on multiple columns"
-  })), showSortingItems && !!currentSorting?.length && /* @__PURE__ */ React10__default.default.createElement(HeaderMenuItem, {
+  })), showSortingItems && !!currentSorting?.length && /* @__PURE__ */ React12__default.default.createElement(HeaderMenuItem, {
     onClick: handleClearAllSorts,
     icon: icons.Remove,
     label: "Clear all sorts"
-  }), showResizeItem && /* @__PURE__ */ React10__default.default.createElement(HeaderMenuItem, {
+  }), showResizeItem && /* @__PURE__ */ React12__default.default.createElement(HeaderMenuItem, {
     onClick: handleResetSize,
     icon: icons.VerticalDistribution,
     label: "Reset Column Size"
-  }), showConfigItem && /* @__PURE__ */ React10__default.default.createElement(HeaderMenuItem, {
+  }), showConfigItem && /* @__PURE__ */ React12__default.default.createElement(HeaderMenuItem, {
     onClick: handleOpenColumnConfig,
     icon: icons.Settings,
     label: "Configure Columns"
@@ -1466,25 +1622,25 @@ function TableHeader({
   const currentVisibility = table.getState().columnVisibility;
   const currentColumnOrder = table.getState().columnOrder;
   const isResizing = !!table.getState().columnSizingInfo?.isResizingColumn;
-  const [configDialogOpen, setConfigDialogOpen] = React10.useState(false);
-  const [multiSortDialogOpen, setMultiSortDialogOpen] = React10.useState(false);
-  const handleOpenColumnConfig = React10.useCallback(() => {
+  const [configDialogOpen, setConfigDialogOpen] = React12.useState(false);
+  const [multiSortDialogOpen, setMultiSortDialogOpen] = React12.useState(false);
+  const handleOpenColumnConfig = React12.useCallback(() => {
     setConfigDialogOpen(true);
   }, []);
-  const handleCloseColumnConfig = React10.useCallback(() => {
+  const handleCloseColumnConfig = React12.useCallback(() => {
     setConfigDialogOpen(false);
   }, []);
-  const handleOpenMultiSort = React10.useCallback(() => {
+  const handleOpenMultiSort = React12.useCallback(() => {
     setMultiSortDialogOpen(true);
   }, []);
-  const handleCloseMultiSort = React10.useCallback(() => {
+  const handleCloseMultiSort = React12.useCallback(() => {
     setMultiSortDialogOpen(false);
   }, []);
-  const handleApplyMultiSort = React10.useCallback((sortColumns) => {
+  const handleApplyMultiSort = React12.useCallback((sortColumns) => {
     setMultiSortDialogOpen(false);
     setSorting?.(sortColumns);
   }, [setSorting]);
-  const handleApplyColumnConfig = React10.useCallback((updates) => {
+  const handleApplyColumnConfig = React12.useCallback((updates) => {
     const newVisibilityState = {};
     for (const update of updates) {
       newVisibilityState[update.columnId] = update.isVisible;
@@ -1492,7 +1648,7 @@ function TableHeader({
     setColumnOrder(updates.map((col) => col.columnId));
     setColumnVisibility(newVisibilityState);
   }, [setColumnOrder, setColumnVisibility]);
-  const columnOptions = React10.useMemo(() => {
+  const columnOptions = React12.useMemo(() => {
     const allHeaders = table.getHeaderGroups().flatMap((headerGroup) => headerGroup.headers);
     return table.getAllColumns().filter((column) => column.id !== SELECTION_COLUMN_ID).map((column) => {
       return {
@@ -1502,10 +1658,10 @@ function TableHeader({
       };
     });
   }, [table]);
-  return /* @__PURE__ */ React10__default.default.createElement(React10__default.default.Fragment, null, /* @__PURE__ */ React10__default.default.createElement("thead", {
+  return /* @__PURE__ */ React12__default.default.createElement(React12__default.default.Fragment, null, /* @__PURE__ */ React12__default.default.createElement("thead", {
     className: TableHeader_default.osdkTableHeader,
     "data-resizing": isResizing
-  }, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React10__default.default.createElement("tr", {
+  }, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React12__default.default.createElement("tr", {
     key: headerGroup.id,
     className: TableHeader_default.osdkTableHeaderRow
   }, headerGroup.headers.map((header) => {
@@ -1514,14 +1670,14 @@ function TableHeader({
     } = getColumnPinningStyles(header.column);
     const isColumnPinned = header.column.getIsPinned();
     const isSelectColumn = header.id === SELECTION_COLUMN_ID;
-    return /* @__PURE__ */ React10__default.default.createElement("th", {
+    return /* @__PURE__ */ React12__default.default.createElement("th", {
       key: header.id,
       "data-pinned": header.column.getIsPinned(),
       className: TableHeader_default.osdkTableHeaderCell,
       style: columnStyles
-    }, header.isPlaceholder ? null : isSelectColumn ? /* @__PURE__ */ React10__default.default.createElement(TableHeaderContent, {
+    }, header.isPlaceholder ? null : isSelectColumn ? /* @__PURE__ */ React12__default.default.createElement(TableHeaderContent, {
       header
-    }) : /* @__PURE__ */ React10__default.default.createElement(TableHeaderWithPopover, {
+    }) : /* @__PURE__ */ React12__default.default.createElement(TableHeaderWithPopover, {
       table,
       header,
       isColumnPinned,
@@ -1529,20 +1685,20 @@ function TableHeader({
       featureFlags: headerMenuFeatureFlags,
       onOpenColumnConfig: handleOpenColumnConfig,
       onOpenMultiSort: handleOpenMultiSort
-    }), header.column.getCanResize() && headerMenuFeatureFlags?.showResizeItem !== false && /* @__PURE__ */ React10__default.default.createElement("div", {
+    }), header.column.getCanResize() && headerMenuFeatureFlags?.showResizeItem !== false && /* @__PURE__ */ React12__default.default.createElement("div", {
       className: TableHeader_default.osdkTableHeaderResizer,
       onDoubleClick: () => header.column.resetSize(),
       onMouseDown: header.getResizeHandler(),
       onTouchStart: header.getResizeHandler()
     }));
-  })))), !!columnOptions?.length && /* @__PURE__ */ React10__default.default.createElement(ColumnConfigDialog, {
+  })))), !!columnOptions?.length && /* @__PURE__ */ React12__default.default.createElement(ColumnConfigDialog, {
     isOpen: configDialogOpen,
     onClose: handleCloseColumnConfig,
     columnOptions,
     currentVisibility,
     currentColumnOrder,
     onApply: handleApplyColumnConfig
-  }), columnOptions?.some((col) => col.canSort) && /* @__PURE__ */ React10__default.default.createElement(MultiColumnSortDialog, {
+  }), columnOptions?.some((col) => col.canSort) && /* @__PURE__ */ React12__default.default.createElement(MultiColumnSortDialog, {
     isOpen: multiSortDialogOpen,
     onClose: handleCloseMultiSort,
     columnOptions,
@@ -1562,13 +1718,13 @@ function LoadingStateTable({
 }) {
   const enableRowSelection = table.options.enableRowSelection;
   const minHeaderCount = enableRowSelection ? 1 : 0;
-  const headers = React10.useMemo(() => headerGroups.length > 0 ? headerGroups[0].headers : [], [headerGroups]);
+  const headers = React12.useMemo(() => headerGroups.length > 0 ? headerGroups[0].headers : [], [headerGroups]);
   const hasHeadersLoaded = headers.length > minHeaderCount;
-  const headerRef = React10.useRef(null);
-  const bodyRef = React10.useRef(null);
-  const [loadingRowCount, setLoadingRowCount] = React10.useState(MIN_ROWS);
-  const [loadingColumnCount, setLoadingColumnCount] = React10.useState(headers.length);
-  React10.useEffect(() => {
+  const headerRef = React12.useRef(null);
+  const bodyRef = React12.useRef(null);
+  const [loadingRowCount, setLoadingRowCount] = React12.useState(MIN_ROWS);
+  const [loadingColumnCount, setLoadingColumnCount] = React12.useState(headers.length);
+  React12.useEffect(() => {
     if (hasHeadersLoaded) {
       setLoadingColumnCount(headers.length);
     } else {
@@ -1581,7 +1737,7 @@ function LoadingStateTable({
       }
     }
   }, [columnWidth, hasHeadersLoaded, headers, tableContainerRef]);
-  React10.useEffect(() => {
+  React12.useEffect(() => {
     if (tableContainerRef.current) {
       const containerHeight = tableContainerRef.current.clientHeight;
       const availableHeight = containerHeight - rowHeight;
@@ -1591,32 +1747,32 @@ function LoadingStateTable({
       }
     }
   }, [tableContainerRef, rowHeight]);
-  return /* @__PURE__ */ React10__default.default.createElement(React10__default.default.Fragment, null, hasHeadersLoaded ? /* @__PURE__ */ React10__default.default.createElement(TableHeader, {
+  return /* @__PURE__ */ React12__default.default.createElement(React12__default.default.Fragment, null, hasHeadersLoaded ? /* @__PURE__ */ React12__default.default.createElement(TableHeader, {
     table
-  }) : /* @__PURE__ */ React10__default.default.createElement("thead", {
+  }) : /* @__PURE__ */ React12__default.default.createElement("thead", {
     className: TableHeader_default.osdkTableHeader,
     ref: headerRef
-  }, /* @__PURE__ */ React10__default.default.createElement("tr", {
+  }, /* @__PURE__ */ React12__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__ */ React10__default.default.createElement("th", {
+    return /* @__PURE__ */ React12__default.default.createElement("th", {
       key: `loading-header-${index}`,
       className: TableHeader_default.osdkTableHeaderCell,
       style: {
         width
       }
-    }, /* @__PURE__ */ React10__default.default.createElement("div", {
+    }, /* @__PURE__ */ React12__default.default.createElement("div", {
       className: classNames7__default.default(TableHeader_default.osdkLoadingHeaderCell, LoadingCell_default.osdkCellSkeleton)
     }));
-  }))), /* @__PURE__ */ React10__default.default.createElement("tbody", {
+  }))), /* @__PURE__ */ React12__default.default.createElement("tbody", {
     className: TableBody_default.osdkTableBody,
     ref: bodyRef
   }, Array.from({
     length: loadingRowCount
-  }).map((_, index) => /* @__PURE__ */ React10__default.default.createElement(LoadingRow, {
+  }).map((_, index) => /* @__PURE__ */ React12__default.default.createElement(LoadingRow, {
     key: `skeleton-${index}`,
     columnCount: loadingColumnCount,
     headers,
@@ -1633,9 +1789,9 @@ var NonIdealState_default = {};
 function NonIdealState({
   message
 }) {
-  return /* @__PURE__ */ React10__default.default.createElement("div", {
+  return /* @__PURE__ */ React12__default.default.createElement("div", {
     className: NonIdealState_default.container
-  }, /* @__PURE__ */ React10__default.default.createElement("div", {
+  }, /* @__PURE__ */ React12__default.default.createElement("div", {
     className: NonIdealState_default.message
   }, message));
 }
@@ -1653,8 +1809,8 @@ function CellContextMenu({
   onClose,
   renderContent
 }) {
-  const ref = React10.useRef(null);
-  React10.useEffect(() => {
+  const ref = React12.useRef(null);
+  React12.useEffect(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
         onClose();
@@ -1665,7 +1821,7 @@ function CellContextMenu({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [onClose]);
-  return /* @__PURE__ */ reactDom.createPortal(/* @__PURE__ */ React10__default.default.createElement("div", {
+  return /* @__PURE__ */ reactDom.createPortal(/* @__PURE__ */ React12__default.default.createElement("div", {
     ref,
     className: CellContextMenu_default.osdkCellContextMenu,
     style: {
@@ -1678,9 +1834,9 @@ function CellContextMenu({
 var useCellContextMenu = ({
   tdRef
 }) => {
-  const [popoverPosition, setPopoverPosition] = React10.useState(null);
-  const [isContextMenuOpen, setIsContextMenuOpen] = React10.useState(false);
-  const handleOpenContextMenu = React10.useCallback((event) => {
+  const [popoverPosition, setPopoverPosition] = React12.useState(null);
+  const [isContextMenuOpen, setIsContextMenuOpen] = React12.useState(false);
+  const handleOpenContextMenu = React12.useCallback((event) => {
     event.preventDefault();
     event.stopPropagation();
     if (tdRef.current) {
@@ -1694,7 +1850,7 @@ var useCellContextMenu = ({
       setIsContextMenuOpen(true);
     }
   }, [tdRef]);
-  const handleCloseContextMenu = React10.useCallback(() => {
+  const handleCloseContextMenu = React12.useCallback(() => {
     setIsContextMenuOpen(false);
     setPopoverPosition(null);
   }, []);
@@ -1711,7 +1867,7 @@ function TableCell({
   cell,
   renderCellContextMenu
 }) {
-  const tdRef = React10.useRef(null);
+  const tdRef = React12.useRef(null);
   const isSelectColumn = cell.column.id === SELECTION_COLUMN_ID;
   const {
     isContextMenuOpen,
@@ -1725,15 +1881,15 @@ function TableCell({
   const {
     columnStyles
   } = getColumnPinningStyles(cell.column);
-  return /* @__PURE__ */ React10__default.default.createElement(React10__default.default.Fragment, null, /* @__PURE__ */ React10__default.default.createElement("td", {
+  return /* @__PURE__ */ React12__default.default.createElement(React12__default.default.Fragment, null, /* @__PURE__ */ React12__default.default.createElement("td", {
     ref: tdRef,
     "data-pinned": cell.column.getIsPinned(),
     className: TableCell_default.osdkTableCell,
     style: columnStyles,
     onContextMenu: handleOpenContextMenu
-  }, /* @__PURE__ */ React10__default.default.createElement("div", {
+  }, /* @__PURE__ */ React12__default.default.createElement("div", {
     className: TableCell_default.osdkTableCellContent
-  }, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()))), shouldRenderContextMenu && /* @__PURE__ */ React10__default.default.createElement(CellContextMenu, {
+  }, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()))), shouldRenderContextMenu && /* @__PURE__ */ React12__default.default.createElement(CellContextMenu, {
     cell,
     position: popoverPosition,
     onClose: handleCloseContextMenu,
@@ -1748,10 +1904,10 @@ function TableRow({
   onRowClick,
   renderCellContextMenu
 }) {
-  const handleClick = React10.useCallback(() => {
+  const handleClick = React12.useCallback(() => {
     onRowClick?.(row.original);
   }, [onRowClick, row.original]);
-  return /* @__PURE__ */ React10__default.default.createElement("tr", {
+  return /* @__PURE__ */ React12__default.default.createElement("tr", {
     "data-selected": row.getIsSelected(),
     className: TableRow_default.osdkTableRow,
     style: {
@@ -1759,7 +1915,7 @@ function TableRow({
       transform: `translateY(${virtualRow.start}px)`
     },
     onClick: handleClick
-  }, row.getVisibleCells().map((cell) => /* @__PURE__ */ React10__default.default.createElement(TableCell, {
+  }, row.getVisibleCells().map((cell) => /* @__PURE__ */ React12__default.default.createElement(TableCell, {
     key: cell.id,
     cell,
     renderCellContextMenu
@@ -1782,27 +1938,27 @@ function TableBody({
     getScrollElement: () => tableContainerRef.current,
     overscan: 5
   });
-  React10.useLayoutEffect(() => {
+  React12.useLayoutEffect(() => {
     rowVirtualizer.measure();
   }, [rowVirtualizer, rows.length]);
   const totalSize = rowVirtualizer.getTotalSize();
   const bodyHeight = isLoadingMore ? totalSize + rowHeight : totalSize;
   const headers = headerGroups[0]?.headers ?? [];
-  return /* @__PURE__ */ React10__default.default.createElement("tbody", {
+  return /* @__PURE__ */ React12__default.default.createElement("tbody", {
     className: TableBody_default.osdkTableBody,
     style: {
       height: `${bodyHeight}px`
     }
   }, rowVirtualizer.getVirtualItems().map((virtualRow) => {
     const row = rows[virtualRow.index];
-    return /* @__PURE__ */ React10__default.default.createElement(TableRow, {
+    return /* @__PURE__ */ React12__default.default.createElement(TableRow, {
       key: row.id,
       row,
       virtualRow,
       onRowClick,
       renderCellContextMenu
     });
-  }), isLoadingMore && /* @__PURE__ */ React10__default.default.createElement(LoadingRow, {
+  }), isLoadingMore && /* @__PURE__ */ React12__default.default.createElement(LoadingRow, {
     headers,
     translateY: totalSize,
     rowHeight,
@@ -1820,17 +1976,18 @@ function BaseTable({
   renderCellContextMenu,
   className,
   error,
-  headerMenuFeatureFlags
+  headerMenuFeatureFlags,
+  editableConfig
 }) {
-  const tableContainerRef = React10.useRef(null);
-  const [isLoadingMore, setIsLoadingMore] = React10.useState(false);
-  const fetchingRef = React10.useRef(false);
-  React10.useEffect(() => {
+  const tableContainerRef = React12.useRef(null);
+  const [isLoadingMore, setIsLoadingMore] = React12.useState(false);
+  const fetchingRef = React12.useRef(false);
+  React12.useEffect(() => {
     if (!isLoading || fetchNextPage == null) {
       setIsLoadingMore(false);
     }
   }, [isLoading, fetchNextPage]);
-  const fetchMoreOnEndReached = React10.useCallback(async (containerRefElement) => {
+  const fetchMoreOnEndReached = React12.useCallback(async (containerRefElement) => {
     if (containerRefElement && !fetchingRef.current && !isLoadingMore) {
       const {
         scrollHeight,
@@ -1848,25 +2005,32 @@ function BaseTable({
       }
     }
   }, [fetchNextPage, isLoading, isLoadingMore]);
-  const handleScroll = React10.useCallback(async (e) => {
+  const handleScroll = React12.useCallback(async (e) => {
     await fetchMoreOnEndReached(e.currentTarget);
   }, [fetchMoreOnEndReached]);
   const rows = table.getRowModel().rows;
   const headerGroups = table.getHeaderGroups();
   const hasData = rows.length > 0;
-  return /* @__PURE__ */ React10__default.default.createElement("div", {
+  const hasEdits = Object.keys(editableConfig?.cellEdits ?? {}).length > 0;
+  const handleSubmitEdits = React12.useCallback(async () => {
+    await editableConfig?.onSubmitEdits?.();
+    editableConfig?.clearEdits?.();
+  }, [editableConfig]);
+  return /* @__PURE__ */ React12__default.default.createElement("div", {
+    className: classNames7__default.default(Table_default.osdkTableWrapper, className)
+  }, /* @__PURE__ */ React12__default.default.createElement("div", {
     ref: tableContainerRef,
-    className: classNames7__default.default(Table_default.osdkTableContainer, className),
+    className: classNames7__default.default(Table_default.osdkTableContainer, editableConfig && Table_default.osdkTableContainerWithButton),
     onScroll: handleScroll
-  }, /* @__PURE__ */ React10__default.default.createElement("table", null, isLoading && !hasData ? /* @__PURE__ */ React10__default.default.createElement(LoadingStateTable, {
+  }, /* @__PURE__ */ React12__default.default.createElement("table", null, isLoading && !hasData ? /* @__PURE__ */ React12__default.default.createElement(LoadingStateTable, {
     table,
     headerGroups,
     rowHeight,
     tableContainerRef
-  }) : /* @__PURE__ */ React10__default.default.createElement(React10__default.default.Fragment, null, /* @__PURE__ */ React10__default.default.createElement(TableHeader, {
+  }) : /* @__PURE__ */ React12__default.default.createElement(React12__default.default.Fragment, null, /* @__PURE__ */ React12__default.default.createElement(TableHeader, {
     table,
     headerMenuFeatureFlags
-  }), /* @__PURE__ */ React10__default.default.createElement(TableBody, {
+  }), /* @__PURE__ */ React12__default.default.createElement(TableBody, {
     rows,
     tableContainerRef,
     onRowClick,
@@ -1874,11 +2038,17 @@ function BaseTable({
     renderCellContextMenu,
     isLoadingMore,
     headerGroups
-  }))), !hasData && error == null && /* @__PURE__ */ React10__default.default.createElement(NonIdealState, {
+  }))), !hasData && error == null && /* @__PURE__ */ React12__default.default.createElement(NonIdealState, {
     message: "No Data"
-  }), error != null && /* @__PURE__ */ React10__default.default.createElement(NonIdealState, {
+  }), error != null && /* @__PURE__ */ React12__default.default.createElement(NonIdealState, {
     message: `Error Loading Data: ${error.message}`
-  }));
+  })), editableConfig && /* @__PURE__ */ React12__default.default.createElement("div", {
+    className: Table_default.submitButtonContainer
+  }, /* @__PURE__ */ React12__default.default.createElement(ActionButton, {
+    variant: "primary",
+    onClick: handleSubmitEdits,
+    disabled: !hasEdits
+  }, "Submit Edits")));
 }
 
 // src/object-table/ObjectTable.tsx
@@ -1896,6 +2066,8 @@ function ObjectTable({
   selectionMode = "none",
   selectedRows,
   onColumnVisibilityChanged,
+  onCellValueChanged,
+  onSubmitEdits,
   enableOrdering = true,
   enableColumnPinning = true,
   enableColumnResizing = true,
@@ -1908,6 +2080,15 @@ function ObjectTable({
   } = useColumnResize({
     onColumnResize
   });
+  const {
+    cellEdits,
+    clearEdits,
+    handleCellEdit,
+    handleSubmitEdits
+  } = useEditableTable({
+    onCellValueChanged,
+    onSubmitEdits
+  });
   const {
     sorting,
     onSortingChange
@@ -1963,7 +2144,7 @@ function ObjectTable({
     hasSelectionColumn: enableRowSelection,
     onColumnsPinnedChanged
   });
-  const allColumns = React10.useMemo(() => {
+  const allColumns = React12.useMemo(() => {
     return selectionColumn ? [selectionColumn, ...columns] : columns;
   }, [selectionColumn, columns]);
   const table = reactTable.useReactTable({
@@ -1992,19 +2173,33 @@ function ObjectTable({
     defaultColumn: {
       minSize: 80
     },
-    getRowId
+    getRowId,
+    meta: {
+      onCellEdit: handleCellEdit,
+      cellEdits
+    }
   });
-  const onRenderCellContextMenu = React10.useCallback((row, cell) => {
+  const onRenderCellContextMenu = React12.useCallback((row, cell) => {
     return renderCellContextMenu?.(row, cell.getValue());
   }, [renderCellContextMenu]);
   const isTableLoading = isLoading || isColumnsLoading;
-  const headerMenuFeatureFlags = React10.useMemo(() => ({
+  const headerMenuFeatureFlags = React12.useMemo(() => ({
     showSortingItems: enableOrdering,
     showPinningItems: enableColumnPinning,
     showResizeItem: enableColumnResizing,
     showConfigItem: enableColumnConfig
   }), [enableOrdering, enableColumnPinning, enableColumnResizing, enableColumnConfig]);
-  return /* @__PURE__ */ React10__default.default.createElement(BaseTable, {
+  const editableConfig = React12.useMemo(() => {
+    if (!onSubmitEdits) {
+      return;
+    }
+    return {
+      onSubmitEdits: handleSubmitEdits,
+      clearEdits,
+      cellEdits
+    };
+  }, [onSubmitEdits, handleSubmitEdits, clearEdits, cellEdits]);
+  return /* @__PURE__ */ React12__default.default.createElement(BaseTable, {
     table,
     isLoading: isTableLoading,
     fetchNextPage: fetchMore,
@@ -2013,7 +2208,8 @@ function ObjectTable({
     renderCellContextMenu: onRenderCellContextMenu,
     className: props.className,
     error,
-    headerMenuFeatureFlags
+    headerMenuFeatureFlags,
+    editableConfig
   });
 }