@allxsmith/bestax-bulma 5.55.0 → 5.56.0

package/dist/esm/form/ColorInputBase.js

@@ -0,0 +1,198 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useId, useCallback, useEffect } from 'react';
+import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
+import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
+import { Icon } from '../elements/Icon.js';
+import { ColorSwatch } from '../elements/ColorSwatch.js';
+import { ColorPickerArea, ColorPickerHueSlider, ColorPickerAlphaSlider, ColorPickerSwatches } from './ColorPicker.js';
+import { formatColor, parseColor } from './_colorInternals/colorMath.js';
+import { mergeColorLabels, useColorPicker, BLACK, ColorPickerContext, keepingChannels } from './_colorInternals/pickerState.js';
+import { EyeDropperButton } from './_colorInternals/EyeDropperButton.js';
+import { PickerPopover } from './_pickerInternals/PickerPopover.js';
+import { isPopoverToggleKey } from './_pickerInternals/pickerTypes.js';
+import { usePickerLocaleScope } from './_pickerInternals/useLocaleDefaults.js';
+import { useControlLoading } from './controlLoading.js';
+import { useFieldsetDisabled, useFieldLabelTarget } from './FormContext.js';
+
+/**
+ * The raw ColorInput: a text field with a swatch and a launcher that opens a color picker in a popover, without Field/Control wrapping.
+ *
+ * Use `ColorInput` for the convenience wrapper.
+ *
+ * @function
+ * @param {ColorInputBaseProps} props - Props for ColorInputBase.
+ * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the text `<input>`.
+ * @returns {JSX.Element} The rendered field.
+ */
+const ColorInputBase = forwardRef((props, ref) => {
+    const { value: controlledValue, defaultValue, onChange, onChangeEnd, format = 'hsl', alpha = false, swatches, eyeDropper = false, onOpen, onClose, openOnFocus = false, closeOnSwatchClick = false, position = 'bottom-left', appendToBody = false, color, size, isRounded, disabled: disabledProp, readOnly, placeholder, triggerIcon: triggerIconProp, triggerIconName = 'chevron-down', labels, className, id: idProp, onFocus, onBlur, onKeyDown, ...rest } = props;
+    const disabled = useFieldsetDisabled(disabledProp);
+    const id = useFieldLabelTarget(idProp, true);
+    const localeScope = usePickerLocaleScope(undefined, props.dir);
+    const controlLoading = useControlLoading();
+    const triggerIcon = triggerIconProp ?? !controlLoading;
+    const t = mergeColorLabels(labels);
+    const { bulmaHelperClasses, rest: cleanRest } = useBulmaClasses(rest);
+    const isControlled = controlledValue !== undefined;
+    const [internalValue, setInternalValue] = useState(defaultValue ?? '');
+    const value = isControlled ? controlledValue : internalValue;
+    // What's been typed and not yet committed, or null while the field
+    // shows the value.
+    const [draft, setDraft] = useState(null);
+    // The last color it held, which the panel shows while the field is
+    // empty, so clearing the field doesn't send the picker back to black.
+    const [remembered, setRemembered] = useState(value);
+    if (value && value !== remembered)
+        setRemembered(value);
+    const [open, setOpenState] = useState(false);
+    const canOpen = !disabled && !readOnly;
+    const inputRef = useRef(null);
+    const containerRef = useRef(null);
+    // Focus a closing panel hands back to the field opens nothing.
+    const returningRef = useRef(false);
+    const reactId = useId();
+    const popoverId = id ? `${id}-popover` : `colorinput-${reactId}`;
+    const setOpen = useCallback((next) => {
+        if (next === open)
+            return;
+        if (!next)
+            returningRef.current = true;
+        setOpenState(next);
+        if (next)
+            onOpen?.();
+        else
+            onClose?.();
+    }, [open, onOpen, onClose]);
+    // Cleared once the close has handed focus back, or hasn't.
+    useEffect(() => {
+        if (!open)
+            returningRef.current = false;
+    }, [open]);
+    const setValue = (next, end = true) => {
+        if (!isControlled)
+            setInternalValue(next);
+        if (next !== value)
+            onChange?.(next);
+        if (end)
+            onChangeEnd?.(next);
+    };
+    // The picker in the panel, controlled by this field's value.
+    const picker = useColorPicker({
+        value: value || remembered || formatColor(BLACK, format, alpha),
+        defaultValue: undefined,
+        onChange: next => setValue(next, false),
+        onChangeEnd,
+        format,
+        alpha,
+        disabled,
+        swatches,
+        eyeDropper,
+        labels,
+        // Empty, the panel shows the last color the field held, or black, and
+        // choosing that same color still fills the field.
+        empty: value === '',
+    });
+    const commit = () => {
+        if (draft === null)
+            return;
+        const typed = draft.trim();
+        setDraft(null);
+        if (typed === '') {
+            if (value !== '')
+                setValue('');
+            return;
+        }
+        const parsed = parseColor(typed);
+        if (!parsed)
+            return;
+        // A gray typed as hex, rgb() or a name keeps the panel's hue, as the
+        // picker's own field does; one typed as hsl() names its own.
+        const kept = keepingChannels(parsed, picker.color, typed);
+        setValue(formatColor(alpha ? kept : { ...kept, a: 1 }, format, alpha));
+    };
+    const invalid = draft !== null && draft.trim() !== '' && !parseColor(draft);
+    // The value as the field writes it: in `format`, however it was given.
+    const parsedValue = parseColor(value);
+    const valueText = parsedValue
+        ? formatColor(alpha ? parsedValue : { ...parsedValue, a: 1 }, format, alpha)
+        : value;
+    // What the swatch shows: a readable draft as it's typed, else the value.
+    const shown = draft !== null && !invalid ? draft.trim() : value;
+    const inputClass = usePrefixedClassNames('input', {
+        [`is-${color}`]: !!color,
+        [`is-${size}`]: !!size,
+        'is-rounded': !!isRounded,
+        'is-danger': invalid && !color,
+    });
+    const containerClass = usePrefixedClassNames('colorinput', {
+        'has-trigger': triggerIcon,
+    });
+    const swatchClass = usePrefixedClassNames('colorinput-swatch');
+    const triggerClass = usePrefixedClassNames('colorinput-trigger');
+    const panelClass = usePrefixedClassNames('color-picker');
+    const eyeDropperClass = usePrefixedClassNames('colorinput-eyedropper');
+    const combinedRef = useCallback((node) => {
+        inputRef.current = node;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref]);
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented)
+            return;
+        if (isPopoverToggleKey(event) && event.key === 'ArrowDown') {
+            event.preventDefault();
+            if (canOpen)
+                setOpen(true);
+        }
+        else if (draft !== null && event.key === 'Enter') {
+            // Commits rather than submitting a form; an unreadable value stays
+            // to be fixed.
+            event.preventDefault();
+            if (!invalid)
+                commit();
+        }
+        else if (draft !== null && event.key === 'Escape') {
+            // Puts the value back, and keeps a Modal around it open.
+            event.preventDefault();
+            event.stopPropagation();
+            setDraft(null);
+        }
+    };
+    const handleFocus = (event) => {
+        onFocus?.(event);
+        const returning = returningRef.current;
+        returningRef.current = false;
+        if (openOnFocus && canOpen && !returning)
+            setOpen(true);
+    };
+    const handleBlur = (event) => {
+        onBlur?.(event);
+        commit();
+    };
+    const popupAttrs = {
+        'aria-haspopup': 'dialog',
+        'aria-controls': popoverId,
+        'aria-expanded': open,
+    };
+    return (jsxs("div", { ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), ...localeScope.rootAttrs, children: [jsx("input", { ...cleanRest, ref: combinedRef, type: "text", role: "combobox", ...popupAttrs, autoComplete: "off", spellCheck: false, autoCapitalize: "off", className: inputClass, value: draft ?? valueText, placeholder: placeholder, disabled: disabled, readOnly: readOnly, "aria-invalid": invalid || cleanRest['aria-invalid'] || undefined, id: id, onChange: event => setDraft(event.target.value), onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur }), jsx("button", { type: "button", className: swatchClass, tabIndex: -1, "aria-hidden": "true", disabled: !canOpen, onMouseDown: event => event.preventDefault(), onClick: () => setOpen(true), children: jsx(ColorSwatch, { color: shown || 'transparent', "aria-hidden": "true" }) }), triggerIcon && (jsx("button", { type: "button", className: triggerClass, ...popupAttrs, "aria-label": t.chooseColor, disabled: !canOpen, onClick: () => setOpen(!open), children: jsx(Icon, { name: triggerIconName, size: size }) })), jsx(PickerPopover, { localeScope: localeScope.panel, isOpen: open, onClose: () => setOpen(false), anchorRef: containerRef, position: position, appendToBody: appendToBody, ariaLabel: t.chooseColor, id: popoverId, restoreFocusRef: inputRef, children: jsx(ColorPickerContext.Provider, { value: picker, children: jsxs("div", { className: panelClass, children: [jsx(ColorPickerArea, {}), jsx(ColorPickerHueSlider, {}), alpha && jsx(ColorPickerAlphaSlider, {}), swatches && (jsx(ColorPickerSwatches
+                            // A click on a swatch, or Enter or Space on one, closes
+                            // the panel when asked to; the arrows only choose.
+                            , { 
+                                // A click on a swatch, or Enter or Space on one, closes
+                                // the panel when asked to; the arrows only choose.
+                                onClick: event => {
+                                    const target = event.target;
+                                    if (closeOnSwatchClick &&
+                                        target.closest('[role="radio"]')) {
+                                        setOpen(false);
+                                    }
+                                } })), jsx(EyeDropperButton, { className: eyeDropperClass })] }) }) })] }));
+});
+ColorInputBase.displayName = 'ColorInputBase';
+
+export { ColorInputBase };
+//# sourceMappingURL=ColorInputBase.js.map

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

@@ -0,0 +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 { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\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`. The other attributes go on the text `<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  /** The panel's place relative to the field. */\n  position?: PickerPosition;\n  /**\n   * Renders the panel through a portal, into the `portalContainer` a\n   * `ConfigProvider` sets, `document.body` by default.\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 = 'bottom-left',\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    const { bulmaHelperClasses, rest: cleanRest } = useBulmaClasses(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(containerClass, bulmaHelperClasses, className)}\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={inputClass}\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/form/ColorPicker.js

@@ -4,12 +4,12 @@ import { forwardRef, useRef, useState, useMemo, useCallback, useEffect } from 'r
 import { usePrefixedClassNames, classNames, prefixedClassNames } from '../helpers/classNames.js';
 import { useClassPrefix } from '../helpers/Config.js';
 import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
-import { useIsHydrated } from '../helpers/useIsHydrated.js';
 import { useClientLayoutEffect } from '../helpers/useClientLayoutEffect.js';
 import { withSubComponents } from '../helpers/withSubComponents.js';
 import { ColorSwatch } from '../elements/ColorSwatch.js';
 import { parseColor, formatColor, sameColor, prefersDarkInk, hsvaToRgba } from './_colorInternals/colorMath.js';
-import { usePicker, standalone, useColorPicker, ColorPickerContext, keepingChannels, noop } from './_colorInternals/pickerState.js';
+import { usePicker, standalone, useColorPicker, ColorPickerContext, keepingChannels } from './_colorInternals/pickerState.js';
+import { EyeDropperButton } from './_colorInternals/EyeDropperButton.js';
 import { Field } from './Field.js';
 import { Control } from './Control.js';
 import { useFieldsetDisabled, useInsideField, useInsideControl, rendersOwnField, rendersOwnControl } from './FormContext.js';
@@ -406,7 +406,7 @@ const CheckIcon = ({ haloClass }) => (jsx("svg", { viewBox: "0 0 16 16", width:
 const ColorPickerInput = forwardRef(({ className, ...props }, ref) => {
     const picker = usePicker('Input');
     const live = picker ?? standalone;
-    const { color, text, change, disabled, labels, eyeDropper } = live;
+    const { color, text, change, disabled, labels } = live;
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
     const rowClass = usePrefixedClassNames('color-picker-value');
     const previewClass = usePrefixedClassNames('color-picker-preview');
@@ -418,11 +418,6 @@ const ColorPickerInput = forwardRef(({ className, ...props }, ref) => {
         'is-small': true,
         'is-danger': invalid,
     });
-    const buttonClass = usePrefixedClassNames('button', { 'is-small': true });
-    const hydrated = useIsHydrated();
-    const EyeDropper = hydrated
-        ? window.EyeDropper
-        : undefined;
     const commit = () => {
         if (draft === null)
             return;
@@ -448,22 +443,11 @@ const ColorPickerInput = forwardRef(({ className, ...props }, ref) => {
             setDraft(null);
         }
     };
-    // Escape, or a click away, cancels it, which rejects.
-    const pickFromScreen = (Dropper) => new Dropper().open().then(({ sRGBHex }) => {
-        const parsed = parseColor(sRGBHex);
-        // The screen gives a solid color as hex; the alpha stays as it was,
-        // and a gray keeps the hue the picker had.
-        if (parsed) {
-            change(keepingChannels({ ...parsed, a: color.a }, color, sRGBHex), true);
-        }
-    }, noop);
     if (!picker)
         return null;
-    return (jsxs("div", { ref: ref, className: classNames(rowClass, bulmaHelperClasses, className), ...rest, children: [jsx(ColorSwatch, { color: text, className: previewClass, "aria-hidden": "true" }), jsx("input", { type: "text", className: inputClass, value: draft ?? text, disabled: disabled, "aria-label": labels.value, "aria-invalid": invalid || undefined, spellCheck: false, autoComplete: "off", autoCapitalize: "off", onChange: event => setDraft(event.target.value), onKeyDown: onKeyDown, onBlur: commit }), eyeDropper && EyeDropper && (jsx("button", { type: "button", className: buttonClass, "aria-label": labels.eyeDropper, title: labels.eyeDropper, disabled: disabled, onClick: () => pickFromScreen(EyeDropper), children: jsx(EyeDropperIcon, {}) }))] }));
+    return (jsxs("div", { ref: ref, className: classNames(rowClass, bulmaHelperClasses, className), ...rest, children: [jsx(ColorSwatch, { color: text, className: previewClass, "aria-hidden": "true" }), jsx("input", { type: "text", className: inputClass, value: draft ?? text, disabled: disabled, "aria-label": labels.value, "aria-invalid": invalid || undefined, spellCheck: false, autoComplete: "off", autoCapitalize: "off", onChange: event => setDraft(event.target.value), onKeyDown: onKeyDown, onBlur: commit }), jsx(EyeDropperButton, {})] }));
 });
 ColorPickerInput.displayName = 'ColorPicker.Input';
-/** A pipette. */
-const EyeDropperIcon = () => (jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", children: jsx("path", { d: "M10.5 2.5l3 3M9 4l3 3-6.5 6.5H3v-3z", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }) }));
 /**
  * The `ColorPicker` component is a panel for choosing a color: a saturation and brightness square, a hue slider, and the value as text, with alpha and swatches when asked for.
  *