@wallarm-org/design-system 2.4.1-rc-fix-code-snippet-fullscreen-in-dialog.1 → 2.5.0

package/dist/components/Table/StickyGroupParent.js

@@ -2,18 +2,19 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import { cn } from "../../utils/cn.js";
 import { useStickyGroupParent } from "./hooks/index.js";
-import { TABLE_DRAG_HANDLE_COLUMN_ID, TABLE_EXPAND_COLUMN_ID, TABLE_SELECT_COLUMN_ID, useTableValue, withTableState } from "./lib/index.js";
+import { TABLE_DRAG_HANDLE_COLUMN_ID, TABLE_EXPAND_COLUMN_ID, TABLE_SELECT_COLUMN_ID, useRenderEveryTime, useTableValue, withTableState } from "./lib/index.js";
 import { Td, Tr } from "./primitives/index.js";
 import { TableBodyCell } from "./TableBody/TableBodyCell.js";
 import { TableColGroup } from "./TableColGroup.js";
 import { useTableContext } from "./TableContext/index.js";
+import { TableFullWidthCell } from "./TableRow.js";
 const SYSTEM_COLUMN_IDS = new Set([
     TABLE_EXPAND_COLUMN_ID,
     TABLE_SELECT_COLUMN_ID,
     TABLE_DRAG_HANDLE_COLUMN_ID
 ]);
 const StickyGroupParent = ({ tableWidth, headerHeight })=>{
-    const { table, containerRef, tbodyRef, virtualizerRef, virtualized } = useTableContext();
+    const { table, containerRef, tbodyRef, virtualizerRef, virtualized, renderFullWidthGroupRow } = useTableContext();
     const useWindowScroll = 'window' === virtualized;
     const { stickyRow, pushUpOffset } = useStickyGroupParent({
         table,
@@ -64,6 +65,8 @@ const StickyGroupParent = ({ tableWidth, headerHeight })=>{
     const dataCells = cells?.filter((c)=>!SYSTEM_COLUMN_IDS.has(c.column.id));
     const firstDataCell = dataCells?.[0];
     const isSelected = useTableValue(()=>stickyRow?.getIsAllSubRowsSelected());
+    const fullWidthContent = useRenderEveryTime(()=>stickyRow ? renderFullWidthGroupRow?.(stickyRow) : void 0);
+    const isFullWidth = void 0 !== fullWidthContent;
     return /*#__PURE__*/ jsx("div", {
         className: "sticky z-[21] h-0 overflow-visible pointer-events-none",
         style: {
@@ -98,12 +101,16 @@ const StickyGroupParent = ({ tableWidth, headerHeight })=>{
                                             cell: cell,
                                             disablePinnedShadow: true
                                         }, cell.id)),
-                                    firstDataCell && /*#__PURE__*/ jsx(TableBodyCell, {
+                                    isFullWidth && /*#__PURE__*/ jsx(TableFullWidthCell, {
+                                        colSpan: dataCells.length,
+                                        children: fullWidthContent
+                                    }),
+                                    !isFullWidth && firstDataCell && /*#__PURE__*/ jsx(TableBodyCell, {
                                         cell: firstDataCell,
                                         className: "border-r-0",
                                         disablePinnedShadow: true
                                     }),
-                                    withTableState(table.state, ()=>dataCells.slice(1).map((cell)=>/*#__PURE__*/ jsx(Td, {
+                                    withTableState(table.state, ()=>(isFullWidth ? [] : dataCells).slice(1).map((cell)=>/*#__PURE__*/ jsx(Td, {
                                                 className: cn('border-b border-border-primary-light bg-bg-surface-2 overlay', 'group-hover/row:overlay-states-primary-hover group-data-[selected]/row:overlay-states-primary-active', 'group-data-[preview-active]/row:overlay-states-primary-hover group-has-[[data-state=open]]/row:overlay-states-primary-hover'),
                                                 style: {
                                                     width: cell.column.getSize()

package/dist/components/Table/TableBody/TableRowOverlay.js

@@ -1,17 +1,25 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { c as compiler_runtime_c } from "react/compiler-runtime";
 import { flexRender } from "@tanstack/react-table";
 import { cn } from "../../../utils/cn.js";
-import { getAlignClass, withTableState } from "../lib/index.js";
+import { getAlignClass, useRenderEveryTime, withTableState } from "../lib/index.js";
 import { Td, Tr } from "../primitives/index.js";
 import { useTableContext } from "../TableContext/index.js";
 const TableRowOverlayInner = (t0)=>{
-    const $ = compiler_runtime_c(6);
+    const $ = compiler_runtime_c(10);
     const { row } = t0;
-    const { table } = useTableContext();
+    const { table, renderFullWidthRow } = useTableContext();
     let t1;
-    if ($[0] !== row || $[1] !== table) {
-        t1 = ()=>{
+    if ($[0] !== renderFullWidthRow || $[1] !== row) {
+        t1 = ()=>renderFullWidthRow?.(row);
+        $[0] = renderFullWidthRow;
+        $[1] = row;
+        $[2] = t1;
+    } else t1 = $[2];
+    const fullWidthContent = useRenderEveryTime(t1);
+    let t2;
+    if ($[3] !== fullWidthContent || $[4] !== row || $[5] !== table) {
+        t2 = ()=>{
             const visibleColumns = table.getVisibleLeafColumns();
             return /*#__PURE__*/ jsx("table", {
                 className: "w-full table-fixed border-collapse",
@@ -20,36 +28,44 @@ const TableRowOverlayInner = (t0)=>{
                     cursor: "grabbing"
                 },
                 children: /*#__PURE__*/ jsx("tbody", {
-                    children: /*#__PURE__*/ jsx(Tr, {
+                    children: /*#__PURE__*/ jsxs(Tr, {
                         className: "pointer-events-none shadow-lg opacity-90 bg-bg-primary",
-                        children: row.getVisibleCells().map((cell)=>{
-                            const column = visibleColumns.find((c)=>c.id === cell.column.id);
-                            const meta = cell.column.columnDef.meta;
-                            return /*#__PURE__*/ jsx(Td, {
+                        children: [
+                            void 0 !== fullWidthContent && /*#__PURE__*/ jsx(Td, {
                                 pinned: false,
-                                className: cn(getAlignClass(meta), meta?.cellClassName),
-                                style: {
-                                    width: column?.getSize()
-                                },
-                                children: flexRender(cell.column.columnDef.cell, cell.getContext())
-                            }, cell.id);
-                        })
+                                colSpan: row.getVisibleCells().length,
+                                children: fullWidthContent
+                            }),
+                            (void 0 === fullWidthContent ? row.getVisibleCells() : []).map((cell)=>{
+                                const column = visibleColumns.find((c)=>c.id === cell.column.id);
+                                const meta = cell.column.columnDef.meta;
+                                return /*#__PURE__*/ jsx(Td, {
+                                    pinned: false,
+                                    className: cn(getAlignClass(meta), meta?.cellClassName),
+                                    style: {
+                                        width: column?.getSize()
+                                    },
+                                    children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                                }, cell.id);
+                            })
+                        ]
                     })
                 })
             });
         };
-        $[0] = row;
-        $[1] = table;
-        $[2] = t1;
-    } else t1 = $[2];
-    let t2;
-    if ($[3] !== t1 || $[4] !== table.state) {
-        t2 = withTableState(table.state, t1);
-        $[3] = t1;
-        $[4] = table.state;
-        $[5] = t2;
-    } else t2 = $[5];
-    return t2;
+        $[3] = fullWidthContent;
+        $[4] = row;
+        $[5] = table;
+        $[6] = t2;
+    } else t2 = $[6];
+    let t3;
+    if ($[7] !== t2 || $[8] !== table.state) {
+        t3 = withTableState(table.state, t2);
+        $[7] = t2;
+        $[8] = table.state;
+        $[9] = t3;
+    } else t3 = $[9];
+    return t3;
 };
 const TableRowOverlay = TableRowOverlayInner;
 TableRowOverlay.displayName = "TableRowOverlay";