npm - @andreagiugni/tailwind-dashboard-ui - Versions diffs - 1.0.4 → 1.0.6 - Mend

@andreagiugni/tailwind-dashboard-ui 1.0.4 → 1.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/index.d.cts CHANGED Viewed

@@ -519,8 +519,8 @@ interface RadioSmProps {
 }
 declare const RadioSm: React.FC<RadioSmProps>;
-interface SwitchProps {
-    label: string;
+interface SwitchProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "onChange" | "color"> {
+    label?: React.ReactNode;
     checked?: boolean;
     defaultChecked?: boolean;
     disabled?: boolean;
@@ -541,6 +541,8 @@ interface SelectProps {
     className?: string;
     defaultValue?: string;
     disabled?: boolean;
+    /** Render menu under document.body to avoid clipping inside tables/cards. Default: true. */
+    portal?: boolean;
 }
 /**
  * A custom single-select dropdown (no native `<select>`), so the menu is fully
@@ -559,6 +561,8 @@ interface MultiSelectProps {
     defaultSelected?: string[];
     onChange?: (selected: string[]) => void;
     disabled?: boolean;
+    /** Render menu under document.body to avoid clipping inside tables/cards. Default: true. */
+    portal?: boolean;
 }
 declare const MultiSelect: React.FC<MultiSelectProps>;

package/dist/index.d.ts CHANGED Viewed

@@ -519,8 +519,8 @@ interface RadioSmProps {
 }
 declare const RadioSm: React.FC<RadioSmProps>;
-interface SwitchProps {
-    label: string;
+interface SwitchProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "onChange" | "color"> {
+    label?: React.ReactNode;
     checked?: boolean;
     defaultChecked?: boolean;
     disabled?: boolean;
@@ -541,6 +541,8 @@ interface SelectProps {
     className?: string;
     defaultValue?: string;
     disabled?: boolean;
+    /** Render menu under document.body to avoid clipping inside tables/cards. Default: true. */
+    portal?: boolean;
 }
 /**
  * A custom single-select dropdown (no native `<select>`), so the menu is fully
@@ -559,6 +561,8 @@ interface MultiSelectProps {
     defaultSelected?: string[];
     onChange?: (selected: string[]) => void;
     disabled?: boolean;
+    /** Render menu under document.body to avoid clipping inside tables/cards. Default: true. */
+    portal?: boolean;
 }
 declare const MultiSelect: React.FC<MultiSelectProps>;

package/dist/index.js CHANGED Viewed

@@ -626,6 +626,8 @@ var Input = ({
   style,
   ...rest
 }) => {
+  const placeholder = typeof rest.placeholder === "string" ? rest.placeholder.trim() : "";
+  const placeholderMinWidth = placeholder ? `${Math.min(Math.max(placeholder.length + 6, 18), 40)}ch` : void 0;
   const stateClass = disabled ? "text-gray-500 border-gray-300 cursor-not-allowed dark:bg-gray-800 dark:text-gray-400 dark:border-gray-700" : error ? "text-error-800 border-error-500 focus:ring-3 focus:ring-error-500/10 dark:text-error-400 dark:border-error-500" : success ? "text-success-500 border-success-400 focus:ring-success-500/10 focus:border-success-300 dark:text-success-400 dark:border-success-500" : "text-gray-800 border-gray-300 focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:text-white/90 dark:focus:border-brand-800";
   return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ jsx(
@@ -637,7 +639,11 @@ var Input = ({
           stateClass,
           className
         ),
-        style: { ...styleOverride({ bgColor, textColor, borderColor }), ...style },
+        style: {
+          minWidth: placeholderMinWidth,
+          ...styleOverride({ bgColor, textColor, borderColor }),
+          ...style
+        },
         ...rest
       }
     ),
@@ -801,7 +807,7 @@ function DataDrivenTable({
                 setSearch(e.target.value);
                 setPage(1);
               },
-              className: "max-w-[220px]"
+              className: "sm:w-auto"
             }
           )
         ] }),
@@ -2214,7 +2220,12 @@ var Switch = ({
   defaultChecked = false,
   disabled = false,
   onChange,
-  color = "blue"
+  color = "blue",
+  className,
+  onClick,
+  onKeyDown,
+  "aria-label": ariaLabel,
+  ...rest
 }) => {
   const isControlled = checked !== void 0;
   const [internalChecked, setInternalChecked] = useState(defaultChecked);
@@ -2229,6 +2240,20 @@ var Switch = ({
       onChange(newCheckedState);
     }
   };
+  const handleClick = (event) => {
+    onClick?.(event);
+    if (!event.defaultPrevented) {
+      handleToggle();
+    }
+  };
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      handleToggle();
+    }
+  };
   const offTrack = "bg-gray-200 ring-1 ring-inset ring-gray-300 dark:bg-white/10 dark:ring-gray-700";
   const switchColors = color === "blue" ? {
     background: isChecked ? "bg-brand-500 " : offTrack,
@@ -2239,14 +2264,23 @@ var Switch = ({
     // Gray version
     knob: isChecked ? "translate-x-full bg-white" : "translate-x-0 bg-white"
   };
+  const hasLabel = label !== void 0 && label !== null && label !== "";
   return /* @__PURE__ */ jsxs(
     "label",
     {
+      role: "switch",
+      "aria-checked": isChecked,
+      "aria-disabled": disabled || void 0,
+      "aria-label": ariaLabel ?? (!hasLabel ? "Toggle switch" : void 0),
+      tabIndex: disabled ? -1 : 0,
       className: cn(
         "flex cursor-pointer select-none items-center gap-3 text-sm font-medium",
-        disabled ? "text-gray-400" : "text-gray-700 dark:text-gray-400"
+        disabled ? "text-gray-400" : "text-gray-700 dark:text-gray-400",
+        className
       ),
-      onClick: handleToggle,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      ...rest,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "relative", children: [
           /* @__PURE__ */ jsx(
@@ -2268,7 +2302,7 @@ var Switch = ({
             }
           )
         ] }),
-        label
+        hasLabel && /* @__PURE__ */ jsx("span", { children: label })
       ]
     }
   );
@@ -2279,15 +2313,20 @@ var Select = ({
   onChange,
   className,
   defaultValue = "",
-  disabled = false
+  disabled = false,
+  portal = true
 }) => {
   const [selectedValue, setSelectedValue] = useState(defaultValue);
   const [isOpen, setIsOpen] = useState(false);
   const rootRef = useRef(null);
+  const triggerRef = useRef(null);
+  const menuRef = useRef(null);
+  const [menuPosition, setMenuPosition] = useState();
   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);
       }
     };
@@ -2301,6 +2340,33 @@ var Select = ({
       document.removeEventListener("keydown", onKeyDown);
     };
   }, [isOpen]);
+  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);
   };
@@ -2314,6 +2380,7 @@ var Select = ({
     /* @__PURE__ */ jsxs(
       "button",
       {
+        ref: triggerRef,
         type: "button",
         onClick: toggleOpen,
         disabled,
@@ -2349,52 +2416,61 @@ var Select = ({
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsx(
-      "ul",
-      {
-        role: "listbox",
-        className: 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",
-          layers.menu
-        ),
-        children: options.map((option) => {
-          const isSelected = option.value === selectedValue;
-          return /* @__PURE__ */ jsxs(
-            "li",
-            {
-              role: "option",
-              "aria-selected": isSelected,
-              onClick: () => handleSelect(option.value),
-              className: 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__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
-                  option.icon && /* @__PURE__ */ jsx(
-                    "span",
+    isOpen && (() => {
+      const menu = /* @__PURE__ */ jsx(
+        "ul",
+        {
+          ref: menuRef,
+          role: "listbox",
+          className: 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 ? cn("fixed", layers.portal) : cn("absolute left-0 top-full mt-1.5 w-full", layers.menu)
+          ),
+          style: {
+            ...portal && !menuPosition ? { visibility: "hidden" } : void 0,
+            ...portal ? menuPosition : void 0
+          },
+          children: options.map((option) => {
+            const isSelected = option.value === selectedValue;
+            return /* @__PURE__ */ jsxs(
+              "li",
+              {
+                role: "option",
+                "aria-selected": isSelected,
+                onClick: () => handleSelect(option.value),
+                className: 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__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+                    option.icon && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        className: "flex h-5 w-5 shrink-0 items-center justify-center [&>svg]:size-4",
+                        children: option.icon
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label })
+                  ] }),
+                  isSelected && /* @__PURE__ */ jsx(
+                    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__ */ jsx("span", { className: "truncate", children: option.label })
-                ] }),
-                isSelected && /* @__PURE__ */ jsx(
-                  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 createPortal(menu, document.body);
+    })()
   ] });
 };
 var MultiSelect = ({
@@ -2402,10 +2478,60 @@ var MultiSelect = ({
   options,
   defaultSelected = [],
   onChange,
-  disabled = false
+  disabled = false,
+  portal = true
 }) => {
   const [selectedOptions, setSelectedOptions] = useState(defaultSelected);
   const [isOpen, setIsOpen] = useState(false);
+  const rootRef = useRef(null);
+  const triggerRef = useRef(null);
+  const menuRef = useRef(null);
+  const [menuPosition, setMenuPosition] = useState();
+  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]);
+  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);
@@ -2423,94 +2549,110 @@ var MultiSelect = ({
   const selectedValuesText = selectedOptions.map(
     (value) => options.find((option) => option.value === value)?.text || ""
   );
-  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: "w-full", children: [
     /* @__PURE__ */ jsx("label", { className: "mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400", children: label }),
     /* @__PURE__ */ jsx("div", { className: "relative inline-block w-full", children: /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center", children: [
-      /* @__PURE__ */ jsx("div", { onClick: toggleDropdown, className: "w-full", children: /* @__PURE__ */ 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__ */ jsx("div", { className: "flex flex-wrap flex-auto gap-2", children: selectedValuesText.length > 0 ? selectedValuesText.map((text, index) => /* @__PURE__ */ 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__ */ jsx("span", { className: "flex-initial max-w-full", children: text }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-row-reverse flex-auto", children: /* @__PURE__ */ 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__ */ jsx(X, { className: "size-4", role: "button", "aria-hidden": "true" })
-                }
-              ) })
-            ]
-          },
-          index
-        )) : /* @__PURE__ */ 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__ */ jsx("div", { className: "flex items-center py-1 pl-1 pr-1 w-7", children: /* @__PURE__ */ 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__ */ jsx(
-              ChevronDown,
-              {
-                className: `size-4 stroke-current ${isOpen ? "rotate-180" : ""}`,
-                "aria-hidden": "true"
-              }
-            )
-          }
-        ) })
-      ] }) }),
-      isOpen && /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { onClick: toggleDropdown, className: "w-full", children: /* @__PURE__ */ jsxs(
         "div",
         {
-          className: cn(
-            "absolute left-0 top-full max-h-select w-full overflow-y-auto rounded-lg bg-white shadow-sm dark:bg-gray-900",
-            layers.menu
-          ),
-          onClick: (e) => e.stopPropagation(),
-          children: /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: options.map((option, index) => {
-            const isSelected = selectedOptions.includes(option.value);
-            return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ 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__ */ jsx("div", { className: "flex flex-wrap flex-auto gap-2", children: selectedValuesText.length > 0 ? selectedValuesText.map((text, index) => /* @__PURE__ */ 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__ */ 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__ */ jsx("span", { className: "flex-initial max-w-full", children: text }),
+                  /* @__PURE__ */ jsx("div", { className: "flex flex-row-reverse flex-auto", children: /* @__PURE__ */ 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__ */ jsx(X, { className: "size-4", role: "button", "aria-hidden": "true" })
+                    }
+                  ) })
+                ]
+              },
+              index
+            )) : /* @__PURE__ */ 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__ */ jsx("div", { className: "flex items-center py-1 pl-1 pr-1 w-7", children: /* @__PURE__ */ 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__ */ jsx(
+                  ChevronDown,
                   {
-                    className: `relative flex w-full items-center justify-between p-2 pl-2 ${isSelected ? "bg-brand-500/10" : ""}`,
-                    children: [
-                      /* @__PURE__ */ 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__ */ jsx(
-                        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__ */ jsx(
+          "div",
+          {
+            ref: menuRef,
+            className: cn(
+              "max-h-select overflow-y-auto rounded-lg bg-white shadow-sm dark:bg-gray-900",
+              portal ? cn("fixed", layers.portal) : cn("absolute left-0 top-full w-full", layers.menu)
+            ),
+            style: {
+              ...portal && !menuPosition ? { visibility: "hidden" } : void 0,
+              ...portal ? menuPosition : void 0
+            },
+            onClick: (e) => e.stopPropagation(),
+            children: /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: options.map((option, index) => {
+              const isSelected = selectedOptions.includes(option.value);
+              return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ 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__ */ jsxs(
+                    "div",
+                    {
+                      className: `relative flex w-full items-center justify-between p-2 pl-2 ${isSelected ? "bg-brand-500/10" : ""}`,
+                      children: [
+                        /* @__PURE__ */ 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__ */ jsx(
+                          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 createPortal(menu, document.body);
+      })()
     ] }) })
   ] });
 };