@1771technologies/lytenyte-pro 0.0.40 → 0.0.41

package/dist/index.js

@@ -289,27 +289,24 @@ function useHeaderCells(api) {
 }
 function useResizeDivider(api, column) {
   const isResizable = api.columnIsResizable(column);
-  const timeOutRef = useRef(null);
-  const dragStarted = useRef(false);
+  const [active, setActive] = useState(false);
   const resizeProps = useMemo(() => {
     if (!isResizable) return {};
     const onPointerDown = (e) => {
-      e.preventDefault();
+      if (e.pointerType === "mouse" && e.button !== 0) return;
       const startWidth = api.columnVisualWidth(column);
       const isRtl = api.getState().rtl.peek();
       let startX = null;
       let anim = null;
       let delta = 0;
-      if (timeOutRef.current) clearTimeout(timeOutRef.current);
-      timeOutRef.current = setTimeout(() => {
-        dragStarted.current = true;
-        timeOutRef.current = null;
-      }, 100);
+      e.preventDefault();
+      e.stopPropagation();
+      document.body.classList.add("lng1771-column-resize-active");
+      setActive(true);
       const controller = new AbortController();
       document.addEventListener(
         "pointermove",
         (ev) => {
-          if (dragStarted.current === false) return;
           if (startX === null) {
             startX = getClientX(ev);
             return;
@@ -327,9 +324,9 @@ function useResizeDivider(api, column) {
       window.addEventListener(
         "pointerup",
         () => {
-          if (timeOutRef.current) clearTimeout(timeOutRef.current);
           if (anim) cancelAnimationFrame(anim);
-          dragStarted.current = false;
+          setActive(false);
+          document.body.classList.remove("lng1771-column-resize-active");
           const newWidth = startWidth + delta;
           api.columnResize(column, newWidth);
           api.getState().internal.columnWidthDeltas.set(null);
@@ -340,7 +337,7 @@ function useResizeDivider(api, column) {
     };
     return { onPointerDown };
   }, [api, column, isResizable]);
-  return resizeProps;
+  return { ...resizeProps, active };
 }
 function HeaderDivider({
   api,
@@ -358,7 +355,7 @@ function HeaderDivider({
   const isLastStart = startCount > 0 && columnIndex === startCount - 1;
   const isFirstEnd = endCount > 0 && startCount + centerCount === columnIndex;
   const isLast = startCount + centerCount + endCount - 1 === columnIndex;
-  const resizeProps = useResizeDivider(api, column);
+  const { onPointerDown, active: resizeActive } = useResizeDivider(api, column);
   const rtl = api.getState().rtl.use();
   const style = useMemo(() => {
     const isStart = column.pin === "start";
@@ -397,7 +394,8 @@ function HeaderDivider({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      ...resizeProps,
+      onPointerDown,
+      "data-resize-active": resizeActive,
       onDoubleClick: () => {
         const autosize = api.getState().autosizeDoubleClickHeader.peek();
         if (autosize) api.autosizeColumn(column, { includeHeader: true });

package/dist/lytenyte-pro.css

@@ -324,6 +324,14 @@ INPUT
   &:hover div {
     background-color: var(--lng1771-primary-50);
   }
+
+  &[data-resize-active="true"] {
+    background-color: var(--lng1771-primary-50);
+  }
+}
+
+.lng1771-column-resize-active {
+  cursor: col-resize;
 }
 .lng1771-header__group {
   grid-column-start: 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1771technologies/lytenyte-pro",
-  "version": "0.0.40",
+  "version": "0.0.41",
   "license": "COMMERCIAL",
   "type": "module",
   "files": [
@@ -70,20 +70,20 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@1771technologies/grid-client-data-source-pro": "0.0.40",
-    "@1771technologies/grid-core": "0.0.40",
-    "@1771technologies/grid-design": "0.0.40",
-    "@1771technologies/grid-provider": "0.0.40",
-    "@1771technologies/grid-store-pro": "0.0.40",
-    "@1771technologies/grid-tree-data-source": "0.0.40",
-    "@1771technologies/grid-types": "0.0.40",
-    "@1771technologies/js-utils": "0.0.40",
-    "@1771technologies/lytenyte-core": "0.0.40",
-    "@1771technologies/react-cascada": "0.0.40",
-    "@1771technologies/react-dragon": "0.0.40",
-    "@1771technologies/react-sizer": "0.0.40",
-    "@1771technologies/react-split-pane": "0.0.40",
-    "@1771technologies/react-utils": "0.0.40",
+    "@1771technologies/grid-client-data-source-pro": "0.0.41",
+    "@1771technologies/grid-core": "0.0.41",
+    "@1771technologies/grid-design": "0.0.41",
+    "@1771technologies/grid-provider": "0.0.41",
+    "@1771technologies/grid-store-pro": "0.0.41",
+    "@1771technologies/grid-tree-data-source": "0.0.41",
+    "@1771technologies/grid-types": "0.0.41",
+    "@1771technologies/js-utils": "0.0.41",
+    "@1771technologies/lytenyte-core": "0.0.41",
+    "@1771technologies/react-cascada": "0.0.41",
+    "@1771technologies/react-dragon": "0.0.41",
+    "@1771technologies/react-sizer": "0.0.41",
+    "@1771technologies/react-split-pane": "0.0.41",
+    "@1771technologies/react-utils": "0.0.41",
     "@base-ui-components/react": "1.0.0-alpha.7"
   },
   "devDependencies": {