@blossom-carousel/react
Version:
A native-scroll-first carousel component for React.
1 lines • 9.52 kB
JavaScript
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`react`),require(`react/jsx-runtime`)):typeof define==`function`&&define.amd?define([`exports`,`react`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.BlossomCarousel={},e.React,e.React))})(this,function(e,t,n){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var r=Object.create,i=Object.defineProperty,a=Object.getOwnPropertyDescriptor,o=Object.getOwnPropertyNames,s=Object.getPrototypeOf,c=Object.prototype.hasOwnProperty,l=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var s=o(t),l=0,u=s.length,d;l<u;l++)d=s[l],!c.call(e,d)&&d!==n&&i(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(r=a(t,d))||r.enumerable});return e};t=((e,t,n)=>(n=e==null?{}:r(s(e)),l(t||!e||!e.__esModule?i(n,`default`,{value:e,enumerable:!0}):n,e)))(t,1);var u=`data-blossom-slide`;function d(e){return!!e&&typeof e==`object`&&u in e}function f(e){let n=0;return t.Children.forEach(e,e=>{if(!(0,t.isValidElement)(e))return;d(e.props)&&n++;let r=e.props?.children;r!==void 0&&(n+=f(r))}),n}function p(e){return f(e)}var m=new Map;function h(e,t){m.set(e,t)}function g(e){return e?m.get(e)??0:0}var _=(0,t.forwardRef)(({children:e,as:r=`div`,repeat:i=!1,load:a=`conditional`,...o},s)=>{let c=r,l=(0,t.useRef)(null),u=(0,t.useRef)(null);return o.id&&h(o.id,p(e)),(0,t.useEffect)(()=>{if(!l.current||!window.matchMedia(`(hover: hover) and (pointer: fine)`).matches&&a!==`always`)return;let e=!1;return import(`@blossom-carousel/core`).then(({Blossom:t})=>{if(e||!l.current)return;let n=t(l.current,{repeat:i});u.current=n,n.init()}),()=>{e=!0,u.current?.destroy(),u.current=null}},[i,a]),(0,t.useImperativeHandle)(s,()=>({prev:e=>u.current?.prev(e),next:e=>u.current?.next(e),element:l.current}),[]),(0,n.jsx)(c,{ref:l,"blossom-carousel":`true`,...o,children:e})});_.displayName=`BlossomCarousel`;function v(e){return getComputedStyle(e).direction===`rtl`}function y(e,t){return t?-e.scrollLeft:e.scrollLeft}function b(e){if(!e||e===`none`)return`none`;let t=e.trim().split(/\s+/),n=t.length===2?t[1]:t[0];return n===`center`||n===`end`?n:`start`}function x(e){let t=b(e);return t===`none`?`start`:t}function S(e,t,n,r,i,a,o,s=getComputedStyle(t)){let c=t.getBoundingClientRect(),l=(o?r.right-c.right:c.left-r.left)+y(e,o),u=parseFloat(s.scrollMarginInlineStart)||0,d=parseFloat(s.scrollMarginInlineEnd)||0,f=l-u,p=l+t.clientWidth+d,m=e.clientWidth;switch(n){case`end`:return p-m+a;case`center`:return(f+p)/2-m/2;default:return f-i}}function C(e){return e.map(e=>({el:e,align:x(getComputedStyle(e).scrollSnapAlign)}))}function w(e){let t=e.getBoundingClientRect(),n=getComputedStyle(e),r=n.direction===`rtl`,i=parseFloat(n.scrollPaddingInlineStart)||0,a=parseFloat(n.scrollPaddingInlineEnd)||0,o=Math.max(e.scrollWidth-e.clientWidth,0),s=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT),c=[],l=s.nextNode();for(;l;){let n=l,u=getComputedStyle(n),d=b(u.scrollSnapAlign);if(d!==`none`){let s=S(e,n,d,t,i,a,r,u);c.push({el:n,align:d,x:Math.min(Math.max(s,0),o)})}l=s.nextNode()}return c.sort((e,t)=>e.x-t.x),c.reduce((e,t)=>((e.length===0||Math.abs(e[e.length-1].x-t.x)>1)&&e.push(t),e),[])}var T=new WeakMap;function E(e,t){T.set(e,t)}function D(e){return T.get(e)}function ee(e){T.delete(e)}var te=.85,O=1;function k(e,t){let n=Math.max(e.scrollWidth-e.clientWidth,0),r=Math.abs(e.scrollLeft);return t===`prev`?r>O:r<n-O}function A(e,t,n){if(n===`next`){for(let n=0;n<e.length;n++)if(e[n].x>t+O&&e[n].el.isConnected)return e[n]}else for(let n=e.length-1;n>=0;n--)if(e[n].x<t-O&&e[n].el.isConnected)return e[n];return null}function j(e,t){let n=D(e),r=n?.pages??w(e),i=n?.rtl??v(e);if(r.length){let n=A(r,y(e,i),t);if(!n)return;n.el.scrollIntoView({block:`nearest`,inline:n.align,behavior:`smooth`});return}let a=e.clientWidth*te*(t===`next`?1:-1);e.scrollBy({left:i?-a:a,behavior:`smooth`})}var M=`[data-blossom-slide]`,N=1;function P(e){return Array.from(e.querySelectorAll(M))}function F(e,t){let n=e.clientWidth,r=e.scrollWidth-n,i=e.getBoundingClientRect(),a=getComputedStyle(e),o=a.direction===`rtl`,s=parseFloat(a.scrollPaddingInlineStart)||0,c=parseFloat(a.scrollPaddingInlineEnd)||0,l=t.map(t=>{let n=getComputedStyle(t),r=b(n.scrollSnapAlign);return S(e,t,r===`none`?`start`:r,i,s,c,o,n)});if(r>0){let e=Math.min(n/8,r/2),t=l.filter(t=>t<e);if(t.length>0){let n=Math.min(...t),r=e-n;if(r>0)for(let t=0;t<l.length;t++)l[t]<e&&(l[t]=(l[t]-n)/r*e)}let i=r-e,a=l.filter(e=>e>i);if(a.length>0){let t=Math.max(...a)-i;if(t>0)for(let n=0;n<l.length;n++)l[n]>i&&(l[n]=(l[n]-i)/t*e+i)}}return l}function ne(e,t,n,r=[...e].sort((e,t)=>e-t)){if(e.length===0)return-1;if(e.length===1)return 0;let i=n/2,a=null;for(let e=0;e<r.length;e++){let n=r[e],o=e>0?r[e-1]:-1/0;(n<=t+N||o<t-i&&n<t+i)&&(a=n)}a===null&&(a=r[0]);for(let t=0;t<e.length;t++)if(Math.abs(e[t]-a)<=N)return t;return 0}function re(e,t,n){if(t.length===0)return-1;if(t.length===1)return 0;let r=e.clientWidth;if(e.scrollWidth-r<=0)return 0;let i=n?.rtl??v(e);return ne(n?.activePositions??F(e,t),y(e,i),r,n?.sortedActivePositions)}var I=`--blossom-`,L={prev:`${I}prev`,next:`${I}next`,gotoPrefix:`${I}goto-`},R=Symbol.for(`blossom-carousel.navigation.registry`);function z(e,t){if(t===L.prev)j(e,`prev`);else if(t===L.next)j(e,`next`);else if(t.startsWith(L.gotoPrefix)){let n=Number.parseInt(t.slice(L.gotoPrefix.length),10);if(Number.isNaN(n)||n<0)return;let r=D(e)?.markers[n],i=r?.el.isConnected?r:void 0,a=i?.el??P(e)[n];if(!a)return;let o=i?.align??x(getComputedStyle(a).scrollSnapAlign);a.scrollIntoView({block:`nearest`,inline:o,behavior:`smooth`})}}function B(e){U();let t=e,n=t[R];if(n)return n.count++,()=>V(t);let r=t=>{let n=t.command??t.detail?.command;typeof n==`string`&&n.startsWith(I)&&z(e,n)};return e.addEventListener(`command`,r),t[R]={count:1,handler:r},()=>V(t)}function V(e){let t=e[R];t&&(t.count--,t.count<=0&&(e.removeEventListener(`command`,t.handler),delete e[R]))}var H=!1;function U(){H||typeof document>`u`||(H=!0,!(typeof HTMLButtonElement<`u`&&`commandForElement`in HTMLButtonElement.prototype)&&document.addEventListener(`click`,e=>{let t=e.target?.closest?.(`button[commandfor]`);if(!t)return;let n=t.getAttribute(`commandfor`),r=t.getAttribute(`command`);!n||!r||document.getElementById(n)?.dispatchEvent(new CustomEvent(`command`,{bubbles:!1,detail:{command:r}}))}))}function W(e){let t=D(e),n=t?.targets??P(e);return{count:n.length,activeIndex:re(e,n,t),canPrev:k(e,`prev`),canNext:k(e,`next`)}}function G(e){let t=P(e),n=F(e,t);E(e,{targets:t,markers:C(t),pages:w(e),activePositions:n,sortedActivePositions:[...n].sort((e,t)=>e-t),rtl:v(e)})}var K=Symbol.for(`blossom-carousel.navigation.observers`);function q(e){let t=new Set,n=0,r=!0,i=()=>{cancelAnimationFrame(n),n=requestAnimationFrame(()=>{r&&(r=!1,G(e));let n=W(e);for(let e of t)e(n)})},a=()=>i(),o=()=>{r=!0,i()};e.addEventListener(`scroll`,a,{passive:!0}),e.addEventListener(`scrollend`,a,{passive:!0});let s=new ResizeObserver(o);s.observe(e);let c=new MutationObserver(o);return c.observe(e,{childList:!0,subtree:!0}),{subscribers:t,flush:i,teardown:()=>{cancelAnimationFrame(n),e.removeEventListener(`scroll`,a),e.removeEventListener(`scrollend`,a),s.disconnect(),c.disconnect(),ee(e)}}}function J(e,t){let n=e,r=n[K]??q(e);return n[K]=r,r.subscribers.add(t),r.flush(),()=>{let e=n[K];e&&(e.subscribers.delete(t),e.subscribers.size===0&&(e.teardown(),delete n[K]))}}var Y={activeIndex:-1,count:0,canPrev:!1,canNext:!1};function X(e){return{...Y,count:g(e)}}function Z(e){let[n,r]=(0,t.useState)(()=>X(e));return(0,t.useEffect)(()=>{if(r(X(e)),!e)return;let t=document.getElementById(e);if(!t)return;let n=B(t),i=J(t,r);return()=>{n(),i()}},[e]),n}function ie({for:e,children:t=`Previous`,disabled:r,...i}){let a=Z(e);return(0,n.jsx)(`button`,{"blossom-prev":``,type:`button`,command:L.prev,commandfor:e,disabled:r??!a.canPrev,"aria-controls":e,"aria-label":`Previous slide`,...i,children:t})}function ae({for:e,children:t=`Next`,disabled:r,...i}){let a=Z(e);return(0,n.jsx)(`button`,{"blossom-next":``,type:`button`,command:L.next,commandfor:e,disabled:r??!a.canNext,"aria-controls":e,"aria-label":`Next slide`,...i,children:t})}var Q=(0,t.createContext)(null);function oe({index:e,active:t,forId:r,children:i}){return(0,n.jsx)(Q.Provider,{value:{index:e,active:t,forId:r},children:i})}var $=L.gotoPrefix;function se(e){if(!e)return!1;let t=e({index:0,active:!1});return t!=null&&typeof t!=`boolean`}function ce({for:e,children:t,...r}){let i=Z(e),a=se(t);return(0,n.jsx)(`div`,{"data-blossom-dots":!0,role:`group`,"aria-label":`Choose slide to display`,...r,children:a?Array.from({length:i.count},(r,a)=>{let o=i.activeIndex===a;return(0,n.jsx)(oe,{index:a,active:o,forId:e,children:t({index:a,active:o})},a)}):Array.from({length:i.count},(t,r)=>(0,n.jsx)(`button`,{type:`button`,"data-blossom-dot":``,command:`${$}${r}`,commandfor:e,"aria-controls":e,"aria-current":i.activeIndex===r,"aria-label":`Go to slide ${r+1}`,children:(0,n.jsx)(`span`,{"data-blossom-dot-marker":``})},r))})}function le({children:e,...r}){let i=(0,t.useContext)(Q);return i||console.warn(`[BlossomDot] Must be used inside a BlossomDots slot.`),(0,n.jsx)(`button`,{type:`button`,"data-blossom-dot":!0,command:`${L.gotoPrefix}${i?.index??0}`,commandfor:i?.forId??``,"aria-controls":i?.forId,"aria-current":i?.active??!1,"aria-label":i?`Go to slide ${i.index+1}`:void 0,...r,children:e})}e.BlossomCarousel=_,e.BlossomDot=le,e.BlossomDots=ce,e.BlossomNext=ae,e.BlossomPrev=ie});