@backstage/ui 0.7.0-next.2 → 0.7.0

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":";;;;;;;;;;AAwBA,MAAM,WAAA,GAAc,WAGlB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,MAAM,CAAA;AAEvC,EACE,uBAAA,GAAA;AAAA,IAACA,MAAc,CAAA,OAAA;AAAA,IAAd;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,OAAA,EAAS,SAAS,CAAA;AAAA,MAC5C,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AACD,WAAY,CAAA,WAAA,GAAcA,OAAc,OAAQ,CAAA,WAAA;AAEhD,MAAM,YAAA,GAAe,WAGnB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,MAAM,CAAA;AAEvC,EACE,uBAAA,GAAA;AAAA,IAACA,MAAc,CAAA,QAAA;AAAA,IAAd;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,QAAA,EAAU,SAAS,CAAA;AAAA,MAC7C,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AACD,YAAa,CAAA,WAAA,GAAcA,OAAc,QAAS,CAAA,WAAA;AAElD,MAAM,cAAA,GAAiB,WAGrB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,MAAM,CAAA;AAEvC,EACE,uBAAA,GAAA;AAAA,IAACA,MAAc,CAAA,UAAA;AAAA,IAAd;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,UAAA,EAAY,SAAS,CAAA;AAAA,MAC/C,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AACD,cAAe,CAAA,WAAA,GAAcA,OAAc,UAAW,CAAA,WAAA;AAEtD,MAAM,SAAA,GAAY,WAGhB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,MAAM,CAAA;AAEvC,EACE,uBAAA,GAAA;AAAA,IAACA,MAAc,CAAA,KAAA;AAAA,IAAd;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,KAAA,EAAO,SAAS,CAAA;AAAA,MAC1C,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AACD,SAAU,CAAA,WAAA,GAAcA,OAAc,KAAM,CAAA,WAAA;AAE5C,MAAM,SAAA,GAAY,WAGhB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,MAAM,CAAA;AAEvC,EACE,uBAAA,GAAA;AAAA,IAACA,MAAc,CAAA,KAAA;AAAA,IAAd;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,KAAA,EAAO,SAAS,CAAA;AAAA,MAC1C,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AACD,SAAU,CAAA,WAAA,GAAcA,OAAc,KAAM,CAAA,WAAA;AAE5C,MAAM,QAAA,GAAW,WAGf,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,MAAM,CAAA;AAEvC,EACE,uBAAA,GAAA;AAAA,IAACA,MAAc,CAAA,IAAA;AAAA,IAAd;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,MACzC,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AACD,QAAS,CAAA,WAAA,GAAcA,OAAc,IAAK,CAAA,WAAA;AAE1C,MAAM,SAAA,GAAY,WAGhB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,MAAM,CAAA;AAEvC,EACE,uBAAA,GAAA;AAAA,IAACA,MAAc,CAAA,KAAA;AAAA,IAAd;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,KAAA,EAAO,SAAS,CAAA;AAAA,MAC1C,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AACD,SAAU,CAAA,WAAA,GAAcA,OAAc,KAAM,CAAA,WAAA;AAE5C,MAAM,cAAA,GAAiB,WAGrB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,MAAM,CAAA;AAEvC,EACE,uBAAA,GAAA;AAAA,IAACA,MAAc,CAAA,UAAA;AAAA,IAAd;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,UAAA,EAAY,SAAS,CAAA;AAAA,MAC/C,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AACD,cAAe,CAAA,WAAA,GAAcA,OAAc,UAAW,CAAA,WAAA;AAEtD,MAAM,cAAA,GAAiB,WAGrB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,MAAM,CAAA;AAEvC,EACE,uBAAA,GAAA;AAAA,IAACA,MAAc,CAAA,UAAA;AAAA,IAAd;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,UAAA,EAAY,SAAS,CAAA;AAAA,MAC/C,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AACD,cAAe,CAAA,WAAA,GAAcA,OAAc,UAAW,CAAA,WAAA;AAEtD,MAAM,aAAA,GAAgB,WAGpB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,MAAM,CAAA;AAEvC,EACE,uBAAA,GAAA;AAAA,IAACA,MAAc,CAAA,SAAA;AAAA,IAAd;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAC9C,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AACD,aAAc,CAAA,WAAA,GAAcA,OAAc,SAAU,CAAA,WAAA;AAEpD,MAAM,sBAAA,GAAyB,WAG7B,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,MAAM,CAAA;AAEvC,EACE,uBAAA,GAAA;AAAA,IAACA,MAAc,CAAA,kBAAA;AAAA,IAAd;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,kBAAA,EAAoB,SAAS,CAAA;AAAA,MACvD,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AACD,sBAAuB,CAAA,WAAA,GACrBA,OAAc,kBAAmB,CAAA,WAAA;AAEnC,MAAM,gBAAA,GAAmB,WAGvB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,MAAM,CAAA;AAEvC,EACE,uBAAA,GAAA;AAAA,IAACA,MAAc,CAAA,YAAA;AAAA,IAAd;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,YAAA,EAAc,SAAS,CAAA;AAAA,MACjD,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AACD,gBAAiB,CAAA,WAAA,GAAcA,OAAc,YAAa,CAAA,WAAA;AAE1D,MAAM,yBAAA,GAA4B,WAGhC,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,MAAM,CAAA;AAEvC,EACE,uBAAA,GAAA;AAAA,IAACA,MAAc,CAAA,qBAAA;AAAA,IAAd;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,qBAAA,EAAuB,SAAS,CAAA;AAAA,MAC1D,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AACD,yBAA0B,CAAA,WAAA,GACxBA,OAAc,qBAAsB,CAAA,WAAA;AAEtC,MAAM,kBAAA,GAAqB,WAGzB,CAAC,EAAE,WAAW,QAAU,EAAA,GAAG,KAAM,EAAA,EAAG,GAAQ,KAAA;AAC5C,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,MAAM,CAAA;AAEvC,EACE,uBAAA,IAAA;AAAA,IAACA,MAAc,CAAA,cAAA;AAAA,IAAd;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,cAAA,EAAgB,SAAS,CAAA;AAAA,MACnD,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAK,QAAS,EAAA,CAAA;AAAA,wBACf,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,YAAW,EAAA,wBAAA;AAAA,YACX,IAAK,EAAA,eAAA;AAAA,YACL,IAAM,EAAA;AAAA;AAAA;AACR;AAAA;AAAA,GACF;AAEJ,CAAC,CAAA;AACD,kBAAmB,CAAA,WAAA,GAAcA,OAAc,cAAe,CAAA,WAAA;AAE9D,MAAM,aAAA,GAAgB,WAGpB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,MAAM,CAAA;AAEvC,EACE,uBAAA,GAAA;AAAA,IAACA,MAAc,CAAA,SAAA;AAAA,IAAd;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAC9C,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AACD,aAAc,CAAA,WAAA,GAAcA,OAAc,SAAU,CAAA,WAAA;AAG7C,MAAM,IAAsB,GAAA;AAAA,EACjC,MAAMA,MAAc,CAAA,IAAA;AAAA,EACpB,OAAS,EAAA,WAAA;AAAA,EACT,QAAQA,MAAc,CAAA,MAAA;AAAA,EACtB,QAAU,EAAA,YAAA;AAAA,EACV,UAAY,EAAA,cAAA;AAAA,EACZ,KAAO,EAAA,SAAA;AAAA,EACP,KAAO,EAAA,SAAA;AAAA,EACP,IAAM,EAAA,QAAA;AAAA,EACN,KAAO,EAAA,SAAA;AAAA,EACP,UAAY,EAAA,cAAA;AAAA,EACZ,UAAY,EAAA,cAAA;AAAA,EACZ,SAAW,EAAA,aAAA;AAAA,EACX,kBAAoB,EAAA,sBAAA;AAAA,EACpB,YAAc,EAAA,gBAAA;AAAA,EACd,qBAAuB,EAAA,yBAAA;AAAA,EACvB,cAAgB,EAAA,kBAAA;AAAA,EAChB,SAAW,EAAA,aAAA;AAAA,EACX;AACF;;;;"}
+{"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/RadioGroup/RadioGroup.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.esm.js","sources":["../../../src/components/RadioGroup/RadioGroup.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, useEffect } from 'react';\nimport {\n  RadioGroup as AriaRadioGroup,\n  Radio as AriaRadio,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { useStyles } from '../../hooks/useStyles';\n\nimport type { RadioGroupProps, RadioProps } from './types';\n\n/** @public */\nexport const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n  (props, ref) => {\n    const {\n      className,\n      label,\n      secondaryLabel,\n      description,\n      isRequired,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      children,\n      ...rest\n    } = props;\n\n    const { classNames } = useStyles('RadioGroup');\n\n    useEffect(() => {\n      if (!label && !ariaLabel && !ariaLabelledBy) {\n        console.warn(\n          'RadioGroup requires either a visible label, aria-label, or aria-labelledby for accessibility',\n        );\n      }\n    }, [label, ariaLabel, ariaLabelledBy]);\n\n    // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n    const secondaryLabelText =\n      secondaryLabel || (isRequired ? 'Required' : null);\n\n    return (\n      <AriaRadioGroup\n        className={clsx(classNames.root, className)}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        {...rest}\n        ref={ref}\n      >\n        <FieldLabel\n          label={label}\n          secondaryLabel={secondaryLabelText}\n          description={description}\n        />\n        <div className={classNames.content}>{children}</div>\n        <FieldError />\n      </AriaRadioGroup>\n    );\n  },\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\n/** @public */\nexport const Radio = forwardRef<HTMLLabelElement, RadioProps>((props, ref) => {\n  const { className, ...rest } = props;\n\n  const { classNames } = useStyles('RadioGroup');\n\n  return (\n    <AriaRadio\n      className={clsx(classNames.radio, className)}\n      {...rest}\n      ref={ref}\n    />\n  );\n});\n\nRadioGroup.displayName = 'RadioGroup';\n"],"names":["AriaRadioGroup","AriaRadio"],"mappings":";;;;;;;;AA6BO,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,CAAC,OAAO,GAAQ,KAAA;AACd,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,KAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA,YAAc,EAAA,SAAA;AAAA,MACd,iBAAmB,EAAA,cAAA;AAAA,MACnB,QAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,YAAY,CAAA;AAE7C,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,KAAA,IAAS,CAAC,SAAA,IAAa,CAAC,cAAgB,EAAA;AAC3C,QAAQ,OAAA,CAAA,IAAA;AAAA,UACN;AAAA,SACF;AAAA;AACF,KACC,EAAA,CAAC,KAAO,EAAA,SAAA,EAAW,cAAc,CAAC,CAAA;AAGrC,IAAM,MAAA,kBAAA,GACJ,cAAmB,KAAA,UAAA,GAAa,UAAa,GAAA,IAAA,CAAA;AAE/C,IACE,uBAAA,IAAA;AAAA,MAACA,YAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,QAC1C,YAAY,EAAA,SAAA;AAAA,QACZ,iBAAiB,EAAA,cAAA;AAAA,QAChB,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,KAAA;AAAA,cACA,cAAgB,EAAA,kBAAA;AAAA,cAChB;AAAA;AAAA,WACF;AAAA,0BACC,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,UAAA,CAAW,SAAU,QAAS,EAAA,CAAA;AAAA,8BAC7C,UAAW,EAAA,EAAA;AAAA;AAAA;AAAA,KACd;AAAA;AAGN;AAEA,UAAA,CAAW,WAAc,GAAA,YAAA;AAGlB,MAAM,KAAQ,GAAA,UAAA,CAAyC,CAAC,KAAA,EAAO,GAAQ,KAAA;AAC5E,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAS,GAAA,KAAA;AAE/B,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,YAAY,CAAA;AAE7C,EACE,uBAAA,GAAA;AAAA,IAACC,OAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,KAAA,EAAO,SAAS,CAAA;AAAA,MAC1C,GAAG,IAAA;AAAA,MACJ;AAAA;AAAA,GACF;AAEJ,CAAC;AAED,UAAA,CAAW,WAAc,GAAA,YAAA;;;;"}
+{"version":3,"file":"RadioGroup.esm.js","sources":["../../../src/components/RadioGroup/RadioGroup.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, useEffect } from 'react';\nimport {\n  RadioGroup as AriaRadioGroup,\n  Radio as AriaRadio,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { useStyles } from '../../hooks/useStyles';\n\nimport type { RadioGroupProps, RadioProps } from './types';\n\n/** @public */\nexport const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n  (props, ref) => {\n    const {\n      className,\n      label,\n      secondaryLabel,\n      description,\n      isRequired,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      children,\n      ...rest\n    } = props;\n\n    const { classNames } = useStyles('RadioGroup');\n\n    useEffect(() => {\n      if (!label && !ariaLabel && !ariaLabelledBy) {\n        console.warn(\n          'RadioGroup requires either a visible label, aria-label, or aria-labelledby for accessibility',\n        );\n      }\n    }, [label, ariaLabel, ariaLabelledBy]);\n\n    // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n    const secondaryLabelText =\n      secondaryLabel || (isRequired ? 'Required' : null);\n\n    return (\n      <AriaRadioGroup\n        className={clsx(classNames.root, className)}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        {...rest}\n        ref={ref}\n      >\n        <FieldLabel\n          label={label}\n          secondaryLabel={secondaryLabelText}\n          description={description}\n        />\n        <div className={classNames.content}>{children}</div>\n        <FieldError />\n      </AriaRadioGroup>\n    );\n  },\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\n/** @public */\nexport const Radio = forwardRef<HTMLLabelElement, RadioProps>((props, ref) => {\n  const { className, ...rest } = props;\n\n  const { classNames } = useStyles('RadioGroup');\n\n  return (\n    <AriaRadio\n      className={clsx(classNames.radio, className)}\n      {...rest}\n      ref={ref}\n    />\n  );\n});\n\nRadioGroup.displayName = 'RadioGroup';\n"],"names":["AriaRadioGroup","AriaRadio"],"mappings":";;;;;;;;AA6BO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,KAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA,YAAA,EAAc,SAAA;AAAA,MACd,iBAAA,EAAmB,cAAA;AAAA,MACnB,QAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,YAAY,CAAA;AAE7C,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,KAAA,IAAS,CAAC,SAAA,IAAa,CAAC,cAAA,EAAgB;AAC3C,QAAA,OAAA,CAAQ,IAAA;AAAA,UACN;AAAA,SACF;AAAA,MACF;AAAA,IACF,CAAA,EAAG,CAAC,KAAA,EAAO,SAAA,EAAW,cAAc,CAAC,CAAA;AAGrC,IAAA,MAAM,kBAAA,GACJ,cAAA,KAAmB,UAAA,GAAa,UAAA,GAAa,IAAA,CAAA;AAE/C,IAAA,uBACE,IAAA;AAAA,MAACA,YAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,SAAS,CAAA;AAAA,QAC1C,YAAA,EAAY,SAAA;AAAA,QACZ,iBAAA,EAAiB,cAAA;AAAA,QAChB,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,KAAA;AAAA,cACA,cAAA,EAAgB,kBAAA;AAAA,cAChB;AAAA;AAAA,WACF;AAAA,0BACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,SAAU,QAAA,EAAS,CAAA;AAAA,8BAC7C,UAAA,EAAA,EAAW;AAAA;AAAA;AAAA,KACd;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;AAGlB,MAAM,KAAA,GAAQ,UAAA,CAAyC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC5E,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,KAAA;AAE/B,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,YAAY,CAAA;AAE7C,EAAA,uBACE,GAAA;AAAA,IAACC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,KAAA,EAAO,SAAS,CAAA;AAAA,MAC1C,GAAG,IAAA;AAAA,MACJ;AAAA;AAAA,GACF;AAEJ,CAAC;AAED,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.esm.js","sources":["../../../src/components/ScrollArea/ScrollArea.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 { ScrollArea as ScrollAreaPrimitive } from '@base-ui-components/react/scroll-area';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\n\nconst ScrollAreaRoot = forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('ScrollArea');\n\n  return (\n    <ScrollAreaPrimitive.Root\n      ref={ref}\n      className={clsx(classNames.root, className)}\n      {...props}\n    />\n  );\n});\nScrollAreaRoot.displayName = ScrollAreaPrimitive.Root.displayName;\n\nconst ScrollAreaViewport = forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Viewport>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Viewport>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('ScrollArea');\n\n  return (\n    <ScrollAreaPrimitive.Viewport\n      ref={ref}\n      className={clsx(classNames.viewport, className)}\n      {...props}\n    />\n  );\n});\nScrollAreaViewport.displayName = ScrollAreaPrimitive.Viewport.displayName;\n\nconst ScrollAreaScrollbar = forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Scrollbar>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Scrollbar>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('ScrollArea');\n\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      ref={ref}\n      className={clsx(classNames.scrollbar, className)}\n      {...props}\n    />\n  );\n});\nScrollAreaScrollbar.displayName = ScrollAreaPrimitive.Scrollbar.displayName;\n\nconst ScrollAreaThumb = forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Thumb>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Thumb>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('ScrollArea');\n\n  return (\n    <ScrollAreaPrimitive.Thumb\n      ref={ref}\n      className={clsx(classNames.thumb, className)}\n      {...props}\n    />\n  );\n});\nScrollAreaThumb.displayName = ScrollAreaPrimitive.Thumb.displayName;\n\n/** @public */\nexport const ScrollArea = {\n  Root: ScrollAreaRoot,\n  Viewport: ScrollAreaViewport,\n  Scrollbar: ScrollAreaScrollbar,\n  Thumb: ScrollAreaThumb,\n};\n"],"names":["ScrollAreaPrimitive"],"mappings":";;;;;;AAqBA,MAAM,cAAA,GAAiB,WAGrB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,YAAY,CAAA;AAE7C,EACE,uBAAA,GAAA;AAAA,IAACA,YAAoB,CAAA,IAAA;AAAA,IAApB;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,MACzC,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AACD,cAAe,CAAA,WAAA,GAAcA,aAAoB,IAAK,CAAA,WAAA;AAEtD,MAAM,kBAAA,GAAqB,WAGzB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,YAAY,CAAA;AAE7C,EACE,uBAAA,GAAA;AAAA,IAACA,YAAoB,CAAA,QAAA;AAAA,IAApB;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,QAAA,EAAU,SAAS,CAAA;AAAA,MAC7C,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AACD,kBAAmB,CAAA,WAAA,GAAcA,aAAoB,QAAS,CAAA,WAAA;AAE9D,MAAM,mBAAA,GAAsB,WAG1B,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,YAAY,CAAA;AAE7C,EACE,uBAAA,GAAA;AAAA,IAACA,YAAoB,CAAA,SAAA;AAAA,IAApB;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAC9C,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AACD,mBAAoB,CAAA,WAAA,GAAcA,aAAoB,SAAU,CAAA,WAAA;AAEhE,MAAM,eAAA,GAAkB,WAGtB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,YAAY,CAAA;AAE7C,EACE,uBAAA,GAAA;AAAA,IAACA,YAAoB,CAAA,KAAA;AAAA,IAApB;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,KAAA,EAAO,SAAS,CAAA;AAAA,MAC1C,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AACD,eAAgB,CAAA,WAAA,GAAcA,aAAoB,KAAM,CAAA,WAAA;AAGjD,MAAM,UAAa,GAAA;AAAA,EACxB,IAAM,EAAA,cAAA;AAAA,EACN,QAAU,EAAA,kBAAA;AAAA,EACV,SAAW,EAAA,mBAAA;AAAA,EACX,KAAO,EAAA;AACT;;;;"}
+{"version":3,"file":"ScrollArea.esm.js","sources":["../../../src/components/ScrollArea/ScrollArea.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 { ScrollArea as ScrollAreaPrimitive } from '@base-ui-components/react/scroll-area';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\n\nconst ScrollAreaRoot = forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('ScrollArea');\n\n  return (\n    <ScrollAreaPrimitive.Root\n      ref={ref}\n      className={clsx(classNames.root, className)}\n      {...props}\n    />\n  );\n});\nScrollAreaRoot.displayName = ScrollAreaPrimitive.Root.displayName;\n\nconst ScrollAreaViewport = forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Viewport>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Viewport>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('ScrollArea');\n\n  return (\n    <ScrollAreaPrimitive.Viewport\n      ref={ref}\n      className={clsx(classNames.viewport, className)}\n      {...props}\n    />\n  );\n});\nScrollAreaViewport.displayName = ScrollAreaPrimitive.Viewport.displayName;\n\nconst ScrollAreaScrollbar = forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Scrollbar>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Scrollbar>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('ScrollArea');\n\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      ref={ref}\n      className={clsx(classNames.scrollbar, className)}\n      {...props}\n    />\n  );\n});\nScrollAreaScrollbar.displayName = ScrollAreaPrimitive.Scrollbar.displayName;\n\nconst ScrollAreaThumb = forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Thumb>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Thumb>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('ScrollArea');\n\n  return (\n    <ScrollAreaPrimitive.Thumb\n      ref={ref}\n      className={clsx(classNames.thumb, className)}\n      {...props}\n    />\n  );\n});\nScrollAreaThumb.displayName = ScrollAreaPrimitive.Thumb.displayName;\n\n/** @public */\nexport const ScrollArea = {\n  Root: ScrollAreaRoot,\n  Viewport: ScrollAreaViewport,\n  Scrollbar: ScrollAreaScrollbar,\n  Thumb: ScrollAreaThumb,\n};\n"],"names":["ScrollAreaPrimitive"],"mappings":";;;;;;AAqBA,MAAM,cAAA,GAAiB,WAGrB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,KAAQ;AAClC,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,YAAY,CAAA;AAE7C,EAAA,uBACE,GAAA;AAAA,IAACA,YAAA,CAAoB,IAAA;AAAA,IAApB;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,SAAS,CAAA;AAAA,MACzC,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AACD,cAAA,CAAe,WAAA,GAAcA,aAAoB,IAAA,CAAK,WAAA;AAEtD,MAAM,kBAAA,GAAqB,WAGzB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,KAAQ;AAClC,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,YAAY,CAAA;AAE7C,EAAA,uBACE,GAAA;AAAA,IAACA,YAAA,CAAoB,QAAA;AAAA,IAApB;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,QAAA,EAAU,SAAS,CAAA;AAAA,MAC7C,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AACD,kBAAA,CAAmB,WAAA,GAAcA,aAAoB,QAAA,CAAS,WAAA;AAE9D,MAAM,mBAAA,GAAsB,WAG1B,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,KAAQ;AAClC,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,YAAY,CAAA;AAE7C,EAAA,uBACE,GAAA;AAAA,IAACA,YAAA,CAAoB,SAAA;AAAA,IAApB;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,SAAA,EAAW,SAAS,CAAA;AAAA,MAC9C,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AACD,mBAAA,CAAoB,WAAA,GAAcA,aAAoB,SAAA,CAAU,WAAA;AAEhE,MAAM,eAAA,GAAkB,WAGtB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,KAAQ;AAClC,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,YAAY,CAAA;AAE7C,EAAA,uBACE,GAAA;AAAA,IAACA,YAAA,CAAoB,KAAA;AAAA,IAApB;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,KAAA,EAAO,SAAS,CAAA;AAAA,MAC1C,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AACD,eAAA,CAAgB,WAAA,GAAcA,aAAoB,KAAA,CAAM,WAAA;AAGjD,MAAM,UAAA,GAAa;AAAA,EACxB,IAAA,EAAM,cAAA;AAAA,EACN,QAAA,EAAU,kBAAA;AAAA,EACV,SAAA,EAAW,mBAAA;AAAA,EACX,KAAA,EAAO;AACT;;;;"}

package/dist/components/SearchField/SearchField.esm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useEffect } from 'react';
+import { forwardRef, useState, useEffect } from 'react';
 import { SearchField as SearchField$1, Input, Button } from 'react-aria-components';
 import clsx from 'clsx';
 import { FieldLabel } from '../FieldLabel/FieldLabel.esm.js';
@@ -18,10 +18,13 @@ const SearchField = forwardRef(
       description,
       isRequired,
       placeholder = "Search",
+      startCollapsed = false,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledBy,
       ...rest
     } = props;
+    const [isCollapsed, setIsCollapsed] = useState(false);
+    const [shouldCollapse, setShouldCollapse] = useState(true);
     useEffect(() => {
       if (!label && !ariaLabel && !ariaLabelledBy) {
         console.warn(
@@ -35,10 +38,26 @@ const SearchField = forwardRef(
         size
       }
     );
-    const { classNames: searchFieldClassNames } = useStyles("SearchField", {
-      size
-    });
+    const { classNames: searchFieldClassNames } = useStyles("SearchField", {});
     const secondaryLabelText = secondaryLabel || (isRequired ? "Required" : null);
+    const handleClick = (isFocused) => {
+      props.onFocusChange?.(isFocused);
+      if (shouldCollapse) {
+        if (isFocused) {
+          setIsCollapsed(true);
+        } else {
+          setIsCollapsed(false);
+        }
+      }
+    };
+    const handleChange = (value) => {
+      props.onChange?.(value);
+      if (value.length > 0) {
+        setShouldCollapse(false);
+      } else {
+        setShouldCollapse(true);
+      }
+    };
     return /* @__PURE__ */ jsxs(
       SearchField$1,
       {
@@ -50,6 +69,10 @@ const SearchField = forwardRef(
         ...dataAttributes,
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,
+        "data-start-collapsed": startCollapsed,
+        "data-collapsed": isCollapsed,
+        onFocusChange: handleClick,
+        onChange: handleChange,
         ...rest,
         ref,
         children: [

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

@@ -1 +1 @@
-{"version":3,"file":"SearchField.esm.js","sources":["../../../src/components/SearchField/SearchField.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, useEffect } from 'react';\nimport {\n  Input,\n  SearchField as AriaSearchField,\n  Button,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';\nimport { useStyles } from '../../hooks/useStyles';\n\nimport type { SearchFieldProps } from './types';\n\n/** @public */\nexport const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(\n  (props, ref) => {\n    const {\n      className,\n      icon,\n      size = 'small',\n      label,\n      secondaryLabel,\n      description,\n      isRequired,\n      placeholder = 'Search',\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      ...rest\n    } = props;\n\n    useEffect(() => {\n      if (!label && !ariaLabel && !ariaLabelledBy) {\n        console.warn(\n          'SearchField requires either a visible label, aria-label, or aria-labelledby for accessibility',\n        );\n      }\n    }, [label, ariaLabel, ariaLabelledBy]);\n\n    const { classNames: textFieldClassNames, dataAttributes } = useStyles(\n      'TextField',\n      {\n        size,\n      },\n    );\n\n    const { classNames: searchFieldClassNames } = useStyles('SearchField', {\n      size,\n    });\n\n    // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n    const secondaryLabelText =\n      secondaryLabel || (isRequired ? 'Required' : null);\n\n    return (\n      <AriaSearchField\n        className={clsx(\n          textFieldClassNames.root,\n          searchFieldClassNames.root,\n          className,\n        )}\n        {...dataAttributes}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        {...rest}\n        ref={ref}\n      >\n        <FieldLabel\n          label={label}\n          secondaryLabel={secondaryLabelText}\n          description={description}\n        />\n        <div\n          className={textFieldClassNames.inputWrapper}\n          data-size={dataAttributes['data-size']}\n        >\n          {icon !== false && (\n            <div\n              className={textFieldClassNames.inputIcon}\n              data-size={dataAttributes['data-size']}\n              aria-hidden=\"true\"\n            >\n              {icon || <RiSearch2Line />}\n            </div>\n          )}\n          <Input\n            className={textFieldClassNames.input}\n            {...(icon !== false && { 'data-icon': true })}\n            placeholder={placeholder}\n          />\n          <Button\n            className={searchFieldClassNames.clear}\n            data-size={dataAttributes['data-size']}\n          >\n            <RiCloseCircleLine />\n          </Button>\n        </div>\n        <FieldError />\n      </AriaSearchField>\n    );\n  },\n);\n\nSearchField.displayName = 'searchField';\n"],"names":["AriaSearchField"],"mappings":";;;;;;;;;AA+BO,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,CAAC,OAAO,GAAQ,KAAA;AACd,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAO,GAAA,OAAA;AAAA,MACP,KAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAc,GAAA,QAAA;AAAA,MACd,YAAc,EAAA,SAAA;AAAA,MACd,iBAAmB,EAAA,cAAA;AAAA,MACnB,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,KAAA,IAAS,CAAC,SAAA,IAAa,CAAC,cAAgB,EAAA;AAC3C,QAAQ,OAAA,CAAA,IAAA;AAAA,UACN;AAAA,SACF;AAAA;AACF,KACC,EAAA,CAAC,KAAO,EAAA,SAAA,EAAW,cAAc,CAAC,CAAA;AAErC,IAAA,MAAM,EAAE,UAAA,EAAY,mBAAqB,EAAA,cAAA,EAAmB,GAAA,SAAA;AAAA,MAC1D,WAAA;AAAA,MACA;AAAA,QACE;AAAA;AACF,KACF;AAEA,IAAA,MAAM,EAAE,UAAA,EAAY,qBAAsB,EAAA,GAAI,UAAU,aAAe,EAAA;AAAA,MACrE;AAAA,KACD,CAAA;AAGD,IAAM,MAAA,kBAAA,GACJ,cAAmB,KAAA,UAAA,GAAa,UAAa,GAAA,IAAA,CAAA;AAE/C,IACE,uBAAA,IAAA;AAAA,MAACA,aAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,UACT,mBAAoB,CAAA,IAAA;AAAA,UACpB,qBAAsB,CAAA,IAAA;AAAA,UACtB;AAAA,SACF;AAAA,QACC,GAAG,cAAA;AAAA,QACJ,YAAY,EAAA,SAAA;AAAA,QACZ,iBAAiB,EAAA,cAAA;AAAA,QAChB,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,KAAA;AAAA,cACA,cAAgB,EAAA,kBAAA;AAAA,cAChB;AAAA;AAAA,WACF;AAAA,0BACA,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAW,mBAAoB,CAAA,YAAA;AAAA,cAC/B,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,cAEpC,QAAA,EAAA;AAAA,gBAAA,IAAA,KAAS,KACR,oBAAA,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,WAAW,mBAAoB,CAAA,SAAA;AAAA,oBAC/B,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,oBACrC,aAAY,EAAA,MAAA;AAAA,oBAEX,QAAA,EAAA,IAAA,wBAAS,aAAc,EAAA,EAAA;AAAA;AAAA,iBAC1B;AAAA,gCAEF,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,WAAW,mBAAoB,CAAA,KAAA;AAAA,oBAC9B,GAAI,IAAA,KAAS,KAAS,IAAA,EAAE,aAAa,IAAK,EAAA;AAAA,oBAC3C;AAAA;AAAA,iBACF;AAAA,gCACA,GAAA;AAAA,kBAAC,MAAA;AAAA,kBAAA;AAAA,oBACC,WAAW,qBAAsB,CAAA,KAAA;AAAA,oBACjC,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,oBAErC,8BAAC,iBAAkB,EAAA,EAAA;AAAA;AAAA;AACrB;AAAA;AAAA,WACF;AAAA,8BACC,UAAW,EAAA,EAAA;AAAA;AAAA;AAAA,KACd;AAAA;AAGN;AAEA,WAAA,CAAY,WAAc,GAAA,aAAA;;;;"}
+{"version":3,"file":"SearchField.esm.js","sources":["../../../src/components/SearchField/SearchField.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, useEffect, useState } from 'react';\nimport {\n  Input,\n  SearchField as AriaSearchField,\n  Button,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';\nimport { useStyles } from '../../hooks/useStyles';\n\nimport type { SearchFieldProps } from './types';\n\n/** @public */\nexport const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(\n  (props, ref) => {\n    const {\n      className,\n      icon,\n      size = 'small',\n      label,\n      secondaryLabel,\n      description,\n      isRequired,\n      placeholder = 'Search',\n      startCollapsed = false,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      ...rest\n    } = props;\n\n    const [isCollapsed, setIsCollapsed] = useState(false);\n    const [shouldCollapse, setShouldCollapse] = useState(true);\n\n    useEffect(() => {\n      if (!label && !ariaLabel && !ariaLabelledBy) {\n        console.warn(\n          'SearchField requires either a visible label, aria-label, or aria-labelledby for accessibility',\n        );\n      }\n    }, [label, ariaLabel, ariaLabelledBy]);\n\n    const { classNames: textFieldClassNames, dataAttributes } = useStyles(\n      'TextField',\n      {\n        size,\n      },\n    );\n\n    const { classNames: searchFieldClassNames } = useStyles('SearchField', {});\n\n    // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n    const secondaryLabelText =\n      secondaryLabel || (isRequired ? 'Required' : null);\n\n    const handleClick = (isFocused: boolean) => {\n      props.onFocusChange?.(isFocused);\n      if (shouldCollapse) {\n        if (isFocused) {\n          setIsCollapsed(true);\n        } else {\n          setIsCollapsed(false);\n        }\n      }\n    };\n\n    const handleChange = (value: string) => {\n      props.onChange?.(value);\n      if (value.length > 0) {\n        setShouldCollapse(false);\n      } else {\n        setShouldCollapse(true);\n      }\n    };\n\n    return (\n      <AriaSearchField\n        className={clsx(\n          textFieldClassNames.root,\n          searchFieldClassNames.root,\n          className,\n        )}\n        {...dataAttributes}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        data-start-collapsed={startCollapsed}\n        data-collapsed={isCollapsed}\n        onFocusChange={handleClick}\n        onChange={handleChange}\n        {...rest}\n        ref={ref}\n      >\n        <FieldLabel\n          label={label}\n          secondaryLabel={secondaryLabelText}\n          description={description}\n        />\n        <div\n          className={textFieldClassNames.inputWrapper}\n          data-size={dataAttributes['data-size']}\n        >\n          {icon !== false && (\n            <div\n              className={textFieldClassNames.inputIcon}\n              data-size={dataAttributes['data-size']}\n              aria-hidden=\"true\"\n            >\n              {icon || <RiSearch2Line />}\n            </div>\n          )}\n          <Input\n            className={textFieldClassNames.input}\n            {...(icon !== false && { 'data-icon': true })}\n            placeholder={placeholder}\n          />\n          <Button\n            className={searchFieldClassNames.clear}\n            data-size={dataAttributes['data-size']}\n          >\n            <RiCloseCircleLine />\n          </Button>\n        </div>\n        <FieldError />\n      </AriaSearchField>\n    );\n  },\n);\n\nSearchField.displayName = 'searchField';\n"],"names":["AriaSearchField"],"mappings":"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"}

package/dist/components/Select/Select.esm.js

@@ -2,7 +2,6 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useEffect } from 'react';
 import { Select as Select$1, Button, SelectValue, Popover, ListBox, ListBoxItem, Text } from 'react-aria-components';
 import clsx from 'clsx';
-import './Select.styles.css.esm.js';
 import { useStyles } from '../../hooks/useStyles.esm.js';
 import { FieldLabel } from '../FieldLabel/FieldLabel.esm.js';
 import '@remixicon/react';