@galaxy-io/dls 1.2.1 → 1.2.3

package/dist/buttons/Button.d.ts

@@ -16,6 +16,7 @@ export interface ButtonProps {
 }
 export declare enum ButtonVariant {
     PRIMARY = "PRIMARY",
+    PRIMARY_ALT = "PRIMARY_ALT",
     SECONDARY = "SECONDARY",
     TERTIARY = "TERTIARY",
     SUCCESS = "SUCCESS",

package/dist/buttons/Button.js

@@ -11,6 +11,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/buttons/Button.tsx
 var ButtonVariant = /* @__PURE__ */ function(ButtonVariant) {
 	ButtonVariant["PRIMARY"] = "PRIMARY";
+	ButtonVariant["PRIMARY_ALT"] = "PRIMARY_ALT";
 	ButtonVariant["SECONDARY"] = "SECONDARY";
 	ButtonVariant["TERTIARY"] = "TERTIARY";
 	ButtonVariant["SUCCESS"] = "SUCCESS";
@@ -36,20 +37,20 @@ var _exp6 = () => ({ $size }) => {
 	return match($size).with("SMALL", () => "24px").with("MEDIUM", () => "28px").with("LARGE", () => "32px").exhaustive();
 };
 var _exp7 = () => ({ theme, $variant }) => {
-	return match($variant).with("PRIMARY", () => theme.color.background.galaxy).with("SECONDARY", () => theme.color.background.primary).with("TERTIARY", () => "transparent").with("SUCCESS", () => theme.color.icon.success).with("ERROR", () => theme.color.icon.error).exhaustive();
+	return match($variant).with("PRIMARY", () => theme.color.background.galaxy).with("PRIMARY_ALT", () => theme.color.background.primaryAlt).with("SECONDARY", () => theme.color.background.primary).with("TERTIARY", () => "transparent").with("SUCCESS", () => theme.color.icon.success).with("ERROR", () => theme.color.icon.error).exhaustive();
 };
 var _exp8 = () => ({ theme, $variant }) => {
-	return match($variant).with("PRIMARY", () => "0.5px solid transparent").with("SECONDARY", () => `0.5px solid ${theme.color.border.primary}`).with("TERTIARY", () => "0.5px solid transparent").with("SUCCESS", () => "0.5px solid transparent").with("ERROR", () => "0.5px solid transparent").exhaustive();
+	return match($variant).with("PRIMARY", () => "0.5px solid transparent").with("PRIMARY_ALT", () => `0.5px solid transparent`).with("SECONDARY", () => `0.5px solid ${theme.color.border.primary}`).with("TERTIARY", () => "0.5px solid transparent").with("SUCCESS", () => "0.5px solid transparent").with("ERROR", () => "0.5px solid transparent").exhaustive();
 };
 var _exp9 = () => ({ $cursor }) => $cursor ?? "pointer";
 var _exp0 = () => ({ theme, $variant }) => {
-	return match($variant).with("PRIMARY", () => theme.color.background.galaxyAlt).with("SECONDARY", () => theme.color.background.tertiary).with("TERTIARY", () => theme.color.background.secondary).with("SUCCESS", () => theme.color.background.successAlt).with("ERROR", () => theme.color.background.errorAlt).exhaustive();
+	return match($variant).with("PRIMARY", () => theme.color.background.galaxyAlt).with("PRIMARY_ALT", () => theme.color.background.secondaryAlt).with("SECONDARY", () => theme.color.background.tertiary).with("TERTIARY", () => theme.color.background.secondary).with("SUCCESS", () => theme.color.background.successAlt).with("ERROR", () => theme.color.background.errorAlt).exhaustive();
 };
 var _exp1 = () => ({ theme, $variant }) => {
-	return match($variant).with("PRIMARY", () => theme.color.border.primary).with("SECONDARY", () => theme.color.border.primary).with("TERTIARY", () => theme.color.border.primary).with("SUCCESS", () => "transparent").with("ERROR", () => "transparent").exhaustive();
+	return match($variant).with("PRIMARY", () => theme.color.border.primary).with("PRIMARY_ALT", () => theme.color.border.primary).with("SECONDARY", () => theme.color.border.primary).with("TERTIARY", () => theme.color.border.primary).with("SUCCESS", () => theme.color.border.primary).with("ERROR", () => theme.color.border.primary).exhaustive();
 };
 var _exp10 = () => ({ theme, $variant }) => {
-	return match($variant).with("PRIMARY", () => theme.color.background.disabled).with("SECONDARY", () => theme.color.background.disabled).with("TERTIARY", () => "transparent").with("SUCCESS", () => theme.color.background.successAlt).with("ERROR", () => theme.color.background.errorAlt).exhaustive();
+	return match($variant).with("PRIMARY", () => theme.color.background.disabled).with("PRIMARY_ALT", () => theme.color.background.disabled).with("SECONDARY", () => theme.color.background.disabled).with("TERTIARY", () => "transparent").with("SUCCESS", () => theme.color.background.successAlt).with("ERROR", () => theme.color.background.errorAlt).exhaustive();
 };
 var StyledButton = withTheme(/*#__PURE__*/ styled("button")({
 	name: "StyledButton",
@@ -82,10 +83,10 @@ var LabelWrapper = /*#__PURE__*/ styled("span")({
 	}
 });
 function getTextVariant(variant, activeTheme) {
-	return match(variant).with("PRIMARY", () => activeTheme === GalaxyTheme.DARK ? TextVariant.PRIMARY : TextVariant.PRIMARY_ALT).with("SECONDARY", () => TextVariant.PRIMARY).with("TERTIARY", () => TextVariant.PRIMARY).with("SUCCESS", () => TextVariant.PRIMARY).with("ERROR", () => TextVariant.PRIMARY).exhaustive();
+	return match(variant).with("PRIMARY", () => activeTheme === GalaxyTheme.DARK ? TextVariant.PRIMARY : TextVariant.PRIMARY_ALT).with("PRIMARY_ALT", () => TextVariant.PRIMARY_ALT).with("SECONDARY", () => TextVariant.PRIMARY).with("TERTIARY", () => TextVariant.PRIMARY).with("SUCCESS", () => TextVariant.PRIMARY).with("ERROR", () => TextVariant.PRIMARY).exhaustive();
 }
 function getIconVariant(variant, activeTheme) {
-	return match(variant).with("PRIMARY", () => activeTheme === GalaxyTheme.DARK ? IconVariant.PRIMARY : IconVariant.PRIMARY_ALT).with("SECONDARY", () => IconVariant.PRIMARY).with("TERTIARY", () => IconVariant.PRIMARY).with("SUCCESS", () => IconVariant.PRIMARY).with("ERROR", () => IconVariant.PRIMARY).exhaustive();
+	return match(variant).with("PRIMARY", () => activeTheme === GalaxyTheme.DARK ? IconVariant.PRIMARY : IconVariant.PRIMARY_ALT).with("PRIMARY_ALT", () => IconVariant.PRIMARY_ALT).with("SECONDARY", () => IconVariant.PRIMARY).with("TERTIARY", () => IconVariant.PRIMARY).with("SUCCESS", () => IconVariant.PRIMARY).with("ERROR", () => IconVariant.PRIMARY).exhaustive();
 }
 var BUTTON_SIZE_TO_TEXT_SIZE_MAP = {
 	["SMALL"]: TextSize.BODY_SM,

package/dist/spreadsheet/SpreadsheetHeaderCell.d.ts

@@ -8,6 +8,11 @@ export interface SpreadsheetHeaderCellProps<TData> {
     onResizeStart: (columnId: string, clientX: number) => void;
     getAllRows?: () => TData[];
 }
+export interface HeaderCellDropdownItemProps {
+    icon?: React.ReactNode;
+    label: string;
+    onClick: () => void;
+}
 declare function SpreadsheetHeaderCellInner<TData>({ column, width, pin, pinnedOffset, onResizeStart, getAllRows, }: SpreadsheetHeaderCellProps<TData>): React.JSX.Element;
 declare const SpreadsheetHeaderCell: typeof SpreadsheetHeaderCellInner;
 export default SpreadsheetHeaderCell;

package/dist/spreadsheet/SpreadsheetHeaderCell.js

@@ -4,7 +4,6 @@ import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
 import FlexWrapper, { FlexDirection } from "../containers/FlexWrapper.js";
 import { ColumnAlign, ColumnPin } from "../table/InfiniteTable.js";
 import Dropdown, { DropdownPosition } from "../dropdown/Dropdown.js";
-import DropdownItem from "../dropdown/DropdownItem.js";
 /* empty css                                */
 import { styled } from "@linaria/react";
 import { match } from "ts-pattern";
@@ -54,6 +53,23 @@ var ResizeHandle = withTheme(/*#__PURE__*/ styled("div")({
 	propsAsIs: false,
 	vars: { "r10tums3-0": [_exp0()] }
 }));
+var _exp1 = () => ({ theme }) => theme.color.background.secondary;
+var HeaderCellDropdownItemWrapper = withTheme(/*#__PURE__*/ styled("button")({
+	name: "HeaderCellDropdownItemWrapper",
+	class: "hz0qata",
+	propsAsIs: false,
+	vars: { "hz0qata-0": [_exp1()] }
+}));
+var HeaderCellDropdownItem = ({ icon, label, onClick }) => {
+	return /* @__PURE__ */ jsxs(HeaderCellDropdownItemWrapper, {
+		onClick,
+		children: [icon, /* @__PURE__ */ jsx(Text, {
+			size: TextSize.BODY_SM,
+			weight: TextWeight.MEDIUM,
+			children: label
+		})]
+	});
+};
 function SpreadsheetHeaderCellInner({ column, width, pin, pinnedOffset, onResizeStart, getAllRows }) {
 	const [isMenuOpen, setIsMenuOpen] = useState(false);
 	const handleResizeMouseDown = useCallback((e) => {
@@ -83,7 +99,7 @@ function SpreadsheetHeaderCellInner({ column, width, pin, pinnedOffset, onResize
 					body: /* @__PURE__ */ jsxs(FlexWrapper, {
 						direction: FlexDirection.COLUMN,
 						gap: 2,
-						children: [enrichmentActions.map((action) => /* @__PURE__ */ jsx(DropdownItem, {
+						children: [enrichmentActions.map((action) => /* @__PURE__ */ jsx(HeaderCellDropdownItem, {
 							icon: action.icon,
 							label: action.label,
 							onClick: () => {
@@ -91,10 +107,9 @@ function SpreadsheetHeaderCellInner({ column, width, pin, pinnedOffset, onResize
 								action.onAction(column.id, rows);
 								setIsMenuOpen(false);
 							}
-						}, `enrich-${action.id}`)), headerActions.map((action) => /* @__PURE__ */ jsx(DropdownItem, {
+						}, `enrich-${action.id}`)), headerActions.map((action) => /* @__PURE__ */ jsx(HeaderCellDropdownItem, {
 							icon: action.icon,
 							label: action.label,
-							variant: action.variant,
 							onClick: () => {
 								action.onAction(column.id);
 								setIsMenuOpen(false);
@@ -102,6 +117,7 @@ function SpreadsheetHeaderCellInner({ column, width, pin, pinnedOffset, onResize
 						}, `action-${action.id}`))]
 					}),
 					position: DropdownPosition.BOTTOM_END,
+					offset: [0, 4],
 					isOpen: isMenuOpen,
 					onClose: () => setIsMenuOpen(false),
 					minWidth: 160,

package/dist/spreadsheet/SpreadsheetRowActionCell.d.ts

@@ -6,6 +6,11 @@ export interface SpreadsheetRowActionCellProps<TData> {
     actions: SpreadsheetRowAction<TData>[];
     pinnedOffset?: number;
 }
+export interface ActionCellDropdownItemProps {
+    icon?: React.ReactNode;
+    label: string;
+    onClick: () => void;
+}
 declare function SpreadsheetRowActionCellInner<TData>({ row, rowIndex, actions, pinnedOffset, }: SpreadsheetRowActionCellProps<TData>): React.JSX.Element;
 declare const SpreadsheetRowActionCell: typeof SpreadsheetRowActionCellInner;
 export default SpreadsheetRowActionCell;

package/dist/spreadsheet/SpreadsheetRowActionCell.js

@@ -1,12 +1,12 @@
 import { withTheme } from "../theme/GalaxyTheme.js";
+import Text, { TextSize, TextWeight } from "../text/Text.js";
 import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
 import FlexWrapper, { FlexDirection } from "../containers/FlexWrapper.js";
 import Dropdown, { DropdownPosition } from "../dropdown/Dropdown.js";
-import DropdownItem from "../dropdown/DropdownItem.js";
 /* empty css                                   */
 import { styled } from "@linaria/react";
 import React, { useState } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { DotsThreeVerticalIcon } from "@phosphor-icons/react";
 //#region src/spreadsheet/SpreadsheetRowActionCell.tsx
 var _exp = () => ({ $pinnedOffset }) => $pinnedOffset !== void 0 ? `${$pinnedOffset}px` : "0";
@@ -22,15 +22,36 @@ var ActionCellContainer = withTheme(/*#__PURE__*/ styled("td")({
 		"a1b1bj84-2": [_exp3()]
 	}
 }));
+var _exp4 = () => ({ theme }) => theme.color.background.secondary;
+var ActionCellDropdownItemWrapper = withTheme(/*#__PURE__*/ styled("button")({
+	name: "ActionCellDropdownItemWrapper",
+	class: "a1mvarzo",
+	propsAsIs: false,
+	vars: { "a1mvarzo-0": [_exp4()] }
+}));
+var ActionCellDropdownItem = ({ icon, label, onClick }) => {
+	return /* @__PURE__ */ jsxs(ActionCellDropdownItemWrapper, {
+		onClick,
+		children: [icon, /* @__PURE__ */ jsx(Text, {
+			size: TextSize.BODY_SM,
+			weight: TextWeight.MEDIUM,
+			children: label
+		})]
+	});
+};
 function SpreadsheetRowActionCellInner({ row, rowIndex, actions, pinnedOffset }) {
 	const [isOpen, setIsOpen] = useState(false);
+	const handleActionClick = (e) => {
+		e.stopPropagation();
+		setIsOpen(!isOpen);
+	};
 	return /* @__PURE__ */ jsx(ActionCellContainer, {
 		$pinnedOffset: pinnedOffset,
 		children: /* @__PURE__ */ jsx(Dropdown, {
 			body: /* @__PURE__ */ jsx(FlexWrapper, {
 				direction: FlexDirection.COLUMN,
 				gap: 2,
-				children: actions.map((action) => /* @__PURE__ */ jsx(DropdownItem, {
+				children: actions.map((action) => /* @__PURE__ */ jsx(ActionCellDropdownItem, {
 					icon: action.icon,
 					label: action.label,
 					onClick: () => {
@@ -47,10 +68,7 @@ function SpreadsheetRowActionCellInner({ row, rowIndex, actions, pinnedOffset })
 				icon: DotsThreeVerticalIcon,
 				variant: ButtonVariant.TERTIARY,
 				size: ButtonSize.SMALL,
-				onClick: (e) => {
-					e.stopPropagation();
-					setIsOpen(!isOpen);
-				}
+				onClick: handleActionClick
 			})
 		})
 	});

package/dist/styles.css

@@ -47,11 +47,6 @@
 .s1hpu3t7{position:fixed;inset:0;background-color:var(--s1hpu3t7-0);-webkit-backdrop-filter:var(--s1hpu3t7-1);backdrop-filter:var(--s1hpu3t7-1);opacity:var(--s1hpu3t7-2);visibility:var(--s1hpu3t7-3);-webkit-transition:var(--s1hpu3t7-4);transition:var(--s1hpu3t7-4);z-index:var(--s1hpu3t7-5);pointer-events:var(--s1hpu3t7-6);}
 .d1bgy4cf{display:inline-block;position:relative;width:var(--d1bgy4cf-0);min-width:var(--d1bgy4cf-1);max-width:var(--d1bgy4cf-2);overflow:var(--d1bgy4cf-3);padding:var(--d1bgy4cf-4);background-color:var(--d1bgy4cf-5);border:var(--d1bgy4cf-6);border-radius:5px;}
 .dfdzgmt{position:relative;z-index:var(--dfdzgmt-0);display:var(--dfdzgmt-1);width:var(--dfdzgmt-2);}
-.sobaxfi{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;width:var(--sobaxfi-0);min-width:var(--sobaxfi-1);overflow:var(--sobaxfi-2);gap:var(--sobaxfi-3);padding:var(--sobaxfi-4);height:var(--sobaxfi-5);background-color:var(--sobaxfi-6);border:var(--sobaxfi-7);border-radius:5px;cursor:var(--sobaxfi-8);-webkit-transition:background-color 0.075s ease-in-out,border 0.075s ease-in-out;transition:background-color 0.075s ease-in-out,border 0.075s ease-in-out;}.sobaxfi:hover:not(:disabled){background-color:var(--sobaxfi-9);border-color:var(--sobaxfi-10);}.sobaxfi:disabled{background-color:var(--sobaxfi-11);cursor:not-allowed;opacity:0.5;}
-.l147oxln{-webkit-flex:var(--l147oxln-0);-ms-flex:var(--l147oxln-0);flex:var(--l147oxln-0);min-width:var(--l147oxln-1);overflow:hidden;}
-.d1egzp74{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:var(--d1egzp74-0);-webkit-box-align:var(--d1egzp74-0);-ms-flex-align:var(--d1egzp74-0);align-items:var(--d1egzp74-0);-webkit-box-pack:var(--d1egzp74-1);-ms-flex-pack:var(--d1egzp74-1);-webkit-justify-content:var(--d1egzp74-1);justify-content:var(--d1egzp74-1);gap:var(--d1egzp74-2);width:var(--d1egzp74-3);padding:var(--d1egzp74-4);}
-.syosvbj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:24px;width:100%;border-radius:4px;cursor:pointer;}.syosvbj:disabled{opacity:0.5;cursor:not-allowed;}.syosvbj:disabled:hover{background-color:transparent;}
-.d189jx24{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;padding:4px;width:100%;height:100%;border:0.5px solid transparent;border-radius:4px;}.syosvbj:hover .d189jx24{background-color:var(--d189jx24-0);}.d189jx24:hover{border:0.5px solid var(--d189jx24-1);}
 .cwfaerb{-webkit-flex:1;-ms-flex:1;flex:1;min-height:0;min-width:0;width:100%;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow:hidden;border:var(--cwfaerb-0);border-radius:var(--cwfaerb-1);}.cwfaerb>div{-webkit-flex:1;-ms-flex:1;flex:1;min-height:0;}.cwfaerb .cm-editor{width:100%!important;max-width:100%!important;height:100%!important;}.cwfaerb .cm-scroller{overflow:auto!important;width:100%!important;max-width:100%!important;}.cwfaerb .cm-content{max-width:100%!important;}.cwfaerb .cm-content,.cwfaerb .cm-gutter{line-height:1.8;}
 .h179mi29{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:2px;}
 .h1gstj4e{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
@@ -146,6 +141,7 @@
 .h5b2q63{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:4px;-webkit-flex:1;-ms-flex:1;flex:1;min-width:0;overflow:hidden;}
 .m1q357fu{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
 .r10tums3{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;z-index:1;}.r10tums3:hover,.r10tums3:active{background-color:var(--r10tums3-0);}
+.hz0qata{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;padding:4px;width:100%;height:100%;border:0.5px solid transparent;border-radius:4px;}.hz0qata:hover{background-color:var(--hz0qata-0);}
 .t15fnb8v{width:var(--t15fnb8v-0);height:var(--t15fnb8v-1);position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border-radius:5px;overflow:hidden;}
 .t1xd4vnx{-webkit-flex:1;-ms-flex:1;flex:1;overflow:auto;position:relative;min-height:0;padding-bottom:var(--t1xd4vnx-0);}
 .sk741d9{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;}
@@ -159,19 +155,19 @@
 .s1we9pi1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
 .ezfy353{position:absolute;top:0;left:0;right:0;bottom:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;pointer-events:none;}.ezfy353>*{pointer-events:auto;}
 .l1pcw3m6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;height:var(--l1pcw3m6-0);}.l1pcw3m6>td{border-bottom:0.5px solid var(--l1pcw3m6-1);background-color:var(--l1pcw3m6-2);}
-.eo1carc{display:block;width:100%;height:var(--eo1carc-0);pointer-events:none;}
-.e8l9d05{display:block;width:100%;height:100%;padding:0;border:none;background:transparent;box-sizing:border-box;}
-.e12m9dma{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:30;}
-.e1birhg7{position:absolute;top:var(--e1birhg7-0);left:var(--e1birhg7-1);width:var(--e1birhg7-2);display:-ms-grid;display:grid;-ms-grid-columns:44px minmax(0, 1fr);grid-template-columns:44px minmax(0, 1fr);box-sizing:border-box;background-color:var(--e1birhg7-3);border-bottom:var(--e1birhg7-4);overflow:hidden;contain:layout paint;overscroll-behavior:auto;pointer-events:auto;}
-.e2tyxoq{background-color:var(--e2tyxoq-0);border-right:0.5px solid var(--e2tyxoq-1);min-width:44px;}
-.ew9y6zt{min-width:0;width:100%;border-top:0.5px solid var(--ew9y6zt-0);}
-.e2jf90d{width:100%;box-sizing:border-box;overscroll-behavior:auto;}
+.eo1carc{display:block;width:100%;min-width:var(--eo1carc-0);}
+.e8l9d05{display:block;width:100%;padding:0;box-sizing:border-box;background-color:var(--e8l9d05-0);border-bottom:var(--e8l9d05-1);}
+.e12m9dma{position:-webkit-sticky;position:sticky;left:0;width:var(--e12m9dma-0);display:-ms-grid;display:grid;-ms-grid-columns:44px minmax(0, 1fr);grid-template-columns:44px minmax(0, 1fr);box-sizing:border-box;}
+.e1birhg7{background-color:var(--e1birhg7-0);border-right:0.5px solid var(--e1birhg7-1);min-width:44px;}
+.e2tyxoq{min-width:0;width:100%;border-top:0.5px solid var(--e2tyxoq-0);}
+.ew9y6zt{width:100%;box-sizing:border-box;overscroll-behavior:auto;}
 .c1bx58xl{position:var(--c1bx58xl-0);z-index:var(--c1bx58xl-1);left:var(--c1bx58xl-2);right:var(--c1bx58xl-3);-webkit-flex:var(--c1bx58xl-4);-ms-flex:var(--c1bx58xl-4);flex:var(--c1bx58xl-4);padding:0 12px;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:var(--c1bx58xl-5);-ms-flex-pack:var(--c1bx58xl-5);-webkit-justify-content:var(--c1bx58xl-5);justify-content:var(--c1bx58xl-5);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:var(--c1bx58xl-6);background-color:var(--c1bx58xl-7);border-right:var(--c1bx58xl-8);border-left:var(--c1bx58xl-9);}.c1bx58xl:hover{background-color:var(--c1bx58xl-10);}
 .sgqglvy{width:6px;height:6px;border-radius:50%;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin-right:6px;background-color:var(--sgqglvy-0);}
 .ejxsxoj{position:absolute;inset:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 4px;z-index:1;background-color:var(--ejxsxoj-0);border:1.5px solid var(--ejxsxoj-1);border-radius:2px;}
 .a1thqwpm{position:-webkit-sticky;position:sticky;right:0;z-index:5;-webkit-flex:0 0 48px;-ms-flex:0 0 48px;flex:0 0 48px;background-color:var(--a1thqwpm-0);border-left:0.5px solid var(--a1thqwpm-1);}
 .r1frty7c{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:100%;position:absolute;top:0;left:0;-webkit-transform:translateY(var(--r1frty7c-0));-moz-transform:translateY(var(--r1frty7c-0));-ms-transform:translateY(var(--r1frty7c-0));transform:translateY(var(--r1frty7c-0));height:var(--r1frty7c-1);}.r1frty7c>td{border-bottom:var(--r1frty7c-2);}.r1frty7c:hover>td{background-color:var(--r1frty7c-3);}
 .a1b1bj84{position:-webkit-sticky;position:sticky;right:var(--a1b1bj84-0);z-index:5;-webkit-flex:0 0 48px;-ms-flex:0 0 48px;flex:0 0 48px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;background-color:var(--a1b1bj84-1);border-left:0.5px solid var(--a1b1bj84-2);}.a1b1bj84>*{opacity:1;}
+.a1mvarzo{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;padding:4px;width:100%;height:100%;border:0.5px solid transparent;border-radius:4px;}.a1mvarzo:hover{background-color:var(--a1mvarzo-0);}
 .a1tvwf2d{position:-webkit-sticky;position:sticky;top:0;z-index:20;-webkit-flex:0 0 120px;-ms-flex:0 0 120px;flex:0 0 120px;height:36px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;gap:4px;padding:0 12px;background-color:var(--a1tvwf2d-0);border-bottom:0.5px solid var(--a1tvwf2d-1);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:background-color 0.1s;transition:background-color 0.1s;}.a1tvwf2d:hover{background-color:var(--a1tvwf2d-2);}
 .scx8lyz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--scx8lyz-0);border:0.5px solid var(--scx8lyz-1);border-radius:5px;padding:0 3px;height:28px;}
 .s1law64s{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;padding:3px 8px;background:var(--s1law64s-0);cursor:pointer;border:0.5px solid var(--s1law64s-1);border-radius:4px;}

package/dist/table/InfiniteTable.js

@@ -6,7 +6,7 @@ import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
 /* empty css                        */
 import { styled } from "@linaria/react";
 import { match } from "ts-pattern";
-import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 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";
@@ -293,72 +293,59 @@ var LoadingRowWrapper = withTheme(/*#__PURE__*/ styled("tr")({
 		"l1pcw3m6-2": [_exp37()]
 	}
 }));
-var _exp38 = () => ({ $height }) => `${$height}px`;
-var ExpandedSpacerRow = /*#__PURE__*/ styled("tr")({
-	name: "ExpandedSpacerRow",
+var _exp38 = () => ({ $minWidth }) => `${$minWidth}px`;
+var ExpandedRow = /*#__PURE__*/ styled("tr")({
+	name: "ExpandedRow",
 	class: "eo1carc",
 	propsAsIs: false,
 	vars: { "eo1carc-0": [_exp38()] }
 });
-var ExpandedSpacerCell = withTheme(/*#__PURE__*/ styled("td")({
-	name: "ExpandedSpacerCell",
+var _exp39 = () => ({ $variant, theme }) => getVariantBackgroundColor(theme, $variant);
+var _exp40 = () => ({ $isLastRow, theme }) => $isLastRow ? "none" : `0.5px solid ${theme.color.border.primary}`;
+var ExpandedRowCell = withTheme(/*#__PURE__*/ styled("td")({
+	name: "ExpandedRowCell",
 	class: "e8l9d05",
-	propsAsIs: false
-}));
-var ExpandedOverlayLayer = /*#__PURE__*/ styled("div")({
-	name: "ExpandedOverlayLayer",
-	class: "e12m9dma",
-	propsAsIs: false
-});
-var _exp39 = () => ({ $top }) => `${$top}px`;
-var _exp40 = () => ({ $left }) => `${$left}px`;
-var _exp41 = () => ({ $width }) => `${$width}px`;
-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",
-	class: "e1birhg7",
 	propsAsIs: false,
 	vars: {
-		"e1birhg7-0": [_exp39()],
-		"e1birhg7-1": [_exp40()],
-		"e1birhg7-2": [_exp41()],
-		"e1birhg7-3": [_exp43()],
-		"e1birhg7-4": [_exp44()]
+		"e8l9d05-0": [_exp39()],
+		"e8l9d05-1": [_exp40()]
 	}
 }));
-var _exp45 = () => ({ $variant, theme }) => getVariantBackgroundColor(theme, $variant);
-var _exp46 = () => ({ theme }) => theme.color.border.primary;
+var _exp41 = () => ({ $width }) => $width !== void 0 ? `${$width}px` : "100%";
+var ExpandedViewport = /*#__PURE__*/ styled("div")({
+	name: "ExpandedViewport",
+	class: "e12m9dma",
+	propsAsIs: false,
+	vars: { "e12m9dma-0": [_exp41()] }
+});
+var _exp43 = () => ({ $variant, theme }) => getVariantBackgroundColor(theme, $variant);
+var _exp44 = () => ({ theme }) => theme.color.border.primary;
 var ExpandedGutter = withTheme(/*#__PURE__*/ styled("div")({
 	name: "ExpandedGutter",
-	class: "e2tyxoq",
+	class: "e1birhg7",
 	propsAsIs: false,
 	vars: {
-		"e2tyxoq-0": [_exp45()],
-		"e2tyxoq-1": [_exp46()]
+		"e1birhg7-0": [_exp43()],
+		"e1birhg7-1": [_exp44()]
 	}
 }));
-var _exp48 = () => ({ theme }) => theme.color.border.primary;
+var _exp46 = () => ({ theme }) => theme.color.border.primary;
 var ExpandedBody = withTheme(/*#__PURE__*/ styled("div")({
 	name: "ExpandedBody",
-	class: "ew9y6zt",
+	class: "e2tyxoq",
 	propsAsIs: false,
-	vars: { "ew9y6zt-0": [_exp48()] }
+	vars: { "e2tyxoq-0": [_exp46()] }
 }));
 var ExpandedContent = /*#__PURE__*/ styled("div")({
 	name: "ExpandedContent",
-	class: "e2jf90d",
+	class: "ew9y6zt",
 	propsAsIs: false
 });
 function InfiniteTable(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);
-	const queueWheelScrollRef = useRef(null);
-	const syncExpandedOverlayLayoutRafRef = useRef(null);
 	const [expandedRowId, setExpandedRowId] = useState(null);
-	const [expandedOverlayLayout, setExpandedOverlayLayout] = useState(null);
+	const [scrollContainerClientWidth, setScrollContainerClientWidth] = useState(null);
 	const resolvedColumns = useMemo(() => {
 		if (!onRowExpand) return columns;
 		return [{
@@ -410,6 +397,7 @@ function InfiniteTable(props) {
 		});
 		return offsets;
 	}, [resolvedColumns]);
+	const totalColumnMinWidth = useMemo(() => resolvedColumns.reduce((sum, col) => sum + (col.size ?? col.minSize ?? 0), 0), [resolvedColumns]);
 	const table = useReactTable({
 		data,
 		columns: useMemo(() => resolvedColumns.map((col) => ({
@@ -473,8 +461,6 @@ function InfiniteTable(props) {
 		onTableReady?.(table);
 	}, [table, onTableReady]);
 	const { rows } = table.getRowModel();
-	const expandedRow = expandedRowId ? rows.find((row) => row.id === expandedRowId) : void 0;
-	const isExpandedRowLast = expandedRow ? rows[rows.length - 1]?.id === expandedRow.id : false;
 	useEffect(() => {
 		if (!onRowExpand && expandedRowId !== null) setExpandedRowId(null);
 	}, [expandedRowId, onRowExpand]);
@@ -482,74 +468,21 @@ function InfiniteTable(props) {
 		if (expandedRowId === null) return;
 		if (!rows.some((row) => row.id === expandedRowId)) setExpandedRowId(null);
 	}, [expandedRowId, rows]);
-	const syncExpandedOverlayLayout = useCallback(() => {
-		if (!expandedRow || !onRowExpand) {
-			setExpandedOverlayLayout(null);
-			return;
-		}
-		const outerContainer = outerContainerRef.current;
-		const scrollContainer = scrollContainerRef.current;
-		const overlayElement = expandedOverlayRef.current;
-		if (!outerContainer || !scrollContainer || !overlayElement) return;
-		const expandedRowAnchor = scrollContainer.querySelector("[data-gx-expanded-row-anchor=\"true\"]");
-		if (!expandedRowAnchor) return;
-		const outerRect = outerContainer.getBoundingClientRect();
-		const scrollRect = scrollContainer.getBoundingClientRect();
-		const rowRect = expandedRowAnchor.getBoundingClientRect();
-		const overlayRect = overlayElement.getBoundingClientRect();
-		const nextLayout = {
-			top: rowRect.bottom - outerRect.top,
-			left: scrollRect.left - outerRect.left,
-			width: scrollContainer.clientWidth,
-			height: overlayRect.height
-		};
-		setExpandedOverlayLayout((currentLayout) => {
-			if (currentLayout && currentLayout.top === nextLayout.top && currentLayout.left === nextLayout.left && currentLayout.width === nextLayout.width && currentLayout.height === nextLayout.height) return currentLayout;
-			return nextLayout;
-		});
-	}, [expandedRow, onRowExpand]);
-	const scheduleSyncExpandedOverlayLayout = useCallback(() => {
-		if (syncExpandedOverlayLayoutRafRef.current !== null) return;
-		syncExpandedOverlayLayoutRafRef.current = requestAnimationFrame(() => {
-			syncExpandedOverlayLayoutRafRef.current = null;
-			syncExpandedOverlayLayout();
-		});
-	}, [syncExpandedOverlayLayout]);
 	useLayoutEffect(() => {
-		syncExpandedOverlayLayout();
-		return () => {
-			if (syncExpandedOverlayLayoutRafRef.current !== null) {
-				cancelAnimationFrame(syncExpandedOverlayLayoutRafRef.current);
-				syncExpandedOverlayLayoutRafRef.current = null;
-			}
-		};
-	}, [syncExpandedOverlayLayout]);
-	useEffect(() => {
-		if (!expandedRow || !onRowExpand) return;
-		const scrollContainer = scrollContainerRef.current;
-		const overlayElement = expandedOverlayRef.current;
-		if (!scrollContainer || !overlayElement) return;
-		scrollContainer.addEventListener("scroll", scheduleSyncExpandedOverlayLayout, { passive: true });
-		window.addEventListener("resize", scheduleSyncExpandedOverlayLayout);
-		if (typeof ResizeObserver === "undefined") return () => {
-			scrollContainer.removeEventListener("scroll", scheduleSyncExpandedOverlayLayout);
-			window.removeEventListener("resize", scheduleSyncExpandedOverlayLayout);
-		};
-		const resizeObserver = new ResizeObserver(() => {
-			scheduleSyncExpandedOverlayLayout();
-		});
-		resizeObserver.observe(scrollContainer);
-		resizeObserver.observe(overlayElement);
-		return () => {
-			scrollContainer.removeEventListener("scroll", scheduleSyncExpandedOverlayLayout);
-			window.removeEventListener("resize", scheduleSyncExpandedOverlayLayout);
-			resizeObserver.disconnect();
+		const container = scrollContainerRef.current;
+		if (!container) return;
+		const measure = () => {
+			setScrollContainerClientWidth((currentWidth) => currentWidth === container.clientWidth ? currentWidth : container.clientWidth);
 		};
-	}, [
-		expandedRow,
-		onRowExpand,
-		scheduleSyncExpandedOverlayLayout
-	]);
+		measure();
+		if (typeof ResizeObserver === "undefined") {
+			window.addEventListener("resize", measure);
+			return () => window.removeEventListener("resize", measure);
+		}
+		const resizeObserver = new ResizeObserver(measure);
+		resizeObserver.observe(container);
+		return () => resizeObserver.disconnect();
+	}, []);
 	useEffect(() => {
 		const container = scrollContainerRef.current;
 		if (!container || !fetchNextPage) return;
@@ -597,23 +530,15 @@ function InfiniteTable(props) {
 			}
 			return false;
 		};
-		queueWheelScrollRef.current = queueWheelScroll;
 		const onWheel = (e) => {
 			queueWheelScroll(e.deltaX, e.deltaY);
 		};
 		container.addEventListener("wheel", onWheel, { passive: true });
 		return () => {
-			queueWheelScrollRef.current = null;
 			container.removeEventListener("wheel", onWheel);
 			if (rafId !== null) cancelAnimationFrame(rafId);
 		};
 	}, [isFetchingNextPage]);
-	const handleExpandedOverlayWheel = useCallback((event) => {
-		if (queueWheelScrollRef.current?.(event.deltaX, event.deltaY) ?? false) {
-			event.preventDefault();
-			event.stopPropagation();
-		}
-	}, []);
 	const renderLoadingRows = () => {
 		return Array.from({ length: loadingRowCount }).map((_, rowIndex) => /* @__PURE__ */ jsx(LoadingRowWrapper, {
 			$density: density,
@@ -635,98 +560,90 @@ function InfiniteTable(props) {
 	const showLoading = isLoading && data.length === 0;
 	const showError = isError && data.length === 0;
 	return /* @__PURE__ */ jsxs(TableOuterContainer, {
-		ref: outerContainerRef,
 		$width: width,
 		$height: height,
 		$fillWidth: fillWidth,
 		$fillHeight: fillHeight,
-		children: [
-			/* @__PURE__ */ jsx(TableScrollContainer, {
-				ref: scrollContainerRef,
-				$noLastRowPadding: noLastRowPadding,
-				children: /* @__PURE__ */ jsxs(StyledTable, { children: [!noHeader && /* @__PURE__ */ jsx(TableHead, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableHeaderRow, { children: headerGroup.headers.map((header) => {
-					const columnMeta = header.column.columnDef.meta;
-					const canSort = header.column.getCanSort();
-					return /* @__PURE__ */ jsx(TableHeaderCell, {
-						$width: header.column.columnDef.size,
-						$minWidth: header.column.columnDef.minSize,
-						$maxWidth: header.column.columnDef.maxSize,
-						$pin: columnMeta?.pin,
-						$pinnedOffset: pinnedOffsets.get(header.column.id),
-						$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, {
-							component: SortAscendingIcon,
-							size: 12,
-							variant: IconVariant.TERTIARY
-						}) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(Icon, {
-							component: SortDescendingIcon,
-							size: 12,
-							variant: IconVariant.TERTIARY
-						}) : /* @__PURE__ */ jsx(Icon, {
-							component: CaretUpDownIcon,
-							size: 12,
-							variant: IconVariant.TERTIARY
-						}) })] })
-					}, header.id);
-				}) }, headerGroup.id)) }), /* @__PURE__ */ jsxs(TableBody, { children: [showLoading ? renderLoadingRows() : showError ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
-					colSpan: resolvedColumns.length,
-					children: typeof contentWhenError === "function" ? contentWhenError() : contentWhenError ?? /* @__PURE__ */ jsx(Text, {
-						variant: TextVariant.ERROR,
-						children: "Error loading data"
+		children: [/* @__PURE__ */ jsx(TableScrollContainer, {
+			ref: scrollContainerRef,
+			$noLastRowPadding: noLastRowPadding,
+			children: /* @__PURE__ */ jsxs(StyledTable, { children: [!noHeader && /* @__PURE__ */ jsx(TableHead, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableHeaderRow, { children: headerGroup.headers.map((header) => {
+				const columnMeta = header.column.columnDef.meta;
+				const canSort = header.column.getCanSort();
+				return /* @__PURE__ */ jsx(TableHeaderCell, {
+					$width: header.column.columnDef.size,
+					$minWidth: header.column.columnDef.minSize,
+					$maxWidth: header.column.columnDef.maxSize,
+					$pin: columnMeta?.pin,
+					$pinnedOffset: pinnedOffsets.get(header.column.id),
+					$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, {
+						component: SortAscendingIcon,
+						size: 12,
+						variant: IconVariant.TERTIARY
+					}) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(Icon, {
+						component: SortDescendingIcon,
+						size: 12,
+						variant: IconVariant.TERTIARY
+					}) : /* @__PURE__ */ jsx(Icon, {
+						component: CaretUpDownIcon,
+						size: 12,
+						variant: IconVariant.TERTIARY
+					}) })] })
+				}, header.id);
+			}) }, headerGroup.id)) }), /* @__PURE__ */ jsxs(TableBody, { children: [showLoading ? renderLoadingRows() : showError ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+				colSpan: resolvedColumns.length,
+				children: typeof contentWhenError === "function" ? contentWhenError() : contentWhenError ?? /* @__PURE__ */ jsx(Text, {
+					variant: TextVariant.ERROR,
+					children: "Error loading data"
+				})
+			}) }) : rows.map((row, index) => {
+				const isSelected = row.getIsSelected();
+				const isExpanded = onRowExpand !== void 0 && row.id === expandedRowId;
+				const isLastRow = index === rows.length - 1;
+				return /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx(TableRow, {
+					$isClickable: !!onRowClick,
+					$isSelected: isSelected,
+					$density: density,
+					$variant: variant,
+					$isExpanded: isExpanded,
+					$isLastRow: noLastRowBorder && isLastRow && !isExpanded,
+					onClick: onRowClick ? (e) => onRowClick(row, e) : void 0,
+					onDoubleClick: onRowDoubleClick ? (e) => onRowDoubleClick(row, e) : void 0,
+					children: row.getVisibleCells().map((cell) => {
+						const columnMeta = cell.column.columnDef.meta;
+						return /* @__PURE__ */ jsx(TableDataCell, {
+							$width: cell.column.columnDef.size,
+							$minWidth: cell.column.columnDef.minSize,
+							$maxWidth: cell.column.columnDef.maxSize,
+							$pin: columnMeta?.pin,
+							$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);
 					})
-				}) }) : rows.map((row, index) => {
-					const isSelected = row.getIsSelected();
-					const isExpanded = onRowExpand !== void 0 && row.id === expandedRowId;
-					const isLastRow = index === rows.length - 1;
-					return /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx(TableRow, {
-						"data-gx-expanded-row-anchor": isExpanded ? "true" : void 0,
-						$isClickable: !!onRowClick,
-						$isSelected: isSelected,
-						$density: density,
+				}), isExpanded && onRowExpand && /* @__PURE__ */ jsx(ExpandedRow, {
+					$minWidth: totalColumnMinWidth,
+					children: /* @__PURE__ */ jsx(ExpandedRowCell, {
+						colSpan: resolvedColumns.length,
 						$variant: variant,
-						$isExpanded: isExpanded,
-						$isLastRow: noLastRowBorder && isLastRow && !isExpanded,
-						onClick: onRowClick ? (e) => onRowClick(row, e) : void 0,
-						onDoubleClick: onRowDoubleClick ? (e) => onRowDoubleClick(row, e) : void 0,
-						children: row.getVisibleCells().map((cell) => {
-							const columnMeta = cell.column.columnDef.meta;
-							return /* @__PURE__ */ jsx(TableDataCell, {
-								$width: cell.column.columnDef.size,
-								$minWidth: cell.column.columnDef.minSize,
-								$maxWidth: cell.column.columnDef.maxSize,
-								$pin: columnMeta?.pin,
-								$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);
+						$isLastRow: noLastRowBorder && isLastRow,
+						children: /* @__PURE__ */ jsxs(ExpandedViewport, {
+							$width: scrollContainerClientWidth ?? void 0,
+							children: [/* @__PURE__ */ jsx(ExpandedGutter, { $variant: variant }), /* @__PURE__ */ jsx(ExpandedBody, { children: /* @__PURE__ */ jsx(ExpandedContent, { children: onRowExpand(row) }) })]
 						})
-					}), isExpanded && /* @__PURE__ */ jsx(ExpandedSpacerRow, {
-						$height: expandedOverlayLayout?.height ?? 0,
-						children: /* @__PURE__ */ jsx(ExpandedSpacerCell, { colSpan: resolvedColumns.length })
-					})] }, row.id);
-				}), isFetchingNextPage && renderLoadingRows()] })] })
-			}),
-			expandedRow && onRowExpand && /* @__PURE__ */ jsx(ExpandedOverlayLayer, { children: /* @__PURE__ */ jsxs(ExpandedOverlay, {
-				ref: expandedOverlayRef,
-				$isLastRow: noLastRowBorder && isExpandedRowLast,
-				$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, { $variant: variant }), /* @__PURE__ */ jsx(ExpandedBody, { children: /* @__PURE__ */ jsx(ExpandedContent, { children: onRowExpand(expandedRow) }) })]
-			}) }),
-			isEmpty && contentWhenEmpty && /* @__PURE__ */ jsx(EmptyContentWrapper, { children: contentWhenEmpty })
-		]
+					})
+				})] }, row.id);
+			}), isFetchingNextPage && renderLoadingRows()] })] })
+		}), isEmpty && contentWhenEmpty && /* @__PURE__ */ jsx(EmptyContentWrapper, { children: contentWhenEmpty })]
 	});
 }
 //#endregion

package/package.json

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

package/dist/dropdown/DropdownButton.d.ts

@@ -1,18 +0,0 @@
-import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
-import { ButtonSize, ButtonVariant } from "../buttons/Button";
-export { ButtonSize, ButtonVariant };
-export interface DropdownButtonProps {
-    label: string;
-    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    isOpen: boolean;
-    icon?: PhosphorIcon;
-    variant?: ButtonVariant;
-    size?: ButtonSize;
-    isLoading?: boolean;
-    isDisabled?: boolean;
-    fillWidth?: boolean;
-    isEllipsis?: boolean;
-    cursor?: React.CSSProperties["cursor"];
-}
-declare const DropdownButton: ({ label, icon, variant, size, onClick, isOpen, fillWidth, isLoading, isDisabled, isEllipsis, cursor, }: DropdownButtonProps) => import("react").JSX.Element;
-export default DropdownButton;

package/dist/dropdown/DropdownButton.js

@@ -1,179 +0,0 @@
-import { GalaxyTheme } from "../theme/constants.js";
-import { useGalaxyTheme, withTheme } from "../theme/GalaxyTheme.js";
-import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
-import FlexItem from "../containers/FlexItem.js";
-import Icon, { IconVariant } from "../icons/Icon.js";
-import { ButtonSize, ButtonVariant } from "../buttons/Button.js";
-import RotateWithTransition from "../animations/RotateWithTransition.js";
-/* empty css                         */
-import { styled } from "@linaria/react";
-import { match } from "ts-pattern";
-import { useCallback } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { CaretDownIcon } from "@phosphor-icons/react";
-//#region src/dropdown/DropdownButton.tsx
-var _exp = () => ({ $fillWidth }) => $fillWidth ? "100%" : "auto";
-var _exp2 = () => ({ $isEllipsis }) => $isEllipsis ? "0" : "auto";
-var _exp3 = () => ({ $isEllipsis }) => $isEllipsis ? "hidden" : "visible";
-var _exp4 = () => ({ $size }) => {
-	return match($size).with(ButtonSize.SMALL, () => "4px").with(ButtonSize.MEDIUM, () => "6px").with(ButtonSize.LARGE, () => "6px").exhaustive();
-};
-var _exp5 = () => ({ $size }) => {
-	return match($size).with(ButtonSize.SMALL, () => "0 6px").with(ButtonSize.MEDIUM, () => "0 8px").with(ButtonSize.LARGE, () => "0 12px").exhaustive();
-};
-var _exp6 = () => ({ $size }) => {
-	return match($size).with(ButtonSize.SMALL, () => "24px").with(ButtonSize.MEDIUM, () => "28px").with(ButtonSize.LARGE, () => "32px").exhaustive();
-};
-var _exp7 = () => ({ theme, $variant, $isOpen }) => {
-	if ($isOpen) return match($variant).with(ButtonVariant.PRIMARY, () => theme.color.background.galaxyAlt).with(ButtonVariant.SECONDARY, () => theme.color.background.tertiary).with(ButtonVariant.TERTIARY, () => theme.color.background.secondary).with(ButtonVariant.SUCCESS, () => theme.color.background.successAlt).with(ButtonVariant.ERROR, () => theme.color.background.errorAlt).exhaustive();
-	return match($variant).with(ButtonVariant.PRIMARY, () => theme.color.background.galaxy).with(ButtonVariant.SECONDARY, () => theme.color.background.primary).with(ButtonVariant.TERTIARY, () => "transparent").with(ButtonVariant.SUCCESS, () => theme.color.icon.success).with(ButtonVariant.ERROR, () => theme.color.icon.error).exhaustive();
-};
-var _exp8 = () => ({ theme, $variant, $isOpen }) => {
-	return `0.5px solid ${match($variant).with(ButtonVariant.PRIMARY, () => $isOpen ? theme.color.border.primary : "transparent").with(ButtonVariant.SECONDARY, () => theme.color.border.primary).with(ButtonVariant.TERTIARY, () => $isOpen ? theme.color.border.primary : "transparent").with(ButtonVariant.SUCCESS, () => "transparent").with(ButtonVariant.ERROR, () => "transparent").exhaustive()}`;
-};
-var _exp9 = () => ({ $cursor }) => $cursor ?? "pointer";
-var _exp0 = () => ({ theme, $variant }) => {
-	return match($variant).with(ButtonVariant.PRIMARY, () => theme.color.background.galaxyAlt).with(ButtonVariant.SECONDARY, () => theme.color.background.tertiary).with(ButtonVariant.TERTIARY, () => theme.color.background.secondary).with(ButtonVariant.SUCCESS, () => theme.color.background.successAlt).with(ButtonVariant.ERROR, () => theme.color.background.errorAlt).exhaustive();
-};
-var _exp1 = () => ({ theme, $variant }) => {
-	return match($variant).with(ButtonVariant.PRIMARY, () => theme.color.border.primary).with(ButtonVariant.SECONDARY, () => theme.color.border.primary).with(ButtonVariant.TERTIARY, () => theme.color.border.primary).with(ButtonVariant.SUCCESS, () => "transparent").with(ButtonVariant.ERROR, () => "transparent").exhaustive();
-};
-var _exp10 = () => ({ theme, $variant }) => {
-	return match($variant).with(ButtonVariant.PRIMARY, () => theme.color.background.disabled).with(ButtonVariant.SECONDARY, () => theme.color.background.disabled).with(ButtonVariant.TERTIARY, () => "transparent").with(ButtonVariant.SUCCESS, () => theme.color.background.successAlt).with(ButtonVariant.ERROR, () => theme.color.background.errorAlt).exhaustive();
-};
-var StyledDropdownButton = withTheme(/*#__PURE__*/ styled("button")({
-	name: "StyledDropdownButton",
-	class: "sobaxfi",
-	propsAsIs: false,
-	vars: {
-		"sobaxfi-0": [_exp()],
-		"sobaxfi-1": [_exp2()],
-		"sobaxfi-2": [_exp3()],
-		"sobaxfi-3": [_exp4()],
-		"sobaxfi-4": [_exp5()],
-		"sobaxfi-5": [_exp6()],
-		"sobaxfi-6": [_exp7()],
-		"sobaxfi-7": [_exp8()],
-		"sobaxfi-8": [_exp9()],
-		"sobaxfi-9": [_exp0()],
-		"sobaxfi-10": [_exp1()],
-		"sobaxfi-11": [_exp10()]
-	}
-}));
-var _exp11 = () => ({ $isEllipsis }) => $isEllipsis ? "1" : "0 1 auto";
-var _exp12 = () => ({ $isEllipsis }) => $isEllipsis ? "0" : "auto";
-var LabelWrapper = /*#__PURE__*/ styled("span")({
-	name: "LabelWrapper",
-	class: "l147oxln",
-	propsAsIs: false,
-	vars: {
-		"l147oxln-0": [_exp11()],
-		"l147oxln-1": [_exp12()]
-	}
-});
-function getTextVariant(variant, activeTheme) {
-	return match(variant).with(ButtonVariant.PRIMARY, () => activeTheme === GalaxyTheme.DARK ? TextVariant.PRIMARY : TextVariant.PRIMARY_ALT).with(ButtonVariant.SECONDARY, () => TextVariant.PRIMARY).with(ButtonVariant.TERTIARY, () => TextVariant.PRIMARY).with(ButtonVariant.SUCCESS, () => TextVariant.PRIMARY_ALT).with(ButtonVariant.ERROR, () => TextVariant.PRIMARY_ALT).exhaustive();
-}
-function getIconVariant(variant, activeTheme) {
-	return match(variant).with(ButtonVariant.PRIMARY, () => activeTheme === GalaxyTheme.DARK ? IconVariant.PRIMARY : IconVariant.PRIMARY_ALT).with(ButtonVariant.SECONDARY, () => IconVariant.PRIMARY).with(ButtonVariant.TERTIARY, () => IconVariant.PRIMARY).with(ButtonVariant.SUCCESS, () => IconVariant.PRIMARY_ALT).with(ButtonVariant.ERROR, () => IconVariant.PRIMARY_ALT).exhaustive();
-}
-var BUTTON_SIZE_TO_TEXT_SIZE_MAP = {
-	[ButtonSize.SMALL]: TextSize.BODY_SM,
-	[ButtonSize.MEDIUM]: TextSize.BODY_MD,
-	[ButtonSize.LARGE]: TextSize.BODY_LG
-};
-var BUTTON_SIZE_TO_ICON_SIZE_MAP = {
-	[ButtonSize.SMALL]: 12,
-	[ButtonSize.MEDIUM]: 14,
-	[ButtonSize.LARGE]: 16
-};
-var DropdownButton = ({ label, icon, variant = ButtonVariant.PRIMARY, size = ButtonSize.MEDIUM, onClick, isOpen, fillWidth, isLoading, isDisabled, isEllipsis, cursor }) => {
-	const { activeTheme } = useGalaxyTheme();
-	const handleClick = useCallback((e) => {
-		if (isDisabled || isLoading) return;
-		onClick(e);
-	}, [
-		isDisabled,
-		isLoading,
-		onClick
-	]);
-	const renderIcon = useCallback(() => {
-		if (!icon) return null;
-		let iconVariant = getIconVariant(variant, activeTheme);
-		if (isDisabled) iconVariant = IconVariant.TERTIARY;
-		return /* @__PURE__ */ jsx(FlexItem, {
-			shrink: 0,
-			grow: 0,
-			children: /* @__PURE__ */ jsx(Icon, {
-				component: icon,
-				variant: iconVariant,
-				size: BUTTON_SIZE_TO_ICON_SIZE_MAP[size]
-			})
-		});
-	}, [
-		icon,
-		variant,
-		size,
-		isDisabled,
-		activeTheme
-	]);
-	const renderLabel = useCallback(() => {
-		let textVariant = getTextVariant(variant, activeTheme);
-		if (isDisabled) textVariant = TextVariant.TERTIARY_ALT;
-		return /* @__PURE__ */ jsx(LabelWrapper, {
-			$isEllipsis: isEllipsis,
-			children: /* @__PURE__ */ jsx(Text, {
-				variant: textVariant,
-				weight: TextWeight.MEDIUM,
-				size: BUTTON_SIZE_TO_TEXT_SIZE_MAP[size],
-				cursor: isDisabled ? "not-allowed" : cursor,
-				isEllipsis,
-				children: label
-			})
-		});
-	}, [
-		label,
-		variant,
-		size,
-		isDisabled,
-		isEllipsis,
-		cursor,
-		activeTheme
-	]);
-	const renderCaret = useCallback(() => {
-		let iconVariant = getIconVariant(variant, activeTheme);
-		if (isDisabled) iconVariant = IconVariant.TERTIARY;
-		return /* @__PURE__ */ jsx(RotateWithTransition, {
-			isRotated: isOpen,
-			deg: -180,
-			children: /* @__PURE__ */ jsx(Icon, {
-				component: CaretDownIcon,
-				variant: iconVariant,
-				size: BUTTON_SIZE_TO_ICON_SIZE_MAP[size]
-			})
-		});
-	}, [
-		variant,
-		size,
-		isDisabled,
-		isOpen,
-		activeTheme
-	]);
-	return /* @__PURE__ */ jsxs(StyledDropdownButton, {
-		$variant: variant,
-		$size: size,
-		$isOpen: isOpen,
-		$fillWidth: fillWidth,
-		$isEllipsis: isEllipsis,
-		$cursor: cursor,
-		onClick: handleClick,
-		disabled: isDisabled || isLoading,
-		children: [
-			renderIcon(),
-			renderLabel(),
-			renderCaret()
-		]
-	});
-};
-//#endregion
-export { ButtonSize, ButtonVariant, DropdownButton as default };

package/dist/dropdown/DropdownFooter.d.ts

@@ -1,10 +0,0 @@
-import type { CSSProperties, PropsWithChildren } from "react";
-interface DropdownFooterProps {
-    gap?: number | string;
-    padding?: CSSProperties["padding"];
-    justifyContent?: CSSProperties["justifyContent"];
-    alignItems?: CSSProperties["alignItems"];
-    fillWidth?: boolean;
-}
-declare const DropdownFooter: ({ children, gap, padding, justifyContent, alignItems, fillWidth, }: PropsWithChildren<DropdownFooterProps>) => import("react").JSX.Element;
-export default DropdownFooter;

package/dist/dropdown/DropdownFooter.js

@@ -1,35 +0,0 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
-import { getCssSizeValue } from "../utils/linaria.js";
-/* empty css                         */
-import { styled } from "@linaria/react";
-import { jsx } from "react/jsx-runtime";
-//#region src/dropdown/DropdownFooter.tsx
-var _exp = () => ({ $alignItems }) => $alignItems ?? "center";
-var _exp2 = () => ({ $justifyContent }) => $justifyContent ?? "flex-start";
-var _exp3 = () => ({ $gap }) => getCssSizeValue($gap, "0");
-var _exp4 = () => ({ $fillWidth }) => $fillWidth ? "100%" : "auto";
-var _exp5 = () => ({ $padding }) => $padding ?? "0";
-var DropdownFooterWrapper = withTheme(/*#__PURE__*/ styled("div")({
-	name: "DropdownFooterWrapper",
-	class: "d1egzp74",
-	propsAsIs: false,
-	vars: {
-		"d1egzp74-0": [_exp()],
-		"d1egzp74-1": [_exp2()],
-		"d1egzp74-2": [_exp3()],
-		"d1egzp74-3": [_exp4()],
-		"d1egzp74-4": [_exp5()]
-	}
-}));
-var DropdownFooter = ({ children, gap, padding, justifyContent, alignItems, fillWidth = false }) => {
-	return /* @__PURE__ */ jsx(DropdownFooterWrapper, {
-		$gap: gap,
-		$padding: padding,
-		$justifyContent: justifyContent,
-		$alignItems: alignItems,
-		$fillWidth: fillWidth,
-		children
-	});
-};
-//#endregion
-export { DropdownFooter as default };

package/dist/dropdown/DropdownItem.d.ts

@@ -1,10 +0,0 @@
-import { type TextVariant } from "../text/Text";
-export interface DropdownItemButton {
-    icon?: React.ReactNode;
-    label: string;
-    variant?: TextVariant;
-    isDisabled?: boolean;
-    onClick: () => void;
-}
-declare const DropdownItem: ({ icon, label, variant, isDisabled, onClick }: DropdownItemButton) => import("react").JSX.Element;
-export default DropdownItem;

package/dist/dropdown/DropdownItem.js

@@ -1,38 +0,0 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
-import Text from "../text/Text.js";
-/* empty css                       */
-import { styled } from "@linaria/react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/dropdown/DropdownItem.tsx
-var StyledDropdownItemButton = withTheme(/*#__PURE__*/ styled("button")({
-	name: "StyledDropdownItemButton",
-	class: "syosvbj",
-	propsAsIs: false
-}));
-var _exp2 = () => ({ theme }) => theme.color.background.tertiary;
-var _exp3 = () => ({ theme }) => theme.color.border.primary;
-var DropdownItemWrapper = withTheme(/*#__PURE__*/ styled("div")({
-	name: "DropdownItemWrapper",
-	class: "d189jx24",
-	propsAsIs: false,
-	vars: {
-		"d189jx24-0": [_exp2()],
-		"d189jx24-1": [_exp3()]
-	}
-}));
-var DropdownItem = ({ icon, label, variant, isDisabled, onClick }) => {
-	const handleClick = (e) => {
-		e.stopPropagation();
-		onClick();
-	};
-	return /* @__PURE__ */ jsx(StyledDropdownItemButton, {
-		onClick: handleClick,
-		disabled: isDisabled,
-		children: /* @__PURE__ */ jsxs(DropdownItemWrapper, { children: [icon, /* @__PURE__ */ jsx(Text, {
-			variant,
-			children: label
-		})] })
-	});
-};
-//#endregion
-export { DropdownItem as default };