@backstage/ui 0.0.0-nightly-20250816024305 → 0.0.0-nightly-20250818024926

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

@@ -1,224 +1,166 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Menu as Menu$1 } from '@base-ui-components/react/menu';
-import clsx from 'clsx';
-import { Combobox } from './Combobox.esm.js';
-import '@remixicon/react';
-import { Icon } from '../Icon/Icon.esm.js';
-import '../Icon/context.esm.js';
+import { MenuTrigger as MenuTrigger$1, SubmenuTrigger as SubmenuTrigger$1, Popover, Menu as Menu$1, ListBox, useFilter, Autocomplete, SearchField, Input, Button, MenuItem as MenuItem$1, RouterProvider, ListBoxItem, MenuSection as MenuSection$1, Header, Separator } from 'react-aria-components';
+import { ScrollArea } from '../ScrollArea/ScrollArea.esm.js';
 import { useStyles } from '../../hooks/useStyles.esm.js';
+import { RiCloseCircleLine, RiArrowRightSLine, RiCheckLine } from '@remixicon/react';
+import { isExternalLink } from '../../utils/isExternalLink.esm.js';
+import { useNavigate, useHref } from 'react-router-dom';
 
-const MenuTrigger = forwardRef(({ className, ...props }, ref) => {
+const MenuEmptyState = () => {
   const { classNames } = useStyles("Menu");
-  return /* @__PURE__ */ jsx(
-    Menu$1.Trigger,
-    {
-      ref,
-      className: clsx(classNames.trigger, className),
-      ...props
-    }
-  );
-});
-MenuTrigger.displayName = Menu$1.Trigger.displayName;
-const MenuBackdrop = forwardRef(({ className, ...props }, ref) => {
-  const { classNames } = useStyles("Menu");
-  return /* @__PURE__ */ jsx(
-    Menu$1.Backdrop,
-    {
-      ref,
-      className: clsx(classNames.backdrop, className),
-      ...props
-    }
-  );
-});
-MenuBackdrop.displayName = Menu$1.Backdrop.displayName;
-const MenuPositioner = forwardRef(({ className, ...props }, ref) => {
-  const { classNames } = useStyles("Menu");
-  return /* @__PURE__ */ jsx(
-    Menu$1.Positioner,
-    {
-      ref,
-      className: clsx(classNames.positioner, className),
-      ...props
-    }
-  );
-});
-MenuPositioner.displayName = Menu$1.Positioner.displayName;
-const MenuPopup = forwardRef(({ className, ...props }, ref) => {
-  const { classNames } = useStyles("Menu");
-  return /* @__PURE__ */ jsx(
-    Menu$1.Popup,
-    {
-      ref,
-      className: clsx(classNames.popup, className),
-      ...props
-    }
-  );
-});
-MenuPopup.displayName = Menu$1.Popup.displayName;
-const MenuArrow = forwardRef(({ className, ...props }, ref) => {
-  const { classNames } = useStyles("Menu");
-  return /* @__PURE__ */ jsx(
-    Menu$1.Arrow,
-    {
-      ref,
-      className: clsx(classNames.arrow, className),
-      ...props
-    }
-  );
-});
-MenuArrow.displayName = Menu$1.Arrow.displayName;
-const MenuItem = forwardRef(({ className, ...props }, ref) => {
-  const { classNames } = useStyles("Menu");
-  return /* @__PURE__ */ jsx(
-    Menu$1.Item,
-    {
-      ref,
-      className: clsx(classNames.item, className),
-      ...props
-    }
-  );
-});
-MenuItem.displayName = Menu$1.Item.displayName;
-const MenuGroup = forwardRef(({ className, ...props }, ref) => {
-  const { classNames } = useStyles("Menu");
-  return /* @__PURE__ */ jsx(
-    Menu$1.Group,
-    {
-      ref,
-      className: clsx(classNames.group, className),
-      ...props
-    }
-  );
-});
-MenuGroup.displayName = Menu$1.Group.displayName;
-const MenuGroupLabel = forwardRef(({ className, ...props }, ref) => {
-  const { classNames } = useStyles("Menu");
-  return /* @__PURE__ */ jsx(
-    Menu$1.GroupLabel,
-    {
-      ref,
-      className: clsx(classNames.groupLabel, className),
-      ...props
-    }
-  );
-});
-MenuGroupLabel.displayName = Menu$1.GroupLabel.displayName;
-const MenuRadioGroup = forwardRef(({ className, ...props }, ref) => {
-  const { classNames } = useStyles("Menu");
-  return /* @__PURE__ */ jsx(
-    Menu$1.RadioGroup,
-    {
-      ref,
-      className: clsx(classNames.radioGroup, className),
-      ...props
-    }
-  );
-});
-MenuRadioGroup.displayName = Menu$1.RadioGroup.displayName;
-const MenuRadioItem = forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx("div", { className: classNames.emptyState, children: "No results found." });
+};
+const MenuTrigger = (props) => {
+  return /* @__PURE__ */ jsx(MenuTrigger$1, { ...props });
+};
+const SubmenuTrigger = (props) => {
+  return /* @__PURE__ */ jsx(SubmenuTrigger$1, { ...props });
+};
+const Menu = (props) => {
+  const { placement = "bottom start", ...rest } = props;
   const { classNames } = useStyles("Menu");
-  return /* @__PURE__ */ jsx(
-    Menu$1.RadioItem,
-    {
-      ref,
-      className: clsx(classNames.radioItem, className),
-      ...props
-    }
-  );
-});
-MenuRadioItem.displayName = Menu$1.RadioItem.displayName;
-const MenuRadioItemIndicator = forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(Popover, { className: classNames.popover, placement, 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, {}) })
+  ] }) });
+};
+const MenuListBox = (props) => {
+  const {
+    selectionMode = "single",
+    placement = "bottom start",
+    ...rest
+  } = props;
   const { classNames } = useStyles("Menu");
-  return /* @__PURE__ */ jsx(
-    Menu$1.RadioItemIndicator,
-    {
-      ref,
-      className: clsx(classNames.radioItemIndicator, className),
-      ...props
-    }
-  );
-});
-MenuRadioItemIndicator.displayName = Menu$1.RadioItemIndicator.displayName;
-const MenuCheckboxItem = forwardRef(({ className, ...props }, ref) => {
+  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, {}) })
+  ] }) });
+};
+const MenuAutocomplete = (props) => {
+  const { placement = "bottom start", ...rest } = props;
   const { classNames } = useStyles("Menu");
-  return /* @__PURE__ */ jsx(
-    Menu$1.CheckboxItem,
-    {
-      ref,
-      className: clsx(classNames.checkboxItem, className),
-      ...props
-    }
-  );
-});
-MenuCheckboxItem.displayName = Menu$1.CheckboxItem.displayName;
-const MenuCheckboxItemIndicator = forwardRef(({ className, ...props }, ref) => {
+  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, {}) })
+    ] })
+  ] }) });
+};
+const MenuAutocompleteListbox = (props) => {
+  const {
+    selectionMode = "single",
+    placement = "bottom start",
+    ...rest
+  } = props;
   const { classNames } = useStyles("Menu");
-  return /* @__PURE__ */ jsx(
-    Menu$1.CheckboxItemIndicator,
-    {
-      ref,
-      className: clsx(classNames.checkboxItemIndicator, className),
-      ...props
-    }
-  );
-});
-MenuCheckboxItemIndicator.displayName = Menu$1.CheckboxItemIndicator.displayName;
-const MenuSubmenuTrigger = forwardRef(({ className, children, ...props }, ref) => {
+  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, {}) })
+    ] })
+  ] }) });
+};
+const MenuItem = (props) => {
+  const { iconStart, color = "primary", children, href, ...rest } = props;
   const { classNames } = useStyles("Menu");
-  return /* @__PURE__ */ jsxs(
-    Menu$1.SubmenuTrigger,
+  const navigate = useNavigate();
+  const isLink = href !== void 0;
+  const isExternal = isExternalLink(href);
+  const content = /* @__PURE__ */ jsxs(
+    MenuItem$1,
     {
-      ref,
-      className: clsx(classNames.submenuTrigger, className),
-      ...props,
+      className: classNames.item,
+      "data-color": color,
+      href,
+      textValue: typeof children === "string" ? children : void 0,
+      ...rest,
       children: [
-        /* @__PURE__ */ jsx("div", { children }),
-        /* @__PURE__ */ jsx(
-          Icon,
-          {
-            "aria-label": "Submenu indicator icon",
-            name: "chevron-right",
-            size: 20
-          }
-        )
+        /* @__PURE__ */ jsxs("div", { className: classNames.itemContent, children: [
+          iconStart,
+          children
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: classNames.itemArrow, children: /* @__PURE__ */ jsx(RiArrowRightSLine, {}) })
       ]
     }
   );
-});
-MenuSubmenuTrigger.displayName = Menu$1.SubmenuTrigger.displayName;
-const MenuSeparator = forwardRef(({ className, ...props }, ref) => {
+  if (isLink && !isExternal) {
+    return /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: content });
+  }
+  return content;
+};
+const MenuListBoxItem = (props) => {
+  const { children, ...rest } = props;
   const { classNames } = useStyles("Menu");
   return /* @__PURE__ */ jsx(
-    Menu$1.Separator,
+    ListBoxItem,
     {
-      ref,
-      className: clsx(classNames.separator, className),
-      ...props
+      textValue: typeof props.children === "string" ? props.children : void 0,
+      className: classNames.itemListBox,
+      ...rest,
+      children: /* @__PURE__ */ jsxs("div", { className: classNames.itemContent, children: [
+        /* @__PURE__ */ jsx("div", { className: classNames.itemListBoxCheck, children: /* @__PURE__ */ jsx(RiCheckLine, {}) }),
+        children
+      ] })
     }
   );
-});
-MenuSeparator.displayName = Menu$1.Separator.displayName;
-const Menu = {
-  Root: Menu$1.Root,
-  Trigger: MenuTrigger,
-  Portal: Menu$1.Portal,
-  Backdrop: MenuBackdrop,
-  Positioner: MenuPositioner,
-  Popup: MenuPopup,
-  Arrow: MenuArrow,
-  Item: MenuItem,
-  Group: MenuGroup,
-  GroupLabel: MenuGroupLabel,
-  RadioGroup: MenuRadioGroup,
-  RadioItem: MenuRadioItem,
-  RadioItemIndicator: MenuRadioItemIndicator,
-  CheckboxItem: MenuCheckboxItem,
-  CheckboxItemIndicator: MenuCheckboxItemIndicator,
-  SubmenuTrigger: MenuSubmenuTrigger,
-  Separator: MenuSeparator,
-  Combobox
+};
+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 MenuSeparator = (props) => {
+  const { classNames } = useStyles("Menu");
+  return /* @__PURE__ */ jsx(Separator, { className: classNames.separator, ...props });
 };
 
-export { Menu };
+export { Menu, MenuAutocomplete, MenuAutocompleteListbox, MenuItem, MenuListBox, MenuListBoxItem, MenuSection, MenuSeparator, MenuTrigger, SubmenuTrigger };
 //# sourceMappingURL=Menu.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.esm.js","sources":["../../../src/components/Menu/Menu.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 { Menu as MenuPrimitive } from '@base-ui-components/react/menu';\nimport clsx from 'clsx';\nimport { MenuComponent } from './types';\nimport { Combobox } from './Combobox';\nimport { Icon } from '../Icon';\nimport { useStyles } from '../../hooks/useStyles';\n\nconst MenuTrigger = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.Trigger>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.Trigger\n      ref={ref}\n      className={clsx(classNames.trigger, className)}\n      {...props}\n    />\n  );\n});\nMenuTrigger.displayName = MenuPrimitive.Trigger.displayName;\n\nconst MenuBackdrop = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.Backdrop>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.Backdrop>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.Backdrop\n      ref={ref}\n      className={clsx(classNames.backdrop, className)}\n      {...props}\n    />\n  );\n});\nMenuBackdrop.displayName = MenuPrimitive.Backdrop.displayName;\n\nconst MenuPositioner = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.Positioner>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.Positioner>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.Positioner\n      ref={ref}\n      className={clsx(classNames.positioner, className)}\n      {...props}\n    />\n  );\n});\nMenuPositioner.displayName = MenuPrimitive.Positioner.displayName;\n\nconst MenuPopup = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.Popup>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.Popup>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.Popup\n      ref={ref}\n      className={clsx(classNames.popup, className)}\n      {...props}\n    />\n  );\n});\nMenuPopup.displayName = MenuPrimitive.Popup.displayName;\n\nconst MenuArrow = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.Arrow>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.Arrow>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.Arrow\n      ref={ref}\n      className={clsx(classNames.arrow, className)}\n      {...props}\n    />\n  );\n});\nMenuArrow.displayName = MenuPrimitive.Arrow.displayName;\n\nconst MenuItem = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.Item>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.Item\n      ref={ref}\n      className={clsx(classNames.item, className)}\n      {...props}\n    />\n  );\n});\nMenuItem.displayName = MenuPrimitive.Item.displayName;\n\nconst MenuGroup = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.Group>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.Group\n      ref={ref}\n      className={clsx(classNames.group, className)}\n      {...props}\n    />\n  );\n});\nMenuGroup.displayName = MenuPrimitive.Group.displayName;\n\nconst MenuGroupLabel = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.GroupLabel>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.GroupLabel>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.GroupLabel\n      ref={ref}\n      className={clsx(classNames.groupLabel, className)}\n      {...props}\n    />\n  );\n});\nMenuGroupLabel.displayName = MenuPrimitive.GroupLabel.displayName;\n\nconst MenuRadioGroup = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.RadioGroup>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.RadioGroup>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.RadioGroup\n      ref={ref}\n      className={clsx(classNames.radioGroup, className)}\n      {...props}\n    />\n  );\n});\nMenuRadioGroup.displayName = MenuPrimitive.RadioGroup.displayName;\n\nconst MenuRadioItem = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.RadioItem>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.RadioItem\n      ref={ref}\n      className={clsx(classNames.radioItem, className)}\n      {...props}\n    />\n  );\n});\nMenuRadioItem.displayName = MenuPrimitive.RadioItem.displayName;\n\nconst MenuRadioItemIndicator = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.RadioItemIndicator>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.RadioItemIndicator>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.RadioItemIndicator\n      ref={ref}\n      className={clsx(classNames.radioItemIndicator, className)}\n      {...props}\n    />\n  );\n});\nMenuRadioItemIndicator.displayName =\n  MenuPrimitive.RadioItemIndicator.displayName;\n\nconst MenuCheckboxItem = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.CheckboxItem>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.CheckboxItem\n      ref={ref}\n      className={clsx(classNames.checkboxItem, className)}\n      {...props}\n    />\n  );\n});\nMenuCheckboxItem.displayName = MenuPrimitive.CheckboxItem.displayName;\n\nconst MenuCheckboxItemIndicator = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.CheckboxItemIndicator>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.CheckboxItemIndicator>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.CheckboxItemIndicator\n      ref={ref}\n      className={clsx(classNames.checkboxItemIndicator, className)}\n      {...props}\n    />\n  );\n});\nMenuCheckboxItemIndicator.displayName =\n  MenuPrimitive.CheckboxItemIndicator.displayName;\n\nconst MenuSubmenuTrigger = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.SubmenuTrigger>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.SubmenuTrigger>\n>(({ className, children, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      ref={ref}\n      className={clsx(classNames.submenuTrigger, className)}\n      {...props}\n    >\n      <div>{children}</div>\n      <Icon\n        aria-label=\"Submenu indicator icon\"\n        name=\"chevron-right\"\n        size={20}\n      />\n    </MenuPrimitive.SubmenuTrigger>\n  );\n});\nMenuSubmenuTrigger.displayName = MenuPrimitive.SubmenuTrigger.displayName;\n\nconst MenuSeparator = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.Separator>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.Separator\n      ref={ref}\n      className={clsx(classNames.separator, className)}\n      {...props}\n    />\n  );\n});\nMenuSeparator.displayName = MenuPrimitive.Separator.displayName;\n\n/** @public */\nexport const Menu: MenuComponent = {\n  Root: MenuPrimitive.Root,\n  Trigger: MenuTrigger,\n  Portal: MenuPrimitive.Portal,\n  Backdrop: MenuBackdrop,\n  Positioner: MenuPositioner,\n  Popup: MenuPopup,\n  Arrow: MenuArrow,\n  Item: MenuItem,\n  Group: MenuGroup,\n  GroupLabel: MenuGroupLabel,\n  RadioGroup: MenuRadioGroup,\n  RadioItem: MenuRadioItem,\n  RadioItemIndicator: MenuRadioItemIndicator,\n  CheckboxItem: MenuCheckboxItem,\n  CheckboxItemIndicator: MenuCheckboxItemIndicator,\n  SubmenuTrigger: MenuSubmenuTrigger,\n  Separator: MenuSeparator,\n  Combobox,\n};\n"],"names":["MenuPrimitive"],"mappings":"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"}
+{"version":3,"file":"Menu.esm.js","sources":["../../../src/components/Menu/Menu.tsx"],"sourcesContent":["/*\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\nimport {\n  MenuTrigger as RAMenuTrigger,\n  Popover as RAPopover,\n  MenuItem as RAMenuItem,\n  Menu as RAMenu,\n  MenuSection as RAMenuSection,\n  Header as RAMenuHeader,\n  Separator as RAMenuSeparator,\n  SubmenuTrigger as RAMenuSubmenuTrigger,\n  Autocomplete as RAAutocomplete,\n  SearchField as RASearchField,\n  Input as RAInput,\n  Button as RAButton,\n  ListBox as RAListBox,\n  ListBoxItem as RAListBoxItem,\n  useFilter,\n  RouterProvider,\n} from 'react-aria-components';\nimport { ScrollArea } from '../ScrollArea';\nimport { useStyles } from '../../hooks/useStyles';\nimport type {\n  MenuTriggerProps,\n  SubmenuTriggerProps,\n  MenuProps,\n  MenuAutocompleteProps,\n  MenuItemProps,\n  MenuSectionProps,\n  MenuSeparatorProps,\n  MenuListBoxProps,\n  MenuListBoxItemProps,\n  MenuAutocompleteListBoxProps,\n} from './types';\nimport {\n  RiArrowRightSLine,\n  RiCheckLine,\n  RiCloseCircleLine,\n} from '@remixicon/react';\nimport { isExternalLink } from '../../utils/isExternalLink';\nimport { useNavigate, useHref } from 'react-router-dom';\n\nconst MenuEmptyState = () => {\n  const { classNames } = useStyles('Menu');\n\n  return <div className={classNames.emptyState}>No results found.</div>;\n};\n\n/** @public */\nexport const MenuTrigger = (props: MenuTriggerProps) => {\n  return <RAMenuTrigger {...props} />;\n};\n\n/** @public */\nexport const SubmenuTrigger = (props: SubmenuTriggerProps) => {\n  return <RAMenuSubmenuTrigger {...props} />;\n};\n\n/** @public */\nexport const Menu = (props: MenuProps<object>) => {\n  const { placement = 'bottom start', ...rest } = props;\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <RAPopover className={classNames.popover} placement={placement}>\n      <ScrollArea.Root>\n        <ScrollArea.Viewport>\n          <RAMenu className={classNames.content} {...rest}>\n            {props.children}\n          </RAMenu>\n        </ScrollArea.Viewport>\n        <ScrollArea.Scrollbar orientation=\"vertical\" style={{}}>\n          <ScrollArea.Thumb />\n        </ScrollArea.Scrollbar>\n      </ScrollArea.Root>\n    </RAPopover>\n  );\n};\n\n/** @public */\nexport const MenuListBox = (props: MenuListBoxProps<object>) => {\n  const {\n    selectionMode = 'single',\n    placement = 'bottom start',\n    ...rest\n  } = props;\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <RAPopover className={classNames.popover} placement={placement}>\n      <ScrollArea.Root>\n        <ScrollArea.Viewport>\n          <RAListBox\n            className={classNames.content}\n            selectionMode={selectionMode}\n            {...rest}\n          />\n        </ScrollArea.Viewport>\n        <ScrollArea.Scrollbar orientation=\"vertical\" style={{}}>\n          <ScrollArea.Thumb />\n        </ScrollArea.Scrollbar>\n      </ScrollArea.Root>\n    </RAPopover>\n  );\n};\n\n/** @public */\nexport const MenuAutocomplete = (props: MenuAutocompleteProps<object>) => {\n  const { placement = 'bottom start', ...rest } = props;\n  const { classNames } = useStyles('Menu');\n  const { contains } = useFilter({ sensitivity: 'base' });\n\n  return (\n    <RAPopover className={classNames.popover} placement={placement}>\n      <RAAutocomplete filter={contains}>\n        <RASearchField className={classNames.searchField}>\n          <RAInput\n            className={classNames.searchFieldInput}\n            aria-label=\"Search\"\n            placeholder={props.placeholder || 'Search...'}\n          />\n          <RAButton className={classNames.searchFieldClear}>\n            <RiCloseCircleLine />\n          </RAButton>\n        </RASearchField>\n        <ScrollArea.Root>\n          <ScrollArea.Viewport>\n            <RAMenu\n              className={classNames.content}\n              renderEmptyState={() => <MenuEmptyState />}\n              {...rest}\n            />\n          </ScrollArea.Viewport>\n          <ScrollArea.Scrollbar orientation=\"vertical\" style={{}}>\n            <ScrollArea.Thumb />\n          </ScrollArea.Scrollbar>\n        </ScrollArea.Root>\n      </RAAutocomplete>\n    </RAPopover>\n  );\n};\n\n/** @public */\nexport const MenuAutocompleteListbox = (\n  props: MenuAutocompleteListBoxProps<object>,\n) => {\n  const {\n    selectionMode = 'single',\n    placement = 'bottom start',\n    ...rest\n  } = props;\n  const { classNames } = useStyles('Menu');\n  const { contains } = useFilter({ sensitivity: 'base' });\n\n  return (\n    <RAPopover className={classNames.popover} placement={placement}>\n      <RAAutocomplete filter={contains}>\n        <RASearchField className={classNames.searchField}>\n          <RAInput\n            className={classNames.searchFieldInput}\n            aria-label=\"Search\"\n            placeholder={props.placeholder || 'Search...'}\n          />\n          <RAButton className={classNames.searchFieldClear}>\n            <RiCloseCircleLine />\n          </RAButton>\n        </RASearchField>\n        <ScrollArea.Root>\n          <ScrollArea.Viewport>\n            <RAListBox\n              className={classNames.content}\n              renderEmptyState={() => <MenuEmptyState />}\n              selectionMode={selectionMode}\n              {...rest}\n            />\n          </ScrollArea.Viewport>\n          <ScrollArea.Scrollbar orientation=\"vertical\" style={{}}>\n            <ScrollArea.Thumb />\n          </ScrollArea.Scrollbar>\n        </ScrollArea.Root>\n      </RAAutocomplete>\n    </RAPopover>\n  );\n};\n\n/** @public */\nexport const MenuItem = (props: MenuItemProps) => {\n  const { iconStart, color = 'primary', children, href, ...rest } = props;\n  const { classNames } = useStyles('Menu');\n  const navigate = useNavigate();\n\n  const isLink = href !== undefined;\n  const isExternal = isExternalLink(href);\n\n  const content = (\n    <RAMenuItem\n      className={classNames.item}\n      data-color={color}\n      href={href}\n      textValue={typeof children === 'string' ? children : undefined}\n      {...rest}\n    >\n      <div className={classNames.itemContent}>\n        {iconStart}\n        {children}\n      </div>\n      <div className={classNames.itemArrow}>\n        <RiArrowRightSLine />\n      </div>\n    </RAMenuItem>\n  );\n\n  if (isLink && !isExternal) {\n    return (\n      <RouterProvider navigate={navigate} useHref={useHref}>\n        {content}\n      </RouterProvider>\n    );\n  }\n\n  return content;\n};\n\n/** @public */\nexport const MenuListBoxItem = (props: MenuListBoxItemProps) => {\n  const { children, ...rest } = props;\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <RAListBoxItem\n      textValue={\n        typeof props.children === 'string' ? props.children : undefined\n      }\n      className={classNames.itemListBox}\n      {...rest}\n    >\n      <div className={classNames.itemContent}>\n        <div className={classNames.itemListBoxCheck}>\n          <RiCheckLine />\n        </div>\n        {children}\n      </div>\n    </RAListBoxItem>\n  );\n};\n\n/** @public */\nexport const MenuSection = (props: MenuSectionProps<object>) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <RAMenuSection className={classNames.section} {...props}>\n      <RAMenuHeader className={classNames.sectionHeader}>\n        {props.title}\n      </RAMenuHeader>\n      {props.children}\n    </RAMenuSection>\n  );\n};\n\n/** @public */\nexport const MenuSeparator = (props: MenuSeparatorProps) => {\n  const { classNames } = useStyles('Menu');\n\n  return <RAMenuSeparator className={classNames.separator} {...props} />;\n};\n"],"names":["RAMenuTrigger","RAMenuSubmenuTrigger","RAPopover","RAMenu","RAListBox","RAAutocomplete","RASearchField","RAInput","RAButton","RAMenuItem","RAListBoxItem","RAMenuSection","RAMenuHeader","RAMenuSeparator"],"mappings":"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"}

package/dist/components/TablePagination/TablePagination.esm.js

@@ -13,13 +13,12 @@ import '../FieldLabel/FieldLabel.esm.js';
 import 'react-aria-components';
 import 'react';
 import '@remixicon/react';
-import { ButtonIcon } from '../ButtonIcon/ButtonIcon.esm.js';
-import '../Menu/Menu.esm.js';
 import { Text } from '../Text/Text.esm.js';
 import 'react-router-dom';
 import '../Tabs/Tabs.esm.js';
 import '../Link/Link.esm.js';
 import { Icon } from '../Icon/Icon.esm.js';
+import { ButtonIcon } from '../ButtonIcon/ButtonIcon.esm.js';
 import '../ButtonLink/ButtonLink.esm.js';
 import '../Checkbox/Checkbox.esm.js';
 import '../RadioGroup/RadioGroup.esm.js';

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

@@ -1 +1 @@
-{"version":3,"file":"TablePagination.esm.js","sources":["../../../src/components/TablePagination/TablePagination.tsx"],"sourcesContent":["/*\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\nimport clsx from 'clsx';\nimport { Text, ButtonIcon, Select, Icon } from '../..';\nimport type { TablePaginationProps } from './types';\n\n/**\n * Pagination controls for Table components with page navigation and size selection.\n *\n * @public\n */\nexport function TablePagination(props: TablePaginationProps) {\n  const {\n    className,\n    offset,\n    pageSize,\n    rowCount,\n    onNextPage,\n    onPreviousPage,\n    onPageSizeChange,\n    setOffset,\n    setPageSize,\n    showPageSizeOptions = true,\n    ...rest\n  } = props;\n\n  const currentOffset = offset ?? 0;\n  const currentPageSize = pageSize ?? 10;\n\n  const fromCount = currentOffset + 1;\n  const toCount = Math.min(currentOffset + currentPageSize, rowCount ?? 0);\n\n  const nextPage = () => {\n    const totalRows = rowCount ?? 0;\n    const nextOffset = currentOffset + currentPageSize;\n\n    // Check if there are more items to navigate to\n    if (nextOffset < totalRows) {\n      onNextPage?.(); // Analytics tracking\n      setOffset?.(nextOffset); // Navigate to next page\n    }\n  };\n\n  const previousPage = () => {\n    // Check if we can go to previous page\n    if (currentOffset > 0) {\n      onPreviousPage?.(); // Analytics tracking\n      const prevOffset = Math.max(0, currentOffset - currentPageSize);\n      setOffset?.(prevOffset); // Navigate to previous page\n    }\n  };\n\n  return (\n    <div className={clsx('bui-DataTablePagination', className)} {...rest}>\n      <div className=\"bui-DataTablePagination--left\">\n        {showPageSizeOptions && (\n          <Select\n            name=\"pageSize\"\n            size=\"small\"\n            placeholder=\"Show 10 results\"\n            options={[\n              { label: 'Show 5 results', value: '5' },\n              { label: 'Show 10 results', value: '10' },\n              { label: 'Show 20 results', value: '20' },\n              { label: 'Show 30 results', value: '30' },\n              { label: 'Show 40 results', value: '40' },\n              { label: 'Show 50 results', value: '50' },\n            ]}\n            selectedKey={pageSize?.toString()}\n            onSelectionChange={value => {\n              const newPageSize = Number(value);\n              setPageSize?.(newPageSize);\n              onPageSizeChange?.(newPageSize);\n            }}\n            className=\"bui-DataTablePagination--select\"\n          />\n        )}\n      </div>\n      <div className=\"bui-DataTablePagination--right\">\n        <Text\n          as=\"p\"\n          variant=\"body-medium\"\n        >{`${fromCount} - ${toCount} of ${rowCount}`}</Text>\n        <ButtonIcon\n          variant=\"secondary\"\n          size=\"small\"\n          onClick={previousPage}\n          isDisabled={currentOffset === 0}\n          icon={<Icon name=\"chevron-left\" />}\n          aria-label=\"Previous\"\n        />\n        <ButtonIcon\n          variant=\"secondary\"\n          size=\"small\"\n          onClick={nextPage}\n          isDisabled={\n            rowCount !== undefined &&\n            currentOffset + currentPageSize >= rowCount\n          }\n          icon={<Icon name=\"chevron-right\" />}\n          aria-label=\"Next\"\n        />\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TablePagination.esm.js","sources":["../../../src/components/TablePagination/TablePagination.tsx"],"sourcesContent":["/*\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\nimport clsx from 'clsx';\nimport { Text, ButtonIcon, Select, Icon } from '../..';\nimport type { TablePaginationProps } from './types';\n\n/**\n * Pagination controls for Table components with page navigation and size selection.\n *\n * @public\n */\nexport function TablePagination(props: TablePaginationProps) {\n  const {\n    className,\n    offset,\n    pageSize,\n    rowCount,\n    onNextPage,\n    onPreviousPage,\n    onPageSizeChange,\n    setOffset,\n    setPageSize,\n    showPageSizeOptions = true,\n    ...rest\n  } = props;\n\n  const currentOffset = offset ?? 0;\n  const currentPageSize = pageSize ?? 10;\n\n  const fromCount = currentOffset + 1;\n  const toCount = Math.min(currentOffset + currentPageSize, rowCount ?? 0);\n\n  const nextPage = () => {\n    const totalRows = rowCount ?? 0;\n    const nextOffset = currentOffset + currentPageSize;\n\n    // Check if there are more items to navigate to\n    if (nextOffset < totalRows) {\n      onNextPage?.(); // Analytics tracking\n      setOffset?.(nextOffset); // Navigate to next page\n    }\n  };\n\n  const previousPage = () => {\n    // Check if we can go to previous page\n    if (currentOffset > 0) {\n      onPreviousPage?.(); // Analytics tracking\n      const prevOffset = Math.max(0, currentOffset - currentPageSize);\n      setOffset?.(prevOffset); // Navigate to previous page\n    }\n  };\n\n  return (\n    <div className={clsx('bui-DataTablePagination', className)} {...rest}>\n      <div className=\"bui-DataTablePagination--left\">\n        {showPageSizeOptions && (\n          <Select\n            name=\"pageSize\"\n            size=\"small\"\n            placeholder=\"Show 10 results\"\n            options={[\n              { label: 'Show 5 results', value: '5' },\n              { label: 'Show 10 results', value: '10' },\n              { label: 'Show 20 results', value: '20' },\n              { label: 'Show 30 results', value: '30' },\n              { label: 'Show 40 results', value: '40' },\n              { label: 'Show 50 results', value: '50' },\n            ]}\n            selectedKey={pageSize?.toString()}\n            onSelectionChange={value => {\n              const newPageSize = Number(value);\n              setPageSize?.(newPageSize);\n              onPageSizeChange?.(newPageSize);\n            }}\n            className=\"bui-DataTablePagination--select\"\n          />\n        )}\n      </div>\n      <div className=\"bui-DataTablePagination--right\">\n        <Text\n          as=\"p\"\n          variant=\"body-medium\"\n        >{`${fromCount} - ${toCount} of ${rowCount}`}</Text>\n        <ButtonIcon\n          variant=\"secondary\"\n          size=\"small\"\n          onClick={previousPage}\n          isDisabled={currentOffset === 0}\n          icon={<Icon name=\"chevron-left\" />}\n          aria-label=\"Previous\"\n        />\n        <ButtonIcon\n          variant=\"secondary\"\n          size=\"small\"\n          onClick={nextPage}\n          isDisabled={\n            rowCount !== undefined &&\n            currentOffset + currentPageSize >= rowCount\n          }\n          icon={<Icon name=\"chevron-right\" />}\n          aria-label=\"Next\"\n        />\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}