componentes-sinco 1.1.41 → 1.1.42

package/dist/index.d.cts

@@ -516,8 +516,12 @@ interface SCAutocompleteProps<T> {
     inputChange?: (value: string) => void;
     maxCheck?: number;
     width?: string;
+    chipOutside?: {
+        type: "default" | "avatar";
+        textSeccion?: string;
+    };
 }
-declare function SCAutocomplete<T>({ label, data, columnGroup, getItemValue, typeFormat, checkMassive, deleteType, fnAplicar, required, disabled, background, setState, state, inputChange, maxCheck, width, }: SCAutocompleteProps<T>): React__default.JSX.Element;
+declare function SCAutocomplete<T>({ label, data, columnGroup, getItemValue, typeFormat, checkMassive, deleteType, fnAplicar, required, disabled, background, setState, state, inputChange, maxCheck, width, chipOutside, }: SCAutocompleteProps<T>): React__default.JSX.Element;
 
 interface SCCalendarSwipeableProps {
     background?: string;

package/dist/index.d.ts

@@ -516,8 +516,12 @@ interface SCAutocompleteProps<T> {
     inputChange?: (value: string) => void;
     maxCheck?: number;
     width?: string;
+    chipOutside?: {
+        type: "default" | "avatar";
+        textSeccion?: string;
+    };
 }
-declare function SCAutocomplete<T>({ label, data, columnGroup, getItemValue, typeFormat, checkMassive, deleteType, fnAplicar, required, disabled, background, setState, state, inputChange, maxCheck, width, }: SCAutocompleteProps<T>): React__default.JSX.Element;
+declare function SCAutocomplete<T>({ label, data, columnGroup, getItemValue, typeFormat, checkMassive, deleteType, fnAplicar, required, disabled, background, setState, state, inputChange, maxCheck, width, chipOutside, }: SCAutocompleteProps<T>): React__default.JSX.Element;
 
 interface SCCalendarSwipeableProps {
     background?: string;

package/dist/index.js

@@ -1278,7 +1278,7 @@ var CalendarToolbar = ({
 
 // src/Components/Calendario/Views/MonthView.tsx
 import React28 from "react";
-import { Box as Box16, Typography as Typography14, IconButton as IconButton11, Paper, Tooltip as Tooltip6, Stack as Stack11, CircularProgress as CircularProgress2, Button as Button11 } from "@mui/material";
+import { Box as Box16, Typography as Typography14, IconButton as IconButton11, Paper as Paper2, Tooltip as Tooltip6, Stack as Stack11, CircularProgress as CircularProgress2, Button as Button11 } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import dayjs5 from "dayjs";
 import localeData from "dayjs/plugin/localeData";
@@ -2393,7 +2393,7 @@ function SCSelect({
 
 // src/Components/SCAutocomplete.tsx
 import React15, { useEffect as useEffect10, useMemo as useMemo3 } from "react";
-import { Autocomplete, Checkbox, InputAdornment as InputAdornment3, MenuItem as MenuItem3, TextField as TextField3, Typography as Typography10, SvgIcon as SvgIcon6, ListItemIcon as ListItemIcon2, ListItemText as ListItemText2, Divider as Divider4, FormControlLabel as FormControlLabel2, IconButton as IconButton9, Chip as Chip4, Box as Box11, Button as Button7, Grid as Grid3 } from "@mui/material";
+import { Autocomplete, Checkbox, InputAdornment as InputAdornment3, MenuItem as MenuItem3, TextField as TextField3, Avatar, Typography as Typography10, SvgIcon as SvgIcon6, ListItemIcon as ListItemIcon2, ListItemText as ListItemText2, Divider as Divider4, FormControlLabel as FormControlLabel2, IconButton as IconButton9, Chip as Chip4, Box as Box11, Button as Button7, Grid as Grid3, Popper, Paper } from "@mui/material";
 import { Search, Clear } from "@mui/icons-material";
 import * as Muicon6 from "@mui/icons-material";
 var StopEvent = ({ children }) => {
@@ -2430,7 +2430,8 @@ function SCAutocomplete({
   state,
   inputChange,
   maxCheck,
-  width = "100%"
+  width = "100%",
+  chipOutside
 }) {
   const labelContent = `<span style="color: red;">* </span>` + label;
   let group = "";
@@ -2466,6 +2467,16 @@ function SCAutocomplete({
       setIsUserTyping(false);
     }
   }, [inputValue]);
+  const handleDeleteChip = (optionToDelete) => {
+    const newSelected = selectedOptions.filter(
+      (opt) => getItemValue(opt).value !== getItemValue(optionToDelete).value
+    );
+    setSelectedOptions(newSelected);
+    setState({
+      hiddenValue: newSelected.length > 0 ? newSelected.map((item) => getItemValue(item).value) : "-1",
+      textValue: newSelected.length > 0 ? newSelected.map((item) => getItemValue(item).text) : ""
+    });
+  };
   const normalizedData = useMemo3(() => {
     return data.map((option) => {
       if ((option == null ? void 0 : option.icon) && option.icon.type === void 0) {
@@ -2524,6 +2535,10 @@ function SCAutocomplete({
   const componentClickActiveRef = React15.useRef(false);
   const containerRef = React15.useRef(null);
   const [chipLimit, setChipLimit] = React15.useState(2);
+  const outsideChipsMeasureRef = React15.useRef(null);
+  const [visibleChipCount, setVisibleChipCount] = React15.useState(Number.MAX_SAFE_INTEGER);
+  const [popoverAnchor, setPopoverAnchor] = React15.useState(null);
+  const popoverTimerRef = React15.useRef(null);
   useEffect10(() => {
     const el = containerRef.current;
     if (!el) return;
@@ -2535,6 +2550,50 @@ function SCAutocomplete({
     observer.observe(el);
     return () => observer.disconnect();
   }, []);
+  useEffect10(() => {
+    if (!chipOutside || typeFormat !== "multiselect") return;
+    const box = outsideChipsMeasureRef.current;
+    if (!box) return;
+    const measure = () => {
+      const chips = Array.from(box.querySelectorAll("[data-outside-chip]"));
+      let count = selectedOptions.length;
+      for (let i = 0; i < chips.length; i++) {
+        if (chips[i].offsetTop + chips[i].offsetHeight > 36) {
+          count = i;
+          break;
+        }
+      }
+      setVisibleChipCount(count);
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(box);
+    return () => observer.disconnect();
+  }, [selectedOptions, chipOutside, typeFormat]);
+  useEffect10(() => {
+    const displayCount = Math.min(visibleChipCount, selectedOptions.length);
+    if (selectedOptions.length - displayCount === 0) {
+      setPopoverAnchor(null);
+    }
+  }, [selectedOptions, visibleChipCount]);
+  const handlePlusEnter = (event2) => {
+    if (popoverTimerRef.current) clearTimeout(popoverTimerRef.current);
+    setPopoverAnchor(event2.currentTarget);
+  };
+  const handlePlusLeave = () => {
+    popoverTimerRef.current = setTimeout(() => setPopoverAnchor(null), 150);
+  };
+  const handlePopperEnter = () => {
+    if (popoverTimerRef.current) clearTimeout(popoverTimerRef.current);
+  };
+  const handlePopperLeave = () => {
+    popoverTimerRef.current = setTimeout(() => setPopoverAnchor(null), 150);
+  };
+  const resolveAvatarText = (option) => {
+    const optionText = getItemValue(option).text;
+    if (!(chipOutside == null ? void 0 : chipOutside.textSeccion)) return optionText.charAt(0).toUpperCase();
+    return chipOutside.textSeccion.split(",").map((p) => optionText.charAt(Number(p.trim())).toUpperCase()).join("");
+  };
   const hayOnComponentClickGlobal = useMemo3(() => {
     return data.some((opt) => {
       const item = getItemValue(opt);
@@ -2572,7 +2631,7 @@ function SCAutocomplete({
         maxWidth: "100%"
       },
       limitTags: chipLimit,
-      renderTags: (value, getTagProps) => {
+      renderTags: chipOutside ? () => null : (value, getTagProps) => {
         const limit = chipLimit;
         return /* @__PURE__ */ React15.createElement(React15.Fragment, null, value.slice(0, limit).map((option, index) => {
           const _a = getTagProps({ index }), { key } = _a, chipProps = __objRest(_a, ["key"]);
@@ -2657,12 +2716,14 @@ function SCAutocomplete({
       renderInput: (params) => /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(
         TextField3,
         __spreadProps(__spreadValues({
-          sx: { "& .MuiOutlinedInput-input": {
-            padding: "2.5px 2px 2.5px 2px !important",
-            // ajusta aquí
-            width: "10px !important",
-            minWidth: "10px !important"
-          } }
+          sx: {
+            "& .MuiOutlinedInput-input": {
+              padding: "2.5px 2px 2.5px 2px !important",
+              // ajusta aquí
+              width: "10px !important",
+              minWidth: "10px !important"
+            }
+          }
         }, params), {
           label: required ? /* @__PURE__ */ React15.createElement("span", { dangerouslySetInnerHTML: { __html: labelContent } }) : label,
           placeholder: selectedOptions.length == 0 ? "B\xFAsqueda" : "",
@@ -2738,7 +2799,90 @@ function SCAutocomplete({
         }
       }
     })
-  )));
+  ), chipOutside && typeFormat === "multiselect" && selectedOptions.length > 0 && (() => {
+    const displayCount = Math.min(visibleChipCount, selectedOptions.length);
+    const hiddenCount = selectedOptions.length - displayCount;
+    return /* @__PURE__ */ React15.createElement(Box11, { sx: { position: "relative", mt: 0.5 } }, /* @__PURE__ */ React15.createElement(
+      Box11,
+      {
+        ref: outsideChipsMeasureRef,
+        "aria-hidden": "true",
+        sx: {
+          display: "flex",
+          flexWrap: "wrap",
+          gap: 0.5,
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          visibility: "hidden",
+          pointerEvents: "none"
+        }
+      },
+      selectedOptions.map((option) => {
+        const avatarText = resolveAvatarText(option);
+        return /* @__PURE__ */ React15.createElement("div", { key: getItemValue(option).value, "data-outside-chip": true, style: { display: "inline-flex" } }, /* @__PURE__ */ React15.createElement(
+          Chip4,
+          __spreadValues({
+            size: "small",
+            label: getItemValue(option).text
+          }, chipOutside.type === "avatar" ? { avatar: /* @__PURE__ */ React15.createElement(Avatar, null, avatarText) } : {})
+        ));
+      })
+    ), /* @__PURE__ */ React15.createElement(Box11, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5, maxHeight: 36, overflow: "hidden" } }, selectedOptions.slice(0, displayCount).map((option) => {
+      const avatarText = resolveAvatarText(option);
+      return /* @__PURE__ */ React15.createElement(
+        Chip4,
+        __spreadValues({
+          key: getItemValue(option).value,
+          color: "default",
+          size: "small",
+          variant: "filled",
+          label: getItemValue(option).text,
+          onDelete: () => handleDeleteChip(option)
+        }, chipOutside.type === "avatar" ? { avatar: /* @__PURE__ */ React15.createElement(Avatar, null, avatarText) } : {})
+      );
+    }), hiddenCount > 0 && /* @__PURE__ */ React15.createElement(
+      Box11,
+      {
+        onMouseEnter: handlePlusEnter,
+        onMouseLeave: handlePlusLeave,
+        sx: { ml: 0.5, fontSize: 13, color: "#666", display: "flex", alignItems: "center", cursor: "default" }
+      },
+      `+${hiddenCount}`
+    )), /* @__PURE__ */ React15.createElement(
+      Popper,
+      {
+        open: Boolean(popoverAnchor),
+        anchorEl: popoverAnchor,
+        placement: "bottom-start",
+        sx: { zIndex: 1500 }
+      },
+      /* @__PURE__ */ React15.createElement(
+        Paper,
+        {
+          elevation: 3,
+          onMouseEnter: handlePopperEnter,
+          onMouseLeave: handlePopperLeave,
+          sx: { p: 1, display: "flex", flexWrap: "wrap", gap: 0.5, maxWidth: 300 }
+        },
+        selectedOptions.slice(displayCount).map((option) => {
+          const avatarText = resolveAvatarText(option);
+          return /* @__PURE__ */ React15.createElement(
+            Chip4,
+            __spreadValues({
+              key: getItemValue(option).value,
+              color: "default",
+              size: "small",
+              variant: "filled",
+              label: getItemValue(option).text,
+              onDelete: () => handleDeleteChip(option)
+            }, chipOutside.type === "avatar" ? { avatar: /* @__PURE__ */ React15.createElement(Avatar, { sx: { fontSize: avatarText.length > 1 ? "0.55rem" : "0.75rem" } }, avatarText) } : {})
+          );
+        })
+      )
+    ));
+  })()));
 }
 
 // src/Components/SCDateRange.tsx
@@ -3512,7 +3656,7 @@ var MonthView = ({ events, isLoading, onDayClick, onMoreClick, currentDate, onEv
     const dayEvents = filterEventsForDay(events, day);
     const isCurrentMonth = day.month() === currentDate.month();
     return /* @__PURE__ */ React28.createElement(
-      Paper,
+      Paper2,
       {
         key: day.toString(),
         onClick: () => onDayClick == null ? void 0 : onDayClick(day),
@@ -4298,7 +4442,7 @@ import { format, startOfWeek, addDays, isSameDay } from "date-fns";
 import React36 from "react";
 import { Divider as Divider6, List, ListItemButton, ListItemIcon as ListItemIcon4, ListItemText as ListItemText3, SvgIcon as SvgIcon7 } from "@mui/material";
 import Grid7 from "@mui/material/Grid";
-import Avatar from "@mui/material/Avatar";
+import Avatar2 from "@mui/material/Avatar";
 import * as Muicon7 from "@mui/icons-material";
 var SCListContent = ({ options, iconLeftType = "Icon", iconRightType = "Icon" }) => {
   const [selectedIndex, setSelectedIndex] = React36.useState("1");
@@ -4330,7 +4474,7 @@ var SCListContent = ({ options, iconLeftType = "Icon", iconRightType = "Icon" })
         onClick: option.fn,
         sx: { gap: 1, padding: iconLeftType == "Icon" ? "8px 8px" : "8px 8px 8px 0px" }
       },
-      option.iconLeft ? iconLeftType == "Icon" ? /* @__PURE__ */ React36.createElement(ListItemIcon4, { sx: { minWidth: "0px !important" } }, /* @__PURE__ */ React36.createElement(SvgIcon7, { fontSize: "small", sx: { color: option.iconLeftColor || "action" }, component: option.iconLeft })) : /* @__PURE__ */ React36.createElement(Avatar, { sx: { width: 25, height: 25, fontSize: "11px", bgcolor: option.iconLeftColor ? `${option.iconLeftColor}.main` : "default" } }, ((_a = option.iconLeft) == null ? void 0 : _a.type) != void 0 ? /* @__PURE__ */ React36.createElement(SvgIcon7, { fontSize: "small", component: option.iconLeft }) : option.iconLeft) : "",
+      option.iconLeft ? iconLeftType == "Icon" ? /* @__PURE__ */ React36.createElement(ListItemIcon4, { sx: { minWidth: "0px !important" } }, /* @__PURE__ */ React36.createElement(SvgIcon7, { fontSize: "small", sx: { color: option.iconLeftColor || "action" }, component: option.iconLeft })) : /* @__PURE__ */ React36.createElement(Avatar2, { sx: { width: 25, height: 25, fontSize: "11px", bgcolor: option.iconLeftColor ? `${option.iconLeftColor}.main` : "default" } }, ((_a = option.iconLeft) == null ? void 0 : _a.type) != void 0 ? /* @__PURE__ */ React36.createElement(SvgIcon7, { fontSize: "small", component: option.iconLeft }) : option.iconLeft) : "",
       /* @__PURE__ */ React36.createElement(
         ListItemText3,
         {
@@ -4339,7 +4483,7 @@ var SCListContent = ({ options, iconLeftType = "Icon", iconRightType = "Icon" })
           secondary: /* @__PURE__ */ React36.createElement(Grid7, { gap: 0.5 }, /* @__PURE__ */ React36.createElement(Grid7, { container: true, gap: 0.5, sx: { color: option.colorDisabled == true ? "text.disabled" : "default" } }, option.subtitle), /* @__PURE__ */ React36.createElement(Grid7, { container: true, gap: 0.5, sx: { color: option.colorDisabled == true ? "text.disabled" : "default" } }, option.description))
         }
       ),
-      option.iconRight ? iconRightType == "Icon" ? /* @__PURE__ */ React36.createElement(ListItemIcon4, { sx: { minWidth: "0px !important", marginRight: "8px" } }, /* @__PURE__ */ React36.createElement(SvgIcon7, { fontSize: "small", sx: { color: option.iconRightColor || "action" }, component: option.iconRight })) : /* @__PURE__ */ React36.createElement(Avatar, { variant: "circular", sx: { width: 20, height: 20 } }, ((_b = option.iconRight) == null ? void 0 : _b.type) != void 0 ? /* @__PURE__ */ React36.createElement(SvgIcon7, { fontSize: "small", color: option.iconRightColor || "action", component: option.iconRight }) : option.iconRight) : ""
+      option.iconRight ? iconRightType == "Icon" ? /* @__PURE__ */ React36.createElement(ListItemIcon4, { sx: { minWidth: "0px !important", marginRight: "8px" } }, /* @__PURE__ */ React36.createElement(SvgIcon7, { fontSize: "small", sx: { color: option.iconRightColor || "action" }, component: option.iconRight })) : /* @__PURE__ */ React36.createElement(Avatar2, { variant: "circular", sx: { width: 20, height: 20 } }, ((_b = option.iconRight) == null ? void 0 : _b.type) != void 0 ? /* @__PURE__ */ React36.createElement(SvgIcon7, { fontSize: "small", color: option.iconRightColor || "action", component: option.iconRight }) : option.iconRight) : ""
     ), option.divider == true ? /* @__PURE__ */ React36.createElement(Divider6, null) : "");
   })));
 };
@@ -5496,7 +5640,7 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
 
 // src/Components/SCMenu.tsx
 import React45 from "react";
-import { Box as Box27, Typography as Typography26, Paper as Paper4, Divider as Divider8, MenuList as MenuList3, MenuItem as MenuItem9, ListItemIcon as ListItemIcon7, SvgIcon as SvgIcon11 } from "@mui/material";
+import { Box as Box27, Typography as Typography26, Paper as Paper5, Divider as Divider8, MenuList as MenuList3, MenuItem as MenuItem9, ListItemIcon as ListItemIcon7, SvgIcon as SvgIcon11 } from "@mui/material";
 import Grid12 from "@mui/material/Grid";
 
 // src/Components/Hooks/useWindowDimensions.ts
@@ -5563,7 +5707,7 @@ var SCMenu = ({ header, options, defaultOption, disable, widthMenu, heightMenu,
       setValue(String(index + 1));
     }
   };
-  return /* @__PURE__ */ React45.createElement(React45.Fragment, null, /* @__PURE__ */ React45.createElement(Grid12, { container: true, sx: { height: heightContainer, width: widthContainer, flexDirection: "column" } }, /* @__PURE__ */ React45.createElement(Paper4, { "data-testid": "menu-content", sx: { width: menuSize, height: heightContainer, overflow: "auto" } }, header && header.component, /* @__PURE__ */ React45.createElement(MenuList3, { sx: { height: options.length * 45, padding: "8px 0px" } }, options.map((option, index) => /* @__PURE__ */ React45.createElement(React45.Fragment, null, /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React45.createElement(React45.Fragment, null, /* @__PURE__ */ React45.createElement(Grid12, { container: true, sx: { height: heightContainer, width: widthContainer, flexDirection: "column" } }, /* @__PURE__ */ React45.createElement(Paper5, { "data-testid": "menu-content", sx: { width: menuSize, height: heightContainer, overflow: "auto" } }, header && header.component, /* @__PURE__ */ React45.createElement(MenuList3, { sx: { height: options.length * 45, padding: "8px 0px" } }, options.map((option, index) => /* @__PURE__ */ React45.createElement(React45.Fragment, null, /* @__PURE__ */ React45.createElement(
     MenuItem9,
     {
       disabled: disable == true ? true : false,