@dxos/react-ui-stack 0.8.4-main.c85a9c8dae → 0.8.4-main.cb12b3f963

package/src/components/StackItem/StackItem.stories.tsx

@@ -19,7 +19,7 @@ const DefaultStory = (props: StackItemRootProps) => {
           <DropdownMenu.Root>
             <DropdownMenu.Trigger asChild>
               <StackItem.SigilButton>
-                <Icon icon='ph--dots-three--regular' size={5} />
+                <Icon icon='ph--dots-three--regular' />
               </StackItem.SigilButton>
             </DropdownMenu.Trigger>
           </DropdownMenu.Root>

package/src/components/StackItem/StackItem.tsx

@@ -2,15 +2,15 @@
 // Copyright 2024 DXOS.org
 //
 
-import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
-import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { preserveOffsetOnSource } from '@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source';
-import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
 import {
   type Edge,
   attachClosestEdge,
   extractClosestEdge,
 } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { preserveOffsetOnSource } from '@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source';
+import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
 import { useFocusableGroup } from '@fluentui/react-tabster';
 import { composeRefs } from '@radix-ui/react-compose-refs';
 import React, {
@@ -30,7 +30,6 @@ import { mx } from '@dxos/ui-theme';
 
 import { type ItemDragState, StackItemContext, idle, useStack, useStackItem } from '../StackContext';
 import { type StackItemData, type StackItemSize } from '../types';
-
 import { StackItemContent, type StackItemContentProps } from './StackItemContent';
 import { StackItemDragHandle, type StackItemDragHandleProps } from './StackItemDragHandle';
 import {
@@ -49,9 +48,8 @@ import {
   type StackItemSigilProps,
 } from './StackItemSigil';
 
-// NOTE: 48rem fills the screen on a MacbookPro with the sidebars closed.
-export const DEFAULT_HORIZONTAL_SIZE = 48 satisfies StackItemSize;
 export const DEFAULT_VERTICAL_SIZE = 'min-content' satisfies StackItemSize;
+export const DEFAULT_HORIZONTAL_SIZE = 50 satisfies StackItemSize;
 export const DEFAULT_EXTRINSIC_SIZE = DEFAULT_HORIZONTAL_SIZE satisfies StackItemSize;
 
 //
@@ -59,13 +57,13 @@ export const DEFAULT_EXTRINSIC_SIZE = DEFAULT_HORIZONTAL_SIZE satisfies StackIte
 //
 
 type StackItemRootProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {
+  role?: 'article' | 'section';
   item: Omit<StackItemData, 'type'>;
   order?: number;
   prevSiblingId?: string;
   nextSiblingId?: string;
   size?: StackItemSize;
   onSizeChange?: (nextSize: StackItemSize) => void;
-  role?: 'article' | 'section';
   disableRearrange?: boolean;
   focusIndicatorVariant?: 'over-all' | 'group' | 'over-all-always' | 'group-always';
 };
@@ -73,16 +71,16 @@ type StackItemRootProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {
 const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
   (
     {
-      item,
-      children,
       classNames,
-      size: propsSize,
-      onSizeChange,
+      children,
+      style,
       role,
+      item,
       order,
       prevSiblingId,
       nextSiblingId,
-      style,
+      size: sizeProp,
+      onSizeChange,
       disableRearrange,
       focusIndicatorVariant = 'over-all',
       ...props
@@ -97,7 +95,7 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
     const [dragState, setDragState] = useState<ItemDragState>(idle);
     const { orientation, rail, onRearrange, size: stackSize, stackId } = useStack();
     const [size = orientation === 'horizontal' ? DEFAULT_HORIZONTAL_SIZE : DEFAULT_VERTICAL_SIZE, setInternalSize] =
-      useState(propsSize);
+      useState(sizeProp);
 
     const Root = role ?? 'div';
 
@@ -143,7 +141,7 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
           onDragStart: () => {
             document.body.removeAttribute('data-drag-preview');
             itemElement?.closest('[data-drag-autoscroll]')?.setAttribute('data-drag-autoscroll', 'active');
-            setDragState({ type: 'w-dragging', item });
+            setDragState({ type: 'is-dragging', item });
           },
           onDrop: () => {
             itemElement?.closest('[data-drag-autoscroll]')?.setAttribute('data-drag-autoscroll', 'idle');

package/src/components/StackItem/StackItemHeading.tsx

@@ -27,16 +27,16 @@ export const StackItemHeading = ({
   classNames,
   asChild,
   separateOnScroll,
+  role,
   ...props
 }: StackItemHeadingProps) => {
   const { orientation } = useStack();
-
   const Comp = asChild ? Slot : Primitive.div;
 
   return (
     <Comp
-      role='heading'
       {...props}
+      role={role ?? 'heading'}
       className={mx(
         'flex items-center border-x-0! bg-header-surface',
         separateOnScroll

package/src/components/StackItem/StackItemResizeHandle.tsx

@@ -7,7 +7,6 @@ import React from 'react';
 import { ResizeHandle } from '@dxos/react-ui-dnd';
 
 import { useStack, useStackItem } from '../StackContext';
-
 import { DEFAULT_EXTRINSIC_SIZE } from './StackItem';
 
 const MIN_WIDTH = 20;

package/src/components/StackItem/StackItemSigil.tsx

@@ -11,7 +11,7 @@ import { type AttendableId, type Related, useAttention } from '@dxos/react-ui-at
 import { mx } from '@dxos/ui-theme';
 import { getHostPlatform } from '@dxos/util';
 
-import { translationKey } from '../../translations';
+import { translationKey } from '#translations';
 
 import { MenuSignifierHorizontal } from './MenuSignifier';
 
@@ -81,7 +81,7 @@ export const StackItemSigil = forwardRef<HTMLButtonElement, StackItemSigilProps>
         classNames={!hasActions && 'cursor-default'}
       >
         <span className='sr-only'>{triggerLabel}</span>
-        <Icon icon={icon} size={5} />
+        <Icon icon={icon} />
       </StackItemSigilButton>
     );
 

package/src/hooks/useStackDropForElements.ts

@@ -2,10 +2,10 @@
 // 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 { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { useLayoutEffect, useState } from 'react';
 
 import { type Orientation, type StackItemData, type StackItemRearrangeHandler } from '../components';

package/src/index.ts

@@ -3,4 +3,3 @@
 //
 
 export * from './components';
-export * from './translations';

package/src/translations.ts

@@ -10,14 +10,14 @@ export const translations = [
   {
     'en-US': {
       [translationKey]: {
-        'resize label': 'Drag to resize',
-        'drag handle label': 'Drag to rearrange',
-        'pin start label': 'Pin to the left sidebar',
-        'pin end label': 'Pin to the right sidebar',
-        'increment start label': 'Move to the left',
-        'increment end label': 'Move to the right',
-        'close label': 'Close',
-        'minify label': 'Minify',
+        'resize.label': 'Drag to resize',
+        'drag-handle.label': 'Drag to rearrange',
+        'pin-start.label': 'Pin to the left sidebar',
+        'pin-end.label': 'Pin to the right sidebar',
+        'increment-start.label': 'Move to the left',
+        'increment-end.label': 'Move to the right',
+        'close.label': 'Close',
+        'minify.label': 'Minify',
       },
     },
   },