@plainsheet/react 0.2.0 → 0.3.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/README.md +7 -7
- package/dist/BottomSheet.d.ts +19 -0
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/useBottomSheet.d.ts +22 -0
- package/dist/index.d.ts +2 -1
- package/dist/plainsheet-react.cjs.js +1 -0
- package/dist/{plainsheet-core.es.js → plainsheet-react.es.js} +505 -478
- package/dist/plainsheet-react.umd.js +1 -0
- package/package.json +7 -7
- package/dist/ReactPlainBottomSheet.d.ts +0 -19
- package/dist/plainsheet-core.cjs.js +0 -1
- package/dist/plainsheet-core.umd.js +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(function(O,S){typeof exports=="object"&&typeof module<"u"?S(exports,require("react"),require("react-dom")):typeof define=="function"&&define.amd?define(["exports","react","react-dom"],S):(O=typeof globalThis<"u"?globalThis:O||self,S(O.BottomSheet={},O.React,O.ReactDOM))})(this,function(O,S,Lt){"use strict";function Ot(t){return t!=null}(function(){try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode('.pbs-root{position:fixed;left:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;height:fit-content;max-height:100vh;z-index:2}.pbs-dialog-reset{background-color:transparent;color:inherit;border:none;outline:none;padding:0;margin:0}.pbs-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;background-color:transparent;z-index:1;transition:background-color .2s ease-out}.pbs-backdrop.hidden{display:none}.pbs-backdrop.open{background-color:#454545b3}.pbs-container{--pbs-container-background-color: rgb(240, 240, 240);background-color:var(--pbs-container-background-color);position:relative;display:none;flex-direction:column;align-items:center;justify-content:flex-start;width:92%;height:fit-content;max-height:100vh;border-radius:10px 10px 0 0}.pbs-container.open{display:flex}.pbs-container .pbs-gap-filler{position:absolute;bottom:calc(-100vh + .5px);left:0;background-color:var(--pbs-container-background-color);content:"";width:100%;height:100vh}.pbs-handle{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:30px;cursor:pointer}.pbs-handle.hidden{display:none}.pbs-button-reset{background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none}button:focus.pbs-button-reset{outline:none}.pbs-handle-bar{background-color:#a8a8a8;position:relative;width:12%;height:7px;border-radius:12px}.pbs-handle-bar.hidden{display:none}.pbs-content-wrapper{position:relative;width:100%;height:fit-content;max-height:100%;overflow-y:scroll}.pbs-content-wrapper::-webkit-scrollbar{display:none}.example{-ms-overflow-style:none;scrollbar-width:none}')),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();var Dt=Object.defineProperty,Pt=(t,e,n)=>e in t?Dt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,$=(t,e,n)=>Pt(t,typeof e!="symbol"?e+"":e,n);function T(t){return typeof t=="string"}function Bt(t,e){return t.classList.contains(q(e))}function X(t,e){t.classList.add(q(e))}function tt(t,e){t.classList.remove(q(e))}function G(t,e,n){T(n)&&(T(e)&&tt(t,e),X(t,n))}function q(t){return T(t)?t.trim().replace(/\./g,""):""}function I(t){return t.map(e=>q(e)).filter(Boolean).join(" ")}function Mt(t){return t.map(e=>e==null?void 0:e.trim()).filter(Boolean).map(e=>`.${e}`).join(" ")}const lt="open",dt="hidden";function et(t,e){const n=e;if(Array.isArray(t)){t.forEach(o=>{z(o,n),o.setAttribute("aria-modal",n?"true":"false")});return}z(t,n),t.setAttribute("aria-modal",n?"true":"false")}function z(t,e){e?(X(t,lt),tt(t,dt)):(X(t,dt),tt(t,lt))}function pt(t){return t instanceof HTMLElement}function A(t){return typeof t=="number"&&!Number.isNaN(t)}function Yt(t){pt(t)&&t.focus()}function It(t){if(!pt(t)||t.offsetParent===null||"disabled"in t&&t.disabled)return!1;const e=t.getAttribute("tabindex"),n=A(e)?parseInt(e,10):-1,o=["INPUT","BUTTON","SELECT","TEXTAREA","A","AREA","IFRAME"].includes(t.tagName),i=t instanceof HTMLAnchorElement&&t.href!==""||t instanceof HTMLAreaElement&&t.href!=="";return o||i||n>-1}var C=(t=>(t.Backdrop="pbs-backdrop",t.Root="pbs-root",t.Container="pbs-container",t.GapFiller="pbs-gap-filler",t.Handle="pbs-handle",t.HandleBar="pbs-handle-bar",t.ContentWrapper="pbs-content-wrapper",t))(C||{}),nt=(t=>(t.Button="pbs-button-reset",t.Dialog="pbs-dialog-reset",t))(nt||{}),V=(t=>(t.Hidden="hidden",t))(V||{});function Y(t,e,n){const o=document.createElement(t);return e.split(" ").forEach(i=>{X(o,i)}),T(n)&&o.setAttribute("data-testid",n),o}Mt([C.Root,C.ContentWrapper]);function ht(t,e,n,o){switch(o){case"content-height":return e>=t?bt(t,e,n):0;case"middle":return-(t/2-e);case"top":return-(t-e)+n;default:return 0}}function mt(t,e){const n=e<t,o=e>t;return{isUp:n,isDown:o,stayedSame:e===t}}function ft(t,e){return e<t?-(t-e):e-t}function K(t,e){return t>e?t-e:e-t}function Rt(t,e){const n=t<e,o=t>e;return{isUp:n,isDown:o,stayedSame:t===e}}function gt(t,e,n){const o=t==="above";return n.filter(i=>{const r=i*e.viewportHeight;return o?e.visibleHeight<r:e.visibleHeight>r})}function bt(t,e,n){return-(t-e)+n}function vt(t){return Number(t.replace("px",""))}function J(t,...e){return Number(t.toFixed(...e))}function St(t){const e=/(?<type>\w+)\((?<values>[^)]+)\)/g,n=[];let o;for(;(o=e.exec(t))!==null;){const i=o[1],r=o[2].split(",").map(c=>c.trim());n.push({type:i,values:r})}return n}function Nt(t){const e=t.style.transform,n=St(e);return{transform:e,transformValues:n}}function Ct(t,e){return t.find(o=>o.type.startsWith(e))||null}const ot="translate";function P(t){const e=t.style.transform,n=St(e),o=Ct(n,ot);return wt(o??{type:ot,values:[]})}function Q(t,{x:e,y:n}){const{transform:o,transformValues:i}=Nt(t),r=Ct(i,ot);if(r){const c=wt(r);t.style.transform=`translate(${e??c.x??0}px,${n??c.y??0}px)`;return}if(o){t.style.transform=`${o}, translate(${e??0}px,${n??0}px)`;return}t.style.transform=`translate(${e??0}px,${n??0}px)`}function wt(t){if(t.type!=="translate")throw new Error(`Could not get coordinates from ${t.type}, since is not translate.`);const e=t.values[0],n=t.values[1];return{x:vt(e)??0,y:vt(n)??0}}function rt(t){return t!=null}function yt(t,{min:e,max:n}){return rt(n)&&t>=n?n:rt(e)&&t<=e?e:t}const Ft=(t,e,n)=>{e instanceof HTMLElement&&!Bt(e,C.Handle)&&n.scrollTop>=1||(t.isDragging=!0)},Wt=(t,e,n,o)=>i=>{o.startY=t.getCoordinates(i).y,o.containerStartTranslate=P(e),n.onDragStart()},jt=(t,e,n,o,i)=>r=>{Ut(r,t,n,o,i,e,n.marginTop)};function Ut(t,e,n,o,i,r,c){if(!o.isDragging||!A(o.startY))return;const s=e.getCoordinates(t).y,p=ft(o.startY,s),f=window.innerHeight,u=r.clientHeight,b=u-(o.containerStartTranslate.y+p);if(b>=f)return;const H=mt(o.startY,s);if(H.isUp&&!n.expandable&&b>=u)return;i.start(()=>{Q(r,{y:o.containerStartTranslate.y+p})},0);const a=f-c,x=u-o.containerStartTranslate.y;if(H.isUp){const v=a-x,w=a-b,k=yt(1-J(w/v,2),{min:0,max:1});n.onDragMove(H,k)}else if(H.isDown){const v=yt(J(1-b/x,2),{min:0,max:1});n.onDragMove(H,v)}}const Gt=(t,e,n,o,i,r,c)=>s=>{if(!o.isDragging||(o.isDragging=!1,!A(o.startY)))return;n.onDragEnd();const p=o.startY,f=t.getCoordinates(s).y,u=P(e).y,b=mt(p,f),H=window.innerHeight,a=e.clientHeight;if(b.isUp){const x=[...n.snapPoints].sort((k,y)=>k-y),v=a+-u;if(!n.expandable&&v>=a)return;for(const k of x){const y=k*window.innerHeight;if(v<=y){const M=K(v,y);c.translateContainer({startY:u,endY:u-M,animationFrame:i,bottomSheetContainer:e});return}}const w=bt(H,a,n.marginTop);c.translateContainer({startY:u,endY:w,animationFrame:i,bottomSheetContainer:e})}else if(b.isDown){const x=[...n.snapPoints].sort((v,w)=>w-v);for(const v of x){const w=v*window.innerHeight,k=a+-u;if(k>=w){const y=K(k,w);c.translateContainer({startY:u,endY:u+y,animationFrame:i,bottomSheetContainer:e});return}}r()}};var R=(t=>(t[t.All=-1]="All",t[t.None=0]="None",t[t.Capture=1]="Capture",t[t.Target=2]="Target",t[t.Bubble=3]="Bubble",t))(R||{});function Et(t){switch(t){case 0:return 0;case 1:return 1;case 2:return 2;case 3:return 3;default:return-1}}const _t={eventPhase:R.All};class _{constructor(e){$(this,"currentTarget"),this.currentTarget=e}addEventListeners({onStart:e,onStartOptions:n=_t,onMove:o,onEnd:i}){this.addTouchEventListeners({onStart:e,onStartOptions:n,onMove:o,onEnd:i}),this.addMouseEventListeners({onStart:e,onStartOptions:n,onMove:o,onEnd:i})}addTouchEventListeners({onStart:e,onStartOptions:n,onMove:o,onEnd:i}){e&&this.currentTarget.addEventListener("touchstart",r=>{if(n.eventPhase===R.All){e(r);return}Et(r.eventPhase)===n.eventPhase&&e(r)},{passive:!0}),o&&this.currentTarget.addEventListener("touchmove",o),i&&this.currentTarget.addEventListener("touchend",i)}addMouseEventListeners({onStart:e,onStartOptions:n,onMove:o,onEnd:i}){e&&this.currentTarget.addEventListener("mousedown",r=>{if(n.eventPhase===R.All){e(r);return}Et(r.eventPhase)===n.eventPhase&&e(r)},{passive:!0}),o&&this.currentTarget.addEventListener("mousemove",o),i&&this.currentTarget.addEventListener("mouseup",r=>{i(r)})}removeEventListeners({onStart:e,onMove:n,onEnd:o}){e&&this.currentTarget.removeEventListener("touchstart",e),o&&this.currentTarget.removeEventListener("touchend",o),n&&this.currentTarget.removeEventListener("touchmove",n),e&&this.currentTarget.removeEventListener("mousedown",e),n&&this.currentTarget.removeEventListener("mousemove",n),o&&this.currentTarget.removeEventListener("mouseup",o)}getCoordinates(e){if(e.type==="touchstart"||e.type==="mousedown"){if("touches"in e)return{x:e.touches[0].clientX,y:e.touches[0].clientY};if(e instanceof MouseEvent)return{x:e.clientX,y:e.clientY}}if(e.type==="touchend"||e.type==="mouseup"||e.type==="mousemove"||e.type==="touchmove"){if("touches"in e)return{x:e.changedTouches[0].clientX,y:e.changedTouches[0].clientY};if(e instanceof MouseEvent)return{x:e.clientX,y:e.clientY}}return{x:0,y:0}}}function $t(t,e){const n=Xt(t);qt(n),n.bottomSheetContainer.style.width=t.width;const o=document.createElement("div");o.innerHTML=t.content??"";const i=window.innerHeight;n.bottomSheetContainer.style.maxHeight=`${i}px`,n.bottomSheetContentWrapper.appendChild(o);const r=zt({bottomSheetElements:n,bottomSheetProps:t,options:e});return{elements:n,eventHandlers:r}}function Xt(t){const e=Y("dialog",I([C.Root,nt.Dialog,t.rootClass]),C.Root);e.ariaLabel=t.ariaLabel;const n=Y("section",I([C.Container,t.containerClass]),C.Container);t.containerBorderRadius&&(n.style.borderRadius=t.containerBorderRadius);const o=Y("div",C.GapFiller,C.GapFiller),i=Y("button",I([C.Handle,nt.Button,t.shouldShowHandle?null:V.Hidden,t.handleClass]),C.Handle);i.setAttribute("type","button"),i.ariaLabel="bottom sheet close button";const r=Y("span",I([C.HandleBar,t.shouldShowHandle?null:V.Hidden]),C.HandleBar),c=Y("article",I([C.ContentWrapper,t.contentWrapperClass]),C.ContentWrapper),s=Y("div",I([C.Backdrop,t.backdropClass,V.Hidden]),C.Backdrop);return t.backdropColor&&(s.style.backgroundColor=t.backdropColor),t.backDropTransition&&(s.style.transition=t.backDropTransition),{bottomSheetRoot:e,bottomSheetBackdrop:s,bottomSheetContainer:n,bottomSheetHandle:i,bottomSheetHandleBar:r,bottomSheetContentWrapper:c,bottomSheetContainerGapFiller:o}}function qt({bottomSheetRoot:t,bottomSheetContainer:e,bottomSheetHandle:n,bottomSheetHandleBar:o,bottomSheetContentWrapper:i,bottomSheetContainerGapFiller:r}){t.appendChild(e),n.appendChild(o),e.appendChild(n),e.appendChild(i),e.appendChild(r)}function zt({bottomSheetElements:t,bottomSheetProps:e,options:n}){const{bottomSheetRoot:o,bottomSheetContainer:i,bottomSheetHandle:r,bottomSheetContainerGapFiller:c,bottomSheetContentWrapper:s}=t,{animationFrame:p}=n,f=new _(r),u=new _(s),b=new _(c),H=e.dragTriggers.reduce((g,L)=>{const D=o.querySelectorAll(L);if(!D.length)return g;const ut=Array.from(D).map(j=>j instanceof HTMLElement?new _(j):null).filter(j=>!!j);return[...g,...ut]},[]),a=new _(window),x=Wt(a,i,e,n.draggingState),v=jt(a,i,e,n.draggingState,p),w=Gt(a,i,e,n.draggingState,p,n.onClose,n.bottomSheetState);function k(g){g.target instanceof Element&&!o.contains(g.target)&&n.onClose()}function y(g){Ft(n.draggingState,g.target,t.bottomSheetContentWrapper)}function M(){e.draggable&&(f.addEventListeners({onStart:y}),H.forEach(g=>{g.addEventListeners({onStart:y,onStartOptions:{eventPhase:R.Target}})})),e.draggable&&e.backgroundDraggable&&(u.addEventListeners({onStart:y,onStartOptions:{eventPhase:R.Target}}),b.addEventListeners({onStart:y})),e.draggable&&a.addEventListeners({onStart:x,onMove:v,onEnd:w}),e.draggable&&window.document.addEventListener("keyup",g=>{g.key==="Escape"&&n.onClose()}),e.shouldCloseOnOutsideClick&&window.document.addEventListener("click",k),r.addEventListener("keyup",g=>{if(g.key==="ArrowUp"){n.moveUp();return}if(g.key==="ArrowDown"){n.moveDown();return}if(g.shiftKey&&g.key==="Tab"){const L=Z(t.bottomSheetContentWrapper);Yt(L)}})}function Z(g){let L=[...Array.from(g.childNodes).reverse()];for(;L.length;){const D=L.shift();if(It(D))return D;D&&(L=[...L,...Array.from(D.childNodes).reverse()])}return null}function ct(){f.removeEventListeners({onStart:y}),u.removeEventListeners({onStart:y}),b.removeEventListeners({onStart:y}),H.forEach(g=>{g.removeEventListeners({onStart:y})}),a.removeEventListeners({onStart:x,onMove:v,onEnd:w}),window.removeEventListener("click",k)}return{attachEventListeners:M,clearEventListeners:ct}}class Vt{constructor(){$(this,"animationId"),$(this,"isInProgress"),$(this,"startedAt"),this.animationId=null,this.isInProgress=!1,this.startedAt=null}start(e,n,o=!1){this.isInProgress=!0;const i=r=>{this.startedAt||(this.startedAt=r);const c=r-this.startedAt,s=n===0?1:J(c/n,2),p=s>=1&&!o;e(s),p?this.stop():this.animationId=requestAnimationFrame(i)};this.animationId=requestAnimationFrame(i)}stop(){this.isInProgress=!1,this.startedAt=null,A(this.animationId)&&cancelAnimationFrame(this.animationId)}}function Kt(t){const{startY:e,endY:n,bottomSheetContainer:o,animationFrame:i,onEnd:r,animationTimingFunction:c,animationDuration:s}=t,p=ft(e,n);i.stop();let f=!1;i.start(u=>{Q(o,{y:e+p*c(u)}),!f&&u>=1&&(r==null||r(),f=!0)},s)}const it=(t,e)=>n=>{Kt({...n,animationTimingFunction:t,animationDuration:e})},N={TOP:"top",MIDDLE:"middle",CONTENT_HEIGHT:"content-height",CLOSED:"closed"};function Jt(t){return!(!A(t)||t>1||t<0)}function Qt(t,e){const n={set(o,i,r,c){return e(i,r),Reflect.set(o,i,r,c)}};return new Proxy(t,n)}function Zt(...t){console.error(t)}const F={EASE:"ease",EASE_IN:"ease-in",EASE_OUT:"ease-out",EASE_IN_OUT:"ease-in-out",SPRING:"spring"};function te(t){for(const e of Object.values(F))if(e===t)return!0;return!1}function Ht(t){return!!(t instanceof Object&&"p1x"in t&&"p1y"in t&&"p2x"in t&&"p2y"in t&&A(t.p1x)&&A(t.p1y)&&A(t.p2x)&&A(t.p2y))}function W(t,e,n,o){return function(s){return c(i(s))};function i(s){let p=0,f=1,u=s,b;if(s===0||s===1)return s;for(;p<f;){if(b=r(u),Math.abs(b-s)<.001)return u;s>b?p=u:f=u,u=(f+p)/2}return u}function r(s){return 3*t*s*Math.pow(1-s,2)+3*n*Math.pow(s,2)*(1-s)+Math.pow(s,3)}function c(s){return 3*e*s*Math.pow(1-s,2)+3*o*Math.pow(s,2)*(1-s)+Math.pow(s,3)}}const ee=W(.25,.1,.25,1),ne=W(.42,0,1,1),Tt=W(.42,0,.58,1),kt=W(.4,.1,.6,1),oe=W(.45,1.5,.55,1);function re(t){switch(t){case F.EASE:return ee;case F.EASE_IN:return ne;case F.EASE_OUT:return Tt;case F.EASE_IN_OUT:return kt;case F.SPRING:return oe;default:return kt}}function xt(t){return typeof t=="boolean"}const ie={ariaLabel:"Bottom sheet",content:"",defaultPosition:N.CONTENT_HEIGHT,marginTop:20,snapPoints:[],width:"92%",dragTriggers:[],beforeOpen:()=>{},afterOpen:()=>{},beforeClose:()=>{},afterClose:()=>{},onDragStart:()=>{},onDragMove:()=>{},onDragEnd:()=>{},expandable:!0,draggable:!0,backgroundDraggable:!0,shouldCloseOnOutsideClick:!0,shouldShowBackdrop:!0,shouldShowHandle:!0,backDropTransition:null,backdropColor:null,containerBorderRadius:null,rootClass:null,containerClass:null,handleClass:null,contentWrapperClass:null,backdropClass:null,draggingAnimationTimings:"ease-in-out",draggingAnimationDuration:180};function ae(t){const e={...ie},n=Object.entries(t).reduce((o,i)=>{const[r,c]=i;return rt(c)&&(o[r]=c),o},{});return{...e,...n}}function at(t){if(Ht(t)){const{p1x:e,p1y:n,p2x:o,p2y:i}=t;return W(e,n,o,i)}return te(t)?re(t):Tt}function se(t,e,n){function o(i,r){switch(i){case"content":T(r)&&(t.bottomSheetContentWrapper.innerHTML=r);break;case"width":T(r)&&(t.bottomSheetContainer.style.width=r);break;case"shouldShowHandle":xt(r)||z(t.bottomSheetHandle,!1);break;case"shouldShowBackdrop":xt(r)||z(t.bottomSheetBackdrop,!1);break;case"containerBorderRadius":T(r)&&(t.bottomSheetContainer.style.borderRadius=r);break;case"backdropColor":T(r)&&(t.bottomSheetBackdrop.style.backgroundColor=r);break;case"backDropTransition":T(r)&&(t.bottomSheetBackdrop.style.transition=r);break;case"rootClass":if(!T(r))return;G(t.bottomSheetRoot,n.rootClass,r);break;case"containerClass":if(!T(r))return;G(t.bottomSheetContainer,n.containerClass,r);break;case"handleClass":if(!T(r))return;G(t.bottomSheetHandle,n.handleClass,r);break;case"contentWrapperClass":if(!T(r))return;G(t.bottomSheetContentWrapper,n.contentWrapperClass,r);break;case"backdropClass":if(!T(r))return;G(t.bottomSheetBackdrop,n.backdropClass,r);break;case"draggingAnimationTimings":if(Ht(r)){const c=at(r),s=it(c,n.draggingAnimationDuration);e.translateContainer=s}break;case"draggingAnimationDuration":if(A(r)){const c=at(n.draggingAnimationTimings),s=it(c,r);e.translateContainer=s}break}}return o}function ce(t){const e=ae(t),n=at(t.draggingAnimationTimings),o={isMounted:!1,translateContainer:it(n,e.draggingAnimationDuration)},i={startY:null,containerStartTranslate:{x:0,y:0},isDragging:!1,originalDocumentOverflowY:null};function r(){i.originalDocumentOverflowY&&i.originalDocumentOverflowY!=="hidden"&&(document.body.style.overflowY=i.originalDocumentOverflowY)}const c=new Vt,s={animationFrame:c,onClose:k,bottomSheetState:o,draggingState:i,snapTo:At,moveUp:ut,moveDown:j},{elements:p,eventHandlers:f}=$t(e,s),u=Qt(e,se(p,o,e)),{bottomSheetBackdrop:b,bottomSheetRoot:H,bottomSheetContainer:a}=p,x=l=>{const d=l??window.document.body;d.appendChild(H),d.appendChild(b);const h=window.innerHeight;Q(a,{y:h}),f.attachEventListeners(),o.isMounted=!0},v=()=>{f.clearEventListeners(),Object.values(p).forEach(l=>{l.remove()}),r(),o.isMounted=!1},w=()=>{var l;if(y()||Zt('Bottom Sheet is not mounted yet. call the "mount" method first.'),(l=t.beforeOpen)==null||l.call(t),M())return;u.shouldShowBackdrop&&et(b,!0),et([a],!0),Q(a,{y:a.clientHeight});const d=window.innerHeight,h=ht(d,a.clientHeight,u.marginTop,u.defaultPosition),m=P(a).y;o.translateContainer({startY:m,endY:h,animationFrame:c,bottomSheetContainer:a,onEnd:t.afterOpen}),p.bottomSheetHandle.focus();const E=document.body.style.overflowY;i.originalDocumentOverflowY=E||"initial",document.body.style.overflowY="hidden"};function k(){var l;if(Z())return;(l=t.beforeClose)==null||l.call(t);const d=P(a).y,h=a.clientHeight;o.translateContainer({startY:d,endY:h,animationFrame:c,bottomSheetContainer:a,onEnd:()=>{var m;(m=t.afterClose)==null||m.call(t),et([b,a],!1)}}),r()}function y(){return o.isMounted}function M(){const l=P(a).y,d=window.innerHeight,h=a.clientHeight>=d?d:a.clientHeight;return l<h}function Z(){return!M()}function ct(){const l=P(a).y,d=a.clientHeight,h=window.innerHeight;if(l<=5&&l>=-5)return N.CONTENT_HEIGHT;const m=d-l;if(m===h/2)return N.MIDDLE;const E=h-u.marginTop,B=10;return m<=E+B&&m>=E-B?N.TOP:N.CLOSED}function g(){return a.clientHeight}function L(l){if(!M())return;const d=P(a).y,h=a.clientHeight-d,m=window.innerHeight-l,E=Rt(h,m),B=K(h,m);o.translateContainer({startY:d,endY:d+(E.isUp?-B:B),animationFrame:c,bottomSheetContainer:a})}function D(l,{viewportHeight:d,visibleHeight:h}){let m=null;for(const E of l){const B=E*d,U=K(h,B);(m===null||U<m)&&(m=U)}return{minOffset:m}}function ut(){const l=[...u.snapPoints].reverse(),d=P(a).y,h=a.clientHeight,m=h-d;if(!u.expandable&&m>=h)return;const E=window.innerHeight,B=gt("above",{visibleHeight:m,viewportHeight:E},l),{minOffset:U}=D(B,{visibleHeight:m,viewportHeight:E});if(U===null&&m<E-u.marginTop){o.translateContainer({startY:d,endY:ht(E,h,u.marginTop,"top"),animationFrame:c,bottomSheetContainer:a});return}A(U)&&o.translateContainer({startY:d,endY:d-U,animationFrame:c,bottomSheetContainer:a})}function j(){const l=P(a).y,d=a.clientHeight-l;if(d<1)return;const h=window.innerHeight,m=gt("below",{visibleHeight:d,viewportHeight:h},u.snapPoints),{minOffset:E}=D(m,{visibleHeight:d,viewportHeight:h});A(E)&&o.translateContainer({startY:l,endY:l+E,animationFrame:c,bottomSheetContainer:a})}function At(l){const d=window.innerHeight;if(!Jt(l))return;const h=J(d*l,2);L(h)}return{props:u,elements:p,mount:x,unmount:v,open:w,close:k,getIsMounted:y,getIsOpen:M,getIsClosed:Z,getPosition:ct,getHeight:g,moveTo:L,snapTo:At}}function st(){return{elements:{bottomSheetRoot:void 0,bottomSheetBackdrop:void 0,bottomSheetContainer:void 0,bottomSheetHandle:void 0,bottomSheetHandleBar:void 0,bottomSheetContentWrapper:void 0,bottomSheetContainerGapFiller:void 0},mount:()=>{},unmount:()=>{},open:()=>{},close:()=>{},getIsMounted:()=>!1,getHeight:()=>0,getIsOpen:()=>!1,getIsClosed:()=>!0,getPosition:()=>N.CLOSED,moveTo:()=>{},snapTo:()=>{},props:{content:""}}}const ue=st(),le=S.forwardRef(function(e,n){const{children:o,isOpen:i,setIsOpen:r,afterClose:c,mountingPoint:s,...p}=e,f=S.useRef(ue),[u,b]=S.useState(f.current);S.useImperativeHandle(n,()=>u,[u]);const H=S.useCallback(()=>{r(!1),c==null||c()},[c]);S.useEffect(()=>{i?u.open():u.close()},[i]);const a=S.useRef(null);return S.useEffect(function(){const v=Ot(e.mountingPoint)?e.mountingPoint:window.document.body;if(!v||u.getIsMounted())return;const w=ce({content:"",...p,afterClose:H});return w.mount(v),a.current=w.elements.bottomSheetContentWrapper??null,f.current=w,b(w),()=>{u.unmount()}},[e.mountingPoint,p,H]),S.useEffect(function(){Object.assign(f.current.props,{...p}),b(f.current)},[p]),a.current?Lt.createPortal(e.children,a.current):null}),de=st();function pe(){const t=S.useRef(de),[e,n]=S.useState(!1),[o,i]=S.useState(t.current);return S.useEffect(()=>{i(t.current)},[t.current]),{props:S.useMemo(()=>({ref:t,isOpen:e,setIsOpen:n}),[e]),instance:o}}O.BottomSheet=le,O.createPlaceholderBottomSheet=st,O.useBottomSheet=pe,Object.defineProperty(O,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@plainsheet/react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"license": "MIT",
|
|
@@ -13,16 +13,16 @@
|
|
|
13
13
|
"bottom-sheet"
|
|
14
14
|
],
|
|
15
15
|
"type": "module",
|
|
16
|
-
"main": "dist/plainsheet-
|
|
17
|
-
"module": "dist/plainsheet-
|
|
16
|
+
"main": "dist/plainsheet-react.cjs.js",
|
|
17
|
+
"module": "dist/plainsheet-react.es.js",
|
|
18
18
|
"types": "dist/index.d.ts",
|
|
19
19
|
"files": [
|
|
20
20
|
"dist"
|
|
21
21
|
],
|
|
22
22
|
"exports": {
|
|
23
23
|
".": {
|
|
24
|
-
"import": "./dist/plainsheet-
|
|
25
|
-
"require": "./dist/plainsheet-
|
|
24
|
+
"import": "./dist/plainsheet-react.es.js",
|
|
25
|
+
"require": "./dist/plainsheet-react.cjs.js",
|
|
26
26
|
"types": "./dist/index.d.ts"
|
|
27
27
|
},
|
|
28
28
|
"./package.json": "./package.json"
|
|
@@ -31,8 +31,8 @@
|
|
|
31
31
|
"access": "public"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@plainsheet/core": "0.
|
|
35
|
-
"
|
|
34
|
+
"@plainsheet/core": "0.6.0",
|
|
35
|
+
"@plainsheet/utility": "0.0.2"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@eslint/js": "^9.8.0",
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
import { BottomSheet, BottomSheetProps } from '@plainsheet/core';
|
|
3
|
-
import { OmitKeyof } from 'pbs-utility';
|
|
4
|
-
|
|
5
|
-
export { createPlaceholderBottomSheet } from '@plainsheet/core';
|
|
6
|
-
export type { BottomSheet } from '@plainsheet/core';
|
|
7
|
-
export type PlainBottomSheetProps = {
|
|
8
|
-
children: ReactNode;
|
|
9
|
-
isOpen: boolean;
|
|
10
|
-
setIsOpen: (isOpen: boolean) => void;
|
|
11
|
-
mountingPoint?: Element | null;
|
|
12
|
-
} & CoreProps;
|
|
13
|
-
type CoreProps = OmitKeyof<BottomSheetProps, "content", "safely">;
|
|
14
|
-
export declare const ReactPlainBottomSheet: import('react').ForwardRefExoticComponent<{
|
|
15
|
-
children: ReactNode;
|
|
16
|
-
isOpen: boolean;
|
|
17
|
-
setIsOpen: (isOpen: boolean) => void;
|
|
18
|
-
mountingPoint?: Element | null;
|
|
19
|
-
} & CoreProps & import("react").RefAttributes<BottomSheet>>;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const D=require("react"),Lt=require("react-dom");function xt(t){return t!=null}(function(){try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode('.pbs-root{position:fixed;left:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;height:fit-content;max-height:100vh;z-index:2}.pbs-dialog-reset{background-color:transparent;color:inherit;border:none;outline:none;padding:0;margin:0}.pbs-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;background-color:transparent;z-index:1;transition:background-color .2s ease-out}.pbs-backdrop.hidden{display:none}.pbs-backdrop.open{background-color:#454545b3}.pbs-container{--pbs-container-background-color: rgb(240, 240, 240);background-color:var(--pbs-container-background-color);position:relative;display:none;flex-direction:column;align-items:center;justify-content:flex-start;width:92%;height:fit-content;max-height:100vh;border-radius:10px 10px 0 0}.pbs-container.open{display:flex}.pbs-container .pbs-gap-filler{position:absolute;bottom:calc(-100vh + .5px);left:0;background-color:var(--pbs-container-background-color);content:"";width:100%;height:100vh}.pbs-handle{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:30px;cursor:pointer}.pbs-handle.hidden{display:none}.pbs-button-reset{background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none}button:focus.pbs-button-reset{outline:none}.pbs-handle-bar{background-color:#a8a8a8;position:relative;width:12%;height:7px;border-radius:12px}.pbs-handle-bar.hidden{display:none}.pbs-content-wrapper{position:relative;width:100%;height:fit-content;max-height:100%;overflow-y:scroll}.pbs-content-wrapper::-webkit-scrollbar{display:none}.example{-ms-overflow-style:none;scrollbar-width:none}')),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();var At=Object.defineProperty,Ot=(t,e,n)=>e in t?At(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,_=(t,e,n)=>(Ot(t,typeof e!="symbol"?e+"":e,n),n);function H(t){return typeof t=="string"}function Dt(t,e){return t.classList.contains(Q(e))}function q(t,e){t.classList.add(Q(e))}function nt(t,e){t.classList.remove(Q(e))}function j(t,e,n){H(n)&&(H(e)&&nt(t,e),q(t,n))}function Q(t){return H(t)?t.trim().replace(/\./g,""):""}function R(t){return t.map(e=>Q(e)).filter(Boolean).join(" ")}function Pt(t){return t.map(e=>e==null?void 0:e.trim()).filter(Boolean).map(e=>`.${e}`).join(" ")}const ct="open",lt="hidden";function et(t,e){const n=e;if(Array.isArray(t)){t.forEach(o=>{X(o,n),o.setAttribute("aria-modal",n?"true":"false")});return}X(t,n),t.setAttribute("aria-modal",n?"true":"false")}function X(t,e){e?(q(t,ct),nt(t,lt)):(q(t,lt),nt(t,ct))}function bt(t){return t instanceof HTMLElement}function L(t){return typeof t=="number"&&!Number.isNaN(t)}function Bt(t){bt(t)&&t.focus()}function Mt(t){if(!bt(t)||t.offsetParent===null||"disabled"in t&&t.disabled)return!1;const e=t.getAttribute("tabindex"),n=L(e)?parseInt(e,10):-1,o=["INPUT","BUTTON","SELECT","TEXTAREA","A","AREA","IFRAME"].includes(t.tagName),i=t instanceof HTMLAnchorElement&&t.href!==""||t instanceof HTMLAreaElement&&t.href!=="";return o||i||n>-1}var y=(t=>(t.Backdrop="pbs-backdrop",t.Root="pbs-root",t.Container="pbs-container",t.GapFiller="pbs-gap-filler",t.Handle="pbs-handle",t.HandleBar="pbs-handle-bar",t.ContentWrapper="pbs-content-wrapper",t))(y||{}),ot=(t=>(t.Button="pbs-button-reset",t.Dialog="pbs-dialog-reset",t))(ot||{}),$=(t=>(t.Hidden="hidden",t))($||{});function M(t,e,n){const o=document.createElement(t);return e.split(" ").forEach(i=>{q(o,i)}),H(n)&&o.setAttribute("data-testid",n),o}Pt([y.Root,y.ContentWrapper]);function ut(t,e,n,o){switch(o){case"content-height":return e>=t?Ct(t,e,n):0;case"middle":return-(t/2-e);case"top":return-(t-e)+n;default:return 0}}function vt(t,e){const n=e<t,o=e>t;return{isUp:n,isDown:o,stayedSame:e===t}}function St(t,e){return e<t?-(t-e):e-t}function z(t,e){return t>e?t-e:e-t}function Yt(t,e){const n=t<e,o=t>e;return{isUp:n,isDown:o,stayedSame:t===e}}function dt(t,e,n){const o=t==="above";return n.filter(i=>{const r=i*e.viewportHeight;return o?e.visibleHeight<r:e.visibleHeight>r})}function Ct(t,e,n){return-(t-e)+n}function pt(t){return Number(t.replace("px",""))}function V(t,...e){return Number(t.toFixed(...e))}function wt(t){const e=/(?<type>\w+)\((?<values>[^)]+)\)/g,n=[];let o;for(;(o=e.exec(t))!==null;){const i=o[1],r=o[2].split(",").map(c=>c.trim());n.push({type:i,values:r})}return n}function It(t){const e=t.style.transform,n=wt(e);return{transform:e,transformValues:n}}function yt(t,e){return t.find(o=>o.type.startsWith(e))||null}const rt="translate";function P(t){const e=t.style.transform,n=wt(e),o=yt(n,rt);return Et(o??{type:rt,values:[]})}function K(t,{x:e,y:n}){const{transform:o,transformValues:i}=It(t),r=yt(i,rt);if(r){const c=Et(r);t.style.transform=`translate(${e??c.x??0}px,${n??c.y??0}px)`;return}if(o){t.style.transform=`${o}, translate(${e??0}px,${n??0}px)`;return}t.style.transform=`translate(${e??0}px,${n??0}px)`}function Et(t){if(t.type!=="translate")throw new Error(`Could not get coordinates from ${t.type}, since is not translate.`);const e=t.values[0],n=t.values[1];return{x:pt(e)??0,y:pt(n)??0}}function it(t){return t!=null}function ht(t,{min:e,max:n}){return it(n)&&t>=n?n:it(e)&&t<=e?e:t}const Rt=(t,e,n)=>{e instanceof HTMLElement&&!Dt(e,y.Handle)&&n.scrollTop>=1||(t.isDragging=!0)},Nt=(t,e,n,o)=>i=>{o.startY=t.getCoordinates(i).y,o.containerStartTranslate=P(e),o.originalDocumentOverflowY=document.body.style.overflowY,document.body.style.overflowY="hidden",n.onDragStart()},Ft=(t,e,n,o,i)=>r=>{Wt(r,t,n,o,i,e,n.marginTop)};function Wt(t,e,n,o,i,r,c){if(!o.isDragging||!L(o.startY))return;const a=e.getCoordinates(t).y,m=St(o.startY,a),u=window.innerHeight,l=r.clientHeight,b=l-(o.containerStartTranslate.y+m);if(b>=u)return;const s=vt(o.startY,a);if(s.isUp&&!n.expandable&&b>=l)return;i.start(()=>{K(r,{y:o.containerStartTranslate.y+m})},0);const v=u-c,k=l-o.containerStartTranslate.y;if(s.isUp){const S=v-k,C=v-b,E=ht(1-V(C/S,2),{min:0,max:1});n.onDragMove(s,E)}else if(s.isDown){const S=ht(V(1-b/k,2),{min:0,max:1});n.onDragMove(s,S)}}const Ut=(t,e,n,o,i,r,c)=>a=>{if(!o.isDragging||(o.isDragging=!1,document.body.style.overflowY=o.originalDocumentOverflowY,!L(o.startY)))return;n.onDragEnd();const m=o.startY,u=t.getCoordinates(a).y,l=P(e).y,b=vt(m,u),s=window.innerHeight,v=e.clientHeight;if(b.isUp){const k=[...n.snapPoints].sort((E,w)=>E-w),S=v+-l;if(!n.expandable&&S>=v)return;for(const E of k){const w=E*window.innerHeight;if(S<=w){const Y=z(S,w);c.translateContainer({startY:l,endY:l-Y,animationFrame:i,bottomSheetContainer:e});return}}const C=Ct(s,v,n.marginTop);c.translateContainer({startY:l,endY:C,animationFrame:i,bottomSheetContainer:e})}else if(b.isDown){const k=[...n.snapPoints].sort((S,C)=>C-S);for(const S of k){const C=S*window.innerHeight,E=v+-l;if(E>=C){const w=z(E,C);c.translateContainer({startY:l,endY:l+w,animationFrame:i,bottomSheetContainer:e});return}}r()}};var W=(t=>(t[t.All=-1]="All",t[t.None=0]="None",t[t.Capture=1]="Capture",t[t.Target=2]="Target",t[t.Bubble=3]="Bubble",t))(W||{});function mt(t){switch(t){case 0:return 0;case 1:return 1;case 2:return 2;case 3:return 3;default:return-1}}const jt={eventPhase:W.All};class G{constructor(e){_(this,"currentTarget"),this.currentTarget=e}addEventListeners({onStart:e,onStartOptions:n=jt,onMove:o,onEnd:i}){this.addTouchEventListeners({onStart:e,onStartOptions:n,onMove:o,onEnd:i}),this.addMouseEventListeners({onStart:e,onStartOptions:n,onMove:o,onEnd:i})}addTouchEventListeners({onStart:e,onStartOptions:n,onMove:o,onEnd:i}){e&&this.currentTarget.addEventListener("touchstart",r=>{if(n.eventPhase===W.All){e(r);return}mt(r.eventPhase)===n.eventPhase&&e(r)},{passive:!0}),o&&this.currentTarget.addEventListener("touchmove",o),i&&this.currentTarget.addEventListener("touchend",i)}addMouseEventListeners({onStart:e,onStartOptions:n,onMove:o,onEnd:i}){e&&this.currentTarget.addEventListener("mousedown",r=>{if(n.eventPhase===W.All){e(r);return}mt(r.eventPhase)===n.eventPhase&&e(r)},{passive:!0}),o&&this.currentTarget.addEventListener("mousemove",o),i&&this.currentTarget.addEventListener("mouseup",r=>{i(r)})}removeEventListeners({onStart:e,onMove:n,onEnd:o}){e&&this.currentTarget.removeEventListener("touchstart",e),o&&this.currentTarget.removeEventListener("touchend",o),n&&this.currentTarget.removeEventListener("touchmove",n),e&&this.currentTarget.removeEventListener("mousedown",e),n&&this.currentTarget.removeEventListener("mousemove",n),o&&this.currentTarget.removeEventListener("mouseup",o)}getCoordinates(e){if(e.type==="touchstart"||e.type==="mousedown"){if("touches"in e)return{x:e.touches[0].clientX,y:e.touches[0].clientY};if(e instanceof MouseEvent)return{x:e.clientX,y:e.clientY}}if(e.type==="touchend"||e.type==="mouseup"||e.type==="mousemove"||e.type==="touchmove"){if("touches"in e)return{x:e.changedTouches[0].clientX,y:e.changedTouches[0].clientY};if(e instanceof MouseEvent)return{x:e.clientX,y:e.clientY}}return{x:0,y:0}}}function Gt(t,e){const n=_t(t);$t(n),n.bottomSheetContainer.style.width=t.width;const o=document.createElement("div");o.innerHTML=t.content??"";const i=window.innerHeight;n.bottomSheetContainer.style.maxHeight=`${i}px`,n.bottomSheetContentWrapper.appendChild(o);const r=qt({bottomSheetElements:n,bottomSheetProps:t,options:e});return{elements:n,eventHandlers:r}}function _t(t){const e=M("dialog",R([y.Root,ot.Dialog,t.rootClass]),y.Root);e.ariaLabel=t.ariaLabel;const n=M("section",R([y.Container,t.containerClass]),y.Container);t.containerBorderRadius&&(n.style.borderRadius=t.containerBorderRadius);const o=M("div",y.GapFiller,y.GapFiller),i=M("button",R([y.Handle,ot.Button,t.shouldShowHandle?null:$.Hidden,t.handleClass]),y.Handle);i.setAttribute("type","button"),i.ariaLabel="bottom sheet close button";const r=M("span",R([y.HandleBar,t.shouldShowHandle?null:$.Hidden]),y.HandleBar),c=M("article",R([y.ContentWrapper,t.contentWrapperClass]),y.ContentWrapper),a=M("div",R([y.Backdrop,t.backdropClass,$.Hidden]),y.Backdrop);return t.backdropColor&&(a.style.backgroundColor=t.backdropColor),t.backDropTransition&&(a.style.transition=t.backDropTransition),{bottomSheetRoot:e,bottomSheetBackdrop:a,bottomSheetContainer:n,bottomSheetHandle:i,bottomSheetHandleBar:r,bottomSheetContentWrapper:c,bottomSheetContainerGapFiller:o}}function $t({bottomSheetRoot:t,bottomSheetContainer:e,bottomSheetHandle:n,bottomSheetHandleBar:o,bottomSheetContentWrapper:i,bottomSheetContainerGapFiller:r}){t.appendChild(e),n.appendChild(o),e.appendChild(n),e.appendChild(i),e.appendChild(r)}function qt({bottomSheetElements:t,bottomSheetProps:e,options:n}){const{bottomSheetRoot:o,bottomSheetContainer:i,bottomSheetHandle:r,bottomSheetContainerGapFiller:c,bottomSheetContentWrapper:a}=t,{animationFrame:m}=n,u=new G(r),l=new G(a),b=new G(c),s=e.dragTriggers.reduce((f,x)=>{const A=o.querySelectorAll(x);if(!A.length)return f;const tt=Array.from(A).map(B=>B instanceof HTMLElement?new G(B):null).filter(B=>!!B);return[...f,...tt]},[]),v=new G(window),k=Nt(v,i,e,n.draggingState),S=Ft(v,i,e,n.draggingState,m),C=Ut(v,i,e,n.draggingState,m,n.onClose,n.bottomSheetState);function E(f){f.target instanceof Element&&!o.contains(f.target)&&n.onClose()}function w(f){Rt(n.draggingState,f.target,t.bottomSheetContentWrapper)}function Y(){e.draggable&&(u.addEventListeners({onStart:w}),s.forEach(f=>{f.addEventListeners({onStart:w,onStartOptions:{eventPhase:W.Target}})})),e.draggable&&e.backgroundDraggable&&(l.addEventListeners({onStart:w,onStartOptions:{eventPhase:W.Target}}),b.addEventListeners({onStart:w})),e.draggable&&v.addEventListeners({onStart:k,onMove:S,onEnd:C}),e.draggable&&window.document.addEventListener("keyup",f=>{f.key==="Escape"&&n.onClose()}),e.shouldCloseOnOutsideClick&&window.document.addEventListener("click",E),r.addEventListener("keyup",f=>{if(f.key==="ArrowUp"){n.moveUp();return}if(f.key==="ArrowDown"){n.moveDown();return}if(f.shiftKey&&f.key==="Tab"){const x=Z(t.bottomSheetContentWrapper);Bt(x)}})}function Z(f){let x=[...Array.from(f.childNodes).reverse()];for(;x.length;){const A=x.shift();if(Mt(A))return A;A&&(x=[...x,...Array.from(A.childNodes).reverse()])}return null}function J(){u.removeEventListeners({onStart:w}),l.removeEventListeners({onStart:w}),b.removeEventListeners({onStart:w}),s.forEach(f=>{f.removeEventListeners({onStart:w})}),v.removeEventListeners({onStart:k,onMove:S,onEnd:C}),window.removeEventListener("click",E)}return{attachEventListeners:Y,clearEventListeners:J}}class Xt{constructor(){_(this,"animationId"),_(this,"isInProgress"),_(this,"startedAt"),this.animationId=null,this.isInProgress=!1,this.startedAt=null}start(e,n,o=!1){this.isInProgress=!0;const i=r=>{this.startedAt||(this.startedAt=r);const c=r-this.startedAt,a=n===0?1:V(c/n,2),m=a>=1&&!o;e(a),m?this.stop():this.animationId=requestAnimationFrame(i)};this.animationId=requestAnimationFrame(i)}stop(){this.isInProgress=!1,this.startedAt=null,L(this.animationId)&&cancelAnimationFrame(this.animationId)}}function zt(t){const{startY:e,endY:n,bottomSheetContainer:o,animationFrame:i,onEnd:r,animationTimingFunction:c,animationDuration:a}=t,m=St(e,n);i.stop();let u=!1;i.start(l=>{K(o,{y:e+m*c(l)}),!u&&l>=1&&(r==null||r(),u=!0)},a)}const at=(t,e)=>n=>{zt({...n,animationTimingFunction:t,animationDuration:e})},F={TOP:"top",MIDDLE:"middle",CONTENT_HEIGHT:"content-height",CLOSED:"closed"};function Vt(t){return!(!L(t)||t>1||t<0)}function Kt(t,e){const n={set(o,i,r,c){return e(i,r),Reflect.set(o,i,r,c)}};return new Proxy(t,n)}function Qt(...t){console.error(t)}const N={EASE:"ease",EASE_IN:"ease-in",EASE_OUT:"ease-out",EASE_IN_OUT:"ease-in-out",SPRING:"spring"};function Zt(t){for(const e of Object.values(N))if(e===t)return!0;return!1}function Tt(t){return!!(t instanceof Object&&"p1x"in t&&"p1y"in t&&"p2x"in t&&"p2y"in t&&L(t.p1x)&&L(t.p1y)&&L(t.p2x)&&L(t.p2y))}function U(t,e,n,o){return function(a){return c(i(a))};function i(a){let m=0,u=1,l=a,b;if(a===0||a===1)return a;for(;m<u;){if(b=r(l),Math.abs(b-a)<.001)return l;a>b?m=l:u=l,l=(u+m)/2}return l}function r(a){return 3*t*a*Math.pow(1-a,2)+3*n*Math.pow(a,2)*(1-a)+Math.pow(a,3)}function c(a){return 3*e*a*Math.pow(1-a,2)+3*o*Math.pow(a,2)*(1-a)+Math.pow(a,3)}}const Jt=U(.25,.1,.25,1),te=U(.42,0,1,1),Ht=U(.42,0,.58,1),ft=U(.4,.1,.6,1),ee=U(.45,1.5,.55,1);function ne(t){switch(t){case N.EASE:return Jt;case N.EASE_IN:return te;case N.EASE_OUT:return Ht;case N.EASE_IN_OUT:return ft;case N.SPRING:return ee;default:return ft}}function gt(t){return typeof t=="boolean"}const oe={ariaLabel:"Bottom sheet",content:"",defaultPosition:F.CONTENT_HEIGHT,marginTop:20,snapPoints:[],width:"92%",dragTriggers:[],beforeOpen:()=>{},afterOpen:()=>{},beforeClose:()=>{},afterClose:()=>{},onDragStart:()=>{},onDragMove:()=>{},onDragEnd:()=>{},expandable:!0,draggable:!0,backgroundDraggable:!0,shouldCloseOnOutsideClick:!0,shouldShowBackdrop:!0,shouldShowHandle:!0,backDropTransition:null,backdropColor:null,containerBorderRadius:null,rootClass:null,containerClass:null,handleClass:null,contentWrapperClass:null,backdropClass:null,draggingAnimationTimings:"ease-in-out",draggingAnimationDuration:180};function re(t){const e={...oe},n=Object.entries(t).reduce((o,i)=>{const[r,c]=i;return it(c)&&(o[r]=c),o},{});return{...e,...n}}function st(t){if(Tt(t)){const{p1x:e,p1y:n,p2x:o,p2y:i}=t;return U(e,n,o,i)}return Zt(t)?ne(t):Ht}function ie(t,e,n){function o(i,r){switch(i){case"content":H(r)&&(t.bottomSheetContentWrapper.innerHTML=r);break;case"width":H(r)&&(t.bottomSheetContainer.style.width=r);break;case"shouldShowHandle":gt(r)||X(t.bottomSheetHandle,!1);break;case"shouldShowBackdrop":gt(r)||X(t.bottomSheetBackdrop,!1);break;case"containerBorderRadius":H(r)&&(t.bottomSheetContainer.style.borderRadius=r);break;case"backdropColor":H(r)&&(t.bottomSheetBackdrop.style.backgroundColor=r);break;case"backDropTransition":H(r)&&(t.bottomSheetBackdrop.style.transition=r);break;case"rootClass":if(!H(r))return;j(t.bottomSheetRoot,n.rootClass,r);break;case"containerClass":if(!H(r))return;j(t.bottomSheetContainer,n.containerClass,r);break;case"handleClass":if(!H(r))return;j(t.bottomSheetHandle,n.handleClass,r);break;case"contentWrapperClass":if(!H(r))return;j(t.bottomSheetContentWrapper,n.contentWrapperClass,r);break;case"backdropClass":if(!H(r))return;j(t.bottomSheetBackdrop,n.backdropClass,r);break;case"draggingAnimationTimings":if(Tt(r)){const c=st(r),a=at(c,n.draggingAnimationDuration);e.translateContainer=a}break;case"draggingAnimationDuration":if(L(r)){const c=st(n.draggingAnimationTimings),a=at(c,r);e.translateContainer=a}break}}return o}function ae(t){const e=re(t),n=st(t.draggingAnimationTimings),o={isMounted:!1,translateContainer:at(n,e.draggingAnimationDuration)},i={startY:null,containerStartTranslate:{x:0,y:0},isDragging:!1,originalDocumentOverflowY:document.body.style.overflowY},r=new Xt,c={animationFrame:r,onClose:C,bottomSheetState:o,draggingState:i,snapTo:B,moveUp:A,moveDown:tt},{elements:a,eventHandlers:m}=Gt(e,c),u=Kt(e,ie(a,o,e)),{bottomSheetBackdrop:l,bottomSheetRoot:b,bottomSheetContainer:s}=a,v=d=>{const p=d??window.document.body;p.appendChild(b),p.appendChild(l);const h=window.innerHeight;K(s,{y:h}),m.attachEventListeners(),o.isMounted=!0},k=()=>{m.clearEventListeners(),Object.values(a).forEach(d=>{d.remove()}),o.isMounted=!1},S=()=>{var d;if(E()||Qt('Bottom Sheet is not mounted yet. call the "mount" method first.'),(d=t.beforeOpen)==null||d.call(t),w())return;u.shouldShowBackdrop&&et(l,!0),et([s],!0),K(s,{y:s.clientHeight});const p=window.innerHeight,h=ut(p,s.clientHeight,u.marginTop,u.defaultPosition),g=P(s).y;o.translateContainer({startY:g,endY:h,animationFrame:r,bottomSheetContainer:s,onEnd:t.afterOpen}),a.bottomSheetHandle.focus()};function C(){var d;if(Y())return;(d=t.beforeClose)==null||d.call(t);const p=P(s).y,h=s.clientHeight;o.translateContainer({startY:p,endY:h,animationFrame:r,bottomSheetContainer:s,onEnd:()=>{var g;(g=t.afterClose)==null||g.call(t),et([l,s],!1)}})}function E(){return o.isMounted}function w(){const d=P(s).y,p=window.innerHeight,h=s.clientHeight>=p?p:s.clientHeight;return d<h}function Y(){return!w()}function Z(){const d=P(s).y,p=s.clientHeight,h=window.innerHeight;if(d<=5&&d>=-5)return F.CONTENT_HEIGHT;const g=p-d;if(g===h/2)return F.MIDDLE;const T=h-u.marginTop,O=10;return g<=T+O&&g>=T-O?F.TOP:F.CLOSED}function J(){return s.clientHeight}function f(d){const p=P(s).y,h=s.clientHeight-p,g=window.innerHeight-d,T=Yt(h,g),O=z(h,g);o.translateContainer({startY:p,endY:p+(T.isUp?-O:O),animationFrame:r,bottomSheetContainer:s})}function x(d,{viewportHeight:p,visibleHeight:h}){let g=null;for(const T of d){const O=T*p,I=z(h,O);(g===null||I<g)&&(g=I)}return{minOffset:g}}function A(){const d=[...u.snapPoints].reverse(),p=P(s).y,h=s.clientHeight,g=h-p;if(!u.expandable&&g>=h)return;const T=window.innerHeight,O=dt("above",{visibleHeight:g,viewportHeight:T},d),{minOffset:I}=x(O,{visibleHeight:g,viewportHeight:T});if(I===null&&g<T-u.marginTop){o.translateContainer({startY:p,endY:ut(T,h,u.marginTop,"top"),animationFrame:r,bottomSheetContainer:s});return}L(I)&&o.translateContainer({startY:p,endY:p-I,animationFrame:r,bottomSheetContainer:s})}function tt(){const d=P(s).y,p=s.clientHeight-d;if(p<1)return;const h=window.innerHeight,g=dt("below",{visibleHeight:p,viewportHeight:h},u.snapPoints),{minOffset:T}=x(g,{visibleHeight:p,viewportHeight:h});L(T)&&o.translateContainer({startY:d,endY:d+T,animationFrame:r,bottomSheetContainer:s})}function B(d){const p=window.innerHeight;if(!Vt(d))return;const h=V(p*d,2);f(h)}return{props:u,elements:a,mount:v,unmount:k,open:S,close:C,getIsMounted:E,getIsOpen:w,getIsClosed:Y,getPosition:Z,getHeight:J,moveTo:f,snapTo:B}}function kt(){return{elements:{bottomSheetRoot:void 0,bottomSheetBackdrop:void 0,bottomSheetContainer:void 0,bottomSheetHandle:void 0,bottomSheetHandleBar:void 0,bottomSheetContentWrapper:void 0,bottomSheetContainerGapFiller:void 0},mount:()=>{},unmount:()=>{},open:()=>{},close:()=>{},getIsMounted:()=>!1,getHeight:()=>0,getIsOpen:()=>!1,getIsClosed:()=>!0,getPosition:()=>F.CLOSED,moveTo:()=>{},snapTo:()=>{},props:{content:""}}}const se=kt(),ce=D.forwardRef(function(e,n){const{children:o,isOpen:i,setIsOpen:r,afterClose:c,mountingPoint:a,...m}=e,u=D.useRef(se),[l,b]=D.useState(u.current);D.useImperativeHandle(n,()=>l,[l]);const s=D.useCallback(()=>{r(!1),c==null||c()},[c]);D.useEffect(()=>{i?l.open():l.close()},[i]);const v=D.useRef(null);return D.useEffect(function(){const S=xt(e.mountingPoint)?e.mountingPoint:window.document.body;if(!S||l.getIsMounted())return;const C=ae({content:"",...m,afterClose:s});return C.mount(S),v.current=C.elements.bottomSheetContentWrapper??null,u.current=C,b(C),()=>{l.unmount()}},[e.mountingPoint,m,s]),D.useEffect(function(){Object.assign(u.current.props,{...m}),b(u.current)},[m]),v.current?Lt.createPortal(e.children,v.current):null});exports.ReactPlainBottomSheet=ce;exports.createPlaceholderBottomSheet=kt;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
(function(O,k){typeof exports=="object"&&typeof module<"u"?k(exports,require("react"),require("react-dom")):typeof define=="function"&&define.amd?define(["exports","react","react-dom"],k):(O=typeof globalThis<"u"?globalThis:O||self,k(O.ReactPlainBottomSheet={},O.React,O.ReactDOM))})(this,function(O,k,xt){"use strict";function At(t){return t!=null}(function(){try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode('.pbs-root{position:fixed;left:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;height:fit-content;max-height:100vh;z-index:2}.pbs-dialog-reset{background-color:transparent;color:inherit;border:none;outline:none;padding:0;margin:0}.pbs-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;background-color:transparent;z-index:1;transition:background-color .2s ease-out}.pbs-backdrop.hidden{display:none}.pbs-backdrop.open{background-color:#454545b3}.pbs-container{--pbs-container-background-color: rgb(240, 240, 240);background-color:var(--pbs-container-background-color);position:relative;display:none;flex-direction:column;align-items:center;justify-content:flex-start;width:92%;height:fit-content;max-height:100vh;border-radius:10px 10px 0 0}.pbs-container.open{display:flex}.pbs-container .pbs-gap-filler{position:absolute;bottom:calc(-100vh + .5px);left:0;background-color:var(--pbs-container-background-color);content:"";width:100%;height:100vh}.pbs-handle{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:30px;cursor:pointer}.pbs-handle.hidden{display:none}.pbs-button-reset{background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none}button:focus.pbs-button-reset{outline:none}.pbs-handle-bar{background-color:#a8a8a8;position:relative;width:12%;height:7px;border-radius:12px}.pbs-handle-bar.hidden{display:none}.pbs-content-wrapper{position:relative;width:100%;height:fit-content;max-height:100%;overflow-y:scroll}.pbs-content-wrapper::-webkit-scrollbar{display:none}.example{-ms-overflow-style:none;scrollbar-width:none}')),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();var Ot=Object.defineProperty,Pt=(t,e,n)=>e in t?Ot(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,$=(t,e,n)=>(Pt(t,typeof e!="symbol"?e+"":e,n),n);function E(t){return typeof t=="string"}function Dt(t,e){return t.classList.contains(X(e))}function q(t,e){t.classList.add(X(e))}function J(t,e){t.classList.remove(X(e))}function G(t,e,n){E(n)&&(E(e)&&J(t,e),q(t,n))}function X(t){return E(t)?t.trim().replace(/\./g,""):""}function I(t){return t.map(e=>X(e)).filter(Boolean).join(" ")}function Bt(t){return t.map(e=>e==null?void 0:e.trim()).filter(Boolean).map(e=>`.${e}`).join(" ")}const lt="open",ut="hidden";function tt(t,e){const n=e;if(Array.isArray(t)){t.forEach(o=>{z(o,n),o.setAttribute("aria-modal",n?"true":"false")});return}z(t,n),t.setAttribute("aria-modal",n?"true":"false")}function z(t,e){e?(q(t,lt),J(t,ut)):(q(t,ut),J(t,lt))}function dt(t){return t instanceof HTMLElement}function x(t){return typeof t=="number"&&!Number.isNaN(t)}function Mt(t){dt(t)&&t.focus()}function Yt(t){if(!dt(t)||t.offsetParent===null||"disabled"in t&&t.disabled)return!1;const e=t.getAttribute("tabindex"),n=x(e)?parseInt(e,10):-1,o=["INPUT","BUTTON","SELECT","TEXTAREA","A","AREA","IFRAME"].includes(t.tagName),i=t instanceof HTMLAnchorElement&&t.href!==""||t instanceof HTMLAreaElement&&t.href!=="";return o||i||n>-1}var w=(t=>(t.Backdrop="pbs-backdrop",t.Root="pbs-root",t.Container="pbs-container",t.GapFiller="pbs-gap-filler",t.Handle="pbs-handle",t.HandleBar="pbs-handle-bar",t.ContentWrapper="pbs-content-wrapper",t))(w||{}),et=(t=>(t.Button="pbs-button-reset",t.Dialog="pbs-dialog-reset",t))(et||{}),V=(t=>(t.Hidden="hidden",t))(V||{});function M(t,e,n){const o=document.createElement(t);return e.split(" ").forEach(i=>{q(o,i)}),E(n)&&o.setAttribute("data-testid",n),o}Bt([w.Root,w.ContentWrapper]);function pt(t,e,n,o){switch(o){case"content-height":return e>=t?gt(t,e,n):0;case"middle":return-(t/2-e);case"top":return-(t-e)+n;default:return 0}}function ht(t,e){const n=e<t,o=e>t;return{isUp:n,isDown:o,stayedSame:e===t}}function mt(t,e){return e<t?-(t-e):e-t}function K(t,e){return t>e?t-e:e-t}function It(t,e){const n=t<e,o=t>e;return{isUp:n,isDown:o,stayedSame:t===e}}function ft(t,e,n){const o=t==="above";return n.filter(i=>{const r=i*e.viewportHeight;return o?e.visibleHeight<r:e.visibleHeight>r})}function gt(t,e,n){return-(t-e)+n}function bt(t){return Number(t.replace("px",""))}function Q(t,...e){return Number(t.toFixed(...e))}function vt(t){const e=/(?<type>\w+)\((?<values>[^)]+)\)/g,n=[];let o;for(;(o=e.exec(t))!==null;){const i=o[1],r=o[2].split(",").map(c=>c.trim());n.push({type:i,values:r})}return n}function Rt(t){const e=t.style.transform,n=vt(e);return{transform:e,transformValues:n}}function St(t,e){return t.find(o=>o.type.startsWith(e))||null}const nt="translate";function P(t){const e=t.style.transform,n=vt(e),o=St(n,nt);return Ct(o??{type:nt,values:[]})}function Z(t,{x:e,y:n}){const{transform:o,transformValues:i}=Rt(t),r=St(i,nt);if(r){const c=Ct(r);t.style.transform=`translate(${e??c.x??0}px,${n??c.y??0}px)`;return}if(o){t.style.transform=`${o}, translate(${e??0}px,${n??0}px)`;return}t.style.transform=`translate(${e??0}px,${n??0}px)`}function Ct(t){if(t.type!=="translate")throw new Error(`Could not get coordinates from ${t.type}, since is not translate.`);const e=t.values[0],n=t.values[1];return{x:bt(e)??0,y:bt(n)??0}}function ot(t){return t!=null}function yt(t,{min:e,max:n}){return ot(n)&&t>=n?n:ot(e)&&t<=e?e:t}const Nt=(t,e,n)=>{e instanceof HTMLElement&&!Dt(e,w.Handle)&&n.scrollTop>=1||(t.isDragging=!0)},Ft=(t,e,n,o)=>i=>{o.startY=t.getCoordinates(i).y,o.containerStartTranslate=P(e),o.originalDocumentOverflowY=document.body.style.overflowY,document.body.style.overflowY="hidden",n.onDragStart()},Wt=(t,e,n,o,i)=>r=>{jt(r,t,n,o,i,e,n.marginTop)};function jt(t,e,n,o,i,r,c){if(!o.isDragging||!x(o.startY))return;const a=e.getCoordinates(t).y,m=mt(o.startY,a),u=window.innerHeight,l=r.clientHeight,b=l-(o.containerStartTranslate.y+m);if(b>=u)return;const s=ht(o.startY,a);if(s.isUp&&!n.expandable&&b>=l)return;i.start(()=>{Z(r,{y:o.containerStartTranslate.y+m})},0);const v=u-c,L=l-o.containerStartTranslate.y;if(s.isUp){const S=v-L,C=v-b,T=yt(1-Q(C/S,2),{min:0,max:1});n.onDragMove(s,T)}else if(s.isDown){const S=yt(Q(1-b/L,2),{min:0,max:1});n.onDragMove(s,S)}}const Ut=(t,e,n,o,i,r,c)=>a=>{if(!o.isDragging||(o.isDragging=!1,document.body.style.overflowY=o.originalDocumentOverflowY,!x(o.startY)))return;n.onDragEnd();const m=o.startY,u=t.getCoordinates(a).y,l=P(e).y,b=ht(m,u),s=window.innerHeight,v=e.clientHeight;if(b.isUp){const L=[...n.snapPoints].sort((T,y)=>T-y),S=v+-l;if(!n.expandable&&S>=v)return;for(const T of L){const y=T*window.innerHeight;if(S<=y){const j=K(S,y);c.translateContainer({startY:l,endY:l-j,animationFrame:i,bottomSheetContainer:e});return}}const C=gt(s,v,n.marginTop);c.translateContainer({startY:l,endY:C,animationFrame:i,bottomSheetContainer:e})}else if(b.isDown){const L=[...n.snapPoints].sort((S,C)=>C-S);for(const S of L){const C=S*window.innerHeight,T=v+-l;if(T>=C){const y=K(T,C);c.translateContainer({startY:l,endY:l+y,animationFrame:i,bottomSheetContainer:e});return}}r()}};var R=(t=>(t[t.All=-1]="All",t[t.None=0]="None",t[t.Capture=1]="Capture",t[t.Target=2]="Target",t[t.Bubble=3]="Bubble",t))(R||{});function wt(t){switch(t){case 0:return 0;case 1:return 1;case 2:return 2;case 3:return 3;default:return-1}}const Gt={eventPhase:R.All};class _{constructor(e){$(this,"currentTarget"),this.currentTarget=e}addEventListeners({onStart:e,onStartOptions:n=Gt,onMove:o,onEnd:i}){this.addTouchEventListeners({onStart:e,onStartOptions:n,onMove:o,onEnd:i}),this.addMouseEventListeners({onStart:e,onStartOptions:n,onMove:o,onEnd:i})}addTouchEventListeners({onStart:e,onStartOptions:n,onMove:o,onEnd:i}){e&&this.currentTarget.addEventListener("touchstart",r=>{if(n.eventPhase===R.All){e(r);return}wt(r.eventPhase)===n.eventPhase&&e(r)},{passive:!0}),o&&this.currentTarget.addEventListener("touchmove",o),i&&this.currentTarget.addEventListener("touchend",i)}addMouseEventListeners({onStart:e,onStartOptions:n,onMove:o,onEnd:i}){e&&this.currentTarget.addEventListener("mousedown",r=>{if(n.eventPhase===R.All){e(r);return}wt(r.eventPhase)===n.eventPhase&&e(r)},{passive:!0}),o&&this.currentTarget.addEventListener("mousemove",o),i&&this.currentTarget.addEventListener("mouseup",r=>{i(r)})}removeEventListeners({onStart:e,onMove:n,onEnd:o}){e&&this.currentTarget.removeEventListener("touchstart",e),o&&this.currentTarget.removeEventListener("touchend",o),n&&this.currentTarget.removeEventListener("touchmove",n),e&&this.currentTarget.removeEventListener("mousedown",e),n&&this.currentTarget.removeEventListener("mousemove",n),o&&this.currentTarget.removeEventListener("mouseup",o)}getCoordinates(e){if(e.type==="touchstart"||e.type==="mousedown"){if("touches"in e)return{x:e.touches[0].clientX,y:e.touches[0].clientY};if(e instanceof MouseEvent)return{x:e.clientX,y:e.clientY}}if(e.type==="touchend"||e.type==="mouseup"||e.type==="mousemove"||e.type==="touchmove"){if("touches"in e)return{x:e.changedTouches[0].clientX,y:e.changedTouches[0].clientY};if(e instanceof MouseEvent)return{x:e.clientX,y:e.clientY}}return{x:0,y:0}}}function _t(t,e){const n=$t(t);qt(n),n.bottomSheetContainer.style.width=t.width;const o=document.createElement("div");o.innerHTML=t.content??"";const i=window.innerHeight;n.bottomSheetContainer.style.maxHeight=`${i}px`,n.bottomSheetContentWrapper.appendChild(o);const r=Xt({bottomSheetElements:n,bottomSheetProps:t,options:e});return{elements:n,eventHandlers:r}}function $t(t){const e=M("dialog",I([w.Root,et.Dialog,t.rootClass]),w.Root);e.ariaLabel=t.ariaLabel;const n=M("section",I([w.Container,t.containerClass]),w.Container);t.containerBorderRadius&&(n.style.borderRadius=t.containerBorderRadius);const o=M("div",w.GapFiller,w.GapFiller),i=M("button",I([w.Handle,et.Button,t.shouldShowHandle?null:V.Hidden,t.handleClass]),w.Handle);i.setAttribute("type","button"),i.ariaLabel="bottom sheet close button";const r=M("span",I([w.HandleBar,t.shouldShowHandle?null:V.Hidden]),w.HandleBar),c=M("article",I([w.ContentWrapper,t.contentWrapperClass]),w.ContentWrapper),a=M("div",I([w.Backdrop,t.backdropClass,V.Hidden]),w.Backdrop);return t.backdropColor&&(a.style.backgroundColor=t.backdropColor),t.backDropTransition&&(a.style.transition=t.backDropTransition),{bottomSheetRoot:e,bottomSheetBackdrop:a,bottomSheetContainer:n,bottomSheetHandle:i,bottomSheetHandleBar:r,bottomSheetContentWrapper:c,bottomSheetContainerGapFiller:o}}function qt({bottomSheetRoot:t,bottomSheetContainer:e,bottomSheetHandle:n,bottomSheetHandleBar:o,bottomSheetContentWrapper:i,bottomSheetContainerGapFiller:r}){t.appendChild(e),n.appendChild(o),e.appendChild(n),e.appendChild(i),e.appendChild(r)}function Xt({bottomSheetElements:t,bottomSheetProps:e,options:n}){const{bottomSheetRoot:o,bottomSheetContainer:i,bottomSheetHandle:r,bottomSheetContainerGapFiller:c,bottomSheetContentWrapper:a}=t,{animationFrame:m}=n,u=new _(r),l=new _(a),b=new _(c),s=e.dragTriggers.reduce((f,A)=>{const D=o.querySelectorAll(A);if(!D.length)return f;const ct=Array.from(D).map(Y=>Y instanceof HTMLElement?new _(Y):null).filter(Y=>!!Y);return[...f,...ct]},[]),v=new _(window),L=Ft(v,i,e,n.draggingState),S=Wt(v,i,e,n.draggingState,m),C=Ut(v,i,e,n.draggingState,m,n.onClose,n.bottomSheetState);function T(f){f.target instanceof Element&&!o.contains(f.target)&&n.onClose()}function y(f){Nt(n.draggingState,f.target,t.bottomSheetContentWrapper)}function j(){e.draggable&&(u.addEventListeners({onStart:y}),s.forEach(f=>{f.addEventListeners({onStart:y,onStartOptions:{eventPhase:R.Target}})})),e.draggable&&e.backgroundDraggable&&(l.addEventListeners({onStart:y,onStartOptions:{eventPhase:R.Target}}),b.addEventListeners({onStart:y})),e.draggable&&v.addEventListeners({onStart:L,onMove:S,onEnd:C}),e.draggable&&window.document.addEventListener("keyup",f=>{f.key==="Escape"&&n.onClose()}),e.shouldCloseOnOutsideClick&&window.document.addEventListener("click",T),r.addEventListener("keyup",f=>{if(f.key==="ArrowUp"){n.moveUp();return}if(f.key==="ArrowDown"){n.moveDown();return}if(f.shiftKey&&f.key==="Tab"){const A=at(t.bottomSheetContentWrapper);Mt(A)}})}function at(f){let A=[...Array.from(f.childNodes).reverse()];for(;A.length;){const D=A.shift();if(Yt(D))return D;D&&(A=[...A,...Array.from(D.childNodes).reverse()])}return null}function st(){u.removeEventListeners({onStart:y}),l.removeEventListeners({onStart:y}),b.removeEventListeners({onStart:y}),s.forEach(f=>{f.removeEventListeners({onStart:y})}),v.removeEventListeners({onStart:L,onMove:S,onEnd:C}),window.removeEventListener("click",T)}return{attachEventListeners:j,clearEventListeners:st}}class zt{constructor(){$(this,"animationId"),$(this,"isInProgress"),$(this,"startedAt"),this.animationId=null,this.isInProgress=!1,this.startedAt=null}start(e,n,o=!1){this.isInProgress=!0;const i=r=>{this.startedAt||(this.startedAt=r);const c=r-this.startedAt,a=n===0?1:Q(c/n,2),m=a>=1&&!o;e(a),m?this.stop():this.animationId=requestAnimationFrame(i)};this.animationId=requestAnimationFrame(i)}stop(){this.isInProgress=!1,this.startedAt=null,x(this.animationId)&&cancelAnimationFrame(this.animationId)}}function Vt(t){const{startY:e,endY:n,bottomSheetContainer:o,animationFrame:i,onEnd:r,animationTimingFunction:c,animationDuration:a}=t,m=mt(e,n);i.stop();let u=!1;i.start(l=>{Z(o,{y:e+m*c(l)}),!u&&l>=1&&(r==null||r(),u=!0)},a)}const rt=(t,e)=>n=>{Vt({...n,animationTimingFunction:t,animationDuration:e})},N={TOP:"top",MIDDLE:"middle",CONTENT_HEIGHT:"content-height",CLOSED:"closed"};function Kt(t){return!(!x(t)||t>1||t<0)}function Qt(t,e){const n={set(o,i,r,c){return e(i,r),Reflect.set(o,i,r,c)}};return new Proxy(t,n)}function Zt(...t){console.error(t)}const F={EASE:"ease",EASE_IN:"ease-in",EASE_OUT:"ease-out",EASE_IN_OUT:"ease-in-out",SPRING:"spring"};function Jt(t){for(const e of Object.values(F))if(e===t)return!0;return!1}function Et(t){return!!(t instanceof Object&&"p1x"in t&&"p1y"in t&&"p2x"in t&&"p2y"in t&&x(t.p1x)&&x(t.p1y)&&x(t.p2x)&&x(t.p2y))}function W(t,e,n,o){return function(a){return c(i(a))};function i(a){let m=0,u=1,l=a,b;if(a===0||a===1)return a;for(;m<u;){if(b=r(l),Math.abs(b-a)<.001)return l;a>b?m=l:u=l,l=(u+m)/2}return l}function r(a){return 3*t*a*Math.pow(1-a,2)+3*n*Math.pow(a,2)*(1-a)+Math.pow(a,3)}function c(a){return 3*e*a*Math.pow(1-a,2)+3*o*Math.pow(a,2)*(1-a)+Math.pow(a,3)}}const te=W(.25,.1,.25,1),ee=W(.42,0,1,1),Tt=W(.42,0,.58,1),Ht=W(.4,.1,.6,1),ne=W(.45,1.5,.55,1);function oe(t){switch(t){case F.EASE:return te;case F.EASE_IN:return ee;case F.EASE_OUT:return Tt;case F.EASE_IN_OUT:return Ht;case F.SPRING:return ne;default:return Ht}}function kt(t){return typeof t=="boolean"}const re={ariaLabel:"Bottom sheet",content:"",defaultPosition:N.CONTENT_HEIGHT,marginTop:20,snapPoints:[],width:"92%",dragTriggers:[],beforeOpen:()=>{},afterOpen:()=>{},beforeClose:()=>{},afterClose:()=>{},onDragStart:()=>{},onDragMove:()=>{},onDragEnd:()=>{},expandable:!0,draggable:!0,backgroundDraggable:!0,shouldCloseOnOutsideClick:!0,shouldShowBackdrop:!0,shouldShowHandle:!0,backDropTransition:null,backdropColor:null,containerBorderRadius:null,rootClass:null,containerClass:null,handleClass:null,contentWrapperClass:null,backdropClass:null,draggingAnimationTimings:"ease-in-out",draggingAnimationDuration:180};function ie(t){const e={...re},n=Object.entries(t).reduce((o,i)=>{const[r,c]=i;return ot(c)&&(o[r]=c),o},{});return{...e,...n}}function it(t){if(Et(t)){const{p1x:e,p1y:n,p2x:o,p2y:i}=t;return W(e,n,o,i)}return Jt(t)?oe(t):Tt}function ae(t,e,n){function o(i,r){switch(i){case"content":E(r)&&(t.bottomSheetContentWrapper.innerHTML=r);break;case"width":E(r)&&(t.bottomSheetContainer.style.width=r);break;case"shouldShowHandle":kt(r)||z(t.bottomSheetHandle,!1);break;case"shouldShowBackdrop":kt(r)||z(t.bottomSheetBackdrop,!1);break;case"containerBorderRadius":E(r)&&(t.bottomSheetContainer.style.borderRadius=r);break;case"backdropColor":E(r)&&(t.bottomSheetBackdrop.style.backgroundColor=r);break;case"backDropTransition":E(r)&&(t.bottomSheetBackdrop.style.transition=r);break;case"rootClass":if(!E(r))return;G(t.bottomSheetRoot,n.rootClass,r);break;case"containerClass":if(!E(r))return;G(t.bottomSheetContainer,n.containerClass,r);break;case"handleClass":if(!E(r))return;G(t.bottomSheetHandle,n.handleClass,r);break;case"contentWrapperClass":if(!E(r))return;G(t.bottomSheetContentWrapper,n.contentWrapperClass,r);break;case"backdropClass":if(!E(r))return;G(t.bottomSheetBackdrop,n.backdropClass,r);break;case"draggingAnimationTimings":if(Et(r)){const c=it(r),a=rt(c,n.draggingAnimationDuration);e.translateContainer=a}break;case"draggingAnimationDuration":if(x(r)){const c=it(n.draggingAnimationTimings),a=rt(c,r);e.translateContainer=a}break}}return o}function se(t){const e=ie(t),n=it(t.draggingAnimationTimings),o={isMounted:!1,translateContainer:rt(n,e.draggingAnimationDuration)},i={startY:null,containerStartTranslate:{x:0,y:0},isDragging:!1,originalDocumentOverflowY:document.body.style.overflowY},r=new zt,c={animationFrame:r,onClose:C,bottomSheetState:o,draggingState:i,snapTo:Y,moveUp:D,moveDown:ct},{elements:a,eventHandlers:m}=_t(e,c),u=Qt(e,ae(a,o,e)),{bottomSheetBackdrop:l,bottomSheetRoot:b,bottomSheetContainer:s}=a,v=d=>{const p=d??window.document.body;p.appendChild(b),p.appendChild(l);const h=window.innerHeight;Z(s,{y:h}),m.attachEventListeners(),o.isMounted=!0},L=()=>{m.clearEventListeners(),Object.values(a).forEach(d=>{d.remove()}),o.isMounted=!1},S=()=>{var d;if(T()||Zt('Bottom Sheet is not mounted yet. call the "mount" method first.'),(d=t.beforeOpen)==null||d.call(t),y())return;u.shouldShowBackdrop&&tt(l,!0),tt([s],!0),Z(s,{y:s.clientHeight});const p=window.innerHeight,h=pt(p,s.clientHeight,u.marginTop,u.defaultPosition),g=P(s).y;o.translateContainer({startY:g,endY:h,animationFrame:r,bottomSheetContainer:s,onEnd:t.afterOpen}),a.bottomSheetHandle.focus()};function C(){var d;if(j())return;(d=t.beforeClose)==null||d.call(t);const p=P(s).y,h=s.clientHeight;o.translateContainer({startY:p,endY:h,animationFrame:r,bottomSheetContainer:s,onEnd:()=>{var g;(g=t.afterClose)==null||g.call(t),tt([l,s],!1)}})}function T(){return o.isMounted}function y(){const d=P(s).y,p=window.innerHeight,h=s.clientHeight>=p?p:s.clientHeight;return d<h}function j(){return!y()}function at(){const d=P(s).y,p=s.clientHeight,h=window.innerHeight;if(d<=5&&d>=-5)return N.CONTENT_HEIGHT;const g=p-d;if(g===h/2)return N.MIDDLE;const H=h-u.marginTop,B=10;return g<=H+B&&g>=H-B?N.TOP:N.CLOSED}function st(){return s.clientHeight}function f(d){const p=P(s).y,h=s.clientHeight-p,g=window.innerHeight-d,H=It(h,g),B=K(h,g);o.translateContainer({startY:p,endY:p+(H.isUp?-B:B),animationFrame:r,bottomSheetContainer:s})}function A(d,{viewportHeight:p,visibleHeight:h}){let g=null;for(const H of d){const B=H*p,U=K(h,B);(g===null||U<g)&&(g=U)}return{minOffset:g}}function D(){const d=[...u.snapPoints].reverse(),p=P(s).y,h=s.clientHeight,g=h-p;if(!u.expandable&&g>=h)return;const H=window.innerHeight,B=ft("above",{visibleHeight:g,viewportHeight:H},d),{minOffset:U}=A(B,{visibleHeight:g,viewportHeight:H});if(U===null&&g<H-u.marginTop){o.translateContainer({startY:p,endY:pt(H,h,u.marginTop,"top"),animationFrame:r,bottomSheetContainer:s});return}x(U)&&o.translateContainer({startY:p,endY:p-U,animationFrame:r,bottomSheetContainer:s})}function ct(){const d=P(s).y,p=s.clientHeight-d;if(p<1)return;const h=window.innerHeight,g=ft("below",{visibleHeight:p,viewportHeight:h},u.snapPoints),{minOffset:H}=A(g,{visibleHeight:p,viewportHeight:h});x(H)&&o.translateContainer({startY:d,endY:d+H,animationFrame:r,bottomSheetContainer:s})}function Y(d){const p=window.innerHeight;if(!Kt(d))return;const h=Q(p*d,2);f(h)}return{props:u,elements:a,mount:v,unmount:L,open:S,close:C,getIsMounted:T,getIsOpen:y,getIsClosed:j,getPosition:at,getHeight:st,moveTo:f,snapTo:Y}}function Lt(){return{elements:{bottomSheetRoot:void 0,bottomSheetBackdrop:void 0,bottomSheetContainer:void 0,bottomSheetHandle:void 0,bottomSheetHandleBar:void 0,bottomSheetContentWrapper:void 0,bottomSheetContainerGapFiller:void 0},mount:()=>{},unmount:()=>{},open:()=>{},close:()=>{},getIsMounted:()=>!1,getHeight:()=>0,getIsOpen:()=>!1,getIsClosed:()=>!0,getPosition:()=>N.CLOSED,moveTo:()=>{},snapTo:()=>{},props:{content:""}}}const ce=Lt(),le=k.forwardRef(function(e,n){const{children:o,isOpen:i,setIsOpen:r,afterClose:c,mountingPoint:a,...m}=e,u=k.useRef(ce),[l,b]=k.useState(u.current);k.useImperativeHandle(n,()=>l,[l]);const s=k.useCallback(()=>{r(!1),c==null||c()},[c]);k.useEffect(()=>{i?l.open():l.close()},[i]);const v=k.useRef(null);return k.useEffect(function(){const S=At(e.mountingPoint)?e.mountingPoint:window.document.body;if(!S||l.getIsMounted())return;const C=se({content:"",...m,afterClose:s});return C.mount(S),v.current=C.elements.bottomSheetContentWrapper??null,u.current=C,b(C),()=>{l.unmount()}},[e.mountingPoint,m,s]),k.useEffect(function(){Object.assign(u.current.props,{...m}),b(u.current)},[m]),v.current?xt.createPortal(e.children,v.current):null});O.ReactPlainBottomSheet=le,O.createPlaceholderBottomSheet=Lt,Object.defineProperty(O,Symbol.toStringTag,{value:"Module"})});
|