@snowball-tech/fractal
Version:
Fractal's (Snowball's design system) React component library based on RadixUI and PandaCSS
3 lines • 5.95 kB
JavaScript
'use client';
import{a as U}from"./chunk-IU2UNORC.js";import{a as r,b as M}from"./chunk-Q4ACHLJ4.js";import{a as C}from"./chunk-HTOKQYVM.js";import{b as e}from"./chunk-CMFNILWJ.js";import{a as i,b as N,c as V}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 te}from"@tooni/iconscout-unicons-react";import{forwardRef as ae,useEffect as le,useImperativeHandle as ne,useRef as A,useState as ie}from"react";import g from"lodash/fp/isFunction";import se from"lodash/fp/isNumber";import de from"lodash/fp/noop";import O from"lodash/fp/omit";import{jsx as t,jsxs as E}from"react/jsx-runtime";var W=ae(({align:j,asSelect:u=!1,children:P,condensed:S=!1,defaultOpen:z=!1,disabled:a=!1,dropdown:x={},elevation:G=M,fullWidth:T=!1,onClick:X,onClose:F,onInteractOutside:I,onMenuOpenChange:L,onOpen:k,open:m,rainbow:q=!0,side:Y,toggleOnTriggerClick:w=!0,trigger:H,triggerAsButton:J=!0,width:l="fit",withIndicator:v=!0,withScroll:K=!0,...h},Q)=>{let $=A(null),Z=A(null),y=A(null);ne(Q,()=>({get container(){return $?.current??null},get dropdown(){return y?.current??null},get trigger(){return Z?.current??null}}));let b=!!H,p=b||v,_=!!P,[c,ee]=ie(m===!0||!p&&_&&m!==!1),R=o=>{if(a)return;let n=c;ee(o),g(L)&&n!==o&&L(o),!n&&o&&g(k)&&k(),n&&!o&&g(F)&&F()};le(()=>{R(!!(m===!0||!p&&_&&m!==!1))},[_,p,m]);let re=o=>{let{target:n}=o;n===window||n===null||n===void 0||(($?.current?.contains(n)||y?.current?.contains(n))&&o.preventDefault(),g(I)&&I(o))},f="max-w-[var(--radix-popper-available-width)]",D={};if(se(l))f="max-w-full",D={minWidth:`${l}px`,width:`${l}px`};else if(l.startsWith("*"))if(b){let o=l.slice(1);D={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(l){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}}l==="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 oe={"1":"rounded-sm shadow-none","2":"rounded-sm shadow-subtle ml-quarter mb-quarter","3":"rounded-sm shadow-brutal ml-quarter mb-half"},B=t(C,{className:i(`${e}-${r}__dropdown__wrapper`,q?V:"",S?`${e}-${r}__dropdown__wrapper--condensed`:""),element:"div",variant:"body-1",children:t(U.Provider,{value:{condensed:S,disabled:a,rainbow:q},children:P})});return t("div",{ref:$,className:N(`${e}-${r}`,c?`${e}-${r}--opened`:`${e}-${r}--closed`,a?`${e}-${r}--disabled`:"",T?`${e}-${r}--full-width w-full`:"sm:w-fit",h.className),...O(["className","onClick"],h),children:E(s.Root,{...z?{defaultOpen:!0}:{},...a?{open:!1}:{open:c},modal:!1,onOpenChange:R,children:[t(s.Trigger,{asChild:p,className:i(`${e}-${r}__trigger`,"w-full appearance-none text-left text-color-unset outline-none",l==="fit"||l==="full"?"":"max-w-[var(--radix-dropdown-menu-content-available-width)]",T?`${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?de:o=>{o.preventDefault(),o.stopPropagation()},children:p&&E(C,{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&&J?"button":"div",onClick:X,children:[H,v&&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(te,{className:"h-full"})})]})}),t(s.Portal,{children:c&&t(s.Content,{ref:y,align:j||(v?"end":"center"),asChild:!0,className:N(`${e}-${r}__dropdown`,oe[G],'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',f,_?"":`${e}-${r}__dropdown--empty invisible`,x?.className),loop:!0,side:Y,style:{display:void 0,...D,...x.style},onInteractOutside:re,...O(["align","asChild","className","side","style","onInteractOutside"],x),children:K?E(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:B}),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")})})]}):B})})]})})});W.displayName="Dropdown";var ve=W;export{W as a,ve as b};
//# sourceMappingURL=chunk-JCH6ZCER.js.map