z-react-dynamic-form
Version:
A dynamic form builder for React applications with various input types and validation
1 lines • 122 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t,r=require("react/jsx-runtime"),s=require("react"),n=require("@hookform/resolvers"),a=require("react-hook-form"),o=require("clsx"),l=require("tailwind-merge"),i=require("axios"),c=require("react-dropzone"),d=require("react-file-icon"),u=require("date-fns"),m=require("zod"),p=function(e,t){for(var r={};e.length;){var s=e[0],n=s.code,o=s.message,l=s.path.join(".");if(!r[l])if("unionErrors"in s){var i=s.unionErrors[0].errors[0];r[l]={message:i.message,type:i.code}}else r[l]={message:o,type:n};if("unionErrors"in s&&s.unionErrors.forEach((function(t){return t.errors.forEach((function(t){return e.push(t)}))})),t){var c=r[l].types,d=c&&c[s.code];r[l]=a.appendErrors(l,t,r,n,d?[].concat(d,s.message):s.message)}e.shift()}return r},x=function(e,t,r){return void 0===r&&(r={}),function(s,a,o){try{return Promise.resolve(function(a,l){try{var i=Promise.resolve(e["sync"===r.mode?"parse":"parseAsync"](s,t)).then((function(e){return o.shouldUseNativeValidation&&n.validateFieldsNatively({},o),{errors:{},values:r.raw?s:e}}))}catch(e){return l(e)}return i&&i.then?i.then(void 0,l):i}(0,(function(e){if(function(e){return Array.isArray(null==e?void 0:e.errors)}(e))return{values:{},errors:n.toNestErrors(p(e.errors,!o.shouldUseNativeValidation&&"all"===o.criteriaMode),o)};throw e})))}catch(e){return Promise.reject(e)}}};function h(...e){return l.twMerge(o.clsx(e))}!function(e){e.VERIFIED="verified",e.SUCCESS="success"}(e||(e={})),exports.ControllerType=void 0,(t=exports.ControllerType||(exports.ControllerType={})).TEXT="text",t.EMAIL="email",t.PASSWORD="password",t.NUMBER="number",t.TEXTAREA="textarea",t.CHECKBOX="checkbox",t.RADIO="radio",t.SELECT="select",t.SEARCHABLE_SELECT="searchable-select",t.SELECT_FROM_API="select-from-api",t.SEARCHABLE_SELECT_FROM_API="searchable-select-from-api",t.MULTI_SELECT="multi-select",t.SEARCHABLE_MULTI_SELECT="searchable-multi-select",t.MULTI_SELECT_FROM_API="multi-select-from-api",t.SEARCHABLE_MULTI_SELECT_FROM_API="searchable-multi-select-from-api",t.DATE="date",t.DATE_OF_BIRTH="date-of-birth",t.TIME="time",t.DATETIME="datetime",t.FILE="file",t.IMAGE_UPLOAD="image-upload";const g=e=>e.reduce(((e,t)=>{if("groupControllers"in t&&t.groupControllers)t.groupControllers.forEach((t=>{t.name&&(e[t.name]=t.defaultValue||void 0)}));else{const r=t;r.name&&(e[r.name]=r.defaultValue||void 0)}return e}),{}),f=e=>e.reduce(((e,t)=>(t.controllers.forEach((t=>{if("groupControllers"in t&&t.groupControllers)t.groupControllers.forEach((t=>{t.name&&(e[t.name]=t.defaultValue||void 0)}));else{const r=t;r.name&&(e[r.name]=r.defaultValue||void 0)}})),e)),{}),b=(e,t)=>e?e.filter((e=>{return!!(void 0!==(r=e).display&&"function"==typeof r.display?r.display(t):void 0===r.visible||("function"==typeof r.visible?r.visible(t):!1!==r.visible))&&(e.groupControllers&&(e.groupControllers=b(e.groupControllers,t)),!0);var r})):[],y=e=>e<1024?`${e} B`:e<1048576?`${(e/1024).toFixed(2)} KB`:`${(e/1048576).toFixed(2)} MB`,v=e=>e&&e.split(".").pop()?.toLowerCase()||"",w={"application/pdf":[".pdf"],"application/vnd.openxmlformats-officedocument.wordprocessingml.document":[".docx"],"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":[".xlsx"],"application/msword":[".doc"],"application/vnd.ms-excel":[".xls"],"image/jpeg":[".jpg",".jpeg"],"image/png":[".png"],"image/gif":[".gif"],"text/plain":[".txt"]},j=s.createContext({isLoading:!1}),N=({children:e,isLoading:t})=>r.jsx(j.Provider,{value:{isLoading:t},children:e}),k=e=>{const{options:t=[],value:r,onChange:n,defaultValue:a=null}=e,[o,l]=s.useState(!1),[i,c]=s.useState(void 0!==r?r:a),[d,u]=s.useState("bottom"),m=s.useRef(null),p=s.useRef(null),x=t.find((e=>e.value===i))||null,h=s.useCallback((()=>{if(m.current&&p.current){const e=p.current.getBoundingClientRect(),t=window.innerHeight,r=e.top,s=t-e.bottom;u(s<200&&s<r?"top":"bottom")}l(!0)}),[]),g=s.useCallback((()=>{l(!1)}),[]),f=s.useCallback((()=>{o?g():h()}),[o,h,g]),b=s.useCallback((e=>{c(e.value),n&&n(e.value),g()}),[n,g]),y=s.useCallback((()=>{c(null),n&&n(null)}),[n]);return s.useEffect((()=>{const e=e=>{m.current&&p.current&&!m.current.contains(e.target)&&!p.current.contains(e.target)&&g()};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}}),[g]),s.useEffect((()=>{void 0!==r&&c(r)}),[r]),{selectedOption:x,options:t,isOpen:o,openMenu:h,closeMenu:g,toggleMenu:f,selectOption:b,clearSelection:y,menuProps:{ref:m,position:d},inputProps:{value:x?.label||"",onChange:()=>{},onFocus:h,onBlur:()=>{},ref:p}}};let C={api:{baseURL:"",headers:{},timeout:3e4}},S=async()=>({accessToken:void 0}),E=!1;const L=i.create();(()=>{if(!E)try{const e=(()=>{if("undefined"==typeof window&&"undefined"!=typeof require)try{const e=require("fs"),t=require("path"),r=t.resolve(process.cwd(),"form.config.json");if(e.existsSync(r)){const t=e.readFileSync(r,"utf8");return JSON.parse(t)}const s=t.resolve(process.cwd(),"src","form.config.json");if(e.existsSync(s)){const t=e.readFileSync(s,"utf8");return JSON.parse(t)}}catch(e){}return null})();e&&(C=e);const t=(()=>{if("undefined"==typeof window&&"undefined"!=typeof require)try{const e=require("fs"),t=require("path"),r=t=>{if(e.existsSync(t))try{const e=require(t);if("function"==typeof e.getSession)return e.getSession}catch(e){}return null},s=[t.resolve(process.cwd(),"services","session.js"),t.resolve(process.cwd(),"services","session.ts"),t.resolve(process.cwd(),"src","services","session.js"),t.resolve(process.cwd(),"src","services","session.ts")];for(const e of s){const t=r(e);if(t)return t}}catch(e){}return null})();t&&(S=t),L.defaults.baseURL=C.api?.baseURL||"",L.defaults.headers={...C.api?.headers?.["Content-Type"]?{}:{"Content-Type":"application/json"},...C.api?.headers||{}},L.defaults.timeout=C.api?.timeout||3e4,E=!0}catch(e){}})(),L.interceptors.request.use((async e=>{try{const t=await S();t?.accessToken&&(e.headers.Authorization=`Bearer ${t.accessToken}`)}catch(e){}return e}),(e=>Promise.reject(e)));const R=e=>e?Array.isArray(e)?e:[e]:[],O=(e,t)=>{if(!e||!t)return{};const r=R(e),s={};return r.forEach((e=>{try{s[e]=t.watch(e)}catch(t){s[e]=void 0}})),s},$=(e,t,r)=>{let s={...r};if(!t)return s;const{params:n,parameterName:a,dependingContrllerName:o}=t;if(n){const{paramName:t,...r}=n;if(Object.assign(s,r),t&&o){const r=R(o);"object"==typeof t&&null!==t?r.forEach((r=>{const n=t[r];n&&(s[n]=e[r]||"")})):1===r.length&&(s[t]=e[r[0]]||"")}}if(a&&o){const t=R(o);1===t.length?s[a]=e[t[0]]||"":t.forEach((t=>{s[`${a}_${t}`]=e[t]||""}))}if(!n?.paramName&&!a&&o){R(o).forEach((t=>{const r=t.replace(/Id$/,""),n=r?r.charAt(0).toUpperCase()+r.slice(1):"";s[`filterBy${n}Id`]=e[t]||""}))}return s},M=e=>{const{apiUrl:t,params:r={},transformResponse:n=e=>e,defaultValue:o,optionsApiOptions:l,name:i,...c}=e,[d,u]=s.useState(e.options||[]),[m,p]=s.useState(!1),[x,h]=s.useState(null),g=s.useRef(!1),f=s.useRef(void 0),b=s.useRef(null),y=s.useRef(!0),v=s.useRef(!1),w=s.useRef(r);s.useEffect((()=>{w.current=r}),[r]);const j=s.useRef(t);s.useEffect((()=>{j.current=t||l?.api}),[t]);let N=null;try{N=a.useFormContext()}catch(e){}const C=s.useMemo((()=>N&&l?.dependingContrllerName?O(l.dependingContrllerName,N):{}),[N,l?.dependingContrllerName,N?.watch&&JSON.stringify(N?.watch(R(l?.dependingContrllerName)))]);s.useMemo((()=>C),[C]),s.useMemo((()=>r),[JSON.stringify(r)]);const S=k({...c,defaultValue:o,options:d}),E=s.useCallback((async(t=!1)=>{if(!y.current||!t&&v.current)return;if(!(!t&&g.current&&JSON.stringify(C)===JSON.stringify(f.current))){if(l?.dependingContrllerName&&Object.values(C).every((e=>!e))&&!l.includeAll)return u([]),void(f.current=C);b.current&&b.current.abort(),b.current=new AbortController,p(!0),h(null),v.current=!0;try{let e=$(C,l,w.current);const t=await L.get(j.current,{params:e,signal:b.current.signal});if(!y.current)return;let r;if(r="function"==typeof n?n(t.data.data):Array.isArray(t.data.data)?t.data.data:[],y.current&&(u(r),g.current=!0,f.current={...C}),N&&i)try{const e=N.getValues(i);r.some((t=>t.value===e))||null==e||N.setValue(i,null,{shouldValidate:!0})}catch(e){}}catch(t){if(!y.current)return;"AbortError"!==t.name&&(h(t instanceof Error?t:new Error("Failed to fetch options")),e.options&&e.options.length>0&&u(e.options))}finally{y.current&&p(!1),v.current=!1}}}),[C,i,l,n,e.options]),M=s.useCallback((()=>(g.current=!1,f.current=void 0,E(!0))),[E]);return s.useEffect((()=>{y.current=!0;const e=setTimeout((()=>{E()}),50);return()=>{y.current=!1,clearTimeout(e),b.current&&b.current.abort()}}),[]),s.useEffect((()=>{if(l?.dependingContrllerName&&JSON.stringify(C)!==JSON.stringify(f.current)&&!v.current){const e=setTimeout((()=>{E(!0)}),50);return()=>{clearTimeout(e)}}}),[C,l?.dependingContrllerName]),{...S,options:d,loading:m,error:x,refresh:M}},A=e=>{const{options:t,value:r,onChange:n,defaultValue:a=null,maxSelections:o,selectionSummary:l}=e,[i,c]=s.useState(!1),[d,u]=s.useState(void 0!==r?r:a?[a]:[]),[m,p]=s.useState("bottom"),x=s.useRef(null),h=s.useRef(null),g=t?.filter((e=>d?.includes(e?.value))),f=s.useCallback((()=>{if(x.current&&h.current){const e=h.current.getBoundingClientRect(),t=window.innerHeight,r=e.top,s=t-e.bottom;p(s<200&&s<r?"top":"bottom")}c(!0)}),[]),b=s.useCallback((()=>{c(!1)}),[]),y=s.useCallback((()=>{i?b():f()}),[i,f,b]),v=s.useCallback((e=>{const t=e.value;u((e=>e.includes(t)?e?.filter((e=>e!==t)):void 0!==o&&e.length>=o?e:[...e,t]))}),[o]),w=s.useCallback((e=>{const t=e.value;u((e=>e?.filter((e=>e!==t))))}),[]),j=s.useCallback((()=>{u([]),n&&n([])}),[n]),N=s.useCallback((e=>d.includes(e.value)),[d]);s.useEffect((()=>{const e=e=>{x.current&&h.current&&!x.current.contains(e.target)&&!h.current.contains(e.target)&&b()};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}}),[b]),s.useEffect((()=>{void 0!==r&&u(r)}),[r]),s.useEffect((()=>{n&&JSON.stringify(r)!==JSON.stringify(d)&&n(d)}),[d,n,r]);return{selectedOptions:g,options:t,isOpen:i,openMenu:f,closeMenu:b,toggleMenu:y,selectOption:v,removeOption:w,clearAll:j,isSelected:N,menuProps:{ref:x,position:m},inputProps:{value:0===g?.length?"":l?l(g):1===g?.length?g[0]?.label:`${g?.length} items selected`,onChange:()=>{},onFocus:f,onBlur:()=>{},ref:h}}},D=e=>{const{apiUrl:t,params:r={},transformResponse:n=e=>e,optionsApiOptions:o,name:l,...i}=e,[c,d]=s.useState(e.options||[]),[u,m]=s.useState(!1),[p,x]=s.useState(null),h=s.useRef(!1),g=s.useRef(void 0);let f;try{f=a.useFormContext()}catch(e){f=null}const b=s.useMemo((()=>f&&o?.dependingContrllerName?O(o.dependingContrllerName,f):{}),[f,o?.dependingContrllerName,f?.watch&&JSON.stringify(f?.watch(R(o?.dependingContrllerName)))]),y=A({...i,options:c}),v=s.useCallback((async(s=!1)=>{if(!(!s&&h.current&&JSON.stringify(b)===JSON.stringify(g.current))){if(o?.dependingContrllerName&&Object.values(b).every((e=>!e))&&!o.includeAll)return d([]),void(g.current=b);m(!0),x(null);try{let e=$(b,o,r);const s=await L.get(t,{params:e});let a;if(a="function"==typeof n?n(s.data.data):Array.isArray(s.data.data)?s.data.data:[],d(a),h.current=!0,g.current={...b},f&&l)try{const e=f.getValues(l);if(Array.isArray(e)&&e.length>0){const t=e.filter((e=>a.some((t=>t.value===e))));t.length!==e.length&&f.setValue(l,t,{shouldValidate:!0})}}catch(e){console.warn("Error validating current values:",e)}}catch(t){console.error("Error fetching options:",t),x(t instanceof Error?t:new Error("Failed to fetch options")),e.options&&e.options.length>0&&d(e.options)}finally{m(!1)}}}),[t,r,n,e.options,b,o,f,l]),w=s.useCallback((()=>(h.current=!1,g.current=void 0,v(!0))),[v]);return s.useEffect((()=>{v()}),[]),s.useEffect((()=>{o?.dependingContrllerName&&JSON.stringify(b)!==JSON.stringify(g.current)&&v(!0)}),[b,v,o?.dependingContrllerName]),{...y,options:c,loading:u,error:p,refresh:w}},P=(e,t)=>{if(!e)return{position:"bottom",style:{}};const{dropdownHeight:r=250,margin:s=8,preferredPosition:n="bottom",container:a=null}=t||{},o=e.getBoundingClientRect(),l=window.innerHeight-o.bottom-s,i=o.top-s,c=Math.min(r,"bottom"===n?l:i);let d;d="bottom"===n&&l>=c?"bottom":"top"===n&&i>=c?"top":l>=i?"bottom":"top";const u=Math.min(r,"bottom"===d?l:i);return{position:d,style:{position:"fixed",width:o.width,maxHeight:`${u}px`,overflowY:"auto",zIndex:1e3,left:o.left,["bottom"===d?"top":"bottom"]:"bottom"===d?`${o.bottom+window.scrollY+s}px`:`${window.innerHeight-o.top+window.scrollY+s}px`}}},T=()=>{const[e,t]=s.useState({position:"bottom",style:{}}),r=s.useRef(null),n=s.useRef(null),a=s.useRef(null),o=s.useRef(null),l=s.useRef(e),i=s.useCallback((()=>{if(!r.current)return;const e=P(r.current,{...o.current,container:a.current}),s=l.current.style,n=e.style;(l.current.position!==e.position||s.top!==n.top||s.bottom!==n.bottom||s.left!==n.left||s.width!==n.width||s.maxHeight!==n.maxHeight)&&(l.current=e,t(e))}),[]);return{position:e,initPositioning:s.useCallback(((e,t,s=null,l)=>{r.current=e,n.current=t,a.current=s,o.current=l||{},i();const c=[];if(c.push(document.documentElement),s){c.push(s);let e=s.parentElement;for(;e;){const t=window.getComputedStyle(e);/(auto|scroll|overlay)/.test(t.overflow+t.overflowY+t.overflowX)&&c.push(e),e=e.parentElement}}else if(e){let t=V(e);t&&!c.includes(t)&&c.push(t)}let d=!1;const u=()=>{d||(window.requestAnimationFrame((()=>{i(),d=!1})),d=!0)};return c.forEach((e=>{e.addEventListener("scroll",u,{passive:!0})})),window.addEventListener("resize",u,{passive:!0}),()=>{c.forEach((e=>{e.removeEventListener("scroll",u)})),window.removeEventListener("resize",u)}}),[i]),recalculatePosition:s.useCallback((()=>{requestAnimationFrame(i)}),[i])}},F=e=>{if(!e)return null;let t=e.parentElement;for(;t;){if("dialog"===(r=t).getAttribute("role")||"true"===r.getAttribute("aria-modal")||r.classList.contains("dialog")||r.classList.contains("modal")||r.classList.contains("DialogContent")||r.classList.contains("ModalContent"))return t;t=t.parentElement}var r;return null},V=e=>{if(!e||e===document.body)return document.body;const{overflow:t,overflowY:r,overflowX:s}=window.getComputedStyle(e);return/(auto|scroll)/.test(t+r+s)?e:V(e.parentElement)},I=s.createContext(void 0),B=({children:e})=>{const[t,n]=s.useState(null),a=s.useCallback((e=>t===e),[t]),o=s.useCallback((e=>n(e)),[]),l=s.useCallback((e=>{n((t=>t===e?null:t))}),[]);return r.jsx(I.Provider,{value:{openDropdownId:t,isDropdownOpen:a,openDropdown:o,closeDropdown:l},children:e})},W=()=>{const e=s.useContext(I);if(!e)throw new Error("useSelectDropdownContext must be used within a SelectDropdownProvider");return e},z=({className:e})=>r.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:e,children:[r.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),r.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}),U=({className:e})=>r.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:e,children:r.jsx("polyline",{points:"6 9 12 15 18 9"})}),q=({className:e})=>r.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:e,children:r.jsx("polyline",{points:"20 6 9 17 4 12"})}),H=e=>{const{label:t,placeholder:n="Select an option",disabled:a=!1,required:o=!1,error:l,showError:i=!0,clearable:c=!0,className:d="",size:u="md"}=e,{selectedOption:m,isOpen:p,toggleMenu:x,selectOption:h,clearSelection:g,menuProps:f,inputProps:b,options:y}=k(e),v=s.useRef(null),w=s.useRef(null),j=s.useRef(null),{position:N,initPositioning:C}=T(),{isDropdownOpen:S,openDropdown:E,closeDropdown:L}=W(),R=s.useId();s.useEffect((()=>{p&&!S(R)&&E(R),!p&&S(R)&&L(R)}),[p,S,E,L,R]),s.useEffect((()=>{if(p&&v.current){j.current||(j.current=F(v.current));return C(v.current,w.current,j.current,{dropdownHeight:250,margin:8,preferredPosition:"bottom"})}}),[p,C]),s.useEffect((()=>{const e=e=>{p&&v.current&&!v.current.contains(e.target)&&f.ref.current&&!f.ref.current.contains(e.target)&&x()};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}}),[p,x]);return r.jsxs("div",{className:`select-container w-full ${d}`,children:[t&&r.jsxs("label",{className:"block text-sm font-medium mb-1",children:[t,o&&r.jsx("span",{className:"text-red-600 ml-1",children:"*"})]}),r.jsxs("div",{className:"relative",children:[r.jsxs("div",{ref:v,className:`\n flex items-center border rounded-md px-3 relative cursor-pointer\n ${{sm:"h-8 text-sm",md:"h-10 text-base",lg:"h-12 text-lg"}[u]}\n ${l?"border-red-500":"border-gray-300 dark:border-[#232a3b]"}\n ${p?"ring-2 ring-black border-black dark:ring-[#2563eb] dark:border-[#2563eb]":""}\n ${a?"bg-gray-100 cursor-not-allowed dark:bg-gray-800":"bg-white hover:border-gray-400 dark:bg-[#111827] dark:hover:border-[#2563eb]"}\n `,onMouseDown:()=>!a&&x(),children:[r.jsx("div",{className:"flex-grow overflow-hidden text-ellipsis whitespace-nowrap dark:text-gray-100",children:m?r.jsx("span",{children:m.label}):r.jsx("span",{className:"text-gray-400 dark:text-gray-400",children:n})}),r.jsxs("div",{className:"flex-shrink-0 ml-1 text-gray-400",children:[m&&c&&!a&&r.jsx("button",{type:"button",className:"p-1 hover:text-gray-600",onClick:e=>{e.stopPropagation(),g()},children:r.jsx(z,{className:"h-4 w-4"})}),r.jsx(U,{className:"h-4 w-4 transition-transform "+(p?"rotate-180":"")})]}),r.jsx("input",{type:"text",className:"sr-only",...b})]}),i&&l&&r.jsx("p",{className:"mt-1 text-sm text-red-500",children:l}),p&&!a&&r.jsx("div",{ref:w,style:N.style,className:"bg-white dark:bg-[#111827] rounded-md shadow-lg border border-gray-200 dark:border-[#232a3b] max-h-60 overflow-auto z-50",onMouseDown:e=>e.stopPropagation(),children:0===y.length?r.jsx("div",{className:"p-2 text-gray-500 text-center",children:"No options available"}):r.jsx("div",{className:"py-1",children:y.map((e=>r.jsxs("div",{className:`\n flex items-center px-3 py-2 cursor-pointer\n ${m?.value===e.value?"bg-blue-50 text-blue-700":"hover:bg-gray-50"}\n `,onClick:()=>h(e),children:[r.jsx("span",{children:e.label}),m?.value===e.value&&r.jsx(q,{className:"h-4 w-4 ml-auto text-blue-600"})]},e.value)))})})]})]})},_=e=>{const{label:t,placeholder:n="Select an option",searchPlaceholder:a="Search...",disabled:o=!1,required:l=!1,error:i,clearable:c=!0,className:d="",size:u="md",noResultsMessage:m="No results found",showError:p=!0}=e,{selectedOption:x,isOpen:h,toggleMenu:g,selectOption:f,clearSelection:b,inputProps:y,filteredOptions:v,searchTerm:w,setSearchTerm:j}=(e=>{const{options:t,searchPlaceholder:r,minSearchLength:n=0}=e,a=k(e),[o,l]=s.useState(""),i=t.filter((e=>o.length<n||e.label.toLowerCase().includes(o.toLowerCase()))),c={...a.inputProps,value:a.isOpen?o:a.selectedOption?.label||"",onChange:e=>{l(e.target.value),a.isOpen||a.openMenu()},placeholder:a.isOpen?r||"Search...":e.placeholder||"Select option"};return s.useEffect((()=>{a.isOpen||l("")}),[a.isOpen]),{...a,searchTerm:o,setSearchTerm:l,filteredOptions:i,inputProps:c}})(e),N=s.useRef(null),C=s.useRef(null),S=s.useRef(null),E=s.useRef(null),{position:L,initPositioning:R}=T(),{isDropdownOpen:O,openDropdown:$,closeDropdown:M}=W(),A=s.useId();s.useEffect((()=>{h&&!O(A)&&$(A),!h&&O(A)&&M(A)}),[h,O,$,M,A]),s.useEffect((()=>{if(h&&N.current){E.current||(E.current=F(N.current));return R(N.current,S.current,E.current,{dropdownHeight:250,margin:8,preferredPosition:"bottom"})}}),[h,R]),s.useEffect((()=>{h&&C.current&&C.current.focus()}),[h]),s.useEffect((()=>{const e=e=>{h&&N.current&&!N.current.contains(e.target)&&S.current&&!S.current.contains(e.target)&&g()};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}}),[h,g]);const{ref:D,...P}=y;return r.jsxs("div",{className:`searchable-select-container w-full ${d}`,children:[t&&r.jsxs("label",{className:"block text-sm font-medium text-gray-700 mb-1",children:[t,l&&r.jsx("span",{className:"text-red-500 ml-1",children:"*"})]}),r.jsxs("div",{className:"relative",children:[r.jsxs("div",{ref:N,className:`\n flex items-center border rounded-md px-3 relative\n ${{sm:"h-8 text-sm",md:"h-10 text-base",lg:"h-12 text-lg"}[u]}\n ${i?"border-red-500":"border-gray-300 dark:border-[#232a3b]"}\n ${h?"ring-2 ring-black border-black dark:ring-[#2563eb] dark:border-[#2563eb]":""}\n ${o?"bg-gray-100 cursor-not-allowed dark:bg-gray-800":"bg-white hover:border-gray-400 dark:bg-[#111827] dark:hover:border-[#2563eb]"}\n `,onClick:()=>!o&&g(),children:[r.jsx("input",{ref:C,...P,className:"block w-full h-full outline-none bg-transparent dark:bg-transparent dark:text-gray-100",placeholder:h?a:n,readOnly:!h,disabled:o,value:h?w:P.value,onChange:e=>{h&&j(e.target.value)}}),r.jsxs("div",{className:"flex items-center ml-2",children:[x&&c&&r.jsx("button",{type:"button",className:"p-1 text-gray-400 hover:text-gray-600 focus:outline-none",onClick:e=>{e.stopPropagation(),b(),g()},children:r.jsx(z,{})}),r.jsx("span",{className:"text-gray-400 transition-transform duration-200 "+(h?"rotate-180":""),children:r.jsx(U,{})})]})]}),p&&i&&r.jsx("p",{className:"mt-1 text-sm text-red-500",children:i}),h&&!o&&r.jsx("div",{ref:S,style:L.style,className:"bg-white dark:bg-[#111827] rounded-md shadow-lg border border-gray-200 dark:border-[#232a3b] max-h-60 overflow-auto z-50",children:0===v.length?r.jsx("div",{className:"p-3 text-sm text-gray-500 text-center",children:w?m:"No options available"}):r.jsx("ul",{className:"py-1",children:v.map((e=>r.jsx("li",{className:`\n px-3 py-2 cursor-pointer text-sm hover:bg-gray-100\n ${e.disabled?"opacity-50 cursor-not-allowed":""}\n ${x?.value===e.value?"bg-blue-50 text-blue-700":"text-gray-700"}\n `,onClick:()=>!e.disabled&&f(e),children:r.jsxs("div",{className:"flex items-center",children:[e.icon&&r.jsx("span",{className:"mr-2",children:e.icon}),e.label]})},e.value.toString())))})})]})]})},J=({className:e})=>r.jsx("svg",{className:h("animate-spin",e),xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:r.jsx("path",{d:"M21 12a9 9 0 1 1-6.219-8.56"})}),Y=e=>{const{label:t,placeholder:n="Select an option",disabled:a=!1,required:o=!1,error:l,clearable:i=!0,className:c="",size:d="md",showError:u=!0}=e,{selectedOption:m,isOpen:p,toggleMenu:x,selectOption:h,clearSelection:g,menuProps:f,inputProps:b,options:y=[],loading:v,error:w,refresh:j}=M(e),N=s.useRef(null),k=s.useRef(null),C=s.useRef(null),{position:S,initPositioning:E}=T(),{isDropdownOpen:L,openDropdown:R,closeDropdown:O}=W(),$=s.useId();s.useEffect((()=>{p&&!L($)&&R($),!p&&L($)&&O($)}),[p,L,R,O,$]),s.useEffect((()=>{if(p&&N.current){C.current||(C.current=F(N.current));return E(N.current,k.current,C.current,{dropdownHeight:250,margin:8,preferredPosition:"bottom"})}}),[p,E]);return r.jsxs("div",{className:`select-from-api-container w-full ${c}`,children:[t&&r.jsxs("label",{className:"block text-sm font-medium text-gray-700 mb-1",children:[t,o&&r.jsx("span",{className:"text-red-500 ml-1",children:"*"})]}),r.jsxs("div",{className:"relative",children:[r.jsxs("div",{ref:N,className:`\n flex items-center border rounded-md px-3 relative cursor-pointer\n ${{sm:"h-8 text-sm",md:"h-10 text-base",lg:"h-12 text-lg"}[d]}\n ${l||w?"border-red-500":"border-gray-300 dark:border-[#232a3b]"}\n ${p?"ring-2 ring-black border-black dark:ring-[#2563eb] dark:border-[#2563eb]":""}\n ${a?"bg-gray-100 cursor-not-allowed dark:bg-gray-800":"bg-white hover:border-gray-400 dark:bg-[#111827] dark:hover:border-[#2563eb]"}\n `,onClick:e=>{a||(e.stopPropagation(),x())},children:[r.jsx("input",{...b,className:"block w-full h-full outline-none bg-transparent dark:bg-transparent dark:text-gray-100",placeholder:n,readOnly:!0,disabled:a,onClick:e=>e.stopPropagation()}),r.jsx("div",{className:"flex items-center ml-2",children:v?r.jsx(J,{}):r.jsxs(r.Fragment,{children:[m&&i&&r.jsx("button",{type:"button",className:"p-1 text-gray-400 hover:text-gray-600 focus:outline-none",onClick:e=>{e.stopPropagation(),g()},children:r.jsx(z,{})}),r.jsx("span",{className:"text-gray-400 transition-transform duration-200 "+(p?"rotate-180":""),children:r.jsx(U,{})})]})})]}),u&&(l||w)&&r.jsx("p",{className:"mt-1 text-sm text-red-500",children:l||w?.message}),p&&!a&&r.jsx("div",{ref:k,style:S.style,className:"bg-white dark:bg-[#111827] rounded-md shadow-lg border border-gray-200 dark:border-[#232a3b] max-h-60 overflow-auto z-50",onClick:e=>e.stopPropagation(),children:v?r.jsxs("div",{className:"p-3 text-sm text-gray-500 text-center flex items-center justify-center",children:[r.jsx(J,{}),r.jsx("span",{className:"ml-2",children:"Loading options..."})]}):w?r.jsxs("div",{className:"p-3",children:[r.jsx("p",{className:"text-sm text-red-500 mb-2",children:"Failed to load options"}),r.jsx("button",{className:"text-sm text-black hover:text-blue-700",onClick:e=>{e.stopPropagation(),j()},children:"Try again"})]}):0===y.length?r.jsx("div",{className:"p-3 text-sm text-gray-500 text-center",children:"No options available"}):r.jsx("ul",{className:"py-1",children:y.map((e=>r.jsx("li",{className:`\n px-3 py-2 cursor-pointer text-sm hover:bg-gray-100\n ${e.disabled?"opacity-50 cursor-not-allowed":""}\n ${m?.value===e.value?"bg-blue-50 text-blue-700":"text-gray-700"}\n `,onClick:t=>{t.stopPropagation(),e.disabled||h(e)},children:r.jsxs("div",{className:"flex items-center",children:[e.icon&&r.jsx("span",{className:"mr-2",children:e.icon}),e.label]})},e.value)))})})]})]})},G=e=>{const{label:t,placeholder:n="Select an option",searchPlaceholder:o="Search...",disabled:l=!1,required:i=!1,error:c,clearable:d=!0,className:u="",size:m="md",noResultsMessage:p="No results found",showError:x=!0}=e,{selectedOption:h,isOpen:g,toggleMenu:f,selectOption:b,clearSelection:y,inputProps:v,filteredOptions:w=[],searchTerm:j="",loading:N,loadingResults:k,error:C,refresh:S}=(e=>{const{apiUrl:t,params:r={},transformResponse:n=e=>e,searchParam:o="q",debounceMs:l=300,minSearchLength:i=2,optionsApiOptions:c,name:d,...u}=e,[m,p]=s.useState(""),[x,h]=s.useState(e?.options||[]),[g,f]=s.useState(!1),b=s.useRef(null),y=s.useRef(""),v=s.useRef(null),w=s.useRef(void 0),j=s.useRef(!0),N=s.useRef(!1),k=s.useRef(!1);let C=null;try{C=a.useFormContext()}catch(e){}const S=s.useMemo((()=>C&&c?.dependingContrllerName?O(c.dependingContrllerName,C):{}),[C,c?.dependingContrllerName,C?.watch&&JSON.stringify(C?.watch(R(c?.dependingContrllerName)))]),E=s.useMemo((()=>r),[JSON.stringify(r)]),A=s.useRef(r);s.useEffect((()=>{A.current=r}),[r]);const D=s.useRef(t);s.useEffect((()=>{D.current=t||c?.api}),[t]);const P=M({apiUrl:t,params:E,transformResponse:n,optionsApiOptions:c,name:d,options:e.options||[],...u}),T=s.useCallback((async e=>{if(j.current&&!N.current)if(e.length<i||e===y.current)e.length<i&&(h(P.options),f(!1));else if(c?.dependingContrllerName&&Object.values(S).every((e=>!e))&&!c.includeAll)h([]);else{y.current=e,f(!0),N.current=!0,v.current&&v.current.abort(),v.current=new AbortController;try{let t=$(S,c,{...r,[o]:e});const s=await L.get(D.current,{params:t,signal:v.current.signal});if(!j.current)return;let a;if(a="function"==typeof n?n(s.data?.data||[]):Array.isArray(s.data?.data)?s.data.data:[],j.current&&(h(a),w.current={...S},k.current=!1),C&&d)try{const e=C.getValues(d);a.some((t=>t.value===e))||null==e||C.setValue(d,null,{shouldValidate:!0})}catch(e){}}catch(t){if(!j.current)return;"AbortError"!==t.name&&(k.current=!0,P.options.length>0&&h(P.options.filter((t=>t.label.toLowerCase().includes(e.toLowerCase())))))}finally{j.current&&f(!1),N.current=!1}}}),[t,r,o,P.options,i,S,d,C,c,n]),F=s.useCallback((e=>{if(p(e),b.current&&(clearTimeout(b.current),b.current=null),e.length<i)return h(P.options),void f(!1);f(!0),b.current=setTimeout((()=>{T(e)}),l)}),[i,l,P.options]);s.useEffect((()=>(j.current=!0,()=>{j.current=!1,b.current&&clearTimeout(b.current),v.current&&v.current.abort()})),[]),s.useEffect((()=>{m.length<i&&h(P.options)}),[P.options,m,i]);const V=s.useMemo((()=>({...P.inputProps,value:P.isOpen?m:P.selectedOption?.label||"",onChange:e=>{F(e.target.value),P.isOpen||P.openMenu()},placeholder:P.isOpen?e.searchPlaceholder||"Search...":e.placeholder||"Select option"})),[P.inputProps,P.isOpen,P.selectedOption,m,e.searchPlaceholder,e.placeholder]);return s.useEffect((()=>{P.isOpen||(p(""),h(P.options))}),[P.isOpen,P.options]),{...P,searchTerm:m,setSearchTerm:F,filteredOptions:x,loadingResults:g,inputProps:V}})(e),E=s.useRef(null),A=s.useRef(null),D=s.useRef(null),P=s.useRef(null),{position:V,initPositioning:I}=T(),{isDropdownOpen:B,openDropdown:q,closeDropdown:H}=W(),_=s.useId();s.useEffect((()=>{g&&!B(_)&&q(_),!g&&B(_)&&H(_)}),[g,B,q,H,_]),s.useEffect((()=>{if(g&&E.current){P.current||(P.current=F(E.current));return I(E.current,D.current,P.current,{dropdownHeight:250,margin:8,preferredPosition:"bottom"})}}),[g,I]),s.useEffect((()=>{g&&A.current&&A.current.focus()}),[g]);const{ref:Y,...G}=v||{},X=Array.isArray(w)?w:[];return r.jsxs("div",{className:`searchable-select-from-api-container w-full ${u}`,children:[t&&r.jsxs("label",{className:"block text-sm font-medium text-gray-700 mb-1",children:[t,i&&r.jsx("span",{className:"text-red-500 ml-1",children:"*"})]}),r.jsxs("div",{className:"relative",children:[r.jsxs("div",{ref:E,className:`\n flex items-center border rounded-md px-3 relative\n ${{sm:"h-8 text-sm",md:"h-10 text-base",lg:"h-12 text-lg"}[m]}\n ${c||C?"border-red-500":"border-gray-300 dark:border-[#232a3b]"}\n ${g?"ring-2 ring-black border-black dark:ring-[#2563eb] dark:border-[#2563eb]":""}\n ${l?"bg-gray-100 cursor-not-allowed dark:bg-gray-800":"bg-white hover:border-gray-400 dark:bg-[#111827] dark:hover:border-[#2563eb]"}\n `,onClick:()=>!l&&f(),children:[r.jsx("input",{ref:A,...G,className:"block w-full h-full outline-none bg-transparent dark:bg-transparent dark:text-gray-100",placeholder:g?o:n,readOnly:!g,disabled:l}),r.jsx("div",{className:"flex items-center ml-2",children:N||k?r.jsx(J,{}):r.jsxs("div",{className:"flex items-center gap-x-1",children:[h&&d&&!g&&r.jsx("button",{type:"button",className:"p-1 text-gray-400 hover:text-gray-600 focus:outline-none",onClick:e=>{e.stopPropagation(),y()},children:r.jsx(z,{})}),r.jsx("span",{className:"text-gray-400 transition-transform duration-200 "+(g?"rotate-180":""),children:r.jsx(U,{})})]})})]}),x&&(c||C)&&r.jsx("p",{className:"mt-1 text-sm text-red-500",children:c||C?.message}),g&&!l&&r.jsx("div",{ref:D,style:V.style,className:"bg-white dark:bg-[#111827] rounded-md shadow-lg border border-gray-200 dark:border-[#232a3b] max-h-60 overflow-auto z-50",children:N?r.jsxs("div",{className:"p-3 text-sm text-gray-500 text-center flex items-center justify-center",children:[r.jsx(J,{}),r.jsx("span",{className:"ml-2",children:"Loading options..."})]}):k?r.jsxs("div",{className:"p-3 text-sm text-gray-500 text-center flex items-center justify-center",children:[r.jsx(J,{}),r.jsx("span",{className:"ml-2",children:"Searching..."})]}):C?r.jsxs("div",{className:"p-3",children:[r.jsx("p",{className:"text-sm text-red-500 mb-2",children:"Failed to load options"}),r.jsx("button",{className:"text-sm text-black hover:text-blue-700",onClick:e=>{e.stopPropagation(),S()},children:"Try again"})]}):0===X.length?r.jsx("div",{className:"p-3 text-sm text-gray-500 text-center",children:j?p:"No options available"}):r.jsx("ul",{className:"py-1",children:X.map((e=>r.jsx("li",{className:`\n px-3 py-2 cursor-pointer text-sm hover:bg-gray-100\n ${e.disabled?"opacity-50 cursor-not-allowed":""}\n ${h?.value===e.value?"bg-blue-50 text-blue-700":"text-gray-700"}\n `,onClick:()=>!e.disabled&&b(e),children:r.jsxs("div",{className:"flex items-center",children:[e.icon&&r.jsx("span",{className:"mr-2",children:e.icon}),e.label]})},e.value)))})})]})]})},X=e=>{const{label:t,placeholder:n="Select options",disabled:a=!1,required:o=!1,error:l,showError:i=!0,clearable:c=!0,className:d="",size:u="md"}=e,{selectedOptions:m,isOpen:p,toggleMenu:x,selectOption:h,removeOption:g,clearAll:f,isSelected:b,menuProps:y,inputProps:v,options:w}=A(e),j=s.useRef(null),N=s.useRef(null),k=s.useRef(null),{position:C,initPositioning:S}=T(),{isDropdownOpen:E,openDropdown:L,closeDropdown:R}=W(),O=s.useId();s.useEffect((()=>{p&&!E(O)&&L(O),!p&&E(O)&&R(O)}),[p,E,L,R,O]),s.useEffect((()=>{if(p&&j.current){k.current||(k.current=F(j.current));return S(j.current,N.current,k.current,{dropdownHeight:250,margin:8,preferredPosition:"bottom"})}}),[p,S]),s.useEffect((()=>{const e=e=>{p&&j.current&&!j.current.contains(e.target)&&y.ref.current&&!y.ref.current.contains(e.target)&&x()};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}}),[p,x]);return r.jsxs("div",{className:`multi-select-container w-full ${d}`,children:[t&&r.jsxs("label",{className:"block text-sm font-medium mb-1",children:[t,o&&r.jsx("span",{className:"text-red-600 ml-1",children:"*"})]}),r.jsxs("div",{className:"relative",children:[r.jsxs("div",{ref:j,className:`\n flex items-center border rounded-md px-3 relative cursor-pointer\n ${{sm:"h-8 text-sm",md:"h-10 text-base",lg:"h-12 text-lg"}[u]}\n ${l?"border-red-500":"border-gray-300 dark:border-[#232a3b]"}\n ${p?"ring-2 ring-black border-black dark:ring-[#2563eb] dark:border-[#2563eb]":""}\n ${a?"bg-gray-100 cursor-not-allowed dark:bg-gray-800":"bg-white hover:border-gray-400 dark:bg-[#111827] dark:hover:border-[#2563eb]"}\n `,onMouseDown:()=>!a&&x(),children:[r.jsx((()=>0===m.length?r.jsx("div",{className:"flex-grow text-gray-400 overflow-hidden text-ellipsis whitespace-nowrap",children:n}):r.jsx("div",{className:"flex flex-wrap gap-1 flex-grow overflow-hidden",children:m.map((e=>r.jsxs("div",{className:"bg-blue-100 text-blue-800 rounded-md px-2 py-0.5 flex items-center gap-1 text-sm",children:[r.jsx("span",{className:"truncate",children:e.label}),!a&&r.jsx("button",{type:"button",onClick:t=>{t.stopPropagation(),g(e)},className:"text-black hover:text-blue-700",children:r.jsx(z,{className:"h-3 w-3"})})]},e.value)))})),{}),r.jsxs("div",{className:"flex-shrink-0 ml-1 text-gray-400",children:[m.length>0&&c&&!a&&r.jsx("button",{type:"button",className:"p-1 hover:text-gray-600",onClick:e=>{e.stopPropagation(),f()},children:r.jsx(z,{className:"h-4 w-4"})}),r.jsx(U,{className:"h-4 w-4 transition-transform "+(p?"rotate-180":"")})]}),r.jsx("input",{type:"text",className:"sr-only",...v})]}),i&&l&&r.jsx("p",{className:"mt-1 text-sm text-red-500",children:l}),p&&!a&&r.jsx("div",{ref:N,style:C.style,className:"bg-white dark:bg-[#111827] rounded-md shadow-lg border border-gray-200 dark:border-[#232a3b] max-h-60 overflow-auto z-50",onMouseDown:e=>e.stopPropagation(),children:0===w.length?r.jsx("div",{className:"p-2 text-gray-500 text-center",children:"No options available"}):r.jsx("div",{className:"py-1",children:w.map((e=>r.jsxs("div",{className:`\n flex items-center px-3 py-2 cursor-pointer\n ${b(e)?"bg-blue-50 text-blue-700":"hover:bg-gray-50"}\n `,onClick:()=>h(e),children:[r.jsx("div",{className:`\n w-4 h-4 rounded border mr-2 flex items-center justify-center\n ${b(e)?"bg-blue-600 border-blue-600":"border-gray-300"}\n `,children:b(e)&&r.jsx(q,{className:"h-3 w-3 text-white"})}),r.jsx("span",{children:e.label})]},e.value)))})})]})]})},K=e=>{const{label:t,placeholder:n="Select options",searchPlaceholder:a="Search...",disabled:o=!1,required:l=!1,error:i,showError:c=!0,clearable:d=!0,className:u="",size:m="md",noResultsMessage:p="No results found"}=e,{selectedOptions:x,isOpen:h,toggleMenu:g,selectOption:f,removeOption:b,clearAll:y,isSelected:v,inputProps:w,filteredOptions:j,searchTerm:N,setSearchTerm:k}=(e=>{const{options:t,searchPlaceholder:r,minSearchLength:n=0}=e,a=A(e),[o,l]=s.useState(""),i=t.filter((e=>o.length<n||e.label.toLowerCase().includes(o.toLowerCase()))),c={...a.inputProps,value:a.isOpen?o:a.inputProps.value,onChange:e=>{l(e.target.value),a.isOpen||a.openMenu()},placeholder:a.isOpen?r||"Search...":e.placeholder||"Select options"};return s.useEffect((()=>{a.isOpen||l("")}),[a.isOpen]),{...a,searchTerm:o,setSearchTerm:l,filteredOptions:i,inputProps:c}})(e),C=s.useRef(null),S=s.useRef(null),E=s.useRef(null),L=s.useRef(null),{position:R,initPositioning:O}=T(),{isDropdownOpen:$,openDropdown:M,closeDropdown:D}=W(),P=s.useId();s.useEffect((()=>{h&&!$(P)&&M(P),!h&&$(P)&&D(P)}),[h,$,M,D,P]),s.useEffect((()=>{if(h&&C.current){L.current||(L.current=F(C.current));return O(C.current,E.current,L.current,{dropdownHeight:250,margin:8,preferredPosition:"bottom"})}}),[h,O]),s.useEffect((()=>{h&&S.current&&S.current.focus()}),[h]),s.useEffect((()=>{const e=e=>{h&&C.current&&!C.current.contains(e.target)&&E.current&&!E.current.contains(e.target)&&g()};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}}),[h,g]);const{ref:V,...I}=w;return r.jsxs("div",{className:`searchable-multi-select-container w-full ${u}`,children:[t&&r.jsxs("label",{className:"block text-sm font-medium text-gray-700 mb-1",children:[t,l&&r.jsx("span",{className:"text-red-500 ml-1",children:"*"})]}),r.jsxs("div",{className:"relative",children:[r.jsxs("div",{ref:C,className:`\n flex items-center border rounded-md px-3 relative\n ${{sm:"h-8 text-sm",md:"h-10 text-base",lg:"h-12 text-lg"}[m]}\n ${i?"border-red-500":"border-gray-300 dark:border-[#232a3b]"}\n ${h?"ring-2 ring-black border-black dark:ring-[#2563eb] dark:border-[#2563eb]":""}\n ${o?"bg-gray-100 cursor-not-allowed dark:bg-gray-800":"bg-white hover:border-gray-400 dark:bg-[#111827] dark:hover:border-[#2563eb]"}\n `,onClick:()=>!o&&g(),children:[x.length>0&&!h?r.jsx("div",{className:"flex flex-wrap gap-1 py-1 max-w-full overflow-hidden",children:x.length<=3?x.map((e=>r.jsxs("div",{className:"flex items-center bg-blue-100 text-blue-800 rounded px-2 py-0.5 text-sm",children:[r.jsx("span",{className:"truncate",children:e.label}),r.jsx("button",{type:"button",className:"ml-1 text-black hover:text-blue-700 focus:outline-none",onClick:t=>{t.stopPropagation(),b(e)},children:r.jsx(z,{})})]},e.value.toString()))):r.jsxs("div",{className:"text-gray-700",children:[x.length," items selected"]})}):r.jsx("input",{ref:S,...I,className:"block w-full h-full outline-none bg-transparent",placeholder:h?a:n,readOnly:!h,disabled:o,value:h?N:I.value,onChange:e=>{h&&k(e.target.value)}}),r.jsxs("div",{className:"flex items-center ml-2",children:[x.length>0&&d&&!h&&r.jsx("button",{type:"button",className:"p-1 text-gray-400 hover:text-gray-600 focus:outline-none",onClick:e=>{e.stopPropagation(),y()},children:r.jsx(z,{})}),r.jsx("span",{className:"text-gray-400 transition-transform duration-200 "+(h?"rotate-180":""),children:r.jsx(U,{})})]})]}),c&&i&&r.jsx("p",{className:"mt-1 text-sm text-red-500",children:i}),h&&!o&&r.jsx("div",{ref:E,style:R.style,className:"bg-white dark:bg-[#111827] rounded-md shadow-lg border border-gray-200 dark:border-[#232a3b] max-h-60 overflow-auto z-50",children:0===j.length?r.jsx("div",{className:"p-3 text-sm text-gray-500 text-center",children:N?p:"No options available"}):r.jsx("ul",{className:"py-1",children:j.map((e=>r.jsx("li",{className:`\n px-3 py-2 cursor-pointer text-sm hover:bg-gray-100\n ${e.disabled?"opacity-50 cursor-not-allowed":""}\n ${v(e)?"bg-blue-50 text-blue-700":"text-gray-700"}\n `,onClick:()=>!e.disabled&&f(e),children:r.jsxs("div",{className:"flex items-center",children:[r.jsx("div",{className:`\n w-4 h-4 mr-3 flex-shrink-0 border rounded\n ${v(e)?"bg-black border-black text-white":"border-gray-300"}\n `,children:v(e)&&r.jsx(q,{})}),e.icon&&r.jsx("span",{className:"mr-2",children:e.icon}),e.label]})},e.value.toString())))})})]})]})},Z=e=>{const{label:t,placeholder:n="Select options",disabled:a=!1,required:o=!1,error:l,clearable:i=!0,className:c="",size:d="md",showError:u=!0}=e,{selectedOptions:m,isOpen:p,toggleMenu:x,selectOption:h,removeOption:g,clearAll:f,isSelected:b,menuProps:y,inputProps:v,options:w,loading:j,error:N,refresh:k}=D(e),C=s.useRef(null),S=s.useRef(null),E=s.useRef(null),{position:L,initPositioning:R}=T(),{isDropdownOpen:O,openDropdown:$,closeDropdown:M}=W(),A=s.useId();s.useEffect((()=>{p&&!O(A)&&$(A),!p&&O(A)&&M(A)}),[p,O,$,M,A]),s.useEffect((()=>{if(p&&C.current){E.current||(E.current=F(C.current));return R(C.current,S.current,E.current,{dropdownHeight:250,margin:8,preferredPosition:"bottom"})}}),[p,R]),s.useEffect((()=>{const e=e=>{p&&C.current&&!C.current.contains(e.target)&&y.ref.current&&!y.ref.current.contains(e.target)&&x()};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}}),[p,x]);return r.jsxs("div",{className:`multi-select-from-api-container w-full ${c}`,children:[t&&r.jsxs("label",{className:"block text-sm font-medium text-gray-700 mb-1",children:[t,o&&r.jsx("span",{className:"text-red-500 ml-1",children:"*"})]}),r.jsxs("div",{className:"relative",children:[r.jsxs("div",{ref:C,className:`\n flex items-center border rounded-md px-3 relative cursor-pointer\n ${{sm:"h-8 text-sm",md:"h-10 text-base",lg:"h-12 text-lg"}[d]}\n ${l||N?"border-red-500":"border-gray-300 dark:border-[#232a3b]"}\n ${p?"ring-2 ring-black border-black dark:ring-[#2563eb] dark:border-[#2563eb]":""}\n ${a?"bg-gray-100 cursor-not-allowed dark:bg-gray-800":"bg-white hover:border-gray-400 dark:bg-[#111827] dark:hover:border-[#2563eb]"}\n `,onClick:()=>!a&&x(),children:[m?.length>0?r.jsx("div",{className:"flex flex-wrap gap-1 py-1 max-w-full overflow-hidden",children:m?.length<=3?m.map((e=>r.jsxs("div",{className:"flex items-center bg-blue-100 text-blue-800 rounded px-2 py-0.5 text-sm",children:[r.jsx("span",{className:"truncate",children:e.label}),r.jsx("button",{type:"button",className:"ml-1 text-black hover:text-blue-700 focus:outline-none",onClick:t=>{t.stopPropagation(),g(e)},children:r.jsx(z,{})})]},e.value))):r.jsxs("div",{className:"text-gray-700",children:[m?.length," items selected"]})}):r.jsx("input",{...v,className:"block w-full h-full outline-none bg-transparent cursor-pointer",placeholder:n,readOnly:!0,disabled:a}),r.jsx("div",{className:"flex items-center ml-2",children:j?r.jsx(J,{}):r.jsxs(r.Fragment,{children:[m?.length>0&&i&&r.jsx("button",{type:"button",className:"p-1 text-gray-400 hover:text-gray-600 focus:outline-none",onClick:e=>{e.stopPropagation(),f()},children:r.jsx(z,{})}),r.jsx("span",{className:"text-gray-400 transition-transform duration-200 "+(p?"rotate-180":""),children:r.jsx(U,{})})]})})]}),u&&(l||N)&&r.jsx("p",{className:"mt-1 text-sm text-red-500",children:l||N?.message}),p&&!a&&r.jsx("div",{ref:S,style:L.style,className:"bg-white dark:bg-[#111827] rounded-md shadow-lg border border-gray-200 dark:border-[#232a3b] max-h-60 overflow-auto z-50",children:j?r.jsxs("div",{className:"p-3 text-sm text-gray-500 text-center flex items-center justify-center",children:[r.jsx(J,{}),r.jsx("span",{className:"ml-2",children:"Loading options..."})]}):N?r.jsxs("div",{className:"p-3",children:[r.jsx("p",{className:"text-sm text-red-500 mb-2",children:"Failed to load options"}),r.jsx("button",{className:"text-sm text-black hover:text-blue-700",onClick:e=>{e.stopPropagation(),k()},children:"Try again"})]}):0===w?.length?r.jsx("div",{className:"p-3 text-sm text-gray-500 text-center",children:"No options available"}):r.jsx("ul",{className:"py-1",children:w?.map((e=>r.jsx("li",{className:`\n px-3 py-2 cursor-pointer text-sm hover:bg-gray-100\n ${e.disabled?"opacity-50 cursor-not-allowed":""}\n ${b(e)?"bg-blue-50 text-blue-700":"text-gray-700"}\n `,onClick:()=>!e.disabled&&h(e),children:r.jsxs("div",{className:"flex items-center",children:[r.jsx("div",{className:`\n w-4 h-4 mr-3 flex-shrink-0 border rounded\n ${b(e)?"bg-black border-black text-white":"border-gray-300"}\n `,children:b(e)&&r.jsx(q,{})}),e.icon&&r.jsx("span",{className:"mr-2",children:e.icon}),e.label]})},e.value)))})})]})]})},Q=({className:e})=>r.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:e,children:[r.jsx("circle",{cx:"11",cy:"11",r:"8"}),r.jsx("line",{x1:"21",y1:"21",x2:"16.65",y2:"16.65"})]}),ee=e=>{const{label:t,placeholder:n="Select options",searchPlaceholder:o="Search...",disabled:l=!1,required:i=!1,error:c,showError:d=!0,clearable:u=!0,className:m="",size:p="md"}=e,{selectedOptions:x,isOpen:h,toggleMenu:g,selectOption:f,removeOption:b,clearAll:y,isSelected:v,menuProps:w,inputProps:j,searchTerm:N,setSearchTerm:k,filteredOptions:C,loading:S,loadingResults:E,error:M}=(e=>{const{apiUrl:t,params:r={},transformResponse:n=e=>e,searchParam:o="q",debounceMs:l=300,minSearchLength:i=2,optionsApiOptions:c,name:d,...u}=e;let m,p=null;try{p=d?a.useFormContext():null}catch(e){}if(p&&c?.dependingContrllerName)try{m=p.watch(c.dependingContrllerName)}catch(e){m=void 0}const x=s.useMemo((()=>p&&c?.dependingContrllerName?O(c.dependingContrllerName,p):{}),[p,c?.dependingContrllerName,p?.watch&&JSON.stringify(p?.watch(R(c?.dependingContrllerName)))]),[h,g]=s.useState(""),[f,b]=s.useState(e.options||[]),[y,v]=s.useState(!1),w=s.useRef(null),j=s.useRef(""),N=s.useRef(null),k=s.useRef(void 0),C=s.useRef(!0),S=D({apiUrl:t,params:r,transformResponse:n,optionsApiOptions:c,name:d,options:e.options||[],...u}),E=s.useCallback((async e=>{if(C.current)if(e.length<i||e===j.current)e.length<i&&(b(S.options),v(!1));else if(c?.dependingContrllerName&&Object.values(x).every((e=>!e))&&!c.includeAll)b([]);else{j.current=e,v(!0),N.current&&N.current.abort(),N.current=new AbortController;try{let s=$(x,c,{...r,[o]:e});const a=await L.get(t,{params:s,signal:N.current.signal});if(!C.current)return;let l;if(l="function"==typeof n?n(a.data.data):Array.isArray(a.data.data)?a.data.data:[],b(l),k.current={...x},p&&d)try{const e=p.getValues(d);if(Array.isArray(e)&&e.length>0){const t=e.filter((e=>l.some((t=>t.value===e))));t.length!==e.length&&p.setValue(d,t,{shouldValidate:!0})}}catch(e){}}catch(t){if(!C.current)return;"AbortError"!==t.name&&b(S.options.filter((t=>t.label.toLowerCase().includes(e.toLowerCase()))))}finally{C.current&&!1===N.current?.signal.aborted&&v(!1)}}}),[t,r,o,S.options,i,x,d,p,c,n]),M=s.useCallback((e=>{if(g(e),w.current&&(clearTimeout(w.current),w.current=null),e.length<i)return b(S.options),void v(!1);v(!0),w.current=setTimeout((()=>{E(e)}),l)}),[E,i,l,S.options]);s.useEffect((()=>(C.current=!0,()=>{C.current=!1,w.current&&clearTimeout(w.current),N.current&&N.current.abort()})),[]),s.useEffect((()=>{h.length<i&&b(S.options)}),[S.options,h,i]),s.useEffect((()=>{Object.values(x).some((e=>e!==k.current[e]))&&h.length>=i&&(w.current&&clearTimeout(w.current),w.current=setTimeout((()=>{E(h)}),100))}),[x,h,i,E]);const A={...S.inputProps,value:S.isOpen?h:S.inputProps.value,onChange:e=>{M(e.target.value),S.isOpen||S.openMenu()},placeholder:S.isOpen?e.searchPlaceholder||"Search...":e.placeholder||"Select options"};return s.useEffect((()=>{S.isOpen||(g(""),b(S.options))}),[S.isOpen,S.options]),{...S,searchTerm:h,setSearchTerm:M,filteredOptions:f,loadingResults:y,inputProps:A}})(e),A=s.useRef(null),P=s.useRef(null),V=s.useRef(null),I=s.useRef(null),{position:B,initPositioning:H}=T(),{isDropdownOpen:_,openDropdown:Y,closeDropdown:G}=W(),X=s.useId();s.useEffect((()=>{h&&!_(X)&&Y(X),!h&&_(X)&&G(X)}),[h,_,Y,G,X]),s.useEffect((()=>{if(h&&A.current){I.current||(I.current=F(A.current));return H(A.current,V.current,I.current,{dropdownHeight:250,margin:8,preferredPosition:"bottom"})}}),[h,H]),s.useEffect((()=>{h&&P.current&&P.current?.focus()}),[h]),s.useEffect((()=>{const e=e=>{h&&A.current&&!A.current.contains(e.target)&&w.ref.current&&!w.ref.current.contains(e.target)&&g()};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}}),[h,g]);return r.jsxs("div",{className:`searchable-multi-select-container w-full ${m}`,children:[t&&r.jsxs("label",{className:"block text-sm font-medium mb-1",children:[t,i&&r.jsx("span",{className:"text-red-600 ml-1",children:"*"})]}),r.jsxs("div",{className:"relative",children:[r.jsxs("div",{ref:A,className:`\n flex items-center border rounded-md px-3 relative cursor-pointer\n ${{sm:"h-8 text-sm",md:"h-10 text-base",lg:"h-12 text-lg"}[p]}\n ${c||M?"border-red-500":"border-gray-300 dark:border-[#232a3b]"}\n ${h?"ring-2 ring-black border-black dark:ring-[#2563eb] dark:border-[#2563eb]":""}\n ${l?"bg-gray-100 cursor-not-allowed dark:bg-gray-800":"bg-white hover:border-gray-400 dark:bg-[#111827] dark:hover:border-[#2563eb]"}\n `,onClick:()=>!l&&g(),children:[h&&r.jsx(Q,{className:"h-4 w-4 text-gr