@snowball-tech/fractal
Version:
Fractal's (Snowball's design system) React component library based on RadixUI and PandaCSS
3 lines • 5.04 kB
JavaScript
'use client';
import{a as M}from"./chunk-YWWK6PZ5.js";import{a as r}from"./chunk-JVVBSAPQ.js";import{a as f}from"./chunk-HTOKQYVM.js";import{b as e}from"./chunk-CMFNILWJ.js";import{a,b as $,c as H}from"./chunk-XYM7TA65.js";import{Label as ee}from"@radix-ui/react-label";import*as n from"@radix-ui/react-scroll-area";import*as t from"@radix-ui/react-select";import{UilAngleDown as re}from"@tooni/iconscout-unicons-react";import{forwardRef as oe,useEffect as te,useId as le,useImperativeHandle as ae,useRef as S,useState as ne}from"react";import v from"lodash/fp/isEmpty";import p from"lodash/fp/isFunction";import B from"lodash/fp/omit";import{jsx as o,jsxs as h}from"react/jsx-runtime";var U=oe(({autoFocus:z=!1,children:G,defaultValue:y,description:N,disabled:d=!1,displayedValue:P,dropdown:u={},fullWidth:X=!1,id:Y,label:C,name:j,onClose:D,onOpen:A,onSelect:T,open:g,placeholder:L,portalled:J=!0,rainbow:E=!0,readOnly:b=!1,required:w=!1,value:I,...i},K)=>{let k=le(),x=(Y??k)||k,F=S(null),_=S(null),R=S(null);ae(K,()=>({get container(){return _?.current??null},get dropdown(){return R?.current??null},get trigger(){return F?.current??null}}));let s=!d&&!b,[c,O]=ne(g===!0);te(()=>{O(g===!0)},[g]);let Q=l=>{p(T)&&T(l)},V=l=>{s&&(O(l),l&&p(A)&&A(),!l&&p(D)&&D())},W=()=>{V(!c)},Z=l=>{p(u.onPointerDownOutside)&&u.onPointerDownOutside(l);let{target:m}=l;m===window||m===null||m===void 0||(_?.current?.contains(m)||R?.current?.contains(m))&&l.preventDefault()},q=o(t.Content,{ref:R,align:"center",asChild:!0,className:$(`${e}-${r}__dropdown`,"pointer-events-auto relative z-50 mt-1 overflow-hidden rounded-sm border-1 border-normal bg-white p-1",'min-w-[var(--radix-popper-anchor-width,"100%")] w-[var(--radix-popper-anchor-width,"100%")]',u?.className),position:"popper",side:"bottom",style:{display:void 0,...i.style},onPointerDownOutside:Z,...B(["className","onPointerDownOutside"],u),children:h(n.Root,{className:`${e}-${r}__dropdown__scrollarea`,...i.dir===void 0?{}:{dir:i.dir},type:"hover",children:[o(t.Viewport,{asChild:!0,children:o(n.Viewport,{className:a(`${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:o(f,{className:E?H:"",element:"div",variant:"body-1",children:o(M.Provider,{value:{disabled:d,rainbow:E},children:G})})})}),o(n.Scrollbar,{className:a(`${e}-${r}__dropdown__scrollarea__scrollbar--y`,'[data-orientation="vertical"]:w-1 flex touch-none select-none rounded-r-sm bg-grey-90 p-quarter transition-background-color duration-300 ease-out hover:bg-grey-70'),orientation:"vertical",children:o(n.Thumb,{className:a(`${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")})})]})});return h("div",{ref:_,className:$(`${e}-${r}`,"flex w-full max-w-full flex-col gap-1",`${e}-${r}--${s?"":"not-"}writable`,`${e}-${r}--${c?"opened":"closed"}`,d?`${e}-${r}--disabled`:"",X?`${e}-${r}--full-width`:"sm:w-fit",b?`${e}-${r}--readonly`:"",w?`${e}-${r}--required`:"","",i.className),children:[v(C)?!1:o(ee,{asChild:!0,className:a(`${e}-${r}__label`,"block",s?"cursor-pointer":"cursor-default",w?`${e}-${r}__label--required after:text-feedback-danger-50 after:content-required`:""),htmlFor:x,onClick:W,children:o(f,{element:"label",children:C})}),h(t.Root,{...y===void 0?{}:{defaultValue:y},defaultOpen:z,...i.dir===void 0?{}:{dir:i.dir},disabled:!s,name:j||x,open:c,required:w,...I===void 0?{}:{value:I},onOpenChange:V,onValueChange:Q,...B(["autoComplete","className","dir"],i),children:[o(t.Trigger,{id:x,ref:F,asChild:!0,className:a(`${e}-${r}__trigger`,"flex h-6 max-h-6 items-center rounded-sm border-1 border-normal px-2 py-unset text-left outline-none transition-border-color duration-300 ease-out data-with-placeholder:text-placeholder",s?"cursor-pointer border-normal bg-white":"border-disabled bg-disabled-light",d?`${e}-${r}__trigger--disabled cursor-not-allowed`:"hover:border-1 hover:shadow-hover",!d&&c?"hover:shadow-over border-primary shadow-primary":"",b?"cursor-default":""),children:h(f,{element:"div",children:[o("div",{className:a(`${e}-${r}__trigger__value`,"w-full flex-grow self-center"),children:v(P)?o(t.Value,{placeholder:L}):o(t.Value,{placeholder:L,children:P})}),o(t.Icon,{className:a(`${e}-${r}__trigger__indicator`,"h-full self-center transition-transform duration-300 ease-out",s?"text-dark":"text-disabled",c?"rotate-180":""),children:o(re,{className:"h-full"})})]})}),J?o(t.Portal,{children:q}):q]}),!v(N)&&o(f,{className:a(`${e}-${r}__description`,"cursor-default"),element:"div",variant:"caption-median",children:N})]})});U.displayName="Select";var xe=U;export{U as a,xe as b};
//# sourceMappingURL=chunk-C6ZVGGW3.js.map