@allxsmith/bestax-bulma 5.20.0 → 5.23.0

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

@@ -0,0 +1,74 @@
+import type { RefObject } from 'react';
+/**
+ * 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 to focus when the trap turns on. Without it, or while it
+     * points at nothing, 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/helpers/useIsHydrated.d.ts

@@ -6,6 +6,11 @@
  * DOM-only behaviour (such as portalling) past hydration so the first client
  * render matches the server markup instead of tripping hydration recovery.
  *
+ * Only a component that hydrates ever sees `false` on the client. One that
+ * mounts later (after a route change, or in an app with no server rendering)
+ * gets `true` on its first render, so it pays for no extra render. It
+ * subscribes to nothing, so no later render flips it back.
+ *
  * @function useIsHydrated
  * @returns `true` once the hydrating render has completed, otherwise `false`.
  */

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

@@ -15,6 +15,7 @@ export * from './components/Panel.js';
 export * from './components/Tabs.js';
 export * from './components/Loading.js';
 export * from './components/Collapse.js';
+export * from './components/Collapses.js';
 export * from './components/Tooltip.js';
 export * from './components/Steps.js';
 export * from './components/Sidebar.js';
@@ -106,6 +107,13 @@ export * from './helpers/mergeBulmaStyles.js';
 export * from './helpers/useBulmaClasses.js';
 export * from './helpers/Theme.js';
 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';