@snowball-tech/fractal/dist/Menu/SubMenu.js

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

"use client";import{a as e}from"../constants-CW2-utNH.js";import{n as t,r as n,t as ee}from"../helpers-DBEwVIlX.js";import{Typography as r}from"../Typography/Typography.js";import{r as te}from"../utils-K22C_6qC.js";import{Paper as ne}from"../Paper/Paper.js";import{Popover as re}from"../Popover/Popover.js";import{DEFAULT_SUB_MENU_ELEVATION as ie,GROUP_NAME as i}from"./Menu.constants.js";import{MenuContext as ae}from"./MenuContext.js";import{MenuGroupContext as a}from"./MenuGroupContext.js";import{forwardRef as o,useContext as s,useEffect as oe,useImperativeHandle as se,useRef as c,useState as ce}from"react";import le from"lodash/fp/isEmpty.js";import l from"lodash/fp/isFunction.js";import u from"lodash/fp/isString.js";import d from"lodash/fp/omit.js";import{jsx as f,jsxs as p}from"react/jsx-runtime";import*as m from"@radix-ui/react-scroll-area";import{UilAngleRight as ue}from"@tooni/iconscout-unicons-react";import{useClickOutside as h}from"@react-hookz/web";import g from"lodash/fp/constant.js";const _=o(({active:o=!1,align:_=`start`,children:v,condensed:de=!1,condensedItems:fe=!1,defaultOpen:y=!1,disabled:b=!1,elevation:x=ie,icon:S,label:C,labelElement:pe,onClose:w,onInteractOutside:T,onOpen:E,onSubMenuOpenChange:D,open:O,popover:k=!0,popup:A,rainbow:me=!0,side:j,triggerOnHover:M=!0,withIndicator:he=!0,withScroll:N=!0,...P},F)=>{let I=c(null),L=c(null);se(F,()=>({get content(){return L?.current??null},get trigger(){return I?.current??null}}));let R=c(null),z=!!v,[B,ge]=ce(O===!0&&z),V=e=>{if(b)return;let t=B;ge(g(e)),l(D)&&t!==e&&D(e),!t&&e&&l(E)&&E(),t&&!e&&l(w)&&w()},H=()=>{V(!0)},U=()=>{V(!1)},_e=()=>{V(!B)};oe(()=>{O===!0&&z?H():U()},[z,O]);let{condensed:ve,disabled:ye,orientation:be,rainbow:xe}=s(ae),{condensed:Se,disabled:Ce,rainbow:we}=s(a),W=b||Ce||ye,Te=de||Se||ve,G=me&&we&&xe,Ee=e=>{let{target:t}=e;t===window||t==null||((I?.current?.contains(t)||L?.current?.contains(t))&&e.preventDefault(),l(T)&&T(e))},K=e=>{l(P.onKeyDown)&&P.onKeyDown(e),(e.key===`Enter`||e.key===` `)&&H()},q=()=>{M&&H()},J=()=>{M&&U()};h(R,()=>{U()});let Y=u(C)?C:te(C),X=p(r,{ref:I,"aria-label":Y,className:t(`${e}-${i}__sub-menu__trigger`,`flex w-full flex-row items-center gap-1`,`rounded-sm outline-none transition-background-color duration-300 ease-out`,Te?`max-h-6 px-2 py-1`:`p-2`,S?`${e}-${i}__sub-menu__trigger--with-icon`:``,W?`${e}-${i}__sub-menu__trigger--disabled pointer-events-none cursor-not-allowed !bg-transparent text-disabled`:`cursor-pointer text-dark`,A?.trigger?.className),element:`div`,role:`menuitem`,tabIndex:-1,title:Y,...k?M?{onClick:e=>e.preventDefault(),onMouseEnter:q}:{}:{onClick:_e},style:A?.trigger?.style,onKeyDown:K,children:[S&&f(`div`,{className:t(`fractal-menu__item__icon`,`max-h-3 max-w-3`),children:S}),f(r,{className:t(`flex-1`,b?`cursor-not-allowed`:`cursor-pointer`),element:pe||(u(C)?`label`:`div`),children:C}),he&&f(`div`,{className:t(`fractal-menu__sub-menu__indicator`,`max-h-3 max-w-3`),children:f(ue,{})})]}),Z=f(r,{className:t(`${e}-${i}__sub-menu__items`,`relative overflow-hidden rounded-sm p-1`,W?`${e}-${i}__sub-menu__items--disabled`:G?ee:``),element:`div`,children:f(a.Provider,{value:{condensed:fe,disabled:W,rainbow:G},children:v})}),Q=f(`div`,{ref:L,className:n(`${e}-${i}__sub-menu__content`,`w-full`,W?`${e}-${i}__sub-menu__content--disabled`:``,z?``:`${e}-${i}__sub-menu__content--empty invisible`,A?.content?.className),style:A?.content?.style,children:N?p(m.Root,{className:`${e}-${i}__sub-menu__content__scrollarea`,...P.dir===void 0?{}:{dir:P.dir},type:`hover`,children:[f(m.Viewport,{className:t(`${e}-${i}__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}-${i}__sub-menu__content__scrollarea__scrollbar--y)]:w-[calc(100%-theme(spacing.1)+theme(spacing.quarter))]`),style:{overflowY:void 0},children:Z}),f(m.Scrollbar,{className:t(`${e}-${i}__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:f(m.Thumb,{className:t(`${e}-${i}__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`)})})]}):Z}),$=n(`${e}-${i}__sub-menu`,W?`${e}-${i}__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?f(re,{align:_,className:n(`${e}-${i}__sub-menu__popup`,`${e}-${i}__sub-menu__popup--popover`,G?`alternatee`:W?``:`hover:bg-decorative-pink-90`,`rounded-sm`,P.className),"data-highlighted":o||B||void 0,disabled:b,elevation:x,fullWidth:!0,popover:{className:$,style:A?.style},side:le(j)?be===`vertical`?`right`:`bottom`:j,style:{...P.style,...A?.style},trigger:X,withArrow:!1,withCloseButton:!1,withScroll:N,onClose:w,onInteractOutside:Ee,onOpen:E,onOpenChange:V,...y?{defaultOpen:!0}:{},...b?{open:!1}:{open:B},onMouseLeave:J,...d([`className`,`style`],P),children:Q}):p(`div`,{ref:R,className:n(`${e}-${i}__sub-menu__popup`,`${e}-${i}__sub-menu__popup--non-popover`,`alternatee`,`relative rounded-sm outline-none transition-background-color duration-300 ease-out`,P.className,A?.className),"data-highlighted":o||B||void 0,style:{...P.style,...A?.style},onMouseEnter:q,onMouseLeave:J,...d([`className`,`style`],P),children:[f(`div`,{className:n(`${e}-${i}__sub-menu__popup__trigger-wrapper`,A?.trigger?.wrapper?.className),style:A?.trigger?.wrapper?.style,children:X}),f(`div`,{className:n(`${e}-${i}__sub-menu__popup__content-positionner`,`absolute left-full top-0 z-[5000] pl-2`,B?``:`hidden`,A?.content?.positionner?.className),style:A?.content?.positionner?.style,children:f(ne,{className:n(`${e}-${i}__sub-menu__popup__content-wrapper`,`p-0`,A?.content?.wrapper?.className),elevation:x,style:A?.content?.wrapper?.style,children:f(`div`,{className:$,children:Q})})})]})});_.displayName=`SubMenu`;export{_ as SubMenu,_ as default};
//# sourceMappingURL=SubMenu.js.map