@allxsmith/bestax-bulma 5.27.8 → 5.29.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (103) hide show
  1. package/dist/bestax.css +1 -1
  2. package/dist/bestax.css.map +1 -1
  3. package/dist/esm/components/Dialog.js +8 -4
  4. package/dist/esm/components/Dialog.js.map +1 -1
  5. package/dist/esm/components/HoverCard.js +127 -0
  6. package/dist/esm/components/HoverCard.js.map +1 -0
  7. package/dist/esm/components/Modal.js +19 -11
  8. package/dist/esm/components/Modal.js.map +1 -1
  9. package/dist/esm/components/Popover.js.map +1 -1
  10. package/dist/esm/components/Sidebar.js +12 -3
  11. package/dist/esm/components/Sidebar.js.map +1 -1
  12. package/dist/esm/components/Toast.js +5 -3
  13. package/dist/esm/components/Toast.js.map +1 -1
  14. package/dist/esm/elements/Notification.js +3 -1
  15. package/dist/esm/elements/Notification.js.map +1 -1
  16. package/dist/esm/form/DateInput.js.map +1 -1
  17. package/dist/esm/form/DateInputBase.js.map +1 -1
  18. package/dist/esm/form/DateRangeInputBase.js.map +1 -1
  19. package/dist/esm/form/DateTimeInput.js.map +1 -1
  20. package/dist/esm/form/DateTimeInputBase.js.map +1 -1
  21. package/dist/esm/form/Field.js.map +1 -1
  22. package/dist/esm/form/File.js.map +1 -1
  23. package/dist/esm/form/Input.js.map +1 -1
  24. package/dist/esm/form/Numberinput.js.map +1 -1
  25. package/dist/esm/form/Select.js.map +1 -1
  26. package/dist/esm/form/Slider.js.map +1 -1
  27. package/dist/esm/form/Taginput.js.map +1 -1
  28. package/dist/esm/form/TextArea.js.map +1 -1
  29. package/dist/esm/form/TimeInput.js.map +1 -1
  30. package/dist/esm/form/TimeInputBase.js.map +1 -1
  31. package/dist/esm/form/_pickerInternals/PickerPopover.js +3 -1
  32. package/dist/esm/form/_pickerInternals/PickerPopover.js.map +1 -1
  33. package/dist/esm/helpers/Config.js +5 -2
  34. package/dist/esm/helpers/Config.js.map +1 -1
  35. package/dist/esm/helpers/portal.js +30 -5
  36. package/dist/esm/helpers/portal.js.map +1 -1
  37. package/dist/esm/helpers/useFocusTrap.js +2 -1
  38. package/dist/esm/helpers/useFocusTrap.js.map +1 -1
  39. package/dist/esm/helpers/useHoverOpen.js +390 -0
  40. package/dist/esm/helpers/useHoverOpen.js.map +1 -0
  41. package/dist/extras.css +1 -1
  42. package/dist/extras.css.map +1 -1
  43. package/dist/index.cjs +574 -27
  44. package/dist/index.cjs.map +1 -1
  45. package/dist/index.esm.js +1 -0
  46. package/dist/index.esm.js.map +1 -1
  47. package/dist/types/components/HoverCard.d.ts +138 -0
  48. package/dist/types/components/Modal.d.ts +2 -1
  49. package/dist/types/components/Popover.d.ts +8 -7
  50. package/dist/types/form/DateInput.d.ts +1 -1
  51. package/dist/types/form/DateInputBase.d.ts +4 -1
  52. package/dist/types/form/DateRangeInputBase.d.ts +4 -1
  53. package/dist/types/form/DateTimeInput.d.ts +1 -1
  54. package/dist/types/form/DateTimeInputBase.d.ts +4 -1
  55. package/dist/types/form/Field.d.ts +1 -1
  56. package/dist/types/form/File.d.ts +1 -1
  57. package/dist/types/form/Input.d.ts +1 -1
  58. package/dist/types/form/Numberinput.d.ts +1 -1
  59. package/dist/types/form/Select.d.ts +1 -1
  60. package/dist/types/form/Slider.d.ts +1 -1
  61. package/dist/types/form/Taginput.d.ts +1 -1
  62. package/dist/types/form/TextArea.d.ts +1 -1
  63. package/dist/types/form/TimeInput.d.ts +1 -1
  64. package/dist/types/form/TimeInputBase.d.ts +2 -1
  65. package/dist/types/helpers/Config.d.ts +34 -3
  66. package/dist/types/helpers/portal.d.ts +27 -5
  67. package/dist/types/helpers/useFocusTrap.d.ts +9 -0
  68. package/dist/types/helpers/useHoverOpen.d.ts +98 -0
  69. package/dist/types/index.d.ts +1 -0
  70. package/dist/types-cjs/components/HoverCard.d.ts +138 -0
  71. package/dist/types-cjs/components/Modal.d.ts +2 -1
  72. package/dist/types-cjs/components/Popover.d.ts +8 -7
  73. package/dist/types-cjs/form/DateInput.d.ts +1 -1
  74. package/dist/types-cjs/form/DateInputBase.d.ts +4 -1
  75. package/dist/types-cjs/form/DateRangeInputBase.d.ts +4 -1
  76. package/dist/types-cjs/form/DateTimeInput.d.ts +1 -1
  77. package/dist/types-cjs/form/DateTimeInputBase.d.ts +4 -1
  78. package/dist/types-cjs/form/Field.d.ts +1 -1
  79. package/dist/types-cjs/form/File.d.ts +1 -1
  80. package/dist/types-cjs/form/Input.d.ts +1 -1
  81. package/dist/types-cjs/form/Numberinput.d.ts +1 -1
  82. package/dist/types-cjs/form/Select.d.ts +1 -1
  83. package/dist/types-cjs/form/Slider.d.ts +1 -1
  84. package/dist/types-cjs/form/Taginput.d.ts +1 -1
  85. package/dist/types-cjs/form/TextArea.d.ts +1 -1
  86. package/dist/types-cjs/form/TimeInput.d.ts +1 -1
  87. package/dist/types-cjs/form/TimeInputBase.d.ts +2 -1
  88. package/dist/types-cjs/helpers/Config.d.ts +34 -3
  89. package/dist/types-cjs/helpers/portal.d.ts +27 -5
  90. package/dist/types-cjs/helpers/useFocusTrap.d.ts +9 -0
  91. package/dist/types-cjs/helpers/useHoverOpen.d.ts +98 -0
  92. package/dist/types-cjs/index.d.ts +1 -0
  93. package/dist/versions/bestax-no-dark-mode.css +1 -1
  94. package/dist/versions/bestax-no-dark-mode.css.map +1 -1
  95. package/dist/versions/bestax-no-helpers-prefixed.css +1 -1
  96. package/dist/versions/bestax-no-helpers-prefixed.css.map +1 -1
  97. package/dist/versions/bestax-no-helpers.css +1 -1
  98. package/dist/versions/bestax-no-helpers.css.map +1 -1
  99. package/dist/versions/bestax-prefixed.css +1 -1
  100. package/dist/versions/bestax-prefixed.css.map +1 -1
  101. package/package.json +2 -2
  102. package/src/scss/components/_hovercard.scss +118 -0
  103. package/src/scss/components/_index.scss +1 -0
@@ -1 +1 @@
1
- {"version":3,"file":"Taginput.js","sources":["../../../src/form/Taginput.tsx"],"sourcesContent":["import React, {\n forwardRef,\n useState,\n useRef,\n useEffect,\n useCallback,\n} from 'react';\nimport {\n classNames,\n usePrefixedClassNames,\n prefixedClassNames,\n} from '../helpers/classNames';\nimport { useConfig, useIconLibrary } from '../helpers/Config';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { isEventInside } from '../helpers/shadowDom';\nimport {\n useInsideField,\n useInsideControl,\n rendersOwnField,\n} from './FormContext';\nimport { Field } from './Field';\nimport { FormFieldProps } from './fieldProps';\nimport { useAutoLabelId } from './useAutoLabelId';\nimport { Icon } from '../elements/Icon';\n\n/**\n * Represents a tag item object with a value and optional label.\n */\nexport interface TaginputItem {\n /** The tag value. */\n value: string;\n /** Display label (optional). */\n label?: string;\n [key: string]: unknown;\n}\n\n/** A tag can be either a TaginputItem object or a plain string. */\nexport type TaginputTag = TaginputItem | string;\n\ntype IconLibrary = 'fa' | 'mdi' | 'ion' | 'material-icons' | 'material-symbols';\n\n/**\n * Props for the Taginput component.\n * Inside an outer `Field`, or a `Control` with no `Field` around it, it\n * renders no `Field` of its own. 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 * @extraProp {string} [className] - Additional CSS classes.\n * @extraProp {React.Ref<HTMLInputElement>} [ref] - Ref forwarded to the input element.\n */\nexport interface TaginputProps\n extends\n Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'>,\n Omit<BulmaClassesProps, 'color'>,\n FormFieldProps {\n /** Field label. Automatically associated with the text input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Not wired when the tag limit is reached (the input is not rendered). Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`); it then replaces the `aria-label=\"Add tag\"` fallback too. */\n label?: React.ReactNode;\n /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */\n labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {\n [key: string]: unknown;\n };\n /** Applied to the inner text input (the labellable control), not the wrapper div. */\n id?: string;\n /** The current tags (controlled). */\n value?: TaginputTag[];\n /** Default tags (uncontrolled). */\n defaultValue?: TaginputTag[];\n /** Autocomplete suggestions. */\n data?: string[];\n /** Placeholder text when no tags. */\n placeholder?: string;\n /** Object property to use as display field. */\n field?: string;\n /** Allow creating new tags not in suggestions. */\n allowNew?: boolean;\n /** Allow duplicate tags. */\n allowDuplicates?: boolean;\n /** Open autocomplete dropdown on focus. */\n openOnFocus?: boolean;\n /** Remove tag on backspace. Default: true. */\n removeOnKeys?: boolean;\n /** Keys to confirm tag creation. Default: ['Enter', ',']. */\n confirmKeys?: string[];\n /** Show close button on tags. Default: true. */\n closable?: boolean;\n /** Attach tags visually. */\n attached?: boolean;\n /** Maximum number of tags allowed. */\n maxTags?: number;\n /** Maximum length of input. */\n maxlength?: number;\n /** Whether the input is disabled. */\n disabled?: boolean;\n /** Whether the input is read-only. */\n readonly?: boolean;\n /** Applies rounded corners to the tags. */\n rounded?: boolean;\n /** Truncates long tag text with ellipsis. */\n ellipsis?: boolean;\n /** Shows a counter of the number of tags. */\n hasCounter?: boolean;\n /** Characters that split pasted text into tags. */\n onPasteSeparators?: string[];\n /** Validation function called before adding a tag. */\n beforeAdding?: (tag: string) => boolean;\n /** Custom function for creating tag objects from input. */\n createTag?: (input: string) => TaginputTag;\n /** Keeps the first autocomplete suggestion highlighted. */\n keepFirst?: boolean;\n /** Keeps the autocomplete dropdown open after selection. */\n keepOpen?: boolean;\n /**\n * Shows a loading spinner in the input.\n * Under `prefers-reduced-motion: reduce` the spinner stops and stays\n * drawn (with bestax's CSS loaded).\n */\n loading?: boolean;\n /** ARIA label for tag close buttons. */\n ariaCloseLabel?: string;\n /** Icon name for the input field. */\n icon?: string;\n /** Icon library to use. */\n iconLibrary?: IconLibrary;\n /** Icon style variant (e.g., 'solid', 'outlined'). */\n iconVariant?: string;\n /** Additional icon modifiers. */\n iconFeatures?: string | string[];\n /** Input color variant. */\n color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n /** Tag color variant. */\n tagColor?:\n | 'primary'\n | 'link'\n | 'info'\n | 'success'\n | 'warning'\n | 'danger'\n | 'dark'\n | 'light';\n /** Size variant. */\n size?: 'small' | 'medium' | 'large';\n /** Form field name. When set, one hidden input per tag is rendered. */\n name?: string;\n /** Optional id of the form the hidden inputs belong to. */\n form?: string;\n /** Callback when tags change. */\n onChange?: (tags: TaginputTag[]) => void;\n /** Callback when tag is added. */\n onAdd?: (tag: TaginputTag) => void;\n /** Callback when tag is removed. */\n onRemove?: (tag: TaginputTag, index: number) => void;\n /** Callback when typing in input. */\n onTyping?: (value: string) => void;\n /** Custom render for tags. */\n tagTemplate?: (tag: TaginputTag) => React.ReactNode;\n}\n\n/**\n * The `Taginput` component provides a tag/chip input field for managing multiple tags.\n *\n * @function\n * @param {TaginputProps} props - Props for the Taginput component.\n * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the input element.\n * @returns {JSX.Element} The rendered taginput component.\n *\n * @example\n * // Basic usage\n * <Taginput\n * placeholder=\"Add a tag...\"\n * onChange={(tags) => console.log(tags)}\n * />\n *\n * @example\n * // With autocomplete\n * <Taginput\n * data={['React', 'Vue', 'Angular', 'Svelte']}\n * allowNew={false}\n * placeholder=\"Select frameworks...\"\n * />\n */\nexport const Taginput = forwardRef<HTMLInputElement, TaginputProps>(\n (\n {\n // Field props\n label,\n labelSize,\n labelProps,\n horizontal,\n message,\n messageColor,\n fieldClassName,\n value: controlledValue,\n defaultValue = [],\n data = [],\n placeholder,\n field = 'label',\n allowNew = true,\n allowDuplicates = false,\n openOnFocus = false,\n removeOnKeys = true,\n confirmKeys = ['Enter', ','],\n closable = true,\n attached = false,\n maxTags,\n maxlength,\n disabled = false,\n readonly = false,\n rounded = false,\n ellipsis = false,\n hasCounter = true,\n onPasteSeparators = [','],\n beforeAdding,\n createTag,\n keepFirst = false,\n keepOpen = true,\n loading = false,\n ariaCloseLabel,\n icon,\n iconLibrary: iconLibraryProp,\n iconVariant,\n iconFeatures,\n color,\n tagColor,\n size,\n onChange,\n onAdd,\n onRemove,\n onTyping,\n tagTemplate,\n name,\n form,\n id,\n className,\n ...props\n },\n ref\n ) => {\n const insideField = useInsideField();\n const insideControl = useInsideControl();\n const ownField = rendersOwnField('Taginput', {\n insideField,\n insideControl,\n label,\n message,\n horizontal,\n fieldClassName,\n });\n const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n const { classPrefix } = useConfig();\n const defaultIconLibrary = useIconLibrary();\n const resolvedLibrary = iconLibraryProp || defaultIconLibrary || 'fa';\n const pcn = (\n ...args: (\n | string\n | number\n | undefined\n | null\n | false\n | Record<string, unknown>\n | unknown[]\n )[]\n ) => prefixedClassNames(classPrefix, ...args);\n const containerRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n const dropdownRef = useRef<HTMLDivElement>(null);\n\n const [internalTags, setInternalTags] =\n useState<TaginputTag[]>(defaultValue);\n const [inputValue, setInputValue] = useState('');\n const [isActive, setIsActive] = useState(false);\n const [highlightedIndex, setHighlightedIndex] = useState(-1);\n\n // Use controlled or internal tags\n const tags = controlledValue !== undefined ? controlledValue : internalTags;\n\n const isMaxReached = maxTags !== undefined && tags.length >= maxTags;\n // At the tag limit the text input is not rendered, so there is nothing to\n // wire a label to, its own or a surrounding Field's.\n const { controlId, fieldLabelProps, labelled } = useAutoLabelId({\n label,\n id,\n labelProps,\n rendersLabel: ownField && !isMaxReached,\n hasInput: !isMaxReached,\n });\n\n // Get display value from tag\n const getDisplayValue = (tag: TaginputTag): string => {\n if (typeof tag === 'string') return tag;\n const fieldValue = tag[field];\n if (typeof fieldValue === 'string') return fieldValue;\n return tag.value || '';\n };\n\n // Filter autocomplete data\n const filteredData = data.filter(item => {\n const displayValue = item.toLowerCase();\n const matchesInput = displayValue.includes(inputValue.toLowerCase());\n const notAlreadyAdded =\n allowDuplicates ||\n !tags.some(tag => getDisplayValue(tag).toLowerCase() === displayValue);\n const hasInput = inputValue || (openOnFocus && isActive);\n return matchesInput && notAlreadyAdded && hasInput;\n });\n\n // keepFirst: auto-highlight first item when dropdown opens\n useEffect(() => {\n if (keepFirst && isActive && filteredData.length > 0) {\n setHighlightedIndex(0);\n }\n }, [keepFirst, isActive, filteredData.length]);\n\n // Update tags\n const updateTags = useCallback(\n (newTags: TaginputTag[]) => {\n if (controlledValue === undefined) {\n setInternalTags(newTags);\n }\n onChange?.(newTags);\n },\n [controlledValue, onChange]\n );\n\n // Add tag\n const addTag = useCallback(\n (value: string | TaginputTag) => {\n if (disabled || readonly) return;\n\n const tagValue = typeof value === 'string' ? value.trim() : value;\n const displayValue =\n typeof tagValue === 'string' ? tagValue : getDisplayValue(tagValue);\n\n if (!displayValue) return;\n\n // Check max tags\n if (maxTags && tags.length >= maxTags) return;\n\n // Check duplicates\n if (!allowDuplicates) {\n const exists = tags.some(\n tag =>\n getDisplayValue(tag).toLowerCase() === displayValue.toLowerCase()\n );\n if (exists) return;\n }\n\n // Check if allowed (must be in data if allowNew is false). Compare\n // case-insensitively, consistent with the dropdown filter and the\n // duplicate check above.\n if (\n !allowNew &&\n !data.some(d => d.toLowerCase() === displayValue.toLowerCase())\n )\n return;\n\n // beforeAdding validation\n if (beforeAdding && !beforeAdding(displayValue)) return;\n\n // createTag transformation\n const finalTag = createTag ? createTag(displayValue) : tagValue;\n\n const newTags = [...tags, finalTag];\n updateTags(newTags);\n onAdd?.(finalTag);\n setInputValue('');\n if (!keepOpen) {\n setIsActive(false);\n }\n setHighlightedIndex(-1);\n },\n [\n disabled,\n readonly,\n tags,\n maxTags,\n allowDuplicates,\n allowNew,\n data,\n field,\n updateTags,\n onAdd,\n beforeAdding,\n createTag,\n keepOpen,\n ]\n );\n\n // Remove tag\n const removeTag = useCallback(\n (index: number) => {\n /* istanbul ignore next: both triggers (delete button click, Backspace handler) are already gated on disabled/readonly */\n if (disabled || readonly) return;\n\n const removedTag = tags[index];\n const newTags = tags.filter((_, i) => i !== index);\n updateTags(newTags);\n onRemove?.(removedTag, index);\n },\n [disabled, readonly, tags, updateTags, onRemove]\n );\n\n // Handle input change\n const handleInputChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n\n // Check if a confirm key was typed\n const lastChar = newValue.slice(-1);\n if (confirmKeys.includes(lastChar) && lastChar !== 'Enter') {\n const valueWithoutKey = newValue.slice(0, -1).trim();\n if (valueWithoutKey) {\n addTag(valueWithoutKey);\n }\n return;\n }\n\n setInputValue(newValue);\n onTyping?.(newValue);\n\n if (newValue && data.length > 0) {\n setIsActive(true);\n }\n },\n [confirmKeys, addTag, onTyping, data.length]\n );\n\n // Handle paste\n const handlePaste = useCallback(\n (e: React.ClipboardEvent<HTMLInputElement>) => {\n if (onPasteSeparators.length === 0) return;\n\n const pastedText = e.clipboardData.getData('text');\n // Check if any separator exists in the pasted text\n const hasSeparator = onPasteSeparators.some(sep =>\n pastedText.includes(sep)\n );\n\n if (!hasSeparator) return;\n\n e.preventDefault();\n\n // Build a regex from all separators\n const escapedSeparators = onPasteSeparators.map(s =>\n s.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&')\n );\n const regex = new RegExp(`[${escapedSeparators.join('')}]`);\n\n const parts = pastedText\n .split(regex)\n .map(s => s.trim())\n .filter(Boolean);\n\n for (const part of parts) {\n addTag(part);\n }\n },\n [onPasteSeparators, addTag]\n );\n\n // Handle focus\n const handleFocus = useCallback(() => {\n if (openOnFocus && data.length > 0 && !disabled) {\n setIsActive(true);\n }\n }, [openOnFocus, data.length, disabled]);\n\n // Handle click outside\n useEffect(() => {\n if (!isActive) return undefined;\n\n const handleClickOutside = (e: MouseEvent) => {\n if (containerRef.current && !isEventInside(e, containerRef.current)) {\n setIsActive(false);\n setHighlightedIndex(-1);\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () =>\n document.removeEventListener('mousedown', handleClickOutside);\n }, [isActive]);\n\n // Handle keyboard\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (disabled || readonly) return;\n\n // Handle confirm keys\n if (confirmKeys.includes(e.key)) {\n e.preventDefault();\n if (highlightedIndex >= 0 && filteredData[highlightedIndex]) {\n addTag(filteredData[highlightedIndex]);\n } else if (inputValue.trim()) {\n addTag(inputValue);\n }\n return;\n }\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (!isActive && data.length > 0) {\n setIsActive(true);\n } else {\n setHighlightedIndex(prev =>\n prev < filteredData.length - 1 ? prev + 1 : prev\n );\n }\n break;\n case 'ArrowUp':\n e.preventDefault();\n setHighlightedIndex(prev => (prev > 0 ? prev - 1 : prev));\n break;\n case 'Backspace':\n if (removeOnKeys && !inputValue && tags.length > 0) {\n e.preventDefault();\n removeTag(tags.length - 1);\n }\n break;\n case 'Escape':\n setIsActive(false);\n setHighlightedIndex(-1);\n break;\n }\n },\n [\n disabled,\n readonly,\n confirmKeys,\n highlightedIndex,\n filteredData,\n addTag,\n inputValue,\n isActive,\n data.length,\n removeOnKeys,\n tags.length,\n removeTag,\n ]\n );\n\n // Combined ref\n const combinedRef = useCallback(\n (node: HTMLInputElement | null) => {\n (inputRef as React.MutableRefObject<HTMLInputElement | null>).current =\n node;\n if (typeof ref === 'function') {\n ref(node);\n } else if (ref) {\n (ref as React.MutableRefObject<HTMLInputElement | null>).current =\n node;\n }\n },\n [ref]\n );\n\n // Focus input when container is clicked\n const handleContainerClick = useCallback(() => {\n inputRef.current?.focus();\n }, []);\n\n // Generate classes\n const taginputClasses = pcn('taginput', {\n 'is-active': isActive,\n [`is-${size}`]: !!size,\n [`is-${color}`]: !!color,\n 'is-disabled': disabled,\n 'is-rounded': rounded,\n 'is-ellipsis': ellipsis,\n });\n\n const containerClasses = pcn('taginput-container', {\n 'is-attached': attached,\n 'has-icons-left': !!icon,\n });\n\n const inputClasses = pcn('input', {\n [`is-${size}`]: !!size,\n });\n\n const tagClasses = pcn('tag', {\n [`is-${tagColor}`]: !!tagColor,\n [`is-${size}`]: !!size,\n });\n\n const combinedClasses = classNames(\n taginputClasses,\n bulmaHelperClasses,\n className\n );\n\n // Counter text\n const showCounter =\n hasCounter && (maxTags !== undefined || maxlength !== undefined);\n const counterText =\n maxTags !== undefined\n ? `${tags.length} / ${maxTags}`\n : maxlength !== undefined\n ? `${inputValue.length} / ${maxlength}`\n : '';\n\n const counterClasses = pcn('help', 'counter');\n const tagsClasses = pcn('tags');\n const dropdownMenuClasses = pcn('dropdown-menu', 'is-active');\n const dropdownContentClasses = pcn('dropdown-content');\n const iconRightClass = pcn('icon', 'is-right');\n const loaderClass = pcn('loader', 'is-loading');\n\n const helpClass = usePrefixedClassNames('help', {\n [`is-${messageColor}`]: !!messageColor,\n });\n const messageEl = message ? <p className={helpClass}>{message}</p> : null;\n\n const taginputElement = (\n <div\n ref={containerRef}\n className={combinedClasses}\n onClick={handleContainerClick}\n {...rest}\n >\n <div className={containerClasses}>\n {icon && (\n <Icon\n name={icon}\n library={resolvedLibrary}\n variant={iconVariant}\n features={iconFeatures}\n containerClassName={pcn('icon', 'is-left')}\n />\n )}\n <div className={tagsClasses}>\n {tags.map((tag, index) => {\n const displayVal = getDisplayValue(tag);\n return (\n <span key={index} className={tagClasses}>\n {tagTemplate ? (\n tagTemplate(tag)\n ) : ellipsis ? (\n <span title={displayVal}>{displayVal}</span>\n ) : (\n displayVal\n )}\n {closable && !disabled && !readonly && (\n <button\n type=\"button\"\n className={pcn('delete', 'is-small')}\n onClick={e => {\n e.stopPropagation();\n removeTag(index);\n }}\n aria-label={ariaCloseLabel || `Remove ${displayVal}`}\n />\n )}\n </span>\n );\n })}\n {!isMaxReached && (\n <input\n ref={combinedRef}\n type=\"text\"\n className={inputClasses}\n id={controlId}\n value={inputValue}\n placeholder={tags.length === 0 ? placeholder : undefined}\n disabled={disabled}\n readOnly={readonly}\n maxLength={maxlength}\n onChange={handleInputChange}\n onFocus={handleFocus}\n onKeyDown={handleKeyDown}\n onPaste={handlePaste}\n // Fallback name, dropped only when a rendered label actually\n // targets this input, its own or a surrounding Field's\n // (aria-label would win otherwise). A label pointing elsewhere\n // keeps the fallback so the input is never nameless.\n aria-label={labelled ? undefined : 'Add tag'}\n />\n )}\n </div>\n {loading && (\n <span className={iconRightClass}>\n <span className={loaderClass} />\n </span>\n )}\n </div>\n\n {isActive && filteredData.length > 0 && (\n <div className={dropdownMenuClasses}>\n <div\n ref={dropdownRef}\n className={dropdownContentClasses}\n role=\"listbox\"\n >\n {filteredData.map((item, index) => (\n <a\n key={index}\n className={pcn('dropdown-item', {\n 'is-active': index === highlightedIndex,\n })}\n onClick={() => addTag(item)}\n onMouseEnter={() => setHighlightedIndex(index)}\n role=\"option\"\n aria-selected={index === highlightedIndex}\n >\n {item}\n </a>\n ))}\n </div>\n </div>\n )}\n\n {showCounter && <small className={counterClasses}>{counterText}</small>}\n\n {name &&\n tags.map((tag, i) => (\n <input\n key={`tag-input-${i}`}\n type=\"hidden\"\n name={name}\n value={getDisplayValue(tag)}\n form={form}\n />\n ))}\n </div>\n );\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 {taginputElement}\n {messageEl}\n </Field>\n );\n }\n\n return (\n <>\n {taginputElement}\n {messageEl}\n </>\n );\n }\n);\n\nTaginput.displayName = 'Taginput';\n\n/** @deprecated Use `Taginput` — same component. */\nexport const TagInput = Taginput;\n\n/** @deprecated Use `TaginputProps`. */\nexport type TagInputProps = TaginputProps;\n\nexport default Taginput;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
1
+ {"version":3,"file":"Taginput.js","sources":["../../../src/form/Taginput.tsx"],"sourcesContent":["import React, {\n forwardRef,\n useState,\n useRef,\n useEffect,\n useCallback,\n} from 'react';\nimport {\n classNames,\n usePrefixedClassNames,\n prefixedClassNames,\n} from '../helpers/classNames';\nimport { useConfig, useIconLibrary } from '../helpers/Config';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { isEventInside } from '../helpers/shadowDom';\nimport {\n useInsideField,\n useInsideControl,\n rendersOwnField,\n} from './FormContext';\nimport { Field } from './Field';\nimport { FormFieldProps } from './fieldProps';\nimport { useAutoLabelId } from './useAutoLabelId';\nimport { Icon } from '../elements/Icon';\n\n/**\n * Represents a tag item object with a value and optional label.\n */\nexport interface TaginputItem {\n /** The tag value. */\n value: string;\n /** Display label (optional). */\n label?: string;\n [key: string]: unknown;\n}\n\n/** A tag can be either a TaginputItem object or a plain string. */\nexport type TaginputTag = TaginputItem | string;\n\ntype IconLibrary = 'fa' | 'mdi' | 'ion' | 'material-icons' | 'material-symbols';\n\n/**\n * Props for the Taginput component.\n * Inside an outer `Field`, or a `Control` with no `Field` around it, it\n * renders no `Field` of its own. 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 * @extraProp {string} [className] - Additional CSS classes.\n * @extraProp {React.Ref<HTMLInputElement>} [ref] - Ref forwarded to the input element.\n */\nexport interface TaginputProps\n extends\n Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'>,\n Omit<BulmaClassesProps, 'color'>,\n FormFieldProps {\n /** Field label. Automatically associated with the text input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Not wired when the tag limit is reached (the input is not rendered). 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; it then replaces the `aria-label=\"Add tag\"` fallback too. */\n label?: React.ReactNode;\n /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */\n labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {\n [key: string]: unknown;\n };\n /** Applied to the inner text input (the labellable control), not the wrapper div. */\n id?: string;\n /** The current tags (controlled). */\n value?: TaginputTag[];\n /** Default tags (uncontrolled). */\n defaultValue?: TaginputTag[];\n /** Autocomplete suggestions. */\n data?: string[];\n /** Placeholder text when no tags. */\n placeholder?: string;\n /** Object property to use as display field. */\n field?: string;\n /** Allow creating new tags not in suggestions. */\n allowNew?: boolean;\n /** Allow duplicate tags. */\n allowDuplicates?: boolean;\n /** Open autocomplete dropdown on focus. */\n openOnFocus?: boolean;\n /** Remove tag on backspace. Default: true. */\n removeOnKeys?: boolean;\n /** Keys to confirm tag creation. Default: ['Enter', ',']. */\n confirmKeys?: string[];\n /** Show close button on tags. Default: true. */\n closable?: boolean;\n /** Attach tags visually. */\n attached?: boolean;\n /** Maximum number of tags allowed. */\n maxTags?: number;\n /** Maximum length of input. */\n maxlength?: number;\n /** Whether the input is disabled. */\n disabled?: boolean;\n /** Whether the input is read-only. */\n readonly?: boolean;\n /** Applies rounded corners to the tags. */\n rounded?: boolean;\n /** Truncates long tag text with ellipsis. */\n ellipsis?: boolean;\n /** Shows a counter of the number of tags. */\n hasCounter?: boolean;\n /** Characters that split pasted text into tags. */\n onPasteSeparators?: string[];\n /** Validation function called before adding a tag. */\n beforeAdding?: (tag: string) => boolean;\n /** Custom function for creating tag objects from input. */\n createTag?: (input: string) => TaginputTag;\n /** Keeps the first autocomplete suggestion highlighted. */\n keepFirst?: boolean;\n /** Keeps the autocomplete dropdown open after selection. */\n keepOpen?: boolean;\n /**\n * Shows a loading spinner in the input.\n * Under `prefers-reduced-motion: reduce` the spinner stops and stays\n * drawn (with bestax's CSS loaded).\n */\n loading?: boolean;\n /** ARIA label for tag close buttons. */\n ariaCloseLabel?: string;\n /** Icon name for the input field. */\n icon?: string;\n /** Icon library to use. */\n iconLibrary?: IconLibrary;\n /** Icon style variant (e.g., 'solid', 'outlined'). */\n iconVariant?: string;\n /** Additional icon modifiers. */\n iconFeatures?: string | string[];\n /** Input color variant. */\n color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n /** Tag color variant. */\n tagColor?:\n | 'primary'\n | 'link'\n | 'info'\n | 'success'\n | 'warning'\n | 'danger'\n | 'dark'\n | 'light';\n /** Size variant. */\n size?: 'small' | 'medium' | 'large';\n /** Form field name. When set, one hidden input per tag is rendered. */\n name?: string;\n /** Optional id of the form the hidden inputs belong to. */\n form?: string;\n /** Callback when tags change. */\n onChange?: (tags: TaginputTag[]) => void;\n /** Callback when tag is added. */\n onAdd?: (tag: TaginputTag) => void;\n /** Callback when tag is removed. */\n onRemove?: (tag: TaginputTag, index: number) => void;\n /** Callback when typing in input. */\n onTyping?: (value: string) => void;\n /** Custom render for tags. */\n tagTemplate?: (tag: TaginputTag) => React.ReactNode;\n}\n\n/**\n * The `Taginput` component provides a tag/chip input field for managing multiple tags.\n *\n * @function\n * @param {TaginputProps} props - Props for the Taginput component.\n * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the input element.\n * @returns {JSX.Element} The rendered taginput component.\n *\n * @example\n * // Basic usage\n * <Taginput\n * placeholder=\"Add a tag...\"\n * onChange={(tags) => console.log(tags)}\n * />\n *\n * @example\n * // With autocomplete\n * <Taginput\n * data={['React', 'Vue', 'Angular', 'Svelte']}\n * allowNew={false}\n * placeholder=\"Select frameworks...\"\n * />\n */\nexport const Taginput = forwardRef<HTMLInputElement, TaginputProps>(\n (\n {\n // Field props\n label,\n labelSize,\n labelProps,\n horizontal,\n message,\n messageColor,\n fieldClassName,\n value: controlledValue,\n defaultValue = [],\n data = [],\n placeholder,\n field = 'label',\n allowNew = true,\n allowDuplicates = false,\n openOnFocus = false,\n removeOnKeys = true,\n confirmKeys = ['Enter', ','],\n closable = true,\n attached = false,\n maxTags,\n maxlength,\n disabled = false,\n readonly = false,\n rounded = false,\n ellipsis = false,\n hasCounter = true,\n onPasteSeparators = [','],\n beforeAdding,\n createTag,\n keepFirst = false,\n keepOpen = true,\n loading = false,\n ariaCloseLabel,\n icon,\n iconLibrary: iconLibraryProp,\n iconVariant,\n iconFeatures,\n color,\n tagColor,\n size,\n onChange,\n onAdd,\n onRemove,\n onTyping,\n tagTemplate,\n name,\n form,\n id,\n className,\n ...props\n },\n ref\n ) => {\n const insideField = useInsideField();\n const insideControl = useInsideControl();\n const ownField = rendersOwnField('Taginput', {\n insideField,\n insideControl,\n label,\n message,\n horizontal,\n fieldClassName,\n });\n const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n const { classPrefix } = useConfig();\n const defaultIconLibrary = useIconLibrary();\n const resolvedLibrary = iconLibraryProp || defaultIconLibrary || 'fa';\n const pcn = (\n ...args: (\n | string\n | number\n | undefined\n | null\n | false\n | Record<string, unknown>\n | unknown[]\n )[]\n ) => prefixedClassNames(classPrefix, ...args);\n const containerRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n const dropdownRef = useRef<HTMLDivElement>(null);\n\n const [internalTags, setInternalTags] =\n useState<TaginputTag[]>(defaultValue);\n const [inputValue, setInputValue] = useState('');\n const [isActive, setIsActive] = useState(false);\n const [highlightedIndex, setHighlightedIndex] = useState(-1);\n\n // Use controlled or internal tags\n const tags = controlledValue !== undefined ? controlledValue : internalTags;\n\n const isMaxReached = maxTags !== undefined && tags.length >= maxTags;\n // At the tag limit the text input is not rendered, so there is nothing to\n // wire a label to, its own or a surrounding Field's.\n const { controlId, fieldLabelProps, labelled } = useAutoLabelId({\n label,\n id,\n labelProps,\n rendersLabel: ownField && !isMaxReached,\n hasInput: !isMaxReached,\n });\n\n // Get display value from tag\n const getDisplayValue = (tag: TaginputTag): string => {\n if (typeof tag === 'string') return tag;\n const fieldValue = tag[field];\n if (typeof fieldValue === 'string') return fieldValue;\n return tag.value || '';\n };\n\n // Filter autocomplete data\n const filteredData = data.filter(item => {\n const displayValue = item.toLowerCase();\n const matchesInput = displayValue.includes(inputValue.toLowerCase());\n const notAlreadyAdded =\n allowDuplicates ||\n !tags.some(tag => getDisplayValue(tag).toLowerCase() === displayValue);\n const hasInput = inputValue || (openOnFocus && isActive);\n return matchesInput && notAlreadyAdded && hasInput;\n });\n\n // keepFirst: auto-highlight first item when dropdown opens\n useEffect(() => {\n if (keepFirst && isActive && filteredData.length > 0) {\n setHighlightedIndex(0);\n }\n }, [keepFirst, isActive, filteredData.length]);\n\n // Update tags\n const updateTags = useCallback(\n (newTags: TaginputTag[]) => {\n if (controlledValue === undefined) {\n setInternalTags(newTags);\n }\n onChange?.(newTags);\n },\n [controlledValue, onChange]\n );\n\n // Add tag\n const addTag = useCallback(\n (value: string | TaginputTag) => {\n if (disabled || readonly) return;\n\n const tagValue = typeof value === 'string' ? value.trim() : value;\n const displayValue =\n typeof tagValue === 'string' ? tagValue : getDisplayValue(tagValue);\n\n if (!displayValue) return;\n\n // Check max tags\n if (maxTags && tags.length >= maxTags) return;\n\n // Check duplicates\n if (!allowDuplicates) {\n const exists = tags.some(\n tag =>\n getDisplayValue(tag).toLowerCase() === displayValue.toLowerCase()\n );\n if (exists) return;\n }\n\n // Check if allowed (must be in data if allowNew is false). Compare\n // case-insensitively, consistent with the dropdown filter and the\n // duplicate check above.\n if (\n !allowNew &&\n !data.some(d => d.toLowerCase() === displayValue.toLowerCase())\n )\n return;\n\n // beforeAdding validation\n if (beforeAdding && !beforeAdding(displayValue)) return;\n\n // createTag transformation\n const finalTag = createTag ? createTag(displayValue) : tagValue;\n\n const newTags = [...tags, finalTag];\n updateTags(newTags);\n onAdd?.(finalTag);\n setInputValue('');\n if (!keepOpen) {\n setIsActive(false);\n }\n setHighlightedIndex(-1);\n },\n [\n disabled,\n readonly,\n tags,\n maxTags,\n allowDuplicates,\n allowNew,\n data,\n field,\n updateTags,\n onAdd,\n beforeAdding,\n createTag,\n keepOpen,\n ]\n );\n\n // Remove tag\n const removeTag = useCallback(\n (index: number) => {\n /* istanbul ignore next: both triggers (delete button click, Backspace handler) are already gated on disabled/readonly */\n if (disabled || readonly) return;\n\n const removedTag = tags[index];\n const newTags = tags.filter((_, i) => i !== index);\n updateTags(newTags);\n onRemove?.(removedTag, index);\n },\n [disabled, readonly, tags, updateTags, onRemove]\n );\n\n // Handle input change\n const handleInputChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n\n // Check if a confirm key was typed\n const lastChar = newValue.slice(-1);\n if (confirmKeys.includes(lastChar) && lastChar !== 'Enter') {\n const valueWithoutKey = newValue.slice(0, -1).trim();\n if (valueWithoutKey) {\n addTag(valueWithoutKey);\n }\n return;\n }\n\n setInputValue(newValue);\n onTyping?.(newValue);\n\n if (newValue && data.length > 0) {\n setIsActive(true);\n }\n },\n [confirmKeys, addTag, onTyping, data.length]\n );\n\n // Handle paste\n const handlePaste = useCallback(\n (e: React.ClipboardEvent<HTMLInputElement>) => {\n if (onPasteSeparators.length === 0) return;\n\n const pastedText = e.clipboardData.getData('text');\n // Check if any separator exists in the pasted text\n const hasSeparator = onPasteSeparators.some(sep =>\n pastedText.includes(sep)\n );\n\n if (!hasSeparator) return;\n\n e.preventDefault();\n\n // Build a regex from all separators\n const escapedSeparators = onPasteSeparators.map(s =>\n s.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&')\n );\n const regex = new RegExp(`[${escapedSeparators.join('')}]`);\n\n const parts = pastedText\n .split(regex)\n .map(s => s.trim())\n .filter(Boolean);\n\n for (const part of parts) {\n addTag(part);\n }\n },\n [onPasteSeparators, addTag]\n );\n\n // Handle focus\n const handleFocus = useCallback(() => {\n if (openOnFocus && data.length > 0 && !disabled) {\n setIsActive(true);\n }\n }, [openOnFocus, data.length, disabled]);\n\n // Handle click outside\n useEffect(() => {\n if (!isActive) return undefined;\n\n const handleClickOutside = (e: MouseEvent) => {\n if (containerRef.current && !isEventInside(e, containerRef.current)) {\n setIsActive(false);\n setHighlightedIndex(-1);\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () =>\n document.removeEventListener('mousedown', handleClickOutside);\n }, [isActive]);\n\n // Handle keyboard\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (disabled || readonly) return;\n\n // Handle confirm keys\n if (confirmKeys.includes(e.key)) {\n e.preventDefault();\n if (highlightedIndex >= 0 && filteredData[highlightedIndex]) {\n addTag(filteredData[highlightedIndex]);\n } else if (inputValue.trim()) {\n addTag(inputValue);\n }\n return;\n }\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (!isActive && data.length > 0) {\n setIsActive(true);\n } else {\n setHighlightedIndex(prev =>\n prev < filteredData.length - 1 ? prev + 1 : prev\n );\n }\n break;\n case 'ArrowUp':\n e.preventDefault();\n setHighlightedIndex(prev => (prev > 0 ? prev - 1 : prev));\n break;\n case 'Backspace':\n if (removeOnKeys && !inputValue && tags.length > 0) {\n e.preventDefault();\n removeTag(tags.length - 1);\n }\n break;\n case 'Escape':\n setIsActive(false);\n setHighlightedIndex(-1);\n break;\n }\n },\n [\n disabled,\n readonly,\n confirmKeys,\n highlightedIndex,\n filteredData,\n addTag,\n inputValue,\n isActive,\n data.length,\n removeOnKeys,\n tags.length,\n removeTag,\n ]\n );\n\n // Combined ref\n const combinedRef = useCallback(\n (node: HTMLInputElement | null) => {\n (inputRef as React.MutableRefObject<HTMLInputElement | null>).current =\n node;\n if (typeof ref === 'function') {\n ref(node);\n } else if (ref) {\n (ref as React.MutableRefObject<HTMLInputElement | null>).current =\n node;\n }\n },\n [ref]\n );\n\n // Focus input when container is clicked\n const handleContainerClick = useCallback(() => {\n inputRef.current?.focus();\n }, []);\n\n // Generate classes\n const taginputClasses = pcn('taginput', {\n 'is-active': isActive,\n [`is-${size}`]: !!size,\n [`is-${color}`]: !!color,\n 'is-disabled': disabled,\n 'is-rounded': rounded,\n 'is-ellipsis': ellipsis,\n });\n\n const containerClasses = pcn('taginput-container', {\n 'is-attached': attached,\n 'has-icons-left': !!icon,\n });\n\n const inputClasses = pcn('input', {\n [`is-${size}`]: !!size,\n });\n\n const tagClasses = pcn('tag', {\n [`is-${tagColor}`]: !!tagColor,\n [`is-${size}`]: !!size,\n });\n\n const combinedClasses = classNames(\n taginputClasses,\n bulmaHelperClasses,\n className\n );\n\n // Counter text\n const showCounter =\n hasCounter && (maxTags !== undefined || maxlength !== undefined);\n const counterText =\n maxTags !== undefined\n ? `${tags.length} / ${maxTags}`\n : maxlength !== undefined\n ? `${inputValue.length} / ${maxlength}`\n : '';\n\n const counterClasses = pcn('help', 'counter');\n const tagsClasses = pcn('tags');\n const dropdownMenuClasses = pcn('dropdown-menu', 'is-active');\n const dropdownContentClasses = pcn('dropdown-content');\n const iconRightClass = pcn('icon', 'is-right');\n const loaderClass = pcn('loader', 'is-loading');\n\n const helpClass = usePrefixedClassNames('help', {\n [`is-${messageColor}`]: !!messageColor,\n });\n const messageEl = message ? <p className={helpClass}>{message}</p> : null;\n\n const taginputElement = (\n <div\n ref={containerRef}\n className={combinedClasses}\n onClick={handleContainerClick}\n {...rest}\n >\n <div className={containerClasses}>\n {icon && (\n <Icon\n name={icon}\n library={resolvedLibrary}\n variant={iconVariant}\n features={iconFeatures}\n containerClassName={pcn('icon', 'is-left')}\n />\n )}\n <div className={tagsClasses}>\n {tags.map((tag, index) => {\n const displayVal = getDisplayValue(tag);\n return (\n <span key={index} className={tagClasses}>\n {tagTemplate ? (\n tagTemplate(tag)\n ) : ellipsis ? (\n <span title={displayVal}>{displayVal}</span>\n ) : (\n displayVal\n )}\n {closable && !disabled && !readonly && (\n <button\n type=\"button\"\n className={pcn('delete', 'is-small')}\n onClick={e => {\n e.stopPropagation();\n removeTag(index);\n }}\n aria-label={ariaCloseLabel || `Remove ${displayVal}`}\n />\n )}\n </span>\n );\n })}\n {!isMaxReached && (\n <input\n ref={combinedRef}\n type=\"text\"\n className={inputClasses}\n id={controlId}\n value={inputValue}\n placeholder={tags.length === 0 ? placeholder : undefined}\n disabled={disabled}\n readOnly={readonly}\n maxLength={maxlength}\n onChange={handleInputChange}\n onFocus={handleFocus}\n onKeyDown={handleKeyDown}\n onPaste={handlePaste}\n // Fallback name, dropped only when a rendered label actually\n // targets this input, its own or a surrounding Field's\n // (aria-label would win otherwise). A label pointing elsewhere\n // keeps the fallback so the input is never nameless.\n aria-label={labelled ? undefined : 'Add tag'}\n />\n )}\n </div>\n {loading && (\n <span className={iconRightClass}>\n <span className={loaderClass} />\n </span>\n )}\n </div>\n\n {isActive && filteredData.length > 0 && (\n <div className={dropdownMenuClasses}>\n <div\n ref={dropdownRef}\n className={dropdownContentClasses}\n role=\"listbox\"\n >\n {filteredData.map((item, index) => (\n <a\n key={index}\n className={pcn('dropdown-item', {\n 'is-active': index === highlightedIndex,\n })}\n onClick={() => addTag(item)}\n onMouseEnter={() => setHighlightedIndex(index)}\n role=\"option\"\n aria-selected={index === highlightedIndex}\n >\n {item}\n </a>\n ))}\n </div>\n </div>\n )}\n\n {showCounter && <small className={counterClasses}>{counterText}</small>}\n\n {name &&\n tags.map((tag, i) => (\n <input\n key={`tag-input-${i}`}\n type=\"hidden\"\n name={name}\n value={getDisplayValue(tag)}\n form={form}\n />\n ))}\n </div>\n );\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 {taginputElement}\n {messageEl}\n </Field>\n );\n }\n\n return (\n <>\n {taginputElement}\n {messageEl}\n </>\n );\n }\n);\n\nTaginput.displayName = 'Taginput';\n\n/** @deprecated Use `Taginput` — same component. */\nexport const TagInput = Taginput;\n\n/** @deprecated Use `TaginputProps`. */\nexport type TagInputProps = TaginputProps;\n\nexport default Taginput;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"TextArea.js","sources":["../../../src/form/TextArea.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { usePrefixedClassNames } from '../helpers/classNames';\nimport { Field, FieldProps } from './Field';\nimport { Control, ControlBaseProps } from './Control';\nimport { TextAreaBase, TextAreaBaseProps } from './TextAreaBase';\nimport {\n useInsideField,\n useInsideControl,\n rendersOwnField,\n rendersOwnControl,\n} from './FormContext';\nimport { useAutoLabelId } from './useAutoLabelId';\n\n/**\n * Props for the TextArea component.\n *\n * Composes Field, Control, and TextAreaBase into a single convenience component.\n * Supports all TextAreaBase props, plus Field-level (label, horizontal) and\n * Control-level (loading) props.\n * Inside an existing `Control` it renders no `Control` of its own, so its\n * Control-level props do nothing there and warn in development; set them on\n * that `Control` instead. Inside an outer `Field`, or a `Control` with no\n * `Field` around it, it renders no `Field` of its own either.\n * The exception is `label`, `message`, `horizontal` or `fieldClassName` in that\n * bare `Control`: it keeps a `Field` for them, nested in the `.control`, and\n * warns in development. Wrap the `Control` in a `Field` instead, and set the\n * `label`, `horizontal` and class name on that `Field`.\n */\nexport interface TextAreaProps extends TextAreaBaseProps {\n /** Field label. Automatically associated with the textarea via `htmlFor` — uses 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`). */\n label?: React.ReactNode;\n /** Size for the label. */\n labelSize?: FieldProps['labelSize'];\n /** Props for the label element when the component renders its own `Field`; dropped inside an outer `Field` (use that `Field`'s `labelProps` instead). An explicit `htmlFor` key — even `undefined` — overrides the automatic association and no id is generated. */\n labelProps?: FieldProps['labelProps'];\n /** Horizontal field layout. */\n horizontal?: boolean;\n /**\n * Shows a loading spinner on the `Control` it renders.\n * Under `prefers-reduced-motion: reduce` the spinner stops and stays\n * drawn (with bestax's CSS loaded).\n */\n isLoading?: boolean;\n /** Control size. */\n controlSize?: ControlBaseProps['size'];\n /** Help/validation message below the textarea. */\n message?: React.ReactNode;\n /** Bulma color for the message. */\n messageColor?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n /** Additional CSS classes for the Field. */\n fieldClassName?: string;\n /** Additional CSS classes for the Control. */\n controlClassName?: string;\n}\n\n/**\n * The `TextArea` component provides a Bulma-styled multi-line text input, supporting color, size, hover/focus/loading states, fixed size, and all Bulma helper props.\n *\n * @function\n * @param {TextAreaProps} props - Props for TextArea.\n * @returns {JSX.Element} The composed field element.\n *\n * @example\n * <TextArea label=\"Bio\" placeholder=\"Tell us about yourself\" rows={4} />\n *\n * @example\n * <TextArea\n * label=\"Comments\"\n * message=\"Max 500 characters\"\n * messageColor=\"info\"\n * />\n */\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n (\n {\n // Field props\n label,\n labelSize,\n labelProps,\n horizontal,\n // Control props\n isLoading: controlIsLoading,\n controlSize,\n // Message props\n message,\n messageColor,\n // Container class overrides\n fieldClassName,\n controlClassName,\n // Everything else goes to TextAreaBase\n ...textAreaProps\n },\n ref\n ) => {\n const insideField = useInsideField();\n const insideControl = useInsideControl();\n const ownField = rendersOwnField('TextArea', {\n insideField,\n insideControl,\n label,\n message,\n horizontal,\n fieldClassName,\n });\n const ownControl = rendersOwnControl('TextArea', {\n insideControl,\n isLoading: controlIsLoading,\n controlSize,\n controlClassName,\n });\n const { controlId, fieldLabelProps } = useAutoLabelId({\n label,\n id: textAreaProps.id,\n labelProps,\n rendersLabel: ownField,\n });\n const helpClass = usePrefixedClassNames('help', {\n [`is-${messageColor}`]: !!messageColor,\n });\n\n let content = <TextAreaBase ref={ref} {...textAreaProps} id={controlId} />;\n\n if (ownControl) {\n content = (\n <Control\n isLoading={controlIsLoading}\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\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;;;;AAuDA;;;;;;;;;;;;;;;;AAgBG;AACI,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE;AACE;AACA,KAAK,EACL,SAAS,EACT,UAAU,EACV,UAAU;AACV;AACA,SAAS,EAAE,gBAAgB,EAC3B,WAAW;AACX;AACA,OAAO,EACP,YAAY;AACZ;AACA,cAAc,EACd,gBAAgB;AAChB;AACA,GAAG,aAAa,EACjB,EACD,GAAG,KACD;AACF,IAAA,MAAM,WAAW,GAAG,cAAc,EAAE;AACpC,IAAA,MAAM,aAAa,GAAG,gBAAgB,EAAE;AACxC,IAAA,MAAM,QAAQ,GAAG,eAAe,CAAC,UAAU,EAAE;QAC3C,WAAW;QACX,aAAa;QACb,KAAK;QACL,OAAO;QACP,UAAU;QACV,cAAc;AACf,KAAA,CAAC;AACF,IAAA,MAAM,UAAU,GAAG,iBAAiB,CAAC,UAAU,EAAE;QAC/C,aAAa;AACb,QAAA,SAAS,EAAE,gBAAgB;QAC3B,WAAW;QACX,gBAAgB;AACjB,KAAA,CAAC;AACF,IAAA,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,GAAG,cAAc,CAAC;QACpD,KAAK;QACL,EAAE,EAAE,aAAa,CAAC,EAAE;QACpB,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;AAEF,IAAA,IAAI,OAAO,GAAGA,GAAA,CAAC,YAAY,IAAC,GAAG,EAAE,GAAG,EAAA,GAAM,aAAa,EAAE,EAAE,EAAE,SAAS,GAAI;IAE1E,IAAI,UAAU,EAAE;QACd,OAAO,IACLA,GAAA,CAAC,OAAO,IACN,SAAS,EAAE,gBAAgB,EAC3B,IAAI,EAAE,WAAW,EACjB,SAAS,EAAE,gBAAgB,YAE1B,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,QAAQ,CAAC,WAAW,GAAG,UAAU;;"}
1
+ {"version":3,"file":"TextArea.js","sources":["../../../src/form/TextArea.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { usePrefixedClassNames } from '../helpers/classNames';\nimport { Field, FieldProps } from './Field';\nimport { Control, ControlBaseProps } from './Control';\nimport { TextAreaBase, TextAreaBaseProps } from './TextAreaBase';\nimport {\n useInsideField,\n useInsideControl,\n rendersOwnField,\n rendersOwnControl,\n} from './FormContext';\nimport { useAutoLabelId } from './useAutoLabelId';\n\n/**\n * Props for the TextArea component.\n *\n * Composes Field, Control, and TextAreaBase into a single convenience component.\n * Supports all TextAreaBase props, plus Field-level (label, horizontal) and\n * Control-level (loading) props.\n * Inside an existing `Control` it renders no `Control` of its own, so its\n * Control-level props do nothing there and warn in development; set them on\n * that `Control` instead. Inside an outer `Field`, or a `Control` with no\n * `Field` around it, it renders no `Field` of its own either.\n * The exception is `label`, `message`, `horizontal` or `fieldClassName` in that\n * bare `Control`: it keeps a `Field` for them, nested in the `.control`, and\n * warns in development. Wrap the `Control` in a `Field` instead, and set the\n * `label`, `horizontal` and class name on that `Field`.\n */\nexport interface TextAreaProps extends TextAreaBaseProps {\n /** Field label. Automatically associated with the textarea via `htmlFor` — uses 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 when the component renders its own `Field`; dropped inside an outer `Field` (use that `Field`'s `labelProps` instead). An explicit `htmlFor` key — even `undefined` — overrides the automatic association and no id is generated. */\n labelProps?: FieldProps['labelProps'];\n /** Horizontal field layout. */\n horizontal?: boolean;\n /**\n * Shows a loading spinner on the `Control` it renders.\n * Under `prefers-reduced-motion: reduce` the spinner stops and stays\n * drawn (with bestax's CSS loaded).\n */\n isLoading?: boolean;\n /** Control size. */\n controlSize?: ControlBaseProps['size'];\n /** Help/validation message below the textarea. */\n message?: React.ReactNode;\n /** Bulma color for the message. */\n messageColor?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n /** Additional CSS classes for the Field. */\n fieldClassName?: string;\n /** Additional CSS classes for the Control. */\n controlClassName?: string;\n}\n\n/**\n * The `TextArea` component provides a Bulma-styled multi-line text input, supporting color, size, hover/focus/loading states, fixed size, and all Bulma helper props.\n *\n * @function\n * @param {TextAreaProps} props - Props for TextArea.\n * @returns {JSX.Element} The composed field element.\n *\n * @example\n * <TextArea label=\"Bio\" placeholder=\"Tell us about yourself\" rows={4} />\n *\n * @example\n * <TextArea\n * label=\"Comments\"\n * message=\"Max 500 characters\"\n * messageColor=\"info\"\n * />\n */\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n (\n {\n // Field props\n label,\n labelSize,\n labelProps,\n horizontal,\n // Control props\n isLoading: controlIsLoading,\n controlSize,\n // Message props\n message,\n messageColor,\n // Container class overrides\n fieldClassName,\n controlClassName,\n // Everything else goes to TextAreaBase\n ...textAreaProps\n },\n ref\n ) => {\n const insideField = useInsideField();\n const insideControl = useInsideControl();\n const ownField = rendersOwnField('TextArea', {\n insideField,\n insideControl,\n label,\n message,\n horizontal,\n fieldClassName,\n });\n const ownControl = rendersOwnControl('TextArea', {\n insideControl,\n isLoading: controlIsLoading,\n controlSize,\n controlClassName,\n });\n const { controlId, fieldLabelProps } = useAutoLabelId({\n label,\n id: textAreaProps.id,\n labelProps,\n rendersLabel: ownField,\n });\n const helpClass = usePrefixedClassNames('help', {\n [`is-${messageColor}`]: !!messageColor,\n });\n\n let content = <TextAreaBase ref={ref} {...textAreaProps} id={controlId} />;\n\n if (ownControl) {\n content = (\n <Control\n isLoading={controlIsLoading}\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\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;;;;AAuDA;;;;;;;;;;;;;;;;AAgBG;AACI,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE;AACE;AACA,KAAK,EACL,SAAS,EACT,UAAU,EACV,UAAU;AACV;AACA,SAAS,EAAE,gBAAgB,EAC3B,WAAW;AACX;AACA,OAAO,EACP,YAAY;AACZ;AACA,cAAc,EACd,gBAAgB;AAChB;AACA,GAAG,aAAa,EACjB,EACD,GAAG,KACD;AACF,IAAA,MAAM,WAAW,GAAG,cAAc,EAAE;AACpC,IAAA,MAAM,aAAa,GAAG,gBAAgB,EAAE;AACxC,IAAA,MAAM,QAAQ,GAAG,eAAe,CAAC,UAAU,EAAE;QAC3C,WAAW;QACX,aAAa;QACb,KAAK;QACL,OAAO;QACP,UAAU;QACV,cAAc;AACf,KAAA,CAAC;AACF,IAAA,MAAM,UAAU,GAAG,iBAAiB,CAAC,UAAU,EAAE;QAC/C,aAAa;AACb,QAAA,SAAS,EAAE,gBAAgB;QAC3B,WAAW;QACX,gBAAgB;AACjB,KAAA,CAAC;AACF,IAAA,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,GAAG,cAAc,CAAC;QACpD,KAAK;QACL,EAAE,EAAE,aAAa,CAAC,EAAE;QACpB,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;AAEF,IAAA,IAAI,OAAO,GAAGA,GAAA,CAAC,YAAY,IAAC,GAAG,EAAE,GAAG,EAAA,GAAM,aAAa,EAAE,EAAE,EAAE,SAAS,GAAI;IAE1E,IAAI,UAAU,EAAE;QACd,OAAO,IACLA,GAAA,CAAC,OAAO,IACN,SAAS,EAAE,gBAAgB,EAC3B,IAAI,EAAE,WAAW,EACjB,SAAS,EAAE,gBAAgB,YAE1B,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,QAAQ,CAAC,WAAW,GAAG,UAAU;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"TimeInput.js","sources":["../../../src/form/TimeInput.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { usePrefixedClassNames } from '../helpers/classNames';\nimport { Field, FieldProps } from './Field';\nimport { Control, ControlBaseProps } from './Control';\nimport { TimeInputBase, TimeInputBaseProps } from './TimeInputBase';\nimport {\n useInsideField,\n useInsideControl,\n rendersOwnField,\n rendersOwnControl,\n} from './FormContext';\nimport { useAutoLabelId } from './useAutoLabelId';\n\n/**\n * Props for the TimeInput convenience wrapper. Extends `TimeInputBaseProps`\n * with Field-level (label, horizontal) and Control-level (icons, loading) props.\n * Inside an existing `Control` it renders no `Control` of its own, so its\n * Control-level props do nothing there and warn in development; set them on\n * that `Control` instead. In `inline` mode it renders no `Control` anywhere,\n * so they do nothing inside a `Control` or out, and warn in development\n * there too. Inside an outer `Field`, or a `Control` with no `Field` around\n * it, it renders no `Field` of its own either.\n * The exception is `label`, `message`, `horizontal` or `fieldClassName` in that\n * bare `Control`: it keeps a `Field` for them, nested in the `.control`, and\n * warns in development. Wrap the `Control` in a `Field` instead, and set the\n * `label`, `horizontal` and class name on that `Field`.\n * @extraProp {string} [name] - Form field name.\n * @extraProp {string} [form] - Form id the input belongs to.\n * @extraProp {boolean} [required=false] - Marks the input as required.\n * @extraProp {string} [className] - Additional CSS classes for the input.\n * @extraProp {React.Ref<HTMLInputElement>} [ref] - Forwarded to the underlying `<input>`.\n */\nexport interface TimeInputProps extends TimeInputBaseProps {\n /** Field label. Automatically associated with the input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Not wired in `inline` mode (no visible input to label). Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`). */\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 * Icon props for the left icon.\n * Bulma gives control icons `pointer-events: none`, so a clickable node here\n * never receives a click. Put a button beside the input in its own addon `Control` instead.\n */\n iconLeft?: ControlBaseProps['iconLeft'];\n /**\n * Icon props for the right icon.\n * Bulma gives control icons `pointer-events: none`, so a clickable node here\n * never receives a click. Put a button beside the input in its own addon `Control` instead.\n */\n iconRight?: ControlBaseProps['iconRight'];\n /** Shortcut for the right icon name. */\n iconRightName?: string;\n /** Shortcut for left icon size. */\n iconLeftSize?: ControlBaseProps['iconLeftSize'];\n /** Shortcut for right icon size. */\n iconRightSize?: ControlBaseProps['iconRightSize'];\n /** Force the left icon container. */\n hasIconsLeft?: boolean;\n /** Force the right icon container. */\n hasIconsRight?: 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 * Under `prefers-reduced-motion: reduce` the spinner stops and stays\n * drawn (with bestax's CSS loaded).\n */\n isLoading?: boolean;\n /**\n * Show a clickable launcher button on the right that toggles the popover.\n * Hidden by default while a spinner shows at the same right edge: this\n * component's `isLoading` when it renders its own `Control`, or the\n * enclosing `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 input. */\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 `TimeInput` component is a form input that opens a popover spinner for time-of-day selection.\n *\n * @function\n * @param {TimeInputProps} props\n * @returns {JSX.Element}\n *\n * @example\n * <TimeInput label=\"Departure\" defaultValue={new Date()} />\n *\n * @example\n * <TimeInput label=\"Slot\" hourFormat=\"12\" incrementMinutes={15} />\n */\nexport const TimeInput = forwardRef<HTMLInputElement, TimeInputProps>(\n (props, ref) => {\n const {\n label,\n labelSize,\n labelProps,\n horizontal,\n iconLeft,\n iconRight,\n iconLeftName = 'clock',\n iconRightName,\n iconLeftSize,\n iconRightSize,\n hasIconsLeft,\n hasIconsRight,\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('TimeInput', {\n insideField,\n insideControl,\n label,\n message,\n horizontal,\n fieldClassName,\n });\n // Inline mode renders a bare panel with no input, so the Control's\n // icon-left container has nothing to anchor to, and it renders no\n // Control inside one or out. The left icon is checked as the caller\n // passed it: the default glyph is this component's own choice, not a\n // prop the caller set, so it goes in only for the advice.\n const ownControl = rendersOwnControl('TimeInput', {\n insideControl,\n inline: baseProps.inline,\n isLoading,\n iconLeft,\n iconLeftName: props.iconLeftName,\n defaultIconLeftName: iconLeftName,\n iconLeftSize,\n iconRight,\n iconRightName,\n iconRightSize,\n hasIconsLeft,\n hasIconsRight,\n isExpanded,\n controlSize,\n controlClassName,\n });\n const { controlId, fieldLabelProps } = useAutoLabelId({\n label,\n id: baseProps.id,\n labelProps,\n // Inline mode renders a bare panel with no input to label.\n rendersLabel: ownField && !baseProps.inline,\n hasInput: !baseProps.inline,\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 <TimeInputBase ref={ref} {...baseProps} id={controlId} />\n );\n\n if (ownControl) {\n content = (\n <Control\n iconLeft={iconLeft}\n iconRight={iconRight}\n iconLeftName={iconLeftName}\n iconRightName={iconRightName}\n iconLeftSize={iconLeftSize}\n iconRightSize={iconRightSize}\n hasIconsLeft={hasIconsLeft || !!iconLeftName}\n hasIconsRight={hasIconsRight}\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\nTimeInput.displayName = 'TimeInput';\n\nexport default TimeInput;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
1
+ {"version":3,"file":"TimeInput.js","sources":["../../../src/form/TimeInput.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { usePrefixedClassNames } from '../helpers/classNames';\nimport { Field, FieldProps } from './Field';\nimport { Control, ControlBaseProps } from './Control';\nimport { TimeInputBase, TimeInputBaseProps } from './TimeInputBase';\nimport {\n useInsideField,\n useInsideControl,\n rendersOwnField,\n rendersOwnControl,\n} from './FormContext';\nimport { useAutoLabelId } from './useAutoLabelId';\n\n/**\n * Props for the TimeInput convenience wrapper. Extends `TimeInputBaseProps`\n * with Field-level (label, horizontal) and Control-level (icons, loading) props.\n * Inside an existing `Control` it renders no `Control` of its own, so its\n * Control-level props do nothing there and warn in development; set them on\n * that `Control` instead. In `inline` mode it renders no `Control` anywhere,\n * so they do nothing inside a `Control` or out, and warn in development\n * there too. Inside an outer `Field`, or a `Control` with no `Field` around\n * it, it renders no `Field` of its own either.\n * The exception is `label`, `message`, `horizontal` or `fieldClassName` in that\n * bare `Control`: it keeps a `Field` for them, nested in the `.control`, and\n * warns in development. Wrap the `Control` in a `Field` instead, and set the\n * `label`, `horizontal` and class name on that `Field`.\n * @extraProp {string} [name] - Form field name.\n * @extraProp {string} [form] - Form id the input belongs to.\n * @extraProp {boolean} [required=false] - Marks the input as required.\n * @extraProp {string} [className] - Additional CSS classes for the input.\n * @extraProp {React.Ref<HTMLInputElement>} [ref] - Forwarded to the underlying `<input>`.\n */\nexport interface TimeInputProps extends TimeInputBaseProps {\n /** Field label. Automatically associated with the input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Not wired in `inline` mode (no visible input to label). 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 * Icon props for the left icon.\n * Bulma gives control icons `pointer-events: none`, so a clickable node here\n * never receives a click. Put a button beside the input in its own addon `Control` instead.\n */\n iconLeft?: ControlBaseProps['iconLeft'];\n /**\n * Icon props for the right icon.\n * Bulma gives control icons `pointer-events: none`, so a clickable node here\n * never receives a click. Put a button beside the input in its own addon `Control` instead.\n */\n iconRight?: ControlBaseProps['iconRight'];\n /** Shortcut for the right icon name. */\n iconRightName?: string;\n /** Shortcut for left icon size. */\n iconLeftSize?: ControlBaseProps['iconLeftSize'];\n /** Shortcut for right icon size. */\n iconRightSize?: ControlBaseProps['iconRightSize'];\n /** Force the left icon container. */\n hasIconsLeft?: boolean;\n /** Force the right icon container. */\n hasIconsRight?: 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 * Under `prefers-reduced-motion: reduce` the spinner stops and stays\n * drawn (with bestax's CSS loaded).\n */\n isLoading?: boolean;\n /**\n * Show a clickable launcher button on the right that toggles the popover.\n * Hidden by default while a spinner shows at the same right edge: this\n * component's `isLoading` when it renders its own `Control`, or the\n * enclosing `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 input. */\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 `TimeInput` component is a form input that opens a popover spinner for time-of-day selection.\n *\n * @function\n * @param {TimeInputProps} props\n * @returns {JSX.Element}\n *\n * @example\n * <TimeInput label=\"Departure\" defaultValue={new Date()} />\n *\n * @example\n * <TimeInput label=\"Slot\" hourFormat=\"12\" incrementMinutes={15} />\n */\nexport const TimeInput = forwardRef<HTMLInputElement, TimeInputProps>(\n (props, ref) => {\n const {\n label,\n labelSize,\n labelProps,\n horizontal,\n iconLeft,\n iconRight,\n iconLeftName = 'clock',\n iconRightName,\n iconLeftSize,\n iconRightSize,\n hasIconsLeft,\n hasIconsRight,\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('TimeInput', {\n insideField,\n insideControl,\n label,\n message,\n horizontal,\n fieldClassName,\n });\n // Inline mode renders a bare panel with no input, so the Control's\n // icon-left container has nothing to anchor to, and it renders no\n // Control inside one or out. The left icon is checked as the caller\n // passed it: the default glyph is this component's own choice, not a\n // prop the caller set, so it goes in only for the advice.\n const ownControl = rendersOwnControl('TimeInput', {\n insideControl,\n inline: baseProps.inline,\n isLoading,\n iconLeft,\n iconLeftName: props.iconLeftName,\n defaultIconLeftName: iconLeftName,\n iconLeftSize,\n iconRight,\n iconRightName,\n iconRightSize,\n hasIconsLeft,\n hasIconsRight,\n isExpanded,\n controlSize,\n controlClassName,\n });\n const { controlId, fieldLabelProps } = useAutoLabelId({\n label,\n id: baseProps.id,\n labelProps,\n // Inline mode renders a bare panel with no input to label.\n rendersLabel: ownField && !baseProps.inline,\n hasInput: !baseProps.inline,\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 <TimeInputBase ref={ref} {...baseProps} id={controlId} />\n );\n\n if (ownControl) {\n content = (\n <Control\n iconLeft={iconLeft}\n iconRight={iconRight}\n iconLeftName={iconLeftName}\n iconRightName={iconRightName}\n iconLeftSize={iconLeftSize}\n iconRightSize={iconRightSize}\n hasIconsLeft={hasIconsLeft || !!iconLeftName}\n hasIconsRight={hasIconsRight}\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\nTimeInput.displayName = 'TimeInput';\n\nexport default TimeInput;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"TimeInputBase.js","sources":["../../../src/form/TimeInputBase.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 HourFormat,\n PickerLabels,\n mergeLabels,\n} from './_pickerInternals/pickerTypes';\nimport {\n formatTime,\n hourCycleFromFormat,\n parseTime,\n DateFormatOption,\n DEFAULT_TIME_FORMAT_24,\n DEFAULT_TIME_FORMAT_12,\n} from './_pickerInternals/formatters';\nimport {\n setTimeOfDay,\n floorMin,\n isWithin,\n snapTimeToIncrement,\n} from './_pickerInternals/dateUtils';\nimport { TimeWheels } from './_pickerInternals/TimeWheels';\nimport { PickerPopover } from './_pickerInternals/PickerPopover';\nimport { useNativeMobilePicker } from './_pickerInternals/useNativeMobilePicker';\nimport { useSegmentedEntry } from './_pickerInternals/useSegmentedEntry';\nimport { useControlLoading } from './controlLoading';\nimport { useFieldLabelTarget } from './FormContext';\nimport { Icon } from '../elements/Icon';\nimport { Buttons } from '../elements/Buttons';\n\nconst toIsoTime = (d: Date, withSeconds: boolean): string => {\n const hh = String(d.getHours()).padStart(2, '0');\n const mm = String(d.getMinutes()).padStart(2, '0');\n if (!withSeconds) return `${hh}:${mm}`;\n const ss = String(d.getSeconds()).padStart(2, '0');\n return `${hh}:${mm}:${ss}`;\n};\n\nconst fromIsoTime = (s: string): Date | null => {\n // The HTML time value may carry fractional seconds (the spec allows them\n // and some engines normalize to `:ss.sss`); accept and drop.\n const m = /^(\\d{2}):(\\d{2})(?::(\\d{2})(?:\\.\\d{1,3})?)?$/.exec(s);\n if (!m) return null;\n const today = new Date();\n return new Date(\n today.getFullYear(),\n today.getMonth(),\n today.getDate(),\n Number(m[1]),\n Number(m[2]),\n m[3] ? Number(m[3]) : 0,\n 0\n );\n};\n\n/**\n * Props for the raw TimeInput base. Use the higher-level `TimeInput` for\n * Field/Control composition; `TimeInputBase` is the input + popover only.\n */\nexport interface TimeInputBaseProps\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 time (date portion is preserved). */\n value?: Date | null;\n /** Initial value for uncontrolled usage. */\n defaultValue?: Date | null;\n /** Fired when the value changes. */\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 time. A `min` before year 1 is raised to midnight on\n * 1 January of year 1, and a `value` dated before then is out of range, so\n * the wheels and typing change nothing on it, as in the date pickers.\n */\n min?: Date;\n /** Latest selectable time. */\n max?: Date;\n /** Disable the input. */\n disabled?: boolean;\n /** Make the input read-only. */\n readOnly?: boolean;\n /** Placeholder text for the input. */\n placeholder?: string;\n /**\n * Token format string or `Intl.DateTimeFormat` options.\n * @defaultValue (see below)\n */\n format?: DateFormatOption;\n /**\n * Custom parser. Enter and leaving the field call it only if the user\n * changed the text, so focus passing through commits nothing and the value\n * keeps what the format leaves out, such as seconds and the date.\n */\n parse?: (s: string) => Date | null;\n /** BCP-47 locale tag for Intl formatting. */\n locale?: string;\n /** Render the spinner inline (no popover). */\n inline?: boolean;\n /** Use `<input type=\"time\">` on coarse-pointer + small-viewport devices. */\n mobileNative?: boolean | 'auto';\n /** Allow segmented keyboard typing in the input (type the time directly, auto-advancing across segments). `false` makes the field picker-only. */\n editable?: boolean;\n /** Whether the spinner 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 time is selected (off by default). */\n closeOnSelect?: boolean;\n /** Popover anchor position relative to the input. */\n position?: PickerPosition;\n /**\n * Render the popover into `document.body` via portal. On a narrow screen\n * an in-place popover spans the bottom of the viewport, while a portaled\n * one stays on its `position` corner.\n */\n appendToBody?: boolean;\n /**\n * Bulma color modifier for the input, also carried by the wheels, where it\n * colors the selection band. A focused wheel's keyboard focus ring is drawn\n * inside the band in the color's `-invert`, like the selected value, so it\n * shows on the fill. Unset, the wheels use\n * `--bulma-timeinput-wheel-selected-bg`, which defaults to `primary`.\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 /** Hour format. `'12'` shows an AM/PM toggle. */\n hourFormat?: HourFormat;\n /** Show a seconds column. Note: iOS Safari's native time picker UI does not include a seconds wheel; pass `mobileNative={false}` if you need one on iOS. */\n enableSeconds?: boolean;\n /** Hour step for the spinner. */\n incrementHours?: number;\n /** Minute step. Combine with `min`/`max` for slot-style pickers. */\n incrementMinutes?: number;\n /** Second step. Default `1`. */\n incrementSeconds?: number;\n /** Predicate returning `true` for times that should be skipped. Blocked times are also rejected during manual typing. */\n unselectableTimes?: (d: Date) => 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. */\n labels?: PickerLabels;\n /** Play a short audible click on each wheel-item crossing. Substitute for haptic feedback on iOS Safari (which has no web haptic API as of May 2026); on Android, `navigator.vibrate(5)` fires automatically regardless. */\n audioTick?: boolean;\n /** Auto-route platform-appropriate feedback: vibrate on Android (already happening), audio thunk on iOS (where vibrate is unavailable). One switch instead of platform-sniffing on the consumer side. `audioTick={true}` always wins. */\n haptics?: boolean;\n}\n\n/**\n * Raw TimeInput — input + popover spinner without Field/Control wrapping.\n * Use `TimeInput` for the convenience wrapper.\n *\n * @function\n * @param {TimeInputBaseProps} props\n * @returns {JSX.Element}\n */\nexport const TimeInputBase = forwardRef<HTMLInputElement, TimeInputBaseProps>(\n (props, ref) => {\n const {\n value: controlledValue,\n defaultValue,\n onChange,\n onOpen,\n onClose,\n min,\n max,\n disabled,\n readOnly,\n placeholder,\n format,\n parse,\n locale,\n inline = false,\n mobileNative = 'auto',\n editable = true,\n popover = true,\n openOnFocus = true,\n closeOnSelect = false,\n position = 'bottom-left',\n appendToBody = false,\n color,\n size,\n isRounded,\n hourFormat = '24',\n enableSeconds = false,\n incrementHours = 1,\n incrementMinutes = 1,\n incrementSeconds = 1,\n unselectableTimes,\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 audioTick = false,\n haptics = false,\n ...rest\n } = props;\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 // Platform-appropriate feedback routing: when `haptics` is opted in and\n // the runtime has no Vibration API (notably iOS Safari), enable the\n // audio thunk so the user still gets *some* tactile cue. When vibrate\n // is available (Android Chrome etc.), the existing unconditional\n // `navigator.vibrate(5)` carries the haptic — no audio added unless\n // the consumer explicitly set `audioTick`. `audioTick` always wins.\n const hasVibrate =\n typeof navigator !== 'undefined' &&\n typeof navigator.vibrate === 'function';\n const effectiveAudioTick = audioTick || (haptics && !hasVibrate);\n const t = mergeLabels(labels);\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 const defaultFormat: DateFormatOption =\n format ??\n (hourFormat === '12'\n ? enableSeconds\n ? 'hh:mm:ss A'\n : DEFAULT_TIME_FORMAT_12\n : enableSeconds\n ? 'HH:mm:ss'\n : DEFAULT_TIME_FORMAT_24);\n\n // The displayed format is the source of truth for the hour cycle: an\n // explicit 12-hour `format` must drive a 12-hour wheel even when\n // `hourFormat` was left at its default. Fall back to the raw prop only when\n // the cycle can't be read from the format (an Intl-options object, or no\n // hour token).\n const effectiveHourFormat =\n hourCycleFromFormat(defaultFormat) ?? hourFormat;\n\n const [open, setOpenState] = useState(false);\n const [text, setText] = useState<string>(\n value ? formatTime(value, defaultFormat, locale) : ''\n );\n\n const inputRef = useRef<HTMLInputElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n // Snapshot of value at the moment the popover opens, used by Cancel.\n const valueAtOpenRef = useRef<Date | null>(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, isSmallViewport } = useNativeMobilePicker({\n force: mobileNative === 'auto' ? undefined : mobileNative,\n });\n const useNative = !inline && shouldUseNative;\n const wheelItemHeight = isSmallViewport ? 40 : 32;\n\n const inputClass = usePrefixedClassNames('input', {\n [`is-${color}`]: !!color,\n [`is-${size}`]: !!size,\n 'is-rounded': isRounded,\n });\n const containerClass = usePrefixedClassNames('timeinput-container');\n const triggerClass = usePrefixedClassNames('timeinput-trigger');\n const panelClass = usePrefixedClassNames('timeinput-panel');\n const footerClass = usePrefixedClassNames('timeinput-footer');\n const footerButton = usePrefixedClassNames('button', 'is-small');\n const footerOkClass = usePrefixedClassNames(\n 'button',\n 'is-small',\n 'timeinput-footer-ok'\n );\n const mobileFooterClass = usePrefixedClassNames('timeinput-footer-mobile');\n const mobileFooterResetClass = usePrefixedClassNames(\n 'timeinput-footer-reset'\n );\n const mobileFooterDoneClass = usePrefixedClassNames(\n 'timeinput-footer-done'\n );\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) {\n valueAtOpenRef.current = value;\n onOpen?.();\n } else {\n onClose?.();\n }\n },\n [onOpen, onClose, value]\n );\n\n useEffect(() => {\n setText(value ? formatTime(value, defaultFormat, locale) : '');\n }, [value, defaultFormat, locale]);\n\n // A value's date before year 1 is out of range, as in the date pickers.\n const lowerBound = useMemo(() => floorMin(min), [min]);\n\n const commitValue = useCallback(\n (next: Date | null) => {\n if (!isControlled) setInternalValue(next);\n onChange?.(next);\n },\n [isControlled, onChange]\n );\n\n // An empty field starts from today, at the whole minute or second the\n // wheels show.\n const handleSpinnerChange = useCallback(\n (parts: { hours: number; minutes: number; seconds?: number }) => {\n const next = value\n ? setTimeOfDay(value, parts)\n : setTimeOfDay(new Date(), {\n ...parts,\n seconds: parts.seconds ?? 0,\n milliseconds: 0,\n });\n if (!isWithin(next, lowerBound, max)) return;\n commitValue(next);\n },\n [value, lowerBound, max, commitValue]\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 : parseTime(\n trimmed,\n fmt ??\n (typeof defaultFormat === 'string'\n ? defaultFormat\n : DEFAULT_TIME_FORMAT_24)\n );\n },\n [parse, format, defaultFormat]\n );\n\n // The Date the user edits when starting without a current value. Noon so\n // the 12h / 24h hour calculations are unambiguous.\n const makeBaseDate = useCallback((): Date => {\n const d = new Date();\n d.setHours(12, 0, 0, 0);\n return d;\n }, []);\n\n const inputReadOnlyAttr = !!readOnly || !editable;\n const canOpen = !!popover && !disabled && !readOnly;\n\n const { inputHandlers } = useSegmentedEntry({\n format: defaultFormat,\n value,\n commitValue,\n formatFn: formatTime,\n tryParse,\n text,\n setText,\n makeBaseDate,\n locale,\n min: lowerBound,\n max,\n isBlocked: unselectableTimes,\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 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 if (useNative) {\n const nativeStep = enableSeconds\n ? incrementSeconds\n : incrementMinutes * 60;\n return (\n <input\n {...cleanRest}\n ref={combinedRef}\n type=\"time\"\n step={nativeStep}\n className={classNames(inputClass, bulmaHelperClasses, className)}\n value={value ? toIsoTime(value, enableSeconds) : ''}\n onChange={e => {\n const parsed = e.target.value ? fromIsoTime(e.target.value) : null;\n commitValue(parsed);\n }}\n min={min ? toIsoTime(min, enableSeconds) : undefined}\n max={max ? toIsoTime(max, enableSeconds) : 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 spinnerValue = {\n hours: value?.getHours() ?? 0,\n minutes: value?.getMinutes() ?? 0,\n seconds: enableSeconds ? (value?.getSeconds() ?? 0) : undefined,\n };\n\n const panel = (\n <div className={panelClass}>\n <TimeWheels\n value={spinnerValue}\n onChange={handleSpinnerChange}\n hourFormat={effectiveHourFormat}\n enableSeconds={enableSeconds}\n incrementHours={incrementHours}\n incrementMinutes={incrementMinutes}\n incrementSeconds={incrementSeconds}\n unselectableTimes={unselectableTimes}\n color={color}\n size={size}\n disabled={disabled}\n // The popover panel takes `popoverId`, so the wheels inside it take\n // one of their own. Inline there is no panel, and the wheels keep\n // the id they released with.\n id={inline ? popoverId : `${popoverId}-time`}\n labels={labels}\n itemHeight={wheelItemHeight}\n audioTick={effectiveAudioTick}\n onCommit={() => setOpen(false)}\n />\n {/* Footer is popover-only. Desktop gets the OK / Now / Cancel triad;\n mobile drops to an iOS-style \"Reset / ✓\" pair to match the OS\n picker's footer affordances and free up vertical space on small\n screens. */}\n {!inline && !isSmallViewport && (\n <Buttons className={footerClass} hasAddons>\n <button\n type=\"button\"\n className={footerOkClass}\n onClick={() => setOpen(false)}\n >\n {t.ok}\n </button>\n <button\n type=\"button\"\n className={footerButton}\n onClick={() => {\n commitValue(\n snapTimeToIncrement(new Date(), {\n incrementHours,\n incrementMinutes,\n incrementSeconds,\n enableSeconds,\n })\n );\n setOpen(false);\n }}\n >\n {t.now}\n </button>\n <button\n type=\"button\"\n className={footerButton}\n onClick={() => {\n commitValue(valueAtOpenRef.current);\n setOpen(false);\n }}\n >\n {t.cancel}\n </button>\n </Buttons>\n )}\n {!inline && isSmallViewport && (\n <div className={mobileFooterClass}>\n <button\n type=\"button\"\n className={mobileFooterResetClass}\n onClick={() => {\n commitValue(valueAtOpenRef.current);\n setOpen(false);\n }}\n >\n {t.reset}\n </button>\n <button\n type=\"button\"\n className={mobileFooterDoneClass}\n aria-label={t.done}\n onClick={() => setOpen(false)}\n >\n <svg\n width=\"22\"\n height=\"22\"\n viewBox=\"0 0 22 22\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M5 11l4 4 8-8\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n </button>\n </div>\n )}\n </div>\n );\n\n if (inline) {\n return (\n <div\n {...cleanRest}\n ref={containerRef}\n className={classNames(containerClass, bulmaHelperClasses, className)}\n >\n {panel}\n {name && (\n <input\n type=\"hidden\"\n name={name}\n form={form}\n value={value ? toIsoTime(value, enableSeconds) : ''}\n required={required}\n />\n )}\n </div>\n );\n }\n\n return (\n <div\n ref={containerRef}\n className={classNames(containerClass, bulmaHelperClasses, className)}\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={t.chooseTime}\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 isOpen={open}\n onClose={() => setOpen(false)}\n anchorRef={containerRef}\n position={position}\n appendToBody={appendToBody}\n ariaLabel={t.chooseTime}\n id={popoverId}\n restoreFocusRef={inputRef}\n >\n {panel}\n </PickerPopover>\n )}\n </div>\n );\n }\n);\n\nTimeInputBase.displayName = 'TimeInputBase';\n\nexport default TimeInputBase;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
1
+ {"version":3,"file":"TimeInputBase.js","sources":["../../../src/form/TimeInputBase.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 HourFormat,\n PickerLabels,\n mergeLabels,\n} from './_pickerInternals/pickerTypes';\nimport {\n formatTime,\n hourCycleFromFormat,\n parseTime,\n DateFormatOption,\n DEFAULT_TIME_FORMAT_24,\n DEFAULT_TIME_FORMAT_12,\n} from './_pickerInternals/formatters';\nimport {\n setTimeOfDay,\n floorMin,\n isWithin,\n snapTimeToIncrement,\n} from './_pickerInternals/dateUtils';\nimport { TimeWheels } from './_pickerInternals/TimeWheels';\nimport { PickerPopover } from './_pickerInternals/PickerPopover';\nimport { useNativeMobilePicker } from './_pickerInternals/useNativeMobilePicker';\nimport { useSegmentedEntry } from './_pickerInternals/useSegmentedEntry';\nimport { useControlLoading } from './controlLoading';\nimport { useFieldLabelTarget } from './FormContext';\nimport { Icon } from '../elements/Icon';\nimport { Buttons } from '../elements/Buttons';\n\nconst toIsoTime = (d: Date, withSeconds: boolean): string => {\n const hh = String(d.getHours()).padStart(2, '0');\n const mm = String(d.getMinutes()).padStart(2, '0');\n if (!withSeconds) return `${hh}:${mm}`;\n const ss = String(d.getSeconds()).padStart(2, '0');\n return `${hh}:${mm}:${ss}`;\n};\n\nconst fromIsoTime = (s: string): Date | null => {\n // The HTML time value may carry fractional seconds (the spec allows them\n // and some engines normalize to `:ss.sss`); accept and drop.\n const m = /^(\\d{2}):(\\d{2})(?::(\\d{2})(?:\\.\\d{1,3})?)?$/.exec(s);\n if (!m) return null;\n const today = new Date();\n return new Date(\n today.getFullYear(),\n today.getMonth(),\n today.getDate(),\n Number(m[1]),\n Number(m[2]),\n m[3] ? Number(m[3]) : 0,\n 0\n );\n};\n\n/**\n * Props for the raw TimeInput base. Use the higher-level `TimeInput` for\n * Field/Control composition; `TimeInputBase` is the input + popover only.\n */\nexport interface TimeInputBaseProps\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 time (date portion is preserved). */\n value?: Date | null;\n /** Initial value for uncontrolled usage. */\n defaultValue?: Date | null;\n /** Fired when the value changes. */\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 time. A `min` before year 1 is raised to midnight on\n * 1 January of year 1, and a `value` dated before then is out of range, so\n * the wheels and typing change nothing on it, as in the date pickers.\n */\n min?: Date;\n /** Latest selectable time. */\n max?: Date;\n /** Disable the input. */\n disabled?: boolean;\n /** Make the input read-only. */\n readOnly?: boolean;\n /** Placeholder text for the input. */\n placeholder?: string;\n /**\n * Token format string or `Intl.DateTimeFormat` options.\n * @defaultValue (see below)\n */\n format?: DateFormatOption;\n /**\n * Custom parser. Enter and leaving the field call it only if the user\n * changed the text, so focus passing through commits nothing and the value\n * keeps what the format leaves out, such as seconds and the date.\n */\n parse?: (s: string) => Date | null;\n /** BCP-47 locale tag for Intl formatting. */\n locale?: string;\n /** Render the spinner inline (no popover). */\n inline?: boolean;\n /** Use `<input type=\"time\">` on coarse-pointer + small-viewport devices. */\n mobileNative?: boolean | 'auto';\n /** Allow segmented keyboard typing in the input (type the time directly, auto-advancing across segments). `false` makes the field picker-only. */\n editable?: boolean;\n /** Whether the spinner 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 time is selected (off by default). */\n closeOnSelect?: boolean;\n /** Popover anchor position relative to the input. */\n position?: PickerPosition;\n /**\n * Render the popover through a portal, into the `portalContainer` a\n * `ConfigProvider` sets, `document.body` by default. On a narrow screen\n * an in-place popover spans the bottom of the viewport, while a portaled\n * one stays on its `position` corner.\n */\n appendToBody?: boolean;\n /**\n * Bulma color modifier for the input, also carried by the wheels, where it\n * colors the selection band. A focused wheel's keyboard focus ring is drawn\n * inside the band in the color's `-invert`, like the selected value, so it\n * shows on the fill. Unset, the wheels use\n * `--bulma-timeinput-wheel-selected-bg`, which defaults to `primary`.\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 /** Hour format. `'12'` shows an AM/PM toggle. */\n hourFormat?: HourFormat;\n /** Show a seconds column. Note: iOS Safari's native time picker UI does not include a seconds wheel; pass `mobileNative={false}` if you need one on iOS. */\n enableSeconds?: boolean;\n /** Hour step for the spinner. */\n incrementHours?: number;\n /** Minute step. Combine with `min`/`max` for slot-style pickers. */\n incrementMinutes?: number;\n /** Second step. Default `1`. */\n incrementSeconds?: number;\n /** Predicate returning `true` for times that should be skipped. Blocked times are also rejected during manual typing. */\n unselectableTimes?: (d: Date) => 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. */\n labels?: PickerLabels;\n /** Play a short audible click on each wheel-item crossing. Substitute for haptic feedback on iOS Safari (which has no web haptic API as of May 2026); on Android, `navigator.vibrate(5)` fires automatically regardless. */\n audioTick?: boolean;\n /** Auto-route platform-appropriate feedback: vibrate on Android (already happening), audio thunk on iOS (where vibrate is unavailable). One switch instead of platform-sniffing on the consumer side. `audioTick={true}` always wins. */\n haptics?: boolean;\n}\n\n/**\n * Raw TimeInput — input + popover spinner without Field/Control wrapping.\n * Use `TimeInput` for the convenience wrapper.\n *\n * @function\n * @param {TimeInputBaseProps} props\n * @returns {JSX.Element}\n */\nexport const TimeInputBase = forwardRef<HTMLInputElement, TimeInputBaseProps>(\n (props, ref) => {\n const {\n value: controlledValue,\n defaultValue,\n onChange,\n onOpen,\n onClose,\n min,\n max,\n disabled,\n readOnly,\n placeholder,\n format,\n parse,\n locale,\n inline = false,\n mobileNative = 'auto',\n editable = true,\n popover = true,\n openOnFocus = true,\n closeOnSelect = false,\n position = 'bottom-left',\n appendToBody = false,\n color,\n size,\n isRounded,\n hourFormat = '24',\n enableSeconds = false,\n incrementHours = 1,\n incrementMinutes = 1,\n incrementSeconds = 1,\n unselectableTimes,\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 audioTick = false,\n haptics = false,\n ...rest\n } = props;\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 // Platform-appropriate feedback routing: when `haptics` is opted in and\n // the runtime has no Vibration API (notably iOS Safari), enable the\n // audio thunk so the user still gets *some* tactile cue. When vibrate\n // is available (Android Chrome etc.), the existing unconditional\n // `navigator.vibrate(5)` carries the haptic — no audio added unless\n // the consumer explicitly set `audioTick`. `audioTick` always wins.\n const hasVibrate =\n typeof navigator !== 'undefined' &&\n typeof navigator.vibrate === 'function';\n const effectiveAudioTick = audioTick || (haptics && !hasVibrate);\n const t = mergeLabels(labels);\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 const defaultFormat: DateFormatOption =\n format ??\n (hourFormat === '12'\n ? enableSeconds\n ? 'hh:mm:ss A'\n : DEFAULT_TIME_FORMAT_12\n : enableSeconds\n ? 'HH:mm:ss'\n : DEFAULT_TIME_FORMAT_24);\n\n // The displayed format is the source of truth for the hour cycle: an\n // explicit 12-hour `format` must drive a 12-hour wheel even when\n // `hourFormat` was left at its default. Fall back to the raw prop only when\n // the cycle can't be read from the format (an Intl-options object, or no\n // hour token).\n const effectiveHourFormat =\n hourCycleFromFormat(defaultFormat) ?? hourFormat;\n\n const [open, setOpenState] = useState(false);\n const [text, setText] = useState<string>(\n value ? formatTime(value, defaultFormat, locale) : ''\n );\n\n const inputRef = useRef<HTMLInputElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n // Snapshot of value at the moment the popover opens, used by Cancel.\n const valueAtOpenRef = useRef<Date | null>(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, isSmallViewport } = useNativeMobilePicker({\n force: mobileNative === 'auto' ? undefined : mobileNative,\n });\n const useNative = !inline && shouldUseNative;\n const wheelItemHeight = isSmallViewport ? 40 : 32;\n\n const inputClass = usePrefixedClassNames('input', {\n [`is-${color}`]: !!color,\n [`is-${size}`]: !!size,\n 'is-rounded': isRounded,\n });\n const containerClass = usePrefixedClassNames('timeinput-container');\n const triggerClass = usePrefixedClassNames('timeinput-trigger');\n const panelClass = usePrefixedClassNames('timeinput-panel');\n const footerClass = usePrefixedClassNames('timeinput-footer');\n const footerButton = usePrefixedClassNames('button', 'is-small');\n const footerOkClass = usePrefixedClassNames(\n 'button',\n 'is-small',\n 'timeinput-footer-ok'\n );\n const mobileFooterClass = usePrefixedClassNames('timeinput-footer-mobile');\n const mobileFooterResetClass = usePrefixedClassNames(\n 'timeinput-footer-reset'\n );\n const mobileFooterDoneClass = usePrefixedClassNames(\n 'timeinput-footer-done'\n );\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) {\n valueAtOpenRef.current = value;\n onOpen?.();\n } else {\n onClose?.();\n }\n },\n [onOpen, onClose, value]\n );\n\n useEffect(() => {\n setText(value ? formatTime(value, defaultFormat, locale) : '');\n }, [value, defaultFormat, locale]);\n\n // A value's date before year 1 is out of range, as in the date pickers.\n const lowerBound = useMemo(() => floorMin(min), [min]);\n\n const commitValue = useCallback(\n (next: Date | null) => {\n if (!isControlled) setInternalValue(next);\n onChange?.(next);\n },\n [isControlled, onChange]\n );\n\n // An empty field starts from today, at the whole minute or second the\n // wheels show.\n const handleSpinnerChange = useCallback(\n (parts: { hours: number; minutes: number; seconds?: number }) => {\n const next = value\n ? setTimeOfDay(value, parts)\n : setTimeOfDay(new Date(), {\n ...parts,\n seconds: parts.seconds ?? 0,\n milliseconds: 0,\n });\n if (!isWithin(next, lowerBound, max)) return;\n commitValue(next);\n },\n [value, lowerBound, max, commitValue]\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 : parseTime(\n trimmed,\n fmt ??\n (typeof defaultFormat === 'string'\n ? defaultFormat\n : DEFAULT_TIME_FORMAT_24)\n );\n },\n [parse, format, defaultFormat]\n );\n\n // The Date the user edits when starting without a current value. Noon so\n // the 12h / 24h hour calculations are unambiguous.\n const makeBaseDate = useCallback((): Date => {\n const d = new Date();\n d.setHours(12, 0, 0, 0);\n return d;\n }, []);\n\n const inputReadOnlyAttr = !!readOnly || !editable;\n const canOpen = !!popover && !disabled && !readOnly;\n\n const { inputHandlers } = useSegmentedEntry({\n format: defaultFormat,\n value,\n commitValue,\n formatFn: formatTime,\n tryParse,\n text,\n setText,\n makeBaseDate,\n locale,\n min: lowerBound,\n max,\n isBlocked: unselectableTimes,\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 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 if (useNative) {\n const nativeStep = enableSeconds\n ? incrementSeconds\n : incrementMinutes * 60;\n return (\n <input\n {...cleanRest}\n ref={combinedRef}\n type=\"time\"\n step={nativeStep}\n className={classNames(inputClass, bulmaHelperClasses, className)}\n value={value ? toIsoTime(value, enableSeconds) : ''}\n onChange={e => {\n const parsed = e.target.value ? fromIsoTime(e.target.value) : null;\n commitValue(parsed);\n }}\n min={min ? toIsoTime(min, enableSeconds) : undefined}\n max={max ? toIsoTime(max, enableSeconds) : 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 spinnerValue = {\n hours: value?.getHours() ?? 0,\n minutes: value?.getMinutes() ?? 0,\n seconds: enableSeconds ? (value?.getSeconds() ?? 0) : undefined,\n };\n\n const panel = (\n <div className={panelClass}>\n <TimeWheels\n value={spinnerValue}\n onChange={handleSpinnerChange}\n hourFormat={effectiveHourFormat}\n enableSeconds={enableSeconds}\n incrementHours={incrementHours}\n incrementMinutes={incrementMinutes}\n incrementSeconds={incrementSeconds}\n unselectableTimes={unselectableTimes}\n color={color}\n size={size}\n disabled={disabled}\n // The popover panel takes `popoverId`, so the wheels inside it take\n // one of their own. Inline there is no panel, and the wheels keep\n // the id they released with.\n id={inline ? popoverId : `${popoverId}-time`}\n labels={labels}\n itemHeight={wheelItemHeight}\n audioTick={effectiveAudioTick}\n onCommit={() => setOpen(false)}\n />\n {/* Footer is popover-only. Desktop gets the OK / Now / Cancel triad;\n mobile drops to an iOS-style \"Reset / ✓\" pair to match the OS\n picker's footer affordances and free up vertical space on small\n screens. */}\n {!inline && !isSmallViewport && (\n <Buttons className={footerClass} hasAddons>\n <button\n type=\"button\"\n className={footerOkClass}\n onClick={() => setOpen(false)}\n >\n {t.ok}\n </button>\n <button\n type=\"button\"\n className={footerButton}\n onClick={() => {\n commitValue(\n snapTimeToIncrement(new Date(), {\n incrementHours,\n incrementMinutes,\n incrementSeconds,\n enableSeconds,\n })\n );\n setOpen(false);\n }}\n >\n {t.now}\n </button>\n <button\n type=\"button\"\n className={footerButton}\n onClick={() => {\n commitValue(valueAtOpenRef.current);\n setOpen(false);\n }}\n >\n {t.cancel}\n </button>\n </Buttons>\n )}\n {!inline && isSmallViewport && (\n <div className={mobileFooterClass}>\n <button\n type=\"button\"\n className={mobileFooterResetClass}\n onClick={() => {\n commitValue(valueAtOpenRef.current);\n setOpen(false);\n }}\n >\n {t.reset}\n </button>\n <button\n type=\"button\"\n className={mobileFooterDoneClass}\n aria-label={t.done}\n onClick={() => setOpen(false)}\n >\n <svg\n width=\"22\"\n height=\"22\"\n viewBox=\"0 0 22 22\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M5 11l4 4 8-8\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n </button>\n </div>\n )}\n </div>\n );\n\n if (inline) {\n return (\n <div\n {...cleanRest}\n ref={containerRef}\n className={classNames(containerClass, bulmaHelperClasses, className)}\n >\n {panel}\n {name && (\n <input\n type=\"hidden\"\n name={name}\n form={form}\n value={value ? toIsoTime(value, enableSeconds) : ''}\n required={required}\n />\n )}\n </div>\n );\n }\n\n return (\n <div\n ref={containerRef}\n className={classNames(containerClass, bulmaHelperClasses, className)}\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={t.chooseTime}\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 isOpen={open}\n onClose={() => setOpen(false)}\n anchorRef={containerRef}\n position={position}\n appendToBody={appendToBody}\n ariaLabel={t.chooseTime}\n id={popoverId}\n restoreFocusRef={inputRef}\n >\n {panel}\n </PickerPopover>\n )}\n </div>\n );\n }\n);\n\nTimeInputBase.displayName = 'TimeInputBase';\n\nexport default TimeInputBase;\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;AAwCA,MAAM,SAAS,GAAG,CAAC,CAAO,EAAE,WAAoB,KAAY;AAC1D,IAAA,MAAM,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;AAChD,IAAA,MAAM,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;AAClD,IAAA,IAAI,CAAC,WAAW;AAAE,QAAA,OAAO,CAAA,EAAG,EAAE,CAAA,CAAA,EAAI,EAAE,EAAE;AACtC,IAAA,MAAM,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;AAClD,IAAA,OAAO,GAAG,EAAE,CAAA,CAAA,EAAI,EAAE,CAAA,CAAA,EAAI,EAAE,EAAE;AAC5B,CAAC;AAED,MAAM,WAAW,GAAG,CAAC,CAAS,KAAiB;;;IAG7C,MAAM,CAAC,GAAG,8CAA8C,CAAC,IAAI,CAAC,CAAC,CAAC;AAChE,IAAA,IAAI,CAAC,CAAC;AAAE,QAAA,OAAO,IAAI;AACnB,IAAA,MAAM,KAAK,GAAG,IAAI,IAAI,EAAE;IACxB,OAAO,IAAI,IAAI,CACb,KAAK,CAAC,WAAW,EAAE,EACnB,KAAK,CAAC,QAAQ,EAAE,EAChB,KAAK,CAAC,OAAO,EAAE,EACf,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACZ,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACZ,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EACvB,CAAC,CACF;AACH,CAAC;AA+HD;;;;;;;AAOG;AACI,MAAM,aAAa,GAAG,UAAU,CACrC,CAAC,KAAK,EAAE,GAAG,KAAI;AACb,IAAA,MAAM,EACJ,KAAK,EAAE,eAAe,EACtB,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,OAAO,EACP,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,MAAM,EACN,KAAK,EACL,MAAM,EACN,MAAM,GAAG,KAAK,EACd,YAAY,GAAG,MAAM,EACrB,QAAQ,GAAG,IAAI,EACf,OAAO,GAAG,IAAI,EACd,WAAW,GAAG,IAAI,EAClB,aAAa,GAAG,KAAK,EACrB,QAAQ,GAAG,aAAa,EACxB,YAAY,GAAG,KAAK,EACpB,KAAK,EACL,IAAI,EACJ,SAAS,EACT,UAAU,GAAG,IAAI,EACjB,aAAa,GAAG,KAAK,EACrB,cAAc,GAAG,CAAC,EAClB,gBAAgB,GAAG,CAAC,EACpB,gBAAgB,GAAG,CAAC,EACpB,iBAAiB,EACjB,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,OAAO,EACP,OAAO,EACP,SAAS,EACT,MAAM,EACN,YAAY,EAAE,aAAa,EAC3B,WAAW,EAAE,eAAe,EAC5B,eAAe,GAAG,cAAc,EAChC,MAAM,EACN,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,KAAK,EACf,GAAG,IAAI,EACR,GAAG,KAAK;;;;;IAKT,MAAM,EAAE,GAAG,mBAAmB,CAAC,MAAM,EAAE,CAAC,MAAM,CAAC;;AAE/C,IAAA,MAAM,cAAc,GAAG,iBAAiB,EAAE;AAC1C,IAAA,MAAM,WAAW,GAAG,eAAe,IAAI,CAAC,cAAc;;;;;;;AAQtD,IAAA,MAAM,UAAU,GACd,OAAO,SAAS,KAAK,WAAW;AAChC,QAAA,OAAO,SAAS,CAAC,OAAO,KAAK,UAAU;IACzC,MAAM,kBAAkB,GAAG,SAAS,KAAK,OAAO,IAAI,CAAC,UAAU,CAAC;AAChE,IAAA,MAAM,CAAC,GAAG,WAAW,CAAC,MAAM,CAAC;AAE7B,IAAA,MAAM,YAAY,GAAG,eAAe,KAAK,SAAS;AAClD,IAAA,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAChD,YAAY,IAAI,IAAI,CACrB;AACD,IAAA,MAAM,KAAK,GAAG,YAAY,IAAI,eAAe,IAAI,IAAI,IAAI,aAAa;IAEtE,MAAM,aAAa,GACjB,MAAM;SACL,UAAU,KAAK;AACd,cAAE;AACA,kBAAE;AACF,kBAAE;AACJ,cAAE;AACA,kBAAE;kBACA,sBAAsB,CAAC;;;;;;IAO/B,MAAM,mBAAmB,GACvB,mBAAmB,CAAC,aAAa,CAAC,IAAI,UAAU;IAElD,MAAM,CAAC,IAAI,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAC5C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAC9B,KAAK,GAAG,UAAU,CAAC,KAAK,EAAE,aAAa,EAAE,MAAM,CAAC,GAAG,EAAE,CACtD;AAED,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC;AAC/C,IAAA,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC;;AAEjD,IAAA,MAAM,cAAc,GAAG,MAAM,CAAc,IAAI,CAAC;AAChD,IAAA,MAAM,OAAO,GAAG,KAAK,EAAE;AACvB,IAAA,MAAM,SAAS,GAAG,EAAE,GAAG,CAAA,EAAG,EAAE,CAAA,QAAA,CAAU,GAAG,CAAA,OAAA,EAAU,OAAO,EAAE;AAE5D,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,eAAe,CAAC,IAAI,CAAC;AAErE,IAAA,MAAM,EAAE,eAAe,EAAE,eAAe,EAAE,GAAG,qBAAqB,CAAC;QACjE,KAAK,EAAE,YAAY,KAAK,MAAM,GAAG,SAAS,GAAG,YAAY;AAC1D,KAAA,CAAC;AACF,IAAA,MAAM,SAAS,GAAG,CAAC,MAAM,IAAI,eAAe;IAC5C,MAAM,eAAe,GAAG,eAAe,GAAG,EAAE,GAAG,EAAE;AAEjD,IAAA,MAAM,UAAU,GAAG,qBAAqB,CAAC,OAAO,EAAE;AAChD,QAAA,CAAC,MAAM,KAAK,CAAA,CAAE,GAAG,CAAC,CAAC,KAAK;AACxB,QAAA,CAAC,MAAM,IAAI,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI;AACtB,QAAA,YAAY,EAAE,SAAS;AACxB,KAAA,CAAC;AACF,IAAA,MAAM,cAAc,GAAG,qBAAqB,CAAC,qBAAqB,CAAC;AACnE,IAAA,MAAM,YAAY,GAAG,qBAAqB,CAAC,mBAAmB,CAAC;AAC/D,IAAA,MAAM,UAAU,GAAG,qBAAqB,CAAC,iBAAiB,CAAC;AAC3D,IAAA,MAAM,WAAW,GAAG,qBAAqB,CAAC,kBAAkB,CAAC;IAC7D,MAAM,YAAY,GAAG,qBAAqB,CAAC,QAAQ,EAAE,UAAU,CAAC;IAChE,MAAM,aAAa,GAAG,qBAAqB,CACzC,QAAQ,EACR,UAAU,EACV,qBAAqB,CACtB;AACD,IAAA,MAAM,iBAAiB,GAAG,qBAAqB,CAAC,yBAAyB,CAAC;AAC1E,IAAA,MAAM,sBAAsB,GAAG,qBAAqB,CAClD,wBAAwB,CACzB;AACD,IAAA,MAAM,qBAAqB,GAAG,qBAAqB,CACjD,uBAAuB,CACxB;;;;;AAMD,IAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,KAAK,CAAC;AACtC,IAAA,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,IAAa,KAAI;AAChB,QAAA,IAAI,gBAAgB,CAAC,OAAO,KAAK,IAAI;YAAE;AACvC,QAAA,gBAAgB,CAAC,OAAO,GAAG,IAAI;QAC/B,YAAY,CAAC,IAAI,CAAC;QAClB,IAAI,IAAI,EAAE;AACR,YAAA,cAAc,CAAC,OAAO,GAAG,KAAK;YAC9B,MAAM,IAAI;QACZ;aAAO;YACL,OAAO,IAAI;QACb;IACF,CAAC,EACD,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC,CACzB;IAED,SAAS,CAAC,MAAK;AACb,QAAA,OAAO,CAAC,KAAK,GAAG,UAAU,CAAC,KAAK,EAAE,aAAa,EAAE,MAAM,CAAC,GAAG,EAAE,CAAC;IAChE,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,MAAM,CAAC,CAAC;;AAGlC,IAAA,MAAM,UAAU,GAAG,OAAO,CAAC,MAAM,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;AAEtD,IAAA,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,IAAiB,KAAI;AACpB,QAAA,IAAI,CAAC,YAAY;YAAE,gBAAgB,CAAC,IAAI,CAAC;AACzC,QAAA,QAAQ,GAAG,IAAI,CAAC;AAClB,IAAA,CAAC,EACD,CAAC,YAAY,EAAE,QAAQ,CAAC,CACzB;;;AAID,IAAA,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAC,KAA2D,KAAI;QAC9D,MAAM,IAAI,GAAG;AACX,cAAE,YAAY,CAAC,KAAK,EAAE,KAAK;AAC3B,cAAE,YAAY,CAAC,IAAI,IAAI,EAAE,EAAE;AACvB,gBAAA,GAAG,KAAK;AACR,gBAAA,OAAO,EAAE,KAAK,CAAC,OAAO,IAAI,CAAC;AAC3B,gBAAA,YAAY,EAAE,CAAC;AAChB,aAAA,CAAC;QACN,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,UAAU,EAAE,GAAG,CAAC;YAAE;QACtC,WAAW,CAAC,IAAI,CAAC;IACnB,CAAC,EACD,CAAC,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,WAAW,CAAC,CACtC;AAED,IAAA,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,CAAS,KAAiB;AACzB,QAAA,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,EAAE;AACxB,QAAA,IAAI,CAAC,OAAO;AAAE,YAAA,OAAO,IAAI;AACzB,QAAA,MAAM,GAAG,GAAG,OAAO,MAAM,KAAK,QAAQ,GAAG,MAAM,GAAG,SAAS;AAC3D,QAAA,OAAO;AACL,cAAE,KAAK,CAAC,OAAO;AACf,cAAE,SAAS,CACP,OAAO,EACP,GAAG;iBACA,OAAO,aAAa,KAAK;AACxB,sBAAE;AACF,sBAAE,sBAAsB,CAAC,CAC9B;IACP,CAAC,EACD,CAAC,KAAK,EAAE,MAAM,EAAE,aAAa,CAAC,CAC/B;;;AAID,IAAA,MAAM,YAAY,GAAG,WAAW,CAAC,MAAW;AAC1C,QAAA,MAAM,CAAC,GAAG,IAAI,IAAI,EAAE;QACpB,CAAC,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACvB,QAAA,OAAO,CAAC;IACV,CAAC,EAAE,EAAE,CAAC;IAEN,MAAM,iBAAiB,GAAG,CAAC,CAAC,QAAQ,IAAI,CAAC,QAAQ;IACjD,MAAM,OAAO,GAAG,CAAC,CAAC,OAAO,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ;AAEnD,IAAA,MAAM,EAAE,aAAa,EAAE,GAAG,iBAAiB,CAAC;AAC1C,QAAA,MAAM,EAAE,aAAa;QACrB,KAAK;QACL,WAAW;AACX,QAAA,QAAQ,EAAE,UAAU;QACpB,QAAQ;QACR,IAAI;QACJ,OAAO;QACP,YAAY;QACZ,MAAM;AACN,QAAA,GAAG,EAAE,UAAU;QACf,GAAG;AACH,QAAA,SAAS,EAAE,iBAAiB;QAC5B,QAAQ;QACR,QAAQ;QACR,QAAQ;QACR,OAAO;QACP,WAAW;QACX,aAAa;AACb,QAAA,MAAM,EAAE,IAAI;QACZ,OAAO;QACP,QAAQ;QACR,YAAY;QACZ,OAAO;QACP,OAAO;QACP,SAAS;QACT,MAAM;AACP,KAAA,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,IAA6B,KAAI;AAC/B,QAAA,QAA4D,CAAC,OAAO;AACnE,YAAA,IAAI;QACN,IAAI,OAAO,GAAG,KAAK,UAAU;YAAE,GAAG,CAAC,IAAI,CAAC;AACnC,aAAA,IAAI,GAAG;AACT,YAAA,GAAuD,CAAC,OAAO;AAC9D,gBAAA,IAAI;AACV,IAAA,CAAC,EACD,CAAC,GAAG,CAAC,CACN;IAED,IAAI,SAAS,EAAE;QACb,MAAM,UAAU,GAAG;AACjB,cAAE;AACF,cAAE,gBAAgB,GAAG,EAAE;QACzB,QACEA,kBACM,SAAS,EACb,GAAG,EAAE,WAAW,EAChB,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,UAAU,EAChB,SAAS,EAAE,UAAU,CAAC,UAAU,EAAE,kBAAkB,EAAE,SAAS,CAAC,EAChE,KAAK,EAAE,KAAK,GAAG,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,GAAG,EAAE,EACnD,QAAQ,EAAE,CAAC,IAAG;gBACZ,MAAM,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,GAAG,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI;gBAClE,WAAW,CAAC,MAAM,CAAC;AACrB,YAAA,CAAC,EACD,GAAG,EAAE,GAAG,GAAG,SAAS,CAAC,GAAG,EAAE,aAAa,CAAC,GAAG,SAAS,EACpD,GAAG,EAAE,GAAG,GAAG,SAAS,CAAC,GAAG,EAAE,aAAa,CAAC,GAAG,SAAS,EACpD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EAAA,CACN;IAEN;AAEA,IAAA,MAAM,YAAY,GAAG;AACnB,QAAA,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC;AAC7B,QAAA,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,CAAC;AACjC,QAAA,OAAO,EAAE,aAAa,IAAI,KAAK,EAAE,UAAU,EAAE,IAAI,CAAC,IAAI,SAAS;KAChE;IAED,MAAM,KAAK,IACTC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,EAAA,QAAA,EAAA,CACxBD,GAAA,CAAC,UAAU,EAAA,EACT,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,mBAAmB,EAC7B,UAAU,EAAE,mBAAmB,EAC/B,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,gBAAgB,EAAE,gBAAgB,EAClC,gBAAgB,EAAE,gBAAgB,EAClC,iBAAiB,EAAE,iBAAiB,EACpC,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ;;;;AAIlB,gBAAA,EAAE,EAAE,MAAM,GAAG,SAAS,GAAG,GAAG,SAAS,CAAA,KAAA,CAAO,EAC5C,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,eAAe,EAC3B,SAAS,EAAE,kBAAkB,EAC7B,QAAQ,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC,EAAA,CAC9B,EAKD,CAAC,MAAM,IAAI,CAAC,eAAe,KAC1BC,IAAA,CAAC,OAAO,EAAA,EAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAA,IAAA,EAAA,QAAA,EAAA,CACxCD,gBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC,EAAA,QAAA,EAE5B,CAAC,CAAC,EAAE,EAAA,CACE,EACTA,GAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,YAAY,EACvB,OAAO,EAAE,MAAK;AACZ,4BAAA,WAAW,CACT,mBAAmB,CAAC,IAAI,IAAI,EAAE,EAAE;gCAC9B,cAAc;gCACd,gBAAgB;gCAChB,gBAAgB;gCAChB,aAAa;AACd,6BAAA,CAAC,CACH;4BACD,OAAO,CAAC,KAAK,CAAC;AAChB,wBAAA,CAAC,YAEA,CAAC,CAAC,GAAG,EAAA,CACC,EACTA,gBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,YAAY,EACvB,OAAO,EAAE,MAAK;AACZ,4BAAA,WAAW,CAAC,cAAc,CAAC,OAAO,CAAC;4BACnC,OAAO,CAAC,KAAK,CAAC;AAChB,wBAAA,CAAC,EAAA,QAAA,EAEA,CAAC,CAAC,MAAM,EAAA,CACF,CAAA,EAAA,CACD,CACX,EACA,CAAC,MAAM,IAAI,eAAe,KACzBC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,iBAAiB,EAAA,QAAA,EAAA,CAC/BD,GAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,sBAAsB,EACjC,OAAO,EAAE,MAAK;AACZ,4BAAA,WAAW,CAAC,cAAc,CAAC,OAAO,CAAC;4BACnC,OAAO,CAAC,KAAK,CAAC;AAChB,wBAAA,CAAC,EAAA,QAAA,EAEA,CAAC,CAAC,KAAK,GACD,EACTA,GAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,qBAAqB,gBACpB,CAAC,CAAC,IAAI,EAClB,OAAO,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC,EAAA,QAAA,EAE7BA,aACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EAAA,aAAA,EACP,MAAM,EAAA,QAAA,EAElBA,cACE,CAAC,EAAC,eAAe,EACjB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,KAAK,EACjB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EAAA,CACtB,GACE,EAAA,CACC,CAAA,EAAA,CACL,CACP,CAAA,EAAA,CACG,CACP;IAED,IAAI,MAAM,EAAE;AACV,QAAA,QACEC,IAAA,CAAA,KAAA,EAAA,EAAA,GACM,SAAS,EACb,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,UAAU,CAAC,cAAc,EAAE,kBAAkB,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CAEnE,KAAK,EACL,IAAI,KACHD,GAAA,CAAA,OAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,GAAG,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,GAAG,EAAE,EACnD,QAAQ,EAAE,QAAQ,EAAA,CAClB,CACH,CAAA,EAAA,CACG;IAEV;IAEA,QACEC,cACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,UAAU,CAAC,cAAc,EAAE,kBAAkB,EAAE,SAAS,CAAC,KAChE,SAAS,EAAA,QAAA,EAAA,CAEbD,GAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,WAAW,EAChB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,UAAU,EAAA,eAAA,EACD,QAAQ,EAAA,eAAA,EACP,IAAI,EAAA,eAAA,EACJ,SAAS,EACxB,YAAY,EAAC,KAAK,EAClB,SAAS,EAAE,UAAU,EACrB,KAAK,EAAE,IAAI,EACX,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,iBAAiB,EAC3B,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,KACF,aAAa,EAAA,CACjB,EACD,OAAO,IAAI,WAAW,KACrBA,GAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,YAAY,EACvB,OAAO,EAAE,MAAK;AACZ,oBAAA,IAAI,OAAO;AAAE,wBAAA,OAAO,CAAC,CAAC,IAAI,CAAC;gBAC7B,CAAC,EACD,QAAQ,EAAE,CAAC,OAAO,EAAA,YAAA,EACN,CAAC,CAAC,UAAU,EAAA,eAAA,EACV,QAAQ,EAAA,eAAA,EACP,SAAS,mBACT,IAAI,EACnB,QAAQ,EAAE,OAAO,GAAG,CAAC,GAAG,EAAE,YAE1BA,GAAA,CAAC,IAAI,IAAC,IAAI,EAAE,eAAe,EAAE,IAAI,EAAE,IAAI,EAAA,CAAI,GACpC,CACV,EACA,OAAO,KACNA,GAAA,CAAC,aAAa,EAAA,EACZ,MAAM,EAAE,IAAI,EACZ,OAAO,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAE,YAAY,EACvB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,CAAC,CAAC,UAAU,EACvB,EAAE,EAAE,SAAS,EACb,eAAe,EAAE,QAAQ,EAAA,QAAA,EAExB,KAAK,EAAA,CACQ,CACjB,CAAA,EAAA,CACG;AAEV,CAAC;AAGH,aAAa,CAAC,WAAW,GAAG,eAAe;;"}
@@ -4,11 +4,13 @@ import { useRef, useMemo, useEffect } from 'react';
4
4
  import { createPortal } from 'react-dom';
5
5
  import { usePrefixedClassNames, classNames } from '../../helpers/classNames.js';
6
6
  import { useFocusTrap } from '../../helpers/useFocusTrap.js';
7
+ import { usePortalContainer } from '../../helpers/portal.js';
7
8
  import { useAnchoredPosition, marginGap } from '../../helpers/useAnchoredPosition.js';
8
9
 
9
10
  const isBrowser = typeof window !== 'undefined';
10
11
  const PickerPopover = ({ isOpen, onClose, anchorRef, children, position = 'bottom-left', appendToBody = false, className, trapFocus = true, closeOnClickOutside = true, closeOnEscape = true, ariaLabel, ariaLabelledBy, role = 'dialog', id, restoreFocusRef, initialFocusSelector, }) => {
11
12
  const panelRef = useRef(null);
13
+ const resolveContainer = usePortalContainer();
12
14
  // Read as the trap turns on, once the panel's content has rendered.
13
15
  const initialFocusRef = useMemo(() => initialFocusSelector === undefined
14
16
  ? undefined
@@ -85,7 +87,7 @@ const PickerPopover = ({ isOpen, onClose, anchorRef, children, position = 'botto
85
87
  : {};
86
88
  const panel = (jsx("div", { ref: panelRef, id: id, role: role, "aria-modal": role === 'dialog' ? 'false' : undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, tabIndex: -1, className: classNames(panelClass, className), style: style, children: children }));
87
89
  if (appendToBody && isBrowser) {
88
- return createPortal(panel, document.body);
90
+ return createPortal(panel, resolveContainer());
89
91
  }
90
92
  return panel;
91
93
  };
@@ -1 +1 @@
1
- {"version":3,"file":"PickerPopover.js","sources":["../../../../src/form/_pickerInternals/PickerPopover.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport { classNames, usePrefixedClassNames } from '../../helpers/classNames';\nimport { useFocusTrap } from '../../helpers/useFocusTrap';\nimport {\n marginGap,\n useAnchoredPosition,\n} from '../../helpers/useAnchoredPosition';\nimport { PickerPosition } from './pickerTypes';\n\nexport interface PickerPopoverProps {\n isOpen: boolean;\n onClose: () => void;\n anchorRef: React.RefObject<HTMLElement | null>;\n children: React.ReactNode;\n position?: PickerPosition;\n appendToBody?: boolean;\n className?: string;\n trapFocus?: boolean;\n closeOnClickOutside?: boolean;\n /** Close on Escape and on Alt+ArrowUp. Default `true`. */\n closeOnEscape?: boolean;\n ariaLabel?: string;\n ariaLabelledBy?: string;\n role?: 'dialog' | 'group';\n id?: string;\n /**\n * Where focus goes when the popover closes. Without it, focus goes back to\n * whatever had it when the focus trap turned on, which is read after the\n * panel's content mounts: a calendar that focuses a cell as it mounts\n * would be recorded instead, and that cell leaves with the panel.\n */\n restoreFocusRef?: React.RefObject<HTMLElement | null>;\n /**\n * Selects the element in the panel that takes focus as it opens, such as a\n * calendar's focused date rather than the first button in its header. When\n * nothing matches, or the match can't take focus, the first tab stop does.\n */\n initialFocusSelector?: string;\n}\n\nconst isBrowser = typeof window !== 'undefined';\n\nexport const PickerPopover: React.FC<PickerPopoverProps> = ({\n isOpen,\n onClose,\n anchorRef,\n children,\n position = 'bottom-left',\n appendToBody = false,\n className,\n trapFocus = true,\n closeOnClickOutside = true,\n closeOnEscape = true,\n ariaLabel,\n ariaLabelledBy,\n role = 'dialog',\n id,\n restoreFocusRef,\n initialFocusSelector,\n}) => {\n const panelRef = useRef<HTMLDivElement>(null);\n // Read as the trap turns on, once the panel's content has rendered.\n const initialFocusRef = useMemo(\n () =>\n initialFocusSelector === undefined\n ? undefined\n : {\n get current() {\n return (\n panelRef.current?.querySelector<HTMLElement>(\n initialFocusSelector\n ) ?? null\n );\n },\n },\n [initialFocusSelector]\n );\n const resolved = useAnchoredPosition(anchorRef, panelRef, {\n active: isOpen,\n position,\n fixed: appendToBody,\n // The gap comes from `--bulma-picker-popover-offset` as a margin, in place\n // or portaled, so the coordinates leave it out and `auto` reads it off\n // the panel.\n offset: 0,\n styledGap: marginGap,\n });\n\n useEffect(() => {\n if (!isOpen || !closeOnClickOutside || !isBrowser) return undefined;\n // Listen on `pointerdown` (rather than `mousedown`) so touch starts\n // outside the popover dismiss it on mobile — including swipe-from-outside\n // gestures, where the synthetic mouse event would otherwise lag a few\n // hundred ms behind the actual touch.\n const handler = (e: PointerEvent) => {\n const path = e.composedPath();\n if (panelRef.current && path.includes(panelRef.current)) return;\n if (anchorRef.current && path.includes(anchorRef.current)) return;\n onClose();\n };\n document.addEventListener('pointerdown', handler);\n return () => document.removeEventListener('pointerdown', handler);\n }, [isOpen, closeOnClickOutside, anchorRef, onClose]);\n\n // Escape closes it, and so does Alt+ArrowUp, the combobox's key for it,\n // which the calendar and the time wheels inside leave to it.\n useEffect(() => {\n if (!isOpen || !closeOnEscape || !isBrowser) return undefined;\n const handler = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n e.stopPropagation();\n onClose();\n } else if (e.altKey && e.key === 'ArrowUp') {\n e.preventDefault();\n e.stopPropagation();\n onClose();\n }\n };\n document.addEventListener('keydown', handler);\n return () => document.removeEventListener('keydown', handler);\n }, [isOpen, closeOnEscape, onClose]);\n\n useFocusTrap(panelRef, {\n active: isOpen && trapFocus,\n initialFocusRef,\n restoreFocus: restoreFocusRef ?? true,\n });\n\n const panelClass = usePrefixedClassNames('picker-popover', {\n 'is-active': isOpen,\n [`is-${resolved.position}`]: true,\n 'is-portal': appendToBody,\n });\n\n if (!isOpen) return null;\n\n const style: React.CSSProperties = appendToBody\n ? {\n position: 'fixed',\n top: resolved.top,\n left: resolved.left,\n }\n : {};\n\n const panel = (\n <div\n ref={panelRef}\n id={id}\n role={role}\n aria-modal={role === 'dialog' ? 'false' : undefined}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n tabIndex={-1}\n className={classNames(panelClass, className)}\n style={style}\n >\n {children}\n </div>\n );\n\n if (appendToBody && isBrowser) {\n return createPortal(panel, document.body);\n }\n return panel;\n};\n\nPickerPopover.displayName = 'PickerPopover';\n\nexport default PickerPopover;\n"],"names":["_jsx"],"mappings":"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"}
1
+ {"version":3,"file":"PickerPopover.js","sources":["../../../../src/form/_pickerInternals/PickerPopover.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport { classNames, usePrefixedClassNames } from '../../helpers/classNames';\nimport { useFocusTrap } from '../../helpers/useFocusTrap';\nimport { usePortalContainer } from '../../helpers/portal';\nimport {\n marginGap,\n useAnchoredPosition,\n} from '../../helpers/useAnchoredPosition';\nimport { PickerPosition } from './pickerTypes';\n\nexport interface PickerPopoverProps {\n isOpen: boolean;\n onClose: () => void;\n anchorRef: React.RefObject<HTMLElement | null>;\n children: React.ReactNode;\n position?: PickerPosition;\n appendToBody?: boolean;\n className?: string;\n trapFocus?: boolean;\n closeOnClickOutside?: boolean;\n /** Close on Escape and on Alt+ArrowUp. Default `true`. */\n closeOnEscape?: boolean;\n ariaLabel?: string;\n ariaLabelledBy?: string;\n role?: 'dialog' | 'group';\n id?: string;\n /**\n * Where focus goes when the popover closes. Without it, focus goes back to\n * whatever had it when the focus trap turned on, which is read after the\n * panel's content mounts: a calendar that focuses a cell as it mounts\n * would be recorded instead, and that cell leaves with the panel.\n */\n restoreFocusRef?: React.RefObject<HTMLElement | null>;\n /**\n * Selects the element in the panel that takes focus as it opens, such as a\n * calendar's focused date rather than the first button in its header. When\n * nothing matches, or the match can't take focus, the first tab stop does.\n */\n initialFocusSelector?: string;\n}\n\nconst isBrowser = typeof window !== 'undefined';\n\nexport const PickerPopover: React.FC<PickerPopoverProps> = ({\n isOpen,\n onClose,\n anchorRef,\n children,\n position = 'bottom-left',\n appendToBody = false,\n className,\n trapFocus = true,\n closeOnClickOutside = true,\n closeOnEscape = true,\n ariaLabel,\n ariaLabelledBy,\n role = 'dialog',\n id,\n restoreFocusRef,\n initialFocusSelector,\n}) => {\n const panelRef = useRef<HTMLDivElement>(null);\n const resolveContainer = usePortalContainer();\n // Read as the trap turns on, once the panel's content has rendered.\n const initialFocusRef = useMemo(\n () =>\n initialFocusSelector === undefined\n ? undefined\n : {\n get current() {\n return (\n panelRef.current?.querySelector<HTMLElement>(\n initialFocusSelector\n ) ?? null\n );\n },\n },\n [initialFocusSelector]\n );\n const resolved = useAnchoredPosition(anchorRef, panelRef, {\n active: isOpen,\n position,\n fixed: appendToBody,\n // The gap comes from `--bulma-picker-popover-offset` as a margin, in place\n // or portaled, so the coordinates leave it out and `auto` reads it off\n // the panel.\n offset: 0,\n styledGap: marginGap,\n });\n\n useEffect(() => {\n if (!isOpen || !closeOnClickOutside || !isBrowser) return undefined;\n // Listen on `pointerdown` (rather than `mousedown`) so touch starts\n // outside the popover dismiss it on mobile — including swipe-from-outside\n // gestures, where the synthetic mouse event would otherwise lag a few\n // hundred ms behind the actual touch.\n const handler = (e: PointerEvent) => {\n const path = e.composedPath();\n if (panelRef.current && path.includes(panelRef.current)) return;\n if (anchorRef.current && path.includes(anchorRef.current)) return;\n onClose();\n };\n document.addEventListener('pointerdown', handler);\n return () => document.removeEventListener('pointerdown', handler);\n }, [isOpen, closeOnClickOutside, anchorRef, onClose]);\n\n // Escape closes it, and so does Alt+ArrowUp, the combobox's key for it,\n // which the calendar and the time wheels inside leave to it.\n useEffect(() => {\n if (!isOpen || !closeOnEscape || !isBrowser) return undefined;\n const handler = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n e.stopPropagation();\n onClose();\n } else if (e.altKey && e.key === 'ArrowUp') {\n e.preventDefault();\n e.stopPropagation();\n onClose();\n }\n };\n document.addEventListener('keydown', handler);\n return () => document.removeEventListener('keydown', handler);\n }, [isOpen, closeOnEscape, onClose]);\n\n useFocusTrap(panelRef, {\n active: isOpen && trapFocus,\n initialFocusRef,\n restoreFocus: restoreFocusRef ?? true,\n });\n\n const panelClass = usePrefixedClassNames('picker-popover', {\n 'is-active': isOpen,\n [`is-${resolved.position}`]: true,\n 'is-portal': appendToBody,\n });\n\n if (!isOpen) return null;\n\n const style: React.CSSProperties = appendToBody\n ? {\n position: 'fixed',\n top: resolved.top,\n left: resolved.left,\n }\n : {};\n\n const panel = (\n <div\n ref={panelRef}\n id={id}\n role={role}\n aria-modal={role === 'dialog' ? 'false' : undefined}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n tabIndex={-1}\n className={classNames(panelClass, className)}\n style={style}\n >\n {children}\n </div>\n );\n\n if (appendToBody && isBrowser) {\n return createPortal(panel, resolveContainer());\n }\n return panel;\n};\n\nPickerPopover.displayName = 'PickerPopover';\n\nexport default PickerPopover;\n"],"names":["_jsx"],"mappings":";;;;;;;;;AA0CA,MAAM,SAAS,GAAG,OAAO,MAAM,KAAK,WAAW;MAElC,aAAa,GAAiC,CAAC,EAC1D,MAAM,EACN,OAAO,EACP,SAAS,EACT,QAAQ,EACR,QAAQ,GAAG,aAAa,EACxB,YAAY,GAAG,KAAK,EACpB,SAAS,EACT,SAAS,GAAG,IAAI,EAChB,mBAAmB,GAAG,IAAI,EAC1B,aAAa,GAAG,IAAI,EACpB,SAAS,EACT,cAAc,EACd,IAAI,GAAG,QAAQ,EACf,EAAE,EACF,eAAe,EACf,oBAAoB,GACrB,KAAI;AACH,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC;AAC7C,IAAA,MAAM,gBAAgB,GAAG,kBAAkB,EAAE;;IAE7C,MAAM,eAAe,GAAG,OAAO,CAC7B,MACE,oBAAoB,KAAK;AACvB,UAAE;AACF,UAAE;AACE,YAAA,IAAI,OAAO,GAAA;AACT,gBAAA,QACE,QAAQ,CAAC,OAAO,EAAE,aAAa,CAC7B,oBAAoB,CACrB,IAAI,IAAI;YAEb,CAAC;AACF,SAAA,EACP,CAAC,oBAAoB,CAAC,CACvB;AACD,IAAA,MAAM,QAAQ,GAAG,mBAAmB,CAAC,SAAS,EAAE,QAAQ,EAAE;AACxD,QAAA,MAAM,EAAE,MAAM;QACd,QAAQ;AACR,QAAA,KAAK,EAAE,YAAY;;;;AAInB,QAAA,MAAM,EAAE,CAAC;AACT,QAAA,SAAS,EAAE,SAAS;AACrB,KAAA,CAAC;IAEF,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,MAAM,IAAI,CAAC,mBAAmB,IAAI,CAAC,SAAS;AAAE,YAAA,OAAO,SAAS;;;;;AAKnE,QAAA,MAAM,OAAO,GAAG,CAAC,CAAe,KAAI;AAClC,YAAA,MAAM,IAAI,GAAG,CAAC,CAAC,YAAY,EAAE;YAC7B,IAAI,QAAQ,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC;gBAAE;YACzD,IAAI,SAAS,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC;gBAAE;AAC3D,YAAA,OAAO,EAAE;AACX,QAAA,CAAC;AACD,QAAA,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,OAAO,CAAC;QACjD,OAAO,MAAM,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,OAAO,CAAC;IACnE,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC;;;IAIrD,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,MAAM,IAAI,CAAC,aAAa,IAAI,CAAC,SAAS;AAAE,YAAA,OAAO,SAAS;AAC7D,QAAA,MAAM,OAAO,GAAG,CAAC,CAAgB,KAAI;AACnC,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;gBACtB,CAAC,CAAC,eAAe,EAAE;AACnB,gBAAA,OAAO,EAAE;YACX;iBAAO,IAAI,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,EAAE;gBAC1C,CAAC,CAAC,cAAc,EAAE;gBAClB,CAAC,CAAC,eAAe,EAAE;AACnB,gBAAA,OAAO,EAAE;YACX;AACF,QAAA,CAAC;AACD,QAAA,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,OAAO,CAAC;QAC7C,OAAO,MAAM,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,OAAO,CAAC;IAC/D,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,OAAO,CAAC,CAAC;IAEpC,YAAY,CAAC,QAAQ,EAAE;QACrB,MAAM,EAAE,MAAM,IAAI,SAAS;QAC3B,eAAe;QACf,YAAY,EAAE,eAAe,IAAI,IAAI;AACtC,KAAA,CAAC;AAEF,IAAA,MAAM,UAAU,GAAG,qBAAqB,CAAC,gBAAgB,EAAE;AACzD,QAAA,WAAW,EAAE,MAAM;AACnB,QAAA,CAAC,MAAM,QAAQ,CAAC,QAAQ,CAAA,CAAE,GAAG,IAAI;AACjC,QAAA,WAAW,EAAE,YAAY;AAC1B,KAAA,CAAC;AAEF,IAAA,IAAI,CAAC,MAAM;AAAE,QAAA,OAAO,IAAI;IAExB,MAAM,KAAK,GAAwB;AACjC,UAAE;AACE,YAAA,QAAQ,EAAE,OAAO;YACjB,GAAG,EAAE,QAAQ,CAAC,GAAG;YACjB,IAAI,EAAE,QAAQ,CAAC,IAAI;AACpB;UACD,EAAE;IAEN,MAAM,KAAK,IACTA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,QAAQ,EACb,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EAAA,YAAA,EACE,IAAI,KAAK,QAAQ,GAAG,OAAO,GAAG,SAAS,EAAA,YAAA,EACvC,SAAS,EAAA,iBAAA,EACJ,cAAc,EAC/B,QAAQ,EAAE,EAAE,EACZ,SAAS,EAAE,UAAU,CAAC,UAAU,EAAE,SAAS,CAAC,EAC5C,KAAK,EAAE,KAAK,EAAA,QAAA,EAEX,QAAQ,EAAA,CACL,CACP;AAED,IAAA,IAAI,YAAY,IAAI,SAAS,EAAE;AAC7B,QAAA,OAAO,YAAY,CAAC,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAChD;AACA,IAAA,OAAO,KAAK;AACd;AAEA,aAAa,CAAC,WAAW,GAAG,eAAe;;"}
@@ -13,6 +13,9 @@ const useConfig = () => useContext(ConfigContext);
13
13
  /**
14
14
  * ConfigProvider injects configuration into all child components via React context.
15
15
  *
16
+ * A nested provider replaces the outer one's settings rather than adding to
17
+ * them, so inside it any setting it leaves out is back to its default.
18
+ *
16
19
  * @function
17
20
  * @param {ConfigProviderProps} props - Provider props.
18
21
  * @returns {JSX.Element} The context provider wrapping children.
@@ -22,8 +25,8 @@ const useConfig = () => useContext(ConfigContext);
22
25
  * <App />
23
26
  * </ConfigProvider>
24
27
  */
25
- const ConfigProvider = ({ classPrefix, iconLibrary, children, }) => {
26
- return (jsx(ConfigContext.Provider, { value: { classPrefix, iconLibrary }, children: children }));
28
+ const ConfigProvider = ({ classPrefix, iconLibrary, portalContainer, children, }) => {
29
+ return (jsx(ConfigContext.Provider, { value: { classPrefix, iconLibrary, portalContainer }, children: children }));
27
30
  };
28
31
  /**
29
32
  * Utility hook to get the configured class prefix string.
@@ -1 +1 @@
1
- {"version":3,"file":"Config.js","sources":["../../../src/helpers/Config.tsx"],"sourcesContent":["import React, { createContext, useContext, ReactNode } from 'react';\n\n/** Supported icon library identifiers. */\ntype IconLibrary = 'fa' | 'mdi' | 'ion' | 'material-icons' | 'material-symbols';\n\n/**\n * Shape of the configuration context value.\n *\n * @property {string} [classPrefix] - Prefix applied to all Bulma class names.\n * @property {IconLibrary} [iconLibrary] - Default icon library for Icon components.\n */\nexport interface ConfigContextProps {\n classPrefix?: string;\n iconLibrary?: IconLibrary;\n}\n\nconst ConfigContext = createContext<ConfigContextProps>({});\n\n/**\n * Hook to access the bulma-ui configuration context.\n *\n * @function\n * @returns {ConfigContextProps} The current configuration values.\n */\nexport const useConfig = () => useContext(ConfigContext);\n\n/**\n * Props for the ConfigProvider component.\n */\nexport interface ConfigProviderProps {\n /** Child components to receive configuration. */\n children: ReactNode;\n /** Prefix applied to all Bulma class names. */\n classPrefix?: string;\n /** Default icon library for Icon components. */\n iconLibrary?: IconLibrary;\n}\n\n/**\n * ConfigProvider injects configuration into all child components via React context.\n *\n * @function\n * @param {ConfigProviderProps} props - Provider props.\n * @returns {JSX.Element} The context provider wrapping children.\n *\n * @example\n * <ConfigProvider classPrefix=\"my-\" iconLibrary=\"mdi\">\n * <App />\n * </ConfigProvider>\n */\nexport const ConfigProvider: React.FC<ConfigProviderProps> = ({\n classPrefix,\n iconLibrary,\n children,\n}) => {\n return (\n <ConfigContext.Provider value={{ classPrefix, iconLibrary }}>\n {children}\n </ConfigContext.Provider>\n );\n};\n\n/**\n * Utility hook to get the configured class prefix string.\n *\n * @function\n * @returns {string} The class prefix, or empty string if none configured.\n */\nexport const useClassPrefix = () => {\n const { classPrefix } = useConfig();\n return classPrefix || '';\n};\n\n/**\n * Hook that returns a function to prefix a class name with the configured prefix.\n *\n * @function\n * @returns {(className: string) => string} A function that applies the class prefix.\n */\nexport const usePrefixedClass = () => {\n const { classPrefix } = useConfig();\n return (className: string) =>\n classPrefix ? `${classPrefix}${className}` : className;\n};\n\n/**\n * Hook to get the default icon library from configuration.\n *\n * @function\n * @returns {IconLibrary | undefined} The configured icon library, or undefined.\n */\nexport const useIconLibrary = () => {\n const { iconLibrary } = useConfig();\n return iconLibrary;\n};\n"],"names":["_jsx"],"mappings":";;;;AAgBA,MAAM,aAAa,GAAG,aAAa,CAAqB,EAAE,CAAC;AAE3D;;;;;AAKG;AACI,MAAM,SAAS,GAAG,MAAM,UAAU,CAAC,aAAa;AAcvD;;;;;;;;;;;AAWG;AACI,MAAM,cAAc,GAAkC,CAAC,EAC5D,WAAW,EACX,WAAW,EACX,QAAQ,GACT,KAAI;AACH,IAAA,QACEA,GAAA,CAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,WAAW,EAAE,WAAW,EAAE,YACxD,QAAQ,EAAA,CACc;AAE7B;AAEA;;;;;AAKG;AACI,MAAM,cAAc,GAAG,MAAK;AACjC,IAAA,MAAM,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE;IACnC,OAAO,WAAW,IAAI,EAAE;AAC1B;AAEA;;;;;AAKG;AACI,MAAM,gBAAgB,GAAG,MAAK;AACnC,IAAA,MAAM,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE;AACnC,IAAA,OAAO,CAAC,SAAiB,KACvB,WAAW,GAAG,CAAA,EAAG,WAAW,GAAG,SAAS,CAAA,CAAE,GAAG,SAAS;AAC1D;AAEA;;;;;AAKG;AACI,MAAM,cAAc,GAAG,MAAK;AACjC,IAAA,MAAM,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE;AACnC,IAAA,OAAO,WAAW;AACpB;;"}
1
+ {"version":3,"file":"Config.js","sources":["../../../src/helpers/Config.tsx"],"sourcesContent":["import React, { createContext, useContext, ReactNode } from 'react';\n\n/** Supported icon library identifiers. */\ntype IconLibrary = 'fa' | 'mdi' | 'ion' | 'material-icons' | 'material-symbols';\n\n/**\n * Shape of the configuration context value.\n */\nexport interface ConfigContextProps {\n /** Prefix applied to all Bulma class names. */\n classPrefix?: string;\n /** Default icon library for Icon components. */\n iconLibrary?: IconLibrary;\n /** Where portaled content goes when it has no target of its own. */\n portalContainer?: string | HTMLElement;\n}\n\nconst ConfigContext = createContext<ConfigContextProps>({});\n\n/**\n * Hook to access the bulma-ui configuration context.\n *\n * @function\n * @returns {ConfigContextProps} The current configuration values.\n */\nexport const useConfig = () => useContext(ConfigContext);\n\n/**\n * Props for the ConfigProvider component.\n */\nexport interface ConfigProviderProps {\n /** Child components to receive configuration. */\n children: ReactNode;\n /** Prefix applied to all Bulma class names. */\n classPrefix?: string;\n /** Default icon library for Icon components. */\n iconLibrary?: IconLibrary;\n /**\n * Where portaled content goes when it has no target of its own: what a\n * `Portal` without a `container` renders, and what the library's components\n * portal, such as Popover's `appendToBody` panel, a `Modal` with `portal`\n * set to `true`, or a `Toast`. An element, or a `document.querySelector`\n * selector. Unset, or a selector that matches nothing, that content goes to\n * `document.body`. A target a component is given, such as a `Toast`'s\n * `container`, still wins, and nothing portals that would otherwise render\n * in place.\n *\n * The overlays and panels this moves are `position: fixed`, so pick an\n * element with no ancestor that has a `transform`, `filter`,\n * `backdrop-filter`, `perspective`, `will-change: transform`, or a\n * `contain` that includes `paint` or `layout`. That ancestor becomes their\n * containing block, and they cover or line up against it instead of the\n * viewport. An ancestor that starts a stacking context, with a `z-index` or\n * `isolation: isolate`, keeps them inside it, under anything the page\n * stacks above it. `NotificationContainer`'s status region moves too, so\n * this also decides where its announcements come from, and an `aria-hidden`\n * ancestor silences them.\n *\n * A selector can't find an element inside a shadow root, so pass the\n * element itself there, held in state from a ref callback. Content that\n * portals before the element is set goes to `document.body` and moves when\n * it is, which remounts it, as `Portal`'s `container` describes.\n */\n portalContainer?: string | HTMLElement;\n}\n\n/**\n * ConfigProvider injects configuration into all child components via React context.\n *\n * A nested provider replaces the outer one's settings rather than adding to\n * them, so inside it any setting it leaves out is back to its default.\n *\n * @function\n * @param {ConfigProviderProps} props - Provider props.\n * @returns {JSX.Element} The context provider wrapping children.\n *\n * @example\n * <ConfigProvider classPrefix=\"my-\" iconLibrary=\"mdi\">\n * <App />\n * </ConfigProvider>\n */\nexport const ConfigProvider: React.FC<ConfigProviderProps> = ({\n classPrefix,\n iconLibrary,\n portalContainer,\n children,\n}) => {\n return (\n <ConfigContext.Provider\n value={{ classPrefix, iconLibrary, portalContainer }}\n >\n {children}\n </ConfigContext.Provider>\n );\n};\n\n/**\n * Utility hook to get the configured class prefix string.\n *\n * @function\n * @returns {string} The class prefix, or empty string if none configured.\n */\nexport const useClassPrefix = () => {\n const { classPrefix } = useConfig();\n return classPrefix || '';\n};\n\n/**\n * Hook that returns a function to prefix a class name with the configured prefix.\n *\n * @function\n * @returns {(className: string) => string} A function that applies the class prefix.\n */\nexport const usePrefixedClass = () => {\n const { classPrefix } = useConfig();\n return (className: string) =>\n classPrefix ? `${classPrefix}${className}` : className;\n};\n\n/**\n * Hook to get the default icon library from configuration.\n *\n * @function\n * @returns {IconLibrary | undefined} The configured icon library, or undefined.\n */\nexport const useIconLibrary = () => {\n const { iconLibrary } = useConfig();\n return iconLibrary;\n};\n"],"names":["_jsx"],"mappings":";;;;AAiBA,MAAM,aAAa,GAAG,aAAa,CAAqB,EAAE,CAAC;AAE3D;;;;;AAKG;AACI,MAAM,SAAS,GAAG,MAAM,UAAU,CAAC,aAAa;AAyCvD;;;;;;;;;;;;;;AAcG;AACI,MAAM,cAAc,GAAkC,CAAC,EAC5D,WAAW,EACX,WAAW,EACX,eAAe,EACf,QAAQ,GACT,KAAI;AACH,IAAA,QACEA,GAAA,CAAC,aAAa,CAAC,QAAQ,EAAA,EACrB,KAAK,EAAE,EAAE,WAAW,EAAE,WAAW,EAAE,eAAe,EAAE,YAEnD,QAAQ,EAAA,CACc;AAE7B;AAEA;;;;;AAKG;AACI,MAAM,cAAc,GAAG,MAAK;AACjC,IAAA,MAAM,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE;IACnC,OAAO,WAAW,IAAI,EAAE;AAC1B;AAEA;;;;;AAKG;AACI,MAAM,gBAAgB,GAAG,MAAK;AACnC,IAAA,MAAM,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE;AACnC,IAAA,OAAO,CAAC,SAAiB,KACvB,WAAW,GAAG,CAAA,EAAG,WAAW,GAAG,SAAS,CAAA,CAAE,GAAG,SAAS;AAC1D;AAEA;;;;;AAKG;AACI,MAAM,cAAc,GAAG,MAAK;AACjC,IAAA,MAAM,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE;AACnC,IAAA,OAAO,WAAW;AACpB;;"}