@almadar/ui 4.50.0 → 4.50.1

package/dist/avl/index.cjs

@@ -24914,10 +24914,12 @@ function useDataDnd(args) {
     dropEvent,
     reorderEvent,
     dndItemIdField = "id",
+    dndRoot,
     items,
     layout
   } = args;
-  const enabled = Boolean(dragGroup || accepts || sortable$1);
+  const isZone = Boolean(dragGroup || accepts || sortable$1);
+  const enabled = isZone || Boolean(dndRoot);
   const eventBus = useEventBus();
   const parentRoot = React93__namespace.default.useContext(RootCtx);
   const isRoot = enabled && parentRoot === null;
@@ -25055,7 +25057,8 @@ function useDataDnd(args) {
       Box,
       {
         ref: setNodeRef,
-        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg" : void 0,
+        "data-dnd-zone": ownGroup,
+        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
         children
       }
     );
@@ -25068,13 +25071,17 @@ function useDataDnd(args) {
     (children) => {
       if (!enabled) return children;
       const strategy = layout === "grid" ? sortable.rectSortingStrategy : sortable.verticalListSortingStrategy;
+      if (!isZone) {
+        if (!isRoot) return children;
+        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection: core$1.closestCenter, onDragEnd: handleDragEnd, children }) });
+      }
       const inner = /* @__PURE__ */ jsxRuntime.jsx(DropZoneShell, { children: /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items: itemIds, strategy, children }) });
       if (isRoot) {
         return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection: core$1.closestCenter, onDragEnd: handleDragEnd, children: inner }) });
       }
       return inner;
     },
-    [enabled, layout, sensors, handleDragEnd, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, handleDragEnd, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,
@@ -25161,7 +25168,8 @@ function DataGrid({
   sortable,
   dropEvent,
   reorderEvent,
-  dndItemIdField
+  dndItemIdField,
+  dndRoot
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -25177,7 +25185,8 @@ function DataGrid({
     sortable,
     dropEvent,
     reorderEvent,
-    dndItemIdField
+    dndItemIdField,
+    dndRoot
   });
   const allData = dnd.orderedItems;
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
@@ -25567,7 +25576,8 @@ function DataList({
   sortable: sortableProp,
   dropEvent,
   reorderEvent: dndReorderEvent,
-  dndItemIdField
+  dndItemIdField,
+  dndRoot
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -25582,7 +25592,8 @@ function DataList({
     sortable: sortableProp,
     dropEvent,
     reorderEvent: dndReorderEvent,
-    dndItemIdField
+    dndItemIdField,
+    dndRoot
   });
   const allData = dnd.orderedItems;
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;

package/dist/avl/index.js

@@ -24868,10 +24868,12 @@ function useDataDnd(args) {
     dropEvent,
     reorderEvent,
     dndItemIdField = "id",
+    dndRoot,
     items,
     layout
   } = args;
-  const enabled = Boolean(dragGroup || accepts || sortable);
+  const isZone = Boolean(dragGroup || accepts || sortable);
+  const enabled = isZone || Boolean(dndRoot);
   const eventBus = useEventBus();
   const parentRoot = React93__default.useContext(RootCtx);
   const isRoot = enabled && parentRoot === null;
@@ -25009,7 +25011,8 @@ function useDataDnd(args) {
       Box,
       {
         ref: setNodeRef,
-        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg" : void 0,
+        "data-dnd-zone": ownGroup,
+        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
         children
       }
     );
@@ -25022,13 +25025,17 @@ function useDataDnd(args) {
     (children) => {
       if (!enabled) return children;
       const strategy = layout === "grid" ? rectSortingStrategy : verticalListSortingStrategy;
+      if (!isZone) {
+        if (!isRoot) return children;
+        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children }) });
+      }
       const inner = /* @__PURE__ */ jsx(DropZoneShell, { children: /* @__PURE__ */ jsx(SortableContext, { items: itemIds, strategy, children }) });
       if (isRoot) {
         return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: inner }) });
       }
       return inner;
     },
-    [enabled, layout, sensors, handleDragEnd, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, handleDragEnd, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,
@@ -25115,7 +25122,8 @@ function DataGrid({
   sortable,
   dropEvent,
   reorderEvent,
-  dndItemIdField
+  dndItemIdField,
+  dndRoot
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -25131,7 +25139,8 @@ function DataGrid({
     sortable,
     dropEvent,
     reorderEvent,
-    dndItemIdField
+    dndItemIdField,
+    dndRoot
   });
   const allData = dnd.orderedItems;
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
@@ -25521,7 +25530,8 @@ function DataList({
   sortable: sortableProp,
   dropEvent,
   reorderEvent: dndReorderEvent,
-  dndItemIdField
+  dndItemIdField,
+  dndRoot
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -25536,7 +25546,8 @@ function DataList({
     sortable: sortableProp,
     dropEvent,
     reorderEvent: dndReorderEvent,
-    dndItemIdField
+    dndItemIdField,
+    dndRoot
   });
   const allData = dnd.orderedItems;
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;

package/dist/components/index.cjs

@@ -20081,10 +20081,12 @@ function useDataDnd(args) {
     dropEvent,
     reorderEvent,
     dndItemIdField = "id",
+    dndRoot,
     items,
     layout
   } = args;
-  const enabled = Boolean(dragGroup || accepts || sortable$1);
+  const isZone = Boolean(dragGroup || accepts || sortable$1);
+  const enabled = isZone || Boolean(dndRoot);
   const eventBus = useEventBus();
   const parentRoot = React75__namespace.default.useContext(RootCtx);
   const isRoot = enabled && parentRoot === null;
@@ -20222,7 +20224,8 @@ function useDataDnd(args) {
       exports.Box,
       {
         ref: setNodeRef,
-        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg" : void 0,
+        "data-dnd-zone": ownGroup,
+        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
         children
       }
     );
@@ -20235,13 +20238,17 @@ function useDataDnd(args) {
     (children) => {
       if (!enabled) return children;
       const strategy = layout === "grid" ? sortable.rectSortingStrategy : sortable.verticalListSortingStrategy;
+      if (!isZone) {
+        if (!isRoot) return children;
+        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection: core$1.closestCenter, onDragEnd: handleDragEnd, children }) });
+      }
       const inner = /* @__PURE__ */ jsxRuntime.jsx(DropZoneShell, { children: /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items: itemIds, strategy, children }) });
       if (isRoot) {
         return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection: core$1.closestCenter, onDragEnd: handleDragEnd, children: inner }) });
       }
       return inner;
     },
-    [enabled, layout, sensors, handleDragEnd, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, handleDragEnd, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,
@@ -20328,7 +20335,8 @@ function DataGrid({
   sortable,
   dropEvent,
   reorderEvent,
-  dndItemIdField
+  dndItemIdField,
+  dndRoot
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -20344,7 +20352,8 @@ function DataGrid({
     sortable,
     dropEvent,
     reorderEvent,
-    dndItemIdField
+    dndItemIdField,
+    dndRoot
   });
   const allData = dnd.orderedItems;
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
@@ -20734,7 +20743,8 @@ function DataList({
   sortable: sortableProp,
   dropEvent,
   reorderEvent: dndReorderEvent,
-  dndItemIdField
+  dndItemIdField,
+  dndRoot
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -20749,7 +20759,8 @@ function DataList({
     sortable: sortableProp,
     dropEvent,
     reorderEvent: dndReorderEvent,
-    dndItemIdField
+    dndItemIdField,
+    dndRoot
   });
   const allData = dnd.orderedItems;
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;

package/dist/components/index.js

@@ -20035,10 +20035,12 @@ function useDataDnd(args) {
     dropEvent,
     reorderEvent,
     dndItemIdField = "id",
+    dndRoot,
     items,
     layout
   } = args;
-  const enabled = Boolean(dragGroup || accepts || sortable);
+  const isZone = Boolean(dragGroup || accepts || sortable);
+  const enabled = isZone || Boolean(dndRoot);
   const eventBus = useEventBus();
   const parentRoot = React75__default.useContext(RootCtx);
   const isRoot = enabled && parentRoot === null;
@@ -20176,7 +20178,8 @@ function useDataDnd(args) {
       Box,
       {
         ref: setNodeRef,
-        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg" : void 0,
+        "data-dnd-zone": ownGroup,
+        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
         children
       }
     );
@@ -20189,13 +20192,17 @@ function useDataDnd(args) {
     (children) => {
       if (!enabled) return children;
       const strategy = layout === "grid" ? rectSortingStrategy : verticalListSortingStrategy;
+      if (!isZone) {
+        if (!isRoot) return children;
+        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children }) });
+      }
       const inner = /* @__PURE__ */ jsx(DropZoneShell, { children: /* @__PURE__ */ jsx(SortableContext, { items: itemIds, strategy, children }) });
       if (isRoot) {
         return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: inner }) });
       }
       return inner;
     },
-    [enabled, layout, sensors, handleDragEnd, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, handleDragEnd, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,
@@ -20282,7 +20289,8 @@ function DataGrid({
   sortable,
   dropEvent,
   reorderEvent,
-  dndItemIdField
+  dndItemIdField,
+  dndRoot
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -20298,7 +20306,8 @@ function DataGrid({
     sortable,
     dropEvent,
     reorderEvent,
-    dndItemIdField
+    dndItemIdField,
+    dndRoot
   });
   const allData = dnd.orderedItems;
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
@@ -20688,7 +20697,8 @@ function DataList({
   sortable: sortableProp,
   dropEvent,
   reorderEvent: dndReorderEvent,
-  dndItemIdField
+  dndItemIdField,
+  dndRoot
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -20703,7 +20713,8 @@ function DataList({
     sortable: sortableProp,
     dropEvent,
     reorderEvent: dndReorderEvent,
-    dndItemIdField
+    dndItemIdField,
+    dndRoot
   });
   const allData = dnd.orderedItems;
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;

package/dist/components/molecules/DataGrid.d.ts

@@ -103,7 +103,7 @@ export interface DataGridProps<T extends EntityRow = EntityRow> extends DataDndP
     /** Max items to show before "Show More" button. Defaults to 0 (disabled). */
     pageSize?: number;
 }
-export declare function DataGrid<T extends EntityRow = EntityRow>({ entity, fields, columns, itemActions, cols, gap, minCardWidth, className, isLoading, error, imageField, selectable, selectionEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, renderItem: schemaRenderItem, dragGroup, accepts, sortable, dropEvent, reorderEvent, dndItemIdField, }: DataGridProps<T>): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
+export declare function DataGrid<T extends EntityRow = EntityRow>({ entity, fields, columns, itemActions, cols, gap, minCardWidth, className, isLoading, error, imageField, selectable, selectionEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, renderItem: schemaRenderItem, dragGroup, accepts, sortable, dropEvent, reorderEvent, dndItemIdField, dndRoot, }: DataGridProps<T>): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
 export declare namespace DataGrid {
     var displayName: string;
 }

package/dist/components/molecules/DataList.d.ts

@@ -117,7 +117,7 @@ export interface DataListProps<T extends EntityRow = EntityRow> extends DataDndP
     /** Max items to show before "Show More" button. Defaults to 5. Set to 0 to disable. */
     pageSize?: number;
 }
-export declare function DataList<T extends EntityRow = EntityRow>({ entity, fields, columns, itemActions, gap, variant, groupBy, senderField, currentUser, className, isLoading, error, reorderable: _reorderable, reorderEvent: _reorderEvent, swipeLeftEvent: _swipeLeftEvent, swipeLeftActions: _swipeLeftActions, swipeRightEvent: _swipeRightEvent, swipeRightActions: _swipeRightActions, longPressEvent: _longPressEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, renderItem: schemaRenderItem, dragGroup, accepts, sortable: sortableProp, dropEvent, reorderEvent: dndReorderEvent, dndItemIdField, }: DataListProps<T>): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
+export declare function DataList<T extends EntityRow = EntityRow>({ entity, fields, columns, itemActions, gap, variant, groupBy, senderField, currentUser, className, isLoading, error, reorderable: _reorderable, reorderEvent: _reorderEvent, swipeLeftEvent: _swipeLeftEvent, swipeLeftActions: _swipeLeftActions, swipeRightEvent: _swipeRightEvent, swipeRightActions: _swipeRightActions, longPressEvent: _longPressEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, renderItem: schemaRenderItem, dragGroup, accepts, sortable: sortableProp, dropEvent, reorderEvent: dndReorderEvent, dndItemIdField, dndRoot, }: DataListProps<T>): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
 export declare namespace DataList {
     var displayName: string;
 }

package/dist/components/molecules/useDataDnd.d.ts

@@ -26,6 +26,15 @@ export interface DataDndProps {
     dropEvent?: EventKey;
     reorderEvent?: EventKey;
     dndItemIdField?: string;
+    /**
+     * Mark this container as the DnD root for its subtree. Use on an outer
+     * container (e.g. a data-grid hosting inner data-lists) when the container
+     * itself is NOT a drop target or sortable, but descendant zones need to
+     * share one DndContext so items can be dragged between them. Inner zones
+     * with `accepts` / `dragGroup` / `sortable` detect this root and skip
+     * creating their own DndContext.
+     */
+    dndRoot?: boolean;
 }
 interface UseDataDndArgs<T extends EntityRow> extends DataDndProps {
     items: readonly T[];

package/dist/providers/index.cjs

@@ -21326,10 +21326,12 @@ function useDataDnd(args) {
     dropEvent,
     reorderEvent,
     dndItemIdField = "id",
+    dndRoot,
     items,
     layout
   } = args;
-  const enabled = Boolean(dragGroup || accepts || sortable$1);
+  const isZone = Boolean(dragGroup || accepts || sortable$1);
+  const enabled = isZone || Boolean(dndRoot);
   const eventBus = useEventBus();
   const parentRoot = React81__namespace.default.useContext(RootCtx);
   const isRoot = enabled && parentRoot === null;
@@ -21467,7 +21469,8 @@ function useDataDnd(args) {
       Box,
       {
         ref: setNodeRef,
-        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg" : void 0,
+        "data-dnd-zone": ownGroup,
+        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
         children
       }
     );
@@ -21480,13 +21483,17 @@ function useDataDnd(args) {
     (children) => {
       if (!enabled) return children;
       const strategy = layout === "grid" ? sortable.rectSortingStrategy : sortable.verticalListSortingStrategy;
+      if (!isZone) {
+        if (!isRoot) return children;
+        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection: core$1.closestCenter, onDragEnd: handleDragEnd, children }) });
+      }
       const inner = /* @__PURE__ */ jsxRuntime.jsx(DropZoneShell, { children: /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items: itemIds, strategy, children }) });
       if (isRoot) {
         return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection: core$1.closestCenter, onDragEnd: handleDragEnd, children: inner }) });
       }
       return inner;
     },
-    [enabled, layout, sensors, handleDragEnd, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, handleDragEnd, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,
@@ -21573,7 +21580,8 @@ function DataGrid({
   sortable,
   dropEvent,
   reorderEvent,
-  dndItemIdField
+  dndItemIdField,
+  dndRoot
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -21589,7 +21597,8 @@ function DataGrid({
     sortable,
     dropEvent,
     reorderEvent,
-    dndItemIdField
+    dndItemIdField,
+    dndRoot
   });
   const allData = dnd.orderedItems;
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
@@ -21979,7 +21988,8 @@ function DataList({
   sortable: sortableProp,
   dropEvent,
   reorderEvent: dndReorderEvent,
-  dndItemIdField
+  dndItemIdField,
+  dndRoot
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -21994,7 +22004,8 @@ function DataList({
     sortable: sortableProp,
     dropEvent,
     reorderEvent: dndReorderEvent,
-    dndItemIdField
+    dndItemIdField,
+    dndRoot
   });
   const allData = dnd.orderedItems;
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;

package/dist/providers/index.js

@@ -21280,10 +21280,12 @@ function useDataDnd(args) {
     dropEvent,
     reorderEvent,
     dndItemIdField = "id",
+    dndRoot,
     items,
     layout
   } = args;
-  const enabled = Boolean(dragGroup || accepts || sortable);
+  const isZone = Boolean(dragGroup || accepts || sortable);
+  const enabled = isZone || Boolean(dndRoot);
   const eventBus = useEventBus();
   const parentRoot = React81__default.useContext(RootCtx);
   const isRoot = enabled && parentRoot === null;
@@ -21421,7 +21423,8 @@ function useDataDnd(args) {
       Box,
       {
         ref: setNodeRef,
-        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg" : void 0,
+        "data-dnd-zone": ownGroup,
+        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
         children
       }
     );
@@ -21434,13 +21437,17 @@ function useDataDnd(args) {
     (children) => {
       if (!enabled) return children;
       const strategy = layout === "grid" ? rectSortingStrategy : verticalListSortingStrategy;
+      if (!isZone) {
+        if (!isRoot) return children;
+        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children }) });
+      }
       const inner = /* @__PURE__ */ jsx(DropZoneShell, { children: /* @__PURE__ */ jsx(SortableContext, { items: itemIds, strategy, children }) });
       if (isRoot) {
         return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: inner }) });
       }
       return inner;
     },
-    [enabled, layout, sensors, handleDragEnd, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, handleDragEnd, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,
@@ -21527,7 +21534,8 @@ function DataGrid({
   sortable,
   dropEvent,
   reorderEvent,
-  dndItemIdField
+  dndItemIdField,
+  dndRoot
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -21543,7 +21551,8 @@ function DataGrid({
     sortable,
     dropEvent,
     reorderEvent,
-    dndItemIdField
+    dndItemIdField,
+    dndRoot
   });
   const allData = dnd.orderedItems;
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
@@ -21933,7 +21942,8 @@ function DataList({
   sortable: sortableProp,
   dropEvent,
   reorderEvent: dndReorderEvent,
-  dndItemIdField
+  dndItemIdField,
+  dndRoot
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -21948,7 +21958,8 @@ function DataList({
     sortable: sortableProp,
     dropEvent,
     reorderEvent: dndReorderEvent,
-    dndItemIdField
+    dndItemIdField,
+    dndRoot
   });
   const allData = dnd.orderedItems;
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;

package/dist/runtime/index.cjs

@@ -21095,10 +21095,12 @@ function useDataDnd(args) {
     dropEvent,
     reorderEvent,
     dndItemIdField = "id",
+    dndRoot,
     items,
     layout
   } = args;
-  const enabled = Boolean(dragGroup || accepts || sortable$1);
+  const isZone = Boolean(dragGroup || accepts || sortable$1);
+  const enabled = isZone || Boolean(dndRoot);
   const eventBus = useEventBus();
   const parentRoot = React80__namespace.default.useContext(RootCtx);
   const isRoot = enabled && parentRoot === null;
@@ -21236,7 +21238,8 @@ function useDataDnd(args) {
       Box,
       {
         ref: setNodeRef,
-        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg" : void 0,
+        "data-dnd-zone": ownGroup,
+        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
         children
       }
     );
@@ -21249,13 +21252,17 @@ function useDataDnd(args) {
     (children) => {
       if (!enabled) return children;
       const strategy = layout === "grid" ? sortable.rectSortingStrategy : sortable.verticalListSortingStrategy;
+      if (!isZone) {
+        if (!isRoot) return children;
+        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection: core$1.closestCenter, onDragEnd: handleDragEnd, children }) });
+      }
       const inner = /* @__PURE__ */ jsxRuntime.jsx(DropZoneShell, { children: /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items: itemIds, strategy, children }) });
       if (isRoot) {
         return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection: core$1.closestCenter, onDragEnd: handleDragEnd, children: inner }) });
       }
       return inner;
     },
-    [enabled, layout, sensors, handleDragEnd, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, handleDragEnd, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,
@@ -21342,7 +21349,8 @@ function DataGrid({
   sortable,
   dropEvent,
   reorderEvent,
-  dndItemIdField
+  dndItemIdField,
+  dndRoot
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -21358,7 +21366,8 @@ function DataGrid({
     sortable,
     dropEvent,
     reorderEvent,
-    dndItemIdField
+    dndItemIdField,
+    dndRoot
   });
   const allData = dnd.orderedItems;
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
@@ -21748,7 +21757,8 @@ function DataList({
   sortable: sortableProp,
   dropEvent,
   reorderEvent: dndReorderEvent,
-  dndItemIdField
+  dndItemIdField,
+  dndRoot
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -21763,7 +21773,8 @@ function DataList({
     sortable: sortableProp,
     dropEvent,
     reorderEvent: dndReorderEvent,
-    dndItemIdField
+    dndItemIdField,
+    dndRoot
   });
   const allData = dnd.orderedItems;
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;

package/dist/runtime/index.js

@@ -21049,10 +21049,12 @@ function useDataDnd(args) {
     dropEvent,
     reorderEvent,
     dndItemIdField = "id",
+    dndRoot,
     items,
     layout
   } = args;
-  const enabled = Boolean(dragGroup || accepts || sortable);
+  const isZone = Boolean(dragGroup || accepts || sortable);
+  const enabled = isZone || Boolean(dndRoot);
   const eventBus = useEventBus();
   const parentRoot = React80__default.useContext(RootCtx);
   const isRoot = enabled && parentRoot === null;
@@ -21190,7 +21192,8 @@ function useDataDnd(args) {
       Box,
       {
         ref: setNodeRef,
-        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg" : void 0,
+        "data-dnd-zone": ownGroup,
+        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
         children
       }
     );
@@ -21203,13 +21206,17 @@ function useDataDnd(args) {
     (children) => {
       if (!enabled) return children;
       const strategy = layout === "grid" ? rectSortingStrategy : verticalListSortingStrategy;
+      if (!isZone) {
+        if (!isRoot) return children;
+        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children }) });
+      }
       const inner = /* @__PURE__ */ jsx(DropZoneShell, { children: /* @__PURE__ */ jsx(SortableContext, { items: itemIds, strategy, children }) });
       if (isRoot) {
         return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: inner }) });
       }
       return inner;
     },
-    [enabled, layout, sensors, handleDragEnd, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, handleDragEnd, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,
@@ -21296,7 +21303,8 @@ function DataGrid({
   sortable,
   dropEvent,
   reorderEvent,
-  dndItemIdField
+  dndItemIdField,
+  dndRoot
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -21312,7 +21320,8 @@ function DataGrid({
     sortable,
     dropEvent,
     reorderEvent,
-    dndItemIdField
+    dndItemIdField,
+    dndRoot
   });
   const allData = dnd.orderedItems;
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
@@ -21702,7 +21711,8 @@ function DataList({
   sortable: sortableProp,
   dropEvent,
   reorderEvent: dndReorderEvent,
-  dndItemIdField
+  dndItemIdField,
+  dndRoot
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -21717,7 +21727,8 @@ function DataList({
     sortable: sortableProp,
     dropEvent,
     reorderEvent: dndReorderEvent,
-    dndItemIdField
+    dndItemIdField,
+    dndRoot
   });
   const allData = dnd.orderedItems;
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "4.50.0",
+  "version": "4.50.1",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [