react-forminate/dist/index-DGP5vskW.cjs

React.js + Typescript package that creates dynamic UI forms based on the JSON schema

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./index-BHL74Jf6.cjs"),s=require("react");;/* empty css                       */const P=C=>{const{processedProps:i,fieldParams:k,eventHandlers:h,fieldValue:p,fieldId:a,dynamicOptions:S,fieldErrors:y,setValue:w,validateField:D}=l.useField(C),[o,u]=s.useState(!1),[d,m]=s.useState(""),[n,x]=s.useState([]),[r,b]=s.useState(-1),E=s.useRef(null),g=s.useRef(null),j=s.useRef(null),f=s.useMemo(()=>{const e=S?.[a]||i.options||[];return typeof e[0]=="string"?e.map(t=>({label:t,value:t})):e},[S,a,i.options]),$=l.useDebouncedCallback(e=>m(e),i.debounceSearch||300),v=s.useMemo(()=>d?f.filter(e=>e.label.toLowerCase().includes(d.toLowerCase())):f,[f,d]);s.useEffect(()=>{p!==void 0&&x(Array.isArray(p)?p:[p])},[p]),s.useEffect(()=>{const e=t=>{E.current&&!E.current.contains(t.target)&&(u(!1),m(""))};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]),s.useEffect(()=>{o&&g.current&&(g.current.focus(),b(-1))},[o]),s.useEffect(()=>{if(r>=0&&j.current){const e=j.current.querySelectorAll(".multiselect-option-item");e[r]&&e[r].scrollIntoView({block:"nearest",behavior:"smooth"})}},[r]),s.useEffect(()=>{h.customHandlers?.onChangeItems&&h.customHandlers.onChangeItems(n,a)},[n]),s.useEffect(()=>{h.customHandlers?.onSearch&&h.customHandlers.onSearch(f,n,a,d)},[d]);const N=e=>{if(!o){["ArrowDown","ArrowUp","Enter"," "].includes(e.key)&&(u(!0),e.preventDefault());return}switch(e.key){case"ArrowDown":b(t=>Math.min(t+1,v.length-1)),e.preventDefault();break;case"ArrowUp":b(t=>Math.max(t-1,-1)),e.preventDefault();break;case"Enter":case" ":r>=0&&r<v.length&&R(v[r].value),e.preventDefault();break;case"Escape":u(!1),m(""),e.preventDefault();break;case"Tab":u(!1),m("");break}},I=()=>{u(!o),m("")},R=e=>{const t=n.includes(e)?n.filter(c=>c!==e):[...n,e];x(t),w(a,t),i?.validateOnChange&&D(a,t)},O=(e,t)=>{t.stopPropagation();const c=n.filter(M=>M!==e);x(c),w(a,c)},A=e=>{e.stopPropagation(),x([]),w(a,[]),u(!1)};return l.jsxRuntimeExports.jsxs("div",{className:`multiselect-wrapper ${i.className||""}`,ref:E,onKeyDown:N,role:"combobox","aria-haspopup":"listbox","aria-expanded":o,"aria-owns":`${a}-dropdown`,"aria-controls":`${a}-dropdown`,...k,children:[l.jsxRuntimeExports.jsxs("div",{className:`form-element multiselect-input-container ${y?"form-element-error":""} ${o?"multiselect-input-container-open":""}`,onClick:I,tabIndex:0,children:[n.length===0?l.jsxRuntimeExports.jsx("span",{className:"multiselect-placeholder",children:i.placeholder||"Select options"}):n.map(e=>{const t=f.find(c=>c.value===e);return l.jsxRuntimeExports.jsxs("div",{className:"multiselect-selected-tag",children:[t?t.label:e,l.jsxRuntimeExports.jsx("span",{className:"multiselect-remove-tag",onClick:c=>O(e,c),"aria-label":`Remove ${t?.label||e}`,children:"×"})]},e)}),i.showClearAll&&n.length>0&&l.jsxRuntimeExports.jsx("button",{type:"button",className:"multiselect-clear-all",onClick:A,"aria-label":"Clear all selections",onKeyDown:e=>e.stopPropagation(),children:"Clear all"}),l.jsxRuntimeExports.jsx("span",{className:`multiselect-chevron-icon ${o?"multiselect-chevron-icon-open":""}`,"aria-hidden":"true",children:"▼"})]}),l.jsxRuntimeExports.jsxs("div",{className:`multiselect-dropdown ${o?"":"multiselect-dropdown-hidden"}`,ref:j,role:"listbox",id:`${a}-dropdown`,"aria-multiselectable":"true",children:[l.jsxRuntimeExports.jsx("div",{className:"multiselect-search-container",children:l.jsxRuntimeExports.jsx("input",{ref:g,type:"text",className:"multiselect-search-input",placeholder:"Search...",value:d,onChange:e=>{m(e.target.value),$(e.target.value)},onClick:e=>e.stopPropagation(),"aria-label":"Search options",onKeyDown:e=>{e.key==="Escape"&&u(!1)}})}),v.map((e,t)=>l.jsxRuntimeExports.jsxs("div",{className:`multiselect-option-item ${n.includes(e.value)?"multiselect-option-selected":""} ${t===r?"multiselect-option-focused":""}`,onClick:()=>R(e.value),role:"option","aria-selected":n.includes(e.value),id:`${a}-option-${t}`,children:[e.label,n.includes(e.value)&&" ✓"]},e.value))]})]})},V=s.memo(P);exports.default=V;