@remix-run/ui 0.2.0 → 0.4.0

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 rgba(0, 0, 0, 0.12)'
+
+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 #3573F6, 0 0 0 4px rgba(53, 115, 246, 0.1), 0 6px 32px 4px rgba(53, 115, 246, 0.08), inset 0 0 8px 1px rgba(53, 115, 246, 0.05)'
+
+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: '#FFFFFF',
+  boxShadow: selectTriggerShadow,
+  color: '#101010',
+  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 #FFFFFF',
+  whiteSpace: 'nowrap',
+  '&:hover, &:focus-visible, &[aria-expanded="true"], &[aria-expanded="true"]:hover, &[aria-expanded="true"]:focus-visible':
+    {
+      background: '#FFFFFF',
+      color: '#101010',
+    },
+  '&:active': {
+    background: '#FFFFFF',
+  },
+  '&: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: '#707070',
+  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>
+    )
+  }
+}

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

@@ -1,11 +1,8 @@
 import {
   attrs,
-  createElement,
   createMixin,
-  css,
   on,
   ref,
-  type CSSMixinDescriptor,
   type Dispatched,
   type ElementProps,
   type Handle,
@@ -14,19 +11,16 @@ import {
   type Props,
   type RemixNode,
 } from '@remix-run/ui'
-import * as button from '../button/button.tsx'
-import { Glyph } from '../glyph/glyph.tsx'
-import * as listbox from '../listbox/listbox.ts'
-import * as popover from '../popover/popover.ts'
-import { theme } from '../../theme/theme.ts'
-import { hiddenTypeahead } from '../../interactions/typeahead/typeahead-mixin.ts'
-import { onKeyDown } from '../../interactions/keydown/keydown.ts'
-import { waitForCssTransition } from '../../utils/wait-for-css-transition.ts'
-import { wait } from '../../utils/wait.ts'
-import type { AnchorOptions } from '../anchor/anchor.ts'
+import * as listbox from '../listbox/index.ts'
+import * as popover from '../popover/index.ts'
+import { hiddenTypeahead } from '../shared/typeahead.ts'
+import { waitForCssTransition } from '../shared/wait-for-css-transition.ts'
+import { wait } from '../shared/wait.ts'
+import { onKeyDown } from './keydown.ts'
+import type { AnchorOptions } from '../anchor/index.ts'
 
 const SELECT_CHANGE_EVENT = 'rmx:select-change' as const
-const LABEL_SWAP_DELAY_MS = 75
+const DEFAULT_LABEL_SWAP_DELAY_MS = 75
 
 type SelectChangeHandler<target extends HTMLElement> = (
   event: Dispatched<SelectChangeEvent, target>,
@@ -65,6 +59,7 @@ export interface SelectContextProps {
   defaultLabel: string
   defaultValue?: string | null
   disabled?: boolean
+  labelSwapDelayMs?: number
   name?: string
 }
 
@@ -156,7 +151,7 @@ function SelectProvider(handle: Handle<SelectContextProps, SelectContextValue>):
     popoverContextRef.hideFocusTarget = triggerRef ?? null
     popoverContextRef.anchor = triggerRef
       ? {
-          node: triggerRef,
+          target: triggerRef,
           options: getPopoverAnchorOptions(),
         }
       : null
@@ -236,7 +231,7 @@ function SelectProvider(handle: Handle<SelectContextProps, SelectContextValue>):
     }
 
     await Promise.all([handle.update(), waitForCssTransition(surfaceRef, handle.signal)])
-    await wait(LABEL_SWAP_DELAY_MS) // UX delay label swap for clear value change
+    await wait(handle.props.labelSwapDelayMs ?? DEFAULT_LABEL_SWAP_DELAY_MS)
     if (handle.signal.aborted) return
     displayedLabel = selectedLabel
     state = 'closed'
@@ -495,41 +490,6 @@ const hiddenInputMixin: MixinFactory<HTMLInputElement, [], ElementProps> = creat
     })
 })
 
-const selectTriggerCss: CSSMixinDescriptor = css({
-  minHeight: theme.control.height.sm,
-  width: '100%',
-  paddingInline: theme.space.md,
-  paddingInlineEnd: theme.space.sm,
-  display: 'grid',
-  gridTemplateColumns: 'minmax(0, 1fr) auto',
-  alignItems: 'center',
-  gap: theme.space.sm,
-  borderRadius: theme.radius.md,
-  backgroundImage: 'none',
-  border: '0.5px solid transparent',
-  boxShadow: 'none',
-  fontSize: theme.fontSize.xs,
-  textAlign: 'left',
-  backgroundColor: theme.surface.lvl3,
-  color: theme.colors.text.secondary,
-  '&:hover, &:focus-visible, &[aria-expanded="true"], &[aria-expanded="true"]:hover, &[aria-expanded="true"]:focus-visible':
-    {
-      backgroundColor: theme.surface.lvl4,
-      color: theme.colors.text.primary,
-    },
-  '&:active': {
-    backgroundColor: theme.surface.lvl3,
-  },
-  '&:focus-visible': {
-    outline: `2px solid ${theme.colors.focus.ring}`,
-    outlineOffset: '2px',
-  },
-  '&:disabled': {
-    opacity: 0.6,
-  },
-})
-
-export const triggerStyle = selectTriggerCss
 export const Context = SelectProvider
 export const hiddenInput = hiddenInputMixin
 export const list = listMixin
@@ -552,51 +512,3 @@ export function onSelectChange<target extends HTMLElement>(
 ): ReturnType<typeof on<target, typeof SELECT_CHANGE_EVENT>> {
   return on(SELECT_CHANGE_EVENT, handler, captureBoolean)
 }
-
-function SelectLabel(handle: Handle): () => RemixNode {
-  let context = getSelectContext(handle)
-
-  return () => <span mix={button.labelStyle}>{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 {...buttonProps} mix={[button.baseStyle, triggerStyle, select.trigger(), mix]}>
-          <SelectLabel />
-          <Glyph mix={button.iconStyle} name="chevronVertical" />
-        </button>
-        <popover.Context>
-          <div mix={[popover.surfaceStyle, select.popover()]}>
-            <div mix={[popover.contentStyle, listbox.listStyle, 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={[listbox.optionStyle, select.option({ value, label, disabled, textValue }), mix]}
-      >
-        <Glyph mix={listbox.glyphStyle} name="check" />
-        <span mix={listbox.labelStyle}>{children ?? handle.props.label}</span>
-      </div>
-    )
-  }
-}

package/src/server/stream.ts

@@ -438,7 +438,7 @@ function buildSegment(node: RemixNode, context: RenderContext, frameState: SsrFr
 
     if (typeof type === 'function') {
       if (type === Frame) {
-        return buildFrameSegment(props, context, frameState)
+        return buildFrameSegment(node, context, frameState)
       }
       if (isEntry(type)) {
         return buildEntrySegment(type, props, context, frameState)
@@ -456,7 +456,12 @@ function buildSegment(node: RemixNode, context: RenderContext, frameState: SsrFr
   return staticSeg('')
 }
 
-function buildFrameSegment(props: any, context: RenderContext, frameState: SsrFrameState): Segment {
+function buildFrameSegment(
+  node: RemixElement,
+  context: RenderContext,
+  frameState: SsrFrameState,
+): Segment {
+  let props = node.props
   let frameId = randomId('f')
 
   // Store frame data in context for aggregation
@@ -1047,17 +1052,17 @@ async function resolveClientEntries(
 ): Promise<void> {
   if (context.unresolvedHydrationData.size === 0) return
 
-  let resolvedEntries = new Map<string, ResolvedClientEntry>()
+  let resolvedEntries = new Map<EntryComponent, ResolvedClientEntry>()
 
   for (let [hydrationId, unresolvedHydrationData] of context.unresolvedHydrationData) {
     let { entryId, component, props } = unresolvedHydrationData
-    let resolvedEntry = resolvedEntries.get(entryId)
+    let resolvedEntry = resolvedEntries.get(component)
     if (!resolvedEntry) {
       resolvedEntry = resolveClientEntry
         ? await Promise.resolve(resolveClientEntry(entryId, component))
         : resolveDefaultClientEntry(entryId, component)
       validateResolvedClientEntry(entryId, resolvedEntry)
-      resolvedEntries.set(entryId, resolvedEntry)
+      resolvedEntries.set(component, resolvedEntry)
     }
 
     context.hydrationData.set(hydrationId, {

package/src/shared/focus-styles.ts

@@ -0,0 +1,2 @@
+export const controlFocusShadow =
+  '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 #3573F6, 0 0 0 4px rgba(53, 115, 246, 0.1), 0 6px 32px 4px rgba(53, 115, 246, 0.08), inset 0 0 8px 1px rgba(53, 115, 246, 0.05)'

package/src/shared/icons.tsx

@@ -0,0 +1,62 @@
+import { createElement } from '@remix-run/ui'
+import type { Handle, Props, RemixElement } from '@remix-run/ui'
+
+type IconProps = Omit<Props<'svg'>, 'children'>
+
+function icon(
+  handle: Handle<IconProps>,
+  children: RemixElement | readonly RemixElement[],
+): RemixElement {
+  let hiddenByDefault =
+    handle.props['aria-hidden'] === undefined &&
+    handle.props['aria-label'] === undefined &&
+    handle.props['aria-labelledby'] === undefined
+
+  return createElement(
+    'svg',
+    {
+      ...handle.props,
+      'aria-hidden': hiddenByDefault ? true : handle.props['aria-hidden'],
+      fill: handle.props.fill ?? 'none',
+      viewBox: handle.props.viewBox ?? '0 0 16 16',
+      xmlns: 'http://www.w3.org/2000/svg',
+    },
+    children,
+  )
+}
+
+function strokedPath(d: string): RemixElement {
+  return createElement('path', {
+    d,
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    strokeWidth: '1.5',
+  })
+}
+
+export function AddIcon(handle: Handle<IconProps>): () => RemixElement {
+  return () => icon(handle, strokedPath('M8 3.25v9.5M3.25 8h9.5'))
+}
+
+export function CheckIcon(handle: Handle<IconProps>): () => RemixElement {
+  return () => icon(handle, strokedPath('m3.5 8.25 2.75 2.75L12.5 4.75'))
+}
+
+export function ChevronDownIcon(handle: Handle<IconProps>): () => RemixElement {
+  return () => icon(handle, strokedPath('m3.75 6.25 4.25 4 4.25-4'))
+}
+
+export function ChevronRightIcon(handle: Handle<IconProps>): () => RemixElement {
+  return () => icon(handle, strokedPath('m6 4 4 4-4 4'))
+}
+
+export function ChevronVerticalIcon(handle: Handle<IconProps>): () => RemixElement {
+  return () =>
+    icon(handle, [strokedPath('m3.75 6.5 4.25-4 4.25 4'), strokedPath('m3.75 9.5 4.25 4 4.25-4')])
+}
+
+export function SearchIcon(handle: Handle<IconProps>): () => RemixElement {
+  return () => icon(handle, strokedPath('M7.25 12.25a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm3.54-1.46 3 3'))
+}

package/src/shared/listbox-popover-styles.ts

@@ -0,0 +1,146 @@
+import { css, type CSSMixinDescriptor } from '@remix-run/ui'
+
+import { componentStyleValues as styles } from './style-values.ts'
+
+const popupViewportClampMaxHeight = '50dvh'
+
+const popoverSurfaceTransitionCss: CSSMixinDescriptor = css({
+  opacity: 0,
+  '&:popover-open': {
+    opacity: 1,
+  },
+  '&:not(:popover-open)': {
+    pointerEvents: 'none',
+    transition: 'opacity 180ms ease-in, overlay 180ms ease-in, display 180ms ease-in',
+    transitionBehavior: 'allow-discrete',
+  },
+})
+
+const popoverSurfaceCss: CSSMixinDescriptor = css({
+  position: 'fixed',
+  inset: 'auto',
+  margin: 0,
+  padding: styles.space.none,
+  display: 'flex',
+  flexDirection: 'column',
+  minHeight: 0,
+  minWidth: '12rem',
+  maxWidth: `min(24rem, calc(100vw - (${styles.space.lg} * 2)))`,
+  maxHeight: popupViewportClampMaxHeight,
+  border: `1px solid ${styles.colors.border.subtle}`,
+  borderRadius: styles.radius.lg,
+  backgroundColor: styles.surface.lvl0,
+  color: styles.colors.text.primary,
+  overflow: 'hidden',
+  boxShadow: `${styles.shadow.xs}, ${styles.shadow.md}`,
+  '&::backdrop': {
+    background: 'transparent',
+  },
+})
+
+const listCss: CSSMixinDescriptor = css({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: '1 1 auto',
+  minHeight: 0,
+  paddingBlock: styles.space.xs,
+  paddingInline: styles.space.none,
+  overflow: 'auto',
+  overscrollBehavior: 'contain',
+  outline: 'none',
+  userSelect: 'none',
+  WebkitUserSelect: 'none',
+  '--rmx-ui-item-inset': `calc(${styles.space.sm} + ${styles.space.xs})`,
+  '--rmx-ui-item-indicator-gap': styles.space.xs,
+  '--rmx-ui-item-indicator-width': styles.fontSize.md,
+})
+
+const itemCss: CSSMixinDescriptor = css({
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+  minWidth: 0,
+  minHeight: styles.control.height.md,
+  boxSizing: 'border-box',
+  position: 'relative',
+  isolation: 'isolate',
+  paddingInline: `calc(${styles.space.sm} + ${styles.space.xs})`,
+  color: styles.colors.text.primary,
+  fontFamily: styles.fontFamily.sans,
+  fontSize: styles.fontSize.sm,
+  fontWeight: styles.fontWeight.normal,
+  lineHeight: styles.lineHeight.normal,
+  textAlign: 'left',
+  userSelect: 'none',
+  WebkitUserSelect: 'none',
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    insetBlock: 0,
+    insetInline: styles.space.xs,
+    borderRadius: styles.radius.md,
+    backgroundColor: 'transparent',
+    pointerEvents: 'none',
+    zIndex: -1,
+  },
+  '&:focus': {
+    outline: 'none',
+  },
+  '&[data-highlighted="true"]': {
+    color: styles.colors.action.primary.foreground,
+  },
+  '&[data-highlighted="true"]::before': {
+    backgroundColor: styles.colors.action.primary.background,
+  },
+  '&[aria-disabled="true"]': {
+    opacity: 0.5,
+  },
+  scrollMarginBlock: styles.space.xs,
+  '--rmx-listbox-option-indicator-opacity': '0',
+  '&[hidden]': {
+    display: 'none',
+  },
+  '&[data-listbox-flash="true"], &[data-select-flash="true"], &[data-combobox-flash="true"]': {
+    color: styles.colors.text.primary,
+  },
+  '&[data-listbox-flash="true"]::before, &[data-select-flash="true"]::before, &[data-combobox-flash="true"]::before':
+    {
+      backgroundColor: 'transparent',
+    },
+  '&[aria-selected="true"]': {
+    '--rmx-listbox-option-indicator-opacity': '1',
+  },
+})
+
+const itemIndicatorCss: CSSMixinDescriptor = css({
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flex: '0 0 var(--rmx-ui-item-indicator-width)',
+  width: 'var(--rmx-ui-item-indicator-width)',
+  minWidth: 0,
+  height: 'var(--rmx-ui-item-indicator-width)',
+  marginInlineEnd: 'var(--rmx-ui-item-indicator-gap)',
+  overflow: 'hidden',
+  color: 'currentColor',
+  opacity: 'var(--rmx-listbox-option-indicator-opacity)',
+  '& > svg': {
+    display: 'block',
+    width: '100%',
+    height: '100%',
+  },
+})
+
+const itemLabelCss: CSSMixinDescriptor = css({
+  display: 'inline-flex',
+  alignItems: 'center',
+  flex: '1 1 auto',
+  minWidth: 0,
+  WebkitUserSelect: 'none',
+})
+
+export const popoverSurfaceStyle = [popoverSurfaceCss, popoverSurfaceTransitionCss] as const
+export const listboxIndicatorStyle = itemIndicatorCss
+export const listboxLabelStyle = itemLabelCss
+export const listboxListStyle = listCss
+export const listboxOptionStyle = itemCss