@estiva-app/ui 0.10.0 → 0.11.0

package/src/ScrollArea.tsx

@@ -0,0 +1,81 @@
+import type { ReactNode } from 'react'
+import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area'
+import { cn } from './cn'
+
+/**
+ * A region that scrolls without taking width for its scrollbar.
+ *
+ * A native scrollbar is part of the layout: the moment content overflows, the
+ * bar takes its width from the content, the text column narrows, and the
+ * right-hand padding looks wider than the left. Katerina saw it in every
+ * scrolling surface of both apps (2026-09-08). Base UI's `ScrollArea` hides
+ * the native bar and draws its own over the content, so nothing moves when
+ * it appears; the bar shows while the pointer is over the region or the
+ * content is moving, and fades otherwise.
+ *
+ * Three boxes, and each class prop lands on one:
+ *
+ * - the **region** (`className`): its size and placement — `h-[240px]`, a
+ *   grid cell, `flex-1 min-h-0`;
+ * - the **viewport** (`viewportClassName`): the box that scrolls — a
+ *   `max-h-*` cap goes here, and nowhere else, because a cap on the region
+ *   lets the viewport grow to its content and nothing scrolls (measured,
+ *   2026-09-08);
+ * - the **content** (`contentClassName`): the box the children sit in — the
+ *   padding, the gap, `flex flex-col`. Base UI watches this box for size
+ *   changes; without it the bar kept showing on Ship's page for overflow that
+ *   was no longer there (measured, 2026-09-09).
+ *
+ * The bar is `border-strong` on nothing, 6px wide, inset 2px from the edge —
+ * the thin scrollbar both apps had styled by hand in their `index.css`, drawn
+ * once here instead.
+ *
+ * `orientation` says which way the region scrolls; a table that is wider
+ * than its box scrolls `horizontal`, a list `vertical` (the default), a board
+ * `both`. A vertical region keeps its content no wider than itself, so a
+ * long label still truncates.
+ */
+export interface ScrollAreaProps {
+  orientation?: 'vertical' | 'horizontal' | 'both'
+  /** On the region: its size and placement. */
+  className?: string
+  /** On the viewport, the box that scrolls: a `max-h-*` cap. */
+  viewportClassName?: string
+  /** On the content, the box the children sit in: padding, gap, layout. */
+  contentClassName?: string
+  children: ReactNode
+}
+
+const BAR = 'flex touch-none select-none rounded-full opacity-0 transition-opacity delay-300 data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[scrolling]:opacity-100 data-[scrolling]:delay-0'
+const THUMB = 'rounded-full bg-border-strong'
+
+export function ScrollArea({ orientation = 'vertical', className, viewportClassName, contentClassName, children }: ScrollAreaProps) {
+  const vertical = orientation !== 'horizontal'
+  const horizontal = orientation !== 'vertical'
+  return (
+    <BaseScrollArea.Root className={cn('relative min-h-0 min-w-0', className)}>
+      {/* `overscroll-contain`: a list that reaches its end does not hand the
+          wheel to the page behind it, which is the rule every popup here has
+          kept since Peek. */}
+      <BaseScrollArea.Viewport className={cn('h-full w-full overscroll-contain outline-none', viewportClassName)}>
+        {/* Base UI gives the content box `min-width: fit-content`, which is
+            right when the region scrolls sideways and wrong when it does not:
+            a row's `truncate` needs a box no wider than the viewport. */}
+        <BaseScrollArea.Content className={contentClassName} style={horizontal ? undefined : { minWidth: 0 }}>
+          {children}
+        </BaseScrollArea.Content>
+      </BaseScrollArea.Viewport>
+      {vertical && (
+        <BaseScrollArea.Scrollbar orientation="vertical" className={cn(BAR, 'w-1.5 justify-center py-0.5 pr-0.5')}>
+          <BaseScrollArea.Thumb className={cn(THUMB, 'w-full')} />
+        </BaseScrollArea.Scrollbar>
+      )}
+      {horizontal && (
+        <BaseScrollArea.Scrollbar orientation="horizontal" className={cn(BAR, 'h-1.5 flex-col justify-center px-0.5 pb-0.5')}>
+          <BaseScrollArea.Thumb className={cn(THUMB, 'h-full')} />
+        </BaseScrollArea.Scrollbar>
+      )}
+      {vertical && horizontal && <BaseScrollArea.Corner />}
+    </BaseScrollArea.Root>
+  )
+}

package/src/Select.tsx

@@ -2,6 +2,7 @@ import { IconCheck, IconChevronDown } from '@tabler/icons-react'
 import { Select as BaseSelect } from '@base-ui/react/select'
 import type { ReactNode } from 'react'
 import { cn } from './cn'
+import { ScrollArea } from './ScrollArea'
 
 /**
  * Peek's Select (2026-08-28), verbatim, plus what Ship added: an option may
@@ -125,8 +126,13 @@ export function Select({ value, onChange, options, size = 'default', ariaLabel,
                clamped it — the two numbers `fitMenu` used to compute here. The
                288px is the old `max-h-72`, now a ceiling on that room rather
                than a height applied blind. */
-            className="max-h-[min(288px,var(--available-height))] min-w-[var(--anchor-width)] overflow-y-auto rounded-lg border border-border-default bg-bg-elevated p-1 shadow-lg"
+            className="min-w-[var(--anchor-width)] rounded-lg border border-border-default bg-bg-elevated p-1 shadow-lg"
           >
+            {/* The list scrolls in a ScrollArea: the bar takes no width, so a
+                long list is exactly as wide as a short one (Katerina,
+                2026-09-08). The cap sits on the box that scrolls, less the
+                panel's padding, so 288px stays 288px. */}
+            <ScrollArea viewportClassName="max-h-[calc(min(288px,var(--available-height))_-_0.5rem)]" contentClassName="flex flex-col">
             {options.map((option) => (
               <BaseSelect.Item
                 key={option.value}
@@ -146,6 +152,7 @@ export function Select({ value, onChange, options, size = 'default', ariaLabel,
                 />
               </BaseSelect.Item>
             ))}
+            </ScrollArea>
           </BaseSelect.Popup>
         </BaseSelect.Positioner>
       </BaseSelect.Portal>

package/src/Sidebar.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react'
 import { cn } from './cn'
+import { ScrollArea } from './ScrollArea'
 
 /**
  * The navigation column: 240px, a hairline on its right, the surface
@@ -21,12 +22,14 @@ export function Sidebar({ 'aria-label': ariaLabel = 'Workspace', children, class
   return (
     <nav
       aria-label={ariaLabel}
-      className={cn(
-        'flex w-60 shrink-0 flex-col gap-px overflow-y-auto border-r border-border-default bg-bg-surface px-2.5 py-3',
-        className,
-      )}
+      className={cn('flex w-60 shrink-0 flex-col border-r border-border-default bg-bg-surface', className)}
     >
-      {children}
+      {/* The rows scroll in a ScrollArea: the bar takes no width, so the
+          column's padding reads the same with a long list as with a short
+          one (Katerina, 2026-09-08). The padding and the gap are the box's. */}
+      <ScrollArea className="min-h-0 flex-1" contentClassName="flex flex-col gap-px px-2.5 py-3">
+        {children}
+      </ScrollArea>
     </nav>
   )
 }

package/src/Toolbar.test.tsx

@@ -8,6 +8,8 @@ import { cleanup, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { IconButton } from './IconButton'
 import { Toolbar, ToolbarButton, ToolbarInput, ToolbarSeparator } from './Toolbar'
+import { Menu, MenuItem } from './Menu'
+import { Popover } from './Popover'
 
 afterEach(cleanup)
 
@@ -196,3 +198,56 @@ describe('a loose row, for comparison', () => {
     expect(walk).toEqual(['One', 'Two', 'Three', 'After'])
   })
 })
+
+describe('a ToolbarButton with a reason, as a trigger', () => {
+  /*
+    Found by Ship's adoption (2026-09-08, Finding 39): the message's tools put
+    "React" (a Popover trigger) and "…" (a Menu trigger) on one strip, and with
+    a `disabledReason` both came out `aria-disabled="false"`. The part that
+    renders the trigger writes its own disabled state over the button's.
+  */
+  it('stays disabled, reachable, and closed as a Popover trigger', async () => {
+    const user = userEvent.setup()
+    render(
+      <Toolbar aria-label="Tools">
+        <Popover
+          ariaLabel="Reactions"
+          trigger={
+            <ToolbarButton aria-label="React" disabledReason="Sign in to react.">
+              {dot}
+            </ToolbarButton>
+          }
+        >
+          <p>the picker</p>
+        </Popover>
+      </Toolbar>,
+    )
+    const button = screen.getByRole('button', { name: 'React' })
+    expect(button.getAttribute('aria-disabled')).toBe('true')
+    expect(button.getAttribute('tabindex')).toBe('0')
+    await user.click(button)
+    expect(screen.queryByRole('dialog')).toBeNull()
+  })
+
+  it('stays disabled, reachable, and closed as a Menu trigger', async () => {
+    const user = userEvent.setup()
+    render(
+      <Toolbar aria-label="Tools">
+        <Menu
+          trigger={
+            <ToolbarButton aria-label="More" disabledReason="Sign in first.">
+              {dot}
+            </ToolbarButton>
+          }
+        >
+          <MenuItem label="Delete" onClick={() => {}} />
+        </Menu>
+      </Toolbar>,
+    )
+    const button = screen.getByRole('button', { name: 'More' })
+    expect(button.getAttribute('aria-disabled')).toBe('true')
+    expect(button.getAttribute('tabindex')).toBe('0')
+    await user.click(button)
+    expect(screen.queryByRole('menu')).toBeNull()
+  })
+})

package/src/index.ts

@@ -35,6 +35,7 @@ export { Breadcrumb, type BreadcrumbProps, type Crumb } from './Breadcrumb'
 export { EnterHint, Menu, MenuItem, MenuPanel, MenuRow, MenuSection, MenuSub, type MenuItemProps, type MenuPanelProps, type MenuProps, type MenuSubProps } from './Menu'
 export { NavItem, type NavItemProps } from './NavItem'
 export { Popover, type PopoverProps } from './Popover'
+export { ScrollArea, type ScrollAreaProps } from './ScrollArea'
 export { ReactionPicker, type ReactionOption, type ReactionPickerProps } from './ReactionPicker'
 export { Toolbar, ToolbarButton, ToolbarInput, ToolbarSeparator, type ToolbarProps, type ToolbarButtonProps, type ToolbarInputProps } from './Toolbar'
 export { PreviewCard, type PreviewCardProps } from './PreviewCard'

package/src/triggerDisabled.ts

@@ -0,0 +1,13 @@
+import type { ReactElement } from 'react'
+
+/**
+ * Whether the element a `Menu` or `Popover` was handed as its trigger is
+ * disabled — by `disabled`, or by a `disabledReason` (which disables the
+ * button and keeps it reachable). Base UI's trigger parts keep a disabled
+ * state of their own and write it over the rendered button's, so they have to
+ * be told (Finding 39, 2026-09-08).
+ */
+export function triggerDisabled(trigger: ReactElement): boolean {
+  const props = trigger.props as { disabled?: boolean; disabledReason?: string }
+  return !!(props.disabled || props.disabledReason)
+}