@uipath/apollo-wind 2.7.0 → 2.7.1

package/dist/components/ui/data-table.cjs

@@ -37,8 +37,11 @@ const external_dropdown_menu_cjs_namespaceObject = require("./dropdown-menu.cjs"
 const external_editable_cell_cjs_namespaceObject = require("./editable-cell.cjs");
 const external_input_cjs_namespaceObject = require("./input.cjs");
 const external_table_cjs_namespaceObject = require("./table.cjs");
+const index_cjs_namespaceObject = require("../../lib/index.cjs");
 const react_table_namespaceObject = require("@tanstack/react-table");
-function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...', showColumnToggle = true, showPagination = true, pageSize = 10, editable = false, onCellUpdate, resizable = false, compact = false, columnToggleText = 'Columns', rowSelection: controlledRowSelection, onRowSelectionChange: controlledOnRowSelectionChange, toolbarContent }) {
+function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...', showColumnToggle = true, showPagination = true, pageSize = 10, editable = false, onCellUpdate, resizable = false, compact = false, columnToggleText = 'Columns', rowSelection: controlledRowSelection, onRowSelectionChange: controlledOnRowSelectionChange, toolbarContent, maxBodyHeight }) {
+    const useBlockLayout = void 0 !== maxBodyHeight;
+    const blockRowClasses = '[&>tr]:table [&>tr]:w-full [&>tr]:table-fixed';
     const [sorting, setSorting] = external_react_namespaceObject.useState([]);
     const [columnFilters, setColumnFilters] = external_react_namespaceObject.useState([]);
     const [columnVisibility, setColumnVisibility] = external_react_namespaceObject.useState({});
@@ -142,19 +145,21 @@ function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...',
                 ]
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                className: "rounded-md border overflow-auto",
+                className: (0, index_cjs_namespaceObject.cn)('rounded-md border', useBlockLayout ? 'overflow-x-auto' : 'overflow-auto'),
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_table_cjs_namespaceObject.Table, {
+                    className: useBlockLayout ? 'block' : void 0,
                     style: resizable ? {
                         width: table.getTotalSize(),
                         tableLayout: 'fixed'
                     } : void 0,
                     children: [
                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_table_cjs_namespaceObject.TableHeader, {
+                            className: (0, index_cjs_namespaceObject.cn)('sticky top-0 z-10 bg-background', useBlockLayout && `block ${blockRowClasses}`),
                             children: table.getHeaderGroups().map((headerGroup)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_table_cjs_namespaceObject.TableRow, {
                                     children: headerGroup.headers.map((header)=>{
                                         const { column } = header;
                                         return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_table_cjs_namespaceObject.TableHead, {
-                                            className: compact ? 'relative h-8 px-2 py-0' : 'relative py-0',
+                                            className: (0, index_cjs_namespaceObject.cn)(compact ? 'relative h-8 px-2 py-0' : 'relative py-0', resizable && 'overflow-visible'),
                                             style: {
                                                 width: resizable ? header.getSize() : 150 !== column.getSize() ? column.getSize() : void 0,
                                                 minWidth: column.columnDef.minSize,
@@ -173,7 +178,7 @@ function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...',
                                                     onTouchStart: header.getResizeHandler(),
                                                     className: "absolute -right-1 top-0 z-10 h-full w-2 cursor-col-resize select-none touch-none group",
                                                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                                        className: `h-full w-px mx-auto ${header.column.getIsResizing() ? 'bg-primary' : 'group-hover:bg-primary/50'}`
+                                                        className: (0, index_cjs_namespaceObject.cn)('h-full mx-auto transition-all duration-150', header.column.getIsResizing() ? 'w-0.5 bg-primary' : 'w-px group-hover:w-0.5 group-hover:bg-primary')
                                                     })
                                                 })
                                             ]
@@ -182,12 +187,22 @@ function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...',
                                 }, headerGroup.id))
                         }),
                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_table_cjs_namespaceObject.TableBody, {
+                            className: useBlockLayout ? (0, index_cjs_namespaceObject.cn)('block overflow-y-auto', blockRowClasses) : void 0,
+                            style: useBlockLayout ? {
+                                maxHeight: maxBodyHeight
+                            } : void 0,
+                            tabIndex: useBlockLayout ? 0 : void 0,
                             children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_table_cjs_namespaceObject.TableRow, {
                                     "data-state": row.getIsSelected() && 'selected',
                                     children: row.getVisibleCells().map((cell)=>{
                                         const { column } = cell;
                                         return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_table_cjs_namespaceObject.TableCell, {
                                             className: compact ? 'h-8 truncate px-2 py-0' : 'h-12 truncate px-4 py-0',
+                                            onMouseEnter: (e)=>{
+                                                const el = e.currentTarget;
+                                                const value = cell.getValue();
+                                                el.title = el.scrollWidth > el.clientWidth && ('string' == typeof value || 'number' == typeof value) ? String(value) : '';
+                                            },
                                             style: {
                                                 width: resizable ? cell.column.getSize() : 150 !== column.getSize() ? column.getSize() : void 0,
                                                 minWidth: column.columnDef.minSize,
@@ -263,10 +278,15 @@ function DataTableColumnHeader({ column, title, children }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_button_cjs_namespaceObject.Button, {
         variant: "ghost",
         size: "sm",
-        className: "-ml-3 h-8 data-[state=open]:bg-accent",
+        className: "-ml-3 h-8 max-w-full data-[state=open]:bg-accent",
         onClick: handleClick,
+        onMouseEnter: (e)=>{
+            const span = e.currentTarget.querySelector('span');
+            e.currentTarget.title = span && span.scrollWidth > span.clientWidth ? title : '';
+        },
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: "truncate min-w-0",
                 children: title
             }),
             children,

package/dist/components/ui/data-table.d.ts

@@ -16,8 +16,14 @@ export interface DataTableProps<TData, TValue> {
     rowSelection?: RowSelectionState;
     onRowSelectionChange?: (selection: RowSelectionState) => void;
     toolbarContent?: React.ReactNode;
+    /**
+     * When set, the table body scrolls independently with this max height (any CSS length).
+     * The header stays above the scroll region and the vertical scrollbar is confined to the
+     * body, leaving the header row clear of scrollbar tracks.
+     */
+    maxBodyHeight?: string;
 }
-export declare function DataTable<TData, TValue>({ columns, data, searchKey, searchPlaceholder, showColumnToggle, showPagination, pageSize, editable, onCellUpdate, resizable, compact, columnToggleText, rowSelection: controlledRowSelection, onRowSelectionChange: controlledOnRowSelectionChange, toolbarContent, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<TData, TValue>({ columns, data, searchKey, searchPlaceholder, showColumnToggle, showPagination, pageSize, editable, onCellUpdate, resizable, compact, columnToggleText, rowSelection: controlledRowSelection, onRowSelectionChange: controlledOnRowSelectionChange, toolbarContent, maxBodyHeight, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
 export declare function DataTableColumnHeader<TData, TValue>({ column, title, children, }: {
     column: Column<TData, TValue>;
     title: string;

package/dist/components/ui/data-table.js

@@ -7,8 +7,11 @@ import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMe
 import { EditableCell } from "./editable-cell.js";
 import { Input } from "./input.js";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
+import { cn } from "../../lib/index.js";
 import { flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
-function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...', showColumnToggle = true, showPagination = true, pageSize = 10, editable = false, onCellUpdate, resizable = false, compact = false, columnToggleText = 'Columns', rowSelection: controlledRowSelection, onRowSelectionChange: controlledOnRowSelectionChange, toolbarContent }) {
+function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...', showColumnToggle = true, showPagination = true, pageSize = 10, editable = false, onCellUpdate, resizable = false, compact = false, columnToggleText = 'Columns', rowSelection: controlledRowSelection, onRowSelectionChange: controlledOnRowSelectionChange, toolbarContent, maxBodyHeight }) {
+    const useBlockLayout = void 0 !== maxBodyHeight;
+    const blockRowClasses = '[&>tr]:table [&>tr]:w-full [&>tr]:table-fixed';
     const [sorting, setSorting] = useState([]);
     const [columnFilters, setColumnFilters] = useState([]);
     const [columnVisibility, setColumnVisibility] = useState({});
@@ -112,19 +115,21 @@ function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...',
                 ]
             }),
             /*#__PURE__*/ jsx("div", {
-                className: "rounded-md border overflow-auto",
+                className: cn('rounded-md border', useBlockLayout ? 'overflow-x-auto' : 'overflow-auto'),
                 children: /*#__PURE__*/ jsxs(Table, {
+                    className: useBlockLayout ? 'block' : void 0,
                     style: resizable ? {
                         width: table.getTotalSize(),
                         tableLayout: 'fixed'
                     } : void 0,
                     children: [
                         /*#__PURE__*/ jsx(TableHeader, {
+                            className: cn('sticky top-0 z-10 bg-background', useBlockLayout && `block ${blockRowClasses}`),
                             children: table.getHeaderGroups().map((headerGroup)=>/*#__PURE__*/ jsx(TableRow, {
                                     children: headerGroup.headers.map((header)=>{
                                         const { column } = header;
                                         return /*#__PURE__*/ jsxs(TableHead, {
-                                            className: compact ? 'relative h-8 px-2 py-0' : 'relative py-0',
+                                            className: cn(compact ? 'relative h-8 px-2 py-0' : 'relative py-0', resizable && 'overflow-visible'),
                                             style: {
                                                 width: resizable ? header.getSize() : 150 !== column.getSize() ? column.getSize() : void 0,
                                                 minWidth: column.columnDef.minSize,
@@ -143,7 +148,7 @@ function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...',
                                                     onTouchStart: header.getResizeHandler(),
                                                     className: "absolute -right-1 top-0 z-10 h-full w-2 cursor-col-resize select-none touch-none group",
                                                     children: /*#__PURE__*/ jsx("div", {
-                                                        className: `h-full w-px mx-auto ${header.column.getIsResizing() ? 'bg-primary' : 'group-hover:bg-primary/50'}`
+                                                        className: cn('h-full mx-auto transition-all duration-150', header.column.getIsResizing() ? 'w-0.5 bg-primary' : 'w-px group-hover:w-0.5 group-hover:bg-primary')
                                                     })
                                                 })
                                             ]
@@ -152,12 +157,22 @@ function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...',
                                 }, headerGroup.id))
                         }),
                         /*#__PURE__*/ jsx(TableBody, {
+                            className: useBlockLayout ? cn('block overflow-y-auto', blockRowClasses) : void 0,
+                            style: useBlockLayout ? {
+                                maxHeight: maxBodyHeight
+                            } : void 0,
+                            tabIndex: useBlockLayout ? 0 : void 0,
                             children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row)=>/*#__PURE__*/ jsx(TableRow, {
                                     "data-state": row.getIsSelected() && 'selected',
                                     children: row.getVisibleCells().map((cell)=>{
                                         const { column } = cell;
                                         return /*#__PURE__*/ jsx(TableCell, {
                                             className: compact ? 'h-8 truncate px-2 py-0' : 'h-12 truncate px-4 py-0',
+                                            onMouseEnter: (e)=>{
+                                                const el = e.currentTarget;
+                                                const value = cell.getValue();
+                                                el.title = el.scrollWidth > el.clientWidth && ('string' == typeof value || 'number' == typeof value) ? String(value) : '';
+                                            },
                                             style: {
                                                 width: resizable ? cell.column.getSize() : 150 !== column.getSize() ? column.getSize() : void 0,
                                                 minWidth: column.columnDef.minSize,
@@ -233,10 +248,15 @@ function DataTableColumnHeader({ column, title, children }) {
     return /*#__PURE__*/ jsxs(Button, {
         variant: "ghost",
         size: "sm",
-        className: "-ml-3 h-8 data-[state=open]:bg-accent",
+        className: "-ml-3 h-8 max-w-full data-[state=open]:bg-accent",
         onClick: handleClick,
+        onMouseEnter: (e)=>{
+            const span = e.currentTarget.querySelector('span');
+            e.currentTarget.title = span && span.scrollWidth > span.clientWidth ? title : '';
+        },
         children: [
             /*#__PURE__*/ jsx("span", {
+                className: "truncate min-w-0",
                 children: title
             }),
             children,

package/dist/components/ui/index.cjs

@@ -15,7 +15,7 @@ var __webpack_modules__ = {
     "./avatar" (module) {
         module.exports = require("./avatar.cjs");
     },
-    "@/components/ui/badge" (module) {
+    "./badge" (module) {
         module.exports = require("./badge.cjs");
     },
     "./breadcrumb" (module) {
@@ -30,10 +30,10 @@ var __webpack_modules__ = {
     "@/components/ui/calendar" (module) {
         module.exports = require("./calendar.cjs");
     },
-    "@/components/ui/card" (module) {
+    "./card" (module) {
         module.exports = require("./card.cjs");
     },
-    "@/components/ui/checkbox" (module) {
+    "./checkbox" (module) {
         module.exports = require("./checkbox.cjs");
     },
     "./collapsible" (module) {
@@ -42,7 +42,7 @@ var __webpack_modules__ = {
     "./combobox" (module) {
         module.exports = require("./combobox.cjs");
     },
-    "@/components/ui/command" (module) {
+    "./command" (module) {
         module.exports = require("./command.cjs");
     },
     "./context-menu" (module) {
@@ -57,13 +57,13 @@ var __webpack_modules__ = {
     "./datetime-picker" (module) {
         module.exports = require("./datetime-picker.cjs");
     },
-    "@/components/ui/dialog" (module) {
+    "./dialog" (module) {
         module.exports = require("./dialog.cjs");
     },
-    "@/components/ui/dropdown-menu" (module) {
+    "./dropdown-menu" (module) {
         module.exports = require("./dropdown-menu.cjs");
     },
-    "@/components/ui/editable-cell" (module) {
+    "./editable-cell" (module) {
         module.exports = require("./editable-cell.cjs");
     },
     "./empty-state" (module) {
@@ -75,10 +75,10 @@ var __webpack_modules__ = {
     "./hover-card" (module) {
         module.exports = require("./hover-card.cjs");
     },
-    "@/components/ui/input" (module) {
+    "./input" (module) {
         module.exports = require("./input.cjs");
     },
-    "@/components/ui/label" (module) {
+    "./label" (module) {
         module.exports = require("./label.cjs");
     },
     "./layout" (module) {
@@ -138,7 +138,7 @@ var __webpack_modules__ = {
     "./switch" (module) {
         module.exports = require("./switch.cjs");
     },
-    "@/components/ui/table" (module) {
+    "./table" (module) {
         module.exports = require("./table.cjs");
     },
     "./tabs" (module) {
@@ -150,7 +150,7 @@ var __webpack_modules__ = {
     "./toggle-group" (module) {
         module.exports = require("./toggle-group.cjs");
     },
-    "@/components/ui/toggle" (module) {
+    "./toggle" (module) {
         module.exports = require("./toggle.cjs");
     },
     "./tooltip" (module) {
@@ -241,7 +241,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_avatar__rspack_import_4[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _badge__rspack_import_5 = __webpack_require__("@/components/ui/badge");
+    var _badge__rspack_import_5 = __webpack_require__("./badge");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _badge__rspack_import_5)if ([
         "TreeView",
@@ -276,14 +276,14 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_calendar__rspack_import_9[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _card__rspack_import_10 = __webpack_require__("@/components/ui/card");
+    var _card__rspack_import_10 = __webpack_require__("./card");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _card__rspack_import_10)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_card__rspack_import_10[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _checkbox__rspack_import_11 = __webpack_require__("@/components/ui/checkbox");
+    var _checkbox__rspack_import_11 = __webpack_require__("./checkbox");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _checkbox__rspack_import_11)if ([
         "TreeView",
@@ -304,7 +304,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_combobox__rspack_import_13[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _command__rspack_import_14 = __webpack_require__("@/components/ui/command");
+    var _command__rspack_import_14 = __webpack_require__("./command");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _command__rspack_import_14)if ([
         "TreeView",
@@ -339,21 +339,21 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_datetime_picker__rspack_import_18[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _dialog__rspack_import_19 = __webpack_require__("@/components/ui/dialog");
+    var _dialog__rspack_import_19 = __webpack_require__("./dialog");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _dialog__rspack_import_19)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_dialog__rspack_import_19[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _dropdown_menu__rspack_import_20 = __webpack_require__("@/components/ui/dropdown-menu");
+    var _dropdown_menu__rspack_import_20 = __webpack_require__("./dropdown-menu");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _dropdown_menu__rspack_import_20)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_dropdown_menu__rspack_import_20[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _editable_cell__rspack_import_21 = __webpack_require__("@/components/ui/editable-cell");
+    var _editable_cell__rspack_import_21 = __webpack_require__("./editable-cell");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _editable_cell__rspack_import_21)if ([
         "TreeView",
@@ -381,14 +381,14 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_hover_card__rspack_import_24[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _input__rspack_import_25 = __webpack_require__("@/components/ui/input");
+    var _input__rspack_import_25 = __webpack_require__("./input");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _input__rspack_import_25)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_input__rspack_import_25[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _label__rspack_import_26 = __webpack_require__("@/components/ui/label");
+    var _label__rspack_import_26 = __webpack_require__("./label");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _label__rspack_import_26)if ([
         "TreeView",
@@ -528,7 +528,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_switch__rspack_import_45[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _table__rspack_import_46 = __webpack_require__("@/components/ui/table");
+    var _table__rspack_import_46 = __webpack_require__("./table");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _table__rspack_import_46)if ([
         "TreeView",
@@ -549,7 +549,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_textarea__rspack_import_48[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _toggle__rspack_import_49 = __webpack_require__("@/components/ui/toggle");
+    var _toggle__rspack_import_49 = __webpack_require__("./toggle");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _toggle__rspack_import_49)if ([
         "TreeView",

package/dist/components/ui/table.cjs

@@ -65,13 +65,13 @@ const TableFooter = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ c
 TableFooter.displayName = 'TableFooter';
 const TableRow = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("tr", {
         ref: ref,
-        className: (0, index_cjs_namespaceObject.cn)('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className),
+        className: (0, index_cjs_namespaceObject.cn)('border-b transition-colors bg-background hover:bg-muted/50 data-[state=selected]:bg-muted', className),
         ...props
     }));
 TableRow.displayName = 'TableRow';
 const TableHead = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("th", {
         ref: ref,
-        className: (0, index_cjs_namespaceObject.cn)('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', className),
+        className: (0, index_cjs_namespaceObject.cn)('h-12 px-4 text-left align-middle font-medium text-muted-foreground overflow-hidden bg-background [&:has([role=checkbox])]:pr-0', className),
         ...props
     }));
 TableHead.displayName = 'TableHead';

package/dist/components/ui/table.js

@@ -30,13 +30,13 @@ const TableFooter = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#
 TableFooter.displayName = 'TableFooter';
 const TableRow = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("tr", {
         ref: ref,
-        className: cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className),
+        className: cn('border-b transition-colors bg-background hover:bg-muted/50 data-[state=selected]:bg-muted', className),
         ...props
     }));
 TableRow.displayName = 'TableRow';
 const TableHead = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("th", {
         ref: ref,
-        className: cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', className),
+        className: cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground overflow-hidden bg-background [&:has([role=checkbox])]:pr-0', className),
         ...props
     }));
 TableHead.displayName = 'TableHead';

package/dist/styles.css

@@ -1170,6 +1170,9 @@
   .w-0 {
     width: calc(var(--spacing) * 0);
   }
+  .w-0\.5 {
+    width: calc(var(--spacing) * 0.5);
+  }
   .w-1 {
     width: calc(var(--spacing) * 1);
   }
@@ -1897,6 +1900,9 @@
   .overflow-hidden {
     overflow: hidden;
   }
+  .overflow-visible {
+    overflow: visible;
+  }
   .overflow-x-auto {
     overflow-x: auto;
   }
@@ -4131,6 +4137,13 @@
       background-color: var(--foreground-accent);
     }
   }
+  .group-hover\:w-0\.5 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        width: calc(var(--spacing) * 0.5);
+      }
+    }
+  }
   .group-hover\:scale-\[1\.2\] {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -4167,13 +4180,10 @@
       }
     }
   }
-  .group-hover\:bg-primary\/50 {
+  .group-hover\:bg-primary {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
         background-color: var(--primary);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--primary) 50%, transparent);
-        }
       }
     }
   }
@@ -6321,6 +6331,21 @@
       padding-left: calc(var(--spacing) * 7);
     }
   }
+  .\[\&\>tr\]\:table {
+    &>tr {
+      display: table;
+    }
+  }
+  .\[\&\>tr\]\:w-full {
+    &>tr {
+      width: 100%;
+    }
+  }
+  .\[\&\>tr\]\:table-fixed {
+    &>tr {
+      table-layout: fixed;
+    }
+  }
   .\[\&\>tr\]\:last\:border-b-0 {
     &>tr {
       &:last-child {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-wind",
-  "version": "2.7.0",
+  "version": "2.7.1",
   "description": "UiPath wind design system - A Tailwind CSS based React component library",
   "type": "module",
   "main": "./dist/index.js",