@snowball-tech/fractal/dist/Dropdown/SubDropdown.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 r}from"../helpers-DBEwVIlX.js";import{Typography as i}from"../Typography/Typography.js";import{GROUP_NAME as a}from"./Dropdown.constants.js";import{DropdownContext as o}from"./DropdownContext.js";import{DropdownGroupContext as s}from"./DropdownGroupContext.js";import*as c from"@radix-ui/react-dropdown-menu";import{forwardRef as l,useContext as u,useEffect as ee,useImperativeHandle as d,useRef as f,useState as p}from"react";import m from"lodash/fp/isFunction.js";import h from"lodash/fp/omit.js";import{jsx as g,jsxs as _}from"react/jsx-runtime";import*as v from"@radix-ui/react-scroll-area";import{UilAngleRight as y}from"@tooni/iconscout-unicons-react";const b=l(({children:l,condensed:b=!1,condensedItems:x=!1,content:S,defaultOpen:C=!1,disabled:w=!1,icon:T,label:E,onClick:D,onClose:O,onInteractOutside:k,onOpen:A,onSubMenuOpenChange:j,open:M,rainbow:N=!0,withIndicator:P=!0,withScroll:F=!0,...I},L)=>{let R=f(null),z=f(null);d(L,()=>({get content(){return z?.current??null},get trigger(){return R?.current??null}}));let B=!!l,[V,H]=p(M===!0),U=e=>{if(w)return;let t=V;H(e),m(j)&&t!==e&&j(e),!t&&e&&m(A)&&A(),t&&!e&&m(O)&&O()};ee(()=>{U(M===!0)},[B,M]);let{condensed:W,disabled:G,rainbow:K}=u(o),{condensed:q,disabled:J,rainbow:Y}=u(s),X=w||J||G,Z=b||q||W,Q=N&&Y&&K,te=e=>{let{target:t}=e;t===window||t==null||((R?.current?.contains(t)||z?.current?.contains(t))&&e.preventDefault(),m(k)&&k(e))},$=g(i,{className:t(`${e}-${a}__sub-menu__items`,w?`${e}-${a}__sub-menu__items--disabled`:Q?r:``),element:`div`,children:g(s.Provider,{value:{condensed:x,disabled:w,rainbow:Q},children:l})});return _(c.Sub,{...C?{defaultOpen:!0}:{},...w?{open:!1}:{open:V},onOpenChange:U,children:[g(c.SubTrigger,{ref:R,asChild:!0,className:n(`${e}-${a}__sub-menu`,`flex w-full flex-row items-center gap-1`,`rounded-sm outline-none transition-background-color duration-300 ease-out`,Z?`max-h-6 px-2 py-1`:`p-2`,T?`${e}-${a}__sub-menu__with-icon`:``,X?`${e}-${a}__sub-menu--disabled cursor-not-allowed !bg-transparent text-disabled`:`cursor-pointer text-dark`,I.className),onClick:D,...h([`className`],I),children:_(`div`,{className:t(`${e}-${a}__sub-menu__label`,Q?`alternatee`:``,`flex w-full flex-row items-center gap-1`,X?`${e}-${a}__sub-menu__label--disabled cursor-not-allowed text-disabled`:`cursor-pointer`,!X&&!Q?`hover:bg-decorative-pink-90`:``),children:[T&&g(`div`,{className:t(`fractal-dropdown__sub-menu__icon`,`max-h-3 max-w-3`),children:T}),g(i,{className:t(`flex-1`,X?`cursor-not-allowed`:`cursor-pointer`),element:`label`,children:E}),P&&g(`div`,{className:t(`fractal-dropdown__sub-menu__indicator`,`max-h-3 max-w-3`),children:g(y,{})})]})}),g(c.Portal,{children:g(c.SubContent,{ref:z,className:n(`${e}-${a}__sub-menu__content`,`pointer-events-auto relative z-50 -mt-1 overflow-hidden rounded-sm border-1 border-normal bg-white p-1 data-[side="bottom"]:mt-1 data-[side="left"]:mr-2 data-[side="right"]:ml-2 data-[side="top"]:mb-1`,B?``:`${e}-${a}__sub-menu__content--empty invisible`,S?.className),loop:!0,style:{display:void 0,...S?.style},onInteractOutside:te,...h([`asChild`,`className`,`style`,`onInteractOutside`],S),children:F?_(v.Root,{className:`${e}-${a}__sub-menu__content__scrollarea`,...I.dir===void 0?{}:{dir:I.dir},type:`hover`,children:[g(v.Viewport,{className:t(`${e}-${a}__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}-${a}__sub-menu__content__scrollarea__scrollbar--y)]:w-[calc(100%-theme(spacing.1)+theme(spacing.quarter))]`),style:{overflowY:void 0},children:$}),g(v.Scrollbar,{className:t(`${e}-${a}__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:g(v.Thumb,{className:t(`${e}-${a}__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`)})})]}):$})})]})});b.displayName=`SubDropdown`;export{b as SubDropdown,b as default};
//# sourceMappingURL=SubDropdown.js.map