@backstage/ui 0.12.0 → 0.13.0-next.1

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

@@ -1,17 +1,18 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { MenuTrigger as MenuTrigger$1, SubmenuTrigger as SubmenuTrigger$1, Menu as Menu$1, Popover, 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 { MenuDefinition } from './definition.esm.js';
+import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
+import { MenuDefinition, MenuListBoxDefinition, MenuAutocompleteDefinition, MenuAutocompleteListboxDefinition, MenuItemDefinition, MenuListBoxItemDefinition, MenuSectionDefinition, MenuSeparatorDefinition, MenuEmptyStateDefinition } from './definition.esm.js';
 import { RiCloseCircleLine, RiArrowRightSLine, RiCheckLine } from '@remixicon/react';
 import { createRoutingRegistration, isInternalLink } from '../InternalLinkProvider/InternalLinkProvider.esm.js';
-import styles from './Menu.module.css.esm.js';
-import clsx from 'clsx';
+import { Box } from '../Box/Box.esm.js';
+import '../Box/Box.module.css.esm.js';
+import { BgReset } from '../../hooks/useBg.esm.js';
 
 const { RoutingProvider, useRoutingRegistrationEffect } = createRoutingRegistration();
 const rowHeight = 32;
 const MenuEmptyState = () => {
-  const { classNames } = useStyles(MenuDefinition);
-  return /* @__PURE__ */ jsx("div", { className: clsx(classNames.emptyState, styles[classNames.emptyState]), children: "No results found." });
+  const { ownProps } = useDefinition(MenuEmptyStateDefinition, {});
+  return /* @__PURE__ */ jsx("div", { className: ownProps.classes.root, children: "No results found." });
 };
 const MenuTrigger = (props) => {
   return /* @__PURE__ */ jsx(MenuTrigger$1, { ...props });
@@ -20,429 +21,247 @@ const SubmenuTrigger = (props) => {
   return /* @__PURE__ */ jsx(SubmenuTrigger$1, { ...props });
 };
 const Menu = (props) => {
-  const { classNames, cleanedProps } = useStyles(MenuDefinition, props);
-  const {
-    className,
-    placement = "bottom start",
-    virtualized = false,
-    maxWidth,
-    maxHeight,
-    style,
-    ...rest
-  } = cleanedProps;
+  const { ownProps, restProps } = useDefinition(MenuDefinition, props);
+  const { classes, placement, virtualized, maxWidth, maxHeight, style } = ownProps;
   let newMaxWidth = maxWidth || (virtualized ? "260px" : "undefined");
   const menuContent = /* @__PURE__ */ jsx(
     Menu$1,
     {
-      className: clsx(classNames.content, styles[classNames.content]),
+      className: classes.content,
       renderEmptyState: () => /* @__PURE__ */ jsx(MenuEmptyState, {}),
       style: { width: newMaxWidth, maxHeight, ...style },
-      ...rest
+      ...restProps
     }
   );
-  return /* @__PURE__ */ jsx(RoutingProvider, { children: /* @__PURE__ */ jsx(
-    Popover,
+  return /* @__PURE__ */ jsx(RoutingProvider, { children: /* @__PURE__ */ jsx(Popover, { className: classes.root, placement, children: /* @__PURE__ */ jsx(BgReset, { children: /* @__PURE__ */ jsx(Box, { bg: "neutral", className: classes.inner, children: virtualized ? /* @__PURE__ */ jsx(
+    Virtualizer,
     {
-      className: clsx(
-        classNames.popover,
-        styles[classNames.popover],
-        className
-      ),
-      placement,
-      children: virtualized ? /* @__PURE__ */ jsx(
-        Virtualizer,
-        {
-          layout: ListLayout,
-          layoutOptions: {
-            rowHeight
-          },
-          children: menuContent
-        }
-      ) : menuContent
+      layout: ListLayout,
+      layoutOptions: {
+        rowHeight
+      },
+      children: menuContent
     }
-  ) });
+  ) : menuContent }) }) }) });
 };
 const MenuListBox = (props) => {
-  const { classNames, cleanedProps } = useStyles(MenuDefinition, props);
+  const { ownProps, restProps } = useDefinition(MenuListBoxDefinition, props);
   const {
-    className,
-    selectionMode = "single",
-    placement = "bottom start",
-    virtualized = false,
+    classes,
+    selectionMode,
+    placement,
+    virtualized,
     maxWidth,
     maxHeight,
-    style,
-    ...rest
-  } = cleanedProps;
+    style
+  } = ownProps;
   let newMaxWidth = maxWidth || (virtualized ? "260px" : "undefined");
   const listBoxContent = /* @__PURE__ */ jsx(
     ListBox,
     {
-      className: clsx(classNames.content, styles[classNames.content]),
+      className: classes.content,
       selectionMode,
       style: { width: newMaxWidth, maxHeight, ...style },
-      ...rest
+      ...restProps
     }
   );
-  return /* @__PURE__ */ jsx(
-    Popover,
+  return /* @__PURE__ */ jsx(Popover, { className: classes.root, placement, children: /* @__PURE__ */ jsx(BgReset, { children: /* @__PURE__ */ jsx(Box, { bg: "neutral", className: classes.inner, children: virtualized ? /* @__PURE__ */ jsx(
+    Virtualizer,
     {
-      className: clsx(
-        classNames.popover,
-        styles[classNames.popover],
-        className
-      ),
-      placement,
-      children: virtualized ? /* @__PURE__ */ jsx(
-        Virtualizer,
-        {
-          layout: ListLayout,
-          layoutOptions: {
-            rowHeight
-          },
-          children: listBoxContent
-        }
-      ) : listBoxContent
+      layout: ListLayout,
+      layoutOptions: {
+        rowHeight
+      },
+      children: listBoxContent
     }
-  );
+  ) : listBoxContent }) }) });
 };
 const MenuAutocomplete = (props) => {
-  const { classNames, cleanedProps } = useStyles(MenuDefinition, props);
+  const { ownProps, restProps } = useDefinition(
+    MenuAutocompleteDefinition,
+    props
+  );
   const {
-    className,
-    placement = "bottom start",
-    virtualized = false,
+    classes,
+    placement,
+    virtualized,
     maxWidth,
     maxHeight,
     style,
-    ...rest
-  } = cleanedProps;
+    placeholder
+  } = ownProps;
   const { contains } = useFilter({ sensitivity: "base" });
   let newMaxWidth = maxWidth || (virtualized ? "260px" : "undefined");
   const menuContent = /* @__PURE__ */ jsx(
     Menu$1,
     {
-      className: clsx(classNames.content, styles[classNames.content]),
+      className: classes.content,
       renderEmptyState: () => /* @__PURE__ */ jsx(MenuEmptyState, {}),
       style: { width: newMaxWidth, maxHeight, ...style },
-      ...rest
+      ...restProps
     }
   );
-  return /* @__PURE__ */ jsx(RoutingProvider, { children: /* @__PURE__ */ jsx(
-    Popover,
-    {
-      className: clsx(
-        classNames.popover,
-        styles[classNames.popover],
-        className
-      ),
-      placement,
-      children: /* @__PURE__ */ jsxs(Autocomplete, { filter: contains, children: [
-        /* @__PURE__ */ jsxs(
-          SearchField,
-          {
-            className: clsx(
-              classNames.searchField,
-              styles[classNames.searchField]
-            ),
-            "aria-label": props.placeholder || "Search",
-            children: [
-              /* @__PURE__ */ jsx(
-                Input,
-                {
-                  className: clsx(
-                    classNames.searchFieldInput,
-                    styles[classNames.searchFieldInput]
-                  ),
-                  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
-      ] })
-    }
-  ) });
+  return /* @__PURE__ */ jsx(RoutingProvider, { children: /* @__PURE__ */ jsx(Popover, { className: classes.root, placement, children: /* @__PURE__ */ jsx(BgReset, { children: /* @__PURE__ */ jsx(Box, { bg: "neutral", className: classes.inner, children: /* @__PURE__ */ jsxs(Autocomplete, { filter: contains, children: [
+    /* @__PURE__ */ jsxs(
+      SearchField,
+      {
+        className: classes.searchField,
+        "aria-label": placeholder || "Search",
+        children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              className: classes.searchFieldInput,
+              placeholder: placeholder || "Search..."
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { className: classes.searchFieldClear, children: /* @__PURE__ */ jsx(RiCloseCircleLine, {}) })
+        ]
+      }
+    ),
+    virtualized ? /* @__PURE__ */ jsx(
+      Virtualizer,
+      {
+        layout: ListLayout,
+        layoutOptions: {
+          rowHeight
+        },
+        children: menuContent
+      }
+    ) : menuContent
+  ] }) }) }) }) });
 };
 const MenuAutocompleteListbox = (props) => {
-  const { classNames, cleanedProps } = useStyles(MenuDefinition, props);
+  const { ownProps, restProps } = useDefinition(
+    MenuAutocompleteListboxDefinition,
+    props
+  );
   const {
-    className,
-    selectionMode = "single",
-    placement = "bottom start",
-    virtualized = false,
+    classes,
+    selectionMode,
+    placement,
+    virtualized,
     maxWidth,
     maxHeight,
     style,
-    ...rest
-  } = cleanedProps;
+    placeholder
+  } = ownProps;
   const { contains } = useFilter({ sensitivity: "base" });
   let newMaxWidth = maxWidth || (virtualized ? "260px" : "undefined");
   const listBoxContent = /* @__PURE__ */ jsx(
     ListBox,
     {
-      className: clsx(classNames.content, styles[classNames.content]),
+      className: classes.content,
       renderEmptyState: () => /* @__PURE__ */ jsx(MenuEmptyState, {}),
       selectionMode,
       style: { width: newMaxWidth, maxHeight, ...style },
-      ...rest
-    }
-  );
-  return /* @__PURE__ */ jsx(
-    Popover,
-    {
-      className: clsx(
-        classNames.popover,
-        styles[classNames.popover],
-        className
-      ),
-      placement,
-      children: /* @__PURE__ */ jsxs(Autocomplete, { filter: contains, children: [
-        /* @__PURE__ */ jsxs(
-          SearchField,
-          {
-            className: clsx(
-              classNames.searchField,
-              styles[classNames.searchField]
-            ),
-            "aria-label": props.placeholder || "Search",
-            children: [
-              /* @__PURE__ */ jsx(
-                Input,
-                {
-                  className: clsx(
-                    classNames.searchFieldInput,
-                    styles[classNames.searchFieldInput]
-                  ),
-                  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
-      ] })
+      ...restProps
     }
   );
+  return /* @__PURE__ */ jsx(Popover, { className: classes.root, placement, children: /* @__PURE__ */ jsx(BgReset, { children: /* @__PURE__ */ jsx(Box, { bg: "neutral", className: classes.inner, children: /* @__PURE__ */ jsxs(Autocomplete, { filter: contains, children: [
+    /* @__PURE__ */ jsxs(
+      SearchField,
+      {
+        className: classes.searchField,
+        "aria-label": placeholder || "Search",
+        children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              className: classes.searchFieldInput,
+              placeholder: placeholder || "Search..."
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { className: classes.searchFieldClear, children: /* @__PURE__ */ jsx(RiCloseCircleLine, {}) })
+        ]
+      }
+    ),
+    virtualized ? /* @__PURE__ */ jsx(
+      Virtualizer,
+      {
+        layout: ListLayout,
+        layoutOptions: {
+          rowHeight
+        },
+        children: listBoxContent
+      }
+    ) : listBoxContent
+  ] }) }) }) });
 };
 const MenuItem = (props) => {
-  const { classNames, cleanedProps } = useStyles(MenuDefinition, props);
-  const {
-    className,
-    iconStart,
-    color = "primary",
-    children,
-    href,
-    ...rest
-  } = cleanedProps;
+  const { ownProps, restProps, dataAttributes } = useDefinition(
+    MenuItemDefinition,
+    props
+  );
+  const { classes, iconStart, children, href } = ownProps;
   useRoutingRegistrationEffect(href);
   if (href && !isInternalLink(href)) {
     return /* @__PURE__ */ jsx(
       MenuItem$1,
       {
-        className: clsx(classNames.item, styles[classNames.item], className),
-        "data-color": color,
+        className: classes.root,
+        ...dataAttributes,
         textValue: typeof children === "string" ? children : void 0,
         onAction: () => window.open(href, "_blank", "noopener,noreferrer"),
-        ...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, {})
-                }
-              )
-            ]
-          }
-        )
+        ...restProps,
+        children: /* @__PURE__ */ jsxs("div", { className: classes.itemWrapper, children: [
+          /* @__PURE__ */ jsxs("div", { className: classes.itemContent, children: [
+            iconStart,
+            children
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: classes.itemArrow, children: /* @__PURE__ */ jsx(RiArrowRightSLine, {}) })
+        ] })
       }
     );
   }
   return /* @__PURE__ */ jsx(
     MenuItem$1,
     {
-      className: clsx(classNames.item, styles[classNames.item], className),
-      "data-color": color,
+      className: classes.root,
+      ...dataAttributes,
       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, {})
-              }
-            )
-          ]
-        }
-      )
+      ...restProps,
+      children: /* @__PURE__ */ jsxs("div", { className: classes.itemWrapper, children: [
+        /* @__PURE__ */ jsxs("div", { className: classes.itemContent, children: [
+          iconStart,
+          children
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: classes.itemArrow, children: /* @__PURE__ */ jsx(RiArrowRightSLine, {}) })
+      ] })
     }
   );
 };
 const MenuListBoxItem = (props) => {
-  const { classNames, cleanedProps } = useStyles(MenuDefinition, props);
-  const { children, className, ...rest } = cleanedProps;
+  const { ownProps, restProps } = useDefinition(
+    MenuListBoxItemDefinition,
+    props
+  );
+  const { classes, children } = ownProps;
   return /* @__PURE__ */ jsx(
     ListBoxItem,
     {
-      textValue: typeof props.children === "string" ? props.children : void 0,
-      className: clsx(
-        classNames.itemListBox,
-        styles[classNames.itemListBox],
-        className
-      ),
-      ...rest,
-      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
-              ]
-            }
-          )
-        }
-      )
+      textValue: typeof children === "string" ? children : void 0,
+      className: classes.root,
+      ...restProps,
+      children: /* @__PURE__ */ jsx("div", { className: classes.itemWrapper, children: /* @__PURE__ */ jsxs("div", { className: classes.itemContent, children: [
+        /* @__PURE__ */ jsx("div", { className: classes.check, children: /* @__PURE__ */ jsx(RiCheckLine, {}) }),
+        children
+      ] }) })
     }
   );
 };
 const MenuSection = (props) => {
-  const { classNames, cleanedProps } = useStyles(MenuDefinition, props);
-  const { children, className, title, ...rest } = cleanedProps;
-  return /* @__PURE__ */ jsxs(
-    MenuSection$1,
-    {
-      className: clsx(
-        classNames.section,
-        styles[classNames.section],
-        className
-      ),
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsx(
-          Header,
-          {
-            className: clsx(
-              classNames.sectionHeader,
-              styles[classNames.sectionHeader]
-            ),
-            children: title
-          }
-        ),
-        children
-      ]
-    }
-  );
+  const { ownProps, restProps } = useDefinition(MenuSectionDefinition, props);
+  const { classes, children, title } = ownProps;
+  return /* @__PURE__ */ jsxs(MenuSection$1, { className: classes.root, ...restProps, children: [
+    /* @__PURE__ */ jsx(Header, { className: classes.header, children: title }),
+    children
+  ] });
 };
 const MenuSeparator = (props) => {
-  const { classNames, cleanedProps } = useStyles(MenuDefinition, props);
-  const { className, ...rest } = cleanedProps;
-  return /* @__PURE__ */ jsx(
-    Separator,
-    {
-      className: clsx(
-        classNames.separator,
-        styles[classNames.separator],
-        className
-      ),
-      ...rest
-    }
-  );
+  const { ownProps, restProps } = useDefinition(MenuSeparatorDefinition, props);
+  return /* @__PURE__ */ jsx(Separator, { className: ownProps.classes.root, ...restProps });
 };
 
 export { Menu, MenuAutocomplete, MenuAutocompleteListbox, MenuItem, MenuListBox, MenuListBoxItem, MenuSection, MenuSeparator, MenuTrigger, SubmenuTrigger };