torch-glare 2.5.6 → 2.6.0

package/apps/lib/hooks/useInfiniteScroll.ts

@@ -1,108 +0,0 @@
-"use client";
-
-import { useCallback, useEffect, useRef } from "react";
-
-/**
- * Ask for the next page when the user scrolls near the end.
- *
- * Lives here rather than in a view because three of them need it — the table, the board's columns
- * and the inbox list — and "near the end" has to mean the same thing in all three.
- *
- * It is an `IntersectionObserver` on a sentinel element, not a scroll listener. A scroll handler
- * has to be throttled, reads layout on every frame to work out how close the bottom is, and stops
- * being correct the moment the container resizes. The observer is told once and answers all three
- * for free.
- *
- * Like everything else here it only *asks*. Nothing loads until you hand back more rows.
- */
-export interface UseInfiniteScrollOptions {
-  /** Fetch the next page and append it. */
-  onLoadMore?: () => void;
-  /** Whether there is a next page at all. */
-  hasMore: boolean;
-  /** True while a page is in flight. */
-  loading?: boolean;
-  /**
-   * How far before the end to fire, in px. The default aims to have the next page arriving before
-   * the user reaches the gap, rather than after they have already stopped at it.
-   */
-  rootMargin?: number;
-}
-
-/**
- * The element the sentinel actually scrolls inside, or `null` for the viewport.
- *
- * Walks up looking at `overflow-y` rather than at class names, so it keeps working whatever a
- * view calls its container — the table, the board's columns and the inbox list all differ.
- */
-function scrollParentOf(el: HTMLElement): HTMLElement | null {
-  let node = el.parentElement;
-  while (node) {
-    const overflow = getComputedStyle(node).overflowY;
-    if (overflow === "auto" || overflow === "scroll") return node;
-    node = node.parentElement;
-  }
-  return null;
-}
-
-export function useInfiniteScroll({
-  onLoadMore,
-  hasMore,
-  loading = false,
-  rootMargin = 400,
-}: UseInfiniteScrollOptions) {
-  const sentinelRef = useRef<HTMLElement | null>(null);
-
-  /**
-   * The guard against asking twice for the same page.
-   *
-   * The observer fires on intersection, but the rows that answer it do not arrive for a round
-   * trip — and until they do, the sentinel is still on screen. Reading `loading` alone is not
-   * enough either: a caller that sets it a tick late leaves a window where a second fire gets
-   * through. So the hook latches when it asks, and only unlatches once the sentinel has actually
-   * left the viewport again.
-   */
-  const askedRef = useRef(false);
-
-  const ready = Boolean(onLoadMore) && hasMore && !loading;
-
-  const handle = useCallback(
-    (entries: IntersectionObserverEntry[]) => {
-      const visible = entries.some((e) => e.isIntersecting);
-      if (!visible) {
-        askedRef.current = false;
-        return;
-      }
-      if (askedRef.current || !ready) return;
-      askedRef.current = true;
-      onLoadMore?.();
-    },
-    [ready, onLoadMore],
-  );
-
-  useEffect(() => {
-    const el = sentinelRef.current;
-    if (!el || typeof IntersectionObserver === "undefined") return;
-
-    const observer = new IntersectionObserver(handle, {
-      // The scroller has to be named. `root: null` means the *viewport*, not the nearest
-      // scrollable ancestor — so inside a scrolling panel the sentinel is clipped away and
-      // `rootMargin` expands the wrong box, which reads as "infinite scroll simply never fires".
-      // Finding it here rather than asking for it keeps the call sites free of plumbing.
-      root: scrollParentOf(el),
-      rootMargin: `0px 0px ${rootMargin}px 0px`,
-    });
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [handle, rootMargin]);
-
-  // The latch is released by the sentinel leaving, and by nothing else.
-  //
-  // Releasing it when `loading` went false instead — which is the obvious thing to write — burns
-  // several pages on one flick to the bottom: the flag drops before the new rows have painted, so
-  // the sentinel is still on screen and the next observer callback asks again, and again. Tying
-  // the release to visibility makes one arrival at the end cost exactly one page, because the
-  // rows that arrive are what push the sentinel out of view.
-
-  return { sentinelRef };
-}

package/apps/lib/hooks/useIsMobile.ts

@@ -1,21 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-const MOBILE_BREAKPOINT = 768;
-
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    };
-    mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
-  }, []);
-
-  return !!isMobile;
-}

package/apps/lib/hooks/useResize.ts

@@ -1,67 +0,0 @@
-import { MutableRefObject, RefObject, useEffect, useState } from "react";
-import { calculateNewWidthFromMouse, calculateNewWidthFromTouch } from "../utils/resize";
-
-// Hook to handle resizing with RTL support
-export const useResize = (resizableRef: MutableRefObject<HTMLElement> | RefObject<HTMLElement>) => {
-  const [width, setWidth] = useState<number>();
-  const [isResizing, setIsResizing] = useState<boolean>(false);
-  const [isRTL, setIsRTL] = useState<boolean>(false);
-
-  // Start the resize process
-  const handleStartResize = () => {
-    setIsResizing(true);
-  };
-
-  // Stop the resize process
-  const handleStopResize = () => {
-    setIsResizing(false);
-  };
-
-  // Handle mouse move events
-  const handleMouseMove = (event: MouseEvent) => {
-    if (!isResizing) return;
-    const newWidth = calculateNewWidthFromMouse(event, resizableRef, isRTL);
-    setWidth(newWidth);
-  };
-
-  // Handle touch move events
-  const handleTouchMove = (event: TouchEvent) => {
-    if (!isResizing) return;
-    event.preventDefault(); // Prevent scrolling or other touch-related behaviors
-    const newWidth = calculateNewWidthFromTouch(event, resizableRef, isRTL);
-    setWidth(newWidth);
-  };
-
-  useEffect(() => {
-    let htmlDir = "";
-    if (document) {
-      htmlDir = document.documentElement.getAttribute("dir") || "ltr";
-    }
-    // Determine the direction of the document
-    setIsRTL(htmlDir === "rtl");
-  }, []);
-
-  useEffect(() => {
-    if (!resizableRef.current) return;
-
-    // Add event listeners for mouse and touch events
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleStopResize);
-    document.addEventListener("touchmove", handleTouchMove, { passive: false });
-    document.addEventListener("touchend", handleStopResize);
-
-    // Cleanup event listeners on unmount
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleStopResize);
-      document.removeEventListener("touchmove", handleTouchMove);
-      document.removeEventListener("touchend", handleStopResize);
-    };
-  }, [isResizing, isRTL]); // Depend on `isRtl` to handle direction changes dynamically
-
-  return {
-    width,
-    isResizing,
-    handleStartResize,
-  };
-};

package/apps/lib/hooks/useTagSelection.ts

@@ -1,300 +0,0 @@
-import { useState, useEffect, useRef } from "react";
-
-export interface Tag {
-  id: string;
-  name: string;
-  variant?: string;
-  value?: string;
-  isSelected: boolean;
-  [key: string]: unknown;
-}
-
-/** Stable key for a selection, used to tell an external change from one we just made. */
-const signatureOf = (tags: Tag[]) => tags.map((t) => t.id).join("\0");
-
-export const useTagSelection = ({
-  Tags,
-  onTagsChange,
-  inputRef,
-  singleSelect = false,
-  creatable = false,
-}: {
-  Tags: Tag[];
-  onTagsChange?: (selectedTags: Tag[]) => void;
-  inputRef?: React.RefObject<HTMLInputElement | null>;
-  singleSelect?: boolean;
-  /** Allow typed text to become a selected tag that was never in `Tags`. */
-  creatable?: boolean;
-}) => {
-  // Split initial tags into selected and unselected
-  const initialSelectedTags = Tags.filter((tag) => tag.isSelected);
-  const initialUnselectedTags = Tags.filter((tag) => !tag.isSelected);
-
-  // Initialize with available tags (excluding any initially selected ones)
-  const [tags, setTags] = useState<Tag[]>(initialUnselectedTags);
-
-  // Initialize with any pre-selected tags
-  const [selectedTagsStack, setSelectedTagsStack] = useState<Tag[]>(
-    singleSelect && initialSelectedTags.length > 0 ? [initialSelectedTags[0]] : initialSelectedTags,
-  );
-  const [searchTags, filterTagsBySearch] = useState("");
-  const [focusedTagIndex, setFocusedTagIndex] = useState<number | null>(null);
-  const [focusedPopoverIndex, setFocusedPopoverIndex] = useState<number | null>(null);
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-
-  // LOCAL PATCH (Contact Center): key both effects below off a SIGNATURE of `Tags`, not the array
-  // reference. A caller that builds its tag list inline — `MultiSelectField` does, from the form
-  // value — hands over a fresh array every render, so the upstream `[Tags]` dependency changed on
-  // every pass: effect → setTags → re-render → new array → effect, an infinite render loop.
-  const tagsSignature = Tags.map((tag) => `${tag.id}:${tag.isSelected ? 1 : 0}`).join(" ");
-
-  // Update internal state when Tags actually changes.
-  //
-  // Filter against the INCOMING selection as well as the one we hold: on an external sync (the
-  // hydration case below) `selectedTagsStack` is still the pre-sync value at this point, so
-  // filtering by it alone left the freshly selected values sitting in the dropdown as if they
-  // were still available to add.
-  useEffect(() => {
-    const selectedIds = new Set([
-      ...selectedTagsStack.map((tag) => tag.id),
-      ...Tags.filter((tag) => tag.isSelected).map((tag) => tag.id),
-    ]);
-    setTags(Tags.filter((tag) => !selectedIds.has(tag.id)));
-  }, [tagsSignature]);
-
-  // LOCAL PATCH (Contact Center): follow the incoming selection.
-  //
-  // Upstream seeded `selectedTagsStack` from `Tags` ONCE, and the effect above refreshed only the
-  // AVAILABLE list — never the selection. That made the component effectively uncontrolled: on an
-  // edit form, react-hook-form's `reset()` hydration lands after mount, so a person's saved emails
-  // and tags rendered as an empty field. Re-sync whenever the incoming selected set differs from
-  // what we hold, and mark the change as external so it isn't echoed straight back to the parent.
-  const incomingSelected = Tags.filter((tag) => tag.isSelected);
-  const incomingSignature = signatureOf(incomingSelected);
-  const lastSyncedRef = useRef<string | null>(null);
-  // Starts true so the mount pass below is swallowed — see the notify effect.
-  const skipNotifyRef = useRef(true);
-
-  useEffect(() => {
-    if (lastSyncedRef.current === incomingSignature) return;
-    lastSyncedRef.current = incomingSignature;
-    // Already matches (we made this change ourselves) — don't re-set state, so the notify flag
-    // stays untouched and the user's next real edit still reaches the parent.
-    if (signatureOf(selectedTagsStack) === incomingSignature) return;
-    skipNotifyRef.current = true;
-    setSelectedTagsStack(
-      singleSelect && incomingSelected.length > 0 ? [incomingSelected[0]] : incomingSelected,
-    );
-  }, [incomingSignature]);
-
-  // Notify parent component when tags change.
-  //
-  // LOCAL PATCH (Contact Center): upstream fired this on MOUNT too, so an untouched field wrote
-  // `[]` into the form — marking it dirty and adding an empty-array key to the request payload for
-  // a value nobody entered. It also fires for a sync from the parent, which would echo the value
-  // straight back. Both are skipped via the flag.
-  useEffect(() => {
-    if (skipNotifyRef.current) {
-      skipNotifyRef.current = false;
-      return;
-    }
-    onTagsChange?.(selectedTagsStack);
-  }, [selectedTagsStack]);
-
-  // Filter tags based on search input
-  const filteredTags = tags.filter((tag) =>
-    tag.name.toLowerCase().includes(searchTags.toLowerCase()),
-  );
-
-  // Filter selected tags based on search input
-  const filteredSelectedTags =
-    searchTags.length > 0
-      ? selectedTagsStack.filter((tag) => tag.name.toLowerCase().includes(searchTags.toLowerCase()))
-      : selectedTagsStack;
-
-  const handleSelectTag = (id: string) => {
-    const tagToSelect = tags.find((tag) => tag.id === id);
-    if (tagToSelect) {
-      // If in single select mode, replace the current selection
-      if (singleSelect) {
-        // Move any currently selected tag back to available tags
-        if (selectedTagsStack.length > 0) {
-          const currentSelected = selectedTagsStack[0];
-          setTags((prev) => [...prev, { ...currentSelected, isSelected: false }]);
-        }
-        setSelectedTagsStack([{ ...tagToSelect, isSelected: true }]);
-        setTags((prev) => prev.filter((tag) => tag.id !== id));
-      } else {
-        // Multi-select behavior (original)
-        setSelectedTagsStack((prev) => [...prev, { ...tagToSelect, isSelected: true }]);
-        setTags((prev) => prev.filter((tag) => tag.id !== id));
-      }
-    }
-    filterTagsBySearch("");
-    setFocusedPopoverIndex(null);
-  };
-
-  const handleUnselectTag = (id: string) => {
-    const tagToUnselect = selectedTagsStack.find((tag) => tag.id === id);
-    if (tagToUnselect) {
-      setSelectedTagsStack((prev) => prev.filter((tag) => tag.id !== id));
-      setTags((prev) => [...prev, { ...tagToUnselect, isSelected: false }]);
-    }
-    setFocusedTagIndex(null);
-  };
-
-  /**
-   * LOCAL PATCH (Contact Center): turn typed text into a selected tag.
-   *
-   * Upstream had no way in but `handleSelectTag(id)` against the fixed `Tags` list, so a free-text
-   * list (a person's emails, an organization's aliases) could not be expressed as a badge field at
-   * all — which is why those lists were built as one-column tables instead. Matching an existing
-   * tag by name selects it rather than creating a duplicate; the id IS the text, so a value the
-   * caller round-trips keeps a stable identity.
-   */
-  const handleCreateTag = (rawName: string) => {
-    const name = rawName.trim();
-    if (!name) return;
-    const sameName = (tag: Tag) => tag.name.toLowerCase() === name.toLowerCase();
-
-    // Already chosen — just clear the box so the user sees their text was accepted.
-    if (selectedTagsStack.some(sameName)) {
-      filterTagsBySearch("");
-      return;
-    }
-    // Offered in the list — select it instead of creating a look-alike.
-    const existing = tags.find(sameName);
-    if (existing) {
-      handleSelectTag(existing.id);
-      return;
-    }
-
-    const created: Tag = { id: name, name, value: name, isSelected: true };
-    setSelectedTagsStack((prev) => (singleSelect ? [created] : [...prev, created]));
-    filterTagsBySearch("");
-    setFocusedPopoverIndex(null);
-  };
-
-  // Reset the hook state with new data
-  const reset = (newTags: Tag[] = [], newSelectedTags: Tag[] = []) => {
-    // In single select mode, ensure we only have at most one selected tag
-    const selectedTags =
-      singleSelect && newSelectedTags.length > 0 ? [newSelectedTags[0]] : newSelectedTags;
-
-    setTags(newTags);
-    setSelectedTagsStack(selectedTags);
-    filterTagsBySearch("");
-    setFocusedTagIndex(null);
-    setFocusedPopoverIndex(null);
-  };
-
-  const handleNavigationWithinSelectedTags = (e: React.KeyboardEvent<HTMLElement>) => {
-    if (e.key === "ArrowLeft") {
-      e.preventDefault();
-      setFocusedTagIndex((prev: number | null) =>
-        prev === 0 ? selectedTagsStack.length - 1 : prev! - 1,
-      );
-    } else if (e.key === "ArrowRight") {
-      e.preventDefault();
-      setFocusedTagIndex((prev: number | null) =>
-        prev === selectedTagsStack.length - 1 ? 0 : prev! + 1,
-      );
-    } else if (e.key === "Delete" || e.key === "Backspace") {
-      e.preventDefault();
-      const tagToRemove = selectedTagsStack[focusedTagIndex!];
-      handleUnselectTag(tagToRemove.id);
-      if (selectedTagsStack.length > 1) {
-        setFocusedTagIndex(Math.min(focusedTagIndex!, selectedTagsStack.length - 2));
-      } else {
-        setFocusedTagIndex(null);
-      }
-    } else if (e.key === "Escape") {
-      e.preventDefault();
-      setFocusedTagIndex(null);
-    } else if (e.key === "ArrowDown") {
-      e.preventDefault();
-      setIsPopoverOpen(true);
-      setFocusedPopoverIndex(0);
-      setFocusedTagIndex(null);
-    } else {
-      inputRef?.current?.focus();
-    }
-  };
-
-  const handleNavigationWithinPopover = (e: React.KeyboardEvent<HTMLElement>) => {
-    if (e.key === "ArrowUp") {
-      e.preventDefault();
-      if (focusedPopoverIndex === 0 || focusedPopoverIndex === null) {
-        if (selectedTagsStack.length > 0) {
-          setIsPopoverOpen(false);
-          setFocusedTagIndex(0);
-          setFocusedPopoverIndex(null);
-        } else {
-          setFocusedPopoverIndex(filteredTags.length - 1);
-        }
-      } else {
-        setFocusedPopoverIndex((prev) => (prev === null ? 0 : prev - 1));
-      }
-    } else if (e.key === "ArrowDown") {
-      e.preventDefault();
-      setFocusedPopoverIndex((prev) =>
-        prev === null ? 0 : prev === filteredTags.length - 1 ? 0 : prev + 1,
-      );
-    } else if (e.key === "Enter" && focusedPopoverIndex !== null) {
-      e.preventDefault();
-      handleSelectTag(filteredTags[focusedPopoverIndex].id);
-    } else if (e.key === "Escape") {
-      e.preventDefault();
-      setIsPopoverOpen(false);
-      setFocusedPopoverIndex(null);
-    } else {
-      inputRef?.current?.focus();
-    }
-  };
-
-  const handleInitialFocus = (e: React.KeyboardEvent<HTMLElement>) => {
-    if ((e.key === "ArrowLeft" || e.key === "ArrowRight") && selectedTagsStack.length > 0) {
-      e.preventDefault();
-      setFocusedTagIndex(e.key === "ArrowLeft" ? selectedTagsStack.length - 1 : 0);
-    } else if (e.key === "ArrowDown" && !isPopoverOpen && filteredTags.length > 0) {
-      e.preventDefault();
-      setIsPopoverOpen(true);
-      setFocusedPopoverIndex(0);
-    } else {
-      inputRef?.current?.focus();
-    }
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
-    if (focusedTagIndex !== null && !isPopoverOpen) {
-      handleNavigationWithinSelectedTags(e);
-    } else if (isPopoverOpen && filteredTags.length > 0) {
-      handleNavigationWithinPopover(e);
-    } else {
-      handleInitialFocus(e);
-    }
-  };
-
-  return {
-    tags,
-    selectedTagsStack,
-    searchTags,
-    handleSelectTag,
-    handleUnselectTag,
-    // LOCAL PATCH (Contact Center) — see above.
-    handleCreateTag,
-    creatable,
-    handleKeyDown,
-    setFocusedTagIndex,
-    setFocusedPopoverIndex,
-    filterTagsBySearch,
-    filteredTags,
-    filteredSelectedTags,
-    focusedTagIndex,
-    focusedPopoverIndex,
-    isPopoverOpen,
-    setIsPopoverOpen,
-    reset,
-    singleSelect,
-  };
-};