@wethegit/react-gallery/dist/react-gallery.umd.cjs

A customizable, accessible gallery component for React projects.

(function(h,g){typeof exports=="object"&&typeof module<"u"?g(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],g):(h=typeof globalThis<"u"?globalThis:h||self,g(h.ReactGallery={},h.React))})(this,function(h,g){"use strict";var Y={exports:{}},C={};/**
 * @license React
 * react-jsx-runtime.production.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var X;function re(){if(X)return C;X=1;var r=Symbol.for("react.transitional.element"),c=Symbol.for("react.fragment");function f(_,s,l){var a=null;if(l!==void 0&&(a=""+l),s.key!==void 0&&(a=""+s.key),"key"in s){l={};for(var i in s)i!=="key"&&(l[i]=s[i])}else l=s;return s=l.ref,{$$typeof:r,type:_,key:a,ref:s!==void 0?s:null,props:l}}return C.Fragment=c,C.jsx=f,C.jsxs=f,C}var D={};/**
 * @license React
 * react-jsx-runtime.development.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var J;function te(){return J||(J=1,process.env.NODE_ENV!=="production"&&function(){function r(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ge?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case E:return"Fragment";case O:return"Profiler";case N:return"StrictMode";case R:return"Suspense";case F:return"SuspenseList";case _e:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case p:return"Portal";case M:return(e.displayName||"Context")+".Provider";case G:return(e._context.displayName||"Context")+".Consumer";case T:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case fe:return t=e.displayName||null,t!==null?t:r(e.type)||"Memo";case Q:t=e._payload,e=e._init;try{return r(e(t))}catch{}}return null}function c(e){return""+e}function f(e){try{c(e);var t=!1}catch{t=!0}if(t){t=console;var u=t.error,m=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return u.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",m),c(e)}}function _(e){if(e===E)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===Q)return"<...>";try{var t=r(e);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function s(){var e=L.A;return e===null?null:e.getOwner()}function l(){return Error("react-stack-top-frame")}function a(e){if(Z.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function i(e,t){function u(){B||(B=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}u.isReactWarning=!0,Object.defineProperty(e,"key",{get:u,configurable:!0})}function o(){var e=r(this.type);return K[e]||(K[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function n(e,t,u,m,S,P,W,z){return u=P.ref,e={$$typeof:A,type:e,key:t,props:P,_owner:S},(u!==void 0?u:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:o}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:W}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:z}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function d(e,t,u,m,S,P,W,z){var b=t.children;if(b!==void 0)if(m)if(de(b)){for(m=0;m<b.length;m++)k(b[m]);Object.freeze&&Object.freeze(b)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else k(b);if(Z.call(t,"key")){b=r(e);var I=Object.keys(t).filter(function(ye){return ye!=="key"});m=0<I.length?"{key: someKey, "+I.join(": ..., ")+": ...}":"{key: someKey}",ee[b+m]||(I=0<I.length?"{"+I.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
  let props = %s;
  <%s {...props} />
React keys must be passed directly to JSX without using spread:
  let props = %s;
  <%s key={someKey} {...props} />`,m,b,I,b),ee[b+m]=!0)}if(b=null,u!==void 0&&(f(u),b=""+u),a(t)&&(f(t.key),b=""+t.key),"key"in t){u={};for(var V in t)V!=="key"&&(u[V]=t[V])}else u=t;return b&&i(u,typeof e=="function"?e.displayName||e.name||"Unknown":e),n(e,b,P,S,s(),u,W,z)}function k(e){typeof e=="object"&&e!==null&&e.$$typeof===A&&e._store&&(e._store.validated=1)}var v=g,A=Symbol.for("react.transitional.element"),p=Symbol.for("react.portal"),E=Symbol.for("react.fragment"),N=Symbol.for("react.strict_mode"),O=Symbol.for("react.profiler"),G=Symbol.for("react.consumer"),M=Symbol.for("react.context"),T=Symbol.for("react.forward_ref"),R=Symbol.for("react.suspense"),F=Symbol.for("react.suspense_list"),fe=Symbol.for("react.memo"),Q=Symbol.for("react.lazy"),_e=Symbol.for("react.activity"),ge=Symbol.for("react.client.reference"),L=v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,Z=Object.prototype.hasOwnProperty,de=Array.isArray,U=console.createTask?console.createTask:function(){return null};v={"react-stack-bottom-frame":function(e){return e()}};var B,K={},q=v["react-stack-bottom-frame"].bind(v,l)(),$=U(_(l)),ee={};D.Fragment=E,D.jsx=function(e,t,u,m,S){var P=1e4>L.recentlyCreatedOwnerStacks++;return d(e,t,u,!1,m,S,P?Error("react-stack-top-frame"):q,P?U(_(e)):$)},D.jsxs=function(e,t,u,m,S){var P=1e4>L.recentlyCreatedOwnerStacks++;return d(e,t,u,!0,m,S,P?Error("react-stack-top-frame"):q,P?U(_(e)):$)}}()),D}process.env.NODE_ENV==="production"?Y.exports=re():Y.exports=te();var x=Y.exports;const w=(r=[])=>{if(!r||!Array.isArray(r)||!r.length)return null;let c=[];return r.forEach(f=>{typeof f=="string"&&c.push(f)}),c.join(" ")},y={"visually-hidden":"gallery-module__visually-hidden__8zDx-H",gallery:"gallery-module__gallery__VCgDes","gallery--draggable":"gallery-module__gallery--draggable__f9wp7C",gallery__main:"gallery-module__gallery__main__iLoFEC",gallery__item:"gallery-module__gallery__item__Y54ZpS","gallery__item--draggable":"gallery-module__gallery__item--draggable__bk-grQ","gallery__item--dragging":"gallery-module__gallery__item--dragging__QyPOcL",gallery__nav:"gallery-module__gallery__nav__LiuEC8",gallery__pagination:"gallery-module__gallery__pagination__Fq3Nx2","gallery__pagination-item":"gallery-module__gallery__pagination-item__ys5srP"},H=g.createContext(),ae={isDragging:!1,start:0,xOffset:0,offsetting:!1,scrolling:!0},le=50,ne=({loop:r=!1,draggable:c=!0,startIndex:f=0,visibleRange:_=-1,ariaLiveText:s="Item $i of $t.",items:l,onChange:a,className:i,children:o})=>{const[n,d]=g.useState(()=>f||0),[k,v]=g.useState(()=>f||0),[A,p]=g.useState(()=>ae),E=g.useRef([]);if(!Array.isArray(l))throw new Error("<Gallery> items prop must be an Array.");const N=g.useCallback(()=>{v(n),d(T=>{let R=T+1;return T===l.length-1&&(R=r?0:T),a&&a({oldIndex:T,newIndex:R,direction:1}),R})},[n,l.length,r,a]),O=g.useCallback(()=>{v(n),d(T=>{let R=T-1;return T===0&&(R=r?l.length-1:T),a&&a({oldIndex:T,newIndex:R,direction:0}),R})},[n,l.length,r,a]),G=g.useCallback(T=>{const R=l[T]?T:0;v(n),d(R);const F=R-n>0?1:0;a&&a({oldIndex:n,newIndex:R,direction:F})},[n,a,l]);g.useEffect(()=>{l[n]||G()},[n,l,G]);const M={galleryItems:l,itemNodes:E,startIndex:f,activeIndex:n,setActiveIndex:d,previouslyActiveIndex:k,setPreviouslyActiveIndex:v,goToIndex:G,next:N,previous:O,loop:r,draggable:c,touchState:A,setTouchState:p,swipeThreshold:le,onChange:a,visibleRange:_};return x.jsx(H.Provider,{value:M,children:x.jsxs("div",{className:w([y.gallery,c&&y["gallery--draggable"],i]),style:{"--touch-offset":A.xOffset},children:[o,s&&x.jsx("p",{"aria-live":"polite",className:y["visually-hidden"],children:s.replace("$i",n+1).replace("$t",l.length)})]})})},j=()=>{const r=g.useContext(H);if(!r)throw new Error("useGallery must be called from within a <Gallery>.");return r},oe=({renderGalleryItem:r,className:c,...f})=>{const{activeIndex:_,galleryItems:s,next:l,previous:a,draggable:i,touchState:o,setTouchState:n,swipeThreshold:d}=j(),k=g.useCallback(()=>{i&&n(p=>({...p,isDragging:!0}))},[i,n]),v=g.useCallback(p=>{if(i&&!o.scrolling&&o.isDragging===!0&&p.clientY)if(!o.start)n(E=>({...E,start:{x:p.clientX,y:p.clientY}}));else{const E=p.clientX-o.start.x,N=p.clientY-o.start.y;o.offsetting?n(O=>({...O,xOffset:E})):(Math.abs(N)>20&&n(O=>({...O,scrolling:!0})),Math.abs(E)>10&&n(O=>({...O,offsetting:!0,xOffset:E})))}},[i,o.scrolling,o.isDragging,o.start,o.offsetting,n]),A=g.useCallback(()=>{i&&o.isDragging&&(Math.abs(o.xOffset)>d&&(o.xOffset<0?l():a()),n(p=>({...p,isDragging:!1,xOffset:0,start:0,offsetting:!1,scrolling:!1})))},[i,o.isDragging,o.xOffset,d,n,l,a]);return x.jsx("ul",{className:w([y.gallery__main,c]),onPointerDown:i?k:null,onPointerMove:i?v:null,onPointerUp:i?A:null,style:{"--selected":_,"--total":s.length},...f,children:s.map((p,E)=>r({item:p,index:E,activeIndex:_,active:_===E}))})},se=({renderPaginationItem:r,className:c,...f})=>{const{activeIndex:_,galleryItems:s}=j();return x.jsx("ul",{className:w([y.gallery__pagination,c]),...f,children:s.map((l,a)=>r({index:a,active:_===a,activeIndex:_,item:l}))})},ie=({index:r,active:c,className:f,buttonClassName:_,buttonProps:s,children:l,...a})=>{const{goToIndex:i,itemNodes:o}=j(),n=d=>{i(d),o.current[d].focus({preventScroll:!0})};return x.jsx("li",{className:w([y["gallery__pagination-item"],f]),...a,children:x.jsx("button",{className:_,"aria-current":c?"true":null,onClick:()=>n(r),...s,children:l})})},ce=({direction:r,renderNavItem:c,className:f,children:_,...s})=>{const{next:l,previous:a,loop:i,activeIndex:o,galleryItems:n}=j(),d=()=>{r?l():a()},k=r&&o===n.length-1||!r&&o===0,v={disabled:k?!0:null,"aria-disabled":k?"true":null};return!_&&!c?null:x.jsx("button",{className:w([y.gallery__nav,y[`gallery__nav--${r?"next":"previous"}`],f]),onClick:d,...!i&&v,...s,children:_||c({activeIndex:o,disabled:!i&&k})})},ue=({index:r,active:c,className:f,children:_,...s})=>{const{itemNodes:l,activeIndex:a,previouslyActiveIndex:i,draggable:o,touchState:n,visibleRange:d}=j(),k={"aria-hidden":c?null:"true",tabIndex:c?0:-1};return x.jsx("li",{ref:v=>l.current[r]=v,...k,...s,className:w([y.gallery__item,o&&y["gallery__item--draggable"],o&&n.offsetting&&y["gallery__item--dragging"],c&&y["gallery__item--active"],r===i&&y["gallery__item--was-active"],r<a&&y["gallery__item--left"],r>a&&y["gallery__item--right"],(d===-1||Math.abs(r-a)<=d)&&y["gallery__item--visible"],f]),style:{"--i":r,"--center-offset":Math.abs(r-a),"--index-offset":r-a,"--side":r<a?-1:r>a?1:0,"--active":c?1:0},children:_})};h.Gallery=ne,h.GalleryItem=ue,h.GalleryMain=oe,h.GalleryNav=ce,h.GalleryPagination=se,h.GalleryPaginationItem=ie,h.useGallery=j,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});