@galaxy-io/dls 1.2.6 → 1.3.0

package/dist/table/SpreadsheetRow.js

@@ -0,0 +1,73 @@
+import { ROW_INDEX_ATTRIBUTE } from "./useTableKeyboardNavigation.js";
+import { TableDataCell, TableRow } from "./TablePrimitives.js";
+import { ActionColumnSpacerCell } from "./SpreadsheetPrimitives.js";
+import SpreadsheetRowActionCell from "./SpreadsheetRowActionCell.js";
+import SpreadsheetCell from "./SpreadsheetCell.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/table/SpreadsheetRow.tsx
+function SpreadsheetRowInner({ rowData, rowIndex, translateY, rowHeight, isLastRow, density, variant, columns, pinnedOffsets, getColumnWidth, editingCell, onStartEditing, onCommitEditing, onCancelEditing, rowActions, rowActionsAriaLabel, showActionColumn, tabIndex, onFocus, onKeyDown }) {
+	return /* @__PURE__ */ jsxs(TableRow, {
+		$density: density,
+		$variant: variant,
+		$isLastRow: isLastRow,
+		$translateY: translateY,
+		$rowHeight: rowHeight,
+		role: "row",
+		"aria-rowindex": rowIndex + 2,
+		tabIndex,
+		onFocus,
+		onKeyDown,
+		[ROW_INDEX_ATTRIBUTE]: rowIndex,
+		children: [columns.map((col, columnIndex) => rowData ? /* @__PURE__ */ jsx(SpreadsheetCell, {
+			column: col,
+			row: rowData,
+			rowIndex,
+			columnIndex,
+			isEditing: editingCell?.rowIndex === rowIndex && editingCell?.columnId === col.id,
+			onStartEditing: () => onStartEditing(rowIndex, col.id),
+			onCommit: (value) => {
+				col.onCellChange?.(rowIndex, rowData, value);
+				onCommitEditing();
+			},
+			onCancel: onCancelEditing,
+			width: getColumnWidth(col),
+			pin: col.pin,
+			pinnedOffset: pinnedOffsets.get(col.id),
+			align: col.align,
+			density,
+			variant
+		}, col.id) : /* @__PURE__ */ jsx(TableDataCell, {
+			$width: getColumnWidth(col),
+			$minWidth: col.minSize,
+			$maxWidth: col.maxSize,
+			$pin: col.pin,
+			$pinnedOffset: pinnedOffsets.get(col.id),
+			$align: col.align,
+			$density: density,
+			$variant: variant,
+			role: "gridcell",
+			"aria-colindex": columnIndex + 1,
+			children: col.cellLoading ? col.cellLoading() : null
+		}, col.id)), showActionColumn && (rowData && rowActions && rowActions.length > 0 ? /* @__PURE__ */ jsx(SpreadsheetRowActionCell, {
+			row: rowData,
+			rowIndex,
+			columnIndex: columns.length,
+			actions: rowActions,
+			variant,
+			ariaLabel: rowActionsAriaLabel
+		}) : /* @__PURE__ */ jsx(ActionColumnSpacerCell, {
+			$variant: variant,
+			role: "gridcell"
+		}))]
+	});
+}
+/**
+* Default shallow comparison: `columns`, `getColumnWidth` and `pinnedOffsets`
+* are all memoized upstream, so every prop that affects the output takes part.
+* A hand-written comparator here previously dropped `rowHeight`, which left
+* mounted rows at a stale height whenever density changed.
+*/
+var SpreadsheetRow = React.memo(SpreadsheetRowInner);
+//#endregion
+export { SpreadsheetRow as default };

package/dist/{spreadsheet → table}/SpreadsheetRowActionCell.d.ts

@@ -1,16 +1,14 @@
 import React from "react";
-import type { SpreadsheetRowAction } from "./types";
+import { TableVariant, type SpreadsheetRowAction } from "./types";
 export interface SpreadsheetRowActionCellProps<TData> {
     row: TData;
     rowIndex: number;
+    columnIndex: number;
     actions: SpreadsheetRowAction<TData>[];
+    variant: TableVariant;
     pinnedOffset?: number;
+    ariaLabel?: string;
 }
-export interface ActionCellDropdownItemProps {
-    icon?: React.ReactNode;
-    label: string;
-    onClick: () => void;
-}
-declare function SpreadsheetRowActionCellInner<TData>({ row, rowIndex, actions, pinnedOffset, }: SpreadsheetRowActionCellProps<TData>): React.JSX.Element;
+declare function SpreadsheetRowActionCellInner<TData>({ row, rowIndex, columnIndex, actions, variant, pinnedOffset, ariaLabel, }: SpreadsheetRowActionCellProps<TData>): React.JSX.Element;
 declare const SpreadsheetRowActionCell: typeof SpreadsheetRowActionCellInner;
 export default SpreadsheetRowActionCell;

package/dist/table/SpreadsheetRowActionCell.js

@@ -0,0 +1,51 @@
+import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
+import FlexWrapper, { FlexDirection } from "../containers/FlexWrapper.js";
+import Dropdown, { DropdownPosition } from "../dropdown/Dropdown.js";
+import SpreadsheetMenuItem from "./SpreadsheetMenuItem.js";
+import { ActionColumnCell } from "./SpreadsheetPrimitives.js";
+import React, { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { DotsThreeVerticalIcon } from "@phosphor-icons/react";
+//#region src/table/SpreadsheetRowActionCell.tsx
+function SpreadsheetRowActionCellInner({ row, rowIndex, columnIndex, actions, variant, pinnedOffset, ariaLabel }) {
+	const [isOpen, setIsOpen] = useState(false);
+	return /* @__PURE__ */ jsx(ActionColumnCell, {
+		$variant: variant,
+		$pinnedOffset: pinnedOffset,
+		role: "gridcell",
+		"aria-colindex": columnIndex + 1,
+		children: /* @__PURE__ */ jsx(Dropdown, {
+			body: /* @__PURE__ */ jsx(FlexWrapper, {
+				direction: FlexDirection.COLUMN,
+				gap: 2,
+				children: actions.map((action) => /* @__PURE__ */ jsx(SpreadsheetMenuItem, {
+					icon: action.icon,
+					label: action.label,
+					onClick: () => {
+						action.onAction(rowIndex, row);
+						setIsOpen(false);
+					}
+				}, action.id))
+			}),
+			position: DropdownPosition.BOTTOM_END,
+			isOpen,
+			onClose: () => setIsOpen(false),
+			minWidth: 140,
+			children: /* @__PURE__ */ jsx(Button, {
+				icon: DotsThreeVerticalIcon,
+				variant: ButtonVariant.TERTIARY,
+				size: ButtonSize.SMALL,
+				ariaLabel: ariaLabel ?? `Actions for row ${rowIndex + 1}`,
+				ariaExpanded: isOpen,
+				ariaHasPopup: true,
+				onClick: (event) => {
+					event.stopPropagation();
+					setIsOpen(!isOpen);
+				}
+			})
+		})
+	});
+}
+var SpreadsheetRowActionCell = React.memo(SpreadsheetRowActionCellInner);
+//#endregion
+export { SpreadsheetRowActionCell as default };

package/dist/table/TableExpandCell.d.ts

@@ -0,0 +1,11 @@
+import { TableDensity } from "./types";
+interface TableExpandCellProps {
+    isExpanded: boolean;
+    density: TableDensity;
+    /** Id of the panel this toggle controls, for `aria-controls`. */
+    expandedPanelId: string;
+    ariaLabel?: string;
+    onToggle: () => void;
+}
+declare const TableExpandCell: ({ isExpanded, density, expandedPanelId, ariaLabel, onToggle, }: TableExpandCellProps) => import("react").JSX.Element;
+export default TableExpandCell;

package/dist/table/TableExpandCell.js

@@ -0,0 +1,24 @@
+import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
+import { TableDensity } from "./types.js";
+import { jsx } from "react/jsx-runtime";
+import { CaretDownIcon, CaretRightIcon } from "@phosphor-icons/react";
+//#region src/table/TableExpandCell.tsx
+var DENSITY_TO_BUTTON_SIZE_MAP = {
+	[TableDensity.SMALL]: ButtonSize.SMALL,
+	[TableDensity.MEDIUM]: ButtonSize.SMALL,
+	[TableDensity.LARGE]: ButtonSize.MEDIUM
+};
+var TableExpandCell = ({ isExpanded, density, expandedPanelId, ariaLabel, onToggle }) => /* @__PURE__ */ jsx(Button, {
+	ariaExpanded: isExpanded,
+	ariaControls: isExpanded ? expandedPanelId : void 0,
+	ariaLabel: ariaLabel ?? (isExpanded ? "Collapse row" : "Expand row"),
+	icon: isExpanded ? CaretDownIcon : CaretRightIcon,
+	onClick: (event) => {
+		event.stopPropagation();
+		onToggle();
+	},
+	variant: ButtonVariant.TERTIARY,
+	size: DENSITY_TO_BUTTON_SIZE_MAP[density]
+});
+//#endregion
+export { TableExpandCell as default };

package/dist/table/TableExpandedRow.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import { TableVariant } from "./types";
+interface TableExpandedRowProps {
+    /** Id referenced by the toggle's `aria-controls`. */
+    panelId: string;
+    variant: TableVariant;
+    colSpan: number;
+    rowMinWidth: number;
+    /** Scroll container's client width, so the panel matches the visible area. */
+    viewportWidth?: number;
+    gutterWidth: number;
+    isLastRow: boolean;
+    children: ReactNode;
+}
+declare const TableExpandedRow: ({ panelId, variant, colSpan, rowMinWidth, viewportWidth, gutterWidth, isLastRow, children, }: TableExpandedRowProps) => import("react").JSX.Element;
+export default TableExpandedRow;

package/dist/table/TableExpandedRow.js

@@ -0,0 +1,77 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+import { getVariantBackgroundColor } from "./utils.js";
+/* empty css                           */
+import { styled } from "@linaria/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/table/TableExpandedRow.tsx
+var _exp = () => ({ $rowMinWidth }) => `${$rowMinWidth}px`;
+var ExpandedRow = /*#__PURE__*/ styled("tr")({
+	name: "ExpandedRow",
+	class: "emhaytw",
+	propsAsIs: false,
+	vars: { "emhaytw-0": [_exp()] }
+});
+var _exp2 = () => ({ $variant, theme }) => getVariantBackgroundColor(theme, $variant);
+var _exp3 = () => ({ $isLastRow, theme }) => $isLastRow ? "none" : `0.5px solid ${theme.color.border.primary}`;
+var ExpandedRowCell = withTheme(/*#__PURE__*/ styled("td")({
+	name: "ExpandedRowCell",
+	class: "e11cd6rt",
+	propsAsIs: false,
+	vars: {
+		"e11cd6rt-0": [_exp2()],
+		"e11cd6rt-1": [_exp3()]
+	}
+}));
+/**
+* Sticky-left so the panel stays pinned to the visible width while the table
+* scrolls horizontally; vertical scrolling is native table flow.
+*/
+var _exp4 = () => ({ $width }) => $width !== void 0 ? `${$width}px` : "100%";
+var _exp5 = () => ({ $gutterWidth }) => `${$gutterWidth}px minmax(0, 1fr)`;
+var ExpandedViewport = /*#__PURE__*/ styled("div")({
+	name: "ExpandedViewport",
+	class: "eg2e964",
+	propsAsIs: false,
+	vars: {
+		"eg2e964-0": [_exp4()],
+		"eg2e964-1": [_exp5()]
+	}
+});
+var _exp6 = () => ({ $variant, theme }) => getVariantBackgroundColor(theme, $variant);
+var _exp7 = () => ({ theme }) => theme.color.border.primary;
+var ExpandedGutter = withTheme(/*#__PURE__*/ styled("div")({
+	name: "ExpandedGutter",
+	class: "e1s9jmet",
+	propsAsIs: false,
+	vars: {
+		"e1s9jmet-0": [_exp6()],
+		"e1s9jmet-1": [_exp7()]
+	}
+}));
+var _exp8 = () => ({ theme }) => theme.color.border.primary;
+var ExpandedBody = withTheme(/*#__PURE__*/ styled("div")({
+	name: "ExpandedBody",
+	class: "e1yjhd51",
+	propsAsIs: false,
+	vars: { "e1yjhd51-0": [_exp8()] }
+}));
+var TableExpandedRow = ({ panelId, variant, colSpan, rowMinWidth, viewportWidth, gutterWidth, isLastRow, children }) => /* @__PURE__ */ jsx(ExpandedRow, {
+	$rowMinWidth: rowMinWidth,
+	role: "row",
+	children: /* @__PURE__ */ jsx(ExpandedRowCell, {
+		colSpan,
+		$variant: variant,
+		$isLastRow: isLastRow,
+		role: "cell",
+		children: /* @__PURE__ */ jsxs(ExpandedViewport, {
+			$width: viewportWidth,
+			$gutterWidth: gutterWidth,
+			children: [/* @__PURE__ */ jsx(ExpandedGutter, { $variant: variant }), /* @__PURE__ */ jsx(ExpandedBody, {
+				id: panelId,
+				children
+			})]
+		})
+	})
+});
+//#endregion
+export { TableExpandedRow as default };

package/dist/table/TableHeaderCellContent.d.ts

@@ -0,0 +1,30 @@
+export type SortDirection = "asc" | "desc" | false;
+export declare const TableHeaderLabel: ({ children }: {
+    children: React.ReactNode;
+}) => import("react").JSX.Element;
+interface ColumnResizeControls {
+    columnId: string;
+    columnLabel: string;
+    isResizing: boolean;
+    bounds: {
+        min: number;
+        max: number;
+        current: number | undefined;
+    };
+    onResizeStart: (columnId: string, clientX: number, measuredWidth?: number) => void;
+    onResizeKeyDown: (columnId: string, event: React.KeyboardEvent) => void;
+}
+interface TableHeaderCellContentProps {
+    /** Custom header node, or a plain string that gets the default treatment. */
+    content: React.ReactNode;
+    isSortable: boolean;
+    sortDirection: SortDirection;
+    /**
+     * Affordance pinned to the cell's trailing edge, ahead of the resize handle —
+     * a menu trigger, for instance. Passing it makes the label take the slack.
+     */
+    trailing?: React.ReactNode;
+    resize?: ColumnResizeControls;
+}
+declare const TableHeaderCellContent: ({ content, isSortable, sortDirection, trailing, resize, }: TableHeaderCellContentProps) => import("react").JSX.Element;
+export default TableHeaderCellContent;

package/dist/table/TableHeaderCellContent.js

@@ -0,0 +1,48 @@
+import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
+import Icon, { IconVariant } from "../icons/Icon.js";
+import { ColumnResizeHandle, HeaderContentWrapper, HeaderTrailingWrapper, SortIconWrapper } from "./TablePrimitives.js";
+import { match } from "ts-pattern";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CaretUpDownIcon, SortAscendingIcon, SortDescendingIcon } from "@phosphor-icons/react";
+//#region src/table/TableHeaderCellContent.tsx
+var TableHeaderLabel = ({ children }) => /* @__PURE__ */ jsx(Text, {
+	variant: TextVariant.TERTIARY,
+	weight: TextWeight.MEDIUM,
+	size: TextSize.BODY_SM,
+	children
+});
+var renderSortIcon = (sortDirection) => match(sortDirection).with("asc", () => SortAscendingIcon).with("desc", () => SortDescendingIcon).with(false, () => CaretUpDownIcon).exhaustive();
+var TableHeaderCellContent = ({ content, isSortable, sortDirection, trailing, resize }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+	/* @__PURE__ */ jsxs(HeaderContentWrapper, {
+		$grow: Boolean(trailing),
+		children: [typeof content === "string" ? /* @__PURE__ */ jsx(TableHeaderLabel, { children: content }) : content, isSortable && /* @__PURE__ */ jsx(SortIconWrapper, { children: /* @__PURE__ */ jsx(Icon, {
+			component: renderSortIcon(sortDirection),
+			size: 12,
+			variant: IconVariant.TERTIARY
+		}) })]
+	}),
+	trailing && /* @__PURE__ */ jsx(HeaderTrailingWrapper, { children: trailing }),
+	resize && /* @__PURE__ */ jsx(ColumnResizeHandle, {
+		$isResizing: resize.isResizing,
+		role: "separator",
+		"aria-orientation": "vertical",
+		"aria-label": `Resize ${resize.columnLabel}`,
+		"aria-valuenow": resize.bounds.current,
+		"aria-valuemin": resize.bounds.min,
+		"aria-valuemax": resize.bounds.max,
+		tabIndex: 0,
+		onPointerDown: (event) => {
+			event.stopPropagation();
+			event.preventDefault();
+			const headerCell = event.currentTarget.closest("th");
+			resize.onResizeStart(resize.columnId, event.clientX, headerCell?.getBoundingClientRect().width);
+		},
+		onClick: (event) => event.stopPropagation(),
+		onKeyDown: (event) => {
+			event.stopPropagation();
+			resize.onResizeKeyDown(resize.columnId, event);
+		}
+	})
+] });
+//#endregion
+export { TableHeaderLabel, TableHeaderCellContent as default };

package/dist/table/TablePrimitives.d.ts

@@ -0,0 +1,307 @@
+import { ColumnAlign, ColumnPin, TableDensity, TableVariant } from "./types";
+/**
+ * Shared styled leaves for InfiniteTable and VirtualizedInfiniteTable.
+ *
+ * Every export here is non-generic on purpose: `withTheme` erases type
+ * parameters, so generic row/cell renderers compose these rather than being
+ * wrapped themselves.
+ *
+ * The table elements are laid out with flex, which strips their implicit ARIA
+ * roles — callers must pass explicit `role` attributes.
+ */
+export declare const TableOuterContainer: import("react").ComponentType<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    $width?: number | string;
+    $height?: number | string;
+    $fillWidth?: boolean;
+    $fillHeight?: boolean;
+} & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}, "$width" | "$height" | "$fillWidth" | "$fillHeight" | keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement> | "as"> & {
+    theme?: import("@callstack/react-theme-provider").$DeepPartial<import("../theme").Theme> | undefined;
+}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    $width?: number | string;
+    $height?: number | string;
+    $fillWidth?: boolean;
+    $fillHeight?: boolean;
+} & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}> & {
+    __wyw_meta: unknown;
+} & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    $width?: number | string;
+    $height?: number | string;
+    $fillWidth?: boolean;
+    $fillHeight?: boolean;
+} & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}>, {}>;
+/**
+ * Deliberately not wrapped in `withTheme` — it receives a ref, and the
+ * `withTheme` HOC does not forward one.
+ */
+export declare const TableScrollContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    $noLastRowPadding?: boolean;
+}>;
+/**
+ * `min-width` is the sum of the resolved column widths, so a table whose fixed
+ * columns overflow scrolls horizontally instead of squashing — while a table of
+ * flexible columns still fills its container.
+ */
+export declare const StyledTable: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLTableElement> & import("react").TableHTMLAttributes<HTMLTableElement> & {
+    $rowMinWidth: number;
+}>;
+export declare const TableHead: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLTableSectionElement> & import("react").HTMLAttributes<HTMLTableSectionElement> & Record<never, unknown>>;
+export declare const TableBody: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLTableSectionElement> & import("react").HTMLAttributes<HTMLTableSectionElement> & {
+    $virtualHeight?: number;
+}>;
+export declare const TableHeaderRow: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLTableRowElement> & import("react").HTMLAttributes<HTMLTableRowElement> & Record<never, unknown>>;
+export declare const TableRow: import("react").ComponentType<Pick<import("react").ClassAttributes<HTMLTableRowElement> & import("react").HTMLAttributes<HTMLTableRowElement> & {
+    $isClickable?: boolean;
+    $isSelected?: boolean;
+    $density?: TableDensity;
+    $variant?: TableVariant;
+    $isLastRow?: boolean;
+    $isExpanded?: boolean;
+    $translateY?: number;
+    $rowHeight?: number;
+} & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}, "as" | "$variant" | "$isSelected" | "$isClickable" | "$density" | "$isLastRow" | "$isExpanded" | "$translateY" | "$rowHeight" | keyof import("react").ClassAttributes<HTMLTableRowElement> | keyof import("react").HTMLAttributes<HTMLTableRowElement>> & {
+    theme?: import("@callstack/react-theme-provider").$DeepPartial<import("../theme").Theme> | undefined;
+}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<import("react").ClassAttributes<HTMLTableRowElement> & import("react").HTMLAttributes<HTMLTableRowElement> & {
+    $isClickable?: boolean;
+    $isSelected?: boolean;
+    $density?: TableDensity;
+    $variant?: TableVariant;
+    $isLastRow?: boolean;
+    $isExpanded?: boolean;
+    $translateY?: number;
+    $rowHeight?: number;
+} & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}> & {
+    __wyw_meta: unknown;
+} & import("react").FunctionComponent<import("react").ClassAttributes<HTMLTableRowElement> & import("react").HTMLAttributes<HTMLTableRowElement> & {
+    $isClickable?: boolean;
+    $isSelected?: boolean;
+    $density?: TableDensity;
+    $variant?: TableVariant;
+    $isLastRow?: boolean;
+    $isExpanded?: boolean;
+    $translateY?: number;
+    $rowHeight?: number;
+} & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}>, {}>;
+export declare const TableLoadingRow: import("react").ComponentType<Pick<import("react").ClassAttributes<HTMLTableRowElement> & import("react").HTMLAttributes<HTMLTableRowElement> & {
+    $density?: TableDensity;
+    $variant?: TableVariant;
+} & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}, "as" | "$variant" | "$density" | keyof import("react").ClassAttributes<HTMLTableRowElement> | keyof import("react").HTMLAttributes<HTMLTableRowElement>> & {
+    theme?: import("@callstack/react-theme-provider").$DeepPartial<import("../theme").Theme> | undefined;
+}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<import("react").ClassAttributes<HTMLTableRowElement> & import("react").HTMLAttributes<HTMLTableRowElement> & {
+    $density?: TableDensity;
+    $variant?: TableVariant;
+} & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}> & {
+    __wyw_meta: unknown;
+} & import("react").FunctionComponent<import("react").ClassAttributes<HTMLTableRowElement> & import("react").HTMLAttributes<HTMLTableRowElement> & {
+    $density?: TableDensity;
+    $variant?: TableVariant;
+} & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}>, {}>;
+export declare const TableHeaderCell: import("react").ComponentType<Pick<import("react").ClassAttributes<HTMLTableHeaderCellElement> & import("react").ThHTMLAttributes<HTMLTableHeaderCellElement> & {
+    $width?: number;
+    $minWidth?: number;
+    $maxWidth?: number;
+    $pin?: ColumnPin;
+    $pinnedOffset?: number;
+    $align?: ColumnAlign;
+    $isSortable?: boolean;
+    $density?: TableDensity;
+    $variant?: TableVariant;
+    $isCompact?: boolean;
+} & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}, "$width" | "$minWidth" | "$maxWidth" | "as" | "$variant" | "$align" | keyof import("react").ClassAttributes<HTMLTableHeaderCellElement> | keyof import("react").ThHTMLAttributes<HTMLTableHeaderCellElement> | "$pinnedOffset" | "$density" | "$pin" | "$isSortable" | "$isCompact"> & {
+    theme?: import("@callstack/react-theme-provider").$DeepPartial<import("../theme").Theme> | undefined;
+}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<import("react").ClassAttributes<HTMLTableHeaderCellElement> & import("react").ThHTMLAttributes<HTMLTableHeaderCellElement> & {
+    $width?: number;
+    $minWidth?: number;
+    $maxWidth?: number;
+    $pin?: ColumnPin;
+    $pinnedOffset?: number;
+    $align?: ColumnAlign;
+    $isSortable?: boolean;
+    $density?: TableDensity;
+    $variant?: TableVariant;
+    $isCompact?: boolean;
+} & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}> & {
+    __wyw_meta: unknown;
+} & import("react").FunctionComponent<import("react").ClassAttributes<HTMLTableHeaderCellElement> & import("react").ThHTMLAttributes<HTMLTableHeaderCellElement> & {
+    $width?: number;
+    $minWidth?: number;
+    $maxWidth?: number;
+    $pin?: ColumnPin;
+    $pinnedOffset?: number;
+    $align?: ColumnAlign;
+    $isSortable?: boolean;
+    $density?: TableDensity;
+    $variant?: TableVariant;
+    $isCompact?: boolean;
+} & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}>, {}>;
+export declare const TableDataCell: import("react").ComponentType<Pick<import("react").ClassAttributes<HTMLTableDataCellElement> & import("react").TdHTMLAttributes<HTMLTableDataCellElement> & {
+    $width?: number;
+    $minWidth?: number;
+    $maxWidth?: number;
+    $pin?: ColumnPin;
+    $pinnedOffset?: number;
+    $align?: ColumnAlign;
+    $density?: TableDensity;
+    $variant?: TableVariant;
+    $isCompact?: boolean;
+    /**
+     * Makes the cell a containing block for absolutely-positioned children —
+     * an inline editor overlay, for instance. Without it the nearest
+     * positioned ancestor is the row, which in a virtualized body is
+     * `position: absolute`, so `inset: 0` would cover the whole row.
+     */
+    $isPositioned?: boolean;
+    /**
+     * Marks a cell the user can act on directly — an editable spreadsheet cell,
+     * for instance. Gives it a text cursor and its own hover background,
+     * independent of whether the whole row is clickable.
+     */
+    $isEditable?: boolean;
+} & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}, "$width" | "$minWidth" | "$maxWidth" | "as" | "$variant" | "$align" | "$pinnedOffset" | keyof import("react").ClassAttributes<HTMLTableDataCellElement> | keyof import("react").TdHTMLAttributes<HTMLTableDataCellElement> | "$density" | "$pin" | "$isCompact" | "$isPositioned" | "$isEditable"> & {
+    theme?: import("@callstack/react-theme-provider").$DeepPartial<import("../theme").Theme> | undefined;
+}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<import("react").ClassAttributes<HTMLTableDataCellElement> & import("react").TdHTMLAttributes<HTMLTableDataCellElement> & {
+    $width?: number;
+    $minWidth?: number;
+    $maxWidth?: number;
+    $pin?: ColumnPin;
+    $pinnedOffset?: number;
+    $align?: ColumnAlign;
+    $density?: TableDensity;
+    $variant?: TableVariant;
+    $isCompact?: boolean;
+    /**
+     * Makes the cell a containing block for absolutely-positioned children —
+     * an inline editor overlay, for instance. Without it the nearest
+     * positioned ancestor is the row, which in a virtualized body is
+     * `position: absolute`, so `inset: 0` would cover the whole row.
+     */
+    $isPositioned?: boolean;
+    /**
+     * Marks a cell the user can act on directly — an editable spreadsheet cell,
+     * for instance. Gives it a text cursor and its own hover background,
+     * independent of whether the whole row is clickable.
+     */
+    $isEditable?: boolean;
+} & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}> & {
+    __wyw_meta: unknown;
+} & import("react").FunctionComponent<import("react").ClassAttributes<HTMLTableDataCellElement> & import("react").TdHTMLAttributes<HTMLTableDataCellElement> & {
+    $width?: number;
+    $minWidth?: number;
+    $maxWidth?: number;
+    $pin?: ColumnPin;
+    $pinnedOffset?: number;
+    $align?: ColumnAlign;
+    $density?: TableDensity;
+    $variant?: TableVariant;
+    $isCompact?: boolean;
+    /**
+     * Makes the cell a containing block for absolutely-positioned children —
+     * an inline editor overlay, for instance. Without it the nearest
+     * positioned ancestor is the row, which in a virtualized body is
+     * `position: absolute`, so `inset: 0` would cover the whole row.
+     */
+    $isPositioned?: boolean;
+    /**
+     * Marks a cell the user can act on directly — an editable spreadsheet cell,
+     * for instance. Gives it a text cursor and its own hover background,
+     * independent of whether the whole row is clickable.
+     */
+    $isEditable?: boolean;
+} & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}>, {}>;
+export declare const HeaderContentWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    $grow?: boolean;
+}>;
+/** Holds a trailing affordance — a menu trigger, say — at the cell's far edge. */
+export declare const HeaderTrailingWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const SortIconWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+/**
+ * Grab area pinned to the trailing edge of a resizable header cell.
+ *
+ * The area is wide enough to grab comfortably, but the indicator sits flush
+ * against the trailing edge — centring it inside the grab area would leave it
+ * floating a few pixels short of the column border it represents.
+ */
+export declare const ColumnResizeHandle: import("react").ComponentType<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    $isResizing?: boolean;
+} & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement> | "as" | "$isResizing"> & {
+    theme?: import("@callstack/react-theme-provider").$DeepPartial<import("../theme").Theme> | undefined;
+}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    $isResizing?: boolean;
+} & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}> & {
+    __wyw_meta: unknown;
+} & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    $isResizing?: boolean;
+} & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}>, {}>;
+/** Sentinel that drives infinite scroll; carries no visual weight. */
+export declare const InfiniteScrollSentinel: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;