@umodeapporg/ui 0.0.0-canary.ca10e69

package/dist/components/UI/DataTable/DataTable.js

@@ -0,0 +1,606 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useEffect, useState, useRef, useCallback, Fragment } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../../Form/ControlledButton.js";
+import ActiveFiltersBar from "../../Search/filters/ActiveFiltersBar.js";
+import "../../Form/ControlledSwitch.js";
+import "../ControlledMenu.js";
+import { MaterialSymbol } from "../MaterialSymbol/index.js";
+import { buildEmptyFilterValues, emptyValueForKind } from "../../Search/filters/filterValues.js";
+import "date-fns";
+import "date-fns/locale";
+import "react-day-picker";
+import "../ControlledPopover.js";
+import "motion/react";
+import "react-dom";
+import "../../../helpers/mergeClasses.js";
+import "@floating-ui/dom";
+import "../../../motion/motionPresets.js";
+import "../../../motion/motionTokens.js";
+import "react-day-picker/style.css";
+import "../../DateTime/DateRangePicker.js";
+import "react-infinite-scroll-component";
+import "react-window";
+import LoadingSpinner from "../LoadingSpinner.js";
+import "../NoDataFound/index.js";
+/* empty css                                    */
+import "../../Search/filters/FiltersButton.js";
+import "../../../helpers/utilityHelpers.js";
+import "../../Form/ControlledDialog.js";
+import "../../Navigation/UiNavigationContext.js";
+import { useBreakpoint } from "../../../hooks/useBreakpoint.js";
+import GridProvider from "./grid/GridProvider.js";
+import { useGridFillApply } from "./grid/useGridFillApply.js";
+import { useGridInstance, useGridEditMode, useGridMatrixSync } from "./grid/useGridInstance.js";
+import { useGridKeyboard } from "./grid/useGridKeyboard.js";
+import DataTableAutoCard from "./DataTableAutoCard.js";
+import DataTableBody from "./DataTableBody.js";
+import DataTableBulkEditButton from "./DataTableBulkEditButton.js";
+import DataTableBulkEditDialog from "./DataTableBulkEditDialog.js";
+import { isBadgeColumnType } from "./dataTableColumnWidths.js";
+import DataTableColumnToggle from "./DataTableColumnToggle.js";
+import DataTableEditModeButton from "./DataTableEditModeButton.js";
+import DataTableHead from "./DataTableHead.js";
+import DataTablePagination, { DATA_TABLE_MIN_PAGE_SIZE } from "./DataTablePagination.js";
+import { DataTableCardsSkeletonState, DataTableSkeletonState, DataTableErrorState, DataTableEmptyState } from "./DataTableStates.js";
+import DataTableToolbar from "./DataTableToolbar.js";
+import { DATA_TABLE_REMOVE_COLUMN_ID, isDataTableDetailTableExpansion } from "./types.js";
+import DataTableCellEditingProvider from "./useCellEditingState.js";
+import { useColumnOrder, useDetailColumnOrder } from "./useColumnOrder.js";
+import { useColumnSizing } from "./useColumnSizing.js";
+import { useColumnVisibility, useDetailColumnVisibility } from "./useColumnVisibility.js";
+import { useDataTableInstance } from "./useDataTableInstance.js";
+import { useDataTableUndoHistory } from "./useDataTableUndoHistory.js";
+const DataTable = ({
+  config: configProp,
+  rows,
+  loading = false,
+  error = false,
+  errorCause,
+  onRetry,
+  emptyMessage,
+  searchLabel,
+  onSearch,
+  initialSearch = "",
+  onSearchTermChange,
+  searchDisabled = false,
+  searchDebounceTime = 400,
+  searchMinLength = 1,
+  searchAtStart = false,
+  sort,
+  onSortChange,
+  pagination,
+  initialClientPagination,
+  onClientPaginationChange,
+  toolbarSlot,
+  footerActionsSlot,
+  filterValues,
+  onFilterValuesChange,
+  toolbarStartSlot,
+  bodyTopRow,
+  onFilteredCountChange,
+  viewMode: controlledViewMode,
+  onViewModeChange,
+  columnTogglePlacement = "header",
+  cardsInfiniteScroll,
+  hideViewToggle = false,
+  layout = "page",
+  dense: denseProp = false,
+  spacious = false,
+  commitStatuses
+}) => {
+  const { t } = useTranslation("ui");
+  const isFit = layout === "fit";
+  const dense = !spacious && (isFit || denseProp);
+  const editingRows = configProp.editing?.rows;
+  const showAddRow = !!editingRows?.canAdd && !!editingRows.onAddRow;
+  const hostFillCells = configProp.spreadsheet ? configProp.spreadsheet.fill?.onFillCells : void 0;
+  const isUndoEnabled = !!configProp.editing?.onCellChange && configProp.editing.undo !== false;
+  const { recordedOnCellChange, recordedOnFillCells, handleUndoShortcut } = useDataTableUndoHistory({
+    enabled: isUndoEnabled,
+    rows,
+    columns: configProp.columns,
+    onCellChange: configProp.editing?.onCellChange,
+    onFillCells: hostFillCells
+  });
+  const configWithUndo = useMemo(() => {
+    if (!isUndoEnabled || !configProp.editing) return configProp;
+    const spreadsheetConfig = configProp.spreadsheet;
+    return {
+      ...configProp,
+      editing: { ...configProp.editing, onCellChange: recordedOnCellChange },
+      spreadsheet: spreadsheetConfig && spreadsheetConfig.fill?.onFillCells ? { ...spreadsheetConfig, fill: { ...spreadsheetConfig.fill, onFillCells: recordedOnFillCells } } : spreadsheetConfig
+    };
+  }, [configProp, isUndoEnabled, recordedOnCellChange, recordedOnFillCells]);
+  const config = useMemo(() => {
+    if (!editingRows?.onRemoveRow) return configWithUndo;
+    const removeColumn = {
+      id: DATA_TABLE_REMOVE_COLUMN_ID,
+      header: "",
+      type: "actions",
+      hideable: false,
+      resizable: false,
+      actions: [
+        {
+          key: "remove",
+          label: t("dataTable.removeRow"),
+          icon: "delete",
+          danger: true,
+          hidden: (row) => editingRows.canRemove ? !editingRows.canRemove(row) : false,
+          onClick: (row) => editingRows.onRemoveRow?.(row)
+        }
+      ]
+    };
+    return { ...configWithUndo, columns: [...configWithUndo.columns, removeColumn] };
+  }, [configWithUndo, editingRows, t]);
+  const { columnVisibility, onColumnVisibilityChange } = useColumnVisibility(config);
+  const { columnOrder, onColumnOrderChange, resetColumnOrder } = useColumnOrder(config);
+  const { columnSizing, onColumnSizingChange, resetColumnSizing } = useColumnSizing(config);
+  useEffect(() => {
+    resetColumnOrder();
+  }, []);
+  const detailExpansionColumns = config.expansion && isDataTableDetailTableExpansion(config.expansion) && Array.isArray(config.expansion.columns) ? config.expansion.columns : null;
+  const { detailColumnVisibility, toggleDetailColumn } = useDetailColumnVisibility(
+    config.entityKey,
+    detailExpansionColumns
+  );
+  const { detailColumnOrder, onDetailColumnOrderChange, resetDetailColumnOrder } = useDetailColumnOrder(
+    config.entityKey,
+    detailExpansionColumns
+  );
+  const detailColumnsState = detailExpansionColumns ? {
+    visibility: detailColumnVisibility,
+    toggleVisibility: toggleDetailColumn,
+    order: detailColumnOrder,
+    onOrderChange: onDetailColumnOrderChange,
+    resetOrder: resetDetailColumnOrder
+  } : void 0;
+  const { isMobile } = useBreakpoint();
+  const hasCardView = !!config.renderCard;
+  const hasGroupedView = !!config.renderGroupedBody;
+  const hasKanbanView = !!config.renderKanbanBody;
+  const [internalViewMode, setInternalViewMode] = useState("cards");
+  const viewMode = controlledViewMode ?? internalViewMode;
+  const [isBulkEditOpen, setIsBulkEditOpen] = useState(false);
+  const handleViewModeChange = (mode) => {
+    if (controlledViewMode === void 0) setInternalViewMode(mode);
+    onViewModeChange?.(mode);
+  };
+  const {
+    table,
+    isClientMode,
+    columnContentWidths,
+    registerRow,
+    beginRowsExit,
+    visibleRows,
+    activeTab,
+    tabs,
+    handleTabChange,
+    handleSearchInput,
+    handleHeaderSortClick,
+    resolveSortDirection,
+    clientPaginationProps,
+    showUpdatingBar,
+    contentOpacityStyle,
+    dataTableOpacityTransitionClass,
+    showSkeleton,
+    hasRows,
+    clientSearchDebounceMs
+  } = useDataTableInstance({
+    config,
+    rows,
+    loading,
+    sort,
+    onSortChange,
+    onSearch,
+    initialSearch,
+    onSearchTermChange,
+    pagination,
+    initialClientPagination,
+    onClientPaginationChange,
+    columnVisibility,
+    onColumnVisibilityChange,
+    columnOrder,
+    onColumnOrderChange,
+    columnSizing,
+    onColumnSizingChange,
+    onFilteredCountChange
+  });
+  const columnConfigById = useMemo(
+    () => new Map(config.columns.map((columnConfig) => [columnConfig.id, columnConfig])),
+    [config.columns]
+  );
+  const visibleLeafColumns = table.getVisibleLeafColumns();
+  const flexColumnId = useMemo(() => {
+    if (config.flexColumnId && visibleLeafColumns.some((leafColumn) => leafColumn.id === config.flexColumnId)) {
+      return config.flexColumnId;
+    }
+    const candidates = visibleLeafColumns.filter((leafColumn, index) => {
+      if (index === 0) return false;
+      const type = columnConfigById.get(leafColumn.id)?.type;
+      return type !== "actions" && !isBadgeColumnType(type);
+    });
+    return candidates[candidates.length - 1]?.id ?? null;
+  }, [visibleLeafColumns, columnConfigById, config.flexColumnId]);
+  const totalTableWidth = useMemo(
+    () => visibleLeafColumns.reduce((sum, leafColumn) => sum + leafColumn.getSize(), 0),
+    [visibleLeafColumns, columnSizing]
+  );
+  const spreadsheet = useMemo(() => {
+    if (config.spreadsheet === false) return void 0;
+    return config.spreadsheet ?? { selection: "range", fill: {} };
+  }, [config.spreadsheet]);
+  const hasEditableColumns = useMemo(
+    () => !!config.editing?.onCellChange && config.columns.some((columnConfig) => !!columnConfig.editable),
+    [config.editing, config.columns]
+  );
+  const editModeBehavior = spreadsheet?.mode ?? "always";
+  const gridEnabled = !!spreadsheet && (hasEditableColumns || !!config.spreadsheet);
+  const gridStore = useGridInstance({
+    spreadsheet,
+    enabled: gridEnabled,
+    startsInEditMode: editModeBehavior === "always"
+  });
+  const isEditMode = useGridEditMode(gridStore);
+  const showEditModeToggle = gridEnabled && editModeBehavior === "toggle";
+  const isEditingSurface = isEditMode && (editModeBehavior === "toggle" || !config.onRowClick);
+  const forceCardsOnMobile = isMobile && (!isFit || hasCardView) && !isEditingSurface;
+  const isGroupedView = hasGroupedView && viewMode === "grouped";
+  const isKanbanView = hasKanbanView && viewMode === "kanban";
+  const isDelegatedView = isGroupedView || isKanbanView;
+  const isCardsView = hasCardView && (viewMode === "cards" || forceCardsOnMobile && !isDelegatedView);
+  const useAutoCards = forceCardsOnMobile && !hasCardView && !isDelegatedView;
+  useEffect(() => {
+    if (!gridStore || !commitStatuses) return;
+    gridStore.getState().setCellStatuses(commitStatuses);
+  }, [gridStore, commitStatuses]);
+  const navigableColumnIds = useMemo(
+    () => visibleLeafColumns.filter((leafColumn) => columnConfigById.get(leafColumn.id)?.type !== "actions").map((leafColumn) => leafColumn.id),
+    [visibleLeafColumns, columnConfigById]
+  );
+  const gridRowIds = useMemo(() => visibleRows.map((row) => row.id), [visibleRows]);
+  useGridMatrixSync(gridStore, gridRowIds, navigableColumnIds);
+  const visibleRowsRef = useRef(visibleRows);
+  visibleRowsRef.current = visibleRows;
+  const canEditCell = useCallback(
+    ({ rowId, columnId }) => {
+      if (!config.editing?.onCellChange) return false;
+      const editable = columnConfigById.get(columnId)?.editable;
+      if (!editable) return false;
+      const row = visibleRowsRef.current.find((candidate) => candidate.id === rowId);
+      if (!row) return false;
+      return !(editable.disabled?.(row.original) ?? false);
+    },
+    [config.editing, columnConfigById]
+  );
+  const acceptsTypedValue = useCallback(
+    ({ columnId }) => {
+      const editable = columnConfigById.get(columnId)?.editable;
+      if (!editable || editable.renderEditor) return false;
+      return editable.type === "text" || editable.type === "number";
+    },
+    [columnConfigById]
+  );
+  const handleGridKeyDown = useGridKeyboard({
+    store: gridStore,
+    canEditCell: hasEditableColumns ? canEditCell : void 0,
+    acceptsTypedValue,
+    onSave: spreadsheet?.onSave
+  });
+  const handleFillCommit = useGridFillApply({
+    visibleRows,
+    columnConfigById,
+    spreadsheet,
+    onCellChange: config.editing?.onCellChange
+  });
+  const handleTableKeyDown = useCallback(
+    (event) => {
+      const restoredCell = handleUndoShortcut(event);
+      if (!restoredCell || !gridStore || !gridStore.getState().isEditMode) return;
+      const restoredGridRow = visibleRowsRef.current.find((candidate) => candidate.original.id === restoredCell.row.id);
+      if (!restoredGridRow) return;
+      gridStore.getState().setActiveCell({ rowId: restoredGridRow.id, columnId: restoredCell.columnId });
+    },
+    [handleUndoShortcut, gridStore]
+  );
+  const handleEditModeToggle = useCallback(() => {
+    const store = gridStore;
+    if (!store) return;
+    store.getState().setEditMode(!store.getState().isEditMode);
+  }, [gridStore]);
+  const cardsScrollRef = useRef(null);
+  const cardsSentinelRef = useRef(null);
+  const cardsLoadMore = cardsInfiniteScroll?.loadMore;
+  const cardsHasMore = cardsInfiniteScroll?.hasMore ?? false;
+  useEffect(() => {
+    if (!isCardsView || !cardsHasMore || !cardsLoadMore) return;
+    const root = cardsScrollRef.current;
+    const sentinel = cardsSentinelRef.current;
+    if (!root || !sentinel) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) cardsLoadMore();
+      },
+      { root, rootMargin: "300px" }
+    );
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [isCardsView, cardsHasMore, cardsLoadMore, visibleRows.length]);
+  const listScrollRef = useRef(null);
+  const [detailSlotWidth, setDetailSlotWidth] = useState(void 0);
+  const [parentHasHorizontalOverflow, setParentHasHorizontalOverflow] = useState(false);
+  useEffect(() => {
+    const scroller = listScrollRef.current;
+    if (!scroller) return void 0;
+    const measure = () => {
+      setDetailSlotWidth(scroller.clientWidth || void 0);
+      setParentHasHorizontalOverflow(scroller.scrollWidth > scroller.clientWidth + 1);
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(scroller);
+    const parentTable = scroller.querySelector("table");
+    if (parentTable) observer.observe(parentTable);
+    return () => observer.disconnect();
+  }, [isCardsView, isDelegatedView, showSkeleton, error, hasRows]);
+  const renderBody = () => {
+    if (isGroupedView && config.renderGroupedBody) return config.renderGroupedBody();
+    if (isKanbanView && config.renderKanbanBody) return config.renderKanbanBody();
+    if (showSkeleton)
+      return isCardsView ? /* @__PURE__ */ jsx(DataTableCardsSkeletonState, { cardClassName: config.cardSkeletonClassName }) : /* @__PURE__ */ jsx(DataTableSkeletonState, { rows: config.skeletonRows });
+    if (error) return /* @__PURE__ */ jsx(DataTableErrorState, { onRetry, errorCause });
+    if (!hasRows && !bodyTopRow) {
+      if (isFit) {
+        return emptyMessage ? /* @__PURE__ */ jsx("div", { className: "py-6 text-center text-sm text-foreground-faint", children: emptyMessage }) : null;
+      }
+      return /* @__PURE__ */ jsx(DataTableEmptyState, { emptyMessage });
+    }
+    if (isCardsView && config.renderCard) {
+      return /* @__PURE__ */ jsxs("div", { ref: cardsScrollRef, className: "relative min-h-0 flex-1 overflow-y-auto @container", children: [
+        showUpdatingBar && /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 top-0 z-10 h-0.5 animate-pulse bg-brand-hover", "aria-hidden": true }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classNames(
+              "flex flex-wrap justify-center gap-4 @md:justify-start",
+              dataTableOpacityTransitionClass,
+              config.cardGridClassName
+            ),
+            style: contentOpacityStyle,
+            children: visibleRows.filter((row) => row.depth === 0).map((row) => /* @__PURE__ */ jsx(Fragment, { children: config.renderCard?.(row.original) }, row.id))
+          }
+        ),
+        cardsInfiniteScroll?.loadingMore && /* @__PURE__ */ jsx("div", { className: "flex justify-center py-4", children: /* @__PURE__ */ jsx(LoadingSpinner, { size: 6 }) }),
+        cardsHasMore && /* @__PURE__ */ jsx("div", { ref: cardsSentinelRef, className: "h-px w-full", "aria-hidden": true })
+      ] });
+    }
+    if (useAutoCards) {
+      return /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto", children: visibleRows.filter((row) => row.depth === 0).map((row) => /* @__PURE__ */ jsx(DataTableAutoCard, { row, columnConfigById }, row.id)) });
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: listScrollRef,
+        onKeyDown: gridStore ? handleGridKeyDown : void 0,
+        className: classNames(
+          "relative [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border-emphasis hover:[&::-webkit-scrollbar-thumb]:bg-foreground-faint [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar]:h-2.5 [&::-webkit-scrollbar]:w-2.5",
+          // The rows scroll inside this bounded region (flex-1 + min-h-0), so the
+          // host provides the height (a full page, or a bounded flex parent like a
+          // fixed-size dialog) and the add-row/footer below stay pinned outside it.
+          "min-h-0 flex-1 overflow-auto"
+        ),
+        children: [
+          showUpdatingBar && /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 top-0 z-10 h-0.5 animate-pulse bg-brand-hover", "aria-hidden": true }),
+          /* @__PURE__ */ jsxs(
+            "table",
+            {
+              role: gridStore ? "grid" : void 0,
+              "aria-multiselectable": gridStore && spreadsheet?.selection === "range" ? true : void 0,
+              className: classNames(
+                // `table-fixed`: column widths come exclusively from the colgroup so
+                // user resizes are honored exactly (under `table-auto` the browser
+                // ignores explicit col widths and sizes by content). The slack
+                // absorber (auto-width col) still soaks any leftover space.
+                "min-w-full table-fixed border-separate border-spacing-0 rounded-md border-y border-border-subtle",
+                dataTableOpacityTransitionClass
+              ),
+              style: { ...contentOpacityStyle, width: totalTableWidth || void 0 },
+              children: [
+                /* @__PURE__ */ jsx(
+                  DataTableHead,
+                  {
+                    table,
+                    columns: config.columns,
+                    columnConfigById,
+                    columnContentWidths,
+                    columnOrder,
+                    onColumnOrderChange,
+                    resetColumnOrder,
+                    resetColumnSizing,
+                    onHeaderSortClick: handleHeaderSortClick,
+                    resolveSortDirection,
+                    hideColumnToggle: columnTogglePlacement !== "header",
+                    flexColumnId,
+                    showActionsShadow: parentHasHorizontalOverflow,
+                    dense,
+                    spacious
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  DataTableBody,
+                  {
+                    config,
+                    visibleRows,
+                    columnConfigById,
+                    columnContentWidths,
+                    registerRow,
+                    onCollapseStart: beginRowsExit,
+                    detailColumnsState,
+                    detailSlotWidth,
+                    showActionsShadow: parentHasHorizontalOverflow,
+                    dense,
+                    spacious,
+                    fillEnabled: !!spreadsheet?.fill,
+                    editMode: isEditMode,
+                    canEditCell,
+                    bodyTopRow,
+                    bodyTopRowColSpan: table.getVisibleLeafColumns().length
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  };
+  const isMobileCardsTakeover = isCardsView && viewMode !== "cards" && !cardsInfiniteScroll;
+  const showPagination = (!isCardsView || isMobileCardsTakeover) && !isDelegatedView && !!clientPaginationProps && !showSkeleton && !error && hasRows && clientPaginationProps.numberOfPages > 0 && !(clientPaginationProps.numberOfPages === 1 && clientPaginationProps.pageSize <= DATA_TABLE_MIN_PAGE_SIZE);
+  const [hasLoadedOnce, setHasLoadedOnce] = useState(!loading);
+  useEffect(() => {
+    if (!loading) setHasLoadedOnce(true);
+  }, [loading]);
+  const showSearch = (!!onSearch || isClientMode) && config.searchable !== false;
+  const showToolbar = (tabs?.length ?? 0) > 0 || hasCardView || showSearch || !!toolbarSlot || !!toolbarStartSlot || columnTogglePlacement === "toolbar";
+  const columnToggleSlot = columnTogglePlacement === "toolbar" ? /* @__PURE__ */ jsx(
+    DataTableColumnToggle,
+    {
+      table,
+      columns: config.columns,
+      columnOrder,
+      onColumnOrderChange,
+      resetColumnOrder,
+      resetColumnSizing,
+      variant: "toolbar"
+    }
+  ) : void 0;
+  const showTableControls = !isCardsView && !isDelegatedView && !showSkeleton && !error && hasRows;
+  const showFooterColumnToggle = columnTogglePlacement === "footer" && showTableControls;
+  const showFooterEditToggle = showEditModeToggle && showTableControls;
+  const showBulkEdit = hasEditableColumns && !!spreadsheet?.fill?.onFillCells && !isDelegatedView && !showSkeleton && !error && hasRows;
+  const showFooterControls = showFooterColumnToggle || showFooterEditToggle || showBulkEdit || !!footerActionsSlot;
+  const bulkEditRows = useMemo(
+    () => visibleRows.filter((row) => row.depth === 0).map((row) => row.original),
+    [visibleRows]
+  );
+  const activeFiltersBar = config.filters && filterValues && onFilterValuesChange ? /* @__PURE__ */ jsx(
+    ActiveFiltersBar,
+    {
+      fields: config.filters.fields ?? [],
+      values: filterValues,
+      onRemove: (key) => onFilterValuesChange({
+        ...filterValues,
+        [key]: emptyValueForKind((config.filters?.fields ?? []).find((field) => field.key === key)?.kind ?? "text")
+      }),
+      onClearAll: () => onFilterValuesChange(buildEmptyFilterValues(config.filters?.fields ?? []))
+    }
+  ) : null;
+  const content = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex min-h-0 w-full flex-1 flex-col gap-4",
+      onKeyDown: isUndoEnabled ? handleTableKeyDown : void 0,
+      children: [
+        activeFiltersBar,
+        showToolbar && /* @__PURE__ */ jsx(
+          DataTableToolbar,
+          {
+            tabs,
+            activeTab,
+            onTabChange: handleTabChange,
+            showViewToggle: hasCardView && !hideViewToggle && !forceCardsOnMobile,
+            showGroupedView: hasGroupedView,
+            showKanbanView: hasKanbanView,
+            viewMode,
+            onViewModeChange: handleViewModeChange,
+            showSearch,
+            searchLabel,
+            initialSearch,
+            searchDisabled,
+            searchDebounceTime: isClientMode ? clientSearchDebounceMs : searchDebounceTime,
+            searchMinLength,
+            searchAtStart,
+            onSearchInput: handleSearchInput,
+            toolbarSlot,
+            toolbarStartSlot,
+            columnToggleSlot,
+            showSkeleton: loading && !hasLoadedOnce
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 animate-fade-in flex-col", children: renderBody() }, viewMode),
+        showAddRow && // Sibling of the scrolling rows region, so it stays pinned below the grid
+        // (outside its scroll) — the rows scroll, this control does not move.
+        /* @__PURE__ */ jsx("div", { className: "flex", children: /* @__PURE__ */ jsxs(
+          ControlledButton,
+          {
+            variant: "outlined",
+            className: "flex items-center gap-1.5",
+            onClick: () => editingRows?.onAddRow?.(),
+            children: [
+              /* @__PURE__ */ jsx(MaterialSymbol, { icon: "add", size: 16 }),
+              t("dataTable.addRow")
+            ]
+          }
+        ) }),
+        (showFooterControls || showPagination) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+          showFooterControls && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 pb-3", children: [
+            showFooterColumnToggle && /* @__PURE__ */ jsx(
+              DataTableColumnToggle,
+              {
+                table,
+                columns: config.columns,
+                columnOrder,
+                onColumnOrderChange,
+                resetColumnOrder,
+                resetColumnSizing,
+                variant: "toolbar"
+              }
+            ),
+            showFooterEditToggle && /* @__PURE__ */ jsx(DataTableEditModeButton, { active: isEditMode, onToggle: handleEditModeToggle }),
+            showBulkEdit && /* @__PURE__ */ jsx(DataTableBulkEditButton, { onClick: () => setIsBulkEditOpen(true) }),
+            footerActionsSlot
+          ] }),
+          showPagination && /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+            DataTablePagination,
+            {
+              pageSize: clientPaginationProps.pageSize,
+              numberOfPages: clientPaginationProps.numberOfPages,
+              currentPage: clientPaginationProps.currentPage,
+              setCurrentPage: clientPaginationProps.setCurrentPage,
+              onPageSizeChange: clientPaginationProps.onPageSizeChange,
+              totalItems: clientPaginationProps.totalItems
+            }
+          ) })
+        ] }),
+        showBulkEdit && /* @__PURE__ */ jsx(
+          DataTableBulkEditDialog,
+          {
+            open: isBulkEditOpen,
+            onClose: () => setIsBulkEditOpen(false),
+            columns: config.columns,
+            rows: bulkEditRows,
+            getRowLabel: config.getRowLabel,
+            onApply: (changes) => spreadsheet?.fill?.onFillCells?.(changes)
+          }
+        )
+      ]
+    }
+  );
+  const editableContent = config.editing?.clickToEdit ? /* @__PURE__ */ jsx(DataTableCellEditingProvider, { children: content }) : content;
+  if (!gridStore) return editableContent;
+  return /* @__PURE__ */ jsx(
+    GridProvider,
+    {
+      store: gridStore,
+      gridAreaRef: listScrollRef,
+      canEditCell,
+      onFillCommit: handleFillCommit,
+      children: editableContent
+    }
+  );
+};
+export {
+  DataTable as default
+};
+//# sourceMappingURL=DataTable.js.map