componentes-sinco 1.3.0 → 1.3.2

package/dist/index.cjs

@@ -1851,6 +1851,8 @@ function SCSelect({
   const labelContent = `<span style="color: red;">* </span>` + label;
   const [prevData, setPrevData] = import_react16.default.useState(data);
   const [error, setError] = import_react16.default.useState(false);
+  const [placement, setPlacement] = import_react16.default.useState("bottom");
+  const containerRef = import_react16.default.useRef(null);
   (0, import_react16.useEffect)(() => {
     if (error) {
       setTimeout(() => {
@@ -1879,6 +1881,14 @@ function SCSelect({
     const isError = !currentValue && !!required;
     setError(Boolean(isError));
   };
+  const handleOpen = () => {
+    if (containerRef.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const estimatedMenuHeight = Math.min(300, data.length * 36 + 16);
+      setPlacement(spaceBelow < estimatedMenuHeight ? "top" : "bottom");
+    }
+  };
   const handleChange = (event2) => {
     const selectedValue = event2.target.value;
     if (selectedValue) {
@@ -1892,7 +1902,7 @@ function SCSelect({
       }
     }
   };
-  return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, data && /* @__PURE__ */ import_react16.default.createElement(import_material9.Box, { sx: { width } }, /* @__PURE__ */ import_react16.default.createElement(
+  return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, data && /* @__PURE__ */ import_react16.default.createElement(import_material9.Box, { ref: containerRef, sx: { width } }, /* @__PURE__ */ import_react16.default.createElement(
     import_material9.FormControl,
     {
       fullWidth: true,
@@ -1914,6 +1924,7 @@ function SCSelect({
         label: required ? /* @__PURE__ */ import_react16.default.createElement("span", { dangerouslySetInnerHTML: { __html: labelContent } }) : label,
         onChange: handleChange,
         onBlur: handleBlur,
+        onOpen: handleOpen,
         variant,
         disabled: disabled || false,
         error,
@@ -1921,7 +1932,6 @@ function SCSelect({
         MenuProps: {
           sx: {
             zIndex: 1400
-            // muy alto para que quede encima
           },
           PaperProps: {
             sx: {
@@ -1930,11 +1940,11 @@ function SCSelect({
             }
           },
           anchorOrigin: {
-            vertical: "bottom",
+            vertical: placement,
             horizontal: "left"
           },
           transformOrigin: {
-            vertical: "top",
+            vertical: placement === "bottom" ? "top" : "bottom",
             horizontal: "left"
           },
           disableAutoFocusItem: true,
@@ -3241,7 +3251,7 @@ var AttachmentMobile = ({
       ),
       /* @__PURE__ */ import_react23.default.createElement(import_material16.Typography, { variant: "body2", color: "text.secondary" }, option.label)
     ))))
-  ), abrirCamara && /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, /* @__PURE__ */ import_react23.default.createElement(import_CancelOutlined.default, { onClick: closeCam, sx: { borderRadius: "50px", height: "35px", width: "35px", zIndex: 1700, background: "white", position: "absolute", left: `calc(100% - 50px)`, bottom: `calc(100% - 50px)` } }), /* @__PURE__ */ import_react23.default.createElement(import_material16.Stack, { className: "camras" }, /* @__PURE__ */ import_react23.default.createElement(
+  ), abrirCamara && /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, /* @__PURE__ */ import_react23.default.createElement(import_CancelOutlined.default, { onClick: closeCam, sx: { borderRadius: "50px", height: "35px", width: "35px", zIndex: 2e3, background: "white", position: "absolute", left: `calc(100% - 50px)`, bottom: `calc(100% - 50px)` } }), /* @__PURE__ */ import_react23.default.createElement(import_material16.Stack, { className: "camras" }, /* @__PURE__ */ import_react23.default.createElement(
     import_react_webcam.default,
     {
       audio: false,
@@ -3261,7 +3271,7 @@ var AttachmentMobile = ({
         left: 0,
         objectFit: "cover",
         backgroundColor: "black",
-        zIndex: 1600
+        zIndex: 2e3
         // Encima de todo
       }
     }
@@ -3276,7 +3286,7 @@ var AttachmentMobile = ({
         backgroundColor: "white",
         color: "#1E62A1",
         borderRadius: "50px",
-        zIndex: 1700,
+        zIndex: 2100,
         position: "absolute",
         bottom: "10px",
         left: "50%"
@@ -4332,13 +4342,14 @@ var FooterAction = ({
   leftContent,
   rightContent,
   label,
-  variant
+  variant,
+  width
 }) => {
   return /* @__PURE__ */ import_react38.default.createElement(
     import_material25.AppBar,
     {
       color: "inherit",
-      sx: { position: variant == "float" ? "relative" : "fixed", left: 0, right: "auto", width: "100%", top: "auto", bottom: 0 }
+      sx: { position: variant == "float" ? "relative" : "fixed", left: variant == "float" ? "auto" : "50%", transform: variant == "float" ? "none" : "translateX(-50%)", margin: variant == "float" ? "0 auto" : void 0, right: "auto", width: width != null ? width : "100%", top: "auto", bottom: 0 }
     },
     /* @__PURE__ */ import_react38.default.createElement(
       import_material25.Toolbar,