UNPKG

@loke/ui

Version:
2 lines (1 loc) 9.64 kB
var __create=Object.create;var{getPrototypeOf:__getProtoOf,defineProperty:__defProp,getOwnPropertyNames:__getOwnPropNames,getOwnPropertyDescriptor:__getOwnPropDesc}=Object,__hasOwnProp=Object.prototype.hasOwnProperty;function __accessProp(key){return this[key]}var __toESMCache_node,__toESMCache_esm,__toESM=(mod,isNodeMode,target)=>{var canCache=mod!=null&&typeof mod==="object";if(canCache){var cache=isNodeMode?__toESMCache_node??=new WeakMap:__toESMCache_esm??=new WeakMap,cached=cache.get(mod);if(cached)return cached}target=mod!=null?__create(__getProtoOf(mod)):{};let to=isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target;for(let key of __getOwnPropNames(mod))if(!__hasOwnProp.call(to,key))__defProp(to,key,{get:__accessProp.bind(mod,key),enumerable:!0});if(canCache)cache.set(mod,to);return to},__toCommonJS=(from)=>{var entry=(__moduleCache??=new WeakMap).get(from),desc;if(entry)return entry;if(entry=__defProp({},"__esModule",{value:!0}),from&&typeof from==="object"||typeof from==="function"){for(var key of __getOwnPropNames(from))if(!__hasOwnProp.call(entry,key))__defProp(entry,key,{get:__accessProp.bind(from,key),enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable})}return __moduleCache.set(from,entry),entry},__moduleCache;var __returnValue=(v)=>v;function __exportSetter(name,newValue){this[name]=__returnValue.bind(null,newValue)}var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0,configurable:!0,set:__exportSetter.bind(all,name)})};var exports_popper={};__export(exports_popper,{createPopperScope:()=>createPopperScope,SIDE_OPTIONS:()=>SIDE_OPTIONS,Root:()=>Root,PopperContent:()=>PopperContent,PopperArrow:()=>PopperArrow,PopperAnchor:()=>PopperAnchor,Popper:()=>Popper,Content:()=>Content,Arrow:()=>Arrow,Anchor:()=>Anchor,ALIGN_OPTIONS:()=>ALIGN_OPTIONS});module.exports=__toCommonJS(exports_popper);var import_react_dom=require("@floating-ui/react-dom"),import_arrow=require("@loke/ui/arrow"),import_compose_refs=require("@loke/ui/compose-refs"),import_context=require("@loke/ui/context"),import_primitive=require("@loke/ui/primitive"),import_use_callback_ref=require("@loke/ui/use-callback-ref"),import_use_layout_effect=require("@loke/ui/use-layout-effect"),import_use_size=require("@loke/ui/use-size"),import_react=require("react"),jsx_runtime=require("react/jsx-runtime"),SIDE_OPTIONS=["top","right","bottom","left"],ALIGN_OPTIONS=["start","center","end"],POPPER_NAME="Popper",[createPopperContext,createPopperScope]=import_context.createContextScope(POPPER_NAME),[PopperProvider,usePopperContext]=createPopperContext(POPPER_NAME),Popper=(props)=>{let{__scopePopper,children}=props,[anchor,setAnchor]=import_react.useState(null);return jsx_runtime.jsx(PopperProvider,{anchor,onAnchorChange:setAnchor,scope:__scopePopper,children})};Popper.displayName=POPPER_NAME;var ANCHOR_NAME="PopperAnchor",PopperAnchor=import_react.forwardRef((props,forwardedRef)=>{let{__scopePopper,virtualRef,...anchorProps}=props,context=usePopperContext(ANCHOR_NAME,__scopePopper),ref=import_react.useRef(null),composedRefs=import_compose_refs.useComposedRefs(forwardedRef,ref),anchorRef=import_react.useRef(null);return import_react.useEffect(()=>{let previousAnchor=anchorRef.current;if(anchorRef.current=virtualRef?.current||ref.current,previousAnchor!==anchorRef.current)context.onAnchorChange(anchorRef.current)}),virtualRef?null:jsx_runtime.jsx(import_primitive.Primitive.div,{...anchorProps,ref:composedRefs})});PopperAnchor.displayName=ANCHOR_NAME;var CONTENT_NAME="PopperContent",[PopperContentProvider,useContentContext]=createPopperContext(CONTENT_NAME),PopperContent=import_react.forwardRef((props,forwardedRef)=>{let{__scopePopper,side="bottom",sideOffset=0,align="center",alignOffset=0,arrowPadding=0,avoidCollisions=!0,collisionBoundary=[],collisionPadding:collisionPaddingProp=0,sticky="partial",hideWhenDetached=!1,updatePositionStrategy="optimized",onPlaced,...contentProps}=props,context=usePopperContext(CONTENT_NAME,__scopePopper),[content,setContent]=import_react.useState(null),composedRefs=import_compose_refs.useComposedRefs(forwardedRef,(node)=>setContent(node)),[arrow,setArrow]=import_react.useState(null),arrowSize=import_use_size.useSize(arrow),arrowWidth=arrowSize?.width??0,arrowHeight=arrowSize?.height??0,desiredPlacement=side+(align!=="center"?`-${align}`:""),collisionPadding=typeof collisionPaddingProp==="number"?collisionPaddingProp:{bottom:0,left:0,right:0,top:0,...collisionPaddingProp},boundary=Array.isArray(collisionBoundary)?collisionBoundary:[collisionBoundary],detectOverflowOptions={altBoundary:boundary.length>0,boundary:boundary.filter(isNotNull),padding:collisionPadding},{refs,floatingStyles,placement,isPositioned,middlewareData}=import_react_dom.useFloating({elements:{reference:context.anchor},middleware:[import_react_dom.offset({alignmentAxis:alignOffset,mainAxis:sideOffset+arrowHeight}),avoidCollisions&&import_react_dom.shift({crossAxis:!1,limiter:sticky==="partial"?import_react_dom.limitShift():void 0,mainAxis:!0,...detectOverflowOptions}),avoidCollisions&&import_react_dom.flip({...detectOverflowOptions}),import_react_dom.size({...detectOverflowOptions,apply:({elements,rects,availableWidth,availableHeight})=>{let{width:anchorWidth,height:anchorHeight}=rects.reference,contentStyle=elements.floating.style;contentStyle.setProperty("--loke-popper-available-width",`${availableWidth}px`),contentStyle.setProperty("--loke-popper-available-height",`${availableHeight}px`),contentStyle.setProperty("--loke-popper-anchor-width",`${anchorWidth}px`),contentStyle.setProperty("--loke-popper-anchor-height",`${anchorHeight}px`)}}),arrow&&import_react_dom.arrow({element:arrow,padding:arrowPadding}),transformOrigin({arrowHeight,arrowWidth}),hideWhenDetached&&import_react_dom.hide({strategy:"referenceHidden",...detectOverflowOptions})],placement:desiredPlacement,strategy:"fixed",whileElementsMounted:(...args)=>{return import_react_dom.autoUpdate(...args,{animationFrame:updatePositionStrategy==="always"})}}),[placedSide,placedAlign]=getSideAndAlignFromPlacement(placement),handlePlaced=import_use_callback_ref.useCallbackRef(onPlaced);import_use_layout_effect.useLayoutEffect(()=>{if(isPositioned)handlePlaced?.()},[isPositioned,handlePlaced]);let arrowX=middlewareData.arrow?.x,arrowY=middlewareData.arrow?.y,cannotCenterArrow=middlewareData.arrow?.centerOffset!==0,[contentZIndex,setContentZIndex]=import_react.useState();return import_use_layout_effect.useLayoutEffect(()=>{if(content)setContentZIndex(window.getComputedStyle(content).zIndex)},[content]),jsx_runtime.jsx("div",{"data-loke-popper-content-wrapper":"",dir:props.dir,ref:refs.setFloating,style:{...floatingStyles,"--loke-popper-transform-origin":[middlewareData.transformOrigin?.x,middlewareData.transformOrigin?.y].join(" "),minWidth:"max-content",transform:isPositioned?floatingStyles.transform:"translate(0, -200%)",zIndex:contentZIndex,...middlewareData.hide?.referenceHidden&&{pointerEvents:"none",visibility:"hidden"}},children:jsx_runtime.jsx(PopperContentProvider,{arrowX,arrowY,onArrowChange:setArrow,placedSide,scope:__scopePopper,shouldHideArrow:cannotCenterArrow,children:jsx_runtime.jsx(import_primitive.Primitive.div,{"data-align":placedAlign,"data-side":placedSide,...contentProps,ref:composedRefs,style:{...contentProps.style,animation:isPositioned?void 0:"none"}})})})});PopperContent.displayName=CONTENT_NAME;var ARROW_NAME="PopperArrow",OPPOSITE_SIDE={bottom:"top",left:"right",right:"left",top:"bottom"},PopperArrow=import_react.forwardRef((props,forwardedRef)=>{let{__scopePopper,...arrowProps}=props,contentContext=useContentContext(ARROW_NAME,__scopePopper),baseSide=OPPOSITE_SIDE[contentContext.placedSide];return jsx_runtime.jsx("span",{ref:contentContext.onArrowChange,style:{left:contentContext.arrowX,position:"absolute",top:contentContext.arrowY,[baseSide]:0,transform:{bottom:"rotate(180deg)",left:"translateY(50%) rotate(-90deg) translateX(50%)",right:"translateY(50%) rotate(90deg) translateX(-50%)",top:"translateY(100%)"}[contentContext.placedSide],transformOrigin:{bottom:"center 0",left:"100% 0",right:"0 0",top:""}[contentContext.placedSide],visibility:contentContext.shouldHideArrow?"hidden":void 0},children:jsx_runtime.jsx(import_arrow.Arrow,{...arrowProps,ref:forwardedRef,style:{...arrowProps.style,display:"block"}})})});PopperArrow.displayName=ARROW_NAME;function isNotNull(value){return value!==null}var transformOrigin=(options)=>({fn(data){let{placement,rects,middlewareData}=data,isArrowHidden=middlewareData.arrow?.centerOffset!==0,arrowWidth=isArrowHidden?0:options.arrowWidth,arrowHeight=isArrowHidden?0:options.arrowHeight,[placedSide,placedAlign]=getSideAndAlignFromPlacement(placement),noArrowAlign={center:"50%",end:"100%",start:"0%"}[placedAlign],arrowXCenter=(middlewareData.arrow?.x??0)+arrowWidth/2,arrowYCenter=(middlewareData.arrow?.y??0)+arrowHeight/2,x="",y="";if(placedSide==="bottom")x=isArrowHidden?noArrowAlign:`${arrowXCenter}px`,y=`${-arrowHeight}px`;else if(placedSide==="top")x=isArrowHidden?noArrowAlign:`${arrowXCenter}px`,y=`${rects.floating.height+arrowHeight}px`;else if(placedSide==="right")x=`${-arrowHeight}px`,y=isArrowHidden?noArrowAlign:`${arrowYCenter}px`;else if(placedSide==="left")x=`${rects.floating.width+arrowHeight}px`,y=isArrowHidden?noArrowAlign:`${arrowYCenter}px`;return{data:{x,y}}},name:"transformOrigin",options});function getSideAndAlignFromPlacement(placement){let[side,align="center"]=placement.split("-");return[side,align]}var Root=Popper,Anchor=PopperAnchor,Content=PopperContent,Arrow=PopperArrow;