@allxsmith/bestax-bulma 5.42.0 → 5.43.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bestax.css +1 -1
- package/dist/bestax.css.map +1 -1
- package/dist/esm/components/Carousel.js.map +1 -1
- package/dist/esm/form/Checkbox.js.map +1 -1
- package/dist/esm/form/Field.js.map +1 -1
- package/dist/esm/form/PinInput.js +201 -0
- package/dist/esm/form/PinInput.js.map +1 -0
- package/dist/esm/form/Radio.js.map +1 -1
- package/dist/extras.css +1 -1
- package/dist/extras.css.map +1 -1
- package/dist/index.cjs +187 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.esm.js +1 -0
- package/dist/index.esm.js.map +1 -1
- package/dist/types/components/Carousel.d.ts +7 -0
- package/dist/types/form/Checkbox.d.ts +9 -1
- package/dist/types/form/Field.d.ts +1 -1
- package/dist/types/form/PinInput.d.ts +103 -0
- package/dist/types/form/Radio.d.ts +10 -1
- package/dist/types/index.d.ts +1 -0
- package/dist/types-cjs/components/Carousel.d.ts +7 -0
- package/dist/types-cjs/form/Checkbox.d.ts +9 -1
- package/dist/types-cjs/form/Field.d.ts +1 -1
- package/dist/types-cjs/form/PinInput.d.ts +103 -0
- package/dist/types-cjs/form/Radio.d.ts +10 -1
- package/dist/types-cjs/index.d.ts +1 -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 +13 -13
- package/src/scss/components/_carousel.scss +7 -2
- package/src/scss/form/_checkbox.scss +23 -16
- package/src/scss/form/_index.scss +1 -0
- package/src/scss/form/_pininput.scss +175 -0
- package/src/scss/form/_radio.scss +4 -1
|
@@ -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\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 /** Position indicators inside carousel. */\n indicatorInside?: boolean;\n /** Indicator position. Default: 'bottom'. */\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 /** Color theme for navigation arrows. */\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 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': indicatorInside,\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 /** Position indicators inside carousel. */\n indicatorInside?: boolean;\n /** Indicator position. Default: 'bottom'. */\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 /** Color theme for navigation arrows. */\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 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': indicatorInside,\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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sources":["../../../src/form/Checkbox.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useRef } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n useBulmaClasses,\n BulmaClassesProps,\n validColors,\n} from '../helpers/useBulmaClasses';\nimport { useClientLayoutEffect } from '../helpers/useClientLayoutEffect';\nimport { useCheckboxesGroup } from './FormContext';\n\n/**\n * The values the Checkbox `color` prop accepts, as a readonly tuple.\n *\n * `CheckboxProps['color']` is typed from it, so the two list the same values.\n * Map over it to build a color picker, or check a value that arrives at\n * runtime before passing it in: the component adds no color class for a value\n * outside the tuple.\n *\n * @example\n * import { Checkbox, checkboxColors } from '@allxsmith/bestax-bulma';\n *\n * checkboxColors.map(color => (\n * <Checkbox key={color} color={color}>\n * {color}\n * </Checkbox>\n * ));\n */\nexport const checkboxColors = [\n 'primary',\n 'link',\n 'info',\n 'success',\n 'warning',\n 'danger',\n] as const;\n\n/**\n * The values the Checkbox `size` prop accepts, as a readonly tuple.\n *\n * `CheckboxProps['size']` is typed from it, so the two list the same values.\n * Use it to offer a size choice or to check a value that arrives at runtime:\n * the component adds no size class for a value outside the tuple. These are\n * element sizes, not the spacing scale in `validSizes`.\n *\n * @example\n * import { checkboxSizes } from '@allxsmith/bestax-bulma';\n *\n * type CheckboxSize = (typeof checkboxSizes)[number];\n */\nexport const checkboxSizes = ['small', 'normal', 'medium', 'large'] as const;\n\n/**\n * Props for the Checkbox component.\n */\nexport interface CheckboxProps\n extends\n Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n 'size' | 'type' | 'color'\n >,\n Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {\n /** Color of the checkbox. */\n color?: (typeof checkboxColors)[number];\n /** Size of the checkbox. */\n size?: (typeof checkboxSizes)[number];\n /** Text color helper. */\n textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n /** Whether the checkbox is disabled. */\n disabled?: boolean;\n /**\n * Shows the mixed state, as in a \"Select all\" box when some of what it\n * covers is checked. It's a look and an announcement only: `checked` is\n * still the value, and a click still toggles `checked`. A browser clears\n * the mixed state on a click, so the component sets it again from this\n * prop after every click and every render. Left unset, the component\n * doesn't touch it, and once it has set it, going back to unset clears it\n * once and hands it back. It has no HTML attribute, so server-rendered\n * markup can't carry it, and a mixed box renders unmixed until hydration.\n */\n indeterminate?: boolean;\n /** Additional CSS classes to apply. */\n className?: string;\n /** The label/content for the checkbox. */\n children?: React.ReactNode;\n}\n\n/**\n * The `Checkbox` component provides a Bulma-styled checkbox input.\n *\n * @function\n * @param {CheckboxProps} props - Props for the Checkbox component.\n * @returns {JSX.Element} The rendered checkbox element.\n *\n * @example\n * // Basic checkbox\n * <Checkbox>Accept terms</Checkbox>\n *\n * @example\n * // Inside a group\n * <Checkboxes name=\"tags\" defaultValue={['react']}>\n * <Checkbox value=\"react\">React</Checkbox>\n * <Checkbox value=\"vue\">Vue</Checkbox>\n * </Checkboxes>\n */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n (\n {\n color,\n size,\n className,\n children,\n textColor,\n disabled,\n name,\n value,\n checked,\n defaultChecked,\n indeterminate,\n onChange,\n ...props\n },\n ref\n ) => {\n const { bulmaHelperClasses, rest } = useBulmaClasses({\n color: textColor,\n ...props,\n });\n\n // The input's own ref, merged with the forwarded one. A callback ref's\n // return value is handed back, so React 19 still runs a cleanup it\n // returns, as it did when the ref went straight to the input.\n const inputRef = useRef<HTMLInputElement | null>(null);\n const setRefs = useCallback(\n (node: HTMLInputElement | null) => {\n inputRef.current = node;\n if (typeof ref === 'function') return ref(node);\n if (ref) ref.current = node;\n },\n [ref]\n );\n\n // `indeterminate` is a DOM property with no attribute, so it's set on the\n // input rather than rendered. A click clears it, so this runs after every\n // render, not only when the prop changes. Unset, it's left alone, so a\n // ref that sets the property itself still works. `ownsIndeterminateRef`\n // remembers that this component set it, so a prop that goes back to unset\n // clears the dash once instead of leaving it on.\n const ownsIndeterminateRef = useRef(false);\n useClientLayoutEffect(() => {\n if (indeterminate !== undefined) {\n ownsIndeterminateRef.current = true;\n inputRef.current!.indeterminate = indeterminate;\n } else if (ownsIndeterminateRef.current) {\n ownsIndeterminateRef.current = false;\n inputRef.current!.indeterminate = false;\n }\n });\n\n // Inherit name + selection state from a surrounding <Checkboxes> group.\n // Local props always win over the group (explicit > implicit).\n const group = useCheckboxesGroup();\n const effectiveName = name ?? group?.name;\n\n // Group-managed checked state — only when the group is in\n // controlled/uncontrolled mode (group.value is defined) AND this Checkbox\n // has a value to compare against. Local `checked` always wins.\n const groupManaged = group?.value !== undefined && value !== undefined;\n const groupHas = groupManaged && group!.value!.includes(String(value));\n const effectiveChecked =\n checked !== undefined ? checked : groupManaged ? groupHas : undefined;\n // When the group manages checked, suppress local defaultChecked to avoid\n // the controlled/uncontrolled React warning.\n const effectiveDefaultChecked = groupManaged ? undefined : defaultChecked;\n\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n // The click that got here cleared the mixed state. Put it back now,\n // since a click that changes no state renders nothing to do it.\n if (indeterminate !== undefined) e.target.indeterminate = indeterminate;\n // Local onChange always fires.\n onChange?.(e);\n // Dispatch to the group additionally — toggle this value's\n // membership in the group's array.\n if (group?.onChange && value !== undefined) {\n const valStr = String(value);\n const currentArr = group.value ?? [];\n const next = e.target.checked\n ? currentArr.includes(valStr)\n ? currentArr\n : [...currentArr, valStr]\n : currentArr.filter(v => v !== valStr);\n group.onChange(next);\n }\n },\n [onChange, group, value, indeterminate]\n );\n\n const mainClass = usePrefixedClassNames('styled-checkbox', 'checkbox', {\n [`is-${color}`]: color && checkboxColors.includes(color),\n [`is-${size}`]: size && checkboxSizes.includes(size),\n });\n const checkboxClass = classNames(mainClass, bulmaHelperClasses, className);\n const checkClass = usePrefixedClassNames('check');\n const controlLabelClass = usePrefixedClassNames('control-label');\n\n return (\n <label className={checkboxClass}>\n <input\n ref={setRefs}\n type=\"checkbox\"\n disabled={disabled}\n name={effectiveName}\n value={value}\n checked={effectiveChecked}\n defaultChecked={effectiveDefaultChecked}\n onChange={handleChange}\n {...rest}\n />\n <span className={checkClass} />\n {children && <span className={controlLabelClass}>{children}</span>}\n </label>\n );\n }\n);\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":["../../../src/form/Checkbox.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useRef } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n useBulmaClasses,\n BulmaClassesProps,\n validColors,\n} from '../helpers/useBulmaClasses';\nimport { useClientLayoutEffect } from '../helpers/useClientLayoutEffect';\nimport { useCheckboxesGroup } from './FormContext';\n\n/**\n * The values the Checkbox `color` prop accepts, as a readonly tuple.\n *\n * `CheckboxProps['color']` is typed from it, so the two list the same values.\n * Map over it to build a color picker, or check a value that arrives at\n * runtime before passing it in: the component adds no color class for a value\n * outside the tuple.\n *\n * @example\n * import { Checkbox, checkboxColors } from '@allxsmith/bestax-bulma';\n *\n * checkboxColors.map(color => (\n * <Checkbox key={color} color={color}>\n * {color}\n * </Checkbox>\n * ));\n */\nexport const checkboxColors = [\n 'primary',\n 'link',\n 'info',\n 'success',\n 'warning',\n 'danger',\n] as const;\n\n/**\n * The values the Checkbox `size` prop accepts, as a readonly tuple.\n *\n * `CheckboxProps['size']` is typed from it, so the two list the same values.\n * Use it to offer a size choice or to check a value that arrives at runtime:\n * the component adds no size class for a value outside the tuple. These are\n * element sizes, not the spacing scale in `validSizes`.\n *\n * @example\n * import { checkboxSizes } from '@allxsmith/bestax-bulma';\n *\n * type CheckboxSize = (typeof checkboxSizes)[number];\n */\nexport const checkboxSizes = ['small', 'normal', 'medium', 'large'] as const;\n\n/**\n * Props for the Checkbox component.\n */\nexport interface CheckboxProps\n extends\n Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n 'size' | 'type' | 'color'\n >,\n Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {\n /** Color of the checkbox. */\n color?: (typeof checkboxColors)[number];\n /** Size of the checkbox. */\n size?: (typeof checkboxSizes)[number];\n /** Text color helper. */\n textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n /** Whether the checkbox is disabled. */\n disabled?: boolean;\n /**\n * Shows the mixed state, as in a \"Select all\" box when some of what it\n * covers is checked. It's a look and an announcement only: `checked` is\n * still the value, and a click still toggles `checked`. A browser clears\n * the mixed state on a click, so the component sets it again from this\n * prop after every click and every render. Left unset, the component\n * doesn't touch it, and once it has set it, going back to unset clears it\n * once and hands it back. It has no HTML attribute, so server-rendered\n * markup can't carry it, and a mixed box renders unmixed until hydration.\n */\n indeterminate?: boolean;\n /**\n * Additional CSS classes, on the outer `<label>`. That's the element that\n * declares the `--bulma-checkbox-*` variables, so a class is how to set\n * one: `style` and the other input attributes go to the `<input>`. Name\n * `.styled-checkbox` beside your class in the selector, so it beats the\n * label's own declaration whatever order the stylesheets load in. A\n * `color` prop declares the fills again on `.styled-checkbox.is-<color>`,\n * which ties that selector, so leave `color` unset when a class sets them.\n */\n className?: string;\n /** The label/content for the checkbox. */\n children?: React.ReactNode;\n}\n\n/**\n * The `Checkbox` component provides a Bulma-styled checkbox input.\n *\n * @function\n * @param {CheckboxProps} props - Props for the Checkbox component.\n * @returns {JSX.Element} The rendered checkbox element.\n *\n * @example\n * // Basic checkbox\n * <Checkbox>Accept terms</Checkbox>\n *\n * @example\n * // Inside a group\n * <Checkboxes name=\"tags\" defaultValue={['react']}>\n * <Checkbox value=\"react\">React</Checkbox>\n * <Checkbox value=\"vue\">Vue</Checkbox>\n * </Checkboxes>\n */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n (\n {\n color,\n size,\n className,\n children,\n textColor,\n disabled,\n name,\n value,\n checked,\n defaultChecked,\n indeterminate,\n onChange,\n ...props\n },\n ref\n ) => {\n const { bulmaHelperClasses, rest } = useBulmaClasses({\n color: textColor,\n ...props,\n });\n\n // The input's own ref, merged with the forwarded one. A callback ref's\n // return value is handed back, so React 19 still runs a cleanup it\n // returns, as it did when the ref went straight to the input.\n const inputRef = useRef<HTMLInputElement | null>(null);\n const setRefs = useCallback(\n (node: HTMLInputElement | null) => {\n inputRef.current = node;\n if (typeof ref === 'function') return ref(node);\n if (ref) ref.current = node;\n },\n [ref]\n );\n\n // `indeterminate` is a DOM property with no attribute, so it's set on the\n // input rather than rendered. A click clears it, so this runs after every\n // render, not only when the prop changes. Unset, it's left alone, so a\n // ref that sets the property itself still works. `ownsIndeterminateRef`\n // remembers that this component set it, so a prop that goes back to unset\n // clears the dash once instead of leaving it on.\n const ownsIndeterminateRef = useRef(false);\n useClientLayoutEffect(() => {\n if (indeterminate !== undefined) {\n ownsIndeterminateRef.current = true;\n inputRef.current!.indeterminate = indeterminate;\n } else if (ownsIndeterminateRef.current) {\n ownsIndeterminateRef.current = false;\n inputRef.current!.indeterminate = false;\n }\n });\n\n // Inherit name + selection state from a surrounding <Checkboxes> group.\n // Local props always win over the group (explicit > implicit).\n const group = useCheckboxesGroup();\n const effectiveName = name ?? group?.name;\n\n // Group-managed checked state — only when the group is in\n // controlled/uncontrolled mode (group.value is defined) AND this Checkbox\n // has a value to compare against. Local `checked` always wins.\n const groupManaged = group?.value !== undefined && value !== undefined;\n const groupHas = groupManaged && group!.value!.includes(String(value));\n const effectiveChecked =\n checked !== undefined ? checked : groupManaged ? groupHas : undefined;\n // When the group manages checked, suppress local defaultChecked to avoid\n // the controlled/uncontrolled React warning.\n const effectiveDefaultChecked = groupManaged ? undefined : defaultChecked;\n\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n // The click that got here cleared the mixed state. Put it back now,\n // since a click that changes no state renders nothing to do it.\n if (indeterminate !== undefined) e.target.indeterminate = indeterminate;\n // Local onChange always fires.\n onChange?.(e);\n // Dispatch to the group additionally — toggle this value's\n // membership in the group's array.\n if (group?.onChange && value !== undefined) {\n const valStr = String(value);\n const currentArr = group.value ?? [];\n const next = e.target.checked\n ? currentArr.includes(valStr)\n ? currentArr\n : [...currentArr, valStr]\n : currentArr.filter(v => v !== valStr);\n group.onChange(next);\n }\n },\n [onChange, group, value, indeterminate]\n );\n\n const mainClass = usePrefixedClassNames('styled-checkbox', 'checkbox', {\n [`is-${color}`]: color && checkboxColors.includes(color),\n [`is-${size}`]: size && checkboxSizes.includes(size),\n });\n const checkboxClass = classNames(mainClass, bulmaHelperClasses, className);\n const checkClass = usePrefixedClassNames('check');\n const controlLabelClass = usePrefixedClassNames('control-label');\n\n return (\n <label className={checkboxClass}>\n <input\n ref={setRefs}\n type=\"checkbox\"\n disabled={disabled}\n name={effectiveName}\n value={value}\n checked={effectiveChecked}\n defaultChecked={effectiveDefaultChecked}\n onChange={handleChange}\n {...rest}\n />\n <span className={checkClass} />\n {children && <span className={controlLabelClass}>{children}</span>}\n </label>\n );\n }\n);\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.js","sources":["../../../src/form/Field.tsx"],"sourcesContent":["import React, { useCallback, useId, useMemo, useRef, useState } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport {\n useBulmaClasses,\n BulmaClassesProps,\n validColors,\n} from '../helpers/useBulmaClasses';\nimport {\n FieldProvider,\n FieldLabelIdProvider,\n FieldLabelElementIdProvider,\n FieldLabelForProvider,\n FieldLabelForReportProvider,\n useFieldLabelFor,\n} from './FormContext';\nimport { useClientLayoutEffect } from '../helpers/useClientLayoutEffect';\nimport { Control } from './Control';\n\n/**\n * Props for the Field component.\n */\nexport interface FieldProps\n extends\n React.HTMLAttributes<HTMLDivElement>,\n Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n /** Renders the field as horizontal (label and control side by side). */\n horizontal?: boolean;\n /** Group controls in a row (optionally centered, right, or multiline). */\n grouped?: boolean | 'centered' | 'right' | 'multiline';\n /** Group controls as addons (optionally centered or right-aligned). */\n hasAddons?: boolean | 'centered' | 'right';\n /** Constrains the field to its content's width (used inside horizontal field bodies). */\n narrow?: boolean;\n /** Field label, rendered above the widget. Automatically names the one control the Field holds: a composed `InputBase`, `SelectBase`, `TextAreaBase`, `DateInputBase`, `TimeInputBase` or `DateTimeInputBase` (an `inline` picker has no input, so it takes nothing), or a bestax input that renders a single input of its own (`Input`, `Select`, `TextArea`, `Numberinput`, `Slider`, `DateInput`, `TimeInput`, `DateTimeInput`, `Autocomplete`, `Combobox`, `Taginput`, `File`), adopts a generated id that the label's `htmlFor` points at, and a group (`Radios`, `Checkboxes`, `Rate`, `DateRangeInput`, or a composed `DateRangeInputBase`, `inline` or not) points `aria-labelledby` at the label's own id unless you gave the group an `aria-label` or `aria-labelledby`. A range `Slider` takes the id on its low thumb and also starts each thumb's name with the label through `aria-labelledby`, unless its `ariaLabel` names that thumb or its own `aria-label` or `aria-labelledby` takes the label's place. An `Autocomplete`, a `Combobox` or a `Taginput` also names its open list after the label through `aria-labelledby`. `Checkbox`, `Radio` and `Switch` are named by their own children, and the label names one only when you wire it as you would any control with an `id` of its own, `labelProps={{ htmlFor }}` plus that control's `id`. Only the single inputs take the `htmlFor`, so once the Field's content has mounted the label keeps it only while one of them holds the id, and drops it over anything else: a group, a `Checkbox`, `Radio` or `Switch`, an `inline` picker, an inner `Field`, an input with an `id` of its own, markup of your own, or nothing at all. A server render, and the first render while hydrating, still write the `htmlFor`, which keeps hydration matching, and an input that mounts later puts it back. The label names an input with an `id` of your own only through `labelProps={{ htmlFor }}` set to that `id`, a `for` it always keeps; `labelProps={{ htmlFor: undefined }}` opts out. Skipped for `grouped`/`hasAddons` fields (multiple controls), and a nested `Field` starts its own scope, so a horizontal Field whose body holds an inner `Field` names the control there only when you wire it. Two controls in one plain labeled Field would both adopt the id, so give each an `id` of its own. */\n label?: React.ReactNode;\n /** Size for the label. */\n labelSize?: 'small' | 'normal' | 'medium' | 'large';\n /** Props for the label element. An explicit `htmlFor` key — even set to `undefined` — takes over the association. While the association is on, the label renders with the `id` given here, or a generated one, and a group control, a range `Slider`'s thumbs and an `Autocomplete`'s, a `Combobox`'s or a `Taginput`'s list point `aria-labelledby` at it. A label you take over gets no generated id, and no group points at it on its own. With an `id` here, though, a range `Slider`, an `Autocomplete` or a `Taginput` whose `id` your `htmlFor` names, or a `Combobox` whose field's `id` it names, still points its thumbs or its list at it, in a `grouped` or `hasAddons` Field too. To point a group in an inner `Field` at this label by hand, pass that `id`. Nothing in the inner `Field` takes the generated `htmlFor`, so the label drops it after mounting, and adding `htmlFor: undefined` keeps it out of server-rendered markup too. */\n labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {\n [key: string]: unknown;\n };\n /** Text color for the field. */\n textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n /** Bulma color for the field. */\n color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n /** Background color for the field. */\n bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n /** Additional CSS classes. */\n className?: string;\n /** Field content. */\n children?: React.ReactNode;\n}\n\n/**\n * Props for the FieldLabel component.\n */\nexport interface FieldLabelProps\n extends\n React.HTMLAttributes<HTMLDivElement>,\n Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n /** Size for the field label. */\n size?: 'small' | 'normal' | 'medium' | 'large';\n /** Text color for the label. */\n textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n /** Bulma color for the label. */\n color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n /** Background color for the label. */\n bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n /** Additional CSS classes. */\n className?: string;\n /** Field label content. */\n children?: React.ReactNode;\n}\n\n/**\n * Props for the FieldBody component.\n */\nexport interface FieldBodyProps\n extends\n React.HTMLAttributes<HTMLDivElement>,\n Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n /** Text color for the field body. */\n textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n /** Bulma color for the field body. */\n color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n /** Background color for the field body. */\n bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n /** Additional CSS classes. */\n className?: string;\n /** Field body content. */\n children?: React.ReactNode;\n}\n\n/**\n * FieldLabel component for rendering a Bulma field label. It renders the\n * label column of a horizontal `Field` (a `div` with the `field-label` class),\n * not a `<label>`, so text placed straight in it names nothing. Put a `<label>`\n * with the `label` class inside it and point its `htmlFor` at the control's\n * `id`, or give the horizontal `Field` a `label` prop, which renders this\n * column and its `<label>` for you. A `<label>` you put here names the\n * control through its `htmlFor` alone: a range `Slider`'s thumbs and an\n * `Autocomplete`'s, a `Combobox`'s or a `Taginput`'s list point\n * `aria-labelledby` at a `Field`'s label only when its `label` prop renders it\n * and it names the control. Where it would not name the control on its own, as in an inner `Field`,\n * pass `labelProps={{ htmlFor, id }}` with a matching `id` on the control.\n *\n * @function\n * @param {FieldLabelProps} props - Props for the FieldLabel component.\n * @returns {JSX.Element} The rendered field label.\n *\n * @example\n * <FieldLabel size=\"normal\">\n * <label className=\"label\" htmlFor=\"name\">Name</label>\n * </FieldLabel>\n */\nexport const FieldLabel: React.FC<FieldLabelProps> = ({\n size,\n textColor,\n bgColor,\n className,\n children,\n ...props\n}) => {\n const { bulmaHelperClasses, rest } = useBulmaClasses({\n color: textColor,\n backgroundColor: bgColor,\n ...props,\n });\n\n const mainClass = usePrefixedClassNames('field-label', {\n [`is-${size}`]: !!size,\n });\n const fieldLabelClass = classNames(mainClass, bulmaHelperClasses, className);\n // Spread ...props and ...rest so custom props like data-testid are included\n return (\n <div className={fieldLabelClass} {...props} {...rest}>\n {children}\n </div>\n );\n};\n\n/**\n * FieldBody component for rendering Bulma field body.\n *\n * @function\n * @param {FieldBodyProps} props - Props for the FieldBody component.\n * @returns {JSX.Element} The rendered field body.\n *\n * @example\n * <FieldBody><input className=\"input\" /></FieldBody>\n */\nexport const FieldBody: React.FC<FieldBodyProps> = ({\n textColor,\n bgColor,\n className,\n children,\n ...props\n}) => {\n const { bulmaHelperClasses, rest } = useBulmaClasses({\n color: textColor,\n backgroundColor: bgColor,\n ...props,\n });\n\n const mainClass = usePrefixedClassNames('field-body');\n const fieldBodyClass = classNames(mainClass, bulmaHelperClasses, className);\n // Spread ...props and ...rest so custom props like data-testid are included\n return (\n <div className={fieldBodyClass} {...props} {...rest}>\n {children}\n </div>\n );\n};\n\n/**\n * The `Field` component is a Bulma-styled form field container.\n *\n * @function\n * @param {FieldProps} props - Props for the Field component.\n * @returns {JSX.Element} The rendered field container.\n * @see {@link https://bulma.io/documentation/form/general/#field | Bulma Field documentation}\n *\n * @example\n * // Labelled field — the label auto-associates with the composed base\n * <Field label=\"Email\">\n * <Control>\n * <InputBase type=\"email\" />\n * </Control>\n * </Field>\n *\n * @example\n * // Horizontal field\n * <Field horizontal label=\"Name\">\n * <Control>\n * <InputBase />\n * </Control>\n * </Field>\n */\nconst FieldComponent: React.FC<FieldProps> = ({\n horizontal,\n grouped,\n hasAddons,\n narrow,\n label,\n labelSize,\n labelProps,\n textColor,\n color: _fieldColor,\n bgColor,\n className,\n children,\n ...props\n}) => {\n const { bulmaHelperClasses, rest } = useBulmaClasses({\n color: textColor,\n backgroundColor: bgColor,\n ...props,\n });\n\n const mainClass = usePrefixedClassNames('field', {\n 'is-horizontal': horizontal,\n 'has-addons': !!hasAddons,\n 'has-addons-centered': hasAddons === 'centered',\n 'has-addons-right': hasAddons === 'right',\n 'is-narrow': narrow,\n 'is-grouped':\n grouped === true ||\n grouped === 'centered' ||\n grouped === 'right' ||\n grouped === 'multiline',\n 'is-grouped-centered': grouped === 'centered',\n 'is-grouped-right': grouped === 'right',\n 'is-grouped-multiline': grouped === 'multiline',\n });\n const fieldClass = classNames(mainClass, bulmaHelperClasses, className);\n\n // Default labelSize to 'normal' when horizontal for proper baseline alignment\n const effectiveLabelSize = labelSize ?? (horizontal ? 'normal' : undefined);\n\n const labelClass = usePrefixedClassNames('label');\n\n // Auto-associate the label with a single composed base control (#495): the\n // label points at a generated id shared via context, which a composed base\n // adopts when the user supplied no id of their own.\n // Presence semantics on htmlFor — even an explicit `htmlFor: undefined`\n // means the caller owns the association. Grouped/addons fields hold several\n // controls, so no single association is generated for them.\n const generatedId = useId();\n const userWiredLabel = !!labelProps && 'htmlFor' in labelProps;\n const targetId =\n label && !userWiredLabel && !grouped && !hasAddons\n ? generatedId\n : undefined;\n // A group control (Radios, Checkboxes, Rate, DateRangeInput and its base)\n // cannot take that `for`, so it points `aria-labelledby` at the label\n // itself (#939).\n // The label gets an id whenever the association is on, unless the caller\n // gave it one.\n const labelId =\n labelProps?.id ?? (targetId ? `${targetId}-label` : undefined);\n // What the rendered label's `for` points at, generated or the caller's, and\n // the id it renders with, so a control can tell when a label wired by hand\n // names it and point at that label. An unlabeled Field passes on its\n // parent's. Unlike `targetId`, a label wired by hand passes on its own in\n // `grouped`/`hasAddons` Fields too, on purpose: those only stop the Field\n // picking one control out of several, and the caller's `for` has picked\n // one, so a range Slider or Autocomplete it names points at that label in\n // a row as well. A group reads the label element id below instead, which\n // stays off for a label wired by hand, since no group takes its `for`.\n const inheritedLabelFor = useFieldLabelFor();\n const labelForTarget = userWiredLabel ? labelProps.htmlFor : targetId;\n const ownLabelFor = useMemo(\n () => ({ htmlFor: labelForTarget, id: labelId }),\n [labelForTarget, labelId]\n );\n const labelFor = label ? ownLabelFor : inheritedLabelFor;\n\n // Whether the label keeps its generated `for` (#1004). Content that takes\n // the Field's id says so from a layout effect, and this Field's own layout\n // effect runs after its content's in the same commit, so by then every\n // report has landed. Until it runs, on the server and in the first render\n // while hydrating, the label writes the `for` as it always has. From then\n // on it keeps the `for` only while some content holds the id, and content\n // that mounts or changes later reports when it does. Counted in a ref, and\n // state is set only once settled, so content that takes the id renders\n // the Field just once.\n const takersRef = useRef(0);\n const settledRef = useRef(false);\n const [forTaken, setForTaken] = useState(true);\n const settle = useCallback(() => {\n if (settledRef.current) setForTaken(takersRef.current > 0);\n }, []);\n const reportLabelFor = useCallback(() => {\n takersRef.current += 1;\n settle();\n return () => {\n takersRef.current -= 1;\n settle();\n };\n }, [settle]);\n useClientLayoutEffect(() => {\n settledRef.current = true;\n if (targetId) settle();\n }, [targetId, settle]);\n const renderedTargetId = forTaken ? targetId : undefined;\n\n let renderedLabel = null;\n if (label) {\n if (horizontal) {\n renderedLabel = (\n <FieldLabel size={effectiveLabelSize}>\n <label\n htmlFor={renderedTargetId}\n {...labelProps}\n id={labelId}\n className={classNames(labelClass, labelProps?.className)}\n style={labelProps?.style}\n >\n {label}\n </label>\n </FieldLabel>\n );\n } else {\n renderedLabel = (\n <label\n htmlFor={renderedTargetId}\n {...labelProps}\n id={labelId}\n className={classNames(labelClass, labelProps?.className)}\n style={{ display: 'block', ...(labelProps?.style || {}) }}\n >\n {label}\n </label>\n );\n }\n }\n\n // If horizontal, wrap children in FieldBody (unless the user already provided\n // a FieldBody — either as the single child, or as one element among siblings\n // like <Field.Label/> + <Field.Body/>).\n let content = children;\n if (horizontal) {\n const isFieldBody = (c: React.ReactNode): boolean =>\n React.isValidElement(c) &&\n // @ts-expect-error displayName isn't on the public type\n (c.type === FieldBody || c.type?.displayName === 'FieldBody');\n const isFieldLabel = (c: React.ReactNode): boolean =>\n React.isValidElement(c) &&\n // @ts-expect-error displayName isn't on the public type\n (c.type === FieldLabel || c.type?.displayName === 'FieldLabel');\n const childArray = React.Children.toArray(children);\n const userProvidedStructure = childArray.some(\n c => isFieldBody(c) || isFieldLabel(c)\n );\n if (userProvidedStructure) {\n content = children;\n } else {\n content = <FieldBody>{children}</FieldBody>;\n }\n }\n\n return (\n <FieldProvider value={true}>\n <FieldLabelIdProvider value={targetId}>\n <FieldLabelElementIdProvider value={targetId ? labelId : undefined}>\n <FieldLabelForProvider value={labelFor}>\n <FieldLabelForReportProvider\n value={targetId ? reportLabelFor : undefined}\n >\n <div className={fieldClass} {...rest}>\n {renderedLabel}\n {content}\n </div>\n </FieldLabelForReportProvider>\n </FieldLabelForProvider>\n </FieldLabelElementIdProvider>\n </FieldLabelIdProvider>\n </FieldProvider>\n );\n};\n\nFieldLabel.displayName = 'FieldLabel';\nFieldBody.displayName = 'FieldBody';\n\nexport const Field = withSubComponents(\n FieldComponent,\n {\n Label: FieldLabel,\n Body: FieldBody,\n Control,\n },\n 'Field'\n);\n\nexport default Field;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Field.js","sources":["../../../src/form/Field.tsx"],"sourcesContent":["import React, { useCallback, useId, useMemo, useRef, useState } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport {\n useBulmaClasses,\n BulmaClassesProps,\n validColors,\n} from '../helpers/useBulmaClasses';\nimport {\n FieldProvider,\n FieldLabelIdProvider,\n FieldLabelElementIdProvider,\n FieldLabelForProvider,\n FieldLabelForReportProvider,\n useFieldLabelFor,\n} from './FormContext';\nimport { useClientLayoutEffect } from '../helpers/useClientLayoutEffect';\nimport { Control } from './Control';\n\n/**\n * Props for the Field component.\n */\nexport interface FieldProps\n extends\n React.HTMLAttributes<HTMLDivElement>,\n Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n /** Renders the field as horizontal (label and control side by side). */\n horizontal?: boolean;\n /** Group controls in a row (optionally centered, right, or multiline). */\n grouped?: boolean | 'centered' | 'right' | 'multiline';\n /** Group controls as addons (optionally centered or right-aligned). */\n hasAddons?: boolean | 'centered' | 'right';\n /** Constrains the field to its content's width (used inside horizontal field bodies). */\n narrow?: boolean;\n /** Field label, rendered above the widget. Automatically names the one control the Field holds: a composed `InputBase`, `SelectBase`, `TextAreaBase`, `DateInputBase`, `TimeInputBase` or `DateTimeInputBase` (an `inline` picker has no input, so it takes nothing), or a bestax input that renders a single input of its own (`Input`, `Select`, `TextArea`, `Numberinput`, `PinInput`, `Slider`, `DateInput`, `TimeInput`, `DateTimeInput`, `Autocomplete`, `Combobox`, `Taginput`, `File`), adopts a generated id that the label's `htmlFor` points at, and a group (`Radios`, `Checkboxes`, `Rate`, `DateRangeInput`, or a composed `DateRangeInputBase`, `inline` or not) points `aria-labelledby` at the label's own id unless you gave the group an `aria-label` or `aria-labelledby`. A range `Slider` takes the id on its low thumb and also starts each thumb's name with the label through `aria-labelledby`, unless its `ariaLabel` names that thumb or its own `aria-label` or `aria-labelledby` takes the label's place. An `Autocomplete`, a `Combobox` or a `Taginput` also names its open list after the label through `aria-labelledby`. `Checkbox`, `Radio` and `Switch` are named by their own children, and the label names one only when you wire it as you would any control with an `id` of its own, `labelProps={{ htmlFor }}` plus that control's `id`. Only the single inputs take the `htmlFor`, so once the Field's content has mounted the label keeps it only while one of them holds the id, and drops it over anything else: a group, a `Checkbox`, `Radio` or `Switch`, an `inline` picker, an inner `Field`, an input with an `id` of its own, markup of your own, or nothing at all. A server render, and the first render while hydrating, still write the `htmlFor`, which keeps hydration matching, and an input that mounts later puts it back. The label names an input with an `id` of your own only through `labelProps={{ htmlFor }}` set to that `id`, a `for` it always keeps; `labelProps={{ htmlFor: undefined }}` opts out. Skipped for `grouped`/`hasAddons` fields (multiple controls), and a nested `Field` starts its own scope, so a horizontal Field whose body holds an inner `Field` names the control there only when you wire it. Two controls in one plain labeled Field would both adopt the id, so give each an `id` of its own. */\n label?: React.ReactNode;\n /** Size for the label. */\n labelSize?: 'small' | 'normal' | 'medium' | 'large';\n /** Props for the label element. An explicit `htmlFor` key — even set to `undefined` — takes over the association. While the association is on, the label renders with the `id` given here, or a generated one, and a group control, a range `Slider`'s thumbs and an `Autocomplete`'s, a `Combobox`'s or a `Taginput`'s list point `aria-labelledby` at it. A label you take over gets no generated id, and no group points at it on its own. With an `id` here, though, a range `Slider`, an `Autocomplete` or a `Taginput` whose `id` your `htmlFor` names, or a `Combobox` whose field's `id` it names, still points its thumbs or its list at it, in a `grouped` or `hasAddons` Field too. To point a group in an inner `Field` at this label by hand, pass that `id`. Nothing in the inner `Field` takes the generated `htmlFor`, so the label drops it after mounting, and adding `htmlFor: undefined` keeps it out of server-rendered markup too. */\n labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {\n [key: string]: unknown;\n };\n /** Text color for the field. */\n textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n /** Bulma color for the field. */\n color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n /** Background color for the field. */\n bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n /** Additional CSS classes. */\n className?: string;\n /** Field content. */\n children?: React.ReactNode;\n}\n\n/**\n * Props for the FieldLabel component.\n */\nexport interface FieldLabelProps\n extends\n React.HTMLAttributes<HTMLDivElement>,\n Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n /** Size for the field label. */\n size?: 'small' | 'normal' | 'medium' | 'large';\n /** Text color for the label. */\n textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n /** Bulma color for the label. */\n color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n /** Background color for the label. */\n bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n /** Additional CSS classes. */\n className?: string;\n /** Field label content. */\n children?: React.ReactNode;\n}\n\n/**\n * Props for the FieldBody component.\n */\nexport interface FieldBodyProps\n extends\n React.HTMLAttributes<HTMLDivElement>,\n Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n /** Text color for the field body. */\n textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n /** Bulma color for the field body. */\n color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n /** Background color for the field body. */\n bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n /** Additional CSS classes. */\n className?: string;\n /** Field body content. */\n children?: React.ReactNode;\n}\n\n/**\n * FieldLabel component for rendering a Bulma field label. It renders the\n * label column of a horizontal `Field` (a `div` with the `field-label` class),\n * not a `<label>`, so text placed straight in it names nothing. Put a `<label>`\n * with the `label` class inside it and point its `htmlFor` at the control's\n * `id`, or give the horizontal `Field` a `label` prop, which renders this\n * column and its `<label>` for you. A `<label>` you put here names the\n * control through its `htmlFor` alone: a range `Slider`'s thumbs and an\n * `Autocomplete`'s, a `Combobox`'s or a `Taginput`'s list point\n * `aria-labelledby` at a `Field`'s label only when its `label` prop renders it\n * and it names the control. Where it would not name the control on its own, as in an inner `Field`,\n * pass `labelProps={{ htmlFor, id }}` with a matching `id` on the control.\n *\n * @function\n * @param {FieldLabelProps} props - Props for the FieldLabel component.\n * @returns {JSX.Element} The rendered field label.\n *\n * @example\n * <FieldLabel size=\"normal\">\n * <label className=\"label\" htmlFor=\"name\">Name</label>\n * </FieldLabel>\n */\nexport const FieldLabel: React.FC<FieldLabelProps> = ({\n size,\n textColor,\n bgColor,\n className,\n children,\n ...props\n}) => {\n const { bulmaHelperClasses, rest } = useBulmaClasses({\n color: textColor,\n backgroundColor: bgColor,\n ...props,\n });\n\n const mainClass = usePrefixedClassNames('field-label', {\n [`is-${size}`]: !!size,\n });\n const fieldLabelClass = classNames(mainClass, bulmaHelperClasses, className);\n // Spread ...props and ...rest so custom props like data-testid are included\n return (\n <div className={fieldLabelClass} {...props} {...rest}>\n {children}\n </div>\n );\n};\n\n/**\n * FieldBody component for rendering Bulma field body.\n *\n * @function\n * @param {FieldBodyProps} props - Props for the FieldBody component.\n * @returns {JSX.Element} The rendered field body.\n *\n * @example\n * <FieldBody><input className=\"input\" /></FieldBody>\n */\nexport const FieldBody: React.FC<FieldBodyProps> = ({\n textColor,\n bgColor,\n className,\n children,\n ...props\n}) => {\n const { bulmaHelperClasses, rest } = useBulmaClasses({\n color: textColor,\n backgroundColor: bgColor,\n ...props,\n });\n\n const mainClass = usePrefixedClassNames('field-body');\n const fieldBodyClass = classNames(mainClass, bulmaHelperClasses, className);\n // Spread ...props and ...rest so custom props like data-testid are included\n return (\n <div className={fieldBodyClass} {...props} {...rest}>\n {children}\n </div>\n );\n};\n\n/**\n * The `Field` component is a Bulma-styled form field container.\n *\n * @function\n * @param {FieldProps} props - Props for the Field component.\n * @returns {JSX.Element} The rendered field container.\n * @see {@link https://bulma.io/documentation/form/general/#field | Bulma Field documentation}\n *\n * @example\n * // Labelled field — the label auto-associates with the composed base\n * <Field label=\"Email\">\n * <Control>\n * <InputBase type=\"email\" />\n * </Control>\n * </Field>\n *\n * @example\n * // Horizontal field\n * <Field horizontal label=\"Name\">\n * <Control>\n * <InputBase />\n * </Control>\n * </Field>\n */\nconst FieldComponent: React.FC<FieldProps> = ({\n horizontal,\n grouped,\n hasAddons,\n narrow,\n label,\n labelSize,\n labelProps,\n textColor,\n color: _fieldColor,\n bgColor,\n className,\n children,\n ...props\n}) => {\n const { bulmaHelperClasses, rest } = useBulmaClasses({\n color: textColor,\n backgroundColor: bgColor,\n ...props,\n });\n\n const mainClass = usePrefixedClassNames('field', {\n 'is-horizontal': horizontal,\n 'has-addons': !!hasAddons,\n 'has-addons-centered': hasAddons === 'centered',\n 'has-addons-right': hasAddons === 'right',\n 'is-narrow': narrow,\n 'is-grouped':\n grouped === true ||\n grouped === 'centered' ||\n grouped === 'right' ||\n grouped === 'multiline',\n 'is-grouped-centered': grouped === 'centered',\n 'is-grouped-right': grouped === 'right',\n 'is-grouped-multiline': grouped === 'multiline',\n });\n const fieldClass = classNames(mainClass, bulmaHelperClasses, className);\n\n // Default labelSize to 'normal' when horizontal for proper baseline alignment\n const effectiveLabelSize = labelSize ?? (horizontal ? 'normal' : undefined);\n\n const labelClass = usePrefixedClassNames('label');\n\n // Auto-associate the label with a single composed base control (#495): the\n // label points at a generated id shared via context, which a composed base\n // adopts when the user supplied no id of their own.\n // Presence semantics on htmlFor — even an explicit `htmlFor: undefined`\n // means the caller owns the association. Grouped/addons fields hold several\n // controls, so no single association is generated for them.\n const generatedId = useId();\n const userWiredLabel = !!labelProps && 'htmlFor' in labelProps;\n const targetId =\n label && !userWiredLabel && !grouped && !hasAddons\n ? generatedId\n : undefined;\n // A group control (Radios, Checkboxes, Rate, DateRangeInput and its base)\n // cannot take that `for`, so it points `aria-labelledby` at the label\n // itself (#939).\n // The label gets an id whenever the association is on, unless the caller\n // gave it one.\n const labelId =\n labelProps?.id ?? (targetId ? `${targetId}-label` : undefined);\n // What the rendered label's `for` points at, generated or the caller's, and\n // the id it renders with, so a control can tell when a label wired by hand\n // names it and point at that label. An unlabeled Field passes on its\n // parent's. Unlike `targetId`, a label wired by hand passes on its own in\n // `grouped`/`hasAddons` Fields too, on purpose: those only stop the Field\n // picking one control out of several, and the caller's `for` has picked\n // one, so a range Slider or Autocomplete it names points at that label in\n // a row as well. A group reads the label element id below instead, which\n // stays off for a label wired by hand, since no group takes its `for`.\n const inheritedLabelFor = useFieldLabelFor();\n const labelForTarget = userWiredLabel ? labelProps.htmlFor : targetId;\n const ownLabelFor = useMemo(\n () => ({ htmlFor: labelForTarget, id: labelId }),\n [labelForTarget, labelId]\n );\n const labelFor = label ? ownLabelFor : inheritedLabelFor;\n\n // Whether the label keeps its generated `for` (#1004). Content that takes\n // the Field's id says so from a layout effect, and this Field's own layout\n // effect runs after its content's in the same commit, so by then every\n // report has landed. Until it runs, on the server and in the first render\n // while hydrating, the label writes the `for` as it always has. From then\n // on it keeps the `for` only while some content holds the id, and content\n // that mounts or changes later reports when it does. Counted in a ref, and\n // state is set only once settled, so content that takes the id renders\n // the Field just once.\n const takersRef = useRef(0);\n const settledRef = useRef(false);\n const [forTaken, setForTaken] = useState(true);\n const settle = useCallback(() => {\n if (settledRef.current) setForTaken(takersRef.current > 0);\n }, []);\n const reportLabelFor = useCallback(() => {\n takersRef.current += 1;\n settle();\n return () => {\n takersRef.current -= 1;\n settle();\n };\n }, [settle]);\n useClientLayoutEffect(() => {\n settledRef.current = true;\n if (targetId) settle();\n }, [targetId, settle]);\n const renderedTargetId = forTaken ? targetId : undefined;\n\n let renderedLabel = null;\n if (label) {\n if (horizontal) {\n renderedLabel = (\n <FieldLabel size={effectiveLabelSize}>\n <label\n htmlFor={renderedTargetId}\n {...labelProps}\n id={labelId}\n className={classNames(labelClass, labelProps?.className)}\n style={labelProps?.style}\n >\n {label}\n </label>\n </FieldLabel>\n );\n } else {\n renderedLabel = (\n <label\n htmlFor={renderedTargetId}\n {...labelProps}\n id={labelId}\n className={classNames(labelClass, labelProps?.className)}\n style={{ display: 'block', ...(labelProps?.style || {}) }}\n >\n {label}\n </label>\n );\n }\n }\n\n // If horizontal, wrap children in FieldBody (unless the user already provided\n // a FieldBody — either as the single child, or as one element among siblings\n // like <Field.Label/> + <Field.Body/>).\n let content = children;\n if (horizontal) {\n const isFieldBody = (c: React.ReactNode): boolean =>\n React.isValidElement(c) &&\n // @ts-expect-error displayName isn't on the public type\n (c.type === FieldBody || c.type?.displayName === 'FieldBody');\n const isFieldLabel = (c: React.ReactNode): boolean =>\n React.isValidElement(c) &&\n // @ts-expect-error displayName isn't on the public type\n (c.type === FieldLabel || c.type?.displayName === 'FieldLabel');\n const childArray = React.Children.toArray(children);\n const userProvidedStructure = childArray.some(\n c => isFieldBody(c) || isFieldLabel(c)\n );\n if (userProvidedStructure) {\n content = children;\n } else {\n content = <FieldBody>{children}</FieldBody>;\n }\n }\n\n return (\n <FieldProvider value={true}>\n <FieldLabelIdProvider value={targetId}>\n <FieldLabelElementIdProvider value={targetId ? labelId : undefined}>\n <FieldLabelForProvider value={labelFor}>\n <FieldLabelForReportProvider\n value={targetId ? reportLabelFor : undefined}\n >\n <div className={fieldClass} {...rest}>\n {renderedLabel}\n {content}\n </div>\n </FieldLabelForReportProvider>\n </FieldLabelForProvider>\n </FieldLabelElementIdProvider>\n </FieldLabelIdProvider>\n </FieldProvider>\n );\n};\n\nFieldLabel.displayName = 'FieldLabel';\nFieldBody.displayName = 'FieldBody';\n\nexport const Field = withSubComponents(\n FieldComponent,\n {\n Label: FieldLabel,\n Body: FieldBody,\n Control,\n },\n 'Field'\n);\n\nexport default Field;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|