@duro-app/ui 5.21.0 → 5.23.0

package/src/components/VirtualList/props.ts

@@ -0,0 +1,31 @@
+import type {ReactNode} from 'react'
+import type {SizeToken} from '@duro-app/tokens/keys'
+import type {Length} from '../../shared/length'
+
+export interface VirtualListProps<T> {
+  items: readonly T[]
+  /** Each row's starting height estimate, a size token; rows are then measured. */
+  estimateSize: SizeToken
+  renderItem: (item: T, index: number) => ReactNode
+  /** A stable key per item (an id), so rows keep their measurement as items change. */
+  getKey: (item: T, index: number) => string | number
+  /** Rows rendered beyond each edge of the view. Default 5 */
+  overscan?: number
+  /**
+   * `end` starts at the last item and stays pinned to the bottom while new
+   * items arrive, as long as the reader is at the bottom (a transcript, a log).
+   * Default `start`.
+   */
+  anchor?: 'start' | 'end'
+  /**
+   * Called once each time the reader scrolls to within 44px (touchTarget) of the
+   * start (load older history). It fires again only after they move away.
+   * A list too short to scroll calls it once for each new first item or length, until it fills.
+   * Prepending items keeps the first visible row where it was on screen.
+   */
+  onStartReached?: () => void
+  /** Cap the list's height; without it, it fills its parent. */
+  maxHeight?: Length
+  /** The list's accessible name. */
+  'aria-label': string
+}

package/src/components/VirtualList/styles.css.ts

@@ -1,4 +1,6 @@
 import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 export const styles = css.create({
   // The scroll container: it fills its parent (a pane, a flex column) by
@@ -10,6 +12,11 @@ export const styles = css.create({
     minHeight: 0,
     overflowY: 'auto',
     overscrollBehavior: 'contain',
+    // Focusable so the keyboard can scroll rows that hold no control (WCAG 2.1.1).
+    outlineWidth: {default: 0, ':focus-visible': borders.focusRing},
+    outlineStyle: {default: 'none', ':focus-visible': 'solid'},
+    outlineColor: {default: 'transparent', ':focus-visible': colors.accent},
+    outlineOffset: {default: 0, ':focus-visible': `calc(-1 * ${borders.focusRing})`},
   },
   scrollMax: (maxHeight: number | string) => ({
     height: 'auto',

package/src/index.native.ts

@@ -27,6 +27,11 @@ export {Text, type TextVariant, type TextColor} from './components/Text/Text'
 export {TextLink, type TextLinkVariant} from './components/TextLink/TextLink'
 export {Textarea, type TextareaVariant} from './components/Textarea/Textarea'
 
+// Text and layout
+export {CodeBlock, type CodeBlockProps} from './components/CodeBlock/CodeBlock'
+export {Prose} from './components/Prose/Prose'
+export {Toolbar, type ToolbarProps} from './components/Toolbar/Toolbar'
+
 // Form field wrappers (RN-safe — used by Input/Textarea/Checkbox)
 export {Field} from './components/Field/Field'
 export {InputGroup} from './components/InputGroup/InputGroup'
@@ -57,6 +62,8 @@ export {Tree} from './components/Tree/Tree'
 export {Select} from './components/Select/Select'
 export {Combobox} from './components/Combobox/Combobox'
 export {Listbox} from './components/Listbox/Listbox'
+// A FlatList with the web props; prepend keeps position.
+export {VirtualList, type VirtualListProps} from './components/VirtualList/VirtualList'
 // The platform's own scroll indicator: Scrollbar and Thumb draw nothing.
 export {ScrollArea} from './components/ScrollArea/ScrollArea'
 export type {ListboxAnchorProps, ListboxMaxHeight} from './components/Listbox/Listbox'
@@ -66,6 +73,7 @@ export {SplitPane} from './components/SplitPane/SplitPane'
 export {
   AppShell,
   type AppShellCollapse,
+  type AppShellScroll,
   type AppShellRailState,
 } from './components/AppShell/AppShell'
 

package/src/index.ts

@@ -13,6 +13,7 @@ export {Alert, type AlertVariant} from './components/Alert/Alert'
 export {
   AppShell,
   type AppShellCollapse,
+  type AppShellScroll,
   type AppShellRailState,
 } from './components/AppShell/AppShell'
 export {Aside} from './components/Aside/Aside'