@dashadmin/dash-components 1.3.25 → 1.3.28

package/dist/components/AutoCompleteArrayInput/AutoCompleteCheckBoxInput.js

@@ -1,3 +1,630 @@
-import{Fragment as Lt,jsx as f,jsxs as me}from"react/jsx-runtime";import{isValidElement as V,useCallback as z,useEffect as v,useMemo as ce,useRef as de,useState as pe}from"react";import{isEqual as it,get as y,debounce as st}from"lodash";import at from"clsx";import{Autocomplete as lt,Checkbox as ut,Chip as ct,TextField as dt,Tooltip as pt,createFilterOptions as ft}from"@mui/material";import{styled as gt}from"@mui/material/styles";import{FieldTitle as mt,useChoicesContext as ht,useInput as xt,useSuggestions as yt,useTimeout as Tt,useTranslate as St,warning as Ct,useGetRecordRepresentation as bt,useEvent as Rt,sanitizeInputRestProps as Ot}from"react-admin";import{InputHelperText as It,useSupportCreateSuggestion as Ft}from"react-admin";import vt from"@mui/icons-material/CheckBoxOutlineBlank";import Pt from"@mui/icons-material/CheckBox";const Et=f(vt,{fontSize:"small"}),At=f(Pt,{fontSize:"small"}),Mt=n=>({q:n}),fe="RaAutocompleteInput",kt=ft(),ge={textField:`${fe}-textField`},qt=gt(lt,{name:fe,overridesResolver:(n,o)=>o.root})(({theme:n})=>({[`& .${ge.textField}`]:{minWidth:n.spacing(20)}}));function wt(n,o,r="..."){const a=n.lastIndexOf(" ",o);return a===-1?n:n.substring(0,a)+r}const U=(n=[],o,r="id",a)=>a?(Array.isArray(o??[])?o:[o]).map(l=>n.find(g=>String(l)===String(y(g,r)))).filter(l=>!!l):n.find(l=>String(y(l,r))===String(o))||"",zt=(n,o,r="id",a)=>{if(a){const l=n??[],g=o??[];return l.length!==g.length?!1:!l.map(u=>g.some(B=>y(B,r)===y(u,r))).some(u=>u===!1)}return y(n,r)===y(o,r)},Bt=(n,{choices:o,multiple:r,optionValue:a})=>{const l=de(U(o,n,a,r)),[g,A]=pe(()=>U(o,n,a,r));return v(()=>{const u=U(o,n,a,r);zt(l.current,u,a,r)||(l.current=u,A(u))},[o,n,r,a]),g||null},Dt=n=>{const{choices:o,className:r,blurOnSelect:a=!1,clearOnBlur:l=!1,selectOnFocus:g=!0,openOnFocus:A=!0,renderTags:u,disableCloseOnSelect:B=!0,filterSelectedOptions:he=!1,renderOption:_t=null,clearText:$="ra.action.clear_input_value",closeText:X="ra.action.close",create:M,createLabel:xe,createItemLabel:ye,createValue:Te,debounce:G=250,defaultValue:Se,emptyText:C,emptyValue:m="",field:Ce,format:be,helperText:K,id:Re,inputText:P,isFetching:Oe,isLoading:Ie,isRequired:Fe,label:ve,limitChoicesToValue:k,matchSuggestion:b,margin:Pe,fieldState:Ee,filterToQuery:Ae=Mt,formState:Me,multiple:c=!1,noOptionsText:R,onBlur:ke,onChange:qe,onCreate:q,openText:j="ra.action.open",optionText:i,optionValue:O,parse:we,resource:J,shouldRenderSuggestions:w,setFilter:D,size:ze,source:Be,suggestionLimit:L=1/0,TextFieldProps:De,translateChoice:Le,validate:_e,variant:Qe,...Y}=n,Ne=Rt(Ae),{allChoices:_,isLoading:We,error:Q,resource:Z,source:N,setFilters:ee,isFromReference:T}=ht({choices:o,isFetching:Oe,isLoading:Ie,resource:J,source:Be}),I=St(),{id:He,field:h,isRequired:W,fieldState:{error:Ve,invalid:te,isTouched:ne},formState:{isSubmitted:oe}}=xt({defaultValue:Se,id:Re,field:Ce,fieldState:Ee,formState:Me,isRequired:Fe,onBlur:ke,onChange:qe,parse:we,format:be,resource:Z,source:N,validate:_e,...Y}),d=ce(()=>C==null||W||c?_:[{[O||"id"]:m,[typeof i=="string"?i:"name"]:I(C,{_:C})}].concat(_),[_,m,C,W,c,i,O,I]),p=Bt(h.value,{choices:d,multiple:c,optionValue:O});v(()=>{if(m==null)throw new Error("emptyValue being set to null or undefined is not supported. Use parse to turn the empty string into null.")},[m]),v(()=>{if(V(i)&&C!=null)throw new Error("optionText of type React element is not supported when setting emptyText");if(V(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(V(i)&&!T&&b==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,b,C,T]),v(()=>{Ct(w!=null&&R==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.")},[w,R]);const Ue=bt(Z),{getChoiceText:re,getChoiceValue:E,getSuggestions:ie}=yt({choices:d,limitChoicesToValue:k,matchSuggestion:b,optionText:i??(T?Ue:void 0),optionValue:O,selectedItem:p,suggestionLimit:L,translateChoice:Le??!T}),[S,se]=pe(""),$e=e=>{let t;c?Array.isArray(e)?t=e.map(E):t=[...h.value??[],E(e)]:t=E(e)??m,h.onChange(t)},ae=z(st(e=>{if(D)return D(e);o||ee(Ne(e),[],!0)},G),[G,ee,D]),le=de(h.value);v(()=>{it(le.current,h.value)||(le.current=h.value,ae(""))},[h.value]);const{getCreateItem:Xe,handleChange:Ge,createElement:Ke,createId:ue}=Ft({create:M,createLabel:xe,createItemLabel:ye,createValue:Te,handleChange:$e,filter:S,onCreate:q,optionText:i}),x=z((e,t=!1)=>e==null?"":typeof e=="string"?e:e?.id===ue?y(e,typeof i=="string"?i:"name"):!t&&e[O||"id"]===m?y(e,typeof i=="string"?i:"name"):!t&&P!==void 0?P(e):re(e),[re,P,ue,i,O,m]);v(()=>{if(!c){const e=x(p);if(typeof e=="string")se(e);else throw new Error("When optionText returns a React element, you must also provide the inputText prop")}},[x,c,p]);const H=z(e=>{let t;return c?t=p.map(s=>x(s)):t=[x(p)],t.includes(e)},[x,c,p]),je=z(e=>{const t=d?d.some(s=>x(s)===e):!1;return H(e)||t},[d,x,H]),Je=(e,t,s)=>{(e?.type==="change"||!H(t))&&(se(t),ae(t))},Ye=(e,t)=>{let s=T||b||k?e:kt(e,t);const{inputValue:F}=t;return(q||M)&&F!==""&&!je(S)&&(s=s.concat(Xe(F))),s},Ze=(e,t,s)=>{Ge(t!==null?t:m)},et=Tt(1e3,S),tt=ce(()=>!T&&(b||k)?ie(S):d?.slice(0,L)||[],[d,S,ie,k,b,L,T]),nt=(e,t)=>String(E(e))===String(E(t)),ot=!!Q||K!==!1||(ne||oe)&&te;return me(Lt,{children:[f(qt,{className:at("ra-input",`ra-input-${N}`,r),clearText:I($,{_:$}),closeText:I(X,{_:X}),openText:I(j,{_:j}),id:He,isOptionEqualToValue:nt,blurOnSelect:a,clearOnBlur:l,selectOnFocus:g,openOnFocus:A,disableCloseOnSelect:B,filterSelectedOptions:he,renderInput:e=>f(dt,{name:h.name,label:f(mt,{label:ve,source:N,resource:J,isRequired:W}),error:!!Q||(ne||oe)&&te,helperText:ot?f(It,{error:Ve?.message||Q?.message,helperText:K}):null,margin:Pe,variant:Qe,className:ge.textField,...De,...e,size:ze}),multiple:c,renderTags:u||((e,t)=>{const s=i;return f(pt,{title:e.map(F=>F[s]).join(" , "),children:f(ct,{label:wt(e[0][s],10)+(e.length>1?" +"+(e.length-1):""),sx:{".MuiSvgIcon-root":{zIndex:100}},variant:"filled",size:"small"})})}),noOptionsText:typeof R=="string"?I(R,{_:R}):R,...Ot(Y),freeSolo:!!M||!!q,handleHomeEndKeys:!!M||!!q,filterOptions:Ye,options:w==null||w(S)?tt:[],getOptionLabel:x,inputValue:S,loading:We&&(!d||d.length===0)&&et,value:p,onChange:(e,t,s)=>{Ze(e,t,s)},onInputChange:Je,clearOnEscape:!1,renderOption:(e,t,{selected:s})=>{const F=p&&p.find(rt=>rt.id===t.id)?!0:s;return me("li",{...e,children:[f(ut,{icon:Et,checkedIcon:At,style:{marginRight:8},checked:F}),t[i]]})}}),Ke]})};var rn=Dt;export{ge as AutocompleteInputClasses,rn 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)
+  }
+}));
+function cutString(str, length, suffix = "...") {
+  const lastSpaceIndex = str.lastIndexOf(" ", length);
+  if (lastSpaceIndex === -1) {
+    return str;
+  }
+  return str.substring(0, lastSpaceIndex) + suffix;
+}
+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 {
+    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 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;
+    }
+    field.onChange(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) => {
+    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: cutString(value[0][attribute], 10) + (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 },
+                checked: sel
+              }
+            ),
+            option[optionText]
+          ] }));
+        }
+      })
+    ),
+    createElement
+  ] });
+};
+var AutoCompleteCheckBoxInput_default = AutocompleteCheckBoxInput;
+export {
+  AutocompleteInputClasses,
+  AutoCompleteCheckBoxInput_default as default
+};

package/dist/components/AutoCompleteArrayInput/AutocompleteCheckBoxArrayInput.js

@@ -1 +1,53 @@
-import{jsx as a}from"react/jsx-runtime";const o=({defaultValue:e,...t})=>a(AutocompleteCheckBoxInput,{...t,multiple:!0,defaultValue:e??[]});var d=o;export{d 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 { jsx } from "react/jsx-runtime";
+const AutocompleteCheckBoxArrayInput = (_a) => {
+  var _b = _a, {
+    defaultValue
+  } = _b, props = __objRest(_b, [
+    "defaultValue"
+  ]);
+  return (
+    /* @ts-ignore */
+    /* @__PURE__ */ jsx(
+      AutocompleteCheckBoxInput,
+      __spreadProps(__spreadValues({}, props), {
+        multiple: true,
+        defaultValue: defaultValue != null ? defaultValue : []
+      })
+    )
+  );
+};
+var AutocompleteCheckBoxArrayInput_default = AutocompleteCheckBoxArrayInput;
+export {
+  AutocompleteCheckBoxArrayInput_default as default
+};