@allxsmith/bestax-bulma 5.30.0 → 5.31.0

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

@@ -8,7 +8,16 @@ export type TooltipColor = 'primary' | 'link' | 'info' | 'success' | 'warning' |
 export type TooltipSize = 'small' | 'medium' | 'large';
 /**
  * Props for the Tooltip component.
- * @extraProp {React.ReactNode} [children] - The element that triggers the tooltip.
+ * @extraProp {React.ReactNode} [children] - The element that triggers the
+ * tooltip. Its `aria-describedby` points at the tooltip, after any ids it
+ * already had, so a screen reader reads the tooltip as its description when
+ * it takes focus, even while the tooltip is hidden. That takes a single
+ * element which passes `aria-describedby` on to its DOM node, as native
+ * elements and bestax components do, and takes focus itself, such as a
+ * button, a link or a `Span` with `tabIndex={0}`: something focusable inside
+ * it doesn't get the link, and text, a fragment or several elements get none.
+ * A development build warns when the first element Tab reaches in the
+ * trigger doesn't carry the link, or there isn't one.
  * @extraProp {string} [className] - Additional CSS classes.
  */
 export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color' | 'content'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
@@ -19,7 +28,8 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>
      * Nothing in it should take focus or a click: it isn't in the Tab order
      * while hidden, focus there isn't counted as being in the tooltip, and
      * Escape hiding it would drop that focus. For links or buttons, use
-     * `HoverCard` or `Popover`.
+     * `HoverCard` or `Popover`. A screen reader reads it as plain text, since
+     * it's the trigger's description.
      */
     content?: React.ReactNode;
     /** Position of the tooltip. Default: 'top'. */
@@ -81,7 +91,8 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>
  * the trigger and comes back, or, with `openOnTap`, until the next tap on
  * the trigger. The key always goes on too, to whatever has focus or a
  * `Modal` or `Popover` around it, since a tooltip only adds to what's
- * there.
+ * there. The tooltip is its trigger's description, so a screen reader reads
+ * it as the trigger takes focus, whether it's showing yet or not.
  *
  * @function
  * @param {TooltipProps} props - Props for the Tooltip component.
@@ -94,15 +105,17 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>
  * </Tooltip>
  *
  * @example
- * // Positioned tooltip with color
- * <Tooltip label="Delete item" position="right" color="danger">
- *   <Icon icon="fas fa-trash" />
+ * // Positioned tooltip with color, on an icon-only button with a name of its own
+ * <Tooltip label="Moves it to the trash" position="right" color="danger">
+ *   <Button aria-label="Delete">
+ *     <Icon name="fas fa-trash" />
+ *   </Button>
  * </Tooltip>
  *
  * @example
  * // Multiline tooltip
  * <Tooltip label="This is a longer tooltip that wraps to multiple lines" multiline>
- *   <span>?</span>
+ *   <button>More info</button>
  * </Tooltip>
  */
 export declare const Tooltip: React.FC<TooltipProps>;

package/dist/types/elements/Buttons.d.ts

@@ -36,5 +36,6 @@ interface ButtonsProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaC
 export declare const Buttons: React.FC<ButtonsProps> & {
     Button: import("../index.js").PolymorphicComponent<import("./Button.js").ButtonOwnProps, "button", never>;
     LinkButton: import("../index.js").PolymorphicComponent<import("./LinkButton.js").LinkButtonOwnProps, "button", never>;
+    ToggleButton: React.ForwardRefExoticComponent<import("./ToggleButton.js").ToggleButtonProps & React.RefAttributes<HTMLButtonElement>>;
 };
 export {};

package/dist/types/elements/ToggleButton.d.ts

@@ -33,9 +33,9 @@ export interface ToggleButtonProps extends Omit<ButtonOwnProps, 'color' | 'isAct
     /** Whether it starts pressed, when it holds its own state. */
     defaultPressed?: boolean;
     /**
-     * Called with the new state each time it's toggled, by a click, Enter or
-     * Space, whether or not `pressed` is set. An `onClick` that calls
-     * `preventDefault()` stops the toggle, and this doesn't fire.
+     * Called with the new state each time it's toggled, whether or not
+     * `pressed` is set. An `onClick` that calls `preventDefault()` stops the
+     * toggle, and this doesn't fire.
      */
     onPressedChange?: (pressed: boolean) => void;
     /**
@@ -53,6 +53,16 @@ export interface ToggleButtonProps extends Omit<ButtonOwnProps, 'color' | 'isAct
      * ("Play", then "Pause") belongs on a plain `Button`.
      */
     children?: React.ReactNode;
+    /**
+     * Shows Bulma's spinner in place of the label and holds the toggle where it
+     * is: a click, Enter or Space does nothing, so neither `onClick` nor
+     * `onPressedChange` fires, until it's cleared. Set it while a change is
+     * saving. The button carries `aria-busy` and `aria-disabled` meanwhile, and
+     * stays focusable, so focus isn't lost mid-save. Under
+     * `prefers-reduced-motion: reduce` the spinner stops and stays drawn (with
+     * bestax's CSS loaded).
+     */
+    isLoading?: boolean;
     /**
      * Not accepted: `aria-pressed` follows the state. Declared because JSX lets a
      * hyphenated attribute through when the props don't name it, so leaving it

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

@@ -8,7 +8,16 @@ export type TooltipColor = 'primary' | 'link' | 'info' | 'success' | 'warning' |
 export type TooltipSize = 'small' | 'medium' | 'large';
 /**
  * Props for the Tooltip component.
- * @extraProp {React.ReactNode} [children] - The element that triggers the tooltip.
+ * @extraProp {React.ReactNode} [children] - The element that triggers the
+ * tooltip. Its `aria-describedby` points at the tooltip, after any ids it
+ * already had, so a screen reader reads the tooltip as its description when
+ * it takes focus, even while the tooltip is hidden. That takes a single
+ * element which passes `aria-describedby` on to its DOM node, as native
+ * elements and bestax components do, and takes focus itself, such as a
+ * button, a link or a `Span` with `tabIndex={0}`: something focusable inside
+ * it doesn't get the link, and text, a fragment or several elements get none.
+ * A development build warns when the first element Tab reaches in the
+ * trigger doesn't carry the link, or there isn't one.
  * @extraProp {string} [className] - Additional CSS classes.
  */
 export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color' | 'content'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
@@ -19,7 +28,8 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>
      * Nothing in it should take focus or a click: it isn't in the Tab order
      * while hidden, focus there isn't counted as being in the tooltip, and
      * Escape hiding it would drop that focus. For links or buttons, use
-     * `HoverCard` or `Popover`.
+     * `HoverCard` or `Popover`. A screen reader reads it as plain text, since
+     * it's the trigger's description.
      */
     content?: React.ReactNode;
     /** Position of the tooltip. Default: 'top'. */
@@ -81,7 +91,8 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>
  * the trigger and comes back, or, with `openOnTap`, until the next tap on
  * the trigger. The key always goes on too, to whatever has focus or a
  * `Modal` or `Popover` around it, since a tooltip only adds to what's
- * there.
+ * there. The tooltip is its trigger's description, so a screen reader reads
+ * it as the trigger takes focus, whether it's showing yet or not.
  *
  * @function
  * @param {TooltipProps} props - Props for the Tooltip component.
@@ -94,15 +105,17 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>
  * </Tooltip>
  *
  * @example
- * // Positioned tooltip with color
- * <Tooltip label="Delete item" position="right" color="danger">
- *   <Icon icon="fas fa-trash" />
+ * // Positioned tooltip with color, on an icon-only button with a name of its own
+ * <Tooltip label="Moves it to the trash" position="right" color="danger">
+ *   <Button aria-label="Delete">
+ *     <Icon name="fas fa-trash" />
+ *   </Button>
  * </Tooltip>
  *
  * @example
  * // Multiline tooltip
  * <Tooltip label="This is a longer tooltip that wraps to multiple lines" multiline>
- *   <span>?</span>
+ *   <button>More info</button>
  * </Tooltip>
  */
 export declare const Tooltip: React.FC<TooltipProps>;

package/dist/types-cjs/elements/Buttons.d.ts

@@ -36,5 +36,6 @@ interface ButtonsProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaC
 export declare const Buttons: React.FC<ButtonsProps> & {
     Button: import("../index.js").PolymorphicComponent<import("./Button.js").ButtonOwnProps, "button", never>;
     LinkButton: import("../index.js").PolymorphicComponent<import("./LinkButton.js").LinkButtonOwnProps, "button", never>;
+    ToggleButton: React.ForwardRefExoticComponent<import("./ToggleButton.js").ToggleButtonProps & React.RefAttributes<HTMLButtonElement>>;
 };
 export {};

package/dist/types-cjs/elements/ToggleButton.d.ts

@@ -33,9 +33,9 @@ export interface ToggleButtonProps extends Omit<ButtonOwnProps, 'color' | 'isAct
     /** Whether it starts pressed, when it holds its own state. */
     defaultPressed?: boolean;
     /**
-     * Called with the new state each time it's toggled, by a click, Enter or
-     * Space, whether or not `pressed` is set. An `onClick` that calls
-     * `preventDefault()` stops the toggle, and this doesn't fire.
+     * Called with the new state each time it's toggled, whether or not
+     * `pressed` is set. An `onClick` that calls `preventDefault()` stops the
+     * toggle, and this doesn't fire.
      */
     onPressedChange?: (pressed: boolean) => void;
     /**
@@ -53,6 +53,16 @@ export interface ToggleButtonProps extends Omit<ButtonOwnProps, 'color' | 'isAct
      * ("Play", then "Pause") belongs on a plain `Button`.
      */
     children?: React.ReactNode;
+    /**
+     * Shows Bulma's spinner in place of the label and holds the toggle where it
+     * is: a click, Enter or Space does nothing, so neither `onClick` nor
+     * `onPressedChange` fires, until it's cleared. Set it while a change is
+     * saving. The button carries `aria-busy` and `aria-disabled` meanwhile, and
+     * stays focusable, so focus isn't lost mid-save. Under
+     * `prefers-reduced-motion: reduce` the spinner stops and stays drawn (with
+     * bestax's CSS loaded).
+     */
+    isLoading?: boolean;
     /**
      * Not accepted: `aria-pressed` follows the state. Declared because JSX lets a
      * hyphenated attribute through when the props don't name it, so leaving it

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allxsmith/bestax-bulma",
-  "version": "5.30.0",
+  "version": "5.31.0",
   "description": "A fully-typed React component library for the Bulma CSS framework. Build modern UIs quickly with reusable, accessible, and customizable Bulma-based React components.",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",