@duro-app/ui 0.17.0 → 0.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -52,7 +52,7 @@
     }
   },
   "dependencies": {
-    "@duro-app/tokens": "^0.17.0"
+    "@duro-app/tokens": "^0.18.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/ActionBar/ActionBar.tsx

@@ -1,7 +1,6 @@
-import type {ReactNode} from 'react'
-import {createPortal} from 'react-dom'
+import {useEffect, useCallback, type ReactNode} from 'react'
 import {html} from 'react-strict-dom'
-import {useOverlayContainer} from '../ThemeProvider/ThemeProvider'
+import {useActionBarStack} from './ActionBarProvider'
 import {styles} from './styles.css'
 
 export interface ActionBarProps {
@@ -19,7 +18,7 @@ export interface ActionBarProps {
   children: ReactNode
 }
 
-function ActionBarInner({
+function ActionBarContent({
   selectedItemCount,
   selectedLabel,
   isEmphasized = false,
@@ -27,14 +26,10 @@ function ActionBarInner({
   dismissible = true,
   children,
 }: ActionBarProps) {
-  const container = useOverlayContainer()
-
-  if (selectedItemCount === 0) return null
-
   const countStr = selectedItemCount === 'all' ? 'All' : `${selectedItemCount}`
   const label = selectedLabel ? selectedLabel(countStr) : `${countStr} selected`
 
-  const bar = (
+  return (
     <html.div
       role="toolbar"
       aria-label={label}
@@ -64,12 +59,33 @@ function ActionBarInner({
       )}
     </html.div>
   )
+}
+
+function ActionBarInner(props: ActionBarProps) {
+  const {selectedItemCount} = props
+  const stack = useActionBarStack()
+  const isActive = selectedItemCount !== 0
+
+  const renderBar = useCallback(() => <ActionBarContent {...props} />, [props])
+
+  useEffect(() => {
+    if (!stack.managed) return
+    if (isActive) {
+      stack.register(renderBar)
+    } else {
+      stack.unregister()
+    }
+    return () => stack.unregister()
+  }, [stack, isActive, renderBar])
 
-  if (container) {
-    return createPortal(bar, container)
+  // If no provider, fall back to standalone rendering
+  if (!stack.managed) {
+    if (!isActive) return null
+    return <ActionBarContent {...props} />
   }
 
-  return bar
+  // Managed by provider — rendering happens there
+  return null
 }
 
 export const ActionBar = ActionBarInner

package/src/components/ActionBar/ActionBarProvider.tsx

@@ -0,0 +1,100 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useId,
+  useMemo,
+  useRef,
+  useSyncExternalStore,
+  type ReactNode,
+} from 'react'
+
+interface ActionBarEntry {
+  id: string
+  render: () => ReactNode
+}
+
+interface ActionBarStore {
+  subscribe: (cb: () => void) => () => void
+  getSnapshot: () => readonly ActionBarEntry[]
+  push: (id: string, render: () => ReactNode) => void
+  update: (id: string, render: () => ReactNode) => void
+  remove: (id: string) => void
+}
+
+function createActionBarStore(): ActionBarStore {
+  let entries: ActionBarEntry[] = []
+  const listeners = new Set<() => void>()
+
+  const notify = () => listeners.forEach((l) => l())
+
+  return {
+    subscribe: (cb) => {
+      listeners.add(cb)
+      return () => listeners.delete(cb)
+    },
+    getSnapshot: () => entries,
+    push: (id, render) => {
+      entries = [...entries, {id, render}]
+      notify()
+    },
+    update: (id, render) => {
+      entries = entries.map((e) => (e.id === id ? {id, render} : e))
+      notify()
+    },
+    remove: (id) => {
+      entries = entries.filter((e) => e.id !== id)
+      notify()
+    },
+  }
+}
+
+const ActionBarContext = createContext<ActionBarStore | null>(null)
+
+export function ActionBarProvider({children}: {children: ReactNode}) {
+  const storeRef = useRef<ActionBarStore>(null)
+  if (storeRef.current === null) {
+    storeRef.current = createActionBarStore()
+  }
+  const store = storeRef.current
+
+  const entries = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot)
+  const topEntry = entries.length > 0 ? entries[entries.length - 1] : null
+
+  return (
+    <ActionBarContext.Provider value={store}>
+      {children}
+      {topEntry?.render()}
+    </ActionBarContext.Provider>
+  )
+}
+
+export function useActionBarStack() {
+  const store = useContext(ActionBarContext)
+  const id = useId()
+
+  const register = useCallback(
+    (render: () => ReactNode) => {
+      if (!store) return
+      const entries = store.getSnapshot()
+      if (entries.some((e) => e.id === id)) {
+        store.update(id, render)
+      } else {
+        store.push(id, render)
+      }
+    },
+    [store, id],
+  )
+
+  const unregister = useCallback(() => {
+    store?.remove(id)
+  }, [store, id])
+
+  const isTop = useMemo(() => {
+    if (!store) return false
+    const entries = store.getSnapshot()
+    return entries.length > 0 && entries[entries.length - 1].id === id
+  }, [store, id])
+
+  return {id, register, unregister, managed: store !== null, isTop}
+}

package/src/components/Field/Field.tsx

@@ -50,7 +50,16 @@ function ControlledRoot({
       },
       errorMessage: fieldState.error?.message,
     }),
-    [id, invalid, field.value, field.onChange, field.onBlur, field.ref, field.name, fieldState.error],
+    [
+      id,
+      invalid,
+      field.value,
+      field.onChange,
+      field.onBlur,
+      field.ref,
+      field.name,
+      fieldState.error,
+    ],
   )
 
   return (

package/src/components/Form/Form.stories.tsx

@@ -93,11 +93,7 @@ export const ValidationOnBlur: Story = {
   name: 'Validation — on blur',
   render: () => (
     <html.div style={wrapStyles.wrap}>
-      <Form
-        schema={LoginSchema}
-        defaultValues={{username: '', password: ''}}
-        onSubmit={fn()}
-      >
+      <Form schema={LoginSchema} defaultValues={{username: '', password: ''}} onSubmit={fn()}>
         <Fieldset.Root gap="md">
           <Field.Root name="username">
             <Field.Label>Username</Field.Label>
@@ -131,10 +127,13 @@ export const ValidationOnBlur: Story = {
       await expect(alert).toHaveTextContent('Username must be at least 3 characters')
     })
 
-    await step('Fix username by typing more — error clears (reValidateMode: onChange)', async () => {
-      await userEvent.type(usernameInput, 'c') // now "abc"
-      expect(canvas.queryByText('Username must be at least 3 characters')).not.toBeInTheDocument()
-    })
+    await step(
+      'Fix username by typing more — error clears (reValidateMode: onChange)',
+      async () => {
+        await userEvent.type(usernameInput, 'c') // now "abc"
+        expect(canvas.queryByText('Username must be at least 3 characters')).not.toBeInTheDocument()
+      },
+    )
 
     await step('Blur empty password — error appears', async () => {
       await userEvent.click(passwordInput)
@@ -150,11 +149,7 @@ export const WithTextarea: Story = {
   name: 'With Textarea',
   render: () => (
     <html.div style={wrapStyles.wrap}>
-      <Form
-        schema={FeedbackSchema}
-        defaultValues={{email: '', message: ''}}
-        onSubmit={fn()}
-      >
+      <Form schema={FeedbackSchema} defaultValues={{email: '', message: ''}} onSubmit={fn()}>
         {({formState}) => (
           <Fieldset.Root gap="md">
             <Field.Root name="email">
@@ -193,11 +188,7 @@ export const SuccessfulSubmit: Story = {
     const onSubmit = fn()
     return (
       <html.div style={wrapStyles.wrap}>
-        <Form
-          schema={LoginSchema}
-          defaultValues={{username: '', password: ''}}
-          onSubmit={onSubmit}
-        >
+        <Form schema={LoginSchema} defaultValues={{username: '', password: ''}} onSubmit={onSubmit}>
           <Fieldset.Root gap="md">
             <Field.Root name="username">
               <Field.Label>Username</Field.Label>

package/src/components/ThemeProvider/ThemeProvider.tsx

@@ -1,4 +1,4 @@
-import {type ReactNode, createContext, useContext, useRef} from 'react'
+import {type ReactNode} from 'react'
 import {css, html} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {lightTheme, lightShadows} from '@duro-app/tokens/themes/light.css'
@@ -27,26 +27,9 @@ const styles = css.create({
 // concrete VarGroup lacks the generic index signature. This is a known typing gap.
 type DivStyle = Parameters<typeof html.div>[0]['style']
 
-/** Context providing a portal target inside the themed tree. */
-const OverlayContainerContext = createContext<React.RefObject<HTMLDivElement | null> | null>(null)
-
-/** Returns the overlay container element for portals (inside the ThemeProvider). */
-export function useOverlayContainer(): HTMLElement {
-  const ref = useContext(OverlayContainerContext)
-  return ref?.current ?? (typeof document !== 'undefined' ? document.body : null!)
-}
-
 export function ThemeProvider({theme = 'dark', children}: ThemeProviderProps) {
-  const overlayRef = useRef<HTMLDivElement>(null)
   const overrides = themeMap[theme]
   const themeStyles = [overrides?.[0], overrides?.[1], styles.root] as DivStyle
 
-  return (
-    <html.div style={themeStyles}>
-      <OverlayContainerContext.Provider value={overlayRef}>
-        {children}
-        <html.div ref={overlayRef} />
-      </OverlayContainerContext.Provider>
-    </html.div>
-  )
+  return <html.div style={themeStyles}>{children}</html.div>
 }

package/src/index.ts

@@ -3,6 +3,7 @@ import './strict.css'
 
 // Components
 export {ActionBar, type ActionBarProps} from './components/ActionBar/ActionBar'
+export {ActionBarProvider} from './components/ActionBar/ActionBarProvider'
 export {Alert, type AlertVariant} from './components/Alert/Alert'
 export {Icon, type IconName} from './components/Icon'
 export {Badge, type BadgeVariant, type BadgeSize} from './components/Badge/Badge'
@@ -35,11 +36,7 @@ export {
 export {Table, type TableVariant, type TableSize} from './components/Table/Table'
 export {Tabs} from './components/Tabs/Tabs'
 export {Textarea, type TextareaVariant} from './components/Textarea/Textarea'
-export {
-  ThemeProvider,
-  useOverlayContainer,
-  type ThemeName,
-} from './components/ThemeProvider/ThemeProvider'
+export {ThemeProvider, type ThemeName} from './components/ThemeProvider/ThemeProvider'
 export {Text, type TextVariant, type TextColor} from './components/Text/Text'
 export {Toggle, type ToggleSize} from './components/Toggle/Toggle'
 export {ToggleGroup} from './components/ToggleGroup/ToggleGroup'