@planningcenter/tapestry 4.8.0-rc.0 → 4.8.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.
- package/dist/components/DataTable/ActiveFilterInstance.d.ts +2 -2
- package/dist/components/DataTable/ActiveFilterInstance.d.ts.map +1 -1
- package/dist/components/DataTable/ActiveFilterInstance.js +4 -1
- package/dist/components/DataTable/ActiveFilterInstance.js.map +1 -1
- package/dist/components/DataTable/ActiveFilters.d.ts +7 -4
- package/dist/components/DataTable/ActiveFilters.d.ts.map +1 -1
- package/dist/components/DataTable/ActiveFilters.js +43 -15
- package/dist/components/DataTable/ActiveFilters.js.map +1 -1
- package/dist/components/DataTable/CollectionEditorsShared.d.ts +33 -0
- package/dist/components/DataTable/CollectionEditorsShared.d.ts.map +1 -0
- package/dist/components/DataTable/CollectionEditorsShared.js +16 -0
- package/dist/components/DataTable/CollectionEditorsShared.js.map +1 -0
- package/dist/components/DataTable/CollectionEditorsStatic.d.ts +14 -0
- package/dist/components/DataTable/CollectionEditorsStatic.d.ts.map +1 -0
- package/dist/components/DataTable/CollectionEditorsStatic.js +67 -0
- package/dist/components/DataTable/CollectionEditorsStatic.js.map +1 -0
- package/dist/components/DataTable/DataTable.d.ts +1 -1
- package/dist/components/DataTable/DataTable.d.ts.map +1 -1
- package/dist/components/DataTable/DataTable.js +59 -56
- package/dist/components/DataTable/DataTable.js.map +1 -1
- package/dist/components/DataTable/FilterChip.d.ts.map +1 -1
- package/dist/components/DataTable/FilterChip.js +25 -1
- package/dist/components/DataTable/FilterChip.js.map +1 -1
- package/dist/components/DataTable/FilterContext.d.ts +10 -1
- package/dist/components/DataTable/FilterContext.d.ts.map +1 -1
- package/dist/components/DataTable/FilterContext.js +52 -9
- package/dist/components/DataTable/FilterContext.js.map +1 -1
- package/dist/components/DataTable/FilterControls.d.ts.map +1 -1
- package/dist/components/DataTable/FilterControls.js +85 -23
- package/dist/components/DataTable/FilterControls.js.map +1 -1
- package/dist/components/DataTable/FilterControls.module.css.js +4 -0
- package/dist/components/DataTable/FilterControls.module.css.js.map +1 -0
- package/dist/components/DataTable/FilterTypes.d.ts +34 -0
- package/dist/components/DataTable/FilterTypes.d.ts.map +1 -1
- package/dist/components/DataTable/FilterTypes.js +7 -0
- package/dist/components/DataTable/FilterTypes.js.map +1 -0
- package/dist/components/DataTable/PendingFilterContext.d.ts +12 -0
- package/dist/components/DataTable/PendingFilterContext.d.ts.map +1 -0
- package/dist/components/DataTable/PendingFilterContext.js +33 -0
- package/dist/components/DataTable/PendingFilterContext.js.map +1 -0
- package/dist/components/DataTable/PendingFilterQueue.d.ts +13 -0
- package/dist/components/DataTable/PendingFilterQueue.d.ts.map +1 -0
- package/dist/components/DataTable/PendingFilterQueue.js +42 -0
- package/dist/components/DataTable/PendingFilterQueue.js.map +1 -0
- package/dist/components/DataTable/SearchableFilters.d.ts +4 -0
- package/dist/components/DataTable/SearchableFilters.d.ts.map +1 -1
- package/dist/components/DataTable/SearchableFilters.js +26 -0
- package/dist/components/DataTable/SearchableFilters.js.map +1 -1
- package/dist/components/DataTable/collectionFilter.d.ts +0 -2
- package/dist/components/DataTable/collectionFilter.d.ts.map +1 -1
- package/dist/components/DataTable/collectionFilter.js +3 -45
- package/dist/components/DataTable/collectionFilter.js.map +1 -1
- package/dist/components/DataTable/dateFilter.d.ts.map +1 -1
- package/dist/components/DataTable/dateFilter.js +23 -7
- package/dist/components/DataTable/dateFilter.js.map +1 -1
- package/dist/components/DataTable/filters.d.ts +1 -0
- package/dist/components/DataTable/filters.d.ts.map +1 -1
- package/dist/components/DataTable/index.d.ts +2 -1
- package/dist/components/DataTable/index.d.ts.map +1 -1
- package/dist/components/DataTable/numberFilter.d.ts.map +1 -1
- package/dist/components/DataTable/numberFilter.js +15 -4
- package/dist/components/DataTable/numberFilter.js.map +1 -1
- package/dist/components/DataTable/scopedFilter.d.ts +13 -0
- package/dist/components/DataTable/scopedFilter.d.ts.map +1 -0
- package/dist/components/DataTable/scopedFilter.js +114 -0
- package/dist/components/DataTable/scopedFilter.js.map +1 -0
- package/dist/components/DataTable/textFilter.d.ts.map +1 -1
- package/dist/components/DataTable/textFilter.js +8 -3
- package/dist/components/DataTable/textFilter.js.map +1 -1
- package/dist/components/DataTable/useShelfExpanded.d.ts +4 -3
- package/dist/components/DataTable/useShelfExpanded.d.ts.map +1 -1
- package/dist/components/DataTable/useShelfExpanded.js +16 -8
- package/dist/components/DataTable/useShelfExpanded.js.map +1 -1
- package/dist/components/DataTable/utils.d.ts +4 -0
- package/dist/components/DataTable/utils.d.ts.map +1 -0
- package/dist/components/DataTable/utils.js +13 -0
- package/dist/components/DataTable/utils.js.map +1 -0
- package/dist/components/currency-input/CurrencyInput.d.ts +51 -0
- package/dist/components/currency-input/CurrencyInput.d.ts.map +1 -0
- package/dist/components/currency-input/CurrencyInput.js +64 -0
- package/dist/components/currency-input/CurrencyInput.js.map +1 -0
- package/dist/components/currency-input/index.d.ts +4 -0
- package/dist/components/currency-input/index.d.ts.map +1 -0
- package/dist/components/popover/Popover.d.ts +12 -7
- package/dist/components/popover/Popover.d.ts.map +1 -1
- package/dist/components/popover/Popover.js +26 -4
- package/dist/components/popover/Popover.js.map +1 -1
- package/dist/reactRender.css +1305 -1090
- package/dist/reactRender.css.map +1 -1
- package/dist/reactRenderLegacy.css +1305 -1090
- package/dist/reactRenderLegacy.css.map +1 -1
- package/dist/unstable.css +442 -227
- package/dist/unstable.css.map +1 -1
- package/dist/unstable.d.ts +1 -0
- package/dist/unstable.d.ts.map +1 -1
- package/dist/unstable.js +2 -0
- package/dist/unstable.js.map +1 -1
- package/package.json +3 -3
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type React from "react";
|
|
2
|
-
import type { FilterNodeItem, Operator
|
|
2
|
+
import type { FilterChange, FilterNodeItem, Operator } from "./FilterTypes";
|
|
3
3
|
export declare abstract class ActiveFilterInstance<T = unknown> {
|
|
4
4
|
readonly filter: FilterNodeItem;
|
|
5
5
|
readonly operator: Operator;
|
|
@@ -8,6 +8,6 @@ export declare abstract class ActiveFilterInstance<T = unknown> {
|
|
|
8
8
|
toSegments(): string[];
|
|
9
9
|
abstract formatValue(): string | string[];
|
|
10
10
|
toValueSegments(): string[];
|
|
11
|
-
abstract renderEditor(
|
|
11
|
+
abstract renderEditor(onChange: FilterChange): React.ReactNode;
|
|
12
12
|
}
|
|
13
13
|
//# sourceMappingURL=ActiveFilterInstance.d.ts.map
|
|
@@ -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,
|
|
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"}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { isEmptyValue } from './utils.js';
|
|
2
|
+
|
|
1
3
|
class ActiveFilterInstance {
|
|
2
4
|
filter;
|
|
3
5
|
operator;
|
|
@@ -15,7 +17,8 @@ class ActiveFilterInstance {
|
|
|
15
17
|
}
|
|
16
18
|
toValueSegments() {
|
|
17
19
|
const value = this.formatValue();
|
|
18
|
-
|
|
20
|
+
const segments = Array.isArray(value) ? value : [value];
|
|
21
|
+
return segments.filter((segment) => !isEmptyValue(segment));
|
|
19
22
|
}
|
|
20
23
|
}
|
|
21
24
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActiveFilterInstance.js","sources":["../../../src/components/DataTable/ActiveFilterInstance.tsx"],"sourcesContent":["import type React from \"react\"\n\nimport type {
|
|
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;;;;"}
|
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import type { ActiveFilter,
|
|
3
|
-
export declare function ActiveFilters({ activeFilters, onActiveFiltersChange, }: {
|
|
2
|
+
import type { ActiveFilter, FilterChange } from "./FilterTypes";
|
|
3
|
+
export declare function ActiveFilters({ activeFilters, hasFilters, onActiveFiltersChange, }: {
|
|
4
4
|
activeFilters: ActiveFilter[];
|
|
5
|
+
/** Whether the filter schema has loaded. */
|
|
6
|
+
hasFilters: boolean;
|
|
5
7
|
onActiveFiltersChange: (activeFilters: ActiveFilter[]) => void;
|
|
6
8
|
}): React.JSX.Element;
|
|
7
|
-
declare function ActiveFilter({ activeFilter,
|
|
9
|
+
declare function ActiveFilter({ activeFilter, onChange, removeActiveFilter, pending, }: {
|
|
8
10
|
activeFilter: ActiveFilter;
|
|
11
|
+
onChange: FilterChange;
|
|
12
|
+
pending?: boolean;
|
|
9
13
|
removeActiveFilter: () => void;
|
|
10
|
-
updateActiveFilter: UpdateActiveFilter;
|
|
11
14
|
}): React.JSX.Element;
|
|
12
15
|
export {};
|
|
13
16
|
//# sourceMappingURL=ActiveFilters.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActiveFilters.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/ActiveFilters.tsx"],"names":[],"mappings":"
|
|
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,28 +1,56 @@
|
|
|
1
|
+
import '../button/ActionsDropdownIconButton.js';
|
|
2
|
+
import { Button } from '../button/Button.js';
|
|
3
|
+
import '../button/DropdownButton.js';
|
|
4
|
+
import '../button/DropdownIconButton.js';
|
|
5
|
+
import '../button/IconButton.js';
|
|
6
|
+
import '../button/LoadingButton.js';
|
|
7
|
+
import '../button/PageHeaderActionsDropdownButton.js';
|
|
1
8
|
import { Popover, PopoverTrigger, PopoverContent } from '../popover/Popover.js';
|
|
2
9
|
import React__default from 'react';
|
|
3
10
|
import { FilterChip, FilterChipSegments } from './FilterChip.js';
|
|
4
|
-
import { useRelatedFilterOperator } from './FilterContext.js';
|
|
11
|
+
import { useRestoreFilterFocus, useRelatedFilterOperator } from './FilterContext.js';
|
|
5
12
|
import { OperatorSelect } from './OperatorSelect.js';
|
|
13
|
+
import { usePendingFilters } from './PendingFilterContext.js';
|
|
6
14
|
|
|
7
|
-
function ActiveFilters({ activeFilters, onActiveFiltersChange, }) {
|
|
15
|
+
function ActiveFilters({ activeFilters, hasFilters, onActiveFiltersChange, }) {
|
|
16
|
+
const { pendingFilters, removePendingFilter, updatePendingFilter } = usePendingFilters();
|
|
17
|
+
const restoreFilterFocus = useRestoreFilterFocus();
|
|
8
18
|
return (React__default.createElement("div", { className: "tds-data-table-filters-active" },
|
|
9
|
-
React__default.createElement("div", { className: "tds-data-table-filters-active-list" },
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
19
|
+
React__default.createElement("div", { className: "tds-data-table-filters-active-list" },
|
|
20
|
+
activeFilters.map((filter, index) => (React__default.createElement(ActiveFilter, { key: `active-${index}`, activeFilter: filter, onChange: (updates) => {
|
|
21
|
+
const newActiveFilters = [...activeFilters];
|
|
22
|
+
newActiveFilters[index] = { ...filter, ...updates };
|
|
23
|
+
onActiveFiltersChange(newActiveFilters);
|
|
24
|
+
}, removeActiveFilter: () => {
|
|
25
|
+
onActiveFiltersChange(activeFilters.filter((_, i) => i !== index));
|
|
26
|
+
} }))),
|
|
27
|
+
pendingFilters.map((filter, index) => (React__default.createElement(ActiveFilter, { key: `pending-${index}`, activeFilter: filter, onChange: (updates, { complete = true } = {}) => {
|
|
28
|
+
if (!complete) {
|
|
29
|
+
updatePendingFilter(filter, updates);
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
32
|
+
onActiveFiltersChange([
|
|
33
|
+
...activeFilters,
|
|
34
|
+
{ ...filter, ...updates },
|
|
35
|
+
]);
|
|
36
|
+
removePendingFilter(filter);
|
|
37
|
+
}, removeActiveFilter: () => {
|
|
38
|
+
removePendingFilter(filter);
|
|
39
|
+
}, pending: true })))),
|
|
40
|
+
React__default.createElement("div", { className: "tds-data-table-filters-active-actions" },
|
|
41
|
+
React__default.createElement(Button, { "aria-label": "Clear filters", disabled: !hasFilters, kind: "secondary", label: "Clear", size: "sm", onClick: () => {
|
|
42
|
+
onActiveFiltersChange([]);
|
|
43
|
+
restoreFilterFocus();
|
|
44
|
+
} }))));
|
|
17
45
|
}
|
|
18
|
-
function ActiveFilter({ activeFilter,
|
|
46
|
+
function ActiveFilter({ activeFilter, onChange, removeActiveFilter, pending = false, }) {
|
|
19
47
|
const { relatedFilter, operator } = useRelatedFilterOperator(activeFilter);
|
|
20
48
|
if (!relatedFilter || !operator)
|
|
21
49
|
return (React__default.createElement(FilterChip, { label: "Unrecognized filter", onRemove: removeActiveFilter, status: "invalid" },
|
|
22
50
|
React__default.createElement(FilterChipSegments, { segments: ["Unrecognized filter"] })));
|
|
23
51
|
const activeFilterInstance = relatedFilter.createActiveFilterInstance(activeFilter, operator);
|
|
24
|
-
return (React__default.createElement(FilterChip, { label: `${relatedFilter.label} filter`, onRemove: removeActiveFilter },
|
|
25
|
-
React__default.createElement(Popover,
|
|
52
|
+
return (React__default.createElement(FilterChip, { label: `${relatedFilter.label} filter${pending ? " (pending)" : ""}`, onRemove: removeActiveFilter, status: pending ? "inactive" : undefined },
|
|
53
|
+
React__default.createElement(Popover, { defaultOpen: pending },
|
|
26
54
|
React__default.createElement(PopoverTrigger, null,
|
|
27
55
|
React__default.createElement(FilterChipSegments, { segments: activeFilterInstance.toSegments() })),
|
|
28
56
|
React__default.createElement(PopoverContent, { className: "tds-popover--data-table-filters-popover", modal: false },
|
|
@@ -32,8 +60,8 @@ function ActiveFilter({ activeFilter, updateActiveFilter, removeActiveFilter, })
|
|
|
32
60
|
" ",
|
|
33
61
|
operator.label))),
|
|
34
62
|
relatedFilter.description && (React__default.createElement("p", { className: "tds-data-table-filters-popover-description" }, relatedFilter.description)),
|
|
35
|
-
React__default.createElement(OperatorSelect, { operator: operator, relatedFilter: relatedFilter, updateActiveFilter:
|
|
36
|
-
activeFilterInstance.renderEditor(
|
|
63
|
+
React__default.createElement(OperatorSelect, { operator: operator, relatedFilter: relatedFilter, updateActiveFilter: (updates) => onChange(updates, { complete: false }) }),
|
|
64
|
+
activeFilterInstance.renderEditor(onChange)))));
|
|
37
65
|
}
|
|
38
66
|
|
|
39
67
|
export { ActiveFilters };
|
|
@@ -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 {
|
|
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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"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { type ComboBoxElementProps } from "../combo-box";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import type { CollectionDisplay } from "./collectionFilter";
|
|
4
|
+
import { CollectionOption } from "./collectionFilter";
|
|
5
|
+
import type { FilterChange } from "./FilterTypes";
|
|
6
|
+
/** A single option's `value`, or the selected `value`s when `multiple`. */
|
|
7
|
+
export type CollectionFilterValue = string | string[];
|
|
8
|
+
export type CollectionEditorProps = {
|
|
9
|
+
multiple: boolean;
|
|
10
|
+
operator: {
|
|
11
|
+
label: string;
|
|
12
|
+
};
|
|
13
|
+
value: CollectionFilterValue;
|
|
14
|
+
};
|
|
15
|
+
export type CollectionFilterEditorProps = {
|
|
16
|
+
config: {
|
|
17
|
+
display: CollectionDisplay;
|
|
18
|
+
multiple: boolean;
|
|
19
|
+
options: CollectionOption[];
|
|
20
|
+
};
|
|
21
|
+
filter: {
|
|
22
|
+
label: string;
|
|
23
|
+
name: string;
|
|
24
|
+
};
|
|
25
|
+
onChange: FilterChange;
|
|
26
|
+
operator: {
|
|
27
|
+
label: string;
|
|
28
|
+
};
|
|
29
|
+
value: CollectionFilterValue;
|
|
30
|
+
};
|
|
31
|
+
export declare function orderByOptions(options: CollectionOption[], selected: Set<string>): string[];
|
|
32
|
+
export declare function CollectionEditorCombobox({ value, multiple, operator, ...props }: CollectionEditorProps & Partial<ComboBoxElementProps> & Pick<ComboBoxElementProps, "children">): React.JSX.Element;
|
|
33
|
+
//# sourceMappingURL=CollectionEditorsShared.d.ts.map
|
|
@@ -0,0 +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,YAAY,EAAE,MAAM,eAAe,CAAA;AAEjD,2EAA2E;AAC3E,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,MAAM,EAAE,CAAA;AAErD,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,gBAAgB,EAAE,CAAA;KAC5B,CAAA;IACD,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAA;QACb,IAAI,EAAE,MAAM,CAAA;KACb,CAAA;IACD,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"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { ComboBox } from '../combo-box/ComboBox.js';
|
|
2
|
+
import React__default from 'react';
|
|
3
|
+
|
|
4
|
+
function orderByOptions(options, selected) {
|
|
5
|
+
return options.filter((o) => selected.has(o.value)).map((o) => o.value);
|
|
6
|
+
}
|
|
7
|
+
function CollectionEditorCombobox({ value, multiple, operator, ...props }) {
|
|
8
|
+
return (React__default.createElement(ComboBox
|
|
9
|
+
// eslint-disable-next-line jsx-a11y/no-autofocus -- the editor only ever renders inside a chip popover that just opened, per ARIA dialog practices
|
|
10
|
+
, {
|
|
11
|
+
// eslint-disable-next-line jsx-a11y/no-autofocus -- the editor only ever renders inside a chip popover that just opened, per ARIA dialog practices
|
|
12
|
+
autoFocus: true, hideLabel: true, label: operator.label, selectionMode: multiple ? "multiple" : "single", value: value, ...props }));
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export { CollectionEditorCombobox, orderByOptions };
|
|
16
|
+
//# sourceMappingURL=CollectionEditorsShared.js.map
|
|
@@ -0,0 +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 { 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 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: CollectionOption[]\n }\n filter: {\n label: string\n name: string\n }\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":";;;AAiCM,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;;;;"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { CollectionEditorProps, CollectionFilterEditorProps, CollectionFilterValue } from "./CollectionEditorsShared";
|
|
3
|
+
import { CollectionOption } from "./collectionFilter";
|
|
4
|
+
export type CollectionEditorStaticProps = CollectionEditorProps & {
|
|
5
|
+
filterLabel: string;
|
|
6
|
+
filterName: string;
|
|
7
|
+
onCommit: (value: CollectionFilterValue) => void;
|
|
8
|
+
options: CollectionOption[];
|
|
9
|
+
};
|
|
10
|
+
export declare function CollectionFilterEditorStatic({ config, onChange, operator, value, filter, }: CollectionFilterEditorProps): React.JSX.Element;
|
|
11
|
+
export declare function CollectionEditorCheckboxes({ filterLabel, onCommit, options, value, }: CollectionEditorStaticProps): React.JSX.Element;
|
|
12
|
+
export declare function CollectionEditorRadios({ filterLabel, filterName, onCommit, options, value, }: CollectionEditorStaticProps): React.JSX.Element;
|
|
13
|
+
export declare function CollectionEditorSelect({ value, operator, options, onCommit, }: CollectionEditorStaticProps): React.JSX.Element;
|
|
14
|
+
//# sourceMappingURL=CollectionEditorsStatic.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CollectionEditorsStatic.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/CollectionEditorsStatic.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAc,MAAM,OAAO,CAAA;AAElC,OAAO,EAEL,qBAAqB,EACrB,2BAA2B,EAC3B,qBAAqB,EAEtB,MAAM,2BAA2B,CAAA;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAGrD,MAAM,MAAM,2BAA2B,GAAG,qBAAqB,GAAG;IAChE,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAA;IAChD,OAAO,EAAE,gBAAgB,EAAE,CAAA;CAC5B,CAAA;AAED,wBAAgB,4BAA4B,CAAC,EAC3C,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,MAAM,GACP,EAAE,2BAA2B,qBAmB7B;AAeD,wBAAgB,0BAA0B,CAAC,EACzC,WAAW,EACX,QAAQ,EACR,OAAO,EACP,KAAK,GACN,EAAE,2BAA2B,qBAuB7B;AAED,wBAAgB,sBAAsB,CAAC,EACrC,WAAW,EACX,UAAU,EACV,QAAQ,EACR,OAAO,EACP,KAAK,GACN,EAAE,2BAA2B,qBAqB7B;AAED,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,QAAQ,EACR,OAAO,EACP,QAAQ,GACT,EAAE,2BAA2B,qBAc7B"}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { Checkbox } from '../checkbox/Checkbox.js';
|
|
2
|
+
import { CheckboxGroup } from '../checkbox-group/CheckboxGroup.js';
|
|
3
|
+
import { ComboBoxItem } from '../combo-box/ComboBox.js';
|
|
4
|
+
import { Radio } from '../radio/Radio.js';
|
|
5
|
+
import { RadioGroup } from '../radio-group/RadioGroup.js';
|
|
6
|
+
import { Select } from '../select/Select.js';
|
|
7
|
+
import React__default from 'react';
|
|
8
|
+
import { CollectionEditorCombobox, orderByOptions } from './CollectionEditorsShared.js';
|
|
9
|
+
import { isEmptyValue } from './utils.js';
|
|
10
|
+
|
|
11
|
+
function CollectionFilterEditorStatic({ config, onChange, operator, value, filter, }) {
|
|
12
|
+
const { display, multiple, options } = config;
|
|
13
|
+
const onCommit = (value) => onChange({ value }, { complete: !isEmptyValue(value) });
|
|
14
|
+
const Editor = getStaticEditor({ display, multiple });
|
|
15
|
+
return (React__default.createElement(Editor, { value: value, onCommit: onCommit, options: options, multiple: multiple, operator: operator, filterLabel: filter.label, filterName: filter.name }));
|
|
16
|
+
}
|
|
17
|
+
function getStaticEditor({ display, multiple, }) {
|
|
18
|
+
if (display === "combobox")
|
|
19
|
+
return CollectionEditorComboboxStatic;
|
|
20
|
+
if (multiple)
|
|
21
|
+
return CollectionEditorCheckboxes;
|
|
22
|
+
if (display === "checkboxes")
|
|
23
|
+
return CollectionEditorRadios; // TODO: This looks like it might be a mistake, should it be CollectionEditorCheckboxes? or at least allow for `radios` as an option?
|
|
24
|
+
return CollectionEditorSelect;
|
|
25
|
+
}
|
|
26
|
+
function CollectionEditorCheckboxes({ filterLabel, onCommit, options, value, }) {
|
|
27
|
+
const selected = Array.isArray(value) ? value : [value];
|
|
28
|
+
const toggle = (optionValue, checked) => {
|
|
29
|
+
const next = new Set(selected);
|
|
30
|
+
if (checked)
|
|
31
|
+
next.add(optionValue);
|
|
32
|
+
else
|
|
33
|
+
next.delete(optionValue);
|
|
34
|
+
onCommit(orderByOptions(options, next));
|
|
35
|
+
};
|
|
36
|
+
return (React__default.createElement(CheckboxGroup, { label: filterLabel }, options.map((option, index) => (React__default.createElement(Checkbox, { key: option.value,
|
|
37
|
+
// eslint-disable-next-line jsx-a11y/no-autofocus -- the editor only ever renders inside a chip popover that just opened, per ARIA dialog practices
|
|
38
|
+
autoFocus: index === 0, checked: selected.includes(option.value), label: option.label, onChange: (e) => toggle(option.value, e.target.checked) })))));
|
|
39
|
+
}
|
|
40
|
+
function CollectionEditorRadios({ filterLabel, filterName, onCommit, options, value, }) {
|
|
41
|
+
const selected = Array.isArray(value) ? value[0] : value;
|
|
42
|
+
const focusIndex = Math.max(0, options.findIndex((option) => option.value === selected));
|
|
43
|
+
return (React__default.createElement(RadioGroup, { label: filterLabel }, options.map((option, index) => (React__default.createElement(Radio, { key: option.value,
|
|
44
|
+
// eslint-disable-next-line jsx-a11y/no-autofocus -- the editor only ever renders inside a chip popover that just opened, per ARIA dialog practices
|
|
45
|
+
autoFocus: index === focusIndex, checked: selected === option.value, label: option.label, name: filterName, onChange: () => onCommit(option.value) })))));
|
|
46
|
+
}
|
|
47
|
+
function CollectionEditorSelect({ value, operator, options, onCommit, }) {
|
|
48
|
+
const selected = Array.isArray(value) ? value[0] : value;
|
|
49
|
+
return (React__default.createElement(Select
|
|
50
|
+
// eslint-disable-next-line jsx-a11y/no-autofocus -- the editor only ever renders inside a chip popover that just opened, per ARIA dialog practices
|
|
51
|
+
, {
|
|
52
|
+
// eslint-disable-next-line jsx-a11y/no-autofocus -- the editor only ever renders inside a chip popover that just opened, per ARIA dialog practices
|
|
53
|
+
autoFocus: true, hideLabel: true, label: operator.label, options: options, value: selected, onChange: (e) => onCommit(e.target.value) }));
|
|
54
|
+
}
|
|
55
|
+
function CollectionEditorComboboxStatic({ onCommit, options, filterLabel, filterName, ...props }) {
|
|
56
|
+
return (React__default.createElement(CollectionEditorCombobox, { ...props, onChange: (value) => {
|
|
57
|
+
if (value === null)
|
|
58
|
+
return;
|
|
59
|
+
const resolvedValue = Array.isArray(value)
|
|
60
|
+
? orderByOptions(options, new Set(value.map(String)))
|
|
61
|
+
: String(value);
|
|
62
|
+
onCommit(resolvedValue);
|
|
63
|
+
} }, options.map((option) => (React__default.createElement(ComboBoxItem, { key: option.value, id: option.value }, option.label)))));
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
export { CollectionEditorCheckboxes, CollectionEditorRadios, CollectionEditorSelect, CollectionFilterEditorStatic };
|
|
67
|
+
//# sourceMappingURL=CollectionEditorsStatic.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CollectionEditorsStatic.js","sources":["../../../src/components/DataTable/CollectionEditorsStatic.tsx"],"sourcesContent":["import { Checkbox } from \"@components/checkbox\"\nimport { CheckboxGroup } from \"@components/checkbox-group\"\nimport { ComboBoxItem } from \"@components/combo-box\"\nimport { Radio } from \"@components/radio\"\nimport { RadioGroup } from \"@components/radio-group\"\nimport { Select } from \"@components/select\"\nimport React, { Key } from \"react\"\n\nimport {\n CollectionEditorCombobox,\n CollectionEditorProps,\n CollectionFilterEditorProps,\n CollectionFilterValue,\n orderByOptions,\n} from \"./CollectionEditorsShared\"\nimport { CollectionOption } from \"./collectionFilter\"\nimport { isEmptyValue } from \"./utils\"\n\nexport type CollectionEditorStaticProps = CollectionEditorProps & {\n filterLabel: string\n filterName: string\n onCommit: (value: CollectionFilterValue) => void\n options: CollectionOption[]\n}\n\nexport function CollectionFilterEditorStatic({\n config,\n onChange,\n operator,\n value,\n filter,\n}: CollectionFilterEditorProps) {\n const { display, multiple, options } = config\n\n const onCommit = (value: CollectionFilterValue) =>\n onChange({ value }, { complete: !isEmptyValue(value) })\n\n const Editor = getStaticEditor({ display, multiple })\n\n return (\n <Editor\n value={value}\n onCommit={onCommit}\n options={options}\n multiple={multiple}\n operator={operator}\n filterLabel={filter.label}\n filterName={filter.name}\n />\n )\n}\n\nfunction getStaticEditor({\n display,\n multiple,\n}: {\n display: string\n multiple: boolean\n}) {\n if (display === \"combobox\") return CollectionEditorComboboxStatic\n if (multiple) return CollectionEditorCheckboxes\n if (display === \"checkboxes\") return CollectionEditorRadios // TODO: This looks like it might be a mistake, should it be CollectionEditorCheckboxes? or at least allow for `radios` as an option?\n return CollectionEditorSelect\n}\n\nexport function CollectionEditorCheckboxes({\n filterLabel,\n onCommit,\n options,\n value,\n}: CollectionEditorStaticProps) {\n const selected = Array.isArray(value) ? value : [value]\n const toggle = (optionValue: string, checked: boolean) => {\n const next = new Set(selected)\n if (checked) next.add(optionValue)\n else next.delete(optionValue)\n onCommit(orderByOptions(options, next))\n }\n\n return (\n <CheckboxGroup label={filterLabel}>\n {options.map((option, index) => (\n <Checkbox\n key={option.value}\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={index === 0}\n checked={selected.includes(option.value)}\n label={option.label}\n onChange={(e) => toggle(option.value, e.target.checked)}\n />\n ))}\n </CheckboxGroup>\n )\n}\n\nexport function CollectionEditorRadios({\n filterLabel,\n filterName,\n onCommit,\n options,\n value,\n}: CollectionEditorStaticProps) {\n const selected = Array.isArray(value) ? value[0] : value\n const focusIndex = Math.max(\n 0,\n options.findIndex((option) => option.value === selected)\n )\n return (\n <RadioGroup label={filterLabel}>\n {options.map((option, index) => (\n <Radio\n key={option.value}\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={index === focusIndex}\n checked={selected === option.value}\n label={option.label}\n name={filterName}\n onChange={() => onCommit(option.value)}\n />\n ))}\n </RadioGroup>\n )\n}\n\nexport function CollectionEditorSelect({\n value,\n operator,\n options,\n onCommit,\n}: CollectionEditorStaticProps) {\n const selected = Array.isArray(value) ? value[0] : value\n\n return (\n <Select\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 options={options}\n value={selected}\n onChange={(e) => onCommit(e.target.value)}\n />\n )\n}\n\nfunction CollectionEditorComboboxStatic({\n onCommit,\n options,\n filterLabel,\n filterName,\n ...props\n}: CollectionEditorStaticProps) {\n return (\n <CollectionEditorCombobox\n {...props}\n onChange={(value: Key | Key[] | null) => {\n if (value === null) return\n\n const resolvedValue = Array.isArray(value)\n ? orderByOptions(options, new Set(value.map(String)))\n : String(value)\n\n onCommit(resolvedValue)\n }}\n >\n {options.map((option) => (\n <ComboBoxItem key={option.value} id={option.value}>\n {option.label}\n </ComboBoxItem>\n ))}\n </CollectionEditorCombobox>\n )\n}\n"],"names":["React"],"mappings":"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"}
|
|
@@ -270,7 +270,7 @@ export type DataTableElementProps = CombineAriaPropsWithCustomProps<AriaTablePro
|
|
|
270
270
|
* @component
|
|
271
271
|
*/
|
|
272
272
|
export declare const DataTable: {
|
|
273
|
-
({ activeFilters,
|
|
273
|
+
({ activeFilters, filters, ...props }: DataTableElementProps): React.JSX.Element;
|
|
274
274
|
displayName: string;
|
|
275
275
|
};
|
|
276
276
|
//# sourceMappingURL=DataTable.d.ts.map
|
|
@@ -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;
|
|
1
|
+
{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.tsx"],"names":[],"mappings":"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"}
|
|
@@ -11,6 +11,7 @@ import { prepareColumn } from './DataTableColumnTypes.js';
|
|
|
11
11
|
import { getRowKey } from './DataTableRow.js';
|
|
12
12
|
import { FiltersProvider } from './FilterContext.js';
|
|
13
13
|
import { FilterControls } from './FilterControls.js';
|
|
14
|
+
import { usePendingFilters } from './PendingFilterContext.js';
|
|
14
15
|
import { hasResultsCount, resolveResultNounLabel, ResultsCount } from './ResultsCount.js';
|
|
15
16
|
import { RowActions } from './RowActions.js';
|
|
16
17
|
import { SelectAllBanner } from './SelectAllBanner.js';
|
|
@@ -39,7 +40,9 @@ const DEFAULT_ERROR_STATE = "Something went wrong.";
|
|
|
39
40
|
*
|
|
40
41
|
* @component
|
|
41
42
|
*/
|
|
42
|
-
const DataTable = ({ activeFilters = [],
|
|
43
|
+
const DataTable = ({ activeFilters = [], filters = [], ...props }) => (React__default.createElement(FiltersProvider, { activeFilters: activeFilters, filters: filters },
|
|
44
|
+
React__default.createElement(DataTableInner, { ...props, activeFilters: activeFilters, filters: filters })));
|
|
45
|
+
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 }) => {
|
|
43
46
|
const hasRowPressAction = Boolean(onRowClick || getRowLink);
|
|
44
47
|
const rowsAreInteractive = hasRowPressAction || Boolean(selectable);
|
|
45
48
|
const combinedClassName = classNames("tds-data-table-grid", className);
|
|
@@ -105,12 +108,13 @@ const DataTable = ({ activeFilters = [], className, canSelectAllPages, columns,
|
|
|
105
108
|
? `${resultNounLabel} table pagination`
|
|
106
109
|
: undefined;
|
|
107
110
|
const hasActions = (tableActions?.length ?? 0) > 0;
|
|
108
|
-
const hasFilters = (filters
|
|
111
|
+
const hasFilters = (filters.length ?? 0) > 0;
|
|
109
112
|
const hasViewSettingsToggle = hideableColumns.length > 0;
|
|
110
113
|
const showHeader = Boolean(resultNoun || hasActions || hasFilters || hasViewSettingsToggle);
|
|
111
114
|
const hasRowActions = (rowActions?.length ?? 0) > 0;
|
|
112
|
-
const
|
|
113
|
-
const
|
|
115
|
+
const { pendingFilters } = usePendingFilters();
|
|
116
|
+
const hasEditableFilters = activeFilters.length + pendingFilters.length > 0;
|
|
117
|
+
const [isShelfExpanded, toggleShelf] = useShelfExpanded(activeFilters.length + pendingFilters.length, pendingFilters.length);
|
|
114
118
|
// Keeps collapsed shelf content out of tab order/a11y tree. Needs a string,
|
|
115
119
|
// not a boolean — `inert` isn't in `@types/react@18` or recognized by
|
|
116
120
|
// react-dom as a boolean attribute before React 19.
|
|
@@ -122,58 +126,57 @@ const DataTable = ({ activeFilters = [], className, canSelectAllPages, columns,
|
|
|
122
126
|
// set that fits on one page shows both buttons disabled.
|
|
123
127
|
const isIndexedPagination = paginationType === "indexed";
|
|
124
128
|
const showPagination = isIndexedPagination || (totalPages !== undefined && totalPages > 1);
|
|
125
|
-
return (React__default.createElement(
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
React__default.createElement(
|
|
130
|
-
React__default.createElement(
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
React__default.createElement("div", { ref:
|
|
142
|
-
React__default.createElement(
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
React__default.createElement(
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
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 }))))))));
|
|
129
|
+
return (React__default.createElement("div", { className: classNames("tds-data-table", {
|
|
130
|
+
"tds-data-table--sticky-header": hasScrollContainer,
|
|
131
|
+
}) },
|
|
132
|
+
React__default.createElement("div", { className: "tds-data-table-frame" },
|
|
133
|
+
React__default.createElement(DataTableSelectionContext.Provider, { value: selectionModel },
|
|
134
|
+
showHeader && (React__default.createElement("div", { className: "tds-data-table-frame-header" },
|
|
135
|
+
React__default.createElement(ResultsCount, { id: resultsCountId, resultNoun: resultNoun, selectable: selectable, selectedCount: selectedCount, totalCount: totalCount }),
|
|
136
|
+
hasActions && (React__default.createElement(TableActions, { actions: tableActions, resultNoun: resultNoun })),
|
|
137
|
+
hasFilters && (React__default.createElement(FilterControls, { activeFilters: activeFilters, filters: filters, isShelfExpanded: isShelfExpanded, onToggleShelf: toggleShelf })),
|
|
138
|
+
hasViewSettingsToggle && (React__default.createElement(ViewSettingsToggle, { columns: hideableColumns, onColumnVisibilityChange: onColumnVisibilityChange, visibleColumnNames: visibleHideableColumns })))),
|
|
139
|
+
React__default.createElement(SelectAllBanner, { resultNoun: resultNoun })),
|
|
140
|
+
(hasFilters || hasEditableFilters) && (React__default.createElement("div", { className: classNames("tds-data-table-filters-shelf", {
|
|
141
|
+
"tds-data-table-filters-shelf--collapsed": !isShelfExpanded,
|
|
142
|
+
}), ...shelfInertProps },
|
|
143
|
+
React__default.createElement("div", { className: "tds-data-table-filters" }, hasEditableFilters && (React__default.createElement(ActiveFilters, { activeFilters: activeFilters, hasFilters: hasFilters, onActiveFiltersChange: onActiveFiltersChange }))))),
|
|
144
|
+
React__default.createElement("div", { ref: wrapperRef, className: "tds-data-table-scroll-wrapper" },
|
|
145
|
+
React__default.createElement("div", { ref: scrollRef, className: "tds-data-table-scroll" },
|
|
146
|
+
React__default.createElement(Table, { ...restProps, ...selectionProps, ...(ariaLabel ? { "aria-label": ariaLabel } : {}), ...(describedBy ? { "aria-describedby": describedBy } : {}), ...{ id: tableId }, className: combinedClassName,
|
|
147
|
+
// Pinned rather than exposed as a prop: `disabledKeys` only ever
|
|
148
|
+
// turns off selection here, leaving the row clickable and
|
|
149
|
+
// focusable. React Aria defaults this to "all", which would also
|
|
150
|
+
// disable `onRowClick`/`getRowLink` and drop the row out of the
|
|
151
|
+
// focus order, so it has to be set explicitly.
|
|
152
|
+
disabledBehavior: "selection", disabledKeys: disabledKeys, sortDescriptor: sortDescriptor, onSortChange: (sort) => {
|
|
153
|
+
onSortChange?.(serializeSort(sort));
|
|
154
|
+
} },
|
|
155
|
+
React__default.createElement(TableHeader, { className: "tds-data-table-header" },
|
|
156
|
+
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" })))),
|
|
157
|
+
visiblePreparedColumns.map(({ align, column }, index) => (React__default.createElement(Column, { key: column.name, id: column.name, isRowHeader: index === 0, className: classNames("tds-data-table-column", {
|
|
158
|
+
[`tds-data-table-column--align-${align}`]: align !== "start",
|
|
159
|
+
}), allowsSorting: column.sortable },
|
|
160
|
+
column.hideLabel ? (React__default.createElement("span", { className: "tds-data-table-column-label--hidden" }, column.headerLabel)) : (column.headerLabel),
|
|
161
|
+
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 }))))),
|
|
162
|
+
hasRowActions && (React__default.createElement(Column, { className: "tds-data-table-column tds-data-table-column--actions" },
|
|
163
|
+
React__default.createElement("span", { className: "tds-data-table-column-label--hidden" }, "Actions")))),
|
|
164
|
+
React__default.createElement(TableBody, { className: "tds-data-table-body", renderEmptyState: renderEmptyState }, data.map((row, rowIndex) => {
|
|
165
|
+
const rowKey = getRowKey(row, rowIndex, getRowId);
|
|
166
|
+
return (React__default.createElement(Row, { key: rowKey, id: rowKey, href: getRowLink?.(row), onAction: onRowClick ? () => onRowClick(row) : undefined, className: classNames("tds-data-table-row", {
|
|
167
|
+
"tds-data-table-row--interactive": rowsAreInteractive,
|
|
168
|
+
"tds-data-table-row--press-selects": rowPressSelects,
|
|
169
|
+
}) },
|
|
170
|
+
selectable && (React__default.createElement(Cell, { className: "tds-data-table-cell tds-data-table-cell--selectable" },
|
|
171
|
+
React__default.createElement(Checkbox, { slot: "selection", className: "tds-data-table-selectable-checkbox" }))),
|
|
172
|
+
visiblePreparedColumns.map((prepared) => (React__default.createElement(Cell, { key: prepared.column.name, ...cellBoundaryProps, "data-pii": prepared.column.pii || undefined, className: classNames("tds-data-table-cell", {
|
|
173
|
+
[`tds-data-table-cell--align-${prepared.align}`]: prepared.align !== "start",
|
|
174
|
+
"tds-data-table-cell--numeric": prepared.isNumeric,
|
|
175
|
+
}) }, prepared.renderCell(row)))),
|
|
176
|
+
hasRowActions && (React__default.createElement(Cell, { ...cellBoundaryProps, className: "tds-data-table-cell tds-data-table-cell--actions" },
|
|
177
|
+
React__default.createElement(RowActions, { actions: rowActions, row: row, rowKey: rowKey })))));
|
|
178
|
+
}))))),
|
|
179
|
+
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 })))))));
|
|
177
180
|
};
|
|
178
181
|
DataTable.displayName = "DataTable";
|
|
179
182
|
/**
|