@dxos/react-ui-stack 0.7.5-main.9d26e3a → 0.7.5-main.b19bfc8

package/src/components/StackItemResizeHandle.tsx

@@ -2,115 +2,29 @@
 // Copyright 2024 DXOS.org
 //
 
-import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
-import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
-import { type DragLocationHistory } from '@atlaskit/pragmatic-drag-and-drop/types';
-import React, { useLayoutEffect, useRef } from 'react';
+import React from 'react';
 
-import { mx } from '@dxos/react-ui-theme';
+import { ResizeHandle } from '@dxos/react-ui-dnd';
 
-import { useStack, useStackItem, type StackItemSize } from './StackContext';
+import { useStack, useStackItem } from './StackContext';
 import { DEFAULT_EXTRINSIC_SIZE } from './StackItem';
 
-const REM = parseFloat(getComputedStyle(document.documentElement).fontSize);
-
-const MIN_SIZE = 20;
-
-const measureStackItem = (element: HTMLButtonElement): { width: number; height: number } => {
-  const stackItemElement = element.closest('[data-dx-stack-item]');
-  return stackItemElement?.getBoundingClientRect() ?? { width: DEFAULT_EXTRINSIC_SIZE, height: DEFAULT_EXTRINSIC_SIZE };
-};
-
-const getNextSize = (startSize: number, location: DragLocationHistory, client: 'clientX' | 'clientY') => {
-  return Math.max(MIN_SIZE, startSize + (location.current.input[client] - location.initial.input[client]) / REM);
-};
+const MIN_WIDTH = 20;
+const MIN_HEIGHT = 3;
 
 export type StackItemResizeHandleProps = {};
 
 export const StackItemResizeHandle = () => {
   const { orientation } = useStack();
   const { setSize, size } = useStackItem();
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const dragStartSize = useRef<StackItemSize>(size);
-  const client = orientation === 'horizontal' ? 'clientX' : 'clientY';
-
-  useLayoutEffect(
-    () => {
-      if (!buttonRef.current || buttonRef.current.hasAttribute('draggable')) {
-        return;
-      }
-      // TODO(thure): This should handle StackItem state vs local state better.
-      draggable({
-        element: buttonRef.current,
-        onGenerateDragPreview: ({ nativeSetDragImage }) => {
-          // We will be moving the line to indicate a drag; we can disable the native drag preview.
-          disableNativeDragPreview({ nativeSetDragImage });
-          // We don't want any native drop animation for when the user does not drop on a drop target.
-          // We want the drag to finish immediately.
-          preventUnhandled.start();
-        },
-        onDragStart: () => {
-          dragStartSize.current =
-            dragStartSize.current === 'min-content'
-              ? measureStackItem(buttonRef.current!)[orientation === 'horizontal' ? 'width' : 'height'] / REM
-              : dragStartSize.current;
-        },
-        onDrag: ({ location }) => {
-          if (typeof dragStartSize.current !== 'number') {
-            return;
-          }
-          setSize(getNextSize(dragStartSize.current, location, client));
-        },
-        onDrop: ({ location }) => {
-          if (typeof dragStartSize.current !== 'number') {
-            return;
-          }
-          const nextSize = getNextSize(dragStartSize.current, location, client);
-          setSize(nextSize, true);
-          dragStartSize.current = nextSize;
-        },
-      });
-    },
-    [
-      // Note that `size` should not be a dependency here since dragging this adjusts the size.
-    ],
-  );
-
-  return (
-    <button
-      ref={buttonRef}
-      className={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',
-      )}
-    >
-      <div
-        role='none'
-        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'
-      >
-        <DragHandleSignifier />
-      </div>
-    </button>
-  );
-};
 
-const DragHandleSignifier = () => {
   return (
-    <svg
-      xmlns='http://www.w3.org/2000/svg'
-      viewBox='0 0 256 256'
-      fill='currentColor'
-      className='shrink-0 bs-[1em] is-[1em] text-unAccent'
-    >
-      {/* two pips: <path d='M256,120c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' />
-      <path d='M256,232c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' /> */}
-      <path d='M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />
-      <path d='M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />
-      <path d='M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />
-      <path d='M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />
-    </svg>
+    <ResizeHandle
+      side={orientation === 'horizontal' ? 'inline-end' : 'block-end'}
+      fallbackSize={DEFAULT_EXTRINSIC_SIZE}
+      minSize={orientation === 'horizontal' ? MIN_WIDTH : MIN_HEIGHT}
+      size={size}
+      onSizeChange={setSize}
+    />
   );
 };

package/src/components/StackItemSigil.tsx

@@ -6,15 +6,7 @@ import React, { Fragment, type PropsWithChildren, forwardRef, useRef, useState }
 
 import { type ActionLike } from '@dxos/app-graph';
 import { keySymbols } from '@dxos/keyboard';
-import {
-  Button,
-  type ButtonProps,
-  DropdownMenu,
-  Icon,
-  toLocalizedString,
-  Tooltip,
-  useTranslation,
-} from '@dxos/react-ui';
+import { Button, type ButtonProps, DropdownMenu, Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { type AttendableId, type Related, useAttention } from '@dxos/react-ui-attention';
 import { descriptionText, mx } from '@dxos/react-ui-theme';
 import { getHostPlatform } from '@dxos/util';
@@ -42,7 +34,7 @@ export const StackItemSigilButton = forwardRef<HTMLButtonElement, StackItemSigil
       <Button
         {...props}
         variant={variant}
-        classNames={['m-1 shrink-0 pli-0 min-bs-0 is-[--rail-action] bs-[--rail-action] relative', classNames]}
+        classNames={['shrink-0 pli-0 min-bs-0 is-[--rail-action] bs-[--rail-action] relative app-no-drag', classNames]}
         ref={forwardedRef}
       >
         <MenuSignifierHorizontal />
@@ -68,103 +60,98 @@ export const StackItemSigil = forwardRef<HTMLButtonElement, StackItemSigilProps>
     const suppressNextTooltip = useRef(false);
 
     const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);
-    const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);
+
+    const hasActions = actionGroups && actionGroups.length > 0;
+
+    const button = (
+      <StackItemSigilButton
+        attendableId={attendableId}
+        related={related}
+        // TODO(wittjosiah): Better disabling of interactive styles when no action are available.
+        //   Remove underscore icon when no actions are available?
+        classNames={!hasActions && 'cursor-default'}
+      >
+        <span className='sr-only'>{triggerLabel}</span>
+        <Icon icon={icon} size={5} />
+      </StackItemSigilButton>
+    );
+
+    if (!hasActions) {
+      return button;
+    }
 
     return (
-      <Tooltip.Root
-        open={triggerTooltipOpen}
-        onOpenChange={(nextOpen) => {
-          if (suppressNextTooltip.current) {
-            setTriggerTooltipOpen(false);
-            suppressNextTooltip.current = false;
-          } else {
-            setTriggerTooltipOpen(nextOpen);
-          }
+      <DropdownMenu.Root
+        {...{
+          open: optionsMenuOpen,
+          onOpenChange: (nextOpen: boolean) => {
+            if (!nextOpen) {
+              suppressNextTooltip.current = true;
+            }
+            return setOptionsMenuOpen(nextOpen);
+          },
         }}
       >
-        <DropdownMenu.Root
-          {...{
-            open: optionsMenuOpen,
-            onOpenChange: (nextOpen: boolean) => {
-              if (!nextOpen) {
-                suppressNextTooltip.current = true;
-              }
-              return setOptionsMenuOpen(nextOpen);
-            },
-          }}
-        >
-          <Tooltip.Trigger asChild>
-            <DropdownMenu.Trigger asChild ref={forwardedRef}>
-              <StackItemSigilButton attendableId={attendableId} related={related}>
-                <span className='sr-only'>{triggerLabel}</span>
-                <Icon icon={icon} size={5} />
-              </StackItemSigilButton>
-            </DropdownMenu.Trigger>
-          </Tooltip.Trigger>
-          <DropdownMenu.Portal>
-            <DropdownMenu.Content classNames='z-[31]'>
-              <DropdownMenu.Viewport>
-                {actionGroups?.map((actions, index) => {
-                  const separator = index > 0 ? <DropdownMenu.Separator /> : null;
-                  return (
-                    <Fragment key={index}>
-                      {separator}
-                      {actions.map((action) => {
-                        const shortcut =
-                          typeof action.properties.keyBinding === 'string'
-                            ? action.properties.keyBinding
-                            : action.properties.keyBinding?.[getHostPlatform()];
-
-                        const menuItemType = action.properties.menuItemType;
-                        const Root = menuItemType === 'toggle' ? DropdownMenu.CheckboxItem : DropdownMenu.Item;
-
-                        return (
-                          <Root
-                            key={action.id}
-                            onClick={(event) => {
-                              if (action.properties.disabled) {
-                                return;
-                              }
-                              event.stopPropagation();
-                              // TODO(thure): Why does Dialog’s modal-ness cause issues if we don’t explicitly close the menu here?
-                              suppressNextTooltip.current = true;
-                              setOptionsMenuOpen(false);
-                              onAction?.(action);
-                            }}
-                            classNames='gap-2'
-                            disabled={action.properties.disabled}
-                            checked={menuItemType === 'toggle' ? action.properties.isChecked : undefined}
-                            {...(action.properties?.testId && { 'data-testid': action.properties.testId })}
-                          >
-                            <Icon icon={action.properties.icon ?? 'ph--placeholder--regular'} size={4} />
-                            <span className='grow truncate'>{toLocalizedString(action.properties.label ?? '', t)}</span>
-                            {menuItemType === 'toggle' && (
-                              <DropdownMenu.ItemIndicator asChild>
-                                <Icon icon='ph--check--regular' size={4} />
-                              </DropdownMenu.ItemIndicator>
-                            )}
-                            {shortcut && (
-                              <span className={mx('shrink-0', descriptionText)}>{keySymbols(shortcut).join('')}</span>
-                            )}
-                          </Root>
-                        );
-                      })}
-                    </Fragment>
-                  );
-                })}
-                {children}
-              </DropdownMenu.Viewport>
-              <DropdownMenu.Arrow />
-            </DropdownMenu.Content>
-          </DropdownMenu.Portal>
-        </DropdownMenu.Root>
-        <Tooltip.Portal>
-          <Tooltip.Content side='bottom'>
-            {triggerLabel}
-            <Tooltip.Arrow />
-          </Tooltip.Content>
-        </Tooltip.Portal>
-      </Tooltip.Root>
+        <DropdownMenu.Trigger asChild ref={forwardedRef}>
+          {button}
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Portal>
+          <DropdownMenu.Content classNames='z-[31]'>
+            <DropdownMenu.Viewport>
+              {actionGroups?.map((actions, index) => {
+                const separator = index > 0 ? <DropdownMenu.Separator /> : null;
+                return (
+                  <Fragment key={index}>
+                    {separator}
+                    {actions.map((action) => {
+                      const shortcut =
+                        typeof action.properties.keyBinding === 'string'
+                          ? action.properties.keyBinding
+                          : action.properties.keyBinding?.[getHostPlatform()];
+
+                      const menuItemType = action.properties.menuItemType;
+                      const Root = menuItemType === 'toggle' ? DropdownMenu.CheckboxItem : DropdownMenu.Item;
+
+                      return (
+                        <Root
+                          key={action.id}
+                          onClick={(event) => {
+                            if (action.properties.disabled) {
+                              return;
+                            }
+                            event.stopPropagation();
+                            // TODO(thure): Why does Dialog’s modal-ness cause issues if we don’t explicitly close the menu here?
+                            suppressNextTooltip.current = true;
+                            setOptionsMenuOpen(false);
+                            onAction?.(action);
+                          }}
+                          classNames='gap-2'
+                          disabled={action.properties.disabled}
+                          checked={menuItemType === 'toggle' ? action.properties.isChecked : undefined}
+                          {...(action.properties?.testId && { 'data-testid': action.properties.testId })}
+                        >
+                          <Icon icon={action.properties.icon ?? 'ph--placeholder--regular'} size={4} />
+                          <span className='grow truncate'>{toLocalizedString(action.properties.label ?? '', t)}</span>
+                          {menuItemType === 'toggle' && (
+                            <DropdownMenu.ItemIndicator asChild>
+                              <Icon icon='ph--check--regular' size={4} />
+                            </DropdownMenu.ItemIndicator>
+                          )}
+                          {shortcut && (
+                            <span className={mx('shrink-0', descriptionText)}>{keySymbols(shortcut).join('')}</span>
+                          )}
+                        </Root>
+                      );
+                    })}
+                  </Fragment>
+                );
+              })}
+              {children}
+            </DropdownMenu.Viewport>
+            <DropdownMenu.Arrow />
+          </DropdownMenu.Content>
+        </DropdownMenu.Portal>
+      </DropdownMenu.Root>
     );
   },
 );

package/src/hooks/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { useStackDropForElements } from './useStackDropForElements';

package/src/hooks/useStackDropForElements.ts

@@ -0,0 +1,73 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
+import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { useLayoutEffect, useState } from 'react';
+
+import { type Orientation } from '../components/Stack';
+import { type StackItemRearrangeHandler, type StackItemData } from '../components/StackContext';
+
+/**
+ * Hook to handle drag and drop functionality for Stack components.
+ */
+export const useStackDropForElements = ({
+  element,
+  selfDroppable,
+  orientation,
+  id,
+  onRearrange,
+}: {
+  element: HTMLDivElement | null;
+  selfDroppable: boolean;
+  orientation: Orientation;
+  id?: string;
+  onRearrange?: StackItemRearrangeHandler;
+}) => {
+  const [dropping, setDropping] = useState(false);
+
+  useLayoutEffect(() => {
+    if (!element || !selfDroppable) {
+      return;
+    }
+
+    const acceptSourceType = orientation === 'horizontal' ? 'column' : 'card';
+
+    return combine(
+      dropTargetForElements({
+        element,
+        getData: ({ input, element }) => {
+          return attachClosestEdge(
+            { id, type: orientation === 'horizontal' ? 'card' : 'column' },
+            { input, element, allowedEdges: [orientation === 'horizontal' ? 'left' : 'top'] },
+          );
+        },
+        onDragEnter: ({ source }) => {
+          if (source.data.type === acceptSourceType) {
+            setDropping(true);
+          }
+        },
+        onDrag: ({ source }) => {
+          if (source.data.type === acceptSourceType) {
+            setDropping(true);
+          }
+        },
+        onDragLeave: () => {
+          return setDropping(false);
+        },
+        onDrop: ({ self, source }) => {
+          setDropping(false);
+          if (source.data.type === acceptSourceType && selfDroppable && onRearrange) {
+            onRearrange(source.data as StackItemData, self.data as StackItemData, extractClosestEdge(self.data));
+          }
+        },
+      }),
+      autoScrollForElements({ element, getAllowedAxis: () => orientation }),
+    );
+  }, [element, selfDroppable, orientation, id, onRearrange]);
+
+  return { dropping };
+};

package/dist/types/src/playwright/playwright.config.d.ts

@@ -1,3 +0,0 @@
-declare const _default: import("@playwright/test").PlaywrightTestConfig<{}, {}>;
-export default _default;
-//# sourceMappingURL=playwright.config.d.ts.map

package/dist/types/src/playwright/playwright.config.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"playwright.config.d.ts","sourceRoot":"","sources":["../../../../src/playwright/playwright.config.ts"],"names":[],"mappings":";AASA,wBAQG"}

package/dist/types/src/testing/EditorContent.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { type StackItemContentProps } from '../components';
-export declare const EditorContent: ({ data: { content } }: {
-    data: StackItemContentProps & {
-        content?: string;
-    };
-}) => React.JSX.Element;
-//# sourceMappingURL=EditorContent.d.ts.map

package/dist/types/src/testing/EditorContent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EditorContent.d.ts","sourceRoot":"","sources":["../../../../src/testing/EditorContent.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAkBxC,OAAO,EAAa,KAAK,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAEtE,eAAO,MAAM,aAAa,0BAAgC;IAAE,IAAI,EAAE,qBAAqB,GAAG;QAAE,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,sBAmC/G,CAAC"}

package/src/testing/EditorContent.tsx

@@ -1,60 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { useState } from 'react';
-
-import { Expando } from '@dxos/echo-schema';
-import { create } from '@dxos/live-object';
-import { useThemeContext } from '@dxos/react-ui';
-import {
-  createBasicExtensions,
-  createMarkdownExtensions,
-  createThemeExtensions,
-  decorateMarkdown,
-  formattingKeymap,
-  Toolbar,
-  useActionHandler,
-  useFormattingState,
-  useTextEditor,
-} from '@dxos/react-ui-editor';
-import { focusRing, mx, textBlockWidth } from '@dxos/react-ui-theme';
-
-import { StackItem, type StackItemContentProps } from '../components';
-
-export const EditorContent = ({ data: { content = '' } }: { data: StackItemContentProps & { content?: string } }) => {
-  const { themeMode } = useThemeContext();
-  const [text] = useState(create(Expando, { content }));
-  const id = text.id;
-  const [formattingState, formattingObserver] = useFormattingState();
-  const { parentRef, view, focusAttributes } = useTextEditor(() => {
-    return {
-      id,
-      initialValue: text.content,
-      extensions: [
-        formattingObserver,
-        createBasicExtensions(),
-        createMarkdownExtensions({ themeMode }),
-        createThemeExtensions({ themeMode, syntaxHighlighting: true, slots: { editor: { className: 'p-2' } } }),
-        decorateMarkdown(),
-        formattingKeymap(),
-      ],
-    };
-  }, [id, formattingObserver, themeMode]);
-
-  const handleAction = useActionHandler(view);
-
-  return (
-    <StackItem.Content>
-      <div {...focusAttributes} className={mx(textBlockWidth, focusRing, 'rounded-sm order-last')} ref={parentRef} />
-      <Toolbar.Root
-        onAction={handleAction}
-        state={formattingState}
-        classNames='sticky block-start-0 bg-[--sticky-bg] z-10'
-      >
-        <Toolbar.Markdown />
-        <Toolbar.Separator />
-      </Toolbar.Root>
-    </StackItem.Content>
-  );
-};