@allxsmith/bestax-bulma 5.67.10 → 5.67.12

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../src/elements/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { buttonType } from '../helpers/buttonType';\n\nconst validTagColors = [\n  'primary',\n  'link',\n  'info',\n  'success',\n  'warning',\n  'danger',\n  'black',\n  'dark',\n  'light',\n  'white',\n] as const;\n\n/**\n * Valid color values for the Tag component (Bulma tag colors).\n */\nexport type TagColor = (typeof validTagColors)[number];\n\nconst validTagSizes = ['normal', 'medium', 'large'] as const;\n/**\n * Valid size values for the Tag component (Bulma tag sizes).\n */\nexport type TagSize = (typeof validTagSizes)[number];\n\n/**\n * Props for the Tag component.\n */\nexport interface TagProps\n  extends\n    Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>,\n    Omit<BulmaClassesProps, 'color'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Bulma color modifier for the tag. */\n  color?: TagColor;\n  /** Tag size. */\n  size?: TagSize;\n  /** Use the light color variant. */\n  isLight?: boolean;\n  /** Renders a rounded tag. */\n  isRounded?: boolean;\n  /**\n   * Renders a delete-style tag (delete button). The button renders\n   * `type=\"button\"`, so it does not submit a form around it, and is named\n   * \"Delete tag\" unless you pass an `aria-label`. An empty one, or a spread\n   * carrying `'aria-label': undefined`, keeps that name rather than leaving\n   * the button unnamed.\n   */\n  isDelete?: boolean;\n  /** Adds hover effect to the tag. */\n  isHoverable?: boolean;\n  /** Callback for delete tag/button. */\n  onDelete?: () => void;\n  /** Tag content. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Tag` component renders a Bulma-styled label or badge.\n *\n * @function\n * @param {TagProps} props - Props for the Tag component.\n * @returns {JSX.Element} The rendered tag element.\n * @see {@link https://bulma.io/documentation/elements/tag/ | Bulma Tag documentation}\n */\nexport const Tag: React.FC<TagProps> = ({\n  className,\n  color,\n  size,\n  isLight,\n  isRounded,\n  isDelete,\n  isHoverable,\n  onDelete,\n  children,\n  ...props\n}) => {\n  /**\n   * Generates Bulma helper classes and separates out remaining props.\n   */\n  const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });\n\n  const bulmaClasses = usePrefixedClassNames('tag', {\n    [`is-${color}`]: color && validTagColors.includes(color),\n    [`is-${size}`]: size && size !== 'normal' && validTagSizes.includes(size),\n    'is-light': isLight,\n    'is-rounded': isRounded,\n    'is-delete': isDelete,\n    'is-hoverable': isHoverable,\n  });\n\n  const tagClasses = classNames(bulmaClasses, bulmaHelperClasses, className);\n\n  if (isDelete) {\n    return (\n      <button\n        className={tagClasses}\n        onClick={onDelete}\n        {...rest}\n        // After the spread, reading through it: a key the spread carries with\n        // no value would otherwise erase the default, leaving a nameless\n        // button that submits the form around it. An empty label falls back\n        // too: the button is drawn as an icon, so `''` would leave it unnamed.\n        // A caller's own value still wins; `buttonType` says more.\n        aria-label={rest['aria-label'] || 'Delete tag'}\n        type={buttonType((rest as { type?: unknown }).type)}\n      />\n    );\n  }\n\n  return (\n    <span className={tagClasses} {...rest}>\n      {children}\n    </span>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;AAKA,MAAM,cAAc,GAAG;IACrB,SAAS;IACT,MAAM;IACN,MAAM;IACN,SAAS;IACT,SAAS;IACT,QAAQ;IACR,OAAO;IACP,MAAM;IACN,OAAO;IACP,OAAO;CACC;AAOV,MAAM,aAAa,GAAG,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAU;AAuC5D;;;;;;;AAOG;AACI,MAAM,GAAG,GAAuB,CAAC,EACtC,SAAS,EACT,KAAK,EACL,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;AACH;;AAEG;AACH,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC;AAElE,IAAA,MAAM,YAAY,GAAG,qBAAqB,CAAC,KAAK,EAAE;AAChD,QAAA,CAAC,CAAA,GAAA,EAAM,KAAK,CAAA,CAAE,GAAG,KAAK,IAAI,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC;AACxD,QAAA,CAAC,MAAM,IAAI,CAAA,CAAE,GAAG,IAAI,IAAI,IAAI,KAAK,QAAQ,IAAI,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC;AACzE,QAAA,UAAU,EAAE,OAAO;AACnB,QAAA,YAAY,EAAE,SAAS;AACvB,QAAA,WAAW,EAAE,QAAQ;AACrB,QAAA,cAAc,EAAE,WAAW;AAC5B,KAAA,CAAC;IAEF,MAAM,UAAU,GAAG,UAAU,CAAC,YAAY,EAAE,kBAAkB,EAAE,SAAS,CAAC;IAE1E,IAAI,QAAQ,EAAE;AACZ,QAAA,QACEA,GAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAE,UAAU,EACrB,OAAO,EAAE,QAAQ,EAAA,GACb,IAAI,EAAA,YAAA,EAMI,IAAI,CAAC,YAAY,CAAC,IAAI,YAAY,EAC9C,IAAI,EAAE,UAAU,CAAE,IAA2B,CAAC,IAAI,CAAC,EAAA,CACnD;IAEN;IAEA,QACEA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,UAAU,EAAA,GAAM,IAAI,EAAA,QAAA,EAClC,QAAQ,EAAA,CACJ;AAEX;;"}
+{"version":3,"file":"Tag.js","sources":["../../../src/elements/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { buttonType } from '../helpers/buttonType';\n\nconst validTagColors = [\n  'primary',\n  'link',\n  'info',\n  'success',\n  'warning',\n  'danger',\n  'black',\n  'dark',\n  'light',\n  'white',\n] as const;\n\n/**\n * Valid color values for the Tag component (Bulma tag colors).\n */\nexport type TagColor = (typeof validTagColors)[number];\n\nconst validTagSizes = ['normal', 'medium', 'large'] as const;\n/**\n * Valid size values for the Tag component (Bulma tag sizes).\n */\nexport type TagSize = (typeof validTagSizes)[number];\n\n/**\n * Props for the Tag component.\n */\nexport interface TagProps\n  extends\n    Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>,\n    Omit<BulmaClassesProps, 'color'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /**\n   * Bulma color modifier for the tag.\n   *\n   * `light` takes the light color's own text from bestax's stylesheets. With\n   * Bulma's CSS alone, a light tag's text inherits the color around it, which\n   * on a dark page is hard to read.\n   */\n  color?: TagColor;\n  /** Tag size. */\n  size?: TagSize;\n  /**\n   * Use the light color variant. The light color has none, so\n   * `color=\"light\"` with `isLight` looks the same as without it.\n   */\n  isLight?: boolean;\n  /** Renders a rounded tag. */\n  isRounded?: boolean;\n  /**\n   * Renders a delete-style tag (delete button). The button renders\n   * `type=\"button\"`, so it does not submit a form around it, and is named\n   * \"Delete tag\" unless you pass an `aria-label`. An empty one, or a spread\n   * carrying `'aria-label': undefined`, keeps that name rather than leaving\n   * the button unnamed.\n   */\n  isDelete?: boolean;\n  /** Adds hover effect to the tag. */\n  isHoverable?: boolean;\n  /** Callback for delete tag/button. */\n  onDelete?: () => void;\n  /** Tag content. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Tag` component renders a Bulma-styled label or badge.\n *\n * @function\n * @param {TagProps} props - Props for the Tag component.\n * @returns {JSX.Element} The rendered tag element.\n * @see {@link https://bulma.io/documentation/elements/tag/ | Bulma Tag documentation}\n */\nexport const Tag: React.FC<TagProps> = ({\n  className,\n  color,\n  size,\n  isLight,\n  isRounded,\n  isDelete,\n  isHoverable,\n  onDelete,\n  children,\n  ...props\n}) => {\n  /**\n   * Generates Bulma helper classes and separates out remaining props.\n   */\n  const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });\n\n  const bulmaClasses = usePrefixedClassNames('tag', {\n    [`is-${color}`]: color && validTagColors.includes(color),\n    [`is-${size}`]: size && size !== 'normal' && validTagSizes.includes(size),\n    // The light color's own class is this key too, and this one comes later,\n    // so it has to set the class for `light` as well or it erases it.\n    'is-light': isLight || color === 'light',\n    'is-rounded': isRounded,\n    'is-delete': isDelete,\n    'is-hoverable': isHoverable,\n  });\n\n  const tagClasses = classNames(bulmaClasses, bulmaHelperClasses, className);\n\n  if (isDelete) {\n    return (\n      <button\n        className={tagClasses}\n        onClick={onDelete}\n        {...rest}\n        // After the spread, reading through it: a key the spread carries with\n        // no value would otherwise erase the default, leaving a nameless\n        // button that submits the form around it. An empty label falls back\n        // too: the button is drawn as an icon, so `''` would leave it unnamed.\n        // A caller's own value still wins; `buttonType` says more.\n        aria-label={rest['aria-label'] || 'Delete tag'}\n        type={buttonType((rest as { type?: unknown }).type)}\n      />\n    );\n  }\n\n  return (\n    <span className={tagClasses} {...rest}>\n      {children}\n    </span>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;AAKA,MAAM,cAAc,GAAG;IACrB,SAAS;IACT,MAAM;IACN,MAAM;IACN,SAAS;IACT,SAAS;IACT,QAAQ;IACR,OAAO;IACP,MAAM;IACN,OAAO;IACP,OAAO;CACC;AAOV,MAAM,aAAa,GAAG,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAU;AAgD5D;;;;;;;AAOG;AACI,MAAM,GAAG,GAAuB,CAAC,EACtC,SAAS,EACT,KAAK,EACL,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;AACH;;AAEG;AACH,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC;AAElE,IAAA,MAAM,YAAY,GAAG,qBAAqB,CAAC,KAAK,EAAE;AAChD,QAAA,CAAC,CAAA,GAAA,EAAM,KAAK,CAAA,CAAE,GAAG,KAAK,IAAI,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC;AACxD,QAAA,CAAC,MAAM,IAAI,CAAA,CAAE,GAAG,IAAI,IAAI,IAAI,KAAK,QAAQ,IAAI,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC;;;AAGzE,QAAA,UAAU,EAAE,OAAO,IAAI,KAAK,KAAK,OAAO;AACxC,QAAA,YAAY,EAAE,SAAS;AACvB,QAAA,WAAW,EAAE,QAAQ;AACrB,QAAA,cAAc,EAAE,WAAW;AAC5B,KAAA,CAAC;IAEF,MAAM,UAAU,GAAG,UAAU,CAAC,YAAY,EAAE,kBAAkB,EAAE,SAAS,CAAC;IAE1E,IAAI,QAAQ,EAAE;AACZ,QAAA,QACEA,GAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAE,UAAU,EACrB,OAAO,EAAE,QAAQ,EAAA,GACb,IAAI,EAAA,YAAA,EAMI,IAAI,CAAC,YAAY,CAAC,IAAI,YAAY,EAC9C,IAAI,EAAE,UAAU,CAAE,IAA2B,CAAC,IAAI,CAAC,EAAA,CACnD;IAEN;IAEA,QACEA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,UAAU,EAAA,GAAM,IAAI,EAAA,QAAA,EAClC,QAAQ,EAAA,CACJ;AAEX;;"}

package/dist/esm/form/ColorInputBase.js

@@ -127,7 +127,9 @@ const ColorInputBase = forwardRef((props, ref) => {
         [`is-${color}`]: !!color,
         [`is-${size}`]: !!size,
         'is-rounded': !!isRounded,
-        'is-danger': invalid && !color,
+        // The danger color's own class is this key too, and this one comes
+        // later, so it has to set the class for `danger` as well or it erases it.
+        'is-danger': color === 'danger' || (invalid && !color),
     });
     const containerClass = usePrefixedClassNames('colorinput', {
         'has-trigger': triggerIcon,

package/dist/esm/form/ColorInputBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorInputBase.js","sources":["../../../src/form/ColorInputBase.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { useFieldHelperClasses } from '../helpers/useFieldHelperClasses';\nimport { Icon } from '../elements/Icon';\nimport { ColorSwatch } from '../elements/ColorSwatch';\nimport {\n  ColorPickerAlphaSlider,\n  ColorPickerArea,\n  ColorPickerHueSlider,\n  ColorPickerSwatches,\n  type ColorFormat,\n  type ColorPickerLabels,\n  type ColorPickerSwatch,\n} from './ColorPicker';\nimport { formatColor, parseColor } from './_colorInternals/colorMath';\nimport {\n  BLACK,\n  ColorPickerContext,\n  keepingChannels,\n  mergeColorLabels,\n  useColorPicker,\n} from './_colorInternals/pickerState';\nimport { EyeDropperButton } from './_colorInternals/EyeDropperButton';\nimport { PickerPopover } from './_pickerInternals/PickerPopover';\nimport {\n  isPopoverToggleKey,\n  type PickerPosition,\n} from './_pickerInternals/pickerTypes';\nimport { usePickerLocaleScope } from './_pickerInternals/useLocaleDefaults';\nimport { useControlLoading } from './controlLoading';\nimport { useFieldLabelTarget, useFieldsetDisabled } from './FormContext';\n\n/**\n * Props for the raw ColorInput base. Use the higher-level `ColorInput` for\n * Field/Control composition; `ColorInputBase` is the field and its popover\n * only.\n *\n * @helperProps Helper props go on the `.colorinput` `<div>`, with\n * `className`, except that the background helpers go on the text `<input>`,\n * and the text helpers on both, since Bulma's `.input` sets its own\n * background and font, and the popover inside the `<div>` takes the text\n * ones. The other attributes go on the `<input>`.\n * @extraProp {string} [name] - Form field name. The field submits the text it shows, the value in `format`, or nothing when it's empty.\n * @extraProp {boolean} [required=false] - Marks the field required, so an empty one fails the form's constraint validation.\n * @extraProp {React.Ref<HTMLInputElement>} [ref] - Forwarded to the text `<input>`.\n */\nexport interface ColorInputBaseProps\n  extends\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      | 'value'\n      | 'defaultValue'\n      | 'onChange'\n      | 'size'\n      | 'color'\n      | 'type'\n      | 'popover'\n    >,\n    Omit<BulmaClassesProps, 'color'> {\n  /**\n   * The color, controlled, as a CSS color the picker reads (hex, `rgb()`,\n   * `hsl()` or a color name), or `''` for none.\n   */\n  value?: string;\n  /** The color to start with, uncontrolled; empty without one. */\n  defaultValue?: string;\n  /**\n   * Called with the color, in `format`, as it changes: on every step of a\n   * drag in the panel, on a key or a swatch, and when typed text is\n   * committed. Clearing the field calls it with `''`.\n   */\n  onChange?: (value: string) => void;\n  /**\n   * Called with the color, in `format`, once a change is done: when a drag\n   * ends, and with `onChange` for everything else. The place to save it.\n   */\n  onChangeEnd?: (value: string) => void;\n  /**\n   * How the value is written: `'hsl'` (`hsl(171, 100%, 41%)`), `'hex'` or\n   * `'rgb'`, with alpha as `hsla()`, `#rrggbbaa` and `rgba()`. Typed text in\n   * any of them is written back in this one.\n   * @defaultValue 'hsl'\n   */\n  format?: ColorFormat;\n  /** Adds an alpha slider to the panel and writes the alpha into the value. */\n  alpha?: boolean;\n  /**\n   * Preset colors in the panel: a list of CSS colors, each a string or\n   * `{ color, label }`, or `\"bulma\"` for the page's theme colors.\n   */\n  swatches?: ColorPickerSwatch[] | 'bulma';\n  /**\n   * Adds a button to the panel that picks a color from anywhere on the\n   * screen, where the browser has the EyeDropper API.\n   */\n  eyeDropper?: boolean;\n  /** Fired when the panel opens. */\n  onOpen?: () => void;\n  /** Fired when the panel closes. */\n  onClose?: () => void;\n  /**\n   * Opens the panel when the field takes focus, and moves focus into it.\n   * Off by default, since typing a value is the quick way in and the\n   * launcher, a click on the swatch or Alt+ArrowDown open it.\n   */\n  openOnFocus?: boolean;\n  /** Closes the panel once a swatch is chosen. */\n  closeOnSwatchClick?: boolean;\n  /**\n   * Where the panel opens against the field. Left out, it opens below and\n   * lines up with the field's start edge, which is its right edge when the\n   * picker reads right to left. A corner you pass stays physical, so\n   * `bottom-left` lines up the left edges either way.\n   * @defaultValue 'bottom-left'\n   */\n  position?: PickerPosition;\n  /**\n   * Renders the panel through a portal, into the `portalContainer` a\n   * `ConfigProvider` sets, else the overlay it's in that takes its popups,\n   * such as a `Modal`, else `document.body`.\n   */\n  appendToBody?: boolean;\n  /** Bulma color modifier for the field. */\n  color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n  /** The field's size. */\n  size?: 'small' | 'medium' | 'large';\n  /** Renders the field with rounded ends. */\n  isRounded?: boolean;\n  /** Disables the field and its panel. A disabled `Fieldset` does too. */\n  disabled?: boolean;\n  /** Makes the field read-only, with no panel. */\n  readOnly?: boolean;\n  /** Text shown while the field is empty. */\n  placeholder?: string;\n  /**\n   * Shows the launcher on the field's end that toggles the panel. Hidden by\n   * default while a `Control` it sits in shows its `isLoading` spinner,\n   * which shares that edge.\n   * @defaultValue true\n   */\n  triggerIcon?: boolean;\n  /** The launcher's glyph. */\n  triggerIconName?: string;\n  /** The strings it says, each with an English default. */\n  labels?: ColorPickerLabels;\n}\n\n/**\n * The raw ColorInput: a text field with a swatch and a launcher that opens a color picker in a popover, without Field/Control wrapping.\n *\n * Use `ColorInput` for the convenience wrapper.\n *\n * @function\n * @param {ColorInputBaseProps} props - Props for ColorInputBase.\n * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the text `<input>`.\n * @returns {JSX.Element} The rendered field.\n */\nexport const ColorInputBase = forwardRef<HTMLInputElement, ColorInputBaseProps>(\n  (props, ref) => {\n    const {\n      value: controlledValue,\n      defaultValue,\n      onChange,\n      onChangeEnd,\n      format = 'hsl',\n      alpha = false,\n      swatches,\n      eyeDropper = false,\n      onOpen,\n      onClose,\n      openOnFocus = false,\n      closeOnSwatchClick = false,\n      position,\n      appendToBody = false,\n      color,\n      size,\n      isRounded,\n      disabled: disabledProp,\n      readOnly,\n      placeholder,\n      triggerIcon: triggerIconProp,\n      triggerIconName = 'chevron-down',\n      labels,\n      className,\n      id: idProp,\n      onFocus,\n      onBlur,\n      onKeyDown,\n      ...rest\n    } = props;\n    const disabled = useFieldsetDisabled(disabledProp);\n    const id = useFieldLabelTarget(idProp, true);\n    const localeScope = usePickerLocaleScope(undefined, props.dir);\n    const controlLoading = useControlLoading();\n    const triggerIcon = triggerIconProp ?? !controlLoading;\n    const t = mergeColorLabels(labels);\n    // The field takes the background and text helpers, since Bulma's `.input`\n    // sets its own background and font. The container keeps the rest, and the\n    // text helpers too where a popover inside it takes them.\n    const {\n      backgroundClasses,\n      textClasses,\n      otherClasses,\n      rest: cleanRest,\n    } = useFieldHelperClasses(rest);\n\n    const isControlled = controlledValue !== undefined;\n    const [internalValue, setInternalValue] = useState(defaultValue ?? '');\n    const value = isControlled ? controlledValue : internalValue;\n    // What's been typed and not yet committed, or null while the field\n    // shows the value.\n    const [draft, setDraft] = useState<string | null>(null);\n    // The last color it held, which the panel shows while the field is\n    // empty, so clearing the field doesn't send the picker back to black.\n    const [remembered, setRemembered] = useState(value);\n    if (value && value !== remembered) setRemembered(value);\n\n    const [open, setOpenState] = useState(false);\n    const canOpen = !disabled && !readOnly;\n    const inputRef = useRef<HTMLInputElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    // Focus a closing panel hands back to the field opens nothing.\n    const returningRef = useRef(false);\n    const reactId = useId();\n    const popoverId = id ? `${id}-popover` : `colorinput-${reactId}`;\n\n    const setOpen = useCallback(\n      (next: boolean) => {\n        if (next === open) return;\n        if (!next) returningRef.current = true;\n        setOpenState(next);\n        if (next) onOpen?.();\n        else onClose?.();\n      },\n      [open, onOpen, onClose]\n    );\n\n    // Cleared once the close has handed focus back, or hasn't.\n    useEffect(() => {\n      if (!open) returningRef.current = false;\n    }, [open]);\n\n    const setValue = (next: string, end = true) => {\n      if (!isControlled) setInternalValue(next);\n      if (next !== value) onChange?.(next);\n      if (end) onChangeEnd?.(next);\n    };\n\n    // The picker in the panel, controlled by this field's value.\n    const picker = useColorPicker({\n      value: value || remembered || formatColor(BLACK, format, alpha),\n      defaultValue: undefined,\n      onChange: next => setValue(next, false),\n      onChangeEnd,\n      format,\n      alpha,\n      disabled,\n      swatches,\n      eyeDropper,\n      labels,\n      // Empty, the panel shows the last color the field held, or black, and\n      // choosing that same color still fills the field.\n      empty: value === '',\n    });\n\n    const commit = () => {\n      if (draft === null) return;\n      const typed = draft.trim();\n      setDraft(null);\n      if (typed === '') {\n        if (value !== '') setValue('');\n        return;\n      }\n      const parsed = parseColor(typed);\n      if (!parsed) return;\n      // A gray typed as hex, rgb() or a name keeps the panel's hue, as the\n      // picker's own field does; one typed as hsl() names its own.\n      const kept = keepingChannels(parsed, picker.color, typed);\n      setValue(formatColor(alpha ? kept : { ...kept, a: 1 }, format, alpha));\n    };\n    const invalid = draft !== null && draft.trim() !== '' && !parseColor(draft);\n    // The value as the field writes it: in `format`, however it was given.\n    const parsedValue = parseColor(value);\n    const valueText = parsedValue\n      ? formatColor(\n          alpha ? parsedValue : { ...parsedValue, a: 1 },\n          format,\n          alpha\n        )\n      : value;\n    // What the swatch shows: a readable draft as it's typed, else the value.\n    const shown = draft !== null && !invalid ? draft.trim() : value;\n\n    const inputClass = usePrefixedClassNames('input', {\n      [`is-${color}`]: !!color,\n      [`is-${size}`]: !!size,\n      'is-rounded': !!isRounded,\n      'is-danger': invalid && !color,\n    });\n    const containerClass = usePrefixedClassNames('colorinput', {\n      'has-trigger': triggerIcon,\n    });\n    const swatchClass = usePrefixedClassNames('colorinput-swatch');\n    const triggerClass = usePrefixedClassNames('colorinput-trigger');\n    const panelClass = usePrefixedClassNames('color-picker');\n    const eyeDropperClass = usePrefixedClassNames('colorinput-eyedropper');\n\n    const combinedRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref) ref.current = node;\n      },\n      [ref]\n    );\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n      onKeyDown?.(event);\n      if (event.defaultPrevented) return;\n      if (isPopoverToggleKey(event) && event.key === 'ArrowDown') {\n        event.preventDefault();\n        if (canOpen) setOpen(true);\n      } else if (draft !== null && event.key === 'Enter') {\n        // Commits rather than submitting a form; an unreadable value stays\n        // to be fixed.\n        event.preventDefault();\n        if (!invalid) commit();\n      } else if (draft !== null && event.key === 'Escape') {\n        // Puts the value back, and keeps a Modal around it open.\n        event.preventDefault();\n        event.stopPropagation();\n        setDraft(null);\n      }\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n      onFocus?.(event);\n      const returning = returningRef.current;\n      returningRef.current = false;\n      if (openOnFocus && canOpen && !returning) setOpen(true);\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n      onBlur?.(event);\n      commit();\n    };\n\n    const popupAttrs = {\n      'aria-haspopup': 'dialog',\n      'aria-controls': popoverId,\n      'aria-expanded': open,\n    } as const;\n\n    return (\n      <div\n        ref={containerRef}\n        className={classNames(\n          containerClass,\n          otherClasses,\n          textClasses,\n          className\n        )}\n        {...localeScope.rootAttrs}\n      >\n        <input\n          {...cleanRest}\n          ref={combinedRef}\n          type=\"text\"\n          role=\"combobox\"\n          {...popupAttrs}\n          autoComplete=\"off\"\n          spellCheck={false}\n          autoCapitalize=\"off\"\n          className={classNames(inputClass, textClasses, backgroundClasses)}\n          value={draft ?? valueText}\n          placeholder={placeholder}\n          disabled={disabled}\n          readOnly={readOnly}\n          aria-invalid={invalid || cleanRest['aria-invalid'] || undefined}\n          id={id}\n          onChange={event => setDraft(event.target.value)}\n          onKeyDown={handleKeyDown}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n        />\n        {/* For the pointer: the launcher does the same from the keyboard. */}\n        <button\n          type=\"button\"\n          className={swatchClass}\n          tabIndex={-1}\n          aria-hidden=\"true\"\n          disabled={!canOpen}\n          onMouseDown={event => event.preventDefault()}\n          onClick={() => setOpen(true)}\n        >\n          <ColorSwatch color={shown || 'transparent'} aria-hidden=\"true\" />\n        </button>\n        {triggerIcon && (\n          <button\n            type=\"button\"\n            className={triggerClass}\n            {...popupAttrs}\n            aria-label={t.chooseColor}\n            disabled={!canOpen}\n            onClick={() => setOpen(!open)}\n          >\n            <Icon name={triggerIconName} size={size} />\n          </button>\n        )}\n        <PickerPopover\n          localeScope={localeScope.panel}\n          isOpen={open}\n          onClose={() => setOpen(false)}\n          anchorRef={containerRef}\n          position={position}\n          appendToBody={appendToBody}\n          ariaLabel={t.chooseColor}\n          id={popoverId}\n          restoreFocusRef={inputRef}\n        >\n          <ColorPickerContext.Provider value={picker}>\n            <div className={panelClass}>\n              <ColorPickerArea />\n              <ColorPickerHueSlider />\n              {alpha && <ColorPickerAlphaSlider />}\n              {swatches && (\n                <ColorPickerSwatches\n                  // A click on a swatch, or Enter or Space on one, closes\n                  // the panel when asked to; the arrows only choose.\n                  onClick={event => {\n                    const target = event.target as Element;\n                    if (\n                      closeOnSwatchClick &&\n                      target.closest('[role=\"radio\"]')\n                    ) {\n                      setOpen(false);\n                    }\n                  }}\n                />\n              )}\n              <EyeDropperButton className={eyeDropperClass} />\n            </div>\n          </ColorPickerContext.Provider>\n        </PickerPopover>\n      </div>\n    );\n  }\n);\n\nColorInputBase.displayName = 'ColorInputBase';\n\nexport default ColorInputBase;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"ColorInputBase.js","sources":["../../../src/form/ColorInputBase.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { useFieldHelperClasses } from '../helpers/useFieldHelperClasses';\nimport { Icon } from '../elements/Icon';\nimport { ColorSwatch } from '../elements/ColorSwatch';\nimport {\n  ColorPickerAlphaSlider,\n  ColorPickerArea,\n  ColorPickerHueSlider,\n  ColorPickerSwatches,\n  type ColorFormat,\n  type ColorPickerLabels,\n  type ColorPickerSwatch,\n} from './ColorPicker';\nimport { formatColor, parseColor } from './_colorInternals/colorMath';\nimport {\n  BLACK,\n  ColorPickerContext,\n  keepingChannels,\n  mergeColorLabels,\n  useColorPicker,\n} from './_colorInternals/pickerState';\nimport { EyeDropperButton } from './_colorInternals/EyeDropperButton';\nimport { PickerPopover } from './_pickerInternals/PickerPopover';\nimport {\n  isPopoverToggleKey,\n  type PickerPosition,\n} from './_pickerInternals/pickerTypes';\nimport { usePickerLocaleScope } from './_pickerInternals/useLocaleDefaults';\nimport { useControlLoading } from './controlLoading';\nimport { useFieldLabelTarget, useFieldsetDisabled } from './FormContext';\n\n/**\n * Props for the raw ColorInput base. Use the higher-level `ColorInput` for\n * Field/Control composition; `ColorInputBase` is the field and its popover\n * only.\n *\n * @helperProps Helper props go on the `.colorinput` `<div>`, with\n * `className`, except that the background helpers go on the text `<input>`,\n * and the text helpers on both, since Bulma's `.input` sets its own\n * background and font, and the popover inside the `<div>` takes the text\n * ones. The other attributes go on the `<input>`.\n * @extraProp {string} [name] - Form field name. The field submits the text it shows, the value in `format`, or nothing when it's empty.\n * @extraProp {boolean} [required=false] - Marks the field required, so an empty one fails the form's constraint validation.\n * @extraProp {React.Ref<HTMLInputElement>} [ref] - Forwarded to the text `<input>`.\n */\nexport interface ColorInputBaseProps\n  extends\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      | 'value'\n      | 'defaultValue'\n      | 'onChange'\n      | 'size'\n      | 'color'\n      | 'type'\n      | 'popover'\n    >,\n    Omit<BulmaClassesProps, 'color'> {\n  /**\n   * The color, controlled, as a CSS color the picker reads (hex, `rgb()`,\n   * `hsl()` or a color name), or `''` for none.\n   */\n  value?: string;\n  /** The color to start with, uncontrolled; empty without one. */\n  defaultValue?: string;\n  /**\n   * Called with the color, in `format`, as it changes: on every step of a\n   * drag in the panel, on a key or a swatch, and when typed text is\n   * committed. Clearing the field calls it with `''`.\n   */\n  onChange?: (value: string) => void;\n  /**\n   * Called with the color, in `format`, once a change is done: when a drag\n   * ends, and with `onChange` for everything else. The place to save it.\n   */\n  onChangeEnd?: (value: string) => void;\n  /**\n   * How the value is written: `'hsl'` (`hsl(171, 100%, 41%)`), `'hex'` or\n   * `'rgb'`, with alpha as `hsla()`, `#rrggbbaa` and `rgba()`. Typed text in\n   * any of them is written back in this one.\n   * @defaultValue 'hsl'\n   */\n  format?: ColorFormat;\n  /** Adds an alpha slider to the panel and writes the alpha into the value. */\n  alpha?: boolean;\n  /**\n   * Preset colors in the panel: a list of CSS colors, each a string or\n   * `{ color, label }`, or `\"bulma\"` for the page's theme colors.\n   */\n  swatches?: ColorPickerSwatch[] | 'bulma';\n  /**\n   * Adds a button to the panel that picks a color from anywhere on the\n   * screen, where the browser has the EyeDropper API.\n   */\n  eyeDropper?: boolean;\n  /** Fired when the panel opens. */\n  onOpen?: () => void;\n  /** Fired when the panel closes. */\n  onClose?: () => void;\n  /**\n   * Opens the panel when the field takes focus, and moves focus into it.\n   * Off by default, since typing a value is the quick way in and the\n   * launcher, a click on the swatch or Alt+ArrowDown open it.\n   */\n  openOnFocus?: boolean;\n  /** Closes the panel once a swatch is chosen. */\n  closeOnSwatchClick?: boolean;\n  /**\n   * Where the panel opens against the field. Left out, it opens below and\n   * lines up with the field's start edge, which is its right edge when the\n   * picker reads right to left. A corner you pass stays physical, so\n   * `bottom-left` lines up the left edges either way.\n   * @defaultValue 'bottom-left'\n   */\n  position?: PickerPosition;\n  /**\n   * Renders the panel through a portal, into the `portalContainer` a\n   * `ConfigProvider` sets, else the overlay it's in that takes its popups,\n   * such as a `Modal`, else `document.body`.\n   */\n  appendToBody?: boolean;\n  /** Bulma color modifier for the field. */\n  color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n  /** The field's size. */\n  size?: 'small' | 'medium' | 'large';\n  /** Renders the field with rounded ends. */\n  isRounded?: boolean;\n  /** Disables the field and its panel. A disabled `Fieldset` does too. */\n  disabled?: boolean;\n  /** Makes the field read-only, with no panel. */\n  readOnly?: boolean;\n  /** Text shown while the field is empty. */\n  placeholder?: string;\n  /**\n   * Shows the launcher on the field's end that toggles the panel. Hidden by\n   * default while a `Control` it sits in shows its `isLoading` spinner,\n   * which shares that edge.\n   * @defaultValue true\n   */\n  triggerIcon?: boolean;\n  /** The launcher's glyph. */\n  triggerIconName?: string;\n  /** The strings it says, each with an English default. */\n  labels?: ColorPickerLabels;\n}\n\n/**\n * The raw ColorInput: a text field with a swatch and a launcher that opens a color picker in a popover, without Field/Control wrapping.\n *\n * Use `ColorInput` for the convenience wrapper.\n *\n * @function\n * @param {ColorInputBaseProps} props - Props for ColorInputBase.\n * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the text `<input>`.\n * @returns {JSX.Element} The rendered field.\n */\nexport const ColorInputBase = forwardRef<HTMLInputElement, ColorInputBaseProps>(\n  (props, ref) => {\n    const {\n      value: controlledValue,\n      defaultValue,\n      onChange,\n      onChangeEnd,\n      format = 'hsl',\n      alpha = false,\n      swatches,\n      eyeDropper = false,\n      onOpen,\n      onClose,\n      openOnFocus = false,\n      closeOnSwatchClick = false,\n      position,\n      appendToBody = false,\n      color,\n      size,\n      isRounded,\n      disabled: disabledProp,\n      readOnly,\n      placeholder,\n      triggerIcon: triggerIconProp,\n      triggerIconName = 'chevron-down',\n      labels,\n      className,\n      id: idProp,\n      onFocus,\n      onBlur,\n      onKeyDown,\n      ...rest\n    } = props;\n    const disabled = useFieldsetDisabled(disabledProp);\n    const id = useFieldLabelTarget(idProp, true);\n    const localeScope = usePickerLocaleScope(undefined, props.dir);\n    const controlLoading = useControlLoading();\n    const triggerIcon = triggerIconProp ?? !controlLoading;\n    const t = mergeColorLabels(labels);\n    // The field takes the background and text helpers, since Bulma's `.input`\n    // sets its own background and font. The container keeps the rest, and the\n    // text helpers too where a popover inside it takes them.\n    const {\n      backgroundClasses,\n      textClasses,\n      otherClasses,\n      rest: cleanRest,\n    } = useFieldHelperClasses(rest);\n\n    const isControlled = controlledValue !== undefined;\n    const [internalValue, setInternalValue] = useState(defaultValue ?? '');\n    const value = isControlled ? controlledValue : internalValue;\n    // What's been typed and not yet committed, or null while the field\n    // shows the value.\n    const [draft, setDraft] = useState<string | null>(null);\n    // The last color it held, which the panel shows while the field is\n    // empty, so clearing the field doesn't send the picker back to black.\n    const [remembered, setRemembered] = useState(value);\n    if (value && value !== remembered) setRemembered(value);\n\n    const [open, setOpenState] = useState(false);\n    const canOpen = !disabled && !readOnly;\n    const inputRef = useRef<HTMLInputElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    // Focus a closing panel hands back to the field opens nothing.\n    const returningRef = useRef(false);\n    const reactId = useId();\n    const popoverId = id ? `${id}-popover` : `colorinput-${reactId}`;\n\n    const setOpen = useCallback(\n      (next: boolean) => {\n        if (next === open) return;\n        if (!next) returningRef.current = true;\n        setOpenState(next);\n        if (next) onOpen?.();\n        else onClose?.();\n      },\n      [open, onOpen, onClose]\n    );\n\n    // Cleared once the close has handed focus back, or hasn't.\n    useEffect(() => {\n      if (!open) returningRef.current = false;\n    }, [open]);\n\n    const setValue = (next: string, end = true) => {\n      if (!isControlled) setInternalValue(next);\n      if (next !== value) onChange?.(next);\n      if (end) onChangeEnd?.(next);\n    };\n\n    // The picker in the panel, controlled by this field's value.\n    const picker = useColorPicker({\n      value: value || remembered || formatColor(BLACK, format, alpha),\n      defaultValue: undefined,\n      onChange: next => setValue(next, false),\n      onChangeEnd,\n      format,\n      alpha,\n      disabled,\n      swatches,\n      eyeDropper,\n      labels,\n      // Empty, the panel shows the last color the field held, or black, and\n      // choosing that same color still fills the field.\n      empty: value === '',\n    });\n\n    const commit = () => {\n      if (draft === null) return;\n      const typed = draft.trim();\n      setDraft(null);\n      if (typed === '') {\n        if (value !== '') setValue('');\n        return;\n      }\n      const parsed = parseColor(typed);\n      if (!parsed) return;\n      // A gray typed as hex, rgb() or a name keeps the panel's hue, as the\n      // picker's own field does; one typed as hsl() names its own.\n      const kept = keepingChannels(parsed, picker.color, typed);\n      setValue(formatColor(alpha ? kept : { ...kept, a: 1 }, format, alpha));\n    };\n    const invalid = draft !== null && draft.trim() !== '' && !parseColor(draft);\n    // The value as the field writes it: in `format`, however it was given.\n    const parsedValue = parseColor(value);\n    const valueText = parsedValue\n      ? formatColor(\n          alpha ? parsedValue : { ...parsedValue, a: 1 },\n          format,\n          alpha\n        )\n      : value;\n    // What the swatch shows: a readable draft as it's typed, else the value.\n    const shown = draft !== null && !invalid ? draft.trim() : value;\n\n    const inputClass = usePrefixedClassNames('input', {\n      [`is-${color}`]: !!color,\n      [`is-${size}`]: !!size,\n      'is-rounded': !!isRounded,\n      // The danger color's own class is this key too, and this one comes\n      // later, so it has to set the class for `danger` as well or it erases it.\n      'is-danger': color === 'danger' || (invalid && !color),\n    });\n    const containerClass = usePrefixedClassNames('colorinput', {\n      'has-trigger': triggerIcon,\n    });\n    const swatchClass = usePrefixedClassNames('colorinput-swatch');\n    const triggerClass = usePrefixedClassNames('colorinput-trigger');\n    const panelClass = usePrefixedClassNames('color-picker');\n    const eyeDropperClass = usePrefixedClassNames('colorinput-eyedropper');\n\n    const combinedRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref) ref.current = node;\n      },\n      [ref]\n    );\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n      onKeyDown?.(event);\n      if (event.defaultPrevented) return;\n      if (isPopoverToggleKey(event) && event.key === 'ArrowDown') {\n        event.preventDefault();\n        if (canOpen) setOpen(true);\n      } else if (draft !== null && event.key === 'Enter') {\n        // Commits rather than submitting a form; an unreadable value stays\n        // to be fixed.\n        event.preventDefault();\n        if (!invalid) commit();\n      } else if (draft !== null && event.key === 'Escape') {\n        // Puts the value back, and keeps a Modal around it open.\n        event.preventDefault();\n        event.stopPropagation();\n        setDraft(null);\n      }\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n      onFocus?.(event);\n      const returning = returningRef.current;\n      returningRef.current = false;\n      if (openOnFocus && canOpen && !returning) setOpen(true);\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n      onBlur?.(event);\n      commit();\n    };\n\n    const popupAttrs = {\n      'aria-haspopup': 'dialog',\n      'aria-controls': popoverId,\n      'aria-expanded': open,\n    } as const;\n\n    return (\n      <div\n        ref={containerRef}\n        className={classNames(\n          containerClass,\n          otherClasses,\n          textClasses,\n          className\n        )}\n        {...localeScope.rootAttrs}\n      >\n        <input\n          {...cleanRest}\n          ref={combinedRef}\n          type=\"text\"\n          role=\"combobox\"\n          {...popupAttrs}\n          autoComplete=\"off\"\n          spellCheck={false}\n          autoCapitalize=\"off\"\n          className={classNames(inputClass, textClasses, backgroundClasses)}\n          value={draft ?? valueText}\n          placeholder={placeholder}\n          disabled={disabled}\n          readOnly={readOnly}\n          aria-invalid={invalid || cleanRest['aria-invalid'] || undefined}\n          id={id}\n          onChange={event => setDraft(event.target.value)}\n          onKeyDown={handleKeyDown}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n        />\n        {/* For the pointer: the launcher does the same from the keyboard. */}\n        <button\n          type=\"button\"\n          className={swatchClass}\n          tabIndex={-1}\n          aria-hidden=\"true\"\n          disabled={!canOpen}\n          onMouseDown={event => event.preventDefault()}\n          onClick={() => setOpen(true)}\n        >\n          <ColorSwatch color={shown || 'transparent'} aria-hidden=\"true\" />\n        </button>\n        {triggerIcon && (\n          <button\n            type=\"button\"\n            className={triggerClass}\n            {...popupAttrs}\n            aria-label={t.chooseColor}\n            disabled={!canOpen}\n            onClick={() => setOpen(!open)}\n          >\n            <Icon name={triggerIconName} size={size} />\n          </button>\n        )}\n        <PickerPopover\n          localeScope={localeScope.panel}\n          isOpen={open}\n          onClose={() => setOpen(false)}\n          anchorRef={containerRef}\n          position={position}\n          appendToBody={appendToBody}\n          ariaLabel={t.chooseColor}\n          id={popoverId}\n          restoreFocusRef={inputRef}\n        >\n          <ColorPickerContext.Provider value={picker}>\n            <div className={panelClass}>\n              <ColorPickerArea />\n              <ColorPickerHueSlider />\n              {alpha && <ColorPickerAlphaSlider />}\n              {swatches && (\n                <ColorPickerSwatches\n                  // A click on a swatch, or Enter or Space on one, closes\n                  // the panel when asked to; the arrows only choose.\n                  onClick={event => {\n                    const target = event.target as Element;\n                    if (\n                      closeOnSwatchClick &&\n                      target.closest('[role=\"radio\"]')\n                    ) {\n                      setOpen(false);\n                    }\n                  }}\n                />\n              )}\n              <EyeDropperButton className={eyeDropperClass} />\n            </div>\n          </ColorPickerContext.Provider>\n        </PickerPopover>\n      </div>\n    );\n  }\n);\n\nColorInputBase.displayName = 'ColorInputBase';\n\nexport default ColorInputBase;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/helpers/scrollLock.js

@@ -9,6 +9,18 @@ import { useEffect } from 'react';
 // itself would clear a lock another overlay still needs.
 let lockCount = 0;
 let unlock = null;
+/** The variable the lock sets on `<html>` for one side. */
+const offsetName = (side) => `--bulma-scroll-lock-offset-${side}`;
+/**
+ * The room the page's scrollbar gave back on one side while a lock is on,
+ * and `0px` otherwise, as a CSS value. An element fixed to that edge of the
+ * window adds it to its offset there, so it stays where it was as the
+ * scrollbar goes.
+ *
+ * @param side - The edge of the window the element is fixed to.
+ * @returns A `var()` with a `0px` fallback.
+ */
+const scrollLockOffset = (side) => `var(${offsetName(side)}, 0px)`;
 /**
  * Locks the page's scrolling and pads it by the room the scrollbar took, so
  * its content stays put as the scrollbar goes. It locks `<html>` rather than
@@ -18,13 +30,19 @@ let unlock = null;
  * the right under right-to-left text. With an overlay scrollbar, or a gutter
  * `scrollbar-gutter` keeps, nothing moves and nothing is padded. An element
  * fixed to the window is placed against the viewport, not `<html>`, so the
- * padding doesn't reach it.
+ * padding doesn't reach it. The lock sets the room it pads on a side in
+ * `--bulma-scroll-lock-offset-left` or `--bulma-scroll-lock-offset-right` on
+ * `<html>`, for such an element to add to its offset on that side.
  *
  * @returns A function that puts back the styles it changed.
  */
 function lockPage() {
     const root = document.documentElement;
     const { overflow, paddingLeft, paddingRight } = root.style;
+    const offsets = ['left', 'right'].map(side => {
+        const name = offsetName(side);
+        return [name, root.style.getPropertyValue(name)];
+    });
     const before = root.getBoundingClientRect();
     root.style.overflow = 'hidden';
     const after = root.getBoundingClientRect();
@@ -34,15 +52,22 @@ function lockPage() {
         // The computed padding is in pixels, whatever unit set it.
         const style = getComputedStyle(root);
         const add = (padding, room) => `${(parseFloat(padding) || 0) + room}px`;
-        if (left > 0)
+        if (left > 0) {
             root.style.paddingLeft = add(style.paddingLeft, left);
-        if (right > 0)
+            root.style.setProperty(offsetName('left'), `${left}px`);
+        }
+        if (right > 0) {
             root.style.paddingRight = add(style.paddingRight, right);
+            root.style.setProperty(offsetName('right'), `${right}px`);
+        }
     }
     return () => {
         root.style.overflow = overflow;
         root.style.paddingLeft = paddingLeft;
         root.style.paddingRight = paddingRight;
+        // Setting an empty value removes the property.
+        for (const [name, value] of offsets)
+            root.style.setProperty(name, value);
     };
 }
 /**
@@ -71,5 +96,5 @@ function useScrollLock(active) {
     }, [active]);
 }
 
-export { useScrollLock };
+export { scrollLockOffset, useScrollLock };
 //# sourceMappingURL=scrollLock.js.map

package/dist/esm/helpers/scrollLock.js.map

@@ -1 +1 @@
-{"version":3,"file":"scrollLock.js","sources":["../../../src/helpers/scrollLock.ts"],"sourcesContent":["import { useEffect } from 'react';\n\n// Ref-counted across every caller (e.g. a Dialog rendering its own Modal)\n// so overlapping/nested locks don't fight over which one restores the page.\n// Every overlay that locks the page (Modal, Dialog, Sidebar, Loading,\n// AppFrame's drawer) goes through here; a component setting these styles\n// itself would clear a lock another overlay still needs.\nlet lockCount = 0;\nlet unlock: (() => void) | null = null;\n\n/**\n * Locks the page's scrolling and pads it by the room the scrollbar took, so\n * its content stays put as the scrollbar goes. It locks `<html>` rather than\n * `<body>`: the viewport takes `<body>`'s overflow only while `<html>`'s is\n * `visible`, and Bulma's isn't. The side to pad is measured rather than read\n * from the text direction, since an engine can keep the page's scrollbar on\n * the right under right-to-left text. With an overlay scrollbar, or a gutter\n * `scrollbar-gutter` keeps, nothing moves and nothing is padded. An element\n * fixed to the window is placed against the viewport, not `<html>`, so the\n * padding doesn't reach it.\n *\n * @returns A function that puts back the styles it changed.\n */\nfunction lockPage(): () => void {\n  const root = document.documentElement;\n  const { overflow, paddingLeft, paddingRight } = root.style;\n\n  const before = root.getBoundingClientRect();\n  root.style.overflow = 'hidden';\n  const after = root.getBoundingClientRect();\n\n  const left = before.left - after.left;\n  const right = after.right - before.right;\n  if (left > 0 || right > 0) {\n    // The computed padding is in pixels, whatever unit set it.\n    const style = getComputedStyle(root);\n    const add = (padding: string, room: number) =>\n      `${(parseFloat(padding) || 0) + room}px`;\n    if (left > 0) root.style.paddingLeft = add(style.paddingLeft, left);\n    if (right > 0) root.style.paddingRight = add(style.paddingRight, right);\n  }\n\n  return () => {\n    root.style.overflow = overflow;\n    root.style.paddingLeft = paddingLeft;\n    root.style.paddingRight = paddingRight;\n  };\n}\n\n/**\n * Locks (and ref-counted-ly unlocks) the page's scrolling while `active` is\n * true. Safe to call from multiple components at once: the page is only\n * given back once every active caller has released its lock.\n *\n * @function useScrollLock\n * @param active - Whether this caller wants the page's scrolling locked.\n */\nexport function useScrollLock(active: boolean): void {\n  useEffect(() => {\n    if (!active) return undefined;\n\n    lockCount++;\n    if (lockCount === 1) {\n      unlock = lockPage();\n    }\n\n    return () => {\n      lockCount--;\n      if (lockCount === 0) {\n        unlock?.();\n        unlock = null;\n      }\n    };\n  }, [active]);\n}\n"],"names":[],"mappings":";;;;AAEA;AACA;AACA;AACA;AACA;AACA,IAAI,SAAS,GAAG,CAAC;AACjB,IAAI,MAAM,GAAwB,IAAI;AAEtC;;;;;;;;;;;;AAYG;AACH,SAAS,QAAQ,GAAA;AACf,IAAA,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe;IACrC,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,KAAK;AAE1D,IAAA,MAAM,MAAM,GAAG,IAAI,CAAC,qBAAqB,EAAE;AAC3C,IAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ;AAC9B,IAAA,MAAM,KAAK,GAAG,IAAI,CAAC,qBAAqB,EAAE;IAE1C,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI;IACrC,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;IACxC,IAAI,IAAI,GAAG,CAAC,IAAI,KAAK,GAAG,CAAC,EAAE;;AAEzB,QAAA,MAAM,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC;QACpC,MAAM,GAAG,GAAG,CAAC,OAAe,EAAE,IAAY,KACxC,CAAA,EAAG,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,CAAA,EAAA,CAAI;QAC1C,IAAI,IAAI,GAAG,CAAC;AAAE,YAAA,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,GAAG,CAAC,KAAK,CAAC,WAAW,EAAE,IAAI,CAAC;QACnE,IAAI,KAAK,GAAG,CAAC;AAAE,YAAA,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,GAAG,CAAC,KAAK,CAAC,YAAY,EAAE,KAAK,CAAC;IACzE;AAEA,IAAA,OAAO,MAAK;AACV,QAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ;AAC9B,QAAA,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,WAAW;AACpC,QAAA,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,YAAY;AACxC,IAAA,CAAC;AACH;AAEA;;;;;;;AAOG;AACG,SAAU,aAAa,CAAC,MAAe,EAAA;IAC3C,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,MAAM;AAAE,YAAA,OAAO,SAAS;AAE7B,QAAA,SAAS,EAAE;AACX,QAAA,IAAI,SAAS,KAAK,CAAC,EAAE;YACnB,MAAM,GAAG,QAAQ,EAAE;QACrB;AAEA,QAAA,OAAO,MAAK;AACV,YAAA,SAAS,EAAE;AACX,YAAA,IAAI,SAAS,KAAK,CAAC,EAAE;gBACnB,MAAM,IAAI;gBACV,MAAM,GAAG,IAAI;YACf;AACF,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;AACd;;"}
+{"version":3,"file":"scrollLock.js","sources":["../../../src/helpers/scrollLock.ts"],"sourcesContent":["import { useEffect } from 'react';\n\n// Ref-counted across every caller (e.g. a Dialog rendering its own Modal)\n// so overlapping/nested locks don't fight over which one restores the page.\n// Every overlay that locks the page (Modal, Dialog, Sidebar, Loading,\n// AppFrame's drawer) goes through here; a component setting these styles\n// itself would clear a lock another overlay still needs.\nlet lockCount = 0;\nlet unlock: (() => void) | null = null;\n\n/** A side of the window the page's scrollbar can take room on. */\ntype ScrollLockSide = 'left' | 'right';\n\n/** The variable the lock sets on `<html>` for one side. */\nconst offsetName = (side: ScrollLockSide) =>\n  `--bulma-scroll-lock-offset-${side}`;\n\n/**\n * The room the page's scrollbar gave back on one side while a lock is on,\n * and `0px` otherwise, as a CSS value. An element fixed to that edge of the\n * window adds it to its offset there, so it stays where it was as the\n * scrollbar goes.\n *\n * @param side - The edge of the window the element is fixed to.\n * @returns A `var()` with a `0px` fallback.\n */\nexport const scrollLockOffset = (side: ScrollLockSide): string =>\n  `var(${offsetName(side)}, 0px)`;\n\n/**\n * Locks the page's scrolling and pads it by the room the scrollbar took, so\n * its content stays put as the scrollbar goes. It locks `<html>` rather than\n * `<body>`: the viewport takes `<body>`'s overflow only while `<html>`'s is\n * `visible`, and Bulma's isn't. The side to pad is measured rather than read\n * from the text direction, since an engine can keep the page's scrollbar on\n * the right under right-to-left text. With an overlay scrollbar, or a gutter\n * `scrollbar-gutter` keeps, nothing moves and nothing is padded. An element\n * fixed to the window is placed against the viewport, not `<html>`, so the\n * padding doesn't reach it. The lock sets the room it pads on a side in\n * `--bulma-scroll-lock-offset-left` or `--bulma-scroll-lock-offset-right` on\n * `<html>`, for such an element to add to its offset on that side.\n *\n * @returns A function that puts back the styles it changed.\n */\nfunction lockPage(): () => void {\n  const root = document.documentElement;\n  const { overflow, paddingLeft, paddingRight } = root.style;\n  const offsets = (['left', 'right'] as const).map(side => {\n    const name = offsetName(side);\n    return [name, root.style.getPropertyValue(name)] as const;\n  });\n\n  const before = root.getBoundingClientRect();\n  root.style.overflow = 'hidden';\n  const after = root.getBoundingClientRect();\n\n  const left = before.left - after.left;\n  const right = after.right - before.right;\n  if (left > 0 || right > 0) {\n    // The computed padding is in pixels, whatever unit set it.\n    const style = getComputedStyle(root);\n    const add = (padding: string, room: number) =>\n      `${(parseFloat(padding) || 0) + room}px`;\n    if (left > 0) {\n      root.style.paddingLeft = add(style.paddingLeft, left);\n      root.style.setProperty(offsetName('left'), `${left}px`);\n    }\n    if (right > 0) {\n      root.style.paddingRight = add(style.paddingRight, right);\n      root.style.setProperty(offsetName('right'), `${right}px`);\n    }\n  }\n\n  return () => {\n    root.style.overflow = overflow;\n    root.style.paddingLeft = paddingLeft;\n    root.style.paddingRight = paddingRight;\n    // Setting an empty value removes the property.\n    for (const [name, value] of offsets) root.style.setProperty(name, value);\n  };\n}\n\n/**\n * Locks (and ref-counted-ly unlocks) the page's scrolling while `active` is\n * true. Safe to call from multiple components at once: the page is only\n * given back once every active caller has released its lock.\n *\n * @function useScrollLock\n * @param active - Whether this caller wants the page's scrolling locked.\n */\nexport function useScrollLock(active: boolean): void {\n  useEffect(() => {\n    if (!active) return undefined;\n\n    lockCount++;\n    if (lockCount === 1) {\n      unlock = lockPage();\n    }\n\n    return () => {\n      lockCount--;\n      if (lockCount === 0) {\n        unlock?.();\n        unlock = null;\n      }\n    };\n  }, [active]);\n}\n"],"names":[],"mappings":"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"}