@backstage/ui 0.7.2-next.2 → 0.8.1

package/dist/components/Link/Link.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.esm.js","sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport { Link as AriaLink, RouterProvider } from 'react-aria-components';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport type { LinkProps } from './types';\nimport { useNavigate, useHref } from 'react-router-dom';\nimport { isExternalLink } from '../../utils/isExternalLink';\n\n/** @public */\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {\n  const navigate = useNavigate();\n  const {\n    className,\n    variant = 'body',\n    weight = 'regular',\n    color = 'primary',\n    truncate,\n    href,\n    ...restProps\n  } = props;\n\n  const { classNames: linkClassNames } = useStyles('Link');\n  const { classNames: textClassNames, dataAttributes: textDataAttributes } =\n    useStyles('Text', {\n      variant,\n      weight,\n      color,\n    });\n\n  const isExternal = isExternalLink(href);\n\n  // If it's an external link, render AriaLink without RouterProvider\n  if (isExternal) {\n    return (\n      <AriaLink\n        ref={ref}\n        className={clsx(textClassNames.root, linkClassNames.root, className)}\n        data-truncate={truncate}\n        href={href}\n        {...textDataAttributes}\n        {...restProps}\n      />\n    );\n  }\n\n  // For internal links, use RouterProvider\n  return (\n    <RouterProvider navigate={navigate} useHref={useHref}>\n      <AriaLink\n        ref={ref}\n        className={clsx(textClassNames.root, linkClassNames.root, className)}\n        data-truncate={truncate}\n        {...textDataAttributes}\n        href={href}\n        {...restProps}\n      />\n    </RouterProvider>\n  );\n});\n\nLink.displayName = 'Link';\n"],"names":["AriaLink"],"mappings":";;;;;;;;AAyBO,MAAM,IAAA,GAAO,UAAA,CAAyC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC3E,EAAA,MAAM,WAAW,WAAA,EAAY;AAC7B,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,OAAA,GAAU,MAAA;AAAA,IACV,MAAA,GAAS,SAAA;AAAA,IACT,KAAA,GAAQ,SAAA;AAAA,IACR,QAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAe,GAAI,UAAU,MAAM,CAAA;AACvD,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,gBAAgB,kBAAA,EAAmB,GACrE,UAAU,MAAA,EAAQ;AAAA,IAChB,OAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GACD,CAAA;AAEH,EAAA,MAAM,UAAA,GAAa,eAAe,IAAI,CAAA;AAGtC,EAAA,IAAI,UAAA,EAAY;AACd,IAAA,uBACE,GAAA;AAAA,MAACA,MAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,WAAW,IAAA,CAAK,cAAA,CAAe,IAAA,EAAM,cAAA,CAAe,MAAM,SAAS,CAAA;AAAA,QACnE,eAAA,EAAe,QAAA;AAAA,QACf,IAAA;AAAA,QACC,GAAG,kBAAA;AAAA,QACH,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AAGA,EAAA,uBACE,GAAA,CAAC,cAAA,EAAA,EAAe,QAAA,EAAoB,OAAA,EAClC,QAAA,kBAAA,GAAA;AAAA,IAACA,MAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAW,IAAA,CAAK,cAAA,CAAe,IAAA,EAAM,cAAA,CAAe,MAAM,SAAS,CAAA;AAAA,MACnE,eAAA,EAAe,QAAA;AAAA,MACd,GAAG,kBAAA;AAAA,MACJ,IAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN,EACF,CAAA;AAEJ,CAAC;AAED,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}
+{"version":3,"file":"Link.esm.js","sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport { Link as AriaLink, RouterProvider } from 'react-aria-components';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport type { LinkProps } from './types';\nimport { useNavigate, useHref } from 'react-router-dom';\nimport { isExternalLink } from '../../utils/isExternalLink';\nimport stylesLink from './Link.module.css';\nimport stylesText from '../Text/Text.module.css';\n\n/** @public */\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {\n  const navigate = useNavigate();\n  const { classNames: classNamesLink } = useStyles('Link', props);\n  const {\n    classNames: classNamesText,\n    dataAttributes: textDataAttributes,\n    cleanedProps,\n  } = useStyles('Text', {\n    variant: 'body',\n    weight: 'regular',\n    color: 'primary',\n    ...props,\n  });\n  const { className, variant, weight, color, truncate, href, ...restProps } =\n    cleanedProps;\n\n  const isExternal = isExternalLink(href);\n\n  // If it's an external link, render AriaLink without RouterProvider\n  if (isExternal) {\n    return (\n      <AriaLink\n        ref={ref}\n        className={clsx(\n          classNamesText.root,\n          classNamesLink.root,\n          stylesText[classNamesText.root],\n          stylesLink[classNamesLink.root],\n          className,\n        )}\n        data-truncate={truncate}\n        href={href}\n        {...textDataAttributes}\n        {...restProps}\n      />\n    );\n  }\n\n  // For internal links, use RouterProvider\n  return (\n    <RouterProvider navigate={navigate} useHref={useHref}>\n      <AriaLink\n        ref={ref}\n        className={clsx(\n          classNamesText.root,\n          classNamesLink.root,\n          stylesText[classNamesText.root],\n          stylesLink[classNamesLink.root],\n          className,\n        )}\n        data-truncate={truncate}\n        {...textDataAttributes}\n        href={href}\n        {...restProps}\n      />\n    </RouterProvider>\n  );\n});\n\nLink.displayName = 'Link';\n"],"names":["AriaLink"],"mappings":";;;;;;;;;;AA2BO,MAAM,IAAA,GAAO,UAAA,CAAyC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC3E,EAAA,MAAM,WAAW,WAAA,EAAY;AAC7B,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAe,GAAI,SAAA,CAAU,QAAQ,KAAK,CAAA;AAC9D,EAAA,MAAM;AAAA,IACJ,UAAA,EAAY,cAAA;AAAA,IACZ,cAAA,EAAgB,kBAAA;AAAA,IAChB;AAAA,GACF,GAAI,UAAU,MAAA,EAAQ;AAAA,IACpB,OAAA,EAAS,MAAA;AAAA,IACT,MAAA,EAAQ,SAAA;AAAA,IACR,KAAA,EAAO,SAAA;AAAA,IACP,GAAG;AAAA,GACJ,CAAA;AACD,EAAA,MAAM,EAAE,WAAW,OAAA,EAAS,MAAA,EAAQ,OAAO,QAAA,EAAU,IAAA,EAAM,GAAG,SAAA,EAAU,GACtE,YAAA;AAEF,EAAA,MAAM,UAAA,GAAa,eAAe,IAAI,CAAA;AAGtC,EAAA,IAAI,UAAA,EAAY;AACd,IAAA,uBACE,GAAA;AAAA,MAACA,MAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,IAAA;AAAA,UACT,cAAA,CAAe,IAAA;AAAA,UACf,cAAA,CAAe,IAAA;AAAA,UACf,UAAA,CAAW,eAAe,IAAI,CAAA;AAAA,UAC9B,UAAA,CAAW,eAAe,IAAI,CAAA;AAAA,UAC9B;AAAA,SACF;AAAA,QACA,eAAA,EAAe,QAAA;AAAA,QACf,IAAA;AAAA,QACC,GAAG,kBAAA;AAAA,QACH,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AAGA,EAAA,uBACE,GAAA,CAAC,cAAA,EAAA,EAAe,QAAA,EAAoB,OAAA,EAClC,QAAA,kBAAA,GAAA;AAAA,IAACA,MAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,IAAA;AAAA,QACT,cAAA,CAAe,IAAA;AAAA,QACf,cAAA,CAAe,IAAA;AAAA,QACf,UAAA,CAAW,eAAe,IAAI,CAAA;AAAA,QAC9B,UAAA,CAAW,eAAe,IAAI,CAAA;AAAA,QAC9B;AAAA,OACF;AAAA,MACA,eAAA,EAAe,QAAA;AAAA,MACd,GAAG,kBAAA;AAAA,MACJ,IAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN,EACF,CAAA;AAEJ,CAAC;AAED,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}

package/dist/components/Link/Link.module.css.esm.js

@@ -0,0 +1,8 @@
+import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer components {\n  .Link-module_bui-Link__3bbuU {\n    font-family: var(--bui-font-regular);\n    padding: 0;\n    margin: 0;\n    cursor: pointer;\n    text-decoration-line: none;\n    display: inline-block;\n\n    &:hover {\n      text-decoration-line: underline;\n      text-decoration-style: solid;\n      text-decoration-thickness: min(2px, max(1px, 0.05em));\n      text-underline-offset: calc(0.025em + 2px);\n      text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);\n    }\n  }\n}\n";
+var stylesLink = {"bui-Link":"Link-module_bui-Link__3bbuU"};
+styleInject(css_248z);
+
+export { stylesLink as default };
+//# sourceMappingURL=Link.module.css.esm.js.map

package/dist/components/Link/Link.module.css.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.module.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/Menu/Menu.esm.js

@@ -1,14 +1,17 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { MenuTrigger as MenuTrigger$1, SubmenuTrigger as SubmenuTrigger$1, Popover, RouterProvider, Menu as Menu$1, ListBox, useFilter, Autocomplete, SearchField, Input, Button, MenuItem as MenuItem$1, ListBoxItem, MenuSection as MenuSection$1, Header, Separator } from 'react-aria-components';
-import { ScrollArea } from '../ScrollArea/ScrollArea.esm.js';
+import { MenuTrigger as MenuTrigger$1, SubmenuTrigger as SubmenuTrigger$1, OverlayTriggerStateContext, Menu as Menu$1, Popover, RouterProvider, Virtualizer, ListLayout, ListBox, useFilter, Autocomplete, SearchField, Input, Button, MenuItem as MenuItem$1, ListBoxItem, MenuSection as MenuSection$1, Header, Separator } from 'react-aria-components';
 import { useStyles } from '../../hooks/useStyles.esm.js';
 import { RiCloseCircleLine, RiArrowRightSLine, RiCheckLine } from '@remixicon/react';
 import { useNavigate, useHref } from 'react-router-dom';
 import { isExternalLink } from '../../utils/isExternalLink.esm.js';
+import { useRef, useContext, useEffect } from 'react';
+import styles from './Menu.module.css.esm.js';
+import clsx from 'clsx';
 
+const rowHeight = 32;
 const MenuEmptyState = () => {
   const { classNames } = useStyles("Menu");
-  return /* @__PURE__ */ jsx("div", { className: classNames.emptyState, children: "No results found." });
+  return /* @__PURE__ */ jsx("div", { className: clsx(classNames.emptyState, styles[classNames.emptyState]), children: "No results found." });
 };
 const MenuTrigger = (props) => {
   return /* @__PURE__ */ jsx(MenuTrigger$1, { ...props });
@@ -17,165 +20,420 @@ const SubmenuTrigger = (props) => {
   return /* @__PURE__ */ jsx(SubmenuTrigger$1, { ...props });
 };
 const Menu = (props) => {
-  const { placement = "bottom start", ...rest } = props;
-  const { classNames } = useStyles("Menu");
+  const { classNames, cleanedProps } = useStyles("Menu", props);
+  const {
+    placement = "bottom start",
+    virtualized = false,
+    maxWidth,
+    maxHeight,
+    style,
+    ...rest
+  } = cleanedProps;
   const navigate = useNavigate();
-  return /* @__PURE__ */ jsx(Popover, { className: classNames.popover, placement, children: /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: /* @__PURE__ */ jsxs(ScrollArea.Root, { children: [
-    /* @__PURE__ */ jsx(ScrollArea.Viewport, { children: /* @__PURE__ */ jsx(Menu$1, { className: classNames.content, ...rest, children: props.children }) }),
-    /* @__PURE__ */ jsx(ScrollArea.Scrollbar, { orientation: "vertical", style: {}, children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {}) })
-  ] }) }) });
+  let newMaxWidth = maxWidth || (virtualized ? "260px" : "undefined");
+  const popoverRef = useRef(null);
+  const state = useContext(OverlayTriggerStateContext);
+  useEffect(() => {
+    if (!state?.isOpen) return;
+    const handleClickOutside = (event) => {
+      const target = event.target;
+      if (popoverRef.current && !popoverRef.current.contains(target)) {
+        const isOnTrigger = target.closest("[data-trigger]");
+        const isOnSubmenu = target.closest('[role="menu"]');
+        if (!isOnTrigger && !isOnSubmenu) {
+          state.close();
+        }
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [state]);
+  const menuContent = /* @__PURE__ */ jsx(
+    Menu$1,
+    {
+      className: clsx(classNames.content, styles[classNames.content]),
+      renderEmptyState: () => /* @__PURE__ */ jsx(MenuEmptyState, {}),
+      style: { width: newMaxWidth, maxHeight, ...style },
+      ...rest
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      ref: popoverRef,
+      className: clsx(classNames.popover, styles[classNames.popover]),
+      placement,
+      isNonModal: true,
+      isKeyboardDismissDisabled: false,
+      children: /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: virtualized ? /* @__PURE__ */ jsx(
+        Virtualizer,
+        {
+          layout: ListLayout,
+          layoutOptions: {
+            rowHeight
+          },
+          children: menuContent
+        }
+      ) : menuContent })
+    }
+  );
 };
 const MenuListBox = (props) => {
+  const { classNames, cleanedProps } = useStyles("Menu", props);
   const {
     selectionMode = "single",
     placement = "bottom start",
+    virtualized = false,
+    maxWidth,
+    maxHeight,
+    style,
     ...rest
-  } = props;
-  const { classNames } = useStyles("Menu");
-  return /* @__PURE__ */ jsx(Popover, { className: classNames.popover, placement, children: /* @__PURE__ */ jsxs(ScrollArea.Root, { children: [
-    /* @__PURE__ */ jsx(ScrollArea.Viewport, { children: /* @__PURE__ */ jsx(
-      ListBox,
-      {
-        className: classNames.content,
-        selectionMode,
-        ...rest
-      }
-    ) }),
-    /* @__PURE__ */ jsx(ScrollArea.Scrollbar, { orientation: "vertical", style: {}, children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {}) })
-  ] }) });
+  } = cleanedProps;
+  let newMaxWidth = maxWidth || (virtualized ? "260px" : "undefined");
+  const listBoxContent = /* @__PURE__ */ jsx(
+    ListBox,
+    {
+      className: clsx(classNames.content, styles[classNames.content]),
+      selectionMode,
+      style: { width: newMaxWidth, maxHeight, ...style },
+      ...rest
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      className: clsx(classNames.popover, styles[classNames.popover]),
+      placement,
+      children: virtualized ? /* @__PURE__ */ jsx(
+        Virtualizer,
+        {
+          layout: ListLayout,
+          layoutOptions: {
+            rowHeight
+          },
+          children: listBoxContent
+        }
+      ) : listBoxContent
+    }
+  );
 };
 const MenuAutocomplete = (props) => {
-  const { placement = "bottom start", ...rest } = props;
-  const { classNames } = useStyles("Menu");
+  const { classNames, cleanedProps } = useStyles("Menu", props);
+  const {
+    placement = "bottom start",
+    virtualized = false,
+    maxWidth,
+    maxHeight,
+    style,
+    ...rest
+  } = cleanedProps;
   const { contains } = useFilter({ sensitivity: "base" });
-  return /* @__PURE__ */ jsx(Popover, { className: classNames.popover, placement, children: /* @__PURE__ */ jsxs(Autocomplete, { filter: contains, children: [
-    /* @__PURE__ */ jsxs(SearchField, { className: classNames.searchField, children: [
-      /* @__PURE__ */ jsx(
-        Input,
-        {
-          className: classNames.searchFieldInput,
-          "aria-label": "Search",
-          placeholder: props.placeholder || "Search..."
-        }
-      ),
-      /* @__PURE__ */ jsx(Button, { className: classNames.searchFieldClear, children: /* @__PURE__ */ jsx(RiCloseCircleLine, {}) })
-    ] }),
-    /* @__PURE__ */ jsxs(ScrollArea.Root, { children: [
-      /* @__PURE__ */ jsx(ScrollArea.Viewport, { children: /* @__PURE__ */ jsx(
-        Menu$1,
-        {
-          className: classNames.content,
-          renderEmptyState: () => /* @__PURE__ */ jsx(MenuEmptyState, {}),
-          ...rest
-        }
-      ) }),
-      /* @__PURE__ */ jsx(ScrollArea.Scrollbar, { orientation: "vertical", style: {}, children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {}) })
-    ] })
-  ] }) });
+  let newMaxWidth = maxWidth || (virtualized ? "260px" : "undefined");
+  const navigate = useNavigate();
+  const menuContent = /* @__PURE__ */ jsx(
+    Menu$1,
+    {
+      className: clsx(classNames.content, styles[classNames.content]),
+      renderEmptyState: () => /* @__PURE__ */ jsx(MenuEmptyState, {}),
+      style: { width: newMaxWidth, maxHeight, ...style },
+      ...rest
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      className: clsx(classNames.popover, styles[classNames.popover]),
+      placement,
+      children: /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: /* @__PURE__ */ jsxs(Autocomplete, { filter: contains, children: [
+        /* @__PURE__ */ jsxs(
+          SearchField,
+          {
+            className: clsx(
+              classNames.searchField,
+              styles[classNames.searchField]
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  className: clsx(
+                    classNames.searchFieldInput,
+                    styles[classNames.searchFieldInput]
+                  ),
+                  "aria-label": "Search",
+                  placeholder: props.placeholder || "Search..."
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  className: clsx(
+                    classNames.searchFieldClear,
+                    styles[classNames.searchFieldClear]
+                  ),
+                  children: /* @__PURE__ */ jsx(RiCloseCircleLine, {})
+                }
+              )
+            ]
+          }
+        ),
+        virtualized ? /* @__PURE__ */ jsx(
+          Virtualizer,
+          {
+            layout: ListLayout,
+            layoutOptions: {
+              rowHeight
+            },
+            children: menuContent
+          }
+        ) : menuContent
+      ] }) })
+    }
+  );
 };
 const MenuAutocompleteListbox = (props) => {
+  const { classNames, cleanedProps } = useStyles("Menu", props);
   const {
     selectionMode = "single",
     placement = "bottom start",
+    virtualized = false,
+    maxWidth,
+    maxHeight,
+    style,
     ...rest
-  } = props;
-  const { classNames } = useStyles("Menu");
+  } = cleanedProps;
   const { contains } = useFilter({ sensitivity: "base" });
-  return /* @__PURE__ */ jsx(Popover, { className: classNames.popover, placement, children: /* @__PURE__ */ jsxs(Autocomplete, { filter: contains, children: [
-    /* @__PURE__ */ jsxs(SearchField, { className: classNames.searchField, children: [
-      /* @__PURE__ */ jsx(
-        Input,
-        {
-          className: classNames.searchFieldInput,
-          "aria-label": "Search",
-          placeholder: props.placeholder || "Search..."
-        }
-      ),
-      /* @__PURE__ */ jsx(Button, { className: classNames.searchFieldClear, children: /* @__PURE__ */ jsx(RiCloseCircleLine, {}) })
-    ] }),
-    /* @__PURE__ */ jsxs(ScrollArea.Root, { children: [
-      /* @__PURE__ */ jsx(ScrollArea.Viewport, { children: /* @__PURE__ */ jsx(
-        ListBox,
-        {
-          className: classNames.content,
-          renderEmptyState: () => /* @__PURE__ */ jsx(MenuEmptyState, {}),
-          selectionMode,
-          ...rest
-        }
-      ) }),
-      /* @__PURE__ */ jsx(ScrollArea.Scrollbar, { orientation: "vertical", style: {}, children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {}) })
-    ] })
-  ] }) });
+  let newMaxWidth = maxWidth || (virtualized ? "260px" : "undefined");
+  const listBoxContent = /* @__PURE__ */ jsx(
+    ListBox,
+    {
+      className: clsx(classNames.content, styles[classNames.content]),
+      renderEmptyState: () => /* @__PURE__ */ jsx(MenuEmptyState, {}),
+      selectionMode,
+      style: { width: newMaxWidth, maxHeight, ...style },
+      ...rest
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      className: clsx(classNames.popover, styles[classNames.popover]),
+      placement,
+      children: /* @__PURE__ */ jsxs(Autocomplete, { filter: contains, children: [
+        /* @__PURE__ */ jsxs(
+          SearchField,
+          {
+            className: clsx(
+              classNames.searchField,
+              styles[classNames.searchField]
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  className: clsx(
+                    classNames.searchFieldInput,
+                    styles[classNames.searchFieldInput]
+                  ),
+                  "aria-label": "Search",
+                  placeholder: props.placeholder || "Search..."
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  className: clsx(
+                    classNames.searchFieldClear,
+                    styles[classNames.searchFieldClear]
+                  ),
+                  children: /* @__PURE__ */ jsx(RiCloseCircleLine, {})
+                }
+              )
+            ]
+          }
+        ),
+        virtualized ? /* @__PURE__ */ jsx(
+          Virtualizer,
+          {
+            layout: ListLayout,
+            layoutOptions: {
+              rowHeight
+            },
+            children: listBoxContent
+          }
+        ) : listBoxContent
+      ] })
+    }
+  );
 };
 const MenuItem = (props) => {
-  const { iconStart, color = "primary", children, href, ...rest } = props;
-  const { classNames } = useStyles("Menu");
+  const { classNames, cleanedProps } = useStyles("Menu", props);
+  const {
+    iconStart,
+    color = "primary",
+    children,
+    href,
+    ...rest
+  } = cleanedProps;
   const isLink = href !== void 0;
   const isExternal = isExternalLink(href);
-  const content = /* @__PURE__ */ jsxs(
-    MenuItem$1,
-    {
-      className: classNames.item,
-      "data-color": color,
-      href,
-      textValue: typeof children === "string" ? children : void 0,
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: classNames.itemContent, children: [
-          iconStart,
-          children
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: classNames.itemArrow, children: /* @__PURE__ */ jsx(RiArrowRightSLine, {}) })
-      ]
-    }
-  );
   if (isLink && isExternal) {
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(
       MenuItem$1,
       {
-        className: classNames.item,
+        className: clsx(classNames.item, styles[classNames.item]),
         "data-color": color,
         textValue: typeof children === "string" ? children : void 0,
         onAction: () => window.open(href, "_blank", "noopener,noreferrer"),
         ...rest,
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: classNames.itemContent, children: [
-            iconStart,
-            children
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: classNames.itemArrow, children: /* @__PURE__ */ jsx(RiArrowRightSLine, {}) })
-        ]
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: clsx(
+              classNames.itemWrapper,
+              styles[classNames.itemWrapper]
+            ),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: clsx(
+                    classNames.itemContent,
+                    styles[classNames.itemContent]
+                  ),
+                  children: [
+                    iconStart,
+                    children
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: clsx(classNames.itemArrow, styles[classNames.itemArrow]),
+                  children: /* @__PURE__ */ jsx(RiArrowRightSLine, {})
+                }
+              )
+            ]
+          }
+        )
       }
     );
   }
-  return content;
+  return /* @__PURE__ */ jsx(
+    MenuItem$1,
+    {
+      className: clsx(classNames.item, styles[classNames.item]),
+      "data-color": color,
+      href,
+      textValue: typeof children === "string" ? children : void 0,
+      ...rest,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: clsx(classNames.itemWrapper, styles[classNames.itemWrapper]),
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: clsx(
+                  classNames.itemContent,
+                  styles[classNames.itemContent]
+                ),
+                children: [
+                  iconStart,
+                  children
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: clsx(classNames.itemArrow, styles[classNames.itemArrow]),
+                children: /* @__PURE__ */ jsx(RiArrowRightSLine, {})
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
 };
 const MenuListBoxItem = (props) => {
-  const { children, ...rest } = props;
-  const { classNames } = useStyles("Menu");
+  const { classNames, cleanedProps } = useStyles("Menu", props);
+  const { children, ...rest } = cleanedProps;
   return /* @__PURE__ */ jsx(
     ListBoxItem,
     {
       textValue: typeof props.children === "string" ? props.children : void 0,
-      className: classNames.itemListBox,
+      className: clsx(classNames.itemListBox, styles[classNames.itemListBox]),
       ...rest,
-      children: /* @__PURE__ */ jsxs("div", { className: classNames.itemContent, children: [
-        /* @__PURE__ */ jsx("div", { className: classNames.itemListBoxCheck, children: /* @__PURE__ */ jsx(RiCheckLine, {}) }),
-        children
-      ] })
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: clsx(classNames.itemWrapper, styles[classNames.itemWrapper]),
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: clsx(
+                classNames.itemContent,
+                styles[classNames.itemContent]
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: clsx(
+                      classNames.itemListBoxCheck,
+                      styles[classNames.itemListBoxCheck]
+                    ),
+                    children: /* @__PURE__ */ jsx(RiCheckLine, {})
+                  }
+                ),
+                children
+              ]
+            }
+          )
+        }
+      )
     }
   );
 };
 const MenuSection = (props) => {
-  const { classNames } = useStyles("Menu");
-  return /* @__PURE__ */ jsxs(MenuSection$1, { className: classNames.section, ...props, children: [
-    /* @__PURE__ */ jsx(Header, { className: classNames.sectionHeader, children: props.title }),
-    props.children
-  ] });
+  const { classNames, cleanedProps } = useStyles("Menu", props);
+  const { children, title, ...rest } = cleanedProps;
+  return /* @__PURE__ */ jsxs(
+    MenuSection$1,
+    {
+      className: clsx(classNames.section, styles[classNames.section]),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          Header,
+          {
+            className: clsx(
+              classNames.sectionHeader,
+              styles[classNames.sectionHeader]
+            ),
+            children: title
+          }
+        ),
+        children
+      ]
+    }
+  );
 };
 const MenuSeparator = (props) => {
-  const { classNames } = useStyles("Menu");
-  return /* @__PURE__ */ jsx(Separator, { className: classNames.separator, ...props });
+  const { classNames, cleanedProps } = useStyles("Menu", props);
+  return /* @__PURE__ */ jsx(
+    Separator,
+    {
+      className: clsx(classNames.separator, styles[classNames.separator]),
+      ...cleanedProps
+    }
+  );
 };
 
 export { Menu, MenuAutocomplete, MenuAutocompleteListbox, MenuItem, MenuListBox, MenuListBoxItem, MenuSection, MenuSeparator, MenuTrigger, SubmenuTrigger };