@trackunit/react-table-base-components 0.0.8 → 0.0.9

package/index.cjs.js

@@ -71,20 +71,27 @@ const LinkCell = (_a) => {
  * @param {string} [props.className] - Additional CSS classes to apply to the handle.
  * @returns {ReactElement} A React element representing the resizable handle.
  */
-const ResizeHandel = (_a) => {
-    var { isResizing = false, dataTestId, className } = _a, rest = __rest(_a, ["isResizing", "dataTestId", "className"]);
-    return (jsxRuntime.jsx("div", Object.assign({ role: "separator", "data-testid": dataTestId, className: cvaResizeHandel({ isResizing, className }) }, rest)));
+const ResizeHandle = (_a) => {
+    var { isResizing = false, dataTestId, onMouseDown: onMouseDownHandler, className } = _a, rest = __rest(_a, ["isResizing", "dataTestId", "onMouseDown", "className"]);
+    const onMouseDown = (event) => {
+        const resizeCursorClass = "cursor-col-resize";
+        document.addEventListener("mouseup", () => {
+            document.body.classList.remove(resizeCursorClass);
+        });
+        document.body.classList.add(resizeCursorClass);
+        onMouseDownHandler === null || onMouseDownHandler === void 0 ? void 0 : onMouseDownHandler(event);
+    };
+    return (jsxRuntime.jsx("div", Object.assign({ role: "separator", "data-testid": dataTestId, className: cvaResizeHandel({ isResizing, className }), onMouseDown: event => onMouseDown(event) }, rest)));
 };
 const cvaResizeHandel = cssClassVarianceUtilities.cvaMerge([
     "absolute",
-    "!cursor-col-resize",
+    "cursor-col-resize",
     "right-0",
     "top-0",
     "h-full",
     "w-1",
     "select-none",
     "hover:bg-primary-400",
-    "cursor-pointer",
 ], {
     variants: {
         isResizing: {
@@ -291,7 +298,7 @@ const cvaTr = cssClassVarianceUtilities.cvaMerge(["border-b", "border-neutral-30
 
 exports.CheckboxCell = CheckboxCell;
 exports.LinkCell = LinkCell;
-exports.ResizeHandel = ResizeHandel;
+exports.ResizeHandle = ResizeHandle;
 exports.SortIndicator = SortIndicator;
 exports.TableRoot = TableRoot;
 exports.TagsCell = TagsCell;

package/index.esm.js

@@ -67,20 +67,27 @@ const LinkCell = (_a) => {
  * @param {string} [props.className] - Additional CSS classes to apply to the handle.
  * @returns {ReactElement} A React element representing the resizable handle.
  */
-const ResizeHandel = (_a) => {
-    var { isResizing = false, dataTestId, className } = _a, rest = __rest(_a, ["isResizing", "dataTestId", "className"]);
-    return (jsx("div", Object.assign({ role: "separator", "data-testid": dataTestId, className: cvaResizeHandel({ isResizing, className }) }, rest)));
+const ResizeHandle = (_a) => {
+    var { isResizing = false, dataTestId, onMouseDown: onMouseDownHandler, className } = _a, rest = __rest(_a, ["isResizing", "dataTestId", "onMouseDown", "className"]);
+    const onMouseDown = (event) => {
+        const resizeCursorClass = "cursor-col-resize";
+        document.addEventListener("mouseup", () => {
+            document.body.classList.remove(resizeCursorClass);
+        });
+        document.body.classList.add(resizeCursorClass);
+        onMouseDownHandler === null || onMouseDownHandler === void 0 ? void 0 : onMouseDownHandler(event);
+    };
+    return (jsx("div", Object.assign({ role: "separator", "data-testid": dataTestId, className: cvaResizeHandel({ isResizing, className }), onMouseDown: event => onMouseDown(event) }, rest)));
 };
 const cvaResizeHandel = cvaMerge([
     "absolute",
-    "!cursor-col-resize",
+    "cursor-col-resize",
     "right-0",
     "top-0",
     "h-full",
     "w-1",
     "select-none",
     "hover:bg-primary-400",
-    "cursor-pointer",
 ], {
     variants: {
         isResizing: {
@@ -285,4 +292,4 @@ const cvaTr = cvaMerge(["border-b", "border-neutral-300", "w-full", "h-max"], {
     },
 });
 
-export { CheckboxCell, LinkCell, ResizeHandel, SortIndicator, TableRoot, TagsCell, Tbody, Td, Tfoot, Th, Thead, Tr };
+export { CheckboxCell, LinkCell, ResizeHandle, SortIndicator, TableRoot, TagsCell, Tbody, Td, Tfoot, Th, Thead, Tr };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table-base-components",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,7 +9,7 @@
   "dependencies": {
     "@trackunit/css-class-variance-utilities": "0.0.13",
     "@trackunit/react-components": "0.1.155",
-    "@trackunit/react-form-components": "0.0.137",
+    "@trackunit/react-form-components": "0.0.138",
     "react": "18.2.0"
   },
   "module": "./index.esm.js",

package/src/components/{ResizeHandel.d.ts → ResizeHandle.d.ts}

@@ -1,5 +1,5 @@
 import { CommonProps } from "@trackunit/react-components";
-import { ReactElement } from "react";
+import React, { ReactElement } from "react";
 export interface ResizeHandelProps extends CommonProps, React.HTMLAttributes<HTMLDivElement> {
     isResizing?: boolean;
 }
@@ -12,4 +12,4 @@ export interface ResizeHandelProps extends CommonProps, React.HTMLAttributes<HTM
  * @param {string} [props.className] - Additional CSS classes to apply to the handle.
  * @returns {ReactElement} A React element representing the resizable handle.
  */
-export declare const ResizeHandel: ({ isResizing, dataTestId, className, ...rest }: ResizeHandelProps) => ReactElement;
+export declare const ResizeHandle: ({ isResizing, dataTestId, onMouseDown: onMouseDownHandler, className, ...rest }: ResizeHandelProps) => ReactElement;

package/src/index.d.ts

@@ -1,6 +1,6 @@
 export * from "./components/CheckboxCell/CheckboxCell";
 export * from "./components/LinkCell/LinkCell";
-export * from "./components/ResizeHandel";
+export * from "./components/ResizeHandle";
 export * from "./components/SortIndicator";
 export * from "./components/TableRoot";
 export * from "./components/TagsCell/TagsCell";