@planningcenter/tapestry 4.3.0-rc.4 → 4.3.0-rc.6
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/ResultsCount.d.ts +15 -0
- package/dist/components/DataTable/ResultsCount.d.ts.map +1 -1
- package/dist/components/DataTable/ResultsCount.js +13 -3
- package/dist/components/DataTable/ResultsCount.js.map +1 -1
- package/dist/components/DataTable/TableActions.d.ts +1 -1
- package/dist/components/DataTable/TableActions.d.ts.map +1 -1
- package/dist/components/DataTable/TableActions.js +4 -9
- package/dist/components/DataTable/TableActions.js.map +1 -1
- package/dist/reactRender.css +23 -23
- package/dist/reactRender.css.map +1 -1
- package/dist/reactRenderLegacy.css +23 -23
- package/dist/reactRenderLegacy.css.map +1 -1
- package/package.json +2 -2
|
@@ -51,4 +51,19 @@ export declare const ResultsCount: {
|
|
|
51
51
|
({ id, resultNoun, selectable, selectedCount, totalCount, }: ResultsCountProps): React.JSX.Element | null;
|
|
52
52
|
displayName: string;
|
|
53
53
|
};
|
|
54
|
+
/**
|
|
55
|
+
* Formats a count for display, e.g. `1234` as `"1,234"`. Shared so every count
|
|
56
|
+
* rendered above the table groups digits the same way.
|
|
57
|
+
*/
|
|
58
|
+
export declare function formatCount(count: number): string;
|
|
59
|
+
/**
|
|
60
|
+
* Picks the singular or plural noun for `count` (singular only when `count` is
|
|
61
|
+
* 1, matching English pluralization).
|
|
62
|
+
* `resultNoun` may be a string (the plural appends `"s"`), a
|
|
63
|
+
* `[singular, plural]` tuple, or `true` (the noun defaults to `"result"`).
|
|
64
|
+
*
|
|
65
|
+
* Shared with the table actions' `aria-label` suffix so every count rendered
|
|
66
|
+
* above the table pluralizes identically.
|
|
67
|
+
*/
|
|
68
|
+
export declare function resolveNoun(count: number, resultNoun: Exclude<ResultNoun, false>): string;
|
|
54
69
|
//# sourceMappingURL=ResultsCount.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ResultsCount.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/ResultsCount.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;AAE9E,MAAM,WAAW,iBAAiB;IAChC,wFAAwF;IACxF,EAAE,EAAE,MAAM,CAAA;IACV;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,uCAAuC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAA;CACnB;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,UAAU,EAAE,UAAU,GAAG,SAAS,GAAG,OAAO,CAE3E;AAED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CACpC,UAAU,EAAE,UAAU,GAAG,SAAS,GACjC,MAAM,GAAG,SAAS,CAIpB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY;iEAMtB,iBAAiB;;CAuBnB,CAAA"}
|
|
1
|
+
{"version":3,"file":"ResultsCount.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/ResultsCount.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;AAE9E,MAAM,WAAW,iBAAiB;IAChC,wFAAwF;IACxF,EAAE,EAAE,MAAM,CAAA;IACV;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,uCAAuC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAA;CACnB;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,UAAU,EAAE,UAAU,GAAG,SAAS,GAAG,OAAO,CAE3E;AAED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CACpC,UAAU,EAAE,UAAU,GAAG,SAAS,GACjC,MAAM,GAAG,SAAS,CAIpB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY;iEAMtB,iBAAiB;;CAuBnB,CAAA;AAMD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEjD;AAmBD;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CACzB,KAAK,EAAE,MAAM,EACb,UAAU,EAAE,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,GACrC,MAAM,CAOR"}
|
|
@@ -39,7 +39,7 @@ const ResultsCount = ({ id, resultNoun, selectable, selectedCount = 0, totalCoun
|
|
|
39
39
|
// total row count.
|
|
40
40
|
const hasSelection = Boolean(selectable && selectedCount);
|
|
41
41
|
const label = hasSelection
|
|
42
|
-
? `${
|
|
42
|
+
? `${formatCount(selectedCount)} of ${formatCount(totalCount)}`
|
|
43
43
|
: getResultsCountLabel(totalCount, resultNoun);
|
|
44
44
|
return (React__default.createElement("p", { id: id, className: "tds-data-table-results-count" },
|
|
45
45
|
label,
|
|
@@ -52,6 +52,13 @@ const ResultsCount = ({ id, resultNoun, selectable, selectedCount = 0, totalCoun
|
|
|
52
52
|
};
|
|
53
53
|
ResultsCount.displayName = "ResultsCount";
|
|
54
54
|
const numberFormatter = new Intl.NumberFormat();
|
|
55
|
+
/**
|
|
56
|
+
* Formats a count for display, e.g. `1234` as `"1,234"`. Shared so every count
|
|
57
|
+
* rendered above the table groups digits the same way.
|
|
58
|
+
*/
|
|
59
|
+
function formatCount(count) {
|
|
60
|
+
return numberFormatter.format(count);
|
|
61
|
+
}
|
|
55
62
|
/**
|
|
56
63
|
* Builds the results-count label, e.g. `"1 result"`, `"1,234 results"`, or
|
|
57
64
|
* `"2 people"`. The count is formatted with `Intl.NumberFormat` and the
|
|
@@ -62,7 +69,7 @@ const numberFormatter = new Intl.NumberFormat();
|
|
|
62
69
|
*/
|
|
63
70
|
function getResultsCountLabel(count, resultNoun) {
|
|
64
71
|
const noun = resolveNoun(count, resultNoun);
|
|
65
|
-
const formattedCount =
|
|
72
|
+
const formattedCount = formatCount(count);
|
|
66
73
|
return `${formattedCount} ${noun}`;
|
|
67
74
|
}
|
|
68
75
|
/**
|
|
@@ -70,6 +77,9 @@ function getResultsCountLabel(count, resultNoun) {
|
|
|
70
77
|
* 1, matching English pluralization).
|
|
71
78
|
* `resultNoun` may be a string (the plural appends `"s"`), a
|
|
72
79
|
* `[singular, plural]` tuple, or `true` (the noun defaults to `"result"`).
|
|
80
|
+
*
|
|
81
|
+
* Shared with the table actions' `aria-label` suffix so every count rendered
|
|
82
|
+
* above the table pluralizes identically.
|
|
73
83
|
*/
|
|
74
84
|
function resolveNoun(count, resultNoun) {
|
|
75
85
|
const [singular, plural] = Array.isArray(resultNoun)
|
|
@@ -80,5 +90,5 @@ function resolveNoun(count, resultNoun) {
|
|
|
80
90
|
return count === 1 ? singular : plural;
|
|
81
91
|
}
|
|
82
92
|
|
|
83
|
-
export { ResultsCount, hasResultsCount, resolveResultNounLabel };
|
|
93
|
+
export { ResultsCount, formatCount, hasResultsCount, resolveNoun, resolveResultNounLabel };
|
|
84
94
|
//# sourceMappingURL=ResultsCount.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ResultsCount.js","sources":["../../../src/components/DataTable/ResultsCount.tsx"],"sourcesContent":["import React from \"react\"\n\n/**\n * A noun for the results count. A string uses it as the singular and appends\n * `\"s\"` for the plural; a `[singular, plural]` tuple supplies an irregular\n * plural; `true` defaults the noun to `\"result\"`; `false` renders no count.\n */\nexport type ResultNoun = boolean | string | [singular: string, plural: string]\n\nexport interface ResultsCountProps {\n /** An `id` for the rendered element so the table can link it via `aria-describedby`. */\n id: string\n /**\n * The noun (and whether to render a count at all). See {@link ResultNoun}.\n * When `false` or omitted, nothing renders.\n */\n resultNoun?: ResultNoun\n /** Whether the table is selectable. */\n selectable?: boolean\n /** The number of currently selected rows. */\n selectedCount?: number\n /**\n * The total number of results: the caller's explicit `resultCount` when\n * supplied, otherwise `data.length`.\n */\n totalCount: number\n}\n\n/**\n * Whether a {@link ResultsCount} will render anything for the given\n * `resultNoun`. A count is shown only when a noun is supplied, so callers can\n * use this to decide whether to link the count via `aria-describedby`.\n */\nexport function hasResultsCount(resultNoun: ResultNoun | undefined): boolean {\n return Boolean(resultNoun)\n}\n\n/**\n * Resolves a {@link ResultNoun} to a plain string usable as the table's\n * `aria-label`, e.g. `\"people\"` or `\"items\"`. Uses the plural form — appending\n * `\"s\"` to a string noun and taking the second element of a `[singular,\n * plural]` tuple — to match the count label. Returns `undefined` when no\n * meaningful noun is supplied — including the `true` default, which carries no\n * caller-provided label — so callers can fall back to their own `aria-label`.\n */\nexport function resolveResultNounLabel(\n resultNoun: ResultNoun | undefined\n): string | undefined {\n if (!resultNoun || resultNoun === true) return undefined\n // A count other than 1 selects the plural form.\n return resolveNoun(2, resultNoun)\n}\n\n/**\n * Renders the results count displayed above the table, e.g. `\"1 result\"`,\n * `\"1,234 results\"`, or `\"2 people\"`. When the table is `selectable` and rows\n * are selected, the count reflects the selection as `\"{selected} of {total}\"`,\n * e.g. `\"2 of 100\"`. That terse visible form is ambiguous on its own, so a\n * visually-hidden suffix names what the numbers refer to for assistive tech —\n * `\"2 of 100 people selected\"`. Renders nothing when `resultNoun` is `false` or\n * omitted.\n */\nexport const ResultsCount = ({\n id,\n resultNoun,\n selectable,\n selectedCount = 0,\n totalCount,\n}: ResultsCountProps) => {\n if (!resultNoun) return null\n\n // When the table is selectable and rows are selected, the count reflects the\n // selection as `\"{selected} of {total}\"` (e.g. `\"2 of 100\"`) rather than the\n // total row count.\n const hasSelection = Boolean(selectable && selectedCount)\n const label = hasSelection\n ? `${
|
|
1
|
+
{"version":3,"file":"ResultsCount.js","sources":["../../../src/components/DataTable/ResultsCount.tsx"],"sourcesContent":["import React from \"react\"\n\n/**\n * A noun for the results count. A string uses it as the singular and appends\n * `\"s\"` for the plural; a `[singular, plural]` tuple supplies an irregular\n * plural; `true` defaults the noun to `\"result\"`; `false` renders no count.\n */\nexport type ResultNoun = boolean | string | [singular: string, plural: string]\n\nexport interface ResultsCountProps {\n /** An `id` for the rendered element so the table can link it via `aria-describedby`. */\n id: string\n /**\n * The noun (and whether to render a count at all). See {@link ResultNoun}.\n * When `false` or omitted, nothing renders.\n */\n resultNoun?: ResultNoun\n /** Whether the table is selectable. */\n selectable?: boolean\n /** The number of currently selected rows. */\n selectedCount?: number\n /**\n * The total number of results: the caller's explicit `resultCount` when\n * supplied, otherwise `data.length`.\n */\n totalCount: number\n}\n\n/**\n * Whether a {@link ResultsCount} will render anything for the given\n * `resultNoun`. A count is shown only when a noun is supplied, so callers can\n * use this to decide whether to link the count via `aria-describedby`.\n */\nexport function hasResultsCount(resultNoun: ResultNoun | undefined): boolean {\n return Boolean(resultNoun)\n}\n\n/**\n * Resolves a {@link ResultNoun} to a plain string usable as the table's\n * `aria-label`, e.g. `\"people\"` or `\"items\"`. Uses the plural form — appending\n * `\"s\"` to a string noun and taking the second element of a `[singular,\n * plural]` tuple — to match the count label. Returns `undefined` when no\n * meaningful noun is supplied — including the `true` default, which carries no\n * caller-provided label — so callers can fall back to their own `aria-label`.\n */\nexport function resolveResultNounLabel(\n resultNoun: ResultNoun | undefined\n): string | undefined {\n if (!resultNoun || resultNoun === true) return undefined\n // A count other than 1 selects the plural form.\n return resolveNoun(2, resultNoun)\n}\n\n/**\n * Renders the results count displayed above the table, e.g. `\"1 result\"`,\n * `\"1,234 results\"`, or `\"2 people\"`. When the table is `selectable` and rows\n * are selected, the count reflects the selection as `\"{selected} of {total}\"`,\n * e.g. `\"2 of 100\"`. That terse visible form is ambiguous on its own, so a\n * visually-hidden suffix names what the numbers refer to for assistive tech —\n * `\"2 of 100 people selected\"`. Renders nothing when `resultNoun` is `false` or\n * omitted.\n */\nexport const ResultsCount = ({\n id,\n resultNoun,\n selectable,\n selectedCount = 0,\n totalCount,\n}: ResultsCountProps) => {\n if (!resultNoun) return null\n\n // When the table is selectable and rows are selected, the count reflects the\n // selection as `\"{selected} of {total}\"` (e.g. `\"2 of 100\"`) rather than the\n // total row count.\n const hasSelection = Boolean(selectable && selectedCount)\n const label = hasSelection\n ? `${formatCount(selectedCount)} of ${formatCount(totalCount)}`\n : getResultsCountLabel(totalCount, resultNoun)\n\n return (\n <p id={id} className=\"tds-data-table-results-count\">\n {label}\n {hasSelection && (\n // The noun agrees with the total rather than the selected count, so a\n // single selection out of many still reads `\"1 of 57 people selected\"`.\n <span className=\"tds-data-table-results-count-label--hidden\">\n {`${resolveNoun(totalCount, resultNoun)} selected`}\n </span>\n )}\n </p>\n )\n}\n\nResultsCount.displayName = \"ResultsCount\"\n\nconst numberFormatter = new Intl.NumberFormat()\n\n/**\n * Formats a count for display, e.g. `1234` as `\"1,234\"`. Shared so every count\n * rendered above the table groups digits the same way.\n */\nexport function formatCount(count: number): string {\n return numberFormatter.format(count)\n}\n\n/**\n * Builds the results-count label, e.g. `\"1 result\"`, `\"1,234 results\"`, or\n * `\"2 people\"`. The count is formatted with `Intl.NumberFormat` and the\n * singular noun is used only when the count is 1, every other count uses the\n * plural. `resultNoun` may be a string (the plural appends `\"s\"`), a\n * `[singular, plural]` tuple (the plural is supplied explicitly), or `true`\n * (the noun defaults to `\"result\"`).\n */\nfunction getResultsCountLabel(\n count: number,\n resultNoun: Exclude<ResultNoun, false>\n): string {\n const noun = resolveNoun(count, resultNoun)\n const formattedCount = formatCount(count)\n return `${formattedCount} ${noun}`\n}\n\n/**\n * Picks the singular or plural noun for `count` (singular only when `count` is\n * 1, matching English pluralization).\n * `resultNoun` may be a string (the plural appends `\"s\"`), a\n * `[singular, plural]` tuple, or `true` (the noun defaults to `\"result\"`).\n *\n * Shared with the table actions' `aria-label` suffix so every count rendered\n * above the table pluralizes identically.\n */\nexport function resolveNoun(\n count: number,\n resultNoun: Exclude<ResultNoun, false>\n): string {\n const [singular, plural] = Array.isArray(resultNoun)\n ? resultNoun\n : resultNoun === true\n ? [\"result\", \"results\"]\n : [resultNoun, `${resultNoun}s`]\n return count === 1 ? singular : plural\n}\n"],"names":["React"],"mappings":";;AA4BA;;;;AAIG;AACG,SAAU,eAAe,CAAC,UAAkC,EAAA;AAChE,IAAA,OAAO,OAAO,CAAC,UAAU,CAAC;AAC5B;AAEA;;;;;;;AAOG;AACG,SAAU,sBAAsB,CACpC,UAAkC,EAAA;AAElC,IAAA,IAAI,CAAC,UAAU,IAAI,UAAU,KAAK,IAAI;AAAE,QAAA,OAAO,SAAS;;AAExD,IAAA,OAAO,WAAW,CAAC,CAAC,EAAE,UAAU,CAAC;AACnC;AAEA;;;;;;;;AAQG;AACI,MAAM,YAAY,GAAG,CAAC,EAC3B,EAAE,EACF,UAAU,EACV,UAAU,EACV,aAAa,GAAG,CAAC,EACjB,UAAU,GACQ,KAAI;AACtB,IAAA,IAAI,CAAC,UAAU;AAAE,QAAA,OAAO,IAAI;;;;IAK5B,MAAM,YAAY,GAAG,OAAO,CAAC,UAAU,IAAI,aAAa,CAAC;IACzD,MAAM,KAAK,GAAG;UACV,CAAA,EAAG,WAAW,CAAC,aAAa,CAAC,CAAA,IAAA,EAAO,WAAW,CAAC,UAAU,CAAC,CAAA;AAC7D,UAAE,oBAAoB,CAAC,UAAU,EAAE,UAAU,CAAC;IAEhD,QACEA,oCAAG,EAAE,EAAE,EAAE,EAAE,SAAS,EAAC,8BAA8B,EAAA;QAChD,KAAK;AACL,QAAA,YAAY;;;QAGXA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,4CAA4C,EAAA;;YACnD,CAAA,EAAG,WAAW,CAAC,UAAU,EAAE,UAAU,CAAC,CAAA,SAAA,CAAW,CACnD,CACR,CACC;AAER;AAEA,YAAY,CAAC,WAAW,GAAG,cAAc;AAEzC,MAAM,eAAe,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE;AAE/C;;;AAGG;AACG,SAAU,WAAW,CAAC,KAAa,EAAA;AACvC,IAAA,OAAO,eAAe,CAAC,MAAM,CAAC,KAAK,CAAC;AACtC;AAEA;;;;;;;AAOG;AACH,SAAS,oBAAoB,CAC3B,KAAa,EACb,UAAsC,EAAA;IAEtC,MAAM,IAAI,GAAG,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC;AAC3C,IAAA,MAAM,cAAc,GAAG,WAAW,CAAC,KAAK,CAAC;AACzC,IAAA,OAAO,CAAA,EAAG,cAAc,CAAA,CAAA,EAAI,IAAI,EAAE;AACpC;AAEA;;;;;;;;AAQG;AACG,SAAU,WAAW,CACzB,KAAa,EACb,UAAsC,EAAA;IAEtC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,UAAU;AACjD,UAAE;UACA,UAAU,KAAK;AACf,cAAE,CAAC,QAAQ,EAAE,SAAS;cACpB,CAAC,UAAU,EAAE,GAAG,UAAU,CAAA,CAAA,CAAG,CAAC;IACpC,OAAO,KAAK,KAAK,CAAC,GAAG,QAAQ,GAAG,MAAM;AACxC;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { type ReactNode } from "react";
|
|
2
|
-
import type
|
|
2
|
+
import { type ResultNoun } from "./ResultsCount";
|
|
3
3
|
/**
|
|
4
4
|
* A table action rendered as an `IconButton` in the button group above the
|
|
5
5
|
* table. Replaces the original RFC's `{ buttonProps; callback }` shape with a
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableActions.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/TableActions.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAE7C,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"TableActions.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/TableActions.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAE7C,OAAO,EAA4B,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAE1E;;;;;GAKG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,wFAAwF;IACxF,QAAQ,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAA;IACtD,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yDAAyD;IACzD,IAAI,EAAE,SAAS,CAAA;IACf,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAA;IACb,8EAA8E;IAC9E,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAA;CACrD,CAAA;AAED,MAAM,WAAW,iBAAiB;IAChC,4DAA4D;IAC5D,OAAO,EAAE,WAAW,EAAE,CAAA;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,mFAAmF;IACnF,YAAY,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;CAClC;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY;6CAItB,iBAAiB;;CAsBnB,CAAA"}
|
|
@@ -8,6 +8,7 @@ import '../button/PageHeaderActionsDropdownButton.js';
|
|
|
8
8
|
import { ButtonGroup } from '../button-group/ButtonGroup.js';
|
|
9
9
|
import { Tooltip } from '../internal/tooltip/Tooltip.js';
|
|
10
10
|
import React__default from 'react';
|
|
11
|
+
import { resolveNoun, formatCount } from './ResultsCount.js';
|
|
11
12
|
|
|
12
13
|
/**
|
|
13
14
|
* Renders the table actions as an `IconButton` group displayed directly after
|
|
@@ -25,7 +26,6 @@ const TableActions = ({ actions, resultNoun, selectedKeys, }) => {
|
|
|
25
26
|
} }))))));
|
|
26
27
|
};
|
|
27
28
|
TableActions.displayName = "TableActions";
|
|
28
|
-
const numberFormatter = new Intl.NumberFormat();
|
|
29
29
|
/**
|
|
30
30
|
* The count/noun suffix appended to each table action's `aria-label` when rows
|
|
31
31
|
* are selected, e.g. `" (2 selected people)"` — so `"Email"` reads as
|
|
@@ -36,14 +36,9 @@ const numberFormatter = new Intl.NumberFormat();
|
|
|
36
36
|
function getTableActionCountSuffix(count, resultNoun) {
|
|
37
37
|
if (!count)
|
|
38
38
|
return "";
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
? [resultNoun, `${resultNoun}s`]
|
|
43
|
-
: ["result", "results"];
|
|
44
|
-
const noun = count === 1 ? singular : plural;
|
|
45
|
-
const formattedCount = numberFormatter.format(count);
|
|
46
|
-
return ` (${formattedCount} selected ${noun})`;
|
|
39
|
+
// An absent or `true` noun both default to `"result"`/`"results"`.
|
|
40
|
+
const noun = resolveNoun(count, resultNoun || true);
|
|
41
|
+
return ` (${formatCount(count)} selected ${noun})`;
|
|
47
42
|
}
|
|
48
43
|
|
|
49
44
|
export { TableActions };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableActions.js","sources":["../../../src/components/DataTable/TableActions.tsx"],"sourcesContent":["import { IconButton } from \"@components/button\"\nimport { ButtonGroup } from \"@components/button-group\"\nimport { Tooltip } from \"@components/internal/tooltip\"\nimport React, { type ReactNode } from \"react\"\n\nimport type
|
|
1
|
+
{"version":3,"file":"TableActions.js","sources":["../../../src/components/DataTable/TableActions.tsx"],"sourcesContent":["import { IconButton } from \"@components/button\"\nimport { ButtonGroup } from \"@components/button-group\"\nimport { Tooltip } from \"@components/internal/tooltip\"\nimport React, { type ReactNode } from \"react\"\n\nimport { formatCount, resolveNoun, type ResultNoun } from \"./ResultsCount\"\n\n/**\n * A table action rendered as an `IconButton` in the button group above the\n * table. Replaces the original RFC's `{ buttonProps; callback }` shape with a\n * narrower, more controllable API so the design can evolve without exposing the\n * full button surface.\n */\nexport type TableAction = {\n /** Called with the keys of the currently selected rows when the action is triggered. */\n callback?: (selectedKeys: (number | string)[]) => void\n /** Whether the action's button is disabled. */\n disabled?: boolean\n /** The icon rendered inside the action's icon button. */\n icon: ReactNode\n /** Accessible label for the icon-only action button. */\n label: string\n /** Standard click handler, invoked with the click event before `callback`. */\n onClick?: React.MouseEventHandler<HTMLButtonElement>\n}\n\nexport interface TableActionsProps {\n /** The table actions to render as an `IconButton` group. */\n actions: TableAction[]\n /**\n * The noun used to describe the selection in each action's `aria-label`.\n * See {@link ResultNoun}.\n */\n resultNoun?: ResultNoun\n /** The keys of the currently selected rows, passed to each action's `callback`. */\n selectedKeys: (number | string)[]\n}\n\n/**\n * Renders the table actions as an `IconButton` group displayed directly after\n * the results count, above the table. Each entry becomes an icon button whose\n * `callback` receives the keys of the currently selected rows.\n */\nexport const TableActions = ({\n actions,\n resultNoun,\n selectedKeys,\n}: TableActionsProps) => {\n // The count/noun suffix is the same for every table action, so compute it once\n // here rather than per-button inside the map below.\n const countSuffix = getTableActionCountSuffix(selectedKeys.length, resultNoun)\n\n return (\n <ButtonGroup aria-label=\"Table actions\">\n {actions.map(({ callback, disabled, icon, label, onClick }) => (\n <Tooltip key={label} content={label} placement=\"bottom\">\n <IconButton\n aria-label={`${label}${countSuffix}`}\n disabled={disabled}\n icon={icon}\n onClick={(event) => {\n onClick?.(event)\n callback?.(selectedKeys)\n }}\n />\n </Tooltip>\n ))}\n </ButtonGroup>\n )\n}\n\nTableActions.displayName = \"TableActions\"\n\n/**\n * The count/noun suffix appended to each table action's `aria-label` when rows\n * are selected, e.g. `\" (2 selected people)\"` — so `\"Email\"` reads as\n * `\"Email (2 selected people)\"`. Empty when nothing is selected. Falls back to\n * the default `\"result\"` noun when `resultNoun` isn't provided. Shared across\n * every action, so it's computed once rather than per-button.\n */\nfunction getTableActionCountSuffix(\n count: number,\n resultNoun: ResultNoun | undefined\n): string {\n if (!count) return \"\"\n // An absent or `true` noun both default to `\"result\"`/`\"results\"`.\n const noun = resolveNoun(count, resultNoun || true)\n return ` (${formatCount(count)} selected ${noun})`\n}\n"],"names":["React"],"mappings":";;;;;;;;;;;;AAsCA;;;;AAIG;AACI,MAAM,YAAY,GAAG,CAAC,EAC3B,OAAO,EACP,UAAU,EACV,YAAY,GACM,KAAI;;;IAGtB,MAAM,WAAW,GAAG,yBAAyB,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC;AAE9E,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAA,YAAA,EAAY,eAAe,IACpC,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MACxDA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAC,QAAQ,EAAA;QACrDA,cAAA,CAAA,aAAA,CAAC,UAAU,kBACG,CAAA,EAAG,KAAK,GAAG,WAAW,CAAA,CAAE,EACpC,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,CAAC,KAAK,KAAI;AACjB,gBAAA,OAAO,GAAG,KAAK,CAAC;AAChB,gBAAA,QAAQ,GAAG,YAAY,CAAC;AAC1B,YAAA,CAAC,GACD,CACM,CACX,CAAC,CACU;AAElB;AAEA,YAAY,CAAC,WAAW,GAAG,cAAc;AAEzC;;;;;;AAMG;AACH,SAAS,yBAAyB,CAChC,KAAa,EACb,UAAkC,EAAA;AAElC,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,OAAO,EAAE;;IAErB,MAAM,IAAI,GAAG,WAAW,CAAC,KAAK,EAAE,UAAU,IAAI,IAAI,CAAC;IACnD,OAAO,CAAA,EAAA,EAAK,WAAW,CAAC,KAAK,CAAC,CAAA,UAAA,EAAa,IAAI,GAAG;AACpD;;;;"}
|
package/dist/reactRender.css
CHANGED
|
@@ -988,29 +988,6 @@
|
|
|
988
988
|
--tds-checkbox-group-description-line-height:1.3;
|
|
989
989
|
}
|
|
990
990
|
|
|
991
|
-
|
|
992
|
-
:is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
|
|
993
|
-
-webkit-appearance:none;
|
|
994
|
-
appearance:none;
|
|
995
|
-
}
|
|
996
|
-
|
|
997
|
-
[type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
|
|
998
|
-
inline-size:1em;
|
|
999
|
-
block-size:2em;
|
|
1000
|
-
}
|
|
1001
|
-
@supports (field-sizing: content){
|
|
1002
|
-
.tds-input--auto-width{
|
|
1003
|
-
inline-size:-moz-fit-content;
|
|
1004
|
-
inline-size:fit-content;
|
|
1005
|
-
min-inline-size:min(100%, 122px);
|
|
1006
|
-
}
|
|
1007
|
-
|
|
1008
|
-
.tds-input--auto-width input{
|
|
1009
|
-
field-sizing:content;
|
|
1010
|
-
inline-size:auto;
|
|
1011
|
-
}
|
|
1012
|
-
}
|
|
1013
|
-
|
|
1014
991
|
.tds-modal-overlay{
|
|
1015
992
|
--tds-modal-min-margin-block:var(--t-spacing-3);
|
|
1016
993
|
|
|
@@ -1174,6 +1151,29 @@
|
|
|
1174
1151
|
}
|
|
1175
1152
|
}
|
|
1176
1153
|
|
|
1154
|
+
|
|
1155
|
+
:is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
|
|
1156
|
+
-webkit-appearance:none;
|
|
1157
|
+
appearance:none;
|
|
1158
|
+
}
|
|
1159
|
+
|
|
1160
|
+
[type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
|
|
1161
|
+
inline-size:1em;
|
|
1162
|
+
block-size:2em;
|
|
1163
|
+
}
|
|
1164
|
+
@supports (field-sizing: content){
|
|
1165
|
+
.tds-input--auto-width{
|
|
1166
|
+
inline-size:-moz-fit-content;
|
|
1167
|
+
inline-size:fit-content;
|
|
1168
|
+
min-inline-size:min(100%, 122px);
|
|
1169
|
+
}
|
|
1170
|
+
|
|
1171
|
+
.tds-input--auto-width input{
|
|
1172
|
+
field-sizing:content;
|
|
1173
|
+
inline-size:auto;
|
|
1174
|
+
}
|
|
1175
|
+
}
|
|
1176
|
+
|
|
1177
1177
|
.tds-radio{
|
|
1178
1178
|
--tds-radio-font-size:var(--t-font-size-md);
|
|
1179
1179
|
--tds-radio-cursor:pointer;
|