@loke/ui
Version:
2 lines (1 loc) • 8.87 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_dismissable_layer={};__export(exports_dismissable_layer,{Root:()=>Root,DismissableLayerBranch:()=>DismissableLayerBranch,DismissableLayer:()=>DismissableLayer,Branch:()=>Branch});module.exports=__toCommonJS(exports_dismissable_layer);var import_compose_events=require("@loke/ui/compose-events"),import_compose_refs=require("@loke/ui/compose-refs"),import_primitive=require("@loke/ui/primitive"),import_use_callback_ref=require("@loke/ui/use-callback-ref"),import_use_escape_keydown=require("@loke/ui/use-escape-keydown"),import_react=require("react"),jsx_runtime=require("react/jsx-runtime"),DISMISSABLE_LAYER_NAME="DismissableLayer",CONTEXT_UPDATE="dismissableLayer.update",POINTER_DOWN_OUTSIDE="dismissableLayer.pointerDownOutside",FOCUS_OUTSIDE="dismissableLayer.focusOutside",originalBodyPointerEvents,DismissableLayerContext=import_react.createContext({branches:new Set,layers:new Set,layersWithOutsidePointerEventsDisabled:new Set}),DismissableLayer=import_react.forwardRef((props,forwardedRef)=>{let{disableOutsidePointerEvents=!1,onEscapeKeyDown,onPointerDownOutside,onFocusOutside,onInteractOutside,onDismiss,...layerProps}=props,context=import_react.useContext(DismissableLayerContext),[node,setNode]=import_react.useState(null),ownerDocument=node?.ownerDocument??globalThis?.document,[,force]=import_react.useState({}),composedRefs=import_compose_refs.useComposedRefs(forwardedRef,(element)=>setNode(element)),layers=Array.from(context.layers),[highestLayerWithOutsidePointerEventsDisabled]=[...context.layersWithOutsidePointerEventsDisabled].slice(-1),highestLayerWithOutsidePointerEventsDisabledIndex=layers.indexOf(highestLayerWithOutsidePointerEventsDisabled),index=node?layers.indexOf(node):-1,isBodyPointerEventsDisabled=context.layersWithOutsidePointerEventsDisabled.size>0,isPointerEventsEnabled=index>=highestLayerWithOutsidePointerEventsDisabledIndex,pointerDownOutside=usePointerDownOutside((event)=>{let target=event.target,isPointerDownOnBranch=[...context.branches].some((branch)=>branch.contains(target));if(!isPointerEventsEnabled||isPointerDownOnBranch)return;if(onPointerDownOutside?.(event),onInteractOutside?.(event),!event.defaultPrevented)onDismiss?.()},ownerDocument),focusOutside=useFocusOutside((event)=>{let target=event.target;if([...context.branches].some((branch)=>branch.contains(target)))return;if(onFocusOutside?.(event),onInteractOutside?.(event),!event.defaultPrevented)onDismiss?.()},ownerDocument);import_use_escape_keydown.useEscapeKeydown((event)=>{if(index!==context.layers.size-1)return;if(onEscapeKeyDown?.(event),!event.defaultPrevented&&onDismiss)event.preventDefault(),onDismiss()},ownerDocument),import_react.useEffect(()=>{if(!node)return;if(disableOutsidePointerEvents){if(context.layersWithOutsidePointerEventsDisabled.size===0)originalBodyPointerEvents=ownerDocument.body.style.pointerEvents,ownerDocument.body.style.pointerEvents="none";context.layersWithOutsidePointerEventsDisabled.add(node)}return context.layers.add(node),dispatchUpdate(),()=>{if(disableOutsidePointerEvents&&context.layersWithOutsidePointerEventsDisabled.size===1)ownerDocument.body.style.pointerEvents=originalBodyPointerEvents}},[node,ownerDocument,disableOutsidePointerEvents,context]),import_react.useEffect(()=>{return()=>{if(!node)return;context.layers.delete(node),context.layersWithOutsidePointerEventsDisabled.delete(node),dispatchUpdate()}},[node,context]),import_react.useEffect(()=>{let handleUpdate=()=>force({});return document.addEventListener(CONTEXT_UPDATE,handleUpdate),()=>document.removeEventListener(CONTEXT_UPDATE,handleUpdate)},[]);let pointerEvents;if(isBodyPointerEventsDisabled)pointerEvents=isPointerEventsEnabled?"auto":"none";return jsx_runtime.jsx(import_primitive.Primitive.div,{...layerProps,onBlurCapture:import_compose_events.composeEventHandlers(props.onBlurCapture,focusOutside.onBlurCapture),onFocusCapture:import_compose_events.composeEventHandlers(props.onFocusCapture,focusOutside.onFocusCapture),onPointerDownCapture:import_compose_events.composeEventHandlers(props.onPointerDownCapture,pointerDownOutside.onPointerDownCapture),ref:composedRefs,style:{pointerEvents,...props.style}})});DismissableLayer.displayName=DISMISSABLE_LAYER_NAME;var BRANCH_NAME="DismissableLayerBranch",DismissableLayerBranch=import_react.forwardRef((props,forwardedRef)=>{let context=import_react.useContext(DismissableLayerContext),ref=import_react.useRef(null),composedRefs=import_compose_refs.useComposedRefs(forwardedRef,ref);return import_react.useEffect(()=>{let node=ref.current;if(node)return context.branches.add(node),()=>{context.branches.delete(node)}},[context.branches]),jsx_runtime.jsx(import_primitive.Primitive.div,{...props,ref:composedRefs})});DismissableLayerBranch.displayName=BRANCH_NAME;function usePointerDownOutside(onPointerDownOutside,ownerDocument=globalThis?.document){let handlePointerDownOutside=import_use_callback_ref.useCallbackRef(onPointerDownOutside),isPointerInsideReactTreeRef=import_react.useRef(!1),handleClickRef=import_react.useRef(()=>{});return import_react.useEffect(()=>{let handlePointerDown=(event)=>{if(event.target&&!isPointerInsideReactTreeRef.current){let handleAndDispatchPointerDownOutsideEvent=function(){handleAndDispatchCustomEvent(POINTER_DOWN_OUTSIDE,handlePointerDownOutside,eventDetail,{discrete:!0})},eventDetail={originalEvent:event};if(event.pointerType==="touch")ownerDocument.removeEventListener("click",handleClickRef.current),handleClickRef.current=handleAndDispatchPointerDownOutsideEvent,ownerDocument.addEventListener("click",handleClickRef.current,{once:!0});else handleAndDispatchPointerDownOutsideEvent()}else ownerDocument.removeEventListener("click",handleClickRef.current);isPointerInsideReactTreeRef.current=!1},timerId=window.setTimeout(()=>{ownerDocument.addEventListener("pointerdown",handlePointerDown)},0);return()=>{window.clearTimeout(timerId),ownerDocument.removeEventListener("pointerdown",handlePointerDown),ownerDocument.removeEventListener("click",handleClickRef.current)}},[ownerDocument,handlePointerDownOutside]),{onPointerDownCapture:()=>{isPointerInsideReactTreeRef.current=!0}}}function useFocusOutside(onFocusOutside,ownerDocument=globalThis?.document){let handleFocusOutside=import_use_callback_ref.useCallbackRef(onFocusOutside),isFocusInsideReactTreeRef=import_react.useRef(!1);return import_react.useEffect(()=>{let handleFocus=(event)=>{if(event.target&&!isFocusInsideReactTreeRef.current)handleAndDispatchCustomEvent(FOCUS_OUTSIDE,handleFocusOutside,{originalEvent:event},{discrete:!1})};return ownerDocument.addEventListener("focusin",handleFocus),()=>ownerDocument.removeEventListener("focusin",handleFocus)},[ownerDocument,handleFocusOutside]),{onBlurCapture:()=>{isFocusInsideReactTreeRef.current=!1},onFocusCapture:()=>{isFocusInsideReactTreeRef.current=!0}}}function dispatchUpdate(){let event=new CustomEvent(CONTEXT_UPDATE);document.dispatchEvent(event)}function handleAndDispatchCustomEvent(name,handler,detail,{discrete}){let{target}=detail.originalEvent,event=new CustomEvent(name,{bubbles:!1,cancelable:!0,detail});if(handler)target.addEventListener(name,handler,{once:!0});if(discrete)import_primitive.dispatchDiscreteCustomEvent(target,event);else target.dispatchEvent(event)}var Root=DismissableLayer,Branch=DismissableLayerBranch;