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

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

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