refactor(web): remove cursor styling from interaction engine (#1886)

* chore(web): cleanup unused cursor styles

* refactor: extract cursor prop from adapter and overlay

* fix(tests): remove cursor props

Author: tyler-dane

packages/web/src/common/calendar-grid/components/CalendarTimedEventCard.tsx

@@ -41,7 +41,7 @@ import {
 } from "@web/components/Flex/Flex";
 import { Text } from "@web/components/Text/Text";
 
-export interface CalendarTimedEventCardProps {
+interface CalendarTimedEventCardProps {
   boxShadow?: CSSProperties["boxShadow"];
   displayMode: "draft" | "placeholder" | "saved";
   event: Schema_GridEvent;
@@ -121,14 +121,9 @@ const CalendarTimedEventCardBase = (
         : hoverColor
       : bgColor;
 
-  const hoverCursorClass =
-    !isPlaceholder && !isResizing
-      ? isDragging
-        ? "hover:cursor-move"
-        : isPending
-          ? "hover:cursor-wait"
-          : "hover:cursor-pointer"
-      : "";
+  const hoverCursorClass = isPending
+    ? "hover:cursor-wait"
+    : "hover:cursor-pointer";
 
   const eventStyle = {
     "--event-bg": bgColor,
@@ -168,6 +163,7 @@ const CalendarTimedEventCardBase = (
 
   const showResizeCursor =
     !isPlaceholder && !isResizing && !isDragging && !isPending;
+
   const scalerStyle = (
     placement: Pick<CSSProperties, "top" | "bottom">,
   ): CSSProperties => ({
@@ -200,7 +196,7 @@ const CalendarTimedEventCardBase = (
       role="button"
       tabIndex={0}
       className={cn(
-        "absolute min-h-2.5 select-none overflow-hidden rounded-xs pr-0.75 pl-1.25 transition-[background-color,filter] duration-[260ms] ease-[cubic-bezier(0.16,1,0.3,1)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-primary",
+        "absolute min-h-2.5 select-none overflow-hidden rounded-xs pr-0.75 pl-1.25 transition-[background-color,filter] duration-260 ease-[cubic-bezier(0.16,1,0.3,1)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-primary",
         isSelected
           ? "bg-event-selected shadow-[0_4px_10px_-4px_#00000080]"
           : "bg-(--event-bg) hover:bg-(--event-hover-bg)",

packages/web/src/common/calendar-grid/interaction/calendarInteractionDom.ts

@@ -1,4 +1,3 @@
-import { type CSSProperties } from "react";
 import { type FloatingInteractionOverlayMount } from "@web/common/calendar-interaction/CalendarInteractionAdapter";
 import { createInteractionClone } from "@web/common/calendar-interaction/dom/clone/createInteractionClone";
 import { type Schema_GridEvent } from "@web/common/types/web.event.types";
@@ -41,10 +40,8 @@ export const updateCalendarOverlayTimeLabel = (
 };
 
 export const createCalendarInteractionEventOverlayMount = ({
-  cursor,
   source,
 }: {
-  cursor?: CSSProperties["cursor"];
   source: HTMLElement;
 }): FloatingInteractionOverlayMount => {
   const rect = source.getBoundingClientRect();
@@ -61,7 +58,6 @@ export const createCalendarInteractionEventOverlayMount = ({
 
   return {
     clone,
-    cursor,
     rect: {
       height: rect.height,
       left: rect.left,

packages/web/src/common/calendar-interaction/CalendarInteractionEngine.test.ts

@@ -51,8 +51,6 @@ const createHarness = ({
   sourceOverlayMode?: SourceElementOverlayMode;
 } = {}) => {
   document.body.innerHTML = "";
-  document.body.style.cursor = "";
-  document.documentElement.style.cursor = "";
 
   let now = 100;
   let nextFrameId = 1;
@@ -93,7 +91,6 @@ const createHarness = ({
 
         return {
           clone,
-          cursor: "grabbing",
           rect: {
             height: 40,
             left: 10,
@@ -183,8 +180,6 @@ const createHarness = ({
 
 afterEach(() => {
   document.body.innerHTML = "";
-  document.body.style.cursor = "";
-  document.documentElement.style.cursor = "";
 });
 
 describe("CalendarInteractionEngine", () => {
@@ -321,7 +316,6 @@ describe("CalendarInteractionEngine", () => {
     expect(
       document.body.querySelector("[data-calendar-interaction-overlay]"),
     ).toBeNull();
-    expect(document.body.style.cursor).toBe("");
     expect(engine.getMetrics()).toMatchObject({
       active: false,
       phase: "commit",
@@ -394,7 +388,6 @@ describe("FloatingInteractionOverlay", () => {
 
     overlay.mount({
       clone,
-      cursor: "grabbing",
       rect: {
         height: 20,
         left: 10,
@@ -419,12 +412,10 @@ describe("FloatingInteractionOverlay", () => {
     expect(clone.style.height).toBe("24px");
     expect(clone.style.width).toBe("70px");
     expect(clone.style.zIndex).toBe(`${ZIndex.MAX}`);
-    expect(document.body.style.cursor).toBe("grabbing");
 
     overlay.unmount();
 
     expect(clone.parentElement).toBeNull();
-    expect(document.body.style.cursor).toBe("");
   });
 });
 

packages/web/src/common/calendar-interaction/dom/overlay/FloatingInteractionOverlay.ts

@@ -3,18 +3,12 @@ import { type CalendarInteractionPoint } from "../../CalendarInteractionSession"
 
 export class FloatingInteractionOverlay {
   #node: HTMLElement | null = null;
-  #previousCursor: {
-    body: string;
-    documentElement: string;
-  } | null = null;
 
   mount({
     clone,
-    cursor,
     rect,
   }: {
     clone: HTMLElement;
-    cursor?: string;
     rect: {
       height: number;
       left: number;
@@ -30,7 +24,6 @@ export class FloatingInteractionOverlay {
     clone.style.position = "fixed";
     clone.style.pointerEvents = "none";
     clone.style.top = `${rect.top}px`;
-    clone.style.cursor = cursor ?? "";
     clone.style.transition = "none";
     clone.style.transform = "translate3d(0px, 0px, 0)";
     clone.style.willChange = "transform";
@@ -39,15 +32,6 @@ export class FloatingInteractionOverlay {
 
     document.body.append(clone);
     this.#node = clone;
-
-    if (cursor) {
-      this.#previousCursor = {
-        body: document.body.style.cursor,
-        documentElement: document.documentElement.style.cursor,
-      };
-      document.body.style.cursor = cursor;
-      document.documentElement.style.cursor = cursor;
-    }
   }
 
   update({
@@ -82,13 +66,6 @@ export class FloatingInteractionOverlay {
   }
 
   unmount() {
-    if (this.#previousCursor) {
-      document.body.style.cursor = this.#previousCursor.body;
-      document.documentElement.style.cursor =
-        this.#previousCursor.documentElement;
-      this.#previousCursor = null;
-    }
-
     this.#node?.remove();
     this.#node = null;
   }

packages/web/src/common/utils/event/event.util.ts

@@ -217,24 +217,6 @@ export const isEventInRange = (
   return isStartDateInRange || isEndDateInRange;
 };
 
-export const getEventCursorStyle = (
-  isDragging: boolean,
-  isPending = false,
-): string => {
-  if (isDragging) return "move";
-  if (isPending) return "wait";
-  return "pointer";
-};
-
-export const getEventCursorClass = (
-  isDragging: boolean,
-  isPending = false,
-): string => {
-  if (isDragging) return "cursor-move";
-  if (isPending) return "cursor-wait";
-  return "cursor-pointer";
-};
-
 const _assembleBaseEvent = (
   userId: string,
   event: Partial<Schema_Event>,

packages/web/src/views/Day/interaction/adapter/DayInteractionAdapter.ts

@@ -310,9 +310,8 @@ export const createDayInteractionAdapter = ({
           startMinutes: getLocalMinutes(target.event.startDate),
         });
       },
-      getOverlayMount: ({ sourceElement, target }) =>
+      getOverlayMount: ({ sourceElement }) =>
         createCalendarInteractionEventOverlayMount({
-          cursor: getInteractionCursor(target),
           source: sourceElement,
         }),
       getSourceElement: (target) => target.registered.element,
@@ -798,18 +797,6 @@ const getOwnershipReason = (target: DayInteractionTarget) => {
   }
 };
 
-const getInteractionCursor = (target: DayInteractionTarget) => {
-  switch (target.type) {
-    case "allDayResize":
-      return "col-resize";
-    case "timedResize":
-      return "row-resize";
-    case "allDayDrag":
-    case "timedDrag":
-      return "move";
-  }
-};
-
 const readElementRect = (element: HTMLElement) => {
   const rect = element.getBoundingClientRect();
 

packages/web/src/views/Week/components/Draft/grid/hooks/useGridMouseMove.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from "react";
+import { useCallback } from "react";
 import { selectIsDrafting } from "@web/ducks/events/selectors/draft.selectors";
 import { useAppSelector } from "@web/store/store.hooks";
 import { useEventListener } from "@web/views/Week/hooks/mouse/useEventListener";
@@ -19,24 +19,11 @@ export const useGridMouseMove = () => {
         resize(e);
       } else if (isDragging) {
         e.preventDefault();
-        document.body.style.cursor = "move";
         drag(e);
       }
     },
     [drag, isDrafting, isDragging, isResizing, resize],
   );
 
-  const _onMouseUp = useCallback(() => {
-    document.body.style.cursor = "";
-  }, []);
-
   useEventListener("mousemove", _onMouseMove);
-  useEventListener("mouseup", _onMouseUp);
-
-  // Ensure cursor resets when the component unmounts
-  useEffect(() => {
-    return () => {
-      document.body.style.cursor = "";
-    };
-  }, []);
 };

packages/web/src/views/Week/interaction/adapter/WeekInteractionAdapter.ts

@@ -316,9 +316,8 @@ export const createWeekInteractionAdapter = ({
           target,
         });
       },
-      getOverlayMount: ({ sourceElement, target }) =>
+      getOverlayMount: ({ sourceElement }) =>
         createCalendarInteractionEventOverlayMount({
-          cursor: getInteractionCursor(target),
           source: sourceElement,
         }),
       getSourceElement: (target) => target.registered.element,
@@ -732,18 +731,6 @@ const getOwnershipReason = (target: WeekInteractionTarget) => {
   }
 };
 
-const getInteractionCursor = (target: WeekInteractionTarget) => {
-  switch (target.type) {
-    case "allDayResize":
-      return "col-resize";
-    case "timedResize":
-      return "row-resize";
-    case "allDayDrag":
-    case "timedDrag":
-      return "move";
-  }
-};
-
 const buildWeekLayoutCacheForTarget = (
   target: WeekInteractionTarget,
   sources: WeekLayoutCacheSources,

packages/web/src/views/Week/interaction/registry/weekEventRegistry.test.tsx

@@ -522,7 +522,6 @@ describe("createCalendarInteractionEventOverlayMount", () => {
     source.append(child);
 
     const mount = createCalendarInteractionEventOverlayMount({
-      cursor: "grabbing",
       source,
     });
     const clonedChild = mount.clone.querySelector("button");