@dxos/react-ui-stack 0.8.4-main.ead640a → 0.8.4-main.ef1bc66f44

package/src/components/StackItem/StackItem.tsx

@@ -26,10 +26,10 @@ import { createPortal } from 'react-dom';
 
 import { ListItem, type ThemedClassName } from '@dxos/react-ui';
 import { resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
-import { type StackItemData, type StackItemSize } from '../defs';
 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';
@@ -54,6 +54,10 @@ export const DEFAULT_HORIZONTAL_SIZE = 48 satisfies StackItemSize;
 export const DEFAULT_VERTICAL_SIZE = 'min-content' satisfies StackItemSize;
 export const DEFAULT_EXTRINSIC_SIZE = DEFAULT_HORIZONTAL_SIZE satisfies StackItemSize;
 
+//
+// StackItemRoot
+//
+
 type StackItemRootProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {
   item: Omit<StackItemData, 'type'>;
   order?: number;
@@ -86,6 +90,7 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
     forwardedRef,
   ) => {
     const [itemElement, itemRef] = useState<HTMLDivElement | null>(null);
+    const composedItemRef = composeRefs<HTMLDivElement>(itemRef, forwardedRef);
     const [selfDragHandleElement, selfDragHandleRef] = useState<HTMLDivElement | null>(null);
     const [closestEdge, setEdge] = useState<Edge | null>(null);
     const [sourceId, setSourceId] = useState<string | null>(null);
@@ -96,8 +101,6 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
 
     const Root = role ?? 'div';
 
-    const composedItemRef = composeRefs<HTMLDivElement>(itemRef, forwardedRef);
-
     const setSize = useCallback(
       (nextSize: StackItemSize, commit?: boolean) => {
         setInternalSize(nextSize);
@@ -110,6 +113,7 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
 
     const type = orientation === 'horizontal' ? 'column' : 'card';
 
+    // TODO(burdon): Factor out?
     useLayoutEffect(() => {
       if (!itemElement || !onRearrange || disableRearrange) {
         return;
@@ -183,18 +187,18 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
 
     const focusableGroupAttrs = useFocusableGroup({ tabBehavior: 'limited' });
 
-    // Determine if the drop would result in any changes
+    // Determine if the drop would result in any changes.
     const shouldShowDropIndicator = () => {
       if (!closestEdge || !sourceId) {
         return false;
       }
 
-      // Don't show indicator when dragged item is over itself
+      // Don't show indicator when dragged item is over itself.
       if (sourceId === item.id) {
         return false;
       }
 
-      // Don't show indicator when dragged item is over the trailing edge of its previous sibling
+      // Don't show indicator when dragged item is over the trailing edge of its previous sibling.
       const isTrailingEdgeOfPrevSibling =
         prevSiblingId !== undefined &&
         sourceId === prevSiblingId &&
@@ -268,37 +272,45 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
   },
 );
 
+//
+// StackItemDragPreview
+//
+
 type StackItemDragPreviewProps = {
   children: ({ item }: { item: any }) => ReactNode;
 };
 
-export const StackItemDragPreview = ({ children }: StackItemDragPreviewProps) => {
+const StackItemDragPreview = ({ children }: StackItemDragPreviewProps) => {
   const { state } = useStackItem();
   return state?.type === 'preview' ? createPortal(children({ item: state.item }), state.container) : null;
 };
 
+//
+// StackItem
+//
+
 export const StackItem = {
   Root: StackItemRoot,
   Content: StackItemContent,
+  DragHandle: StackItemDragHandle,
+  DragPreview: StackItemDragPreview,
   Heading: StackItemHeading,
   HeadingLabel: StackItemHeadingLabel,
   HeadingStickyContent: StackItemHeadingStickyContent,
   ResizeHandle: StackItemResizeHandle,
-  DragHandle: StackItemDragHandle,
   Sigil: StackItemSigil,
   SigilButton: StackItemSigilButton,
-  DragPreview: StackItemDragPreview,
 };
 
 export type {
   StackItemRootProps,
   StackItemContentProps,
+  StackItemDragHandleProps,
+  StackItemDragPreviewProps,
   StackItemHeadingProps,
   StackItemHeadingLabelProps,
   StackItemResizeHandleProps,
-  StackItemDragHandleProps,
   StackItemSigilProps,
   StackItemSigilButtonProps,
   StackItemSigilAction,
-  StackItemDragPreviewProps,
 };

package/src/components/StackItem/StackItemContent.tsx

@@ -5,82 +5,49 @@
 import React, { type ComponentPropsWithoutRef, forwardRef, useMemo } from 'react';
 
 import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 import { useStack, useStackItem } from '../StackContext';
 
-// TODO(burdon): Add prop for container-max-width?
 export type StackItemContentProps = ThemedClassName<Omit<ComponentPropsWithoutRef<'div'>, 'role' | 'scrollable'>> & {
-  /**
-   * This flag is required in order to clarify a developer experience that seemed like it needed extra boilerplate
-   * (`row-span-2`) or was buggy. See the description of the StackItem.Content component itself for more information.
-   */
   toolbar?: boolean;
-
-  /**
-   * Whether to provide for the layout of a statusbar after the content.
-   */
   statusbar?: boolean;
-
-  /**
-   * Whether to support y-axis scrolling.
-   */
-  scrollable?: boolean;
-
-  /**
-   * Whether to set a certain aspect ratio on the content, including the toolbar and statusbar.
-   * This is provided for convenience and consistency; it can instead be specified by the `classNames` or `style` props as needed.
-   */
-  size?: 'intrinsic' | 'video' | 'square';
-
-  /**
-   * Whether the consumer intends to do something custom and typical affordances should not apply.
-   * @deprecated Replace with override for gridTempateRows.
-   */
-  layoutManaged?: boolean;
 };
 
 /**
- * This component should be used by plugins for rendering content within a stack item, a.k.a. a “plank” or “section”.
- * The `toolbar` flag must be provided since this component provides for the layout of content with the toolbar.
+ * This component should be used by plugins for rendering content within a stack item (i.e., a “plank” or “section”).
  */
 export const StackItemContent = forwardRef<HTMLDivElement, StackItemContentProps>(
-  (
-    { children, toolbar, statusbar, layoutManaged, classNames, size = 'intrinsic', scrollable, ...props },
-    forwardedRef,
-  ) => {
+  ({ classNames, children, toolbar, statusbar, ...props }, forwardedRef) => {
     const { size: stackItemSize } = useStack();
     const { role } = useStackItem();
     const style = useMemo(
-      () =>
-        layoutManaged
-          ? {}
-          : {
-              gridTemplateRows: [
-                ...(toolbar ? [role === 'section' ? 'calc(var(--toolbar-size) - 1px)' : 'var(--toolbar-size)'] : []),
-                '1fr',
-                ...(statusbar ? ['var(--statusbar-size)'] : []),
-              ].join(' '),
-            },
-      [toolbar, statusbar, layoutManaged],
+      () => ({
+        gridTemplateRows: [
+          toolbar && role === 'section' ? 'calc(var(--toolbar-size) - 1px)' : 'var(--toolbar-size)',
+          '1fr',
+          statusbar && 'var(--statusbar-size)',
+        ]
+          .filter(Boolean)
+          .join(' '),
+      }),
+      [toolbar, statusbar],
     );
 
     return (
       <div
-        role='none'
         {...props}
+        role='none'
+        style={style}
         className={mx(
           'group grid grid-cols-[100%] density-coarse',
-          size === 'video' ? 'aspect-video' : size === 'square' && 'aspect-square',
           stackItemSize === 'contain' && 'min-bs-0 overflow-hidden',
-          scrollable ? 'min-bs-0 overflow-y-auto scrollbar-thin contain-layout' : 'overflow-hidden',
-          role === 'section' &&
-            toolbar &&
+          toolbar &&
+            role === 'section' &&
             '[&_.dx-toolbar]:sticky [&_.dx-toolbar]:z-[1] [&_.dx-toolbar]:block-start-0 [&_.dx-toolbar]:-mbe-px [&_.dx-toolbar]:min-is-0',
           toolbar && '[&>.dx-toolbar]:relative [&>.dx-toolbar]:border-be [&>.dx-toolbar]:border-subduedSeparator',
           classNames,
         )}
-        style={style}
         data-popover-collision-boundary={true}
         ref={forwardedRef}
       >
@@ -89,3 +56,5 @@ export const StackItemContent = forwardRef<HTMLDivElement, StackItemContentProps
     );
   },
 );
+
+StackItemContent.displayName = 'StackItemContent';

package/src/components/StackItem/StackItemHeading.tsx

@@ -12,7 +12,7 @@ import React, {
 
 import { type ThemedClassName } from '@dxos/react-ui';
 import { type AttendableId, type Related, useAttention } from '@dxos/react-ui-attention';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 import { useStack } from '../StackContext';
 

package/src/components/StackItem/StackItemSigil.tsx

@@ -4,11 +4,11 @@
 
 import React, { Fragment, type PropsWithChildren, forwardRef, useState } from 'react';
 
-import { type ActionLike } from '@dxos/app-graph';
+import { type Node } from '@dxos/app-graph';
 import { keySymbols } from '@dxos/keyboard';
 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 { descriptionText, mx } from '@dxos/ui-theme';
 import { getHostPlatform } from '@dxos/util';
 
 import { translationKey } from '../../translations';
@@ -23,7 +23,7 @@ export type KeyBinding = {
   unknown?: string;
 };
 
-export type StackItemSigilAction = Pick<ActionLike, 'id' | 'properties' | 'data'>;
+export type StackItemSigilAction = Pick<Node.ActionLike, 'id' | 'properties' | 'data'>;
 
 export type StackItemSigilButtonProps = Omit<ButtonProps, 'variant'> &
   AttendableId &

package/src/components/deprecated/LayoutControls.tsx

@@ -30,6 +30,9 @@ const LayoutControl = ({ icon, label, ...props }: Omit<ButtonProps, 'children'>
   return <IconButton iconOnly icon={icon} label={label} tooltipSide='bottom' variant='ghost' {...props} />;
 };
 
+/**
+ * @deprecated
+ */
 export const LayoutControls = forwardRef<HTMLDivElement, LayoutControlsProps>(
   (
     { onClick, variant = 'default', capabilities: can, isSolo, pin, close = false, children, ...props },

package/src/components/index.ts

@@ -2,8 +2,8 @@
 // Copyright 2024 DXOS.org
 //
 
-export type * from './defs';
+export type * from './types';
 
-export * from './Image';
+export * from './CardStack';
 export * from './Stack';
 export * from './StackItem';

package/src/hooks/useStackDropForElements.ts

@@ -10,68 +10,82 @@ import { useLayoutEffect, useState } from 'react';
 
 import { type Orientation, type StackItemData, type StackItemRearrangeHandler } from '../components';
 
+const noop = () => {};
+
+export type UseStackDropForElementsProps = {
+  id?: string;
+  element: HTMLDivElement | null;
+  scrollElement?: HTMLDivElement | null;
+  orientation: Orientation;
+  selfDroppable: boolean;
+  onRearrange?: StackItemRearrangeHandler;
+};
+
+export type UseStackDropForElements = {
+  dropping: boolean;
+};
+
 /**
- * Hook to handle drag and drop functionality for Stack components.
+ * Hook to handle drag-and-drop functionality for Stack components.
  */
 export const useStackDropForElements = ({
   id,
   element,
   scrollElement = element,
-  selfDroppable,
   orientation,
+  selfDroppable,
   onRearrange,
-}: {
-  id?: string;
-  element: HTMLDivElement | null;
-  scrollElement?: HTMLDivElement | null;
-  selfDroppable: boolean;
-  orientation: Orientation;
-  onRearrange?: StackItemRearrangeHandler;
-}) => {
+}: UseStackDropForElementsProps): UseStackDropForElements => {
   const [dropping, setDropping] = useState(false);
 
   useLayoutEffect(() => {
-    if (!element || !selfDroppable) {
+    if (!element) {
       return;
     }
 
     const acceptSourceType = orientation === 'horizontal' ? 'column' : 'card';
 
+    // TODO(burdon): Use monitor?
     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: scrollElement as Element,
-        getAllowedAxis: () => orientation,
-      }),
+      selfDroppable
+        ? 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));
+              }
+            },
+          })
+        : noop,
+
+      scrollElement
+        ? autoScrollForElements({
+            element: scrollElement,
+            getAllowedAxis: () => orientation,
+          })
+        : noop,
     );
-  }, [element, scrollElement, selfDroppable, orientation, id, onRearrange]);
+  }, [id, element, scrollElement, selfDroppable, orientation, onRearrange]);
 
   return { dropping };
 };

package/src/index.ts

@@ -2,8 +2,5 @@
 // Copyright 2022 DXOS.org
 //
 
-// TODO(thure): Consider exporting exemplars from separate endpoints.
-
 export * from './components';
-export * from './exemplars';
 export * from './translations';

package/src/playwright/playwright.config.ts

@@ -10,7 +10,7 @@ export default defineConfig({
   ...e2ePreset(import.meta.dirname),
   // TODO(wittjosiah): Avoid hard-coding ports.
   webServer: {
-    command: 'moon run storybook:serve-e2e -- --port=9003',
+    command: 'moon run storybook-react:serve-e2e -- --port=9003',
     port: 9003,
     reuseExistingServer: false,
   },

package/src/translations.ts

@@ -4,7 +4,7 @@
 
 import { type Resource } from '@dxos/react-ui';
 
-export const translationKey = 'react-ui-stack';
+export const translationKey = '@dxos/react-ui-stack';
 
 export const translations = [
   {