@remix-run/ui 0.1.2 → 0.3.0

package/src/components/listbox/listbox.ts

@@ -4,7 +4,9 @@ import {
   css,
   on,
   type CSSMixinDescriptor,
+  type ElementProps,
   type Handle,
+  type MixinFactory,
   type RemixNode,
 } from '@remix-run/ui'
 import { theme } from '../../theme/theme.ts'
@@ -149,7 +151,7 @@ export const optionStyle = itemCss
 export const glyphStyle = itemGlyphCss
 export const labelStyle = itemLabelCss
 
-function ListboxProvider(handle: Handle<ListboxProviderProps, ListboxContext>) {
+function ListboxProvider(handle: Handle<ListboxProviderProps, ListboxContext>): () => RemixNode {
   let options: RegisteredOption[] = []
   let state: State = 'idle'
 
@@ -336,49 +338,51 @@ function ListboxProvider(handle: Handle<ListboxProviderProps, ListboxContext>) {
   }
 }
 
-const listMixin = createMixin<HTMLElement>((handle) => (props) => {
-  let context = handle.context.get(ListboxProvider)
-  return [
-    attrs({
-      tabIndex: props.tabIndex ?? -1,
-      role: props.role ?? 'listbox',
-    }),
-    on('focus', () => {
-      context.scrollActiveOptionIntoView()
-    }),
-    on('keydown', (event) => {
-      switch (event.key) {
-        case 'ArrowDown':
-          event.preventDefault()
-          context.navigate('next')
-          break
-        case 'ArrowUp':
-          event.preventDefault()
-          context.navigate('previous')
-          break
-        case 'Tab':
-          event.preventDefault()
-          context.navigate('first')
-          break
-        case 'Enter':
-        case ' ':
-          event.preventDefault()
-          void context.select(context.activeValue)
-          break
-        case 'Home':
-          event.preventDefault()
-          context.navigate('first')
-          break
-        case 'End':
-          event.preventDefault()
-          context.navigate('last')
-      }
-    }),
-    hiddenTypeahead((text) => {
-      context.highlightSearchMatch(text)
-    }),
-  ]
-})
+const listMixin: MixinFactory<HTMLElement, [], ElementProps> = createMixin<HTMLElement>(
+  (handle) => (props) => {
+    let context = handle.context.get(ListboxProvider)
+    return [
+      attrs({
+        tabIndex: props.tabIndex ?? -1,
+        role: props.role ?? 'listbox',
+      }),
+      on('focus', () => {
+        context.scrollActiveOptionIntoView()
+      }),
+      on('keydown', (event) => {
+        switch (event.key) {
+          case 'ArrowDown':
+            event.preventDefault()
+            context.navigate('next')
+            break
+          case 'ArrowUp':
+            event.preventDefault()
+            context.navigate('previous')
+            break
+          case 'Tab':
+            event.preventDefault()
+            context.navigate('first')
+            break
+          case 'Enter':
+          case ' ':
+            event.preventDefault()
+            void context.select(context.activeValue)
+            break
+          case 'Home':
+            event.preventDefault()
+            context.navigate('first')
+            break
+          case 'End':
+            event.preventDefault()
+            context.navigate('last')
+        }
+      }),
+      hiddenTypeahead((text) => {
+        context.highlightSearchMatch(text)
+      }),
+    ]
+  },
+)
 
 export interface ListboxOption {
   id: string
@@ -388,50 +392,51 @@ export interface ListboxOption {
   textValue?: SearchValue
 }
 
-const optionMixin = createMixin<HTMLElement, [option: Omit<ListboxOption, 'id'>]>((handle) => {
-  let optionRef: HTMLElement | undefined
-
-  handle.queueTask((node) => {
-    optionRef = node
-  })
+const optionMixin: MixinFactory<HTMLElement, [option: Omit<ListboxOption, 'id'>], ElementProps> =
+  createMixin<HTMLElement, [option: Omit<ListboxOption, 'id'>]>((handle) => {
+    let optionRef: HTMLElement | undefined
 
-  return (option) => {
-    let context = handle.context.get(ListboxProvider)
-    context.registerOption({
-      ...option,
-      id: handle.id,
-      get hidden() {
-        return optionRef?.hidden === true
-      },
-      get node() {
-        return optionRef as HTMLElement
-      },
+    handle.queueTask((node) => {
+      optionRef = node
     })
 
-    return [
-      attrs({
-        role: 'option',
+    return (option) => {
+      let context = handle.context.get(ListboxProvider)
+      context.registerOption({
+        ...option,
         id: handle.id,
-        'aria-selected': context.value === option.value ? 'true' : 'false',
-        'aria-disabled': option.disabled ? 'true' : 'false',
-        'data-highlighted': context.activeValue === option.value ? 'true' : 'false',
-      }),
-      !option.disabled && [
-        on('click', () => {
-          context.select(option.value)
+        get hidden() {
+          return optionRef?.hidden === true
+        },
+        get node() {
+          return optionRef as HTMLElement
+        },
+      })
+
+      return [
+        attrs({
+          role: 'option',
+          id: handle.id,
+          'aria-selected': context.value === option.value ? 'true' : 'false',
+          'aria-disabled': option.disabled ? 'true' : 'false',
+          'data-highlighted': context.activeValue === option.value ? 'true' : 'false',
         }),
-        on('mousemove', () => {
-          if (context.activeValue === option.value) return
-          context.highlight(option.value)
-        }),
-        on('mouseleave', () => {
-          if (context.activeValue !== option.value) return
-          context.highlight(null)
-        }),
-      ],
-    ]
-  }
-})
+        !option.disabled && [
+          on('click', () => {
+            context.select(option.value)
+          }),
+          on('mousemove', () => {
+            if (context.activeValue === option.value) return
+            context.highlight(option.value)
+          }),
+          on('mouseleave', () => {
+            if (context.activeValue !== option.value) return
+            context.highlight(null)
+          }),
+        ],
+      ]
+    }
+  })
 
 export const Context = ListboxProvider
 export const list = listMixin

package/src/components/listbox/{demos/overview.demo.tsx → overview.demo.tsx}

@@ -7,6 +7,7 @@ import { theme } from '@remix-run/ui/theme'
 /**
  * @name Listbox Overview
  * @description A keyboard-navigable listbox with selection, highlighting, and an optional flash-selection animation.
+ * @layout center
  */
 export default function Example(handle: Handle) {
   let value: ListboxValue = options[0]!.value

package/src/components/menu/README.md

@@ -68,6 +68,29 @@ Use `menuLabel` when the menu surface needs a different accessible label from th
 </Menu>
 ```
 
+Use `menu.contextTrigger()` with `menu.Context` and `MenuList` when a menu should open at the right-click location of an element.
+
+```tsx
+import * as menu from 'remix/ui/menu'
+import { MenuItem, MenuList } from 'remix/ui/menu'
+
+export function FileContextMenu(handle: Handle) {
+  return () => (
+    <menu.Context label="File actions">
+      <div mix={menu.contextTrigger()} tabIndex={0}>
+        File.txt
+      </div>
+      <MenuList>
+        <MenuItem name="rename">Rename</MenuItem>
+        <MenuItem name="delete">Delete</MenuItem>
+      </MenuList>
+    </menu.Context>
+  )
+}
+```
+
+Attach `onMenuSelect(...)` to `MenuList` or a shared ancestor when using lower-level context menu composition.
+
 ## `menu.*`
 
 - `Menu`: composed trigger, popover, and list component for the common menu case.
@@ -77,13 +100,14 @@ Use `menuLabel` when the menu surface needs a different accessible label from th
 - `onMenuSelect(...)`: event mixin for the bubbling `MenuSelectEvent`.
 - `MenuSelectEvent`: bubbling event class whose `item` describes the selected item.
 - `MenuSelectItem`: selected item shape with `checked`, `id`, `label`, `name`, `type`, and `value`.
-- `menu.Context`, `menu.trigger()`, `menu.popover()`, `menu.list()`, `menu.item(...)`, and `menu.submenuTrigger(...)`: lower-level composition primitives.
+- `menu.Context`, `menu.trigger()`, `menu.contextTrigger()`, `menu.popover()`, `menu.list()`, `menu.item(...)`, and `menu.submenuTrigger(...)`: lower-level composition primitives.
 - `buttonStyle`, `popoverStyle`, `listStyle`, `itemStyle`, `itemSlotStyle`, `itemLabelStyle`, `itemGlyphStyle`, and `triggerGlyphStyle`: flat style mixins used by the wrappers.
-- `MenuProps`, `MenuItemProps`, `MenuListProps`, `MenuProviderProps`, `MenuTriggerOptions`, `MenuItemOptions`, and `SubmenuProps`: public TypeScript props and option types.
+- `MenuProps`, `MenuItemProps`, `MenuListProps`, `MenuProviderProps`, `MenuTriggerOptions`, `MenuContextTriggerOptions`, `MenuItemOptions`, and `SubmenuProps`: public TypeScript props and option types.
 
 ## Behavior Notes
 
 - Click opens the root menu and focuses the list; clicking the trigger again closes it and restores focus.
+- `menu.contextTrigger()` opens the root menu from a `contextmenu` event at the pointer coordinates and supports keyboard opening with the Context Menu key or Shift+F10.
 - `ArrowDown` opens from the trigger at the first enabled item. `ArrowUp` opens at the last enabled item. Enter and Space open the menu with focus on the list.
 - Keyboard navigation skips disabled items and does not wrap past the first or last enabled item.
 - `Home` and `End` move to the first and last enabled item. Enter and Space activate the highlighted item.

package/src/components/menu/demos/bubbling.demo.tsx

@@ -4,6 +4,7 @@ import { Menu, MenuItem, onMenuSelect } from '@remix-run/ui/menu'
 /**
  * @name Menu Event Bubbling
  * @description Item-level handlers fire before the root handler, letting individual items intercept events while others bubble up.
+ * @layout center
  */
 export default function Example() {
   return () => (

package/src/components/menu/demos/context-trigger.demo.tsx

@@ -0,0 +1,133 @@
+import { css, type Handle } from '@remix-run/ui'
+import * as menu from '@remix-run/ui/menu'
+import { MenuItem, MenuList, onMenuSelect, Submenu } from '@remix-run/ui/menu'
+import { separatorStyle } from '@remix-run/ui/separator'
+import { theme } from '@remix-run/ui/theme'
+
+type FileAction = 'copyPath' | 'duplicate' | 'move' | 'rename' | 'reveal' | 'trash'
+
+const actionLabelByName: Record<FileAction, string> = {
+  copyPath: 'Copied path',
+  duplicate: 'Duplicated file',
+  move: 'Moved file',
+  rename: 'Renamed file',
+  reveal: 'Revealed in Finder',
+  trash: 'Moved to trash',
+}
+
+/**
+ * @name Context Menu Trigger
+ * @description A lower-level menu composition that opens from right-click coordinates while keeping standard menu selection and submenu behavior.
+ * @layout center
+ */
+export default function Example(handle: Handle) {
+  let latestAction = 'Right-click the card.'
+
+  return () => (
+    <menu.Context label="File actions">
+      <div mix={layoutCss}>
+        <div tabIndex={0} mix={[fileCardCss, menu.contextTrigger()]}>
+          <span mix={fileIconCss}>TS</span>
+          <span mix={fileTextCss}>
+            <strong mix={fileNameCss}>context-menu.tsx</strong>
+            <span mix={fileMetaCss}>Right-click or press Shift+F10</span>
+          </span>
+        </div>
+
+        <p aria-live="polite" mix={statusCss}>
+          {latestAction}
+        </p>
+      </div>
+
+      <MenuList
+        mix={onMenuSelect((event) => {
+          latestAction =
+            actionLabelByName[event.item.name as FileAction] ?? `Selected ${event.item.label}`
+          void handle.update()
+        })}
+      >
+        <MenuItem name="rename">Rename</MenuItem>
+        <MenuItem name="duplicate">Duplicate</MenuItem>
+        <MenuItem name="copyPath">Copy path</MenuItem>
+        <hr mix={separatorStyle} />
+        <Submenu label="Move to">
+          <MenuItem name="move" value="drafts">
+            Drafts
+          </MenuItem>
+          <MenuItem name="move" value="archive">
+            Archive
+          </MenuItem>
+        </Submenu>
+        <MenuItem name="reveal">Reveal in Finder</MenuItem>
+        <hr mix={separatorStyle} />
+        <MenuItem name="trash">Move to trash</MenuItem>
+      </MenuList>
+    </menu.Context>
+  )
+}
+
+const layoutCss = css({
+  display: 'grid',
+  justifyItems: 'start',
+  gap: theme.space.md,
+})
+
+const fileCardCss = css({
+  display: 'grid',
+  gridTemplateColumns: 'auto minmax(0, 1fr)',
+  alignItems: 'center',
+  gap: theme.space.md,
+  width: 'min(100%, 21rem)',
+  padding: theme.space.md,
+  border: `1px solid ${theme.colors.border.subtle}`,
+  borderRadius: theme.radius.lg,
+  backgroundColor: theme.surface.lvl1,
+  color: theme.colors.text.primary,
+  boxShadow: theme.shadow.xs,
+  cursor: 'context-menu',
+  userSelect: 'none',
+  '&:focus-visible': {
+    outline: `2px solid ${theme.colors.focus.ring}`,
+    outlineOffset: '2px',
+  },
+})
+
+const fileIconCss = css({
+  display: 'inline-grid',
+  placeItems: 'center',
+  width: theme.control.height.lg,
+  height: theme.control.height.lg,
+  borderRadius: theme.radius.md,
+  backgroundColor: theme.colors.action.primary.background,
+  color: theme.colors.action.primary.foreground,
+  fontSize: theme.fontSize.xs,
+  fontWeight: theme.fontWeight.bold,
+})
+
+const fileTextCss = css({
+  display: 'grid',
+  gap: theme.space.px,
+  minWidth: 0,
+})
+
+const fileNameCss = css({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  fontSize: theme.fontSize.sm,
+  lineHeight: theme.lineHeight.normal,
+})
+
+const fileMetaCss = css({
+  color: theme.colors.text.secondary,
+  fontSize: theme.fontSize.xs,
+  lineHeight: theme.lineHeight.normal,
+})
+
+const statusCss = css({
+  margin: 0,
+  minHeight: theme.lineHeight.normal,
+  color: theme.colors.text.secondary,
+  fontSize: theme.fontSize.sm,
+  lineHeight: theme.lineHeight.normal,
+})

package/src/components/menu/demos/overview.demo.tsx

@@ -5,6 +5,7 @@ import { separatorStyle } from '@remix-run/ui/separator'
 /**
  * @name Menu Overview
  * @description A hierarchical menu with checkboxes, radio groups, submenus, and separators.
+ * @layout center
  */
 export default function Example(handle: Handle) {
   type Density = 'comfortable' | 'compact'

package/src/components/menu/menu.tsx

@@ -9,10 +9,11 @@ import {
   type Dispatched,
   type ElementProps,
   type Handle,
+  type MixinFactory,
   type Props,
   type RemixNode,
 } from '@remix-run/ui'
-import { type AnchorOptions } from '../anchor/anchor.ts'
+import { type AnchorOptions, type AnchorPoint } from '../anchor/anchor.ts'
 import * as button from '../button/button.tsx'
 import { Glyph } from '../glyph/glyph.tsx'
 import * as popover from '../popover/popover.ts'
@@ -249,6 +250,8 @@ export interface MenuProviderProps {
 
 export interface MenuTriggerOptions extends AnchorOptions {}
 
+export interface MenuContextTriggerOptions extends AnchorOptions {}
+
 export interface MenuItemOptions {
   checked?: boolean
   disabled?: boolean
@@ -416,7 +419,7 @@ function focusNode(node: HTMLElement | undefined) {
   }
 }
 
-function MenuProvider(handle: Handle<MenuProviderProps, MenuContextValue>) {
+function MenuProvider(handle: Handle<MenuProviderProps, MenuContextValue>): () => RemixNode {
   let parent = handle.context.get(MenuProvider)
 
   let activeId: string | null = null
@@ -957,8 +960,8 @@ function MenuProvider(handle: Handle<MenuProviderProps, MenuContextValue>) {
   }
 }
 
-const triggerMixin = createMixin<HTMLElement, [options?: MenuTriggerOptions], ElementProps>(
-  (handle) => {
+const triggerMixin: MixinFactory<HTMLElement, [options?: MenuTriggerOptions], ElementProps> =
+  createMixin<HTMLElement, [options?: MenuTriggerOptions], ElementProps>((handle) => {
     let context = handle.context.get(MenuProvider)
 
     return (options = {}) => [
@@ -1005,10 +1008,81 @@ const triggerMixin = createMixin<HTMLElement, [options?: MenuTriggerOptions], El
         }
       }),
     ]
-  },
-)
+  })
+
+const contextTriggerMixin: MixinFactory<
+  HTMLElement,
+  [options?: MenuContextTriggerOptions],
+  ElementProps
+> = createMixin<HTMLElement, [options?: MenuContextTriggerOptions], ElementProps>((handle) => {
+  let context = handle.context.get(MenuProvider)
+  let popoverContext = handle.context.get(popover.Context)
+  let anchorPoint: AnchorPoint = { x: 0, y: 0, width: 0, height: 0 }
+
+  function setAnchorPoint(
+    { x, y, width = 0, height = 0 }: AnchorPoint,
+    options: MenuContextTriggerOptions,
+  ) {
+    anchorPoint.x = x
+    anchorPoint.y = y
+    anchorPoint.width = width
+    anchorPoint.height = height
+    popoverContext.anchor = {
+      target: anchorPoint,
+      options: {
+        placement: 'bottom-start',
+        ...options,
+      },
+    }
+  }
+
+  return (options = {}) => [
+    attrs({
+      id: handle.id,
+      'aria-controls': context.listId,
+      'aria-expanded': context.isOpen ? 'true' : 'false',
+      'aria-haspopup': 'menu',
+    }),
+    ref((node: HTMLElement, signal) => {
+      context.registerTrigger(node, handle.id)
+      signal.addEventListener('abort', () => {
+        context.unregisterTrigger(node)
+      })
+    }),
+    on('contextmenu', (event) => {
+      event.preventDefault()
+      event.stopPropagation()
+      setAnchorPoint({ x: event.clientX, y: event.clientY }, options)
+      void context.open({ strategy: 'list' })
+    }),
+    on('keydown', (event) => {
+      if (event.key !== 'ContextMenu' && !(event.shiftKey && event.key === 'F10')) {
+        return
+      }
+
+      event.preventDefault()
+      event.stopPropagation()
+
+      let rect = event.currentTarget.getBoundingClientRect()
+      setAnchorPoint(
+        {
+          x: rect.left,
+          y: rect.top,
+          width: rect.width,
+          height: rect.height,
+        },
+        options,
+      )
+      void context.open({ strategy: 'list' })
+    }),
+  ]
+})
 
-const popoverMixin = createMixin<HTMLElement, [], ElementProps>((handle) => {
+const popoverMixin: MixinFactory<HTMLElement, [], ElementProps> = createMixin<
+  HTMLElement,
+  [],
+  ElementProps
+>((handle) => {
   let context = handle.context.get(MenuProvider)
 
   return () => [
@@ -1045,7 +1119,11 @@ const popoverMixin = createMixin<HTMLElement, [], ElementProps>((handle) => {
   ]
 })
 
-const listMixin = createMixin<HTMLElement, [], ElementProps>((handle) => {
+const listMixin: MixinFactory<HTMLElement, [], ElementProps> = createMixin<
+  HTMLElement,
+  [],
+  ElementProps
+>((handle) => {
   let context = handle.context.get(MenuProvider)
 
   return () => [
@@ -1146,7 +1224,11 @@ const listMixin = createMixin<HTMLElement, [], ElementProps>((handle) => {
   ]
 })
 
-const itemMixin = createMixin<HTMLElement, [options: MenuItemOptions], ElementProps>((handle) => {
+const itemMixin: MixinFactory<HTMLElement, [options: MenuItemOptions], ElementProps> = createMixin<
+  HTMLElement,
+  [options: MenuItemOptions],
+  ElementProps
+>((handle) => {
   let itemRef: HTMLElement | undefined
 
   handle.queueTask((node) => {
@@ -1226,11 +1308,11 @@ const itemMixin = createMixin<HTMLElement, [options: MenuItemOptions], ElementPr
   }
 })
 
-const submenuTriggerMixin = createMixin<
+const submenuTriggerMixin: MixinFactory<
   HTMLElement,
   [options: SubmenuTriggerOptions],
   ElementProps
->((handle) => {
+> = createMixin<HTMLElement, [options: SubmenuTriggerOptions], ElementProps>((handle) => {
   let itemRef: HTMLElement | undefined
   let openTimeoutId = 0
   let aborted = false
@@ -1382,6 +1464,7 @@ type MenuListChildProps = Omit<
 >
 
 export const Context = MenuProvider
+export const contextTrigger = contextTriggerMixin
 export const item = itemMixin
 export const list = listMixin
 export { popoverMixin as popover }
@@ -1390,6 +1473,7 @@ export const trigger = triggerMixin
 
 const menu = {
   Context,
+  contextTrigger,
   item,
   list,
   popover: popoverMixin,
@@ -1400,7 +1484,7 @@ const menu = {
 export function onMenuSelect<target extends HTMLElement>(
   handler: MenuSelectHandler<target>,
   captureBoolean?: boolean,
-) {
+): ReturnType<typeof on<target, typeof MENU_SELECT_EVENT>> {
   return on(MENU_SELECT_EVENT, handler, captureBoolean)
 }
 
@@ -1425,7 +1509,7 @@ export interface SubmenuProps
   menuLabel?: string
 }
 
-export function Menu(handle: Handle<MenuProps>) {
+export function Menu(handle: Handle<MenuProps>): () => RemixNode {
   let buttonRef: HTMLButtonElement | undefined
 
   return () => {
@@ -1472,7 +1556,7 @@ export function Menu(handle: Handle<MenuProps>) {
   }
 }
 
-export function MenuList(handle: Handle<MenuListProps>) {
+export function MenuList(handle: Handle<MenuListProps>): () => RemixNode {
   return () => {
     let { children, mix, ...divProps } = handle.props
 
@@ -1486,7 +1570,7 @@ export function MenuList(handle: Handle<MenuListProps>) {
   }
 }
 
-export function MenuItem(handle: Handle<MenuItemProps>) {
+export function MenuItem(handle: Handle<MenuItemProps>): () => RemixNode {
   return () => {
     let { checked, children, disabled, label, mix, name, searchValue, type, value, ...divProps } =
       handle.props
@@ -1509,7 +1593,7 @@ export function MenuItem(handle: Handle<MenuItemProps>) {
   }
 }
 
-export function Submenu(handle: Handle<SubmenuProps>) {
+export function Submenu(handle: Handle<SubmenuProps>): () => RemixNode {
   return () => {
     let { children, disabled, label, listProps, menuLabel, mix, searchValue, value, ...divProps } =
       handle.props

package/src/components/popover/{demos/overview.demo.tsx → overview.demo.tsx}

@@ -8,6 +8,7 @@ import { theme } from '@remix-run/ui/theme'
 /**
  * @name Popover Overview
  * @description A popover panel anchored to a trigger button, containing form controls and a close action.
+ * @layout center
  */
 export default function Example(handle: Handle) {
   let open = false