@povio/ui 4.0.3 → 5.0.0-rc.10

package/dist/Table-BN2_J_Ne.js

@@ -0,0 +1,636 @@
+import { t as logger } from "./logger-CqZjM-sn.js";
+import { t as UIConfig } from "./uiConfig.context-BS3r_kTS.js";
+import { t as ChevronDown } from "./chevron-down-B4Pr8bD3.js";
+import { t as ChevronUp } from "./chevron-up-D_Gqpb5M.js";
+import { a as tableHeaderTextDefinition, c as GripVertical, i as tableHeadRowDefinition, n as tableDataDefinition, o as tableRowDefinition, r as tableHeadDataDefinition, s as theadDefinition, t as tableCellTextDefinition } from "./table.cva-D5oQ-QvA.js";
+import { t as clsx } from "./clsx-CnD0nOiA.js";
+import { t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
+import { t as IconSlot } from "./IconSlot-DSK7qNxc.js";
+import { t as Typography } from "./Typography-LU4z2pR1.js";
+import { InlineIconButton } from "./components/inline-icon-button.js";
+import { t as useIntersectionObserver } from "./useIntersectionObserver-DYfHnGGU.js";
+import { Suspense, lazy, useCallback, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPaginatedRowModel, createSortedRowModel, flexRender, stockFeatures, tableFeatures, useTable } from "@tanstack/react-table";
+import i18next from "i18next";
+//#region src/components/table/CellText.tsx
+const CellText = (props) => {
+	const uiConfig = UIConfig.useConfig();
+	const { size = uiConfig.tableCellText.size, children, style, className } = props;
+	const cellTextCva = UIOverrides.useCva("table.cellTextCva", tableCellTextDefinition);
+	return /* @__PURE__ */ jsx(Typography, {
+		className: cellTextCva({ className }),
+		as: "span",
+		size,
+		style,
+		"data-rac": true,
+		children
+	});
+};
+//#endregion
+//#region src/components/table/HeaderText.tsx
+const HeaderText = (props) => {
+	const uiConfig = UIConfig.useConfig();
+	const { size = uiConfig.tableHeaderText.size, children, style, className } = props;
+	const headerTextCva = UIOverrides.useCva("table.headerTextCva", tableHeaderTextDefinition);
+	return /* @__PURE__ */ jsx(Typography, {
+		className: headerTextCva({ className }),
+		as: "span",
+		size,
+		style,
+		children
+	});
+};
+//#endregion
+//#region src/hooks/useTableNav.ts
+const Selectors = {
+	Cell: "[role=\"cell\"],[role=\"gridcell\"],[role=\"columnheader\"],[role=\"rowheader\"],td,th",
+	Row: "[role=\"row\"],tr",
+	RowGroup: "[role=\"rowgroup\"],thead,tbody,tfoot",
+	/** Selector from here: https://github.com/Shopify/polaris/blob/main/polaris-react/src/utilities/focus.ts#L10 */
+	Focusable: "a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not([aria-disabled=\"true\"]):not([tabindex=\"-1\"]):not(:disabled),*[tabindex]"
+};
+var DataGridNav = class {
+	constructor(config = {}) {
+		this.keys = [];
+		this.activeCell = null;
+		this.debugLog = (functionName, message) => {
+			if (this.debug) logger.info(`[${functionName}]: ${message}`);
+		};
+		const { selectors = {}, pageUpDown, debug = false } = config;
+		this.selectors = {
+			...Selectors,
+			...selectors
+		};
+		this.pageUpDown = pageUpDown;
+		this.keys = [];
+		this.debug = debug;
+		this.disabled = false;
+	}
+	/**
+	* Disables the keyboard listener in cases
+	* that elements inside the grid need to use
+	* arrows keys etc., like select dropdowns
+	*/
+	disable() {
+		this.disabled = true;
+	}
+	/**
+	* Enables the keyboard listeners
+	*/
+	enable() {
+		this.disabled = false;
+	}
+	isFocusable(el) {
+		return el instanceof HTMLElement || el instanceof SVGElement;
+	}
+	getActiveCell() {
+		return this.activeCell;
+	}
+	/** Used as a keyboard listener for key up */
+	tableKeyUp() {
+		this.keys = [];
+	}
+	/** Used as a keyboard listener for key down */
+	tableKeyDown(e) {
+		if (this.disabled) return;
+		/**
+		* Avoid page scrolling etc.
+		* Enable default behavior for:
+		* Tab, Shift + Tab
+		* TODO: Actually it will be better to just prevent
+		* in ArrowKeys and PageKeys maybe?
+		* Or should the consumer stop propagation?!
+		* Cannot work with preventDefault as it will
+		* first capture the event from an input in cell for example
+		*/
+		if ("ArrowDown" === e.key || "ArrowUp" === e.key || "ArrowLeft" === e.key || "ArrowRight" === e.key) e.preventDefault();
+		/**
+		* Add key to the stack if it's
+		* not the same with the last (long press)
+		*/
+		if (this.keys.length === 0 || this.keys[this.keys.length - 1] !== e.key) this.keys.push(e.key);
+		/**
+		* Need to check if we are inside a grid cell
+		* or not to enable/disable Grid Navigation
+		*/
+		if (!(e.target instanceof Element)) return;
+		const cell = e.target.parentElement?.closest(`${this.selectors.Cell},${this.selectors.Row}`);
+		if (!cell) return;
+		if (cell.matches(this.selectors.Cell)) this.cellNavigation(e);
+		else this.gridNavigation(e);
+	}
+	/**
+	* Handles the navigation inside a cell
+	*/
+	cellNavigation(e) {
+		if (!(e.target instanceof Element)) return;
+		/**
+		* Keys: Escape
+		* Restore grid navigation
+		*/
+		if (e.key === "Escape") {
+			const cell = e.target.closest(this.selectors.Cell);
+			if (cell && this.isFocusable(cell)) {
+				cell.focus();
+				return;
+			}
+		}
+		/**
+		* Keys: ArrowRight, ArrowDown
+		* Move to the next focusable cell, or the first one
+		*
+		* Arrow Down disabled:
+		* https://github.com/w3c/aria-practices/issues/2739#issuecomment-1613538972
+		*/
+		if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+			const cell = e.target.closest(this.selectors.Cell);
+			if (!cell) return;
+			const focusableWidgets = [...cell.querySelectorAll(this.selectors.Focusable)];
+			const widgetIdx = focusableWidgets.findIndex((el) => el === e.target);
+			const widgetToFocus = focusableWidgets[widgetIdx === focusableWidgets.length - 1 ? 0 : widgetIdx + 1];
+			if (this.isFocusable(widgetToFocus)) widgetToFocus.focus();
+			return;
+		}
+		/**
+		* Keys: ArrowLeft, ArrowUp
+		* Move to the previous focusable cell, or the last one
+		*
+		* Arrow Up disabled:
+		* https://github.com/w3c/aria-practices/issues/2739#issuecomment-1613538972
+		*/
+		if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+			const cell = e.target.closest(this.selectors.Cell);
+			if (!cell) return;
+			const focusableWidgets = [...cell.querySelectorAll(this.selectors.Focusable)];
+			const widgetIdx = focusableWidgets.findIndex((el) => el === e.target);
+			const widgetToFocus = focusableWidgets[widgetIdx === 0 ? focusableWidgets.length - 1 : widgetIdx - 1];
+			if (this.isFocusable(widgetToFocus)) widgetToFocus.focus();
+		}
+	}
+	/**
+	* Handles the navigation outside a cell
+	* on the grid level
+	*/
+	gridNavigation(e) {
+		const { target } = e;
+		if (!(e.target instanceof Element)) return;
+		if (!(target instanceof Element)) return;
+		if (this.keys.length === 1) {
+			/**
+			* Keys: Enter
+			* Should move focus inside the cell to the first focusable element:
+			* https://www.w3.org/WAI/ARIA/apg/patterns/grid/#gridNav_inside
+			*/
+			if (/^[a-zA-Z0-9]$/.test(e.key)) {
+				const cell = e.target.querySelector(this.selectors.Focusable);
+				if (cell && this.isFocusable(cell) && cell instanceof HTMLInputElement) {
+					cell.focus();
+					cell.value = `${cell.value}${e.key}`;
+					e.preventDefault();
+				}
+				return;
+			}
+			if (e.key === "Backspace") {
+				const cell = e.target.querySelector(this.selectors.Focusable);
+				if (cell && this.isFocusable(cell) && cell instanceof HTMLInputElement) {
+					const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+					if (nativeInputValueSetter) {
+						nativeInputValueSetter.call(cell, "");
+						const ev = new Event("input", { bubbles: true });
+						cell.dispatchEvent(ev);
+					}
+				}
+				return;
+			}
+			if (e.key === "Enter") {
+				const cell = e.target.querySelector(this.selectors.Focusable);
+				if (cell && this.isFocusable(cell)) {
+					if (cell.getAttribute("data-type") === "select-trigger") {
+						cell.click();
+						return;
+					}
+					cell.focus();
+					e.preventDefault();
+				}
+				return;
+			}
+			/**
+			* Keys: ArrowLeft, ArrowRight
+			* Should move focus to the next/previous cell
+			*/
+			if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+				const direction = e.key === "ArrowLeft" ? "prev" : "next";
+				const cell = e.target.closest(this.selectors.Cell);
+				let nextCell = null;
+				if (direction === "next" && cell?.nextElementSibling instanceof HTMLElement) nextCell = cell.nextElementSibling;
+				if (direction === "prev" && cell?.previousElementSibling instanceof HTMLElement) nextCell = cell.previousElementSibling;
+				if (nextCell && this.isFocusable(nextCell)) {
+					nextCell.focus();
+					e.preventDefault();
+				}
+			}
+			/**
+			* Keys: Up,Down
+			* Should move focus to the same column of the next/previous row
+			*/
+			if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+				this.verticalCellNavigation(e);
+				return;
+			}
+			/**
+			* Keys: PageUp, PageDown
+			* Should move focus to the first/last row
+			* or a predefined number of rows if user provides a value
+			*/
+			if (e.key === "PageUp" || e.key === "PageDown") {
+				this.pageCellNavigation(e);
+				return;
+			}
+			/**
+			* Keys: Home, End
+			* Should move focus to the first/last cell of the current row
+			*/
+			if (e.key === "Home" || e.key === "End") {
+				const rowChildren = [...e.target.closest(this.selectors.Row)?.children || []];
+				if (e.key === "End") rowChildren.reverse();
+				this.focusOnFirstCell(rowChildren);
+			}
+		} else {
+			/**
+			* Keys: Control + Home, Control + End
+			* Should move focus to the first/last cell of the first/last row
+			*/
+			const [firstKey, secondKey] = this.keys;
+			if (firstKey === "Control" && (secondKey === "Home" || secondKey === "End")) {
+				const siblings = e.target.closest(this.selectors.Row).parentElement?.children;
+				if (!siblings) return;
+				const rowChildren = [...(secondKey === "Home" ? siblings[0] : siblings[siblings.length - 1])?.children || []];
+				if (secondKey === "End") rowChildren.reverse();
+				this.focusOnFirstCell(rowChildren);
+			}
+		}
+	}
+	pageCellNavigation(e) {
+		if (!(e.target instanceof Element)) return;
+		const row = e.target.closest(this.selectors.Row);
+		const cell = e.target.closest(this.selectors.Cell);
+		if (row && cell) {
+			const position = this.getColumnIndex(cell);
+			if (position === void 0) return;
+			const direction = e.key === "PageUp" ? "prev" : "next";
+			const siblings = row.parentElement?.children;
+			if (!siblings) return;
+			let destinationRow;
+			if (this.pageUpDown) {
+				const methodClbk = direction === "prev" ? "previousSibling" : "nextSibling";
+				let sibling = row[methodClbk];
+				if (sibling === null) return;
+				let lastVisitedSibling = sibling;
+				for (let i = 0; i < this.pageUpDown - 1 && sibling; i++) {
+					sibling = sibling[methodClbk];
+					if (sibling) lastVisitedSibling = sibling;
+				}
+				destinationRow = sibling || lastVisitedSibling;
+			} else destinationRow = direction === "prev" ? siblings[0] : siblings[siblings.length - 1];
+			if (!destinationRow || !(destinationRow instanceof Element)) return;
+			const child = destinationRow.children[position];
+			if (child && this.isFocusable(child)) child.focus();
+		}
+	}
+	verticalCellNavigation(e) {
+		if (!(e.target instanceof Element)) return;
+		const row = e.target.closest(this.selectors.Row);
+		const cell = e.target.closest(this.selectors.Cell);
+		if (row && cell) {
+			const cellPosition = this.getColumnIndex(cell);
+			const rowPosition = this.getRowIndex(row);
+			if (cellPosition === void 0 || rowPosition === void 0) return;
+			const direction = e.key === "ArrowUp" ? "prev" : "next";
+			/** Find previous rowgroup and focus on the proper cell */
+			if (rowPosition === 0 && direction === "prev") {
+				const currentRowGroup = row.parentElement?.closest(this.selectors.RowGroup);
+				const siblingRowGroups = [...currentRowGroup?.parentElement?.children || []];
+				const currentRowGroupIdx = siblingRowGroups.findIndex((el) => el === currentRowGroup);
+				if (currentRowGroupIdx !== 0) {
+					const rows = [...siblingRowGroups[currentRowGroupIdx - 1].querySelectorAll(this.selectors.Row)];
+					const child = rows[rows.length - 1].children[cellPosition];
+					if (child && this.isFocusable(child)) child.focus();
+					return;
+				}
+			}
+			/** Find next rowgroup and focus on the proper cell */
+			if (rowPosition === [...row.parentElement?.querySelectorAll(this.selectors.Row) || []].length - 1 && direction === "next") {
+				const currentRowGroup = row.parentElement?.closest(this.selectors.RowGroup);
+				const siblingRowGroups = [...currentRowGroup?.parentElement?.children || []];
+				const currentRowGroupIdx = siblingRowGroups.findIndex((el) => el === currentRowGroup);
+				if (currentRowGroupIdx !== siblingRowGroups.length - 1) {
+					const child = [...siblingRowGroups[currentRowGroupIdx + 1].querySelectorAll(this.selectors.Row)][0].children[cellPosition];
+					if (child && this.isFocusable(child)) child.focus();
+					return;
+				}
+				return;
+			}
+			/** Navigation in the same rowgroup */
+			const destinationRow = this.findUntil(direction, row, this.selectors.Row);
+			if (!destinationRow) return;
+			const child = destinationRow.children[cellPosition];
+			if (child && this.isFocusable(child)) child.focus();
+		}
+	}
+	/**
+	* Sending a row `Element` and then the first cell will be focused.
+	*
+	* If you want to focus the last cell then the row children can be passed in
+	* reversed order
+	*/
+	focusOnFirstCell(el) {
+		for (let i = 0; i < el.length; i++) {
+			const child = el[i];
+			if (this.isFocusable(child)) {
+				child.focus();
+				return;
+			}
+		}
+	}
+	/**
+	* Get the column index of a `cell` based on the first `row` parent.
+	* `cellIndex` could be used, but it's not supported in HTML tables.
+	*/
+	getColumnIndex(cell) {
+		let position = 0;
+		const siblings = cell?.parentNode?.children;
+		if (!siblings) return;
+		while (cell !== siblings[position] && siblings[position] !== void 0) position++;
+		if (siblings[position] === void 0) return;
+		return position;
+	}
+	/**
+	* Get the row index of a `row` based
+	* on its sibling rows
+	*/
+	getRowIndex(row) {
+		let position = 0;
+		const siblings = row?.parentNode?.children;
+		if (!siblings) return;
+		while (row !== siblings[position] && siblings[position] !== void 0) position++;
+		if (siblings[position] === void 0) return;
+		return position;
+	}
+	/**
+	* Equivalent to prevUntil/nextUntil in jQuery
+	* https://api.jquery.com/prevUntil/
+	*/
+	findUntil(direction, el, matchSelector, exitSelector) {
+		let element = el;
+		const method = direction === "next" ? "nextSibling" : "previousSibling";
+		while (element[method]) {
+			const sibling = element[method];
+			if (!sibling) return null;
+			if (exitSelector && sibling instanceof Element && sibling.matches(exitSelector)) return null;
+			if (sibling instanceof Element && sibling.matches(matchSelector)) return sibling;
+			element = sibling;
+		}
+		return null;
+	}
+};
+function useTableNav(options) {
+	const nav = new DataGridNav(options);
+	return {
+		listeners: {
+			onKeyDown: (e) => nav.tableKeyDown(e),
+			onKeyUp: () => nav.tableKeyUp()
+		},
+		tableNav: nav
+	};
+}
+//#endregion
+//#region src/components/table/Table.tsx
+const DndProvider = lazy(() => import("./TableDnd-CuHxANWh.js").then((module) => ({ default: module.DndProvider })));
+const SortableRows = lazy(() => import("./TableDnd-CuHxANWh.js").then((module) => ({ default: module.SortableRows })));
+const DraggableRow = lazy(() => import("./TableDnd-CuHxANWh.js").then((module) => ({ default: module.DraggableRow })));
+const DragHandle = lazy(() => import("./TableDnd-CuHxANWh.js").then((module) => ({ default: module.DragHandle })));
+const tableFeaturesConfig = tableFeatures({
+	...stockFeatures,
+	sortedRowModel: createSortedRowModel(),
+	paginatedRowModel: createPaginatedRowModel()
+});
+const CustomCellContext = (context) => {
+	return {
+		...context,
+		original: context.row.original,
+		data: context.row.original,
+		value: context.getValue()
+	};
+};
+const renderCell = (Comp, props) => {
+	const rendered = flexRender(Comp, props);
+	return typeof rendered === "string" ? /* @__PURE__ */ jsx(CellText, { children: rendered }) : rendered;
+};
+const RowDragHandleCell = ({ rowId }) => {
+	return /* @__PURE__ */ jsx(DragHandle, {
+		id: rowId,
+		children: (dragProps) => /* @__PURE__ */ jsx(InlineIconButton, {
+			...dragProps,
+			className: "cursor-move p-1",
+			label: "Drag handle",
+			icon: GripVertical
+		})
+	});
+};
+const AutoDragHandleCell = ({ row }) => /* @__PURE__ */ jsx(RowDragHandleCell, { rowId: row.id });
+const Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, className, sorting, setSorting, columnOrder, setColumnOrder, columnVisibility, setColumnVisibility, bulkSelectionActions: ActionHeader, enableDragDrop = false, onDragEnd, onReorder, getRowId, enableRowSelection, enableMultiRowSelection = false, defaultSelectedRows, onRowSelectionChange, ...props }) => {
+	const tableRowCva = UIOverrides.useCva("table.rowCva", tableRowDefinition);
+	const theadCva = UIOverrides.useCva("table.theadCva", theadDefinition);
+	const tableHeadRowCva = UIOverrides.useCva("table.headRowCva", tableHeadRowDefinition);
+	const tableHeadDataCva = UIOverrides.useCva("table.headDataCva", tableHeadDataDefinition);
+	const tableDataCva = UIOverrides.useCva("table.dataCva", tableDataDefinition);
+	const ref = useRef(null);
+	const { listeners } = useTableNav();
+	const data = useMemo(() => items ?? [], [items]);
+	const [internalSelectedRows, setInternalSelectedRows] = useState({});
+	const { rowSelection, handleRowSelectionChange } = useMemo(() => {
+		const hasExternalRowSelection = defaultSelectedRows !== void 0 && onRowSelectionChange !== void 0;
+		return {
+			rowSelection: hasExternalRowSelection ? defaultSelectedRows : internalSelectedRows,
+			handleRowSelectionChange: hasExternalRowSelection ? onRowSelectionChange : setInternalSelectedRows
+		};
+	}, [
+		defaultSelectedRows,
+		onRowSelectionChange,
+		internalSelectedRows
+	]);
+	const baseColumns = useMemo(() => typeof columns === "function" ? columns(i18next.t) : columns, [columns]);
+	const tableColumns = useMemo(() => {
+		if (enableDragDrop && getRowId) return [{
+			id: "drag-handle",
+			header: "",
+			meta: { width: "w-12" },
+			cell: AutoDragHandleCell,
+			enableSorting: false
+		}, ...baseColumns];
+		return baseColumns;
+	}, [
+		baseColumns,
+		enableDragDrop,
+		getRowId
+	]);
+	const [isSticky, setIsSticky] = useState(false);
+	const onIntersectionChange = useCallback((entry) => {
+		setIsSticky(entry.intersectionRatio < 1);
+	}, []);
+	const { ref: stickyRef } = useIntersectionObserver({ onIntersectionChange });
+	const table = useTable({
+		features: tableFeaturesConfig,
+		data,
+		columns: tableColumns,
+		state: {
+			sorting,
+			columnOrder,
+			columnVisibility,
+			rowSelection
+		},
+		rowCount: items.length,
+		manualPagination: true,
+		onColumnOrderChange: setColumnOrder,
+		onColumnVisibilityChange: setColumnVisibility,
+		onSortingChange: setSorting,
+		onRowSelectionChange: handleRowSelectionChange,
+		manualSorting: true,
+		autoResetPageIndex: false,
+		autoResetExpanded: false,
+		defaultColumn: { sortDescFirst: true },
+		enableRowSelection,
+		enableMultiRowSelection,
+		getRowId: getRowId ? (row) => String(getRowId(row)) : void 0
+	});
+	const dataIds = useMemo(() => {
+		if (!enableDragDrop || !getRowId) return [];
+		return data.map((item) => getRowId(item));
+	}, [
+		data,
+		enableDragDrop,
+		getRowId
+	]);
+	const handleDragEnd = useCallback((event) => {
+		const { active, over } = event;
+		if (!active || !over || active.id === over.id) return;
+		if (getRowId && (onReorder || onDragEnd)) {
+			if (onReorder) {
+				const oldIndex = items.findIndex((item_0) => getRowId(item_0) === active.id);
+				const newIndex = items.findIndex((item_1) => getRowId(item_1) === over.id);
+				if (oldIndex !== -1 && newIndex !== -1) {
+					const reorderedItems = [...items];
+					const [movedItem] = reorderedItems.splice(oldIndex, 1);
+					reorderedItems.splice(newIndex, 0, movedItem);
+					onReorder(reorderedItems);
+				}
+			}
+			onDragEnd?.(event);
+		}
+	}, [
+		onDragEnd,
+		onReorder,
+		items,
+		getRowId
+	]);
+	const selectedRows = table.getSelectedRowModel().rows;
+	const columnCount = table.getHeaderGroups()[0].headers.length;
+	const isAnyRowSelected = selectedRows.length > 0 && !!ActionHeader;
+	const hasOnClick = !!onRowClick || !!onDoubleClick;
+	const tableElement = /* @__PURE__ */ jsxs("table", {
+		className: clsx("w-full", className),
+		...listeners,
+		children: [/* @__PURE__ */ jsxs("thead", {
+			className: clsx(theadCva({})),
+			"data-is-sticky": isSticky || void 0,
+			children: [/* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("th", {
+				ref: stickyRef,
+				className: "-mt-px block"
+			}) }), table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", {
+				className: clsx(tableHeadRowCva({})),
+				children: headerGroup.headers.filter((header) => {
+					if (isAnyRowSelected && header.index > 0) return false;
+					return header.column.getIsVisible();
+				}).map((header_0, index) => {
+					const columnMeta = header_0.column.columnDef.meta ?? {};
+					return /* @__PURE__ */ jsx("th", {
+						colSpan: isAnyRowSelected ? columnCount : header_0.colSpan,
+						tabIndex: -1,
+						className: clsx(tableHeadDataCva({ hasRightBorder: index > 0 && showCellBorder }), columnMeta.headerClass, columnMeta.width),
+						children: isAnyRowSelected ? /* @__PURE__ */ jsx(ActionHeader, { table }) : /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							"aria-label": "Sort column",
+							className: clsx("flex select-none items-center gap-1 text-surface-default-card-foreground", header_0.column.getCanSort() ? "h-6 cursor-pointer rounded-xs px-1 hover:bg-surface-default-background" : "cursor-default", columnMeta.sortClass),
+							onClick: header_0.column.getToggleSortingHandler(),
+							children: [typeof header_0.column.columnDef.header === "function" ? flexRender(header_0.column.columnDef.header, header_0.getContext()) : /* @__PURE__ */ jsx(HeaderText, { children: header_0.column.columnDef.header }), {
+								asc: /* @__PURE__ */ jsx(IconSlot, { icon: ChevronUp }),
+								desc: /* @__PURE__ */ jsx(IconSlot, { icon: ChevronDown })
+							}[header_0.column.getIsSorted()] ?? null]
+						})
+					}, header_0.id);
+				})
+			}, headerGroup.id))]
+		}), /* @__PURE__ */ jsx("tbody", {
+			ref,
+			className: "relative",
+			children: enableDragDrop ? /* @__PURE__ */ jsx(SortableRows, {
+				items: dataIds,
+				children: table.getRowModel().rows.map((row_0) => /* @__PURE__ */ jsx(DraggableRow, {
+					id: row_0.id,
+					className: clsx(tableRowCva({ ...props })),
+					isClickable: hasOnClick || row_0.getCanSelect(),
+					isSelected: row_0.getIsSelected(),
+					onClick: () => {
+						if (onRowClick) {
+							onRowClick(row_0.original);
+							return;
+						}
+						if (row_0.getCanSelect()) row_0.toggleSelected();
+					},
+					onDoubleClick: () => onDoubleClick?.(row_0.original),
+					children: row_0.getVisibleCells().map((cell, cellIndex) => {
+						const columnMeta_0 = cell.column.columnDef.meta ?? {};
+						return /* @__PURE__ */ jsx("td", {
+							tabIndex: -1,
+							className: clsx(tableDataCva({ hasRightBorder: cellIndex > 0 && showCellBorder }), columnMeta_0.cellClass, columnMeta_0.width),
+							children: renderCell(cell.column.columnDef.cell, CustomCellContext(cell.getContext()))
+						}, cell.id);
+					})
+				}, row_0.id))
+			}) : table.getRowModel().rows.map((row_1) => {
+				return /* @__PURE__ */ jsx("tr", {
+					className: clsx(tableRowCva({ ...props })),
+					onClick: () => {
+						if (onRowClick) {
+							onRowClick(row_1.original);
+							return;
+						}
+						if (row_1.getCanSelect()) row_1.toggleSelected();
+					},
+					onDoubleClick: () => onDoubleClick?.(row_1.original),
+					"data-clickable": hasOnClick || row_1.getCanSelect() || void 0,
+					"data-selected": row_1.getIsSelected() || void 0,
+					children: row_1.getVisibleCells().map((cell_0, cellIndex_0) => {
+						const columnMeta_1 = cell_0.column.columnDef.meta ?? {};
+						return /* @__PURE__ */ jsx("td", {
+							tabIndex: -1,
+							className: clsx(tableDataCva({ hasRightBorder: cellIndex_0 > 0 && showCellBorder }), columnMeta_1.cellClass, columnMeta_1.width),
+							children: renderCell(cell_0.column.columnDef.cell, CustomCellContext(cell_0.getContext()))
+						}, cell_0.id);
+					})
+				}, row_1.id);
+			})
+		})]
+	});
+	if (enableDragDrop) return /* @__PURE__ */ jsx(Suspense, {
+		fallback: null,
+		children: /* @__PURE__ */ jsx(DndProvider, {
+			onDragEnd: handleDragEnd,
+			children: tableElement
+		})
+	});
+	return tableElement;
+};
+//#endregion
+export { CellText as i, useTableNav as n, HeaderText as r, Table as t };

package/dist/Tag-AHfV_XSf.d.ts

@@ -0,0 +1,44 @@
+import { t as StyleMergeUtils } from "./style-merge.util-zLimKwt6.js";
+import { t as UIOverrides } from "./uiOverrides.context-DEp139He.js";
+import { n as TypographyProps } from "./Typography-XljT9s02.js";
+import { Ref } from "react";
+import { ButtonProps } from "react-aria-components";
+//#region src/components/text/Tag/tag.cva.d.ts
+declare const tagDefinition: {
+  base: string[];
+  config: StyleMergeUtils.Config<{
+    readonly color: {
+      primary: ["bg-interactive-subtle-primary-background text-interactive-subtle-primary-foreground", "not-disabled:not-pressed:hover:bg-state-interactive-subtle-primary-background/hover not-disabled:not-pressed:hover:text-state-interactive-subtle-primary-foreground/hover", "not-disabled:pressed:bg-state-interactive-subtle-primary-background/pressed not-disabled:pressed:text-state-interactive-subtle-primary-foreground/pressed", "disabled:bg-state-interactive-subtle-primary-background/disabled disabled:text-state-interactive-subtle-primary-foreground/disabled", "focus-visible:outline-interactive-ring"];
+      secondary: ["bg-interactive-subtle-secondary-background text-interactive-subtle-secondary-foreground", "not-disabled:not-pressed:hover:bg-state-interactive-subtle-secondary-background/hover not-disabled:not-pressed:hover:text-state-interactive-subtle-secondary-foreground/hover", "not-disabled:pressed:bg-state-interactive-subtle-secondary-background/pressed not-disabled:pressed:text-state-interactive-subtle-secondary-foreground/pressed", "disabled:bg-state-interactive-subtle-secondary-background/disabled disabled:text-state-interactive-subtle-secondary-foreground/disabled", "focus-visible:outline-interactive-ring"];
+      success: ["bg-surface-success-inverted-base text-surface-success-base", "not-disabled:not-pressed:hover:bg-state-surface-success-inverted-base/hover not-disabled:not-pressed:hover:text-state-surface-success-base/hover", "not-disabled:pressed:bg-state-surface-success-inverted-base/pressed not-disabled:pressed:text-state-surface-success-base/pressed", "disabled:bg-state-surface-success-inverted-base/disabled disabled:text-state-surface-success-base/disabled", "focus-visible:outline-interactive-ring"];
+      warning: ["bg-surface-warning-inverted-base text-surface-warning-base", "not-disabled:not-pressed:hover:bg-state-surface-warning-inverted-base/hover not-disabled:not-pressed:hover:text-state-surface-warning-base/hover", "not-disabled:pressed:bg-state-surface-warning-inverted-base/pressed not-disabled:pressed:text-state-surface-warning-base/pressed", "disabled:bg-state-surface-warning-inverted-base/disabled disabled:text-state-surface-warning-base/disabled", "focus-visible:outline-interactive-ring"];
+      error: ["bg-interactive-subtle-destructive-background text-interactive-subtle-destructive-foreground", "not-disabled:not-pressed:hover:bg-state-interactive-subtle-destructive-background/hover not-disabled:not-pressed:hover:text-state-interactive-subtle-destructive-foreground/hover", "not-disabled:pressed:bg-state-interactive-subtle-destructive-background/pressed not-disabled:pressed:text-state-interactive-subtle-destructive-foreground/pressed", "disabled:bg-state-interactive-subtle-destructive-background/disabled disabled:text-state-interactive-subtle-destructive-foreground/disabled", "focus-visible:outline-interactive-ring"];
+    };
+  }>;
+};
+type TagConfig = NonNullable<typeof tagDefinition.config>;
+interface TagVariantProps extends UIOverrides.VariantProps<TagConfig> {}
+//#endregion
+//#region src/components/text/Tag/Tag.d.ts
+interface TagProps extends TagVariantProps {
+  className?: string;
+  children: string;
+  /** Preferred spelling. `dismissable` remains supported. */
+  dismissible?: boolean;
+  dismissable?: boolean;
+  isDisabled?: boolean;
+  disabled?: boolean;
+  contentRef?: Ref<HTMLElement>;
+  textSize?: TypographyProps["size"];
+  /** Preferred callback name. */
+  onRemove?: () => void;
+  onDismiss?: () => void;
+  /** Props applied to the actual dismiss button, when one is rendered. */
+  dismissButtonProps?: Omit<ButtonProps, "children" | "onPress">;
+  excludeFromTabOrder?: boolean;
+  /** Compatibility callback for the historical button-like prop surface. */
+  onPress?: ButtonProps["onPress"];
+}
+declare const Tag: ({ className, children, dismissible, dismissable, isDisabled, disabled, onRemove, onDismiss, dismissButtonProps, excludeFromTabOrder, onPress, contentRef, textSize: textSizeProp, ...appearanceProps }: TagProps) => import("react").JSX.Element;
+//#endregion
+export { tagDefinition as i, TagProps as n, TagVariantProps as r, Tag as t };