@persona/design-system 0.8.1 → 0.8.2

package/dist/components/DataTable/index.mjs

@@ -1,34 +1,35 @@
 import { a as styled, r as css } from "../../styledComponentsInterop-NxwFjeA4.mjs";
-import { n as RouterLink } from "../../router-7FYDW80v.mjs";
+import { c as usePDSLocale, i as formatDateTime, l as usePDSStrings, r as formatDate, u as DEFAULT_COMMON_STRINGS } from "../../i18n-UiE7OC4k.mjs";
+import { n as RouterLink } from "../../router-COrZcVkf.mjs";
 import { semanticColor, semanticOnly } from "../../lib/semanticColor.mjs";
-import { i as Paragraph, o as TabularNumber } from "../../Text-BdluS7Fy.mjs";
+import { i as Paragraph, o as TabularNumber } from "../../Text-CSwFifQF.mjs";
 import "../../variables/transitions.mjs";
-import { t as TextUnderlineTooltip } from "../../Tooltip-C0FuZS1C.mjs";
+import { t as TextUnderlineTooltip } from "../../Tooltip-B-0VRuKT.mjs";
 import { isFocused } from "../../lib/pseudoClass.mjs";
 import { Z_INDICES } from "../../lib/zindex.mjs";
 import { focusOutline } from "../../mixins/focus.mjs";
 import "../../variables/effect.mjs";
 import { semanticScrollbar } from "../../mixins/scrollbar.mjs";
-import { t as HStack } from "../../Stack-CEPzs4Pb.mjs";
-import { n as Button, t as IconButton } from "../../IconButton-BHFCjvzs.mjs";
-import { n as Sticker } from "../../Sticker-B-fU8lgu.mjs";
-import { n as DropdownMenu_default } from "../../DropdownMenu-j8NWbAvM.mjs";
-import { t as Checkbox } from "../../Checkbox-GibG2pg5.mjs";
-import { t as Pagination_default } from "../../Pagination-6BDOn9bX.mjs";
-import { a as StickyTH, d as TableTR, f as TableTH, i as StickyTD, o as TableActionTD, p as TableRow, s as TableCell, t as TableLayout, u as TableTD } from "../../Table-msXj0glu.mjs";
-import { t as HoverCopyableField } from "../../HoverCopyableField-BARZLhfO.mjs";
-import { t as Link } from "../../Link-Bzm4AL5J.mjs";
-import { t as Pii_default } from "../../Pii-DhL1gblz.mjs";
-import { N as TableViewConfigurationDropdown, P as TableControls } from "../../TableControls-CqW_nyBY.mjs";
+import { t as HStack } from "../../Stack-BkC7FCdF.mjs";
+import { n as Button, t as IconButton } from "../../IconButton-H5vDZOdo.mjs";
+import { n as Sticker } from "../../Sticker-DdhSpTcV.mjs";
+import { n as DropdownMenu_default } from "../../DropdownMenu-CedsmO5h.mjs";
+import { t as Checkbox } from "../../Checkbox-BQC_SmBt.mjs";
+import { t as Pagination_default } from "../../Pagination-BEddsarh.mjs";
+import { a as StickyTH, d as TableTR, f as TableTH, i as StickyTD, o as TableActionTD, p as TableRow, s as TableCell, t as TableLayout, u as TableTD } from "../../Table--o4ZLRbb.mjs";
+import { t as HoverCopyableField } from "../../HoverCopyableField-CewUtxZl.mjs";
+import { t as Link } from "../../Link-BSuXrvTu.mjs";
+import { t as Pii_default } from "../../Pii-Ct7yDY7d.mjs";
+import { N as TableViewConfigurationDropdown, P as TableControls } from "../../TableControls-B5UGCoO-.mjs";
 import "./types.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
 import { createElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { DateTime } from "luxon";
 import { ChevronDownIcon, ChevronRightIcon, ImageIcon, MoreIcon, XIcon } from "@persona/icons";
 import { PlusIcon as PlusIcon$1 } from "@persona/icons/12px";
 import { kebabCase, startCase } from "lodash-es";
 import { createColumnHelper, flexRender, getCoreRowModel, getFilteredRowModel, getMemoOptions, getPaginationRowModel, getSortedRowModel, memo as memo$1, useReactTable } from "@tanstack/react-table";
-import { DateTime } from "luxon";
 //#region components/DataTable/constants.ts
 function getColumnWidths(compact) {
 	return {
@@ -53,16 +54,17 @@ const Bar = styled.div`
   min-width: 380px;
 `;
 const FloatingActionBar = ({ selectedCount, onClearSelection, extraContent, actions }) => {
+	const strings = usePDSStrings();
 	return /* @__PURE__ */ jsxs(Bar, { children: [/* @__PURE__ */ jsxs(HStack, {
 		align: "center",
 		children: [/* @__PURE__ */ jsx(IconButton, {
 			size: "sm",
 			onClick: onClearSelection,
-			"aria-label": "Clear selection",
+			"aria-label": strings.clearSelection,
 			children: /* @__PURE__ */ jsx(XIcon, {})
-		}), /* @__PURE__ */ jsxs(Paragraph, {
+		}), /* @__PURE__ */ jsx(Paragraph, {
 			color: "primary",
-			children: [selectedCount, " selected"]
+			children: strings.selectedItems(selectedCount)
 		})]
 	}), /* @__PURE__ */ jsxs(HStack, {
 		align: "center",
@@ -111,7 +113,7 @@ const FloatingActionBar = ({ selectedCount, onClearSelection, extraContent, acti
 const EmptyCellText = styled(Paragraph)`
   ${semanticOnly((tokens) => `color: ${tokens.FgSecondaryStatic};`)}
 `;
-const renderAsCheckbox = ({ rowId, isChecked, onChange, onValueChange, columnHeader, disabled, indeterminate }) => {
+const renderAsCheckbox = ({ rowId, isChecked, onChange, onValueChange, columnHeader, disabled, indeterminate, strings = DEFAULT_COMMON_STRINGS }) => {
 	return /* @__PURE__ */ jsx(Checkbox, {
 		checked: isChecked,
 		onChange: (e) => {
@@ -121,12 +123,12 @@ const renderAsCheckbox = ({ rowId, isChecked, onChange, onValueChange, columnHea
 		containerProps: { onClick: (e) => {
 			e.stopPropagation();
 		} },
-		"aria-label": columnHeader ? `${columnHeader} for row ${rowId}` : `Select row ${rowId}`,
+		"aria-label": columnHeader ? strings.selectRowForColumn(columnHeader, rowId) : strings.selectRow(rowId),
 		indeterminate,
 		disabled
 	});
 };
-const renderAsCheckboxHeader = ({ header, isChecked, isIndeterminate, onChange, onValueChange }) => {
+const renderAsCheckboxHeader = ({ header, isChecked, isIndeterminate, onChange, onValueChange, strings = DEFAULT_COMMON_STRINGS }) => {
 	const checkbox = /* @__PURE__ */ jsx(Checkbox, {
 		checked: isChecked,
 		indeterminate: isIndeterminate,
@@ -137,7 +139,7 @@ const renderAsCheckboxHeader = ({ header, isChecked, isIndeterminate, onChange,
 		containerProps: { onClick: (e) => {
 			e.stopPropagation();
 		} },
-		"aria-label": header ? `Select all ${header}` : "Select all"
+		"aria-label": header ? strings.selectAllOf(header) : strings.selectAll
 	});
 	if (header) return /* @__PURE__ */ jsxs(HStack, {
 		spacing: Spacing[3],
@@ -146,21 +148,27 @@ const renderAsCheckboxHeader = ({ header, isChecked, isIndeterminate, onChange,
 	});
 	return checkbox;
 };
-const DATE_FORMAT = "DD";
-const DATETIME_FORMAT = "MMM d, yyyy h:mm a";
 const renderAsString = (value) => {
 	if (value == null) return "";
 	return typeof value === "string" ? value : typeof value === "object" ? JSON.stringify(value, null, 2) : String(value);
 };
-const renderAsDate = (value, config) => {
+const renderAsDate = (value, config, locale) => {
 	if (value == null || typeof value !== "string") return "";
 	const date = DateTime.fromISO(value);
-	return date.isValid ? date.toFormat(config?.format ?? DATE_FORMAT) : "";
+	return date.isValid ? formatDate(date, {
+		locale,
+		format: config?.format,
+		showTimeZone: config?.showTimeZone
+	}) : "";
 };
-const renderAsDatetime = (value, config) => {
+const renderAsDatetime = (value, config, locale) => {
 	if (value == null || typeof value !== "string") return "";
 	const date = DateTime.fromISO(value);
-	return date.isValid ? date.toFormat(config?.format ?? DATETIME_FORMAT) : "";
+	return date.isValid ? formatDateTime(date, {
+		locale,
+		format: config?.format,
+		showTimeZone: config?.showTimeZone
+	}) : "";
 };
 const renderAsURL = (value) => {
 	if (value == null || typeof value !== "string" || value.length === 0) return "";
@@ -244,14 +252,14 @@ const renderAsPii = (row, config) => {
 		children: piiValueString
 	}), config.subComponent?.(row)] });
 };
-const renderAsLightweightImage = (value, config) => {
+const renderAsLightweightImage = (value, config, strings = DEFAULT_COMMON_STRINGS) => {
 	if (value == null || value === "" || Array.isArray(value) && value.length === 0) return config?.fallback ? /* @__PURE__ */ jsx(Fragment$1, { children: config.fallback }) : /* @__PURE__ */ jsx(EmptyImageContainer, {
 		$width: config?.width,
 		$height: config?.height,
 		"aria-label": config?.alt ?? "image",
 		children: /* @__PURE__ */ jsx(ImageIcon, {
 			size: 24,
-			"aria-label": "No image"
+			"aria-label": strings.noImage
 		})
 	});
 	return /* @__PURE__ */ jsx(LightweightImg, {
@@ -267,14 +275,14 @@ const renderAsLightweightImage = (value, config) => {
 * Hosts should supply their own `renderFormat` prop to DataTable for format types that require
 * application-specific components (e.g. tags, files, PII masking, status indicators).
 */
-const renderAsPDSFormat = (value, format, row) => {
+const renderAsPDSFormat = (value, format, row, options = {}) => {
 	switch (format?.type) {
-		case "date": return renderAsDate(value, format.config);
-		case "datetime": return renderAsDatetime(value, format.config);
+		case "date": return renderAsDate(value, format.config, options.locale);
+		case "datetime": return renderAsDatetime(value, format.config, options.locale);
 		case "sticker": return renderAsSticker(value, format.config);
 		case "url": return renderAsURL(value);
 		case "number": return renderAsNumber(value);
-		case "image": return renderAsLightweightImage(value, format.config);
+		case "image": return renderAsLightweightImage(value, format.config, options.strings);
 		case "checkbox": return "";
 		case "id": return renderAsCopyableString(value, {
 			copyable: true,
@@ -418,6 +426,9 @@ const ExpandColumnPlaceholder = styled.span`
 `;
 function useTableColumns({ columns, data, compact, sort, clientSearch, clientFiltering, expandColumnVisibility = "auto", showControls, enableRowSelection = false, enableSubRowSelection = true, rowActions, getRowId, expandedRows, toggleRowExpansion, canRowExpand, checkboxColumnStates, handleCheckboxCellChange, handleSelectAllCheckboxCell, getSelfAndNestedRowIds, handleRowSelectionWithShift, renderFormat }) {
 	const { EXPAND_COLUMN_WIDTH, SELECT_COLUMN_WIDTH, ACTION_COLUMN_WIDTH } = getColumnWidths(compact);
+	const strings = usePDSStrings();
+	const stringsRef = useRef(strings);
+	stringsRef.current = strings;
 	const rowActionsRef = useRef(rowActions);
 	rowActionsRef.current = rowActions;
 	const renderActionCell = useCallback((props) => {
@@ -434,7 +445,7 @@ function useTableColumns({ columns, data, compact, sort, clientSearch, clientFil
 					e.preventDefault();
 					e.stopPropagation();
 				},
-				"aria-label": `View actions for row ${props.row.index + 1}`,
+				"aria-label": stringsRef.current.viewRowActions(props.row.index + 1),
 				children: /* @__PURE__ */ jsx(MoreIcon, {})
 			}),
 			portal: true,
@@ -487,7 +498,8 @@ function useTableColumns({ columns, data, compact, sort, clientSearch, clientFil
 							header: column.header,
 							isChecked,
 							isIndeterminate,
-							onValueChange: (checked) => handleSelectAllCheckboxCell(columnId, checked)
+							onValueChange: (checked) => handleSelectAllCheckboxCell(columnId, checked),
+							strings
 						});
 					};
 					columnHelperOptions.cell = (props) => {
@@ -496,7 +508,8 @@ function useTableColumns({ columns, data, compact, sort, clientSearch, clientFil
 							rowId,
 							isChecked: (checkboxColumnStates[columnId] || /* @__PURE__ */ new Set()).has(rowId),
 							onValueChange: (rowId, checked) => handleCheckboxCellChange(columnId, rowId, checked),
-							columnHeader: typeof column.header === "string" ? column.header : void 0
+							columnHeader: typeof column.header === "string" ? column.header : void 0,
+							strings
 						});
 					};
 					columnHelperOptions.enableSorting = false;
@@ -530,14 +543,16 @@ function useTableColumns({ columns, data, compact, sort, clientSearch, clientFil
 			header: ({ table }) => renderAsCheckboxHeader({
 				isChecked: table.getIsAllRowsSelected(),
 				isIndeterminate: table.getIsSomeRowsSelected(),
-				onChange: table.getToggleAllRowsSelectedHandler()
+				onChange: table.getToggleAllRowsSelectedHandler(),
+				strings
 			}),
 			cell: ({ row, table }) => renderAsCheckbox({
 				rowId: row.id,
 				isChecked: row.getIsSelected(),
 				onChange: (e) => handleRowSelectionWithShift(row, table, e.target.checked, e.nativeEvent instanceof MouseEvent && e.nativeEvent.shiftKey),
 				indeterminate: enableSubRowSelection && row.getIsSomeSelected(),
-				disabled: !row.getCanSelect()
+				disabled: !row.getCanSelect(),
+				strings
 			})
 		}));
 		if (expandColumnVisibility === "always" || data.some(canRowExpand)) tableColumns.unshift(columnHelper.display({
@@ -609,7 +624,8 @@ function useTableColumns({ columns, data, compact, sort, clientSearch, clientFil
 		handleCheckboxCellChange,
 		handleSelectAllCheckboxCell,
 		handleRowSelectionWithShift,
-		renderFormat
+		renderFormat,
+		strings
 	]);
 }
 //#endregion
@@ -1030,23 +1046,30 @@ const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "a
 		} else clickedRow.toggleSelected(checked);
 		lastSelectedRowIdRef.current = clickedRow.id;
 	}, []);
+	const columnsWithFilterFn = useMemo(() => {
+		if (!clientFiltering) return columns;
+		return columns.map((column) => {
+			if (typeof column === "object" && column.filter != null && typeof column.filter === "object" && "type" in column.filter && typeof column.filter.type === "string") {
+				const filterType = column.filter.type;
+				return {
+					...column,
+					filter: {
+						...column.filter,
+						filterFn: getFilterFnName(filterType)
+					}
+				};
+			}
+			return column;
+		});
+	}, [columns, clientFiltering]);
+	const strings = usePDSStrings();
+	const locale = usePDSLocale();
+	const defaultRenderFormat = useCallback((value, format, row) => renderAsPDSFormat(value, format, row, {
+		locale,
+		strings
+	}), [locale, strings]);
 	const [tableColumns, columnOptions] = useTableColumns({
-		columns: useMemo(() => {
-			if (!clientFiltering) return columns;
-			return columns.map((column) => {
-				if (typeof column === "object" && column.filter != null && typeof column.filter === "object" && "type" in column.filter && typeof column.filter.type === "string") {
-					const filterType = column.filter.type;
-					return {
-						...column,
-						filter: {
-							...column.filter,
-							filterFn: getFilterFnName(filterType)
-						}
-					};
-				}
-				return column;
-			});
-		}, [columns, clientFiltering]),
+		columns: columnsWithFilterFn,
 		data,
 		compact,
 		sort,
@@ -1066,7 +1089,7 @@ const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "a
 		handleSelectAllCheckboxCell,
 		getSelfAndNestedRowIds,
 		handleRowSelectionWithShift,
-		renderFormat: renderFormat ?? renderAsPDSFormat
+		renderFormat: renderFormat ?? defaultRenderFormat
 	});
 	const expandRowsCustom = useCallback((rowModel) => {
 		const expandedRows = [];
@@ -1260,7 +1283,7 @@ const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "a
 							children: flexRender(header.column.columnDef.header, header.getContext())
 						}) : flexRender(header.column.columnDef.header, header.getContext()));
 					}) }),
-					nullState: /* @__PURE__ */ jsx("p", { children: "No results found." }),
+					nullState: /* @__PURE__ */ jsx("p", { children: strings.noResults }),
 					isLoading,
 					size: compact ? "sm" : void 0,
 					children: columns.length === 0 ? /* @__PURE__ */ jsx(TableTR, {
@@ -1271,7 +1294,7 @@ const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "a
 								size: "lg",
 								weight: "bold",
 								color: "primary",
-								children: "No columns configured"
+								children: strings.noColumnsConfigured
 							})
 						})
 					}) : rows.length === 0 ? /* @__PURE__ */ jsx(TableTR, {
@@ -1282,7 +1305,7 @@ const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "a
 								size: "lg",
 								weight: "bold",
 								color: "primary",
-								children: emptyState?.title || (hasActiveFilters ? "No results found. Try changing your filters." : "No results found.")
+								children: emptyState?.title || (hasActiveFilters ? strings.noResultsTryFilters : strings.noResults)
 							}), emptyState?.description && /* @__PURE__ */ jsx(Paragraph, {
 								size: "md",
 								color: "secondary",