@dashadmin/dash-components 1.3.25 → 1.3.26

package/dist/components/AutoCompleteArrayInputAutoSearch/AutoCompleteCheckBoxInput.js

@@ -1,3 +1,647 @@
-import{Fragment as Qt,jsx as g,jsxs as xe}from"react/jsx-runtime";import{isValidElement as $,useCallback as z,useEffect as F,useMemo as me,useRef as X,useState as G}from"react";import{isEqual as lt,get as C,debounce as ut}from"lodash";import ct from"clsx";import{Autocomplete as dt,Checkbox as pt,Chip as ft,TextField as gt,Tooltip as mt,createFilterOptions as ht}from"@mui/material";import{styled as yt}from"@mui/material/styles";import{FieldTitle as xt,useChoicesContext as Ct,useInput as Tt,useSuggestions as St,useTimeout as bt,useTranslate as Rt,warning as Ot,useGetRecordRepresentation as It,useEvent as vt,sanitizeInputRestProps as Ft}from"react-admin";import{InputHelperText as Pt,useSupportCreateSuggestion as At}from"react-admin";import Et from"@mui/icons-material/CheckBoxOutlineBlank";import kt from"@mui/icons-material/CheckBox";const wt=g(Et,{fontSize:"small"}),Mt=g(kt,{fontSize:"small"}),Lt=o=>({q:o}),he="RaAutocompleteInput",qt=ht(),ye={textField:`${he}-textField`},zt=yt(dt,{name:he,overridesResolver:(o,r)=>r.root})(({theme:o})=>({[`& .${ye.textField}`]:{minWidth:o.spacing(20)}})),K=(o=[],r,s="id",l)=>l?(Array.isArray(r??[])?r:[r]).map(a=>o.find(m=>String(a)===String(C(m,s)))).filter(a=>!!a):o.find(a=>String(C(a,s))===String(r))||"",Bt=(o,r,s="id",l)=>{if(l){const a=o??[],m=r??[];return a.length!==m.length?!1:!a.map(u=>m.some(B=>C(B,s)===C(u,s))).some(u=>u===!1)}return C(o,s)===C(r,s)},Dt=(o,{choices:r,multiple:s,optionValue:l})=>{const a=X(K(r,o,l,s)),[m,E]=G(()=>K(r,o,l,s));return F(()=>{const u=K(r,o,l,s);Bt(a.current,u,l,s)||(a.current=u,E(u))},[r,o,s,l]),m||null},_t=o=>{const{choices:r,className:s,blurOnSelect:l=!1,clearOnBlur:a=!1,selectOnFocus:m=!0,openOnFocus:E=!0,renderTags:u,disableCloseOnSelect:B=!0,filterSelectedOptions:Ce=!1,renderOption:Nt=null,clearText:j="ra.action.clear_input_value",closeText:J="ra.action.close",create:k,createLabel:Te,createItemLabel:Se,createValue:be,debounce:Y=250,defaultValue:Re,emptyText:b,emptyValue:h="",field:Oe,format:Ie,helperText:Z,id:ve,inputText:P,isFetching:Fe,isLoading:Pe,isRequired:Ae,label:Ee,limitChoicesToValue:w,matchSuggestion:R,margin:ke,fieldState:we,filterToQuery:Me=Lt,formState:Le,multiple:d=!1,noOptionsText:O,onBlur:qe,onChange:ze,onCreate:M,openText:ee="ra.action.open",optionText:i,optionValue:I,parse:Be,resource:te,shouldRenderSuggestions:L,setFilter:D,size:De,source:_e,suggestionLimit:_=1/0,TextFieldProps:Qe,translateChoice:Ne,validate:Ve,variant:We,...ne}=o,He=vt(Me),q=X(null),{allChoices:Q,isLoading:Ue,error:N,resource:oe,source:V,setFilters:re,isFromReference:T}=Ct({choices:r,isFetching:Fe,isLoading:Pe,resource:te,source:_e}),v=Rt(),{id:$e,field:c,isRequired:W,fieldState:{error:Xe,invalid:ie,isTouched:se},formState:{isSubmitted:ae}}=Tt({defaultValue:Re,id:ve,field:Oe,fieldState:we,formState:Le,isRequired:Ae,onBlur:qe,onChange:ze,parse:Be,format:Ie,resource:oe,source:V,validate:Ve,...ne}),p=me(()=>b==null||W||d?Q:[{[I||"id"]:h,[typeof i=="string"?i:"name"]:v(b,{_:b})}].concat(Q),[Q,h,b,W,d,i,I,v]),f=Dt(c.value,{choices:p,multiple:d,optionValue:I});F(()=>{if(h==null)throw new Error("emptyValue being set to null or undefined is not supported. Use parse to turn the empty string into null.")},[h]),F(()=>{if($(i)&&b!=null)throw new Error("optionText of type React element is not supported when setting emptyText");if($(i)&&P==null)throw new Error(`
-If you provided a React element for the optionText prop, you must also provide the inputText prop (used for the text input)`);if($(i)&&!T&&R==null)throw new Error(`
-If you provided a React element for the optionText prop, you must also provide the matchSuggestion prop (used to match the user input with a choice)`)},[i,P,R,b,T]),F(()=>{Ot(L!=null&&O==null,"When providing a shouldRenderSuggestions function, we recommend you also provide the noOptionsText prop and set it to a text explaining users why no options are displayed. It supports translation keys.")},[L,O]);const Ge=It(oe),{getChoiceText:le,getChoiceValue:A,getSuggestions:ue}=St({choices:p,limitChoicesToValue:w,matchSuggestion:R,optionText:i??(T?Ge:void 0),optionValue:I,selectedItem:f,suggestionLimit:_,translateChoice:Ne??!T}),[S,ce]=G(""),[H,de]=G(null),Ke=e=>{let t;if(d?Array.isArray(e)?t=e.map(A):t=[...c.value??[],A(e)]:t=A(e)??h,q.current[1]==="clear"){c.onChange(t);return}if(q.current[0].currentTarget.nodeName==="svg"){c.onChange(t);return}if(q.current[1]==="removeOption"){de(n=>t.filter(x=>!new Set(H).has(x)));return}de(n=>Array.from(n?new Set([...n,...t]):new Set([...t])))},pe=z(ut(e=>{if(D)return D(e);r||re(He(e),[],!0)},Y),[Y,re,D]),fe=X(c.value);F(()=>{lt(fe.current,c.value)||(fe.current=c.value,pe(""))},[c.value]);const{getCreateItem:je,handleChange:Je,createElement:Ye,createId:ge}=At({create:k,createLabel:Te,createItemLabel:Se,createValue:be,handleChange:Ke,filter:S,onCreate:M,optionText:i}),y=z((e,t=!1)=>e==null?"":typeof e=="string"?e:e?.id===ge?C(e,typeof i=="string"?i:"name"):!t&&e[I||"id"]===h?C(e,typeof i=="string"?i:"name"):!t&&P!==void 0?P(e):le(e),[le,P,ge,i,I,h]);F(()=>{if(!d){const e=y(f);if(typeof e=="string")ce(e);else throw new Error("When optionText returns a React element, you must also provide the inputText prop")}},[y,d,f]);const U=z(e=>{let t;return d?t=f.map(n=>y(n)):t=[y(f)],t.includes(e)},[y,d,f]),Ze=z(e=>{const t=p?p.some(n=>y(n)===e):!1;return U(e)||t},[p,y,U]),et=(e,t,n)=>{(e?.type==="change"||!U(t))&&(ce(t),pe(t))},tt=(e,t)=>{let n=T||R||w?e:qt(e,t);const{inputValue:x}=t;return(M||k)&&x!==""&&!Ze(S)&&(n=n.concat(je(x))),n},nt=(e,t,n)=>{q.current=[e,n],Je(t!==null?t:h)},ot=bt(1e3,S),rt=me(()=>!T&&(R||w)?ue(S):p?.slice(0,_)||[],[p,S,ue,w,R,_,T]),it=(e,t)=>String(A(e))===String(A(t)),st=!!N||Z!==!1||(se||ae)&&ie;return xe(Qt,{children:[g(zt,{className:ct("ra-input",`ra-input-${V}`,s),clearText:v(j,{_:j}),closeText:v(J,{_:J}),openText:v(ee,{_:ee}),id:$e,isOptionEqualToValue:it,blurOnSelect:l,clearOnBlur:a,selectOnFocus:m,openOnFocus:E,disableCloseOnSelect:B,filterSelectedOptions:Ce,renderInput:e=>g(gt,{name:c.name,label:g(xt,{label:Ee,source:V,resource:te,isRequired:W}),error:!!N||(se||ae)&&ie,helperText:st?g(Pt,{error:Xe?.message||N?.message,helperText:Z}):null,margin:ke,variant:We,className:ye.textField,...Qe,...e,size:De}),multiple:d,renderTags:u||((e,t)=>{const n=i;return g(mt,{title:e.map(x=>x[n]).join(" , "),children:g(ft,{label:e[0][n]+(e.length>1?" +"+(e.length-1):""),sx:{".MuiSvgIcon-root":{zIndex:100}},variant:"filled",size:"small"})})}),noOptionsText:typeof O=="string"?v(O,{_:O}):O,...Ft(ne),freeSolo:!!k||!!M,handleHomeEndKeys:!!k||!!M,filterOptions:tt,options:L==null||L(S)?rt:[],getOptionLabel:y,inputValue:S,loading:Ue&&(!p||p.length===0)&&ot,value:f,onChange:(e,t,n)=>{nt(e,t,n)},onInputChange:et,clearOnEscape:!1,renderOption:(e,t,{selected:n})=>{const x=f&&f.find(at=>at.id===t.id)?!0:n;return xe("li",{...e,children:[g(pt,{icon:wt,checkedIcon:Mt,style:{marginRight:8},defaultChecked:x}),t[i]]})},onClose:()=>{H&&c.onChange(H)}}),Ye]})};var ln=_t;export{ye as AutocompleteInputClasses,ln 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 {
+  isValidElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { isEqual, get, debounce } from "lodash";
+import clsx from "clsx";
+import {
+  Autocomplete,
+  Checkbox,
+  Chip,
+  TextField,
+  Tooltip,
+  createFilterOptions
+} from "@mui/material";
+import { styled } from "@mui/material/styles";
+import {
+  FieldTitle,
+  useChoicesContext,
+  useInput,
+  useSuggestions,
+  useTimeout,
+  useTranslate,
+  warning,
+  useGetRecordRepresentation,
+  useEvent,
+  sanitizeInputRestProps
+} from "react-admin";
+import {
+  InputHelperText,
+  useSupportCreateSuggestion
+} from "react-admin";
+import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
+import CheckBoxIcon from "@mui/icons-material/CheckBox";
+const icon = /* @__PURE__ */ jsx(CheckBoxOutlineBlankIcon, { fontSize: "small" });
+const checkedIcon = /* @__PURE__ */ jsx(CheckBoxIcon, { fontSize: "small" });
+const DefaultFilterToQuery = (searchText) => ({ q: searchText });
+const PREFIX = "RaAutocompleteInput";
+const defaultFilterOptions = createFilterOptions();
+const AutocompleteInputClasses = {
+  textField: `${PREFIX}-textField`
+};
+const StyledAutocomplete = styled(Autocomplete, {
+  name: PREFIX,
+  overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({
+  [`& .${AutocompleteInputClasses.textField}`]: {
+    minWidth: theme.spacing(20)
+  }
+}));
+const getSelectedItems = (choices = [], value, optionValue = "id", multiple) => {
+  if (multiple) {
+    return (Array.isArray(value != null ? value : []) ? value : [value]).map(
+      (item) => choices.find(
+        (choice) => String(item) === String(get(choice, optionValue))
+      )
+    ).filter((item) => !!item);
+  }
+  return choices.find(
+    (choice) => String(get(choice, optionValue)) === String(value)
+  ) || "";
+};
+const areSelectedItemsEqual = (selectedChoice, newSelectedChoice, optionValue = "id", multiple) => {
+  if (multiple) {
+    const selectedChoiceArray = selectedChoice != null ? selectedChoice : [];
+    const newSelectedChoiceArray = newSelectedChoice != null ? newSelectedChoice : [];
+    if (selectedChoiceArray.length !== newSelectedChoiceArray.length) {
+      return false;
+    }
+    const equalityArray = selectedChoiceArray.map(
+      (choice) => newSelectedChoiceArray.some(
+        (newChoice) => get(newChoice, optionValue) === get(choice, optionValue)
+      )
+    );
+    return !equalityArray.some((item) => item === false);
+  }
+  return get(selectedChoice, optionValue) === get(newSelectedChoice, optionValue);
+};
+const useSelectedChoice = (value, {
+  choices,
+  multiple,
+  optionValue
+}) => {
+  const selectedChoiceRef = useRef(
+    getSelectedItems(choices, value, optionValue, multiple)
+  );
+  const [selectedChoice, setSelectedChoice] = useState(
+    () => getSelectedItems(choices, value, optionValue, multiple)
+  );
+  useEffect(() => {
+    const newSelectedItems = getSelectedItems(
+      choices,
+      value,
+      optionValue,
+      multiple
+    );
+    if (!areSelectedItemsEqual(
+      selectedChoiceRef.current,
+      newSelectedItems,
+      optionValue,
+      multiple
+    )) {
+      selectedChoiceRef.current = newSelectedItems;
+      setSelectedChoice(newSelectedItems);
+    }
+  }, [choices, value, multiple, optionValue]);
+  return selectedChoice || null;
+};
+const AutocompleteCheckBoxInput = (props) => {
+  const _a = props, {
+    choices: choicesProp,
+    className,
+    blurOnSelect = false,
+    clearOnBlur = false,
+    selectOnFocus = true,
+    openOnFocus = true,
+    renderTags,
+    disableCloseOnSelect = true,
+    filterSelectedOptions = false,
+    renderOption: renderOption = null,
+    clearText = "ra.action.clear_input_value",
+    closeText = "ra.action.close",
+    create,
+    createLabel,
+    createItemLabel,
+    createValue,
+    debounce: debounceDelay = 250,
+    defaultValue,
+    emptyText,
+    emptyValue = "",
+    field: fieldOverride,
+    format,
+    helperText,
+    id: idOverride,
+    inputText,
+    isFetching: isFetchingProp,
+    isLoading: isLoadingProp,
+    isRequired: isRequiredOverride,
+    label,
+    limitChoicesToValue,
+    matchSuggestion,
+    margin,
+    fieldState: fieldStateOverride,
+    filterToQuery: filterToQueryProp = DefaultFilterToQuery,
+    formState: formStateOverride,
+    multiple = false,
+    noOptionsText,
+    onBlur,
+    onChange,
+    onCreate,
+    openText = "ra.action.open",
+    optionText,
+    optionValue,
+    parse,
+    resource: resourceProp,
+    shouldRenderSuggestions,
+    setFilter,
+    size,
+    source: sourceProp,
+    suggestionLimit = Infinity,
+    TextFieldProps: TextFieldProps2,
+    translateChoice,
+    validate,
+    variant
+  } = _a, rest = __objRest(_a, [
+    "choices",
+    "className",
+    "blurOnSelect",
+    "clearOnBlur",
+    "selectOnFocus",
+    "openOnFocus",
+    "renderTags",
+    "disableCloseOnSelect",
+    "filterSelectedOptions",
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+    "renderOption",
+    "clearText",
+    "closeText",
+    "create",
+    "createLabel",
+    "createItemLabel",
+    "createValue",
+    "debounce",
+    "defaultValue",
+    "emptyText",
+    "emptyValue",
+    "field",
+    "format",
+    "helperText",
+    "id",
+    "inputText",
+    "isFetching",
+    "isLoading",
+    "isRequired",
+    "label",
+    "limitChoicesToValue",
+    "matchSuggestion",
+    "margin",
+    "fieldState",
+    "filterToQuery",
+    "formState",
+    "multiple",
+    "noOptionsText",
+    "onBlur",
+    "onChange",
+    "onCreate",
+    "openText",
+    "optionText",
+    "optionValue",
+    "parse",
+    "resource",
+    "shouldRenderSuggestions",
+    "setFilter",
+    "size",
+    "source",
+    "suggestionLimit",
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    "TextFieldProps",
+    "translateChoice",
+    "validate",
+    "variant"
+  ]);
+  const filterToQuery = useEvent(filterToQueryProp);
+  const lastOnChangeEvent = useRef(null);
+  const {
+    allChoices,
+    isLoading,
+    error: fetchError,
+    resource,
+    source,
+    setFilters,
+    isFromReference
+  } = useChoicesContext({
+    choices: choicesProp,
+    isFetching: isFetchingProp,
+    isLoading: isLoadingProp,
+    resource: resourceProp,
+    source: sourceProp
+  });
+  const translate = useTranslate();
+  const {
+    id,
+    field,
+    isRequired,
+    fieldState: { error, invalid, isTouched },
+    formState: { isSubmitted }
+  } = useInput(__spreadValues({
+    defaultValue,
+    id: idOverride,
+    field: fieldOverride,
+    fieldState: fieldStateOverride,
+    formState: formStateOverride,
+    isRequired: isRequiredOverride,
+    onBlur,
+    onChange,
+    parse,
+    format,
+    resource,
+    source,
+    validate
+  }, rest));
+  const finalChoices = useMemo(
+    () => (
+      // eslint-disable-next-line eqeqeq
+      emptyText == void 0 || isRequired || multiple ? allChoices : [
+        {
+          [optionValue || "id"]: emptyValue,
+          [typeof optionText === "string" ? optionText : "name"]: translate(
+            emptyText,
+            {
+              _: emptyText
+            }
+          )
+        }
+      ].concat(allChoices)
+    ),
+    [
+      allChoices,
+      emptyValue,
+      emptyText,
+      isRequired,
+      multiple,
+      optionText,
+      optionValue,
+      translate
+    ]
+  );
+  const selectedChoice = useSelectedChoice(field.value, {
+    choices: finalChoices,
+    // @ts-ignore Expected.
+    multiple,
+    optionValue
+  });
+  useEffect(() => {
+    if (emptyValue == null) {
+      throw new Error(
+        "emptyValue being set to null or undefined is not supported. Use parse to turn the empty string into null."
+      );
+    }
+  }, [emptyValue]);
+  useEffect(() => {
+    if (isValidElement(optionText) && emptyText != void 0) {
+      throw new Error(
+        "optionText of type React element is not supported when setting emptyText"
+      );
+    }
+    if (isValidElement(optionText) && inputText == void 0) {
+      throw new Error(`
+If you provided a React element for the optionText prop, you must also provide the inputText prop (used for the text input)`);
+    }
+    if (isValidElement(optionText) && !isFromReference && // eslint-disable-next-line eqeqeq
+    matchSuggestion == void 0) {
+      throw new Error(`
+If you provided a React element for the optionText prop, you must also provide the matchSuggestion prop (used to match the user input with a choice)`);
+    }
+  }, [optionText, inputText, matchSuggestion, emptyText, isFromReference]);
+  useEffect(() => {
+    warning(
+      /* eslint-disable eqeqeq */
+      shouldRenderSuggestions != void 0 && noOptionsText == void 0,
+      "When providing a shouldRenderSuggestions function, we recommend you also provide the noOptionsText prop and set it to a text explaining users why no options are displayed. It supports translation keys."
+    );
+  }, [shouldRenderSuggestions, noOptionsText]);
+  const getRecordRepresentation = useGetRecordRepresentation(resource);
+  const { getChoiceText, getChoiceValue, getSuggestions } = useSuggestions({
+    choices: finalChoices,
+    limitChoicesToValue,
+    matchSuggestion,
+    optionText: optionText != null ? optionText : isFromReference ? getRecordRepresentation : void 0,
+    optionValue,
+    selectedItem: selectedChoice,
+    suggestionLimit,
+    translateChoice: translateChoice != null ? translateChoice : !isFromReference
+  });
+  const [filterValue, setFilterValue] = useState("");
+  const [pendingState, setPendingState] = useState(null);
+  const handleChange = (newValue) => {
+    var _a2, _b;
+    let processedValue;
+    if (multiple) {
+      if (Array.isArray(newValue)) {
+        processedValue = newValue.map(getChoiceValue);
+      } else {
+        processedValue = [...(_a2 = field.value) != null ? _a2 : [], getChoiceValue(newValue)];
+      }
+    } else {
+      processedValue = (_b = getChoiceValue(newValue)) != null ? _b : emptyValue;
+    }
+    if (lastOnChangeEvent.current[1] === "clear") {
+      field.onChange(processedValue);
+      return;
+    }
+    if (lastOnChangeEvent.current[0].currentTarget.nodeName === "svg") {
+      field.onChange(processedValue);
+      return;
+    }
+    if (lastOnChangeEvent.current[1] === "removeOption") {
+      setPendingState(
+        (_) => processedValue.filter((x) => !new Set(pendingState).has(x))
+      );
+      return;
+    }
+    setPendingState(
+      (prevState) => prevState ? Array.from(/* @__PURE__ */ new Set([...prevState, ...processedValue])) : Array.from(/* @__PURE__ */ new Set([...processedValue]))
+    );
+  };
+  const debouncedSetFilter = useCallback(
+    debounce((filter) => {
+      if (setFilter) {
+        return setFilter(filter);
+      }
+      if (choicesProp) {
+        return;
+      }
+      setFilters(filterToQuery(filter), [], true);
+    }, debounceDelay),
+    [debounceDelay, setFilters, setFilter]
+  );
+  const currentValue = useRef(field.value);
+  useEffect(() => {
+    if (!isEqual(currentValue.current, field.value)) {
+      currentValue.current = field.value;
+      debouncedSetFilter("");
+    }
+  }, [field.value]);
+  const {
+    getCreateItem,
+    handleChange: handleChangeWithCreateSupport,
+    createElement,
+    createId
+  } = useSupportCreateSuggestion({
+    create,
+    createLabel,
+    createItemLabel,
+    createValue,
+    handleChange,
+    filter: filterValue,
+    onCreate,
+    optionText
+  });
+  const getOptionLabel = useCallback(
+    (option, isListItem = false) => {
+      if (option == void 0) {
+        return "";
+      }
+      if (typeof option === "string") {
+        return option;
+      }
+      if ((option == null ? void 0 : option.id) === createId) {
+        return get(
+          option,
+          typeof optionText === "string" ? optionText : "name"
+        );
+      }
+      if (!isListItem && option[optionValue || "id"] === emptyValue) {
+        return get(
+          option,
+          typeof optionText === "string" ? optionText : "name"
+        );
+      }
+      if (!isListItem && inputText !== void 0) {
+        return inputText(option);
+      }
+      return getChoiceText(option);
+    },
+    [getChoiceText, inputText, createId, optionText, optionValue, emptyValue]
+  );
+  useEffect(() => {
+    if (!multiple) {
+      const optionLabel = getOptionLabel(selectedChoice);
+      if (typeof optionLabel === "string") {
+        setFilterValue(optionLabel);
+      } else {
+        throw new Error(
+          "When optionText returns a React element, you must also provide the inputText prop"
+        );
+      }
+    }
+  }, [getOptionLabel, multiple, selectedChoice]);
+  const doesQueryMatchSelection = useCallback(
+    (filter) => {
+      let selectedItemTexts;
+      if (multiple) {
+        selectedItemTexts = selectedChoice.map((item) => getOptionLabel(item));
+      } else {
+        selectedItemTexts = [getOptionLabel(selectedChoice)];
+      }
+      return selectedItemTexts.includes(filter);
+    },
+    [getOptionLabel, multiple, selectedChoice]
+  );
+  const doesQueryMatchSuggestion = useCallback(
+    (filter) => {
+      const hasOption = finalChoices ? finalChoices.some((choice) => getOptionLabel(choice) === filter) : false;
+      return doesQueryMatchSelection(filter) || hasOption;
+    },
+    [finalChoices, getOptionLabel, doesQueryMatchSelection]
+  );
+  const handleInputChange = (event, newInputValue, _reason) => {
+    if ((event == null ? void 0 : event.type) === "change" || !doesQueryMatchSelection(newInputValue)) {
+      setFilterValue(newInputValue);
+      debouncedSetFilter(newInputValue);
+    }
+  };
+  const filterOptions = (options, params) => {
+    let filteredOptions = isFromReference || // When used inside a reference, AutocompleteInput shouldn't do the filtering as it's done by the reference input
+    matchSuggestion || // When using element as optionText (and matchSuggestion), options are filtered by getSuggestions, so they shouldn't be filtered here
+    limitChoicesToValue ? options : defaultFilterOptions(options, params);
+    const { inputValue } = params;
+    if ((onCreate || create) && inputValue !== "" && !doesQueryMatchSuggestion(filterValue)) {
+      filteredOptions = filteredOptions.concat(getCreateItem(inputValue));
+    }
+    return filteredOptions;
+  };
+  const handleAutocompleteChange = (event, newValue, _reason) => {
+    lastOnChangeEvent.current = [event, _reason];
+    handleChangeWithCreateSupport(newValue !== null ? newValue : emptyValue);
+  };
+  const oneSecondHasPassed = useTimeout(1e3, filterValue);
+  const suggestions = useMemo(() => {
+    if (!isFromReference && (matchSuggestion || limitChoicesToValue)) {
+      return getSuggestions(filterValue);
+    }
+    return (finalChoices == null ? void 0 : finalChoices.slice(0, suggestionLimit)) || [];
+  }, [
+    finalChoices,
+    filterValue,
+    getSuggestions,
+    limitChoicesToValue,
+    matchSuggestion,
+    suggestionLimit,
+    isFromReference
+  ]);
+  const isOptionEqualToValue = (option, value) => {
+    return String(getChoiceValue(option)) === String(getChoiceValue(value));
+  };
+  const renderHelperText = !!fetchError || helperText !== false || (isTouched || isSubmitted) && invalid;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      StyledAutocomplete,
+      __spreadProps(__spreadValues({
+        className: clsx("ra-input", `ra-input-${source}`, className),
+        clearText: translate(clearText, { _: clearText }),
+        closeText: translate(closeText, { _: closeText }),
+        openText: translate(openText, { _: openText }),
+        id,
+        isOptionEqualToValue,
+        blurOnSelect,
+        clearOnBlur,
+        selectOnFocus,
+        openOnFocus,
+        disableCloseOnSelect,
+        filterSelectedOptions,
+        renderInput: (params) => /* @__PURE__ */ jsx(
+          TextField,
+          __spreadProps(__spreadValues(__spreadValues({
+            name: field.name,
+            label: /* @__PURE__ */ jsx(
+              FieldTitle,
+              {
+                label,
+                source,
+                resource: resourceProp,
+                isRequired
+              }
+            ),
+            error: !!fetchError || (isTouched || isSubmitted) && invalid,
+            helperText: renderHelperText ? /* @__PURE__ */ jsx(
+              InputHelperText,
+              {
+                error: (error == null ? void 0 : error.message) || (fetchError == null ? void 0 : fetchError.message),
+                helperText
+              }
+            ) : null,
+            margin,
+            variant,
+            className: AutocompleteInputClasses.textField
+          }, TextFieldProps2), params), {
+            size
+          })
+        ),
+        multiple,
+        renderTags: renderTags ? renderTags : (value, getTagProps) => {
+          const attribute = optionText;
+          return /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              title: value.map((item) => item[attribute]).join(" , "),
+              children: /* @__PURE__ */ jsx(
+                Chip,
+                {
+                  label: value[0][attribute] + (value.length > 1 ? " +" + (value.length - 1) : ""),
+                  sx: {
+                    ".MuiSvgIcon-root": {
+                      // FIXME: Workaround to allow choices deletion
+                      // Maybe related to storybook and mui using different versions of emotion
+                      zIndex: 100
+                    }
+                  },
+                  variant: "filled",
+                  size: "small"
+                }
+              )
+            }
+          );
+        },
+        noOptionsText: typeof noOptionsText === "string" ? translate(noOptionsText, { _: noOptionsText }) : noOptionsText
+      }, sanitizeInputRestProps(rest)), {
+        freeSolo: !!create || !!onCreate,
+        handleHomeEndKeys: !!create || !!onCreate,
+        filterOptions,
+        options: shouldRenderSuggestions == void 0 || // eslint-disable-line eqeqeq
+        shouldRenderSuggestions(filterValue) ? suggestions : [],
+        getOptionLabel,
+        inputValue: filterValue,
+        loading: isLoading && (!finalChoices || finalChoices.length === 0) && oneSecondHasPassed,
+        value: selectedChoice,
+        onChange: (e, val, reason) => {
+          handleAutocompleteChange(e, val, reason);
+        },
+        onInputChange: handleInputChange,
+        clearOnEscape: false,
+        renderOption: (p, option, { selected }) => {
+          const sel = selectedChoice && selectedChoice.find((ele) => ele.id === option.id) ? true : selected;
+          return /* @__PURE__ */ jsxs("li", __spreadProps(__spreadValues({}, p), { children: [
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                icon,
+                checkedIcon,
+                style: { marginRight: 8 },
+                defaultChecked: sel
+              }
+            ),
+            option[optionText]
+          ] }));
+        },
+        onClose: () => {
+          if (pendingState) {
+            field.onChange(pendingState);
+          }
+        }
+      })
+    ),
+    createElement
+  ] });
+};
+var AutoCompleteCheckBoxInput_default = AutocompleteCheckBoxInput;
+export {
+  AutocompleteInputClasses,
+  AutoCompleteCheckBoxInput_default as default
+};