@dashadmin/dash-components 1.3.25 → 1.3.28

package/dist/components/SearchableSelects/RASearchableSelectChipsRecordContext.js

@@ -1 +1,295 @@
-import{Fragment as v,jsx as i,jsxs as se}from"react/jsx-runtime";import{Autocomplete as Y,Box as T,Chip as B,CircularProgress as Z,TextField as M}from"@mui/material";import{useEffect as O,useState as d}from"react";import{useFormContext as K}from"react-hook-form";import{useGetList as ee}from"react-admin";import{useRecordContext as E}from"react-admin";import{LoadingIndicator as te}from"react-admin";const oe=({method:a,attribute:m,isMultiple:n=!1,searchResults:f=50,minSearch:A=3,timerSearch:I=500,resource:D,selectLabel:P,renderText:S,transformData:ie=C=>C,queryFilter:q="q",defaultValues:l=void 0,isEmpty:ae=!1,filter:N,isOptionEqualToValue:$=void 0,viewAttribute:le=null,valueKeyId:c="id",useBaseAttributeName:ce=!1,useListAttributeForController:ue=!1,transformOption:L})=>{const{setValue:C,watch:j}=K(),r=E(),s=m.attribute,p=m.listAttribute||m.attribute;console.log("Attribute config:",{saveAttributeName:s,displayAttributeName:p,record:r?{[s]:r[s],[p]:r[p]}:null});const[z,k]=d(!1),[F,V]=d(!1),[y,_]=d([]),[G,H]=d(""),[b,x]=d([]),[Q,U]=d(void 0),h=j(s),R=(e,t)=>typeof L=="function"?L(e,y,t):e,W=(()=>{let e=r?.[s];return e?(Array.isArray(e)||(e=[e]),e.filter(Boolean)):[]})(),{data:g,total:me,isLoading:w,error:de}=ee(D,{meta:{removeSortFilters:!0},filter:{[q]:G,...N,includes:W}});O(()=>{if(g){const t=(Array.isArray(g)?g:Object.values(g)).map((o,u)=>({...o,key:`option-${o[c]||u}`}));_(t)}},[g,c]),O(()=>{if(F)return;console.log("Initializing default values...");let e=[],t=n?[]:null;if(l===null&&r){if(r[p]&&Array.isArray(r[p]))e=r[p],t=r[p].map(o=>o[c]);else if(r[s]){const o=Array.isArray(r[s])?r[s]:[r[s]];t=n?o:o[0]}}else l!=null&&(Array.isArray(l)?(e=l,t=l.map(o=>typeof o=="object"?o[c]:o)):(e=[l],t=typeof l=="object"?l[c]:l));console.log("Initial values:",{initialSelectedOptions:e,initialFormValue:t}),x(e),C(s,t),V(!0)},[r,l,F,s,p,c,n]),O(()=>{if(y.length>0&&b.length===0&&h){const t=(Array.isArray(h)?h:[h]).map(o=>y.find(u=>u[c]===o)).filter(Boolean);t.length>0&&(console.log("Setting selected options from parsed options:",t),x(t))}},[y,b,h,c]);const J=(e,t=500)=>{clearTimeout(Q),U(setTimeout(()=>{e()},t))},X=e=>{console.log("Updating field value:",e),x(e||[]);const t=(e||[]).map(u=>u[c]),o=n?t:t[0]||null;console.log("Saving to form:",{attribute:s,value:o}),C(s,o)};return F?i(v,{children:i(Y,{multiple:n,loading:w,fullWidth:!0,freeSolo:!1,options:y,open:z,onOpen:()=>k(!0),onClose:()=>k(!1),value:n?b:b[0]||null,isOptionEqualToValue:$,autoHighlight:!0,getOptionLabel:e=>e&&S(R(e,"optionlabel"),"optionlabel")||"",renderOption:(e,t)=>{const{key:o,...u}=e;return i(T,{component:"li",sx:{"& > img":{mr:2,flexShrink:0}},...u,children:S(R(t,"option"),"option")},t.key||`option-${t[c]}`)},renderTags:(e,t)=>e.map((o,u)=>i(B,{label:S(R(o,"chip"),"chip"),...t({index:u})},`chip-${o[c]||u}`)),onChange:(e,t)=>{X(n?t:t?[t]:[])},renderInput:e=>i(M,{...e,label:P,variant:"outlined",onChange:t=>{const o=t.target.value;o&&o!==""&&o.length>=A&&J(()=>H(o),I)},InputProps:{...e.InputProps,autoComplete:"new-password",endAdornment:se(v,{children:[w&&i(Z,{color:"inherit",size:20}),e.InputProps.endAdornment]})}})},`autocomplete-${s}`)}):i(te,{})},ne=({attribute:a,resourceConfig:m})=>{const n=E(),f=Array.isArray(n[a.listAttribute||a.attribute])?n[a.listAttribute||a.attribute]:[n[a.listAttribute||a.attribute]];return i(v,{children:n&&i(T,{sx:{width:"100%"},children:f.map(A=>i(B,{label:A.name,sx:{margin:.5}},A.id))})})},re=({method:a,attribute:m,resourceConfig:n,...f})=>{switch(a){case"edit":case"create":return i(oe,{resourceConfig:n,attribute:m,method:a,...f});case"view":case"list":return i(ne,{resourceConfig:n,attribute:m,method:a,...f});default:return null}};var Oe=re;export{oe as SearchableSelectChipsControlRecordContextEdit,ne as SearchableSelectChipsControlRecordContextView,Oe as default};
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  Autocomplete,
+  Box,
+  Chip,
+  CircularProgress,
+  TextField
+} from "@mui/material";
+import { useEffect, useState } from "react";
+import { useFormContext } from "react-hook-form";
+import { useGetList } from "react-admin";
+import { useRecordContext } from "react-admin";
+import { LoadingIndicator } from "react-admin";
+const SearchableSelectChipsControlRecordContextEdit = ({
+  method,
+  attribute,
+  isMultiple = false,
+  searchResults = 50,
+  minSearch = 3,
+  timerSearch = 500,
+  resource,
+  selectLabel,
+  renderText,
+  transformData = (val) => val,
+  queryFilter = "q",
+  defaultValues = void 0,
+  isEmpty = false,
+  filter,
+  isOptionEqualToValue = void 0,
+  viewAttribute = null,
+  valueKeyId = "id",
+  useBaseAttributeName = false,
+  useListAttributeForController = false,
+  transformOption
+}) => {
+  const { setValue, watch } = useFormContext();
+  const record = useRecordContext();
+  const saveAttributeName = attribute.attribute;
+  const displayAttributeName = attribute.listAttribute || attribute.attribute;
+  console.log("Attribute config:", {
+    saveAttributeName,
+    displayAttributeName,
+    record: record ? {
+      [saveAttributeName]: record[saveAttributeName],
+      [displayAttributeName]: record[displayAttributeName]
+    } : null
+  });
+  const [open, setOpen] = useState(false);
+  const [fullyLoaded, setFullyLoaded] = useState(false);
+  const [parsedOptions, setParsedOptions] = useState([]);
+  const [q, setQ] = useState("");
+  const [selectedOptions, setSelectedOptions] = useState([]);
+  const [timeOutSearch, setTimeOutSearch] = useState(void 0);
+  const currentFormValue = watch(saveAttributeName);
+  const _transformOption = (option, caller) => {
+    if (typeof transformOption === "function") {
+      return transformOption(option, parsedOptions, caller);
+    }
+    return option;
+  };
+  const getIncludes = () => {
+    let recordValue = record == null ? void 0 : record[saveAttributeName];
+    if (!recordValue) return [];
+    if (!Array.isArray(recordValue)) {
+      recordValue = [recordValue];
+    }
+    return recordValue.filter(Boolean);
+  };
+  const includes = getIncludes();
+  const {
+    data: resourceSearchResults,
+    total: totalSearchResults,
+    isLoading: isResourceSearchLoading,
+    error: isResourceSearchErrored
+  } = useGetList(resource, {
+    meta: { removeSortFilters: true },
+    filter: __spreadProps(__spreadValues({ [queryFilter]: q }, filter), { includes })
+  });
+  useEffect(() => {
+    if (resourceSearchResults) {
+      const resultsArray = Array.isArray(resourceSearchResults) ? resourceSearchResults : Object.values(resourceSearchResults);
+      const _parsedOptions = resultsArray.map((ele, index) => __spreadProps(__spreadValues({}, ele), {
+        key: `option-${ele[valueKeyId] || index}`
+      }));
+      setParsedOptions(_parsedOptions);
+    }
+  }, [resourceSearchResults, valueKeyId]);
+  useEffect(() => {
+    if (fullyLoaded) return;
+    console.log("Initializing default values...");
+    let initialSelectedOptions = [];
+    let initialFormValue = isMultiple ? [] : null;
+    if (defaultValues === null && record) {
+      if (record[displayAttributeName] && Array.isArray(record[displayAttributeName])) {
+        initialSelectedOptions = record[displayAttributeName];
+        initialFormValue = record[displayAttributeName].map((item) => item[valueKeyId]);
+      } else if (record[saveAttributeName]) {
+        const ids = Array.isArray(record[saveAttributeName]) ? record[saveAttributeName] : [record[saveAttributeName]];
+        initialFormValue = isMultiple ? ids : ids[0];
+      }
+    } else if (defaultValues !== void 0 && defaultValues !== null) {
+      if (Array.isArray(defaultValues)) {
+        initialSelectedOptions = defaultValues;
+        initialFormValue = defaultValues.map(
+          (item) => typeof item === "object" ? item[valueKeyId] : item
+        );
+      } else {
+        initialSelectedOptions = [defaultValues];
+        initialFormValue = typeof defaultValues === "object" ? defaultValues[valueKeyId] : defaultValues;
+      }
+    }
+    console.log("Initial values:", {
+      initialSelectedOptions,
+      initialFormValue
+    });
+    setSelectedOptions(initialSelectedOptions);
+    setValue(saveAttributeName, initialFormValue);
+    setFullyLoaded(true);
+  }, [record, defaultValues, fullyLoaded, saveAttributeName, displayAttributeName, valueKeyId, isMultiple]);
+  useEffect(() => {
+    if (parsedOptions.length > 0 && selectedOptions.length === 0 && currentFormValue) {
+      const formValueArray = Array.isArray(currentFormValue) ? currentFormValue : [currentFormValue];
+      const matchedOptions = formValueArray.map(
+        (id) => parsedOptions.find((option) => option[valueKeyId] === id)
+      ).filter(Boolean);
+      if (matchedOptions.length > 0) {
+        console.log("Setting selected options from parsed options:", matchedOptions);
+        setSelectedOptions(matchedOptions);
+      }
+    }
+  }, [parsedOptions, selectedOptions, currentFormValue, valueKeyId]);
+  const debounce = (fn, delay = 500) => {
+    clearTimeout(timeOutSearch);
+    setTimeOutSearch(
+      setTimeout(() => {
+        fn();
+      }, delay)
+    );
+  };
+  const updateFieldValue = (newSelectedOptions) => {
+    console.log("Updating field value:", newSelectedOptions);
+    setSelectedOptions(newSelectedOptions || []);
+    const idsToSave = (newSelectedOptions || []).map((option) => option[valueKeyId]);
+    const valueToSave = isMultiple ? idsToSave : idsToSave[0] || null;
+    console.log("Saving to form:", { attribute: saveAttributeName, value: valueToSave });
+    setValue(saveAttributeName, valueToSave);
+  };
+  if (!fullyLoaded) return /* @__PURE__ */ jsx(LoadingIndicator, {});
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+    Autocomplete,
+    {
+      multiple: isMultiple,
+      loading: isResourceSearchLoading,
+      fullWidth: true,
+      freeSolo: false,
+      options: parsedOptions,
+      open,
+      onOpen: () => setOpen(true),
+      onClose: () => setOpen(false),
+      value: isMultiple ? selectedOptions : selectedOptions[0] || null,
+      isOptionEqualToValue,
+      autoHighlight: true,
+      getOptionLabel: (option) => {
+        if (!option) return "";
+        return renderText(_transformOption(option, "optionlabel"), "optionlabel") || "";
+      },
+      renderOption: (props, option) => {
+        const _a = props, { key } = _a, newProps = __objRest(_a, ["key"]);
+        return /* @__PURE__ */ jsx(
+          Box,
+          __spreadProps(__spreadValues({
+            component: "li",
+            sx: { "& > img": { mr: 2, flexShrink: 0 } }
+          }, newProps), {
+            children: renderText(_transformOption(option, "option"), "option")
+          }),
+          option.key || `option-${option[valueKeyId]}`
+        );
+      },
+      renderTags: (tagValue, getTagProps) => {
+        return tagValue.map((option, index) => /* @__PURE__ */ jsx(
+          Chip,
+          __spreadValues({
+            label: renderText(_transformOption(option, "chip"), "chip")
+          }, getTagProps({ index })),
+          `chip-${option[valueKeyId] || index}`
+        ));
+      },
+      onChange: (event, rawValue) => {
+        const newValue = isMultiple ? rawValue : rawValue ? [rawValue] : [];
+        updateFieldValue(newValue);
+      },
+      renderInput: (params) => /* @__PURE__ */ jsx(
+        TextField,
+        __spreadProps(__spreadValues({}, params), {
+          label: selectLabel,
+          variant: "outlined",
+          onChange: (ev) => {
+            const searchValue = ev.target.value;
+            if (searchValue && searchValue !== "" && searchValue.length >= minSearch) {
+              debounce(() => setQ(searchValue), timerSearch);
+            }
+          },
+          InputProps: __spreadProps(__spreadValues({}, params.InputProps), {
+            autoComplete: "new-password",
+            endAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
+              isResourceSearchLoading && /* @__PURE__ */ jsx(CircularProgress, { color: "inherit", size: 20 }),
+              params.InputProps.endAdornment
+            ] })
+          })
+        })
+      )
+    },
+    `autocomplete-${saveAttributeName}`
+  ) });
+};
+const SearchableSelectChipsControlRecordContextView = ({
+  attribute,
+  resourceConfig
+}) => {
+  const record = useRecordContext();
+  const values = Array.isArray(record[attribute.listAttribute || attribute.attribute]) ? record[attribute.listAttribute || attribute.attribute] : [record[attribute.listAttribute || attribute.attribute]];
+  return /* @__PURE__ */ jsx(Fragment, { children: record && /* @__PURE__ */ jsx(Box, { sx: { width: "100%" }, children: values.map((item) => /* @__PURE__ */ jsx(
+    Chip,
+    {
+      label: item.name,
+      sx: { margin: 0.5 }
+    },
+    item.id
+  )) }) });
+};
+const SearchableSelectChipsControlRecordContext = (_a) => {
+  var _b = _a, { method, attribute, resourceConfig } = _b, props = __objRest(_b, ["method", "attribute", "resourceConfig"]);
+  switch (method) {
+    case "edit":
+    case "create":
+      return /* @__PURE__ */ jsx(
+        SearchableSelectChipsControlRecordContextEdit,
+        __spreadValues({
+          resourceConfig,
+          attribute,
+          method
+        }, props)
+      );
+    case "view":
+    case "list":
+      return /* @__PURE__ */ jsx(
+        SearchableSelectChipsControlRecordContextView,
+        __spreadValues({
+          resourceConfig,
+          attribute,
+          method
+        }, props)
+      );
+    default:
+      return null;
+  }
+};
+var RASearchableSelectChipsRecordContext_default = SearchableSelectChipsControlRecordContext;
+export {
+  SearchableSelectChipsControlRecordContextEdit,
+  SearchableSelectChipsControlRecordContextView,
+  RASearchableSelectChipsRecordContext_default as default
+};

package/dist/components/SearchableSelects/SearchableSelect.js

@@ -1 +1,202 @@
-import{Fragment as b,jsx as o,jsxs as C}from"react/jsx-runtime";import{Autocomplete as K,Box as Q,CircularProgress as A,TextField as X}from"@mui/material";import{useEffect as G,useState as c}from"react";import{useController as H}from"react-hook-form";import{useGetList as R}from"react-admin";import{isArray as _}from"lodash";const j=function({...D}){const{isMultiple:u=!1,minSearch:V=3,timerSearch:E=500,resource:F,selectLabel:I,renderText:d,transformData:g,queryFilter:P="q",defaultValues:r=void 0,elementKeyId:v="id",isEmpty:k=!1,filter:q,isOptionEqualToValue:h=(e,t)=>t===e,renderAttribute:f=null,name:S,onChange:x,renderInputTextFieldProps:M}=D,[O,T]=c(!1),[a,m]=c(null),[y,L]=c(""),l=H({name:S,defaultValue:r||null}),w=r&&_(r)?r.map(e=>e[v]?e[v]:e):r,{data:p,isLoading:s}=R(F,{filter:{[P]:y,...q,includes:w}},{refetchOnWindowFocus:!1});G(()=>(p&&!s&&(a&&m([...a,...p.map(e=>({...e,key:"option"+e.id}))]),m(p.map(e=>({...e,key:"option"+e.id})))),()=>m([])),[p,s]);const[B,W]=c(void 0),z=(e,t=500)=>{clearTimeout(B),W(setTimeout(()=>{e()},t))},J=(()=>{let e=null;return u&&(e=[]),u&&l.field.value&&Array.isArray(l.field.value)&&(e=l.field.value),u&&l.field.value&&!Array.isArray(l.field.value)&&(e=[l.field.value]),!u&&l.field.value&&(e=l.field.value),e})();return C(b,{children:[s&&!a?o(A,{color:"inherit",size:20}):o(b,{}),a&&o(K,{multiple:u,loading:s&&O,fullWidth:!0,freeSolo:!0,options:a,open:O,onOpen:()=>T(!0),onClose:()=>T(!1),defaultValue:J,isOptionEqualToValue:h,autoHighlight:!0,getOptionLabel:e=>{const t=Array.isArray(e)?e:a&&a.find(i=>h(i,l.field.value));if(!t)return y;const n=f&&!d?t[f]:d(t);return n||y},renderOption:(e,t)=>{const{key:n,...i}=e;return o(Q,{component:"li",sx:{"& > img":{mr:2,flexShrink:0}},...i,children:f&&!d?t[f]:d(t)},t.key)},onChange:(e,t)=>{let n=t;Array.isArray(t)&&(n=k?[...t,...l.field.value]:[...new Map(n.map(i=>[i.id,i])).values()]),g?l.field.onChange(g(n)):l.field.onChange(n),x&&x(n)},renderInput:e=>o(X,{...e,label:I,variant:"outlined",onChange:t=>{const n=t.target.value;n&&n!==""&&n.length>=V&&z(()=>L(n),E)},InputProps:{...e.InputProps,autoComplete:"new-password",endAdornment:C(b,{children:[s?o(A,{color:"inherit",size:20}):null,e.InputProps.endAdornment]})},...M},e.id)},"autocomplete-"+S)]})};var re=j;export{re as default};
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  Autocomplete,
+  Box,
+  CircularProgress,
+  TextField
+} from "@mui/material";
+import { useEffect, useState } from "react";
+import { useController } from "react-hook-form";
+import { useGetList } from "react-admin";
+import { isArray } from "lodash";
+const SearchableSelect = function WrappedAutoComplete(_a) {
+  var props = __objRest(_a, []);
+  const {
+    isMultiple = false,
+    //pagination = true,
+    //searchResults = 50,
+    minSearch = 3,
+    timerSearch = 500,
+    resource,
+    selectLabel,
+    renderText,
+    transformData,
+    queryFilter = "q",
+    defaultValues = void 0,
+    elementKeyId = "id",
+    isEmpty = false,
+    filter,
+    isOptionEqualToValue = (option, value) => value === option,
+    renderAttribute = null,
+    name,
+    onChange,
+    renderInputTextFieldProps
+    //..._rest
+  } = props;
+  const [open, setOpen] = useState(false);
+  const [parsedOptions, setParsedOptions] = useState(null);
+  const [q, setQ] = useState("");
+  const field = useController({
+    name,
+    defaultValue: defaultValues ? defaultValues : null
+  });
+  const includes = defaultValues && isArray(defaultValues) ? defaultValues.map((element) => element[elementKeyId] ? element[elementKeyId] : element) : defaultValues;
+  const {
+    data: resourceData,
+    isLoading
+  } = useGetList(
+    resource,
+    {
+      filter: __spreadProps(__spreadValues({ [queryFilter]: q }, filter), { includes })
+    },
+    { refetchOnWindowFocus: false }
+  );
+  useEffect(() => {
+    if (resourceData && !isLoading) {
+      if (parsedOptions)
+        setParsedOptions([
+          ...parsedOptions,
+          ...resourceData.map((ele) => {
+            return __spreadProps(__spreadValues({}, ele), { key: "option" + ele.id });
+          })
+        ]);
+      setParsedOptions(
+        resourceData.map((ele) => {
+          return __spreadProps(__spreadValues({}, ele), { key: "option" + ele.id });
+        })
+      );
+    }
+    return () => setParsedOptions([]);
+  }, [resourceData, isLoading]);
+  const [timeOutSearch, setTimeOutSearch] = useState(void 0);
+  const debounce = (fn, delay = 500) => {
+    clearTimeout(timeOutSearch);
+    setTimeOutSearch(
+      setTimeout(() => {
+        fn();
+      }, delay)
+    );
+  };
+  const calculateDefaultValue = () => {
+    let value = null;
+    if (isMultiple) value = [];
+    if (isMultiple && field.field.value && Array.isArray(field.field.value))
+      value = field.field.value;
+    if (isMultiple && field.field.value && !Array.isArray(field.field.value))
+      value = [field.field.value];
+    if (!isMultiple && field.field.value) value = field.field.value;
+    return value;
+  };
+  const defaultValue = calculateDefaultValue();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isLoading && !parsedOptions ? /* @__PURE__ */ jsx(CircularProgress, { color: "inherit", size: 20 }) : /* @__PURE__ */ jsx(Fragment, {}),
+    parsedOptions && /* @__PURE__ */ jsx(
+      Autocomplete,
+      {
+        multiple: isMultiple,
+        loading: isLoading && open,
+        fullWidth: true,
+        freeSolo: true,
+        options: parsedOptions,
+        open,
+        onOpen: () => setOpen(true),
+        onClose: () => setOpen(false),
+        defaultValue,
+        isOptionEqualToValue,
+        autoHighlight: true,
+        getOptionLabel: (option) => {
+          const _option = !Array.isArray(option) ? parsedOptions && parsedOptions.find((ele) => isOptionEqualToValue(ele, field.field.value)) : option;
+          if (!_option) return q;
+          const r = renderAttribute && !renderText ? _option[renderAttribute] : renderText(_option);
+          if (!r) return q;
+          return r;
+        },
+        renderOption: (p, option) => {
+          const _a2 = p, { key } = _a2, newProps = __objRest(_a2, ["key"]);
+          return /* @__PURE__ */ jsx(
+            Box,
+            __spreadProps(__spreadValues({
+              component: "li",
+              sx: { "& > img": { mr: 2, flexShrink: 0 } }
+            }, newProps), {
+              children: renderAttribute && !renderText ? option[renderAttribute] : renderText(option)
+            }),
+            option.key
+          );
+        },
+        onChange: (event, rawValue) => {
+          let newValue = rawValue;
+          if (Array.isArray(rawValue)) {
+            newValue = isEmpty ? [...rawValue, ...field.field.value] : [...new Map(newValue.map((v) => [v.id, v])).values()];
+          }
+          if (transformData) {
+            field.field.onChange(transformData(newValue));
+          } else {
+            field.field.onChange(newValue);
+          }
+          if (onChange) {
+            onChange(newValue);
+          }
+        },
+        renderInput: (params) => {
+          return /* @__PURE__ */ jsx(
+            TextField,
+            __spreadValues(__spreadProps(__spreadValues({}, params), {
+              label: selectLabel,
+              variant: "outlined",
+              onChange: (ev) => {
+                const searchValue = ev.target.value;
+                if (searchValue && searchValue !== "" && searchValue.length >= minSearch)
+                  debounce(() => setQ(searchValue), timerSearch);
+              },
+              InputProps: __spreadProps(__spreadValues({}, params.InputProps), {
+                autoComplete: "new-password",
+                endAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
+                  isLoading ? /* @__PURE__ */ jsx(CircularProgress, { color: "inherit", size: 20 }) : null,
+                  params.InputProps.endAdornment
+                ] })
+              })
+            }), renderInputTextFieldProps),
+            params.id
+          );
+        }
+      },
+      "autocomplete-" + name
+    )
+  ] });
+};
+var SearchableSelect_default = SearchableSelect;
+export {
+  SearchableSelect_default as default
+};