@1771technologies/lytenyte-pro 1.0.0-beta.12 → 1.0.0-beta.14

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

@@ -1,59 +1,62 @@
 import { useMemo } from "react";
 import { useEvent } from "@1771technologies/lytenyte-react-hooks";
 export function useAggregationBoxItems({ grid, orientation }) {
-  const model = grid.state.aggModel.useValue();
-  const gridId = grid.state.gridId.useValue();
-  const items = useMemo(() => {
-    const items = Object.entries(model).map(([id, agg]) => {
-      const column = grid.api.columnById(id);
-      const name = column?.name ?? column?.id ?? id;
-      const fn = typeof agg.fn === "string" ? agg.fn : "Fn(x)";
-      return {
-        draggable: false,
-        id,
-        data: { id, agg },
-        dragData: {},
-        label: `${name} ${fn}`,
-        onAction: () => {},
-        onDelete: () => {
-          grid.state.aggModel.set((prev) => {
-            const next = { ...prev };
-            delete next[id];
-            return next;
-          });
-        },
-        onDrop: () => {},
-        dragPlaceholder: undefined,
-      };
+    const model = grid.state.aggModel.useValue();
+    const gridId = grid.state.gridId.useValue();
+    const items = useMemo(() => {
+        const items = Object.entries(model).map(([id, agg], i) => {
+            const column = grid.api.columnById(id);
+            const name = column?.name ?? column?.id ?? id;
+            const fn = typeof agg.fn === "string" ? agg.fn : "Fn(x)";
+            return {
+                draggable: false,
+                id,
+                index: i,
+                source: "aggregation",
+                data: { id, agg },
+                dragData: {},
+                label: `${name} ${fn}`,
+                onAction: () => { },
+                onDelete: () => {
+                    grid.state.aggModel.set((prev) => {
+                        const next = { ...prev };
+                        delete next[id];
+                        return next;
+                    });
+                },
+                onDrop: () => { },
+                dragPlaceholder: undefined,
+            };
+        });
+        return items;
+    }, [model, grid.api, grid.state.aggModel]);
+    const onRootDrop = useEvent((p) => {
+        const aggId = `${gridId}-agg`;
+        const c = p.state.siteLocalData?.[aggId];
+        if (!c)
+            return;
+        const current = model[c.id];
+        if (!current) {
+            const base = grid.state.columnBase.get();
+            const agg = c.uiHints?.aggDefault ??
+                c.uiHints?.aggsAllowed?.[0] ??
+                base.uiHints?.aggDefault ??
+                base.uiHints?.aggsAllowed?.[0];
+            if (!agg)
+                return;
+            const next = { fn: agg };
+            grid.state.aggModel.set((prev) => ({ ...prev, [c.id]: next }));
+        }
     });
-    return items;
-  }, [model, grid.api, grid.state.aggModel]);
-  const onRootDrop = useEvent((p) => {
-    const aggId = `${gridId}-agg`;
-    const c = p.state.siteLocalData?.[aggId];
-    if (!c) return;
-    const current = model[c.id];
-    if (!current) {
-      const base = grid.state.columnBase.get();
-      const agg =
-        c.uiHints?.aggDefault ??
-        c.uiHints?.aggsAllowed?.[0] ??
-        base.uiHints?.aggDefault ??
-        base.uiHints?.aggsAllowed?.[0];
-      if (!agg) return;
-      const next = { fn: agg };
-      grid.state.aggModel.set((prev) => ({ ...prev, [c.id]: next }));
-    }
-  });
-  return useMemo(() => {
-    return {
-      rootProps: {
-        accepted: [`${gridId}-agg`],
-        onRootDrop,
-        orientation,
-        grid,
-      },
-      items,
-    };
-  }, [grid, gridId, items, onRootDrop, orientation]);
+    return useMemo(() => {
+        return {
+            rootProps: {
+                accepted: [`${gridId}-agg`],
+                onRootDrop,
+                orientation,
+                grid,
+            },
+            items,
+        };
+    }, [grid, gridId, items, onRootDrop, orientation]);
 }

package/dist/grid-box/use-column-box-items.d.ts

@@ -2,40 +2,34 @@ import { type ReactNode } from "react";
 import type { Column, DropEventParams, Grid } from "../+types.js";
 import type { GridBoxItem } from "./+types.js";
 export interface OnDropParams<T> {
-  readonly target: Column<T>;
-  readonly src: Column<T>;
-  readonly isBefore: boolean;
+    readonly target: Column<T>;
+    readonly src: Column<T>;
+    readonly isBefore: boolean;
 }
 export interface OnRootDropParams<T> {
-  readonly column: Column<T>;
+    readonly column: Column<T>;
+}
+export interface OnActionParams<T> {
+    readonly column: Column<T>;
+    readonly el: HTMLElement;
 }
 export interface UseColumnBoxItemArgs<T> {
-  readonly grid: Grid<T>;
-  readonly orientation?: "horizontal" | "vertical";
-  readonly draggable?: boolean;
-  readonly itemFilter?: (c: Column<T>) => boolean;
-  readonly onRootDrop?: (p: OnRootDropParams<T>) => void;
-  readonly onDrop?: (p: OnDropParams<T>) => void;
-  readonly onAction?: (c: Column<T>) => void;
-  readonly onDelete?: (c: Column<T>) => void;
-  readonly dragPlaceholder?: (c: Column<T>) => ReactNode;
+    readonly grid: Grid<T>;
+    readonly orientation?: "horizontal" | "vertical";
+    readonly draggable?: boolean;
+    readonly itemFilter?: (c: Column<T>) => boolean;
+    readonly onRootDrop?: (p: OnRootDropParams<T>) => void;
+    readonly onDrop?: (p: OnDropParams<T>) => void;
+    readonly onAction?: (c: OnActionParams<T>) => void;
+    readonly onDelete?: (c: OnActionParams<T>) => void;
+    readonly dragPlaceholder?: (c: Column<T>) => ReactNode;
 }
-export declare function useColumnBoxItems<T>({
-  grid,
-  onRootDrop,
-  onDrop,
-  onDelete,
-  onAction,
-  orientation,
-  draggable,
-  dragPlaceholder,
-  itemFilter,
-}: UseColumnBoxItemArgs<T>): {
-  rootProps: {
-    accepted: string[];
-    orientation: "horizontal" | "vertical" | undefined;
-    onRootDrop: (p: DropEventParams) => void;
-    grid: Grid<T>;
-  };
-  items: GridBoxItem<Column<T>>[];
+export declare function useColumnBoxItems<T>({ grid, onRootDrop, onDrop, onDelete, onAction, orientation, draggable, dragPlaceholder, itemFilter, }: UseColumnBoxItemArgs<T>): {
+    rootProps: {
+        accepted: string[];
+        orientation: "horizontal" | "vertical" | undefined;
+        onRootDrop: (p: DropEventParams) => void;
+        grid: Grid<T>;
+    };
+    items: GridBoxItem<Column<T>>[];
 };

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

@@ -1,93 +1,83 @@
 import { useMemo } from "react";
 import { useEvent } from "@1771technologies/lytenyte-react-hooks";
-export function useColumnBoxItems({
-  grid,
-  onRootDrop,
-  onDrop,
-  onDelete,
-  onAction,
-  orientation,
-  draggable = true,
-  dragPlaceholder,
-  itemFilter,
-}) {
-  const columns = grid.state.columns.useValue();
-  const base = grid.state.columnBase.useValue();
-  const gridId = grid.state.gridId.useValue();
-  const items = useMemo(() => {
-    const groupId = `${gridId}-group`;
-    const aggId = `${gridId}-agg`;
-    const columnId = `${gridId}-column`;
-    return columns
-      .filter((c) => {
-        return itemFilter ? itemFilter(c) : true;
-      })
-      .map((c) => {
-        const canGroup = c.uiHints?.rowGroupable ?? base.uiHints?.rowGroupable ?? false;
-        const canAgg = Boolean(
-          c.uiHints?.aggDefault ??
-            c.uiHints?.aggDefault?.length ??
-            base.uiHints?.aggDefault ??
-            base.uiHints?.aggsAllowed?.length,
-        );
-        const data = {
-          [columnId]: c,
-        };
-        if (canGroup) data[groupId] = c.id;
-        if (canAgg) data[aggId] = c;
-        return {
-          label: c.name ?? c.id,
-          id: c.id,
-          draggable,
-          data: c,
-          dragData: data,
-          dragPlaceholder: dragPlaceholder ? () => dragPlaceholder?.(c) : undefined,
-          onAction: () => onAction?.(c),
-          onDelete: () => onDelete?.(c),
-          onDrop: (p) => {
-            const target = c;
-            const src = p.state.siteLocalData?.[columnId];
-            const isRtl = grid.state.rtl.get();
-            let isBefore;
-            if (orientation === "horizontal") {
-              isBefore = isRtl ? !p.moveState.leftHalf : p.moveState.leftHalf;
-            } else {
-              isBefore = p.moveState.topHalf;
-            }
-            onDrop?.({ src, target, isBefore });
-          },
-        };
-      });
-  }, [
-    base.uiHints?.aggDefault,
-    base.uiHints?.aggsAllowed?.length,
-    base.uiHints?.rowGroupable,
-    columns,
-    dragPlaceholder,
-    draggable,
-    grid.state.rtl,
-    gridId,
-    itemFilter,
-    onAction,
-    onDelete,
-    onDrop,
-    orientation,
-  ]);
-  const onRootDropEv = useEvent((p) => {
-    const columnId = `${gridId}-column`;
-    const src = p.state.siteLocalData?.[columnId];
-    onRootDrop?.(src);
-  });
-  return useMemo(
-    () => ({
-      rootProps: {
-        accepted: [`${gridId}-column`],
-        orientation: orientation,
-        onRootDrop: onRootDropEv,
-        grid,
-      },
-      items,
-    }),
-    [grid, gridId, items, onRootDropEv, orientation],
-  );
+export function useColumnBoxItems({ grid, onRootDrop, onDrop, onDelete, onAction, orientation, draggable = true, dragPlaceholder, itemFilter, }) {
+    const columns = grid.state.columns.useValue();
+    const base = grid.state.columnBase.useValue();
+    const gridId = grid.state.gridId.useValue();
+    const items = useMemo(() => {
+        const groupId = `${gridId}-group`;
+        const aggId = `${gridId}-agg`;
+        const columnId = `${gridId}-column`;
+        return columns
+            .filter((c) => {
+            return itemFilter ? itemFilter(c) : true;
+        })
+            .map((c, i) => {
+            const canGroup = c.uiHints?.rowGroupable ?? base.uiHints?.rowGroupable ?? false;
+            const canAgg = Boolean(c.uiHints?.aggDefault ??
+                c.uiHints?.aggDefault?.length ??
+                base.uiHints?.aggDefault ??
+                base.uiHints?.aggsAllowed?.length);
+            const data = {
+                [columnId]: c,
+            };
+            if (canGroup)
+                data[groupId] = c.id;
+            if (canAgg)
+                data[aggId] = c;
+            return {
+                label: c.name ?? c.id,
+                id: c.id,
+                index: i,
+                source: "columns",
+                draggable,
+                data: c,
+                dragData: data,
+                dragPlaceholder: dragPlaceholder ? () => dragPlaceholder?.(c) : undefined,
+                onAction: (el) => onAction?.({ column: c, el }),
+                onDelete: (el) => onDelete?.({ column: c, el }),
+                onDrop: (p) => {
+                    const target = c;
+                    const src = p.state.siteLocalData?.[columnId];
+                    const isRtl = grid.state.rtl.get();
+                    let isBefore;
+                    if (orientation === "horizontal") {
+                        isBefore = isRtl ? !p.moveState.leftHalf : p.moveState.leftHalf;
+                    }
+                    else {
+                        isBefore = p.moveState.topHalf;
+                    }
+                    onDrop?.({ src, target, isBefore });
+                },
+            };
+        });
+    }, [
+        base.uiHints?.aggDefault,
+        base.uiHints?.aggsAllowed?.length,
+        base.uiHints?.rowGroupable,
+        columns,
+        dragPlaceholder,
+        draggable,
+        grid.state.rtl,
+        gridId,
+        itemFilter,
+        onAction,
+        onDelete,
+        onDrop,
+        orientation,
+    ]);
+    const onRootDropEv = useEvent((p) => {
+        const columnId = `${gridId}-column`;
+        const src = p.state.siteLocalData?.[columnId];
+        onRootDrop?.(src);
+    });
+    return useMemo(() => ({
+        rootProps: {
+            accepted: [`${gridId}-column`],
+            orientation: orientation,
+            onRootDrop: onRootDropEv,
+            grid,
+        },
+        items,
+    }), [grid, gridId, items, onRootDropEv, orientation]);
 }

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

@@ -2,22 +2,17 @@ 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 placeholder?: (c: RowGroupModelItem<T>) => ReactNode;
-  readonly hideColumnOnGroup?: boolean;
+    readonly grid: Grid<T>;
+    readonly orientation?: "horizontal" | "vertical";
+    readonly dragPlaceholder?: (c: RowGroupModelItem<T>) => ReactNode;
+    readonly hideColumnOnGroup?: boolean;
 }
-export declare function useRowGroupBoxItems<T>({
-  grid,
-  orientation,
-  placeholder,
-  hideColumnOnGroup,
-}: UseRowGroupBoxItems<T>): {
-  rootProps: {
-    accepted: string[];
-    onRootDrop: (p: DropEventParams) => void;
-    orientation: "horizontal" | "vertical" | undefined;
-    grid: Grid<T>;
-  };
-  items: GridBoxItem<RowGroupModelItem<T>>[];
+export declare function useRowGroupBoxItems<T>({ grid, orientation, dragPlaceholder, hideColumnOnGroup, }: UseRowGroupBoxItems<T>): {
+    rootProps: {
+        accepted: string[];
+        onRootDrop: (p: DropEventParams) => void;
+        orientation: "horizontal" | "vertical" | undefined;
+        grid: Grid<T>;
+    };
+    items: GridBoxItem<RowGroupModelItem<T>>[];
 };

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

@@ -1,126 +1,138 @@
 import { useMemo } from "react";
 import { useEvent } from "@1771technologies/lytenyte-react-hooks";
-export function useRowGroupBoxItems({ grid, orientation, placeholder, hideColumnOnGroup = true }) {
-  const rowGroupModel = grid.state.rowGroupModel.useValue();
-  const gridId = grid.state.gridId.useValue();
-  const items = useMemo(() => {
-    const groupId = `${gridId}-group`;
-    return rowGroupModel
-      .map((c) => {
-        const onDelete = () => {
-          grid.state.rowGroupModel.set((prev) => prev.filter((x) => x !== c));
-        };
-        const onDrop = (p) => {
-          const target = c;
-          const src = p.state.siteLocalData?.[groupId];
-          const isRtl = grid.state.rtl.get();
-          let isBefore;
-          if (orientation === "horizontal") {
-            isBefore = isRtl ? !p.moveState.leftHalf : p.moveState.leftHalf;
-          } else {
-            isBefore = p.moveState.topHalf;
-          }
-          const srcIndex = rowGroupModel.findIndex((x) => {
-            if (typeof src !== typeof x) return;
-            const cid = typeof src === "string" ? src : src.id;
+export function useRowGroupBoxItems({ grid, orientation, dragPlaceholder, hideColumnOnGroup = true, }) {
+    const rowGroupModel = grid.state.rowGroupModel.useValue();
+    const gridId = grid.state.gridId.useValue();
+    const items = useMemo(() => {
+        const groupId = `${gridId}-group`;
+        return rowGroupModel
+            .map((c, i) => {
+            const onDelete = () => {
+                grid.state.rowGroupModel.set((prev) => prev.filter((x) => x !== c));
+            };
+            const onDrop = (p) => {
+                const target = c;
+                const src = p.state.siteLocalData?.[groupId];
+                const isRtl = grid.state.rtl.get();
+                let isBefore;
+                if (orientation === "horizontal") {
+                    isBefore = isRtl ? !p.moveState.leftHalf : p.moveState.leftHalf;
+                }
+                else {
+                    isBefore = p.moveState.topHalf;
+                }
+                const srcIndex = rowGroupModel.findIndex((x) => {
+                    if (typeof src !== typeof x)
+                        return;
+                    const cid = typeof src === "string" ? src : src.id;
+                    const xid = typeof x === "string" ? x : x.id;
+                    return cid === xid;
+                });
+                const targetIndex = rowGroupModel.indexOf(target);
+                // This is an external
+                if (srcIndex === -1) {
+                    grid.state.rowGroupModel.set((prev) => {
+                        const next = [...prev];
+                        next.splice(isBefore ? targetIndex : targetIndex + 1, 0, src);
+                        return next;
+                    });
+                    if (typeof src === "string" && hideColumnOnGroup) {
+                        grid.api.columnUpdate({ [src]: { hide: true } });
+                    }
+                }
+                else {
+                    grid.state.rowGroupModel.set((prev) => {
+                        const next = [...prev];
+                        next.splice(srcIndex, 1);
+                        const targetIndex = next.indexOf(target);
+                        next.splice(isBefore ? targetIndex : targetIndex + 1, 0, src);
+                        return next;
+                    });
+                }
+            };
+            if (typeof c === "string") {
+                const column = grid.api.columnById(c);
+                if (!column)
+                    return null;
+                return {
+                    dragData: { [groupId]: c },
+                    data: c,
+                    draggable: true,
+                    source: "groups",
+                    id: c,
+                    index: i,
+                    label: column.name ?? column.id,
+                    onAction: () => { },
+                    onDelete: onDelete,
+                    onDrop: onDrop,
+                    dragPlaceholder: dragPlaceholder ? () => dragPlaceholder(c) : undefined,
+                };
+            }
+            else {
+                return {
+                    dragData: { [groupId]: c },
+                    data: c,
+                    draggable: true,
+                    id: c.id,
+                    source: "groups",
+                    index: i,
+                    label: c.name ?? c.id,
+                    onAction: () => { },
+                    onDelete: onDelete,
+                    onDrop,
+                    dragPlaceholder: dragPlaceholder ? () => dragPlaceholder(c) : undefined,
+                };
+            }
+        })
+            .filter((c) => c !== null);
+    }, [
+        grid.api,
+        grid.state.rowGroupModel,
+        grid.state.rtl,
+        gridId,
+        hideColumnOnGroup,
+        orientation,
+        dragPlaceholder,
+        rowGroupModel,
+    ]);
+    const onRootDrop = useEvent((p) => {
+        const groupId = `${gridId}-group`;
+        const c = p.state.siteLocalData?.[groupId];
+        if (!c)
+            return;
+        // Is the item in the model.
+        const currentIndex = rowGroupModel.findIndex((x) => {
+            if (typeof c !== typeof x)
+                return;
+            const cid = typeof c === "string" ? c : c.id;
             const xid = typeof x === "string" ? x : x.id;
             return cid === xid;
-          });
-          const targetIndex = rowGroupModel.indexOf(target);
-          // This is an external
-          if (srcIndex === -1) {
-            grid.state.rowGroupModel.set((prev) => {
-              const next = [...prev];
-              next.splice(isBefore ? targetIndex : targetIndex + 1, 0, src);
-              return next;
-            });
-            if (typeof src === "string" && hideColumnOnGroup) {
-              grid.api.columnUpdate({ [src]: { hide: true } });
+        });
+        // We failed to find the item, so add it to the end. If
+        if (currentIndex === -1) {
+            grid.state.rowGroupModel.set((prev) => [...prev, c]);
+            if (typeof c === "string" && hideColumnOnGroup) {
+                grid.api.columnUpdate({ [c]: { hide: true } });
             }
-          } else {
+        }
+        else {
             grid.state.rowGroupModel.set((prev) => {
-              const next = [...prev];
-              next.splice(srcIndex, 1);
-              const targetIndex = next.indexOf(target);
-              next.splice(isBefore ? targetIndex : targetIndex + 1, 0, src);
-              return next;
+                const next = [...prev];
+                next.splice(currentIndex, 1);
+                next.push(c);
+                return next;
             });
-          }
-        };
-        if (typeof c === "string") {
-          const column = grid.api.columnById(c);
-          if (!column) return null;
-          return {
-            dragData: { [groupId]: c },
-            data: c,
-            draggable: true,
-            id: c,
-            label: column.name ?? column.id,
-            onAction: () => {},
-            onDelete: onDelete,
-            onDrop: onDrop,
-            dragPlaceholder: placeholder ? () => placeholder(c) : undefined,
-          };
-        } else {
-          return {
-            dragData: { [groupId]: c },
-            data: c,
-            draggable: true,
-            id: c.id,
-            label: c.name ?? c.id,
-            onAction: () => {},
-            onDelete: onDelete,
-            onDrop,
-            dragPlaceholder: placeholder ? () => placeholder(c) : undefined,
-          };
         }
-      })
-      .filter((c) => c !== null);
-  }, [
-    grid.api,
-    grid.state.rowGroupModel,
-    grid.state.rtl,
-    gridId,
-    hideColumnOnGroup,
-    orientation,
-    placeholder,
-    rowGroupModel,
-  ]);
-  const onRootDrop = useEvent((p) => {
-    const groupId = `${gridId}-group`;
-    const c = p.state.siteLocalData?.[groupId];
-    if (!c) return;
-    // Is the item in the model.
-    const currentIndex = rowGroupModel.findIndex((x) => {
-      if (typeof c !== typeof x) return;
-      const cid = typeof c === "string" ? c : c.id;
-      const xid = typeof x === "string" ? x : x.id;
-      return cid === xid;
     });
-    // We failed to find the item, so add it to the end. If
-    if (currentIndex === -1) {
-      grid.state.rowGroupModel.set((prev) => [...prev, c]);
-      if (typeof c === "string" && hideColumnOnGroup) {
-        grid.api.columnUpdate({ [c]: { hide: true } });
-      }
-    } else {
-      grid.state.rowGroupModel.set((prev) => {
-        const next = [...prev];
-        next.splice(currentIndex, 1);
-        next.push(c);
-        return next;
-      });
-    }
-  });
-  return useMemo(() => {
-    return {
-      rootProps: {
-        accepted: [`${gridId}-group`],
-        onRootDrop,
-        orientation,
-        grid,
-      },
-      items,
-    };
-  }, [grid, gridId, items, onRootDrop, orientation]);
+    return useMemo(() => {
+        return {
+            rootProps: {
+                accepted: [`${gridId}-group`],
+                onRootDrop,
+                orientation,
+                grid,
+            },
+            items,
+        };
+    }, [grid, gridId, items, onRootDrop, orientation]);
 }

package/dist/grid-provider/context.d.ts

@@ -1,7 +1,5 @@
 import type { Grid } from "../+types.js";
 import type { InternalAtoms } from "../state/+types.js";
-export declare const gridContext: import("react").Context<
-  Grid<any> & {
+export declare const gridContext: import("react").Context<Grid<any> & {
     internal: InternalAtoms;
-  }
->;
+}>;