@plainsheet/react 0.4.9 → 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.
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(M,g){typeof exports=="object"&&typeof module<"u"?g(exports,require("react"),require("react-dom")):typeof define=="function"&&define.amd?define(["exports","react","react-dom"],g):(M=typeof globalThis<"u"?globalThis:M||self,g(M.BottomSheet={},M.React,M.ReactDOM))})(this,function(M,g,xe){"use strict";function Ae(e){return e!=null}(function(){try{if(typeof document<"u"){var e=document.createElement("style");e.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(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();var De=Object.defineProperty,Me=(e,t,n)=>t in e?De(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,J=(e,t,n)=>Me(e,typeof t!="symbol"?t+"":t,n);function B(e){return typeof e=="string"}function Pe(e,t){return e.classList.contains(Q(t))}function _(e,t){e.classList.add(Q(t))}function oe(e,t){e.classList.remove(Q(t))}function X(e,t,n){B(n)&&(B(t)&&oe(e,t),_(e,n))}function Q(e){return B(e)?e.trim().replace(/\./g,""):""}function F(e){return e.map(t=>Q(t)).filter(Boolean).join(" ")}function Ye(e){return e.map(t=>t==null?void 0:t.trim()).filter(Boolean).map(t=>`.${t}`).join(" ")}const de="open",pe="hidden";function re(e,t){const n=t;if(Array.isArray(e)){e.forEach(o=>{Z(o,n),o.setAttribute("aria-modal",n?"true":"false")});return}Z(e,n),e.setAttribute("aria-modal",n?"true":"false")}function Z(e,t){t?(_(e,de),oe(e,pe)):(_(e,pe),oe(e,de))}function he(e){return e instanceof HTMLElement}function A(e){return typeof e=="number"&&!Number.isNaN(e)}function Fe(e){he(e)&&e.focus()}function Re(e){if(!he(e)||e.offsetParent===null||"disabled"in e&&e.disabled)return!1;const t=e.getAttribute("tabindex"),n=A(t)?parseInt(t,10):-1,o=["INPUT","BUTTON","SELECT","TEXTAREA","A","AREA","IFRAME"].includes(e.tagName),r=e instanceof HTMLAnchorElement&&e.href!==""||e instanceof HTMLAreaElement&&e.href!=="";return o||r||n>-1}var T=(e=>(e.Backdrop="pbs-backdrop",e.Root="pbs-root",e.Container="pbs-container",e.GapFiller="pbs-gap-filler",e.Handle="pbs-handle",e.HandleBar="pbs-handle-bar",e.ContentWrapper="pbs-content-wrapper",e))(T||{}),ae=(e=>(e.Button="pbs-button-reset",e.Dialog="pbs-dialog-reset",e))(ae||{}),ee=(e=>(e.Hidden="hidden",e))(ee||{});function Y(e,t,n){const o=document.createElement(e);return t.split(" ").forEach(r=>{_(o,r)}),B(n)&&o.setAttribute("data-testid",n),o}Ye([T.Root,T.ContentWrapper]);function fe(e,t,n,o){switch(o){case"content-height":return t>=e?Se(e,t,n):0;case"middle":return-(e/2-t);case"top":return-(e-t)+n;default:return 0}}function me(e,t){const n=t<e,o=t>e;return{isUp:n,isDown:o,stayedSame:t===e}}function be(e,t){return t<e?-(e-t):t-e}function q(e,t){return e>t?e-t:t-e}function Ie(e,t){const n=e<t,o=e>t;return{isUp:n,isDown:o,stayedSame:e===t}}function ge(e,t,n){const o=e==="above";return n.filter(r=>{const i=r*t.viewportHeight;return o?t.visibleHeight<i:t.visibleHeight>i})}function Se(e,t,n){return-(e-t)+n}function ve(e){return Number(e.replace("px",""))}function te(e,...t){return Number(e.toFixed(...t))}function ye(e){const t=/(?<type>\w+)\((?<values>[^)]+)\)/g,n=[];let o;for(;(o=t.exec(e))!==null;){const r=o[1],i=o[2].split(",").map(a=>a.trim());n.push({type:r,values:i})}return n}function We(e){const t=e.style.transform,n=ye(t);return{transform:t,transformValues:n}}function Ce(e,t){return e.find(o=>o.type.startsWith(t))||null}const ie="translate";function P(e){const t=e.style.transform,n=ye(t),o=Ce(n,ie);return Ee(o??{type:ie,values:[]})}function ne(e,{x:t,y:n}){const{transform:o,transformValues:r}=We(e),i=Ce(r,ie);if(i){const a=Ee(i);e.style.transform=`translate(${t??a.x??0}px,${n??a.y??0}px)`;return}if(o){e.style.transform=`${o}, translate(${t??0}px,${n??0}px)`;return}e.style.transform=`translate(${t??0}px,${n??0}px)`}function Ee(e){if(e.type!=="translate")throw new Error(`Could not get coordinates from ${e.type}, since is not translate.`);const t=e.values[0],n=e.values[1];return{x:ve(t)??0,y:ve(n)??0}}function se(e){return e!=null}function we(e,{min:t,max:n}){return se(n)&&e>=n?n:se(t)&&e<=t?t:e}const Ne=(e,t,n)=>{t instanceof HTMLElement&&!Pe(t,T.Handle)&&n.scrollTop>=1||(e.isDragging=!0)},je=(e,t,n,o)=>r=>{o.startY=e.getCoordinates(r).y,o.containerStartTranslate=P(t),n.onDragStart()},Ge=(e,t,n,o,r)=>i=>{Ue(i,e,n,o,r,t,n.marginTop)};function Ue(e,t,n,o,r,i,a){if(!o.isDragging||!A(o.startY))return;const c=t.getCoordinates(e).y,u=be(o.startY,c),h=window.innerHeight,s=i.clientHeight,f=s-(o.containerStartTranslate.y+u);if(f>=h)return;const E=me(o.startY,c);if(E.isUp&&!n.expandable&&f>=s||n.preventClosing&&f<=s)return;r.start(()=>{ne(i,{y:o.containerStartTranslate.y+u})},0);const l=h-a,w=s-o.containerStartTranslate.y;if(E.isUp){const m=l-w,v=l-f,k=we(1-te(v/m,2),{min:0,max:1});n.onDragMove(E,k)}else if(E.isDown){const m=we(te(1-f/w,2),{min:0,max:1});n.onDragMove(E,m)}}const $e=(e,t,n,o,r,i,a)=>c=>{if(!o.isDragging||(o.isDragging=!1,!A(o.startY)))return;n.onDragEnd();const u=o.startY,h=e.getCoordinates(c).y,s=P(t).y,f=me(u,h),E=window.innerHeight,l=t.clientHeight;if(f.isUp){const w=[...n.snapPoints].sort((k,x)=>k-x),m=l+-s;if(!n.expandable&&m>=l)return;for(const k of w){const x=k*window.innerHeight;if(m<=x){const H=q(m,x);a.translateContainer({startY:s,endY:s-H,animationFrame:r,bottomSheetContainer:t});return}}const v=Se(E,l,n.marginTop);a.translateContainer({startY:s,endY:v,animationFrame:r,bottomSheetContainer:t})}else if(f.isDown){const w=[...n.snapPoints].sort((m,v)=>v-m);for(const m of w){const v=m*window.innerHeight,k=l+-s;if(k>=v){const x=q(k,v);a.translateContainer({startY:s,endY:s+x,animationFrame:r,bottomSheetContainer:t});return}}if(n.preventClosing){const m=l+-s;if(m>=l){const v=q(m,l);a.translateContainer({startY:s,endY:s+v,animationFrame:r,bottomSheetContainer:t})}return}i()}};var R=(e=>(e[e.All=-1]="All",e[e.None=0]="None",e[e.Capture=1]="Capture",e[e.Target=2]="Target",e[e.Bubble=3]="Bubble",e))(R||{});function ke(e){switch(e){case 0:return 0;case 1:return 1;case 2:return 2;case 3:return 3;default:return-1}}const _e={eventPhase:R.All};class z{constructor(t){J(this,"currentTarget"),this.currentTarget=t}addEventListeners({onStart:t,onStartOptions:n=_e,onMove:o,onEnd:r}){this.addTouchEventListeners({onStart:t,onStartOptions:n,onMove:o,onEnd:r}),this.addMouseEventListeners({onStart:t,onStartOptions:n,onMove:o,onEnd:r})}addTouchEventListeners({onStart:t,onStartOptions:n,onMove:o,onEnd:r}){t&&this.currentTarget.addEventListener("touchstart",i=>{if(n.eventPhase===R.All){t(i);return}ke(i.eventPhase)===n.eventPhase&&t(i)},{passive:!0}),o&&this.currentTarget.addEventListener("touchmove",o),r&&this.currentTarget.addEventListener("touchend",r)}addMouseEventListeners({onStart:t,onStartOptions:n,onMove:o,onEnd:r}){t&&this.currentTarget.addEventListener("mousedown",i=>{if(n.eventPhase===R.All){t(i);return}ke(i.eventPhase)===n.eventPhase&&t(i)},{passive:!0}),o&&this.currentTarget.addEventListener("mousemove",o),r&&this.currentTarget.addEventListener("mouseup",i=>{r(i)})}removeEventListeners({onStart:t,onMove:n,onEnd:o}){t&&this.currentTarget.removeEventListener("touchstart",t),o&&this.currentTarget.removeEventListener("touchend",o),n&&this.currentTarget.removeEventListener("touchmove",n),t&&this.currentTarget.removeEventListener("mousedown",t),n&&this.currentTarget.removeEventListener("mousemove",n),o&&this.currentTarget.removeEventListener("mouseup",o)}getCoordinates(t){if(t.type==="touchstart"||t.type==="mousedown"){if("touches"in t)return{x:t.touches[0].clientX,y:t.touches[0].clientY};if(t instanceof MouseEvent)return{x:t.clientX,y:t.clientY}}if(t.type==="touchend"||t.type==="mouseup"||t.type==="mousemove"||t.type==="touchmove"){if("touches"in t)return{x:t.changedTouches[0].clientX,y:t.changedTouches[0].clientY};if(t instanceof MouseEvent)return{x:t.clientX,y:t.clientY}}return{x:0,y:0}}}function Te(e){const t=e;return`${t} ${t} 0px 0px`}function Xe(e,t){const n=qe(e);ze(n),n.bottomSheetContainer.style.width=e.width;const o=document.createElement("div");o.innerHTML=e.content??"";const r=window.innerHeight;n.bottomSheetContainer.style.maxHeight=`${r}px`,n.bottomSheetContentWrapper.appendChild(o);const i=Ve({bottomSheetElements:n,bottomSheetProps:e,options:t});return e.rootStyle&&Object.assign(n.bottomSheetRoot.style,e.rootStyle),e.backdropStyle&&Object.assign(n.bottomSheetBackdrop.style,e.backdropStyle),e.containerGapFillerStyle&&Object.assign(n.bottomSheetContainer.style,e.containerStyle),e.containerStyle&&Object.assign(n.bottomSheetContainerGapFiller.style,e.containerGapFillerStyle),e.handleStyle&&Object.assign(n.bottomSheetHandleBar.style,e.handleStyle),e.contentWrapperStyle&&Object.assign(n.bottomSheetContentWrapper.style,e.contentWrapperStyle),{elements:n,eventHandlers:i}}function qe(e){const t=Y("dialog",F([T.Root,ae.Dialog,e.rootClass]),T.Root);t.ariaLabel=e.ariaLabel;const n=Y("section",F([T.Container,e.containerClass]),T.Container);e.containerBorderRadius&&(n.style.borderRadius=Te(e.containerBorderRadius));const o=Y("div",T.GapFiller,T.GapFiller);e.containerBackgroundColor&&(n.style.backgroundColor=e.containerBackgroundColor,o.style.backgroundColor=e.containerBackgroundColor);const r=Y("button",F([T.Handle,ae.Button,e.shouldShowHandle?null:ee.Hidden,e.handleClass]),T.Handle);r.setAttribute("type","button"),r.ariaLabel="bottom sheet close button";const i=Y("span",F([T.HandleBar,e.shouldShowHandle?null:ee.Hidden]),T.HandleBar),a=Y("article",F([T.ContentWrapper,e.contentWrapperClass]),T.ContentWrapper),c=Y("div",F([T.Backdrop,e.backdropClass,ee.Hidden]),T.Backdrop);return e.backdropColor&&(c.style.backgroundColor=e.backdropColor),e.backDropTransition&&(c.style.transition=e.backDropTransition),{bottomSheetRoot:t,bottomSheetBackdrop:c,bottomSheetContainer:n,bottomSheetHandle:r,bottomSheetHandleBar:i,bottomSheetContentWrapper:a,bottomSheetContainerGapFiller:o}}function ze({bottomSheetRoot:e,bottomSheetContainer:t,bottomSheetHandle:n,bottomSheetHandleBar:o,bottomSheetContentWrapper:r,bottomSheetContainerGapFiller:i}){e.appendChild(t),n.appendChild(o),t.appendChild(n),t.appendChild(r),t.appendChild(i)}function Ve({bottomSheetElements:e,bottomSheetProps:t,options:n}){const{bottomSheetRoot:o,bottomSheetContainer:r,bottomSheetHandle:i,bottomSheetContainerGapFiller:a,bottomSheetContentWrapper:c,bottomSheetBackdrop:u}=e,{animationFrame:h}=n,s=new z(i),f=new z(c),E=new z(a),l=t.dragTriggers.reduce((O,C)=>{const y=o.querySelectorAll(C);if(!y.length)return O;const p=Array.from(y).map(d=>d instanceof HTMLElement?new z(d):null).filter(d=>!!d);return[...O,...p]},[]),w=new z(window),m=je(w,r,t,n.draggingState),v=Ge(w,r,t,n.draggingState,h),k=$e(w,r,t,n.draggingState,h,n.onClose,n.bottomSheetState);function x(O){O.target instanceof Element&&!o.contains(O.target)&&n.onClose()}function H(O){Ne(n.draggingState,O.target,e.bottomSheetContentWrapper)}function j(O){const C=O??t;C.draggable&&(s.addEventListeners({onStart:H}),l.forEach(y=>{y.addEventListeners({onStart:H,onStartOptions:{eventPhase:R.Target}})})),C.draggable&&C.backgroundDraggable&&(f.addEventListeners({onStart:H,onStartOptions:{eventPhase:R.Target}}),E.addEventListeners({onStart:H})),C.draggable&&w.addEventListeners({onStart:m,onMove:v,onEnd:k}),C.draggable&&window.document.addEventListener("keyup",y=>{y.key==="Escape"&&n.onClose()}),i.addEventListener("keyup",y=>{if(y.key==="ArrowUp"){n.moveUp();return}if(y.key==="ArrowDown"){n.moveDown();return}if(y.shiftKey&&y.key==="Tab"){const p=G(e.bottomSheetContentWrapper);Fe(p)}})}function V(){t.shouldCloseOnOutsideClick?u.addEventListener("click",x):u.style.pointerEvents="none"}function K(){u.removeEventListener("click",x)}function G(O){let C=[...Array.from(O.childNodes).reverse()];for(;C.length;){const y=C.shift();if(Re(y))return y;y&&(C=[...C,...Array.from(y.childNodes).reverse()])}return null}function U(){s.removeEventListeners({onStart:H}),f.removeEventListeners({onStart:H}),E.removeEventListeners({onStart:H}),l.forEach(O=>{O.removeEventListeners({onStart:H})}),w.removeEventListeners({onStart:m,onMove:v,onEnd:k})}return{attachEventListeners:j,clearEventListeners:U,attacheOnOpenEventListeners:V,clearOnOpenEventListeners:K}}class Ke{constructor(){J(this,"animationId"),J(this,"isInProgress"),J(this,"startedAt"),this.animationId=null,this.isInProgress=!1,this.startedAt=null}start(t,n,o=!1){this.isInProgress=!0;const r=i=>{this.startedAt||(this.startedAt=i);const a=i-this.startedAt,c=n===0?1:te(a/n,2),u=c>=1&&!o;t(c),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 Je(e){const{startY:t,endY:n,bottomSheetContainer:o,animationFrame:r,onEnd:i,animationTimingFunction:a,animationDuration:c}=e,u=be(t,n);r.stop();let h=!1;r.start(s=>{ne(o,{y:t+u*a(s)}),!h&&s>=1&&(i==null||i(),h=!0)},c)}const ce=(e,t)=>n=>{Je({...n,animationTimingFunction:e,animationDuration:t})},I={TOP:"top",MIDDLE:"middle",CONTENT_HEIGHT:"content-height",CLOSED:"closed"};function Qe(e){return!(!A(e)||e>1||e<0)}function Ze(e,t){const n={set(o,r,i,a){return t(r,i),Reflect.set(o,r,i,a)}};return new Proxy(e,n)}function et(...e){console.error(e)}const W={EASE:"ease",EASE_IN:"ease-in",EASE_OUT:"ease-out",EASE_IN_OUT:"ease-in-out",SPRING:"spring"};function tt(e){for(const t of Object.values(W))if(t===e)return!0;return!1}function He(e){return!!(e instanceof Object&&"p1x"in e&&"p1y"in e&&"p2x"in e&&"p2y"in e&&A(e.p1x)&&A(e.p1y)&&A(e.p2x)&&A(e.p2y))}function N(e,t,n,o){return function(c){return a(r(c))};function r(c){let u=0,h=1,s=c,f;if(c===0||c===1)return c;for(;u<h;){if(f=i(s),Math.abs(f-c)<.001)return s;c>f?u=s:h=s,s=(h+u)/2}return s}function i(c){return 3*e*c*Math.pow(1-c,2)+3*n*Math.pow(c,2)*(1-c)+Math.pow(c,3)}function a(c){return 3*t*c*Math.pow(1-c,2)+3*o*Math.pow(c,2)*(1-c)+Math.pow(c,3)}}const Oe=N(.25,.1,.25,1),nt=N(.42,0,1,1),Le=N(.42,0,.58,1),ot=N(.4,.1,.6,1),rt=N(.45,1.5,.55,1);function at(e){switch(e){case W.EASE:return Oe;case W.EASE_IN:return nt;case W.EASE_OUT:return Le;case W.EASE_IN_OUT:return ot;case W.SPRING:return rt;default:return Oe}}function Be(e){return typeof e=="boolean"}const it={ariaLabel:"Bottom sheet",content:"",defaultPosition:I.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 st(e){const t={...it},n=Object.entries(e).reduce((o,r)=>{const[i,a]=r;return se(a)&&(o[i]=a),o},{});return{...t,...n}}function le(e){if(He(e)){const{p1x:t,p1y:n,p2x:o,p2y:r}=e;return N(t,n,o,r)}return tt(e)?at(e):Le}function ct(e,t,n,o){function r(i,a){switch(i){case"content":B(a)&&(e.bottomSheetContentWrapper.innerHTML=a);break;case"width":B(a)&&(e.bottomSheetContainer.style.width=a);break;case"shouldShowHandle":Be(a)||Z(e.bottomSheetHandle,!1);break;case"shouldShowBackdrop":Be(a)||Z(e.bottomSheetBackdrop,!1);break;case"containerBorderRadius":B(a)&&(e.bottomSheetContainer.style.borderRadius=Te(a));break;case"containerBackgroundColor":B(a)&&(e.bottomSheetContainer.style.backgroundColor=a,e.bottomSheetContainerGapFiller.style.backgroundColor=a);break;case"backdropColor":B(a)&&(e.bottomSheetBackdrop.style.backgroundColor=a);break;case"backDropTransition":B(a)&&(e.bottomSheetBackdrop.style.transition=a);break;case"rootClass":if(!B(a))return;X(e.bottomSheetRoot,n.rootClass,a);break;case"containerClass":if(!B(a))return;X(e.bottomSheetContainer,n.containerClass,a);break;case"handleClass":if(!B(a))return;X(e.bottomSheetHandle,n.handleClass,a);break;case"contentWrapperClass":if(!B(a))return;X(e.bottomSheetContentWrapper,n.contentWrapperClass,a);break;case"backdropClass":if(!B(a))return;X(e.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(He(a)){const c=le(a),u=ce(c,n.draggingAnimationDuration);t.translateContainer=u}break;case"draggingAnimationDuration":if(A(a)){const c=le(n.draggingAnimationTimings),u=ce(c,a);t.translateContainer=u}break;case"rootStyle":n.rootStyle&&Object.assign(e.bottomSheetRoot.style,n.rootStyle);break;case"backdropStyle":n.backdropStyle&&Object.assign(e.bottomSheetBackdrop.style,n.backdropStyle);break;case"containerStyle":n.containerStyle&&Object.assign(e.bottomSheetContainer.style,n.containerStyle);break;case"containerGapFillerStyle":n.containerGapFillerStyle&&Object.assign(e.bottomSheetContainerGapFiller.style,n.containerGapFillerStyle);break;case"handleStyle":n.handleStyle&&Object.assign(e.bottomSheetHandleBar.style,n.handleStyle);break;case"contentWrapperStyle":n.contentWrapperStyle&&Object.assign(e.bottomSheetContentWrapper.style,n.contentWrapperStyle);break}}return r}function lt(e){const t=st(e),n=le(e.draggingAnimationTimings),o={isMounted:!1,translateContainer:ce(n,t.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 Ke,c={animationFrame:a,onClose:k,bottomSheetState:o,draggingState:r,snapTo:y,moveUp:O,moveDown:C},{elements:u,eventHandlers:h}=Xe(t,c),s=Ze(t,ct(u,o,t,h)),{bottomSheetBackdrop:f,bottomSheetRoot:E,bottomSheetContainer:l}=u,w=p=>{const d=p??window.document.body;d.appendChild(E),d.appendChild(f);const b=window.innerHeight;ne(l,{y:b}),h.attachEventListeners(),o.isMounted=!0},m=()=>{h.clearEventListeners(),Object.values(u).forEach(p=>{p.remove()}),i(),o.isMounted=!1},v=()=>{var p;if(x()||et('Bottom Sheet is not mounted yet. call the "mount" method first.'),(p=e.beforeOpen)==null||p.call(e),H())return;re(f,!0),s.shouldShowBackdrop||_(f,"transparent"),re([l],!0),ne(l,{y:l.clientHeight});const d=window.innerHeight,b=fe(d,l.clientHeight,s.marginTop,s.defaultPosition),S=P(l).y;o.translateContainer({startY:S,endY:b,animationFrame:a,bottomSheetContainer:l,onEnd:e.afterOpen});const L=document.body.style.overflowY;r.originalDocumentOverflowY=L||"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 k(){var p;if(j())return;(p=e.beforeClose)==null||p.call(e);const d=P(l).y,b=l.clientHeight;o.translateContainer({startY:d,endY:b,animationFrame:a,bottomSheetContainer:l,onEnd:()=>{var S;(S=e.afterClose)==null||S.call(e),re([f,l],!1),h.clearOnOpenEventListeners()}}),i()}function x(){return o.isMounted}function H(){const p=P(l).y,d=window.innerHeight,b=l.clientHeight>=d?d:l.clientHeight;return p<=b}function j(){return!H()}function V(){const p=P(l).y,d=l.clientHeight,b=window.innerHeight;if(p<=5&&p>=-5)return I.CONTENT_HEIGHT;const S=d-p;if(S===b/2)return I.MIDDLE;const L=b-s.marginTop,D=10;return S<=L+D&&S>=L-D?I.TOP:I.CLOSED}function K(){return l.clientHeight}function G(p){if(!H())return;const d=P(l).y,b=l.clientHeight-d,S=window.innerHeight-p,L=Ie(b,S),D=q(b,S);o.translateContainer({startY:d,endY:d+(L.isUp?-D:D),animationFrame:a,bottomSheetContainer:l})}function U(p,{viewportHeight:d,visibleHeight:b}){let S=null;for(const L of p){const D=L*d,$=q(b,D);(S===null||$<S)&&(S=$)}return{minOffset:S}}function O(){const p=[...s.snapPoints].reverse(),d=P(l).y,b=l.clientHeight,S=b-d;if(!s.expandable&&S>=b)return;const L=window.innerHeight,D=ge("above",{visibleHeight:S,viewportHeight:L},p),{minOffset:$}=U(D,{visibleHeight:S,viewportHeight:L});if($===null&&S<L-s.marginTop){o.translateContainer({startY:d,endY:fe(L,b,s.marginTop,"top"),animationFrame:a,bottomSheetContainer:l});return}A($)&&o.translateContainer({startY:d,endY:d-$,animationFrame:a,bottomSheetContainer:l})}function C(){const p=P(l).y,d=l.clientHeight-p;if(d<1)return;const b=window.innerHeight,S=ge("below",{visibleHeight:d,viewportHeight:b},s.snapPoints),{minOffset:L}=U(S,{visibleHeight:d,viewportHeight:b});A(L)&&o.translateContainer({startY:p,endY:p+L,animationFrame:a,bottomSheetContainer:l})}function y(p){const d=window.innerHeight;if(!Qe(p))return;const b=te(d*p,2);G(b)}return{props:s,elements:u,mount:w,unmount:m,open:v,close:k,getIsMounted:x,getIsOpen:H,getIsClosed:j,getPosition:V,getHeight:K,moveTo:G,snapTo:y}}function ue(){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:()=>I.CLOSED,moveTo:()=>{},snapTo:()=>{},props:{content:""}}}const ut=ue(),dt=g.forwardRef(function(t,n){const{children:o,isOpen:r,setIsOpen:i,afterClose:a,mountingPointRef:c,...u}=t,h=g.useRef(ut),[s,f]=g.useState(h.current);g.useImperativeHandle(n,()=>s,[s]);const E=g.useCallback(()=>{i(!1),a==null||a()},[a]);g.useEffect(()=>{r?s.open():s.close()},[r]);const l=g.useRef(null);return g.useEffect(function(){var k;if(c&&!c.current)return;const m=Ae((k=t.mountingPointRef)==null?void 0:k.current)?t.mountingPointRef.current:window.document.body;if(!m||s.getIsMounted())return;const v=lt({content:"",...u,afterClose:E});return v.mount(m),l.current=v.elements.bottomSheetContentWrapper??null,h.current=v,f(v),()=>{s.unmount()}},[t.mountingPointRef,u,E]),g.useEffect(function(){Object.assign(h.current.props,{...u}),f(h.current)},[u]),g.useEffect(function(){return()=>{h.current.unmount()}},[]),l.current?xe.createPortal(t.children,l.current):null}),pt=ue();function ht(e={}){const t=g.useRef(pt),[n,o]=g.useState(!1),[r,i]=g.useState(t.current);g.useEffect(()=>{i(t.current)},[t.current]);const{beforeOpen:a,afterOpen:c,beforeClose:u,afterClose:h,onDragStart:s,onDragMove:f,onDragEnd:E,...l}=e,w=()=>{a==null||a()},m=()=>{c==null||c(),o(!0)},v=()=>{u==null||u()},k=()=>{h==null||h(),o(!1)},x=()=>{s==null||s()},H=(C,y)=>{f==null||f(C,y)},j=()=>{E==null||E()},V=g.useMemo(()=>({ref:t,isOpen:n,setIsOpen:o,beforeOpen:w,afterOpen:m,beforeClose:v,afterClose:k,onDragStart:x,onDragMove:H,onDragEnd:j,...l}),[t.current,n,o,e]),K=g.useCallback(()=>{o(!0)},[o]),G=g.useCallback(()=>{o(!0)},[o]),U=g.useCallback((...C)=>{r.moveTo(...C)},[r]),O=g.useCallback((...C)=>{r.snapTo(...C)},[r]);return{props:V,instance:r,isOpen:n,setIsOpen:o,open:K,close:G,moveTo:U,snapTo:O}}M.BottomSheet=dt,M.createPlaceholderBottomSheet=ue,M.useBottomSheet=ht,Object.defineProperty(M,Symbol.toStringTag,{value:"Module"})});
|
|
1
|
+
(function(M,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):(M=typeof globalThis<"u"?globalThis:M||self,S(M.BottomSheet={},M.React,M.ReactDOM))})(this,function(M,S,xe){"use strict";function Ae(e){return e!=null}(function(){try{if(typeof document<"u"){var e=document.createElement("style");e.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(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();var De=Object.defineProperty,Me=(e,t,n)=>t in e?De(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,J=(e,t,n)=>Me(e,typeof t!="symbol"?t+"":t,n);function L(e){return typeof e=="string"}function Pe(e,t){return e.classList.contains(Q(t))}function _(e,t){e.classList.add(Q(t))}function oe(e,t){e.classList.remove(Q(t))}function X(e,t,n){L(n)&&(L(t)&&oe(e,t),_(e,n))}function Q(e){return L(e)?e.trim().replace(/\./g,""):""}function R(e){return e.map(t=>Q(t)).filter(Boolean).join(" ")}function Ye(e){return e.map(t=>t==null?void 0:t.trim()).filter(Boolean).map(t=>`.${t}`).join(" ")}const de="open",pe="hidden";function re(e,t){const n=t;if(Array.isArray(e)){e.forEach(o=>{Z(o,n),o.setAttribute("aria-modal",n?"true":"false")});return}Z(e,n),e.setAttribute("aria-modal",n?"true":"false")}function Z(e,t){t?(_(e,de),oe(e,pe)):(_(e,pe),oe(e,de))}function he(e){return e instanceof HTMLElement}function A(e){return typeof e=="number"&&!Number.isNaN(e)}function Re(e){he(e)&&e.focus()}function Fe(e){if(!he(e)||e.offsetParent===null||"disabled"in e&&e.disabled)return!1;const t=e.getAttribute("tabindex"),n=A(t)?parseInt(t,10):-1,o=["INPUT","BUTTON","SELECT","TEXTAREA","A","AREA","IFRAME"].includes(e.tagName),r=e instanceof HTMLAnchorElement&&e.href!==""||e instanceof HTMLAreaElement&&e.href!=="";return o||r||n>-1}var k=(e=>(e.Backdrop="pbs-backdrop",e.Root="pbs-root",e.Container="pbs-container",e.GapFiller="pbs-gap-filler",e.Handle="pbs-handle",e.HandleBar="pbs-handle-bar",e.ContentWrapper="pbs-content-wrapper",e))(k||{}),ae=(e=>(e.Button="pbs-button-reset",e.Dialog="pbs-dialog-reset",e))(ae||{}),ee=(e=>(e.Hidden="hidden",e))(ee||{});function Y(e,t,n){const o=document.createElement(e);return t.split(" ").forEach(r=>{_(o,r)}),L(n)&&o.setAttribute("data-testid",n),o}Ye([k.Root,k.ContentWrapper]);function me(e,t,n,o){switch(o){case"content-height":return t>=e?ve(e,t,n):0;case"middle":return-(e/2-t);case"top":return-(e-t)+n;default:return 0}}function fe(e,t){const n=t<e,o=t>e;return{isUp:n,isDown:o,stayedSame:t===e}}function be(e,t){return t<e?-(e-t):t-e}function q(e,t){return e>t?e-t:t-e}function Ie(e,t){const n=e<t,o=e>t;return{isUp:n,isDown:o,stayedSame:e===t}}function ge(e,t,n){const o=e==="above";return n.filter(r=>{const i=r*t.viewportHeight;return o?t.visibleHeight<i:t.visibleHeight>i})}function ve(e,t,n){return-(e-t)+n}function Se(e){return Number(e.replace("px",""))}function te(e,...t){return Number(e.toFixed(...t))}function ye(e){const t=/(?<type>\w+)\((?<values>[^)]+)\)/g,n=[];let o;for(;(o=t.exec(e))!==null;){const r=o[1],i=o[2].split(",").map(a=>a.trim());n.push({type:r,values:i})}return n}function We(e){const t=e.style.transform,n=ye(t);return{transform:t,transformValues:n}}function Ce(e,t){return e.find(o=>o.type.startsWith(t))||null}const ie="translate";function P(e){const t=e.style.transform,n=ye(t),o=Ce(n,ie);return Ee(o??{type:ie,values:[]})}function ne(e,{x:t,y:n}){const{transform:o,transformValues:r}=We(e),i=Ce(r,ie);if(i){const a=Ee(i);e.style.transform=`translate(${t??a.x??0}px,${n??a.y??0}px)`;return}if(o){e.style.transform=`${o}, translate(${t??0}px,${n??0}px)`;return}e.style.transform=`translate(${t??0}px,${n??0}px)`}function Ee(e){if(e.type!=="translate")throw new Error(`Could not get coordinates from ${e.type}, since is not translate.`);const t=e.values[0],n=e.values[1];return{x:Se(t)??0,y:Se(n)??0}}function se(e){return e!=null}function we(e,{min:t,max:n}){return se(n)&&e>=n?n:se(t)&&e<=t?t:e}const Ne=(e,t,n)=>{t instanceof HTMLElement&&!Pe(t,k.Handle)&&n.scrollTop>=1||(e.isDragging=!0)},je=(e,t,n,o)=>r=>{o.startY=e.getCoordinates(r).y,o.containerStartTranslate=P(t),n.onDragStart()},Ge=(e,t,n,o,r)=>i=>{Ue(i,e,n,o,r,t,n.marginTop)};function Ue(e,t,n,o,r,i,a){if(!o.isDragging||!A(o.startY))return;const l=t.getCoordinates(e).y,u=be(o.startY,l),h=window.innerHeight,c=i.clientHeight,f=c-(o.containerStartTranslate.y+u);if(f>=h)return;const C=fe(o.startY,l);if(C.isUp&&!n.expandable&&f>=c||n.preventClosing&&f<=c)return;r.start(()=>{ne(i,{y:o.containerStartTranslate.y+u})},0);const s=h-a,E=c-o.containerStartTranslate.y;if(C.isUp){const v=s-E,y=s-f,w=we(1-te(y/v,2),{min:0,max:1});n.onDragMove(C,w)}else if(C.isDown){const v=we(te(1-f/E,2),{min:0,max:1});n.onDragMove(C,v)}}const $e=(e,t,n,o,r,i,a)=>l=>{if(!o.isDragging||(o.isDragging=!1,!A(o.startY)))return;n.onDragEnd();const u=o.startY,h=e.getCoordinates(l).y,c=P(t).y,f=fe(u,h),C=window.innerHeight,s=t.clientHeight;if(f.isUp){const E=[...n.snapPoints].sort((w,x)=>w-x),v=s+-c;if(!n.expandable&&v>=s)return;for(const w of E){const x=w*window.innerHeight;if(v<=x){const T=q(v,x);a.translateContainer({startY:c,endY:c-T,animationFrame:r,bottomSheetContainer:t});return}}const y=ve(C,s,n.marginTop);a.translateContainer({startY:c,endY:y,animationFrame:r,bottomSheetContainer:t})}else if(f.isDown){const E=[...n.snapPoints].sort((v,y)=>y-v);for(const v of E){const y=v*window.innerHeight,w=s+-c;if(w>=y){const x=q(w,y);a.translateContainer({startY:c,endY:c+x,animationFrame:r,bottomSheetContainer:t});return}}if(n.preventClosing){const v=s+-c;if(v>=s){const y=q(v,s);a.translateContainer({startY:c,endY:c+y,animationFrame:r,bottomSheetContainer:t})}return}i()}};var F=(e=>(e[e.All=-1]="All",e[e.None=0]="None",e[e.Capture=1]="Capture",e[e.Target=2]="Target",e[e.Bubble=3]="Bubble",e))(F||{});function ke(e){switch(e){case 0:return 0;case 1:return 1;case 2:return 2;case 3:return 3;default:return-1}}const _e={eventPhase:F.All};class z{constructor(t){J(this,"currentTarget"),this.currentTarget=t}addEventListeners({onStart:t,onStartOptions:n=_e,onMove:o,onEnd:r}){this.addTouchEventListeners({onStart:t,onStartOptions:n,onMove:o,onEnd:r}),this.addMouseEventListeners({onStart:t,onStartOptions:n,onMove:o,onEnd:r})}addTouchEventListeners({onStart:t,onStartOptions:n,onMove:o,onEnd:r}){t&&this.currentTarget.addEventListener("touchstart",i=>{if(n.eventPhase===F.All){t(i);return}ke(i.eventPhase)===n.eventPhase&&t(i)},{passive:!0}),o&&this.currentTarget.addEventListener("touchmove",o),r&&this.currentTarget.addEventListener("touchend",r)}addMouseEventListeners({onStart:t,onStartOptions:n,onMove:o,onEnd:r}){t&&this.currentTarget.addEventListener("mousedown",i=>{if(n.eventPhase===F.All){t(i);return}ke(i.eventPhase)===n.eventPhase&&t(i)},{passive:!0}),o&&this.currentTarget.addEventListener("mousemove",o),r&&this.currentTarget.addEventListener("mouseup",i=>{r(i)})}removeEventListeners({onStart:t,onMove:n,onEnd:o}){t&&this.currentTarget.removeEventListener("touchstart",t),o&&this.currentTarget.removeEventListener("touchend",o),n&&this.currentTarget.removeEventListener("touchmove",n),t&&this.currentTarget.removeEventListener("mousedown",t),n&&this.currentTarget.removeEventListener("mousemove",n),o&&this.currentTarget.removeEventListener("mouseup",o)}getCoordinates(t){if(t.type==="touchstart"||t.type==="mousedown"){if("touches"in t)return{x:t.touches[0].clientX,y:t.touches[0].clientY};if(t instanceof MouseEvent)return{x:t.clientX,y:t.clientY}}if(t.type==="touchend"||t.type==="mouseup"||t.type==="mousemove"||t.type==="touchmove"){if("touches"in t)return{x:t.changedTouches[0].clientX,y:t.changedTouches[0].clientY};if(t instanceof MouseEvent)return{x:t.clientX,y:t.clientY}}return{x:0,y:0}}}function Te(e){const t=e;return`${t} ${t} 0px 0px`}function Xe(e,t){const n=qe(e);ze(n),n.bottomSheetContainer.style.width=e.width;const o=document.createElement("div");o.innerHTML=e.content??"";const r=window.innerHeight;n.bottomSheetContainer.style.maxHeight=`${r}px`,n.bottomSheetContentWrapper.appendChild(o);const i=Ve({bottomSheetElements:n,bottomSheetProps:e,options:t});return e.rootStyle&&Object.assign(n.bottomSheetRoot.style,e.rootStyle),e.backdropStyle&&Object.assign(n.bottomSheetBackdrop.style,e.backdropStyle),e.containerGapFillerStyle&&Object.assign(n.bottomSheetContainer.style,e.containerStyle),e.containerStyle&&Object.assign(n.bottomSheetContainerGapFiller.style,e.containerGapFillerStyle),e.handleStyle&&Object.assign(n.bottomSheetHandleBar.style,e.handleStyle),e.contentWrapperStyle&&Object.assign(n.bottomSheetContentWrapper.style,e.contentWrapperStyle),{elements:n,eventHandlers:i}}function qe(e){const t=Y("dialog",R([k.Root,ae.Dialog,e.rootClass]),k.Root);t.ariaLabel=e.ariaLabel;const n=Y("section",R([k.Container,e.containerClass]),k.Container);e.containerBorderRadius&&(n.style.borderRadius=Te(e.containerBorderRadius));const o=Y("div",k.GapFiller,k.GapFiller);e.containerBackgroundColor&&(n.style.backgroundColor=e.containerBackgroundColor,o.style.backgroundColor=e.containerBackgroundColor);const r=Y("button",R([k.Handle,ae.Button,e.shouldShowHandle?null:ee.Hidden,e.handleClass]),k.Handle);r.setAttribute("type","button"),r.ariaLabel="bottom sheet close button";const i=Y("span",R([k.HandleBar,e.shouldShowHandle?null:ee.Hidden]),k.HandleBar),a=Y("article",R([k.ContentWrapper,e.contentWrapperClass]),k.ContentWrapper),l=Y("div",R([k.Backdrop,e.backdropClass,ee.Hidden]),k.Backdrop);return e.backdropColor&&(l.style.backgroundColor=e.backdropColor),e.backDropTransition&&(l.style.transition=e.backDropTransition),{bottomSheetRoot:t,bottomSheetBackdrop:l,bottomSheetContainer:n,bottomSheetHandle:r,bottomSheetHandleBar:i,bottomSheetContentWrapper:a,bottomSheetContainerGapFiller:o}}function ze({bottomSheetRoot:e,bottomSheetContainer:t,bottomSheetHandle:n,bottomSheetHandleBar:o,bottomSheetContentWrapper:r,bottomSheetContainerGapFiller:i}){e.appendChild(t),n.appendChild(o),t.appendChild(n),t.appendChild(r),t.appendChild(i)}function Ve({bottomSheetElements:e,bottomSheetProps:t,options:n}){const{bottomSheetRoot:o,bottomSheetContainer:r,bottomSheetHandle:i,bottomSheetContainerGapFiller:a,bottomSheetContentWrapper:l,bottomSheetBackdrop:u}=e,{animationFrame:h}=n,c=new z(i),f=new z(l),C=new z(a);let s=[];const E=new z(window),v=je(E,r,t,n.draggingState),y=Ge(E,r,t,n.draggingState,h),w=$e(E,r,t,n.draggingState,h,n.onClose,n.bottomSheetState);function x(H){H.target instanceof Element&&!o.contains(H.target)&&n.onClose()}function T(H){Ne(n.draggingState,H.target,e.bottomSheetContentWrapper)}function j(H){const B=H??t;B.draggable&&B.backgroundDraggable&&(f.addEventListeners({onStart:T,onStartOptions:{eventPhase:F.Target}}),C.addEventListeners({onStart:T})),B.draggable&&E.addEventListeners({onStart:v,onMove:y,onEnd:w}),B.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=G(e.bottomSheetContentWrapper);Re(d)}})}function V(H){const B=H??t;t.shouldCloseOnOutsideClick&&!t.preventClosing?u.addEventListener("click",x):u.style.pointerEvents="none",B.draggable&&(c.addEventListeners({onStart:T}),s.forEach(b=>{b.removeEventListeners({onStart:T})}),s=t.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 z(m):null).filter(m=>!!m);return[...b,...g]},[]),s.forEach(b=>{b.addEventListeners({onStart:T,onStartOptions:{eventPhase:F.Target}})}))}function K(){u.removeEventListener("click",x)}function G(H){let B=[...Array.from(H.childNodes).reverse()];for(;B.length;){const b=B.shift();if(Fe(b))return b;b&&(B=[...B,...Array.from(b.childNodes).reverse()])}return null}function U(){c.removeEventListeners({onStart:T}),f.removeEventListeners({onStart:T}),C.removeEventListeners({onStart:T}),s.forEach(H=>{H.removeEventListeners({onStart:T})}),E.removeEventListeners({onStart:v,onMove:y,onEnd:w})}return{attachEventListeners:j,clearEventListeners:U,attacheOnOpenEventListeners:V,clearOnOpenEventListeners:K}}class Ke{constructor(){J(this,"animationId"),J(this,"isInProgress"),J(this,"startedAt"),this.animationId=null,this.isInProgress=!1,this.startedAt=null}start(t,n,o=!1){this.isInProgress=!0;const r=i=>{this.startedAt||(this.startedAt=i);const a=i-this.startedAt,l=n===0?1:te(a/n,2),u=l>=1&&!o;t(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 Je(e){const{startY:t,endY:n,bottomSheetContainer:o,animationFrame:r,onEnd:i,animationTimingFunction:a,animationDuration:l}=e,u=be(t,n);r.stop();let h=!1;r.start(c=>{ne(o,{y:t+u*a(c)}),!h&&c>=1&&(i==null||i(),h=!0)},l)}const ce=(e,t)=>n=>{Je({...n,animationTimingFunction:e,animationDuration:t})},I={TOP:"top",MIDDLE:"middle",CONTENT_HEIGHT:"content-height",CLOSED:"closed"};function Qe(e){return!(!A(e)||e>1||e<0)}function Ze(e,t){const n={set(o,r,i,a){return t(r,i),Reflect.set(o,r,i,a)}};return new Proxy(e,n)}function et(...e){console.error(e)}const W={EASE:"ease",EASE_IN:"ease-in",EASE_OUT:"ease-out",EASE_IN_OUT:"ease-in-out",SPRING:"spring"};function tt(e){for(const t of Object.values(W))if(t===e)return!0;return!1}function He(e){return!!(e instanceof Object&&"p1x"in e&&"p1y"in e&&"p2x"in e&&"p2y"in e&&A(e.p1x)&&A(e.p1y)&&A(e.p2x)&&A(e.p2y))}function N(e,t,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*e*l*Math.pow(1-l,2)+3*n*Math.pow(l,2)*(1-l)+Math.pow(l,3)}function a(l){return 3*t*l*Math.pow(1-l,2)+3*o*Math.pow(l,2)*(1-l)+Math.pow(l,3)}}const Oe=N(.25,.1,.25,1),nt=N(.42,0,1,1),Le=N(.42,0,.58,1),ot=N(.4,.1,.6,1),rt=N(.45,1.5,.55,1);function at(e){switch(e){case W.EASE:return Oe;case W.EASE_IN:return nt;case W.EASE_OUT:return Le;case W.EASE_IN_OUT:return ot;case W.SPRING:return rt;default:return Oe}}function Be(e){return typeof e=="boolean"}const it={ariaLabel:"Bottom sheet",content:"",defaultPosition:I.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 st(e){const t={...it},n=Object.entries(e).reduce((o,r)=>{const[i,a]=r;return se(a)&&(o[i]=a),o},{});return{...t,...n}}function le(e){if(He(e)){const{p1x:t,p1y:n,p2x:o,p2y:r}=e;return N(t,n,o,r)}return tt(e)?at(e):Le}function ct(e,t,n,o){function r(i,a){switch(i){case"content":L(a)&&(e.bottomSheetContentWrapper.innerHTML=a);break;case"width":L(a)&&(e.bottomSheetContainer.style.width=a);break;case"shouldShowHandle":Be(a)||Z(e.bottomSheetHandle,!1);break;case"shouldShowBackdrop":Be(a)||Z(e.bottomSheetBackdrop,!1);break;case"containerBorderRadius":L(a)&&(e.bottomSheetContainer.style.borderRadius=Te(a));break;case"containerBackgroundColor":L(a)&&(e.bottomSheetContainer.style.backgroundColor=a,e.bottomSheetContainerGapFiller.style.backgroundColor=a);break;case"backdropColor":L(a)&&(e.bottomSheetBackdrop.style.backgroundColor=a);break;case"backDropTransition":L(a)&&(e.bottomSheetBackdrop.style.transition=a);break;case"rootClass":if(!L(a))return;X(e.bottomSheetRoot,n.rootClass,a);break;case"containerClass":if(!L(a))return;X(e.bottomSheetContainer,n.containerClass,a);break;case"handleClass":if(!L(a))return;X(e.bottomSheetHandle,n.handleClass,a);break;case"contentWrapperClass":if(!L(a))return;X(e.bottomSheetContentWrapper,n.contentWrapperClass,a);break;case"backdropClass":if(!L(a))return;X(e.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(He(a)){const l=le(a),u=ce(l,n.draggingAnimationDuration);t.translateContainer=u}break;case"draggingAnimationDuration":if(A(a)){const l=le(n.draggingAnimationTimings),u=ce(l,a);t.translateContainer=u}break;case"rootStyle":n.rootStyle&&Object.assign(e.bottomSheetRoot.style,n.rootStyle);break;case"backdropStyle":n.backdropStyle&&Object.assign(e.bottomSheetBackdrop.style,n.backdropStyle);break;case"containerStyle":n.containerStyle&&Object.assign(e.bottomSheetContainer.style,n.containerStyle);break;case"containerGapFillerStyle":n.containerGapFillerStyle&&Object.assign(e.bottomSheetContainerGapFiller.style,n.containerGapFillerStyle);break;case"handleStyle":n.handleStyle&&Object.assign(e.bottomSheetHandleBar.style,n.handleStyle);break;case"contentWrapperStyle":n.contentWrapperStyle&&Object.assign(e.bottomSheetContentWrapper.style,n.contentWrapperStyle);break}}return r}function lt(e){const t=st(e),n=le(e.draggingAnimationTimings),o={isMounted:!1,translateContainer:ce(n,t.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 Ke,l={animationFrame:a,onClose:w,bottomSheetState:o,draggingState:r,snapTo:b,moveUp:H,moveDown:B},{elements:u,eventHandlers:h}=Xe(t,l),c=Ze(t,ct(u,o,t,h)),{bottomSheetBackdrop:f,bottomSheetRoot:C,bottomSheetContainer:s}=u,E=d=>{const p=d??window.document.body;p.appendChild(C),p.appendChild(f);const g=window.innerHeight;ne(s,{y:g}),h.attachEventListeners(),o.isMounted=!0},v=()=>{h.clearEventListeners(),Object.values(u).forEach(d=>{d.remove()}),i(),o.isMounted=!1},y=()=>{var d;if(x()||et('Bottom Sheet is not mounted yet. call the "mount" method first.'),(d=e.beforeOpen)==null||d.call(e),T())return;re(f,!0),c.shouldShowBackdrop||_(f,"transparent"),re([s],!0),ne(s,{y:s.clientHeight});const p=window.innerHeight,g=me(p,s.clientHeight,c.marginTop,c.defaultPosition),m=P(s).y;o.translateContainer({startY:m,endY:g,animationFrame:a,bottomSheetContainer:s,onEnd:e.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 w(){var d;if(j())return;(d=e.beforeClose)==null||d.call(e);const p=P(s).y,g=s.clientHeight;o.translateContainer({startY:p,endY:g,animationFrame:a,bottomSheetContainer:s,onEnd:()=>{var m;(m=e.afterClose)==null||m.call(e),re([f,s],!1),h.clearOnOpenEventListeners()}}),i()}function x(){return o.isMounted}function T(){const d=P(s).y,p=window.innerHeight,g=s.clientHeight>=p?p:s.clientHeight;return d<=g}function j(){return!T()}function V(){const d=P(s).y,p=s.clientHeight,g=window.innerHeight;if(d<=5&&d>=-5)return I.CONTENT_HEIGHT;const m=p-d;if(m===g/2)return I.MIDDLE;const O=g-c.marginTop,D=10;return m<=O+D&&m>=O-D?I.TOP:I.CLOSED}function K(){return s.clientHeight}function G(d){if(!T())return;const p=P(s).y,g=s.clientHeight-p,m=window.innerHeight-d,O=Ie(g,m),D=q(g,m);o.translateContainer({startY:p,endY:p+(O.isUp?-D:D),animationFrame:a,bottomSheetContainer:s})}function U(d,{viewportHeight:p,visibleHeight:g}){let m=null;for(const O of d){const D=O*p,$=q(g,D);(m===null||$<m)&&(m=$)}return{minOffset:m}}function H(){const d=[...c.snapPoints].reverse(),p=P(s).y,g=s.clientHeight,m=g-p;if(!c.expandable&&m>=g)return;const O=window.innerHeight,D=ge("above",{visibleHeight:m,viewportHeight:O},d),{minOffset:$}=U(D,{visibleHeight:m,viewportHeight:O});if($===null&&m<O-c.marginTop){o.translateContainer({startY:p,endY:me(O,g,c.marginTop,"top"),animationFrame:a,bottomSheetContainer:s});return}A($)&&o.translateContainer({startY:p,endY:p-$,animationFrame:a,bottomSheetContainer:s})}function B(){const d=P(s).y,p=s.clientHeight-d;if(p<1)return;const g=window.innerHeight,m=ge("below",{visibleHeight:p,viewportHeight:g},c.snapPoints),{minOffset:O}=U(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(!Qe(d))return;const g=te(p*d,2);G(g)}return{props:c,elements:u,mount:E,unmount:v,open:y,close:w,getIsMounted:x,getIsOpen:T,getIsClosed:j,getPosition:V,getHeight:K,moveTo:G,snapTo:b}}function ue(){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:()=>I.CLOSED,moveTo:()=>{},snapTo:()=>{},props:{content:""}}}const ut=ue(),dt=S.forwardRef(function(t,n){const{children:o,isOpen:r,setIsOpen:i,afterClose:a,mountingPointRef:l,...u}=t,h=S.useRef(ut),[c,f]=S.useState(h.current);S.useImperativeHandle(n,()=>c,[c]);const C=S.useCallback(()=>{i(!1),a==null||a()},[a]);S.useEffect(()=>{r?c.open():c.close()},[r]);const s=S.useRef(null);return S.useEffect(function(){var w;if(l&&!l.current)return;const v=Ae((w=t.mountingPointRef)==null?void 0:w.current)?t.mountingPointRef.current:window.document.body;if(!v||c.getIsMounted())return;const y=lt({content:"",...u,afterClose:C});return y.mount(v),s.current=y.elements.bottomSheetContentWrapper??null,h.current=y,f(y),()=>{c.unmount()}},[t.mountingPointRef,u,C]),S.useEffect(function(){Object.assign(h.current.props,{...u}),f(h.current)},[u]),S.useEffect(function(){return()=>{h.current.unmount()}},[]),s.current?xe.createPortal(t.children,s.current):null}),pt=ue();function ht(e={}){const t=S.useRef(pt),[n,o]=S.useState(!1),r=!n,[i,a]=S.useState(t.current);S.useEffect(()=>{a(t.current)},[t.current]);const{beforeOpen:l,afterOpen:u,beforeClose:h,afterClose:c,onDragStart:f,onDragMove:C,onDragEnd:s,...E}=e,v=()=>{l==null||l()},y=()=>{u==null||u(),o(!0)},w=()=>{h==null||h()},x=()=>{c==null||c(),o(!1)},T=()=>{f==null||f()},j=(b,d)=>{C==null||C(b,d)},V=()=>{s==null||s()},K=S.useMemo(()=>({ref:t,isOpen:n,setIsOpen:o,beforeOpen:v,afterOpen:y,beforeClose:w,afterClose:x,onDragStart:T,onDragMove:j,onDragEnd:V,...E}),[t.current,n,o,e]),G=S.useCallback(()=>{o(!0)},[o]),U=S.useCallback(()=>{o(!1)},[o]),H=S.useCallback((...b)=>{i.moveTo(...b)},[i]),B=S.useCallback((...b)=>{i.snapTo(...b)},[i]);return{props:K,instance:i,isOpen:n,isClosed:r,setIsOpen:o,open:G,close:U,moveTo:H,snapTo:B}}M.BottomSheet=dt,M.createPlaceholderBottomSheet=ue,M.useBottomSheet=ht,Object.defineProperty(M,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@plainsheet/react",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.10",
|
|
4
4
|
"private": false,
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"license": "MIT",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"access": "public"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@plainsheet/core": "0.7.
|
|
34
|
+
"@plainsheet/core": "0.7.10",
|
|
35
35
|
"@plainsheet/utility": "0.0.3"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
@@ -61,6 +61,7 @@
|
|
|
61
61
|
"clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
|
|
62
62
|
"lint": "eslint . --max-warnings 0",
|
|
63
63
|
"test": "vitest run",
|
|
64
|
-
"test:watch": "vitest --ui"
|
|
64
|
+
"test:watch": "vitest --ui",
|
|
65
|
+
"readme": "sh ../../scripts/copy-root-readme.sh"
|
|
65
66
|
}
|
|
66
67
|
}
|