@botiverse/raft-ui 0.36.0 → 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 +28 -0
- package/dist/{inbox-item-DIUkRiT4.mjs → inbox-item-BB6vO4PO.mjs} +175 -15
- package/dist/index.mjs +7 -59
- package/dist/wip.d.mts +15 -9
- package/dist/wip.mjs +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,31 @@
|
|
|
1
|
+
## [0.36.1](https://github.com/botiverse/raft-design/compare/v0.36.0...v0.36.1) (2026-10-26)
|
|
2
|
+
|
|
3
|
+
### Design System
|
|
4
|
+
|
|
5
|
+
- **Drag and drop:** a panel of live content (a side section) is lifted by its grip only, so its head keeps its clicks (opening a thread, jumping to the channel). The grip shows while the head is hovered or the grip has focus, always on a device that can't hover, and its hit area is at least 24px tall and wider than the bar. ([#809](https://github.com/botiverse/raft-design/pull/809))
|
|
6
|
+
- Docs: https://raft-design.botiverse.build/patterns/drag-and-drop/
|
|
7
|
+
- **Motion:** the app's columns change without animation: collapsing or expanding the sidebar, and Focus Mode in or out, by a button or by dragging past the end. ([#811](https://github.com/botiverse/raft-design/pull/811))
|
|
8
|
+
- Docs: https://raft-design.botiverse.build/foundations/motion/
|
|
9
|
+
- **Field:** an action at the end of a field's label row (Forgot Password) comes after the control in the markup, so Tab and a screen reader reach the field first. ([#808](https://github.com/botiverse/raft-design/pull/808))
|
|
10
|
+
- Docs: https://raft-design.botiverse.build/components/field/
|
|
11
|
+
|
|
12
|
+
### Fixed
|
|
13
|
+
|
|
14
|
+
- **AppShell**: the sidebar collapses and expands at once; the main area no longer slides and the sidebar no longer fades. `data-sliding` is gone. ([#811](https://github.com/botiverse/raft-design/pull/811))
|
|
15
|
+
- Why: Focus Mode already switched at once while the sidebar slid; a whole column sliding flickers.
|
|
16
|
+
- Affects: no transition on `AppShellMainSlot` (`left`) or `AppShellSidebarSlot` (opacity); no z-index on the main slot while collapsing.
|
|
17
|
+
- Docs: https://raft-design.botiverse.build/components/app-shell/
|
|
18
|
+
- **Composer**: its buttons sit 6px apart (`gap-embedded-inset`), the same as their distance from the frame. ([#810](https://github.com/botiverse/raft-design/pull/810))
|
|
19
|
+
- Why: the buttons were 8px apart but 6px from the edge, against Shape › Inside a frame.
|
|
20
|
+
- Affects: gap in the toolbar, actions and meta 8px → 6px.
|
|
21
|
+
- Docs: https://raft-design.botiverse.build/components/composer/
|
|
22
|
+
- **DragRefusalHint**: the chip stays inside the window and off the lifted copy: left of the pointer and the copy at the right edge, above the pointer at the bottom edge, 8px inside on every side. ([#807](https://github.com/botiverse/raft-design/pull/807))
|
|
23
|
+
- Why: near the window's edge the chip was drawn outside it, or under the copy when flipped.
|
|
24
|
+
- Docs: https://raft-design.botiverse.build/components/drag/
|
|
25
|
+
- **useDragSensors**: Escape during a drag, however it started, only cancels the drag; the keydown is stopped in the capture phase, so no app Escape handler (closing a panel, a dialog, a popover) hears it. ([#807](https://github.com/botiverse/raft-design/pull/807))
|
|
26
|
+
- Why: Escape cancelled the drag and also closed the panel around it.
|
|
27
|
+
- Docs: https://raft-design.botiverse.build/components/drag/
|
|
28
|
+
|
|
1
29
|
## [0.36.0](https://github.com/botiverse/raft-design/compare/v0.35.1...v0.36.0) (2026-10-26)
|
|
2
30
|
|
|
3
31
|
### Design System
|
|
@@ -2541,6 +2541,42 @@ function MobileNavLabel({ className, render, ...props }) {
|
|
|
2541
2541
|
});
|
|
2542
2542
|
}
|
|
2543
2543
|
//#endregion
|
|
2544
|
+
//#region src/lib/drag-escape.ts
|
|
2545
|
+
/** The drags in progress in each window, each with its own cancel. */
|
|
2546
|
+
const holds$1 = /* @__PURE__ */ new WeakMap();
|
|
2547
|
+
function onKeydown(event) {
|
|
2548
|
+
if (event.key !== "Escape" && event.code !== "Escape") return;
|
|
2549
|
+
const drags = holds$1.get(this);
|
|
2550
|
+
if (!drags || drags.size === 0) return;
|
|
2551
|
+
event.preventDefault();
|
|
2552
|
+
event.stopImmediatePropagation();
|
|
2553
|
+
for (const cancel of drags.values()) cancel(event);
|
|
2554
|
+
}
|
|
2555
|
+
function guard(win) {
|
|
2556
|
+
let drags = holds$1.get(win);
|
|
2557
|
+
if (!drags) {
|
|
2558
|
+
drags = /* @__PURE__ */ new Map();
|
|
2559
|
+
holds$1.set(win, drags);
|
|
2560
|
+
win.addEventListener("keydown", onKeydown, { capture: true });
|
|
2561
|
+
}
|
|
2562
|
+
return drags;
|
|
2563
|
+
}
|
|
2564
|
+
if (typeof window !== "undefined") guard(window);
|
|
2565
|
+
/** A sensor's drag has started: Escape now cancels it, and only it. */
|
|
2566
|
+
function holdEscape(win, sensor, cancel) {
|
|
2567
|
+
if (!win) return;
|
|
2568
|
+
guard(win).set(sensor, cancel);
|
|
2569
|
+
}
|
|
2570
|
+
/** The sensor's drag is over: Escape behaves as it does everywhere else again. */
|
|
2571
|
+
function releaseEscape(win, sensor) {
|
|
2572
|
+
if (!win) return;
|
|
2573
|
+
holds$1.get(win)?.delete(sensor);
|
|
2574
|
+
}
|
|
2575
|
+
/** The window an event happened in. */
|
|
2576
|
+
function eventWindow(event) {
|
|
2577
|
+
return (event?.target)?.ownerDocument?.defaultView ?? (typeof window === "undefined" ? null : window);
|
|
2578
|
+
}
|
|
2579
|
+
//#endregion
|
|
2544
2580
|
//#region src/lib/touch-drag.ts
|
|
2545
2581
|
/**
|
|
2546
2582
|
* How a finger picks up something that can be dragged
|
|
@@ -2577,6 +2613,18 @@ function touchPoint(event) {
|
|
|
2577
2613
|
function farther(from, to, limit) {
|
|
2578
2614
|
return Math.hypot(to.x - from.x, to.y - from.y) > limit;
|
|
2579
2615
|
}
|
|
2616
|
+
/**
|
|
2617
|
+
* Once a pointer sensor's drag has started, Escape cancels it and reaches
|
|
2618
|
+
* nothing else (`drag-escape.ts`): no app handler on the window, the document
|
|
2619
|
+
* or an element hears it.
|
|
2620
|
+
*/
|
|
2621
|
+
function holdEscapeOnceActive(sensor) {
|
|
2622
|
+
const self = sensor;
|
|
2623
|
+
if (self.activated) holdEscape(eventWindow(self.props.event), sensor, () => self.handleCancel());
|
|
2624
|
+
}
|
|
2625
|
+
function releaseEscapeOf(sensor) {
|
|
2626
|
+
releaseEscape(eventWindow(sensor.props.event), sensor);
|
|
2627
|
+
}
|
|
2580
2628
|
var HoldThenMoveTouchSensorImpl = class extends TouchSensor {
|
|
2581
2629
|
static activators = TouchSensor.activators;
|
|
2582
2630
|
static setup() {
|
|
@@ -2595,6 +2643,10 @@ var HoldThenMoveTouchSensorImpl = class extends TouchSensor {
|
|
|
2595
2643
|
};
|
|
2596
2644
|
holds.set(this, state);
|
|
2597
2645
|
}
|
|
2646
|
+
handleStart() {
|
|
2647
|
+
super.handleStart();
|
|
2648
|
+
holdEscapeOnceActive(this);
|
|
2649
|
+
}
|
|
2598
2650
|
handleMove(event) {
|
|
2599
2651
|
const self = this;
|
|
2600
2652
|
const state = holds.get(this);
|
|
@@ -2622,22 +2674,33 @@ var HoldThenMoveTouchSensorImpl = class extends TouchSensor {
|
|
|
2622
2674
|
const state = holds.get(this);
|
|
2623
2675
|
if (state) clearTimeout(state.timer);
|
|
2624
2676
|
holds.delete(this);
|
|
2677
|
+
releaseEscapeOf(this);
|
|
2625
2678
|
super.detach();
|
|
2626
2679
|
}
|
|
2627
2680
|
};
|
|
2628
2681
|
/** A TouchSensor that starts a drag on the first move after a still hold (see above). */
|
|
2629
2682
|
const HoldThenMoveTouchSensor = HoldThenMoveTouchSensorImpl;
|
|
2630
|
-
|
|
2631
|
-
* dnd-kit's PointerSensor for a mouse and a pen only: a finger's pointerdown is
|
|
2632
|
-
* left to `HoldThenMoveTouchSensor`.
|
|
2633
|
-
*/
|
|
2634
|
-
var MouseOnlyPointerSensor = class extends PointerSensor {
|
|
2683
|
+
var MouseOnlyPointerSensorImpl = class extends PointerSensor {
|
|
2635
2684
|
static activators = [{
|
|
2636
2685
|
eventName: "onPointerDown",
|
|
2637
2686
|
handler: (event, options) => event.nativeEvent.pointerType === "touch" ? false : PointerSensor.activators[0].handler(event, options)
|
|
2638
2687
|
}];
|
|
2688
|
+
handleStart() {
|
|
2689
|
+
super.handleStart();
|
|
2690
|
+
holdEscapeOnceActive(this);
|
|
2691
|
+
}
|
|
2692
|
+
detach() {
|
|
2693
|
+
releaseEscapeOf(this);
|
|
2694
|
+
super.detach();
|
|
2695
|
+
}
|
|
2639
2696
|
};
|
|
2640
2697
|
/**
|
|
2698
|
+
* dnd-kit's PointerSensor for a mouse and a pen only: a finger's pointerdown is
|
|
2699
|
+
* left to `HoldThenMoveTouchSensor`. While it holds a drag, Escape puts the
|
|
2700
|
+
* item back and reaches nothing else.
|
|
2701
|
+
*/
|
|
2702
|
+
const MouseOnlyPointerSensor = MouseOnlyPointerSensorImpl;
|
|
2703
|
+
/**
|
|
2641
2704
|
* `useSensor(HoldThenMoveTouchSensor, …)` with the activation the sensor relies
|
|
2642
2705
|
* on: no constraint dnd-kit would act on by itself, so only a move after the
|
|
2643
2706
|
* hold starts the drag.
|
|
@@ -6181,6 +6244,24 @@ const DRAG_KEYBOARD_CODES = {
|
|
|
6181
6244
|
cancel: ["Escape"],
|
|
6182
6245
|
end: ["Space"]
|
|
6183
6246
|
};
|
|
6247
|
+
var DragKeyboardSensorImpl = class extends KeyboardSensor {
|
|
6248
|
+
static activators = KeyboardSensor.activators;
|
|
6249
|
+
attach() {
|
|
6250
|
+
super.attach();
|
|
6251
|
+
holdEscape(eventWindow(this.props.event), this, (event) => this.handleCancel(event));
|
|
6252
|
+
}
|
|
6253
|
+
detach() {
|
|
6254
|
+
releaseEscape(eventWindow(this.props.event), this);
|
|
6255
|
+
super.detach();
|
|
6256
|
+
}
|
|
6257
|
+
};
|
|
6258
|
+
/**
|
|
6259
|
+
* dnd-kit's KeyboardSensor, but Escape during the drag puts the item back and
|
|
6260
|
+
* reaches nothing else: no dialog, panel or popover that closes on Escape
|
|
6261
|
+
* hears it (`drag-escape.ts`). The pointer sensors of `useDragSensors` do the
|
|
6262
|
+
* same.
|
|
6263
|
+
*/
|
|
6264
|
+
const DragKeyboardSensor = DragKeyboardSensorImpl;
|
|
6184
6265
|
const NO_TOUCH = {};
|
|
6185
6266
|
/**
|
|
6186
6267
|
* The one sensor set for everything that can be dragged
|
|
@@ -6191,6 +6272,11 @@ const NO_TOUCH = {};
|
|
|
6191
6272
|
* - the keyboard: Space picks up, the arrows move, Space drops, Escape puts
|
|
6192
6273
|
* back. Enter never starts a drag.
|
|
6193
6274
|
*
|
|
6275
|
+
* However the drag started, Escape during it only puts the item back: it is
|
|
6276
|
+
* taken in the capture phase on the window and stopped, so no app handler
|
|
6277
|
+
* (a dialog, a panel, a popover that closes on Escape) hears it. Once the drag
|
|
6278
|
+
* is over, Escape reaches the app again.
|
|
6279
|
+
*
|
|
6194
6280
|
* Pass the options, or only the keyboard's `coordinateGetter`.
|
|
6195
6281
|
*/
|
|
6196
6282
|
function useDragSensors(options = {}) {
|
|
@@ -6201,7 +6287,7 @@ function useDragSensors(options = {}) {
|
|
|
6201
6287
|
}), [coordinateGetter]);
|
|
6202
6288
|
const mouse = useMouseOnlyPointerSensor(6);
|
|
6203
6289
|
const finger = useHoldThenMoveTouchSensor(touch);
|
|
6204
|
-
const keys = useSensor(
|
|
6290
|
+
const keys = useSensor(DragKeyboardSensor, keyboardOptions);
|
|
6205
6291
|
return useSensors(mouse, finger, keyboard ? keys : null);
|
|
6206
6292
|
}
|
|
6207
6293
|
/**
|
|
@@ -6323,6 +6409,63 @@ function DropPlaceholder({ opaque = false, className, render, ...props }) {
|
|
|
6323
6409
|
}, props, { "data-slot": "drop-placeholder" })
|
|
6324
6410
|
});
|
|
6325
6411
|
}
|
|
6412
|
+
/** The chip sits this far right of and below the pointer. */
|
|
6413
|
+
const HINT_OFFSET = {
|
|
6414
|
+
x: 14,
|
|
6415
|
+
y: 16
|
|
6416
|
+
};
|
|
6417
|
+
/** It stays at least this far inside the window on every side. */
|
|
6418
|
+
const HINT_INSET = 8;
|
|
6419
|
+
/** Pushed off the lifted copy, it keeps this far from it. */
|
|
6420
|
+
const HINT_GAP = 6;
|
|
6421
|
+
function overlaps(a, b) {
|
|
6422
|
+
return a.left < b.right && a.right > b.left && a.top < b.bottom && a.bottom > b.top;
|
|
6423
|
+
}
|
|
6424
|
+
function clamp(value, min, max) {
|
|
6425
|
+
return Math.max(min, Math.min(value, Math.max(min, max)));
|
|
6426
|
+
}
|
|
6427
|
+
/**
|
|
6428
|
+
* Where the refusal chip goes (design/patterns/drag-and-drop.md#refused-places):
|
|
6429
|
+
* right of and below the pointer; left of it (and of the copy) where the
|
|
6430
|
+
* window's right edge would cut it, above it where the bottom edge would; off
|
|
6431
|
+
* the lifted copy, which is drawn over it; and always at least 8px inside the
|
|
6432
|
+
* window.
|
|
6433
|
+
*/
|
|
6434
|
+
function placeRefusalHint(point, size, lift, viewport) {
|
|
6435
|
+
const { width, height } = size;
|
|
6436
|
+
const maxX = viewport.width - HINT_INSET - width;
|
|
6437
|
+
const maxY = viewport.height - HINT_INSET - height;
|
|
6438
|
+
const fitsX = (x) => x >= HINT_INSET && x <= maxX;
|
|
6439
|
+
const fitsY = (y) => y >= HINT_INSET && y <= maxY;
|
|
6440
|
+
const right = point.x + HINT_OFFSET.x;
|
|
6441
|
+
const onRight = right <= maxX;
|
|
6442
|
+
let x = onRight ? right : Math.min(point.x, lift?.left ?? point.x) - HINT_OFFSET.x - width;
|
|
6443
|
+
const below = point.y + HINT_OFFSET.y;
|
|
6444
|
+
const onBelow = below <= maxY;
|
|
6445
|
+
let y = onBelow ? below : point.y - HINT_OFFSET.y - height;
|
|
6446
|
+
const box = (bx, by) => ({
|
|
6447
|
+
left: bx,
|
|
6448
|
+
top: by,
|
|
6449
|
+
right: bx + width,
|
|
6450
|
+
bottom: by + height
|
|
6451
|
+
});
|
|
6452
|
+
if (lift && overlaps(box(x, y), lift)) {
|
|
6453
|
+
const clearBelow = lift.bottom + HINT_GAP;
|
|
6454
|
+
const clearAbove = lift.top - HINT_GAP - height;
|
|
6455
|
+
const vertical = (onBelow ? [clearBelow, clearAbove] : [clearAbove, clearBelow]).find(fitsY);
|
|
6456
|
+
if (vertical !== void 0) y = vertical;
|
|
6457
|
+
else {
|
|
6458
|
+
const besideRight = lift.right + HINT_OFFSET.x;
|
|
6459
|
+
const besideLeft = lift.left - HINT_OFFSET.x - width;
|
|
6460
|
+
const beside = (onRight ? [besideRight, besideLeft] : [besideLeft, besideRight]).find(fitsX);
|
|
6461
|
+
if (beside !== void 0) x = beside;
|
|
6462
|
+
}
|
|
6463
|
+
}
|
|
6464
|
+
return {
|
|
6465
|
+
x: Math.round(clamp(x, HINT_INSET, maxX)),
|
|
6466
|
+
y: Math.round(clamp(y, HINT_INSET, maxY))
|
|
6467
|
+
};
|
|
6468
|
+
}
|
|
6326
6469
|
/**
|
|
6327
6470
|
* Shown while the hand is over a place that refuses the item
|
|
6328
6471
|
* (design/patterns/drag-and-drop.md#refused-places): the reason, in a HUD
|
|
@@ -6330,6 +6473,11 @@ function DropPlaceholder({ opaque = false, className, render, ...props }) {
|
|
|
6330
6473
|
* not-allowed cursor. Render it only while the place is refused, inside the
|
|
6331
6474
|
* `DndContext`, with no placeholder anywhere. Announce the reason as well:
|
|
6332
6475
|
* the chip is not read out.
|
|
6476
|
+
*
|
|
6477
|
+
* The chip sits right of and below the pointer. Near the window's right edge
|
|
6478
|
+
* it goes left of the pointer and of the lifted copy, near the bottom edge
|
|
6479
|
+
* above the pointer; it never sits under the copy, and always stays 8px inside
|
|
6480
|
+
* the window. Its size is measured when its content changes, not every frame.
|
|
6333
6481
|
*/
|
|
6334
6482
|
function DragRefusalHint({ children, container, className, style, ...props }) {
|
|
6335
6483
|
const { hint } = drag();
|
|
@@ -6341,20 +6489,31 @@ function DragRefusalHint({ children, container, className, style, ...props }) {
|
|
|
6341
6489
|
if (!dragging) return;
|
|
6342
6490
|
const root = document.documentElement;
|
|
6343
6491
|
root.setAttribute("data-drag-refused", "");
|
|
6492
|
+
const node = ref.current;
|
|
6493
|
+
const size = {
|
|
6494
|
+
width: node?.offsetWidth ?? 0,
|
|
6495
|
+
height: node?.offsetHeight ?? 0
|
|
6496
|
+
};
|
|
6497
|
+
const observer = node && typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => {
|
|
6498
|
+
size.width = node.offsetWidth;
|
|
6499
|
+
size.height = node.offsetHeight;
|
|
6500
|
+
}) : null;
|
|
6501
|
+
if (node) observer?.observe(node);
|
|
6344
6502
|
let frame = 0;
|
|
6345
6503
|
const tick = () => {
|
|
6346
|
-
const node = ref.current;
|
|
6347
6504
|
if (node) {
|
|
6505
|
+
const lift = document.querySelector("[data-slot=drag-lift]")?.getBoundingClientRect();
|
|
6348
6506
|
let point = dragPointer();
|
|
6349
|
-
if (viaKeyboard || !point) {
|
|
6350
|
-
|
|
6351
|
-
|
|
6352
|
-
|
|
6353
|
-
y: lift.top + lift.height / 2
|
|
6354
|
-
};
|
|
6355
|
-
}
|
|
6507
|
+
if ((viaKeyboard || !point) && lift) point = {
|
|
6508
|
+
x: lift.right,
|
|
6509
|
+
y: lift.top + lift.height / 2
|
|
6510
|
+
};
|
|
6356
6511
|
if (point) {
|
|
6357
|
-
|
|
6512
|
+
const at = placeRefusalHint(point, size, lift ?? null, {
|
|
6513
|
+
width: window.innerWidth,
|
|
6514
|
+
height: window.innerHeight
|
|
6515
|
+
});
|
|
6516
|
+
node.style.transform = `translate(${at.x}px, ${at.y}px)`;
|
|
6358
6517
|
node.style.visibility = "visible";
|
|
6359
6518
|
}
|
|
6360
6519
|
}
|
|
@@ -6363,6 +6522,7 @@ function DragRefusalHint({ children, container, className, style, ...props }) {
|
|
|
6363
6522
|
tick();
|
|
6364
6523
|
return () => {
|
|
6365
6524
|
root.removeAttribute("data-drag-refused");
|
|
6525
|
+
observer?.disconnect();
|
|
6366
6526
|
cancelAnimationFrame(frame);
|
|
6367
6527
|
};
|
|
6368
6528
|
}, [dragging, viaKeyboard]);
|
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { cn } from "./cn.mjs";
|
|
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-
|
|
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";
|
|
@@ -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",
|
|
@@ -11113,13 +11113,9 @@ function AppShellSidebarSlot({ className, id: idProp, render, ...props }) {
|
|
|
11113
11113
|
id,
|
|
11114
11114
|
inert: collapsed ? true : void 0,
|
|
11115
11115
|
className: sidebarSlot({ className: cn(className, sidebar?.collapsible && [
|
|
11116
|
-
"will-change-[opacity]",
|
|
11117
|
-
"transition-opacity duration-160 ease-slide",
|
|
11118
|
-
"motion-reduce:transition-none",
|
|
11119
11116
|
"group-data-[state=expanded]/app-shell:relative group-data-[state=expanded]/app-shell:z-1",
|
|
11120
11117
|
"group-data-[state=collapsed]/app-shell:pointer-events-none",
|
|
11121
|
-
"group-data-[state=collapsed]/app-shell:opacity-0"
|
|
11122
|
-
"group-data-[state=collapsed]/app-shell:duration-120"
|
|
11118
|
+
"group-data-[state=collapsed]/app-shell:opacity-0"
|
|
11123
11119
|
]) })
|
|
11124
11120
|
};
|
|
11125
11121
|
return useRender({
|
|
@@ -11155,65 +11151,17 @@ function AppShellOverlaySlot({ className, render, ...props }) {
|
|
|
11155
11151
|
}
|
|
11156
11152
|
function AppShellMainSlot({ className, overlay = false, render, ...props }) {
|
|
11157
11153
|
const { mainSlot } = appShell({ overlay });
|
|
11158
|
-
const
|
|
11159
|
-
const collapsible = sidebar?.collapsible ?? false;
|
|
11160
|
-
const sliding = useSidebarSlide(collapsible, sidebar?.open ?? true);
|
|
11154
|
+
const collapsible = useOptionalAppShellSidebar()?.collapsible ?? false;
|
|
11161
11155
|
const defaultProps = {
|
|
11162
11156
|
"data-slot": "app-shell-main-slot",
|
|
11163
|
-
|
|
11164
|
-
className: mainSlot({ className: cn(className, collapsible && [
|
|
11165
|
-
"absolute inset-y-0 right-0 left-0",
|
|
11166
|
-
"data-sliding:z-2",
|
|
11167
|
-
"transition-[left] duration-220 ease-slide",
|
|
11168
|
-
"motion-reduce:transition-none",
|
|
11169
|
-
"group-data-[state=collapsed]/app-shell:-left-(--app-shell-sidebar-width)"
|
|
11170
|
-
]) })
|
|
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)"]) })
|
|
11171
11158
|
};
|
|
11172
11159
|
return useRender({
|
|
11173
11160
|
defaultTagName: "main",
|
|
11174
11161
|
render,
|
|
11175
|
-
ref: sliding.ref,
|
|
11176
11162
|
props: mergeProps(defaultProps, props)
|
|
11177
11163
|
});
|
|
11178
11164
|
}
|
|
11179
|
-
function useSidebarSlide(collapsible, open) {
|
|
11180
|
-
const elementRef = useRef(null);
|
|
11181
|
-
const [slide, setSlide] = useState({
|
|
11182
|
-
active: false,
|
|
11183
|
-
open
|
|
11184
|
-
});
|
|
11185
|
-
if (slide.open !== open) setSlide({
|
|
11186
|
-
active: collapsible,
|
|
11187
|
-
open
|
|
11188
|
-
});
|
|
11189
|
-
const active = slide.active;
|
|
11190
|
-
const ref = useCallback((element) => {
|
|
11191
|
-
elementRef.current = element;
|
|
11192
|
-
}, []);
|
|
11193
|
-
useEffect(() => {
|
|
11194
|
-
if (!active) return;
|
|
11195
|
-
const transitions = elementRef.current?.getAnimations?.().filter((animation) => "transitionProperty" in animation && animation.transitionProperty === "left" && animation.effect?.getComputedTiming().activeDuration !== 0) ?? [];
|
|
11196
|
-
let current = true;
|
|
11197
|
-
const settle = () => {
|
|
11198
|
-
if (current) setSlide((state) => state.open === open ? {
|
|
11199
|
-
active: false,
|
|
11200
|
-
open
|
|
11201
|
-
} : state);
|
|
11202
|
-
};
|
|
11203
|
-
if (transitions.length === 0) {
|
|
11204
|
-
settle();
|
|
11205
|
-
return;
|
|
11206
|
-
}
|
|
11207
|
-
Promise.allSettled(transitions.map((transition) => transition.finished)).then(settle);
|
|
11208
|
-
return () => {
|
|
11209
|
-
current = false;
|
|
11210
|
-
};
|
|
11211
|
-
}, [active, open]);
|
|
11212
|
-
return {
|
|
11213
|
-
active,
|
|
11214
|
-
ref
|
|
11215
|
-
};
|
|
11216
|
-
}
|
|
11217
11165
|
function AppShellSidebarTrigger(props) {
|
|
11218
11166
|
const sidebar = useOptionalAppShellSidebar();
|
|
11219
11167
|
if (!sidebar?.collapsible) return null;
|
package/dist/wip.d.mts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { $ as MessageListJumpPillProps, Aa as PopoverBody, As as DialogCommit, B as DragMessages, Bs as DialogContentProps, C as InboxItemProps, Co as DropdownMenuLinkItemProps, Di as PreviewCardEyebrowProps, Ei as PreviewCardEyebrow, G as dragMessages, Gs as DialogFooterNoteProps, H as DragPlace, J as MessageListJumpPill, K as MessageListJumpControls, Ls as DialogClose, Mi as PreviewCardMeta, Ms as DialogSheetContent, Ni as PreviewCardMetaProps, Ns as DialogSheetContentProps, Oi as PreviewCardFooter, Os as TextLinkProps, Ps as Dialog, Q as MessageListJumpPillGroupProps, R as DEFAULT_DRAG_MESSAGES, Sa as MobileNavServerPopoverRowProps, So as DropdownMenuLinkItem, Ta as PopoverActionsProps, U as createDragAnnouncements, V as DragNamed, W as dragInstructions, Ws as DialogFooterNote, X as MessageListJumpPillDismissProps, Y as MessageListJumpPillDismiss, Z as MessageListJumpPillGroup, _a as MobileNavServerPopoverRowBodyProps, _c as VariantProps, _i as PreviewCardActionsProps, _s as ListRowProps, _t as MessageQuotedPreviewAuthorDelegatedByProps, aa as MobileNavServerPopoverContentProps, ba as MobileNavServerPopoverRowLabel, bi as PreviewCardBody, ca as MobileNavServerPopoverDestinations, cc as DialogTrigger, da as MobileNavServerPopoverGroupProps, dn as MessageReferenceReadMarkProps, dr as MessageItemDelegatedBy, fa as MobileNavServerPopoverList, fr as MessageItemDelegatedByButton, ga as MobileNavServerPopoverRowBody, gi as PreviewCardActions, gr as MessageItemDelegatedByProps, gt as MessageQuotedPreviewAuthorDelegatedBy, ha as MobileNavServerPopoverRow, hr as MessageItemDelegatedByNameProps, ia as MobileNavServerPopoverContent, ja as PopoverBodyProps, js as DialogCommitProps, ki as PreviewCardFooterProps, la as MobileNavServerPopoverDestinationsProps, lr as MessageItemDelegatedAvatar, ma as MobileNavServerPopoverProps, mr as MessageItemDelegatedByName, na as MobileNavServerItemProps, nc as DialogSheetBack, nn as MessageReferenceIcon, oa as MobileNavServerPopoverDestination, pa as MobileNavServerPopoverListProps, pc as ButtonProps, pr as MessageItemDelegatedByButtonProps, q as MessageListJumpControlsProps, ra as MobileNavServerPopover, rc as DialogSheetBackProps, rn as MessageReferenceIconProps, sa as MobileNavServerPopoverDestinationProps, sc as DialogTitleProps, ta as MobileNavServerItem, u as InboxItemDensity, ua as MobileNavServerPopoverGroup, un as MessageReferenceReadMark, ur as MessageItemDelegatedAvatarProps, va as MobileNavServerPopoverRowDescription, vc as DataAttributes, wa as PopoverActions, xa as MobileNavServerPopoverRowLabelProps, xi as PreviewCardBodyProps, ya as MobileNavServerPopoverRowDescriptionProps, yc as StyledProps, z as DragAnnouncementSource } from "./inbox-item-B8eXIikq.mjs";
|
|
2
|
-
import { CSSProperties, ComponentProps, ComponentPropsWithRef,
|
|
2
|
+
import { CSSProperties, ComponentProps, ComponentPropsWithRef, ReactNode, RefObject } from "react";
|
|
3
3
|
import { Button } from "@base-ui/react/button";
|
|
4
4
|
import { useRender } from "@base-ui/react/use-render";
|
|
5
|
-
import { Announcements, CollisionDetection, DragEndEvent, DragOverEvent, DragStartEvent, DropAnimation, KeyboardCoordinateGetter, KeyboardSensorOptions, Modifier, PointerSensor,
|
|
5
|
+
import { Announcements, CollisionDetection, DragEndEvent, DragOverEvent, DragStartEvent, DropAnimation, KeyboardCoordinateGetter, KeyboardSensorOptions, Modifier, PointerSensor, ScreenReaderInstructions, TouchSensor, TouchSensorOptions, UniqueIdentifier } from "@dnd-kit/core";
|
|
6
6
|
import { Combobox } from "@base-ui/react/combobox";
|
|
7
7
|
import { SortingStrategy } from "@dnd-kit/sortable";
|
|
8
8
|
import { Meter as Meter$1 } from "@base-ui/react/meter";
|
|
@@ -305,14 +305,10 @@ type HoldThenMoveOptions = {
|
|
|
305
305
|
export declare const HoldThenMoveTouchSensor: typeof TouchSensor;
|
|
306
306
|
/**
|
|
307
307
|
* dnd-kit's PointerSensor for a mouse and a pen only: a finger's pointerdown is
|
|
308
|
-
* left to `HoldThenMoveTouchSensor`.
|
|
308
|
+
* left to `HoldThenMoveTouchSensor`. While it holds a drag, Escape puts the
|
|
309
|
+
* item back and reaches nothing else.
|
|
309
310
|
*/
|
|
310
|
-
export declare
|
|
311
|
-
static activators: {
|
|
312
|
-
eventName: "onPointerDown";
|
|
313
|
-
handler: (event: PointerEvent, options: PointerSensorOptions) => boolean;
|
|
314
|
-
}[];
|
|
315
|
-
}
|
|
311
|
+
export declare const MouseOnlyPointerSensor: typeof PointerSensor;
|
|
316
312
|
/**
|
|
317
313
|
* `useSensor(HoldThenMoveTouchSensor, …)` with the activation the sensor relies
|
|
318
314
|
* on: no constraint dnd-kit would act on by itself, so only a move after the
|
|
@@ -358,6 +354,11 @@ type DragSensorsOptions = {
|
|
|
358
354
|
* - the keyboard: Space picks up, the arrows move, Space drops, Escape puts
|
|
359
355
|
* back. Enter never starts a drag.
|
|
360
356
|
*
|
|
357
|
+
* However the drag started, Escape during it only puts the item back: it is
|
|
358
|
+
* taken in the capture phase on the window and stopped, so no app handler
|
|
359
|
+
* (a dialog, a panel, a popover that closes on Escape) hears it. Once the drag
|
|
360
|
+
* is over, Escape reaches the app again.
|
|
361
|
+
*
|
|
361
362
|
* Pass the options, or only the keyboard's `coordinateGetter`.
|
|
362
363
|
*/
|
|
363
364
|
export declare function useDragSensors(options?: DragSensorsOptions | KeyboardCoordinateGetter): import("@dnd-kit/core").SensorDescriptor<import("@dnd-kit/core").SensorOptions>[];
|
|
@@ -539,6 +540,11 @@ type DragRefusalHintProps = Omit<ComponentPropsWithRef<"div">, "children" | "ref
|
|
|
539
540
|
* not-allowed cursor. Render it only while the place is refused, inside the
|
|
540
541
|
* `DndContext`, with no placeholder anywhere. Announce the reason as well:
|
|
541
542
|
* the chip is not read out.
|
|
543
|
+
*
|
|
544
|
+
* The chip sits right of and below the pointer. Near the window's right edge
|
|
545
|
+
* it goes left of the pointer and of the lifted copy, near the bottom edge
|
|
546
|
+
* above the pointer; it never sits under the copy, and always stays 8px inside
|
|
547
|
+
* the window. Its size is measured when its content changes, not every frame.
|
|
542
548
|
*/
|
|
543
549
|
export declare function DragRefusalHint({ children, container, className, style, ...props }: DragRefusalHintProps): import("react").ReactPortal | null;
|
|
544
550
|
//#endregion
|
package/dist/wip.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { cn } from "./cn.mjs";
|
|
2
|
-
import { $i as DialogContent, A as DRAG_AUTO_SCROLL_ZONE_PX, Ai as ListRow, B as useDragSiblingTransition, Bn as RadioGroupItem, Br as TOUCH_DRAG_TOLERANCE_PX, C as DropPlaceholder, D as listKeyboardCoordinates, Da as tv, Di as Checkbox, E as MOUSE_DRAG_DISTANCE_PX, F as DROP_GLIDE, G as SILENT_DRAG_ANNOUNCEMENTS, Gi as TooltipTrigger, Gn as measureContent, H as LIFT_CLASS, Hi as TooltipContent, Hn as InputGroupAddon, Hr as useMouseOnlyPointerSensor, I as DragLift, Ir as HoldThenMoveTouchSensor, It as MessageReferenceReadMark, J as dragMessages, Ji as DialogSheetContent, Jn as readNow, K as createDragAnnouncements, Kn as measureElement, L as ORIGIN_OPACITY, Li as ListRowMeta, Lr as MouseOnlyPointerSensor, M as DRAG_LIFT_Z_INDEX, Mi as ListRowBottom, Mt as MessageReferenceIcon, N as DRAG_SETTLE, O as useDragAcrossLists, P as DRAG_SIBLING_TRANSITION, Pi as ListRowDescription, Q as MessageListJumpPillGroup, Qi as DialogClose, Qn as PreviewCardBody, R as cancelDrag, Ri as ListRowTitle, Rn as RadioGroup, Rr as TOUCH_DRAG_DISTANCE_PX, S as DragRefusalHint, Sa as useParentOverlayKind, Sr as PopoverActions, T as DragRemeasure, Ta as useTheme, Tr as PopoverBody, Un as InputGroupInput, Vi as Tooltip, Vn as InputGroup, Vr as useHoldThenMoveTouchSensor, W as DEFAULT_DRAG_MESSAGES, Wn as useOverflowTitle, X as MessageListJumpPill, Xi as Dialog, Xn as PreviewCardActions, Y as MessageListJumpControls, Z as MessageListJumpPillDismiss, _ as InboxItemTrailing, _a as Button$1, _r as MobileNavServerPopoverRow, a as InboxItemContext, b as useLatestRef, ba as defaultNativeButton, br as MobileNavServerPopoverRowLabel, c as InboxItemLeading, cn as MessageItemDelegatedAvatar, ct as MessageQuotedPreviewAuthorDelegatedBy, dn as MessageItemDelegatedByName, dr as MobileNavServerPopover, fr as MobileNavServerPopoverContent, g as InboxItemTitle, gr as MobileNavServerPopoverList, h as InboxItemTimestamp, hr as MobileNavServerPopoverGroup, i as InboxItemContent, ir as PreviewCardMeta, j as DRAG_KEYBOARD_OFFSET_PX, ji as ListRowBody, k as useDragSensors, la as DialogTitle, ln as MessageItemDelegatedBy, mr as MobileNavServerPopoverDestinations, na as DialogFooterNote, nr as PreviewCardFooter, o as InboxItemHeading, pa as TextLink, pr as MobileNavServerPopoverDestination, q as dragInstructions, qi as DialogCommit, qn as observeTruncation, r as InboxItemBody, sa as DialogSheetBack, t as InboxItem, ti as DropdownMenuLinkItem, tr as PreviewCardEyebrow, ua as DialogTrigger, un as MessageItemDelegatedByButton, ur as MobileNavServerItem, vr as MobileNavServerPopoverRowBody, w as DRAG_KEYBOARD_CODES, wa as useThemeScopeProps, x as Skeleton, xa as OverlayLayerProvider, y as inboxItem, ya as Spinner, yr as MobileNavServerPopoverRowDescription, z as keepGrabInside, zi as ListRowTop, zr as TOUCH_DRAG_HOLD_MS } from "./inbox-item-
|
|
2
|
+
import { $i as DialogContent, A as DRAG_AUTO_SCROLL_ZONE_PX, Ai as ListRow, B as useDragSiblingTransition, Bn as RadioGroupItem, Br as TOUCH_DRAG_TOLERANCE_PX, C as DropPlaceholder, D as listKeyboardCoordinates, Da as tv, Di as Checkbox, E as MOUSE_DRAG_DISTANCE_PX, F as DROP_GLIDE, G as SILENT_DRAG_ANNOUNCEMENTS, Gi as TooltipTrigger, Gn as measureContent, H as LIFT_CLASS, Hi as TooltipContent, Hn as InputGroupAddon, Hr as useMouseOnlyPointerSensor, I as DragLift, Ir as HoldThenMoveTouchSensor, It as MessageReferenceReadMark, J as dragMessages, Ji as DialogSheetContent, Jn as readNow, K as createDragAnnouncements, Kn as measureElement, L as ORIGIN_OPACITY, Li as ListRowMeta, Lr as MouseOnlyPointerSensor, M as DRAG_LIFT_Z_INDEX, Mi as ListRowBottom, Mt as MessageReferenceIcon, N as DRAG_SETTLE, O as useDragAcrossLists, P as DRAG_SIBLING_TRANSITION, Pi as ListRowDescription, Q as MessageListJumpPillGroup, Qi as DialogClose, Qn as PreviewCardBody, R as cancelDrag, Ri as ListRowTitle, Rn as RadioGroup, Rr as TOUCH_DRAG_DISTANCE_PX, S as DragRefusalHint, Sa as useParentOverlayKind, Sr as PopoverActions, T as DragRemeasure, Ta as useTheme, Tr as PopoverBody, Un as InputGroupInput, Vi as Tooltip, Vn as InputGroup, Vr as useHoldThenMoveTouchSensor, W as DEFAULT_DRAG_MESSAGES, Wn as useOverflowTitle, X as MessageListJumpPill, Xi as Dialog, Xn as PreviewCardActions, Y as MessageListJumpControls, Z as MessageListJumpPillDismiss, _ as InboxItemTrailing, _a as Button$1, _r as MobileNavServerPopoverRow, a as InboxItemContext, b as useLatestRef, ba as defaultNativeButton, br as MobileNavServerPopoverRowLabel, c as InboxItemLeading, cn as MessageItemDelegatedAvatar, ct as MessageQuotedPreviewAuthorDelegatedBy, dn as MessageItemDelegatedByName, dr as MobileNavServerPopover, fr as MobileNavServerPopoverContent, g as InboxItemTitle, gr as MobileNavServerPopoverList, h as InboxItemTimestamp, hr as MobileNavServerPopoverGroup, i as InboxItemContent, ir as PreviewCardMeta, j as DRAG_KEYBOARD_OFFSET_PX, ji as ListRowBody, k as useDragSensors, la as DialogTitle, ln as MessageItemDelegatedBy, mr as MobileNavServerPopoverDestinations, na as DialogFooterNote, nr as PreviewCardFooter, o as InboxItemHeading, pa as TextLink, pr as MobileNavServerPopoverDestination, q as dragInstructions, qi as DialogCommit, qn as observeTruncation, r as InboxItemBody, sa as DialogSheetBack, t as InboxItem, ti as DropdownMenuLinkItem, tr as PreviewCardEyebrow, ua as DialogTrigger, un as MessageItemDelegatedByButton, ur as MobileNavServerItem, vr as MobileNavServerPopoverRowBody, w as DRAG_KEYBOARD_CODES, wa as useThemeScopeProps, x as Skeleton, xa as OverlayLayerProvider, y as inboxItem, ya as Spinner, yr as MobileNavServerPopoverRowDescription, z as keepGrabInside, zi as ListRowTop, zr as TOUCH_DRAG_HOLD_MS } from "./inbox-item-BB6vO4PO.mjs";
|
|
3
3
|
import { Check, ChevronDown, LoaderCircle, Plus, Search, X } from "lucide-react";
|
|
4
4
|
import { createContext, use, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
|
|
5
5
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|