npm - @planningcenter/tapestry - Versions diffs - 4.9.1-qa-1346.0 → 4.9.1-rc.0 - Mend

@planningcenter/tapestry 4.9.1-qa-1346.0 → 4.9.1-rc.0

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 (226) hide show

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

@@ -1,10 +1,12 @@
 import React from "react";
 import type { ActiveFilter, FilterChange } from "./FilterTypes";
-export declare function ActiveFilters({ activeFilters, hasFilters, onActiveFiltersChange, }: {
+export declare function ActiveFilters({ activeFilters, hasFilters, onActiveFiltersChange, onClear, }: {
     activeFilters: ActiveFilter[];
     /** Whether the filter schema has loaded. */
     hasFilters: boolean;
     onActiveFiltersChange: (activeFilters: ActiveFilter[]) => void;
+    /** Called by the Clear button. Defaults to `onActiveFiltersChange([])`. */
+    onClear?: () => void;
 }): React.JSX.Element;
 declare function ActiveFilter({ activeFilter, onChange, removeActiveFilter, pending, }: {
     activeFilter: ActiveFilter;

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":"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"}
1	+ {"version":3,"file":"ActiveFilters.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/ActiveFilters.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAqD,MAAM,OAAO,CAAA;AAQzE,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAO/D,wBAAgB,aAAa,CAAC,EAC5B,aAAa,EACb,UAAU,EACV,qBAAqB,EACrB,OAAyC,GAC1C,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;IAC9D,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,qBAkJA;AAsBD,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

@@ -6,43 +6,134 @@ 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 React__default, { useState, useMemo, useLayoutEffect, useRef } from 'react';
 import { FilterChip, FilterChipSegments } from './FilterChip.js';
 import { useRestoreFilterFocus, useRelatedFilterOperator } from './FilterContext.js';
+import { getFilterKey, keepFilterKey, getFilterSequence } from './filterKeys.js';
 import { OperatorSelect } from './OperatorSelect.js';
 import { usePendingFilters } from './PendingFilterContext.js';
-function ActiveFilters({ activeFilters, hasFilters, onActiveFiltersChange, }) {
+function ActiveFilters({ activeFilters, hasFilters, onActiveFiltersChange, onClear = () => onActiveFiltersChange([]), }) {
     const { pendingFilters, removePendingFilter, updatePendingFilter } = usePendingFilters();
     const restoreFilterFocus = useRestoreFilterFocus();
+    const [promotions, setPromotions] = useState([]);
+    // Keep each pending chip, and its open popover, mounted until the host
+    // applies its promotion.
+    const confirmed = useMemo(() => promotions.flatMap((promotion) => {
+        const promotedFilter = activeFilters[promotion.index];
+        const pendingCopy = promotedFilter &&
+            pendingFilters.find((filter) => getFilterKey(filter) === promotion.key);
+        if (!pendingCopy)
+            return [];
+        keepFilterKey(pendingCopy, promotedFilter);
+        return [{ pendingCopy, promotion }];
+    }), [activeFilters, pendingFilters, promotions]);
+    const pendingCopies = confirmed.map(({ pendingCopy }) => pendingCopy);
+    useLayoutEffect(() => {
+        if (confirmed.length === 0)
+            return;
+        confirmed.forEach(({ pendingCopy }) => removePendingFilter(pendingCopy));
+        const done = confirmed.map(({ promotion }) => promotion);
+        setPromotions((prev) => prev.filter((p) => !done.includes(p)));
+    }, [confirmed, removePendingFilter]);
+    // Hosts apply updates in order, so build each one on top of promotions they
+    // haven't applied yet. A list without an entry supersedes one that had it.
+    const inFlight = promotions.filter((p) => p.index >= activeFilters.length);
+    const optimisticFilters = [...activeFilters, ...inFlight.map((p) => p.filter)];
+    function sendWithout(index) {
+        setPromotions((prev) => prev
+            .filter((p) => p.index !== index)
+            .map((p) => (p.index > index ? { ...p, index: p.index - 1 } : p)));
+        onActiveFiltersChange(optimisticFilters.filter((_, i) => i !== index));
+    }
+    function retractPromotion(filter) {
+        const promotion = inFlight.find((p) => p.key === getFilterKey(filter));
+        if (promotion)
+            sendWithout(promotion.index);
+    }
+    function promote(filter, promoted) {
+        const key = getFilterKey(filter);
+        const existing = inFlight.find((p) => p.key === key);
+        const index = existing?.index ?? optimisticFilters.length;
+        const next = [...optimisticFilters];
+        next[index] = promoted;
+        setPromotions((prev) => existing
+            ? prev.map((p) => (p.key === key ? { ...p, filter: promoted } : p))
+            : [...prev, { filter: promoted, index, key }]);
+        onActiveFiltersChange(next);
+    }
+    // Hosts may return rebuilt, keyless filters (e.g. a JSON round trip). An
+    // unchanged length means an edit, so carry keys over by position.
+    const previousActiveFilters = useRef(activeFilters);
+    if (activeFilters.length === previousActiveFilters.current.length) {
+        activeFilters.forEach((filter, index) => {
+            if (!getFilterKey(filter)) {
+                keepFilterKey(previousActiveFilters.current[index], filter);
+            }
+        });
+    }
+    useLayoutEffect(() => {
+        previousActiveFilters.current = activeFilters;
+    });
+    // One list: React matches keys only within a list, so separate lists would
+    // remount a promoted chip despite its stable key.
+    const entries = inCreationOrder([
+        ...activeFilters.map((filter, index) => ({
+            filter,
+            index,
+            pending: false,
+        })),
+        ...pendingFilters
+            .filter((filter) => !pendingCopies.includes(filter))
+            .map((filter, index) => ({
+            filter,
+            index,
+            pending: true,
+        })),
+    ]);
     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: `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 },
-                    ]);
+        React__default.createElement("div", { className: "tds-data-table-filters-active-list" }, entries.map(({ filter, index, pending }) => (React__default.createElement(ActiveFilter, { key: getFilterKey(filter) ??
+                `${pending ? "pending" : "active"}-${index}`, activeFilter: filter, pending: pending, onChange: (updates, { complete = true } = {}) => {
+                if (pending) {
+                    updatePendingFilter(filter, updates);
+                    if (complete)
+                        promote(filter, { ...filter, ...updates });
+                    else
+                        retractPromotion(filter);
+                    return;
+                }
+                const next = [...optimisticFilters];
+                next[index] = keepFilterKey(filter, { ...filter, ...updates });
+                onActiveFiltersChange(next);
+            }, removeActiveFilter: () => {
+                if (pending) {
                     removePendingFilter(filter);
-                }, removeActiveFilter: () => {
-                    removePendingFilter(filter);
-                }, pending: true })))),
+                    retractPromotion(filter);
+                    return;
+                }
+                sendWithout(index);
+            } })))),
         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([]);
+                    setPromotions([]);
+                    onClear();
                     restoreFilterFocus();
                 } }))));
 }
+// A promoted filter is appended to `activeFilters`, ahead of every pending
+// chip. Sorting keyed chips by creation order keeps it in place, so its open
+// popover stays anchored under it.
+function inCreationOrder(entries) {
+    const keyedSlots = entries.flatMap((entry, slot) => getFilterSequence(entry.filter) === undefined ? [] : [slot]);
+    const keyedEntries = keyedSlots
+        .map((slot) => entries[slot])
+        .sort((a, b) => (getFilterSequence(a.filter) ?? 0) - (getFilterSequence(b.filter) ?? 0));
+    const sorted = [...entries];
+    keyedSlots.forEach((slot, i) => {
+        sorted[slot] = keyedEntries[i];
+    });
+    return sorted;
+}
 function ActiveFilter({ activeFilter, onChange, removeActiveFilter, pending = false, }) {
     const { relatedFilter, operator } = useRelatedFilterOperator(activeFilter);
     if (!relatedFilter || !operator)

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 { 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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"}
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, { useLayoutEffect, useMemo, useRef, useState } from \"react\"\n\nimport { FilterChip, FilterChipSegments } from \"./FilterChip\"\nimport {\n useRelatedFilterOperator,\n useRestoreFilterFocus,\n} from \"./FilterContext\"\nimport { getFilterKey, getFilterSequence, keepFilterKey } from \"./filterKeys\"\nimport type { ActiveFilter, FilterChange } from \"./FilterTypes\"\nimport { OperatorSelect } from \"./OperatorSelect\"\nimport { usePendingFilters } from \"./PendingFilterContext\"\n\n/** A promoted filter the host may not have applied yet. /\ntype Promotion = { filter: ActiveFilter; index: number; key?: string }\n\nexport function ActiveFilters({\n activeFilters,\n hasFilters,\n onActiveFiltersChange,\n onClear = () => onActiveFiltersChange([]),\n}: {\n activeFilters: ActiveFilter[]\n /* Whether the filter schema has loaded. /\n hasFilters: boolean\n onActiveFiltersChange: (activeFilters: ActiveFilter[]) => void\n /* Called by the Clear button. Defaults to `onActiveFiltersChange([])`. /\n onClear?: () => void\n}) {\n const { pendingFilters, removePendingFilter, updatePendingFilter } =\n usePendingFilters()\n const restoreFilterFocus = useRestoreFilterFocus()\n const [promotions, setPromotions] = useState<Promotion[]>([])\n\n // Keep each pending chip, and its open popover, mounted until the host\n // applies its promotion.\n const confirmed = useMemo(\n () =>\n promotions.flatMap((promotion) => {\n const promotedFilter = activeFilters[promotion.index]\n const pendingCopy =\n promotedFilter &&\n pendingFilters.find(\n (filter) => getFilterKey(filter) === promotion.key\n )\n if (!pendingCopy) return []\n keepFilterKey(pendingCopy, promotedFilter)\n return [{ pendingCopy, promotion }]\n }),\n [activeFilters, pendingFilters, promotions]\n )\n const pendingCopies = confirmed.map(({ pendingCopy }) => pendingCopy)\n\n useLayoutEffect(() => {\n if (confirmed.length === 0) return\n confirmed.forEach(({ pendingCopy }) => removePendingFilter(pendingCopy))\n const done = confirmed.map(({ promotion }) => promotion)\n setPromotions((prev) => prev.filter((p) => !done.includes(p)))\n }, [confirmed, removePendingFilter])\n\n // Hosts apply updates in order, so build each one on top of promotions they\n // haven't applied yet. A list without an entry supersedes one that had it.\n const inFlight = promotions.filter((p) => p.index >= activeFilters.length)\n const optimisticFilters = [...activeFilters, ...inFlight.map((p) => p.filter)]\n\n function sendWithout(index: number) {\n setPromotions((prev) =>\n prev\n .filter((p) => p.index !== index)\n .map((p) => (p.index > index ? { ...p, index: p.index - 1 } : p))\n )\n onActiveFiltersChange(optimisticFilters.filter((_, i) => i !== index))\n }\n\n function retractPromotion(filter: ActiveFilter) {\n const promotion = inFlight.find((p) => p.key === getFilterKey(filter))\n if (promotion) sendWithout(promotion.index)\n }\n\n function promote(filter: ActiveFilter, promoted: ActiveFilter) {\n const key = getFilterKey(filter)\n const existing = inFlight.find((p) => p.key === key)\n const index = existing?.index ?? optimisticFilters.length\n const next = [...optimisticFilters]\n next[index] = promoted\n setPromotions((prev) =>\n existing\n ? prev.map((p) => (p.key === key ? { ...p, filter: promoted } : p))\n : [...prev, { filter: promoted, index, key }]\n )\n onActiveFiltersChange(next)\n }\n\n // Hosts may return rebuilt, keyless filters (e.g. a JSON round trip). An\n // unchanged length means an edit, so carry keys over by position.\n const previousActiveFilters = useRef(activeFilters)\n if (activeFilters.length === previousActiveFilters.current.length) {\n activeFilters.forEach((filter, index) => {\n if (!getFilterKey(filter)) {\n keepFilterKey(previousActiveFilters.current[index], filter)\n }\n })\n }\n useLayoutEffect(() => {\n previousActiveFilters.current = activeFilters\n })\n\n // One list: React matches keys only within a list, so separate lists would\n // remount a promoted chip despite its stable key.\n const entries = inCreationOrder([\n ...activeFilters.map((filter, index) => ({\n filter,\n index,\n pending: false as const,\n })),\n ...pendingFilters\n .filter((filter) => !pendingCopies.includes(filter))\n .map((filter, index) => ({\n filter,\n index,\n pending: true as const,\n })),\n ])\n\n return (\n <div className=\"tds-data-table-filters-active\">\n <div className=\"tds-data-table-filters-active-list\">\n {entries.map(({ filter, index, pending }) => (\n <ActiveFilter\n key={\n getFilterKey(filter) ??\n `${pending ? \"pending\" : \"active\"}-${index}`\n }\n activeFilter={filter}\n pending={pending}\n onChange={(updates, { complete = true } = {}) => {\n if (pending) {\n updatePendingFilter(filter, updates)\n if (complete) promote(filter, { ...filter, ...updates })\n else retractPromotion(filter)\n return\n }\n const next = [...optimisticFilters]\n next[index] = keepFilterKey(filter, { ...filter, ...updates })\n onActiveFiltersChange(next)\n }}\n removeActiveFilter={() => {\n if (pending) {\n removePendingFilter(filter)\n retractPromotion(filter)\n return\n }\n sendWithout(index)\n }}\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 setPromotions([])\n onClear()\n restoreFilterFocus()\n }}\n />\n {/ TODO: Save view button goes here */}\n </div>\n </div>\n )\n}\n\n// A promoted filter is appended to `activeFilters`, ahead of every pending\n// chip. Sorting keyed chips by creation order keeps it in place, so its open\n// popover stays anchored under it.\nfunction inCreationOrder<T extends { filter: ActiveFilter }>(entries: T[]) {\n const keyedSlots = entries.flatMap((entry, slot) =>\n getFilterSequence(entry.filter) === undefined ? [] : [slot]\n )\n const keyedEntries = keyedSlots\n .map((slot) => entries[slot])\n .sort(\n (a, b) =>\n (getFilterSequence(a.filter) ?? 0) - (getFilterSequence(b.filter) ?? 0)\n )\n const sorted = [...entries]\n keyedSlots.forEach((slot, i) => {\n sorted[slot] = keyedEntries[i]\n })\n return sorted\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/CollectionEditorsLazy.d.ts CHANGED Viewed

@@ -1,4 +1,6 @@
 import React from "react";
 import type { CollectionFilterEditorProps } from "./CollectionEditorsShared";
-export declare function CollectionFilterEditorLazy({ config, onChange, operator, value, filter, label, }: CollectionFilterEditorProps): React.JSX.Element;
+export declare function CollectionFilterEditorLazy({ config, onChange, operator, value, filter, label, scope, }: CollectionFilterEditorProps): React.JSX.Element;
+export declare function Loading(): React.JSX.Element;
+export declare function LoadError(): React.JSX.Element;
 //# sourceMappingURL=CollectionEditorsLazy.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CollectionEditorsLazy.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/CollectionEditorsLazy.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgD,MAAM,OAAO,CAAA;AAEpE,OAAO,KAAK,EACV,2BAA2B,~~EAE5B~~,MAAM,2BAA2B,CAAA;~~AAqBlC~~,wBAAgB,0BAA0B,CAAC,EACzC,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,MAAM,EACN,KAAK,GACN,EAAE,2BAA2B,~~qBA~~+~~D7B~~"}
1	+ {"version":3,"file":"CollectionEditorsLazy.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/CollectionEditorsLazy.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgD,MAAM,OAAO,CAAA;AAEpE,OAAO,KAAK,EACV,2BAA2B,EAG5B,MAAM,2BAA2B,CAAA;AAsBlC,wBAAgB,0BAA0B,CAAC,EACzC,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,MAAM,EACN,KAAK,EACL,KAAK,GACN,EAAE,2BAA2B,qBA4C7B;AA+FD,wBAAgB,OAAO,sBAEtB;AAED,wBAAgB,SAAS,sBAMxB"}

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

@@ -1,17 +1,19 @@
 import { ComboBoxItem } from '../combo-box/ComboBox.js';
 import { useDebouncedValue } from '../../utilities/useDebouncedValue.js';
-import React__default, { useState, useCallback, useEffect } from 'react';
+import React__default, { useCallback, useState, useEffect } from 'react';
 import { CollectionEditorCombobox } from './CollectionEditorsShared.js';
 import { CollectionEditorCheckboxes, CollectionEditorRadios, CollectionEditorSelect } from './CollectionEditorsStatic.js';
+import { useLazyOptions } from './useLazyOptions.js';
 import { isEmptyValue } from './utils.js';
 const DEBOUNCE_MS = 300;
-function CollectionFilterEditorLazy({ config, onChange, operator, value, filter, label, }) {
+function CollectionFilterEditorLazy({ config, onChange, operator, value, filter, label, scope, }) {
     const { display, multiple } = config;
-    const options = config.options;
+    const loadOptions = config.options;
+    const options = useCallback((query) => loadOptions(query, scope), [loadOptions, scope]);
     const [query, setQuery] = useState();
     const debouncedQuery = useDebouncedValue(query, DEBOUNCE_MS);
-    const [resolvedOptions, setResolvedOptions] = useState([]);
+    const { error, loading, options: resolvedOptions, } = useLazyOptions(options, debouncedQuery);
     const onCommit = useCallback((newValue) => {
         const newLabel = findLabelFromOptions(resolvedOptions, newValue, {
             label,
@@ -19,34 +21,6 @@ function CollectionFilterEditorLazy({ config, onChange, operator, value, filter,
         });
         return onChange({ label: newLabel, value: newValue }, { complete: !isEmptyValue(newValue) });
     }, [resolvedOptions, onChange, value, label]);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState(null);
-    useEffect(() => {
-        let active = true;
-        async function fetchOptions() {
-            try {
-                const resolved = await options(debouncedQuery);
-                if (!active)
-                    return;
-                setResolvedOptions(resolved);
-                setError(null);
-            }
-            catch (e) {
-                if (!active)
-                    return;
-                setResolvedOptions([]);
-                setError(e);
-            }
-            finally {
-                if (active)
-                    setLoading(false);
-            }
-        }
-        fetchOptions();
-        return () => {
-            active = false;
-        };
-    }, [options, debouncedQuery]);
     const Editor = getLazyEditor({ display, multiple });
     return (React__default.createElement(Editor, { error: error, loading: loading, query: query, setQuery: setQuery, value: value, onCommit: onCommit, options: resolvedOptions, multiple: multiple, operator: operator, filterLabel: filter.label, filterName: filter.name }));
 }
@@ -127,5 +101,5 @@ function normalizeValueToArray(value) {
     return Array.isArray(value) ? value : [value];
 }
-export { CollectionFilterEditorLazy };
+export { CollectionFilterEditorLazy, LoadError, Loading };
 //# sourceMappingURL=CollectionEditorsLazy.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CollectionEditorsLazy.js","sources":["../../../src/components/DataTable/CollectionEditorsLazy.tsx"],"sourcesContent":["import { ComboBoxItem } from \"@components/combo-box\"\nimport { useDebouncedValue } from \"@utilities/useDebouncedValue\"\nimport React, { Key, useCallback, useEffect, useState } from \"react\"\n\nimport type {\n CollectionFilterEditorProps,\n CollectionFilterValue,\n} from \"./CollectionEditorsShared\"\nimport { CollectionEditorCombobox } from \"./CollectionEditorsShared\"\nimport {\n CollectionEditorCheckboxes,\n CollectionEditorRadios,\n CollectionEditorSelect,\n CollectionEditorStaticProps,\n} from \"./CollectionEditorsStatic\"\nimport { CollectionOption } from \"./collectionFilter\"\nimport type { ActiveFilterLabel } from \"./FilterTypes\"\nimport { isEmptyValue } from \"./utils\"\n\ntype CollectionEditorLazyProps = CollectionEditorStaticProps & {\n error: unknown\n loading: boolean\n query: string \| undefined\n setQuery: (query: string \| undefined) => void\n}\n\nconst DEBOUNCE_MS = 300\n\nexport function CollectionFilterEditorLazy({\n config,\n onChange,\n operator,\n value,\n filter,\n label,\n}: CollectionFilterEditorProps) {\n const { display, multiple } = config\n const options = config.options as\n \| ((query?: string) => Promise<CollectionOption[]>)\n \| ((query?: string) => CollectionOption[])\n const [query, setQuery] = useState<string \| undefined>()\n const debouncedQuery = useDebouncedValue(query, DEBOUNCE_MS)\n const [resolvedOptions, setResolvedOptions] = useState<CollectionOption[]>([])\n const onCommit = useCallback(\n (newValue: CollectionFilterValue) => {\n const newLabel = findLabelFromOptions(resolvedOptions, newValue, {\n label,\n value,\n })\n return onChange(\n { label: newLabel, value: newValue },\n { complete: !isEmptyValue(newValue) }\n )\n },\n [resolvedOptions, onChange, value, label]\n )\n const [loading, setLoading] = useState<boolean>(true)\n const [error, setError] = useState<unknown>(null)\n\n useEffect(() => {\n let active = true\n async function fetchOptions() {\n try {\n const resolved = await options(debouncedQuery)\n if (!active) return\n setResolvedOptions(resolved)\n setError(null)\n } catch (e) {\n if (!active) return\n setResolvedOptions([])\n setError(e)\n } finally {\n if (active) setLoading(false)\n }\n }\n fetchOptions()\n return () => {\n active = false\n }\n }, [options, debouncedQuery])\n\n const Editor = getLazyEditor({ display, multiple })\n\n return (\n <Editor\n error={error}\n loading={loading}\n query={query}\n setQuery={setQuery}\n value={value}\n onCommit={onCommit}\n options={resolvedOptions}\n multiple={multiple}\n operator={operator}\n filterLabel={filter.label}\n filterName={filter.name}\n />\n )\n}\n\nfunction getLazyEditor({\n display,\n multiple,\n}: {\n display: string\n multiple: boolean\n}) {\n if (display === \"combobox\") return CollectionEditorComboboxLazy\n if (multiple) return CollectionEditorCheckboxesLazy\n if (display === \"checkboxes\") return CollectionEditorRadiosLazy // TODO: This looks like it might be a mistake, should it be CollectionEditorCheckboxes? or at least allow for `radios` as an option?\n return CollectionEditorSelectLazy\n}\n\nfunction CollectionEditorCheckboxesLazy({\n error,\n loading,\n ...props\n}: CollectionEditorLazyProps) {\n if (loading) return <Loading />\n if (error) return <LoadError />\n return <CollectionEditorCheckboxes {...props} />\n}\n\nfunction CollectionEditorRadiosLazy({\n error,\n loading,\n ...props\n}: CollectionEditorLazyProps) {\n if (loading) return <Loading />\n if (error) return <LoadError />\n return <CollectionEditorRadios {...props} />\n}\n\nfunction CollectionEditorSelectLazy({\n error,\n loading,\n ...props\n}: CollectionEditorLazyProps) {\n if (loading) return <Loading />\n if (error) return <LoadError />\n return <CollectionEditorSelect {...props} />\n}\n\nfunction CollectionEditorComboboxLazy({\n error,\n onCommit,\n options,\n query,\n loading,\n setQuery,\n ...props\n}: CollectionEditorLazyProps) {\n const [loadingState, setLoadingState] = useState<\n \"loading\" \| \"filtering\" \| \"idle\"\n >(loading ? \"loading\" : \"idle\")\n useEffect(() => {\n if (!loading) {\n setLoadingState(\"idle\")\n }\n }, [loading])\n\n return (\n <CollectionEditorCombobox\n {...props}\n loadingState={error ? \"error\" : loadingState}\n inputValue={query}\n onInputChange={(q: string) => {\n setLoadingState(\"filtering\")\n setQuery(q)\n }}\n onChange={(value: Key \| Key[] \| null) => {\n if (value === null) return\n\n const resolvedValue = Array.isArray(value)\n ? value.map(String)\n : String(value)\n onCommit(resolvedValue)\n }}\n items={options}\n renderEmptyState={error ? <LoadError /> : \"No results\"}\n >\n {(o) => {\n const option = o as CollectionOption\n return (\n <ComboBoxItem key={option.value} id={option.value}>\n {option.label}\n </ComboBoxItem>\n )\n }}\n </CollectionEditorCombobox>\n )\n}\n\nfunction Loading() {\n return <div style={{ color: \"hotpink\", fontWeight: \"bold\" }}>Loading...</div>\n}\n\nfunction LoadError() {\n return (\n <div style={{ color: \"hotpink\", fontWeight: \"bold\" }}>\n Failed to load options\n </div>\n )\n}\n\nfunction findLabelFromOptions(\n options: CollectionOption[],\n value: CollectionFilterValue,\n previous: { label?: ActiveFilterLabel; value: CollectionFilterValue }\n) {\n const previousLabelByValue = buildPreviousLabelByValue(previous)\n const labelFor = (v: string) =>\n options.find((option) => option.value === v)?.label ??\n previousLabelByValue.get(v)\n\n return Array.isArray(value)\n ? value.map(labelFor).filter((label) => label !== undefined)\n : labelFor(value)\n}\n\nfunction buildPreviousLabelByValue(previous: {\n label?: ActiveFilterLabel\n value: CollectionFilterValue\n}): Map<string, string \| undefined> {\n const previousValues = normalizeValueToArray(previous.value)\n const previousLabels = normalizeValueToArray(previous.label)\n return new Map(previousValues.map((v, index) => [v, previousLabels[index]]))\n}\n\nfunction normalizeValueToArray(value: string \| string[] \| undefined): string[] {\n if (value === undefined) return []\n return Array.isArray(value) ? value : [value]\n}\n"],"names":["React"],"mappings":"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"}
1	+ {"version":3,"file":"CollectionEditorsLazy.js","sources":["../../../src/components/DataTable/CollectionEditorsLazy.tsx"],"sourcesContent":["import { ComboBoxItem } from \"@components/combo-box\"\nimport { useDebouncedValue } from \"@utilities/useDebouncedValue\"\nimport React, { Key, useCallback, useEffect, useState } from \"react\"\n\nimport type {\n CollectionFilterEditorProps,\n CollectionFilterValue,\n CollectionOptionsLazy,\n} from \"./CollectionEditorsShared\"\nimport { CollectionEditorCombobox } from \"./CollectionEditorsShared\"\nimport {\n CollectionEditorCheckboxes,\n CollectionEditorRadios,\n CollectionEditorSelect,\n CollectionEditorStaticProps,\n} from \"./CollectionEditorsStatic\"\nimport { CollectionOption } from \"./collectionFilter\"\nimport type { ActiveFilterLabel } from \"./FilterTypes\"\nimport { useLazyOptions } from \"./useLazyOptions\"\nimport { isEmptyValue } from \"./utils\"\n\ntype CollectionEditorLazyProps = CollectionEditorStaticProps & {\n error: unknown\n loading: boolean\n query: string \| undefined\n setQuery: (query: string \| undefined) => void\n}\n\nconst DEBOUNCE_MS = 300\n\nexport function CollectionFilterEditorLazy({\n config,\n onChange,\n operator,\n value,\n filter,\n label,\n scope,\n}: CollectionFilterEditorProps) {\n const { display, multiple } = config\n const loadOptions = config.options as CollectionOptionsLazy\n const options = useCallback(\n (query?: string) => loadOptions(query, scope),\n [loadOptions, scope]\n )\n const [query, setQuery] = useState<string \| undefined>()\n const debouncedQuery = useDebouncedValue(query, DEBOUNCE_MS)\n const {\n error,\n loading,\n options: resolvedOptions,\n } = useLazyOptions(options, debouncedQuery)\n const onCommit = useCallback(\n (newValue: CollectionFilterValue) => {\n const newLabel = findLabelFromOptions(resolvedOptions, newValue, {\n label,\n value,\n })\n return onChange(\n { label: newLabel, value: newValue },\n { complete: !isEmptyValue(newValue) }\n )\n },\n [resolvedOptions, onChange, value, label]\n )\n const Editor = getLazyEditor({ display, multiple })\n\n return (\n <Editor\n error={error}\n loading={loading}\n query={query}\n setQuery={setQuery}\n value={value}\n onCommit={onCommit}\n options={resolvedOptions}\n multiple={multiple}\n operator={operator}\n filterLabel={filter.label}\n filterName={filter.name}\n />\n )\n}\n\nfunction getLazyEditor({\n display,\n multiple,\n}: {\n display: string\n multiple: boolean\n}) {\n if (display === \"combobox\") return CollectionEditorComboboxLazy\n if (multiple) return CollectionEditorCheckboxesLazy\n if (display === \"checkboxes\") return CollectionEditorRadiosLazy // TODO: This looks like it might be a mistake, should it be CollectionEditorCheckboxes? or at least allow for `radios` as an option?\n return CollectionEditorSelectLazy\n}\n\nfunction CollectionEditorCheckboxesLazy({\n error,\n loading,\n ...props\n}: CollectionEditorLazyProps) {\n if (loading) return <Loading />\n if (error) return <LoadError />\n return <CollectionEditorCheckboxes {...props} />\n}\n\nfunction CollectionEditorRadiosLazy({\n error,\n loading,\n ...props\n}: CollectionEditorLazyProps) {\n if (loading) return <Loading />\n if (error) return <LoadError />\n return <CollectionEditorRadios {...props} />\n}\n\nfunction CollectionEditorSelectLazy({\n error,\n loading,\n ...props\n}: CollectionEditorLazyProps) {\n if (loading) return <Loading />\n if (error) return <LoadError />\n return <CollectionEditorSelect {...props} />\n}\n\nfunction CollectionEditorComboboxLazy({\n error,\n onCommit,\n options,\n query,\n loading,\n setQuery,\n ...props\n}: CollectionEditorLazyProps) {\n const [loadingState, setLoadingState] = useState<\n \"loading\" \| \"filtering\" \| \"idle\"\n >(loading ? \"loading\" : \"idle\")\n useEffect(() => {\n if (!loading) {\n setLoadingState(\"idle\")\n }\n }, [loading])\n\n return (\n <CollectionEditorCombobox\n {...props}\n loadingState={error ? \"error\" : loadingState}\n inputValue={query}\n onInputChange={(q: string) => {\n setLoadingState(\"filtering\")\n setQuery(q)\n }}\n onChange={(value: Key \| Key[] \| null) => {\n if (value === null) return\n\n const resolvedValue = Array.isArray(value)\n ? value.map(String)\n : String(value)\n onCommit(resolvedValue)\n }}\n items={options}\n renderEmptyState={error ? <LoadError /> : \"No results\"}\n >\n {(o) => {\n const option = o as CollectionOption\n return (\n <ComboBoxItem key={option.value} id={option.value}>\n {option.label}\n </ComboBoxItem>\n )\n }}\n </CollectionEditorCombobox>\n )\n}\n\nexport function Loading() {\n return <div style={{ color: \"hotpink\", fontWeight: \"bold\" }}>Loading...</div>\n}\n\nexport function LoadError() {\n return (\n <div style={{ color: \"hotpink\", fontWeight: \"bold\" }}>\n Failed to load options\n </div>\n )\n}\n\nfunction findLabelFromOptions(\n options: CollectionOption[],\n value: CollectionFilterValue,\n previous: { label?: ActiveFilterLabel; value: CollectionFilterValue }\n) {\n const previousLabelByValue = buildPreviousLabelByValue(previous)\n const labelFor = (v: string) =>\n options.find((option) => option.value === v)?.label ??\n previousLabelByValue.get(v)\n\n return Array.isArray(value)\n ? value.map(labelFor).filter((label) => label !== undefined)\n : labelFor(value)\n}\n\nfunction buildPreviousLabelByValue(previous: {\n label?: ActiveFilterLabel\n value: CollectionFilterValue\n}): Map<string, string \| undefined> {\n const previousValues = normalizeValueToArray(previous.value)\n const previousLabels = normalizeValueToArray(previous.label)\n return new Map(previousValues.map((v, index) => [v, previousLabels[index]]))\n}\n\nfunction normalizeValueToArray(value: string \| string[] \| undefined): string[] {\n if (value === undefined) return []\n return Array.isArray(value) ? value : [value]\n}\n"],"names":["React"],"mappings":"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"}

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

@@ -5,7 +5,7 @@ import { CollectionOption } from "./collectionFilter";
 import type { ActiveFilterLabel, FilterChange } from "./FilterTypes";
 /** A single option's `value`, or the selected `value`s when `multiple`. */
 export type CollectionFilterValue = string | string[];
-type CollectionOptionsLazy = (q: string | undefined) => Promise<CollectionOption[]> | CollectionOption[];
+export type CollectionOptionsLazy = (q: string | undefined, scope?: string) => Promise<CollectionOption[]> | CollectionOption[];
 export type CollectionOptions = CollectionOption[] | CollectionOptionsLazy;
 export type CollectionEditorProps = {
     multiple: boolean;
@@ -29,9 +29,9 @@ export type CollectionFilterEditorProps = {
     operator: {
         label: string;
     };
+    scope?: string;
     value: CollectionFilterValue;
 };
 export declare function orderByOptions(options: CollectionOption[], selected: Set<string>): string[];
 export declare function CollectionEditorCombobox({ value, multiple, operator, ...props }: CollectionEditorProps & Partial<ComboBoxElementProps> & Pick<ComboBoxElementProps, "children">): React.JSX.Element;
-export {};
 //# sourceMappingURL=CollectionEditorsShared.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CollectionEditorsShared.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/CollectionEditorsShared.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,uBAAuB,CAAA;AAC3E,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAEpE,2EAA2E;AAC3E,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,MAAM,EAAE,CAAA;AAErD,~~KAAK~~,qBAAqB,GAAG,~~CAC3B~~,CAAC,EAAE,MAAM,GAAG,SAAS,~~KAClB~~,OAAO,CAAC,gBAAgB,EAAE,CAAC,GAAG,gBAAgB,EAAE,CAAA;AACrD,MAAM,MAAM,iBAAiB,GAAG,gBAAgB,EAAE,GAAG,qBAAqB,CAAA;AAE1E,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAA;IAC3B,KAAK,EAAE,qBAAqB,CAAA;CAC7B,CAAA;AAED,MAAM,MAAM,2BAA2B,GAAG;IACxC,MAAM,EAAE;QACN,OAAO,EAAE,iBAAiB,CAAA;QAC1B,QAAQ,EAAE,OAAO,CAAA;QACjB,OAAO,EAAE,iBAAiB,CAAA;KAC3B,CAAA;IACD,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAA;QACb,IAAI,EAAE,MAAM,CAAA;KACb,CAAA;IACD,KAAK,EAAE,iBAAiB,CAAA;IACxB,QAAQ,EAAE,YAAY,CAAA;IACtB,QAAQ,EAAE;QACR,KAAK,EAAE,MAAM,CAAA;KACd,CAAA;IACD,KAAK,EAAE,qBAAqB,CAAA;CAC7B,CAAA;AAED,wBAAgB,cAAc,CAC5B,OAAO,EAAE,gBAAgB,EAAE,EAC3B,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,YAGtB;AAED,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,qBAAqB,GACtB,OAAO,CAAC,oBAAoB,CAAC,GAC7B,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,qBAYvC"}
1	+ {"version":3,"file":"CollectionEditorsShared.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/CollectionEditorsShared.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,uBAAuB,CAAA;AAC3E,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAEpE,2EAA2E;AAC3E,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,MAAM,EAAE,CAAA;AAErD,MAAM,MAAM,qBAAqB,GAAG,CAClC,CAAC,EAAE,MAAM,GAAG,SAAS,EACrB,KAAK,CAAC,EAAE,MAAM,KACX,OAAO,CAAC,gBAAgB,EAAE,CAAC,GAAG,gBAAgB,EAAE,CAAA;AACrD,MAAM,MAAM,iBAAiB,GAAG,gBAAgB,EAAE,GAAG,qBAAqB,CAAA;AAE1E,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAA;IAC3B,KAAK,EAAE,qBAAqB,CAAA;CAC7B,CAAA;AAED,MAAM,MAAM,2BAA2B,GAAG;IACxC,MAAM,EAAE;QACN,OAAO,EAAE,iBAAiB,CAAA;QAC1B,QAAQ,EAAE,OAAO,CAAA;QACjB,OAAO,EAAE,iBAAiB,CAAA;KAC3B,CAAA;IACD,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAA;QACb,IAAI,EAAE,MAAM,CAAA;KACb,CAAA;IACD,KAAK,EAAE,iBAAiB,CAAA;IACxB,QAAQ,EAAE,YAAY,CAAA;IACtB,QAAQ,EAAE;QACR,KAAK,EAAE,MAAM,CAAA;KACd,CAAA;IACD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,qBAAqB,CAAA;CAC7B,CAAA;AAED,wBAAgB,cAAc,CAC5B,OAAO,EAAE,gBAAgB,EAAE,EAC3B,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,YAGtB;AAED,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,qBAAqB,GACtB,OAAO,CAAC,oBAAoB,CAAC,GAC7B,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,qBAYvC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CollectionEditorsShared.js","sources":["../../../src/components/DataTable/CollectionEditorsShared.tsx"],"sourcesContent":["import { ComboBox, type ComboBoxElementProps } from \"@components/combo-box\"\nimport React from \"react\"\n\nimport type { CollectionDisplay } from \"./collectionFilter\"\nimport { CollectionOption } from \"./collectionFilter\"\nimport type { ActiveFilterLabel, FilterChange } from \"./FilterTypes\"\n\n/** A single option's `value`, or the selected `value`s when `multiple`. */\nexport type CollectionFilterValue = string \| string[]\n\~~ntype~~ CollectionOptionsLazy = (\n q: string \| undefined\n) => Promise<CollectionOption[]> \| CollectionOption[]\nexport type CollectionOptions = CollectionOption[] \| CollectionOptionsLazy\n\nexport type CollectionEditorProps = {\n multiple: boolean\n operator: { label: string }\n value: CollectionFilterValue\n}\n\nexport type CollectionFilterEditorProps = {\n config: {\n display: CollectionDisplay\n multiple: boolean\n options: CollectionOptions\n }\n filter: {\n label: string\n name: string\n }\n label: ActiveFilterLabel\n onChange: FilterChange\n operator: {\n label: string\n }\n value: CollectionFilterValue\n}\n\nexport function orderByOptions(\n options: CollectionOption[],\n selected: Set<string>\n) {\n return options.filter((o) => selected.has(o.value)).map((o) => o.value)\n}\n\nexport function CollectionEditorCombobox({\n value,\n multiple,\n operator,\n ...props\n}: CollectionEditorProps &\n Partial<ComboBoxElementProps> &\n Pick<ComboBoxElementProps, \"children\">) {\n return (\n <ComboBox\n // eslint-disable-next-line jsx-a11y/no-autofocus -- the editor only ever renders inside a chip popover that just opened, per ARIA dialog practices\n autoFocus\n hideLabel\n label={operator.label}\n selectionMode={multiple ? \"multiple\" : \"single\"}\n value={value}\n {...props}\n />\n )\n}\n"],"names":["React"],"mappings":";;;~~AAuCM~~,SAAU,cAAc,CAC5B,OAA2B,EAC3B,QAAqB,EAAA;AAErB,IAAA,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;AACzE;AAEM,SAAU,wBAAwB,CAAC,EACvC,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EAG8B,EAAA;IACtC,QACEA,6BAAC;;;;AAEC,QAAA,SAAS,EAAA,IAAA,EACT,SAAS,EAAA,IAAA,EACT,KAAK,EAAE,QAAQ,CAAC,KAAK,EACrB,aAAa,EAAE,QAAQ,GAAG,UAAU,GAAG,QAAQ,EAC/C,KAAK,EAAE,KAAK,EAAA,GACR,KAAK,EAAA,CACT;AAEN;;;;"}
1	+ {"version":3,"file":"CollectionEditorsShared.js","sources":["../../../src/components/DataTable/CollectionEditorsShared.tsx"],"sourcesContent":["import { ComboBox, type ComboBoxElementProps } from \"@components/combo-box\"\nimport React from \"react\"\n\nimport type { CollectionDisplay } from \"./collectionFilter\"\nimport { CollectionOption } from \"./collectionFilter\"\nimport type { ActiveFilterLabel, FilterChange } from \"./FilterTypes\"\n\n/** A single option's `value`, or the selected `value`s when `multiple`. */\nexport type CollectionFilterValue = string \| string[]\n\nexport type CollectionOptionsLazy = (\n q: string \| undefined,\n scope?: string\n) => Promise<CollectionOption[]> \| CollectionOption[]\nexport type CollectionOptions = CollectionOption[] \| CollectionOptionsLazy\n\nexport type CollectionEditorProps = {\n multiple: boolean\n operator: { label: string }\n value: CollectionFilterValue\n}\n\nexport type CollectionFilterEditorProps = {\n config: {\n display: CollectionDisplay\n multiple: boolean\n options: CollectionOptions\n }\n filter: {\n label: string\n name: string\n }\n label: ActiveFilterLabel\n onChange: FilterChange\n operator: {\n label: string\n }\n scope?: string\n value: CollectionFilterValue\n}\n\nexport function orderByOptions(\n options: CollectionOption[],\n selected: Set<string>\n) {\n return options.filter((o) => selected.has(o.value)).map((o) => o.value)\n}\n\nexport function CollectionEditorCombobox({\n value,\n multiple,\n operator,\n ...props\n}: CollectionEditorProps &\n Partial<ComboBoxElementProps> &\n Pick<ComboBoxElementProps, \"children\">) {\n return (\n <ComboBox\n // eslint-disable-next-line jsx-a11y/no-autofocus -- the editor only ever renders inside a chip popover that just opened, per ARIA dialog practices\n autoFocus\n hideLabel\n label={operator.label}\n selectionMode={multiple ? \"multiple\" : \"single\"}\n value={value}\n {...props}\n />\n )\n}\n"],"names":["React"],"mappings":";;;AAyCM,SAAU,cAAc,CAC5B,OAA2B,EAC3B,QAAqB,EAAA;AAErB,IAAA,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;AACzE;AAEM,SAAU,wBAAwB,CAAC,EACvC,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EAG8B,EAAA;IACtC,QACEA,6BAAC;;;;AAEC,QAAA,SAAS,EAAA,IAAA,EACT,SAAS,EAAA,IAAA,EACT,KAAK,EAAE,QAAQ,CAAC,KAAK,EACrB,aAAa,EAAE,QAAQ,GAAG,UAAU,GAAG,QAAQ,EAC/C,KAAK,EAAE,KAAK,EAAA,GACR,KAAK,EAAA,CACT;AAEN;;;;"}

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

@@ -180,6 +180,12 @@ interface DataTableBaseProps {
     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" */
     scrollContainerSelector?: string;
+    /**
+     * Displays a search input above the table. The query is kept in
+     * `activeFilters` as a `q` filter and reported through
+     * `onActiveFiltersChange` once typing pauses.
+     */
+    searchable?: boolean;
     /**
      * Enables row selection via checkboxes, including a "select all" checkbox in
      * the header for the loaded page. Without a row action (`onRowClick` or

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;AAE7D,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~~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"}
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

@@ -16,9 +16,11 @@ import { hasResultsCount, resolveResultNounLabel, ResultsCount } from './Results
 import { RowActions } from './RowActions.js';
 import { SelectAllBanner } from './SelectAllBanner.js';
 import { TableActions } from './TableActions.js';
+import { TableSearch } from './TableSearch.js';
 import { useColumnVisibility } from './useColumnVisibility.js';
 import { useDataTableSelection, DataTableSelectionContext } from './useDataTableSelection.js';
 import { useRowPressBoundary } from './useRowPressBoundary.js';
+import { useSearchFilter } from './useSearchFilter.js';
 import { useShelfExpanded } from './useShelfExpanded.js';
 import { ViewSettingsToggle } from './ViewSettingsToggle.js';
@@ -42,7 +44,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, 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 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, searchable, 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);
@@ -107,14 +109,17 @@ const DataTableInner = ({ activeFilters = [], className, canSelectAllPages, colu
     const paginationLabel = resultNounLabel
         ? `${resultNounLabel} table pagination`
         : undefined;
+    const searchLabel = ariaLabel ? `Search ${ariaLabel}` : "Search table";
     const hasActions = (tableActions?.length ?? 0) > 0;
     const hasFilters = (filters.length ?? 0) > 0;
     const hasViewSettingsToggle = hideableColumns.length > 0;
-    const showHeader = Boolean(resultNoun || hasActions || hasFilters || hasViewSettingsToggle);
+    const hasTrailingControls = searchable || hasFilters || hasViewSettingsToggle;
+    const showHeader = Boolean(resultNoun || hasActions || hasTrailingControls);
     const hasRowActions = (rowActions?.length ?? 0) > 0;
     const { pendingFilters } = usePendingFilters();
-    const hasEditableFilters = activeFilters.length + pendingFilters.length > 0;
-    const [isShelfExpanded, toggleShelf] = useShelfExpanded(activeFilters.length + pendingFilters.length, pendingFilters.length);
+    const { chipFilters, clearFilters, onChipFiltersChange, onSearchChange, searchQuery, } = useSearchFilter(activeFilters, onActiveFiltersChange);
+    const hasEditableFilters = chipFilters.length + pendingFilters.length > 0;
+    const [isShelfExpanded, toggleShelf] = useShelfExpanded(chipFilters.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.
@@ -134,13 +139,15 @@ const DataTableInner = ({ activeFilters = [], className, canSelectAllPages, colu
                 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 })))),
+                    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 })))))),
                 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", { className: "tds-data-table-filters" }, hasEditableFilters && (React__default.createElement(ActiveFilters, { activeFilters: chipFilters, hasFilters: hasFilters, onActiveFiltersChange: onChipFiltersChange, onClear: clearFilters }))))),
             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,