@allxsmith/bestax-bulma 5.55.0 → 5.57.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bestax.css +1 -1
- package/dist/bestax.css.map +1 -1
- package/dist/esm/columns/Column.js +1 -0
- package/dist/esm/columns/Column.js.map +1 -1
- package/dist/esm/columns/Columns.js +1 -0
- package/dist/esm/columns/Columns.js.map +1 -1
- package/dist/esm/components/Avatar.js +1 -0
- package/dist/esm/components/Avatar.js.map +1 -1
- package/dist/esm/components/Avatars.js +1 -0
- package/dist/esm/components/Avatars.js.map +1 -1
- package/dist/esm/components/Badge.js +1 -0
- package/dist/esm/components/Badge.js.map +1 -1
- package/dist/esm/components/Breadcrumb.js +1 -0
- package/dist/esm/components/Breadcrumb.js.map +1 -1
- package/dist/esm/components/Card.js +1 -0
- package/dist/esm/components/Card.js.map +1 -1
- package/dist/esm/components/Carousel.js +1 -0
- package/dist/esm/components/Carousel.js.map +1 -1
- package/dist/esm/components/Collapse.js +1 -0
- package/dist/esm/components/Collapse.js.map +1 -1
- package/dist/esm/components/Collapses.js +1 -0
- package/dist/esm/components/Collapses.js.map +1 -1
- package/dist/esm/components/Command.js +1 -0
- package/dist/esm/components/Command.js.map +1 -1
- package/dist/esm/components/ContextMenu.js +1 -0
- package/dist/esm/components/ContextMenu.js.map +1 -1
- package/dist/esm/components/DataTable.js +1 -0
- package/dist/esm/components/DataTable.js.map +1 -1
- package/dist/esm/components/Dialog.js +1 -0
- package/dist/esm/components/Dialog.js.map +1 -1
- package/dist/esm/components/Dropdown.js +1 -0
- package/dist/esm/components/Dropdown.js.map +1 -1
- package/dist/esm/components/EmptyState.js +1 -0
- package/dist/esm/components/EmptyState.js.map +1 -1
- package/dist/esm/components/HoverCard.js +1 -0
- package/dist/esm/components/HoverCard.js.map +1 -1
- package/dist/esm/components/Loading.js +1 -0
- package/dist/esm/components/Loading.js.map +1 -1
- package/dist/esm/components/Menu.js +1 -0
- package/dist/esm/components/Menu.js.map +1 -1
- package/dist/esm/components/Message.js +1 -0
- package/dist/esm/components/Message.js.map +1 -1
- package/dist/esm/components/Modal.js +1 -0
- package/dist/esm/components/Modal.js.map +1 -1
- package/dist/esm/components/Navbar.js +1 -0
- package/dist/esm/components/Navbar.js.map +1 -1
- package/dist/esm/components/Pagination.js +1 -0
- package/dist/esm/components/Pagination.js.map +1 -1
- package/dist/esm/components/Panel.js +1 -0
- package/dist/esm/components/Panel.js.map +1 -1
- package/dist/esm/components/Popover.js +1 -0
- package/dist/esm/components/Popover.js.map +1 -1
- package/dist/esm/components/Reveal.js +1 -0
- package/dist/esm/components/Reveal.js.map +1 -1
- package/dist/esm/components/ScrollArea.js +1 -0
- package/dist/esm/components/ScrollArea.js.map +1 -1
- package/dist/esm/components/SegmentedControl.js +1 -0
- package/dist/esm/components/SegmentedControl.js.map +1 -1
- package/dist/esm/components/Sidebar.js +1 -0
- package/dist/esm/components/Sidebar.js.map +1 -1
- package/dist/esm/components/Steps.js +1 -0
- package/dist/esm/components/Steps.js.map +1 -1
- package/dist/esm/components/Tabs.js +1 -0
- package/dist/esm/components/Tabs.js.map +1 -1
- package/dist/esm/components/Timeline.js +1 -0
- package/dist/esm/components/Timeline.js.map +1 -1
- package/dist/esm/components/Toast.js +1 -0
- package/dist/esm/components/Toast.js.map +1 -1
- package/dist/esm/components/Tooltip.js +1 -0
- package/dist/esm/components/Tooltip.js.map +1 -1
- package/dist/esm/components/TreeView.js +1 -0
- package/dist/esm/components/TreeView.js.map +1 -1
- package/dist/esm/components/collapsesContext.js +1 -0
- package/dist/esm/components/collapsesContext.js.map +1 -1
- package/dist/esm/components/useDataTable.js +28 -0
- package/dist/esm/components/useDataTable.js.map +1 -1
- package/dist/esm/elements/Block.js +1 -0
- package/dist/esm/elements/Block.js.map +1 -1
- package/dist/esm/elements/Box.js +1 -0
- package/dist/esm/elements/Box.js.map +1 -1
- package/dist/esm/elements/Button.js +1 -0
- package/dist/esm/elements/Button.js.map +1 -1
- package/dist/esm/elements/Buttons.js +1 -0
- package/dist/esm/elements/Buttons.js.map +1 -1
- package/dist/esm/elements/Code.js +1 -0
- package/dist/esm/elements/Code.js.map +1 -1
- package/dist/esm/elements/ColorSwatch.js +1 -0
- package/dist/esm/elements/ColorSwatch.js.map +1 -1
- package/dist/esm/elements/Content.js +1 -0
- package/dist/esm/elements/Content.js.map +1 -1
- package/dist/esm/elements/Delete.js +1 -0
- package/dist/esm/elements/Delete.js.map +1 -1
- package/dist/esm/elements/DescriptionList.js +1 -0
- package/dist/esm/elements/DescriptionList.js.map +1 -1
- package/dist/esm/elements/Divider.js +1 -0
- package/dist/esm/elements/Divider.js.map +1 -1
- package/dist/esm/elements/Emphasis.js +1 -0
- package/dist/esm/elements/Emphasis.js.map +1 -1
- package/dist/esm/elements/Figure.js +1 -0
- package/dist/esm/elements/Figure.js.map +1 -1
- package/dist/esm/elements/Icon.js +1 -0
- package/dist/esm/elements/Icon.js.map +1 -1
- package/dist/esm/elements/IconText.js +1 -0
- package/dist/esm/elements/IconText.js.map +1 -1
- package/dist/esm/elements/Image.js +1 -0
- package/dist/esm/elements/Image.js.map +1 -1
- package/dist/esm/elements/Kbd.js +1 -0
- package/dist/esm/elements/Kbd.js.map +1 -1
- package/dist/esm/elements/Link.js +1 -0
- package/dist/esm/elements/Link.js.map +1 -1
- package/dist/esm/elements/LinkButton.js +1 -0
- package/dist/esm/elements/LinkButton.js.map +1 -1
- package/dist/esm/elements/ListItem.js +1 -0
- package/dist/esm/elements/ListItem.js.map +1 -1
- package/dist/esm/elements/Loader.js +1 -0
- package/dist/esm/elements/Loader.js.map +1 -1
- package/dist/esm/elements/Notification.js +1 -0
- package/dist/esm/elements/Notification.js.map +1 -1
- package/dist/esm/elements/OrderedList.js +1 -0
- package/dist/esm/elements/OrderedList.js.map +1 -1
- package/dist/esm/elements/Paragraph.js +1 -0
- package/dist/esm/elements/Paragraph.js.map +1 -1
- package/dist/esm/elements/Pre.js +1 -0
- package/dist/esm/elements/Pre.js.map +1 -1
- package/dist/esm/elements/Progress.js +1 -0
- package/dist/esm/elements/Progress.js.map +1 -1
- package/dist/esm/elements/RingProgress.js +1 -0
- package/dist/esm/elements/RingProgress.js.map +1 -1
- package/dist/esm/elements/Skeleton.js +1 -0
- package/dist/esm/elements/Skeleton.js.map +1 -1
- package/dist/esm/elements/Span.js +1 -0
- package/dist/esm/elements/Span.js.map +1 -1
- package/dist/esm/elements/Strong.js +1 -0
- package/dist/esm/elements/Strong.js.map +1 -1
- package/dist/esm/elements/SubTitle.js +1 -0
- package/dist/esm/elements/SubTitle.js.map +1 -1
- package/dist/esm/elements/Table.js +1 -0
- package/dist/esm/elements/Table.js.map +1 -1
- package/dist/esm/elements/Tag.js +1 -0
- package/dist/esm/elements/Tag.js.map +1 -1
- package/dist/esm/elements/Tags.js +1 -0
- package/dist/esm/elements/Tags.js.map +1 -1
- package/dist/esm/elements/Tbody.js +1 -0
- package/dist/esm/elements/Tbody.js.map +1 -1
- package/dist/esm/elements/Td.js +1 -0
- package/dist/esm/elements/Td.js.map +1 -1
- package/dist/esm/elements/Tfoot.js +1 -0
- package/dist/esm/elements/Tfoot.js.map +1 -1
- package/dist/esm/elements/Th.js +1 -0
- package/dist/esm/elements/Th.js.map +1 -1
- package/dist/esm/elements/Thead.js +1 -0
- package/dist/esm/elements/Thead.js.map +1 -1
- package/dist/esm/elements/Title.js +1 -0
- package/dist/esm/elements/Title.js.map +1 -1
- package/dist/esm/elements/ToggleButton.js +1 -0
- package/dist/esm/elements/ToggleButton.js.map +1 -1
- package/dist/esm/elements/Tr.js +1 -0
- package/dist/esm/elements/Tr.js.map +1 -1
- package/dist/esm/elements/UnorderedList.js +1 -0
- package/dist/esm/elements/UnorderedList.js.map +1 -1
- package/dist/esm/elements/iconProps.js +1 -0
- package/dist/esm/elements/iconProps.js.map +1 -1
- package/dist/esm/form/Autocomplete.js +1 -0
- package/dist/esm/form/Autocomplete.js.map +1 -1
- package/dist/esm/form/Checkbox.js +1 -0
- package/dist/esm/form/Checkbox.js.map +1 -1
- package/dist/esm/form/CheckboxCard.js +1 -0
- package/dist/esm/form/CheckboxCard.js.map +1 -1
- package/dist/esm/form/Checkboxes.js +1 -0
- package/dist/esm/form/Checkboxes.js.map +1 -1
- package/dist/esm/form/ColorInput.js +69 -0
- package/dist/esm/form/ColorInput.js.map +1 -0
- package/dist/esm/form/ColorInputBase.js +199 -0
- package/dist/esm/form/ColorInputBase.js.map +1 -0
- package/dist/esm/form/ColorPicker.js +5 -20
- package/dist/esm/form/ColorPicker.js.map +1 -1
- package/dist/esm/form/Combobox.js +1 -0
- package/dist/esm/form/Combobox.js.map +1 -1
- package/dist/esm/form/Control.js +1 -0
- package/dist/esm/form/Control.js.map +1 -1
- package/dist/esm/form/DateInput.js +1 -0
- package/dist/esm/form/DateInput.js.map +1 -1
- package/dist/esm/form/DateInputBase.js +1 -0
- package/dist/esm/form/DateInputBase.js.map +1 -1
- package/dist/esm/form/DateRangeInput.js +1 -0
- package/dist/esm/form/DateRangeInput.js.map +1 -1
- package/dist/esm/form/DateRangeInputBase.js +1 -0
- package/dist/esm/form/DateRangeInputBase.js.map +1 -1
- package/dist/esm/form/DateTimeInput.js +1 -0
- package/dist/esm/form/DateTimeInput.js.map +1 -1
- package/dist/esm/form/DateTimeInputBase.js +1 -0
- package/dist/esm/form/DateTimeInputBase.js.map +1 -1
- package/dist/esm/form/Dropzone.js +1 -0
- package/dist/esm/form/Dropzone.js.map +1 -1
- package/dist/esm/form/Field.js +1 -0
- package/dist/esm/form/Field.js.map +1 -1
- package/dist/esm/form/Fieldset.js +1 -0
- package/dist/esm/form/Fieldset.js.map +1 -1
- package/dist/esm/form/File.js +1 -0
- package/dist/esm/form/File.js.map +1 -1
- package/dist/esm/form/FormContext.js +1 -0
- package/dist/esm/form/FormContext.js.map +1 -1
- package/dist/esm/form/Input.js +1 -0
- package/dist/esm/form/Input.js.map +1 -1
- package/dist/esm/form/InputBase.js +1 -0
- package/dist/esm/form/InputBase.js.map +1 -1
- package/dist/esm/form/Numberinput.js +1 -0
- package/dist/esm/form/Numberinput.js.map +1 -1
- package/dist/esm/form/PinInput.js +1 -0
- package/dist/esm/form/PinInput.js.map +1 -1
- package/dist/esm/form/Radio.js +1 -0
- package/dist/esm/form/Radio.js.map +1 -1
- package/dist/esm/form/RadioCard.js +1 -0
- package/dist/esm/form/RadioCard.js.map +1 -1
- package/dist/esm/form/Radios.js +1 -0
- package/dist/esm/form/Radios.js.map +1 -1
- package/dist/esm/form/Rate.js +1 -0
- package/dist/esm/form/Rate.js.map +1 -1
- package/dist/esm/form/Select.js +1 -0
- package/dist/esm/form/Select.js.map +1 -1
- package/dist/esm/form/SelectBase.js +1 -0
- package/dist/esm/form/SelectBase.js.map +1 -1
- package/dist/esm/form/Slider.js +1 -0
- package/dist/esm/form/Slider.js.map +1 -1
- package/dist/esm/form/Switch.js +1 -0
- package/dist/esm/form/Switch.js.map +1 -1
- package/dist/esm/form/Taginput.js +1 -0
- package/dist/esm/form/Taginput.js.map +1 -1
- package/dist/esm/form/TextArea.js +1 -0
- package/dist/esm/form/TextArea.js.map +1 -1
- package/dist/esm/form/TextAreaBase.js +1 -0
- package/dist/esm/form/TextAreaBase.js.map +1 -1
- package/dist/esm/form/TimeInput.js +1 -0
- package/dist/esm/form/TimeInput.js.map +1 -1
- package/dist/esm/form/TimeInputBase.js +1 -0
- package/dist/esm/form/TimeInputBase.js.map +1 -1
- package/dist/esm/form/_colorInternals/EyeDropperButton.js +41 -0
- package/dist/esm/form/_colorInternals/EyeDropperButton.js.map +1 -0
- package/dist/esm/form/_colorInternals/pickerState.js +5 -4
- package/dist/esm/form/_colorInternals/pickerState.js.map +1 -1
- package/dist/esm/form/_pickerInternals/Calendar.js +1 -0
- package/dist/esm/form/_pickerInternals/Calendar.js.map +1 -1
- package/dist/esm/form/_pickerInternals/PickerPopover.js +1 -0
- package/dist/esm/form/_pickerInternals/PickerPopover.js.map +1 -1
- package/dist/esm/form/_pickerInternals/TimeWheels.js +1 -0
- package/dist/esm/form/_pickerInternals/TimeWheels.js.map +1 -1
- package/dist/esm/form/_pickerInternals/useLocaleDefaults.js +1 -0
- package/dist/esm/form/_pickerInternals/useLocaleDefaults.js.map +1 -1
- package/dist/esm/form/_pickerInternals/useNativeMobilePicker.js +1 -0
- package/dist/esm/form/_pickerInternals/useNativeMobilePicker.js.map +1 -1
- package/dist/esm/form/_pickerInternals/useSegmentedEntry.js +1 -0
- package/dist/esm/form/_pickerInternals/useSegmentedEntry.js.map +1 -1
- package/dist/esm/form/controlLoading.js +1 -0
- package/dist/esm/form/controlLoading.js.map +1 -1
- package/dist/esm/form/groupFieldset.js +1 -0
- package/dist/esm/form/groupFieldset.js.map +1 -1
- package/dist/esm/form/useAutoLabelId.js +1 -0
- package/dist/esm/form/useAutoLabelId.js.map +1 -1
- package/dist/esm/grid/Cell.js +1 -0
- package/dist/esm/grid/Cell.js.map +1 -1
- package/dist/esm/grid/Grid.js +1 -0
- package/dist/esm/grid/Grid.js.map +1 -1
- package/dist/esm/helpers/ClientOnly.js +1 -0
- package/dist/esm/helpers/ClientOnly.js.map +1 -1
- package/dist/esm/helpers/Config.js +1 -0
- package/dist/esm/helpers/Config.js.map +1 -1
- package/dist/esm/helpers/LocaleProvider.js +1 -0
- package/dist/esm/helpers/LocaleProvider.js.map +1 -1
- package/dist/esm/helpers/Theme.js +1 -0
- package/dist/esm/helpers/Theme.js.map +1 -1
- package/dist/esm/helpers/flattenChildren.js +1 -0
- package/dist/esm/helpers/flattenChildren.js.map +1 -1
- package/dist/esm/helpers/inertProps.js +1 -0
- package/dist/esm/helpers/inertProps.js.map +1 -1
- package/dist/esm/helpers/localeFormat.js +1 -0
- package/dist/esm/helpers/localeFormat.js.map +1 -1
- package/dist/esm/helpers/overlayStack.js +1 -0
- package/dist/esm/helpers/overlayStack.js.map +1 -1
- package/dist/esm/helpers/portal.js +1 -0
- package/dist/esm/helpers/portal.js.map +1 -1
- package/dist/esm/helpers/scrollLock.js +1 -0
- package/dist/esm/helpers/scrollLock.js.map +1 -1
- package/dist/esm/helpers/statusRegion.js +1 -0
- package/dist/esm/helpers/statusRegion.js.map +1 -1
- package/dist/esm/helpers/typeahead.js +1 -0
- package/dist/esm/helpers/typeahead.js.map +1 -1
- package/dist/esm/helpers/useAnchoredPosition.js +1 -0
- package/dist/esm/helpers/useAnchoredPosition.js.map +1 -1
- package/dist/esm/helpers/useBulmaClasses.js +1 -0
- package/dist/esm/helpers/useBulmaClasses.js.map +1 -1
- package/dist/esm/helpers/useClientLayoutEffect.js +1 -0
- package/dist/esm/helpers/useClientLayoutEffect.js.map +1 -1
- package/dist/esm/helpers/useColorClasses.js +1 -0
- package/dist/esm/helpers/useColorClasses.js.map +1 -1
- package/dist/esm/helpers/useComboboxEngine.js +1 -0
- package/dist/esm/helpers/useComboboxEngine.js.map +1 -1
- package/dist/esm/helpers/useContextMenuTrigger.js +1 -0
- package/dist/esm/helpers/useContextMenuTrigger.js.map +1 -1
- package/dist/esm/helpers/useFlexboxClasses.js +1 -0
- package/dist/esm/helpers/useFlexboxClasses.js.map +1 -1
- package/dist/esm/helpers/useFocusTrap.js +1 -0
- package/dist/esm/helpers/useFocusTrap.js.map +1 -1
- package/dist/esm/helpers/useHoverOpen.js +1 -0
- package/dist/esm/helpers/useHoverOpen.js.map +1 -1
- package/dist/esm/helpers/useInertSiblings.js +1 -0
- package/dist/esm/helpers/useInertSiblings.js.map +1 -1
- package/dist/esm/helpers/useIsHydrated.js +1 -0
- package/dist/esm/helpers/useIsHydrated.js.map +1 -1
- package/dist/esm/helpers/useLatestRef.js +1 -0
- package/dist/esm/helpers/useLatestRef.js.map +1 -1
- package/dist/esm/helpers/useMenuKeys.js +1 -0
- package/dist/esm/helpers/useMenuKeys.js.map +1 -1
- package/dist/esm/helpers/useOtherClasses.js +1 -0
- package/dist/esm/helpers/useOtherClasses.js.map +1 -1
- package/dist/esm/helpers/useSpacingClasses.js +1 -0
- package/dist/esm/helpers/useSpacingClasses.js.map +1 -1
- package/dist/esm/helpers/useTreeView.js +1 -0
- package/dist/esm/helpers/useTreeView.js.map +1 -1
- package/dist/esm/helpers/useTypographyClasses.js +1 -0
- package/dist/esm/helpers/useTypographyClasses.js.map +1 -1
- package/dist/esm/helpers/useVisibilityClasses.js +1 -0
- package/dist/esm/helpers/useVisibilityClasses.js.map +1 -1
- package/dist/esm/layout/Container.js +1 -0
- package/dist/esm/layout/Container.js.map +1 -1
- package/dist/esm/layout/Footer.js +1 -0
- package/dist/esm/layout/Footer.js.map +1 -1
- package/dist/esm/layout/Hero.js +1 -0
- package/dist/esm/layout/Hero.js.map +1 -1
- package/dist/esm/layout/Level.js +1 -0
- package/dist/esm/layout/Level.js.map +1 -1
- package/dist/esm/layout/Media.js +1 -0
- package/dist/esm/layout/Media.js.map +1 -1
- package/dist/esm/layout/Section.js +1 -0
- package/dist/esm/layout/Section.js.map +1 -1
- package/dist/esm/layout/Splitter.js +1 -0
- 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 +300 -22
- package/dist/index.cjs.map +1 -1
- package/dist/index.esm.js +2 -0
- package/dist/index.esm.js.map +1 -1
- package/dist/types/components/DataTable.d.ts +1 -1
- package/dist/types/components/useDataTable.d.ts +36 -0
- package/dist/types/form/ColorInput.d.ts +76 -0
- package/dist/types/form/ColorInputBase.d.ts +108 -0
- package/dist/types/form/ColorPicker.d.ts +5 -0
- package/dist/types/form/_colorInternals/EyeDropperButton.d.ts +8 -0
- package/dist/types/form/_colorInternals/pickerState.d.ts +7 -1
- package/dist/types/index.d.ts +4 -0
- package/dist/types-cjs/components/DataTable.d.ts +1 -1
- package/dist/types-cjs/components/useDataTable.d.ts +36 -0
- package/dist/types-cjs/form/ColorInput.d.ts +76 -0
- package/dist/types-cjs/form/ColorInputBase.d.ts +108 -0
- package/dist/types-cjs/form/ColorPicker.d.ts +5 -0
- package/dist/types-cjs/form/_colorInternals/EyeDropperButton.d.ts +8 -0
- package/dist/types-cjs/form/_colorInternals/pickerState.d.ts +7 -1
- package/dist/types-cjs/index.d.ts +4 -0
- package/dist/versions/bestax-no-dark-mode.css +1 -1
- package/dist/versions/bestax-no-dark-mode.css.map +1 -1
- package/dist/versions/bestax-no-helpers-prefixed.css +1 -1
- package/dist/versions/bestax-no-helpers-prefixed.css.map +1 -1
- package/dist/versions/bestax-no-helpers.css +1 -1
- package/dist/versions/bestax-no-helpers.css.map +1 -1
- package/dist/versions/bestax-prefixed.css +1 -1
- package/dist/versions/bestax-prefixed.css.map +1 -1
- package/package.json +2 -1
- package/src/scss/form/_colorinput.scss +109 -0
- package/src/scss/form/_index.scss +1 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.js","sources":["../../../src/components/Carousel.tsx"],"sourcesContent":["import React, {\n forwardRef,\n useState,\n useRef,\n useEffect,\n useCallback,\n Children,\n isValidElement,\n cloneElement,\n} from 'react';\nimport {\n classNames,\n prefixedClassNames,\n usePrefixedClassNames,\n} from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { useClassPrefix } from '../helpers/Config';\nimport { getActiveElementInTree } from '../helpers/shadowDom';\nimport { useLatestRef } from '../helpers/useLatestRef';\nimport { useClientLayoutEffect } from '../helpers/useClientLayoutEffect';\nimport { inertProps } from '../helpers/inertProps';\nimport { Icon } from '../elements/Icon';\nimport { Button } from '../elements/Button';\n\n/**\n * Props for the CarouselItem component.\n */\nexport interface CarouselItemProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * Whether this item is in view. `Carousel` sets it on every item in view,\n * so with several in view several are active.\n */\n active?: boolean;\n /**\n * The slide's content. An image in it is held to the slide's width at its\n * own height, unless something sizes the image itself: a ratio `Image`\n * fills its frame, and an `Avatar`'s photo its circle, as they do outside a\n * carousel.\n */\n children?: React.ReactNode;\n}\n\n/**\n * Individual carousel item/slide.\n *\n * @function\n * @param {CarouselItemProps} props - Props for the CarouselItem component.\n * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the carousel item element.\n * @returns {JSX.Element} The rendered carousel item.\n */\nexport const CarouselItem = forwardRef<HTMLDivElement, CarouselItemProps>(\n ({ active, className, children, ...props }, ref) => {\n const itemClasses = classNames(\n usePrefixedClassNames('carousel-item', { 'is-active': active }),\n className\n );\n\n return (\n <div ref={ref} className={itemClasses} {...props}>\n {children}\n </div>\n );\n }\n);\n\nCarouselItem.displayName = 'CarouselItem';\n\ntype IconLibrary = 'fa' | 'mdi' | 'ion' | 'material-icons' | 'material-symbols';\n\n/**\n * Default SVG icon for the previous arrow button.\n *\n * @function\n * @returns {JSX.Element} The rendered SVG chevron-left icon.\n */\nconst DefaultPrevIcon = () => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n >\n <polyline points=\"15 18 9 12 15 6\" />\n </svg>\n);\n\n/**\n * Default SVG icon for the next arrow button.\n *\n * @function\n * @returns {JSX.Element} The rendered SVG chevron-right icon.\n */\nconst DefaultNextIcon = () => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n >\n <polyline points=\"9 18 15 12 9 6\" />\n </svg>\n);\n\n/**\n * The media queries Bulma's `fullhd`, `widescreen`, `desktop` and `tablet`\n * mixins open with, widest first, at Bulma's default breakpoints. The\n * stylesheet picks the count in view with those mixins; these tell the\n * script which count that is. Narrower than the last one is `mobile`.\n */\nconst VIEWPORT_QUERIES = [\n 'screen and (min-width: 1408px)',\n 'screen and (min-width: 1216px)',\n 'screen and (min-width: 1024px)',\n 'screen and (min-width: 769px), print',\n];\n\n/** `useBulmaViewport`'s answer below the tablet breakpoint. */\nconst MOBILE = VIEWPORT_QUERIES.length;\n\n/**\n * The `--bulma-carousel-items-to-show*` variable each count prop writes, in\n * the order the component lists them: the viewports as above, mobile, and\n * last `itemsToShow` itself.\n */\nconst COUNT_SUFFIXES = [\n '-fullhd',\n '-widescreen',\n '-desktop',\n '-tablet',\n '-mobile',\n '',\n];\n\n/**\n * Which of Bulma's viewports the window is in: the index of the widest\n * `VIEWPORT_QUERIES` entry that matches, `MOBILE` below them all, or `-1`\n * when that isn't known (on the server, before the first layout effect, and\n * whenever `enabled` is off, so a carousel with one count everywhere\n * subscribes to nothing).\n *\n * @function\n * @param {boolean} enabled - Whether any viewport-specific count is set.\n * @returns {number} The viewport, as described above.\n */\nfunction useBulmaViewport(enabled: boolean): number {\n const [viewport, setViewport] = useState(-1);\n\n useClientLayoutEffect(() => {\n if (!enabled || typeof window.matchMedia !== 'function') return undefined;\n const lists = VIEWPORT_QUERIES.map(query => window.matchMedia(query));\n const update = () => {\n const index = lists.findIndex(list => list.matches);\n setViewport(index < 0 ? MOBILE : index);\n };\n update();\n lists.forEach(list => list.addEventListener('change', update));\n return () =>\n lists.forEach(list => list.removeEventListener('change', update));\n }, [enabled]);\n\n return enabled ? viewport : -1;\n}\n\n/**\n * A count prop as the whole number the carousel works with: rounded down,\n * and never below 1, so a zero or a stray `NaN` can't divide by nothing.\n *\n * @function\n * @param {number | undefined} count - The prop as given.\n * @returns {number | undefined} The count, or `undefined` when unset.\n */\nconst wholeCount = (count: number | undefined) =>\n count === undefined ? undefined : Math.max(1, Math.floor(count) || 1);\n\n/**\n * Props for the Carousel component.\n * @extraProp {string} [className] - Additional CSS classes.\n * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the carousel element.\n */\nexport interface CarouselProps\n extends\n Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'>,\n BulmaClassesProps {\n /**\n * Index of the first item in view (controlled); with one item in view, the\n * slide shown. A value between two of the positions a step lands on (see\n * `itemsToScroll`) is shown as given, and the next step goes on from it.\n * With `repeat`, a value past either end wraps around; without it, one\n * that would leave empty space after the last item shows the last full\n * view. Neither correction calls `onChange`. A value that takes the item\n * holding focus out of view moves focus to the first item in view, as a\n * swipe or a change of width does.\n * @defaultValue 0\n */\n value?: number;\n /**\n * Enable auto-play: one step (`itemsToScroll` items) per `interval`.\n * Without `repeat` it stops at the last position. It waits while the\n * pointer is over the carousel (see `pauseOnHover`) and while focus is\n * inside one of its items, so an item being read or used never moves out\n * of view.\n */\n autoplay?: boolean;\n /** Auto-play interval in milliseconds. Default: 5000. */\n interval?: number;\n /** Pause auto-play on hover. Default: true. */\n pauseOnHover?: boolean;\n /**\n * Loop back to the first position after the last. Default: true. With\n * several items in view, the view runs on past the last item into the\n * first ones, so it can show the end and the start side by side. Only\n * loops when some item is out of view.\n */\n repeat?: boolean;\n /**\n * Enable drag/swipe navigation. Default: true. A swipe moves one step,\n * however far it travels.\n */\n hasDrag?: boolean;\n /**\n * How many items are in view at once, at every width no\n * `itemsToShow<Viewport>` prop covers. Those props read the way a\n * `Column`'s `size<Viewport>` props do: `itemsToShowMobile` applies below\n * Bulma's tablet breakpoint, each of the others from its own breakpoint\n * up, and where several apply the widest one wins. A whole number, rounded\n * down and at least 1. The widths come from the stylesheet, so they are\n * right on the first paint; the arrows, indicators and steps use the\n * count for the window's width once the page has hydrated, and this one\n * until then. With this many children or fewer, every item keeps its\n * share of the width, nothing moves, and no arrows or indicators render.\n * @defaultValue 1\n */\n itemsToShow?: number;\n /**\n * Items in view at any width below Bulma's tablet breakpoint (769px),\n * fractional ones included. Falls back to `itemsToShow`.\n */\n itemsToShowMobile?: number;\n /**\n * Items in view from Bulma's tablet breakpoint (769px) up, until a wider\n * viewport's prop takes over. Falls back to `itemsToShow`.\n */\n itemsToShowTablet?: number;\n /**\n * Items in view from Bulma's desktop breakpoint (1024px) up, until a wider\n * viewport's prop takes over. Falls back to `itemsToShowTablet`, then\n * `itemsToShow`.\n */\n itemsToShowDesktop?: number;\n /**\n * Items in view from Bulma's widescreen breakpoint (1216px) up, until\n * `itemsToShowFullhd` takes over. Falls back to `itemsToShowDesktop`, and\n * on down to `itemsToShow`.\n */\n itemsToShowWidescreen?: number;\n /**\n * Items in view from Bulma's fullhd breakpoint (1408px) up. Falls back to\n * `itemsToShowWidescreen`, and on down to `itemsToShow`.\n */\n itemsToShowFullhd?: number;\n /**\n * How many items one step moves, for an arrow, an arrow key, a swipe or an\n * autoplay tick. A whole number, capped at the count in view so a step\n * never skips an item. Without `repeat`, the last step stops at the last\n * full view, so it can be shorter; with `repeat`, the step after the last\n * position goes on to the first one. The indicators mark these positions,\n * one per step rather than one per item. When the count in view changes\n * with the window's width, the first item in view stays in view.\n * @defaultValue 1\n */\n itemsToScroll?: number;\n /**\n * Show navigation arrows. Default: true. They render `type=\"button\"`, so a\n * carousel inside a form is not submitted by moving between slides.\n */\n arrow?: boolean;\n /** Only show arrows on hover. */\n arrowHover?: boolean;\n /**\n * Show slide indicators. Default: true. There is one for each position a\n * step can land on (see `itemsToScroll`). They render `type=\"button\"`, so\n * a carousel inside a form is not submitted by picking a slide.\n */\n indicator?: boolean;\n /**\n * Puts the indicators over the slides instead of below them, at the edge\n * `indicatorPosition` names. It also turns on the overlay look unless\n * `overlayControls` says otherwise, so on its own it gives the look made\n * for photos: light arrows, and light indicators on a dark gradient band.\n */\n indicatorInside?: boolean;\n /**\n * The overlay look, made for photos. The arrows take the\n * `--bulma-carousel-overlay-arrow-*` colors, and indicators over the\n * slides take the `--bulma-carousel-overlay-indicator-*` colors on a dark\n * gradient band. Indicators below the slides keep their plain colors,\n * since they sit on the page. It follows `indicatorInside` unless you set\n * it, so `overlayControls={false}` puts the indicators over the slides\n * with the plain look, and `overlayControls` alone gives the arrows the\n * overlay look with the indicators below. While it's on, `arrowColor`\n * doesn't apply.\n * @defaultValue indicatorInside\n */\n overlayControls?: boolean;\n /**\n * The edge of the slides `indicatorInside` puts the indicators on.\n * Default: 'bottom'. Without `indicatorInside` they sit below the slides\n * whatever this says, so leave it unset there.\n */\n indicatorPosition?: 'bottom' | 'top';\n /** Indicator style. Default: 'dots'. */\n indicatorStyle?: 'circles' | 'dots' | 'lines' | 'bars';\n /** Icon name for the previous arrow button. */\n iconPrev?: string;\n /** Icon name for the next arrow button. */\n iconNext?: string;\n /** Icon library to use. */\n iconLibrary?: IconLibrary;\n /** Icon style variant (e.g., 'solid', 'outlined'). */\n iconVariant?: string;\n /** Icon size modifier. */\n iconSize?: 'small' | 'medium' | 'large';\n /** Additional icon modifiers. */\n iconFeatures?: string | string[];\n /** Show semi-transparent background on arrow buttons. Set to `false` for icon-only arrows. */\n arrowBackground?: boolean;\n /**\n * Color theme for navigation arrows. Not applied while the overlay look is\n * on (see `overlayControls`, which `indicatorInside` turns on), whose\n * arrows take `--bulma-carousel-overlay-arrow-color`.\n */\n arrowColor?: 'light' | 'dark';\n /** Accessible label for the carousel region. Default: 'Image carousel'. */\n ariaLabel?: string;\n /**\n * Called with the index of the first item in view when an arrow, an arrow\n * key, an indicator, a swipe or autoplay moves the carousel.\n */\n onChange?: (value: number) => void;\n /** CarouselItem children. */\n children?: React.ReactNode;\n}\n\n/**\n * The `Carousel` component provides an image/content slider with navigation arrows and indicators.\n *\n * @function\n * @param {CarouselProps} props - Props for the Carousel component.\n * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the carousel element.\n * @returns {JSX.Element} The rendered carousel component.\n *\n * @example\n * // Basic carousel\n * <Carousel>\n * <CarouselItem>Slide 1</CarouselItem>\n * <CarouselItem>Slide 2</CarouselItem>\n * <CarouselItem>Slide 3</CarouselItem>\n * </Carousel>\n *\n * @example\n * // Auto-playing carousel\n * <Carousel autoplay interval={3000}>\n * <CarouselItem>\n * <img src=\"image1.jpg\" alt=\"Slide 1\" />\n * </CarouselItem>\n * <CarouselItem>\n * <img src=\"image2.jpg\" alt=\"Slide 2\" />\n * </CarouselItem>\n * </Carousel>\n *\n * @example\n * // Three cards in view on desktop, two on tablet, one on mobile\n * <Carousel itemsToShow={1} itemsToShowTablet={2} itemsToShowDesktop={3}>\n * {cards.map(card => (\n * <CarouselItem key={card.id}>{card.body}</CarouselItem>\n * ))}\n * </Carousel>\n */\nexport const Carousel = forwardRef<HTMLDivElement, CarouselProps>(\n (\n {\n value: controlledValue,\n autoplay = false,\n interval = 5000,\n pauseOnHover = true,\n repeat = true,\n hasDrag = true,\n itemsToShow,\n itemsToShowMobile,\n itemsToShowTablet,\n itemsToShowDesktop,\n itemsToShowWidescreen,\n itemsToShowFullhd,\n itemsToScroll,\n arrow = true,\n arrowHover = false,\n indicator = true,\n indicatorInside = false,\n overlayControls = indicatorInside,\n indicatorPosition = 'bottom',\n indicatorStyle = 'dots',\n iconPrev,\n iconNext,\n iconLibrary,\n iconVariant,\n iconSize,\n iconFeatures,\n arrowBackground = true,\n arrowColor,\n ariaLabel = 'Image carousel',\n onChange,\n className,\n style,\n children,\n ...props\n },\n ref\n ) => {\n const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n const carouselRef = useRef<HTMLDivElement>(null);\n // Cleanup returned by a consumer's callback ref on attach, held until detach.\n const consumerCleanupRef = useRef<(() => void) | null>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const slidesRef = useRef<HTMLDivElement>(null);\n // The item (a child of the track) that holds focus, until focus leaves\n // the items for somewhere else\n const focusedItemRef = useRef<Element | undefined>(undefined);\n\n const [internalValue, setInternalValue] = useState(0);\n const [isPaused, setIsPaused] = useState(false);\n const [isFocusInside, setIsFocusInside] = useState(false);\n const [isDragging, setIsDragging] = useState(false);\n const [dragStart, setDragStart] = useState(0);\n const [dragOffset, setDragOffset] = useState(0);\n const [isWrapping, setIsWrapping] = useState(false);\n const [displayIndex, setDisplayIndex] = useState(0);\n const [skipTransition, setSkipTransition] = useState(false);\n\n // Get valid children\n const items = Children.toArray(children).filter(\n isValidElement\n ) as React.ReactElement<CarouselItemProps>[];\n const itemCount = items.length;\n\n // The count in view. The viewport props come widest first, in the order\n // of VIEWPORT_QUERIES, then mobile; each min-width viewport falls back to\n // the narrower ones, and every viewport to `itemsToShow`, the cascade the\n // stylesheet's `--bulma-carousel-items-to-show-*` defaults spell out.\n const counts = [\n itemsToShowFullhd,\n itemsToShowWidescreen,\n itemsToShowDesktop,\n itemsToShowTablet,\n itemsToShowMobile,\n ].map(wholeCount);\n const baseCount = wholeCount(itemsToShow);\n const viewport = useBulmaViewport(counts.some(c => c !== undefined));\n const inView =\n (viewport === MOBILE\n ? counts[MOBILE]\n : viewport >= 0\n ? counts.slice(viewport, MOBILE).find(c => c !== undefined)\n : undefined) ??\n baseCount ??\n 1;\n // The props as the stylesheet reads them, so the widths are right from\n // the first paint, on the server too.\n const countStyle: Record<string, number> = {};\n [...counts, baseCount].forEach((count, i) => {\n if (count !== undefined) {\n countStyle[`--bulma-carousel-items-to-show${COUNT_SUFFIXES[i]}`] =\n count;\n }\n });\n\n const scroll = Math.min(wholeCount(itemsToScroll) ?? 1, inView);\n const looping = repeat && itemCount > inView;\n const lastStart = Math.max(0, itemCount - inView);\n // Where the view can start: every `scroll` items from the first, and\n // without a loop the last full view as well, which is what keeps the\n // end of the track from showing empty space.\n const positions: number[] = [];\n for (let p = 0; p < (looping ? itemCount : lastStart); p += scroll) {\n positions.push(p);\n }\n if (!looping) positions.push(lastStart);\n const lastPosition = positions[positions.length - 1];\n const canMove = positions.length > 1;\n\n const wrap = (index: number) =>\n ((index % itemCount) + itemCount) % itemCount;\n const fit = (index: number) =>\n looping ? wrap(index) : Math.min(Math.max(index, 0), lastStart);\n\n // Use controlled or internal value, as a start the view can show\n const activeIndex = fit(controlledValue ?? internalValue);\n // The indicator for the last position at or before the first item in view\n const activePosition = positions.reduce(\n (found, position, index) => (position <= activeIndex ? index : found),\n 0\n );\n const nextIndex = positions[activePosition + 1];\n // From between two positions, the previous step is the one just behind\n const prevIndex =\n activeIndex > positions[activePosition]\n ? positions[activePosition]\n : positions[activePosition - 1];\n\n // Sync displayIndex when the value changes externally, or when the count\n // in view moves the start it fits to. Intentional external-prop sync that\n // must not run mid-wrap animation; covered by tests and certified\n // in-browser. Uncontrolled, the fitted start becomes the value too, so a\n // later change of count keeps what was first in view in view.\n useEffect(() => {\n if (!isWrapping) {\n // eslint-disable-next-line react-hooks/set-state-in-effect -- syncing to controlled prop\n setDisplayIndex(activeIndex);\n if (controlledValue === undefined) setInternalValue(activeIndex);\n }\n }, [activeIndex, isWrapping, controlledValue]);\n\n // Update active index\n const setActiveIndex = useCallback(\n (index: number) => {\n if (controlledValue === undefined) {\n setInternalValue(index);\n }\n setDisplayIndex(index);\n setIsWrapping(false);\n onChange?.(index);\n },\n [controlledValue, onChange]\n );\n\n // Navigation handlers\n const goToPrev = useCallback(() => {\n if (prevIndex !== undefined) {\n setActiveIndex(prevIndex);\n } else if (looping) {\n // Animate to the clones before the first item, which show the last\n // position, and snap to the real one when the transition ends\n setDisplayIndex(lastPosition - itemCount);\n setIsWrapping(true);\n }\n }, [prevIndex, looping, lastPosition, itemCount, setActiveIndex]);\n\n const goToNext = useCallback(() => {\n if (nextIndex !== undefined) {\n setActiveIndex(nextIndex);\n } else if (looping) {\n // Animate to the clones after the last item, which show the first\n // position, and snap to the real one when the transition ends\n setDisplayIndex(itemCount);\n setIsWrapping(true);\n }\n }, [nextIndex, looping, itemCount, setActiveIndex]);\n\n // Read when the timer fires or an arrow key arrives, so neither the\n // timer nor the key listener starts over while `onChange` changes\n // identity, as an inline one does on every render of the parent.\n const goToPrevRef = useLatestRef(goToPrev);\n const goToNextRef = useLatestRef(goToNext);\n\n // Auto-play. Each slide gets the whole interval, so a slide change,\n // autoplay's own or the user's, starts the timer over. A render that\n // leaves the slide where it is doesn't. It waits while focus is inside\n // an item, so what someone is reading or using doesn't move away. The\n // timer reads where focus is when it fires, rather than trusting the\n // last focus event alone: a browser moving focus off an element that\n // went inert need not fire one, and the pause would never end. A focus\n // change still starts the timer over, so an item gets the whole\n // interval once focus leaves it.\n const isPlaying =\n autoplay && (looping || nextIndex !== undefined) && !isPaused;\n const isRotating = isPlaying && !isFocusInside;\n\n useEffect(() => {\n if (!isPlaying) return undefined;\n\n const timer = setInterval(() => {\n const track = slidesRef.current;\n if (track?.contains(getActiveElementInTree(track))) return;\n if (isFocusInside) setIsFocusInside(false);\n goToNextRef.current();\n }, interval);\n\n return () => clearInterval(timer);\n }, [isPlaying, isFocusInside, interval, activeIndex, goToNextRef]);\n\n // Pause on hover\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 // Drag handlers\n const handleDragStart = useCallback(\n (clientX: number) => {\n if (!hasDrag) return;\n setIsDragging(true);\n setDragStart(clientX);\n setDragOffset(0);\n },\n [hasDrag]\n );\n\n const handleDragMove = useCallback(\n (clientX: number) => {\n if (!isDragging) return;\n setDragOffset(clientX - dragStart);\n },\n [isDragging, dragStart]\n );\n\n const handleDragEnd = useCallback(() => {\n if (!isDragging) return;\n setIsDragging(false);\n\n const threshold = 50;\n if (dragOffset < -threshold) {\n goToNext();\n } else if (dragOffset > threshold) {\n goToPrev();\n }\n\n setDragOffset(0);\n }, [isDragging, dragOffset, goToNext, goToPrev]);\n\n // Mouse events\n const handleMouseDown = useCallback(\n (e: React.MouseEvent) => {\n e.preventDefault();\n handleDragStart(e.clientX);\n },\n [handleDragStart]\n );\n\n const handleMouseMove = useCallback(\n (e: React.MouseEvent) => {\n handleDragMove(e.clientX);\n },\n [handleDragMove]\n );\n\n const handleMouseUp = useCallback(() => {\n handleDragEnd();\n }, [handleDragEnd]);\n\n // Touch events\n const handleTouchStart = useCallback(\n (e: React.TouchEvent) => {\n handleDragStart(e.touches[0].clientX);\n },\n [handleDragStart]\n );\n\n const handleTouchMove = useCallback(\n (e: React.TouchEvent) => {\n handleDragMove(e.touches[0].clientX);\n },\n [handleDragMove]\n );\n\n const handleTouchEnd = useCallback(() => {\n handleDragEnd();\n }, [handleDragEnd]);\n\n // Keyboard navigation, from the carousel's own controls. Inside an item\n // the keys are its content's (a field's caret, a slider), and a step\n // from there could take the focused item out of view.\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n const node = carouselRef.current;\n const active = getActiveElementInTree(node);\n if (!node?.contains(active) || slidesRef.current?.contains(active)) {\n return;\n }\n\n switch (e.key) {\n case 'ArrowLeft':\n e.preventDefault();\n goToPrevRef.current();\n break;\n case 'ArrowRight':\n e.preventDefault();\n goToNextRef.current();\n break;\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n return () => document.removeEventListener('keydown', handleKeyDown);\n }, [goToPrevRef, goToNextRef]);\n\n // Handle wrap-around transition end: the track's own, since an item's\n // content can end a transition of its own that bubbles up to here\n const handleTransitionEnd = useCallback(\n (e: React.TransitionEvent<HTMLDivElement>) => {\n if (isWrapping && e.target === e.currentTarget) {\n // Skip transition for the instant snap from the clones to the\n // real items they copy\n setSkipTransition(true);\n setActiveIndex(((displayIndex % itemCount) + itemCount) % itemCount);\n\n // Re-enable transition after the snap\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n setSkipTransition(false);\n });\n });\n }\n },\n [isWrapping, displayIndex, itemCount, setActiveIndex]\n );\n\n // Combined ref\n const combinedRef = useCallback(\n (node: HTMLDivElement | null) => {\n (carouselRef 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 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 `Toast`.\n // The form controls that merge a forwarded ref still discard the cleanup\n // and detach with `ref(null)`, so this is not yet library-wide — grep\n // `typeof ref === 'function'` for the current split.\n if (node === null) {\n const consumerCleanup = consumerCleanupRef.current;\n consumerCleanupRef.current = null;\n if (consumerCleanup) {\n consumerCleanup();\n } else {\n ref(null);\n }\n return;\n }\n const cleanup: unknown = ref(node);\n consumerCleanupRef.current =\n typeof cleanup === 'function' ? (cleanup as () => void) : null;\n } else if (ref) {\n (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n }\n },\n [ref]\n );\n\n // Can navigate\n const canGoPrev = looping || prevIndex !== undefined;\n const canGoNext = looping || nextIndex !== undefined;\n\n // Generate classes\n const carouselClasses = usePrefixedClassNames('carousel', {\n 'is-overlay': overlayControls,\n 'has-arrow-hover': arrowHover,\n [`is-indicator-${indicatorStyle}`]: indicatorStyle !== 'dots',\n [`is-arrow-${arrowColor}`]: !!arrowColor,\n });\n const classPrefix = useClassPrefix();\n const carouselContainerClass = usePrefixedClassNames('carousel-container');\n const carouselSlidesClass = usePrefixedClassNames('carousel-slides');\n const carouselArrowPrevClass = usePrefixedClassNames(\n 'carousel-arrow',\n 'is-prev',\n { 'is-transparent': !arrowBackground }\n );\n const carouselArrowNextClass = usePrefixedClassNames(\n 'carousel-arrow',\n 'is-next',\n { 'is-transparent': !arrowBackground }\n );\n const carouselIndicatorClass = usePrefixedClassNames('carousel-indicator', {\n 'is-inside': indicatorInside,\n 'is-top': indicatorPosition === 'top',\n });\n\n const combinedClasses = classNames(\n carouselClasses,\n bulmaHelperClasses,\n className\n );\n\n // Where the track is drawn from: mid-wrap the clones, otherwise a start\n // the view can show, so a change in the count in view never paints\n // empty space while the sync above catches up.\n const shownIndex = isWrapping ? displayIndex : fit(displayIndex);\n // Enough clones on each side to fill the widest view any viewport sets,\n // since the stylesheet, not this count, sizes what's on screen\n const cloneCount = looping\n ? Math.min(\n itemCount,\n Math.max(baseCount ?? 1, ...counts.map(c => c ?? 1))\n )\n : 0;\n // The track: a full view's worth of clones of the last items, the items,\n // and clones of the first ones, for a seamless loop. Each entry is the\n // item it shows and its key.\n const slots: [number, React.Key][] = items.map((_, index) => [\n index,\n index,\n ]);\n for (let k = 0; k < cloneCount; k++) {\n slots.splice(k, 0, [itemCount - cloneCount + k, `clone-before-${k}`]);\n slots.push([k, `clone-after-${k}`]);\n }\n\n // Render slides with active state (includes clones for infinite loop).\n // What's in view is a run of slots, so where a looping view runs past\n // the last item, the clones on screen are the live copies and the items\n // they copy, off screen, are the hidden ones: no item is exposed twice,\n // and the copy exposed is the one in view.\n const renderSlides = () =>\n slots.map(([index, key], slot) => {\n const item = items[index];\n const own = item.props;\n const isShown =\n slot >= shownIndex + cloneCount &&\n slot < shownIndex + cloneCount + inView;\n return cloneElement(item, {\n key,\n active: isShown,\n role: own.role ?? 'group',\n 'aria-roledescription': own['aria-roledescription'] ?? 'slide',\n ...(own['aria-label'] || own['aria-labelledby']\n ? {}\n : { 'aria-label': `${index + 1} of ${itemCount}` }),\n // Out of view: hidden from assistive tech, and inert, so nothing\n // in it takes focus or a click\n ...(isShown ? {} : { 'aria-hidden': true, ...inertProps(true) }),\n });\n });\n\n // Hand focus on when the item holding it leaves the view. An item out\n // of view is inert, and a browser drops focus from an inert element to\n // the page, so a swipe, a change of count with the window's width, a new\n // controlled value or the item's removal would leave a keyboard or\n // screen reader user nowhere. Focus goes to the first item in view,\n // given `tabindex=\"-1\"` for it unless it has a tabindex of its own. A\n // layout effect runs before the browser gets to drop the focus; the\n // focused item's removal drops it at once, so focus on the page itself\n // still counts as the item's.\n useClientLayoutEffect(() => {\n const held = focusedItemRef.current;\n if (!held) return;\n const track = slidesRef.current as HTMLDivElement;\n const start = shownIndex + cloneCount;\n const slot = Array.prototype.indexOf.call(track.children, held);\n if (slot >= start && slot < start + inView) return;\n const active = getActiveElementInTree(track);\n if (active !== held.ownerDocument.body && !held.contains(active)) {\n return;\n }\n focusedItemRef.current = undefined;\n const first = track.children[start] as HTMLElement | undefined;\n if (!first) return;\n if (!first.hasAttribute('tabindex')) first.tabIndex = -1;\n first.focus({ preventScroll: true });\n }, [shownIndex, cloneCount, inView, itemCount]);\n\n return (\n <div\n ref={combinedRef}\n className={combinedClasses}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n role=\"region\"\n aria-roledescription=\"carousel\"\n aria-label={ariaLabel}\n style={{ ...countStyle, ...style }}\n {...rest}\n >\n <div\n ref={containerRef}\n className={carouselContainerClass}\n onMouseDown={hasDrag ? handleMouseDown : undefined}\n onMouseMove={hasDrag && isDragging ? handleMouseMove : undefined}\n onMouseUp={hasDrag ? handleMouseUp : undefined}\n onMouseLeave={hasDrag ? handleMouseUp : undefined}\n onTouchStart={hasDrag ? handleTouchStart : undefined}\n onTouchMove={hasDrag ? handleTouchMove : undefined}\n onTouchEnd={hasDrag ? handleTouchEnd : undefined}\n style={{\n transform: isDragging ? `translateX(${dragOffset}px)` : undefined,\n cursor: hasDrag ? (isDragging ? 'grabbing' : 'grab') : undefined,\n }}\n >\n <div\n ref={slidesRef}\n className={carouselSlidesClass}\n style={{\n // One item is the track's width plus a gap, over the count the\n // stylesheet has in view; account for the prepended clones\n transform: `translateX(calc(${-(shownIndex + cloneCount)} * (100% + var(--bulma-carousel-item-gap, 0px)) / var(--bulma-carousel-items-in-view, 1)))`,\n // Disable transition during drag or instant snap after wrap-around\n transition:\n isDragging || skipTransition\n ? 'none'\n : 'transform 0.3s ease-in-out',\n }}\n // Announce what comes into view, except while autoplay turns it\n aria-live={isRotating ? 'off' : 'polite'}\n onFocus={e => {\n setIsFocusInside(true);\n focusedItemRef.current = Array.from(\n e.currentTarget.children\n ).find(item => item.contains(e.target));\n }}\n onBlur={e => {\n const inside = e.currentTarget.contains(e.relatedTarget);\n setIsFocusInside(inside);\n if (!inside) focusedItemRef.current = undefined;\n }}\n onTransitionEnd={handleTransitionEnd}\n >\n {renderSlides()}\n </div>\n {arrow && canMove && (\n <>\n <Button\n type=\"button\"\n className={carouselArrowPrevClass}\n onClick={goToPrev}\n isDisabled={!canGoPrev}\n aria-label=\"Previous slide\"\n >\n {iconPrev ? (\n <Icon\n name={iconPrev}\n library={iconLibrary}\n variant={iconVariant}\n size={iconSize}\n features={iconFeatures}\n />\n ) : (\n <DefaultPrevIcon />\n )}\n </Button>\n <Button\n type=\"button\"\n className={carouselArrowNextClass}\n onClick={goToNext}\n isDisabled={!canGoNext}\n aria-label=\"Next slide\"\n >\n {iconNext ? (\n <Icon\n name={iconNext}\n library={iconLibrary}\n variant={iconVariant}\n size={iconSize}\n features={iconFeatures}\n />\n ) : (\n <DefaultNextIcon />\n )}\n </Button>\n </>\n )}\n </div>\n\n {indicator && canMove && (\n <div className={carouselIndicatorClass} role=\"tablist\">\n {positions.map((position, index) => (\n <Button\n key={position}\n type=\"button\"\n className={prefixedClassNames(classPrefix, 'indicator-item', {\n 'is-active': index === activePosition,\n })}\n onClick={() => setActiveIndex(position)}\n role=\"tab\"\n aria-selected={index === activePosition}\n aria-label={`Go to slide ${position + 1}`}\n />\n ))}\n </div>\n )}\n </div>\n );\n }\n);\n\nCarousel.displayName = 'Carousel';\n\nexport default Carousel;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Carousel.js","sources":["../../../src/components/Carousel.tsx"],"sourcesContent":["import React, {\n forwardRef,\n useState,\n useRef,\n useEffect,\n useCallback,\n Children,\n isValidElement,\n cloneElement,\n} from 'react';\nimport {\n classNames,\n prefixedClassNames,\n usePrefixedClassNames,\n} from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { useClassPrefix } from '../helpers/Config';\nimport { getActiveElementInTree } from '../helpers/shadowDom';\nimport { useLatestRef } from '../helpers/useLatestRef';\nimport { useClientLayoutEffect } from '../helpers/useClientLayoutEffect';\nimport { inertProps } from '../helpers/inertProps';\nimport { Icon } from '../elements/Icon';\nimport { Button } from '../elements/Button';\n\n/**\n * Props for the CarouselItem component.\n */\nexport interface CarouselItemProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * Whether this item is in view. `Carousel` sets it on every item in view,\n * so with several in view several are active.\n */\n active?: boolean;\n /**\n * The slide's content. An image in it is held to the slide's width at its\n * own height, unless something sizes the image itself: a ratio `Image`\n * fills its frame, and an `Avatar`'s photo its circle, as they do outside a\n * carousel.\n */\n children?: React.ReactNode;\n}\n\n/**\n * Individual carousel item/slide.\n *\n * @function\n * @param {CarouselItemProps} props - Props for the CarouselItem component.\n * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the carousel item element.\n * @returns {JSX.Element} The rendered carousel item.\n */\nexport const CarouselItem = forwardRef<HTMLDivElement, CarouselItemProps>(\n ({ active, className, children, ...props }, ref) => {\n const itemClasses = classNames(\n usePrefixedClassNames('carousel-item', { 'is-active': active }),\n className\n );\n\n return (\n <div ref={ref} className={itemClasses} {...props}>\n {children}\n </div>\n );\n }\n);\n\nCarouselItem.displayName = 'CarouselItem';\n\ntype IconLibrary = 'fa' | 'mdi' | 'ion' | 'material-icons' | 'material-symbols';\n\n/**\n * Default SVG icon for the previous arrow button.\n *\n * @function\n * @returns {JSX.Element} The rendered SVG chevron-left icon.\n */\nconst DefaultPrevIcon = () => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n >\n <polyline points=\"15 18 9 12 15 6\" />\n </svg>\n);\n\n/**\n * Default SVG icon for the next arrow button.\n *\n * @function\n * @returns {JSX.Element} The rendered SVG chevron-right icon.\n */\nconst DefaultNextIcon = () => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n >\n <polyline points=\"9 18 15 12 9 6\" />\n </svg>\n);\n\n/**\n * The media queries Bulma's `fullhd`, `widescreen`, `desktop` and `tablet`\n * mixins open with, widest first, at Bulma's default breakpoints. The\n * stylesheet picks the count in view with those mixins; these tell the\n * script which count that is. Narrower than the last one is `mobile`.\n */\nconst VIEWPORT_QUERIES = [\n 'screen and (min-width: 1408px)',\n 'screen and (min-width: 1216px)',\n 'screen and (min-width: 1024px)',\n 'screen and (min-width: 769px), print',\n];\n\n/** `useBulmaViewport`'s answer below the tablet breakpoint. */\nconst MOBILE = VIEWPORT_QUERIES.length;\n\n/**\n * The `--bulma-carousel-items-to-show*` variable each count prop writes, in\n * the order the component lists them: the viewports as above, mobile, and\n * last `itemsToShow` itself.\n */\nconst COUNT_SUFFIXES = [\n '-fullhd',\n '-widescreen',\n '-desktop',\n '-tablet',\n '-mobile',\n '',\n];\n\n/**\n * Which of Bulma's viewports the window is in: the index of the widest\n * `VIEWPORT_QUERIES` entry that matches, `MOBILE` below them all, or `-1`\n * when that isn't known (on the server, before the first layout effect, and\n * whenever `enabled` is off, so a carousel with one count everywhere\n * subscribes to nothing).\n *\n * @function\n * @param {boolean} enabled - Whether any viewport-specific count is set.\n * @returns {number} The viewport, as described above.\n */\nfunction useBulmaViewport(enabled: boolean): number {\n const [viewport, setViewport] = useState(-1);\n\n useClientLayoutEffect(() => {\n if (!enabled || typeof window.matchMedia !== 'function') return undefined;\n const lists = VIEWPORT_QUERIES.map(query => window.matchMedia(query));\n const update = () => {\n const index = lists.findIndex(list => list.matches);\n setViewport(index < 0 ? MOBILE : index);\n };\n update();\n lists.forEach(list => list.addEventListener('change', update));\n return () =>\n lists.forEach(list => list.removeEventListener('change', update));\n }, [enabled]);\n\n return enabled ? viewport : -1;\n}\n\n/**\n * A count prop as the whole number the carousel works with: rounded down,\n * and never below 1, so a zero or a stray `NaN` can't divide by nothing.\n *\n * @function\n * @param {number | undefined} count - The prop as given.\n * @returns {number | undefined} The count, or `undefined` when unset.\n */\nconst wholeCount = (count: number | undefined) =>\n count === undefined ? undefined : Math.max(1, Math.floor(count) || 1);\n\n/**\n * Props for the Carousel component.\n * @extraProp {string} [className] - Additional CSS classes.\n * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the carousel element.\n */\nexport interface CarouselProps\n extends\n Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'>,\n BulmaClassesProps {\n /**\n * Index of the first item in view (controlled); with one item in view, the\n * slide shown. A value between two of the positions a step lands on (see\n * `itemsToScroll`) is shown as given, and the next step goes on from it.\n * With `repeat`, a value past either end wraps around; without it, one\n * that would leave empty space after the last item shows the last full\n * view. Neither correction calls `onChange`. A value that takes the item\n * holding focus out of view moves focus to the first item in view, as a\n * swipe or a change of width does.\n * @defaultValue 0\n */\n value?: number;\n /**\n * Enable auto-play: one step (`itemsToScroll` items) per `interval`.\n * Without `repeat` it stops at the last position. It waits while the\n * pointer is over the carousel (see `pauseOnHover`) and while focus is\n * inside one of its items, so an item being read or used never moves out\n * of view.\n */\n autoplay?: boolean;\n /** Auto-play interval in milliseconds. Default: 5000. */\n interval?: number;\n /** Pause auto-play on hover. Default: true. */\n pauseOnHover?: boolean;\n /**\n * Loop back to the first position after the last. Default: true. With\n * several items in view, the view runs on past the last item into the\n * first ones, so it can show the end and the start side by side. Only\n * loops when some item is out of view.\n */\n repeat?: boolean;\n /**\n * Enable drag/swipe navigation. Default: true. A swipe moves one step,\n * however far it travels.\n */\n hasDrag?: boolean;\n /**\n * How many items are in view at once, at every width no\n * `itemsToShow<Viewport>` prop covers. Those props read the way a\n * `Column`'s `size<Viewport>` props do: `itemsToShowMobile` applies below\n * Bulma's tablet breakpoint, each of the others from its own breakpoint\n * up, and where several apply the widest one wins. A whole number, rounded\n * down and at least 1. The widths come from the stylesheet, so they are\n * right on the first paint; the arrows, indicators and steps use the\n * count for the window's width once the page has hydrated, and this one\n * until then. With this many children or fewer, every item keeps its\n * share of the width, nothing moves, and no arrows or indicators render.\n * @defaultValue 1\n */\n itemsToShow?: number;\n /**\n * Items in view at any width below Bulma's tablet breakpoint (769px),\n * fractional ones included. Falls back to `itemsToShow`.\n */\n itemsToShowMobile?: number;\n /**\n * Items in view from Bulma's tablet breakpoint (769px) up, until a wider\n * viewport's prop takes over. Falls back to `itemsToShow`.\n */\n itemsToShowTablet?: number;\n /**\n * Items in view from Bulma's desktop breakpoint (1024px) up, until a wider\n * viewport's prop takes over. Falls back to `itemsToShowTablet`, then\n * `itemsToShow`.\n */\n itemsToShowDesktop?: number;\n /**\n * Items in view from Bulma's widescreen breakpoint (1216px) up, until\n * `itemsToShowFullhd` takes over. Falls back to `itemsToShowDesktop`, and\n * on down to `itemsToShow`.\n */\n itemsToShowWidescreen?: number;\n /**\n * Items in view from Bulma's fullhd breakpoint (1408px) up. Falls back to\n * `itemsToShowWidescreen`, and on down to `itemsToShow`.\n */\n itemsToShowFullhd?: number;\n /**\n * How many items one step moves, for an arrow, an arrow key, a swipe or an\n * autoplay tick. A whole number, capped at the count in view so a step\n * never skips an item. Without `repeat`, the last step stops at the last\n * full view, so it can be shorter; with `repeat`, the step after the last\n * position goes on to the first one. The indicators mark these positions,\n * one per step rather than one per item. When the count in view changes\n * with the window's width, the first item in view stays in view.\n * @defaultValue 1\n */\n itemsToScroll?: number;\n /**\n * Show navigation arrows. Default: true. They render `type=\"button\"`, so a\n * carousel inside a form is not submitted by moving between slides.\n */\n arrow?: boolean;\n /** Only show arrows on hover. */\n arrowHover?: boolean;\n /**\n * Show slide indicators. Default: true. There is one for each position a\n * step can land on (see `itemsToScroll`). They render `type=\"button\"`, so\n * a carousel inside a form is not submitted by picking a slide.\n */\n indicator?: boolean;\n /**\n * Puts the indicators over the slides instead of below them, at the edge\n * `indicatorPosition` names. It also turns on the overlay look unless\n * `overlayControls` says otherwise, so on its own it gives the look made\n * for photos: light arrows, and light indicators on a dark gradient band.\n */\n indicatorInside?: boolean;\n /**\n * The overlay look, made for photos. The arrows take the\n * `--bulma-carousel-overlay-arrow-*` colors, and indicators over the\n * slides take the `--bulma-carousel-overlay-indicator-*` colors on a dark\n * gradient band. Indicators below the slides keep their plain colors,\n * since they sit on the page. It follows `indicatorInside` unless you set\n * it, so `overlayControls={false}` puts the indicators over the slides\n * with the plain look, and `overlayControls` alone gives the arrows the\n * overlay look with the indicators below. While it's on, `arrowColor`\n * doesn't apply.\n * @defaultValue indicatorInside\n */\n overlayControls?: boolean;\n /**\n * The edge of the slides `indicatorInside` puts the indicators on.\n * Default: 'bottom'. Without `indicatorInside` they sit below the slides\n * whatever this says, so leave it unset there.\n */\n indicatorPosition?: 'bottom' | 'top';\n /** Indicator style. Default: 'dots'. */\n indicatorStyle?: 'circles' | 'dots' | 'lines' | 'bars';\n /** Icon name for the previous arrow button. */\n iconPrev?: string;\n /** Icon name for the next arrow button. */\n iconNext?: string;\n /** Icon library to use. */\n iconLibrary?: IconLibrary;\n /** Icon style variant (e.g., 'solid', 'outlined'). */\n iconVariant?: string;\n /** Icon size modifier. */\n iconSize?: 'small' | 'medium' | 'large';\n /** Additional icon modifiers. */\n iconFeatures?: string | string[];\n /** Show semi-transparent background on arrow buttons. Set to `false` for icon-only arrows. */\n arrowBackground?: boolean;\n /**\n * Color theme for navigation arrows. Not applied while the overlay look is\n * on (see `overlayControls`, which `indicatorInside` turns on), whose\n * arrows take `--bulma-carousel-overlay-arrow-color`.\n */\n arrowColor?: 'light' | 'dark';\n /** Accessible label for the carousel region. Default: 'Image carousel'. */\n ariaLabel?: string;\n /**\n * Called with the index of the first item in view when an arrow, an arrow\n * key, an indicator, a swipe or autoplay moves the carousel.\n */\n onChange?: (value: number) => void;\n /** CarouselItem children. */\n children?: React.ReactNode;\n}\n\n/**\n * The `Carousel` component provides an image/content slider with navigation arrows and indicators.\n *\n * @function\n * @param {CarouselProps} props - Props for the Carousel component.\n * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the carousel element.\n * @returns {JSX.Element} The rendered carousel component.\n *\n * @example\n * // Basic carousel\n * <Carousel>\n * <CarouselItem>Slide 1</CarouselItem>\n * <CarouselItem>Slide 2</CarouselItem>\n * <CarouselItem>Slide 3</CarouselItem>\n * </Carousel>\n *\n * @example\n * // Auto-playing carousel\n * <Carousel autoplay interval={3000}>\n * <CarouselItem>\n * <img src=\"image1.jpg\" alt=\"Slide 1\" />\n * </CarouselItem>\n * <CarouselItem>\n * <img src=\"image2.jpg\" alt=\"Slide 2\" />\n * </CarouselItem>\n * </Carousel>\n *\n * @example\n * // Three cards in view on desktop, two on tablet, one on mobile\n * <Carousel itemsToShow={1} itemsToShowTablet={2} itemsToShowDesktop={3}>\n * {cards.map(card => (\n * <CarouselItem key={card.id}>{card.body}</CarouselItem>\n * ))}\n * </Carousel>\n */\nexport const Carousel = forwardRef<HTMLDivElement, CarouselProps>(\n (\n {\n value: controlledValue,\n autoplay = false,\n interval = 5000,\n pauseOnHover = true,\n repeat = true,\n hasDrag = true,\n itemsToShow,\n itemsToShowMobile,\n itemsToShowTablet,\n itemsToShowDesktop,\n itemsToShowWidescreen,\n itemsToShowFullhd,\n itemsToScroll,\n arrow = true,\n arrowHover = false,\n indicator = true,\n indicatorInside = false,\n overlayControls = indicatorInside,\n indicatorPosition = 'bottom',\n indicatorStyle = 'dots',\n iconPrev,\n iconNext,\n iconLibrary,\n iconVariant,\n iconSize,\n iconFeatures,\n arrowBackground = true,\n arrowColor,\n ariaLabel = 'Image carousel',\n onChange,\n className,\n style,\n children,\n ...props\n },\n ref\n ) => {\n const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n const carouselRef = useRef<HTMLDivElement>(null);\n // Cleanup returned by a consumer's callback ref on attach, held until detach.\n const consumerCleanupRef = useRef<(() => void) | null>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const slidesRef = useRef<HTMLDivElement>(null);\n // The item (a child of the track) that holds focus, until focus leaves\n // the items for somewhere else\n const focusedItemRef = useRef<Element | undefined>(undefined);\n\n const [internalValue, setInternalValue] = useState(0);\n const [isPaused, setIsPaused] = useState(false);\n const [isFocusInside, setIsFocusInside] = useState(false);\n const [isDragging, setIsDragging] = useState(false);\n const [dragStart, setDragStart] = useState(0);\n const [dragOffset, setDragOffset] = useState(0);\n const [isWrapping, setIsWrapping] = useState(false);\n const [displayIndex, setDisplayIndex] = useState(0);\n const [skipTransition, setSkipTransition] = useState(false);\n\n // Get valid children\n const items = Children.toArray(children).filter(\n isValidElement\n ) as React.ReactElement<CarouselItemProps>[];\n const itemCount = items.length;\n\n // The count in view. The viewport props come widest first, in the order\n // of VIEWPORT_QUERIES, then mobile; each min-width viewport falls back to\n // the narrower ones, and every viewport to `itemsToShow`, the cascade the\n // stylesheet's `--bulma-carousel-items-to-show-*` defaults spell out.\n const counts = [\n itemsToShowFullhd,\n itemsToShowWidescreen,\n itemsToShowDesktop,\n itemsToShowTablet,\n itemsToShowMobile,\n ].map(wholeCount);\n const baseCount = wholeCount(itemsToShow);\n const viewport = useBulmaViewport(counts.some(c => c !== undefined));\n const inView =\n (viewport === MOBILE\n ? counts[MOBILE]\n : viewport >= 0\n ? counts.slice(viewport, MOBILE).find(c => c !== undefined)\n : undefined) ??\n baseCount ??\n 1;\n // The props as the stylesheet reads them, so the widths are right from\n // the first paint, on the server too.\n const countStyle: Record<string, number> = {};\n [...counts, baseCount].forEach((count, i) => {\n if (count !== undefined) {\n countStyle[`--bulma-carousel-items-to-show${COUNT_SUFFIXES[i]}`] =\n count;\n }\n });\n\n const scroll = Math.min(wholeCount(itemsToScroll) ?? 1, inView);\n const looping = repeat && itemCount > inView;\n const lastStart = Math.max(0, itemCount - inView);\n // Where the view can start: every `scroll` items from the first, and\n // without a loop the last full view as well, which is what keeps the\n // end of the track from showing empty space.\n const positions: number[] = [];\n for (let p = 0; p < (looping ? itemCount : lastStart); p += scroll) {\n positions.push(p);\n }\n if (!looping) positions.push(lastStart);\n const lastPosition = positions[positions.length - 1];\n const canMove = positions.length > 1;\n\n const wrap = (index: number) =>\n ((index % itemCount) + itemCount) % itemCount;\n const fit = (index: number) =>\n looping ? wrap(index) : Math.min(Math.max(index, 0), lastStart);\n\n // Use controlled or internal value, as a start the view can show\n const activeIndex = fit(controlledValue ?? internalValue);\n // The indicator for the last position at or before the first item in view\n const activePosition = positions.reduce(\n (found, position, index) => (position <= activeIndex ? index : found),\n 0\n );\n const nextIndex = positions[activePosition + 1];\n // From between two positions, the previous step is the one just behind\n const prevIndex =\n activeIndex > positions[activePosition]\n ? positions[activePosition]\n : positions[activePosition - 1];\n\n // Sync displayIndex when the value changes externally, or when the count\n // in view moves the start it fits to. Intentional external-prop sync that\n // must not run mid-wrap animation; covered by tests and certified\n // in-browser. Uncontrolled, the fitted start becomes the value too, so a\n // later change of count keeps what was first in view in view.\n useEffect(() => {\n if (!isWrapping) {\n // eslint-disable-next-line react-hooks/set-state-in-effect -- syncing to controlled prop\n setDisplayIndex(activeIndex);\n if (controlledValue === undefined) setInternalValue(activeIndex);\n }\n }, [activeIndex, isWrapping, controlledValue]);\n\n // Update active index\n const setActiveIndex = useCallback(\n (index: number) => {\n if (controlledValue === undefined) {\n setInternalValue(index);\n }\n setDisplayIndex(index);\n setIsWrapping(false);\n onChange?.(index);\n },\n [controlledValue, onChange]\n );\n\n // Navigation handlers\n const goToPrev = useCallback(() => {\n if (prevIndex !== undefined) {\n setActiveIndex(prevIndex);\n } else if (looping) {\n // Animate to the clones before the first item, which show the last\n // position, and snap to the real one when the transition ends\n setDisplayIndex(lastPosition - itemCount);\n setIsWrapping(true);\n }\n }, [prevIndex, looping, lastPosition, itemCount, setActiveIndex]);\n\n const goToNext = useCallback(() => {\n if (nextIndex !== undefined) {\n setActiveIndex(nextIndex);\n } else if (looping) {\n // Animate to the clones after the last item, which show the first\n // position, and snap to the real one when the transition ends\n setDisplayIndex(itemCount);\n setIsWrapping(true);\n }\n }, [nextIndex, looping, itemCount, setActiveIndex]);\n\n // Read when the timer fires or an arrow key arrives, so neither the\n // timer nor the key listener starts over while `onChange` changes\n // identity, as an inline one does on every render of the parent.\n const goToPrevRef = useLatestRef(goToPrev);\n const goToNextRef = useLatestRef(goToNext);\n\n // Auto-play. Each slide gets the whole interval, so a slide change,\n // autoplay's own or the user's, starts the timer over. A render that\n // leaves the slide where it is doesn't. It waits while focus is inside\n // an item, so what someone is reading or using doesn't move away. The\n // timer reads where focus is when it fires, rather than trusting the\n // last focus event alone: a browser moving focus off an element that\n // went inert need not fire one, and the pause would never end. A focus\n // change still starts the timer over, so an item gets the whole\n // interval once focus leaves it.\n const isPlaying =\n autoplay && (looping || nextIndex !== undefined) && !isPaused;\n const isRotating = isPlaying && !isFocusInside;\n\n useEffect(() => {\n if (!isPlaying) return undefined;\n\n const timer = setInterval(() => {\n const track = slidesRef.current;\n if (track?.contains(getActiveElementInTree(track))) return;\n if (isFocusInside) setIsFocusInside(false);\n goToNextRef.current();\n }, interval);\n\n return () => clearInterval(timer);\n }, [isPlaying, isFocusInside, interval, activeIndex, goToNextRef]);\n\n // Pause on hover\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 // Drag handlers\n const handleDragStart = useCallback(\n (clientX: number) => {\n if (!hasDrag) return;\n setIsDragging(true);\n setDragStart(clientX);\n setDragOffset(0);\n },\n [hasDrag]\n );\n\n const handleDragMove = useCallback(\n (clientX: number) => {\n if (!isDragging) return;\n setDragOffset(clientX - dragStart);\n },\n [isDragging, dragStart]\n );\n\n const handleDragEnd = useCallback(() => {\n if (!isDragging) return;\n setIsDragging(false);\n\n const threshold = 50;\n if (dragOffset < -threshold) {\n goToNext();\n } else if (dragOffset > threshold) {\n goToPrev();\n }\n\n setDragOffset(0);\n }, [isDragging, dragOffset, goToNext, goToPrev]);\n\n // Mouse events\n const handleMouseDown = useCallback(\n (e: React.MouseEvent) => {\n e.preventDefault();\n handleDragStart(e.clientX);\n },\n [handleDragStart]\n );\n\n const handleMouseMove = useCallback(\n (e: React.MouseEvent) => {\n handleDragMove(e.clientX);\n },\n [handleDragMove]\n );\n\n const handleMouseUp = useCallback(() => {\n handleDragEnd();\n }, [handleDragEnd]);\n\n // Touch events\n const handleTouchStart = useCallback(\n (e: React.TouchEvent) => {\n handleDragStart(e.touches[0].clientX);\n },\n [handleDragStart]\n );\n\n const handleTouchMove = useCallback(\n (e: React.TouchEvent) => {\n handleDragMove(e.touches[0].clientX);\n },\n [handleDragMove]\n );\n\n const handleTouchEnd = useCallback(() => {\n handleDragEnd();\n }, [handleDragEnd]);\n\n // Keyboard navigation, from the carousel's own controls. Inside an item\n // the keys are its content's (a field's caret, a slider), and a step\n // from there could take the focused item out of view.\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n const node = carouselRef.current;\n const active = getActiveElementInTree(node);\n if (!node?.contains(active) || slidesRef.current?.contains(active)) {\n return;\n }\n\n switch (e.key) {\n case 'ArrowLeft':\n e.preventDefault();\n goToPrevRef.current();\n break;\n case 'ArrowRight':\n e.preventDefault();\n goToNextRef.current();\n break;\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n return () => document.removeEventListener('keydown', handleKeyDown);\n }, [goToPrevRef, goToNextRef]);\n\n // Handle wrap-around transition end: the track's own, since an item's\n // content can end a transition of its own that bubbles up to here\n const handleTransitionEnd = useCallback(\n (e: React.TransitionEvent<HTMLDivElement>) => {\n if (isWrapping && e.target === e.currentTarget) {\n // Skip transition for the instant snap from the clones to the\n // real items they copy\n setSkipTransition(true);\n setActiveIndex(((displayIndex % itemCount) + itemCount) % itemCount);\n\n // Re-enable transition after the snap\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n setSkipTransition(false);\n });\n });\n }\n },\n [isWrapping, displayIndex, itemCount, setActiveIndex]\n );\n\n // Combined ref\n const combinedRef = useCallback(\n (node: HTMLDivElement | null) => {\n (carouselRef 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 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 `Toast`.\n // The form controls that merge a forwarded ref still discard the cleanup\n // and detach with `ref(null)`, so this is not yet library-wide — grep\n // `typeof ref === 'function'` for the current split.\n if (node === null) {\n const consumerCleanup = consumerCleanupRef.current;\n consumerCleanupRef.current = null;\n if (consumerCleanup) {\n consumerCleanup();\n } else {\n ref(null);\n }\n return;\n }\n const cleanup: unknown = ref(node);\n consumerCleanupRef.current =\n typeof cleanup === 'function' ? (cleanup as () => void) : null;\n } else if (ref) {\n (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n }\n },\n [ref]\n );\n\n // Can navigate\n const canGoPrev = looping || prevIndex !== undefined;\n const canGoNext = looping || nextIndex !== undefined;\n\n // Generate classes\n const carouselClasses = usePrefixedClassNames('carousel', {\n 'is-overlay': overlayControls,\n 'has-arrow-hover': arrowHover,\n [`is-indicator-${indicatorStyle}`]: indicatorStyle !== 'dots',\n [`is-arrow-${arrowColor}`]: !!arrowColor,\n });\n const classPrefix = useClassPrefix();\n const carouselContainerClass = usePrefixedClassNames('carousel-container');\n const carouselSlidesClass = usePrefixedClassNames('carousel-slides');\n const carouselArrowPrevClass = usePrefixedClassNames(\n 'carousel-arrow',\n 'is-prev',\n { 'is-transparent': !arrowBackground }\n );\n const carouselArrowNextClass = usePrefixedClassNames(\n 'carousel-arrow',\n 'is-next',\n { 'is-transparent': !arrowBackground }\n );\n const carouselIndicatorClass = usePrefixedClassNames('carousel-indicator', {\n 'is-inside': indicatorInside,\n 'is-top': indicatorPosition === 'top',\n });\n\n const combinedClasses = classNames(\n carouselClasses,\n bulmaHelperClasses,\n className\n );\n\n // Where the track is drawn from: mid-wrap the clones, otherwise a start\n // the view can show, so a change in the count in view never paints\n // empty space while the sync above catches up.\n const shownIndex = isWrapping ? displayIndex : fit(displayIndex);\n // Enough clones on each side to fill the widest view any viewport sets,\n // since the stylesheet, not this count, sizes what's on screen\n const cloneCount = looping\n ? Math.min(\n itemCount,\n Math.max(baseCount ?? 1, ...counts.map(c => c ?? 1))\n )\n : 0;\n // The track: a full view's worth of clones of the last items, the items,\n // and clones of the first ones, for a seamless loop. Each entry is the\n // item it shows and its key.\n const slots: [number, React.Key][] = items.map((_, index) => [\n index,\n index,\n ]);\n for (let k = 0; k < cloneCount; k++) {\n slots.splice(k, 0, [itemCount - cloneCount + k, `clone-before-${k}`]);\n slots.push([k, `clone-after-${k}`]);\n }\n\n // Render slides with active state (includes clones for infinite loop).\n // What's in view is a run of slots, so where a looping view runs past\n // the last item, the clones on screen are the live copies and the items\n // they copy, off screen, are the hidden ones: no item is exposed twice,\n // and the copy exposed is the one in view.\n const renderSlides = () =>\n slots.map(([index, key], slot) => {\n const item = items[index];\n const own = item.props;\n const isShown =\n slot >= shownIndex + cloneCount &&\n slot < shownIndex + cloneCount + inView;\n return cloneElement(item, {\n key,\n active: isShown,\n role: own.role ?? 'group',\n 'aria-roledescription': own['aria-roledescription'] ?? 'slide',\n ...(own['aria-label'] || own['aria-labelledby']\n ? {}\n : { 'aria-label': `${index + 1} of ${itemCount}` }),\n // Out of view: hidden from assistive tech, and inert, so nothing\n // in it takes focus or a click\n ...(isShown ? {} : { 'aria-hidden': true, ...inertProps(true) }),\n });\n });\n\n // Hand focus on when the item holding it leaves the view. An item out\n // of view is inert, and a browser drops focus from an inert element to\n // the page, so a swipe, a change of count with the window's width, a new\n // controlled value or the item's removal would leave a keyboard or\n // screen reader user nowhere. Focus goes to the first item in view,\n // given `tabindex=\"-1\"` for it unless it has a tabindex of its own. A\n // layout effect runs before the browser gets to drop the focus; the\n // focused item's removal drops it at once, so focus on the page itself\n // still counts as the item's.\n useClientLayoutEffect(() => {\n const held = focusedItemRef.current;\n if (!held) return;\n const track = slidesRef.current as HTMLDivElement;\n const start = shownIndex + cloneCount;\n const slot = Array.prototype.indexOf.call(track.children, held);\n if (slot >= start && slot < start + inView) return;\n const active = getActiveElementInTree(track);\n if (active !== held.ownerDocument.body && !held.contains(active)) {\n return;\n }\n focusedItemRef.current = undefined;\n const first = track.children[start] as HTMLElement | undefined;\n if (!first) return;\n if (!first.hasAttribute('tabindex')) first.tabIndex = -1;\n first.focus({ preventScroll: true });\n }, [shownIndex, cloneCount, inView, itemCount]);\n\n return (\n <div\n ref={combinedRef}\n className={combinedClasses}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n role=\"region\"\n aria-roledescription=\"carousel\"\n aria-label={ariaLabel}\n style={{ ...countStyle, ...style }}\n {...rest}\n >\n <div\n ref={containerRef}\n className={carouselContainerClass}\n onMouseDown={hasDrag ? handleMouseDown : undefined}\n onMouseMove={hasDrag && isDragging ? handleMouseMove : undefined}\n onMouseUp={hasDrag ? handleMouseUp : undefined}\n onMouseLeave={hasDrag ? handleMouseUp : undefined}\n onTouchStart={hasDrag ? handleTouchStart : undefined}\n onTouchMove={hasDrag ? handleTouchMove : undefined}\n onTouchEnd={hasDrag ? handleTouchEnd : undefined}\n style={{\n transform: isDragging ? `translateX(${dragOffset}px)` : undefined,\n cursor: hasDrag ? (isDragging ? 'grabbing' : 'grab') : undefined,\n }}\n >\n <div\n ref={slidesRef}\n className={carouselSlidesClass}\n style={{\n // One item is the track's width plus a gap, over the count the\n // stylesheet has in view; account for the prepended clones\n transform: `translateX(calc(${-(shownIndex + cloneCount)} * (100% + var(--bulma-carousel-item-gap, 0px)) / var(--bulma-carousel-items-in-view, 1)))`,\n // Disable transition during drag or instant snap after wrap-around\n transition:\n isDragging || skipTransition\n ? 'none'\n : 'transform 0.3s ease-in-out',\n }}\n // Announce what comes into view, except while autoplay turns it\n aria-live={isRotating ? 'off' : 'polite'}\n onFocus={e => {\n setIsFocusInside(true);\n focusedItemRef.current = Array.from(\n e.currentTarget.children\n ).find(item => item.contains(e.target));\n }}\n onBlur={e => {\n const inside = e.currentTarget.contains(e.relatedTarget);\n setIsFocusInside(inside);\n if (!inside) focusedItemRef.current = undefined;\n }}\n onTransitionEnd={handleTransitionEnd}\n >\n {renderSlides()}\n </div>\n {arrow && canMove && (\n <>\n <Button\n type=\"button\"\n className={carouselArrowPrevClass}\n onClick={goToPrev}\n isDisabled={!canGoPrev}\n aria-label=\"Previous slide\"\n >\n {iconPrev ? (\n <Icon\n name={iconPrev}\n library={iconLibrary}\n variant={iconVariant}\n size={iconSize}\n features={iconFeatures}\n />\n ) : (\n <DefaultPrevIcon />\n )}\n </Button>\n <Button\n type=\"button\"\n className={carouselArrowNextClass}\n onClick={goToNext}\n isDisabled={!canGoNext}\n aria-label=\"Next slide\"\n >\n {iconNext ? (\n <Icon\n name={iconNext}\n library={iconLibrary}\n variant={iconVariant}\n size={iconSize}\n features={iconFeatures}\n />\n ) : (\n <DefaultNextIcon />\n )}\n </Button>\n </>\n )}\n </div>\n\n {indicator && canMove && (\n <div className={carouselIndicatorClass} role=\"tablist\">\n {positions.map((position, index) => (\n <Button\n key={position}\n type=\"button\"\n className={prefixedClassNames(classPrefix, 'indicator-item', {\n 'is-active': index === activePosition,\n })}\n onClick={() => setActiveIndex(position)}\n role=\"tab\"\n aria-selected={index === activePosition}\n aria-label={`Go to slide ${position + 1}`}\n />\n ))}\n </div>\n )}\n </div>\n );\n }\n);\n\nCarousel.displayName = 'Carousel';\n\nexport default Carousel;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
|
|
2
|
+
'use client';
|
|
2
3
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
3
4
|
import { useRef, useContext, useState, useId, useEffect, useCallback } from 'react';
|
|
4
5
|
import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Collapse.js","sources":["../../../src/components/Collapse.tsx"],"sourcesContent":["import React, {\n useState,\n useRef,\n useEffect,\n useCallback,\n useContext,\n useId,\n} from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { warnOnce } from '../helpers/devWarnings';\nimport { inertProps } from '../helpers/inertProps';\nimport { CollapsesItemContext } from './collapsesContext';\n\n/**\n * Props for the Collapse component.\n * @extraProp {React.ReactNode} [children] - The collapsible content.\n * @extraProp {string} [className] - Additional CSS classes.\n */\nexport interface CollapseProps\n extends\n Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n /**\n * Controlled open state. If provided, component is controlled, and the\n * trigger only reports through `onOpenChange`. Inside a `Collapses` group, a\n * Collapse that sets `open` stays yours: the group neither overrides it nor\n * closes it when another item opens.\n */\n open?: boolean;\n /** Initial open state for uncontrolled usage. Ignored inside a `Collapses` group, whose `defaultValue` decides. */\n defaultOpen?: boolean;\n /** Called when the trigger opens the Collapse. Fires only while the Collapse keeps its own state: not when `open` is set, and not when a `Collapses` group manages it. `onOpenChange` reports in every mode. */\n onOpen?: () => void;\n /** Called when the trigger closes the Collapse. Fires only while the Collapse keeps its own state: not when `open` is set, and not when a `Collapses` group manages it. `onOpenChange` reports in every mode. */\n onClose?: () => void;\n /** Called with the state the trigger asks for (`true` to open) each time it is clicked or activated with Enter or Space, in every mode. Pair it with `open` to let the trigger drive a controlled Collapse. */\n onOpenChange?: (open: boolean) => void;\n /** The clickable trigger element (header/button). */\n trigger?: React.ReactNode;\n /** Animation style, or `false` to disable. */\n animation?: 'fade' | 'slide' | false;\n /** Position of the trigger relative to content. */\n position?: 'top' | 'bottom';\n /**\n * Custom aria id for accessibility.\n * @defaultValue auto\n */\n ariaId?: string;\n /** Adds a border around the collapse. */\n bordered?: boolean;\n /** Additional classes for the trigger wrapper. */\n triggerClassName?: string;\n /** Additional classes for the content wrapper. */\n contentClassName?: string;\n}\n\n/**\n * The `Collapse` component provides an expandable/collapsible content panel.\n *\n * @function\n * @param {CollapseProps} props - Props for the Collapse component.\n * @returns {JSX.Element} The rendered collapse component.\n *\n * @example\n * // Basic uncontrolled collapse\n * <Collapse trigger={<button>Click to toggle</button>}>\n * <p>Collapsible content here</p>\n * </Collapse>\n *\n * @example\n * // Controlled collapse, driven by its own trigger\n * const [isOpen, setIsOpen] = useState(false);\n * <Collapse open={isOpen} onOpenChange={setIsOpen} trigger={<strong>Toggle</strong>}>\n * <p>Content</p>\n * </Collapse>\n *\n * @example\n * // With callbacks\n * <Collapse\n * trigger={<button>Toggle</button>}\n * onOpen={() => console.log('Opened!')}\n * onClose={() => console.log('Closed!')}\n * >\n * <p>Content</p>\n * </Collapse>\n */\nexport const Collapse: React.FC<CollapseProps> = ({\n open: controlledOpen,\n defaultOpen = false,\n onOpen,\n onClose,\n onOpenChange,\n trigger,\n animation = 'fade',\n position = 'top',\n ariaId,\n bordered,\n children,\n className,\n triggerClassName,\n contentClassName,\n ...props\n}) => {\n const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n const contentRef = useRef<HTMLDivElement>(null);\n\n // Three possible owners of the open state, in order: the caller when `open`\n // is set, an enclosing Collapses group, and this Collapse itself. A caller's\n // `open` wins over the group, which is how the group leaves such an item\n // alone.\n const isControlled = controlledOpen !== undefined;\n const group = useContext(CollapsesItemContext);\n const groupItem = isControlled ? null : group;\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const isOpen = controlledOpen ?? groupItem?.open ?? internalOpen;\n\n // A group owns the state of the items it manages, so these props do\n // nothing there. That is easy to miss, so development says which ones and\n // what to use instead, once per combination (the way Avatar keys its\n // warning), and `warnOnce` keeps production silent.\n if (groupItem) {\n const ignored = [\n defaultOpen && 'defaultOpen',\n onOpen && 'onOpen',\n onClose && 'onClose',\n ].filter((name): name is string => Boolean(name));\n if (ignored.length > 0) {\n const callbacks = ignored.filter(name => name !== 'defaultOpen');\n warnOnce(\n `Collapse:ignored-in-Collapses:${ignored.join('+')}`,\n `[bestax-bulma] <Collapse ${ignored.join(' ')}> inside <Collapses>: ` +\n [\n ignored.includes('defaultOpen') &&\n `defaultOpen has no effect, because the group decides which ` +\n `items start open. Pass the item's index in the group's ` +\n `defaultValue instead.`,\n callbacks.length > 0 &&\n `${callbacks.join(' and ')} never fire${callbacks.length > 1 ? '' : 's'}, ` +\n `because the group holds the item's open state. Use the ` +\n `item's onOpenChange, or the group's onChange, instead.`,\n ]\n .filter(Boolean)\n .join(' ')\n );\n }\n }\n\n // Start from the resolved state rather than `defaultOpen`, so an item that\n // mounts open through `open` or a group is not first painted (or rendered\n // on the server) at height 0 under the slide animation.\n const [height, setHeight] = useState<number | 'auto'>(isOpen ? 'auto' : 0);\n\n // Generate unique ID for accessibility (useId is SSR-safe and stable across\n // renders; works in React 18 and 19).\n const generatedId = useId();\n const uniqueId = ariaId || generatedId;\n\n // Update height when open state changes (for 'slide' animation)\n useEffect(() => {\n if (!contentRef.current) return undefined;\n if (animation !== 'slide') return undefined;\n\n if (isOpen) {\n // Opening: set height to content's scrollHeight\n const contentHeight = contentRef.current.scrollHeight;\n setHeight(contentHeight);\n\n // After animation completes, set to auto for dynamic content\n const timer = setTimeout(() => {\n setHeight('auto');\n }, 300); // Match CSS transition duration\n return () => clearTimeout(timer);\n } else {\n // Closing: first set to current height, then to 0\n if (height === 'auto') {\n // Read scrollHeight and offsetHeight to capture the current size and\n // force a layout flush, then schedule the height transition to 0.\n // (Reading offsetHeight after assignment is the standard reflow trick;\n // assigning into a state setter avoids a bare expression statement.)\n const currentHeight = contentRef.current.scrollHeight;\n const reflowHeight = contentRef.current.offsetHeight;\n setHeight(Math.max(currentHeight, reflowHeight));\n requestAnimationFrame(() => {\n setHeight(0);\n });\n } else {\n setHeight(0);\n }\n }\n return undefined;\n // `height` is read here but is an output of this effect; re-running when it\n // changes would re-trigger the open/close animation, so it's intentionally\n // excluded from the deps.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isOpen, animation]);\n\n // The trigger reports in every mode, then changes only the state this\n // Collapse owns. `onOpen`/`onClose` belong to that last case alone.\n const handleToggle = useCallback(() => {\n const next = !isOpen;\n onOpenChange?.(next);\n if (isControlled) return;\n if (groupItem) {\n groupItem.setOpen(next);\n return;\n }\n setInternalOpen(next);\n if (next) {\n onOpen?.();\n } else {\n onClose?.();\n }\n }, [isOpen, isControlled, groupItem, onOpenChange, onOpen, onClose]);\n\n // Handle keyboard interaction\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n handleToggle();\n }\n },\n [handleToggle]\n );\n\n // Generate Bulma classes\n const collapseClasses = usePrefixedClassNames('collapse', {\n 'is-active': isOpen,\n 'is-bordered': bordered,\n });\n\n const combinedClasses = classNames(\n collapseClasses,\n bulmaHelperClasses,\n className\n );\n const combinedTriggerClasses = classNames(\n usePrefixedClassNames('collapse-trigger'),\n triggerClassName\n );\n const combinedContentClasses = classNames(\n usePrefixedClassNames('collapse-content', {\n 'is-active': isOpen,\n }),\n contentClassName\n );\n\n // Content wrapper styles based on animation type\n let contentWrapperStyle: React.CSSProperties;\n\n if (animation === 'slide') {\n contentWrapperStyle = {\n height: height === 'auto' ? 'auto' : `${height}px`,\n overflow: 'hidden',\n transition: 'height 0.3s ease-in-out',\n };\n } else if (animation === 'fade') {\n contentWrapperStyle = {\n opacity: isOpen ? 1 : 0,\n overflow: 'hidden',\n height: isOpen ? 'auto' : 0,\n transition: 'opacity 0.3s ease-in-out',\n };\n } else {\n contentWrapperStyle = {\n display: isOpen ? 'block' : 'none',\n };\n }\n\n const triggerElement = (\n <div\n className={combinedTriggerClasses}\n onClick={handleToggle}\n onKeyDown={handleKeyDown}\n role=\"button\"\n tabIndex={0}\n aria-expanded={isOpen}\n aria-controls={uniqueId}\n >\n {trigger}\n </div>\n );\n\n const contentElement = (\n <div style={contentWrapperStyle}>\n {/* A closed panel under `fade` or `slide` is only squeezed to height 0,\n so its links and fields would stay in the tab order. `inert` takes\n them out (and from pointer and find-in-page), matching\n `aria-hidden`, and costs the animations nothing. */}\n <div\n ref={contentRef}\n id={uniqueId}\n className={combinedContentClasses}\n aria-hidden={!isOpen}\n {...inertProps(!isOpen)}\n >\n {children}\n </div>\n </div>\n );\n\n // The group's item context stops here: a Collapse nested in this one's\n // content is not an item of this one's group.\n return (\n <CollapsesItemContext.Provider value={null}>\n <div className={combinedClasses} {...rest}>\n {position === 'bottom' ? (\n <>\n {contentElement}\n {triggerElement}\n </>\n ) : (\n <>\n {triggerElement}\n {contentElement}\n </>\n )}\n </div>\n </CollapsesItemContext.Provider>\n );\n};\n\nexport default Collapse;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Collapse.js","sources":["../../../src/components/Collapse.tsx"],"sourcesContent":["import React, {\n useState,\n useRef,\n useEffect,\n useCallback,\n useContext,\n useId,\n} from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { warnOnce } from '../helpers/devWarnings';\nimport { inertProps } from '../helpers/inertProps';\nimport { CollapsesItemContext } from './collapsesContext';\n\n/**\n * Props for the Collapse component.\n * @extraProp {React.ReactNode} [children] - The collapsible content.\n * @extraProp {string} [className] - Additional CSS classes.\n */\nexport interface CollapseProps\n extends\n Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n /**\n * Controlled open state. If provided, component is controlled, and the\n * trigger only reports through `onOpenChange`. Inside a `Collapses` group, a\n * Collapse that sets `open` stays yours: the group neither overrides it nor\n * closes it when another item opens.\n */\n open?: boolean;\n /** Initial open state for uncontrolled usage. Ignored inside a `Collapses` group, whose `defaultValue` decides. */\n defaultOpen?: boolean;\n /** Called when the trigger opens the Collapse. Fires only while the Collapse keeps its own state: not when `open` is set, and not when a `Collapses` group manages it. `onOpenChange` reports in every mode. */\n onOpen?: () => void;\n /** Called when the trigger closes the Collapse. Fires only while the Collapse keeps its own state: not when `open` is set, and not when a `Collapses` group manages it. `onOpenChange` reports in every mode. */\n onClose?: () => void;\n /** Called with the state the trigger asks for (`true` to open) each time it is clicked or activated with Enter or Space, in every mode. Pair it with `open` to let the trigger drive a controlled Collapse. */\n onOpenChange?: (open: boolean) => void;\n /** The clickable trigger element (header/button). */\n trigger?: React.ReactNode;\n /** Animation style, or `false` to disable. */\n animation?: 'fade' | 'slide' | false;\n /** Position of the trigger relative to content. */\n position?: 'top' | 'bottom';\n /**\n * Custom aria id for accessibility.\n * @defaultValue auto\n */\n ariaId?: string;\n /** Adds a border around the collapse. */\n bordered?: boolean;\n /** Additional classes for the trigger wrapper. */\n triggerClassName?: string;\n /** Additional classes for the content wrapper. */\n contentClassName?: string;\n}\n\n/**\n * The `Collapse` component provides an expandable/collapsible content panel.\n *\n * @function\n * @param {CollapseProps} props - Props for the Collapse component.\n * @returns {JSX.Element} The rendered collapse component.\n *\n * @example\n * // Basic uncontrolled collapse\n * <Collapse trigger={<button>Click to toggle</button>}>\n * <p>Collapsible content here</p>\n * </Collapse>\n *\n * @example\n * // Controlled collapse, driven by its own trigger\n * const [isOpen, setIsOpen] = useState(false);\n * <Collapse open={isOpen} onOpenChange={setIsOpen} trigger={<strong>Toggle</strong>}>\n * <p>Content</p>\n * </Collapse>\n *\n * @example\n * // With callbacks\n * <Collapse\n * trigger={<button>Toggle</button>}\n * onOpen={() => console.log('Opened!')}\n * onClose={() => console.log('Closed!')}\n * >\n * <p>Content</p>\n * </Collapse>\n */\nexport const Collapse: React.FC<CollapseProps> = ({\n open: controlledOpen,\n defaultOpen = false,\n onOpen,\n onClose,\n onOpenChange,\n trigger,\n animation = 'fade',\n position = 'top',\n ariaId,\n bordered,\n children,\n className,\n triggerClassName,\n contentClassName,\n ...props\n}) => {\n const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n const contentRef = useRef<HTMLDivElement>(null);\n\n // Three possible owners of the open state, in order: the caller when `open`\n // is set, an enclosing Collapses group, and this Collapse itself. A caller's\n // `open` wins over the group, which is how the group leaves such an item\n // alone.\n const isControlled = controlledOpen !== undefined;\n const group = useContext(CollapsesItemContext);\n const groupItem = isControlled ? null : group;\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const isOpen = controlledOpen ?? groupItem?.open ?? internalOpen;\n\n // A group owns the state of the items it manages, so these props do\n // nothing there. That is easy to miss, so development says which ones and\n // what to use instead, once per combination (the way Avatar keys its\n // warning), and `warnOnce` keeps production silent.\n if (groupItem) {\n const ignored = [\n defaultOpen && 'defaultOpen',\n onOpen && 'onOpen',\n onClose && 'onClose',\n ].filter((name): name is string => Boolean(name));\n if (ignored.length > 0) {\n const callbacks = ignored.filter(name => name !== 'defaultOpen');\n warnOnce(\n `Collapse:ignored-in-Collapses:${ignored.join('+')}`,\n `[bestax-bulma] <Collapse ${ignored.join(' ')}> inside <Collapses>: ` +\n [\n ignored.includes('defaultOpen') &&\n `defaultOpen has no effect, because the group decides which ` +\n `items start open. Pass the item's index in the group's ` +\n `defaultValue instead.`,\n callbacks.length > 0 &&\n `${callbacks.join(' and ')} never fire${callbacks.length > 1 ? '' : 's'}, ` +\n `because the group holds the item's open state. Use the ` +\n `item's onOpenChange, or the group's onChange, instead.`,\n ]\n .filter(Boolean)\n .join(' ')\n );\n }\n }\n\n // Start from the resolved state rather than `defaultOpen`, so an item that\n // mounts open through `open` or a group is not first painted (or rendered\n // on the server) at height 0 under the slide animation.\n const [height, setHeight] = useState<number | 'auto'>(isOpen ? 'auto' : 0);\n\n // Generate unique ID for accessibility (useId is SSR-safe and stable across\n // renders; works in React 18 and 19).\n const generatedId = useId();\n const uniqueId = ariaId || generatedId;\n\n // Update height when open state changes (for 'slide' animation)\n useEffect(() => {\n if (!contentRef.current) return undefined;\n if (animation !== 'slide') return undefined;\n\n if (isOpen) {\n // Opening: set height to content's scrollHeight\n const contentHeight = contentRef.current.scrollHeight;\n setHeight(contentHeight);\n\n // After animation completes, set to auto for dynamic content\n const timer = setTimeout(() => {\n setHeight('auto');\n }, 300); // Match CSS transition duration\n return () => clearTimeout(timer);\n } else {\n // Closing: first set to current height, then to 0\n if (height === 'auto') {\n // Read scrollHeight and offsetHeight to capture the current size and\n // force a layout flush, then schedule the height transition to 0.\n // (Reading offsetHeight after assignment is the standard reflow trick;\n // assigning into a state setter avoids a bare expression statement.)\n const currentHeight = contentRef.current.scrollHeight;\n const reflowHeight = contentRef.current.offsetHeight;\n setHeight(Math.max(currentHeight, reflowHeight));\n requestAnimationFrame(() => {\n setHeight(0);\n });\n } else {\n setHeight(0);\n }\n }\n return undefined;\n // `height` is read here but is an output of this effect; re-running when it\n // changes would re-trigger the open/close animation, so it's intentionally\n // excluded from the deps.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isOpen, animation]);\n\n // The trigger reports in every mode, then changes only the state this\n // Collapse owns. `onOpen`/`onClose` belong to that last case alone.\n const handleToggle = useCallback(() => {\n const next = !isOpen;\n onOpenChange?.(next);\n if (isControlled) return;\n if (groupItem) {\n groupItem.setOpen(next);\n return;\n }\n setInternalOpen(next);\n if (next) {\n onOpen?.();\n } else {\n onClose?.();\n }\n }, [isOpen, isControlled, groupItem, onOpenChange, onOpen, onClose]);\n\n // Handle keyboard interaction\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n handleToggle();\n }\n },\n [handleToggle]\n );\n\n // Generate Bulma classes\n const collapseClasses = usePrefixedClassNames('collapse', {\n 'is-active': isOpen,\n 'is-bordered': bordered,\n });\n\n const combinedClasses = classNames(\n collapseClasses,\n bulmaHelperClasses,\n className\n );\n const combinedTriggerClasses = classNames(\n usePrefixedClassNames('collapse-trigger'),\n triggerClassName\n );\n const combinedContentClasses = classNames(\n usePrefixedClassNames('collapse-content', {\n 'is-active': isOpen,\n }),\n contentClassName\n );\n\n // Content wrapper styles based on animation type\n let contentWrapperStyle: React.CSSProperties;\n\n if (animation === 'slide') {\n contentWrapperStyle = {\n height: height === 'auto' ? 'auto' : `${height}px`,\n overflow: 'hidden',\n transition: 'height 0.3s ease-in-out',\n };\n } else if (animation === 'fade') {\n contentWrapperStyle = {\n opacity: isOpen ? 1 : 0,\n overflow: 'hidden',\n height: isOpen ? 'auto' : 0,\n transition: 'opacity 0.3s ease-in-out',\n };\n } else {\n contentWrapperStyle = {\n display: isOpen ? 'block' : 'none',\n };\n }\n\n const triggerElement = (\n <div\n className={combinedTriggerClasses}\n onClick={handleToggle}\n onKeyDown={handleKeyDown}\n role=\"button\"\n tabIndex={0}\n aria-expanded={isOpen}\n aria-controls={uniqueId}\n >\n {trigger}\n </div>\n );\n\n const contentElement = (\n <div style={contentWrapperStyle}>\n {/* A closed panel under `fade` or `slide` is only squeezed to height 0,\n so its links and fields would stay in the tab order. `inert` takes\n them out (and from pointer and find-in-page), matching\n `aria-hidden`, and costs the animations nothing. */}\n <div\n ref={contentRef}\n id={uniqueId}\n className={combinedContentClasses}\n aria-hidden={!isOpen}\n {...inertProps(!isOpen)}\n >\n {children}\n </div>\n </div>\n );\n\n // The group's item context stops here: a Collapse nested in this one's\n // content is not an item of this one's group.\n return (\n <CollapsesItemContext.Provider value={null}>\n <div className={combinedClasses} {...rest}>\n {position === 'bottom' ? (\n <>\n {contentElement}\n {triggerElement}\n </>\n ) : (\n <>\n {triggerElement}\n {contentElement}\n </>\n )}\n </div>\n </CollapsesItemContext.Provider>\n );\n};\n\nexport default Collapse;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;;;;AAyDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BG;MACU,QAAQ,GAA4B,CAAC,EAChD,IAAI,EAAE,cAAc,EACpB,WAAW,GAAG,KAAK,EACnB,MAAM,EACN,OAAO,EACP,YAAY,EACZ,OAAO,EACP,SAAS,GAAG,MAAM,EAClB,QAAQ,GAAG,KAAK,EAChB,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,GAAG,KAAK,EACT,KAAI;IACH,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC,KAAK,CAAC;AAC3D,IAAA,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC;;;;;AAM/C,IAAA,MAAM,YAAY,GAAG,cAAc,KAAK,SAAS;AACjD,IAAA,MAAM,KAAK,GAAG,UAAU,CAAC,oBAAoB,CAAC;IAC9C,MAAM,SAAS,GAAG,YAAY,GAAG,IAAI,GAAG,KAAK;IAC7C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC;IAC7D,MAAM,MAAM,GAAG,cAAc,IAAI,SAAS,EAAE,IAAI,IAAI,YAAY;;;;;IAMhE,IAAI,SAAS,EAAE;AACb,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,WAAW,IAAI,aAAa;AAC5B,YAAA,MAAM,IAAI,QAAQ;AAClB,YAAA,OAAO,IAAI,SAAS;AACrB,SAAA,CAAC,MAAM,CAAC,CAAC,IAAI,KAAqB,OAAO,CAAC,IAAI,CAAC,CAAC;AACjD,QAAA,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;AACtB,YAAA,MAAM,SAAS,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,KAAK,aAAa,CAAC;AAChE,YAAA,QAAQ,CACN,CAAA,8BAAA,EAAiC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA,CAAE,EACpD,4BAA4B,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA,sBAAA,CAAwB;AACnE,gBAAA;AACE,oBAAA,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAC;wBAC7B,CAAA,2DAAA,CAA6D;4BAC3D,CAAA,uDAAA,CAAyD;4BACzD,CAAA,qBAAA,CAAuB;oBAC3B,SAAS,CAAC,MAAM,GAAG,CAAC;wBAClB,CAAA,EAAG,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA,WAAA,EAAc,SAAS,CAAC,MAAM,GAAG,CAAC,GAAG,EAAE,GAAG,GAAG,CAAA,EAAA,CAAI;4BACzE,CAAA,uDAAA,CAAyD;4BACzD,CAAA,sDAAA,CAAwD;AAC7D;qBACE,MAAM,CAAC,OAAO;AACd,qBAAA,IAAI,CAAC,GAAG,CAAC,CACf;QACH;IACF;;;;AAKA,IAAA,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAkB,MAAM,GAAG,MAAM,GAAG,CAAC,CAAC;;;AAI1E,IAAA,MAAM,WAAW,GAAG,KAAK,EAAE;AAC3B,IAAA,MAAM,QAAQ,GAAG,MAAM,IAAI,WAAW;;IAGtC,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,UAAU,CAAC,OAAO;AAAE,YAAA,OAAO,SAAS;QACzC,IAAI,SAAS,KAAK,OAAO;AAAE,YAAA,OAAO,SAAS;QAE3C,IAAI,MAAM,EAAE;;AAEV,YAAA,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,CAAC,YAAY;YACrD,SAAS,CAAC,aAAa,CAAC;;AAGxB,YAAA,MAAM,KAAK,GAAG,UAAU,CAAC,MAAK;gBAC5B,SAAS,CAAC,MAAM,CAAC;AACnB,YAAA,CAAC,EAAE,GAAG,CAAC,CAAC;AACR,YAAA,OAAO,MAAM,YAAY,CAAC,KAAK,CAAC;QAClC;aAAO;;AAEL,YAAA,IAAI,MAAM,KAAK,MAAM,EAAE;;;;;AAKrB,gBAAA,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,CAAC,YAAY;AACrD,gBAAA,MAAM,YAAY,GAAG,UAAU,CAAC,OAAO,CAAC,YAAY;gBACpD,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,YAAY,CAAC,CAAC;gBAChD,qBAAqB,CAAC,MAAK;oBACzB,SAAS,CAAC,CAAC,CAAC;AACd,gBAAA,CAAC,CAAC;YACJ;iBAAO;gBACL,SAAS,CAAC,CAAC,CAAC;YACd;QACF;AACA,QAAA,OAAO,SAAS;;;;;AAKlB,IAAA,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;;;AAIvB,IAAA,MAAM,YAAY,GAAG,WAAW,CAAC,MAAK;AACpC,QAAA,MAAM,IAAI,GAAG,CAAC,MAAM;AACpB,QAAA,YAAY,GAAG,IAAI,CAAC;AACpB,QAAA,IAAI,YAAY;YAAE;QAClB,IAAI,SAAS,EAAE;AACb,YAAA,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;YACvB;QACF;QACA,eAAe,CAAC,IAAI,CAAC;QACrB,IAAI,IAAI,EAAE;YACR,MAAM,IAAI;QACZ;aAAO;YACL,OAAO,IAAI;QACb;AACF,IAAA,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;;AAGpE,IAAA,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,CAAsB,KAAI;AACzB,QAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;YACtC,CAAC,CAAC,cAAc,EAAE;AAClB,YAAA,YAAY,EAAE;QAChB;AACF,IAAA,CAAC,EACD,CAAC,YAAY,CAAC,CACf;;AAGD,IAAA,MAAM,eAAe,GAAG,qBAAqB,CAAC,UAAU,EAAE;AACxD,QAAA,WAAW,EAAE,MAAM;AACnB,QAAA,aAAa,EAAE,QAAQ;AACxB,KAAA,CAAC;IAEF,MAAM,eAAe,GAAG,UAAU,CAChC,eAAe,EACf,kBAAkB,EAClB,SAAS,CACV;IACD,MAAM,sBAAsB,GAAG,UAAU,CACvC,qBAAqB,CAAC,kBAAkB,CAAC,EACzC,gBAAgB,CACjB;AACD,IAAA,MAAM,sBAAsB,GAAG,UAAU,CACvC,qBAAqB,CAAC,kBAAkB,EAAE;AACxC,QAAA,WAAW,EAAE,MAAM;KACpB,CAAC,EACF,gBAAgB,CACjB;;AAGD,IAAA,IAAI,mBAAwC;AAE5C,IAAA,IAAI,SAAS,KAAK,OAAO,EAAE;AACzB,QAAA,mBAAmB,GAAG;AACpB,YAAA,MAAM,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,EAAA,CAAI;AAClD,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,UAAU,EAAE,yBAAyB;SACtC;IACH;AAAO,SAAA,IAAI,SAAS,KAAK,MAAM,EAAE;AAC/B,QAAA,mBAAmB,GAAG;YACpB,OAAO,EAAE,MAAM,GAAG,CAAC,GAAG,CAAC;AACvB,YAAA,QAAQ,EAAE,QAAQ;YAClB,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC;AAC3B,YAAA,UAAU,EAAE,0BAA0B;SACvC;IACH;SAAO;AACL,QAAA,mBAAmB,GAAG;YACpB,OAAO,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM;SACnC;IACH;AAEA,IAAA,MAAM,cAAc,IAClBA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,sBAAsB,EACjC,OAAO,EAAE,YAAY,EACrB,SAAS,EAAE,aAAa,EACxB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EAAA,eAAA,EACI,MAAM,EAAA,eAAA,EACN,QAAQ,EAAA,QAAA,EAEtB,OAAO,EAAA,CACJ,CACP;AAED,IAAA,MAAM,cAAc,IAClBA,GAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,mBAAmB,EAAA,QAAA,EAK7BA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,UAAU,EACf,EAAE,EAAE,QAAQ,EACZ,SAAS,EAAE,sBAAsB,EAAA,aAAA,EACpB,CAAC,MAAM,KAChB,UAAU,CAAC,CAAC,MAAM,CAAC,EAAA,QAAA,EAEtB,QAAQ,EAAA,CACL,EAAA,CACF,CACP;;;AAID,IAAA,QACEA,GAAA,CAAC,oBAAoB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,IAAI,YACxCA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,eAAe,EAAA,GAAM,IAAI,EAAA,QAAA,EACtC,QAAQ,KAAK,QAAQ,IACpBC,4BACG,cAAc,EACd,cAAc,CAAA,EAAA,CACd,KAEHA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACG,cAAc,EACd,cAAc,CAAA,EAAA,CACd,CACJ,EAAA,CACG,EAAA,CACwB;AAEpC;;"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
|
|
2
|
+
'use client';
|
|
2
3
|
import { jsx } from 'react/jsx-runtime';
|
|
3
4
|
import React, { useState } from 'react';
|
|
4
5
|
import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Collapses.js","sources":["../../../src/components/Collapses.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { Collapse } from './Collapse';\nimport { CollapsesItemContext } from './collapsesContext';\nimport { flattenChildren } from '../helpers/flattenChildren';\n\n/**\n * Props shared by both modes of the Collapses component.\n */\ninterface CollapsesBaseProps\n extends\n Omit<\n React.HTMLAttributes<HTMLDivElement>,\n 'color' | 'defaultValue' | 'onChange'\n >,\n Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n /** Joins the items into one block, with no gap between them and only the outer corners rounded. The joins show on `bordered` items. */\n seamless?: boolean;\n /** Additional CSS classes to apply. */\n className?: string;\n /** The `Collapse` items. Each child element is one item, indexed from 0 in order, with the children of a fragment counted one by one. A child that sets its own `open` keeps it: the group leaves that item alone. */\n children?: React.ReactNode;\n}\n\n/**\n * Props for Collapses in single mode, the accordion: opening one item closes the others.\n */\nexport interface CollapsesSingleProps extends CollapsesBaseProps {\n /**\n * Lets items open independently. Without it, opening one item closes the others.\n * @defaultValue false\n */\n multiple?: false;\n /** Controlled open items: the index of the open item, or `null` for none. With `multiple`, an array of indexes. An index is a position among the children, so rendering an item conditionally or reordering them moves the open state onto a neighbour: render every item and hide one with `visibility=\"hidden\"`, or keep `value` in step yourself. */\n value?: number | null;\n /** Open items for uncontrolled use, as an index or `null` (the default, none open). With `multiple`, an array of indexes, empty by default. Indexes are positions among the children, as for `value`. */\n defaultValue?: number | null;\n /** Called with the new open items each time a trigger asks for a change, whether or not `value` is set: an index or `null`, or with `multiple` an array of indexes in ascending order. Indexes are positions among the children, as for `value`. */\n onChange?: (value: number | null) => void;\n}\n\n/**\n * Props for Collapses with `multiple`: items open and close independently.\n */\nexport interface CollapsesMultipleProps extends CollapsesBaseProps {\n /**\n * Lets items open independently. Without it, opening one item closes the others.\n * @defaultValue false\n */\n multiple: true;\n /** Controlled open items: the index of the open item, or `null` for none. With `multiple`, an array of indexes. An index is a position among the children, so rendering an item conditionally or reordering them moves the open state onto a neighbour: render every item and hide one with `visibility=\"hidden\"`, or keep `value` in step yourself. */\n value?: number[];\n /** Open items for uncontrolled use, as an index or `null` (the default, none open). With `multiple`, an array of indexes, empty by default. Indexes are positions among the children, as for `value`. */\n defaultValue?: number[];\n /** Called with the new open items each time a trigger asks for a change, whether or not `value` is set: an index or `null`, or with `multiple` an array of indexes in ascending order. Indexes are positions among the children, as for `value`. */\n onChange?: (value: number[]) => void;\n}\n\n/**\n * Props for the Collapses component, a discriminated union on `multiple`: the open items are an index (or `null`) in single mode and an array of indexes with `multiple`.\n */\nexport type CollapsesProps = CollapsesSingleProps | CollapsesMultipleProps;\n\n/** Either mode's value as the list of open indexes. */\nfunction toIndexes(value: number | number[] | null | undefined): number[] {\n if (Array.isArray(value)) return value;\n return typeof value === 'number' ? [value] : [];\n}\n\n/**\n * The `Collapses` component groups `Collapse` items into an accordion that keeps one item open at a time, or any number with `multiple`.\n *\n * @function\n * @param {CollapsesProps} props - Props for the Collapses component.\n * @returns {JSX.Element} The rendered group.\n *\n * @example\n * // Accordion: one item open at a time, the first to start with\n * <Collapses defaultValue={0}>\n * <Collapse bordered trigger={<strong>Shipping</strong>}>…</Collapse>\n * <Collapse bordered trigger={<strong>Returns</strong>}>…</Collapse>\n * </Collapses>\n *\n * @example\n * // Controlled, with items that open independently\n * const [open, setOpen] = useState<number[]>([]);\n * <Collapses multiple value={open} onChange={setOpen}>…</Collapses>\n */\nconst CollapsesComponent: React.FC<CollapsesProps> = ({\n multiple = false,\n value,\n defaultValue,\n onChange,\n seamless = false,\n className,\n children,\n ...props\n}) => {\n const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });\n\n // Controlled vs uncontrolled, as in Tabs. State is held as a list of open\n // indexes in both modes; `multiple` only decides how a change is computed\n // and which shape `onChange` receives.\n const isControlled = value !== undefined;\n const [internalOpen, setInternalOpen] = useState(() =>\n toIndexes(defaultValue)\n );\n const openIndexes = isControlled ? toIndexes(value) : internalOpen;\n\n // Each mode types `onChange` for its own shape, and the value built below\n // always matches `multiple`, the union's discriminant.\n const reportChange = onChange as\n ((next: number | number[] | null) => void) | undefined;\n\n const setItemOpen = (index: number, open: boolean) => {\n const others = openIndexes.filter(i => i !== index);\n // Single mode keeps at most one item open, so opening one drops the rest.\n // Ascending order, whatever order the items were opened in, so the value\n // reads and compares the same way however the user got there.\n const next = (\n open ? (multiple ? [...others, index] : [index]) : others\n ).sort((a, b) => a - b);\n if (!isControlled) setInternalOpen(next);\n reportChange?.(multiple ? next : (next[0] ?? null));\n };\n\n const groupClasses = usePrefixedClassNames('collapses', {\n 'is-seamless': seamless,\n });\n const combinedClasses = classNames(\n groupClasses,\n bulmaHelperClasses,\n className\n );\n\n const items: React.ReactNode[] = [];\n let index = 0;\n for (const child of flattenChildren(children)) {\n if (!React.isValidElement(child)) {\n items.push(child);\n continue;\n }\n const itemIndex = index;\n index += 1;\n items.push(\n <CollapsesItemContext.Provider\n key={child.key}\n value={{\n open: openIndexes.includes(itemIndex),\n setOpen: open => setItemOpen(itemIndex, open),\n }}\n >\n {child}\n </CollapsesItemContext.Provider>\n );\n }\n\n return (\n <div className={combinedClasses} {...rest}>\n {items}\n </div>\n );\n};\n\nexport const Collapses = withSubComponents(\n CollapsesComponent,\n { Collapse },\n 'Collapses'\n);\n\nexport default Collapses;\n"],"names":["_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Collapses.js","sources":["../../../src/components/Collapses.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { Collapse } from './Collapse';\nimport { CollapsesItemContext } from './collapsesContext';\nimport { flattenChildren } from '../helpers/flattenChildren';\n\n/**\n * Props shared by both modes of the Collapses component.\n */\ninterface CollapsesBaseProps\n extends\n Omit<\n React.HTMLAttributes<HTMLDivElement>,\n 'color' | 'defaultValue' | 'onChange'\n >,\n Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n /** Joins the items into one block, with no gap between them and only the outer corners rounded. The joins show on `bordered` items. */\n seamless?: boolean;\n /** Additional CSS classes to apply. */\n className?: string;\n /** The `Collapse` items. Each child element is one item, indexed from 0 in order, with the children of a fragment counted one by one. A child that sets its own `open` keeps it: the group leaves that item alone. */\n children?: React.ReactNode;\n}\n\n/**\n * Props for Collapses in single mode, the accordion: opening one item closes the others.\n */\nexport interface CollapsesSingleProps extends CollapsesBaseProps {\n /**\n * Lets items open independently. Without it, opening one item closes the others.\n * @defaultValue false\n */\n multiple?: false;\n /** Controlled open items: the index of the open item, or `null` for none. With `multiple`, an array of indexes. An index is a position among the children, so rendering an item conditionally or reordering them moves the open state onto a neighbour: render every item and hide one with `visibility=\"hidden\"`, or keep `value` in step yourself. */\n value?: number | null;\n /** Open items for uncontrolled use, as an index or `null` (the default, none open). With `multiple`, an array of indexes, empty by default. Indexes are positions among the children, as for `value`. */\n defaultValue?: number | null;\n /** Called with the new open items each time a trigger asks for a change, whether or not `value` is set: an index or `null`, or with `multiple` an array of indexes in ascending order. Indexes are positions among the children, as for `value`. */\n onChange?: (value: number | null) => void;\n}\n\n/**\n * Props for Collapses with `multiple`: items open and close independently.\n */\nexport interface CollapsesMultipleProps extends CollapsesBaseProps {\n /**\n * Lets items open independently. Without it, opening one item closes the others.\n * @defaultValue false\n */\n multiple: true;\n /** Controlled open items: the index of the open item, or `null` for none. With `multiple`, an array of indexes. An index is a position among the children, so rendering an item conditionally or reordering them moves the open state onto a neighbour: render every item and hide one with `visibility=\"hidden\"`, or keep `value` in step yourself. */\n value?: number[];\n /** Open items for uncontrolled use, as an index or `null` (the default, none open). With `multiple`, an array of indexes, empty by default. Indexes are positions among the children, as for `value`. */\n defaultValue?: number[];\n /** Called with the new open items each time a trigger asks for a change, whether or not `value` is set: an index or `null`, or with `multiple` an array of indexes in ascending order. Indexes are positions among the children, as for `value`. */\n onChange?: (value: number[]) => void;\n}\n\n/**\n * Props for the Collapses component, a discriminated union on `multiple`: the open items are an index (or `null`) in single mode and an array of indexes with `multiple`.\n */\nexport type CollapsesProps = CollapsesSingleProps | CollapsesMultipleProps;\n\n/** Either mode's value as the list of open indexes. */\nfunction toIndexes(value: number | number[] | null | undefined): number[] {\n if (Array.isArray(value)) return value;\n return typeof value === 'number' ? [value] : [];\n}\n\n/**\n * The `Collapses` component groups `Collapse` items into an accordion that keeps one item open at a time, or any number with `multiple`.\n *\n * @function\n * @param {CollapsesProps} props - Props for the Collapses component.\n * @returns {JSX.Element} The rendered group.\n *\n * @example\n * // Accordion: one item open at a time, the first to start with\n * <Collapses defaultValue={0}>\n * <Collapse bordered trigger={<strong>Shipping</strong>}>…</Collapse>\n * <Collapse bordered trigger={<strong>Returns</strong>}>…</Collapse>\n * </Collapses>\n *\n * @example\n * // Controlled, with items that open independently\n * const [open, setOpen] = useState<number[]>([]);\n * <Collapses multiple value={open} onChange={setOpen}>…</Collapses>\n */\nconst CollapsesComponent: React.FC<CollapsesProps> = ({\n multiple = false,\n value,\n defaultValue,\n onChange,\n seamless = false,\n className,\n children,\n ...props\n}) => {\n const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });\n\n // Controlled vs uncontrolled, as in Tabs. State is held as a list of open\n // indexes in both modes; `multiple` only decides how a change is computed\n // and which shape `onChange` receives.\n const isControlled = value !== undefined;\n const [internalOpen, setInternalOpen] = useState(() =>\n toIndexes(defaultValue)\n );\n const openIndexes = isControlled ? toIndexes(value) : internalOpen;\n\n // Each mode types `onChange` for its own shape, and the value built below\n // always matches `multiple`, the union's discriminant.\n const reportChange = onChange as\n ((next: number | number[] | null) => void) | undefined;\n\n const setItemOpen = (index: number, open: boolean) => {\n const others = openIndexes.filter(i => i !== index);\n // Single mode keeps at most one item open, so opening one drops the rest.\n // Ascending order, whatever order the items were opened in, so the value\n // reads and compares the same way however the user got there.\n const next = (\n open ? (multiple ? [...others, index] : [index]) : others\n ).sort((a, b) => a - b);\n if (!isControlled) setInternalOpen(next);\n reportChange?.(multiple ? next : (next[0] ?? null));\n };\n\n const groupClasses = usePrefixedClassNames('collapses', {\n 'is-seamless': seamless,\n });\n const combinedClasses = classNames(\n groupClasses,\n bulmaHelperClasses,\n className\n );\n\n const items: React.ReactNode[] = [];\n let index = 0;\n for (const child of flattenChildren(children)) {\n if (!React.isValidElement(child)) {\n items.push(child);\n continue;\n }\n const itemIndex = index;\n index += 1;\n items.push(\n <CollapsesItemContext.Provider\n key={child.key}\n value={{\n open: openIndexes.includes(itemIndex),\n setOpen: open => setItemOpen(itemIndex, open),\n }}\n >\n {child}\n </CollapsesItemContext.Provider>\n );\n }\n\n return (\n <div className={combinedClasses} {...rest}>\n {items}\n </div>\n );\n};\n\nexport const Collapses = withSubComponents(\n CollapsesComponent,\n { Collapse },\n 'Collapses'\n);\n\nexport default Collapses;\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;AAiEA;AACA,SAAS,SAAS,CAAC,KAA2C,EAAA;AAC5D,IAAA,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;AAAE,QAAA,OAAO,KAAK;AACtC,IAAA,OAAO,OAAO,KAAK,KAAK,QAAQ,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE;AACjD;AAEA;;;;;;;;;;;;;;;;;;AAkBG;AACH,MAAM,kBAAkB,GAA6B,CAAC,EACpD,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;AACH,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC;;;;AAKlE,IAAA,MAAM,YAAY,GAAG,KAAK,KAAK,SAAS;AACxC,IAAA,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,MAC/C,SAAS,CAAC,YAAY,CAAC,CACxB;AACD,IAAA,MAAM,WAAW,GAAG,YAAY,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,YAAY;;;IAIlE,MAAM,YAAY,GAAG,QACmC;AAExD,IAAA,MAAM,WAAW,GAAG,CAAC,KAAa,EAAE,IAAa,KAAI;AACnD,QAAA,MAAM,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,KAAK,CAAC;;;;QAInD,MAAM,IAAI,GAAG,CACX,IAAI,IAAI,QAAQ,GAAG,CAAC,GAAG,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,MAAM,EACzD,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;AACvB,QAAA,IAAI,CAAC,YAAY;YAAE,eAAe,CAAC,IAAI,CAAC;AACxC,QAAA,YAAY,GAAG,QAAQ,GAAG,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC;AACrD,IAAA,CAAC;AAED,IAAA,MAAM,YAAY,GAAG,qBAAqB,CAAC,WAAW,EAAE;AACtD,QAAA,aAAa,EAAE,QAAQ;AACxB,KAAA,CAAC;IACF,MAAM,eAAe,GAAG,UAAU,CAChC,YAAY,EACZ,kBAAkB,EAClB,SAAS,CACV;IAED,MAAM,KAAK,GAAsB,EAAE;IACnC,IAAI,KAAK,GAAG,CAAC;IACb,KAAK,MAAM,KAAK,IAAI,eAAe,CAAC,QAAQ,CAAC,EAAE;QAC7C,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;AAChC,YAAA,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;YACjB;QACF;QACA,MAAM,SAAS,GAAG,KAAK;QACvB,KAAK,IAAI,CAAC;QACV,KAAK,CAAC,IAAI,CACRA,GAAA,CAAC,oBAAoB,CAAC,QAAQ,EAAA,EAE5B,KAAK,EAAE;AACL,gBAAA,IAAI,EAAE,WAAW,CAAC,QAAQ,CAAC,SAAS,CAAC;gBACrC,OAAO,EAAE,IAAI,IAAI,WAAW,CAAC,SAAS,EAAE,IAAI,CAAC;AAC9C,aAAA,EAAA,QAAA,EAEA,KAAK,EAAA,EAND,KAAK,CAAC,GAAG,CAOgB,CACjC;IACH;IAEA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,eAAe,EAAA,GAAM,IAAI,EAAA,QAAA,EACtC,KAAK,EAAA,CACF;AAEV,CAAC;AAEM,MAAM,SAAS,GAAG,iBAAiB,CACxC,kBAAkB,EAClB,EAAE,QAAQ,EAAE,EACZ,WAAW;;"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
|
|
2
|
+
'use client';
|
|
2
3
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
3
4
|
import { createContext, forwardRef, useState, useRef, useCallback, useEffect, useContext, useId } from 'react';
|
|
4
5
|
import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
|