@dxos/react-ui-stack 0.7.5-main.9d2a38b → 0.7.5-main.ff8607b

package/src/components/Stack.tsx

@@ -1,7 +1,9 @@
 //
 // Copyright 2024 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 { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { composeRefs } from '@radix-ui/react-compose-refs';
@@ -29,6 +31,8 @@ export const railGridHorizontal = 'grid-rows-[[rail-start]_var(--rail-size)_[con
 
 export const railGridVertical = 'grid-cols-[[rail-start]_var(--rail-size)_[content-start]_1fr_[content-end]]';
 
+export const autoScrollRootAttributes = { 'data-drag-autoscroll': 'idle' };
+
 export const Stack = forwardRef<HTMLDivElement, StackProps>(
   (
     {
@@ -62,33 +66,36 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
         return;
       }
       const acceptSourceType = orientation === 'horizontal' ? 'column' : 'card';
-      return dropTargetForElements({
-        element: stackElement,
-        getData: ({ input, element }) => {
-          return attachClosestEdge(
-            { id: props.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: () => setDropping(false),
-        onDrop: ({ self, source }) => {
-          setDropping(false);
-          if (source.data.type === acceptSourceType && selfDroppable) {
-            onRearrange(source.data as StackItemData, self.data as StackItemData, extractClosestEdge(self.data));
-          }
-        },
-      });
-    }, [stackElement, selfDroppable]);
+      return combine(
+        dropTargetForElements({
+          element: stackElement,
+          getData: ({ input, element }) => {
+            return attachClosestEdge(
+              { id: props.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: () => setDropping(false),
+          onDrop: ({ self, source }) => {
+            setDropping(false);
+            if (source.data.type === acceptSourceType && selfDroppable) {
+              onRearrange(source.data as StackItemData, self.data as StackItemData, extractClosestEdge(self.data));
+            }
+          },
+        }),
+        autoScrollForElements({ element: stackElement, getAllowedAxis: () => orientation }),
+      );
+    }, [stackElement, selfDroppable, orientation]);
 
     return (
       <StackContext.Provider value={{ orientation, rail, size, onRearrange }}>
@@ -102,20 +109,28 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
                 ? railGridHorizontal
                 : railGridVertical
               : orientation === 'horizontal'
-                ? 'grid-rows-1'
-                : 'grid-cols-1',
+                ? '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,
           )}
+          data-rail={rail}
           aria-orientation={orientation}
           style={styles}
           ref={composedItemRef}
         >
           {children}
-          {selfDroppable && dropping && <ListItem.DropIndicator edge={orientation === 'horizontal' ? 'left' : 'top'} />}
+          {selfDroppable && dropping && (
+            <ListItem.DropIndicator
+              lineInset={8}
+              terminalInset={-8}
+              gap={-8}
+              edge={orientation === 'horizontal' ? 'left' : 'top'}
+            />
+          )}
         </div>
       </StackContext.Provider>
     );

package/src/components/StackItem.tsx

@@ -4,8 +4,8 @@
 
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { draggable, dropTargetForElements } 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 { preserveOffsetOnSource } from '@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source';
+import { scrollJustEnoughIntoView } from '@atlaskit/pragmatic-drag-and-drop/element/scroll-just-enough-into-view';
 import {
   attachClosestEdge,
   extractClosestEdge,
@@ -46,10 +46,27 @@ export type StackItemRootProps = ThemedClassName<ComponentPropsWithRef<'div'>> &
   size?: StackItemSize;
   onSizeChange?: (nextSize: StackItemSize) => void;
   role?: 'article' | 'section';
+  disableRearrange?: boolean;
+  focusIndicatorVariant?: 'over-all' | 'group';
 };
 
 const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
-  ({ item, children, classNames, size: propsSize, onSizeChange, role, order, style, ...props }, forwardedRef) => {
+  (
+    {
+      item,
+      children,
+      classNames,
+      size: propsSize,
+      onSizeChange,
+      role,
+      order,
+      style,
+      disableRearrange,
+      focusIndicatorVariant = 'over-all',
+      ...props
+    },
+    forwardedRef,
+  ) => {
     const [itemElement, itemRef] = useState<HTMLDivElement | null>(null);
     const [selfDragHandleElement, selfDragHandleRef] = useState<HTMLDivElement | null>(null);
     const [closestEdge, setEdge] = useState<Edge | null>(null);
@@ -74,7 +91,7 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
     const type = orientation === 'horizontal' ? 'column' : 'card';
 
     useLayoutEffect(() => {
-      if (!itemElement || !onRearrange) {
+      if (!itemElement || !onRearrange || disableRearrange) {
         return;
       }
       return combine(
@@ -82,10 +99,20 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
           element: itemElement,
           ...(selfDragHandleElement && { dragHandle: selfDragHandleElement }),
           getInitialData: () => ({ id: item.id, type }),
-          // TODO(thure): tabster focus honeypots are causing the preview to render with the wrong dimensions; what do?
-          onGenerateDragPreview: ({ nativeSetDragImage }) => {
-            disableNativeDragPreview({ nativeSetDragImage });
-            preventUnhandled.start();
+          onGenerateDragPreview: ({ nativeSetDragImage, source, location }) => {
+            document.body.setAttribute('data-drag-preview', 'true');
+            scrollJustEnoughIntoView({ element: source.element });
+            const { x, y } = preserveOffsetOnSource({ element: source.element, input: location.current.input })({
+              container: (source.element.offsetParent ?? document.body) as HTMLElement,
+            });
+            nativeSetDragImage?.(source.element, x, y);
+          },
+          onDragStart: () => {
+            document.body.removeAttribute('data-drag-preview');
+            itemElement?.closest('[data-drag-autoscroll]')?.setAttribute('data-drag-autoscroll', 'active');
+          },
+          onDrop: () => {
+            itemElement?.closest('[data-drag-autoscroll]')?.setAttribute('data-drag-autoscroll', 'idle');
           },
         }),
         dropTargetForElements({
@@ -126,7 +153,12 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
           tabIndex={0}
           {...focusGroupAttrs}
           className={mx(
-            'group/stack-item grid relative ch-focus-ring-inset-over-all',
+            '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'),
@@ -145,7 +177,7 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
           ref={composedItemRef}
         >
           {children}
-          {closestEdge && <ListItem.DropIndicator edge={closestEdge} />}
+          {closestEdge && <ListItem.DropIndicator lineInset={8} terminalInset={-8} edge={closestEdge} />}
         </Root>
       </StackItemContext.Provider>
     );

package/src/components/StackItemHeading.tsx

@@ -23,7 +23,7 @@ export const StackItemHeading = ({ children, classNames, ...props }: StackItemHe
       tabIndex={0}
       {...focusableGroupAttrs}
       className={mx(
-        'flex items-center ch-focus-ring-inset-over-all relative !border-is-0',
+        'flex items-center dx-focus-ring-inset-over-all relative !border-is-0',
         orientation === 'horizontal' ? 'bs-[--rail-size]' : 'is-[--rail-size] flex-col',
         classNames,
       )}

package/src/components/StackItemResizeHandle.tsx

@@ -15,7 +15,8 @@ import { DEFAULT_EXTRINSIC_SIZE } from './StackItem';
 
 const REM = parseFloat(getComputedStyle(document.documentElement).fontSize);
 
-const MIN_SIZE = 20;
+const MIN_WIDTH = 20;
+const MIN_HEIGHT = 3;
 
 const measureStackItem = (element: HTMLButtonElement): { width: number; height: number } => {
   const stackItemElement = element.closest('[data-dx-stack-item]');
@@ -23,7 +24,10 @@ const measureStackItem = (element: HTMLButtonElement): { width: number; height:
 };
 
 const getNextSize = (startSize: number, location: DragLocationHistory, client: 'clientX' | 'clientY') => {
-  return Math.max(MIN_SIZE, startSize + (location.current.input[client] - location.initial.input[client]) / REM);
+  return Math.max(
+    client === 'clientX' ? MIN_WIDTH : MIN_HEIGHT,
+    startSize + (location.current.input[client] - location.initial.input[client]) / REM,
+  );
 };
 
 export type StackItemResizeHandleProps = {};
@@ -81,29 +85,36 @@ export const StackItemResizeHandle = () => {
     <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',
+        '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:inset-block-0 before:inline-end-0 before:is-1 before:bg-accentFocusIndicator',
+        'before:absolute before:block 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'
+        className={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',
+        )}
       >
-        <DragHandleSignifier />
+        <DragHandleSignifier orientation={orientation} />
       </div>
     </button>
   );
 };
 
-const DragHandleSignifier = () => {
+const DragHandleSignifier = ({ orientation }: { orientation: 'horizontal' | 'vertical' }) => {
   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'
+      className={mx('shrink-0 bs-[1em] is-[1em] text-unAccent', orientation === 'vertical' && 'rotate-90')}
     >
       {/* 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' /> */}

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={['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>
     );
   },
 );