@1771technologies/lytenyte-pro 1.0.0-beta.33 → 1.0.0-beta.36

package/dist/header/resize-handler.js

@@ -1,133 +1,142 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useSlot } from "@1771technologies/lytenyte-react-hooks";
 import {} from "react";
-import { DEFAULT_COLUMN_WIDTH_MAX, DEFAULT_COLUMN_WIDTH_MIN, getColIndexFromEl, getTranslate, sizeFromCoord, } from "@1771technologies/lytenyte-shared";
+import {
+  DEFAULT_COLUMN_WIDTH_MAX,
+  DEFAULT_COLUMN_WIDTH_MIN,
+  getColIndexFromEl,
+  getTranslate,
+  sizeFromCoord,
+} from "@1771technologies/lytenyte-shared";
 import { useGridRoot } from "../context";
 import { getComputedStyle, isHTMLElement } from "@1771technologies/lytenyte-dom-utils";
 import { clamp, getClientX } from "@1771technologies/lytenyte-js-utils";
-export function ResizeHandler({ as, cell, xPositions, style, className, }) {
-    const width = sizeFromCoord(cell.colStart, xPositions, cell.colSpan);
-    const sx = useGridRoot().grid;
-    const double = sx.state.columnDoubleClickToAutosize.useValue();
-    const defaultProps = {
-        role: "button",
-        "data-ln-header-resizer": "true",
-        "aria-label": `Resize ${cell.column.name ?? cell.column.id}`,
-        tabIndex: -1,
-        onDoubleClick: () => {
-            if (!double)
-                return;
-            sx.api.columnAutosize({
-                columns: [cell.column],
-                includeHeader: true,
+export function ResizeHandler({ as, cell, xPositions, style, className }) {
+  const width = sizeFromCoord(cell.colStart, xPositions, cell.colSpan);
+  const sx = useGridRoot().grid;
+  const double = sx.state.columnDoubleClickToAutosize.useValue();
+  const defaultProps = {
+    role: "button",
+    "data-ln-header-resizer": "true",
+    "aria-label": `Resize ${cell.column.name ?? cell.column.id}`,
+    tabIndex: -1,
+    onDoubleClick: () => {
+      if (!double) return;
+      sx.api.columnAutosize({
+        columns: [cell.column],
+        includeHeader: true,
+      });
+    },
+    onPointerDown: (ev) => {
+      const vp = sx.state.viewport.get();
+      if (!vp) return;
+      if (ev.pointerType === "mouse" && ev.button !== 0) return;
+      ev.preventDefault();
+      ev.stopPropagation();
+      const isRtl = sx.state.rtl.get();
+      let startX = null;
+      let anim = null;
+      const style = getComputedStyle(vp);
+      const overflow = style.overflowX;
+      vp.style.overflowX = "hidden";
+      const base = sx.state.columnBase.get();
+      const minWidth = cell.column.widthMin ?? base.widthMin ?? DEFAULT_COLUMN_WIDTH_MIN;
+      const maxWidth = cell.column.widthMax ?? base.widthMax ?? DEFAULT_COLUMN_WIDTH_MAX;
+      const maxDelta = maxWidth - width;
+      const minDelta = minWidth - width;
+      const deltaRef = { current: 0 };
+      const controller = new AbortController();
+      document.addEventListener(
+        "pointermove",
+        (ev) => {
+          if (startX === null) {
+            startX = getClientX(ev);
+            return;
+          }
+          const endAdjust = cell.colPin === "end" ? -1 : 1;
+          const rtlAdjust = isRtl ? -1 : 1;
+          deltaRef.current = clamp(
+            minDelta,
+            (getClientX(ev) - startX) * endAdjust * rtlAdjust,
+            maxDelta,
+          );
+          if (anim) return;
+          anim = requestAnimationFrame(() => {
+            const id = sx.state.gridId.get();
+            const query = `[data-ln-row][data-ln-gridid="${id}"] [data-ln-cell="true"][data-ln-colindex="${cell.colStart}"]`;
+            const headerQuery = `[data-ln-header-row] [data-ln-header-cell="true"][data-ln-header-id="${cell.id}"]`;
+            const floatingQuery = `[data-ln-header-row] [data-ln-header-cell="true"][data-ln-header-id="${cell.id}"][data-ln-header-floating="true"]`;
+            const header = vp.querySelector(headerQuery);
+            const floating = vp.querySelector(floatingQuery);
+            if (!header) return;
+            const pin = header.getAttribute("data-ln-pin");
+            const queryAfter = `${query} ~ [data-ln-cell="true"]`;
+            const headerAfterQuery = `${headerQuery} ~ [data-ln-header-cell="true"]`;
+            let after;
+            if (pin !== "end") {
+              after = Array.from(vp.querySelectorAll(queryAfter)).concat(
+                Array.from(vp.querySelectorAll(headerAfterQuery)),
+              );
+            } else {
+              after = [];
+            }
+            const q = Array.from(vp.querySelectorAll(query));
+            q.push(header);
+            if (floating) q.push(floating);
+            q.forEach((c) => {
+              if (!isHTMLElement(c)) return;
+              c.style.removeProperty("min-width");
+              c.style.removeProperty("max-width");
+              c.style.width = `${width + deltaRef.current}px`;
+              if (pin === "end") {
+                const viewportWidth = sx.state.viewportWidthInner.get();
+                const spaceLeft = xPositions.at(-1) - xPositions[cell.colStart];
+                const x = viewportWidth - spaceLeft - deltaRef.current;
+                c.style.transform = getTranslate(isRtl ? -x : x, 0);
+              }
             });
-        },
-        onPointerDown: (ev) => {
-            const vp = sx.state.viewport.get();
-            if (!vp)
+            after.forEach((c) => {
+              if (!isHTMLElement(c)) return;
+              const thisPin = c.getAttribute("data-ln-pin");
+              if (pin === "end" && thisPin === "end") {
                 return;
-            if (ev.pointerType === "mouse" && ev.button !== 0)
-                return;
-            ev.preventDefault();
-            ev.stopPropagation();
-            const isRtl = sx.state.rtl.get();
-            let startX = null;
-            let anim = null;
-            const style = getComputedStyle(vp);
-            const overflow = style.overflowX;
-            vp.style.overflowX = "hidden";
-            const base = sx.state.columnBase.get();
-            const minWidth = cell.column.widthMin ?? base.widthMin ?? DEFAULT_COLUMN_WIDTH_MIN;
-            const maxWidth = cell.column.widthMax ?? base.widthMax ?? DEFAULT_COLUMN_WIDTH_MAX;
-            const maxDelta = maxWidth - width;
-            const minDelta = minWidth - width;
-            const deltaRef = { current: 0 };
-            const controller = new AbortController();
-            document.addEventListener("pointermove", (ev) => {
-                if (startX === null) {
-                    startX = getClientX(ev);
-                    return;
-                }
-                const endAdjust = cell.colPin === "end" ? -1 : 1;
-                const rtlAdjust = isRtl ? -1 : 1;
-                deltaRef.current = clamp(minDelta, (getClientX(ev) - startX) * endAdjust * rtlAdjust, maxDelta);
-                if (anim)
-                    return;
-                anim = requestAnimationFrame(() => {
-                    const id = sx.state.gridId.get();
-                    const query = `[data-ln-row][data-ln-gridid="${id}"] [data-ln-cell="true"][data-ln-colindex="${cell.colStart}"]`;
-                    const headerQuery = `[data-ln-header-row] [data-ln-header-cell="true"][data-ln-header-id="${cell.id}"]`;
-                    const floatingQuery = `[data-ln-header-row] [data-ln-header-cell="true"][data-ln-header-id="${cell.id}"][data-ln-header-floating="true"]`;
-                    const header = vp.querySelector(headerQuery);
-                    const floating = vp.querySelector(floatingQuery);
-                    if (!header)
-                        return;
-                    const pin = header.getAttribute("data-ln-pin");
-                    const queryAfter = `${query} ~ [data-ln-cell="true"]`;
-                    const headerAfterQuery = `${headerQuery} ~ [data-ln-header-cell="true"]`;
-                    let after;
-                    if (pin !== "end") {
-                        after = Array.from(vp.querySelectorAll(queryAfter)).concat(Array.from(vp.querySelectorAll(headerAfterQuery)));
-                    }
-                    else {
-                        after = [];
-                    }
-                    const q = Array.from(vp.querySelectorAll(query));
-                    q.push(header);
-                    if (floating)
-                        q.push(floating);
-                    q.forEach((c) => {
-                        if (!isHTMLElement(c))
-                            return;
-                        c.style.removeProperty("min-width");
-                        c.style.removeProperty("max-width");
-                        c.style.width = `${width + deltaRef.current}px`;
-                        if (pin === "end") {
-                            const viewportWidth = sx.state.viewportWidthInner.get();
-                            const spaceLeft = xPositions.at(-1) - xPositions[cell.colStart];
-                            const x = viewportWidth - spaceLeft - deltaRef.current;
-                            c.style.transform = getTranslate(isRtl ? -x : x, 0);
-                        }
-                    });
-                    after.forEach((c) => {
-                        if (!isHTMLElement(c))
-                            return;
-                        const thisPin = c.getAttribute("data-ln-pin");
-                        if (pin === "end" && thisPin === "end") {
-                            return;
-                        }
-                        if (pin !== "end" && thisPin === "end")
-                            return;
-                        const colindex = getColIndexFromEl(c);
-                        const transform = xPositions[colindex] + deltaRef.current;
-                        c.style.transform = getTranslate(transform * (isRtl ? -1 : 1), 0);
-                    });
-                    anim = null;
-                });
-            }, { signal: controller.signal });
-            window.addEventListener("pointerup", () => {
-                if (anim)
-                    cancelAnimationFrame(anim);
-                controller.abort();
-                vp.style.overflowX = overflow;
-                const newWidth = width + deltaRef.current;
-                sx.api.columnResize({ [cell.id]: newWidth });
-            }, { signal: controller.signal });
+              }
+              if (pin !== "end" && thisPin === "end") return;
+              const colindex = getColIndexFromEl(c);
+              const transform = xPositions[colindex] + deltaRef.current;
+              c.style.transform = getTranslate(transform * (isRtl ? -1 : 1), 0);
+            });
+            anim = null;
+          });
         },
-        className,
-        style: {
-            height: "100%",
-            width: "6px",
-            ...style,
-            top: "0px",
-            insetInlineEnd: cell.colPin !== "end" ? "0px" : undefined,
-            insetInlineStart: cell.colPin === "end" ? "0px" : undefined,
-            position: "absolute",
+        { signal: controller.signal },
+      );
+      window.addEventListener(
+        "pointerup",
+        () => {
+          if (anim) cancelAnimationFrame(anim);
+          controller.abort();
+          vp.style.overflowX = overflow;
+          const newWidth = width + deltaRef.current;
+          sx.api.columnResize({ [cell.id]: newWidth });
         },
-    };
-    const edge = useSlot({
-        props: [defaultProps],
-        slot: as ?? _jsx("div", {}),
-    });
-    return edge;
+        { signal: controller.signal },
+      );
+    },
+    className,
+    style: {
+      height: "100%",
+      width: "6px",
+      ...style,
+      top: "0px",
+      insetInlineEnd: cell.colPin !== "end" ? "0px" : undefined,
+      insetInlineStart: cell.colPin === "end" ? "0px" : undefined,
+      position: "absolute",
+    },
+  };
+  const edge = useSlot({
+    props: [defaultProps],
+    slot: as ?? _jsx("div", {}),
+  });
+  return edge;
 }

package/dist/header/use-drag-move.d.ts

@@ -1,14 +1,25 @@
-import type { Grid, HeaderCellFloating, HeaderCellLayout, HeaderGroupCellLayout } from "../+types.js";
+import type {
+  Grid,
+  HeaderCellFloating,
+  HeaderCellLayout,
+  HeaderGroupCellLayout,
+} from "../+types.js";
 import { type JSX } from "react";
 import type { InternalAtoms } from "../state/+types.js";
-export declare function useDragMove<T>(grid: Grid<T> & {
+export declare function useDragMove<T>(
+  grid: Grid<T> & {
     internal: InternalAtoms;
-}, cell: HeaderGroupCellLayout | HeaderCellLayout<T> | HeaderCellFloating<T>, onDragStart?: JSX.IntrinsicElements["div"]["onDragStart"]): {
-    draggable?: undefined;
-    onDragStart?: undefined;
-    ref?: undefined;
-} | {
-    draggable: true;
-    onDragStart: (e: import("react").DragEvent<Element>) => void;
-    ref: any;
-};
+  },
+  cell: HeaderGroupCellLayout | HeaderCellLayout<T> | HeaderCellFloating<T>,
+  onDragStart?: JSX.IntrinsicElements["div"]["onDragStart"],
+):
+  | {
+      draggable?: undefined;
+      onDragStart?: undefined;
+      ref?: undefined;
+    }
+  | {
+      draggable: true;
+      onDragStart: (e: import("react").DragEvent<Element>) => void;
+      ref: any;
+    };

package/dist/header/use-drag-move.js

@@ -1,97 +1,98 @@
-import { COLUMN_MARKER_ID, getHoveredColumnIndex, getNearestFocusable, GROUP_COLUMN_PREFIX, useDraggable, } from "@1771technologies/lytenyte-shared";
+import {
+  COLUMN_MARKER_ID,
+  getHoveredColumnIndex,
+  getNearestFocusable,
+  GROUP_COLUMN_PREFIX,
+  useDraggable,
+} from "@1771technologies/lytenyte-shared";
 import { useMemo, useRef } from "react";
 export function useDragMove(grid, cell, onDragStart) {
-    const ctx = grid.state;
-    const meta = ctx.columnMeta.useValue();
-    const base = ctx.columnBase.useValue();
-    const columns = useMemo(() => {
-        const columns = [];
-        for (let i = cell.colStart; i < cell.colEnd; i++) {
-            columns.push(meta.columnsVisible[i]);
-        }
-        return columns;
-    }, [cell.colEnd, cell.colStart, meta.columnsVisible]);
-    const isMovable = useMemo(() => {
-        return columns.every((c) => !c.id.startsWith(GROUP_COLUMN_PREFIX) &&
-            c.id !== COLUMN_MARKER_ID &&
-            (c.uiHints?.movable ?? base.uiHints?.movable ?? false));
-    }, [base.uiHints?.movable, columns]);
-    const swapDirection = useRef(null);
-    const swapIndex = useRef(-1);
-    const swapPrevIndex = useRef(-1);
-    const isForward = useRef(false);
-    const prevPos = useRef(-1);
-    const { dragProps } = useDraggable({
-        getItems: () => ({}),
-        onDragStart: () => {
-            if (cell.kind === "group")
-                grid.internal.draggingHeader.set(cell);
-        },
-        onDragEnd: () => {
-            grid.internal.draggingHeader.set(null);
-        },
-        onDragMove: (p) => {
-            const element = document.elementFromPoint(p.position.x, p.position.y);
-            const vp = grid.state.viewport.get();
-            if (!vp?.contains(element))
-                return;
-            const nearest = getNearestFocusable(element);
-            if (!nearest)
-                return;
-            if (prevPos.current < p.position.x)
-                isForward.current = true;
-            if (prevPos.current > p.position.x)
-                isForward.current = false;
-            prevPos.current = p.position.x;
-            const meta = grid.state.columnMeta.get();
-            const index = getHoveredColumnIndex({
-                viewport: vp,
-                centerCount: meta.columnVisibleCenterCount,
-                startCount: meta.columnVisibleStartCount,
-                endCount: meta.columnVisibleEndCount,
-                clientX: p.position.x,
-                rtl: grid.state.rtl.get(),
-                xPositions: grid.state.xPositions.get(),
-            });
-            if (index == null)
-                return;
-            const columnTarget = grid.api.columnByIndex(index);
-            if (columnTarget) {
-                if (columnTarget.id === COLUMN_MARKER_ID || columnTarget.id.startsWith(GROUP_COLUMN_PREFIX))
-                    return;
-            }
-            const first = columns[0];
-            const currentIndex = grid.api.columnIndex(first);
-            const columnIndices = columns.map((c) => grid.api.columnIndex(c));
-            if (columnIndices.includes(index))
-                return;
-            const ignoreMove = swapDirection.current === isForward.current &&
-                swapIndex.current === currentIndex &&
-                index === swapPrevIndex.current;
-            if (currentIndex === index || ignoreMove)
-                return;
-            swapDirection.current = isForward.current;
-            swapIndex.current = index;
-            swapPrevIndex.current = currentIndex;
-            grid.api.columnMove({
-                moveColumns: columns,
-                moveTarget: index,
-                before: currentIndex > index,
-                updatePinState: true,
-            });
-        },
-    });
-    const finalProps = useMemo(() => {
-        if (cell.kind === "floating" || !isMovable)
-            return {};
-        return {
-            draggable: true,
-            onDragStart: (e) => {
-                onDragStart?.(e);
-                dragProps.onDragStart(e);
-            },
-            ref: dragProps.ref,
-        };
-    }, [cell.kind, dragProps, isMovable, onDragStart]);
-    return finalProps;
+  const ctx = grid.state;
+  const meta = ctx.columnMeta.useValue();
+  const base = ctx.columnBase.useValue();
+  const columns = useMemo(() => {
+    const columns = [];
+    for (let i = cell.colStart; i < cell.colEnd; i++) {
+      columns.push(meta.columnsVisible[i]);
+    }
+    return columns;
+  }, [cell.colEnd, cell.colStart, meta.columnsVisible]);
+  const isMovable = useMemo(() => {
+    return columns.every(
+      (c) =>
+        !c.id.startsWith(GROUP_COLUMN_PREFIX) &&
+        c.id !== COLUMN_MARKER_ID &&
+        (c.uiHints?.movable ?? base.uiHints?.movable ?? false),
+    );
+  }, [base.uiHints?.movable, columns]);
+  const swapDirection = useRef(null);
+  const swapIndex = useRef(-1);
+  const swapPrevIndex = useRef(-1);
+  const isForward = useRef(false);
+  const prevPos = useRef(-1);
+  const { dragProps } = useDraggable({
+    getItems: () => ({}),
+    onDragStart: () => {
+      if (cell.kind === "group") grid.internal.draggingHeader.set(cell);
+    },
+    onDragEnd: () => {
+      grid.internal.draggingHeader.set(null);
+    },
+    onDragMove: (p) => {
+      const element = document.elementFromPoint(p.position.x, p.position.y);
+      const vp = grid.state.viewport.get();
+      if (!vp?.contains(element)) return;
+      const nearest = getNearestFocusable(element);
+      if (!nearest) return;
+      if (prevPos.current < p.position.x) isForward.current = true;
+      if (prevPos.current > p.position.x) isForward.current = false;
+      prevPos.current = p.position.x;
+      const meta = grid.state.columnMeta.get();
+      const index = getHoveredColumnIndex({
+        viewport: vp,
+        centerCount: meta.columnVisibleCenterCount,
+        startCount: meta.columnVisibleStartCount,
+        endCount: meta.columnVisibleEndCount,
+        clientX: p.position.x,
+        rtl: grid.state.rtl.get(),
+        xPositions: grid.state.xPositions.get(),
+      });
+      if (index == null) return;
+      const columnTarget = grid.api.columnByIndex(index);
+      if (columnTarget) {
+        if (columnTarget.id === COLUMN_MARKER_ID || columnTarget.id.startsWith(GROUP_COLUMN_PREFIX))
+          return;
+      }
+      const first = columns[0];
+      const currentIndex = grid.api.columnIndex(first);
+      const columnIndices = columns.map((c) => grid.api.columnIndex(c));
+      if (columnIndices.includes(index)) return;
+      const ignoreMove =
+        swapDirection.current === isForward.current &&
+        swapIndex.current === currentIndex &&
+        index === swapPrevIndex.current;
+      if (currentIndex === index || ignoreMove) return;
+      swapDirection.current = isForward.current;
+      swapIndex.current = index;
+      swapPrevIndex.current = currentIndex;
+      grid.api.columnMove({
+        moveColumns: columns,
+        moveTarget: index,
+        before: currentIndex > index,
+        updatePinState: true,
+      });
+    },
+  });
+  const finalProps = useMemo(() => {
+    if (cell.kind === "floating" || !isMovable) return {};
+    return {
+      draggable: true,
+      onDragStart: (e) => {
+        onDragStart?.(e);
+        dragProps.onDragStart(e);
+      },
+      ref: dragProps.ref,
+    };
+  }, [cell.kind, dragProps, isMovable, onDragStart]);
+  return finalProps;
 }

package/dist/header/use-header-cell-renderer.d.ts

@@ -1,4 +1,11 @@
 import type { HeaderCellFloating, HeaderCellLayout, HeaderCellRendererParams } from "../+types";
-declare function DefaultRenderer(p: HeaderCellRendererParams<any>): import("react/jsx-runtime").JSX.Element;
-export declare function useHeaderCellRenderer<T>(cell: HeaderCellLayout<T> | HeaderCellFloating<T>): import("../+types").HeaderFloatingCellRendererFn<any> | import("../+types").HeaderCellRendererFn<T> | typeof DefaultRenderer;
+declare function DefaultRenderer(
+  p: HeaderCellRendererParams<any>,
+): import("react/jsx-runtime").JSX.Element;
+export declare function useHeaderCellRenderer<T>(
+  cell: HeaderCellLayout<T> | HeaderCellFloating<T>,
+):
+  | import("../+types").HeaderFloatingCellRendererFn<any>
+  | import("../+types").HeaderCellRendererFn<T>
+  | typeof DefaultRenderer;
 export {};

package/dist/header/use-header-cell-renderer.js

@@ -2,35 +2,31 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useGridRoot } from "../context";
 function DefaultRenderer(p) {
-    return _jsx(_Fragment, { children: p.column.name ?? p.column.id });
+  return _jsx(_Fragment, { children: p.column.name ?? p.column.id });
 }
 export function useHeaderCellRenderer(cell) {
-    const ctx = useGridRoot().grid;
-    const base = ctx.state.columnBase.useValue();
-    const floatingRenderers = ctx.state.floatingCellRenderers.useValue();
-    const headerRenderers = ctx.state.headerCellRenderers.useValue();
-    return useMemo(() => {
-        if (cell.kind === "cell") {
-            const renderer = cell.column.headerRenderer ?? base.headerRenderer ?? DefaultRenderer;
-            if (typeof renderer === "string")
-                return headerRenderers[renderer] ?? DefaultRenderer;
-            else
-                return renderer;
-        }
-        else {
-            const renderer = cell.column.floatingCellRenderer ?? base.floatingCellRenderer ?? DefaultRenderer;
-            if (typeof renderer === "string")
-                return floatingRenderers[renderer] ?? DefaultRenderer;
-            else
-                return renderer;
-        }
-    }, [
-        base.floatingCellRenderer,
-        base.headerRenderer,
-        cell.column.floatingCellRenderer,
-        cell.column.headerRenderer,
-        cell.kind,
-        floatingRenderers,
-        headerRenderers,
-    ]);
+  const ctx = useGridRoot().grid;
+  const base = ctx.state.columnBase.useValue();
+  const floatingRenderers = ctx.state.floatingCellRenderers.useValue();
+  const headerRenderers = ctx.state.headerCellRenderers.useValue();
+  return useMemo(() => {
+    if (cell.kind === "cell") {
+      const renderer = cell.column.headerRenderer ?? base.headerRenderer ?? DefaultRenderer;
+      if (typeof renderer === "string") return headerRenderers[renderer] ?? DefaultRenderer;
+      else return renderer;
+    } else {
+      const renderer =
+        cell.column.floatingCellRenderer ?? base.floatingCellRenderer ?? DefaultRenderer;
+      if (typeof renderer === "string") return floatingRenderers[renderer] ?? DefaultRenderer;
+      else return renderer;
+    }
+  }, [
+    base.floatingCellRenderer,
+    base.headerRenderer,
+    cell.column.floatingCellRenderer,
+    cell.column.headerRenderer,
+    cell.kind,
+    floatingRenderers,
+    headerRenderers,
+  ]);
 }