Adopts a DOM node into React's tree inside an explicitly sized host div.
Used by adapters that bind charts whose rendered element has no intrinsic
size (e.g. an AnyChart <svg> whose dimensions live in internal layout
state rather than HTML width/height attributes). The MaidrComponent
focusable wrapper uses width: fit-content; with display: contents on
the adapter and an intrinsic-less child, the wrapper computes to 0×0
pixels and becomes unfocusable. Wrapping the node in a real layout box
with explicit dimensions keeps the wrapper measurable and focusable.
Activated by stamping data-maidr-host-width and data-maidr-host-height
on the bound element before dispatching maidr:bindchart.
Mirrors the Chart.js adapter's CanvasHost pattern.
Adopts a DOM node into React's tree inside an explicitly sized host div.
Used by adapters that bind charts whose rendered element has no intrinsic size (e.g. an AnyChart
<svg>whose dimensions live in internal layout state rather than HTML width/height attributes). The MaidrComponent focusable wrapper useswidth: fit-content; withdisplay: contentson the adapter and an intrinsic-less child, the wrapper computes to0×0pixels and becomes unfocusable. Wrapping the node in a real layout box with explicit dimensions keeps the wrapper measurable and focusable.Activated by stamping
data-maidr-host-widthanddata-maidr-host-heighton the bound element before dispatchingmaidr:bindchart.Mirrors the Chart.js adapter's
CanvasHostpattern.