componentes-sinco 1.1.41 → 1.1.42

package/dist/index.cjs

@@ -2514,7 +2514,8 @@ function SCAutocomplete({
   state,
   inputChange,
   maxCheck,
-  width = "100%"
+  width = "100%",
+  chipOutside
 }) {
   const labelContent = `<span style="color: red;">* </span>` + label;
   let group = "";
@@ -2550,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) {
@@ -2608,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;
@@ -2619,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);
@@ -2656,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"]);
@@ -2741,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" : "",
@@ -2822,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