@servicetitan/anvil2 3.0.8 → 3.0.9

package/dist/{DataTable-Dwhwvm6R.js → DataTable-FG0Kjx0d.js}

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { C as Chip } from './Chip-CyMNyEPR.js';
 import { F as Flex } from './Flex-_orhvoxS.js';
 import * as React 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 { useId, useRef, useCallback, useMemo, createContext, forwardRef, useState, useEffect, useContext, 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-BYWhkYoK.js';
@@ -13,11 +13,13 @@ import { I as Icon } from './Icon-feeG7gXA.js';
 import { S as SrOnly } from './SrOnly-pnf8ajnh.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-CAweNjRL.js';
-import { a as MultiSelectMenuSync, M as MultiSelectMenu } from './MultiSelectMenuSync-Drz8SEk9.js';
+import { a as SelectMenuSync, S as SelectMenu } from './SelectMenuSync-CF49L12-.js';
+import { a as MultiSelectMenuSync, M as MultiSelectMenu } from './MultiSelectMenuSync-BGcrYjby.js';
 import { S as SvgClose } from './close-DZj38AEh.js';
+import { S as SvgDragIndicator } from './drag_indicator-BRHAPLSJ.js';
 import { p as portalScopeClassNames } from './portalScopeClassNames-jlZkdug_.js';
 import { a as useOnClickOutside, r as registerLayer, u as unregisterLayer } from './useOnClickOutside-Zw5vzxSq.js';
+import { u as useBreakpoint } from './useBreakpoint-CeaUyHxh.js';
 import { c as computePosition, o as offset, h as autoPlacement, d as shift, g as size, a as autoUpdate, s as safeShowPopover, b as safeHidePopover } from './floating-ui.react-dom-BIKT960u.js';
 import { F as FieldLabel } from './FieldLabel-VVn8GR64.js';
 import { S as SvgError } from './error-DR_wWdYY.js';
@@ -35,20 +37,214 @@ import { u as useOptionallyControlledState } from './useOptionallyControlledStat
 import { u as usePrefersColorScheme } from './usePrefersColorScheme-_hT7dK7_.js';
 import { S as Spinner } from './Spinner-B7tTWcP6.js';
 
-import './DataTable.css';const surface = "_surface_1f9bx_2";
-const header = "_header_1f9bx_36";
-const title = "_title_1f9bx_55";
-const content = "_content_1f9bx_71";
+import './DataTable.css';const SvgResizeWindowAlt = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M4.4 21 21 4.425 19.575 3 3 19.575zm10.025 0L21 14.425 19.575 13 13 19.575z" }));
+
+const SURFACE_VIEWPORT_PADDING = 8;
+const SURFACE_MIN_WIDTH = 240;
+const SURFACE_MIN_HEIGHT = 120;
+function clampValue(value, min, max) {
+  return Math.min(Math.max(value, min), Math.max(min, max));
+}
+function getMaxSurfaceWidth(viewport, x) {
+  return Math.max(
+    SURFACE_MIN_WIDTH,
+    viewport.width - x - SURFACE_VIEWPORT_PADDING
+  );
+}
+function getMaxSurfaceHeight(viewport, y) {
+  return Math.max(
+    SURFACE_MIN_HEIGHT,
+    viewport.height - y - SURFACE_VIEWPORT_PADDING
+  );
+}
+function isFiniteRect(rect) {
+  return Number.isFinite(rect.x) && Number.isFinite(rect.y) && Number.isFinite(rect.width) && Number.isFinite(rect.height) && rect.width > 0 && rect.height > 0;
+}
+function getEffectiveSurfaceHeight(geometry, options) {
+  if (geometry.height !== null) return geometry.height;
+  return options.measuredHeight ?? SURFACE_MIN_HEIGHT;
+}
+function toSurfaceRect(geometry, options) {
+  return {
+    x: geometry.x,
+    y: geometry.y,
+    width: geometry.width,
+    height: getEffectiveSurfaceHeight(geometry, options)
+  };
+}
+function hasStrictRectIntersection(rect, boundary) {
+  return rect.x + rect.width > boundary.x && boundary.x + boundary.width > rect.x && rect.y + rect.height > boundary.y && boundary.y + boundary.height > rect.y;
+}
+function getAxisCorrection({
+  boundarySize,
+  boundaryStart,
+  max,
+  min,
+  size,
+  start
+}) {
+  const boundaryEnd = boundaryStart + boundarySize;
+  const end = start + size;
+  if (end > boundaryStart && start < boundaryEnd) {
+    return { value: start, delta: 0 };
+  }
+  const target = end <= boundaryStart ? boundaryStart - size + 1 : boundaryEnd - 1;
+  const value = clampValue(target, min, max);
+  if (value + size <= boundaryStart || value >= boundaryEnd) {
+    return null;
+  }
+  return { value, delta: Math.abs(value - start) };
+}
+function restoreBoundaryIntersection(geometry, viewport, options) {
+  const boundary = options.intersectionBoundary;
+  if (!boundary || !isFiniteRect(boundary)) return geometry;
+  const rect = toSurfaceRect(geometry, options);
+  if (hasStrictRectIntersection(rect, boundary)) return geometry;
+  const xCorrection = getAxisCorrection({
+    boundarySize: boundary.width,
+    boundaryStart: boundary.x,
+    max: viewport.width - SURFACE_VIEWPORT_PADDING - rect.width,
+    min: SURFACE_VIEWPORT_PADDING,
+    size: rect.width,
+    start: geometry.x
+  });
+  const yCorrection = getAxisCorrection({
+    boundarySize: boundary.height,
+    boundaryStart: boundary.y,
+    max: viewport.height - SURFACE_VIEWPORT_PADDING - rect.height,
+    min: SURFACE_VIEWPORT_PADDING,
+    size: rect.height,
+    start: geometry.y
+  });
+  if (!xCorrection || !yCorrection) return geometry;
+  const xCorrected = {
+    ...geometry,
+    x: xCorrection.value
+  };
+  const yCorrected = {
+    ...geometry,
+    y: yCorrection.value
+  };
+  const xCorrectionIntersects = hasStrictRectIntersection(
+    toSurfaceRect(xCorrected, options),
+    boundary
+  );
+  const yCorrectionIntersects = hasStrictRectIntersection(
+    toSurfaceRect(yCorrected, options),
+    boundary
+  );
+  if (xCorrectionIntersects && yCorrectionIntersects) {
+    return xCorrection.delta <= yCorrection.delta ? xCorrected : yCorrected;
+  }
+  if (xCorrectionIntersects) return xCorrected;
+  if (yCorrectionIntersects) return yCorrected;
+  const corrected = {
+    ...geometry,
+    x: xCorrection.value,
+    y: yCorrection.value
+  };
+  if (!hasStrictRectIntersection(toSurfaceRect(corrected, options), boundary)) {
+    return geometry;
+  }
+  return corrected;
+}
+function clampSurfaceGeometry(geometry, viewport, options = {}) {
+  const width = clampValue(
+    geometry.width,
+    SURFACE_MIN_WIDTH,
+    Math.max(SURFACE_MIN_WIDTH, viewport.width - SURFACE_VIEWPORT_PADDING * 2)
+  );
+  const effectiveHeight = clampValue(
+    getEffectiveSurfaceHeight(geometry, options),
+    SURFACE_MIN_HEIGHT,
+    Math.max(
+      SURFACE_MIN_HEIGHT,
+      viewport.height - SURFACE_VIEWPORT_PADDING * 2
+    )
+  );
+  const x = clampValue(
+    geometry.x,
+    SURFACE_VIEWPORT_PADDING,
+    viewport.width - SURFACE_VIEWPORT_PADDING - width
+  );
+  const y = clampValue(
+    geometry.y,
+    SURFACE_VIEWPORT_PADDING,
+    viewport.height - SURFACE_VIEWPORT_PADDING - effectiveHeight
+  );
+  const height = geometry.height === null ? null : clampValue(
+    geometry.height,
+    SURFACE_MIN_HEIGHT,
+    getMaxSurfaceHeight(viewport, y)
+  );
+  return restoreBoundaryIntersection(
+    {
+      ...geometry,
+      x,
+      y,
+      width: clampValue(
+        width,
+        SURFACE_MIN_WIDTH,
+        getMaxSurfaceWidth(viewport, x)
+      ),
+      height
+    },
+    viewport,
+    options
+  );
+}
+function clampActiveResizeSurfaceGeometry(geometry, viewport) {
+  return {
+    ...geometry,
+    width: clampValue(
+      geometry.width,
+      SURFACE_MIN_WIDTH,
+      getMaxSurfaceWidth(viewport, geometry.x)
+    ),
+    height: geometry.height === null ? null : clampValue(
+      geometry.height,
+      SURFACE_MIN_HEIGHT,
+      getMaxSurfaceHeight(viewport, geometry.y)
+    )
+  };
+}
+function restoreSurfaceGeometryIntersection(geometry, viewport, options = {}) {
+  const effectiveHeight = getEffectiveSurfaceHeight(geometry, options);
+  return restoreBoundaryIntersection(
+    {
+      ...geometry,
+      x: clampValue(
+        geometry.x,
+        SURFACE_VIEWPORT_PADDING,
+        viewport.width - SURFACE_VIEWPORT_PADDING - geometry.width
+      ),
+      y: clampValue(
+        geometry.y,
+        SURFACE_VIEWPORT_PADDING,
+        viewport.height - SURFACE_VIEWPORT_PADDING - effectiveHeight
+      )
+    },
+    viewport,
+    options
+  );
+}
+
+const surface = "_surface_9apry_1";
+const header = "_header_9apry_55";
+const title = "_title_9apry_83";
+const content = "_content_9apry_110";
 const styles$i = {
 	surface: surface,
 	header: header,
-	"header-bottom-border": "_header-bottom-border_1f9bx_45",
-	"header-copy": "_header-copy_1f9bx_48",
+	"header-bottom-border": "_header-bottom-border_9apry_71",
+	"header-copy": "_header-copy_9apry_75",
 	title: title,
-	"header-actions": "_header-actions_1f9bx_62",
-	"close-button": "_close-button_1f9bx_68",
+	"header-actions": "_header-actions_9apry_91",
+	"close-button": "_close-button_9apry_98",
+	"drag-handle": "_drag-handle_9apry_102",
 	content: content,
-	"content-title-spacing": "_content-title-spacing_1f9bx_81"
+	"content-title-spacing": "_content-title-spacing_9apry_122",
+	"resize-handle": "_resize-handle_9apry_127"
 };
 
 const SurfaceContext = createContext(null);
@@ -77,6 +273,63 @@ function resolveCssDimension(value, fallback) {
   if (typeof value === "string") return value;
   return fallback;
 }
+const SURFACE_KEYBOARD_STEP = 8;
+const SURFACE_KEYBOARD_SHIFT_STEP = 32;
+const SURFACE_KEYBOARD_STEP_INTERVAL_MS = 33;
+const SURFACE_ARROW_KEYS = [
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowUp",
+  "ArrowDown"
+];
+function createSurfacePressedArrowKeys() {
+  return {
+    ArrowLeft: false,
+    ArrowRight: false,
+    ArrowUp: false,
+    ArrowDown: false
+  };
+}
+function isSurfaceArrowKey(key) {
+  return SURFACE_ARROW_KEYS.some((arrowKey) => arrowKey === key);
+}
+function getKeyboardAxisDelta(pressedKeys) {
+  return {
+    x: Number(pressedKeys.ArrowRight) - Number(pressedKeys.ArrowLeft),
+    y: Number(pressedKeys.ArrowDown) - Number(pressedKeys.ArrowUp)
+  };
+}
+function hasPressedSurfaceArrowKey(pressedKeys) {
+  return SURFACE_ARROW_KEYS.some((arrowKey) => pressedKeys[arrowKey]);
+}
+function hasKeyboardAxisDelta(axis) {
+  return axis.x !== 0 || axis.y !== 0;
+}
+function parsePixelDimension(value) {
+  const numericValue = Number.parseFloat(value);
+  if (!Number.isFinite(numericValue)) return null;
+  if (value.trim().endsWith("px")) return numericValue;
+  return null;
+}
+function getViewportSize() {
+  return {
+    width: window.innerWidth,
+    height: window.innerHeight
+  };
+}
+function getMeasuredSurfaceHeight(element) {
+  return element.getBoundingClientRect().height;
+}
+function getInteractionStep(shiftKey) {
+  return shiftKey ? SURFACE_KEYBOARD_SHIFT_STEP : SURFACE_KEYBOARD_STEP;
+}
+function getElementDimension(element, authoredValue, fallback, dimension) {
+  const parsedValue = parsePixelDimension(authoredValue);
+  if (parsedValue !== null) return parsedValue;
+  const rect = element.getBoundingClientRect();
+  const measuredValue = rect.width ;
+  return measuredValue > 0 ? measuredValue : fallback;
+}
 const SurfaceContent = forwardRef(
   function SurfaceContent2(props, ref) {
     const {
@@ -86,6 +339,7 @@ const SurfaceContent = forwardRef(
       title,
       headerContent,
       initialFocusRef,
+      intersectionBoundaryRef,
       width,
       maxHeight,
       closeButtonLabel = "Close surface",
@@ -95,16 +349,149 @@ const SurfaceContent = forwardRef(
       ...rest
     } = props;
     const { open, referenceElement, surfaceId } = useSurfaceContext();
+    const breakpoint = useBreakpoint();
+    const isDrawerMode = breakpoint ? !breakpoint.md : false;
+    const [localElement, setLocalElement] = useState(
+      null
+    );
     const localRef = useRef(null);
-    const surfaceRef = useMergeRefs([localRef, ref]);
+    const setLocalRef = useCallback((node) => {
+      localRef.current = node;
+      setLocalElement(node);
+    }, []);
+    const surfaceRef = useMergeRefs([setLocalRef, ref]);
     const layerId = `${surfaceId}-layer`;
     const titleId = `${surfaceId}-title`;
     const resolvedWidth = resolveCssDimension(width, "325px");
     const resolvedMaxHeight = resolveCssDimension(maxHeight, "450px");
     const handleCancel = onCancel ?? onClose;
+    const [geometry, setGeometry] = useState(null);
+    const interactionRef = useRef({ type: "idle" });
+    const keyboardInteractionModeRef = useRef(null);
+    const pressedArrowKeysRef = useRef(
+      createSurfacePressedArrowKeys()
+    );
+    const keyboardShiftKeyRef = useRef(false);
+    const keyboardAnimationFrameRef = useRef(null);
+    const keyboardLastStepTimestampRef = useRef(null);
+    const getClampOptions = useCallback(
+      (measuredHeight) => {
+        const boundaryRect = intersectionBoundaryRef?.current?.getBoundingClientRect();
+        const intersectionBoundary = boundaryRect ? {
+          x: boundaryRect.x,
+          y: boundaryRect.y,
+          width: boundaryRect.width,
+          height: boundaryRect.height
+        } : null;
+        return {
+          measuredHeight,
+          intersectionBoundary
+        };
+      },
+      [intersectionBoundaryRef]
+    );
+    const restoreResizeIntersection = useCallback(() => {
+      const viewport = getViewportSize();
+      const measuredHeight = localRef.current ? getMeasuredSurfaceHeight(localRef.current) : void 0;
+      const clampOptions = getClampOptions(measuredHeight);
+      setGeometry(
+        (currentGeometry) => currentGeometry ? restoreSurfaceGeometryIntersection(
+          currentGeometry,
+          viewport,
+          clampOptions
+        ) : currentGeometry
+      );
+    }, [getClampOptions]);
+    const cancelKeyboardAnimationFrame = useCallback(() => {
+      if (keyboardAnimationFrameRef.current !== null) {
+        window.cancelAnimationFrame(keyboardAnimationFrameRef.current);
+        keyboardAnimationFrameRef.current = null;
+      }
+      keyboardLastStepTimestampRef.current = null;
+    }, []);
+    const clearKeyboardInteraction = useCallback(() => {
+      cancelKeyboardAnimationFrame();
+      keyboardInteractionModeRef.current = null;
+      pressedArrowKeysRef.current = createSurfacePressedArrowKeys();
+      keyboardShiftKeyRef.current = false;
+    }, [cancelKeyboardAnimationFrame]);
+    const applyKeyboardInteractionStep = useCallback(() => {
+      const mode = keyboardInteractionModeRef.current;
+      if (!mode) return;
+      const axis = getKeyboardAxisDelta(pressedArrowKeysRef.current);
+      if (!hasKeyboardAxisDelta(axis)) return;
+      const step = getInteractionStep(keyboardShiftKeyRef.current);
+      const viewport = getViewportSize();
+      if (mode === "drag") {
+        const measuredHeight = localRef.current ? getMeasuredSurfaceHeight(localRef.current) : void 0;
+        const clampOptions = getClampOptions(measuredHeight);
+        setGeometry(
+          (currentGeometry) => currentGeometry ? clampSurfaceGeometry(
+            {
+              ...currentGeometry,
+              x: currentGeometry.x + axis.x * step,
+              y: currentGeometry.y + axis.y * step,
+              isUserModified: true
+            },
+            viewport,
+            clampOptions
+          ) : currentGeometry
+        );
+        return;
+      }
+      setGeometry((currentGeometry) => {
+        if (!currentGeometry || !localRef.current) return currentGeometry;
+        const rect = localRef.current.getBoundingClientRect();
+        return clampActiveResizeSurfaceGeometry(
+          {
+            ...currentGeometry,
+            width: currentGeometry.width + axis.x * step,
+            height: (currentGeometry.height ?? rect.height) + axis.y * step,
+            isUserModified: true,
+            hasUserResized: true
+          },
+          viewport
+        );
+      });
+    }, [getClampOptions]);
+    const runKeyboardInteractionFrame = useCallback(
+      (timestamp) => {
+        const mode = keyboardInteractionModeRef.current;
+        const pressedKeys = pressedArrowKeysRef.current;
+        if (!mode || !hasPressedSurfaceArrowKey(pressedKeys)) {
+          clearKeyboardInteraction();
+          return;
+        }
+        const axis = getKeyboardAxisDelta(pressedKeys);
+        if (!hasKeyboardAxisDelta(axis)) {
+          cancelKeyboardAnimationFrame();
+          return;
+        }
+        const lastStepTimestamp = keyboardLastStepTimestampRef.current;
+        if (lastStepTimestamp === null || timestamp - lastStepTimestamp >= SURFACE_KEYBOARD_STEP_INTERVAL_MS) {
+          keyboardLastStepTimestampRef.current = timestamp;
+          applyKeyboardInteractionStep();
+        }
+        keyboardAnimationFrameRef.current = window.requestAnimationFrame(
+          runKeyboardInteractionFrame
+        );
+      },
+      [
+        applyKeyboardInteractionStep,
+        cancelKeyboardAnimationFrame,
+        clearKeyboardInteraction
+      ]
+    );
+    const startKeyboardInteractionLoop = useCallback(() => {
+      if (keyboardAnimationFrameRef.current !== null) return;
+      keyboardLastStepTimestampRef.current = null;
+      keyboardAnimationFrameRef.current = window.requestAnimationFrame(
+        runKeyboardInteractionFrame
+      );
+    }, [runKeyboardInteractionFrame]);
     useOnClickOutside({
       targets: [
-        localRef.current ?? void 0,
+        localElement ?? void 0,
         referenceElement.current ?? void 0
       ],
       onClickOutside: () => {
@@ -114,10 +501,12 @@ const SurfaceContent = forwardRef(
       layerId
     });
     const updatePosition = useCallback(async () => {
-      if (!localRef.current || !referenceElement.current) return;
+      if (isDrawerMode || !localRef.current || !referenceElement.current)
+        return;
+      const surfaceElement = localRef.current;
       const position = await computePosition(
         referenceElement.current,
-        localRef.current,
+        surfaceElement,
         {
           placement: "bottom-start",
           middleware: [
@@ -129,14 +518,15 @@ const SurfaceContent = forwardRef(
                 "top-start",
                 "top-end"
               ],
-              padding: 8
+              padding: SURFACE_VIEWPORT_PADDING
             }),
-            shift({ padding: 8 }),
+            shift({ padding: SURFACE_VIEWPORT_PADDING }),
             size({
-              padding: 8,
+              padding: SURFACE_VIEWPORT_PADDING,
               apply({ availableHeight, availableWidth, elements }) {
+                const isUserModified = elements.floating.getAttribute("data-user-modified") === "true";
                 Object.assign(elements.floating.style, {
-                  width: resolvedWidth,
+                  width: isUserModified ? elements.floating.style.width : resolvedWidth,
                   maxWidth: `${Math.max(0, availableWidth)}px`,
                   maxHeight: `min(${resolvedMaxHeight}, ${Math.max(0, availableHeight)}px)`
                 });
@@ -145,24 +535,65 @@ const SurfaceContent = forwardRef(
           ]
         }
       );
-      localRef.current.style.left = `${position.x}px`;
-      localRef.current.style.top = `${position.y}px`;
-    }, [referenceElement, resolvedMaxHeight, resolvedWidth]);
+      const viewport = getViewportSize();
+      const measuredWidth = getElementDimension(
+        surfaceElement,
+        resolvedWidth,
+        325);
+      const measuredHeight = getMeasuredSurfaceHeight(surfaceElement);
+      const clampOptions = getClampOptions(measuredHeight);
+      setGeometry((currentGeometry) => {
+        if (currentGeometry?.isUserModified) {
+          return clampSurfaceGeometry(currentGeometry, viewport, clampOptions);
+        }
+        return clampSurfaceGeometry(
+          {
+            x: position.x,
+            y: position.y,
+            width: measuredWidth,
+            height: null,
+            isUserModified: false,
+            hasUserResized: false
+          },
+          viewport,
+          clampOptions
+        );
+      });
+    }, [
+      getClampOptions,
+      isDrawerMode,
+      referenceElement,
+      resolvedMaxHeight,
+      resolvedWidth
+    ]);
     useEffect(() => {
-      if (!open || !localRef.current || !referenceElement.current) return;
+      if (isDrawerMode || !open || !localRef.current || !referenceElement.current) {
+        return;
+      }
       return autoUpdate(referenceElement.current, localRef.current, () => {
         void updatePosition();
       });
-    }, [open, referenceElement, updatePosition]);
+    }, [isDrawerMode, open, referenceElement, updatePosition]);
     useEffect(() => {
       if (!localRef.current) return;
       if (open) {
         safeShowPopover(localRef.current);
-        void updatePosition();
+        if (!isDrawerMode) {
+          void updatePosition();
+        }
         return;
       }
+      interactionRef.current = { type: "idle" };
+      clearKeyboardInteraction();
+      setGeometry(null);
       safeHidePopover(localRef.current);
-    }, [open, updatePosition]);
+    }, [clearKeyboardInteraction, isDrawerMode, open, updatePosition]);
+    useEffect(() => {
+      if (!isDrawerMode) return;
+      interactionRef.current = { type: "idle" };
+      clearKeyboardInteraction();
+      setGeometry(null);
+    }, [clearKeyboardInteraction, isDrawerMode]);
     useEffect(() => {
       if (!open) return;
       registerLayer(layerId);
@@ -170,6 +601,11 @@ const SurfaceContent = forwardRef(
         unregisterLayer(layerId);
       };
     }, [layerId, open]);
+    useEffect(() => {
+      return () => {
+        clearKeyboardInteraction();
+      };
+    }, [clearKeyboardInteraction]);
     useEffect(() => {
       if (!open || !initialFocusRef?.current) return;
       const focusHandle = window.requestAnimationFrame(() => {
@@ -179,10 +615,8 @@ const SurfaceContent = forwardRef(
         window.cancelAnimationFrame(focusHandle);
       };
     }, [initialFocusRef, open]);
-    useEffect(() => {
-      const surfaceElement = localRef.current;
-      if (!surfaceElement) return;
-      const handleSurfaceKeyDown = (event) => {
+    const handleSurfaceKeyDown = useCallback(
+      (event) => {
         onKeyDown?.(event);
         if (event.defaultPrevented) return;
         if (event.key === "Escape") {
@@ -190,73 +624,286 @@ const SurfaceContent = forwardRef(
           event.stopPropagation();
           handleCancel();
         }
-      };
-      surfaceElement.addEventListener("keydown", handleSurfaceKeyDown);
-      return () => {
-        surfaceElement.removeEventListener("keydown", handleSurfaceKeyDown);
-      };
-    }, [handleCancel, onKeyDown]);
+      },
+      [handleCancel, onKeyDown]
+    );
+    const handleDragPointerDown = useCallback(
+      (event) => {
+        if (event.button !== 0 || isDrawerMode || !geometry) return;
+        event.preventDefault();
+        event.currentTarget.setPointerCapture(event.pointerId);
+        interactionRef.current = {
+          type: "dragging",
+          pointerId: event.pointerId,
+          startClientX: event.clientX,
+          startClientY: event.clientY,
+          startX: geometry.x,
+          startY: geometry.y
+        };
+      },
+      [geometry, isDrawerMode]
+    );
+    const handleResizePointerDown = useCallback(
+      (event) => {
+        if (event.button !== 0 || isDrawerMode || !geometry || !localRef.current) {
+          return;
+        }
+        const rect = localRef.current.getBoundingClientRect();
+        event.preventDefault();
+        event.currentTarget.setPointerCapture(event.pointerId);
+        interactionRef.current = {
+          type: "resizing",
+          pointerId: event.pointerId,
+          startClientX: event.clientX,
+          startClientY: event.clientY,
+          startWidth: rect.width > 0 ? rect.width : geometry.width,
+          startHeight: geometry.height ?? rect.height
+        };
+      },
+      [geometry, isDrawerMode]
+    );
+    const handleInteractionPointerMove = useCallback(
+      (event) => {
+        const interaction = interactionRef.current;
+        if (interaction.type === "idle" || interaction.pointerId !== event.pointerId) {
+          return;
+        }
+        event.preventDefault();
+        const deltaX = event.clientX - interaction.startClientX;
+        const deltaY = event.clientY - interaction.startClientY;
+        const viewport = getViewportSize();
+        const measuredHeight = localRef.current ? getMeasuredSurfaceHeight(localRef.current) : void 0;
+        const clampOptions = getClampOptions(measuredHeight);
+        setGeometry((currentGeometry) => {
+          if (!currentGeometry) return currentGeometry;
+          if (interaction.type === "dragging") {
+            return clampSurfaceGeometry(
+              {
+                ...currentGeometry,
+                x: interaction.startX + deltaX,
+                y: interaction.startY + deltaY,
+                isUserModified: true
+              },
+              viewport,
+              clampOptions
+            );
+          }
+          return clampActiveResizeSurfaceGeometry(
+            {
+              ...currentGeometry,
+              width: interaction.startWidth + deltaX,
+              height: interaction.startHeight + deltaY,
+              isUserModified: true,
+              hasUserResized: true
+            },
+            viewport
+          );
+        });
+      },
+      [getClampOptions]
+    );
+    const handleInteractionPointerEnd = useCallback(
+      (event) => {
+        const interaction = interactionRef.current;
+        if (interaction.type === "idle" || interaction.pointerId !== event.pointerId) {
+          return;
+        }
+        const shouldRestoreIntersection = interaction.type === "resizing";
+        if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+          event.currentTarget.releasePointerCapture(event.pointerId);
+        }
+        interactionRef.current = { type: "idle" };
+        if (shouldRestoreIntersection) {
+          restoreResizeIntersection();
+        }
+      },
+      [restoreResizeIntersection]
+    );
+    const handleDragKeyboardInteractionBlur = useCallback(() => {
+      clearKeyboardInteraction();
+    }, [clearKeyboardInteraction]);
+    const handleResizeKeyboardInteractionBlur = useCallback(() => {
+      restoreResizeIntersection();
+      clearKeyboardInteraction();
+    }, [clearKeyboardInteraction, restoreResizeIntersection]);
+    const handleDragKeyDown = useCallback(
+      (event) => {
+        if (isDrawerMode || !isSurfaceArrowKey(event.key)) return;
+        event.preventDefault();
+        event.stopPropagation();
+        pressedArrowKeysRef.current[event.key] = true;
+        keyboardShiftKeyRef.current = event.shiftKey;
+        keyboardInteractionModeRef.current = "drag";
+        startKeyboardInteractionLoop();
+      },
+      [isDrawerMode, startKeyboardInteractionLoop]
+    );
+    const handleDragKeyUp = useCallback(
+      (event) => {
+        if (isDrawerMode || !isSurfaceArrowKey(event.key)) return;
+        event.preventDefault();
+        event.stopPropagation();
+        pressedArrowKeysRef.current[event.key] = false;
+        keyboardShiftKeyRef.current = event.shiftKey;
+        if (!hasPressedSurfaceArrowKey(pressedArrowKeysRef.current)) {
+          clearKeyboardInteraction();
+          return;
+        }
+        keyboardInteractionModeRef.current = "drag";
+        if (hasKeyboardAxisDelta(
+          getKeyboardAxisDelta(pressedArrowKeysRef.current)
+        )) {
+          startKeyboardInteractionLoop();
+        }
+      },
+      [clearKeyboardInteraction, isDrawerMode, startKeyboardInteractionLoop]
+    );
+    const handleResizeKeyDown = useCallback(
+      (event) => {
+        if (isDrawerMode || !isSurfaceArrowKey(event.key)) return;
+        event.preventDefault();
+        event.stopPropagation();
+        pressedArrowKeysRef.current[event.key] = true;
+        keyboardShiftKeyRef.current = event.shiftKey;
+        keyboardInteractionModeRef.current = "resize";
+        startKeyboardInteractionLoop();
+      },
+      [isDrawerMode, startKeyboardInteractionLoop]
+    );
+    const handleResizeKeyUp = useCallback(
+      (event) => {
+        if (isDrawerMode || !isSurfaceArrowKey(event.key)) return;
+        event.preventDefault();
+        event.stopPropagation();
+        pressedArrowKeysRef.current[event.key] = false;
+        keyboardShiftKeyRef.current = event.shiftKey;
+        if (!hasPressedSurfaceArrowKey(pressedArrowKeysRef.current)) {
+          restoreResizeIntersection();
+          clearKeyboardInteraction();
+          return;
+        }
+        keyboardInteractionModeRef.current = "resize";
+        if (hasKeyboardAxisDelta(
+          getKeyboardAxisDelta(pressedArrowKeysRef.current)
+        )) {
+          startKeyboardInteractionLoop();
+        }
+      },
+      [
+        clearKeyboardInteraction,
+        isDrawerMode,
+        restoreResizeIntersection,
+        startKeyboardInteractionLoop
+      ]
+    );
     const defaultLabelProps = !("aria-label" in rest) && !("aria-labelledby" in rest) && title ? { "aria-labelledby": titleId } : {};
     const dialogProps = {
-      role: "dialog",
+      role: open ? "dialog" : void 0,
       "aria-modal": false
     };
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ...rest,
-        ...defaultLabelProps,
-        id: surfaceId,
-        ref: surfaceRef,
-        popover: "manual",
-        ...dialogProps,
-        tabIndex: -1,
-        className: cx(className, styles$i["surface"], portalScopeClassNames),
-        style: {
-          ...style,
-          width: resolvedWidth,
-          maxHeight: resolvedMaxHeight
-        },
-        "data-anv": "surface-content",
-        children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cx(styles$i["header"], {
-                [styles$i["header-bottom-border"]]: title
-              }),
-              children: [
-                /* @__PURE__ */ jsx("div", { className: styles$i["header-copy"], children: title ? /* @__PURE__ */ jsx("div", { id: titleId, className: styles$i["title"], children: title }) : null }),
-                /* @__PURE__ */ jsxs("div", { className: styles$i["header-actions"], children: [
-                  headerContent,
-                  /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      appearance: "ghost",
-                      "aria-label": closeButtonLabel,
-                      className: styles$i["close-button"],
-                      "data-anv": "surface-close-button",
-                      icon: SvgClose,
-                      onClick: onClose,
-                      size: "small",
-                      type: "button"
-                    }
-                  )
-                ] })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cx(styles$i["content"], {
-                [styles$i["content-title-spacing"]]: title
-              }),
-              children
-            }
-          )
-        ]
-      }
+    const surfaceStyle = isDrawerMode ? { ...style } : {
+      ...style,
+      left: geometry ? `${geometry.x}px` : void 0,
+      top: geometry ? `${geometry.y}px` : void 0,
+      width: geometry ? `${geometry.width}px` : resolvedWidth,
+      maxWidth: geometry ? `${getMaxSurfaceWidth(getViewportSize(), geometry.x)}px` : void 0,
+      height: geometry?.hasUserResized && geometry.height !== null ? `${geometry.height}px` : void 0,
+      maxHeight: geometry?.hasUserResized && geometry.height !== null ? void 0 : resolvedMaxHeight
+    };
+    return (
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- Surface dialog handles keyboard shortcuts for moving and resizing its nested controls.
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...rest,
+          ...defaultLabelProps,
+          id: surfaceId,
+          ref: surfaceRef,
+          popover: "manual",
+          ...dialogProps,
+          tabIndex: -1,
+          className: cx(className, styles$i["surface"], portalScopeClassNames),
+          style: surfaceStyle,
+          onKeyDown: handleSurfaceKeyDown,
+          "data-anv": "surface-content",
+          "data-surface-variant": isDrawerMode ? "drawer" : "popover",
+          "data-user-modified": geometry?.isUserModified ? "true" : void 0,
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cx(styles$i["header"], {
+                  [styles$i["header-bottom-border"]]: title
+                }),
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: styles$i["header-copy"], children: title ? /* @__PURE__ */ jsx("div", { id: titleId, className: styles$i["title"], children: title }) : null }),
+                  /* @__PURE__ */ jsxs("div", { className: styles$i["header-actions"], children: [
+                    headerContent,
+                    !isDrawerMode ? /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        appearance: "ghost",
+                        "aria-label": "Move surface",
+                        className: styles$i["drag-handle"],
+                        "data-anv": "surface-drag-handle",
+                        icon: SvgDragIndicator,
+                        onBlur: handleDragKeyboardInteractionBlur,
+                        onKeyDown: handleDragKeyDown,
+                        onKeyUp: handleDragKeyUp,
+                        onPointerCancel: handleInteractionPointerEnd,
+                        onPointerDown: handleDragPointerDown,
+                        onPointerMove: handleInteractionPointerMove,
+                        onPointerUp: handleInteractionPointerEnd,
+                        size: "small",
+                        type: "button"
+                      }
+                    ) : null,
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        appearance: "ghost",
+                        "aria-label": closeButtonLabel,
+                        className: styles$i["close-button"],
+                        "data-anv": "surface-close-button",
+                        icon: SvgClose,
+                        onClick: onClose,
+                        size: "small",
+                        type: "button"
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cx(styles$i["content"], {
+                  [styles$i["content-title-spacing"]]: title
+                }),
+                children
+              }
+            ),
+            !isDrawerMode ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                "aria-label": "Resize surface",
+                className: styles$i["resize-handle"],
+                "data-anv": "surface-resize-handle",
+                onBlur: handleResizeKeyboardInteractionBlur,
+                onKeyDown: handleResizeKeyDown,
+                onKeyUp: handleResizeKeyUp,
+                onPointerDown: handleResizePointerDown,
+                onPointerMove: handleInteractionPointerMove,
+                onPointerUp: handleInteractionPointerEnd,
+                onPointerCancel: handleInteractionPointerEnd,
+                type: "button",
+                children: /* @__PURE__ */ jsx(SvgResizeWindowAlt, { "aria-hidden": "true", "data-anv": "icon" })
+              }
+            ) : null
+          ]
+        }
+      )
     );
   }
 );
@@ -311,19 +958,19 @@ const booleanFormatter = (value, { trueLabel = "True", falseLabel = "False" } =
 };
 
 const styles$h = {
-	"table-header-cell": "_table-header-cell_14omv_4",
-	"table-body-cell": "_table-body-cell_14omv_5",
-	"table-footer-cell": "_table-footer-cell_14omv_6",
-	"last-pinned-left-column": "_last-pinned-left-column_14omv_30",
-	"first-pinned-right-column": "_first-pinned-right-column_14omv_30",
-	"first-pinned-left-column": "_first-pinned-left-column_14omv_51",
-	"last-pinned-right-column": "_last-pinned-right-column_14omv_56",
-	"empty-cell": "_empty-cell_14omv_65",
-	"table-cell-internal-select": "_table-cell-internal-select_14omv_82",
-	"table-cell-internal-expand": "_table-cell-internal-expand_14omv_86",
-	"table-header-cell-sortable": "_table-header-cell-sortable_14omv_91",
-	"table-header-cell-interactive": "_table-header-cell-interactive_14omv_92",
-	"table-header-cell-group": "_table-header-cell-group_14omv_96"
+	"table-header-cell": "_table-header-cell_11yr3_4",
+	"table-body-cell": "_table-body-cell_11yr3_5",
+	"table-footer-cell": "_table-footer-cell_11yr3_6",
+	"last-pinned-left-column": "_last-pinned-left-column_11yr3_30",
+	"first-pinned-right-column": "_first-pinned-right-column_11yr3_30",
+	"first-pinned-left-column": "_first-pinned-left-column_11yr3_51",
+	"last-pinned-right-column": "_last-pinned-right-column_11yr3_56",
+	"empty-cell": "_empty-cell_11yr3_73",
+	"table-cell-internal-select": "_table-cell-internal-select_11yr3_90",
+	"table-cell-internal-expand": "_table-cell-internal-expand_11yr3_94",
+	"table-header-cell-sortable": "_table-header-cell-sortable_11yr3_99",
+	"table-header-cell-interactive": "_table-header-cell-interactive_11yr3_100",
+	"table-header-cell-group": "_table-header-cell-group_11yr3_104"
 };
 
 const TableEmptyCellContent = () => {
@@ -587,7 +1234,17 @@ const dateTimeFormatter = (value, {
   return localizedDateTime.toLocaleString(formatOptions);
 };
 
-const SUPPORTED_INLINE_TAGS = ["strong", "b", "em", "i", "code", "mark"];
+const SUPPORTED_INLINE_TAGS = [
+  "strong",
+  "b",
+  "em",
+  "i",
+  "code",
+  "mark",
+  "s",
+  "strike",
+  "del"
+];
 const INLINE_TAG_REGEX = new RegExp(
   `<(${SUPPORTED_INLINE_TAGS.join("|")})(\\s[^>]*)?>([\\s\\S]*?)</\\1>`,
   "gi"
@@ -598,7 +1255,10 @@ const INLINE_WRAPPERS = {
   em: ["*", "*"],
   i: ["*", "*"],
   code: ["`", "`"],
-  mark: ["==", "=="]
+  mark: ["==", "=="],
+  s: ["~~", "~~"],
+  strike: ["~~", "~~"],
+  del: ["~~", "~~"]
 };
 function convertInlineTags(html) {
   let result = html;
@@ -614,9 +1274,25 @@ function convertInlineTags(html) {
   }
   return result;
 }
+const UNWRAP_TAGS = ["u", "span"];
+const UNWRAP_TAG_REGEX = new RegExp(
+  `</?(?:${UNWRAP_TAGS.join("|")})(\\s[^>]*)?>`,
+  "gi"
+);
+function unwrapTags(html) {
+  return html.replace(UNWRAP_TAG_REGEX, "");
+}
 const BR_REGEX = /<br\s*\/?>/gi;
 const P_OPEN_REGEX = /<p(\s[^>]*)?>/gi;
 const P_CLOSE_REGEX = /<\/p>/gi;
+const HEADING_REGEX$1 = /<h([1-3])(\s[^>]*)?>([\s\S]*?)<\/h\1>/gi;
+function convertHeadings(html) {
+  return html.replace(HEADING_REGEX$1, (_, level, _attrs, content) => {
+    const hashes = "#".repeat(Number(level));
+    return `${hashes} ${content.trim()}
+`;
+  });
+}
 const NAMED_ENTITIES = {
   amp: "&",
   lt: "<",
@@ -644,6 +1320,12 @@ const SUPPORTED_TAGS = [
   "i",
   "code",
   "mark",
+  "s",
+  "strike",
+  "del",
+  "h1",
+  "h2",
+  "h3",
   "ul",
   "ol",
   "li",
@@ -693,7 +1375,9 @@ function htmlToMarkdown(value) {
     return "";
   }
   let result = value;
+  result = unwrapTags(result);
   result = removeUnsupportedTags(result);
+  result = convertHeadings(result);
   result = result.replace(P_OPEN_REGEX, "");
   result = result.replace(P_CLOSE_REGEX, "\n");
   result = convertLists(result);
@@ -704,20 +1388,27 @@ function htmlToMarkdown(value) {
   return result;
 }
 
-const highlight = "_highlight_1t8gj_1";
-const code = "_code_1t8gj_7";
-const list = "_list_1t8gj_15";
-const container = "_container_1t8gj_23";
+const highlight = "_highlight_16fej_1";
+const code = "_code_16fej_7";
+const list = "_list_16fej_15";
+const container = "_container_16fej_23";
+const heading1 = "_heading1_16fej_29";
+const heading2 = "_heading2_16fej_30";
+const heading3 = "_heading3_16fej_31";
 const styles$f = {
 	highlight: highlight,
 	code: code,
 	list: list,
-	container: container
+	container: container,
+	heading1: heading1,
+	heading2: heading2,
+	heading3: heading3
 };
 
-const INLINE_REGEX = /\*\*\*(.+?)\*\*\*|\*\*(.+?)\*\*|\*(.+?)\*|==(.+?)==|`(.+?)`/g;
+const INLINE_REGEX = /\*\*\*(.+?)\*\*\*|\*\*(.+?)\*\*|\*(.+?)\*|==(.+?)==|`(.+?)`|~~(.+?)~~/g;
 const UNORDERED_LIST_REGEX = /^- (.+)$/;
 const ORDERED_LIST_REGEX = /^\d+\. (.+)$/;
+const HEADING_REGEX = /^(#{1,3}) +(\S.*)$/;
 function parseInline(text) {
   const parts = [];
   let lastIndex = 0;
@@ -745,6 +1436,8 @@ function parseInline(text) {
       parts.push(
         /* @__PURE__ */ jsx("code", { className: styles$f.code, children: match[5] }, key)
       );
+    } else if (match[6]) {
+      parts.push(/* @__PURE__ */ jsx("s", { children: parseInline(match[6]) }, key));
     }
     INLINE_REGEX.lastIndex = savedIndex;
     lastIndex = savedIndex;
@@ -760,9 +1453,17 @@ function parseBlocks(text) {
   let i = 0;
   while (i < lines.length) {
     const line = lines[i];
+    const headingMatch = line.match(HEADING_REGEX);
     const ulMatch = line.match(UNORDERED_LIST_REGEX);
     const olMatch = line.match(ORDERED_LIST_REGEX);
-    if (ulMatch) {
+    if (headingMatch) {
+      blocks.push({
+        type: "heading",
+        level: headingMatch[1].length,
+        content: headingMatch[2]
+      });
+      i++;
+    } else if (ulMatch) {
       const items = [ulMatch[1]];
       i++;
       while (i < lines.length) {
@@ -796,6 +1497,8 @@ function renderBlocks(blocks) {
     switch (block.type) {
       case "text":
         return /* @__PURE__ */ jsx("span", { children: parseInline(block.content) }, index);
+      case "heading":
+        return /* @__PURE__ */ jsx("span", { className: styles$f[`heading${block.level}`], children: parseInline(block.content) }, index);
       case "ul":
         return /* @__PURE__ */ jsx("ul", { className: styles$f.list, children: block.items.map((item, i) => /* @__PURE__ */ jsx("li", { children: parseInline(item) }, i)) }, index);
       case "ol":
@@ -4364,9 +5067,9 @@ const getCommonPinningClasses = (column) => {
 };
 
 const styles$c = {
-	"data-table-body-cell-affordance-container": "_data-table-body-cell-affordance-container_1e9zz_1",
-	"data-table-body-cell-affordance-host": "_data-table-body-cell-affordance-host_1e9zz_6",
-	"data-table-body-cell-affordance-container-interactive": "_data-table-body-cell-affordance-container-interactive_1e9zz_21"
+	"data-table-body-cell-affordance-container": "_data-table-body-cell-affordance-container_1eir6_1",
+	"data-table-body-cell-affordance-host": "_data-table-body-cell-affordance-host_1eir6_6",
+	"data-table-body-cell-affordance-container-interactive": "_data-table-body-cell-affordance-container-interactive_1eir6_21"
 };
 
 const dataTableCellAffordanceHostClassName = styles$c["data-table-body-cell-affordance-host"];
@@ -4415,20 +5118,20 @@ const styles$b = {
 	"data-table-body-cell-input": "_data-table-body-cell-input_1t30b_4"};
 
 const styles$a = {
-	"data-table-body-cell": "_data-table-body-cell_bmoq4_4",
-	"data-table-body-cell-input": "_data-table-body-cell-input_bmoq4_5",
-	"table-body-cell": "_table-body-cell_bmoq4_10",
-	"table-header-cell": "_table-header-cell_bmoq4_11",
-	"table-footer-cell": "_table-footer-cell_bmoq4_12",
-	"data-table-cell-content": "_data-table-cell-content_bmoq4_24",
-	"data-table-cell-overflow-content": "_data-table-cell-overflow-content_bmoq4_46",
-	"data-table-body-cell-editing": "_data-table-body-cell-editing_bmoq4_53",
-	"data-table-header-cell": "_data-table-header-cell_bmoq4_54",
-	"data-table-footer-cell": "_data-table-footer-cell_bmoq4_57",
-	"data-table-body-cell-error": "_data-table-body-cell-error_bmoq4_107",
-	"data-table-body-cell-warning": "_data-table-body-cell-warning_bmoq4_122",
-	"cell-error-icon": "_cell-error-icon_bmoq4_132",
-	"cell-warning-icon": "_cell-warning-icon_bmoq4_137"
+	"data-table-body-cell": "_data-table-body-cell_105ir_4",
+	"data-table-body-cell-input": "_data-table-body-cell-input_105ir_5",
+	"table-body-cell": "_table-body-cell_105ir_10",
+	"table-header-cell": "_table-header-cell_105ir_11",
+	"table-footer-cell": "_table-footer-cell_105ir_12",
+	"data-table-cell-content": "_data-table-cell-content_105ir_24",
+	"data-table-cell-overflow-content": "_data-table-cell-overflow-content_105ir_45",
+	"data-table-body-cell-editing": "_data-table-body-cell-editing_105ir_52",
+	"data-table-header-cell": "_data-table-header-cell_105ir_53",
+	"data-table-footer-cell": "_data-table-footer-cell_105ir_56",
+	"data-table-body-cell-error": "_data-table-body-cell-error_105ir_109",
+	"data-table-body-cell-warning": "_data-table-body-cell-warning_105ir_124",
+	"cell-error-icon": "_cell-error-icon_105ir_134",
+	"cell-warning-icon": "_cell-warning-icon_105ir_139"
 };
 
 function formatCellPositionString(cellPosition) {
@@ -5786,30 +6489,49 @@ const DataTableEditableBooleanCell = Object.assign(
   { displayName: "DataTableEditableBooleanCell" }
 );
 
+const DataTableSurfaceCoordinatorContext = createContext(null);
+
+function useDataTableSurfaceCoordinator() {
+  return useContext(DataTableSurfaceCoordinatorContext);
+}
+
 function isCustomDraftValueUpdater(nextValue) {
   return typeof nextValue === "function";
 }
 function isCustomFieldValueUpdater(nextValue) {
   return typeof nextValue === "function";
 }
+function isObjectDraftValue(value) {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+function getDraftObject(draftValue) {
+  return isObjectDraftValue(draftValue) ? draftValue : {};
+}
 function deriveChangedFields(initialValue, draftValue) {
+  const initialObject = getDraftObject(initialValue);
+  const draftObject = getDraftObject(draftValue);
   const orderedKeys = Array.from(
-    /* @__PURE__ */ new Set([...Object.keys(initialValue), ...Object.keys(draftValue)])
+    /* @__PURE__ */ new Set([...Object.keys(initialObject), ...Object.keys(draftObject)])
   );
   return orderedKeys.filter(
-    (field) => !Object.is(initialValue[field], draftValue[field])
+    (field) => !Object.is(initialObject[field], draftObject[field])
   );
 }
+function deriveIsDirty(initialValue, draftValue, changedFields) {
+  const initialValueIsNullish = initialValue == null;
+  const draftValueIsNullish = draftValue == null;
+  if (initialValueIsNullish || draftValueIsNullish) {
+    return initialValueIsNullish && draftValueIsNullish ? !Object.is(initialValue, draftValue) : true;
+  }
+  return changedFields.length > 0;
+}
 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
-  );
+  const formError = validation.formError;
+  const fieldErrors = Object.values(validation.fieldErrors ?? {});
+  return formError != null && formError !== false || fieldErrors.some((fieldError) => fieldError != null && fieldError !== false);
 }
 function useCustomEditControllerState({
   row,
@@ -5818,7 +6540,9 @@ function useCustomEditControllerState({
   onCloseEditor
 }) {
   const rowId = String(row.id);
-  const initialValueRef = useRef(row[columnId]);
+  const initialValueRef = useRef(
+    row[columnId]
+  );
   const initialValue = initialValueRef.current;
   const [draftValue, setDraftValueState] = useState(initialValue);
   const draftValueRef = useRef(draftValue);
@@ -5829,12 +6553,10 @@ function useCustomEditControllerState({
   );
   const setDraftValue = useCallback(
     (nextValue) => {
-      let resolvedValue = draftValueRef.current;
-      setDraftValueState((previousValue) => {
-        resolvedValue = isCustomDraftValueUpdater(nextValue) ? nextValue(previousValue) : nextValue;
-        draftValueRef.current = resolvedValue;
-        return resolvedValue;
-      });
+      const previousValue = draftValueRef.current;
+      const resolvedValue = isCustomDraftValueUpdater(nextValue) ? nextValue(previousValue) : nextValue;
+      draftValueRef.current = resolvedValue;
+      setDraftValueState(resolvedValue);
       editConfig.onDraftUpdate?.(resolvedValue, rowId);
       return resolvedValue;
     },
@@ -5842,26 +6564,26 @@ function useCustomEditControllerState({
   );
   const setDraftField = useCallback(
     (field, nextValue) => {
-      return setDraftValue((previousValue) => ({
-        ...previousValue,
-        [field]: isCustomFieldValueUpdater(nextValue) ? nextValue(previousValue[field], previousValue) : nextValue
-      }));
+      return setDraftValue((previousValue) => {
+        const previousObject = getDraftObject(previousValue);
+        return {
+          ...previousObject,
+          [field]: isCustomFieldValueUpdater(nextValue) ? nextValue(previousObject[field], previousObject) : nextValue
+        };
+      });
     },
     [setDraftValue]
   );
   const performClose = useCallback(
     (reason, action) => {
       const currentDraftValue = draftValueRef.current;
+      const changedFields2 = deriveChangedFields(initialValue, currentDraftValue);
       const validation2 = getValidation(currentDraftValue);
-      const changedFields2 = deriveChangedFields(
-        initialValue,
-        currentDraftValue
-      );
       const request = {
         reason,
         draftValue: currentDraftValue,
         initialValue,
-        isDirty: changedFields2.length > 0,
+        isDirty: deriveIsDirty(initialValue, currentDraftValue, changedFields2),
         validation: validation2
       };
       if (action === "submit" && editConfig.blockOnValidationError === true && hasValidationErrors(validation2)) {
@@ -5875,24 +6597,26 @@ function useCustomEditControllerState({
       } else {
         draftValueRef.current = initialValue;
         setDraftValueState(initialValue);
-        editConfig.onDraftUpdate?.(initialValue, rowId);
+        editConfig.onDraftUpdate?.(
+          initialValue,
+          rowId
+        );
       }
       onCloseEditor?.();
-      return true;
     },
     [editConfig, getValidation, initialValue, onCloseEditor, rowId]
   );
   const requestClose = useCallback(
     (reason) => {
-      void performClose(reason, reason === "escape" ? "discard" : "submit");
+      performClose(reason, reason === "escape" ? "discard" : "submit");
     },
     [performClose]
   );
   const submit = useCallback(() => {
-    void performClose("programmatic", "submit");
+    performClose("programmatic", "submit");
   }, [performClose]);
   const discard = useCallback(() => {
-    void performClose("programmatic", "discard");
+    performClose("programmatic", "discard");
   }, [performClose]);
   const setInitialFocus = useCallback((focus) => {
     initialFocusRef.current = focus;
@@ -5905,9 +6629,16 @@ function useCustomEditControllerState({
     [requestClose]
   );
   const changedFields = useMemo(
-    () => deriveChangedFields(initialValue, draftValue),
+    () => deriveChangedFields(
+      initialValue,
+      draftValue
+    ),
     [draftValue, initialValue]
   );
+  const isDirty = useMemo(
+    () => deriveIsDirty(initialValue, draftValue, changedFields),
+    [changedFields, draftValue, initialValue]
+  );
   const validation = useMemo(
     () => getValidation(draftValue),
     [draftValue, getValidation]
@@ -5916,7 +6647,7 @@ function useCustomEditControllerState({
     () => ({
       draftValue,
       initialValue,
-      isDirty: changedFields.length > 0,
+      isDirty,
       changedFields,
       validation,
       setDraftValue,
@@ -5933,6 +6664,7 @@ function useCustomEditControllerState({
       draftValue,
       handleSubmit,
       initialValue,
+      isDirty,
       requestClose,
       setDraftValue,
       setInitialFocus,
@@ -6059,23 +6791,25 @@ function DataTableEditableCustomCellInner(props, ref) {
   const closeReasonRef = useRef(
     "outside-click"
   );
+  const shouldRestoreFocusRef = useRef(true);
   const [isOpen, setIsOpen] = useState(false);
   const [tabIndex, setTabIndex] = useState(-1);
   const { moveFocusToCell } = useDTFocusDispatchContext();
+  const surfaceCoordinator = useDataTableSurfaceCoordinator();
   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)) {
+    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
+      expectedType: "non-array object, null, or undefined",
+      receivedType: Array.isArray(cellValue) ? "array" : typeof cellValue
     });
     return false;
   }, [cellValue, columnId]);
@@ -6091,11 +6825,6 @@ function DataTableEditableCustomCellInner(props, ref) {
   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);
@@ -6103,11 +6832,47 @@ function DataTableEditableCustomCellInner(props, ref) {
       setTabIndex(0);
     });
   }, [cellPosition, moveFocusToCell]);
-  const closeSurface = useCallback(() => {
-    customEditControllerRef.current = null;
-    setIsOpen(false);
-    restoreFocusToOriginCell();
-  }, [restoreFocusToOriginCell]);
+  const closeSurface = useCallback(
+    (options = {}) => {
+      customEditControllerRef.current = null;
+      shouldRestoreFocusRef.current = options.restoreFocus ?? shouldRestoreFocusRef.current;
+      setIsOpen(false);
+      surfaceCoordinator?.clear(surfaceId);
+      if (shouldRestoreFocusRef.current) {
+        restoreFocusToOriginCell();
+      }
+      shouldRestoreFocusRef.current = true;
+    },
+    [restoreFocusToOriginCell, surfaceCoordinator, surfaceId]
+  );
+  const beginEditing = useCallback(() => {
+    surfaceCoordinator?.requestOpen({
+      id: surfaceId,
+      close: (options) => {
+        shouldRestoreFocusRef.current = options?.restoreFocus ?? true;
+        if (customEditControllerRef.current) {
+          customEditControllerRef.current.requestClose("programmatic");
+          return;
+        }
+        closeSurface(options);
+      }
+    });
+    shouldRestoreFocusRef.current = true;
+    setIsOpen(true);
+    setTabIndex(0);
+    moveFocusToCell(cellPosition);
+  }, [
+    cellPosition,
+    closeSurface,
+    moveFocusToCell,
+    surfaceCoordinator,
+    surfaceId
+  ]);
+  useEffect(() => {
+    return () => {
+      surfaceCoordinator?.clear(surfaceId);
+    };
+  }, [surfaceCoordinator, surfaceId]);
   const handleSurfaceClose = useCallback(() => {
     const controller = customEditControllerRef.current;
     const reason = closeReasonRef.current;
@@ -6243,6 +7008,7 @@ function DataTableEditableCustomCellInner(props, ref) {
     /* @__PURE__ */ jsxs(
       Surface.Content,
       {
+        intersectionBoundaryRef: surfaceCoordinator?.intersectionBoundaryRef,
         onClose: handleSurfaceClose,
         onCancel: handleSurfaceCancel,
         onClickCapture: handleSurfaceClickCapture,
@@ -6432,6 +7198,7 @@ function DataTableOverflowCell(props) {
   const [isCellHovered, setIsCellHovered] = useState(false);
   const [tabIndex, setTabIndex] = useState(-1);
   const { moveFocus, jumpFocus, moveFocusToCell } = useDTFocusDispatchContext();
+  const surfaceCoordinator = useDataTableSurfaceCoordinator();
   const surfaceTitle = getSurfaceTitle(props);
   const rowCanExpand = cell.row.getCanExpand();
   const rowIsExpanded = cell.row.getIsExpanded();
@@ -6447,6 +7214,7 @@ function DataTableOverflowCell(props) {
   const surfaceInstructionsId = `${surfaceId}-surface-instructions`;
   const isClipped = hasOverflow(overflow);
   const isResizeObserverEnabled = isOpen || isCellFocused || isCellHovered;
+  const shouldRestoreFocusRef = useRef(true);
   const commonPinningStyles = useCommonPinningStyles(cell.column);
   const updateOverflow = useCallback(() => {
     const viewport = viewportRef.current;
@@ -6485,20 +7253,46 @@ function DataTableOverflowCell(props) {
       setTabIndex(0);
     });
   }, [cellPosition, moveFocusToCell]);
+  const closeSurface = useCallback(
+    (options = {}) => {
+      shouldRestoreFocusRef.current = options.restoreFocus ?? shouldRestoreFocusRef.current;
+      setIsOpen(false);
+      surfaceCoordinator?.clear(surfaceId);
+      if (shouldRestoreFocusRef.current) {
+        restoreFocusToOriginCell();
+      }
+      shouldRestoreFocusRef.current = true;
+    },
+    [restoreFocusToOriginCell, surfaceCoordinator, surfaceId]
+  );
   const openSurface = useCallback(() => {
     const nextOverflow = updateOverflow();
     if (!hasOverflow(nextOverflow ?? overflow)) {
       return false;
     }
+    surfaceCoordinator?.requestOpen({
+      id: surfaceId,
+      close: closeSurface
+    });
+    shouldRestoreFocusRef.current = true;
     setIsOpen(true);
     setTabIndex(0);
     moveFocusToCell(cellPosition);
     return true;
-  }, [cellPosition, moveFocusToCell, overflow, updateOverflow]);
-  const closeSurface = useCallback(() => {
-    setIsOpen(false);
-    restoreFocusToOriginCell();
-  }, [restoreFocusToOriginCell]);
+  }, [
+    cellPosition,
+    closeSurface,
+    moveFocusToCell,
+    overflow,
+    surfaceCoordinator,
+    surfaceId,
+    updateOverflow
+  ]);
+  useEffect(() => {
+    return () => {
+      surfaceCoordinator?.clear(surfaceId);
+    };
+  }, [surfaceCoordinator, surfaceId]);
   const handleCellFocus = useCallback(
     (event) => {
       if (event.target !== cellRef.current) {
@@ -6614,7 +7408,7 @@ function DataTableOverflowCell(props) {
     {
       ref: viewportRef,
       className: styles$9["data-table-body-cell-overflow-viewport"],
-      children: /* @__PURE__ */ jsx("div", { className: cx(styles$9["data-table-body-cell-overflow-content"]), children })
+      children: /* @__PURE__ */ jsx("div", { className: styles$9["data-table-body-cell-overflow-content"], children })
     }
   );
   return /* @__PURE__ */ jsxs(Surface, { id: surfaceId, open: isOpen, children: [
@@ -6653,6 +7447,7 @@ function DataTableOverflowCell(props) {
     /* @__PURE__ */ jsx(
       Surface.Content,
       {
+        intersectionBoundaryRef: surfaceCoordinator?.intersectionBoundaryRef,
         initialFocusRef: surfaceContentRef,
         onClose: closeSurface,
         onCancel: closeSurface,
@@ -6695,49 +7490,34 @@ function DataTableBodyCell(props) {
 }
 
 const styles$8 = {
-	"data-table-body-row": "_data-table-body-row_hfxpb_4",
-	"data-table-body-sub-component-row": "_data-table-body-sub-component-row_hfxpb_23",
-	"data-table-body-virtualized": "_data-table-body-virtualized_hfxpb_31",
-	"data-table-body-row-virtualized": "_data-table-body-row-virtualized_hfxpb_37",
-	"data-table-body-sub-component-container": "_data-table-body-sub-component-container_hfxpb_46",
-	"data-table-body-sub-component-content": "_data-table-body-sub-component-content_hfxpb_52",
-	"data-table-body-cell-group": "_data-table-body-cell-group_hfxpb_60",
-	"data-table-body-cell-depth-indent": "_data-table-body-cell-depth-indent_hfxpb_70",
-	"data-table-body-cell-action-depth-indent": "_data-table-body-cell-action-depth-indent_hfxpb_76",
-	"data-table-body-row-activatable": "_data-table-body-row-activatable_hfxpb_89",
-	"data-table-body-row-active": "_data-table-body-row-active_hfxpb_96",
-	"data-table-body-row-ancestor-hovered": "_data-table-body-row-ancestor-hovered_hfxpb_107",
-	"data-table-body-sub-component-row-active": "_data-table-body-sub-component-row-active_hfxpb_111",
-	"data-table-body-row-read-only": "_data-table-body-row-read-only_hfxpb_115",
-	"data-table-body-row-top-active": "_data-table-body-row-top-active_hfxpb_131"
+	"data-table-body-row": "_data-table-body-row_1qb05_4",
+	"data-table-body-sub-component-row": "_data-table-body-sub-component-row_1qb05_32",
+	"data-table-body-virtualized": "_data-table-body-virtualized_1qb05_66",
+	"data-table-body-row-virtualized": "_data-table-body-row-virtualized_1qb05_72",
+	"data-table-body-sub-component-container": "_data-table-body-sub-component-container_1qb05_81",
+	"data-table-body-sub-component-content": "_data-table-body-sub-component-content_1qb05_87",
+	"data-table-body-cell-group": "_data-table-body-cell-group_1qb05_95",
+	"data-table-body-cell-depth-indent": "_data-table-body-cell-depth-indent_1qb05_105",
+	"data-table-body-cell-action-depth-indent": "_data-table-body-cell-action-depth-indent_1qb05_111",
+	"data-table-body-row-read-only": "_data-table-body-row-read-only_1qb05_117"
 };
 
-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 escapeRowIdSelectorValue(value) {
-  if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
-    return CSS.escape(value);
+const HOVER_ATTR = "data-anv-is-hovered-row";
+const SELECTED_ATTR = "data-anv-is-selected-row";
+const HAS_SUB_COMPONENT_ATTR = "data-anv-has-sub-component";
+function hasRowSubComponent(value) {
+  if (typeof value !== "object" || value === null || !("subComponent" in value)) {
+    return false;
   }
-  return value.replace(/\\/g, "\\\\").replace(/"/g, '\\"').replace(/\n/g, "\\a ").replace(/\r/g, "\\d ").replace(/\f/g, "\\c ");
+  return typeof value.subComponent !== "boolean" && value.subComponent != null;
 }
-function getRowElementById(doc, rowId) {
-  const rowIdText = String(rowId);
-  const rowElement = doc.querySelector(
-    `[data-row-id="${escapeRowIdSelectorValue(rowIdText)}"]`
-  );
-  return rowElement?.dataset.rowId === rowIdText ? rowElement : void 0;
-}
-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);
+function collectDescendantRowIds(row, out) {
+  for (const child of row.subRows) {
+    out.push(child.id);
+    if (child.subRows.length > 0) {
+      collectDescendantRowIds(child, out);
     }
   }
-  return out;
 }
 function DataTableBodyRowInner({
   // columnOrder is no longer read directly; the row only needs the
@@ -6753,70 +7533,84 @@ function DataTableBodyRowInner({
   canExpand,
   depth,
   parentRowCanExpand,
-  isActivatable,
-  isActive,
-  isTopMostActive,
-  isReadOnly,
-  onToggleActive
+  isSelected,
+  isSomeSelected,
+  isAncestorSelected,
+  isReadOnly
 }) {
   const visibleCells = row.getVisibleCells();
   const id = row.id;
   const original = row.original;
-  const descendantIds = useMemo(() => collectDescendantIds(row), [row]);
-  const handleRowClick = useCallback(
-    (event) => {
-      if (!isActivatable) return;
-      if (isReadOnly) return;
-      const target = event.target;
-      if (target?.closest(ACTIVATE_IGNORE_SELECTOR)) return;
-      onToggleActive(
-        row.id,
-        descendantIds
-      );
+  const hasSubComponent = hasRowSubComponent(original);
+  const rowRef = useRef(null);
+  const isSelectedRow = isSelected || isSomeSelected || isAncestorSelected;
+  const setRowHover = useCallback(
+    (rowEl, on) => {
+      const apply = (el) => {
+        if (!el) return;
+        if (on) {
+          el.setAttribute(HOVER_ATTR, "true");
+        } else {
+          el.removeAttribute(HOVER_ATTR);
+        }
+      };
+      apply(rowEl);
+      const base = rowEl.closest('[data-anv="data-table-base"]');
+      const scope = base ?? rowEl.ownerDocument;
+      apply(scope.querySelector(`#${CSS.escape(`${row.id}-sub-component`)}`));
+      const descendantIds = [];
+      collectDescendantRowIds(row, descendantIds);
+      for (const childId of descendantIds) {
+        apply(scope.querySelector(`[data-row-id="${CSS.escape(childId)}"]`));
+      }
     },
-    [isActivatable, isReadOnly, onToggleActive, row.id, descendantIds]
+    [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 descendantIds) {
-        const el = getRowElementById(doc, descendantId);
-        el?.classList.add(className);
-      }
+      setRowHover(event.currentTarget, true);
     },
-    [shouldCascadeHover, descendantIds]
+    [setRowHover]
   );
   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 descendantIds) {
-        const el = getRowElementById(doc, descendantId);
-        el?.classList.remove(className);
-      }
+      setRowHover(event.currentTarget, false);
     },
-    [shouldCascadeHover, descendantIds]
+    [setRowHover]
+  );
+  const handleSubComponentMouseEnter = useCallback(
+    (event) => {
+      event.currentTarget.setAttribute(HOVER_ATTR, "true");
+    },
+    []
+  );
+  const handleSubComponentMouseLeave = useCallback(
+    (event) => {
+      event.currentTarget.removeAttribute(HOVER_ATTR);
+    },
+    []
   );
-  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 = getRowElementById(ownerDoc, ancestor.id);
-      if (ancestorEl?.matches(":hover")) {
-        el.classList.add(className);
-        return;
-      }
-      ancestor = ancestor.getParentRow();
+    const rowEl = rowRef.current;
+    if (!rowEl) return;
+    const base = rowEl.closest('[data-anv="data-table-base"]');
+    const scope = base ?? rowEl.ownerDocument;
+    const anyAncestorHovered = row.getParentRows().some((parent) => {
+      const el = scope.querySelector(
+        `[data-row-id="${CSS.escape(parent.id)}"]`
+      );
+      return el?.getAttribute(HOVER_ATTR) === "true";
+    });
+    if (anyAncestorHovered) {
+      rowEl.setAttribute(HOVER_ATTR, "true");
+    }
+    if (rowEl.getAttribute(HOVER_ATTR) === "true") {
+      const subComp = scope.querySelector(
+        `#${CSS.escape(`${row.id}-sub-component`)}`
+      );
+      if (subComp) subComp.setAttribute(HOVER_ATTR, "true");
     }
-  }, [row]);
+  });
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(
       "div",
@@ -6827,16 +7621,14 @@ function DataTableBodyRowInner({
         "aria-expanded": tableHasSubRows && canExpand ? isExpanded : void 0,
         "aria-level": tableHasSubRows && (canExpand || parentRowCanExpand) ? depth + 1 : void 0,
         "data-row-id": row.id,
+        ...hasSubComponent ? { [HAS_SUB_COMPONENT_ATTR]: "true" } : {},
+        ...isSelectedRow ? { [SELECTED_ATTR]: "true" } : {},
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
         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) => {
@@ -6870,14 +7662,16 @@ function DataTableBodyRowInner({
         })()
       }
     ),
-    isExpanded && "subComponent" in original && /* @__PURE__ */ jsx(
+    isExpanded && hasSubComponent && /* @__PURE__ */ jsx(
       "div",
       {
         id: `${id}-sub-component`,
         "aria-hidden": !isExpanded,
-        className: cx(styles$8["data-table-body-sub-component-row"], {
-          [styles$8["data-table-body-sub-component-row-active"]]: isActive
-        }),
+        ...{ [HAS_SUB_COMPONENT_ATTR]: "true" },
+        ...isSelectedRow ? { [SELECTED_ATTR]: "true" } : {},
+        className: styles$8["data-table-body-sub-component-row"],
+        onMouseEnter: handleSubComponentMouseEnter,
+        onMouseLeave: handleSubComponentMouseLeave,
         children: /* @__PURE__ */ jsx("div", { className: styles$8["data-table-body-sub-component-container"], children: /* @__PURE__ */ jsx(Flex, { className: styles$8["data-table-body-sub-component-content"], children: original.subComponent }) })
       }
     )
@@ -6888,7 +7682,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 && prev.isActivatable === next.isActivatable && prev.isActive === next.isActive && prev.isTopMostActive === next.isTopMostActive && prev.isReadOnly === next.isReadOnly && prev.onToggleActive === next.onToggleActive;
+  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.isAncestorSelected === next.isAncestorSelected && prev.isReadOnly === next.isReadOnly;
 }
 const DataTableBodyRow = memo$1(
   DataTableBodyRowInner,
@@ -6930,67 +7724,44 @@ 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,
-  isActivatable,
-  activeRowMap,
-  readOnlyRowMap,
-  onToggleActive
+  readOnlyRowMap
 }) {
   const { columnOrder, columnIndexMap } = useColumnOrder({ table });
   const headerCount = table.getHeaderGroups().length;
-  return /* @__PURE__ */ jsx(Fragment, { children: table.getRowModel().rows.map((row, rowIndex) => /* @__PURE__ */ jsx(
-    DataTableBodyRow,
-    {
-      columnOrder,
-      columnIndexMap,
-      row,
-      rowIndex: rowIndex + headerCount,
-      tableHasSubRows: hasSubRows,
-      isExpanded: row.getIsExpanded(),
-      canExpand: row.getCanExpand(),
-      depth: row.depth,
-      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
-  )) });
+  return /* @__PURE__ */ jsx(Fragment, { children: table.getRowModel().rows.map((row, rowIndex) => {
+    const isAncestorSelected = row.getParentRows().some((parent) => parent.getIsSelected());
+    return /* @__PURE__ */ jsx(
+      DataTableBodyRow,
+      {
+        columnOrder,
+        columnIndexMap,
+        row,
+        rowIndex: rowIndex + headerCount,
+        tableHasSubRows: hasSubRows,
+        isExpanded: row.getIsExpanded(),
+        canExpand: row.getCanExpand(),
+        depth: row.depth,
+        parentRowCanExpand: row.getParentRow()?.getCanExpand() ?? false,
+        isSelected: row.getIsSelected(),
+        isSomeSelected: row.getIsSomeSelected(),
+        isAncestorSelected,
+        isReadOnly: !!readOnlyRowMap[row.id],
+        getRowVersion
+      },
+      row.id
+    );
+  }) });
 }
 function VirtualizedContent({
   table,
   hasSubRows,
   virtualizer,
   getRowVersion,
-  isActivatable,
-  activeRowMap,
-  readOnlyRowMap,
-  onToggleActive
+  readOnlyRowMap
 }) {
   const { columnOrder, columnIndexMap } = useColumnOrder({ table });
   const headerCount = table.getHeaderGroups().length;
@@ -7011,6 +7782,7 @@ function VirtualizedContent({
       style: { height: `${totalSize}px` },
       children: virtualItems.map((virtualRow) => {
         const row = rows[virtualRow.index];
+        const isAncestorSelected = row.getParentRows().some((parent) => parent.getIsSelected());
         return /* @__PURE__ */ jsx(
           "div",
           {
@@ -7032,11 +7804,8 @@ 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),
+                isAncestorSelected,
                 isReadOnly: !!readOnlyRowMap[row.id],
-                onToggleActive,
                 getRowVersion
               }
             )
@@ -7053,10 +7822,7 @@ function DataTableBody(props) {
     hasSubRows,
     virtualizer,
     getRowVersion,
-    isActivatable,
-    activeRowMap,
     readOnlyRowMap,
-    onToggleActive,
     ...rest
   } = props;
   return /* @__PURE__ */ jsx(TableBody, { type: "data-table", ...rest, children: virtualizer ? /* @__PURE__ */ jsx(
@@ -7066,10 +7832,7 @@ function DataTableBody(props) {
       hasSubRows,
       virtualizer,
       getRowVersion,
-      isActivatable,
-      activeRowMap,
-      readOnlyRowMap,
-      onToggleActive
+      readOnlyRowMap
     }
   ) : /* @__PURE__ */ jsx(
     NonVirtualizedContent,
@@ -7077,10 +7840,7 @@ function DataTableBody(props) {
       table,
       hasSubRows,
       getRowVersion,
-      isActivatable,
-      activeRowMap,
-      readOnlyRowMap,
-      onToggleActive
+      readOnlyRowMap
     }
   ) });
 }
@@ -8577,6 +9337,37 @@ function DTFocusProvider({
   return /* @__PURE__ */ jsx(DTFocusStateContext.Provider, { value: state, children: /* @__PURE__ */ jsx(DTFocusDispatchContext.Provider, { value: dispatch, children }) });
 }
 
+function DataTableSurfaceCoordinatorProvider({
+  children,
+  intersectionBoundaryRef
+}) {
+  const activeSurfaceRef = useRef(null);
+  const requestOpen = useCallback(
+    (registration) => {
+      const activeSurface = activeSurfaceRef.current;
+      if (activeSurface && activeSurface.id !== registration.id) {
+        activeSurface.close({ restoreFocus: false });
+      }
+      activeSurfaceRef.current = registration;
+    },
+    []
+  );
+  const clear = useCallback((id) => {
+    if (activeSurfaceRef.current?.id === id) {
+      activeSurfaceRef.current = null;
+    }
+  }, []);
+  const value = useMemo(
+    () => ({
+      requestOpen,
+      clear,
+      intersectionBoundaryRef
+    }),
+    [clear, intersectionBoundaryRef, requestOpen]
+  );
+  return /* @__PURE__ */ jsx(DataTableSurfaceCoordinatorContext.Provider, { value, children });
+}
+
 const VIRTUALIZATION_THRESHOLD = 50;
 const DEFAULT_ESTIMATED_ROW_HEIGHT = 35;
 function useDataTableVirtualizer({
@@ -8617,17 +9408,13 @@ function DataTableInner(props, ref) {
     data: dataProp,
     columns: columnsProp,
     customFooter,
-    defaultActiveRowIds,
     defaultExpandedRowIds,
     defaultSelectedRowIds,
     defaultSortedColumn,
     disableExpandAll,
     disableSelectAll,
     expandedRowIds,
-    activeRowIds,
-    isActivatable,
     isSelectable,
-    onActivateRow,
     onSelectRow,
     readOnlyRowIds,
     onSort,
@@ -8657,41 +9444,10 @@ 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,
@@ -8923,18 +9679,23 @@ function DataTableInner(props, ref) {
             }
           ) });
         },
-        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"
-          }
-        )
+        cell: ({ row }) => {
+          const original = row.original;
+          const isReadOnlyRow = Boolean(readOnlyRowMap[String(original.id)]);
+          return /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              tabIndex: -1,
+              "aria-label": row.getIsSelected() ? "Deselect row" : "Select row",
+              checked: row.getIsSelected(),
+              disabled: !row.getCanSelect(),
+              readOnly: isReadOnlyRow,
+              indeterminate: row.getIsSomeSelected(),
+              onChange: row.getToggleSelectedHandler(),
+              "data-cell-action": "select"
+            }
+          );
+        }
       });
     }
     return tableColumns;
@@ -8946,7 +9707,8 @@ function DataTableInner(props, ref) {
     hasRowStatus,
     hasSubComponent,
     isExpandable,
-    isSelectable
+    isSelectable,
+    readOnlyRowMap
   ]);
   const table = useReactTable({
     data: tableData ?? [],
@@ -9041,6 +9803,7 @@ function DataTableInner(props, ref) {
     [bodyRowCount, headerRowCount, footerLength]
   );
   const isEmpty = !isLoading && (!tableData || tableData.length === 0);
+  const isTrulyEmpty = isEmpty && (isCursorPagination ? !paginationObject?.hasPrevPage && !paginationObject?.hasNextPage : !totalItemCount);
   const { mode: themeMode } = useContext(ThemeProviderContext);
   const { mode: sysMode } = usePrefersColorScheme();
   const colorSchemeMode = themeMode ?? sysMode;
@@ -9086,6 +9849,9 @@ function DataTableInner(props, ref) {
   const columnCount = useMemo(() => {
     return headers.filter((header) => header.subHeaders?.length === 0).length;
   }, [headers]);
+  const containerClassName = cx(className, {
+    [styles["container-with-pagination"]]: pagination && !isTrulyEmpty
+  });
   return /* @__PURE__ */ jsx(
     DTFocusProvider,
     {
@@ -9096,7 +9862,7 @@ function DataTableInner(props, ref) {
       rightPinnedWidth: table.getRightTotalSize(),
       virtualizer: rowVirtualizer,
       headerRowCount,
-      children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx(DataTableSurfaceCoordinatorProvider, { intersectionBoundaryRef: tableRef, children: /* @__PURE__ */ jsxs(
         TableContainer,
         {
           ...rest,
@@ -9105,9 +9871,7 @@ function DataTableInner(props, ref) {
             ...styleCombined,
             width: cssVars["--a2-table-width"]
           },
-          className: cx(className, {
-            [styles["container-with-pagination"]]: pagination
-          }),
+          className: containerClassName,
           children: [
             /* @__PURE__ */ jsxs(
               TableBase,
@@ -9126,10 +9890,7 @@ function DataTableInner(props, ref) {
                       hasSubRows,
                       virtualizer: rowVirtualizer,
                       getRowVersion,
-                      isActivatable,
-                      activeRowMap,
-                      readOnlyRowMap,
-                      onToggleActive: toggleRowActivation
+                      readOnlyRowMap
                     }
                   ),
                   isEmpty && emptyState && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -9178,7 +9939,7 @@ function DataTableInner(props, ref) {
                       }
                     )
                   ] }),
-                  hasFooters && /* @__PURE__ */ jsx(
+                  hasFooters && !isTrulyEmpty && /* @__PURE__ */ jsx(
                     DataTableFooter,
                     {
                       className: pagination ? styles["footer-with-pagination"] : void 0,
@@ -9190,7 +9951,7 @@ function DataTableInner(props, ref) {
                 ]
               }
             ),
-            pagination && (isCursorPagination ? /* @__PURE__ */ jsx(
+            pagination && !isTrulyEmpty && (isCursorPagination ? /* @__PURE__ */ jsx(
               DataTableCursorPagination,
               {
                 itemsPerPage: rowsPerPage,
@@ -9223,11 +9984,11 @@ 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-Dwhwvm6R.js.map
+//# sourceMappingURL=DataTable-FG0Kjx0d.js.map