@persona/design-system 0.5.0 → 0.5.1

package/dist/components/DataTable/index.mjs

@@ -1,28 +1,30 @@
-import { a as styled, r as css } from "../../styledComponentsInterop-8zScIQyC.mjs";
-import { isFocused } from "../../lib/pseudoClass.mjs";
-import "../../variables/effect.mjs";
+import { a as styled, r as css } from "../../styledComponentsInterop-NxwFjeA4.mjs";
+import { semanticColor, semanticOnly } from "../../lib/semanticColor.mjs";
+import { i as Paragraph, o as TabularNumber } from "../../Text-Dn_p7ZvT.mjs";
 import "../../variables/transitions.mjs";
-import { i as Paragraph, o as TabularNumber } from "../../Text-B0orb-cZ.mjs";
-import { t as TextUnderlineTooltip } from "../../Tooltip-DSKGD33G.mjs";
+import { t as TextUnderlineTooltip } from "../../Tooltip-BsuYG0fw.mjs";
+import { isFocused } from "../../lib/pseudoClass.mjs";
 import { Z_INDICES } from "../../lib/zindex.mjs";
-import { t as HStack } from "../../Stack-Bre2oiov.mjs";
-import { n as Button, t as IconButton } from "../../IconButton-BnSEV7eR.mjs";
-import { n as Sticker } from "../../Sticker-By3F8Aip.mjs";
-import { n as DropdownMenu_default } from "../../DropdownMenu-CyxizDxJ.mjs";
-import { t as Checkbox } from "../../Checkbox-DwZEsi7x.mjs";
-import { t as Pagination_default } from "../../Pagination-CVRTcKSG.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-nWd5ZVbm.mjs";
-import { t as HoverCopyableField } from "../../HoverCopyableField-Bgt639FR.mjs";
-import { t as Pii_default } from "../../Pii-CA7aCuYT.mjs";
-import { N as TableViewConfigurationDropdown, P as TableControls } from "../../TableControls-BnesnTue.mjs";
+import { focusOutline } from "../../mixins/focus.mjs";
+import "../../variables/effect.mjs";
+import { t as HStack } from "../../Stack-BqQndGI9.mjs";
+import { n as Button, t as IconButton } from "../../IconButton-CnJNIJVQ.mjs";
+import { n as Sticker } from "../../Sticker-BDyejPZa.mjs";
+import { n as DropdownMenu_default } from "../../DropdownMenu-DovtBJBs.mjs";
+import { t as Checkbox } from "../../Checkbox-CyeitZ5q.mjs";
+import { t as Pagination_default } from "../../Pagination-wjr3W3xf.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-CqIi5mVF.mjs";
+import { t as HoverCopyableField } from "../../HoverCopyableField-WP6DPjy1.mjs";
+import { t as Pii_default } from "../../Pii-Bm-qkweh.mjs";
+import { N as TableViewConfigurationDropdown, P as TableControls } from "../../TableControls-DplArh-9.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 { ChevronDownIcon, ChevronRightIcon, ImageIcon, MoreIcon, XIcon } from "@persona/icons";
 import { PlusIcon as PlusIcon$1 } from "@persona/icons/12px";
-import { Link } from "react-router-dom";
 import { kebabCase, startCase } from "lodash-es";
+import { Link } from "react-router-dom";
 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
@@ -40,7 +42,7 @@ const Bar = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background-color: ${({ theme }) => theme.color.background.primary};
+  background-color: ${({ theme }) => semanticColor(theme, "SurfacePrimary", theme.color.background.primary)};
   width: 100%;
   padding: ${Spacing[2]};
   border-radius: ${BorderRadius.Md};
@@ -104,6 +106,9 @@ const FloatingActionBar = ({ selectedCount, onClearSelection, extraContent, acti
 };
 //#endregion
 //#region components/DataTable/helpers.tsx
+const EmptyCellText = styled(Paragraph)`
+  ${semanticOnly((tokens) => `color: ${tokens.FgSecondaryStatic};`)}
+`;
 const renderAsCheckbox = ({ rowId, isChecked, onChange, onValueChange, columnHeader, disabled, indeterminate }) => {
 	return /* @__PURE__ */ jsx(Checkbox, {
 		checked: isChecked,
@@ -208,11 +213,11 @@ const EmptyImageContainer = styled.div`
   align-items: center;
   justify-content: center;
   border-radius: ${BorderRadius.Md};
-  background-color: ${({ theme }) => theme.color.background.secondary};
+  background-color: ${({ theme }) => semanticColor(theme, "SurfaceSecondary", theme.color.background.secondary)};
   width: ${({ $width }) => $width ?? "200px"};
   height: ${({ $height }) => $height ?? "144px"};
   svg {
-    color: ${({ theme }) => theme.color.border.disabled};
+    color: ${({ theme }) => semanticColor(theme, "FgDisabled", theme.color.border.disabled)};
   }
 `;
 const LightweightImg = styled.img`
@@ -222,7 +227,7 @@ const LightweightImg = styled.img`
 const renderAsCopyableString = (value, config) => {
 	const valueAsString = renderAsString(value);
 	const content = config?.mono ? /* @__PURE__ */ jsx(MonoText, { children: valueAsString }) : valueAsString;
-	if (!valueAsString) return /* @__PURE__ */ jsx(Paragraph, { children: config?.emptyText ?? "" });
+	if (!valueAsString) return /* @__PURE__ */ jsx(EmptyCellText, { children: config?.emptyText ?? "" });
 	return /* @__PURE__ */ jsx(WrappingText, { children: config?.copyable ? /* @__PURE__ */ jsx(HoverCopyableField, {
 		copyValue: valueAsString,
 		children: content
@@ -232,7 +237,7 @@ const renderAsPii = (row, config) => {
 	if (!config || !row) return "";
 	const { isRedacted, piiValue, emptyText } = config;
 	const piiValueString = piiValue(row);
-	if (piiValueString == null || piiValueString.length === 0) return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Paragraph, { children: emptyText }), config.subComponent?.(row)] });
+	if (piiValueString == null || piiValueString.length === 0) return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(EmptyCellText, { children: emptyText }), config.subComponent?.(row)] });
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Pii_default, {
 		isRedacted: isRedacted(row),
 		children: piiValueString
@@ -292,7 +297,7 @@ const InserterTableCell = styled(TableCell)`
 const AddRowLine = styled.div`
   position: absolute;
   top: -1px;
-  background-color: ${({ theme }) => theme.color.primary.brand};
+  background-color: ${({ theme }) => semanticColor(theme, "BorderAccent", theme.color.primary.brand)};
   width: ${({ $nestSpacing }) => $nestSpacing ? `calc(100% - ${$nestSpacing}px)` : "100%"};
   transition-duration: ${"200ms"};
   transition-property: opacity;
@@ -305,7 +310,8 @@ const StyledPlusButton = styled.button`
   border-radius: 50%;
   height: 14px;
   width: 14px;
-  background-color: ${({ theme }) => theme.color.primary.brand};
+  background-color: ${({ theme }) => semanticColor(theme, "ActionPrimary", theme.color.primary.brand)};
+  color: ${({ theme }) => semanticColor(theme, "FgInverse", Color.BackgroundButtonInverse)};
   cursor: pointer;
   z-index: ${Z_INDICES.withShadow};
   // TODO: Add a focus style
@@ -380,7 +386,7 @@ const Inserter = ({ priorRowLabel, colSpan, nestSpacing = 0, label, onAddRow })
 					"aria-label": label || `Insert a row after ${priorRowLabel}`,
 					onClick: onAddRow,
 					type: "button",
-					children: /* @__PURE__ */ jsx(StyledPlusIcon, { color: Color.BackgroundButtonInverse })
+					children: /* @__PURE__ */ jsx(StyledPlusIcon, { color: "currentColor" })
 				}),
 				/* @__PURE__ */ jsx(AddRowLine, {
 					$nestSpacing: nestSpacing,
@@ -453,6 +459,7 @@ function useTableColumns({ columns, data, compact, sort, clientSearch, clientFil
 					sortUndefined: -1,
 					meta: {
 						align: column.align,
+						format: column.format,
 						minWidth: column.minWidth,
 						width: column.width,
 						headerTooltip: column.headerTooltip
@@ -605,6 +612,7 @@ function useTableColumns({ columns, data, compact, sort, clientSearch, clientFil
 }
 //#endregion
 //#region components/DataTable/DataTable.tsx
+const forwardedRowLinkClicks = /* @__PURE__ */ new WeakSet();
 const TableEmptyState = styled.td`
   vertical-align: middle;
   text-align: center;
@@ -626,6 +634,11 @@ const TableContainer = styled.div`
       flex-direction: column;
     `}
 `;
+const RowLink = styled(Link)`
+  color: inherit;
+  text-decoration: none;
+  ${focusOutline}
+`;
 const DataTableControls = styled(TableControls)``;
 const DataTableContainer = styled.div`
   ${({ $stickyHeader }) => $stickyHeader && css`
@@ -676,7 +689,7 @@ const StickyTDWithGapCoverage = styled(StickyTD)`
         left: ${-$gapCoverage}px;
         width: ${$gapCoverage}px;
         height: calc(100% + 1px); // +1px to cover the bottom border
-        background-color: ${theme.color.background.primary};
+        background-color: ${semanticColor(theme, "SurfacePrimary", theme.color.background.primary)};
       }
     `}
 `;
@@ -757,7 +770,7 @@ const getFilterFnName = (filterType) => {
 		default: return "equals";
 	}
 };
-const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "auto", showControls, controls, emptyState, isLoading, pagination, sort, sortDescFirst, enableSortingRemoval, showColumnProperties = false, onUpdateColumnProperties, enableRowSelection = false, enableSubRowSelection = true, getRowId, getRowLabel, getRowSelectable, getLinkToRow, rowLinkPrefix, rowLinkComponent, compact, disableRowHover, title, clientSearch = false, searchTerm: controlledSearchTerm, onSearchTermChange, manualFiltering, expandedRowIds: controlledExpandedRowIds, onExpandedRowsChange, clientFiltering = false, columnFilters: controlledColumnFilters, hasExternalActiveFilters = false, onColumnFiltersChange, renderFormat, rowActions, bulkActions, getAvailableBulkActions, onRowSelectionChange, onAddRow, stickyHeader = false, canAddAfterRow, onRowClick, activeRowId, onDisplayedRowIdsChange, pinnedColumnLeftOffset = 0, scrollsHorizontally = true, floatingBarContent }) => {
+const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "auto", showControls, controls, emptyState, isLoading, pagination, sort, sortDescFirst, enableSortingRemoval, showColumnProperties = false, onUpdateColumnProperties, enableRowSelection = false, enableSubRowSelection = true, getRowId, getRowLabel, getRowSelectable, getLinkToRow, rowLinkPrefix, rowLinkColumnId, rowLinkComponent, compact, disableRowHover, title, clientSearch = false, searchTerm: controlledSearchTerm, onSearchTermChange, manualFiltering, expandedRowIds: controlledExpandedRowIds, onExpandedRowsChange, clientFiltering = false, columnFilters: controlledColumnFilters, hasExternalActiveFilters = false, onColumnFiltersChange, renderFormat, rowActions, bulkActions, getAvailableBulkActions, onRowSelectionChange, onAddRow, stickyHeader = false, canAddAfterRow, onRowClick, activeRowId, onDisplayedRowIdsChange, pinnedColumnLeftOffset = 0, scrollsHorizontally = true, floatingBarContent }) => {
 	const DEFAULT_SEARCH_PLACEHOLDER = "Search...";
 	const { NEST_SPACING, EXPAND_COLUMN_WIDTH } = getColumnWidths(compact);
 	const [columnVisibility, setColumnVisibility] = useState(() => {
@@ -1271,15 +1284,32 @@ const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "a
 						const rowLabel = getRowLabel?.(rowData);
 						const isExpanded = expandedRows.has(rowId);
 						const canExpand = canRowExpand(rowData);
+						const rowLinkHref = getLinkToRow ? getLinkToRow(row.original) : rowLinkPrefix ? `${rowLinkPrefix}/${rowId}` : void 0;
 						const dynamicNestSpacing = showControls && enableRowSelection ? NEST_SPACING + 8 : NEST_SPACING;
+						const visibleCells = row.getVisibleCells();
+						const isLinkableCell = (cell) => !isFeatureCol(cell.column.id) && cell.column.columnDef.meta?.format?.type !== "url";
+						const rowLinkCellId = rowLinkHref ? visibleCells.find((cell) => cell.column.id === rowLinkColumnId && isLinkableCell(cell))?.column.id ?? visibleCells.find(isLinkableCell)?.column.id : void 0;
+						const RowLinkComponent = rowLinkComponent ?? Link;
+						const renderCellContent = (cell) => {
+							const content = flexRender(cell.column.columnDef.cell, cell.getContext());
+							if (!rowLinkHref || cell.column.id !== rowLinkCellId) return content;
+							const value = cell.getValue();
+							return /* @__PURE__ */ jsx(RowLink, {
+								as: RowLinkComponent,
+								to: rowLinkHref,
+								"data-row-link": true,
+								"aria-label": value == null || value === "" ? rowLabel : void 0,
+								children: content
+							});
+						};
 						let leftMostNonSpecialColumnFound = false;
-						const rowElements = row.getVisibleCells().map((cell) => {
+						const rowElements = visibleCells.map((cell) => {
 							const pinningStyles = getCommonPinningStyles(cell.column);
 							const isPinned = pinningStyles.position === "sticky";
 							if (cell.column.id === "action-col") return /* @__PURE__ */ jsx(StyledTableActionTD, {
 								style: { textAlign: cell.column.columnDef.meta?.align },
 								$nestSpacing: row.depth * dynamicNestSpacing,
-								children: flexRender(cell.column.columnDef.cell, cell.getContext())
+								children: renderCellContent(cell)
 							}, cell.id);
 							if (isPinned) {
 								const leftBumpFromNesting = !leftMostNonSpecialColumnFound ? row.depth * dynamicNestSpacing : 0;
@@ -1293,7 +1323,7 @@ const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "a
 									},
 									hasRightBorder: pinningStyles.hasRightBorder,
 									$gapCoverage: leftBumpFromNesting,
-									children: flexRender(cell.column.columnDef.cell, cell.getContext())
+									children: renderCellContent(cell)
 								}, cell.id) : /* @__PURE__ */ jsx(StickyTD, {
 									left: (pinningStyles.left ? parseInt(pinningStyles.left) : 0) + leftBumpFromNesting,
 									style: {
@@ -1301,7 +1331,7 @@ const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "a
 										textAlign: cell.column.columnDef.meta?.align
 									},
 									hasRightBorder: pinningStyles.hasRightBorder,
-									children: flexRender(cell.column.columnDef.cell, cell.getContext())
+									children: renderCellContent(cell)
 								}, cell.id);
 								if (!leftMostNonSpecialColumnFound && !isFeatureCol(cell.column.id)) leftMostNonSpecialColumnFound = true;
 								return stickyTableCell;
@@ -1311,7 +1341,7 @@ const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "a
 								width: isFeatureCol(cell.column.id) ? "1%" : void 0,
 								$nestSpacing: leftMostNonSpecialColumnFound ? void 0 : row.depth * dynamicNestSpacing,
 								$isFeatureCol: isFeatureCol(cell.column.id),
-								children: flexRender(cell.column.columnDef.cell, cell.getContext())
+								children: renderCellContent(cell)
 							}, cell.id);
 							if (!leftMostNonSpecialColumnFound && !isFeatureCol(cell.column.id)) leftMostNonSpecialColumnFound = true;
 							return tableCell;
@@ -1322,22 +1352,32 @@ const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "a
 						} : canExpand ? () => {
 							toggleRowExpansion(rowId);
 						} : void 0;
-						const rowProps = {
+						const handleRowClickWithLink = (event) => {
+							if (forwardedRowLinkClicks.has(event.nativeEvent)) return;
+							handleRowClick?.();
+							if (!rowLinkHref || event.defaultPrevented || event.target.closest("a, button, input, select, textarea, label, [role=\"checkbox\"], [role=\"button\"], [role=\"menuitem\"]")) return;
+							const link = event.currentTarget.querySelector("a[data-row-link]");
+							const ownerWindow = link?.ownerDocument.defaultView;
+							if (!link || !ownerWindow) return;
+							const forwardedClick = new ownerWindow.MouseEvent("click", {
+								bubbles: true,
+								cancelable: true,
+								button: event.button,
+								ctrlKey: event.ctrlKey,
+								metaKey: event.metaKey,
+								shiftKey: event.shiftKey,
+								altKey: event.altKey
+							});
+							forwardedRowLinkClicks.add(forwardedClick);
+							link.dispatchEvent(forwardedClick);
+						};
+						const elements = [/* @__PURE__ */ jsx(TableTR, {
 							"aria-label": rowLabel,
-							onClick: handleRowClick,
+							onClick: handleRowClickWithLink,
 							$isActive: isRowActive,
 							disableHoverBackground: disableRowHover,
-							css: { cursor: handleRowClick ? "pointer" : void 0 },
-							...isRowWithTourTarget(row.original) && { "data-tour-target": row.original.dataTourTarget }
-						};
-						const RowLinkComponent = rowLinkComponent ?? Link;
-						const elements = [getLinkToRow || rowLinkPrefix ? /* @__PURE__ */ jsx(TableTR, {
-							...rowProps,
-							as: RowLinkComponent,
-							to: getLinkToRow ? getLinkToRow(row.original) : `${rowLinkPrefix}/${rowId}`,
-							children: rowElements
-						}, rowId) : /* @__PURE__ */ jsx(TableTR, {
-							...rowProps,
+							css: { cursor: rowLinkHref || handleRowClick ? "pointer" : void 0 },
+							...isRowWithTourTarget(row.original) && { "data-tour-target": row.original.dataTourTarget },
 							children: rowElements
 						}, rowId)];
 						if (canExpand && isExpanded) {