@loke/ui
Version:
2 lines (1 loc) • 6.12 kB
JavaScript
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_collapsible={};__export(exports_collapsible,{createCollapsibleScope:()=>createCollapsibleScope,CollapsibleTrigger:()=>CollapsibleTrigger,CollapsibleContent:()=>CollapsibleContent,Collapsible:()=>Collapsible});module.exports=__toCommonJS(exports_collapsible);var import_compose_events=require("@loke/ui/compose-events"),import_compose_refs=require("@loke/ui/compose-refs"),import_context=require("@loke/ui/context"),import_presence=require("@loke/ui/presence"),import_primitive=require("@loke/ui/primitive"),import_use_controllable_state=require("@loke/ui/use-controllable-state"),import_use_id=require("@loke/ui/use-id"),import_use_layout_effect=require("@loke/ui/use-layout-effect"),import_react=require("react"),jsx_runtime=require("react/jsx-runtime"),COLLAPSIBLE_NAME="Collapsible",[createCollapsibleContext,createCollapsibleScope]=import_context.createContextScope(COLLAPSIBLE_NAME),[CollapsibleProvider,useCollapsibleContext]=createCollapsibleContext(COLLAPSIBLE_NAME),Collapsible=import_react.forwardRef((props,forwardedRef)=>{let{__scopeCollapsible,open:openProp,defaultOpen,disabled,onOpenChange,...collapsibleProps}=props,[open,setOpen]=import_use_controllable_state.useControllableState({caller:COLLAPSIBLE_NAME,defaultProp:defaultOpen??!1,onChange:onOpenChange,prop:openProp});return jsx_runtime.jsx(CollapsibleProvider,{contentId:import_use_id.useId(),disabled,onOpenToggle:import_react.useCallback(()=>setOpen((prevOpen)=>!prevOpen),[setOpen]),open,scope:__scopeCollapsible,children:jsx_runtime.jsx(import_primitive.Primitive.div,{"data-disabled":disabled?"":void 0,"data-state":getState(open),...collapsibleProps,ref:forwardedRef})})});Collapsible.displayName=COLLAPSIBLE_NAME;var TRIGGER_NAME="CollapsibleTrigger",CollapsibleTrigger=import_react.forwardRef((props,forwardedRef)=>{let{__scopeCollapsible,...triggerProps}=props,context=useCollapsibleContext(TRIGGER_NAME,__scopeCollapsible);return jsx_runtime.jsx(import_primitive.Primitive.button,{"aria-controls":context.contentId,"aria-expanded":context.open,"data-disabled":context.disabled?"":void 0,"data-state":getState(context.open),disabled:context.disabled,...triggerProps,type:"button",onClick:import_compose_events.composeEventHandlers(props.onClick,context.onOpenToggle),ref:forwardedRef})});CollapsibleTrigger.displayName=TRIGGER_NAME;var CONTENT_NAME="CollapsibleContent",CollapsibleContent=import_react.forwardRef((props,forwardedRef)=>{let{forceMount,...contentProps}=props,context=useCollapsibleContext(CONTENT_NAME,props.__scopeCollapsible);return jsx_runtime.jsx(import_presence.Presence,{present:forceMount||context.open,children:({present})=>jsx_runtime.jsx(CollapsibleContentImpl,{...contentProps,present,ref:forwardedRef})})});CollapsibleContent.displayName=CONTENT_NAME;var CollapsibleContentImpl=import_react.forwardRef((props,forwardedRef)=>{let{__scopeCollapsible,present,children,...contentProps}=props,context=useCollapsibleContext(CONTENT_NAME,__scopeCollapsible),[isPresent,setIsPresent]=import_react.useState(present),ref=import_react.useRef(null),composedRefs=import_compose_refs.useComposedRefs(forwardedRef,ref),heightRef=import_react.useRef(0),height=heightRef.current,widthRef=import_react.useRef(0),width=widthRef.current,isOpen=context.open||isPresent,isMountAnimationPreventedRef=import_react.useRef(isOpen),originalStylesRef=import_react.useRef(void 0);return import_react.useEffect(()=>{let rAF=requestAnimationFrame(()=>{isMountAnimationPreventedRef.current=!1});return()=>cancelAnimationFrame(rAF)},[]),import_use_layout_effect.useLayoutEffect(()=>{let node=ref.current;if(node){originalStylesRef.current=originalStylesRef.current||{animationName:node.style.animationName,transitionDuration:node.style.transitionDuration},node.style.transitionDuration="0s",node.style.animationName="none";let rect=node.getBoundingClientRect();if(heightRef.current=rect.height,widthRef.current=rect.width,!isMountAnimationPreventedRef.current)node.style.transitionDuration=originalStylesRef.current.transitionDuration,node.style.animationName=originalStylesRef.current.animationName;setIsPresent(present)}},[context.open,present]),jsx_runtime.jsx(import_primitive.Primitive.div,{"data-disabled":context.disabled?"":void 0,"data-state":getState(context.open),hidden:!isOpen,id:context.contentId,...contentProps,ref:composedRefs,style:{"--loke-collapsible-content-height":height?`${height}px`:void 0,"--loke-collapsible-content-width":width?`${width}px`:void 0,...props.style},children:isOpen&&children})});function getState(open){return open?"open":"closed"}