@botiverse/raft-ui 0.35.1 → 0.36.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +58 -0
- package/dist/foundation.css +4 -1
- package/dist/{inbox-item-CQJIhaym.d.mts → inbox-item-B8eXIikq.d.mts} +73 -1
- package/dist/{inbox-item-Cgu0ERol.mjs → inbox-item-BB6vO4PO.mjs} +795 -7
- package/dist/index.d.mts +50 -8
- package/dist/index.mjs +291 -138
- package/dist/styles.css +32 -0
- package/dist/tokens.json +14 -0
- package/dist/wip.d.mts +341 -4
- package/dist/wip.mjs +253 -2
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { cn } from "./cn.mjs";
|
|
2
|
-
import { $ as
|
|
2
|
+
import { $ as MessageListDateDivider, $i as DialogContent, $n as PreviewCardContent, $r as DropdownMenuItemLabel, $t as MessageReactionTooltipNameText, Aa as controlIconInset, Ai as ListRow, An as MessageItem, Ar as PopoverPopup, At as MessageMultiSelectToolbarActions, B as useDragSiblingTransition, Bi as ListRowValue, Bn as RadioGroupItem, Bt as inlineChip, C as DropPlaceholder, Ca as withOverlayLayer, Ci as ScrollAreaCorner, Cn as MessageItemEdited, Cr as PopoverArrow, Ct as messageEmbed, Da as tv, Di as Checkbox, Dn as MessageItemAvatarSlot, Dr as PopoverContent, Dt as MessageMultiSelect, Ea as ThemeStateContext, Ei as ScrollAreaViewport, En as MessageItemSearchMatch, Er as PopoverClose, Et as MessageTextSelectionToolbarSeparator, Fi as ListRowGroup, Fn as AvatarGroup, Fr as PopoverViewport, Ft as MessageReferencePending, G as SILENT_DRAG_ANNOUNCEMENTS, Gi as TooltipTrigger, Gr as MobileNavRoot, Gt as MessageReactionGlyph, Hi as TooltipContent, Hn as InputGroupAddon, Ht as MessageReactionChip, I as DragLift, Ii as ListRowIcon, In as AvatarGroupCount, It as MessageReferenceReadMark, Jr as DropdownMenuCheckboxItemIndicator, Jt as MessageReactionQuickButton, K as createDragAnnouncements, Ki as Badge, Kr as DropdownMenu, Kt as MessageReactionPickerContent, Li as ListRowMeta, Ln as AvatarImage, Lt as MessageReferenceSuffix, Ma as headEdges, Mi as ListRowBottom, Mn as Avatar, Mr as PopoverSeparator, Na as decisionWidth, Ni as ListRowChevron, Nn as AvatarBadge, Nr as PopoverTitle, Nt as MessageReferenceIndicator, Oa as stackedActions, Oi as CheckboxIndicator, On as MessageItemContinuationTime, Or as PopoverDescription, Ot as MessageMultiSelectCheckbox, Pi as ListRowDescription, Pn as AvatarFallback, Pr as PopoverTrigger, Pt as MessageReferenceLabel, Qi as DialogClose, Qr as DropdownMenuItemCount, Qt as MessageReactionTooltipName, Ri as ListRowTitle, Rn as RadioGroup, Rt as MessageReferenceText, Sa as useParentOverlayKind, Si as ScrollAreaContent, Sn as MessageItemContent, St as MessageEmbedHeader, Ta as useTheme, Ti as ScrollAreaThumb, Tn as MessageItemFooter, Tt as MessageTextSelectionToolbarButton, U as drag, Ui as TooltipPortal, Un as InputGroupInput, Ur as MobileNavItem, Ut as MessageReactionCount, V as useLiftContainer, Vi as Tooltip, Vn as InputGroup, Vt as MessageReactionAddButton, Wi as TooltipProvider, Wn as useOverflowTitle, Wr as MobileNavLabel, Wt as MessageReactionErrorIndicator, Xi as Dialog, Xr as DropdownMenuFooter, Xt as MessageReactionTooltipContent, Yi as useMobileViewport, Yn as PreviewCard, Yr as DropdownMenuContent, Yt as MessageReactionQuickRow, Zi as DialogBody, Zn as PreviewCardArrow, Zr as DropdownMenuItem, Zt as MessageReactionTooltipMeta, _ as InboxItemTrailing, _a as Button, _i as PanelHeaderRoot, _n as MessageItemSenderButton, _t as MessageQuotedPreviewTimestamp, a as InboxItemContext, aa as DialogOverlay, ai as DropdownMenuRadioItem, an as MessageItemSavedIndicator, ar as PreviewCardPopup, at as MessageQuotedPreviewAttachment, b as useLatestRef, ba as defaultNativeButton, bi as PanelSection, bn as MessageItemAttachments, bt as MessageEmbedContent, c as InboxItemLeading, ca as DialogSurface, ci as DropdownMenuShortcut, cr as PreviewCardTitle, d as InboxItemMetadata, da as PanelAction, di as DropdownMenuTrigger, dt as MessageQuotedPreviewChannel, ea as DialogDescription, ei as DropdownMenuLabel, en as MessageReactionTooltipNames, er as PreviewCardDescription, et as MessageListEndFade, f as InboxItemSelection, fa as panelToggleAction, fi as Kbd, fn as MessageItemHeader, ft as MessageQuotedPreviewContent, g as InboxItemTitle, ga as DialogSheetReset, gi as PanelFooter, gn as MessageItemSenderBadges, gt as MessageQuotedPreviewThread, h as InboxItemTimestamp, ha as textLinkVariants, hi as PanelBody, hn as MessageItemSender, ht as MessageQuotedPreviewText, i as InboxItemContent, ia as DialogNav, ii as DropdownMenuRadioGroup, in as MessageItemReadReceipt, it as MessageQuotedPreview, ja as headEdgePull, ji as ListRowBody, jn as searchHit, jr as PopoverPortal, jt as MessageReferenceChip, k as useDragSensors, ka as useStackedActions, ki as PRESENCE_COLOR, kn as MessageItemGutter, kr as PopoverHeader, kt as MessageMultiSelectToolbar, l as InboxItemMarks, la as DialogTitle, li as DropdownMenuSubmenu, lr as PreviewCardTrigger, lt as MessageQuotedPreviewAuthorMeta, m as InboxItemSubtitle, ma as TextLinkExternalIcon, mi as Panel, mn as MessageItemMeta, mt as MessageQuotedPreviewLoading, n as InboxItemActions, ni as DropdownMenuPopup, nn as MessageItemBadge, nt as MessageListNotice, o as InboxItemHeading, oa as DialogPortal, oi as DropdownMenuRadioItemIndicator, on as MessageItemToolbar, or as PreviewCardPortal, ot as MessageQuotedPreviewAttachments, p as InboxItemSender, pa as TextLink, pi as KbdGroup, pn as MessageItemInlineStatus, pt as MessageQuotedPreviewHeader, q as dragInstructions, qr as DropdownMenuCheckboxItem, qt as MessageReactionPickerStatic, r as InboxItemBody, ra as DialogHeader, ri as DropdownMenuPortal, rn as MessageItemBadgeSeparator, rr as PreviewCardHeader, rt as MessageList, s as InboxItemHoverTarget, si as DropdownMenuSeparator, sn as MessageItemToolbarButton, sr as PreviewCardSeparator, st as MessageQuotedPreviewAuthor, t as InboxItem, ta as DialogFooter, tn as MessageReactionTooltipSeparator, tt as MessageListHistoryLimited, u as InboxItemMessage, ua as DialogTrigger, ui as DropdownMenuSubmenuTrigger, ut as MessageQuotedPreviewAuthorName, v as InboxItemTrigger, va as buttonVariants, vi as PanelScrollContent, vn as MessageItemSenderGroup, vt as MessageQuotedPreviewUnavailable, wa as useThemeScopeProps, wi as ScrollAreaScrollbar, wn as MessageItemEmbedded, wr as PopoverBackdrop, wt as MessageTextSelectionToolbar, x as Skeleton, xi as ScrollArea, xn as MessageItemBody, xr as Popover, xt as MessageEmbedFooter, ya as Spinner, yi as PanelScrollViewport, yn as MessageItemTime, yt as MessageEmbed, zi as ListRowTop, zn as RadioGroupIndicator, zt as MessageReferenceUnavailable } from "./inbox-item-BB6vO4PO.mjs";
|
|
3
3
|
import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
|
|
4
4
|
import { AlertTriangle, Bell, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, CircleCheck, Copy, FileText, Image, Info, TriangleAlert, Upload, X, Zap } from "lucide-react";
|
|
5
5
|
import { Children, cloneElement, createContext, createElement, isValidElement, use, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
|
|
@@ -13,7 +13,7 @@ import { Collapsible } from "@base-ui/react/collapsible";
|
|
|
13
13
|
import { ContextMenu as ContextMenu$1 } from "@base-ui/react";
|
|
14
14
|
import { useHotkey } from "@tanstack/react-hotkeys";
|
|
15
15
|
import { Popover as Popover$1 } from "@base-ui/react/popover";
|
|
16
|
-
import { DndContext,
|
|
16
|
+
import { DndContext, KeyboardCode, closestCenter, closestCorners, getFirstCollision, pointerWithin, useDraggable, useDroppable } from "@dnd-kit/core";
|
|
17
17
|
import { Input as Input$1 } from "@base-ui/react/input";
|
|
18
18
|
import { Field as Field$1 } from "@base-ui/react/field";
|
|
19
19
|
import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
|
|
@@ -24,7 +24,7 @@ import { Switch as Switch$1 } from "@base-ui/react/switch";
|
|
|
24
24
|
import { Toggle } from "@base-ui/react/toggle";
|
|
25
25
|
import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
|
|
26
26
|
import { Progress as Progress$1 } from "@base-ui/react/progress";
|
|
27
|
-
import { SortableContext, arrayMove, defaultAnimateLayoutChanges, horizontalListSortingStrategy,
|
|
27
|
+
import { SortableContext, arrayMove, defaultAnimateLayoutChanges, horizontalListSortingStrategy, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
|
|
28
28
|
import { CSS } from "@dnd-kit/utilities";
|
|
29
29
|
import { Toast } from "@base-ui/react/toast";
|
|
30
30
|
import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
|
|
@@ -8127,9 +8127,9 @@ const composer = tv({ slots: {
|
|
|
8127
8127
|
"font-sans text-body font-normal text-foreground",
|
|
8128
8128
|
"placeholder:text-foreground-hint"
|
|
8129
8129
|
],
|
|
8130
|
-
toolbar: ["flex items-center justify-between", "mx-[calc(var(--control-embedded-inset)-0.75rem-1px)] gap-
|
|
8131
|
-
actions: ["flex items-center gap-
|
|
8132
|
-
meta: ["flex items-center", "gap-
|
|
8130
|
+
toolbar: ["flex items-center justify-between", "mx-[calc(var(--control-embedded-inset)-0.75rem-1px)] gap-embedded-inset"],
|
|
8131
|
+
actions: ["flex items-center gap-embedded-inset"],
|
|
8132
|
+
meta: ["flex items-center", "gap-embedded-inset"],
|
|
8133
8133
|
iconButton: [
|
|
8134
8134
|
"size-8 rounded-chip text-foreground-muted",
|
|
8135
8135
|
"disabled:border-transparent disabled:bg-transparent",
|
|
@@ -8533,10 +8533,8 @@ function ComposerAttachmentsScrollArea({ children, className, onMouseEnter, onMo
|
|
|
8533
8533
|
}
|
|
8534
8534
|
//#endregion
|
|
8535
8535
|
//#region src/components/composer/sortable-composer-attachments.tsx
|
|
8536
|
-
|
|
8537
|
-
|
|
8538
|
-
easing: "cubic-bezier(0.25, 1, 0.5, 1)"
|
|
8539
|
-
};
|
|
8536
|
+
/** Whether the lifted attachment still stands at its own index. */
|
|
8537
|
+
const SortableAttachmentsHomeContext = createContext(true);
|
|
8540
8538
|
/**
|
|
8541
8539
|
* Mixed-width flex-wrap cannot be predicted by rectSortingStrategy. Preview
|
|
8542
8540
|
* position by live DOM reorder on dragOver instead; strategy returns null so
|
|
@@ -8544,18 +8542,6 @@ const SORTABLE_TRANSITION = {
|
|
|
8544
8542
|
* @see https://github.com/clauderic/dnd-kit/issues/44
|
|
8545
8543
|
*/
|
|
8546
8544
|
const liveReorderStrategy = () => null;
|
|
8547
|
-
const restrictToHorizontalAxis = ({ transform }) => ({
|
|
8548
|
-
...transform,
|
|
8549
|
-
y: 0
|
|
8550
|
-
});
|
|
8551
|
-
const HORIZONTAL_MODIFIERS = [restrictToHorizontalAxis];
|
|
8552
|
-
const HORIZONTAL_AUTO_SCROLL = {
|
|
8553
|
-
threshold: {
|
|
8554
|
-
x: .15,
|
|
8555
|
-
y: 0
|
|
8556
|
-
},
|
|
8557
|
-
canScroll: (element) => element.scrollWidth > element.clientWidth + 1
|
|
8558
|
-
};
|
|
8559
8545
|
/**
|
|
8560
8546
|
* Prefer pointer hits; if the active droppable is still under the pointer /
|
|
8561
8547
|
* closest center, keep it so layout reflow alone cannot claim a neighbor.
|
|
@@ -8592,7 +8578,30 @@ function attachmentsById(children) {
|
|
|
8592
8578
|
});
|
|
8593
8579
|
return byId;
|
|
8594
8580
|
}
|
|
8595
|
-
function
|
|
8581
|
+
function setOrder(positions, ids) {
|
|
8582
|
+
positions.clear();
|
|
8583
|
+
ids.forEach((id, index) => positions.set(id, index));
|
|
8584
|
+
}
|
|
8585
|
+
/**
|
|
8586
|
+
* An attachment is said by its `label`, at its position. Over another
|
|
8587
|
+
* attachment the dragged one already stands where it would drop (live
|
|
8588
|
+
* reorder); with nothing under the hand it is home.
|
|
8589
|
+
*/
|
|
8590
|
+
function attachmentAnnouncementSource({ labels, home, draft }) {
|
|
8591
|
+
return {
|
|
8592
|
+
name: (id) => labels.get(String(id)) ?? "",
|
|
8593
|
+
place: (id, overId) => {
|
|
8594
|
+
const positions = overId == null ? home : draft;
|
|
8595
|
+
const index = positions.get(String(id));
|
|
8596
|
+
return index == null ? null : {
|
|
8597
|
+
place: "",
|
|
8598
|
+
position: index + 1,
|
|
8599
|
+
count: positions.size
|
|
8600
|
+
};
|
|
8601
|
+
}
|
|
8602
|
+
};
|
|
8603
|
+
}
|
|
8604
|
+
function SortableComposerAttachmentsRoot({ items, onReorder, children, messages, container, axis, strategy }) {
|
|
8596
8605
|
const dndContextId = useId();
|
|
8597
8606
|
const listRef = useRef(null);
|
|
8598
8607
|
const [activeId, setActiveId] = useState(null);
|
|
@@ -8601,11 +8610,31 @@ function SortableComposerAttachmentsRoot({ items, onReorder, children, axis, str
|
|
|
8601
8610
|
const [listMinHeight, setListMinHeight] = useState();
|
|
8602
8611
|
const draftIdsRef = useRef([]);
|
|
8603
8612
|
const lastReorderPointerRef = useRef(null);
|
|
8604
|
-
const sensors =
|
|
8613
|
+
const sensors = useDragSensors();
|
|
8614
|
+
const liftContainer = useLiftContainer(container);
|
|
8605
8615
|
const attachments = useMemo(() => attachmentsById(children), [children]);
|
|
8606
8616
|
const itemIds = useMemo(() => items.map(String), [items]);
|
|
8617
|
+
const [announced] = useState(() => ({
|
|
8618
|
+
labels: /* @__PURE__ */ new Map(),
|
|
8619
|
+
home: /* @__PURE__ */ new Map(),
|
|
8620
|
+
draft: /* @__PURE__ */ new Map()
|
|
8621
|
+
}));
|
|
8622
|
+
useLayoutEffect(() => {
|
|
8623
|
+
announced.labels.clear();
|
|
8624
|
+
for (const [id, child] of attachments) if (child.props.label != null) announced.labels.set(id, child.props.label);
|
|
8625
|
+
setOrder(announced.home, itemIds);
|
|
8626
|
+
}, [
|
|
8627
|
+
announced,
|
|
8628
|
+
attachments,
|
|
8629
|
+
itemIds
|
|
8630
|
+
]);
|
|
8631
|
+
const accessibility = useMemo(() => ({
|
|
8632
|
+
screenReaderInstructions: dragInstructions(messages),
|
|
8633
|
+
announcements: createDragAnnouncements(attachmentAnnouncementSource(announced), messages)
|
|
8634
|
+
}), [announced, messages]);
|
|
8607
8635
|
const horizontal = axis === "x";
|
|
8608
8636
|
const displayIds = activeId !== null ? draftIds : itemIds;
|
|
8637
|
+
const home = activeId === null || draftIds.indexOf(activeId) === itemIds.indexOf(activeId);
|
|
8609
8638
|
const orderedChildren = useMemo(() => displayIds.flatMap((id) => {
|
|
8610
8639
|
const child = attachments.get(id);
|
|
8611
8640
|
return child ? [child] : [];
|
|
@@ -8616,11 +8645,13 @@ function SortableComposerAttachmentsRoot({ items, onReorder, children, axis, str
|
|
|
8616
8645
|
lastReorderPointerRef.current = null;
|
|
8617
8646
|
const nextDraft = [...itemIds];
|
|
8618
8647
|
draftIdsRef.current = nextDraft;
|
|
8648
|
+
setOrder(announced.draft, nextDraft);
|
|
8619
8649
|
setDraftIds(nextDraft);
|
|
8620
8650
|
if (!horizontal && listRef.current) setListMinHeight(listRef.current.getBoundingClientRect().height);
|
|
8621
8651
|
setActiveId(id);
|
|
8622
8652
|
setOverlay(attachments.get(id)?.props.children ?? null);
|
|
8623
8653
|
}, [
|
|
8654
|
+
announced,
|
|
8624
8655
|
attachments,
|
|
8625
8656
|
horizontal,
|
|
8626
8657
|
itemIds
|
|
@@ -8636,8 +8667,9 @@ function SortableComposerAttachmentsRoot({ items, onReorder, children, axis, str
|
|
|
8636
8667
|
if (pointer && lastReorderPointerRef.current && samePointer(pointer, lastReorderPointerRef.current)) return;
|
|
8637
8668
|
if (pointer) lastReorderPointerRef.current = pointer;
|
|
8638
8669
|
draftIdsRef.current = next;
|
|
8670
|
+
setOrder(announced.draft, next);
|
|
8639
8671
|
setDraftIds(next);
|
|
8640
|
-
}, []);
|
|
8672
|
+
}, [announced]);
|
|
8641
8673
|
const clearDrag = useCallback(() => {
|
|
8642
8674
|
lastReorderPointerRef.current = null;
|
|
8643
8675
|
draftIdsRef.current = [];
|
|
@@ -8653,13 +8685,12 @@ function SortableComposerAttachmentsRoot({ items, onReorder, children, axis, str
|
|
|
8653
8685
|
onReorder(draftIdsRef.current);
|
|
8654
8686
|
clearDrag();
|
|
8655
8687
|
}, [clearDrag, onReorder]);
|
|
8656
|
-
const modifiers = horizontal ? HORIZONTAL_MODIFIERS : void 0;
|
|
8657
8688
|
return /* @__PURE__ */ jsxs(DndContext, {
|
|
8658
8689
|
id: dndContextId,
|
|
8690
|
+
accessibility,
|
|
8659
8691
|
sensors,
|
|
8660
8692
|
collisionDetection: sortableCollisionDetection,
|
|
8661
|
-
|
|
8662
|
-
autoScroll: horizontal ? HORIZONTAL_AUTO_SCROLL : false,
|
|
8693
|
+
autoScroll: false,
|
|
8663
8694
|
onDragStart: handleDragStart,
|
|
8664
8695
|
onDragOver: handleDragOver,
|
|
8665
8696
|
onDragCancel: handleDragCancel,
|
|
@@ -8672,15 +8703,15 @@ function SortableComposerAttachmentsRoot({ items, onReorder, children, axis, str
|
|
|
8672
8703
|
children: /* @__PURE__ */ jsx(SortableContext, {
|
|
8673
8704
|
items: displayIds,
|
|
8674
8705
|
strategy,
|
|
8675
|
-
children:
|
|
8706
|
+
children: /* @__PURE__ */ jsx(SortableAttachmentsHomeContext, {
|
|
8707
|
+
value: home,
|
|
8708
|
+
children: orderedChildren
|
|
8709
|
+
})
|
|
8676
8710
|
})
|
|
8677
|
-
}), /* @__PURE__ */ jsx(
|
|
8678
|
-
|
|
8679
|
-
|
|
8680
|
-
children: activeId && overlay ?
|
|
8681
|
-
className: "w-max max-w-full shrink-0 cursor-grabbing",
|
|
8682
|
-
children: overlay
|
|
8683
|
-
}) : null
|
|
8711
|
+
}), /* @__PURE__ */ jsx(DragLift, {
|
|
8712
|
+
className: "rounded-control",
|
|
8713
|
+
container: liftContainer,
|
|
8714
|
+
children: activeId && overlay ? overlay : null
|
|
8684
8715
|
})]
|
|
8685
8716
|
});
|
|
8686
8717
|
}
|
|
@@ -8701,34 +8732,39 @@ function SortableComposerAttachmentsScroll(props) {
|
|
|
8701
8732
|
}) });
|
|
8702
8733
|
}
|
|
8703
8734
|
/**
|
|
8704
|
-
*
|
|
8705
|
-
*
|
|
8706
|
-
*
|
|
8707
|
-
*
|
|
8735
|
+
* The lifted attachment's own slot stays in the flex flow: at 40% while it is
|
|
8736
|
+
* still home, the dashed place once it stands anywhere else. DragLift holds
|
|
8737
|
+
* the copy that follows the hand; the root reads these `children` for it.
|
|
8738
|
+
* Live draft reorder moves this slot to the drop index; wrap skips strategy
|
|
8739
|
+
* transforms so siblings FLIP via layout instead of wrong gaps.
|
|
8708
8740
|
*/
|
|
8709
8741
|
function SortableComposerAttachment({ id, label, children }) {
|
|
8742
|
+
const home = use(SortableAttachmentsHomeContext);
|
|
8743
|
+
const siblingTransition = useDragSiblingTransition();
|
|
8710
8744
|
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
|
8711
8745
|
id,
|
|
8712
8746
|
animateLayoutChanges: defaultAnimateLayoutChanges,
|
|
8713
|
-
transition:
|
|
8747
|
+
transition: siblingTransition
|
|
8714
8748
|
});
|
|
8715
8749
|
const { role: _sortableRole, tabIndex: _sortableTabIndex, ...sortableAttributes } = attributes;
|
|
8716
8750
|
const style = {
|
|
8717
8751
|
transform: isDragging ? void 0 : CSS.Translate.toString(transform),
|
|
8718
8752
|
transition: isDragging ? void 0 : transition,
|
|
8719
|
-
opacity: isDragging ? 0 : void 0,
|
|
8720
8753
|
zIndex: isDragging ? 0 : void 0
|
|
8721
8754
|
};
|
|
8722
|
-
|
|
8755
|
+
const place = isDragging && !home;
|
|
8756
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
8723
8757
|
ref: setNodeRef,
|
|
8724
8758
|
"aria-label": `Reorder ${label}`,
|
|
8725
|
-
className: "w-max max-w-full shrink-0 cursor-grab touch-manipulation select-none [-webkit-touch-callout:none] active:cursor-grabbing",
|
|
8759
|
+
className: "relative w-max max-w-full shrink-0 cursor-grab touch-manipulation select-none [-webkit-touch-callout:none] active:cursor-grabbing data-drop-place:[&>:not([data-slot=drop-placeholder])]:invisible",
|
|
8726
8760
|
"data-dragging": isDragging ? "true" : void 0,
|
|
8761
|
+
"data-drag-origin": isDragging && home ? "" : void 0,
|
|
8762
|
+
"data-drop-place": place ? "" : void 0,
|
|
8727
8763
|
"data-slot": "sortable-composer-attachment",
|
|
8728
8764
|
style,
|
|
8729
8765
|
...sortableAttributes,
|
|
8730
8766
|
...listeners,
|
|
8731
|
-
children
|
|
8767
|
+
children: [children, place ? /* @__PURE__ */ jsx(DropPlaceholder, { className: "absolute inset-0" }) : null]
|
|
8732
8768
|
});
|
|
8733
8769
|
}
|
|
8734
8770
|
//#endregion
|
|
@@ -10615,16 +10651,80 @@ function TabsList({ className, children, variant = "default", ref, ...props }) {
|
|
|
10615
10651
|
})
|
|
10616
10652
|
});
|
|
10617
10653
|
}
|
|
10618
|
-
|
|
10654
|
+
/** What people call a tab: its `aria-label`, or its text. */
|
|
10655
|
+
function tabName(node) {
|
|
10656
|
+
if (!node) return "";
|
|
10657
|
+
return (node.getAttribute("aria-label") ?? node.textContent ?? "").replace(/\s+/g, " ").trim();
|
|
10658
|
+
}
|
|
10659
|
+
/** What people call the row a tab is in: the tab list's accessible name, or nothing. */
|
|
10660
|
+
function tabListName(node) {
|
|
10661
|
+
const list = node?.closest("[role=tablist]");
|
|
10662
|
+
if (!list) return "";
|
|
10663
|
+
const label = list.getAttribute("aria-label");
|
|
10664
|
+
if (label) return label.trim();
|
|
10665
|
+
return (list.getAttribute("aria-labelledby")?.split(/\s+/).filter(Boolean) ?? []).map((id) => list.ownerDocument.getElementById(id)?.textContent?.trim() ?? "").filter(Boolean).join(" ");
|
|
10666
|
+
}
|
|
10667
|
+
/**
|
|
10668
|
+
* A tab is said by its name, at its position in the row: a drop on a tab
|
|
10669
|
+
* takes its place, and with nothing under the hand the tab is home. Read
|
|
10670
|
+
* when dnd-kit announces, never while rendering.
|
|
10671
|
+
*/
|
|
10672
|
+
function tabAnnouncementSource(positions, nodes) {
|
|
10673
|
+
return {
|
|
10674
|
+
name: (id) => tabName(nodes.get(String(id))),
|
|
10675
|
+
place: (id, overId) => {
|
|
10676
|
+
const index = positions.get(String(overId ?? id));
|
|
10677
|
+
if (index == null) return null;
|
|
10678
|
+
return {
|
|
10679
|
+
place: tabListName(nodes.get(String(id))),
|
|
10680
|
+
position: index + 1,
|
|
10681
|
+
count: positions.size
|
|
10682
|
+
};
|
|
10683
|
+
}
|
|
10684
|
+
};
|
|
10685
|
+
}
|
|
10686
|
+
function SortableTabsList({ value, onReorder, onDragStart, messages, container, children, variant = "default", ...props }) {
|
|
10619
10687
|
const [activeId, setActiveId] = useState(void 0);
|
|
10620
10688
|
const placement = use(TabsPlacementContext);
|
|
10621
10689
|
const dndContextId = useId();
|
|
10622
|
-
const sensors =
|
|
10690
|
+
const sensors = useDragSensors();
|
|
10691
|
+
const [copies] = useState(() => /* @__PURE__ */ new Map());
|
|
10692
|
+
const [nodes] = useState(() => /* @__PURE__ */ new Map());
|
|
10693
|
+
const liftContainer = useLiftContainer(container);
|
|
10694
|
+
const selectedValue = use(TabsValueContext);
|
|
10695
|
+
const { tab: tabClassName, content: contentClassName } = tabs({
|
|
10696
|
+
variant,
|
|
10697
|
+
placement
|
|
10698
|
+
});
|
|
10623
10699
|
const tabIds = useMemo(() => value.map(String), [value]);
|
|
10700
|
+
const [positions] = useState(() => /* @__PURE__ */ new Map());
|
|
10701
|
+
useLayoutEffect(() => {
|
|
10702
|
+
positions.clear();
|
|
10703
|
+
tabIds.forEach((id, index) => positions.set(id, index));
|
|
10704
|
+
}, [positions, tabIds]);
|
|
10705
|
+
const accessibility = useMemo(() => ({
|
|
10706
|
+
screenReaderInstructions: dragInstructions(messages),
|
|
10707
|
+
announcements: createDragAnnouncements(tabAnnouncementSource(positions, nodes), messages)
|
|
10708
|
+
}), [
|
|
10709
|
+
messages,
|
|
10710
|
+
nodes,
|
|
10711
|
+
positions
|
|
10712
|
+
]);
|
|
10624
10713
|
const reorderContext = useMemo(() => ({
|
|
10625
10714
|
enabled: true,
|
|
10626
|
-
activeId
|
|
10627
|
-
|
|
10715
|
+
activeId,
|
|
10716
|
+
copies,
|
|
10717
|
+
nodes
|
|
10718
|
+
}), [
|
|
10719
|
+
activeId,
|
|
10720
|
+
copies,
|
|
10721
|
+
nodes
|
|
10722
|
+
]);
|
|
10723
|
+
const { onKeyDown: onListKeyDown, ...listProps } = props;
|
|
10724
|
+
const handleListKeyDown = useCallback((event) => {
|
|
10725
|
+
onListKeyDown?.(event);
|
|
10726
|
+
if (activeId !== void 0) event.preventBaseUIHandler?.();
|
|
10727
|
+
}, [activeId, onListKeyDown]);
|
|
10628
10728
|
const handleDragStart = useCallback(({ active }) => {
|
|
10629
10729
|
setActiveId(String(active.id));
|
|
10630
10730
|
onDragStart?.(String(active.id));
|
|
@@ -10644,27 +10744,42 @@ function SortableTabsList({ value, onReorder, onDragStart, children, variant = "
|
|
|
10644
10744
|
tabIds,
|
|
10645
10745
|
value
|
|
10646
10746
|
]);
|
|
10647
|
-
return /* @__PURE__ */
|
|
10747
|
+
return /* @__PURE__ */ jsxs(DndContext, {
|
|
10648
10748
|
id: dndContextId,
|
|
10749
|
+
accessibility,
|
|
10649
10750
|
autoScroll: false,
|
|
10650
10751
|
sensors,
|
|
10651
10752
|
collisionDetection: closestCenter,
|
|
10652
10753
|
onDragStart: handleDragStart,
|
|
10653
10754
|
onDragCancel: handleDragCancel,
|
|
10654
10755
|
onDragEnd: handleDragEnd,
|
|
10655
|
-
children: /* @__PURE__ */ jsx(SortableContext, {
|
|
10756
|
+
children: [/* @__PURE__ */ jsx(SortableContext, {
|
|
10656
10757
|
items: tabIds,
|
|
10657
10758
|
strategy: placement === "left" || placement === "right" ? verticalListSortingStrategy : horizontalListSortingStrategy,
|
|
10658
10759
|
children: /* @__PURE__ */ jsx(TabsReorderContext.Provider, {
|
|
10659
10760
|
value: reorderContext,
|
|
10660
10761
|
children: /* @__PURE__ */ jsx(TabsList, {
|
|
10661
10762
|
variant,
|
|
10662
|
-
...
|
|
10763
|
+
...listProps,
|
|
10764
|
+
onKeyDown: handleListKeyDown,
|
|
10663
10765
|
"data-sorting": activeId ? "true" : void 0,
|
|
10664
10766
|
children
|
|
10665
10767
|
})
|
|
10666
10768
|
})
|
|
10667
|
-
})
|
|
10769
|
+
}), /* @__PURE__ */ jsx(DragLift, {
|
|
10770
|
+
className: "rounded-control",
|
|
10771
|
+
container: liftContainer,
|
|
10772
|
+
children: activeId === void 0 ? null : /* @__PURE__ */ jsx("span", {
|
|
10773
|
+
"data-slot": "tabs-tab",
|
|
10774
|
+
"data-active": selectedValue === activeId ? "" : void 0,
|
|
10775
|
+
className: tabClassName({ className: "pointer-events-none size-full" }),
|
|
10776
|
+
children: /* @__PURE__ */ jsx("span", {
|
|
10777
|
+
"data-slot": "tabs-tab-content",
|
|
10778
|
+
className: contentClassName(),
|
|
10779
|
+
children: copies.get(activeId)
|
|
10780
|
+
})
|
|
10781
|
+
})
|
|
10782
|
+
})]
|
|
10668
10783
|
});
|
|
10669
10784
|
}
|
|
10670
10785
|
function TabsTab({ value, ...props }) {
|
|
@@ -10677,11 +10792,39 @@ function SortableTabsTab({ value, ...props }) {
|
|
|
10677
10792
|
const reorder = use(TabsReorderContext);
|
|
10678
10793
|
const activeValue = use(TabsValueContext);
|
|
10679
10794
|
const placement = use(TabsPlacementContext);
|
|
10680
|
-
const
|
|
10795
|
+
const siblingTransition = useDragSiblingTransition();
|
|
10796
|
+
const { attributes, listeners, setNodeRef, transform, transition, isDragging, index, overIndex } = useSortable({
|
|
10681
10797
|
id: value,
|
|
10682
|
-
disabled: !reorder.enabled
|
|
10798
|
+
disabled: !reorder.enabled,
|
|
10799
|
+
transition: siblingTransition
|
|
10683
10800
|
});
|
|
10684
10801
|
const isDraggingActive = isDragging && activeValue === String(value);
|
|
10802
|
+
const home = overIndex < 0 || overIndex === index;
|
|
10803
|
+
const copies = reorder.copies;
|
|
10804
|
+
const key = String(value);
|
|
10805
|
+
const { children } = props;
|
|
10806
|
+
useLayoutEffect(() => {
|
|
10807
|
+
if (!copies) return;
|
|
10808
|
+
copies.set(key, children);
|
|
10809
|
+
return () => {
|
|
10810
|
+
copies.delete(key);
|
|
10811
|
+
};
|
|
10812
|
+
}, [
|
|
10813
|
+
copies,
|
|
10814
|
+
key,
|
|
10815
|
+
children
|
|
10816
|
+
]);
|
|
10817
|
+
const nodes = reorder.nodes;
|
|
10818
|
+
const sortableRef = useCallback((node) => {
|
|
10819
|
+
setNodeRef(node);
|
|
10820
|
+
if (!nodes) return;
|
|
10821
|
+
if (node) nodes.set(key, node);
|
|
10822
|
+
else nodes.delete(key);
|
|
10823
|
+
}, [
|
|
10824
|
+
setNodeRef,
|
|
10825
|
+
nodes,
|
|
10826
|
+
key
|
|
10827
|
+
]);
|
|
10685
10828
|
const baseStyle = typeof props.style === "function" ? void 0 : props.style;
|
|
10686
10829
|
const vertical = placement === "left" || placement === "right";
|
|
10687
10830
|
const translate = vertical ? transform?.y : transform?.x;
|
|
@@ -10690,13 +10833,26 @@ function SortableTabsTab({ value, ...props }) {
|
|
|
10690
10833
|
transform: translate === void 0 ? void 0 : vertical ? `translate3d(0, ${translate}px, 0)` : `translate3d(${translate}px, 0, 0)`,
|
|
10691
10834
|
transition,
|
|
10692
10835
|
zIndex: isDragging ? 20 : baseStyle?.zIndex,
|
|
10693
|
-
cursor: isDragging ? "grabbing" : "pointer"
|
|
10836
|
+
cursor: isDragging ? "grabbing" : "pointer",
|
|
10837
|
+
...isDragging && !home ? PLACE_STYLE : null
|
|
10694
10838
|
}), [
|
|
10695
10839
|
baseStyle,
|
|
10696
10840
|
vertical,
|
|
10697
10841
|
translate,
|
|
10698
10842
|
transition,
|
|
10699
|
-
isDragging
|
|
10843
|
+
isDragging,
|
|
10844
|
+
home
|
|
10845
|
+
]);
|
|
10846
|
+
const { onKeyDown: onTabKeyDown } = props;
|
|
10847
|
+
const { onKeyDown: onSortableKeyDown, ...sortableListeners } = listeners ?? {};
|
|
10848
|
+
const handleKeyDown = useCallback((event) => {
|
|
10849
|
+
onTabKeyDown?.(event);
|
|
10850
|
+
if (reorder.activeId !== void 0) event.preventBaseUIHandler?.();
|
|
10851
|
+
onSortableKeyDown?.(event);
|
|
10852
|
+
}, [
|
|
10853
|
+
onTabKeyDown,
|
|
10854
|
+
onSortableKeyDown,
|
|
10855
|
+
reorder.activeId
|
|
10700
10856
|
]);
|
|
10701
10857
|
if (!reorder.enabled) return /* @__PURE__ */ jsx(TabsTabButton, {
|
|
10702
10858
|
value,
|
|
@@ -10705,34 +10861,43 @@ function SortableTabsTab({ value, ...props }) {
|
|
|
10705
10861
|
const { role: _sortableRole, tabIndex: _sortableTabIndex, ...sortableAttributes } = attributes;
|
|
10706
10862
|
return /* @__PURE__ */ jsx(TabsTabButton, {
|
|
10707
10863
|
value,
|
|
10708
|
-
sortableRef
|
|
10864
|
+
sortableRef,
|
|
10709
10865
|
...props,
|
|
10710
10866
|
"data-dragging-active": isDraggingActive ? "true" : void 0,
|
|
10711
10867
|
"data-dragging-source": isDragging ? "true" : void 0,
|
|
10868
|
+
"data-drag-origin": isDragging && home ? "" : void 0,
|
|
10712
10869
|
"data-reorderable": "true",
|
|
10713
10870
|
style,
|
|
10714
10871
|
...sortableAttributes,
|
|
10715
|
-
...
|
|
10872
|
+
...sortableListeners,
|
|
10873
|
+
onKeyDown: handleKeyDown,
|
|
10874
|
+
dropPlace: isDragging && !home
|
|
10716
10875
|
});
|
|
10717
10876
|
}
|
|
10718
|
-
|
|
10877
|
+
/** The lifted tab's slot away from home: none of the tab's own look, under the dashed place. */
|
|
10878
|
+
const PLACE_STYLE = {
|
|
10879
|
+
backgroundColor: "transparent",
|
|
10880
|
+
borderColor: "transparent",
|
|
10881
|
+
boxShadow: "none"
|
|
10882
|
+
};
|
|
10883
|
+
function TabsTabButton({ value, sortableRef, dropPlace = false, className, children, ...props }) {
|
|
10719
10884
|
const variant = use(TabsListVariantContext);
|
|
10720
10885
|
const placement = use(TabsPlacementContext);
|
|
10721
10886
|
const { content, tab } = tabs({
|
|
10722
10887
|
variant,
|
|
10723
10888
|
placement
|
|
10724
10889
|
});
|
|
10725
|
-
return /* @__PURE__ */
|
|
10890
|
+
return /* @__PURE__ */ jsxs(Tabs$1.Tab, {
|
|
10726
10891
|
ref: sortableRef,
|
|
10727
10892
|
value,
|
|
10728
10893
|
"data-slot": "tabs-tab",
|
|
10729
10894
|
className: tab({ className }),
|
|
10730
10895
|
...props,
|
|
10731
|
-
children: /* @__PURE__ */ jsx("span", {
|
|
10896
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
10732
10897
|
"data-slot": "tabs-tab-content",
|
|
10733
|
-
className: content(),
|
|
10898
|
+
className: content({ className: dropPlace ? "invisible" : void 0 }),
|
|
10734
10899
|
children
|
|
10735
|
-
})
|
|
10900
|
+
}), dropPlace ? /* @__PURE__ */ jsx(DropPlaceholder, { className: "absolute inset-0 z-10 rounded-control" }) : null]
|
|
10736
10901
|
});
|
|
10737
10902
|
}
|
|
10738
10903
|
function TabsLabel({ className, ...props }) {
|
|
@@ -10948,13 +11113,9 @@ function AppShellSidebarSlot({ className, id: idProp, render, ...props }) {
|
|
|
10948
11113
|
id,
|
|
10949
11114
|
inert: collapsed ? true : void 0,
|
|
10950
11115
|
className: sidebarSlot({ className: cn(className, sidebar?.collapsible && [
|
|
10951
|
-
"will-change-[opacity]",
|
|
10952
|
-
"transition-opacity duration-160 ease-slide",
|
|
10953
|
-
"motion-reduce:transition-none",
|
|
10954
11116
|
"group-data-[state=expanded]/app-shell:relative group-data-[state=expanded]/app-shell:z-1",
|
|
10955
11117
|
"group-data-[state=collapsed]/app-shell:pointer-events-none",
|
|
10956
|
-
"group-data-[state=collapsed]/app-shell:opacity-0"
|
|
10957
|
-
"group-data-[state=collapsed]/app-shell:duration-120"
|
|
11118
|
+
"group-data-[state=collapsed]/app-shell:opacity-0"
|
|
10958
11119
|
]) })
|
|
10959
11120
|
};
|
|
10960
11121
|
return useRender({
|
|
@@ -10990,65 +11151,17 @@ function AppShellOverlaySlot({ className, render, ...props }) {
|
|
|
10990
11151
|
}
|
|
10991
11152
|
function AppShellMainSlot({ className, overlay = false, render, ...props }) {
|
|
10992
11153
|
const { mainSlot } = appShell({ overlay });
|
|
10993
|
-
const
|
|
10994
|
-
const collapsible = sidebar?.collapsible ?? false;
|
|
10995
|
-
const sliding = useSidebarSlide(collapsible, sidebar?.open ?? true);
|
|
11154
|
+
const collapsible = useOptionalAppShellSidebar()?.collapsible ?? false;
|
|
10996
11155
|
const defaultProps = {
|
|
10997
11156
|
"data-slot": "app-shell-main-slot",
|
|
10998
|
-
|
|
10999
|
-
className: mainSlot({ className: cn(className, collapsible && [
|
|
11000
|
-
"absolute inset-y-0 right-0 left-0",
|
|
11001
|
-
"data-sliding:z-2",
|
|
11002
|
-
"transition-[left] duration-220 ease-slide",
|
|
11003
|
-
"motion-reduce:transition-none",
|
|
11004
|
-
"group-data-[state=collapsed]/app-shell:-left-(--app-shell-sidebar-width)"
|
|
11005
|
-
]) })
|
|
11157
|
+
className: mainSlot({ className: cn(className, collapsible && ["absolute inset-y-0 right-0 left-0", "group-data-[state=collapsed]/app-shell:-left-(--app-shell-sidebar-width)"]) })
|
|
11006
11158
|
};
|
|
11007
11159
|
return useRender({
|
|
11008
11160
|
defaultTagName: "main",
|
|
11009
11161
|
render,
|
|
11010
|
-
ref: sliding.ref,
|
|
11011
11162
|
props: mergeProps(defaultProps, props)
|
|
11012
11163
|
});
|
|
11013
11164
|
}
|
|
11014
|
-
function useSidebarSlide(collapsible, open) {
|
|
11015
|
-
const elementRef = useRef(null);
|
|
11016
|
-
const [slide, setSlide] = useState({
|
|
11017
|
-
active: false,
|
|
11018
|
-
open
|
|
11019
|
-
});
|
|
11020
|
-
if (slide.open !== open) setSlide({
|
|
11021
|
-
active: collapsible,
|
|
11022
|
-
open
|
|
11023
|
-
});
|
|
11024
|
-
const active = slide.active;
|
|
11025
|
-
const ref = useCallback((element) => {
|
|
11026
|
-
elementRef.current = element;
|
|
11027
|
-
}, []);
|
|
11028
|
-
useEffect(() => {
|
|
11029
|
-
if (!active) return;
|
|
11030
|
-
const transitions = elementRef.current?.getAnimations?.().filter((animation) => "transitionProperty" in animation && animation.transitionProperty === "left" && animation.effect?.getComputedTiming().activeDuration !== 0) ?? [];
|
|
11031
|
-
let current = true;
|
|
11032
|
-
const settle = () => {
|
|
11033
|
-
if (current) setSlide((state) => state.open === open ? {
|
|
11034
|
-
active: false,
|
|
11035
|
-
open
|
|
11036
|
-
} : state);
|
|
11037
|
-
};
|
|
11038
|
-
if (transitions.length === 0) {
|
|
11039
|
-
settle();
|
|
11040
|
-
return;
|
|
11041
|
-
}
|
|
11042
|
-
Promise.allSettled(transitions.map((transition) => transition.finished)).then(settle);
|
|
11043
|
-
return () => {
|
|
11044
|
-
current = false;
|
|
11045
|
-
};
|
|
11046
|
-
}, [active, open]);
|
|
11047
|
-
return {
|
|
11048
|
-
active,
|
|
11049
|
-
ref
|
|
11050
|
-
};
|
|
11051
|
-
}
|
|
11052
11165
|
function AppShellSidebarTrigger(props) {
|
|
11053
11166
|
const sidebar = useOptionalAppShellSidebar();
|
|
11054
11167
|
if (!sidebar?.collapsible) return null;
|
|
@@ -12026,7 +12139,7 @@ const taskCard = tv({ slots: {
|
|
|
12026
12139
|
"rounded-container border border-line-hairline bg-layer-card p-3 text-foreground shadow-none",
|
|
12027
12140
|
"data-[interactive=true]:hover:overlay-subtle data-[interactive=true]:active:overlay-medium",
|
|
12028
12141
|
"data-[disabled=true]:bg-fill-muted data-[disabled=true]:opacity-100",
|
|
12029
|
-
"group-data-[dragging=true]/task-draggable:shadow-float"
|
|
12142
|
+
"group-data-[dragging=true]/task-draggable:not-in-data-drag-origin:shadow-float"
|
|
12030
12143
|
],
|
|
12031
12144
|
row: ["flex min-w-0 items-start gap-2"],
|
|
12032
12145
|
body: ["min-w-0 flex-1"],
|
|
@@ -12193,15 +12306,10 @@ const taskDnd = tv({ slots: {
|
|
|
12193
12306
|
"rounded-container",
|
|
12194
12307
|
"focus-visible:shadow-focus"
|
|
12195
12308
|
],
|
|
12196
|
-
overlay: [
|
|
12197
|
-
"group/task-drag-overlay pointer-events-none",
|
|
12198
|
-
"z-20",
|
|
12199
|
-
"**:data-[slot=task-card]:shadow-float"
|
|
12200
|
-
],
|
|
12309
|
+
overlay: ["group/task-drag-overlay pointer-events-none", "size-full rounded-[inherit]"],
|
|
12201
12310
|
placeholder: [
|
|
12202
12311
|
"hidden w-full shrink-0",
|
|
12203
12312
|
"h-(--task-dnd-placeholder-height,72px) rounded-container",
|
|
12204
|
-
"border-[1.5px] border-dashed border-line-strong bg-transparent",
|
|
12205
12313
|
"data-[drop-state=allowed]:block"
|
|
12206
12314
|
]
|
|
12207
12315
|
} });
|
|
@@ -12217,29 +12325,47 @@ const EMPTY_OVER_STORE = createTaskDndOverStore();
|
|
|
12217
12325
|
const TaskDndOverContext = createContext(null);
|
|
12218
12326
|
const allowTaskDrop = () => true;
|
|
12219
12327
|
const NO_SENSORS = [];
|
|
12220
|
-
function TaskDndProvider({ children, accessibility, disabled = false, isDropAllowed = allowTaskDrop, onMove, onMoveError, onDragStart, onDragMove, onDragOver, onDragCancel, onDragEnd }) {
|
|
12328
|
+
function TaskDndProvider({ children, describe, messages, accessibility, disabled = false, isDropAllowed = allowTaskDrop, onMove, onMoveError, onDragStart, onDragMove, onDragOver, onDragCancel, onDragEnd }) {
|
|
12221
12329
|
const id = useId();
|
|
12222
12330
|
const [activeId, setActiveId] = useState(null);
|
|
12331
|
+
const [activeDropId, setActiveDropId] = useState(null);
|
|
12223
12332
|
const [activeHeight, setActiveHeight] = useState(null);
|
|
12333
|
+
const [overlay, setOverlay] = useState(false);
|
|
12224
12334
|
const [overStore] = useState(createTaskDndOverStore);
|
|
12225
|
-
const sensors =
|
|
12335
|
+
const sensors = useDragSensors({ coordinateGetter: taskKeyboardCoordinates });
|
|
12336
|
+
const resolvedAccessibility = useMemo(() => ({
|
|
12337
|
+
screenReaderInstructions: dragInstructions(messages),
|
|
12338
|
+
announcements: describe ? createDragAnnouncements(describe, messages) : SILENT_DRAG_ANNOUNCEMENTS,
|
|
12339
|
+
...accessibility
|
|
12340
|
+
}), [
|
|
12341
|
+
accessibility,
|
|
12342
|
+
describe,
|
|
12343
|
+
messages
|
|
12344
|
+
]);
|
|
12226
12345
|
const context = useMemo(() => ({
|
|
12227
12346
|
activeId,
|
|
12347
|
+
activeDropId,
|
|
12228
12348
|
activeHeight,
|
|
12229
|
-
isDropAllowed
|
|
12349
|
+
isDropAllowed,
|
|
12350
|
+
overlay,
|
|
12351
|
+
setOverlay
|
|
12230
12352
|
}), [
|
|
12353
|
+
activeDropId,
|
|
12231
12354
|
activeHeight,
|
|
12232
12355
|
activeId,
|
|
12233
|
-
isDropAllowed
|
|
12356
|
+
isDropAllowed,
|
|
12357
|
+
overlay
|
|
12234
12358
|
]);
|
|
12235
12359
|
const reset = useCallback(() => {
|
|
12236
12360
|
setActiveId(null);
|
|
12361
|
+
setActiveDropId(null);
|
|
12237
12362
|
setActiveHeight(null);
|
|
12238
12363
|
overStore.update(EMPTY_OVER_SNAPSHOT);
|
|
12239
12364
|
}, [overStore]);
|
|
12240
12365
|
const handleDragStart = useCallback((event) => {
|
|
12241
12366
|
overStore.update(EMPTY_OVER_SNAPSHOT);
|
|
12242
12367
|
setActiveId(event.active.id);
|
|
12368
|
+
setActiveDropId(getOwnDropId(event.active.data.current));
|
|
12243
12369
|
setActiveHeight(event.active.rect.current.initial?.height ?? null);
|
|
12244
12370
|
onDragStart?.(event);
|
|
12245
12371
|
}, [overStore, onDragStart]);
|
|
@@ -12267,7 +12393,8 @@ function TaskDndProvider({ children, accessibility, disabled = false, isDropAllo
|
|
|
12267
12393
|
const nextActiveId = event.active.id;
|
|
12268
12394
|
const nextOverId = event.over?.id;
|
|
12269
12395
|
const nextOverData = event.over?.data.current;
|
|
12270
|
-
|
|
12396
|
+
const ownDropId = getOwnDropId(event.active.data.current);
|
|
12397
|
+
if (nextOverId != null && nextOverId !== ownDropId && isDropAllowed(nextActiveId, nextOverId, nextOverData)) {
|
|
12271
12398
|
const details = {
|
|
12272
12399
|
activeId: nextActiveId,
|
|
12273
12400
|
overId: nextOverId,
|
|
@@ -12289,7 +12416,8 @@ function TaskDndProvider({ children, accessibility, disabled = false, isDropAllo
|
|
|
12289
12416
|
]);
|
|
12290
12417
|
return /* @__PURE__ */ jsx(DndContext, {
|
|
12291
12418
|
id,
|
|
12292
|
-
accessibility,
|
|
12419
|
+
accessibility: resolvedAccessibility,
|
|
12420
|
+
autoScroll: !overlay,
|
|
12293
12421
|
sensors: disabled ? NO_SENSORS : sensors,
|
|
12294
12422
|
onDragStart: handleDragStart,
|
|
12295
12423
|
onDragMove: handleDragMove,
|
|
@@ -12307,17 +12435,21 @@ function TaskDndProvider({ children, accessibility, disabled = false, isDropAllo
|
|
|
12307
12435
|
}
|
|
12308
12436
|
function TaskDraggable({ id, disabled = false, dropId, dropData, dropDisabled = false, className, ref: consumerRef, style, ...props }) {
|
|
12309
12437
|
const { draggable } = taskDnd();
|
|
12438
|
+
const context = use(TaskDndContext);
|
|
12439
|
+
const ownDrop = useMemo(() => dropId == null ? void 0 : { [OWN_DROP_ID]: dropId }, [dropId]);
|
|
12310
12440
|
const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
|
|
12311
12441
|
id,
|
|
12312
|
-
disabled
|
|
12442
|
+
disabled,
|
|
12443
|
+
data: ownDrop
|
|
12313
12444
|
});
|
|
12445
|
+
const lifted = isDragging && context?.overlay === true;
|
|
12314
12446
|
const { setNodeRef: setDropNodeRef, isOver: isDropOver } = useDroppable({
|
|
12315
12447
|
id: dropId ?? id,
|
|
12316
12448
|
data: dropData,
|
|
12317
12449
|
disabled: dropId == null || dropDisabled
|
|
12318
12450
|
});
|
|
12319
12451
|
const dragStyle = {
|
|
12320
|
-
transform: CSS.Translate.toString(transform),
|
|
12452
|
+
transform: lifted ? void 0 : CSS.Translate.toString(transform),
|
|
12321
12453
|
...style
|
|
12322
12454
|
};
|
|
12323
12455
|
const mergedRef = useCallback((node) => {
|
|
@@ -12335,6 +12467,7 @@ function TaskDraggable({ id, disabled = false, dropId, dropData, dropDisabled =
|
|
|
12335
12467
|
ref: mergedRef,
|
|
12336
12468
|
"data-slot": "task-draggable",
|
|
12337
12469
|
"data-dragging": isDragging ? "true" : void 0,
|
|
12470
|
+
"data-drag-origin": lifted ? "" : void 0,
|
|
12338
12471
|
"data-drop-over": isDropOver ? "true" : void 0,
|
|
12339
12472
|
"data-disabled": disabled ? "true" : void 0,
|
|
12340
12473
|
className: draggable({ className }),
|
|
@@ -12369,6 +12502,7 @@ function TaskDropPlaceholder({ id, placement, className, render, style, ...props
|
|
|
12369
12502
|
const context = use(TaskDndContext);
|
|
12370
12503
|
const overStore = use(TaskDndOverContext) ?? EMPTY_OVER_STORE;
|
|
12371
12504
|
const { placeholder } = taskDnd();
|
|
12505
|
+
const { placeholder: dropPlaceholder } = drag();
|
|
12372
12506
|
const dropState = useSyncExternalStore(overStore.subscribe, () => getPlaceholderDropState(context, overStore.getSnapshot(), id, placement), () => "idle");
|
|
12373
12507
|
const placeholderStyle = {
|
|
12374
12508
|
...style,
|
|
@@ -12382,16 +12516,29 @@ function TaskDropPlaceholder({ id, placement, className, render, style, ...props
|
|
|
12382
12516
|
"aria-hidden": true,
|
|
12383
12517
|
"data-slot": "task-drop-placeholder",
|
|
12384
12518
|
"data-drop-state": dropState,
|
|
12385
|
-
className: placeholder({ className }),
|
|
12519
|
+
className: dropPlaceholder({ className: placeholder({ className }) }),
|
|
12386
12520
|
style: placeholderStyle,
|
|
12387
12521
|
...props
|
|
12388
12522
|
}
|
|
12389
12523
|
});
|
|
12390
12524
|
}
|
|
12391
|
-
|
|
12525
|
+
/**
|
|
12526
|
+
* The copy of the dragged card that follows the hand: a `DragLift` with the
|
|
12527
|
+
* card's radius. On a drop it glides into the card's new place, and on a
|
|
12528
|
+
* cancel back home. While it is rendered, the dragged card stays in its place
|
|
12529
|
+
* at 40% instead of moving.
|
|
12530
|
+
*/
|
|
12531
|
+
function TaskDragOverlay({ children, className, container }) {
|
|
12392
12532
|
const { overlay } = taskDnd();
|
|
12393
|
-
|
|
12394
|
-
|
|
12533
|
+
const setOverlay = use(TaskDndContext)?.setOverlay;
|
|
12534
|
+
useEffect(() => {
|
|
12535
|
+
if (!setOverlay) return;
|
|
12536
|
+
setOverlay(true);
|
|
12537
|
+
return () => setOverlay(false);
|
|
12538
|
+
}, [setOverlay]);
|
|
12539
|
+
return /* @__PURE__ */ jsx(DragLift, {
|
|
12540
|
+
className: "rounded-container",
|
|
12541
|
+
container,
|
|
12395
12542
|
children: children == null ? null : /* @__PURE__ */ jsx("div", {
|
|
12396
12543
|
"data-slot": "task-drag-overlay",
|
|
12397
12544
|
"data-dragging": "true",
|
|
@@ -12400,6 +12547,11 @@ function TaskDragOverlay({ children, className }) {
|
|
|
12400
12547
|
})
|
|
12401
12548
|
});
|
|
12402
12549
|
}
|
|
12550
|
+
const OWN_DROP_ID = "taskDndDropId";
|
|
12551
|
+
function getOwnDropId(data) {
|
|
12552
|
+
const value = data?.[OWN_DROP_ID];
|
|
12553
|
+
return typeof value === "string" || typeof value === "number" ? value : null;
|
|
12554
|
+
}
|
|
12403
12555
|
/**
|
|
12404
12556
|
* dnd-kit's `sortableKeyboardCoordinates` only moves when the dragged item is
|
|
12405
12557
|
* itself a registered droppable under its own id (as with `useSortable`). Task
|
|
@@ -12470,6 +12622,7 @@ function getDropState(context, id, isOver, overData) {
|
|
|
12470
12622
|
return context?.isDropAllowed(activeId, id, overData) ? "allowed" : "blocked";
|
|
12471
12623
|
}
|
|
12472
12624
|
function getPlaceholderDropState(context, over, id, placement) {
|
|
12625
|
+
if (context?.activeDropId != null && context.activeDropId === id) return "idle";
|
|
12473
12626
|
return getDropState(context, id, over.overId === id && (placement == null || over.overPlacement === placement), over.overData);
|
|
12474
12627
|
}
|
|
12475
12628
|
function createTaskDndOverStore() {
|