@start-base/start-ui/Dropdown/index.js

<p align="center"> <a href="https://startbase.dev" target="_blank"> <img src="https://startbase.dev/apple-touch-icon.png" width="60px" style="padding-top: 60px" /> </a> </p>

"use strict";var e=require("react"),t=require("@floating-ui/react"),n=require("clsx");function a(e){return e&&e.__esModule?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,a.get?a:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var l=o(e),r=a(n),s=Object.defineProperty,i=Object.defineProperties,u=Object.getOwnPropertyDescriptors,d=Object.getOwnPropertySymbols,c=Object.prototype.hasOwnProperty,f=Object.prototype.propertyIsEnumerable,m=(e,t,n)=>t in e?s(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,p=(e,t)=>{for(var n in t||(t={}))c.call(t,n)&&m(e,n,t[n]);if(d)for(var n of d(t))f.call(t,n)&&m(e,n,t[n]);return e},g=(e,t)=>i(e,u(t)),v=(e,t)=>{var n={};for(var a in e)c.call(e,a)&&t.indexOf(a)<0&&(n[a]=e[a]);if(null!=e&&d)for(var a of d(e))t.indexOf(a)<0&&f.call(e,a)&&(n[a]=e[a]);return n};function I(e){var t=e,{size:n,width:a,height:o}=t,r=v(t,["size","width","height"]);return l.createElement("svg",p({xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",stroke:"currentColor",strokeWidth:0,viewBox:"0 0 24 24",width:null!=n?n:a,height:null!=n?n:o},r),l.createElement("path",{fill:"none",stroke:"none",d:"M0 0h24v24H0V0z"}),l.createElement("path",{stroke:"none",d:"M6.23 20.23 8 22l10-10L8 2 6.23 3.77 14.46 12z"}))}var b=e.createContext({getItemProps:()=>({}),activeIndex:null,setActiveIndex:()=>({}),setHasFocusInside:()=>({}),isOpen:!1});b.displayName="FloatingMenuContext";var h=b,F="SUI-FloatingMenu-module-menu-S6X1q",x="SUI-FloatingMenu-module-menuItem-QvCb8",E=e.forwardRef(((n,a)=>{var o=n,{children:s,component:i,label:u,className:d,menuClassName:c,placement:f,icon:m}=o,b=v(o,["children","component","label","className","menuClassName","placement","icon"]);const[E,O]=e.useState(!1),[w,y]=e.useState(!1),[P,N]=e.useState(null),M=e.useRef([]),R=e.useRef([]),j=e.useContext(h),C=t.useFloatingTree(),k=t.useFloatingNodeId(),S=t.useFloatingParentNodeId(),z=t.useListItem(),A=null!=S,{floatingStyles:H,refs:q,context:D}=t.useFloating({nodeId:k,open:E,onOpenChange:O,placement:A?"right-start":f||"bottom-end",middleware:[t.offset({mainAxis:A?8:4,alignmentAxis:A?-4:0}),t.shift({padding:4,crossAxis:!0}),t.flip({padding:4})],whileElementsMounted:t.autoUpdate}),L=t.useHover(D,{enabled:A,delay:{open:75},handleClose:t.safePolygon({blockPointerEvents:!0})}),_=t.useClick(D,{event:"mousedown",toggle:!A,ignoreMouse:A}),T=t.useRole(D,{role:"menu"}),U=t.useDismiss(D,{bubbles:!0}),B=t.useListNavigation(D,{listRef:M,activeIndex:P,nested:A,onNavigate:N}),Q=t.useTypeahead(D,{listRef:R,onMatch:E?N:void 0,activeIndex:P}),{getReferenceProps:V,getFloatingProps:W,getItemProps:X}=t.useInteractions([L,_,T,U,B,Q]);e.useEffect((()=>{if(C)return C.events.on("click",e),C.events.on("menuopen",t),()=>{C.events.off("click",e),C.events.off("menuopen",t)};function e(){O(!1)}function t(e){e.nodeId!==k&&e.parentId===S&&O(!1)}}),[C,k,S]),e.useEffect((()=>{E&&C&&C.events.emit("menuopen",{parentId:S,nodeId:k})}),[C,E,k,S]);const G=e.useMemo((()=>({activeIndex:P,setActiveIndex:N,getItemProps:X,setHasFocusInside:y,isOpen:E})),[]);return l.default.createElement(t.FloatingNode,{id:k},l.default.createElement("div",p({ref:t.useMergeRefs([q.setReference,z.ref,a]),tabIndex:A?j.activeIndex===z.index?0:-1:void 0,role:A?"menuitem":void 0,"data-open":E?"":void 0,"data-nested":A?"":void 0,"data-focus-inside":w?"":void 0,className:r.default({[x]:A},d&&{[d]:!0})},V(j.getItemProps(g(p({},b),{onFocus:e=>{var t;null==(t=b.onFocus)||t.call(b,e),y(!1),j.setHasFocusInside(!0)}})))),i||u,A&&(m||l.default.createElement(I,null))),l.default.createElement(h.Provider,{value:G},l.default.createElement(t.FloatingList,{elementsRef:M,labelsRef:R},E&&l.default.createElement(t.FloatingPortal,null,l.default.createElement(t.FloatingFocusManager,{context:D,modal:!1,initialFocus:A?-1:0,returnFocus:!A},l.default.createElement("div",p({ref:q.setFloating,className:r.default(F,c&&{[c]:!0}),style:H},W()),s))))))}));E.displayName="FloatingMenu";var O=E,w=e.forwardRef(((e,n)=>null===t.useFloatingParentNodeId()?l.default.createElement(t.FloatingTree,null,l.default.createElement(O,g(p({},e),{ref:n}))):l.default.createElement(O,g(p({},e),{ref:n}))));w.displayName="Dropdown";var y=w;module.exports=y;