@allxsmith/bestax-bulma 5.59.0 → 5.60.0

package/dist/index.esm.js

@@ -34,6 +34,7 @@ export { TreeView, TreeViewItem } from './esm/components/TreeView.js';
 export { ScrollArea } from './esm/components/ScrollArea.js';
 export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from './esm/components/Command.js';
 export { DataTable } from './esm/components/DataTable.js';
+export { Affix } from './esm/components/Affix.js';
 export { Block } from './esm/elements/Block.js';
 export { Box } from './esm/elements/Box.js';
 export { Button } from './esm/elements/Button.js';

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/types/components/Affix.d.ts

@@ -0,0 +1,67 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+import type { BadgePosition } from './Badge.js';
+/** A corner of the viewport: the same four values as `BadgePosition`. */
+export type AffixPosition = BadgePosition;
+/**
+ * Props for the Affix component. The helper props, the other attributes and
+ * the `ref` land on its `<div>`.
+ *
+ * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the `<div>`, wherever it renders.
+ */
+export interface AffixProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /** What stays in the corner. */
+    children?: React.ReactNode;
+    /**
+     * The corner of the viewport it's fixed to. Physical, as Badge's and
+     * Toast's are: `'bottom-right'` stays on the right in right-to-left text.
+     * Its distance from the edges is `--bulma-affix-offset-vertical` and
+     * `--bulma-affix-offset-horizontal` plus the device's safe-area inset; a
+     * margin from the spacing helpers (`mb`, `mr`, …) adds to it. A margin on
+     * one side also takes that much of the width its content can have, which
+     * the offset variables don't, so move it far with those.
+     * @defaultValue 'bottom-right'
+     */
+    position?: AffixPosition;
+    /**
+     * Renders it into another container, for a page where an ancestor's
+     * `transform`, `filter` or `contain` would capture `position: fixed`.
+     * `true` portals to the `portalContainer` a `ConfigProvider` sets,
+     * `document.body` by default; a string is used as a
+     * `document.querySelector` selector; an element is used directly. Renders
+     * in place on the server and while hydrating, moving into the portal once
+     * the client takes over, so hydration matches. Portaled, it's appended to
+     * that container when it mounts, so it comes after what's already there in
+     * the reading and Tab order.
+     * @defaultValue false
+     */
+    portal?: boolean | string | HTMLElement;
+}
+/**
+ * The `Affix` component keeps its content fixed to a corner of the viewport while the page scrolls under it.
+ *
+ * It's a `<div>` with no role, so what's inside keeps its own. It sits
+ * `--bulma-affix-offset-vertical` and `--bulma-affix-offset-horizontal`
+ * from its corner's edges, plus the device's safe-area inset, and stacks at
+ * `--bulma-affix-z-index`, over the page's content and under its navbar,
+ * static or fixed, its menus, popovers, the Sidebar, the modals, Tooltip and
+ * Toast. It's as wide as its
+ * content and never wider than the viewport less its offsets. It doesn't
+ * scroll, so nothing inside it is clipped, and content that can be taller
+ * than the screen scrolls itself. Its place in the reading and Tab order is
+ * its place in the DOM, whatever corner it shows in.
+ *
+ * @function
+ * @param {AffixProps} props - Props for the Affix component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the `<div>`.
+ * @returns The `<div>`, in place or in its portal.
+ *
+ * @example
+ * <Affix position="bottom-left">
+ *   <Button color="primary">Feedback</Button>
+ * </Affix>
+ */
+export declare const Affix: React.ForwardRefExoticComponent<AffixProps & React.RefAttributes<HTMLDivElement>>;
+export default Affix;

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

@@ -30,6 +30,48 @@ export declare function resolvePortalContainer(container?: string | HTMLElement)
  * returns the DOM node to portal into.
  */
 export declare function usePortalContainer(): (container?: string | HTMLElement) => HTMLElement;
+/**
+ * What a component that takes Modal's `portal` prop does with it now. See
+ * `usePortalProp`.
+ */
+export interface PortalPropState {
+    /**
+     * Whether the content renders in its portal: `portal` is set and
+     * hydration is over. Before that it renders in place.
+     */
+    isPortaled: boolean;
+    /**
+     * The target to pass `Portal` as its `container`: the selector or element
+     * `portal` names, or `undefined` for `true`, which leaves the choice to the
+     * `portalContainer` a `ConfigProvider` sets and then `document.body`.
+     */
+    container?: string | HTMLElement;
+    /**
+     * The `portalContainer` a `ConfigProvider` sets, while it's what places the
+     * content (portaled, with `portal` set to `true`), else `undefined`. A
+     * change to it moves the content, so effects that hold its nodes depend
+     * on it.
+     */
+    defaultTarget?: string | HTMLElement;
+}
+/**
+ * Reads Modal's `portal` prop (`boolean | string | HTMLElement`) for a
+ * component that takes it: whether the content is in its portal yet, and
+ * where it goes.
+ *
+ * A portal has no server-rendered counterpart, so such a component renders in
+ * place on the server and while hydrating, and moves into its portal once the
+ * client takes over. Render the content in `Portal` with
+ * `disabled={!isPortaled}` and this `container`. Moving remounts the content,
+ * so an effect that holds one of its nodes depends on `isPortaled`, `portal`
+ * and `defaultTarget`.
+ *
+ * @function usePortalProp
+ * @param portal - The component's `portal` prop.
+ * @returns Whether it's portaled now, its `container`, and the provider's
+ * target while that places it.
+ */
+export declare function usePortalProp(portal?: boolean | string | HTMLElement): PortalPropState;
 /**
  * Props for the Portal component.
  */

package/dist/types/index.d.ts

@@ -33,6 +33,7 @@ export * from './components/TreeView.js';
 export * from './components/ScrollArea.js';
 export * from './components/Command.js';
 export * from './components/DataTable.js';
+export * from './components/Affix.js';
 export * from './elements/Block.js';
 export * from './elements/Box.js';
 export * from './elements/Button.js';

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+import type { BadgePosition } from './Badge.js';
+/** A corner of the viewport: the same four values as `BadgePosition`. */
+export type AffixPosition = BadgePosition;
+/**
+ * Props for the Affix component. The helper props, the other attributes and
+ * the `ref` land on its `<div>`.
+ *
+ * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the `<div>`, wherever it renders.
+ */
+export interface AffixProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /** What stays in the corner. */
+    children?: React.ReactNode;
+    /**
+     * The corner of the viewport it's fixed to. Physical, as Badge's and
+     * Toast's are: `'bottom-right'` stays on the right in right-to-left text.
+     * Its distance from the edges is `--bulma-affix-offset-vertical` and
+     * `--bulma-affix-offset-horizontal` plus the device's safe-area inset; a
+     * margin from the spacing helpers (`mb`, `mr`, …) adds to it. A margin on
+     * one side also takes that much of the width its content can have, which
+     * the offset variables don't, so move it far with those.
+     * @defaultValue 'bottom-right'
+     */
+    position?: AffixPosition;
+    /**
+     * Renders it into another container, for a page where an ancestor's
+     * `transform`, `filter` or `contain` would capture `position: fixed`.
+     * `true` portals to the `portalContainer` a `ConfigProvider` sets,
+     * `document.body` by default; a string is used as a
+     * `document.querySelector` selector; an element is used directly. Renders
+     * in place on the server and while hydrating, moving into the portal once
+     * the client takes over, so hydration matches. Portaled, it's appended to
+     * that container when it mounts, so it comes after what's already there in
+     * the reading and Tab order.
+     * @defaultValue false
+     */
+    portal?: boolean | string | HTMLElement;
+}
+/**
+ * The `Affix` component keeps its content fixed to a corner of the viewport while the page scrolls under it.
+ *
+ * It's a `<div>` with no role, so what's inside keeps its own. It sits
+ * `--bulma-affix-offset-vertical` and `--bulma-affix-offset-horizontal`
+ * from its corner's edges, plus the device's safe-area inset, and stacks at
+ * `--bulma-affix-z-index`, over the page's content and under its navbar,
+ * static or fixed, its menus, popovers, the Sidebar, the modals, Tooltip and
+ * Toast. It's as wide as its
+ * content and never wider than the viewport less its offsets. It doesn't
+ * scroll, so nothing inside it is clipped, and content that can be taller
+ * than the screen scrolls itself. Its place in the reading and Tab order is
+ * its place in the DOM, whatever corner it shows in.
+ *
+ * @function
+ * @param {AffixProps} props - Props for the Affix component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the `<div>`.
+ * @returns The `<div>`, in place or in its portal.
+ *
+ * @example
+ * <Affix position="bottom-left">
+ *   <Button color="primary">Feedback</Button>
+ * </Affix>
+ */
+export declare const Affix: React.ForwardRefExoticComponent<AffixProps & React.RefAttributes<HTMLDivElement>>;
+export default Affix;

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

@@ -30,6 +30,48 @@ export declare function resolvePortalContainer(container?: string | HTMLElement)
  * returns the DOM node to portal into.
  */
 export declare function usePortalContainer(): (container?: string | HTMLElement) => HTMLElement;
+/**
+ * What a component that takes Modal's `portal` prop does with it now. See
+ * `usePortalProp`.
+ */
+export interface PortalPropState {
+    /**
+     * Whether the content renders in its portal: `portal` is set and
+     * hydration is over. Before that it renders in place.
+     */
+    isPortaled: boolean;
+    /**
+     * The target to pass `Portal` as its `container`: the selector or element
+     * `portal` names, or `undefined` for `true`, which leaves the choice to the
+     * `portalContainer` a `ConfigProvider` sets and then `document.body`.
+     */
+    container?: string | HTMLElement;
+    /**
+     * The `portalContainer` a `ConfigProvider` sets, while it's what places the
+     * content (portaled, with `portal` set to `true`), else `undefined`. A
+     * change to it moves the content, so effects that hold its nodes depend
+     * on it.
+     */
+    defaultTarget?: string | HTMLElement;
+}
+/**
+ * Reads Modal's `portal` prop (`boolean | string | HTMLElement`) for a
+ * component that takes it: whether the content is in its portal yet, and
+ * where it goes.
+ *
+ * A portal has no server-rendered counterpart, so such a component renders in
+ * place on the server and while hydrating, and moves into its portal once the
+ * client takes over. Render the content in `Portal` with
+ * `disabled={!isPortaled}` and this `container`. Moving remounts the content,
+ * so an effect that holds one of its nodes depends on `isPortaled`, `portal`
+ * and `defaultTarget`.
+ *
+ * @function usePortalProp
+ * @param portal - The component's `portal` prop.
+ * @returns Whether it's portaled now, its `container`, and the provider's
+ * target while that places it.
+ */
+export declare function usePortalProp(portal?: boolean | string | HTMLElement): PortalPropState;
 /**
  * Props for the Portal component.
  */

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

@@ -33,6 +33,7 @@ export * from './components/TreeView.js';
 export * from './components/ScrollArea.js';
 export * from './components/Command.js';
 export * from './components/DataTable.js';
+export * from './components/Affix.js';
 export * from './elements/Block.js';
 export * from './elements/Box.js';
 export * from './elements/Button.js';