@servicetitan/anvil2 2.7.0 → 2.8.0

package/dist/{DataTable-BYOS6icI.js → DataTable-DK9xRjnq.js}

@@ -1,30 +1,27 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { C as Chip } from './Chip-DjTAR0va.js';
+import { C as Chip } from './Chip-BnofwIUN.js';
 import { F as Flex } from './Flex-WyyZm1bf.js';
 import * as React from 'react';
 import { useRef, useState, useLayoutEffect, createContext, useContext, useCallback, forwardRef, useMemo, useImperativeHandle, useEffect, useId, Fragment as Fragment$1, useReducer } from 'react';
 import { c as cx } from './index-De1g9FRV.js';
 import { D as DateTime } from './luxon-wpz4A-OQ.js';
-import { w as warnOnce } from './warnOnce-Y9PRHcU4.js';
-import { C as Checkbox } from './Checkbox-CjEKa5Iv.js';
-import { B as Button } from './Button-CVsGhVJz.js';
+import { C as Checkbox } from './Checkbox-DbaZrUE2.js';
+import { B as Button } from './Button-a_D7tUgM.js';
 import { S as SvgChevronRight } from './chevron_right-BdpsxX7x.js';
 import { S as SvgEdit } from './edit-DQOiktcu.js';
 import { I as Icon } from './Icon-DuIlne4x.js';
 import { S as SrOnly } from './SrOnly-eUpYGpAT.js';
 import { u as useNumberField } from './useNumberField-eMyk7MB8.js';
 import { u as useMergeRefs, m as mergeRefs } from './useMergeRefs-Dfmtq9cI.js';
-import { M as Menu } from './Menu-BXsmCP20.js';
-import { P as Popover } from './Popover-D0qSKZ1J.js';
-import { S as SearchField } from './SearchField-im7AHGYo.js';
-import { L as ListView } from './ListView-mujFK6mQ.js';
+import { a as SelectMenuSync, S as SelectMenu } from './SelectMenuSync-CuZp9mnt.js';
+import { a as MultiSelectMenuSync, M as MultiSelectMenu } from './MultiSelectMenuSync-B_mXpTEe.js';
 import { S as SvgError } from './error-DR_wWdYY.js';
 import { S as SvgWarning } from './warning-c4Wj1rI4.js';
-import { T as Tooltip } from './Tooltip-Bupqao9B.js';
+import { T as Tooltip } from './Tooltip-C1PBRnJv.js';
 import { flushSync } from 'react-dom';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DMDdfIah.js';
 import './anvil-fonts.css';import './DataTable.css';/* empty css                     */
-import { P as Pagination } from './Pagination-BAwqfl_2.js';
+import { P as Pagination } from './Pagination-CjGmJ_rU.js';
 import { T as ThemeProviderContext } from './ThemeProviderContext-l52GohYT.js';
 import { S as Spinner } from './Spinner-BqmcE2pb.js';
 import { u as useOptionallyControlledState } from './useOptionallyControlledState-DbDuos5L.js';
@@ -406,53 +403,15 @@ function getColumnTypeDefaults(type) {
   return COLUMN_TYPE_DEFAULTS[type];
 }
 
-function logDeprecationWarnings(id, column) {
-  const columnId = typeof id === "object" && "group" in id ? id.group : String(id);
-  if ("editMode" in column && column.editMode && !("editConfig" in column && column.editConfig)) {
-    warnOnce(
-      `[Anvil2 DataTable] Column "${columnId}" uses deprecated \`editMode\` prop. Migrate to \`editConfig: { mode: "${column.editMode}", onChange: ... }\``
-    );
-  }
-  if ("onChange" in column && column.onChange && !("editConfig" in column && column.editConfig)) {
-    warnOnce(
-      `[Anvil2 DataTable] Column "${columnId}" uses deprecated top-level \`onChange\`. Move \`onChange\` inside \`editConfig\`.`
-    );
-  }
-  if ("options" in column && column.options && !("editConfig" in column && column.editConfig)) {
-    warnOnce(
-      `[Anvil2 DataTable] Column "${columnId}" uses deprecated top-level \`options\`. Move \`options\` inside \`editConfig\`.`
-    );
-  }
-}
-function transformEditConfig(column) {
-  if (!("editConfig" in column) || !column.editConfig) {
-    return {};
-  }
-  const { editConfig } = column;
-  const result = {
-    editMode: editConfig.mode,
-    onChange: editConfig.onChange
-  };
-  if (editConfig.mode === "select" || editConfig.mode === "multiselect") {
-    if ("options" in editConfig) {
-      result.options = editConfig.options;
-    }
-  }
-  result.editConfig = editConfig;
-  return result;
-}
 function createColumnHelper$1() {
   return function createColumn(id, column) {
-    logDeprecationWarnings(id, column);
-    const editProps = transformEditConfig(column);
     if (typeof id === "object" && "group" in id) {
       return {
         id: id.group,
-        ...column,
-        ...editProps
+        ...column
       };
     }
-    return { id, ...column, ...editProps };
+    return { id, ...column };
   };
 }
 
@@ -3597,6 +3556,49 @@ function groupBy(rows, columnId) {
   }, groupMap);
 }
 
+function getPaginationRowModel(opts) {
+  return table => memo(() => [table.getState().pagination, table.getPrePaginationRowModel(), table.options.paginateExpandedRows ? undefined : table.getState().expanded], (pagination, rowModel) => {
+    if (!rowModel.rows.length) {
+      return rowModel;
+    }
+    const {
+      pageSize,
+      pageIndex
+    } = pagination;
+    let {
+      rows,
+      flatRows,
+      rowsById
+    } = rowModel;
+    const pageStart = pageSize * pageIndex;
+    const pageEnd = pageStart + pageSize;
+    rows = rows.slice(pageStart, pageEnd);
+    let paginatedRowModel;
+    if (!table.options.paginateExpandedRows) {
+      paginatedRowModel = expandRows({
+        rows,
+        flatRows,
+        rowsById
+      });
+    } else {
+      paginatedRowModel = {
+        rows,
+        flatRows,
+        rowsById
+      };
+    }
+    paginatedRowModel.flatRows = [];
+    const handleRow = row => {
+      paginatedRowModel.flatRows.push(row);
+      if (row.subRows.length) {
+        row.subRows.forEach(handleRow);
+      }
+    };
+    paginatedRowModel.rows.forEach(handleRow);
+    return paginatedRowModel;
+  }, getMemoOptions(table.options, 'debugTable', 'getPaginationRowModel'));
+}
+
 function getSortedRowModel() {
   return table => memo(() => [table.getState().sorting, table.getPreSortedRowModel()], (sorting, rowModel) => {
     if (!rowModel.rows.length || !(sorting != null && sorting.length)) {
@@ -3919,22 +3921,21 @@ const getCommonPinningClasses = (column) => {
 };
 
 const styles$a = {
-	"data-table-body-cell-input": "_data-table-body-cell-input_hmeb7_2",
-	"data-table-body-cell-editable": "_data-table-body-cell-editable_hmeb7_36",
-	"data-table-body-cell-edit-icon": "_data-table-body-cell-edit-icon_hmeb7_36"
+	"data-table-body-cell-input": "_data-table-body-cell-input_wnkkd_2",
+	"data-table-body-cell-editable": "_data-table-body-cell-editable_wnkkd_36",
+	"data-table-body-cell-edit-icon-container": "_data-table-body-cell-edit-icon-container_wnkkd_36"
 };
 
 const DataTableEditableCellEditIcon = () => {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("span", { className: styles$a["data-table-body-cell-edit-icon-container"], children: /* @__PURE__ */ jsx(
     Icon,
     {
       svg: SvgEdit,
       size: "small",
       color: "subtle",
-      className: styles$a["data-table-body-cell-edit-icon"],
       "aria-label": "Edit cell value"
     }
-  );
+  ) });
 };
 
 const TableBodyCell = forwardRef(({ type, children, className, isExpandCell, isSelectCell, ...rest }, ref) => {
@@ -3958,19 +3959,19 @@ const TableBodyCell = forwardRef(({ type, children, className, isExpandCell, isS
 TableBodyCell.displayName = "TableBodyCell";
 
 const styles$9 = {
-	"data-table-body-cell": "_data-table-body-cell_kmr30_2",
-	"data-table-body-cell-input": "_data-table-body-cell-input_kmr30_3",
-	"table-body-cell": "_table-body-cell_kmr30_18",
-	"table-header-cell": "_table-header-cell_kmr30_19",
-	"table-footer-cell": "_table-footer-cell_kmr30_20",
-	"data-table-body-cell-editing": "_data-table-body-cell-editing_kmr30_32",
-	"data-table-header-cell": "_data-table-header-cell_kmr30_33",
-	"data-table-footer-cell": "_data-table-footer-cell_kmr30_36",
-	"data-table-body-cell-hovered": "_data-table-body-cell-hovered_kmr30_81",
-	"data-table-body-cell-error": "_data-table-body-cell-error_kmr30_84",
-	"data-table-body-cell-warning": "_data-table-body-cell-warning_kmr30_99",
-	"cell-error-icon": "_cell-error-icon_kmr30_106",
-	"cell-warning-icon": "_cell-warning-icon_kmr30_107"
+	"data-table-body-cell": "_data-table-body-cell_l8lyo_2",
+	"data-table-body-cell-input": "_data-table-body-cell-input_l8lyo_3",
+	"table-body-cell": "_table-body-cell_l8lyo_18",
+	"table-header-cell": "_table-header-cell_l8lyo_19",
+	"table-footer-cell": "_table-footer-cell_l8lyo_20",
+	"data-table-body-cell-editing": "_data-table-body-cell-editing_l8lyo_32",
+	"data-table-header-cell": "_data-table-header-cell_l8lyo_33",
+	"data-table-footer-cell": "_data-table-footer-cell_l8lyo_36",
+	"data-table-body-cell-hovered": "_data-table-body-cell-hovered_l8lyo_82",
+	"data-table-body-cell-error": "_data-table-body-cell-error_l8lyo_85",
+	"data-table-body-cell-warning": "_data-table-body-cell-warning_l8lyo_102",
+	"cell-error-icon": "_cell-error-icon_l8lyo_111",
+	"cell-warning-icon": "_cell-warning-icon_l8lyo_112"
 };
 
 function formatCellPositionString(cellPosition) {
@@ -3993,7 +3994,9 @@ function getCellValue(cell, _columnId) {
   return value;
 }
 function getCellOnChange(cell, _columnId) {
-  return cell.column.columnDef.meta?.onChange;
+  const meta = cell.column.columnDef.meta;
+  const onChange = meta?.editConfig?.onChange;
+  return onChange;
 }
 function logWarningForInvalidCellValueType({
   columnId,
@@ -4538,113 +4541,60 @@ const DataTableEditableNumberCell = Object.assign(
   { displayName: "DataTableEditableNumberCell" }
 );
 
-function DataTableEditableSelectCellInner(props, ref) {
-  const { cell, cellProps, cellPosition, children } = props;
-  const { onKeyDown: onCellKeyDown } = cellProps;
-  const [isEditing, setIsEditing] = useState(false);
-  const columnId = getColumnId(cell);
-  const cellValue = getCellValue(cell);
-  const [initialValue, isValidValueType] = useMemo(() => {
-    let value;
-    let isValid = true;
-    if (cellValue === void 0 || cellValue === null) {
-      value = "";
-      isValid = true;
-      return [value, isValid];
-    }
-    switch (typeof cellValue) {
-      case "string":
-      case "number":
-        value = String(cellValue);
-        break;
-      case "boolean":
-        value = String(cellValue);
-        break;
-      default:
-        value = "";
-        isValid = false;
-        break;
-    }
-    if (!isValid) {
-      logWarningForInvalidCellValueType({
-        columnId: String(columnId),
-        editMode: "select",
-        expectedType: "string | number | boolean",
-        receivedType: Array.isArray(cellValue) ? "array" : typeof cellValue
-      });
-    }
-    return [value, isValid];
-  }, [cellValue, columnId]);
-  const options = cell.column.columnDef.meta?.options ?? [];
+function useEditableMenuCell({
+  cellPosition,
+  onCellKeyDown,
+  ref
+}) {
   const [tabIndex, setTabIndex] = useState(-1);
   const { moveFocusToCell } = useDTFocusDispatchContext();
   const cellRef = useRef(null);
-  const rowId = cell.row.id;
-  const menuElement = useRef(null);
+  const triggerClickRef = useRef(null);
   useImperativeHandle(ref, () => ({
-    invoke: beginEditing,
+    invoke: () => {
+      triggerClickRef.current?.();
+    },
     focus: () => {
       cellRef.current?.focus();
       setTabIndex(0);
     }
   }));
-  const beginEditing = useCallback(() => {
-    setIsEditing(true);
-  }, [setIsEditing]);
-  const stopEditing = useCallback(() => {
-    setIsEditing(false);
-  }, [setIsEditing]);
-  const onChange = getCellOnChange(cell);
-  const commitValue = useCallback(
-    (value) => {
-      if (value !== initialValue) {
-        onChange?.(value, rowId);
-      }
-      stopEditing();
-    },
-    [rowId, onChange, initialValue, stopEditing]
-  );
-  const cellClasses = cx(
-    styles$a["data-table-body-cell-editable"],
-    cellProps.className,
-    { [styles$9["data-table-body-cell-editing"]]: isEditing }
-  );
   const handleCellKeyDown = useCallback(
-    (event, handleMenuKeydown) => {
-      if (isEditing) {
-        if (event.key === "Escape" || event.key === "F2") {
-          stopEditing();
-          return;
-        }
-        handleMenuKeydown?.(event);
+    (event, menuKeyDown, isOpen) => {
+      if (isOpen) {
+        menuKeyDown?.(event);
         return;
       }
       onCellKeyDown?.(event);
     },
-    [onCellKeyDown, isEditing, stopEditing]
+    [onCellKeyDown]
   );
-  const handleOutsidePress = useCallback(() => {
-    stopEditing();
-    setTabIndex(-1);
-  }, [stopEditing]);
-  const handleCellMouseDown = useCallback(() => {
-    if (isEditing) {
-      stopEditing();
-      return;
+  const handleMenuKeyDown = useCallback((e) => {
+    if (e.key === "F2") {
+      e.preventDefault();
+      triggerClickRef.current?.();
     }
-    moveFocusToCell(cellPosition);
-    beginEditing();
-  }, [beginEditing, cellPosition, moveFocusToCell, isEditing, stopEditing]);
-  const handleCellBlur = useCallback(
-    (e) => {
-      if (menuElement.current?.contains(e.relatedTarget)) {
-        return;
-      }
-      setTabIndex(-1);
-      stopEditing();
+  }, []);
+  const handleImplicitClose = useCallback(() => {
+    setTabIndex(-1);
+  }, []);
+  const handleCellMouseDown = useCallback(
+    (triggerOnClick) => () => {
+      moveFocusToCell(cellPosition);
+      triggerOnClick();
     },
-    [setTabIndex, menuElement, stopEditing]
+    [cellPosition, moveFocusToCell]
   );
+  const handleCellBlur = useCallback((e) => {
+    const popoverId = e.currentTarget.getAttribute(
+      "aria-controls"
+    );
+    const popoverEl = popoverId ? document.getElementById(popoverId) : null;
+    if (popoverEl?.contains(e.relatedTarget)) {
+      return;
+    }
+    setTabIndex(-1);
+  }, []);
   const handleCellFocus = useCallback(
     (event) => {
       if (event.target !== cellRef.current) {
@@ -4653,47 +4603,86 @@ function DataTableEditableSelectCellInner(props, ref) {
       event.preventDefault();
       setTabIndex(0);
     },
-    [setTabIndex]
-  );
-  const handleMenuItemClick = useCallback(
-    (value) => {
-      commitValue(value);
-    },
-    [commitValue]
-  );
-  const handleMenuItemKeyDown = useCallback(
-    (event) => {
-      if (event.key === "Escape" || event.key === "F2") {
-        cellRef.current?.focus();
-        stopEditing();
-      }
-    },
-    [stopEditing]
+    []
   );
   const cellFocusContextValue = useMemo(
-    () => ({ isCellFocused: tabIndex === 0 && !isEditing }),
-    [tabIndex, isEditing]
+    () => ({ isCellFocused: tabIndex === 0 }),
+    [tabIndex]
   );
-  if (!isValidValueType) {
+  return {
+    tabIndex,
+    cellRef,
+    triggerClickRef,
+    handleCellKeyDown,
+    handleMenuKeyDown,
+    handleImplicitClose,
+    handleCellMouseDown,
+    handleCellBlur,
+    handleCellFocus,
+    cellFocusContextValue
+  };
+}
+
+function DataTableEditableSelectCellInner(props, ref) {
+  const { cell, cellProps, cellPosition, children } = props;
+  const { onKeyDown: onCellKeyDown, className, ...restCellProps } = cellProps;
+  getColumnId(cell);
+  const cellValue = getCellValue(cell);
+  const meta = cell.column.columnDef.meta;
+  const editConfig = meta?.editConfig;
+  const selectEditConfig = editConfig?.mode === "select" ? editConfig : void 0;
+  const options = useMemo(
+    () => selectEditConfig?.options ?? [],
+    [selectEditConfig]
+  );
+  const onChange = selectEditConfig?.onChange;
+  const {
+    mode: _mode,
+    options: _options,
+    onChange: _onChange,
+    ...selectMenuPassthroughProps
+  } = selectEditConfig ?? {};
+  const isValidValueType = useMemo(() => {
+    if (Array.isArray(cellValue)) return false;
+    return true;
+  }, [cellValue]);
+  const rowId = cell.row.id;
+  const {
+    tabIndex,
+    cellRef,
+    triggerClickRef,
+    handleCellKeyDown,
+    handleMenuKeyDown,
+    handleImplicitClose,
+    handleCellMouseDown,
+    handleCellBlur,
+    handleCellFocus,
+    cellFocusContextValue
+  } = useEditableMenuCell({ cellPosition, onCellKeyDown, ref });
+  const selectedOption = useMemo(() => {
+    if (cellValue === void 0 || cellValue === null) return null;
+    return options.find((o) => String(o.id) === String(cellValue)) ?? null;
+  }, [options, cellValue]);
+  const hasEditableConfig = !!selectEditConfig;
+  if (!isValidValueType || !hasEditableConfig) {
     const { cellProps: _cellProps, ...immutableCellProps } = props;
     return /* @__PURE__ */ jsx(DataTableBodyImmutableCell, { ...immutableCellProps });
   }
   return /* @__PURE__ */ jsx(
-    Menu,
+    SelectMenuSync,
     {
-      open: isEditing,
-      onOutsidePress: handleOutsidePress,
       trigger: ({
         ref: triggerRef,
-        onKeyDown: menuOnTriggerKeydown,
-        ["aria-controls"]: triggerAriaControls,
-        ["aria-expanded"]: triggerAriaExpanded,
-        ["aria-haspopup"]: triggerAriaHaspopup,
-        ["data-open"]: triggerDataOpen,
-        ["data-state"]: triggerDataState
+        onClick,
+        onKeyDown: menuKeyDown,
+        "aria-controls": ariaControls,
+        "aria-expanded": ariaExpanded,
+        "aria-haspopup": ariaHaspopup,
+        "data-state": dataState
       }) => {
-        menuElement.current = document.querySelector(`#${triggerAriaControls}`) || null;
-        return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+        triggerClickRef.current = onClick;
+        const isOpen = ariaExpanded;
+        return /* @__PURE__ */ jsxs(
           TableBodyCell,
           {
             ref: mergeRefs([
@@ -4702,39 +4691,38 @@ function DataTableEditableSelectCellInner(props, ref) {
             ]),
             tabIndex,
             type: "data-table",
-            ...cellProps,
-            className: cellClasses,
-            onMouseDown: handleCellMouseDown,
+            ...restCellProps,
+            className: cx(styles$a["data-table-body-cell-editable"], className),
+            onMouseDown: handleCellMouseDown(onClick),
             onBlur: handleCellBlur,
             onFocus: handleCellFocus,
             "data-cell-pos": formatCellPositionString(cellPosition),
-            "aria-controls": triggerAriaControls,
-            "aria-expanded": triggerAriaExpanded,
-            "aria-haspopup": triggerAriaHaspopup,
-            "data-open": triggerDataOpen,
-            "data-state": triggerDataState,
-            onKeyDown: (e) => handleCellKeyDown(e, menuOnTriggerKeydown),
+            "aria-controls": ariaControls,
+            "aria-expanded": ariaExpanded,
+            "aria-haspopup": ariaHaspopup,
+            "data-state": dataState,
+            onKeyDown: (e) => handleCellKeyDown(e, menuKeyDown, isOpen),
             children: [
               /* @__PURE__ */ jsxs(CellFocusContext.Provider, { value: cellFocusContextValue, children: [
                 children,
-                !isEditing && /* @__PURE__ */ jsx(DataTableEditableCellEditIcon, {})
+                !isOpen && /* @__PURE__ */ jsx(DataTableEditableCellEditIcon, {})
               ] }),
-              /* @__PURE__ */ jsx(SrOnly, { children: isEditing ? "Press Enter or Space to select a cell value. Press Escape or F2 to cancel." : "Press Enter or F2 to edit cell value." })
+              /* @__PURE__ */ jsx(SrOnly, { children: isOpen ? "Press Enter or Space to select a cell value. Press Escape or F2 to cancel." : "Press Enter or F2 to edit cell value." })
             ]
           }
-        ) });
-      },
-      children: isEditing && options.map((item) => {
-        return /* @__PURE__ */ jsx(
-          Menu.Item,
-          {
-            label: item.label,
-            onClick: () => handleMenuItemClick(item.value),
-            onKeyDown: handleMenuItemKeyDown
-          },
-          item.value
         );
-      })
+      },
+      label: String(
+        cell.column.columnDef.meta?.columnDef?.headerLabel ?? "Select"
+      ),
+      options,
+      value: selectedOption,
+      onSelectedOptionChange: (option) => {
+        onChange?.(option, rowId);
+      },
+      onMenuKeyDown: handleMenuKeyDown,
+      onImplicitClose: handleImplicitClose,
+      ...selectMenuPassthroughProps
     }
   );
 }
@@ -4743,287 +4731,425 @@ const DataTableEditableSelectCell = Object.assign(
   { displayName: "DataTableEditableSelectCell" }
 );
 
-function DataTableEditableMultiselectCellInner(props, ref) {
+function DataTableEditableSelectAsyncCellInner(props, ref) {
   const { cell, cellProps, cellPosition, children } = props;
-  const { onKeyDown: onCellKeyDown } = cellProps;
-  const [isEditing, setIsEditing] = useState(false);
-  const columnId = getColumnId(cell);
+  const { onKeyDown: onCellKeyDown, className, ...restCellProps } = cellProps;
+  getColumnId(cell);
   const cellValue = getCellValue(cell);
-  const [initialValue, isValidValueType] = useMemo(() => {
-    let value;
-    let isValid = true;
-    if (cellValue === null || cellValue === void 0) {
-      value = [];
-      return [value, isValid];
-    } else if (Array.isArray(cellValue)) {
-      value = cellValue.map((v) => String(v));
-      isValid = true;
-      return [value, isValid];
-    } else {
-      value = [];
-      isValid = false;
-      logWarningForInvalidCellValueType({
-        columnId: String(columnId),
-        editMode: "multiselect",
-        expectedType: "array of primitive values",
-        receivedType: typeof cellValue
-      });
-      return [value, isValid];
-    }
-  }, [cellValue, columnId]);
-  const options = useMemo(
-    () => cell.column.columnDef.meta?.options ?? [],
-    [cell.column.columnDef.meta?.options]
-  );
-  const [tabIndex, setTabIndex] = useState(-1);
-  const { moveFocusToCell } = useDTFocusDispatchContext();
-  const cellRef = useRef(null);
+  const editConfig = cell.column.columnDef.meta?.editConfig;
+  const asyncEditConfig = editConfig?.mode === "select-async" ? editConfig : void 0;
+  const isValidValueType = useMemo(() => {
+    if (Array.isArray(cellValue)) return false;
+    return true;
+  }, [cellValue]);
   const rowId = cell.row.id;
-  const [draftValue, setDraftValue] = useState(initialValue);
-  const searchFieldRef = useRef(null);
-  const [searchValue, setSearchValue] = useState("");
-  const listViewRef = useRef(null);
-  const popoverElement = useRef(null);
-  const { className, ...restCellProps } = cellProps;
-  useImperativeHandle(ref, () => ({
-    invoke: beginEditing,
-    focus: () => {
-      cellRef.current?.focus();
-      setTabIndex(0);
-    }
-  }));
-  const beginEditing = useCallback(() => {
-    setIsEditing(true);
-  }, [setIsEditing]);
-  const stopEditing = useCallback(() => {
-    setIsEditing(false);
-  }, [setIsEditing]);
-  const onChange = getCellOnChange(cell);
-  const commitValue = useCallback(() => {
-    setSearchValue("");
-    const arraysEqual = draftValue.length === initialValue.length && draftValue.every((val, idx) => val === initialValue[idx]);
-    if (!arraysEqual) {
-      onChange?.(draftValue, rowId);
-    }
-    stopEditing();
-  }, [rowId, onChange, initialValue, stopEditing, draftValue]);
-  const cellClasses = cx(styles$a["data-table-body-cell-editable"], className, {
-    [styles$9["data-table-body-cell-editing"]]: isEditing
-  });
-  const resetValue = useCallback(() => {
-    setDraftValue(initialValue);
-    setSearchValue("");
-    stopEditing();
-  }, [initialValue, stopEditing]);
-  const handleCellKeyDown = useCallback(
-    (event, handlePopoverKeydown) => {
-      if (isEditing) {
-        if (event.key === "Escape" || event.key === "F2") {
-          stopEditing();
-          return;
-        }
-        handlePopoverKeydown?.(event);
-        return;
+  const row = cell.row.original;
+  const context = useMemo(() => ({ row, rowId }), [row, rowId]);
+  const {
+    mode: _mode,
+    lazy,
+    lazyOptions,
+    loadOptions: cellLoader,
+    onChange,
+    cache: cacheProp,
+    ...passthroughProps
+  } = asyncEditConfig ?? {};
+  const loadOptions = useCallback(
+    (searchValue, ...rest) => {
+      if (!cellLoader) return [];
+      if (lazy === "page") {
+        const [pageNumber, pageSize] = rest;
+        return cellLoader(
+          searchValue,
+          pageNumber,
+          pageSize,
+          context
+        );
       }
-      onCellKeyDown?.(event);
+      if (lazy === "offset") {
+        const [offset, limit] = rest;
+        return cellLoader(
+          searchValue,
+          offset,
+          limit,
+          context
+        );
+      }
+      if (lazy === "group") {
+        const [previousGroupKey] = rest;
+        return cellLoader(
+          searchValue,
+          previousGroupKey,
+          context
+        );
+      }
+      return cellLoader(
+        searchValue,
+        context
+      );
     },
-    [onCellKeyDown, isEditing, stopEditing]
+    [cellLoader, context, lazy]
   );
-  const handleCellMouseDown = useCallback(() => {
-    if (isEditing) {
-      return;
+  const cache = cacheProp ?? { enabled: false };
+  const {
+    tabIndex,
+    cellRef,
+    triggerClickRef,
+    handleCellKeyDown,
+    handleMenuKeyDown,
+    handleImplicitClose,
+    handleCellMouseDown,
+    handleCellBlur,
+    handleCellFocus,
+    cellFocusContextValue
+  } = useEditableMenuCell({ cellPosition, onCellKeyDown, ref });
+  const selectedOption = useMemo(() => {
+    if (cellValue === void 0 || cellValue === null) return null;
+    if (typeof cellValue === "object") return null;
+    return { id: cellValue, label: String(cellValue) };
+  }, [cellValue]);
+  if (!isValidValueType || !asyncEditConfig) {
+    const { cellProps: _cellProps, ...immutableCellProps } = props;
+    return /* @__PURE__ */ jsx(DataTableBodyImmutableCell, { ...immutableCellProps });
+  }
+  return /* @__PURE__ */ jsx(
+    SelectMenu,
+    {
+      lazy,
+      loadOptions,
+      lazyOptions,
+      cache,
+      ...passthroughProps,
+      trigger: ({
+        ref: triggerRef,
+        onClick,
+        onKeyDown: menuKeyDown,
+        "aria-controls": ariaControls,
+        "aria-expanded": ariaExpanded,
+        "aria-haspopup": ariaHaspopup,
+        "data-state": dataState
+      }) => {
+        triggerClickRef.current = onClick;
+        const isOpen = ariaExpanded;
+        return /* @__PURE__ */ jsxs(
+          TableBodyCell,
+          {
+            ref: mergeRefs([
+              triggerRef,
+              cellRef
+            ]),
+            tabIndex,
+            type: "data-table",
+            ...restCellProps,
+            className: cx(styles$a["data-table-body-cell-editable"], className),
+            onMouseDown: handleCellMouseDown(onClick),
+            onBlur: handleCellBlur,
+            onFocus: handleCellFocus,
+            "data-cell-pos": formatCellPositionString(cellPosition),
+            "aria-controls": ariaControls,
+            "aria-expanded": ariaExpanded,
+            "aria-haspopup": ariaHaspopup,
+            "data-state": dataState,
+            onKeyDown: (e) => handleCellKeyDown(e, menuKeyDown, isOpen),
+            children: [
+              /* @__PURE__ */ jsxs(CellFocusContext.Provider, { value: cellFocusContextValue, children: [
+                children,
+                !isOpen && /* @__PURE__ */ jsx(DataTableEditableCellEditIcon, {})
+              ] }),
+              /* @__PURE__ */ jsx(SrOnly, { children: isOpen ? "Press Enter or Space to select a cell value. Press Escape or F2 to cancel." : "Press Enter or F2 to edit cell value." })
+            ]
+          }
+        );
+      },
+      label: String(
+        cell.column.columnDef.meta?.columnDef?.headerLabel ?? "Select"
+      ),
+      value: selectedOption,
+      onSelectedOptionChange: (option) => {
+        onChange?.(option, rowId);
+      },
+      onMenuKeyDown: handleMenuKeyDown,
+      onImplicitClose: handleImplicitClose
     }
-    moveFocusToCell(cellPosition);
-    beginEditing();
-  }, [beginEditing, cellPosition, moveFocusToCell, isEditing]);
-  const handleCellBlur = useCallback(
-    (e) => {
-      if (popoverElement.current?.contains(e.relatedTarget)) {
-        return;
-      }
-      setTabIndex(-1);
-      stopEditing();
-    },
-    [stopEditing]
   );
-  const handleCellFocus = useCallback(
-    (event) => {
-      if (event.target !== cellRef.current) {
-        return;
-      }
-      event.preventDefault();
-      setTabIndex(0);
-    },
-    [setTabIndex]
+}
+const DataTableEditableSelectAsyncCell = Object.assign(
+  forwardRef(DataTableEditableSelectAsyncCellInner),
+  { displayName: "DataTableEditableSelectAsyncCell" }
+);
+
+function DataTableEditableMultiselectCellInner(props, ref) {
+  const { cell, cellProps, cellPosition, children } = props;
+  const { onKeyDown: onCellKeyDown, className, ...restCellProps } = cellProps;
+  const columnId = getColumnId(cell);
+  const cellValue = getCellValue(cell);
+  const isValidValueType = useMemo(() => {
+    if (cellValue === null || cellValue === void 0) return true;
+    if (Array.isArray(cellValue)) return true;
+    logWarningForInvalidCellValueType({
+      columnId: String(columnId),
+      editMode: "multiselect",
+      expectedType: "array of primitive values",
+      receivedType: typeof cellValue
+    });
+    return false;
+  }, [cellValue, columnId]);
+  const meta = cell.column.columnDef.meta;
+  const editConfig = meta?.editConfig;
+  const multiselectEditConfig = editConfig?.mode === "multiselect" ? editConfig : void 0;
+  const options = useMemo(
+    () => multiselectEditConfig?.options ?? [],
+    [multiselectEditConfig]
   );
-  const handleListViewKeyDown = useCallback(
-    (e) => {
-      if (e.key === "Tab" && !e.shiftKey || e.key === "F2") {
-        e.preventDefault();
-        e.stopPropagation();
-        cellRef.current?.focus();
-        commitValue();
-      }
-      if (e.key === "Escape") {
-        cellRef.current?.focus();
-        e.preventDefault();
-        e.stopPropagation();
-        resetValue();
-      }
-      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-        e.preventDefault();
-      }
-    },
-    [commitValue, resetValue]
+  const onChange = multiselectEditConfig?.onChange;
+  const {
+    mode: _mode,
+    options: _options,
+    onChange: _onChange,
+    ...multiSelectMenuPassthroughProps
+  } = multiselectEditConfig ?? {};
+  const rowId = cell.row.id;
+  const {
+    tabIndex,
+    cellRef,
+    triggerClickRef,
+    handleCellKeyDown,
+    handleMenuKeyDown,
+    handleImplicitClose,
+    handleCellMouseDown,
+    handleCellBlur,
+    handleCellFocus,
+    cellFocusContextValue
+  } = useEditableMenuCell({ cellPosition, onCellKeyDown, ref });
+  const selectedOptions = useMemo(() => {
+    if (!Array.isArray(cellValue)) return [];
+    const valueStrings = cellValue.map((v) => String(v));
+    return options.filter((o) => valueStrings.includes(String(o.id)));
+  }, [options, cellValue]);
+  const hasEditableConfig = !!multiselectEditConfig;
+  if (!isValidValueType || !hasEditableConfig) {
+    const { cellProps: _cellProps, ...immutableCellProps } = props;
+    return /* @__PURE__ */ jsx(DataTableBodyImmutableCell, { ...immutableCellProps });
+  }
+  return /* @__PURE__ */ jsx(
+    MultiSelectMenuSync,
+    {
+      trigger: ({
+        ref: triggerRef,
+        onClick,
+        onKeyDown: menuKeyDown,
+        "aria-controls": ariaControls,
+        "aria-expanded": ariaExpanded,
+        "aria-haspopup": ariaHaspopup,
+        "data-state": dataState
+      }) => {
+        triggerClickRef.current = onClick;
+        const isOpen = ariaExpanded;
+        return /* @__PURE__ */ jsxs(
+          TableBodyCell,
+          {
+            ref: mergeRefs([
+              triggerRef,
+              cellRef
+            ]),
+            tabIndex,
+            type: "data-table",
+            ...restCellProps,
+            className: cx(styles$a["data-table-body-cell-editable"], className),
+            onMouseDown: handleCellMouseDown(onClick),
+            onBlur: handleCellBlur,
+            onFocus: handleCellFocus,
+            "data-cell-pos": formatCellPositionString(cellPosition),
+            "aria-controls": ariaControls,
+            "aria-expanded": ariaExpanded,
+            "aria-haspopup": ariaHaspopup,
+            "data-state": dataState,
+            onKeyDown: (e) => handleCellKeyDown(e, menuKeyDown, isOpen),
+            children: [
+              /* @__PURE__ */ jsxs(CellFocusContext.Provider, { value: cellFocusContextValue, children: [
+                children,
+                !isOpen && /* @__PURE__ */ jsx(DataTableEditableCellEditIcon, {})
+              ] }),
+              /* @__PURE__ */ jsx(SrOnly, { children: isOpen ? "Press Enter or Space to select cell values. Press Escape or F2 to close." : "Press Enter or F2 to edit cell value." })
+            ]
+          }
+        );
+      },
+      label: String(
+        cell.column.columnDef.meta?.columnDef?.headerLabel ?? "Select"
+      ),
+      options,
+      value: selectedOptions,
+      onSelectedOptionsChange: (selected) => {
+        onChange?.(selected, rowId);
+      },
+      onMenuKeyDown: handleMenuKeyDown,
+      onImplicitClose: handleImplicitClose,
+      ...multiSelectMenuPassthroughProps
+    }
   );
-  const handleSearchFieldKeyDown = useCallback(
-    (e) => {
-      if (e.key === "F2") {
-        cellRef.current?.focus();
-        commitValue();
-      }
-      if (e.key === "Escape") {
-        e.preventDefault();
-        e.stopPropagation();
-        cellRef.current?.focus();
-        resetValue();
+}
+const DataTableEditableMultiselectCell = Object.assign(
+  forwardRef(DataTableEditableMultiselectCellInner),
+  { displayName: "DataTableEditableMultiselectCell" }
+);
+
+function DataTableEditableMultiselectAsyncCellInner(props, ref) {
+  const { cell, cellProps, cellPosition, children } = props;
+  const { onKeyDown: onCellKeyDown, className, ...restCellProps } = cellProps;
+  getColumnId(cell);
+  const cellValue = getCellValue(cell);
+  const editConfig = cell.column.columnDef.meta?.editConfig;
+  const asyncEditConfig = editConfig?.mode === "multiselect-async" ? editConfig : void 0;
+  const isValidValueType = useMemo(() => {
+    if (cellValue === null || cellValue === void 0) return true;
+    if (Array.isArray(cellValue)) return true;
+    return false;
+  }, [cellValue]);
+  const rowId = cell.row.id;
+  const row = cell.row.original;
+  const context = useMemo(() => ({ row, rowId }), [row, rowId]);
+  const {
+    mode: _mode,
+    lazy,
+    lazyOptions,
+    loadOptions: cellLoader,
+    onChange,
+    cache: cacheProp,
+    ...passthroughProps
+  } = asyncEditConfig ?? {};
+  const loadOptions = useCallback(
+    (searchValue, ...rest) => {
+      if (!cellLoader) return [];
+      if (lazy === "page") {
+        const [pageNumber, pageSize] = rest;
+        return cellLoader(
+          searchValue,
+          pageNumber,
+          pageSize,
+          context
+        );
       }
-      if (e.key === "ArrowDown") {
-        e.preventDefault();
-        e.stopPropagation();
-        listViewRef.current?.focus();
+      if (lazy === "offset") {
+        const [offset, limit] = rest;
+        return cellLoader(
+          searchValue,
+          offset,
+          limit,
+          context
+        );
       }
-    },
-    [commitValue, resetValue]
-  );
-  const handleListViewSelectionChange = useCallback(
-    (items) => {
-      if (isEditing) {
-        const selectedItems2 = items;
-        setDraftValue(selectedItems2.map((item) => String(item.value)));
+      if (lazy === "group") {
+        const [previousGroupKey] = rest;
+        return cellLoader(
+          searchValue,
+          previousGroupKey,
+          context
+        );
       }
+      return cellLoader(
+        searchValue,
+        context
+      );
     },
-    [isEditing]
-  );
-  const filteredItems = useMemo(() => {
-    if (searchValue === "") return options;
-    return options.filter(
-      (item) => item.label.toLowerCase().includes(searchValue.toLowerCase())
-    );
-  }, [options, searchValue]);
-  const selectedItems = useMemo(() => {
-    return options.filter(
-      (item) => typeof item.value === "string" && draftValue.includes(item.value)
-    );
-  }, [options, draftValue]);
-  const handleOnClickOutside = useCallback(() => {
-    cellRef.current?.focus();
-    if (isEditing) {
-      commitValue();
-    }
-  }, [commitValue, isEditing]);
-  const handleOpenAnimationComplete = useCallback(() => {
-    if (isEditing) {
-      searchFieldRef.current?.focus();
-    }
-  }, [isEditing]);
-  const handleSearchFieldChange = useCallback(
-    (e) => {
-      setSearchValue(e.target.value);
-    },
-    []
-  );
-  const cellFocusContextValue = useMemo(
-    () => ({ isCellFocused: tabIndex === 0 && !isEditing }),
-    [tabIndex, isEditing]
+    [cellLoader, context, lazy]
   );
-  if (!isValidValueType) {
+  const cache = cacheProp ?? { enabled: false };
+  const {
+    tabIndex,
+    cellRef,
+    triggerClickRef,
+    handleCellKeyDown,
+    handleMenuKeyDown,
+    handleImplicitClose,
+    handleCellMouseDown,
+    handleCellBlur,
+    handleCellFocus,
+    cellFocusContextValue
+  } = useEditableMenuCell({ cellPosition, onCellKeyDown, ref });
+  const selectedOptions = useMemo(() => {
+    if (!Array.isArray(cellValue)) return [];
+    return cellValue;
+  }, [cellValue]);
+  if (!isValidValueType || !asyncEditConfig) {
     const { cellProps: _cellProps, ...immutableCellProps } = props;
     return /* @__PURE__ */ jsx(DataTableBodyImmutableCell, { ...immutableCellProps });
   }
-  return /* @__PURE__ */ jsxs(
-    Popover,
+  return /* @__PURE__ */ jsx(
+    MultiSelectMenu,
     {
-      open: isEditing,
-      onOpenAnimationComplete: handleOpenAnimationComplete,
-      onClickOutside: handleOnClickOutside,
-      placement: "bottom-start",
-      disableCaret: true,
-      children: [
-        /* @__PURE__ */ jsx(Popover.Trigger, { children: ({
-          ref: popoverRef,
-          onKeyDown: triggerOnKeyDown,
-          ["aria-expanded"]: triggerAriaExpanded,
-          ["aria-haspopup"]: triggerAriaHaspopup,
-          ["aria-details"]: triggerAriaDetails
-        }) => {
-          popoverElement.current = (triggerAriaDetails ? document.querySelector(`#${triggerAriaDetails}`) : null) || null;
-          return /* @__PURE__ */ jsxs(
-            TableBodyCell,
-            {
-              ref: mergeRefs([
-                popoverRef,
-                cellRef
-              ]),
-              tabIndex,
-              type: "data-table",
-              ...restCellProps,
-              className: cellClasses,
-              onMouseDown: handleCellMouseDown,
-              onBlur: handleCellBlur,
-              onFocus: handleCellFocus,
-              "data-cell-pos": formatCellPositionString(cellPosition),
-              "aria-expanded": triggerAriaExpanded,
-              "aria-haspopup": triggerAriaHaspopup,
-              onKeyDown: (e) => handleCellKeyDown(e, triggerOnKeyDown),
-              children: [
-                /* @__PURE__ */ jsxs(CellFocusContext.Provider, { value: cellFocusContextValue, children: [
-                  children,
-                  !isEditing && /* @__PURE__ */ jsx(DataTableEditableCellEditIcon, {})
-                ] }),
-                /* @__PURE__ */ jsx(SrOnly, { children: isEditing ? "Press Enter or Space to select cell values. Press F2 to save. Press Escape to cancel." : "Press Enter or F2 to edit cell value." })
-              ]
-            }
-          );
-        } }),
-        /* @__PURE__ */ jsx(Popover.Content, { children: /* @__PURE__ */ jsxs(Flex, { gap: "4", direction: "column", children: [
-          /* @__PURE__ */ jsx(
-            SearchField,
-            {
-              ref: searchFieldRef,
-              onChange: handleSearchFieldChange,
-              onKeyDown: handleSearchFieldKeyDown,
-              value: searchValue
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            ListView,
-            {
-              selected: selectedItems,
-              onKeyDown: handleListViewKeyDown,
-              items: filteredItems,
-              onSelectionChange: handleListViewSelectionChange,
-              ref: listViewRef,
-              children: ({ items }) => items.map((item) => /* @__PURE__ */ jsx(ListView.Option, { item, children: item.label }, item.label))
-            }
-          )
-        ] }) })
-      ]
+      lazy,
+      loadOptions,
+      lazyOptions,
+      cache,
+      ...passthroughProps,
+      trigger: ({
+        ref: triggerRef,
+        onClick,
+        onKeyDown: menuKeyDown,
+        "aria-controls": ariaControls,
+        "aria-expanded": ariaExpanded,
+        "aria-haspopup": ariaHaspopup,
+        "data-state": dataState
+      }) => {
+        triggerClickRef.current = onClick;
+        const isOpen = ariaExpanded;
+        return /* @__PURE__ */ jsxs(
+          TableBodyCell,
+          {
+            ref: mergeRefs([
+              triggerRef,
+              cellRef
+            ]),
+            tabIndex,
+            type: "data-table",
+            ...restCellProps,
+            className: cx(styles$a["data-table-body-cell-editable"], className),
+            onMouseDown: handleCellMouseDown(onClick),
+            onBlur: handleCellBlur,
+            onFocus: handleCellFocus,
+            "data-cell-pos": formatCellPositionString(cellPosition),
+            "aria-controls": ariaControls,
+            "aria-expanded": ariaExpanded,
+            "aria-haspopup": ariaHaspopup,
+            "data-state": dataState,
+            onKeyDown: (e) => handleCellKeyDown(e, menuKeyDown, isOpen),
+            children: [
+              /* @__PURE__ */ jsxs(CellFocusContext.Provider, { value: cellFocusContextValue, children: [
+                children,
+                !isOpen && /* @__PURE__ */ jsx(DataTableEditableCellEditIcon, {})
+              ] }),
+              /* @__PURE__ */ jsx(SrOnly, { children: isOpen ? "Press Enter or Space to select cell values. Press Escape or F2 to close." : "Press Enter or F2 to edit cell value." })
+            ]
+          }
+        );
+      },
+      label: String(
+        cell.column.columnDef.meta?.columnDef?.headerLabel ?? "Select"
+      ),
+      value: selectedOptions,
+      onSelectedOptionsChange: (selected) => {
+        onChange?.(selected, rowId);
+      },
+      onMenuKeyDown: handleMenuKeyDown,
+      onImplicitClose: handleImplicitClose
     }
   );
 }
-const DataTableEditableMultiselectCell = Object.assign(
-  forwardRef(DataTableEditableMultiselectCellInner),
-  { displayName: "DataTableEditableMultiselectCell" }
+const DataTableEditableMultiselectAsyncCell = Object.assign(
+  forwardRef(DataTableEditableMultiselectAsyncCellInner),
+  { displayName: "DataTableEditableMultiselectAsyncCell" }
 );
 
 function DataTableEditableBooleanCellInner(props, ref) {
   const { cell, cellProps, cellPosition, children } = props;
-  const { onKeyDown: onCellKeyDown } = cellProps;
-  const [isEditing, setIsEditing] = useState(false);
+  const { onKeyDown: onCellKeyDown, className, ...restCellProps } = cellProps;
   const columnId = getColumnId(cell);
   const cellValue = getCellValue(cell);
-  const [initialValue, isValidValueType] = useMemo(() => {
+  const meta = cell.column.columnDef.meta;
+  const editConfig = meta?.editConfig;
+  const booleanEditConfig = editConfig?.mode === "boolean" ? editConfig : void 0;
+  const [, isValidValueType] = useMemo(() => {
     let value;
     let isValid = true;
     if (cellValue === void 0 || cellValue === null) {
@@ -5048,8 +5174,7 @@ function DataTableEditableBooleanCellInner(props, ref) {
     return [value, isValid];
   }, [cellValue, columnId]);
   const options = useMemo(() => {
-    const editConfig = cell.column.columnDef.meta?.editConfig;
-    const config = editConfig?.mode === "boolean" ? editConfig : {
+    const config = booleanEditConfig?.mode === "boolean" ? booleanEditConfig : {
       trueLabel: void 0,
       falseLabel: void 0,
       allowNull: false,
@@ -5059,140 +5184,57 @@ function DataTableEditableBooleanCellInner(props, ref) {
     const typeOptions = typeof typeConfig === "object" && typeConfig.type === "boolean" ? typeConfig.options : void 0;
     const items = [
       {
-        value: true,
+        id: "true",
         label: config.trueLabel ?? typeOptions?.trueLabel ?? "True"
       },
       {
-        value: false,
+        id: "false",
         label: config.falseLabel ?? typeOptions?.falseLabel ?? "False"
       }
     ];
     if (config.allowNull) {
-      items.push({ value: null, label: config.nullLabel ?? "Unset" });
+      items.push({ id: "null", label: config.nullLabel ?? "Unset" });
     }
     return items;
-  }, [
-    cell.column.columnDef.meta?.editConfig,
-    cell.column.columnDef.meta?.columnDef?.type
-  ]);
-  const [tabIndex, setTabIndex] = useState(-1);
-  const { moveFocusToCell } = useDTFocusDispatchContext();
-  const cellRef = useRef(null);
+  }, [booleanEditConfig, cell.column.columnDef.meta?.columnDef?.type]);
   const rowId = cell.row.id;
-  const menuElement = useRef(null);
-  useImperativeHandle(ref, () => ({
-    invoke: beginEditing,
-    focus: () => {
-      cellRef.current?.focus();
-      setTabIndex(0);
-    }
-  }));
-  const beginEditing = useCallback(() => {
-    setIsEditing(true);
-  }, [setIsEditing]);
-  const stopEditing = useCallback(() => {
-    setIsEditing(false);
-  }, [setIsEditing]);
-  const onChange = getCellOnChange(cell);
-  const commitValue = useCallback(
-    (value) => {
-      if (value !== initialValue) {
-        onChange?.(value, rowId);
-      }
-      stopEditing();
-    },
-    [rowId, onChange, initialValue, stopEditing]
-  );
-  const cellClasses = cx(
-    styles$a["data-table-body-cell-editable"],
-    cellProps.className,
-    { [styles$9["data-table-body-cell-editing"]]: isEditing }
-  );
-  const handleCellKeyDown = useCallback(
-    (event, handleMenuKeydown) => {
-      if (isEditing) {
-        if (event.key === "Escape" || event.key === "F2") {
-          stopEditing();
-          return;
-        }
-        handleMenuKeydown?.(event);
-        return;
-      }
-      onCellKeyDown?.(event);
-    },
-    [onCellKeyDown, isEditing, stopEditing]
-  );
-  const handleOutsidePress = useCallback(() => {
-    stopEditing();
-    setTabIndex(-1);
-  }, [stopEditing]);
-  const handleCellMouseDown = useCallback(() => {
-    if (isEditing) {
-      stopEditing();
-      return;
-    }
-    moveFocusToCell(cellPosition);
-    beginEditing();
-  }, [beginEditing, cellPosition, moveFocusToCell, isEditing, stopEditing]);
-  const handleCellBlur = useCallback(
-    (e) => {
-      if (menuElement.current?.contains(e.relatedTarget)) {
-        return;
-      }
-      setTabIndex(-1);
-      stopEditing();
-    },
-    [setTabIndex, menuElement, stopEditing]
-  );
-  const handleCellFocus = useCallback(
-    (event) => {
-      if (event.target !== cellRef.current) {
-        return;
-      }
-      event.preventDefault();
-      setTabIndex(0);
-    },
-    [setTabIndex]
-  );
-  const handleMenuItemClick = useCallback(
-    (value) => {
-      commitValue(value);
-    },
-    [commitValue]
-  );
-  const handleMenuItemKeyDown = useCallback(
-    (event) => {
-      if (event.key === "Escape" || event.key === "F2") {
-        cellRef.current?.focus();
-        stopEditing();
-      }
-    },
-    [stopEditing]
-  );
-  const cellFocusContextValue = useMemo(
-    () => ({ isCellFocused: tabIndex === 0 && !isEditing }),
-    [tabIndex, isEditing]
-  );
-  if (!isValidValueType) {
+  const onChange = booleanEditConfig?.onChange;
+  const hasEditableConfig = !!booleanEditConfig;
+  const {
+    tabIndex,
+    cellRef,
+    triggerClickRef,
+    handleCellKeyDown,
+    handleMenuKeyDown,
+    handleImplicitClose,
+    handleCellMouseDown,
+    handleCellBlur,
+    handleCellFocus,
+    cellFocusContextValue
+  } = useEditableMenuCell({ cellPosition, onCellKeyDown, ref });
+  const selectedOption = useMemo(() => {
+    if (cellValue === void 0) return null;
+    return options.find((o) => o.id === String(cellValue)) ?? null;
+  }, [options, cellValue]);
+  if (!isValidValueType || !hasEditableConfig) {
     const { cellProps: _cellProps, ...immutableCellProps } = props;
     return /* @__PURE__ */ jsx(DataTableBodyImmutableCell, { ...immutableCellProps });
   }
   return /* @__PURE__ */ jsx(
-    Menu,
+    SelectMenuSync,
     {
-      open: isEditing,
-      onOutsidePress: handleOutsidePress,
       trigger: ({
         ref: triggerRef,
-        onKeyDown: menuOnTriggerKeydown,
-        ["aria-controls"]: triggerAriaControls,
-        ["aria-expanded"]: triggerAriaExpanded,
-        ["aria-haspopup"]: triggerAriaHaspopup,
-        ["data-open"]: triggerDataOpen,
-        ["data-state"]: triggerDataState
+        onClick,
+        onKeyDown: menuKeyDown,
+        "aria-controls": ariaControls,
+        "aria-expanded": ariaExpanded,
+        "aria-haspopup": ariaHaspopup,
+        "data-state": dataState
       }) => {
-        menuElement.current = document.querySelector(`#${triggerAriaControls}`) || null;
-        return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+        triggerClickRef.current = onClick;
+        const isOpen = ariaExpanded;
+        return /* @__PURE__ */ jsxs(
           TableBodyCell,
           {
             ref: mergeRefs([
@@ -5201,39 +5243,42 @@ function DataTableEditableBooleanCellInner(props, ref) {
             ]),
             tabIndex,
             type: "data-table",
-            ...cellProps,
-            className: cellClasses,
-            onMouseDown: handleCellMouseDown,
+            ...restCellProps,
+            className: cx(styles$a["data-table-body-cell-editable"], className),
+            onMouseDown: handleCellMouseDown(onClick),
             onBlur: handleCellBlur,
             onFocus: handleCellFocus,
             "data-cell-pos": formatCellPositionString(cellPosition),
-            "aria-controls": triggerAriaControls,
-            "aria-expanded": triggerAriaExpanded,
-            "aria-haspopup": triggerAriaHaspopup,
-            "data-open": triggerDataOpen,
-            "data-state": triggerDataState,
-            onKeyDown: (e) => handleCellKeyDown(e, menuOnTriggerKeydown),
+            "aria-controls": ariaControls,
+            "aria-expanded": ariaExpanded,
+            "aria-haspopup": ariaHaspopup,
+            "data-state": dataState,
+            onKeyDown: (e) => handleCellKeyDown(e, menuKeyDown, isOpen),
             children: [
               /* @__PURE__ */ jsxs(CellFocusContext.Provider, { value: cellFocusContextValue, children: [
                 children,
-                !isEditing && /* @__PURE__ */ jsx(DataTableEditableCellEditIcon, {})
+                !isOpen && /* @__PURE__ */ jsx(DataTableEditableCellEditIcon, {})
               ] }),
-              /* @__PURE__ */ jsx(SrOnly, { children: isEditing ? "Press Enter or Space to select a cell value. Press Escape or F2 to cancel." : "Press Enter or F2 to edit cell value." })
+              /* @__PURE__ */ jsx(SrOnly, { children: isOpen ? "Press Enter or Space to select a cell value. Press Escape or F2 to cancel." : "Press Enter or F2 to edit cell value." })
             ]
           }
-        ) });
-      },
-      children: isEditing && options.map((item) => {
-        return /* @__PURE__ */ jsx(
-          Menu.Item,
-          {
-            label: item.label,
-            onClick: () => handleMenuItemClick(item.value),
-            onKeyDown: handleMenuItemKeyDown
-          },
-          String(item.value)
         );
-      })
+      },
+      label: String(
+        cell.column.columnDef.meta?.columnDef?.headerLabel ?? "Select"
+      ),
+      options,
+      value: selectedOption,
+      onSelectedOptionChange: (option) => {
+        if (!option) return;
+        const id = String(option.id);
+        const value = id === "true" ? true : id === "false" ? false : null;
+        onChange?.(value, rowId);
+      },
+      disableSearch: true,
+      onMenuKeyDown: handleMenuKeyDown,
+      onImplicitClose: handleImplicitClose,
+      popoverWidth: "reference"
     }
   );
 }
@@ -5318,9 +5363,15 @@ function DataTableBodyMutableCell(props) {
     if (editMode === "select") {
       return DataTableEditableSelectCell;
     }
+    if (editMode === "select-async") {
+      return DataTableEditableSelectAsyncCell;
+    }
     if (editMode === "multiselect") {
       return DataTableEditableMultiselectCell;
     }
+    if (editMode === "multiselect-async") {
+      return DataTableEditableMultiselectAsyncCell;
+    }
     if (editMode === "boolean") {
       return DataTableEditableBooleanCell;
     }
@@ -5866,10 +5917,8 @@ function getTanStackColumnDef({
     enableResizing: columnDef.resizable,
     enableSorting: !!columnDef.sortable,
     meta: {
-      editMode: columnDef.editMode,
+      editMode: columnDef.editConfig?.mode,
       editConfig: columnDef.editConfig,
-      onChange: columnDef.onChange,
-      options: columnDef.options,
       columnDef
       // Store original for type narrowing
     },
@@ -6005,7 +6054,7 @@ function DataTableHeaderCellInner(props, forwardedRef) {
           const isDisabled = header.column.columnDef.meta?.disableHeaderAction;
           if (isSelectCell && !isDisabled) {
             event.preventDefault();
-            header.table.toggleAllRowsSelected();
+            header.table.toggleAllPageRowsSelected();
             return;
           }
           if (isExpandCell && !isDisabled) {
@@ -6245,8 +6294,8 @@ function DataTableHeader({ table }) {
 }
 
 const styles$2 = {
-	"table-container": "_table-container_1r348_2",
-	"table-scroll-container": "_table-scroll-container_1r348_56"
+	"table-container": "_table-container_z7onx_2",
+	"table-scroll-container": "_table-scroll-container_z7onx_57"
 };
 
 const TableContainer = forwardRef(
@@ -6338,6 +6387,67 @@ const useAsyncData = (dataOrPromise) => {
   return { data: resolvedData, error, isLoading };
 };
 
+const DEFAULT_CACHE_MAX_SIZE = 15;
+function usePageDataCache(config) {
+  const { loadPageData, cache: cacheConfig } = config;
+  const cacheEnabled = cacheConfig?.enabled !== false;
+  const cacheMaxSize = cacheConfig?.maxSize ?? DEFAULT_CACHE_MAX_SIZE;
+  const pageCacheRef = useRef(/* @__PURE__ */ new Map());
+  const loadPageDataRef = useRef(loadPageData);
+  loadPageDataRef.current = loadPageData;
+  const generationRef = useRef(0);
+  const prevRefreshKeyRef = useRef(config.refreshKey);
+  const prevRefreshCounterRef = useRef(config.refreshCounter);
+  const prevRowsPerPageRef = useRef(config.rowsPerPage);
+  const prevSortingRef = useRef(config.sorting);
+  if (prevRefreshKeyRef.current !== config.refreshKey || prevRefreshCounterRef.current !== config.refreshCounter || prevRowsPerPageRef.current !== config.rowsPerPage || prevSortingRef.current?.id !== config.sorting?.id || prevSortingRef.current?.desc !== config.sorting?.desc) {
+    pageCacheRef.current = /* @__PURE__ */ new Map();
+    generationRef.current += 1;
+    prevRefreshKeyRef.current = config.refreshKey;
+    prevRefreshCounterRef.current = config.refreshCounter;
+    prevRowsPerPageRef.current = config.rowsPerPage;
+    prevSortingRef.current = config.sorting;
+  }
+  const getOrLoad = useCallback(
+    (pageIndex, pageSize, sorting) => {
+      if (cacheEnabled) {
+        const cached = pageCacheRef.current.get(pageIndex);
+        if (cached) return cached;
+      }
+      const loader = loadPageDataRef.current;
+      if (!loader) return [];
+      const result = loader({ pageIndex, pageSize, sorting });
+      if (!cacheEnabled) return result;
+      const requestGeneration = generationRef.current;
+      if (result instanceof Promise) {
+        return result.then((data) => {
+          if (generationRef.current !== requestGeneration) return data;
+          const cache2 = pageCacheRef.current;
+          if (cache2.size >= cacheMaxSize) {
+            const oldest = cache2.keys().next().value;
+            if (oldest != null) cache2.delete(oldest);
+          }
+          cache2.set(pageIndex, data);
+          return data;
+        });
+      }
+      const cache = pageCacheRef.current;
+      if (cache.size >= cacheMaxSize) {
+        const oldest = cache.keys().next().value;
+        if (oldest != null) cache.delete(oldest);
+      }
+      cache.set(pageIndex, result);
+      return result;
+    },
+    [cacheEnabled, cacheMaxSize]
+  );
+  const clearCache = useCallback(() => {
+    pageCacheRef.current = /* @__PURE__ */ new Map();
+    generationRef.current += 1;
+  }, []);
+  return { getOrLoad, clearCache };
+}
+
 function DTHoverProvider({ children }) {
   const [state, dispatch] = useReducer(reducer$1, initialState$1);
   return /* @__PURE__ */ jsx(DTHoverStateContext.Provider, { value: state, children: /* @__PURE__ */ jsx(DTHoverDispatchContext.Provider, { value: dispatch, children }) });
@@ -6611,6 +6721,7 @@ function DTFocusProvider({
   return /* @__PURE__ */ jsx(DTFocusStateContext.Provider, { value: state, children: /* @__PURE__ */ jsx(DTFocusDispatchContext.Provider, { value: dispatch, children }) });
 }
 
+const EMPTY_DATA = [];
 function DataTableInner(props, ref) {
   const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
   const {
@@ -6667,15 +6778,26 @@ function DataTableInner(props, ref) {
     }
   });
   const [refreshCounter, setRefreshCounter] = useState(0);
+  const pageLoader = paginationObject?.loadPageData;
+  const isAsyncPaginated = !!pageLoader && typeof pageLoader === "function";
+  const { getOrLoad, clearCache } = usePageDataCache({
+    loadPageData: pageLoader,
+    cache: paginationObject?.cache,
+    refreshKey,
+    refreshCounter,
+    rowsPerPage,
+    sorting: sorting?.[0]
+  });
   useImperativeHandle(
     ref,
     () => ({
       refresh: () => {
         setRefreshCounter((c) => c + 1);
         setCurrentPageIndex(0);
-      }
+      },
+      clearCache
     }),
-    [setCurrentPageIndex]
+    [setCurrentPageIndex, clearCache]
   );
   const isFirstRender = useRef(true);
   useEffect(() => {
@@ -6687,23 +6809,20 @@ function DataTableInner(props, ref) {
       setCurrentPageIndex(0);
     }
   }, [refreshKey]);
-  const pageLoader = paginationObject?.loadPageData;
-  const isAsyncPaginated = !!pageLoader && typeof pageLoader === "function";
   const dataSource = useMemo(() => {
     if (!isAsyncPaginated) {
       return dataProp;
     }
-    return pageLoader({
-      pageIndex: currentPageIndex ?? 0,
-      pageSize: rowsPerPage
-    });
+    return getOrLoad(currentPageIndex ?? 0, rowsPerPage, sorting?.[0]);
   }, [
     isAsyncPaginated,
     currentPageIndex,
     rowsPerPage,
     dataProp,
     refreshKey,
-    refreshCounter
+    refreshCounter,
+    getOrLoad,
+    sorting
   ]);
   const {
     data: resolvedData,
@@ -6730,29 +6849,7 @@ function DataTableInner(props, ref) {
       }
     }
   });
-  const tableData = useMemo(() => {
-    if (isLoading) return [];
-    if (!isPaginated || isAsyncPaginated) return resolvedData;
-    const maxPageIndex = Math.max(
-      0,
-      Math.ceil(totalItemCount / rowsPerPage) - 1
-    );
-    const clampedPageIndex = Math.max(
-      0,
-      Math.min(currentPageIndex ?? 0, maxPageIndex)
-    );
-    const startIndex = clampedPageIndex * rowsPerPage;
-    const endIndex = startIndex + rowsPerPage;
-    return resolvedData?.slice(startIndex, endIndex) ?? [];
-  }, [
-    isLoading,
-    isPaginated,
-    isAsyncPaginated,
-    resolvedData,
-    totalItemCount,
-    rowsPerPage,
-    currentPageIndex
-  ]);
+  const tableData = isLoading ? EMPTY_DATA : resolvedData;
   const hasRowStatus = useMemo(() => {
     return tableData?.some((row) => {
       const meta = row.meta;
@@ -6879,10 +6976,10 @@ function DataTableInner(props, ref) {
             Checkbox,
             {
               tabIndex: -1,
-              "aria-label": table2.getIsAllRowsSelected() ? "Deselect all rows" : "Select all rows",
-              checked: table2.getIsAllRowsSelected(),
-              indeterminate: table2.getIsSomeRowsSelected(),
-              onChange: table2.getToggleAllRowsSelectedHandler(),
+              "aria-label": table2.getIsAllPageRowsSelected() ? "Deselect all rows" : "Select all rows",
+              checked: table2.getIsAllPageRowsSelected(),
+              indeterminate: table2.getIsSomePageRowsSelected(),
+              onChange: table2.getToggleAllPageRowsSelectedHandler(),
               "data-cell-action": "select"
             }
           ) });
@@ -6922,6 +7019,7 @@ function DataTableInner(props, ref) {
     columns,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
     getExpandedRowModel: getExpandedRowModel(),
     getGroupedRowModel: getGroupedRowModel(),
     getRowId: (row) => row.id.toString(),
@@ -6934,8 +7032,18 @@ function DataTableInner(props, ref) {
       columnPinning,
       rowSelection,
       expanded,
-      sorting
+      sorting,
+      ...isPaginated && {
+        pagination: {
+          pageIndex: currentPageIndex ?? 0,
+          pageSize: rowsPerPage
+        }
+      }
     },
+    manualPagination: !isPaginated || isAsyncPaginated,
+    // Server provides sorted data via loadPageData; disable client-side sort.
+    manualSorting: isAsyncPaginated,
+    autoResetPageIndex: false,
     columnResizeMode: "onChange",
     enableRowSelection: typeof isSelectable === "function" ? (row) => isSelectable(row.original) : isSelectable,
     onRowSelectionChange: (newRowSelection) => {
@@ -6951,11 +7059,14 @@ function DataTableInner(props, ref) {
         return;
       }
       setSorting(newSorting);
+      if (isPaginated) {
+        setCurrentPageIndex(0);
+      }
     }
   });
   const headers = table.getFlatHeaders();
   const headerRowCount = table.getHeaderGroups().length;
-  const bodyRowCount = table.getExpandedRowModel().rows.length;
+  const bodyRowCount = table.getRowModel().rows.length;
   const columnSizing = table.getState().columnSizing;
   const getMaxFooterRows = useCallback((column) => {
     let currentMax = 0;
@@ -7139,4 +7250,4 @@ function DataTableInner(props, ref) {
 const DataTable = forwardRef(DataTableInner);
 
 export { COLUMN_TYPE_DEFAULTS as C, DataTable as D, chipsFormatter as a, booleanFormatter as b, createColumnHelper$1 as c, currencyFormatter as d, dateFormatter as e, dateTimeFormatter as f, getColumnTypeDefaults as g, dateFormatPresets as h, timeFormatter as i, numberFormatter as n, percentFormatter as p, resolveColumnTypeConfig as r, timeFormatPresets as t, yearlessDateFormatter as y };
-//# sourceMappingURL=DataTable-BYOS6icI.js.map
+//# sourceMappingURL=DataTable-DK9xRjnq.js.map