@backstage/ui 0.8.2-next.0 → 0.9.0-next.1
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 +78 -0
- package/dist/components/Checkbox/Checkbox.esm.js +16 -18
- package/dist/components/Checkbox/Checkbox.esm.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.module.css.esm.js +2 -2
- package/dist/components/FieldLabel/FieldLabel.esm.js +10 -2
- package/dist/components/FieldLabel/FieldLabel.esm.js.map +1 -1
- package/dist/components/Header/Header.esm.js +11 -2
- package/dist/components/Header/Header.esm.js.map +1 -1
- package/dist/components/Header/HeaderToolbar.esm.js +6 -2
- package/dist/components/Header/HeaderToolbar.esm.js.map +1 -1
- package/dist/components/HeaderPage/HeaderPage.esm.js +56 -50
- package/dist/components/HeaderPage/HeaderPage.esm.js.map +1 -1
- package/dist/components/Menu/Menu.esm.js +46 -12
- package/dist/components/Menu/Menu.esm.js.map +1 -1
- package/dist/components/Skeleton/Skeleton.esm.js +2 -2
- package/dist/components/Skeleton/Skeleton.esm.js.map +1 -1
- package/dist/components/Switch/Switch.esm.js +2 -2
- package/dist/components/Switch/Switch.esm.js.map +1 -1
- package/dist/components/TablePagination/TablePagination.esm.js +3 -33
- package/dist/components/TablePagination/TablePagination.esm.js.map +1 -1
- package/dist/components/Tabs/Tabs.esm.js +9 -7
- package/dist/components/Tabs/Tabs.esm.js.map +1 -1
- package/dist/components/VisuallyHidden/VisuallyHidden.esm.js +19 -0
- package/dist/components/VisuallyHidden/VisuallyHidden.esm.js.map +1 -0
- package/dist/components/VisuallyHidden/VisuallyHidden.module.css.esm.js +8 -0
- package/dist/components/VisuallyHidden/VisuallyHidden.module.css.esm.js.map +1 -0
- package/dist/index.d.ts +39 -22
- package/dist/index.esm.js +1 -0
- package/dist/index.esm.js.map +1 -1
- package/dist/utils/componentDefinitions.esm.js +7 -3
- package/dist/utils/componentDefinitions.esm.js.map +1 -1
- package/package.json +4 -2
|
@@ -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 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(classNames.popover, styles[classNames.popover])}\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 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(classNames.popover, styles[classNames.popover])}\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 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(classNames.popover, styles[classNames.popover])}\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 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(classNames.popover, styles[classNames.popover])}\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 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])}\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])}\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, ...rest } = cleanedProps;\n\n return (\n <RAListBoxItem\n textValue={\n typeof props.children === 'string' ? props.children : undefined\n }\n className={clsx(classNames.itemListBox, styles[classNames.itemListBox])}\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, title, ...rest } = cleanedProps;\n\n return (\n <RAMenuSection\n className={clsx(classNames.section, styles[classNames.section])}\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\n return (\n <RAMenuSeparator\n className={clsx(classNames.separator, styles[classNames.separator])}\n {...cleanedProps}\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 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":";;;;;;;;;;AA8DA,MAAM,SAAA,GAAY,EAAA;AAElB,MAAM,iBAAiB,MAAM;AAC3B,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,MAAM,CAAA;AAEvC,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,QAAQ,KAAK,CAAA;AAC5D,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,QAAQ,KAAK,CAAA;AAC5D,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,QAAQ,KAAK,CAAA;AAC5D,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,QAAQ,KAAK,CAAA;AAC5D,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,QAAQ,KAAK,CAAA;AAC5D,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,QAAQ,KAAK,CAAA;AAC5D,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,QAAQ,KAAK,CAAA;AAC5D,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,QAAQ,KAAK,CAAA;AAC5D,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;;;;"}
|
|
@@ -10,11 +10,11 @@ const Skeleton = (props) => {
|
|
|
10
10
|
rounded: false,
|
|
11
11
|
...props
|
|
12
12
|
});
|
|
13
|
-
const { width, height, rounded, style, ...rest } = cleanedProps;
|
|
13
|
+
const { className, width, height, rounded, style, ...rest } = cleanedProps;
|
|
14
14
|
return /* @__PURE__ */ jsx(
|
|
15
15
|
"div",
|
|
16
16
|
{
|
|
17
|
-
className: clsx(classNames.root, styles[classNames.root]),
|
|
17
|
+
className: clsx(classNames.root, styles[classNames.root], className),
|
|
18
18
|
"data-rounded": rounded,
|
|
19
19
|
style: {
|
|
20
20
|
width,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Skeleton.esm.js","sources":["../../../src/components/Skeleton/Skeleton.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 { useStyles } from '../../hooks/useStyles';\nimport { SkeletonProps } from './types';\nimport styles from './Skeleton.module.css';\nimport clsx from 'clsx';\n\n/** @public */\nexport const Skeleton = (props: SkeletonProps) => {\n const { classNames, cleanedProps } = useStyles('Skeleton', {\n width: 80,\n height: 24,\n rounded: false,\n ...props,\n });\n const { width, height, rounded, style, ...rest } = cleanedProps;\n\n return (\n <div\n className={clsx(classNames.root, styles[classNames.root])}\n data-rounded={rounded}\n style={{\n width,\n height,\n ...style,\n }}\n {...rest}\n />\n );\n};\n"],"names":[],"mappings":";;;;;AAsBO,MAAM,QAAA,GAAW,CAAC,KAAA,KAAyB;AAChD,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,UAAU,UAAA,EAAY;AAAA,IACzD,KAAA,EAAO,EAAA;AAAA,IACP,MAAA,EAAQ,EAAA;AAAA,IACR,OAAA,EAAS,KAAA;AAAA,IACT,GAAG;AAAA,GACJ,CAAA;AACD,EAAA,MAAM,EAAE,KAAA,EAAO,MAAA,EAAQ,SAAS,KAAA,EAAO,GAAG,MAAK,GAAI,YAAA;
|
|
1
|
+
{"version":3,"file":"Skeleton.esm.js","sources":["../../../src/components/Skeleton/Skeleton.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 { useStyles } from '../../hooks/useStyles';\nimport { SkeletonProps } from './types';\nimport styles from './Skeleton.module.css';\nimport clsx from 'clsx';\n\n/** @public */\nexport const Skeleton = (props: SkeletonProps) => {\n const { classNames, cleanedProps } = useStyles('Skeleton', {\n width: 80,\n height: 24,\n rounded: false,\n ...props,\n });\n const { className, width, height, rounded, style, ...rest } = cleanedProps;\n\n return (\n <div\n className={clsx(classNames.root, styles[classNames.root], className)}\n data-rounded={rounded}\n style={{\n width,\n height,\n ...style,\n }}\n {...rest}\n />\n );\n};\n"],"names":[],"mappings":";;;;;AAsBO,MAAM,QAAA,GAAW,CAAC,KAAA,KAAyB;AAChD,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,UAAU,UAAA,EAAY;AAAA,IACzD,KAAA,EAAO,EAAA;AAAA,IACP,MAAA,EAAQ,EAAA;AAAA,IACR,OAAA,EAAS,KAAA;AAAA,IACT,GAAG;AAAA,GACJ,CAAA;AACD,EAAA,MAAM,EAAE,WAAW,KAAA,EAAO,MAAA,EAAQ,SAAS,KAAA,EAAO,GAAG,MAAK,GAAI,YAAA;AAE9D,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MACnE,cAAA,EAAc,OAAA;AAAA,MACd,KAAA,EAAO;AAAA,QACL,KAAA;AAAA,QACA,MAAA;AAAA,QACA,GAAG;AAAA,OACL;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}
|
|
@@ -8,11 +8,11 @@ import clsx from 'clsx';
|
|
|
8
8
|
const Switch = forwardRef(
|
|
9
9
|
(props, ref) => {
|
|
10
10
|
const { classNames, cleanedProps } = useStyles("Switch", props);
|
|
11
|
-
const { label, ...rest } = cleanedProps;
|
|
11
|
+
const { className, label, ...rest } = cleanedProps;
|
|
12
12
|
return /* @__PURE__ */ jsxs(
|
|
13
13
|
Switch$1,
|
|
14
14
|
{
|
|
15
|
-
className: clsx(classNames.root, styles[classNames.root]),
|
|
15
|
+
className: clsx(classNames.root, styles[classNames.root], className),
|
|
16
16
|
ref,
|
|
17
17
|
...rest,
|
|
18
18
|
children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.esm.js","sources":["../../../src/components/Switch/Switch.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 { forwardRef } from 'react';\nimport { Switch as AriaSwitch } from 'react-aria-components';\nimport type { SwitchProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Switch.module.css';\nimport clsx from 'clsx';\n\n/** @public */\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(\n (props, ref) => {\n const { classNames, cleanedProps } = useStyles('Switch', props);\n const { label, ...rest } = cleanedProps;\n\n return (\n <AriaSwitch\n className={clsx(classNames.root, styles[classNames.root])}\n ref={ref}\n {...rest}\n >\n <div\n className={clsx(classNames.indicator, styles[classNames.indicator])}\n />\n {label}\n </AriaSwitch>\n );\n },\n);\n\nSwitch.displayName = 'Switch';\n"],"names":["AriaSwitch"],"mappings":";;;;;;;AAwBO,MAAM,MAAA,GAAS,UAAA;AAAA,EACpB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,UAAU,KAAK,CAAA;AAC9D,IAAA,MAAM,EAAE,KAAA,EAAO,GAAG,
|
|
1
|
+
{"version":3,"file":"Switch.esm.js","sources":["../../../src/components/Switch/Switch.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 { forwardRef } from 'react';\nimport { Switch as AriaSwitch } from 'react-aria-components';\nimport type { SwitchProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Switch.module.css';\nimport clsx from 'clsx';\n\n/** @public */\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(\n (props, ref) => {\n const { classNames, cleanedProps } = useStyles('Switch', props);\n const { className, label, ...rest } = cleanedProps;\n\n return (\n <AriaSwitch\n className={clsx(classNames.root, styles[classNames.root], className)}\n ref={ref}\n {...rest}\n >\n <div\n className={clsx(classNames.indicator, styles[classNames.indicator])}\n />\n {label}\n </AriaSwitch>\n );\n },\n);\n\nSwitch.displayName = 'Switch';\n"],"names":["AriaSwitch"],"mappings":";;;;;;;AAwBO,MAAM,MAAA,GAAS,UAAA;AAAA,EACpB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,UAAU,KAAK,CAAA;AAC9D,IAAA,MAAM,EAAE,SAAA,EAAW,KAAA,EAAO,GAAG,MAAK,GAAI,YAAA;AAEtC,IAAA,uBACE,IAAA;AAAA,MAACA,QAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QACnE,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAW,IAAA,CAAK,UAAA,CAAW,WAAW,MAAA,CAAO,UAAA,CAAW,SAAS,CAAC;AAAA;AAAA,WACpE;AAAA,UACC;AAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA;;;;"}
|
|
@@ -1,41 +1,11 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
|
-
import '../Box/Box.esm.js';
|
|
4
|
-
import '../Grid/Grid.esm.js';
|
|
5
|
-
import '../Flex/Flex.esm.js';
|
|
6
|
-
import '../Container/Container.esm.js';
|
|
7
|
-
import '../Avatar/Avatar.esm.js';
|
|
8
|
-
import '../Button/Button.esm.js';
|
|
9
|
-
import '../Card/Card.esm.js';
|
|
10
|
-
import '../Collapsible/Collapsible.esm.js';
|
|
11
|
-
import '../Dialog/Dialog.esm.js';
|
|
12
|
-
import '../FieldLabel/FieldLabel.esm.js';
|
|
13
|
-
import 'react-aria-components';
|
|
14
3
|
import { useStyles } from '../../hooks/useStyles.esm.js';
|
|
15
|
-
import 'react';
|
|
16
|
-
import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';
|
|
17
|
-
import { Text } from '../Text/Text.esm.js';
|
|
18
|
-
import 'react-router-dom';
|
|
19
|
-
import '../Header/Header.module.css.esm.js';
|
|
20
|
-
import '../Tabs/Tabs.esm.js';
|
|
21
|
-
import '../Link/Link.esm.js';
|
|
22
|
-
import '../HeaderPage/HeaderPage.module.css.esm.js';
|
|
23
|
-
import { ButtonIcon } from '../ButtonIcon/ButtonIcon.esm.js';
|
|
24
|
-
import '../ButtonLink/ButtonLink.esm.js';
|
|
25
|
-
import '../Checkbox/Checkbox.esm.js';
|
|
26
|
-
import '../RadioGroup/RadioGroup.esm.js';
|
|
27
|
-
import '../Table/Table.module.css.esm.js';
|
|
28
|
-
import '../Table/components/Cell.esm.js';
|
|
29
|
-
import '@base-ui-components/react/avatar';
|
|
30
4
|
import styles from './TablePagination.module.css.esm.js';
|
|
31
|
-
import '
|
|
32
|
-
import '../TextField/TextField.esm.js';
|
|
33
|
-
import '../Tooltip/Tooltip.esm.js';
|
|
34
|
-
import '../Menu/Menu.module.css.esm.js';
|
|
35
|
-
import '../SearchField/SearchField.esm.js';
|
|
5
|
+
import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';
|
|
36
6
|
import { Select } from '../Select/Select.esm.js';
|
|
37
|
-
import '../
|
|
38
|
-
import '../
|
|
7
|
+
import { ButtonIcon } from '../ButtonIcon/ButtonIcon.esm.js';
|
|
8
|
+
import { Text } from '../Text/Text.esm.js';
|
|
39
9
|
|
|
40
10
|
function TablePagination(props) {
|
|
41
11
|
const { classNames, cleanedProps } = useStyles("TablePagination", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TablePagination.esm.js","sources":["../../../src/components/TablePagination/TablePagination.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport clsx from 'clsx';\nimport { Text, ButtonIcon, Select } from '../..';\nimport type { TablePaginationProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './TablePagination.module.css';\nimport { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';\n\n/**\n * Pagination controls for Table components with page navigation and size selection.\n *\n * @public\n */\nexport function TablePagination(props: TablePaginationProps) {\n const { classNames, cleanedProps } = useStyles('TablePagination', {\n showPageSizeOptions: true,\n ...props,\n });\n const {\n className,\n offset,\n pageSize,\n rowCount,\n onNextPage,\n onPreviousPage,\n onPageSizeChange,\n setOffset,\n setPageSize,\n showPageSizeOptions,\n ...rest\n } = cleanedProps;\n\n const currentOffset = offset ?? 0;\n const currentPageSize = pageSize ?? 10;\n\n const fromCount = currentOffset + 1;\n const toCount = Math.min(currentOffset + currentPageSize, rowCount ?? 0);\n\n const nextPage = () => {\n const totalRows = rowCount ?? 0;\n const nextOffset = currentOffset + currentPageSize;\n\n // Check if there are more items to navigate to\n if (nextOffset < totalRows) {\n onNextPage?.(); // Analytics tracking\n setOffset?.(nextOffset); // Navigate to next page\n }\n };\n\n const previousPage = () => {\n // Check if we can go to previous page\n if (currentOffset > 0) {\n onPreviousPage?.(); // Analytics tracking\n const prevOffset = Math.max(0, currentOffset - currentPageSize);\n setOffset?.(prevOffset); // Navigate to previous page\n }\n };\n\n return (\n <div\n className={clsx(classNames.root, styles[classNames.root], className)}\n {...rest}\n >\n <div className={clsx(classNames.left, styles[classNames.left])}>\n {showPageSizeOptions && (\n <Select\n name=\"pageSize\"\n size=\"small\"\n placeholder=\"Show 10 results\"\n options={[\n { label: 'Show 5 results', value: '5' },\n { label: 'Show 10 results', value: '10' },\n { label: 'Show 20 results', value: '20' },\n { label: 'Show 30 results', value: '30' },\n { label: 'Show 40 results', value: '40' },\n { label: 'Show 50 results', value: '50' },\n ]}\n selectedKey={pageSize?.toString()}\n onSelectionChange={value => {\n const newPageSize = Number(value);\n setPageSize?.(newPageSize);\n onPageSizeChange?.(newPageSize);\n }}\n className={clsx(classNames.select, styles[classNames.select])}\n />\n )}\n </div>\n <div className={clsx(classNames.right, styles[classNames.right])}>\n <Text\n as=\"p\"\n variant=\"body-medium\"\n >{`${fromCount} - ${toCount} of ${rowCount}`}</Text>\n <ButtonIcon\n variant=\"secondary\"\n size=\"small\"\n onClick={previousPage}\n isDisabled={currentOffset === 0}\n icon={<RiArrowLeftSLine />}\n aria-label=\"Previous\"\n />\n <ButtonIcon\n variant=\"secondary\"\n size=\"small\"\n onClick={nextPage}\n isDisabled={\n rowCount !== undefined &&\n currentOffset + currentPageSize >= rowCount\n }\n icon={<RiArrowRightSLine />}\n aria-label=\"Next\"\n />\n </div>\n </div>\n );\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TablePagination.esm.js","sources":["../../../src/components/TablePagination/TablePagination.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport clsx from 'clsx';\nimport { Text, ButtonIcon, Select } from '../..';\nimport type { TablePaginationProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './TablePagination.module.css';\nimport { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';\n\n/**\n * Pagination controls for Table components with page navigation and size selection.\n *\n * @public\n */\nexport function TablePagination(props: TablePaginationProps) {\n const { classNames, cleanedProps } = useStyles('TablePagination', {\n showPageSizeOptions: true,\n ...props,\n });\n const {\n className,\n offset,\n pageSize,\n rowCount,\n onNextPage,\n onPreviousPage,\n onPageSizeChange,\n setOffset,\n setPageSize,\n showPageSizeOptions,\n ...rest\n } = cleanedProps;\n\n const currentOffset = offset ?? 0;\n const currentPageSize = pageSize ?? 10;\n\n const fromCount = currentOffset + 1;\n const toCount = Math.min(currentOffset + currentPageSize, rowCount ?? 0);\n\n const nextPage = () => {\n const totalRows = rowCount ?? 0;\n const nextOffset = currentOffset + currentPageSize;\n\n // Check if there are more items to navigate to\n if (nextOffset < totalRows) {\n onNextPage?.(); // Analytics tracking\n setOffset?.(nextOffset); // Navigate to next page\n }\n };\n\n const previousPage = () => {\n // Check if we can go to previous page\n if (currentOffset > 0) {\n onPreviousPage?.(); // Analytics tracking\n const prevOffset = Math.max(0, currentOffset - currentPageSize);\n setOffset?.(prevOffset); // Navigate to previous page\n }\n };\n\n return (\n <div\n className={clsx(classNames.root, styles[classNames.root], className)}\n {...rest}\n >\n <div className={clsx(classNames.left, styles[classNames.left])}>\n {showPageSizeOptions && (\n <Select\n name=\"pageSize\"\n size=\"small\"\n placeholder=\"Show 10 results\"\n options={[\n { label: 'Show 5 results', value: '5' },\n { label: 'Show 10 results', value: '10' },\n { label: 'Show 20 results', value: '20' },\n { label: 'Show 30 results', value: '30' },\n { label: 'Show 40 results', value: '40' },\n { label: 'Show 50 results', value: '50' },\n ]}\n selectedKey={pageSize?.toString()}\n onSelectionChange={value => {\n const newPageSize = Number(value);\n setPageSize?.(newPageSize);\n onPageSizeChange?.(newPageSize);\n }}\n className={clsx(classNames.select, styles[classNames.select])}\n />\n )}\n </div>\n <div className={clsx(classNames.right, styles[classNames.right])}>\n <Text\n as=\"p\"\n variant=\"body-medium\"\n >{`${fromCount} - ${toCount} of ${rowCount}`}</Text>\n <ButtonIcon\n variant=\"secondary\"\n size=\"small\"\n onClick={previousPage}\n isDisabled={currentOffset === 0}\n icon={<RiArrowLeftSLine />}\n aria-label=\"Previous\"\n />\n <ButtonIcon\n variant=\"secondary\"\n size=\"small\"\n onClick={nextPage}\n isDisabled={\n rowCount !== undefined &&\n currentOffset + currentPageSize >= rowCount\n }\n icon={<RiArrowRightSLine />}\n aria-label=\"Next\"\n />\n </div>\n </div>\n );\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -26,7 +26,7 @@ const isTabActive = (tabHref, currentPathname, matchStrategy) => {
|
|
|
26
26
|
};
|
|
27
27
|
const Tabs = (props) => {
|
|
28
28
|
const { classNames, cleanedProps } = useStyles("Tabs", props);
|
|
29
|
-
const { children, ...rest } = cleanedProps;
|
|
29
|
+
const { className, children, ...rest } = cleanedProps;
|
|
30
30
|
const tabsRef = useRef(null);
|
|
31
31
|
const tabRefs = useRef(/* @__PURE__ */ new Map());
|
|
32
32
|
const [hoveredKey, setHoveredKey] = useState(null);
|
|
@@ -77,7 +77,7 @@ const Tabs = (props) => {
|
|
|
77
77
|
return /* @__PURE__ */ jsx(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: /* @__PURE__ */ jsx(
|
|
78
78
|
Tabs$1,
|
|
79
79
|
{
|
|
80
|
-
className: clsx(classNames.tabs, styles[classNames.tabs]),
|
|
80
|
+
className: clsx(classNames.tabs, styles[classNames.tabs], className),
|
|
81
81
|
keyboardActivation: "manual",
|
|
82
82
|
selectedKey: computedSelectedKey,
|
|
83
83
|
ref: tabsRef,
|
|
@@ -88,7 +88,7 @@ const Tabs = (props) => {
|
|
|
88
88
|
};
|
|
89
89
|
const TabList = (props) => {
|
|
90
90
|
const { classNames, cleanedProps } = useStyles("Tabs", props);
|
|
91
|
-
const { children, ...rest } = cleanedProps;
|
|
91
|
+
const { className, children, ...rest } = cleanedProps;
|
|
92
92
|
const { setHoveredKey, tabRefs, tabsRef, hoveredKey, prevHoveredKey } = useTabsContext();
|
|
93
93
|
const handleHover = (key) => {
|
|
94
94
|
setHoveredKey(key);
|
|
@@ -107,7 +107,8 @@ const TabList = (props) => {
|
|
|
107
107
|
{
|
|
108
108
|
className: clsx(
|
|
109
109
|
classNames.tabListWrapper,
|
|
110
|
-
styles[classNames.tabListWrapper]
|
|
110
|
+
styles[classNames.tabListWrapper],
|
|
111
|
+
className
|
|
111
112
|
),
|
|
112
113
|
children: [
|
|
113
114
|
/* @__PURE__ */ jsx(
|
|
@@ -135,6 +136,7 @@ const TabList = (props) => {
|
|
|
135
136
|
const Tab = (props) => {
|
|
136
137
|
const { classNames, cleanedProps } = useStyles("Tabs", props);
|
|
137
138
|
const {
|
|
139
|
+
className,
|
|
138
140
|
href,
|
|
139
141
|
children,
|
|
140
142
|
id,
|
|
@@ -146,7 +148,7 @@ const Tab = (props) => {
|
|
|
146
148
|
Tab$1,
|
|
147
149
|
{
|
|
148
150
|
id,
|
|
149
|
-
className: clsx(classNames.tab, styles[classNames.tab]),
|
|
151
|
+
className: clsx(classNames.tab, styles[classNames.tab], className),
|
|
150
152
|
ref: (el) => setTabRef(id, el),
|
|
151
153
|
href,
|
|
152
154
|
...rest,
|
|
@@ -156,11 +158,11 @@ const Tab = (props) => {
|
|
|
156
158
|
};
|
|
157
159
|
const TabPanel = (props) => {
|
|
158
160
|
const { classNames, cleanedProps } = useStyles("Tabs", props);
|
|
159
|
-
const { children, ...rest } = cleanedProps;
|
|
161
|
+
const { className, children, ...rest } = cleanedProps;
|
|
160
162
|
return /* @__PURE__ */ jsx(
|
|
161
163
|
TabPanel$1,
|
|
162
164
|
{
|
|
163
|
-
className: clsx(classNames.panel, styles[classNames.panel]),
|
|
165
|
+
className: clsx(classNames.panel, styles[classNames.panel], className),
|
|
164
166
|
...rest,
|
|
165
167
|
children
|
|
166
168
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.esm.js","sources":["../../../src/components/Tabs/Tabs.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 {\n useRef,\n useState,\n Children,\n cloneElement,\n isValidElement,\n ReactNode,\n createContext,\n useContext,\n} from 'react';\nimport type {\n TabsProps,\n TabListProps,\n TabPanelProps,\n TabsContextValue,\n TabProps,\n} from './types';\nimport { useLocation, useNavigate, useHref } from 'react-router-dom';\nimport { TabsIndicators } from './TabsIndicators';\nimport {\n Tabs as AriaTabs,\n TabList as AriaTabList,\n Tab as AriaTab,\n TabPanel as AriaTabPanel,\n RouterProvider,\n TabProps as AriaTabProps,\n} from 'react-aria-components';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Tabs.module.css';\nimport clsx from 'clsx';\n\nconst TabsContext = createContext<TabsContextValue | undefined>(undefined);\n\nconst useTabsContext = () => {\n const context = useContext(TabsContext);\n if (!context) {\n throw new Error('Tab components must be used within a Tabs component');\n }\n return context;\n};\n\n/**\n * Utility function to determine if a tab should be active based on the matching strategy.\n * This follows the pattern used in WorkaroundNavLink from the sidebar.\n */\nconst isTabActive = (\n tabHref: string,\n currentPathname: string,\n matchStrategy: 'exact' | 'prefix',\n): boolean => {\n if (matchStrategy === 'exact') {\n return tabHref === currentPathname;\n }\n\n // Prefix matching - similar to WorkaroundNavLink behavior\n if (tabHref === currentPathname) {\n return true;\n }\n\n // Check if current path starts with tab href followed by a slash\n // This prevents /foo matching /foobar\n return currentPathname.startsWith(`${tabHref}/`);\n};\n\n/**\n * A component that renders a list of tabs.\n *\n * @public\n */\nexport const Tabs = (props: TabsProps) => {\n const { classNames, cleanedProps } = useStyles('Tabs', props);\n const { children, ...rest } = cleanedProps;\n const tabsRef = useRef<HTMLDivElement>(null);\n const tabRefs = useRef<Map<string, HTMLDivElement>>(new Map());\n const [hoveredKey, setHoveredKey] = useState<string | null>(null);\n const prevHoveredKey = useRef<string | null>(null);\n let navigate = useNavigate();\n const location = useLocation();\n\n const setTabRef = (key: string, element: HTMLDivElement | null) => {\n if (element) {\n tabRefs.current.set(key, element);\n } else {\n tabRefs.current.delete(key);\n }\n };\n\n // If selectedKey is not provided, try to determine it from the current route\n const computedSelectedKey = (() => {\n const childrenArray = Children.toArray(children as ReactNode);\n for (const child of childrenArray) {\n if (isValidElement(child) && child.type === TabList) {\n const tabListChildren = Children.toArray(child.props.children);\n for (const tabChild of tabListChildren) {\n if (isValidElement(tabChild) && tabChild.props.href) {\n // Use tab-specific strategy, defaulting to 'exact'\n const strategy = tabChild.props.matchStrategy || 'exact';\n if (isTabActive(tabChild.props.href, location.pathname, strategy)) {\n return tabChild.props.id;\n }\n }\n }\n\n //No route matches - check if all tabs have hrefs (pure navigation)\n const allTabsHaveHref = tabListChildren.every(\n child => isValidElement(child) && child.props.href,\n );\n\n if (allTabsHaveHref) {\n // Pure navigation tabs, no route match\n return null;\n } else {\n // Mixed tabs or pure local state\n return undefined;\n }\n }\n }\n return undefined;\n })();\n\n if (!children) return null;\n\n const contextValue: TabsContextValue = {\n tabsRef,\n tabRefs,\n hoveredKey,\n prevHoveredKey,\n setHoveredKey,\n setTabRef,\n };\n\n return (\n <TabsContext.Provider value={contextValue}>\n <RouterProvider navigate={navigate} useHref={useHref}>\n <AriaTabs\n className={clsx(classNames.tabs, styles[classNames.tabs])}\n keyboardActivation=\"manual\"\n selectedKey={computedSelectedKey}\n ref={tabsRef}\n {...rest}\n >\n {children as ReactNode}\n </AriaTabs>\n </RouterProvider>\n </TabsContext.Provider>\n );\n};\n\n/**\n * A component that renders a list of tabs.\n *\n * @public\n */\nexport const TabList = (props: TabListProps) => {\n const { classNames, cleanedProps } = useStyles('Tabs', props);\n const { children, ...rest } = cleanedProps;\n const { setHoveredKey, tabRefs, tabsRef, hoveredKey, prevHoveredKey } =\n useTabsContext();\n\n const handleHover = (key: string | null) => {\n setHoveredKey(key);\n };\n\n // Clone children with additional props for hover and ref management\n const enhancedChildren = Children.map(children as ReactNode, child => {\n if (isValidElement(child)) {\n return cloneElement(child, {\n onHoverStart: () => handleHover(child.props.id as string),\n onHoverEnd: () => handleHover(null),\n } as Partial<AriaTabProps>);\n }\n return child;\n });\n\n return (\n <div\n className={clsx(\n classNames.tabListWrapper,\n styles[classNames.tabListWrapper],\n )}\n >\n <AriaTabList\n className={clsx(classNames.tabList, styles[classNames.tabList])}\n aria-label=\"Toolbar tabs\"\n {...rest}\n >\n {enhancedChildren}\n </AriaTabList>\n <TabsIndicators\n tabRefs={tabRefs}\n tabsRef={tabsRef}\n hoveredKey={hoveredKey}\n prevHoveredKey={prevHoveredKey}\n />\n </div>\n );\n};\n\n/**\n * A component that renders a tab.\n *\n * @public\n */\nexport const Tab = (props: TabProps) => {\n const { classNames, cleanedProps } = useStyles('Tabs', props);\n const {\n href,\n children,\n id,\n matchStrategy: _matchStrategy,\n ...rest\n } = cleanedProps;\n const { setTabRef } = useTabsContext();\n\n return (\n <AriaTab\n id={id}\n className={clsx(classNames.tab, styles[classNames.tab])}\n ref={el => setTabRef(id as string, el as HTMLDivElement)}\n href={href}\n {...rest}\n >\n {children}\n </AriaTab>\n );\n};\n\n/**\n * A component that renders the content of a tab.\n *\n * @public\n */\nexport const TabPanel = (props: TabPanelProps) => {\n const { classNames, cleanedProps } = useStyles('Tabs', props);\n const { children, ...rest } = cleanedProps;\n\n return (\n <AriaTabPanel\n className={clsx(classNames.panel, styles[classNames.panel])}\n {...rest}\n >\n {children}\n </AriaTabPanel>\n );\n};\n"],"names":["child","AriaTabs","AriaTabList","AriaTab","AriaTabPanel"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tabs.esm.js","sources":["../../../src/components/Tabs/Tabs.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 {\n useRef,\n useState,\n Children,\n cloneElement,\n isValidElement,\n ReactNode,\n createContext,\n useContext,\n} from 'react';\nimport type {\n TabsProps,\n TabListProps,\n TabPanelProps,\n TabsContextValue,\n TabProps,\n} from './types';\nimport { useLocation, useNavigate, useHref } from 'react-router-dom';\nimport { TabsIndicators } from './TabsIndicators';\nimport {\n Tabs as AriaTabs,\n TabList as AriaTabList,\n Tab as AriaTab,\n TabPanel as AriaTabPanel,\n RouterProvider,\n TabProps as AriaTabProps,\n} from 'react-aria-components';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Tabs.module.css';\nimport clsx from 'clsx';\n\nconst TabsContext = createContext<TabsContextValue | undefined>(undefined);\n\nconst useTabsContext = () => {\n const context = useContext(TabsContext);\n if (!context) {\n throw new Error('Tab components must be used within a Tabs component');\n }\n return context;\n};\n\n/**\n * Utility function to determine if a tab should be active based on the matching strategy.\n * This follows the pattern used in WorkaroundNavLink from the sidebar.\n */\nconst isTabActive = (\n tabHref: string,\n currentPathname: string,\n matchStrategy: 'exact' | 'prefix',\n): boolean => {\n if (matchStrategy === 'exact') {\n return tabHref === currentPathname;\n }\n\n // Prefix matching - similar to WorkaroundNavLink behavior\n if (tabHref === currentPathname) {\n return true;\n }\n\n // Check if current path starts with tab href followed by a slash\n // This prevents /foo matching /foobar\n return currentPathname.startsWith(`${tabHref}/`);\n};\n\n/**\n * A component that renders a list of tabs.\n *\n * @public\n */\nexport const Tabs = (props: TabsProps) => {\n const { classNames, cleanedProps } = useStyles('Tabs', props);\n const { className, children, ...rest } = cleanedProps;\n const tabsRef = useRef<HTMLDivElement>(null);\n const tabRefs = useRef<Map<string, HTMLDivElement>>(new Map());\n const [hoveredKey, setHoveredKey] = useState<string | null>(null);\n const prevHoveredKey = useRef<string | null>(null);\n let navigate = useNavigate();\n const location = useLocation();\n\n const setTabRef = (key: string, element: HTMLDivElement | null) => {\n if (element) {\n tabRefs.current.set(key, element);\n } else {\n tabRefs.current.delete(key);\n }\n };\n\n // If selectedKey is not provided, try to determine it from the current route\n const computedSelectedKey = (() => {\n const childrenArray = Children.toArray(children as ReactNode);\n for (const child of childrenArray) {\n if (isValidElement(child) && child.type === TabList) {\n const tabListChildren = Children.toArray(child.props.children);\n for (const tabChild of tabListChildren) {\n if (isValidElement(tabChild) && tabChild.props.href) {\n // Use tab-specific strategy, defaulting to 'exact'\n const strategy = tabChild.props.matchStrategy || 'exact';\n if (isTabActive(tabChild.props.href, location.pathname, strategy)) {\n return tabChild.props.id;\n }\n }\n }\n\n //No route matches - check if all tabs have hrefs (pure navigation)\n const allTabsHaveHref = tabListChildren.every(\n child => isValidElement(child) && child.props.href,\n );\n\n if (allTabsHaveHref) {\n // Pure navigation tabs, no route match\n return null;\n } else {\n // Mixed tabs or pure local state\n return undefined;\n }\n }\n }\n return undefined;\n })();\n\n if (!children) return null;\n\n const contextValue: TabsContextValue = {\n tabsRef,\n tabRefs,\n hoveredKey,\n prevHoveredKey,\n setHoveredKey,\n setTabRef,\n };\n\n return (\n <TabsContext.Provider value={contextValue}>\n <RouterProvider navigate={navigate} useHref={useHref}>\n <AriaTabs\n className={clsx(classNames.tabs, styles[classNames.tabs], className)}\n keyboardActivation=\"manual\"\n selectedKey={computedSelectedKey}\n ref={tabsRef}\n {...rest}\n >\n {children as ReactNode}\n </AriaTabs>\n </RouterProvider>\n </TabsContext.Provider>\n );\n};\n\n/**\n * A component that renders a list of tabs.\n *\n * @public\n */\nexport const TabList = (props: TabListProps) => {\n const { classNames, cleanedProps } = useStyles('Tabs', props);\n const { className, children, ...rest } = cleanedProps;\n const { setHoveredKey, tabRefs, tabsRef, hoveredKey, prevHoveredKey } =\n useTabsContext();\n\n const handleHover = (key: string | null) => {\n setHoveredKey(key);\n };\n\n // Clone children with additional props for hover and ref management\n const enhancedChildren = Children.map(children as ReactNode, child => {\n if (isValidElement(child)) {\n return cloneElement(child, {\n onHoverStart: () => handleHover(child.props.id as string),\n onHoverEnd: () => handleHover(null),\n } as Partial<AriaTabProps>);\n }\n return child;\n });\n\n return (\n <div\n className={clsx(\n classNames.tabListWrapper,\n styles[classNames.tabListWrapper],\n className,\n )}\n >\n <AriaTabList\n className={clsx(classNames.tabList, styles[classNames.tabList])}\n aria-label=\"Toolbar tabs\"\n {...rest}\n >\n {enhancedChildren}\n </AriaTabList>\n <TabsIndicators\n tabRefs={tabRefs}\n tabsRef={tabsRef}\n hoveredKey={hoveredKey}\n prevHoveredKey={prevHoveredKey}\n />\n </div>\n );\n};\n\n/**\n * A component that renders a tab.\n *\n * @public\n */\nexport const Tab = (props: TabProps) => {\n const { classNames, cleanedProps } = useStyles('Tabs', props);\n const {\n className,\n href,\n children,\n id,\n matchStrategy: _matchStrategy,\n ...rest\n } = cleanedProps;\n const { setTabRef } = useTabsContext();\n\n return (\n <AriaTab\n id={id}\n className={clsx(classNames.tab, styles[classNames.tab], className)}\n ref={el => setTabRef(id as string, el as HTMLDivElement)}\n href={href}\n {...rest}\n >\n {children}\n </AriaTab>\n );\n};\n\n/**\n * A component that renders the content of a tab.\n *\n * @public\n */\nexport const TabPanel = (props: TabPanelProps) => {\n const { classNames, cleanedProps } = useStyles('Tabs', props);\n const { className, children, ...rest } = cleanedProps;\n\n return (\n <AriaTabPanel\n className={clsx(classNames.panel, styles[classNames.panel], className)}\n {...rest}\n >\n {children}\n </AriaTabPanel>\n );\n};\n"],"names":["child","AriaTabs","AriaTabList","AriaTab","AriaTabPanel"],"mappings":"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"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useStyles } from '../../hooks/useStyles.esm.js';
|
|
3
|
+
import styles from './VisuallyHidden.module.css.esm.js';
|
|
4
|
+
import clsx from 'clsx';
|
|
5
|
+
|
|
6
|
+
const VisuallyHidden = (props) => {
|
|
7
|
+
const { classNames, cleanedProps } = useStyles("VisuallyHidden", props);
|
|
8
|
+
const { className, ...rest } = cleanedProps;
|
|
9
|
+
return /* @__PURE__ */ jsx(
|
|
10
|
+
"div",
|
|
11
|
+
{
|
|
12
|
+
className: clsx(classNames.root, styles[classNames.root], className),
|
|
13
|
+
...rest
|
|
14
|
+
}
|
|
15
|
+
);
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
export { VisuallyHidden };
|
|
19
|
+
//# sourceMappingURL=VisuallyHidden.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VisuallyHidden.esm.js","sources":["../../../src/components/VisuallyHidden/VisuallyHidden.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 { useStyles } from '../../hooks/useStyles';\nimport { VisuallyHiddenProps } from './types';\nimport styles from './VisuallyHidden.module.css';\nimport clsx from 'clsx';\n\n/**\n * Visually hides content while keeping it accessible to screen readers.\n * Useful for descriptive labels and other screen-reader-only content.\n *\n * Note: This component is for content that should ALWAYS remain visually hidden.\n * For skip links that become visible on focus, use a different approach.\n *\n * @public\n */\nexport const VisuallyHidden = (props: VisuallyHiddenProps) => {\n const { classNames, cleanedProps } = useStyles('VisuallyHidden', props);\n const { className, ...rest } = cleanedProps;\n\n return (\n <div\n className={clsx(classNames.root, styles[classNames.root], className)}\n {...rest}\n />\n );\n};\n"],"names":[],"mappings":";;;;;AA8BO,MAAM,cAAA,GAAiB,CAAC,KAAA,KAA+B;AAC5D,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,kBAAkB,KAAK,CAAA;AACtE,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,YAAA;AAE/B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAClE,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
|
+
|
|
3
|
+
var css_248z = "/*\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\n@layer tokens, base, components, utilities;\n\n@layer components {\n .VisuallyHidden-module_bui-VisuallyHidden__22L23 {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(100%);\n white-space: nowrap;\n border: 0;\n }\n}\n";
|
|
4
|
+
var styles = {"bui-VisuallyHidden":"VisuallyHidden-module_bui-VisuallyHidden__22L23"};
|
|
5
|
+
styleInject(css_248z);
|
|
6
|
+
|
|
7
|
+
export { styles as default };
|
|
8
|
+
//# sourceMappingURL=VisuallyHidden.module.css.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VisuallyHidden.module.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ReactElement, ReactNode, ElementType, ComponentPropsWithRef, ComponentProps } from 'react';
|
|
3
3
|
import { Avatar as Avatar$1 } from '@base-ui-components/react/avatar';
|
|
4
|
-
import { ButtonProps as ButtonProps$1, DialogTriggerProps as DialogTriggerProps$1, ModalOverlayProps, HeadingProps, TabsProps as TabsProps$1, TabListProps as TabListProps$1, TabProps as TabProps$1, TabPanelProps as TabPanelProps$1, LinkProps as LinkProps$1, RadioGroupProps as RadioGroupProps$1, RadioProps as RadioProps$1, TableProps, TableHeaderProps, TableBodyProps, ColumnProps as ColumnProps$1, CellProps as CellProps$1, RowProps, TagGroupProps as TagGroupProps$1, TagListProps, TagProps as TagProps$1, TextFieldProps as TextFieldProps$1, TooltipProps as TooltipProps$1, TooltipTriggerComponentProps, MenuTriggerProps as MenuTriggerProps$1, SubmenuTriggerProps as SubmenuTriggerProps$1, MenuProps as MenuProps$1, PopoverProps, ListBoxProps, MenuItemProps as MenuItemProps$1, ListBoxItemProps, MenuSectionProps as MenuSectionProps$1, SeparatorProps, SearchFieldProps as SearchFieldProps$1, SelectProps as SelectProps$1, SwitchProps as SwitchProps$1 } from 'react-aria-components';
|
|
4
|
+
import { ButtonProps as ButtonProps$1, DialogTriggerProps as DialogTriggerProps$1, ModalOverlayProps, HeadingProps, TabsProps as TabsProps$1, TabListProps as TabListProps$1, TabProps as TabProps$1, TabPanelProps as TabPanelProps$1, LinkProps as LinkProps$1, CheckboxProps as CheckboxProps$1, RadioGroupProps as RadioGroupProps$1, RadioProps as RadioProps$1, TableProps, TableHeaderProps, TableBodyProps, ColumnProps as ColumnProps$1, CellProps as CellProps$1, RowProps, TagGroupProps as TagGroupProps$1, TagListProps, TagProps as TagProps$1, TextFieldProps as TextFieldProps$1, TooltipProps as TooltipProps$1, TooltipTriggerComponentProps, MenuTriggerProps as MenuTriggerProps$1, SubmenuTriggerProps as SubmenuTriggerProps$1, MenuProps as MenuProps$1, PopoverProps, ListBoxProps, MenuItemProps as MenuItemProps$1, ListBoxItemProps, MenuSectionProps as MenuSectionProps$1, SeparatorProps, SearchFieldProps as SearchFieldProps$1, SelectProps as SelectProps$1, SwitchProps as SwitchProps$1 } from 'react-aria-components';
|
|
5
5
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
6
6
|
import { NavigateOptions } from 'react-router-dom';
|
|
7
7
|
import { Collapsible as Collapsible$1 } from '@base-ui-components/react/collapsible';
|
|
@@ -56,12 +56,11 @@ declare const componentDefinitions: {
|
|
|
56
56
|
};
|
|
57
57
|
readonly Checkbox: {
|
|
58
58
|
readonly classNames: {
|
|
59
|
-
readonly root: "bui-
|
|
60
|
-
readonly label: "bui-CheckboxLabel";
|
|
59
|
+
readonly root: "bui-Checkbox";
|
|
61
60
|
readonly indicator: "bui-CheckboxIndicator";
|
|
62
61
|
};
|
|
63
62
|
readonly dataAttributes: {
|
|
64
|
-
readonly
|
|
63
|
+
readonly selected: readonly [true, false];
|
|
65
64
|
};
|
|
66
65
|
};
|
|
67
66
|
readonly Collapsible: {
|
|
@@ -326,6 +325,11 @@ declare const componentDefinitions: {
|
|
|
326
325
|
readonly arrow: "bui-TooltipArrow";
|
|
327
326
|
};
|
|
328
327
|
};
|
|
328
|
+
readonly VisuallyHidden: {
|
|
329
|
+
readonly classNames: {
|
|
330
|
+
readonly root: "bui-VisuallyHidden";
|
|
331
|
+
};
|
|
332
|
+
};
|
|
329
333
|
};
|
|
330
334
|
|
|
331
335
|
/** @public */
|
|
@@ -641,7 +645,7 @@ declare const DialogBody: react.ForwardRefExoticComponent<DialogBodyProps & reac
|
|
|
641
645
|
declare const DialogFooter: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
642
646
|
|
|
643
647
|
/** @public */
|
|
644
|
-
interface FieldLabelProps {
|
|
648
|
+
interface FieldLabelProps extends Pick<React.HTMLAttributes<HTMLDivElement>, 'className'> {
|
|
645
649
|
/**
|
|
646
650
|
* The label of the text field
|
|
647
651
|
*/
|
|
@@ -745,6 +749,7 @@ interface HeaderProps {
|
|
|
745
749
|
customActions?: React.ReactNode;
|
|
746
750
|
tabs?: HeaderTab[];
|
|
747
751
|
onTabSelectionChange?: TabsProps$1['onSelectionChange'];
|
|
752
|
+
className?: string;
|
|
748
753
|
}
|
|
749
754
|
/**
|
|
750
755
|
* Represents a tab item in the header navigation.
|
|
@@ -785,6 +790,7 @@ interface HeaderPageProps {
|
|
|
785
790
|
customActions?: React.ReactNode;
|
|
786
791
|
tabs?: HeaderTab[];
|
|
787
792
|
breadcrumbs?: HeaderPageBreadcrumb[];
|
|
793
|
+
className?: string;
|
|
788
794
|
}
|
|
789
795
|
/**
|
|
790
796
|
* Represents a breadcrumb item in the header.
|
|
@@ -834,24 +840,15 @@ interface ButtonLinkProps extends LinkProps$1 {
|
|
|
834
840
|
declare const ButtonLink: react.ForwardRefExoticComponent<ButtonLinkProps & react.RefAttributes<HTMLAnchorElement>>;
|
|
835
841
|
|
|
836
842
|
/** @public */
|
|
837
|
-
interface CheckboxProps {
|
|
838
|
-
|
|
839
|
-
defaultChecked?: boolean;
|
|
840
|
-
checked?: boolean;
|
|
841
|
-
onChange?: (checked: boolean) => void;
|
|
842
|
-
disabled?: boolean;
|
|
843
|
-
required?: boolean;
|
|
844
|
-
className?: string;
|
|
845
|
-
name?: string;
|
|
846
|
-
value?: string;
|
|
847
|
-
style?: React.CSSProperties;
|
|
843
|
+
interface CheckboxProps extends CheckboxProps$1 {
|
|
844
|
+
children: React.ReactNode;
|
|
848
845
|
}
|
|
849
846
|
|
|
850
847
|
/** @public */
|
|
851
|
-
declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<
|
|
848
|
+
declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLLabelElement>>;
|
|
852
849
|
|
|
853
850
|
/** @public */
|
|
854
|
-
interface RadioGroupProps extends Omit<RadioGroupProps$1, 'children'>, Omit<FieldLabelProps, 'htmlFor' | 'id'> {
|
|
851
|
+
interface RadioGroupProps extends Omit<RadioGroupProps$1, 'children'>, Omit<FieldLabelProps, 'htmlFor' | 'id' | 'className'> {
|
|
855
852
|
children?: ReactNode;
|
|
856
853
|
}
|
|
857
854
|
/** @public */
|
|
@@ -1051,7 +1048,7 @@ declare const Text: {
|
|
|
1051
1048
|
};
|
|
1052
1049
|
|
|
1053
1050
|
/** @public */
|
|
1054
|
-
interface TextFieldProps extends TextFieldProps$1, Omit<FieldLabelProps, 'htmlFor' | 'id'> {
|
|
1051
|
+
interface TextFieldProps extends TextFieldProps$1, Omit<FieldLabelProps, 'htmlFor' | 'id' | 'className'> {
|
|
1055
1052
|
/**
|
|
1056
1053
|
* The HTML input type for the text field
|
|
1057
1054
|
*
|
|
@@ -1165,7 +1162,7 @@ declare const MenuSection: (props: MenuSectionProps<object>) => react_jsx_runtim
|
|
|
1165
1162
|
declare const MenuSeparator: (props: MenuSeparatorProps) => react_jsx_runtime.JSX.Element;
|
|
1166
1163
|
|
|
1167
1164
|
/** @public */
|
|
1168
|
-
interface SearchFieldProps extends SearchFieldProps$1, Omit<FieldLabelProps, 'htmlFor' | 'id'> {
|
|
1165
|
+
interface SearchFieldProps extends SearchFieldProps$1, Omit<FieldLabelProps, 'htmlFor' | 'id' | 'className'> {
|
|
1169
1166
|
/**
|
|
1170
1167
|
* An icon to render before the input
|
|
1171
1168
|
*/
|
|
@@ -1203,7 +1200,7 @@ declare const Link: react.ForwardRefExoticComponent<LinkProps & react.RefAttribu
|
|
|
1203
1200
|
interface SelectProps extends SelectProps$1<{
|
|
1204
1201
|
name: string;
|
|
1205
1202
|
value: string;
|
|
1206
|
-
}>, Omit<FieldLabelProps, 'htmlFor' | 'id'> {
|
|
1203
|
+
}>, Omit<FieldLabelProps, 'htmlFor' | 'id' | 'className'> {
|
|
1207
1204
|
/**
|
|
1208
1205
|
* An icon to render before the input
|
|
1209
1206
|
*/
|
|
@@ -1247,6 +1244,26 @@ interface SwitchProps extends SwitchProps$1 {
|
|
|
1247
1244
|
/** @public */
|
|
1248
1245
|
declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLLabelElement>>;
|
|
1249
1246
|
|
|
1247
|
+
/**
|
|
1248
|
+
* Properties for {@link VisuallyHidden}
|
|
1249
|
+
*
|
|
1250
|
+
* @public
|
|
1251
|
+
*/
|
|
1252
|
+
interface VisuallyHiddenProps extends ComponentProps<'div'> {
|
|
1253
|
+
children?: React.ReactNode;
|
|
1254
|
+
}
|
|
1255
|
+
|
|
1256
|
+
/**
|
|
1257
|
+
* Visually hides content while keeping it accessible to screen readers.
|
|
1258
|
+
* Useful for descriptive labels and other screen-reader-only content.
|
|
1259
|
+
*
|
|
1260
|
+
* Note: This component is for content that should ALWAYS remain visually hidden.
|
|
1261
|
+
* For skip links that become visible on focus, use a different approach.
|
|
1262
|
+
*
|
|
1263
|
+
* @public
|
|
1264
|
+
*/
|
|
1265
|
+
declare const VisuallyHidden: (props: VisuallyHiddenProps) => react_jsx_runtime.JSX.Element;
|
|
1266
|
+
|
|
1250
1267
|
/** @public */
|
|
1251
1268
|
declare const useBreakpoint: () => {
|
|
1252
1269
|
breakpoint: Breakpoint;
|
|
@@ -1254,4 +1271,4 @@ declare const useBreakpoint: () => {
|
|
|
1254
1271
|
down: (key: Breakpoint) => boolean;
|
|
1255
1272
|
};
|
|
1256
1273
|
|
|
1257
|
-
export { type AlignItems, Avatar, type AvatarProps, type Border, type BorderRadius, Box, type BoxProps, type Breakpoint, Button, ButtonIcon, type ButtonIconProps, ButtonLink, type ButtonLinkProps, type ButtonProps, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, Cell, CellProfile, type CellProfileProps, type CellProps, Checkbox, type CheckboxProps, type ClassNamesMap, Collapsible, Column, type ColumnProps, type Columns, type ComponentClassNames, type ComponentDefinition, type ComponentDefinitionName, Container, type ContainerProps, type DataAttributeValues, type DataAttributesMap, Dialog, DialogBody, type DialogBodyProps, DialogFooter, DialogHeader, type DialogHeaderProps, type DialogProps, DialogTrigger, type DialogTriggerProps, type Display, FieldLabel, type FieldLabelProps, Flex, type FlexDirection, type FlexProps, type FlexWrap, Grid, type GridItemProps, type GridProps, Header, HeaderPage, type HeaderPageBreadcrumb, type HeaderPageProps, type HeaderProps, type HeaderTab, type JustifyContent, Link, type LinkProps, Menu, MenuAutocomplete, type MenuAutocompleteListBoxProps, MenuAutocompleteListbox, type MenuAutocompleteProps, MenuItem, type MenuItemProps, MenuListBox, MenuListBoxItem, type MenuListBoxItemProps, type MenuListBoxProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, type MenuSeparatorProps, MenuTrigger, type MenuTriggerProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type Responsive, Row, SearchField, type SearchFieldProps, Select, type SelectProps, Skeleton, type SkeletonProps, type Space, type SpaceProps, SubmenuTrigger, type SubmenuTriggerProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, type TabMatchStrategy, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, TableHeader, TablePagination, type TablePaginationProps, Tabs, type TabsProps, Tag, TagGroup, type TagGroupProps, type TagProps, Text, type TextColorStatus, type TextColors, TextField, type TextFieldProps, type TextOwnProps, type TextProps, type TextVariants, type TextWeights, Tooltip, type TooltipProps, TooltipTrigger, type UseTableConfig, type UseTablePagination, type UseTablePaginationConfig, type UseTableResult, type UtilityProps, componentDefinitions, useBreakpoint, useTable };
|
|
1274
|
+
export { type AlignItems, Avatar, type AvatarProps, type Border, type BorderRadius, Box, type BoxProps, type Breakpoint, Button, ButtonIcon, type ButtonIconProps, ButtonLink, type ButtonLinkProps, type ButtonProps, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, Cell, CellProfile, type CellProfileProps, type CellProps, Checkbox, type CheckboxProps, type ClassNamesMap, Collapsible, Column, type ColumnProps, type Columns, type ComponentClassNames, type ComponentDefinition, type ComponentDefinitionName, Container, type ContainerProps, type DataAttributeValues, type DataAttributesMap, Dialog, DialogBody, type DialogBodyProps, DialogFooter, DialogHeader, type DialogHeaderProps, type DialogProps, DialogTrigger, type DialogTriggerProps, type Display, FieldLabel, type FieldLabelProps, Flex, type FlexDirection, type FlexProps, type FlexWrap, Grid, type GridItemProps, type GridProps, Header, HeaderPage, type HeaderPageBreadcrumb, type HeaderPageProps, type HeaderProps, type HeaderTab, type JustifyContent, Link, type LinkProps, Menu, MenuAutocomplete, type MenuAutocompleteListBoxProps, MenuAutocompleteListbox, type MenuAutocompleteProps, MenuItem, type MenuItemProps, MenuListBox, MenuListBoxItem, type MenuListBoxItemProps, type MenuListBoxProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, type MenuSeparatorProps, MenuTrigger, type MenuTriggerProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type Responsive, Row, SearchField, type SearchFieldProps, Select, type SelectProps, Skeleton, type SkeletonProps, type Space, type SpaceProps, SubmenuTrigger, type SubmenuTriggerProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, type TabMatchStrategy, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, TableHeader, TablePagination, type TablePaginationProps, Tabs, type TabsProps, Tag, TagGroup, type TagGroupProps, type TagProps, Text, type TextColorStatus, type TextColors, TextField, type TextFieldProps, type TextOwnProps, type TextProps, type TextVariants, type TextWeights, Tooltip, type TooltipProps, TooltipTrigger, type UseTableConfig, type UseTablePagination, type UseTablePaginationConfig, type UseTableResult, type UtilityProps, VisuallyHidden, type VisuallyHiddenProps, componentDefinitions, useBreakpoint, useTable };
|
package/dist/index.esm.js
CHANGED
|
@@ -34,6 +34,7 @@ export { Link } from './components/Link/Link.esm.js';
|
|
|
34
34
|
export { Select } from './components/Select/Select.esm.js';
|
|
35
35
|
export { Skeleton } from './components/Skeleton/Skeleton.esm.js';
|
|
36
36
|
export { Switch } from './components/Switch/Switch.esm.js';
|
|
37
|
+
export { VisuallyHidden } from './components/VisuallyHidden/VisuallyHidden.esm.js';
|
|
37
38
|
export { useBreakpoint } from './hooks/useBreakpoint.esm.js';
|
|
38
39
|
export { componentDefinitions } from './utils/componentDefinitions.esm.js';
|
|
39
40
|
//# sourceMappingURL=index.esm.js.map
|
package/dist/index.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|