@galaxy-io/dls 1.2.6 → 1.3.0

package/dist/table/TablePrimitives.js

@@ -0,0 +1,298 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+import { getCssSizeValue } from "../utils/linaria.js";
+import { ColumnAlign, ColumnPin } from "./types.js";
+import { getDensityCellPadding, getDensityRowHeight, getVariantBackgroundColor, getVariantHoverBackgroundColor, getVariantSelectedBackgroundColor } from "./utils.js";
+/* empty css                          */
+import { styled } from "@linaria/react";
+import { match } from "ts-pattern";
+//#region src/table/TablePrimitives.tsx
+/**
+* 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.
+*/
+var _exp = () => ({ $width, $fillWidth }) => {
+	if ($fillWidth) return "100%";
+	if ($width) return getCssSizeValue($width);
+	return "auto";
+};
+var _exp2 = () => ({ $height, $fillHeight }) => {
+	if ($fillHeight) return "100%";
+	if ($height) return getCssSizeValue($height);
+	return "auto";
+};
+var TableOuterContainer = withTheme(/*#__PURE__*/ styled("div")({
+	name: "TableOuterContainer",
+	class: "tldpbjd",
+	propsAsIs: false,
+	vars: {
+		"tldpbjd-0": [_exp()],
+		"tldpbjd-1": [_exp2()]
+	}
+}));
+/**
+* Deliberately not wrapped in `withTheme` — it receives a ref, and the
+* `withTheme` HOC does not forward one.
+*/
+var _exp3 = () => ({ $noLastRowPadding }) => $noLastRowPadding ? "0" : "8px";
+var TableScrollContainer = /*#__PURE__*/ styled("div")({
+	name: "TableScrollContainer",
+	class: "t1ltwowk",
+	propsAsIs: false,
+	vars: { "t1ltwowk-0": [_exp3()] }
+});
+/**
+* `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.
+*/
+var _exp4 = () => ({ $rowMinWidth }) => `${$rowMinWidth}px`;
+var StyledTable = /*#__PURE__*/ styled("table")({
+	name: "StyledTable",
+	class: "sfoers7",
+	propsAsIs: false,
+	vars: { "sfoers7-0": [_exp4()] }
+});
+var TableHead = /*#__PURE__*/ styled("thead")({
+	name: "TableHead",
+	class: "tmoy46",
+	propsAsIs: false
+});
+var _exp5 = () => ({ $virtualHeight }) => $virtualHeight !== void 0 ? `${$virtualHeight}px` : "auto";
+var TableBody = /*#__PURE__*/ styled("tbody")({
+	name: "TableBody",
+	class: "tyata5l",
+	propsAsIs: false,
+	vars: { "tyata5l-0": [_exp5()] }
+});
+var TableHeaderRow = /*#__PURE__*/ styled("tr")({
+	name: "TableHeaderRow",
+	class: "tr9kpwl",
+	propsAsIs: false
+});
+var _exp6 = () => ({ $isClickable }) => $isClickable ? "pointer" : "default";
+var _exp7 = () => ({ $density, $rowHeight }) => $rowHeight !== void 0 ? `${$rowHeight}px` : getDensityRowHeight($density);
+var _exp8 = () => ({ $translateY }) => $translateY !== void 0 ? "absolute" : "static";
+var _exp9 = () => ({ $translateY }) => $translateY !== void 0 ? `translateY(${$translateY}px)` : "none";
+var _exp0 = () => ({ theme }) => theme.color.border.selected;
+var _exp1 = () => ({ $isSelected, $variant, theme }) => $isSelected ? getVariantSelectedBackgroundColor(theme, $variant) : getVariantBackgroundColor(theme, $variant);
+var _exp10 = () => ({ $isExpanded, $isLastRow, theme }) => {
+	if ($isExpanded || $isLastRow) return "none";
+	return `0.5px solid ${theme.color.border.primary}`;
+};
+var _exp11 = () => ({ $isClickable, $isSelected, $variant, theme }) => {
+	if ($isSelected) return getVariantSelectedBackgroundColor(theme, $variant);
+	if ($isClickable) return getVariantHoverBackgroundColor(theme, $variant);
+	return getVariantBackgroundColor(theme, $variant);
+};
+var TableRow = withTheme(/*#__PURE__*/ styled("tr")({
+	name: "TableRow",
+	class: "t1ae7muk",
+	propsAsIs: false,
+	vars: {
+		"t1ae7muk-0": [_exp6()],
+		"t1ae7muk-1": [_exp7()],
+		"t1ae7muk-2": [_exp8()],
+		"t1ae7muk-3": [_exp9()],
+		"t1ae7muk-4": [_exp0()],
+		"t1ae7muk-5": [_exp1()],
+		"t1ae7muk-6": [_exp10()],
+		"t1ae7muk-7": [_exp11()]
+	}
+}));
+var _exp12 = () => ({ $density }) => getDensityRowHeight($density);
+var _exp13 = () => ({ theme }) => theme.color.border.primary;
+var _exp14 = () => ({ $variant, theme }) => getVariantBackgroundColor(theme, $variant);
+var TableLoadingRow = withTheme(/*#__PURE__*/ styled("tr")({
+	name: "TableLoadingRow",
+	class: "t5udbsy",
+	propsAsIs: false,
+	vars: {
+		"t5udbsy-0": [_exp12()],
+		"t5udbsy-1": [_exp13()],
+		"t5udbsy-2": [_exp14()]
+	}
+}));
+var _exp15 = () => ({ $density, $isCompact }) => $isCompact ? "4px 6px" : getDensityCellPadding($density);
+var _exp16 = () => ({ $width }) => {
+	if ($width) return `0 0 ${$width}px`;
+	return "1 1 0";
+};
+var _exp17 = () => ({ $minWidth }) => {
+	if ($minWidth) return `${$minWidth}px`;
+	return "0";
+};
+var _exp18 = () => ({ $maxWidth }) => {
+	if ($maxWidth) return `${$maxWidth}px`;
+	return "none";
+};
+var _exp19 = () => ({ $align }) => match($align).with(ColumnAlign.LEFT, () => "left").with(ColumnAlign.CENTER, () => "center").with(ColumnAlign.RIGHT, () => "right").with(void 0, () => "left").exhaustive();
+var _exp20 = () => ({ theme }) => theme.color.border.primary;
+var _exp21 = () => ({ $variant, theme }) => getVariantBackgroundColor(theme, $variant);
+var _exp22 = () => ({ $align }) => match($align).with(ColumnAlign.LEFT, () => "flex-start").with(ColumnAlign.CENTER, () => "center").with(ColumnAlign.RIGHT, () => "flex-end").with(void 0, () => "flex-start").exhaustive();
+var _exp23 = () => ({ $isSortable }) => {
+	if ($isSortable) return "pointer";
+	return "default";
+};
+var _exp24 = () => ({ theme }) => theme.color.border.selected;
+var _exp25 = () => ({ $pin }) => {
+	if ($pin) return 25;
+	return 20;
+};
+var _exp26 = () => ({ $pin, $pinnedOffset }) => {
+	if ($pin === ColumnPin.LEFT && $pinnedOffset !== void 0) return `${$pinnedOffset}px`;
+	return "auto";
+};
+var _exp27 = () => ({ $pin, $pinnedOffset }) => {
+	if ($pin === ColumnPin.RIGHT && $pinnedOffset !== void 0) return `${$pinnedOffset}px`;
+	return "auto";
+};
+var _exp28 = () => ({ $pin, theme }) => {
+	if ($pin === ColumnPin.LEFT) return `0.5px solid ${theme.color.border.primary}`;
+	return "none";
+};
+var _exp29 = () => ({ $pin, theme }) => {
+	if ($pin === ColumnPin.RIGHT) return `0.5px solid ${theme.color.border.primary}`;
+	return "none";
+};
+var TableHeaderCell = withTheme(/*#__PURE__*/ styled("th")({
+	name: "TableHeaderCell",
+	class: "t9zg7bh",
+	propsAsIs: false,
+	vars: {
+		"t9zg7bh-0": [_exp15()],
+		"t9zg7bh-1": [_exp16()],
+		"t9zg7bh-2": [_exp17()],
+		"t9zg7bh-3": [_exp18()],
+		"t9zg7bh-4": [_exp19()],
+		"t9zg7bh-5": [_exp20()],
+		"t9zg7bh-6": [_exp21()],
+		"t9zg7bh-7": [_exp22()],
+		"t9zg7bh-8": [_exp23()],
+		"t9zg7bh-9": [_exp24()],
+		"t9zg7bh-10": [_exp25()],
+		"t9zg7bh-11": [_exp26()],
+		"t9zg7bh-12": [_exp27()],
+		"t9zg7bh-13": [_exp28()],
+		"t9zg7bh-14": [_exp29()]
+	}
+}));
+var _exp30 = () => ({ $density, $isCompact }) => $isCompact ? "4px 6px" : getDensityCellPadding($density);
+var _exp31 = () => ({ theme }) => theme.color.text.primary;
+var _exp32 = () => ({ $width }) => {
+	if ($width) return `0 0 ${$width}px`;
+	return "1 1 0";
+};
+var _exp33 = () => ({ $minWidth }) => {
+	if ($minWidth) return `${$minWidth}px`;
+	return "0";
+};
+var _exp34 = () => ({ $maxWidth }) => {
+	if ($maxWidth) return `${$maxWidth}px`;
+	return "none";
+};
+var _exp35 = () => ({ $align }) => match($align).with(ColumnAlign.LEFT, () => "left").with(ColumnAlign.CENTER, () => "center").with(ColumnAlign.RIGHT, () => "right").with(void 0, () => "left").exhaustive();
+var _exp36 = () => ({ $align }) => match($align).with(ColumnAlign.LEFT, () => "flex-start").with(ColumnAlign.CENTER, () => "center").with(ColumnAlign.RIGHT, () => "flex-end").with(void 0, () => "flex-start").exhaustive();
+var _exp37 = () => ({ $pin, $variant, theme }) => {
+	if ($pin) return getVariantBackgroundColor(theme, $variant);
+	return "transparent";
+};
+var _exp38 = () => ({ $isEditable }) => $isEditable ? "text" : "inherit";
+var _exp39 = () => ({ $variant, theme }) => getVariantHoverBackgroundColor(theme, $variant);
+var _exp40 = () => ({ $pin, $isPositioned }) => {
+	if ($pin) return "sticky";
+	if ($isPositioned) return "relative";
+	return "static";
+};
+var _exp41 = () => ({ $pin }) => {
+	if ($pin) return 5;
+	return "auto";
+};
+var _exp42 = () => ({ $pin, $pinnedOffset }) => {
+	if ($pin === ColumnPin.LEFT && $pinnedOffset !== void 0) return `${$pinnedOffset}px`;
+	return "auto";
+};
+var _exp43 = () => ({ $pin, $pinnedOffset }) => {
+	if ($pin === ColumnPin.RIGHT && $pinnedOffset !== void 0) return `${$pinnedOffset}px`;
+	return "auto";
+};
+var _exp44 = () => ({ $pin, theme }) => {
+	if ($pin === ColumnPin.LEFT) return `0.5px solid ${theme.color.border.primary}`;
+	return "none";
+};
+var _exp45 = () => ({ $pin, theme }) => {
+	if ($pin === ColumnPin.RIGHT) return `0.5px solid ${theme.color.border.primary}`;
+	return "none";
+};
+var TableDataCell = withTheme(/*#__PURE__*/ styled("td")({
+	name: "TableDataCell",
+	class: "txnbn9h",
+	propsAsIs: false,
+	vars: {
+		"txnbn9h-0": [_exp30()],
+		"txnbn9h-1": [_exp31()],
+		"txnbn9h-2": [_exp32()],
+		"txnbn9h-3": [_exp33()],
+		"txnbn9h-4": [_exp34()],
+		"txnbn9h-5": [_exp35()],
+		"txnbn9h-6": [_exp36()],
+		"txnbn9h-7": [_exp37()],
+		"txnbn9h-8": [_exp38()],
+		"txnbn9h-9": [_exp39()],
+		"txnbn9h-10": [_exp40()],
+		"txnbn9h-11": [_exp41()],
+		"txnbn9h-12": [_exp42()],
+		"txnbn9h-13": [_exp43()],
+		"txnbn9h-14": [_exp44()],
+		"txnbn9h-15": [_exp45()]
+	}
+}));
+var _exp46 = () => ({ $grow }) => $grow ? "1 1 auto" : "0 1 auto";
+var HeaderContentWrapper = /*#__PURE__*/ styled("div")({
+	name: "HeaderContentWrapper",
+	class: "hsbbcc2",
+	propsAsIs: false,
+	vars: { "hsbbcc2-0": [_exp46()] }
+});
+/** Holds a trailing affordance — a menu trigger, say — at the cell's far edge. */
+var HeaderTrailingWrapper = /*#__PURE__*/ styled("div")({
+	name: "HeaderTrailingWrapper",
+	class: "h10hzgu6",
+	propsAsIs: false
+});
+var SortIconWrapper = /*#__PURE__*/ styled("div")({
+	name: "SortIconWrapper",
+	class: "s9ehtv6",
+	propsAsIs: false
+});
+/**
+* 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.
+*/
+var _exp47 = () => ({ $isResizing, theme }) => $isResizing ? theme.color.border.selected : "transparent";
+var _exp49 = () => ({ theme }) => theme.color.border.selected;
+var ColumnResizeHandle = withTheme(/*#__PURE__*/ styled("div")({
+	name: "ColumnResizeHandle",
+	class: "c17fany5",
+	propsAsIs: false,
+	vars: {
+		"c17fany5-0": [_exp47()],
+		"c17fany5-1": [_exp49()]
+	}
+}));
+/** Sentinel that drives infinite scroll; carries no visual weight. */
+var InfiniteScrollSentinel = /*#__PURE__*/ styled("div")({
+	name: "InfiniteScrollSentinel",
+	class: "i4yku28",
+	propsAsIs: false
+});
+//#endregion
+export { ColumnResizeHandle, HeaderContentWrapper, HeaderTrailingWrapper, InfiniteScrollSentinel, SortIconWrapper, StyledTable, TableBody, TableDataCell, TableHead, TableHeaderCell, TableHeaderRow, TableLoadingRow, TableOuterContainer, TableRow, TableScrollContainer };

package/dist/table/TableSelectCell.d.ts

@@ -0,0 +1,18 @@
+import { TableDensity } from "./types";
+interface TableSelectCellProps {
+    isChecked: boolean;
+    isIndeterminate?: boolean;
+    isDisabled?: boolean;
+    density: TableDensity;
+    ariaLabel: string;
+    /** `isShiftKey` drives range selection when the row supports it. */
+    onChange: (isChecked: boolean, isShiftKey: boolean) => void;
+}
+/**
+ * Checkbox used by both the select-all header cell and each body row.
+ *
+ * Clicks are kept from bubbling so selecting a row never also fires
+ * `onRowClick`.
+ */
+declare const TableSelectCell: ({ isChecked, isIndeterminate, isDisabled, density, ariaLabel, onChange, }: TableSelectCellProps) => import("react").JSX.Element;
+export default TableSelectCell;

package/dist/table/TableSelectCell.js

@@ -0,0 +1,26 @@
+import { TableDensity } from "./types.js";
+import CheckboxInput, { CheckboxInputSize } from "../inputs/CheckboxInput.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/table/TableSelectCell.tsx
+var DENSITY_TO_CHECKBOX_SIZE_MAP = {
+	[TableDensity.SMALL]: CheckboxInputSize.SMALL,
+	[TableDensity.MEDIUM]: CheckboxInputSize.MEDIUM,
+	[TableDensity.LARGE]: CheckboxInputSize.MEDIUM
+};
+/**
+* Checkbox used by both the select-all header cell and each body row.
+*
+* Clicks are kept from bubbling so selecting a row never also fires
+* `onRowClick`.
+*/
+var TableSelectCell = ({ isChecked, isIndeterminate, isDisabled, density, ariaLabel, onChange }) => /* @__PURE__ */ jsx(CheckboxInput, {
+	isChecked,
+	isIndeterminate,
+	isDisabled,
+	size: DENSITY_TO_CHECKBOX_SIZE_MAP[density],
+	ariaLabel,
+	stopClickPropagation: true,
+	onChange: (isChecked, event) => onChange(isChecked, event?.shiftKey ?? false)
+});
+//#endregion
+export { TableSelectCell as default };

package/dist/table/TableStatusRow.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+interface TableStatusRowProps {
+    colSpan: number;
+    /** Scroll container's client width. */
+    viewportWidth?: number;
+    /** Space left below the header, so the message centres in what's visible. */
+    availableHeight?: number;
+    role: "status" | "alert";
+    children: ReactNode;
+}
+/**
+ * In-flow row for the empty and error states.
+ *
+ * Rendering inside `<tbody>` rather than as an overlay on the outer container
+ * is what keeps the message from covering the sticky header.
+ */
+declare const TableStatusRow: ({ colSpan, viewportWidth, availableHeight, role, children, }: TableStatusRowProps) => import("react").JSX.Element;
+export default TableStatusRow;

package/dist/table/TableStatusRow.js

@@ -0,0 +1,50 @@
+/* empty css                         */
+import { styled } from "@linaria/react";
+import { jsx } from "react/jsx-runtime";
+//#region src/table/TableStatusRow.tsx
+var StatusRow = /*#__PURE__*/ styled("tr")({
+	name: "StatusRow",
+	class: "s1fgfidg",
+	propsAsIs: false
+});
+var StatusCell = /*#__PURE__*/ styled("td")({
+	name: "StatusCell",
+	class: "s1mn0f4e",
+	propsAsIs: false
+});
+/**
+* Sticky-left and sized to the scrollport so the message stays centred in view
+* no matter how far the table is scrolled horizontally.
+*/
+var _exp = () => ({ $width }) => $width !== void 0 ? `${$width}px` : "100%";
+var _exp2 = () => ({ $minHeight }) => $minHeight !== void 0 ? `${$minHeight}px` : "120px";
+var StatusViewport = /*#__PURE__*/ styled("div")({
+	name: "StatusViewport",
+	class: "s1r7bpq0",
+	propsAsIs: false,
+	vars: {
+		"s1r7bpq0-0": [_exp()],
+		"s1r7bpq0-1": [_exp2()]
+	}
+});
+/**
+* In-flow row for the empty and error states.
+*
+* Rendering inside `<tbody>` rather than as an overlay on the outer container
+* is what keeps the message from covering the sticky header.
+*/
+var TableStatusRow = ({ colSpan, viewportWidth, availableHeight, role, children }) => /* @__PURE__ */ jsx(StatusRow, {
+	role: "row",
+	children: /* @__PURE__ */ jsx(StatusCell, {
+		colSpan,
+		role: "cell",
+		children: /* @__PURE__ */ jsx(StatusViewport, {
+			$width: viewportWidth,
+			$minHeight: availableHeight,
+			role,
+			children
+		})
+	})
+});
+//#endregion
+export { TableStatusRow as default };

package/dist/table/VirtualizedInfiniteTable.d.ts

@@ -1,28 +1,12 @@
-import React, { type ReactNode } from "react";
-import { TableDensity, type ColumnDef } from "./InfiniteTable";
-export interface InfiniteTableProps<TData> {
-    columns: ColumnDef<TData, unknown>[];
-    totalRowCount: number;
-    getRowData: (index: number) => TData | undefined;
-    getRowId?: (row: TData, index: number) => string;
-    height?: number | string;
-    width?: number | string;
-    fillWidth?: boolean;
-    fillHeight?: boolean;
-    density?: TableDensity;
-    estimateRowHeight?: number;
-    overscan?: number;
-    hasNextPage?: boolean;
-    isFetchingNextPage?: boolean;
-    fetchNextPage?: () => void;
-    isLoading?: boolean;
-    isError?: boolean;
-    loadingRowCount?: number;
-    contentWhenEmpty?: ReactNode;
-    contentWhenError?: ReactNode | ((error?: Error) => ReactNode);
-    noLastRowBorder?: boolean;
-    noLastRowPadding?: boolean;
-}
-declare function VirtualizedInfiniteTable<TData>(props: InfiniteTableProps<TData>): React.JSX.Element;
+import React from "react";
+import { type VirtualizedInfiniteTableProps } from "./types";
+export { ColumnAlign, ColumnPin, ColumnResizeMode, TableDensity, TableVariant } from "./types";
+export type { ColumnDef, ColumnSizingState, Row, VirtualizedInfiniteTableProps } from "./types";
+/**
+ * Kept as an alias of the props type this component has always exported under
+ * this name, so `import type { InfiniteTableProps }` from this module still
+ * resolves.
+ */
+export type InfiniteTableProps<TData> = VirtualizedInfiniteTableProps<TData>;
+declare function VirtualizedInfiniteTable<TData>(props: VirtualizedInfiniteTableProps<TData>): React.JSX.Element;
 export default VirtualizedInfiniteTable;
-export { ColumnAlign, ColumnPin, TableDensity, type ColumnDef } from "./InfiniteTable";