@snowball-tech/fractal
Version:
Fractal's (Snowball's design system) React component library based on RadixUI and PandaCSS
3 lines • 6.1 kB
JavaScript
'use client';
import{a as S}from"./chunk-RKZN6FZX.js";import{a as j}from"./chunk-XEYPM4AT.js";import{a as t,e as Y}from"./chunk-UO7KBUEN.js";import{a as X}from"./chunk-CVNLFXS2.js";import{c as W}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 z}from"./chunk-XYM7TA65.js";import*as u from"@radix-ui/react-scroll-area";import{useClickOutside as ve}from"@react-hookz/web";import{UilAngleRight as he}from"@tooni/iconscout-unicons-react";import{forwardRef as $e,useContext as J,useEffect as we,useImperativeHandle as xe,useRef as C,useState as Ne}from"react";import Re from"lodash/fp/constant";import Me from"lodash/fp/isEmpty";import _ from"lodash/fp/isFunction";import Q from"lodash/fp/omit";import{jsx as o,jsxs as P}from"react/jsx-runtime";var Z=$e(({active:A=!1,align:ee="start",children:D,condensed:te=!1,condensedItems:ne=!1,defaultOpen:oe=!1,disabled:d=!1,elevation:T=Y,icon:g,label:y,onClose:v,onInteractOutside:k,onOpen:h,onSubMenuOpenChange:L,open:$,popover:I=!0,popup:r,rainbow:re=!0,side:K,triggerOnHover:w=!0,withIndicator:ae=!0,withScroll:F=!0,...a},se)=>{let x=C(null),N=C(null);xe(se,()=>({get content(){return N?.current??null},get trigger(){return x?.current??null}}));let U=C(null),f=!!D,[m,le]=Ne($===!0&&f),b=n=>{if(d)return;let s=m;le(Re(n)),_(L)&&s!==n&&L(n),!s&&n&&_(h)&&h(),s&&!n&&_(v)&&v()},R=()=>{b(!0)},M=()=>{b(!1)},ie=()=>{b(!m)};we(()=>{$===!0&&f?R():M()},[f,$]);let{condensed:ue,disabled:me,orientation:ce,rainbow:de}=J(j),{condensed:_e,disabled:fe,rainbow:be}=J(S),c=d||fe||me,pe=te||_e||ue,E=re&&be&&de,ge=n=>{let{target:s}=n;s===window||s===null||s===void 0||((x?.current?.contains(s)||N?.current?.contains(s))&&n.preventDefault(),_(k)&&k(n))},ye=n=>{_(a.onKeyDown)&&a.onKeyDown(n),(n.key==="Enter"||n.key===" ")&&R()},B=()=>{w&&R()},O=()=>{w&&M()};ve(U,()=>{M()});let V=P(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",pe?"max-h-6 px-2 py-1":"p-2",g?`${e}-${t}__sub-menu__trigger--with-icon`:"",c?`${e}-${t}__sub-menu__trigger--disabled pointer-events-none cursor-not-allowed !bg-transparent text-disabled`:"cursor-pointer text-dark",r?.trigger?.className),element:"div",role:"menuitem",tabIndex:-1,title:y,...I?w?{onClick:n=>n.preventDefault(),onMouseEnter:B}:{}:{onClick:ie},style:r?.trigger?.style,onKeyDown:ye,children:[g&&o("div",{className:l(`${e}-${t}__item__icon`,"max-h-3 max-w-3"),children:g}),o(p,{className:l("flex-1",d?"cursor-not-allowed":"cursor-pointer"),element:"label",children:y}),ae&&o("div",{className:l(`${e}-${t}__sub-menu__indicator`,"max-h-3 max-w-3"),children:o(he,{})})]}),G=o(p,{className:l(`${e}-${t}__sub-menu__items`,"relative overflow-hidden rounded-sm p-1",c?`${e}-${t}__sub-menu__items--disabled`:E?z:""),element:"div",children:o(S.Provider,{value:{condensed:ne,disabled:c,rainbow:E},children:D})}),H=o("div",{ref:N,className:i(`${e}-${t}__sub-menu__content`,"w-full",c?`${e}-${t}__sub-menu__content--disabled`:"",f?"":`${e}-${t}__sub-menu__content--empty invisible`,r?.content?.className),style:r?.content?.style,children:F?P(u.Root,{className:`${e}-${t}__sub-menu__content__scrollarea`,...a.dir===void 0?{}:{dir:a.dir},type:"hover",children:[o(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:G}),o(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:o(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")})})]}):G}),q=i(`${e}-${t}__sub-menu`,c?`${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 I?o(X,{align:ee,className:i(`${e}-${t}__sub-menu__popup`,`${e}-${t}__sub-menu__popup--popover`,E?"alternatee":c?"":"hover:bg-decorative-pink-90","rounded-sm",a.className),"data-highlighted":A||m||void 0,disabled:d,elevation:T,fullWidth:!0,popover:{className:q,style:r?.style},side:Me(K)?ce==="vertical"?"right":"bottom":K,style:{...a.style,...r?.style},trigger:V,withArrow:!1,withCloseButton:!1,withScroll:F,onClose:v,onInteractOutside:ge,onOpen:h,onOpenChange:b,...oe?{defaultOpen:!0}:{},...d?{open:!1}:{open:m},onMouseLeave:O,...Q(["className","style"],a),children:H}):P("div",{ref:U,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,r?.className),"data-highlighted":A||m||void 0,style:{...a.style,...r?.style},onMouseEnter:B,onMouseLeave:O,...Q(["className","style"],a),children:[o("div",{className:i(`${e}-${t}__sub-menu__popup__trigger-wrapper`,r?.trigger?.wrapper?.className),style:r?.trigger?.wrapper?.style,children:V}),o("div",{className:i(`${e}-${t}__sub-menu__popup__content-positionner`,"absolute left-full top-0 z-[5000] pl-2",m?"":"hidden",r?.content?.positionner?.className),style:r?.content?.positionner?.style,children:o(W,{className:i(`${e}-${t}__sub-menu__popup__content-wrapper`,"p-0",r?.content?.wrapper?.className),elevation:T,style:r?.content?.wrapper?.style,children:o("div",{className:q,children:H})})})]})});Z.displayName="SubMenu";var qe=Z;export{Z as a,qe as b};
//# sourceMappingURL=chunk-KDYLLVAJ.js.map