@trackunit/react-table 2.7.48 → 2.7.50-alpha-7317206cecd.0

package/index.cjs.js

@@ -154,37 +154,40 @@ const actionDataToMenuItem = (action, dataTestId) => {
  */
 const actionDataToActionButton = (action) => (jsxRuntime.jsx(ActionButton, { action: action, className: "max-w-max flex-shrink-0", "data-testid": action["data-testid"] || action.id, disabled: action.loading || action.disabled, id: action.id, variant: action.disabled ? "ghost" : undefined }, action.id));
 
-const cvaActionSheet = cssClassVarianceUtilities.cvaMerge([
-    "w-[760px]",
-    "max-w-[80%]",
-    "animate-fade-in-fast",
-    "grid",
-    "grid-cols-[min-content_1fr]",
-    "sm:grid-cols-[min-content_min-content_1fr_min-content]",
-    "sm:grid-rows-1",
-    "p-2",
-    "bg-primary-600",
-    "gap-1",
-    "rounded-2xl",
-    "z-top",
-    "shadow-2xl",
-    "fixed",
-    "bottom-24",
-    "left-1/2",
-    "-translate-x-1/2",
-]);
-const cvaDivider = cssClassVarianceUtilities.cvaMerge(["border-primary-500", "row-start-2", "col-span-4", "sm:hidden", "min-h-px"]);
-const cvaActionContainerAndOverflow = cssClassVarianceUtilities.cvaMerge([
-    "row-start-3",
-    "col-span-full",
-    "flex",
-    "flex-row",
-    "gap-2",
-    "overflow-hidden",
-    "sm:row-start-1",
-    "sm:col-span-3",
-    "sm:justify-end",
-], {
+const cvaActionSheet = cssClassVarianceUtilities.cva({
+    base: [
+        "w-[760px]",
+        "max-w-[80%]",
+        "animate-fade-in-fast",
+        "grid",
+        "grid-cols-[min-content_1fr]",
+        "sm:grid-cols-[min-content_min-content_1fr_min-content]",
+        "sm:grid-rows-1",
+        "p-2",
+        "bg-primary-600",
+        "gap-1",
+        "rounded-2xl",
+        "z-top",
+        "shadow-2xl",
+        "fixed",
+        "bottom-24",
+        "left-1/2",
+        "-translate-x-1/2",
+    ],
+});
+const cvaDivider = cssClassVarianceUtilities.cva({ base: ["border-primary-500", "row-start-2", "col-span-4", "sm:hidden", "min-h-px"] });
+const cvaActionContainerAndOverflow = cssClassVarianceUtilities.cva({
+    base: [
+        "row-start-3",
+        "col-span-full",
+        "flex",
+        "flex-row",
+        "gap-2",
+        "overflow-hidden",
+        "sm:row-start-1",
+        "sm:col-span-3",
+        "sm:justify-end",
+    ],
     variants: {
         isDropdown: {
             true: [],
@@ -192,17 +195,18 @@ const cvaActionContainerAndOverflow = cssClassVarianceUtilities.cvaMerge([
         },
     },
 });
-const cvaMoreContainer = cssClassVarianceUtilities.cvaMerge([
-    "row-start-4",
-    "col-span-full",
-    "sm:col-span-1",
-    "flex",
-    "flex-row",
-    "justify-between",
-    "gap-2",
-    "sm:row-start-1",
-    "sm:col-span-3",
-], {
+const cvaMoreContainer = cssClassVarianceUtilities.cva({
+    base: [
+        "row-start-4",
+        "col-span-full",
+        "sm:col-span-1",
+        "flex",
+        "flex-row",
+        "justify-between",
+        "gap-2",
+        "sm:row-start-1",
+        "sm:col-span-3",
+    ],
     variants: {
         isDropdown: {
             true: [],
@@ -644,7 +648,8 @@ const useTablePersistence = (persistenceKey) => {
     }), [initialState, onTableStateChange]);
 };
 
-const cvaColumnFilterGrabbable = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "justify-center"], {
+const cvaColumnFilterGrabbable = cssClassVarianceUtilities.cva({
+    base: ["flex", "items-center", "justify-center"],
     variants: {
         disabled: {
             true: "cursor-not-allowed text-neutral-400",
@@ -1506,7 +1511,7 @@ const Table = ({ rowHeight = 50, loading = false, hideFooter = false, style, ...
                                                                 : null, jsxRuntime.jsx(ColumnActions, { getColumn: props.getColumn, header: header, setSorting: props.setSorting, visibleColumnsCount: visibleColumnsCount })] })] })),
                                             !header.column.columnDef.meta?.shouldGrow && header.column.getCanResize() ? (jsxRuntime.jsx(reactTableBaseComponents.ResizeHandle, { isResizing: header.column.getIsResizing(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() })) : null));
                                     }) }, headerGroup.id));
-                            }) }), hasResults ? (jsxRuntime.jsx(reactTableBaseComponents.Tbody, { className: "relative text-sm font-normal contain-layout", ref: virtualizer.containerRef, children: virtualizer.getVirtualItems().map((virtualRow) => {
+                            }) }), hasResults ? (jsxRuntime.jsx(reactTableBaseComponents.Tbody, { className: "contain-layout relative text-sm font-normal", ref: virtualizer.containerRef, children: virtualizer.getVirtualItems().map((virtualRow) => {
                                 const row = props.getRowModel().rows[virtualRow.index];
                                 if (!row) {
                                     return null;
@@ -1577,7 +1582,8 @@ const Table = ({ rowHeight = 50, loading = false, hideFooter = false, style, ...
                                 total: props.getRowModel().rows.length,
                             }) }), props.pagination?.isLoading ? (jsxRuntime.jsx("span", { className: "ml-2", children: jsxRuntime.jsx(reactComponents.Spinner, { size: "small" }) })) : null, props.footerRightActions !== undefined && props.footerRightActions !== null ? (jsxRuntime.jsx("div", { className: "flex flex-1 justify-end", children: props.footerRightActions })) : null] }))] }));
 };
-const cvaTBody = cssClassVarianceUtilities.cvaMerge(["min-h-[40dvh]"], {
+const cvaTBody = cssClassVarianceUtilities.cva({
+    base: ["min-h-[40dvh]"],
     variants: {
         emptyState: {
             true: "min-h-[400px]",
@@ -1587,7 +1593,8 @@ const cvaTBody = cssClassVarianceUtilities.cvaMerge(["min-h-[40dvh]"], {
         emptyState: false,
     },
 });
-const cvaColumnHeaderContainer = cssClassVarianceUtilities.cvaMerge(["flex", "min-w-0", "w-full", "items-center", "self-center"], {
+const cvaColumnHeaderContainer = cssClassVarianceUtilities.cva({
+    base: ["flex", "min-w-0", "w-full", "items-center", "self-center"],
     variants: {
         sortable: {
             true: "cursor-pointer select-none",
@@ -1597,7 +1604,8 @@ const cvaColumnHeaderContainer = cssClassVarianceUtilities.cvaMerge(["flex", "mi
         sortable: false,
     },
 });
-const cvaTh = cssClassVarianceUtilities.cvaMerge(["flex", "relative"], {
+const cvaTh = cssClassVarianceUtilities.cva({
+    base: ["flex", "relative"],
     variants: {
         pinned: {
             left: "sticky left-0 z-[3] bg-neutral-100",
@@ -1625,7 +1633,8 @@ const cvaTh = cssClassVarianceUtilities.cvaMerge(["flex", "relative"], {
     },
 });
 const sharedPinnedStyles = "sticky z-[1] group-has-[:checked]:bg-primary-50 group-hover:has-[:checked]:bg-primary-50 group-focus-within:has-[:checked]:bg-primary-50 bg-white group-hover:bg-neutral-100";
-const cvaTd = cssClassVarianceUtilities.cvaMerge(["relative"], {
+const cvaTd = cssClassVarianceUtilities.cva({
+    base: ["relative"],
     variants: {
         pinned: {
             left: `${sharedPinnedStyles} left-0`,

package/index.esm.js

@@ -4,7 +4,7 @@ import { Icon, MenuItem, Button, Tooltip, useOverflowItems, MoreMenu, MenuConten
 import { Link } from '@tanstack/react-router';
 import { objectValues, VISIBLE_ONLY_COLUMN_VISIBILITY_KEY, objectKeys, nonNullable, objectEntries } from '@trackunit/shared-utils';
 import { useMemo, Children, cloneElement, useCallback, useState, useEffect, useRef, createElement } from 'react';
-import { cvaMerge } from '@trackunit/css-class-variance-utilities';
+import { cva } from '@trackunit/css-class-variance-utilities';
 import { useCurrentUser } from '@trackunit/react-core-hooks';
 import { z } from 'zod';
 import { cvaLabel, ToggleSwitch, Search, RadioGroup, RadioItem, Checkbox } from '@trackunit/react-form-components';
@@ -153,37 +153,40 @@ const actionDataToMenuItem = (action, dataTestId) => {
  */
 const actionDataToActionButton = (action) => (jsx(ActionButton, { action: action, className: "max-w-max flex-shrink-0", "data-testid": action["data-testid"] || action.id, disabled: action.loading || action.disabled, id: action.id, variant: action.disabled ? "ghost" : undefined }, action.id));
 
-const cvaActionSheet = cvaMerge([
-    "w-[760px]",
-    "max-w-[80%]",
-    "animate-fade-in-fast",
-    "grid",
-    "grid-cols-[min-content_1fr]",
-    "sm:grid-cols-[min-content_min-content_1fr_min-content]",
-    "sm:grid-rows-1",
-    "p-2",
-    "bg-primary-600",
-    "gap-1",
-    "rounded-2xl",
-    "z-top",
-    "shadow-2xl",
-    "fixed",
-    "bottom-24",
-    "left-1/2",
-    "-translate-x-1/2",
-]);
-const cvaDivider = cvaMerge(["border-primary-500", "row-start-2", "col-span-4", "sm:hidden", "min-h-px"]);
-const cvaActionContainerAndOverflow = cvaMerge([
-    "row-start-3",
-    "col-span-full",
-    "flex",
-    "flex-row",
-    "gap-2",
-    "overflow-hidden",
-    "sm:row-start-1",
-    "sm:col-span-3",
-    "sm:justify-end",
-], {
+const cvaActionSheet = cva({
+    base: [
+        "w-[760px]",
+        "max-w-[80%]",
+        "animate-fade-in-fast",
+        "grid",
+        "grid-cols-[min-content_1fr]",
+        "sm:grid-cols-[min-content_min-content_1fr_min-content]",
+        "sm:grid-rows-1",
+        "p-2",
+        "bg-primary-600",
+        "gap-1",
+        "rounded-2xl",
+        "z-top",
+        "shadow-2xl",
+        "fixed",
+        "bottom-24",
+        "left-1/2",
+        "-translate-x-1/2",
+    ],
+});
+const cvaDivider = cva({ base: ["border-primary-500", "row-start-2", "col-span-4", "sm:hidden", "min-h-px"] });
+const cvaActionContainerAndOverflow = cva({
+    base: [
+        "row-start-3",
+        "col-span-full",
+        "flex",
+        "flex-row",
+        "gap-2",
+        "overflow-hidden",
+        "sm:row-start-1",
+        "sm:col-span-3",
+        "sm:justify-end",
+    ],
     variants: {
         isDropdown: {
             true: [],
@@ -191,17 +194,18 @@ const cvaActionContainerAndOverflow = cvaMerge([
         },
     },
 });
-const cvaMoreContainer = cvaMerge([
-    "row-start-4",
-    "col-span-full",
-    "sm:col-span-1",
-    "flex",
-    "flex-row",
-    "justify-between",
-    "gap-2",
-    "sm:row-start-1",
-    "sm:col-span-3",
-], {
+const cvaMoreContainer = cva({
+    base: [
+        "row-start-4",
+        "col-span-full",
+        "sm:col-span-1",
+        "flex",
+        "flex-row",
+        "justify-between",
+        "gap-2",
+        "sm:row-start-1",
+        "sm:col-span-3",
+    ],
     variants: {
         isDropdown: {
             true: [],
@@ -643,7 +647,8 @@ const useTablePersistence = (persistenceKey) => {
     }), [initialState, onTableStateChange]);
 };
 
-const cvaColumnFilterGrabbable = cvaMerge(["flex", "items-center", "justify-center"], {
+const cvaColumnFilterGrabbable = cva({
+    base: ["flex", "items-center", "justify-center"],
     variants: {
         disabled: {
             true: "cursor-not-allowed text-neutral-400",
@@ -1505,7 +1510,7 @@ const Table = ({ rowHeight = 50, loading = false, hideFooter = false, style, ...
                                                                 : null, jsx(ColumnActions, { getColumn: props.getColumn, header: header, setSorting: props.setSorting, visibleColumnsCount: visibleColumnsCount })] })] })),
                                             !header.column.columnDef.meta?.shouldGrow && header.column.getCanResize() ? (jsx(ResizeHandle, { isResizing: header.column.getIsResizing(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() })) : null));
                                     }) }, headerGroup.id));
-                            }) }), hasResults ? (jsx(Tbody, { className: "relative text-sm font-normal contain-layout", ref: virtualizer.containerRef, children: virtualizer.getVirtualItems().map((virtualRow) => {
+                            }) }), hasResults ? (jsx(Tbody, { className: "contain-layout relative text-sm font-normal", ref: virtualizer.containerRef, children: virtualizer.getVirtualItems().map((virtualRow) => {
                                 const row = props.getRowModel().rows[virtualRow.index];
                                 if (!row) {
                                     return null;
@@ -1576,7 +1581,8 @@ const Table = ({ rowHeight = 50, loading = false, hideFooter = false, style, ...
                                 total: props.getRowModel().rows.length,
                             }) }), props.pagination?.isLoading ? (jsx("span", { className: "ml-2", children: jsx(Spinner, { size: "small" }) })) : null, props.footerRightActions !== undefined && props.footerRightActions !== null ? (jsx("div", { className: "flex flex-1 justify-end", children: props.footerRightActions })) : null] }))] }));
 };
-const cvaTBody = cvaMerge(["min-h-[40dvh]"], {
+const cvaTBody = cva({
+    base: ["min-h-[40dvh]"],
     variants: {
         emptyState: {
             true: "min-h-[400px]",
@@ -1586,7 +1592,8 @@ const cvaTBody = cvaMerge(["min-h-[40dvh]"], {
         emptyState: false,
     },
 });
-const cvaColumnHeaderContainer = cvaMerge(["flex", "min-w-0", "w-full", "items-center", "self-center"], {
+const cvaColumnHeaderContainer = cva({
+    base: ["flex", "min-w-0", "w-full", "items-center", "self-center"],
     variants: {
         sortable: {
             true: "cursor-pointer select-none",
@@ -1596,7 +1603,8 @@ const cvaColumnHeaderContainer = cvaMerge(["flex", "min-w-0", "w-full", "items-c
         sortable: false,
     },
 });
-const cvaTh = cvaMerge(["flex", "relative"], {
+const cvaTh = cva({
+    base: ["flex", "relative"],
     variants: {
         pinned: {
             left: "sticky left-0 z-[3] bg-neutral-100",
@@ -1624,7 +1632,8 @@ const cvaTh = cvaMerge(["flex", "relative"], {
     },
 });
 const sharedPinnedStyles = "sticky z-[1] group-has-[:checked]:bg-primary-50 group-hover:has-[:checked]:bg-primary-50 group-focus-within:has-[:checked]:bg-primary-50 bg-white group-hover:bg-neutral-100";
-const cvaTd = cvaMerge(["relative"], {
+const cvaTd = cva({
+    base: ["relative"],
     variants: {
         pinned: {
             left: `${sharedPinnedStyles} left-0`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table",
-  "version": "2.7.48",
+  "version": "2.7.50-alpha-7317206cecd.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -11,15 +11,15 @@
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/react-components": "2.13.0",
-    "@trackunit/react-core-hooks": "1.21.41",
-    "@trackunit/shared-utils": "1.16.32",
-    "@trackunit/css-class-variance-utilities": "1.14.29",
-    "@trackunit/ui-icons": "1.14.28",
-    "@trackunit/react-table-base-components": "2.6.48",
-    "@trackunit/react-form-components": "2.6.48",
-    "@trackunit/i18n-library-translation": "2.4.41",
-    "@trackunit/iris-app-runtime-core-api": "1.17.41",
+    "@trackunit/react-components": "2.13.2-alpha-7317206cecd.0",
+    "@trackunit/react-core-hooks": "1.21.43-alpha-7317206cecd.0",
+    "@trackunit/shared-utils": "1.16.34-alpha-7317206cecd.0",
+    "@trackunit/css-class-variance-utilities": "2.0.1-alpha-7317206cecd.0",
+    "@trackunit/ui-icons": "1.14.30-alpha-7317206cecd.0",
+    "@trackunit/react-table-base-components": "2.6.50-alpha-7317206cecd.0",
+    "@trackunit/react-form-components": "2.6.50-alpha-7317206cecd.0",
+    "@trackunit/i18n-library-translation": "2.4.43-alpha-7317206cecd.0",
+    "@trackunit/iris-app-runtime-core-api": "1.17.43-alpha-7317206cecd.0",
     "zod": "^3.25.76"
   },
   "peerDependencies": {

package/src/ActionSheet/ActionSheet.variants.d.ts

@@ -1,8 +1,56 @@
-export declare const cvaActionSheet: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const cvaDivider: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const cvaActionContainerAndOverflow: (props?: ({
-    isDropdown?: boolean | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare const cvaMoreContainer: (props?: ({
-    isDropdown?: boolean | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaActionSheet: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;
+export declare const cvaDivider: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;
+export declare const cvaActionContainerAndOverflow: import("cva").CVAComponent<Omit<{
+    base: string[];
+    variants: {
+        isDropdown: {
+            true: never[];
+            false: string[];
+        };
+    };
+}, "defaultVariants"> & {
+    variants: {
+        isDropdown: {
+            true: never[];
+            false: string[];
+        };
+    };
+    defaultVariants: Omit<{}, never>;
+}, {
+    isDropdown: {
+        true: never[];
+        false: string[];
+    };
+}>;
+export declare const cvaMoreContainer: import("cva").CVAComponent<Omit<{
+    base: string[];
+    variants: {
+        isDropdown: {
+            true: never[];
+            false: string[];
+        };
+    };
+}, "defaultVariants"> & {
+    variants: {
+        isDropdown: {
+            true: never[];
+            false: string[];
+        };
+    };
+    defaultVariants: Omit<{}, never>;
+}, {
+    isDropdown: {
+        true: never[];
+        false: string[];
+    };
+}>;

package/src/menus/ColumnFIlter.variants.d.ts

@@ -1,3 +1,22 @@
-export declare const cvaColumnFilterGrabbable: (props?: ({
-    disabled?: boolean | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaColumnFilterGrabbable: import("cva").CVAComponent<Omit<{
+    base: string[];
+    variants: {
+        disabled: {
+            true: string;
+            false: string;
+        };
+    };
+}, "defaultVariants"> & {
+    variants: {
+        disabled: {
+            true: string;
+            false: string;
+        };
+    };
+    defaultVariants: Omit<{}, never>;
+}, {
+    disabled: {
+        true: string;
+        false: string;
+    };
+}>;