UNPKG

@snowball-tech/fractal

Version:

Fractal's (Snowball's design system) React component library based on RadixUI and PandaCSS

3 lines 6 kB
'use client'; import{a as E}from"./chunk-7S7VKVT2.js";import{a as Y}from"./chunk-FXBX6IQS.js";import{a as t,e as X}from"./chunk-UO7KBUEN.js";import{a as W}from"./chunk-4R7MMREM.js";import{c as z}from"./chunk-262C6VLB.js";import{a as p}from"./chunk-HTOKQYVM.js";import{b as e}from"./chunk-CMFNILWJ.js";import{a as l,b as i,c as q}from"./chunk-XYM7TA65.js";import*as u from"@radix-ui/react-scroll-area";import{useClickOutside as be}from"@react-hookz/web";import{UilAngleRight as pe}from"@tooni/iconscout-unicons-react";import{forwardRef as ge,useContext as j,useEffect as ye,useImperativeHandle as ve,useRef as S,useState as he}from"react";import $e from"lodash/fp/constant";import we from"lodash/fp/isEmpty";import d from"lodash/fp/isFunction";import J from"lodash/fp/omit";import{jsx as r,jsxs as C}from"react/jsx-runtime";var Q=ge(({active:P=!1,align:Z="start",children:A,condensed:ee=!1,condensedItems:te=!1,defaultOpen:ne=!1,disabled:m=!1,elevation:D=X,icon:g,label:y,onClose:v,onInteractOutside:T,onOpen:h,onSubMenuOpenChange:L,open:$,popover:k=!0,popup:o,side:I,triggerOnHover:w=!0,withIndicator:re=!0,withScroll:K=!0,...a},oe)=>{let x=S(null),N=S(null);ve(oe,()=>({get content(){return N?.current??null},get trigger(){return x?.current??null}}));let F=S(null),_=!!A,[c,ae]=he($===!0&&_),f=n=>{if(m)return;let s=c;ae($e(n)),d(L)&&s!==n&&L(n),!s&&n&&d(h)&&h(),s&&!n&&d(v)&&v()},M=()=>{f(!0)},R=()=>{f(!1)},se=()=>{f(!c)};ye(()=>{$===!0&&_?M():R()},[_,$]);let{condensed:le,disabled:ie,orientation:ue}=j(Y),{condensed:me,disabled:ce}=j(E),b=m||ce||ie,de=ee||me||le,_e=n=>{let{target:s}=n;s===window||s===null||s===void 0||((x?.current?.contains(s)||N?.current?.contains(s))&&n.preventDefault(),d(T)&&T(n))},fe=n=>{d(a.onKeyDown)&&a.onKeyDown(n),(n.key==="Enter"||n.key===" ")&&M()},U=()=>{w&&M()},B=()=>{w&&R()};be(F,()=>{R()});let O=C(p,{ref:x,"aria-label":y,className:l(`${e}-${t}__sub-menu__trigger`,"flex w-full flex-row items-center gap-1","rounded-sm outline-none transition-background-color duration-300 ease-out",de?"max-h-6 px-2 py-1":"p-2",g?`${e}-${t}__sub-menu__trigger--with-icon`:"",b?`${e}-${t}__sub-menu__trigger--disabled pointer-events-none cursor-not-allowed !bg-transparent text-disabled`:"cursor-pointer text-dark",o?.trigger?.className),element:"div",role:"menuitem",tabIndex:-1,title:y,...k?w?{onClick:n=>n.preventDefault(),onMouseEnter:U}:{}:{onClick:se},style:o?.trigger?.style,onKeyDown:fe,children:[g&&r("div",{className:l(`${e}-${t}__item__icon`,"max-h-3 max-w-3"),children:g}),r(p,{className:l("flex-1",m?"cursor-not-allowed":"cursor-pointer"),element:"label",children:y}),re&&r("div",{className:l(`${e}-${t}__sub-menu__indicator`,"max-h-3 max-w-3"),children:r(pe,{})})]}),V=r(p,{className:l(`${e}-${t}__sub-menu__items`,"relative overflow-hidden rounded-sm p-1",m?`${e}-${t}__sub-menu__items--disabled`:q),element:"div",children:r(E.Provider,{value:{condensed:te,disabled:b},children:A})}),G=r("div",{ref:N,className:i(`${e}-${t}__sub-menu__content`,"w-full",b?`${e}-${t}__sub-menu__content--disabled`:"",_?"":`${e}-${t}__sub-menu__content--empty invisible`,o?.content?.className),style:o?.content?.style,children:K?C(u.Root,{className:`${e}-${t}__sub-menu__content__scrollarea`,...a.dir===void 0?{}:{dir:a.dir},type:"hover",children:[r(u.Viewport,{className:l(`${e}-${t}__sub-menu__content__scrollarea__viewport`,`relative h-full max-h-[calc(var(--radix-popper-available-height)-theme(spacing.4))] w-full overflow-auto [&:has(+_.${e}-${t}__sub-menu__content__scrollarea__scrollbar--y)]:w-[calc(100%-theme(spacing.1)+theme(spacing.quarter))]`),style:{overflowY:void 0},children:V}),r(u.Scrollbar,{className:l(`${e}-${t}__sub-menu__content__scrollarea__scrollbar--y`,'flex touch-none select-none rounded-r-sm bg-grey-90 p-quarter transition-background-color duration-300 ease-out hover:bg-grey-70 data-[orientation="vertical"]:w-1'),orientation:"vertical",children:r(u.Thumb,{className:l(`${e}-${t}__sub-menu__content__scrollarea__scrollbar--y__thumb`,"before:l-1/2 relative !w-half flex-1 rounded-sm bg-grey-30 before:absolute before:top-1/2 before:h-full before:min-h-[44px] before:w-full before:min-w-[44px] before:-translate-x-1/2 before:-translate-y-1/2 before:content-empty")})})]}):V}),H=i(`${e}-${t}__sub-menu`,b?`${e}-${t}__sub-menu--disabled`:"",'pointer-events-auto relative z-50 overflow-hidden rounded-sm p-0 data-[side="bottom"]:mt-1 data-[side="left"]:mr-2 data-[side="right"]:ml-2 data-[side="top"]:mb-1');return k?r(W,{align:Z,className:i(`${e}-${t}__sub-menu__popup`,`${e}-${t}__sub-menu__popup--popover`,"alternatee","rounded-sm",a.className),"data-highlighted":P||c||void 0,disabled:m,elevation:D,fullWidth:!0,popover:{className:H,style:o?.style},side:we(I)?ue==="vertical"?"right":"bottom":I,style:{...a.style,...o?.style},trigger:O,withArrow:!1,withCloseButton:!1,withScroll:K,onClose:v,onInteractOutside:_e,onOpen:h,onOpenChange:f,...ne?{defaultOpen:!0}:{},...m?{open:!1}:{open:c},onMouseLeave:B,...J(["className","style"],a),children:G}):C("div",{ref:F,className:i(`${e}-${t}__sub-menu__popup`,`${e}-${t}__sub-menu__popup--non-popover`,"alternatee","relative rounded-sm outline-none transition-background-color duration-300 ease-out",a.className,o?.className),"data-highlighted":P||c||void 0,style:{...a.style,...o?.style},onMouseEnter:U,onMouseLeave:B,...J(["className","style"],a),children:[r("div",{className:i(`${e}-${t}__sub-menu__popup__trigger-wrapper`,o?.trigger?.wrapper?.className),style:o?.trigger?.wrapper?.style,children:O}),r("div",{className:i(`${e}-${t}__sub-menu__popup__content-positionner`,"absolute left-full top-0 z-[5000] pl-2",c?"":"hidden",o?.content?.positionner?.className),style:o?.content?.positionner?.style,children:r(z,{className:i(`${e}-${t}__sub-menu__popup__content-wrapper`,"p-0",o?.content?.wrapper?.className),elevation:D,style:o?.content?.wrapper?.style,children:r("div",{className:H,children:G})})})]})});Q.displayName="SubMenu";var Oe=Q;export{Q as a,Oe as b}; //# sourceMappingURL=chunk-DBRPE2F7.js.map