@plainsheet/react 0.4.8 → 0.4.10
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
CHANGED
|
@@ -4,13 +4,11 @@
|
|
|
4
4
|
</a>
|
|
5
5
|
</p>
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
</a>
|
|
7
|
+
|
|
8
|
+
|
|
10
9
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
</a>
|
|
10
|
+
|
|
11
|
+
|
|
14
12
|
|
|
15
13
|
<a href="https://codecov.io/gh/PeterByun/plain-bottom-sheet" >
|
|
16
14
|
<img src="https://codecov.io/gh/PeterByun/plain-bottom-sheet/graph/badge.svg?token=WFHGUAI3GC"/>
|
package/dist/BottomSheet.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { OmitKeyof } from '@plainsheet/utility';
|
|
2
2
|
import { BottomSheetCore, BottomSheetCoreProps } from '@plainsheet/core';
|
|
3
|
-
import { MutableRefObject, ReactNode } from 'react';
|
|
3
|
+
import { MutableRefObject, ReactNode, RefObject } from 'react';
|
|
4
4
|
|
|
5
5
|
export { createPlaceholderBottomSheet } from '@plainsheet/core';
|
|
6
6
|
export type { BottomSheetCore } from '@plainsheet/core';
|
|
@@ -8,7 +8,7 @@ export type BottomSheetProps = {
|
|
|
8
8
|
children: ReactNode;
|
|
9
9
|
isOpen: boolean;
|
|
10
10
|
setIsOpen: (isOpen: boolean) => void;
|
|
11
|
-
mountingPointRef?: MutableRefObject<MountingPoint>;
|
|
11
|
+
mountingPointRef?: RefObject<MountingPoint> | MutableRefObject<MountingPoint>;
|
|
12
12
|
} & CoreProps;
|
|
13
13
|
type CoreProps = OmitKeyof<BottomSheetCoreProps, "content">;
|
|
14
14
|
type MountingPoint = undefined | HTMLElement;
|
|
@@ -16,5 +16,5 @@ export declare const BottomSheet: import('react').ForwardRefExoticComponent<{
|
|
|
16
16
|
children: ReactNode;
|
|
17
17
|
isOpen: boolean;
|
|
18
18
|
setIsOpen: (isOpen: boolean) => void;
|
|
19
|
-
mountingPointRef?: MutableRefObject<MountingPoint>;
|
|
19
|
+
mountingPointRef?: RefObject<MountingPoint> | MutableRefObject<MountingPoint>;
|
|
20
20
|
} & CoreProps & import('react').RefAttributes<BottomSheetCore>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const k=require("react"),xt=require("react-dom");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%;background-color:transparent;z-index:1;transition:background-color .2s ease-out}.pbs-backdrop.hidden{visibility:hidden}.pbs-backdrop.open{background-color:#454545b3}.pbs-backdrop.transparent{background-color:transparent}.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,Bt=(t,e,n)=>e in t?Dt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,K=(t,e,n)=>Bt(t,typeof e!="symbol"?e+"":e,n);function A(t){return typeof t=="string"}function Mt(t,e){return t.classList.contains(et(e))}function V(t,e){t.classList.add(et(e))}function ot(t,e){t.classList.remove(et(e))}function X(t,e,n){A(n)&&(A(e)&&ot(t,e),V(t,n))}function et(t){return A(t)?t.trim().replace(/\./g,""):""}function N(t){return t.map(e=>et(e)).filter(Boolean).join(" ")}function Pt(t){return t.map(e=>e==null?void 0:e.trim()).filter(Boolean).map(e=>`.${e}`).join(" ")}const ut="open",dt="hidden";function nt(t,e){const n=e;if(Array.isArray(t)){t.forEach(o=>{Q(o,n),o.setAttribute("aria-modal",n?"true":"false")});return}Q(t,n),t.setAttribute("aria-modal",n?"true":"false")}function Q(t,e){e?(V(t,ut),ot(t,dt)):(V(t,dt),ot(t,ut))}function St(t){return t instanceof HTMLElement}function D(t){return typeof t=="number"&&!Number.isNaN(t)}function Yt(t){St(t)&&t.focus()}function It(t){if(!St(t)||t.offsetParent===null||"disabled"in t&&t.disabled)return!1;const e=t.getAttribute("tabindex"),n=D(e)?parseInt(e,10):-1,o=["INPUT","BUTTON","SELECT","TEXTAREA","A","AREA","IFRAME"].includes(t.tagName),r=t instanceof HTMLAnchorElement&&t.href!==""||t instanceof HTMLAreaElement&&t.href!=="";return o||r||n>-1}var T=(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))(T||{}),rt=(t=>(t.Button="pbs-button-reset",t.Dialog="pbs-dialog-reset",t))(rt||{}),J=(t=>(t.Hidden="hidden",t))(J||{});function P(t,e,n){const o=document.createElement(t);return e.split(" ").forEach(r=>{V(o,r)}),A(n)&&o.setAttribute("data-testid",n),o}Pt([T.Root,T.ContentWrapper]);function pt(t,e,n,o){switch(o){case"content-height":return e>=t?Et(t,e,n):0;case"middle":return-(t/2-e);case"top":return-(t-e)+n;default:return 0}}function yt(t,e){const n=e<t,o=e>t;return{isUp:n,isDown:o,stayedSame:e===t}}function Ct(t,e){return e<t?-(t-e):e-t}function z(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 ht(t,e,n){const o=t==="above";return n.filter(r=>{const i=r*e.viewportHeight;return o?e.visibleHeight<i:e.visibleHeight>i})}function Et(t,e,n){return-(t-e)+n}function mt(t){return Number(t.replace("px",""))}function Z(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 r=o[1],i=o[2].split(",").map(a=>a.trim());n.push({type:r,values:i})}return n}function Wt(t){const e=t.style.transform,n=wt(e);return{transform:e,transformValues:n}}function kt(t,e){return t.find(o=>o.type.startsWith(e))||null}const at="translate";function M(t){const e=t.style.transform,n=wt(e),o=kt(n,at);return Tt(o??{type:at,values:[]})}function tt(t,{x:e,y:n}){const{transform:o,transformValues:r}=Wt(t),i=kt(r,at);if(i){const a=Tt(i);t.style.transform=`translate(${e??a.x??0}px,${n??a.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 Tt(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:mt(e)??0,y:mt(n)??0}}function it(t){return t!=null}function bt(t,{min:e,max:n}){return it(n)&&t>=n?n:it(e)&&t<=e?e:t}const Nt=(t,e,n)=>{e instanceof HTMLElement&&!Mt(e,T.Handle)&&n.scrollTop>=1||(t.isDragging=!0)},Ft=(t,e,n,o)=>r=>{o.startY=t.getCoordinates(r).y,o.containerStartTranslate=M(e),n.onDragStart()},jt=(t,e,n,o,r)=>i=>{Ut(i,t,n,o,r,e,n.marginTop)};function Ut(t,e,n,o,r,i,a){if(!o.isDragging||!D(o.startY))return;const c=e.getCoordinates(t).y,u=Ct(o.startY,c),h=window.innerHeight,s=i.clientHeight,m=s-(o.containerStartTranslate.y+u);if(m>=h)return;const C=yt(o.startY,c);if(C.isUp&&!n.expandable&&m>=s||n.preventClosing&&m<=s)return;r.start(()=>{tt(i,{y:o.containerStartTranslate.y+u})},0);const l=h-a,E=s-o.containerStartTranslate.y;if(C.isUp){const b=l-E,v=l-m,w=bt(1-Z(v/b,2),{min:0,max:1});n.onDragMove(C,w)}else if(C.isDown){const b=bt(Z(1-m/E,2),{min:0,max:1});n.onDragMove(C,b)}}const $t=(t,e,n,o,r,i,a)=>c=>{if(!o.isDragging||(o.isDragging=!1,!D(o.startY)))return;n.onDragEnd();const u=o.startY,h=t.getCoordinates(c).y,s=M(e).y,m=yt(u,h),C=window.innerHeight,l=e.clientHeight;if(m.isUp){const E=[...n.snapPoints].sort((w,x)=>w-x),b=l+-s;if(!n.expandable&&b>=l)return;for(const w of E){const x=w*window.innerHeight;if(b<=x){const H=z(b,x);a.translateContainer({startY:s,endY:s-H,animationFrame:r,bottomSheetContainer:e});return}}const v=Et(C,l,n.marginTop);a.translateContainer({startY:s,endY:v,animationFrame:r,bottomSheetContainer:e})}else if(m.isDown){const E=[...n.snapPoints].sort((b,v)=>v-b);for(const b of E){const v=b*window.innerHeight,w=l+-s;if(w>=v){const x=z(w,v);a.translateContainer({startY:s,endY:s+x,animationFrame:r,bottomSheetContainer:e});return}}if(n.preventClosing){const b=l+-s;if(b>=l){const v=z(b,l);a.translateContainer({startY:s,endY:s+v,animationFrame:r,bottomSheetContainer:e})}return}i()}};var U=(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))(U||{});function ft(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:U.All};class q{constructor(e){K(this,"currentTarget"),this.currentTarget=e}addEventListeners({onStart:e,onStartOptions:n=Gt,onMove:o,onEnd:r}){this.addTouchEventListeners({onStart:e,onStartOptions:n,onMove:o,onEnd:r}),this.addMouseEventListeners({onStart:e,onStartOptions:n,onMove:o,onEnd:r})}addTouchEventListeners({onStart:e,onStartOptions:n,onMove:o,onEnd:r}){e&&this.currentTarget.addEventListener("touchstart",i=>{if(n.eventPhase===U.All){e(i);return}ft(i.eventPhase)===n.eventPhase&&e(i)},{passive:!0}),o&&this.currentTarget.addEventListener("touchmove",o),r&&this.currentTarget.addEventListener("touchend",r)}addMouseEventListeners({onStart:e,onStartOptions:n,onMove:o,onEnd:r}){e&&this.currentTarget.addEventListener("mousedown",i=>{if(n.eventPhase===U.All){e(i);return}ft(i.eventPhase)===n.eventPhase&&e(i)},{passive:!0}),o&&this.currentTarget.addEventListener("mousemove",o),r&&this.currentTarget.addEventListener("mouseup",i=>{r(i)})}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 Ht(t){const e=t;return`${e} ${e} 0px 0px`}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 r=window.innerHeight;n.bottomSheetContainer.style.maxHeight=`${r}px`,n.bottomSheetContentWrapper.appendChild(o);const i=zt({bottomSheetElements:n,bottomSheetProps:t,options:e});return t.rootStyle&&Object.assign(n.bottomSheetRoot.style,t.rootStyle),t.backdropStyle&&Object.assign(n.bottomSheetBackdrop.style,t.backdropStyle),t.containerStyle&&Object.assign(n.bottomSheetContainer.style,t.containerStyle),t.handleStyle&&Object.assign(n.bottomSheetHandleBar.style,t.handleStyle),t.contentWrapperStyle&&Object.assign(n.bottomSheetContentWrapper.style,t.contentWrapperStyle),{elements:n,eventHandlers:i}}function Xt(t){const e=P("dialog",N([T.Root,rt.Dialog,t.rootClass]),T.Root);e.ariaLabel=t.ariaLabel;const n=P("section",N([T.Container,t.containerClass]),T.Container);t.containerBorderRadius&&(n.style.borderRadius=Ht(t.containerBorderRadius));const o=P("div",T.GapFiller,T.GapFiller),r=P("button",N([T.Handle,rt.Button,t.shouldShowHandle?null:J.Hidden,t.handleClass]),T.Handle);r.setAttribute("type","button"),r.ariaLabel="bottom sheet close button";const i=P("span",N([T.HandleBar,t.shouldShowHandle?null:J.Hidden]),T.HandleBar),a=P("article",N([T.ContentWrapper,t.contentWrapperClass]),T.ContentWrapper),c=P("div",N([T.Backdrop,t.backdropClass,J.Hidden]),T.Backdrop);return t.backdropColor&&(c.style.backgroundColor=t.backdropColor),t.backDropTransition&&(c.style.transition=t.backDropTransition),{bottomSheetRoot:e,bottomSheetBackdrop:c,bottomSheetContainer:n,bottomSheetHandle:r,bottomSheetHandleBar:i,bottomSheetContentWrapper:a,bottomSheetContainerGapFiller:o}}function qt({bottomSheetRoot:t,bottomSheetContainer:e,bottomSheetHandle:n,bottomSheetHandleBar:o,bottomSheetContentWrapper:r,bottomSheetContainerGapFiller:i}){t.appendChild(e),n.appendChild(o),e.appendChild(n),e.appendChild(r),e.appendChild(i)}function zt({bottomSheetElements:t,bottomSheetProps:e,options:n}){const{bottomSheetRoot:o,bottomSheetContainer:r,bottomSheetHandle:i,bottomSheetContainerGapFiller:a,bottomSheetContentWrapper:c,bottomSheetBackdrop:u}=t,{animationFrame:h}=n,s=new q(i),m=new q(c),C=new q(a),l=e.dragTriggers.reduce((O,y)=>{const S=o.querySelectorAll(y);if(!S.length)return O;const p=Array.from(S).map(d=>d instanceof HTMLElement?new q(d):null).filter(d=>!!d);return[...O,...p]},[]),E=new q(window),b=Ft(E,r,e,n.draggingState),v=jt(E,r,e,n.draggingState,h),w=$t(E,r,e,n.draggingState,h,n.onClose,n.bottomSheetState);function x(O){O.target instanceof Element&&!o.contains(O.target)&&n.onClose()}function H(O){Nt(n.draggingState,O.target,t.bottomSheetContentWrapper)}function Y(O){const y=O??e;y.draggable&&(s.addEventListeners({onStart:H}),l.forEach(S=>{S.addEventListeners({onStart:H,onStartOptions:{eventPhase:U.Target}})})),y.draggable&&y.backgroundDraggable&&(m.addEventListeners({onStart:H,onStartOptions:{eventPhase:U.Target}}),C.addEventListeners({onStart:H})),y.draggable&&E.addEventListeners({onStart:b,onMove:v,onEnd:w}),y.draggable&&window.document.addEventListener("keyup",S=>{S.key==="Escape"&&n.onClose()}),i.addEventListener("keyup",S=>{if(S.key==="ArrowUp"){n.moveUp();return}if(S.key==="ArrowDown"){n.moveDown();return}if(S.shiftKey&&S.key==="Tab"){const p=I(t.bottomSheetContentWrapper);Yt(p)}})}function G(){e.shouldCloseOnOutsideClick?u.addEventListener("click",x):u.style.pointerEvents="none"}function _(){u.removeEventListener("click",x)}function I(O){let y=[...Array.from(O.childNodes).reverse()];for(;y.length;){const S=y.shift();if(It(S))return S;S&&(y=[...y,...Array.from(S.childNodes).reverse()])}return null}function R(){s.removeEventListeners({onStart:H}),m.removeEventListeners({onStart:H}),C.removeEventListeners({onStart:H}),l.forEach(O=>{O.removeEventListeners({onStart:H})}),E.removeEventListeners({onStart:b,onMove:v,onEnd:w})}return{attachEventListeners:Y,clearEventListeners:R,attacheOnOpenEventListeners:G,clearOnOpenEventListeners:_}}class Vt{constructor(){K(this,"animationId"),K(this,"isInProgress"),K(this,"startedAt"),this.animationId=null,this.isInProgress=!1,this.startedAt=null}start(e,n,o=!1){this.isInProgress=!0;const r=i=>{this.startedAt||(this.startedAt=i);const a=i-this.startedAt,c=n===0?1:Z(a/n,2),u=c>=1&&!o;e(c),u?this.stop():this.animationId=requestAnimationFrame(r)};this.animationId=requestAnimationFrame(r)}stop(){this.isInProgress=!1,this.startedAt=null,D(this.animationId)&&cancelAnimationFrame(this.animationId)}}function Kt(t){const{startY:e,endY:n,bottomSheetContainer:o,animationFrame:r,onEnd:i,animationTimingFunction:a,animationDuration:c}=t,u=Ct(e,n);r.stop();let h=!1;r.start(s=>{tt(o,{y:e+u*a(s)}),!h&&s>=1&&(i==null||i(),h=!0)},c)}const st=(t,e)=>n=>{Kt({...n,animationTimingFunction:t,animationDuration:e})},j={TOP:"top",MIDDLE:"middle",CONTENT_HEIGHT:"content-height",CLOSED:"closed"};function Jt(t){return!(!D(t)||t>1||t<0)}function Qt(t,e){const n={set(o,r,i,a){return e(r,i),Reflect.set(o,r,i,a)}};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 Ot(t){return!!(t instanceof Object&&"p1x"in t&&"p1y"in t&&"p2x"in t&&"p2y"in t&&D(t.p1x)&&D(t.p1y)&&D(t.p2x)&&D(t.p2y))}function $(t,e,n,o){return function(c){return a(r(c))};function r(c){let u=0,h=1,s=c,m;if(c===0||c===1)return c;for(;u<h;){if(m=i(s),Math.abs(m-c)<.001)return s;c>m?u=s:h=s,s=(h+u)/2}return s}function i(c){return 3*t*c*Math.pow(1-c,2)+3*n*Math.pow(c,2)*(1-c)+Math.pow(c,3)}function a(c){return 3*e*c*Math.pow(1-c,2)+3*o*Math.pow(c,2)*(1-c)+Math.pow(c,3)}}const gt=$(.25,.1,.25,1),ee=$(.42,0,1,1),Lt=$(.42,0,.58,1),ne=$(.4,.1,.6,1),oe=$(.45,1.5,.55,1);function re(t){switch(t){case F.EASE:return gt;case F.EASE_IN:return ee;case F.EASE_OUT:return Lt;case F.EASE_IN_OUT:return ne;case F.SPRING:return oe;default:return gt}}function vt(t){return typeof t=="boolean"}const ae={ariaLabel:"Bottom sheet",content:"",defaultPosition:j.CONTENT_HEIGHT,marginTop:20,snapPoints:[],width:"92%",dragTriggers:[],beforeOpen:()=>{},afterOpen:()=>{},beforeClose:()=>{},afterClose:()=>{},onDragStart:()=>{},onDragMove:()=>{},onDragEnd:()=>{},expandable:!0,preventClosing:!1,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,rootStyle:{},containerStyle:{},handleStyle:{},contentWrapperStyle:{},backdropStyle:{}};function ie(t){const e={...ae},n=Object.entries(t).reduce((o,r)=>{const[i,a]=r;return it(a)&&(o[i]=a),o},{});return{...e,...n}}function ct(t){if(Ot(t)){const{p1x:e,p1y:n,p2x:o,p2y:r}=t;return $(e,n,o,r)}return te(t)?re(t):Lt}function se(t,e,n,o){function r(i,a){switch(i){case"content":A(a)&&(t.bottomSheetContentWrapper.innerHTML=a);break;case"width":A(a)&&(t.bottomSheetContainer.style.width=a);break;case"shouldShowHandle":vt(a)||Q(t.bottomSheetHandle,!1);break;case"shouldShowBackdrop":vt(a)||Q(t.bottomSheetBackdrop,!1);break;case"containerBorderRadius":A(a)&&(t.bottomSheetContainer.style.borderRadius=Ht(a));break;case"backdropColor":A(a)&&(t.bottomSheetBackdrop.style.backgroundColor=a);break;case"backDropTransition":A(a)&&(t.bottomSheetBackdrop.style.transition=a);break;case"rootClass":if(!A(a))return;X(t.bottomSheetRoot,n.rootClass,a);break;case"containerClass":if(!A(a))return;X(t.bottomSheetContainer,n.containerClass,a);break;case"handleClass":if(!A(a))return;X(t.bottomSheetHandle,n.handleClass,a);break;case"contentWrapperClass":if(!A(a))return;X(t.bottomSheetContentWrapper,n.contentWrapperClass,a);break;case"backdropClass":if(!A(a))return;X(t.bottomSheetBackdrop,n.backdropClass,a);break;case"expandable":o.clearEventListeners(),o.attachEventListeners(n);break;case"preventClosing":o.clearEventListeners(),o.attachEventListeners(n);break;case"draggable":o.clearEventListeners(),o.attachEventListeners(n);break;case"draggingAnimationTimings":if(Ot(a)){const c=ct(a),u=st(c,n.draggingAnimationDuration);e.translateContainer=u}break;case"draggingAnimationDuration":if(D(a)){const c=ct(n.draggingAnimationTimings),u=st(c,a);e.translateContainer=u}break;case"rootStyle":n.rootStyle&&Object.assign(t.bottomSheetRoot.style,n.rootStyle);break;case"backdropStyle":n.backdropStyle&&Object.assign(t.bottomSheetBackdrop.style,n.backdropStyle);break;case"containerStyle":n.containerStyle&&Object.assign(t.bottomSheetContainer.style,n.containerStyle);break;case"handleStyle":n.handleStyle&&Object.assign(t.bottomSheetHandleBar.style,n.handleStyle);break;case"contentWrapperStyle":n.contentWrapperStyle&&Object.assign(t.bottomSheetContentWrapper.style,n.contentWrapperStyle);break}}return r}function ce(t){const e=ie(t),n=ct(t.draggingAnimationTimings),o={isMounted:!1,translateContainer:st(n,e.draggingAnimationDuration)},r={startY:null,containerStartTranslate:{x:0,y:0},isDragging:!1,originalDocumentOverflowY:null,originalDocumentOverscrollBehavior:null};function i(){r.originalDocumentOverflowY&&r.originalDocumentOverflowY!=="hidden"&&(document.body.style.overflowY=r.originalDocumentOverflowY),r.originalDocumentOverscrollBehavior&&(document.body.style.position=r.originalDocumentOverscrollBehavior)}const a=new Vt,c={animationFrame:a,onClose:w,bottomSheetState:o,draggingState:r,snapTo:S,moveUp:O,moveDown:y},{elements:u,eventHandlers:h}=_t(e,c),s=Qt(e,se(u,o,e,h)),{bottomSheetBackdrop:m,bottomSheetRoot:C,bottomSheetContainer:l}=u,E=p=>{const d=p??window.document.body;d.appendChild(C),d.appendChild(m);const f=window.innerHeight;tt(l,{y:f}),h.attachEventListeners(),o.isMounted=!0},b=()=>{h.clearEventListeners(),Object.values(u).forEach(p=>{p.remove()}),i(),o.isMounted=!1},v=()=>{var p;if(x()||Zt('Bottom Sheet is not mounted yet. call the "mount" method first.'),(p=t.beforeOpen)==null||p.call(t),H())return;nt(m,!0),s.shouldShowBackdrop||V(m,"transparent"),nt([l],!0),tt(l,{y:l.clientHeight});const d=window.innerHeight,f=pt(d,l.clientHeight,s.marginTop,s.defaultPosition),g=M(l).y;o.translateContainer({startY:g,endY:f,animationFrame:a,bottomSheetContainer:l,onEnd:t.afterOpen});const L=document.body.style.overflowY;r.originalDocumentOverflowY=L||"initial";const B=document.body.style.overscrollBehavior;r.originalDocumentOverscrollBehavior=B||"initial",document.body.style.overflow="hidden",document.body.style.overscrollBehavior="contain",u.bottomSheetHandle.focus(),h.attacheOnOpenEventListeners()};function w(){var p;if(Y())return;(p=t.beforeClose)==null||p.call(t);const d=M(l).y,f=l.clientHeight;o.translateContainer({startY:d,endY:f,animationFrame:a,bottomSheetContainer:l,onEnd:()=>{var g;(g=t.afterClose)==null||g.call(t),nt([m,l],!1),h.clearOnOpenEventListeners()}}),i()}function x(){return o.isMounted}function H(){const p=M(l).y,d=window.innerHeight,f=l.clientHeight>=d?d:l.clientHeight;return p<=f}function Y(){return!H()}function G(){const p=M(l).y,d=l.clientHeight,f=window.innerHeight;if(p<=5&&p>=-5)return j.CONTENT_HEIGHT;const g=d-p;if(g===f/2)return j.MIDDLE;const L=f-s.marginTop,B=10;return g<=L+B&&g>=L-B?j.TOP:j.CLOSED}function _(){return l.clientHeight}function I(p){if(!H())return;const d=M(l).y,f=l.clientHeight-d,g=window.innerHeight-p,L=Rt(f,g),B=z(f,g);o.translateContainer({startY:d,endY:d+(L.isUp?-B:B),animationFrame:a,bottomSheetContainer:l})}function R(p,{viewportHeight:d,visibleHeight:f}){let g=null;for(const L of p){const B=L*d,W=z(f,B);(g===null||W<g)&&(g=W)}return{minOffset:g}}function O(){const p=[...s.snapPoints].reverse(),d=M(l).y,f=l.clientHeight,g=f-d;if(!s.expandable&&g>=f)return;const L=window.innerHeight,B=ht("above",{visibleHeight:g,viewportHeight:L},p),{minOffset:W}=R(B,{visibleHeight:g,viewportHeight:L});if(W===null&&g<L-s.marginTop){o.translateContainer({startY:d,endY:pt(L,f,s.marginTop,"top"),animationFrame:a,bottomSheetContainer:l});return}D(W)&&o.translateContainer({startY:d,endY:d-W,animationFrame:a,bottomSheetContainer:l})}function y(){const p=M(l).y,d=l.clientHeight-p;if(d<1)return;const f=window.innerHeight,g=ht("below",{visibleHeight:d,viewportHeight:f},s.snapPoints),{minOffset:L}=R(g,{visibleHeight:d,viewportHeight:f});D(L)&&o.translateContainer({startY:p,endY:p+L,animationFrame:a,bottomSheetContainer:l})}function S(p){const d=window.innerHeight;if(!Jt(p))return;const f=Z(d*p,2);I(f)}return{props:s,elements:u,mount:E,unmount:b,open:v,close:w,getIsMounted:x,getIsOpen:H,getIsClosed:Y,getPosition:G,getHeight:_,moveTo:I,snapTo:S}}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:()=>j.CLOSED,moveTo:()=>{},snapTo:()=>{},props:{content:""}}}const le=lt(),ue=k.forwardRef(function(e,n){const{children:o,isOpen:r,setIsOpen:i,afterClose:a,mountingPointRef:c,...u}=e,h=k.useRef(le),[s,m]=k.useState(h.current);k.useImperativeHandle(n,()=>s,[s]);const C=k.useCallback(()=>{i(!1),a==null||a()},[a]);k.useEffect(()=>{r?s.open():s.close()},[r]);const l=k.useRef(null);return k.useEffect(function(){var w;if(c&&!c.current)return;const b=At((w=e.mountingPointRef)==null?void 0:w.current)?e.mountingPointRef.current:window.document.body;if(!b||s.getIsMounted())return;const v=ce({content:"",...u,afterClose:C});return v.mount(b),l.current=v.elements.bottomSheetContentWrapper??null,h.current=v,m(v),()=>{s.unmount()}},[e.mountingPointRef,u,C]),k.useEffect(function(){Object.assign(h.current.props,{...u}),m(h.current)},[u]),k.useEffect(function(){return()=>{h.current.unmount()}},[]),l.current?xt.createPortal(e.children,l.current):null}),de=lt();function pe(t={}){const e=k.useRef(de),[n,o]=k.useState(!1),[r,i]=k.useState(e.current);k.useEffect(()=>{i(e.current)},[e.current]);const{beforeOpen:a,afterOpen:c,beforeClose:u,afterClose:h,onDragStart:s,onDragMove:m,onDragEnd:C,...l}=t,E=()=>{a==null||a()},b=()=>{c==null||c(),o(!0)},v=()=>{u==null||u()},w=()=>{h==null||h(),o(!1)},x=()=>{s==null||s()},H=(y,S)=>{m==null||m(y,S)},Y=()=>{C==null||C()},G=k.useMemo(()=>({ref:e,isOpen:n,setIsOpen:o,beforeOpen:E,afterOpen:b,beforeClose:v,afterClose:w,onDragStart:x,onDragMove:H,onDragEnd:Y,...l}),[e.current,n,o,t]),_=k.useCallback(()=>{o(!0)},[o]),I=k.useCallback(()=>{o(!0)},[o]),R=k.useCallback((...y)=>{r.moveTo(...y)},[r]),O=k.useCallback((...y)=>{r.snapTo(...y)},[r]);return{props:G,instance:r,isOpen:n,setIsOpen:o,open:_,close:I,moveTo:R,snapTo:O}}exports.BottomSheet=ue;exports.createPlaceholderBottomSheet=lt;exports.useBottomSheet=pe;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("react"),xt=require("react-dom");function Bt(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%;background-color:transparent;z-index:1;transition:background-color .2s ease-out}.pbs-backdrop.hidden{visibility:hidden}.pbs-backdrop.open{background-color:#454545b3}.pbs-backdrop.transparent{background-color:transparent}.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,Dt=(t,e,n)=>e in t?At(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,K=(t,e,n)=>Dt(t,typeof e!="symbol"?e+"":e,n);function x(t){return typeof t=="string"}function Mt(t,e){return t.classList.contains(et(e))}function V(t,e){t.classList.add(et(e))}function ot(t,e){t.classList.remove(et(e))}function X(t,e,n){x(n)&&(x(e)&&ot(t,e),V(t,n))}function et(t){return x(t)?t.trim().replace(/\./g,""):""}function W(t){return t.map(e=>et(e)).filter(Boolean).join(" ")}function Pt(t){return t.map(e=>e==null?void 0:e.trim()).filter(Boolean).map(e=>`.${e}`).join(" ")}const ut="open",dt="hidden";function nt(t,e){const n=e;if(Array.isArray(t)){t.forEach(o=>{Q(o,n),o.setAttribute("aria-modal",n?"true":"false")});return}Q(t,n),t.setAttribute("aria-modal",n?"true":"false")}function Q(t,e){e?(V(t,ut),ot(t,dt)):(V(t,dt),ot(t,ut))}function St(t){return t instanceof HTMLElement}function A(t){return typeof t=="number"&&!Number.isNaN(t)}function Yt(t){St(t)&&t.focus()}function Ft(t){if(!St(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),r=t instanceof HTMLAnchorElement&&t.href!==""||t instanceof HTMLAreaElement&&t.href!=="";return o||r||n>-1}var T=(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))(T||{}),rt=(t=>(t.Button="pbs-button-reset",t.Dialog="pbs-dialog-reset",t))(rt||{}),J=(t=>(t.Hidden="hidden",t))(J||{});function P(t,e,n){const o=document.createElement(t);return e.split(" ").forEach(r=>{V(o,r)}),x(n)&&o.setAttribute("data-testid",n),o}Pt([T.Root,T.ContentWrapper]);function pt(t,e,n,o){switch(o){case"content-height":return e>=t?Et(t,e,n):0;case"middle":return-(t/2-e);case"top":return-(t-e)+n;default:return 0}}function yt(t,e){const n=e<t,o=e>t;return{isUp:n,isDown:o,stayedSame:e===t}}function Ct(t,e){return e<t?-(t-e):e-t}function z(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 ht(t,e,n){const o=t==="above";return n.filter(r=>{const i=r*e.viewportHeight;return o?e.visibleHeight<i:e.visibleHeight>i})}function Et(t,e,n){return-(t-e)+n}function mt(t){return Number(t.replace("px",""))}function Z(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 r=o[1],i=o[2].split(",").map(a=>a.trim());n.push({type:r,values:i})}return n}function Rt(t){const e=t.style.transform,n=wt(e);return{transform:e,transformValues:n}}function kt(t,e){return t.find(o=>o.type.startsWith(e))||null}const at="translate";function M(t){const e=t.style.transform,n=wt(e),o=kt(n,at);return Tt(o??{type:at,values:[]})}function tt(t,{x:e,y:n}){const{transform:o,transformValues:r}=Rt(t),i=kt(r,at);if(i){const a=Tt(i);t.style.transform=`translate(${e??a.x??0}px,${n??a.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 Tt(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:mt(e)??0,y:mt(n)??0}}function it(t){return t!=null}function ft(t,{min:e,max:n}){return it(n)&&t>=n?n:it(e)&&t<=e?e:t}const Wt=(t,e,n)=>{e instanceof HTMLElement&&!Mt(e,T.Handle)&&n.scrollTop>=1||(t.isDragging=!0)},Nt=(t,e,n,o)=>r=>{o.startY=t.getCoordinates(r).y,o.containerStartTranslate=M(e),n.onDragStart()},jt=(t,e,n,o,r)=>i=>{Gt(i,t,n,o,r,e,n.marginTop)};function Gt(t,e,n,o,r,i,a){if(!o.isDragging||!A(o.startY))return;const l=e.getCoordinates(t).y,u=Ct(o.startY,l),h=window.innerHeight,c=i.clientHeight,f=c-(o.containerStartTranslate.y+u);if(f>=h)return;const y=yt(o.startY,l);if(y.isUp&&!n.expandable&&f>=c||n.preventClosing&&f<=c)return;r.start(()=>{tt(i,{y:o.containerStartTranslate.y+u})},0);const s=h-a,C=c-o.containerStartTranslate.y;if(y.isUp){const v=s-C,S=s-f,E=ft(1-Z(S/v,2),{min:0,max:1});n.onDragMove(y,E)}else if(y.isDown){const v=ft(Z(1-f/C,2),{min:0,max:1});n.onDragMove(y,v)}}const Ut=(t,e,n,o,r,i,a)=>l=>{if(!o.isDragging||(o.isDragging=!1,!A(o.startY)))return;n.onDragEnd();const u=o.startY,h=t.getCoordinates(l).y,c=M(e).y,f=yt(u,h),y=window.innerHeight,s=e.clientHeight;if(f.isUp){const C=[...n.snapPoints].sort((E,B)=>E-B),v=s+-c;if(!n.expandable&&v>=s)return;for(const E of C){const B=E*window.innerHeight;if(v<=B){const k=z(v,B);a.translateContainer({startY:c,endY:c-k,animationFrame:r,bottomSheetContainer:e});return}}const S=Et(y,s,n.marginTop);a.translateContainer({startY:c,endY:S,animationFrame:r,bottomSheetContainer:e})}else if(f.isDown){const C=[...n.snapPoints].sort((v,S)=>S-v);for(const v of C){const S=v*window.innerHeight,E=s+-c;if(E>=S){const B=z(E,S);a.translateContainer({startY:c,endY:c+B,animationFrame:r,bottomSheetContainer:e});return}}if(n.preventClosing){const v=s+-c;if(v>=s){const S=z(v,s);a.translateContainer({startY:c,endY:c+S,animationFrame:r,bottomSheetContainer:e})}return}i()}};var G=(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))(G||{});function bt(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:G.All};class q{constructor(e){K(this,"currentTarget"),this.currentTarget=e}addEventListeners({onStart:e,onStartOptions:n=$t,onMove:o,onEnd:r}){this.addTouchEventListeners({onStart:e,onStartOptions:n,onMove:o,onEnd:r}),this.addMouseEventListeners({onStart:e,onStartOptions:n,onMove:o,onEnd:r})}addTouchEventListeners({onStart:e,onStartOptions:n,onMove:o,onEnd:r}){e&&this.currentTarget.addEventListener("touchstart",i=>{if(n.eventPhase===G.All){e(i);return}bt(i.eventPhase)===n.eventPhase&&e(i)},{passive:!0}),o&&this.currentTarget.addEventListener("touchmove",o),r&&this.currentTarget.addEventListener("touchend",r)}addMouseEventListeners({onStart:e,onStartOptions:n,onMove:o,onEnd:r}){e&&this.currentTarget.addEventListener("mousedown",i=>{if(n.eventPhase===G.All){e(i);return}bt(i.eventPhase)===n.eventPhase&&e(i)},{passive:!0}),o&&this.currentTarget.addEventListener("mousemove",o),r&&this.currentTarget.addEventListener("mouseup",i=>{r(i)})}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 Ht(t){const e=t;return`${e} ${e} 0px 0px`}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 r=window.innerHeight;n.bottomSheetContainer.style.maxHeight=`${r}px`,n.bottomSheetContentWrapper.appendChild(o);const i=zt({bottomSheetElements:n,bottomSheetProps:t,options:e});return t.rootStyle&&Object.assign(n.bottomSheetRoot.style,t.rootStyle),t.backdropStyle&&Object.assign(n.bottomSheetBackdrop.style,t.backdropStyle),t.containerGapFillerStyle&&Object.assign(n.bottomSheetContainer.style,t.containerStyle),t.containerStyle&&Object.assign(n.bottomSheetContainerGapFiller.style,t.containerGapFillerStyle),t.handleStyle&&Object.assign(n.bottomSheetHandleBar.style,t.handleStyle),t.contentWrapperStyle&&Object.assign(n.bottomSheetContentWrapper.style,t.contentWrapperStyle),{elements:n,eventHandlers:i}}function Xt(t){const e=P("dialog",W([T.Root,rt.Dialog,t.rootClass]),T.Root);e.ariaLabel=t.ariaLabel;const n=P("section",W([T.Container,t.containerClass]),T.Container);t.containerBorderRadius&&(n.style.borderRadius=Ht(t.containerBorderRadius));const o=P("div",T.GapFiller,T.GapFiller);t.containerBackgroundColor&&(n.style.backgroundColor=t.containerBackgroundColor,o.style.backgroundColor=t.containerBackgroundColor);const r=P("button",W([T.Handle,rt.Button,t.shouldShowHandle?null:J.Hidden,t.handleClass]),T.Handle);r.setAttribute("type","button"),r.ariaLabel="bottom sheet close button";const i=P("span",W([T.HandleBar,t.shouldShowHandle?null:J.Hidden]),T.HandleBar),a=P("article",W([T.ContentWrapper,t.contentWrapperClass]),T.ContentWrapper),l=P("div",W([T.Backdrop,t.backdropClass,J.Hidden]),T.Backdrop);return t.backdropColor&&(l.style.backgroundColor=t.backdropColor),t.backDropTransition&&(l.style.transition=t.backDropTransition),{bottomSheetRoot:e,bottomSheetBackdrop:l,bottomSheetContainer:n,bottomSheetHandle:r,bottomSheetHandleBar:i,bottomSheetContentWrapper:a,bottomSheetContainerGapFiller:o}}function qt({bottomSheetRoot:t,bottomSheetContainer:e,bottomSheetHandle:n,bottomSheetHandleBar:o,bottomSheetContentWrapper:r,bottomSheetContainerGapFiller:i}){t.appendChild(e),n.appendChild(o),e.appendChild(n),e.appendChild(r),e.appendChild(i)}function zt({bottomSheetElements:t,bottomSheetProps:e,options:n}){const{bottomSheetRoot:o,bottomSheetContainer:r,bottomSheetHandle:i,bottomSheetContainerGapFiller:a,bottomSheetContentWrapper:l,bottomSheetBackdrop:u}=t,{animationFrame:h}=n,c=new q(i),f=new q(l),y=new q(a);let s=[];const C=new q(window),v=Nt(C,r,e,n.draggingState),S=jt(C,r,e,n.draggingState,h),E=Ut(C,r,e,n.draggingState,h,n.onClose,n.bottomSheetState);function B(H){H.target instanceof Element&&!o.contains(H.target)&&n.onClose()}function k(H){Wt(n.draggingState,H.target,t.bottomSheetContentWrapper)}function Y(H){const L=H??e;L.draggable&&L.backgroundDraggable&&(f.addEventListeners({onStart:k,onStartOptions:{eventPhase:G.Target}}),y.addEventListeners({onStart:k})),L.draggable&&C.addEventListeners({onStart:v,onMove:S,onEnd:E}),L.draggable&&window.document.addEventListener("keyup",b=>{b.key==="Escape"&&n.onClose()}),i.addEventListener("keyup",b=>{if(b.key==="ArrowUp"){n.moveUp();return}if(b.key==="ArrowDown"){n.moveDown();return}if(b.shiftKey&&b.key==="Tab"){const d=F(t.bottomSheetContentWrapper);Yt(d)}})}function $(H){const L=H??e;e.shouldCloseOnOutsideClick&&!e.preventClosing?u.addEventListener("click",B):u.style.pointerEvents="none",L.draggable&&(c.addEventListeners({onStart:k}),s.forEach(b=>{b.removeEventListeners({onStart:k})}),s=e.dragTriggers.reduce((b,d)=>{const p=o.querySelectorAll(d);if(!p.length)return b;const g=Array.from(p).map(m=>m instanceof HTMLElement?new q(m):null).filter(m=>!!m);return[...b,...g]},[]),s.forEach(b=>{b.addEventListeners({onStart:k,onStartOptions:{eventPhase:G.Target}})}))}function _(){u.removeEventListener("click",B)}function F(H){let L=[...Array.from(H.childNodes).reverse()];for(;L.length;){const b=L.shift();if(Ft(b))return b;b&&(L=[...L,...Array.from(b.childNodes).reverse()])}return null}function I(){c.removeEventListeners({onStart:k}),f.removeEventListeners({onStart:k}),y.removeEventListeners({onStart:k}),s.forEach(H=>{H.removeEventListeners({onStart:k})}),C.removeEventListeners({onStart:v,onMove:S,onEnd:E})}return{attachEventListeners:Y,clearEventListeners:I,attacheOnOpenEventListeners:$,clearOnOpenEventListeners:_}}class Vt{constructor(){K(this,"animationId"),K(this,"isInProgress"),K(this,"startedAt"),this.animationId=null,this.isInProgress=!1,this.startedAt=null}start(e,n,o=!1){this.isInProgress=!0;const r=i=>{this.startedAt||(this.startedAt=i);const a=i-this.startedAt,l=n===0?1:Z(a/n,2),u=l>=1&&!o;e(l),u?this.stop():this.animationId=requestAnimationFrame(r)};this.animationId=requestAnimationFrame(r)}stop(){this.isInProgress=!1,this.startedAt=null,A(this.animationId)&&cancelAnimationFrame(this.animationId)}}function Kt(t){const{startY:e,endY:n,bottomSheetContainer:o,animationFrame:r,onEnd:i,animationTimingFunction:a,animationDuration:l}=t,u=Ct(e,n);r.stop();let h=!1;r.start(c=>{tt(o,{y:e+u*a(c)}),!h&&c>=1&&(i==null||i(),h=!0)},l)}const st=(t,e)=>n=>{Kt({...n,animationTimingFunction:t,animationDuration:e})},j={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,r,i,a){return e(r,i),Reflect.set(o,r,i,a)}};return new Proxy(t,n)}function Zt(...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 te(t){for(const e of Object.values(N))if(e===t)return!0;return!1}function Ot(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 U(t,e,n,o){return function(l){return a(r(l))};function r(l){let u=0,h=1,c=l,f;if(l===0||l===1)return l;for(;u<h;){if(f=i(c),Math.abs(f-l)<.001)return c;l>f?u=c:h=c,c=(h+u)/2}return c}function i(l){return 3*t*l*Math.pow(1-l,2)+3*n*Math.pow(l,2)*(1-l)+Math.pow(l,3)}function a(l){return 3*e*l*Math.pow(1-l,2)+3*o*Math.pow(l,2)*(1-l)+Math.pow(l,3)}}const gt=U(.25,.1,.25,1),ee=U(.42,0,1,1),Lt=U(.42,0,.58,1),ne=U(.4,.1,.6,1),oe=U(.45,1.5,.55,1);function re(t){switch(t){case N.EASE:return gt;case N.EASE_IN:return ee;case N.EASE_OUT:return Lt;case N.EASE_IN_OUT:return ne;case N.SPRING:return oe;default:return gt}}function vt(t){return typeof t=="boolean"}const ae={ariaLabel:"Bottom sheet",content:"",defaultPosition:j.CONTENT_HEIGHT,marginTop:20,snapPoints:[],width:"92%",dragTriggers:[],beforeOpen:()=>{},afterOpen:()=>{},beforeClose:()=>{},afterClose:()=>{},onDragStart:()=>{},onDragMove:()=>{},onDragEnd:()=>{},expandable:!0,preventClosing:!1,draggable:!0,backgroundDraggable:!0,shouldCloseOnOutsideClick:!0,shouldShowBackdrop:!0,shouldShowHandle:!0,backDropTransition:null,backdropColor:null,containerBackgroundColor:null,containerBorderRadius:null,rootClass:null,containerClass:null,handleClass:null,contentWrapperClass:null,backdropClass:null,draggingAnimationTimings:"ease-in-out",draggingAnimationDuration:180,rootStyle:{},containerStyle:{},handleStyle:{},contentWrapperStyle:{},backdropStyle:{},containerGapFillerStyle:{}};function ie(t){const e={...ae},n=Object.entries(t).reduce((o,r)=>{const[i,a]=r;return it(a)&&(o[i]=a),o},{});return{...e,...n}}function ct(t){if(Ot(t)){const{p1x:e,p1y:n,p2x:o,p2y:r}=t;return U(e,n,o,r)}return te(t)?re(t):Lt}function se(t,e,n,o){function r(i,a){switch(i){case"content":x(a)&&(t.bottomSheetContentWrapper.innerHTML=a);break;case"width":x(a)&&(t.bottomSheetContainer.style.width=a);break;case"shouldShowHandle":vt(a)||Q(t.bottomSheetHandle,!1);break;case"shouldShowBackdrop":vt(a)||Q(t.bottomSheetBackdrop,!1);break;case"containerBorderRadius":x(a)&&(t.bottomSheetContainer.style.borderRadius=Ht(a));break;case"containerBackgroundColor":x(a)&&(t.bottomSheetContainer.style.backgroundColor=a,t.bottomSheetContainerGapFiller.style.backgroundColor=a);break;case"backdropColor":x(a)&&(t.bottomSheetBackdrop.style.backgroundColor=a);break;case"backDropTransition":x(a)&&(t.bottomSheetBackdrop.style.transition=a);break;case"rootClass":if(!x(a))return;X(t.bottomSheetRoot,n.rootClass,a);break;case"containerClass":if(!x(a))return;X(t.bottomSheetContainer,n.containerClass,a);break;case"handleClass":if(!x(a))return;X(t.bottomSheetHandle,n.handleClass,a);break;case"contentWrapperClass":if(!x(a))return;X(t.bottomSheetContentWrapper,n.contentWrapperClass,a);break;case"backdropClass":if(!x(a))return;X(t.bottomSheetBackdrop,n.backdropClass,a);break;case"expandable":o.clearEventListeners(),o.attachEventListeners(n);break;case"preventClosing":o.clearEventListeners(),o.attachEventListeners(n);break;case"draggable":o.clearEventListeners(),o.attachEventListeners(n);break;case"dragTriggers":o.clearEventListeners(),o.attachEventListeners(n);break;case"draggingAnimationTimings":if(Ot(a)){const l=ct(a),u=st(l,n.draggingAnimationDuration);e.translateContainer=u}break;case"draggingAnimationDuration":if(A(a)){const l=ct(n.draggingAnimationTimings),u=st(l,a);e.translateContainer=u}break;case"rootStyle":n.rootStyle&&Object.assign(t.bottomSheetRoot.style,n.rootStyle);break;case"backdropStyle":n.backdropStyle&&Object.assign(t.bottomSheetBackdrop.style,n.backdropStyle);break;case"containerStyle":n.containerStyle&&Object.assign(t.bottomSheetContainer.style,n.containerStyle);break;case"containerGapFillerStyle":n.containerGapFillerStyle&&Object.assign(t.bottomSheetContainerGapFiller.style,n.containerGapFillerStyle);break;case"handleStyle":n.handleStyle&&Object.assign(t.bottomSheetHandleBar.style,n.handleStyle);break;case"contentWrapperStyle":n.contentWrapperStyle&&Object.assign(t.bottomSheetContentWrapper.style,n.contentWrapperStyle);break}}return r}function ce(t){const e=ie(t),n=ct(t.draggingAnimationTimings),o={isMounted:!1,translateContainer:st(n,e.draggingAnimationDuration)},r={startY:null,containerStartTranslate:{x:0,y:0},isDragging:!1,originalDocumentOverflowY:null,originalDocumentOverscrollBehavior:null};function i(){r.originalDocumentOverflowY&&r.originalDocumentOverflowY!=="hidden"&&(document.body.style.overflowY=r.originalDocumentOverflowY),r.originalDocumentOverscrollBehavior&&(document.body.style.position=r.originalDocumentOverscrollBehavior)}const a=new Vt,l={animationFrame:a,onClose:E,bottomSheetState:o,draggingState:r,snapTo:b,moveUp:H,moveDown:L},{elements:u,eventHandlers:h}=_t(e,l),c=Qt(e,se(u,o,e,h)),{bottomSheetBackdrop:f,bottomSheetRoot:y,bottomSheetContainer:s}=u,C=d=>{const p=d??window.document.body;p.appendChild(y),p.appendChild(f);const g=window.innerHeight;tt(s,{y:g}),h.attachEventListeners(),o.isMounted=!0},v=()=>{h.clearEventListeners(),Object.values(u).forEach(d=>{d.remove()}),i(),o.isMounted=!1},S=()=>{var d;if(B()||Zt('Bottom Sheet is not mounted yet. call the "mount" method first.'),(d=t.beforeOpen)==null||d.call(t),k())return;nt(f,!0),c.shouldShowBackdrop||V(f,"transparent"),nt([s],!0),tt(s,{y:s.clientHeight});const p=window.innerHeight,g=pt(p,s.clientHeight,c.marginTop,c.defaultPosition),m=M(s).y;o.translateContainer({startY:m,endY:g,animationFrame:a,bottomSheetContainer:s,onEnd:t.afterOpen});const O=document.body.style.overflowY;r.originalDocumentOverflowY=O||"initial";const D=document.body.style.overscrollBehavior;r.originalDocumentOverscrollBehavior=D||"initial",document.body.style.overflow="hidden",document.body.style.overscrollBehavior="contain",u.bottomSheetHandle.focus(),h.attacheOnOpenEventListeners()};function E(){var d;if(Y())return;(d=t.beforeClose)==null||d.call(t);const p=M(s).y,g=s.clientHeight;o.translateContainer({startY:p,endY:g,animationFrame:a,bottomSheetContainer:s,onEnd:()=>{var m;(m=t.afterClose)==null||m.call(t),nt([f,s],!1),h.clearOnOpenEventListeners()}}),i()}function B(){return o.isMounted}function k(){const d=M(s).y,p=window.innerHeight,g=s.clientHeight>=p?p:s.clientHeight;return d<=g}function Y(){return!k()}function $(){const d=M(s).y,p=s.clientHeight,g=window.innerHeight;if(d<=5&&d>=-5)return j.CONTENT_HEIGHT;const m=p-d;if(m===g/2)return j.MIDDLE;const O=g-c.marginTop,D=10;return m<=O+D&&m>=O-D?j.TOP:j.CLOSED}function _(){return s.clientHeight}function F(d){if(!k())return;const p=M(s).y,g=s.clientHeight-p,m=window.innerHeight-d,O=It(g,m),D=z(g,m);o.translateContainer({startY:p,endY:p+(O.isUp?-D:D),animationFrame:a,bottomSheetContainer:s})}function I(d,{viewportHeight:p,visibleHeight:g}){let m=null;for(const O of d){const D=O*p,R=z(g,D);(m===null||R<m)&&(m=R)}return{minOffset:m}}function H(){const d=[...c.snapPoints].reverse(),p=M(s).y,g=s.clientHeight,m=g-p;if(!c.expandable&&m>=g)return;const O=window.innerHeight,D=ht("above",{visibleHeight:m,viewportHeight:O},d),{minOffset:R}=I(D,{visibleHeight:m,viewportHeight:O});if(R===null&&m<O-c.marginTop){o.translateContainer({startY:p,endY:pt(O,g,c.marginTop,"top"),animationFrame:a,bottomSheetContainer:s});return}A(R)&&o.translateContainer({startY:p,endY:p-R,animationFrame:a,bottomSheetContainer:s})}function L(){const d=M(s).y,p=s.clientHeight-d;if(p<1)return;const g=window.innerHeight,m=ht("below",{visibleHeight:p,viewportHeight:g},c.snapPoints),{minOffset:O}=I(m,{visibleHeight:p,viewportHeight:g});A(O)&&o.translateContainer({startY:d,endY:d+O,animationFrame:a,bottomSheetContainer:s})}function b(d){const p=window.innerHeight;if(!Jt(d))return;const g=Z(p*d,2);F(g)}return{props:c,elements:u,mount:C,unmount:v,open:S,close:E,getIsMounted:B,getIsOpen:k,getIsClosed:Y,getPosition:$,getHeight:_,moveTo:F,snapTo:b}}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:()=>j.CLOSED,moveTo:()=>{},snapTo:()=>{},props:{content:""}}}const le=lt(),ue=w.forwardRef(function(e,n){const{children:o,isOpen:r,setIsOpen:i,afterClose:a,mountingPointRef:l,...u}=e,h=w.useRef(le),[c,f]=w.useState(h.current);w.useImperativeHandle(n,()=>c,[c]);const y=w.useCallback(()=>{i(!1),a==null||a()},[a]);w.useEffect(()=>{r?c.open():c.close()},[r]);const s=w.useRef(null);return w.useEffect(function(){var E;if(l&&!l.current)return;const v=Bt((E=e.mountingPointRef)==null?void 0:E.current)?e.mountingPointRef.current:window.document.body;if(!v||c.getIsMounted())return;const S=ce({content:"",...u,afterClose:y});return S.mount(v),s.current=S.elements.bottomSheetContentWrapper??null,h.current=S,f(S),()=>{c.unmount()}},[e.mountingPointRef,u,y]),w.useEffect(function(){Object.assign(h.current.props,{...u}),f(h.current)},[u]),w.useEffect(function(){return()=>{h.current.unmount()}},[]),s.current?xt.createPortal(e.children,s.current):null}),de=lt();function pe(t={}){const e=w.useRef(de),[n,o]=w.useState(!1),r=!n,[i,a]=w.useState(e.current);w.useEffect(()=>{a(e.current)},[e.current]);const{beforeOpen:l,afterOpen:u,beforeClose:h,afterClose:c,onDragStart:f,onDragMove:y,onDragEnd:s,...C}=t,v=()=>{l==null||l()},S=()=>{u==null||u(),o(!0)},E=()=>{h==null||h()},B=()=>{c==null||c(),o(!1)},k=()=>{f==null||f()},Y=(b,d)=>{y==null||y(b,d)},$=()=>{s==null||s()},_=w.useMemo(()=>({ref:e,isOpen:n,setIsOpen:o,beforeOpen:v,afterOpen:S,beforeClose:E,afterClose:B,onDragStart:k,onDragMove:Y,onDragEnd:$,...C}),[e.current,n,o,t]),F=w.useCallback(()=>{o(!0)},[o]),I=w.useCallback(()=>{o(!1)},[o]),H=w.useCallback((...b)=>{i.moveTo(...b)},[i]),L=w.useCallback((...b)=>{i.snapTo(...b)},[i]);return{props:_,instance:i,isOpen:n,isClosed:r,setIsOpen:o,open:F,close:I,moveTo:H,snapTo:L}}exports.BottomSheet=ue;exports.createPlaceholderBottomSheet=lt;exports.useBottomSheet=pe;
|