@trackunit/react-table 1.1.0 → 1.2.0

package/index.cjs.js

@@ -347,7 +347,7 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, defaul
             columnReordered: dragColumn?.columnDef.header ?? "",
         });
     }, [localColumns, onUserEvent]);
-    return (jsxRuntime.jsx("div", { className: "flex max-h-full max-w-[400px] flex-col gap-2 overflow-y-auto overflow-x-hidden whitespace-nowrap", children: localColumns.map((column, index) => {
+    return (jsxRuntime.jsx("div", { className: "flex max-h-full max-w-[400px] flex-col overflow-y-auto overflow-x-hidden whitespace-nowrap", children: localColumns.map((column, index) => {
             const { columnDef } = column;
             if (!columnDef.meta?.columnFilterLabel &&
                 (!columnDef.header || columnDef.header.length === 0 || typeof columnDef.header === "function")) {
@@ -410,7 +410,10 @@ const ColumnFilterItem = ({ name, onToggle, toggled, disabled, index, moveColumn
     });
     const opacity = isDragging ? 0 : 1;
     drag(drop(ref));
-    return (jsxRuntime.jsxs("div", { className: "grid w-full grid-cols-[min-content,1fr,min-content] items-center gap-2", ref: ref, style: { opacity: opacity }, children: [jsxRuntime.jsx("div", { className: cvaColumnFilterGrabbable({ disabled: false }), children: jsxRuntime.jsx(reactComponents.Icon, { color: "secondary", name: "EllipsisDrag", size: "small" }) }), jsxRuntime.jsxs("div", { className: "grid w-full grid-cols-[1fr,min-content]", children: [jsxRuntime.jsx(reactComponents.Text, { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: name }), disabled ? jsxRuntime.jsx(reactComponents.Icon, { name: "LockClosed", size: "small" }) : null] }), jsxRuntime.jsx(reactFormComponents.Toggle, { disabled: disabled, id: id, onChange: (isToggled, event) => event && onToggle(isToggled, event), size: "small", toggled: toggled })] }));
+    return (jsxRuntime.jsxs("div", { className: reactComponents.cvaInteractableItem({
+            selected: false,
+            className: "grid w-full grid-cols-[min-content,1fr,min-content] items-center gap-2 py-1",
+        }), ref: ref, style: { opacity: opacity }, children: [jsxRuntime.jsx("div", { className: cvaColumnFilterGrabbable({ disabled: false }), children: jsxRuntime.jsx(reactComponents.Icon, { color: "secondary", name: "EllipsisDrag", size: "small" }) }), jsxRuntime.jsxs("label", { className: "grid w-full grid-cols-[1fr,min-content] items-center gap-2", htmlFor: id, children: [jsxRuntime.jsxs("div", { className: "grid w-full grid-cols-[1fr,min-content] items-center", children: [jsxRuntime.jsx(reactComponents.Text, { className: reactFormComponents.cvaLabel(), children: name }), disabled ? jsxRuntime.jsx(reactComponents.Icon, { name: "LockClosed", size: "small" }) : null] }), jsxRuntime.jsx(reactFormComponents.ToggleSwitch, { disabled: disabled, id: id, onChange: (isToggled, event) => event && onToggle(isToggled, event), showInputFocus: false, size: "small", toggled: toggled })] })] }));
 };
 
 /**

package/index.esm.js

@@ -1,11 +1,11 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
-import { MenuItem, Icon, Button, useOverflowItems, MoreMenu, MenuList, Spacer, Tooltip, Popover, PopoverTrigger, PopoverContent, Text, Card, cvaInteractableItem, Spinner, EmptyState } from '@trackunit/react-components';
+import { MenuItem, Icon, Button, useOverflowItems, MoreMenu, MenuList, Spacer, Tooltip, Popover, PopoverTrigger, PopoverContent, Text, cvaInteractableItem, Card, Spinner, EmptyState } from '@trackunit/react-components';
 import { objectValues, nonNullable, objectKeys, objectEntries } from '@trackunit/shared-utils';
 import { useMemo, Children, cloneElement, useEffect, useCallback, useState, useRef } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { Link } from '@tanstack/react-router';
-import { Toggle, RadioGroup, RadioItem, Checkbox } from '@trackunit/react-form-components';
+import { cvaLabel, ToggleSwitch, RadioGroup, RadioItem, Checkbox } from '@trackunit/react-form-components';
 import update from 'immutability-helper';
 import { DndProvider, useDrop, useDrag } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
@@ -346,7 +346,7 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, defaul
             columnReordered: dragColumn?.columnDef.header ?? "",
         });
     }, [localColumns, onUserEvent]);
-    return (jsx("div", { className: "flex max-h-full max-w-[400px] flex-col gap-2 overflow-y-auto overflow-x-hidden whitespace-nowrap", children: localColumns.map((column, index) => {
+    return (jsx("div", { className: "flex max-h-full max-w-[400px] flex-col overflow-y-auto overflow-x-hidden whitespace-nowrap", children: localColumns.map((column, index) => {
             const { columnDef } = column;
             if (!columnDef.meta?.columnFilterLabel &&
                 (!columnDef.header || columnDef.header.length === 0 || typeof columnDef.header === "function")) {
@@ -409,7 +409,10 @@ const ColumnFilterItem = ({ name, onToggle, toggled, disabled, index, moveColumn
     });
     const opacity = isDragging ? 0 : 1;
     drag(drop(ref));
-    return (jsxs("div", { className: "grid w-full grid-cols-[min-content,1fr,min-content] items-center gap-2", ref: ref, style: { opacity: opacity }, children: [jsx("div", { className: cvaColumnFilterGrabbable({ disabled: false }), children: jsx(Icon, { color: "secondary", name: "EllipsisDrag", size: "small" }) }), jsxs("div", { className: "grid w-full grid-cols-[1fr,min-content]", children: [jsx(Text, { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: name }), disabled ? jsx(Icon, { name: "LockClosed", size: "small" }) : null] }), jsx(Toggle, { disabled: disabled, id: id, onChange: (isToggled, event) => event && onToggle(isToggled, event), size: "small", toggled: toggled })] }));
+    return (jsxs("div", { className: cvaInteractableItem({
+            selected: false,
+            className: "grid w-full grid-cols-[min-content,1fr,min-content] items-center gap-2 py-1",
+        }), ref: ref, style: { opacity: opacity }, children: [jsx("div", { className: cvaColumnFilterGrabbable({ disabled: false }), children: jsx(Icon, { color: "secondary", name: "EllipsisDrag", size: "small" }) }), jsxs("label", { className: "grid w-full grid-cols-[1fr,min-content] items-center gap-2", htmlFor: id, children: [jsxs("div", { className: "grid w-full grid-cols-[1fr,min-content] items-center", children: [jsx(Text, { className: cvaLabel(), children: name }), disabled ? jsx(Icon, { name: "LockClosed", size: "small" }) : null] }), jsx(ToggleSwitch, { disabled: disabled, id: id, onChange: (isToggled, event) => event && onToggle(isToggled, event), showInputFocus: false, size: "small", toggled: toggled })] })] }));
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -15,15 +15,15 @@
     "jest-fetch-mock": "^3.0.3",
     "@tanstack/react-router": "1.47.1",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/react-components": "1.2.0",
-    "@trackunit/shared-utils": "1.3.0",
-    "@trackunit/css-class-variance-utilities": "1.1.0",
-    "@trackunit/ui-icons": "1.1.0",
-    "@trackunit/react-table-base-components": "1.1.0",
-    "@trackunit/react-table-pagination": "1.1.0",
-    "@trackunit/react-form-components": "1.1.0",
-    "@trackunit/i18n-library-translation": "1.1.0",
-    "@trackunit/react-core-contexts-api": "1.1.0"
+    "@trackunit/react-components": "1.3.0",
+    "@trackunit/shared-utils": "1.4.0",
+    "@trackunit/css-class-variance-utilities": "1.2.0",
+    "@trackunit/ui-icons": "1.2.0",
+    "@trackunit/react-table-base-components": "1.2.0",
+    "@trackunit/react-table-pagination": "1.2.0",
+    "@trackunit/react-form-components": "1.2.0",
+    "@trackunit/i18n-library-translation": "1.2.0",
+    "@trackunit/react-core-contexts-api": "1.2.0"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",