@wallarm-org/design-system 2.4.0 → 2.5.0

package/dist/components/CodeSnippet/internal/CodeSnippetFrame.js

@@ -2,10 +2,12 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 import { createPortal } from "react-dom";
+import { trackDismissableElement } from "@zag-js/dismissable";
+import { trapFocus } from "@zag-js/focus-trap";
 import { cn } from "../../../utils/cn.js";
 import { useTestId } from "../../../utils/testId.js";
-const FULLSCREEN_CLASSES = "fixed inset-16 z-50 m-0 w-auto h-auto min-w-0 min-h-0 max-w-[none] max-h-[none]";
-const BACKDROP_CLASSES = "fixed inset-0 z-40 backdrop-blur-xs bg-component-dialog-overlay";
+const FULLSCREEN_CLASSES = cn("fixed inset-16 m-0 w-auto h-auto min-w-0 min-h-0 max-w-[none] max-h-[none]", "z-[calc(var(--drawer-positioner-z-index)+(var(--layer-index,0)*var(--drawer-level-ratio)))]");
+const BACKDROP_CLASSES = cn("fixed inset-0 backdrop-blur-xs bg-component-dialog-overlay", "z-[calc(var(--drawer-overlay-z-index)+(var(--layer-index,0)*var(--drawer-level-ratio)))]");
 const HOST_CLASSES = "contents";
 const noop = ()=>{};
 const subscribeNoop = ()=>noop;
@@ -18,7 +20,7 @@ const createHost = ()=>{
     return host;
 };
 const CodeSnippetFrame = (t0)=>{
-    const $ = c(40);
+    const $ = c(45);
     let children;
     let className;
     let isFullscreen;
@@ -96,96 +98,129 @@ const CodeSnippetFrame = (t0)=>{
     useLayoutEffect(t3, t4);
     let t5;
     let t6;
-    if ($[15] !== isFullscreen || $[16] !== setIsFullscreen) {
+    if ($[15] !== host || $[16] !== isFullscreen || $[17] !== setIsFullscreen) {
         t5 = ()=>{
-            if (!isFullscreen) return;
-            const handleKeyDown = (event)=>{
-                if ("Escape" === event.key && !event.defaultPrevented) setIsFullscreen(false);
+            if (!isFullscreen || !host) return;
+            const options = {
+                onRequestDismiss: (event)=>{
+                    event.preventDefault();
+                    setIsFullscreen(false);
+                }
+            };
+            const untrack = trackDismissableElement(host, options);
+            const untrap = trapFocus(host);
+            return ()=>{
+                untrap();
+                untrack();
             };
-            document.addEventListener("keydown", handleKeyDown);
-            return ()=>document.removeEventListener("keydown", handleKeyDown);
         };
         t6 = [
             isFullscreen,
+            host,
             setIsFullscreen
         ];
-        $[15] = isFullscreen;
-        $[16] = setIsFullscreen;
-        $[17] = t5;
-        $[18] = t6;
+        $[15] = host;
+        $[16] = isFullscreen;
+        $[17] = setIsFullscreen;
+        $[18] = t5;
+        $[19] = t6;
     } else {
-        t5 = $[17];
-        t6 = $[18];
+        t5 = $[18];
+        t6 = $[19];
     }
     useEffect(t5, t6);
     let t7;
-    if ($[19] !== backdropTestId || $[20] !== isFullscreen || $[21] !== setIsFullscreen) {
-        t7 = isFullscreen ? /*#__PURE__*/ jsx("div", {
+    let t8;
+    if ($[20] !== isFullscreen || $[21] !== setIsFullscreen) {
+        t7 = ()=>{
+            if (!isFullscreen) return;
+            const handleKeyDown = (event_0)=>{
+                if ("Escape" === event_0.key && !event_0.defaultPrevented) setIsFullscreen(false);
+            };
+            document.addEventListener("keydown", handleKeyDown);
+            return ()=>document.removeEventListener("keydown", handleKeyDown);
+        };
+        t8 = [
+            isFullscreen,
+            setIsFullscreen
+        ];
+        $[20] = isFullscreen;
+        $[21] = setIsFullscreen;
+        $[22] = t7;
+        $[23] = t8;
+    } else {
+        t7 = $[22];
+        t8 = $[23];
+    }
+    useEffect(t7, t8);
+    let t9;
+    if ($[24] !== backdropTestId || $[25] !== isFullscreen || $[26] !== setIsFullscreen) {
+        t9 = isFullscreen ? /*#__PURE__*/ jsx("div", {
             "aria-hidden": "true",
             "data-testid": backdropTestId,
             className: BACKDROP_CLASSES,
             onClick: ()=>setIsFullscreen(false)
         }) : null;
-        $[19] = backdropTestId;
-        $[20] = isFullscreen;
-        $[21] = setIsFullscreen;
-        $[22] = t7;
-    } else t7 = $[22];
-    const t8 = isFullscreen && FULLSCREEN_CLASSES;
-    let t9;
-    if ($[23] !== className || $[24] !== t8) {
-        t9 = cn(className, t8);
-        $[23] = className;
-        $[24] = t8;
-        $[25] = t9;
-    } else t9 = $[25];
-    let t10;
-    if ($[26] !== children || $[27] !== props || $[28] !== ref || $[29] !== t9) {
-        t10 = /*#__PURE__*/ jsx("div", {
+        $[24] = backdropTestId;
+        $[25] = isFullscreen;
+        $[26] = setIsFullscreen;
+        $[27] = t9;
+    } else t9 = $[27];
+    const t10 = isFullscreen && FULLSCREEN_CLASSES;
+    let t11;
+    if ($[28] !== className || $[29] !== t10) {
+        t11 = cn(className, t10);
+        $[28] = className;
+        $[29] = t10;
+        $[30] = t11;
+    } else t11 = $[30];
+    let t12;
+    if ($[31] !== children || $[32] !== props || $[33] !== ref || $[34] !== t11) {
+        t12 = /*#__PURE__*/ jsx("div", {
             ...props,
             ref: ref,
-            className: t9,
+            className: t11,
             children: children
         });
-        $[26] = children;
-        $[27] = props;
-        $[28] = ref;
-        $[29] = t9;
-        $[30] = t10;
-    } else t10 = $[30];
-    let t11;
-    if ($[31] !== t10 || $[32] !== t7) {
-        t11 = /*#__PURE__*/ jsxs(Fragment, {
+        $[31] = children;
+        $[32] = props;
+        $[33] = ref;
+        $[34] = t11;
+        $[35] = t12;
+    } else t12 = $[35];
+    let t13;
+    if ($[36] !== t12 || $[37] !== t9) {
+        t13 = /*#__PURE__*/ jsxs(Fragment, {
             children: [
-                t7,
-                t10
+                t9,
+                t12
             ]
         });
-        $[31] = t10;
-        $[32] = t7;
-        $[33] = t11;
-    } else t11 = $[33];
-    const frame = t11;
-    let t12;
-    if ($[34] !== frame || $[35] !== host || $[36] !== portalReady) {
-        t12 = portalReady && host ? /*#__PURE__*/ createPortal(frame, host) : frame;
-        $[34] = frame;
-        $[35] = host;
-        $[36] = portalReady;
-        $[37] = t12;
-    } else t12 = $[37];
-    let t13;
-    if ($[38] !== t12) {
-        t13 = /*#__PURE__*/ jsx("div", {
+        $[36] = t12;
+        $[37] = t9;
+        $[38] = t13;
+    } else t13 = $[38];
+    const frame = t13;
+    let t14;
+    if ($[39] !== frame || $[40] !== host || $[41] !== portalReady) {
+        t14 = portalReady && host ? /*#__PURE__*/ createPortal(frame, host) : frame;
+        $[39] = frame;
+        $[40] = host;
+        $[41] = portalReady;
+        $[42] = t14;
+    } else t14 = $[42];
+    let t15;
+    if ($[43] !== t14) {
+        t15 = /*#__PURE__*/ jsx("div", {
             ref: placeholderRef,
             "data-slot": "code-snippet-frame",
             className: HOST_CLASSES,
-            children: t12
+            children: t14
         });
-        $[38] = t12;
-        $[39] = t13;
-    } else t13 = $[39];
-    return t13;
+        $[43] = t14;
+        $[44] = t15;
+    } else t15 = $[44];
+    return t15;
 };
 CodeSnippetFrame.displayName = "CodeSnippetFrame";
 export { CodeSnippetFrame };

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";