@octanejs/cmdk
v0.1.30
Published
cmdk for the octane renderer — the cmdk 1.1.1 command-menu source ported onto octane's hooks and native events: the Command namespace, useCommandState, and the DOM-authoritative filter/selection model, built on @octanejs/radix primitives.
Downloads
4,337
Readme
@octanejs/cmdk
cmdk — the fast, composable command menu — ported to the Octane renderer.
This is an Octane port of [email protected]. It preserves cmdk's public API (the
Command namespace, useCommandState, defaultFilter) and its
DOM-authoritative filter/selection model, adapting only the React-renderer
wiring to Octane (native events, ref-as-prop, useId), and building on
@octanejs/radix for the Radix primitives cmdk depends on.
Alpha. The whole component set is implemented —
Command,Command.Input,Command.List,Command.Item,Command.Group,Command.Separator,Command.Dialog,Command.Empty,Command.Loading, plususeCommandStateanddefaultFilter— with filtering, score sorting, keyboard navigation, controlled modes, and SSR + hydration.asChildis the one unsupported prop. A differential suite runs the same fixture through this port and the published[email protected]on React and asserts byte-equal HTML for its declared cases. The canonical upstream Playwright suite is vendored but not yet adapted exhaustively, so parity remains recorded-unverified. SeeUPSTREAM.md,docs/cmdk-port-plan.mdand the authoritativedocs/bindings-status.md.
Divergences from React cmdk
Standard Octane binding adaptations (see
docs/react-parity-migration-plan.md):
Command.Inputdrives search from the nativeonInputevent; the publiconValueChange(search)API is unchanged.- Components take
refas a normal prop (Octane has noforwardRef). - Callbacks (
onSelect, pointer, keyboard) observe native DOM events. - Item/group values come from the
valueprop or the renderedtextContent; cmdk's string-child inspection is dropped (Octane's compiled children are opaque). asChildis not supported: cmdk clones the child element and re-parents the component's own content into it, which has no faithful equivalent over opaque compiled children.- Group reordering resolves the group element by its registered value; upstream
looks it up by
[data-value="<groupId>"], which can never match. Command.Dialogis built on@octanejs/radix's Dialog; ids come fromoctane'suseId(prefixed to match upstream's@radix-ui/react-id). RadixPrimitive/Slotare not used — withoutasChildthere is nothing to slot, so every component renders its own host element.Command.Emptyand a visible item are mutually exclusive, including forforceMountitems and during SSR. Upstream can render both at once.forceMountitems are full citizens of registration: they release the value they registered on unmount, and removing the selected one moves the selection on. Upstream never registers them, so it does neither.Command.Dialogalso acceptsdefaultOpenandmodal; upstream forwards onlyopen/onOpenChange.- Score ranking uses CSS
orderwhile filtering instead of physically moving renderer-owned nodes. Clearing the search removes those declarations and restores source order; DOM-order selectors can differ from visual order while a filter is active.
License
MIT. The vendored command-score implementation retains its upstream MIT
license.
