@allxsmith/bestax-bulma 5.27.6 → 5.27.7
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.
- package/dist/bestax.css +1 -1
- package/dist/bestax.css.map +1 -1
- package/dist/esm/elements/Notification.js +1 -0
- package/dist/esm/elements/Notification.js.map +1 -1
- package/dist/esm/form/DateRangeInputBase.js +18 -3
- package/dist/esm/form/DateRangeInputBase.js.map +1 -1
- package/dist/esm/form/Field.js +3 -2
- package/dist/esm/form/Field.js.map +1 -1
- package/dist/esm/form/FormContext.js +3 -2
- package/dist/esm/form/FormContext.js.map +1 -1
- package/dist/extras.css +1 -1
- package/dist/extras.css.map +1 -1
- package/dist/index.cjs +24 -7
- package/dist/index.cjs.map +1 -1
- package/dist/types/elements/Notification.d.ts +5 -0
- package/dist/types/form/DateRangeInputBase.d.ts +5 -0
- package/dist/types/form/Field.d.ts +1 -1
- package/dist/types/form/FormContext.d.ts +3 -2
- package/dist/types-cjs/elements/Notification.d.ts +5 -0
- package/dist/types-cjs/form/DateRangeInputBase.d.ts +5 -0
- package/dist/types-cjs/form/Field.d.ts +1 -1
- package/dist/types-cjs/form/FormContext.d.ts +3 -2
- package/dist/versions/bestax-no-dark-mode.css +1 -1
- package/dist/versions/bestax-no-dark-mode.css.map +1 -1
- package/dist/versions/bestax-no-helpers-prefixed.css +1 -1
- package/dist/versions/bestax-no-helpers-prefixed.css.map +1 -1
- package/dist/versions/bestax-no-helpers.css +1 -1
- package/dist/versions/bestax-no-helpers.css.map +1 -1
- package/dist/versions/bestax-prefixed.css +1 -1
- package/dist/versions/bestax-prefixed.css.map +1 -1
- package/package.json +1 -1
- package/src/scss/elements/_index.scss +1 -0
- package/src/scss/elements/_notification.scss +69 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Notification.js","sources":["../../../src/elements/Notification.tsx"],"sourcesContent":["import React, {\n useEffect,\n useMemo,\n useRef,\n useState,\n useCallback,\n useSyncExternalStore,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n useBulmaClasses,\n BulmaClassesProps,\n validColors,\n} from '../helpers/useBulmaClasses';\nimport { warnUnstyledColor } from '../helpers/colorDeprecations';\nimport { groupIntoPositionStacks } from '../helpers/positionStacks';\nimport { useIsHydrated } from '../helpers/useIsHydrated';\nimport { StatusRegion, spokenText } from '../helpers/statusRegion';\n\n/**\n * Props for the Notification component.\n */\nexport interface NotificationProps\n extends\n React.HTMLAttributes<HTMLDivElement>,\n Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n /** Additional CSS classes to apply. */\n className?: string;\n /**\n * Bulma color modifier for the notification (renders `is-<color>`).\n *\n * Only `primary`, `link`, `info`, `success`, `warning`, `danger`, `black`,\n * `white`, `light`, and `dark` have shipped CSS for `.notification`. Every\n * other value the union accepts emits a class no CSS rule matches, so the\n * notification renders unstyled; those log a console warning in development\n * and will be removed from this union in the next major version.\n */\n color?: (typeof validColors)[number];\n /** Text color helper. */\n textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n /** Use the light color variant. */\n isLight?: boolean;\n /**\n * Shows a close (delete) button in the notification. It renders\n * `type=\"button\"`, so it does not submit a form around it.\n */\n hasDelete?: boolean;\n /** Callback fired when the delete button is clicked. */\n onDelete?: () => void;\n /** Content inside the notification. */\n children?: React.ReactNode;\n}\n\n/**\n * The `Notification` component is a Bulma-styled alert/message area for providing feedback, warnings, or information to users.\n *\n * @function\n * @param {NotificationProps} props - Props for the Notification component.\n * @returns {JSX.Element} The rendered notification element.\n * @see {@link https://bulma.io/documentation/elements/notification/ | Bulma Notification documentation}\n */\nexport const Notification: React.FC<NotificationProps> = ({\n className,\n color,\n textColor,\n isLight,\n hasDelete,\n onDelete,\n children,\n ...props\n}) => {\n warnUnstyledColor('Notification', color);\n\n /**\n * Generates Bulma helper classes and separates out remaining props.\n */\n const { bulmaHelperClasses, rest } = useBulmaClasses({\n color: textColor,\n ...props,\n });\n\n const bulmaClasses = usePrefixedClassNames('notification', {\n [`is-${color}`]: color && validColors.includes(color),\n 'is-light': isLight,\n });\n\n const deleteClasses = usePrefixedClassNames('delete');\n\n const notificationClasses = classNames(\n bulmaClasses,\n bulmaHelperClasses,\n className\n );\n\n return (\n <div className={notificationClasses} {...rest}>\n {hasDelete && (\n <button\n type=\"button\"\n className={deleteClasses}\n onClick={onDelete}\n aria-label=\"Close notification\"\n />\n )}\n {children}\n </div>\n );\n};\n\n// Programmatic Notification API\n\n/** Screen positions where programmatic notifications can be displayed. */\nexport type NotificationPosition =\n 'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right';\n\n/**\n * Options for showing a programmatic notification.\n */\nexport interface NotificationOptions {\n /**\n * The message to display.\n *\n * For a notification other than `danger` and `warning`, NotificationContainer\n * announces the text the message renders, with an element's `aria-label`,\n * or an image's `alt`, standing in for what's inside it, a break between\n * block-level elements, and parts that are `aria-hidden`, `hidden` or\n * inline-styled `display: none` left out. Other ways of naming or hiding\n * content, such as `aria-labelledby`, CSS-generated content or a\n * stylesheet's `display: none`, aren't followed, so a message that relies on\n * them can be announced differently from what a screen reader would read.\n */\n message: string | React.ReactNode;\n /**\n * Bulma color modifier for the notification (renders `is-<color>`).\n *\n * Only `primary`, `link`, `info`, `success`, `warning`, `danger`, `black`,\n * `white`, `light`, and `dark` have shipped CSS for `.notification`. Every\n * other value the union accepts emits a class no CSS rule matches, so the\n * notification renders unstyled; those log a console warning in development\n * and will be removed from this union in the next major version.\n */\n color?: (typeof validColors)[number];\n /** Use the light color variant. */\n isLight?: boolean;\n /** Duration in ms before auto-close. Default 3000. */\n duration?: number;\n /**\n * Position on the screen. A notification shown without one goes to\n * `NotificationContainer`'s `position`.\n */\n position?: NotificationPosition;\n /**\n * When true, notifications enter a FIFO queue and display one at a time,\n * one queue across every `position`. Default false.\n */\n queue?: boolean;\n /** Show a delete (close) button. Default true. */\n hasDelete?: boolean;\n /** Stay open until dismissed. */\n indefinite?: boolean;\n /** Pause auto-close timer on hover. Default true. */\n pauseOnHover?: boolean;\n}\n\n/**\n * Internal representation of a notification instance.\n */\ninterface NotificationInstance {\n /** Unique identifier for this notification. */\n id: string;\n /** Configuration options for the notification. */\n options: NotificationOptions;\n}\n\nlet notificationId = 0;\nconst notificationListeners: Set<(items: NotificationInstance[]) => void> =\n new Set();\nlet notifications: NotificationInstance[] = [];\n\n// Queue support\nlet queuedNotifications: NotificationInstance[] = [];\nlet currentQueuedNotification: NotificationInstance | null = null;\n\n// The server has nowhere to portal a notification to, and its copy of this\n// module is shared by every request, so server rendering reads an empty list.\n// Hydration reads it too, which keeps the first client render matching the\n// server's.\nconst noNotifications: NotificationInstance[] = [];\nconst getServerNotifications = () => noNotifications;\n\n// What a container shows right now: the stacked notifications, then the queued\n// one on screen. NotificationContainer renders from this rather than from\n// updates alone, so notifications raised before it mounted still appear. It is\n// replaced rather than mutated, and only when listeners are notified, because\n// useSyncExternalStore needs the same array back between changes. An empty\n// list is `noNotifications` itself, so an empty store reads the same snapshot\n// on the client as on the server, and a notify that leaves nothing showing\n// when nothing was showing doesn't render the container again.\nlet visibleNotifications: NotificationInstance[] = noNotifications;\nconst getVisibleNotifications = () => visibleNotifications;\n\nconst notifyNotificationListeners = () => {\n const allVisible = [...notifications];\n if (currentQueuedNotification) {\n allVisible.push(currentQueuedNotification);\n }\n visibleNotifications = allVisible.length > 0 ? allVisible : noNotifications;\n notificationListeners.forEach(listener => listener([...allVisible]));\n};\n\nconst processQueuedNotification = () => {\n if (currentQueuedNotification || queuedNotifications.length === 0) return;\n currentQueuedNotification = queuedNotifications.shift()!;\n notifyNotificationListeners();\n};\n\n/**\n * Programmatic notification API for showing, closing, and managing notifications.\n *\n * @example\n * notification.success('File saved successfully');\n * notification.danger('Something went wrong', { duration: 5000 });\n */\nexport const notification = {\n /**\n * Show a notification with the given options.\n * @param {NotificationOptions} options - Notification configuration.\n * @returns {string} The unique ID of the created notification.\n */\n show: (options: NotificationOptions): string => {\n const id = `notification-${++notificationId}`;\n const instance = { id, options };\n\n if (options.queue) {\n queuedNotifications.push(instance);\n processQueuedNotification();\n } else {\n notifications.push(instance);\n notifyNotificationListeners();\n }\n\n return id;\n },\n\n /**\n * Show a success notification.\n * @param {string|React.ReactNode} message - The message to display.\n * @param {Partial<NotificationOptions>} [options] - Additional options.\n * @returns {string} The notification ID.\n */\n success: (\n message: string | React.ReactNode,\n options?: Partial<NotificationOptions>\n ): string => {\n return notification.show({ message, color: 'success', ...options });\n },\n\n /**\n * Show a danger notification.\n * @param {string|React.ReactNode} message - The message to display.\n * @param {Partial<NotificationOptions>} [options] - Additional options.\n * @returns {string} The notification ID.\n */\n danger: (\n message: string | React.ReactNode,\n options?: Partial<NotificationOptions>\n ): string => {\n return notification.show({ message, color: 'danger', ...options });\n },\n\n /**\n * Show a warning notification.\n * @param {string|React.ReactNode} message - The message to display.\n * @param {Partial<NotificationOptions>} [options] - Additional options.\n * @returns {string} The notification ID.\n */\n warning: (\n message: string | React.ReactNode,\n options?: Partial<NotificationOptions>\n ): string => {\n return notification.show({ message, color: 'warning', ...options });\n },\n\n /**\n * Show an info notification.\n * @param {string|React.ReactNode} message - The message to display.\n * @param {Partial<NotificationOptions>} [options] - Additional options.\n * @returns {string} The notification ID.\n */\n info: (\n message: string | React.ReactNode,\n options?: Partial<NotificationOptions>\n ): string => {\n return notification.show({ message, color: 'info', ...options });\n },\n\n /**\n * Close a specific notification by ID.\n * @param {string} id - The notification ID to close.\n */\n close: (id: string): void => {\n if (currentQueuedNotification && currentQueuedNotification.id === id) {\n currentQueuedNotification = null;\n processQueuedNotification();\n } else {\n queuedNotifications = queuedNotifications.filter(n => n.id !== id);\n notifications = notifications.filter(n => n.id !== id);\n }\n notifyNotificationListeners();\n },\n\n /** Close all notifications and clear the queue. */\n closeAll: (): void => {\n notifications = [];\n queuedNotifications = [];\n currentQueuedNotification = null;\n notifyNotificationListeners();\n },\n\n /**\n * Subscribe to notification state changes.\n * @param {(items: NotificationInstance[]) => void} listener - Callback invoked on changes.\n * @returns {() => void} Unsubscribe function.\n */\n subscribe: (\n listener: (items: NotificationInstance[]) => void\n ): (() => void) => {\n notificationListeners.add(listener);\n return () => notificationListeners.delete(listener);\n },\n};\n\n/**\n * Whether a notification of this color announces itself as an alert, rather\n * than politely through NotificationContainer's status region.\n *\n * @function isUrgentColor\n * @param {NotificationOptions['color']} color - The notification's color.\n * @returns {boolean} True for `danger` and `warning`.\n */\nconst isUrgentColor = (color: NotificationOptions['color']): boolean =>\n color === 'danger' || color === 'warning';\n\n/**\n * Single auto-dismissing notification item used by NotificationContainer.\n *\n * @function\n * @param {{ instance: NotificationInstance; onClose: (id: string) => void; registerMessage: (id: string, node: HTMLElement | null) => void }} props - Component props.\n * @returns {JSX.Element} The rendered notification item.\n */\nconst NotificationItem: React.FC<{\n instance: NotificationInstance;\n onClose: (id: string) => void;\n registerMessage: (id: string, node: HTMLElement | null) => void;\n}> = ({ instance, onClose, registerMessage }) => {\n const {\n message,\n color,\n isLight,\n duration = 3000,\n hasDelete = true,\n indefinite = false,\n pauseOnHover = true,\n } = instance.options;\n\n const [isPaused, setIsPaused] = useState(false);\n const urgent = isUrgentColor(color);\n\n const handleClose = useCallback(() => {\n onClose(instance.id);\n }, [onClose, instance.id]);\n\n const messageRef = useCallback(\n (node: HTMLElement | null) => {\n registerMessage(instance.id, node);\n },\n [registerMessage, instance.id]\n );\n\n // Auto-close timer\n useEffect(() => {\n if (indefinite || duration === 0 || isPaused) return undefined;\n\n const timer = setTimeout(handleClose, duration);\n return () => clearTimeout(timer);\n }, [duration, indefinite, isPaused, handleClose]);\n\n const handleMouseEnter = useCallback(() => {\n if (pauseOnHover) setIsPaused(true);\n }, [pauseOnHover]);\n\n const handleMouseLeave = useCallback(() => {\n if (pauseOnHover) setIsPaused(false);\n }, [pauseOnHover]);\n\n return (\n <Notification\n color={color}\n isLight={isLight}\n hasDelete={hasDelete}\n onDelete={handleClose}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n style={{ pointerEvents: 'auto' }}\n >\n {/* Only the message is announced, not the close button Notification\n renders ahead of its children. Danger and warning announce\n themselves as an assertive alert, which a screen reader reliably\n reads out even when it arrives with its text. The rest are announced\n through the container's status region, which reads their text from\n this span, so it carries no role of its own that would announce them\n a second time. */}\n {urgent ? (\n <span role=\"alert\" aria-live=\"assertive\">\n {message}\n </span>\n ) : (\n <span ref={messageRef}>{message}</span>\n )}\n </Notification>\n );\n};\n\n// The order NotificationContainer renders its stacks in: across the top of the\n// screen, then across the bottom.\nconst notificationStackOrder: readonly NotificationPosition[] = [\n 'top-left',\n 'top',\n 'top-right',\n 'bottom-left',\n 'bottom',\n 'bottom-right',\n];\n\n/**\n * Inline style that fixes a stack of notifications to its place on the screen.\n *\n * @function\n * @param {NotificationPosition} position - Where the stack sits.\n * @returns {React.CSSProperties} The stack's style.\n */\nconst notificationStackStyle = (\n position: NotificationPosition\n): React.CSSProperties => {\n const isBottom = position.startsWith('bottom');\n const isCenter = position === 'top' || position === 'bottom';\n const isRight = position.endsWith('right');\n\n return {\n position: 'fixed',\n zIndex: 100,\n display: 'flex',\n flexDirection: isBottom ? 'column-reverse' : 'column',\n gap: '0.75rem',\n padding: '1rem',\n pointerEvents: 'none',\n maxWidth: '100%',\n ...(isBottom ? { bottom: 0 } : { top: 0 }),\n ...(isCenter\n ? { left: '50%', transform: 'translateX(-50%)', alignItems: 'center' }\n : isRight\n ? { right: 0, alignItems: 'flex-end' }\n : { left: 0, alignItems: 'flex-start' }),\n };\n};\n\n/**\n * Container component for rendering programmatic notifications.\n * Place once at your app root to enable the notification API. A notification\n * shown with a `position` appears there, and one shown without goes to the\n * container's `position`, so the container renders a stack for each position\n * in use.\n *\n * It keeps a visually hidden `role=\"status\"` live region in the page from the\n * moment it mounts, even while nothing is showing, and announces every\n * notification other than `danger` and `warning` through it, a moment after\n * the notification appears. Those notifications carry no `role=\"status\"` of\n * their own, so `getByRole('status')` finds the region, not the notification.\n * The text stays in the region briefly, even if the notification closes in\n * the meantime, and while both are up the page holds two copies of it. A\n * polite notification that closes before its announcement is written, a\n * moment after it appears, isn't announced at all. `danger` and `warning`\n * notifications announce themselves as assertive alerts. The region is hidden\n * with inline styles, so it needs no stylesheet.\n *\n * @function\n * @param {{ position?: NotificationPosition }} props - Container props.\n * @returns {JSX.Element | null} The rendered notification container, or null on the server and while hydrating.\n */\nexport const NotificationContainer: React.FC<{\n /**\n * Where a notification shown without a `position` of its own appears.\n * Default: 'top-right'. When it changes, those notifications move without\n * remounting, but one shown with its own `position` equal to the old or new\n * value remounts and starts over as if it had just been shown.\n */\n position?: NotificationPosition;\n}> = ({ position = 'top-right' }) => {\n // Starts from the notifications already showing instead of an empty list,\n // then follows changes.\n const items = useSyncExternalStore(\n notification.subscribe,\n getVisibleNotifications,\n getServerNotifications\n );\n // A portal needs a document, and it has no server-rendered counterpart, so\n // the server render and the hydrating one render nothing, and the container\n // portals in from the render after hydration.\n const isHydrated = useIsHydrated();\n\n // The notifications the status region announces. Danger and warning\n // announce themselves.\n const politeItems = useMemo(\n () => items.filter(item => !isUrgentColor(item.options.color)),\n [items]\n );\n\n // Each polite notification's message element, so the text the region\n // announces is the text on screen, whatever the message renders.\n const messageNodesRef = useRef(new Map<string, HTMLElement>());\n const registerMessage = useCallback(\n (id: string, node: HTMLElement | null) => {\n if (node) {\n messageNodesRef.current.set(id, node);\n } else {\n messageNodesRef.current.delete(id);\n }\n },\n []\n );\n // StatusRegion only describes polite notifications that are on screen, and\n // each of those registered its message element when it mounted. The\n // fallback is for a notification announced without being rendered, should\n // the container ever render fewer than it announces: a plain-text message\n // still says itself, and anything else is skipped.\n const describe = useCallback((item: NotificationInstance) => {\n const node = messageNodesRef.current.get(item.id);\n /* istanbul ignore if: every polite notification on screen registers its message element when it mounts */\n if (!node) {\n const { message } = item.options;\n return typeof message === 'string' ? message : null;\n }\n return spokenText(node);\n }, []);\n\n if (typeof document === 'undefined' || !isHydrated) {\n return null;\n }\n\n const stacks = groupIntoPositionStacks(\n items,\n item => item.options.position,\n position,\n notificationStackOrder\n );\n\n return createPortal(\n <>\n {stacks.map(stack => (\n <div key={stack.key} style={notificationStackStyle(stack.position)}>\n {stack.items.map(item => (\n <NotificationItem\n key={item.id}\n instance={item}\n onClose={notification.close}\n registerMessage={registerMessage}\n />\n ))}\n </div>\n ))}\n <StatusRegion items={politeItems} describe={describe} />\n </>,\n document.body\n );\n};\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Notification.js","sources":["../../../src/elements/Notification.tsx"],"sourcesContent":["import React, {\n useEffect,\n useMemo,\n useRef,\n useState,\n useCallback,\n useSyncExternalStore,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n useBulmaClasses,\n BulmaClassesProps,\n validColors,\n} from '../helpers/useBulmaClasses';\nimport { warnUnstyledColor } from '../helpers/colorDeprecations';\nimport { groupIntoPositionStacks } from '../helpers/positionStacks';\nimport { useIsHydrated } from '../helpers/useIsHydrated';\nimport { StatusRegion, spokenText } from '../helpers/statusRegion';\n\n/**\n * Props for the Notification component.\n */\nexport interface NotificationProps\n extends\n React.HTMLAttributes<HTMLDivElement>,\n Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n /** Additional CSS classes to apply. */\n className?: string;\n /**\n * Bulma color modifier for the notification (renders `is-<color>`).\n *\n * Only `primary`, `link`, `info`, `success`, `warning`, `danger`, `black`,\n * `white`, `light`, and `dark` have shipped CSS for `.notification`. Every\n * other value the union accepts emits a class no CSS rule matches, so the\n * notification renders unstyled; those log a console warning in development\n * and will be removed from this union in the next major version.\n */\n color?: (typeof validColors)[number];\n /** Text color helper. */\n textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n /** Use the light color variant. */\n isLight?: boolean;\n /**\n * Shows a close (delete) button in the notification. It renders\n * `type=\"button\"`, so it does not submit a form around it.\n *\n * The notification also takes `has-delete`, which pads its end by\n * `--bulma-notification-delete-padding-inline-end` so the text clears the\n * button. That rule ships in bestax's stylesheets, not Bulma's, so an app\n * styled by Bulma's CSS alone keeps Bulma's padding.\n */\n hasDelete?: boolean;\n /** Callback fired when the delete button is clicked. */\n onDelete?: () => void;\n /** Content inside the notification. */\n children?: React.ReactNode;\n}\n\n/**\n * The `Notification` component is a Bulma-styled alert/message area for providing feedback, warnings, or information to users.\n *\n * @function\n * @param {NotificationProps} props - Props for the Notification component.\n * @returns {JSX.Element} The rendered notification element.\n * @see {@link https://bulma.io/documentation/elements/notification/ | Bulma Notification documentation}\n */\nexport const Notification: React.FC<NotificationProps> = ({\n className,\n color,\n textColor,\n isLight,\n hasDelete,\n onDelete,\n children,\n ...props\n}) => {\n warnUnstyledColor('Notification', color);\n\n /**\n * Generates Bulma helper classes and separates out remaining props.\n */\n const { bulmaHelperClasses, rest } = useBulmaClasses({\n color: textColor,\n ...props,\n });\n\n const bulmaClasses = usePrefixedClassNames('notification', {\n [`is-${color}`]: color && validColors.includes(color),\n 'is-light': isLight,\n 'has-delete': hasDelete,\n });\n\n const deleteClasses = usePrefixedClassNames('delete');\n\n const notificationClasses = classNames(\n bulmaClasses,\n bulmaHelperClasses,\n className\n );\n\n return (\n <div className={notificationClasses} {...rest}>\n {hasDelete && (\n <button\n type=\"button\"\n className={deleteClasses}\n onClick={onDelete}\n aria-label=\"Close notification\"\n />\n )}\n {children}\n </div>\n );\n};\n\n// Programmatic Notification API\n\n/** Screen positions where programmatic notifications can be displayed. */\nexport type NotificationPosition =\n 'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right';\n\n/**\n * Options for showing a programmatic notification.\n */\nexport interface NotificationOptions {\n /**\n * The message to display.\n *\n * For a notification other than `danger` and `warning`, NotificationContainer\n * announces the text the message renders, with an element's `aria-label`,\n * or an image's `alt`, standing in for what's inside it, a break between\n * block-level elements, and parts that are `aria-hidden`, `hidden` or\n * inline-styled `display: none` left out. Other ways of naming or hiding\n * content, such as `aria-labelledby`, CSS-generated content or a\n * stylesheet's `display: none`, aren't followed, so a message that relies on\n * them can be announced differently from what a screen reader would read.\n */\n message: string | React.ReactNode;\n /**\n * Bulma color modifier for the notification (renders `is-<color>`).\n *\n * Only `primary`, `link`, `info`, `success`, `warning`, `danger`, `black`,\n * `white`, `light`, and `dark` have shipped CSS for `.notification`. Every\n * other value the union accepts emits a class no CSS rule matches, so the\n * notification renders unstyled; those log a console warning in development\n * and will be removed from this union in the next major version.\n */\n color?: (typeof validColors)[number];\n /** Use the light color variant. */\n isLight?: boolean;\n /** Duration in ms before auto-close. Default 3000. */\n duration?: number;\n /**\n * Position on the screen. A notification shown without one goes to\n * `NotificationContainer`'s `position`.\n */\n position?: NotificationPosition;\n /**\n * When true, notifications enter a FIFO queue and display one at a time,\n * one queue across every `position`. Default false.\n */\n queue?: boolean;\n /** Show a delete (close) button. Default true. */\n hasDelete?: boolean;\n /** Stay open until dismissed. */\n indefinite?: boolean;\n /** Pause auto-close timer on hover. Default true. */\n pauseOnHover?: boolean;\n}\n\n/**\n * Internal representation of a notification instance.\n */\ninterface NotificationInstance {\n /** Unique identifier for this notification. */\n id: string;\n /** Configuration options for the notification. */\n options: NotificationOptions;\n}\n\nlet notificationId = 0;\nconst notificationListeners: Set<(items: NotificationInstance[]) => void> =\n new Set();\nlet notifications: NotificationInstance[] = [];\n\n// Queue support\nlet queuedNotifications: NotificationInstance[] = [];\nlet currentQueuedNotification: NotificationInstance | null = null;\n\n// The server has nowhere to portal a notification to, and its copy of this\n// module is shared by every request, so server rendering reads an empty list.\n// Hydration reads it too, which keeps the first client render matching the\n// server's.\nconst noNotifications: NotificationInstance[] = [];\nconst getServerNotifications = () => noNotifications;\n\n// What a container shows right now: the stacked notifications, then the queued\n// one on screen. NotificationContainer renders from this rather than from\n// updates alone, so notifications raised before it mounted still appear. It is\n// replaced rather than mutated, and only when listeners are notified, because\n// useSyncExternalStore needs the same array back between changes. An empty\n// list is `noNotifications` itself, so an empty store reads the same snapshot\n// on the client as on the server, and a notify that leaves nothing showing\n// when nothing was showing doesn't render the container again.\nlet visibleNotifications: NotificationInstance[] = noNotifications;\nconst getVisibleNotifications = () => visibleNotifications;\n\nconst notifyNotificationListeners = () => {\n const allVisible = [...notifications];\n if (currentQueuedNotification) {\n allVisible.push(currentQueuedNotification);\n }\n visibleNotifications = allVisible.length > 0 ? allVisible : noNotifications;\n notificationListeners.forEach(listener => listener([...allVisible]));\n};\n\nconst processQueuedNotification = () => {\n if (currentQueuedNotification || queuedNotifications.length === 0) return;\n currentQueuedNotification = queuedNotifications.shift()!;\n notifyNotificationListeners();\n};\n\n/**\n * Programmatic notification API for showing, closing, and managing notifications.\n *\n * @example\n * notification.success('File saved successfully');\n * notification.danger('Something went wrong', { duration: 5000 });\n */\nexport const notification = {\n /**\n * Show a notification with the given options.\n * @param {NotificationOptions} options - Notification configuration.\n * @returns {string} The unique ID of the created notification.\n */\n show: (options: NotificationOptions): string => {\n const id = `notification-${++notificationId}`;\n const instance = { id, options };\n\n if (options.queue) {\n queuedNotifications.push(instance);\n processQueuedNotification();\n } else {\n notifications.push(instance);\n notifyNotificationListeners();\n }\n\n return id;\n },\n\n /**\n * Show a success notification.\n * @param {string|React.ReactNode} message - The message to display.\n * @param {Partial<NotificationOptions>} [options] - Additional options.\n * @returns {string} The notification ID.\n */\n success: (\n message: string | React.ReactNode,\n options?: Partial<NotificationOptions>\n ): string => {\n return notification.show({ message, color: 'success', ...options });\n },\n\n /**\n * Show a danger notification.\n * @param {string|React.ReactNode} message - The message to display.\n * @param {Partial<NotificationOptions>} [options] - Additional options.\n * @returns {string} The notification ID.\n */\n danger: (\n message: string | React.ReactNode,\n options?: Partial<NotificationOptions>\n ): string => {\n return notification.show({ message, color: 'danger', ...options });\n },\n\n /**\n * Show a warning notification.\n * @param {string|React.ReactNode} message - The message to display.\n * @param {Partial<NotificationOptions>} [options] - Additional options.\n * @returns {string} The notification ID.\n */\n warning: (\n message: string | React.ReactNode,\n options?: Partial<NotificationOptions>\n ): string => {\n return notification.show({ message, color: 'warning', ...options });\n },\n\n /**\n * Show an info notification.\n * @param {string|React.ReactNode} message - The message to display.\n * @param {Partial<NotificationOptions>} [options] - Additional options.\n * @returns {string} The notification ID.\n */\n info: (\n message: string | React.ReactNode,\n options?: Partial<NotificationOptions>\n ): string => {\n return notification.show({ message, color: 'info', ...options });\n },\n\n /**\n * Close a specific notification by ID.\n * @param {string} id - The notification ID to close.\n */\n close: (id: string): void => {\n if (currentQueuedNotification && currentQueuedNotification.id === id) {\n currentQueuedNotification = null;\n processQueuedNotification();\n } else {\n queuedNotifications = queuedNotifications.filter(n => n.id !== id);\n notifications = notifications.filter(n => n.id !== id);\n }\n notifyNotificationListeners();\n },\n\n /** Close all notifications and clear the queue. */\n closeAll: (): void => {\n notifications = [];\n queuedNotifications = [];\n currentQueuedNotification = null;\n notifyNotificationListeners();\n },\n\n /**\n * Subscribe to notification state changes.\n * @param {(items: NotificationInstance[]) => void} listener - Callback invoked on changes.\n * @returns {() => void} Unsubscribe function.\n */\n subscribe: (\n listener: (items: NotificationInstance[]) => void\n ): (() => void) => {\n notificationListeners.add(listener);\n return () => notificationListeners.delete(listener);\n },\n};\n\n/**\n * Whether a notification of this color announces itself as an alert, rather\n * than politely through NotificationContainer's status region.\n *\n * @function isUrgentColor\n * @param {NotificationOptions['color']} color - The notification's color.\n * @returns {boolean} True for `danger` and `warning`.\n */\nconst isUrgentColor = (color: NotificationOptions['color']): boolean =>\n color === 'danger' || color === 'warning';\n\n/**\n * Single auto-dismissing notification item used by NotificationContainer.\n *\n * @function\n * @param {{ instance: NotificationInstance; onClose: (id: string) => void; registerMessage: (id: string, node: HTMLElement | null) => void }} props - Component props.\n * @returns {JSX.Element} The rendered notification item.\n */\nconst NotificationItem: React.FC<{\n instance: NotificationInstance;\n onClose: (id: string) => void;\n registerMessage: (id: string, node: HTMLElement | null) => void;\n}> = ({ instance, onClose, registerMessage }) => {\n const {\n message,\n color,\n isLight,\n duration = 3000,\n hasDelete = true,\n indefinite = false,\n pauseOnHover = true,\n } = instance.options;\n\n const [isPaused, setIsPaused] = useState(false);\n const urgent = isUrgentColor(color);\n\n const handleClose = useCallback(() => {\n onClose(instance.id);\n }, [onClose, instance.id]);\n\n const messageRef = useCallback(\n (node: HTMLElement | null) => {\n registerMessage(instance.id, node);\n },\n [registerMessage, instance.id]\n );\n\n // Auto-close timer\n useEffect(() => {\n if (indefinite || duration === 0 || isPaused) return undefined;\n\n const timer = setTimeout(handleClose, duration);\n return () => clearTimeout(timer);\n }, [duration, indefinite, isPaused, handleClose]);\n\n const handleMouseEnter = useCallback(() => {\n if (pauseOnHover) setIsPaused(true);\n }, [pauseOnHover]);\n\n const handleMouseLeave = useCallback(() => {\n if (pauseOnHover) setIsPaused(false);\n }, [pauseOnHover]);\n\n return (\n <Notification\n color={color}\n isLight={isLight}\n hasDelete={hasDelete}\n onDelete={handleClose}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n style={{ pointerEvents: 'auto' }}\n >\n {/* Only the message is announced, not the close button Notification\n renders ahead of its children. Danger and warning announce\n themselves as an assertive alert, which a screen reader reliably\n reads out even when it arrives with its text. The rest are announced\n through the container's status region, which reads their text from\n this span, so it carries no role of its own that would announce them\n a second time. */}\n {urgent ? (\n <span role=\"alert\" aria-live=\"assertive\">\n {message}\n </span>\n ) : (\n <span ref={messageRef}>{message}</span>\n )}\n </Notification>\n );\n};\n\n// The order NotificationContainer renders its stacks in: across the top of the\n// screen, then across the bottom.\nconst notificationStackOrder: readonly NotificationPosition[] = [\n 'top-left',\n 'top',\n 'top-right',\n 'bottom-left',\n 'bottom',\n 'bottom-right',\n];\n\n/**\n * Inline style that fixes a stack of notifications to its place on the screen.\n *\n * @function\n * @param {NotificationPosition} position - Where the stack sits.\n * @returns {React.CSSProperties} The stack's style.\n */\nconst notificationStackStyle = (\n position: NotificationPosition\n): React.CSSProperties => {\n const isBottom = position.startsWith('bottom');\n const isCenter = position === 'top' || position === 'bottom';\n const isRight = position.endsWith('right');\n\n return {\n position: 'fixed',\n zIndex: 100,\n display: 'flex',\n flexDirection: isBottom ? 'column-reverse' : 'column',\n gap: '0.75rem',\n padding: '1rem',\n pointerEvents: 'none',\n maxWidth: '100%',\n ...(isBottom ? { bottom: 0 } : { top: 0 }),\n ...(isCenter\n ? { left: '50%', transform: 'translateX(-50%)', alignItems: 'center' }\n : isRight\n ? { right: 0, alignItems: 'flex-end' }\n : { left: 0, alignItems: 'flex-start' }),\n };\n};\n\n/**\n * Container component for rendering programmatic notifications.\n * Place once at your app root to enable the notification API. A notification\n * shown with a `position` appears there, and one shown without goes to the\n * container's `position`, so the container renders a stack for each position\n * in use.\n *\n * It keeps a visually hidden `role=\"status\"` live region in the page from the\n * moment it mounts, even while nothing is showing, and announces every\n * notification other than `danger` and `warning` through it, a moment after\n * the notification appears. Those notifications carry no `role=\"status\"` of\n * their own, so `getByRole('status')` finds the region, not the notification.\n * The text stays in the region briefly, even if the notification closes in\n * the meantime, and while both are up the page holds two copies of it. A\n * polite notification that closes before its announcement is written, a\n * moment after it appears, isn't announced at all. `danger` and `warning`\n * notifications announce themselves as assertive alerts. The region is hidden\n * with inline styles, so it needs no stylesheet.\n *\n * @function\n * @param {{ position?: NotificationPosition }} props - Container props.\n * @returns {JSX.Element | null} The rendered notification container, or null on the server and while hydrating.\n */\nexport const NotificationContainer: React.FC<{\n /**\n * Where a notification shown without a `position` of its own appears.\n * Default: 'top-right'. When it changes, those notifications move without\n * remounting, but one shown with its own `position` equal to the old or new\n * value remounts and starts over as if it had just been shown.\n */\n position?: NotificationPosition;\n}> = ({ position = 'top-right' }) => {\n // Starts from the notifications already showing instead of an empty list,\n // then follows changes.\n const items = useSyncExternalStore(\n notification.subscribe,\n getVisibleNotifications,\n getServerNotifications\n );\n // A portal needs a document, and it has no server-rendered counterpart, so\n // the server render and the hydrating one render nothing, and the container\n // portals in from the render after hydration.\n const isHydrated = useIsHydrated();\n\n // The notifications the status region announces. Danger and warning\n // announce themselves.\n const politeItems = useMemo(\n () => items.filter(item => !isUrgentColor(item.options.color)),\n [items]\n );\n\n // Each polite notification's message element, so the text the region\n // announces is the text on screen, whatever the message renders.\n const messageNodesRef = useRef(new Map<string, HTMLElement>());\n const registerMessage = useCallback(\n (id: string, node: HTMLElement | null) => {\n if (node) {\n messageNodesRef.current.set(id, node);\n } else {\n messageNodesRef.current.delete(id);\n }\n },\n []\n );\n // StatusRegion only describes polite notifications that are on screen, and\n // each of those registered its message element when it mounted. The\n // fallback is for a notification announced without being rendered, should\n // the container ever render fewer than it announces: a plain-text message\n // still says itself, and anything else is skipped.\n const describe = useCallback((item: NotificationInstance) => {\n const node = messageNodesRef.current.get(item.id);\n /* istanbul ignore if: every polite notification on screen registers its message element when it mounts */\n if (!node) {\n const { message } = item.options;\n return typeof message === 'string' ? message : null;\n }\n return spokenText(node);\n }, []);\n\n if (typeof document === 'undefined' || !isHydrated) {\n return null;\n }\n\n const stacks = groupIntoPositionStacks(\n items,\n item => item.options.position,\n position,\n notificationStackOrder\n );\n\n return createPortal(\n <>\n {stacks.map(stack => (\n <div key={stack.key} style={notificationStackStyle(stack.position)}>\n {stack.items.map(item => (\n <NotificationItem\n key={item.id}\n instance={item}\n onClose={notification.close}\n registerMessage={registerMessage}\n />\n ))}\n </div>\n ))}\n <StatusRegion items={politeItems} describe={describe} />\n </>,\n document.body\n );\n};\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
|
|
@@ -11,6 +11,7 @@ import { PickerPopover } from './_pickerInternals/PickerPopover.js';
|
|
|
11
11
|
import { useNativeMobilePicker } from './_pickerInternals/useNativeMobilePicker.js';
|
|
12
12
|
import { useSegmentedEntry } from './_pickerInternals/useSegmentedEntry.js';
|
|
13
13
|
import { useControlLoading } from './controlLoading.js';
|
|
14
|
+
import { useAutoLabelledBy } from './useAutoLabelId.js';
|
|
14
15
|
import { Icon } from '../elements/Icon.js';
|
|
15
16
|
|
|
16
17
|
const EMPTY_RANGE = [null, null];
|
|
@@ -21,6 +22,11 @@ const today = () => startOfDay(new Date());
|
|
|
21
22
|
/**
|
|
22
23
|
* Raw DateRangeInput: the two inputs and the popover calendar without
|
|
23
24
|
* Field/Control wrapping. Use `DateRangeInput` for the convenience wrapper.
|
|
25
|
+
* Composed in a labeled `Field`, its `role="group"` root points
|
|
26
|
+
* `aria-labelledby` at that `Field`'s label, `inline` too, as the wrapper's
|
|
27
|
+
* does, and each input keeps its own name. An `aria-label` or
|
|
28
|
+
* `aria-labelledby` you give it wins over the label, and an `aria-labelledby`
|
|
29
|
+
* key counts even when undefined, since it is spread over the group's own.
|
|
24
30
|
*
|
|
25
31
|
* @function
|
|
26
32
|
* @param {DateRangeInputBaseProps} props
|
|
@@ -61,6 +67,15 @@ const DateRangeInputBase = forwardRef((props, ref) => {
|
|
|
61
67
|
const reactId = useId();
|
|
62
68
|
const popoverId = id ? `${id}-popover` : `picker-${reactId}`;
|
|
63
69
|
const { bulmaHelperClasses, rest: cleanRest } = useBulmaClasses(rest);
|
|
70
|
+
// Two inputs can't share a labeled Field's `for`, so inside one the group
|
|
71
|
+
// points `aria-labelledby` at that Field's label, as `DateRangeInput`
|
|
72
|
+
// does, in every mode. A name the caller gave the group wins, and so does
|
|
73
|
+
// the `aria-labelledby` that wrapper always passes, so it decides there.
|
|
74
|
+
const { ariaLabelledBy } = useAutoLabelledBy({
|
|
75
|
+
label: undefined,
|
|
76
|
+
rendersLabel: false,
|
|
77
|
+
callerProps: rest,
|
|
78
|
+
});
|
|
64
79
|
const { shouldUseNative } = useNativeMobilePicker({
|
|
65
80
|
force: mobileNative === 'auto' ? undefined : mobileNative,
|
|
66
81
|
});
|
|
@@ -249,14 +264,14 @@ const DateRangeInputBase = forwardRef((props, ref) => {
|
|
|
249
264
|
};
|
|
250
265
|
const minIso = min ? isoDay(lowerBound) : undefined;
|
|
251
266
|
const maxIso = max ? isoDay(max) : undefined;
|
|
252
|
-
return (jsxs("div", { ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, bulmaHelperClasses, className), onFocus: onFocus, onFocusCapture: onFocusCapture, children: [jsxs("div", { className: fieldClass, children: [jsx("input", { ref: combinedRef, type: "date", id: id, "aria-label": t.rangeStart, className: inputClass, value: isoDay(start), onChange: nativeChange(commitStart, isBlockedDay), min: minIso, max: maxIso, disabled: disabled, readOnly: readOnly, required: required }), separator, jsx("input", { ref: endRef, type: "date", id: id ? `${id}-end` : undefined, "aria-label": t.rangeEnd, className: inputClass, value: isoDay(end), onChange: nativeChange(commitEnd, isBlockedEnd), min: start ? isoDay(start) : minIso, max: maxIso, disabled: disabled, readOnly: readOnly, required: required })] }), hiddenInputs] }));
|
|
267
|
+
return (jsxs("div", { "aria-labelledby": ariaLabelledBy, ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, bulmaHelperClasses, className), onFocus: onFocus, onFocusCapture: onFocusCapture, children: [jsxs("div", { className: fieldClass, children: [jsx("input", { ref: combinedRef, type: "date", id: id, "aria-label": t.rangeStart, className: inputClass, value: isoDay(start), onChange: nativeChange(commitStart, isBlockedDay), min: minIso, max: maxIso, disabled: disabled, readOnly: readOnly, required: required }), separator, jsx("input", { ref: endRef, type: "date", id: id ? `${id}-end` : undefined, "aria-label": t.rangeEnd, className: inputClass, value: isoDay(end), onChange: nativeChange(commitEnd, isBlockedEnd), min: start ? isoDay(start) : minIso, max: maxIso, disabled: disabled, readOnly: readOnly, required: required })] }), hiddenInputs] }));
|
|
253
268
|
}
|
|
254
269
|
const calendar = (jsx(Calendar, { range: range, onRangeSelect: handleRangeSelect, allowDisabledInRange: allowDisabledInRange, focusedDate: focusedDate, onFocusedDateChange: setFocusedDate, min: min, max: max, shouldDisableDate: shouldDisableDate, unselectableDates: unselectableDates, firstDayOfWeek: firstDayOfWeek, locale: locale, dayNames: dayNames, monthNames: monthNames, nearbyMonthDays: nearbyMonthDays, color: color, size: size,
|
|
255
270
|
// The popover panel takes `popoverId`, so the calendar inside it takes
|
|
256
271
|
// one of its own. Inline there is no panel.
|
|
257
272
|
id: inline ? popoverId : `${popoverId}-cal`, autoFocusCell: open, labels: labels }));
|
|
258
273
|
if (inline) {
|
|
259
|
-
return (jsxs("div", { ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, bulmaHelperClasses, className), onFocus: onFocus, onFocusCapture: onFocusCapture, children: [calendar, hiddenInputs] }));
|
|
274
|
+
return (jsxs("div", { "aria-labelledby": ariaLabelledBy, ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, bulmaHelperClasses, className), onFocus: onFocus, onFocusCapture: onFocusCapture, children: [calendar, hiddenInputs] }));
|
|
260
275
|
}
|
|
261
276
|
const canOpen = !!popover && !disabled && !readOnly;
|
|
262
277
|
const inputReadOnly = !!readOnly || !editable;
|
|
@@ -291,7 +306,7 @@ const DateRangeInputBase = forwardRef((props, ref) => {
|
|
|
291
306
|
readOnly: inputReadOnly,
|
|
292
307
|
required,
|
|
293
308
|
};
|
|
294
|
-
return (jsxs("div", { ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, bulmaHelperClasses, className), onFocus: handleFocus, onFocusCapture: handleFocusCapture, children: [jsxs("div", { className: fieldClass, onMouseDown: handleFieldMouseDown, children: [jsx("input", { ...comboboxProps, ref: combinedRef, id: id, "aria-label": t.rangeStart, value: startText, ...startHandlers }), separator, jsx("input", { ...comboboxProps, ref: endRef, id: id ? `${id}-end` : undefined, "aria-label": t.rangeEnd, value: endText, ...endHandlers })] }), popover && triggerIcon && (jsx("button", { type: "button", className: triggerClass,
|
|
309
|
+
return (jsxs("div", { "aria-labelledby": ariaLabelledBy, ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, bulmaHelperClasses, className), onFocus: handleFocus, onFocusCapture: handleFocusCapture, children: [jsxs("div", { className: fieldClass, onMouseDown: handleFieldMouseDown, children: [jsx("input", { ...comboboxProps, ref: combinedRef, id: id, "aria-label": t.rangeStart, value: startText, ...startHandlers }), separator, jsx("input", { ...comboboxProps, ref: endRef, id: id ? `${id}-end` : undefined, "aria-label": t.rangeEnd, value: endText, ...endHandlers })] }), popover && triggerIcon && (jsx("button", { type: "button", className: triggerClass,
|
|
295
310
|
// Disabled whenever the popover can't open, so a click can.
|
|
296
311
|
onClick: () => setOpen(!open), disabled: !canOpen, "aria-label": t.chooseDateRange, "aria-haspopup": "dialog", "aria-controls": popoverId, "aria-expanded": open, tabIndex: canOpen ? 0 : -1, children: jsx(Icon, { name: triggerIconName, size: size }) })), popover && (jsx(PickerPopover, { isOpen: open, onClose: handlePopoverClose, anchorRef: containerRef, position: position, appendToBody: appendToBody, ariaLabel: t.chooseDateRange, id: popoverId, restoreFocusRef: restoreFocusRef, initialFocusSelector: CALENDAR_FOCUSED_CELL, children: calendar })), hiddenInputs] }));
|
|
297
312
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateRangeInputBase.js","sources":["../../../src/form/DateRangeInputBase.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 DateRangeValue,\n DayOfWeek,\n PickerLabels,\n PickerPosition,\n mergeLabels,\n} from './_pickerInternals/pickerTypes';\nimport {\n DEFAULT_DATE_FORMAT,\n DateFormatOption,\n formatDate,\n fromIsoValue,\n parseDate,\n toIsoValue,\n} from './_pickerInternals/formatters';\nimport {\n canCloseRange,\n clampDate,\n floorMin,\n isSameDay,\n isWithin,\n startOfDay,\n} from './_pickerInternals/dateUtils';\nimport { Calendar, CALENDAR_FOCUSED_CELL } from './_pickerInternals/Calendar';\nimport { PickerPopover } from './_pickerInternals/PickerPopover';\nimport { useNativeMobilePicker } from './_pickerInternals/useNativeMobilePicker';\nimport { useSegmentedEntry } from './_pickerInternals/useSegmentedEntry';\nimport { useControlLoading } from './controlLoading';\nimport { Icon } from '../elements/Icon';\n\nexport type { DateRangeValue };\n\nconst EMPTY_RANGE: DateRangeValue = [null, null];\n\n/** A range's end as the form and the native inputs carry it. */\nconst isoDay = (d: Date | null): string => (d ? toIsoValue(d, 'day') : '');\n\n/** Today at local midnight, where typing into an empty end starts. */\nconst today = (): Date => startOfDay(new Date());\n\n/**\n * Props for the raw DateRangeInput base. Use the higher-level\n * `DateRangeInput` for Field/Control composition; `DateRangeInputBase` is the\n * two inputs and the popover only.\n */\nexport interface DateRangeInputBaseProps\n extends\n Omit<\n React.HTMLAttributes<HTMLDivElement>,\n 'defaultValue' | 'onChange' | 'color' | 'placeholder' | 'popover'\n >,\n Omit<BulmaClassesProps, 'color'> {\n /**\n * Controlled range, start first. Either end may be `null`, and\n * `[null, null]` is empty.\n */\n value?: DateRangeValue;\n /** Initial range for uncontrolled usage. */\n defaultValue?: DateRangeValue;\n /**\n * Fired when the range changes, with the start first. Typing commits one\n * end at a time, so a range half typed arrives as `[start, null]`. The\n * calendar commits only a finished range: its first pick marks the start\n * inside the calendar and its second commits both ends in one call. The\n * range stays ordered, so the end is never before the start.\n */\n onChange?: (range: DateRangeValue) => void;\n /** Fired when the popover opens. */\n onOpen?: () => void;\n /** Fired when the popover closes. */\n onClose?: () => void;\n /**\n * Earliest selectable date, for either end. A `min` before year 1 is raised\n * to 1 January of year 1, where the range starts without one too.\n */\n min?: Date;\n /** Latest selectable date, for either end. */\n max?: Date;\n /** Disable both inputs and the launcher. */\n disabled?: boolean;\n /** Make both inputs read-only and keep the popover closed. */\n readOnly?: boolean;\n /** Placeholder text, shown in both inputs while they are empty. */\n placeholder?: string;\n /**\n * Token format string or `Intl.DateTimeFormat` options, used by both\n * inputs.\n * @defaultValue 'YYYY-MM-DD'\n */\n format?: DateFormatOption;\n /**\n * Custom parser (use when `format` is `Intl.DateTimeFormatOptions`).\n * Enter and leaving an input call it only if the user changed its text.\n */\n parse?: (s: string) => Date | null;\n /** BCP-47 locale tag for day/month names and Intl formatting. */\n locale?: string;\n /**\n * Render the calendar inline, with no inputs and no popover. The hidden\n * form inputs still carry the range.\n */\n inline?: boolean;\n /**\n * Use two native `<input type=\"date\">`s on coarse-pointer, small-viewport\n * devices (`'auto'`), always (`true`) or never (`false`). The end input's\n * `min` follows the start, and a change goes through the same rules as\n * typing.\n */\n mobileNative?: boolean | 'auto';\n /** Allow segmented keyboard typing in both inputs. `false` makes the field picker-only. */\n editable?: boolean;\n /** Whether the calendar popover exists. `false` makes the field input-only. */\n popover?: boolean;\n /**\n * Open the popover when focus arrives in the field. Moving focus between\n * the two inputs, or back from the launcher, leaves it closed, and so does\n * the focus a closing popover hands back. A click on either input opens it.\n * With it off, the launcher or Alt+ArrowDown opens it.\n */\n openOnFocus?: boolean;\n /**\n * Close the popover once the range is picked. The first pick, which only\n * marks the start, never closes it.\n */\n closeOnSelect?: boolean;\n /** Popover anchor position relative to the field. */\n position?: PickerPosition;\n /** Render the popover into `document.body` via portal. */\n appendToBody?: boolean;\n /**\n * Bulma color modifier for the field, also carried by the calendar, where it\n * colors the range's ends and the band between them.\n */\n color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n /** Size variant. */\n size?: 'small' | 'medium' | 'large';\n /** Render the field with rounded corners. */\n isRounded?: boolean;\n /**\n * Predicate to disable specific dates (e.g. weekends). A disabled day can\n * be neither end, typing rejects it, and a range can't include one unless\n * `allowDisabledInRange` is set.\n */\n shouldDisableDate?: (d: Date) => boolean;\n /** Convenience array of disabled dates; merged with `shouldDisableDate`. Matched by calendar day. */\n unselectableDates?: Date[];\n /**\n * Let a range include days that `shouldDisableDate` or `unselectableDates`\n * disable, such as a stay over a night with no check-ins. Its ends still\n * can't be such days. Off, a pick in the calendar past a disabled day\n * starts a new range there, typing refuses an end past one, and a start\n * typed with one before the end clears the end. Finding one walks the days\n * between, so off, a span too long to walk is refused as well.\n */\n allowDisabledInRange?: boolean;\n /** Day the week starts on (0 = Sunday). */\n firstDayOfWeek?: DayOfWeek;\n /** Override the 7 day-name labels (in calendar order, post-rotation). */\n dayNames?: string[];\n /** Override the 12 month-name labels. */\n monthNames?: string[];\n /** Show dimmed dates from adjacent months in the grid. */\n nearbyMonthDays?: boolean;\n /** Decorative left icon glyph for the wrapping `Control` (shown by default). Set `''` to hide. */\n iconLeftName?: string;\n /**\n * Show a clickable launcher button on the right that toggles the popover.\n * Hidden by default while a `Control` it sits in shows its `isLoading`\n * spinner, which shares that right edge.\n * @defaultValue true\n */\n triggerIcon?: boolean;\n /** Glyph for the right launcher button. */\n triggerIconName?: string;\n /**\n * Optional translatable string overrides. `rangeStart` and `rangeEnd` name\n * the two inputs and the range's ends in the calendar, `rangePreviewEnd`\n * describes the day a pending range would end on, `rangeSeparator` sits\n * between the inputs, and `chooseDateRange` names the launcher and the\n * popover.\n */\n labels?: PickerLabels;\n /**\n * Form field name. Two hidden inputs submit the range as `YYYY-MM-DD`,\n * named `name[start]` and `name[end]`, in every mode. The visible inputs\n * carry no name.\n */\n name?: string;\n /** Name of the hidden input carrying the start, in place of `name[start]`. */\n startName?: string;\n /** Name of the hidden input carrying the end, in place of `name[end]`. */\n endName?: string;\n /** Form id the hidden inputs belong to. */\n form?: string;\n /**\n * Mark both visible inputs required, so a form won't submit with either\n * end empty. An `inline` calendar has no visible input, so it is not\n * checked there.\n */\n required?: boolean;\n /** Id of the start input. The end input takes `${id}-end`. */\n id?: string;\n}\n\n/**\n * Raw DateRangeInput: the two inputs and the popover calendar without\n * Field/Control wrapping. Use `DateRangeInput` for the convenience wrapper.\n *\n * @function\n * @param {DateRangeInputBaseProps} props\n * @returns {JSX.Element}\n */\nexport const DateRangeInputBase = forwardRef<\n HTMLInputElement,\n DateRangeInputBaseProps\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 = true,\n position = 'bottom-left',\n appendToBody = false,\n color,\n size,\n isRounded,\n shouldDisableDate,\n unselectableDates,\n allowDisabledInRange = false,\n firstDayOfWeek = 0,\n dayNames,\n monthNames,\n nearbyMonthDays = true,\n iconLeftName: _iconLeftName,\n triggerIcon: triggerIconProp,\n triggerIconName = 'chevron-down',\n labels,\n name,\n startName,\n endName,\n form,\n required,\n id,\n className,\n onFocus,\n onFocusCapture,\n ...rest\n } = props;\n // The launcher gives way to the loading spinner of a Control this sits in.\n const controlLoading = useControlLoading();\n const triggerIcon = triggerIconProp ?? !controlLoading;\n\n const t = mergeLabels(labels);\n const resolvedFormat = format ?? DEFAULT_DATE_FORMAT;\n\n const isControlled = controlledValue !== undefined;\n const [internalValue, setInternalValue] = useState<DateRangeValue>(\n defaultValue ?? EMPTY_RANGE\n );\n const range = isControlled ? controlledValue : internalValue;\n const [start, end] = range;\n\n // Nothing before year 1 is in range, as in HTML's date inputs.\n const lowerBound = useMemo(() => floorMin(min), [min]);\n\n const [focusedDate, setFocusedDate] = useState<Date>(() =>\n clampDate(start ?? end ?? new Date(), lowerBound, max)\n );\n // Re-clamp the focused day if the bounds change after mount, so the\n // calendar never shows a month outside them.\n useEffect(() => {\n setFocusedDate(prev => clampDate(prev, lowerBound, max));\n }, [lowerBound, max]);\n\n const [open, setOpenState] = useState(false);\n const [startText, setStartText] = useState(() =>\n start ? formatDate(start, resolvedFormat, locale) : ''\n );\n const [endText, setEndText] = useState(() =>\n end ? formatDate(end, resolvedFormat, locale) : ''\n );\n // Each input shows its end of the range as it changes from outside.\n useEffect(() => {\n setStartText(start ? formatDate(start, resolvedFormat, locale) : '');\n }, [start, resolvedFormat, locale]);\n useEffect(() => {\n setEndText(end ? formatDate(end, resolvedFormat, locale) : '');\n }, [end, resolvedFormat, locale]);\n\n const containerRef = useRef<HTMLDivElement>(null);\n const startRef = useRef<HTMLInputElement>(null);\n const endRef = useRef<HTMLInputElement>(null);\n const reactId = useId();\n const popoverId = id ? `${id}-popover` : `picker-${reactId}`;\n\n const { bulmaHelperClasses, rest: cleanRest } = useBulmaClasses(rest);\n\n const { shouldUseNative } = useNativeMobilePicker({\n force: mobileNative === 'auto' ? undefined : mobileNative,\n });\n const useNative = !inline && shouldUseNative;\n\n // The root borrows DateInput's container class, which places the launcher\n // and sizes a Control's icons around the field.\n const containerClass = usePrefixedClassNames(\n 'daterangeinput',\n 'dateinput-container'\n );\n const fieldClass = usePrefixedClassNames('input', 'daterangeinput-field', {\n [`is-${color}`]: !!color,\n [`is-${size}`]: !!size,\n 'is-rounded': isRounded,\n 'is-disabled': disabled,\n });\n const inputClass = usePrefixedClassNames('daterangeinput-input');\n const separatorClass = usePrefixedClassNames('daterangeinput-separator');\n const triggerClass = usePrefixedClassNames('dateinput-trigger');\n\n // What the latest request asked for, so a second request in the same event\n // sees it before React renders. The callbacks fire here rather than in a\n // state updater, which StrictMode calls twice.\n const requestedOpenRef = useRef(false);\n const setOpen = useCallback(\n (next: boolean) => {\n if (requestedOpenRef.current === next) return;\n requestedOpenRef.current = next;\n setOpenState(next);\n if (next) onOpen?.();\n else onClose?.();\n },\n [onOpen, onClose]\n );\n\n // Focus that moves inside the field, from one input to the other or from\n // the launcher, is not focus arriving, so it opens nothing. Set as the\n // focus is captured on the way in, and cleared once the input has handled\n // it, so a click that follows still opens the popover.\n const focusFromInsideRef = useRef(false);\n const handleFocusCapture = (e: React.FocusEvent<HTMLDivElement>) => {\n const from = e.relatedTarget as Node | null;\n focusFromInsideRef.current = !!from && e.currentTarget.contains(from);\n onFocusCapture?.(e);\n };\n const handleFocus = (e: React.FocusEvent<HTMLDivElement>) => {\n focusFromInsideRef.current = false;\n onFocus?.(e);\n };\n const requestOpen = useCallback(\n (next: boolean) => {\n if (next && focusFromInsideRef.current) return;\n setOpen(next);\n },\n [setOpen]\n );\n\n const commitRange = useCallback(\n (next: DateRangeValue) => {\n if (!isControlled) setInternalValue(next);\n onChange?.(next);\n },\n [isControlled, onChange]\n );\n\n const constraints = useMemo(\n () => ({ shouldDisableDate, unselectableDates }),\n [shouldDisableDate, unselectableDates]\n );\n // A day the calendar disables: shouldDisableDate or unselectableDates.\n // Typing and the native inputs check the bounds alongside it.\n const isBlockedDay = useCallback(\n (d: Date) =>\n !!shouldDisableDate?.(d) ||\n !!unselectableDates?.some(u => isSameDay(u, d)),\n [shouldDisableDate, unselectableDates]\n );\n // An end the range can take: it is not disabled, and it closes a range\n // from the start, which it can't when it comes first or, unless allowed,\n // reaches over a disabled day.\n const isBlockedEnd = useCallback(\n (d: Date) =>\n isBlockedDay(d) ||\n (!!start && !canCloseRange(start, d, constraints, allowDisabledInRange)),\n [isBlockedDay, start, constraints, allowDisabledInRange]\n );\n\n // A new start keeps the end only while the two still make a range, so a\n // start moved past the end, or over a disabled day before it, clears it.\n const commitStart = useCallback(\n (next: Date | null) => {\n const keepsEnd =\n !next ||\n !end ||\n canCloseRange(next, end, constraints, allowDisabledInRange);\n commitRange([next, keepsEnd ? end : null]);\n if (next) setFocusedDate(next);\n },\n [end, constraints, allowDisabledInRange, commitRange]\n );\n // Every digit typed into the start commits, so a start passes through\n // values on its way to the one being typed. The first digits of a year make\n // a start centuries back, which can't keep the end once a disabled day may\n // lie between. Such a value waits for the segment's next digit rather than\n // clearing an end the finished start may keep.\n const startCostsEnd = useCallback(\n (d: Date) =>\n !!end && !canCloseRange(d, end, constraints, allowDisabledInRange),\n [end, constraints, allowDisabledInRange]\n );\n const commitEnd = useCallback(\n (next: Date | null) => {\n commitRange([start, next]);\n if (next) setFocusedDate(next);\n },\n [start, commitRange]\n );\n\n const handleRangeSelect = useCallback(\n (from: Date, to: Date) => {\n commitRange([from, to]);\n setFocusedDate(to);\n if (closeOnSelect) setOpen(false);\n },\n [commitRange, closeOnSelect, setOpen]\n );\n\n const tryParse = useCallback(\n (s: string): Date | null => {\n const trimmed = s.trim();\n if (!trimmed) return null;\n const fmt = typeof format === 'string' ? format : undefined;\n return parse\n ? parse(trimmed)\n : parseDate(trimmed, fmt ?? DEFAULT_DATE_FORMAT, locale);\n },\n [parse, format, locale]\n );\n\n // Typing into an empty end starts from the start, so only what differs\n // needs typing; an empty start starts from today.\n const makeEndBase = useCallback(\n () => (start ? startOfDay(start) : today()),\n [start]\n );\n\n // Where focus goes back as the popover closes: the input focused last,\n // which is the one that opened it unless the launcher did, or the start\n // input before either has had focus.\n const openerRef = useRef<HTMLInputElement | null>(null);\n const restoreFocusRef = useMemo(\n () => ({\n get current() {\n return openerRef.current ?? startRef.current;\n },\n }),\n []\n );\n\n const shared = {\n format: resolvedFormat,\n formatFn: formatDate,\n tryParse,\n locale,\n min: lowerBound,\n max,\n disabled,\n readOnly,\n editable,\n popover,\n openOnFocus,\n closeOnSelect,\n isOpen: open,\n setOpen: requestOpen,\n };\n // Each input is its own picker field. Its blur counts focus leaving it,\n // even for the other input, so text typed into one is read as focus moves\n // to the other.\n const { inputHandlers: startHandlers } = useSegmentedEntry({\n ...shared,\n value: start,\n commitValue: commitStart,\n text: startText,\n setText: setStartText,\n makeBaseDate: today,\n isBlocked: isBlockedDay,\n isUnfinishedBlocked: startCostsEnd,\n inputRef: startRef,\n containerRef: startRef,\n onFocus: () => {\n openerRef.current = startRef.current;\n },\n });\n const { inputHandlers: endHandlers } = useSegmentedEntry({\n ...shared,\n value: end,\n commitValue: commitEnd,\n text: endText,\n setText: setEndText,\n makeBaseDate: makeEndBase,\n isBlocked: isBlockedEnd,\n inputRef: endRef,\n containerRef: endRef,\n onFocus: () => {\n openerRef.current = endRef.current;\n },\n });\n\n const combinedRef = useCallback(\n (node: HTMLInputElement | null) => {\n (startRef 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 = node;\n },\n [ref]\n );\n\n const handlePopoverClose = useCallback(() => setOpen(false), [setOpen]);\n\n const startField = startName ?? (name ? `${name}[start]` : undefined);\n const endField = endName ?? (name ? `${name}[end]` : undefined);\n const hiddenInputs = (\n <>\n {startField && (\n <input\n type=\"hidden\"\n name={startField}\n form={form}\n value={isoDay(start)}\n />\n )}\n {endField && (\n <input type=\"hidden\" name={endField} form={form} value={isoDay(end)} />\n )}\n </>\n );\n\n const separator = (\n <span className={separatorClass} aria-hidden=\"true\">\n {t.rangeSeparator}\n </span>\n );\n\n // Native mobile path: two <input type=\"date\">s, held to the same rules as\n // typing. A change the rules refuse leaves the input showing the range.\n if (useNative) {\n const nativeChange =\n (commit: (d: Date | null) => void, isBlocked: (d: Date) => boolean) =>\n (e: React.ChangeEvent<HTMLInputElement>) => {\n // An empty value is the end cleared. A date input gives nothing else\n // that doesn't read as a date.\n const parsed = fromIsoValue(e.target.value, 'day');\n if (!parsed) commit(null);\n else if (isWithin(parsed, lowerBound, max) && !isBlocked(parsed)) {\n commit(parsed);\n }\n };\n const minIso = min ? isoDay(lowerBound) : undefined;\n const maxIso = max ? isoDay(max) : undefined;\n return (\n <div\n {...cleanRest}\n ref={containerRef}\n role=\"group\"\n className={classNames(containerClass, bulmaHelperClasses, className)}\n onFocus={onFocus}\n onFocusCapture={onFocusCapture}\n >\n <div className={fieldClass}>\n <input\n ref={combinedRef}\n type=\"date\"\n id={id}\n aria-label={t.rangeStart}\n className={inputClass}\n value={isoDay(start)}\n onChange={nativeChange(commitStart, isBlockedDay)}\n min={minIso}\n max={maxIso}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n />\n {separator}\n <input\n ref={endRef}\n type=\"date\"\n id={id ? `${id}-end` : undefined}\n aria-label={t.rangeEnd}\n className={inputClass}\n value={isoDay(end)}\n onChange={nativeChange(commitEnd, isBlockedEnd)}\n min={start ? isoDay(start) : minIso}\n max={maxIso}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n />\n </div>\n {hiddenInputs}\n </div>\n );\n }\n\n const calendar = (\n <Calendar\n range={range}\n onRangeSelect={handleRangeSelect}\n allowDisabledInRange={allowDisabledInRange}\n focusedDate={focusedDate}\n onFocusedDateChange={setFocusedDate}\n min={min}\n max={max}\n shouldDisableDate={shouldDisableDate}\n unselectableDates={unselectableDates}\n firstDayOfWeek={firstDayOfWeek}\n locale={locale}\n dayNames={dayNames}\n monthNames={monthNames}\n nearbyMonthDays={nearbyMonthDays}\n color={color}\n size={size}\n // The popover panel takes `popoverId`, so the calendar inside it takes\n // one of its own. Inline there is no panel.\n id={inline ? popoverId : `${popoverId}-cal`}\n autoFocusCell={open}\n labels={labels}\n />\n );\n\n if (inline) {\n return (\n <div\n {...cleanRest}\n ref={containerRef}\n role=\"group\"\n className={classNames(containerClass, bulmaHelperClasses, className)}\n onFocus={onFocus}\n onFocusCapture={onFocusCapture}\n >\n {calendar}\n {hiddenInputs}\n </div>\n );\n }\n\n const canOpen = !!popover && !disabled && !readOnly;\n const inputReadOnly = !!readOnly || !editable;\n\n // The field reads as one text box, so a press on it that misses both\n // inputs, on its padding, the gap or the separator, goes to the nearer\n // input and does what a press on that input does.\n const handleFieldMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\n const startInput = startRef.current as HTMLInputElement;\n const endInput = endRef.current as HTMLInputElement;\n if (disabled || e.button !== 0) return;\n if (e.target === startInput || e.target === endInput) return;\n e.preventDefault();\n const middle =\n (startInput.getBoundingClientRect().right +\n endInput.getBoundingClientRect().left) /\n 2;\n (e.clientX < middle ? startInput : endInput).focus();\n if (openOnFocus && canOpen) requestOpen(true);\n };\n const comboboxProps = {\n type: 'text',\n role: 'combobox',\n 'aria-haspopup': 'dialog' as const,\n 'aria-expanded': open,\n 'aria-controls': popoverId,\n autoComplete: 'off',\n className: inputClass,\n placeholder,\n disabled,\n readOnly: inputReadOnly,\n required,\n };\n\n return (\n <div\n {...cleanRest}\n ref={containerRef}\n role=\"group\"\n className={classNames(containerClass, bulmaHelperClasses, className)}\n onFocus={handleFocus}\n onFocusCapture={handleFocusCapture}\n >\n <div className={fieldClass} onMouseDown={handleFieldMouseDown}>\n <input\n {...comboboxProps}\n ref={combinedRef}\n id={id}\n aria-label={t.rangeStart}\n value={startText}\n {...startHandlers}\n />\n {separator}\n <input\n {...comboboxProps}\n ref={endRef}\n id={id ? `${id}-end` : undefined}\n aria-label={t.rangeEnd}\n value={endText}\n {...endHandlers}\n />\n </div>\n {popover && triggerIcon && (\n <button\n type=\"button\"\n className={triggerClass}\n // Disabled whenever the popover can't open, so a click can.\n onClick={() => setOpen(!open)}\n disabled={!canOpen}\n aria-label={t.chooseDateRange}\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={handlePopoverClose}\n anchorRef={containerRef}\n position={position}\n appendToBody={appendToBody}\n ariaLabel={t.chooseDateRange}\n id={popoverId}\n restoreFocusRef={restoreFocusRef}\n initialFocusSelector={CALENDAR_FOCUSED_CELL}\n >\n {calendar}\n </PickerPopover>\n )}\n {hiddenInputs}\n </div>\n );\n});\n\nDateRangeInputBase.displayName = 'DateRangeInputBase';\n\nexport default DateRangeInputBase;\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DateRangeInputBase.js","sources":["../../../src/form/DateRangeInputBase.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 DateRangeValue,\n DayOfWeek,\n PickerLabels,\n PickerPosition,\n mergeLabels,\n} from './_pickerInternals/pickerTypes';\nimport {\n DEFAULT_DATE_FORMAT,\n DateFormatOption,\n formatDate,\n fromIsoValue,\n parseDate,\n toIsoValue,\n} from './_pickerInternals/formatters';\nimport {\n canCloseRange,\n clampDate,\n floorMin,\n isSameDay,\n isWithin,\n startOfDay,\n} from './_pickerInternals/dateUtils';\nimport { Calendar, CALENDAR_FOCUSED_CELL } from './_pickerInternals/Calendar';\nimport { PickerPopover } from './_pickerInternals/PickerPopover';\nimport { useNativeMobilePicker } from './_pickerInternals/useNativeMobilePicker';\nimport { useSegmentedEntry } from './_pickerInternals/useSegmentedEntry';\nimport { useControlLoading } from './controlLoading';\nimport { useAutoLabelledBy } from './useAutoLabelId';\nimport { Icon } from '../elements/Icon';\n\nexport type { DateRangeValue };\n\nconst EMPTY_RANGE: DateRangeValue = [null, null];\n\n/** A range's end as the form and the native inputs carry it. */\nconst isoDay = (d: Date | null): string => (d ? toIsoValue(d, 'day') : '');\n\n/** Today at local midnight, where typing into an empty end starts. */\nconst today = (): Date => startOfDay(new Date());\n\n/**\n * Props for the raw DateRangeInput base. Use the higher-level\n * `DateRangeInput` for Field/Control composition; `DateRangeInputBase` is the\n * two inputs and the popover only.\n */\nexport interface DateRangeInputBaseProps\n extends\n Omit<\n React.HTMLAttributes<HTMLDivElement>,\n 'defaultValue' | 'onChange' | 'color' | 'placeholder' | 'popover'\n >,\n Omit<BulmaClassesProps, 'color'> {\n /**\n * Controlled range, start first. Either end may be `null`, and\n * `[null, null]` is empty.\n */\n value?: DateRangeValue;\n /** Initial range for uncontrolled usage. */\n defaultValue?: DateRangeValue;\n /**\n * Fired when the range changes, with the start first. Typing commits one\n * end at a time, so a range half typed arrives as `[start, null]`. The\n * calendar commits only a finished range: its first pick marks the start\n * inside the calendar and its second commits both ends in one call. The\n * range stays ordered, so the end is never before the start.\n */\n onChange?: (range: DateRangeValue) => void;\n /** Fired when the popover opens. */\n onOpen?: () => void;\n /** Fired when the popover closes. */\n onClose?: () => void;\n /**\n * Earliest selectable date, for either end. A `min` before year 1 is raised\n * to 1 January of year 1, where the range starts without one too.\n */\n min?: Date;\n /** Latest selectable date, for either end. */\n max?: Date;\n /** Disable both inputs and the launcher. */\n disabled?: boolean;\n /** Make both inputs read-only and keep the popover closed. */\n readOnly?: boolean;\n /** Placeholder text, shown in both inputs while they are empty. */\n placeholder?: string;\n /**\n * Token format string or `Intl.DateTimeFormat` options, used by both\n * inputs.\n * @defaultValue 'YYYY-MM-DD'\n */\n format?: DateFormatOption;\n /**\n * Custom parser (use when `format` is `Intl.DateTimeFormatOptions`).\n * Enter and leaving an input call it only if the user changed its text.\n */\n parse?: (s: string) => Date | null;\n /** BCP-47 locale tag for day/month names and Intl formatting. */\n locale?: string;\n /**\n * Render the calendar inline, with no inputs and no popover. The hidden\n * form inputs still carry the range.\n */\n inline?: boolean;\n /**\n * Use two native `<input type=\"date\">`s on coarse-pointer, small-viewport\n * devices (`'auto'`), always (`true`) or never (`false`). The end input's\n * `min` follows the start, and a change goes through the same rules as\n * typing.\n */\n mobileNative?: boolean | 'auto';\n /** Allow segmented keyboard typing in both inputs. `false` makes the field picker-only. */\n editable?: boolean;\n /** Whether the calendar popover exists. `false` makes the field input-only. */\n popover?: boolean;\n /**\n * Open the popover when focus arrives in the field. Moving focus between\n * the two inputs, or back from the launcher, leaves it closed, and so does\n * the focus a closing popover hands back. A click on either input opens it.\n * With it off, the launcher or Alt+ArrowDown opens it.\n */\n openOnFocus?: boolean;\n /**\n * Close the popover once the range is picked. The first pick, which only\n * marks the start, never closes it.\n */\n closeOnSelect?: boolean;\n /** Popover anchor position relative to the field. */\n position?: PickerPosition;\n /** Render the popover into `document.body` via portal. */\n appendToBody?: boolean;\n /**\n * Bulma color modifier for the field, also carried by the calendar, where it\n * colors the range's ends and the band between them.\n */\n color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n /** Size variant. */\n size?: 'small' | 'medium' | 'large';\n /** Render the field with rounded corners. */\n isRounded?: boolean;\n /**\n * Predicate to disable specific dates (e.g. weekends). A disabled day can\n * be neither end, typing rejects it, and a range can't include one unless\n * `allowDisabledInRange` is set.\n */\n shouldDisableDate?: (d: Date) => boolean;\n /** Convenience array of disabled dates; merged with `shouldDisableDate`. Matched by calendar day. */\n unselectableDates?: Date[];\n /**\n * Let a range include days that `shouldDisableDate` or `unselectableDates`\n * disable, such as a stay over a night with no check-ins. Its ends still\n * can't be such days. Off, a pick in the calendar past a disabled day\n * starts a new range there, typing refuses an end past one, and a start\n * typed with one before the end clears the end. Finding one walks the days\n * between, so off, a span too long to walk is refused as well.\n */\n allowDisabledInRange?: boolean;\n /** Day the week starts on (0 = Sunday). */\n firstDayOfWeek?: DayOfWeek;\n /** Override the 7 day-name labels (in calendar order, post-rotation). */\n dayNames?: string[];\n /** Override the 12 month-name labels. */\n monthNames?: string[];\n /** Show dimmed dates from adjacent months in the grid. */\n nearbyMonthDays?: boolean;\n /** Decorative left icon glyph for the wrapping `Control` (shown by default). Set `''` to hide. */\n iconLeftName?: string;\n /**\n * Show a clickable launcher button on the right that toggles the popover.\n * Hidden by default while a `Control` it sits in shows its `isLoading`\n * spinner, which shares that right edge.\n * @defaultValue true\n */\n triggerIcon?: boolean;\n /** Glyph for the right launcher button. */\n triggerIconName?: string;\n /**\n * Optional translatable string overrides. `rangeStart` and `rangeEnd` name\n * the two inputs and the range's ends in the calendar, `rangePreviewEnd`\n * describes the day a pending range would end on, `rangeSeparator` sits\n * between the inputs, and `chooseDateRange` names the launcher and the\n * popover.\n */\n labels?: PickerLabels;\n /**\n * Form field name. Two hidden inputs submit the range as `YYYY-MM-DD`,\n * named `name[start]` and `name[end]`, in every mode. The visible inputs\n * carry no name.\n */\n name?: string;\n /** Name of the hidden input carrying the start, in place of `name[start]`. */\n startName?: string;\n /** Name of the hidden input carrying the end, in place of `name[end]`. */\n endName?: string;\n /** Form id the hidden inputs belong to. */\n form?: string;\n /**\n * Mark both visible inputs required, so a form won't submit with either\n * end empty. An `inline` calendar has no visible input, so it is not\n * checked there.\n */\n required?: boolean;\n /** Id of the start input. The end input takes `${id}-end`. */\n id?: string;\n}\n\n/**\n * Raw DateRangeInput: the two inputs and the popover calendar without\n * Field/Control wrapping. Use `DateRangeInput` for the convenience wrapper.\n * Composed in a labeled `Field`, its `role=\"group\"` root points\n * `aria-labelledby` at that `Field`'s label, `inline` too, as the wrapper's\n * does, and each input keeps its own name. An `aria-label` or\n * `aria-labelledby` you give it wins over the label, and an `aria-labelledby`\n * key counts even when undefined, since it is spread over the group's own.\n *\n * @function\n * @param {DateRangeInputBaseProps} props\n * @returns {JSX.Element}\n */\nexport const DateRangeInputBase = forwardRef<\n HTMLInputElement,\n DateRangeInputBaseProps\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 = true,\n position = 'bottom-left',\n appendToBody = false,\n color,\n size,\n isRounded,\n shouldDisableDate,\n unselectableDates,\n allowDisabledInRange = false,\n firstDayOfWeek = 0,\n dayNames,\n monthNames,\n nearbyMonthDays = true,\n iconLeftName: _iconLeftName,\n triggerIcon: triggerIconProp,\n triggerIconName = 'chevron-down',\n labels,\n name,\n startName,\n endName,\n form,\n required,\n id,\n className,\n onFocus,\n onFocusCapture,\n ...rest\n } = props;\n // The launcher gives way to the loading spinner of a Control this sits in.\n const controlLoading = useControlLoading();\n const triggerIcon = triggerIconProp ?? !controlLoading;\n\n const t = mergeLabels(labels);\n const resolvedFormat = format ?? DEFAULT_DATE_FORMAT;\n\n const isControlled = controlledValue !== undefined;\n const [internalValue, setInternalValue] = useState<DateRangeValue>(\n defaultValue ?? EMPTY_RANGE\n );\n const range = isControlled ? controlledValue : internalValue;\n const [start, end] = range;\n\n // Nothing before year 1 is in range, as in HTML's date inputs.\n const lowerBound = useMemo(() => floorMin(min), [min]);\n\n const [focusedDate, setFocusedDate] = useState<Date>(() =>\n clampDate(start ?? end ?? new Date(), lowerBound, max)\n );\n // Re-clamp the focused day if the bounds change after mount, so the\n // calendar never shows a month outside them.\n useEffect(() => {\n setFocusedDate(prev => clampDate(prev, lowerBound, max));\n }, [lowerBound, max]);\n\n const [open, setOpenState] = useState(false);\n const [startText, setStartText] = useState(() =>\n start ? formatDate(start, resolvedFormat, locale) : ''\n );\n const [endText, setEndText] = useState(() =>\n end ? formatDate(end, resolvedFormat, locale) : ''\n );\n // Each input shows its end of the range as it changes from outside.\n useEffect(() => {\n setStartText(start ? formatDate(start, resolvedFormat, locale) : '');\n }, [start, resolvedFormat, locale]);\n useEffect(() => {\n setEndText(end ? formatDate(end, resolvedFormat, locale) : '');\n }, [end, resolvedFormat, locale]);\n\n const containerRef = useRef<HTMLDivElement>(null);\n const startRef = useRef<HTMLInputElement>(null);\n const endRef = useRef<HTMLInputElement>(null);\n const reactId = useId();\n const popoverId = id ? `${id}-popover` : `picker-${reactId}`;\n\n const { bulmaHelperClasses, rest: cleanRest } = useBulmaClasses(rest);\n // Two inputs can't share a labeled Field's `for`, so inside one the group\n // points `aria-labelledby` at that Field's label, as `DateRangeInput`\n // does, in every mode. A name the caller gave the group wins, and so does\n // the `aria-labelledby` that wrapper always passes, so it decides there.\n const { ariaLabelledBy } = useAutoLabelledBy({\n label: undefined,\n rendersLabel: false,\n callerProps: rest,\n });\n\n const { shouldUseNative } = useNativeMobilePicker({\n force: mobileNative === 'auto' ? undefined : mobileNative,\n });\n const useNative = !inline && shouldUseNative;\n\n // The root borrows DateInput's container class, which places the launcher\n // and sizes a Control's icons around the field.\n const containerClass = usePrefixedClassNames(\n 'daterangeinput',\n 'dateinput-container'\n );\n const fieldClass = usePrefixedClassNames('input', 'daterangeinput-field', {\n [`is-${color}`]: !!color,\n [`is-${size}`]: !!size,\n 'is-rounded': isRounded,\n 'is-disabled': disabled,\n });\n const inputClass = usePrefixedClassNames('daterangeinput-input');\n const separatorClass = usePrefixedClassNames('daterangeinput-separator');\n const triggerClass = usePrefixedClassNames('dateinput-trigger');\n\n // What the latest request asked for, so a second request in the same event\n // sees it before React renders. The callbacks fire here rather than in a\n // state updater, which StrictMode calls twice.\n const requestedOpenRef = useRef(false);\n const setOpen = useCallback(\n (next: boolean) => {\n if (requestedOpenRef.current === next) return;\n requestedOpenRef.current = next;\n setOpenState(next);\n if (next) onOpen?.();\n else onClose?.();\n },\n [onOpen, onClose]\n );\n\n // Focus that moves inside the field, from one input to the other or from\n // the launcher, is not focus arriving, so it opens nothing. Set as the\n // focus is captured on the way in, and cleared once the input has handled\n // it, so a click that follows still opens the popover.\n const focusFromInsideRef = useRef(false);\n const handleFocusCapture = (e: React.FocusEvent<HTMLDivElement>) => {\n const from = e.relatedTarget as Node | null;\n focusFromInsideRef.current = !!from && e.currentTarget.contains(from);\n onFocusCapture?.(e);\n };\n const handleFocus = (e: React.FocusEvent<HTMLDivElement>) => {\n focusFromInsideRef.current = false;\n onFocus?.(e);\n };\n const requestOpen = useCallback(\n (next: boolean) => {\n if (next && focusFromInsideRef.current) return;\n setOpen(next);\n },\n [setOpen]\n );\n\n const commitRange = useCallback(\n (next: DateRangeValue) => {\n if (!isControlled) setInternalValue(next);\n onChange?.(next);\n },\n [isControlled, onChange]\n );\n\n const constraints = useMemo(\n () => ({ shouldDisableDate, unselectableDates }),\n [shouldDisableDate, unselectableDates]\n );\n // A day the calendar disables: shouldDisableDate or unselectableDates.\n // Typing and the native inputs check the bounds alongside it.\n const isBlockedDay = useCallback(\n (d: Date) =>\n !!shouldDisableDate?.(d) ||\n !!unselectableDates?.some(u => isSameDay(u, d)),\n [shouldDisableDate, unselectableDates]\n );\n // An end the range can take: it is not disabled, and it closes a range\n // from the start, which it can't when it comes first or, unless allowed,\n // reaches over a disabled day.\n const isBlockedEnd = useCallback(\n (d: Date) =>\n isBlockedDay(d) ||\n (!!start && !canCloseRange(start, d, constraints, allowDisabledInRange)),\n [isBlockedDay, start, constraints, allowDisabledInRange]\n );\n\n // A new start keeps the end only while the two still make a range, so a\n // start moved past the end, or over a disabled day before it, clears it.\n const commitStart = useCallback(\n (next: Date | null) => {\n const keepsEnd =\n !next ||\n !end ||\n canCloseRange(next, end, constraints, allowDisabledInRange);\n commitRange([next, keepsEnd ? end : null]);\n if (next) setFocusedDate(next);\n },\n [end, constraints, allowDisabledInRange, commitRange]\n );\n // Every digit typed into the start commits, so a start passes through\n // values on its way to the one being typed. The first digits of a year make\n // a start centuries back, which can't keep the end once a disabled day may\n // lie between. Such a value waits for the segment's next digit rather than\n // clearing an end the finished start may keep.\n const startCostsEnd = useCallback(\n (d: Date) =>\n !!end && !canCloseRange(d, end, constraints, allowDisabledInRange),\n [end, constraints, allowDisabledInRange]\n );\n const commitEnd = useCallback(\n (next: Date | null) => {\n commitRange([start, next]);\n if (next) setFocusedDate(next);\n },\n [start, commitRange]\n );\n\n const handleRangeSelect = useCallback(\n (from: Date, to: Date) => {\n commitRange([from, to]);\n setFocusedDate(to);\n if (closeOnSelect) setOpen(false);\n },\n [commitRange, closeOnSelect, setOpen]\n );\n\n const tryParse = useCallback(\n (s: string): Date | null => {\n const trimmed = s.trim();\n if (!trimmed) return null;\n const fmt = typeof format === 'string' ? format : undefined;\n return parse\n ? parse(trimmed)\n : parseDate(trimmed, fmt ?? DEFAULT_DATE_FORMAT, locale);\n },\n [parse, format, locale]\n );\n\n // Typing into an empty end starts from the start, so only what differs\n // needs typing; an empty start starts from today.\n const makeEndBase = useCallback(\n () => (start ? startOfDay(start) : today()),\n [start]\n );\n\n // Where focus goes back as the popover closes: the input focused last,\n // which is the one that opened it unless the launcher did, or the start\n // input before either has had focus.\n const openerRef = useRef<HTMLInputElement | null>(null);\n const restoreFocusRef = useMemo(\n () => ({\n get current() {\n return openerRef.current ?? startRef.current;\n },\n }),\n []\n );\n\n const shared = {\n format: resolvedFormat,\n formatFn: formatDate,\n tryParse,\n locale,\n min: lowerBound,\n max,\n disabled,\n readOnly,\n editable,\n popover,\n openOnFocus,\n closeOnSelect,\n isOpen: open,\n setOpen: requestOpen,\n };\n // Each input is its own picker field. Its blur counts focus leaving it,\n // even for the other input, so text typed into one is read as focus moves\n // to the other.\n const { inputHandlers: startHandlers } = useSegmentedEntry({\n ...shared,\n value: start,\n commitValue: commitStart,\n text: startText,\n setText: setStartText,\n makeBaseDate: today,\n isBlocked: isBlockedDay,\n isUnfinishedBlocked: startCostsEnd,\n inputRef: startRef,\n containerRef: startRef,\n onFocus: () => {\n openerRef.current = startRef.current;\n },\n });\n const { inputHandlers: endHandlers } = useSegmentedEntry({\n ...shared,\n value: end,\n commitValue: commitEnd,\n text: endText,\n setText: setEndText,\n makeBaseDate: makeEndBase,\n isBlocked: isBlockedEnd,\n inputRef: endRef,\n containerRef: endRef,\n onFocus: () => {\n openerRef.current = endRef.current;\n },\n });\n\n const combinedRef = useCallback(\n (node: HTMLInputElement | null) => {\n (startRef 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 = node;\n },\n [ref]\n );\n\n const handlePopoverClose = useCallback(() => setOpen(false), [setOpen]);\n\n const startField = startName ?? (name ? `${name}[start]` : undefined);\n const endField = endName ?? (name ? `${name}[end]` : undefined);\n const hiddenInputs = (\n <>\n {startField && (\n <input\n type=\"hidden\"\n name={startField}\n form={form}\n value={isoDay(start)}\n />\n )}\n {endField && (\n <input type=\"hidden\" name={endField} form={form} value={isoDay(end)} />\n )}\n </>\n );\n\n const separator = (\n <span className={separatorClass} aria-hidden=\"true\">\n {t.rangeSeparator}\n </span>\n );\n\n // Native mobile path: two <input type=\"date\">s, held to the same rules as\n // typing. A change the rules refuse leaves the input showing the range.\n if (useNative) {\n const nativeChange =\n (commit: (d: Date | null) => void, isBlocked: (d: Date) => boolean) =>\n (e: React.ChangeEvent<HTMLInputElement>) => {\n // An empty value is the end cleared. A date input gives nothing else\n // that doesn't read as a date.\n const parsed = fromIsoValue(e.target.value, 'day');\n if (!parsed) commit(null);\n else if (isWithin(parsed, lowerBound, max) && !isBlocked(parsed)) {\n commit(parsed);\n }\n };\n const minIso = min ? isoDay(lowerBound) : undefined;\n const maxIso = max ? isoDay(max) : undefined;\n return (\n <div\n aria-labelledby={ariaLabelledBy}\n {...cleanRest}\n ref={containerRef}\n role=\"group\"\n className={classNames(containerClass, bulmaHelperClasses, className)}\n onFocus={onFocus}\n onFocusCapture={onFocusCapture}\n >\n <div className={fieldClass}>\n <input\n ref={combinedRef}\n type=\"date\"\n id={id}\n aria-label={t.rangeStart}\n className={inputClass}\n value={isoDay(start)}\n onChange={nativeChange(commitStart, isBlockedDay)}\n min={minIso}\n max={maxIso}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n />\n {separator}\n <input\n ref={endRef}\n type=\"date\"\n id={id ? `${id}-end` : undefined}\n aria-label={t.rangeEnd}\n className={inputClass}\n value={isoDay(end)}\n onChange={nativeChange(commitEnd, isBlockedEnd)}\n min={start ? isoDay(start) : minIso}\n max={maxIso}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n />\n </div>\n {hiddenInputs}\n </div>\n );\n }\n\n const calendar = (\n <Calendar\n range={range}\n onRangeSelect={handleRangeSelect}\n allowDisabledInRange={allowDisabledInRange}\n focusedDate={focusedDate}\n onFocusedDateChange={setFocusedDate}\n min={min}\n max={max}\n shouldDisableDate={shouldDisableDate}\n unselectableDates={unselectableDates}\n firstDayOfWeek={firstDayOfWeek}\n locale={locale}\n dayNames={dayNames}\n monthNames={monthNames}\n nearbyMonthDays={nearbyMonthDays}\n color={color}\n size={size}\n // The popover panel takes `popoverId`, so the calendar inside it takes\n // one of its own. Inline there is no panel.\n id={inline ? popoverId : `${popoverId}-cal`}\n autoFocusCell={open}\n labels={labels}\n />\n );\n\n if (inline) {\n return (\n <div\n aria-labelledby={ariaLabelledBy}\n {...cleanRest}\n ref={containerRef}\n role=\"group\"\n className={classNames(containerClass, bulmaHelperClasses, className)}\n onFocus={onFocus}\n onFocusCapture={onFocusCapture}\n >\n {calendar}\n {hiddenInputs}\n </div>\n );\n }\n\n const canOpen = !!popover && !disabled && !readOnly;\n const inputReadOnly = !!readOnly || !editable;\n\n // The field reads as one text box, so a press on it that misses both\n // inputs, on its padding, the gap or the separator, goes to the nearer\n // input and does what a press on that input does.\n const handleFieldMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\n const startInput = startRef.current as HTMLInputElement;\n const endInput = endRef.current as HTMLInputElement;\n if (disabled || e.button !== 0) return;\n if (e.target === startInput || e.target === endInput) return;\n e.preventDefault();\n const middle =\n (startInput.getBoundingClientRect().right +\n endInput.getBoundingClientRect().left) /\n 2;\n (e.clientX < middle ? startInput : endInput).focus();\n if (openOnFocus && canOpen) requestOpen(true);\n };\n const comboboxProps = {\n type: 'text',\n role: 'combobox',\n 'aria-haspopup': 'dialog' as const,\n 'aria-expanded': open,\n 'aria-controls': popoverId,\n autoComplete: 'off',\n className: inputClass,\n placeholder,\n disabled,\n readOnly: inputReadOnly,\n required,\n };\n\n return (\n <div\n aria-labelledby={ariaLabelledBy}\n {...cleanRest}\n ref={containerRef}\n role=\"group\"\n className={classNames(containerClass, bulmaHelperClasses, className)}\n onFocus={handleFocus}\n onFocusCapture={handleFocusCapture}\n >\n <div className={fieldClass} onMouseDown={handleFieldMouseDown}>\n <input\n {...comboboxProps}\n ref={combinedRef}\n id={id}\n aria-label={t.rangeStart}\n value={startText}\n {...startHandlers}\n />\n {separator}\n <input\n {...comboboxProps}\n ref={endRef}\n id={id ? `${id}-end` : undefined}\n aria-label={t.rangeEnd}\n value={endText}\n {...endHandlers}\n />\n </div>\n {popover && triggerIcon && (\n <button\n type=\"button\"\n className={triggerClass}\n // Disabled whenever the popover can't open, so a click can.\n onClick={() => setOpen(!open)}\n disabled={!canOpen}\n aria-label={t.chooseDateRange}\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={handlePopoverClose}\n anchorRef={containerRef}\n position={position}\n appendToBody={appendToBody}\n ariaLabel={t.chooseDateRange}\n id={popoverId}\n restoreFocusRef={restoreFocusRef}\n initialFocusSelector={CALENDAR_FOCUSED_CELL}\n >\n {calendar}\n </PickerPopover>\n )}\n {hiddenInputs}\n </div>\n );\n});\n\nDateRangeInputBase.displayName = 'DateRangeInputBase';\n\nexport default DateRangeInputBase;\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}
|
package/dist/esm/form/Field.js
CHANGED
|
@@ -122,8 +122,9 @@ const FieldComponent = ({ horizontal, grouped, hasAddons, narrow, label, labelSi
|
|
|
122
122
|
const targetId = label && !userWiredLabel && !grouped && !hasAddons
|
|
123
123
|
? generatedId
|
|
124
124
|
: undefined;
|
|
125
|
-
// A group control (Radios, Checkboxes, Rate, DateRangeInput
|
|
126
|
-
// that `for`, so it points `aria-labelledby` at the label
|
|
125
|
+
// A group control (Radios, Checkboxes, Rate, DateRangeInput and its base)
|
|
126
|
+
// cannot take that `for`, so it points `aria-labelledby` at the label
|
|
127
|
+
// itself (#939).
|
|
127
128
|
// The label gets an id whenever the association is on, unless the caller
|
|
128
129
|
// gave it one.
|
|
129
130
|
const labelId = labelProps?.id ?? (targetId ? `${targetId}-label` : undefined);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.js","sources":["../../../src/form/Field.tsx"],"sourcesContent":["import React, { useId, useMemo } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport {\n useBulmaClasses,\n BulmaClassesProps,\n validColors,\n} from '../helpers/useBulmaClasses';\nimport {\n FieldProvider,\n FieldLabelIdProvider,\n FieldLabelElementIdProvider,\n FieldLabelForProvider,\n useFieldLabelFor,\n} from './FormContext';\nimport { Control } from './Control';\n\n/**\n * Props for the Field component.\n */\nexport interface FieldProps\n extends\n React.HTMLAttributes<HTMLDivElement>,\n Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n /** Renders the field as horizontal (label and control side by side). */\n horizontal?: boolean;\n /** Group controls in a row (optionally centered, right, or multiline). */\n grouped?: boolean | 'centered' | 'right' | 'multiline';\n /** Group controls as addons (optionally centered or right-aligned). */\n hasAddons?: boolean | 'centered' | 'right';\n /** Constrains the field to its content's width (used inside horizontal field bodies). */\n narrow?: boolean;\n /** Field label, rendered above the widget. Automatically names the one control the Field holds: a composed `InputBase`, `SelectBase`, `TextAreaBase`, `DateInputBase`, `TimeInputBase` or `DateTimeInputBase` (an `inline` picker has no input, so it takes nothing), or a bestax input that renders a single input of its own (`Input`, `Select`, `TextArea`, `Numberinput`, `Slider`, `DateInput`, `TimeInput`, `DateTimeInput`, `Autocomplete`, `Taginput`, `File`), adopts a generated id that the label's `htmlFor` points at, and a group (`Radios`, `Checkboxes`, `Rate`, `DateRangeInput`) points `aria-labelledby` at the label's own id unless you gave the group an `aria-label` or `aria-labelledby`. A range `Slider` takes the id on its low thumb and also starts each thumb's name with the label through `aria-labelledby`, unless its `ariaLabel` names that thumb or its own `aria-label` or `aria-labelledby` takes the label's place. An `Autocomplete` also names its open suggestion list after the label through `aria-labelledby`. Nothing else takes the label: `Checkbox`, `Radio` and `Switch` are named by their own children. Only the single inputs take the `htmlFor`, so with a group or any other content it matches nothing. Pass `labelProps={{ htmlFor }}` to wire your own `id`, or `labelProps={{ htmlFor: undefined }}` to opt out. Skipped for `grouped`/`hasAddons` fields (multiple controls), and a nested `Field` starts its own scope, so a horizontal Field whose body holds an inner `Field` names the control there only when you wire it. Two controls in one plain labeled Field would both adopt the id, so give each an `id` of its own. */\n label?: React.ReactNode;\n /** Size for the label. */\n labelSize?: 'small' | 'normal' | 'medium' | 'large';\n /** Props for the label element. An explicit `htmlFor` key — even set to `undefined` — takes over the association. While the association is on, the label renders with the `id` given here, or a generated one, and a group control, a range `Slider`'s thumbs and an `Autocomplete`'s suggestion list point `aria-labelledby` at it. A label you take over gets no generated id, and no group points at it on its own. With an `id` here, though, a range `Slider` or an `Autocomplete` whose `id` your `htmlFor` names still points its thumbs or its suggestion list at it, in a `grouped` or `hasAddons` Field too. To point a group in an inner `Field` at this label by hand, pass that `id` with `htmlFor: undefined`, or the label keeps a generated `htmlFor` that nothing takes. */\n labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {\n [key: string]: unknown;\n };\n /** Text color for the field. */\n textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n /** Bulma color for the field. */\n color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n /** Background color for the field. */\n bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n /** Additional CSS classes. */\n className?: string;\n /** Field content. */\n children?: React.ReactNode;\n}\n\n/**\n * Props for the FieldLabel component.\n */\nexport interface FieldLabelProps\n extends\n React.HTMLAttributes<HTMLDivElement>,\n Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n /** Size for the field label. */\n size?: 'small' | 'normal' | 'medium' | 'large';\n /** Text color for the label. */\n textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n /** Bulma color for the label. */\n color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n /** Background color for the label. */\n bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n /** Additional CSS classes. */\n className?: string;\n /** Field label content. */\n children?: React.ReactNode;\n}\n\n/**\n * Props for the FieldBody component.\n */\nexport interface FieldBodyProps\n extends\n React.HTMLAttributes<HTMLDivElement>,\n Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n /** Text color for the field body. */\n textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n /** Bulma color for the field body. */\n color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n /** Background color for the field body. */\n bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n /** Additional CSS classes. */\n className?: string;\n /** Field body content. */\n children?: React.ReactNode;\n}\n\n/**\n * FieldLabel component for rendering a Bulma field label. It renders the\n * label column of a horizontal `Field` (a `div` with the `field-label` class),\n * not a `<label>`, so text placed straight in it names nothing. Put a `<label>`\n * with the `label` class inside it and point its `htmlFor` at the control's\n * `id`, or give the horizontal `Field` a `label` prop, which renders this\n * column and its `<label>` for you. A `<label>` you put here names the\n * control through its `htmlFor` alone: a range `Slider`'s thumbs and an\n * `Autocomplete`'s suggestion list point `aria-labelledby` at a `Field`'s\n * label only when its `label` prop renders it and it names the control.\n * Where it would not name the control on its own, as in an inner `Field`,\n * pass `labelProps={{ htmlFor, id }}` with a matching `id` on the control.\n *\n * @function\n * @param {FieldLabelProps} props - Props for the FieldLabel component.\n * @returns {JSX.Element} The rendered field label.\n *\n * @example\n * <FieldLabel size=\"normal\">\n * <label className=\"label\" htmlFor=\"name\">Name</label>\n * </FieldLabel>\n */\nexport const FieldLabel: React.FC<FieldLabelProps> = ({\n size,\n textColor,\n bgColor,\n className,\n children,\n ...props\n}) => {\n const { bulmaHelperClasses, rest } = useBulmaClasses({\n color: textColor,\n backgroundColor: bgColor,\n ...props,\n });\n\n const mainClass = usePrefixedClassNames('field-label', {\n [`is-${size}`]: !!size,\n });\n const fieldLabelClass = classNames(mainClass, bulmaHelperClasses, className);\n // Spread ...props and ...rest so custom props like data-testid are included\n return (\n <div className={fieldLabelClass} {...props} {...rest}>\n {children}\n </div>\n );\n};\n\n/**\n * FieldBody component for rendering Bulma field body.\n *\n * @function\n * @param {FieldBodyProps} props - Props for the FieldBody component.\n * @returns {JSX.Element} The rendered field body.\n *\n * @example\n * <FieldBody><input className=\"input\" /></FieldBody>\n */\nexport const FieldBody: React.FC<FieldBodyProps> = ({\n textColor,\n bgColor,\n className,\n children,\n ...props\n}) => {\n const { bulmaHelperClasses, rest } = useBulmaClasses({\n color: textColor,\n backgroundColor: bgColor,\n ...props,\n });\n\n const mainClass = usePrefixedClassNames('field-body');\n const fieldBodyClass = classNames(mainClass, bulmaHelperClasses, className);\n // Spread ...props and ...rest so custom props like data-testid are included\n return (\n <div className={fieldBodyClass} {...props} {...rest}>\n {children}\n </div>\n );\n};\n\n/**\n * The `Field` component is a Bulma-styled form field container.\n *\n * @function\n * @param {FieldProps} props - Props for the Field component.\n * @returns {JSX.Element} The rendered field container.\n * @see {@link https://bulma.io/documentation/form/general/#field | Bulma Field documentation}\n *\n * @example\n * // Labelled field — the label auto-associates with the composed base\n * <Field label=\"Email\">\n * <Control>\n * <InputBase type=\"email\" />\n * </Control>\n * </Field>\n *\n * @example\n * // Horizontal field\n * <Field horizontal label=\"Name\">\n * <Control>\n * <InputBase />\n * </Control>\n * </Field>\n */\nconst FieldComponent: React.FC<FieldProps> = ({\n horizontal,\n grouped,\n hasAddons,\n narrow,\n label,\n labelSize,\n labelProps,\n textColor,\n color: _fieldColor,\n bgColor,\n className,\n children,\n ...props\n}) => {\n const { bulmaHelperClasses, rest } = useBulmaClasses({\n color: textColor,\n backgroundColor: bgColor,\n ...props,\n });\n\n const mainClass = usePrefixedClassNames('field', {\n 'is-horizontal': horizontal,\n 'has-addons': !!hasAddons,\n 'has-addons-centered': hasAddons === 'centered',\n 'has-addons-right': hasAddons === 'right',\n 'is-narrow': narrow,\n 'is-grouped':\n grouped === true ||\n grouped === 'centered' ||\n grouped === 'right' ||\n grouped === 'multiline',\n 'is-grouped-centered': grouped === 'centered',\n 'is-grouped-right': grouped === 'right',\n 'is-grouped-multiline': grouped === 'multiline',\n });\n const fieldClass = classNames(mainClass, bulmaHelperClasses, className);\n\n // Default labelSize to 'normal' when horizontal for proper baseline alignment\n const effectiveLabelSize = labelSize ?? (horizontal ? 'normal' : undefined);\n\n const labelClass = usePrefixedClassNames('label');\n\n // Auto-associate the label with a single composed base control (#495): the\n // label points at a generated id shared via context, which a composed base\n // adopts when the user supplied no id of their own.\n // Presence semantics on htmlFor — even an explicit `htmlFor: undefined`\n // means the caller owns the association. Grouped/addons fields hold several\n // controls, so no single association is generated for them.\n const generatedId = useId();\n const userWiredLabel = !!labelProps && 'htmlFor' in labelProps;\n const targetId =\n label && !userWiredLabel && !grouped && !hasAddons\n ? generatedId\n : undefined;\n // A group control (Radios, Checkboxes, Rate, DateRangeInput) cannot take\n // that `for`, so it points `aria-labelledby` at the label itself (#939).\n // The label gets an id whenever the association is on, unless the caller\n // gave it one.\n const labelId =\n labelProps?.id ?? (targetId ? `${targetId}-label` : undefined);\n // What the rendered label's `for` points at, generated or the caller's, and\n // the id it renders with, so a control can tell when a label wired by hand\n // names it and point at that label. An unlabeled Field passes on its\n // parent's. Unlike `targetId`, a label wired by hand passes on its own in\n // `grouped`/`hasAddons` Fields too, on purpose: those only stop the Field\n // picking one control out of several, and the caller's `for` has picked\n // one, so a range Slider or Autocomplete it names points at that label in\n // a row as well. A group reads the label element id below instead, which\n // stays off for a label wired by hand, since no group takes its `for`.\n const inheritedLabelFor = useFieldLabelFor();\n const labelForTarget = userWiredLabel ? labelProps.htmlFor : targetId;\n const ownLabelFor = useMemo(\n () => ({ htmlFor: labelForTarget, id: labelId }),\n [labelForTarget, labelId]\n );\n const labelFor = label ? ownLabelFor : inheritedLabelFor;\n\n let renderedLabel = null;\n if (label) {\n if (horizontal) {\n renderedLabel = (\n <FieldLabel size={effectiveLabelSize}>\n <label\n htmlFor={targetId}\n {...labelProps}\n id={labelId}\n className={classNames(labelClass, labelProps?.className)}\n style={labelProps?.style}\n >\n {label}\n </label>\n </FieldLabel>\n );\n } else {\n renderedLabel = (\n <label\n htmlFor={targetId}\n {...labelProps}\n id={labelId}\n className={classNames(labelClass, labelProps?.className)}\n style={{ display: 'block', ...(labelProps?.style || {}) }}\n >\n {label}\n </label>\n );\n }\n }\n\n // If horizontal, wrap children in FieldBody (unless the user already provided\n // a FieldBody — either as the single child, or as one element among siblings\n // like <Field.Label/> + <Field.Body/>).\n let content = children;\n if (horizontal) {\n const isFieldBody = (c: React.ReactNode): boolean =>\n React.isValidElement(c) &&\n // @ts-expect-error displayName isn't on the public type\n (c.type === FieldBody || c.type?.displayName === 'FieldBody');\n const isFieldLabel = (c: React.ReactNode): boolean =>\n React.isValidElement(c) &&\n // @ts-expect-error displayName isn't on the public type\n (c.type === FieldLabel || c.type?.displayName === 'FieldLabel');\n const childArray = React.Children.toArray(children);\n const userProvidedStructure = childArray.some(\n c => isFieldBody(c) || isFieldLabel(c)\n );\n if (userProvidedStructure) {\n content = children;\n } else {\n content = <FieldBody>{children}</FieldBody>;\n }\n }\n\n return (\n <FieldProvider value={true}>\n <FieldLabelIdProvider value={targetId}>\n <FieldLabelElementIdProvider value={targetId ? labelId : undefined}>\n <FieldLabelForProvider value={labelFor}>\n <div className={fieldClass} {...rest}>\n {renderedLabel}\n {content}\n </div>\n </FieldLabelForProvider>\n </FieldLabelElementIdProvider>\n </FieldLabelIdProvider>\n </FieldProvider>\n );\n};\n\nFieldLabel.displayName = 'FieldLabel';\nFieldBody.displayName = 'FieldBody';\n\nexport const Field = withSubComponents(\n FieldComponent,\n {\n Label: FieldLabel,\n Body: FieldBody,\n Control,\n },\n 'Field'\n);\n\nexport default Field;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Field.js","sources":["../../../src/form/Field.tsx"],"sourcesContent":["import React, { useId, useMemo } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport {\n useBulmaClasses,\n BulmaClassesProps,\n validColors,\n} from '../helpers/useBulmaClasses';\nimport {\n FieldProvider,\n FieldLabelIdProvider,\n FieldLabelElementIdProvider,\n FieldLabelForProvider,\n useFieldLabelFor,\n} from './FormContext';\nimport { Control } from './Control';\n\n/**\n * Props for the Field component.\n */\nexport interface FieldProps\n extends\n React.HTMLAttributes<HTMLDivElement>,\n Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n /** Renders the field as horizontal (label and control side by side). */\n horizontal?: boolean;\n /** Group controls in a row (optionally centered, right, or multiline). */\n grouped?: boolean | 'centered' | 'right' | 'multiline';\n /** Group controls as addons (optionally centered or right-aligned). */\n hasAddons?: boolean | 'centered' | 'right';\n /** Constrains the field to its content's width (used inside horizontal field bodies). */\n narrow?: boolean;\n /** Field label, rendered above the widget. Automatically names the one control the Field holds: a composed `InputBase`, `SelectBase`, `TextAreaBase`, `DateInputBase`, `TimeInputBase` or `DateTimeInputBase` (an `inline` picker has no input, so it takes nothing), or a bestax input that renders a single input of its own (`Input`, `Select`, `TextArea`, `Numberinput`, `Slider`, `DateInput`, `TimeInput`, `DateTimeInput`, `Autocomplete`, `Taginput`, `File`), adopts a generated id that the label's `htmlFor` points at, and a group (`Radios`, `Checkboxes`, `Rate`, `DateRangeInput`, or a composed `DateRangeInputBase`, `inline` or not) points `aria-labelledby` at the label's own id unless you gave the group an `aria-label` or `aria-labelledby`. A range `Slider` takes the id on its low thumb and also starts each thumb's name with the label through `aria-labelledby`, unless its `ariaLabel` names that thumb or its own `aria-label` or `aria-labelledby` takes the label's place. An `Autocomplete` also names its open suggestion list after the label through `aria-labelledby`. Nothing else takes the label: `Checkbox`, `Radio` and `Switch` are named by their own children. Only the single inputs take the `htmlFor`, so with a group or any other content it matches nothing. Pass `labelProps={{ htmlFor }}` to wire your own `id`, or `labelProps={{ htmlFor: undefined }}` to opt out. Skipped for `grouped`/`hasAddons` fields (multiple controls), and a nested `Field` starts its own scope, so a horizontal Field whose body holds an inner `Field` names the control there only when you wire it. Two controls in one plain labeled Field would both adopt the id, so give each an `id` of its own. */\n label?: React.ReactNode;\n /** Size for the label. */\n labelSize?: 'small' | 'normal' | 'medium' | 'large';\n /** Props for the label element. An explicit `htmlFor` key — even set to `undefined` — takes over the association. While the association is on, the label renders with the `id` given here, or a generated one, and a group control, a range `Slider`'s thumbs and an `Autocomplete`'s suggestion list point `aria-labelledby` at it. A label you take over gets no generated id, and no group points at it on its own. With an `id` here, though, a range `Slider` or an `Autocomplete` whose `id` your `htmlFor` names still points its thumbs or its suggestion list at it, in a `grouped` or `hasAddons` Field too. To point a group in an inner `Field` at this label by hand, pass that `id` with `htmlFor: undefined`, or the label keeps a generated `htmlFor` that nothing takes. */\n labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {\n [key: string]: unknown;\n };\n /** Text color for the field. */\n textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n /** Bulma color for the field. */\n color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n /** Background color for the field. */\n bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n /** Additional CSS classes. */\n className?: string;\n /** Field content. */\n children?: React.ReactNode;\n}\n\n/**\n * Props for the FieldLabel component.\n */\nexport interface FieldLabelProps\n extends\n React.HTMLAttributes<HTMLDivElement>,\n Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n /** Size for the field label. */\n size?: 'small' | 'normal' | 'medium' | 'large';\n /** Text color for the label. */\n textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n /** Bulma color for the label. */\n color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n /** Background color for the label. */\n bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n /** Additional CSS classes. */\n className?: string;\n /** Field label content. */\n children?: React.ReactNode;\n}\n\n/**\n * Props for the FieldBody component.\n */\nexport interface FieldBodyProps\n extends\n React.HTMLAttributes<HTMLDivElement>,\n Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n /** Text color for the field body. */\n textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n /** Bulma color for the field body. */\n color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n /** Background color for the field body. */\n bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n /** Additional CSS classes. */\n className?: string;\n /** Field body content. */\n children?: React.ReactNode;\n}\n\n/**\n * FieldLabel component for rendering a Bulma field label. It renders the\n * label column of a horizontal `Field` (a `div` with the `field-label` class),\n * not a `<label>`, so text placed straight in it names nothing. Put a `<label>`\n * with the `label` class inside it and point its `htmlFor` at the control's\n * `id`, or give the horizontal `Field` a `label` prop, which renders this\n * column and its `<label>` for you. A `<label>` you put here names the\n * control through its `htmlFor` alone: a range `Slider`'s thumbs and an\n * `Autocomplete`'s suggestion list point `aria-labelledby` at a `Field`'s\n * label only when its `label` prop renders it and it names the control.\n * Where it would not name the control on its own, as in an inner `Field`,\n * pass `labelProps={{ htmlFor, id }}` with a matching `id` on the control.\n *\n * @function\n * @param {FieldLabelProps} props - Props for the FieldLabel component.\n * @returns {JSX.Element} The rendered field label.\n *\n * @example\n * <FieldLabel size=\"normal\">\n * <label className=\"label\" htmlFor=\"name\">Name</label>\n * </FieldLabel>\n */\nexport const FieldLabel: React.FC<FieldLabelProps> = ({\n size,\n textColor,\n bgColor,\n className,\n children,\n ...props\n}) => {\n const { bulmaHelperClasses, rest } = useBulmaClasses({\n color: textColor,\n backgroundColor: bgColor,\n ...props,\n });\n\n const mainClass = usePrefixedClassNames('field-label', {\n [`is-${size}`]: !!size,\n });\n const fieldLabelClass = classNames(mainClass, bulmaHelperClasses, className);\n // Spread ...props and ...rest so custom props like data-testid are included\n return (\n <div className={fieldLabelClass} {...props} {...rest}>\n {children}\n </div>\n );\n};\n\n/**\n * FieldBody component for rendering Bulma field body.\n *\n * @function\n * @param {FieldBodyProps} props - Props for the FieldBody component.\n * @returns {JSX.Element} The rendered field body.\n *\n * @example\n * <FieldBody><input className=\"input\" /></FieldBody>\n */\nexport const FieldBody: React.FC<FieldBodyProps> = ({\n textColor,\n bgColor,\n className,\n children,\n ...props\n}) => {\n const { bulmaHelperClasses, rest } = useBulmaClasses({\n color: textColor,\n backgroundColor: bgColor,\n ...props,\n });\n\n const mainClass = usePrefixedClassNames('field-body');\n const fieldBodyClass = classNames(mainClass, bulmaHelperClasses, className);\n // Spread ...props and ...rest so custom props like data-testid are included\n return (\n <div className={fieldBodyClass} {...props} {...rest}>\n {children}\n </div>\n );\n};\n\n/**\n * The `Field` component is a Bulma-styled form field container.\n *\n * @function\n * @param {FieldProps} props - Props for the Field component.\n * @returns {JSX.Element} The rendered field container.\n * @see {@link https://bulma.io/documentation/form/general/#field | Bulma Field documentation}\n *\n * @example\n * // Labelled field — the label auto-associates with the composed base\n * <Field label=\"Email\">\n * <Control>\n * <InputBase type=\"email\" />\n * </Control>\n * </Field>\n *\n * @example\n * // Horizontal field\n * <Field horizontal label=\"Name\">\n * <Control>\n * <InputBase />\n * </Control>\n * </Field>\n */\nconst FieldComponent: React.FC<FieldProps> = ({\n horizontal,\n grouped,\n hasAddons,\n narrow,\n label,\n labelSize,\n labelProps,\n textColor,\n color: _fieldColor,\n bgColor,\n className,\n children,\n ...props\n}) => {\n const { bulmaHelperClasses, rest } = useBulmaClasses({\n color: textColor,\n backgroundColor: bgColor,\n ...props,\n });\n\n const mainClass = usePrefixedClassNames('field', {\n 'is-horizontal': horizontal,\n 'has-addons': !!hasAddons,\n 'has-addons-centered': hasAddons === 'centered',\n 'has-addons-right': hasAddons === 'right',\n 'is-narrow': narrow,\n 'is-grouped':\n grouped === true ||\n grouped === 'centered' ||\n grouped === 'right' ||\n grouped === 'multiline',\n 'is-grouped-centered': grouped === 'centered',\n 'is-grouped-right': grouped === 'right',\n 'is-grouped-multiline': grouped === 'multiline',\n });\n const fieldClass = classNames(mainClass, bulmaHelperClasses, className);\n\n // Default labelSize to 'normal' when horizontal for proper baseline alignment\n const effectiveLabelSize = labelSize ?? (horizontal ? 'normal' : undefined);\n\n const labelClass = usePrefixedClassNames('label');\n\n // Auto-associate the label with a single composed base control (#495): the\n // label points at a generated id shared via context, which a composed base\n // adopts when the user supplied no id of their own.\n // Presence semantics on htmlFor — even an explicit `htmlFor: undefined`\n // means the caller owns the association. Grouped/addons fields hold several\n // controls, so no single association is generated for them.\n const generatedId = useId();\n const userWiredLabel = !!labelProps && 'htmlFor' in labelProps;\n const targetId =\n label && !userWiredLabel && !grouped && !hasAddons\n ? generatedId\n : undefined;\n // A group control (Radios, Checkboxes, Rate, DateRangeInput and its base)\n // cannot take that `for`, so it points `aria-labelledby` at the label\n // itself (#939).\n // The label gets an id whenever the association is on, unless the caller\n // gave it one.\n const labelId =\n labelProps?.id ?? (targetId ? `${targetId}-label` : undefined);\n // What the rendered label's `for` points at, generated or the caller's, and\n // the id it renders with, so a control can tell when a label wired by hand\n // names it and point at that label. An unlabeled Field passes on its\n // parent's. Unlike `targetId`, a label wired by hand passes on its own in\n // `grouped`/`hasAddons` Fields too, on purpose: those only stop the Field\n // picking one control out of several, and the caller's `for` has picked\n // one, so a range Slider or Autocomplete it names points at that label in\n // a row as well. A group reads the label element id below instead, which\n // stays off for a label wired by hand, since no group takes its `for`.\n const inheritedLabelFor = useFieldLabelFor();\n const labelForTarget = userWiredLabel ? labelProps.htmlFor : targetId;\n const ownLabelFor = useMemo(\n () => ({ htmlFor: labelForTarget, id: labelId }),\n [labelForTarget, labelId]\n );\n const labelFor = label ? ownLabelFor : inheritedLabelFor;\n\n let renderedLabel = null;\n if (label) {\n if (horizontal) {\n renderedLabel = (\n <FieldLabel size={effectiveLabelSize}>\n <label\n htmlFor={targetId}\n {...labelProps}\n id={labelId}\n className={classNames(labelClass, labelProps?.className)}\n style={labelProps?.style}\n >\n {label}\n </label>\n </FieldLabel>\n );\n } else {\n renderedLabel = (\n <label\n htmlFor={targetId}\n {...labelProps}\n id={labelId}\n className={classNames(labelClass, labelProps?.className)}\n style={{ display: 'block', ...(labelProps?.style || {}) }}\n >\n {label}\n </label>\n );\n }\n }\n\n // If horizontal, wrap children in FieldBody (unless the user already provided\n // a FieldBody — either as the single child, or as one element among siblings\n // like <Field.Label/> + <Field.Body/>).\n let content = children;\n if (horizontal) {\n const isFieldBody = (c: React.ReactNode): boolean =>\n React.isValidElement(c) &&\n // @ts-expect-error displayName isn't on the public type\n (c.type === FieldBody || c.type?.displayName === 'FieldBody');\n const isFieldLabel = (c: React.ReactNode): boolean =>\n React.isValidElement(c) &&\n // @ts-expect-error displayName isn't on the public type\n (c.type === FieldLabel || c.type?.displayName === 'FieldLabel');\n const childArray = React.Children.toArray(children);\n const userProvidedStructure = childArray.some(\n c => isFieldBody(c) || isFieldLabel(c)\n );\n if (userProvidedStructure) {\n content = children;\n } else {\n content = <FieldBody>{children}</FieldBody>;\n }\n }\n\n return (\n <FieldProvider value={true}>\n <FieldLabelIdProvider value={targetId}>\n <FieldLabelElementIdProvider value={targetId ? labelId : undefined}>\n <FieldLabelForProvider value={labelFor}>\n <div className={fieldClass} {...rest}>\n {renderedLabel}\n {content}\n </div>\n </FieldLabelForProvider>\n </FieldLabelElementIdProvider>\n </FieldLabelIdProvider>\n </FieldProvider>\n );\n};\n\nFieldLabel.displayName = 'FieldLabel';\nFieldBody.displayName = 'FieldBody';\n\nexport const Field = withSubComponents(\n FieldComponent,\n {\n Label: FieldLabel,\n Body: FieldBody,\n Control,\n },\n 'Field'\n);\n\nexport default Field;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
@@ -154,8 +154,9 @@ const FieldLabelIdProvider = FieldLabelIdContext.Provider;
|
|
|
154
154
|
const FieldLabelElementIdContext = createContext(undefined);
|
|
155
155
|
/**
|
|
156
156
|
* The id of a labeled Field's own `<label>`, for a group control (Radios,
|
|
157
|
-
* Checkboxes, Rate, DateRangeInput) to point
|
|
158
|
-
* the label's `htmlFor`
|
|
157
|
+
* Checkboxes, Rate, DateRangeInput and DateRangeInputBase) to point
|
|
158
|
+
* `aria-labelledby` at, since a group cannot take the label's `htmlFor`
|
|
159
|
+
* (#939, #1005). Set under the same conditions as
|
|
159
160
|
* {@link useFieldLabelId}. Consumed through `useAutoLabelledBy`.
|
|
160
161
|
* Internal; not part of the public API.
|
|
161
162
|
*/
|