@allxsmith/bestax-bulma 5.67.2 → 5.67.4
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/Card.js +3 -14
- package/dist/esm/components/Card.js.map +1 -1
- package/dist/esm/components/Command.js +14 -3
- package/dist/esm/components/Command.js.map +1 -1
- package/dist/esm/components/ContextMenu.js +10 -10
- package/dist/esm/components/ContextMenu.js.map +1 -1
- package/dist/esm/components/Dialog.js +7 -3
- package/dist/esm/components/Dialog.js.map +1 -1
- package/dist/esm/components/HoverCard.js +2 -2
- package/dist/esm/components/HoverCard.js.map +1 -1
- package/dist/esm/components/Menu.js +2 -1
- package/dist/esm/components/Menu.js.map +1 -1
- package/dist/esm/components/Modal.js +11 -9
- package/dist/esm/components/Modal.js.map +1 -1
- package/dist/esm/components/Popover.js +2 -2
- package/dist/esm/components/Popover.js.map +1 -1
- package/dist/esm/components/Tabs.js +4 -3
- package/dist/esm/components/Tabs.js.map +1 -1
- package/dist/esm/elements/CopyButton.js +6 -3
- package/dist/esm/elements/CopyButton.js.map +1 -1
- package/dist/esm/elements/IconButton.js +3 -2
- package/dist/esm/elements/IconButton.js.map +1 -1
- package/dist/esm/elements/Stat.js +3 -2
- package/dist/esm/elements/Stat.js.map +1 -1
- package/dist/esm/form/ColorInputBase.js.map +1 -1
- package/dist/esm/form/Combobox.js +2 -2
- 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/Field.js +6 -6
- package/dist/esm/form/Field.js.map +1 -1
- package/dist/esm/form/TimeInputBase.js.map +1 -1
- package/dist/esm/form/TreeSelect.js.map +1 -1
- package/dist/esm/form/_pickerInternals/Calendar.js +19 -12
- package/dist/esm/form/_pickerInternals/Calendar.js.map +1 -1
- package/dist/esm/form/_pickerInternals/PickerPopover.js +3 -3
- package/dist/esm/form/_pickerInternals/PickerPopover.js.map +1 -1
- package/dist/esm/helpers/Config.js.map +1 -1
- package/dist/esm/helpers/elementType.js +42 -0
- package/dist/esm/helpers/elementType.js.map +1 -0
- package/dist/esm/helpers/portal.js +57 -1
- package/dist/esm/helpers/portal.js.map +1 -1
- package/dist/esm/helpers/useAnchoredPosition.js +23 -12
- package/dist/esm/helpers/useAnchoredPosition.js.map +1 -1
- package/dist/esm/helpers/withSubComponents.js +1 -1
- package/dist/esm/helpers/withSubComponents.js.map +1 -1
- package/dist/esm/layout/AppFrame.js +4 -3
- package/dist/esm/layout/AppFrame.js.map +1 -1
- package/dist/esm/layout/Splitter.js +3 -2
- package/dist/esm/layout/Splitter.js.map +1 -1
- package/dist/extras.css +1 -1
- package/dist/extras.css.map +1 -1
- package/dist/index.cjs +196 -81
- package/dist/index.cjs.map +1 -1
- package/dist/types/components/HoverCard.d.ts +9 -8
- package/dist/types/components/Popover.d.ts +6 -5
- package/dist/types/form/ColorInputBase.d.ts +2 -1
- package/dist/types/form/Combobox.d.ts +6 -7
- package/dist/types/form/DateInputBase.d.ts +6 -2
- package/dist/types/form/DateRangeInputBase.d.ts +6 -2
- package/dist/types/form/DateTimeInputBase.d.ts +6 -2
- package/dist/types/form/TimeInputBase.d.ts +2 -1
- package/dist/types/form/TreeSelect.d.ts +1 -1
- package/dist/types/helpers/Config.d.ts +6 -3
- package/dist/types/helpers/elementType.d.ts +20 -0
- package/dist/types/helpers/portal.d.ts +44 -0
- package/dist/types/helpers/useAnchoredPosition.d.ts +3 -1
- package/dist/types/helpers/withSubComponents.d.ts +1 -1
- package/dist/types-cjs/components/HoverCard.d.ts +9 -8
- package/dist/types-cjs/components/Popover.d.ts +6 -5
- package/dist/types-cjs/form/ColorInputBase.d.ts +2 -1
- package/dist/types-cjs/form/Combobox.d.ts +6 -7
- package/dist/types-cjs/form/DateInputBase.d.ts +6 -2
- package/dist/types-cjs/form/DateRangeInputBase.d.ts +6 -2
- package/dist/types-cjs/form/DateTimeInputBase.d.ts +6 -2
- package/dist/types-cjs/form/TimeInputBase.d.ts +2 -1
- package/dist/types-cjs/form/TreeSelect.d.ts +1 -1
- package/dist/types-cjs/helpers/Config.d.ts +6 -3
- package/dist/types-cjs/helpers/elementType.d.ts +20 -0
- package/dist/types-cjs/helpers/portal.d.ts +44 -0
- package/dist/types-cjs/helpers/useAnchoredPosition.d.ts +3 -1
- package/dist/types-cjs/helpers/withSubComponents.d.ts +1 -1
- 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/_menu.scss +16 -2
- package/src/scss/form/_dateinput.scss +1 -1
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
|
|
2
2
|
'use client';
|
|
3
3
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
4
|
-
import React, { createContext, forwardRef, useRef, useCallback, useId, useEffect, useContext } from 'react';
|
|
4
|
+
import React, { createContext, forwardRef, useRef, useState, useCallback, useId, useEffect, useContext } from 'react';
|
|
5
5
|
import { usePrefixedClassNames, classNames, prefixedClassNames } from '../helpers/classNames.js';
|
|
6
6
|
import { withSubComponents } from '../helpers/withSubComponents.js';
|
|
7
|
+
import { isElementOf } from '../helpers/elementType.js';
|
|
7
8
|
import { buttonType } from '../helpers/buttonType.js';
|
|
8
9
|
import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
|
|
9
10
|
import { useConfig } from '../helpers/Config.js';
|
|
10
11
|
import { useScrollLock } from '../helpers/scrollLock.js';
|
|
11
12
|
import { getDeepestActiveElement, getActiveElementInTree } from '../helpers/shadowDom.js';
|
|
12
|
-
import { usePortalProp, Portal } from '../helpers/portal.js';
|
|
13
|
+
import { usePortalProp, PortalScope, Portal } from '../helpers/portal.js';
|
|
13
14
|
import { useLatestRef } from '../helpers/useLatestRef.js';
|
|
14
15
|
import { useOverlayStack } from '../helpers/overlayStack.js';
|
|
15
16
|
import { trapTab, focusTabStop } from '../helpers/useFocusTrap.js';
|
|
@@ -167,12 +168,16 @@ const ModalRoot = forwardRef(function ModalRoot({ active, isActive, onClose, cla
|
|
|
167
168
|
const modalRootRef = useRef(null);
|
|
168
169
|
// Cleanup returned by a consumer's callback ref on attach, held until detach.
|
|
169
170
|
const consumerCleanupRef = useRef(null);
|
|
171
|
+
// The root, as state, for the popups inside to portal into: outside it,
|
|
172
|
+
// its `aria-modal` hides them from screen readers.
|
|
173
|
+
const [scopeNode, setScopeNode] = useState(null);
|
|
170
174
|
// The forwarded ref and the internal one must both see the node: focus
|
|
171
175
|
// management and the Tab trap read `modalRootRef`, while consumers expect
|
|
172
176
|
// their own ref to resolve.
|
|
173
177
|
const combinedRef = useCallback((node) => {
|
|
174
178
|
modalRootRef.current =
|
|
175
179
|
node;
|
|
180
|
+
setScopeNode(node);
|
|
176
181
|
if (typeof ref === 'function') {
|
|
177
182
|
// React 19 lets a callback ref return a cleanup function and detaches
|
|
178
183
|
// by running it instead of calling the ref with `null`; React 18
|
|
@@ -287,11 +292,7 @@ const ModalRoot = forwardRef(function ModalRoot({ active, isActive, onClose, cla
|
|
|
287
292
|
// the same element and restore-on-close still lands in the right place.
|
|
288
293
|
}, [isModalActive, isPortaled, portal, defaultTarget]);
|
|
289
294
|
// Check if children contain compound components
|
|
290
|
-
const hasCompoundComponents = React.Children.toArray(children).some(child =>
|
|
291
|
-
(child.type === ModalBackground ||
|
|
292
|
-
child.type === ModalContent ||
|
|
293
|
-
child.type === ModalCard ||
|
|
294
|
-
child.type === ModalClose));
|
|
295
|
+
const hasCompoundComponents = React.Children.toArray(children).some(child => isElementOf(child, ModalBackground, ModalContent, ModalCard, ModalClose));
|
|
295
296
|
// Generate Bulma classes with prefix
|
|
296
297
|
const bulmaClasses = usePrefixedClassNames('modal', {
|
|
297
298
|
'is-active': isModalActive,
|
|
@@ -321,8 +322,9 @@ const ModalRoot = forwardRef(function ModalRoot({ active, isActive, onClose, cla
|
|
|
321
322
|
isModalCard = !!modalCardTitle || !!modalCardFoot;
|
|
322
323
|
modalElement = (jsxs("div", { className: modalClasses, ref: combinedRef, role: resolvedRole, "aria-modal": resolvedAriaModal, "aria-labelledby": titleId, tabIndex: -1, ...rest, "data-testid": "modal", children: [jsx("div", { className: prefixedClassNames(classPrefix, 'modal-background'), onClick: onClose, "data-testid": "modal-background" }), isModalCard ? (jsxs("div", { className: prefixedClassNames(classPrefix, 'modal-card'), children: [modalCardTitle && (jsxs("header", { className: prefixedClassNames(classPrefix, 'modal-card-head'), children: [jsx("p", { id: titleId, className: prefixedClassNames(classPrefix, 'modal-card-title'), children: modalCardTitle }), onClose && (jsx("button", { className: deleteClass, "aria-label": "close", onClick: onClose, type: "button", "data-testid": "modal-close" }))] })), jsx("section", { className: prefixedClassNames(classPrefix, 'modal-card-body'), "data-testid": "modal-body", children: children }), modalCardFoot && (jsx("footer", { className: prefixedClassNames(classPrefix, 'modal-card-foot'), children: modalCardFoot }))] })) : (jsx("div", { className: prefixedClassNames(classPrefix, 'modal-content'), "data-testid": "modal-content", children: children })), (!isModalCard || (!modalCardTitle && onClose)) && onClose && (jsx("button", { className: prefixedClassNames(classPrefix, 'modal-close', 'is-large'), "aria-label": "close", onClick: onClose, type: "button", "data-testid": "modal-close-float" }))] }));
|
|
323
324
|
}
|
|
324
|
-
// In both forms, so a `Modal.Close` anywhere inside closes this modal
|
|
325
|
-
|
|
325
|
+
// In both forms, so a `Modal.Close` anywhere inside closes this modal, and
|
|
326
|
+
// a popup anywhere inside portals into it.
|
|
327
|
+
modalElement = (jsx(ModalCloseContext.Provider, { value: onClose, children: jsx(PortalScope, { node: scopeNode, children: modalElement }) }));
|
|
326
328
|
return (jsx(Portal, { disabled: !isPortaled, container: container, children: modalElement }));
|
|
327
329
|
});
|
|
328
330
|
const Modal = withSubComponents(ModalRoot, {
|
|
@@ -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 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
|
+
{"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 useState,\n} from 'react';\nimport {\n classNames,\n usePrefixedClassNames,\n prefixedClassNames,\n} from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { isElementOf } from '../helpers/elementType';\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, PortalScope, 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 root, as state, for the popups inside to portal into: outside it,\n // its `aria-modal` hides them from screen readers.\n const [scopeNode, setScopeNode] = useState<HTMLDivElement | 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 setScopeNode(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(child =>\n isElementOf(child, ModalBackground, ModalContent, ModalCard, 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, and\n // a popup anywhere inside portals into it.\n modalElement = (\n <ModalCloseContext.Provider value={onClose}>\n <PortalScope node={scopeNode}>{modalElement}</PortalScope>\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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"}
|
|
@@ -5,7 +5,7 @@ import { createContext, useContext, useRef, useId, useState, useCallback, useMem
|
|
|
5
5
|
import { classNames, usePrefixedClassNames } from '../helpers/classNames.js';
|
|
6
6
|
import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
|
|
7
7
|
import { withSubComponents } from '../helpers/withSubComponents.js';
|
|
8
|
-
import {
|
|
8
|
+
import { PopupPortal } from '../helpers/portal.js';
|
|
9
9
|
import { useIsHydrated } from '../helpers/useIsHydrated.js';
|
|
10
10
|
import { useFocusTrap, focusTabStop } from '../helpers/useFocusTrap.js';
|
|
11
11
|
import { useAnchoredPosition, marginGap } from '../helpers/useAnchoredPosition.js';
|
|
@@ -187,7 +187,7 @@ const PopoverComponent = ({ trigger, children, open: controlledOpen, defaultOpen
|
|
|
187
187
|
'is-start-aligned': position === undefined,
|
|
188
188
|
'is-portal': appendToBody,
|
|
189
189
|
}), contentClassName);
|
|
190
|
-
return (jsxs("div", { className: rootClasses, ...rest, ref: rootRef, children: [clonedTrigger, isOpen && (jsx(
|
|
190
|
+
return (jsxs("div", { className: rootClasses, ...rest, ref: rootRef, children: [clonedTrigger, isOpen && (jsx(PopupPortal, { disabled: !appendToBody, children: jsx(PopoverPanel, { panelRef: panelRef, titleId: titleId, ariaLabel: ariaLabel, close: close, id: panelId, className: panelClasses, style: appendToBody
|
|
191
191
|
? {
|
|
192
192
|
position: 'fixed',
|
|
193
193
|
top: resolved.top,
|
|
@@ -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. 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":"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"}
|
|
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 { PopupPortal } 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, else the `Modal`, `Dialog` or `Command.Dialog`\n * it's in, else `document.body`, fixed to the viewport, so an ancestor's\n * `overflow`, `transform` or stacking context can't clip it. The panel\n * then shows from the commit after hydration, never in server markup.\n * Theming variables set on an ancestor of the trigger reach it only when\n * 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 <PopupPortal 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 </PopupPortal>\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":"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"}
|
|
@@ -4,6 +4,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
4
4
|
import React, { createContext, useEffect, useRef, useCallback, useState, useId, useContext } from 'react';
|
|
5
5
|
import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
|
|
6
6
|
import { withSubComponents } from '../helpers/withSubComponents.js';
|
|
7
|
+
import { isElementOf } from '../helpers/elementType.js';
|
|
7
8
|
import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
|
|
8
9
|
import { warnDeprecatedColorProp } from '../helpers/colorDeprecations.js';
|
|
9
10
|
import { Icon } from '../elements/Icon.js';
|
|
@@ -128,7 +129,7 @@ const TabsComponent = ({ align, size, isFullwidth, isFullWidth, fullwidth, boxed
|
|
|
128
129
|
tabStop = enabledTabs.length > 0 ? enabledTabs[0].index : null;
|
|
129
130
|
// Check if children include TabsContent
|
|
130
131
|
const childArray = React.Children.toArray(children);
|
|
131
|
-
const hasContent = childArray.some(child =>
|
|
132
|
+
const hasContent = childArray.some(child => isElementOf(child, TabsContent));
|
|
132
133
|
const contextValue = {
|
|
133
134
|
activeTab,
|
|
134
135
|
setActiveTab,
|
|
@@ -165,7 +166,7 @@ const TabsComponent = ({ align, size, isFullwidth, isFullWidth, fullwidth, boxed
|
|
|
165
166
|
const listChildren = [];
|
|
166
167
|
const contentChildren = [];
|
|
167
168
|
childArray.forEach(child => {
|
|
168
|
-
if (
|
|
169
|
+
if (isElementOf(child, TabsContent)) {
|
|
169
170
|
contentChildren.push(child);
|
|
170
171
|
}
|
|
171
172
|
else {
|
|
@@ -179,7 +180,7 @@ const TabsComponent = ({ align, size, isFullwidth, isFullWidth, fullwidth, boxed
|
|
|
179
180
|
const listChildren = [];
|
|
180
181
|
const contentChildren = [];
|
|
181
182
|
childArray.forEach(child => {
|
|
182
|
-
if (
|
|
183
|
+
if (isElementOf(child, TabsContent)) {
|
|
183
184
|
contentChildren.push(child);
|
|
184
185
|
}
|
|
185
186
|
else {
|