UNPKG

@snowball-tech/fractal

Version:

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

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