@servicetitan/anvil2 3.0.1 → 3.0.3

package/dist/{DataTable-BDXdCF7J.js → DataTable-CME7SbPc.js}

@@ -1,34 +1,305 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { C as Chip } from './Chip-Da8c7tKP.js';
-import { F as Flex } from './Flex-DOUtHiPi.js';
+import { C as Chip } from './Chip-DBn3KRak.js';
+import { F as Flex } from './Flex-_orhvoxS.js';
 import * as React from 'react';
-import { useRef, useState, useLayoutEffect, createContext, useContext, useCallback, forwardRef, useMemo, useImperativeHandle, useEffect, useId, memo as memo$1, Fragment as Fragment$1, isValidElement } from 'react';
+import { useId, useRef, useCallback, useMemo, createContext, forwardRef, useEffect, useContext, useState, useLayoutEffect, useImperativeHandle, memo as memo$1, Fragment as Fragment$1, isValidElement } from 'react';
 import { c as cx } from './index-De1g9FRV.js';
 import { D as DateTime } from './luxon-wpz4A-OQ.js';
-import { C as Checkbox } from './Checkbox-Ckl8EFpF.js';
+import { C as Checkbox } from './Checkbox-lSwl_u26.js';
 import { B as Button } from './Button-Bnt8XUI7.js';
 import { S as SvgChevronRight } from './chevron_right-BdpsxX7x.js';
 import { S as SvgEdit } from './edit-DQOiktcu.js';
 import { I as Icon } from './Icon-BMMbp40n.js';
 import { S as SrOnly } from './SrOnly-pnf8ajnh.js';
-import { u as useNumberField } from './useNumberField-eMyk7MB8.js';
+import { u as useNumberField } from './useNumberField-D_ic9i2q.js';
 import { u as useMergeRefs, m as mergeRefs } from './useMergeRefs-Dfmtq9cI.js';
-import { a as SelectMenuSync, S as SelectMenu } from './SelectMenuSync-QcjbQtCO.js';
-import { a as MultiSelectMenuSync, M as MultiSelectMenu } from './MultiSelectMenuSync-D7hqugcQ.js';
-import { F as FieldLabel } from './FieldLabel-DZWu5dMp.js';
+import { a as SelectMenuSync, S as SelectMenu } from './SelectMenuSync-s2IzEHug.js';
+import { a as MultiSelectMenuSync, M as MultiSelectMenu } from './MultiSelectMenuSync-DKt2MBno.js';
+import { S as SvgClose } from './close-DZj38AEh.js';
+import { a as useOnClickOutside, r as registerLayer, u as unregisterLayer } from './useOnClickOutside-Zw5vzxSq.js';
+import { c as computePosition, o as offset, v as autoPlacement, d as shift, g as size, a as autoUpdate, s as safeShowPopover, b as safeHidePopover } from './floating-ui.react-dom-CHrYz13o.js';
+import { F as FieldLabel } from './FieldLabel-rHPbiyR3.js';
 import { S as SvgError } from './error-DR_wWdYY.js';
 import { S as SvgWarning } from './warning-c4Wj1rI4.js';
-import { T as Tooltip } from './Tooltip-BlStOXN3.js';
+import { T as Tooltip } from './Tooltip-lBmgi5ZB.js';
 import { flushSync } from 'react-dom';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-CB_zHDbW.js';
-import { P as Pagination } from './Pagination-Bg5Nsdik.js';
+import { P as Pagination } from './Pagination-8JccjxhO.js';
 import { T as ThemeProviderContext } from './ThemeProviderContext-l52GohYT.js';
 import { u as useVirtualizer } from './index-DXeGMe23.js';
 import { u as useOptionallyControlledState } from './useOptionallyControlledState-DbDuos5L.js';
 import { u as usePrefersColorScheme } from './usePrefersColorScheme-_hT7dK7_.js';
 import { S as Spinner } from './Spinner-lPMo68yW.js';
 
-import './DataTable.css';const booleanFormatter = (value, { trueLabel = "True", falseLabel = "False" } = {}) => {
+import './DataTable.css';const surface = "_surface_c2g1l_2";
+const header = "_header_c2g1l_37";
+const title = "_title_c2g1l_56";
+const content = "_content_c2g1l_72";
+const styles$g = {
+	surface: surface,
+	header: header,
+	"header-bottom-border": "_header-bottom-border_c2g1l_46",
+	"header-copy": "_header-copy_c2g1l_49",
+	title: title,
+	"header-actions": "_header-actions_c2g1l_63",
+	"close-button": "_close-button_c2g1l_69",
+	content: content,
+	"content-title-spacing": "_content-title-spacing_c2g1l_82"
+};
+
+const SurfaceContext = createContext(null);
+function useSurfaceContext() {
+  const context = useContext(SurfaceContext);
+  if (!context) {
+    throw new Error(
+      "Surface compound components must be used within a <Surface> component."
+    );
+  }
+  return context;
+}
+function SurfaceTrigger({ children }) {
+  const { open, setReference, surfaceId, triggerId } = useSurfaceContext();
+  return children({
+    ref: setReference,
+    id: triggerId,
+    "aria-controls": surfaceId,
+    "aria-haspopup": "dialog",
+    "aria-expanded": open,
+    "data-state": open ? "open" : "closed"
+  });
+}
+function resolveCssDimension(value, fallback) {
+  if (typeof value === "number") return `${value}px`;
+  if (typeof value === "string") return value;
+  return fallback;
+}
+const SurfaceContent = forwardRef(
+  function SurfaceContent2(props, ref) {
+    const {
+      children,
+      onClose,
+      onCancel,
+      title,
+      headerContent,
+      initialFocusRef,
+      width,
+      maxHeight,
+      closeButtonLabel = "Close surface",
+      className,
+      style,
+      onKeyDown,
+      ...rest
+    } = props;
+    const { open, referenceElement, surfaceId } = useSurfaceContext();
+    const localRef = useRef(null);
+    const surfaceRef = useMergeRefs([localRef, ref]);
+    const layerId = `${surfaceId}-layer`;
+    const titleId = `${surfaceId}-title`;
+    const resolvedWidth = resolveCssDimension(width, "325px");
+    const resolvedMaxHeight = resolveCssDimension(maxHeight, "450px");
+    const handleCancel = onCancel ?? onClose;
+    useOnClickOutside({
+      targets: [
+        localRef.current ?? void 0,
+        referenceElement.current ?? void 0
+      ],
+      onClickOutside: () => {
+        onClose();
+      },
+      disable: !open,
+      layerId
+    });
+    const updatePosition = useCallback(async () => {
+      if (!localRef.current || !referenceElement.current) return;
+      const position = await computePosition(
+        referenceElement.current,
+        localRef.current,
+        {
+          placement: "bottom-start",
+          middleware: [
+            offset(8),
+            autoPlacement({
+              allowedPlacements: [
+                "bottom-start",
+                "bottom-end",
+                "top-start",
+                "top-end"
+              ],
+              padding: 8
+            }),
+            shift({ padding: 8 }),
+            size({
+              padding: 8,
+              apply({ availableHeight, availableWidth, elements }) {
+                Object.assign(elements.floating.style, {
+                  width: resolvedWidth,
+                  maxWidth: `${Math.max(0, availableWidth)}px`,
+                  maxHeight: `min(${resolvedMaxHeight}, ${Math.max(0, availableHeight)}px)`
+                });
+              }
+            })
+          ]
+        }
+      );
+      localRef.current.style.left = `${position.x}px`;
+      localRef.current.style.top = `${position.y}px`;
+    }, [referenceElement, resolvedMaxHeight, resolvedWidth]);
+    useEffect(() => {
+      if (!open || !localRef.current || !referenceElement.current) return;
+      return autoUpdate(referenceElement.current, localRef.current, () => {
+        void updatePosition();
+      });
+    }, [open, referenceElement, updatePosition]);
+    useEffect(() => {
+      if (!localRef.current) return;
+      if (open) {
+        safeShowPopover(localRef.current);
+        void updatePosition();
+        return;
+      }
+      safeHidePopover(localRef.current);
+    }, [open, updatePosition]);
+    useEffect(() => {
+      if (!open) return;
+      registerLayer(layerId);
+      return () => {
+        unregisterLayer(layerId);
+      };
+    }, [layerId, open]);
+    useEffect(() => {
+      if (!open || !initialFocusRef?.current) return;
+      const focusHandle = window.requestAnimationFrame(() => {
+        initialFocusRef.current?.focus();
+      });
+      return () => {
+        window.cancelAnimationFrame(focusHandle);
+      };
+    }, [initialFocusRef, open]);
+    useEffect(() => {
+      const surfaceElement = localRef.current;
+      if (!surfaceElement) return;
+      const handleSurfaceKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented) return;
+        if (event.key === "Escape") {
+          event.preventDefault();
+          event.stopPropagation();
+          handleCancel();
+        }
+      };
+      surfaceElement.addEventListener("keydown", handleSurfaceKeyDown);
+      return () => {
+        surfaceElement.removeEventListener("keydown", handleSurfaceKeyDown);
+      };
+    }, [handleCancel, onKeyDown]);
+    const defaultLabelProps = !("aria-label" in rest) && !("aria-labelledby" in rest) && title ? { "aria-labelledby": titleId } : {};
+    const dialogProps = {
+      role: "dialog",
+      "aria-modal": false
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        ...defaultLabelProps,
+        id: surfaceId,
+        ref: surfaceRef,
+        popover: "manual",
+        ...dialogProps,
+        tabIndex: -1,
+        className: cx(className, styles$g["surface"]),
+        style: {
+          ...style,
+          width: resolvedWidth,
+          maxHeight: resolvedMaxHeight
+        },
+        "data-anv": "surface-content",
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cx(styles$g["header"], {
+                [styles$g["header-bottom-border"]]: title
+              }),
+              children: [
+                /* @__PURE__ */ jsx("div", { className: styles$g["header-copy"], children: title ? /* @__PURE__ */ jsx("div", { id: titleId, className: styles$g["title"], children: title }) : null }),
+                /* @__PURE__ */ jsxs("div", { className: styles$g["header-actions"], children: [
+                  headerContent,
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      appearance: "ghost",
+                      "aria-label": closeButtonLabel,
+                      className: styles$g["close-button"],
+                      "data-anv": "surface-close-button",
+                      icon: SvgClose,
+                      onClick: onClose,
+                      size: "small",
+                      type: "button"
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cx(styles$g["content"], {
+                [styles$g["content-title-spacing"]]: title
+              }),
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+SurfaceContent.displayName = "SurfaceContent";
+const Surface = Object.assign(
+  function Surface2({ children, open, id }) {
+    const generatedId = useId();
+    const cleanId = generatedId.replace(/:/g, "");
+    const surfaceId = id ?? `surface-${cleanId}`;
+    const triggerId = `${surfaceId}-trigger`;
+    const referenceElement = useRef(null);
+    const setReference = useCallback((node) => {
+      referenceElement.current = node;
+    }, []);
+    const value = useMemo(
+      () => ({
+        open,
+        surfaceId,
+        triggerId,
+        referenceElement,
+        setReference
+      }),
+      [open, setReference, surfaceId, triggerId]
+    );
+    return /* @__PURE__ */ jsx(SurfaceContext.Provider, { value, children });
+  },
+  {
+    /**
+     * SurfaceTrigger component for wiring a trigger element to Surface content.
+     *
+     * Features:
+     * - Provides ARIA attributes and open state for the trigger.
+     * - Registers the trigger as the positioning reference.
+     */
+    Trigger: SurfaceTrigger,
+    /**
+     * SurfaceContent component for rendering positioned, non-modal content as a manual popover.
+     *
+     * Features:
+     * - Positions content relative to the Surface trigger.
+     * - Supports accessible labels, close behavior, and viewport-aware sizing.
+     */
+    Content: SurfaceContent
+  }
+);
+
+const booleanFormatter = (value, { trueLabel = "True", falseLabel = "False" } = {}) => {
   if (value == null) {
     return null;
   }
@@ -36,17 +307,19 @@ import './DataTable.css';const booleanFormatter = (value, { trueLabel = "True",
 };
 
 const styles$f = {
-	"table-header-cell": "_table-header-cell_ofjhm_4",
-	"table-body-cell": "_table-body-cell_ofjhm_5",
-	"table-footer-cell": "_table-footer-cell_ofjhm_6",
-	"last-pinned-left-column": "_last-pinned-left-column_ofjhm_31",
-	"first-pinned-right-column": "_first-pinned-right-column_ofjhm_31",
-	"empty-cell": "_empty-cell_ofjhm_56",
-	"table-cell-internal-select": "_table-cell-internal-select_ofjhm_73",
-	"table-cell-internal-expand": "_table-cell-internal-expand_ofjhm_77",
-	"table-header-cell-sortable": "_table-header-cell-sortable_ofjhm_82",
-	"table-header-cell-interactive": "_table-header-cell-interactive_ofjhm_83",
-	"table-header-cell-group": "_table-header-cell-group_ofjhm_87"
+	"table-header-cell": "_table-header-cell_w7b9a_4",
+	"table-body-cell": "_table-body-cell_w7b9a_5",
+	"table-footer-cell": "_table-footer-cell_w7b9a_6",
+	"last-pinned-left-column": "_last-pinned-left-column_w7b9a_31",
+	"first-pinned-right-column": "_first-pinned-right-column_w7b9a_31",
+	"first-pinned-left-column": "_first-pinned-left-column_w7b9a_52",
+	"last-pinned-right-column": "_last-pinned-right-column_w7b9a_57",
+	"empty-cell": "_empty-cell_w7b9a_66",
+	"table-cell-internal-select": "_table-cell-internal-select_w7b9a_83",
+	"table-cell-internal-expand": "_table-cell-internal-expand_w7b9a_87",
+	"table-header-cell-sortable": "_table-header-cell-sortable_w7b9a_92",
+	"table-header-cell-interactive": "_table-header-cell-interactive_w7b9a_93",
+	"table-header-cell-group": "_table-header-cell-group_w7b9a_97"
 };
 
 const TableEmptyCellContent = () => {
@@ -68,8 +341,10 @@ const TruncateChips = ({
   const hiddenChips = useRef([]);
   const plusChipRef = useRef(null);
   const [plusChipWidth, setPlusChipWidth] = useState(0);
+  const overflowChipSize = items[0]?.size;
   useLayoutEffect(() => {
     if (!chipsContainerRef.current) return;
+    hiddenChips.current = [];
     let totalHiddenCount = 0;
     const observer = new IntersectionObserver(
       (entries) => {
@@ -110,14 +385,29 @@ const TruncateChips = ({
       observer.disconnect();
     };
   }, [items]);
+  useLayoutEffect(() => {
+    const measurePlusChipWidth = () => {
+      const nextPlusChipWidth = plusChipRef.current?.getBoundingClientRect().width ?? 0;
+      setPlusChipWidth(
+        (currentPlusChipWidth) => currentPlusChipWidth === nextPlusChipWidth ? currentPlusChipWidth : nextPlusChipWidth
+      );
+    };
+    measurePlusChipWidth();
+    if (!plusChipRef.current) return;
+    const observer = new ResizeObserver(() => {
+      measurePlusChipWidth();
+    });
+    observer.observe(plusChipRef.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, [hiddenCount, overflowChipSize]);
   useLayoutEffect(() => {
     if (!containerRef.current) return;
     const observer = new ResizeObserver((entries) => {
       const entry = entries[entries.length - 1];
       if (entry) {
         if (hiddenCount > 0 && containerRef.current) {
-          const plusChipRect = plusChipRef.current?.getBoundingClientRect();
-          setPlusChipWidth(plusChipRect?.width ?? 0);
           const containerRect = containerRef.current.getBoundingClientRect();
           const chipRect = hiddenChips.current[hiddenChips.current.length - 1].rect;
           const fitsHorizontally = chipRect.width <= containerRect.width && chipRect.left >= containerRect.left && chipRect.right <= containerRect.right;
@@ -146,12 +436,52 @@ const TruncateChips = ({
       ...rest,
       children: [
         /* @__PURE__ */ jsx("div", { ref: chipsContainerRef, style: { display: "contents" }, children: items.map((chip, index) => /* @__PURE__ */ jsx(Chip, { ...chip, style: { visibility: "hidden" } }, index)) }),
-        hiddenCount > 0 && /* @__PURE__ */ jsx(Chip, { label: `+${hiddenCount}`, ref: plusChipRef })
+        hiddenCount > 0 && /* @__PURE__ */ jsx(
+          Chip,
+          {
+            label: `+${hiddenCount}`,
+            ref: plusChipRef,
+            size: overflowChipSize
+          }
+        )
       ]
     }
   );
 };
 
+const getChipPropsWithDefaultSize = (chipProps) => {
+  if (chipProps.size !== void 0) {
+    return chipProps;
+  }
+  if (chipProps.onClick !== void 0 && chipProps.onClose !== void 0) {
+    return {
+      ...chipProps,
+      size: "medium"
+    };
+  }
+  if (chipProps.onClick !== void 0) {
+    return {
+      ...chipProps,
+      onClick: chipProps.onClick,
+      onClose: void 0,
+      size: "small"
+    };
+  }
+  if (chipProps.onClose !== void 0) {
+    return {
+      ...chipProps,
+      onClick: void 0,
+      onClose: chipProps.onClose,
+      size: "small"
+    };
+  }
+  return {
+    ...chipProps,
+    onClick: void 0,
+    onClose: void 0,
+    size: "small"
+  };
+};
 const chipsFormatter = (value, { truncateChips } = { truncateChips: false }) => {
   if (!value) return /* @__PURE__ */ jsx(TableEmptyCellContent, {});
   if (Array.isArray(value)) {
@@ -159,16 +489,16 @@ const chipsFormatter = (value, { truncateChips } = { truncateChips: false }) =>
       return /* @__PURE__ */ jsx(TableEmptyCellContent, {});
     }
     const isStringArray = value.every((v) => typeof v === "string");
-    const items = isStringArray ? value.map((v) => ({ label: v })) : value;
+    const items = isStringArray ? value.map((v) => getChipPropsWithDefaultSize({ label: v })) : value.map(getChipPropsWithDefaultSize);
     if (truncateChips) {
       return /* @__PURE__ */ jsx(TruncateChips, { items });
     }
     return /* @__PURE__ */ jsx(Flex, { direction: "row", gap: "2", wrap: "wrap", children: items.map((item, index) => /* @__PURE__ */ jsx(Chip, { ...item }, `${item.label}-${index}`)) });
   }
   if (typeof value === "string") {
-    return /* @__PURE__ */ jsx(Chip, { label: value });
+    return /* @__PURE__ */ jsx(Chip, { label: value, size: "small" });
   }
-  return /* @__PURE__ */ jsx(Chip, { ...value });
+  return /* @__PURE__ */ jsx(Chip, { ...getChipPropsWithDefaultSize(value) });
 };
 
 const currencyFormatter = (value, options = {}) => {
@@ -647,15 +977,19 @@ function getColumnTypeDefaults(type) {
 }
 
 function createColumnHelper$1() {
-  return function createColumn(id, column) {
+  function createColumn(id, column) {
     if (typeof id === "object" && "group" in id) {
       return {
         id: id.group,
         ...column
       };
     }
-    return { id, ...column };
-  };
+    return {
+      id,
+      ...column
+    };
+  }
+  return createColumn;
 }
 
 /**
@@ -4014,6 +4348,7 @@ function TableBody({ type, children, ...rest }) {
     Element,
     {
       ...rest,
+      "data-anv": "table-body",
       className: classes,
       role: type === "simple" ? void 0 : "rowgroup",
       children
@@ -4023,32 +4358,30 @@ function TableBody({ type, children, ...rest }) {
 
 const getCommonPinningClasses = (column) => {
   const isPinned = column.getIsPinned();
-  const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
-  const isFirstRightPinnedColumn = isPinned === "right" && column.getIsFirstColumn("right");
-  if (isLastLeftPinnedColumn) {
-    return styles$f["last-pinned-left-column"];
-  }
-  if (isFirstRightPinnedColumn) {
-    return styles$f["first-pinned-right-column"];
-  }
+  if (!isPinned) return void 0;
+  return cx({
+    [styles$f["first-pinned-left-column"]]: isPinned === "left" && column.getIsFirstColumn("left"),
+    [styles$f["last-pinned-left-column"]]: isPinned === "left" && column.getIsLastColumn("left"),
+    [styles$f["first-pinned-right-column"]]: isPinned === "right" && column.getIsFirstColumn("right"),
+    [styles$f["last-pinned-right-column"]]: isPinned === "right" && column.getIsLastColumn("right")
+  });
 };
 
 const styles$a = {
-	"data-table-body-cell-input": "_data-table-body-cell-input_i8xxd_4",
-	"data-table-body-cell-editable": "_data-table-body-cell-editable_i8xxd_39",
-	"data-table-body-cell-edit-icon-container": "_data-table-body-cell-edit-icon-container_i8xxd_39"
+	"data-table-body-cell-input": "_data-table-body-cell-input_1nano_4",
+	"data-table-body-cell-editable": "_data-table-body-cell-editable_1nano_39",
+	"data-table-body-cell-edit-icon-container": "_data-table-body-cell-edit-icon-container_1nano_39"
 };
 
 const DataTableEditableCellEditIcon = () => {
-  return /* @__PURE__ */ jsx("span", { className: styles$a["data-table-body-cell-edit-icon-container"], children: /* @__PURE__ */ jsx(
-    Icon,
+  return /* @__PURE__ */ jsx(
+    "span",
     {
-      svg: SvgEdit,
-      size: "small",
-      color: "subtle",
-      "aria-label": "Edit cell value"
+      className: styles$a["data-table-body-cell-edit-icon-container"],
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(Icon, { svg: SvgEdit, size: "small", color: "subtle" })
     }
-  ) });
+  );
 };
 
 const TableBodyCell = forwardRef(({ type, children, className, isExpandCell, isSelectCell, ...rest }, ref) => {
@@ -4072,19 +4405,19 @@ const TableBodyCell = forwardRef(({ type, children, className, isExpandCell, isS
 TableBodyCell.displayName = "TableBodyCell";
 
 const styles$9 = {
-	"data-table-body-cell": "_data-table-body-cell_12iyq_4",
-	"data-table-body-cell-input": "_data-table-body-cell-input_12iyq_5",
-	"table-body-cell": "_table-body-cell_12iyq_10",
-	"table-header-cell": "_table-header-cell_12iyq_11",
-	"table-footer-cell": "_table-footer-cell_12iyq_12",
-	"data-table-cell-content": "_data-table-cell-content_12iyq_24",
-	"data-table-body-cell-editing": "_data-table-body-cell-editing_12iyq_47",
-	"data-table-header-cell": "_data-table-header-cell_12iyq_48",
-	"data-table-footer-cell": "_data-table-footer-cell_12iyq_51",
-	"data-table-body-cell-error": "_data-table-body-cell-error_12iyq_101",
-	"data-table-body-cell-warning": "_data-table-body-cell-warning_12iyq_116",
-	"cell-error-icon": "_cell-error-icon_12iyq_126",
-	"cell-warning-icon": "_cell-warning-icon_12iyq_131"
+	"data-table-body-cell": "_data-table-body-cell_1fjsi_4",
+	"data-table-body-cell-input": "_data-table-body-cell-input_1fjsi_5",
+	"table-body-cell": "_table-body-cell_1fjsi_10",
+	"table-header-cell": "_table-header-cell_1fjsi_11",
+	"table-footer-cell": "_table-footer-cell_1fjsi_12",
+	"data-table-cell-content": "_data-table-cell-content_1fjsi_24",
+	"data-table-body-cell-editing": "_data-table-body-cell-editing_1fjsi_49",
+	"data-table-header-cell": "_data-table-header-cell_1fjsi_50",
+	"data-table-footer-cell": "_data-table-footer-cell_1fjsi_53",
+	"data-table-body-cell-error": "_data-table-body-cell-error_1fjsi_103",
+	"data-table-body-cell-warning": "_data-table-body-cell-warning_1fjsi_118",
+	"cell-error-icon": "_cell-error-icon_1fjsi_128",
+	"cell-warning-icon": "_cell-warning-icon_1fjsi_133"
 };
 
 function formatCellPositionString(cellPosition) {
@@ -5352,6 +5685,496 @@ const DataTableEditableBooleanCell = Object.assign(
   { displayName: "DataTableEditableBooleanCell" }
 );
 
+function isCustomDraftValueUpdater(nextValue) {
+  return typeof nextValue === "function";
+}
+function isCustomFieldValueUpdater(nextValue) {
+  return typeof nextValue === "function";
+}
+function deriveChangedFields(initialValue, draftValue) {
+  const orderedKeys = Array.from(
+    /* @__PURE__ */ new Set([...Object.keys(initialValue), ...Object.keys(draftValue)])
+  );
+  return orderedKeys.filter(
+    (field) => !Object.is(initialValue[field], draftValue[field])
+  );
+}
+function deriveValidation(validateDraft, draftValue, rowId) {
+  return validateDraft?.(draftValue, rowId) ?? {};
+}
+function hasValidationErrors(validation) {
+  if (validation.formError) {
+    return true;
+  }
+  return Object.values(validation.fieldErrors ?? {}).some(
+    (fieldError) => fieldError != null
+  );
+}
+function useCustomEditControllerState({
+  row,
+  columnId,
+  editConfig,
+  onCloseEditor
+}) {
+  const rowId = String(row.id);
+  const initialValueRef = useRef(row[columnId]);
+  const initialValue = initialValueRef.current;
+  const [draftValue, setDraftValueState] = useState(initialValue);
+  const draftValueRef = useRef(draftValue);
+  const initialFocusRef = useRef(null);
+  const getValidation = useCallback(
+    (nextDraftValue) => deriveValidation(editConfig.validateDraft, nextDraftValue, rowId),
+    [editConfig.validateDraft, rowId]
+  );
+  const setDraftValue = useCallback(
+    (nextValue) => {
+      let resolvedValue = draftValueRef.current;
+      setDraftValueState((previousValue) => {
+        resolvedValue = isCustomDraftValueUpdater(nextValue) ? nextValue(previousValue) : nextValue;
+        draftValueRef.current = resolvedValue;
+        return resolvedValue;
+      });
+      editConfig.onDraftUpdate?.(resolvedValue, rowId);
+      return resolvedValue;
+    },
+    [editConfig, rowId]
+  );
+  const setDraftField = useCallback(
+    (field, nextValue) => {
+      return setDraftValue((previousValue) => ({
+        ...previousValue,
+        [field]: isCustomFieldValueUpdater(nextValue) ? nextValue(previousValue[field], previousValue) : nextValue
+      }));
+    },
+    [setDraftValue]
+  );
+  const performClose = useCallback(
+    (reason, action) => {
+      const currentDraftValue = draftValueRef.current;
+      const validation2 = getValidation(currentDraftValue);
+      const changedFields2 = deriveChangedFields(
+        initialValue,
+        currentDraftValue
+      );
+      const request = {
+        reason,
+        draftValue: currentDraftValue,
+        initialValue,
+        isDirty: changedFields2.length > 0,
+        validation: validation2
+      };
+      if (action === "submit" && editConfig.blockOnValidationError === true && hasValidationErrors(validation2)) {
+        return false;
+      }
+      if (editConfig.onRequestClose?.(request) === false) {
+        return false;
+      }
+      if (action === "submit") {
+        editConfig.onCommit(currentDraftValue, rowId);
+      } else {
+        draftValueRef.current = initialValue;
+        setDraftValueState(initialValue);
+        editConfig.onDraftUpdate?.(initialValue, rowId);
+      }
+      onCloseEditor?.();
+      return true;
+    },
+    [editConfig, getValidation, initialValue, onCloseEditor, rowId]
+  );
+  const requestClose = useCallback(
+    (reason) => {
+      void performClose(reason, reason === "escape" ? "discard" : "submit");
+    },
+    [performClose]
+  );
+  const submit = useCallback(() => {
+    void performClose("programmatic", "submit");
+  }, [performClose]);
+  const discard = useCallback(() => {
+    void performClose("programmatic", "discard");
+  }, [performClose]);
+  const setInitialFocus = useCallback((focus) => {
+    initialFocusRef.current = focus;
+  }, []);
+  const handleSubmit = useCallback(
+    (event) => {
+      event?.preventDefault?.();
+      requestClose("submit");
+    },
+    [requestClose]
+  );
+  const changedFields = useMemo(
+    () => deriveChangedFields(initialValue, draftValue),
+    [draftValue, initialValue]
+  );
+  const validation = useMemo(
+    () => getValidation(draftValue),
+    [draftValue, getValidation]
+  );
+  const controller = useMemo(
+    () => ({
+      draftValue,
+      initialValue,
+      isDirty: changedFields.length > 0,
+      changedFields,
+      validation,
+      setDraftValue,
+      setDraftField,
+      submit,
+      discard,
+      requestClose,
+      setInitialFocus,
+      handleSubmit
+    }),
+    [
+      changedFields,
+      discard,
+      draftValue,
+      handleSubmit,
+      initialValue,
+      requestClose,
+      setDraftValue,
+      setInitialFocus,
+      setDraftField,
+      submit,
+      validation
+    ]
+  );
+  const runInitialFocus = useCallback(() => {
+    initialFocusRef.current?.();
+  }, []);
+  return {
+    controller,
+    runInitialFocus
+  };
+}
+
+const NON_SUBMIT_INPUT_TYPES = /* @__PURE__ */ new Set([
+  "button",
+  "submit",
+  "reset",
+  "checkbox",
+  "radio",
+  "file"
+]);
+function isNativeInteractiveElement(target) {
+  const interactiveSelector = [
+    "button",
+    "a[href]",
+    "summary",
+    "select",
+    'input[type="button"]',
+    'input[type="submit"]',
+    'input[type="reset"]',
+    'input[type="checkbox"]',
+    'input[type="radio"]',
+    'input[type="file"]'
+  ].join(", ");
+  return Boolean(target.closest(interactiveSelector));
+}
+function isEnterOwnedByTextEntry(target) {
+  if (target.isContentEditable || target.closest('[contenteditable="true"]')) {
+    return false;
+  }
+  if (target instanceof HTMLTextAreaElement || target.closest("textarea")) {
+    return false;
+  }
+  if (target.closest("select")) {
+    return false;
+  }
+  if (target instanceof HTMLInputElement) {
+    return !NON_SUBMIT_INPUT_TYPES.has(target.type);
+  }
+  const input = target.closest("input");
+  if (input instanceof HTMLInputElement) {
+    return !NON_SUBMIT_INPUT_TYPES.has(input.type);
+  }
+  return Boolean(
+    target.closest(
+      'input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"])'
+    )
+  );
+}
+function findSubmitForm(target) {
+  return target.closest("form");
+}
+function getCustomEditorSubmitForm(target) {
+  if (!(target instanceof HTMLElement)) {
+    return null;
+  }
+  const interactiveRole = target.closest(
+    '[role="button"], [role="link"], [role="menuitem"], [role="option"], [role="switch"], [role="checkbox"], [role="radio"], [role="tab"], [role="combobox"], [role="listbox"]'
+  );
+  if (interactiveRole || isNativeInteractiveElement(target)) {
+    return null;
+  }
+  if (!isEnterOwnedByTextEntry(target)) {
+    return null;
+  }
+  return findSubmitForm(target);
+}
+function CustomEditorContent({
+  cell,
+  columnId,
+  editConfig,
+  onControllerChange,
+  onRequestCloseEditor
+}) {
+  const row = cell.row.original;
+  const rowId = String(cell.row.id);
+  const { controller, runInitialFocus } = useCustomEditControllerState({
+    row,
+    columnId,
+    editConfig,
+    onCloseEditor: onRequestCloseEditor
+  });
+  useEffect(() => {
+    onControllerChange(controller);
+    return () => {
+      onControllerChange(null);
+    };
+  }, [controller, onControllerChange]);
+  useEffect(() => {
+    const focusHandle = window.requestAnimationFrame(() => {
+      runInitialFocus();
+    });
+    return () => {
+      window.cancelAnimationFrame(focusHandle);
+    };
+  }, [runInitialFocus]);
+  const renderContext = {
+    row,
+    rowId,
+    value: row[columnId],
+    controller
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: editConfig.renderEditor(renderContext) });
+}
+function DataTableEditableCustomCellInner(props, ref) {
+  const { cell, cellProps, cellPosition, children } = props;
+  const { onKeyDown: onCellKeyDown } = cellProps;
+  const cellRef = useRef(null);
+  const customEditControllerRef = useRef(null);
+  const closeReasonRef = useRef(
+    "outside-click"
+  );
+  const [isOpen, setIsOpen] = useState(false);
+  const [tabIndex, setTabIndex] = useState(-1);
+  const { moveFocusToCell } = useDTFocusDispatchContext();
+  const columnId = getColumnId(cell);
+  const cellValue = getCellValue(cell);
+  const meta = cell.column.columnDef.meta;
+  const editConfig = meta?.editConfig;
+  const customEditConfig = editConfig?.mode === "custom" ? editConfig : void 0;
+  const isValidValueType = useMemo(() => {
+    if (cellValue !== null && typeof cellValue === "object" && !Array.isArray(cellValue)) {
+      return true;
+    }
+    logWarningForInvalidCellValueType({
+      columnId: String(columnId),
+      editMode: "custom",
+      expectedType: "non-null object",
+      receivedType: cellValue === null ? "null" : Array.isArray(cellValue) ? "array" : typeof cellValue
+    });
+    return false;
+  }, [cellValue, columnId]);
+  const surfaceId = useMemo(
+    () => `data-table-custom-surface-${String(cell.id).replace(/[^a-zA-Z0-9_-]/g, "-")}`,
+    [cell.id]
+  );
+  const cellInstructionsId = `${surfaceId}-cell-instructions`;
+  const surfaceInstructionsId = `${surfaceId}-surface-instructions`;
+  const defaultSurfaceTitle = String(
+    cell.column.columnDef.meta?.columnDef?.header?.label ?? cell.column.columnDef.meta?.columnDef?.headerLabel ?? columnId
+  );
+  const surfaceTitle = customEditConfig?.surface?.title ?? null;
+  const accessibleSurfaceLabel = `Edit ${defaultSurfaceTitle}`;
+  const closeButtonLabel = customEditConfig?.surface?.closeButtonLabel ?? `Commit changes and close ${defaultSurfaceTitle} custom editable cell`;
+  const beginEditing = useCallback(() => {
+    setIsOpen(true);
+    setTabIndex(0);
+    moveFocusToCell(cellPosition);
+  }, [cellPosition, moveFocusToCell]);
+  const restoreFocusToOriginCell = useCallback(() => {
+    window.requestAnimationFrame(() => {
+      moveFocusToCell(cellPosition);
+      cellRef.current?.focus();
+      setTabIndex(0);
+    });
+  }, [cellPosition, moveFocusToCell]);
+  const closeSurface = useCallback(() => {
+    customEditControllerRef.current = null;
+    setIsOpen(false);
+    restoreFocusToOriginCell();
+  }, [restoreFocusToOriginCell]);
+  const handleSurfaceClose = useCallback(() => {
+    const controller = customEditControllerRef.current;
+    const reason = closeReasonRef.current;
+    closeReasonRef.current = "outside-click";
+    if (!controller) {
+      return;
+    }
+    controller.requestClose(reason);
+  }, []);
+  const handleSurfaceCancel = useCallback(() => {
+    customEditControllerRef.current?.requestClose("escape");
+  }, []);
+  const handleSurfaceClickCapture = useCallback(
+    (event) => {
+      if (event.target?.closest(
+        '[data-anv="surface-close-button"]'
+      )) {
+        closeReasonRef.current = "close-button";
+      }
+    },
+    []
+  );
+  const handleSurfaceKeyDown = useCallback(
+    (event) => {
+      customEditConfig?.surface?.onKeyDown?.(event);
+      if (event.defaultPrevented) {
+        return;
+      }
+      const submitForm = getCustomEditorSubmitForm(event.target);
+      if (event.key !== "Enter" || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey || "isComposing" in event && event.isComposing || !submitForm) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      submitForm.requestSubmit();
+    },
+    [customEditConfig]
+  );
+  useImperativeHandle(
+    ref,
+    () => ({
+      invoke: beginEditing,
+      focus: () => {
+        cellRef.current?.focus();
+        setTabIndex(0);
+      }
+    }),
+    [beginEditing]
+  );
+  const classes = cx(
+    styles$a["data-table-body-cell-editable"],
+    cellProps.className,
+    {
+      [styles$9["data-table-body-cell-editing"]]: isOpen
+    }
+  );
+  const handleCellKeyDown = useCallback(
+    (event) => {
+      if (isOpen) {
+        return;
+      }
+      onCellKeyDown?.(event);
+    },
+    [isOpen, onCellKeyDown]
+  );
+  const handleCellFocus = useCallback(
+    (event) => {
+      if (event.target !== cellRef.current) {
+        return;
+      }
+      event.preventDefault();
+      setTabIndex(0);
+    },
+    []
+  );
+  const handleCellBlur = useCallback(
+    (event) => {
+      const nextTarget = event.relatedTarget;
+      const surfaceElement = document.getElementById(surfaceId);
+      if (nextTarget && cellRef.current?.contains(nextTarget) || nextTarget && surfaceElement?.contains(nextTarget)) {
+        return;
+      }
+      setTabIndex(-1);
+    },
+    [surfaceId]
+  );
+  const handleCellPointerDown = useCallback(
+    (event) => {
+      if (event.pointerType === "mouse" && event.button !== 0) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      beginEditing();
+    },
+    [beginEditing]
+  );
+  if (!isValidValueType || !customEditConfig) {
+    const { cellProps: _cellProps, ...immutableCellProps } = props;
+    return /* @__PURE__ */ jsx(DataTableBodyImmutableCell, { ...immutableCellProps });
+  }
+  return /* @__PURE__ */ jsxs(Surface, { id: surfaceId, open: isOpen, children: [
+    /* @__PURE__ */ jsx(Surface.Trigger, { children: (triggerProps) => /* @__PURE__ */ jsxs(
+      TableBodyCell,
+      {
+        ref: mergeRefs([
+          triggerProps.ref,
+          cellRef
+        ]),
+        id: triggerProps.id,
+        type: "data-table",
+        className: classes,
+        style: cellProps.style,
+        tabIndex,
+        onFocus: handleCellFocus,
+        onBlur: handleCellBlur,
+        onPointerDown: handleCellPointerDown,
+        onKeyDown: handleCellKeyDown,
+        "data-cell-pos": formatCellPositionString(cellPosition),
+        "aria-controls": triggerProps["aria-controls"],
+        "aria-expanded": triggerProps["aria-expanded"],
+        "aria-haspopup": triggerProps["aria-haspopup"],
+        "aria-describedby": cellInstructionsId,
+        "data-state": triggerProps["data-state"],
+        children: [
+          children,
+          !isOpen && /* @__PURE__ */ jsx(DataTableEditableCellEditIcon, {}),
+          /* @__PURE__ */ jsx(SrOnly, { id: cellInstructionsId, children: isOpen ? "Custom editable cell editor is open. Press Escape to discard changes. Click outside, close the editor, or use editor controls to save current changes." : "Custom editable cell. Press Enter, Space, or F2 to open the editor." })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      Surface.Content,
+      {
+        onClose: handleSurfaceClose,
+        onCancel: handleSurfaceCancel,
+        onClickCapture: handleSurfaceClickCapture,
+        onKeyDown: handleSurfaceKeyDown,
+        "aria-describedby": surfaceInstructionsId,
+        ...surfaceTitle ? {} : { "aria-label": accessibleSurfaceLabel },
+        closeButtonLabel,
+        title: surfaceTitle,
+        width: customEditConfig.surface?.width,
+        maxHeight: customEditConfig.surface?.maxHeight,
+        children: [
+          /* @__PURE__ */ jsx(SrOnly, { id: surfaceInstructionsId, children: "Custom editable cell dialog. Press Escape to discard changes. Clicking outside or the close button commits the current draft." }),
+          isOpen ? /* @__PURE__ */ jsx(
+            CustomEditorContent,
+            {
+              cell,
+              columnId,
+              editConfig: customEditConfig,
+              onControllerChange: (controller) => {
+                customEditControllerRef.current = controller;
+              },
+              onRequestCloseEditor: closeSurface
+            }
+          ) : null
+        ]
+      }
+    )
+  ] });
+}
+const DataTableEditableCustomCell = Object.assign(
+  forwardRef(DataTableEditableCustomCellInner),
+  { displayName: "DataTableEditableCustomCell" }
+);
+
 function DataTableBodyMutableCell(props) {
   const { cell, cellPosition, children, ...rest } = props;
   const editableCellRef = useRef(null);
@@ -5439,6 +6262,9 @@ function DataTableBodyMutableCell(props) {
     if (editMode === "boolean") {
       return DataTableEditableBooleanCell;
     }
+    if (editMode === "custom") {
+      return DataTableEditableCustomCell;
+    }
   }, [editMode]);
   if (!EditableComponent) {
     return null;
@@ -5478,15 +6304,37 @@ function DataTableBodyCell(props) {
 }
 
 const styles$8 = {
-	"data-table-body-row": "_data-table-body-row_8akvx_4",
-	"data-table-body-sub-component-row": "_data-table-body-sub-component-row_8akvx_24",
-	"data-table-body-virtualized": "_data-table-body-virtualized_8akvx_32",
-	"data-table-body-row-virtualized": "_data-table-body-row-virtualized_8akvx_38",
-	"data-table-body-sub-component-container": "_data-table-body-sub-component-container_8akvx_47",
-	"data-table-body-sub-component-content": "_data-table-body-sub-component-content_8akvx_53",
-	"data-table-body-cell-group": "_data-table-body-cell-group_8akvx_61"
+	"data-table-body-row": "_data-table-body-row_1aqzx_4",
+	"data-table-body-sub-component-row": "_data-table-body-sub-component-row_1aqzx_24",
+	"data-table-body-virtualized": "_data-table-body-virtualized_1aqzx_32",
+	"data-table-body-row-virtualized": "_data-table-body-row-virtualized_1aqzx_38",
+	"data-table-body-sub-component-container": "_data-table-body-sub-component-container_1aqzx_47",
+	"data-table-body-sub-component-content": "_data-table-body-sub-component-content_1aqzx_53",
+	"data-table-body-cell-group": "_data-table-body-cell-group_1aqzx_61",
+	"data-table-body-cell-depth-indent": "_data-table-body-cell-depth-indent_1aqzx_71",
+	"data-table-body-cell-action-depth-indent": "_data-table-body-cell-action-depth-indent_1aqzx_77",
+	"data-table-body-row-activatable": "_data-table-body-row-activatable_1aqzx_90",
+	"data-table-body-row-active": "_data-table-body-row-active_1aqzx_97",
+	"data-table-body-row-ancestor-hovered": "_data-table-body-row-ancestor-hovered_1aqzx_108",
+	"data-table-body-sub-component-row-active": "_data-table-body-sub-component-row-active_1aqzx_112",
+	"data-table-body-row-read-only": "_data-table-body-row-read-only_1aqzx_116",
+	"data-table-body-row-top-active": "_data-table-body-row-top-active_1aqzx_132"
 };
 
+const ACTIVATE_IGNORE_SELECTOR = 'button, a, input, select, textarea, label, [role="button"], [role="checkbox"], [role="menuitem"], [data-anv="checkbox"], [class*="data-table-body-cell-editable"]';
+function collectDescendantIds(row) {
+  const out = [];
+  const stack = [...row.subRows ?? []];
+  while (stack.length) {
+    const current = stack.pop();
+    if (!current) continue;
+    out.push(current.id);
+    if (current.subRows?.length) {
+      stack.push(...current.subRows);
+    }
+  }
+  return out;
+}
 function DataTableBodyRowInner({
   columnOrder,
   row,
@@ -5495,40 +6343,128 @@ function DataTableBodyRowInner({
   isExpanded,
   canExpand,
   depth,
-  parentRowCanExpand
+  parentRowCanExpand,
+  isActivatable,
+  isActive,
+  isTopMostActive,
+  isReadOnly,
+  onToggleActive
 }) {
   const visibleCells = row.getVisibleCells();
   const id = row.id;
   const original = row.original;
   const { focusSubComponent, blurSubComponent } = useDTFocusDispatchContext();
+  const handleRowClick = useCallback(
+    (event) => {
+      if (!isActivatable) return;
+      if (isReadOnly) return;
+      const target = event.target;
+      if (target?.closest(ACTIVATE_IGNORE_SELECTOR)) return;
+      onToggleActive(
+        row.id,
+        collectDescendantIds(row)
+      );
+    },
+    [isActivatable, isReadOnly, onToggleActive, row]
+  );
+  const shouldCascadeHover = isActivatable && canExpand;
+  const handleMouseEnter = useCallback(
+    (event) => {
+      if (!shouldCascadeHover) return;
+      const doc = event.currentTarget.ownerDocument ?? document;
+      const className = styles$8["data-table-body-row-ancestor-hovered"];
+      for (const descendantId of collectDescendantIds(row)) {
+        const el = doc.querySelector(
+          `[data-row-id="${CSS.escape(String(descendantId))}"]`
+        );
+        el?.classList.add(className);
+      }
+    },
+    [shouldCascadeHover, row]
+  );
+  const handleMouseLeave = useCallback(
+    (event) => {
+      if (!shouldCascadeHover) return;
+      const doc = event.currentTarget.ownerDocument ?? document;
+      const className = styles$8["data-table-body-row-ancestor-hovered"];
+      for (const descendantId of collectDescendantIds(row)) {
+        const el = doc.querySelector(
+          `[data-row-id="${CSS.escape(String(descendantId))}"]`
+        );
+        el?.classList.remove(className);
+      }
+    },
+    [shouldCascadeHover, row]
+  );
+  const rowRef = useRef(null);
+  useLayoutEffect(() => {
+    const el = rowRef.current;
+    if (!el) return;
+    const ownerDoc = el.ownerDocument ?? document;
+    const className = styles$8["data-table-body-row-ancestor-hovered"];
+    let ancestor = row.getParentRow();
+    while (ancestor) {
+      const ancestorEl = ownerDoc.querySelector(
+        `[data-row-id="${CSS.escape(String(ancestor.id))}"]`
+      );
+      if (ancestorEl?.matches(":hover")) {
+        el.classList.add(className);
+        return;
+      }
+      ancestor = ancestor.getParentRow();
+    }
+  }, [row]);
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(
       "div",
       {
+        ref: rowRef,
         role: "row",
         "aria-rowindex": rowIndex + 1,
         "aria-expanded": tableHasSubRows && canExpand ? isExpanded : void 0,
         "aria-level": tableHasSubRows && (canExpand || parentRowCanExpand) ? depth + 1 : void 0,
-        className: styles$8["data-table-body-row"],
-        children: visibleCells.map((cell) => {
-          const isLastInParentGroup = cell.column.parent ? cell.column.parent.getLeafColumns().slice(-1)[0] === cell.column : false;
-          const cellClasses = cx(getCommonPinningClasses(cell.column), {
-            [styles$8["data-table-body-cell-group"]]: "columns" in cell.column.columnDef || cell.column.parent && isLastInParentGroup
+        "data-row-id": row.id,
+        className: cx(styles$8["data-table-body-row"], {
+          [styles$8["data-table-body-row-activatable"]]: isActivatable,
+          [styles$8["data-table-body-row-active"]]: isActive,
+          [styles$8["data-table-body-row-top-active"]]: isTopMostActive,
+          [styles$8["data-table-body-row-read-only"]]: isReadOnly
+        }),
+        style: depth > 0 ? { "--a2-row-depth": depth } : void 0,
+        onClick: isActivatable ? handleRowClick : void 0,
+        onMouseEnter: shouldCascadeHover ? handleMouseEnter : void 0,
+        onMouseLeave: shouldCascadeHover ? handleMouseLeave : void 0,
+        children: (() => {
+          let firstDataCellClaimed = false;
+          return visibleCells.map((cell) => {
+            const isLastInParentGroup = cell.column.parent ? cell.column.parent.getLeafColumns().slice(-1)[0] === cell.column : false;
+            const isExpandColumn = cell.column.id === INTERNAL_ROW_ACTION_PRIMARY_COLUMN_ID;
+            const isCheckboxColumn = cell.column.id === INTERNAL_ROW_ACTION_SECONDARY_COLUMN_ID;
+            const isInternalActionColumn = isExpandColumn || isCheckboxColumn;
+            const isFirstDataCell = !isInternalActionColumn && !firstDataCellClaimed;
+            if (!isInternalActionColumn) {
+              firstDataCellClaimed = true;
+            }
+            const cellClasses = cx(getCommonPinningClasses(cell.column), {
+              [styles$8["data-table-body-cell-group"]]: "columns" in cell.column.columnDef || cell.column.parent && isLastInParentGroup,
+              [styles$8["data-table-body-cell-depth-indent"]]: isFirstDataCell,
+              [styles$8["data-table-body-cell-action-depth-indent"]]: isExpandColumn
+            });
+            const columnIndex = columnOrder.indexOf(cell.column.getIndex());
+            return /* @__PURE__ */ jsx(
+              DataTableBodyCell,
+              {
+                cell,
+                cellPosition: { rowIndex, columnIndex },
+                "aria-colindex": columnIndex + 1,
+                className: cellClasses,
+                "data-anv-column-id": cell.column.id,
+                children: flexRender(cell.column.columnDef.cell, cell.getContext())
+              },
+              cell.id
+            );
           });
-          const columnIndex = columnOrder.indexOf(cell.column.getIndex());
-          return /* @__PURE__ */ jsx(
-            DataTableBodyCell,
-            {
-              cell,
-              cellPosition: { rowIndex, columnIndex },
-              "aria-colindex": columnIndex + 1,
-              className: cellClasses,
-              "data-anv-column-id": cell.column.id,
-              children: flexRender(cell.column.columnDef.cell, cell.getContext())
-            },
-            cell.id
-          );
-        })
+        })()
       }
     ),
     isExpanded && "subComponent" in original && /* @__PURE__ */ jsx(
@@ -5536,7 +6472,9 @@ function DataTableBodyRowInner({
       {
         id: `${id}-sub-component`,
         "aria-hidden": !isExpanded,
-        className: styles$8["data-table-body-sub-component-row"],
+        className: cx(styles$8["data-table-body-sub-component-row"], {
+          [styles$8["data-table-body-sub-component-row-active"]]: isActive
+        }),
         onFocus: () => {
           focusSubComponent();
         },
@@ -5553,7 +6491,7 @@ function areRowPropsEqual(prev, next) {
   if (!getRowVersion) {
     return false;
   }
-  return prev.row.id === next.row.id && getRowVersion(prev.row.original) === getRowVersion(next.row.original) && prev.rowIndex === next.rowIndex && prev.isExpanded === next.isExpanded && prev.canExpand === next.canExpand && prev.depth === next.depth && prev.parentRowCanExpand === next.parentRowCanExpand && prev.tableHasSubRows === next.tableHasSubRows && prev.columnOrder === next.columnOrder && prev.isSelected === next.isSelected && prev.isSomeSelected === next.isSomeSelected;
+  return prev.row.id === next.row.id && getRowVersion(prev.row.original) === getRowVersion(next.row.original) && prev.rowIndex === next.rowIndex && prev.isExpanded === next.isExpanded && prev.canExpand === next.canExpand && prev.depth === next.depth && prev.parentRowCanExpand === next.parentRowCanExpand && prev.tableHasSubRows === next.tableHasSubRows && prev.columnOrder === next.columnOrder && prev.isSelected === next.isSelected && prev.isSomeSelected === next.isSomeSelected && prev.isActivatable === next.isActivatable && prev.isActive === next.isActive && prev.isTopMostActive === next.isTopMostActive && prev.isReadOnly === next.isReadOnly && prev.onToggleActive === next.onToggleActive;
 }
 const DataTableBodyRow = memo$1(
   DataTableBodyRowInner,
@@ -5587,10 +6525,31 @@ const useColumnOrder = ({ table }) => {
   };
 };
 
+function getIsRowActivatable(row, isActivatable) {
+  if (!isActivatable) return false;
+  if (typeof isActivatable === "function") {
+    return isActivatable(row.original);
+  }
+  return true;
+}
+function getIsRowTopMostActive(row, activeRowMap) {
+  if (!activeRowMap[row.id]) return false;
+  if (!row.getCanExpand()) return false;
+  let ancestor = row.getParentRow();
+  while (ancestor) {
+    if (activeRowMap[ancestor.id]) return false;
+    ancestor = ancestor.getParentRow();
+  }
+  return true;
+}
 function NonVirtualizedContent({
   table,
   hasSubRows,
-  getRowVersion
+  getRowVersion,
+  isActivatable,
+  activeRowMap,
+  readOnlyRowMap,
+  onToggleActive
 }) {
   const { columnOrder } = useColumnOrder({ table });
   const headerCount = table.getHeaderGroups().length;
@@ -5607,6 +6566,11 @@ function NonVirtualizedContent({
       parentRowCanExpand: row.getParentRow()?.getCanExpand() ?? false,
       isSelected: row.getIsSelected(),
       isSomeSelected: row.getIsSomeSelected(),
+      isActivatable: getIsRowActivatable(row, isActivatable),
+      isActive: !!activeRowMap[row.id],
+      isTopMostActive: getIsRowTopMostActive(row, activeRowMap),
+      isReadOnly: !!readOnlyRowMap[row.id],
+      onToggleActive,
       getRowVersion
     },
     row.id
@@ -5616,7 +6580,11 @@ function VirtualizedContent({
   table,
   hasSubRows,
   virtualizer,
-  getRowVersion
+  getRowVersion,
+  isActivatable,
+  activeRowMap,
+  readOnlyRowMap,
+  onToggleActive
 }) {
   const { columnOrder } = useColumnOrder({ table });
   const headerCount = table.getHeaderGroups().length;
@@ -5657,6 +6625,11 @@ function VirtualizedContent({
                 parentRowCanExpand: row.getParentRow()?.getCanExpand() ?? false,
                 isSelected: row.getIsSelected(),
                 isSomeSelected: row.getIsSomeSelected(),
+                isActivatable: getIsRowActivatable(row, isActivatable),
+                isActive: !!activeRowMap[row.id],
+                isTopMostActive: getIsRowTopMostActive(row, activeRowMap),
+                isReadOnly: !!readOnlyRowMap[row.id],
+                onToggleActive,
                 getRowVersion
               }
             )
@@ -5668,21 +6641,39 @@ function VirtualizedContent({
   );
 }
 function DataTableBody(props) {
-  const { table, hasSubRows, virtualizer, getRowVersion, ...rest } = props;
+  const {
+    table,
+    hasSubRows,
+    virtualizer,
+    getRowVersion,
+    isActivatable,
+    activeRowMap,
+    readOnlyRowMap,
+    onToggleActive,
+    ...rest
+  } = props;
   return /* @__PURE__ */ jsx(TableBody, { type: "data-table", ...rest, children: virtualizer ? /* @__PURE__ */ jsx(
     VirtualizedContent,
     {
       table,
       hasSubRows,
       virtualizer,
-      getRowVersion
+      getRowVersion,
+      isActivatable,
+      activeRowMap,
+      readOnlyRowMap,
+      onToggleActive
     }
   ) : /* @__PURE__ */ jsx(
     NonVirtualizedContent,
     {
       table,
       hasSubRows,
-      getRowVersion
+      getRowVersion,
+      isActivatable,
+      activeRowMap,
+      readOnlyRowMap,
+      onToggleActive
     }
   ) });
 }
@@ -5985,7 +6976,29 @@ function CellStatus({ status, variant }) {
   ] });
 }
 
-const sharedColumnHelper = createColumnHelper();
+function getColumnReadRenderResult({
+  value,
+  context,
+  renderCell,
+  getCellText,
+  getReadRenderResult
+}) {
+  if (getReadRenderResult) {
+    return getReadRenderResult(value, context);
+  }
+  const rawString = getCellText?.(value, context);
+  if (renderCell) {
+    const content = renderCell(value, context);
+    return {
+      content,
+      rawString: rawString ?? (typeof content === "string" ? content : void 0)
+    };
+  }
+  return {
+    content: renderRawCellValue(value),
+    rawString: rawString ?? (typeof value === "string" ? value : void 0)
+  };
+}
 function resolveHeaderAlign(align, isGroup = false) {
   if (isGroup) {
     return "start";
@@ -6077,8 +7090,9 @@ function getTanStackColumnDef({
   emptyCellContent
 }) {
   const normalizedHeader = normalizeColumnHeader(columnDef);
+  const columnHelper = createColumnHelper();
   if (columnDef.columns && columnDef.columns.length > 0) {
-    return sharedColumnHelper.group({
+    return columnHelper.group({
       id: columnDef.id,
       header: () => renderColumnHeader(normalizedHeader, {
         align: columnDef.align,
@@ -6120,19 +7134,23 @@ function getTanStackColumnDef({
     ...columnDef,
     headerLabel: normalizedHeader.label
   };
-  return sharedColumnHelper.accessor((row) => row[columnDef.id], {
+  const resolveReadRenderResult = (value, context) => getColumnReadRenderResult({
+    value,
+    context,
+    renderCell: resolvedRenderCell,
+    getCellText: columnDef.getCellText,
+    getReadRenderResult: columnDef.getReadRenderResult
+  });
+  const shouldUseCustomReadStringSorting = columnDef.editConfig?.mode === "custom" && columnDef.sortable === true;
+  return columnHelper.accessor((row) => row[columnDef.id], {
     id: columnDef.id,
     cell: (info) => {
       const rawCellValue = info.row.original[columnDef.id];
-      let cellContent;
-      if (resolvedRenderCell) {
-        cellContent = resolvedRenderCell(rawCellValue, {
-          row: info.row.original,
-          depth: info.row.depth
-        });
-      } else {
-        cellContent = renderRawCellValue(rawCellValue);
-      }
+      const readRenderResult = resolveReadRenderResult(rawCellValue, {
+        row: info.row.original,
+        depth: info.row.depth
+      });
+      let cellContent = readRenderResult.content;
       if (cellContent === "") {
         cellContent = resolvedEmptyContent;
       }
@@ -6168,16 +7186,39 @@ function getTanStackColumnDef({
       editConfig: columnDef.editConfig,
       columnDef: metaColumnDef,
       // Store original for type narrowing
+      getReadRenderResult: (value, context) => resolveReadRenderResult(value, context),
       headerAlign: resolveHeaderAlign(resolvedAlign),
       isGroupHeader: false
     },
+    ...shouldUseCustomReadStringSorting ? {
+      sortingFn: (rowA, rowB) => {
+        const rawStringA = resolveReadRenderResult(
+          rowA.original[columnDef.id],
+          {
+            row: rowA.original,
+            depth: rowA.depth
+          }
+        ).rawString;
+        const rawStringB = resolveReadRenderResult(
+          rowB.original[columnDef.id],
+          {
+            row: rowB.original,
+            depth: rowB.depth
+          }
+        ).rawString;
+        if (typeof rawStringA !== "string" || typeof rawStringB !== "string") {
+          return 0;
+        }
+        return rawStringA.localeCompare(rawStringB);
+      }
+    } : void 0,
     // If custom sorting function is provided, use it
     ...columnDef.sortable && typeof columnDef.sortable === "function" ? {
-      sortingFn: (rowA, rowB, colId) => {
+      sortingFn: (rowA, rowB) => {
         if (typeof columnDef.sortable === "function") {
           return columnDef.sortable(
-            rowA.getValue(colId),
-            rowB.getValue(colId)
+            rowA.original[columnDef.id],
+            rowB.original[columnDef.id]
           );
         }
         return 0;
@@ -6638,7 +7679,7 @@ const TableContainer = forwardRef(
 );
 TableContainer.displayName = "TableContainer";
 
-const pagination = "_pagination_13hzr_4";
+const pagination = "_pagination_n9r8d_4";
 const styles$1 = {
 	pagination: pagination
 };
@@ -6771,6 +7812,8 @@ function scrollCellIntoView(element, stickyDimensions) {
     leftWidth: stickyDimensions.leftWidth,
     rightWidth: stickyDimensions.rightWidth
   };
+  const cellStyle = window.getComputedStyle(element);
+  const isHorizontallySticky = cellStyle.position === "sticky" && (cellStyle.left !== "auto" || cellStyle.right !== "auto");
   const elementRect = element.getBoundingClientRect();
   const scrollContainerRect = scrollContainer.getBoundingClientRect();
   const contentWidth = scrollContainer.clientWidth;
@@ -6782,6 +7825,7 @@ function scrollCellIntoView(element, stickyDimensions) {
   const isFullyVisible = elementRect.x >= visibleLeft && elementRect.x + elementRect.width <= visibleRight && (isBodyCell ? elementRect.y >= visibleTop && elementRect.y + elementRect.height <= visibleBottom : true);
   if (isFullyVisible) return;
   const getScrollByLeft = () => {
+    if (isHorizontallySticky) return 0;
     if (elementRect.x < visibleLeft) {
       return elementRect.x - visibleLeft;
     }
@@ -7039,14 +8083,15 @@ function DTFocusProvider({
   return /* @__PURE__ */ jsx(DTFocusStateContext.Provider, { value: state, children: /* @__PURE__ */ jsx(DTFocusDispatchContext.Provider, { value: dispatch, children }) });
 }
 
-const VIRTUALIZATION_THRESHOLD = 101;
+const VIRTUALIZATION_THRESHOLD = 50;
 const DEFAULT_ESTIMATED_ROW_HEIGHT = 35;
 function useDataTableVirtualizer({
   rowCount,
   scrollRef,
-  disabled
+  disabled,
+  forced
 }) {
-  const shouldVirtualize = !disabled && rowCount >= VIRTUALIZATION_THRESHOLD;
+  const shouldVirtualize = !disabled && (forced || rowCount >= VIRTUALIZATION_THRESHOLD);
   const virtualizer = useVirtualizer({
     count: shouldVirtualize ? rowCount : 0,
     // `scrollRef` points at the outer TableContainer div, which does not
@@ -7078,14 +8123,19 @@ function DataTableInner(props, ref) {
     data: dataProp,
     columns: columnsProp,
     customFooter,
+    defaultActiveRowIds,
     defaultExpandedRowIds,
     defaultSelectedRowIds,
     defaultSortedColumn,
     disableExpandAll,
     disableSelectAll,
     expandedRowIds,
+    activeRowIds,
+    isActivatable,
     isSelectable,
+    onActivateRow,
     onSelectRow,
+    readOnlyRowIds,
     onSort,
     onExpandRow,
     pagination,
@@ -7094,6 +8144,7 @@ function DataTableInner(props, ref) {
     emptyState,
     emptyCellContent,
     disableVirtualization,
+    forceVirtualization,
     getRowVersion,
     className,
     style,
@@ -7104,6 +8155,7 @@ function DataTableInner(props, ref) {
     ...layoutStyles
   };
   const tableRef = useRef(null);
+  const lastBodyHeightRef = useRef(null);
   const [rowSelection, setRowSelection] = useOptionallyControlledState({
     controlledValue: isSelectable && selectedRowIds ? Object.fromEntries(selectedRowIds.map((id) => [id, true])) : void 0,
     defaultValue: isSelectable ? defaultSelectedRowIds ? Object.fromEntries(defaultSelectedRowIds.map((id) => [id, true])) : {} : {},
@@ -7111,6 +8163,41 @@ function DataTableInner(props, ref) {
       onSelectRow?.(Object.keys(newRowSelection));
     }
   });
+  const [rowActivation, setRowActivation] = useOptionallyControlledState({
+    controlledValue: isActivatable && activeRowIds ? Object.fromEntries(activeRowIds.map((id) => [id, true])) : void 0,
+    defaultValue: isActivatable ? defaultActiveRowIds ? Object.fromEntries(defaultActiveRowIds.map((id) => [id, true])) : {} : {},
+    onChange: (newRowActivation) => {
+      onActivateRow?.(Object.keys(newRowActivation));
+    }
+  });
+  const activeRowMap = rowActivation ?? {};
+  const readOnlyRowMap = useMemo(
+    () => readOnlyRowIds ? Object.fromEntries(readOnlyRowIds.map((id) => [String(id), true])) : {},
+    [readOnlyRowIds]
+  );
+  const setRowActivationRef = useRef(setRowActivation);
+  setRowActivationRef.current = setRowActivation;
+  const toggleRowActivation = useCallback(
+    (rowId, descendantIds = []) => {
+      setRowActivationRef.current((prev) => {
+        const prevMap = prev ?? {};
+        const rowKey = String(rowId);
+        const descendantKeys = descendantIds.map(String);
+        const next = { ...prevMap };
+        if (prevMap[rowKey]) {
+          delete next[rowKey];
+          descendantKeys.forEach((key) => delete next[key]);
+        } else {
+          next[rowKey] = true;
+          descendantKeys.forEach((key) => {
+            next[key] = true;
+          });
+        }
+        return next;
+      });
+    },
+    []
+  );
   const [sorting, setSorting] = useOptionallyControlledState({
     controlledValue: sortedColumn ? [sortedColumn] : void 0,
     defaultValue: defaultSortedColumn ? [defaultSortedColumn] : void 0,
@@ -7204,6 +8291,15 @@ function DataTableInner(props, ref) {
     }
   });
   const tableData = isLoading ? EMPTY_DATA : resolvedData;
+  useLayoutEffect(() => {
+    if (isLoading) return;
+    const body = tableRef.current?.querySelector(
+      '[data-anv="table-body"]'
+    );
+    if (body && body.offsetHeight > 0) {
+      lastBodyHeightRef.current = body.offsetHeight;
+    }
+  }, [isLoading]);
   const hasRowStatus = useMemo(() => {
     return tableData?.some((row) => {
       const meta = row.meta;
@@ -7300,20 +8396,8 @@ function DataTableInner(props, ref) {
                 "data-cell-action": "expand"
               }
             );
-          } else if (row.getParentRow()?.getCanExpand() && isSelectable) {
-            return /* @__PURE__ */ jsx(
-              Checkbox,
-              {
-                tabIndex: -1,
-                "aria-label": row.getIsSelected() ? "Deselect row" : "Select row",
-                checked: row.getIsSelected(),
-                disabled: !row.getCanSelect(),
-                indeterminate: row.getIsSomeSelected(),
-                onChange: row.getToggleSelectedHandler(),
-                "data-cell-action": "select"
-              }
-            );
           }
+          return null;
         }
       });
     }
@@ -7338,23 +8422,18 @@ function DataTableInner(props, ref) {
             }
           ) });
         },
-        cell: ({ row }) => {
-          if (row.getParentRow()?.getCanExpand() && isSelectable) {
-            return null;
+        cell: ({ row }) => /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            tabIndex: -1,
+            "aria-label": row.getIsSelected() ? "Deselect row" : "Select row",
+            checked: row.getIsSelected(),
+            disabled: !row.getCanSelect(),
+            indeterminate: row.getIsSomeSelected(),
+            onChange: row.getToggleSelectedHandler(),
+            "data-cell-action": "select"
           }
-          return /* @__PURE__ */ jsx(
-            Checkbox,
-            {
-              tabIndex: -1,
-              "aria-label": row.getIsSelected() ? "Deselect row" : "Select row",
-              checked: row.getIsSelected(),
-              disabled: !row.getCanSelect(),
-              indeterminate: row.getIsSomeSelected(),
-              onChange: row.getToggleSelectedHandler(),
-              "data-cell-action": "select"
-            }
-          );
-        }
+        )
       });
     }
     return tableColumns;
@@ -7399,7 +8478,11 @@ function DataTableInner(props, ref) {
     manualSorting: isAsyncPaginated,
     autoResetPageIndex: false,
     columnResizeMode: "onChange",
-    enableRowSelection: typeof isSelectable === "function" ? (row) => isSelectable(row.original) : isSelectable,
+    enableRowSelection: !isSelectable ? false : (row) => {
+      const original = row.original;
+      if (readOnlyRowMap[String(original.id)]) return false;
+      return typeof isSelectable === "function" ? isSelectable(original) : true;
+    },
     onRowSelectionChange: (newRowSelection) => {
       setRowSelection(newRowSelection);
     },
@@ -7420,7 +8503,8 @@ function DataTableInner(props, ref) {
   const rowVirtualizer = useDataTableVirtualizer({
     rowCount: table.getRowModel().rows.length,
     scrollRef: tableRef,
-    disabled: disableVirtualization
+    disabled: disableVirtualization,
+    forced: forceVirtualization
   });
   const headers = table.getFlatHeaders();
   const headerRowCount = table.getHeaderGroups().length;
@@ -7530,7 +8614,11 @@ function DataTableInner(props, ref) {
                       table,
                       hasSubRows,
                       virtualizer: rowVirtualizer,
-                      getRowVersion
+                      getRowVersion,
+                      isActivatable,
+                      activeRowMap,
+                      readOnlyRowMap,
+                      onToggleActive: toggleRowActivation
                     }
                   ),
                   isEmpty && emptyState && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -7555,7 +8643,7 @@ function DataTableInner(props, ref) {
                       "div",
                       {
                         style: {
-                          height: rowsPerPage ? `${rowsPerPage * 35}px` : "200px"
+                          height: `${lastBodyHeightRef.current ?? (rowsPerPage ? rowsPerPage * 35 : 200)}px`
                         },
                         role: "presentation",
                         "aria-hidden": "true",
@@ -7616,4 +8704,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, htmlFormatter as h, dateFormatPresets as i, timeFormatter as j, markdownFormatter as m, numberFormatter as n, percentFormatter as p, resolveColumnTypeConfig as r, timeFormatPresets as t, yearlessDateFormatter as y };
-//# sourceMappingURL=DataTable-BDXdCF7J.js.map
+//# sourceMappingURL=DataTable-CME7SbPc.js.map