thread-ui 0.16.5 → 0.17.0

package/dist/components/data-input/reorderable/reorderable-groups/reorderable-groups.js

@@ -0,0 +1,135 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useId, useMemo } from 'react';
+import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors, } from '@dnd-kit/core';
+import { SortableContext } from '@dnd-kit/sortable';
+import { css } from '../../../../styled-system/css';
+import { InputWrapper } from '../../shared/input-wrapper';
+import { SortableItem, applyOrder, defaultGetItemLabel, layoutRecipe, layoutStrategies, screenReaderInstructions, serializeReorderableGroups, } from '../shared';
+import { useLatestRef } from '../../../../internal';
+import { GroupTitle } from './group-title';
+import { SortableGroup } from './sortable-group';
+import { defaultGetGroupLabel, findGroupIndex, groupKey, itemKey, itemsOf, nodeKind, withItems, } from './group-utils';
+import { useGroupDrag } from './use-group-drag';
+const styles = {
+    root: css({
+        width: '100%',
+    }),
+    columns: css({
+        display: 'grid',
+        gridTemplateColumns: 'max-content minmax(0, 1fr)',
+        columnGap: '2',
+        width: '100%',
+    }),
+};
+/**
+ * Controlled input of titled groups whose items can be reordered within a group and moved between groups by pointer, touch, or keyboard. Groups can be reordered too unless `sortableGroups` is `false`. Set `name` to submit the structure as JSON.
+ *
+ * @example
+ * const [tiers, setTiers] = useState(initialTiers);
+ *
+ * <ReorderableGroups
+ *     name="tiers"
+ *     title="Tier List"
+ *     value={tiers}
+ *     onChange={setTiers}
+ *     ItemComponent={TierTile}
+ *     titlePosition="start"
+ *     sortableGroups={false}
+ * />
+ */
+export const ReorderableGroups = ({ value, orderProperty, ItemComponent, onChange, getItemLabel = defaultGetItemLabel, getGroupLabel = defaultGetGroupLabel, GroupTitleComponent = GroupTitle, titlePosition = 'top', sortableGroups = true, layout = 'grid', groupLayout = 'vertical', ItemsWrapper, GroupsWrapper, name, id: idProp, title, size = 'md', divider, secondaryContent, }) => {
+    // Resolve Id
+    const generatedId = useId();
+    const inputId = idProp ?? name ?? generatedId;
+    // Latest value, so delayed item callbacks never act on stale groups
+    const valueRef = useLatestRef(value);
+    // Drag State
+    const { groups, collisionDetection, keyboardCoordinates, onDragStart, onDragOver, onDragEnd, onDragCancel, } = useGroupDrag({
+        value,
+        onChange,
+        orderProperty,
+        layout,
+        groupLayout,
+    });
+    // Configure sensors for mouse, touch, and keyboard interactions
+    const sensors = useSensors(useSensor(PointerSensor, {
+        activationConstraint: { distance: 4 },
+    }), useSensor(KeyboardSensor, {
+        coordinateGetter: keyboardCoordinates,
+    }));
+    // Group keys in display order
+    const groupKeys = useMemo(() => groups.map((group) => groupKey(group.id)), [groups]);
+    // Screen reader announcements
+    const announcements = useMemo(() => {
+        const name = (key) => {
+            const groupIndex = findGroupIndex(groups, key);
+            if (groupIndex === -1)
+                return 'Item';
+            const group = groups[groupIndex];
+            if (nodeKind(key) !== 'item')
+                return getGroupLabel(group, groupIndex);
+            const items = itemsOf(group);
+            const itemIndex = items.findIndex((item) => itemKey(item.id) === key);
+            return getItemLabel(items[itemIndex], itemIndex);
+        };
+        const target = (key) => {
+            const groupIndex = findGroupIndex(groups, key);
+            if (groupIndex === -1)
+                return 'no valid position';
+            const group = groups[groupIndex];
+            const kind = nodeKind(key);
+            if (kind === 'group')
+                return `position ${groupIndex + 1} of ${groups.length}`;
+            if (kind === 'container')
+                return getGroupLabel(group, groupIndex);
+            const itemIndex = group.items.findIndex((item) => itemKey(item.id) === key);
+            return `${getGroupLabel(group, groupIndex)}, position ${itemIndex + 1} of ${group.items.length}`;
+        };
+        return {
+            onDragStart: ({ active }) => `Picked up ${name(active.id)}, at ${target(active.id)}.`,
+            onDragOver: ({ active, over }) => over
+                ? `${name(active.id)} moved to ${target(over.id)}.`
+                : `${name(active.id)} is not over a valid position.`,
+            onDragEnd: ({ active, over }) => over
+                ? `${name(active.id)} dropped at ${target(over.id)}.`
+                : `${name(active.id)} dropped.`,
+            onDragCancel: ({ active }) => `Moving cancelled. ${name(active.id)} returned to its original position.`,
+        };
+    }, [groups, getItemLabel, getGroupLabel]);
+    // Handle Item Change with memoized callback
+    const handleItemChange = useCallback((updatedItem) => {
+        const current = valueRef.current;
+        // Find the group holding the item
+        const groupIndex = current.findIndex((group) => group.items.some((item) => item.id === updatedItem.id));
+        if (groupIndex === -1)
+            return;
+        // Replace the item within its group
+        const next = [...current];
+        next[groupIndex] = withItems(current[groupIndex], itemsOf(current[groupIndex]).map((item) => item.id === updatedItem.id ? updatedItem : item));
+        // Notify parent component
+        onChange(next);
+    }, [onChange, valueRef]);
+    // Handle Item Remove with memoized callback
+    const handleItemRemove = useCallback((itemId) => {
+        const current = valueRef.current;
+        // Find the group holding the item
+        const groupIndex = current.findIndex((group) => group.items.some((item) => item.id === itemId));
+        if (groupIndex === -1)
+            return;
+        // Drop the item and re-index its group
+        const remaining = itemsOf(current[groupIndex]).filter((item) => item.id !== itemId);
+        const next = [...current];
+        next[groupIndex] = withItems(current[groupIndex], applyOrder(remaining, orderProperty));
+        // Notify parent component
+        onChange(next);
+    }, [onChange, orderProperty, valueRef]);
+    // Title column alignment only applies to the default vertical groups container
+    const subgrid = titlePosition === 'start' && groupLayout === 'vertical' && !GroupsWrapper;
+    const renderedGroups = groups.map((group, groupIndex) => {
+        const items = itemsOf(group);
+        return (_jsx(SortableGroup, { group: group, label: getGroupLabel(group, groupIndex), itemKeys: items.map((item) => itemKey(item.id)), sortable: sortableGroups, titlePosition: titlePosition, subgrid: subgrid, layout: layout, size: size, GroupTitleComponent: GroupTitleComponent, ItemsWrapper: ItemsWrapper, children: items.map((item, itemIndex) => (_jsx(SortableItem, { sortableId: itemKey(item.id), item: item, label: getItemLabel(item, itemIndex), ItemComponent: ItemComponent, onItemChange: handleItemChange, onItemRemove: handleItemRemove }, item.id))) }, group.id));
+    });
+    return (_jsx(InputWrapper, { id: inputId, title: title, size: size, divider: divider, secondaryContent: secondaryContent, children: _jsx(DndContext, { sensors: sensors, collisionDetection: collisionDetection, onDragStart: onDragStart, onDragOver: onDragOver, onDragEnd: onDragEnd, onDragCancel: onDragCancel, accessibility: { announcements, screenReaderInstructions }, children: _jsx(SortableContext, { items: groupKeys, strategy: layoutStrategies[groupLayout], children: _jsxs("div", { id: inputId, role: "group", "aria-labelledby": title ? `${inputId}-label` : undefined, className: styles.root, children: [GroupsWrapper ? (_jsx(GroupsWrapper, { children: renderedGroups })) : (_jsx("div", { className: subgrid ? styles.columns : layoutRecipe({ layout: groupLayout }), children: renderedGroups })), name && (_jsx("input", { type: "hidden", name: name, value: serializeReorderableGroups(value) }))] }) }) }) }));
+};
+//# sourceMappingURL=reorderable-groups.js.map

package/dist/components/data-input/reorderable/reorderable-groups/reorderable-groups.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reorderable-groups.js","sourceRoot":"","sources":["../../../../../src/components/data-input/reorderable/reorderable-groups/reorderable-groups.tsx"],"names":[],"mappings":"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"}

package/dist/components/data-input/reorderable/reorderable-groups/reorderable-groups.types.d.ts

@@ -0,0 +1,66 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { Prettify } from '../../../../types';
+import type { BaseInputProps, ControlledValueProps } from '../../shared/input-props.types';
+import type { FormLabelProps } from '../../shared/form-label';
+import type { DragHandleProps, NumericKeys, ReorderableItem, ReorderableItemComponent, ReorderableLayout, ReorderableWrapper } from '../shared';
+/** A titled group of items in a `ReorderableGroups`. */
+export type ReorderableGroup<T extends ReorderableItem = ReorderableItem> = {
+    id: string | number;
+    /** A `string` renders through the default title; a node renders as-is */
+    title: ReactNode;
+    items: T[];
+};
+/** Item type held by a group type. */
+export type GroupItem<G extends ReorderableGroup> = G['items'][number];
+/** Where each group's title sits relative to its items. */
+export type GroupTitlePosition = 'top' | 'start';
+/** Props passed to `GroupTitleComponent`. */
+export type ReorderableGroupTitleProps<G extends ReorderableGroup> = {
+    group: G;
+    /** Default drag handle button; `null` when `sortableGroups` is `false` */
+    dragHandle: ReactNode;
+    /** Spread onto any element to make it the group's drag handle; `undefined` when `sortableGroups` is `false` */
+    dragHandleProps?: DragHandleProps;
+    /** `true` while this group is being dragged */
+    isDragging: boolean;
+    size: NonNullable<BaseInputProps['size']>;
+};
+/** Component used to render each group's title. */
+export type ReorderableGroupTitleComponent<G extends ReorderableGroup> = ComponentType<ReorderableGroupTitleProps<G>>;
+/** Props for a `ReorderableGroups`, a controlled input whose value is a list of groups, each holding an ordered list of items. */
+export type ReorderableGroupsProps<G extends ReorderableGroup> = Prettify<{
+    /** Groups to render, in display order */
+    value: ControlledValueProps<G[], G[]>['value'];
+    /** Number property rewritten on each item with its index within its group after a move. Omit to rely on array order alone */
+    orderProperty?: NumericKeys<GroupItem<G>>;
+    /** Component rendered for each item. Receives the `item`, a default `dragHandle`, spreadable `dragHandleProps`, `onItemChange`, `onItemRemove`, and `isDragging` */
+    ItemComponent: ReorderableItemComponent<GroupItem<G>>;
+    /** Fires with all groups after an item move, a group reorder, or an item update */
+    onChange: ControlledValueProps<G[], G[]>['onChange'];
+    /**
+     * Human-readable name for an item, used in screen reader announcements and the drag handle's `aria-label`.
+     * @default `'Item {n}'`
+     */
+    getItemLabel?: (item: GroupItem<G>, index: number) => string;
+    /**
+     * Human-readable name for a group, used in announcements, the group's `aria-label`, and its drag handle.
+     * @default the `title` when it's a string, otherwise `'Group {n}'`
+     */
+    getGroupLabel?: (group: G, index: number) => string;
+    /** Renders each group's title @default drag handle followed by the `title` */
+    GroupTitleComponent?: ReorderableGroupTitleComponent<G>;
+    /** `'start'` places titles beside their items, like a tier table @default `'top'` */
+    titlePosition?: GroupTitlePosition;
+    /** Allow dragging groups to reorder them. Items still move between groups when `false` @default `true` */
+    sortableGroups?: boolean;
+    /** Arrangement of items within each group @default `'grid'` */
+    layout?: ReorderableLayout;
+    /** Arrangement of the groups @default `'vertical'` */
+    groupLayout?: ReorderableLayout;
+    /** Lays out each group's rendered items. Replaces the default `layout` styles, so pass a `layout` that matches it */
+    ItemsWrapper?: ReorderableWrapper;
+    /** Lays out the rendered groups. Replaces the default `groupLayout` styles and `titlePosition="start"` column alignment */
+    GroupsWrapper?: ReorderableWrapper;
+    /** Form field name. Submits one hidden input holding JSON; read it with `parseReorderableGroups` */
+    name?: BaseInputProps['name'];
+} & Pick<BaseInputProps, 'id' | 'title' | 'size' | 'divider'> & Pick<FormLabelProps, 'secondaryContent'>>;

package/dist/components/data-input/reorderable/reorderable-groups/reorderable-groups.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=reorderable-groups.types.js.map

package/dist/components/data-input/reorderable/reorderable-groups/reorderable-groups.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reorderable-groups.types.js","sourceRoot":"","sources":["../../../../../src/components/data-input/reorderable/reorderable-groups/reorderable-groups.types.ts"],"names":[],"mappings":""}

package/dist/components/data-input/reorderable/reorderable-groups/sortable-group.d.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+import { type ReorderableLayout, type ReorderableWrapper } from '../shared';
+import type { GroupTitlePosition, ReorderableGroup, ReorderableGroupTitleComponent, ReorderableGroupTitleProps } from './reorderable-groups.types';
+/** Props for the internal `SortableGroup` wrapper. */
+type SortableGroupProps<G extends ReorderableGroup> = {
+    group: G;
+    /** Human-readable name used in the group's `aria-label` and drag handle */
+    label: string;
+    /** Namespaced keys of this group's items, in display order */
+    itemKeys: string[];
+    sortable: boolean;
+    titlePosition: GroupTitlePosition;
+    /** Align to the parent's two-column grid for `titlePosition="start"` */
+    subgrid: boolean;
+    layout: ReorderableLayout;
+    size: ReorderableGroupTitleProps<G>['size'];
+    GroupTitleComponent: ReorderableGroupTitleComponent<G>;
+    ItemsWrapper?: ReorderableWrapper;
+    children: ReactNode;
+};
+/**
+ * Internal wrapper that makes a group sortable and turns its items area into a drop zone, so empty groups still accept items.
+ *
+ * @example
+ * <SortableGroup group={tier} label="S" itemKeys={keys} sortable titlePosition="start" subgrid layout="grid" size="md" GroupTitleComponent={GroupTitle}>
+ *   {items}
+ * </SortableGroup>
+ */
+export declare const SortableGroup: <G extends ReorderableGroup>({ group, label, itemKeys, sortable, titlePosition, subgrid, layout, size, GroupTitleComponent, ItemsWrapper, children, }: SortableGroupProps<G>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/data-input/reorderable/reorderable-groups/sortable-group.js

@@ -0,0 +1,65 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDroppable } from '@dnd-kit/core';
+import { SortableContext, useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { css, cva } from '../../../../styled-system/css';
+import { DragHandle, createDragHandleProps, layoutRecipe, layoutStrategies, } from '../shared';
+import { containerKey, groupKey } from './group-utils';
+const styles = {
+    group: cva({
+        base: {
+            position: 'relative',
+            display: 'flex',
+            gap: '2',
+            minWidth: '0',
+        },
+        variants: {
+            titlePosition: {
+                top: { flexDirection: 'column' },
+                start: { flexDirection: 'row', alignItems: 'center' },
+            },
+            subgrid: {
+                true: { display: 'grid', gridColumn: '1 / -1', gridTemplateColumns: 'subgrid' },
+                false: {},
+            },
+            dragging: {
+                true: { zIndex: 1 },
+                false: {},
+            },
+        },
+    }),
+    dropZone: css({
+        flex: '1',
+        minWidth: '0',
+        minHeight: '10',
+    }),
+};
+/**
+ * Internal wrapper that makes a group sortable and turns its items area into a drop zone, so empty groups still accept items.
+ *
+ * @example
+ * <SortableGroup group={tier} label="S" itemKeys={keys} sortable titlePosition="start" subgrid layout="grid" size="md" GroupTitleComponent={GroupTitle}>
+ *   {items}
+ * </SortableGroup>
+ */
+export const SortableGroup = ({ group, label, itemKeys, sortable, titlePosition, subgrid, layout, size, GroupTitleComponent, ItemsWrapper, children, }) => {
+    // Init DnD Kit Functionality
+    const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging, } = useSortable({
+        id: groupKey(group.id),
+        disabled: !sortable,
+    });
+    const { setNodeRef: setDropZoneRef } = useDroppable({ id: containerKey(group.id) });
+    // DnD Kit Hover/Drag Styling
+    const style = {
+        transform: CSS.Translate.toString(transform),
+        transition,
+    };
+    // Drag Handle
+    const dragHandleProps = sortable
+        ? createDragHandleProps({ attributes, listeners, setActivatorNodeRef, label })
+        : undefined;
+    const dragHandle = dragHandleProps ? (_jsx(DragHandle, { dragHandleProps: dragHandleProps, isDragging: isDragging })) : null;
+    return (_jsxs("div", { ref: setNodeRef, style: style, role: "group", "aria-label": label, className: styles.group({ titlePosition, subgrid, dragging: isDragging }), children: [_jsx("div", { children: _jsx(GroupTitleComponent, { group: group, dragHandle: dragHandle, dragHandleProps: dragHandleProps, isDragging: isDragging, size: size }) }), _jsx("div", { ref: setDropZoneRef, className: styles.dropZone, children: _jsx(SortableContext, { items: itemKeys, strategy: layoutStrategies[layout], children: ItemsWrapper ? (_jsx(ItemsWrapper, { children: children })) : (_jsx("div", { className: layoutRecipe({ layout }), children: children })) }) })] }));
+};
+//# sourceMappingURL=sortable-group.js.map

package/dist/components/data-input/reorderable/reorderable-groups/sortable-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortable-group.js","sourceRoot":"","sources":["../../../../../src/components/data-input/reorderable/reorderable-groups/sortable-group.tsx"],"names":[],"mappings":"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"}

package/dist/components/data-input/reorderable/reorderable-groups/use-group-drag.d.ts

@@ -0,0 +1,30 @@
+import { type CollisionDetection, type DragEndEvent, type DragOverEvent, type DragStartEvent, type KeyboardCoordinateGetter } from '@dnd-kit/core';
+import { type NumericKeys, type ReorderableLayout } from '../shared';
+import type { GroupItem, ReorderableGroup, ReorderableGroupsProps } from './reorderable-groups.types';
+/** Options for `useGroupDrag`. */
+type UseGroupDragOptions<G extends ReorderableGroup> = {
+    value: G[];
+    onChange: ReorderableGroupsProps<G>['onChange'];
+    orderProperty?: NumericKeys<GroupItem<G>>;
+    /** Item arrangement within a group; decides whether arrow keys sort or cross groups */
+    layout: ReorderableLayout;
+    /** Group arrangement; its axis is the one arrow keys cross groups on */
+    groupLayout: ReorderableLayout;
+};
+/**
+ * Drag state for `ReorderableGroups`. Holds a draft copy of `value` while an item is dragged so it can jump between groups mid-drag, commits once on drop, and discards on cancel. Also provides multi-container collision detection and a keyboard coordinate getter that can move items into empty groups.
+ *
+ * @example
+ * const { groups, collisionDetection, keyboardCoordinates, onDragStart, onDragOver, onDragEnd, onDragCancel } =
+ *     useGroupDrag({ value, onChange, orderProperty, layout, groupLayout });
+ */
+export declare const useGroupDrag: <G extends ReorderableGroup>({ value, onChange, orderProperty, layout, groupLayout, }: UseGroupDragOptions<G>) => {
+    groups: G[];
+    collisionDetection: CollisionDetection;
+    keyboardCoordinates: KeyboardCoordinateGetter;
+    onDragStart: ({ active }: DragStartEvent) => void;
+    onDragOver: ({ active, over }: DragOverEvent) => void;
+    onDragEnd: ({ active, over }: DragEndEvent) => void;
+    onDragCancel: () => void;
+};
+export {};

package/dist/components/data-input/reorderable/reorderable-groups/use-group-drag.js

@@ -0,0 +1,186 @@
+'use client';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { closestCenter, pointerWithin, rectIntersection, } from '@dnd-kit/core';
+import { arrayMove, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
+import { useLatestRef } from '../../../../internal';
+import { applyOrder } from '../shared';
+import { containerKey, findGroupIndex, itemKey, itemsOf, nodeKind, withItems } from './group-utils';
+// Re-index items within every group
+const orderAll = (groups, orderProperty) => orderProperty
+    ? groups.map((group) => withItems(group, applyOrder(itemsOf(group), orderProperty)))
+    : groups;
+/**
+ * Drag state for `ReorderableGroups`. Holds a draft copy of `value` while an item is dragged so it can jump between groups mid-drag, commits once on drop, and discards on cancel. Also provides multi-container collision detection and a keyboard coordinate getter that can move items into empty groups.
+ *
+ * @example
+ * const { groups, collisionDetection, keyboardCoordinates, onDragStart, onDragOver, onDragEnd, onDragCancel } =
+ *     useGroupDrag({ value, onChange, orderProperty, layout, groupLayout });
+ */
+export const useGroupDrag = ({ value, onChange, orderProperty, layout, groupLayout, }) => {
+    // Drag-time copy of `value`; `null` when idle
+    const [draft, setDraft] = useState(null);
+    const draftRef = useRef(null);
+    const valueRef = useLatestRef(value);
+    // Collision bookkeeping for cross-group moves
+    const lastOverKey = useRef(null);
+    const movedToNewGroup = useRef(false);
+    const updateDraft = useCallback((next) => {
+        draftRef.current = next;
+        setDraft(next);
+    }, []);
+    const reset = useCallback(() => {
+        updateDraft(null);
+        lastOverKey.current = null;
+    }, [updateDraft]);
+    // Layout settles one frame after a cross-group move
+    useEffect(() => {
+        const frame = requestAnimationFrame(() => {
+            movedToNewGroup.current = false;
+        });
+        return () => cancelAnimationFrame(frame);
+    }, [draft]);
+    // Groups to render: the draft while dragging an item, `value` otherwise
+    const groups = draft ?? value;
+    const collisionDetection = useCallback((args) => {
+        // Groups only collide with other groups
+        if (nodeKind(args.active.id) === 'group') {
+            return closestCenter({
+                ...args,
+                droppableContainers: args.droppableContainers.filter((container) => nodeKind(container.id) === 'group'),
+            });
+        }
+        // Items collide with items and drop zones, never whole groups
+        const droppableContainers = args.droppableContainers.filter((container) => nodeKind(container.id) !== 'group');
+        const scoped = { ...args, droppableContainers };
+        const pointerHits = pointerWithin(scoped);
+        const hits = pointerHits.length > 0 ? pointerHits : rectIntersection(scoped);
+        let overKey = (hits.find((hit) => nodeKind(hit.id) === 'item') ?? hits[0])?.id;
+        if (overKey != null) {
+            // Over a drop zone with items: target the closest item inside it
+            if (nodeKind(overKey) === 'container') {
+                const current = draftRef.current ?? valueRef.current;
+                const group = current.find((candidate) => containerKey(candidate.id) === overKey);
+                const keys = new Set(group?.items.map((item) => itemKey(item.id)));
+                if (keys.size > 0) {
+                    const closest = closestCenter({
+                        ...args,
+                        droppableContainers: droppableContainers.filter((container) => keys.has(String(container.id))),
+                    });
+                    overKey = closest[0]?.id ?? overKey;
+                }
+            }
+            lastOverKey.current = overKey;
+            return [{ id: overKey }];
+        }
+        // Layout shifted after a cross-group move: hold position until it settles
+        if (movedToNewGroup.current) {
+            lastOverKey.current = args.active.id;
+        }
+        return lastOverKey.current ? [{ id: lastOverKey.current }] : [];
+    }, [valueRef]);
+    // Arrow keys along the group axis move items between groups; everything else sorts within a group
+    const keyboardCoordinates = useCallback((event, args) => {
+        const { active, droppableRects } = args.context;
+        const groupAxis = groupLayout === 'horizontal' ? 'x' : 'y';
+        const forwardKey = groupAxis === 'y' ? 'ArrowDown' : 'ArrowRight';
+        const backKey = groupAxis === 'y' ? 'ArrowUp' : 'ArrowLeft';
+        const direction = event.code === forwardKey ? 1 : event.code === backKey ? -1 : 0;
+        if (!active || direction === 0 || nodeKind(active.id) !== 'item') {
+            return sortableKeyboardCoordinates(event, args);
+        }
+        const current = draftRef.current ?? valueRef.current;
+        const fromGroup = findGroupIndex(current, active.id);
+        if (fromGroup === -1)
+            return sortableKeyboardCoordinates(event, args);
+        // Items share the group axis: only cross from the first or last item
+        const itemAxis = layout === 'vertical' ? 'y' : 'x';
+        if (itemAxis === groupAxis) {
+            const items = current[fromGroup].items;
+            const index = items.findIndex((item) => itemKey(item.id) === active.id);
+            const atEdge = direction === 1 ? index === items.length - 1 : index === 0;
+            if (!atEdge)
+                return sortableKeyboardCoordinates(event, args);
+        }
+        event.preventDefault();
+        // Jump into the adjacent group's drop zone, empty or not
+        const toGroup = current[fromGroup + direction];
+        if (!toGroup)
+            return undefined;
+        const rect = droppableRects.get(containerKey(toGroup.id));
+        return rect ? { x: rect.left, y: rect.top } : undefined;
+    }, [layout, groupLayout, valueRef]);
+    const onDragStart = useCallback(({ active }) => {
+        if (nodeKind(active.id) === 'item') {
+            updateDraft(valueRef.current);
+        }
+    }, [updateDraft, valueRef]);
+    const onDragOver = useCallback(({ active, over }) => {
+        const current = draftRef.current;
+        if (!current || !over || nodeKind(active.id) !== 'item')
+            return;
+        // Only cross-group moves happen mid-drag; in-group sorting is visual until drop
+        const fromGroup = findGroupIndex(current, active.id);
+        const toGroup = findGroupIndex(current, over.id);
+        if (fromGroup === -1 || toGroup === -1 || fromGroup === toGroup)
+            return;
+        const fromItems = itemsOf(current[fromGroup]);
+        const toItems = itemsOf(current[toGroup]);
+        const activeIndex = fromItems.findIndex((item) => itemKey(item.id) === active.id);
+        if (activeIndex === -1)
+            return;
+        // Insert before the hovered item, or at the end when over the drop zone
+        const overIndex = toItems.findIndex((item) => itemKey(item.id) === over.id);
+        const insertAt = overIndex === -1 ? toItems.length : overIndex;
+        const next = [...current];
+        next[fromGroup] = withItems(current[fromGroup], fromItems.filter((_, index) => index !== activeIndex));
+        next[toGroup] = withItems(current[toGroup], [
+            ...toItems.slice(0, insertAt),
+            fromItems[activeIndex],
+            ...toItems.slice(insertAt),
+        ]);
+        movedToNewGroup.current = true;
+        updateDraft(next);
+    }, [updateDraft]);
+    const onDragEnd = useCallback(({ active, over }) => {
+        const current = draftRef.current ?? valueRef.current;
+        reset();
+        // Dropped outside any target: discard the draft
+        if (!over)
+            return;
+        // Group reorder
+        if (nodeKind(active.id) === 'group') {
+            const fromIndex = findGroupIndex(current, active.id);
+            const toIndex = findGroupIndex(current, over.id);
+            if (fromIndex !== -1 && toIndex !== -1 && fromIndex !== toIndex) {
+                onChange(arrayMove(current, fromIndex, toIndex));
+            }
+            return;
+        }
+        // Item: settle its final position within its (possibly new) group
+        const groupIndex = findGroupIndex(current, active.id);
+        if (groupIndex === -1)
+            return;
+        const items = itemsOf(current[groupIndex]);
+        const fromIndex = items.findIndex((item) => itemKey(item.id) === active.id);
+        const overIndex = items.findIndex((item) => itemKey(item.id) === over.id);
+        let next = current;
+        if (overIndex !== -1 && overIndex !== fromIndex) {
+            next = [...current];
+            next[groupIndex] = withItems(current[groupIndex], arrayMove(items, fromIndex, overIndex));
+        }
+        // Nothing moved
+        if (next === valueRef.current)
+            return;
+        onChange(orderAll(next, orderProperty));
+    }, [onChange, orderProperty, reset, valueRef]);
+    return {
+        groups,
+        collisionDetection,
+        keyboardCoordinates,
+        onDragStart,
+        onDragOver,
+        onDragEnd,
+        onDragCancel: reset,
+    };
+};
+//# sourceMappingURL=use-group-drag.js.map

package/dist/components/data-input/reorderable/reorderable-groups/use-group-drag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-group-drag.js","sourceRoot":"","sources":["../../../../../src/components/data-input/reorderable/reorderable-groups/use-group-drag.ts"],"names":[],"mappings":"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"}

package/dist/components/data-input/reorderable/reorderable-list/index.d.ts

@@ -0,0 +1,2 @@
+export type { ReorderableListProps } from './reorderable-list.types';
+export { ReorderableList } from './reorderable-list';

package/dist/components/data-input/reorderable/reorderable-list/index.js

@@ -0,0 +1,2 @@
+export { ReorderableList } from './reorderable-list';
+//# sourceMappingURL=index.js.map

package/dist/components/data-input/reorderable/reorderable-list/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/data-input/reorderable/reorderable-list/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/data-input/reorderable/reorderable-list/reorderable-list.d.ts

@@ -0,0 +1,19 @@
+import { type ReorderableItem } from '../shared';
+import type { ReorderableListProps } from './reorderable-list.types';
+/**
+ * Controlled list input whose items can be reordered by pointer, touch, or keyboard. Each item renders through `ItemComponent`, which receives a default `dragHandle` or `dragHandleProps` to make any element the handle. Set `name` to submit the order with a form.
+ *
+ * @example
+ * const [tasks, setTasks] = useState(initialTasks);
+ *
+ * <ReorderableList
+ *     name="taskOrder"
+ *     title="Tasks"
+ *     value={tasks}
+ *     orderProperty="order"
+ *     ItemComponent={TaskRow}
+ *     onChange={setTasks}
+ *     getItemLabel={(task) => task.title}
+ * />
+ */
+export declare const ReorderableList: <T extends ReorderableItem>({ value, orderProperty, ItemComponent, onChange, getItemLabel, layout, ItemsWrapper, id: idProp, name, formValue, title, size, divider, secondaryContent, }: ReorderableListProps<T>) => import("react/jsx-runtime").JSX.Element;