@1771technologies/lytenyte-pro 1.0.2 → 1.0.3

package/dist/grid-box/use-column-box-items.js

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { useEvent } from "@1771technologies/lytenyte-react-hooks";
-export function useColumnBoxItems({ grid, onRootDrop, onDrop, onDelete, onAction, orientation, draggable = true, dragPlaceholder, itemFilter, }) {
+export function useColumnBoxItems({ grid, onRootDrop, onDrop, onDelete, onAction, orientation, draggable = true, itemFilter, placeholder, }) {
     const columns = grid.state.columns.useValue();
     const base = grid.state.columnBase.useValue();
     const gridId = grid.state.gridId.useValue();
@@ -32,8 +32,8 @@ export function useColumnBoxItems({ grid, onRootDrop, onDrop, onDelete, onAction
                 source: "columns",
                 draggable,
                 data: c,
+                dragPlaceholder: placeholder,
                 dragData: data,
-                dragPlaceholder: dragPlaceholder ? () => dragPlaceholder?.(c) : undefined,
                 onAction: (el) => onAction?.({ column: c, el }),
                 onDelete: (el) => onDelete?.({ column: c, el }),
                 onDrop: (p) => {
@@ -53,13 +53,13 @@ export function useColumnBoxItems({ grid, onRootDrop, onDrop, onDelete, onAction
         base.uiHints?.aggsAllowed?.length,
         base.uiHints?.rowGroupable,
         columns,
-        dragPlaceholder,
         draggable,
         gridId,
         itemFilter,
         onAction,
         onDelete,
         onDrop,
+        placeholder,
     ]);
     const onRootDropEv = useEvent((p) => {
         const columnId = `${gridId}-column`;

package/dist/grid-box/use-row-group-box-items.d.ts

@@ -1,13 +1,13 @@
-import { type ReactNode } from "react";
 import type { DropEventParams, Grid, RowGroupModelItem } from "../+types.js";
 import type { GridBoxItem } from "./+types.js";
 export interface UseRowGroupBoxItems<T> {
     readonly grid: Grid<T>;
     readonly orientation?: "horizontal" | "vertical";
-    readonly dragPlaceholder?: (c: RowGroupModelItem<T>) => ReactNode;
     readonly hideColumnOnGroup?: boolean;
+    readonly includeGroupables?: boolean;
+    readonly placeholder?: (el: HTMLElement) => HTMLElement;
 }
-export declare function useRowGroupBoxItems<T>({ grid, orientation, dragPlaceholder, hideColumnOnGroup, }: UseRowGroupBoxItems<T>): {
+export declare function useRowGroupBoxItems<T>({ grid, orientation, hideColumnOnGroup, includeGroupables, placeholder, }: UseRowGroupBoxItems<T>): {
     rootProps: {
         accepted: string[];
         onRootDrop: (p: DropEventParams) => void;

package/dist/grid-box/use-row-group-box-items.js

@@ -1,14 +1,44 @@
 import { useMemo } from "react";
 import { useEvent } from "@1771technologies/lytenyte-react-hooks";
-export function useRowGroupBoxItems({ grid, orientation, dragPlaceholder, hideColumnOnGroup = true, }) {
+export function useRowGroupBoxItems({ grid, orientation, hideColumnOnGroup = true, includeGroupables = false, placeholder, }) {
     const rowGroupModel = grid.state.rowGroupModel.useValue();
     const gridId = grid.state.gridId.useValue();
+    const columns = grid.state.columns.useValue();
+    const base = grid.state.columnBase.useValue();
     const items = useMemo(() => {
         const groupId = `${gridId}-group`;
+        const groupables = (includeGroupables
+            ? columns.map((c) => {
+                const canGroup = c.uiHints?.rowGroupable ?? base.uiHints?.rowGroupable;
+                if (!canGroup)
+                    return null;
+                if (rowGroupModel.find((x) => typeof x === "string" && x === c.id))
+                    return null;
+                return c;
+            })
+            : [])
+            .filter((c) => c != null)
+            .map((c, i) => {
+            return {
+                data: c.id,
+                dragData: { [groupId]: c.id },
+                draggable: false,
+                source: "groups",
+                id: c.id,
+                index: i + rowGroupModel.length,
+                label: c.name ?? c.id,
+                onAction: () => { },
+                onDelete: () => { },
+                onDrop: () => { },
+                active: false,
+            };
+        });
         return rowGroupModel
             .map((c, i) => {
             const onDelete = () => {
                 grid.state.rowGroupModel.set((prev) => prev.filter((x) => x !== c));
+                if (typeof c === "string")
+                    grid.api.columnUpdate({ [c]: { hide: false } });
             };
             const onDrop = (p) => {
                 const target = c;
@@ -62,7 +92,8 @@ export function useRowGroupBoxItems({ grid, orientation, dragPlaceholder, hideCo
                     onAction: () => { },
                     onDelete: onDelete,
                     onDrop: onDrop,
-                    dragPlaceholder: dragPlaceholder ? () => dragPlaceholder(c) : undefined,
+                    dragPlaceholder: placeholder,
+                    active: true,
                 };
             }
             else {
@@ -77,17 +108,22 @@ export function useRowGroupBoxItems({ grid, orientation, dragPlaceholder, hideCo
                     onAction: () => { },
                     onDelete: onDelete,
                     onDrop,
-                    dragPlaceholder: dragPlaceholder ? () => dragPlaceholder(c) : undefined,
+                    active: true,
+                    dragPlaceholder: placeholder,
                 };
             }
         })
-            .filter((c) => c !== null);
+            .filter((c) => c !== null)
+            .concat(groupables);
     }, [
+        base.uiHints?.rowGroupable,
+        columns,
         grid.api,
         grid.state.rowGroupModel,
         gridId,
         hideColumnOnGroup,
-        dragPlaceholder,
+        includeGroupables,
+        placeholder,
         rowGroupModel,
     ]);
     const onRootDrop = useEvent((p) => {

package/dist/grid.d.ts

@@ -11,7 +11,7 @@ export declare const Grid: {
     RowsContainer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     RowsBottom: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     RowsTop: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    Row: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "onDrag"> & import("./rows/row/row").RowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Row: import("react").NamedExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "onDrag"> & import("./rows/row/row").RowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     RowsCenter: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Viewport: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     useLyteNyte: typeof useLyteNyte;

package/dist/header/resize-handler.js

@@ -63,20 +63,11 @@ export function ResizeHandler({ as, cell, xPositions, style, className, }) {
                     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);
+                    const cells = Array.from(vp.querySelectorAll(query));
+                    const headers = [header];
                     if (floating)
-                        q.push(floating);
-                    q.forEach((c) => {
+                        headers.push(floating);
+                    headers.forEach((c) => {
                         if (!isHTMLElement(c))
                             return;
                         c.style.removeProperty("min-width");
@@ -89,13 +80,28 @@ export function ResizeHandler({ as, cell, xPositions, style, className, }) {
                             c.style.transform = getTranslate(isRtl ? -x : x, 0);
                         }
                     });
+                    const widthPx = `${width + deltaRef.current}px`;
+                    cells.forEach((c) => {
+                        if (!isHTMLElement(c))
+                            return;
+                        c.style.minWidth = widthPx;
+                        c.style.maxWidth = widthPx;
+                        c.style.width = widthPx;
+                    });
+                    const headerAfterQuery = `${headerQuery} ~ [data-ln-header-cell="true"]`;
+                    let after;
+                    if (pin !== "end") {
+                        after = Array.from(vp.querySelectorAll(headerAfterQuery));
+                    }
+                    else {
+                        after = [];
+                    }
                     after.forEach((c) => {
                         if (!isHTMLElement(c))
                             return;
                         const thisPin = c.getAttribute("data-ln-pin");
-                        if (pin === "end" && thisPin === "end") {
+                        if (pin === "end" && thisPin === "end")
                             return;
-                        }
                         if (pin !== "end" && thisPin === "end")
                             return;
                         const colindex = getColIndexFromEl(c);

package/dist/license.js

@@ -1,5 +1,5 @@
 const hashSalt = "faec0f3c45281b1fe12d87e64a6c3271";
-const issueDate = new Date("2025-08-19");
+const issueDate = new Date("2025-09-01");
 function getHostname() {
     const win = globalThis?.document?.defaultView || (typeof window !== "undefined" ? window : null);
     const loc = win?.location;