@trackunit/react-table 1.3.252 → 1.3.255

package/index.cjs.js

@@ -448,32 +448,6 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, isSort
         }) }));
 };
 
-/**
- * RowSpacing component for managing the density of table rows.
- *
- * @param {RowDensityProps} props - The props object containing row density properties.
- * @returns {ReactElement} A React JSX element representing the RowSpacing component.
- */
-const RowSpacing = ({ density, setRowDensity, onUserEvent }) => {
-    const [t] = useTranslation();
-    const handleClick = (selectedDensity) => {
-        setRowDensity(selectedDensity);
-        onUserEvent?.("Row Spacing", {
-            densityChosen: selectedDensity,
-        });
-    };
-    return (jsxRuntime.jsx(reactComponents.Tooltip, { dataTestId: "row-spacing", label: t("table.spacing.toolip"), 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: "ArrowsPointingOut", size: "small" }), size: "small", variant: "secondary", children: jsxRuntime.jsx("span", { className: "hidden md:block", children: t("table.spacing") }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: jsxRuntime.jsx(reactComponents.MenuList, { children: jsxRuntime.jsxs("div", { className: "flex flex-col justify-start", children: [jsxRuntime.jsx(DensitySelection, { icon: jsxRuntime.jsx(CompactIcon, {}), isSelected: density === "compact", onClick: () => handleClick("compact"), text: t("table.rowDensity.compact") }), jsxRuntime.jsx(DensitySelection, { icon: jsxRuntime.jsx(SpaciousIcon, {}), isSelected: density === "spacious", onClick: () => handleClick("spacious"), text: t("table.rowDensity.spacious") })] }) }) })] }) }));
-};
-const DensitySelection = ({ text, onClick, icon, isSelected }) => {
-    return (jsxRuntime.jsxs("div", { className: "flex w-full cursor-pointer items-center p-1 hover:bg-neutral-50", onClick: onClick, children: [jsxRuntime.jsx("div", { className: "mr-1 flex", children: icon }), jsxRuntime.jsx(reactComponents.Text, { weight: "thick", children: text }), isSelected ? (jsxRuntime.jsx("div", { className: "justify-endgrow flex", children: jsxRuntime.jsx(reactComponents.Icon, { name: "Check", size: "small" }) })) : null] }));
-};
-const SpaciousIcon = () => {
-    return (jsxRuntime.jsx("svg", { height: 12, viewBox: "0 0 24 24", width: 12, xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M2.25 18.003h19.5M2.25 12.003h19.5M2.25 6.003h19.5", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2 }) }));
-};
-const CompactIcon = () => {
-    return (jsxRuntime.jsx("svg", { height: 12, viewBox: "0 0 24 24", width: 12, xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M2.25 18.003h19.5M2.25 12.003h19.5M2.25 6.003h19.5", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 4.5 }) }));
-};
-
 /**
  * Sorting component for managing table column sorting.
  *
@@ -972,7 +946,7 @@ const Table = ({ rowHeight = 50, ...props }) => {
             header.column.getToggleSortingHandler()?.(event);
         }
     }, [props]);
-    return (jsxRuntime.jsxs(reactComponents.Card, { className: tailwindMerge.twMerge("flex flex-col overflow-hidden", props.className), dataTestId: props.dataTestId, children: [props.headerLeftActions || props.headerRightActions ? (jsxRuntime.jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: props.headerLeftActions }), jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: props.headerRightActions })] })) : null, jsxRuntime.jsx("div", { className: "h-full overflow-x-auto overflow-y-scroll border-b border-t border-neutral-200", onScroll: e => fetchMoreOnBottomReached(e.target), ref: tableContainerRef, children: jsxRuntime.jsxs(reactTableBaseComponents.TableRoot, { style: {
+    return (jsxRuntime.jsxs(reactComponents.Card, { className: tailwindMerge.twMerge("table-compact flex flex-col overflow-hidden", props.className), dataTestId: props.dataTestId, children: [props.headerLeftActions || props.headerRightActions ? (jsxRuntime.jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: props.headerLeftActions }), jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: props.headerRightActions })] })) : null, jsxRuntime.jsx("div", { className: "h-full overflow-x-auto overflow-y-scroll border-b border-t border-neutral-200", onScroll: e => fetchMoreOnBottomReached(e.target), ref: tableContainerRef, children: jsxRuntime.jsxs(reactTableBaseComponents.TableRoot, { style: {
                         height: hasResults ? "auto" : "100%",
                         width: "100%",
                         position: "relative",
@@ -1433,7 +1407,6 @@ Object.defineProperty(exports, "createColumnHelper", {
 });
 exports.ActionSheet = ActionSheet;
 exports.ColumnFilter = ColumnFilter;
-exports.RowSpacing = RowSpacing;
 exports.Sorting = Sorting;
 exports.Table = Table;
 exports.fromTUSortToTanStack = fromTUSortToTanStack;

package/index.esm.js

@@ -447,32 +447,6 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, isSort
         }) }));
 };
 
-/**
- * RowSpacing component for managing the density of table rows.
- *
- * @param {RowDensityProps} props - The props object containing row density properties.
- * @returns {ReactElement} A React JSX element representing the RowSpacing component.
- */
-const RowSpacing = ({ density, setRowDensity, onUserEvent }) => {
-    const [t] = useTranslation();
-    const handleClick = (selectedDensity) => {
-        setRowDensity(selectedDensity);
-        onUserEvent?.("Row Spacing", {
-            densityChosen: selectedDensity,
-        });
-    };
-    return (jsx(Tooltip, { dataTestId: "row-spacing", label: t("table.spacing.toolip"), placement: "bottom", children: jsxs(Popover, { placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(Button, { prefix: jsx(Icon, { name: "ArrowsPointingOut", size: "small" }), size: "small", variant: "secondary", children: jsx("span", { className: "hidden md:block", children: t("table.spacing") }) }) }), jsx(PopoverContent, { children: jsx(MenuList, { children: jsxs("div", { className: "flex flex-col justify-start", children: [jsx(DensitySelection, { icon: jsx(CompactIcon, {}), isSelected: density === "compact", onClick: () => handleClick("compact"), text: t("table.rowDensity.compact") }), jsx(DensitySelection, { icon: jsx(SpaciousIcon, {}), isSelected: density === "spacious", onClick: () => handleClick("spacious"), text: t("table.rowDensity.spacious") })] }) }) })] }) }));
-};
-const DensitySelection = ({ text, onClick, icon, isSelected }) => {
-    return (jsxs("div", { className: "flex w-full cursor-pointer items-center p-1 hover:bg-neutral-50", onClick: onClick, children: [jsx("div", { className: "mr-1 flex", children: icon }), jsx(Text, { weight: "thick", children: text }), isSelected ? (jsx("div", { className: "justify-endgrow flex", children: jsx(Icon, { name: "Check", size: "small" }) })) : null] }));
-};
-const SpaciousIcon = () => {
-    return (jsx("svg", { height: 12, viewBox: "0 0 24 24", width: 12, xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M2.25 18.003h19.5M2.25 12.003h19.5M2.25 6.003h19.5", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2 }) }));
-};
-const CompactIcon = () => {
-    return (jsx("svg", { height: 12, viewBox: "0 0 24 24", width: 12, xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M2.25 18.003h19.5M2.25 12.003h19.5M2.25 6.003h19.5", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 4.5 }) }));
-};
-
 /**
  * Sorting component for managing table column sorting.
  *
@@ -971,7 +945,7 @@ const Table = ({ rowHeight = 50, ...props }) => {
             header.column.getToggleSortingHandler()?.(event);
         }
     }, [props]);
-    return (jsxs(Card, { className: twMerge("flex flex-col overflow-hidden", props.className), dataTestId: props.dataTestId, children: [props.headerLeftActions || props.headerRightActions ? (jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsx("div", { className: "flex items-center gap-2", children: props.headerLeftActions }), jsx("div", { className: "flex items-center gap-2", children: props.headerRightActions })] })) : null, jsx("div", { className: "h-full overflow-x-auto overflow-y-scroll border-b border-t border-neutral-200", onScroll: e => fetchMoreOnBottomReached(e.target), ref: tableContainerRef, children: jsxs(TableRoot, { style: {
+    return (jsxs(Card, { className: twMerge("table-compact flex flex-col overflow-hidden", props.className), dataTestId: props.dataTestId, children: [props.headerLeftActions || props.headerRightActions ? (jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsx("div", { className: "flex items-center gap-2", children: props.headerLeftActions }), jsx("div", { className: "flex items-center gap-2", children: props.headerRightActions })] })) : null, jsx("div", { className: "h-full overflow-x-auto overflow-y-scroll border-b border-t border-neutral-200", onScroll: e => fetchMoreOnBottomReached(e.target), ref: tableContainerRef, children: jsxs(TableRoot, { style: {
                         height: hasResults ? "auto" : "100%",
                         width: "100%",
                         position: "relative",
@@ -1426,4 +1400,4 @@ const fromTanStackToTUSort = (input) => {
  */
 setupLibraryTranslations();
 
-export { ActionSheet, ColumnFilter, RowSpacing, Sorting, Table, fromTUSortToTanStack, fromTanStackToTUSort, useColumnHelper, useTable, useTableSelection };
+export { ActionSheet, ColumnFilter, Sorting, Table, fromTUSortToTanStack, fromTanStackToTUSort, useColumnHelper, useTable, useTableSelection };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table",
-  "version": "1.3.252",
+  "version": "1.3.255",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -15,16 +15,16 @@
     "jest-fetch-mock": "^3.0.3",
     "@tanstack/react-router": "1.114.29",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/react-components": "1.4.198",
-    "@trackunit/shared-utils": "1.5.162",
-    "@trackunit/css-class-variance-utilities": "1.3.162",
-    "@trackunit/ui-icons": "1.3.163",
-    "@trackunit/react-table-base-components": "1.3.222",
-    "@trackunit/react-table-pagination": "1.3.162",
-    "@trackunit/react-form-components": "1.3.224",
-    "@trackunit/i18n-library-translation": "1.3.186",
-    "@trackunit/react-core-contexts-api": "1.4.170",
-    "@trackunit/react-test-setup": "1.0.52"
+    "@trackunit/react-components": "1.4.199",
+    "@trackunit/shared-utils": "1.5.163",
+    "@trackunit/css-class-variance-utilities": "1.3.163",
+    "@trackunit/ui-icons": "1.3.164",
+    "@trackunit/react-table-base-components": "1.3.223",
+    "@trackunit/react-table-pagination": "1.3.163",
+    "@trackunit/react-form-components": "1.3.225",
+    "@trackunit/i18n-library-translation": "1.3.187",
+    "@trackunit/react-core-contexts-api": "1.4.171",
+    "@trackunit/react-test-setup": "1.0.53"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/index.d.ts

@@ -1,7 +1,6 @@
 import { ColumnSort } from "@tanstack/react-table";
 export * from "./ActionSheet";
 export * from "./menus/ColumnFilter";
-export * from "./menus/RowSpacing";
 export * from "./menus/Sorting";
 export * from "./Table";
 export * from "./types";

package/src/menus/RowSpacing.d.ts

@@ -1,14 +0,0 @@
-export type Density = "spacious" | "compact";
-interface RowDensityProps {
-    density: Density;
-    setRowDensity: (density: Density) => void;
-    onUserEvent?: (event: "Row Spacing", payload: Record<string, unknown>) => void;
-}
-/**
- * RowSpacing component for managing the density of table rows.
- *
- * @param {RowDensityProps} props - The props object containing row density properties.
- * @returns {ReactElement} A React JSX element representing the RowSpacing component.
- */
-export declare const RowSpacing: ({ density, setRowDensity, onUserEvent }: RowDensityProps) => import("react/jsx-runtime").JSX.Element;
-export {};