@remix-run/ui 0.1.1 → 0.2.0

package/src/components/menu/menu.tsx

@@ -1,5 +1,3 @@
-// @jsxRuntime classic
-// @jsx createElement
 import {
   attrs,
   createElement,
@@ -8,8 +6,10 @@ import {
   on,
   ref,
   type CSSMixinDescriptor,
+  type Dispatched,
   type ElementProps,
   type Handle,
+  type MixinFactory,
   type Props,
   type RemixNode,
 } from '@remix-run/ui'
@@ -32,7 +32,10 @@ const MENU_FLASH_DURATION_MS = 60
 const SUBMENU_OPEN_DELAY_MS = 300
 const SUBMENU_ANCHOR_RELATIVE_TO = '[role="menu"] > [role^="menuitem"]'
 
-type MenuSelectHandler = (event: MenuSelectEvent, signal: AbortSignal) => void | Promise<void>
+type MenuSelectHandler<target extends HTMLElement> = (
+  event: Dispatched<MenuSelectEvent, target>,
+  signal: AbortSignal,
+) => void | Promise<void>
 
 const menuButtonCss: CSSMixinDescriptor = css({
   display: 'grid',
@@ -219,19 +222,8 @@ declare global {
 type MenuItemType = 'item' | 'checkbox' | 'radio'
 type CloseAnimation = 'fade' | 'none'
 type OpenStrategy = 'first' | 'last' | 'list' | 'none'
-
-enum NavigationStrategy {
-  Next = 0,
-  Previous = 1,
-  First = 2,
-  Last = 3,
-}
-
-enum State {
-  Idle = 'idle',
-  Dismissing = 'dismissing',
-  Selecting = 'selecting',
-}
+type NavigationStrategy = 'next' | 'previous' | 'first' | 'last'
+type State = 'idle' | 'dismissing' | 'selecting'
 
 export interface MenuSelectItem {
   checked?: boolean
@@ -425,7 +417,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
@@ -435,7 +427,7 @@ function MenuProvider(handle: Handle<MenuProviderProps, MenuContextValue>) {
   let items: RegisteredMenuItem[] = []
   let listRef: HTMLElement | undefined
   let open = false
-  let state = State.Idle
+  let state: State = 'idle'
   let suppressNextPointerLeaveClear = false
   let surfaceRef: HTMLElement | undefined
   let triggerId: string | undefined
@@ -487,7 +479,7 @@ function MenuProvider(handle: Handle<MenuProviderProps, MenuContextValue>) {
     strategy = 'list',
     focus = strategy !== 'none',
   }: OpenMenuOptions = {}) {
-    if (state !== State.Idle) {
+    if (state !== 'idle') {
       return
     }
 
@@ -538,9 +530,9 @@ function MenuProvider(handle: Handle<MenuProviderProps, MenuContextValue>) {
     open = false
     if (animation === 'none') {
       activeId = null
-      state = State.Idle
-    } else if (wasOpen && state === State.Idle) {
-      state = State.Dismissing
+      state = 'idle'
+    } else if (wasOpen && state === 'idle') {
+      state = 'dismissing'
     }
     updates.push(handle.update())
   }
@@ -561,8 +553,8 @@ function MenuProvider(handle: Handle<MenuProviderProps, MenuContextValue>) {
       shouldUpdate = true
     }
 
-    if (state !== State.Idle) {
-      state = State.Idle
+    if (state !== 'idle') {
+      state = 'idle'
       shouldUpdate = true
     }
 
@@ -630,7 +622,7 @@ function MenuProvider(handle: Handle<MenuProviderProps, MenuContextValue>) {
   }
 
   function highlight(id: string | null, { focus = false }: HighlightOptions = {}) {
-    if (state !== State.Idle) {
+    if (state !== 'idle') {
       return
     }
 
@@ -673,7 +665,7 @@ function MenuProvider(handle: Handle<MenuProviderProps, MenuContextValue>) {
   }
 
   function navigate(strategy: NavigationStrategy) {
-    if (state !== State.Idle) {
+    if (state !== 'idle') {
       return
     }
 
@@ -682,22 +674,22 @@ function MenuProvider(handle: Handle<MenuProviderProps, MenuContextValue>) {
     let nextItem: RegisteredMenuItem | undefined
 
     switch (strategy) {
-      case NavigationStrategy.Next:
+      case 'next':
         nextItem =
           activeIndex === -1
             ? interactableItems[0]
             : (interactableItems[activeIndex + 1] ?? interactableItems[activeIndex])
         break
-      case NavigationStrategy.Previous:
+      case 'previous':
         nextItem =
           activeIndex === -1
             ? interactableItems[interactableItems.length - 1]
             : interactableItems[activeIndex - 1]
         break
-      case NavigationStrategy.First:
+      case 'first':
         nextItem = interactableItems[0]
         break
-      case NavigationStrategy.Last:
+      case 'last':
         nextItem = interactableItems[interactableItems.length - 1]
         break
     }
@@ -708,7 +700,7 @@ function MenuProvider(handle: Handle<MenuProviderProps, MenuContextValue>) {
   }
 
   function highlightSearchMatch(text: string) {
-    if (state !== State.Idle) {
+    if (state !== 'idle') {
       return
     }
 
@@ -727,7 +719,7 @@ function MenuProvider(handle: Handle<MenuProviderProps, MenuContextValue>) {
   }
 
   async function activateItem(id: string) {
-    if (state !== State.Idle) {
+    if (state !== 'idle') {
       return
     }
 
@@ -744,7 +736,7 @@ function MenuProvider(handle: Handle<MenuProviderProps, MenuContextValue>) {
     let committedChecked =
       item.type === 'checkbox' ? !item.checked : item.type === 'radio' ? true : undefined
 
-    state = State.Selecting
+    state = 'selecting'
     activeId = item.id
     flashState = item.type === 'item' ? { id: item.id } : { checked: committedChecked, id: item.id }
     let signal = await handle.update()
@@ -776,7 +768,7 @@ function MenuProvider(handle: Handle<MenuProviderProps, MenuContextValue>) {
 
     await closeAll()
 
-    state = State.Idle
+    state = 'idle'
     signal = await handle.update()
     if (signal.aborted) {
       return
@@ -792,7 +784,7 @@ function MenuProvider(handle: Handle<MenuProviderProps, MenuContextValue>) {
   }
 
   async function openActiveSubmenu() {
-    if (state !== State.Idle) {
+    if (state !== 'idle') {
       return
     }
 
@@ -966,8 +958,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 = {}) => [
@@ -1014,10 +1006,13 @@ const triggerMixin = createMixin<HTMLElement, [options?: MenuTriggerOptions], El
         }
       }),
     ]
-  },
-)
+  })
 
-const popoverMixin = createMixin<HTMLElement, [], ElementProps>((handle) => {
+const popoverMixin: MixinFactory<HTMLElement, [], ElementProps> = createMixin<
+  HTMLElement,
+  [],
+  ElementProps
+>((handle) => {
   let context = handle.context.get(MenuProvider)
 
   return () => [
@@ -1054,7 +1049,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 () => [
@@ -1102,22 +1101,22 @@ const listMixin = createMixin<HTMLElement, [], ElementProps>((handle) => {
         case 'ArrowDown':
           event.preventDefault()
           event.stopPropagation()
-          context.navigate(NavigationStrategy.Next)
+          context.navigate('next')
           return
         case 'ArrowUp':
           event.preventDefault()
           event.stopPropagation()
-          context.navigate(NavigationStrategy.Previous)
+          context.navigate('previous')
           return
         case 'Home':
           event.preventDefault()
           event.stopPropagation()
-          context.navigate(NavigationStrategy.First)
+          context.navigate('first')
           return
         case 'End':
           event.preventDefault()
           event.stopPropagation()
-          context.navigate(NavigationStrategy.Last)
+          context.navigate('last')
           return
         case 'Enter':
         case ' ':
@@ -1155,7 +1154,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) => {
@@ -1235,11 +1238,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
@@ -1312,7 +1315,7 @@ const submenuTriggerMixin = createMixin<
         'aria-disabled': options.disabled ? 'true' : undefined,
         'aria-expanded': childMenu.isOpen ? 'true' : 'false',
         'aria-haspopup': 'menu',
-        'data-submenu-state': childMenu.state === State.Idle ? undefined : childMenu.state,
+        'data-submenu-state': childMenu.state === 'idle' ? undefined : childMenu.state,
         'data-highlighted': parent.activeId === handle.id ? 'true' : undefined,
       }),
       ref((node: HTMLElement, signal) => {
@@ -1406,8 +1409,11 @@ const menu = {
   trigger,
 } as const
 
-export function onMenuSelect(handler: MenuSelectHandler, captureBoolean?: boolean) {
-  return on<HTMLElement, typeof MENU_SELECT_EVENT>(MENU_SELECT_EVENT, handler, captureBoolean)
+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)
 }
 
 export interface MenuProps extends Omit<Props<'button'>, 'children'> {
@@ -1431,7 +1437,7 @@ export interface SubmenuProps
   menuLabel?: string
 }
 
-export function Menu(handle: Handle<MenuProps>) {
+export function Menu(handle: Handle<MenuProps>): () => RemixNode {
   let buttonRef: HTMLButtonElement | undefined
 
   return () => {
@@ -1478,7 +1484,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
 
@@ -1492,7 +1498,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
@@ -1515,7 +1521,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/README.md

@@ -8,9 +8,9 @@ Use it for custom surfaces like filters, inspectors, and view options. Higher-le
 
 ```tsx
 import { css, on, type Handle } from 'remix/ui'
-import { Button } from '@remix-run/ui/button'
-import { Glyph } from '@remix-run/ui/glyph'
-import { popover } from '@remix-run/ui/popover'
+import { Button } from 'remix/ui/button'
+import { Glyph } from 'remix/ui/glyph'
+import { popover } from 'remix/ui/popover'
 
 export function ViewOptions(handle: Handle) {
   let open = false

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

@@ -0,0 +1,143 @@
+import { css, on, type Handle } from '@remix-run/ui'
+import { Button } from '@remix-run/ui/button'
+import { Glyph } from '@remix-run/ui/glyph'
+import * as popover from '@remix-run/ui/popover'
+import { Option, Select } from '@remix-run/ui/select'
+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.
+ */
+export default function Example(handle: Handle) {
+  let open = false
+
+  function closePopover() {
+    open = false
+    void handle.update()
+  }
+
+  return () => (
+    <popover.Context>
+      <div mix={buttonRowCss}>
+        <Button
+          endIcon={<Glyph name="chevronDown" />}
+          mix={[
+            popover.anchor({ placement: 'bottom' }),
+            popover.focusOnHide(),
+            on('click', () => {
+              open = !open
+              void handle.update()
+            }),
+          ]}
+          tone="secondary"
+        >
+          View options
+        </Button>
+      </div>
+
+      <div
+        mix={[
+          popover.surfaceStyle,
+          popover.surface({
+            closeOnAnchorClick: false,
+            open,
+            onHide() {
+              closePopover()
+            },
+          }),
+        ]}
+      >
+        <div mix={[popover.contentStyle, panelCss]}>
+          <div mix={fieldCss}>
+            <label for={`${handle.id}-grouping`} mix={labelCss}>
+              Grouping
+            </label>
+            <Select
+              id={`${handle.id}-grouping`}
+              defaultLabel="No grouping"
+              defaultValue="none"
+              mix={[fieldSelectCss, popover.focusOnShow()]}
+            >
+              <Option label="No grouping" value="none" />
+              <Option label="Status" value="status" />
+              <Option label="Priority" value="priority" />
+            </Select>
+          </div>
+
+          <div mix={fieldCss}>
+            <label for={`${handle.id}-ordering`} mix={labelCss}>
+              Ordering
+            </label>
+            <Select
+              id={`${handle.id}-ordering`}
+              defaultLabel="Manual"
+              defaultValue="manual"
+              mix={fieldSelectCss}
+            >
+              <Option label="Manual" value="manual" />
+              <Option label="Newest first" value="newest" />
+              <Option label="Oldest first" value="oldest" />
+            </Select>
+          </div>
+
+          <div mix={fieldCss}>
+            <label for={`${handle.id}-closed-projects`} mix={labelCss}>
+              Show closed projects
+            </label>
+            <Select
+              id={`${handle.id}-closed-projects`}
+              defaultLabel="All"
+              defaultValue="all"
+              mix={fieldSelectCss}
+            >
+              <Option label="All" value="all" />
+              <Option label="Open only" value="open" />
+              <Option label="Closed only" value="closed" />
+            </Select>
+          </div>
+
+          <div mix={actionsCss}>
+            <Button mix={on('click', closePopover)} tone="ghost">
+              Done
+            </Button>
+          </div>
+        </div>
+      </div>
+    </popover.Context>
+  )
+}
+
+const buttonRowCss = css({
+  display: 'flex',
+  justifyContent: 'flex-start',
+})
+
+const panelCss = css({
+  display: 'grid',
+  gap: theme.space.md,
+  width: '22rem',
+  padding: theme.space.lg,
+})
+
+const fieldCss = css({
+  display: 'grid',
+  gap: theme.space.px,
+})
+
+const labelCss = css({
+  margin: 0,
+  fontSize: theme.fontSize.xs,
+  fontWeight: theme.fontWeight.semibold,
+  color: theme.colors.text.primary,
+})
+
+const fieldSelectCss = css({
+  width: '100%',
+})
+
+const actionsCss = css({
+  display: 'flex',
+  justifyContent: 'flex-end',
+  paddingTop: theme.space.xs,
+})