@remix-run/ui 0.1.2 → 0.2.0

package/src/components/combobox/README.md

@@ -8,7 +8,7 @@ Use it when the user should type draft text, filter a popup list, and still comm
 
 ```tsx
 import { css, type Handle } from 'remix/ui'
-import { Combobox, ComboboxOption, onComboboxChange } from 'remix/ui'
+import { Combobox, ComboboxOption, onComboboxChange } from 'remix/ui/combobox'
 
 let airports = [
   {

package/src/components/combobox/combobox.tsx

@@ -10,6 +10,7 @@ import {
   type ElementProps,
   type Handle,
   type MixinHandle,
+  type MixinFactory,
   type Props,
   type RemixNode,
 } from '@remix-run/ui'
@@ -213,7 +214,9 @@ function getOptionSearchValue(option: {
   return option.searchValue ?? option.textValue ?? option.label
 }
 
-function ComboboxProvider(handle: Handle<ComboboxContextProps, ComboboxContextValue>) {
+function ComboboxProvider(
+  handle: Handle<ComboboxContextProps, ComboboxContextValue>,
+): () => RemixNode {
   let inputRef: HTMLInputElement | undefined
   let listboxRef: listbox.ListboxRef | undefined
   let surfaceRef: HTMLElement | undefined
@@ -807,7 +810,11 @@ function getComboboxContext(handle: Handle | MixinHandle) {
   return handle.context.get(ComboboxProvider)
 }
 
-const inputMixin = createMixin<HTMLInputElement, [], ElementProps>((handle) => {
+const inputMixin: MixinFactory<HTMLInputElement, [], ElementProps> = createMixin<
+  HTMLInputElement,
+  [],
+  ElementProps
+>((handle) => {
   let context = getComboboxContext(handle)
 
   return (props) => [
@@ -882,7 +889,11 @@ const inputMixin = createMixin<HTMLInputElement, [], ElementProps>((handle) => {
   ]
 })
 
-const popoverMixin = createMixin<HTMLElement, [], ElementProps>((handle) => {
+const popoverMixin: MixinFactory<HTMLElement, [], ElementProps> = createMixin<
+  HTMLElement,
+  [],
+  ElementProps
+>((handle) => {
   let context = getComboboxContext(handle)
 
   return () => [
@@ -908,12 +919,20 @@ const popoverMixin = createMixin<HTMLElement, [], ElementProps>((handle) => {
   ]
 })
 
-const listMixin = createMixin<HTMLElement, [], ElementProps>((handle) => {
+const listMixin: MixinFactory<HTMLElement, [], ElementProps> = createMixin<
+  HTMLElement,
+  [],
+  ElementProps
+>((handle) => {
   let context = getComboboxContext(handle)
   return () => [attrs({ id: context.listId }), listbox.list()]
 })
 
-const hiddenInputMixin = createMixin<HTMLInputElement, [], ElementProps>((handle) => {
+const hiddenInputMixin: MixinFactory<HTMLInputElement, [], ElementProps> = createMixin<
+  HTMLInputElement,
+  [],
+  ElementProps
+>((handle) => {
   let context = getComboboxContext(handle)
   return () =>
     attrs({
@@ -924,8 +943,8 @@ const hiddenInputMixin = createMixin<HTMLInputElement, [], ElementProps>((handle
     })
 })
 
-const optionMixin = createMixin<HTMLElement, [options: ComboboxOptionOptions], ElementProps>(
-  (handle) => {
+const optionMixin: MixinFactory<HTMLElement, [options: ComboboxOptionOptions], ElementProps> =
+  createMixin<HTMLElement, [options: ComboboxOptionOptions], ElementProps>((handle) => {
     let context = getComboboxContext(handle)
 
     return (options) => {
@@ -946,8 +965,7 @@ const optionMixin = createMixin<HTMLElement, [options: ComboboxOptionOptions], E
         }),
       ]
     }
-  },
-)
+  })
 
 export const Context = ComboboxProvider
 export const hiddenInput = hiddenInputMixin
@@ -968,11 +986,11 @@ const combobox = {
 export function onComboboxChange<target extends HTMLElement>(
   handler: ComboboxChangeHandler<target>,
   captureBoolean?: boolean,
-) {
+): ReturnType<typeof on<target, typeof COMBOBOX_CHANGE_EVENT>> {
   return on(COMBOBOX_CHANGE_EVENT, handler, captureBoolean)
 }
 
-export function Combobox(handle: Handle<ComboboxProps>) {
+export function Combobox(handle: Handle<ComboboxProps>): () => RemixNode {
   return () => {
     let { children, defaultValue, disabled, inputId, name, placeholder, ...divProps } = handle.props
 
@@ -995,7 +1013,7 @@ export function Combobox(handle: Handle<ComboboxProps>) {
   }
 }
 
-export function ComboboxOption(handle: Handle<ComboboxOptionProps>) {
+export function ComboboxOption(handle: Handle<ComboboxOptionProps>): () => RemixNode {
   return () => {
     let { children, disabled, label, mix, searchValue, value, ...divProps } = handle.props
 

package/src/components/glyph/glyph.tsx

@@ -31,7 +31,7 @@ export function createGlyphSheet(values: GlyphValues): GlyphSheetComponent {
     >,
   )
 
-  function GlyphSheet(handle: Handle<GlyphSheetProps>) {
+  function GlyphSheet(handle: Handle<GlyphSheetProps>): () => RemixElement {
     return () => {
       let { style, ...svgProps } = handle.props
       let hiddenStyle = {
@@ -70,7 +70,7 @@ export function createGlyphSheet(values: GlyphValues): GlyphSheetComponent {
   })
 }
 
-export function Glyph(handle: Handle<GlyphProps>) {
+export function Glyph(handle: Handle<GlyphProps>): () => RemixElement {
   return () => {
     let { fill, name, ...svgProps } = handle.props
     let glyphId = glyphContract[name].id

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/menu/menu.tsx

@@ -9,6 +9,7 @@ import {
   type Dispatched,
   type ElementProps,
   type Handle,
+  type MixinFactory,
   type Props,
   type RemixNode,
 } from '@remix-run/ui'
@@ -416,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
@@ -957,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 = {}) => [
@@ -1005,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 () => [
@@ -1045,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 () => [
@@ -1146,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) => {
@@ -1226,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
@@ -1400,7 +1412,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 +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 () => {
@@ -1472,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
 
@@ -1486,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
@@ -1509,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/popover.ts

@@ -4,7 +4,9 @@ import {
   css,
   on,
   type CSSMixinDescriptor,
+  type ElementProps,
   type Handle,
+  type MixinFactory,
   type RemixNode,
 } from '@remix-run/ui'
 import { anchor as positionAnchor, type AnchorOptions } from '../anchor/anchor.ts'
@@ -75,7 +77,7 @@ const popoverSurfaceCss: CSSMixinDescriptor = css({
 export const contentStyle = popoverContentCss
 export const surfaceStyle = [popoverSurfaceCss, popoverSurfaceTransitionCss] as const
 
-function PopoverProvider(handle: Handle<PopoverProps, PopoverContext>) {
+function PopoverProvider(handle: Handle<PopoverProps, PopoverContext>): () => RemixNode {
   handle.context.set({
     hideFocusTarget: null,
     showFocusTarget: null,
@@ -99,7 +101,10 @@ export interface PopoverHideRequest {
   target?: Node | null
 }
 
-const anchorMixin = createMixin<HTMLElement, [options: AnchorOptions]>((handle) => {
+const anchorMixin: MixinFactory<HTMLElement, [options: AnchorOptions], ElementProps> = createMixin<
+  HTMLElement,
+  [options: AnchorOptions]
+>((handle) => {
   let context = handle.context.get(PopoverProvider)
   return (options) => {
     handle.queueTask((node) => {
@@ -108,91 +113,97 @@ const anchorMixin = createMixin<HTMLElement, [options: AnchorOptions]>((handle)
   }
 })
 
-const surfaceMixin = createMixin<HTMLElement, [options: PopoverSurfaceOptions]>((handle) => {
-  let openProp = false
-  let cleanupAnchor = () => {}
-  let unlockScroll = () => {}
-  let context = handle.context.get(PopoverProvider)
-
-  handle.queueTask((node, signal) => {
-    context.surface = node
-
-    signal.addEventListener('abort', () => {
-      if (context.surface === node) {
-        context.surface = null
-      }
-    })
-  })
+const surfaceMixin: MixinFactory<HTMLElement, [options: PopoverSurfaceOptions], ElementProps> =
+  createMixin<HTMLElement, [options: PopoverSurfaceOptions]>((handle) => {
+    let openProp = false
+    let cleanupAnchor = () => {}
+    let unlockScroll = () => {}
+    let context = handle.context.get(PopoverProvider)
 
-  return (options) => {
-    let wasOpen = openProp
-    openProp = options.open
-
-    handle.queueTask(async (node) => {
-      if (openProp && !wasOpen) {
-        node.showPopover()
-      } else if (!openProp && wasOpen) {
-        node.hidePopover()
-      }
-    })
+    handle.queueTask((node, signal) => {
+      context.surface = node
 
-    return [
-      attrs({ popover: 'manual' }),
-
-      on('beforetoggle', (event) => {
-        if (event.newState === 'open') {
-          cleanupAnchor = positionAnchor(
-            event.currentTarget,
-            context.anchor!.node,
-            context.anchor!.options,
-          )
-          unlockScroll = lockScroll()
-        } else if (event.newState === 'closed') {
-          cleanupAnchor()
-          unlockScroll()
+      signal.addEventListener('abort', () => {
+        if (context.surface === node) {
+          context.surface = null
         }
-      }),
+      })
+    })
 
-      on('toggle', async (event) => {
-        if (event.newState === 'open') {
-          context.showFocusTarget?.focus()
-        } else if (event.newState === 'closed' && options.restoreFocusOnHide !== false) {
-          context.hideFocusTarget?.focus()
-        }
-      }),
+    return (options) => {
+      let wasOpen = openProp
+      openProp = options.open
 
-      on('keydown', (event) => {
-        if (event.key === 'Escape') {
-          event.preventDefault()
-          options.onHide({ reason: 'escape-key' })
+      handle.queueTask(async (node) => {
+        if (openProp && !wasOpen) {
+          node.showPopover()
+        } else if (!openProp && wasOpen) {
+          node.hidePopover()
         }
-      }),
-
-      onOutsideClick(
-        openProp,
-        (target) => {
-          options.onHide({ reason: 'outside-click', target })
-        },
-        (target) => options.closeOnAnchorClick === false && !!context.anchor?.node.contains(target),
-        options.stopOutsideClickPropagation ?? true,
-      ),
-    ]
-  }
-})
-
-const focusOnShowMixin = createMixin<HTMLElement, []>((handle) => {
-  handle.addEventListener('insert', (event) => {
-    let context = handle.context.get(PopoverProvider)
-    context.showFocusTarget = event.node
+      })
+
+      return [
+        attrs({ popover: 'manual' }),
+
+        on('beforetoggle', (event) => {
+          if (event.newState === 'open') {
+            cleanupAnchor = positionAnchor(
+              event.currentTarget,
+              context.anchor!.node,
+              context.anchor!.options,
+            )
+            unlockScroll = lockScroll()
+          } else if (event.newState === 'closed') {
+            cleanupAnchor()
+            unlockScroll()
+          }
+        }),
+
+        on('toggle', async (event) => {
+          if (event.newState === 'open') {
+            context.showFocusTarget?.focus()
+          } else if (event.newState === 'closed' && options.restoreFocusOnHide !== false) {
+            context.hideFocusTarget?.focus()
+          }
+        }),
+
+        on('keydown', (event) => {
+          if (event.key === 'Escape') {
+            event.preventDefault()
+            options.onHide({ reason: 'escape-key' })
+          }
+        }),
+
+        onOutsideClick(
+          openProp,
+          (target) => {
+            options.onHide({ reason: 'outside-click', target })
+          },
+          (target) =>
+            options.closeOnAnchorClick === false && !!context.anchor?.node.contains(target),
+          options.stopOutsideClickPropagation ?? true,
+        ),
+      ]
+    }
   })
-})
 
-const focusOnHideMixin = createMixin<HTMLElement, []>((handle) => {
-  handle.addEventListener('insert', (event) => {
-    let context = handle.context.get(PopoverProvider)
-    context.hideFocusTarget = event.node
-  })
-})
+const focusOnShowMixin: MixinFactory<HTMLElement, [], ElementProps> = createMixin<HTMLElement, []>(
+  (handle) => {
+    handle.addEventListener('insert', (event) => {
+      let context = handle.context.get(PopoverProvider)
+      context.showFocusTarget = event.node
+    })
+  },
+)
+
+const focusOnHideMixin: MixinFactory<HTMLElement, [], ElementProps> = createMixin<HTMLElement, []>(
+  (handle) => {
+    handle.addEventListener('insert', (event) => {
+      let context = handle.context.get(PopoverProvider)
+      context.hideFocusTarget = event.node
+    })
+  },
+)
 
 export const Context = PopoverProvider
 export const anchor = anchorMixin