@galaxy-io/dls 1.2.0 → 1.2.1

package/dist/table/InfiniteTable.d.ts

@@ -1,5 +1,11 @@
 import React, { type ReactNode } from "react";
 import { type OnChangeFn as TanstackOnChangeFn, type Row as TanstackRow, type RowSelectionState as TanstackRowSelectionState, type SortingState as TanstackSortingState, type Table as TanstackTable } from "@tanstack/react-table";
+export declare enum TableVariant {
+    BASE = "BASE",
+    PRIMARY = "PRIMARY",
+    SECONDARY = "SECONDARY",
+    TERTIARY = "TERTIARY"
+}
 export declare enum TableDensity {
     SMALL = "SMALL",
     MEDIUM = "MEDIUM",
@@ -53,6 +59,7 @@ export interface InfiniteTableProps<TData> {
     fillWidth?: boolean;
     fillHeight?: boolean;
     density?: TableDensity;
+    variant?: TableVariant;
     hasNextPage?: boolean;
     isFetchingNextPage?: boolean;
     fetchNextPage?: () => void;

package/dist/table/InfiniteTable.js

@@ -11,6 +11,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { CaretDownIcon, CaretRightIcon, CaretUpDownIcon, SortAscendingIcon, SortDescendingIcon } from "@phosphor-icons/react";
 import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 //#region src/table/InfiniteTable.tsx
+var TableVariant = /* @__PURE__ */ function(TableVariant) {
+	TableVariant["BASE"] = "BASE";
+	TableVariant["PRIMARY"] = "PRIMARY";
+	TableVariant["SECONDARY"] = "SECONDARY";
+	TableVariant["TERTIARY"] = "TERTIARY";
+	return TableVariant;
+}({});
 var TableDensity = /* @__PURE__ */ function(TableDensity) {
 	TableDensity["SMALL"] = "SMALL";
 	TableDensity["MEDIUM"] = "MEDIUM";
@@ -46,6 +53,15 @@ var TABLE_DENSITY_TO_BUTTON_SIZE_MAP = {
 	["MEDIUM"]: ButtonSize.SMALL,
 	["LARGE"]: ButtonSize.MEDIUM
 };
+function getVariantBackgroundColor(theme, variant) {
+	return match(variant).with("BASE", () => theme.color.background.base).with("PRIMARY", () => theme.color.background.primary).with("SECONDARY", () => theme.color.background.secondary).with("TERTIARY", () => theme.color.background.tertiary).with(void 0, () => theme.color.background.primary).exhaustive();
+}
+function getVariantHoverBackgroundColor(theme, variant) {
+	return match(variant).with("BASE", () => theme.color.background.tertiary).with("PRIMARY", () => theme.color.background.tertiary).with("SECONDARY", () => theme.color.background.tertiary).with("TERTIARY", () => theme.color.background.secondary).with(void 0, () => theme.color.background.tertiary).exhaustive();
+}
+function getVariantSelectedBackgroundColor(theme, variant) {
+	return match(variant).with("BASE", () => theme.color.background.secondary).with("PRIMARY", () => theme.color.background.secondary).with("SECONDARY", () => theme.color.background.primary).with("TERTIARY", () => theme.color.background.primary).with(void 0, () => theme.color.background.secondary).exhaustive();
+}
 var _exp = () => ({ $width, $fillWidth }) => {
 	if ($fillWidth) return "100%";
 	if ($width) return getCssSizeValue($width);
@@ -89,15 +105,15 @@ var TableBody = /*#__PURE__*/ styled("tbody")({
 });
 var _exp4 = () => ({ $isClickable }) => $isClickable ? "pointer" : "default";
 var _exp5 = () => ({ $density }) => match($density).with("SMALL", () => "32px").with("MEDIUM", () => "48px").with("LARGE", () => "56px").with(void 0, () => "48px").exhaustive();
-var _exp6 = () => ({ $isSelected, theme }) => $isSelected ? theme.color.background.secondary : theme.color.background.primary;
+var _exp6 = () => ({ $isSelected, $variant, theme }) => $isSelected ? getVariantSelectedBackgroundColor(theme, $variant) : getVariantBackgroundColor(theme, $variant);
 var _exp7 = () => ({ $isExpanded, $isLastRow, theme }) => {
 	if ($isExpanded || $isLastRow) return "none";
 	return `0.5px solid ${theme.color.border.primary}`;
 };
-var _exp8 = () => ({ $isClickable, $isSelected, theme }) => {
-	if ($isSelected) return theme.color.background.secondary;
-	if ($isClickable) return theme.color.background.tertiary;
-	return theme.color.background.primary;
+var _exp8 = () => ({ $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",
@@ -134,7 +150,7 @@ var _exp10 = () => ({ $maxWidth }) => {
 };
 var _exp11 = () => ({ $align }) => match($align).with("LEFT", () => "left").with("CENTER", () => "center").with("RIGHT", () => "right").with(void 0, () => "left").exhaustive();
 var _exp12 = () => ({ theme }) => theme.color.border.primary;
-var _exp13 = () => ({ theme }) => theme.color.background.primary;
+var _exp13 = () => ({ $variant, theme }) => getVariantBackgroundColor(theme, $variant);
 var _exp14 = () => ({ $align }) => match($align).with("LEFT", () => "flex-start").with("CENTER", () => "center").with("RIGHT", () => "flex-end").with(void 0, () => "flex-start").exhaustive();
 var _exp15 = () => ({ $isSortable }) => {
 	if ($isSortable) return "pointer";
@@ -200,8 +216,8 @@ var _exp25 = () => ({ $maxWidth }) => {
 };
 var _exp26 = () => ({ $align }) => match($align).with("LEFT", () => "left").with("CENTER", () => "center").with("RIGHT", () => "right").with(void 0, () => "left").exhaustive();
 var _exp27 = () => ({ $align }) => match($align).with("LEFT", () => "flex-start").with("CENTER", () => "center").with("RIGHT", () => "flex-end").with(void 0, () => "flex-start").exhaustive();
-var _exp28 = () => ({ $pin, theme }) => {
-	if ($pin) return theme.color.background.primary;
+var _exp28 = () => ({ $pin, $variant, theme }) => {
+	if ($pin) return getVariantBackgroundColor(theme, $variant);
 	return "transparent";
 };
 var _exp29 = () => ({ $pin }) => {
@@ -266,7 +282,7 @@ var EmptyContentWrapper = /*#__PURE__*/ styled("div")({
 });
 var _exp35 = () => ({ $density }) => match($density).with("SMALL", () => "32px").with("MEDIUM", () => "48px").with("LARGE", () => "56px").with(void 0, () => "48px").exhaustive();
 var _exp36 = () => ({ theme }) => theme.color.border.primary;
-var _exp37 = () => ({ theme }) => theme.color.background.primary;
+var _exp37 = () => ({ $variant, theme }) => getVariantBackgroundColor(theme, $variant);
 var LoadingRowWrapper = withTheme(/*#__PURE__*/ styled("tr")({
 	name: "LoadingRowWrapper",
 	class: "l1pcw3m6",
@@ -297,7 +313,7 @@ var ExpandedOverlayLayer = /*#__PURE__*/ styled("div")({
 var _exp39 = () => ({ $top }) => `${$top}px`;
 var _exp40 = () => ({ $left }) => `${$left}px`;
 var _exp41 = () => ({ $width }) => `${$width}px`;
-var _exp43 = () => ({ theme }) => theme.color.background.primary;
+var _exp43 = () => ({ $variant, theme }) => getVariantBackgroundColor(theme, $variant);
 var _exp44 = () => ({ $isLastRow, theme }) => $isLastRow ? "none" : `0.5px solid ${theme.color.border.primary}`;
 var ExpandedOverlay = withTheme(/*#__PURE__*/ styled("div")({
 	name: "ExpandedOverlay",
@@ -311,7 +327,7 @@ var ExpandedOverlay = withTheme(/*#__PURE__*/ styled("div")({
 		"e1birhg7-4": [_exp44()]
 	}
 }));
-var _exp45 = () => ({ theme }) => theme.color.background.primary;
+var _exp45 = () => ({ $variant, theme }) => getVariantBackgroundColor(theme, $variant);
 var _exp46 = () => ({ theme }) => theme.color.border.primary;
 var ExpandedGutter = withTheme(/*#__PURE__*/ styled("div")({
 	name: "ExpandedGutter",
@@ -335,7 +351,7 @@ var ExpandedContent = /*#__PURE__*/ styled("div")({
 	propsAsIs: false
 });
 function InfiniteTable(props) {
-	const { columns, data, getRowId, height, width, fillWidth, fillHeight, density = "MEDIUM", hasNextPage, isFetchingNextPage, fetchNextPage, enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange, enableSorting = false, enableMultiSort = false, sorting, onSortingChange, manualSorting = false, isLoading = false, isError = false, loadingRowCount = 5, contentWhenEmpty, contentWhenError, noHeader = false, noLastRowBorder = false, noLastRowPadding = false, onRowClick, onRowDoubleClick, onRowExpand, onTableReady } = props;
+	const { columns, data, getRowId, height, width, fillWidth, fillHeight, density = "MEDIUM", variant = "PRIMARY", hasNextPage, isFetchingNextPage, fetchNextPage, enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange, enableSorting = false, enableMultiSort = false, sorting, onSortingChange, manualSorting = false, isLoading = false, isError = false, loadingRowCount = 5, contentWhenEmpty, contentWhenError, noHeader = false, noLastRowBorder = false, noLastRowPadding = false, onRowClick, onRowDoubleClick, onRowExpand, onTableReady } = props;
 	const outerContainerRef = useRef(null);
 	const scrollContainerRef = useRef(null);
 	const expandedOverlayRef = useRef(null);
@@ -601,6 +617,7 @@ function InfiniteTable(props) {
 	const renderLoadingRows = () => {
 		return Array.from({ length: loadingRowCount }).map((_, rowIndex) => /* @__PURE__ */ jsx(LoadingRowWrapper, {
 			$density: density,
+			$variant: variant,
 			children: resolvedColumns.map((col) => /* @__PURE__ */ jsx(TableDataCell, {
 				$width: col.size,
 				$minWidth: col.minSize,
@@ -609,6 +626,7 @@ function InfiniteTable(props) {
 				$pinnedOffset: pinnedOffsets.get(col.id),
 				$align: col.align,
 				$density: density,
+				$variant: variant,
 				children: col.cellLoading ? col.cellLoading() : null
 			}, col.id))
 		}, `loading-${rowIndex}`));
@@ -638,6 +656,7 @@ function InfiniteTable(props) {
 						$align: columnMeta?.align,
 						$isSortable: canSort,
 						$density: density,
+						$variant: variant,
 						$isExpandCell: header.column.id === EXPAND_COLUMN_ID,
 						onClick: canSort ? header.column.getToggleSortingHandler() : void 0,
 						children: /* @__PURE__ */ jsxs(HeaderContentWrapper, { children: [flexRender(header.column.columnDef.header, header.getContext()), canSort && /* @__PURE__ */ jsx(SortIconWrapper, { children: header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(Icon, {
@@ -669,6 +688,7 @@ function InfiniteTable(props) {
 						$isClickable: !!onRowClick,
 						$isSelected: isSelected,
 						$density: density,
+						$variant: variant,
 						$isExpanded: isExpanded,
 						$isLastRow: noLastRowBorder && isLastRow && !isExpanded,
 						onClick: onRowClick ? (e) => onRowClick(row, e) : void 0,
@@ -683,6 +703,7 @@ function InfiniteTable(props) {
 								$pinnedOffset: pinnedOffsets.get(cell.column.id),
 								$align: columnMeta?.align,
 								$density: density,
+								$variant: variant,
 								$isExpandCell: cell.column.id === EXPAND_COLUMN_ID,
 								children: flexRender(cell.column.columnDef.cell, cell.getContext())
 							}, cell.id);
@@ -699,13 +720,14 @@ function InfiniteTable(props) {
 				$left: expandedOverlayLayout?.left ?? 0,
 				$top: expandedOverlayLayout?.top ?? 0,
 				$width: expandedOverlayLayout?.width ?? scrollContainerRef.current?.clientWidth ?? 0,
+				$variant: variant,
 				onWheel: handleExpandedOverlayWheel,
 				style: { visibility: expandedOverlayLayout ? "visible" : "hidden" },
-				children: [/* @__PURE__ */ jsx(ExpandedGutter, {}), /* @__PURE__ */ jsx(ExpandedBody, { children: /* @__PURE__ */ jsx(ExpandedContent, { children: onRowExpand(expandedRow) }) })]
+				children: [/* @__PURE__ */ jsx(ExpandedGutter, { $variant: variant }), /* @__PURE__ */ jsx(ExpandedBody, { children: /* @__PURE__ */ jsx(ExpandedContent, { children: onRowExpand(expandedRow) }) })]
 			}) }),
 			isEmpty && contentWhenEmpty && /* @__PURE__ */ jsx(EmptyContentWrapper, { children: contentWhenEmpty })
 		]
 	});
 }
 //#endregion
-export { ColumnAlign, ColumnPin, TableDensity, InfiniteTable as default, estimateColumnWidth };
+export { ColumnAlign, ColumnPin, TableDensity, TableVariant, InfiniteTable as default, estimateColumnWidth };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galaxy-io/dls",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Galaxy Design Language System",
   "license": "UNLICENSED",
   "type": "module",