@snowball-tech/fractal/dist/Select/Select.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 ee}from"../helpers-DBEwVIlX.js";import{Typography as r}from"../Typography/Typography.js";import{r as te}from"../utils-K22C_6qC.js";import{GROUP_NAME as i}from"./Select.constants.js";import{SelectContext as a}from"./SelectContext.js";import{forwardRef as o,useEffect as s,useId as ne,useImperativeHandle as c,useRef as l,useState as u}from"react";import d from"lodash/fp/isEmpty.js";import f from"lodash/fp/isFunction.js";import p from"lodash/fp/isString.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-select";import{Label as re}from"@radix-ui/react-label";import*as y from"@radix-ui/react-scroll-area";import{UilAngleDown as ie}from"@tooni/iconscout-unicons-react";const b=o(({autoFocus:o=!1,children:b,defaultValue:x,description:S,disabled:C=!1,displayedValue:w,dropdown:T={},fullWidth:E=!1,id:ae,label:D,labelElement:O,name:oe,onClose:k,onOpen:A,onSelect:j,open:M,placeholder:N,portalled:P,rainbow:F=!0,readOnly:I=!1,required:L=!1,value:R,...z},se)=>{let B=ne(),V=(ae??B)||B,[H,U]=u(null),W=l(null),G=l(null);c(se,()=>({get container(){return H??null},get dropdown(){return G?.current??null},get trigger(){return W?.current??null}}));let K=!C&&!I,[q,J]=u(M===!0);s(()=>{J(M===!0)},[M]);let ce=e=>{f(j)&&j(e)},Y=e=>{K&&(J(e),e&&f(A)&&A(),!e&&f(k)&&k())},le=()=>{Y(!q)},ue=e=>{f(T.onPointerDownOutside)&&T.onPointerDownOutside(e);let{target:t}=e;t===window||t==null||(H?.contains(t)||G?.current?.contains(t))&&e.preventDefault()},X=!h(H?.closest(`.${e}-dialog__content`)),Z=!h(H?.closest(`.${e}-input-phone__fields__phone-prefix`)),Q=g(v.Content,{ref:G,align:`center`,asChild:!0,className:n(`${e}-${i}__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%")]`,T?.className),collisionBoundary:X?[H?.closest(`.fractal-dialog__content`)??null,...Array.isArray(T.collisionBoundary)?T.collisionBoundary:d(T.collisionBoundary)?[]:[T.collisionBoundary]].filter(Boolean):Array.isArray(T.collisionBoundary)?T.collisionBoundary:d(T.collisionBoundary)?[]:[T.collisionBoundary],collisionPadding:T.collisionPadding??X?{bottom:Z?64:56,left:16,right:16,top:Z?64:56}:0,position:`popper`,side:`bottom`,style:{display:void 0,...z.style},onPointerDownOutside:ue,...m([`className`,`onPointerDownOutside`,`collisionBoundary`,`collisionPadding`],T),children:_(y.Root,{className:`${e}-${i}__dropdown__scrollarea`,...z.dir===void 0?{}:{dir:z.dir},type:`hover`,children:[g(v.Viewport,{asChild:!0,children:g(y.Viewport,{className:t(`${e}-${i}__dropdown__scrollarea__viewport`,`relative h-full max-h-[calc(var(--radix-popper-available-height)-theme(spacing.4))] w-full overflow-auto [&:has(+_.${e}-${i}__dropdown__scrollarea__scrollbar--y)]:w-[calc(100%-theme(spacing.1)+theme(spacing.quarter))]`),style:{overflowY:void 0},children:g(r,{className:F?ee:``,element:`div`,variant:`body-1`,children:g(a.Provider,{value:{disabled:C,rainbow:F},children:b})})})}),g(y.Scrollbar,{className:t(`${e}-${i}__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:g(y.Thumb,{className:t(`${e}-${i}__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`)})})]})}),de=h(P)?!X:P,$=p(D)?D:te(D);return _(`div`,{ref:e=>U(e),className:n(`${e}-${i}`,`flex w-full max-w-full flex-col gap-1`,`${e}-${i}--${K?``:`not-`}writable`,`${e}-${i}--${q?`opened`:`closed`}`,C?`${e}-${i}--disabled`:``,E?`${e}-${i}--full-width`:`sm:w-fit`,I?`${e}-${i}--readonly`:``,L?`${e}-${i}--required`:``,``,z.className),children:[D?g(re,{asChild:!0,className:t(`${e}-${i}__label`,`block`,K?`cursor-pointer`:`cursor-default`,L?`${e}-${i}__label--required after:text-feedback-danger-50 after:content-required`:``),htmlFor:V,onClick:le,children:g(r,{element:O||(p(D)?`label`:`div`),children:D})}):!1,_(v.Root,{defaultOpen:o,disabled:!K,name:oe||V,open:q,required:L,...z.dir===void 0?{}:{dir:z.dir},...R===void 0?{}:{value:R},...x===void 0?{}:{defaultValue:x},onOpenChange:Y,onValueChange:ce,...m([`autoComplete`,`className`,`dir`],z),children:[g(v.Trigger,{id:V,ref:W,"aria-label":$,asChild:!0,className:t(`${e}-${i}__trigger`,`flex h-6 max-h-6 w-full min-w-0 items-center justify-between truncate 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`,K?`cursor-pointer border-normal bg-white`:`border-disabled bg-disabled-light`,C?`${e}-${i}__trigger--disabled cursor-not-allowed`:`hover:border-1 hover:shadow-hover`,!C&&q?`hover:shadow-over border-primary shadow-primary`:``,I?`cursor-default`:``),title:$,children:_(r,{element:`div`,children:[g(`div`,{className:t(`${e}-${i}__trigger__value`,`min-w-0 flex-1 [&>span>*]:truncate [&>span]:block`),children:d(w)?g(v.Value,{placeholder:N}):g(v.Value,{placeholder:N,children:w})}),g(v.Icon,{className:t(`${e}-${i}__trigger__indicator`,`h-full shrink-0 transition-transform duration-300 ease-out`,K?`text-dark`:`text-disabled`,q?`translate-x-0 translate-y-0 rotate-180`:``),children:g(ie,{className:`h-full`})})]})}),de?g(v.Portal,{children:Q}):Q]}),S&&g(r,{className:t(`fractal-select__description`,`cursor-default`),element:`div`,variant:`caption-median`,children:S})]})});b.displayName=`Select`;export{b as Select,b as default};
//# sourceMappingURL=Select.js.map