@backstage/ui 0.9.0-next.2 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +229 -0
- package/README.md +23 -0
- package/dist/components/Accordion/Accordion.esm.js +110 -0
- package/dist/components/Accordion/Accordion.esm.js.map +1 -0
- package/dist/components/Accordion/Accordion.module.css.esm.js +8 -0
- package/dist/components/Accordion/Accordion.module.css.esm.js.map +1 -0
- package/dist/components/Accordion/definition.esm.js +15 -0
- package/dist/components/Accordion/definition.esm.js.map +1 -0
- package/dist/components/Avatar/Avatar.esm.js +9 -5
- package/dist/components/Avatar/Avatar.esm.js.map +1 -1
- package/dist/components/Avatar/definition.esm.js +13 -0
- package/dist/components/Avatar/definition.esm.js.map +1 -0
- package/dist/components/Box/Box.esm.js +2 -1
- package/dist/components/Box/Box.esm.js.map +1 -1
- package/dist/components/Box/definition.esm.js +32 -0
- package/dist/components/Box/definition.esm.js.map +1 -0
- package/dist/components/Button/Button.esm.js +37 -14
- package/dist/components/Button/Button.esm.js.map +1 -1
- package/dist/components/Button/Button.module.css.esm.js +2 -2
- package/dist/components/Button/definition.esm.js +15 -0
- package/dist/components/Button/definition.esm.js.map +1 -0
- package/dist/components/ButtonIcon/ButtonIcon.esm.js +46 -10
- package/dist/components/ButtonIcon/ButtonIcon.esm.js.map +1 -1
- package/dist/components/ButtonIcon/definition.esm.js +10 -0
- package/dist/components/ButtonIcon/definition.esm.js.map +1 -0
- package/dist/components/ButtonLink/ButtonLink.esm.js +29 -36
- package/dist/components/ButtonLink/ButtonLink.esm.js.map +1 -1
- package/dist/components/ButtonLink/definition.esm.js +8 -0
- package/dist/components/ButtonLink/definition.esm.js.map +1 -0
- package/dist/components/Card/Card.esm.js +5 -4
- package/dist/components/Card/Card.esm.js.map +1 -1
- package/dist/components/Card/definition.esm.js +11 -0
- package/dist/components/Card/definition.esm.js.map +1 -0
- package/dist/components/Checkbox/Checkbox.esm.js +2 -1
- package/dist/components/Checkbox/Checkbox.esm.js.map +1 -1
- package/dist/components/Checkbox/definition.esm.js +12 -0
- package/dist/components/Checkbox/definition.esm.js.map +1 -0
- package/dist/components/Container/Container.esm.js +2 -1
- package/dist/components/Container/Container.esm.js.map +1 -1
- package/dist/components/Container/definition.esm.js +9 -0
- package/dist/components/Container/definition.esm.js.map +1 -0
- package/dist/components/Dialog/Dialog.esm.js +5 -4
- package/dist/components/Dialog/Dialog.esm.js.map +1 -1
- package/dist/components/Dialog/Dialog.module.css.esm.js +1 -1
- package/dist/components/Dialog/definition.esm.js +13 -0
- package/dist/components/Dialog/definition.esm.js.map +1 -0
- package/dist/components/FieldError/FieldError.esm.js +2 -1
- package/dist/components/FieldError/FieldError.esm.js.map +1 -1
- package/dist/components/FieldError/definition.esm.js +8 -0
- package/dist/components/FieldError/definition.esm.js.map +1 -0
- package/dist/components/FieldLabel/FieldLabel.esm.js +2 -1
- package/dist/components/FieldLabel/FieldLabel.esm.js.map +1 -1
- package/dist/components/FieldLabel/definition.esm.js +11 -0
- package/dist/components/FieldLabel/definition.esm.js.map +1 -0
- package/dist/components/Flex/Flex.esm.js +2 -1
- package/dist/components/Flex/Flex.esm.js.map +1 -1
- package/dist/components/Flex/definition.esm.js +28 -0
- package/dist/components/Flex/definition.esm.js.map +1 -0
- package/dist/components/Grid/Grid.esm.js +3 -2
- package/dist/components/Grid/Grid.esm.js.map +1 -1
- package/dist/components/Grid/definition.esm.js +32 -0
- package/dist/components/Grid/definition.esm.js.map +1 -0
- package/dist/components/Header/Header.esm.js +2 -1
- package/dist/components/Header/Header.esm.js.map +1 -1
- package/dist/components/Header/HeaderToolbar.esm.js +2 -1
- package/dist/components/Header/HeaderToolbar.esm.js.map +1 -1
- package/dist/components/Header/definition.esm.js +14 -0
- package/dist/components/Header/definition.esm.js.map +1 -0
- package/dist/components/HeaderPage/HeaderPage.esm.js +2 -1
- package/dist/components/HeaderPage/HeaderPage.esm.js.map +1 -1
- package/dist/components/HeaderPage/definition.esm.js +12 -0
- package/dist/components/HeaderPage/definition.esm.js.map +1 -0
- package/dist/components/Link/Link.esm.js +10 -6
- package/dist/components/Link/Link.esm.js.map +1 -1
- package/dist/components/Link/definition.esm.js +14 -0
- package/dist/components/Link/definition.esm.js.map +1 -0
- package/dist/components/Menu/Menu.esm.js +10 -9
- package/dist/components/Menu/Menu.esm.js.map +1 -1
- package/dist/components/Menu/Menu.module.css.esm.js +1 -1
- package/dist/components/Menu/definition.esm.js +23 -0
- package/dist/components/Menu/definition.esm.js.map +1 -0
- package/dist/components/Popover/Popover.module.css.esm.js +1 -1
- package/dist/components/Popover/definition.esm.js +8 -0
- package/dist/components/Popover/definition.esm.js.map +1 -0
- package/dist/components/RadioGroup/RadioGroup.esm.js +3 -2
- package/dist/components/RadioGroup/RadioGroup.esm.js.map +1 -1
- package/dist/components/RadioGroup/definition.esm.js +10 -0
- package/dist/components/RadioGroup/definition.esm.js.map +1 -0
- package/dist/components/SearchField/SearchField.esm.js +2 -1
- package/dist/components/SearchField/SearchField.esm.js.map +1 -1
- package/dist/components/SearchField/SearchField.module.css.esm.js +2 -2
- package/dist/components/SearchField/definition.esm.js +16 -0
- package/dist/components/SearchField/definition.esm.js.map +1 -0
- package/dist/components/Select/Select.esm.js +28 -59
- package/dist/components/Select/Select.esm.js.map +1 -1
- package/dist/components/Select/Select.module.css.esm.js +2 -2
- package/dist/components/Select/SelectContent.esm.js +56 -0
- package/dist/components/Select/SelectContent.esm.js.map +1 -0
- package/dist/components/Select/SelectListBox.esm.js +55 -0
- package/dist/components/Select/SelectListBox.esm.js.map +1 -0
- package/dist/components/Select/SelectTrigger.esm.js +24 -0
- package/dist/components/Select/SelectTrigger.esm.js.map +1 -0
- package/dist/components/Select/definition.esm.js +23 -0
- package/dist/components/Select/definition.esm.js.map +1 -0
- package/dist/components/Skeleton/Skeleton.esm.js +2 -1
- package/dist/components/Skeleton/Skeleton.esm.js.map +1 -1
- package/dist/components/Skeleton/definition.esm.js +8 -0
- package/dist/components/Skeleton/definition.esm.js.map +1 -0
- package/dist/components/Switch/Switch.esm.js +2 -1
- package/dist/components/Switch/Switch.esm.js.map +1 -1
- package/dist/components/Switch/definition.esm.js +9 -0
- package/dist/components/Switch/definition.esm.js.map +1 -0
- package/dist/components/Table/components/Cell.esm.js +2 -1
- package/dist/components/Table/components/Cell.esm.js.map +1 -1
- package/dist/components/Table/components/CellProfile.esm.js +5 -7
- package/dist/components/Table/components/CellProfile.esm.js.map +1 -1
- package/dist/components/Table/components/Column.esm.js +2 -4
- package/dist/components/Table/components/Column.esm.js.map +1 -1
- package/dist/components/Table/components/Row.esm.js +4 -4
- package/dist/components/Table/components/Row.esm.js.map +1 -1
- package/dist/components/Table/components/Table.esm.js +2 -4
- package/dist/components/Table/components/Table.esm.js.map +1 -1
- package/dist/components/Table/components/TableBody.esm.js +2 -4
- package/dist/components/Table/components/TableBody.esm.js.map +1 -1
- package/dist/components/Table/components/TableHeader.esm.js +2 -4
- package/dist/components/Table/components/TableHeader.esm.js.map +1 -1
- package/dist/components/Table/definition.esm.js +24 -0
- package/dist/components/Table/definition.esm.js.map +1 -0
- package/dist/components/TablePagination/TablePagination.esm.js +2 -1
- package/dist/components/TablePagination/TablePagination.esm.js.map +1 -1
- package/dist/components/TablePagination/definition.esm.js +11 -0
- package/dist/components/TablePagination/definition.esm.js.map +1 -0
- package/dist/components/Tabs/Tabs.esm.js +5 -4
- package/dist/components/Tabs/Tabs.esm.js.map +1 -1
- package/dist/components/Tabs/TabsIndicators.esm.js +2 -1
- package/dist/components/Tabs/TabsIndicators.esm.js.map +1 -1
- package/dist/components/Tabs/definition.esm.js +14 -0
- package/dist/components/Tabs/definition.esm.js.map +1 -0
- package/dist/components/TagGroup/TagGroup.esm.js +3 -2
- package/dist/components/TagGroup/TagGroup.esm.js.map +1 -1
- package/dist/components/TagGroup/definition.esm.js +12 -0
- package/dist/components/TagGroup/definition.esm.js.map +1 -0
- package/dist/components/Text/Text.esm.js +10 -6
- package/dist/components/Text/Text.esm.js.map +1 -1
- package/dist/components/Text/definition.esm.js +14 -0
- package/dist/components/Text/definition.esm.js.map +1 -0
- package/dist/components/TextField/TextField.esm.js +2 -1
- package/dist/components/TextField/TextField.esm.js.map +1 -1
- package/dist/components/TextField/definition.esm.js +17 -0
- package/dist/components/TextField/definition.esm.js.map +1 -0
- package/dist/components/Tooltip/Tooltip.esm.js +2 -1
- package/dist/components/Tooltip/Tooltip.esm.js.map +1 -1
- package/dist/components/Tooltip/definition.esm.js +9 -0
- package/dist/components/Tooltip/definition.esm.js.map +1 -0
- package/dist/components/VisuallyHidden/VisuallyHidden.esm.js +5 -1
- package/dist/components/VisuallyHidden/VisuallyHidden.esm.js.map +1 -1
- package/dist/components/VisuallyHidden/definition.esm.js +8 -0
- package/dist/components/VisuallyHidden/definition.esm.js.map +1 -0
- package/dist/hooks/useStyles.esm.js +1 -3
- package/dist/hooks/useStyles.esm.js.map +1 -1
- package/dist/index.d.ts +524 -363
- package/dist/index.esm.js +31 -2
- package/dist/index.esm.js.map +1 -1
- package/package.json +2 -3
- package/dist/components/Collapsible/Collapsible.esm.js +0 -55
- package/dist/components/Collapsible/Collapsible.esm.js.map +0 -1
- package/dist/components/Collapsible/Collapsible.module.css.esm.js +0 -8
- package/dist/components/Collapsible/Collapsible.module.css.esm.js.map +0 -1
- package/dist/utils/componentDefinitions.esm.js +0 -388
- package/dist/utils/componentDefinitions.esm.js.map +0 -1
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { MenuTrigger as MenuTrigger$1, SubmenuTrigger as SubmenuTrigger$1, OverlayTriggerStateContext, Menu as Menu$1, Popover, RouterProvider, Virtualizer, ListLayout, ListBox, useFilter, Autocomplete, SearchField, Input, Button, MenuItem as MenuItem$1, ListBoxItem, MenuSection as MenuSection$1, Header, Separator } from 'react-aria-components';
|
|
3
3
|
import { useStyles } from '../../hooks/useStyles.esm.js';
|
|
4
|
+
import { MenuDefinition } from './definition.esm.js';
|
|
4
5
|
import { RiCloseCircleLine, RiArrowRightSLine, RiCheckLine } from '@remixicon/react';
|
|
5
6
|
import { useNavigate, useHref } from 'react-router-dom';
|
|
6
7
|
import { isExternalLink } from '../../utils/isExternalLink.esm.js';
|
|
@@ -10,7 +11,7 @@ import clsx from 'clsx';
|
|
|
10
11
|
|
|
11
12
|
const rowHeight = 32;
|
|
12
13
|
const MenuEmptyState = () => {
|
|
13
|
-
const { classNames } = useStyles(
|
|
14
|
+
const { classNames } = useStyles(MenuDefinition);
|
|
14
15
|
return /* @__PURE__ */ jsx("div", { className: clsx(classNames.emptyState, styles[classNames.emptyState]), children: "No results found." });
|
|
15
16
|
};
|
|
16
17
|
const MenuTrigger = (props) => {
|
|
@@ -20,7 +21,7 @@ const SubmenuTrigger = (props) => {
|
|
|
20
21
|
return /* @__PURE__ */ jsx(SubmenuTrigger$1, { ...props });
|
|
21
22
|
};
|
|
22
23
|
const Menu = (props) => {
|
|
23
|
-
const { classNames, cleanedProps } = useStyles(
|
|
24
|
+
const { classNames, cleanedProps } = useStyles(MenuDefinition, props);
|
|
24
25
|
const {
|
|
25
26
|
className,
|
|
26
27
|
placement = "bottom start",
|
|
@@ -86,7 +87,7 @@ const Menu = (props) => {
|
|
|
86
87
|
);
|
|
87
88
|
};
|
|
88
89
|
const MenuListBox = (props) => {
|
|
89
|
-
const { classNames, cleanedProps } = useStyles(
|
|
90
|
+
const { classNames, cleanedProps } = useStyles(MenuDefinition, props);
|
|
90
91
|
const {
|
|
91
92
|
className,
|
|
92
93
|
selectionMode = "single",
|
|
@@ -130,7 +131,7 @@ const MenuListBox = (props) => {
|
|
|
130
131
|
);
|
|
131
132
|
};
|
|
132
133
|
const MenuAutocomplete = (props) => {
|
|
133
|
-
const { classNames, cleanedProps } = useStyles(
|
|
134
|
+
const { classNames, cleanedProps } = useStyles(MenuDefinition, props);
|
|
134
135
|
const {
|
|
135
136
|
className,
|
|
136
137
|
placement = "bottom start",
|
|
@@ -209,7 +210,7 @@ const MenuAutocomplete = (props) => {
|
|
|
209
210
|
);
|
|
210
211
|
};
|
|
211
212
|
const MenuAutocompleteListbox = (props) => {
|
|
212
|
-
const { classNames, cleanedProps } = useStyles(
|
|
213
|
+
const { classNames, cleanedProps } = useStyles(MenuDefinition, props);
|
|
213
214
|
const {
|
|
214
215
|
className,
|
|
215
216
|
selectionMode = "single",
|
|
@@ -289,7 +290,7 @@ const MenuAutocompleteListbox = (props) => {
|
|
|
289
290
|
);
|
|
290
291
|
};
|
|
291
292
|
const MenuItem = (props) => {
|
|
292
|
-
const { classNames, cleanedProps } = useStyles(
|
|
293
|
+
const { classNames, cleanedProps } = useStyles(MenuDefinition, props);
|
|
293
294
|
const {
|
|
294
295
|
className,
|
|
295
296
|
iconStart,
|
|
@@ -383,7 +384,7 @@ const MenuItem = (props) => {
|
|
|
383
384
|
);
|
|
384
385
|
};
|
|
385
386
|
const MenuListBoxItem = (props) => {
|
|
386
|
-
const { classNames, cleanedProps } = useStyles(
|
|
387
|
+
const { classNames, cleanedProps } = useStyles(MenuDefinition, props);
|
|
387
388
|
const { children, className, ...rest } = cleanedProps;
|
|
388
389
|
return /* @__PURE__ */ jsx(
|
|
389
390
|
ListBoxItem,
|
|
@@ -427,7 +428,7 @@ const MenuListBoxItem = (props) => {
|
|
|
427
428
|
);
|
|
428
429
|
};
|
|
429
430
|
const MenuSection = (props) => {
|
|
430
|
-
const { classNames, cleanedProps } = useStyles(
|
|
431
|
+
const { classNames, cleanedProps } = useStyles(MenuDefinition, props);
|
|
431
432
|
const { children, className, title, ...rest } = cleanedProps;
|
|
432
433
|
return /* @__PURE__ */ jsxs(
|
|
433
434
|
MenuSection$1,
|
|
@@ -455,7 +456,7 @@ const MenuSection = (props) => {
|
|
|
455
456
|
);
|
|
456
457
|
};
|
|
457
458
|
const MenuSeparator = (props) => {
|
|
458
|
-
const { classNames, cleanedProps } = useStyles(
|
|
459
|
+
const { classNames, cleanedProps } = useStyles(MenuDefinition, props);
|
|
459
460
|
const { className, ...rest } = cleanedProps;
|
|
460
461
|
return /* @__PURE__ */ jsx(
|
|
461
462
|
Separator,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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 Virtualizer,\n ListLayout,\n OverlayTriggerStateContext,\n} from 'react-aria-components';\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 { useNavigate, useHref } from 'react-router-dom';\nimport { isExternalLink } from '../../utils/isExternalLink';\nimport { useRef, useEffect, useContext } from 'react';\nimport styles from './Menu.module.css';\nimport clsx from 'clsx';\n\n// The height will be used for virtualized menus. It should match the size set in CSS for each menu item.\nconst rowHeight = 32;\n\nconst MenuEmptyState = () => {\n const { classNames } = useStyles('Menu');\n\n return (\n <div className={clsx(classNames.emptyState, styles[classNames.emptyState])}>\n No results found.\n </div>\n );\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 { classNames, cleanedProps } = useStyles('Menu', props);\n const {\n className,\n placement = 'bottom start',\n virtualized = false,\n maxWidth,\n maxHeight,\n style,\n ...rest\n } = cleanedProps;\n\n const navigate = useNavigate();\n let newMaxWidth = maxWidth || (virtualized ? '260px' : 'undefined');\n const popoverRef = useRef<HTMLDivElement>(null);\n const state = useContext(OverlayTriggerStateContext);\n\n // Custom click-outside handler for non-modal popovers\n useEffect(() => {\n if (!state?.isOpen) return;\n\n const handleClickOutside = (event: MouseEvent) => {\n const target = event.target as Node;\n\n // Check if click is outside the popover\n if (popoverRef.current && !popoverRef.current.contains(target)) {\n // Check if click is on a trigger button or submenu\n const isOnTrigger = (target as Element).closest('[data-trigger]');\n const isOnSubmenu = (target as Element).closest('[role=\"menu\"]');\n\n if (!isOnTrigger && !isOnSubmenu) {\n state.close();\n }\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [state]);\n\n const menuContent = (\n <RAMenu\n className={clsx(classNames.content, styles[classNames.content])}\n renderEmptyState={() => <MenuEmptyState />}\n style={{ width: newMaxWidth, maxHeight, ...style }}\n {...rest}\n />\n );\n\n return (\n <RAPopover\n ref={popoverRef}\n className={clsx(\n classNames.popover,\n styles[classNames.popover],\n className,\n )}\n placement={placement}\n isNonModal={true}\n isKeyboardDismissDisabled={false}\n >\n <RouterProvider navigate={navigate} useHref={useHref}>\n {virtualized ? (\n <Virtualizer\n layout={ListLayout}\n layoutOptions={{\n rowHeight,\n }}\n >\n {menuContent}\n </Virtualizer>\n ) : (\n menuContent\n )}\n </RouterProvider>\n </RAPopover>\n );\n};\n\n/** @public */\nexport const MenuListBox = (props: MenuListBoxProps<object>) => {\n const { classNames, cleanedProps } = useStyles('Menu', props);\n const {\n className,\n selectionMode = 'single',\n placement = 'bottom start',\n virtualized = false,\n maxWidth,\n maxHeight,\n style,\n ...rest\n } = cleanedProps;\n let newMaxWidth = maxWidth || (virtualized ? '260px' : 'undefined');\n\n const listBoxContent = (\n <RAListBox\n className={clsx(classNames.content, styles[classNames.content])}\n selectionMode={selectionMode}\n style={{ width: newMaxWidth, maxHeight, ...style }}\n {...rest}\n />\n );\n\n return (\n <RAPopover\n className={clsx(\n classNames.popover,\n styles[classNames.popover],\n className,\n )}\n placement={placement}\n >\n {virtualized ? (\n <Virtualizer\n layout={ListLayout}\n layoutOptions={{\n rowHeight,\n }}\n >\n {listBoxContent}\n </Virtualizer>\n ) : (\n listBoxContent\n )}\n </RAPopover>\n );\n};\n\n/** @public */\nexport const MenuAutocomplete = (props: MenuAutocompleteProps<object>) => {\n const { classNames, cleanedProps } = useStyles('Menu', props);\n const {\n className,\n placement = 'bottom start',\n virtualized = false,\n maxWidth,\n maxHeight,\n style,\n ...rest\n } = cleanedProps;\n const { contains } = useFilter({ sensitivity: 'base' });\n let newMaxWidth = maxWidth || (virtualized ? '260px' : 'undefined');\n const navigate = useNavigate();\n\n const menuContent = (\n <RAMenu\n className={clsx(classNames.content, styles[classNames.content])}\n renderEmptyState={() => <MenuEmptyState />}\n style={{ width: newMaxWidth, maxHeight, ...style }}\n {...rest}\n />\n );\n\n return (\n <RAPopover\n className={clsx(\n classNames.popover,\n styles[classNames.popover],\n className,\n )}\n placement={placement}\n >\n <RouterProvider navigate={navigate} useHref={useHref}>\n <RAAutocomplete filter={contains}>\n <RASearchField\n className={clsx(\n classNames.searchField,\n styles[classNames.searchField],\n )}\n >\n <RAInput\n className={clsx(\n classNames.searchFieldInput,\n styles[classNames.searchFieldInput],\n )}\n aria-label=\"Search\"\n placeholder={props.placeholder || 'Search...'}\n />\n <RAButton\n className={clsx(\n classNames.searchFieldClear,\n styles[classNames.searchFieldClear],\n )}\n >\n <RiCloseCircleLine />\n </RAButton>\n </RASearchField>\n {virtualized ? (\n <Virtualizer\n layout={ListLayout}\n layoutOptions={{\n rowHeight,\n }}\n >\n {menuContent}\n </Virtualizer>\n ) : (\n menuContent\n )}\n </RAAutocomplete>\n </RouterProvider>\n </RAPopover>\n );\n};\n\n/** @public */\nexport const MenuAutocompleteListbox = (\n props: MenuAutocompleteListBoxProps<object>,\n) => {\n const { classNames, cleanedProps } = useStyles('Menu', props);\n const {\n className,\n selectionMode = 'single',\n placement = 'bottom start',\n virtualized = false,\n maxWidth,\n maxHeight,\n style,\n ...rest\n } = cleanedProps;\n const { contains } = useFilter({ sensitivity: 'base' });\n let newMaxWidth = maxWidth || (virtualized ? '260px' : 'undefined');\n\n const listBoxContent = (\n <RAListBox\n className={clsx(classNames.content, styles[classNames.content])}\n renderEmptyState={() => <MenuEmptyState />}\n selectionMode={selectionMode}\n style={{ width: newMaxWidth, maxHeight, ...style }}\n {...rest}\n />\n );\n\n return (\n <RAPopover\n className={clsx(\n classNames.popover,\n styles[classNames.popover],\n className,\n )}\n placement={placement}\n >\n <RAAutocomplete filter={contains}>\n <RASearchField\n className={clsx(\n classNames.searchField,\n styles[classNames.searchField],\n )}\n >\n <RAInput\n className={clsx(\n classNames.searchFieldInput,\n styles[classNames.searchFieldInput],\n )}\n aria-label=\"Search\"\n placeholder={props.placeholder || 'Search...'}\n />\n <RAButton\n className={clsx(\n classNames.searchFieldClear,\n styles[classNames.searchFieldClear],\n )}\n >\n <RiCloseCircleLine />\n </RAButton>\n </RASearchField>\n {virtualized ? (\n <Virtualizer\n layout={ListLayout}\n layoutOptions={{\n rowHeight,\n }}\n >\n {listBoxContent}\n </Virtualizer>\n ) : (\n listBoxContent\n )}\n </RAAutocomplete>\n </RAPopover>\n );\n};\n\n/** @public */\nexport const MenuItem = (props: MenuItemProps) => {\n const { classNames, cleanedProps } = useStyles('Menu', props);\n const {\n className,\n iconStart,\n color = 'primary',\n children,\n href,\n ...rest\n } = cleanedProps;\n\n const isLink = href !== undefined;\n const isExternal = isExternalLink(href);\n\n if (isLink && isExternal) {\n return (\n <RAMenuItem\n className={clsx(classNames.item, styles[classNames.item], className)}\n data-color={color}\n textValue={typeof children === 'string' ? children : undefined}\n onAction={() => window.open(href, '_blank', 'noopener,noreferrer')}\n {...rest}\n >\n <div\n className={clsx(\n classNames.itemWrapper,\n styles[classNames.itemWrapper],\n )}\n >\n <div\n className={clsx(\n classNames.itemContent,\n styles[classNames.itemContent],\n )}\n >\n {iconStart}\n {children}\n </div>\n <div\n className={clsx(classNames.itemArrow, styles[classNames.itemArrow])}\n >\n <RiArrowRightSLine />\n </div>\n </div>\n </RAMenuItem>\n );\n }\n\n return (\n <RAMenuItem\n className={clsx(classNames.item, styles[classNames.item], className)}\n data-color={color}\n href={href}\n textValue={typeof children === 'string' ? children : undefined}\n {...rest}\n >\n <div\n className={clsx(classNames.itemWrapper, styles[classNames.itemWrapper])}\n >\n <div\n className={clsx(\n classNames.itemContent,\n styles[classNames.itemContent],\n )}\n >\n {iconStart}\n {children}\n </div>\n <div\n className={clsx(classNames.itemArrow, styles[classNames.itemArrow])}\n >\n <RiArrowRightSLine />\n </div>\n </div>\n </RAMenuItem>\n );\n};\n\n/** @public */\nexport const MenuListBoxItem = (props: MenuListBoxItemProps) => {\n const { classNames, cleanedProps } = useStyles('Menu', props);\n const { children, className, ...rest } = cleanedProps;\n\n return (\n <RAListBoxItem\n textValue={\n typeof props.children === 'string' ? props.children : undefined\n }\n className={clsx(\n classNames.itemListBox,\n styles[classNames.itemListBox],\n className,\n )}\n {...rest}\n >\n <div\n className={clsx(classNames.itemWrapper, styles[classNames.itemWrapper])}\n >\n <div\n className={clsx(\n classNames.itemContent,\n styles[classNames.itemContent],\n )}\n >\n <div\n className={clsx(\n classNames.itemListBoxCheck,\n styles[classNames.itemListBoxCheck],\n )}\n >\n <RiCheckLine />\n </div>\n {children}\n </div>\n </div>\n </RAListBoxItem>\n );\n};\n\n/** @public */\nexport const MenuSection = (props: MenuSectionProps<object>) => {\n const { classNames, cleanedProps } = useStyles('Menu', props);\n const { children, className, title, ...rest } = cleanedProps;\n\n return (\n <RAMenuSection\n className={clsx(\n classNames.section,\n styles[classNames.section],\n className,\n )}\n {...rest}\n >\n <RAMenuHeader\n className={clsx(\n classNames.sectionHeader,\n styles[classNames.sectionHeader],\n )}\n >\n {title}\n </RAMenuHeader>\n {children}\n </RAMenuSection>\n );\n};\n\n/** @public */\nexport const MenuSeparator = (props: MenuSeparatorProps) => {\n const { classNames, cleanedProps } = useStyles('Menu', props);\n const { className, ...rest } = cleanedProps;\n\n return (\n <RAMenuSeparator\n className={clsx(\n classNames.separator,\n styles[classNames.separator],\n className,\n )}\n {...rest}\n />\n );\n};\n"],"names":["RAMenuTrigger","RAMenuSubmenuTrigger","RAMenu","RAPopover","RAListBox","RAAutocomplete","RASearchField","RAInput","RAButton","RAMenuItem","RAListBoxItem","RAMenuSection","RAMenuHeader","RAMenuSeparator"],"mappings":"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"}
|
|
1
|
+
{"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 Virtualizer,\n ListLayout,\n OverlayTriggerStateContext,\n} from 'react-aria-components';\nimport { useStyles } from '../../hooks/useStyles';\nimport { MenuDefinition } from './definition';\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 { useNavigate, useHref } from 'react-router-dom';\nimport { isExternalLink } from '../../utils/isExternalLink';\nimport { useRef, useEffect, useContext } from 'react';\nimport styles from './Menu.module.css';\nimport clsx from 'clsx';\n\n// The height will be used for virtualized menus. It should match the size set in CSS for each menu item.\nconst rowHeight = 32;\n\nconst MenuEmptyState = () => {\n const { classNames } = useStyles(MenuDefinition);\n\n return (\n <div className={clsx(classNames.emptyState, styles[classNames.emptyState])}>\n No results found.\n </div>\n );\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 { classNames, cleanedProps } = useStyles(MenuDefinition, props);\n const {\n className,\n placement = 'bottom start',\n virtualized = false,\n maxWidth,\n maxHeight,\n style,\n ...rest\n } = cleanedProps;\n\n const navigate = useNavigate();\n let newMaxWidth = maxWidth || (virtualized ? '260px' : 'undefined');\n const popoverRef = useRef<HTMLDivElement>(null);\n const state = useContext(OverlayTriggerStateContext);\n\n // Custom click-outside handler for non-modal popovers\n useEffect(() => {\n if (!state?.isOpen) return;\n\n const handleClickOutside = (event: MouseEvent) => {\n const target = event.target as Node;\n\n // Check if click is outside the popover\n if (popoverRef.current && !popoverRef.current.contains(target)) {\n // Check if click is on a trigger button or submenu\n const isOnTrigger = (target as Element).closest('[data-trigger]');\n const isOnSubmenu = (target as Element).closest('[role=\"menu\"]');\n\n if (!isOnTrigger && !isOnSubmenu) {\n state.close();\n }\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [state]);\n\n const menuContent = (\n <RAMenu\n className={clsx(classNames.content, styles[classNames.content])}\n renderEmptyState={() => <MenuEmptyState />}\n style={{ width: newMaxWidth, maxHeight, ...style }}\n {...rest}\n />\n );\n\n return (\n <RAPopover\n ref={popoverRef}\n className={clsx(\n classNames.popover,\n styles[classNames.popover],\n className,\n )}\n placement={placement}\n isNonModal={true}\n isKeyboardDismissDisabled={false}\n >\n <RouterProvider navigate={navigate} useHref={useHref}>\n {virtualized ? (\n <Virtualizer\n layout={ListLayout}\n layoutOptions={{\n rowHeight,\n }}\n >\n {menuContent}\n </Virtualizer>\n ) : (\n menuContent\n )}\n </RouterProvider>\n </RAPopover>\n );\n};\n\n/** @public */\nexport const MenuListBox = (props: MenuListBoxProps<object>) => {\n const { classNames, cleanedProps } = useStyles(MenuDefinition, props);\n const {\n className,\n selectionMode = 'single',\n placement = 'bottom start',\n virtualized = false,\n maxWidth,\n maxHeight,\n style,\n ...rest\n } = cleanedProps;\n let newMaxWidth = maxWidth || (virtualized ? '260px' : 'undefined');\n\n const listBoxContent = (\n <RAListBox\n className={clsx(classNames.content, styles[classNames.content])}\n selectionMode={selectionMode}\n style={{ width: newMaxWidth, maxHeight, ...style }}\n {...rest}\n />\n );\n\n return (\n <RAPopover\n className={clsx(\n classNames.popover,\n styles[classNames.popover],\n className,\n )}\n placement={placement}\n >\n {virtualized ? (\n <Virtualizer\n layout={ListLayout}\n layoutOptions={{\n rowHeight,\n }}\n >\n {listBoxContent}\n </Virtualizer>\n ) : (\n listBoxContent\n )}\n </RAPopover>\n );\n};\n\n/** @public */\nexport const MenuAutocomplete = (props: MenuAutocompleteProps<object>) => {\n const { classNames, cleanedProps } = useStyles(MenuDefinition, props);\n const {\n className,\n placement = 'bottom start',\n virtualized = false,\n maxWidth,\n maxHeight,\n style,\n ...rest\n } = cleanedProps;\n const { contains } = useFilter({ sensitivity: 'base' });\n let newMaxWidth = maxWidth || (virtualized ? '260px' : 'undefined');\n const navigate = useNavigate();\n\n const menuContent = (\n <RAMenu\n className={clsx(classNames.content, styles[classNames.content])}\n renderEmptyState={() => <MenuEmptyState />}\n style={{ width: newMaxWidth, maxHeight, ...style }}\n {...rest}\n />\n );\n\n return (\n <RAPopover\n className={clsx(\n classNames.popover,\n styles[classNames.popover],\n className,\n )}\n placement={placement}\n >\n <RouterProvider navigate={navigate} useHref={useHref}>\n <RAAutocomplete filter={contains}>\n <RASearchField\n className={clsx(\n classNames.searchField,\n styles[classNames.searchField],\n )}\n >\n <RAInput\n className={clsx(\n classNames.searchFieldInput,\n styles[classNames.searchFieldInput],\n )}\n aria-label=\"Search\"\n placeholder={props.placeholder || 'Search...'}\n />\n <RAButton\n className={clsx(\n classNames.searchFieldClear,\n styles[classNames.searchFieldClear],\n )}\n >\n <RiCloseCircleLine />\n </RAButton>\n </RASearchField>\n {virtualized ? (\n <Virtualizer\n layout={ListLayout}\n layoutOptions={{\n rowHeight,\n }}\n >\n {menuContent}\n </Virtualizer>\n ) : (\n menuContent\n )}\n </RAAutocomplete>\n </RouterProvider>\n </RAPopover>\n );\n};\n\n/** @public */\nexport const MenuAutocompleteListbox = (\n props: MenuAutocompleteListBoxProps<object>,\n) => {\n const { classNames, cleanedProps } = useStyles(MenuDefinition, props);\n const {\n className,\n selectionMode = 'single',\n placement = 'bottom start',\n virtualized = false,\n maxWidth,\n maxHeight,\n style,\n ...rest\n } = cleanedProps;\n const { contains } = useFilter({ sensitivity: 'base' });\n let newMaxWidth = maxWidth || (virtualized ? '260px' : 'undefined');\n\n const listBoxContent = (\n <RAListBox\n className={clsx(classNames.content, styles[classNames.content])}\n renderEmptyState={() => <MenuEmptyState />}\n selectionMode={selectionMode}\n style={{ width: newMaxWidth, maxHeight, ...style }}\n {...rest}\n />\n );\n\n return (\n <RAPopover\n className={clsx(\n classNames.popover,\n styles[classNames.popover],\n className,\n )}\n placement={placement}\n >\n <RAAutocomplete filter={contains}>\n <RASearchField\n className={clsx(\n classNames.searchField,\n styles[classNames.searchField],\n )}\n >\n <RAInput\n className={clsx(\n classNames.searchFieldInput,\n styles[classNames.searchFieldInput],\n )}\n aria-label=\"Search\"\n placeholder={props.placeholder || 'Search...'}\n />\n <RAButton\n className={clsx(\n classNames.searchFieldClear,\n styles[classNames.searchFieldClear],\n )}\n >\n <RiCloseCircleLine />\n </RAButton>\n </RASearchField>\n {virtualized ? (\n <Virtualizer\n layout={ListLayout}\n layoutOptions={{\n rowHeight,\n }}\n >\n {listBoxContent}\n </Virtualizer>\n ) : (\n listBoxContent\n )}\n </RAAutocomplete>\n </RAPopover>\n );\n};\n\n/** @public */\nexport const MenuItem = (props: MenuItemProps) => {\n const { classNames, cleanedProps } = useStyles(MenuDefinition, props);\n const {\n className,\n iconStart,\n color = 'primary',\n children,\n href,\n ...rest\n } = cleanedProps;\n\n const isLink = href !== undefined;\n const isExternal = isExternalLink(href);\n\n if (isLink && isExternal) {\n return (\n <RAMenuItem\n className={clsx(classNames.item, styles[classNames.item], className)}\n data-color={color}\n textValue={typeof children === 'string' ? children : undefined}\n onAction={() => window.open(href, '_blank', 'noopener,noreferrer')}\n {...rest}\n >\n <div\n className={clsx(\n classNames.itemWrapper,\n styles[classNames.itemWrapper],\n )}\n >\n <div\n className={clsx(\n classNames.itemContent,\n styles[classNames.itemContent],\n )}\n >\n {iconStart}\n {children}\n </div>\n <div\n className={clsx(classNames.itemArrow, styles[classNames.itemArrow])}\n >\n <RiArrowRightSLine />\n </div>\n </div>\n </RAMenuItem>\n );\n }\n\n return (\n <RAMenuItem\n className={clsx(classNames.item, styles[classNames.item], className)}\n data-color={color}\n href={href}\n textValue={typeof children === 'string' ? children : undefined}\n {...rest}\n >\n <div\n className={clsx(classNames.itemWrapper, styles[classNames.itemWrapper])}\n >\n <div\n className={clsx(\n classNames.itemContent,\n styles[classNames.itemContent],\n )}\n >\n {iconStart}\n {children}\n </div>\n <div\n className={clsx(classNames.itemArrow, styles[classNames.itemArrow])}\n >\n <RiArrowRightSLine />\n </div>\n </div>\n </RAMenuItem>\n );\n};\n\n/** @public */\nexport const MenuListBoxItem = (props: MenuListBoxItemProps) => {\n const { classNames, cleanedProps } = useStyles(MenuDefinition, props);\n const { children, className, ...rest } = cleanedProps;\n\n return (\n <RAListBoxItem\n textValue={\n typeof props.children === 'string' ? props.children : undefined\n }\n className={clsx(\n classNames.itemListBox,\n styles[classNames.itemListBox],\n className,\n )}\n {...rest}\n >\n <div\n className={clsx(classNames.itemWrapper, styles[classNames.itemWrapper])}\n >\n <div\n className={clsx(\n classNames.itemContent,\n styles[classNames.itemContent],\n )}\n >\n <div\n className={clsx(\n classNames.itemListBoxCheck,\n styles[classNames.itemListBoxCheck],\n )}\n >\n <RiCheckLine />\n </div>\n {children}\n </div>\n </div>\n </RAListBoxItem>\n );\n};\n\n/** @public */\nexport const MenuSection = (props: MenuSectionProps<object>) => {\n const { classNames, cleanedProps } = useStyles(MenuDefinition, props);\n const { children, className, title, ...rest } = cleanedProps;\n\n return (\n <RAMenuSection\n className={clsx(\n classNames.section,\n styles[classNames.section],\n className,\n )}\n {...rest}\n >\n <RAMenuHeader\n className={clsx(\n classNames.sectionHeader,\n styles[classNames.sectionHeader],\n )}\n >\n {title}\n </RAMenuHeader>\n {children}\n </RAMenuSection>\n );\n};\n\n/** @public */\nexport const MenuSeparator = (props: MenuSeparatorProps) => {\n const { classNames, cleanedProps } = useStyles(MenuDefinition, props);\n const { className, ...rest } = cleanedProps;\n\n return (\n <RAMenuSeparator\n className={clsx(\n classNames.separator,\n styles[classNames.separator],\n className,\n )}\n {...rest}\n />\n );\n};\n"],"names":["RAMenuTrigger","RAMenuSubmenuTrigger","RAMenu","RAPopover","RAListBox","RAAutocomplete","RASearchField","RAInput","RAButton","RAMenuItem","RAListBoxItem","RAMenuSection","RAMenuHeader","RAMenuSeparator"],"mappings":";;;;;;;;;;;AA+DA,MAAM,SAAA,GAAY,EAAA;AAElB,MAAM,iBAAiB,MAAM;AAC3B,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,cAAc,CAAA;AAE/C,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,UAAA,EAAY,MAAA,CAAO,UAAA,CAAW,UAAU,CAAC,CAAA,EAAG,QAAA,EAAA,mBAAA,EAE5E,CAAA;AAEJ,CAAA;AAGO,MAAM,WAAA,GAAc,CAAC,KAAA,KAA4B;AACtD,EAAA,uBAAO,GAAA,CAACA,aAAA,EAAA,EAAe,GAAG,KAAA,EAAO,CAAA;AACnC;AAGO,MAAM,cAAA,GAAiB,CAAC,KAAA,KAA+B;AAC5D,EAAA,uBAAO,GAAA,CAACC,gBAAA,EAAA,EAAsB,GAAG,KAAA,EAAO,CAAA;AAC1C;AAGO,MAAM,IAAA,GAAO,CAAC,KAAA,KAA6B;AAChD,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,gBAAgB,KAAK,CAAA;AACpE,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,SAAA,GAAY,cAAA;AAAA,IACZ,WAAA,GAAc,KAAA;AAAA,IACd,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,YAAA;AAEJ,EAAA,MAAM,WAAW,WAAA,EAAY;AAC7B,EAAA,IAAI,WAAA,GAAc,QAAA,KAAa,WAAA,GAAc,OAAA,GAAU,WAAA,CAAA;AACvD,EAAA,MAAM,UAAA,GAAa,OAAuB,IAAI,CAAA;AAC9C,EAAA,MAAM,KAAA,GAAQ,WAAW,0BAA0B,CAAA;AAGnD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,OAAO,MAAA,EAAQ;AAEpB,IAAA,MAAM,kBAAA,GAAqB,CAAC,KAAA,KAAsB;AAChD,MAAA,MAAM,SAAS,KAAA,CAAM,MAAA;AAGrB,MAAA,IAAI,WAAW,OAAA,IAAW,CAAC,WAAW,OAAA,CAAQ,QAAA,CAAS,MAAM,CAAA,EAAG;AAE9D,QAAA,MAAM,WAAA,GAAe,MAAA,CAAmB,OAAA,CAAQ,gBAAgB,CAAA;AAChE,QAAA,MAAM,WAAA,GAAe,MAAA,CAAmB,OAAA,CAAQ,eAAe,CAAA;AAE/D,QAAA,IAAI,CAAC,WAAA,IAAe,CAAC,WAAA,EAAa;AAChC,UAAA,KAAA,CAAM,KAAA,EAAM;AAAA,QACd;AAAA,MACF;AAAA,IACF,CAAA;AAEA,IAAA,QAAA,CAAS,gBAAA,CAAiB,aAAa,kBAAkB,CAAA;AACzD,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CAAS,mBAAA,CAAoB,aAAa,kBAAkB,CAAA;AAAA,IAC9D,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,MAAM,WAAA,mBACJ,GAAA;AAAA,IAACC,MAAA;AAAA,IAAA;AAAA,MACC,WAAW,IAAA,CAAK,UAAA,CAAW,SAAS,MAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA;AAAA,MAC9D,gBAAA,EAAkB,sBAAM,GAAA,CAAC,cAAA,EAAA,EAAe,CAAA;AAAA,MACxC,OAAO,EAAE,KAAA,EAAO,WAAA,EAAa,SAAA,EAAW,GAAG,KAAA,EAAM;AAAA,MAChD,GAAG;AAAA;AAAA,GACN;AAGF,EAAA,uBACE,GAAA;AAAA,IAACC,OAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,UAAA;AAAA,MACL,SAAA,EAAW,IAAA;AAAA,QACT,UAAA,CAAW,OAAA;AAAA,QACX,MAAA,CAAO,WAAW,OAAO,CAAA;AAAA,QACzB;AAAA,OACF;AAAA,MACA,SAAA;AAAA,MACA,UAAA,EAAY,IAAA;AAAA,MACZ,yBAAA,EAA2B,KAAA;AAAA,MAE3B,QAAA,kBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,QAAA,EAAoB,OAAA,EACjC,QAAA,EAAA,WAAA,mBACC,GAAA;AAAA,QAAC,WAAA;AAAA,QAAA;AAAA,UACC,MAAA,EAAQ,UAAA;AAAA,UACR,aAAA,EAAe;AAAA,YACb;AAAA,WACF;AAAA,UAEC,QAAA,EAAA;AAAA;AAAA,UAGH,WAAA,EAEJ;AAAA;AAAA,GACF;AAEJ;AAGO,MAAM,WAAA,GAAc,CAAC,KAAA,KAAoC;AAC9D,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,gBAAgB,KAAK,CAAA;AACpE,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,aAAA,GAAgB,QAAA;AAAA,IAChB,SAAA,GAAY,cAAA;AAAA,IACZ,WAAA,GAAc,KAAA;AAAA,IACd,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,YAAA;AACJ,EAAA,IAAI,WAAA,GAAc,QAAA,KAAa,WAAA,GAAc,OAAA,GAAU,WAAA,CAAA;AAEvD,EAAA,MAAM,cAAA,mBACJ,GAAA;AAAA,IAACC,OAAA;AAAA,IAAA;AAAA,MACC,WAAW,IAAA,CAAK,UAAA,CAAW,SAAS,MAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA;AAAA,MAC9D,aAAA;AAAA,MACA,OAAO,EAAE,KAAA,EAAO,WAAA,EAAa,SAAA,EAAW,GAAG,KAAA,EAAM;AAAA,MAChD,GAAG;AAAA;AAAA,GACN;AAGF,EAAA,uBACE,GAAA;AAAA,IAACD,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA;AAAA,QACT,UAAA,CAAW,OAAA;AAAA,QACX,MAAA,CAAO,WAAW,OAAO,CAAA;AAAA,QACzB;AAAA,OACF;AAAA,MACA,SAAA;AAAA,MAEC,QAAA,EAAA,WAAA,mBACC,GAAA;AAAA,QAAC,WAAA;AAAA,QAAA;AAAA,UACC,MAAA,EAAQ,UAAA;AAAA,UACR,aAAA,EAAe;AAAA,YACb;AAAA,WACF;AAAA,UAEC,QAAA,EAAA;AAAA;AAAA,OACH,GAEA;AAAA;AAAA,GAEJ;AAEJ;AAGO,MAAM,gBAAA,GAAmB,CAAC,KAAA,KAAyC;AACxE,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,gBAAgB,KAAK,CAAA;AACpE,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,SAAA,GAAY,cAAA;AAAA,IACZ,WAAA,GAAc,KAAA;AAAA,IACd,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,YAAA;AACJ,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,UAAU,EAAE,WAAA,EAAa,QAAQ,CAAA;AACtD,EAAA,IAAI,WAAA,GAAc,QAAA,KAAa,WAAA,GAAc,OAAA,GAAU,WAAA,CAAA;AACvD,EAAA,MAAM,WAAW,WAAA,EAAY;AAE7B,EAAA,MAAM,WAAA,mBACJ,GAAA;AAAA,IAACD,MAAA;AAAA,IAAA;AAAA,MACC,WAAW,IAAA,CAAK,UAAA,CAAW,SAAS,MAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA;AAAA,MAC9D,gBAAA,EAAkB,sBAAM,GAAA,CAAC,cAAA,EAAA,EAAe,CAAA;AAAA,MACxC,OAAO,EAAE,KAAA,EAAO,WAAA,EAAa,SAAA,EAAW,GAAG,KAAA,EAAM;AAAA,MAChD,GAAG;AAAA;AAAA,GACN;AAGF,EAAA,uBACE,GAAA;AAAA,IAACC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA;AAAA,QACT,UAAA,CAAW,OAAA;AAAA,QACX,MAAA,CAAO,WAAW,OAAO,CAAA;AAAA,QACzB;AAAA,OACF;AAAA,MACA,SAAA;AAAA,MAEA,8BAAC,cAAA,EAAA,EAAe,QAAA,EAAoB,SAClC,QAAA,kBAAA,IAAA,CAACE,YAAA,EAAA,EAAe,QAAQ,QAAA,EACtB,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAACC,WAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,IAAA;AAAA,cACT,UAAA,CAAW,WAAA;AAAA,cACX,MAAA,CAAO,WAAW,WAAW;AAAA,aAC/B;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAACC,KAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAW,IAAA;AAAA,oBACT,UAAA,CAAW,gBAAA;AAAA,oBACX,MAAA,CAAO,WAAW,gBAAgB;AAAA,mBACpC;AAAA,kBACA,YAAA,EAAW,QAAA;AAAA,kBACX,WAAA,EAAa,MAAM,WAAA,IAAe;AAAA;AAAA,eACpC;AAAA,8BACA,GAAA;AAAA,gBAACC,MAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAW,IAAA;AAAA,oBACT,UAAA,CAAW,gBAAA;AAAA,oBACX,MAAA,CAAO,WAAW,gBAAgB;AAAA,mBACpC;AAAA,kBAEA,8BAAC,iBAAA,EAAA,EAAkB;AAAA;AAAA;AACrB;AAAA;AAAA,SACF;AAAA,QACC,WAAA,mBACC,GAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,MAAA,EAAQ,UAAA;AAAA,YACR,aAAA,EAAe;AAAA,cACb;AAAA,aACF;AAAA,YAEC,QAAA,EAAA;AAAA;AAAA,SACH,GAEA;AAAA,OAAA,EAEJ,CAAA,EACF;AAAA;AAAA,GACF;AAEJ;AAGO,MAAM,uBAAA,GAA0B,CACrC,KAAA,KACG;AACH,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,gBAAgB,KAAK,CAAA;AACpE,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,aAAA,GAAgB,QAAA;AAAA,IAChB,SAAA,GAAY,cAAA;AAAA,IACZ,WAAA,GAAc,KAAA;AAAA,IACd,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,YAAA;AACJ,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,UAAU,EAAE,WAAA,EAAa,QAAQ,CAAA;AACtD,EAAA,IAAI,WAAA,GAAc,QAAA,KAAa,WAAA,GAAc,OAAA,GAAU,WAAA,CAAA;AAEvD,EAAA,MAAM,cAAA,mBACJ,GAAA;AAAA,IAACJ,OAAA;AAAA,IAAA;AAAA,MACC,WAAW,IAAA,CAAK,UAAA,CAAW,SAAS,MAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA;AAAA,MAC9D,gBAAA,EAAkB,sBAAM,GAAA,CAAC,cAAA,EAAA,EAAe,CAAA;AAAA,MACxC,aAAA;AAAA,MACA,OAAO,EAAE,KAAA,EAAO,WAAA,EAAa,SAAA,EAAW,GAAG,KAAA,EAAM;AAAA,MAChD,GAAG;AAAA;AAAA,GACN;AAGF,EAAA,uBACE,GAAA;AAAA,IAACD,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA;AAAA,QACT,UAAA,CAAW,OAAA;AAAA,QACX,MAAA,CAAO,WAAW,OAAO,CAAA;AAAA,QACzB;AAAA,OACF;AAAA,MACA,SAAA;AAAA,MAEA,QAAA,kBAAA,IAAA,CAACE,YAAA,EAAA,EAAe,MAAA,EAAQ,QAAA,EACtB,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAACC,WAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,IAAA;AAAA,cACT,UAAA,CAAW,WAAA;AAAA,cACX,MAAA,CAAO,WAAW,WAAW;AAAA,aAC/B;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAACC,KAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAW,IAAA;AAAA,oBACT,UAAA,CAAW,gBAAA;AAAA,oBACX,MAAA,CAAO,WAAW,gBAAgB;AAAA,mBACpC;AAAA,kBACA,YAAA,EAAW,QAAA;AAAA,kBACX,WAAA,EAAa,MAAM,WAAA,IAAe;AAAA;AAAA,eACpC;AAAA,8BACA,GAAA;AAAA,gBAACC,MAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAW,IAAA;AAAA,oBACT,UAAA,CAAW,gBAAA;AAAA,oBACX,MAAA,CAAO,WAAW,gBAAgB;AAAA,mBACpC;AAAA,kBAEA,8BAAC,iBAAA,EAAA,EAAkB;AAAA;AAAA;AACrB;AAAA;AAAA,SACF;AAAA,QACC,WAAA,mBACC,GAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,MAAA,EAAQ,UAAA;AAAA,YACR,aAAA,EAAe;AAAA,cACb;AAAA,aACF;AAAA,YAEC,QAAA,EAAA;AAAA;AAAA,SACH,GAEA;AAAA,OAAA,EAEJ;AAAA;AAAA,GACF;AAEJ;AAGO,MAAM,QAAA,GAAW,CAAC,KAAA,KAAyB;AAChD,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,gBAAgB,KAAK,CAAA;AACpE,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA,GAAQ,SAAA;AAAA,IACR,QAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,YAAA;AAEJ,EAAA,MAAM,SAAS,IAAA,KAAS,MAAA;AACxB,EAAA,MAAM,UAAA,GAAa,eAAe,IAAI,CAAA;AAEtC,EAAA,IAAI,UAAU,UAAA,EAAY;AACxB,IAAA,uBACE,GAAA;AAAA,MAACC,UAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QACnE,YAAA,EAAY,KAAA;AAAA,QACZ,SAAA,EAAW,OAAO,QAAA,KAAa,QAAA,GAAW,QAAA,GAAW,MAAA;AAAA,QACrD,UAAU,MAAM,MAAA,CAAO,IAAA,CAAK,IAAA,EAAM,UAAU,qBAAqB,CAAA;AAAA,QAChE,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,IAAA;AAAA,cACT,UAAA,CAAW,WAAA;AAAA,cACX,MAAA,CAAO,WAAW,WAAW;AAAA,aAC/B;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAA,IAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAW,IAAA;AAAA,oBACT,UAAA,CAAW,WAAA;AAAA,oBACX,MAAA,CAAO,WAAW,WAAW;AAAA,mBAC/B;AAAA,kBAEC,QAAA,EAAA;AAAA,oBAAA,SAAA;AAAA,oBACA;AAAA;AAAA;AAAA,eACH;AAAA,8BACA,GAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,WAAW,IAAA,CAAK,UAAA,CAAW,WAAW,MAAA,CAAO,UAAA,CAAW,SAAS,CAAC,CAAA;AAAA,kBAElE,8BAAC,iBAAA,EAAA,EAAkB;AAAA;AAAA;AACrB;AAAA;AAAA;AACF;AAAA,KACF;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA;AAAA,IAACA,UAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MACnE,YAAA,EAAY,KAAA;AAAA,MACZ,IAAA;AAAA,MACA,SAAA,EAAW,OAAO,QAAA,KAAa,QAAA,GAAW,QAAA,GAAW,MAAA;AAAA,MACpD,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAA,IAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,WAAW,IAAA,CAAK,UAAA,CAAW,aAAa,MAAA,CAAO,UAAA,CAAW,WAAW,CAAC,CAAA;AAAA,UAEtE,QAAA,EAAA;AAAA,4BAAA,IAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,IAAA;AAAA,kBACT,UAAA,CAAW,WAAA;AAAA,kBACX,MAAA,CAAO,WAAW,WAAW;AAAA,iBAC/B;AAAA,gBAEC,QAAA,EAAA;AAAA,kBAAA,SAAA;AAAA,kBACA;AAAA;AAAA;AAAA,aACH;AAAA,4BACA,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,WAAW,IAAA,CAAK,UAAA,CAAW,WAAW,MAAA,CAAO,UAAA,CAAW,SAAS,CAAC,CAAA;AAAA,gBAElE,8BAAC,iBAAA,EAAA,EAAkB;AAAA;AAAA;AACrB;AAAA;AAAA;AACF;AAAA,GACF;AAEJ;AAGO,MAAM,eAAA,GAAkB,CAAC,KAAA,KAAgC;AAC9D,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,gBAAgB,KAAK,CAAA;AACpE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,MAAK,GAAI,YAAA;AAEzC,EAAA,uBACE,GAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACC,WACE,OAAO,KAAA,CAAM,QAAA,KAAa,QAAA,GAAW,MAAM,QAAA,GAAW,MAAA;AAAA,MAExD,SAAA,EAAW,IAAA;AAAA,QACT,UAAA,CAAW,WAAA;AAAA,QACX,MAAA,CAAO,WAAW,WAAW,CAAA;AAAA,QAC7B;AAAA,OACF;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,WAAW,IAAA,CAAK,UAAA,CAAW,aAAa,MAAA,CAAO,UAAA,CAAW,WAAW,CAAC,CAAA;AAAA,UAEtE,QAAA,kBAAA,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,IAAA;AAAA,gBACT,UAAA,CAAW,WAAA;AAAA,gBACX,MAAA,CAAO,WAAW,WAAW;AAAA,eAC/B;AAAA,cAEA,QAAA,EAAA;AAAA,gCAAA,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAW,IAAA;AAAA,sBACT,UAAA,CAAW,gBAAA;AAAA,sBACX,MAAA,CAAO,WAAW,gBAAgB;AAAA,qBACpC;AAAA,oBAEA,8BAAC,WAAA,EAAA,EAAY;AAAA;AAAA,iBACf;AAAA,gBACC;AAAA;AAAA;AAAA;AACH;AAAA;AACF;AAAA,GACF;AAEJ;AAGO,MAAM,WAAA,GAAc,CAAC,KAAA,KAAoC;AAC9D,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,gBAAgB,KAAK,CAAA;AACpE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,KAAA,EAAO,GAAG,MAAK,GAAI,YAAA;AAEhD,EAAA,uBACE,IAAA;AAAA,IAACC,aAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA;AAAA,QACT,UAAA,CAAW,OAAA;AAAA,QACX,MAAA,CAAO,WAAW,OAAO,CAAA;AAAA,QACzB;AAAA,OACF;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAACC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,IAAA;AAAA,cACT,UAAA,CAAW,aAAA;AAAA,cACX,MAAA,CAAO,WAAW,aAAa;AAAA,aACjC;AAAA,YAEC,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,QACC;AAAA;AAAA;AAAA,GACH;AAEJ;AAGO,MAAM,aAAA,GAAgB,CAAC,KAAA,KAA8B;AAC1D,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,gBAAgB,KAAK,CAAA;AACpE,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,YAAA;AAE/B,EAAA,uBACE,GAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA;AAAA,QACT,UAAA,CAAW,SAAA;AAAA,QACX,MAAA,CAAO,WAAW,SAAS,CAAA;AAAA,QAC3B;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Menu-module_bui-MenuPopover__2_pRD {\n display: flex;\n flex-direction: column;\n border: 1px solid var(--bui-border);\n border-radius: var(--bui-radius-2);\n background: var(--bui-bg-surface-1);\n color: var(--bui-fg-primary);\n outline: none;\n transition: transform 200ms, opacity 200ms;\n /* Let React Aria handle height constraints naturally */\n min-height: 0;\n /* Remove overflow from popover since ScrollArea will handle it */\n overflow: hidden;\n\n &[data-entering],\n &[data-exiting] {\n transform: var(--origin);\n opacity: 0;\n }\n\n &[data-placement='top'] {\n --origin: translateY(8px);\n }\n\n &[data-placement='bottom'] {\n --origin: translateY(-8px);\n }\n\n &[data-placement='right'] {\n --origin: translateX(-8px);\n }\n\n &[data-placement='left'] {\n --origin: translateX(8px);\n }\n }\n\n .Menu-module_bui-MenuContent__3DAPp {\n max-height: inherit;\n box-sizing: border-box;\n overflow: auto;\n min-width: 150px;\n box-sizing: border-box;\n outline: none;\n padding-block: var(--bui-space-1);\n }\n\n .Menu-module_bui-MenuItem__2UbNh {\n padding-inline: var(--bui-space-1);\n display: block;\n\n &[data-focused] .Menu-module_bui-MenuItemWrapper__3SEGE {\n background: var(--bui-bg-surface-2);\n color: var(--bui-fg-primary);\n }\n\n &[data-open] .Menu-module_bui-MenuItemWrapper__3SEGE {\n background: var(--bui-bg-surface-2);\n color: var(--bui-fg-primary);\n }\n\n &[data-color='danger'] .Menu-module_bui-MenuItemWrapper__3SEGE {\n color: var(--bui-fg-danger);\n }\n\n &[data-color='danger'][data-focused] .Menu-module_bui-MenuItemWrapper__3SEGE {\n background: var(--bui-bg-danger);\n color: var(--bui-fg-danger);\n }\n\n &[data-has-submenu] {\n & > .Menu-module_bui-MenuItemWrapper__3SEGE > .Menu-module_bui-MenuItemArrow__2Gdal {\n display: block;\n }\n }\n }\n\n .Menu-module_bui-MenuItemWrapper__3SEGE {\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 2rem;\n padding-inline: var(--bui-space-2);\n border-radius: var(--bui-radius-2);\n outline: none;\n cursor: default;\n color: var(--bui-fg-primary);\n font-size: var(--bui-font-size-3);\n gap: var(--bui-space-6);\n }\n\n .Menu-module_bui-MenuItemListBox__3OVkY {\n padding-inline: var(--bui-space-1);\n display: block;\n\n &:hover .Menu-module_bui-MenuItemWrapper__3SEGE {\n background: var(--bui-bg-surface-2);\n color: var(--bui-fg-primary);\n }\n\n &[data-selected] .Menu-module_bui-MenuItemListBoxCheck__3flwX {\n & > svg {\n opacity: 1;\n color: var(--bui-fg-primary);\n }\n }\n }\n\n .Menu-module_bui-MenuItemListBoxCheck__3flwX {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1rem;\n height: 1rem;\n\n & > svg {\n opacity: 0;\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Menu-module_bui-MenuItemContent__2jc-_ {\n display: flex;\n align-items: center;\n gap: var(--bui-space-2);\n\n & > svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Menu-module_bui-MenuItemArrow__2Gdal {\n display: none;\n width: 1rem;\n height: 1rem;\n\n & > svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Menu-module_bui-MenuSection__3OeyZ {\n &:first-child .Menu-module_bui-MenuSectionHeader__yFmfK {\n padding-top: 0;\n }\n }\n\n .Menu-module_bui-MenuSectionHeader__yFmfK {\n height: 2rem;\n display: flex;\n align-items: center;\n padding-top: var(--bui-space-3);\n padding-left: var(--bui-space-3);\n color: var(--bui-fg-primary);\n font-size: var(--bui-font-size-1);\n font-weight: bold;\n letter-spacing: 0.05rem;\n text-transform: uppercase;\n }\n\n .Menu-module_bui-MenuSeparator__-EtU8 {\n height: 1px;\n background: var(--bui-border);\n margin-inline: var(--bui-space-1_5);\n margin-block: var(--bui-space-1);\n }\n\n .Menu-module_bui-MenuSearchField__1sNMj {\n
|
|
3
|
+
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Menu-module_bui-MenuPopover__2_pRD {\n display: flex;\n flex-direction: column;\n border: 1px solid var(--bui-border);\n border-radius: var(--bui-radius-2);\n background: var(--bui-bg-surface-1);\n color: var(--bui-fg-primary);\n outline: none;\n transition: transform 200ms, opacity 200ms;\n /* Let React Aria handle height constraints naturally */\n min-height: 0;\n /* Remove overflow from popover since ScrollArea will handle it */\n overflow: hidden;\n\n &[data-entering],\n &[data-exiting] {\n transform: var(--origin);\n opacity: 0;\n }\n\n &[data-placement='top'] {\n --origin: translateY(8px);\n }\n\n &[data-placement='bottom'] {\n --origin: translateY(-8px);\n }\n\n &[data-placement='right'] {\n --origin: translateX(-8px);\n }\n\n &[data-placement='left'] {\n --origin: translateX(8px);\n }\n }\n\n .Menu-module_bui-MenuContent__3DAPp {\n max-height: inherit;\n box-sizing: border-box;\n overflow: auto;\n min-width: 150px;\n box-sizing: border-box;\n outline: none;\n padding-block: var(--bui-space-1);\n }\n\n .Menu-module_bui-MenuItem__2UbNh {\n padding-inline: var(--bui-space-1);\n display: block;\n\n &[data-focused] .Menu-module_bui-MenuItemWrapper__3SEGE {\n background: var(--bui-bg-surface-2);\n color: var(--bui-fg-primary);\n }\n\n &[data-open] .Menu-module_bui-MenuItemWrapper__3SEGE {\n background: var(--bui-bg-surface-2);\n color: var(--bui-fg-primary);\n }\n\n &[data-color='danger'] .Menu-module_bui-MenuItemWrapper__3SEGE {\n color: var(--bui-fg-danger);\n }\n\n &[data-color='danger'][data-focused] .Menu-module_bui-MenuItemWrapper__3SEGE {\n background: var(--bui-bg-danger);\n color: var(--bui-fg-danger);\n }\n\n &[data-has-submenu] {\n & > .Menu-module_bui-MenuItemWrapper__3SEGE > .Menu-module_bui-MenuItemArrow__2Gdal {\n display: block;\n }\n }\n }\n\n .Menu-module_bui-MenuItemWrapper__3SEGE {\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 2rem;\n padding-inline: var(--bui-space-2);\n border-radius: var(--bui-radius-2);\n outline: none;\n cursor: default;\n color: var(--bui-fg-primary);\n font-size: var(--bui-font-size-3);\n gap: var(--bui-space-6);\n }\n\n .Menu-module_bui-MenuItemListBox__3OVkY {\n padding-inline: var(--bui-space-1);\n display: block;\n\n &:hover .Menu-module_bui-MenuItemWrapper__3SEGE {\n background: var(--bui-bg-surface-2);\n color: var(--bui-fg-primary);\n }\n\n &[data-selected] .Menu-module_bui-MenuItemListBoxCheck__3flwX {\n & > svg {\n opacity: 1;\n color: var(--bui-fg-primary);\n }\n }\n }\n\n .Menu-module_bui-MenuItemListBoxCheck__3flwX {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1rem;\n height: 1rem;\n\n & > svg {\n opacity: 0;\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Menu-module_bui-MenuItemContent__2jc-_ {\n display: flex;\n align-items: center;\n gap: var(--bui-space-2);\n\n & > svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Menu-module_bui-MenuItemArrow__2Gdal {\n display: none;\n width: 1rem;\n height: 1rem;\n\n & > svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Menu-module_bui-MenuSection__3OeyZ {\n &:first-child .Menu-module_bui-MenuSectionHeader__yFmfK {\n padding-top: 0;\n }\n }\n\n .Menu-module_bui-MenuSectionHeader__yFmfK {\n height: 2rem;\n display: flex;\n align-items: center;\n padding-top: var(--bui-space-3);\n padding-left: var(--bui-space-3);\n color: var(--bui-fg-primary);\n font-size: var(--bui-font-size-1);\n font-weight: bold;\n letter-spacing: 0.05rem;\n text-transform: uppercase;\n }\n\n .Menu-module_bui-MenuSeparator__-EtU8 {\n height: 1px;\n background: var(--bui-border);\n margin-inline: var(--bui-space-1_5);\n margin-block: var(--bui-space-1);\n }\n\n .Menu-module_bui-MenuSearchField__1sNMj {\n font-family: var(--bui-font-regular);\n width: 100%;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n border-bottom: 1px solid var(--bui-border);\n background-color: var(--bui-bg-surface-1);\n height: 2rem;\n\n &[data-empty] {\n .Menu-module_bui-MenuSearchFieldClear__3bwIe {\n visibility: hidden;\n }\n }\n }\n\n .Menu-module_bui-MenuSearchFieldInput__2jPs5 {\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0;\n border: none;\n background-color: transparent;\n font-size: var(--bui-font-size-3);\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-regular);\n color: var(--bui-fg-primary);\n width: 100%;\n height: 100%;\n outline: none;\n cursor: inherit;\n\n &::-webkit-search-cancel-button,\n &::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n &::placeholder {\n color: var(--bui-fg-secondary);\n }\n\n &:first-child {\n padding-inline: var(--bui-space-3) 0;\n }\n }\n\n .Menu-module_bui-MenuSearchFieldClear__3bwIe {\n flex: 0 0 auto;\n display: grid;\n place-content: center;\n background-color: transparent;\n border: none;\n padding: 0;\n margin: 0;\n cursor: pointer;\n color: var(--bui-fg-secondary);\n transition: color 0.2s ease-in-out;\n width: 2rem;\n height: 2rem;\n\n &:hover {\n color: var(--bui-fg-primary);\n }\n\n & > svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Menu-module_bui-MenuEmptyState__wPwuq {\n padding-inline: var(--bui-space-3);\n padding-block: var(--bui-space-2);\n color: var(--bui-fg-secondary);\n font-size: var(--bui-font-size-3);\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-regular);\n }\n}\n";
|
|
4
4
|
var styles = {"bui-MenuPopover":"Menu-module_bui-MenuPopover__2_pRD","bui-MenuContent":"Menu-module_bui-MenuContent__3DAPp","bui-MenuItem":"Menu-module_bui-MenuItem__2UbNh","bui-MenuItemWrapper":"Menu-module_bui-MenuItemWrapper__3SEGE","bui-MenuItemArrow":"Menu-module_bui-MenuItemArrow__2Gdal","bui-MenuItemListBox":"Menu-module_bui-MenuItemListBox__3OVkY","bui-MenuItemListBoxCheck":"Menu-module_bui-MenuItemListBoxCheck__3flwX","bui-MenuItemContent":"Menu-module_bui-MenuItemContent__2jc-_","bui-MenuSection":"Menu-module_bui-MenuSection__3OeyZ","bui-MenuSectionHeader":"Menu-module_bui-MenuSectionHeader__yFmfK","bui-MenuSeparator":"Menu-module_bui-MenuSeparator__-EtU8","bui-MenuSearchField":"Menu-module_bui-MenuSearchField__1sNMj","bui-MenuSearchFieldClear":"Menu-module_bui-MenuSearchFieldClear__3bwIe","bui-MenuSearchFieldInput":"Menu-module_bui-MenuSearchFieldInput__2jPs5","bui-MenuEmptyState":"Menu-module_bui-MenuEmptyState__wPwuq"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
const MenuDefinition = {
|
|
2
|
+
classNames: {
|
|
3
|
+
root: "bui-Menu",
|
|
4
|
+
popover: "bui-MenuPopover",
|
|
5
|
+
content: "bui-MenuContent",
|
|
6
|
+
section: "bui-MenuSection",
|
|
7
|
+
sectionHeader: "bui-MenuSectionHeader",
|
|
8
|
+
item: "bui-MenuItem",
|
|
9
|
+
itemListBox: "bui-MenuItemListBox",
|
|
10
|
+
itemListBoxCheck: "bui-MenuItemListBoxCheck",
|
|
11
|
+
itemWrapper: "bui-MenuItemWrapper",
|
|
12
|
+
itemContent: "bui-MenuItemContent",
|
|
13
|
+
itemArrow: "bui-MenuItemArrow",
|
|
14
|
+
separator: "bui-MenuSeparator",
|
|
15
|
+
searchField: "bui-MenuSearchField",
|
|
16
|
+
searchFieldInput: "bui-MenuSearchFieldInput",
|
|
17
|
+
searchFieldClear: "bui-MenuSearchFieldClear",
|
|
18
|
+
emptyState: "bui-MenuEmptyState"
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
export { MenuDefinition };
|
|
23
|
+
//# sourceMappingURL=definition.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Menu/definition.ts"],"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 type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for Menu\n * @public\n */\nexport const MenuDefinition = {\n classNames: {\n root: 'bui-Menu',\n popover: 'bui-MenuPopover',\n content: 'bui-MenuContent',\n section: 'bui-MenuSection',\n sectionHeader: 'bui-MenuSectionHeader',\n item: 'bui-MenuItem',\n itemListBox: 'bui-MenuItemListBox',\n itemListBoxCheck: 'bui-MenuItemListBoxCheck',\n itemWrapper: 'bui-MenuItemWrapper',\n itemContent: 'bui-MenuItemContent',\n itemArrow: 'bui-MenuItemArrow',\n separator: 'bui-MenuSeparator',\n searchField: 'bui-MenuSearchField',\n searchFieldInput: 'bui-MenuSearchFieldInput',\n searchFieldClear: 'bui-MenuSearchFieldClear',\n emptyState: 'bui-MenuEmptyState',\n },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,cAAA,GAAiB;AAAA,EAC5B,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,UAAA;AAAA,IACN,OAAA,EAAS,iBAAA;AAAA,IACT,OAAA,EAAS,iBAAA;AAAA,IACT,OAAA,EAAS,iBAAA;AAAA,IACT,aAAA,EAAe,uBAAA;AAAA,IACf,IAAA,EAAM,cAAA;AAAA,IACN,WAAA,EAAa,qBAAA;AAAA,IACb,gBAAA,EAAkB,0BAAA;AAAA,IAClB,WAAA,EAAa,qBAAA;AAAA,IACb,WAAA,EAAa,qBAAA;AAAA,IACb,SAAA,EAAW,mBAAA;AAAA,IACX,SAAA,EAAW,mBAAA;AAAA,IACX,WAAA,EAAa,qBAAA;AAAA,IACb,gBAAA,EAAkB,0BAAA;AAAA,IAClB,gBAAA,EAAkB,0BAAA;AAAA,IAClB,UAAA,EAAY;AAAA;AAEhB;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Popover-module_bui-Popover__100-n {\n margin-right: 12px;\n overflow:
|
|
3
|
+
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Popover-module_bui-Popover__100-n {\n margin-right: 12px;\n overflow-x: hidden;\n overflow-y: auto;\n background-color: var(--bui-bg-surface-1);\n border: 1px solid var(--bui-border);\n border-radius: var(--bui-radius-3);\n padding-block: var(--bui-space-1);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n }\n}\n";
|
|
4
4
|
var stylesPopover = {"bui-Popover":"Popover-module_bui-Popover__100-n"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Popover/definition.ts"],"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 type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for Popover\n * @public\n */\nexport const PopoverDefinition = {\n classNames: {\n root: 'bui-Popover',\n },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,iBAAA,GAAoB;AAAA,EAC/B,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA;AAEV;;;;"}
|
|
@@ -5,11 +5,12 @@ import clsx from 'clsx';
|
|
|
5
5
|
import { FieldLabel } from '../FieldLabel/FieldLabel.esm.js';
|
|
6
6
|
import { FieldError } from '../FieldError/FieldError.esm.js';
|
|
7
7
|
import { useStyles } from '../../hooks/useStyles.esm.js';
|
|
8
|
+
import { RadioGroupDefinition } from './definition.esm.js';
|
|
8
9
|
import styles from './RadioGroup.module.css.esm.js';
|
|
9
10
|
|
|
10
11
|
const RadioGroup = forwardRef(
|
|
11
12
|
(props, ref) => {
|
|
12
|
-
const { classNames, cleanedProps } = useStyles(
|
|
13
|
+
const { classNames, cleanedProps } = useStyles(RadioGroupDefinition, props);
|
|
13
14
|
const {
|
|
14
15
|
className,
|
|
15
16
|
label,
|
|
@@ -56,7 +57,7 @@ const RadioGroup = forwardRef(
|
|
|
56
57
|
RadioGroup.displayName = "RadioGroup";
|
|
57
58
|
const Radio = forwardRef((props, ref) => {
|
|
58
59
|
const { className, ...rest } = props;
|
|
59
|
-
const { classNames } = useStyles(
|
|
60
|
+
const { classNames } = useStyles(RadioGroupDefinition);
|
|
60
61
|
return /* @__PURE__ */ jsx(
|
|
61
62
|
Radio$1,
|
|
62
63
|
{
|
|
@@ -1 +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';\nimport styles from './RadioGroup.module.css';\n\nimport type { RadioGroupProps, RadioProps } from './types';\n\n/** @public */\nexport const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n (props, ref) => {\n const { classNames, cleanedProps } = useStyles(
|
|
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';\nimport { RadioGroupDefinition } from './definition';\nimport styles from './RadioGroup.module.css';\n\nimport type { RadioGroupProps, RadioProps } from './types';\n\n/** @public */\nexport const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n (props, ref) => {\n const { classNames, cleanedProps } = useStyles(RadioGroupDefinition, props);\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 } = cleanedProps;\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, styles[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={clsx(classNames.content, styles[classNames.content])}>\n {children}\n </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(RadioGroupDefinition);\n\n return (\n <AriaRadio\n className={clsx(classNames.radio, styles[classNames.radio], className)}\n {...rest}\n ref={ref}\n />\n );\n});\n\nRadioGroup.displayName = 'RadioGroup';\n"],"names":["AriaRadioGroup","AriaRadio"],"mappings":";;;;;;;;;;AA+BO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,sBAAsB,KAAK,CAAA;AAC1E,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,YAAA;AAEJ,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,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QACnE,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,IAAA,CAAK,UAAA,CAAW,OAAA,EAAS,MAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA,EAChE,QAAA,EACH,CAAA;AAAA,8BACC,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,oBAAoB,CAAA;AAErD,EAAA,uBACE,GAAA;AAAA,IAACC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,KAAK,UAAA,CAAW,KAAA,EAAO,OAAO,UAAA,CAAW,KAAK,GAAG,SAAS,CAAA;AAAA,MACpE,GAAG,IAAA;AAAA,MACJ;AAAA;AAAA,GACF;AAEJ,CAAC;AAED,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/RadioGroup/definition.ts"],"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 type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for RadioGroup\n * @public\n */\nexport const RadioGroupDefinition = {\n classNames: {\n root: 'bui-RadioGroup',\n content: 'bui-RadioGroupContent',\n radio: 'bui-Radio',\n },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,oBAAA,GAAuB;AAAA,EAClC,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,gBAAA;AAAA,IACN,OAAA,EAAS,uBAAA;AAAA,IACT,KAAA,EAAO;AAAA;AAEX;;;;"}
|
|
@@ -6,6 +6,7 @@ import { FieldLabel } from '../FieldLabel/FieldLabel.esm.js';
|
|
|
6
6
|
import { FieldError } from '../FieldError/FieldError.esm.js';
|
|
7
7
|
import { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';
|
|
8
8
|
import { useStyles } from '../../hooks/useStyles.esm.js';
|
|
9
|
+
import { SearchFieldDefinition } from './definition.esm.js';
|
|
9
10
|
import styles from './SearchField.module.css.esm.js';
|
|
10
11
|
|
|
11
12
|
const SearchField = forwardRef(
|
|
@@ -25,7 +26,7 @@ const SearchField = forwardRef(
|
|
|
25
26
|
}
|
|
26
27
|
}, [label, ariaLabel, ariaLabelledBy]);
|
|
27
28
|
const { classNames, dataAttributes, style, cleanedProps } = useStyles(
|
|
28
|
-
|
|
29
|
+
SearchFieldDefinition,
|
|
29
30
|
{
|
|
30
31
|
size: "small",
|
|
31
32
|
placeholder: "Search",
|
|
@@ -1 +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, 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';\nimport styles from './SearchField.module.css';\n\nimport type { SearchFieldProps } from './types';\n\n/** @public */\nexport const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(\n (props, ref) => {\n const {\n label,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\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, dataAttributes, style, cleanedProps } = useStyles(\n
|
|
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, 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';\nimport { SearchFieldDefinition } from './definition';\nimport styles from './SearchField.module.css';\n\nimport type { SearchFieldProps } from './types';\n\n/** @public */\nexport const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(\n (props, ref) => {\n const {\n label,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\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, dataAttributes, style, cleanedProps } = useStyles(\n SearchFieldDefinition,\n {\n size: 'small',\n placeholder: 'Search',\n startCollapsed: false,\n ...props,\n },\n );\n\n const {\n className,\n description,\n icon,\n isRequired,\n secondaryLabel,\n placeholder,\n startCollapsed,\n ...rest\n } = cleanedProps;\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(classNames.root, styles[classNames.root], className)}\n {...dataAttributes}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n data-collapsed={isCollapsed}\n onFocusChange={handleClick}\n onChange={handleChange}\n style={style}\n {...rest}\n ref={ref}\n >\n <FieldLabel\n label={label}\n secondaryLabel={secondaryLabelText}\n description={description}\n />\n <div\n className={clsx(\n classNames.inputWrapper,\n styles[classNames.inputWrapper],\n )}\n data-size={dataAttributes['data-size']}\n >\n {icon !== false && (\n <div\n className={clsx(\n classNames.inputIcon,\n styles[classNames.inputIcon],\n )}\n data-size={dataAttributes['data-size']}\n aria-hidden=\"true\"\n >\n {icon || <RiSearch2Line />}\n </div>\n )}\n <Input\n className={clsx(classNames.input, styles[classNames.input])}\n {...(icon !== false && { 'data-icon': true })}\n placeholder={placeholder}\n />\n <Button\n className={clsx(classNames.clear, styles[classNames.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":";;;;;;;;;;;AAiCO,MAAM,WAAA,GAAc,UAAA;AAAA,EACzB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM;AAAA,MACJ,KAAA;AAAA,MACA,YAAA,EAAc,SAAA;AAAA,MACd,iBAAA,EAAmB;AAAA,KACrB,GAAI,KAAA;AAEJ,IAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,KAAK,CAAA;AACpD,IAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,SAAS,IAAI,CAAA;AAEzD,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;AAErC,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,KAAA,EAAO,cAAa,GAAI,SAAA;AAAA,MAC1D,qBAAA;AAAA,MACA;AAAA,QACE,IAAA,EAAM,OAAA;AAAA,QACN,WAAA,EAAa,QAAA;AAAA,QACb,cAAA,EAAgB,KAAA;AAAA,QAChB,GAAG;AAAA;AACL,KACF;AAEA,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,WAAA;AAAA,MACA,IAAA;AAAA,MACA,UAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,cAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,YAAA;AAGJ,IAAA,MAAM,kBAAA,GACJ,cAAA,KAAmB,UAAA,GAAa,UAAA,GAAa,IAAA,CAAA;AAE/C,IAAA,MAAM,WAAA,GAAc,CAAC,SAAA,KAAuB;AAC1C,MAAA,KAAA,CAAM,gBAAgB,SAAS,CAAA;AAC/B,MAAA,IAAI,cAAA,EAAgB;AAClB,QAAA,IAAI,SAAA,EAAW;AACb,UAAA,cAAA,CAAe,IAAI,CAAA;AAAA,QACrB,CAAA,MAAO;AACL,UAAA,cAAA,CAAe,KAAK,CAAA;AAAA,QACtB;AAAA,MACF;AAAA,IACF,CAAA;AAEA,IAAA,MAAM,YAAA,GAAe,CAAC,KAAA,KAAkB;AACtC,MAAA,KAAA,CAAM,WAAW,KAAK,CAAA;AACtB,MAAA,IAAI,KAAA,CAAM,SAAS,CAAA,EAAG;AACpB,QAAA,iBAAA,CAAkB,KAAK,CAAA;AAAA,MACzB,CAAA,MAAO;AACL,QAAA,iBAAA,CAAkB,IAAI,CAAA;AAAA,MACxB;AAAA,IACF,CAAA;AAEA,IAAA,uBACE,IAAA;AAAA,MAACA,aAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QAClE,GAAG,cAAA;AAAA,QACJ,YAAA,EAAY,SAAA;AAAA,QACZ,iBAAA,EAAiB,cAAA;AAAA,QACjB,gBAAA,EAAgB,WAAA;AAAA,QAChB,aAAA,EAAe,WAAA;AAAA,QACf,QAAA,EAAU,YAAA;AAAA,QACV,KAAA;AAAA,QACC,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,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,IAAA;AAAA,gBACT,UAAA,CAAW,YAAA;AAAA,gBACX,MAAA,CAAO,WAAW,YAAY;AAAA,eAChC;AAAA,cACA,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,cAEpC,QAAA,EAAA;AAAA,gBAAA,IAAA,KAAS,KAAA,oBACR,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAW,IAAA;AAAA,sBACT,UAAA,CAAW,SAAA;AAAA,sBACX,MAAA,CAAO,WAAW,SAAS;AAAA,qBAC7B;AAAA,oBACA,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,oBACrC,aAAA,EAAY,MAAA;AAAA,oBAEX,QAAA,EAAA,IAAA,wBAAS,aAAA,EAAA,EAAc;AAAA;AAAA,iBAC1B;AAAA,gCAEF,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,WAAW,IAAA,CAAK,UAAA,CAAW,OAAO,MAAA,CAAO,UAAA,CAAW,KAAK,CAAC,CAAA;AAAA,oBACzD,GAAI,IAAA,KAAS,KAAA,IAAS,EAAE,aAAa,IAAA,EAAK;AAAA,oBAC3C;AAAA;AAAA,iBACF;AAAA,gCACA,GAAA;AAAA,kBAAC,MAAA;AAAA,kBAAA;AAAA,oBACC,WAAW,IAAA,CAAK,UAAA,CAAW,OAAO,MAAA,CAAO,UAAA,CAAW,KAAK,CAAC,CAAA;AAAA,oBAC1D,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,oBAErC,8BAAC,iBAAA,EAAA,EAAkB;AAAA;AAAA;AACrB;AAAA;AAAA,WACF;AAAA,8BACC,UAAA,EAAA,EAAW;AAAA;AAAA;AAAA,KACd;AAAA,EAEJ;AACF;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .SearchField-module_bui-SearchField__2TyT_ {\n display: flex;\n flex-direction: column;\n font-family: var(--bui-font-regular);\n width: 100%;\n flex: 1;\n flex-shrink: 0;\n\n &[data-empty] {\n .SearchField-module_bui-SearchFieldClear__1gJQc {\n display: none;\n }\n }\n\n &[data-startCollapsed='true'] {\n transition: flex-basis 0.3s ease-in-out;\n padding: 0;\n flex: 0 1 auto;\n\n &[data-collapsed='true'] {\n flex-basis: 200px;\n }\n\n &[data-collapsed='false'] {\n cursor: pointer;\n\n &[data-size='medium'] {\n flex-basis: 2.5rem;\n height: 2.5rem;\n }\n\n &[data-size='small'] {\n flex-basis: 2rem;\n height: 2rem;\n }\n\n &[data-size='medium'] .SearchField-module_bui-SearchFieldInput__3Opoj {\n &::placeholder {\n opacity: 0;\n }\n }\n\n &[data-size='small'] .SearchField-module_bui-SearchFieldInput__3Opoj {\n &::placeholder {\n opacity: 0;\n }\n }\n\n .SearchField-module_bui-
|
|
4
|
-
var styles = {"bui-SearchField":"SearchField-module_bui-SearchField__2TyT_","bui-SearchFieldClear":"SearchField-module_bui-SearchFieldClear__1gJQc","bui-SearchFieldInput":"SearchField-module_bui-SearchFieldInput__3Opoj","bui-
|
|
3
|
+
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .SearchField-module_bui-SearchField__2TyT_ {\n display: flex;\n flex-direction: column;\n font-family: var(--bui-font-regular);\n width: 100%;\n flex: 1;\n flex-shrink: 0;\n\n &[data-size='small'] {\n --search-field-item-height: 2rem;\n }\n\n &[data-size='medium'] {\n --search-field-item-height: 2.5rem;\n }\n\n &[data-empty] {\n .SearchField-module_bui-SearchFieldClear__1gJQc {\n display: none;\n }\n }\n\n &[data-startCollapsed='true'] {\n transition: flex-basis 0.3s ease-in-out;\n padding: 0;\n flex: 0 1 auto;\n\n &[data-collapsed='true'] {\n flex-basis: 200px;\n }\n\n &[data-collapsed='false'] {\n cursor: pointer;\n\n &[data-size='medium'] {\n flex-basis: 2.5rem;\n height: 2.5rem;\n }\n\n &[data-size='small'] {\n flex-basis: 2rem;\n height: 2rem;\n }\n\n &[data-size='medium'] .SearchField-module_bui-SearchFieldInput__3Opoj {\n &::placeholder {\n opacity: 0;\n }\n }\n\n &[data-size='small'] .SearchField-module_bui-SearchFieldInput__3Opoj {\n &::placeholder {\n opacity: 0;\n }\n }\n\n .SearchField-module_bui-SearchFieldInputWrapper__1JEG8 {\n .SearchField-module_bui-SearchFieldInput__3Opoj[data-icon] {\n padding-right: 0px;\n }\n }\n }\n }\n }\n\n .SearchField-module_bui-SearchFieldInputWrapper__1JEG8 {\n display: flex;\n align-items: center;\n border-radius: var(--bui-radius-2);\n border: 1px solid var(--bui-border);\n background-color: var(--bui-bg-surface-1);\n transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;\n\n &[data-size='small'] {\n height: 2rem;\n }\n\n &[data-size='medium'] {\n height: 2.5rem;\n }\n\n &:focus-within {\n border-color: var(--bui-border-pressed);\n outline-width: 0px;\n }\n\n &:hover {\n border-color: var(--bui-border-hover);\n }\n\n &[data-invalid] {\n border-color: var(--bui-fg-danger);\n }\n\n &[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n border: 1px solid var(--bui-border-disabled);\n }\n }\n\n .SearchField-module_bui-SearchFieldInputIcon__EA0t9 {\n flex: 0 0 auto;\n display: grid;\n place-content: center;\n color: var(--bui-fg-primary);\n pointer-events: none;\n width: var(--search-field-item-height);\n height: var(--search-field-item-height);\n /* To animate the icon when the input is collapsed */\n transition: opacity 0.2s ease-in-out;\n\n & svg {\n .SearchField-module_bui-SearchField__2TyT_[data-size='small'] & {\n width: 1rem;\n height: 1rem;\n }\n\n .SearchField-module_bui-SearchField__2TyT_[data-size='medium'] & {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n }\n\n .SearchField-module_bui-SearchFieldInput__3Opoj {\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0;\n border: none;\n background-color: transparent;\n font-size: var(--bui-font-size-3);\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-regular);\n color: var(--bui-fg-primary);\n transition: padding 0.3s ease-in-out;\n width: 100%;\n height: 100%;\n outline: none;\n cursor: inherit;\n\n &::-webkit-search-cancel-button,\n &::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n &::placeholder {\n color: var(--bui-fg-secondary);\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n }\n\n &:first-child {\n .SearchField-module_bui-SearchField__2TyT_[data-size='small'] & {\n padding-inline: var(--bui-space-3) 0;\n }\n\n .SearchField-module_bui-SearchField__2TyT_[data-size='medium'] & {\n padding-inline: var(--bui-space-3) 0;\n }\n }\n }\n\n .SearchField-module_bui-SearchFieldClear__1gJQc {\n flex: 0 0 auto;\n display: grid;\n place-content: center;\n background-color: transparent;\n border: none;\n padding: 0;\n margin: 0;\n cursor: pointer;\n color: var(--bui-fg-secondary);\n transition: color 0.2s ease-in-out;\n width: var(--search-field-item-height);\n height: var(--search-field-item-height);\n\n &:hover {\n color: var(--bui-fg-primary);\n }\n\n & svg {\n width: 1rem;\n height: 1rem;\n }\n }\n}\n";
|
|
4
|
+
var styles = {"bui-SearchField":"SearchField-module_bui-SearchField__2TyT_","bui-SearchFieldClear":"SearchField-module_bui-SearchFieldClear__1gJQc","bui-SearchFieldInput":"SearchField-module_bui-SearchFieldInput__3Opoj","bui-SearchFieldInputWrapper":"SearchField-module_bui-SearchFieldInputWrapper__1JEG8","bui-SearchFieldInputIcon":"SearchField-module_bui-SearchFieldInputIcon__EA0t9"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
const SearchFieldDefinition = {
|
|
2
|
+
classNames: {
|
|
3
|
+
root: "bui-SearchField",
|
|
4
|
+
clear: "bui-SearchFieldClear",
|
|
5
|
+
inputWrapper: "bui-SearchFieldInputWrapper",
|
|
6
|
+
input: "bui-SearchFieldInput",
|
|
7
|
+
inputIcon: "bui-SearchFieldInputIcon"
|
|
8
|
+
},
|
|
9
|
+
dataAttributes: {
|
|
10
|
+
startCollapsed: [true, false],
|
|
11
|
+
size: ["small", "medium"]
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export { SearchFieldDefinition };
|
|
16
|
+
//# sourceMappingURL=definition.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/SearchField/definition.ts"],"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 type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for SearchField\n * @public\n */\nexport const SearchFieldDefinition = {\n classNames: {\n root: 'bui-SearchField',\n clear: 'bui-SearchFieldClear',\n inputWrapper: 'bui-SearchFieldInputWrapper',\n input: 'bui-SearchFieldInput',\n inputIcon: 'bui-SearchFieldInputIcon',\n },\n dataAttributes: {\n startCollapsed: [true, false] as const,\n size: ['small', 'medium'] as const,\n },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,qBAAA,GAAwB;AAAA,EACnC,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,iBAAA;AAAA,IACN,KAAA,EAAO,sBAAA;AAAA,IACP,YAAA,EAAc,6BAAA;AAAA,IACd,KAAA,EAAO,sBAAA;AAAA,IACP,SAAA,EAAW;AAAA,GACb;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,cAAA,EAAgB,CAAC,IAAA,EAAM,KAAK,CAAA;AAAA,IAC5B,IAAA,EAAM,CAAC,OAAA,EAAS,QAAQ;AAAA;AAE5B;;;;"}
|