@allxsmith/bestax-bulma 5.60.0 → 5.62.0

package/dist/types-cjs/form/TreeSelect.d.ts

@@ -0,0 +1,308 @@
+import React from 'react';
+import type { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+import type { FormFieldProps } from './fieldProps.js';
+import type { PickerPosition } from './_pickerInternals/pickerTypes.js';
+/**
+ * One node in a TreeSelect's `data`: Combobox's item fields plus
+ * TreeView.Item's, with `children` for the nodes under it.
+ */
+export interface TreeItemData {
+    /** **Required.** What the value holds and `name` posts. Unique in the whole tree. */
+    value: string;
+    /** What the row, the field and the tags show, and what search matches. The `value` when it's left out. */
+    label?: string;
+    /** Reachable, but never picked, checked, opened or closed. */
+    disabled?: boolean;
+    /** A picture before the label: an `Icon` name, or a node. Hidden from assistive tech. */
+    icon?: React.ReactNode;
+    /** The nodes under this one. */
+    children?: TreeItemData[];
+    /** Shows the node as a parent before its children are known, for a branch that loads when it opens. */
+    hasChildren?: boolean;
+    /** Its children are on their way: an open branch ends in a row that says so, and the live region says it too. */
+    isLoading?: boolean;
+    /** Its children didn't load: an open branch ends in this message, with a Retry button when there's an `onRetry`. */
+    loadError?: React.ReactNode;
+    /** Called by the Retry button on a failed load's row. Set `isLoading` while the retry runs. */
+    onRetry?: () => void;
+}
+/** What a checked branch puts in the value a check makes. */
+export type TreeSelectCheckedStrategy = 'child' | 'parent' | 'all';
+/** The visible and accessible strings, in your app's language. */
+export interface TreeSelectLabels {
+    /**
+     * Names the panel and the tree in it.
+     * @defaultValue the field's label
+     */
+    choose?: string;
+    /**
+     * Names the search box.
+     * @defaultValue 'Search'
+     */
+    search?: string;
+    /**
+     * Names the clear button.
+     * @defaultValue 'Clear'
+     */
+    clear?: string;
+    /**
+     * What a loading branch's row says, as on TreeView.
+     * @defaultValue 'Loading…'
+     */
+    loading?: string;
+    /**
+     * The Retry button's text on a failed load's row, as on TreeView.
+     * @defaultValue 'Retry'
+     */
+    retry?: string;
+    /**
+     * What the live region says when an open branch starts loading, built
+     * from its name, as on TreeView.
+     * @defaultValue name => `Loading ${name}`
+     */
+    loadingAnnouncement?: (name: string) => string;
+    /**
+     * What the live region says when that load finishes, as on TreeView.
+     * @defaultValue name => `${name} loaded`
+     */
+    loadedAnnouncement?: (name: string) => string;
+}
+/**
+ * What every TreeSelect takes. The helper props and the other attributes
+ * land on the root `<div>`, as Combobox's do, and the `ref` on the field.
+ */
+interface TreeSelectBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'onChange' | 'defaultValue' | 'children'>, Omit<BulmaClassesProps, 'color'>, FormFieldProps {
+    /** **Required.** The tree, as nodes nested through `children`. */
+    data: TreeItemData[];
+    /**
+     * The field's label, which names the field through `htmlFor`, and the
+     * panel and the tree in it through `aria-labelledby`. Dropped inside an
+     * outer `Field`, whose label names them instead.
+     */
+    label?: React.ReactNode;
+    /** The field's `id`, which the label then points at. The panel's is this one with `-panel` after it. */
+    id?: string;
+    /** Names the field, and the panel and the tree, in place of a `label`. */
+    'aria-label'?: string;
+    /** The ids of what names the field, and the panel and the tree, in place of a `label`. */
+    'aria-labelledby'?: string;
+    /** The ids of what describes the field, ahead of the tags. */
+    'aria-describedby'?: string;
+    /** The open branches' values when you hold the state, as TreeView's `expanded`. */
+    expanded?: string[];
+    /** The branches open to begin with, when TreeSelect holds its own state. */
+    defaultExpanded?: string[];
+    /**
+     * Called with the new list whenever a branch opens or closes, opening the
+     * panel on the picked item's branch included. Fetch a lazy branch's
+     * children from here. The branches a search opens aren't in it.
+     */
+    onExpandedChange?: (expanded: string[]) => void;
+    /** Whether the panel is open, controlled: opening and closing then only call `onOpenChange`. */
+    open?: boolean;
+    /** The panel is open to begin with. */
+    defaultOpen?: boolean;
+    /** Called with the new state when the panel opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Puts a search box at the top of the panel. It matches labels, keeps a
+     * match's ancestors and the nodes under it, and opens every branch with a
+     * match. A printable key on the field opens the panel with it in the box,
+     * and the search empties when the panel closes.
+     */
+    searchable?: boolean;
+    /** The search text when you hold the state. */
+    query?: string;
+    /** The search text to begin with. */
+    defaultQuery?: string;
+    /** Called with the search text as it changes. */
+    onQueryChange?: (query: string) => void;
+    /**
+     * Whether a node matches the search, in place of the locale-aware match on
+     * its label. It's handed the search text trimmed, the node, and its path
+     * from the top node down, the node last, as Cascader's `filter` is. A
+     * match's ancestors stay either way. The search runs again when the search
+     * text or `data` changes, not when only this does, so one written inline
+     * costs nothing.
+     */
+    filter?: (query: string, item: TreeItemData, path: TreeItemData[]) => boolean;
+    /** What the panel shows when the search matches nothing, such as "No folders match". Announced once. */
+    empty?: React.ReactNode;
+    /** Renders a row's content in place of its label. The field and the tags still show the label. */
+    itemTemplate?: (item: TreeItemData) => React.ReactNode;
+    /** What the field shows while nothing is picked. */
+    placeholder?: string;
+    /** A form field name. A hidden input posts the value, or one per value in the checkbox modes. */
+    name?: string;
+    /** The id of the form the hidden inputs belong to, when it isn't an ancestor. */
+    form?: string;
+    /**
+     * A value is needed: the field is `aria-required`, and the form won't
+     * submit while nothing is picked. The browser's message points at the
+     * field, which shows focus, and the next key goes to it.
+     */
+    required?: boolean;
+    /** The field can't be used: it can't be focused or opened, its tags lose their buttons, and its hidden inputs don't post. */
+    disabled?: boolean;
+    /**
+     * Shows a clear button at the field's inline end while something it can
+     * take off is picked. It leaves checked disabled items, which no control
+     * unchecks.
+     */
+    clearable?: boolean;
+    /** Bulma color modifier for the field. */
+    color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+    /** The field's size, which the tree in the panel follows. */
+    size?: 'small' | 'medium' | 'large';
+    /** Rounds the field's corners (Bulma's `is-rounded`). */
+    isRounded?: boolean;
+    /**
+     * Where the panel opens, relative to the field, as on the pickers.
+     * @defaultValue 'bottom-left'
+     */
+    position?: PickerPosition;
+    /** Renders the panel through a portal, into a `ConfigProvider`'s `portalContainer`, `document.body` by default. */
+    appendToBody?: boolean;
+    /** The visible and accessible strings, in your app's language. */
+    labels?: TreeSelectLabels;
+}
+/** Props for a TreeSelect that picks one item. */
+export interface TreeSelectSingleProps extends TreeSelectBaseProps {
+    /**
+     * `'single'`: one item, picked with Enter, Space or a click on its row.
+     * `'checkbox'`: any number, with a box on every item. A check reaches every
+     * enabled item under it, and a parent with some of them checked is mixed.
+     * `'checkbox-independent'`: any number, each box checking its own item, so
+     * a parent means the parent alone (Mantine's and Ant Design's
+     * `checkStrictly`). The checkbox modes show the value as tags.
+     */
+    selectionMode?: 'single';
+    /**
+     * The value when you hold the state: in `'single'` the picked item's
+     * value, or `null` for none, and in the checkbox modes the checked values.
+     * In `'checkbox'` a parent's value checks its whole branch, so the list any
+     * `checkedStrategy` gives checks the same boxes.
+     */
+    value?: string | null;
+    /** The value to begin with, when TreeSelect holds its own state: a value or `null`, or a list in the checkbox modes. */
+    defaultValue?: string | null;
+    /**
+     * Called with the new value: in `'single'` the picked item's value, or
+     * `null` when it's cleared, and in the checkbox modes the new list, after a
+     * check, an uncheck, a tag's button or the clear button, each shaped by
+     * `checkedStrategy`. A reset of the field's form calls it too, with
+     * `defaultValue` as it was given, or with `null` or `[]` when you hold
+     * the value, for you to set.
+     */
+    onChange?: (value: string | null) => void;
+    /**
+     * A parent's row picks the parent. `false` makes the row, Enter and Space
+     * open it instead, so only leaves are picked.
+     * @defaultValue true
+     */
+    parentsSelectable?: boolean;
+    /**
+     * Closes the panel after a pick and puts focus back on the field.
+     * @defaultValue true
+     */
+    closeOnSelect?: boolean;
+    /** @internal Read with the checkbox modes only. */
+    checkedStrategy?: never;
+    /** @internal Read with the checkbox modes only. */
+    ariaCloseLabel?: never;
+}
+/** Props for a TreeSelect with a box on every item. */
+export interface TreeSelectCheckboxProps extends TreeSelectBaseProps {
+    /**
+     * `'checkbox'`: a check reaches every enabled item under it, and a parent
+     * with some of them checked is mixed. `'checkbox-independent'`: each box
+     * checks its own item, so a parent means the parent alone.
+     */
+    selectionMode: 'checkbox' | 'checkbox-independent';
+    /**
+     * The checked values when you hold the state. In `'checkbox'`, a parent's
+     * value checks its whole branch, so the list any `checkedStrategy` gives
+     * checks the same boxes.
+     */
+    value?: string[];
+    /** The values checked to begin with, when TreeSelect holds its own state. */
+    defaultValue?: string[];
+    /**
+     * Called with the new list after a check, an uncheck, a tag's button or
+     * the clear button, shaped by `checkedStrategy`, and after a reset of the
+     * field's form, with `defaultValue` as given, or `[]` when you hold the
+     * value.
+     */
+    onChange?: (value: string[]) => void;
+    /**
+     * What a checked branch puts in the value, in `'checkbox'`: `'child'` its
+     * leaves, `'parent'` its topmost checked item, `'all'` every checked item,
+     * parents included. A checked disabled item is in all three, since only
+     * its own value checks it. It shapes the value a check, an uncheck, a
+     * tag's button or the clear button makes, which `onChange` reports, and
+     * not `defaultValue`, a value you pass or the one a form reset puts back.
+     * The tags and the hidden
+     * inputs show the value as it's held, so a value you pass shows as you
+     * pass it, and a branch that loads later changes nothing the form posts.
+     * `'checkbox-independent'` always reports exactly the checked items.
+     * @defaultValue 'child'
+     */
+    checkedStrategy?: TreeSelectCheckedStrategy;
+    /** Names each tag's button, in place of "Remove" and the item's label, as on Combobox. */
+    ariaCloseLabel?: string;
+    /** @internal Read with `'single'` only. */
+    parentsSelectable?: never;
+    /** @internal Read with `'single'` only: the panel stays open while boxes are checked. */
+    closeOnSelect?: never;
+}
+/**
+ * Props for the TreeSelect component. The helper props and the other
+ * attributes land on the `div.tree-select` around the field, and the `ref`
+ * on the field. It renders the `Field` and the label itself, unless an outer
+ * `Field` already does.
+ *
+ * @extraProp {React.Ref<HTMLInputElement>} [ref] - Ref forwarded to the field, the read-only `<input role="combobox">`.
+ */
+export type TreeSelectProps = TreeSelectSingleProps | TreeSelectCheckboxProps;
+/**
+ * The `TreeSelect` component is a form field whose options are a tree, such as categories, places or teams: it opens a panel holding a real `TreeView`, picks one item or checks a branch at a time, and searches labels.
+ *
+ * The field is a read-only `role="combobox"` that opens a dialog, wired as
+ * DateInput's is, so focus moves into the tree for real and the tree keeps
+ * TreeView's keys, type-ahead and spoken output. The tree is given as `data`,
+ * so the field and the tags can name what's picked while the panel is shut,
+ * and on the server.
+ *
+ * `selectionMode` picks the kind. `'single'` picks one item and closes. With
+ * `'checkbox'`, a check reaches every enabled item under it, closed or hidden
+ * by a search, and `checkedStrategy` decides what the value holds: the
+ * leaves, the topmost checked items or every one. With
+ * `'checkbox-independent'`, each box is its own item's, so a parent means
+ * itself alone (Mantine's and Ant Design's `checkStrictly`). The value shows
+ * as tags under the field.
+ *
+ * A value no node has is kept and shown as it is, with a warning in
+ * development, so a value under a branch that hasn't loaded survives until
+ * it does.
+ *
+ * @function
+ * @param {TreeSelectProps} props - Props for the TreeSelect component.
+ * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the field.
+ * @returns {JSX.Element} The field, its tags and its panel, in a `Field` with the label unless one is around it.
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/combobox/ | APG Combobox Pattern}
+ *
+ * @example
+ * <TreeSelect
+ *   label="Save to"
+ *   data={[
+ *     { value: 'docs', label: 'Documents', children: [{ value: 'invoices', label: 'Invoices' }] },
+ *     { value: 'photos', label: 'Photos' },
+ *   ]}
+ *   searchable
+ * />
+ *
+ * @example
+ * <TreeSelect label="Regions" selectionMode="checkbox" checkedStrategy="parent" data={regions} />
+ */
+export declare const TreeSelect: React.ForwardRefExoticComponent<TreeSelectProps & React.RefAttributes<HTMLInputElement>>;
+export default TreeSelect;

package/dist/types-cjs/form/_pickerInternals/PickerPopover.d.ts

@@ -35,6 +35,14 @@ export interface PickerPopoverProps {
      * `LocaleProvider`'s: the picker's own, from `usePickerLocaleScope`.
      */
     localeScope?: PortalLocale;
+    /**
+     * At least as wide as the anchor: in place through its partial's
+     * `has-anchor-width` rule, which needs the anchor to be the element it's
+     * placed against, and portaled through the anchor's width set inline.
+     */
+    matchWidth?: boolean;
+    /** Placed again after each render, for content that changes size while it's open. */
+    followContent?: boolean;
 }
 export declare const PickerPopover: React.FC<PickerPopoverProps>;
 export default PickerPopover;

package/dist/types-cjs/form/_selectInternals/DialogSelect.d.ts

@@ -0,0 +1,86 @@
+import React from 'react';
+import { type BulmaClassesProps } from '../../helpers/useBulmaClasses.js';
+import type { FormFieldProps } from '../fieldProps.js';
+import { type PickerPosition } from '../_pickerInternals/pickerTypes.js';
+/** What names the panel, for what's in it to take as well. */
+export interface PanelName {
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+/** Props for the field a tree picker opens its panel from. */
+export interface DialogSelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'onChange' | 'defaultValue' | 'children'>, Omit<BulmaClassesProps, 'color'>, FormFieldProps {
+    /** The component's name, for development warnings. */
+    component: string;
+    /** The root's own class, before any prefix, such as `tree-select`. */
+    rootClass: string;
+    /** The panel's own class, beside `picker-popover`, before any prefix. */
+    panelClass: string;
+    /** What the field shows. */
+    text: string;
+    /** What `name` posts, a hidden input each. */
+    values: string[];
+    /** Something is picked: `required` is met, and the clear button shows. */
+    hasValue: boolean;
+    /** Whether the panel is open. */
+    open: boolean;
+    /**
+     * Asked to open or close the panel: by a click on the field, its keys,
+     * Escape, Alt+Up, a press outside and the clear button.
+     */
+    onOpenChange: (open: boolean) => void;
+    /**
+     * Called once a reset of the field's form has gone ahead, so the picker
+     * can put its value back.
+     */
+    onFormReset: () => void;
+    /**
+     * A printable key on the field. Returns whether it used the key, as a
+     * search box opening with it does.
+     */
+    onPrintableKey?: (key: string) => boolean;
+    /** Empties the value, from the clear button. */
+    onClear: () => void;
+    /** Shows the clear button while something is picked. */
+    clearable?: boolean;
+    /** Names the clear button. */
+    clearLabel: string;
+    /** Names the panel in place of the field's label. */
+    chooseLabel?: string;
+    placeholder?: string;
+    name?: string;
+    form?: string;
+    required?: boolean;
+    /** Already including a disabled `Fieldset` around it. */
+    disabled: boolean;
+    color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+    size?: 'small' | 'medium' | 'large';
+    isRounded?: boolean;
+    position?: PickerPosition;
+    appendToBody?: boolean;
+    /** Holds the field, which focus goes back to. */
+    inputRef: React.RefObject<HTMLInputElement | null>;
+    /**
+     * Set on the field: the picker's callback that fills `inputRef` and the
+     * ref its caller gave.
+     */
+    fieldRef: React.RefCallback<HTMLInputElement>;
+    /** The ids of the tags that describe the field. */
+    describedBy?: string;
+    /** Shown under the field, inside its Field: the tags. */
+    below?: React.ReactNode;
+    /** Selects what takes focus as the panel opens. */
+    initialFocusSelector?: string;
+    /** The panel's content, handed the panel's name. */
+    children: (name: PanelName) => React.ReactNode;
+}
+/**
+ * A read-only `role="combobox"` field, wired as the date pickers' are, that
+ * opens a `PickerPopover` dialog panel: in a `Field` of its own unless one is
+ * around it, with a chevron at its inline end, a clear button, the hidden
+ * inputs for `name` and what the browser's `required` check reads. A click,
+ * Enter, Space, Down or Alt+Down opens the panel, which holds focus, as the
+ * date pickers' does: Tab and Shift+Tab wrap inside it. Escape and Alt+Up
+ * close it and put focus back on the field, and a press outside closes it
+ * where the press put focus.
+ */
+export declare function DialogSelect({ component, rootClass, panelClass, text, values, hasValue, open, onOpenChange, onFormReset, onPrintableKey, onClear, clearable, clearLabel, chooseLabel, placeholder, name, form, required, disabled, color, size, isRounded, position, appendToBody, inputRef, fieldRef, describedBy, below, initialFocusSelector, children, label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, className, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...props }: DialogSelectProps): React.JSX.Element;

package/dist/types-cjs/form/_selectInternals/ValueTags.d.ts

@@ -0,0 +1,40 @@
+/** Props for the tags of a field holding several values. */
+export interface ValueTagsProps {
+    /** The values, in the order they show. */
+    values: string[];
+    /** The id of each tag's label, from `tagIds`, which the field's description lists. */
+    ids: string[];
+    /** What a value shows. */
+    labelFor: (value: string) => string;
+    /** The field can't be used, so the tags have no buttons. */
+    disabled?: boolean;
+    /**
+     * Names each button in place of "Remove" and the value's label. The
+     * button is then described by its tag's label, so it still says which.
+     */
+    ariaCloseLabel?: string;
+    /** Called with a value when its tag's button is pressed. */
+    onRemove: (value: string) => void;
+    /** Whether a value's tag has a button. Every tag has one without it. */
+    removable?: (value: string) => boolean;
+}
+/**
+ * The values of a field holding several, as Bulma tags under it, each with a
+ * `Delete` that takes its value off. Nothing while there are none.
+ */
+export declare function ValueTags({ values, ids, labelFor, disabled, ariaCloseLabel, onRemove, removable, }: ValueTagsProps): import("react").JSX.Element | null;
+/** The ids `ValueTags` gives its labels, built from one id of the field's. */
+export declare const tagIds: (base: string, values: string[]) => string[];
+/** Props for the hidden inputs that post a field's values. */
+export interface HiddenValuesProps {
+    /** The form field name. Nothing renders without one. */
+    name?: string;
+    /** One hidden input each. */
+    values: string[];
+    /** The id of the form they post with, for a field outside it. */
+    form?: string;
+    /** They don't post, as a disabled field's value doesn't. */
+    disabled?: boolean;
+}
+/** A hidden input for each value, so a form posts them under `name`. */
+export declare function HiddenValues({ name, values, form, disabled, }: HiddenValuesProps): import("react").JSX.Element | null;

package/dist/types-cjs/helpers/overlayStack.d.ts

@@ -28,3 +28,20 @@ export declare const isModalOverlayOpen: () => boolean;
  * above this overlay.
  */
 export declare function useOverlayStack(inStack: boolean, modal?: boolean): (among?: 'modal') => boolean;
+/**
+ * Calls `onEscape` for an Escape while `active` and the overlay is the
+ * topmost one, as `isTopmost` (from `useOverlayStack`) says, and marks the key
+ * used with `preventDefault()`, so nothing under it acts on it too.
+ *
+ * It listens on `window`, so everything inside the overlay has had the key
+ * first, and an Escape something there used, such as a popup closing, is
+ * left to it. The listener stays put while `onEscape` changes identity, as an
+ * inline one does on every render of the parent: it reads the latest one as
+ * the key arrives.
+ *
+ * @function useOverlayEscape
+ * @param active - Whether the overlay is open and closes on Escape.
+ * @param isTopmost - The overlay's check from `useOverlayStack`.
+ * @param onEscape - What closing it does.
+ */
+export declare function useOverlayEscape(active: boolean, isTopmost: () => boolean, onEscape: () => void): void;

package/dist/types-cjs/helpers/treeData.d.ts

@@ -0,0 +1,48 @@
+import type { TreeItemData, TreeSelectCheckedStrategy } from '../form/TreeSelect.js';
+import { type TreeViewItemRecord } from './useTreeView.js';
+/** A node, and the values of the nodes above it, from the top. */
+export interface TreeNodeEntry {
+    node: TreeItemData;
+    path: string[];
+}
+/**
+ * Every node by its value, in the order the tree reads from top to bottom.
+ * Values are meant to be unique, and the first node with a value wins.
+ */
+export declare function indexTree(data: TreeItemData[]): Map<string, TreeNodeEntry>;
+/** What a node is called: its `label`, or its `value` when that's empty. */
+export declare const nodeLabel: (node: TreeItemData) => string;
+/** The nodes under a node, none when it has no `children`. */
+export declare const childNodes: (node: TreeItemData) => TreeItemData[];
+/** Whether a node is a parent: it has children, or `hasChildren` says it will. */
+export declare const isParentNode: (node: TreeItemData) => boolean;
+/**
+ * The records TreeView's check rules read, built from the nodes rather than
+ * from the items on the page, so the checked list can be worked out while
+ * the tree isn't there.
+ */
+export declare function checkRecords(index: Map<string, TreeNodeEntry>): Map<string, TreeViewItemRecord>;
+/**
+ * The checked list a `checkedStrategy` reports for the items `listed` checks
+ * by TreeView's rules, in the tree's order. `all` is every checked item;
+ * `child` the checked items with no enabled item under them; `parent` the
+ * checked items whose parent isn't. A disabled item is checked by its own
+ * value only, so a checked one is in every list. Values no node has are
+ * kept, at the end. Passed back in, each list checks the same items.
+ */
+export declare function checkedByStrategy(records: Map<string, TreeViewItemRecord>, listed: string[], strategy: TreeSelectCheckedStrategy): string[];
+/** What a search leaves of a tree. */
+export interface TreeSearch {
+    /** The values of the nodes it hides. */
+    hidden: Set<string>;
+    /** The values of the nodes with a match under them, which open. */
+    open: string[];
+    /** Whether anything matched. */
+    found: boolean;
+}
+/**
+ * What a search shows of a tree: the nodes that match, the nodes above them,
+ * so the results stay a tree, and the nodes under them, so a matching branch
+ * can still be opened.
+ */
+export declare function searchTree(data: TreeItemData[], matches: (node: TreeItemData, path: TreeItemData[]) => boolean): TreeSearch;

package/dist/types-cjs/helpers/useBulmaViewport.d.ts

@@ -0,0 +1,34 @@
+/** `useBulmaViewport`'s answer below the tablet breakpoint. */
+export declare const MOBILE: number;
+/** Where Bulma's `widescreen`, `desktop` and `tablet` sit in `VIEWPORT_QUERIES`. */
+declare const VIEWPORT_INDEX: {
+    readonly widescreen: 1;
+    readonly desktop: 2;
+    readonly tablet: 3;
+};
+/**
+ * Which of Bulma's viewports the window is in: the index of the widest
+ * `VIEWPORT_QUERIES` entry that matches, `MOBILE` below them all, or `-1`
+ * when that isn't known (on the server, before the first layout effect, and
+ * whenever `enabled` is off, so a caller that needs no answer subscribes to
+ * nothing). It's read in a layout effect, so the first paint after hydration
+ * already has it.
+ *
+ * @function useBulmaViewport
+ * @param enabled - Whether the caller needs the viewport at all.
+ * @returns The viewport, as described above.
+ */
+export declare function useBulmaViewport(enabled: boolean): number;
+/**
+ * Whether the window is at or past one of Bulma's breakpoints, at its default
+ * width, through the one media query Bulma's mixin for it opens with, so a
+ * caller re-renders only when the window crosses that breakpoint. `null`
+ * until it's known: on the server, and before the first layout effect. Where
+ * `matchMedia` isn't there, it's `true`, the wide layout a server renders.
+ *
+ * @function useBulmaBreakpoint
+ * @param breakpoint - The breakpoint: `tablet`, `desktop` or `widescreen`.
+ * @returns Whether the window is at or past it, or `null`.
+ */
+export declare function useBulmaBreakpoint(breakpoint: keyof typeof VIEWPORT_INDEX): boolean | null;
+export {};

package/dist/types-cjs/helpers/useControlled.d.ts

@@ -0,0 +1,14 @@
+/**
+ * A value the caller holds, or one this hook holds when the caller doesn't:
+ * the `x` / `defaultX` pair of a component's props. The caller holds it
+ * whenever `controlled` isn't `undefined`, so `null` is a held value. The
+ * setter changes only the value held here, so a held one changes when the
+ * caller passes the new value, and it reports nothing: the component calls
+ * its own `onXChange`.
+ *
+ * @function useControlled
+ * @param controlled - The caller's value, or `undefined` to hold one here.
+ * @param initial - The value held here to begin with.
+ * @returns The current value, and the setter for the one held here.
+ */
+export declare function useControlled<T>(controlled: T | undefined, initial: T): readonly [T, (next: T) => void];

package/dist/types-cjs/helpers/useInertSiblings.d.ts

@@ -26,5 +26,8 @@ import type { RefObject } from 'react';
  * @param active - Whether what's beside it is inert.
  * @param wholePage - Whether that goes for the whole page rather than only
  * the element's siblings.
+ * @param except - Ref to an element beside it to leave reachable too, such
+ * as the overlay's own backdrop, which has to take the presses that close
+ * it rather than let them through to what's under it.
  */
-export declare function useInertSiblings(ref: RefObject<Element | null>, active: boolean, wholePage: boolean): void;
+export declare function useInertSiblings(ref: RefObject<Element | null>, active: boolean, wholePage: boolean, except?: RefObject<Element | null>): void;

package/dist/types-cjs/helpers/useOutsidePress.d.ts

@@ -0,0 +1,24 @@
+import type React from 'react';
+import type { RefObject } from 'react';
+/**
+ * Calls `onOutsidePress` for a `pointerdown` outside `ref`'s element while
+ * `active`, as a Popover closes on one.
+ *
+ * A press counts as inside in two ways: on the element's own path in the DOM,
+ * and anywhere in a React tree the returned handler is put on, as
+ * `onPointerDownCapture`. React's tree includes content portaled out of it,
+ * which the DOM path doesn't, and React has seen a press there by the time
+ * the document hears it.
+ *
+ * The listener is on the element's own document, an iframe's when the tree
+ * renders into one, and reads the latest `onOutsidePress` as a press
+ * arrives, so it stays put while the callback changes identity.
+ *
+ * @function useOutsidePress
+ * @param ref - Ref to the element a press inside of doesn't count.
+ * @param active - Whether to listen.
+ * @param onOutsidePress - Called with each press outside.
+ * @returns The `onPointerDownCapture` handler that marks a press in its tree
+ * as inside.
+ */
+export declare function useOutsidePress(ref: RefObject<Element | null>, active: boolean, onOutsidePress: (event: PointerEvent) => void): (event: React.PointerEvent) => void;

package/dist/types-cjs/helpers/useOverlayFocus.d.ts

@@ -0,0 +1,44 @@
+import type { RefObject } from 'react';
+/** Options for `useOverlayFocus`. */
+export interface OverlayFocusOptions {
+    /**
+     * Whether the overlay is modal. One that isn't, opened while a modal
+     * overlay is open under it, leaves focus where it is: that overlay keeps
+     * Tab, so a Tab from this one's controls would only go back to it. It's
+     * read as the overlay opens, so a change while it's open moves nothing.
+     */
+    modal: boolean;
+    /**
+     * A value that remounts the overlay's nodes while it's open when it
+     * changes, such as a new portal target. Focus is handed back from the old
+     * nodes and moved into the new ones.
+     */
+    remountKey?: unknown;
+    /**
+     * Asked as the overlay closes, while it still holds focus: `false` leaves
+     * focus where it is, for a close that shouldn't send it back, such as one
+     * whose overlay stays on the page as something else.
+     */
+    restore?: () => boolean;
+}
+/**
+ * Moves focus into an overlay as it opens, to the first stop Tab wraps to
+ * inside `ref`'s element or the element itself, and hands it back to
+ * whatever had it as it closes, as `Modal` does. Focus goes back only while
+ * the overlay still holds it, or it's been dropped to `<body>`: closing one
+ * under another overlay mustn't pull focus out of the one on top, and focus
+ * moved out to the page stays there. The opener is found wherever it sits,
+ * inside a shadow root too, in the overlay's own document, an iframe's when
+ * it renders into one. It's read in a layout effect as the overlay opens, so
+ * before the commit's passive effects, such as one that makes the page
+ * inert. Content inside the overlay with a layout effect of its own, or an
+ * `autoFocus`, can still move focus first, and then there's no opener to go
+ * back to: focus is never handed back into the overlay that's closing.
+ *
+ * @function useOverlayFocus
+ * @param ref - Ref to the overlay's element.
+ * @param open - Whether the overlay is open.
+ * @param options - Whether it's modal, what remounts it, and whether a
+ * close hands focus back.
+ */
+export declare function useOverlayFocus(ref: RefObject<HTMLElement | null>, open: boolean, { modal, remountKey, restore }: OverlayFocusOptions): void;