@dxos/react-ui-stack 0.8.1-main.ae460ac → 0.8.1-staging.31c3ee1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-stack",
-  "version": "0.8.1-main.ae460ac",
+  "version": "0.8.1-staging.31c3ee1",
   "description": "A stack component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -39,7 +39,7 @@
     "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
-    "@fluentui/react-tabster": "9.23.3",
+    "@fluentui/react-tabster": "^9.24.2",
     "@radix-ui/primitive": "1.1.1",
     "@radix-ui/react-compose-refs": "1.1.1",
     "@radix-ui/react-context": "1.1.1",
@@ -47,12 +47,12 @@
     "@radix-ui/react-slot": "1.1.2",
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "react-resize-detector": "^11.0.1",
-    "@dxos/echo-schema": "0.8.1-main.ae460ac",
-    "@dxos/keyboard": "0.8.1-main.ae460ac",
-    "@dxos/live-object": "0.8.1-main.ae460ac",
-    "@dxos/react-ui-attention": "0.8.1-main.ae460ac",
-    "@dxos/react-ui-dnd": "0.8.1-main.ae460ac",
-    "@dxos/util": "0.8.1-main.ae460ac"
+    "@dxos/echo-schema": "0.8.1-staging.31c3ee1",
+    "@dxos/keyboard": "0.8.1-staging.31c3ee1",
+    "@dxos/live-object": "0.8.1-staging.31c3ee1",
+    "@dxos/react-ui-attention": "0.8.1-staging.31c3ee1",
+    "@dxos/react-ui-dnd": "0.8.1-staging.31c3ee1",
+    "@dxos/util": "0.8.1-staging.31c3ee1"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -61,24 +61,24 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/app-graph": "0.8.1-main.ae460ac",
-    "@dxos/echo-schema": "0.8.1-main.ae460ac",
-    "@dxos/client": "0.8.1-main.ae460ac",
-    "@dxos/random": "0.8.1-main.ae460ac",
-    "@dxos/react-ui": "0.8.1-main.ae460ac",
-    "@dxos/react-ui-editor": "0.8.1-main.ae460ac",
-    "@dxos/react-ui-theme": "0.8.1-main.ae460ac",
-    "@dxos/storybook-utils": "0.8.1-main.ae460ac",
-    "@dxos/test-utils": "0.8.1-main.ae460ac"
+    "@dxos/app-graph": "0.8.1-staging.31c3ee1",
+    "@dxos/client": "0.8.1-staging.31c3ee1",
+    "@dxos/echo-schema": "0.8.1-staging.31c3ee1",
+    "@dxos/random": "0.8.1-staging.31c3ee1",
+    "@dxos/react-ui": "0.8.1-staging.31c3ee1",
+    "@dxos/storybook-utils": "0.8.1-staging.31c3ee1",
+    "@dxos/react-ui-theme": "0.8.1-staging.31c3ee1",
+    "@dxos/react-ui-editor": "0.8.1-staging.31c3ee1",
+    "@dxos/test-utils": "0.8.1-staging.31c3ee1"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/client": "0.8.1-main.ae460ac",
-    "@dxos/random": "0.8.1-main.ae460ac",
-    "@dxos/react-ui": "0.8.1-main.ae460ac",
-    "@dxos/react-ui-theme": "0.8.1-main.ae460ac"
+    "@dxos/client": "0.8.1-staging.31c3ee1",
+    "@dxos/random": "0.8.1-staging.31c3ee1",
+    "@dxos/react-ui": "0.8.1-staging.31c3ee1",
+    "@dxos/react-ui-theme": "0.8.1-staging.31c3ee1"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Stack.tsx

@@ -46,7 +46,7 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
   ) => {
     const [stackElement, stackRef] = useState<HTMLDivElement | null>(null);
     const composedItemRef = composeRefs<HTMLDivElement>(stackRef, forwardedRef);
-    const arrowNavigationGroup = useArrowNavigationGroup({ axis: orientation });
+    const arrowNavigationAttrs = useArrowNavigationGroup({ axis: orientation });
 
     const styles: CSSProperties = {
       [orientation === 'horizontal' ? 'gridTemplateColumns' : 'gridTemplateRows']:
@@ -79,14 +79,14 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
       <StackContext.Provider value={{ orientation, rail, size, onRearrange }}>
         <div
           {...props}
-          {...arrowNavigationGroup}
+          {...arrowNavigationAttrs}
           className={mx(
             'grid relative',
             gridClasses,
             (size === 'contain' || size === 'contain-fit-content') &&
               (orientation === 'horizontal'
-                ? 'overflow-x-auto min-bs-0 bs-full max-bs-full'
-                : 'overflow-y-auto min-is-0 is-full max-is-full'),
+                ? 'overflow-x-auto min-bs-0 max-bs-full bs-full'
+                : 'overflow-y-auto min-is-0 max-is-full is-full'),
             classNames,
           )}
           data-rail={rail}
@@ -110,4 +110,5 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
 );
 
 export { StackContext };
+
 export type { StackContextValue };

package/src/components/StackItem.tsx

@@ -96,6 +96,7 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
       if (!itemElement || !onRearrange || disableRearrange) {
         return;
       }
+
       return combine(
         draggable({
           element: itemElement,
@@ -146,14 +147,14 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
       );
     }, [orientation, item, onRearrange, selfDragHandleElement, itemElement]);
 
-    const focusGroupAttrs = useFocusableGroup({ tabBehavior: 'limited' });
+    const focusableGroupAttrs = useFocusableGroup({ tabBehavior: 'limited' });
 
     return (
       <StackItemContext.Provider value={{ selfDragHandleRef, size, setSize }}>
         <Root
           {...props}
           tabIndex={0}
-          {...focusGroupAttrs}
+          {...focusableGroupAttrs}
           className={mx(
             'group/stack-item grid relative',
             focusIndicatorVariant === 'over-all'

package/src/components/StackItemContent.tsx

@@ -14,7 +14,7 @@ export type StackItemContentProps = ThemedClassName<ComponentPropsWithoutRef<'di
    * 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;
+  toolbar?: boolean;
 
   /**
    * Whether to provide for the layout of a statusbar after the content.

package/src/components/StackItemHeading.tsx

@@ -16,6 +16,7 @@ export type StackItemHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'di
 export const StackItemHeading = ({ children, classNames, ...props }: StackItemHeadingProps) => {
   const { orientation } = useStack();
   const focusableGroupAttrs = useFocusableGroup({ tabBehavior: 'limited' });
+
   return (
     <div
       role='heading'
@@ -38,6 +39,7 @@ export type StackItemHeadingLabelProps = ThemedClassName<ComponentPropsWithRef<'
 export const StackItemHeadingLabel = forwardRef<HTMLHeadingElement, StackItemHeadingLabelProps>(
   ({ attendableId, related, classNames, ...props }, forwardedRef) => {
     const { hasAttention, isAncestor, isRelated } = useAttention(attendableId);
+
     return (
       <h1
         {...props}

package/src/components/StackItemSigil.tsx

@@ -24,12 +24,17 @@ export type KeyBinding = {
 
 export type StackItemSigilAction = Pick<ActionLike, 'id' | 'properties' | 'data'>;
 
-export type StackItemSigilButtonProps = Omit<ButtonProps, 'variant'> & AttendableId & Related;
+export type StackItemSigilButtonProps = Omit<ButtonProps, 'variant'> &
+  AttendableId &
+  Related & {
+    isMenu?: boolean;
+  };
 
 export const StackItemSigilButton = forwardRef<HTMLButtonElement, StackItemSigilButtonProps>(
-  ({ attendableId, classNames, related, children, ...props }, forwardedRef) => {
+  ({ attendableId, classNames, related, isMenu = true, children, ...props }, forwardedRef) => {
     const { hasAttention, isAncestor, isRelated } = useAttention(attendableId);
     const variant = (related && isRelated) || hasAttention || isAncestor ? 'primary' : 'ghost';
+    // TODO(wittjosiah): Disable hover styles when isMenu is false.
     return (
       <Button
         {...props}
@@ -37,7 +42,7 @@ export const StackItemSigilButton = forwardRef<HTMLButtonElement, StackItemSigil
         classNames={['shrink-0 pli-0 min-bs-0 is-[--rail-action] bs-[--rail-action] relative app-no-drag', classNames]}
         ref={forwardedRef}
       >
-        <MenuSignifierHorizontal />
+        {isMenu && <MenuSignifierHorizontal />}
         {children}
       </Button>
     );
@@ -67,6 +72,7 @@ export const StackItemSigil = forwardRef<HTMLButtonElement, StackItemSigilProps>
       <StackItemSigilButton
         attendableId={attendableId}
         related={related}
+        isMenu={hasActions}
         // TODO(wittjosiah): Better disabling of interactive styles when no action are available.
         //   Remove underscore icon when no actions are available?
         classNames={!hasActions && 'cursor-default'}