@remix-run/ui 0.1.2 → 0.3.0

package/src/components/popover/popover.ts

@@ -4,10 +4,16 @@ 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'
+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'
@@ -24,7 +30,7 @@ export interface PopoverProps {
 }
 
 interface AnchorRef {
-  node: HTMLElement
+  target: AnchorTarget
   options: AnchorOptions
 }
 
@@ -75,7 +81,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,100 +105,114 @@ 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) => {
-      context.anchor = { node, options }
+      context.anchor = { target: node, options }
     })
   }
 })
 
-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
+function anchorContains(anchor: AnchorRef | null, target: Node) {
+  return anchor?.target instanceof HTMLElement && anchor.target.contains(target)
+}
 
-    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') {
+            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()
+            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 && anchorContains(context.anchor, 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

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

@@ -10,6 +10,7 @@ import {
   type ElementProps,
   type Handle,
   type MixinHandle,
+  type MixinFactory,
   type Props,
   type RemixNode,
 } from '@remix-run/ui'
@@ -106,7 +107,7 @@ interface SelectContextValue {
   unregisterTrigger: (node: HTMLButtonElement) => void
 }
 
-function SelectProvider(handle: Handle<SelectContextProps, SelectContextValue>) {
+function SelectProvider(handle: Handle<SelectContextProps, SelectContextValue>): () => RemixNode {
   let triggerRef: HTMLButtonElement | undefined
   let listboxRef: listbox.ListboxRef | undefined
   let surfaceRef: HTMLElement | undefined
@@ -155,7 +156,7 @@ function SelectProvider(handle: Handle<SelectContextProps, SelectContextValue>)
     popoverContextRef.hideFocusTarget = triggerRef ?? null
     popoverContextRef.anchor = triggerRef
       ? {
-          node: triggerRef,
+          target: triggerRef,
           options: getPopoverAnchorOptions(),
         }
       : null
@@ -396,7 +397,11 @@ function getSelectContext(handle: Handle | MixinHandle) {
   return handle.context.get(SelectProvider)
 }
 
-const triggerMixin = createMixin<HTMLButtonElement, [], ElementProps>((handle) => {
+const triggerMixin: MixinFactory<HTMLButtonElement, [], ElementProps> = createMixin<
+  HTMLButtonElement,
+  [],
+  ElementProps
+>((handle) => {
   let context = getSelectContext(handle)
 
   return (props) => [
@@ -428,7 +433,11 @@ const triggerMixin = createMixin<HTMLButtonElement, [], ElementProps>((handle) =
   ]
 })
 
-const popoverMixin = createMixin<HTMLElement, [], ElementProps>((handle) => {
+const popoverMixin: MixinFactory<HTMLElement, [], ElementProps> = createMixin<
+  HTMLElement,
+  [],
+  ElementProps
+>((handle) => {
   let context = getSelectContext(handle)
   let popoverState = handle.context.get(popover.Context)
 
@@ -453,7 +462,11 @@ const popoverMixin = createMixin<HTMLElement, [], ElementProps>((handle) => {
   ]
 })
 
-const listMixin = createMixin<HTMLElement, [], ElementProps>((handle) => {
+const listMixin: MixinFactory<HTMLElement, [], ElementProps> = createMixin<
+  HTMLElement,
+  [],
+  ElementProps
+>((handle) => {
   let context = getSelectContext(handle)
 
   return () => [
@@ -466,7 +479,11 @@ const listMixin = createMixin<HTMLElement, [], ElementProps>((handle) => {
   ]
 })
 
-const hiddenInputMixin = createMixin<HTMLInputElement, [], ElementProps>((handle) => {
+const hiddenInputMixin: MixinFactory<HTMLInputElement, [], ElementProps> = createMixin<
+  HTMLInputElement,
+  [],
+  ElementProps
+>((handle) => {
   let context = getSelectContext(handle)
 
   return () =>
@@ -532,17 +549,17 @@ const select = {
 export function onSelectChange<target extends HTMLElement>(
   handler: SelectChangeHandler<target>,
   captureBoolean?: boolean,
-) {
+): ReturnType<typeof on<target, typeof SELECT_CHANGE_EVENT>> {
   return on(SELECT_CHANGE_EVENT, handler, captureBoolean)
 }
 
-function SelectLabel(handle: Handle) {
+function SelectLabel(handle: Handle): () => RemixNode {
   let context = getSelectContext(handle)
 
   return () => <span mix={button.labelStyle}>{context.displayedLabel}</span>
 }
 
-export function Select(handle: Handle<SelectProps>) {
+export function Select(handle: Handle<SelectProps>): () => RemixNode {
   return () => {
     let { children, defaultLabel, defaultValue, disabled, name, mix, ...buttonProps } = handle.props
 
@@ -568,7 +585,7 @@ export function Select(handle: Handle<SelectProps>) {
   }
 }
 
-export function Option(handle: Handle<SelectOptionProps>) {
+export function Option(handle: Handle<SelectOptionProps>): () => RemixNode {
   return () => {
     let { label, value, disabled, textValue, children, mix, ...divProps } = handle.props
 

package/src/index.ts

@@ -51,6 +51,7 @@ export type { HostProps, LayoutAnimationConfig } from './runtime/dom.ts'
 export { createMixin } from './runtime/mixins/mixin.ts'
 export type {
   MixinDescriptor,
+  MixinFactory,
   MixinHandle,
   MixinType,
   MixInput,

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

@@ -118,13 +118,18 @@ export type ContextFrom<ComponentType> =
 
 /**
  * Context storage API exposed on component handles.
+ *
+ * Context values are keyed by provider component identity. `get(Component)`
+ * reads the nearest ancestor instance whose component function is exactly
+ * `Component`, so nested instances of the same provider shadow outer instances
+ * while different component types remain independent.
  */
 export interface Context<C> {
   /** Replaces the current context value for this component instance. */
   set(values: C): void
-  /** Reads the context value associated with the given component type. */
+  /** Reads the context value from the nearest ancestor instance of the given component type. */
   get<ComponentType>(component: ComponentType): ContextFrom<ComponentType>
-  /** Reads the context value associated with the given component key. */
+  /** Reads an unknown context value for an untyped lookup. */
   get(component: ElementType | symbol): unknown | undefined
 }
 
@@ -174,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'
 
@@ -218,7 +223,14 @@ type ComponentConfig = {
 /**
  * Runtime handle returned by {@link createComponent}.
  */
-export type ComponentHandle = ReturnType<typeof createComponent>
+export interface ComponentHandle<C = NoContext> {
+  frame: FrameHandle
+  render(nextProps: ElementProps): [RemixNode, Array<() => void>]
+  remove(): Array<() => void>
+  setScheduleUpdate(nextScheduleUpdate: () => void): void
+  getContextValue(): C | undefined
+  isRemoved(): boolean
+}
 
 /**
  * Creates the internal runtime wrapper for a component instance.
@@ -226,11 +238,11 @@ export type ComponentHandle = ReturnType<typeof createComponent>
  * @param config Component runtime configuration.
  * @returns Component runtime helpers used by the reconciler.
  */
-export function createComponent<C = NoContext>(config: ComponentConfig) {
+export function createComponent<C = NoContext>(config: ComponentConfig): ComponentHandle<C> {
   return new ComponentRuntime<C>(config)
 }
 
-class ComponentRuntime<C = NoContext> {
+class ComponentRuntime<C = NoContext> implements ComponentHandle<C> {
   frame: FrameHandle
 
   #config: ComponentConfig
@@ -240,6 +252,7 @@ class ComponentRuntime<C = NoContext> {
   #props = {} as ElementProps
   #renderController: AbortController | undefined
   #renderFn: RenderFn | undefined
+  #removed = false
   #scheduleUpdate: () => void = () => {
     throw new Error('scheduleUpdate not implemented')
   }
@@ -252,7 +265,7 @@ class ComponentRuntime<C = NoContext> {
   }
 
   render = (nextProps: ElementProps): [RemixNode, Array<() => void>] => {
-    if (this.#connectedController?.signal.aborted) {
+    if (this.#removed) {
       console.warn('render called after component was removed, potential application memory leak')
       return [null, []]
     }
@@ -274,13 +287,15 @@ class ComponentRuntime<C = NoContext> {
       this.#renderFn = renderFn
     }
 
-    return [renderFn(this.#props), this.#dequeueTasks()]
+    return [renderFn(), this.#dequeueTasks()]
   }
 
   remove = (): Array<() => void> => {
+    if (this.#removed) return []
+    this.#removed = true
     this.#connectedController?.abort()
     this.#abortRenderSignal()
-    return this.#dequeueTasks()
+    return this.#dequeueTasks(AbortSignal.abort())
   }
 
   setScheduleUpdate = (nextScheduleUpdate: () => void): void => {
@@ -289,6 +304,8 @@ class ComponentRuntime<C = NoContext> {
 
   getContextValue = (): C | undefined => this.#contextValue
 
+  isRemoved = (): boolean => this.#removed
+
   #createHandle(): Handle<ElementProps, C> {
     let component = this
     let context: Context<C> = {
@@ -303,6 +320,11 @@ class ComponentRuntime<C = NoContext> {
       props: this.#props,
       update: () =>
         new Promise((resolve) => {
+          if (component.#removed) {
+            resolve(AbortSignal.abort())
+            return
+          }
+
           this.#tasks.push((signal) => resolve(signal))
           this.#scheduleUpdate()
         }),
@@ -335,14 +357,14 @@ class ComponentRuntime<C = NoContext> {
     this.#renderController = undefined
   }
 
-  #dequeueTasks(): Array<() => void> {
-    let needsSignal = this.#tasks.some((task) => task.length >= 1)
+  #dequeueTasks(signal?: AbortSignal): Array<() => void> {
+    let needsSignal = signal === undefined && this.#tasks.some((task) => task.length >= 1)
 
     if (needsSignal) {
       this.#renderController ??= new AbortController()
     }
 
-    let signal = this.#renderController?.signal
+    signal ??= this.#renderController?.signal
     let tasks = this.#tasks.splice(0, this.#tasks.length)
     return tasks.map((task) => () => task(signal!))
   }
@@ -366,7 +388,7 @@ function syncProps(target: ElementProps, next: ElementProps): void {
  * @param handle Component handle for the frame instance.
  * @returns A placeholder render function handled by the reconciler.
  */
-export function Frame(handle: Handle<FrameProps, FrameHandle>) {
+export function Frame(handle: Handle<FrameProps, FrameHandle>): RenderFn {
   void handle
   return () => null // reconciler renders
 }
@@ -377,7 +399,7 @@ export function Frame(handle: Handle<FrameProps, FrameHandle>) {
  * @param handle Component handle for the fragment instance.
  * @returns A placeholder render function handled by the reconciler.
  */
-export function Fragment(handle: Handle<FragmentProps>) {
+export function Fragment(handle: Handle<FragmentProps>): RenderFn {
   void handle
   return () => null // reconciler renders
 }

package/src/runtime/core/attributes.ts

@@ -14,6 +14,17 @@ const ATTRIBUTE_FALLBACK_NAMES = new Set([
   'colSpan',
   'role',
   'popover',
+  'translate',
+])
+
+const BOOLEANISH_STRING_ATTRIBUTES = new Set([
+  'autoReverse',
+  'contenteditable',
+  'draggable',
+  'externalResourcesRequired',
+  'focusable',
+  'preserveAlpha',
+  'spellcheck',
 ])
 
 export const FRAMEWORK_PROPS = new Set(['children', 'mix', 'key', 'animate', 'innerHTML', 'on'])
@@ -43,9 +54,11 @@ export function canUseProperty(
   element: Element,
   name: string,
   isSvg: boolean,
+  attr: string,
 ): element is Element & Record<string, unknown> {
   if (isSvg) return false
   if (ATTRIBUTE_FALLBACK_NAMES.has(name)) return false
+  if (isBooleanishStringAttribute(attr)) return false
   return name in element
 }
 
@@ -68,6 +81,14 @@ export function normalizeAttributeName(
   return normalizeSvgAttribute(name)
 }
 
+export function isBooleanishStringAttribute(name: string): boolean {
+  return BOOLEANISH_STRING_ATTRIBUTES.has(name)
+}
+
+export function shouldStringifyBooleanAttribute(name: string): boolean {
+  return isBooleanishStringAttribute(name) || name === 'value'
+}
+
 export function serializeStyleObject(style: Record<string, unknown>): string {
   let parts: string[] = []
 

package/src/runtime/core/props.ts

@@ -2,6 +2,7 @@ import type { ElementProps } from '../jsx.ts'
 import {
   canUseProperty,
   getMergedClassName,
+  isBooleanishStringAttribute,
   normalizeAttributeName,
   serializeStyleObject,
   toKebabCase,
@@ -68,11 +69,11 @@ export function patchHostProps(curr: ElementProps, next: ElementProps, dom: Elem
     if (name === 'class' || name === 'className') continue
     if (name in next && next[name] != null) continue
 
-    if (canUseProperty(dom, name, isSvg)) {
+    let { ns, attr } = normalizeAttributeName(name, isSvg)
+    if (canUseProperty(dom, name, isSvg, attr)) {
       clearRuntimePropertyOnRemoval(dom, name)
     }
 
-    let { ns, attr } = normalizeAttributeName(name, isSvg)
     if (ns) dom.removeAttributeNS(ns, toLocalName(attr))
     else dom.removeAttribute(attr)
   }
@@ -114,7 +115,7 @@ function patchHostProp(dom: Element, name: string, value: unknown, isSvg: boolea
     return
   }
 
-  if (canUseProperty(dom, name, isSvg)) {
+  if (canUseProperty(dom, name, isSvg, attr)) {
     try {
       dom[name] = value == null ? '' : value
       return
@@ -124,7 +125,8 @@ function patchHostProp(dom: Element, name: string, value: unknown, isSvg: boolea
   if (typeof value === 'function') return
 
   let isAriaOrData = name.startsWith('aria-') || name.startsWith('data-')
-  if (value != null && (value !== false || isAriaOrData)) {
+  let isBooleanishString = isBooleanishStringAttribute(attr)
+  if (value != null && (value !== false || isAriaOrData || isBooleanishString)) {
     let attrValue = name === 'popover' && value === true ? '' : String(value)
     if (ns) dom.setAttributeNS(ns, attr, attrValue)
     else dom.setAttribute(attr, attrValue)

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>
+  )
+}