UNPKG

@snowball-tech/fractal

Version:

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

3 lines 4.93 kB
'use client'; import{a as r}from"./chunk-JVVBSAPQ.js";import{a as m}from"./chunk-HTOKQYVM.js";import{b as e}from"./chunk-CMFNILWJ.js";import{a,b as $,c as q}from"./chunk-XYM7TA65.js";import{Label as W}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 Z}from"@tooni/iconscout-unicons-react";import{forwardRef as ee,useEffect as re,useId as oe,useImperativeHandle as te,useRef as S,useState as le}from"react";import y from"lodash/fp/isEmpty";import p from"lodash/fp/isFunction";import H from"lodash/fp/omit";import{jsx as o,jsxs as h}from"react/jsx-runtime";var M=ee(({autoFocus:B=!1,children:U,defaultValue:v,description:N,disabled:f=!1,displayedValue:P,dropdown:u={},fullWidth:z=!1,id:G,label:C,name:X,onClose:D,onOpen:A,onSelect:T,open:b,placeholder:L,portalled:Y=!0,readOnly:g=!1,required:w=!1,value:E,...i},j)=>{let I=oe(),_=(G??I)||I,k=S(null),x=S(null),R=S(null);te(j,()=>({get container(){return x?.current??null},get dropdown(){return R?.current??null},get trigger(){return k?.current??null}}));let s=!f&&!g,[c,F]=le(b===!0);re(()=>{F(b===!0)},[b]);let J=l=>{p(T)&&T(l)},O=l=>{s&&(F(l),l&&p(A)&&A(),!l&&p(D)&&D())},K=()=>{O(!c)},Q=l=>{p(u.onPointerDownOutside)&&u.onPointerDownOutside(l);let{target:d}=l;d===window||d===null||d===void 0||(x?.current?.contains(d)||R?.current?.contains(d))&&l.preventDefault()},V=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:Q,...H(["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(m,{className:q,element:"div",variant:"body-1",children:U})})}),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:x,className:$(`${e}-${r}`,"flex w-full max-w-full flex-col gap-1",`${e}-${r}--${s?"":"not-"}writable`,`${e}-${r}--${c?"opened":"closed"}`,f?`${e}-${r}--disabled`:"",z?`${e}-${r}--full-width`:"sm:w-fit",g?`${e}-${r}--readonly`:"",w?`${e}-${r}--required`:"","",i.className),children:[y(C)?!1:o(W,{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:_,onClick:K,children:o(m,{element:"label",children:C})}),h(t.Root,{...v===void 0?{}:{defaultValue:v},defaultOpen:B,...i.dir===void 0?{}:{dir:i.dir},disabled:!s,name:X||_,open:c,required:w,...E===void 0?{}:{value:E},onOpenChange:O,onValueChange:J,...H(["autoComplete","className","dir"],i),children:[o(t.Trigger,{id:_,ref:k,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",f?`${e}-${r}__trigger--disabled cursor-not-allowed`:"hover:border-1 hover:shadow-hover",!f&&c?"hover:shadow-over border-primary shadow-primary":"",g?"cursor-default":""),children:h(m,{element:"div",children:[o("div",{className:a(`${e}-${r}__trigger__value`,"w-full flex-grow self-center"),children:y(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(Z,{className:"h-full"})})]})}),Y?o(t.Portal,{children:V}):V]}),!y(N)&&o(m,{className:a(`${e}-${r}__description`,"cursor-default"),element:"div",variant:"caption-median",children:N})]})});M.displayName="Select";var be=M;export{M as a,be as b}; //# sourceMappingURL=chunk-OU5TRAYM.js.map