@dashadmin/dash-components 1.3.25 → 1.3.28

package/dist/components/SearchableSelects/RASearchableSelectCheckboxes.js

@@ -1 +1,479 @@
-import{jsx as n,jsxs as p}from"react/jsx-runtime";import{Box as u,Checkbox as G,CircularProgress as ge,TextField as J,Typography as b,Chip as U,List as be,ListItem as z,ListItemButton as X,ListItemIcon as Y,ListItemText as E,Paper as xe,Popper as Se,ClickAwayListener as Ie,InputAdornment as P,IconButton as Z}from"@mui/material";import{useEffect as M,useState as m,useRef as Le}from"react";import{useGetList as Ce}from"react-admin";import{LoadingIndicator as ke}from"react-admin";import Be from"@mui/icons-material/Search";import Te from"@mui/icons-material/Clear";import Ae from"@mui/icons-material/ExpandMore";import Oe from"@mui/icons-material/ExpandLess";const je=({isMultiple:we=!0,searchResults:x=50,minSearch:S=1,minOptions:F=10,timerSearch:K=300,resource:ee,selectLabel:te,renderText:C,transformData:ze=y=>y,queryFilter:ne="q",defaultValues:k=void 0,value:L,onChange:f,isEmpty:Ee=!1,filter:oe,isOptionEqualToValue:Pe,viewAttribute:d=null,valueKeyId:a="id",transformOption:v,disabled:V=!1,placeholder:re="",emptyText:Me="",fullWidth:D=!0,maxHeight:W=300,showSelectAll:se=!0,showSelectedCount:$=!0})=>{const[y,B]=m(!1),[ie,R]=m(!1),[l,ae]=m([]),[c,T]=m(""),[s,h]=m([]),[le,ce]=m(void 0),A=Le(null),[q,H]=m(""),O=(e,t)=>typeof v=="function"?v(e,l,t):e,_=(()=>{const e=L||k;if(!e)return[];if(Array.isArray(e))return e.map(r=>typeof r=="object"?r[a]:r).filter(Boolean);const t=typeof e=="object"?e[a]:e;return t?[t]:[]})(),pe=()=>{const e={...oe};return _.length>0&&(e.includes=_),c&&c.length>=S?(e[ne]=c,e.mixed_results=!0,e.min_options=F,e.limit=x):e.limit=Math.max(F,x),e},{data:I,isLoading:N,error:ve}=Ce(ee,{meta:{removeSortFilters:!0},filter:pe()});M(()=>{if(I){let t=(Array.isArray(I)?I:Object.values(I)).map((r,o)=>{const i=c&&c.length>=S?r[d]&&r[d].toLowerCase().includes(c.toLowerCase()):!0;return{...r,key:`option-${r[a]||o}`,isSearchMatch:i,priority:i?1:2}});t.sort((r,o)=>{if(r.priority!==o.priority)return r.priority-o.priority;const i=r[d]||r.name||"",w=o[d]||o.name||"";return i.localeCompare(w)}),t.length>x&&(t=t.slice(0,x)),ae(t)}},[I,a,c,S,d,x]),M(()=>{const e=L!==void 0?L:k;if(e==null){h([]),R(!0);return}let t=[];Array.isArray(e)?t=e:e&&(t=[e]),h(t),R(!0)},[L,k]),M(()=>{if(l.length>0&&s.length>0){const e=s.map(t=>{if(typeof t=="object"&&t[d])return t;const r=typeof t=="object"?t[a]:t;return l.find(o=>o[a]===r)||t});h(e)}},[l,d,a]);const de=(e,t=300)=>{clearTimeout(le),ce(setTimeout(()=>{e()},t))},ue=e=>{const t=e.target.value;H(t),t&&t!==""&&t.length>=S?de(()=>T(t),K):t===""&&T("")},me=()=>{H(""),T("")},g=e=>s.some(t=>{const r=typeof t=="object"?t[a]:t,o=typeof e=="object"?e[a]:e;return r===o}),Q=e=>{const t=g(e);let r;t?r=s.filter(o=>{const i=typeof o=="object"?o[a]:o,w=typeof e=="object"?e[a]:e;return i!==w}):r=[...s,e],h(r),f&&f(r)},fe=()=>{if(l.every(t=>g(t))){const t=l.map(o=>typeof o=="object"?o[a]:o),r=s.filter(o=>{const i=typeof o=="object"?o[a]:o;return!t.includes(i)});h(r),f&&f(r)}else{const t=l.filter(o=>!g(o)),r=[...s,...t];h(r),f&&f(r)}},ye=()=>s.length===0?re||"Seleccionar opciones...":$&&s.length>2?`${s.length} elementos seleccionados`:s.slice(0,2).map(e=>C(O(e,"display"),"display")).join(", ")+(s.length>2?`, +${s.length-2} m\xE1s`:""),j=l.length>0&&l.every(e=>g(e)),he=l.some(e=>g(e));return ie?p(u,{ref:A,sx:{position:"relative",width:D?"100%":"auto"},children:[n(J,{fullWidth:D,label:te,value:ye(),onClick:()=>B(!y),disabled:V,variant:"outlined",InputProps:{readOnly:!0,endAdornment:n(P,{position:"end",children:n(Z,{onClick:e=>{e.stopPropagation(),B(!y)},edge:"end",size:"small",children:y?n(Oe,{}):n(Ae,{})})})},sx:{cursor:"pointer","& .MuiInputBase-input":{cursor:"pointer"}}}),s.length>0&&p(u,{sx:{mt:1,display:"flex",flexWrap:"wrap",gap:.5},children:[s.slice(0,5).map((e,t)=>n(U,{label:C(O(e,"chip"),"chip"),size:"small",onDelete:()=>Q(e),disabled:V},`chip-${e[a]||t}`)),s.length>5&&n(U,{label:`+${s.length-5} m\xE1s`,size:"small",variant:"outlined"})]}),n(Se,{open:y,anchorEl:A.current,placement:"bottom-start",style:{zIndex:1300,width:A.current?.offsetWidth},children:n(Ie,{onClickAway:()=>B(!1),children:p(xe,{elevation:8,sx:{maxHeight:W+100,width:"100%",overflow:"hidden",display:"flex",flexDirection:"column"},children:[n(u,{sx:{p:2,borderBottom:"1px solid #e0e0e0"},children:n(J,{fullWidth:!0,size:"small",placeholder:"Buscar...",value:q,onChange:ue,InputProps:{startAdornment:n(P,{position:"start",children:n(Be,{fontSize:"small"})}),endAdornment:q&&n(P,{position:"end",children:n(Z,{size:"small",onClick:me,children:n(Te,{fontSize:"small"})})})}})}),se&&l.length>0&&n(u,{sx:{borderBottom:"1px solid #e0e0e0"},children:n(z,{disablePadding:!0,children:p(X,{onClick:fe,dense:!0,children:[n(Y,{children:n(G,{checked:j,indeterminate:he&&!j,size:"small"})}),n(E,{primary:p(b,{variant:"body2",fontWeight:"bold",children:[j?"Deseleccionar todo":"Seleccionar todo",c&&` (${l.length} resultados)`]})})]})})}),N&&p(u,{sx:{p:2,display:"flex",justifyContent:"center",alignItems:"center"},children:[n(ge,{size:20}),n(b,{variant:"body2",sx:{ml:1},children:"Cargando opciones..."})]}),!N&&n(be,{sx:{maxHeight:W,overflow:"auto",py:0},children:l.length===0?n(z,{children:n(E,{primary:n(b,{variant:"body2",color:"text.secondary",textAlign:"center",children:c?"No se encontraron resultados":"No hay opciones disponibles"})})}):l.map((e,t)=>{const r=g(e),o=e.isSearchMatch,i=c&&c.length>=S;return n(z,{disablePadding:!0,children:p(X,{onClick:()=>Q(e),dense:!0,sx:{backgroundColor:i&&o?"rgba(25, 118, 210, 0.04)":"transparent",borderLeft:i&&o?"3px solid #1976d2":"none",paddingLeft:i&&o?1:2,"&:hover":{backgroundColor:i&&o?"rgba(25, 118, 210, 0.08)":"rgba(0, 0, 0, 0.04)"}},children:[n(Y,{children:n(G,{checked:r,size:"small",tabIndex:-1,disableRipple:!0})}),n(E,{primary:p(u,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[n(b,{variant:"body2",sx:{fontWeight:i&&o?"bold":"normal",opacity:i&&!o?.7:1},children:C(O(e,"option"),"option")}),i&&o&&n(b,{variant:"caption",sx:{color:"#1976d2",fontWeight:"bold",fontSize:"0.75rem"},children:"\u2713"})]})})]})},e.key||`option-${t}`)})}),$&&s.length>0&&n(u,{sx:{p:1,borderTop:"1px solid #e0e0e0",backgroundColor:"#f5f5f5"},children:p(b,{variant:"caption",color:"text.secondary",children:[s.length," elemento",s.length!==1?"s":""," seleccionado",s.length!==1?"s":""]})})]})})})]}):n(ke,{})};var Je=je;export{je as SearchableSelectCheckboxes,Je 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));
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Box,
+  Checkbox,
+  CircularProgress,
+  TextField,
+  Typography,
+  Chip,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Paper,
+  Popper,
+  ClickAwayListener,
+  InputAdornment,
+  IconButton
+} from "@mui/material";
+import { useEffect, useState, useRef } from "react";
+import { useGetList } from "react-admin";
+import { LoadingIndicator } from "react-admin";
+import SearchIcon from "@mui/icons-material/Search";
+import ClearIcon from "@mui/icons-material/Clear";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+const SearchableSelectCheckboxes = ({
+  isMultiple = true,
+  // Default to true for checkbox version
+  searchResults = 50,
+  minSearch = 1,
+  minOptions = 10,
+  timerSearch = 300,
+  resource,
+  selectLabel,
+  renderText,
+  transformData = (val) => val,
+  queryFilter = "q",
+  defaultValues = void 0,
+  value,
+  onChange,
+  isEmpty = false,
+  filter,
+  isOptionEqualToValue,
+  viewAttribute = null,
+  valueKeyId = "id",
+  transformOption,
+  disabled = false,
+  placeholder = "",
+  emptyText = "",
+  fullWidth = true,
+  maxHeight = 300,
+  showSelectAll = true,
+  showSelectedCount = true
+}) => {
+  var _a;
+  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 anchorRef = useRef(null);
+  const [searchInputValue, setSearchInputValue] = useState("");
+  const _transformOption = (option, caller) => {
+    if (typeof transformOption === "function") {
+      return transformOption(option, parsedOptions, caller);
+    }
+    return option;
+  };
+  const getIncludes = () => {
+    const currentValue = value || defaultValues;
+    if (!currentValue) return [];
+    if (Array.isArray(currentValue)) {
+      return currentValue.map(
+        (item) => typeof item === "object" ? item[valueKeyId] : item
+      ).filter(Boolean);
+    }
+    const id = typeof currentValue === "object" ? currentValue[valueKeyId] : currentValue;
+    return id ? [id] : [];
+  };
+  const includes = getIncludes();
+  const buildFilterParams = () => {
+    const baseFilter = __spreadValues({}, filter);
+    if (includes.length > 0) {
+      baseFilter.includes = includes;
+    }
+    if (q && q.length >= minSearch) {
+      baseFilter[queryFilter] = q;
+      baseFilter.mixed_results = true;
+      baseFilter.min_options = minOptions;
+      baseFilter.limit = searchResults;
+    } else {
+      baseFilter.limit = Math.max(minOptions, searchResults);
+    }
+    return baseFilter;
+  };
+  const {
+    data: resourceSearchResults,
+    isLoading: isResourceSearchLoading,
+    error: isResourceSearchErrored
+  } = useGetList(resource, {
+    meta: { removeSortFilters: true },
+    filter: buildFilterParams()
+  });
+  useEffect(() => {
+    if (resourceSearchResults) {
+      const resultsArray = Array.isArray(resourceSearchResults) ? resourceSearchResults : Object.values(resourceSearchResults);
+      let processedOptions = resultsArray.map((ele, index) => {
+        const isSearchMatch = q && q.length >= minSearch ? ele[viewAttribute] && ele[viewAttribute].toLowerCase().includes(q.toLowerCase()) : true;
+        return __spreadProps(__spreadValues({}, ele), {
+          key: `option-${ele[valueKeyId] || index}`,
+          isSearchMatch,
+          priority: isSearchMatch ? 1 : 2
+        });
+      });
+      processedOptions.sort((a, b) => {
+        if (a.priority !== b.priority) {
+          return a.priority - b.priority;
+        }
+        const nameA = a[viewAttribute] || a.name || "";
+        const nameB = b[viewAttribute] || b.name || "";
+        return nameA.localeCompare(nameB);
+      });
+      if (processedOptions.length > searchResults) {
+        processedOptions = processedOptions.slice(0, searchResults);
+      }
+      setParsedOptions(processedOptions);
+    }
+  }, [resourceSearchResults, valueKeyId, q, minSearch, viewAttribute, searchResults]);
+  useEffect(() => {
+    const currentValue = value !== void 0 ? value : defaultValues;
+    if (currentValue === null || currentValue === void 0) {
+      setSelectedOptions([]);
+      setFullyLoaded(true);
+      return;
+    }
+    let initialSelectedOptions = [];
+    if (Array.isArray(currentValue)) {
+      initialSelectedOptions = currentValue;
+    } else if (currentValue) {
+      initialSelectedOptions = [currentValue];
+    }
+    setSelectedOptions(initialSelectedOptions);
+    setFullyLoaded(true);
+  }, [value, defaultValues]);
+  useEffect(() => {
+    if (parsedOptions.length > 0 && selectedOptions.length > 0) {
+      const updatedOptions = selectedOptions.map((selectedOption) => {
+        if (typeof selectedOption === "object" && selectedOption[viewAttribute]) {
+          return selectedOption;
+        }
+        const id = typeof selectedOption === "object" ? selectedOption[valueKeyId] : selectedOption;
+        return parsedOptions.find((option) => option[valueKeyId] === id) || selectedOption;
+      });
+      setSelectedOptions(updatedOptions);
+    }
+  }, [parsedOptions, viewAttribute, valueKeyId]);
+  const debounce = (fn, delay = 300) => {
+    clearTimeout(timeOutSearch);
+    setTimeOutSearch(
+      setTimeout(() => {
+        fn();
+      }, delay)
+    );
+  };
+  const handleSearchChange = (event) => {
+    const searchValue = event.target.value;
+    setSearchInputValue(searchValue);
+    if (searchValue && searchValue !== "" && searchValue.length >= minSearch) {
+      debounce(() => setQ(searchValue), timerSearch);
+    } else if (searchValue === "") {
+      setQ("");
+    }
+  };
+  const handleClearSearch = () => {
+    setSearchInputValue("");
+    setQ("");
+  };
+  const isOptionSelected = (option) => {
+    return selectedOptions.some((selected) => {
+      const selectedId = typeof selected === "object" ? selected[valueKeyId] : selected;
+      const optionId = typeof option === "object" ? option[valueKeyId] : option;
+      return selectedId === optionId;
+    });
+  };
+  const handleOptionToggle = (option) => {
+    const isSelected = isOptionSelected(option);
+    let newSelectedOptions;
+    if (isSelected) {
+      newSelectedOptions = selectedOptions.filter((selected) => {
+        const selectedId = typeof selected === "object" ? selected[valueKeyId] : selected;
+        const optionId = typeof option === "object" ? option[valueKeyId] : option;
+        return selectedId !== optionId;
+      });
+    } else {
+      newSelectedOptions = [...selectedOptions, option];
+    }
+    setSelectedOptions(newSelectedOptions);
+    if (onChange) {
+      onChange(newSelectedOptions);
+    }
+  };
+  const handleSelectAll = () => {
+    const allSelected = parsedOptions.every((option) => isOptionSelected(option));
+    if (allSelected) {
+      const visibleIds = parsedOptions.map(
+        (option) => typeof option === "object" ? option[valueKeyId] : option
+      );
+      const newSelectedOptions = selectedOptions.filter((selected) => {
+        const selectedId = typeof selected === "object" ? selected[valueKeyId] : selected;
+        return !visibleIds.includes(selectedId);
+      });
+      setSelectedOptions(newSelectedOptions);
+      if (onChange) {
+        onChange(newSelectedOptions);
+      }
+    } else {
+      const newOptions = parsedOptions.filter((option) => !isOptionSelected(option));
+      const newSelectedOptions = [...selectedOptions, ...newOptions];
+      setSelectedOptions(newSelectedOptions);
+      if (onChange) {
+        onChange(newSelectedOptions);
+      }
+    }
+  };
+  const getSelectedDisplayText = () => {
+    if (selectedOptions.length === 0) {
+      return placeholder || "Seleccionar opciones...";
+    }
+    if (showSelectedCount && selectedOptions.length > 2) {
+      return `${selectedOptions.length} elementos seleccionados`;
+    }
+    return selectedOptions.slice(0, 2).map((option) => renderText(_transformOption(option, "display"), "display")).join(", ") + (selectedOptions.length > 2 ? `, +${selectedOptions.length - 2} m\xE1s` : "");
+  };
+  const allVisibleSelected = parsedOptions.length > 0 && parsedOptions.every((option) => isOptionSelected(option));
+  const someVisibleSelected = parsedOptions.some((option) => isOptionSelected(option));
+  if (!fullyLoaded) return /* @__PURE__ */ jsx(LoadingIndicator, {});
+  return /* @__PURE__ */ jsxs(Box, { ref: anchorRef, sx: { position: "relative", width: fullWidth ? "100%" : "auto" }, children: [
+    /* @__PURE__ */ jsx(
+      TextField,
+      {
+        fullWidth,
+        label: selectLabel,
+        value: getSelectedDisplayText(),
+        onClick: () => setOpen(!open),
+        disabled,
+        variant: "outlined",
+        InputProps: {
+          readOnly: true,
+          endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                setOpen(!open);
+              },
+              edge: "end",
+              size: "small",
+              children: open ? /* @__PURE__ */ jsx(ExpandLessIcon, {}) : /* @__PURE__ */ jsx(ExpandMoreIcon, {})
+            }
+          ) })
+        },
+        sx: {
+          cursor: "pointer",
+          "& .MuiInputBase-input": {
+            cursor: "pointer"
+          }
+        }
+      }
+    ),
+    selectedOptions.length > 0 && /* @__PURE__ */ jsxs(Box, { sx: { mt: 1, display: "flex", flexWrap: "wrap", gap: 0.5 }, children: [
+      selectedOptions.slice(0, 5).map((option, index) => /* @__PURE__ */ jsx(
+        Chip,
+        {
+          label: renderText(_transformOption(option, "chip"), "chip"),
+          size: "small",
+          onDelete: () => handleOptionToggle(option),
+          disabled
+        },
+        `chip-${option[valueKeyId] || index}`
+      )),
+      selectedOptions.length > 5 && /* @__PURE__ */ jsx(
+        Chip,
+        {
+          label: `+${selectedOptions.length - 5} m\xE1s`,
+          size: "small",
+          variant: "outlined"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Popper,
+      {
+        open,
+        anchorEl: anchorRef.current,
+        placement: "bottom-start",
+        style: { zIndex: 1300, width: (_a = anchorRef.current) == null ? void 0 : _a.offsetWidth },
+        children: /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: () => setOpen(false), children: /* @__PURE__ */ jsxs(
+          Paper,
+          {
+            elevation: 8,
+            sx: {
+              maxHeight: maxHeight + 100,
+              width: "100%",
+              overflow: "hidden",
+              display: "flex",
+              flexDirection: "column"
+            },
+            children: [
+              /* @__PURE__ */ jsx(Box, { sx: { p: 2, borderBottom: "1px solid #e0e0e0" }, children: /* @__PURE__ */ jsx(
+                TextField,
+                {
+                  fullWidth: true,
+                  size: "small",
+                  placeholder: "Buscar...",
+                  value: searchInputValue,
+                  onChange: handleSearchChange,
+                  InputProps: {
+                    startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(SearchIcon, { fontSize: "small" }) }),
+                    endAdornment: searchInputValue && /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        size: "small",
+                        onClick: handleClearSearch,
+                        children: /* @__PURE__ */ jsx(ClearIcon, { fontSize: "small" })
+                      }
+                    ) })
+                  }
+                }
+              ) }),
+              showSelectAll && parsedOptions.length > 0 && /* @__PURE__ */ jsx(Box, { sx: { borderBottom: "1px solid #e0e0e0" }, children: /* @__PURE__ */ jsx(ListItem, { disablePadding: true, children: /* @__PURE__ */ jsxs(ListItemButton, { onClick: handleSelectAll, dense: true, children: [
+                /* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    checked: allVisibleSelected,
+                    indeterminate: someVisibleSelected && !allVisibleSelected,
+                    size: "small"
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(
+                  ListItemText,
+                  {
+                    primary: /* @__PURE__ */ jsxs(Typography, { variant: "body2", fontWeight: "bold", children: [
+                      allVisibleSelected ? "Deseleccionar todo" : "Seleccionar todo",
+                      q && ` (${parsedOptions.length} resultados)`
+                    ] })
+                  }
+                )
+              ] }) }) }),
+              isResourceSearchLoading && /* @__PURE__ */ jsxs(Box, { sx: { p: 2, display: "flex", justifyContent: "center", alignItems: "center" }, children: [
+                /* @__PURE__ */ jsx(CircularProgress, { size: 20 }),
+                /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { ml: 1 }, children: "Cargando opciones..." })
+              ] }),
+              !isResourceSearchLoading && /* @__PURE__ */ jsx(
+                List,
+                {
+                  sx: {
+                    maxHeight,
+                    overflow: "auto",
+                    py: 0
+                  },
+                  children: parsedOptions.length === 0 ? /* @__PURE__ */ jsx(ListItem, { children: /* @__PURE__ */ jsx(
+                    ListItemText,
+                    {
+                      primary: /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", textAlign: "center", children: q ? "No se encontraron resultados" : "No hay opciones disponibles" })
+                    }
+                  ) }) : parsedOptions.map((option, index) => {
+                    const isSelected = isOptionSelected(option);
+                    const isSearchMatch = option.isSearchMatch;
+                    const hasSearchQuery = q && q.length >= minSearch;
+                    return /* @__PURE__ */ jsx(ListItem, { disablePadding: true, children: /* @__PURE__ */ jsxs(
+                      ListItemButton,
+                      {
+                        onClick: () => handleOptionToggle(option),
+                        dense: true,
+                        sx: {
+                          // Style search matches differently
+                          backgroundColor: hasSearchQuery && isSearchMatch ? "rgba(25, 118, 210, 0.04)" : "transparent",
+                          borderLeft: hasSearchQuery && isSearchMatch ? "3px solid #1976d2" : "none",
+                          paddingLeft: hasSearchQuery && isSearchMatch ? 1 : 2,
+                          "&:hover": {
+                            backgroundColor: hasSearchQuery && isSearchMatch ? "rgba(25, 118, 210, 0.08)" : "rgba(0, 0, 0, 0.04)"
+                          }
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(
+                            Checkbox,
+                            {
+                              checked: isSelected,
+                              size: "small",
+                              tabIndex: -1,
+                              disableRipple: true
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx(
+                            ListItemText,
+                            {
+                              primary: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+                                /* @__PURE__ */ jsx(
+                                  Typography,
+                                  {
+                                    variant: "body2",
+                                    sx: {
+                                      fontWeight: hasSearchQuery && isSearchMatch ? "bold" : "normal",
+                                      opacity: hasSearchQuery && !isSearchMatch ? 0.7 : 1
+                                    },
+                                    children: renderText(_transformOption(option, "option"), "option")
+                                  }
+                                ),
+                                hasSearchQuery && isSearchMatch && /* @__PURE__ */ jsx(
+                                  Typography,
+                                  {
+                                    variant: "caption",
+                                    sx: {
+                                      color: "#1976d2",
+                                      fontWeight: "bold",
+                                      fontSize: "0.75rem"
+                                    },
+                                    children: "\u2713"
+                                  }
+                                )
+                              ] })
+                            }
+                          )
+                        ]
+                      }
+                    ) }, option.key || `option-${index}`);
+                  })
+                }
+              ),
+              showSelectedCount && selectedOptions.length > 0 && /* @__PURE__ */ jsx(
+                Box,
+                {
+                  sx: {
+                    p: 1,
+                    borderTop: "1px solid #e0e0e0",
+                    backgroundColor: "#f5f5f5"
+                  },
+                  children: /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.secondary", children: [
+                    selectedOptions.length,
+                    " elemento",
+                    selectedOptions.length !== 1 ? "s" : "",
+                    " seleccionado",
+                    selectedOptions.length !== 1 ? "s" : ""
+                  ] })
+                }
+              )
+            ]
+          }
+        ) })
+      }
+    )
+  ] });
+};
+var RASearchableSelectCheckboxes_default = SearchableSelectCheckboxes;
+export {
+  SearchableSelectCheckboxes,
+  RASearchableSelectCheckboxes_default as default
+};