@boxy-design/behaviors

The JavaScript behind Boxy's interactive components, with no framework in it. Menus (keyboard, submenus, type-ahead, context menus), tooltips, toasts, combobox and multi-select, calendar and range picker, slider and stepper, drop zone, composer, kanban boards, resizable panes, the editable data grid, the colour picker, the notification inbox, charts, sparklines and uptime strips, plus tabs, modal dialogs, drawers and the command palette for pages that no framework manages.

It works on the markup every @boxy-design/* package renders: widgets are found by the same classes and data attributes the stylesheet uses, and widgets that arrive later (a framework render, an htmx swap) are picked up.

npm install @boxy-design/behaviors

import { installBehaviors, toast } from "@boxy-design/behaviors";

const uninstall = installBehaviors();          // everything
installBehaviors(document, { features: { tabs: false, dialogs: false } }); // a framework owns those
toast({ title: "Deployment complete", tone: "success" });

Or a plain script: <script src="node_modules/@boxy-design/behaviors/dist/boxy-behaviors.js"></script>.

The framework packages start it for you (<Behaviors />, provideBoxyBehaviors(), ...) with tabs and dialogs off, because they do those natively. You rarely import this package directly.

Events

Changes are reported as bubbling CustomEvents named bx:*. BoxyEventMap types every detail.

| Event | When | detail | |---|---|---| | bx:select | a combobox or multi-select option is chosen or removed | { option, value, label, selected, multi } | | bx:date | a date is picked or cleared | { value } | | bx:range / bx:range-apply | a range is complete or applied | { start, end } | | bx:move | a kanban card is about to move (cancelable) | { card, from, to, index } | | bx:resize | a pane is resized | { size } | | bx:cell-change | a data grid cell is committed | { cell, value, original, valid } | | bx:grid-save / bx:grid-discard | the grid's save bar is used | { changes } | | bx:color | the picker colour changes | { hex } | | bx:files | files are dropped or chosen | { files } | | bx:menu-change | a checkbox or radio menu item flips | { item, checked } | | bx:notify-read / bx:notify-action | an inbox note is read, or one of its buttons used | { note } / { note, action } | | bx:close-request | a modal dialog or drawer is about to close (cancelable) | none | | bx:copy | a copy button copied | { text } |

A cancelable event lets an app that owns the DOM (a framework rendering the cards or the dialog from state) call preventDefault() and make the change itself.

MIT