solid-baseui 0.1.0-alpha.0 → 0.1.0-alpha.2

package/CHANGELOG.md

@@ -0,0 +1,72 @@
+# Changelog
+
+## 0.1.0-alpha.2
+
+### Breaking Changes
+
+- `composeEventHandlers` now accepts direct handlers, bound `[handler, data]`
+  tuples, and `undefined`, rather than bare accessors returning handlers. Replace
+  `composeEventHandlers(() => handleClick)` with `composeEventHandlers(handleClick)`.
+- For replaceable props or conditional handler sources, use
+  `composeEventHandlers(liveEventHandler(() => props.onClick), handleClick)`.
+  Both utilities are exported from `solid-baseui/internals/composeEventHandlers`.
+  Old bare accessors may still typecheck as void-returning handlers, but their
+  returned functions are no longer invoked. Migrate every call before upgrading.
+
+### Fixed
+
+- Preserve Drawer swipe state, observers, and nested progress across unrelated
+  store updates, and retain Popover trigger-handoff animation completion.
+- Compose string and callback-returned string styles correctly in Slider.Track,
+  Slider.Indicator, Slider.Thumb, and Tabs.Indicator.
+- Return a directly attachable native handler from `composeEventHandlers` while
+  exposing Base UI cancellation to composed callbacks. Preserve native input/focus
+  target typing and expose cancellation on composed Toolbar events.
+- Preserve the DOM receiver when NumberField.Input dispatches blur callbacks,
+  including replaceable bound handlers and teardown-time blur.
+- Correct Combobox grid navigation, highlight restoration, controlled input and
+  autofill rollback, popup-input ARIA, RTL End navigation, portal focus, and List
+  exit-animation completion.
+- Preserve Tooltip cursor initialization and reopening, detached registration and
+  hydration state, viewport payload updates, nested timers, and provider cleanup.
+- Preserve Autocomplete form-name ownership across SSR and hydration, and isolate
+  Field context when replacing a popup input.
+- Cancel stale Drawer alignment frames before delayed virtual-keyboard realignment.
+- Improve Combobox grouped-array callback inference for mutable single-select and
+  readonly multiple-select items.
+
+### Verification
+
+- Complete the requested Tooltip, Combobox, Autocomplete, and Drawer test-ledger
+  verification, including additional unit, browser, type, SSR, and hydration cases.
+- The package remains an unstable alpha; this does not establish exhaustive Base UI
+  1.8 parity or physical-device keyboard and gesture behavior.
+
+## 0.1.0-alpha.1
+
+### Breaking Changes
+
+- Replace polymorphic `as` with callback-only `render`. For example, use
+  `<Dialog.Trigger render={(props) => <Button {...props} />}>Open</Dialog.Trigger>`.
+- Put replacement-only attributes and required custom-component props inside the
+  callback. Forward its live props and ref to the final DOM element.
+- Render selection is mount-time. Use conditional JSX inside a stable callback
+  for reactive root changes. JSX-valued render props are not supported.
+- Preserve semantic flags such as `nativeButton={false}` for non-button roots.
+
+### Added
+
+- Export Solid-native `useRender` from the package root and `solid-baseui/use-render`.
+- Provide live DOM props and component state to render callbacks, with native JSX
+  defaults when no callback is supplied.
+- Add custom-component composition, type-contract, SSR, and hydration coverage.
+
+### Fixed
+
+- Avoid Button's dynamic state-attribute spread and unnecessary stable-ref
+  reapplication on disabled-state changes.
+- Preserve Toolbar disabled/focusable semantics independently of render callback
+  presence, and install its owned event bridge before hydration event replay.
+
+The package remains an unstable alpha. Further performance work is deferred;
+benchmarks and profiling artifacts are not included in the published package.

package/README.md

@@ -15,8 +15,8 @@ maintained by MUI or the Base UI team, nor by the SolidJS core team.
 
 ## Install
 
-Released only under the `alpha` dist-tag, so you have to ask for it explicitly —
-there is no `latest` release yet:
+Install explicitly from the `alpha` dist-tag to get the current prerelease.
+There is no stable release:
 
 ```bash
 bun add solid-baseui@alpha
@@ -25,12 +25,15 @@ bun add solid-baseui@alpha
 Peer dependencies:
 
 ```
-solid-js     ^2.0.0-rc.0
-@solidjs/web ^2.0.0-rc.0
+solid-js     ^2.0.0-rc.6
+@solidjs/web ^2.0.0-rc.6
 ```
 
 Solid 2 is itself a release candidate, which is part of why this package is
-alpha.
+alpha. Upgrade both runtimes together and use a compatible Solid 2 compiler.
+RC.6 includes the portal event-delegation fix required by this port; no local
+dependency patch is needed. This workspace uses `@solidjs/vite-plugin@3.0.0-next.38`
+with the RC.6 compiler.
 
 ## Usage
 
@@ -78,17 +81,132 @@ export function App() {
 Every family is available from the root entry point or its own subpath
 (`solid-baseui/dialog`, `solid-baseui/select`, and so on).
 
+Polymorphic parts render their native element by default. To replace it, supply
+a callback and forward its live DOM props, including `ref`, to the final element:
+
+```tsx
+import { Button } from "solid-baseui/button";
+
+<Button
+  nativeButton={false}
+  render={(props, state) => (
+    <a {...props} href="/settings" data-disabled={state.disabled ? "" : undefined} />
+  )}
+>
+  Settings
+</Button>;
+```
+
+The callback receives live object state, not an accessor. Read `state.disabled`
+and supplied props in JSX or reactive computations. Destructuring or eagerly
+copying them during callback setup loses liveness. Always forward props and ref,
+including through custom components, so events, accessibility, focus, and
+registration reach the final DOM node.
+
+## Migrating To 0.1.0-alpha.1
+
+Version `0.1.0-alpha.1` replaces `as` with callback-only `render`. There is no compatibility
+alias, and JSX-valued `render={<a />}` is unsupported. Replace an old
+`<Button as="a" href="/settings" nativeButton={false}>` with the callback above.
+No `Dynamic`, `dynamic()`, or `withoutComponentBinding` adapter is needed: the
+callback writes native or custom-component JSX directly.
+
+- Outer attributes remain typed for the default native element. Put `href` and
+  other replacement-only attributes inside the callback, not on a native-button
+  outer API. Likewise, supply required custom-component props inside the callback,
+  for example `render={(props) => <AppLink {...props} to="/settings" />}`.
+- Keep semantic flags such as `nativeButton={false}` where supported when the
+  final element is not a button. Selecting an element does not automatically
+  select the component's keyboard or disabled policy.
+- Render selection happens at mount. Replacing the `render` prop later does not
+  switch the renderer. To change the root, use conditional JSX inside one stable
+  callback and forward props/ref to every possible final element, for example
+  `render={(props) => <>{compact() ? <span {...props} /> : <div {...props} />}</>}` on a
+  visual part that supports those roots.
+- Put interaction handlers such as `onClick` on the outer Base UI component. It
+  composes caller handlers with its internal behavior. Use `render` for the
+  element, styling, and prop forwarding, not to override supplied event handlers.
+  Custom components used inside `render` should also forward those handlers to
+  the final DOM node.
+- A spread does not compose an overridden ref or class. Preserve supplied values
+  with Solid ref/class arrays when adding your own.
+
+```tsx
+import { Button } from "solid-baseui/button";
+
+<Button
+  onClick={() => console.info("Save activated")}
+  render={(props) => (
+    <button
+      {...props}
+      class={[props.class, "action"]}
+      ref={[props.ref, (element) => { element.dataset.action = "save"; }]}
+    />
+  )}
+>
+  Save
+</Button>;
+```
+
+Avoid `render={(props) => <button {...props} onClick={handleClick} />}`:
+the explicit handler replaces the supplied handler and can break the component's
+internal interaction behavior. Moving the spread last can instead discard your
+handler. Put `onClick={handleClick}` on the outer component so both behaviors are
+preserved without manually composing handlers.
+
+Component authors can import `useRender` from `solid-baseui/use-render` or the
+package root. Its signature is
+`useRender(props, stateAccessor, nativeFallbackCallback)`, returning a local JSX
+component. For example, `const Render = useRender(props, () => state(), (domProps) =>
+<div {...domProps} />)` selects the callback or native default. Pass explicit
+attributes to `<Render>` and spread props with component-only keys omitted last;
+the helper does not build component behavior or merge event handlers for you.
+`ComponentRenderFn` and `ComponentRenderProps` are exported as types from the
+root, `solid-baseui/use-render`, and `solid-baseui/types`.
+
+See [CHANGELOG.md](./CHANGELOG.md) for this alpha's changes.
+
+## Migrating To 0.1.0-alpha.2
+
+Version `0.1.0-alpha.2` changes the internal event-composition API to direct handlers:
+
+```tsx
+import type { JSX } from "@solidjs/web";
+import { omit } from "solid-js";
+import {
+  composeEventHandlers,
+  liveEventHandler,
+} from "solid-baseui/internals/composeEventHandlers";
+
+function CustomButton(props: JSX.ButtonHTMLAttributes<HTMLButtonElement>) {
+  const others = omit(props, "onClick");
+  const onClick = composeEventHandlers<HTMLButtonElement, MouseEvent>(
+    liveEventHandler(() => props.onClick),
+    (event) => event.preventBaseUIHandler(),
+  );
+  return <button type="button" onClick={onClick} {...others} />;
+}
+```
+
+Fixed handlers need no outer function. Use `liveEventHandler` only when a callback
+prop or handler selection can change; it creates a deferred source for the composer,
+not a standalone DOM handler. Sources resolve in order at event time, including
+Solid's `[handler, data]` tuples. Base UI cancellation stops later handlers and
+source resolution; native `preventDefault` has its separate meaning.
+
+This is a breaking change from alpha.1. Bare `() => handler` arguments must be
+converted to direct handlers or explicit live sources. Handler return values are
+ignored, so an old accessor can still typecheck without doing the intended work.
+
 ## Status
 
-Most of the port is done: 40 public subpaths are shipped, backed by the shared P0
-and overlay foundations. Not everything is finished:
+All 38 component families in the pinned inventory are implemented and exported.
+The requested Tooltip, Combobox, Autocomplete, and Drawer verification is complete;
+the project is now in stabilization and performance optimization.
 
-| Area                   | State                                                               |
-| ---------------------- | ------------------------------------------------------------------- |
-| Tooltip                | Paused — nested-timer, cursor-axis, and animation cases outstanding |
-| Combobox, Autocomplete | In progress                                                         |
-| Drawer                 | Behavior complete; parts of the upstream test ledger unclassified   |
-| Remaining families     | Done                                                                |
+Implementation coverage is not exhaustive Base UI 1.8 parity or production stability.
+The optional `unstable-use-media-query` utility is not implemented and is outside
+the 38-component scope.
 
 A component is only treated as done when its upstream Base UI test ledger is
 classified and represented in the Solid suite. Per-family status, the decisions
@@ -103,8 +221,8 @@ This is a port, not a transliteration. Where React idioms do not carry over, the
 Solid-native equivalent wins:
 
 - Components use `class`, not `className`.
-- Polymorphic components use `as` with `Dynamic`. There is no React-style
-  `render` prop.
+- Polymorphic components use callback-only `render` with native JSX defaults.
+  React element cloning and JSX-valued render props are not supported.
 - Provider hooks return accessors, because replacing a Solid context value is not
   reactive.
 - Refs are ordinary props and compose through Solid ref arrays. There is no