@snowball-tech/fractal/dist/Autocomplete/Autocomplete.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}from"../helpers-DBEwVIlX.js";import{Typography as r}from"../Typography/Typography.js";import{Dropdown as i}from"../Dropdown/Dropdown.js";import{InputText as ee}from"../InputText/InputText.js";import{GROUP_NAME as a}from"./Autocomplete.constants.js";import{forwardRef as o,useEffect as s,useId as c,useImperativeHandle as te,useRef as l,useState as u}from"react";import d from"lodash/fp/isFunction.js";import f from"lodash/fp/isString.js";import p from"lodash/fp/omit.js";import{jsx as m,jsxs as h}from"react/jsx-runtime";import{Label as ne}from"@radix-ui/react-label";import g from"lodash/fp/isError.js";const _=o(({autoFocus:o=!1,children:_,defaultValue:v,description:y,disabled:b=!1,dropdown:x={},error:S,fullWidth:C=!1,id:re,label:w,labelElement:T,name:ie,onBlur:E,onChange:D,onClose:O,onInputChange:k,onOpen:A,open:j,placeholder:M,readOnly:N=!1,required:P=!1,success:F,value:I,...L},ae)=>{let R=c(),z=(re??R)||R,B=l(null),V=l(null),H=l(null);te(ae,()=>({get container(){return V?.current??null},get dropdown(){return H?.current??null},get input(){return B?.current??null}}));let U=!!_,[W,G]=u(!1),[K,q]=u(j===!0||U&&j!==!1),oe=g(S)?S.message:S,J=S!==!0&&!!oe,Y=F!==!0&&!!F,X=J||S===!0||g(S),Z=(Y||F===!0)&&!X,se=(e,t)=>{K||G(!0),d(k)&&k(e,t),d(D)&&D(e,t)},Q=e=>{q(e)};s(()=>{Q(!!(j===!0||U&&j!==!1))},[U,j]);let ce=e=>{let{target:t}=e;t===window||t==null||(V?.current?.contains(t)||H?.current?.container?.contains(t)||H?.current?.dropdown?.contains(t)?e.preventDefault():K&&d(E)&&B.current?.blur())},$=e=>{d(x.onPointerDownOutside)&&x.onPointerDownOutside(e),B?.current&&(G(!1),B.current.blur())},le=()=>{W?(G(!1),B?.current&&B.current.focus()):d(E)&&!K&&E()},ue=e=>{switch(e.stopPropagation(),d(L.onKeyDown)&&L.onKeyDown(e),e.key){case`ArrowDown`:case`ArrowUp`:if(!U)return;K?H?.current&&H.current.dropdown?.focus():(G(!0),Q(!0)),e.preventDefault();break;case`Enter`:e.preventDefault(),d(D)&&D(null,String(I));break;case`Escape`:e.preventDefault(),K?Q(!1):B?.current&&(G(!1),B.current.blur());break;default:break}},de=e=>{e.key===`Escape`&&B?.current&&document.activeElement===B.current&&G(!0)},fe=e=>{L.onClick&&L.onClick(e),B?.current&&document.activeElement!==B.current&&B.current.focus(),U&&(document.activeElement===B.current&&!K&&G(!0),Q(!0))},pe=e=>{L.onFocus&&L.onFocus(e),U&&(K||G(!0),Q(!0))},me=!b&&!N;return h(`div`,{ref:V,className:n(`${e}-${a}`,`flex w-full max-w-full flex-col`,`${e}-${a}--${me?``:`not-`}writable`,b?`${e}-${a}--disabled`:``,C?`${e}-${a}--full-width`:`sm:w-fit`,X?`${e}-${a}--with-error`:``,N?`${e}-${a}--readonly`:``,P?`${e}-${a}--required`:``,Z?`${e}-${a}--with-success`:``,L.className),children:[w&&m(ne,{asChild:!0,className:t(`fractal-autocomplete__label`,b?`fractal-autocomplete__label--disabled cursor-default`:`cursor-pointer`,P?`fractal-autocomplete__label--required after:text-feedback-danger-50 after:content-required`:``),htmlFor:z,children:m(r,{element:T||(f(w)?void 0:`div`),children:w})}),m(i,{ref:H,align:`end`,disabled:b,dropdown:{className:n(`${e}-${a}__dropdown`,x.className),onPointerDownOutside:$,style:{marginTop:0},...p([`className`,`onPointerDownOutside`],x)},fullWidth:C,...d(O)?{onClose:O}:{},...d(A)?{onOpen:A}:{},open:K,toggleOnTriggerClick:!1,trigger:m(ee,{id:z,ref:B,autoFocus:o,className:t(`${e}-${a}__input`,`my-1`),...v===void 0?{}:{defaultValue:v},disabled:b,error:X,fullWidth:C,name:ie||z,...M===void 0?{}:{placeholder:M},readOnly:N,required:P,selectOnFocus:!1,success:Z,type:`text`,...I===void 0?{}:{value:I},onBlur:le,onChange:se,onClick:fe,onFocus:pe,onKeyDown:ue,...p([`className`,`onBlur`,`onKeyDown`,`onFocus`,`onClick`],L)}),width:`trigger`,withIndicator:!1,onInteractOutside:ce,onKeyDown:de,onMenuOpenChange:Q,children:_}),y&&!J&&!Y&&m(r,{className:t(`fractal-autocomplete__description`,`cursor-default text-dark`),variant:`caption-median`,children:y}),(J||Y)&&m(r,{className:t(`fractal-autocomplete__message fractal-autocomplete__message--${X?`error`:`success`}`,`cursor-default text-dark`),value:`caption-median`,children:X?g(S)?S.message:S:F})]})});_.displayName=`Autocomplete`;export{_ as Autocomplete,_ as default};
//# sourceMappingURL=Autocomplete.js.map