@andreagiugni/tailwind-dashboard-ui 1.0.5 → 1.0.6

package/README.md

@@ -199,8 +199,8 @@ Legend: **(+native)** = also extends the element's native HTML attributes.
 |---|---|
 | `Input` | `type`, `value` / `defaultValue`, `onChange`, `success`, `error`, `hint`, `disabled`, (+native input) (+override) |
 | `Label` | `htmlFor`, `children`, (+native label) |
-| `Select` | `options` (`{ value, label, icon? }[]`), `placeholder`, `defaultValue`, `onChange(value)`, `disabled` |
-| `MultiSelect` | `options`, `selected` / `defaultSelected`, `onChange`, `placeholder`, `disabled` |
+| `Select` | `options` (`{ value, label, icon? }[]`), `placeholder`, `defaultValue`, `onChange(value)`, `disabled`, `portal?` (default `true`, prevents clipping inside tables/cards) |
+| `MultiSelect` | `options`, `selected` / `defaultSelected`, `onChange`, `placeholder`, `disabled`, `portal?` (default `true`, prevents clipping inside tables/cards) |
 | `Checkbox` | `label`, `checked`, `onChange(checked)`, `disabled`, `checkedColor?` |
 | `Radio` / `RadioSm` | `id`, `name`, `value`, `checked`, `label`, `onChange(value)`, `disabled` |
 | `Switch` | `label?`, `checked` / `defaultChecked`, `onChange(checked)`, `color` (blue/gray), `disabled` |

package/dist/index.cjs

@@ -2319,15 +2319,20 @@ var Select = ({
   onChange,
   className,
   defaultValue = "",
-  disabled = false
+  disabled = false,
+  portal = true
 }) => {
   const [selectedValue, setSelectedValue] = React5.useState(defaultValue);
   const [isOpen, setIsOpen] = React5.useState(false);
   const rootRef = React5.useRef(null);
+  const triggerRef = React5.useRef(null);
+  const menuRef = React5.useRef(null);
+  const [menuPosition, setMenuPosition] = React5.useState();
   React5.useEffect(() => {
     if (!isOpen) return;
     const onPointerDown = (e) => {
-      if (rootRef.current && !rootRef.current.contains(e.target)) {
+      const target = e.target;
+      if (rootRef.current && !rootRef.current.contains(target) && !menuRef.current?.contains(target)) {
         setIsOpen(false);
       }
     };
@@ -2341,6 +2346,33 @@ var Select = ({
       document.removeEventListener("keydown", onKeyDown);
     };
   }, [isOpen]);
+  React5.useLayoutEffect(() => {
+    if (!isOpen || !portal) return;
+    const updatePosition = () => {
+      const trigger = triggerRef.current;
+      const menu = menuRef.current;
+      if (!trigger || !menu) return;
+      const rect = trigger.getBoundingClientRect();
+      const menuHeight = menu.offsetHeight;
+      const viewportPadding = 8;
+      const gap = 6;
+      const width = rect.width;
+      const fitsBelow = window.innerHeight - rect.bottom - gap >= menuHeight + viewportPadding;
+      const top = fitsBelow ? rect.bottom + gap : Math.max(viewportPadding, rect.top - gap - menuHeight);
+      const left = Math.min(
+        Math.max(viewportPadding, rect.left),
+        window.innerWidth - width - viewportPadding
+      );
+      setMenuPosition({ top, left, width });
+    };
+    updatePosition();
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [isOpen, portal]);
   const toggleOpen = () => {
     if (!disabled) setIsOpen((prev) => !prev);
   };
@@ -2354,6 +2386,7 @@ var Select = ({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
+        ref: triggerRef,
         type: "button",
         onClick: toggleOpen,
         disabled,
@@ -2389,52 +2422,61 @@ var Select = ({
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsxRuntime.jsx(
-      "ul",
-      {
-        role: "listbox",
-        className: chunkYERNSNT4_cjs.cn(
-          "absolute left-0 top-full mt-1.5 max-h-60 w-full overflow-y-auto rounded-lg border border-gray-200 bg-white py-1 shadow-theme-lg dark:border-gray-800 dark:bg-gray-900",
-          chunkTF3G3E72_cjs.layers.menu
-        ),
-        children: options.map((option) => {
-          const isSelected = option.value === selectedValue;
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            "li",
-            {
-              role: "option",
-              "aria-selected": isSelected,
-              onClick: () => handleSelect(option.value),
-              className: chunkYERNSNT4_cjs.cn(
-                "flex cursor-pointer items-center justify-between px-4 py-2 text-sm transition hover:bg-gray-50 dark:hover:bg-white/5",
-                isSelected ? "bg-brand-50 font-medium text-brand-600 dark:bg-brand-500/15 dark:text-brand-400" : "text-gray-700 dark:text-gray-300"
-              ),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
-                  option.icon && /* @__PURE__ */ jsxRuntime.jsx(
-                    "span",
+    isOpen && (() => {
+      const menu = /* @__PURE__ */ jsxRuntime.jsx(
+        "ul",
+        {
+          ref: menuRef,
+          role: "listbox",
+          className: chunkYERNSNT4_cjs.cn(
+            "max-h-60 overflow-y-auto rounded-lg border border-gray-200 bg-white py-1 shadow-theme-lg dark:border-gray-800 dark:bg-gray-900",
+            portal ? chunkYERNSNT4_cjs.cn("fixed", chunkTF3G3E72_cjs.layers.portal) : chunkYERNSNT4_cjs.cn("absolute left-0 top-full mt-1.5 w-full", chunkTF3G3E72_cjs.layers.menu)
+          ),
+          style: {
+            ...portal && !menuPosition ? { visibility: "hidden" } : void 0,
+            ...portal ? menuPosition : void 0
+          },
+          children: options.map((option) => {
+            const isSelected = option.value === selectedValue;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "li",
+              {
+                role: "option",
+                "aria-selected": isSelected,
+                onClick: () => handleSelect(option.value),
+                className: chunkYERNSNT4_cjs.cn(
+                  "flex cursor-pointer items-center justify-between px-4 py-2 text-sm transition hover:bg-gray-50 dark:hover:bg-white/5",
+                  isSelected ? "bg-brand-50 font-medium text-brand-600 dark:bg-brand-500/15 dark:text-brand-400" : "text-gray-700 dark:text-gray-300"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+                    option.icon && /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        className: "flex h-5 w-5 shrink-0 items-center justify-center [&>svg]:size-4",
+                        children: option.icon
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: option.label })
+                  ] }),
+                  isSelected && /* @__PURE__ */ jsxRuntime.jsx(
+                    lucideReact.Check,
                     {
-                      "aria-hidden": "true",
-                      className: "flex h-5 w-5 shrink-0 items-center justify-center [&>svg]:size-4",
-                      children: option.icon
+                      className: "ml-2 size-4 shrink-0 stroke-current",
+                      "aria-hidden": "true"
                     }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: option.label })
-                ] }),
-                isSelected && /* @__PURE__ */ jsxRuntime.jsx(
-                  lucideReact.Check,
-                  {
-                    className: "ml-2 size-4 shrink-0 stroke-current",
-                    "aria-hidden": "true"
-                  }
-                )
-              ]
-            },
-            option.value
-          );
-        })
-      }
-    )
+                  )
+                ]
+              },
+              option.value
+            );
+          })
+        }
+      );
+      if (!portal || typeof document === "undefined") return menu;
+      return reactDom.createPortal(menu, document.body);
+    })()
   ] });
 };
 var MultiSelect = ({
@@ -2442,10 +2484,60 @@ var MultiSelect = ({
   options,
   defaultSelected = [],
   onChange,
-  disabled = false
+  disabled = false,
+  portal = true
 }) => {
   const [selectedOptions, setSelectedOptions] = React5.useState(defaultSelected);
   const [isOpen, setIsOpen] = React5.useState(false);
+  const rootRef = React5.useRef(null);
+  const triggerRef = React5.useRef(null);
+  const menuRef = React5.useRef(null);
+  const [menuPosition, setMenuPosition] = React5.useState();
+  React5.useEffect(() => {
+    if (!isOpen) return;
+    const onPointerDown = (event) => {
+      const target = event.target;
+      if (rootRef.current && !rootRef.current.contains(target) && !menuRef.current?.contains(target)) {
+        setIsOpen(false);
+      }
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") setIsOpen(false);
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [isOpen]);
+  React5.useLayoutEffect(() => {
+    if (!isOpen || !portal) return;
+    const updatePosition = () => {
+      const trigger = triggerRef.current;
+      const menu = menuRef.current;
+      if (!trigger || !menu) return;
+      const rect = trigger.getBoundingClientRect();
+      const menuHeight = menu.offsetHeight;
+      const viewportPadding = 8;
+      const gap = 6;
+      const width = rect.width;
+      const fitsBelow = window.innerHeight - rect.bottom - gap >= menuHeight + viewportPadding;
+      const top = fitsBelow ? rect.bottom + gap : Math.max(viewportPadding, rect.top - gap - menuHeight);
+      const left = Math.min(
+        Math.max(viewportPadding, rect.left),
+        window.innerWidth - width - viewportPadding
+      );
+      setMenuPosition({ top, left, width });
+    };
+    updatePosition();
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [isOpen, portal]);
   const toggleDropdown = () => {
     if (disabled) return;
     setIsOpen((prev) => !prev);
@@ -2463,94 +2555,110 @@ var MultiSelect = ({
   const selectedValuesText = selectedOptions.map(
     (value) => options.find((option) => option.value === value)?.text || ""
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: "w-full", children: [
     /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400", children: label }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative inline-block w-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col items-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: toggleDropdown, className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex h-11 rounded-lg border border-gray-300 bg-white py-1.5 px-4 shadow-theme-xs outline-hidden transition focus:border-brand-300 focus:shadow-focus-ring dark:border-gray-700 dark:bg-gray-900 dark:focus:border-brand-300", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap flex-auto gap-2", children: selectedValuesText.length > 0 ? selectedValuesText.map((text, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: "group flex items-center justify-center rounded-full border-[0.7px] border-transparent bg-gray-100 py-1 pl-2.5 pr-2 text-sm text-gray-800 hover:border-gray-200 dark:bg-gray-800 dark:text-white/90 dark:hover:border-gray-800",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-initial max-w-full", children: text }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row-reverse flex-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  onClick: () => removeOption(index, selectedOptions[index]),
-                  className: "pl-2 text-gray-500 cursor-pointer group-hover:text-gray-400 dark:text-gray-400",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-4", role: "button", "aria-hidden": "true" })
-                }
-              ) })
-            ]
-          },
-          index
-        )) : /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            placeholder: "Select option",
-            className: "w-full h-full p-1 pr-2 text-sm bg-transparent border-0 outline-hidden appearance-none placeholder:text-gray-800 focus:border-0 focus:outline-hidden focus:ring-0 dark:placeholder:text-white/90",
-            readOnly: true,
-            value: "Select option"
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center py-1 pl-1 pr-1 w-7", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: toggleDropdown,
-            className: "w-5 h-5 text-gray-700 outline-hidden cursor-pointer focus:outline-hidden dark:text-gray-400",
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              lucideReact.ChevronDown,
-              {
-                className: `size-4 stroke-current ${isOpen ? "rotate-180" : ""}`,
-                "aria-hidden": "true"
-              }
-            )
-          }
-        ) })
-      ] }) }),
-      isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: toggleDropdown, className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: chunkYERNSNT4_cjs.cn(
-            "absolute left-0 top-full max-h-select w-full overflow-y-auto rounded-lg bg-white shadow-sm dark:bg-gray-900",
-            chunkTF3G3E72_cjs.layers.menu
-          ),
-          onClick: (e) => e.stopPropagation(),
-          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col", children: options.map((option, index) => {
-            const isSelected = selectedOptions.includes(option.value);
-            return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+          ref: triggerRef,
+          className: "mb-2 flex h-11 rounded-lg border border-gray-300 bg-white py-1.5 px-4 shadow-theme-xs outline-hidden transition focus:border-brand-300 focus:shadow-focus-ring dark:border-gray-700 dark:bg-gray-900 dark:focus:border-brand-300",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap flex-auto gap-2", children: selectedValuesText.length > 0 ? selectedValuesText.map((text, index) => /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
-                className: `w-full cursor-pointer rounded-t border-b border-gray-200 hover:bg-brand-500/5 dark:border-gray-800`,
-                onClick: () => handleSelect(option.value),
-                children: /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
+                className: "group flex items-center justify-center rounded-full border-[0.7px] border-transparent bg-gray-100 py-1 pl-2.5 pr-2 text-sm text-gray-800 hover:border-gray-200 dark:bg-gray-800 dark:text-white/90 dark:hover:border-gray-800",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-initial max-w-full", children: text }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row-reverse flex-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      onClick: () => removeOption(index, selectedOptions[index]),
+                      className: "pl-2 text-gray-500 cursor-pointer group-hover:text-gray-400 dark:text-gray-400",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-4", role: "button", "aria-hidden": "true" })
+                    }
+                  ) })
+                ]
+              },
+              index
+            )) : /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                placeholder: "Select option",
+                className: "w-full h-full p-1 pr-2 text-sm bg-transparent border-0 outline-hidden appearance-none placeholder:text-gray-800 focus:border-0 focus:outline-hidden focus:ring-0 dark:placeholder:text-white/90",
+                readOnly: true,
+                value: "Select option"
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center py-1 pl-1 pr-1 w-7", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: toggleDropdown,
+                className: "w-5 h-5 text-gray-700 outline-hidden cursor-pointer focus:outline-hidden dark:text-gray-400",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  lucideReact.ChevronDown,
                   {
-                    className: `relative flex w-full items-center justify-between p-2 pl-2 ${isSelected ? "bg-brand-500/10" : ""}`,
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "div",
-                        {
-                          className: `mx-2 leading-6 ${isSelected ? "font-medium text-brand-600 dark:text-brand-400" : "text-gray-800 dark:text-white/90"}`,
-                          children: option.text
-                        }
-                      ),
-                      isSelected && /* @__PURE__ */ jsxRuntime.jsx(
-                        lucideReact.Check,
-                        {
-                          className: "mr-2 size-4 shrink-0 stroke-current text-brand-500",
-                          "aria-hidden": "true"
-                        }
-                      )
-                    ]
+                    className: `size-4 stroke-current ${isOpen ? "rotate-180" : ""}`,
+                    "aria-hidden": "true"
                   }
                 )
               }
-            ) }, index);
-          }) })
+            ) })
+          ]
         }
-      )
+      ) }),
+      isOpen && (() => {
+        const menu = /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: menuRef,
+            className: chunkYERNSNT4_cjs.cn(
+              "max-h-select overflow-y-auto rounded-lg bg-white shadow-sm dark:bg-gray-900",
+              portal ? chunkYERNSNT4_cjs.cn("fixed", chunkTF3G3E72_cjs.layers.portal) : chunkYERNSNT4_cjs.cn("absolute left-0 top-full w-full", chunkTF3G3E72_cjs.layers.menu)
+            ),
+            style: {
+              ...portal && !menuPosition ? { visibility: "hidden" } : void 0,
+              ...portal ? menuPosition : void 0
+            },
+            onClick: (e) => e.stopPropagation(),
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col", children: options.map((option, index) => {
+              const isSelected = selectedOptions.includes(option.value);
+              return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: `w-full cursor-pointer rounded-t border-b border-gray-200 hover:bg-brand-500/5 dark:border-gray-800`,
+                  onClick: () => handleSelect(option.value),
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      className: `relative flex w-full items-center justify-between p-2 pl-2 ${isSelected ? "bg-brand-500/10" : ""}`,
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "div",
+                          {
+                            className: `mx-2 leading-6 ${isSelected ? "font-medium text-brand-600 dark:text-brand-400" : "text-gray-800 dark:text-white/90"}`,
+                            children: option.text
+                          }
+                        ),
+                        isSelected && /* @__PURE__ */ jsxRuntime.jsx(
+                          lucideReact.Check,
+                          {
+                            className: "mr-2 size-4 shrink-0 stroke-current text-brand-500",
+                            "aria-hidden": "true"
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              ) }, index);
+            }) })
+          }
+        );
+        if (!portal || typeof document === "undefined") return menu;
+        return reactDom.createPortal(menu, document.body);
+      })()
     ] }) })
   ] });
 };