@remix-run/ui 0.2.0 → 0.4.0

package/src/{components/menu/menu.tsx → menu/primitives.tsx}

@@ -1,30 +1,23 @@
 import {
   attrs,
-  createElement,
   createMixin,
-  css,
   on,
   ref,
-  type CSSMixinDescriptor,
   type Dispatched,
   type ElementProps,
   type Handle,
   type MixinFactory,
-  type Props,
   type RemixNode,
 } from '@remix-run/ui'
-import { type AnchorOptions } from '../anchor/anchor.ts'
-import * as button from '../button/button.tsx'
-import { Glyph } from '../glyph/glyph.tsx'
-import * as popover from '../popover/popover.ts'
-import { theme } from '../../theme/theme.ts'
+import { type AnchorOptions, type AnchorPoint } from '../anchor/index.ts'
+import * as popover from '../popover/index.ts'
 import {
   hiddenTypeahead,
   matchNextItemBySearchText,
   type SearchValue,
-} from '../../interactions/typeahead/typeahead-mixin.ts'
-import { waitForCssTransition } from '../../utils/wait-for-css-transition.ts'
-import { wait } from '../../utils/wait.ts'
+} from '../shared/typeahead.ts'
+import { waitForCssTransition } from '../shared/wait-for-css-transition.ts'
+import { wait } from '../shared/wait.ts'
 import { createHoverAim } from './hover-aim.ts'
 
 const MENU_SELECT_EVENT = 'rmx:menu-select' as const
@@ -37,182 +30,6 @@ type MenuSelectHandler<target extends HTMLElement> = (
   signal: AbortSignal,
 ) => void | Promise<void>
 
-const menuButtonCss: CSSMixinDescriptor = css({
-  display: 'grid',
-  gridTemplateColumns: 'minmax(0, 1fr) auto',
-  alignItems: 'center',
-  borderRadius: theme.radius.md,
-  paddingInlineEnd: theme.space.sm,
-  textAlign: 'left',
-  '&[aria-expanded="true"], &[aria-expanded="true"]:hover, &[aria-expanded="true"]:focus-visible': {
-    backgroundColor: theme.surface.lvl3,
-    color: theme.colors.text.primary,
-  },
-})
-
-const menuPopoverCss: CSSMixinDescriptor = css({
-  '&[data-menu-submenu="true"][data-anchor-placement^="right"]': {
-    marginLeft: `calc(${theme.space.xs} * -1)`,
-  },
-  '&[data-menu-submenu="true"][data-anchor-placement^="left"]': {
-    marginLeft: theme.space.xs,
-  },
-  '&[data-close-animation="none"]:not(:popover-open)': {
-    transition: 'none',
-    transitionBehavior: 'normal',
-  },
-})
-
-const menuListCss: CSSMixinDescriptor = css({
-  display: 'flex',
-  flexDirection: 'column',
-  flex: '1 1 auto',
-  minHeight: 0,
-  paddingBlock: theme.space.xs,
-  paddingInline: theme.space.none,
-  overflow: 'auto',
-  overscrollBehavior: 'contain',
-  outline: 'none',
-  userSelect: 'none',
-  WebkitUserSelect: 'none',
-  '--rmx-ui-item-inset': `calc(${theme.space.sm} + ${theme.space.xs})`,
-  '--rmx-ui-item-indicator-gap': 'var(--rmx-menu-item-slot-gap)',
-  '--rmx-ui-item-indicator-width': 'var(--rmx-menu-item-slot-width)',
-  '--rmx-menu-item-slot-gap': theme.space.none,
-  '--rmx-menu-item-slot-width': theme.space.none,
-  '&:has(> [role="menuitemcheckbox"])': {
-    '--rmx-menu-item-slot-gap': theme.space.xs,
-    '--rmx-menu-item-slot-width': theme.fontSize.md,
-  },
-  '&:has(> [role="menuitemradio"])': {
-    '--rmx-menu-item-slot-gap': theme.space.xs,
-    '--rmx-menu-item-slot-width': theme.fontSize.md,
-  },
-})
-
-const menuItemCss: CSSMixinDescriptor = css({
-  display: 'flex',
-  alignItems: 'center',
-  width: '100%',
-  minWidth: 0,
-  minHeight: theme.control.height.md,
-  boxSizing: 'border-box',
-  position: 'relative',
-  isolation: 'isolate',
-  paddingInline: `calc(${theme.space.sm} + ${theme.space.xs})`,
-  color: theme.colors.text.primary,
-  fontFamily: theme.fontFamily.sans,
-  fontSize: theme.fontSize.sm,
-  fontWeight: theme.fontWeight.normal,
-  lineHeight: theme.lineHeight.normal,
-  textAlign: 'left',
-  userSelect: 'none',
-  WebkitUserSelect: 'none',
-  '--rmx-menu-item-indicator-opacity': '0',
-  '&::before': {
-    content: '""',
-    position: 'absolute',
-    insetBlock: 0,
-    insetInline: theme.space.xs,
-    borderRadius: theme.radius.md,
-    backgroundColor: 'transparent',
-    pointerEvents: 'none',
-    zIndex: -1,
-  },
-  '&:focus': {
-    outline: 'none',
-  },
-  '&[data-highlighted="true"]': {
-    color: theme.colors.action.primary.foreground,
-  },
-  '&[data-highlighted="true"]::before': {
-    backgroundColor: theme.colors.action.primary.background,
-  },
-  '&[aria-haspopup="menu"][aria-expanded="true"]:not(:focus)': {
-    color: theme.colors.text.primary,
-  },
-  '&[aria-haspopup="menu"][aria-expanded="true"]:not(:focus)::before': {
-    backgroundColor: theme.surface.lvl2,
-  },
-  '&[data-submenu-state="selecting"], &[data-submenu-state="dismissing"]': {
-    color: theme.colors.text.primary,
-  },
-  '&[data-submenu-state="selecting"]::before, &[data-submenu-state="dismissing"]::before': {
-    backgroundColor: theme.surface.lvl2,
-  },
-  '&[data-menu-flash="true"]': {
-    color: theme.colors.text.primary,
-  },
-  '&[data-menu-flash="true"]::before': {
-    backgroundColor: 'transparent',
-  },
-  '&[aria-disabled="true"]': {
-    opacity: 0.5,
-  },
-  '&[aria-checked="true"], &[aria-selected="true"]': {
-    '--rmx-menu-item-indicator-opacity': '1',
-  },
-})
-
-const menuItemSlotCss: CSSMixinDescriptor = css({
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flex: '0 0 var(--rmx-menu-item-slot-width)',
-  width: 'var(--rmx-menu-item-slot-width)',
-  minWidth: 0,
-  marginInlineEnd: 'var(--rmx-menu-item-slot-gap)',
-  overflow: 'hidden',
-})
-
-const menuItemLabelCss: CSSMixinDescriptor = css({
-  display: 'inline-flex',
-  alignItems: 'center',
-  flex: '1 1 auto',
-  minWidth: 0,
-})
-
-const menuItemGlyphCss: CSSMixinDescriptor = css({
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  width: theme.fontSize.md,
-  height: theme.fontSize.md,
-  color: 'currentColor',
-  flexShrink: 0,
-  '& > svg': {
-    display: 'block',
-    width: '100%',
-    height: '100%',
-  },
-  opacity: 'var(--rmx-menu-item-indicator-opacity)',
-})
-
-const menuTriggerGlyphCss: CSSMixinDescriptor = css({
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  width: theme.fontSize.md,
-  height: theme.fontSize.md,
-  color: 'currentColor',
-  flexShrink: 0,
-  marginInlineStart: 'auto',
-  '& > svg': {
-    display: 'block',
-    width: '100%',
-    height: '100%',
-  },
-})
-
-export const buttonStyle = menuButtonCss
-export const popoverStyle = menuPopoverCss
-export const listStyle = menuListCss
-export const itemStyle = menuItemCss
-export const itemSlotStyle = menuItemSlotCss
-export const itemLabelStyle = menuItemLabelCss
-export const itemGlyphStyle = menuItemGlyphCss
-export const triggerGlyphStyle = menuTriggerGlyphCss
-
 declare global {
   interface HTMLElementEventMap {
     [MENU_SELECT_EVENT]: MenuSelectEvent
@@ -250,6 +67,8 @@ export interface MenuProviderProps {
 
 export interface MenuTriggerOptions extends AnchorOptions {}
 
+export interface MenuContextTriggerOptions extends AnchorOptions {}
+
 export interface MenuItemOptions {
   checked?: boolean
   disabled?: boolean
@@ -962,7 +781,90 @@ const triggerMixin: MixinFactory<HTMLElement, [options?: MenuTriggerOptions], El
   createMixin<HTMLElement, [options?: MenuTriggerOptions], ElementProps>((handle) => {
     let context = handle.context.get(MenuProvider)
 
-    return (options = {}) => [
+    return (options = {}, props = options as ElementProps) => {
+      if (props === options) {
+        options = {}
+      }
+
+      return [
+        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)
+          })
+        }),
+        popover.anchor({
+          placement: 'bottom-start',
+          ...options,
+        }),
+        on('click', () => {
+          if (context.isOpen) {
+            void context.closeAll()
+          } else {
+            void context.open({ strategy: 'list' })
+          }
+        }),
+        on('keydown', (event) => {
+          switch (event.key) {
+            case 'ArrowDown':
+              event.preventDefault()
+              event.stopPropagation()
+              void context.open({ strategy: 'first' })
+              break
+            case 'ArrowUp':
+              event.preventDefault()
+              event.stopPropagation()
+              void context.open({ strategy: 'last' })
+              break
+            case 'Enter':
+            case ' ':
+              event.preventDefault()
+              event.stopPropagation()
+              void context.open({ strategy: 'list' })
+          }
+        }),
+      ]
+    }
+  })
+
+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 = {}, props = options as ElementProps) => {
+    if (props === options) {
+      options = {}
+    }
+
+    return [
       attrs({
         id: handle.id,
         'aria-controls': context.listId,
@@ -975,38 +877,35 @@ const triggerMixin: MixinFactory<HTMLElement, [options?: MenuTriggerOptions], El
           context.unregisterTrigger(node)
         })
       }),
-      popover.anchor({
-        placement: 'bottom-start',
-        ...options,
-      }),
-      on('click', () => {
-        if (context.isOpen) {
-          void context.closeAll()
-        } else {
-          void context.open({ strategy: 'list' })
-        }
+      on('contextmenu', (event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        setAnchorPoint({ x: event.clientX, y: event.clientY }, options)
+        void context.open({ strategy: 'list' })
       }),
       on('keydown', (event) => {
-        switch (event.key) {
-          case 'ArrowDown':
-            event.preventDefault()
-            event.stopPropagation()
-            void context.open({ strategy: 'first' })
-            break
-          case 'ArrowUp':
-            event.preventDefault()
-            event.stopPropagation()
-            void context.open({ strategy: 'last' })
-            break
-          case 'Enter':
-          case ' ':
-            event.preventDefault()
-            event.stopPropagation()
-            void context.open({ strategy: 'list' })
+        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,
@@ -1386,14 +1285,8 @@ const submenuTriggerMixin: MixinFactory<
   }
 })
 
-export interface MenuListProps extends Props<'div'> {}
-
-type MenuListChildProps = Omit<
-  JSX.LibraryManagedAttributes<typeof MenuList, MenuListProps>,
-  'children'
->
-
 export const Context = MenuProvider
+export const contextTrigger = contextTriggerMixin
 export const item = itemMixin
 export const list = listMixin
 export { popoverMixin as popover }
@@ -1402,6 +1295,7 @@ export const trigger = triggerMixin
 
 const menu = {
   Context,
+  contextTrigger,
   item,
   list,
   popover: popoverMixin,
@@ -1415,139 +1309,3 @@ export function onMenuSelect<target extends HTMLElement>(
 ): ReturnType<typeof on<target, typeof MENU_SELECT_EVENT>> {
   return on(MENU_SELECT_EVENT, handler, captureBoolean)
 }
-
-export interface MenuProps extends Omit<Props<'button'>, 'children'> {
-  children?: RemixNode
-  label: RemixNode
-  menuLabel?: string
-}
-
-export interface MenuItemProps
-  extends Omit<Props<'div'>, 'children' | 'name' | 'type' | 'value'>,
-    MenuItemOptions {
-  children?: RemixNode
-}
-
-export interface SubmenuProps
-  extends Omit<Props<'div'>, 'children' | 'name' | 'type' | 'value'>,
-    Omit<SubmenuTriggerOptions, 'label'> {
-  children?: RemixNode
-  label: RemixNode
-  listProps?: MenuListChildProps
-  menuLabel?: string
-}
-
-export function Menu(handle: Handle<MenuProps>): () => RemixNode {
-  let buttonRef: HTMLButtonElement | undefined
-
-  return () => {
-    let { children, label, menuLabel, mix, type, ...buttonProps } = handle.props
-
-    return (
-      <menu.Context label={menuLabel}>
-        <button
-          {...buttonProps}
-          type={type ?? 'button'}
-          mix={[
-            button.baseStyle,
-            button.ghostStyle,
-            buttonStyle,
-            menu.trigger(),
-            ref((node: HTMLButtonElement, signal) => {
-              buttonRef = node
-              signal.addEventListener('abort', () => {
-                if (buttonRef === node) {
-                  buttonRef = undefined
-                }
-              })
-            }),
-            mix,
-          ]}
-        >
-          <span mix={button.labelStyle}>{label}</span>
-          <Glyph mix={button.iconStyle} name="chevronDown" />
-        </button>
-        <MenuList
-          mix={onMenuSelect((event) => {
-            if (!buttonRef) {
-              return
-            }
-
-            event.stopPropagation()
-            buttonRef.dispatchEvent(new MenuSelectEvent(event.item))
-          })}
-        >
-          {children}
-        </MenuList>
-      </menu.Context>
-    )
-  }
-}
-
-export function MenuList(handle: Handle<MenuListProps>): () => RemixNode {
-  return () => {
-    let { children, mix, ...divProps } = handle.props
-
-    return (
-      <div mix={[popover.surfaceStyle, popoverStyle, menu.popover()]}>
-        <div {...divProps} mix={[listStyle, menu.list(), mix]}>
-          {children}
-        </div>
-      </div>
-    )
-  }
-}
-
-export function MenuItem(handle: Handle<MenuItemProps>): () => RemixNode {
-  return () => {
-    let { checked, children, disabled, label, mix, name, searchValue, type, value, ...divProps } =
-      handle.props
-
-    return (
-      <div
-        {...divProps}
-        mix={[
-          itemStyle,
-          menu.item({ checked, disabled, label, name, searchValue, type, value }),
-          mix,
-        ]}
-      >
-        <span mix={itemSlotStyle}>
-          <Glyph mix={itemGlyphStyle} name="check" />
-        </span>
-        <span mix={itemLabelStyle}>{children ?? label}</span>
-      </div>
-    )
-  }
-}
-
-export function Submenu(handle: Handle<SubmenuProps>): () => RemixNode {
-  return () => {
-    let { children, disabled, label, listProps, menuLabel, mix, searchValue, value, ...divProps } =
-      handle.props
-
-    return (
-      <menu.Context label={menuLabel}>
-        <div
-          {...divProps}
-          mix={[
-            itemStyle,
-            menu.submenuTrigger({
-              disabled,
-              searchValue,
-              value,
-            }),
-            mix,
-          ]}
-        >
-          <span mix={itemSlotStyle}>
-            <Glyph mix={itemGlyphStyle} name="check" />
-          </span>
-          <span mix={itemLabelStyle}>{label}</span>
-          <Glyph mix={triggerGlyphStyle} name="chevronRight" />
-        </div>
-        <MenuList {...listProps}>{children}</MenuList>
-      </menu.Context>
-    )
-  }
-}

package/src/{components/popover → popover}/README.md

@@ -1,16 +1,15 @@
-# Popover
+# popover
 
 `popover` is a low-level primitive for anchored, dismissible floating panels.
 
-Use it for custom surfaces like filters, inspectors, and view options. Higher-level widgets like `menu`, `select`, and `combobox` should build on top of it instead of exposing raw `popover.*` mixins directly.
+Use it for custom surfaces like filters, inspectors, and view options. Higher-level widgets like menu, select, and combobox should build on top of it instead of exposing raw `popover.*` mixins directly.
 
-## Usage
+## Primitive Usage
 
 ```tsx
-import { css, on, type Handle } from 'remix/ui'
-import { Button } from 'remix/ui/button'
-import { Glyph } from 'remix/ui/glyph'
-import { popover } from 'remix/ui/popover'
+import { on, type Handle } from 'remix/ui'
+import * as popover from 'remix/ui/popover'
+import { panelStyle } from './popover.styles'
 
 export function ViewOptions(handle: Handle) {
   let open = false
@@ -27,21 +26,20 @@ export function ViewOptions(handle: Handle) {
 
   return () => (
     <popover.Context>
-      <Button
-        endIcon={<Glyph name="chevronDown" />}
+      <button
         mix={[
           popover.anchor({ placement: 'bottom-end' }),
           popover.focusOnHide(),
           on('click', openPopover),
         ]}
-        tone="secondary"
+        type="button"
       >
         View options
-      </Button>
+      </button>
 
       <div
         mix={[
-          popover.surfaceStyle,
+          panelStyle,
           popover.surface({
             open,
             onHide() {
@@ -50,23 +48,17 @@ export function ViewOptions(handle: Handle) {
           }),
         ]}
       >
-        <div mix={popover.contentStyle}>
-          <Button mix={[popover.focusOnShow(), on('click', closePopover)]} tone="ghost">
-            Close
-          </Button>
-          <div mix={panelBody}>Panel content</div>
-        </div>
+        <button mix={[popover.focusOnShow(), on('click', closePopover)]} type="button">
+          Close
+        </button>
+        <div>Panel content</div>
       </div>
     </popover.Context>
   )
 }
-
-let panelBody = css({
-  padding: '12px',
-})
 ```
 
-## `popover.*`
+## `remix/ui/popover`
 
 ### `popover.Context`
 
@@ -76,10 +68,6 @@ Provides shared coordination for one popover instance. Render the anchor, any fo
 
 Registers the host element as the anchor for the current popover surface.
 
-- Accepts standard `AnchorOptions`.
-- The stored anchor controls where the surface is positioned when it opens.
-- Apply it to the button or other element the surface should attach to.
-
 ### `popover.surface({ open, onHide, ... })`
 
 Turns the host into the controlled popover surface.
@@ -99,13 +87,12 @@ Registers the element that should receive focus when the popover opens.
 
 Registers the element that should receive focus again when the popover closes.
 
-### `popover.surfaceStyle`
-
-Default floating-surface presentation for popovers.
+### Primitive Types
 
-### `popover.contentStyle`
-
-Default inner scroll container for popover content.
+- `PopoverContext`: context object exposed by `popover.Context`.
+- `PopoverProps`: provider props for one popover instance.
+- `PopoverSurfaceOptions`: options accepted by `popover.surface(...)`.
+- `PopoverHideRequest`: hide request passed to `onHide`.
 
 ## Behavior Notes
 
@@ -114,9 +101,3 @@ Default inner scroll container for popover content.
 - `popover.focusOnShow()` wins on open when present.
 - `popover.focusOnHide()` is used on close by default when focus restoration is enabled.
 - `closeOnAnchorClick: false` keeps anchor clicks inside the current session, which is useful for input-driven popovers like comboboxes.
-
-## When To Use Something Else
-
-- Use `menu` for command surfaces.
-- Use `listbox` or `select` for committed value picking.
-- Use `combobox` for input-first popup selection.