@persona/design-system 0.1.8 → 0.2.0

package/dist/components/DataTable/index.mjs

@@ -1,27 +1,27 @@
-import { isFocused } from "../../lib/pseudoClass.mjs";
-import "../../variables/effect.mjs";
+import { i as Paragraph, o as TabularNumber } from "../../Text-hEoPeOc9.mjs";
 import "../../variables/transitions.mjs";
-import { t as HStack } from "../../Stack-Bl54WmhY.mjs";
-import { i as Paragraph, o as TabularNumber } from "../../Text-RcEfNFLx.mjs";
-import { t as TextUnderlineTooltip } from "../../Tooltip-C6AR1xT-.mjs";
+import { t as TextUnderlineTooltip } from "../../Tooltip-B-DDlRMw.mjs";
+import { isFocused } from "../../lib/pseudoClass.mjs";
 import { Z_INDICES } from "../../lib/zindex.mjs";
-import { n as Button, t as IconButton } from "../../IconButton-CIWiEsS-.mjs";
-import { n as DropdownMenu_default } from "../../DropdownMenu-DGYexb7s.mjs";
-import { a as StickyTH, d as TableTR, f as TableTH, i as StickyTD, n as TableBody, o as TableActionTD, p as TableRow, s as TableCell, t as TableLayout, u as TableTD } from "../../Table-D8IcpACv.mjs";
-import { n as Sticker } from "../../Sticker-DbqKLe33.mjs";
-import { t as Checkbox } from "../../Checkbox-B0bjZbji.mjs";
-import { t as Pagination_default } from "../../Pagination-ztqhywAP.mjs";
-import { t as HoverCopyableField_default } from "../../HoverCopyableField-ClXBg_ld.mjs";
-import { t as Pii_default } from "../../Pii-DrrtEz7U.mjs";
-import { b as TableControls, y as TableViewConfigurationDropdown } from "../../TableControls-DHMs7o58.mjs";
+import "../../variables/effect.mjs";
+import { t as HStack } from "../../Stack-ckRN7LrP.mjs";
+import { n as Button, t as IconButton } from "../../IconButton-Bi4kdsbV.mjs";
+import { n as DropdownMenu_default } from "../../DropdownMenu-B4f3LNoW.mjs";
+import { a as StickyTH, d as TableTR, f as TableTH, i as StickyTD, n as TableBody, o as TableActionTD, p as TableRow, s as TableCell, t as TableLayout, u as TableTD } from "../../Table-BnYZVCLj.mjs";
+import { n as Sticker } from "../../Sticker-BOlAy2TE.mjs";
+import { t as Checkbox } from "../../Checkbox-D77Rg7La.mjs";
+import { t as Pagination_default } from "../../Pagination-DiaJX5Da.mjs";
+import { t as HoverCopyableField_default } from "../../HoverCopyableField-C8AdtVrT.mjs";
+import { t as Pii_default } from "../../Pii-CSBV5Is7.mjs";
+import { b as TableControls, y as TableViewConfigurationDropdown } from "../../TableControls-51NYgFvI.mjs";
 import "./types.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
-import styled, { css } from "styled-components";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Link } from "react-router-dom";
 import { createElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import styled, { css } from "styled-components";
+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 } from "lodash";
 import { createColumnHelper, flexRender, getCoreRowModel, getFilteredRowModel, getMemoOptions, getPaginationRowModel, getSortedRowModel, memo as memo$1, useReactTable } from "@tanstack/react-table";
 import { DateTime } from "luxon";
@@ -81,12 +81,13 @@ const FloatingActionBar = ({ selectedCount, onClearSelection, extraContent, acti
 				return /* @__PURE__ */ jsx(DropdownMenu_default, {
 					trigger,
 					align: "center",
+					portal: true,
 					children: (action.popover?.options ?? []).map((option) => /* @__PURE__ */ jsx(DropdownMenu_default.Item, {
 						id: option.value,
 						onClick: () => action.popover.onOptionSelect(option.value),
 						children: option.label
 					}, option.value))
-				});
+				}, key);
 			} else if ("icon" in action && "aria-label" in action) return /* @__PURE__ */ jsx(IconButton, {
 				size: "sm",
 				"aria-label": action["aria-label"],
@@ -232,14 +233,14 @@ 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, { children: [/* @__PURE__ */ jsx(Paragraph, { children: emptyText }), config.subComponent?.(row)] });
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Pii_default, {
+	if (piiValueString == null || piiValueString.length === 0) return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Paragraph, { children: emptyText }), config.subComponent?.(row)] });
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Pii_default, {
 		isRedacted: isRedacted(row),
 		children: piiValueString
 	}), config.subComponent?.(row)] });
 };
 const renderAsLightweightImage = (value, config) => {
-	if (value == null || value === "" || Array.isArray(value) && value.length === 0) return config?.fallback ? /* @__PURE__ */ jsx(Fragment, { children: config.fallback }) : /* @__PURE__ */ jsx(EmptyImageContainer, {
+	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",
@@ -571,7 +572,7 @@ function useTableColumns({ columns, data, compact, sort, clientSearch, clientFil
 			}
 		}));
 		if (hasRowActions) {
-			const emptyHeader = () => /* @__PURE__ */ jsx(Fragment, {});
+			const emptyHeader = () => /* @__PURE__ */ jsx(Fragment$1, {});
 			tableColumns.push(columnHelper.display({
 				id: "action-col",
 				enableResizing: false,
@@ -764,7 +765,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, 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, 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(() => {
@@ -1210,7 +1211,8 @@ const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "a
 				children: [/* @__PURE__ */ jsx(StyledTableLayout, {
 					$onAddRow: !!onAddRow,
 					stickyHeader,
-					headerTR: /* @__PURE__ */ jsx(Fragment, { children: tableHeaderGroup.headers.map((header) => {
+					containerScrollsHorizontally: scrollsHorizontally,
+					headerTR: /* @__PURE__ */ jsx(Fragment$1, { children: tableHeaderGroup.headers.map((header) => {
 						const pinningStyles = getCommonPinningStyles(header.column);
 						const isPinned = pinningStyles.position === "sticky";
 						const width = header.column.columnDef.meta?.width ? `${header.column.columnDef.meta?.width}px` : void 0;
@@ -1353,14 +1355,14 @@ const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "a
 							else detailContent = rowData._details;
 							else if (detailComponent) detailContent = /* @__PURE__ */ jsx(detailComponent, { rowData });
 							if (detailContent) {
-								const detailCells = initialColumnPinning?.left?.length ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(StickyTD, {
+								const detailCells = initialColumnPinning?.left?.length ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(StickyTD, {
 									colSpan: 1,
 									left: pinnedColumnLeftOffset
 								}), /* @__PURE__ */ jsx(StickyDetailsTD, {
 									colSpan: tableHeaderGroup.headers.length - 1,
 									left: EXPAND_COLUMN_WIDTH + pinnedColumnLeftOffset,
 									children: detailContent
-								})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TableTD, { colSpan: 1 }), /* @__PURE__ */ jsx(DetailsTD, {
+								})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TableTD, { colSpan: 1 }), /* @__PURE__ */ jsx(DetailsTD, {
 									colSpan: tableHeaderGroup.headers.length - 1,
 									children: detailContent
 								})] });