@allxsmith/bestax-bulma 5.67.6 → 5.67.8

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

@@ -1 +1 @@
-{"version":3,"file":"ColorInput.js","sources":["../../../src/form/ColorInput.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { usePrefixedClassNames } from '../helpers/classNames';\nimport { Field, FieldProps } from './Field';\nimport { Control, ControlBaseProps } from './Control';\nimport { ColorInputBase, ColorInputBaseProps } from './ColorInputBase';\nimport {\n  useInsideField,\n  useInsideControl,\n  rendersOwnField,\n  rendersOwnControl,\n} from './FormContext';\nimport { useAutoLabelId } from './useAutoLabelId';\n\n/**\n * Props for the ColorInput convenience wrapper. Extends\n * `ColorInputBaseProps` with Field-level (label, horizontal, message) and\n * Control-level (loading, expanded) props. Inside an existing `Control` it\n * renders no `Control` of its own, so its Control-level props do nothing\n * there and warn in development; set them on that `Control` instead. Inside\n * an outer `Field`, or a `Control` with no `Field` around it, it renders no\n * `Field` of its own either. The exception is `label`, `message`,\n * `horizontal` or `fieldClassName` in that bare `Control`: it keeps a `Field`\n * for them, nested in the `.control`, and warns in development. Wrap the\n * `Control` in a `Field` instead, and set the `label`, `horizontal` and class\n * name on that `Field`.\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 ColorInputProps extends ColorInputBaseProps {\n  /** Field label (component auto-wraps in a `Field` if not already inside). Automatically associated with the text field via `htmlFor`, using your `id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`) and you set no `id` here. */\n  label?: React.ReactNode;\n  /** Size for the label. */\n  labelSize?: FieldProps['labelSize'];\n  /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */\n  labelProps?: FieldProps['labelProps'];\n  /** Render the field with horizontal layout. */\n  horizontal?: boolean;\n  /**\n   * Shows a loading spinner on the `Control` it renders, and hides the\n   * launcher (`triggerIcon`) while it does. Inside your own `Control` it\n   * renders none, so this draws nothing and warns in development; set\n   * `isLoading` on that `Control`.\n   */\n  isLoading?: boolean;\n  /**\n   * Shows the launcher on the field's end that toggles the panel. Hidden by\n   * default while a spinner shows at the same edge: this component's\n   * `isLoading` when it renders its own `Control`, or the enclosing\n   * `Control`'s `isLoading` inside one.\n   * @defaultValue true\n   */\n  triggerIcon?: boolean;\n  /** Expand the control to fill its container. */\n  isExpanded?: boolean;\n  /** Size of the wrapping Control. */\n  controlSize?: ControlBaseProps['size'];\n  /** Help/validation text below the field. */\n  message?: React.ReactNode;\n  /** Color modifier for the help message. */\n  messageColor?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n  /** Additional CSS classes for the Field wrapper. */\n  fieldClassName?: string;\n  /** Additional CSS classes for the Control wrapper. */\n  controlClassName?: string;\n}\n\n/**\n * The `ColorInput` component is a form field for a color: type it, or open a color picker from its launcher or its swatch.\n *\n * The value is a CSS color string, HSL by default, or empty. The panel is\n * the `ColorPicker`'s square, hue slider and, when asked for, alpha slider,\n * swatches and eye dropper, in the same popover the date pickers use.\n *\n * @function\n * @param {ColorInputProps} props - Props for the ColorInput.\n * @returns {JSX.Element}\n *\n * @example\n * <ColorInput label=\"Brand color\" defaultValue=\"hsl(202, 67%, 36%)\" swatches=\"bulma\" />\n */\nexport const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(\n  (props, ref) => {\n    const {\n      label,\n      labelSize,\n      labelProps,\n      horizontal,\n      isLoading,\n      isExpanded,\n      controlSize,\n      message,\n      messageColor,\n      fieldClassName,\n      controlClassName,\n      ...baseProps\n    } = props;\n    const insideField = useInsideField();\n    const insideControl = useInsideControl();\n    const ownField = rendersOwnField('ColorInput', {\n      insideField,\n      insideControl,\n      label,\n      message,\n      horizontal,\n      fieldClassName,\n    });\n    const ownControl = rendersOwnControl('ColorInput', {\n      insideControl,\n      isLoading,\n      isExpanded,\n      controlSize,\n      controlClassName,\n    });\n    const { controlId, fieldLabelProps } = useAutoLabelId({\n      label,\n      id: baseProps.id,\n      labelProps,\n      rendersLabel: ownField,\n    });\n    const helpClass = usePrefixedClassNames('help', {\n      [`is-${messageColor}`]: !!messageColor,\n    });\n\n    // The base hides its launcher while the Control it sits in is loading,\n    // whether that is the one rendered below or an enclosing one.\n    let content: React.ReactNode = (\n      <ColorInputBase ref={ref} {...baseProps} id={controlId} />\n    );\n\n    if (ownControl) {\n      content = (\n        <Control\n          isLoading={isLoading}\n          isExpanded={isExpanded}\n          size={controlSize}\n          className={controlClassName}\n        >\n          {content}\n        </Control>\n      );\n    }\n\n    const messageEl = message ? <p className={helpClass}>{message}</p> : null;\n\n    if (ownField) {\n      return (\n        <Field\n          label={label}\n          labelSize={labelSize}\n          labelProps={fieldLabelProps}\n          horizontal={horizontal}\n          className={fieldClassName}\n        >\n          {content}\n          {messageEl}\n        </Field>\n      );\n    }\n\n    return (\n      <>\n        {content}\n        {messageEl}\n      </>\n    );\n  }\n);\n\nColorInput.displayName = 'ColorInput';\n\nexport default ColorInput;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;;;;;AAsEA;;;;;;;;;;;;;AAaG;AACI,MAAM,UAAU,GAAG,UAAU,CAClC,CAAC,KAAK,EAAE,GAAG,KAAI;AACb,IAAA,MAAM,EACJ,KAAK,EACL,SAAS,EACT,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,WAAW,EACX,OAAO,EACP,YAAY,EACZ,cAAc,EACd,gBAAgB,EAChB,GAAG,SAAS,EACb,GAAG,KAAK;AACT,IAAA,MAAM,WAAW,GAAG,cAAc,EAAE;AACpC,IAAA,MAAM,aAAa,GAAG,gBAAgB,EAAE;AACxC,IAAA,MAAM,QAAQ,GAAG,eAAe,CAAC,YAAY,EAAE;QAC7C,WAAW;QACX,aAAa;QACb,KAAK;QACL,OAAO;QACP,UAAU;QACV,cAAc;AACf,KAAA,CAAC;AACF,IAAA,MAAM,UAAU,GAAG,iBAAiB,CAAC,YAAY,EAAE;QACjD,aAAa;QACb,SAAS;QACT,UAAU;QACV,WAAW;QACX,gBAAgB;AACjB,KAAA,CAAC;AACF,IAAA,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,GAAG,cAAc,CAAC;QACpD,KAAK;QACL,EAAE,EAAE,SAAS,CAAC,EAAE;QAChB,UAAU;AACV,QAAA,YAAY,EAAE,QAAQ;AACvB,KAAA,CAAC;AACF,IAAA,MAAM,SAAS,GAAG,qBAAqB,CAAC,MAAM,EAAE;AAC9C,QAAA,CAAC,MAAM,YAAY,CAAA,CAAE,GAAG,CAAC,CAAC,YAAY;AACvC,KAAA,CAAC;;;AAIF,IAAA,IAAI,OAAO,IACTA,GAAA,CAAC,cAAc,IAAC,GAAG,EAAE,GAAG,EAAA,GAAM,SAAS,EAAE,EAAE,EAAE,SAAS,EAAA,CAAI,CAC3D;IAED,IAAI,UAAU,EAAE;QACd,OAAO,IACLA,GAAA,CAAC,OAAO,EAAA,EACN,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,WAAW,EACjB,SAAS,EAAE,gBAAgB,EAAA,QAAA,EAE1B,OAAO,EAAA,CACA,CACX;IACH;AAEA,IAAA,MAAM,SAAS,GAAG,OAAO,GAAGA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAE,SAAS,YAAG,OAAO,EAAA,CAAK,GAAG,IAAI;IAEzE,IAAI,QAAQ,EAAE;AACZ,QAAA,QACEC,IAAA,CAAC,KAAK,EAAA,EACJ,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,eAAe,EAC3B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,cAAc,EAAA,QAAA,EAAA,CAExB,OAAO,EACP,SAAS,CAAA,EAAA,CACJ;IAEZ;AAEA,IAAA,QACEA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACG,OAAO,EACP,SAAS,CAAA,EAAA,CACT;AAEP,CAAC;AAGH,UAAU,CAAC,WAAW,GAAG,YAAY;;"}
+{"version":3,"file":"ColorInput.js","sources":["../../../src/form/ColorInput.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { usePrefixedClassNames } from '../helpers/classNames';\nimport { Field, FieldProps } from './Field';\nimport { Control, ControlBaseProps } from './Control';\nimport { ColorInputBase, ColorInputBaseProps } from './ColorInputBase';\nimport {\n  useInsideField,\n  useInsideControl,\n  rendersOwnField,\n  rendersOwnControl,\n} from './FormContext';\nimport { useAutoLabelId } from './useAutoLabelId';\n\n/**\n * Props for the ColorInput convenience wrapper. Extends\n * `ColorInputBaseProps` with Field-level (label, horizontal, message) and\n * Control-level (loading, expanded) props. Inside an existing `Control` it\n * renders no `Control` of its own, so its Control-level props do nothing\n * there and warn in development; set them on that `Control` instead. Inside\n * an outer `Field`, or a `Control` with no `Field` around it, it renders no\n * `Field` of its own either. The exception is `label`, `message`,\n * `horizontal` or `fieldClassName` in that bare `Control`: it keeps a `Field`\n * for them, nested in the `.control`, and warns in development. Wrap the\n * `Control` in a `Field` instead, and set the `label`, `horizontal` and class\n * name on that `Field`.\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 ColorInputProps extends ColorInputBaseProps {\n  /** Field label (component auto-wraps in a `Field` if not already inside). Automatically associated with the text field via `htmlFor`, using your `id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`) and you set no `id` here. */\n  label?: React.ReactNode;\n  /** Size for the label. */\n  labelSize?: FieldProps['labelSize'];\n  /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */\n  labelProps?: FieldProps['labelProps'];\n  /** Render the field with horizontal layout. */\n  horizontal?: boolean;\n  /**\n   * Shows a loading spinner on the `Control` it renders, and hides the\n   * launcher (`triggerIcon`) while it does. Inside your own `Control` it\n   * renders none, so this draws nothing and warns in development; set\n   * `isLoading` on that `Control`.\n   */\n  isLoading?: boolean;\n  /**\n   * Shows the launcher on the field's end that toggles the panel. Hidden by\n   * default while a spinner shows at the same edge: this component's\n   * `isLoading` when it renders its own `Control`, or the enclosing\n   * `Control`'s `isLoading` inside one.\n   * @defaultValue true\n   */\n  triggerIcon?: boolean;\n  /** Expand the control to fill its container. */\n  isExpanded?: boolean;\n  /** Size of the wrapping Control. */\n  controlSize?: ControlBaseProps['size'];\n  /** Help/validation text below the field. */\n  message?: React.ReactNode;\n  /** Color modifier for the help message. */\n  messageColor?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n  /** Additional CSS classes for the Field wrapper. */\n  fieldClassName?: string;\n  /** Additional CSS classes for the Control wrapper. */\n  controlClassName?: string;\n}\n\n/**\n * The `ColorInput` component is a form field for a color: type it, or open a color picker from its launcher or its swatch.\n *\n * The value is a CSS color string, HSL by default, or empty. The panel is\n * the `ColorPicker`'s square, hue slider and, when asked for, alpha slider,\n * swatches and eye dropper, in the same popover the date pickers use.\n *\n * @function\n * @param {ColorInputProps} props - Props for the ColorInput.\n * @returns {JSX.Element}\n *\n * @example\n * <ColorInput label=\"Brand color\" defaultValue=\"hsl(202, 67%, 36%)\" swatches=\"bulma\" />\n */\nexport const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(\n  (props, ref) => {\n    const {\n      label,\n      labelSize,\n      labelProps,\n      horizontal,\n      isLoading,\n      isExpanded,\n      controlSize,\n      message,\n      messageColor,\n      fieldClassName,\n      controlClassName,\n      ...baseProps\n    } = props;\n    const insideField = useInsideField();\n    const insideControl = useInsideControl();\n    const ownField = rendersOwnField('ColorInput', {\n      insideField,\n      insideControl,\n      label,\n      message,\n      horizontal,\n      fieldClassName,\n    });\n    const ownControl = rendersOwnControl('ColorInput', {\n      insideControl,\n      isLoading,\n      isExpanded,\n      controlSize,\n      controlClassName,\n    });\n    const { controlId, fieldLabelProps } = useAutoLabelId({\n      label,\n      id: baseProps.id,\n      labelProps,\n      rendersLabel: ownField,\n    });\n    const helpClass = usePrefixedClassNames('help', {\n      [`is-${messageColor}`]: !!messageColor,\n    });\n\n    // The base hides its launcher while the Control it sits in is loading,\n    // whether that is the one rendered below or an enclosing one.\n    let content: React.ReactNode = (\n      <ColorInputBase ref={ref} {...baseProps} id={controlId} />\n    );\n\n    if (ownControl) {\n      content = (\n        <Control\n          isLoading={isLoading}\n          isExpanded={isExpanded}\n          size={controlSize}\n          className={controlClassName}\n        >\n          {content}\n        </Control>\n      );\n    }\n\n    const messageEl = message ? <p className={helpClass}>{message}</p> : null;\n\n    if (ownField) {\n      return (\n        <Field\n          label={label}\n          labelSize={labelSize}\n          labelProps={fieldLabelProps}\n          horizontal={horizontal}\n          className={fieldClassName}\n        >\n          {content}\n          {messageEl}\n        </Field>\n      );\n    }\n\n    return (\n      <>\n        {content}\n        {messageEl}\n      </>\n    );\n  }\n);\n\nColorInput.displayName = 'ColorInput';\n\nexport default ColorInput;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;;;;;AAyEA;;;;;;;;;;;;;AAaG;AACI,MAAM,UAAU,GAAG,UAAU,CAClC,CAAC,KAAK,EAAE,GAAG,KAAI;AACb,IAAA,MAAM,EACJ,KAAK,EACL,SAAS,EACT,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,WAAW,EACX,OAAO,EACP,YAAY,EACZ,cAAc,EACd,gBAAgB,EAChB,GAAG,SAAS,EACb,GAAG,KAAK;AACT,IAAA,MAAM,WAAW,GAAG,cAAc,EAAE;AACpC,IAAA,MAAM,aAAa,GAAG,gBAAgB,EAAE;AACxC,IAAA,MAAM,QAAQ,GAAG,eAAe,CAAC,YAAY,EAAE;QAC7C,WAAW;QACX,aAAa;QACb,KAAK;QACL,OAAO;QACP,UAAU;QACV,cAAc;AACf,KAAA,CAAC;AACF,IAAA,MAAM,UAAU,GAAG,iBAAiB,CAAC,YAAY,EAAE;QACjD,aAAa;QACb,SAAS;QACT,UAAU;QACV,WAAW;QACX,gBAAgB;AACjB,KAAA,CAAC;AACF,IAAA,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,GAAG,cAAc,CAAC;QACpD,KAAK;QACL,EAAE,EAAE,SAAS,CAAC,EAAE;QAChB,UAAU;AACV,QAAA,YAAY,EAAE,QAAQ;AACvB,KAAA,CAAC;AACF,IAAA,MAAM,SAAS,GAAG,qBAAqB,CAAC,MAAM,EAAE;AAC9C,QAAA,CAAC,MAAM,YAAY,CAAA,CAAE,GAAG,CAAC,CAAC,YAAY;AACvC,KAAA,CAAC;;;AAIF,IAAA,IAAI,OAAO,IACTA,GAAA,CAAC,cAAc,IAAC,GAAG,EAAE,GAAG,EAAA,GAAM,SAAS,EAAE,EAAE,EAAE,SAAS,EAAA,CAAI,CAC3D;IAED,IAAI,UAAU,EAAE;QACd,OAAO,IACLA,GAAA,CAAC,OAAO,EAAA,EACN,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,WAAW,EACjB,SAAS,EAAE,gBAAgB,EAAA,QAAA,EAE1B,OAAO,EAAA,CACA,CACX;IACH;AAEA,IAAA,MAAM,SAAS,GAAG,OAAO,GAAGA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAE,SAAS,YAAG,OAAO,EAAA,CAAK,GAAG,IAAI;IAEzE,IAAI,QAAQ,EAAE;AACZ,QAAA,QACEC,IAAA,CAAC,KAAK,EAAA,EACJ,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,eAAe,EAC3B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,cAAc,EAAA,QAAA,EAAA,CAExB,OAAO,EACP,SAAS,CAAA,EAAA,CACJ;IAEZ;AAEA,IAAA,QACEA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACG,OAAO,EACP,SAAS,CAAA,EAAA,CACT;AAEP,CAAC;AAGH,UAAU,CAAC,WAAW,GAAG,YAAY;;"}

package/dist/esm/form/ColorInputBase.js

@@ -3,7 +3,7 @@
 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 { useFieldHelperClasses } from '../helpers/useFieldHelperClasses.js';
 import { Icon } from '../elements/Icon.js';
 import { ColorSwatch } from '../elements/ColorSwatch.js';
 import { ColorPickerArea, ColorPickerHueSlider, ColorPickerAlphaSlider, ColorPickerSwatches } from './ColorPicker.js';
@@ -34,7 +34,10 @@ const ColorInputBase = forwardRef((props, ref) => {
     const controlLoading = useControlLoading();
     const triggerIcon = triggerIconProp ?? !controlLoading;
     const t = mergeColorLabels(labels);
-    const { bulmaHelperClasses, rest: cleanRest } = useBulmaClasses(rest);
+    // The field takes the background and text helpers, since Bulma's `.input`
+    // sets its own background and font. The container keeps the rest, and the
+    // text helpers too where a popover inside it takes them.
+    const { backgroundClasses, textClasses, otherClasses, rest: cleanRest, } = useFieldHelperClasses(rest);
     const isControlled = controlledValue !== undefined;
     const [internalValue, setInternalValue] = useState(defaultValue ?? '');
     const value = isControlled ? controlledValue : internalValue;
@@ -179,7 +182,7 @@ const ColorInputBase = forwardRef((props, ref) => {
         '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
+    return (jsxs("div", { ref: containerRef, className: classNames(containerClass, otherClasses, textClasses, className), ...localeScope.rootAttrs, children: [jsx("input", { ...cleanRest, ref: combinedRef, type: "text", role: "combobox", ...popupAttrs, autoComplete: "off", spellCheck: false, autoCapitalize: "off", className: classNames(inputClass, textClasses, backgroundClasses), 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.
                             , { 

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 { 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  /**\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 `Modal`, `Dialog` or `Command.Dialog` it's\n   * in, 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    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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"}
+{"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 `Modal`, `Dialog` or `Command.Dialog` it's\n   * in, 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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"}

package/dist/esm/form/DateInputBase.js

@@ -3,7 +3,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useState, useMemo, useEffect, useRef, useId, useCallback } from 'react';
 import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
-import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
+import { useFieldHelperClasses } from '../helpers/useFieldHelperClasses.js';
 import { mergeLabels } from './_pickerInternals/pickerTypes.js';
 import { formatDate, DEFAULT_YEAR_FORMAT, DEFAULT_MONTH_FORMAT, DEFAULT_DATE_FORMAT, parseDate, toIsoValue, fromIsoValue } from './_pickerInternals/formatters.js';
 import { floorMin, clampDate, startOfPeriod, endOfPeriod, startOfDay, isWithin, isPeriodUnselectable, isSameDay } from './_pickerInternals/dateUtils.js';
@@ -79,7 +79,10 @@ const DateInputBase = forwardRef((props, ref) => {
     const containerRef = useRef(null);
     const reactId = useId();
     const popoverId = id ? `${id}-popover` : `picker-${reactId}`;
-    const { bulmaHelperClasses, rest: cleanRest } = useBulmaClasses(rest);
+    // The field takes the background and text helpers, since Bulma's `.input`
+    // sets its own background and font. The container keeps the rest, and the
+    // text helpers too where a popover inside it takes them.
+    const { bulmaHelperClasses, backgroundClasses, textClasses, otherClasses, rest: cleanRest, } = useFieldHelperClasses(rest);
     const { shouldUseNative } = useNativeMobilePicker({
         force: mobileNative === 'auto' ? undefined : mobileNative,
     });
@@ -268,7 +271,7 @@ const DateInputBase = forwardRef((props, ref) => {
     if (inline) {
         return (jsxs("div", { ...localeScope.rootAttrs, ...cleanRest, ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), children: [calendar, name && (jsx("input", { type: "hidden", name: name, form: form, value: value ? toIsoValue(value, granularity) : '', required: required }))] }));
     }
-    return (jsxs("div", { ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), ...localeScope.rootAttrs, ...cleanRest, children: [jsx("input", { ref: combinedRef, type: "text", role: "combobox", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": popoverId, autoComplete: "off", className: inputClass, value: text, placeholder: placeholder, disabled: disabled, readOnly: inputReadOnlyAttr, name: name, form: form, required: required, id: id, ...inputHandlers }), popover && triggerIcon && (jsx("button", { type: "button", className: triggerClass, onClick: () => {
+    return (jsxs("div", { ref: containerRef, className: classNames(containerClass, otherClasses, textClasses, className), ...localeScope.rootAttrs, ...cleanRest, children: [jsx("input", { ref: combinedRef, type: "text", role: "combobox", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": popoverId, autoComplete: "off", className: classNames(inputClass, textClasses, backgroundClasses), value: text, placeholder: placeholder, disabled: disabled, readOnly: inputReadOnlyAttr, name: name, form: form, required: required, id: id, ...inputHandlers }), popover && triggerIcon && (jsx("button", { type: "button", className: triggerClass, onClick: () => {
                     if (canOpen)
                         setOpen(!open);
                 }, disabled: !canOpen, "aria-label": chooseLabel, "aria-haspopup": "dialog", "aria-controls": popoverId, "aria-expanded": open, tabIndex: canOpen ? 0 : -1, children: jsx(Icon, { name: triggerIconName, size: size }) })), popover && (jsx(PickerPopover, { localeScope: localeScope.panel, isOpen: open, onClose: handlePopoverClose, anchorRef: containerRef, position: position, appendToBody: appendToBody, ariaLabel: chooseLabel, id: popoverId, restoreFocusRef: inputRef, initialFocusSelector: CALENDAR_FOCUSED_CELL, children: calendar }))] }));

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

@@ -1 +1 @@
-{"version":3,"file":"DateInputBase.js","sources":["../../../src/form/DateInputBase.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport {\n  PickerPosition,\n  DayOfWeek,\n  DateGranularity,\n  PickerLabels,\n  mergeLabels,\n} from './_pickerInternals/pickerTypes';\nimport {\n  formatDate,\n  parseDate,\n  DateFormatOption,\n  DEFAULT_DATE_FORMAT,\n  DEFAULT_MONTH_FORMAT,\n  DEFAULT_YEAR_FORMAT,\n  fromIsoValue,\n  toIsoValue,\n} from './_pickerInternals/formatters';\nimport {\n  isWithin,\n  clampDate,\n  floorMin,\n  isSameDay,\n  isPeriodUnselectable,\n  startOfDay,\n  startOfPeriod,\n  endOfPeriod,\n} from './_pickerInternals/dateUtils';\nimport { Calendar, CALENDAR_FOCUSED_CELL } from './_pickerInternals/Calendar';\nimport { PickerPopover } from './_pickerInternals/PickerPopover';\nimport { useNativeMobilePicker } from './_pickerInternals/useNativeMobilePicker';\nimport { useSegmentedEntry } from './_pickerInternals/useSegmentedEntry';\nimport { supportsInputType } from './_pickerInternals/nativeInputSupport';\nimport type { SegmentKind } from './_pickerInternals/segmentMap';\nimport {\n  hasOwnDayNames,\n  usePickerFirstDayOfWeek,\n  usePickerLocale,\n  usePickerLocaleScope,\n} from './_pickerInternals/useLocaleDefaults';\nimport { useControlLoading } from './controlLoading';\nimport { useFieldLabelTarget, useFieldsetDisabled } from './FormContext';\nimport { useIsHydrated } from '../helpers/useIsHydrated';\nimport { Icon } from '../elements/Icon';\n\nconst DEFAULT_FORMATS: Record<DateGranularity, string> = {\n  day: DEFAULT_DATE_FORMAT,\n  month: DEFAULT_MONTH_FORMAT,\n  year: DEFAULT_YEAR_FORMAT,\n};\n\n// Segments finer than the granularity render but are never edited.\nconst SKIPPED_SEGMENTS: Record<\n  DateGranularity,\n  readonly SegmentKind[] | undefined\n> = {\n  day: undefined,\n  month: ['day'],\n  year: ['month', 'day'],\n};\n\n/**\n * Props for the raw DateInput base. Use the higher-level `DateInput` for\n * Field/Control composition; `DateInputBase` is the input + popover only.\n */\nexport interface DateInputBaseProps\n  extends\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      | 'value'\n      | 'defaultValue'\n      | 'onChange'\n      | 'size'\n      | 'color'\n      | 'min'\n      | 'max'\n      | 'type'\n      | 'popover'\n    >,\n    Omit<BulmaClassesProps, 'color'> {\n  /** Controlled selected date. */\n  value?: Date | null;\n  /** Initial date for uncontrolled usage. */\n  defaultValue?: Date | null;\n  /**\n   * Fired when the value changes. A day picked in the calendar, by click or\n   * by key, arrives at local midnight.\n   */\n  onChange?: (d: Date | null) => void;\n  /** Fired when the popover opens. */\n  onOpen?: () => void;\n  /** Fired when the popover closes. */\n  onClose?: () => void;\n  /**\n   * Earliest selectable date. A `min` before year 1 is raised to 1 January of\n   * year 1, where the range starts without one too: HTML's date and month\n   * inputs hold no earlier year, so the calendar and typing stop there.\n   */\n  min?: Date;\n  /** Latest selectable date. */\n  max?: Date;\n  /**\n   * Disable the input. An `inline` calendar disables its days and header\n   * buttons, but its hidden input still submits the value, where a disabled\n   * input submits nothing.\n   */\n  disabled?: boolean;\n  /**\n   * Make the input read-only. An `inline` calendar still moves through the\n   * dates by key and by its header, but a click, Enter or Space picks\n   * nothing.\n   */\n  readOnly?: boolean;\n  /** Placeholder text for the input. */\n  placeholder?: string;\n  /**\n   * What the calendar shows and what a selection means: `'day'` shows the\n   * day grid, `'month'` a grid of the focused year's months whose header\n   * steps a year at a time, and `'year'` the year list. A month or year value\n   * is the first day of that period at local midnight, so `onChange` gets\n   * `new Date(2026, 5, 1)` for June 2026. A `value` elsewhere in the period\n   * shows as that period and stays as given until the user picks a period or\n   * types a different one. `min`, `max`,\n   * `shouldDisableDate` and `unselectableDates` judge whole periods: a month\n   * or year can be picked while any day in it can, so a `min` of 15 June\n   * still allows June, and June commits as 1 June, earlier than that `min`.\n   * The default `format` follows the granularity (`'YYYY-MM'`, `'YYYY'`); a\n   * custom `format` with finer tokens still renders them, but typing skips\n   * them. `firstDayOfWeek`, `dayNames` and `nearbyMonthDays` only affect the\n   * day grid, and an `inline` calendar's hidden form value is `YYYY-MM` or\n   * `YYYY`. The `labels` keys `chooseMonth` / `chooseYear` name the launcher\n   * and popover, and `prevYear` / `nextYear` the month grid's header buttons.\n   * @defaultValue 'day'\n   */\n  granularity?: DateGranularity;\n  /**\n   * Token format string or `Intl.DateTimeFormat` options. Defaults to\n   * `'YYYY-MM-DD'`, or to `'YYYY-MM'` / `'YYYY'` when `granularity` is\n   * `'month'` / `'year'`.\n   * @defaultValue 'YYYY-MM-DD'\n   */\n  format?: DateFormatOption;\n  /**\n   * Custom parser (use when `format` is `Intl.DateTimeFormatOptions`).\n   * Enter and leaving the field call it only if the user changed the text,\n   * so focus passing through commits nothing and the value keeps what the\n   * format leaves out, such as the time of day.\n   */\n  parse?: (s: string) => Date | null;\n  /**\n   * BCP-47 locale tag for day/month names and Intl formatting. Unset, it is\n   * the `locale` of a `LocaleProvider` around the picker, and with neither,\n   * `Intl` uses the runtime's own locale. On a server render that is the\n   * server's, so an `inline` calendar rendered there names its days in the\n   * server's language and the browser's own render names them in the\n   * browser's: give it a locale, here or through a `LocaleProvider`, where\n   * the two can differ.\n   */\n  locale?: string;\n  /**\n   * Render the calendar inline (no popover).\n   * On a server-rendered page it marks today once the page hydrates, by\n   * the browser's clock rather than the server's. With no `value` or\n   * `defaultValue` it opens on the month the clock reads, and around the end\n   * of a month the server's clock and the browser's can read different\n   * months, so give it a date both render the same.\n   */\n  inline?: boolean;\n  /**\n   * Use `<input type=\"date\">` on coarse-pointer + small-viewport devices. At\n   * `'month'` granularity it uses `<input type=\"month\">` where the browser\n   * implements one, as Chromium browsers, Safari on iOS and Firefox for\n   * Android do, and the calendar where it doesn't, as in desktop Firefox.\n   * Desktop Safari accepts the type but draws no month control, so forcing\n   * `true` there shows a plain text box. HTML has no year input, so `'year'`\n   * granularity always renders the calendar.\n   */\n  mobileNative?: boolean | 'auto';\n  /** Allow segmented keyboard typing in the input (type the date directly, auto-advancing across segments). `false` makes the field picker-only. */\n  editable?: boolean;\n  /** Whether the calendar popover exists. `false` makes the field input-only (segmented typing, no popover). */\n  popover?: boolean;\n  /**\n   * Open the popover when the input is focused. Focus that a closing popover\n   * hands back to the input leaves it closed. Dismissing it commits nothing:\n   * an empty field stays empty, and leaving afterwards commits only what was\n   * typed since. With it off, the launcher or Alt+ArrowDown opens it.\n   */\n  openOnFocus?: boolean;\n  /** Close the popover after a date is selected. */\n  closeOnSelect?: boolean;\n  /**\n   * Where the popover 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   * Render the popover through a portal, into the `portalContainer` a\n   * `ConfigProvider` sets, else the `Modal`, `Dialog` or `Command.Dialog` it's\n   * in, else `document.body`.\n   */\n  appendToBody?: boolean;\n  /**\n   * Bulma color modifier for the input, also carried by the calendar, where it\n   * colors the selected date. Today's date and the keyboard focus ring take\n   * the color's `-on-scheme` variant, which Bulma adjusts to contrast with the\n   * background, so pale colors stay readable. Unset, the calendar uses its\n   * `--bulma-dateinput-*` variables, which follow `primary` the same way by\n   * default.\n   */\n  color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n  /** Size variant. */\n  size?: 'small' | 'medium' | 'large';\n  /** Render the input with rounded corners. */\n  isRounded?: boolean;\n  /** Predicate to disable specific dates (e.g. weekends). Blocked dates are also rejected during manual typing. */\n  shouldDisableDate?: (d: Date) => boolean;\n  /** Convenience array of disabled dates; merged with `shouldDisableDate`. Matched by calendar day and also rejected during manual typing. */\n  unselectableDates?: Date[];\n  /**\n   * Day the week starts on (0 = Sunday). Unset inside a `LocaleProvider`,\n   * it is the first day of the week in the picker's locale, its own `locale`\n   * or else the provider's, such as Monday for `\"de\"`. Elsewhere, with no\n   * locale from either, or with seven `dayNames` of your own, it is Sunday:\n   * set it with `dayNames` to start the week on another day.\n   * @defaultValue 0\n   */\n  firstDayOfWeek?: DayOfWeek;\n  /**\n   * Override the 7 day-name labels (in calendar order, post-rotation). They\n   * are shown exactly as given, from the first column, so they have to start\n   * on the day the week does. With them, an unset `firstDayOfWeek` stays\n   * Sunday even inside a `LocaleProvider`, so names written Sunday first keep\n   * matching their columns; to start on the locale's day, set\n   * `firstDayOfWeek` too and list the names from that day. They also name\n   * the columns for assistive technology. Without them each column is named\n   * by its full weekday in the picker's locale, which a server-rendered\n   * calendar adds once the page hydrates.\n   */\n  dayNames?: string[];\n  /** Override the 12 month-name labels. */\n  monthNames?: string[];\n  /** Show dimmed dates from adjacent months in the grid. */\n  nearbyMonthDays?: boolean;\n  /** Decorative left icon glyph for the wrapping `Control` (shown by default). Set `''` to hide. */\n  iconLeftName?: string;\n  /**\n   * Show a clickable launcher button on the right that toggles the popover.\n   * Hidden by default while a `Control` it sits in shows its `isLoading`\n   * spinner, which shares that right edge.\n   * @defaultValue true\n   */\n  triggerIcon?: boolean;\n  /** Glyph for the right launcher button. */\n  triggerIconName?: string;\n  /** Optional translatable string overrides (ARIA labels, button text). */\n  labels?: PickerLabels;\n}\n\n/**\n * Raw DateInput — input + popover calendar without Field/Control wrapping.\n * Use `DateInput` for the convenience wrapper.\n *\n * @function\n * @param {DateInputBaseProps} props\n * @returns {JSX.Element}\n */\nexport const DateInputBase = forwardRef<HTMLInputElement, DateInputBaseProps>(\n  (props, ref) => {\n    const {\n      value: controlledValue,\n      defaultValue,\n      onChange,\n      onOpen,\n      onClose,\n      min,\n      max,\n      disabled: disabledProp,\n      readOnly,\n      placeholder,\n      granularity = 'day',\n      format,\n      parse,\n      locale: localeProp,\n      inline = false,\n      mobileNative = 'auto',\n      editable = true,\n      popover = true,\n      openOnFocus = true,\n      closeOnSelect = true,\n      position,\n      appendToBody = false,\n      color,\n      size,\n      isRounded,\n      shouldDisableDate,\n      unselectableDates,\n      firstDayOfWeek: firstDayOfWeekProp,\n      dayNames,\n      monthNames,\n      nearbyMonthDays = true,\n      className,\n      name,\n      form,\n      required,\n      id: idProp,\n      onFocus,\n      onClick,\n      onKeyDown,\n      onBlur,\n      iconLeftName: _iconLeftName,\n      triggerIcon: triggerIconProp,\n      triggerIconName = 'chevron-down',\n      labels,\n      ...rest\n    } = props;\n    // A LocaleProvider around the picker sets its default locale and, through\n    // that locale, the day its week starts on.\n    const locale = usePickerLocale(localeProp);\n    // Its own language and direction, which its root and a portaled panel\n    // carry inside a provider.\n    const localeScope = usePickerLocaleScope(localeProp, props.dir);\n    const firstDayOfWeek = usePickerFirstDayOfWeek(\n      firstDayOfWeekProp,\n      locale,\n      hasOwnDayNames(dayNames)\n    );\n    const disabled = useFieldsetDisabled(disabledProp);\n    // Inside a labeled Field the input takes the id the label points at\n    // when the caller set none, as InputBase does, and the popover's ids\n    // follow it. Inline there is no input to name, so nothing takes the\n    // Field's id or builds on it.\n    const id = useFieldLabelTarget(idProp, !inline);\n    // The launcher gives way to the loading spinner of a Control this sits in.\n    const controlLoading = useControlLoading();\n    const triggerIcon = triggerIconProp ?? !controlLoading;\n\n    const t = mergeLabels(labels);\n    const isDayGranularity = granularity === 'day';\n    const resolvedFormat = format ?? DEFAULT_FORMATS[granularity];\n\n    const isControlled = controlledValue !== undefined;\n    const [internalValue, setInternalValue] = useState<Date | null>(\n      defaultValue ?? null\n    );\n    const value = isControlled ? (controlledValue ?? null) : internalValue;\n\n    // Nothing before year 1 is in range, as in HTML's date inputs.\n    const lowerBound = useMemo(() => floorMin(min), [min]);\n\n    const initialFocused = useMemo(\n      () => clampDate(value ?? new Date(), lowerBound, max),\n      // intentionally only on mount: keep focusedDate stable until value/open change\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      []\n    );\n    const [focusedDate, setFocusedDate] = useState<Date>(initialFocused);\n    // Re-clamp focusedDate if min/max change after mount so the focused cell\n    // never disappears outside the displayable range.\n    useEffect(() => {\n      setFocusedDate(prev => clampDate(prev, lowerBound, max));\n    }, [lowerBound, max]);\n    const [open, setOpenState] = useState(false);\n    const [text, setText] = useState<string>(\n      value ? formatDate(value, resolvedFormat, locale) : ''\n    );\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const reactId = useId();\n    const popoverId = id ? `${id}-popover` : `picker-${reactId}`;\n\n    const { bulmaHelperClasses, rest: cleanRest } = useBulmaClasses(rest);\n\n    const { shouldUseNative } = useNativeMobilePicker({\n      force: mobileNative === 'auto' ? undefined : mobileNative,\n    });\n    // The day picker goes native as it always has. A month picker does only\n    // where the browser implements the month input, asked after hydration so\n    // the server and the first client render agree. HTML has no year input,\n    // so a year picker always renders the calendar.\n    const hydrated = useIsHydrated();\n    const hasNativeInput =\n      isDayGranularity ||\n      (granularity === 'month' && hydrated && supportsInputType('month'));\n    const useNative = !inline && shouldUseNative && hasNativeInput;\n\n    const inputClass = usePrefixedClassNames('input', {\n      [`is-${color}`]: !!color,\n      [`is-${size}`]: !!size,\n      'is-rounded': isRounded,\n    });\n    const containerClass = usePrefixedClassNames('dateinput-container');\n    const triggerClass = usePrefixedClassNames('dateinput-trigger');\n\n    // What the latest request asked for, so a second request in the same\n    // event sees it before React renders. The callbacks fire here rather than\n    // in a state updater, which StrictMode calls twice, and after the state\n    // is set, so a request a callback makes is the one that lands last.\n    const requestedOpenRef = useRef(false);\n    const setOpen = useCallback(\n      (next: boolean) => {\n        if (requestedOpenRef.current === next) return;\n        requestedOpenRef.current = next;\n        setOpenState(next);\n        if (next) onOpen?.();\n        else onClose?.();\n      },\n      [onOpen, onClose]\n    );\n\n    // Sync displayed text with value when value changes externally.\n    useEffect(() => {\n      setText(value ? formatDate(value, resolvedFormat, locale) : '');\n    }, [value, resolvedFormat, locale]);\n\n    const commitValue = useCallback(\n      (next: Date | null) => {\n        // A month or year value is its period's first day, however the\n        // calendar, typing or parsing arrived at it.\n        const committed =\n          next && !isDayGranularity ? startOfPeriod(next, granularity) : next;\n        if (!isControlled) setInternalValue(committed);\n        // Keep the calendar's focused cell tracking typed / parsed values.\n        if (committed) setFocusedDate(committed);\n        onChange?.(committed);\n      },\n      [isControlled, onChange, isDayGranularity, granularity]\n    );\n\n    // At month or year granularity the bounds widen to the periods holding\n    // them, so the month or year containing `min` stays reachable.\n    const periodMin = useMemo(\n      () =>\n        isDayGranularity ? lowerBound : startOfPeriod(lowerBound, granularity),\n      [lowerBound, isDayGranularity, granularity]\n    );\n    const periodMax = useMemo(\n      () => (max && !isDayGranularity ? endOfPeriod(max, granularity) : max),\n      [max, isDayGranularity, granularity]\n    );\n\n    // A pick is the day at midnight, as a click on its cell gives. Enter hands\n    // over the focused date, which can carry a time of day from the clock, a\n    // value or a bound, so its time is dropped here.\n    const handleSelect = useCallback(\n      (picked: Date) => {\n        const d = startOfDay(picked);\n        if (!isWithin(d, periodMin, periodMax)) return;\n        commitValue(d);\n        setFocusedDate(d);\n        if (closeOnSelect) setOpen(false);\n      },\n      [periodMin, periodMax, commitValue, closeOnSelect, setOpen]\n    );\n\n    const tryParse = useCallback(\n      (s: string): Date | null => {\n        const trimmed = s.trim();\n        if (!trimmed) return null;\n        const fmt = typeof format === 'string' ? format : undefined;\n        return parse\n          ? parse(trimmed)\n          : parseDate(trimmed, fmt ?? DEFAULT_FORMATS[granularity], locale);\n      },\n      [parse, format, locale, granularity]\n    );\n\n    // The Date the user edits when starting without a current value (today at\n    // midnight, or the start of this month or year; the hook clamps to\n    // min/max on commit).\n    const makeBaseDate = useCallback((): Date => {\n      const d = new Date();\n      d.setHours(0, 0, 0, 0);\n      return isDayGranularity ? d : startOfPeriod(d, granularity);\n    }, [isDayGranularity, granularity]);\n\n    const inputReadOnlyAttr = !!readOnly || !editable;\n    const canOpen = !!popover && !disabled && !readOnly;\n\n    // Blocking predicate for manual entry, matching the calendar's\n    // disabled-cell logic (shouldDisableDate + unselectableDates by day, or\n    // every day of the month or year blocked at those granularities).\n    const isBlocked = useMemo(() => {\n      if (!isDayGranularity) {\n        const constraints = { min, max, shouldDisableDate, unselectableDates };\n        return (d: Date) => isPeriodUnselectable(d, granularity, constraints);\n      }\n      if (!shouldDisableDate && !unselectableDates?.length) return undefined;\n      return (d: Date) =>\n        !!shouldDisableDate?.(d) ||\n        !!unselectableDates?.some(u => isSameDay(u, d));\n    }, [\n      isDayGranularity,\n      granularity,\n      min,\n      max,\n      shouldDisableDate,\n      unselectableDates,\n    ]);\n\n    // Typing, and the re-parse on blur or Enter, that lands in the period the\n    // value already holds commits nothing, so a `value` elsewhere in its month\n    // or year changes only when the user picks or types a different period.\n    const commitTyped = useCallback(\n      (next: Date | null) => {\n        if (\n          next &&\n          value &&\n          !isDayGranularity &&\n          startOfPeriod(next, granularity).getTime() ===\n            startOfPeriod(value, granularity).getTime()\n        ) {\n          setText(formatDate(value, resolvedFormat, locale));\n          return;\n        }\n        commitValue(next);\n      },\n      [\n        value,\n        isDayGranularity,\n        granularity,\n        resolvedFormat,\n        locale,\n        commitValue,\n      ]\n    );\n\n    const { inputHandlers } = useSegmentedEntry({\n      format: resolvedFormat,\n      skipKinds: SKIPPED_SEGMENTS[granularity],\n      value,\n      commitValue: commitTyped,\n      formatFn: formatDate,\n      tryParse,\n      text,\n      setText,\n      makeBaseDate,\n      locale,\n      min: periodMin,\n      max: periodMax,\n      isBlocked,\n      disabled,\n      readOnly,\n      editable,\n      popover,\n      openOnFocus,\n      closeOnSelect,\n      isOpen: open,\n      setOpen,\n      inputRef,\n      containerRef,\n      onFocus,\n      onClick,\n      onKeyDown,\n      onBlur,\n    });\n\n    const handlePopoverClose = useCallback(() => setOpen(false), [setOpen]);\n\n    const combinedRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        (inputRef as React.MutableRefObject<HTMLInputElement | null>).current =\n          node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref)\n          (ref as React.MutableRefObject<HTMLInputElement | null>).current =\n            node;\n      },\n      [ref]\n    );\n\n    // Native mobile path renders <input type=\"date\"> (type=\"month\" for a\n    // month picker).\n    if (useNative) {\n      return (\n        <input\n          {...localeScope.rootAttrs}\n          {...cleanRest}\n          ref={combinedRef}\n          type={isDayGranularity ? 'date' : 'month'}\n          className={classNames(inputClass, bulmaHelperClasses, className)}\n          value={value ? toIsoValue(value, granularity) : ''}\n          onChange={e => {\n            const parsed = e.target.value\n              ? fromIsoValue(e.target.value, granularity)\n              : null;\n            commitValue(parsed);\n          }}\n          min={min ? toIsoValue(lowerBound, granularity) : undefined}\n          max={max ? toIsoValue(max, granularity) : undefined}\n          disabled={disabled}\n          readOnly={readOnly}\n          placeholder={placeholder}\n          name={name}\n          form={form}\n          required={required}\n          id={id}\n        />\n      );\n    }\n\n    const chooseLabel =\n      granularity === 'month'\n        ? t.chooseMonth\n        : granularity === 'year'\n          ? t.chooseYear\n          : t.chooseDate;\n\n    const calendar = (\n      <Calendar\n        // A new granularity starts the calendar over on its own view.\n        key={granularity}\n        granularity={granularity}\n        value={value}\n        focusedDate={focusedDate}\n        onSelect={handleSelect}\n        onFocusedDateChange={setFocusedDate}\n        min={min}\n        max={max}\n        shouldDisableDate={shouldDisableDate}\n        unselectableDates={unselectableDates}\n        firstDayOfWeek={firstDayOfWeek}\n        locale={locale}\n        dayNames={dayNames}\n        monthNames={monthNames}\n        nearbyMonthDays={nearbyMonthDays}\n        color={color}\n        size={size}\n        // The popover panel takes `popoverId`, so the calendar inside it\n        // takes one of its own. Inline there is no panel, and the calendar\n        // keeps the id it released with.\n        id={inline ? popoverId : `${popoverId}-cal`}\n        autoFocusCell={open}\n        labels={labels}\n        disabled={disabled}\n        readOnly={readOnly}\n      />\n    );\n\n    if (inline) {\n      return (\n        <div\n          {...localeScope.rootAttrs}\n          {...cleanRest}\n          ref={containerRef}\n          className={classNames(containerClass, bulmaHelperClasses, className)}\n        >\n          {calendar}\n          {name && (\n            <input\n              type=\"hidden\"\n              name={name}\n              form={form}\n              value={value ? toIsoValue(value, granularity) : ''}\n              required={required}\n            />\n          )}\n        </div>\n      );\n    }\n\n    return (\n      <div\n        ref={containerRef}\n        className={classNames(containerClass, bulmaHelperClasses, className)}\n        {...localeScope.rootAttrs}\n        {...cleanRest}\n      >\n        <input\n          ref={combinedRef}\n          type=\"text\"\n          role=\"combobox\"\n          aria-haspopup=\"dialog\"\n          aria-expanded={open}\n          aria-controls={popoverId}\n          autoComplete=\"off\"\n          className={inputClass}\n          value={text}\n          placeholder={placeholder}\n          disabled={disabled}\n          readOnly={inputReadOnlyAttr}\n          name={name}\n          form={form}\n          required={required}\n          id={id}\n          {...inputHandlers}\n        />\n        {popover && triggerIcon && (\n          <button\n            type=\"button\"\n            className={triggerClass}\n            onClick={() => {\n              if (canOpen) setOpen(!open);\n            }}\n            disabled={!canOpen}\n            aria-label={chooseLabel}\n            aria-haspopup=\"dialog\"\n            aria-controls={popoverId}\n            aria-expanded={open}\n            tabIndex={canOpen ? 0 : -1}\n          >\n            <Icon name={triggerIconName} size={size} />\n          </button>\n        )}\n        {popover && (\n          <PickerPopover\n            localeScope={localeScope.panel}\n            isOpen={open}\n            onClose={handlePopoverClose}\n            anchorRef={containerRef}\n            position={position}\n            appendToBody={appendToBody}\n            ariaLabel={chooseLabel}\n            id={popoverId}\n            restoreFocusRef={inputRef}\n            initialFocusSelector={CALENDAR_FOCUSED_CELL}\n          >\n            {calendar}\n          </PickerPopover>\n        )}\n      </div>\n    );\n  }\n);\n\nDateInputBase.displayName = 'DateInputBase';\n\nexport default DateInputBase;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"DateInputBase.js","sources":["../../../src/form/DateInputBase.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { useFieldHelperClasses } from '../helpers/useFieldHelperClasses';\nimport {\n  PickerPosition,\n  DayOfWeek,\n  DateGranularity,\n  PickerLabels,\n  mergeLabels,\n} from './_pickerInternals/pickerTypes';\nimport {\n  formatDate,\n  parseDate,\n  DateFormatOption,\n  DEFAULT_DATE_FORMAT,\n  DEFAULT_MONTH_FORMAT,\n  DEFAULT_YEAR_FORMAT,\n  fromIsoValue,\n  toIsoValue,\n} from './_pickerInternals/formatters';\nimport {\n  isWithin,\n  clampDate,\n  floorMin,\n  isSameDay,\n  isPeriodUnselectable,\n  startOfDay,\n  startOfPeriod,\n  endOfPeriod,\n} from './_pickerInternals/dateUtils';\nimport { Calendar, CALENDAR_FOCUSED_CELL } from './_pickerInternals/Calendar';\nimport { PickerPopover } from './_pickerInternals/PickerPopover';\nimport { useNativeMobilePicker } from './_pickerInternals/useNativeMobilePicker';\nimport { useSegmentedEntry } from './_pickerInternals/useSegmentedEntry';\nimport { supportsInputType } from './_pickerInternals/nativeInputSupport';\nimport type { SegmentKind } from './_pickerInternals/segmentMap';\nimport {\n  hasOwnDayNames,\n  usePickerFirstDayOfWeek,\n  usePickerLocale,\n  usePickerLocaleScope,\n} from './_pickerInternals/useLocaleDefaults';\nimport { useControlLoading } from './controlLoading';\nimport { useFieldLabelTarget, useFieldsetDisabled } from './FormContext';\nimport { useIsHydrated } from '../helpers/useIsHydrated';\nimport { Icon } from '../elements/Icon';\n\nconst DEFAULT_FORMATS: Record<DateGranularity, string> = {\n  day: DEFAULT_DATE_FORMAT,\n  month: DEFAULT_MONTH_FORMAT,\n  year: DEFAULT_YEAR_FORMAT,\n};\n\n// Segments finer than the granularity render but are never edited.\nconst SKIPPED_SEGMENTS: Record<\n  DateGranularity,\n  readonly SegmentKind[] | undefined\n> = {\n  day: undefined,\n  month: ['day'],\n  year: ['month', 'day'],\n};\n\n/**\n * Props for the raw DateInput base. Use the higher-level `DateInput` for\n * Field/Control composition; `DateInputBase` is the input + popover only.\n *\n * @helperProps Helper props go on the `.dateinput-container` `<div>`, with\n * `className` and the other attributes, except that the background helpers\n * go on the `<input>`, and the text helpers on both, since Bulma's `.input`\n * sets its own background and font, and the popover inside the `<div>`\n * takes the text ones. Inline they all go on the `<div>`, and on the native\n * mobile input, on the `<input>`.\n */\nexport interface DateInputBaseProps\n  extends\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      | 'value'\n      | 'defaultValue'\n      | 'onChange'\n      | 'size'\n      | 'color'\n      | 'min'\n      | 'max'\n      | 'type'\n      | 'popover'\n    >,\n    Omit<BulmaClassesProps, 'color'> {\n  /** Controlled selected date. */\n  value?: Date | null;\n  /** Initial date for uncontrolled usage. */\n  defaultValue?: Date | null;\n  /**\n   * Fired when the value changes. A day picked in the calendar, by click or\n   * by key, arrives at local midnight.\n   */\n  onChange?: (d: Date | null) => void;\n  /** Fired when the popover opens. */\n  onOpen?: () => void;\n  /** Fired when the popover closes. */\n  onClose?: () => void;\n  /**\n   * Earliest selectable date. A `min` before year 1 is raised to 1 January of\n   * year 1, where the range starts without one too: HTML's date and month\n   * inputs hold no earlier year, so the calendar and typing stop there.\n   */\n  min?: Date;\n  /** Latest selectable date. */\n  max?: Date;\n  /**\n   * Disable the input. An `inline` calendar disables its days and header\n   * buttons, but its hidden input still submits the value, where a disabled\n   * input submits nothing.\n   */\n  disabled?: boolean;\n  /**\n   * Make the input read-only. An `inline` calendar still moves through the\n   * dates by key and by its header, but a click, Enter or Space picks\n   * nothing.\n   */\n  readOnly?: boolean;\n  /** Placeholder text for the input. */\n  placeholder?: string;\n  /**\n   * What the calendar shows and what a selection means: `'day'` shows the\n   * day grid, `'month'` a grid of the focused year's months whose header\n   * steps a year at a time, and `'year'` the year list. A month or year value\n   * is the first day of that period at local midnight, so `onChange` gets\n   * `new Date(2026, 5, 1)` for June 2026. A `value` elsewhere in the period\n   * shows as that period and stays as given until the user picks a period or\n   * types a different one. `min`, `max`,\n   * `shouldDisableDate` and `unselectableDates` judge whole periods: a month\n   * or year can be picked while any day in it can, so a `min` of 15 June\n   * still allows June, and June commits as 1 June, earlier than that `min`.\n   * The default `format` follows the granularity (`'YYYY-MM'`, `'YYYY'`); a\n   * custom `format` with finer tokens still renders them, but typing skips\n   * them. `firstDayOfWeek`, `dayNames` and `nearbyMonthDays` only affect the\n   * day grid, and an `inline` calendar's hidden form value is `YYYY-MM` or\n   * `YYYY`. The `labels` keys `chooseMonth` / `chooseYear` name the launcher\n   * and popover, and `prevYear` / `nextYear` the month grid's header buttons.\n   * @defaultValue 'day'\n   */\n  granularity?: DateGranularity;\n  /**\n   * Token format string or `Intl.DateTimeFormat` options. Defaults to\n   * `'YYYY-MM-DD'`, or to `'YYYY-MM'` / `'YYYY'` when `granularity` is\n   * `'month'` / `'year'`.\n   * @defaultValue 'YYYY-MM-DD'\n   */\n  format?: DateFormatOption;\n  /**\n   * Custom parser (use when `format` is `Intl.DateTimeFormatOptions`).\n   * Enter and leaving the field call it only if the user changed the text,\n   * so focus passing through commits nothing and the value keeps what the\n   * format leaves out, such as the time of day.\n   */\n  parse?: (s: string) => Date | null;\n  /**\n   * BCP-47 locale tag for day/month names and Intl formatting. Unset, it is\n   * the `locale` of a `LocaleProvider` around the picker, and with neither,\n   * `Intl` uses the runtime's own locale. On a server render that is the\n   * server's, so an `inline` calendar rendered there names its days in the\n   * server's language and the browser's own render names them in the\n   * browser's: give it a locale, here or through a `LocaleProvider`, where\n   * the two can differ.\n   */\n  locale?: string;\n  /**\n   * Render the calendar inline (no popover).\n   * On a server-rendered page it marks today once the page hydrates, by\n   * the browser's clock rather than the server's. With no `value` or\n   * `defaultValue` it opens on the month the clock reads, and around the end\n   * of a month the server's clock and the browser's can read different\n   * months, so give it a date both render the same.\n   */\n  inline?: boolean;\n  /**\n   * Use `<input type=\"date\">` on coarse-pointer + small-viewport devices. At\n   * `'month'` granularity it uses `<input type=\"month\">` where the browser\n   * implements one, as Chromium browsers, Safari on iOS and Firefox for\n   * Android do, and the calendar where it doesn't, as in desktop Firefox.\n   * Desktop Safari accepts the type but draws no month control, so forcing\n   * `true` there shows a plain text box. HTML has no year input, so `'year'`\n   * granularity always renders the calendar.\n   */\n  mobileNative?: boolean | 'auto';\n  /** Allow segmented keyboard typing in the input (type the date directly, auto-advancing across segments). `false` makes the field picker-only. */\n  editable?: boolean;\n  /** Whether the calendar popover exists. `false` makes the field input-only (segmented typing, no popover). */\n  popover?: boolean;\n  /**\n   * Open the popover when the input is focused. Focus that a closing popover\n   * hands back to the input leaves it closed. Dismissing it commits nothing:\n   * an empty field stays empty, and leaving afterwards commits only what was\n   * typed since. With it off, the launcher or Alt+ArrowDown opens it.\n   */\n  openOnFocus?: boolean;\n  /** Close the popover after a date is selected. */\n  closeOnSelect?: boolean;\n  /**\n   * Where the popover 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   * Render the popover through a portal, into the `portalContainer` a\n   * `ConfigProvider` sets, else the `Modal`, `Dialog` or `Command.Dialog` it's\n   * in, else `document.body`.\n   */\n  appendToBody?: boolean;\n  /**\n   * Bulma color modifier for the input, also carried by the calendar, where it\n   * colors the selected date. Today's date and the keyboard focus ring take\n   * the color's `-on-scheme` variant, which Bulma adjusts to contrast with the\n   * background, so pale colors stay readable. Unset, the calendar uses its\n   * `--bulma-dateinput-*` variables, which follow `primary` the same way by\n   * default.\n   */\n  color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n  /** Size variant. */\n  size?: 'small' | 'medium' | 'large';\n  /** Render the input with rounded corners. */\n  isRounded?: boolean;\n  /** Predicate to disable specific dates (e.g. weekends). Blocked dates are also rejected during manual typing. */\n  shouldDisableDate?: (d: Date) => boolean;\n  /** Convenience array of disabled dates; merged with `shouldDisableDate`. Matched by calendar day and also rejected during manual typing. */\n  unselectableDates?: Date[];\n  /**\n   * Day the week starts on (0 = Sunday). Unset inside a `LocaleProvider`,\n   * it is the first day of the week in the picker's locale, its own `locale`\n   * or else the provider's, such as Monday for `\"de\"`. Elsewhere, with no\n   * locale from either, or with seven `dayNames` of your own, it is Sunday:\n   * set it with `dayNames` to start the week on another day.\n   * @defaultValue 0\n   */\n  firstDayOfWeek?: DayOfWeek;\n  /**\n   * Override the 7 day-name labels (in calendar order, post-rotation). They\n   * are shown exactly as given, from the first column, so they have to start\n   * on the day the week does. With them, an unset `firstDayOfWeek` stays\n   * Sunday even inside a `LocaleProvider`, so names written Sunday first keep\n   * matching their columns; to start on the locale's day, set\n   * `firstDayOfWeek` too and list the names from that day. They also name\n   * the columns for assistive technology. Without them each column is named\n   * by its full weekday in the picker's locale, which a server-rendered\n   * calendar adds once the page hydrates.\n   */\n  dayNames?: string[];\n  /** Override the 12 month-name labels. */\n  monthNames?: string[];\n  /** Show dimmed dates from adjacent months in the grid. */\n  nearbyMonthDays?: boolean;\n  /** Decorative left icon glyph for the wrapping `Control` (shown by default). Set `''` to hide. */\n  iconLeftName?: string;\n  /**\n   * Show a clickable launcher button on the right that toggles the popover.\n   * Hidden by default while a `Control` it sits in shows its `isLoading`\n   * spinner, which shares that right edge.\n   * @defaultValue true\n   */\n  triggerIcon?: boolean;\n  /** Glyph for the right launcher button. */\n  triggerIconName?: string;\n  /** Optional translatable string overrides (ARIA labels, button text). */\n  labels?: PickerLabels;\n}\n\n/**\n * Raw DateInput — input + popover calendar without Field/Control wrapping.\n * Use `DateInput` for the convenience wrapper.\n *\n * @function\n * @param {DateInputBaseProps} props\n * @returns {JSX.Element}\n */\nexport const DateInputBase = forwardRef<HTMLInputElement, DateInputBaseProps>(\n  (props, ref) => {\n    const {\n      value: controlledValue,\n      defaultValue,\n      onChange,\n      onOpen,\n      onClose,\n      min,\n      max,\n      disabled: disabledProp,\n      readOnly,\n      placeholder,\n      granularity = 'day',\n      format,\n      parse,\n      locale: localeProp,\n      inline = false,\n      mobileNative = 'auto',\n      editable = true,\n      popover = true,\n      openOnFocus = true,\n      closeOnSelect = true,\n      position,\n      appendToBody = false,\n      color,\n      size,\n      isRounded,\n      shouldDisableDate,\n      unselectableDates,\n      firstDayOfWeek: firstDayOfWeekProp,\n      dayNames,\n      monthNames,\n      nearbyMonthDays = true,\n      className,\n      name,\n      form,\n      required,\n      id: idProp,\n      onFocus,\n      onClick,\n      onKeyDown,\n      onBlur,\n      iconLeftName: _iconLeftName,\n      triggerIcon: triggerIconProp,\n      triggerIconName = 'chevron-down',\n      labels,\n      ...rest\n    } = props;\n    // A LocaleProvider around the picker sets its default locale and, through\n    // that locale, the day its week starts on.\n    const locale = usePickerLocale(localeProp);\n    // Its own language and direction, which its root and a portaled panel\n    // carry inside a provider.\n    const localeScope = usePickerLocaleScope(localeProp, props.dir);\n    const firstDayOfWeek = usePickerFirstDayOfWeek(\n      firstDayOfWeekProp,\n      locale,\n      hasOwnDayNames(dayNames)\n    );\n    const disabled = useFieldsetDisabled(disabledProp);\n    // Inside a labeled Field the input takes the id the label points at\n    // when the caller set none, as InputBase does, and the popover's ids\n    // follow it. Inline there is no input to name, so nothing takes the\n    // Field's id or builds on it.\n    const id = useFieldLabelTarget(idProp, !inline);\n    // The launcher gives way to the loading spinner of a Control this sits in.\n    const controlLoading = useControlLoading();\n    const triggerIcon = triggerIconProp ?? !controlLoading;\n\n    const t = mergeLabels(labels);\n    const isDayGranularity = granularity === 'day';\n    const resolvedFormat = format ?? DEFAULT_FORMATS[granularity];\n\n    const isControlled = controlledValue !== undefined;\n    const [internalValue, setInternalValue] = useState<Date | null>(\n      defaultValue ?? null\n    );\n    const value = isControlled ? (controlledValue ?? null) : internalValue;\n\n    // Nothing before year 1 is in range, as in HTML's date inputs.\n    const lowerBound = useMemo(() => floorMin(min), [min]);\n\n    const initialFocused = useMemo(\n      () => clampDate(value ?? new Date(), lowerBound, max),\n      // intentionally only on mount: keep focusedDate stable until value/open change\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      []\n    );\n    const [focusedDate, setFocusedDate] = useState<Date>(initialFocused);\n    // Re-clamp focusedDate if min/max change after mount so the focused cell\n    // never disappears outside the displayable range.\n    useEffect(() => {\n      setFocusedDate(prev => clampDate(prev, lowerBound, max));\n    }, [lowerBound, max]);\n    const [open, setOpenState] = useState(false);\n    const [text, setText] = useState<string>(\n      value ? formatDate(value, resolvedFormat, locale) : ''\n    );\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const reactId = useId();\n    const popoverId = id ? `${id}-popover` : `picker-${reactId}`;\n\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      bulmaHelperClasses,\n      backgroundClasses,\n      textClasses,\n      otherClasses,\n      rest: cleanRest,\n    } = useFieldHelperClasses(rest);\n\n    const { shouldUseNative } = useNativeMobilePicker({\n      force: mobileNative === 'auto' ? undefined : mobileNative,\n    });\n    // The day picker goes native as it always has. A month picker does only\n    // where the browser implements the month input, asked after hydration so\n    // the server and the first client render agree. HTML has no year input,\n    // so a year picker always renders the calendar.\n    const hydrated = useIsHydrated();\n    const hasNativeInput =\n      isDayGranularity ||\n      (granularity === 'month' && hydrated && supportsInputType('month'));\n    const useNative = !inline && shouldUseNative && hasNativeInput;\n\n    const inputClass = usePrefixedClassNames('input', {\n      [`is-${color}`]: !!color,\n      [`is-${size}`]: !!size,\n      'is-rounded': isRounded,\n    });\n    const containerClass = usePrefixedClassNames('dateinput-container');\n    const triggerClass = usePrefixedClassNames('dateinput-trigger');\n\n    // What the latest request asked for, so a second request in the same\n    // event sees it before React renders. The callbacks fire here rather than\n    // in a state updater, which StrictMode calls twice, and after the state\n    // is set, so a request a callback makes is the one that lands last.\n    const requestedOpenRef = useRef(false);\n    const setOpen = useCallback(\n      (next: boolean) => {\n        if (requestedOpenRef.current === next) return;\n        requestedOpenRef.current = next;\n        setOpenState(next);\n        if (next) onOpen?.();\n        else onClose?.();\n      },\n      [onOpen, onClose]\n    );\n\n    // Sync displayed text with value when value changes externally.\n    useEffect(() => {\n      setText(value ? formatDate(value, resolvedFormat, locale) : '');\n    }, [value, resolvedFormat, locale]);\n\n    const commitValue = useCallback(\n      (next: Date | null) => {\n        // A month or year value is its period's first day, however the\n        // calendar, typing or parsing arrived at it.\n        const committed =\n          next && !isDayGranularity ? startOfPeriod(next, granularity) : next;\n        if (!isControlled) setInternalValue(committed);\n        // Keep the calendar's focused cell tracking typed / parsed values.\n        if (committed) setFocusedDate(committed);\n        onChange?.(committed);\n      },\n      [isControlled, onChange, isDayGranularity, granularity]\n    );\n\n    // At month or year granularity the bounds widen to the periods holding\n    // them, so the month or year containing `min` stays reachable.\n    const periodMin = useMemo(\n      () =>\n        isDayGranularity ? lowerBound : startOfPeriod(lowerBound, granularity),\n      [lowerBound, isDayGranularity, granularity]\n    );\n    const periodMax = useMemo(\n      () => (max && !isDayGranularity ? endOfPeriod(max, granularity) : max),\n      [max, isDayGranularity, granularity]\n    );\n\n    // A pick is the day at midnight, as a click on its cell gives. Enter hands\n    // over the focused date, which can carry a time of day from the clock, a\n    // value or a bound, so its time is dropped here.\n    const handleSelect = useCallback(\n      (picked: Date) => {\n        const d = startOfDay(picked);\n        if (!isWithin(d, periodMin, periodMax)) return;\n        commitValue(d);\n        setFocusedDate(d);\n        if (closeOnSelect) setOpen(false);\n      },\n      [periodMin, periodMax, commitValue, closeOnSelect, setOpen]\n    );\n\n    const tryParse = useCallback(\n      (s: string): Date | null => {\n        const trimmed = s.trim();\n        if (!trimmed) return null;\n        const fmt = typeof format === 'string' ? format : undefined;\n        return parse\n          ? parse(trimmed)\n          : parseDate(trimmed, fmt ?? DEFAULT_FORMATS[granularity], locale);\n      },\n      [parse, format, locale, granularity]\n    );\n\n    // The Date the user edits when starting without a current value (today at\n    // midnight, or the start of this month or year; the hook clamps to\n    // min/max on commit).\n    const makeBaseDate = useCallback((): Date => {\n      const d = new Date();\n      d.setHours(0, 0, 0, 0);\n      return isDayGranularity ? d : startOfPeriod(d, granularity);\n    }, [isDayGranularity, granularity]);\n\n    const inputReadOnlyAttr = !!readOnly || !editable;\n    const canOpen = !!popover && !disabled && !readOnly;\n\n    // Blocking predicate for manual entry, matching the calendar's\n    // disabled-cell logic (shouldDisableDate + unselectableDates by day, or\n    // every day of the month or year blocked at those granularities).\n    const isBlocked = useMemo(() => {\n      if (!isDayGranularity) {\n        const constraints = { min, max, shouldDisableDate, unselectableDates };\n        return (d: Date) => isPeriodUnselectable(d, granularity, constraints);\n      }\n      if (!shouldDisableDate && !unselectableDates?.length) return undefined;\n      return (d: Date) =>\n        !!shouldDisableDate?.(d) ||\n        !!unselectableDates?.some(u => isSameDay(u, d));\n    }, [\n      isDayGranularity,\n      granularity,\n      min,\n      max,\n      shouldDisableDate,\n      unselectableDates,\n    ]);\n\n    // Typing, and the re-parse on blur or Enter, that lands in the period the\n    // value already holds commits nothing, so a `value` elsewhere in its month\n    // or year changes only when the user picks or types a different period.\n    const commitTyped = useCallback(\n      (next: Date | null) => {\n        if (\n          next &&\n          value &&\n          !isDayGranularity &&\n          startOfPeriod(next, granularity).getTime() ===\n            startOfPeriod(value, granularity).getTime()\n        ) {\n          setText(formatDate(value, resolvedFormat, locale));\n          return;\n        }\n        commitValue(next);\n      },\n      [\n        value,\n        isDayGranularity,\n        granularity,\n        resolvedFormat,\n        locale,\n        commitValue,\n      ]\n    );\n\n    const { inputHandlers } = useSegmentedEntry({\n      format: resolvedFormat,\n      skipKinds: SKIPPED_SEGMENTS[granularity],\n      value,\n      commitValue: commitTyped,\n      formatFn: formatDate,\n      tryParse,\n      text,\n      setText,\n      makeBaseDate,\n      locale,\n      min: periodMin,\n      max: periodMax,\n      isBlocked,\n      disabled,\n      readOnly,\n      editable,\n      popover,\n      openOnFocus,\n      closeOnSelect,\n      isOpen: open,\n      setOpen,\n      inputRef,\n      containerRef,\n      onFocus,\n      onClick,\n      onKeyDown,\n      onBlur,\n    });\n\n    const handlePopoverClose = useCallback(() => setOpen(false), [setOpen]);\n\n    const combinedRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        (inputRef as React.MutableRefObject<HTMLInputElement | null>).current =\n          node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref)\n          (ref as React.MutableRefObject<HTMLInputElement | null>).current =\n            node;\n      },\n      [ref]\n    );\n\n    // Native mobile path renders <input type=\"date\"> (type=\"month\" for a\n    // month picker).\n    if (useNative) {\n      return (\n        <input\n          {...localeScope.rootAttrs}\n          {...cleanRest}\n          ref={combinedRef}\n          type={isDayGranularity ? 'date' : 'month'}\n          className={classNames(inputClass, bulmaHelperClasses, className)}\n          value={value ? toIsoValue(value, granularity) : ''}\n          onChange={e => {\n            const parsed = e.target.value\n              ? fromIsoValue(e.target.value, granularity)\n              : null;\n            commitValue(parsed);\n          }}\n          min={min ? toIsoValue(lowerBound, granularity) : undefined}\n          max={max ? toIsoValue(max, granularity) : undefined}\n          disabled={disabled}\n          readOnly={readOnly}\n          placeholder={placeholder}\n          name={name}\n          form={form}\n          required={required}\n          id={id}\n        />\n      );\n    }\n\n    const chooseLabel =\n      granularity === 'month'\n        ? t.chooseMonth\n        : granularity === 'year'\n          ? t.chooseYear\n          : t.chooseDate;\n\n    const calendar = (\n      <Calendar\n        // A new granularity starts the calendar over on its own view.\n        key={granularity}\n        granularity={granularity}\n        value={value}\n        focusedDate={focusedDate}\n        onSelect={handleSelect}\n        onFocusedDateChange={setFocusedDate}\n        min={min}\n        max={max}\n        shouldDisableDate={shouldDisableDate}\n        unselectableDates={unselectableDates}\n        firstDayOfWeek={firstDayOfWeek}\n        locale={locale}\n        dayNames={dayNames}\n        monthNames={monthNames}\n        nearbyMonthDays={nearbyMonthDays}\n        color={color}\n        size={size}\n        // The popover panel takes `popoverId`, so the calendar inside it\n        // takes one of its own. Inline there is no panel, and the calendar\n        // keeps the id it released with.\n        id={inline ? popoverId : `${popoverId}-cal`}\n        autoFocusCell={open}\n        labels={labels}\n        disabled={disabled}\n        readOnly={readOnly}\n      />\n    );\n\n    if (inline) {\n      return (\n        <div\n          {...localeScope.rootAttrs}\n          {...cleanRest}\n          ref={containerRef}\n          className={classNames(containerClass, bulmaHelperClasses, className)}\n        >\n          {calendar}\n          {name && (\n            <input\n              type=\"hidden\"\n              name={name}\n              form={form}\n              value={value ? toIsoValue(value, granularity) : ''}\n              required={required}\n            />\n          )}\n        </div>\n      );\n    }\n\n    return (\n      <div\n        ref={containerRef}\n        className={classNames(\n          containerClass,\n          otherClasses,\n          textClasses,\n          className\n        )}\n        {...localeScope.rootAttrs}\n        {...cleanRest}\n      >\n        <input\n          ref={combinedRef}\n          type=\"text\"\n          role=\"combobox\"\n          aria-haspopup=\"dialog\"\n          aria-expanded={open}\n          aria-controls={popoverId}\n          autoComplete=\"off\"\n          className={classNames(inputClass, textClasses, backgroundClasses)}\n          value={text}\n          placeholder={placeholder}\n          disabled={disabled}\n          readOnly={inputReadOnlyAttr}\n          name={name}\n          form={form}\n          required={required}\n          id={id}\n          {...inputHandlers}\n        />\n        {popover && triggerIcon && (\n          <button\n            type=\"button\"\n            className={triggerClass}\n            onClick={() => {\n              if (canOpen) setOpen(!open);\n            }}\n            disabled={!canOpen}\n            aria-label={chooseLabel}\n            aria-haspopup=\"dialog\"\n            aria-controls={popoverId}\n            aria-expanded={open}\n            tabIndex={canOpen ? 0 : -1}\n          >\n            <Icon name={triggerIconName} size={size} />\n          </button>\n        )}\n        {popover && (\n          <PickerPopover\n            localeScope={localeScope.panel}\n            isOpen={open}\n            onClose={handlePopoverClose}\n            anchorRef={containerRef}\n            position={position}\n            appendToBody={appendToBody}\n            ariaLabel={chooseLabel}\n            id={popoverId}\n            restoreFocusRef={inputRef}\n            initialFocusSelector={CALENDAR_FOCUSED_CELL}\n          >\n            {calendar}\n          </PickerPopover>\n        )}\n      </div>\n    );\n  }\n);\n\nDateInputBase.displayName = 'DateInputBase';\n\nexport default DateInputBase;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/form/DateRangeInputBase.js

@@ -3,7 +3,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { forwardRef, useState, useMemo, useEffect, useRef, useId, useCallback } from 'react';
 import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
-import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
+import { useFieldHelperClasses } from '../helpers/useFieldHelperClasses.js';
 import { mergeLabels } from './_pickerInternals/pickerTypes.js';
 import { formatDate, DEFAULT_DATE_FORMAT, parseDate, toIsoValue, fromIsoValue } from './_pickerInternals/formatters.js';
 import { floorMin, clampDate, isSameDay, canCloseRange, startOfDay, isWithin } from './_pickerInternals/dateUtils.js';
@@ -77,7 +77,11 @@ const DateRangeInputBase = forwardRef((props, ref) => {
     const endRef = useRef(null);
     const reactId = useId();
     const popoverId = id ? `${id}-popover` : `picker-${reactId}`;
-    const { bulmaHelperClasses, rest: cleanRest } = useBulmaClasses(rest);
+    // The field takes the background helpers, since Bulma's `.input` sets its
+    // own background. The text helpers stay on the root, which the popover and
+    // the separator take them from, and go on both inputs too, since an input
+    // takes no alignment or case from around it. The root keeps the rest.
+    const { bulmaHelperClasses, backgroundClasses, textClasses, otherClasses, rest: cleanRest, } = useFieldHelperClasses(rest);
     // Two inputs can't share a labeled Field's `for`, so inside one the group
     // points `aria-labelledby` at that Field's label, as `DateRangeInput`
     // does, in every mode. A name the caller gave the group wins, and so does
@@ -275,7 +279,7 @@ const DateRangeInputBase = forwardRef((props, ref) => {
         };
         const minIso = min ? isoDay(lowerBound) : undefined;
         const maxIso = max ? isoDay(max) : undefined;
-        return (jsxs("div", { "aria-labelledby": ariaLabelledBy, ...localeScope.rootAttrs, ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, bulmaHelperClasses, className), onFocus: onFocus, onFocusCapture: onFocusCapture, children: [jsxs("div", { className: fieldClass, children: [jsx("input", { ref: combinedRef, type: "date", id: id, "aria-label": t.rangeStart, className: inputClass, value: isoDay(start), onChange: nativeChange(commitStart, isBlockedDay), min: minIso, max: maxIso, disabled: disabled, readOnly: readOnly, required: required }), separator, jsx("input", { ref: endRef, type: "date", id: id ? `${id}-end` : undefined, "aria-label": t.rangeEnd, className: inputClass, value: isoDay(end), onChange: nativeChange(commitEnd, isBlockedEnd), min: start ? isoDay(start) : minIso, max: maxIso, disabled: disabled, readOnly: readOnly, required: required })] }), hiddenInputs] }));
+        return (jsxs("div", { "aria-labelledby": ariaLabelledBy, ...localeScope.rootAttrs, ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, otherClasses, textClasses, className), onFocus: onFocus, onFocusCapture: onFocusCapture, children: [jsxs("div", { className: classNames(fieldClass, backgroundClasses), children: [jsx("input", { ref: combinedRef, type: "date", id: id, "aria-label": t.rangeStart, className: classNames(inputClass, textClasses), value: isoDay(start), onChange: nativeChange(commitStart, isBlockedDay), min: minIso, max: maxIso, disabled: disabled, readOnly: readOnly, required: required }), separator, jsx("input", { ref: endRef, type: "date", id: id ? `${id}-end` : undefined, "aria-label": t.rangeEnd, className: classNames(inputClass, textClasses), value: isoDay(end), onChange: nativeChange(commitEnd, isBlockedEnd), min: start ? isoDay(start) : minIso, max: maxIso, disabled: disabled, readOnly: readOnly, required: required })] }), hiddenInputs] }));
     }
     const calendar = (jsx(Calendar, { range: range, onRangeSelect: handleRangeSelect, allowDisabledInRange: allowDisabledInRange, focusedDate: focusedDate, onFocusedDateChange: setFocusedDate, min: min, max: max, shouldDisableDate: shouldDisableDate, unselectableDates: unselectableDates, firstDayOfWeek: firstDayOfWeek, locale: locale, dayNames: dayNames, monthNames: monthNames, nearbyMonthDays: nearbyMonthDays, color: color, size: size, 
         // The popover panel takes `popoverId`, so the calendar inside it takes
@@ -311,13 +315,13 @@ const DateRangeInputBase = forwardRef((props, ref) => {
         'aria-expanded': open,
         'aria-controls': popoverId,
         autoComplete: 'off',
-        className: inputClass,
+        className: classNames(inputClass, textClasses),
         placeholder,
         disabled,
         readOnly: inputReadOnly,
         required,
     };
-    return (jsxs("div", { "aria-labelledby": ariaLabelledBy, ...localeScope.rootAttrs, ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, bulmaHelperClasses, className), onFocus: handleFocus, onFocusCapture: handleFocusCapture, children: [jsxs("div", { className: fieldClass, onMouseDown: handleFieldMouseDown, children: [jsx("input", { ...comboboxProps, ref: combinedRef, id: id, "aria-label": t.rangeStart, value: startText, ...startHandlers }), separator, jsx("input", { ...comboboxProps, ref: endRef, id: id ? `${id}-end` : undefined, "aria-label": t.rangeEnd, value: endText, ...endHandlers })] }), popover && triggerIcon && (jsx("button", { type: "button", className: triggerClass, 
+    return (jsxs("div", { "aria-labelledby": ariaLabelledBy, ...localeScope.rootAttrs, ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, otherClasses, textClasses, className), onFocus: handleFocus, onFocusCapture: handleFocusCapture, children: [jsxs("div", { className: classNames(fieldClass, backgroundClasses), onMouseDown: handleFieldMouseDown, children: [jsx("input", { ...comboboxProps, ref: combinedRef, id: id, "aria-label": t.rangeStart, value: startText, ...startHandlers }), separator, jsx("input", { ...comboboxProps, ref: endRef, id: id ? `${id}-end` : undefined, "aria-label": t.rangeEnd, value: endText, ...endHandlers })] }), popover && triggerIcon && (jsx("button", { type: "button", className: triggerClass, 
                 // Disabled whenever the popover can't open, so a click can.
                 onClick: () => setOpen(!open), disabled: !canOpen, "aria-label": t.chooseDateRange, "aria-haspopup": "dialog", "aria-controls": popoverId, "aria-expanded": open, tabIndex: canOpen ? 0 : -1, children: jsx(Icon, { name: triggerIconName, size: size }) })), popover && (jsx(PickerPopover, { localeScope: localeScope.panel, isOpen: open, onClose: handlePopoverClose, anchorRef: containerRef, position: position, appendToBody: appendToBody, ariaLabel: t.chooseDateRange, id: popoverId, restoreFocusRef: restoreFocusRef, initialFocusSelector: CALENDAR_FOCUSED_CELL, children: calendar })), hiddenInputs] }));
 });