@trackunit/react-table 1.3.163 → 1.3.167

package/index.cjs.js

@@ -286,6 +286,77 @@ const cvaColumnFilterGrabbable = cssClassVarianceUtilities.cvaMerge(["flex", "it
     },
 });
 
+const ItemTypes = {
+    COLUMN: "column",
+};
+/**
+ * Component for rendering an individual column filter item with drag-and-drop,
+ * toggle, and locking capabilities.
+ *
+ * @param {object} props - Props for the component.
+ * @param {string} props.name - The name of the column.
+ * @param {(toggled: boolean, event: ChangeEvent<HTMLInputElement>) => void} props.onToggle - Callback for when a column's toggled state changes.
+ * @param {boolean} props.toggled - Whether the column is toggled on or off.
+ * @param {boolean} props.disabled - Whether the toggle or drag functionality is disabled.
+ * @param {number} props.index - The index of the current column in the list.
+ * @param {(dragIndex: number, hoverIndex: number) => void} props.moveColumn - Function to move columns during drag-and-drop.
+ * @param {() => void} props.onDrop - Callback when a column is dropped.
+ * @param {() => void} props.onCancelDrop - Callback for canceling a drop action.
+ * @param {string} props.id - Unique identifier for the column.
+ * @param {boolean} [props.isSortDisabled] - Optional flag to disable sorting.
+ * @returns {JSX.Element} A React component rendering the column filter item.
+ */
+const ColumnFilterItem = ({ name, onToggle, toggled, disabled, index, moveColumn, onDrop, onCancelDrop, id, isSortDisabled, }) => {
+    const ref = react.useRef(null);
+    const [, drop] = reactDnd.useDrop({
+        accept: ItemTypes.COLUMN,
+        hover(item, monitor) {
+            if (!ref.current) {
+                return;
+            }
+            const dragIndex = item.index;
+            const hoverIndex = index;
+            if (dragIndex === hoverIndex) {
+                return;
+            }
+            const hoverBoundingRect = ref.current.getBoundingClientRect();
+            const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+            const clientOffset = monitor.getClientOffset();
+            const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+            if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+                return;
+            }
+            if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+                return;
+            }
+            moveColumn(dragIndex, hoverIndex);
+            item.index = hoverIndex;
+        },
+        drop(item, monitor) {
+            onDrop();
+        },
+    });
+    const [{ isDragging }, drag] = reactDnd.useDrag({
+        type: ItemTypes.COLUMN,
+        item: { type: ItemTypes.COLUMN, id, index },
+        canDrag: !isSortDisabled,
+        collect: (monitor) => ({
+            isDragging: monitor.isDragging(),
+        }),
+        end(draggedItem, monitor) {
+            if (!monitor.didDrop()) {
+                onCancelDrop();
+            }
+        },
+    });
+    const opacity = isDragging ? 0 : 1;
+    drag(drop(ref));
+    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: isSortDisabled }), 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 })] })] }));
+};
+
 /**
  * ColumnFilter component for managing visibility and order of table columns.
  *
@@ -294,7 +365,7 @@ const cvaColumnFilterGrabbable = cssClassVarianceUtilities.cvaMerge(["flex", "it
  * @param {ColumnFilterProps<TColumnFilter, TColumnFilterValue>} props - The props object containing necessary properties.
  * @returns {ReactElement | null} A React JSX element representing the ColumnFilter component or null if columns are not provided.
  */
-const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], columnOrder, onUserEvent, }) => {
+const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], columnOrder, onUserEvent, setColumnSize, }) => {
     const [t] = useTranslation();
     const initialSetupRef = react.useRef(false);
     const [searchText, setSearchText] = react.useState("");
@@ -304,11 +375,18 @@ const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], column
             initialSetupRef.current = true;
         }
     }, [columnOrder, defaultColumnOrder, setColumnOrder]);
-    const resetHiddenColumns = react.useCallback(() => {
-        columns.forEach(column => column.toggleVisibility(!column.columnDef.meta?.hiddenByDefault));
+    const resetColumnState = react.useCallback(() => {
+        const sizes = {};
+        columns.forEach(column => {
+            if (column.columnDef.size) {
+                sizes[column.id] = column.columnDef.size;
+            }
+            column.toggleVisibility(!column.columnDef.meta?.hiddenByDefault);
+            column.pin(column.columnDef.meta?.pinned ?? false);
+        });
         setColumnOrder(defaultColumnOrder);
-        columns.forEach(column => column.pin(column.columnDef.meta?.pinned ?? false));
-    }, [columns, defaultColumnOrder, setColumnOrder]);
+        setColumnSize(sizes);
+    }, [columns, defaultColumnOrder, setColumnOrder, setColumnSize]);
     const sortedColumns = react.useMemo(() => {
         let filteredColumns = columns;
         if (searchText.trim() !== "") {
@@ -325,7 +403,7 @@ const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], column
     const visibleColumnsCount = react.useMemo(() => {
         return columns.filter(col => col.getIsVisible()).length;
     }, [columns]);
-    return (jsxRuntime.jsx(reactDnd.DndProvider, { backend: reactDndHtml5Backend.HTML5Backend, children: jsxRuntime.jsx(reactComponents.Tooltip, { label: t("table.columnFilters.tooltip"), placement: "bottom", children: jsxRuntime.jsxs(reactComponents.Popover, { placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.Button, { prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "ViewColumns", size: "small" }), size: "small", variant: "secondary", children: jsxRuntime.jsx("span", { className: "hidden md:block", children: t("table.columnFilters.columns") }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: () => (jsxRuntime.jsxs(reactComponents.MenuList, { className: "relative max-h-[55vh] w-72 overflow-y-auto", children: [jsxRuntime.jsxs("div", { className: "mb-2 flex items-center gap-1", children: [jsxRuntime.jsx(reactFormComponents.Search, { autoFocus: true, className: "flex-1", fieldSize: "small", id: "column-search", onChange: e => setSearchText(e.currentTarget.value.toLowerCase()), onClear: () => setSearchText(""), placeholder: "Search", value: searchText }), jsxRuntime.jsx(reactComponents.Button, { onClick: resetHiddenColumns, size: "small", variant: "ghost-neutral", children: t("layout.actions.reset") })] }), jsxRuntime.jsx(ColumnFiltersDragAndDrop, { columns: sortedColumns, isSortDisabled: !!searchText, onUserEvent: onUserEvent, setColumnOrder: setColumnOrder, visibleColumnsCount: visibleColumnsCount })] })) })] }) }) }));
+    return (jsxRuntime.jsx(reactDnd.DndProvider, { backend: reactDndHtml5Backend.HTML5Backend, children: jsxRuntime.jsx(reactComponents.Tooltip, { label: t("table.columnFilters.tooltip"), placement: "bottom", children: jsxRuntime.jsxs(reactComponents.Popover, { placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.Button, { prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "ViewColumns", size: "small" }), size: "small", variant: "secondary", children: jsxRuntime.jsx("span", { className: "hidden md:block", children: t("table.columnFilters.columns") }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: () => (jsxRuntime.jsxs(reactComponents.MenuList, { className: "relative max-h-[55vh] w-72 overflow-y-auto", children: [jsxRuntime.jsxs("div", { className: "mb-2 flex items-center gap-1", children: [jsxRuntime.jsx(reactFormComponents.Search, { autoFocus: true, className: "flex-1", fieldSize: "small", id: "column-search", onChange: e => setSearchText(e.currentTarget.value.toLowerCase()), onClear: () => setSearchText(""), placeholder: "Search", value: searchText }), jsxRuntime.jsx(reactComponents.Button, { dataTestId: "resetColumnState", onClick: resetColumnState, size: "small", variant: "ghost-neutral", children: t("layout.actions.reset") })] }), jsxRuntime.jsx(ColumnFiltersDragAndDrop, { columns: sortedColumns, isSortDisabled: !!searchText, onUserEvent: onUserEvent, setColumnOrder: setColumnOrder, visibleColumnsCount: visibleColumnsCount })] })) })] }) }) }));
 };
 const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, isSortDisabled, visibleColumnsCount, }) => {
     const [localColumns, setLocalColumns] = react.useState(columns);
@@ -369,59 +447,6 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, isSort
                 }, toggled: isVisible }, column.id));
         }) }));
 };
-const ItemTypes = {
-    COLUMN: "column",
-};
-const ColumnFilterItem = ({ name, onToggle, toggled, disabled, index, moveColumn, onDrop, onCancelDrop, id, isSortDisabled, }) => {
-    const ref = react.useRef(null);
-    const [, drop] = reactDnd.useDrop({
-        accept: ItemTypes.COLUMN,
-        hover(item, monitor) {
-            if (!ref.current) {
-                return;
-            }
-            const dragIndex = item.index;
-            const hoverIndex = index;
-            if (dragIndex === hoverIndex) {
-                return;
-            }
-            const hoverBoundingRect = ref.current.getBoundingClientRect();
-            const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
-            const clientOffset = monitor.getClientOffset();
-            const hoverClientY = clientOffset.y - hoverBoundingRect.top;
-            if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
-                return;
-            }
-            if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
-                return;
-            }
-            moveColumn(dragIndex, hoverIndex);
-            item.index = hoverIndex;
-        },
-        drop(item, monitor) {
-            onDrop();
-        },
-    });
-    const [{ isDragging }, drag] = reactDnd.useDrag({
-        type: ItemTypes.COLUMN,
-        item: { type: ItemTypes.COLUMN, id, index },
-        canDrag: !isSortDisabled,
-        collect: (monitor) => ({
-            isDragging: monitor.isDragging(),
-        }),
-        end(draggedItem, monitor) {
-            if (!monitor.didDrop()) {
-                onCancelDrop();
-            }
-        },
-    });
-    const opacity = isDragging ? 0 : 1;
-    drag(drop(ref));
-    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: isSortDisabled }), 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 })] })] }));
-};
 
 /**
  * RowSpacing component for managing the density of table rows.

package/index.esm.js

@@ -1,13 +1,13 @@
 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, cvaInteractableItem, Text, IconButton, Card, Spinner, EmptyState } from '@trackunit/react-components';
+import { MenuItem, Icon, Button, useOverflowItems, MoreMenu, MenuList, Spacer, cvaInteractableItem, Text, Tooltip, Popover, PopoverTrigger, PopoverContent, IconButton, Card, Spinner, EmptyState } from '@trackunit/react-components';
 import { objectValues, nonNullable, objectKeys, objectEntries } from '@trackunit/shared-utils';
 import { useMemo, Children, cloneElement, useRef, useState, useEffect, useCallback, createElement } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { Link } from '@tanstack/react-router';
-import { Search, cvaLabel, ToggleSwitch, RadioGroup, RadioItem, Checkbox } from '@trackunit/react-form-components';
+import { cvaLabel, ToggleSwitch, Search, RadioGroup, RadioItem, Checkbox } from '@trackunit/react-form-components';
 import update from 'immutability-helper';
-import { DndProvider, useDrop, useDrag } from 'react-dnd';
+import { useDrop, useDrag, DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { flexRender, createColumnHelper, useReactTable, getSortedRowModel, getCoreRowModel } from '@tanstack/react-table';
 export { createColumnHelper } from '@tanstack/react-table';
@@ -285,6 +285,77 @@ const cvaColumnFilterGrabbable = cvaMerge(["flex", "items-center", "justify-cent
     },
 });
 
+const ItemTypes = {
+    COLUMN: "column",
+};
+/**
+ * Component for rendering an individual column filter item with drag-and-drop,
+ * toggle, and locking capabilities.
+ *
+ * @param {object} props - Props for the component.
+ * @param {string} props.name - The name of the column.
+ * @param {(toggled: boolean, event: ChangeEvent<HTMLInputElement>) => void} props.onToggle - Callback for when a column's toggled state changes.
+ * @param {boolean} props.toggled - Whether the column is toggled on or off.
+ * @param {boolean} props.disabled - Whether the toggle or drag functionality is disabled.
+ * @param {number} props.index - The index of the current column in the list.
+ * @param {(dragIndex: number, hoverIndex: number) => void} props.moveColumn - Function to move columns during drag-and-drop.
+ * @param {() => void} props.onDrop - Callback when a column is dropped.
+ * @param {() => void} props.onCancelDrop - Callback for canceling a drop action.
+ * @param {string} props.id - Unique identifier for the column.
+ * @param {boolean} [props.isSortDisabled] - Optional flag to disable sorting.
+ * @returns {JSX.Element} A React component rendering the column filter item.
+ */
+const ColumnFilterItem = ({ name, onToggle, toggled, disabled, index, moveColumn, onDrop, onCancelDrop, id, isSortDisabled, }) => {
+    const ref = useRef(null);
+    const [, drop] = useDrop({
+        accept: ItemTypes.COLUMN,
+        hover(item, monitor) {
+            if (!ref.current) {
+                return;
+            }
+            const dragIndex = item.index;
+            const hoverIndex = index;
+            if (dragIndex === hoverIndex) {
+                return;
+            }
+            const hoverBoundingRect = ref.current.getBoundingClientRect();
+            const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+            const clientOffset = monitor.getClientOffset();
+            const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+            if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+                return;
+            }
+            if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+                return;
+            }
+            moveColumn(dragIndex, hoverIndex);
+            item.index = hoverIndex;
+        },
+        drop(item, monitor) {
+            onDrop();
+        },
+    });
+    const [{ isDragging }, drag] = useDrag({
+        type: ItemTypes.COLUMN,
+        item: { type: ItemTypes.COLUMN, id, index },
+        canDrag: !isSortDisabled,
+        collect: (monitor) => ({
+            isDragging: monitor.isDragging(),
+        }),
+        end(draggedItem, monitor) {
+            if (!monitor.didDrop()) {
+                onCancelDrop();
+            }
+        },
+    });
+    const opacity = isDragging ? 0 : 1;
+    drag(drop(ref));
+    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: isSortDisabled }), 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 })] })] }));
+};
+
 /**
  * ColumnFilter component for managing visibility and order of table columns.
  *
@@ -293,7 +364,7 @@ const cvaColumnFilterGrabbable = cvaMerge(["flex", "items-center", "justify-cent
  * @param {ColumnFilterProps<TColumnFilter, TColumnFilterValue>} props - The props object containing necessary properties.
  * @returns {ReactElement | null} A React JSX element representing the ColumnFilter component or null if columns are not provided.
  */
-const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], columnOrder, onUserEvent, }) => {
+const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], columnOrder, onUserEvent, setColumnSize, }) => {
     const [t] = useTranslation();
     const initialSetupRef = useRef(false);
     const [searchText, setSearchText] = useState("");
@@ -303,11 +374,18 @@ const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], column
             initialSetupRef.current = true;
         }
     }, [columnOrder, defaultColumnOrder, setColumnOrder]);
-    const resetHiddenColumns = useCallback(() => {
-        columns.forEach(column => column.toggleVisibility(!column.columnDef.meta?.hiddenByDefault));
+    const resetColumnState = useCallback(() => {
+        const sizes = {};
+        columns.forEach(column => {
+            if (column.columnDef.size) {
+                sizes[column.id] = column.columnDef.size;
+            }
+            column.toggleVisibility(!column.columnDef.meta?.hiddenByDefault);
+            column.pin(column.columnDef.meta?.pinned ?? false);
+        });
         setColumnOrder(defaultColumnOrder);
-        columns.forEach(column => column.pin(column.columnDef.meta?.pinned ?? false));
-    }, [columns, defaultColumnOrder, setColumnOrder]);
+        setColumnSize(sizes);
+    }, [columns, defaultColumnOrder, setColumnOrder, setColumnSize]);
     const sortedColumns = useMemo(() => {
         let filteredColumns = columns;
         if (searchText.trim() !== "") {
@@ -324,7 +402,7 @@ const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], column
     const visibleColumnsCount = useMemo(() => {
         return columns.filter(col => col.getIsVisible()).length;
     }, [columns]);
-    return (jsx(DndProvider, { backend: HTML5Backend, children: jsx(Tooltip, { label: t("table.columnFilters.tooltip"), placement: "bottom", children: jsxs(Popover, { placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(Button, { prefix: jsx(Icon, { name: "ViewColumns", size: "small" }), size: "small", variant: "secondary", children: jsx("span", { className: "hidden md:block", children: t("table.columnFilters.columns") }) }) }), jsx(PopoverContent, { children: () => (jsxs(MenuList, { className: "relative max-h-[55vh] w-72 overflow-y-auto", children: [jsxs("div", { className: "mb-2 flex items-center gap-1", children: [jsx(Search, { autoFocus: true, className: "flex-1", fieldSize: "small", id: "column-search", onChange: e => setSearchText(e.currentTarget.value.toLowerCase()), onClear: () => setSearchText(""), placeholder: "Search", value: searchText }), jsx(Button, { onClick: resetHiddenColumns, size: "small", variant: "ghost-neutral", children: t("layout.actions.reset") })] }), jsx(ColumnFiltersDragAndDrop, { columns: sortedColumns, isSortDisabled: !!searchText, onUserEvent: onUserEvent, setColumnOrder: setColumnOrder, visibleColumnsCount: visibleColumnsCount })] })) })] }) }) }));
+    return (jsx(DndProvider, { backend: HTML5Backend, children: jsx(Tooltip, { label: t("table.columnFilters.tooltip"), placement: "bottom", children: jsxs(Popover, { placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(Button, { prefix: jsx(Icon, { name: "ViewColumns", size: "small" }), size: "small", variant: "secondary", children: jsx("span", { className: "hidden md:block", children: t("table.columnFilters.columns") }) }) }), jsx(PopoverContent, { children: () => (jsxs(MenuList, { className: "relative max-h-[55vh] w-72 overflow-y-auto", children: [jsxs("div", { className: "mb-2 flex items-center gap-1", children: [jsx(Search, { autoFocus: true, className: "flex-1", fieldSize: "small", id: "column-search", onChange: e => setSearchText(e.currentTarget.value.toLowerCase()), onClear: () => setSearchText(""), placeholder: "Search", value: searchText }), jsx(Button, { dataTestId: "resetColumnState", onClick: resetColumnState, size: "small", variant: "ghost-neutral", children: t("layout.actions.reset") })] }), jsx(ColumnFiltersDragAndDrop, { columns: sortedColumns, isSortDisabled: !!searchText, onUserEvent: onUserEvent, setColumnOrder: setColumnOrder, visibleColumnsCount: visibleColumnsCount })] })) })] }) }) }));
 };
 const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, isSortDisabled, visibleColumnsCount, }) => {
     const [localColumns, setLocalColumns] = useState(columns);
@@ -368,59 +446,6 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, isSort
                 }, toggled: isVisible }, column.id));
         }) }));
 };
-const ItemTypes = {
-    COLUMN: "column",
-};
-const ColumnFilterItem = ({ name, onToggle, toggled, disabled, index, moveColumn, onDrop, onCancelDrop, id, isSortDisabled, }) => {
-    const ref = useRef(null);
-    const [, drop] = useDrop({
-        accept: ItemTypes.COLUMN,
-        hover(item, monitor) {
-            if (!ref.current) {
-                return;
-            }
-            const dragIndex = item.index;
-            const hoverIndex = index;
-            if (dragIndex === hoverIndex) {
-                return;
-            }
-            const hoverBoundingRect = ref.current.getBoundingClientRect();
-            const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
-            const clientOffset = monitor.getClientOffset();
-            const hoverClientY = clientOffset.y - hoverBoundingRect.top;
-            if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
-                return;
-            }
-            if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
-                return;
-            }
-            moveColumn(dragIndex, hoverIndex);
-            item.index = hoverIndex;
-        },
-        drop(item, monitor) {
-            onDrop();
-        },
-    });
-    const [{ isDragging }, drag] = useDrag({
-        type: ItemTypes.COLUMN,
-        item: { type: ItemTypes.COLUMN, id, index },
-        canDrag: !isSortDisabled,
-        collect: (monitor) => ({
-            isDragging: monitor.isDragging(),
-        }),
-        end(draggedItem, monitor) {
-            if (!monitor.didDrop()) {
-                onCancelDrop();
-            }
-        },
-    });
-    const opacity = isDragging ? 0 : 1;
-    drag(drop(ref));
-    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: isSortDisabled }), 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 })] })] }));
-};
 
 /**
  * RowSpacing component for managing the density of table rows.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table",
-  "version": "1.3.163",
+  "version": "1.3.167",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -15,15 +15,16 @@
     "jest-fetch-mock": "^3.0.3",
     "@tanstack/react-router": "1.114.29",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/react-components": "1.4.132",
-    "@trackunit/shared-utils": "1.5.109",
-    "@trackunit/css-class-variance-utilities": "1.3.109",
-    "@trackunit/ui-icons": "1.3.111",
-    "@trackunit/react-table-base-components": "1.3.150",
-    "@trackunit/react-table-pagination": "1.3.110",
-    "@trackunit/react-form-components": "1.3.150",
-    "@trackunit/i18n-library-translation": "1.3.123",
-    "@trackunit/react-core-contexts-api": "1.4.115"
+    "@trackunit/react-components": "1.4.135",
+    "@trackunit/shared-utils": "1.5.112",
+    "@trackunit/css-class-variance-utilities": "1.3.112",
+    "@trackunit/ui-icons": "1.3.113",
+    "@trackunit/react-table-base-components": "1.3.153",
+    "@trackunit/react-table-pagination": "1.3.112",
+    "@trackunit/react-form-components": "1.3.153",
+    "@trackunit/i18n-library-translation": "1.3.126",
+    "@trackunit/react-core-contexts-api": "1.4.118",
+    "@trackunit/react-test-setup": "1.0.2"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/menus/ColumnFilter.d.ts

@@ -1,10 +1,11 @@
-import { Column, ColumnOrderState, Updater } from "@tanstack/react-table";
+import { Column, ColumnOrderState, ColumnSizingState, Updater } from "@tanstack/react-table";
 export interface ColumnFilterProps<TColumnFilter extends object, TColumnFilterValue> {
     columns: Column<TColumnFilter, TColumnFilterValue>[];
     defaultColumnOrder: ColumnOrderState;
     columnOrder?: ColumnOrderState;
     setColumnOrder: (updater: Updater<ColumnOrderState>) => void;
     onUserEvent?: (event: "Column Reordering" | "Column Filter", payload: Record<string, unknown>) => void;
+    setColumnSize: (updater: Updater<ColumnSizingState>) => void;
 }
 /**
  * ColumnFilter component for managing visibility and order of table columns.
@@ -14,7 +15,7 @@ export interface ColumnFilterProps<TColumnFilter extends object, TColumnFilterVa
  * @param {ColumnFilterProps<TColumnFilter, TColumnFilterValue>} props - The props object containing necessary properties.
  * @returns {ReactElement | null} A React JSX element representing the ColumnFilter component or null if columns are not provided.
  */
-export declare const ColumnFilter: <TColumnFilter extends object, TColumnFilterValue>({ columns, setColumnOrder, defaultColumnOrder, columnOrder, onUserEvent, }: ColumnFilterProps<TColumnFilter, TColumnFilterValue>) => import("react/jsx-runtime").JSX.Element;
+export declare const ColumnFilter: <TColumnFilter extends object, TColumnFilterValue>({ columns, setColumnOrder, defaultColumnOrder, columnOrder, onUserEvent, setColumnSize, }: ColumnFilterProps<TColumnFilter, TColumnFilterValue>) => import("react/jsx-runtime").JSX.Element;
 export interface ColumnFiltersDragAndDropProps<TColumnFiltersDragAndDrop extends object, TColumnFiltersDragAndDropValue> {
     columns: Column<TColumnFiltersDragAndDrop, TColumnFiltersDragAndDropValue>[];
     setColumnOrder: (updater: Updater<ColumnOrderState>) => void;

package/src/menus/ColumnFilterItem.d.ts

@@ -0,0 +1,32 @@
+import { ChangeEvent } from "react";
+interface ColumnFilterItemProps {
+    name: string;
+    onToggle: (toggled: boolean, event: ChangeEvent<HTMLInputElement>) => void;
+    toggled: boolean;
+    disabled: boolean;
+    onDrop: () => void;
+    onCancelDrop: () => void;
+    moveColumn: (dragIndex: number, hoverIndex: number) => void;
+    index: number;
+    id: string;
+    isSortDisabled?: boolean;
+}
+/**
+ * Component for rendering an individual column filter item with drag-and-drop,
+ * toggle, and locking capabilities.
+ *
+ * @param {object} props - Props for the component.
+ * @param {string} props.name - The name of the column.
+ * @param {(toggled: boolean, event: ChangeEvent<HTMLInputElement>) => void} props.onToggle - Callback for when a column's toggled state changes.
+ * @param {boolean} props.toggled - Whether the column is toggled on or off.
+ * @param {boolean} props.disabled - Whether the toggle or drag functionality is disabled.
+ * @param {number} props.index - The index of the current column in the list.
+ * @param {(dragIndex: number, hoverIndex: number) => void} props.moveColumn - Function to move columns during drag-and-drop.
+ * @param {() => void} props.onDrop - Callback when a column is dropped.
+ * @param {() => void} props.onCancelDrop - Callback for canceling a drop action.
+ * @param {string} props.id - Unique identifier for the column.
+ * @param {boolean} [props.isSortDisabled] - Optional flag to disable sorting.
+ * @returns {JSX.Element} A React component rendering the column filter item.
+ */
+export declare const ColumnFilterItem: ({ name, onToggle, toggled, disabled, index, moveColumn, onDrop, onCancelDrop, id, isSortDisabled, }: ColumnFilterItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};