componentes-sinco 1.3.0 → 1.3.1

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,
@@ -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,