@mendylanda/ui 0.2.0 → 0.3.0-alpha.0

package/dist/table/use-result-selection.js

@@ -0,0 +1,53 @@
+"use client";
+import { useState } from "react";
+export function useResultSelection({ scope, rowIds, totalCount, }) {
+    const [stored, setStored] = useState({
+        key: scope.key,
+        value: { mode: "ids", ids: [] },
+    });
+    if (stored.key !== scope.key) {
+        setStored({ key: scope.key, value: { mode: "ids", ids: [] } });
+    }
+    const selection = stored.key === scope.key ? stored.value : { mode: "ids", ids: [] };
+    const ids = new Set(selection.mode === "ids" ? selection.ids : selection.excludedIds);
+    const rowSelection = Object.fromEntries(rowIds
+        .filter((id) => (selection.mode === "ids" ? ids.has(id) : !ids.has(id)))
+        .map((id) => [id, true]));
+    function onRowSelectionChange(updater) {
+        setStored((previous) => {
+            const value = previous.key === scope.key ? previous.value : { mode: "ids", ids: [] };
+            const selected = new Set(value.mode === "ids" ? value.ids : value.excludedIds);
+            const current = Object.fromEntries(rowIds
+                .filter((id) => (value.mode === "ids" ? selected.has(id) : !selected.has(id)))
+                .map((id) => [id, true]));
+            const next = typeof updater === "function" ? updater(current) : updater;
+            for (const id of rowIds) {
+                if (value.mode === "ids" ? next[id] : !next[id])
+                    selected.add(id);
+                else
+                    selected.delete(id);
+            }
+            return {
+                key: scope.key,
+                value: value.mode === "ids"
+                    ? { mode: "ids", ids: [...selected] }
+                    : { ...value, excludedIds: [...selected] },
+            };
+        });
+    }
+    return {
+        selection,
+        rowSelection,
+        onRowSelectionChange,
+        count: selection.mode === "ids"
+            ? selection.ids.length
+            : totalCount == null
+                ? undefined
+                : Math.max(0, totalCount - selection.excludedIds.length),
+        clear: () => setStored({ key: scope.key, value: { mode: "ids", ids: [] } }),
+        selectAllMatching: () => setStored({
+            key: scope.key,
+            value: { mode: "matching", scope: scope.value, excludedIds: [] },
+        }),
+    };
+}

package/dist/table/use-table-interaction.d.ts

@@ -0,0 +1,15 @@
+import type { KeyboardEvent, RefObject } from "react";
+import type { DataTableInstance } from "./use-data-table.js";
+export declare function useTableInteraction<T extends object>({ table, pinningActive, container, queryKey, onRowActivate, onCopyError, scrollToIndex, }: {
+    table: DataTableInstance<T>;
+    pinningActive: boolean;
+    container: RefObject<HTMLDivElement | null>;
+    queryKey?: string;
+    onRowActivate?: (row: T) => void;
+    onCopyError?: (error: unknown) => void;
+    scrollToIndex: (index: number) => void;
+}): {
+    announcement: string;
+    copied: boolean;
+    onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
+};

package/dist/table/use-table-interaction.js

@@ -0,0 +1,125 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import { interactiveSelector, selectedCellsText } from "./clipboard.js";
+export function useTableInteraction({ table, pinningActive, container, queryKey, onRowActivate, onCopyError, scrollToIndex, }) {
+    const rows = table.getRowModel().rows;
+    const columns = [
+        ...table.getStartVisibleLeafColumns(),
+        ...table.getCenterVisibleLeafColumns(),
+        ...table.getEndVisibleLeafColumns(),
+    ];
+    const focused = table.getFocusedCell();
+    const [announcement, setAnnouncement] = useState("");
+    const [copied, setCopied] = useState(false);
+    const copyTimer = useRef(undefined);
+    const mounted = useRef(true);
+    useEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+            clearTimeout(copyTimer.current);
+        };
+    }, []);
+    const resetCellSelection = table.resetCellSelection;
+    useEffect(() => {
+        resetCellSelection(true);
+        if (container.current)
+            container.current.scrollTop = 0;
+    }, [queryKey, resetCellSelection, container]);
+    useEffect(() => {
+        const dismiss = (event) => {
+            if (container.current && !container.current.contains(event.target))
+                resetCellSelection(true);
+        };
+        document.addEventListener("pointerdown", dismiss);
+        return () => document.removeEventListener("pointerdown", dismiss);
+    }, [resetCellSelection, container]);
+    async function copySelection() {
+        try {
+            const text = selectedCellsText(table);
+            if (!text)
+                return;
+            await navigator.clipboard.writeText(text);
+            if (!mounted.current)
+                return;
+            setAnnouncement("Selected cells copied");
+            setCopied(true);
+            clearTimeout(copyTimer.current);
+            copyTimer.current = setTimeout(() => setCopied(false), 300);
+        }
+        catch (reason) {
+            if (mounted.current) {
+                setAnnouncement("Could not copy selected cells");
+                onCopyError?.(reason);
+            }
+        }
+    }
+    function focusCell(rowId, columnId) {
+        const index = rows.findIndex((row) => row.id === rowId);
+        if (index < 0)
+            return;
+        scrollToIndex(index);
+        requestAnimationFrame(() => {
+            const cell = container.current?.querySelector(`[data-row-id="${CSS.escape(rowId)}"][data-column-id="${CSS.escape(columnId)}"]`);
+            cell?.focus({ preventScroll: true });
+            if (cell && (!pinningActive || !table.getColumn(columnId)?.getIsPinned())) {
+                const box = cell.getBoundingClientRect(), viewport = container.current.getBoundingClientRect();
+                const startWidth = !pinningActive
+                    ? 0
+                    : table.getStartVisibleLeafColumns().reduce((sum, col) => sum + col.getSize(), 0);
+                const endWidth = !pinningActive
+                    ? 0
+                    : table.getEndVisibleLeafColumns().reduce((sum, col) => sum + col.getSize(), 0);
+                if (box.left < viewport.left + startWidth)
+                    container.current.scrollLeft += box.left - viewport.left - startWidth;
+                else if (box.right > viewport.right - endWidth)
+                    container.current.scrollLeft += box.right - viewport.right + endWidth;
+            }
+        });
+    }
+    const onKeyDown = (event) => {
+        if (event.target.closest(interactiveSelector))
+            return;
+        if ((event.ctrlKey || event.metaKey) &&
+            event.key.toLowerCase() === "c" &&
+            !window.getSelection()?.toString() &&
+            table.getSelectedCellCount()) {
+            event.preventDefault();
+            void copySelection();
+            return;
+        }
+        if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a") {
+            event.preventDefault();
+            table.selectAllCells();
+            return;
+        }
+        if (event.key === "Escape") {
+            table.resetCellSelection(true);
+            return;
+        }
+        const directions = {
+            ArrowUp: "up",
+            ArrowDown: "down",
+            ArrowLeft: "left",
+            ArrowRight: "right",
+        };
+        const direction = directions[event.key];
+        if (direction) {
+            event.preventDefault();
+            if (!table.getFocusedCell() && rows[0] && columns[0])
+                table.setFocusedCell(rows[0].id, columns[0].id);
+            else if (event.shiftKey)
+                table.extendCellSelection(direction);
+            else
+                table.moveCellSelection(direction);
+            const range = table.atoms.cellSelection.get().at(-1);
+            if (range)
+                focusCell(range.focusRowId, range.focusColumnId);
+        }
+        else if (event.key === "Enter" && focused && onRowActivate) {
+            event.preventDefault();
+            onRowActivate(focused.row.original);
+        }
+    };
+    return { announcement, copied, onKeyDown };
+}

package/dist/table/use-viewport-width.d.ts

@@ -0,0 +1,3 @@
+import type { RefObject } from "react";
+/** Vertical virtualization does not notify React when only the viewport width changes. */
+export declare function useViewportWidth(container: RefObject<HTMLElement | null>): number | null;

package/dist/table/use-viewport-width.js

@@ -0,0 +1,17 @@
+"use client";
+import { useLayoutEffect, useState } from "react";
+/** Vertical virtualization does not notify React when only the viewport width changes. */
+export function useViewportWidth(container) {
+    const [width, setWidth] = useState(null);
+    useLayoutEffect(() => {
+        const element = container.current;
+        if (!element)
+            return;
+        const measure = () => setWidth(element.clientWidth);
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [container]);
+    return width;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mendylanda/ui",
-  "version": "0.2.0",
-  "description": "Mendy Landa’s reusable React components. Typed filters with dynamic options, URL persistence, and customizable UI.",
+  "version": "0.3.0-alpha.0",
+  "description": "Mendy Landa\u2019s reusable React components. Typed filters and tables with shared interaction behavior and customizable UI.",
   "homepage": "https://ui.mendylanda.com",
   "license": "MIT",
   "author": "Mendy Landa",
@@ -61,16 +61,27 @@
     "./styles.tailwind3.css": {
       "types": "./dist/styles.css.d.ts",
       "default": "./dist/styles.tailwind3.css"
+    },
+    "./table": {
+      "types": "./dist/table/index.d.ts",
+      "import": "./dist/table/index.js",
+      "default": "./dist/table/index.js"
     }
   },
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && node scripts/build-css.mjs",
+    "typecheck": "tsc -p tsconfig.build.json --noEmit",
+    "prepack": "pnpm build"
+  },
   "dependencies": {
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-slot": "^1.2.3",
+    "@tanstack/react-table": "9.2.4",
     "@tanstack/react-virtual": "^3.14.11",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -99,9 +110,5 @@
     "nuqs": {
       "optional": true
     }
-  },
-  "scripts": {
-    "build": "tsc -p tsconfig.build.json && node scripts/build-css.mjs",
-    "typecheck": "tsc -p tsconfig.build.json --noEmit"
   }
-}
+}