@planningcenter/tapestry 4.12.0 → 4.13.0

package/dist/components/DataTable/DataTable.d.ts

@@ -31,12 +31,6 @@ interface DataTableBaseProps {
     currentPage?: number;
     /** The array of rows to display. */
     data: unknown[];
-    /**
-     * The id of the view the table opens with. Defaults to `"initial"`. The
-     * table doesn't apply it on mount; set the initial `activeFilters`, sort,
-     * and visible columns from it.
-     */
-    defaultViewId?: NonNullable<SavedView["id"]>;
     /**
      * Row keys that can't be selected. Keys are the values returned by `getRowId`
      * (or `row.id`, or the row's index) — the same keys used by `selectedKeys`.
@@ -52,6 +46,7 @@ interface DataTableBaseProps {
     /**
      * The filter tree shown in the "Add filter" popover. Renders the filter
      * controls in the header when set; omit to leave filtering off entirely.
+     * `q` is reserved for the search, so no filter can use it as its name.
      */
     filters?: FilterNode[];
     /** Returns a stable identity for each row. Defaults to `row.id`. */
@@ -74,19 +69,42 @@ interface DataTableBaseProps {
      * `false` (the default) disables the Previous button.
      */
     hasPreviousPage?: boolean;
+    /**
+     * The names of the columns currently hidden. Only columns marked `hideable`
+     * can be hidden — every other column stays visible. Omitting this (or
+     * passing `[]`) leaves all columns visible, and unknown names are ignored.
+     * Columns added later stay visible until hidden, so a stored value never
+     * hides them by accident.
+     */
+    hiddenColumnNames?: string[];
     /**
      * An `id` for the table element. When omitted, a stable generated id is used
      * so the results count can be linked to the table via `aria-describedby`.
      */
     id?: string;
+    /**
+     * The id of the view the table opens with, selected on mount. Defaults to
+     * `"initial"`. The table doesn't apply it; the initial `activeFilters`
+     * (apart from the search), sort, and visible columns must match it. Later
+     * changes are ignored.
+     */
+    initialDefaultViewId?: NonNullable<SavedView["id"]>;
+    /**
+     * Named sets of filters, sort, and hidden columns the user can apply, shown
+     * in array order. Can't use the id `"initial"`, which is reserved for the
+     * initial view. Later changes are ignored; remount with a new `key` to start
+     * from fresh views.
+     */
+    initialSavedViews?: SavedView[];
     /**
      * Async loading state for the table body.
      * - `"loading"`: While `data` is empty, replaces the empty state with a
      *   centered spinner. While `data` has rows, keeps them on screen with a
      *   spinner over them until new `data` arrives, so a search doesn't blank
      *   the table. When requests can overlap, apply only the latest response.
-     *   Set it while a filter or search request is in flight, so the count
-     *   announced to screen reader users is the new one.
+     *   Set it while any request is in flight, so screen reader users hear
+     *   the new count when it ends. Keep `"idle"` for a refresh the user did
+     *   not start, such as polling, or the count is announced again.
      * - `"error"`: While `data` is empty, replaces the empty state with
      *   `errorState` (or a default error message).
      * - `"idle"` (default): Normal rendering.
@@ -99,11 +117,21 @@ interface DataTableBaseProps {
     onActiveFiltersChange?: (activeFilters: ActiveFilter[]) => void;
     /**
      * Called with the id of the view the user sets as the default, or
-     * `"initial"` when they delete the default view. Without it, the Set as
+     * `"initial"` once the default view is deleted. Without it, the Set as
      * default action is hidden; on the default view it's disabled and reads
-     * "Default view". Pass the id back in as `defaultViewId`.
+     * "Default view". The table shows the new default right away, and puts the
+     * previous one back if the promise rejects, unless the user has set another
+     * default since.
+     */
+    onDefaultViewIdChange?: (id: NonNullable<SavedView["id"]>) => Promise<void> | void;
+    /**
+     * Called with the hidden column names, in `columns` order, when the
+     * visibility toggle changes or a saved view is applied. Only `hideable`
+     * columns are included, so the value can be passed straight back as
+     * `hiddenColumnNames`. Column visibility is controlled, so the table only
+     * updates once `hiddenColumnNames` changes.
      */
-    onDefaultViewIdChange?: (id: NonNullable<SavedView["id"]>) => void;
+    onHiddenColumnNamesChange?: (hiddenColumnNames: string[]) => void;
     /**
      * Called when the Next button is activated. Only used by
      * `paginationType="indexed"`; load the following page's rows and pass them
@@ -131,35 +159,38 @@ interface DataTableBaseProps {
     onRowClick?: (row: unknown) => void;
     /**
      * Called with the new view when the user saves the current filters, sort,
-     * and columns as a view. Without it, the new view button is hidden. Return
-     * the saved view with its new id, or a promise of it; that view is selected
-     * once it's passed back in `savedViews`. A callback that returns nothing
-     * doesn't type check, so resolve to the view after refetching, e.g.
+     * and columns as a view, or duplicates a view. Without it, views can't be
+     * created or duplicated. Return the saved view with its new id, or a promise
+     * of it; that view is selected once it's passed back in `savedViews`, unless
+     * it was duplicated from the manage views modal. A callback that returns
+     * nothing doesn't type check, so resolve to the view after refetching, e.g.
      * `(view) => api.create(view).then(async (saved) => { await refetch(); return saved })`.
      */
     onSavedViewCreate?: (savedView: Omit<SavedView, "id">) => Promise<SavedView> | SavedView;
     /**
      * Called with the view once the user confirms deleting it, from the context
-     * menu or the manage views modal. Without it, views can't be deleted. Remove
-     * the view from `savedViews` to finish.
+     * menu or the manage views modal. Without it, views can't be deleted. The
+     * table removes the view right away, and puts it back in its place if the
+     * promise rejects. Deleting the default view resets the default to
+     * `"initial"`, which is restored too.
+     */
+    onSavedViewDelete?: (savedView: SavedView) => Promise<void> | void;
+    /**
+     * Called when the user moves a saved view, with the saved view it now comes
+     * after, or `null` when it's first. Save the new position and return a
+     * promise. The table moves the view right away, and moves it back if the
+     * promise rejects. Without it, the manage views modal has no drag handles.
      */
-    onSavedViewDelete?: (savedView: SavedView) => void;
+    onSavedViewReorder?: (savedView: SavedView, after: SavedView | null) => Promise<void> | void;
     /**
      * Called with the updated view, matched by `id`. Return the saved view, or a
-     * promise of it; like `onSavedViewCreate`, a callback that returns nothing
-     * doesn't type check. Without it, view names are read only.
+     * promise of it. The table shows the change right away, then swaps in the
+     * returned view, or puts the old one back if the promise rejects, unless
+     * the view has changed again since. Without it, view names are read only.
      */
     onSavedViewUpdate?: (savedView: SavedView) => Promise<SavedView> | SavedView;
     /** Callback invoked when the sort state changes. */
     onSortChange?: (sort: Sort) => void;
-    /**
-     * Called with the full ordered list of visible column names when the
-     * visibility toggle changes. Always-visible columns are included, so the
-     * value can be passed straight back as `visibleColumnNames`. Column
-     * visibility is controlled, so the table only updates once
-     * `visibleColumnNames` changes.
-     */
-    onVisibleColumnNamesChange?: (visibleColumnNames: string[]) => void;
     /**
      * Which shape the page controls take, forwarded to the `Pagination` control's
      * `type`.
@@ -184,7 +215,7 @@ interface DataTableBaseProps {
      * the select-all banner. Without a result count, the banner isn't offered
      * because the table can't accurately describe the all-pages selection.
      * It also sets the count announced to screen reader users after a filter
-     * change. Without it, a paginated table announces only the current page,
+     * change or a load. Without it, a paginated table announces only the current page,
      * e.g. `"25 results on this page"`.
      */
     resultCount?: number;
@@ -217,15 +248,6 @@ interface DataTableBaseProps {
      * action's `onAction` or `getHref` receives the row.
      */
     rowActions?: RowAction[];
-    /**
-     * Named sets of filters, sort, and hidden columns the user can apply, shown
-     * by `sortKey`, then in array order. The first view matching the state on
-     * mount starts selected; after that, the selection follows the view the
-     * user last applied or created, even once the filters, sort, or columns
-     * change. Can't use the id `"initial"`, which is reserved for the initial
-     * view.
-     */
-    savedViews?: SavedView[];
     /** Ref to the scroll container the sticky header should track. Takes priority over `scrollContainerSelector`. Only used when `stickyHeader` is true. */
     scrollContainerRef?: React.RefObject<HTMLElement>;
     /** CSS selector for the scroll container the sticky header should track. Only used when `stickyHeader` is true. Defaults to ".content-wrap" */
@@ -233,7 +255,8 @@ interface DataTableBaseProps {
     /**
      * Displays a search input above the table. The query is kept in
      * `activeFilters` as a `q` filter and reported through
-     * `onActiveFiltersChange` once typing pauses.
+     * `onActiveFiltersChange` once typing pauses. It isn't saved with
+     * views, and applying a saved view leaves it alone.
      */
     searchable?: boolean;
     /**
@@ -245,10 +268,10 @@ interface DataTableBaseProps {
     /** The current sort state for the table. */
     sortBy?: Sort;
     /**
-     * Read-only views from the app, listed before `savedViews`. Ids must not
-     * overlap with `savedViews`. Unless one has the id `"initial"`, an "All"
-     * view is added first. Omit both `staticViews` and `savedViews` to hide the
-     * views bar.
+     * Read-only views from the app, listed before the saved views. Ids must not
+     * overlap with `initialSavedViews`. Unless one has the id `"initial"`, an
+     * "All" view is added first. Omit both `staticViews` and `initialSavedViews`
+     * to hide the views bar.
      */
     staticViews?: StaticView[];
     /** Enables a sticky header that tracks an outer scroll container. Progressive enhancement: Relies on `animation-timeline: scroll()`, which isn't supported in all browsers (e.g. Firefox) — the header scrolls with the table body instead of sticking in those cases. */
@@ -273,13 +296,6 @@ interface DataTableBaseProps {
      * the whole result set, and `onPageChange` should load the next page.
      */
     totalPages?: number;
-    /**
-     * The names of the columns currently visible. Only columns marked `hideable`
-     * are affected — every other column stays visible. Omitting this leaves all
-     * columns visible. Unknown names are ignored and display order always
-     * follows `columns`.
-     */
-    visibleColumnNames?: string[];
 }
 interface DataTableExplicitSelectionProps {
     /** Keeps selection values as arrays of row keys. */

package/dist/components/DataTable/DataTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.tsx"],"names":[],"mappings":"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"}

package/dist/components/DataTable/DataTable.js

@@ -1,11 +1,11 @@
 import LoadingSpinner from '../internal/LoadingSpinner.js';
-import React__default, { useRef, useMemo, useState, useLayoutEffect } from 'react';
-import 'react-aria/private/live-announcer/LiveAnnouncer';
+import { LoadingAnnouncement } from '../internal/LoadingAnnouncement.js';
 import '../internal/tooltip/Tooltip.js';
 import { Pagination } from '../internal/pagination/Pagination.js';
 import Icon from '../../utilities/Icon.js';
 import { useId } from '../../utilities/useId.js';
 import classNames from 'classnames';
+import React__default, { useRef, useMemo, useState, useLayoutEffect } from 'react';
 import { Table, TableHeader, Column, Checkbox, TableBody, Row, Cell } from 'react-aria-components/Table';
 import { ActiveFilters } from './ActiveFilters.js';
 import { prepareColumn } from './DataTableColumnTypes.js';
@@ -16,15 +16,18 @@ import { useFilterOpenRequest } from './FilterOpenRequest.js';
 import { usePendingFilters } from './PendingFilterContext.js';
 import { hasResultsCount, resolveResultNounLabel, ResultsCount } from './ResultsCount.js';
 import { RowActions } from './RowActions.js';
-import { sortSavedViews } from './savedViews.js';
+import { withoutSearch, initialView, isSavedViewModified, isSavedViewEditable } from './savedViews.js';
 import { SavedViewsBar } from './SavedViewsBar.js';
 import { SelectAllBanner } from './SelectAllBanner.js';
 import { TableActions } from './TableActions.js';
 import { TableSearch } from './TableSearch.js';
+import { useActiveSavedView } from './useActiveSavedView.js';
 import { useColumnVisibility } from './useColumnVisibility.js';
 import { useDataTableSelection, DataTableSelectionContext } from './useDataTableSelection.js';
-import { useFilterAnnouncement } from './useFilterAnnouncement.js';
+import { useResultsAnnouncement } from './useResultsAnnouncement.js';
 import { useRowPressBoundary } from './useRowPressBoundary.js';
+import { useSavedViewsState } from './useSavedViewsState.js';
+import { useSaveStatus } from './useSaveStatus.js';
 import { useSearchFilter } from './useSearchFilter.js';
 import { useShelfExpanded } from './useShelfExpanded.js';
 import { ViewSettingsToggle } from './ViewSettingsToggle.js';
@@ -49,7 +52,7 @@ const DEFAULT_ERROR_STATE = "Something went wrong.";
  */
 const DataTable = ({ activeFilters = [], filters = [], ...props }) => (React__default.createElement(FiltersProvider, { activeFilters: activeFilters, filters: filters },
     React__default.createElement(DataTableInner, { ...props, activeFilters: activeFilters, filters: filters })));
-const DataTableInner = ({ activeFilters = [], className, canSelectAllPages, columns, currentPage = 1, data, defaultViewId = "initial", disabledKeys, emptyState, errorState, filters = [], getRowId, getRowLink, hasNextPage = false, hasPreviousPage = false, id, loadingState = "idle", paginationType = "paged", resultCount, resultNoun, scrollContainerRef, scrollContainerSelector = ".content-wrap", rowActions, savedViews, searchable, selectable, selectedKeys: controlledSelectedKeys, staticViews, stickyHeader, sortBy, tableActions, totalDisabledCount, totalPages, visibleColumnNames, onActiveFiltersChange = () => { }, onDefaultViewIdChange, onNextPageClick, onPageChange, onPreviousPageClick, onRowClick, onSavedViewCreate, onSavedViewDelete, onSavedViewUpdate, onSelectedChange, onSortChange, onVisibleColumnNamesChange, ...restProps }) => {
+const DataTableInner = ({ activeFilters = [], className, canSelectAllPages, columns, currentPage = 1, data, disabledKeys, emptyState, errorState, filters = [], getRowId, getRowLink, hasNextPage = false, hasPreviousPage = false, hiddenColumnNames, id, initialDefaultViewId = "initial", initialSavedViews, loadingState = "idle", paginationType = "paged", resultCount, resultNoun, scrollContainerRef, scrollContainerSelector = ".content-wrap", rowActions, searchable, selectable, selectedKeys: controlledSelectedKeys, staticViews: staticViewsProp, stickyHeader, sortBy, tableActions, totalDisabledCount, totalPages, onActiveFiltersChange = () => { }, onDefaultViewIdChange: onDefaultViewIdChangeProp, onHiddenColumnNamesChange, onNextPageClick, onPageChange, onPreviousPageClick, onRowClick, onSavedViewCreate: onSavedViewCreateProp, onSavedViewDelete: onSavedViewDeleteProp, onSavedViewReorder, onSavedViewUpdate: onSavedViewUpdateProp, onSelectedChange, onSortChange, ...restProps }) => {
     const hasRowPressAction = Boolean(onRowClick || getRowLink);
     const rowsAreInteractive = hasRowPressAction || Boolean(selectable);
     const combinedClassName = classNames("tds-data-table-grid", className);
@@ -81,9 +84,25 @@ const DataTableInner = ({ activeFilters = [], className, canSelectAllPages, colu
     [columnKey]);
     const { hideableColumns, isColumnVisible, onColumnVisibilityChange, visibleHideableColumns, } = useColumnVisibility({
         columns,
-        onVisibleColumnNamesChange,
-        visibleColumnNames,
+        hiddenColumnNames,
+        onHiddenColumnNamesChange,
     });
+    const staticViews = useMemo(() => staticViewsProp?.map(withoutSearch), [staticViewsProp]);
+    const { defaultViewId, isReordering: isSavedViewReordering, onCreate: onSavedViewCreate, onDelete: onSavedViewDelete, onReorder: onSavedViewMove, onSetDefault: onDefaultViewIdChange, onUpdate: onSavedViewUpdate, savedViews, } = useSavedViewsState({
+        initialDefaultViewId,
+        initialSavedViews,
+        onCreate: onSavedViewCreateProp,
+        onDelete: onSavedViewDeleteProp,
+        onReorder: onSavedViewReorder,
+        onSetDefault: onDefaultViewIdChangeProp,
+        onUpdate: onSavedViewUpdateProp,
+    });
+    const hasInitialView = staticViews?.some(({ id }) => id === initialView.id);
+    const staticViewsWithInitial = hasInitialView
+        ? (staticViews ?? [])
+        : [initialView, ...(staticViews ?? [])];
+    const views = [...staticViewsWithInitial, ...(savedViews ?? [])];
+    const { activeSavedView, select, selectWhenSaved } = useActiveSavedView(views, () => views.find(({ id }) => id === defaultViewId));
     const visiblePreparedColumns = useMemo(() => preparedColumns.filter(({ column }) => isColumnVisible(column)), [preparedColumns, isColumnVisible]);
     const selectionModel = useDataTableSelection({
         canSelectAllPages,
@@ -105,15 +124,24 @@ const DataTableInner = ({ activeFilters = [], className, canSelectAllPages, colu
     // set that fits on one page shows both buttons disabled.
     const isIndexedPagination = paginationType === "indexed";
     const showPagination = isIndexedPagination || (totalPages !== undefined && totalPages > 1);
-    const announcedActiveFiltersChange = useFilterAnnouncement({
+    const announcedActiveFiltersChange = useResultsAnnouncement({
         isPageCount: showPagination && resultCount === undefined,
         loadingState,
         onActiveFiltersChange,
         resultNoun,
         totalCount,
     });
+    const { chipFilters, clearFilters, onChipFiltersChange, onSearchChange, searchQuery, } = useSearchFilter(activeFilters, announcedActiveFiltersChange);
+    // Shared by the saved views bar and the filters shelf, so a save from the
+    // shelf shows its status in the bar.
+    const saveStatus = useSaveStatus();
+    // The view being applied, until the table's state matches it, so its actions
+    // don't flash in before the app passes the view's filters back.
+    const [applyingView, setApplyingView] = useState();
+    // Search isn't part of a view, so applying one keeps the current search.
     const applySavedView = (savedView) => {
-        announcedActiveFiltersChange(savedView.activeFilters);
+        setApplyingView(savedView);
+        onChipFiltersChange(savedView.activeFilters);
         if (savedView.sort)
             onSortChange?.(savedView.sort);
         if (savedView.hiddenColumnNames) {
@@ -123,6 +151,37 @@ const DataTableInner = ({ activeFilters = [], className, canSelectAllPages, colu
                 .map(({ name }) => name));
         }
     };
+    // What a view saves from the table. Hidden columns are left out when no
+    // column can be hidden, and sort when there isn't one.
+    const currentState = {
+        activeFilters: chipFilters,
+        ...(hideableColumns.length > 0 && {
+            hiddenColumnNames: hideableColumns
+                .filter((column) => !isColumnVisible(column))
+                .map(({ name }) => name),
+        }),
+        ...(sortBy && { sort: sortBy }),
+    };
+    if (applyingView && !isSavedViewModified(applyingView, currentState))
+        setApplyingView(undefined);
+    // A filter, sort, or column edit also ends applying, so the actions still
+    // show when the table can't match a view, such as an app that doesn't apply
+    // its sort or a view that hides a column that's gone.
+    const changeChipFilters = (filters) => {
+        setApplyingView(undefined);
+        onChipFiltersChange(filters);
+    };
+    const changeColumnVisibility = (visibleColumnNames) => {
+        setApplyingView(undefined);
+        onColumnVisibilityChange(visibleColumnNames);
+    };
+    // Only a user-created view with filters can be saved over. Pending filters
+    // aren't applied yet, so they don't count as changes.
+    const isActiveSavedViewModified = activeSavedView !== undefined &&
+        activeSavedView.id !== applyingView?.id &&
+        isSavedViewEditable(activeSavedView, savedViews ?? []) &&
+        chipFilters.length > 0 &&
+        isSavedViewModified(activeSavedView, currentState);
     // Associate the visible results count with the table so screen readers
     // announce it as a description of the table. `Table` doesn't support a real
     // `<caption>` (its children go through a collection builder), so we link the
@@ -150,7 +209,6 @@ const DataTableInner = ({ activeFilters = [], className, canSelectAllPages, colu
     const showHeader = hasResults || Boolean(hasTrailingControls);
     const hasRowActions = (rowActions?.length ?? 0) > 0;
     const { pendingFilters } = usePendingFilters();
-    const { chipFilters, clearFilters, onChipFiltersChange, onSearchChange, searchQuery, } = useSearchFilter(activeFilters, announcedActiveFiltersChange);
     const hasEditableFilters = chipFilters.length + pendingFilters.length > 0;
     const { filterOpenRequest } = useFilterOpenRequest();
     const [isShelfExpanded, toggleShelf] = useShelfExpanded(chipFilters.length + pendingFilters.length, pendingFilters.length, filterOpenRequest);
@@ -161,7 +219,7 @@ const DataTableInner = ({ activeFilters = [], className, canSelectAllPages, colu
     return (React__default.createElement("div", { className: classNames("tds-data-table", {
             "tds-data-table--sticky-header": hasScrollContainer,
         }) },
-        (Array.isArray(staticViews) || Array.isArray(savedViews)) && (React__default.createElement(SavedViewsBar, { defaultViewId: defaultViewId, savedViews: sortSavedViews(savedViews ?? []), staticViews: staticViews ?? [], onApply: applySavedView, onCreate: onSavedViewCreate, onDelete: onSavedViewDelete, onSetDefault: onDefaultViewIdChange, onUpdate: onSavedViewUpdate, activeFilters: activeFilters, hideableColumns: hideableColumns, isColumnVisible: isColumnVisible, sortBy: sortBy })),
+        (Array.isArray(staticViews) || Array.isArray(savedViews)) && (React__default.createElement(SavedViewsBar, { activeSavedView: activeSavedView, currentState: currentState, defaultViewId: defaultViewId, isReordering: isSavedViewReordering, saveStatus: saveStatus, savedViews: savedViews ?? [], select: select, selectWhenSaved: selectWhenSaved, staticViews: staticViewsWithInitial, onApply: applySavedView, onCreate: onSavedViewCreate, onDelete: onSavedViewDelete, onReorder: onSavedViewMove, onSetDefault: onDefaultViewIdChange, onUpdate: onSavedViewUpdate })),
         React__default.createElement("div", { className: "tds-data-table-frame" },
             React__default.createElement(DataTableSelectionContext.Provider, { value: selectionModel },
                 showHeader && (React__default.createElement("div", { className: "tds-data-table-frame-header" },
@@ -172,11 +230,11 @@ const DataTableInner = ({ activeFilters = [], className, canSelectAllPages, colu
                         hasTrailingControls && (React__default.createElement("div", { className: "tds-data-table-frame-header-controls" },
                             searchable && (React__default.createElement(TableSearch, { label: searchLabel, tableId: tableId, value: searchQuery, onChange: onSearchChange })),
                             hasFilters && (React__default.createElement(FilterControls, { activeFilters: chipFilters, filters: filters, isShelfExpanded: isShelfExpanded, onToggleShelf: toggleShelf })),
-                            hasViewSettingsToggle && (React__default.createElement(ViewSettingsToggle, { columns: hideableColumns, onColumnVisibilityChange: onColumnVisibilityChange, visibleColumnNames: visibleHideableColumns }))))))),
+                            hasViewSettingsToggle && (React__default.createElement(ViewSettingsToggle, { columns: hideableColumns, onColumnVisibilityChange: changeColumnVisibility, visibleColumnNames: visibleHideableColumns }))))))),
                 (hasFilters || hasEditableFilters) && (React__default.createElement("div", { className: classNames("tds-data-table-filters-shelf", {
                         "tds-data-table-filters-shelf--collapsed": !isShelfExpanded,
                     }), ...shelfInertProps },
-                    React__default.createElement("div", { className: "tds-data-table-filters" }, hasEditableFilters && (React__default.createElement(ActiveFilters, { activeFilters: chipFilters, hasFilters: hasFilters, onActiveFiltersChange: onChipFiltersChange, onClear: clearFilters }))))),
+                    React__default.createElement("div", { className: "tds-data-table-filters" }, hasEditableFilters && (React__default.createElement(ActiveFilters, { activeFilters: chipFilters, activeSavedView: isActiveSavedViewModified ? activeSavedView : undefined, currentState: currentState, hasFilters: hasFilters, saveStatus: saveStatus, selectSavedViewWhenSaved: selectWhenSaved, onActiveFiltersChange: changeChipFilters, onClear: clearFilters, onSavedViewApply: applySavedView, onSavedViewCreate: onSavedViewCreate, onSavedViewUpdate: onSavedViewUpdate }))))),
                 React__default.createElement(SelectAllBanner, { resultNoun: resultNoun })),
             React__default.createElement("div", { ref: wrapperRef, className: "tds-data-table-scroll-wrapper" },
                 React__default.createElement("div", { ref: scrollRef, className: "tds-data-table-scroll", "aria-busy": showLoadingOverlay || undefined },
@@ -187,6 +245,7 @@ const DataTableInner = ({ activeFilters = [], className, canSelectAllPages, colu
                         // disable `onRowClick`/`getRowLink` and drop the row out of the
                         // focus order, so it has to be set explicitly.
                         disabledBehavior: "selection", disabledKeys: disabledKeys, sortDescriptor: sortDescriptor, onSortChange: (sort) => {
+                            setApplyingView(undefined);
                             onSortChange?.(serializeSort(sort));
                         } },
                         React__default.createElement(TableHeader, { className: "tds-data-table-header" },
@@ -213,10 +272,11 @@ const DataTableInner = ({ activeFilters = [], className, canSelectAllPages, colu
                                 hasRowActions && (React__default.createElement(Cell, { ...cellBoundaryProps, className: "tds-data-table-cell tds-data-table-cell--actions" },
                                     React__default.createElement(RowActions, { actions: rowActions, row: row, rowKey: rowKey })))));
                         })))),
-                showLoadingOverlay && (React__default.createElement("div", { className: "tds-data-table-loading-overlay", role: "status" },
+                showLoadingOverlay && (React__default.createElement("div", { className: "tds-data-table-loading-overlay" },
                     React__default.createElement("span", { className: "tds-data-table-loading-label--hidden" }, "Loading"),
                     React__default.createElement("span", { className: "tds-data-table-loading-spinner", "aria-hidden": "true" },
-                        React__default.createElement(LoadingSpinner, null))))),
+                        React__default.createElement(LoadingSpinner, null)),
+                    React__default.createElement(LoadingAnnouncement, { message: "Loading" })))),
             showPagination && (React__default.createElement("div", { className: "tds-data-table-frame-footer" }, isIndexedPagination ? (React__default.createElement(Pagination, { "aria-label": paginationLabel, hasNextPage: hasNextPage, hasPreviousPage: hasPreviousPage, onNextPageClick: onNextPageClick, onPreviousPageClick: onPreviousPageClick, type: "indexed" })) : (React__default.createElement(Pagination, { "aria-label": paginationLabel, currentPage: currentPage, onPageChange: onPageChange, totalPages: totalPages })))))));
 };
 DataTable.displayName = "DataTable";
@@ -227,10 +287,11 @@ DataTable.displayName = "DataTable";
  */
 function getEmptyStateContent({ emptyState, errorState, loadingState, }) {
     if (loadingState === "loading") {
-        return (React__default.createElement("div", { className: "tds-data-table-loading", role: "status" },
+        return (React__default.createElement("div", { className: "tds-data-table-loading" },
             React__default.createElement("span", { className: "tds-data-table-cell-label--hidden" }, "Loading"),
             React__default.createElement("span", { className: "tds-data-table-loading-spinner", "aria-hidden": "true" },
-                React__default.createElement(LoadingSpinner, null))));
+                React__default.createElement(LoadingSpinner, null)),
+            React__default.createElement(LoadingAnnouncement, { message: "Loading" })));
     }
     // Error and empty share the same container; they differ only in content.
     const content = loadingState === "error" ? (errorState ?? DEFAULT_ERROR_STATE) : emptyState;