@ostack.tech/ui 0.11.3 → 0.12.1

package/dist/ostack-ui.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { forwardRef, createContext, useContext, useCallback, useRef, useEffect, useId, useMemo, useState, memo, Fragment as Fragment$1, isValidElement, cloneElement, Children, useImperativeHandle, startTransition, useLayoutEffect as useLayoutEffect$2, useSyncExternalStore, useDeferredValue } from "react";
+import { forwardRef, createContext, useContext, useCallback, useRef, useEffect, useId, useMemo, Children, isValidElement, useState, memo, Fragment as Fragment$1, cloneElement, useImperativeHandle, startTransition, useLayoutEffect as useLayoutEffect$2, useSyncExternalStore, useDeferredValue } from "react";
 import { parseKeybinding, tinykeys } from "tinykeys";
 import fromExponential from "from-exponential";
 import { isValid, isDate, addMonths, isBefore, startOfMonth, isAfter, setMonth, setYear, startOfYear, format, max, min, endOfMonth, isWithinInterval, lastDayOfMonth, isSameDay, isEqual, parseISO, parse } from "date-fns";
@@ -453,6 +453,12 @@ function useCreateDataTableContext({
       subscribeWithSelector((set, get) => ({
         columns,
         leafColumns: leafColumns2,
+        hasFooterCells: computed(
+          () => [get().leafColumns],
+          (leafColumns22) => Object.values(leafColumns22).some(
+            (column) => typeof column.footer !== "boolean" && column.footer != null
+          )
+        ),
         headCount,
         _offset: offset ?? defaultOffset,
         offset: computed(
@@ -536,6 +542,10 @@ function useCreateDataTableContext({
           () => [get().totalCount(), get().loading, get().loadingCount],
           (totalCount, loading2, loadingCount2) => loading2 ? loadingCount2 : totalCount ?? loadingCount2
         ),
+        footCount: computed(
+          () => [get().hasFooterCells()],
+          (hasFooterCells) => hasFooterCells ? 1 : 0
+        ),
         scrolledRangeStart: 1,
         scrolledRangeEnd: 1,
         tableHeadHeight: void 0,
@@ -969,7 +979,7 @@ function useOnFieldLabelChange(cb, { fireImmediately = true } = {}) {
     }
     let prevCleanup;
     const unsubscribe = store.subscribe(
-      (state) => state.label,
+      ({ label }) => label,
       (label) => {
         prevCleanup = cb(label);
       },
@@ -1020,37 +1030,153 @@ const LinkContext = createContext(LINK_CONTEXT_DEFAULT_VALUE);
 function useLinkContext() {
   return useContext(LinkContext);
 }
+const TableColumn = forwardRef(function TableColumn2() {
+  return null;
+});
+function columnsFromChildren(children) {
+  return Children.toArray(children).filter(
+    (child) => isValidElement(child) && child.type === TableColumn
+  ).map((child) => ({
+    ...child.props,
+    subColumns: columnsFromChildren(child.props.children ?? null)
+  }));
+}
+function numberOfRows$1(columns) {
+  return columns.reduce(
+    (n, column) => Math.max(n, numberOfRows$1(column.subColumns) + 1),
+    0
+  );
+}
+function numberOfColumns(columns) {
+  return columns.reduce(
+    (n, column) => n + (column.subColumns.length === 0 ? column.colSpan ?? 1 : numberOfColumns(column.subColumns)),
+    0
+  );
+}
+function columnsOfRow(columns, index) {
+  return index === 0 ? columns : columns.reduce((rowColumns, column) => {
+    rowColumns.push(...columnsOfRow(column.subColumns, index - 1));
+    return rowColumns;
+  }, []);
+}
+function leafColumns$1(columns) {
+  return columns.reduce((leaves, column) => {
+    leaves.push(
+      ...column.subColumns.length === 0 ? [column] : leafColumns$1(column.subColumns)
+    );
+    return leaves;
+  }, []);
+}
+function tableMinWidth(leaves, defaultColumnWidth) {
+  return leaves.reduce(
+    (sum, column) => sum + columnWidth(column, defaultColumnWidth),
+    0
+  ) + "px";
+}
+function tableMaxWidth(leaves, defaultColumnWidth) {
+  return leaves.every((column) => column.fixed) ? tableMinWidth(leaves, defaultColumnWidth) : void 0;
+}
+function columnWidths(leaves, defaultColumnWidth) {
+  const dynamicWidthsSum = leaves.reduce(
+    (sum, column) => sum + (column.fixed ? 0 : columnWidth(column, defaultColumnWidth)),
+    0
+  );
+  return leaves.reduce((widths, column) => {
+    const colSpan = column.colSpan ?? 1;
+    const colWidths = Array.isArray(column.width) ? column.width : (
+      // Distribute the width amongst the columns being spanned
+      new Array(colSpan).fill(
+        columnWidth(column, defaultColumnWidth) / colSpan
+      )
+    );
+    for (let i = 0; i < colSpan; ++i) {
+      const colWidth = colWidths[i] ?? 0;
+      widths.push(
+        column.fixed ? `${colWidth}px` : `${colWidth / dynamicWidthsSum * 100}%`
+      );
+    }
+    return widths;
+  }, []);
+}
+function columnWidth(column, defaultColumnsMinWidth) {
+  return Array.isArray(column.width) ? column.width.reduce((sum, width) => sum + width, 0) : column.width ?? defaultColumnsMinWidth * (column.colSpan ?? 1);
+}
+function leftMostColumns(columns) {
+  if (columns.length === 0) {
+    return [];
+  }
+  const firstColumn = columns[0];
+  return [firstColumn, ...leftMostColumns(firstColumn.subColumns)];
+}
+function rightMostColumns(columns) {
+  if (columns.length === 0) {
+    return [];
+  }
+  const lastColumn = columns[columns.length - 1];
+  return [lastColumn, ...rightMostColumns(lastColumn.subColumns)];
+}
+function leftMostLeafColumn(column) {
+  if (column.subColumns.length === 0) {
+    return column;
+  }
+  return leftMostLeafColumn(column.subColumns[0]);
+}
+function rightMostLeafColumn(column) {
+  const subcolumnsLength = column.subColumns.length;
+  if (subcolumnsLength === 0) {
+    return column;
+  }
+  return rightMostLeafColumn(column.subColumns[subcolumnsLength - 1]);
+}
+function stickyColumnOffsets(leaves, defaultColumnWidth) {
+  const offsets = new Array(leaves.length);
+  let leftSum = 0;
+  let rightSum = 0;
+  for (let i = 0; i < leaves.length; ++i) {
+    const colStart = leaves[i];
+    const colEnd = leaves[leaves.length - 1 - i];
+    if (colStart.sticky === "left") {
+      offsets[i] = leftSum;
+      leftSum += columnWidth(colStart, defaultColumnWidth);
+    }
+    if (colEnd.sticky === "right") {
+      offsets[leaves.length - 1 - i] = rightSum;
+      rightSum += columnWidth(colEnd, defaultColumnWidth);
+    }
+  }
+  return offsets;
+}
 const TableContext = createContext(null);
-function useCreateTableContext(editable, status, layout, defaultColumnWidth, onTableMinWidthChange, onTableMaxWidthChange) {
+function useCreateTableContext({
+  editable,
+  status,
+  layout,
+  defaultColumnWidth
+}) {
   const store = useConstant(
     () => createStore()(
-      subscribeWithSelector((_set) => ({
+      subscribeWithSelector((_set, get) => ({
         scrollPosition: void 0,
-        numberOfColumns: void 0,
-        columnWidths: void 0
+        leafColumns: void 0,
+        defaultColumnWidth,
+        stickyColumnOffsets: computed(
+          () => [get().leafColumns, get().defaultColumnWidth],
+          (leaves, defaultColumnWidth2) => leaves && stickyColumnOffsets(leaves, defaultColumnWidth2)
+        )
       }))
     )
   );
-  return useMemo(
-    () => ({
+  useEffect(() => {
+    store.setState({ defaultColumnWidth });
+  }, [defaultColumnWidth, store]);
+  return useMemo(() => {
+    return {
       editable,
       status,
       layout,
-      defaultColumnWidth,
-      onTableMinWidthChange,
-      onTableMaxWidthChange,
       store
-    }),
-    [
-      defaultColumnWidth,
-      editable,
-      layout,
-      onTableMaxWidthChange,
-      onTableMinWidthChange,
-      status,
-      store
-    ]
-  );
+    };
+  }, [editable, layout, status, store]);
 }
 function useTableContext() {
   const tableContext = useContext(TableContext);
@@ -1061,7 +1187,7 @@ function useTableContext() {
 }
 function useTableNumberOfColumns() {
   const { store } = useTableContext();
-  return useStore$1(store, (state) => state.numberOfColumns);
+  return useStore$1(store, (state) => state.leafColumns?.length);
 }
 const TableHeadContext = createContext(false);
 function useIsInTableHead() {
@@ -1094,6 +1220,87 @@ function ClearContexts({
   }
   return result;
 }
+function useCssVars(options) {
+  const contextPrefix = usePrefix();
+  const prefix = options?.prefix ?? contextPrefix;
+  const cssVarName = useCallback(
+    (name) => `--${prefix(name)}`,
+    [prefix]
+  );
+  const cssVar = useCallback(
+    (name, fallback) => `var(${cssVarName(name)}${// eslint-disable-next-line @typescript-eslint/no-base-to-string
+    fallback != null ? `, ${String(fallback)}` : ""})`,
+    [cssVarName]
+  );
+  const cssVarStyle = useCallback(
+    (name, value) => value != null ? (
+      // eslint-disable-next-line @typescript-eslint/no-base-to-string
+      { [cssVarName(name)]: String(value) }
+    ) : void 0,
+    [cssVarName]
+  );
+  const cssToggler = useCallback(
+    (value) => cssVar(`toggler-${value}`, null),
+    [cssVar]
+  );
+  return useMemo(
+    () => ({ cssVarName, cssVar, cssVarStyle, cssToggler }),
+    [cssToggler, cssVar, cssVarName, cssVarStyle]
+  );
+}
+const LayerContext = createContext([]);
+function useLayerZIndex() {
+  return computeLayerZIndex(useContext(LayerContext));
+}
+function computeLayerZIndex(zIndices) {
+  let zIndexSum;
+  let zIndexStrings;
+  for (const zIndex of zIndices) {
+    if (typeof zIndex === "number") {
+      zIndexSum = (zIndexSum ?? 0) + zIndex;
+    } else {
+      (zIndexStrings ??= []).push(zIndex);
+    }
+  }
+  if (zIndexStrings === void 0) {
+    return zIndexSum === void 0 ? "auto" : zIndexSum.toString();
+  }
+  if (zIndexSum === void 0) {
+    return zIndexStrings.length === 1 ? zIndexStrings[0] : `calc(${zIndexStrings.join(" + ")})`;
+  }
+  return `calc(${zIndexStrings.join(" + ")}${zIndexSum === 0 ? "" : zIndexSum > 0 ? ` + ${zIndexSum}` : ` - ${-zIndexSum}`})`;
+}
+function Layer({ zIndex, reset, style, ...otherProps }) {
+  const { cssVar, cssVarStyle } = useCssVars();
+  const parentZIndices = useContext(LayerContext);
+  const normalizeZIndex = useCallback(
+    (zIndex2) => typeof zIndex2 === "string" ? cssVar(`z-index-${zIndex2}`) : zIndex2,
+    [cssVar]
+  );
+  const normalizedZIndex = useMemo(
+    () => (Array.isArray(zIndex) ? zIndex.map(normalizeZIndex) : [normalizeZIndex(zIndex)]).filter((v) => v != null),
+    [normalizeZIndex, zIndex]
+  );
+  const zIndices = useMemo(
+    () => normalizedZIndex == null ? reset ? [] : parentZIndices : reset ? normalizedZIndex : [...parentZIndices, ...normalizedZIndex],
+    [normalizedZIndex, parentZIndices, reset]
+  );
+  const layerZIndex = useMemo(
+    () => zIndices.length === 0 && !reset ? void 0 : computeLayerZIndex(zIndices),
+    [reset, zIndices]
+  );
+  return zIndices.length === 0 && !reset ? /* @__PURE__ */ jsx(Slot, { style, ...otherProps }) : /* @__PURE__ */ jsx(LayerContext.Provider, { value: zIndices, children: /* @__PURE__ */ jsx(
+    Slot,
+    {
+      style: {
+        ...cssVarStyle("layer-z-index", layerZIndex),
+        zIndex: cssVar("layer-z-index"),
+        ...style
+      },
+      ...otherProps
+    }
+  ) });
+}
 const Overlay = forwardRef(
   function Overlay2({ className, ...otherProps }, forwardedRef) {
     const prefix = usePrefix();
@@ -1151,11 +1358,14 @@ const DialogContent = forwardRef(function DialogContent2({
       container: portalContext?.container,
       ...portalProps,
       forceMount,
-      children: /* @__PURE__ */ jsx(Root, { asChild: true, children: /* @__PURE__ */ jsx(Dialog$1.Overlay, { forceMount, asChild: true, children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(Root, { asChild: true, children: /* @__PURE__ */ jsx(Layer, { zIndex: "dialog", reset: true, children: /* @__PURE__ */ jsx(Dialog$1.Overlay, { forceMount, asChild: true, children: /* @__PURE__ */ jsx(
         Overlay,
         {
           ...overlayProps,
-          className: cx(prefix("dialog__overlay"), overlayProps?.className),
+          className: cx(
+            prefix("dialog__overlay"),
+            overlayProps?.className
+          ),
           children: /* @__PURE__ */ jsx(
             Dialog$1.Content,
             {
@@ -1185,7 +1395,7 @@ const DialogContent = forwardRef(function DialogContent2({
             }
           )
         }
-      ) }) })
+      ) }) }) })
     }
   ) });
 });
@@ -1704,7 +1914,7 @@ const Tooltip = forwardRef(function Tooltip2({
             container: portalContext?.container,
             ...portalProps,
             forceMount,
-            children: /* @__PURE__ */ jsx(Root, { asChild: true, children: /* @__PURE__ */ jsxs(
+            children: /* @__PURE__ */ jsx(Root, { asChild: true, children: /* @__PURE__ */ jsx(Layer, { zIndex: "tooltip", children: /* @__PURE__ */ jsxs(
               Tooltip$1.Content,
               {
                 sideOffset,
@@ -1728,7 +1938,7 @@ const Tooltip = forwardRef(function Tooltip2({
                   )
                 ]
               }
-            ) })
+            ) }) })
           }
         ) })
       ]
@@ -1961,11 +2171,14 @@ const AlertDialogContent = forwardRef(function AlertDialogContent2({
       container: portalContext?.container,
       ...portalProps,
       forceMount,
-      children: /* @__PURE__ */ jsx(Root, { asChild: true, children: /* @__PURE__ */ jsx(AlertDialog$1.Overlay, { asChild: true, children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(Root, { asChild: true, children: /* @__PURE__ */ jsx(Layer, { zIndex: "dialog", reset: true, children: /* @__PURE__ */ jsx(AlertDialog$1.Overlay, { asChild: true, children: /* @__PURE__ */ jsx(
         Overlay,
         {
           ...overlayProps,
-          className: cx(prefix("dialog__overlay"), overlayProps?.className),
+          className: cx(
+            prefix("dialog__overlay"),
+            overlayProps?.className
+          ),
           children: /* @__PURE__ */ jsx(
             AlertDialog$1.Content,
             {
@@ -1990,7 +2203,7 @@ const AlertDialogContent = forwardRef(function AlertDialogContent2({
             }
           )
         }
-      ) }) })
+      ) }) }) })
     }
   ) });
 });
@@ -2163,7 +2376,7 @@ function AlertDialogProvider({ children }) {
   const [content, setContent] = useState(null);
   const resolveRef = useRef(null);
   const prompt = useCallback(
-    // eslint-disable-next-line
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
     (renderContent) => new Promise((res) => {
       const resolve = resolveRef.current = (value) => {
         res(value);
@@ -2676,19 +2889,20 @@ const ToastTitle = forwardRef(function ToastTitle2({ className, ...otherProps },
     }
   );
 });
-const ToastViewport = forwardRef(function ToastViewport2({ label, className, ...otherProps }, forwardedRef) {
+const ToastViewport = forwardRef(function ToastViewport2({ position = "right", label, className, ...otherProps }, forwardedRef) {
   const prefix = usePrefix();
   const [locale7] = useLocale();
   label ??= locale7.ToastViewport.label;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Layer, { zIndex: "toast", reset: true, children: /* @__PURE__ */ jsx(
     Toast$1.Viewport,
     {
       label,
       className: cx(prefix("toast__viewport"), className),
+      "data-position": position,
       ...otherProps,
       ref: forwardedRef
     }
-  );
+  ) });
 });
 function ToastManagerProvider({ children }) {
   const toastId = useRef(0);
@@ -3151,8 +3365,9 @@ const Root = forwardRef(function Root2({
   disableTooltipsHoverableContent,
   toastsLabel,
   toastsDuration,
-  toastsSwipeDirection,
   toastsSwipeThreshold,
+  toastViewportPosition,
+  toastsSwipeDirection = toastViewportPosition === "left" ? "left" : void 0,
   toastViewportHotkey,
   toastViewportLabel,
   toastViewportProps,
@@ -3179,6 +3394,7 @@ const Root = forwardRef(function Root2({
     toastsDuration,
     toastsSwipeDirection,
     toastsSwipeThreshold,
+    toastViewportPosition,
     toastViewportHotkey,
     toastViewportLabel,
     toastViewportProps,
@@ -3245,6 +3461,7 @@ const Root = forwardRef(function Root2({
                         /* @__PURE__ */ jsx(Portal, { container: portalsContainer, asChild: true, children: /* @__PURE__ */ jsx(
                           ToastViewport,
                           {
+                            position: toastViewportPosition,
                             hotkey: toastViewportHotkey,
                             label: toastViewportLabel,
                             ...toastViewportProps
@@ -3381,34 +3598,6 @@ function setNativeProperty(element, prop, value) {
 function camelToKebabCase(str) {
   return str.replace(/[A-Z]/g, (l) => `-${l.toLowerCase()}`);
 }
-function useCssVars(options) {
-  const contextPrefix = usePrefix();
-  const prefix = options?.prefix ?? contextPrefix;
-  const cssVarName = useCallback(
-    (name) => `--${prefix(name)}`,
-    [prefix]
-  );
-  const cssVar = useCallback(
-    (name, fallback) => `var(${cssVarName(name)}${// eslint-disable-next-line @typescript-eslint/no-base-to-string
-    fallback != null ? `, ${String(fallback)}` : ""})`,
-    [cssVarName]
-  );
-  const cssVarStyle = useCallback(
-    (name, value) => value != null ? (
-      // eslint-disable-next-line @typescript-eslint/no-base-to-string
-      { [cssVarName(name)]: String(value) }
-    ) : void 0,
-    [cssVarName]
-  );
-  const cssToggler = useCallback(
-    (value) => cssVar(`toggler-${value}`, null),
-    [cssVar]
-  );
-  return useMemo(
-    () => ({ cssVarName, cssVar, cssVarStyle, cssToggler }),
-    [cssToggler, cssVar, cssVarName, cssVarStyle]
-  );
-}
 function useResponsiveValues(options) {
   const { cssVarName } = useCssVars(options);
   const responsiveValueToCssVarsAndDataAttrs = useCallback(
@@ -3536,7 +3725,9 @@ function Printer({
   const triggerRef = useRef(null);
   const contentRef = useRef(null);
   const [printInProgress, setPrintInProgress] = useState(false);
-  const [printOptions, setPrintOptions] = useState(void 0);
+  const [printOptions, setPrintOptions] = useState(
+    void 0
+  );
   const resolvePrintRef = useRef(null);
   const rejectPrintRef = useRef(null);
   const pendingPromiseRef = useRef(null);
@@ -3556,9 +3747,13 @@ function Printer({
       setTimeout(() => triggerRef.current?.focus(), 100);
     }
   };
+  const relevantDocumentTitle = printOptions?.documentTitle ?? documentTitle;
   const reactToPrintFn = useReactToPrint({
     bodyClass: preview || printInForeground ? prefix("root") : void 0,
-    documentTitle: printOptions?.documentTitle ?? document.title,
+    documentTitle: (
+      // Allow the function to return `undefined`
+      typeof relevantDocumentTitle === "function" ? () => relevantDocumentTitle() ?? document.title : relevantDocumentTitle ?? document.title
+    ),
     pageStyle: printPageStyle({
       pageSize: printOptions?.pageSize ?? pageSize,
       pageMargin: printOptions?.pageMargin ?? pageMargin,
@@ -3587,7 +3782,6 @@ function Printer({
   const latest = useLatestValues({
     printInProgress,
     reactToPrintFn,
-    documentTitle,
     onBeforePrint
   });
   const handlePrint = useCallback(
@@ -3597,11 +3791,7 @@ function Printer({
       }
       flushSync(() => {
         setPrintInProgress(true);
-        const documentTitleToUse = options?.documentTitle ?? latest.documentTitle;
-        setPrintOptions({
-          ...options,
-          documentTitle: typeof documentTitleToUse === "function" ? documentTitleToUse() : documentTitleToUse
-        });
+        setPrintOptions(options);
       });
       await pendingPromiseRef.current;
       if (latest.onBeforePrint) {
@@ -3768,7 +3958,7 @@ const Field = forwardRef(function Field2({ asChild, className, ...otherProps },
   const fieldRef = useRef(null);
   useEffect(
     () => store.subscribe(
-      (state) => state.controlHasCode,
+      ({ controlHasCode }) => controlHasCode,
       (hasCode) => setBoolDataAttr(fieldRef.current, "hasCode", hasCode),
       { fireImmediately: true }
     ),
@@ -3832,30 +4022,42 @@ const Table = forwardRef(
     const [scrollableEl, setScrollableEl] = useState(
       null
     );
-    const handleMinWidthChange = useCallback((minWidth) => {
-      if (tableRef.current) {
-        tableRef.current.style.minWidth = minWidth ?? "";
-      }
-    }, []);
-    const handleMaxWidthChange = useCallback(
-      (maxWidth) => {
-        if (tableRef.current) {
-          tableRef.current.style.maxWidth = maxWidth ?? "";
-        }
-        if (scrollableEl) {
-          scrollableEl.style.maxWidth = maxWidth ? `min(100%, ${maxWidth})` : "";
-        }
-      },
-      [scrollableEl]
-    );
-    const tableContextValue = useCreateTableContext(
+    const tableContextValue = useCreateTableContext({
       editable,
       status,
       layout,
-      defaultColumnWidth,
-      handleMinWidthChange,
-      handleMaxWidthChange
-    );
+      defaultColumnWidth
+    });
+    const { store } = tableContextValue;
+    useEffect(() => {
+      if (layout === "fixed") {
+        return store.subscribe(
+          ({ leafColumns: leafColumns2 }) => leafColumns2 && tableMinWidth(leafColumns2, defaultColumnWidth),
+          (minWidth) => {
+            if (tableRef.current) {
+              tableRef.current.style.minWidth = minWidth ?? "";
+            }
+          },
+          { fireImmediately: true }
+        );
+      }
+    }, [defaultColumnWidth, layout, store]);
+    useEffect(() => {
+      if (layout === "fixed") {
+        return store.subscribe(
+          ({ leafColumns: leafColumns2 }) => leafColumns2 && tableMaxWidth(leafColumns2, defaultColumnWidth),
+          (maxWidth) => {
+            if (tableRef.current) {
+              tableRef.current.style.maxWidth = maxWidth ?? "";
+            }
+            if (scrollableEl) {
+              scrollableEl.style.maxWidth = maxWidth ? `min(100%, ${maxWidth})` : "";
+            }
+          },
+          { fireImmediately: true }
+        );
+      }
+    }, [defaultColumnWidth, layout, scrollableEl, store]);
     useScrollPosition(
       scrollableEl,
       useCallback(
@@ -3940,7 +4142,7 @@ const Table = forwardRef(
                         children: visuallyHiddenCaption
                       }
                     ) }),
-                    /* @__PURE__ */ jsx(ColumnWidths, {}),
+                    /* @__PURE__ */ jsx(ColumnWidths, { defaultColumnWidth }),
                     children
                   ]
                 }
@@ -3953,10 +4155,15 @@ const Table = forwardRef(
     ) }) });
   }
 );
-function ColumnWidths() {
+function ColumnWidths({ defaultColumnWidth }) {
   const { store } = useTableContext();
-  const columnWidths2 = useStore$1(store, (state) => state.columnWidths);
-  return columnWidths2 && /* @__PURE__ */ jsx("colgroup", { children: columnWidths2.map((width, i) => /* @__PURE__ */ jsx("col", { style: width != null ? { width } : void 0 }, i)) });
+  const widths = useStore$1(
+    store,
+    useShallow(
+      (state) => state.leafColumns && columnWidths(state.leafColumns, defaultColumnWidth)
+    )
+  );
+  return widths && /* @__PURE__ */ jsx("colgroup", { children: widths.map((width, i) => /* @__PURE__ */ jsx("col", { style: width != null ? { width } : void 0 }, i)) });
 }
 const TableBody = forwardRef(
   function TableBody2({ className, ...otherProps }, forwardedRef) {
@@ -3972,42 +4179,89 @@ const TableBody = forwardRef(
   }
 );
 const TableCell = forwardRef(
-  function TableCell2({
-    header,
-    align,
-    variant,
-    status,
-    framed,
-    paddingless,
-    sticky,
-    className,
-    style,
-    ...otherProps
-  }, forwardedRef) {
+  function TableCell2({ columnIndex, _stickyColumnIndex, ...otherProps }, forwardedRef) {
     const prefix = usePrefix();
-    const { cssVarStyle } = useCssVars();
+    const { cssVarName, cssVarStyle } = useCssVars();
     const {
       status: tableStatus,
       editable: isTableEditable,
       store
     } = useTableContext();
     const isInTableHead = useIsInTableHead();
-    header ??= isInTableHead;
-    variant ??= header ? "header" : "data";
-    if (status === void 0) {
-      status = header ? tableStatus : void 0;
+    const column = useStore$1(
+      store,
+      useShallow(
+        (state) => columnIndex != null && state.leafColumns?.[columnIndex] || {}
+      )
+    );
+    const {
+      header = isInTableHead,
+      align,
+      variant = header ? "header" : "data",
+      // Setting the status to `null` overrides the automatic inheritance of the
+      // table status for header cells
+      status = header ? tableStatus : void 0,
+      framed = isTableEditable,
+      paddingless = !header && isTableEditable,
+      sticky,
+      className,
+      style,
+      // `TableColumnObject` properties irrelevant to a `TableCell`
+      subColumns: _subColumns,
+      label: _label,
+      labelText: _labelText,
+      helperText: _helperText,
+      helperButtonLabel: _helperButtonLabel,
+      width: _width,
+      fixed: _fixed,
+      sortable: _sortable,
+      defaultSortDirection: _defaultSortDirection,
+      sorted: _sorted,
+      onSort: _onSort,
+      containerProps: _containerProps,
+      labelProps: _labelProps,
+      sortButtonProps: _sortButtonProps,
+      sortIconContainerProps: _sortIconContainerProps,
+      sortAscIconProps: _sortAscIconProps,
+      sortDescIconProps: _sortDescIconProps,
+      helperButtonProps: _helperButtonProps,
+      helperPopoverProps: _helperPopoverProps,
+      helperPopoverContentProps: _helperPopoverContentProps,
+      ...otherMergedProps
+    } = { ...column, ...otherProps };
+    const { colSpan = 1 } = otherProps;
+    if (columnIndex != null && _stickyColumnIndex == null && sticky) {
+      _stickyColumnIndex = columnIndex + (sticky === "left" ? 0 : colSpan - 1);
     }
-    framed ??= isTableEditable;
-    paddingless ??= !header && isTableEditable;
     const cellRef = useRef(null);
-    useEffect(
-      () => store.subscribe(
-        ({ scrollPosition }) => sticky != null && scrollPosition != null && (sticky === "left" ? scrollPosition.left > 0 : scrollPosition.right > 0),
-        (isStuck) => setBoolDataAttr(cellRef.current, "stuck", isStuck),
-        { fireImmediately: true }
-      ),
-      [sticky, store]
-    );
+    useEffect(() => {
+      if (sticky) {
+        return store.subscribe(
+          ({ scrollPosition, stickyColumnOffsets: stickyColumnOffsets2 }) => {
+            const isBorderSticky = _stickyColumnIndex != null && stickyColumnOffsets2()?.[_stickyColumnIndex + (sticky === "left" ? colSpan : -colSpan)] === void 0;
+            return isBorderSticky && scrollPosition != null && (sticky === "left" ? scrollPosition.left > 0 : scrollPosition.right > 0);
+          },
+          (isStuck) => setBoolDataAttr(cellRef.current, "stuck", isStuck),
+          { fireImmediately: true }
+        );
+      }
+    }, [_stickyColumnIndex, colSpan, sticky, store]);
+    useEffect(() => {
+      if (_stickyColumnIndex != null && sticky) {
+        return store.subscribe(
+          ({ stickyColumnOffsets: stickyColumnOffsets2 }) => stickyColumnOffsets2()?.[_stickyColumnIndex],
+          (offset) => {
+            if (offset && cellRef.current) {
+              cellRef.current.style.setProperty(
+                cssVarName("table-cell-sticky-offset"),
+                `${offset}px`
+              );
+            }
+          },
+          { fireImmediately: true }
+        );
+      }
+    }, [_stickyColumnIndex, cssVarName, sticky, store]);
     const As = header ? "th" : "td";
     const combinedCellRef = useCombinedRef(cellRef, forwardedRef);
     return /* @__PURE__ */ jsx(TableCellContext.Provider, { value: true, children: /* @__PURE__ */ jsx(
@@ -4023,15 +4277,12 @@ const TableCell = forwardRef(
         "data-paddingless": boolDataAttr(paddingless),
         "data-variant": variant,
         "data-sticky": sticky,
-        ...otherProps,
+        ...otherMergedProps,
         ref: combinedCellRef
       }
     ) });
   }
 );
-const TableColumn = forwardRef(function TableColumn2() {
-  return null;
-});
 const TableFoot = forwardRef(
   function TableFoot2({ sticky = true, className, ...otherProps }, forwardedRef) {
     const prefix = usePrefix();
@@ -4087,7 +4338,7 @@ const PopoverContent = forwardRef(function PopoverContent2({
       container: portalContext?.container,
       ...portalProps,
       forceMount,
-      children: /* @__PURE__ */ jsx(Root, { asChild: true, children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx(Root, { asChild: true, children: /* @__PURE__ */ jsx(Layer, { zIndex: "popover", children: /* @__PURE__ */ jsxs(
         Popover$1.Content,
         {
           className: cx(prefix("popover"), className),
@@ -4104,12 +4355,15 @@ const PopoverContent = forwardRef(function PopoverContent2({
                 width: 12,
                 height: 6,
                 ...arrowProps,
-                className: cx(prefix("popover__arrow"), arrowProps?.className)
+                className: cx(
+                  prefix("popover__arrow"),
+                  arrowProps?.className
+                )
               }
             )
           ]
         }
-      ) })
+      ) }) })
     }
   ) });
 });
@@ -4187,8 +4441,28 @@ const Stack = forwardRef(function Stack2({
 });
 const DEFAULT_TABLE_ROW_HEIGHT = 41;
 const TableRow = forwardRef(
-  function TableRow2({ className, selected, ...otherProps }, forwardedRef) {
+  function TableRow2({ className, selected, children, ...otherProps }, forwardedRef) {
     const prefix = usePrefix();
+    let nextIdx = 0;
+    const indexedChildren = Children.toArray(children).map((child) => {
+      if (!isValidElement(child) || child.type !== TableCell) {
+        return child;
+      }
+      const tableCellProps = child.props;
+      const { columnIndex, colSpan } = tableCellProps;
+      if (columnIndex !== void 0) {
+        if (columnIndex !== null) {
+          nextIdx = columnIndex + (colSpan ?? 1);
+        }
+        return child;
+      }
+      const cellIdx = nextIdx;
+      nextIdx += colSpan ?? 1;
+      return cloneElement(
+        child,
+        { ...tableCellProps, columnIndex: cellIdx }
+      );
+    });
     return /* @__PURE__ */ jsx(
       "tr",
       {
@@ -4196,7 +4470,8 @@ const TableRow = forwardRef(
         "data-selected": boolDataAttr(selected),
         "aria-selected": selected || void 0,
         ...otherProps,
-        ref: forwardedRef
+        ref: forwardedRef,
+        children: indexedChildren
       }
     );
   }
@@ -4213,14 +4488,7 @@ const TableHead = forwardRef(
     const prefix = usePrefix();
     const [locale7] = useLocale();
     sortByColumnDescription ??= locale7.TableHead.sortByColumnDescription;
-    const {
-      status: tableStatus,
-      layout,
-      defaultColumnWidth,
-      onTableMinWidthChange,
-      onTableMaxWidthChange,
-      store
-    } = useTableContext();
+    const { status: tableStatus, layout, store } = useTableContext();
     const columns = useMemo(() => columnsFromChildren(children), [children]);
     const nRows = useMemo(() => numberOfRows$1(columns), [columns]);
     const rows = useMemo(
@@ -4229,6 +4497,12 @@ const TableHead = forwardRef(
     );
     const { printHidden } = usePrintClassNames();
     const generatedId = useId();
+    const { leaves, leafIndices } = useMemo(() => {
+      const leaves2 = leafColumns$1(columns);
+      const leafIndices2 = new Map(leaves2.map((l, i) => [l, i]));
+      return { leaves: leaves2, leafIndices: leafIndices2 };
+    }, [columns]);
+    useEffect(() => store.setState({ leafColumns: leaves }), [leaves, store]);
     const tableHeadRef = useRef(null);
     useEffect(
       () => store.subscribe(
@@ -4238,25 +4512,6 @@ const TableHead = forwardRef(
       ),
       [sticky, store]
     );
-    useEffect(() => {
-      const leaves = leafColumns$1(columns);
-      store.setState({ numberOfColumns: leaves.length });
-      if (layout === "fixed") {
-        store.setState({
-          columnWidths: columnWidths(leaves, defaultColumnWidth)
-        });
-        onTableMinWidthChange(tableMinWidth(leaves, defaultColumnWidth));
-        onTableMaxWidthChange(tableMaxWidth(leaves, defaultColumnWidth));
-        return () => store.setState({ columnWidths: void 0 });
-      }
-    }, [
-      columns,
-      defaultColumnWidth,
-      layout,
-      onTableMaxWidthChange,
-      onTableMinWidthChange,
-      store
-    ]);
     const leftMost = useMemo(() => leftMostColumns(columns), [columns]);
     const rightMost = useMemo(() => rightMostColumns(columns), [columns]);
     const combinedTableHeadRef = useCombinedRef(tableHeadRef, forwardedRef);
@@ -4274,14 +4529,16 @@ const TableHead = forwardRef(
               ...typeof rowProps === "function" ? rowProps(i) : rowProps,
               children: row.map((column, j) => {
                 const {
+                  subColumns,
                   label,
                   labelText = typeof label === "string" ? label : "",
                   helperText,
                   helperButtonLabel = locale7.TableColumn.helperButtonLabel,
                   width,
                   fixed: _fixed,
-                  header = true,
+                  header: _header,
                   align,
+                  sticky: sticky2,
                   sortable,
                   defaultSortDirection = "asc",
                   sorted,
@@ -4298,8 +4555,17 @@ const TableHead = forwardRef(
                   style,
                   ...otherColumnProps
                 } = column;
+                const rowSpan = numberOfRows$1([column]) > 1 ? 1 : nRows - i;
+                const colSpan = numberOfColumns([column]);
+                const isLeaf = subColumns.length === 0;
+                const leafIndex = isLeaf ? leafIndices.get(column) : -1;
+                const stickyColumnIndex = sticky2 ? isLeaf ? leafIndex : leafIndices.get(
+                  sticky2 === "left" ? leftMostLeafColumn(column) : rightMostLeafColumn(column)
+                ) : -1;
                 const newSortDirection = !sorted ? defaultSortDirection : sorted === defaultSortDirection ? sorted === "asc" ? "desc" : "asc" : null;
-                const sortDescriptionId = sortable ? prefix(`table-column-${j}-sort-description-${generatedId}`) : void 0;
+                const sortDescriptionId = isLeaf && sortable ? prefix(
+                  `table-column-${leafIndex}-sort-description-${generatedId}`
+                ) : void 0;
                 const helperTextEl = helperText && /* @__PURE__ */ jsxs(Popover, { modal: false, ...helperPopoverProps, children: [
                   /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(
                     IconButton,
@@ -4330,14 +4596,15 @@ const TableHead = forwardRef(
                     }
                   )
                 ] });
-                const rowSpan = numberOfRows$1([column]) > 1 ? 1 : nRows - i;
-                const colSpan = numberOfColumns([column]);
                 return /* @__PURE__ */ jsx(
                   TableCell,
                   {
-                    header,
-                    scope: header ? column.children.length > 0 ? "colgroup" : "col" : void 0,
+                    columnIndex: null,
+                    _stickyColumnIndex: stickyColumnIndex === -1 ? null : stickyColumnIndex,
+                    header: true,
+                    scope: isLeaf ? "col" : "colgroup",
                     align,
+                    sticky: sticky2,
                     rowSpan: rowSpan === 1 ? void 0 : rowSpan,
                     colSpan: colSpan === 1 ? void 0 : colSpan,
                     style: {
@@ -4361,7 +4628,7 @@ const TableHead = forwardRef(
                         gap: 1.5,
                         ...containerProps,
                         children: [
-                          !sortable && label && /* @__PURE__ */ jsx(
+                          (!isLeaf || !sortable) && label && /* @__PURE__ */ jsx(
                             "div",
                             {
                               "data-align": align,
@@ -4373,7 +4640,7 @@ const TableHead = forwardRef(
                               children: label
                             }
                           ),
-                          sortable && /* @__PURE__ */ jsxs(
+                          isLeaf && sortable && /* @__PURE__ */ jsxs(
                             Button,
                             {
                               variant: "ghost",
@@ -4467,87 +4734,36 @@ const TableHead = forwardRef(
     ) });
   }
 );
-function columnsFromChildren(children) {
-  return Children.toArray(children).filter(
-    (child) => isValidElement(child) && child.type === TableColumn
-  ).map((child) => ({
-    ...child.props,
-    children: columnsFromChildren(child.props.children ?? null)
-  }));
-}
-function numberOfRows$1(columns) {
-  return columns.reduce(
-    (n, column) => Math.max(n, numberOfRows$1(column.children) + 1),
-    0
-  );
-}
-function numberOfColumns(columns) {
-  return columns.reduce(
-    (n, column) => n + (column.children.length === 0 ? 1 : numberOfColumns(column.children)),
-    0
+function leafColumns(columns) {
+  return Object.entries(columns).reduce(
+    (leaves, [columnName, column]) => {
+      if (column.subColumns) {
+        Object.assign(leaves, leafColumns(column.subColumns));
+      } else {
+        leaves[columnName] = column;
+      }
+      return leaves;
+    },
+    {}
   );
 }
-function columnsOfRow(columns, index) {
-  return index === 0 ? columns : columns.reduce((rowColumns, column) => {
-    rowColumns.push(...columnsOfRow(column.children, index - 1));
-    return rowColumns;
-  }, []);
-}
-function leafColumns$1(columns) {
-  return columns.reduce((leaves, column) => {
-    leaves.push(
-      ...column.children.length === 0 ? [column] : leafColumns$1(column.children)
-    );
-    return leaves;
-  }, []);
-}
-function tableMinWidth(leaves, defaultColumnWidth) {
-  return leaves.reduce(
-    (sum, column) => sum + columnWidth(column, defaultColumnWidth),
-    0
-  ) + "px";
-}
-function tableMaxWidth(leaves, defaultColumnWidth) {
-  return leaves.every((column) => column.fixed) ? tableMinWidth(leaves, defaultColumnWidth) : void 0;
-}
-function columnWidths(leaves, defaultColumnWidth) {
-  const dynamicWidthsSum = leaves.reduce(
-    (sum, column) => sum + (column.fixed ? 0 : columnWidth(column, defaultColumnWidth)),
+function numberOfRows(columns) {
+  return Object.values(columns).reduce(
+    (n, column) => Math.max(n, numberOfRows(column.subColumns ?? {}) + 1),
     0
   );
-  return leaves.reduce((widths, column) => {
-    const colSpan = column.colSpan ?? 1;
-    const colWidths = Array.isArray(column.width) ? column.width : (
-      // Distribute the width amongst the columns being spanned
-      [...Array(colSpan)].map(
-        () => columnWidth(column, defaultColumnWidth) / colSpan
-      )
-    );
-    for (let i = 0; i < colSpan; ++i) {
-      const colWidth = colWidths[i] ?? 0;
-      widths.push(
-        column.fixed ? `${colWidth}px` : `${colWidth / dynamicWidthsSum * 100}%`
-      );
-    }
-    return widths;
-  }, []);
 }
-function columnWidth(column, defaultColumnsMinWidth) {
-  return Array.isArray(column.width) ? column.width.reduce((sum, width) => sum + width, 0) : column.width ?? defaultColumnsMinWidth * (column.colSpan ?? 1);
-}
-function leftMostColumns(columns) {
-  if (columns.length === 0) {
-    return [];
+function sanitizeInt(value) {
+  if (typeof value === "string") {
+    value = +value;
   }
-  const firstColumn = columns[0];
-  return [firstColumn, ...leftMostColumns(firstColumn.children)];
+  return value === void 0 || Number.isNaN(value) ? void 0 : Math.trunc(value);
 }
-function rightMostColumns(columns) {
-  if (columns.length === 0) {
-    return [];
-  }
-  const lastColumn = columns[columns.length - 1];
-  return [lastColumn, ...rightMostColumns(lastColumn.children)];
+function sanitizeSortBy(sortBy, leaves) {
+  return sortBy == null || sortBy in leaves ? sortBy : null;
+}
+function sanitizeSortDirection(sortDirection) {
+  return sortDirection === void 0 || sortDirection === "asc" || sortDirection === "desc" ? sortDirection : void 0;
 }
 const DEFAULT_OFFSET = 0;
 const DEFAULT_LIMIT = 10;
@@ -4596,10 +4812,10 @@ const DataTable = forwardRef(
     const printing = usePrinting();
     const leaves = useMemo(() => leafColumns(columns), [columns]);
     const headCount = useMemo(() => numberOfRows(columns), [columns]);
-    defaultOffset = sanitizeNumeric(defaultOffset) ?? DEFAULT_OFFSET;
-    offset = sanitizeNumeric(offset);
-    defaultLimit = sanitizeNumeric(defaultLimit) ?? DEFAULT_LIMIT;
-    limit = sanitizeNumeric(limit);
+    defaultOffset = sanitizeInt(defaultOffset) ?? DEFAULT_OFFSET;
+    offset = sanitizeInt(offset);
+    defaultLimit = sanitizeInt(defaultLimit) ?? DEFAULT_LIMIT;
+    limit = sanitizeInt(limit);
     defaultSortBy = sanitizeSortBy(defaultSortBy, leaves) ?? null;
     sortBy = sanitizeSortBy(sortBy, leaves);
     defaultSortDirection = sanitizeSortDirection(defaultSortDirection);
@@ -4654,37 +4870,6 @@ const DataTable = forwardRef(
     ) });
   }
 );
-function leafColumns(columns) {
-  return Object.entries(columns).reduce(
-    (leaves, [columnName, column]) => {
-      if (column.subColumns) {
-        Object.assign(leaves, leafColumns(column.subColumns));
-      } else {
-        leaves[columnName] = column;
-      }
-      return leaves;
-    },
-    {}
-  );
-}
-function numberOfRows(columns) {
-  return Object.values(columns).reduce(
-    (n, column) => Math.max(n, numberOfRows(column.subColumns ?? {}) + 1),
-    0
-  );
-}
-function sanitizeNumeric(value) {
-  if (typeof value === "string") {
-    value = +value;
-  }
-  return value === void 0 || Number.isNaN(value) ? void 0 : Math.trunc(value);
-}
-function sanitizeSortBy(sortBy, leaves) {
-  return sortBy == null || sortBy in leaves ? sortBy : null;
-}
-function sanitizeSortDirection(sortDirection) {
-  return sortDirection === void 0 || sortDirection === "asc" || sortDirection === "desc" ? sortDirection : void 0;
-}
 function useDataTableApiRef() {
   return useRef(null);
 }
@@ -5408,6 +5593,7 @@ const DataTableRow = memo(
                 format: format2,
                 render,
                 compare: _compare,
+                footer: _footer,
                 label,
                 labelText: _labelText,
                 helperText: _helperText,
@@ -5418,6 +5604,7 @@ const DataTableRow = memo(
                 defaultSortDirection: _defaultSortDirection,
                 containerProps: _containerProps,
                 labelProps,
+                footerProps: _footerProps,
                 sortButtonProps: _sortButtonProps,
                 sortIconContainerProps: _sortIconContainerProps,
                 sortAscIconProps: _sortAscIconProps,
@@ -5427,7 +5614,7 @@ const DataTableRow = memo(
                 helperPopoverContentProps: _helperPopoverContentProps,
                 ...otherProps2
               }
-            ]) => {
+            ], i) => {
               const loadingRow = row === void 0;
               const value = !loadingRow && (getValue ? getValue({ row, index }) : row?.[columnName] ?? null);
               const formattedValue = !loadingRow && (format2 ? format2({ value, row, index }) : value?.toString() ?? "");
@@ -5459,7 +5646,7 @@ const DataTableRow = memo(
                   index
                 }) : markedValue
               };
-              return renderCell ? /* @__PURE__ */ jsx(Fragment$1, { children: renderCell(props) }, columnName) : /* @__PURE__ */ jsx(DataTableCell, { ...props }, columnName);
+              return renderCell ? /* @__PURE__ */ jsx(Fragment$1, { children: renderCell({ columnIndex: i, ...props }) }, columnName) : /* @__PURE__ */ jsx(DataTableCell, { columnIndex: i, ...props }, columnName);
             }
           )
         }
@@ -5539,7 +5726,7 @@ function PagedDataTableRows() {
   ]);
   useEffect(
     () => store.subscribe(
-      (state) => state.updateCounter,
+      ({ updateCounter }) => updateCounter,
       () => {
         const { pageOffset: pageOffset2, pageLimit, limit, actions } = store.getState();
         actions.updateWindow(pageOffset2(), pageLimit() ?? limit());
@@ -5622,7 +5809,7 @@ function ScrolledDataTableRows({
   );
   useEffect(
     () => store.subscribe(
-      (state) => state.updateCounter,
+      ({ updateCounter }) => updateCounter,
       () => update(virtualizer.getVirtualItems())
     ),
     [store, update, virtualizer]
@@ -5679,7 +5866,7 @@ function ScrolledDataTableRows({
   );
   useEffect(
     () => store.subscribe(
-      (state) => state.offset(),
+      ({ offset }) => offset(),
       (offset) => !virtualizer.isScrolling && goTo(offset)
     ),
     [goTo, store, virtualizer]
@@ -5767,7 +5954,7 @@ function useMeasure(element, setMeasurement) {
     };
   }, [element, setMeasurement]);
 }
-const DataTableFoot = forwardRef(function DataTableFoot2({ showWhenEmpty, ...otherProps }, forwardedRef) {
+const DataTableFoot = forwardRef(function DataTableFoot2({ footContent, showWhenEmpty, ...otherProps }, forwardedRef) {
   const { store } = useDataTableContext();
   const shouldShow = useStore$1(
     store,
@@ -5781,8 +5968,63 @@ const DataTableFoot = forwardRef(function DataTableFoot2({ showWhenEmpty, ...oth
       [store]
     )
   );
+  const selectionColumn = useDataTableSelectionColumn();
+  const dataTableSelectionColumnId = useDataTableSelectionColumnId();
+  const leafColumns2 = useStore$1(
+    store,
+    useShallow(
+      ({ leafColumns: leafColumns22 }) => selectionColumn ? { [dataTableSelectionColumnId]: selectionColumn, ...leafColumns22 } : leafColumns22
+    )
+  );
+  const hasFooterCells = useStore$1(
+    store,
+    ({ hasFooterCells: hasFooterCells2 }) => hasFooterCells2()
+  );
+  const footRowIndex = useStore$1(
+    store,
+    ({ headCount, bodyCount }) => hasFooterCells ? headCount + bodyCount() + 1 : void 0
+  );
+  const rows = useStore$1(
+    store,
+    ({ transformedRows }) => transformedRows()
+  );
   const combinedTableFootRef = useCombinedRef(setTableFootEl, forwardedRef);
-  return shouldShow && /* @__PURE__ */ jsx(TableFoot, { ...otherProps, ref: combinedTableFootRef });
+  return shouldShow && (hasFooterCells || footContent) && /* @__PURE__ */ jsxs(TableFoot, { ...otherProps, ref: combinedTableFootRef, children: [
+    hasFooterCells && /* @__PURE__ */ jsx(TableRow, { "aria-rowindex": footRowIndex, children: Object.entries(leafColumns2).map(
+      ([
+        columnName,
+        {
+          filterable: _filterable,
+          locale: _locale,
+          subColumns: _subColumns,
+          getValue: _getValue,
+          format: _format,
+          render: _render,
+          compare: _compare,
+          footer,
+          label: _label,
+          labelText: _labelText,
+          helperText: _helperText,
+          helperButtonLabel: _helperButtonLabel,
+          width: _width,
+          fixed: _fixed,
+          sortable: _sortable,
+          defaultSortDirection: _defaultSortDirection,
+          containerProps: _containerProps,
+          labelProps: _labelProps,
+          sortButtonProps: _sortButtonProps,
+          sortIconContainerProps: _sortIconContainerProps,
+          sortAscIconProps: _sortAscIconProps,
+          sortDescIconProps: _sortDescIconProps,
+          helperButtonProps: _helperButtonProps,
+          helperPopoverProps: _helperPopoverProps,
+          helperPopoverContentProps: _helperPopoverContentProps,
+          ...otherProps2
+        }
+      ]) => /* @__PURE__ */ jsx(TableCell, { ...otherProps2, children: typeof footer === "function" ? footer({ rows }) : footer }, columnName)
+    ) }),
+    footContent
+  ] });
 });
 const DataTableHead = forwardRef(function DataTableHead2({ rowProps, ...otherProps }, forwardedRef) {
   const { generatedId, store } = useDataTableContext();
@@ -5846,6 +6088,8 @@ function renderDataTableColumns(columns, generatedId, sortingProps) {
         format: _format,
         render: _render,
         compare: _compare,
+        footer: _footer,
+        footerProps: _footerProps,
         labelProps,
         ...column
       }
@@ -5874,8 +6118,8 @@ const DataTableContent = forwardRef(function DataTable2({
   scrollableProps,
   tableHeadProps,
   tableBodyProps,
-  emptyMessageProps,
   tableFootProps,
+  emptyMessageProps,
   className,
   ...otherProps
 }, forwardedRef) {
@@ -5895,7 +6139,7 @@ const DataTableContent = forwardRef(function DataTable2({
   const stickyHeadFoot = maxHeight !== void 0;
   useEffect(
     () => store.subscribe(
-      (state) => state.headCount + state.bodyCount(),
+      (state) => state.headCount + state.bodyCount() + state.footCount(),
       (totalCount) => {
         tableRef.current.ariaRowCount = totalCount.toString();
       },
@@ -5936,13 +6180,13 @@ const DataTableContent = forwardRef(function DataTable2({
             ...tableBodyProps
           }
         ),
-        tableFootContent && /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(
           DataTableFoot,
           {
             sticky: stickyHeadFoot,
             showWhenEmpty: showTableFootWhenEmpty,
-            ...tableFootProps,
-            children: tableFootContent
+            footContent: tableFootContent,
+            ...tableFootProps
           }
         )
       ]
@@ -7802,7 +8046,7 @@ const CommandMenuDialog = forwardRef(function CommandMenuDialog2({
           container: portalContext?.container,
           ...portalProps,
           forceMount,
-          children: /* @__PURE__ */ jsx(Root, { asChild: true, children: /* @__PURE__ */ jsx(Dialog$1.Overlay, { forceMount, asChild: true, children: /* @__PURE__ */ jsx(
+          children: /* @__PURE__ */ jsx(Root, { asChild: true, children: /* @__PURE__ */ jsx(Layer, { zIndex: "dialog", reset: true, children: /* @__PURE__ */ jsx(Dialog$1.Overlay, { forceMount, asChild: true, children: /* @__PURE__ */ jsx(
             Overlay,
             {
               ...overlayProps,
@@ -7830,7 +8074,7 @@ const CommandMenuDialog = forwardRef(function CommandMenuDialog2({
                 }
               )
             }
-          ) }) })
+          ) }) }) })
         }
       ) })
     }
@@ -11054,15 +11298,15 @@ const DropdownMenuContent = forwardRef(function DropdownMenuContent2({
       container: portalContext?.container,
       ...portalProps,
       forceMount,
-      children: /* @__PURE__ */ jsx(Root, { asChild: true, children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(Root, { asChild: true, children: /* @__PURE__ */ jsx(Layer, { zIndex: "dropdown", children: /* @__PURE__ */ jsx(
         DropdownMenu$1.Content,
         {
           className: cx(prefix("dropdown-menu"), className),
           sideOffset,
           collisionPadding,
           forceMount,
-          ref: forwardedRef,
           ...otherProps,
+          ref: forwardedRef,
           children: /* @__PURE__ */ jsx(
             MenuList,
             {
@@ -11088,7 +11332,7 @@ const DropdownMenuContent = forwardRef(function DropdownMenuContent2({
             }
           )
         }
-      ) })
+      ) }) })
     }
   ) });
 });
@@ -12850,17 +13094,18 @@ const StepList = forwardRef(
     const prefix = usePrefix();
     const { showAllStepsWhilePrinting } = useStepperContext();
     const { printHidden } = usePrintClassNames();
-    let currentIndex = 0;
+    let nextIdx = 0;
     const indexedChildren = Children.toArray(children).map((child) => {
       if (!isValidElement(child) || child.type !== Step) {
         return child;
       }
       const { index, ...otherStepProps } = child.props;
-      if (index) {
-        currentIndex = index;
+      if (index != null) {
+        nextIdx = index + 1;
+        return child;
       }
       return cloneElement(child, {
-        index: currentIndex++,
+        index: nextIdx++,
         ...otherStepProps
       });
     });
@@ -12912,17 +13157,18 @@ const Stepper = forwardRef(
       )
     );
     useImperativeHandle(apiRef, () => api, [api]);
-    let currentIndex = 0;
+    let nextIdx = 0;
     const indexedChildren = Children.toArray(children).map((child) => {
       if (!isValidElement(child) || child.type !== StepContent) {
         return child;
       }
       const { index, ...otherStepContentProps } = child.props;
-      if (index) {
-        currentIndex = index;
+      if (index != null) {
+        nextIdx = index + 1;
+        return child;
       }
       return cloneElement(child, {
-        index: currentIndex++,
+        index: nextIdx++,
         ...otherStepContentProps
       });
     });
@@ -13316,7 +13562,7 @@ const TabList = forwardRef(function TabList2({
   );
   useEffect(
     () => store.subscribe(
-      (state) => state.width,
+      ({ width }) => width,
       (width) => {
         store.setState({
           showScrollButtons: (containerEl?.scrollWidth ?? 0) > Math.ceil(width)
@@ -13754,6 +14000,7 @@ export {
   Keybinds,
   Keyboard,
   Label,
+  Layer,
   Link,
   LocalizationContext,
   LocalizationProvider,
@@ -13880,6 +14127,7 @@ export {
   useIsInTableCell,
   useKeyboardShortcut,
   useLatestValues,
+  useLayerZIndex,
   useLayoutEffect$1 as useLayoutEffect,
   useLocale,
   useLocation,