@remix-run/ui 0.3.0 → 0.5.0

package/src/runtime/vnode.ts

@@ -1,7 +1,13 @@
-import type { ComponentHandle, Component } from './component.ts'
-import { Fragment, Frame } from './component.ts'
+import type { ComponentHandle, Fragment, Frame, FrameHandle, FrameProps } from './component.ts'
 import { isRemixElement } from './core/vnode.ts'
-import type { ElementProps, RemixNode } from './jsx.ts'
+import type { Frame as FrameInstance } from './frame.ts'
+import type { RemixNode } from './jsx.ts'
+import type { ElementFunction } from './element-function.ts'
+import type { Key } from './key.ts'
+import type { MixinRuntimeState, MixinRuntimeValue } from './mixins/mixin.ts'
+import type { OnMixinDescriptor } from './mixins/on-mixin.ts'
+import type { Scheduler } from './scheduler.ts'
+import type { StyleManager } from '../style/index.ts'
 
 export { isRemixElement }
 
@@ -9,136 +15,234 @@ export const TEXT_NODE = Symbol('TEXT_NODE')
 export const NON_RENDER_NODE = Symbol('NON_RENDER_NODE')
 export const ROOT_VNODE = Symbol('ROOT_VNODE')
 
-export type VNodeType =
-  | typeof ROOT_VNODE
-  | string // host element
-  | Function // component
-  | typeof TEXT_NODE
-  | typeof NON_RENDER_NODE
-  | typeof Fragment
-  | typeof Frame
-
-export type VNode<T extends VNodeType = VNodeType> = {
-  type: T
-  props?: ElementProps
-  _mixedProps?: ElementProps
-  key?: string
-
-  // _prefixes assigned during reconciliation
-  _parent?: VNode
-  _children?: VNode[]
-  _dom?: unknown
-  _controller?: AbortController
-  _mixState?: unknown
-  _directEventDescriptors?: unknown
-  _directEventState?: unknown
-  _controlledState?: unknown
-  _svg?: boolean
-  // Range roots render between comment boundary markers
-  _rangeStart?: Node
-  _rangeEnd?: Node
-  _pendingHydrationComponentId?: string
-  _frameInstance?: unknown
-  _frameFallbackRoot?: { render: (element: RemixNode) => void; dispose: () => void }
-  _frameResolveToken?: number
-  _frameResolveController?: AbortController
-  _frameResolved?: boolean
+export type VNodeKind = 'root' | 'empty' | 'text' | 'fragment' | 'host' | 'component' | 'frame'
 
-  // TEXT_NODE
-  _text?: string
-
-  // Component
-  _handle?: ComponentHandle
-  _id?: string
-  _content?: VNode
+export type RuntimeElementProps = {
+  [name: string]: unknown
+}
 
-  // Mixin-persisted node removal state
-  _persistedByMixins?: boolean
-  _persistedParentByMixins?: ParentNode
-  _persistedRemovalToken?: number
+export type RuntimeHostProps = RuntimeElementProps & {
+  children?: RemixNode
+  innerHTML?: string
+  mix?: MixinRuntimeValue
 }
 
-export type FragmentNode = VNode & {
-  type: typeof Fragment
-  _children: VNode[]
+type InputNodeBase<kind extends VNodeKind, type> = {
+  kind: kind
+  type: type
+  key?: Key
+  _parent?: never
 }
 
-export type TextNode = VNode & {
-  type: typeof TEXT_NODE
+export type NonRenderNode = InputNodeBase<'empty', typeof NON_RENDER_NODE>
+
+export type TextNode = InputNodeBase<'text', typeof TEXT_NODE> & {
   _text: string
 }
 
-export type NonRenderNode = VNode & {
-  type: typeof NON_RENDER_NODE
+export type FragmentNode = InputNodeBase<'fragment', typeof Fragment> & {
+  _children: VNodeInput[]
+}
+
+export type HostNode = InputNodeBase<'host', string> & {
+  props: RuntimeHostProps
+  _children: VNodeInput[]
+}
+
+export type ComponentNode = InputNodeBase<'component', ElementFunction> & {
+  props: RuntimeElementProps
+}
+
+export type FrameNode = InputNodeBase<'frame', typeof Frame> & {
+  props: RuntimeElementProps & FrameProps
 }
 
-export type CommittedTextNode = TextNode & {
+export type VNodeInput =
+  | NonRenderNode
+  | TextNode
+  | FragmentNode
+  | HostNode
+  | ComponentNode
+  | FrameNode
+
+type MountedNodeBase = {
+  _parent: VNodeParent
+  _svg: boolean
+}
+
+type CommittedNodeBase<kind extends VNodeKind, type> = {
+  kind: kind
+  type: type
+  key?: Key
+} & MountedNodeBase
+
+export type CommittedNonRenderNode = CommittedNodeBase<'empty', typeof NON_RENDER_NODE>
+
+export type CommittedTextNode = CommittedNodeBase<'text', typeof TEXT_NODE> & {
+  _text: string
   _dom: Text
 }
 
-export type HostNode = VNode & {
+export type ControlledReflectionState = {
+  disposed: boolean
+  listenersAttached: boolean
+  pendingRestoreVersion: number
+  managesValue: boolean
+  managesChecked: boolean
+  hasControlledValue: boolean
+  controlledValue: unknown
+  hasControlledChecked: boolean
+  controlledChecked: unknown
+  onInput(): void
+  onChange(): void
+}
+
+export type DirectEventBinding = {
   type: string
-  props: ElementProps
-  _children: VNode[]
+  handler: (event: Event, signal: AbortSignal) => void | Promise<void>
+  capture: boolean
+  stableHandler: ((event: Event) => void) | null
+  reentry: AbortController | null
+}
+
+export type DirectEventState = {
+  bindings: DirectEventBinding[]
+}
+
+export type HostPersistenceState = {
+  parent: ParentNode
+  token: number
 }
 
-export type CommittedHostNode = HostNode & {
+export type CommittedHostNode = CommittedNodeBase<'host', string> & {
+  props: RuntimeHostProps
+  _children: CommittedVNode[]
   _dom: Element
-  _controller?: AbortController
+  _mixedProps: RuntimeHostProps
+  _mixState?: MixinRuntimeState
+  _directEventDescriptors?: OnMixinDescriptor[]
+  _directEventState?: DirectEventState
+  _controlledState?: ControlledReflectionState
+  _persistence?: HostPersistenceState
 }
 
-export type ComponentNode = VNode & {
-  type: Function
-  props: ElementProps
-  _handle: ComponentHandle
+export type CommittedFragmentNode = CommittedNodeBase<'fragment', typeof Fragment> & {
+  _children: CommittedVNode[]
 }
 
-export type CommittedComponentNode = VNode & {
-  type: Function
-  props: ElementProps
-  _content: VNode
+export type MountingComponentNode = CommittedNodeBase<'component', ElementFunction> & {
+  props: RuntimeElementProps
   _handle: ComponentHandle
+  _context: ReconcileContext
+}
+
+export type CommittedComponentNode = MountingComponentNode & {
+  _content: CommittedVNode
 }
 
-export function isFragmentNode(node: VNode): node is FragmentNode {
-  return node.type === Fragment
+export interface FrameFallbackRoot {
+  render(element: RemixNode): void
+  dispose(): void
 }
 
-export function isTextNode(node: VNode): node is TextNode {
-  return node.type === TEXT_NODE
+export type FrameMountState = {
+  instance: FrameInstance
+  fallbackRoot?: FrameFallbackRoot
+  resolveToken: number
+  resolveController?: AbortController
+  resolved: boolean
 }
 
-export function isNonRenderNode(node: VNode): node is NonRenderNode {
-  return node.type === NON_RENDER_NODE
+export type CommittedFrameNode = CommittedNodeBase<'frame', typeof Frame> & {
+  props: RuntimeElementProps & FrameProps
+  _rangeStart: Comment
+  _rangeEnd: Comment
+  _state: FrameMountState
+}
+
+export type CommittedVNode =
+  | CommittedNonRenderNode
+  | CommittedTextNode
+  | CommittedFragmentNode
+  | CommittedHostNode
+  | CommittedComponentNode
+  | CommittedFrameNode
+
+export type RootVNode = {
+  kind: 'root'
+  type: typeof ROOT_VNODE
+  _children: CommittedVNode[]
+  _svg: boolean
+  _rangeStart?: Node
+  _rangeEnd?: Node
+  _pendingHydrationComponentId?: string
 }
 
-export function isCommittedTextNode(node: VNode): node is CommittedTextNode {
-  return isTextNode(node) && node._dom instanceof Text
+export interface ReconcileContext {
+  frame: FrameHandle
+  scheduler: Scheduler
+  styles: StyleManager
+  rootTarget: EventTarget
 }
 
-export function isHostNode(node: VNode): node is HostNode {
-  return typeof node.type === 'string'
+export type VNodeParent =
+  | RootVNode
+  | CommittedFragmentNode
+  | CommittedHostNode
+  | MountingComponentNode
+  | CommittedComponentNode
+
+export type VNode = VNodeInput | CommittedVNode | RootVNode | MountingComponentNode
+
+export function isFragmentNode(node: VNode): node is FragmentNode | CommittedFragmentNode {
+  return node.kind === 'fragment'
 }
 
-export function isCommittedHostNode(node: VNode): node is CommittedHostNode {
-  return isHostNode(node) && node._dom instanceof Element
+export function isTextNode(node: VNode): node is TextNode | CommittedTextNode {
+  return node.kind === 'text'
 }
 
-export function isComponentNode(node: VNode): node is ComponentNode {
-  return typeof node.type === 'function' && node.type !== Frame
+export function isNonRenderNode(node: VNode): node is NonRenderNode | CommittedNonRenderNode {
+  return node.kind === 'empty'
+}
+
+export function isCommittedTextNode(node: CommittedVNode): node is CommittedTextNode {
+  return node.kind === 'text'
+}
+
+export function isHostNode(node: VNode): node is HostNode | CommittedHostNode {
+  return node.kind === 'host'
+}
+
+export function isCommittedHostNode(node: CommittedVNode): node is CommittedHostNode {
+  return node.kind === 'host'
+}
+
+export function isComponentNode(
+  node: VNode,
+): node is ComponentNode | MountingComponentNode | CommittedComponentNode {
+  return node.kind === 'component'
 }
 
 export function isCommittedComponentNode(node: VNode): node is CommittedComponentNode {
-  return isComponentNode(node) && node._content !== undefined
+  return node.kind === 'component' && '_content' in node
+}
+
+export function isFrameNode(node: VNode): node is FrameNode | CommittedFrameNode {
+  return node.kind === 'frame'
+}
+
+export function isCommittedFrameNode(node: CommittedVNode): node is CommittedFrameNode {
+  return node.kind === 'frame'
 }
 
-export function findContextFromAncestry(node: VNode, type: Component): unknown {
-  let current: VNode | undefined = node
+export function findContextFromAncestry(node: VNodeParent, type: ElementFunction): unknown {
+  let current: VNodeParent | undefined = node
   while (current) {
-    if (current.type === type && isComponentNode(current)) {
+    if (current.kind === 'component' && current.type === type) {
       return current._handle.getContextValue()
     }
-    current = current._parent
+    current = '_parent' in current ? current._parent : undefined
   }
   return undefined
 }

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

@@ -2,10 +2,11 @@
 
 `Select` is a button-triggered popup value picker backed by `listbox` and `popover`. Use it when the user should choose one stable string value from a finite set.
 
-## Usage
+## Component Usage
 
 ```tsx
-import { Option, Select, onSelectChange } from 'remix/ui/select'
+import { Option, Select } from 'remix/ui/select'
+import { onSelectChange } from 'remix/ui/select/primitives'
 
 export function FrameworkSelect() {
   return (
@@ -44,34 +45,34 @@ Use `textValue` when closed-trigger typeahead should match a different string fr
 </Select>
 ```
 
+## Primitive Usage
+
 Use the lower-level primitives when the trigger or popup structure needs to be owned by another component. Keep the same provider, trigger, popover, list, option, and hidden-input relationship.
 
 ```tsx
 import type { Handle } from 'remix/ui'
-import * as button from 'remix/ui/button'
-import * as listbox from 'remix/ui/listbox'
 import * as popover from 'remix/ui/popover'
-import * as select from 'remix/ui/select'
+import { triggerStyle } from 'remix/ui/select'
+import * as select from 'remix/ui/select/primitives'
+import { listStyle, optionStyle, surfaceStyle } from './select.styles'
 
 function SelectValue(handle: Handle) {
   let context = handle.context.get(select.Context)
 
-  return () => <span mix={button.labelStyle}>{context.displayedLabel}</span>
+  return () => <span>{context.displayedLabel}</span>
 }
 
 function IssueTypeSelect() {
   return () => (
-    <select.Context defaultLabel="Select a type" name="issueType">
-      <button type="button" mix={[button.baseStyle, select.triggerStyle, select.trigger()]}>
+    <select.Context defaultLabel="Select a type" labelSwapDelayMs={100} name="issueType">
+      <button type="button" mix={[triggerStyle, select.trigger()]}>
         <SelectValue />
       </button>
       <popover.Context>
-        <div mix={[popover.surfaceStyle, select.popover()]}>
-          <div mix={[popover.contentStyle, listbox.listStyle, select.list()]}>
-            <div mix={[listbox.optionStyle, select.option({ label: 'Bug', value: 'bug' })]}>
-              Bug
-            </div>
-            <div mix={[listbox.optionStyle, select.option({ label: 'Feature', value: 'feature' })]}>
+        <div mix={[surfaceStyle, select.popover()]}>
+          <div mix={[listStyle, select.list()]}>
+            <div mix={[optionStyle, select.option({ label: 'Bug', value: 'bug' })]}>Bug</div>
+            <div mix={[optionStyle, select.option({ label: 'Feature', value: 'feature' })]}>
               Feature
             </div>
           </div>
@@ -83,15 +84,24 @@ function IssueTypeSelect() {
 }
 ```
 
-## `select.*`
+## `remix/ui/select`
 
 - `Select`: composed trigger, popover, listbox, option list, and optional hidden input for form participation. Accepts `defaultLabel`, `defaultValue`, `disabled`, `name`, and button props.
-- `Option`: option wrapper that renders the standard check glyph and label slot. Accepts `label`, `value`, optional `disabled`, and optional `textValue`.
+- `Option`: option component that renders the standard check indicator and label slot. Accepts `label`, `value`, optional `disabled`, and optional `textValue`.
+- `triggerStyle`: standard select trigger style for custom trigger composition.
+- `SelectProps` and `SelectOptionProps`: public TypeScript props for the composed APIs.
+
+## `remix/ui/select/primitives`
+
+- `Context`: lower-level provider for custom composition. Accepts `defaultLabel`, `defaultValue`, `disabled`, `name`, and primitive-only `labelSwapDelayMs`; the label-swap delay defaults to `75` milliseconds.
+- `trigger()`: wires the trigger button, open behavior, closed-trigger typeahead, and trigger ARIA attributes.
+- `popover()`: wires the popover surface and keeps its min-width synced to the trigger before open.
+- `list()`: wires the listbox root used inside the popover.
+- `option(...)`: registers one selectable option. Accepts `label`, `value`, optional `disabled`, and optional `textValue`.
+- `hiddenInput()`: mirrors the selected value into a hidden input for form participation.
 - `onSelectChange(...)`: event mixin for the bubbling `SelectChangeEvent`.
-- `Context`, `trigger()`, `popover()`, `list()`, `option(...)`, and `hiddenInput()`: lower-level composition primitives.
-- `triggerStyle`: standard select trigger style.
 - `SelectChangeEvent`: event with `value`, `label`, and `optionId`.
-- `SelectProps`, `SelectContextProps`, and `SelectOptionProps`: public TypeScript props for the composed and lower-level APIs.
+- `SelectContextProps`, `SelectProps`, and `SelectOptionProps`: primitive prop types for custom composition.
 
 ## Behavior Notes
 

package/src/select/index.tsx

@@ -0,0 +1,159 @@
+import { createElement, css } from '@remix-run/ui'
+import type { CSSMixinDescriptor, Handle, Props, RemixNode } from '@remix-run/ui'
+
+import * as popover from '@remix-run/ui/popover'
+import * as select from '@remix-run/ui/select/primitives'
+import type { SearchValue } from '../shared/typeahead.ts'
+import { CheckIcon, ChevronVerticalIcon } from '../shared/icons.tsx'
+import {
+  listboxIndicatorStyle,
+  listboxLabelStyle,
+  listboxListStyle,
+  listboxOptionStyle,
+  popoverSurfaceStyle,
+} from '../shared/listbox-popover-styles.ts'
+
+export interface SelectProps extends Omit<Props<'button'>, 'children' | 'name'> {
+  children?: RemixNode
+  defaultLabel: string
+  defaultValue?: string | null
+  disabled?: boolean
+  name?: string
+}
+
+export type SelectOptionProps = Props<'div'> & {
+  children?: RemixNode
+  disabled?: boolean
+  label: string
+  textValue?: SearchValue
+  value: string
+}
+
+const selectTriggerShadow =
+  '0 2px 3px -1px rgba(0, 0, 0, 0.04), 0 3px 4px -1.5px rgba(0, 0, 0, 0.04), 0 4px 5px -2px rgba(0, 0, 0, 0.04), 0 0 0 1px light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.2))'
+
+const selectTriggerFocusShadow =
+  '0 2px 3px -1px rgba(0, 0, 0, 0.04), 0 3px 4px -1.5px rgba(0, 0, 0, 0.04), 0 4px 5px -2px rgba(0, 0, 0, 0.04), 0 0 0 1px light-dark(#3573F6, #6eaaff), 0 0 0 4px light-dark(rgba(53, 115, 246, 0.1), rgba(110, 170, 255, 0.18)), 0 6px 32px 4px light-dark(rgba(53, 115, 246, 0.08), rgba(110, 170, 255, 0.14)), inset 0 0 8px 1px light-dark(rgba(53, 115, 246, 0.05), rgba(110, 170, 255, 0.1))'
+
+const selectTriggerCss: CSSMixinDescriptor = css({
+  appearance: 'none',
+  margin: 0,
+  boxSizing: 'border-box',
+  width: '100%',
+  minWidth: 0,
+  height: '32px',
+  paddingBlock: '6px',
+  paddingInlineStart: '12px',
+  paddingInlineEnd: '8px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-start',
+  gap: '6px',
+  border: 0,
+  borderRadius: '8px',
+  background: 'light-dark(#FFFFFF, #1a1a1a)',
+  boxShadow: selectTriggerShadow,
+  color: 'light-dark(#101010, #ececec)',
+  fontFamily: '"Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif',
+  fontStyle: 'normal',
+  fontWeight: 400,
+  fontSize: '13px',
+  lineHeight: '20px',
+  fontFeatureSettings: '"ss01" on, "cv01" on',
+  letterSpacing: 0,
+  textAlign: 'left',
+  textShadow: '0 1px 0 light-dark(#FFFFFF, rgb(0 0 0 / 0.35))',
+  whiteSpace: 'nowrap',
+  '&:hover, &:focus-visible, &[aria-expanded="true"], &[aria-expanded="true"]:hover, &[aria-expanded="true"]:focus-visible':
+    {
+      background: 'light-dark(#FFFFFF, #1a1a1a)',
+      color: 'light-dark(#101010, #ececec)',
+    },
+  '&:active': {
+    background: 'light-dark(#FFFFFF, #1a1a1a)',
+  },
+  '&:focus-visible': {
+    outline: 0,
+    boxShadow: selectTriggerFocusShadow,
+  },
+  '&[aria-expanded="true"]': {
+    boxShadow: selectTriggerFocusShadow,
+  },
+  '&:disabled': {
+    opacity: 0.55,
+  },
+})
+
+const triggerLabelCss: CSSMixinDescriptor = css({
+  display: 'inline-flex',
+  alignItems: 'center',
+  flex: '1 1 auto',
+  minWidth: 0,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+})
+
+const triggerIconCss: CSSMixinDescriptor = css({
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '16px',
+  height: '16px',
+  color: 'light-dark(#707070, #b3b3b3)',
+  flex: 'none',
+  '& > svg': {
+    display: 'block',
+    width: '100%',
+    height: '100%',
+  },
+})
+
+export const triggerStyle = selectTriggerCss
+
+function SelectLabel(handle: Handle): () => RemixNode {
+  let context = handle.context.get(select.Context)
+
+  return () => <span mix={triggerLabelCss}>{context.displayedLabel}</span>
+}
+
+export function Select(handle: Handle<SelectProps>): () => RemixNode {
+  return () => {
+    let { children, defaultLabel, defaultValue, disabled, name, mix, ...buttonProps } = handle.props
+
+    return (
+      <select.Context
+        defaultLabel={defaultLabel}
+        defaultValue={defaultValue}
+        disabled={disabled}
+        name={name}
+      >
+        <button type="button" {...buttonProps} mix={[triggerStyle, select.trigger(), mix]}>
+          <SelectLabel />
+          <ChevronVerticalIcon mix={triggerIconCss} />
+        </button>
+        <popover.Context>
+          <div mix={[popoverSurfaceStyle, select.popover()]}>
+            <div mix={[listboxListStyle, select.list()]}>{children}</div>
+          </div>
+        </popover.Context>
+        {name && <input mix={select.hiddenInput()} />}
+      </select.Context>
+    )
+  }
+}
+
+export function Option(handle: Handle<SelectOptionProps>): () => RemixNode {
+  return () => {
+    let { label, value, disabled, textValue, children, mix, ...divProps } = handle.props
+
+    return (
+      <div
+        {...divProps}
+        mix={[listboxOptionStyle, select.option({ value, label, disabled, textValue }), mix]}
+      >
+        <CheckIcon mix={listboxIndicatorStyle} />
+        <span mix={listboxLabelStyle}>{children ?? label}</span>
+      </div>
+    )
+  }
+}