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