@allxsmith/bestax-bulma 5.66.2 → 5.67.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bestax.css +1 -1
- package/dist/bestax.css.map +1 -1
- package/dist/esm/components/Command.js.map +1 -1
- package/dist/esm/components/HoverCard.js.map +1 -1
- package/dist/esm/components/Loading.js +3 -3
- package/dist/esm/components/Loading.js.map +1 -1
- package/dist/esm/components/Modal.js.map +1 -1
- package/dist/esm/components/Popover.js.map +1 -1
- package/dist/esm/components/Sidebar.js +21 -29
- package/dist/esm/components/Sidebar.js.map +1 -1
- package/dist/esm/components/Toast.js +6 -8
- package/dist/esm/components/Toast.js.map +1 -1
- package/dist/esm/elements/IconButton.js.map +1 -1
- package/dist/esm/form/Combobox.js.map +1 -1
- package/dist/esm/form/DateInputBase.js.map +1 -1
- package/dist/esm/form/DateRangeInputBase.js.map +1 -1
- package/dist/esm/form/DateTimeInputBase.js.map +1 -1
- package/dist/esm/form/TreeSelect.js.map +1 -1
- package/dist/esm/form/_pickerInternals/Calendar.js +12 -5
- package/dist/esm/form/_pickerInternals/Calendar.js.map +1 -1
- package/dist/esm/form/_pickerInternals/PickerPopover.js +6 -2
- package/dist/esm/form/_pickerInternals/PickerPopover.js.map +1 -1
- package/dist/esm/helpers/scrollLock.js +47 -11
- package/dist/esm/helpers/scrollLock.js.map +1 -1
- package/dist/esm/helpers/useAnchoredPosition.js +35 -11
- package/dist/esm/helpers/useAnchoredPosition.js.map +1 -1
- package/dist/esm/layout/Level.js +2 -2
- package/dist/esm/layout/Level.js.map +1 -1
- package/dist/extras.css +1 -1
- package/dist/extras.css.map +1 -1
- package/dist/index.cjs +128 -65
- package/dist/index.cjs.map +1 -1
- package/dist/types/components/Command.d.ts +5 -5
- package/dist/types/components/HoverCard.d.ts +2 -4
- package/dist/types/components/Modal.d.ts +6 -3
- package/dist/types/components/Popover.d.ts +1 -3
- package/dist/types/components/Sidebar.d.ts +6 -2
- package/dist/types/components/Toast.d.ts +3 -1
- package/dist/types/elements/IconButton.d.ts +2 -5
- package/dist/types/form/Combobox.d.ts +13 -13
- package/dist/types/form/DateInputBase.d.ts +8 -1
- package/dist/types/form/DateRangeInputBase.d.ts +5 -0
- package/dist/types/form/DateTimeInputBase.d.ts +8 -1
- package/dist/types/form/TreeSelect.d.ts +4 -4
- package/dist/types/helpers/scrollLock.d.ts +4 -4
- package/dist/types/helpers/useAnchoredPosition.d.ts +14 -12
- package/dist/types/layout/Level.d.ts +10 -0
- package/dist/types-cjs/components/Command.d.ts +5 -5
- package/dist/types-cjs/components/HoverCard.d.ts +2 -4
- package/dist/types-cjs/components/Modal.d.ts +6 -3
- package/dist/types-cjs/components/Popover.d.ts +1 -3
- package/dist/types-cjs/components/Sidebar.d.ts +6 -2
- package/dist/types-cjs/components/Toast.d.ts +3 -1
- package/dist/types-cjs/elements/IconButton.d.ts +2 -5
- package/dist/types-cjs/form/Combobox.d.ts +13 -13
- package/dist/types-cjs/form/DateInputBase.d.ts +8 -1
- package/dist/types-cjs/form/DateRangeInputBase.d.ts +5 -0
- package/dist/types-cjs/form/DateTimeInputBase.d.ts +8 -1
- package/dist/types-cjs/form/TreeSelect.d.ts +4 -4
- package/dist/types-cjs/helpers/scrollLock.d.ts +4 -4
- package/dist/types-cjs/helpers/useAnchoredPosition.d.ts +14 -12
- package/dist/types-cjs/layout/Level.d.ts +10 -0
- 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/components/_loading.scss +17 -3
- package/src/scss/form/_radio.scss +5 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal.tsx"],"sourcesContent":["import React, {\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useId,\n useRef,\n} from 'react';\nimport {\n classNames,\n usePrefixedClassNames,\n prefixedClassNames,\n} from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { buttonType } from '../helpers/buttonType';\nimport {\n useBulmaClasses,\n BulmaClassesProps,\n validColors,\n} from '../helpers/useBulmaClasses';\nimport { useConfig } from '../helpers/Config';\nimport { useScrollLock } from '../helpers/scrollLock';\nimport {\n getActiveElementInTree,\n getDeepestActiveElement,\n} from '../helpers/shadowDom';\nimport { Portal, usePortalProp } from '../helpers/portal';\nimport { useLatestRef } from '../helpers/useLatestRef';\nimport { useOverlayStack } from '../helpers/overlayStack';\nimport { focusTabStop, trapTab } from '../helpers/useFocusTrap';\n\n/**\n * Props for the Modal component.\n * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the root `.modal` element.\n */\nexport interface ModalProps\n extends\n Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'title'>,\n Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n /** Whether the modal is open/visible. */\n active?: boolean;\n /** Alias for `active`. Whether the modal is open/visible. */\n isActive?: boolean; // Alias for active\n /**\n * Called to ask for the modal to close. The props form calls it from the\n * background and the close button it renders. In the compound form,\n * `Modal.Close` calls it unless you give it an `onClick` of your own, and\n * `Modal.Background` doesn't call it on its own: pass it\n * `onClick={onClose}` for a click on the background to close the modal.\n * Escape calls it in both forms unless `closeOnEscape` is `false`.\n */\n onClose?: () => void;\n /** Additional CSS classes for the modal. */\n className?: string;\n /** Text color for modal content. */\n textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n /** Background color for modal content. */\n bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n /** Title/header for modal-card variant. (Legacy API only) */\n modalCardTitle?: React.ReactNode;\n /** Footer for modal-card variant. (Legacy API only) */\n modalCardFoot?: React.ReactNode;\n /**\n * Modal style: `'card'` for modal-card, `'content'` for modal-content. (Legacy API only)\n * @defaultValue auto\n */\n type?: 'card' | 'content';\n /** Modal body/content or compound components. */\n children?: React.ReactNode;\n /**\n * Close the modal when the Escape key is pressed (calls `onClose`). Only the\n * topmost open overlay responds, whichever Modal, Dialog, Sidebar or\n * full-page Loading opened last, so Escape closes one layer at a time. The\n * modal marks the Escape it closes on as used with `preventDefault()`, and\n * a Toast waits until no overlay is open. Turned off, a modal on top still\n * keeps Escape from the layers under it. A popup inside it, such as a\n * Dropdown's menu or a date picker's calendar, takes its own Escape first,\n * and so does content that calls `preventDefault()` on it.\n * @defaultValue true\n */\n closeOnEscape?: boolean;\n /**\n * Lock body scroll while the modal is active. Ref-counted and shared with\n * `Dialog`, `Sidebar` and `Loading`, so whichever overlay closes first does\n * not unlock the page underneath one that is still open.\n * @defaultValue true\n */\n lockScroll?: boolean;\n /**\n * Renders the modal into a portal target instead of inline, so it isn't\n * clipped by an ancestor with `overflow: hidden`, `filter` or `transform`.\n * `true` portals to the `portalContainer` a `ConfigProvider` sets,\n * `document.body` by default; a string is used as a\n * `document.querySelector` selector; an element is used directly. Renders\n * inline on the server and while hydrating, moving into the portal once the\n * client takes over, so hydration matches.\n * @defaultValue false\n */\n portal?: boolean | string | HTMLElement;\n}\n\n/**\n * Props for Modal.Background component.\n * @extraProp {React.MouseEventHandler<HTMLDivElement>} [onClick] - Called when the background is clicked. The background doesn't call the modal's `onClose` on its own, so pass `onClick={onClose}` for a click on it to close the modal.\n */\nexport interface ModalBackgroundProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Additional CSS classes. */\n className?: string;\n}\n\n/**\n * Props for Modal.Content component.\n */\nexport interface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Additional CSS classes. */\n className?: string;\n}\n\n/**\n * Props for Modal.Card component.\n */\nexport interface ModalCardProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Additional CSS classes. */\n className?: string;\n}\n\n/**\n * Props for Modal.Card.Head component.\n */\nexport interface ModalCardHeadProps extends React.HTMLAttributes<HTMLElement> {\n /** Additional CSS classes. */\n className?: string;\n}\n\n/**\n * Props for Modal.Card.Title component.\n */\nexport interface ModalCardTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {\n /** Additional CSS classes. */\n className?: string;\n}\n\n/**\n * Props for Modal.Card.Body component.\n */\nexport interface ModalCardBodyProps extends React.HTMLAttributes<HTMLElement> {\n /** Additional CSS classes. */\n className?: string;\n}\n\n/**\n * Props for Modal.Card.Foot component.\n */\nexport interface ModalCardFootProps extends React.HTMLAttributes<HTMLElement> {\n /** Additional CSS classes. */\n className?: string;\n}\n\n/**\n * Props for Modal.Close component.\n * @extraProp {'button' | 'submit' | 'reset'} [type='button'] - Button type. Defaults to `'button'`, so a close button inside a form does not submit it. Pass `'submit'` or `'reset'` and yours is used; any other value, or a spread carrying `type: undefined`, renders `'button'`.\n * @extraProp {string} [aria-label='close'] - Accessible name. Pass your own to replace it. An empty one, or a spread carrying `'aria-label': undefined`, keeps the default rather than leaving the button unnamed.\n * @extraProp {React.MouseEventHandler<HTMLButtonElement>} [onClick] - Called when the button is clicked. Without one, the button calls the `onClose` of the `Modal` around it. Yours replaces that rather than running before it, so call `onClose` from it if the button should still close the modal.\n */\nexport interface ModalCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n /** Additional CSS classes. */\n className?: string;\n /** Size of the close button (only applies to 'floating' variant). */\n size?: 'small' | 'medium' | 'large';\n /** Button variant. 'delete' (default) for modal card headers, 'floating' for overlay close button. */\n variant?: 'delete' | 'floating';\n}\n\n// The enclosing modal's `onClose`, for a `Modal.Close` written as a part, so\n// it closes the modal the way the button the props form renders does.\nconst ModalCloseContext = createContext<(() => void) | undefined>(undefined);\n\n/**\n * Modal.Background - Renders the modal background overlay. Pass it\n * `onClick={onClose}` for a click on it to close the modal.\n *\n * @function\n * @param {ModalBackgroundProps} props - Component props.\n * @returns {JSX.Element} Modal background element.\n */\nexport const ModalBackground: React.FC<ModalBackgroundProps> = ({\n className,\n ...props\n}) => {\n const classes = classNames(\n usePrefixedClassNames('modal-background'),\n className\n );\n return <div className={classes} {...props} />;\n};\n\n/**\n * Modal.Content - Renders modal content wrapper for custom content.\n *\n * @function\n * @param {ModalContentProps} props - Component props.\n * @returns {JSX.Element} Modal content element.\n */\nexport const ModalContent: React.FC<ModalContentProps> = ({\n className,\n ...props\n}) => {\n const classes = classNames(usePrefixedClassNames('modal-content'), className);\n return <div className={classes} {...props} />;\n};\n\n/**\n * Modal.Card.Head - Renders modal card header section.\n *\n * @function\n * @param {ModalCardHeadProps} props - Component props.\n * @returns {JSX.Element} Modal card header element.\n */\nexport const ModalCardHead: React.FC<ModalCardHeadProps> = ({\n className,\n ...props\n}) => {\n const classes = classNames(\n usePrefixedClassNames('modal-card-head'),\n className\n );\n return <header className={classes} {...props} />;\n};\n\n/**\n * Modal.Card.Title - Renders modal card title.\n *\n * @function\n * @param {ModalCardTitleProps} props - Component props.\n * @returns {JSX.Element} Modal card title element.\n */\nexport const ModalCardTitle: React.FC<ModalCardTitleProps> = ({\n className,\n ...props\n}) => {\n const classes = classNames(\n usePrefixedClassNames('modal-card-title'),\n className\n );\n return <p className={classes} {...props} />;\n};\n\n/**\n * Modal.Card.Body - Renders modal card body section.\n *\n * @function\n * @param {ModalCardBodyProps} props - Component props.\n * @returns {JSX.Element} Modal card body element.\n */\nexport const ModalCardBody: React.FC<ModalCardBodyProps> = ({\n className,\n ...props\n}) => {\n const classes = classNames(\n usePrefixedClassNames('modal-card-body'),\n className\n );\n return <section className={classes} {...props} />;\n};\n\n/**\n * Modal.Card.Foot - Renders modal card footer section.\n *\n * @function\n * @param {ModalCardFootProps} props - Component props.\n * @returns {JSX.Element} Modal card footer element.\n */\nexport const ModalCardFoot: React.FC<ModalCardFootProps> = ({\n className,\n ...props\n}) => {\n const classes = classNames(\n usePrefixedClassNames('modal-card-foot'),\n className\n );\n return <footer className={classes} {...props} />;\n};\n\n/**\n * Modal.Card - Renders modal card wrapper with compound components.\n * Use with Modal.Card.Head, Modal.Card.Title, Modal.Card.Body, and Modal.Card.Foot.\n *\n * @function\n * @param {ModalCardProps} props - Component props.\n * @returns {JSX.Element} Modal card element.\n */\nconst ModalCardComponent: React.FC<ModalCardProps> = ({\n className,\n ...props\n}) => {\n const classes = classNames(usePrefixedClassNames('modal-card'), className);\n return <div className={classes} {...props} />;\n};\n\nexport const ModalCard = withSubComponents(ModalCardComponent, {\n Head: ModalCardHead,\n Title: ModalCardTitle,\n Body: ModalCardBody,\n Foot: ModalCardFoot,\n});\n\n/**\n * Modal.Close - Renders modal close button with two variant styles. It calls\n * the modal's `onClose` unless given an `onClick` of its own.\n *\n * @function\n * @param {ModalCloseProps} props - Component props.\n * @returns {JSX.Element} Close button element.\n *\n * @remarks\n * Supports two variants:\n * - 'delete' (default): For use in modal card headers, renders with 'delete' class\n * - 'floating': For floating overlay close button, renders with 'modal-close' class\n *\n * The size prop only applies to the 'floating' variant.\n */\nexport const ModalClose: React.FC<ModalCloseProps> = ({\n className,\n size = 'large',\n variant = 'delete',\n onClick,\n ...props\n}) => {\n const onClose = useContext(ModalCloseContext);\n const classes = classNames(\n usePrefixedClassNames(\n variant === 'delete' ? 'delete' : 'modal-close',\n variant === 'floating' && size && { [`is-${size}`]: true }\n ),\n className\n );\n return (\n <button\n className={classes}\n {...props}\n // After the spread, reading through it: a key the spread carries with no\n // value would otherwise erase the default, leaving a nameless button\n // that submits the form around it. An empty label falls back too: the\n // button is drawn as an icon, so `''` would leave it unnamed. A caller's\n // own value still wins; `buttonType` says more.\n aria-label={props['aria-label'] || 'close'}\n type={buttonType(props.type)}\n // A caller's own `onClick` replaces the close rather than running\n // before it, unlike `Popover.Close`: this button used to close only\n // through that handler, so a caller already closing there, as with\n // `onClick={onClose}`, would otherwise close twice.\n onClick={onClick ?? (onClose && (() => onClose()))}\n />\n );\n};\n\n/**\n * The `Modal` component provides an empty, accessible overlay for arbitrary content — for a ready-made confirm or alert, reach for `Dialog` instead.\n *\n * @function\n * @param {ModalProps} props - Props for the Modal component.\n * @returns {JSX.Element} The rendered modal.\n *\n * @example\n * // Legacy API\n * <Modal active={isOpen} onClose={handleClose} modalCardTitle=\"Title\">\n * Content\n * </Modal>\n *\n * @example\n * // Compound Component API\n * <Modal isActive={isOpen} onClose={handleClose}>\n * <Modal.Background onClick={handleClose} />\n * <Modal.Card>\n * <Modal.Card.Head>\n * <Modal.Card.Title>Title</Modal.Card.Title>\n * <Modal.Close />\n * </Modal.Card.Head>\n * <Modal.Card.Body>Content</Modal.Card.Body>\n * </Modal.Card>\n * </Modal>\n *\n * @see {@link https://bulma.io/documentation/components/modal/ | Bulma Modal documentation}\n */\nconst ModalRoot = forwardRef<HTMLDivElement, ModalProps>(function ModalRoot(\n {\n active,\n isActive,\n onClose,\n className,\n textColor,\n bgColor,\n modalCardTitle,\n modalCardFoot,\n type,\n children,\n closeOnEscape = true,\n lockScroll = true,\n portal = false,\n role,\n 'aria-modal': ariaModalProp,\n ...props\n },\n ref\n) {\n const { classPrefix } = useConfig();\n const { bulmaHelperClasses, rest } = useBulmaClasses({\n color: textColor,\n backgroundColor: bgColor,\n ...props,\n });\n\n // Support both active and isActive props\n const isModalActive = active ?? isActive ?? false;\n\n const modalRootRef = useRef<HTMLDivElement>(null);\n\n // Cleanup returned by a consumer's callback ref on attach, held until detach.\n const consumerCleanupRef = useRef<(() => void) | null>(null);\n\n // The forwarded ref and the internal one must both see the node: focus\n // management and the Tab trap read `modalRootRef`, while consumers expect\n // their own ref to resolve.\n const combinedRef = useCallback(\n (node: HTMLDivElement | null) => {\n (modalRootRef as React.MutableRefObject<HTMLDivElement | null>).current =\n node;\n if (typeof ref === 'function') {\n // React 19 lets a callback ref return a cleanup function and detaches\n // by running it instead of calling the ref with `null`; React 18\n // discards the return value entirely. Returning it from here would be\n // a React-19-only contract, so instead we hold the cleanup and run it\n // ourselves on detach — a consumer's cleanup ref then behaves the same\n // on both majors of the CI matrix. Same shape as `Dropdown`.\n if (node === null) {\n const consumerCleanup = consumerCleanupRef.current;\n consumerCleanupRef.current = null;\n if (consumerCleanup) {\n consumerCleanup();\n } else {\n ref(null);\n }\n return;\n }\n const cleanup: unknown = ref(node);\n consumerCleanupRef.current =\n typeof cleanup === 'function' ? (cleanup as () => void) : null;\n } else if (ref) {\n (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n }\n },\n [ref]\n );\n const previouslyFocusedRef = useRef<HTMLElement | null>(null);\n const generatedTitleId = useId();\n // A portal has no server-rendered counterpart, so the server render and the\n // hydrating render stay inline and only move into the portal once we're\n // past hydration. Moving into the portal, or from one portal target to\n // another, remounts the modal's subtree, so any effect holding a DOM node\n // from before the move is holding a detached one. Effects that touch the\n // modal's nodes key on `isPortaled`, on `portal` and on `defaultTarget`, so\n // they re-run against the new tree. `defaultTarget` is the configured\n // `portalContainer` only while it places the modal (portaled with `portal`\n // set to `true`), so a change to it that moves nothing re-runs nothing.\n const { isPortaled, container, defaultTarget } = usePortalProp(portal);\n\n useScrollLock(isModalActive && lockScroll);\n\n // Read when Escape arrives, so the key listener stays put while `onClose`\n // changes identity, as an inline one does on every render of the parent.\n const onCloseRef = useLatestRef(onClose);\n\n // Joins the stack of open overlays, so the keyboard handling below only\n // applies while this modal is on top.\n const isTopmost = useOverlayStack(isModalActive);\n\n // Escape closes, only for the topmost overlay. The listener is on\n // `window`, where a keydown arrives last, so everything inside the modal\n // has had the key first: React's handlers, and `document` listeners added\n // after this one, such as a date picker's.\n useEffect(() => {\n if (!isModalActive) return undefined;\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key !== 'Escape' || !isTopmost()) return;\n // Something inside already used this Escape, such as a popup that\n // closed on it, so the modal waits for the next one. One the modal\n // closes on is marked used, so nothing under it acts on it as well.\n if (closeOnEscape && onCloseRef.current && !e.defaultPrevented) {\n e.preventDefault();\n onCloseRef.current();\n }\n };\n\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n }, [isModalActive, closeOnEscape, onCloseRef, isTopmost]);\n\n // Keep Tab within the modal: `aria-modal` hides the rest of the page from\n // assistive technology, so the keyboard order has to agree. Only while\n // it's the topmost modal overlay, so an overlay that isn't modal, such as\n // a Sidebar without an overlay, takes Escape from it but leaves it Tab.\n // It's the trap `useFocusTrap` sets, so it wraps at the stops Tab really\n // visits, skipping hidden, inert and closed content, and sends back a Tab\n // the browser still takes out. On `window` for the same reason as Escape:\n // a trap inside, such as a portaled popup's, has had the Tab first, and\n // one it used is left where it put focus. It reads the modal's node as\n // each key arrives, so a portal move that remounts the node, including one\n // to a selector that only starts matching while the modal is open, keeps\n // it trapped.\n useEffect(() => {\n if (!isModalActive) return undefined;\n return trapTab(\n () => modalRootRef.current,\n window,\n () => isTopmost('modal')\n );\n }, [isModalActive, isTopmost]);\n\n // Move focus into the modal on open, restore it on close\n useEffect(() => {\n if (!isModalActive) return undefined;\n\n // The element that had focus, wherever it sits: a portaled modal renders\n // under `document.body` while its opener can be inside a shadow root.\n previouslyFocusedRef.current =\n getDeepestActiveElement() as HTMLElement | null;\n const node = modalRootRef.current;\n if (node) focusTabStop(node);\n\n return () => {\n // Only hand focus back if this modal still owns it: closing a background\n // modal must not pull focus out of one that is still open on top. A\n // removed subtree leaves focus on <body>, which still counts as ours.\n const activeElement = getActiveElementInTree(node);\n if (\n activeElement &&\n activeElement !== document.body &&\n !node?.contains(activeElement)\n ) {\n return;\n }\n previouslyFocusedRef.current?.focus?.();\n };\n // `isPortaled` flips once when a hydrated portal modal moves out of the\n // inline tree, and `portal` or `defaultTarget` changing moves a portaled\n // one to another target; re-running rebinds focus onto the remounted\n // nodes. The cleanup above restores focus to the pre-open element first\n // (the detached subtree has left focus on <body>), so the re-run re-records\n // the same element and restore-on-close still lands in the right place.\n }, [isModalActive, isPortaled, portal, defaultTarget]);\n\n // Check if children contain compound components\n const hasCompoundComponents = React.Children.toArray(children).some(\n child =>\n React.isValidElement(child) &&\n (child.type === ModalBackground ||\n child.type === ModalContent ||\n child.type === ModalCard ||\n child.type === ModalClose)\n );\n\n // Generate Bulma classes with prefix\n const bulmaClasses = usePrefixedClassNames('modal', {\n 'is-active': isModalActive,\n });\n const deleteClass = usePrefixedClassNames('delete');\n\n const modalClasses = classNames(bulmaClasses, bulmaHelperClasses, className);\n\n const resolvedRole = role ?? (isModalActive ? 'dialog' : undefined);\n const resolvedAriaModal =\n ariaModalProp ??\n (isModalActive && resolvedRole !== 'presentation' ? 'true' : undefined);\n // A dialog needs an accessible name: the legacy card title is wired up\n // automatically, compound users pass their own aria-label/aria-labelledby\n // (both arrive in `rest`, which is spread last and so wins).\n const titleId = modalCardTitle ? generatedTitleId : undefined;\n\n let modalElement: React.ReactElement;\n\n // If using compound components, render children as-is\n if (hasCompoundComponents) {\n modalElement = (\n <div\n className={modalClasses}\n ref={combinedRef}\n role={resolvedRole}\n aria-modal={resolvedAriaModal}\n tabIndex={-1}\n {...rest}\n data-testid=\"modal\"\n >\n {children}\n </div>\n );\n } else {\n // Legacy API: EXPLICIT type wins; fallback to auto detection if not provided\n let isModalCard: boolean;\n if (type === 'card') isModalCard = true;\n else if (type === 'content') isModalCard = false;\n else isModalCard = !!modalCardTitle || !!modalCardFoot;\n\n modalElement = (\n <div\n className={modalClasses}\n ref={combinedRef}\n role={resolvedRole}\n aria-modal={resolvedAriaModal}\n aria-labelledby={titleId}\n tabIndex={-1}\n {...rest}\n data-testid=\"modal\"\n >\n <div\n className={prefixedClassNames(classPrefix, 'modal-background')}\n onClick={onClose}\n data-testid=\"modal-background\"\n />\n {isModalCard ? (\n <div className={prefixedClassNames(classPrefix, 'modal-card')}>\n {modalCardTitle && (\n <header\n className={prefixedClassNames(classPrefix, 'modal-card-head')}\n >\n <p\n id={titleId}\n className={prefixedClassNames(\n classPrefix,\n 'modal-card-title'\n )}\n >\n {modalCardTitle}\n </p>\n {onClose && (\n <button\n className={deleteClass}\n aria-label=\"close\"\n onClick={onClose}\n type=\"button\"\n data-testid=\"modal-close\"\n />\n )}\n </header>\n )}\n <section\n className={prefixedClassNames(classPrefix, 'modal-card-body')}\n data-testid=\"modal-body\"\n >\n {children}\n </section>\n {modalCardFoot && (\n <footer\n className={prefixedClassNames(classPrefix, 'modal-card-foot')}\n >\n {modalCardFoot}\n </footer>\n )}\n </div>\n ) : (\n <div\n className={prefixedClassNames(classPrefix, 'modal-content')}\n data-testid=\"modal-content\"\n >\n {children}\n </div>\n )}\n {/* Show floating close button for modal-content, or for modal-card when no header */}\n {(!isModalCard || (!modalCardTitle && onClose)) && onClose && (\n <button\n className={prefixedClassNames(\n classPrefix,\n 'modal-close',\n 'is-large'\n )}\n aria-label=\"close\"\n onClick={onClose}\n type=\"button\"\n data-testid=\"modal-close-float\"\n />\n )}\n </div>\n );\n }\n\n // In both forms, so a `Modal.Close` anywhere inside closes this modal.\n modalElement = (\n <ModalCloseContext.Provider value={onClose}>\n {modalElement}\n </ModalCloseContext.Provider>\n );\n\n return (\n <Portal disabled={!isPortaled} container={container}>\n {modalElement}\n </Portal>\n );\n});\n\nexport const Modal = withSubComponents(\n ModalRoot,\n {\n Background: ModalBackground,\n Content: ModalContent,\n Card: ModalCard,\n Close: ModalClose,\n },\n 'Modal'\n);\nexport default Modal;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal.tsx"],"sourcesContent":["import React, {\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useId,\n useRef,\n} from 'react';\nimport {\n classNames,\n usePrefixedClassNames,\n prefixedClassNames,\n} from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { buttonType } from '../helpers/buttonType';\nimport {\n useBulmaClasses,\n BulmaClassesProps,\n validColors,\n} from '../helpers/useBulmaClasses';\nimport { useConfig } from '../helpers/Config';\nimport { useScrollLock } from '../helpers/scrollLock';\nimport {\n getActiveElementInTree,\n getDeepestActiveElement,\n} from '../helpers/shadowDom';\nimport { Portal, usePortalProp } from '../helpers/portal';\nimport { useLatestRef } from '../helpers/useLatestRef';\nimport { useOverlayStack } from '../helpers/overlayStack';\nimport { focusTabStop, trapTab } from '../helpers/useFocusTrap';\n\n/**\n * Props for the Modal component.\n * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the root `.modal` element.\n */\nexport interface ModalProps\n extends\n Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'title'>,\n Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n /** Whether the modal is open/visible. */\n active?: boolean;\n /** Alias for `active`. Whether the modal is open/visible. */\n isActive?: boolean; // Alias for active\n /**\n * Called to ask for the modal to close. The props form calls it from the\n * background and the close button it renders. In the compound form,\n * `Modal.Close` calls it unless you give it an `onClick` of your own, and\n * `Modal.Background` doesn't call it on its own: pass it\n * `onClick={onClose}` for a click on the background to close the modal.\n * Escape calls it in both forms unless `closeOnEscape` is `false`.\n */\n onClose?: () => void;\n /** Additional CSS classes for the modal. */\n className?: string;\n /** Text color for modal content. */\n textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n /** Background color for modal content. */\n bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n /** Title/header for modal-card variant. (Legacy API only) */\n modalCardTitle?: React.ReactNode;\n /** Footer for modal-card variant. (Legacy API only) */\n modalCardFoot?: React.ReactNode;\n /**\n * Modal style: `'card'` for modal-card, `'content'` for modal-content. (Legacy API only)\n * @defaultValue auto\n */\n type?: 'card' | 'content';\n /** Modal body/content or compound components. */\n children?: React.ReactNode;\n /**\n * Close the modal when the Escape key is pressed (calls `onClose`). Only the\n * topmost open overlay responds, whichever Modal, Dialog, Sidebar or\n * full-page Loading opened last, so Escape closes one layer at a time. The\n * modal marks the Escape it closes on as used with `preventDefault()`, and\n * a Toast waits until no overlay is open. Turned off, a modal on top still\n * keeps Escape from the layers under it. A popup inside it, such as a\n * Dropdown's menu or a date picker's calendar, takes its own Escape first,\n * and so does content that calls `preventDefault()` on it.\n * @defaultValue true\n */\n closeOnEscape?: boolean;\n /**\n * Lock page scroll while the modal is active, padding the page by the room\n * its scrollbar took so the content stays put. An element fixed to the\n * window's right edge, such as a `fixed` Navbar, isn't padded, and moves by\n * the scrollbar's width while the page is locked. Ref-counted and shared\n * with `Dialog`, `Sidebar` and `Loading`, so whichever overlay closes first\n * does not unlock the page underneath one that is still open.\n * @defaultValue true\n */\n lockScroll?: boolean;\n /**\n * Renders the modal into a portal target instead of inline, so it isn't\n * clipped by an ancestor with `overflow: hidden`, `filter` or `transform`.\n * `true` portals to the `portalContainer` a `ConfigProvider` sets,\n * `document.body` by default; a string is used as a\n * `document.querySelector` selector; an element is used directly. Renders\n * inline on the server and while hydrating, moving into the portal once the\n * client takes over, so hydration matches.\n * @defaultValue false\n */\n portal?: boolean | string | HTMLElement;\n}\n\n/**\n * Props for Modal.Background component.\n * @extraProp {React.MouseEventHandler<HTMLDivElement>} [onClick] - Called when the background is clicked. The background doesn't call the modal's `onClose` on its own, so pass `onClick={onClose}` for a click on it to close the modal.\n */\nexport interface ModalBackgroundProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Additional CSS classes. */\n className?: string;\n}\n\n/**\n * Props for Modal.Content component.\n */\nexport interface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Additional CSS classes. */\n className?: string;\n}\n\n/**\n * Props for Modal.Card component.\n */\nexport interface ModalCardProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Additional CSS classes. */\n className?: string;\n}\n\n/**\n * Props for Modal.Card.Head component.\n */\nexport interface ModalCardHeadProps extends React.HTMLAttributes<HTMLElement> {\n /** Additional CSS classes. */\n className?: string;\n}\n\n/**\n * Props for Modal.Card.Title component.\n */\nexport interface ModalCardTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {\n /** Additional CSS classes. */\n className?: string;\n}\n\n/**\n * Props for Modal.Card.Body component.\n */\nexport interface ModalCardBodyProps extends React.HTMLAttributes<HTMLElement> {\n /** Additional CSS classes. */\n className?: string;\n}\n\n/**\n * Props for Modal.Card.Foot component.\n */\nexport interface ModalCardFootProps extends React.HTMLAttributes<HTMLElement> {\n /** Additional CSS classes. */\n className?: string;\n}\n\n/**\n * Props for Modal.Close component.\n * @extraProp {'button' | 'submit' | 'reset'} [type='button'] - Button type. Defaults to `'button'`, so a close button inside a form does not submit it. Pass `'submit'` or `'reset'` and yours is used; any other value, or a spread carrying `type: undefined`, renders `'button'`.\n * @extraProp {string} [aria-label='close'] - Accessible name. Pass your own to replace it. An empty one, or a spread carrying `'aria-label': undefined`, keeps the default rather than leaving the button unnamed.\n * @extraProp {React.MouseEventHandler<HTMLButtonElement>} [onClick] - Called when the button is clicked. Without one, the button calls the `onClose` of the `Modal` around it. Yours replaces that rather than running before it, so call `onClose` from it if the button should still close the modal.\n */\nexport interface ModalCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n /** Additional CSS classes. */\n className?: string;\n /** Size of the close button (only applies to 'floating' variant). */\n size?: 'small' | 'medium' | 'large';\n /** Button variant. 'delete' (default) for modal card headers, 'floating' for overlay close button. */\n variant?: 'delete' | 'floating';\n}\n\n// The enclosing modal's `onClose`, for a `Modal.Close` written as a part, so\n// it closes the modal the way the button the props form renders does.\nconst ModalCloseContext = createContext<(() => void) | undefined>(undefined);\n\n/**\n * Modal.Background - Renders the modal background overlay. Pass it\n * `onClick={onClose}` for a click on it to close the modal.\n *\n * @function\n * @param {ModalBackgroundProps} props - Component props.\n * @returns {JSX.Element} Modal background element.\n */\nexport const ModalBackground: React.FC<ModalBackgroundProps> = ({\n className,\n ...props\n}) => {\n const classes = classNames(\n usePrefixedClassNames('modal-background'),\n className\n );\n return <div className={classes} {...props} />;\n};\n\n/**\n * Modal.Content - Renders modal content wrapper for custom content.\n *\n * @function\n * @param {ModalContentProps} props - Component props.\n * @returns {JSX.Element} Modal content element.\n */\nexport const ModalContent: React.FC<ModalContentProps> = ({\n className,\n ...props\n}) => {\n const classes = classNames(usePrefixedClassNames('modal-content'), className);\n return <div className={classes} {...props} />;\n};\n\n/**\n * Modal.Card.Head - Renders modal card header section.\n *\n * @function\n * @param {ModalCardHeadProps} props - Component props.\n * @returns {JSX.Element} Modal card header element.\n */\nexport const ModalCardHead: React.FC<ModalCardHeadProps> = ({\n className,\n ...props\n}) => {\n const classes = classNames(\n usePrefixedClassNames('modal-card-head'),\n className\n );\n return <header className={classes} {...props} />;\n};\n\n/**\n * Modal.Card.Title - Renders modal card title.\n *\n * @function\n * @param {ModalCardTitleProps} props - Component props.\n * @returns {JSX.Element} Modal card title element.\n */\nexport const ModalCardTitle: React.FC<ModalCardTitleProps> = ({\n className,\n ...props\n}) => {\n const classes = classNames(\n usePrefixedClassNames('modal-card-title'),\n className\n );\n return <p className={classes} {...props} />;\n};\n\n/**\n * Modal.Card.Body - Renders modal card body section.\n *\n * @function\n * @param {ModalCardBodyProps} props - Component props.\n * @returns {JSX.Element} Modal card body element.\n */\nexport const ModalCardBody: React.FC<ModalCardBodyProps> = ({\n className,\n ...props\n}) => {\n const classes = classNames(\n usePrefixedClassNames('modal-card-body'),\n className\n );\n return <section className={classes} {...props} />;\n};\n\n/**\n * Modal.Card.Foot - Renders modal card footer section.\n *\n * @function\n * @param {ModalCardFootProps} props - Component props.\n * @returns {JSX.Element} Modal card footer element.\n */\nexport const ModalCardFoot: React.FC<ModalCardFootProps> = ({\n className,\n ...props\n}) => {\n const classes = classNames(\n usePrefixedClassNames('modal-card-foot'),\n className\n );\n return <footer className={classes} {...props} />;\n};\n\n/**\n * Modal.Card - Renders modal card wrapper with compound components.\n * Use with Modal.Card.Head, Modal.Card.Title, Modal.Card.Body, and Modal.Card.Foot.\n *\n * @function\n * @param {ModalCardProps} props - Component props.\n * @returns {JSX.Element} Modal card element.\n */\nconst ModalCardComponent: React.FC<ModalCardProps> = ({\n className,\n ...props\n}) => {\n const classes = classNames(usePrefixedClassNames('modal-card'), className);\n return <div className={classes} {...props} />;\n};\n\nexport const ModalCard = withSubComponents(ModalCardComponent, {\n Head: ModalCardHead,\n Title: ModalCardTitle,\n Body: ModalCardBody,\n Foot: ModalCardFoot,\n});\n\n/**\n * Modal.Close - Renders modal close button with two variant styles. It calls\n * the modal's `onClose` unless given an `onClick` of its own.\n *\n * @function\n * @param {ModalCloseProps} props - Component props.\n * @returns {JSX.Element} Close button element.\n *\n * @remarks\n * Supports two variants:\n * - 'delete' (default): For use in modal card headers, renders with 'delete' class\n * - 'floating': For floating overlay close button, renders with 'modal-close' class\n *\n * The size prop only applies to the 'floating' variant.\n */\nexport const ModalClose: React.FC<ModalCloseProps> = ({\n className,\n size = 'large',\n variant = 'delete',\n onClick,\n ...props\n}) => {\n const onClose = useContext(ModalCloseContext);\n const classes = classNames(\n usePrefixedClassNames(\n variant === 'delete' ? 'delete' : 'modal-close',\n variant === 'floating' && size && { [`is-${size}`]: true }\n ),\n className\n );\n return (\n <button\n className={classes}\n {...props}\n // After the spread, reading through it: a key the spread carries with no\n // value would otherwise erase the default, leaving a nameless button\n // that submits the form around it. An empty label falls back too: the\n // button is drawn as an icon, so `''` would leave it unnamed. A caller's\n // own value still wins; `buttonType` says more.\n aria-label={props['aria-label'] || 'close'}\n type={buttonType(props.type)}\n // A caller's own `onClick` replaces the close rather than running\n // before it, unlike `Popover.Close`: this button used to close only\n // through that handler, so a caller already closing there, as with\n // `onClick={onClose}`, would otherwise close twice.\n onClick={onClick ?? (onClose && (() => onClose()))}\n />\n );\n};\n\n/**\n * The `Modal` component provides an empty, accessible overlay for arbitrary content — for a ready-made confirm or alert, reach for `Dialog` instead.\n *\n * @function\n * @param {ModalProps} props - Props for the Modal component.\n * @returns {JSX.Element} The rendered modal.\n *\n * @example\n * // Legacy API\n * <Modal active={isOpen} onClose={handleClose} modalCardTitle=\"Title\">\n * Content\n * </Modal>\n *\n * @example\n * // Compound Component API\n * <Modal isActive={isOpen} onClose={handleClose}>\n * <Modal.Background onClick={handleClose} />\n * <Modal.Card>\n * <Modal.Card.Head>\n * <Modal.Card.Title>Title</Modal.Card.Title>\n * <Modal.Close />\n * </Modal.Card.Head>\n * <Modal.Card.Body>Content</Modal.Card.Body>\n * </Modal.Card>\n * </Modal>\n *\n * @see {@link https://bulma.io/documentation/components/modal/ | Bulma Modal documentation}\n */\nconst ModalRoot = forwardRef<HTMLDivElement, ModalProps>(function ModalRoot(\n {\n active,\n isActive,\n onClose,\n className,\n textColor,\n bgColor,\n modalCardTitle,\n modalCardFoot,\n type,\n children,\n closeOnEscape = true,\n lockScroll = true,\n portal = false,\n role,\n 'aria-modal': ariaModalProp,\n ...props\n },\n ref\n) {\n const { classPrefix } = useConfig();\n const { bulmaHelperClasses, rest } = useBulmaClasses({\n color: textColor,\n backgroundColor: bgColor,\n ...props,\n });\n\n // Support both active and isActive props\n const isModalActive = active ?? isActive ?? false;\n\n const modalRootRef = useRef<HTMLDivElement>(null);\n\n // Cleanup returned by a consumer's callback ref on attach, held until detach.\n const consumerCleanupRef = useRef<(() => void) | null>(null);\n\n // The forwarded ref and the internal one must both see the node: focus\n // management and the Tab trap read `modalRootRef`, while consumers expect\n // their own ref to resolve.\n const combinedRef = useCallback(\n (node: HTMLDivElement | null) => {\n (modalRootRef as React.MutableRefObject<HTMLDivElement | null>).current =\n node;\n if (typeof ref === 'function') {\n // React 19 lets a callback ref return a cleanup function and detaches\n // by running it instead of calling the ref with `null`; React 18\n // discards the return value entirely. Returning it from here would be\n // a React-19-only contract, so instead we hold the cleanup and run it\n // ourselves on detach — a consumer's cleanup ref then behaves the same\n // on both majors of the CI matrix. Same shape as `Dropdown`.\n if (node === null) {\n const consumerCleanup = consumerCleanupRef.current;\n consumerCleanupRef.current = null;\n if (consumerCleanup) {\n consumerCleanup();\n } else {\n ref(null);\n }\n return;\n }\n const cleanup: unknown = ref(node);\n consumerCleanupRef.current =\n typeof cleanup === 'function' ? (cleanup as () => void) : null;\n } else if (ref) {\n (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n }\n },\n [ref]\n );\n const previouslyFocusedRef = useRef<HTMLElement | null>(null);\n const generatedTitleId = useId();\n // A portal has no server-rendered counterpart, so the server render and the\n // hydrating render stay inline and only move into the portal once we're\n // past hydration. Moving into the portal, or from one portal target to\n // another, remounts the modal's subtree, so any effect holding a DOM node\n // from before the move is holding a detached one. Effects that touch the\n // modal's nodes key on `isPortaled`, on `portal` and on `defaultTarget`, so\n // they re-run against the new tree. `defaultTarget` is the configured\n // `portalContainer` only while it places the modal (portaled with `portal`\n // set to `true`), so a change to it that moves nothing re-runs nothing.\n const { isPortaled, container, defaultTarget } = usePortalProp(portal);\n\n useScrollLock(isModalActive && lockScroll);\n\n // Read when Escape arrives, so the key listener stays put while `onClose`\n // changes identity, as an inline one does on every render of the parent.\n const onCloseRef = useLatestRef(onClose);\n\n // Joins the stack of open overlays, so the keyboard handling below only\n // applies while this modal is on top.\n const isTopmost = useOverlayStack(isModalActive);\n\n // Escape closes, only for the topmost overlay. The listener is on\n // `window`, where a keydown arrives last, so everything inside the modal\n // has had the key first: React's handlers, and `document` listeners added\n // after this one, such as a date picker's.\n useEffect(() => {\n if (!isModalActive) return undefined;\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key !== 'Escape' || !isTopmost()) return;\n // Something inside already used this Escape, such as a popup that\n // closed on it, so the modal waits for the next one. One the modal\n // closes on is marked used, so nothing under it acts on it as well.\n if (closeOnEscape && onCloseRef.current && !e.defaultPrevented) {\n e.preventDefault();\n onCloseRef.current();\n }\n };\n\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n }, [isModalActive, closeOnEscape, onCloseRef, isTopmost]);\n\n // Keep Tab within the modal: `aria-modal` hides the rest of the page from\n // assistive technology, so the keyboard order has to agree. Only while\n // it's the topmost modal overlay, so an overlay that isn't modal, such as\n // a Sidebar without an overlay, takes Escape from it but leaves it Tab.\n // It's the trap `useFocusTrap` sets, so it wraps at the stops Tab really\n // visits, skipping hidden, inert and closed content, and sends back a Tab\n // the browser still takes out. On `window` for the same reason as Escape:\n // a trap inside, such as a portaled popup's, has had the Tab first, and\n // one it used is left where it put focus. It reads the modal's node as\n // each key arrives, so a portal move that remounts the node, including one\n // to a selector that only starts matching while the modal is open, keeps\n // it trapped.\n useEffect(() => {\n if (!isModalActive) return undefined;\n return trapTab(\n () => modalRootRef.current,\n window,\n () => isTopmost('modal')\n );\n }, [isModalActive, isTopmost]);\n\n // Move focus into the modal on open, restore it on close\n useEffect(() => {\n if (!isModalActive) return undefined;\n\n // The element that had focus, wherever it sits: a portaled modal renders\n // under `document.body` while its opener can be inside a shadow root.\n previouslyFocusedRef.current =\n getDeepestActiveElement() as HTMLElement | null;\n const node = modalRootRef.current;\n if (node) focusTabStop(node);\n\n return () => {\n // Only hand focus back if this modal still owns it: closing a background\n // modal must not pull focus out of one that is still open on top. A\n // removed subtree leaves focus on <body>, which still counts as ours.\n const activeElement = getActiveElementInTree(node);\n if (\n activeElement &&\n activeElement !== document.body &&\n !node?.contains(activeElement)\n ) {\n return;\n }\n previouslyFocusedRef.current?.focus?.();\n };\n // `isPortaled` flips once when a hydrated portal modal moves out of the\n // inline tree, and `portal` or `defaultTarget` changing moves a portaled\n // one to another target; re-running rebinds focus onto the remounted\n // nodes. The cleanup above restores focus to the pre-open element first\n // (the detached subtree has left focus on <body>), so the re-run re-records\n // the same element and restore-on-close still lands in the right place.\n }, [isModalActive, isPortaled, portal, defaultTarget]);\n\n // Check if children contain compound components\n const hasCompoundComponents = React.Children.toArray(children).some(\n child =>\n React.isValidElement(child) &&\n (child.type === ModalBackground ||\n child.type === ModalContent ||\n child.type === ModalCard ||\n child.type === ModalClose)\n );\n\n // Generate Bulma classes with prefix\n const bulmaClasses = usePrefixedClassNames('modal', {\n 'is-active': isModalActive,\n });\n const deleteClass = usePrefixedClassNames('delete');\n\n const modalClasses = classNames(bulmaClasses, bulmaHelperClasses, className);\n\n const resolvedRole = role ?? (isModalActive ? 'dialog' : undefined);\n const resolvedAriaModal =\n ariaModalProp ??\n (isModalActive && resolvedRole !== 'presentation' ? 'true' : undefined);\n // A dialog needs an accessible name: the legacy card title is wired up\n // automatically, compound users pass their own aria-label/aria-labelledby\n // (both arrive in `rest`, which is spread last and so wins).\n const titleId = modalCardTitle ? generatedTitleId : undefined;\n\n let modalElement: React.ReactElement;\n\n // If using compound components, render children as-is\n if (hasCompoundComponents) {\n modalElement = (\n <div\n className={modalClasses}\n ref={combinedRef}\n role={resolvedRole}\n aria-modal={resolvedAriaModal}\n tabIndex={-1}\n {...rest}\n data-testid=\"modal\"\n >\n {children}\n </div>\n );\n } else {\n // Legacy API: EXPLICIT type wins; fallback to auto detection if not provided\n let isModalCard: boolean;\n if (type === 'card') isModalCard = true;\n else if (type === 'content') isModalCard = false;\n else isModalCard = !!modalCardTitle || !!modalCardFoot;\n\n modalElement = (\n <div\n className={modalClasses}\n ref={combinedRef}\n role={resolvedRole}\n aria-modal={resolvedAriaModal}\n aria-labelledby={titleId}\n tabIndex={-1}\n {...rest}\n data-testid=\"modal\"\n >\n <div\n className={prefixedClassNames(classPrefix, 'modal-background')}\n onClick={onClose}\n data-testid=\"modal-background\"\n />\n {isModalCard ? (\n <div className={prefixedClassNames(classPrefix, 'modal-card')}>\n {modalCardTitle && (\n <header\n className={prefixedClassNames(classPrefix, 'modal-card-head')}\n >\n <p\n id={titleId}\n className={prefixedClassNames(\n classPrefix,\n 'modal-card-title'\n )}\n >\n {modalCardTitle}\n </p>\n {onClose && (\n <button\n className={deleteClass}\n aria-label=\"close\"\n onClick={onClose}\n type=\"button\"\n data-testid=\"modal-close\"\n />\n )}\n </header>\n )}\n <section\n className={prefixedClassNames(classPrefix, 'modal-card-body')}\n data-testid=\"modal-body\"\n >\n {children}\n </section>\n {modalCardFoot && (\n <footer\n className={prefixedClassNames(classPrefix, 'modal-card-foot')}\n >\n {modalCardFoot}\n </footer>\n )}\n </div>\n ) : (\n <div\n className={prefixedClassNames(classPrefix, 'modal-content')}\n data-testid=\"modal-content\"\n >\n {children}\n </div>\n )}\n {/* Show floating close button for modal-content, or for modal-card when no header */}\n {(!isModalCard || (!modalCardTitle && onClose)) && onClose && (\n <button\n className={prefixedClassNames(\n classPrefix,\n 'modal-close',\n 'is-large'\n )}\n aria-label=\"close\"\n onClick={onClose}\n type=\"button\"\n data-testid=\"modal-close-float\"\n />\n )}\n </div>\n );\n }\n\n // In both forms, so a `Modal.Close` anywhere inside closes this modal.\n modalElement = (\n <ModalCloseContext.Provider value={onClose}>\n {modalElement}\n </ModalCloseContext.Provider>\n );\n\n return (\n <Portal disabled={!isPortaled} container={container}>\n {modalElement}\n </Portal>\n );\n});\n\nexport const Modal = withSubComponents(\n ModalRoot,\n {\n Background: ModalBackground,\n Content: ModalContent,\n Card: ModalCard,\n Close: ModalClose,\n },\n 'Modal'\n);\nexport default Modal;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover.tsx"],"sourcesContent":["import React, {\n cloneElement,\n createContext,\n useCallback,\n useContext,\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 { withSubComponents } from '../helpers/withSubComponents';\nimport { Portal } from '../helpers/portal';\nimport { useIsHydrated } from '../helpers/useIsHydrated';\nimport { focusTabStop, useFocusTrap } from '../helpers/useFocusTrap';\nimport { marginGap, useAnchoredPosition } from '../helpers/useAnchoredPosition';\nimport { useClientLayoutEffect } from '../helpers/useClientLayoutEffect';\nimport { getDeepestActiveElement } from '../helpers/shadowDom';\nimport { useOutsidePress } from '../helpers/useOutsidePress';\nimport { buttonType } from '../helpers/buttonType';\nimport { warnOnce } from '../helpers/devWarnings';\nimport { Button, ButtonOwnProps } from '../elements/Button';\nimport type { PickerPosition } from '../form/_pickerInternals/pickerTypes';\n\n/**\n * Where the panel opens against its trigger: below (`bottom-*`) or above\n * (`top-*`), lined up with the trigger's left or right edge. `auto` picks the\n * one that keeps the panel in the viewport, preferring below and lined up on\n * the left. The same union the date and time pickers take.\n */\nexport type PopoverPosition = PickerPosition;\n\n/**\n * Props for the Popover component. `className`, `id`, the other HTML\n * attributes and the helper props land on the wrapper around the trigger,\n * not on the panel; `contentClassName` reaches the panel.\n * @extraProp {string} [className] - Additional classes for the wrapper around the trigger. The panel takes `contentClassName`.\n */\nexport interface PopoverProps\n extends\n Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'children'>,\n Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n /**\n * The element that opens and closes the popover, such as a `Button`.\n * Popover gives it `aria-haspopup=\"dialog\"`, `aria-expanded`,\n * `aria-controls` while the panel is open, and click and key handlers that\n * run after its own (call `preventDefault()` in yours to keep the popover\n * from toggling). It has to be a single element that passes `onClick` and\n * `onKeyDown` to its DOM node. Enter and Space toggle a trigger the browser\n * doesn't click on its own, and an intrinsic element that isn't already a\n * control (a `<span>`) also gets `role=\"button\"` and `tabIndex={0}` unless\n * it sets them; a component that renders one has to take those itself.\n */\n trigger: React.ReactElement;\n /** The panel's content, usually `Popover.Header`, `Popover.Body` and `Popover.Footer`. */\n children?: React.ReactNode;\n /**\n * Controlled open state. When set, the trigger and every dismissal only\n * report through `onOpenChange`.\n */\n open?: boolean;\n /**\n * Initial open state when uncontrolled. Opening moves focus into the\n * panel, so a popover that starts open takes focus once the page loads.\n * @defaultValue false\n */\n defaultOpen?: boolean;\n /**\n * Called with the state asked for: `true` from the trigger opening it,\n * `false` from the trigger, `Popover.Close`, Escape or an outside\n * `pointerdown`. Fires in both controlled and uncontrolled use.\n */\n onOpenChange?: (open: boolean) => void;\n /**\n * Where the panel opens against the trigger. Left out, it opens below and\n * lines up with the trigger's start edge, which is its right edge on a\n * right-to-left page, so a trigger at the start of the line doesn't push\n * the panel off the screen. A corner you pass stays physical, so\n * `bottom-left` lines up the left edges on either page.\n * @defaultValue 'bottom-left'\n */\n position?: PopoverPosition;\n /**\n * Render the panel through `Portal`, into the `portalContainer` a\n * `ConfigProvider` sets, `document.body` by default, fixed to the viewport,\n * so an ancestor's `overflow`, `transform` or stacking context can't clip\n * it. The panel then shows from the commit after hydration, never in server\n * markup. It is measured against the trigger when it opens and on resize\n * and scroll, so it doesn't follow content that changes size while it is\n * open. Theming variables set on an ancestor of the trigger reach it only\n * when its container is inside that ancestor.\n * @defaultValue false\n */\n appendToBody?: boolean;\n /**\n * Keep Tab and Shift+Tab inside the panel while it is open, as the ARIA\n * dialog pattern does for a non-modal dialog. Pointer focus leaves freely\n * and the page stays usable. With `false`, Tab moves past the panel and\n * the popover stays open. Focus moves into the panel on open and back to\n * the trigger on close either way.\n * @defaultValue true\n */\n trapFocus?: boolean;\n /**\n * Close on a `pointerdown` outside the trigger and the panel. Content the\n * panel renders through a portal (a nested `Popover`, a portaled picker)\n * still counts as inside.\n * @defaultValue true\n */\n closeOnClickOutside?: boolean;\n /**\n * Close on Escape while focus is in the panel or on the trigger. A dialog\n * nested in the panel, such as a date picker's calendar, takes its own\n * Escape first, and so does content that calls `preventDefault()` on it.\n * @defaultValue true\n */\n closeOnEscape?: boolean;\n /**\n * The panel's accessible name. Without it the panel is named by its\n * `Popover.Header`, and a development build warns when it has neither.\n */\n ariaLabel?: string;\n /** Additional classes for the panel (`.popover-content`). */\n contentClassName?: string;\n}\n\ninterface PopoverContextValue {\n /** The id `Popover.Header` takes, which names the panel. */\n titleId: string;\n /** Records a mounted `Popover.Header`; the returned function forgets it. */\n registerTitle: () => () => void;\n /** Asks the popover to close. */\n close: () => void;\n}\n\nconst PopoverContext = createContext<PopoverContextValue | null>(null);\n\n/** The trigger props Popover reads before replacing them. */\ninterface TriggerProps {\n onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\n role?: string;\n tabIndex?: number;\n href?: unknown;\n}\n\n/** Intrinsic elements that are controls already, and keep their own role. */\nconst NATIVE_CONTROLS = new Set([\n 'button',\n 'input',\n 'select',\n 'textarea',\n 'summary',\n]);\n\n/**\n * Whether the browser answers this key on `el` itself, by clicking it or by\n * using the key as input, so the trigger's click handler covers it.\n */\nfunction handlesKeyItself(el: Element, key: string): boolean {\n if (NATIVE_CONTROLS.has(el.localName)) return true;\n return el.localName === 'a' && key === 'Enter' && el.hasAttribute('href');\n}\n\n/** The innermost dialog the event passed through, which is the one its Escape belongs to. */\nfunction nearestDialog(event: Event): EventTarget | null {\n return (\n event.composedPath().find(node => {\n const role = (node as Element).getAttribute?.('role');\n return role === 'dialog' || role === 'alertdialog';\n }) ?? null\n );\n}\n\n/**\n * The `Popover` component opens a panel of interactive content, such as a filter form or a set of share options, anchored to the element that toggles it.\n *\n * The panel is a non-modal `role=\"dialog\"`: focus moves into it on open\n * and returns to the trigger on close, while the rest of the page stays\n * reachable by pointer and assistive technology. For hover-only hints use\n * `Tooltip`, and for a list of actions use `Dropdown`.\n *\n * @function\n * @param {PopoverProps} props - Props for the Popover component.\n * @returns {JSX.Element} The trigger in its wrapper, and the panel while open.\n *\n * @example\n * <Popover trigger={<Button>Filters</Button>}>\n * <Popover.Header>Filter rows</Popover.Header>\n * <Popover.Body>…</Popover.Body>\n * <Popover.Footer>\n * <Popover.Close>Done</Popover.Close>\n * </Popover.Footer>\n * </Popover>\n */\nconst PopoverComponent: React.FC<PopoverProps> = ({\n trigger,\n children,\n open: controlledOpen,\n defaultOpen = false,\n onOpenChange,\n position,\n appendToBody = false,\n trapFocus = true,\n closeOnClickOutside = true,\n closeOnEscape = true,\n ariaLabel,\n className,\n contentClassName,\n ...props\n}) => {\n const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n const rootRef = useRef<HTMLDivElement>(null);\n const panelRef = useRef<HTMLDivElement>(null);\n const baseId = useId();\n const panelId = `${baseId}-panel`;\n const titleId = `${baseId}-title`;\n\n const isControlled = controlledOpen !== undefined;\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const isOpen = controlledOpen ?? internalOpen;\n\n const requestOpen = useCallback(\n (next: boolean) => {\n onOpenChange?.(next);\n if (!isControlled) setInternalOpen(next);\n },\n [isControlled, onOpenChange]\n );\n const close = useCallback(() => requestOpen(false), [requestOpen]);\n\n // A portaled panel has no server markup, so it only exists from the commit\n // after hydration. Everything that measures or focuses it waits for that.\n const hydrated = useIsHydrated();\n const panelMounted = isOpen && (hydrated || !appendToBody);\n\n const resolved = useAnchoredPosition(rootRef, panelRef, {\n active: panelMounted,\n position,\n fixed: appendToBody,\n // The gap comes from `--bulma-popover-offset` in the stylesheet, so the\n // coordinates leave it out and `auto` reads it off the panel.\n offset: 0,\n styledGap: marginGap,\n });\n\n // The trigger renders first inside the wrapper. Read when needed rather\n // than held, so a trigger that remounted is still the one found.\n const triggerNode = useCallback((): HTMLElement | null => {\n const first = rootRef.current?.firstElementChild;\n return first && first !== panelRef.current ? (first as HTMLElement) : null;\n }, []);\n const restoreFocusRef = useMemo(\n () => ({\n get current() {\n return triggerNode();\n },\n }),\n [triggerNode]\n );\n\n useFocusTrap(panelRef, {\n active: panelMounted && trapFocus,\n restoreFocus: restoreFocusRef,\n });\n\n // Without the trap, focus still arrives in the panel and goes back to the\n // trigger, on the trap's terms: only while the panel still holds it.\n useEffect(() => {\n const panel = panelRef.current;\n if (!panelMounted || trapFocus || !panel) return undefined;\n focusTabStop(panel);\n return () => {\n const doc = panel.ownerDocument;\n const now = getDeepestActiveElement(doc);\n if (!now || now === doc.body || panel.contains(now)) {\n triggerNode()?.focus();\n }\n };\n }, [panelMounted, trapFocus, triggerNode]);\n\n // A press outside the wrapper, which holds the trigger and the panel,\n // closes it. One inside the panel's React tree counts as inside, so content\n // the panel portals elsewhere does too.\n const markInsidePress = useOutsidePress(\n rootRef,\n panelMounted && closeOnClickOutside,\n close\n );\n\n const handlePanelKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (e.key !== 'Escape' || !closeOnEscape || e.defaultPrevented) return;\n // React bubbles the key here from portaled content as well, so a dialog\n // of its own on the way (a nested popover, a picker's calendar) owns it.\n const owner = nearestDialog(e.nativeEvent);\n if (owner && owner !== panelRef.current) return;\n e.preventDefault();\n close();\n };\n\n const triggerProps = trigger.props as TriggerProps;\n\n const handleTriggerClick = (e: React.MouseEvent<HTMLElement>) => {\n triggerProps.onClick?.(e);\n if (!e.defaultPrevented) requestOpen(!isOpen);\n };\n\n const handleTriggerKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n triggerProps.onKeyDown?.(e);\n // A key on something inside the trigger is that element's to answer.\n if (e.defaultPrevented || e.target !== e.currentTarget) return;\n if (e.key === 'Escape') {\n if (isOpen && closeOnEscape) {\n e.preventDefault();\n close();\n }\n return;\n }\n if (e.key !== 'Enter' && e.key !== ' ') return;\n if (handlesKeyItself(e.currentTarget, e.key)) return;\n // Space would scroll the page; a held key repeats.\n e.preventDefault();\n if (!e.repeat) requestOpen(!isOpen);\n };\n\n const needsButtonRole =\n typeof trigger.type === 'string' &&\n !NATIVE_CONTROLS.has(trigger.type) &&\n !(trigger.type === 'a' && triggerProps.href != null);\n\n const clonedTrigger = cloneElement(\n trigger as React.ReactElement<Record<string, unknown>>,\n {\n ...(needsButtonRole\n ? {\n role: triggerProps.role ?? 'button',\n tabIndex: triggerProps.tabIndex ?? 0,\n }\n : {}),\n 'aria-haspopup': 'dialog',\n 'aria-expanded': isOpen,\n 'aria-controls': panelMounted ? panelId : undefined,\n onClick: handleTriggerClick,\n onKeyDown: handleTriggerKeyDown,\n }\n );\n\n const rootClasses = classNames(\n usePrefixedClassNames('popover', { 'is-active': isOpen }),\n bulmaHelperClasses,\n className\n );\n const panelClasses = classNames(\n usePrefixedClassNames('popover-content', {\n [`is-${resolved.position}`]: true,\n // The default lines up with the trigger's inline start, so the\n // stylesheet moves it to the right edge on a right-to-left page.\n 'is-start-aligned': position === undefined,\n 'is-portal': appendToBody,\n }),\n contentClassName\n );\n\n return (\n // The ref after the spread: React 19 hands a function component a `ref`\n // prop like any other, and the wrapper has to stay ours.\n <div className={rootClasses} {...rest} ref={rootRef}>\n {clonedTrigger}\n {isOpen && (\n <Portal disabled={!appendToBody}>\n <PopoverPanel\n panelRef={panelRef}\n titleId={titleId}\n ariaLabel={ariaLabel}\n close={close}\n id={panelId}\n className={panelClasses}\n style={\n appendToBody\n ? {\n position: 'fixed',\n top: resolved.top,\n left: resolved.left,\n }\n : undefined\n }\n onKeyDown={handlePanelKeyDown}\n onPointerDownCapture={markInsidePress}\n >\n {children}\n </PopoverPanel>\n </Portal>\n )}\n </div>\n );\n};\n\ninterface PopoverPanelProps extends React.HTMLAttributes<HTMLDivElement> {\n panelRef: React.RefObject<HTMLDivElement | null>;\n titleId: string;\n ariaLabel?: string;\n close: () => void;\n}\n\n/**\n * The open panel. It mounts with each opening, so it counts the\n * `Popover.Header`s inside it afresh every time.\n */\nfunction PopoverPanel({\n panelRef,\n titleId,\n ariaLabel,\n close,\n children,\n ...attrs\n}: PopoverPanelProps) {\n // Headers register in a layout effect, after this first render, and this\n // panel's own layout effect runs after theirs. Until then the panel assumes\n // it has one, so a panel that does is named from its first commit, before\n // focus moves in, and one that doesn't drops the reference before it paints.\n const [titlesCounted, setTitlesCounted] = useState(false);\n const [titleCount, setTitleCount] = useState(0);\n const registerTitle = useCallback(() => {\n setTitleCount(n => n + 1);\n return () => setTitleCount(n => n - 1);\n }, []);\n useClientLayoutEffect(() => {\n setTitlesCounted(true);\n }, []);\n const named = Boolean(ariaLabel) || titleCount > 0;\n\n useEffect(() => {\n if (titlesCounted && !named) {\n warnOnce(\n 'Popover:unnamed',\n '[bestax-bulma] <Popover> opened a panel with no accessible name. ' +\n 'Pass ariaLabel, or render a Popover.Header inside it.'\n );\n }\n }, [titlesCounted, named]);\n\n const context = useMemo(\n () => ({ titleId, registerTitle, close }),\n [titleId, registerTitle, close]\n );\n\n return (\n <PopoverContext.Provider value={context}>\n <div\n {...attrs}\n ref={panelRef}\n role=\"dialog\"\n aria-label={ariaLabel}\n aria-labelledby={\n !ariaLabel && (!titlesCounted || titleCount > 0) ? titleId : undefined\n }\n tabIndex={-1}\n >\n {children}\n </div>\n </PopoverContext.Provider>\n );\n}\n\n/**\n * Props for the Popover.Header component. Its `id` is the one the panel's\n * `aria-labelledby` names, so it isn't yours to set.\n */\nexport interface PopoverHeaderProps\n extends\n Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'id'>,\n BulmaClassesProps {\n /** Additional CSS classes. */\n className?: string;\n}\n\n/**\n * The popover's title, which names the panel for assistive technology.\n *\n * @function\n * @param {PopoverHeaderProps} props - Props for the Popover.Header component.\n * @returns {JSX.Element} The header element.\n */\nexport const PopoverHeader: React.FC<PopoverHeaderProps> = ({\n className,\n ...props\n}) => {\n const context = useContext(PopoverContext);\n const registerTitle = context?.registerTitle;\n // Before paint, so the panel is named by the time it shows.\n useClientLayoutEffect(() => registerTitle?.(), [registerTitle]);\n const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n return (\n <div\n className={classNames(\n usePrefixedClassNames('popover-header'),\n bulmaHelperClasses,\n className\n )}\n {...rest}\n id={context?.titleId}\n />\n );\n};\n\n/**\n * Props for the Popover.Body component.\n */\nexport interface PopoverBodyProps\n extends\n Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n BulmaClassesProps {\n /** Additional CSS classes. */\n className?: string;\n}\n\n/**\n * The popover's main content area.\n *\n * @function\n * @param {PopoverBodyProps} props - Props for the Popover.Body component.\n * @returns {JSX.Element} The body element.\n */\nexport const PopoverBody: React.FC<PopoverBodyProps> = ({\n className,\n ...props\n}) => {\n const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n return (\n <div\n className={classNames(\n usePrefixedClassNames('popover-body'),\n bulmaHelperClasses,\n className\n )}\n {...rest}\n />\n );\n};\n\n/**\n * Props for the Popover.Footer component.\n */\nexport interface PopoverFooterProps\n extends\n Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n BulmaClassesProps {\n /** Additional CSS classes. */\n className?: string;\n}\n\n/**\n * A row of actions along the bottom of the popover, aligned to the end.\n *\n * @function\n * @param {PopoverFooterProps} props - Props for the Popover.Footer component.\n * @returns {JSX.Element} The footer element.\n */\nexport const PopoverFooter: React.FC<PopoverFooterProps> = ({\n className,\n ...props\n}) => {\n const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n return (\n <div\n className={classNames(\n usePrefixedClassNames('popover-footer'),\n bulmaHelperClasses,\n className\n )}\n {...rest}\n />\n );\n};\n\n/**\n * Props for the Popover.Close component: the props of a `Button` rendered as\n * a `<button>`.\n * @extraProp {'button' | 'submit' | 'reset'} [type='button'] - Button type. Defaults to `'button'`, so a close button inside a form doesn't submit it.\n * @extraProp {React.MouseEventHandler<HTMLButtonElement>} [onClick] - Runs before the popover closes. Call `preventDefault()` to keep it open.\n */\nexport interface PopoverCloseProps\n extends\n ButtonOwnProps,\n Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonOwnProps> {}\n\n/**\n * A `Button` that closes the popover, handing focus back to the trigger.\n *\n * @function\n * @param {PopoverCloseProps} props - Props for the Popover.Close component.\n * @returns {JSX.Element} The close button.\n */\nexport const PopoverClose: React.FC<PopoverCloseProps> = ({\n onClick,\n ...props\n}) => {\n const context = useContext(PopoverContext);\n return (\n <Button\n {...props}\n type={buttonType(props.type)}\n onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(e);\n if (!e.defaultPrevented) context?.close();\n }}\n />\n );\n};\n\n/** Popover with Header, Body, Footer and Close sub-components. */\nexport const Popover = withSubComponents(\n PopoverComponent,\n {\n Header: PopoverHeader,\n Body: PopoverBody,\n Footer: PopoverFooter,\n Close: PopoverClose,\n },\n 'Popover'\n);\n\nexport default Popover;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;AAyIA,MAAM,cAAc,GAAG,aAAa,CAA6B,IAAI,CAAC;AAWtE;AACA,MAAM,eAAe,GAAG,IAAI,GAAG,CAAC;IAC9B,QAAQ;IACR,OAAO;IACP,QAAQ;IACR,UAAU;IACV,SAAS;AACV,CAAA,CAAC;AAEF;;;AAGG;AACH,SAAS,gBAAgB,CAAC,EAAW,EAAE,GAAW,EAAA;AAChD,IAAA,IAAI,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC,SAAS,CAAC;AAAE,QAAA,OAAO,IAAI;AAClD,IAAA,OAAO,EAAE,CAAC,SAAS,KAAK,GAAG,IAAI,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC;AAC3E;AAEA;AACA,SAAS,aAAa,CAAC,KAAY,EAAA;IACjC,QACE,KAAK,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,IAAI,IAAG;QAC/B,MAAM,IAAI,GAAI,IAAgB,CAAC,YAAY,GAAG,MAAM,CAAC;AACrD,QAAA,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,aAAa;AACpD,IAAA,CAAC,CAAC,IAAI,IAAI;AAEd;AAEA;;;;;;;;;;;;;;;;;;;;AAoBG;AACH,MAAM,gBAAgB,GAA2B,CAAC,EAChD,OAAO,EACP,QAAQ,EACR,IAAI,EAAE,cAAc,EACpB,WAAW,GAAG,KAAK,EACnB,YAAY,EACZ,QAAQ,EACR,YAAY,GAAG,KAAK,EACpB,SAAS,GAAG,IAAI,EAChB,mBAAmB,GAAG,IAAI,EAC1B,aAAa,GAAG,IAAI,EACpB,SAAS,EACT,SAAS,EACT,gBAAgB,EAChB,GAAG,KAAK,EACT,KAAI;IACH,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC,KAAK,CAAC;AAC3D,IAAA,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC;AAC5C,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC;AAC7C,IAAA,MAAM,MAAM,GAAG,KAAK,EAAE;AACtB,IAAA,MAAM,OAAO,GAAG,CAAA,EAAG,MAAM,QAAQ;AACjC,IAAA,MAAM,OAAO,GAAG,CAAA,EAAG,MAAM,QAAQ;AAEjC,IAAA,MAAM,YAAY,GAAG,cAAc,KAAK,SAAS;IACjD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC;AAC7D,IAAA,MAAM,MAAM,GAAG,cAAc,IAAI,YAAY;AAE7C,IAAA,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,IAAa,KAAI;AAChB,QAAA,YAAY,GAAG,IAAI,CAAC;AACpB,QAAA,IAAI,CAAC,YAAY;YAAE,eAAe,CAAC,IAAI,CAAC;AAC1C,IAAA,CAAC,EACD,CAAC,YAAY,EAAE,YAAY,CAAC,CAC7B;AACD,IAAA,MAAM,KAAK,GAAG,WAAW,CAAC,MAAM,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;;;AAIlE,IAAA,MAAM,QAAQ,GAAG,aAAa,EAAE;IAChC,MAAM,YAAY,GAAG,MAAM,KAAK,QAAQ,IAAI,CAAC,YAAY,CAAC;AAE1D,IAAA,MAAM,QAAQ,GAAG,mBAAmB,CAAC,OAAO,EAAE,QAAQ,EAAE;AACtD,QAAA,MAAM,EAAE,YAAY;QACpB,QAAQ;AACR,QAAA,KAAK,EAAE,YAAY;;;AAGnB,QAAA,MAAM,EAAE,CAAC;AACT,QAAA,SAAS,EAAE,SAAS;AACrB,KAAA,CAAC;;;AAIF,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,MAAyB;AACvD,QAAA,MAAM,KAAK,GAAG,OAAO,CAAC,OAAO,EAAE,iBAAiB;AAChD,QAAA,OAAO,KAAK,IAAI,KAAK,KAAK,QAAQ,CAAC,OAAO,GAAI,KAAqB,GAAG,IAAI;IAC5E,CAAC,EAAE,EAAE,CAAC;AACN,IAAA,MAAM,eAAe,GAAG,OAAO,CAC7B,OAAO;AACL,QAAA,IAAI,OAAO,GAAA;YACT,OAAO,WAAW,EAAE;QACtB,CAAC;AACF,KAAA,CAAC,EACF,CAAC,WAAW,CAAC,CACd;IAED,YAAY,CAAC,QAAQ,EAAE;QACrB,MAAM,EAAE,YAAY,IAAI,SAAS;AACjC,QAAA,YAAY,EAAE,eAAe;AAC9B,KAAA,CAAC;;;IAIF,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO;AAC9B,QAAA,IAAI,CAAC,YAAY,IAAI,SAAS,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,SAAS;QAC1D,YAAY,CAAC,KAAK,CAAC;AACnB,QAAA,OAAO,MAAK;AACV,YAAA,MAAM,GAAG,GAAG,KAAK,CAAC,aAAa;AAC/B,YAAA,MAAM,GAAG,GAAG,uBAAuB,CAAC,GAAG,CAAC;AACxC,YAAA,IAAI,CAAC,GAAG,IAAI,GAAG,KAAK,GAAG,CAAC,IAAI,IAAI,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;AACnD,gBAAA,WAAW,EAAE,EAAE,KAAK,EAAE;YACxB;AACF,QAAA,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC;;;;AAK1C,IAAA,MAAM,eAAe,GAAG,eAAe,CACrC,OAAO,EACP,YAAY,IAAI,mBAAmB,EACnC,KAAK,CACN;AAED,IAAA,MAAM,kBAAkB,GAAG,CAAC,CAAsC,KAAI;QACpE,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,CAAC,aAAa,IAAI,CAAC,CAAC,gBAAgB;YAAE;;;QAGhE,MAAM,KAAK,GAAG,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC;AAC1C,QAAA,IAAI,KAAK,IAAI,KAAK,KAAK,QAAQ,CAAC,OAAO;YAAE;QACzC,CAAC,CAAC,cAAc,EAAE;AAClB,QAAA,KAAK,EAAE;AACT,IAAA,CAAC;AAED,IAAA,MAAM,YAAY,GAAG,OAAO,CAAC,KAAqB;AAElD,IAAA,MAAM,kBAAkB,GAAG,CAAC,CAAgC,KAAI;AAC9D,QAAA,YAAY,CAAC,OAAO,GAAG,CAAC,CAAC;QACzB,IAAI,CAAC,CAAC,CAAC,gBAAgB;AAAE,YAAA,WAAW,CAAC,CAAC,MAAM,CAAC;AAC/C,IAAA,CAAC;AAED,IAAA,MAAM,oBAAoB,GAAG,CAAC,CAAmC,KAAI;AACnE,QAAA,YAAY,CAAC,SAAS,GAAG,CAAC,CAAC;;QAE3B,IAAI,CAAC,CAAC,gBAAgB,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa;YAAE;AACxD,QAAA,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;AACtB,YAAA,IAAI,MAAM,IAAI,aAAa,EAAE;gBAC3B,CAAC,CAAC,cAAc,EAAE;AAClB,gBAAA,KAAK,EAAE;YACT;YACA;QACF;QACA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG;YAAE;QACxC,IAAI,gBAAgB,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,CAAC,GAAG,CAAC;YAAE;;QAE9C,CAAC,CAAC,cAAc,EAAE;QAClB,IAAI,CAAC,CAAC,CAAC,MAAM;AAAE,YAAA,WAAW,CAAC,CAAC,MAAM,CAAC;AACrC,IAAA,CAAC;AAED,IAAA,MAAM,eAAe,GACnB,OAAO,OAAO,CAAC,IAAI,KAAK,QAAQ;AAChC,QAAA,CAAC,eAAe,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC;AAClC,QAAA,EAAE,OAAO,CAAC,IAAI,KAAK,GAAG,IAAI,YAAY,CAAC,IAAI,IAAI,IAAI,CAAC;AAEtD,IAAA,MAAM,aAAa,GAAG,YAAY,CAChC,OAAsD,EACtD;AACE,QAAA,IAAI;AACF,cAAE;AACE,gBAAA,IAAI,EAAE,YAAY,CAAC,IAAI,IAAI,QAAQ;AACnC,gBAAA,QAAQ,EAAE,YAAY,CAAC,QAAQ,IAAI,CAAC;AACrC;cACD,EAAE,CAAC;AACP,QAAA,eAAe,EAAE,QAAQ;AACzB,QAAA,eAAe,EAAE,MAAM;QACvB,eAAe,EAAE,YAAY,GAAG,OAAO,GAAG,SAAS;AACnD,QAAA,OAAO,EAAE,kBAAkB;AAC3B,QAAA,SAAS,EAAE,oBAAoB;AAChC,KAAA,CACF;AAED,IAAA,MAAM,WAAW,GAAG,UAAU,CAC5B,qBAAqB,CAAC,SAAS,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,EACzD,kBAAkB,EAClB,SAAS,CACV;AACD,IAAA,MAAM,YAAY,GAAG,UAAU,CAC7B,qBAAqB,CAAC,iBAAiB,EAAE;AACvC,QAAA,CAAC,MAAM,QAAQ,CAAC,QAAQ,CAAA,CAAE,GAAG,IAAI;;;QAGjC,kBAAkB,EAAE,QAAQ,KAAK,SAAS;AAC1C,QAAA,WAAW,EAAE,YAAY;KAC1B,CAAC,EACF,gBAAgB,CACjB;IAED,QAGEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,WAAW,KAAM,IAAI,EAAE,GAAG,EAAE,OAAO,EAAA,QAAA,EAAA,CAChD,aAAa,EACb,MAAM,KACLC,GAAA,CAAC,MAAM,EAAA,EAAC,QAAQ,EAAE,CAAC,YAAY,EAAA,QAAA,EAC7BA,GAAA,CAAC,YAAY,IACX,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,EAAE,EAAE,OAAO,EACX,SAAS,EAAE,YAAY,EACvB,KAAK,EACH;AACE,0BAAE;AACE,4BAAA,QAAQ,EAAE,OAAO;4BACjB,GAAG,EAAE,QAAQ,CAAC,GAAG;4BACjB,IAAI,EAAE,QAAQ,CAAC,IAAI;AACpB;AACH,0BAAE,SAAS,EAEf,SAAS,EAAE,kBAAkB,EAC7B,oBAAoB,EAAE,eAAe,YAEpC,QAAQ,EAAA,CACI,GACR,CACV,CAAA,EAAA,CACG;AAEV,CAAC;AASD;;;AAGG;AACH,SAAS,YAAY,CAAC,EACpB,QAAQ,EACR,OAAO,EACP,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACU,EAAA;;;;;IAKlB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IACzD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;AAC/C,IAAA,MAAM,aAAa,GAAG,WAAW,CAAC,MAAK;QACrC,aAAa,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACzB,QAAA,OAAO,MAAM,aAAa,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACxC,CAAC,EAAE,EAAE,CAAC;IACN,qBAAqB,CAAC,MAAK;QACzB,gBAAgB,CAAC,IAAI,CAAC;IACxB,CAAC,EAAE,EAAE,CAAC;IACN,MAAM,KAAK,GAAG,OAAO,CAAC,SAAS,CAAC,IAAI,UAAU,GAAG,CAAC;IAElD,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,aAAa,IAAI,CAAC,KAAK,EAAE;YAC3B,QAAQ,CACN,iBAAiB,EACjB,mEAAmE;AACjE,gBAAA,uDAAuD,CAC1D;QACH;AACF,IAAA,CAAC,EAAE,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;IAE1B,MAAM,OAAO,GAAG,OAAO,CACrB,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC,EACzC,CAAC,OAAO,EAAE,aAAa,EAAE,KAAK,CAAC,CAChC;IAED,QACEA,GAAA,CAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,EAAA,QAAA,EACrCA,GAAA,CAAA,KAAA,EAAA,EAAA,GACM,KAAK,EACT,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,QAAQ,EAAA,YAAA,EACD,SAAS,EAAA,iBAAA,EAEnB,CAAC,SAAS,KAAK,CAAC,aAAa,IAAI,UAAU,GAAG,CAAC,CAAC,GAAG,OAAO,GAAG,SAAS,EAExE,QAAQ,EAAE,EAAE,YAEX,QAAQ,EAAA,CACL,EAAA,CACkB;AAE9B;AAcA;;;;;;AAMG;AACI,MAAM,aAAa,GAAiC,CAAC,EAC1D,SAAS,EACT,GAAG,KAAK,EACT,KAAI;AACH,IAAA,MAAM,OAAO,GAAG,UAAU,CAAC,cAAc,CAAC;AAC1C,IAAA,MAAM,aAAa,GAAG,OAAO,EAAE,aAAa;;AAE5C,IAAA,qBAAqB,CAAC,MAAM,aAAa,IAAI,EAAE,CAAC,aAAa,CAAC,CAAC;IAC/D,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC,KAAK,CAAC;IAC3D,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,UAAU,CACnB,qBAAqB,CAAC,gBAAgB,CAAC,EACvC,kBAAkB,EAClB,SAAS,CACV,EAAA,GACG,IAAI,EACR,EAAE,EAAE,OAAO,EAAE,OAAO,EAAA,CACpB;AAEN;AAaA;;;;;;AAMG;AACI,MAAM,WAAW,GAA+B,CAAC,EACtD,SAAS,EACT,GAAG,KAAK,EACT,KAAI;IACH,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC,KAAK,CAAC;AAC3D,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,UAAU,CACnB,qBAAqB,CAAC,cAAc,CAAC,EACrC,kBAAkB,EAClB,SAAS,CACV,KACG,IAAI,EAAA,CACR;AAEN;AAaA;;;;;;AAMG;AACI,MAAM,aAAa,GAAiC,CAAC,EAC1D,SAAS,EACT,GAAG,KAAK,EACT,KAAI;IACH,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC,KAAK,CAAC;AAC3D,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,UAAU,CACnB,qBAAqB,CAAC,gBAAgB,CAAC,EACvC,kBAAkB,EAClB,SAAS,CACV,KACG,IAAI,EAAA,CACR;AAEN;AAaA;;;;;;AAMG;AACI,MAAM,YAAY,GAAgC,CAAC,EACxD,OAAO,EACP,GAAG,KAAK,EACT,KAAI;AACH,IAAA,MAAM,OAAO,GAAG,UAAU,CAAC,cAAc,CAAC;IAC1C,QACEA,IAAC,MAAM,EAAA,EAAA,GACD,KAAK,EACT,IAAI,EAAE,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,EAC5B,OAAO,EAAE,CAAC,CAAsC,KAAI;AAClD,YAAA,OAAO,GAAG,CAAC,CAAC;YACZ,IAAI,CAAC,CAAC,CAAC,gBAAgB;gBAAE,OAAO,EAAE,KAAK,EAAE;QAC3C,CAAC,EAAA,CACD;AAEN;AAEA;AACO,MAAM,OAAO,GAAG,iBAAiB,CACtC,gBAAgB,EAChB;AACE,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,KAAK,EAAE,YAAY;CACpB,EACD,SAAS;;"}
|
|
1
|
+
{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover.tsx"],"sourcesContent":["import React, {\n cloneElement,\n createContext,\n useCallback,\n useContext,\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 { withSubComponents } from '../helpers/withSubComponents';\nimport { Portal } from '../helpers/portal';\nimport { useIsHydrated } from '../helpers/useIsHydrated';\nimport { focusTabStop, useFocusTrap } from '../helpers/useFocusTrap';\nimport { marginGap, useAnchoredPosition } from '../helpers/useAnchoredPosition';\nimport { useClientLayoutEffect } from '../helpers/useClientLayoutEffect';\nimport { getDeepestActiveElement } from '../helpers/shadowDom';\nimport { useOutsidePress } from '../helpers/useOutsidePress';\nimport { buttonType } from '../helpers/buttonType';\nimport { warnOnce } from '../helpers/devWarnings';\nimport { Button, ButtonOwnProps } from '../elements/Button';\nimport type { PickerPosition } from '../form/_pickerInternals/pickerTypes';\n\n/**\n * Where the panel opens against its trigger: below (`bottom-*`) or above\n * (`top-*`), lined up with the trigger's left or right edge. `auto` picks the\n * one that keeps the panel in the viewport, preferring below and lined up on\n * the left. The same union the date and time pickers take.\n */\nexport type PopoverPosition = PickerPosition;\n\n/**\n * Props for the Popover component. `className`, `id`, the other HTML\n * attributes and the helper props land on the wrapper around the trigger,\n * not on the panel; `contentClassName` reaches the panel.\n * @extraProp {string} [className] - Additional classes for the wrapper around the trigger. The panel takes `contentClassName`.\n */\nexport interface PopoverProps\n extends\n Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'children'>,\n Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n /**\n * The element that opens and closes the popover, such as a `Button`.\n * Popover gives it `aria-haspopup=\"dialog\"`, `aria-expanded`,\n * `aria-controls` while the panel is open, and click and key handlers that\n * run after its own (call `preventDefault()` in yours to keep the popover\n * from toggling). It has to be a single element that passes `onClick` and\n * `onKeyDown` to its DOM node. Enter and Space toggle a trigger the browser\n * doesn't click on its own, and an intrinsic element that isn't already a\n * control (a `<span>`) also gets `role=\"button\"` and `tabIndex={0}` unless\n * it sets them; a component that renders one has to take those itself.\n */\n trigger: React.ReactElement;\n /** The panel's content, usually `Popover.Header`, `Popover.Body` and `Popover.Footer`. */\n children?: React.ReactNode;\n /**\n * Controlled open state. When set, the trigger and every dismissal only\n * report through `onOpenChange`.\n */\n open?: boolean;\n /**\n * Initial open state when uncontrolled. Opening moves focus into the\n * panel, so a popover that starts open takes focus once the page loads.\n * @defaultValue false\n */\n defaultOpen?: boolean;\n /**\n * Called with the state asked for: `true` from the trigger opening it,\n * `false` from the trigger, `Popover.Close`, Escape or an outside\n * `pointerdown`. Fires in both controlled and uncontrolled use.\n */\n onOpenChange?: (open: boolean) => void;\n /**\n * Where the panel opens against the trigger. Left out, it opens below and\n * lines up with the trigger's start edge, which is its right edge on a\n * right-to-left page, so a trigger at the start of the line doesn't push\n * the panel off the screen. A corner you pass stays physical, so\n * `bottom-left` lines up the left edges on either page.\n * @defaultValue 'bottom-left'\n */\n position?: PopoverPosition;\n /**\n * Render the panel through `Portal`, into the `portalContainer` a\n * `ConfigProvider` sets, `document.body` by default, fixed to the viewport,\n * so an ancestor's `overflow`, `transform` or stacking context can't clip\n * it. The panel then shows from the commit after hydration, never in server\n * markup. Theming variables set on an ancestor of the trigger reach it only\n * when its container is inside that ancestor.\n * @defaultValue false\n */\n appendToBody?: boolean;\n /**\n * Keep Tab and Shift+Tab inside the panel while it is open, as the ARIA\n * dialog pattern does for a non-modal dialog. Pointer focus leaves freely\n * and the page stays usable. With `false`, Tab moves past the panel and\n * the popover stays open. Focus moves into the panel on open and back to\n * the trigger on close either way.\n * @defaultValue true\n */\n trapFocus?: boolean;\n /**\n * Close on a `pointerdown` outside the trigger and the panel. Content the\n * panel renders through a portal (a nested `Popover`, a portaled picker)\n * still counts as inside.\n * @defaultValue true\n */\n closeOnClickOutside?: boolean;\n /**\n * Close on Escape while focus is in the panel or on the trigger. A dialog\n * nested in the panel, such as a date picker's calendar, takes its own\n * Escape first, and so does content that calls `preventDefault()` on it.\n * @defaultValue true\n */\n closeOnEscape?: boolean;\n /**\n * The panel's accessible name. Without it the panel is named by its\n * `Popover.Header`, and a development build warns when it has neither.\n */\n ariaLabel?: string;\n /** Additional classes for the panel (`.popover-content`). */\n contentClassName?: string;\n}\n\ninterface PopoverContextValue {\n /** The id `Popover.Header` takes, which names the panel. */\n titleId: string;\n /** Records a mounted `Popover.Header`; the returned function forgets it. */\n registerTitle: () => () => void;\n /** Asks the popover to close. */\n close: () => void;\n}\n\nconst PopoverContext = createContext<PopoverContextValue | null>(null);\n\n/** The trigger props Popover reads before replacing them. */\ninterface TriggerProps {\n onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\n role?: string;\n tabIndex?: number;\n href?: unknown;\n}\n\n/** Intrinsic elements that are controls already, and keep their own role. */\nconst NATIVE_CONTROLS = new Set([\n 'button',\n 'input',\n 'select',\n 'textarea',\n 'summary',\n]);\n\n/**\n * Whether the browser answers this key on `el` itself, by clicking it or by\n * using the key as input, so the trigger's click handler covers it.\n */\nfunction handlesKeyItself(el: Element, key: string): boolean {\n if (NATIVE_CONTROLS.has(el.localName)) return true;\n return el.localName === 'a' && key === 'Enter' && el.hasAttribute('href');\n}\n\n/** The innermost dialog the event passed through, which is the one its Escape belongs to. */\nfunction nearestDialog(event: Event): EventTarget | null {\n return (\n event.composedPath().find(node => {\n const role = (node as Element).getAttribute?.('role');\n return role === 'dialog' || role === 'alertdialog';\n }) ?? null\n );\n}\n\n/**\n * The `Popover` component opens a panel of interactive content, such as a filter form or a set of share options, anchored to the element that toggles it.\n *\n * The panel is a non-modal `role=\"dialog\"`: focus moves into it on open\n * and returns to the trigger on close, while the rest of the page stays\n * reachable by pointer and assistive technology. For hover-only hints use\n * `Tooltip`, and for a list of actions use `Dropdown`.\n *\n * @function\n * @param {PopoverProps} props - Props for the Popover component.\n * @returns {JSX.Element} The trigger in its wrapper, and the panel while open.\n *\n * @example\n * <Popover trigger={<Button>Filters</Button>}>\n * <Popover.Header>Filter rows</Popover.Header>\n * <Popover.Body>…</Popover.Body>\n * <Popover.Footer>\n * <Popover.Close>Done</Popover.Close>\n * </Popover.Footer>\n * </Popover>\n */\nconst PopoverComponent: React.FC<PopoverProps> = ({\n trigger,\n children,\n open: controlledOpen,\n defaultOpen = false,\n onOpenChange,\n position,\n appendToBody = false,\n trapFocus = true,\n closeOnClickOutside = true,\n closeOnEscape = true,\n ariaLabel,\n className,\n contentClassName,\n ...props\n}) => {\n const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n const rootRef = useRef<HTMLDivElement>(null);\n const panelRef = useRef<HTMLDivElement>(null);\n const baseId = useId();\n const panelId = `${baseId}-panel`;\n const titleId = `${baseId}-title`;\n\n const isControlled = controlledOpen !== undefined;\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const isOpen = controlledOpen ?? internalOpen;\n\n const requestOpen = useCallback(\n (next: boolean) => {\n onOpenChange?.(next);\n if (!isControlled) setInternalOpen(next);\n },\n [isControlled, onOpenChange]\n );\n const close = useCallback(() => requestOpen(false), [requestOpen]);\n\n // A portaled panel has no server markup, so it only exists from the commit\n // after hydration. Everything that measures or focuses it waits for that.\n const hydrated = useIsHydrated();\n const panelMounted = isOpen && (hydrated || !appendToBody);\n\n const resolved = useAnchoredPosition(rootRef, panelRef, {\n active: panelMounted,\n position,\n fixed: appendToBody,\n // The gap comes from `--bulma-popover-offset` in the stylesheet, so the\n // coordinates leave it out and `auto` reads it off the panel.\n offset: 0,\n styledGap: marginGap,\n });\n\n // The trigger renders first inside the wrapper. Read when needed rather\n // than held, so a trigger that remounted is still the one found.\n const triggerNode = useCallback((): HTMLElement | null => {\n const first = rootRef.current?.firstElementChild;\n return first && first !== panelRef.current ? (first as HTMLElement) : null;\n }, []);\n const restoreFocusRef = useMemo(\n () => ({\n get current() {\n return triggerNode();\n },\n }),\n [triggerNode]\n );\n\n useFocusTrap(panelRef, {\n active: panelMounted && trapFocus,\n restoreFocus: restoreFocusRef,\n });\n\n // Without the trap, focus still arrives in the panel and goes back to the\n // trigger, on the trap's terms: only while the panel still holds it.\n useEffect(() => {\n const panel = panelRef.current;\n if (!panelMounted || trapFocus || !panel) return undefined;\n focusTabStop(panel);\n return () => {\n const doc = panel.ownerDocument;\n const now = getDeepestActiveElement(doc);\n if (!now || now === doc.body || panel.contains(now)) {\n triggerNode()?.focus();\n }\n };\n }, [panelMounted, trapFocus, triggerNode]);\n\n // A press outside the wrapper, which holds the trigger and the panel,\n // closes it. One inside the panel's React tree counts as inside, so content\n // the panel portals elsewhere does too.\n const markInsidePress = useOutsidePress(\n rootRef,\n panelMounted && closeOnClickOutside,\n close\n );\n\n const handlePanelKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (e.key !== 'Escape' || !closeOnEscape || e.defaultPrevented) return;\n // React bubbles the key here from portaled content as well, so a dialog\n // of its own on the way (a nested popover, a picker's calendar) owns it.\n const owner = nearestDialog(e.nativeEvent);\n if (owner && owner !== panelRef.current) return;\n e.preventDefault();\n close();\n };\n\n const triggerProps = trigger.props as TriggerProps;\n\n const handleTriggerClick = (e: React.MouseEvent<HTMLElement>) => {\n triggerProps.onClick?.(e);\n if (!e.defaultPrevented) requestOpen(!isOpen);\n };\n\n const handleTriggerKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n triggerProps.onKeyDown?.(e);\n // A key on something inside the trigger is that element's to answer.\n if (e.defaultPrevented || e.target !== e.currentTarget) return;\n if (e.key === 'Escape') {\n if (isOpen && closeOnEscape) {\n e.preventDefault();\n close();\n }\n return;\n }\n if (e.key !== 'Enter' && e.key !== ' ') return;\n if (handlesKeyItself(e.currentTarget, e.key)) return;\n // Space would scroll the page; a held key repeats.\n e.preventDefault();\n if (!e.repeat) requestOpen(!isOpen);\n };\n\n const needsButtonRole =\n typeof trigger.type === 'string' &&\n !NATIVE_CONTROLS.has(trigger.type) &&\n !(trigger.type === 'a' && triggerProps.href != null);\n\n const clonedTrigger = cloneElement(\n trigger as React.ReactElement<Record<string, unknown>>,\n {\n ...(needsButtonRole\n ? {\n role: triggerProps.role ?? 'button',\n tabIndex: triggerProps.tabIndex ?? 0,\n }\n : {}),\n 'aria-haspopup': 'dialog',\n 'aria-expanded': isOpen,\n 'aria-controls': panelMounted ? panelId : undefined,\n onClick: handleTriggerClick,\n onKeyDown: handleTriggerKeyDown,\n }\n );\n\n const rootClasses = classNames(\n usePrefixedClassNames('popover', { 'is-active': isOpen }),\n bulmaHelperClasses,\n className\n );\n const panelClasses = classNames(\n usePrefixedClassNames('popover-content', {\n [`is-${resolved.position}`]: true,\n // The default lines up with the trigger's inline start, so the\n // stylesheet moves it to the right edge on a right-to-left page.\n 'is-start-aligned': position === undefined,\n 'is-portal': appendToBody,\n }),\n contentClassName\n );\n\n return (\n // The ref after the spread: React 19 hands a function component a `ref`\n // prop like any other, and the wrapper has to stay ours.\n <div className={rootClasses} {...rest} ref={rootRef}>\n {clonedTrigger}\n {isOpen && (\n <Portal disabled={!appendToBody}>\n <PopoverPanel\n panelRef={panelRef}\n titleId={titleId}\n ariaLabel={ariaLabel}\n close={close}\n id={panelId}\n className={panelClasses}\n style={\n appendToBody\n ? {\n position: 'fixed',\n top: resolved.top,\n left: resolved.left,\n }\n : undefined\n }\n onKeyDown={handlePanelKeyDown}\n onPointerDownCapture={markInsidePress}\n >\n {children}\n </PopoverPanel>\n </Portal>\n )}\n </div>\n );\n};\n\ninterface PopoverPanelProps extends React.HTMLAttributes<HTMLDivElement> {\n panelRef: React.RefObject<HTMLDivElement | null>;\n titleId: string;\n ariaLabel?: string;\n close: () => void;\n}\n\n/**\n * The open panel. It mounts with each opening, so it counts the\n * `Popover.Header`s inside it afresh every time.\n */\nfunction PopoverPanel({\n panelRef,\n titleId,\n ariaLabel,\n close,\n children,\n ...attrs\n}: PopoverPanelProps) {\n // Headers register in a layout effect, after this first render, and this\n // panel's own layout effect runs after theirs. Until then the panel assumes\n // it has one, so a panel that does is named from its first commit, before\n // focus moves in, and one that doesn't drops the reference before it paints.\n const [titlesCounted, setTitlesCounted] = useState(false);\n const [titleCount, setTitleCount] = useState(0);\n const registerTitle = useCallback(() => {\n setTitleCount(n => n + 1);\n return () => setTitleCount(n => n - 1);\n }, []);\n useClientLayoutEffect(() => {\n setTitlesCounted(true);\n }, []);\n const named = Boolean(ariaLabel) || titleCount > 0;\n\n useEffect(() => {\n if (titlesCounted && !named) {\n warnOnce(\n 'Popover:unnamed',\n '[bestax-bulma] <Popover> opened a panel with no accessible name. ' +\n 'Pass ariaLabel, or render a Popover.Header inside it.'\n );\n }\n }, [titlesCounted, named]);\n\n const context = useMemo(\n () => ({ titleId, registerTitle, close }),\n [titleId, registerTitle, close]\n );\n\n return (\n <PopoverContext.Provider value={context}>\n <div\n {...attrs}\n ref={panelRef}\n role=\"dialog\"\n aria-label={ariaLabel}\n aria-labelledby={\n !ariaLabel && (!titlesCounted || titleCount > 0) ? titleId : undefined\n }\n tabIndex={-1}\n >\n {children}\n </div>\n </PopoverContext.Provider>\n );\n}\n\n/**\n * Props for the Popover.Header component. Its `id` is the one the panel's\n * `aria-labelledby` names, so it isn't yours to set.\n */\nexport interface PopoverHeaderProps\n extends\n Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'id'>,\n BulmaClassesProps {\n /** Additional CSS classes. */\n className?: string;\n}\n\n/**\n * The popover's title, which names the panel for assistive technology.\n *\n * @function\n * @param {PopoverHeaderProps} props - Props for the Popover.Header component.\n * @returns {JSX.Element} The header element.\n */\nexport const PopoverHeader: React.FC<PopoverHeaderProps> = ({\n className,\n ...props\n}) => {\n const context = useContext(PopoverContext);\n const registerTitle = context?.registerTitle;\n // Before paint, so the panel is named by the time it shows.\n useClientLayoutEffect(() => registerTitle?.(), [registerTitle]);\n const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n return (\n <div\n className={classNames(\n usePrefixedClassNames('popover-header'),\n bulmaHelperClasses,\n className\n )}\n {...rest}\n id={context?.titleId}\n />\n );\n};\n\n/**\n * Props for the Popover.Body component.\n */\nexport interface PopoverBodyProps\n extends\n Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n BulmaClassesProps {\n /** Additional CSS classes. */\n className?: string;\n}\n\n/**\n * The popover's main content area.\n *\n * @function\n * @param {PopoverBodyProps} props - Props for the Popover.Body component.\n * @returns {JSX.Element} The body element.\n */\nexport const PopoverBody: React.FC<PopoverBodyProps> = ({\n className,\n ...props\n}) => {\n const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n return (\n <div\n className={classNames(\n usePrefixedClassNames('popover-body'),\n bulmaHelperClasses,\n className\n )}\n {...rest}\n />\n );\n};\n\n/**\n * Props for the Popover.Footer component.\n */\nexport interface PopoverFooterProps\n extends\n Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n BulmaClassesProps {\n /** Additional CSS classes. */\n className?: string;\n}\n\n/**\n * A row of actions along the bottom of the popover, aligned to the end.\n *\n * @function\n * @param {PopoverFooterProps} props - Props for the Popover.Footer component.\n * @returns {JSX.Element} The footer element.\n */\nexport const PopoverFooter: React.FC<PopoverFooterProps> = ({\n className,\n ...props\n}) => {\n const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n return (\n <div\n className={classNames(\n usePrefixedClassNames('popover-footer'),\n bulmaHelperClasses,\n className\n )}\n {...rest}\n />\n );\n};\n\n/**\n * Props for the Popover.Close component: the props of a `Button` rendered as\n * a `<button>`.\n * @extraProp {'button' | 'submit' | 'reset'} [type='button'] - Button type. Defaults to `'button'`, so a close button inside a form doesn't submit it.\n * @extraProp {React.MouseEventHandler<HTMLButtonElement>} [onClick] - Runs before the popover closes. Call `preventDefault()` to keep it open.\n */\nexport interface PopoverCloseProps\n extends\n ButtonOwnProps,\n Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonOwnProps> {}\n\n/**\n * A `Button` that closes the popover, handing focus back to the trigger.\n *\n * @function\n * @param {PopoverCloseProps} props - Props for the Popover.Close component.\n * @returns {JSX.Element} The close button.\n */\nexport const PopoverClose: React.FC<PopoverCloseProps> = ({\n onClick,\n ...props\n}) => {\n const context = useContext(PopoverContext);\n return (\n <Button\n {...props}\n type={buttonType(props.type)}\n onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(e);\n if (!e.defaultPrevented) context?.close();\n }}\n />\n );\n};\n\n/** Popover with Header, Body, Footer and Close sub-components. */\nexport const Popover = withSubComponents(\n PopoverComponent,\n {\n Header: PopoverHeader,\n Body: PopoverBody,\n Footer: PopoverFooter,\n Close: PopoverClose,\n },\n 'Popover'\n);\n\nexport default Popover;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;AAuIA,MAAM,cAAc,GAAG,aAAa,CAA6B,IAAI,CAAC;AAWtE;AACA,MAAM,eAAe,GAAG,IAAI,GAAG,CAAC;IAC9B,QAAQ;IACR,OAAO;IACP,QAAQ;IACR,UAAU;IACV,SAAS;AACV,CAAA,CAAC;AAEF;;;AAGG;AACH,SAAS,gBAAgB,CAAC,EAAW,EAAE,GAAW,EAAA;AAChD,IAAA,IAAI,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC,SAAS,CAAC;AAAE,QAAA,OAAO,IAAI;AAClD,IAAA,OAAO,EAAE,CAAC,SAAS,KAAK,GAAG,IAAI,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC;AAC3E;AAEA;AACA,SAAS,aAAa,CAAC,KAAY,EAAA;IACjC,QACE,KAAK,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,IAAI,IAAG;QAC/B,MAAM,IAAI,GAAI,IAAgB,CAAC,YAAY,GAAG,MAAM,CAAC;AACrD,QAAA,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,aAAa;AACpD,IAAA,CAAC,CAAC,IAAI,IAAI;AAEd;AAEA;;;;;;;;;;;;;;;;;;;;AAoBG;AACH,MAAM,gBAAgB,GAA2B,CAAC,EAChD,OAAO,EACP,QAAQ,EACR,IAAI,EAAE,cAAc,EACpB,WAAW,GAAG,KAAK,EACnB,YAAY,EACZ,QAAQ,EACR,YAAY,GAAG,KAAK,EACpB,SAAS,GAAG,IAAI,EAChB,mBAAmB,GAAG,IAAI,EAC1B,aAAa,GAAG,IAAI,EACpB,SAAS,EACT,SAAS,EACT,gBAAgB,EAChB,GAAG,KAAK,EACT,KAAI;IACH,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC,KAAK,CAAC;AAC3D,IAAA,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC;AAC5C,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC;AAC7C,IAAA,MAAM,MAAM,GAAG,KAAK,EAAE;AACtB,IAAA,MAAM,OAAO,GAAG,CAAA,EAAG,MAAM,QAAQ;AACjC,IAAA,MAAM,OAAO,GAAG,CAAA,EAAG,MAAM,QAAQ;AAEjC,IAAA,MAAM,YAAY,GAAG,cAAc,KAAK,SAAS;IACjD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC;AAC7D,IAAA,MAAM,MAAM,GAAG,cAAc,IAAI,YAAY;AAE7C,IAAA,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,IAAa,KAAI;AAChB,QAAA,YAAY,GAAG,IAAI,CAAC;AACpB,QAAA,IAAI,CAAC,YAAY;YAAE,eAAe,CAAC,IAAI,CAAC;AAC1C,IAAA,CAAC,EACD,CAAC,YAAY,EAAE,YAAY,CAAC,CAC7B;AACD,IAAA,MAAM,KAAK,GAAG,WAAW,CAAC,MAAM,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;;;AAIlE,IAAA,MAAM,QAAQ,GAAG,aAAa,EAAE;IAChC,MAAM,YAAY,GAAG,MAAM,KAAK,QAAQ,IAAI,CAAC,YAAY,CAAC;AAE1D,IAAA,MAAM,QAAQ,GAAG,mBAAmB,CAAC,OAAO,EAAE,QAAQ,EAAE;AACtD,QAAA,MAAM,EAAE,YAAY;QACpB,QAAQ;AACR,QAAA,KAAK,EAAE,YAAY;;;AAGnB,QAAA,MAAM,EAAE,CAAC;AACT,QAAA,SAAS,EAAE,SAAS;AACrB,KAAA,CAAC;;;AAIF,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,MAAyB;AACvD,QAAA,MAAM,KAAK,GAAG,OAAO,CAAC,OAAO,EAAE,iBAAiB;AAChD,QAAA,OAAO,KAAK,IAAI,KAAK,KAAK,QAAQ,CAAC,OAAO,GAAI,KAAqB,GAAG,IAAI;IAC5E,CAAC,EAAE,EAAE,CAAC;AACN,IAAA,MAAM,eAAe,GAAG,OAAO,CAC7B,OAAO;AACL,QAAA,IAAI,OAAO,GAAA;YACT,OAAO,WAAW,EAAE;QACtB,CAAC;AACF,KAAA,CAAC,EACF,CAAC,WAAW,CAAC,CACd;IAED,YAAY,CAAC,QAAQ,EAAE;QACrB,MAAM,EAAE,YAAY,IAAI,SAAS;AACjC,QAAA,YAAY,EAAE,eAAe;AAC9B,KAAA,CAAC;;;IAIF,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO;AAC9B,QAAA,IAAI,CAAC,YAAY,IAAI,SAAS,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,SAAS;QAC1D,YAAY,CAAC,KAAK,CAAC;AACnB,QAAA,OAAO,MAAK;AACV,YAAA,MAAM,GAAG,GAAG,KAAK,CAAC,aAAa;AAC/B,YAAA,MAAM,GAAG,GAAG,uBAAuB,CAAC,GAAG,CAAC;AACxC,YAAA,IAAI,CAAC,GAAG,IAAI,GAAG,KAAK,GAAG,CAAC,IAAI,IAAI,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;AACnD,gBAAA,WAAW,EAAE,EAAE,KAAK,EAAE;YACxB;AACF,QAAA,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC;;;;AAK1C,IAAA,MAAM,eAAe,GAAG,eAAe,CACrC,OAAO,EACP,YAAY,IAAI,mBAAmB,EACnC,KAAK,CACN;AAED,IAAA,MAAM,kBAAkB,GAAG,CAAC,CAAsC,KAAI;QACpE,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,CAAC,aAAa,IAAI,CAAC,CAAC,gBAAgB;YAAE;;;QAGhE,MAAM,KAAK,GAAG,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC;AAC1C,QAAA,IAAI,KAAK,IAAI,KAAK,KAAK,QAAQ,CAAC,OAAO;YAAE;QACzC,CAAC,CAAC,cAAc,EAAE;AAClB,QAAA,KAAK,EAAE;AACT,IAAA,CAAC;AAED,IAAA,MAAM,YAAY,GAAG,OAAO,CAAC,KAAqB;AAElD,IAAA,MAAM,kBAAkB,GAAG,CAAC,CAAgC,KAAI;AAC9D,QAAA,YAAY,CAAC,OAAO,GAAG,CAAC,CAAC;QACzB,IAAI,CAAC,CAAC,CAAC,gBAAgB;AAAE,YAAA,WAAW,CAAC,CAAC,MAAM,CAAC;AAC/C,IAAA,CAAC;AAED,IAAA,MAAM,oBAAoB,GAAG,CAAC,CAAmC,KAAI;AACnE,QAAA,YAAY,CAAC,SAAS,GAAG,CAAC,CAAC;;QAE3B,IAAI,CAAC,CAAC,gBAAgB,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa;YAAE;AACxD,QAAA,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;AACtB,YAAA,IAAI,MAAM,IAAI,aAAa,EAAE;gBAC3B,CAAC,CAAC,cAAc,EAAE;AAClB,gBAAA,KAAK,EAAE;YACT;YACA;QACF;QACA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG;YAAE;QACxC,IAAI,gBAAgB,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,CAAC,GAAG,CAAC;YAAE;;QAE9C,CAAC,CAAC,cAAc,EAAE;QAClB,IAAI,CAAC,CAAC,CAAC,MAAM;AAAE,YAAA,WAAW,CAAC,CAAC,MAAM,CAAC;AACrC,IAAA,CAAC;AAED,IAAA,MAAM,eAAe,GACnB,OAAO,OAAO,CAAC,IAAI,KAAK,QAAQ;AAChC,QAAA,CAAC,eAAe,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC;AAClC,QAAA,EAAE,OAAO,CAAC,IAAI,KAAK,GAAG,IAAI,YAAY,CAAC,IAAI,IAAI,IAAI,CAAC;AAEtD,IAAA,MAAM,aAAa,GAAG,YAAY,CAChC,OAAsD,EACtD;AACE,QAAA,IAAI;AACF,cAAE;AACE,gBAAA,IAAI,EAAE,YAAY,CAAC,IAAI,IAAI,QAAQ;AACnC,gBAAA,QAAQ,EAAE,YAAY,CAAC,QAAQ,IAAI,CAAC;AACrC;cACD,EAAE,CAAC;AACP,QAAA,eAAe,EAAE,QAAQ;AACzB,QAAA,eAAe,EAAE,MAAM;QACvB,eAAe,EAAE,YAAY,GAAG,OAAO,GAAG,SAAS;AACnD,QAAA,OAAO,EAAE,kBAAkB;AAC3B,QAAA,SAAS,EAAE,oBAAoB;AAChC,KAAA,CACF;AAED,IAAA,MAAM,WAAW,GAAG,UAAU,CAC5B,qBAAqB,CAAC,SAAS,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,EACzD,kBAAkB,EAClB,SAAS,CACV;AACD,IAAA,MAAM,YAAY,GAAG,UAAU,CAC7B,qBAAqB,CAAC,iBAAiB,EAAE;AACvC,QAAA,CAAC,MAAM,QAAQ,CAAC,QAAQ,CAAA,CAAE,GAAG,IAAI;;;QAGjC,kBAAkB,EAAE,QAAQ,KAAK,SAAS;AAC1C,QAAA,WAAW,EAAE,YAAY;KAC1B,CAAC,EACF,gBAAgB,CACjB;IAED,QAGEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,WAAW,KAAM,IAAI,EAAE,GAAG,EAAE,OAAO,EAAA,QAAA,EAAA,CAChD,aAAa,EACb,MAAM,KACLC,GAAA,CAAC,MAAM,EAAA,EAAC,QAAQ,EAAE,CAAC,YAAY,EAAA,QAAA,EAC7BA,GAAA,CAAC,YAAY,IACX,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,EAAE,EAAE,OAAO,EACX,SAAS,EAAE,YAAY,EACvB,KAAK,EACH;AACE,0BAAE;AACE,4BAAA,QAAQ,EAAE,OAAO;4BACjB,GAAG,EAAE,QAAQ,CAAC,GAAG;4BACjB,IAAI,EAAE,QAAQ,CAAC,IAAI;AACpB;AACH,0BAAE,SAAS,EAEf,SAAS,EAAE,kBAAkB,EAC7B,oBAAoB,EAAE,eAAe,YAEpC,QAAQ,EAAA,CACI,GACR,CACV,CAAA,EAAA,CACG;AAEV,CAAC;AASD;;;AAGG;AACH,SAAS,YAAY,CAAC,EACpB,QAAQ,EACR,OAAO,EACP,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACU,EAAA;;;;;IAKlB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IACzD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;AAC/C,IAAA,MAAM,aAAa,GAAG,WAAW,CAAC,MAAK;QACrC,aAAa,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACzB,QAAA,OAAO,MAAM,aAAa,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACxC,CAAC,EAAE,EAAE,CAAC;IACN,qBAAqB,CAAC,MAAK;QACzB,gBAAgB,CAAC,IAAI,CAAC;IACxB,CAAC,EAAE,EAAE,CAAC;IACN,MAAM,KAAK,GAAG,OAAO,CAAC,SAAS,CAAC,IAAI,UAAU,GAAG,CAAC;IAElD,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,aAAa,IAAI,CAAC,KAAK,EAAE;YAC3B,QAAQ,CACN,iBAAiB,EACjB,mEAAmE;AACjE,gBAAA,uDAAuD,CAC1D;QACH;AACF,IAAA,CAAC,EAAE,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;IAE1B,MAAM,OAAO,GAAG,OAAO,CACrB,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC,EACzC,CAAC,OAAO,EAAE,aAAa,EAAE,KAAK,CAAC,CAChC;IAED,QACEA,GAAA,CAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,EAAA,QAAA,EACrCA,GAAA,CAAA,KAAA,EAAA,EAAA,GACM,KAAK,EACT,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,QAAQ,EAAA,YAAA,EACD,SAAS,EAAA,iBAAA,EAEnB,CAAC,SAAS,KAAK,CAAC,aAAa,IAAI,UAAU,GAAG,CAAC,CAAC,GAAG,OAAO,GAAG,SAAS,EAExE,QAAQ,EAAE,EAAE,YAEX,QAAQ,EAAA,CACL,EAAA,CACkB;AAE9B;AAcA;;;;;;AAMG;AACI,MAAM,aAAa,GAAiC,CAAC,EAC1D,SAAS,EACT,GAAG,KAAK,EACT,KAAI;AACH,IAAA,MAAM,OAAO,GAAG,UAAU,CAAC,cAAc,CAAC;AAC1C,IAAA,MAAM,aAAa,GAAG,OAAO,EAAE,aAAa;;AAE5C,IAAA,qBAAqB,CAAC,MAAM,aAAa,IAAI,EAAE,CAAC,aAAa,CAAC,CAAC;IAC/D,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC,KAAK,CAAC;IAC3D,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,UAAU,CACnB,qBAAqB,CAAC,gBAAgB,CAAC,EACvC,kBAAkB,EAClB,SAAS,CACV,EAAA,GACG,IAAI,EACR,EAAE,EAAE,OAAO,EAAE,OAAO,EAAA,CACpB;AAEN;AAaA;;;;;;AAMG;AACI,MAAM,WAAW,GAA+B,CAAC,EACtD,SAAS,EACT,GAAG,KAAK,EACT,KAAI;IACH,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC,KAAK,CAAC;AAC3D,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,UAAU,CACnB,qBAAqB,CAAC,cAAc,CAAC,EACrC,kBAAkB,EAClB,SAAS,CACV,KACG,IAAI,EAAA,CACR;AAEN;AAaA;;;;;;AAMG;AACI,MAAM,aAAa,GAAiC,CAAC,EAC1D,SAAS,EACT,GAAG,KAAK,EACT,KAAI;IACH,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC,KAAK,CAAC;AAC3D,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,UAAU,CACnB,qBAAqB,CAAC,gBAAgB,CAAC,EACvC,kBAAkB,EAClB,SAAS,CACV,KACG,IAAI,EAAA,CACR;AAEN;AAaA;;;;;;AAMG;AACI,MAAM,YAAY,GAAgC,CAAC,EACxD,OAAO,EACP,GAAG,KAAK,EACT,KAAI;AACH,IAAA,MAAM,OAAO,GAAG,UAAU,CAAC,cAAc,CAAC;IAC1C,QACEA,IAAC,MAAM,EAAA,EAAA,GACD,KAAK,EACT,IAAI,EAAE,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,EAC5B,OAAO,EAAE,CAAC,CAAsC,KAAI;AAClD,YAAA,OAAO,GAAG,CAAC,CAAC;YACZ,IAAI,CAAC,CAAC,CAAC,gBAAgB;gBAAE,OAAO,EAAE,KAAK,EAAE;QAC3C,CAAC,EAAA,CACD;AAEN;AAEA;AACO,MAAM,OAAO,GAAG,iBAAiB,CACtC,gBAAgB,EAChB;AACE,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,KAAK,EAAE,YAAY;CACpB,EACD,SAAS;;"}
|
|
@@ -2,14 +2,11 @@
|
|
|
2
2
|
'use client';
|
|
3
3
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
4
4
|
import { forwardRef, useRef, useCallback, useEffect } from 'react';
|
|
5
|
-
import { createPortal } from 'react-dom';
|
|
6
5
|
import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
|
|
7
6
|
import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
|
|
8
7
|
import { withSubComponents } from '../helpers/withSubComponents.js';
|
|
9
8
|
import { useScrollLock } from '../helpers/scrollLock.js';
|
|
10
|
-
import {
|
|
11
|
-
import { LocalePortalScope } from '../helpers/LocaleProvider.js';
|
|
12
|
-
import { useConfig } from '../helpers/Config.js';
|
|
9
|
+
import { usePortalProp, Portal } from '../helpers/portal.js';
|
|
13
10
|
import { buttonType } from '../helpers/buttonType.js';
|
|
14
11
|
import { useOverlayStack, useOverlayEscape } from '../helpers/overlayStack.js';
|
|
15
12
|
import { trapTab } from '../helpers/useFocusTrap.js';
|
|
@@ -44,11 +41,11 @@ import { inertProps } from '../helpers/inertProps.js';
|
|
|
44
41
|
*/
|
|
45
42
|
const SidebarComponent = forwardRef(({ isOpen, onClose, position = 'left', width = '260px', isFullwidth, fullWidth, overlay = true, overlayClose = true, escapeClose = true, canCancel = true, children, inline = false, className, style, ...props }, ref) => {
|
|
46
43
|
const { bulmaHelperClasses, rest } = useBulmaClasses(props);
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
//
|
|
50
|
-
//
|
|
51
|
-
const defaultTarget = inline
|
|
44
|
+
// A portal has no server-rendered counterpart, so the sidebar renders in
|
|
45
|
+
// place on the server and while hydrating, and moves into its portal once
|
|
46
|
+
// the client takes over, as Modal's `portal` does. An `inline` one stays
|
|
47
|
+
// in place, so a change to the configured default moves nothing.
|
|
48
|
+
const { isPortaled, defaultTarget } = usePortalProp(!inline);
|
|
52
49
|
const sidebarRef = useRef(null);
|
|
53
50
|
// Cleanup returned by a consumer's callback ref on attach, held until detach.
|
|
54
51
|
const consumerCleanupRef = useRef(null);
|
|
@@ -91,21 +88,23 @@ const SidebarComponent = forwardRef(({ isOpen, onClose, position = 'left', width
|
|
|
91
88
|
return undefined;
|
|
92
89
|
return trapTab(() => sidebarRef.current, window, () => isTopmost('modal'));
|
|
93
90
|
}, [isOpen, overlay, isTopmost]);
|
|
94
|
-
//
|
|
95
|
-
// helper so an overlapping Modal/Dialog/Loading doesn't unlock
|
|
91
|
+
// Lock the page's scrolling when sidebar is open. Ref-counted through the
|
|
92
|
+
// shared helper so an overlapping Modal/Dialog/Loading doesn't unlock
|
|
93
|
+
// underneath.
|
|
96
94
|
useScrollLock(isOpen && overlay);
|
|
97
95
|
// Move focus into the sidebar on open, to the first stop Tab wraps to or
|
|
98
|
-
// the sidebar itself, and hand it back on close, as `Modal` does.
|
|
99
|
-
//
|
|
100
|
-
// back from the old nodes and moved
|
|
101
|
-
// focus is decided as it opens, so
|
|
102
|
-
// leaves focus where the user has it.
|
|
103
|
-
// no Tab, so with a modal overlay
|
|
104
|
-
//
|
|
105
|
-
// controls out of reach.
|
|
96
|
+
// the sidebar itself, and hand it back on close, as `Modal` does. Moving
|
|
97
|
+
// into the portal after hydration, or to a different `defaultTarget`,
|
|
98
|
+
// remounts the sidebar: focus is handed back from the old nodes and moved
|
|
99
|
+
// into the new ones. Whether it takes focus is decided as it opens, so
|
|
100
|
+
// `overlay` changing while it's open leaves focus where the user has it.
|
|
101
|
+
// Without an overlay the sidebar holds no Tab, so with a modal overlay
|
|
102
|
+
// open under it, it leaves focus alone: the first Tab would take focus
|
|
103
|
+
// back there and leave the sidebar's other controls out of reach.
|
|
106
104
|
useOverlayFocus(sidebarRef, isOpen, {
|
|
107
105
|
modal: overlay,
|
|
108
|
-
|
|
106
|
+
// In place it's `false`, which no portal target is.
|
|
107
|
+
remountKey: isPortaled ? defaultTarget : false,
|
|
109
108
|
});
|
|
110
109
|
// Use combined ref
|
|
111
110
|
const combinedRef = useCallback((node) => {
|
|
@@ -156,15 +155,8 @@ const SidebarComponent = forwardRef(({ isOpen, onClose, position = 'left', width
|
|
|
156
155
|
'--bulma-sidebar-width': resolvedFullwidth ? '100%' : width,
|
|
157
156
|
};
|
|
158
157
|
const sidebarContent = (jsxs(Fragment, { children: [overlay && (jsx("div", { className: backgroundClass, onClick: handleOverlayClick, "aria-hidden": "true" })), jsx("aside", { ref: combinedRef, className: combinedClasses, style: sidebarStyle, role: "dialog", "aria-modal": overlay ? 'true' : undefined, "aria-hidden": !isOpen, ...inertProps(!isOpen), tabIndex: -1, ...rest, children: jsx("div", { className: contentClass, children: children }) })] }));
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
}
|
|
162
|
-
// Render to portal for proper stacking
|
|
163
|
-
if (typeof document !== 'undefined') {
|
|
164
|
-
const target = resolveContainer();
|
|
165
|
-
return createPortal(jsx(LocalePortalScope, { target: target, children: sidebarContent }), target);
|
|
166
|
-
}
|
|
167
|
-
return null;
|
|
158
|
+
// In a portal for proper stacking.
|
|
159
|
+
return jsx(Portal, { disabled: !isPortaled, children: sidebarContent });
|
|
168
160
|
});
|
|
169
161
|
/**
|
|
170
162
|
* Container for the sidebar header.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sidebar.js","sources":["../../../src/components/Sidebar.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useCallback, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { useScrollLock } from '../helpers/scrollLock';\nimport { usePortalContainer } from '../helpers/portal';\nimport { LocalePortalScope } from '../helpers/LocaleProvider';\nimport { useConfig } from '../helpers/Config';\nimport { buttonType } from '../helpers/buttonType';\nimport { useOverlayEscape, useOverlayStack } from '../helpers/overlayStack';\nimport { trapTab } from '../helpers/useFocusTrap';\nimport { useOverlayFocus } from '../helpers/useOverlayFocus';\nimport { inertProps } from '../helpers/inertProps';\n\n/** Position of the sidebar relative to the viewport. */\nexport type SidebarPosition = 'left' | 'right';\n\n/**\n * Props for the Sidebar component.\n * @extraProp {string} [className] - Additional CSS classes.\n * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the sidebar element.\n */\nexport interface SidebarProps\n extends\n Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'color'>,\n BulmaClassesProps {\n /**\n * Whether the sidebar is open (required). Opening moves focus into the\n * sidebar, to its first tab stop or the sidebar itself, except for a sidebar\n * without an overlay opened while a modal overlay, such as a Modal, is open:\n * that one leaves focus where it is. That's decided as it opens, and\n * changing `overlay` while it's open doesn't move focus. Closing hands\n * focus back to whatever had it when the sidebar opened, unless focus has\n * already left the sidebar, as it does for an overlay opened over it. A\n * closed sidebar stays in the page, so it can slide out, and is `inert` and\n * `aria-hidden` there: Tab passes over its content and assistive\n * technology doesn't read it.\n */\n isOpen: boolean;\n /** Callback when sidebar should close. */\n onClose?: () => void;\n /** Which side the sidebar appears from. Default: 'left'. */\n position?: SidebarPosition;\n /** Custom width of the sidebar. */\n width?: string;\n /** Sidebar takes full width (mobile-style). */\n isFullwidth?: boolean;\n /** Sidebar takes full width (mobile-style). @deprecated Use `isFullwidth` instead — `isFullwidth` wins if both are set. */\n fullWidth?: boolean;\n /**\n * Show an overlay behind the sidebar, which makes it modal: it gets\n * `aria-modal=\"true\"`, locks body scroll, and keeps Tab and Shift+Tab\n * inside it while it is the topmost modal overlay. A Modal or Dialog opened\n * over it, even one rendered inside it, holds Tab until it closes. Without\n * an overlay the sidebar isn't modal and holds no Tab: on the page, Tab\n * moves in and out of it freely, and opened over a Modal, it leaves the\n * Modal holding Tab, and focus, while still taking Escape first. Whether\n * the sidebar takes focus is decided as it opens: changing this while it's\n * open moves the Tab trap, not focus. Default: true.\n */\n overlay?: boolean;\n /** Close sidebar when overlay is clicked. Default: true. */\n overlayClose?: boolean;\n /**\n * Close sidebar on Escape key. Only the topmost open overlay responds,\n * whichever Modal, Dialog, Sidebar or full-page Loading opened last, so\n * Escape closes one layer at a time. The sidebar marks the Escape it closes\n * on as used with `preventDefault()`, and a Toast waits until no overlay is\n * open. Turned off, a sidebar on top still keeps Escape from the layers\n * under it. A popup inside it, such as a Dropdown's menu or a date picker's\n * calendar, takes its own Escape first, and so does content that calls\n * `preventDefault()` on it. Default: true.\n */\n escapeClose?: boolean;\n /** Allow closing the sidebar. Default: true. */\n canCancel?: boolean;\n /** Content to display in the sidebar. */\n children?: React.ReactNode;\n /** Renders inline instead of using a portal. */\n inline?: boolean;\n}\n\n/**\n * The `Sidebar` component provides a slide-out navigation panel that appears from the left or right side of the screen.\n *\n * @function\n * @param {SidebarProps} props - Props for the Sidebar component.\n * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the sidebar element.\n * @returns {JSX.Element | null} The rendered sidebar component.\n *\n * @example\n * // Basic sidebar\n * const [isOpen, setIsOpen] = useState(false);\n * <Sidebar isOpen={isOpen} onClose={() => setIsOpen(false)}>\n * <Menu>...</Menu>\n * </Sidebar>\n *\n * @example\n * // Right-side sidebar with custom width\n * <Sidebar\n * isOpen={isOpen}\n * onClose={() => setIsOpen(false)}\n * position=\"right\"\n * width=\"320px\"\n * >\n * <div>Panel content</div>\n * </Sidebar>\n */\nconst SidebarComponent = forwardRef<HTMLElement, SidebarProps>(\n (\n {\n isOpen,\n onClose,\n position = 'left',\n width = '260px',\n isFullwidth,\n fullWidth,\n overlay = true,\n overlayClose = true,\n escapeClose = true,\n canCancel = true,\n children,\n inline = false,\n className,\n style,\n ...props\n },\n ref\n ) => {\n const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n const resolveContainer = usePortalContainer();\n const { portalContainer } = useConfig();\n // Where the configured default puts the sidebar. An `inline` one doesn't\n // portal, so a change to the default moves nothing.\n const defaultTarget = inline ? undefined : portalContainer;\n const sidebarRef = useRef<HTMLElement>(null);\n // Cleanup returned by a consumer's callback ref on attach, held until detach.\n const consumerCleanupRef = useRef<(() => void) | null>(null);\n const resolvedFullwidth = isFullwidth ?? fullWidth ?? false;\n\n // Close handler\n const handleClose = useCallback(() => {\n if (canCancel && onClose) {\n onClose();\n }\n }, [canCancel, onClose]);\n\n // Handle overlay click\n const handleOverlayClick = useCallback(() => {\n if (overlayClose) {\n handleClose();\n }\n }, [overlayClose, handleClose]);\n\n // Joins the stack of open overlays, so the sidebar answers Escape only\n // while it's the topmost overlay, and keeps it from those under it. It's\n // modal with an overlay: without one it leaves Tab to a modal overlay\n // under it.\n const isTopmost = useOverlayStack(isOpen, overlay);\n const closesOnEscape = escapeClose && canCancel && Boolean(onClose);\n\n // Escape closes it, on `window`, as in `Modal`, so everything inside the\n // sidebar has had the key first, and an Escape it used is left to it.\n useOverlayEscape(isOpen && closesOnEscape, isTopmost, handleClose);\n\n // Keep Tab inside while there's an overlay, as `Modal` does:\n // `aria-modal` hides the rest of the page from assistive technology, so\n // the keyboard order has to agree. Only while it's the topmost modal\n // overlay, so a Modal or Dialog opened over the sidebar, even one\n // rendered inside it, holds Tab instead until it closes, and a sidebar\n // without an overlay opened over it doesn't. On `window` for the same\n // reason as Escape: a trap inside, such as a portaled popup's, has had\n // the Tab first, and one it used is left where it put focus. It's the trap\n // `useFocusTrap` sets, so a Tab the browser still takes out, as Safari\n // does past links, is sent back in. It reads the aside as each key\n // arrives, so one remounted while the sidebar is open, by a new portal\n // target or by switching `inline`, stays trapped.\n useEffect(() => {\n if (!isOpen || !overlay) return undefined;\n return trapTab(\n () => sidebarRef.current,\n window,\n () => isTopmost('modal')\n );\n }, [isOpen, overlay, isTopmost]);\n\n // Prevent body scroll when sidebar is open. Ref-counted through the shared\n // helper so an overlapping Modal/Dialog/Loading doesn't unlock underneath.\n useScrollLock(isOpen && overlay);\n\n // Move focus into the sidebar on open, to the first stop Tab wraps to or\n // the sidebar itself, and hand it back on close, as `Modal` does. A\n // different `defaultTarget` remounts the portaled sidebar: focus is handed\n // back from the old nodes and moved into the new ones. Whether it takes\n // focus is decided as it opens, so `overlay` changing while it's open\n // leaves focus where the user has it. Without an overlay the sidebar holds\n // no Tab, so with a modal overlay open under it, it leaves focus alone:\n // the first Tab would take focus back there and leave the sidebar's other\n // controls out of reach.\n useOverlayFocus(sidebarRef, isOpen, {\n modal: overlay,\n remountKey: defaultTarget,\n });\n\n // Use combined ref\n const combinedRef = useCallback(\n (node: HTMLElement | null) => {\n (sidebarRef as React.MutableRefObject<HTMLElement | null>).current =\n node;\n if (typeof ref === 'function') {\n // React 19 lets a callback ref return a cleanup function and detaches by\n // running it instead of calling the ref with `null`; React 18 discards the\n // return value entirely. Returning it from here would be a React-19-only\n // contract, so we hold the cleanup and run it ourselves on detach — the\n // same shape as `Dropdown`, `Modal`, `Dialog`, `Toast` and `Carousel`.\n // The form controls that merge a forwarded ref still discard the cleanup\n // and detach with `ref(null)`, so this is not yet library-wide — grep\n // `typeof ref === 'function'` for the current split.\n if (node === null) {\n const consumerCleanup = consumerCleanupRef.current;\n consumerCleanupRef.current = null;\n if (consumerCleanup) {\n consumerCleanup();\n } else {\n ref(null);\n }\n return;\n }\n const cleanup: unknown = ref(node);\n consumerCleanupRef.current =\n typeof cleanup === 'function' ? (cleanup as () => void) : null;\n } else if (ref) {\n (ref as React.MutableRefObject<HTMLElement | null>).current = node;\n }\n },\n [ref]\n );\n\n // Generate classes\n const sidebarClasses = usePrefixedClassNames('sidebar', {\n 'is-active': isOpen,\n [`is-${position}`]: position,\n 'is-fullwidth': resolvedFullwidth,\n });\n const backgroundClass = usePrefixedClassNames('sidebar-background', {\n 'is-active': isOpen,\n });\n const contentClass = usePrefixedClassNames('sidebar-content');\n\n const combinedClasses = classNames(\n sidebarClasses,\n bulmaHelperClasses,\n className\n );\n\n // Custom style for width\n const sidebarStyle: React.CSSProperties = {\n ...style,\n '--bulma-sidebar-width': resolvedFullwidth ? '100%' : width,\n } as React.CSSProperties;\n\n const sidebarContent = (\n <>\n {overlay && (\n <div\n className={backgroundClass}\n onClick={handleOverlayClick}\n aria-hidden=\"true\"\n />\n )}\n <aside\n ref={combinedRef}\n className={combinedClasses}\n style={sidebarStyle}\n role=\"dialog\"\n aria-modal={overlay ? 'true' : undefined}\n aria-hidden={!isOpen}\n // React commits this before the effect that moves focus in runs, so\n // an opening sidebar is no longer inert by then.\n {...inertProps(!isOpen)}\n tabIndex={-1}\n {...rest}\n >\n <div className={contentClass}>{children}</div>\n </aside>\n </>\n );\n\n if (inline) {\n return sidebarContent;\n }\n\n // Render to portal for proper stacking\n if (typeof document !== 'undefined') {\n const target = resolveContainer();\n return createPortal(\n <LocalePortalScope target={target}>{sidebarContent}</LocalePortalScope>,\n target\n );\n }\n\n return null;\n }\n);\n\n// Sub-components\n\n/**\n * Props for the SidebarHeader component.\n */\nexport interface SidebarHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Header content. */\n children?: React.ReactNode;\n}\n\n/**\n * Container for the sidebar header.\n *\n * @function\n * @param {SidebarHeaderProps} props - Props for the SidebarHeader component.\n * @returns {JSX.Element} The rendered sidebar header.\n */\nexport const SidebarHeader: React.FC<SidebarHeaderProps> = ({\n className,\n children,\n ...props\n}) => {\n const headerClass = usePrefixedClassNames('sidebar-header');\n return (\n <div className={classNames(headerClass, className)} {...props}>\n {children}\n </div>\n );\n};\n\n/**\n * Props for the SidebarTitle component.\n */\nexport interface SidebarTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {\n /** Title content. */\n children?: React.ReactNode;\n}\n\n/**\n * Title text inside the header.\n *\n * @function\n * @param {SidebarTitleProps} props - Props for the SidebarTitle component.\n * @returns {JSX.Element} The rendered sidebar title.\n */\nexport const SidebarTitle: React.FC<SidebarTitleProps> = ({\n className,\n children,\n ...props\n}) => {\n const titleClass = usePrefixedClassNames('sidebar-title');\n return (\n <p className={classNames(titleClass, className)} {...props}>\n {children}\n </p>\n );\n};\n\n/**\n * Props for the SidebarClose component.\n * Extends standard button attributes.\n * @extraProp {'button' | 'submit' | 'reset'} [type='button'] - Button type. Defaults to `'button'`, so a close button inside a form does not submit it. Pass `'submit'` or `'reset'` and yours is used; any other value, or a spread carrying `type: undefined`, renders `'button'`.\n * @extraProp {string} [aria-label='Close'] - Accessible name. Pass your own to replace it. An empty one, or a spread carrying `'aria-label': undefined`, keeps the default rather than leaving the button unnamed.\n */\nexport type SidebarCloseProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * Close button for the sidebar.\n *\n * @function\n * @param {SidebarCloseProps} props - Props for the SidebarClose component.\n * @returns {JSX.Element} The rendered close button.\n */\nexport const SidebarClose: React.FC<SidebarCloseProps> = ({\n className,\n children,\n ...props\n}) => {\n const closeClass = usePrefixedClassNames('sidebar-close');\n return (\n <button\n className={classNames(closeClass, className)}\n {...props}\n // After the spread, reading through it: a key the spread carries with no\n // value would otherwise erase the default, leaving a nameless button\n // that submits the form around it. An empty label falls back too: the\n // button is drawn as an icon, so `''` would leave it unnamed. A caller's\n // own value still wins; `buttonType` says more.\n aria-label={props['aria-label'] || 'Close'}\n type={buttonType(props.type)}\n >\n {children}\n </button>\n );\n};\n\n/**\n * Props for the SidebarBody component.\n */\nexport interface SidebarBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Body content. */\n children?: React.ReactNode;\n}\n\n/**\n * Main content area of the sidebar.\n *\n * @function\n * @param {SidebarBodyProps} props - Props for the SidebarBody component.\n * @returns {JSX.Element} The rendered sidebar body.\n */\nexport const SidebarBody: React.FC<SidebarBodyProps> = ({\n className,\n children,\n ...props\n}) => {\n const bodyClass = usePrefixedClassNames('sidebar-body');\n return (\n <div className={classNames(bodyClass, className)} {...props}>\n {children}\n </div>\n );\n};\n\n/**\n * Props for the SidebarFooter component.\n */\nexport interface SidebarFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Footer content. */\n children?: React.ReactNode;\n}\n\n/**\n * Footer area of the sidebar.\n *\n * @function\n * @param {SidebarFooterProps} props - Props for the SidebarFooter component.\n * @returns {JSX.Element} The rendered sidebar footer.\n */\nexport const SidebarFooter: React.FC<SidebarFooterProps> = ({\n className,\n children,\n ...props\n}) => {\n const footerClass = usePrefixedClassNames('sidebar-footer');\n return (\n <div className={classNames(footerClass, className)} {...props}>\n {children}\n </div>\n );\n};\n\n// Attach static subcomponents\nexport const Sidebar = withSubComponents(\n SidebarComponent,\n {\n Header: SidebarHeader,\n Title: SidebarTitle,\n Close: SidebarClose,\n Body: SidebarBody,\n Footer: SidebarFooter,\n },\n 'Sidebar'\n);\n\nexport default Sidebar;\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Sidebar.js","sources":["../../../src/components/Sidebar.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useCallback, useRef } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { useScrollLock } from '../helpers/scrollLock';\nimport { Portal, usePortalProp } from '../helpers/portal';\nimport { buttonType } from '../helpers/buttonType';\nimport { useOverlayEscape, useOverlayStack } from '../helpers/overlayStack';\nimport { trapTab } from '../helpers/useFocusTrap';\nimport { useOverlayFocus } from '../helpers/useOverlayFocus';\nimport { inertProps } from '../helpers/inertProps';\n\n/** Position of the sidebar relative to the viewport. */\nexport type SidebarPosition = 'left' | 'right';\n\n/**\n * Props for the Sidebar component.\n * @extraProp {string} [className] - Additional CSS classes.\n * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the sidebar element.\n */\nexport interface SidebarProps\n extends\n Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'color'>,\n BulmaClassesProps {\n /**\n * Whether the sidebar is open (required). Opening moves focus into the\n * sidebar, to its first tab stop or the sidebar itself, except for a sidebar\n * without an overlay opened while a modal overlay, such as a Modal, is open:\n * that one leaves focus where it is. That's decided as it opens, and\n * changing `overlay` while it's open doesn't move focus. Closing hands\n * focus back to whatever had it when the sidebar opened, unless focus has\n * already left the sidebar, as it does for an overlay opened over it. A\n * closed sidebar stays in the page, so it can slide out, and is `inert` and\n * `aria-hidden` there: Tab passes over its content and assistive\n * technology doesn't read it.\n */\n isOpen: boolean;\n /** Callback when sidebar should close. */\n onClose?: () => void;\n /** Which side the sidebar appears from. Default: 'left'. */\n position?: SidebarPosition;\n /** Custom width of the sidebar. */\n width?: string;\n /** Sidebar takes full width (mobile-style). */\n isFullwidth?: boolean;\n /** Sidebar takes full width (mobile-style). @deprecated Use `isFullwidth` instead — `isFullwidth` wins if both are set. */\n fullWidth?: boolean;\n /**\n * Show an overlay behind the sidebar, which makes it modal: it gets\n * `aria-modal=\"true\"`, locks page scroll, and keeps Tab and Shift+Tab\n * inside it while it is the topmost modal overlay. A Modal or Dialog opened\n * over it, even one rendered inside it, holds Tab until it closes. Without\n * an overlay the sidebar isn't modal and holds no Tab: on the page, Tab\n * moves in and out of it freely, and opened over a Modal, it leaves the\n * Modal holding Tab, and focus, while still taking Escape first. Whether\n * the sidebar takes focus is decided as it opens: changing this while it's\n * open moves the Tab trap, not focus. Default: true.\n */\n overlay?: boolean;\n /** Close sidebar when overlay is clicked. Default: true. */\n overlayClose?: boolean;\n /**\n * Close sidebar on Escape key. Only the topmost open overlay responds,\n * whichever Modal, Dialog, Sidebar or full-page Loading opened last, so\n * Escape closes one layer at a time. The sidebar marks the Escape it closes\n * on as used with `preventDefault()`, and a Toast waits until no overlay is\n * open. Turned off, a sidebar on top still keeps Escape from the layers\n * under it. A popup inside it, such as a Dropdown's menu or a date picker's\n * calendar, takes its own Escape first, and so does content that calls\n * `preventDefault()` on it. Default: true.\n */\n escapeClose?: boolean;\n /** Allow closing the sidebar. Default: true. */\n canCancel?: boolean;\n /** Content to display in the sidebar. */\n children?: React.ReactNode;\n /**\n * Renders inline instead of using a portal. Without it, the sidebar renders\n * inline on the server and while hydrating, moving into the portal once the\n * client takes over, so hydration matches.\n */\n inline?: boolean;\n}\n\n/**\n * The `Sidebar` component provides a slide-out navigation panel that appears from the left or right side of the screen.\n *\n * @function\n * @param {SidebarProps} props - Props for the Sidebar component.\n * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the sidebar element.\n * @returns {JSX.Element | null} The rendered sidebar component.\n *\n * @example\n * // Basic sidebar\n * const [isOpen, setIsOpen] = useState(false);\n * <Sidebar isOpen={isOpen} onClose={() => setIsOpen(false)}>\n * <Menu>...</Menu>\n * </Sidebar>\n *\n * @example\n * // Right-side sidebar with custom width\n * <Sidebar\n * isOpen={isOpen}\n * onClose={() => setIsOpen(false)}\n * position=\"right\"\n * width=\"320px\"\n * >\n * <div>Panel content</div>\n * </Sidebar>\n */\nconst SidebarComponent = forwardRef<HTMLElement, SidebarProps>(\n (\n {\n isOpen,\n onClose,\n position = 'left',\n width = '260px',\n isFullwidth,\n fullWidth,\n overlay = true,\n overlayClose = true,\n escapeClose = true,\n canCancel = true,\n children,\n inline = false,\n className,\n style,\n ...props\n },\n ref\n ) => {\n const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n // A portal has no server-rendered counterpart, so the sidebar renders in\n // place on the server and while hydrating, and moves into its portal once\n // the client takes over, as Modal's `portal` does. An `inline` one stays\n // in place, so a change to the configured default moves nothing.\n const { isPortaled, defaultTarget } = usePortalProp(!inline);\n const sidebarRef = useRef<HTMLElement>(null);\n // Cleanup returned by a consumer's callback ref on attach, held until detach.\n const consumerCleanupRef = useRef<(() => void) | null>(null);\n const resolvedFullwidth = isFullwidth ?? fullWidth ?? false;\n\n // Close handler\n const handleClose = useCallback(() => {\n if (canCancel && onClose) {\n onClose();\n }\n }, [canCancel, onClose]);\n\n // Handle overlay click\n const handleOverlayClick = useCallback(() => {\n if (overlayClose) {\n handleClose();\n }\n }, [overlayClose, handleClose]);\n\n // Joins the stack of open overlays, so the sidebar answers Escape only\n // while it's the topmost overlay, and keeps it from those under it. It's\n // modal with an overlay: without one it leaves Tab to a modal overlay\n // under it.\n const isTopmost = useOverlayStack(isOpen, overlay);\n const closesOnEscape = escapeClose && canCancel && Boolean(onClose);\n\n // Escape closes it, on `window`, as in `Modal`, so everything inside the\n // sidebar has had the key first, and an Escape it used is left to it.\n useOverlayEscape(isOpen && closesOnEscape, isTopmost, handleClose);\n\n // Keep Tab inside while there's an overlay, as `Modal` does:\n // `aria-modal` hides the rest of the page from assistive technology, so\n // the keyboard order has to agree. Only while it's the topmost modal\n // overlay, so a Modal or Dialog opened over the sidebar, even one\n // rendered inside it, holds Tab instead until it closes, and a sidebar\n // without an overlay opened over it doesn't. On `window` for the same\n // reason as Escape: a trap inside, such as a portaled popup's, has had\n // the Tab first, and one it used is left where it put focus. It's the trap\n // `useFocusTrap` sets, so a Tab the browser still takes out, as Safari\n // does past links, is sent back in. It reads the aside as each key\n // arrives, so one remounted while the sidebar is open, by a new portal\n // target or by switching `inline`, stays trapped.\n useEffect(() => {\n if (!isOpen || !overlay) return undefined;\n return trapTab(\n () => sidebarRef.current,\n window,\n () => isTopmost('modal')\n );\n }, [isOpen, overlay, isTopmost]);\n\n // Lock the page's scrolling when sidebar is open. Ref-counted through the\n // shared helper so an overlapping Modal/Dialog/Loading doesn't unlock\n // underneath.\n useScrollLock(isOpen && overlay);\n\n // Move focus into the sidebar on open, to the first stop Tab wraps to or\n // the sidebar itself, and hand it back on close, as `Modal` does. Moving\n // into the portal after hydration, or to a different `defaultTarget`,\n // remounts the sidebar: focus is handed back from the old nodes and moved\n // into the new ones. Whether it takes focus is decided as it opens, so\n // `overlay` changing while it's open leaves focus where the user has it.\n // Without an overlay the sidebar holds no Tab, so with a modal overlay\n // open under it, it leaves focus alone: the first Tab would take focus\n // back there and leave the sidebar's other controls out of reach.\n useOverlayFocus(sidebarRef, isOpen, {\n modal: overlay,\n // In place it's `false`, which no portal target is.\n remountKey: isPortaled ? defaultTarget : false,\n });\n\n // Use combined ref\n const combinedRef = useCallback(\n (node: HTMLElement | null) => {\n (sidebarRef as React.MutableRefObject<HTMLElement | null>).current =\n node;\n if (typeof ref === 'function') {\n // React 19 lets a callback ref return a cleanup function and detaches by\n // running it instead of calling the ref with `null`; React 18 discards the\n // return value entirely. Returning it from here would be a React-19-only\n // contract, so we hold the cleanup and run it ourselves on detach — the\n // same shape as `Dropdown`, `Modal`, `Dialog`, `Toast` and `Carousel`.\n // The form controls that merge a forwarded ref still discard the cleanup\n // and detach with `ref(null)`, so this is not yet library-wide — grep\n // `typeof ref === 'function'` for the current split.\n if (node === null) {\n const consumerCleanup = consumerCleanupRef.current;\n consumerCleanupRef.current = null;\n if (consumerCleanup) {\n consumerCleanup();\n } else {\n ref(null);\n }\n return;\n }\n const cleanup: unknown = ref(node);\n consumerCleanupRef.current =\n typeof cleanup === 'function' ? (cleanup as () => void) : null;\n } else if (ref) {\n (ref as React.MutableRefObject<HTMLElement | null>).current = node;\n }\n },\n [ref]\n );\n\n // Generate classes\n const sidebarClasses = usePrefixedClassNames('sidebar', {\n 'is-active': isOpen,\n [`is-${position}`]: position,\n 'is-fullwidth': resolvedFullwidth,\n });\n const backgroundClass = usePrefixedClassNames('sidebar-background', {\n 'is-active': isOpen,\n });\n const contentClass = usePrefixedClassNames('sidebar-content');\n\n const combinedClasses = classNames(\n sidebarClasses,\n bulmaHelperClasses,\n className\n );\n\n // Custom style for width\n const sidebarStyle: React.CSSProperties = {\n ...style,\n '--bulma-sidebar-width': resolvedFullwidth ? '100%' : width,\n } as React.CSSProperties;\n\n const sidebarContent = (\n <>\n {overlay && (\n <div\n className={backgroundClass}\n onClick={handleOverlayClick}\n aria-hidden=\"true\"\n />\n )}\n <aside\n ref={combinedRef}\n className={combinedClasses}\n style={sidebarStyle}\n role=\"dialog\"\n aria-modal={overlay ? 'true' : undefined}\n aria-hidden={!isOpen}\n // React commits this before the effect that moves focus in runs, so\n // an opening sidebar is no longer inert by then.\n {...inertProps(!isOpen)}\n tabIndex={-1}\n {...rest}\n >\n <div className={contentClass}>{children}</div>\n </aside>\n </>\n );\n\n // In a portal for proper stacking.\n return <Portal disabled={!isPortaled}>{sidebarContent}</Portal>;\n }\n);\n\n// Sub-components\n\n/**\n * Props for the SidebarHeader component.\n */\nexport interface SidebarHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Header content. */\n children?: React.ReactNode;\n}\n\n/**\n * Container for the sidebar header.\n *\n * @function\n * @param {SidebarHeaderProps} props - Props for the SidebarHeader component.\n * @returns {JSX.Element} The rendered sidebar header.\n */\nexport const SidebarHeader: React.FC<SidebarHeaderProps> = ({\n className,\n children,\n ...props\n}) => {\n const headerClass = usePrefixedClassNames('sidebar-header');\n return (\n <div className={classNames(headerClass, className)} {...props}>\n {children}\n </div>\n );\n};\n\n/**\n * Props for the SidebarTitle component.\n */\nexport interface SidebarTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {\n /** Title content. */\n children?: React.ReactNode;\n}\n\n/**\n * Title text inside the header.\n *\n * @function\n * @param {SidebarTitleProps} props - Props for the SidebarTitle component.\n * @returns {JSX.Element} The rendered sidebar title.\n */\nexport const SidebarTitle: React.FC<SidebarTitleProps> = ({\n className,\n children,\n ...props\n}) => {\n const titleClass = usePrefixedClassNames('sidebar-title');\n return (\n <p className={classNames(titleClass, className)} {...props}>\n {children}\n </p>\n );\n};\n\n/**\n * Props for the SidebarClose component.\n * Extends standard button attributes.\n * @extraProp {'button' | 'submit' | 'reset'} [type='button'] - Button type. Defaults to `'button'`, so a close button inside a form does not submit it. Pass `'submit'` or `'reset'` and yours is used; any other value, or a spread carrying `type: undefined`, renders `'button'`.\n * @extraProp {string} [aria-label='Close'] - Accessible name. Pass your own to replace it. An empty one, or a spread carrying `'aria-label': undefined`, keeps the default rather than leaving the button unnamed.\n */\nexport type SidebarCloseProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * Close button for the sidebar.\n *\n * @function\n * @param {SidebarCloseProps} props - Props for the SidebarClose component.\n * @returns {JSX.Element} The rendered close button.\n */\nexport const SidebarClose: React.FC<SidebarCloseProps> = ({\n className,\n children,\n ...props\n}) => {\n const closeClass = usePrefixedClassNames('sidebar-close');\n return (\n <button\n className={classNames(closeClass, className)}\n {...props}\n // After the spread, reading through it: a key the spread carries with no\n // value would otherwise erase the default, leaving a nameless button\n // that submits the form around it. An empty label falls back too: the\n // button is drawn as an icon, so `''` would leave it unnamed. A caller's\n // own value still wins; `buttonType` says more.\n aria-label={props['aria-label'] || 'Close'}\n type={buttonType(props.type)}\n >\n {children}\n </button>\n );\n};\n\n/**\n * Props for the SidebarBody component.\n */\nexport interface SidebarBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Body content. */\n children?: React.ReactNode;\n}\n\n/**\n * Main content area of the sidebar.\n *\n * @function\n * @param {SidebarBodyProps} props - Props for the SidebarBody component.\n * @returns {JSX.Element} The rendered sidebar body.\n */\nexport const SidebarBody: React.FC<SidebarBodyProps> = ({\n className,\n children,\n ...props\n}) => {\n const bodyClass = usePrefixedClassNames('sidebar-body');\n return (\n <div className={classNames(bodyClass, className)} {...props}>\n {children}\n </div>\n );\n};\n\n/**\n * Props for the SidebarFooter component.\n */\nexport interface SidebarFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Footer content. */\n children?: React.ReactNode;\n}\n\n/**\n * Footer area of the sidebar.\n *\n * @function\n * @param {SidebarFooterProps} props - Props for the SidebarFooter component.\n * @returns {JSX.Element} The rendered sidebar footer.\n */\nexport const SidebarFooter: React.FC<SidebarFooterProps> = ({\n className,\n children,\n ...props\n}) => {\n const footerClass = usePrefixedClassNames('sidebar-footer');\n return (\n <div className={classNames(footerClass, className)} {...props}>\n {children}\n </div>\n );\n};\n\n// Attach static subcomponents\nexport const Sidebar = withSubComponents(\n SidebarComponent,\n {\n Header: SidebarHeader,\n Title: SidebarTitle,\n Close: SidebarClose,\n Body: SidebarBody,\n Footer: SidebarFooter,\n },\n 'Sidebar'\n);\n\nexport default Sidebar;\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}
|
|
@@ -7,7 +7,7 @@ import { isEventInside } from '../helpers/shadowDom.js';
|
|
|
7
7
|
import { usePrefixedClassNames, classNames, prefixedClassNames } from '../helpers/classNames.js';
|
|
8
8
|
import { useClassPrefix } from '../helpers/Config.js';
|
|
9
9
|
import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
|
|
10
|
-
import { usePortalContainer } from '../helpers/portal.js';
|
|
10
|
+
import { usePortalProp, Portal, usePortalContainer } from '../helpers/portal.js';
|
|
11
11
|
import { LocalePortalScope } from '../helpers/LocaleProvider.js';
|
|
12
12
|
import { groupIntoPositionStacks } from '../helpers/positionStacks.js';
|
|
13
13
|
import { useLatestRef } from '../helpers/useLatestRef.js';
|
|
@@ -31,7 +31,10 @@ import { useOverlayStack } from '../helpers/overlayStack.js';
|
|
|
31
31
|
*/
|
|
32
32
|
const Toast = forwardRef(({ message, type = 'default', actionType, position = 'top-right', duration = 2000, indefinite = false, dismissible = true, closable = false, rounded = false, pauseOnHover = false, cancelable = true, actionText, cancelText, onAction, onClose, container, inline = false, className, ...props }, ref) => {
|
|
33
33
|
const { bulmaHelperClasses, rest } = useBulmaClasses(props);
|
|
34
|
-
|
|
34
|
+
// A portal has no server-rendered counterpart, so the toast renders in
|
|
35
|
+
// place on the server and while hydrating, and moves into its portal
|
|
36
|
+
// once the client takes over, as Modal's `portal` does.
|
|
37
|
+
const portal = usePortalProp(container || true);
|
|
35
38
|
const [isVisible, setIsVisible] = useState(true);
|
|
36
39
|
const [isPaused, setIsPaused] = useState(false);
|
|
37
40
|
const toastRef = useRef(null);
|
|
@@ -166,12 +169,7 @@ const Toast = forwardRef(({ message, type = 'default', actionType, position = 't
|
|
|
166
169
|
if (inline) {
|
|
167
170
|
return toastElement;
|
|
168
171
|
}
|
|
169
|
-
|
|
170
|
-
if (typeof document !== 'undefined') {
|
|
171
|
-
const target = resolveContainer(container);
|
|
172
|
-
return createPortal(jsx(LocalePortalScope, { target: target, children: toastContent }), target);
|
|
173
|
-
}
|
|
174
|
-
return null;
|
|
172
|
+
return (jsx(Portal, { disabled: !portal.isPortaled, container: portal.container, children: jsx("div", { className: containerClasses, children: toastElement }) }));
|
|
175
173
|
});
|
|
176
174
|
Toast.displayName = 'Toast';
|
|
177
175
|
let toastId = 0;
|