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

package/dist/grid-box/item.js

@@ -2,62 +2,79 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Item } from "../listbox/item";
 import { dragState, DropWrap, useDraggable } from "@1771technologies/lytenyte-dragon";
-import { useCombinedRefs, useSlot, } from "@1771technologies/lytenyte-react-hooks";
+import { useCombinedRefs, useSlot } from "@1771technologies/lytenyte-react-hooks";
 import { useGridBoxContext } from "./context";
-export const BoxItem = forwardRef(function BoxItem({ item, itemAs, itemClassName, itemStyle, children, ...props }, forwarded) {
-    const { accepted } = useGridBoxContext();
-    const { dragProps } = useDraggable({
-        getItems: () => {
-            return {
-                siteLocalData: item.dragData,
-            };
-        },
-        placeholder: item.dragPlaceholder,
-    });
-    const ref = useCombinedRefs(forwarded, dragProps.ref);
-    const extraProps = item.draggable ? { ...dragProps, ref } : { ref: forwarded };
-    const renderer = useSlot({
-        props: [
-            {
-                children: (_jsx(Item, { ...extraProps, onKeyDown: (ev) => {
-                        if (ev.key === " ") {
-                            item.onAction?.(ev.currentTarget);
-                            ev.preventDefault();
-                        }
-                        if (ev.key === "Backspace" || ev.key === "Delete")
-                            item.onDelete?.(ev.currentTarget);
-                    }, onClick: (ev) => item.onAction(ev.currentTarget), className: itemClassName, style: itemStyle, "data-ln-source": item.source, "data-ln-index": item.index, children: children })),
-            },
-        ],
-        slot: itemAs ?? _jsx("div", {}),
-    });
-    return (_jsx(DropWrap, { ...props, onEnter: (e) => {
-            const data = dragState.active.get();
-            const thisSource = e.getAttribute("data-ln-source");
-            const dragSource = data?.getAttribute("data-ln-source");
-            if (!data)
-                return;
-            if (thisSource !== dragSource) {
-                e.setAttribute("data-ln-is-after", "true");
-                return;
+export const BoxItem = forwardRef(function BoxItem(
+  { item, itemAs, itemClassName, itemStyle, children, ...props },
+  forwarded,
+) {
+  const { accepted } = useGridBoxContext();
+  const { dragProps } = useDraggable({
+    getItems: () => {
+      return {
+        siteLocalData: item.dragData,
+      };
+    },
+    placeholder: item.dragPlaceholder,
+  });
+  const ref = useCombinedRefs(forwarded, dragProps.ref);
+  const extraProps = item.draggable ? { ...dragProps, ref } : { ref: forwarded };
+  const renderer = useSlot({
+    props: [
+      {
+        children: _jsx(Item, {
+          ...extraProps,
+          onKeyDown: (ev) => {
+            if (ev.key === " ") {
+              item.onAction?.(ev.currentTarget);
+              ev.preventDefault();
             }
-            const overIndex = Number.parseInt(e.getAttribute("data-ln-index"));
-            const dragIndex = Number.parseInt(data.getAttribute("data-ln-index"));
-            if (Number.isNaN(dragIndex) || Number.isNaN(overIndex) || overIndex === dragIndex)
-                return;
-            if (overIndex < dragIndex) {
-                e.setAttribute("data-ln-is-before", "true");
-            }
-            else {
-                e.setAttribute("data-ln-is-after", "true");
-            }
-        }, onLeave: (el) => {
-            el.removeAttribute("data-ln-is-before");
-            el.removeAttribute("data-ln-is-after");
-        }, "data-ln-source": item.source, "data-ln-index": item.index, accepted: accepted, onDrop: (e) => {
-            const el = e.dropElement;
-            el.removeAttribute("data-ln-is-before");
-            el.removeAttribute("data-ln-is-after");
-            item.onDrop(e);
-        }, as: renderer }));
+            if (ev.key === "Backspace" || ev.key === "Delete") item.onDelete?.(ev.currentTarget);
+          },
+          onClick: (ev) => item.onAction(ev.currentTarget),
+          className: itemClassName,
+          style: itemStyle,
+          "data-ln-source": item.source,
+          "data-ln-index": item.index,
+          children: children,
+        }),
+      },
+    ],
+    slot: itemAs ?? _jsx("div", {}),
+  });
+  return _jsx(DropWrap, {
+    ...props,
+    onEnter: (e) => {
+      const data = dragState.active.get();
+      const thisSource = e.getAttribute("data-ln-source");
+      const dragSource = data?.getAttribute("data-ln-source");
+      if (!data) return;
+      if (thisSource !== dragSource) {
+        e.setAttribute("data-ln-is-after", "true");
+        return;
+      }
+      const overIndex = Number.parseInt(e.getAttribute("data-ln-index"));
+      const dragIndex = Number.parseInt(data.getAttribute("data-ln-index"));
+      if (Number.isNaN(dragIndex) || Number.isNaN(overIndex) || overIndex === dragIndex) return;
+      if (overIndex < dragIndex) {
+        e.setAttribute("data-ln-is-before", "true");
+      } else {
+        e.setAttribute("data-ln-is-after", "true");
+      }
+    },
+    onLeave: (el) => {
+      el.removeAttribute("data-ln-is-before");
+      el.removeAttribute("data-ln-is-after");
+    },
+    "data-ln-source": item.source,
+    "data-ln-index": item.index,
+    accepted: accepted,
+    onDrop: (e) => {
+      const el = e.dropElement;
+      el.removeAttribute("data-ln-is-before");
+      el.removeAttribute("data-ln-is-after");
+      item.onDrop(e);
+    },
+    as: renderer,
+  });
 });

package/dist/grid-box/panel.d.ts

@@ -1 +1,13 @@
-export declare const GridBoxPanel: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "onDrop">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const GridBoxPanel: import("react").ForwardRefExoticComponent<
+  Omit<
+    Omit<
+      import("react").DetailedHTMLProps<
+        import("react").HTMLAttributes<HTMLDivElement>,
+        HTMLDivElement
+      >,
+      "onDrop"
+    >,
+    "ref"
+  > &
+    import("react").RefAttributes<HTMLDivElement>
+>;

package/dist/grid-box/panel.js

@@ -4,6 +4,13 @@ import { Panel } from "../listbox/panel";
 import { DropWrap } from "@1771technologies/lytenyte-dragon";
 import { useGridBoxContext } from "./context";
 export const GridBoxPanel = forwardRef(function GridBoxPanel(props, forwarded) {
-    const ctx = useGridBoxContext();
-    return (_jsx(DropWrap, { ...props, accepted: ctx.accepted, "data-ln-orientation": ctx.orientation, onDrop: ctx.onRootDrop, ref: forwarded, as: _jsx(Panel, {}) }));
+  const ctx = useGridBoxContext();
+  return _jsx(DropWrap, {
+    ...props,
+    accepted: ctx.accepted,
+    "data-ln-orientation": ctx.orientation,
+    onDrop: ctx.onRootDrop,
+    ref: forwarded,
+    as: _jsx(Panel, {}),
+  });
 });

package/dist/grid-box/root.d.ts

@@ -1,9 +1,15 @@
 import { type PropsWithChildren } from "react";
 import type { DropEventParams, Grid } from "../+types";
 export interface GridBoxRootProps<T> {
-    readonly orientation?: "vertical" | "horizontal";
-    readonly onRootDrop: (p: DropEventParams) => void;
-    readonly accepted: string[];
-    readonly grid: Grid<T>;
+  readonly orientation?: "vertical" | "horizontal";
+  readonly onRootDrop: (p: DropEventParams) => void;
+  readonly accepted: string[];
+  readonly grid: Grid<T>;
 }
-export declare function GridBoxRoot<T>({ grid, orientation, accepted, onRootDrop, children, }: PropsWithChildren<GridBoxRootProps<T>>): import("react/jsx-runtime").JSX.Element;
+export declare function GridBoxRoot<T>({
+  grid,
+  orientation,
+  accepted,
+  onRootDrop,
+  children,
+}: PropsWithChildren<GridBoxRootProps<T>>): import("react/jsx-runtime").JSX.Element;

package/dist/grid-box/root.js

@@ -3,6 +3,15 @@ import { useMemo } from "react";
 import { Root } from "../listbox/root";
 import { GridProvider } from "../grid-provider/provider";
 import { GridBoxContext } from "./context";
-export function GridBoxRoot({ grid, orientation = "vertical", accepted, onRootDrop, children, }) {
-    return (_jsx(GridProvider, { value: grid, children: _jsx(GridBoxContext.Provider, { value: useMemo(() => ({ accepted, orientation, onRootDrop }), [accepted, onRootDrop, orientation]), children: _jsx(Root, { orientation: orientation, children: children }) }) }));
+export function GridBoxRoot({ grid, orientation = "vertical", accepted, onRootDrop, children }) {
+  return _jsx(GridProvider, {
+    value: grid,
+    children: _jsx(GridBoxContext.Provider, {
+      value: useMemo(
+        () => ({ accepted, orientation, onRootDrop }),
+        [accepted, onRootDrop, orientation],
+      ),
+      children: _jsx(Root, { orientation: orientation, children: children }),
+    }),
+  });
 }

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

@@ -1,18 +1,21 @@
 import type { AggModelFn, DropEventParams, Grid } from "../+types.js";
 import type { GridBoxItem } from "./+types.js";
 export interface UseAggregationBoxItemsProps<T> {
-    readonly grid: Grid<T>;
-    readonly orientation?: "horizontal" | "vertical";
+  readonly grid: Grid<T>;
+  readonly orientation?: "horizontal" | "vertical";
 }
-export declare function useAggregationBoxItems<T>({ grid, orientation }: UseAggregationBoxItemsProps<T>): {
-    rootProps: {
-        accepted: string[];
-        onRootDrop: (p: DropEventParams) => void;
-        orientation: "horizontal" | "vertical" | undefined;
-        grid: Grid<T>;
-    };
-    items: GridBoxItem<{
-        id: string;
-        agg: AggModelFn<T>;
-    }>[];
+export declare function useAggregationBoxItems<T>({
+  grid,
+  orientation,
+}: UseAggregationBoxItemsProps<T>): {
+  rootProps: {
+    accepted: string[];
+    onRootDrop: (p: DropEventParams) => void;
+    orientation: "horizontal" | "vertical" | undefined;
+    grid: Grid<T>;
+  };
+  items: GridBoxItem<{
+    id: string;
+    agg: AggModelFn<T>;
+  }>[];
 };

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

@@ -1,62 +1,61 @@
 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], 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 }));
-        }
+  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 useMemo(() => {
-        return {
-            rootProps: {
-                accepted: [`${gridId}-agg`],
-                onRootDrop,
-                orientation,
-                grid,
-            },
-            items,
-        };
-    }, [grid, gridId, items, onRootDrop, orientation]);
+    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]);
 }

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

@@ -2,34 +2,44 @@ 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;
+  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: OnActionParams<T>) => void;
-    readonly onDelete?: (c: OnActionParams<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,78 +1,90 @@
 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, 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 src = p.state.siteLocalData?.[columnId];
-                    const target = c;
-                    const dragIndex = columns.findIndex((x) => x.id === src.id);
-                    const overIndex = columns.findIndex((x) => x.id === c.id);
-                    const isBefore = overIndex < dragIndex;
-                    if (overIndex === dragIndex)
-                        return;
-                    onDrop?.({ src, target, isBefore });
-                },
-            };
-        });
-    }, [
-        base.uiHints?.aggDefault,
-        base.uiHints?.aggsAllowed?.length,
-        base.uiHints?.rowGroupable,
-        columns,
-        dragPlaceholder,
-        draggable,
-        gridId,
-        itemFilter,
-        onAction,
-        onDelete,
-        onDrop,
-    ]);
-    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 src = p.state.siteLocalData?.[columnId];
+            const target = c;
+            const dragIndex = columns.findIndex((x) => x.id === src.id);
+            const overIndex = columns.findIndex((x) => x.id === c.id);
+            const isBefore = overIndex < dragIndex;
+            if (overIndex === dragIndex) return;
+            onDrop?.({ src, target, isBefore });
+          },
+        };
+      });
+  }, [
+    base.uiHints?.aggDefault,
+    base.uiHints?.aggsAllowed?.length,
+    base.uiHints?.rowGroupable,
+    columns,
+    dragPlaceholder,
+    draggable,
+    gridId,
+    itemFilter,
+    onAction,
+    onDelete,
+    onDrop,
+  ]);
+  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,17 +2,22 @@ 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 grid: Grid<T>;
+  readonly orientation?: "horizontal" | "vertical";
+  readonly dragPlaceholder?: (c: RowGroupModelItem<T>) => ReactNode;
+  readonly hideColumnOnGroup?: boolean;
 }
-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>>[];
+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>>[];
 };