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