@dxos/react-ui-stack 0.7.5-feature-compute.4d9d99a → 0.7.5-labs.071a3e2

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.
@@ -36,6 +36,7 @@ __export(node_exports, {
36
36
  StackContext: () => StackContext,
37
37
  StackItem: () => StackItem,
38
38
  StackItemContext: () => StackItemContext,
39
+ autoScrollRootAttributes: () => autoScrollRootAttributes,
39
40
  railGridHorizontal: () => railGridHorizontal,
40
41
  railGridVertical: () => railGridVertical,
41
42
  translations: () => translations_default,
@@ -43,7 +44,9 @@ __export(node_exports, {
43
44
  useStackItem: () => useStackItem
44
45
  });
45
46
  module.exports = __toCommonJS(node_exports);
47
+ var import_combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
46
48
  var import_adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
49
+ var import_element = require("@atlaskit/pragmatic-drag-and-drop-auto-scroll/element");
47
50
  var import_closest_edge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
48
51
  var import_react_tabster = require("@fluentui/react-tabster");
49
52
  var import_react_compose_refs = require("@radix-ui/react-compose-refs");
@@ -51,10 +54,10 @@ var import_react = __toESM(require("react"));
51
54
  var import_react_ui = require("@dxos/react-ui");
52
55
  var import_react_ui_theme = require("@dxos/react-ui-theme");
53
56
  var import_react2 = require("react");
54
- var import_combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
57
+ var import_combine2 = require("@atlaskit/pragmatic-drag-and-drop/combine");
55
58
  var import_adapter2 = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
56
- var import_disable_native_drag_preview = require("@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview");
57
- var import_prevent_unhandled = require("@atlaskit/pragmatic-drag-and-drop/prevent-unhandled");
59
+ var import_preserve_offset_on_source = require("@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source");
60
+ var import_scroll_just_enough_into_view = require("@atlaskit/pragmatic-drag-and-drop/element/scroll-just-enough-into-view");
58
61
  var import_closest_edge2 = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
59
62
  var import_react_tabster2 = require("@fluentui/react-tabster");
60
63
  var import_react_compose_refs2 = require("@radix-ui/react-compose-refs");
@@ -70,8 +73,8 @@ var import_react6 = __toESM(require("react"));
70
73
  var import_react_ui_attention = require("@dxos/react-ui-attention");
71
74
  var import_react_ui_theme4 = require("@dxos/react-ui-theme");
72
75
  var import_adapter3 = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
73
- var import_disable_native_drag_preview2 = require("@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview");
74
- var import_prevent_unhandled2 = require("@atlaskit/pragmatic-drag-and-drop/prevent-unhandled");
76
+ var import_disable_native_drag_preview = require("@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview");
77
+ var import_prevent_unhandled = require("@atlaskit/pragmatic-drag-and-drop/prevent-unhandled");
75
78
  var import_react7 = __toESM(require("react"));
76
79
  var import_react_ui_theme5 = require("@dxos/react-ui-theme");
77
80
  var import_react8 = __toESM(require("react"));
@@ -99,6 +102,9 @@ var StackItemContext = /* @__PURE__ */ (0, import_react2.createContext)({
99
102
  var useStackItem = () => (0, import_react2.useContext)(StackItemContext);
100
103
  var railGridHorizontal = "grid-rows-[[rail-start]_var(--rail-size)_[content-start]_1fr_[content-end]]";
101
104
  var railGridVertical = "grid-cols-[[rail-start]_var(--rail-size)_[content-start]_1fr_[content-end]]";
105
+ var autoScrollRootAttributes = {
106
+ "data-drag-autoscroll": "idle"
107
+ };
102
108
  var Stack = /* @__PURE__ */ (0, import_react.forwardRef)(({ children, classNames, style, orientation = "vertical", rail = true, size = "intrinsic", onRearrange, itemsCount = import_react.Children.count(children), ...props }, forwardedRef) => {
103
109
  const [stackElement, stackRef] = (0, import_react.useState)(null);
104
110
  const composedItemRef = (0, import_react_compose_refs.composeRefs)(stackRef, forwardedRef);
@@ -116,7 +122,7 @@ var Stack = /* @__PURE__ */ (0, import_react.forwardRef)(({ children, classNames
116
122
  return;
117
123
  }
118
124
  const acceptSourceType = orientation === "horizontal" ? "column" : "card";
119
- return (0, import_adapter.dropTargetForElements)({
125
+ return (0, import_combine.combine)((0, import_adapter.dropTargetForElements)({
120
126
  element: stackElement,
121
127
  getData: ({ input, element }) => {
122
128
  return (0, import_closest_edge.attachClosestEdge)({
@@ -147,10 +153,14 @@ var Stack = /* @__PURE__ */ (0, import_react.forwardRef)(({ children, classNames
147
153
  onRearrange(source.data, self.data, (0, import_closest_edge.extractClosestEdge)(self.data));
148
154
  }
149
155
  }
150
- });
156
+ }), (0, import_element.autoScrollForElements)({
157
+ element: stackElement,
158
+ getAllowedAxis: () => orientation
159
+ }));
151
160
  }, [
152
161
  stackElement,
153
- selfDroppable
162
+ selfDroppable,
163
+ orientation
154
164
  ]);
155
165
  return /* @__PURE__ */ import_react.default.createElement(StackContext.Provider, {
156
166
  value: {
@@ -162,11 +172,15 @@ var Stack = /* @__PURE__ */ (0, import_react.forwardRef)(({ children, classNames
162
172
  }, /* @__PURE__ */ import_react.default.createElement("div", {
163
173
  ...props,
164
174
  ...arrowNavigationGroup,
165
- className: (0, import_react_ui_theme.mx)("grid relative", rail ? orientation === "horizontal" ? railGridHorizontal : railGridVertical : orientation === "horizontal" ? "grid-rows-1" : "grid-cols-1", size === "contain" && (orientation === "horizontal" ? "overflow-x-auto min-bs-0 bs-full max-bs-full" : "overflow-y-auto min-is-0 is-full max-is-full"), classNames),
175
+ className: (0, import_react_ui_theme.mx)("grid relative", rail ? orientation === "horizontal" ? railGridHorizontal : railGridVertical : orientation === "horizontal" ? "grid-rows-1 pli-1" : "grid-cols-1 plb-1", size === "contain" && (orientation === "horizontal" ? "overflow-x-auto min-bs-0 bs-full max-bs-full" : "overflow-y-auto min-is-0 is-full max-is-full"), classNames),
176
+ "data-rail": rail,
166
177
  "aria-orientation": orientation,
167
178
  style: styles,
168
179
  ref: composedItemRef
169
180
  }, children, selfDroppable && dropping && /* @__PURE__ */ import_react.default.createElement(import_react_ui.ListItem.DropIndicator, {
181
+ lineInset: 8,
182
+ terminalInset: -8,
183
+ gap: -8,
170
184
  edge: orientation === "horizontal" ? "left" : "top"
171
185
  })));
172
186
  });
@@ -208,7 +222,7 @@ var StackItemHeading = ({ children, classNames, ...props }) => {
208
222
  ...props,
209
223
  tabIndex: 0,
210
224
  ...focusableGroupAttrs,
211
- className: (0, import_react_ui_theme4.mx)("flex items-center ch-focus-ring-inset-over-all relative !border-is-0", orientation === "horizontal" ? "bs-[--rail-size]" : "is-[--rail-size] flex-col", classNames)
225
+ className: (0, import_react_ui_theme4.mx)("flex items-center dx-focus-ring-inset-over-all relative !border-is-0", orientation === "horizontal" ? "bs-[--rail-size]" : "is-[--rail-size] flex-col", classNames)
212
226
  }, children);
213
227
  };
214
228
  var StackItemHeadingLabel = /* @__PURE__ */ (0, import_react6.forwardRef)(({ attendableId, related, classNames, ...props }, forwardedRef) => {
@@ -221,7 +235,8 @@ var StackItemHeadingLabel = /* @__PURE__ */ (0, import_react6.forwardRef)(({ att
221
235
  });
222
236
  });
223
237
  var REM = parseFloat(getComputedStyle(document.documentElement).fontSize);
224
- var MIN_SIZE = 20;
238
+ var MIN_WIDTH = 20;
239
+ var MIN_HEIGHT = 3;
225
240
  var measureStackItem = (element) => {
226
241
  const stackItemElement = element.closest("[data-dx-stack-item]");
227
242
  return stackItemElement?.getBoundingClientRect() ?? {
@@ -230,7 +245,7 @@ var measureStackItem = (element) => {
230
245
  };
231
246
  };
232
247
  var getNextSize = (startSize, location, client) => {
233
- return Math.max(MIN_SIZE, startSize + (location.current.input[client] - location.initial.input[client]) / REM);
248
+ return Math.max(client === "clientX" ? MIN_WIDTH : MIN_HEIGHT, startSize + (location.current.input[client] - location.initial.input[client]) / REM);
234
249
  };
235
250
  var StackItemResizeHandle = () => {
236
251
  const { orientation } = useStack();
@@ -245,10 +260,10 @@ var StackItemResizeHandle = () => {
245
260
  (0, import_adapter3.draggable)({
246
261
  element: buttonRef.current,
247
262
  onGenerateDragPreview: ({ nativeSetDragImage }) => {
248
- (0, import_disable_native_drag_preview2.disableNativeDragPreview)({
263
+ (0, import_disable_native_drag_preview.disableNativeDragPreview)({
249
264
  nativeSetDragImage
250
265
  });
251
- import_prevent_unhandled2.preventUnhandled.start();
266
+ import_prevent_unhandled.preventUnhandled.start();
252
267
  },
253
268
  onDragStart: () => {
254
269
  dragStartSize.current = dragStartSize.current === "min-content" ? measureStackItem(buttonRef.current)[orientation === "horizontal" ? "width" : "height"] / REM : dragStartSize.current;
@@ -271,18 +286,20 @@ var StackItemResizeHandle = () => {
271
286
  }, []);
272
287
  return /* @__PURE__ */ import_react7.default.createElement("button", {
273
288
  ref: buttonRef,
274
- className: (0, import_react_ui_theme5.mx)(orientation === "horizontal" ? "cursor-col-resize" : "cursor-row-resize", "group absolute is-3 bs-full inline-end-[-1px] !border-lb-0", "before:transition-opacity before:duration-100 before:ease-in-out before:opacity-0 hover:before:opacity-100 focus-visible:before:opacity-100 active:before:opacity-100", "before:absolute before:block before:inset-block-0 before:inline-end-0 before:is-1 before:bg-accentFocusIndicator")
289
+ className: (0, import_react_ui_theme5.mx)("group absolute", orientation === "horizontal" ? "cursor-col-resize is-3 bs-full inline-end-[-1px] !border-lb-0 before:inset-block-0 before:inline-end-0 before:is-1" : "cursor-row-resize bs-3 is-full block-end-[-1px] !border-li-0 before:inset-inline-0 before:block-end-0 before:bs-1", "before:transition-opacity before:duration-100 before:ease-in-out before:opacity-0 hover:before:opacity-100 focus-visible:before:opacity-100 active:before:opacity-100", "before:absolute before:block before:bg-accentFocusIndicator")
275
290
  }, /* @__PURE__ */ import_react7.default.createElement("div", {
276
291
  role: "none",
277
- className: "absolute block-start-0 inline-end-[1px] bs-[--rail-size] flex items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0"
278
- }, /* @__PURE__ */ import_react7.default.createElement(DragHandleSignifier, null)));
292
+ className: (0, import_react_ui_theme5.mx)("absolute flex items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0", orientation === "horizontal" ? "block-start-0 inline-end-px bs-[--rail-size]" : "inline-start-0 block-end-px is-[--rail-size] flex justify-center")
293
+ }, /* @__PURE__ */ import_react7.default.createElement(DragHandleSignifier, {
294
+ orientation
295
+ })));
279
296
  };
280
- var DragHandleSignifier = () => {
297
+ var DragHandleSignifier = ({ orientation }) => {
281
298
  return /* @__PURE__ */ import_react7.default.createElement("svg", {
282
299
  xmlns: "http://www.w3.org/2000/svg",
283
300
  viewBox: "0 0 256 256",
284
301
  fill: "currentColor",
285
- className: "shrink-0 bs-[1em] is-[1em] text-unAccent"
302
+ className: (0, import_react_ui_theme5.mx)("shrink-0 bs-[1em] is-[1em] text-unAccent", orientation === "vertical" && "rotate-90")
286
303
  }, /* @__PURE__ */ import_react7.default.createElement("path", {
287
304
  d: "M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
288
305
  }), /* @__PURE__ */ import_react7.default.createElement("path", {
@@ -333,7 +350,7 @@ var StackItemSigilButton = /* @__PURE__ */ (0, import_react8.forwardRef)(({ atte
333
350
  ...props,
334
351
  variant,
335
352
  classNames: [
336
- "shrink-0 pli-0 min-bs-0 is-[--rail-action] bs-[--rail-action] relative",
353
+ "shrink-0 pli-0 min-bs-0 is-[--rail-action] bs-[--rail-action] relative app-no-drag",
337
354
  classNames
338
355
  ],
339
356
  ref: forwardedRef
@@ -343,18 +360,23 @@ var StackItemSigil = /* @__PURE__ */ (0, import_react8.forwardRef)(({ actions: a
343
360
  const { t } = (0, import_react_ui3.useTranslation)(translationKey);
344
361
  const suppressNextTooltip = (0, import_react8.useRef)(false);
345
362
  const [optionsMenuOpen, setOptionsMenuOpen] = (0, import_react8.useState)(false);
346
- const [triggerTooltipOpen, setTriggerTooltipOpen] = (0, import_react8.useState)(false);
347
- return /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.Tooltip.Root, {
348
- open: triggerTooltipOpen,
349
- onOpenChange: (nextOpen) => {
350
- if (suppressNextTooltip.current) {
351
- setTriggerTooltipOpen(false);
352
- suppressNextTooltip.current = false;
353
- } else {
354
- setTriggerTooltipOpen(nextOpen);
355
- }
356
- }
357
- }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.DropdownMenu.Root, {
363
+ const hasActions = actionGroups && actionGroups.length > 0;
364
+ const button = /* @__PURE__ */ import_react8.default.createElement(StackItemSigilButton, {
365
+ attendableId,
366
+ related,
367
+ // TODO(wittjosiah): Better disabling of interactive styles when no action are available.
368
+ // Remove underscore icon when no actions are available?
369
+ classNames: !hasActions && "cursor-default"
370
+ }, /* @__PURE__ */ import_react8.default.createElement("span", {
371
+ className: "sr-only"
372
+ }, triggerLabel), /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.Icon, {
373
+ icon,
374
+ size: 5
375
+ }));
376
+ if (!hasActions) {
377
+ return button;
378
+ }
379
+ return /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.DropdownMenu.Root, {
358
380
  open: optionsMenuOpen,
359
381
  onOpenChange: (nextOpen) => {
360
382
  if (!nextOpen) {
@@ -362,20 +384,10 @@ var StackItemSigil = /* @__PURE__ */ (0, import_react8.forwardRef)(({ actions: a
362
384
  }
363
385
  return setOptionsMenuOpen(nextOpen);
364
386
  }
365
- }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.Tooltip.Trigger, {
366
- asChild: true
367
387
  }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.DropdownMenu.Trigger, {
368
388
  asChild: true,
369
389
  ref: forwardedRef
370
- }, /* @__PURE__ */ import_react8.default.createElement(StackItemSigilButton, {
371
- attendableId,
372
- related
373
- }, /* @__PURE__ */ import_react8.default.createElement("span", {
374
- className: "sr-only"
375
- }, triggerLabel), /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.Icon, {
376
- icon,
377
- size: 5
378
- })))), /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.DropdownMenu.Portal, null, /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.DropdownMenu.Content, {
390
+ }, button), /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.DropdownMenu.Portal, null, /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.DropdownMenu.Content, {
379
391
  classNames: "z-[31]"
380
392
  }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.DropdownMenu.Viewport, null, actionGroups?.map((actions, index) => {
381
393
  const separator = index > 0 ? /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.DropdownMenu.Separator, null) : null;
@@ -416,14 +428,12 @@ var StackItemSigil = /* @__PURE__ */ (0, import_react8.forwardRef)(({ actions: a
416
428
  className: (0, import_react_ui_theme6.mx)("shrink-0", import_react_ui_theme6.descriptionText)
417
429
  }, (0, import_keyboard.keySymbols)(shortcut).join("")));
418
430
  }));
419
- }), children), /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.DropdownMenu.Arrow, null)))), /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.Tooltip.Portal, null, /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.Tooltip.Content, {
420
- side: "bottom"
421
- }, triggerLabel, /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.Tooltip.Arrow, null))));
431
+ }), children), /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.DropdownMenu.Arrow, null))));
422
432
  });
423
433
  var DEFAULT_HORIZONTAL_SIZE = 44;
424
434
  var DEFAULT_VERTICAL_SIZE = "min-content";
425
435
  var DEFAULT_EXTRINSIC_SIZE = DEFAULT_HORIZONTAL_SIZE;
426
- var StackItemRoot = /* @__PURE__ */ (0, import_react3.forwardRef)(({ item, children, classNames, size: propsSize, onSizeChange, role, order, style, ...props }, forwardedRef) => {
436
+ var StackItemRoot = /* @__PURE__ */ (0, import_react3.forwardRef)(({ item, children, classNames, size: propsSize, onSizeChange, role, order, style, disableRearrange, focusIndicatorVariant = "over-all", ...props }, forwardedRef) => {
427
437
  const [itemElement, itemRef] = (0, import_react3.useState)(null);
428
438
  const [selfDragHandleElement, selfDragHandleRef] = (0, import_react3.useState)(null);
429
439
  const [closestEdge, setEdge] = (0, import_react3.useState)(null);
@@ -441,10 +451,10 @@ var StackItemRoot = /* @__PURE__ */ (0, import_react3.forwardRef)(({ item, child
441
451
  ]);
442
452
  const type = orientation === "horizontal" ? "column" : "card";
443
453
  (0, import_react3.useLayoutEffect)(() => {
444
- if (!itemElement || !onRearrange) {
454
+ if (!itemElement || !onRearrange || disableRearrange) {
445
455
  return;
446
456
  }
447
- return (0, import_combine.combine)((0, import_adapter2.draggable)({
457
+ return (0, import_combine2.combine)((0, import_adapter2.draggable)({
448
458
  element: itemElement,
449
459
  ...selfDragHandleElement && {
450
460
  dragHandle: selfDragHandleElement
@@ -453,12 +463,25 @@ var StackItemRoot = /* @__PURE__ */ (0, import_react3.forwardRef)(({ item, child
453
463
  id: item.id,
454
464
  type
455
465
  }),
456
- // TODO(thure): tabster focus honeypots are causing the preview to render with the wrong dimensions; what do?
457
- onGenerateDragPreview: ({ nativeSetDragImage }) => {
458
- (0, import_disable_native_drag_preview.disableNativeDragPreview)({
459
- nativeSetDragImage
466
+ onGenerateDragPreview: ({ nativeSetDragImage, source, location }) => {
467
+ document.body.setAttribute("data-drag-preview", "true");
468
+ (0, import_scroll_just_enough_into_view.scrollJustEnoughIntoView)({
469
+ element: source.element
460
470
  });
461
- import_prevent_unhandled.preventUnhandled.start();
471
+ const { x, y } = (0, import_preserve_offset_on_source.preserveOffsetOnSource)({
472
+ element: source.element,
473
+ input: location.current.input
474
+ })({
475
+ container: source.element.offsetParent ?? document.body
476
+ });
477
+ nativeSetDragImage?.(source.element, x, y);
478
+ },
479
+ onDragStart: () => {
480
+ document.body.removeAttribute("data-drag-preview");
481
+ itemElement?.closest("[data-drag-autoscroll]")?.setAttribute("data-drag-autoscroll", "active");
482
+ },
483
+ onDrop: () => {
484
+ itemElement?.closest("[data-drag-autoscroll]")?.setAttribute("data-drag-autoscroll", "idle");
462
485
  }
463
486
  }), (0, import_adapter2.dropTargetForElements)({
464
487
  element: itemElement,
@@ -516,7 +539,7 @@ var StackItemRoot = /* @__PURE__ */ (0, import_react3.forwardRef)(({ item, child
516
539
  ...props,
517
540
  tabIndex: 0,
518
541
  ...focusGroupAttrs,
519
- className: (0, import_react_ui_theme2.mx)("group/stack-item grid relative ch-focus-ring-inset-over-all", size === "min-content" && (orientation === "horizontal" ? "is-min" : "bs-min"), orientation === "horizontal" ? "grid-rows-subgrid" : "grid-cols-subgrid", rail && (orientation === "horizontal" ? "row-span-2" : "col-span-2"), classNames),
542
+ className: (0, import_react_ui_theme2.mx)("group/stack-item grid relative", focusIndicatorVariant === "over-all" ? "dx-focus-ring-inset-over-all" : orientation === "horizontal" ? "dx-focus-ring-group-x" : "dx-focus-ring-group-y", size === "min-content" && (orientation === "horizontal" ? "is-min" : "bs-min"), orientation === "horizontal" ? "grid-rows-subgrid" : "grid-cols-subgrid", rail && (orientation === "horizontal" ? "row-span-2" : "col-span-2"), classNames),
520
543
  "data-dx-stack-item": true,
521
544
  style: {
522
545
  ...size !== "min-content" && {
@@ -529,6 +552,8 @@ var StackItemRoot = /* @__PURE__ */ (0, import_react3.forwardRef)(({ item, child
529
552
  },
530
553
  ref: composedItemRef
531
554
  }, children, closestEdge && /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.ListItem.DropIndicator, {
555
+ lineInset: 8,
556
+ terminalInset: -8,
532
557
  edge: closestEdge
533
558
  })));
534
559
  });
@@ -614,6 +639,7 @@ var LayoutControls = /* @__PURE__ */ (0, import_react10.forwardRef)(({ onClick,
614
639
  StackContext,
615
640
  StackItem,
616
641
  StackItemContext,
642
+ autoScrollRootAttributes,
617
643
  railGridHorizontal,
618
644
  railGridVertical,
619
645
  translations,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/Stack.tsx", "../../../src/components/StackContext.tsx", "../../../src/components/StackItem.tsx", "../../../src/components/StackItemContent.tsx", "../../../src/components/StackItemDragHandle.tsx", "../../../src/components/StackItemHeading.tsx", "../../../src/components/StackItemResizeHandle.tsx", "../../../src/components/StackItemSigil.tsx", "../../../src/components/MenuSignifier.tsx", "../../../src/translations.ts", "../../../src/components/LayoutControls.tsx"],
4
- "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\nimport { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { composeRefs } from '@radix-ui/react-compose-refs';\nimport React, {\n Children,\n type CSSProperties,\n type ComponentPropsWithRef,\n forwardRef,\n useLayoutEffect,\n useState,\n} from 'react';\n\nimport { type ThemedClassName, ListItem } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { type StackContextValue, StackContext, type StackItemData } from './StackContext';\n\nexport type Orientation = 'horizontal' | 'vertical';\nexport type Size = 'intrinsic' | 'contain';\n\nexport type StackProps = Omit<ThemedClassName<ComponentPropsWithRef<'div'>>, 'aria-orientation'> &\n Partial<StackContextValue> & { itemsCount?: number };\n\nexport const railGridHorizontal = 'grid-rows-[[rail-start]_var(--rail-size)_[content-start]_1fr_[content-end]]';\n\nexport const railGridVertical = 'grid-cols-[[rail-start]_var(--rail-size)_[content-start]_1fr_[content-end]]';\n\nexport const Stack = forwardRef<HTMLDivElement, StackProps>(\n (\n {\n children,\n classNames,\n style,\n orientation = 'vertical',\n rail = true,\n size = 'intrinsic',\n onRearrange,\n itemsCount = Children.count(children),\n ...props\n },\n forwardedRef,\n ) => {\n const [stackElement, stackRef] = useState<HTMLDivElement | null>(null);\n const composedItemRef = composeRefs<HTMLDivElement>(stackRef, forwardedRef);\n const [dropping, setDropping] = useState(false);\n\n const arrowNavigationGroup = useArrowNavigationGroup({ axis: orientation });\n\n const styles: CSSProperties = {\n [orientation === 'horizontal' ? 'gridTemplateColumns' : 'gridTemplateRows']: `repeat(${itemsCount}, min-content)`,\n ...style,\n };\n\n const selfDroppable = !!(itemsCount < 1 && onRearrange && props.id);\n\n useLayoutEffect(() => {\n if (!stackElement || !selfDroppable) {\n return;\n }\n const acceptSourceType = orientation === 'horizontal' ? 'column' : 'card';\n return dropTargetForElements({\n element: stackElement,\n getData: ({ input, element }) => {\n return attachClosestEdge(\n { id: props.id, type: orientation === 'horizontal' ? 'card' : 'column' },\n { input, element, allowedEdges: [orientation === 'horizontal' ? 'left' : 'top'] },\n );\n },\n onDragEnter: ({ source }) => {\n if (source.data.type === acceptSourceType) {\n setDropping(true);\n }\n },\n onDrag: ({ source }) => {\n if (source.data.type === acceptSourceType) {\n setDropping(true);\n }\n },\n onDragLeave: () => setDropping(false),\n onDrop: ({ self, source }) => {\n setDropping(false);\n if (source.data.type === acceptSourceType && selfDroppable) {\n onRearrange(source.data as StackItemData, self.data as StackItemData, extractClosestEdge(self.data));\n }\n },\n });\n }, [stackElement, selfDroppable]);\n\n return (\n <StackContext.Provider value={{ orientation, rail, size, onRearrange }}>\n <div\n {...props}\n {...arrowNavigationGroup}\n className={mx(\n 'grid relative',\n rail\n ? orientation === 'horizontal'\n ? railGridHorizontal\n : railGridVertical\n : orientation === 'horizontal'\n ? 'grid-rows-1'\n : 'grid-cols-1',\n size === 'contain' &&\n (orientation === 'horizontal'\n ? 'overflow-x-auto min-bs-0 bs-full max-bs-full'\n : 'overflow-y-auto min-is-0 is-full max-is-full'),\n classNames,\n )}\n aria-orientation={orientation}\n style={styles}\n ref={composedItemRef}\n >\n {children}\n {selfDroppable && dropping && <ListItem.DropIndicator edge={orientation === 'horizontal' ? 'left' : 'top'} />}\n </div>\n </StackContext.Provider>\n );\n },\n);\n\nexport { StackContext };\nexport type { StackContextValue };\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';\nimport { createContext, useContext } from 'react';\n\nimport { type Orientation, type Size } from './Stack';\n\nexport type StackItemSize = number | 'min-content';\n\nexport type StackItemData = { id: string; type: 'column' | 'card' };\n\nexport type StackItemRearrangeHandler = (\n source: StackItemData,\n target: StackItemData,\n closestEdge: Edge | null,\n) => void;\n\nexport type StackContextValue = {\n orientation: Orientation;\n rail: boolean;\n size: Size;\n onRearrange?: StackItemRearrangeHandler;\n};\n\nexport const StackContext = createContext<StackContextValue>({\n orientation: 'vertical',\n rail: true,\n size: 'intrinsic',\n});\n\nexport const useStack = () => useContext(StackContext);\n\nexport type StackItemContextValue = {\n selfDragHandleRef: (element: HTMLDivElement | null) => void;\n size: StackItemSize;\n setSize: (nextSize: StackItemSize, commit?: boolean) => void;\n};\n\nexport const StackItemContext = createContext<StackItemContextValue>({\n selfDragHandleRef: () => {},\n size: 'min-content',\n setSize: () => {},\n});\n\nexport const useStackItem = () => useContext(StackItemContext);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';\nimport { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';\nimport {\n attachClosestEdge,\n extractClosestEdge,\n type Edge,\n} from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { composeRefs } from '@radix-ui/react-compose-refs';\nimport React, { forwardRef, useLayoutEffect, useState, type ComponentPropsWithRef, useCallback } from 'react';\n\nimport { type ThemedClassName, ListItem } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { useStack, StackItemContext, type StackItemSize, type StackItemData } from './StackContext';\nimport { StackItemContent, type StackItemContentProps } from './StackItemContent';\nimport { StackItemDragHandle, type StackItemDragHandleProps } from './StackItemDragHandle';\nimport {\n StackItemHeading,\n StackItemHeadingLabel,\n type StackItemHeadingProps,\n type StackItemHeadingLabelProps,\n} from './StackItemHeading';\nimport { StackItemResizeHandle, type StackItemResizeHandleProps } from './StackItemResizeHandle';\nimport {\n StackItemSigil,\n type StackItemSigilProps,\n type StackItemSigilAction,\n type StackItemSigilButtonProps,\n StackItemSigilButton,\n} from './StackItemSigil';\n\nexport const DEFAULT_HORIZONTAL_SIZE = 44 satisfies StackItemSize;\nexport const DEFAULT_VERTICAL_SIZE = 'min-content' satisfies StackItemSize;\nexport const DEFAULT_EXTRINSIC_SIZE = DEFAULT_HORIZONTAL_SIZE satisfies StackItemSize;\n\nexport type StackItemRootProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {\n item: Omit<StackItemData, 'type'>;\n order?: number;\n size?: StackItemSize;\n onSizeChange?: (nextSize: StackItemSize) => void;\n role?: 'article' | 'section';\n};\n\nconst StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(\n ({ item, children, classNames, size: propsSize, onSizeChange, role, order, style, ...props }, forwardedRef) => {\n const [itemElement, itemRef] = useState<HTMLDivElement | null>(null);\n const [selfDragHandleElement, selfDragHandleRef] = useState<HTMLDivElement | null>(null);\n const [closestEdge, setEdge] = useState<Edge | null>(null);\n const { orientation, rail, onRearrange } = useStack();\n const [size = orientation === 'horizontal' ? DEFAULT_HORIZONTAL_SIZE : DEFAULT_VERTICAL_SIZE, setInternalSize] =\n useState(propsSize);\n\n const Root = role ?? 'div';\n\n const composedItemRef = composeRefs<HTMLDivElement>(itemRef, forwardedRef);\n\n const setSize = useCallback(\n (nextSize: StackItemSize, commit?: boolean) => {\n setInternalSize(nextSize);\n if (commit) {\n onSizeChange?.(nextSize);\n }\n },\n [onSizeChange],\n );\n\n const type = orientation === 'horizontal' ? 'column' : 'card';\n\n useLayoutEffect(() => {\n if (!itemElement || !onRearrange) {\n return;\n }\n return combine(\n draggable({\n element: itemElement,\n ...(selfDragHandleElement && { dragHandle: selfDragHandleElement }),\n getInitialData: () => ({ id: item.id, type }),\n // TODO(thure): tabster focus honeypots are causing the preview to render with the wrong dimensions; what do?\n onGenerateDragPreview: ({ nativeSetDragImage }) => {\n disableNativeDragPreview({ nativeSetDragImage });\n preventUnhandled.start();\n },\n }),\n dropTargetForElements({\n element: itemElement,\n getData: ({ input, element }) => {\n return attachClosestEdge(\n { id: item.id, type },\n { input, element, allowedEdges: orientation === 'horizontal' ? ['left', 'right'] : ['top', 'bottom'] },\n );\n },\n onDragEnter: ({ self, source }) => {\n if (source.data.type === self.data.type) {\n setEdge(extractClosestEdge(self.data));\n }\n },\n onDrag: ({ self, source }) => {\n if (source.data.type === self.data.type) {\n setEdge(extractClosestEdge(self.data));\n }\n },\n onDragLeave: () => setEdge(null),\n onDrop: ({ self, source }) => {\n setEdge(null);\n if (source.data.type === self.data.type) {\n onRearrange(source.data as StackItemData, self.data as StackItemData, extractClosestEdge(self.data));\n }\n },\n }),\n );\n }, [orientation, item, onRearrange, selfDragHandleElement, itemElement]);\n\n const focusGroupAttrs = useFocusableGroup({ tabBehavior: 'limited' });\n\n return (\n <StackItemContext.Provider value={{ selfDragHandleRef, size, setSize }}>\n <Root\n {...props}\n tabIndex={0}\n {...focusGroupAttrs}\n className={mx(\n 'group/stack-item grid relative ch-focus-ring-inset-over-all',\n size === 'min-content' && (orientation === 'horizontal' ? 'is-min' : 'bs-min'),\n orientation === 'horizontal' ? 'grid-rows-subgrid' : 'grid-cols-subgrid',\n rail && (orientation === 'horizontal' ? 'row-span-2' : 'col-span-2'),\n classNames,\n )}\n data-dx-stack-item\n style={{\n ...(size !== 'min-content' && {\n [orientation === 'horizontal' ? 'inlineSize' : 'blockSize']: `${size}rem`,\n }),\n ...(Number.isFinite(order) && {\n [orientation === 'horizontal' ? 'gridColumn' : 'gridRow']: `${order}`,\n }),\n ...style,\n }}\n ref={composedItemRef}\n >\n {children}\n {closestEdge && <ListItem.DropIndicator edge={closestEdge} />}\n </Root>\n </StackItemContext.Provider>\n );\n },\n);\n\nexport const StackItem = {\n Root: StackItemRoot,\n Content: StackItemContent,\n Heading: StackItemHeading,\n HeadingLabel: StackItemHeadingLabel,\n ResizeHandle: StackItemResizeHandle,\n DragHandle: StackItemDragHandle,\n Sigil: StackItemSigil,\n SigilButton: StackItemSigilButton,\n};\n\nexport type {\n StackItemContentProps,\n StackItemHeadingProps,\n StackItemHeadingLabelProps,\n StackItemResizeHandleProps,\n StackItemDragHandleProps,\n StackItemSigilProps,\n StackItemSigilButtonProps,\n StackItemSigilAction,\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { type ComponentPropsWithoutRef, forwardRef } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { useStack } from './StackContext';\n\nexport type StackItemContentProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & {\n /**\n * This flag is required in order to clarify a developer experience that seemed like it needed extra boilerplate\n * (`row-span-2`) or was buggy. See the description of the StackItem.Content component itself for more information.\n */\n toolbar: boolean;\n /**\n * Whether to provide for the layout of a statusbar after the content.\n */\n statusbar?: boolean;\n /**\n * Whether to set a certain aspect ratio on the content, including the toolbar and statusbar. This is provided for\n * convenience and consistency; it can instead be specified by the `classNames` or `style` props as needed.\n */\n size?: 'intrinsic' | 'video' | 'square';\n};\n\n/**\n * This component should be used by plugins for rendering content within a stack item, a.k.a. a “plank” or “section”.\n * The `toolbar` flag must be provided since this component provides for the layout of content with the toolbar.\n */\nexport const StackItemContent = forwardRef<HTMLDivElement, StackItemContentProps>(\n ({ children, toolbar, statusbar, classNames, size = 'intrinsic', ...props }, forwardedRef) => {\n const { size: stackItemSize } = useStack();\n\n return (\n <div\n role='none'\n {...props}\n className={mx(\n 'group grid grid-cols-[100%]',\n stackItemSize === 'contain' && 'min-bs-0 overflow-hidden',\n size === 'video' ? 'aspect-video' : size === 'square' && 'aspect-square',\n classNames,\n )}\n style={{\n gridTemplateRows: [\n ...(toolbar ? ['var(--rail-action)'] : []),\n '1fr',\n ...(statusbar ? ['var(--statusbar-size)'] : []),\n ].join(' '),\n }}\n ref={forwardedRef}\n >\n {children}\n </div>\n );\n },\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { Slot } from '@radix-ui/react-slot';\nimport React, { type ComponentPropsWithoutRef } from 'react';\n\nimport { useStackItem } from './StackContext';\n\nexport type StackItemDragHandleProps = ComponentPropsWithoutRef<'button'> & { asChild: boolean };\n\nexport const StackItemDragHandle = ({ asChild, children }: StackItemDragHandleProps) => {\n const { selfDragHandleRef } = useStackItem();\n\n const Root = asChild ? Slot : 'div';\n\n return (\n <Root ref={selfDragHandleRef} role='button'>\n {children}\n </Root>\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport React, { type ComponentPropsWithoutRef, type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { useAttention, type AttendableId, type Related } from '@dxos/react-ui-attention';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { useStack } from './StackContext';\n\nexport type StackItemHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;\n\nexport const StackItemHeading = ({ children, classNames, ...props }: StackItemHeadingProps) => {\n const { orientation } = useStack();\n const focusableGroupAttrs = useFocusableGroup({ tabBehavior: 'limited' });\n return (\n <div\n role='heading'\n {...props}\n tabIndex={0}\n {...focusableGroupAttrs}\n className={mx(\n 'flex items-center ch-focus-ring-inset-over-all relative !border-is-0',\n orientation === 'horizontal' ? 'bs-[--rail-size]' : 'is-[--rail-size] flex-col',\n classNames,\n )}\n >\n {children}\n </div>\n );\n};\n\nexport type StackItemHeadingLabelProps = ThemedClassName<ComponentPropsWithRef<'h1'>> & AttendableId & Related;\n\nexport const StackItemHeadingLabel = forwardRef<HTMLHeadingElement, StackItemHeadingLabelProps>(\n ({ attendableId, related, classNames, ...props }, forwardedRef) => {\n const { hasAttention, isAncestor, isRelated } = useAttention(attendableId);\n return (\n <h1\n {...props}\n data-attention={((related && isRelated) || hasAttention || isAncestor).toString()}\n className={mx(\n 'pli-1 min-is-0 is-0 grow truncate font-medium text-baseText data-[attention=true]:text-accentText self-center',\n classNames,\n )}\n ref={forwardedRef}\n />\n );\n },\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';\nimport { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';\nimport { type DragLocationHistory } from '@atlaskit/pragmatic-drag-and-drop/types';\nimport React, { useLayoutEffect, useRef } from 'react';\n\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { useStack, useStackItem, type StackItemSize } from './StackContext';\nimport { DEFAULT_EXTRINSIC_SIZE } from './StackItem';\n\nconst REM = parseFloat(getComputedStyle(document.documentElement).fontSize);\n\nconst MIN_SIZE = 20;\n\nconst measureStackItem = (element: HTMLButtonElement): { width: number; height: number } => {\n const stackItemElement = element.closest('[data-dx-stack-item]');\n return stackItemElement?.getBoundingClientRect() ?? { width: DEFAULT_EXTRINSIC_SIZE, height: DEFAULT_EXTRINSIC_SIZE };\n};\n\nconst getNextSize = (startSize: number, location: DragLocationHistory, client: 'clientX' | 'clientY') => {\n return Math.max(MIN_SIZE, startSize + (location.current.input[client] - location.initial.input[client]) / REM);\n};\n\nexport type StackItemResizeHandleProps = {};\n\nexport const StackItemResizeHandle = () => {\n const { orientation } = useStack();\n const { setSize, size } = useStackItem();\n const buttonRef = useRef<HTMLButtonElement>(null);\n const dragStartSize = useRef<StackItemSize>(size);\n const client = orientation === 'horizontal' ? 'clientX' : 'clientY';\n\n useLayoutEffect(\n () => {\n if (!buttonRef.current || buttonRef.current.hasAttribute('draggable')) {\n return;\n }\n // TODO(thure): This should handle StackItem state vs local state better.\n draggable({\n element: buttonRef.current,\n onGenerateDragPreview: ({ nativeSetDragImage }) => {\n // We will be moving the line to indicate a drag; we can disable the native drag preview.\n disableNativeDragPreview({ nativeSetDragImage });\n // We don't want any native drop animation for when the user does not drop on a drop target.\n // We want the drag to finish immediately.\n preventUnhandled.start();\n },\n onDragStart: () => {\n dragStartSize.current =\n dragStartSize.current === 'min-content'\n ? measureStackItem(buttonRef.current!)[orientation === 'horizontal' ? 'width' : 'height'] / REM\n : dragStartSize.current;\n },\n onDrag: ({ location }) => {\n if (typeof dragStartSize.current !== 'number') {\n return;\n }\n setSize(getNextSize(dragStartSize.current, location, client));\n },\n onDrop: ({ location }) => {\n if (typeof dragStartSize.current !== 'number') {\n return;\n }\n const nextSize = getNextSize(dragStartSize.current, location, client);\n setSize(nextSize, true);\n dragStartSize.current = nextSize;\n },\n });\n },\n [\n // Note that `size` should not be a dependency here since dragging this adjusts the size.\n ],\n );\n\n return (\n <button\n ref={buttonRef}\n className={mx(\n orientation === 'horizontal' ? 'cursor-col-resize' : 'cursor-row-resize',\n 'group absolute is-3 bs-full inline-end-[-1px] !border-lb-0',\n 'before:transition-opacity before:duration-100 before:ease-in-out before:opacity-0 hover:before:opacity-100 focus-visible:before:opacity-100 active:before:opacity-100',\n 'before:absolute before:block before:inset-block-0 before:inline-end-0 before:is-1 before:bg-accentFocusIndicator',\n )}\n >\n <div\n role='none'\n className='absolute block-start-0 inline-end-[1px] bs-[--rail-size] flex items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0'\n >\n <DragHandleSignifier />\n </div>\n </button>\n );\n};\n\nconst DragHandleSignifier = () => {\n return (\n <svg\n xmlns='http://www.w3.org/2000/svg'\n viewBox='0 0 256 256'\n fill='currentColor'\n className='shrink-0 bs-[1em] is-[1em] text-unAccent'\n >\n {/* two pips: <path d='M256,120c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' />\n <path d='M256,232c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' /> */}\n <path d='M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n <path d='M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n <path d='M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n <path d='M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n </svg>\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { Fragment, type PropsWithChildren, forwardRef, useRef, useState } from 'react';\n\nimport { type ActionLike } from '@dxos/app-graph';\nimport { keySymbols } from '@dxos/keyboard';\nimport {\n Button,\n type ButtonProps,\n DropdownMenu,\n Icon,\n toLocalizedString,\n Tooltip,\n useTranslation,\n} from '@dxos/react-ui';\nimport { type AttendableId, type Related, useAttention } from '@dxos/react-ui-attention';\nimport { descriptionText, mx } from '@dxos/react-ui-theme';\nimport { getHostPlatform } from '@dxos/util';\n\nimport { MenuSignifierHorizontal } from './MenuSignifier';\nimport { translationKey } from '../translations';\n\nexport type KeyBinding = {\n windows?: string;\n macos?: string;\n ios?: string;\n linux?: string;\n unknown?: string;\n};\n\nexport type StackItemSigilAction = Pick<ActionLike, 'id' | 'properties' | 'data'>;\n\nexport type StackItemSigilButtonProps = Omit<ButtonProps, 'variant'> & AttendableId & Related;\n\nexport const StackItemSigilButton = forwardRef<HTMLButtonElement, StackItemSigilButtonProps>(\n ({ attendableId, classNames, related, children, ...props }, forwardedRef) => {\n const { hasAttention, isAncestor, isRelated } = useAttention(attendableId);\n const variant = (related && isRelated) || hasAttention || isAncestor ? 'primary' : 'ghost';\n return (\n <Button\n {...props}\n variant={variant}\n classNames={['shrink-0 pli-0 min-bs-0 is-[--rail-action] bs-[--rail-action] relative', classNames]}\n ref={forwardedRef}\n >\n <MenuSignifierHorizontal />\n {children}\n </Button>\n );\n },\n);\n\nexport type StackItemSigilProps = PropsWithChildren<\n {\n attendableId?: string;\n triggerLabel: string;\n actions?: StackItemSigilAction[][];\n icon: string;\n onAction?: (action: StackItemSigilAction) => void;\n } & Related\n>;\n\nexport const StackItemSigil = forwardRef<HTMLButtonElement, StackItemSigilProps>(\n ({ actions: actionGroups, onAction, triggerLabel, attendableId, icon, related, children }, forwardedRef) => {\n const { t } = useTranslation(translationKey);\n const suppressNextTooltip = useRef(false);\n\n const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);\n const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);\n\n return (\n <Tooltip.Root\n open={triggerTooltipOpen}\n onOpenChange={(nextOpen) => {\n if (suppressNextTooltip.current) {\n setTriggerTooltipOpen(false);\n suppressNextTooltip.current = false;\n } else {\n setTriggerTooltipOpen(nextOpen);\n }\n }}\n >\n <DropdownMenu.Root\n {...{\n open: optionsMenuOpen,\n onOpenChange: (nextOpen: boolean) => {\n if (!nextOpen) {\n suppressNextTooltip.current = true;\n }\n return setOptionsMenuOpen(nextOpen);\n },\n }}\n >\n <Tooltip.Trigger asChild>\n <DropdownMenu.Trigger asChild ref={forwardedRef}>\n <StackItemSigilButton attendableId={attendableId} related={related}>\n <span className='sr-only'>{triggerLabel}</span>\n <Icon icon={icon} size={5} />\n </StackItemSigilButton>\n </DropdownMenu.Trigger>\n </Tooltip.Trigger>\n <DropdownMenu.Portal>\n <DropdownMenu.Content classNames='z-[31]'>\n <DropdownMenu.Viewport>\n {actionGroups?.map((actions, index) => {\n const separator = index > 0 ? <DropdownMenu.Separator /> : null;\n return (\n <Fragment key={index}>\n {separator}\n {actions.map((action) => {\n const shortcut =\n typeof action.properties.keyBinding === 'string'\n ? action.properties.keyBinding\n : action.properties.keyBinding?.[getHostPlatform()];\n\n const menuItemType = action.properties.menuItemType;\n const Root = menuItemType === 'toggle' ? DropdownMenu.CheckboxItem : DropdownMenu.Item;\n\n return (\n <Root\n key={action.id}\n onClick={(event) => {\n if (action.properties.disabled) {\n return;\n }\n event.stopPropagation();\n // TODO(thure): Why does Dialog’s modal-ness cause issues if we don’t explicitly close the menu here?\n suppressNextTooltip.current = true;\n setOptionsMenuOpen(false);\n onAction?.(action);\n }}\n classNames='gap-2'\n disabled={action.properties.disabled}\n checked={menuItemType === 'toggle' ? action.properties.isChecked : undefined}\n {...(action.properties?.testId && { 'data-testid': action.properties.testId })}\n >\n <Icon icon={action.properties.icon ?? 'ph--placeholder--regular'} size={4} />\n <span className='grow truncate'>{toLocalizedString(action.properties.label ?? '', t)}</span>\n {menuItemType === 'toggle' && (\n <DropdownMenu.ItemIndicator asChild>\n <Icon icon='ph--check--regular' size={4} />\n </DropdownMenu.ItemIndicator>\n )}\n {shortcut && (\n <span className={mx('shrink-0', descriptionText)}>{keySymbols(shortcut).join('')}</span>\n )}\n </Root>\n );\n })}\n </Fragment>\n );\n })}\n {children}\n </DropdownMenu.Viewport>\n <DropdownMenu.Arrow />\n </DropdownMenu.Content>\n </DropdownMenu.Portal>\n </DropdownMenu.Root>\n <Tooltip.Portal>\n <Tooltip.Content side='bottom'>\n {triggerLabel}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n </Tooltip.Root>\n );\n },\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React from 'react';\n\nexport const MenuSignifierHorizontal = () => (\n <svg\n className='absolute block-end-[7px]'\n width={20}\n height={2}\n viewBox='0 0 20 2'\n stroke='currentColor'\n opacity={0.5}\n >\n <line\n x1={0.5}\n y1={0.75}\n x2={19}\n y2={0.75}\n strokeWidth={1.25}\n strokeLinecap='round'\n strokeDasharray='6 20'\n strokeDashoffset='-6.5'\n />\n </svg>\n);\n\nexport const MenuSignifierVertical = () => (\n <svg className='absolute inline-start-1' width={2} height={18} viewBox='0 0 2 18' stroke='currentColor'>\n <line x1={1} y1={3} x2={1} y2={18} strokeWidth={1.5} strokeLinecap='round' strokeDasharray='0 6' />\n </svg>\n);\n", "//\n// Copyright 2023 DXOS.org\n//\n\nexport const translationKey = 'stack';\n\nexport default [\n {\n 'en-US': {\n [translationKey]: {\n 'resize label': 'Drag to resize',\n 'pin start label': 'Pin to the left sidebar',\n 'pin end label': 'Pin to the right sidebar',\n 'increment start label': 'Move to the left',\n 'increment end label': 'Move to the right',\n 'close label': 'Close',\n 'minify label': 'Minify',\n },\n },\n },\n];\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { forwardRef } from 'react';\n\nimport {\n Button,\n ButtonGroup,\n type ButtonGroupProps,\n type ButtonProps,\n Icon,\n Tooltip,\n useTranslation,\n} from '@dxos/react-ui';\n\nimport { translationKey } from '../translations';\n\nexport type LayoutControlEvent = 'solo' | 'close' | `${'pin' | 'increment'}-${'start' | 'end'}`;\nexport type LayoutControlHandler = (event: LayoutControlEvent) => void;\n\nexport type LayoutCapabilities = {\n incrementStart?: boolean;\n incrementEnd?: boolean;\n solo?: boolean;\n};\n\nexport type LayoutControlsProps = Omit<ButtonGroupProps, 'onClick'> & {\n onClick?: LayoutControlHandler;\n variant?: 'hide-disabled' | 'default';\n close?: boolean | 'minify-start' | 'minify-end';\n capabilities: LayoutCapabilities;\n isSolo?: boolean;\n pin?: 'start' | 'end' | 'both';\n};\n\nconst LayoutControl = ({ icon, label, ...props }: Omit<ButtonProps, 'children'> & { label: string; icon: string }) => {\n return (\n <Tooltip.Root>\n <Tooltip.Trigger asChild>\n <Button variant='ghost' {...props}>\n <span className='sr-only'>{label}</span>\n <Icon icon={icon} />\n </Button>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='bottom'>{label}</Tooltip.Content>\n </Tooltip.Portal>\n </Tooltip.Root>\n );\n};\n\nexport const LayoutControls = forwardRef<HTMLDivElement, LayoutControlsProps>(\n (\n { onClick, variant = 'default', capabilities: can, isSolo, pin, close = false, children, ...props },\n forwardedRef,\n ) => {\n const { t } = useTranslation(translationKey);\n const buttonClassNames = variant === 'hide-disabled' ? 'disabled:hidden !p-1' : '!p-1';\n\n return (\n <ButtonGroup {...props} ref={forwardedRef}>\n {pin && !isSolo && ['both', 'start'].includes(pin) && (\n <LayoutControl\n label={t('pin start label')}\n variant='ghost'\n classNames={buttonClassNames}\n onClick={() => onClick?.('pin-start')}\n icon='ph--caret-line-left--regular'\n />\n )}\n\n {can.solo && (\n <LayoutControl\n label={t('solo layout label')}\n classNames={buttonClassNames}\n onClick={() => onClick?.('solo')}\n icon={isSolo ? 'ph--arrows-in--regular' : 'ph--arrows-out--regular'}\n />\n )}\n\n {!isSolo && can.solo && (\n <>\n <LayoutControl\n label={t('increment start label')}\n disabled={!can.incrementStart}\n classNames={buttonClassNames}\n onClick={() => onClick?.('increment-start')}\n icon='ph--caret-left--regular'\n />\n <LayoutControl\n label={t('increment end label')}\n disabled={!can.incrementEnd}\n classNames={buttonClassNames}\n onClick={() => onClick?.('increment-end')}\n icon='ph--caret-right--regular'\n />\n </>\n )}\n\n {pin && !isSolo && ['both', 'end'].includes(pin) && (\n <LayoutControl\n label={t('pin end label')}\n classNames={buttonClassNames}\n onClick={() => onClick?.('pin-end')}\n icon='ph--caret-line-right--regular'\n />\n )}\n\n {close && !isSolo && (\n <LayoutControl\n label={t(`${typeof close === 'string' ? 'minify' : 'close'} label`)}\n classNames={buttonClassNames}\n onClick={() => onClick?.('close')}\n data-testid='layoutHeading.close'\n icon={\n close === 'minify-start'\n ? 'ph--caret-line-left--regular'\n : close === 'minify-end'\n ? 'ph--caret-line-right--regular'\n : 'ph--x--regular'\n }\n />\n )}\n {children}\n </ButtonGroup>\n );\n },\n);\n"],
5
- "mappings": "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",
6
- "names": ["import_react", "import_adapter", "import_closest_edge", "import_react_tabster", "import_react_compose_refs", "import_react_ui", "import_react_ui_theme", "import_disable_native_drag_preview", "import_prevent_unhandled", "import_react_ui_attention", "StackContext", "createContext", "orientation", "rail", "size", "useStack", "useContext", "StackItemContext", "selfDragHandleRef", "setSize", "useStackItem", "railGridHorizontal", "railGridVertical", "Stack", "forwardRef", "children", "classNames", "style", "onRearrange", "itemsCount", "Children", "count", "props", "forwardedRef", "stackElement", "stackRef", "useState", "composedItemRef", "composeRefs", "dropping", "setDropping", "arrowNavigationGroup", "useArrowNavigationGroup", "axis", "styles", "selfDroppable", "id", "useLayoutEffect", "acceptSourceType", "dropTargetForElements", "element", "getData", "input", "attachClosestEdge", "type", "allowedEdges", "onDragEnter", "source", "data", "onDrag", "onDragLeave", "onDrop", "self", "extractClosestEdge", "React", "Provider", "value", "div", "className", "mx", "aria-orientation", "ref", "ListItem", "DropIndicator", "edge", "StackItemContent", "toolbar", "statusbar", "stackItemSize", "role", "gridTemplateRows", "join", "StackItemDragHandle", "asChild", "Root", "Slot", "StackItemHeading", "focusableGroupAttrs", "useFocusableGroup", "tabBehavior", "tabIndex", "StackItemHeadingLabel", "attendableId", "related", "hasAttention", "isAncestor", "isRelated", "useAttention", "h1", "data-attention", "toString", "REM", "parseFloat", "getComputedStyle", "document", "documentElement", "fontSize", "MIN_SIZE", "measureStackItem", "stackItemElement", "closest", "getBoundingClientRect", "width", "DEFAULT_EXTRINSIC_SIZE", "height", "getNextSize", "startSize", "location", "client", "Math", "max", "current", "initial", "StackItemResizeHandle", "buttonRef", "useRef", "dragStartSize", "hasAttribute", "draggable", "onGenerateDragPreview", "nativeSetDragImage", "disableNativeDragPreview", "preventUnhandled", "start", "onDragStart", "nextSize", "button", "DragHandleSignifier", "svg", "xmlns", "viewBox", "fill", "path", "d", "MenuSignifierHorizontal", "stroke", "opacity", "line", "x1", "y1", "x2", "y2", "strokeWidth", "strokeLinecap", "strokeDasharray", "strokeDashoffset", "translationKey", "StackItemSigilButton", "variant", "Button", "StackItemSigil", "actions", "actionGroups", "onAction", "triggerLabel", "icon", "t", "useTranslation", "suppressNextTooltip", "optionsMenuOpen", "setOptionsMenuOpen", "triggerTooltipOpen", "setTriggerTooltipOpen", "Tooltip", "open", "onOpenChange", "nextOpen", "DropdownMenu", "Trigger", "span", "Icon", "Portal", "Content", "Viewport", "map", "index", "separator", "Separator", "Fragment", "key", "action", "shortcut", "properties", "keyBinding", "getHostPlatform", "menuItemType", "CheckboxItem", "Item", "onClick", "event", "disabled", "stopPropagation", "checked", "isChecked", "undefined", "testId", "toLocalizedString", "label", "ItemIndicator", "descriptionText", "keySymbols", "Arrow", "side", "DEFAULT_HORIZONTAL_SIZE", "DEFAULT_VERTICAL_SIZE", "StackItemRoot", "item", "propsSize", "onSizeChange", "order", "itemElement", "itemRef", "selfDragHandleElement", "closestEdge", "setEdge", "setInternalSize", "useCallback", "commit", "combine", "dragHandle", "getInitialData", "focusGroupAttrs", "data-dx-stack-item", "Number", "isFinite", "StackItem", "Heading", "HeadingLabel", "ResizeHandle", "DragHandle", "Sigil", "SigilButton", "LayoutControl", "LayoutControls", "capabilities", "can", "isSolo", "pin", "close", "buttonClassNames", "ButtonGroup", "includes", "solo", "incrementStart", "incrementEnd", "data-testid"]
4
+ "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';\nimport { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { composeRefs } from '@radix-ui/react-compose-refs';\nimport React, {\n Children,\n type CSSProperties,\n type ComponentPropsWithRef,\n forwardRef,\n useLayoutEffect,\n useState,\n} from 'react';\n\nimport { type ThemedClassName, ListItem } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { type StackContextValue, StackContext, type StackItemData } from './StackContext';\n\nexport type Orientation = 'horizontal' | 'vertical';\nexport type Size = 'intrinsic' | 'contain';\n\nexport type StackProps = Omit<ThemedClassName<ComponentPropsWithRef<'div'>>, 'aria-orientation'> &\n Partial<StackContextValue> & { itemsCount?: number };\n\nexport const railGridHorizontal = 'grid-rows-[[rail-start]_var(--rail-size)_[content-start]_1fr_[content-end]]';\n\nexport const railGridVertical = 'grid-cols-[[rail-start]_var(--rail-size)_[content-start]_1fr_[content-end]]';\n\nexport const autoScrollRootAttributes = { 'data-drag-autoscroll': 'idle' };\n\nexport const Stack = forwardRef<HTMLDivElement, StackProps>(\n (\n {\n children,\n classNames,\n style,\n orientation = 'vertical',\n rail = true,\n size = 'intrinsic',\n onRearrange,\n itemsCount = Children.count(children),\n ...props\n },\n forwardedRef,\n ) => {\n const [stackElement, stackRef] = useState<HTMLDivElement | null>(null);\n const composedItemRef = composeRefs<HTMLDivElement>(stackRef, forwardedRef);\n const [dropping, setDropping] = useState(false);\n\n const arrowNavigationGroup = useArrowNavigationGroup({ axis: orientation });\n\n const styles: CSSProperties = {\n [orientation === 'horizontal' ? 'gridTemplateColumns' : 'gridTemplateRows']: `repeat(${itemsCount}, min-content)`,\n ...style,\n };\n\n const selfDroppable = !!(itemsCount < 1 && onRearrange && props.id);\n\n useLayoutEffect(() => {\n if (!stackElement || !selfDroppable) {\n return;\n }\n const acceptSourceType = orientation === 'horizontal' ? 'column' : 'card';\n return combine(\n dropTargetForElements({\n element: stackElement,\n getData: ({ input, element }) => {\n return attachClosestEdge(\n { id: props.id, type: orientation === 'horizontal' ? 'card' : 'column' },\n { input, element, allowedEdges: [orientation === 'horizontal' ? 'left' : 'top'] },\n );\n },\n onDragEnter: ({ source }) => {\n if (source.data.type === acceptSourceType) {\n setDropping(true);\n }\n },\n onDrag: ({ source }) => {\n if (source.data.type === acceptSourceType) {\n setDropping(true);\n }\n },\n onDragLeave: () => setDropping(false),\n onDrop: ({ self, source }) => {\n setDropping(false);\n if (source.data.type === acceptSourceType && selfDroppable) {\n onRearrange(source.data as StackItemData, self.data as StackItemData, extractClosestEdge(self.data));\n }\n },\n }),\n autoScrollForElements({ element: stackElement, getAllowedAxis: () => orientation }),\n );\n }, [stackElement, selfDroppable, orientation]);\n\n return (\n <StackContext.Provider value={{ orientation, rail, size, onRearrange }}>\n <div\n {...props}\n {...arrowNavigationGroup}\n className={mx(\n 'grid relative',\n rail\n ? orientation === 'horizontal'\n ? railGridHorizontal\n : railGridVertical\n : orientation === 'horizontal'\n ? 'grid-rows-1 pli-1'\n : 'grid-cols-1 plb-1',\n size === 'contain' &&\n (orientation === 'horizontal'\n ? 'overflow-x-auto min-bs-0 bs-full max-bs-full'\n : 'overflow-y-auto min-is-0 is-full max-is-full'),\n classNames,\n )}\n data-rail={rail}\n aria-orientation={orientation}\n style={styles}\n ref={composedItemRef}\n >\n {children}\n {selfDroppable && dropping && (\n <ListItem.DropIndicator\n lineInset={8}\n terminalInset={-8}\n gap={-8}\n edge={orientation === 'horizontal' ? 'left' : 'top'}\n />\n )}\n </div>\n </StackContext.Provider>\n );\n },\n);\n\nexport { StackContext };\nexport type { StackContextValue };\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';\nimport { createContext, useContext } from 'react';\n\nimport { type Orientation, type Size } from './Stack';\n\nexport type StackItemSize = number | 'min-content';\n\nexport type StackItemData = { id: string; type: 'column' | 'card' };\n\nexport type StackItemRearrangeHandler = (\n source: StackItemData,\n target: StackItemData,\n closestEdge: Edge | null,\n) => void;\n\nexport type StackContextValue = {\n orientation: Orientation;\n rail: boolean;\n size: Size;\n onRearrange?: StackItemRearrangeHandler;\n};\n\nexport const StackContext = createContext<StackContextValue>({\n orientation: 'vertical',\n rail: true,\n size: 'intrinsic',\n});\n\nexport const useStack = () => useContext(StackContext);\n\nexport type StackItemContextValue = {\n selfDragHandleRef: (element: HTMLDivElement | null) => void;\n size: StackItemSize;\n setSize: (nextSize: StackItemSize, commit?: boolean) => void;\n};\n\nexport const StackItemContext = createContext<StackItemContextValue>({\n selfDragHandleRef: () => {},\n size: 'min-content',\n setSize: () => {},\n});\n\nexport const useStackItem = () => useContext(StackItemContext);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { preserveOffsetOnSource } from '@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source';\nimport { scrollJustEnoughIntoView } from '@atlaskit/pragmatic-drag-and-drop/element/scroll-just-enough-into-view';\nimport {\n attachClosestEdge,\n extractClosestEdge,\n type Edge,\n} from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { composeRefs } from '@radix-ui/react-compose-refs';\nimport React, { forwardRef, useLayoutEffect, useState, type ComponentPropsWithRef, useCallback } from 'react';\n\nimport { type ThemedClassName, ListItem } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { useStack, StackItemContext, type StackItemSize, type StackItemData } from './StackContext';\nimport { StackItemContent, type StackItemContentProps } from './StackItemContent';\nimport { StackItemDragHandle, type StackItemDragHandleProps } from './StackItemDragHandle';\nimport {\n StackItemHeading,\n StackItemHeadingLabel,\n type StackItemHeadingProps,\n type StackItemHeadingLabelProps,\n} from './StackItemHeading';\nimport { StackItemResizeHandle, type StackItemResizeHandleProps } from './StackItemResizeHandle';\nimport {\n StackItemSigil,\n type StackItemSigilProps,\n type StackItemSigilAction,\n type StackItemSigilButtonProps,\n StackItemSigilButton,\n} from './StackItemSigil';\n\nexport const DEFAULT_HORIZONTAL_SIZE = 44 satisfies StackItemSize;\nexport const DEFAULT_VERTICAL_SIZE = 'min-content' satisfies StackItemSize;\nexport const DEFAULT_EXTRINSIC_SIZE = DEFAULT_HORIZONTAL_SIZE satisfies StackItemSize;\n\nexport type StackItemRootProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {\n item: Omit<StackItemData, 'type'>;\n order?: number;\n size?: StackItemSize;\n onSizeChange?: (nextSize: StackItemSize) => void;\n role?: 'article' | 'section';\n disableRearrange?: boolean;\n focusIndicatorVariant?: 'over-all' | 'group';\n};\n\nconst StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(\n (\n {\n item,\n children,\n classNames,\n size: propsSize,\n onSizeChange,\n role,\n order,\n style,\n disableRearrange,\n focusIndicatorVariant = 'over-all',\n ...props\n },\n forwardedRef,\n ) => {\n const [itemElement, itemRef] = useState<HTMLDivElement | null>(null);\n const [selfDragHandleElement, selfDragHandleRef] = useState<HTMLDivElement | null>(null);\n const [closestEdge, setEdge] = useState<Edge | null>(null);\n const { orientation, rail, onRearrange } = useStack();\n const [size = orientation === 'horizontal' ? DEFAULT_HORIZONTAL_SIZE : DEFAULT_VERTICAL_SIZE, setInternalSize] =\n useState(propsSize);\n\n const Root = role ?? 'div';\n\n const composedItemRef = composeRefs<HTMLDivElement>(itemRef, forwardedRef);\n\n const setSize = useCallback(\n (nextSize: StackItemSize, commit?: boolean) => {\n setInternalSize(nextSize);\n if (commit) {\n onSizeChange?.(nextSize);\n }\n },\n [onSizeChange],\n );\n\n const type = orientation === 'horizontal' ? 'column' : 'card';\n\n useLayoutEffect(() => {\n if (!itemElement || !onRearrange || disableRearrange) {\n return;\n }\n return combine(\n draggable({\n element: itemElement,\n ...(selfDragHandleElement && { dragHandle: selfDragHandleElement }),\n getInitialData: () => ({ id: item.id, type }),\n onGenerateDragPreview: ({ nativeSetDragImage, source, location }) => {\n document.body.setAttribute('data-drag-preview', 'true');\n scrollJustEnoughIntoView({ element: source.element });\n const { x, y } = preserveOffsetOnSource({ element: source.element, input: location.current.input })({\n container: (source.element.offsetParent ?? document.body) as HTMLElement,\n });\n nativeSetDragImage?.(source.element, x, y);\n },\n onDragStart: () => {\n document.body.removeAttribute('data-drag-preview');\n itemElement?.closest('[data-drag-autoscroll]')?.setAttribute('data-drag-autoscroll', 'active');\n },\n onDrop: () => {\n itemElement?.closest('[data-drag-autoscroll]')?.setAttribute('data-drag-autoscroll', 'idle');\n },\n }),\n dropTargetForElements({\n element: itemElement,\n getData: ({ input, element }) => {\n return attachClosestEdge(\n { id: item.id, type },\n { input, element, allowedEdges: orientation === 'horizontal' ? ['left', 'right'] : ['top', 'bottom'] },\n );\n },\n onDragEnter: ({ self, source }) => {\n if (source.data.type === self.data.type) {\n setEdge(extractClosestEdge(self.data));\n }\n },\n onDrag: ({ self, source }) => {\n if (source.data.type === self.data.type) {\n setEdge(extractClosestEdge(self.data));\n }\n },\n onDragLeave: () => setEdge(null),\n onDrop: ({ self, source }) => {\n setEdge(null);\n if (source.data.type === self.data.type) {\n onRearrange(source.data as StackItemData, self.data as StackItemData, extractClosestEdge(self.data));\n }\n },\n }),\n );\n }, [orientation, item, onRearrange, selfDragHandleElement, itemElement]);\n\n const focusGroupAttrs = useFocusableGroup({ tabBehavior: 'limited' });\n\n return (\n <StackItemContext.Provider value={{ selfDragHandleRef, size, setSize }}>\n <Root\n {...props}\n tabIndex={0}\n {...focusGroupAttrs}\n className={mx(\n 'group/stack-item grid relative',\n focusIndicatorVariant === 'over-all'\n ? 'dx-focus-ring-inset-over-all'\n : orientation === 'horizontal'\n ? 'dx-focus-ring-group-x'\n : 'dx-focus-ring-group-y',\n size === 'min-content' && (orientation === 'horizontal' ? 'is-min' : 'bs-min'),\n orientation === 'horizontal' ? 'grid-rows-subgrid' : 'grid-cols-subgrid',\n rail && (orientation === 'horizontal' ? 'row-span-2' : 'col-span-2'),\n classNames,\n )}\n data-dx-stack-item\n style={{\n ...(size !== 'min-content' && {\n [orientation === 'horizontal' ? 'inlineSize' : 'blockSize']: `${size}rem`,\n }),\n ...(Number.isFinite(order) && {\n [orientation === 'horizontal' ? 'gridColumn' : 'gridRow']: `${order}`,\n }),\n ...style,\n }}\n ref={composedItemRef}\n >\n {children}\n {closestEdge && <ListItem.DropIndicator lineInset={8} terminalInset={-8} edge={closestEdge} />}\n </Root>\n </StackItemContext.Provider>\n );\n },\n);\n\nexport const StackItem = {\n Root: StackItemRoot,\n Content: StackItemContent,\n Heading: StackItemHeading,\n HeadingLabel: StackItemHeadingLabel,\n ResizeHandle: StackItemResizeHandle,\n DragHandle: StackItemDragHandle,\n Sigil: StackItemSigil,\n SigilButton: StackItemSigilButton,\n};\n\nexport type {\n StackItemContentProps,\n StackItemHeadingProps,\n StackItemHeadingLabelProps,\n StackItemResizeHandleProps,\n StackItemDragHandleProps,\n StackItemSigilProps,\n StackItemSigilButtonProps,\n StackItemSigilAction,\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { type ComponentPropsWithoutRef, forwardRef } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { useStack } from './StackContext';\n\nexport type StackItemContentProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & {\n /**\n * This flag is required in order to clarify a developer experience that seemed like it needed extra boilerplate\n * (`row-span-2`) or was buggy. See the description of the StackItem.Content component itself for more information.\n */\n toolbar: boolean;\n\n /**\n * Whether to provide for the layout of a statusbar after the content.\n */\n statusbar?: boolean;\n\n /**\n * Whether to set a certain aspect ratio on the content, including the toolbar and statusbar. This is provided for\n * convenience and consistency; it can instead be specified by the `classNames` or `style` props as needed.\n */\n size?: 'intrinsic' | 'video' | 'square';\n};\n\n/**\n * This component should be used by plugins for rendering content within a stack item, a.k.a. a “plank” or “section”.\n * The `toolbar` flag must be provided since this component provides for the layout of content with the toolbar.\n */\nexport const StackItemContent = forwardRef<HTMLDivElement, StackItemContentProps>(\n ({ children, toolbar, statusbar, classNames, size = 'intrinsic', ...props }, forwardedRef) => {\n const { size: stackItemSize } = useStack();\n\n return (\n <div\n role='none'\n {...props}\n className={mx(\n 'group grid grid-cols-[100%]',\n stackItemSize === 'contain' && 'min-bs-0 overflow-hidden',\n size === 'video' ? 'aspect-video' : size === 'square' && 'aspect-square',\n classNames,\n )}\n style={{\n gridTemplateRows: [\n ...(toolbar ? ['var(--rail-action)'] : []),\n '1fr',\n ...(statusbar ? ['var(--statusbar-size)'] : []),\n ].join(' '),\n }}\n ref={forwardedRef}\n >\n {children}\n </div>\n );\n },\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { Slot } from '@radix-ui/react-slot';\nimport React, { type ComponentPropsWithoutRef } from 'react';\n\nimport { useStackItem } from './StackContext';\n\nexport type StackItemDragHandleProps = ComponentPropsWithoutRef<'button'> & { asChild: boolean };\n\nexport const StackItemDragHandle = ({ asChild, children }: StackItemDragHandleProps) => {\n const { selfDragHandleRef } = useStackItem();\n\n const Root = asChild ? Slot : 'div';\n\n return (\n <Root ref={selfDragHandleRef} role='button'>\n {children}\n </Root>\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport React, { type ComponentPropsWithoutRef, type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { useAttention, type AttendableId, type Related } from '@dxos/react-ui-attention';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { useStack } from './StackContext';\n\nexport type StackItemHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;\n\nexport const StackItemHeading = ({ children, classNames, ...props }: StackItemHeadingProps) => {\n const { orientation } = useStack();\n const focusableGroupAttrs = useFocusableGroup({ tabBehavior: 'limited' });\n return (\n <div\n role='heading'\n {...props}\n tabIndex={0}\n {...focusableGroupAttrs}\n className={mx(\n 'flex items-center dx-focus-ring-inset-over-all relative !border-is-0',\n orientation === 'horizontal' ? 'bs-[--rail-size]' : 'is-[--rail-size] flex-col',\n classNames,\n )}\n >\n {children}\n </div>\n );\n};\n\nexport type StackItemHeadingLabelProps = ThemedClassName<ComponentPropsWithRef<'h1'>> & AttendableId & Related;\n\nexport const StackItemHeadingLabel = forwardRef<HTMLHeadingElement, StackItemHeadingLabelProps>(\n ({ attendableId, related, classNames, ...props }, forwardedRef) => {\n const { hasAttention, isAncestor, isRelated } = useAttention(attendableId);\n return (\n <h1\n {...props}\n data-attention={((related && isRelated) || hasAttention || isAncestor).toString()}\n className={mx(\n 'pli-1 min-is-0 is-0 grow truncate font-medium text-baseText data-[attention=true]:text-accentText self-center',\n classNames,\n )}\n ref={forwardedRef}\n />\n );\n },\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';\nimport { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';\nimport { type DragLocationHistory } from '@atlaskit/pragmatic-drag-and-drop/types';\nimport React, { useLayoutEffect, useRef } from 'react';\n\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { useStack, useStackItem, type StackItemSize } from './StackContext';\nimport { DEFAULT_EXTRINSIC_SIZE } from './StackItem';\n\nconst REM = parseFloat(getComputedStyle(document.documentElement).fontSize);\n\nconst MIN_WIDTH = 20;\nconst MIN_HEIGHT = 3;\n\nconst measureStackItem = (element: HTMLButtonElement): { width: number; height: number } => {\n const stackItemElement = element.closest('[data-dx-stack-item]');\n return stackItemElement?.getBoundingClientRect() ?? { width: DEFAULT_EXTRINSIC_SIZE, height: DEFAULT_EXTRINSIC_SIZE };\n};\n\nconst getNextSize = (startSize: number, location: DragLocationHistory, client: 'clientX' | 'clientY') => {\n return Math.max(\n client === 'clientX' ? MIN_WIDTH : MIN_HEIGHT,\n startSize + (location.current.input[client] - location.initial.input[client]) / REM,\n );\n};\n\nexport type StackItemResizeHandleProps = {};\n\nexport const StackItemResizeHandle = () => {\n const { orientation } = useStack();\n const { setSize, size } = useStackItem();\n const buttonRef = useRef<HTMLButtonElement>(null);\n const dragStartSize = useRef<StackItemSize>(size);\n const client = orientation === 'horizontal' ? 'clientX' : 'clientY';\n\n useLayoutEffect(\n () => {\n if (!buttonRef.current || buttonRef.current.hasAttribute('draggable')) {\n return;\n }\n // TODO(thure): This should handle StackItem state vs local state better.\n draggable({\n element: buttonRef.current,\n onGenerateDragPreview: ({ nativeSetDragImage }) => {\n // We will be moving the line to indicate a drag; we can disable the native drag preview.\n disableNativeDragPreview({ nativeSetDragImage });\n // We don't want any native drop animation for when the user does not drop on a drop target.\n // We want the drag to finish immediately.\n preventUnhandled.start();\n },\n onDragStart: () => {\n dragStartSize.current =\n dragStartSize.current === 'min-content'\n ? measureStackItem(buttonRef.current!)[orientation === 'horizontal' ? 'width' : 'height'] / REM\n : dragStartSize.current;\n },\n onDrag: ({ location }) => {\n if (typeof dragStartSize.current !== 'number') {\n return;\n }\n setSize(getNextSize(dragStartSize.current, location, client));\n },\n onDrop: ({ location }) => {\n if (typeof dragStartSize.current !== 'number') {\n return;\n }\n const nextSize = getNextSize(dragStartSize.current, location, client);\n setSize(nextSize, true);\n dragStartSize.current = nextSize;\n },\n });\n },\n [\n // Note that `size` should not be a dependency here since dragging this adjusts the size.\n ],\n );\n\n return (\n <button\n ref={buttonRef}\n className={mx(\n 'group absolute',\n orientation === 'horizontal'\n ? 'cursor-col-resize is-3 bs-full inline-end-[-1px] !border-lb-0 before:inset-block-0 before:inline-end-0 before:is-1'\n : 'cursor-row-resize bs-3 is-full block-end-[-1px] !border-li-0 before:inset-inline-0 before:block-end-0 before:bs-1',\n 'before:transition-opacity before:duration-100 before:ease-in-out before:opacity-0 hover:before:opacity-100 focus-visible:before:opacity-100 active:before:opacity-100',\n 'before:absolute before:block before:bg-accentFocusIndicator',\n )}\n >\n <div\n role='none'\n className={mx(\n 'absolute flex items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0',\n orientation === 'horizontal'\n ? 'block-start-0 inline-end-px bs-[--rail-size]'\n : 'inline-start-0 block-end-px is-[--rail-size] flex justify-center',\n )}\n >\n <DragHandleSignifier orientation={orientation} />\n </div>\n </button>\n );\n};\n\nconst DragHandleSignifier = ({ orientation }: { orientation: 'horizontal' | 'vertical' }) => {\n return (\n <svg\n xmlns='http://www.w3.org/2000/svg'\n viewBox='0 0 256 256'\n fill='currentColor'\n className={mx('shrink-0 bs-[1em] is-[1em] text-unAccent', orientation === 'vertical' && 'rotate-90')}\n >\n {/* two pips: <path d='M256,120c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' />\n <path d='M256,232c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' /> */}\n <path d='M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n <path d='M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n <path d='M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n <path d='M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n </svg>\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { Fragment, type PropsWithChildren, forwardRef, useRef, useState } from 'react';\n\nimport { type ActionLike } from '@dxos/app-graph';\nimport { keySymbols } from '@dxos/keyboard';\nimport { Button, type ButtonProps, DropdownMenu, Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';\nimport { type AttendableId, type Related, useAttention } from '@dxos/react-ui-attention';\nimport { descriptionText, mx } from '@dxos/react-ui-theme';\nimport { getHostPlatform } from '@dxos/util';\n\nimport { MenuSignifierHorizontal } from './MenuSignifier';\nimport { translationKey } from '../translations';\n\nexport type KeyBinding = {\n windows?: string;\n macos?: string;\n ios?: string;\n linux?: string;\n unknown?: string;\n};\n\nexport type StackItemSigilAction = Pick<ActionLike, 'id' | 'properties' | 'data'>;\n\nexport type StackItemSigilButtonProps = Omit<ButtonProps, 'variant'> & AttendableId & Related;\n\nexport const StackItemSigilButton = forwardRef<HTMLButtonElement, StackItemSigilButtonProps>(\n ({ attendableId, classNames, related, children, ...props }, forwardedRef) => {\n const { hasAttention, isAncestor, isRelated } = useAttention(attendableId);\n const variant = (related && isRelated) || hasAttention || isAncestor ? 'primary' : 'ghost';\n return (\n <Button\n {...props}\n variant={variant}\n classNames={['shrink-0 pli-0 min-bs-0 is-[--rail-action] bs-[--rail-action] relative app-no-drag', classNames]}\n ref={forwardedRef}\n >\n <MenuSignifierHorizontal />\n {children}\n </Button>\n );\n },\n);\n\nexport type StackItemSigilProps = PropsWithChildren<\n {\n attendableId?: string;\n triggerLabel: string;\n actions?: StackItemSigilAction[][];\n icon: string;\n onAction?: (action: StackItemSigilAction) => void;\n } & Related\n>;\n\nexport const StackItemSigil = forwardRef<HTMLButtonElement, StackItemSigilProps>(\n ({ actions: actionGroups, onAction, triggerLabel, attendableId, icon, related, children }, forwardedRef) => {\n const { t } = useTranslation(translationKey);\n const suppressNextTooltip = useRef(false);\n\n const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);\n\n const hasActions = actionGroups && actionGroups.length > 0;\n\n const button = (\n <StackItemSigilButton\n attendableId={attendableId}\n related={related}\n // TODO(wittjosiah): Better disabling of interactive styles when no action are available.\n // Remove underscore icon when no actions are available?\n classNames={!hasActions && 'cursor-default'}\n >\n <span className='sr-only'>{triggerLabel}</span>\n <Icon icon={icon} size={5} />\n </StackItemSigilButton>\n );\n\n if (!hasActions) {\n return button;\n }\n\n return (\n <DropdownMenu.Root\n {...{\n open: optionsMenuOpen,\n onOpenChange: (nextOpen: boolean) => {\n if (!nextOpen) {\n suppressNextTooltip.current = true;\n }\n return setOptionsMenuOpen(nextOpen);\n },\n }}\n >\n <DropdownMenu.Trigger asChild ref={forwardedRef}>\n {button}\n </DropdownMenu.Trigger>\n <DropdownMenu.Portal>\n <DropdownMenu.Content classNames='z-[31]'>\n <DropdownMenu.Viewport>\n {actionGroups?.map((actions, index) => {\n const separator = index > 0 ? <DropdownMenu.Separator /> : null;\n return (\n <Fragment key={index}>\n {separator}\n {actions.map((action) => {\n const shortcut =\n typeof action.properties.keyBinding === 'string'\n ? action.properties.keyBinding\n : action.properties.keyBinding?.[getHostPlatform()];\n\n const menuItemType = action.properties.menuItemType;\n const Root = menuItemType === 'toggle' ? DropdownMenu.CheckboxItem : DropdownMenu.Item;\n\n return (\n <Root\n key={action.id}\n onClick={(event) => {\n if (action.properties.disabled) {\n return;\n }\n event.stopPropagation();\n // TODO(thure): Why does Dialog’s modal-ness cause issues if we don’t explicitly close the menu here?\n suppressNextTooltip.current = true;\n setOptionsMenuOpen(false);\n onAction?.(action);\n }}\n classNames='gap-2'\n disabled={action.properties.disabled}\n checked={menuItemType === 'toggle' ? action.properties.isChecked : undefined}\n {...(action.properties?.testId && { 'data-testid': action.properties.testId })}\n >\n <Icon icon={action.properties.icon ?? 'ph--placeholder--regular'} size={4} />\n <span className='grow truncate'>{toLocalizedString(action.properties.label ?? '', t)}</span>\n {menuItemType === 'toggle' && (\n <DropdownMenu.ItemIndicator asChild>\n <Icon icon='ph--check--regular' size={4} />\n </DropdownMenu.ItemIndicator>\n )}\n {shortcut && (\n <span className={mx('shrink-0', descriptionText)}>{keySymbols(shortcut).join('')}</span>\n )}\n </Root>\n );\n })}\n </Fragment>\n );\n })}\n {children}\n </DropdownMenu.Viewport>\n <DropdownMenu.Arrow />\n </DropdownMenu.Content>\n </DropdownMenu.Portal>\n </DropdownMenu.Root>\n );\n },\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React from 'react';\n\nexport const MenuSignifierHorizontal = () => (\n <svg\n className='absolute block-end-[7px]'\n width={20}\n height={2}\n viewBox='0 0 20 2'\n stroke='currentColor'\n opacity={0.5}\n >\n <line\n x1={0.5}\n y1={0.75}\n x2={19}\n y2={0.75}\n strokeWidth={1.25}\n strokeLinecap='round'\n strokeDasharray='6 20'\n strokeDashoffset='-6.5'\n />\n </svg>\n);\n\nexport const MenuSignifierVertical = () => (\n <svg className='absolute inline-start-1' width={2} height={18} viewBox='0 0 2 18' stroke='currentColor'>\n <line x1={1} y1={3} x2={1} y2={18} strokeWidth={1.5} strokeLinecap='round' strokeDasharray='0 6' />\n </svg>\n);\n", "//\n// Copyright 2023 DXOS.org\n//\n\nexport const translationKey = 'stack';\n\nexport default [\n {\n 'en-US': {\n [translationKey]: {\n 'resize label': 'Drag to resize',\n 'pin start label': 'Pin to the left sidebar',\n 'pin end label': 'Pin to the right sidebar',\n 'increment start label': 'Move to the left',\n 'increment end label': 'Move to the right',\n 'close label': 'Close',\n 'minify label': 'Minify',\n },\n },\n },\n];\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { forwardRef } from 'react';\n\nimport {\n Button,\n ButtonGroup,\n type ButtonGroupProps,\n type ButtonProps,\n Icon,\n Tooltip,\n useTranslation,\n} from '@dxos/react-ui';\n\nimport { translationKey } from '../translations';\n\nexport type LayoutControlEvent = 'solo' | 'close' | `${'pin' | 'increment'}-${'start' | 'end'}`;\nexport type LayoutControlHandler = (event: LayoutControlEvent) => void;\n\nexport type LayoutCapabilities = {\n incrementStart?: boolean;\n incrementEnd?: boolean;\n solo?: boolean;\n};\n\nexport type LayoutControlsProps = Omit<ButtonGroupProps, 'onClick'> & {\n onClick?: LayoutControlHandler;\n variant?: 'hide-disabled' | 'default';\n close?: boolean | 'minify-start' | 'minify-end';\n capabilities: LayoutCapabilities;\n isSolo?: boolean;\n pin?: 'start' | 'end' | 'both';\n};\n\nconst LayoutControl = ({ icon, label, ...props }: Omit<ButtonProps, 'children'> & { label: string; icon: string }) => {\n return (\n <Tooltip.Root>\n <Tooltip.Trigger asChild>\n <Button variant='ghost' {...props}>\n <span className='sr-only'>{label}</span>\n <Icon icon={icon} />\n </Button>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='bottom'>{label}</Tooltip.Content>\n </Tooltip.Portal>\n </Tooltip.Root>\n );\n};\n\nexport const LayoutControls = forwardRef<HTMLDivElement, LayoutControlsProps>(\n (\n { onClick, variant = 'default', capabilities: can, isSolo, pin, close = false, children, ...props },\n forwardedRef,\n ) => {\n const { t } = useTranslation(translationKey);\n const buttonClassNames = variant === 'hide-disabled' ? 'disabled:hidden !p-1' : '!p-1';\n\n return (\n <ButtonGroup {...props} ref={forwardedRef}>\n {pin && !isSolo && ['both', 'start'].includes(pin) && (\n <LayoutControl\n label={t('pin start label')}\n variant='ghost'\n classNames={buttonClassNames}\n onClick={() => onClick?.('pin-start')}\n icon='ph--caret-line-left--regular'\n />\n )}\n\n {can.solo && (\n <LayoutControl\n label={t('solo layout label')}\n classNames={buttonClassNames}\n onClick={() => onClick?.('solo')}\n icon={isSolo ? 'ph--arrows-in--regular' : 'ph--arrows-out--regular'}\n />\n )}\n\n {!isSolo && can.solo && (\n <>\n <LayoutControl\n label={t('increment start label')}\n disabled={!can.incrementStart}\n classNames={buttonClassNames}\n onClick={() => onClick?.('increment-start')}\n icon='ph--caret-left--regular'\n />\n <LayoutControl\n label={t('increment end label')}\n disabled={!can.incrementEnd}\n classNames={buttonClassNames}\n onClick={() => onClick?.('increment-end')}\n icon='ph--caret-right--regular'\n />\n </>\n )}\n\n {pin && !isSolo && ['both', 'end'].includes(pin) && (\n <LayoutControl\n label={t('pin end label')}\n classNames={buttonClassNames}\n onClick={() => onClick?.('pin-end')}\n icon='ph--caret-line-right--regular'\n />\n )}\n\n {close && !isSolo && (\n <LayoutControl\n label={t(`${typeof close === 'string' ? 'minify' : 'close'} label`)}\n classNames={buttonClassNames}\n onClick={() => onClick?.('close')}\n data-testid='layoutHeading.close'\n icon={\n close === 'minify-start'\n ? 'ph--caret-line-left--regular'\n : close === 'minify-end'\n ? 'ph--caret-line-right--regular'\n : 'ph--x--regular'\n }\n />\n )}\n {children}\n </ButtonGroup>\n );\n },\n);\n"],
5
+ "mappings": "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",
6
+ "names": ["import_react", "import_combine", "import_adapter", "import_closest_edge", "import_react_tabster", "import_react_compose_refs", "import_react_ui", "import_react_ui_theme", "import_react_ui_attention", "StackContext", "createContext", "orientation", "rail", "size", "useStack", "useContext", "StackItemContext", "selfDragHandleRef", "setSize", "useStackItem", "railGridHorizontal", "railGridVertical", "autoScrollRootAttributes", "Stack", "forwardRef", "children", "classNames", "style", "onRearrange", "itemsCount", "Children", "count", "props", "forwardedRef", "stackElement", "stackRef", "useState", "composedItemRef", "composeRefs", "dropping", "setDropping", "arrowNavigationGroup", "useArrowNavigationGroup", "axis", "styles", "selfDroppable", "id", "useLayoutEffect", "acceptSourceType", "combine", "dropTargetForElements", "element", "getData", "input", "attachClosestEdge", "type", "allowedEdges", "onDragEnter", "source", "data", "onDrag", "onDragLeave", "onDrop", "self", "extractClosestEdge", "autoScrollForElements", "getAllowedAxis", "React", "Provider", "value", "div", "className", "mx", "data-rail", "aria-orientation", "ref", "ListItem", "DropIndicator", "lineInset", "terminalInset", "gap", "edge", "StackItemContent", "toolbar", "statusbar", "stackItemSize", "role", "gridTemplateRows", "join", "StackItemDragHandle", "asChild", "Root", "Slot", "StackItemHeading", "focusableGroupAttrs", "useFocusableGroup", "tabBehavior", "tabIndex", "StackItemHeadingLabel", "attendableId", "related", "hasAttention", "isAncestor", "isRelated", "useAttention", "h1", "data-attention", "toString", "REM", "parseFloat", "getComputedStyle", "document", "documentElement", "fontSize", "MIN_WIDTH", "MIN_HEIGHT", "measureStackItem", "stackItemElement", "closest", "getBoundingClientRect", "width", "DEFAULT_EXTRINSIC_SIZE", "height", "getNextSize", "startSize", "location", "client", "Math", "max", "current", "initial", "StackItemResizeHandle", "buttonRef", "useRef", "dragStartSize", "hasAttribute", "draggable", "onGenerateDragPreview", "nativeSetDragImage", "disableNativeDragPreview", "preventUnhandled", "start", "onDragStart", "nextSize", "button", "DragHandleSignifier", "svg", "xmlns", "viewBox", "fill", "path", "d", "MenuSignifierHorizontal", "stroke", "opacity", "line", "x1", "y1", "x2", "y2", "strokeWidth", "strokeLinecap", "strokeDasharray", "strokeDashoffset", "translationKey", "StackItemSigilButton", "variant", "Button", "StackItemSigil", "actions", "actionGroups", "onAction", "triggerLabel", "icon", "t", "useTranslation", "suppressNextTooltip", "optionsMenuOpen", "setOptionsMenuOpen", "hasActions", "length", "span", "Icon", "DropdownMenu", "open", "onOpenChange", "nextOpen", "Trigger", "Portal", "Content", "Viewport", "map", "index", "separator", "Separator", "Fragment", "key", "action", "shortcut", "properties", "keyBinding", "getHostPlatform", "menuItemType", "CheckboxItem", "Item", "onClick", "event", "disabled", "stopPropagation", "checked", "isChecked", "undefined", "testId", "toLocalizedString", "label", "ItemIndicator", "descriptionText", "keySymbols", "Arrow", "DEFAULT_HORIZONTAL_SIZE", "DEFAULT_VERTICAL_SIZE", "StackItemRoot", "item", "propsSize", "onSizeChange", "order", "disableRearrange", "focusIndicatorVariant", "itemElement", "itemRef", "selfDragHandleElement", "closestEdge", "setEdge", "setInternalSize", "useCallback", "commit", "dragHandle", "getInitialData", "body", "setAttribute", "scrollJustEnoughIntoView", "x", "y", "preserveOffsetOnSource", "container", "offsetParent", "removeAttribute", "focusGroupAttrs", "data-dx-stack-item", "Number", "isFinite", "StackItem", "Heading", "HeadingLabel", "ResizeHandle", "DragHandle", "Sigil", "SigilButton", "LayoutControl", "Tooltip", "side", "LayoutControls", "capabilities", "can", "isSolo", "pin", "close", "buttonClassNames", "ButtonGroup", "includes", "solo", "incrementStart", "incrementEnd", "data-testid"]
7
7
  }