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

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'}