componentes-sinco 1.1.40 → 1.1.42

package/dist/index.cjs

@@ -1632,9 +1632,6 @@ var useDrawerState = ({ open, setOpen }) => {
 // src/Components/Drawer/hooks/useChipFilters.ts
 var import_react12 = require("react");
 var useChipFilters = (arrayElements, chipFilters) => {
-  debugger;
-  console.log("arrayElements en useChipFilters", arrayElements);
-  console.log("chipFilters en useChipFilters", chipFilters);
   const [stateChipFilters, setChipFilters] = (0, import_react12.useState)(false);
   const [textFilters, setTextFilters] = (0, import_react12.useState)([]);
   (0, import_react12.useEffect)(() => {
@@ -1644,19 +1641,13 @@ var useChipFilters = (arrayElements, chipFilters) => {
     }
   }, [chipFilters]);
   const processChipFilters = () => {
-    debugger;
-    console.log("Procesando chip filters. !chipFilters?.length", !(chipFilters == null ? void 0 : chipFilters.length));
     if (!(chipFilters == null ? void 0 : chipFilters.length)) {
       processManualFilters();
       return;
     }
-    debugger;
-    console.log("arrayElements", arrayElements);
     arrayElements.forEach((arrayElement) => {
       const { validation, element: typeElement } = validateTypeElements(arrayElement);
       const currentValue = getCurrentValue(validation, typeElement);
-      console.log("currentValue en useChipFilters", currentValue);
-      console.log("chipFilters en useChipFilters", chipFilters);
       chipFilters.forEach((chipFilter) => {
         const chipValue = String(chipFilter).trim();
         if (currentValue === chipValue && currentValue !== "" && currentValue !== ",") {
@@ -1713,27 +1704,19 @@ var useChipFilters = (arrayElements, chipFilters) => {
     if (validation === "time") {
       return ((_h = (_g = typeElement.state) == null ? void 0 : _g.isValid) == null ? void 0 : _h.call(_g)) ? typeElement.state.format("HH:mm") : "";
     }
-    console.log("typeElement.state en useChipFilters", typeElement.state);
     return ((_i = typeElement.state) == null ? void 0 : _i.textValue) !== void 0 ? String(typeElement.state.textValue).trim() : String(typeElement.state).trim();
   };
   const updateFilter = (value, typeElement, label) => {
     setTextFilters((prevFilters) => {
-      debugger;
-      console.log("prevFilters en useChipFilters", prevFilters);
-      console.log("Updating filter. value:", value, "label:", label);
       const newFilter = { value, arrayElement: typeElement };
-      console.log("newFilter en useChipFilters", newFilter);
       const existingFilterIndex = prevFilters.findIndex(
         (filter) => label !== void 0 ? filter.arrayElement.label === label : filter.value === value
       );
-      console.log("existingFilterIndex en useChipFilters", existingFilterIndex);
       if (existingFilterIndex !== -1) {
         const updatedFilters = [...prevFilters];
         updatedFilters[existingFilterIndex] = newFilter;
-        console.log("updatedFilters en useChipFilters", updatedFilters);
         return updatedFilters;
       } else {
-        console.log("Adding new filter. prevFilters: en useChipFilters", prevFilters, "newFilter:", newFilter);
         return [...prevFilters, newFilter];
       }
     });
@@ -1752,11 +1735,7 @@ var useChipFilters = (arrayElements, chipFilters) => {
       }
     });
   };
-  debugger;
-  console.log("stateChipFilters", stateChipFilters);
   const shouldShowChips = (chipFilters == null ? void 0 : chipFilters.length) ? true : stateChipFilters && hasActiveFilters();
-  console.log("shouldShowChips", shouldShowChips);
-  console.log("textFilters", textFilters);
   return {
     stateChipFilters,
     setChipFilters,
@@ -1885,8 +1864,6 @@ var ChipFiltersDisplay = ({
   textFilters,
   onDeleteFilter
 }) => {
-  debugger;
-  console.log("textFilters en chipfiltersDisplay", textFilters);
   const scrollRef = (0, import_react15.useRef)(null);
   const scroll = (offset) => {
     if (scrollRef.current) {
@@ -2537,7 +2514,8 @@ function SCAutocomplete({
   state,
   inputChange,
   maxCheck,
-  width = "100%"
+  width = "100%",
+  chipOutside
 }) {
   const labelContent = `<span style="color: red;">* </span>` + label;
   let group = "";
@@ -2573,6 +2551,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 = (0, import_react19.useMemo)(() => {
     return data.map((option) => {
       if ((option == null ? void 0 : option.icon) && option.icon.type === void 0) {
@@ -2631,6 +2619,10 @@ function SCAutocomplete({
   const componentClickActiveRef = import_react19.default.useRef(false);
   const containerRef = import_react19.default.useRef(null);
   const [chipLimit, setChipLimit] = import_react19.default.useState(2);
+  const outsideChipsMeasureRef = import_react19.default.useRef(null);
+  const [visibleChipCount, setVisibleChipCount] = import_react19.default.useState(Number.MAX_SAFE_INTEGER);
+  const [popoverAnchor, setPopoverAnchor] = import_react19.default.useState(null);
+  const popoverTimerRef = import_react19.default.useRef(null);
   (0, import_react19.useEffect)(() => {
     const el = containerRef.current;
     if (!el) return;
@@ -2642,6 +2634,50 @@ function SCAutocomplete({
     observer.observe(el);
     return () => observer.disconnect();
   }, []);
+  (0, import_react19.useEffect)(() => {
+    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]);
+  (0, import_react19.useEffect)(() => {
+    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 = (0, import_react19.useMemo)(() => {
     return data.some((opt) => {
       const item = getItemValue(opt);
@@ -2679,7 +2715,7 @@ function SCAutocomplete({
         maxWidth: "100%"
       },
       limitTags: chipLimit,
-      renderTags: (value, getTagProps) => {
+      renderTags: chipOutside ? () => null : (value, getTagProps) => {
         const limit = chipLimit;
         return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, value.slice(0, limit).map((option, index) => {
           const _a = getTagProps({ index }), { key } = _a, chipProps = __objRest(_a, ["key"]);
@@ -2764,12 +2800,14 @@ function SCAutocomplete({
       renderInput: (params) => /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(
         import_material13.TextField,
         __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__ */ import_react19.default.createElement("span", { dangerouslySetInnerHTML: { __html: labelContent } }) : label,
           placeholder: selectedOptions.length == 0 ? "B\xFAsqueda" : "",
@@ -2845,7 +2883,90 @@ function SCAutocomplete({
         }
       }
     })
-  )));
+  ), chipOutside && typeFormat === "multiselect" && selectedOptions.length > 0 && (() => {
+    const displayCount = Math.min(visibleChipCount, selectedOptions.length);
+    const hiddenCount = selectedOptions.length - displayCount;
+    return /* @__PURE__ */ import_react19.default.createElement(import_material13.Box, { sx: { position: "relative", mt: 0.5 } }, /* @__PURE__ */ import_react19.default.createElement(
+      import_material13.Box,
+      {
+        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__ */ import_react19.default.createElement("div", { key: getItemValue(option).value, "data-outside-chip": true, style: { display: "inline-flex" } }, /* @__PURE__ */ import_react19.default.createElement(
+          import_material13.Chip,
+          __spreadValues({
+            size: "small",
+            label: getItemValue(option).text
+          }, chipOutside.type === "avatar" ? { avatar: /* @__PURE__ */ import_react19.default.createElement(import_material13.Avatar, null, avatarText) } : {})
+        ));
+      })
+    ), /* @__PURE__ */ import_react19.default.createElement(import_material13.Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5, maxHeight: 36, overflow: "hidden" } }, selectedOptions.slice(0, displayCount).map((option) => {
+      const avatarText = resolveAvatarText(option);
+      return /* @__PURE__ */ import_react19.default.createElement(
+        import_material13.Chip,
+        __spreadValues({
+          key: getItemValue(option).value,
+          color: "default",
+          size: "small",
+          variant: "filled",
+          label: getItemValue(option).text,
+          onDelete: () => handleDeleteChip(option)
+        }, chipOutside.type === "avatar" ? { avatar: /* @__PURE__ */ import_react19.default.createElement(import_material13.Avatar, null, avatarText) } : {})
+      );
+    }), hiddenCount > 0 && /* @__PURE__ */ import_react19.default.createElement(
+      import_material13.Box,
+      {
+        onMouseEnter: handlePlusEnter,
+        onMouseLeave: handlePlusLeave,
+        sx: { ml: 0.5, fontSize: 13, color: "#666", display: "flex", alignItems: "center", cursor: "default" }
+      },
+      `+${hiddenCount}`
+    )), /* @__PURE__ */ import_react19.default.createElement(
+      import_material13.Popper,
+      {
+        open: Boolean(popoverAnchor),
+        anchorEl: popoverAnchor,
+        placement: "bottom-start",
+        sx: { zIndex: 1500 }
+      },
+      /* @__PURE__ */ import_react19.default.createElement(
+        import_material13.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__ */ import_react19.default.createElement(
+            import_material13.Chip,
+            __spreadValues({
+              key: getItemValue(option).value,
+              color: "default",
+              size: "small",
+              variant: "filled",
+              label: getItemValue(option).text,
+              onDelete: () => handleDeleteChip(option)
+            }, chipOutside.type === "avatar" ? { avatar: /* @__PURE__ */ import_react19.default.createElement(import_material13.Avatar, { sx: { fontSize: avatarText.length > 1 ? "0.55rem" : "0.75rem" } }, avatarText) } : {})
+          );
+        })
+      )
+    ));
+  })()));
 }
 
 // src/Components/SCDateRange.tsx
@@ -3223,9 +3344,6 @@ function SCDrawer({
     ];
   };
   const drawerActions = getActions();
-  debugger;
-  console.log("shouldShowChips en scDrawer", shouldShowChips);
-  console.log("textFilters en scDrawer", textFilters);
   return /* @__PURE__ */ import_react24.default.createElement(import_react24.default.Fragment, null, toast && /* @__PURE__ */ import_react24.default.createElement(SCToastNotification, __spreadValues({}, toast)), /* @__PURE__ */ import_react24.default.createElement(
     import_Grid4.default,
     {
@@ -3242,13 +3360,13 @@ function SCDrawer({
         onDeleteFilter: handleDeleteFilter
       }
     ),
-    buttonDrawer && /* @__PURE__ */ import_react24.default.createElement(import_react24.default.Fragment, null, /* @__PURE__ */ import_react24.default.createElement(
+    buttonDrawer && /* @__PURE__ */ import_react24.default.createElement(
       DrawerButton,
       {
         buttonDrawer,
         onToggle: toggleDrawer(true)
       }
-    ), /* @__PURE__ */ import_react24.default.createElement(import_material18.Chip, { label: "Filtro 1" }))
+    )
   ), anchor != "bottom" ? /* @__PURE__ */ import_react24.default.createElement(
     import_material18.Drawer,
     {