UNPKG

@snowball-tech/fractal

Version:

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

3 lines 6.15 kB
'use client'; import{a as z}from"./chunk-IU2UNORC.js";import{a as r,b as C}from"./chunk-WB7Y43TN.js";import{e as S}from"./chunk-CTNPTC5G.js";import{a as A}from"./chunk-AOLTZ2WJ.js";import{b as e}from"./chunk-CMFNILWJ.js";import{a as i,b as P,c as W}from"./chunk-XYM7TA65.js";import*as s from"@radix-ui/react-dropdown-menu";import*as d from"@radix-ui/react-scroll-area";import{UilAngleDown as ie}from"@tooni/iconscout-unicons-react";import{forwardRef as se,useEffect as de,useImperativeHandle as pe,useRef as T,useState as ce}from"react";import g from"lodash/fp/isFunction";import G from"lodash/fp/isNumber";import fe from"lodash/fp/noop";import X from"lodash/fp/omit";import{jsx as t,jsxs as L}from"react/jsx-runtime";var Y=se(({align:J,asSelect:u=!1,children:F,condensed:I=!1,defaultOpen:K=!1,disabled:a=!1,dropdown:x={},elevation:v=C,fullWidth:k=!1,onClick:Q,onClose:V,onInteractOutside:q,onMenuOpenChange:B,onOpen:H,open:m,rainbow:O=!0,side:Z,toggleOnTriggerClick:w=!0,trigger:M,triggerAsButton:ee=!0,width:n="fit",withIndicator:$=!0,withScroll:re=!0,...h},oe)=>{let y=T(null),U=T(null),R=T(null);pe(oe,()=>({get container(){return y?.current??null},get dropdown(){return R?.current??null},get trigger(){return U?.current??null}}));let b=!!M,p=b||$,_=!!F,[c,te]=ce(m===!0||!p&&_&&m!==!1),D=o=>{if(a)return;let l=c;te(o),g(B)&&l!==o&&B(o),!l&&o&&g(H)&&H(),l&&!o&&g(V)&&V()};de(()=>{D(!!(m===!0||!p&&_&&m!==!1))},[_,p,m]);let ae=o=>{let{target:l}=o;l===window||l===null||l===void 0||((y?.current?.contains(l)||R?.current?.contains(l))&&o.preventDefault(),g(q)&&q(o))},f="max-w-[var(--radix-popper-available-width)]",E={};if(G(n))f="max-w-full",E={minWidth:`${n}px`,width:`${n}px`};else if(n.startsWith("*"))if(b){let o=n.slice(1);E={minWidth:`calc(${o} * var(--radix-popper-anchor-width))`,width:`calc(${o} * var(--radix-popper-anchor-width))`}}else f="w-fit",console.warn("The `width` prop is set to a fraction but no `trigger` is provided! Falling back to `auto` (which will fit the content)...");else{switch(n){case"fit":{f="w-fit";break}case"full":{f="w-[var(--radix-popper-available-width)]";break}default:{f=b?'w-[var(--radix-popper-anchor-width,"100%")]':"w-fit";break}}n==="trigger"&&!b&&console.warn("The `width` prop is set to `trigger` but no `trigger` is provided! Falling back to `auto` (which will fit the content)...")}let ne=G(v)?String(v):v,N=S[ne];Object.keys(S).includes(N)||(N=C);let le={"0":"rounded-sm shadow-none border-none",light:"rounded-sm shadow-none border-grey-70","1":"rounded-sm shadow-none","2":"rounded-sm shadow-subtle ml-quarter mb-quarter","3":"rounded-sm shadow-brutal ml-quarter mb-half"},j=t(A,{className:i(`${e}-${r}__dropdown__wrapper`,O?W:"",I?`${e}-${r}__dropdown__wrapper--condensed`:""),element:"div",variant:"body-1",children:t(z.Provider,{value:{condensed:I,disabled:a,rainbow:O},children:F})});return t("div",{ref:y,className:P(`${e}-${r}`,c?`${e}-${r}--opened`:`${e}-${r}--closed`,a?`${e}-${r}--disabled`:"",k?`${e}-${r}--full-width w-full`:"sm:w-fit",h.className),...X(["className","onClick"],h),children:L(s.Root,{...K?{defaultOpen:!0}:{},...a?{open:!1}:{open:c},modal:!1,onOpenChange:D,children:[t(s.Trigger,{ref:U,asChild:p,className:i(`${e}-${r}__trigger`,"w-full appearance-none text-left text-color-unset outline-none",n==="fit"||n==="full"?"":"max-w-[var(--radix-dropdown-menu-content-available-width)]",k?`${e}-${r}__trigger--full-width`:"",p?"flex items-center":"invisible h-0 max-h-0 border-y-0 py-0",a?`${e}-${r}__trigger--disabled cursor-default text-disabled`:"!cursor-pointer",w?"":"!cursor-default",u?"flex h-6 max-h-6 min-h-6 items-center rounded-sm border-1 border-normal px-2 py-unset transition-border-color duration-300 ease-out data-with-placeholder:text-placeholder":"border-none bg-unset px-unset py-unset",u&&!a?"cursor-pointer border-normal bg-white hover:border-1 hover:shadow-hover":"",u&&a?"cursor-not-allowed border-disabled bg-disabled-light":"",u&&!a&&c?"hover:shadow-over border-primary shadow-primary":""),disabled:!w,onPointerDown:p?fe:o=>{o.preventDefault(),o.stopPropagation()},children:p&&L(A,{className:i(`${e}-${r}__trigger__content`,"flex h-full w-full items-center justify-between",a?`${e}-${r}__trigger__content--disabled`:""),disabled:!w,element:w&&ee?"button":"div",onClick:Q,children:[M,$&&t("div",{className:i(`${e}-${r}__trigger__indicator`,"flex h-full items-center self-center transition-transform duration-300 ease-out",c?"rotate-180":""),children:t(ie,{className:"h-full"})})]})}),t(s.Portal,{children:c&&t(s.Content,{ref:R,align:J||($?"end":"center"),asChild:!0,className:P(`${e}-${r}__dropdown`,'pointer-events-auto relative z-50 overflow-hidden border-1 border-normal bg-white p-1 data-[side="bottom"]:mt-1 data-[side="left"]:mr-1 data-[side="right"]:ml-1 data-[side="top"]:mb-1',le[N],f,_?"":`${e}-${r}__dropdown--empty invisible`,x?.className),loop:!0,side:Z,style:{display:void 0,...E,...x.style},onInteractOutside:ae,...X(["align","asChild","className","side","style","onInteractOutside"],x),children:re?L(d.Root,{className:`${e}-${r}__dropdown__scrollarea`,...h.dir===void 0?{}:{dir:h.dir},type:"hover",children:[t(d.Viewport,{className:i(`${e}-${r}__dropdown__scrollarea__viewport`,`relative h-full max-h-[calc(var(--radix-popper-available-height)-theme(spacing.4))] w-full overflow-auto [&:has(+_.${e}-${r}__dropdown__scrollarea__scrollbar--y)]:w-[calc(100%-theme(spacing.1)+theme(spacing.quarter))]`),style:{overflowY:void 0},children:j}),t(d.Scrollbar,{className:i(`${e}-${r}__dropdown__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:t(d.Thumb,{className:i(`${e}-${r}__dropdown__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")})})]}):j})})]})})});Y.displayName="Dropdown";var Ee=Y;export{Y as a,Ee as b}; //# sourceMappingURL=chunk-GIEDMTVD.js.map