npm - @planningcenter/tapestry - Versions diffs - 4.7.0 → 4.8.0-rc.1 - Mend

@planningcenter/tapestry 4.7.0 → 4.8.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (89) hide show

package/dist/components/DataTable/ActiveFilterInstance.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import type React from "react";
-import type { FilterNodeItem, Operator, UpdateActiveFilter } from "./FilterTypes";
+import type { FilterChange, FilterNodeItem, Operator } from "./FilterTypes";
 export declare abstract class ActiveFilterInstance<T = unknown> {
     readonly filter: FilterNodeItem;
     readonly operator: Operator;
@@ -8,6 +8,6 @@ export declare abstract class ActiveFilterInstance<T = unknown> {
     toSegments(): string[];
     abstract formatValue(): string | string[];
     toValueSegments(): string[];
-    abstract renderEditor(updateActiveFilter: UpdateActiveFilter): React.ReactNode;
+    abstract renderEditor(onChange: FilterChange): React.ReactNode;
 }
 //# sourceMappingURL=ActiveFilterInstance.d.ts.map

package/dist/components/DataTable/ActiveFilterInstance.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ActiveFilterInstance.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/ActiveFilterInstance.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,~~EACV~~,cAAc,~~EACd~~,QAAQ,~~EACR~~,~~kBAAkB,EACnB,~~MAAM,eAAe,CAAA;~~AAEtB~~,8BAAsB,oBAAoB,CAAC,CAAC,GAAG,OAAO;IAElD,QAAQ,CAAC,MAAM,EAAE,cAAc;IAC/B,QAAQ,CAAC,QAAQ,EAAE,QAAQ;IAC3B,QAAQ,CAAC,KAAK,EAAE,CAAC;gBAFR,MAAM,EAAE,cAAc,EACtB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,CAAC;IAGnB,UAAU,IAAI,MAAM,EAAE;IAOtB,QAAQ,CAAC,WAAW,IAAI,MAAM,GAAG,MAAM,EAAE;IAEzC,eAAe,IAAI,MAAM,EAAE;~~IAK3B~~,QAAQ,CAAC,YAAY,CAAC,~~kBAAkB~~,EAAE,~~kBAAkB~~,GAAG,KAAK,CAAC,SAAS;CAC/E"}
1	+ {"version":3,"file":"ActiveFilterInstance.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/ActiveFilterInstance.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAG3E,8BAAsB,oBAAoB,CAAC,CAAC,GAAG,OAAO;IAElD,QAAQ,CAAC,MAAM,EAAE,cAAc;IAC/B,QAAQ,CAAC,QAAQ,EAAE,QAAQ;IAC3B,QAAQ,CAAC,KAAK,EAAE,CAAC;gBAFR,MAAM,EAAE,cAAc,EACtB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,CAAC;IAGnB,UAAU,IAAI,MAAM,EAAE;IAOtB,QAAQ,CAAC,WAAW,IAAI,MAAM,GAAG,MAAM,EAAE;IAEzC,eAAe,IAAI,MAAM,EAAE;IAM3B,QAAQ,CAAC,YAAY,CAAC,QAAQ,EAAE,YAAY,GAAG,KAAK,CAAC,SAAS;CAC/D"}

package/dist/components/DataTable/ActiveFilterInstance.js CHANGED Viewed

@@ -1,3 +1,5 @@
+import { isEmptyValue } from './utils.js';
 class ActiveFilterInstance {
     filter;
     operator;
@@ -15,7 +17,8 @@ class ActiveFilterInstance {
     }
     toValueSegments() {
         const value = this.formatValue();
-        return Array.isArray(value) ? value : [value];
+        const segments = Array.isArray(value) ? value : [value];
+        return segments.filter((segment) => !isEmptyValue(segment));
     }
 }

package/dist/components/DataTable/ActiveFilterInstance.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ActiveFilterInstance.js","sources":["../../../src/components/DataTable/ActiveFilterInstance.tsx"],"sourcesContent":["import type React from \"react\"\n\nimport type {\n FilterNodeItem~~,\n~~ Operator~~,\n UpdateActiveFilter,\n~~} from \"./FilterTypes\"\n\nexport abstract class ActiveFilterInstance<T = unknown> {\n constructor(\n readonly filter: FilterNodeItem,\n readonly operator: Operator,\n readonly value: T\n ) {}\n\n toSegments(): string[] {\n const { label } = this.operator\n return label\n ? [this.filter.label, label, ...this.toValueSegments()]\n : [this.filter.label, ...this.toValueSegments()]\n }\n\n abstract formatValue(): string \| string[]\n\n toValueSegments(): string[] {\n const value = this.formatValue()\n ~~return~~ Array.isArray(value) ? value : [value]\n }\n\n abstract renderEditor(~~updateActiveFilter~~: ~~UpdateActiveFilter~~): React.ReactNode\n}\n"],"names":[],"mappings":"~~MAQsB~~,oBAAoB,CAAA;AAE7B,IAAA,MAAA;AACA,IAAA,QAAA;AACA,IAAA,KAAA;AAHX,IAAA,WAAA,CACW,MAAsB,EACtB,QAAkB,EAClB,KAAQ,EAAA;QAFR,IAAA,CAAA,MAAM,GAAN,MAAM;QACN,IAAA,CAAA,QAAQ,GAAR,QAAQ;QACR,IAAA,CAAA,KAAK,GAAL,KAAK;IACb;IAEH,UAAU,GAAA;AACR,QAAA,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ;AAC/B,QAAA,OAAO;AACL,cAAE,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,eAAe,EAAE;AACtD,cAAE,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IACpD;IAIA,eAAe,GAAA;AACb,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE;AAChC,QAAA,~~OAAO~~,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,KAAK,CAAC;~~IAC/C~~;AAGD;;;;"}
1	+ {"version":3,"file":"ActiveFilterInstance.js","sources":["../../../src/components/DataTable/ActiveFilterInstance.tsx"],"sourcesContent":["import type React from \"react\"\n\nimport type { FilterChange, FilterNodeItem, Operator } from \"./FilterTypes\"\nimport { isEmptyValue } from \"./utils\"\n\nexport abstract class ActiveFilterInstance<T = unknown> {\n constructor(\n readonly filter: FilterNodeItem,\n readonly operator: Operator,\n readonly value: T\n ) {}\n\n toSegments(): string[] {\n const { label } = this.operator\n return label\n ? [this.filter.label, label, ...this.toValueSegments()]\n : [this.filter.label, ...this.toValueSegments()]\n }\n\n abstract formatValue(): string \| string[]\n\n toValueSegments(): string[] {\n const value = this.formatValue()\n const segments = Array.isArray(value) ? value : [value]\n return segments.filter((segment) => !isEmptyValue(segment))\n }\n\n abstract renderEditor(onChange: FilterChange): React.ReactNode\n}\n"],"names":[],"mappings":";;MAKsB,oBAAoB,CAAA;AAE7B,IAAA,MAAA;AACA,IAAA,QAAA;AACA,IAAA,KAAA;AAHX,IAAA,WAAA,CACW,MAAsB,EACtB,QAAkB,EAClB,KAAQ,EAAA;QAFR,IAAA,CAAA,MAAM,GAAN,MAAM;QACN,IAAA,CAAA,QAAQ,GAAR,QAAQ;QACR,IAAA,CAAA,KAAK,GAAL,KAAK;IACb;IAEH,UAAU,GAAA;AACR,QAAA,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ;AAC/B,QAAA,OAAO;AACL,cAAE,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,eAAe,EAAE;AACtD,cAAE,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IACpD;IAIA,eAAe,GAAA;AACb,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE;AAChC,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,KAAK,CAAC;AACvD,QAAA,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC,OAAO,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAC7D;AAGD;;;;"}

package/dist/components/DataTable/ActiveFilters.d.ts CHANGED Viewed

@@ -1,13 +1,16 @@
 import React from "react";
-import type { ActiveFilter, UpdateActiveFilter } from "./FilterTypes";
-export declare function ActiveFilters({ activeFilters, onActiveFiltersChange, }: {
+import type { ActiveFilter, FilterChange } from "./FilterTypes";
+export declare function ActiveFilters({ activeFilters, hasFilters, onActiveFiltersChange, }: {
     activeFilters: ActiveFilter[];
+    /** Whether the filter schema has loaded. */
+    hasFilters: boolean;
     onActiveFiltersChange: (activeFilters: ActiveFilter[]) => void;
 }): React.JSX.Element;
-declare function ActiveFilter({ activeFilter, updateActiveFilter, removeActiveFilter, }: {
+declare function ActiveFilter({ activeFilter, onChange, removeActiveFilter, pending, }: {
     activeFilter: ActiveFilter;
+    onChange: FilterChange;
+    pending?: boolean;
     removeActiveFilter: () => void;
-    updateActiveFilter: UpdateActiveFilter;
 }): React.JSX.Element;
 export {};
 //# sourceMappingURL=ActiveFilters.d.ts.map

package/dist/components/DataTable/ActiveFilters.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ActiveFilters.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/ActiveFilters.tsx"],"names":[],"mappings":"~~AAKA~~,OAAO,KAAK,MAAM,OAAO,CAAA;~~AAIzB~~,OAAO,KAAK,EAAE,YAAY,EAAE,~~kBAAkB~~,EAAE,MAAM,eAAe,CAAA;~~AAGrE~~,wBAAgB,aAAa,CAAC,EAC5B,aAAa,EACb,qBAAqB,GACtB,EAAE;IACD,aAAa,EAAE,YAAY,EAAE,CAAA;IAC7B,qBAAqB,EAAE,CAAC,aAAa,EAAE,YAAY,EAAE,KAAK,IAAI,CAAA;CAC/D,~~qBAwBA~~;AAED,iBAAS,YAAY,CAAC,EACpB,YAAY,EACZ,kBAAkB,EAClB,~~kBAAkB~~,~~GACnB~~,EAAE;IACD,YAAY,EAAE,YAAY,CAAA;IAC1B,~~kBAAkB~~,EAAE,~~MAAM~~,~~IAAI~~,CAAA;~~IAC9B~~,kBAAkB,EAAE,~~kBAAkB~~,CAAA;~~CACvC~~,~~qBAwDA~~"}
1	+ {"version":3,"file":"ActiveFilters.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/ActiveFilters.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAI/D,wBAAgB,aAAa,CAAC,EAC5B,aAAa,EACb,UAAU,EACV,qBAAqB,GACtB,EAAE;IACD,aAAa,EAAE,YAAY,EAAE,CAAA;IAC7B,4CAA4C;IAC5C,UAAU,EAAE,OAAO,CAAA;IACnB,qBAAqB,EAAE,CAAC,aAAa,EAAE,YAAY,EAAE,KAAK,IAAI,CAAA;CAC/D,qBA4DA;AAED,iBAAS,YAAY,CAAC,EACpB,YAAY,EACZ,QAAQ,EACR,kBAAkB,EAClB,OAAe,GAChB,EAAE;IACD,YAAY,EAAE,YAAY,CAAA;IAC1B,QAAQ,EAAE,YAAY,CAAA;IACtB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,kBAAkB,EAAE,MAAM,IAAI,CAAA;CAC/B,qBA2DA"}

package/dist/components/DataTable/ActiveFilters.js CHANGED Viewed

@@ -1,28 +1,56 @@
+import '../button/ActionsDropdownIconButton.js';
+import { Button } from '../button/Button.js';
+import '../button/DropdownButton.js';
+import '../button/DropdownIconButton.js';
+import '../button/IconButton.js';
+import '../button/LoadingButton.js';
+import '../button/PageHeaderActionsDropdownButton.js';
 import { Popover, PopoverTrigger, PopoverContent } from '../popover/Popover.js';
 import React__default from 'react';
 import { FilterChip, FilterChipSegments } from './FilterChip.js';
-import { useRelatedFilterOperator } from './FilterContext.js';
+import { useRestoreFilterFocus, useRelatedFilterOperator } from './FilterContext.js';
 import { OperatorSelect } from './OperatorSelect.js';
+import { usePendingFilters } from './PendingFilterContext.js';
-function ActiveFilters({ activeFilters, onActiveFiltersChange, }) {
+function ActiveFilters({ activeFilters, hasFilters, onActiveFiltersChange, }) {
+    const { pendingFilters, removePendingFilter, updatePendingFilter } = usePendingFilters();
+    const restoreFilterFocus = useRestoreFilterFocus();
     return (React__default.createElement("div", { className: "tds-data-table-filters-active" },
-        React__default.createElement("div", { className: "tds-data-table-filters-active-list" }, activeFilters.map((filter, index) => (React__default.createElement(ActiveFilter, { key: index, activeFilter: filter, updateActiveFilter: (updatedActiveFilter) => {
-                const newActiveFilters = [...activeFilters];
-                newActiveFilters[index] = { ...filter, ...updatedActiveFilter };
-                onActiveFiltersChange(newActiveFilters);
-            }, removeActiveFilter: () => {
-                onActiveFiltersChange(activeFilters.filter((_, i) => i !== index));
-            } })))),
-        React__default.createElement("div", { className: "tds-data-table-filters-active-actions" })));
+        React__default.createElement("div", { className: "tds-data-table-filters-active-list" },
+            activeFilters.map((filter, index) => (React__default.createElement(ActiveFilter, { key: `active-${index}`, activeFilter: filter, onChange: (updates) => {
+                    const newActiveFilters = [...activeFilters];
+                    newActiveFilters[index] = { ...filter, ...updates };
+                    onActiveFiltersChange(newActiveFilters);
+                }, removeActiveFilter: () => {
+                    onActiveFiltersChange(activeFilters.filter((_, i) => i !== index));
+                } }))),
+            pendingFilters.map((filter, index) => (React__default.createElement(ActiveFilter, { key: `pending-${index}`, activeFilter: filter, onChange: (updates, { complete = true } = {}) => {
+                    if (!complete) {
+                        updatePendingFilter(filter, updates);
+                        return;
+                    }
+                    onActiveFiltersChange([
+                        ...activeFilters,
+                        { ...filter, ...updates },
+                    ]);
+                    removePendingFilter(filter);
+                }, removeActiveFilter: () => {
+                    removePendingFilter(filter);
+                }, pending: true })))),
+        React__default.createElement("div", { className: "tds-data-table-filters-active-actions" },
+            React__default.createElement(Button, { "aria-label": "Clear filters", disabled: !hasFilters, kind: "secondary", label: "Clear", size: "sm", onClick: () => {
+                    onActiveFiltersChange([]);
+                    restoreFilterFocus();
+                } }))));
 }
-function ActiveFilter({ activeFilter, updateActiveFilter, removeActiveFilter, }) {
+function ActiveFilter({ activeFilter, onChange, removeActiveFilter, pending = false, }) {
     const { relatedFilter, operator } = useRelatedFilterOperator(activeFilter);
     if (!relatedFilter || !operator)
         return (React__default.createElement(FilterChip, { label: "Unrecognized filter", onRemove: removeActiveFilter, status: "invalid" },
             React__default.createElement(FilterChipSegments, { segments: ["Unrecognized filter"] })));
     const activeFilterInstance = relatedFilter.createActiveFilterInstance(activeFilter, operator);
-    return (React__default.createElement(FilterChip, { label: `${relatedFilter.label} filter`, onRemove: removeActiveFilter },
-        React__default.createElement(Popover, null,
+    return (React__default.createElement(FilterChip, { label: `${relatedFilter.label} filter${pending ? " (pending)" : ""}`, onRemove: removeActiveFilter, status: pending ? "inactive" : undefined },
+        React__default.createElement(Popover, { defaultOpen: pending },
             React__default.createElement(PopoverTrigger, null,
                 React__default.createElement(FilterChipSegments, { segments: activeFilterInstance.toSegments() })),
             React__default.createElement(PopoverContent, { className: "tds-popover--data-table-filters-popover", modal: false },
@@ -32,8 +60,8 @@ function ActiveFilter({ activeFilter, updateActiveFilter, removeActiveFilter, })
                         " ",
                         operator.label))),
                 relatedFilter.description && (React__default.createElement("p", { className: "tds-data-table-filters-popover-description" }, relatedFilter.description)),
-                React__default.createElement(OperatorSelect, { operator: operator, relatedFilter: relatedFilter, updateActiveFilter: updateActiveFilter }),
-                activeFilterInstance.renderEditor(updateActiveFilter)))));
+                React__default.createElement(OperatorSelect, { operator: operator, relatedFilter: relatedFilter, updateActiveFilter: (updates) => onChange(updates, { complete: false }) }),
+                activeFilterInstance.renderEditor(onChange)))));
 }
 export { ActiveFilters };

package/dist/components/DataTable/ActiveFilters.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ActiveFilters.js","sources":["../../../src/components/DataTable/ActiveFilters.tsx"],"sourcesContent":["import {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@components/popover/Popover\"\nimport React from \"react\"\n\nimport { FilterChip, FilterChipSegments } from \"./FilterChip\"\nimport { useRelatedFilterOperator } from \"./FilterContext\"\nimport type { ActiveFilter, ~~UpdateActiveFilter~~ } from \"./FilterTypes\"\nimport { OperatorSelect } from \"./OperatorSelect\"\n\nexport function ActiveFilters({\n activeFilters,\n onActiveFiltersChange,\n}: {\n activeFilters: ActiveFilter[]\n onActiveFiltersChange: (activeFilters: ActiveFilter[]) => void\n}) {\n return (\n <div className=\"tds-data-table-filters-active\">\n <div className=\"tds-data-table-filters-active-list\">\n {activeFilters.map((filter, index) => (\n <ActiveFilter\n key={index}\n activeFilter={filter}\n ~~updateActiveFilter~~={(~~updatedActiveFilter~~) => {\n const newActiveFilters = [...activeFilters]\n newActiveFilters[index] = { ...filter, ...~~updatedActiveFilter~~ }\n onActiveFiltersChange(newActiveFilters)\n }}\n removeActiveFilter={() => {\n onActiveFiltersChange(activeFilters.filter((_, i) => i !== index))\n }}\n />\n ))}\n </div>\n <div className=\"tds-data-table-filters-active-actions\">\n {/* TODO: ~~Clear~~ ~~and save~~ view ~~buttons~~ go here */}\n </div>\n </div>\n )\n}\n\nfunction ActiveFilter({\n activeFilter,\n ~~updateActiveFilter~~,\n removeActiveFilter,\n}: {\n activeFilter: ActiveFilter\n removeActiveFilter: () => void\n ~~updateActiveFilter: UpdateActiveFilter\n~~}) {\n const { relatedFilter, operator } = useRelatedFilterOperator(activeFilter)\n\n if (!relatedFilter \|\| !operator)\n return (\n <FilterChip\n label=\"Unrecognized filter\"\n onRemove={removeActiveFilter}\n status=\"invalid\"\n >\n <FilterChipSegments segments={[\"Unrecognized filter\"]} />\n </FilterChip>\n )\n\n const activeFilterInstance = relatedFilter.createActiveFilterInstance(\n activeFilter,\n operator\n )\n\n return (\n <FilterChip\n label={`${relatedFilter.label} filter`}\n onRemove={removeActiveFilter}\n >\n <Popover>\n <PopoverTrigger>\n <FilterChipSegments segments={activeFilterInstance.toSegments()} />\n </PopoverTrigger>\n <PopoverContent\n className=\"tds-popover--data-table-filters-popover\"\n modal={false}\n >\n <h2 className=\"tds-data-table-filters-popover-label\">\n {relatedFilter.label}\n {relatedFilter.operators.length === 1 && (\n <span className=\"tds-data-table-filters-popover-label-operator\">\n {\" \"}\n {operator.label}\n </span>\n )}\n </h2>\n {relatedFilter.description && (\n <p className=\"tds-data-table-filters-popover-description\">\n {relatedFilter.description}\n </p>\n )}\n <OperatorSelect\n operator={operator}\n relatedFilter={relatedFilter}\n updateActiveFilter={~~updateActiveFilter~~}\n />\n {activeFilterInstance.renderEditor(~~updateActiveFilter~~)}\n </PopoverContent>\n </Popover>\n </FilterChip>\n )\n}\n"],"names":["React"],"mappings":"~~;;;;;;SAYgB~~,aAAa,CAAC,EAC5B,aAAa,EACb,qBAAqB,~~GAItB~~,EAAA;~~AACC~~,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,+BAA+B,EAAA;~~AAC5C~~,~~QAAAA,~~cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oCAAoC,EAAA,~~EAChD~~,aAAa,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,MAC/BA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EACX,GAAG,EAAE,KAAK,~~EACV~~,YAAY,EAAE,MAAM,EACpB,~~kBAAkB~~,EAAE,CAAC,~~mBAAmB~~,KAAI;~~AAC1C~~,~~gBAAA~~,MAAM,gBAAgB,GAAG,CAAC,GAAG,aAAa,CAAC;~~gBAC3C~~,gBAAgB,CAAC,KAAK,CAAC,GAAG,EAAE,GAAG,MAAM,EAAE,GAAG,~~mBAAmB~~,EAAE;~~gBAC/D~~,qBAAqB,CAAC,gBAAgB,CAAC;AACzC,~~YAAA~~,CAAC,EACD,kBAAkB,EAAE,MAAK;AACvB,~~gBAAA~~,qBAAqB,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC,CAAC;~~YACpE~~,CAAC,EAAA,CACD,CACH,CAAC,CACE;~~AACN~~,~~QAAAA,~~cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uCAAuC,EAAA,~~CAEhD~~,CACF;AAEV;AAEA,SAAS,YAAY,CAAC,EACpB,YAAY,EACZ,kBAAkB,EAClB,~~kBAAkB~~,~~GAKnB~~,EAAA;IACC,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,wBAAwB,CAAC,YAAY,CAAC;AAE1E,IAAA,IAAI,CAAC,aAAa,IAAI,CAAC,QAAQ;AAC7B,QAAA,QACEA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACT,KAAK,EAAC,qBAAqB,EAC3B,QAAQ,EAAE,kBAAkB,EAC5B,MAAM,EAAC,SAAS,EAAA;YAEhBA,cAAA,CAAA,aAAA,CAAC,kBAAkB,EAAA,EAAC,QAAQ,EAAE,CAAC,qBAAqB,CAAC,EAAA,CAAI,CAC9C;IAGjB,MAAM,oBAAoB,GAAG,aAAa,CAAC,0BAA0B,CACnE,YAAY,EACZ,QAAQ,CACT;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACT,KAAK,EAAE,CAAA,EAAG,aAAa,CAAC,KAAK,~~CAAA~~,~~OAAA~~,~~CAAS~~,~~EACtC~~,QAAQ,EAAE,kBAAkB,EAAA;~~AAE5B~~,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,~~IAAA~~;~~AACN~~,YAAAA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,IAAA;gBACbA,cAAA,CAAA,aAAA,CAAC,kBAAkB,IAAC,QAAQ,EAAE,oBAAoB,CAAC,UAAU,EAAE,EAAA,CAAI,CACpD;YACjBA,cAAA,CAAA,aAAA,CAAC,cAAc,IACb,SAAS,EAAC,yCAAyC,EACnD,KAAK,EAAE,KAAK,EAAA;gBAEZA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,sCAAsC,EAAA;AACjD,oBAAA,aAAa,CAAC,KAAK;oBACnB,aAAa,CAAC,SAAS,CAAC,MAAM,KAAK,CAAC,KACnCA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,+CAA+C,EAAA;wBAC5D,GAAG;AACH,wBAAA,QAAQ,CAAC,KAAK,CACV,CACR,CACE;AACJ,gBAAA,aAAa,CAAC,WAAW,KACxBA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,4CAA4C,EAAA,EACtD,aAAa,CAAC,WAAW,CACxB,CACL;~~AACD~~,~~gBAAAA,~~cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACb,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,EAC5B,kBAAkB,EAAE,~~kBAAkB~~,EAAA,~~CACtC~~;gBACD,oBAAoB,CAAC,YAAY,CAAC,~~kBAAkB~~,CAAC,~~CACvC~~,CACT,CACC;AAEjB;;;;"}
1	+ {"version":3,"file":"ActiveFilters.js","sources":["../../../src/components/DataTable/ActiveFilters.tsx"],"sourcesContent":["import { Button } from \"@components/button\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@components/popover/Popover\"\nimport React from \"react\"\n\nimport { FilterChip, FilterChipSegments } from \"./FilterChip\"\nimport {\n useRelatedFilterOperator,\n useRestoreFilterFocus,\n} from \"./FilterContext\"\nimport type { ActiveFilter, FilterChange } from \"./FilterTypes\"\nimport { OperatorSelect } from \"./OperatorSelect\"\nimport { usePendingFilters } from \"./PendingFilterContext\"\n\nexport function ActiveFilters({\n activeFilters,\n hasFilters,\n onActiveFiltersChange,\n}: {\n activeFilters: ActiveFilter[]\n /** Whether the filter schema has loaded. /\n hasFilters: boolean\n onActiveFiltersChange: (activeFilters: ActiveFilter[]) => void\n}) {\n const { pendingFilters, removePendingFilter, updatePendingFilter } =\n usePendingFilters()\n const restoreFilterFocus = useRestoreFilterFocus()\n\n return (\n <div className=\"tds-data-table-filters-active\">\n <div className=\"tds-data-table-filters-active-list\">\n {activeFilters.map((filter, index) => (\n <ActiveFilter\n key={`active-${index}`}\n activeFilter={filter}\n onChange={(updates) => {\n const newActiveFilters = [...activeFilters]\n newActiveFilters[index] = { ...filter, ...updates }\n onActiveFiltersChange(newActiveFilters)\n }}\n removeActiveFilter={() => {\n onActiveFiltersChange(activeFilters.filter((_, i) => i !== index))\n }}\n />\n ))}\n {pendingFilters.map((filter, index) => (\n <ActiveFilter\n key={`pending-${index}`}\n activeFilter={filter}\n onChange={(updates, { complete = true } = {}) => {\n if (!complete) {\n updatePendingFilter(filter, updates)\n return\n }\n onActiveFiltersChange([\n ...activeFilters,\n { ...filter, ...updates },\n ])\n removePendingFilter(filter)\n }}\n removeActiveFilter={() => {\n removePendingFilter(filter)\n }}\n pending\n />\n ))}\n </div>\n <div className=\"tds-data-table-filters-active-actions\">\n <Button\n aria-label=\"Clear filters\"\n disabled={!hasFilters}\n kind=\"secondary\"\n label=\"Clear\"\n size=\"sm\"\n onClick={() => {\n onActiveFiltersChange([])\n restoreFilterFocus()\n }}\n />\n {/ TODO: Save view button goes here */}\n </div>\n </div>\n )\n}\n\nfunction ActiveFilter({\n activeFilter,\n onChange,\n removeActiveFilter,\n pending = false,\n}: {\n activeFilter: ActiveFilter\n onChange: FilterChange\n pending?: boolean\n removeActiveFilter: () => void\n}) {\n const { relatedFilter, operator } = useRelatedFilterOperator(activeFilter)\n\n if (!relatedFilter \|\| !operator)\n return (\n <FilterChip\n label=\"Unrecognized filter\"\n onRemove={removeActiveFilter}\n status=\"invalid\"\n >\n <FilterChipSegments segments={[\"Unrecognized filter\"]} />\n </FilterChip>\n )\n\n const activeFilterInstance = relatedFilter.createActiveFilterInstance(\n activeFilter,\n operator\n )\n\n return (\n <FilterChip\n label={`${relatedFilter.label} filter${pending ? \" (pending)\" : \"\"}`}\n onRemove={removeActiveFilter}\n status={pending ? \"inactive\" : undefined}\n >\n <Popover defaultOpen={pending}>\n <PopoverTrigger>\n <FilterChipSegments segments={activeFilterInstance.toSegments()} />\n </PopoverTrigger>\n <PopoverContent\n className=\"tds-popover--data-table-filters-popover\"\n modal={false}\n >\n <h2 className=\"tds-data-table-filters-popover-label\">\n {relatedFilter.label}\n {relatedFilter.operators.length === 1 && (\n <span className=\"tds-data-table-filters-popover-label-operator\">\n {\" \"}\n {operator.label}\n </span>\n )}\n </h2>\n {relatedFilter.description && (\n <p className=\"tds-data-table-filters-popover-description\">\n {relatedFilter.description}\n </p>\n )}\n <OperatorSelect\n operator={operator}\n relatedFilter={relatedFilter}\n updateActiveFilter={(updates) =>\n onChange(updates, { complete: false })\n }\n />\n {activeFilterInstance.renderEditor(onChange)}\n </PopoverContent>\n </Popover>\n </FilterChip>\n )\n}\n"],"names":["React"],"mappings":"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"}

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

@@ -270,7 +270,7 @@ export type DataTableElementProps = CombineAriaPropsWithCustomProps<AriaTablePro
  * @component
  */
 export declare const DataTable: {
-    ({ activeFilters, className, canSelectAllPages, columns, currentPage, data, disabledKeys, emptyState, errorState, filters, getRowId, getRowLink, hasNextPage, hasPreviousPage, id, loadingState, paginationType, resultCount, resultNoun, scrollContainerRef, scrollContainerSelector, rowActions, selectable, selectedKeys: controlledSelectedKeys, stickyHeader, sortBy, tableActions, totalDisabledCount, totalPages, visibleColumnNames, onActiveFiltersChange, onNextPageClick, onPageChange, onPreviousPageClick, onRowClick, onSelectedChange, onSortChange, onVisibleColumnNamesChange, ...restProps }: DataTableElementProps): React.JSX.Element;
+    ({ activeFilters, filters, ...props }: DataTableElementProps): React.JSX.Element;
     displayName: string;
 };
 //# sourceMappingURL=DataTable.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AACpB,OAAO,eAAe,CAAA;AAKtB,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAA;AAGhF,OAAO,KAAK,EAAE,EACZ,KAAK,SAAS,EAKf,MAAM,OAAO,CAAA;AACd,OAAO,EASL,KAAK,UAAU,IAAI,cAAc,EAClC,MAAM,6BAA6B,CAAA;AAGpC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAKxD,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;~~AAC7D~~,OAAO,EAGL,KAAK,UAAU,EAEhB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,KAAK,SAAS,EAAc,MAAM,cAAc,CAAA;AAEzD,OAAO,EAAE,KAAK,WAAW,EAAgB,MAAM,gBAAgB,CAAA;AAE/D,OAAO,EACL,KAAK,kBAAkB,EAGxB,MAAM,yBAAyB,CAAA;AAKhC,YAAY,EAAE,kBAAkB,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,CAAA;AAEtE,MAAM,MAAM,IAAI,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,KAAK,GAAG,MAAM,CAAA;CAAE,CAAA;AAEhE,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAA;AAEhE,UAAU,kBAAkB;IAC1B,aAAa,CAAC,EAAE,YAAY,EAAE,CAAA;IAC9B;;;;OAIG;IACH,OAAO,EAAE,eAAe,EAAE,CAAA;IAC1B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oCAAoC;IACpC,IAAI,EAAE,OAAO,EAAE,CAAA;IACf;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;IAClC,iEAAiE;IACjE,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,4EAA4E;IAC5E,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,EAAE,CAAA;IACtB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,MAAM,GAAG,MAAM,CAAA;IAC5C;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,MAAM,CAAA;IACrC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAA;IACpC;;;OAGG;IACH,qBAAqB,CAAC,EAAE,CAAC,aAAa,EAAE,YAAY,EAAE,KAAK,IAAI,CAAA;IAC/D;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAA;IAChC;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAA;IACnC,oDAAoD;IACpD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IACnC;;;;;;OAMG;IACH,0BAA0B,CAAC,EAAE,CAAC,kBAAkB,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACnE;;;;;;;;;;;;;OAaG;IACH,cAAc,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IACpC;;;;;;;;;OASG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,EAAE,CAAA;IACxB,wJAAwJ;IACxJ,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IACjD,+IAA+I;IAC/I,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,IAAI,CAAA;IACb,0QAA0Q;IAC1Q,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B;;;;;;;;;;;OAWG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAA;CAC9B;AAED,UAAU,+BAA+B;IACvC,oDAAoD;IACpD,iBAAiB,CAAC,EAAE,KAAK,CAAA;IACzB,oEAAoE;IACpE,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAA;IACtD,6BAA6B;IAC7B,YAAY,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;IAClC,mEAAmE;IACnE,YAAY,CAAC,EAAE,WAAW,EAAE,CAAA;CAC7B;AAED,UAAU,+BAA+B;IACvC;;;;;;OAMG;IACH,iBAAiB,EAAE,IAAI,CAAA;IACvB,+DAA+D;IAC/D,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,kBAAkB,KAAK,IAAI,CAAA;IAC1D;;;;OAIG;IACH,YAAY,CAAC,EAAE,kBAAkB,CAAA;IACjC,mEAAmE;IACnE,YAAY,CAAC,EAAE,WAAW,CAAC,kBAAkB,CAAC,EAAE,CAAA;CACjD;AAED,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAC7C,CAAC,+BAA+B,GAAG,+BAA+B,CAAC,CAAA;AAIrE,KAAK,oBAAoB,GAAG,UAAU,GAAG,MAAM,CAAA;AAE/C,KAAK,uBAAuB,GAAG,KAAK,CAAA;AAEpC,MAAM,MAAM,qBAAqB,GAAG,+BAA+B,CACjE,cAAc,EACd,cAAc,EACd,oBAAoB,EACpB,uBAAuB,CACxB,CAAA;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,SAAS;~~olBAwCnB~~,qBAAqB;;~~CA8VvB~~,CAAA"}
1	+ {"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 CHANGED Viewed

@@ -11,6 +11,7 @@ import { prepareColumn } from './DataTableColumnTypes.js';
 import { getRowKey } from './DataTableRow.js';
 import { FiltersProvider } from './FilterContext.js';
 import { FilterControls } from './FilterControls.js';
+import { usePendingFilters } from './PendingFilterContext.js';
 import { hasResultsCount, resolveResultNounLabel, ResultsCount } from './ResultsCount.js';
 import { RowActions } from './RowActions.js';
 import { SelectAllBanner } from './SelectAllBanner.js';
@@ -39,7 +40,9 @@ const DEFAULT_ERROR_STATE = "Something went wrong.";
  *
  * @component
  */
-const DataTable = ({ activeFilters = [], className, canSelectAllPages, columns, currentPage = 1, data, disabledKeys, emptyState, errorState, filters = [], getRowId, getRowLink, hasNextPage = false, hasPreviousPage = false, id, loadingState = "idle", paginationType = "paged", resultCount, resultNoun, scrollContainerRef, scrollContainerSelector = ".content-wrap", rowActions, selectable, selectedKeys: controlledSelectedKeys, stickyHeader, sortBy, tableActions, totalDisabledCount, totalPages, visibleColumnNames, onActiveFiltersChange = () => { }, onNextPageClick, onPageChange, onPreviousPageClick, onRowClick, onSelectedChange, onSortChange, onVisibleColumnNamesChange, ...restProps }) => {
+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, disabledKeys, emptyState, errorState, filters = [], getRowId, getRowLink, hasNextPage = false, hasPreviousPage = false, id, loadingState = "idle", paginationType = "paged", resultCount, resultNoun, scrollContainerRef, scrollContainerSelector = ".content-wrap", rowActions, selectable, selectedKeys: controlledSelectedKeys, stickyHeader, sortBy, tableActions, totalDisabledCount, totalPages, visibleColumnNames, onActiveFiltersChange = () => { }, onNextPageClick, onPageChange, onPreviousPageClick, onRowClick, onSelectedChange, onSortChange, onVisibleColumnNamesChange, ...restProps }) => {
     const hasRowPressAction = Boolean(onRowClick || getRowLink);
     const rowsAreInteractive = hasRowPressAction || Boolean(selectable);
     const combinedClassName = classNames("tds-data-table-grid", className);
@@ -105,12 +108,13 @@ const DataTable = ({ activeFilters = [], className, canSelectAllPages, columns,
         ? `${resultNounLabel} table pagination`
         : undefined;
     const hasActions = (tableActions?.length ?? 0) > 0;
-    const hasFilters = (filters?.length ?? 0) > 0;
+    const hasFilters = (filters.length ?? 0) > 0;
     const hasViewSettingsToggle = hideableColumns.length > 0;
     const showHeader = Boolean(resultNoun || hasActions || hasFilters || hasViewSettingsToggle);
     const hasRowActions = (rowActions?.length ?? 0) > 0;
-    const hasActiveFilters = activeFilters.length > 0;
-    const [isShelfExpanded, toggleShelf] = useShelfExpanded(activeFilters.length);
+    const { pendingFilters } = usePendingFilters();
+    const hasEditableFilters = activeFilters.length + pendingFilters.length > 0;
+    const [isShelfExpanded, toggleShelf] = useShelfExpanded(activeFilters.length + pendingFilters.length, pendingFilters.length);
     // Keeps collapsed shelf content out of tab order/a11y tree. Needs a string,
     // not a boolean — `inert` isn't in `@types/react@18` or recognized by
     // react-dom as a boolean attribute before React 19.
@@ -122,58 +126,57 @@ const DataTable = ({ activeFilters = [], className, canSelectAllPages, columns,
     // set that fits on one page shows both buttons disabled.
     const isIndexedPagination = paginationType === "indexed";
     const showPagination = isIndexedPagination || (totalPages !== undefined && totalPages > 1);
-    return (React__default.createElement(FiltersProvider, { filters: filters },
-        React__default.createElement("div", { className: classNames("tds-data-table", {
-                "tds-data-table--sticky-header": hasScrollContainer,
-            }) },
-            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" },
-                        React__default.createElement(ResultsCount, { id: resultsCountId, resultNoun: resultNoun, selectable: selectable, selectedCount: selectedCount, totalCount: totalCount }),
-                        hasActions && (React__default.createElement(TableActions, { actions: tableActions, resultNoun: resultNoun })),
-                        hasFilters && (React__default.createElement(FilterControls, { activeFilters: activeFilters, filters: filters, isShelfExpanded: isShelfExpanded, onToggleShelf: toggleShelf })),
-                        hasViewSettingsToggle && (React__default.createElement(ViewSettingsToggle, { columns: hideableColumns, onColumnVisibilityChange: onColumnVisibilityChange, visibleColumnNames: visibleHideableColumns })))),
-                    React__default.createElement(SelectAllBanner, { resultNoun: resultNoun })),
-                (hasFilters || hasActiveFilters) && (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" }, hasActiveFilters && (React__default.createElement(ActiveFilters, { activeFilters: activeFilters, onActiveFiltersChange: onActiveFiltersChange }))))),
-                React__default.createElement("div", { ref: wrapperRef, className: "tds-data-table-scroll-wrapper" },
-                    React__default.createElement("div", { ref: scrollRef, className: "tds-data-table-scroll" },
-                        React__default.createElement(Table, { ...restProps, ...selectionProps, ...(ariaLabel ? { "aria-label": ariaLabel } : {}), ...(describedBy ? { "aria-describedby": describedBy } : {}), ...{ id: tableId }, className: combinedClassName,
-                            // Pinned rather than exposed as a prop: `disabledKeys` only ever
-                            // turns off selection here, leaving the row clickable and
-                            // focusable. React Aria defaults this to "all", which would also
-                            // 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) => {
-                                onSortChange?.(serializeSort(sort));
-                            } },
-                            React__default.createElement(TableHeader, { className: "tds-data-table-header" },
-                                selectable && (React__default.createElement(Column, { className: "tds-data-table-column tds-data-table-column--selectable" }, headerCheckboxProps ? (React__default.createElement(Checkbox, { ...headerCheckboxProps, "aria-label": "Select all", slot: null, className: "tds-data-table-selectable-checkbox" })) : (React__default.createElement(Checkbox, { slot: "selection", className: "tds-data-table-selectable-checkbox" })))),
-                                visiblePreparedColumns.map(({ align, column }, index) => (React__default.createElement(Column, { key: column.name, id: column.name, isRowHeader: index === 0, className: classNames("tds-data-table-column", {
-                                        [`tds-data-table-column--align-${align}`]: align !== "start",
-                                    }), allowsSorting: column.sortable },
-                                    column.hideLabel ? (React__default.createElement("span", { className: "tds-data-table-column-label--hidden" }, column.headerLabel)) : (column.headerLabel),
-                                    column.sortable && (React__default.createElement(Icon, { className: "tds-data-table-column-icon tds-data-table-column-icon--sort", symbol: "general#up-caret", "aria-hidden": true }))))),
-                                hasRowActions && (React__default.createElement(Column, { className: "tds-data-table-column tds-data-table-column--actions" },
-                                    React__default.createElement("span", { className: "tds-data-table-column-label--hidden" }, "Actions")))),
-                            React__default.createElement(TableBody, { className: "tds-data-table-body", renderEmptyState: renderEmptyState }, data.map((row, rowIndex) => {
-                                const rowKey = getRowKey(row, rowIndex, getRowId);
-                                return (React__default.createElement(Row, { key: rowKey, id: rowKey, href: getRowLink?.(row), onAction: onRowClick ? () => onRowClick(row) : undefined, className: classNames("tds-data-table-row", {
-                                        "tds-data-table-row--interactive": rowsAreInteractive,
-                                        "tds-data-table-row--press-selects": rowPressSelects,
-                                    }) },
-                                    selectable && (React__default.createElement(Cell, { className: "tds-data-table-cell tds-data-table-cell--selectable" },
-                                        React__default.createElement(Checkbox, { slot: "selection", className: "tds-data-table-selectable-checkbox" }))),
-                                    visiblePreparedColumns.map((prepared) => (React__default.createElement(Cell, { key: prepared.column.name, ...cellBoundaryProps, "data-pii": prepared.column.pii || undefined, className: classNames("tds-data-table-cell", {
-                                            [`tds-data-table-cell--align-${prepared.align}`]: prepared.align !== "start",
-                                            "tds-data-table-cell--numeric": prepared.isNumeric,
-                                        }) }, prepared.renderCell(row)))),
-                                    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 })))));
-                            }))))),
-                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 }))))))));
+    return (React__default.createElement("div", { className: classNames("tds-data-table", {
+            "tds-data-table--sticky-header": hasScrollContainer,
+        }) },
+        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" },
+                    React__default.createElement(ResultsCount, { id: resultsCountId, resultNoun: resultNoun, selectable: selectable, selectedCount: selectedCount, totalCount: totalCount }),
+                    hasActions && (React__default.createElement(TableActions, { actions: tableActions, resultNoun: resultNoun })),
+                    hasFilters && (React__default.createElement(FilterControls, { activeFilters: activeFilters, filters: filters, isShelfExpanded: isShelfExpanded, onToggleShelf: toggleShelf })),
+                    hasViewSettingsToggle && (React__default.createElement(ViewSettingsToggle, { columns: hideableColumns, onColumnVisibilityChange: onColumnVisibilityChange, visibleColumnNames: visibleHideableColumns })))),
+                React__default.createElement(SelectAllBanner, { resultNoun: resultNoun })),
+            (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: activeFilters, hasFilters: hasFilters, onActiveFiltersChange: onActiveFiltersChange }))))),
+            React__default.createElement("div", { ref: wrapperRef, className: "tds-data-table-scroll-wrapper" },
+                React__default.createElement("div", { ref: scrollRef, className: "tds-data-table-scroll" },
+                    React__default.createElement(Table, { ...restProps, ...selectionProps, ...(ariaLabel ? { "aria-label": ariaLabel } : {}), ...(describedBy ? { "aria-describedby": describedBy } : {}), ...{ id: tableId }, className: combinedClassName,
+                        // Pinned rather than exposed as a prop: `disabledKeys` only ever
+                        // turns off selection here, leaving the row clickable and
+                        // focusable. React Aria defaults this to "all", which would also
+                        // 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) => {
+                            onSortChange?.(serializeSort(sort));
+                        } },
+                        React__default.createElement(TableHeader, { className: "tds-data-table-header" },
+                            selectable && (React__default.createElement(Column, { className: "tds-data-table-column tds-data-table-column--selectable" }, headerCheckboxProps ? (React__default.createElement(Checkbox, { ...headerCheckboxProps, "aria-label": "Select all", slot: null, className: "tds-data-table-selectable-checkbox" })) : (React__default.createElement(Checkbox, { slot: "selection", className: "tds-data-table-selectable-checkbox" })))),
+                            visiblePreparedColumns.map(({ align, column }, index) => (React__default.createElement(Column, { key: column.name, id: column.name, isRowHeader: index === 0, className: classNames("tds-data-table-column", {
+                                    [`tds-data-table-column--align-${align}`]: align !== "start",
+                                }), allowsSorting: column.sortable },
+                                column.hideLabel ? (React__default.createElement("span", { className: "tds-data-table-column-label--hidden" }, column.headerLabel)) : (column.headerLabel),
+                                column.sortable && (React__default.createElement(Icon, { className: "tds-data-table-column-icon tds-data-table-column-icon--sort", symbol: "general#up-caret", "aria-hidden": true }))))),
+                            hasRowActions && (React__default.createElement(Column, { className: "tds-data-table-column tds-data-table-column--actions" },
+                                React__default.createElement("span", { className: "tds-data-table-column-label--hidden" }, "Actions")))),
+                        React__default.createElement(TableBody, { className: "tds-data-table-body", renderEmptyState: renderEmptyState }, data.map((row, rowIndex) => {
+                            const rowKey = getRowKey(row, rowIndex, getRowId);
+                            return (React__default.createElement(Row, { key: rowKey, id: rowKey, href: getRowLink?.(row), onAction: onRowClick ? () => onRowClick(row) : undefined, className: classNames("tds-data-table-row", {
+                                    "tds-data-table-row--interactive": rowsAreInteractive,
+                                    "tds-data-table-row--press-selects": rowPressSelects,
+                                }) },
+                                selectable && (React__default.createElement(Cell, { className: "tds-data-table-cell tds-data-table-cell--selectable" },
+                                    React__default.createElement(Checkbox, { slot: "selection", className: "tds-data-table-selectable-checkbox" }))),
+                                visiblePreparedColumns.map((prepared) => (React__default.createElement(Cell, { key: prepared.column.name, ...cellBoundaryProps, "data-pii": prepared.column.pii || undefined, className: classNames("tds-data-table-cell", {
+                                        [`tds-data-table-cell--align-${prepared.align}`]: prepared.align !== "start",
+                                        "tds-data-table-cell--numeric": prepared.isNumeric,
+                                    }) }, prepared.renderCell(row)))),
+                                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 })))));
+                        }))))),
+            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";
 /**