@dxos/react-ui-stack 0.7.5-labs.e27f9b9 → 0.7.5-main.2567c87

package/src/components/StackItemContent.tsx

@@ -15,12 +15,10 @@ export type StackItemContentProps = ThemedClassName<ComponentPropsWithoutRef<'di
    * (`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 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.

package/src/components/StackItemHeading.tsx

@@ -23,7 +23,7 @@ export const StackItemHeading = ({ children, classNames, ...props }: StackItemHe
       tabIndex={0}
       {...focusableGroupAttrs}
       className={mx(
-        'flex items-center dx-focus-ring-inset-over-all relative !border-is-0',
+        'flex items-center ch-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,8 +15,7 @@ import { DEFAULT_EXTRINSIC_SIZE } from './StackItem';
 
 const REM = parseFloat(getComputedStyle(document.documentElement).fontSize);
 
-const MIN_WIDTH = 20;
-const MIN_HEIGHT = 3;
+const MIN_SIZE = 20;
 
 const measureStackItem = (element: HTMLButtonElement): { width: number; height: number } => {
   const stackItemElement = element.closest('[data-dx-stack-item]');
@@ -24,10 +23,7 @@ const measureStackItem = (element: HTMLButtonElement): { width: number; height:
 };
 
 const getNextSize = (startSize: number, location: DragLocationHistory, client: 'clientX' | 'clientY') => {
-  return Math.max(
-    client === 'clientX' ? MIN_WIDTH : MIN_HEIGHT,
-    startSize + (location.current.input[client] - location.initial.input[client]) / REM,
-  );
+  return Math.max(MIN_SIZE, startSize + (location.current.input[client] - location.initial.input[client]) / REM);
 };
 
 export type StackItemResizeHandleProps = {};
@@ -85,36 +81,29 @@ export const StackItemResizeHandle = () => {
     <button
       ref={buttonRef}
       className={mx(
-        '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',
+        orientation === 'horizontal' ? 'cursor-col-resize' : 'cursor-row-resize',
+        'group absolute is-3 bs-full inline-end-[-1px] !border-lb-0',
         '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:bg-accentFocusIndicator',
+        'before:absolute before:block before:inset-block-0 before:inline-end-0 before:is-1 before:bg-accentFocusIndicator',
       )}
     >
       <div
         role='none'
-        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',
-        )}
+        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'
       >
-        <DragHandleSignifier orientation={orientation} />
+        <DragHandleSignifier />
       </div>
     </button>
   );
 };
 
-const DragHandleSignifier = ({ orientation }: { orientation: 'horizontal' | 'vertical' }) => {
+const DragHandleSignifier = () => {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
       viewBox='0 0 256 256'
       fill='currentColor'
-      className={mx('shrink-0 bs-[1em] is-[1em] text-unAccent', orientation === 'vertical' && 'rotate-90')}
+      className='shrink-0 bs-[1em] is-[1em] text-unAccent'
     >
       {/* 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,7 +6,15 @@ 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, useTranslation } from '@dxos/react-ui';
+import {
+  Button,
+  type ButtonProps,
+  DropdownMenu,
+  Icon,
+  toLocalizedString,
+  Tooltip,
+  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';
@@ -34,7 +42,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 app-no-drag', classNames]}
+        classNames={['shrink-0 pli-0 min-bs-0 is-[--rail-action] bs-[--rail-action] relative', classNames]}
         ref={forwardedRef}
       >
         <MenuSignifierHorizontal />
@@ -60,98 +68,103 @@ export const StackItemSigil = forwardRef<HTMLButtonElement, StackItemSigilProps>
     const suppressNextTooltip = useRef(false);
 
     const [optionsMenuOpen, setOptionsMenuOpen] = 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;
-    }
+    const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);
 
     return (
-      <DropdownMenu.Root
-        {...{
-          open: optionsMenuOpen,
-          onOpenChange: (nextOpen: boolean) => {
-            if (!nextOpen) {
-              suppressNextTooltip.current = true;
-            }
-            return setOptionsMenuOpen(nextOpen);
-          },
+      <Tooltip.Root
+        open={triggerTooltipOpen}
+        onOpenChange={(nextOpen) => {
+          if (suppressNextTooltip.current) {
+            setTriggerTooltipOpen(false);
+            suppressNextTooltip.current = false;
+          } else {
+            setTriggerTooltipOpen(nextOpen);
+          }
         }}
       >
-        <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>
+        <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>
     );
   },
 );