@remix-run/ui 0.2.0 → 0.3.0

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

@@ -13,7 +13,7 @@ import {
   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'
@@ -250,6 +250,8 @@ export interface MenuProviderProps {
 
 export interface MenuTriggerOptions extends AnchorOptions {}
 
+export interface MenuContextTriggerOptions extends AnchorOptions {}
+
 export interface MenuItemOptions {
   checked?: boolean
   disabled?: boolean
@@ -1008,6 +1010,74 @@ const triggerMixin: MixinFactory<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: MixinFactory<HTMLElement, [], ElementProps> = createMixin<
   HTMLElement,
   [],
@@ -1394,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 }
@@ -1402,6 +1473,7 @@ export const trigger = triggerMixin
 
 const menu = {
   Context,
+  contextTrigger,
   item,
   list,
   popover: popoverMixin,

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

package/src/components/popover/popover.ts

@@ -9,7 +9,11 @@ import {
   type MixinFactory,
   type RemixNode,
 } from '@remix-run/ui'
-import { anchor as positionAnchor, type AnchorOptions } from '../anchor/anchor.ts'
+import {
+  anchor as positionAnchor,
+  type AnchorOptions,
+  type AnchorTarget,
+} from '../anchor/anchor.ts'
 import { onOutsideClick } from '../../interactions/outside-click/outside-click-mixin.ts'
 import { theme } from '../../theme/theme.ts'
 import { lockScroll } from '../../utils/scroll-lock.ts'
@@ -26,7 +30,7 @@ export interface PopoverProps {
 }
 
 interface AnchorRef {
-  node: HTMLElement
+  target: AnchorTarget
   options: AnchorOptions
 }
 
@@ -108,11 +112,15 @@ const anchorMixin: MixinFactory<HTMLElement, [options: AnchorOptions], ElementPr
   let context = handle.context.get(PopoverProvider)
   return (options) => {
     handle.queueTask((node) => {
-      context.anchor = { node, options }
+      context.anchor = { target: node, options }
     })
   }
 })
 
+function anchorContains(anchor: AnchorRef | null, target: Node) {
+  return anchor?.target instanceof HTMLElement && anchor.target.contains(target)
+}
+
 const surfaceMixin: MixinFactory<HTMLElement, [options: PopoverSurfaceOptions], ElementProps> =
   createMixin<HTMLElement, [options: PopoverSurfaceOptions]>((handle) => {
     let openProp = false
@@ -147,11 +155,12 @@ const surfaceMixin: MixinFactory<HTMLElement, [options: PopoverSurfaceOptions],
 
         on('beforetoggle', (event) => {
           if (event.newState === 'open') {
-            cleanupAnchor = positionAnchor(
-              event.currentTarget,
-              context.anchor!.node,
-              context.anchor!.options,
-            )
+            let anchor = context.anchor
+            if (!anchor) {
+              throw new Error('popover.surface() requires a registered anchor before opening')
+            }
+
+            cleanupAnchor = positionAnchor(event.currentTarget, anchor.target, anchor.options)
             unlockScroll = lockScroll()
           } else if (event.newState === 'closed') {
             cleanupAnchor()
@@ -180,7 +189,7 @@ const surfaceMixin: MixinFactory<HTMLElement, [options: PopoverSurfaceOptions],
             options.onHide({ reason: 'outside-click', target })
           },
           (target) =>
-            options.closeOnAnchorClick === false && !!context.anchor?.node.contains(target),
+            options.closeOnAnchorClick === false && anchorContains(context.anchor, target),
           options.stopOutsideClickPropagation ?? true,
         ),
       ]

package/src/components/select/{demos/deconstructed.demo.tsx → deconstructed.demo.tsx}

@@ -9,6 +9,7 @@ import { theme } from '@remix-run/ui/theme'
 /**
  * @name Select Deconstructed
  * @description Build a fully custom select by composing the select, popover, and listbox primitives directly.
+ * @layout center
  */
 export default function Example(handle: Handle) {
   let label = 'Local'

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

@@ -5,6 +5,7 @@ import { theme } from '@remix-run/ui/theme'
 /**
  * @name Select Overview
  * @description A styled select control with a searchable dropdown and accessible label.
+ * @layout center
  */
 export default function Example() {
   return () => (

package/src/components/select/select.tsx

@@ -156,7 +156,7 @@ function SelectProvider(handle: Handle<SelectContextProps, SelectContextValue>):
     popoverContextRef.hideFocusTarget = triggerRef ?? null
     popoverContextRef.anchor = triggerRef
       ? {
-          node: triggerRef,
+          target: triggerRef,
           options: getPopoverAnchorOptions(),
         }
       : null

package/src/runtime/client-entries.ts

@@ -47,7 +47,7 @@ export type EntryMetadata = {
  */
 export type EntryComponent<props extends SerializableProps = {}, context = NoContext> = ((
   handle: Handle<props, context>,
-) => RenderFn<props>) &
+) => RenderFn) &
   EntryMetadata
 
 /**
@@ -86,10 +86,6 @@ export function clientEntry<props extends SerializableProps = {}, context = NoCo
   entryId: string,
   component: (handle: Handle<props, context>) => RenderFn,
 ): EntryComponent<props, context>
-export function clientEntry<props extends SerializableProps = {}, context = NoContext>(
-  entryId: string,
-  component: (handle: Handle<Record<string, never>, context>) => RenderFn<props>,
-): EntryComponent<props, context>
 
 // Implementation
 export function clientEntry(entryId: string, component: any): any {

package/src/runtime/component.ts

@@ -179,9 +179,9 @@ export type ComponentFn<Props = Record<string, never>, ContextValue = NoContext>
 ) => RenderFn
 
 /**
- * Render function returned by a component factory.
+ * Zero-argument render function returned by a component factory.
  */
-export type RenderFn<Props = ElementProps> = (props: Props) => RemixNode
+export type RenderFn = () => RemixNode
 
 export type { RemixNode } from './jsx.ts'
 
@@ -287,7 +287,7 @@ class ComponentRuntime<C = NoContext> implements ComponentHandle<C> {
       this.#renderFn = renderFn
     }
 
-    return [renderFn(this.#props), this.#dequeueTasks()]
+    return [renderFn(), this.#dequeueTasks()]
   }
 
   remove = (): Array<() => void> => {

package/src/runtime/demos/basic.demo.tsx

@@ -0,0 +1,21 @@
+import { on, type Handle } from '@remix-run/ui'
+
+/**
+ * @name Basic Counter
+ * @description The smallest interactive Remix UI counter from the standalone demos.
+ */
+export default function App(handle: Handle) {
+  let count = 0
+  return () => (
+    <button
+      mix={[
+        on('click', () => {
+          count++
+          handle.update()
+        }),
+      ]}
+    >
+      Ye ol' counter: {count}
+    </button>
+  )
+}

package/src/runtime/demos/controlled-uncontrolled-values.demo.tsx

@@ -0,0 +1,177 @@
+import { on, type Handle } from '@remix-run/ui'
+
+/**
+ * @name Controlled and Uncontrolled Values
+ * @description Compares controlled props with uncontrolled DOM values across rerenders and remounts.
+ */
+export default function App(handle: Handle) {
+  let controlledText = 'hello'
+  let controlledChecked = true
+  let controlledChoice = 'alpha'
+  let uncontrolledTextSnapshot = 'type to update this'
+  let uncontrolledCheckedSnapshot = true
+  let renderCount = 0
+  let uncontrolledVersion = 0
+
+  let rerender = () => {
+    renderCount++
+    handle.update()
+  }
+
+  let resetControlled = () => {
+    controlledText = 'hello'
+    controlledChecked = true
+    controlledChoice = 'alpha'
+    rerender()
+  }
+
+  let remountUncontrolled = () => {
+    uncontrolledVersion++
+    uncontrolledTextSnapshot = 'type to update this'
+    uncontrolledCheckedSnapshot = true
+    rerender()
+  }
+
+  return () => (
+    <main
+      style={{
+        fontFamily: 'system-ui, sans-serif',
+        maxWidth: '860px',
+        margin: '24px auto',
+        padding: '0 16px',
+        lineHeight: 1.45,
+      }}
+    >
+      <h1>Controlled vs Uncontrolled Values</h1>
+
+      <p>
+        Render count: <strong>{renderCount}</strong>
+      </p>
+
+      <div style={{ display: 'flex', gap: '10px', marginBottom: '18px' }}>
+        <button mix={[on('click', rerender)]}>Force Re-render</button>
+        <button mix={[on('click', resetControlled)]}>Reset Controlled</button>
+        <button mix={[on('click', remountUncontrolled)]}>Remount Uncontrolled</button>
+      </div>
+
+      <section
+        style={{
+          border: '1px solid #d0d7de',
+          borderRadius: '8px',
+          padding: '12px',
+          marginBottom: '12px',
+        }}
+      >
+        <h2>Controlled</h2>
+        <p>
+          These values come from component state. The text input allows everything except digits,
+          and invalid input does not call update.
+        </p>
+
+        <label style={{ display: 'block', marginBottom: '8px' }}>
+          Text:
+          <input
+            style={{ marginLeft: '8px' }}
+            value={controlledText}
+            mix={[
+              on('input', (event) => {
+                let nextValue = event.currentTarget.value
+                if (/\d/.test(nextValue)) {
+                  return
+                }
+                controlledText = nextValue
+                rerender()
+              }),
+            ]}
+          />
+        </label>
+
+        <label style={{ display: 'block', marginBottom: '8px' }}>
+          <input
+            type="checkbox"
+            checked={controlledChecked}
+            mix={[
+              on('change', (event) => {
+                controlledChecked = event.currentTarget.checked
+                rerender()
+              }),
+            ]}
+          />{' '}
+          Checked
+        </label>
+
+        <label style={{ display: 'block', marginBottom: '8px' }}>
+          Choice:
+          <select
+            style={{ marginLeft: '8px' }}
+            value={controlledChoice}
+            mix={[
+              on('change', (event) => {
+                controlledChoice = event.currentTarget.value
+                rerender()
+              }),
+            ]}
+          >
+            <option value="alpha">Alpha</option>
+            <option value="beta">Beta</option>
+            <option value="gamma">Gamma</option>
+          </select>
+        </label>
+
+        <div>
+          State snapshot: text=<code>{JSON.stringify(controlledText)}</code>, checked=
+          <code>{String(controlledChecked)}</code>, choice=
+          <code>{JSON.stringify(controlledChoice)}</code>
+        </div>
+      </section>
+
+      <section
+        key={`uncontrolled-${uncontrolledVersion}`}
+        style={{
+          border: '1px solid #d0d7de',
+          borderRadius: '8px',
+          padding: '12px',
+        }}
+      >
+        <h2>Uncontrolled</h2>
+        <p>
+          These initialize from <code>defaultValue/defaultChecked</code> once and then keep their
+          own DOM state.
+        </p>
+
+        <label style={{ display: 'block', marginBottom: '8px' }}>
+          Text:
+          <input
+            style={{ marginLeft: '8px' }}
+            defaultValue="type to update this"
+            mix={[
+              on('input', (event) => {
+                uncontrolledTextSnapshot = event.currentTarget.value
+                rerender()
+              }),
+            ]}
+          />
+        </label>
+
+        <label style={{ display: 'block', marginBottom: '8px' }}>
+          <input
+            type="checkbox"
+            defaultChecked={true}
+            mix={[
+              on('change', (event) => {
+                uncontrolledCheckedSnapshot = event.currentTarget.checked
+                rerender()
+              }),
+            ]}
+          />{' '}
+          Checked
+        </label>
+
+        <div>
+          Last DOM snapshot: text=<code>{JSON.stringify(uncontrolledTextSnapshot)}</code>, checked=
+          <code>{String(uncontrolledCheckedSnapshot)}</code>
+        </div>
+      </section>
+    </main>
+  )
+}