@allxsmith/bestax-bulma 5.30.0 → 5.31.0

package/dist/esm/elements/ToggleButton.js

@@ -29,7 +29,7 @@ import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
  *   </ToggleButton>
  * </Buttons>
  */
-const ToggleButton = forwardRef(function ToggleButton({ pressed: controlledPressed, defaultPressed = false, onPressedChange, color = 'link', className, onClick, ...props }, ref) {
+const ToggleButton = forwardRef(function ToggleButton({ pressed: controlledPressed, defaultPressed = false, onPressedChange, color = 'link', isLoading, 'aria-busy': ariaBusy, 'aria-disabled': ariaDisabled, className, onClick, ...props }, ref) {
     const isControlled = controlledPressed !== undefined;
     const [internalPressed, setInternalPressed] = useState(defaultPressed);
     const pressed = controlledPressed ?? internalPressed;
@@ -40,7 +40,13 @@ const ToggleButton = forwardRef(function ToggleButton({ pressed: controlledPress
     // The caller's onClick runs first, so a `preventDefault()` there vetoes
     // the toggle, as it does in Radix, MUI and Zag. Enter and Space reach here
     // through the button's own click, and a disabled button gets no click.
+    //
+    // A loading one gets the click but drops it. Bulma's spinner only stops a
+    // pointer, so without this a key flipped a toggle the mouse couldn't.
+    // `disabled` would stop both, but it takes focus away mid-save.
     const handleClick = (event) => {
+        if (isLoading)
+            return;
         onClick?.(event);
         if (event.defaultPrevented)
             return;
@@ -49,10 +55,12 @@ const ToggleButton = forwardRef(function ToggleButton({ pressed: controlledPress
         if (!isControlled)
             setInternalPressed(next);
     };
-    // The props are spread first, so the four things a toggle depends on win
-    // over anything a JavaScript caller or a spread object passes along: it
-    // stays a button, never submits, and reports the state it's in.
-    return (jsx(Button, { ...props, ref: ref, as: "button", type: "button", "aria-pressed": pressed, color: pressed ? color : undefined, className: classNames(selectedClass, className), onClick: handleClick }));
+    // The props are spread first, so what a toggle depends on wins over
+    // anything a JavaScript caller or a spread object passes along: it stays
+    // a button, never submits, reports the state it's in, and says it's busy
+    // and won't respond while it's loading. A caller's own `aria-busy` or
+    // `aria-disabled` stays when it isn't loading.
+    return (jsx(Button, { ...props, ref: ref, as: "button", type: "button", isLoading: isLoading, "aria-busy": isLoading || ariaBusy, "aria-disabled": isLoading || ariaDisabled, "aria-pressed": pressed, color: pressed ? color : undefined, className: classNames(selectedClass, className), onClick: handleClick }));
 });
 ToggleButton.displayName = 'ToggleButton';
 

package/dist/esm/elements/ToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.js","sources":["../../../src/elements/ToggleButton.tsx"],"sourcesContent":["import React, { forwardRef, useState } from 'react';\nimport { Button, type ButtonOwnProps } from './Button';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\n\n// Spelled out rather than as an `Exclude` of Button's colors so the API page\n// can list the values. The tests hold it to that `Exclude`, so a color Button\n// gains fails there until it's added here or left out on purpose.\n/**\n * The fills a pressed `ToggleButton` takes: `Button`'s colors, minus `text`\n * and `ghost`, which don't fill, and `white`, `light`, `dark` and `black`.\n * Bulma's color modifier fills the button and drops its border, and those four\n * fill it with about the lightness a plain button already has in one theme or\n * the other, so pressed would look like off without its border.\n */\nexport type ToggleButtonColor =\n  'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n\n/**\n * Props for the ToggleButton component. The helper props, the other button\n * attributes and the `ref` all land on the `<button>`.\n *\n * Some of `Button`'s props are left out on purpose. `as`, since only a button\n * can be pressed, and `type`, which is always `button`. `isActive`, which is\n * `pressed` here, and `isStatic`, a toggle you couldn't press. And the props\n * that change the fill (`isLight`, `isOutlined`, `isInverted`, `textColor`,\n * `bgColor` and their shades), since each would color the button in both\n * states or turn \"on\" into a faint tint. `color` takes only the fills that\n * stand out from a plain button: see `ToggleButtonColor`.\n *\n * @extraProp {React.Ref<HTMLButtonElement>} [ref] - Ref forwarded to the `<button>`.\n */\nexport interface ToggleButtonProps\n  extends\n    Omit<\n      ButtonOwnProps,\n      | 'color'\n      | 'isActive'\n      | 'isStatic'\n      | 'isLight'\n      | 'isOutlined'\n      | 'isInverted'\n      | 'textColor'\n      | 'bgColor'\n      | 'colorShade'\n      | 'backgroundColorShade'\n    >,\n    Omit<\n      React.ButtonHTMLAttributes<HTMLButtonElement>,\n      keyof ButtonOwnProps | 'type' | 'aria-pressed'\n    > {\n  /**\n   * Whether it's pressed, when you hold the state. Setting it makes the toggle\n   * controlled: a click only calls `onPressedChange`, and nothing changes until\n   * you pass the new value. Pick this or `defaultPressed` for the button's\n   * lifetime.\n   */\n  pressed?: boolean;\n  /** Whether it starts pressed, when it holds its own state. */\n  defaultPressed?: boolean;\n  /**\n   * Called with the new state each time it's toggled, by a click, Enter or\n   * Space, whether or not `pressed` is set. An `onClick` that calls\n   * `preventDefault()` stops the toggle, and this doesn't fire.\n   */\n  onPressedChange?: (pressed: boolean) => void;\n  /**\n   * The fill while it's pressed. Not pressed, it's a plain button, so the fill\n   * is the difference people see. `white`, `light`, `dark` and `black` aren't\n   * offered, since in one theme or the other each fills about as light or dark\n   * as a plain button already is. Of the rest, a pale one such as `warning`\n   * changes less than the default `link`.\n   */\n  color?: ToggleButtonColor;\n  /**\n   * The label, which stays the same in both states: a screen reader announces\n   * whether it's pressed, so \"Mute\" stays \"Mute\". An icon can swap, but an\n   * icon-only toggle needs an `aria-label` that doesn't. A label that changes\n   * (\"Play\", then \"Pause\") belongs on a plain `Button`.\n   */\n  children?: React.ReactNode;\n  /**\n   * Not accepted: `aria-pressed` follows the state. Declared because JSX lets a\n   * hyphenated attribute through when the props don't name it, so leaving it\n   * out of the type alone would not reject `aria-pressed=\"mixed\"`.\n   * @internal\n   */\n  'aria-pressed'?: never;\n}\n\n/**\n * The `ToggleButton` component renders a button that stays pressed until it's pressed again, and says whether it's on through `aria-pressed`.\n *\n * It's always a `<button type=\"button\">`, so it never submits a form and\n * carries no form value: a setting saved with a form is a `Checkbox` or a\n * `Switch`. A set of toggles that each turn on and off on their own goes in\n * `Buttons hasAddons` with `role=\"group\"` and an `aria-label`. A set where only\n * one can be on is a radio group rather than a row of these: use `Radios`.\n *\n * @function\n * @param {ToggleButtonProps} props - Props for the ToggleButton component.\n * @param {React.Ref<HTMLButtonElement>} ref - Forwarded ref to the `<button>`.\n * @returns {JSX.Element} The rendered toggle button.\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/button/ | APG button pattern}\n *\n * @example\n * <ToggleButton onPressedChange={setMuted}>Mute</ToggleButton>\n *\n * @example\n * <Buttons hasAddons role=\"group\" aria-label=\"Text style\">\n *   <ToggleButton aria-label=\"Bold\" pressed={bold} onPressedChange={setBold}>\n *     <Icon name=\"bold\" />\n *   </ToggleButton>\n * </Buttons>\n */\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n  function ToggleButton(\n    {\n      pressed: controlledPressed,\n      defaultPressed = false,\n      onPressedChange,\n      color = 'link',\n      className,\n      onClick,\n      ...props\n    },\n    ref\n  ) {\n    const isControlled = controlledPressed !== undefined;\n    const [internalPressed, setInternalPressed] = useState(defaultPressed);\n    const pressed = controlledPressed ?? internalPressed;\n\n    // Prefixed like Button's own classes, which a hand-written\n    // `className=\"is-selected\"` could not be under ConfigProvider classPrefix.\n    // Bulma lifts `is-selected` above its neighbours in `.buttons.has-addons`.\n    const selectedClass = usePrefixedClassNames({ 'is-selected': pressed });\n\n    // The caller's onClick runs first, so a `preventDefault()` there vetoes\n    // the toggle, as it does in Radix, MUI and Zag. Enter and Space reach here\n    // through the button's own click, and a disabled button gets no click.\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n      if (event.defaultPrevented) return;\n      const next = !pressed;\n      onPressedChange?.(next);\n      if (!isControlled) setInternalPressed(next);\n    };\n\n    // The props are spread first, so the four things a toggle depends on win\n    // over anything a JavaScript caller or a spread object passes along: it\n    // stays a button, never submits, and reports the state it's in.\n    return (\n      <Button\n        {...props}\n        ref={ref}\n        as=\"button\"\n        type=\"button\"\n        aria-pressed={pressed}\n        color={pressed ? color : undefined}\n        className={classNames(selectedClass, className)}\n        onClick={handleClick}\n      />\n    );\n  }\n);\n\nToggleButton.displayName = 'ToggleButton';\n\nexport default ToggleButton;\n"],"names":["_jsx"],"mappings":";;;;;;AAyFA;;;;;;;;;;;;;;;;;;;;;;;;AAwBG;AACI,MAAM,YAAY,GAAG,UAAU,CACpC,SAAS,YAAY,CACnB,EACE,OAAO,EAAE,iBAAiB,EAC1B,cAAc,GAAG,KAAK,EACtB,eAAe,EACf,KAAK,GAAG,MAAM,EACd,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACT,EACD,GAAG,EAAA;AAEH,IAAA,MAAM,YAAY,GAAG,iBAAiB,KAAK,SAAS;IACpD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC;AACtE,IAAA,MAAM,OAAO,GAAG,iBAAiB,IAAI,eAAe;;;;IAKpD,MAAM,aAAa,GAAG,qBAAqB,CAAC,EAAE,aAAa,EAAE,OAAO,EAAE,CAAC;;;;AAKvE,IAAA,MAAM,WAAW,GAAG,CAAC,KAA0C,KAAI;AACjE,QAAA,OAAO,GAAG,KAAK,CAAC;QAChB,IAAI,KAAK,CAAC,gBAAgB;YAAE;AAC5B,QAAA,MAAM,IAAI,GAAG,CAAC,OAAO;AACrB,QAAA,eAAe,GAAG,IAAI,CAAC;AACvB,QAAA,IAAI,CAAC,YAAY;YAAE,kBAAkB,CAAC,IAAI,CAAC;AAC7C,IAAA,CAAC;;;;IAKD,QACEA,IAAC,MAAM,EAAA,EAAA,GACD,KAAK,EACT,GAAG,EAAE,GAAG,EACR,EAAE,EAAC,QAAQ,EACX,IAAI,EAAC,QAAQ,EAAA,cAAA,EACC,OAAO,EACrB,KAAK,EAAE,OAAO,GAAG,KAAK,GAAG,SAAS,EAClC,SAAS,EAAE,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,EAC/C,OAAO,EAAE,WAAW,EAAA,CACpB;AAEN,CAAC;AAGH,YAAY,CAAC,WAAW,GAAG,cAAc;;"}
+{"version":3,"file":"ToggleButton.js","sources":["../../../src/elements/ToggleButton.tsx"],"sourcesContent":["import React, { forwardRef, useState } from 'react';\nimport { Button, type ButtonOwnProps } from './Button';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\n\n// Spelled out rather than as an `Exclude` of Button's colors so the API page\n// can list the values. The tests hold it to that `Exclude`, so a color Button\n// gains fails there until it's added here or left out on purpose.\n/**\n * The fills a pressed `ToggleButton` takes: `Button`'s colors, minus `text`\n * and `ghost`, which don't fill, and `white`, `light`, `dark` and `black`.\n * Bulma's color modifier fills the button and drops its border, and those four\n * fill it with about the lightness a plain button already has in one theme or\n * the other, so pressed would look like off without its border.\n */\nexport type ToggleButtonColor =\n  'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n\n/**\n * Props for the ToggleButton component. The helper props, the other button\n * attributes and the `ref` all land on the `<button>`.\n *\n * Some of `Button`'s props are left out on purpose. `as`, since only a button\n * can be pressed, and `type`, which is always `button`. `isActive`, which is\n * `pressed` here, and `isStatic`, a toggle you couldn't press. And the props\n * that change the fill (`isLight`, `isOutlined`, `isInverted`, `textColor`,\n * `bgColor` and their shades), since each would color the button in both\n * states or turn \"on\" into a faint tint. `color` takes only the fills that\n * stand out from a plain button: see `ToggleButtonColor`.\n *\n * @extraProp {React.Ref<HTMLButtonElement>} [ref] - Ref forwarded to the `<button>`.\n */\nexport interface ToggleButtonProps\n  extends\n    Omit<\n      ButtonOwnProps,\n      | 'color'\n      | 'isActive'\n      | 'isStatic'\n      | 'isLight'\n      | 'isOutlined'\n      | 'isInverted'\n      | 'textColor'\n      | 'bgColor'\n      | 'colorShade'\n      | 'backgroundColorShade'\n    >,\n    Omit<\n      React.ButtonHTMLAttributes<HTMLButtonElement>,\n      keyof ButtonOwnProps | 'type' | 'aria-pressed'\n    > {\n  /**\n   * Whether it's pressed, when you hold the state. Setting it makes the toggle\n   * controlled: a click only calls `onPressedChange`, and nothing changes until\n   * you pass the new value. Pick this or `defaultPressed` for the button's\n   * lifetime.\n   */\n  pressed?: boolean;\n  /** Whether it starts pressed, when it holds its own state. */\n  defaultPressed?: boolean;\n  /**\n   * Called with the new state each time it's toggled, whether or not\n   * `pressed` is set. An `onClick` that calls `preventDefault()` stops the\n   * toggle, and this doesn't fire.\n   */\n  onPressedChange?: (pressed: boolean) => void;\n  /**\n   * The fill while it's pressed. Not pressed, it's a plain button, so the fill\n   * is the difference people see. `white`, `light`, `dark` and `black` aren't\n   * offered, since in one theme or the other each fills about as light or dark\n   * as a plain button already is. Of the rest, a pale one such as `warning`\n   * changes less than the default `link`.\n   */\n  color?: ToggleButtonColor;\n  /**\n   * The label, which stays the same in both states: a screen reader announces\n   * whether it's pressed, so \"Mute\" stays \"Mute\". An icon can swap, but an\n   * icon-only toggle needs an `aria-label` that doesn't. A label that changes\n   * (\"Play\", then \"Pause\") belongs on a plain `Button`.\n   */\n  children?: React.ReactNode;\n  /**\n   * Shows Bulma's spinner in place of the label and holds the toggle where it\n   * is: a click, Enter or Space does nothing, so neither `onClick` nor\n   * `onPressedChange` fires, until it's cleared. Set it while a change is\n   * saving. The button carries `aria-busy` and `aria-disabled` meanwhile, and\n   * stays focusable, so focus isn't lost mid-save. Under\n   * `prefers-reduced-motion: reduce` the spinner stops and stays drawn (with\n   * bestax's CSS loaded).\n   */\n  isLoading?: boolean;\n  /**\n   * Not accepted: `aria-pressed` follows the state. Declared because JSX lets a\n   * hyphenated attribute through when the props don't name it, so leaving it\n   * out of the type alone would not reject `aria-pressed=\"mixed\"`.\n   * @internal\n   */\n  'aria-pressed'?: never;\n}\n\n/**\n * The `ToggleButton` component renders a button that stays pressed until it's pressed again, and says whether it's on through `aria-pressed`.\n *\n * It's always a `<button type=\"button\">`, so it never submits a form and\n * carries no form value: a setting saved with a form is a `Checkbox` or a\n * `Switch`. A set of toggles that each turn on and off on their own goes in\n * `Buttons hasAddons` with `role=\"group\"` and an `aria-label`. A set where only\n * one can be on is a radio group rather than a row of these: use `Radios`.\n *\n * @function\n * @param {ToggleButtonProps} props - Props for the ToggleButton component.\n * @param {React.Ref<HTMLButtonElement>} ref - Forwarded ref to the `<button>`.\n * @returns {JSX.Element} The rendered toggle button.\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/button/ | APG button pattern}\n *\n * @example\n * <ToggleButton onPressedChange={setMuted}>Mute</ToggleButton>\n *\n * @example\n * <Buttons hasAddons role=\"group\" aria-label=\"Text style\">\n *   <ToggleButton aria-label=\"Bold\" pressed={bold} onPressedChange={setBold}>\n *     <Icon name=\"bold\" />\n *   </ToggleButton>\n * </Buttons>\n */\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n  function ToggleButton(\n    {\n      pressed: controlledPressed,\n      defaultPressed = false,\n      onPressedChange,\n      color = 'link',\n      isLoading,\n      'aria-busy': ariaBusy,\n      'aria-disabled': ariaDisabled,\n      className,\n      onClick,\n      ...props\n    },\n    ref\n  ) {\n    const isControlled = controlledPressed !== undefined;\n    const [internalPressed, setInternalPressed] = useState(defaultPressed);\n    const pressed = controlledPressed ?? internalPressed;\n\n    // Prefixed like Button's own classes, which a hand-written\n    // `className=\"is-selected\"` could not be under ConfigProvider classPrefix.\n    // Bulma lifts `is-selected` above its neighbours in `.buttons.has-addons`.\n    const selectedClass = usePrefixedClassNames({ 'is-selected': pressed });\n\n    // The caller's onClick runs first, so a `preventDefault()` there vetoes\n    // the toggle, as it does in Radix, MUI and Zag. Enter and Space reach here\n    // through the button's own click, and a disabled button gets no click.\n    //\n    // A loading one gets the click but drops it. Bulma's spinner only stops a\n    // pointer, so without this a key flipped a toggle the mouse couldn't.\n    // `disabled` would stop both, but it takes focus away mid-save.\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n      if (isLoading) return;\n      onClick?.(event);\n      if (event.defaultPrevented) return;\n      const next = !pressed;\n      onPressedChange?.(next);\n      if (!isControlled) setInternalPressed(next);\n    };\n\n    // The props are spread first, so what a toggle depends on wins over\n    // anything a JavaScript caller or a spread object passes along: it stays\n    // a button, never submits, reports the state it's in, and says it's busy\n    // and won't respond while it's loading. A caller's own `aria-busy` or\n    // `aria-disabled` stays when it isn't loading.\n    return (\n      <Button\n        {...props}\n        ref={ref}\n        as=\"button\"\n        type=\"button\"\n        isLoading={isLoading}\n        aria-busy={isLoading || ariaBusy}\n        aria-disabled={isLoading || ariaDisabled}\n        aria-pressed={pressed}\n        color={pressed ? color : undefined}\n        className={classNames(selectedClass, className)}\n        onClick={handleClick}\n      />\n    );\n  }\n);\n\nToggleButton.displayName = 'ToggleButton';\n\nexport default ToggleButton;\n"],"names":["_jsx"],"mappings":";;;;;;AAmGA;;;;;;;;;;;;;;;;;;;;;;;;AAwBG;AACI,MAAM,YAAY,GAAG,UAAU,CACpC,SAAS,YAAY,CACnB,EACE,OAAO,EAAE,iBAAiB,EAC1B,cAAc,GAAG,KAAK,EACtB,eAAe,EACf,KAAK,GAAG,MAAM,EACd,SAAS,EACT,WAAW,EAAE,QAAQ,EACrB,eAAe,EAAE,YAAY,EAC7B,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACT,EACD,GAAG,EAAA;AAEH,IAAA,MAAM,YAAY,GAAG,iBAAiB,KAAK,SAAS;IACpD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC;AACtE,IAAA,MAAM,OAAO,GAAG,iBAAiB,IAAI,eAAe;;;;IAKpD,MAAM,aAAa,GAAG,qBAAqB,CAAC,EAAE,aAAa,EAAE,OAAO,EAAE,CAAC;;;;;;;;AASvE,IAAA,MAAM,WAAW,GAAG,CAAC,KAA0C,KAAI;AACjE,QAAA,IAAI,SAAS;YAAE;AACf,QAAA,OAAO,GAAG,KAAK,CAAC;QAChB,IAAI,KAAK,CAAC,gBAAgB;YAAE;AAC5B,QAAA,MAAM,IAAI,GAAG,CAAC,OAAO;AACrB,QAAA,eAAe,GAAG,IAAI,CAAC;AACvB,QAAA,IAAI,CAAC,YAAY;YAAE,kBAAkB,CAAC,IAAI,CAAC;AAC7C,IAAA,CAAC;;;;;;IAOD,QACEA,GAAA,CAAC,MAAM,EAAA,EAAA,GACD,KAAK,EACT,GAAG,EAAE,GAAG,EACR,EAAE,EAAC,QAAQ,EACX,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,SAAS,EAAA,WAAA,EACT,SAAS,IAAI,QAAQ,EAAA,eAAA,EACjB,SAAS,IAAI,YAAY,kBAC1B,OAAO,EACrB,KAAK,EAAE,OAAO,GAAG,KAAK,GAAG,SAAS,EAClC,SAAS,EAAE,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,EAC/C,OAAO,EAAE,WAAW,EAAA,CACpB;AAEN,CAAC;AAGH,YAAY,CAAC,WAAW,GAAG,cAAc;;"}