@ahrowe/ui 0.24.1 → 0.24.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/common/carousel/carousel.mjs +1 -1
- package/dist/esm/common/carousel/carousel.mjs.map +1 -1
- package/dist/esm/common/carousel/carousel.module.mjs.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/style.css +1 -1
- package/docs/Carousel.md +18 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../interactableDiv/index.mjs";import n from"../actionIcon/actionIcon.mjs";import r from"./carousel.module.mjs";import i,{useEffect as a,useLayoutEffect as o,useRef as s,useState as c}from"react";import l from"classnames";import{faChevronLeft as
|
|
1
|
+
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../interactableDiv/index.mjs";import n from"../actionIcon/actionIcon.mjs";import r from"./carousel.module.mjs";import i,{useEffect as a,useLayoutEffect as o,useRef as s,useState as c}from"react";import l from"classnames";import{faChevronLeft as ee,faChevronRight as te}from"@fortawesome/free-solid-svg-icons";import{Fragment as ne,jsx as u,jsxs as d}from"react/jsx-runtime";var f=10,re=.2;function p(p){let{children:ie,currentIndex:g,defaultIndex:ae=0,onChange:oe=()=>{},loop:se=!0,autoPlay:_=!1,autoPlayInterval:v=4e3,pauseOnHover:ce=!0,showArrows:le=!0,showDots:ue=!0,swipeable:de=!0,lazyRender:fe=!1,adaptiveHeight:y=!1,className:pe,style:me,classNames:b,styles:x,...S}=e(`Carousel`,p),C=i.useId(),w=i.Children.toArray(ie),T=w.length,E=se&&T>1,D=+!!E,O=E?[w[T-1],...w,w[0]]:w,k=g!==void 0,[he,ge]=c(()=>h(ae,T,E)),A=h(k?g:he,T,E),[j,M]=c(A+D),[_e,N]=c(!0),P=s(A),[ve,F]=c(!1),[ye,I]=c(!1),[be,L]=c(!1),R=s(null),z=s(null),B=s(null),V=O.length>0?100/O.length:100;o(()=>{let e=P.current;if(P.current=A,e===A)return;let t=O.length-1,n=j;E&&j===0?n=T:E&&j===t&&(n=1);let r=E&&e===T-1&&A===0,i=E&&e===0&&A===T-1,a;a=r?n+1:i?n-1:A+D;let o=z.current;n!==j&&o&&(o.style.transition=`none`,o.style.transform=m(n,0,V),o.offsetWidth,o.style.transition=``),N(!0),M(a)},[A]);let[H,xe]=c(()=>({min:A+D-1,max:A+D+1})),Se=Math.min(H.min,j-1),Ce=Math.max(H.max,j+1),[we,Te]=c(void 0);o(()=>{if(!y)return;let e=z.current?.children[j];if(!e)return;let t=()=>Te(e.offsetHeight);t();let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[y,j,T]),o(()=>{let e=B.current,t=e?.children[A];!e||!t||(e.scrollLeft=t.offsetLeft-(e.clientWidth-t.offsetWidth)/2)},[A,T]);function U(e){let t=h(e,T,E);k||ge(t),oe(t)}function W(){!E&&A>=T-1||U(A+1)}function G(){!E&&A<=0||U(A-1)}function Ee(e){e.target===e.currentTarget&&(xe({min:j-1,max:j+1}),E&&(j===0?(N(!1),M(T)):j===O.length-1&&(N(!1),M(1))))}let K=_&&ce,q=ve||ye||be;a(()=>{if(!_||T<=1||q)return;let e=setInterval(W,v);return()=>clearInterval(e)},[_,v,q,A,T]);let J=s(null);function De(e){!de||T<=1||(J.current={startX:e.clientX,startY:e.clientY,width:R.current?.getBoundingClientRect().width||1,axisLocked:!1,active:!0,offsetPercent:0})}function Oe(e){let t=J.current;if(!t||!t.active)return;let n=e.clientX-t.startX,r=e.clientY-t.startY;if(!t.axisLocked){if(Math.abs(n)<f&&Math.abs(r)<f)return;if(Math.abs(r)>Math.abs(n)){t.active=!1;return}t.axisLocked=!0,e.currentTarget.setPointerCapture?.(e.pointerId),L(!0),N(!1)}t.offsetPercent=n/t.width*100,z.current&&(z.current.style.transform=m(j,t.offsetPercent,V))}function Y(){let e=J.current;if(J.current=null,!e||!e.axisLocked){L(!1);return}N(!0),L(!1),z.current&&(z.current.style.transition=``,z.current.style.transform=m(j,0,V)),Math.abs(e.offsetPercent)>=re*100&&(e.offsetPercent<0?W():G())}function ke(e){e.defaultPrevented||z.current?.contains(e.target)||(e.key===`ArrowLeft`?(e.preventDefault(),G()):e.key===`ArrowRight`&&(e.preventDefault(),W()))}function Ae(e){let t=null;if(e.key===`ArrowLeft`?t=A-1:e.key===`ArrowRight`?t=A+1:e.key===`Home`?t=0:e.key===`End`&&(t=T-1),t===null)return;e.preventDefault();let n=h(t,T,E);U(n),(B.current?.children[n])?.focus()}let X=ue&&T>1,je=e=>`${C}-dot-${e}`,Z=e=>`${C}-slide-${e}`,Me=S[`aria-label`]!==void 0||S[`aria-labelledby`]!==void 0;function Ne(e){return X?{id:Z(e),role:`tabpanel`,"aria-labelledby":je(e)}:{id:Z(e),role:`group`,"aria-roledescription":`slide`,"aria-label":`${e+1} of ${T}`}}let Q=!E&&A<=0,$=!E&&A>=T-1,Pe=m(j,0,V);return d(`div`,{...S,ref:R,role:Me?`region`:`group`,"aria-roledescription":`carousel`,className:l(r.carousel,y&&r.carouselAdaptive,b?.root,pe),style:{height:y?we:void 0,...me,...x?.root},onMouseEnter:K?()=>F(!0):void 0,onMouseLeave:K?()=>F(!1):void 0,onFocus:K?()=>I(!0):void 0,onBlur:K?()=>I(!1):void 0,onKeyDown:ke,children:[u(`div`,{ref:z,className:l(r.carouselTrack,y&&r.carouselTrackAdaptive,b?.track),style:{width:`${O.length*100}%`,transform:Pe,transition:_e?void 0:`none`,...x?.track},"aria-live":_?`off`:`polite`,onTransitionEnd:Ee,onPointerDown:De,onPointerMove:Oe,onPointerUp:Y,onPointerCancel:Y,children:O.map((e,t)=>{let n=E&&(t===0||t===O.length-1),i=t-D,a=!n&&i===A,o=!fe||t>=Se&&t<=Ce;return u(`div`,{...n?{}:Ne(i),className:l(r.carouselSlide,b?.slide),style:{width:`${100/O.length}%`,...x?.slide},inert:a?void 0:!0,children:o?e:null},`carousel-slide-${t}`)})}),le&&T>1&&d(ne,{children:[u(n,{icon:ee,title:`Previous slide`,"aria-label":`Previous slide`,"aria-disabled":Q||void 0,onClick:()=>!Q&&G(),className:l(r.carouselPrevButton,Q&&r.carouselButtonDisabled,b?.prevButton),style:x?.prevButton}),u(n,{icon:te,title:`Next slide`,"aria-label":`Next slide`,"aria-disabled":$||void 0,onClick:()=>!$&&W(),className:l(r.carouselNextButton,$&&r.carouselButtonDisabled,b?.nextButton),style:x?.nextButton})]}),X&&u(`div`,{ref:B,role:`tablist`,"aria-label":`Slides`,className:l(r.carouselDots,b?.dots),style:x?.dots,onKeyDown:Ae,children:w.map((e,n)=>u(t,{id:je(n),role:`tab`,"aria-label":`Go to slide ${n+1}`,"aria-selected":n===A,"aria-controls":Z(n),tabIndex:n===A?0:-1,onClick:()=>U(n),className:l(r.carouselDot,n===A&&r.carouselDotActive,b?.dot),style:x?.dot},`carousel-dot-${n}`))})]})}function m(e,t,n){return`translateX(calc(${-e*n}% + ${n/100*t}%))`}function h(e,t,n){return t===0?0:n?(e%t+t)%t:Math.max(0,Math.min(t-1,e))}export{p as default};
|
|
2
2
|
//# sourceMappingURL=carousel.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"carousel.mjs","names":[],"sources":["../../../../package/common/carousel/carousel.tsx"],"sourcesContent":["import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport cx from 'classnames';\nimport { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';\n\nimport ActionIcon from '../actionIcon';\nimport InteractableDiv from '../interactableDiv';\nimport { useComponentDefaults } from '../configProvider';\nimport type { CarouselProps } from './carousel.types';\n\nimport styles from './carousel.module.pcss';\n\nconst AXIS_LOCK_THRESHOLD = 10;\nconst DRAG_COMMIT_RATIO = 0.2;\n\nfunction Carousel(props: CarouselProps) {\n const {\n children,\n currentIndex,\n defaultIndex = 0,\n onChange = () => {},\n loop = true,\n autoPlay = false,\n autoPlayInterval = 4000,\n pauseOnHover = true,\n showArrows = true,\n showDots = true,\n swipeable = true,\n lazyRender = false,\n adaptiveHeight = false,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('Carousel', props);\n\n const slides = React.Children.toArray(children);\n const count = slides.length;\n const canLoop = loop && count > 1;\n const offset = canLoop ? 1 : 0;\n const extendedSlides = canLoop ? [slides[count - 1], ...slides, slides[0]] : slides;\n\n const isControlled = currentIndex !== undefined;\n const [internalIndex, setInternalIndex] = useState(() => clampIndex(defaultIndex, count, canLoop));\n const realIndex = clampIndex(isControlled ? currentIndex! : internalIndex, count, canLoop);\n\n const [displayIndex, setDisplayIndex] = useState(realIndex + offset);\n const [transitionEnabled, setTransitionEnabled] = useState(true);\n const prevRealIndexRef = useRef(realIndex);\n\n const [hovered, setHovered] = useState(false);\n const [focused, setFocused] = useState(false);\n const [dragging, setDragging] = useState(false);\n\n const containerRef = useRef<HTMLDivElement>(null);\n const trackRef = useRef<HTMLDivElement>(null);\n\n const slideWidthPercent = extendedSlides.length > 0 ? 100 / extendedSlides.length : 100;\n\n useLayoutEffect(() => {\n const prevReal = prevRealIndexRef.current;\n prevRealIndexRef.current = realIndex;\n if (prevReal === realIndex) return;\n\n // A wrap parks the track on a clone until transitionEnd swaps it back, so a change arriving\n // before that has to animate from the normalised position rather than the clone.\n const lastExtendedIndex = extendedSlides.length - 1;\n let fromIndex = displayIndex;\n if (canLoop && displayIndex === 0) fromIndex = count;\n else if (canLoop && displayIndex === lastExtendedIndex) fromIndex = 1;\n\n const forwardWrap = canLoop && prevReal === count - 1 && realIndex === 0;\n const backwardWrap = canLoop && prevReal === 0 && realIndex === count - 1;\n\n let target: number;\n if (forwardWrap) target = fromIndex + 1;\n else if (backwardWrap) target = fromIndex - 1;\n else target = realIndex + offset;\n\n // Written straight to the node: the normalised position has to reach style recalculation on its\n // own, or it and the animated position collapse into one jump with no transition.\n const track = trackRef.current;\n if (fromIndex !== displayIndex && track) {\n track.style.transition = 'none';\n track.style.transform = buildTrackTransform(fromIndex, 0, slideWidthPercent);\n void track.offsetWidth;\n track.style.transition = '';\n }\n\n setTransitionEnabled(true);\n setDisplayIndex(target);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [realIndex]);\n\n // The window of slides `lazyRender` keeps mounted, as of the last settled position. Slides are\n // rendered for the union of this and the current window, so the ones a multi-step jump slides\n // past stay mounted until the transform transition ends instead of blanking out mid-flight.\n const [settledMountRange, setSettledMountRange] = useState(() => ({\n min: realIndex + offset - 1,\n max: realIndex + offset + 1,\n }));\n const mountMin = Math.min(settledMountRange.min, displayIndex - 1);\n const mountMax = Math.max(settledMountRange.max, displayIndex + 1);\n\n const [contentHeight, setContentHeight] = useState<number | undefined>(undefined);\n\n useLayoutEffect(() => {\n if (!adaptiveHeight) return;\n const slideElement = trackRef.current?.children[displayIndex] as HTMLElement | undefined;\n if (!slideElement) return;\n\n const update = () => setContentHeight(slideElement.offsetHeight);\n update();\n\n const observer = new ResizeObserver(update);\n observer.observe(slideElement);\n return () => observer.disconnect();\n }, [adaptiveHeight, displayIndex, count]);\n\n function goToIndex(nextIndex: number) {\n const clamped = clampIndex(nextIndex, count, canLoop);\n if (!isControlled) setInternalIndex(clamped);\n onChange(clamped);\n }\n\n function goNext() {\n if (!canLoop && realIndex >= count - 1) return;\n goToIndex(realIndex + 1);\n }\n\n function goPrev() {\n if (!canLoop && realIndex <= 0) return;\n goToIndex(realIndex - 1);\n }\n\n function handleTrackTransitionEnd(event: React.TransitionEvent<HTMLDivElement>) {\n if (event.target !== event.currentTarget) return;\n setSettledMountRange({ min: displayIndex - 1, max: displayIndex + 1 });\n\n if (!canLoop) return;\n if (displayIndex === 0) {\n setTransitionEnabled(false);\n setDisplayIndex(count);\n } else if (displayIndex === extendedSlides.length - 1) {\n setTransitionEnabled(false);\n setDisplayIndex(1);\n }\n }\n\n // Hover and focus only ever pause the timer, so without one they are not worth tracking.\n const tracksPointerPause = autoPlay && pauseOnHover;\n const isPaused = hovered || focused || dragging;\n useEffect(() => {\n if (!autoPlay || count <= 1 || isPaused) return;\n const timer = setInterval(goNext, autoPlayInterval);\n return () => clearInterval(timer);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [autoPlay, autoPlayInterval, isPaused, realIndex, count]);\n\n // A drag follows the pointer through the node, not through state: a render per move event would\n // rebuild every slide and dot for a change only the track's transform sees.\n const dragRef = useRef<{\n startX: number;\n startY: number;\n width: number;\n axisLocked: boolean;\n active: boolean;\n offsetPercent: number;\n } | null>(null);\n\n function handlePointerDown(event: React.PointerEvent<HTMLDivElement>) {\n if (!swipeable || count <= 1) return;\n dragRef.current = {\n startX: event.clientX,\n startY: event.clientY,\n // Measured once: measuring per move would force a layout between the transform writes.\n width: containerRef.current?.getBoundingClientRect().width || 1,\n axisLocked: false,\n active: true,\n offsetPercent: 0,\n };\n event.currentTarget.setPointerCapture?.(event.pointerId);\n }\n\n function handlePointerMove(event: React.PointerEvent<HTMLDivElement>) {\n const drag = dragRef.current;\n if (!drag || !drag.active) return;\n\n const deltaX = event.clientX - drag.startX;\n const deltaY = event.clientY - drag.startY;\n\n if (!drag.axisLocked) {\n if (Math.abs(deltaX) < AXIS_LOCK_THRESHOLD && Math.abs(deltaY) < AXIS_LOCK_THRESHOLD) return;\n if (Math.abs(deltaY) > Math.abs(deltaX)) {\n drag.active = false;\n return;\n }\n drag.axisLocked = true;\n setDragging(true);\n setTransitionEnabled(false);\n }\n\n drag.offsetPercent = (deltaX / drag.width) * 100;\n if (trackRef.current) {\n trackRef.current.style.transform = buildTrackTransform(displayIndex, drag.offsetPercent, slideWidthPercent);\n }\n }\n\n function handlePointerUp() {\n const drag = dragRef.current;\n dragRef.current = null;\n if (!drag || !drag.axisLocked) {\n setDragging(false);\n return;\n }\n\n setTransitionEnabled(true);\n setDragging(false);\n\n // React never saw the dragged transform, so it has to be handed back by hand. Unconditionally:\n // a drag that changes no index (either end of a non-looping carousel, a controlled owner that\n // ignores the change) would otherwise strand the track off-screen. One that does change it\n // overwrites this in the same tick, and still animates on from where the pointer left off.\n if (trackRef.current) {\n trackRef.current.style.transition = '';\n trackRef.current.style.transform = buildTrackTransform(displayIndex, 0, slideWidthPercent);\n }\n\n if (Math.abs(drag.offsetPercent) >= DRAG_COMMIT_RATIO * 100) {\n if (drag.offsetPercent < 0) goNext();\n else goPrev();\n }\n }\n\n function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n goPrev();\n } else if (event.key === 'ArrowRight') {\n event.preventDefault();\n goNext();\n }\n }\n\n const isPrevDisabled = !canLoop && realIndex <= 0;\n const isNextDisabled = !canLoop && realIndex >= count - 1;\n\n const trackTransform = buildTrackTransform(displayIndex, 0, slideWidthPercent);\n\n return (\n <div\n {...rest}\n ref={containerRef}\n role=\"region\"\n aria-roledescription=\"carousel\"\n className={cx(styles.carousel, adaptiveHeight && styles.carouselAdaptive, classNames?.root, className)}\n style={{ height: adaptiveHeight ? contentHeight : undefined, ...style, ...slotStyles?.root }}\n onMouseEnter={tracksPointerPause ? () => setHovered(true) : undefined}\n onMouseLeave={tracksPointerPause ? () => setHovered(false) : undefined}\n onFocus={tracksPointerPause ? () => setFocused(true) : undefined}\n onBlur={tracksPointerPause ? () => setFocused(false) : undefined}\n onKeyDown={handleKeyDown}\n >\n <div\n ref={trackRef}\n className={cx(styles.carouselTrack, adaptiveHeight && styles.carouselTrackAdaptive, classNames?.track)}\n style={{\n width: `${extendedSlides.length * 100}%`,\n transform: trackTransform,\n transition: transitionEnabled ? undefined : 'none',\n ...slotStyles?.track,\n }}\n onTransitionEnd={handleTrackTransitionEnd}\n onPointerDown={handlePointerDown}\n onPointerMove={handlePointerMove}\n onPointerUp={handlePointerUp}\n onPointerCancel={handlePointerUp}\n >\n {extendedSlides.map((slide, idx) => {\n const isClonePosition = canLoop && (idx === 0 || idx === extendedSlides.length - 1);\n const logicalIndex = idx - offset;\n const isActive = !isClonePosition && logicalIndex === realIndex;\n const isRendered = !lazyRender || (idx >= mountMin && idx <= mountMax);\n\n return (\n <div\n key={`carousel-slide-${idx}`}\n className={cx(styles.carouselSlide, classNames?.slide)}\n style={{ width: `${100 / extendedSlides.length}%`, ...slotStyles?.slide }}\n inert={isActive ? undefined : true}\n >\n {isRendered ? slide : null}\n </div>\n );\n })}\n </div>\n\n {showArrows && count > 1 && (\n <>\n <ActionIcon\n icon={faChevronLeft}\n title=\"Previous slide\"\n aria-label=\"Previous slide\"\n aria-disabled={isPrevDisabled || undefined}\n onClick={() => !isPrevDisabled && goPrev()}\n className={cx(styles.carouselPrevButton, isPrevDisabled && styles.carouselButtonDisabled, classNames?.prevButton)}\n style={slotStyles?.prevButton}\n />\n <ActionIcon\n icon={faChevronRight}\n title=\"Next slide\"\n aria-label=\"Next slide\"\n aria-disabled={isNextDisabled || undefined}\n onClick={() => !isNextDisabled && goNext()}\n className={cx(styles.carouselNextButton, isNextDisabled && styles.carouselButtonDisabled, classNames?.nextButton)}\n style={slotStyles?.nextButton}\n />\n </>\n )}\n\n {showDots && count > 1 && (\n <div className={cx(styles.carouselDots, classNames?.dots)} style={slotStyles?.dots}>\n {slides.map((_, index) => (\n <InteractableDiv\n key={`carousel-dot-${index}`}\n aria-label={`Go to slide ${index + 1}`}\n aria-current={index === realIndex}\n onClick={() => goToIndex(index)}\n className={cx(styles.carouselDot, index === realIndex && styles.carouselDotActive, classNames?.dot)}\n style={slotStyles?.dot}\n />\n ))}\n </div>\n )}\n </div>\n );\n}\n\nfunction buildTrackTransform(position: number, dragPercent: number, slideWidthPercent: number): string {\n return `translateX(calc(${-position * slideWidthPercent}% + ${dragPercent * (slideWidthPercent / 100)}%))`;\n}\n\nfunction clampIndex(index: number, count: number, canLoop: boolean): number {\n if (count === 0) return 0;\n if (canLoop) return ((index % count) + count) % count;\n return Math.max(0, Math.min(count - 1, index));\n}\n\nexport default Carousel;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"carousel.mjs","names":[],"sources":["../../../../package/common/carousel/carousel.tsx"],"sourcesContent":["import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport cx from 'classnames';\nimport { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';\n\nimport ActionIcon from '../actionIcon';\nimport InteractableDiv from '../interactableDiv';\nimport { useComponentDefaults } from '../configProvider';\nimport type { CarouselProps } from './carousel.types';\n\nimport styles from './carousel.module.pcss';\n\nconst AXIS_LOCK_THRESHOLD = 10;\nconst DRAG_COMMIT_RATIO = 0.2;\n\nfunction Carousel(props: CarouselProps) {\n const {\n children,\n currentIndex,\n defaultIndex = 0,\n onChange = () => {},\n loop = true,\n autoPlay = false,\n autoPlayInterval = 4000,\n pauseOnHover = true,\n showArrows = true,\n showDots = true,\n swipeable = true,\n lazyRender = false,\n adaptiveHeight = false,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('Carousel', props);\n\n const instanceId = React.useId();\n const slides = React.Children.toArray(children);\n const count = slides.length;\n const canLoop = loop && count > 1;\n const offset = canLoop ? 1 : 0;\n const extendedSlides = canLoop ? [slides[count - 1], ...slides, slides[0]] : slides;\n\n const isControlled = currentIndex !== undefined;\n const [internalIndex, setInternalIndex] = useState(() => clampIndex(defaultIndex, count, canLoop));\n const realIndex = clampIndex(isControlled ? currentIndex! : internalIndex, count, canLoop);\n\n const [displayIndex, setDisplayIndex] = useState(realIndex + offset);\n const [transitionEnabled, setTransitionEnabled] = useState(true);\n const prevRealIndexRef = useRef(realIndex);\n\n const [hovered, setHovered] = useState(false);\n const [focused, setFocused] = useState(false);\n const [dragging, setDragging] = useState(false);\n\n const containerRef = useRef<HTMLDivElement>(null);\n const trackRef = useRef<HTMLDivElement>(null);\n const dotsRef = useRef<HTMLDivElement>(null);\n\n const slideWidthPercent = extendedSlides.length > 0 ? 100 / extendedSlides.length : 100;\n\n useLayoutEffect(() => {\n const prevReal = prevRealIndexRef.current;\n prevRealIndexRef.current = realIndex;\n if (prevReal === realIndex) return;\n\n // A wrap parks the track on a clone until transitionEnd swaps it back, so a change arriving\n // before that has to animate from the normalised position rather than the clone.\n const lastExtendedIndex = extendedSlides.length - 1;\n let fromIndex = displayIndex;\n if (canLoop && displayIndex === 0) fromIndex = count;\n else if (canLoop && displayIndex === lastExtendedIndex) fromIndex = 1;\n\n const forwardWrap = canLoop && prevReal === count - 1 && realIndex === 0;\n const backwardWrap = canLoop && prevReal === 0 && realIndex === count - 1;\n\n let target: number;\n if (forwardWrap) target = fromIndex + 1;\n else if (backwardWrap) target = fromIndex - 1;\n else target = realIndex + offset;\n\n // Written straight to the node: the normalised position has to reach style recalculation on its\n // own, or it and the animated position collapse into one jump with no transition.\n const track = trackRef.current;\n if (fromIndex !== displayIndex && track) {\n track.style.transition = 'none';\n track.style.transform = buildTrackTransform(fromIndex, 0, slideWidthPercent);\n void track.offsetWidth;\n track.style.transition = '';\n }\n\n setTransitionEnabled(true);\n setDisplayIndex(target);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [realIndex]);\n\n // The window of slides `lazyRender` keeps mounted, as of the last settled position. Slides are\n // rendered for the union of this and the current window, so the ones a multi-step jump slides\n // past stay mounted until the transform transition ends instead of blanking out mid-flight.\n const [settledMountRange, setSettledMountRange] = useState(() => ({\n min: realIndex + offset - 1,\n max: realIndex + offset + 1,\n }));\n const mountMin = Math.min(settledMountRange.min, displayIndex - 1);\n const mountMax = Math.max(settledMountRange.max, displayIndex + 1);\n\n const [contentHeight, setContentHeight] = useState<number | undefined>(undefined);\n\n useLayoutEffect(() => {\n if (!adaptiveHeight) return;\n const slideElement = trackRef.current?.children[displayIndex] as HTMLElement | undefined;\n if (!slideElement) return;\n\n const update = () => setContentHeight(slideElement.offsetHeight);\n update();\n\n const observer = new ResizeObserver(update);\n observer.observe(slideElement);\n return () => observer.disconnect();\n }, [adaptiveHeight, displayIndex, count]);\n\n // Keeps the selected dot in view. Written as `scrollLeft` because `scrollIntoView` is free to\n // scroll the page along with it.\n useLayoutEffect(() => {\n const strip = dotsRef.current;\n const dot = strip?.children[realIndex] as HTMLElement | undefined;\n if (!strip || !dot) return;\n strip.scrollLeft = dot.offsetLeft - (strip.clientWidth - dot.offsetWidth) / 2;\n }, [realIndex, count]);\n\n function goToIndex(nextIndex: number) {\n const clamped = clampIndex(nextIndex, count, canLoop);\n if (!isControlled) setInternalIndex(clamped);\n onChange(clamped);\n }\n\n function goNext() {\n if (!canLoop && realIndex >= count - 1) return;\n goToIndex(realIndex + 1);\n }\n\n function goPrev() {\n if (!canLoop && realIndex <= 0) return;\n goToIndex(realIndex - 1);\n }\n\n function handleTrackTransitionEnd(event: React.TransitionEvent<HTMLDivElement>) {\n if (event.target !== event.currentTarget) return;\n setSettledMountRange({ min: displayIndex - 1, max: displayIndex + 1 });\n\n if (!canLoop) return;\n if (displayIndex === 0) {\n setTransitionEnabled(false);\n setDisplayIndex(count);\n } else if (displayIndex === extendedSlides.length - 1) {\n setTransitionEnabled(false);\n setDisplayIndex(1);\n }\n }\n\n // Hover and focus only ever pause the timer, so without one they are not worth tracking.\n const tracksPointerPause = autoPlay && pauseOnHover;\n const isPaused = hovered || focused || dragging;\n useEffect(() => {\n if (!autoPlay || count <= 1 || isPaused) return;\n const timer = setInterval(goNext, autoPlayInterval);\n return () => clearInterval(timer);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [autoPlay, autoPlayInterval, isPaused, realIndex, count]);\n\n // A drag follows the pointer through the node, not through state: a render per move event would\n // rebuild every slide and dot for something only the track's transform sees.\n const dragRef = useRef<{\n startX: number;\n startY: number;\n width: number;\n axisLocked: boolean;\n active: boolean;\n offsetPercent: number;\n } | null>(null);\n\n function handlePointerDown(event: React.PointerEvent<HTMLDivElement>) {\n if (!swipeable || count <= 1) return;\n dragRef.current = {\n startX: event.clientX,\n startY: event.clientY,\n // Measured once: measuring per move would force a layout between the transform writes.\n width: containerRef.current?.getBoundingClientRect().width || 1,\n axisLocked: false,\n active: true,\n offsetPercent: 0,\n };\n }\n\n function handlePointerMove(event: React.PointerEvent<HTMLDivElement>) {\n const drag = dragRef.current;\n if (!drag || !drag.active) return;\n\n const deltaX = event.clientX - drag.startX;\n const deltaY = event.clientY - drag.startY;\n\n if (!drag.axisLocked) {\n if (Math.abs(deltaX) < AXIS_LOCK_THRESHOLD && Math.abs(deltaY) < AXIS_LOCK_THRESHOLD) return;\n if (Math.abs(deltaY) > Math.abs(deltaX)) {\n drag.active = false;\n return;\n }\n drag.axisLocked = true;\n // Never on pointerdown: a captured pointer sends its `click` to the capture target too, so\n // capturing earlier would swallow every click meant for a button inside a slide.\n event.currentTarget.setPointerCapture?.(event.pointerId);\n setDragging(true);\n setTransitionEnabled(false);\n }\n\n drag.offsetPercent = (deltaX / drag.width) * 100;\n if (trackRef.current) {\n trackRef.current.style.transform = buildTrackTransform(displayIndex, drag.offsetPercent, slideWidthPercent);\n }\n }\n\n function handlePointerUp() {\n const drag = dragRef.current;\n dragRef.current = null;\n if (!drag || !drag.axisLocked) {\n setDragging(false);\n return;\n }\n\n setTransitionEnabled(true);\n setDragging(false);\n\n // React never saw the dragged transform, so it has to be handed back by hand, and always: a\n // drag that changes no index would otherwise strand the track off-screen. One that does change\n // it overwrites this in the same tick, and still animates on from where the pointer left off.\n if (trackRef.current) {\n trackRef.current.style.transition = '';\n trackRef.current.style.transform = buildTrackTransform(displayIndex, 0, slideWidthPercent);\n }\n\n if (Math.abs(drag.offsetPercent) >= DRAG_COMMIT_RATIO * 100) {\n if (drag.offsetPercent < 0) goNext();\n else goPrev();\n }\n }\n\n // Arrow keys belong to the carousel's own controls, never to the slides: a text field or a\n // scrollable region in a slide has to keep its own. `defaultPrevented` leaves the dots to their\n // own handling below.\n function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n if (event.defaultPrevented || trackRef.current?.contains(event.target as Node)) return;\n\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n goPrev();\n } else if (event.key === 'ArrowRight') {\n event.preventDefault();\n goNext();\n }\n }\n\n function handleDotsKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n let next: number | null = null;\n if (event.key === 'ArrowLeft') next = realIndex - 1;\n else if (event.key === 'ArrowRight') next = realIndex + 1;\n else if (event.key === 'Home') next = 0;\n else if (event.key === 'End') next = count - 1;\n if (next === null) return;\n\n event.preventDefault();\n const clamped = clampIndex(next, count, canLoop);\n goToIndex(clamped);\n // The selected dot is the one holding the tab stop, so focus has to travel with the selection.\n (dotsRef.current?.children[clamped] as HTMLElement | undefined)?.focus();\n }\n\n // The dots are the APG tablist over the slides. Without them the slides describe themselves as\n // plain slides rather than as panels.\n const hasTabs = showDots && count > 1;\n const dotId = (index: number) => `${instanceId}-dot-${index}`;\n const slideId = (index: number) => `${instanceId}-slide-${index}`;\n\n // An unnamed landmark is worse than none, so the carousel is only a region once it has a name.\n const isNamed = rest['aria-label'] !== undefined || rest['aria-labelledby'] !== undefined;\n\n function slideSemantics(index: number) {\n if (hasTabs) {\n return { id: slideId(index), role: 'tabpanel', 'aria-labelledby': dotId(index) };\n }\n return {\n id: slideId(index),\n role: 'group',\n 'aria-roledescription': 'slide',\n 'aria-label': `${index + 1} of ${count}`,\n };\n }\n\n const isPrevDisabled = !canLoop && realIndex <= 0;\n const isNextDisabled = !canLoop && realIndex >= count - 1;\n\n const trackTransform = buildTrackTransform(displayIndex, 0, slideWidthPercent);\n\n return (\n <div\n {...rest}\n ref={containerRef}\n role={isNamed ? 'region' : 'group'}\n aria-roledescription=\"carousel\"\n className={cx(styles.carousel, adaptiveHeight && styles.carouselAdaptive, classNames?.root, className)}\n style={{ height: adaptiveHeight ? contentHeight : undefined, ...style, ...slotStyles?.root }}\n onMouseEnter={tracksPointerPause ? () => setHovered(true) : undefined}\n onMouseLeave={tracksPointerPause ? () => setHovered(false) : undefined}\n onFocus={tracksPointerPause ? () => setFocused(true) : undefined}\n onBlur={tracksPointerPause ? () => setFocused(false) : undefined}\n onKeyDown={handleKeyDown}\n >\n <div\n ref={trackRef}\n className={cx(styles.carouselTrack, adaptiveHeight && styles.carouselTrackAdaptive, classNames?.track)}\n style={{\n width: `${extendedSlides.length * 100}%`,\n transform: trackTransform,\n transition: transitionEnabled ? undefined : 'none',\n ...slotStyles?.track,\n }}\n aria-live={autoPlay ? 'off' : 'polite'}\n onTransitionEnd={handleTrackTransitionEnd}\n onPointerDown={handlePointerDown}\n onPointerMove={handlePointerMove}\n onPointerUp={handlePointerUp}\n onPointerCancel={handlePointerUp}\n >\n {extendedSlides.map((slide, idx) => {\n const isClonePosition = canLoop && (idx === 0 || idx === extendedSlides.length - 1);\n const logicalIndex = idx - offset;\n const isActive = !isClonePosition && logicalIndex === realIndex;\n const isRendered = !lazyRender || (idx >= mountMin && idx <= mountMax);\n\n return (\n <div\n key={`carousel-slide-${idx}`}\n {...(isClonePosition ? {} : slideSemantics(logicalIndex))}\n className={cx(styles.carouselSlide, classNames?.slide)}\n style={{ width: `${100 / extendedSlides.length}%`, ...slotStyles?.slide }}\n inert={isActive ? undefined : true}\n >\n {isRendered ? slide : null}\n </div>\n );\n })}\n </div>\n\n {showArrows && count > 1 && (\n <>\n <ActionIcon\n icon={faChevronLeft}\n title=\"Previous slide\"\n aria-label=\"Previous slide\"\n aria-disabled={isPrevDisabled || undefined}\n onClick={() => !isPrevDisabled && goPrev()}\n className={cx(styles.carouselPrevButton, isPrevDisabled && styles.carouselButtonDisabled, classNames?.prevButton)}\n style={slotStyles?.prevButton}\n />\n <ActionIcon\n icon={faChevronRight}\n title=\"Next slide\"\n aria-label=\"Next slide\"\n aria-disabled={isNextDisabled || undefined}\n onClick={() => !isNextDisabled && goNext()}\n className={cx(styles.carouselNextButton, isNextDisabled && styles.carouselButtonDisabled, classNames?.nextButton)}\n style={slotStyles?.nextButton}\n />\n </>\n )}\n\n {hasTabs && (\n <div\n ref={dotsRef}\n role=\"tablist\"\n aria-label=\"Slides\"\n className={cx(styles.carouselDots, classNames?.dots)}\n style={slotStyles?.dots}\n onKeyDown={handleDotsKeyDown}\n >\n {slides.map((_, index) => (\n <InteractableDiv\n key={`carousel-dot-${index}`}\n id={dotId(index)}\n role=\"tab\"\n aria-label={`Go to slide ${index + 1}`}\n aria-selected={index === realIndex}\n aria-controls={slideId(index)}\n // One tab stop for the whole set, arrow keys inside it.\n tabIndex={index === realIndex ? 0 : -1}\n onClick={() => goToIndex(index)}\n className={cx(styles.carouselDot, index === realIndex && styles.carouselDotActive, classNames?.dot)}\n style={slotStyles?.dot}\n />\n ))}\n </div>\n )}\n </div>\n );\n}\n\nfunction buildTrackTransform(position: number, dragPercent: number, slideWidthPercent: number): string {\n return `translateX(calc(${-position * slideWidthPercent}% + ${dragPercent * (slideWidthPercent / 100)}%))`;\n}\n\nfunction clampIndex(index: number, count: number, canLoop: boolean): number {\n if (count === 0) return 0;\n if (canLoop) return ((index % count) + count) % count;\n return Math.max(0, Math.min(count - 1, index));\n}\n\nexport default Carousel;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"carousel.module.mjs","names":[],"sources":["../../../../package/common/carousel/carousel.module.pcss"],"sourcesContent":[".carousel {\n position: relative;\n overflow: hidden;\n border-radius: var(--default-border-radius);\n\n &-adaptive {\n transition: height 0.4s ease;\n }\n\n &-track {\n display: flex;\n align-items: stretch;\n transition: transform 0.4s ease;\n touch-action: pan-y;\n user-select: none;\n }\n\n &-trackAdaptive {\n align-items: flex-start;\n }\n\n &-slide {\n flex-shrink: 0;\n box-sizing: border-box;\n }\n\n &-prevButton,\n &-nextButton {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 1;\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background: var(--background-accent);\n color: var(--text-color);\n box-shadow: var(--card-shadow);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition: opacity 0.15s, background 0.15s;\n\n &:hover {\n background: var(--background-accent-light);\n }\n }\n\n &-buttonDisabled {\n opacity: 0.35;\n pointer-events: none;\n }\n\n &-prevButton {\n left: 12px;\n }\n\n &-nextButton {\n right: 12px;\n }\n\n &-dots {\n position: absolute;\n bottom:
|
|
1
|
+
{"version":3,"file":"carousel.module.mjs","names":[],"sources":["../../../../package/common/carousel/carousel.module.pcss"],"sourcesContent":[".carousel {\n position: relative;\n overflow: hidden;\n border-radius: var(--default-border-radius);\n\n &-adaptive {\n transition: height 0.4s ease;\n }\n\n &-track {\n display: flex;\n align-items: stretch;\n transition: transform 0.4s ease;\n touch-action: pan-y;\n user-select: none;\n }\n\n &-trackAdaptive {\n align-items: flex-start;\n }\n\n &-slide {\n flex-shrink: 0;\n box-sizing: border-box;\n }\n\n &-prevButton,\n &-nextButton {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 1;\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background: var(--background-accent);\n color: var(--text-color);\n box-shadow: var(--card-shadow);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition: opacity 0.15s, background 0.15s;\n\n &:hover {\n background: var(--background-accent-light);\n }\n\n &:focus-visible {\n outline: none;\n box-shadow: var(--card-shadow), 0 0 0 2px var(--primary-lighter);\n }\n }\n\n &-buttonDisabled {\n opacity: 0.35;\n pointer-events: none;\n }\n\n &-prevButton {\n left: 12px;\n }\n\n &-nextButton {\n right: 12px;\n }\n\n /* A scroll strip rather than a row that shrinks, so the dots keep their size at any slide count.\n The padding holds the outer dots clear of the fade until the strip has somewhere to scroll. */\n &-dots {\n position: absolute;\n bottom: 4px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 1;\n display: flex;\n box-sizing: border-box;\n width: max-content;\n max-width: 100%;\n padding-inline: 16px;\n overflow-x: auto;\n overscroll-behavior-x: contain;\n scroll-behavior: smooth;\n -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);\n mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);\n\n @media (prefers-reduced-motion: reduce) {\n scroll-behavior: auto;\n }\n }\n\n /* ScrollbarProvider reaches every scrollable element through `* { scrollbar-width: thin }`, which\n ties this on specificity and wins on order, so hiding the strip's scrollbar has to outweigh it. */\n & &-dots {\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n /* The dot stays 8px, its padding carries the hit area out to the 24px minimum. */\n &-dot {\n box-sizing: content-box;\n /* The strip is width-capped, and shrinking would pull the content box, the only part\n `background-clip` paints, down to nothing. */\n flex-shrink: 0;\n width: 8px;\n height: 8px;\n padding: 8px;\n border-radius: 2000px;\n background: var(--background-accent);\n background-clip: content-box;\n opacity: 0.6;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition: opacity 0.15s, background 0.15s, width 0.15s;\n\n &:hover {\n opacity: 0.85;\n }\n\n &:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--primary-lighter);\n }\n\n &-active {\n background: var(--primary-color);\n background-clip: content-box;\n opacity: 1;\n width: 20px;\n }\n }\n}\n"],"mappings":""}
|