@snowball-tech/fractal/dist/src/components/Dropdown/SubDropdown.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{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 d,useImperativeHandle as f,useRef as p,useState as m}from"react";import h from"lodash/fp/isFunction.js";import g from"lodash/fp/omit.js";import{jsx as _,jsxs as v}from"react/jsx-runtime";import*as y from"@radix-ui/react-scroll-area";import{UilAngleRight as b}from"@tooni/iconscout-unicons-react";const x=l(({children:l,condensed:x=!1,condensedItems:S=!1,content:C,defaultOpen:w=!1,disabled:T=!1,icon:E,label:D,onClick:O,onClose:k,onInteractOutside:A,onOpen:j,onSubMenuOpenChange:M,open:N,rainbow:ee=!0,withIndicator:P=!0,withScroll:F=!0,...I},L)=>{let R=p(null),z=p(null);f(L,()=>({get content(){return z?.current??null},get trigger(){return R?.current??null}}));let B=!!l,[V,H]=m(N===!0),U=e=>{if(T)return;let t=V;H(e),h(M)&&t!==e&&M(e),!t&&e&&h(j)&&j(),t&&!e&&h(k)&&k()};d(()=>{U(N===!0)},[B,N]);let{condensed:W,disabled:G,rainbow:K}=u(o),{condensed:q,disabled:J,rainbow:Y}=u(s),X=T||J||G,Z=x||q||W,Q=ee&&Y&&K,te=e=>{let{target:t}=e;t===window||t==null||((R?.current?.contains(t)||z?.current?.contains(t))&&e.preventDefault(),h(A)&&A(e))},$=_(i,{className:n(`${e}-${a}__sub-menu__items`,T?`${e}-${a}__sub-menu__items--disabled`:Q?t:``),element:`div`,children:_(s.Provider,{value:{condensed:S,disabled:T,rainbow:Q},children:l})});return v(c.Sub,{...w?{defaultOpen:!0}:{},...T?{open:!1}:{open:V},onOpenChange:U,children:[_(c.SubTrigger,{ref:R,asChild:!0,className:r(`${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`,E?`${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:O,...g([`className`],I),children:v(`div`,{className:n(`${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:[E&&_(`div`,{className:n(`fractal-dropdown__sub-menu__icon`,`max-h-3 max-w-3`),children:E}),_(i,{className:n(`flex-1`,X?`cursor-not-allowed`:`cursor-pointer`),element:`label`,children:D}),P&&_(`div`,{className:n(`fractal-dropdown__sub-menu__indicator`,`max-h-3 max-w-3`),children:_(b,{})})]})}),_(c.Portal,{children:_(c.SubContent,{ref:z,className:r(`${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`,C?.className),loop:!0,style:{display:void 0,...C?.style},onInteractOutside:te,...g([`asChild`,`className`,`style`,`onInteractOutside`],C),children:F?v(y.Root,{className:`${e}-${a}__sub-menu__content__scrollarea`,...I.dir===void 0?{}:{dir:I.dir},type:`hover`,children:[_(y.Viewport,{className:n(`${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:$}),_(y.Scrollbar,{className:n(`${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:_(y.Thumb,{className:n(`${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`)})})]}):$})})]})});x.displayName=`SubDropdown`;export{x as default};
//# sourceMappingURL=SubDropdown.js.map