@allxsmith/bestax-bulma 5.22.0 → 5.24.0

package/dist/types-cjs/components/Popover.d.ts

@@ -0,0 +1,166 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+import { ButtonOwnProps } from '../elements/Button.js';
+import type { PickerPosition } from '../form/_pickerInternals/pickerTypes.js';
+/**
+ * Where the panel opens against its trigger: below (`bottom-*`) or above
+ * (`top-*`), lined up with the trigger's left or right edge. `auto` picks the
+ * one that keeps the panel in the viewport, preferring below and lined up on
+ * the left. The same union the date and time pickers take.
+ */
+export type PopoverPosition = PickerPosition;
+/**
+ * Props for the Popover component. `className`, `id`, the other HTML
+ * attributes and the helper props land on the wrapper around the trigger,
+ * not on the panel; `contentClassName` reaches the panel.
+ * @extraProp {string} [className] - Additional classes for the wrapper around the trigger. The panel takes `contentClassName`.
+ */
+export interface PopoverProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'children'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /**
+     * The element that opens and closes the popover, such as a `Button`.
+     * Popover gives it `aria-haspopup="dialog"`, `aria-expanded`,
+     * `aria-controls` while the panel is open, and click and key handlers that
+     * run after its own (call `preventDefault()` in yours to keep the popover
+     * from toggling). It has to be a single element that passes `onClick` and
+     * `onKeyDown` to its DOM node. Enter and Space toggle a trigger the browser
+     * doesn't click on its own, and an intrinsic element that isn't already a
+     * control (a `<span>`) also gets `role="button"` and `tabIndex={0}` unless
+     * it sets them; a component that renders one has to take those itself.
+     */
+    trigger: React.ReactElement;
+    /** The panel's content, usually `Popover.Header`, `Popover.Body` and `Popover.Footer`. */
+    children?: React.ReactNode;
+    /**
+     * Controlled open state. When set, the trigger and every dismissal only
+     * report through `onOpenChange`.
+     */
+    open?: boolean;
+    /**
+     * Initial open state when uncontrolled. Opening moves focus into the
+     * panel, so a popover that starts open takes focus once the page loads.
+     * @defaultValue false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Called with the state asked for: `true` from the trigger opening it,
+     * `false` from the trigger, `Popover.Close`, Escape or an outside
+     * `pointerdown`. Fires in both controlled and uncontrolled use.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Where the panel opens against the trigger.
+     * @defaultValue 'bottom-left'
+     */
+    position?: PopoverPosition;
+    /**
+     * Render the panel at the end of `document.body` through `Portal`, fixed to
+     * the viewport, so an ancestor's `overflow`, `transform` or stacking context
+     * can't clip it. The panel then shows from the commit after hydration,
+     * never in server markup. It is measured against the trigger when it opens
+     * and on resize and scroll, so it doesn't follow content that changes size
+     * while it is open. Theming variables set on an ancestor of the trigger
+     * don't reach it there.
+     * @defaultValue false
+     */
+    appendToBody?: boolean;
+    /**
+     * Keep Tab and Shift+Tab inside the panel while it is open, as the ARIA
+     * dialog pattern does for a non-modal dialog. Pointer focus leaves freely
+     * and the page stays usable. With `false`, Tab moves past the panel and
+     * the popover stays open. Focus moves into the panel on open and back to
+     * the trigger on close either way.
+     * @defaultValue true
+     */
+    trapFocus?: boolean;
+    /**
+     * Close on a `pointerdown` outside the trigger and the panel. Content the
+     * panel renders through a portal (a nested `Popover`, a portaled picker)
+     * still counts as inside.
+     * @defaultValue true
+     */
+    closeOnClickOutside?: boolean;
+    /**
+     * Close on Escape while focus is in the panel or on the trigger. A dialog
+     * nested in the panel, such as a date picker's calendar, takes its own
+     * Escape first, and so does content that calls `preventDefault()` on it.
+     * @defaultValue true
+     */
+    closeOnEscape?: boolean;
+    /**
+     * The panel's accessible name. Without it the panel is named by its
+     * `Popover.Header`, and a development build warns when it has neither.
+     */
+    ariaLabel?: string;
+    /** Additional classes for the panel (`.popover-content`). */
+    contentClassName?: string;
+}
+/**
+ * Props for the Popover.Header component. Its `id` is the one the panel's
+ * `aria-labelledby` names, so it isn't yours to set.
+ */
+export interface PopoverHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'id'>, BulmaClassesProps {
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * The popover's title, which names the panel for assistive technology.
+ *
+ * @function
+ * @param {PopoverHeaderProps} props - Props for the Popover.Header component.
+ * @returns {JSX.Element} The header element.
+ */
+export declare const PopoverHeader: React.FC<PopoverHeaderProps>;
+/**
+ * Props for the Popover.Body component.
+ */
+export interface PopoverBodyProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, BulmaClassesProps {
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * The popover's main content area.
+ *
+ * @function
+ * @param {PopoverBodyProps} props - Props for the Popover.Body component.
+ * @returns {JSX.Element} The body element.
+ */
+export declare const PopoverBody: React.FC<PopoverBodyProps>;
+/**
+ * Props for the Popover.Footer component.
+ */
+export interface PopoverFooterProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, BulmaClassesProps {
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * A row of actions along the bottom of the popover, aligned to the end.
+ *
+ * @function
+ * @param {PopoverFooterProps} props - Props for the Popover.Footer component.
+ * @returns {JSX.Element} The footer element.
+ */
+export declare const PopoverFooter: React.FC<PopoverFooterProps>;
+/**
+ * Props for the Popover.Close component: the props of a `Button` rendered as
+ * a `<button>`.
+ * @extraProp {'button' | 'submit' | 'reset'} [type='button'] - Button type. Defaults to `'button'`, so a close button inside a form doesn't submit it.
+ * @extraProp {React.MouseEventHandler<HTMLButtonElement>} [onClick] - Runs before the popover closes. Call `preventDefault()` to keep it open.
+ */
+export interface PopoverCloseProps extends ButtonOwnProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonOwnProps> {
+}
+/**
+ * A `Button` that closes the popover, handing focus back to the trigger.
+ *
+ * @function
+ * @param {PopoverCloseProps} props - Props for the Popover.Close component.
+ * @returns {JSX.Element} The close button.
+ */
+export declare const PopoverClose: React.FC<PopoverCloseProps>;
+/** Popover with Header, Body, Footer and Close sub-components. */
+export declare const Popover: React.FC<PopoverProps> & {
+    Header: React.FC<PopoverHeaderProps>;
+    Body: React.FC<PopoverBodyProps>;
+    Footer: React.FC<PopoverFooterProps>;
+    Close: React.FC<PopoverCloseProps>;
+};
+export default Popover;

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

@@ -5,7 +5,7 @@ import { DateInputBaseProps } from './DateInputBase.js';
 /**
  * Props for the DateInput convenience wrapper. Extends `DateInputBaseProps`
  * with Field-level (label, horizontal) and Control-level (icons, loading) props.
- * @extraProp {string} [name] - Form field name. Forwarded to a hidden ISO-formatted input.
+ * @extraProp {string} [name] - Form field name. The text field submits the text it displays. The native input on touch devices submits the ISO value (`YYYY-MM-DD`, or `YYYY-MM` at month granularity), and an `inline` calendar, which has no visible input, submits it from a hidden input (`YYYY-MM-DD`, `YYYY-MM` or `YYYY`).
  * @extraProp {string} [form] - Form id the input belongs to.
  * @extraProp {boolean} [required=false] - Marks the input as required.
  * @extraProp {string} [className] - Additional CSS classes for the input.

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
-import { PickerPosition, DayOfWeek, PickerLabels } from './_pickerInternals/pickerTypes.js';
+import { PickerPosition, DayOfWeek, DateGranularity, PickerLabels } from './_pickerInternals/pickerTypes.js';
 import { DateFormatOption } from './_pickerInternals/formatters.js';
 /**
  * Props for the raw DateInput base. Use the higher-level `DateInput` for
@@ -28,7 +28,29 @@ export interface DateInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLI
     /** Placeholder text for the input. */
     placeholder?: string;
     /**
-     * Token format string or `Intl.DateTimeFormat` options. Default `'YYYY-MM-DD'`.
+     * What the calendar shows and what a selection means: `'day'` shows the
+     * day grid, `'month'` a grid of the focused year's months whose header
+     * steps a year at a time, and `'year'` the year list. A month or year value
+     * is the first day of that period at local midnight, so `onChange` gets
+     * `new Date(2026, 5, 1)` for June 2026. A `value` elsewhere in the period
+     * shows as that period and stays as given until the user picks a period or
+     * types a different one. `min`, `max`,
+     * `shouldDisableDate` and `unselectableDates` judge whole periods: a month
+     * or year can be picked while any day in it can, so a `min` of 15 June
+     * still allows June, and June commits as 1 June, earlier than that `min`.
+     * The default `format` follows the granularity (`'YYYY-MM'`, `'YYYY'`); a
+     * custom `format` with finer tokens still renders them, but typing skips
+     * them. `firstDayOfWeek`, `dayNames` and `nearbyMonthDays` only affect the
+     * day grid, and an `inline` calendar's hidden form value is `YYYY-MM` or
+     * `YYYY`. The `labels` keys `chooseMonth` / `chooseYear` name the launcher
+     * and popover, and `prevYear` / `nextYear` the month grid's header buttons.
+     * @defaultValue 'day'
+     */
+    granularity?: DateGranularity;
+    /**
+     * Token format string or `Intl.DateTimeFormat` options. Defaults to
+     * `'YYYY-MM-DD'`, or to `'YYYY-MM'` / `'YYYY'` when `granularity` is
+     * `'month'` / `'year'`.
      * @defaultValue 'YYYY-MM-DD'
      */
     format?: DateFormatOption;
@@ -38,7 +60,15 @@ export interface DateInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLI
     locale?: string;
     /** Render the calendar inline (no popover). */
     inline?: boolean;
-    /** Use `<input type="date">` on coarse-pointer + small-viewport devices. */
+    /**
+     * Use `<input type="date">` on coarse-pointer + small-viewport devices. At
+     * `'month'` granularity it uses `<input type="month">` where the browser
+     * implements one, as Chromium browsers, Safari on iOS and Firefox for
+     * Android do, and the calendar where it doesn't, as in desktop Firefox.
+     * Desktop Safari accepts the type but draws no month control, so forcing
+     * `true` there shows a plain text box. HTML has no year input, so `'year'`
+     * granularity always renders the calendar.
+     */
     mobileNative?: boolean | 'auto';
     /** Allow segmented keyboard typing in the input (type the date directly, auto-advancing across segments). `false` makes the field picker-only. */
     editable?: boolean;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DayOfWeek, PickerLabels } from './pickerTypes.js';
+import { DateGranularity, DayOfWeek, PickerLabels } from './pickerTypes.js';
 export interface CalendarProps {
     value: Date | null;
     focusedDate: Date;
@@ -25,8 +25,18 @@ export interface CalendarProps {
     /**
      * Inclusive `[min, max]` year range shown in the year-dropdown view.
      * Defaults to ±100 years around the focused year, clamped by `min`/`max`.
+     * At `'year'` granularity the window centres on the year focused when the
+     * calendar mounted, so moving focus never reflows the list.
      */
     yearsRange?: [number, number];
+    /**
+     * What a selection means. `'day'` shows the day grid; `'month'` shows a
+     * month grid for the focused year, with the year list one header click
+     * away for jumping; `'year'` shows the year list as the selection surface.
+     * A month or year cell is disabled when every day in it is, and `onSelect`
+     * receives the period's first day.
+     */
+    granularity?: DateGranularity;
 }
 export declare const Calendar: React.FC<CalendarProps>;
 export default Calendar;

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

@@ -1,4 +1,4 @@
-import { DayOfWeek } from './pickerTypes.js';
+import { DateGranularity, DayOfWeek } from './pickerTypes.js';
 export interface CalendarCell {
     date: Date;
     inCurrentMonth: boolean;
@@ -13,6 +13,41 @@ export declare function startOfDay(d: Date): Date;
 export declare function endOfDay(d: Date): Date;
 export declare function startOfMonth(d: Date): Date;
 export declare function endOfMonth(d: Date): Date;
+/**
+ * Local midnight on `year`-`month`-`day` (`month` from 0), like the
+ * `Date(y, m, d)` constructor except that years 0–99 stay as given rather than
+ * turning into 1900–1999.
+ */
+export declare function makeDate(year: number, month?: number, day?: number): Date;
+/**
+ * First instant of the day, month or year containing `d`. Works by setters on
+ * a copy rather than the `Date(y, m, d)` constructor, which reads years 0–99
+ * as 1900–1999: segmented typing passes through such years on the way to a
+ * four-digit one.
+ */
+export declare function startOfPeriod(d: Date, granularity: DateGranularity): Date;
+/** Last instant of the day, month or year containing `d`. */
+export declare function endOfPeriod(d: Date, granularity: DateGranularity): Date;
+/** The rules that make a single calendar day unselectable. */
+export interface DayConstraints {
+    min?: Date;
+    max?: Date;
+    shouldDisableDate?: (d: Date) => boolean;
+    unselectableDates?: Date[];
+}
+/**
+ * Whether the day `d` falls outside `[min, max]` or is blocked by
+ * `shouldDisableDate` / `unselectableDates`. This is the day grid's rule for a
+ * disabled cell.
+ */
+export declare function isDayUnselectable(d: Date, c: DayConstraints): boolean;
+/**
+ * Whether every day of the month or year containing `d` is unselectable, so
+ * the period as a whole can't be picked. Walks the period's days and stops at
+ * the first selectable one. `min` and `max` count whole days here, so a `min`
+ * of 3pm on a month's last day leaves that day, and so its month, selectable.
+ */
+export declare function isPeriodUnselectable(d: Date, granularity: DateGranularity, c: DayConstraints): boolean;
 export declare function addDays(d: Date, n: number): Date;
 export declare function addMonths(d: Date, n: number): Date;
 export declare function addYears(d: Date, n: number): Date;

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

@@ -1,5 +1,7 @@
 export type DateFormatOption = Intl.DateTimeFormatOptions | string;
 export declare const DEFAULT_DATE_FORMAT = "YYYY-MM-DD";
+export declare const DEFAULT_MONTH_FORMAT = "YYYY-MM";
+export declare const DEFAULT_YEAR_FORMAT = "YYYY";
 export declare const DEFAULT_TIME_FORMAT_24 = "HH:mm";
 export declare const DEFAULT_TIME_FORMAT_12 = "hh:mm A";
 export declare const DEFAULT_DATETIME_FORMAT = "YYYY-MM-DD HH:mm";

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

@@ -0,0 +1,11 @@
+/**
+ * Whether this browser implements `<input type={type}>`. A browser that
+ * doesn't know a type reads it back as `'text'`, so this sets the type on a
+ * detached input and checks what sticks. The answer can't change within a
+ * page, so it is worked out once per type.
+ *
+ * It needs a DOM, so callers ask only after hydration. It also can't see a
+ * browser that recognises a type without drawing a control for it: desktop
+ * Safari reports `'month'` but shows a plain text box.
+ */
+export declare function supportsInputType(type: string): boolean;

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

@@ -1,6 +1,8 @@
 export type PickerPosition = 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'auto';
 export type HourFormat = '12' | '24';
 export type DayOfWeek = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+/** The unit a date picker selects: a day, a month or a year. */
+export type DateGranularity = 'day' | 'month' | 'year';
 /**
  * Translatable strings used across all four pickers. Pass via the `labels`
  * prop to override defaults; consumers manage their own locale-driven mapping.
@@ -8,7 +10,15 @@ export type DayOfWeek = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 export interface PickerLabels {
     prevMonth?: string;
     nextMonth?: string;
+    /** Month grid header: steps back a year. */
+    prevYear?: string;
+    /** Month grid header: steps forward a year. */
+    nextYear?: string;
     chooseDate?: string;
+    /** Launcher and popover name when the picker selects a month. */
+    chooseMonth?: string;
+    /** Launcher, popover and year list name when the picker selects a year. */
+    chooseYear?: string;
     hours?: string;
     minutes?: string;
     seconds?: string;

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

@@ -1,9 +1,17 @@
 import React from 'react';
 import { DateFormatOption } from './formatters.js';
-import { SegmentMap } from './segmentMap.js';
+import { SegmentKind, SegmentMap } from './segmentMap.js';
 export interface UseSegmentedEntryParams {
     /** Resolved format actually used to render (the host's default format). */
     format: DateFormatOption;
+    /**
+     * Segment kinds the caret never stops on: they still render, but arrows,
+     * digits and separators pass over them. A month picker skips `'day'` so a
+     * format such as `'YYYY-MM-DD'` edits only the year and month. Must be
+     * referentially stable. A format left with no editable segment falls back
+     * to free-form entry.
+     */
+    skipKinds?: readonly SegmentKind[];
     /** Current canonical value (controlled or internal). */
     value: Date | null;
     /** Commit a new Date through the host's onChange / internal pipeline. */

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

@@ -1,3 +1,4 @@
+import React from 'react';
 /**
  * Resolves a portal target: an `HTMLElement` is used directly, a non-empty
  * `string` is treated as a `document.querySelector` selector (falling back to
@@ -13,3 +14,64 @@
  * @returns The resolved DOM node to portal into.
  */
 export declare function resolvePortalContainer(container?: string | HTMLElement): HTMLElement;
+/**
+ * Props for the Portal component.
+ */
+export interface PortalProps {
+    /** Content to render into the container. */
+    children?: React.ReactNode;
+    /**
+     * Where the content goes: an element, or a `document.querySelector`
+     * selector. Omitted, empty, or a selector that matches nothing, it goes to
+     * `document.body`. A selector is looked up again on each render, so the
+     * content follows the target when it changes. Moving to another target
+     * remounts the children and resets their state, which includes a selector
+     * that only starts matching after the content has shown in `document.body`.
+     * Render the target first, or pass the element once you have it.
+     */
+    container?: string | HTMLElement;
+    /**
+     * Render the children in place instead, on the server as well as the
+     * client. Lets a component that portals only sometimes keep a single code
+     * path.
+     * @defaultValue false
+     */
+    disabled?: boolean;
+}
+/**
+ * Renders its children into another part of the page, `document.body` unless `container` says otherwise, so floating content escapes an ancestor's `overflow`, `transform` or stacking context.
+ *
+ * React's server renderer can't render a portal, so `Portal` renders nothing
+ * on the server and during hydration, and mounts its children in the commit
+ * that follows. The first client render then matches the server markup. In an app
+ * without server rendering it portals on the first render.
+ *
+ * React context, such as `ConfigProvider`'s class prefix, reaches the
+ * portaled children, and their React events bubble through the React tree.
+ * CSS inheritance follows the DOM instead: a scoped (non-`isRoot`) `Theme`
+ * sets its variables on a wrapper element the portaled content has left, so
+ * that content sees the page-level theme. Point `container` at an element
+ * inside the themed area to keep it.
+ *
+ * Tab order and focus follow the DOM too. Content portaled from inside a
+ * focus trap is no longer inside the trapped element, so the trap neither
+ * reaches it nor holds focus there: render nested overlays inside the
+ * trapped element, or give them a trap of their own.
+ *
+ * @function
+ * @param {PortalProps} props - Props for the Portal component.
+ * @returns The portal, the children in place when `disabled`, or nothing
+ * before hydration.
+ *
+ * @example
+ * <Portal>
+ *   <div className="box">Rendered at the end of document.body</div>
+ * </Portal>
+ *
+ * @example
+ * // Into a dedicated overlay root
+ * <Portal container="#overlays">
+ *   <CommandPalette />
+ * </Portal>
+ */
+export declare function Portal({ children, container, disabled }: PortalProps): React.JSX.Element | null;

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

@@ -49,6 +49,8 @@ export declare function getActiveElementInTree(node: Node | null | undefined): E
  * opener sits in. A closed shadow root cannot be entered, so focus inside one
  * reads as its host.
  *
+ * @param doc - The document to start from: the component's own, when it may
+ * render into one other than the page's (an iframe's). Defaults to `document`.
  * @returns The focused element, or `null` when the document has none.
  */
-export declare function getDeepestActiveElement(): Element | null;
+export declare function getDeepestActiveElement(doc?: Document): Element | null;

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

@@ -0,0 +1,59 @@
+import type { RefObject } from 'react';
+import type { PickerPosition } from '../form/_pickerInternals/pickerTypes.js';
+/** A corner of the anchor the panel opens from, once `auto` is resolved. */
+export type AnchoredCorner = Exclude<PickerPosition, 'auto'>;
+/**
+ * Where the panel goes: the corner it opens from and, when it is fixed to
+ * the viewport, its coordinates there.
+ */
+export interface AnchoredPosition {
+    position: AnchoredCorner;
+    top?: number;
+    left?: number;
+}
+/**
+ * Options for `useAnchoredPosition`.
+ */
+export interface UseAnchoredPositionOptions {
+    /** Whether the panel is on the page. Nothing is measured while it is not. */
+    active: boolean;
+    /** The corner asked for, or `auto` to pick one that keeps the panel in the viewport. */
+    position: PickerPosition;
+    /**
+     * Whether the panel is fixed to the viewport (it was portaled away from the
+     * anchor), which needs coordinates. Otherwise the panel's CSS places it
+     * against the anchor from the corner alone.
+     */
+    fixed: boolean;
+    /**
+     * The gap between the anchor and the panel, in pixels, that the hook puts
+     * there itself: added to the fixed coordinates and to the room `auto` asks
+     * for below the anchor.
+     * @defaultValue 4
+     */
+    offset?: number;
+    /**
+     * Reads the gap the panel's own stylesheet puts between it and the anchor,
+     * in pixels, each time the panel is measured. `auto` leaves room for it as
+     * well; the coordinates don't include it, because the stylesheet applies it.
+     */
+    styledGap?: (panel: HTMLElement) => number;
+}
+/**
+ * Places a floating panel against its anchor: resolves `auto` to a corner
+ * and, for a panel fixed to the viewport, works out its coordinates. It
+ * measures again on resize and on any scroll of the anchor's window (an
+ * iframe's, when the anchor renders into one), so a fixed panel follows its
+ * anchor. A measurement that changes nothing doesn't render again.
+ *
+ * Measuring happens in a layout effect, so the panel is placed before it
+ * paints. It needs both elements on the page while `active` is on, and
+ * keeps the last placement when either is missing.
+ *
+ * @function useAnchoredPosition
+ * @param anchorRef - The element the panel opens from.
+ * @param panelRef - The floating panel.
+ * @param options - Whether to measure, the corner asked for, and how the panel is placed.
+ * @returns The corner the panel opens from, with coordinates when it is fixed.
+ */
+export declare function useAnchoredPosition(anchorRef: RefObject<HTMLElement | null>, panelRef: RefObject<HTMLElement | null>, { active, position, fixed, offset, styledGap }: UseAnchoredPositionOptions): AnchoredPosition;

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

@@ -0,0 +1,7 @@
+import { useEffect } from 'react';
+/**
+ * `useLayoutEffect` in the browser, `useEffect` on the server. A server
+ * render runs neither, and React 18 warns about a layout effect there, so the
+ * server is handed the plain one.
+ */
+export declare const useClientLayoutEffect: typeof useEffect;

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

@@ -0,0 +1,84 @@
+import type { RefObject } from 'react';
+/**
+ * The first tab stop inside `container`, found the way the trap finds it, or
+ * `null` when there is none. For a component that moves focus into a panel
+ * without trapping it there. `src/index.ts` names its exports from this
+ * module, so this one stays internal.
+ */
+export declare function firstTabStop(container: HTMLElement): HTMLElement | null;
+/**
+ * Options for `useFocusTrap`.
+ */
+export interface UseFocusTrapOptions {
+    /**
+     * Whether the trap is on. Turning it on moves focus into the container;
+     * turning it off (or unmounting) releases Tab and restores focus.
+     * @defaultValue true
+     */
+    active?: boolean;
+    /**
+     * The element inside the container to focus when the trap turns on. It has
+     * to be one that can take focus, so a heading needs `tabIndex={-1}`. When
+     * focusing it doesn't put focus inside the container (the ref is empty, or
+     * its element is outside, disabled, hidden or can't take focus), focus goes
+     * to the first tab stop inside the container, and to the container itself
+     * when there is none.
+     */
+    initialFocusRef?: RefObject<HTMLElement | null>;
+    /**
+     * Where focus goes when the trap turns off. `true` returns it to the element
+     * that had focus when the trap turned on; a ref sends it to that element
+     * instead; `false` leaves it alone. Focus is only moved while the trap still
+     * holds it, so a click that already put focus somewhere else outside the
+     * container keeps it there.
+     *
+     * `true` reads focus after the container's content has mounted, so content
+     * that focuses itself as it mounts (an `autoFocus` input) hides the element
+     * that opened it. And some browsers don't focus a button when it is
+     * clicked. For a panel opened from a button, pass the button's ref.
+     * @defaultValue true
+     */
+    restoreFocus?: boolean | RefObject<HTMLElement | null>;
+}
+/**
+ * Keeps keyboard focus inside a container while it is active: focus moves in
+ * when the trap turns on, Tab and Shift+Tab wrap between the first and last
+ * tab stops, and focus goes back where it came from when the trap turns off.
+ *
+ * Tab stops are what the browser's Tab visits, in document order: links,
+ * form controls, frames, media with controls, a `<details>` summary, editable
+ * regions, anything with `tabIndex={0}`, and the content of open shadow
+ * roots. Hidden, disabled, inert and `tabIndex={-1}` elements are skipped,
+ * and a radio group counts once. Give the container `tabIndex={-1}` so it can
+ * hold focus itself when nothing inside can. The trap listens on the
+ * container, so a trap nested inside another handles Tab first and the outer
+ * one stands aside.
+ *
+ * The trap is about Tab. If a Tab it let through still takes focus out (a
+ * browser can leave out a stop the page has, such as links when its settings
+ * say to), it sends focus back to the other end. A pointer or a script moving
+ * focus out is left alone, because pulling focus back from a click is modal
+ * behaviour, and a modal also has to block the page behind it, which `Modal`
+ * does. Content the container renders through a portal lives elsewhere in
+ * the DOM, so it is outside the trap: render nested overlays inside the
+ * container, or give them a trap of their own.
+ *
+ * The container has to be in the DOM when the trap turns on. The trap waits
+ * for hydration, so a container that only appears once the page has
+ * hydrated, the way portaled content does, still has it attach in the commit
+ * where the container appears.
+ *
+ * @function useFocusTrap
+ * @param containerRef - Ref to the element focus stays inside.
+ * @param options - When the trap is on, and where focus starts and ends.
+ *
+ * @example
+ * const panelRef = useRef<HTMLDivElement>(null);
+ * useFocusTrap(panelRef, { active: isOpen });
+ * return isOpen ? (
+ *   <div ref={panelRef} role="dialog" aria-label="Filters" tabIndex={-1}>
+ *     …
+ *   </div>
+ * ) : null;
+ */
+export declare function useFocusTrap(containerRef: RefObject<HTMLElement | null>, options?: UseFocusTrapOptions): void;

package/dist/types-cjs/index.d.ts

@@ -17,6 +17,7 @@ export * from './components/Loading.js';
 export * from './components/Collapse.js';
 export * from './components/Collapses.js';
 export * from './components/Tooltip.js';
+export * from './components/Popover.js';
 export * from './components/Steps.js';
 export * from './components/Sidebar.js';
 export * from './components/Toast.js';
@@ -110,6 +111,10 @@ export * from './helpers/Config.js';
 export { ClientOnly } from './helpers/ClientOnly.js';
 export type { ClientOnlyProps } from './helpers/ClientOnly.js';
 export { useIsHydrated } from './helpers/useIsHydrated.js';
+export { Portal } from './helpers/portal.js';
+export type { PortalProps } from './helpers/portal.js';
+export { useFocusTrap } from './helpers/useFocusTrap.js';
+export type { UseFocusTrapOptions } from './helpers/useFocusTrap.js';
 export * from './layout/Container.js';
 export * from './layout/Footer.js';
 export * from './layout/Hero.js';