@allxsmith/bestax-bulma 5.27.0 → 5.27.2
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/columns/Column.js +48 -0
- package/dist/esm/columns/Column.js.map +1 -0
- package/dist/esm/columns/Columns.js +53 -0
- package/dist/esm/columns/Columns.js.map +1 -0
- package/dist/esm/components/Avatar.js +299 -0
- package/dist/esm/components/Avatar.js.map +1 -0
- package/dist/esm/components/Avatars.js +81 -0
- package/dist/esm/components/Avatars.js.map +1 -0
- package/dist/esm/components/Badge.js +105 -0
- package/dist/esm/components/Badge.js.map +1 -0
- package/dist/esm/components/Breadcrumb.js +36 -0
- package/dist/esm/components/Breadcrumb.js.map +1 -0
- package/dist/esm/components/Card.js +252 -0
- package/dist/esm/components/Card.js.map +1 -0
- package/dist/esm/components/Carousel.js +351 -0
- package/dist/esm/components/Carousel.js.map +1 -0
- package/dist/esm/components/Collapse.js +193 -0
- package/dist/esm/components/Collapse.js.map +1 -0
- package/dist/esm/components/Collapses.js +99 -0
- package/dist/esm/components/Collapses.js.map +1 -0
- package/dist/esm/components/Dialog.js +230 -0
- package/dist/esm/components/Dialog.js.map +1 -0
- package/dist/esm/components/Dropdown.js +362 -0
- package/dist/esm/components/Dropdown.js.map +1 -0
- package/dist/esm/components/Loading.js +87 -0
- package/dist/esm/components/Loading.js.map +1 -0
- package/dist/esm/components/Menu.js +117 -0
- package/dist/esm/components/Menu.js.map +1 -0
- package/dist/esm/components/Message.js +56 -0
- package/dist/esm/components/Message.js.map +1 -0
- package/dist/esm/components/Modal.js +354 -0
- package/dist/esm/components/Modal.js.map +1 -0
- package/dist/esm/components/Navbar.js +287 -0
- package/dist/esm/components/Navbar.js.map +1 -0
- package/dist/esm/components/Pagination.js +191 -0
- package/dist/esm/components/Pagination.js.map +1 -0
- package/dist/esm/components/Panel.js +100 -0
- package/dist/esm/components/Panel.js.map +1 -0
- package/dist/esm/components/Popover.js +298 -0
- package/dist/esm/components/Popover.js.map +1 -0
- package/dist/esm/components/Reveal.js +157 -0
- package/dist/esm/components/Reveal.js.map +1 -0
- package/dist/esm/components/Sidebar.js +209 -0
- package/dist/esm/components/Sidebar.js.map +1 -0
- package/dist/esm/components/Steps.js +128 -0
- package/dist/esm/components/Steps.js.map +1 -0
- package/dist/esm/components/Tabs.js +335 -0
- package/dist/esm/components/Tabs.js.map +1 -0
- package/dist/esm/components/Toast.js +322 -0
- package/dist/esm/components/Toast.js.map +1 -0
- package/dist/esm/components/Tooltip.js +202 -0
- package/dist/esm/components/Tooltip.js.map +1 -0
- package/dist/esm/components/collapsesContext.js +12 -0
- package/dist/esm/components/collapsesContext.js.map +1 -0
- package/dist/esm/elements/Block.js +29 -0
- package/dist/esm/elements/Block.js.map +1 -0
- package/dist/esm/elements/Box.js +32 -0
- package/dist/esm/elements/Box.js.map +1 -0
- package/dist/esm/elements/Button.js +139 -0
- package/dist/esm/elements/Button.js.map +1 -0
- package/dist/esm/elements/Buttons.js +42 -0
- package/dist/esm/elements/Buttons.js.map +1 -0
- package/dist/esm/elements/Code.js +25 -0
- package/dist/esm/elements/Code.js.map +1 -0
- package/dist/esm/elements/Content.js +33 -0
- package/dist/esm/elements/Content.js.map +1 -0
- package/dist/esm/elements/Delete.js +35 -0
- package/dist/esm/elements/Delete.js.map +1 -0
- package/dist/esm/elements/Divider.js +27 -0
- package/dist/esm/elements/Divider.js.map +1 -0
- package/dist/esm/elements/Emphasis.js +25 -0
- package/dist/esm/elements/Emphasis.js.map +1 -0
- package/dist/esm/elements/Figure.js +58 -0
- package/dist/esm/elements/Figure.js.map +1 -0
- package/dist/esm/elements/Icon.js +256 -0
- package/dist/esm/elements/Icon.js.map +1 -0
- package/dist/esm/elements/IconText.js +36 -0
- package/dist/esm/elements/IconText.js.map +1 -0
- package/dist/esm/elements/Image.js +46 -0
- package/dist/esm/elements/Image.js.map +1 -0
- package/dist/esm/elements/Link.js +36 -0
- package/dist/esm/elements/Link.js.map +1 -0
- package/dist/esm/elements/LinkButton.js +37 -0
- package/dist/esm/elements/LinkButton.js.map +1 -0
- package/dist/esm/elements/ListItem.js +28 -0
- package/dist/esm/elements/ListItem.js.map +1 -0
- package/dist/esm/elements/Loader.js +37 -0
- package/dist/esm/elements/Loader.js.map +1 -0
- package/dist/esm/elements/Notification.js +316 -0
- package/dist/esm/elements/Notification.js.map +1 -0
- package/dist/esm/elements/OrderedList.js +31 -0
- package/dist/esm/elements/OrderedList.js.map +1 -0
- package/dist/esm/elements/Paragraph.js +28 -0
- package/dist/esm/elements/Paragraph.js.map +1 -0
- package/dist/esm/elements/Pre.js +25 -0
- package/dist/esm/elements/Pre.js.map +1 -0
- package/dist/esm/elements/Progress.js +33 -0
- package/dist/esm/elements/Progress.js.map +1 -0
- package/dist/esm/elements/Skeleton.js +30 -0
- package/dist/esm/elements/Skeleton.js.map +1 -0
- package/dist/esm/elements/Span.js +28 -0
- package/dist/esm/elements/Span.js.map +1 -0
- package/dist/esm/elements/Strong.js +25 -0
- package/dist/esm/elements/Strong.js.map +1 -0
- package/dist/esm/elements/SubTitle.js +51 -0
- package/dist/esm/elements/SubTitle.js.map +1 -0
- package/dist/esm/elements/Table.js +51 -0
- package/dist/esm/elements/Table.js.map +1 -0
- package/dist/esm/elements/Tag.js +49 -0
- package/dist/esm/elements/Tag.js.map +1 -0
- package/dist/esm/elements/Tags.js +34 -0
- package/dist/esm/elements/Tags.js.map +1 -0
- package/dist/esm/elements/Tbody.js +26 -0
- package/dist/esm/elements/Tbody.js.map +1 -0
- package/dist/esm/elements/Td.js +61 -0
- package/dist/esm/elements/Td.js.map +1 -0
- package/dist/esm/elements/Tfoot.js +26 -0
- package/dist/esm/elements/Tfoot.js.map +1 -0
- package/dist/esm/elements/Th.js +34 -0
- package/dist/esm/elements/Th.js.map +1 -0
- package/dist/esm/elements/Thead.js +26 -0
- package/dist/esm/elements/Thead.js.map +1 -0
- package/dist/esm/elements/Title.js +44 -0
- package/dist/esm/elements/Title.js.map +1 -0
- package/dist/esm/elements/Tr.js +31 -0
- package/dist/esm/elements/Tr.js.map +1 -0
- package/dist/esm/elements/UnorderedList.js +31 -0
- package/dist/esm/elements/UnorderedList.js.map +1 -0
- package/dist/esm/elements/iconProps.js +49 -0
- package/dist/esm/elements/iconProps.js.map +1 -0
- package/dist/esm/form/Autocomplete.js +279 -0
- package/dist/esm/form/Autocomplete.js.map +1 -0
- package/dist/esm/form/Checkbox.js +111 -0
- package/dist/esm/form/Checkbox.js.map +1 -0
- package/dist/esm/form/Checkboxes.js +90 -0
- package/dist/esm/form/Checkboxes.js.map +1 -0
- package/dist/esm/form/Control.js +79 -0
- package/dist/esm/form/Control.js.map +1 -0
- package/dist/esm/form/DateInput.js +88 -0
- package/dist/esm/form/DateInput.js.map +1 -0
- package/dist/esm/form/DateInputBase.js +263 -0
- package/dist/esm/form/DateInputBase.js.map +1 -0
- package/dist/esm/form/DateRangeInput.js +77 -0
- package/dist/esm/form/DateRangeInput.js.map +1 -0
- package/dist/esm/form/DateRangeInputBase.js +301 -0
- package/dist/esm/form/DateRangeInputBase.js.map +1 -0
- package/dist/esm/form/DateTimeInput.js +88 -0
- package/dist/esm/form/DateTimeInput.js.map +1 -0
- package/dist/esm/form/DateTimeInputBase.js +333 -0
- package/dist/esm/form/DateTimeInputBase.js.map +1 -0
- package/dist/esm/form/Field.js +167 -0
- package/dist/esm/form/Field.js.map +1 -0
- package/dist/esm/form/File.js +112 -0
- package/dist/esm/form/File.js.map +1 -0
- package/dist/esm/form/FormContext.js +194 -0
- package/dist/esm/form/FormContext.js.map +1 -0
- package/dist/esm/form/Input.js +88 -0
- package/dist/esm/form/Input.js.map +1 -0
- package/dist/esm/form/InputBase.js +40 -0
- package/dist/esm/form/InputBase.js.map +1 -0
- package/dist/esm/form/Numberinput.js +201 -0
- package/dist/esm/form/Numberinput.js.map +1 -0
- package/dist/esm/form/Radio.js +108 -0
- package/dist/esm/form/Radio.js.map +1 -0
- package/dist/esm/form/Radios.js +92 -0
- package/dist/esm/form/Radios.js.map +1 -0
- package/dist/esm/form/Rate.js +280 -0
- package/dist/esm/form/Rate.js.map +1 -0
- package/dist/esm/form/Select.js +81 -0
- package/dist/esm/form/Select.js.map +1 -0
- package/dist/esm/form/SelectBase.js +54 -0
- package/dist/esm/form/SelectBase.js.map +1 -0
- package/dist/esm/form/Slider.js +461 -0
- package/dist/esm/form/Slider.js.map +1 -0
- package/dist/esm/form/Switch.js +96 -0
- package/dist/esm/form/Switch.js.map +1 -0
- package/dist/esm/form/Taginput.js +351 -0
- package/dist/esm/form/Taginput.js.map +1 -0
- package/dist/esm/form/TextArea.js +77 -0
- package/dist/esm/form/TextArea.js.map +1 -0
- package/dist/esm/form/TextAreaBase.js +45 -0
- package/dist/esm/form/TextAreaBase.js.map +1 -0
- package/dist/esm/form/TimeInput.js +84 -0
- package/dist/esm/form/TimeInput.js.map +1 -0
- package/dist/esm/form/TimeInputBase.js +246 -0
- package/dist/esm/form/TimeInputBase.js.map +1 -0
- package/dist/esm/form/_pickerInternals/Calendar.js +760 -0
- package/dist/esm/form/_pickerInternals/Calendar.js.map +1 -0
- package/dist/esm/form/_pickerInternals/PickerPopover.js +95 -0
- package/dist/esm/form/_pickerInternals/PickerPopover.js.map +1 -0
- package/dist/esm/form/_pickerInternals/TimeWheels.js +721 -0
- package/dist/esm/form/_pickerInternals/TimeWheels.js.map +1 -0
- package/dist/esm/form/_pickerInternals/audioTick.js +109 -0
- package/dist/esm/form/_pickerInternals/audioTick.js.map +1 -0
- package/dist/esm/form/_pickerInternals/dateUtils.js +267 -0
- package/dist/esm/form/_pickerInternals/dateUtils.js.map +1 -0
- package/dist/esm/form/_pickerInternals/formatters.js +322 -0
- package/dist/esm/form/_pickerInternals/formatters.js.map +1 -0
- package/dist/esm/form/_pickerInternals/haptics.js +38 -0
- package/dist/esm/form/_pickerInternals/haptics.js.map +1 -0
- package/dist/esm/form/_pickerInternals/nativeInputSupport.js +25 -0
- package/dist/esm/form/_pickerInternals/nativeInputSupport.js.map +1 -0
- package/dist/esm/form/_pickerInternals/pickerTypes.js +50 -0
- package/dist/esm/form/_pickerInternals/pickerTypes.js.map +1 -0
- package/dist/esm/form/_pickerInternals/segmentMap.js +315 -0
- package/dist/esm/form/_pickerInternals/segmentMap.js.map +1 -0
- package/dist/esm/form/_pickerInternals/useNativeMobilePicker.js +49 -0
- package/dist/esm/form/_pickerInternals/useNativeMobilePicker.js.map +1 -0
- package/dist/esm/form/_pickerInternals/useSegmentedEntry.js +427 -0
- package/dist/esm/form/_pickerInternals/useSegmentedEntry.js.map +1 -0
- package/dist/esm/form/controlLoading.js +18 -0
- package/dist/esm/form/controlLoading.js.map +1 -0
- package/dist/esm/form/useAutoLabelId.js +88 -0
- package/dist/esm/form/useAutoLabelId.js.map +1 -0
- package/dist/esm/grid/Cell.js +35 -0
- package/dist/esm/grid/Cell.js.map +1 -0
- package/dist/esm/grid/Grid.js +51 -0
- package/dist/esm/grid/Grid.js.map +1 -0
- package/dist/esm/helpers/ClientOnly.js +33 -0
- package/dist/esm/helpers/ClientOnly.js.map +1 -0
- package/dist/esm/helpers/Config.js +60 -0
- package/dist/esm/helpers/Config.js.map +1 -0
- package/dist/esm/helpers/Theme.js +947 -0
- package/dist/esm/helpers/Theme.js.map +1 -0
- package/dist/esm/helpers/anchorAttrs.js +72 -0
- package/dist/esm/helpers/anchorAttrs.js.map +1 -0
- package/dist/esm/helpers/bulmaClassHelpers.js +415 -0
- package/dist/esm/helpers/bulmaClassHelpers.js.map +1 -0
- package/dist/esm/helpers/buttonType.js +24 -0
- package/dist/esm/helpers/buttonType.js.map +1 -0
- package/dist/esm/helpers/classNames.js +137 -0
- package/dist/esm/helpers/classNames.js.map +1 -0
- package/dist/esm/helpers/colorDeprecations.js +50 -0
- package/dist/esm/helpers/colorDeprecations.js.map +1 -0
- package/dist/esm/helpers/devWarnings.js +27 -0
- package/dist/esm/helpers/devWarnings.js.map +1 -0
- package/dist/esm/helpers/inertProps.js +27 -0
- package/dist/esm/helpers/inertProps.js.map +1 -0
- package/dist/esm/helpers/mergeBulmaStyles.js +20 -0
- package/dist/esm/helpers/mergeBulmaStyles.js.map +1 -0
- package/dist/esm/helpers/polymorphic.js +18 -0
- package/dist/esm/helpers/polymorphic.js.map +1 -0
- package/dist/esm/helpers/portal.js +76 -0
- package/dist/esm/helpers/portal.js.map +1 -0
- package/dist/esm/helpers/positionStacks.js +45 -0
- package/dist/esm/helpers/positionStacks.js.map +1 -0
- package/dist/esm/helpers/scrollLock.js +38 -0
- package/dist/esm/helpers/scrollLock.js.map +1 -0
- package/dist/esm/helpers/shadowDom.js +71 -0
- package/dist/esm/helpers/shadowDom.js.map +1 -0
- package/dist/esm/helpers/statusRegion.js +282 -0
- package/dist/esm/helpers/statusRegion.js.map +1 -0
- package/dist/esm/helpers/useAnchoredPosition.js +86 -0
- package/dist/esm/helpers/useAnchoredPosition.js.map +1 -0
- package/dist/esm/helpers/useBulmaClasses.js +158 -0
- package/dist/esm/helpers/useBulmaClasses.js.map +1 -0
- package/dist/esm/helpers/useClientLayoutEffect.js +13 -0
- package/dist/esm/helpers/useClientLayoutEffect.js.map +1 -0
- package/dist/esm/helpers/useColorClasses.js +84 -0
- package/dist/esm/helpers/useColorClasses.js.map +1 -0
- package/dist/esm/helpers/useFlexboxClasses.js +92 -0
- package/dist/esm/helpers/useFlexboxClasses.js.map +1 -0
- package/dist/esm/helpers/useFocusTrap.js +470 -0
- package/dist/esm/helpers/useFocusTrap.js.map +1 -0
- package/dist/esm/helpers/useIsHydrated.js +31 -0
- package/dist/esm/helpers/useIsHydrated.js.map +1 -0
- package/dist/esm/helpers/useOtherClasses.js +115 -0
- package/dist/esm/helpers/useOtherClasses.js.map +1 -0
- package/dist/esm/helpers/useSpacingClasses.js +82 -0
- package/dist/esm/helpers/useSpacingClasses.js.map +1 -0
- package/dist/esm/helpers/useTypographyClasses.js +93 -0
- package/dist/esm/helpers/useTypographyClasses.js.map +1 -0
- package/dist/esm/helpers/useVisibilityClasses.js +134 -0
- package/dist/esm/helpers/useVisibilityClasses.js.map +1 -0
- package/dist/esm/helpers/withSubComponents.js +24 -0
- package/dist/esm/helpers/withSubComponents.js.map +1 -0
- package/dist/esm/layout/Container.js +48 -0
- package/dist/esm/layout/Container.js.map +1 -0
- package/dist/esm/layout/Footer.js +33 -0
- package/dist/esm/layout/Footer.js.map +1 -0
- package/dist/esm/layout/Hero.js +90 -0
- package/dist/esm/layout/Hero.js.map +1 -0
- package/dist/esm/layout/Level.js +110 -0
- package/dist/esm/layout/Level.js.map +1 -0
- package/dist/esm/layout/Media.js +86 -0
- package/dist/esm/layout/Media.js.map +1 -0
- package/dist/esm/layout/Section.js +30 -0
- package/dist/esm/layout/Section.js.map +1 -0
- package/dist/extras.css +1 -1
- package/dist/extras.css.map +1 -1
- package/dist/index.cjs +187 -57
- package/dist/index.cjs.map +1 -1
- package/dist/index.esm.js +115 -17516
- package/dist/index.esm.js.map +1 -1
- package/dist/types/elements/Icon.d.ts +10 -7
- package/dist/types/form/Autocomplete.d.ts +1 -1
- package/dist/types/form/Checkboxes.d.ts +1 -1
- package/dist/types/form/DateInput.d.ts +1 -1
- package/dist/types/form/DateInputBase.d.ts +3 -4
- package/dist/types/form/DateRangeInput.d.ts +1 -1
- package/dist/types/form/DateTimeInput.d.ts +1 -1
- package/dist/types/form/DateTimeInputBase.d.ts +3 -4
- package/dist/types/form/Field.d.ts +2 -2
- package/dist/types/form/File.d.ts +4 -4
- package/dist/types/form/FormContext.d.ts +24 -2
- package/dist/types/form/Numberinput.d.ts +1 -1
- package/dist/types/form/Radios.d.ts +1 -1
- package/dist/types/form/Rate.d.ts +1 -1
- package/dist/types/form/Slider.d.ts +1 -1
- package/dist/types/form/Taginput.d.ts +1 -1
- package/dist/types/form/TimeInput.d.ts +1 -1
- package/dist/types/form/useAutoLabelId.d.ts +25 -4
- package/dist/types/helpers/Config.d.ts +3 -4
- package/dist/types/helpers/Theme.d.ts +44 -40
- package/dist/types-cjs/elements/Icon.d.ts +10 -7
- package/dist/types-cjs/form/Autocomplete.d.ts +1 -1
- package/dist/types-cjs/form/Checkboxes.d.ts +1 -1
- package/dist/types-cjs/form/DateInput.d.ts +1 -1
- package/dist/types-cjs/form/DateInputBase.d.ts +3 -4
- package/dist/types-cjs/form/DateRangeInput.d.ts +1 -1
- package/dist/types-cjs/form/DateTimeInput.d.ts +1 -1
- package/dist/types-cjs/form/DateTimeInputBase.d.ts +3 -4
- package/dist/types-cjs/form/Field.d.ts +2 -2
- package/dist/types-cjs/form/File.d.ts +4 -4
- package/dist/types-cjs/form/FormContext.d.ts +24 -2
- package/dist/types-cjs/form/Numberinput.d.ts +1 -1
- package/dist/types-cjs/form/Radios.d.ts +1 -1
- package/dist/types-cjs/form/Rate.d.ts +1 -1
- package/dist/types-cjs/form/Slider.d.ts +1 -1
- package/dist/types-cjs/form/Taginput.d.ts +1 -1
- package/dist/types-cjs/form/TimeInput.d.ts +1 -1
- package/dist/types-cjs/form/useAutoLabelId.d.ts +25 -4
- package/dist/types-cjs/helpers/Config.d.ts +3 -4
- package/dist/types-cjs/helpers/Theme.d.ts +44 -40
- 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/form/_dateinput.scss +37 -6
- package/src/scss/form/_datetimeinput.scss +7 -2
- package/src/scss/form/_picker-popover.scss +1 -4
|
@@ -0,0 +1,322 @@
|
|
|
1
|
+
/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
|
|
2
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { forwardRef, useState, useRef, useCallback, useEffect, useSyncExternalStore } from 'react';
|
|
4
|
+
import { createPortal } from 'react-dom';
|
|
5
|
+
import { isEventInside } from '../helpers/shadowDom.js';
|
|
6
|
+
import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
|
|
7
|
+
import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
|
|
8
|
+
import { resolvePortalContainer } from '../helpers/portal.js';
|
|
9
|
+
import { groupIntoPositionStacks } from '../helpers/positionStacks.js';
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* The `Toast` component provides brief notification messages with optional action and cancel buttons.
|
|
13
|
+
*
|
|
14
|
+
* @function
|
|
15
|
+
* @param {ToastProps} props - Props for the Toast component.
|
|
16
|
+
* @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the toast element.
|
|
17
|
+
* @returns {JSX.Element | null} The rendered toast component.
|
|
18
|
+
*
|
|
19
|
+
* @example
|
|
20
|
+
* // Basic toast
|
|
21
|
+
* <Toast message="Operation successful!" type="success" />
|
|
22
|
+
*
|
|
23
|
+
* @example
|
|
24
|
+
* // Toast with action button
|
|
25
|
+
* <Toast message="Item deleted" actionText="Undo" onAction={handleUndo} />
|
|
26
|
+
*/
|
|
27
|
+
const Toast = forwardRef(({ message, type = 'default', actionType, position = 'top-right', duration = 2000, indefinite = false, dismissible = true, closable = false, rounded = false, pauseOnHover = false, cancelable = true, actionText, cancelText, onAction, onClose, container, inline = false, className, ...props }, ref) => {
|
|
28
|
+
const { bulmaHelperClasses, rest } = useBulmaClasses(props);
|
|
29
|
+
const [isVisible, setIsVisible] = useState(true);
|
|
30
|
+
const [isPaused, setIsPaused] = useState(false);
|
|
31
|
+
const toastRef = useRef(null);
|
|
32
|
+
// Cleanup returned by a consumer's callback ref on attach, held until detach.
|
|
33
|
+
const consumerCleanupRef = useRef(null);
|
|
34
|
+
const handleClose = useCallback(() => {
|
|
35
|
+
setIsVisible(false);
|
|
36
|
+
onClose?.();
|
|
37
|
+
}, [onClose]);
|
|
38
|
+
const handleAction = useCallback(() => {
|
|
39
|
+
onAction?.();
|
|
40
|
+
handleClose();
|
|
41
|
+
}, [onAction, handleClose]);
|
|
42
|
+
useEffect(() => {
|
|
43
|
+
if (indefinite || duration === 0 || isPaused)
|
|
44
|
+
return undefined;
|
|
45
|
+
const timer = setTimeout(() => {
|
|
46
|
+
handleClose();
|
|
47
|
+
}, duration);
|
|
48
|
+
return () => clearTimeout(timer);
|
|
49
|
+
}, [duration, indefinite, isPaused, handleClose]);
|
|
50
|
+
const handleMouseEnter = useCallback(() => {
|
|
51
|
+
if (pauseOnHover) {
|
|
52
|
+
setIsPaused(true);
|
|
53
|
+
}
|
|
54
|
+
}, [pauseOnHover]);
|
|
55
|
+
const handleMouseLeave = useCallback(() => {
|
|
56
|
+
if (pauseOnHover) {
|
|
57
|
+
setIsPaused(false);
|
|
58
|
+
}
|
|
59
|
+
}, [pauseOnHover]);
|
|
60
|
+
// Click-outside dismiss — deferred so the click that spawned the toast
|
|
61
|
+
// doesn't immediately dismiss it before it's even visible.
|
|
62
|
+
useEffect(() => {
|
|
63
|
+
if (!dismissible || !isVisible)
|
|
64
|
+
return undefined;
|
|
65
|
+
const handleDocumentClick = (e) => {
|
|
66
|
+
if (toastRef.current && !isEventInside(e, toastRef.current)) {
|
|
67
|
+
handleClose();
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
const raf = requestAnimationFrame(() => {
|
|
71
|
+
document.addEventListener('click', handleDocumentClick);
|
|
72
|
+
});
|
|
73
|
+
return () => {
|
|
74
|
+
cancelAnimationFrame(raf);
|
|
75
|
+
document.removeEventListener('click', handleDocumentClick);
|
|
76
|
+
};
|
|
77
|
+
}, [dismissible, isVisible, handleClose]);
|
|
78
|
+
useEffect(() => {
|
|
79
|
+
if (!cancelable)
|
|
80
|
+
return undefined;
|
|
81
|
+
const handleKeyDown = (e) => {
|
|
82
|
+
if (e.key === 'Escape') {
|
|
83
|
+
handleClose();
|
|
84
|
+
}
|
|
85
|
+
};
|
|
86
|
+
document.addEventListener('keydown', handleKeyDown);
|
|
87
|
+
return () => document.removeEventListener('keydown', handleKeyDown);
|
|
88
|
+
}, [cancelable, handleClose]);
|
|
89
|
+
const containerClasses = usePrefixedClassNames('toast-container', {
|
|
90
|
+
[`is-${position}`]: true,
|
|
91
|
+
});
|
|
92
|
+
const toastClasses = usePrefixedClassNames('toast', {
|
|
93
|
+
[`is-${type}`]: type !== 'default',
|
|
94
|
+
[`is-action-${actionType}`]: !!actionType && actionType !== 'default',
|
|
95
|
+
'is-rounded': rounded,
|
|
96
|
+
});
|
|
97
|
+
const combinedClasses = classNames(toastClasses, bulmaHelperClasses, className);
|
|
98
|
+
const toastMessageClass = usePrefixedClassNames('toast-message');
|
|
99
|
+
const toastActionsClass = usePrefixedClassNames('toast-actions');
|
|
100
|
+
const toastCancelClass = usePrefixedClassNames('toast-cancel');
|
|
101
|
+
const toastActionClass = usePrefixedClassNames('toast-action');
|
|
102
|
+
const toastButtonClass = usePrefixedClassNames('button');
|
|
103
|
+
const toastCloseClass = usePrefixedClassNames('delete', 'is-small');
|
|
104
|
+
const setRef = useCallback((node) => {
|
|
105
|
+
toastRef.current = node;
|
|
106
|
+
if (typeof ref === 'function') {
|
|
107
|
+
// React 19 lets a callback ref return a cleanup function and detaches by
|
|
108
|
+
// running it instead of calling the ref with `null`; React 18 discards the
|
|
109
|
+
// return value entirely. Returning it from here would be a React-19-only
|
|
110
|
+
// contract, so we hold the cleanup and run it ourselves on detach — the
|
|
111
|
+
// same shape as `Dropdown`, `Modal`, `Dialog`, `Sidebar` and `Carousel`.
|
|
112
|
+
// The form controls that merge a forwarded ref still discard the cleanup
|
|
113
|
+
// and detach with `ref(null)`, so this is not yet library-wide — grep
|
|
114
|
+
// `typeof ref === 'function'` for the current split. Memoized because an
|
|
115
|
+
// unstable ref identity makes React detach and re-attach on every render,
|
|
116
|
+
// which would run that cleanup each time.
|
|
117
|
+
if (node === null) {
|
|
118
|
+
const consumerCleanup = consumerCleanupRef.current;
|
|
119
|
+
consumerCleanupRef.current = null;
|
|
120
|
+
if (consumerCleanup) {
|
|
121
|
+
consumerCleanup();
|
|
122
|
+
}
|
|
123
|
+
else {
|
|
124
|
+
ref(null);
|
|
125
|
+
}
|
|
126
|
+
return;
|
|
127
|
+
}
|
|
128
|
+
const cleanup = ref(node);
|
|
129
|
+
consumerCleanupRef.current =
|
|
130
|
+
typeof cleanup === 'function' ? cleanup : null;
|
|
131
|
+
}
|
|
132
|
+
else if (ref) {
|
|
133
|
+
ref.current = node;
|
|
134
|
+
}
|
|
135
|
+
}, [ref]);
|
|
136
|
+
if (!isVisible) {
|
|
137
|
+
return null;
|
|
138
|
+
}
|
|
139
|
+
const toastElement = (jsxs("div", { ref: setRef, className: combinedClasses, role: "alert", "aria-live": type === 'danger' || type === 'warning' ? 'assertive' : 'polite', onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: dismissible ? handleClose : undefined, ...rest, children: [jsx("span", { className: toastMessageClass, children: message }), (cancelText || actionText) && (jsxs("div", { className: toastActionsClass, children: [cancelText && (jsx("span", { className: toastCancelClass, children: jsx("button", { type: "button", className: toastButtonClass, onClick: e => {
|
|
140
|
+
e.stopPropagation();
|
|
141
|
+
handleClose();
|
|
142
|
+
}, children: cancelText }) })), actionText && (jsx("span", { className: toastActionClass, children: jsx("button", { type: "button", className: toastButtonClass, onClick: e => {
|
|
143
|
+
e.stopPropagation();
|
|
144
|
+
handleAction();
|
|
145
|
+
}, children: actionText }) }))] })), closable && (jsx("button", { type: "button", className: toastCloseClass, onClick: e => {
|
|
146
|
+
e.stopPropagation();
|
|
147
|
+
handleClose();
|
|
148
|
+
}, "aria-label": "Close" }))] }));
|
|
149
|
+
if (inline) {
|
|
150
|
+
return toastElement;
|
|
151
|
+
}
|
|
152
|
+
const toastContent = jsx("div", { className: containerClasses, children: toastElement });
|
|
153
|
+
if (typeof document !== 'undefined') {
|
|
154
|
+
return createPortal(toastContent, resolvePortalContainer(container));
|
|
155
|
+
}
|
|
156
|
+
return null;
|
|
157
|
+
});
|
|
158
|
+
Toast.displayName = 'Toast';
|
|
159
|
+
let toastId = 0;
|
|
160
|
+
const toastListeners = new Set();
|
|
161
|
+
let toasts = [];
|
|
162
|
+
// Queued toasts: FIFO queue, one at a time
|
|
163
|
+
let queuedToasts = [];
|
|
164
|
+
let currentQueuedToast = null;
|
|
165
|
+
// The server has nowhere to portal a toast to, and its copy of this module is
|
|
166
|
+
// shared by every request, so server rendering reads an empty list. Hydration
|
|
167
|
+
// reads it too, which keeps the first client render matching the server's.
|
|
168
|
+
const noToasts = [];
|
|
169
|
+
const getServerToasts = () => noToasts;
|
|
170
|
+
// What a container shows right now: the stacked toasts, then the queued one on
|
|
171
|
+
// screen. ToastContainer renders from this rather than from updates alone, so
|
|
172
|
+
// toasts raised before it mounted still appear. It is replaced rather than
|
|
173
|
+
// mutated, and only when listeners are notified, because useSyncExternalStore
|
|
174
|
+
// needs the same array back between changes. An empty list is `noToasts`
|
|
175
|
+
// itself, so a container that hydrates with nothing to show reads the same
|
|
176
|
+
// snapshot the server did and has no reason to render again.
|
|
177
|
+
let visibleToasts = noToasts;
|
|
178
|
+
const getVisibleToasts = () => visibleToasts;
|
|
179
|
+
const notifyListeners = () => {
|
|
180
|
+
const allVisible = [...toasts];
|
|
181
|
+
if (currentQueuedToast) {
|
|
182
|
+
allVisible.push(currentQueuedToast);
|
|
183
|
+
}
|
|
184
|
+
visibleToasts = allVisible.length > 0 ? allVisible : noToasts;
|
|
185
|
+
toastListeners.forEach(listener => listener([...allVisible]));
|
|
186
|
+
};
|
|
187
|
+
const processQueuedToast = () => {
|
|
188
|
+
if (currentQueuedToast || queuedToasts.length === 0)
|
|
189
|
+
return;
|
|
190
|
+
currentQueuedToast = queuedToasts.shift();
|
|
191
|
+
notifyListeners();
|
|
192
|
+
};
|
|
193
|
+
/**
|
|
194
|
+
* Programmatic toast API for showing, closing, and managing toasts.
|
|
195
|
+
*
|
|
196
|
+
* @example
|
|
197
|
+
* toast.success('Saved!');
|
|
198
|
+
* toast.show({ message: 'Item deleted', actionText: 'Undo', onAction: handleUndo });
|
|
199
|
+
*/
|
|
200
|
+
const toast = {
|
|
201
|
+
/**
|
|
202
|
+
* Show a toast with the given options.
|
|
203
|
+
* @param {ToastOptions} options - Toast configuration.
|
|
204
|
+
* @returns {string} The unique ID of the created toast.
|
|
205
|
+
*/
|
|
206
|
+
show: (options) => {
|
|
207
|
+
const id = `toast-${++toastId}`;
|
|
208
|
+
const instance = { id, props: options };
|
|
209
|
+
if (options.queue) {
|
|
210
|
+
queuedToasts.push(instance);
|
|
211
|
+
processQueuedToast();
|
|
212
|
+
}
|
|
213
|
+
else {
|
|
214
|
+
toasts.push(instance);
|
|
215
|
+
notifyListeners();
|
|
216
|
+
}
|
|
217
|
+
return id;
|
|
218
|
+
},
|
|
219
|
+
/**
|
|
220
|
+
* Show a success toast.
|
|
221
|
+
* @param {string} message - The message to display.
|
|
222
|
+
* @param {Partial<ToastOptions>} [options] - Additional options.
|
|
223
|
+
* @returns {string} The toast ID.
|
|
224
|
+
*/
|
|
225
|
+
success: (message, options) => {
|
|
226
|
+
return toast.show({ message, type: 'success', ...options });
|
|
227
|
+
},
|
|
228
|
+
/**
|
|
229
|
+
* Show a danger toast.
|
|
230
|
+
* @param {string} message - The message to display.
|
|
231
|
+
* @param {Partial<ToastOptions>} [options] - Additional options.
|
|
232
|
+
* @returns {string} The toast ID.
|
|
233
|
+
*/
|
|
234
|
+
danger: (message, options) => {
|
|
235
|
+
return toast.show({ message, type: 'danger', ...options });
|
|
236
|
+
},
|
|
237
|
+
/**
|
|
238
|
+
* Show a warning toast.
|
|
239
|
+
* @param {string} message - The message to display.
|
|
240
|
+
* @param {Partial<ToastOptions>} [options] - Additional options.
|
|
241
|
+
* @returns {string} The toast ID.
|
|
242
|
+
*/
|
|
243
|
+
warning: (message, options) => {
|
|
244
|
+
return toast.show({ message, type: 'warning', ...options });
|
|
245
|
+
},
|
|
246
|
+
/**
|
|
247
|
+
* Show an info toast.
|
|
248
|
+
* @param {string} message - The message to display.
|
|
249
|
+
* @param {Partial<ToastOptions>} [options] - Additional options.
|
|
250
|
+
* @returns {string} The toast ID.
|
|
251
|
+
*/
|
|
252
|
+
info: (message, options) => {
|
|
253
|
+
return toast.show({ message, type: 'info', ...options });
|
|
254
|
+
},
|
|
255
|
+
/**
|
|
256
|
+
* Close a specific toast by ID.
|
|
257
|
+
* @param {string} id - The toast ID to close.
|
|
258
|
+
*/
|
|
259
|
+
close: (id) => {
|
|
260
|
+
if (currentQueuedToast && currentQueuedToast.id === id) {
|
|
261
|
+
currentQueuedToast = null;
|
|
262
|
+
processQueuedToast();
|
|
263
|
+
}
|
|
264
|
+
else {
|
|
265
|
+
queuedToasts = queuedToasts.filter(t => t.id !== id);
|
|
266
|
+
toasts = toasts.filter(t => t.id !== id);
|
|
267
|
+
}
|
|
268
|
+
notifyListeners();
|
|
269
|
+
},
|
|
270
|
+
/** Close all toasts and clear the queue. */
|
|
271
|
+
closeAll: () => {
|
|
272
|
+
toasts = [];
|
|
273
|
+
queuedToasts = [];
|
|
274
|
+
currentQueuedToast = null;
|
|
275
|
+
notifyListeners();
|
|
276
|
+
},
|
|
277
|
+
/**
|
|
278
|
+
* Subscribe to toast state changes.
|
|
279
|
+
* @param {(toasts: ToastInstance[]) => void} listener - Callback invoked on changes.
|
|
280
|
+
* @returns {() => void} Unsubscribe function.
|
|
281
|
+
*/
|
|
282
|
+
subscribe: (listener) => {
|
|
283
|
+
toastListeners.add(listener);
|
|
284
|
+
return () => toastListeners.delete(listener);
|
|
285
|
+
},
|
|
286
|
+
};
|
|
287
|
+
// The order ToastContainer renders its stacks in: across the top of the
|
|
288
|
+
// screen, then across the bottom.
|
|
289
|
+
const toastStackOrder = [
|
|
290
|
+
'top-left',
|
|
291
|
+
'top-center',
|
|
292
|
+
'top-right',
|
|
293
|
+
'bottom-left',
|
|
294
|
+
'bottom-center',
|
|
295
|
+
'bottom-right',
|
|
296
|
+
];
|
|
297
|
+
/**
|
|
298
|
+
* Container component for rendering programmatic toasts.
|
|
299
|
+
* Place once at your app root to enable the toast API. A toast shown with a
|
|
300
|
+
* `position` appears there, and one shown without goes to the container's
|
|
301
|
+
* `position`.
|
|
302
|
+
*
|
|
303
|
+
* @function
|
|
304
|
+
* @param {{ position?: ToastPosition }} props - Container props.
|
|
305
|
+
* @returns {JSX.Element | null} The rendered toast container, or null if empty.
|
|
306
|
+
*/
|
|
307
|
+
const ToastContainer = ({ position = 'top-right' }) => {
|
|
308
|
+
// Starts from the toasts already showing instead of an empty list, then
|
|
309
|
+
// follows changes.
|
|
310
|
+
const toastList = useSyncExternalStore(toast.subscribe, getVisibleToasts, getServerToasts);
|
|
311
|
+
if (typeof document === 'undefined' || toastList.length === 0) {
|
|
312
|
+
return null;
|
|
313
|
+
}
|
|
314
|
+
const stacks = groupIntoPositionStacks(toastList, t => t.props.position, position, toastStackOrder);
|
|
315
|
+
return createPortal(stacks.map(stack => (jsx("div", { className: `toast-container is-${stack.position}`, children: stack.items.map(t => {
|
|
316
|
+
const { queue: _queue, ...toastProps } = t.props;
|
|
317
|
+
return (jsx(Toast, { ...toastProps, position: stack.position, onClose: () => toast.close(t.id) }, t.id));
|
|
318
|
+
}) }, stack.key))), document.body);
|
|
319
|
+
};
|
|
320
|
+
|
|
321
|
+
export { Toast, ToastContainer, toast };
|
|
322
|
+
//# sourceMappingURL=Toast.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Toast.js","sources":["../../../src/components/Toast.tsx"],"sourcesContent":["import React, {\n forwardRef,\n useEffect,\n useRef,\n useState,\n useCallback,\n useSyncExternalStore,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { isEventInside } from '../helpers/shadowDom';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { resolvePortalContainer } from '../helpers/portal';\nimport { groupIntoPositionStacks } from '../helpers/positionStacks';\n\n/** Color/style type presets for toast messages. */\nexport type ToastType =\n 'default' | 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n\n/** Screen positions where toasts can be displayed. */\nexport type ToastPosition =\n | 'top-left'\n | 'top-center'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-center'\n | 'bottom-right';\n\n/**\n * Props for the Toast component.\n * @extraProp {string} [className] - Additional CSS classes.\n * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the toast element.\n */\nexport interface ToastProps\n extends\n Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n Omit<BulmaClassesProps, 'color'> {\n /** The message to display (required). */\n message: string;\n /** Color variant — colors the toast **background**. */\n type?: ToastType;\n /** Color variant — colors the **action button** text. */\n actionType?: ToastType;\n /**\n * Position on the screen. Default: 'top-right'. On a standalone `<Toast>`\n * this places it. Through `toast.show()` it places that toast, and a toast\n * shown without one goes to `ToastContainer`'s `position` instead.\n */\n position?: ToastPosition;\n /** Duration in ms before auto-close. `0` disables auto-close. */\n duration?: number;\n /** Keeps the toast visible until dismissed. */\n indefinite?: boolean;\n /** Whether clicking the toast (or outside it) dismisses it. */\n dismissible?: boolean;\n /** Show an explicit close (X) button. Default: false. */\n closable?: boolean;\n /** Pill-shaped (rounded corners). */\n rounded?: boolean;\n /** Pause auto-close timer on hover. Default: false. */\n pauseOnHover?: boolean;\n /** Whether the toast can be dismissed with Escape. Default: true. */\n cancelable?: boolean;\n /** Text for an action button (e.g. \"Undo\"). */\n actionText?: string;\n /** Text for a cancel button. */\n cancelText?: string;\n /** Callback when the action button is clicked. */\n onAction?: () => void;\n /** Callback when toast closes. */\n onClose?: () => void;\n /** CSS selector or DOM node to mount the toast into. */\n container?: string | HTMLElement;\n /** Renders inline instead of using a portal. */\n inline?: boolean;\n}\n\n/**\n * The `Toast` component provides brief notification messages with optional action and cancel buttons.\n *\n * @function\n * @param {ToastProps} props - Props for the Toast component.\n * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the toast element.\n * @returns {JSX.Element | null} The rendered toast component.\n *\n * @example\n * // Basic toast\n * <Toast message=\"Operation successful!\" type=\"success\" />\n *\n * @example\n * // Toast with action button\n * <Toast message=\"Item deleted\" actionText=\"Undo\" onAction={handleUndo} />\n */\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(\n (\n {\n message,\n type = 'default',\n actionType,\n position = 'top-right',\n duration = 2000,\n indefinite = false,\n dismissible = true,\n closable = false,\n rounded = false,\n pauseOnHover = false,\n cancelable = true,\n actionText,\n cancelText,\n onAction,\n onClose,\n container,\n inline = false,\n className,\n ...props\n },\n ref\n ) => {\n const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n const [isVisible, setIsVisible] = useState(true);\n const [isPaused, setIsPaused] = useState(false);\n const toastRef = useRef<HTMLDivElement | null>(null);\n\n // Cleanup returned by a consumer's callback ref on attach, held until detach.\n const consumerCleanupRef = useRef<(() => void) | null>(null);\n const handleClose = useCallback(() => {\n setIsVisible(false);\n onClose?.();\n }, [onClose]);\n\n const handleAction = useCallback(() => {\n onAction?.();\n handleClose();\n }, [onAction, handleClose]);\n\n useEffect(() => {\n if (indefinite || duration === 0 || isPaused) return undefined;\n\n const timer = setTimeout(() => {\n handleClose();\n }, duration);\n\n return () => clearTimeout(timer);\n }, [duration, indefinite, isPaused, handleClose]);\n\n const handleMouseEnter = useCallback(() => {\n if (pauseOnHover) {\n setIsPaused(true);\n }\n }, [pauseOnHover]);\n\n const handleMouseLeave = useCallback(() => {\n if (pauseOnHover) {\n setIsPaused(false);\n }\n }, [pauseOnHover]);\n\n // Click-outside dismiss — deferred so the click that spawned the toast\n // doesn't immediately dismiss it before it's even visible.\n useEffect(() => {\n if (!dismissible || !isVisible) return undefined;\n\n const handleDocumentClick = (e: MouseEvent) => {\n if (toastRef.current && !isEventInside(e, toastRef.current)) {\n handleClose();\n }\n };\n\n const raf = requestAnimationFrame(() => {\n document.addEventListener('click', handleDocumentClick);\n });\n\n return () => {\n cancelAnimationFrame(raf);\n document.removeEventListener('click', handleDocumentClick);\n };\n }, [dismissible, isVisible, handleClose]);\n\n useEffect(() => {\n if (!cancelable) return undefined;\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n handleClose();\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n return () => document.removeEventListener('keydown', handleKeyDown);\n }, [cancelable, handleClose]);\n\n const containerClasses = usePrefixedClassNames('toast-container', {\n [`is-${position}`]: true,\n });\n\n const toastClasses = usePrefixedClassNames('toast', {\n [`is-${type}`]: type !== 'default',\n [`is-action-${actionType}`]: !!actionType && actionType !== 'default',\n 'is-rounded': rounded,\n });\n\n const combinedClasses = classNames(\n toastClasses,\n bulmaHelperClasses,\n className\n );\n const toastMessageClass = usePrefixedClassNames('toast-message');\n const toastActionsClass = usePrefixedClassNames('toast-actions');\n const toastCancelClass = usePrefixedClassNames('toast-cancel');\n const toastActionClass = usePrefixedClassNames('toast-action');\n const toastButtonClass = usePrefixedClassNames('button');\n const toastCloseClass = usePrefixedClassNames('delete', 'is-small');\n\n const setRef = useCallback(\n (node: HTMLDivElement | null) => {\n toastRef.current = node;\n if (typeof ref === 'function') {\n // React 19 lets a callback ref return a cleanup function and detaches by\n // running it instead of calling the ref with `null`; React 18 discards the\n // return value entirely. Returning it from here would be a React-19-only\n // contract, so we hold the cleanup and run it ourselves on detach — the\n // same shape as `Dropdown`, `Modal`, `Dialog`, `Sidebar` and `Carousel`.\n // The form controls that merge a forwarded ref still discard the cleanup\n // and detach with `ref(null)`, so this is not yet library-wide — grep\n // `typeof ref === 'function'` for the current split. Memoized because an\n // unstable ref identity makes React detach and re-attach on every render,\n // which would run that cleanup each time.\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\n if (!isVisible) {\n return null;\n }\n\n const toastElement = (\n <div\n ref={setRef}\n className={combinedClasses}\n role=\"alert\"\n aria-live={\n type === 'danger' || type === 'warning' ? 'assertive' : 'polite'\n }\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onClick={dismissible ? handleClose : undefined}\n {...rest}\n >\n <span className={toastMessageClass}>{message}</span>\n {(cancelText || actionText) && (\n <div className={toastActionsClass}>\n {cancelText && (\n <span className={toastCancelClass}>\n <button\n type=\"button\"\n className={toastButtonClass}\n onClick={e => {\n e.stopPropagation();\n handleClose();\n }}\n >\n {cancelText}\n </button>\n </span>\n )}\n {actionText && (\n <span className={toastActionClass}>\n <button\n type=\"button\"\n className={toastButtonClass}\n onClick={e => {\n e.stopPropagation();\n handleAction();\n }}\n >\n {actionText}\n </button>\n </span>\n )}\n </div>\n )}\n {closable && (\n <button\n type=\"button\"\n className={toastCloseClass}\n onClick={e => {\n e.stopPropagation();\n handleClose();\n }}\n aria-label=\"Close\"\n />\n )}\n </div>\n );\n\n if (inline) {\n return toastElement;\n }\n\n const toastContent = <div className={containerClasses}>{toastElement}</div>;\n\n if (typeof document !== 'undefined') {\n return createPortal(toastContent, resolvePortalContainer(container));\n }\n\n return null;\n }\n);\n\nToast.displayName = 'Toast';\n\n// Toast Manager for programmatic toasts\n\n/**\n * Options for showing a programmatic toast. Extends ToastProps with a required message.\n */\nexport interface ToastOptions extends Omit<ToastProps, 'message'> {\n /** The message to display. */\n message: string;\n /**\n * When true, toasts enter a FIFO queue and display one at a time, one queue\n * across every `position`. Default false.\n */\n queue?: boolean;\n}\n\n/**\n * Internal representation of a toast instance.\n */\nexport interface ToastInstance {\n /** Unique identifier for this toast. */\n id: string;\n /** Configuration options for the toast. */\n props: ToastOptions;\n}\n\nlet toastId = 0;\nconst toastListeners: Set<(toasts: ToastInstance[]) => void> = new Set();\nlet toasts: ToastInstance[] = [];\n\n// Queued toasts: FIFO queue, one at a time\nlet queuedToasts: ToastInstance[] = [];\nlet currentQueuedToast: ToastInstance | null = null;\n\n// The server has nowhere to portal a toast to, and its copy of this module is\n// shared by every request, so server rendering reads an empty list. Hydration\n// reads it too, which keeps the first client render matching the server's.\nconst noToasts: ToastInstance[] = [];\nconst getServerToasts = () => noToasts;\n\n// What a container shows right now: the stacked toasts, then the queued one on\n// screen. ToastContainer renders from this rather than from updates alone, so\n// toasts raised before it mounted still appear. It is replaced rather than\n// mutated, and only when listeners are notified, because useSyncExternalStore\n// needs the same array back between changes. An empty list is `noToasts`\n// itself, so a container that hydrates with nothing to show reads the same\n// snapshot the server did and has no reason to render again.\nlet visibleToasts: ToastInstance[] = noToasts;\nconst getVisibleToasts = () => visibleToasts;\n\nconst notifyListeners = () => {\n const allVisible = [...toasts];\n if (currentQueuedToast) {\n allVisible.push(currentQueuedToast);\n }\n visibleToasts = allVisible.length > 0 ? allVisible : noToasts;\n toastListeners.forEach(listener => listener([...allVisible]));\n};\n\nconst processQueuedToast = () => {\n if (currentQueuedToast || queuedToasts.length === 0) return;\n currentQueuedToast = queuedToasts.shift()!;\n notifyListeners();\n};\n\n/**\n * Programmatic toast API for showing, closing, and managing toasts.\n *\n * @example\n * toast.success('Saved!');\n * toast.show({ message: 'Item deleted', actionText: 'Undo', onAction: handleUndo });\n */\nexport const toast = {\n /**\n * Show a toast with the given options.\n * @param {ToastOptions} options - Toast configuration.\n * @returns {string} The unique ID of the created toast.\n */\n show: (options: ToastOptions): string => {\n const id = `toast-${++toastId}`;\n const instance = { id, props: options };\n\n if (options.queue) {\n queuedToasts.push(instance);\n processQueuedToast();\n } else {\n toasts.push(instance);\n notifyListeners();\n }\n\n return id;\n },\n\n /**\n * Show a success toast.\n * @param {string} message - The message to display.\n * @param {Partial<ToastOptions>} [options] - Additional options.\n * @returns {string} The toast ID.\n */\n success: (message: string, options?: Partial<ToastOptions>): string => {\n return toast.show({ message, type: 'success', ...options });\n },\n\n /**\n * Show a danger toast.\n * @param {string} message - The message to display.\n * @param {Partial<ToastOptions>} [options] - Additional options.\n * @returns {string} The toast ID.\n */\n danger: (message: string, options?: Partial<ToastOptions>): string => {\n return toast.show({ message, type: 'danger', ...options });\n },\n\n /**\n * Show a warning toast.\n * @param {string} message - The message to display.\n * @param {Partial<ToastOptions>} [options] - Additional options.\n * @returns {string} The toast ID.\n */\n warning: (message: string, options?: Partial<ToastOptions>): string => {\n return toast.show({ message, type: 'warning', ...options });\n },\n\n /**\n * Show an info toast.\n * @param {string} message - The message to display.\n * @param {Partial<ToastOptions>} [options] - Additional options.\n * @returns {string} The toast ID.\n */\n info: (message: string, options?: Partial<ToastOptions>): string => {\n return toast.show({ message, type: 'info', ...options });\n },\n\n /**\n * Close a specific toast by ID.\n * @param {string} id - The toast ID to close.\n */\n close: (id: string): void => {\n if (currentQueuedToast && currentQueuedToast.id === id) {\n currentQueuedToast = null;\n processQueuedToast();\n } else {\n queuedToasts = queuedToasts.filter(t => t.id !== id);\n toasts = toasts.filter(t => t.id !== id);\n }\n notifyListeners();\n },\n\n /** Close all toasts and clear the queue. */\n closeAll: (): void => {\n toasts = [];\n queuedToasts = [];\n currentQueuedToast = null;\n notifyListeners();\n },\n\n /**\n * Subscribe to toast state changes.\n * @param {(toasts: ToastInstance[]) => void} listener - Callback invoked on changes.\n * @returns {() => void} Unsubscribe function.\n */\n subscribe: (listener: (toasts: ToastInstance[]) => void): (() => void) => {\n toastListeners.add(listener);\n return () => toastListeners.delete(listener);\n },\n};\n\n// The order ToastContainer renders its stacks in: across the top of the\n// screen, then across the bottom.\nconst toastStackOrder: readonly ToastPosition[] = [\n 'top-left',\n 'top-center',\n 'top-right',\n 'bottom-left',\n 'bottom-center',\n 'bottom-right',\n];\n\n/**\n * Container component for rendering programmatic toasts.\n * Place once at your app root to enable the toast API. A toast shown with a\n * `position` appears there, and one shown without goes to the container's\n * `position`.\n *\n * @function\n * @param {{ position?: ToastPosition }} props - Container props.\n * @returns {JSX.Element | null} The rendered toast container, or null if empty.\n */\nexport const ToastContainer: React.FC<{\n /**\n * Where a toast shown without a `position` of its own appears. Default:\n * 'top-right'. When it changes, those toasts move without remounting, but\n * one shown with its own `position` equal to the old or new value\n * remounts and starts over as if it had just been shown.\n */\n position?: ToastPosition;\n}> = ({ position = 'top-right' }) => {\n // Starts from the toasts already showing instead of an empty list, then\n // follows changes.\n const toastList = useSyncExternalStore(\n toast.subscribe,\n getVisibleToasts,\n getServerToasts\n );\n\n if (typeof document === 'undefined' || toastList.length === 0) {\n return null;\n }\n\n const stacks = groupIntoPositionStacks(\n toastList,\n t => t.props.position,\n position,\n toastStackOrder\n );\n\n return createPortal(\n stacks.map(stack => (\n <div key={stack.key} className={`toast-container is-${stack.position}`}>\n {stack.items.map(t => {\n const { queue: _queue, ...toastProps } = t.props;\n return (\n <Toast\n key={t.id}\n {...toastProps}\n position={stack.position}\n onClose={() => toast.close(t.id)}\n />\n );\n })}\n </div>\n )),\n document.body\n );\n};\n\nexport default Toast;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
|
|
2
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { useState, useRef, useEffect, useLayoutEffect, useCallback } from 'react';
|
|
4
|
+
import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
|
|
5
|
+
import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* The `Tooltip` component displays helpful information when users hover over or focus on an element.
|
|
9
|
+
*
|
|
10
|
+
* @function
|
|
11
|
+
* @param {TooltipProps} props - Props for the Tooltip component.
|
|
12
|
+
* @returns {JSX.Element} The rendered tooltip wrapper.
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* // Basic tooltip
|
|
16
|
+
* <Tooltip label="This is helpful info">
|
|
17
|
+
* <button>Hover me</button>
|
|
18
|
+
* </Tooltip>
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* // Positioned tooltip with color
|
|
22
|
+
* <Tooltip label="Delete item" position="right" color="danger">
|
|
23
|
+
* <Icon icon="fas fa-trash" />
|
|
24
|
+
* </Tooltip>
|
|
25
|
+
*
|
|
26
|
+
* @example
|
|
27
|
+
* // Multiline tooltip
|
|
28
|
+
* <Tooltip label="This is a longer tooltip that wraps to multiple lines" multiline>
|
|
29
|
+
* <span>?</span>
|
|
30
|
+
* </Tooltip>
|
|
31
|
+
*/
|
|
32
|
+
const Tooltip = ({ label, content, position = 'top', color, size, active: alwaysActive, multiline = false, animated = true, square = false, dashed = false, delay = 0, closeDelay = 0, children, className, tooltipClassName, ...props }) => {
|
|
33
|
+
const { bulmaHelperClasses, rest } = useBulmaClasses(props);
|
|
34
|
+
const [isVisible, setIsVisible] = useState(false);
|
|
35
|
+
const [isHovering, setIsHovering] = useState(false);
|
|
36
|
+
const [resolvedPosition, setResolvedPosition] = useState(position === 'auto' ? 'top' : position);
|
|
37
|
+
const [contentStyle, setContentStyle] = useState({});
|
|
38
|
+
const openTimeoutRef = useRef(null);
|
|
39
|
+
const closeTimeoutRef = useRef(null);
|
|
40
|
+
const wrapperRef = useRef(null);
|
|
41
|
+
const contentRef = useRef(null);
|
|
42
|
+
// Clear timeouts on unmount
|
|
43
|
+
useEffect(() => {
|
|
44
|
+
return () => {
|
|
45
|
+
if (openTimeoutRef.current) {
|
|
46
|
+
clearTimeout(openTimeoutRef.current);
|
|
47
|
+
}
|
|
48
|
+
if (closeTimeoutRef.current) {
|
|
49
|
+
clearTimeout(closeTimeoutRef.current);
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
}, []);
|
|
53
|
+
// Handle delayed visibility
|
|
54
|
+
useEffect(() => {
|
|
55
|
+
if (isHovering) {
|
|
56
|
+
if (closeTimeoutRef.current) {
|
|
57
|
+
clearTimeout(closeTimeoutRef.current);
|
|
58
|
+
closeTimeoutRef.current = null;
|
|
59
|
+
}
|
|
60
|
+
if (delay > 0) {
|
|
61
|
+
openTimeoutRef.current = setTimeout(() => {
|
|
62
|
+
setIsVisible(true);
|
|
63
|
+
}, delay);
|
|
64
|
+
}
|
|
65
|
+
else {
|
|
66
|
+
// eslint-disable-next-line react-hooks/set-state-in-effect -- show immediately on hover when no delay
|
|
67
|
+
setIsVisible(true);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
else {
|
|
71
|
+
if (openTimeoutRef.current) {
|
|
72
|
+
clearTimeout(openTimeoutRef.current);
|
|
73
|
+
openTimeoutRef.current = null;
|
|
74
|
+
}
|
|
75
|
+
if (closeDelay > 0) {
|
|
76
|
+
closeTimeoutRef.current = setTimeout(() => {
|
|
77
|
+
setIsVisible(false);
|
|
78
|
+
}, closeDelay);
|
|
79
|
+
}
|
|
80
|
+
else {
|
|
81
|
+
setIsVisible(false);
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}, [isHovering, delay, closeDelay]);
|
|
85
|
+
// Auto-placement and overflow correction
|
|
86
|
+
useLayoutEffect(() => {
|
|
87
|
+
const isAuto = position === 'auto';
|
|
88
|
+
if (!isAuto) {
|
|
89
|
+
// eslint-disable-next-line react-hooks/set-state-in-effect -- layout measurement effect resolves placement
|
|
90
|
+
setResolvedPosition(position);
|
|
91
|
+
}
|
|
92
|
+
const showing = isVisible || alwaysActive;
|
|
93
|
+
if (!showing) {
|
|
94
|
+
setContentStyle({});
|
|
95
|
+
return;
|
|
96
|
+
}
|
|
97
|
+
const wrapper = wrapperRef.current;
|
|
98
|
+
const content = contentRef.current;
|
|
99
|
+
if (!wrapper || !content)
|
|
100
|
+
return;
|
|
101
|
+
const wrapperRect = wrapper.getBoundingClientRect();
|
|
102
|
+
const margin = 40;
|
|
103
|
+
const edgePadding = 8; // minimum distance from viewport edge
|
|
104
|
+
// Step 1: determine position (auto mode only)
|
|
105
|
+
if (isAuto) {
|
|
106
|
+
const spaceTop = wrapperRect.top;
|
|
107
|
+
const spaceBottom = window.innerHeight - wrapperRect.bottom;
|
|
108
|
+
if (spaceTop >= margin) {
|
|
109
|
+
setResolvedPosition('top');
|
|
110
|
+
}
|
|
111
|
+
else if (spaceBottom >= margin) {
|
|
112
|
+
setResolvedPosition('bottom');
|
|
113
|
+
}
|
|
114
|
+
else if (window.innerWidth - wrapperRect.right >= wrapperRect.left) {
|
|
115
|
+
setResolvedPosition('right');
|
|
116
|
+
}
|
|
117
|
+
else {
|
|
118
|
+
setResolvedPosition('left');
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
// Step 2: measure tooltip content and correct overflow.
|
|
122
|
+
// Use requestAnimationFrame so the resolved position class is applied first.
|
|
123
|
+
requestAnimationFrame(() => {
|
|
124
|
+
const contentEl = contentRef.current;
|
|
125
|
+
if (!contentEl)
|
|
126
|
+
return;
|
|
127
|
+
const contentRect = contentEl.getBoundingClientRect();
|
|
128
|
+
const style = {};
|
|
129
|
+
// For top/bottom positions, tooltip is centered horizontally via CSS
|
|
130
|
+
// (left: 50%; transform: translateX(-50%)).
|
|
131
|
+
// Check if it overflows left or right and apply a corrective shift.
|
|
132
|
+
const pos = isAuto ? undefined : position; // read from state won't be updated yet in auto
|
|
133
|
+
const effectivePos = pos || 'top'; // fallback, actual is set by state
|
|
134
|
+
const isVertical = effectivePos === 'top' ||
|
|
135
|
+
effectivePos === 'bottom' ||
|
|
136
|
+
resolvedPosition === 'top' ||
|
|
137
|
+
resolvedPosition === 'bottom';
|
|
138
|
+
if (isVertical) {
|
|
139
|
+
if (contentRect.left < edgePadding) {
|
|
140
|
+
// Overflows left — shift right
|
|
141
|
+
const shift = edgePadding - contentRect.left;
|
|
142
|
+
style.left = `calc(50% + ${shift}px)`;
|
|
143
|
+
style['--tooltip-arrow-offset'] =
|
|
144
|
+
`${-shift}px`;
|
|
145
|
+
}
|
|
146
|
+
else if (contentRect.right > window.innerWidth - edgePadding) {
|
|
147
|
+
// Overflows right — shift left
|
|
148
|
+
const shift = contentRect.right - (window.innerWidth - edgePadding);
|
|
149
|
+
style.left = `calc(50% - ${shift}px)`;
|
|
150
|
+
style['--tooltip-arrow-offset'] =
|
|
151
|
+
`${shift}px`;
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
else {
|
|
155
|
+
// For left/right positions, tooltip is centered vertically via CSS
|
|
156
|
+
// (top: 50%; transform: translateY(-50%)).
|
|
157
|
+
if (contentRect.top < edgePadding) {
|
|
158
|
+
const shift = edgePadding - contentRect.top;
|
|
159
|
+
style.top = `calc(50% + ${shift}px)`;
|
|
160
|
+
style['--tooltip-arrow-offset'] =
|
|
161
|
+
`${-shift}px`;
|
|
162
|
+
}
|
|
163
|
+
else if (contentRect.bottom > window.innerHeight - edgePadding) {
|
|
164
|
+
const shift = contentRect.bottom - (window.innerHeight - edgePadding);
|
|
165
|
+
style.top = `calc(50% - ${shift}px)`;
|
|
166
|
+
style['--tooltip-arrow-offset'] =
|
|
167
|
+
`${shift}px`;
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
setContentStyle(style);
|
|
171
|
+
});
|
|
172
|
+
}, [position, resolvedPosition, isVisible, alwaysActive, label, content]);
|
|
173
|
+
const handleMouseEnter = useCallback(() => {
|
|
174
|
+
setIsHovering(true);
|
|
175
|
+
}, []);
|
|
176
|
+
const handleMouseLeave = useCallback(() => {
|
|
177
|
+
setIsHovering(false);
|
|
178
|
+
}, []);
|
|
179
|
+
const handleFocus = useCallback(() => {
|
|
180
|
+
setIsHovering(true);
|
|
181
|
+
}, []);
|
|
182
|
+
const handleBlur = useCallback(() => {
|
|
183
|
+
setIsHovering(false);
|
|
184
|
+
}, []);
|
|
185
|
+
// Generate Bulma classes
|
|
186
|
+
const tooltipClasses = usePrefixedClassNames('tooltip', {
|
|
187
|
+
'is-active': alwaysActive || isVisible,
|
|
188
|
+
[`is-${resolvedPosition}`]: resolvedPosition,
|
|
189
|
+
[`is-${color}`]: color,
|
|
190
|
+
[`is-${size}`]: size,
|
|
191
|
+
'is-multiline': multiline,
|
|
192
|
+
'is-animated': animated,
|
|
193
|
+
'is-square': square,
|
|
194
|
+
'is-dashed': dashed,
|
|
195
|
+
});
|
|
196
|
+
const combinedClasses = classNames(tooltipClasses, bulmaHelperClasses, className);
|
|
197
|
+
const combinedTooltipClasses = usePrefixedClassNames('tooltip-content', tooltipClassName);
|
|
198
|
+
return (jsxs("span", { ref: wrapperRef, className: combinedClasses, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur, ...(label ? { 'data-tooltip': label } : {}), ...rest, children: [children, jsx("span", { ref: contentRef, className: combinedTooltipClasses, role: "tooltip", "aria-hidden": !isVisible && !alwaysActive, style: Object.keys(contentStyle).length > 0 ? contentStyle : undefined, children: content || label })] }));
|
|
199
|
+
};
|
|
200
|
+
|
|
201
|
+
export { Tooltip };
|
|
202
|
+
//# sourceMappingURL=Tooltip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip.tsx"],"sourcesContent":["import React, {\n useState,\n useRef,\n useEffect,\n useLayoutEffect,\n useCallback,\n} from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\n\n/** Screen positions for the tooltip. */\nexport type TooltipPosition = 'top' | 'bottom' | 'left' | 'right' | 'auto';\n/** Color variants for the tooltip. */\nexport type TooltipColor =\n | 'primary'\n | 'link'\n | 'info'\n | 'success'\n | 'warning'\n | 'danger'\n | 'dark'\n | 'light';\n/** Size variants for the tooltip. */\nexport type TooltipSize = 'small' | 'medium' | 'large';\n\n/**\n * Props for the Tooltip component.\n * @extraProp {React.ReactNode} [children] - The element that triggers the tooltip.\n * @extraProp {string} [className] - Additional CSS classes.\n */\nexport interface TooltipProps\n extends\n Omit<React.HTMLAttributes<HTMLSpanElement>, 'color' | 'content'>,\n Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n /** The tooltip text content. */\n label?: string;\n /** Rich tooltip content (alternative to `label`). */\n content?: React.ReactNode;\n /** Position of the tooltip. Default: 'top'. */\n position?: TooltipPosition;\n /** Color variant for the tooltip. */\n color?: TooltipColor;\n /** Size of the tooltip. */\n size?: TooltipSize;\n /** Force tooltip to be always visible. */\n active?: boolean;\n /** Allow tooltip to wrap to multiple lines. */\n multiline?: boolean;\n /** Enable fade animation. Default: true. */\n animated?: boolean;\n /** Use square corners instead of rounded. */\n square?: boolean;\n /** Show dashed underline on trigger. */\n dashed?: boolean;\n /** Delay before showing tooltip (ms). */\n delay?: number;\n /** Delay in ms before hiding the tooltip. */\n closeDelay?: number;\n /** Additional classes for the tooltip element. */\n tooltipClassName?: string;\n}\n\n/**\n * The `Tooltip` component displays helpful information when users hover over or focus on an element.\n *\n * @function\n * @param {TooltipProps} props - Props for the Tooltip component.\n * @returns {JSX.Element} The rendered tooltip wrapper.\n *\n * @example\n * // Basic tooltip\n * <Tooltip label=\"This is helpful info\">\n * <button>Hover me</button>\n * </Tooltip>\n *\n * @example\n * // Positioned tooltip with color\n * <Tooltip label=\"Delete item\" position=\"right\" color=\"danger\">\n * <Icon icon=\"fas fa-trash\" />\n * </Tooltip>\n *\n * @example\n * // Multiline tooltip\n * <Tooltip label=\"This is a longer tooltip that wraps to multiple lines\" multiline>\n * <span>?</span>\n * </Tooltip>\n */\nexport const Tooltip: React.FC<TooltipProps> = ({\n label,\n content,\n position = 'top',\n color,\n size,\n active: alwaysActive,\n multiline = false,\n animated = true,\n square = false,\n dashed = false,\n delay = 0,\n closeDelay = 0,\n children,\n className,\n tooltipClassName,\n ...props\n}) => {\n const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n const [isVisible, setIsVisible] = useState(false);\n const [isHovering, setIsHovering] = useState(false);\n const [resolvedPosition, setResolvedPosition] = useState<\n Exclude<TooltipPosition, 'auto'>\n >(position === 'auto' ? 'top' : position);\n const [contentStyle, setContentStyle] = useState<React.CSSProperties>({});\n const openTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const wrapperRef = useRef<HTMLSpanElement | null>(null);\n const contentRef = useRef<HTMLSpanElement | null>(null);\n\n // Clear timeouts on unmount\n useEffect(() => {\n return () => {\n if (openTimeoutRef.current) {\n clearTimeout(openTimeoutRef.current);\n }\n if (closeTimeoutRef.current) {\n clearTimeout(closeTimeoutRef.current);\n }\n };\n }, []);\n\n // Handle delayed visibility\n useEffect(() => {\n if (isHovering) {\n if (closeTimeoutRef.current) {\n clearTimeout(closeTimeoutRef.current);\n closeTimeoutRef.current = null;\n }\n if (delay > 0) {\n openTimeoutRef.current = setTimeout(() => {\n setIsVisible(true);\n }, delay);\n } else {\n // eslint-disable-next-line react-hooks/set-state-in-effect -- show immediately on hover when no delay\n setIsVisible(true);\n }\n } else {\n if (openTimeoutRef.current) {\n clearTimeout(openTimeoutRef.current);\n openTimeoutRef.current = null;\n }\n if (closeDelay > 0) {\n closeTimeoutRef.current = setTimeout(() => {\n setIsVisible(false);\n }, closeDelay);\n } else {\n setIsVisible(false);\n }\n }\n }, [isHovering, delay, closeDelay]);\n\n // Auto-placement and overflow correction\n useLayoutEffect(() => {\n const isAuto = position === 'auto';\n\n if (!isAuto) {\n // eslint-disable-next-line react-hooks/set-state-in-effect -- layout measurement effect resolves placement\n setResolvedPosition(position);\n }\n\n const showing = isVisible || alwaysActive;\n if (!showing) {\n setContentStyle({});\n return;\n }\n\n const wrapper = wrapperRef.current;\n const content = contentRef.current;\n if (!wrapper || !content) return;\n\n const wrapperRect = wrapper.getBoundingClientRect();\n const margin = 40;\n const edgePadding = 8; // minimum distance from viewport edge\n\n // Step 1: determine position (auto mode only)\n if (isAuto) {\n const spaceTop = wrapperRect.top;\n const spaceBottom = window.innerHeight - wrapperRect.bottom;\n\n if (spaceTop >= margin) {\n setResolvedPosition('top');\n } else if (spaceBottom >= margin) {\n setResolvedPosition('bottom');\n } else if (window.innerWidth - wrapperRect.right >= wrapperRect.left) {\n setResolvedPosition('right');\n } else {\n setResolvedPosition('left');\n }\n }\n\n // Step 2: measure tooltip content and correct overflow.\n // Use requestAnimationFrame so the resolved position class is applied first.\n requestAnimationFrame(() => {\n const contentEl = contentRef.current;\n if (!contentEl) return;\n\n const contentRect = contentEl.getBoundingClientRect();\n const style: React.CSSProperties = {};\n\n // For top/bottom positions, tooltip is centered horizontally via CSS\n // (left: 50%; transform: translateX(-50%)).\n // Check if it overflows left or right and apply a corrective shift.\n const pos = isAuto ? undefined : position; // read from state won't be updated yet in auto\n const effectivePos = pos || 'top'; // fallback, actual is set by state\n const isVertical =\n effectivePos === 'top' ||\n effectivePos === 'bottom' ||\n resolvedPosition === 'top' ||\n resolvedPosition === 'bottom';\n\n if (isVertical) {\n if (contentRect.left < edgePadding) {\n // Overflows left — shift right\n const shift = edgePadding - contentRect.left;\n style.left = `calc(50% + ${shift}px)`;\n (style as Record<string, string>)['--tooltip-arrow-offset'] =\n `${-shift}px`;\n } else if (contentRect.right > window.innerWidth - edgePadding) {\n // Overflows right — shift left\n const shift = contentRect.right - (window.innerWidth - edgePadding);\n style.left = `calc(50% - ${shift}px)`;\n (style as Record<string, string>)['--tooltip-arrow-offset'] =\n `${shift}px`;\n }\n } else {\n // For left/right positions, tooltip is centered vertically via CSS\n // (top: 50%; transform: translateY(-50%)).\n if (contentRect.top < edgePadding) {\n const shift = edgePadding - contentRect.top;\n style.top = `calc(50% + ${shift}px)`;\n (style as Record<string, string>)['--tooltip-arrow-offset'] =\n `${-shift}px`;\n } else if (contentRect.bottom > window.innerHeight - edgePadding) {\n const shift = contentRect.bottom - (window.innerHeight - edgePadding);\n style.top = `calc(50% - ${shift}px)`;\n (style as Record<string, string>)['--tooltip-arrow-offset'] =\n `${shift}px`;\n }\n }\n\n setContentStyle(style);\n });\n }, [position, resolvedPosition, isVisible, alwaysActive, label, content]);\n\n const handleMouseEnter = useCallback(() => {\n setIsHovering(true);\n }, []);\n\n const handleMouseLeave = useCallback(() => {\n setIsHovering(false);\n }, []);\n\n const handleFocus = useCallback(() => {\n setIsHovering(true);\n }, []);\n\n const handleBlur = useCallback(() => {\n setIsHovering(false);\n }, []);\n\n // Generate Bulma classes\n const tooltipClasses = usePrefixedClassNames('tooltip', {\n 'is-active': alwaysActive || isVisible,\n [`is-${resolvedPosition}`]: resolvedPosition,\n [`is-${color}`]: color,\n [`is-${size}`]: size,\n 'is-multiline': multiline,\n 'is-animated': animated,\n 'is-square': square,\n 'is-dashed': dashed,\n });\n\n const combinedClasses = classNames(\n tooltipClasses,\n bulmaHelperClasses,\n className\n );\n const combinedTooltipClasses = usePrefixedClassNames(\n 'tooltip-content',\n tooltipClassName\n );\n\n return (\n <span\n ref={wrapperRef}\n className={combinedClasses}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onFocus={handleFocus}\n onBlur={handleBlur}\n {...(label ? { 'data-tooltip': label } : {})}\n {...rest}\n >\n {children}\n <span\n ref={contentRef}\n className={combinedTooltipClasses}\n role=\"tooltip\"\n aria-hidden={!isVisible && !alwaysActive}\n style={Object.keys(contentStyle).length > 0 ? contentStyle : undefined}\n >\n {content || label}\n </span>\n </span>\n );\n};\n\nexport default Tooltip;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
|
|
2
|
+
import { createContext } from 'react';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* `null` outside a group. A `Collapse` also resets it to `null` for its own
|
|
6
|
+
* subtree, so a Collapse nested in an item's content keeps its own state
|
|
7
|
+
* instead of answering to its ancestor's slot in the group.
|
|
8
|
+
*/
|
|
9
|
+
const CollapsesItemContext = createContext(null);
|
|
10
|
+
|
|
11
|
+
export { CollapsesItemContext };
|
|
12
|
+
//# sourceMappingURL=collapsesContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"collapsesContext.js","sources":["../../../src/components/collapsesContext.ts"],"sourcesContent":["import { createContext } from 'react';\n\n/**\n * What a `Collapses` group hands the item it wraps: whether that item is open,\n * and how to ask the group for a change.\n *\n * This module is internal. `index.ts` re-exports `Collapse` and `Collapses`\n * whole, so the context lives here, where neither re-export reaches it.\n */\nexport interface CollapsesItemContextValue {\n /** Whether the group has this item open. */\n open: boolean;\n /** Asks the group to open (`true`) or close (`false`) this item. */\n setOpen: (open: boolean) => void;\n}\n\n/**\n * `null` outside a group. A `Collapse` also resets it to `null` for its own\n * subtree, so a Collapse nested in an item's content keeps its own state\n * instead of answering to its ancestor's slot in the group.\n */\nexport const CollapsesItemContext =\n createContext<CollapsesItemContextValue | null>(null);\n"],"names":[],"mappings":";;;AAgBA;;;;AAIG;MACU,oBAAoB,GAC/B,aAAa,CAAmC,IAAI;;"}
|