https://mastodon.world/packs/form_fields-W-m7nFkb.js

1import{o as e}from"./rolldown-runtime-C0FnF6B9.js";import{t}from"./react-C21x__mS.js";import{a as n,c as r}from"./react-intl-DlKP8ATg.js";import{t as i}from"./jsx-runtime-BdxMnOeJ.js";import{i as a}from"./utils-B19lL5A9.js";import{t as o}from"./polymorphic-BHw2eKRx.js";import{t as s}from"./classnames-CfLRLWYq.js";import{t as c}from"./loading_indicator-eceYQNAM.js";import{t as l}from"./icon_button-DfNtv8BJ.js";import{t as u}from"./popover-CMoU7E4P.js";import{n as d}from"./copy_button-C2UVynmn.js";import{t as ee}from"./search-D6Fd2_4p.js";import{n as f,t as p}from"./keyboard_arrow_up-DMWxQ2V-.js";import{i as m,n as h,t as g}from"./emoji_picker_dropdown_container-DjOsXOL6.js";import{r as _,t as v}from"./form_field_wrapper-B00MNsQd.js";import{r as y,t as b}from"./text_input_field-Ch1_pDG1.js";import"./toggle_field-BH1KQwCE.js";var x=e(s()),S={stack:`_comp_form_fields_form_stack__stack`},C=i(),w=o(({as:e=`div`,children:t,className:n,...r},i)=>(0,C.jsx)(e,{ref:i,...r,className:(0,x.default)(n,S.stack),children:t}));w.displayName=`FormStack`;var T=e(t()),E=(0,T.forwardRef)(({id:e,label:t,hint:n,required:r,status:i,wrapperClassName:a,...o},s)=>(0,C.jsx)(v,{label:t,hint:n,required:r,status:i,inputId:e,className:a,children:e=>(0,C.jsx)(D,{...o,...e,ref:s})}));E.displayName=`TextAreaField`;var D=(0,T.forwardRef)(({className:e,onKeyDown:t,autoSize:n,...r},i)=>{let a=(0,T.useCallback)(e=>{t?.(e),e.key===`Enter`&&(e.ctrlKey||e.metaKey)&&e.currentTarget.form?.requestSubmit()},[t]);return n?(0,C.jsx)(h,{...r,onKeyDown:a,className:(0,x.default)(e,y.input),ref:i}):(0,C.jsx)(`textarea`,{...r,onKeyDown:a,className:(0,x.default)(e,y.input),ref:i})});D.displayName=`TextArea`;var te={checkbox:`_comp_form_fields_checkbox__checkbox`},O=(0,T.forwardRef)(({id:e,label:t,hint:n,status:r,required:i,wrapperClassName:a,...o},s)=>(0,C.jsx)(v,{label:t,hint:n,required:i,status:r,inputId:e,inputPlacement:`inline-start`,className:a,children:e=>(0,C.jsx)(k,{...o,...e,ref:s})}));O.displayName=`CheckboxField`;var k=(0,T.forwardRef)(({className:e,size:t,indeterminate:n,...r},i)=>{let a=(0,T.useRef)(null),o=(0,T.useCallback)(e=>{a.current=e,typeof i==`function`?i(e):i&&(i.current=e)},[i]);return(0,T.useEffect)(()=>{a.current&&(a.current.indeterminate=n||!1)},[n]),(0,C.jsx)(`input`,{...r,type:`checkbox`,className:te.checkbox,style:t?{"--size":`${t}px`}:void 0,ref:o})});k.displayName=`Checkbox`;function ne(...e){return(0,T.useCallback)(t=>{let n=[];for(let r of e)if(typeof r==`function`){let e=r(t);e&&n.push(e)}else r&&(r.current=t);return()=>{for(let e of n)e()}},[e])}var A={wrapper:`_comp_form_fields_combobox__wrapper`,input:`_comp_form_fields_combobox__input`,menuButton:`_comp_form_fields_combobox__menuButton`,popover:`_comp_form_fields_combobox__popover`,groupTitle:`_comp_form_fields_combobox__groupTitle`,menuItem:`_comp_form_fields_combobox__menuItem`,emptyMessage:`_comp_form_fields_combobox__emptyMessage`,loadingIndicator:`_comp_form_fields_combobox__loadingIndicator`},re=(0,T.createContext)(null);function j(){let e=(0,T.useContext)(re);if(e===null)throw Error(`useComboboxItemProps must be used within a Combobox component`);return e}var ie=({className:e,children:t})=>{let n=j();return(0,C.jsx)(`li`,{className:(0,x.default)(e,A.menuItem),...n,children:t})},ae=({className:e,children:t,...n})=>(0,C.jsx)(`li`,{...n,role:`presentation`,className:(0,x.default)(e,A.groupTitle),children:t}),M=(0,T.forwardRef)(({id:e,label:t,hint:n,status:r,required:i,wrapperClassName:a,...o},s)=>(0,C.jsx)(v,{label:t,hint:n,required:i,status:r,inputId:e,className:a,children:e=>(0,C.jsx)(N,{...o,...e,ref:s})}));M.displayName=`ComboboxField`;var N=(0,T.forwardRef)(({value:e,isLoading:t=!1,items:n,getItemId:i=e=>e.id,getIsItemDisabled:a,getIsItemSelected:o,disabled:s,renderGroupTitle:c,renderItem:d,onSelectItem:m,onFocus:h,onChange:g,onKeyDown:_,openOnFocus:v=!1,closeOnSelect:y=!0,suppressMenu:S=!1,icon:w=ee,className:E,...D},te)=>{let O=r(),k=(0,T.useRef)(null),[j,ie]=(0,T.useState)(null),[M,N]=(0,T.useState)(null),P=(0,T.useRef)(!1),[F,I]=(0,T.useState)(null),[le,L]=(0,T.useState)(!1),R=!Array.isArray(n),z=(0,T.useMemo)(()=>R?Object.values(n).flat().filter(e=>!!e):n,[R,n]),B=se({value:e,isLoading:t,itemCount:z.length}),V=!!B&&e.length>0&&z.length===0,H=!s&&!S&&(z.length>0||V),U=le&&H,W=(0,T.useCallback)(()=>

1{L(!0),j?.focus()},[j]),G=(0,T.useCallback)(()=>{L(!1)},[]),K=(0,T.useCallback)(e=>{if(I(e),e){let t=M?.querySelector(`[data-item-id='${e}']`);t&&M&&ce(t,M)}},[M]),q=(0,T.useCallback)(()=>{let e=z[0],t=e?i(e):null;K(t)},[z,i,K]);(0,T.useEffect)(()=>{z.length&&q()},[z,q]);let J=(0,T.useCallback)(e=>{v&&!P.current&&L(!0),h?.(e)},[h,v]),Y=(0,T.useCallback)(e=>{g(e),q(),L(!!e.target.value)},[g,q]),ue=(0,T.useCallback)(e=>{let{itemId:t}=e.currentTarget.dataset;t&&K(t)},[K]),X=(0,T.useCallback)(e=>{let t=z.find(t=>t.id===e);t&&((a?.(t)??!1)||(m(t),y&&(G(),P.current=!0,setTimeout(()=>{P.current=!1},50)))),j?.focus()},[z,j,a,m,y,G]),de=(0,T.useCallback)(e=>{let{itemId:t}=e.currentTarget.dataset;X(t??null)},[X]),Z=(0,T.useCallback)(()=>{X(F)},[F,X]),Q=(0,T.useCallback)(e=>{if(z.length===0)return;let t=z.findIndex(e=>i(e)===F);if(t===-1){if(e>0){let e=z.at(0);K(e?i(e):null)}else{let e=z.at(-1);K(e?i(e):null)}}else{let n=t+e;n>=z.length?n=0:n<0&&(n=z.length-1);let r=z[n];K(r?i(r):null)}},[i,K,F,z]),fe=(0,T.useCallback)(e=>{_?.(e),e.key===`ArrowUp`&&(e.preventDefault(),U?Q(-1):W()),e.key===`ArrowDown`&&(e.preventDefault(),U?Q(1):W()),e.key===`Tab`&&U&&(Z(),G()),e.key===`Enter`&&U&&(e.preventDefault(),Z()),e.key===`Escape`&&U&&(e.preventDefault(),G())},[G,U,Q,_,W,Z]),pe=e=>e.map(e=>{let t=i(e),n=a?.(e)??!1,r=t===F,s=o?o(e):r;return(0,C.jsx)(re.Provider,{value:{role:`option`,"data-highlighted":r,"aria-selected":s,"aria-disabled":n,"data-item-id":t,onMouseEnter:ue,onClick:de},children:d(e,{isSelected:s,isDisabled:n})},t)}),me=ne(te,ie),$=`${(0,T.useId)()}-list`;return(0,C.jsxs)(`div`,{className:A.wrapper,ref:k,children:[(0,C.jsx)(b,{role:`combobox`,...D,disabled:s,"aria-controls":$,"aria-expanded":U?`true`:`false`,"aria-haspopup":`listbox`,"aria-activedescendant":U&&F?F:void 0,"aria-autocomplete":`list`,autoComplete:`off`,spellCheck:`false`,value:e,onFocus:J,onChange:Y,onKeyDown:fe,icon:w??void 0,className:(0,x.default)(A.input,E),ref:me}),H&&(0,C.jsx)(l,{title:U?O.formatMessage({id:`combobox.close_results`,defaultMessage:`Close results`}):O.formatMessage({id:`combobox.open_results`,defaultMessage:`Open results`}),className:A.menuButton,icon:`results`,iconComponent:U?p:f,onClick:U?G:W}),(0,C.jsx)(`span`,{role:`status`,"aria-live":`polite`,className:`sr-only`,children:U&&B}),(0,C.jsx)(u,{matchReferenceWidth:!0,isOpen:U,onClose:G,offset:1,placement:`bottom-start`,strategy:`absolute`,popoverElement:M,reference:j,container:null,children:({props:e,placement:r})=>(0,C.jsx)(`div`,{...e,ref:N,className:(0,x.default)(A.popover,r),children:(0,C.jsx)(oe,{showStatus:V,isLoading:t,status:B,children:R?(0,C.jsx)(`div`,{role:`listbox`,id:$,tabIndex:-1,children:Object.keys(n).map(e=>{let t=n[e],r=`${$}-group-${e}`,i=c?.(e,r),a=i!==null;return t?.length?(0,C.jsxs)(`ul`,{role:`group`,"aria-labelledby":a?r:void 0,children:[a&&(i??(0,C.jsx)(ae,{id:r,children:e})),pe(t)]},e):null})}):(0,C.jsx)(`ul`,{role:`listbox`,id:$,tabIndex:-1,children:pe(n)})})})})]})});N.displayName=`Combobox`;var oe=({showStatus:e,status:t,isLoading:n,children:r})=>e?(0,C.jsxs)(`span`,{className:A.emptyMessage,children:[n&&(0,C.jsx)(`span`,{className:A.loadingIndicator,children:(0,C.jsx)(c,{role:`none`})}),t]}):r;function se({itemCount:e,value:t,isLoading:n}){let i=r();return n?i.formatMessage({id:`combobox.loading`,defaultMessage:`Loading`}):t.length&&!e?i.formatMessage({id:`combobox.no_results_found`,defaultMessage:`No results for this search`}):e>0?i.formatMessage({id:`combobox.results_available`,defaultMessage:`{count,plural,one{# suggestion available. Use up and down arrow keys to navigate. Press Enter key to select.} other{# suggestions available. Use up and down arrow keys to navigate. Press Enter key to select.}}`},{count:e}):``}var P=6;function ce(e,t){let n=e.offsetTop,r=n+e.offsetHeight;n<t.scrollTop?t.scrollTop=n-P:r>t.scrollTop+t.offsetHeight&&(t.scrollTop=r-t.offsetHeight+P)}var F={wrapper:`_comp_form_fields_copy_link_field__wrapper`,input:`_comp_form_fields_copy_link_field__input`,copyButton:`_comp_form_fields_copy_link_field__copyButton`},I=(0,T.forwardRef)(({id:e,label:t,hint:n,status:i,value:a,required:o,className:s,wrapperClassName:c,...l},u)=>{let ee=r(),f=(0,T.useRef)(null),p=(0,T.useCallback)(()=>{f.current?.select()},[]),m=(0,T.useCallback)(e=>{f.current=e,typeof u==`function`?u(e):u&&(u.current=e)},[u]);return(0,C.jsx)(v,{label:t,hint:n,required:o,status:i,inputId:e,className:c,children:e=>(0,C.jsxs)(`div`,{className:F.wrapper,children:[(0,C.jsx)(b,{readOnly:!0,...l,...e,ref:m,value:a,onFocus:p,className:(0,x.default)(s,F.input)}),(0,C.jsx)(d,{value:a,title:ee.formatMessage({id:`copy_icon_button.copy_this_text`,defaultMessage:`Copy link to clipboard`}),className:F.copyButton,"aria-describedby":e.id})]})})});I.displayName=`CopyLinkField`;var le=m(),L={counter:`_comp_character_counter__counter`,counterError:`_comp_character_counter__counterError`},R=o(({currentString:e,maxLength:t,as:r=`span`,recommended:i=!1,className:a,...o},s)=>{let c=(0,le.length)(e);return(0,C.jsx)(r,{...o,ref:s,className:(0,x.default)(a,L.counter,c>t&&!i&&L.counterError),children:i?(0,C.jsx)(n,{id:`character_counter.recommended`,defaultMessage:`{currentLength}/{maxLength} recommended characters`,values:{currentLength:c,maxLength:t}}):(0,C.jsx)(n,{id:`character_counter.required`,defaultMessage:`{currentLength}/{maxLength} characters`,values:{currentLength:c,maxLength:t}})})});R.displayName=`CharCounter`;var z=({onPick:e,disabled:t})=>{let n=(0,T.useCallback)(n=>{t||typeof n==`object`&&n&&(`native`in n&&typeof n.native==`string`?e(n.native):`shortcode`in n&&typeof n.shortcode==`string`&&e(`:${n.shortcode}:`))},[t,e]);return(0,C.jsx)(g,{onPickEmoji:n,disabled:t})}

1,B={fieldWrapper:`_comp_form_fields_emoji_text_field__fieldWrapper`},V=({onChange:e,value:t,label:n,hint:r,status:i,maxLength:a,counterMax:o=a,recommended:s,disabled:c,...l})=>{let u=(0,T.useRef)(null);return(0,C.jsx)(U,{label:n,hint:r,status:i,counterMax:o,recommended:s,disabled:c,inputRef:u,value:t,onChange:e,children:e=>(0,C.jsx)(b,{...e,...l,maxLength:a,value:t,ref:u})})},H=({onChange:e,value:t,label:n,maxLength:r,counterMax:i=r,recommended:a,disabled:o,hint:s,status:c,...l})=>{let u=(0,T.useRef)(null);return(0,C.jsx)(U,{label:n,hint:s,status:c,counterMax:i,recommended:a,disabled:o,inputRef:u,value:t,onChange:e,children:e=>(0,C.jsx)(D,{...l,...e,maxLength:r,value:t,ref:u})})},U=({value:e,onChange:t,children:n,disabled:r,inputRef:i,counterMax:o,recommended:s=!1,...c})=>{let l=(0,T.useId)(),u=(0,T.useCallback)(n=>{if(!e){t?.(``);return}let r=i.current?.selectionStart??e.length,o=a(e,n,r);t?.(o)},[i,e,t]),d=(0,T.useCallback)(e=>{t?.(e.target.value)},[t]);return(0,C.jsx)(v,{className:B.fieldWrapper,describedById:l,...c,children:t=>(0,C.jsxs)(C.Fragment,{children:[n({...t,onChange:d}),(0,C.jsx)(z,{onPick:u,disabled:r}),o&&(0,C.jsx)(R,{currentString:e??``,maxLength:o,recommended:s,id:l})]})})},W={radioButton:`_comp_form_fields_radio_button__radioButton`},G=(0,T.forwardRef)(({id:e,label:t,hint:n,status:r,required:i,wrapperClassName:a,...o},s)=>{let c=(0,T.useContext)(_);return(0,C.jsx)(v,{label:t,hint:n,required:i,status:r,inputId:e,className:a,inputPlacement:`inline-start`,children:e=>(0,C.jsx)(K,{...o,...e,name:o.name||c,ref:s})})});G.displayName=`RadioButtonField`;var K=(0,T.forwardRef)(({className:e,size:t,children:n,...r},i)=>(0,C.jsxs)(C.Fragment,{children:[n,(0,C.jsx)(`input`,{...r,type:`radio`,className:(0,x.default)(W.radioButton,e),style:t?{"--size":`${t}px`}:void 0,ref:i})]}));K.displayName=`RadioButton`;var q={wrapper:`_comp_form_fields_select__wrapper`,select:`_comp_form_fields_select__select`},J=(0,T.forwardRef)(({id:e,label:t,hint:n,required:r,status:i,inputPlacement:a,children:o,wrapperClassName:s,...c},l)=>(0,C.jsx)(v,{label:t,hint:n,required:r,status:i,inputId:e,inputPlacement:a,className:s,children:e=>(0,C.jsx)(Y,{...c,...e,ref:l,children:o})}));J.displayName=`SelectField`;var Y=(0,T.forwardRef)(({className:e,size:t,...n},r)=>(0,C.jsx)(`div`,{className:q.wrapper,children:(0,C.jsx)(`select`,{...n,className:(0,x.default)(e,q.select),ref:r})}));Y.displayName=`Select`;export{V as a,N as c,j as d,O as f,H as i,M as l,w as m,J as n,R as o,E as p,G as r,I as s,Y as t,ie as u};
2//# sourceMappingURL=form_fields-W-m7nFkb.js.map