@redocly/theme 0.70.0-next.3 → 0.70.0-next.5

package/lib/components/Catalog/Catalog.js

@@ -151,7 +151,7 @@ const CatalogDescription = styled_components_1.default.p `
 const CatalogPageWrapper = styled_components_1.default.div `
   --sidebar-width: var(--catalog-sidebar-width);
 
-  height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  height: calc(100vh - var(--navbar-offset));
   display: flex;
   flex-direction: column;
   overflow: hidden;

package/lib/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy.d.ts

@@ -1,2 +1,2 @@
 import type { CatalogEntityRelationsGraphProps } from '../../../../components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph';
-export declare const CatalogEntityRelationsGraph: import("react").ComponentType<CatalogEntityRelationsGraphProps>;
+export declare const CatalogEntityRelationsGraph: import("../../../../core/utils").DynamicComponent<CatalogEntityRelationsGraphProps>;

package/lib/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar.js

@@ -142,10 +142,10 @@ function CatalogEntityHistorySidebar({ entityKey, revision, version, className,
 }
 const SidebarOverlay = styled_components_1.default.div `
   position: fixed;
-  top: calc(var(--navbar-height) + var(--banner-height));
+  top: var(--navbar-offset);
   left: 0;
   width: var(--sidebar-width);
-  height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  height: calc(100vh - var(--navbar-offset));
   padding: var(--catalog-history-sidebar-padding);
   background-color: var(--catalog-history-sidebar-bg-color);
   border-right: 1px solid var(--catalog-history-sidebar-border-color);

package/lib/components/Catalog/CatalogEntity/CatalogEntitySchema.js

@@ -98,7 +98,7 @@ const SplitViewWrapper = styled_components_1.default.div `
 const SchemaSampleWrapper = styled_components_1.default.div `
   flex: 1;
   position: sticky;
-  top: calc(var(--navbar-height) + var(--banner-height) + var(--spacing-md));
+  top: calc(var(--navbar-offset) + var(--spacing-md));
   align-self: flex-start;
   padding-top: var(--spacing-sm);
 `;

package/lib/components/Catalog/CatalogFilter/CatalogFilterCheckboxes.js

@@ -101,17 +101,20 @@ function CatalogFilterCheckboxes({ filter, filterValuesCasing, showCounter = tru
                 react_1.default.createElement(FilterInput_1.FilterInput, { value: searchTerm, onChange: setSearchTerm })),
             react_1.default.createElement(FilterOptions_1.FilterOptions, null, filteredOptions.map(({ value, count }) => {
                 const id = 'filter--' + filter.property + '--' + value;
-                return (react_1.default.createElement(FilterCheckboxOption, { key: id, role: "link", onClick: () => {
-                        filter.toggleOption(value);
-                        telemetry.sendCatalogEntitiesFilterCheckboxToggledMessage([
-                            Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('catalogEntitiesFilterCheckboxId', 'checkbox')), { category: filter.property, value: value }),
-                        ]);
-                    } },
-                    react_1.default.createElement(CheckboxIcon_1.CheckboxIcon, { checked: filter.selectedOptions instanceof Set
-                            ? filter.selectedOptions.has(value) ||
-                                filter.selectedOptions.has(value === null || value === void 0 ? void 0 : value.toLowerCase())
-                            : false }),
-                    react_1.default.createElement(FilterOptionLabel_1.FilterOptionLabel, { "data-translation-key": value }, highlightText((0, utils_1.changeTextCasing)(translate(value), filterValuesCasing) || '')),
+                const checked = filter.selectedOptions instanceof Set
+                    ? filter.selectedOptions.has(value) ||
+                        filter.selectedOptions.has(value === null || value === void 0 ? void 0 : value.toLowerCase())
+                    : false;
+                return (react_1.default.createElement(FilterCheckboxOption, { key: id },
+                    react_1.default.createElement(CheckboxIcon_1.CheckboxIcon, { checked: checked }),
+                    react_1.default.createElement(FilterOptionLabel_1.FilterOptionLabel, { "data-translation-key": value },
+                        react_1.default.createElement(FilterCheckboxInput, { checked: checked, onChange: () => {
+                                filter.toggleOption(value);
+                                telemetry.sendCatalogEntitiesFilterCheckboxToggledMessage([
+                                    Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('catalogEntitiesFilterCheckboxId', 'checkbox')), { category: filter.property, value: value }),
+                                ]);
+                            } }),
+                        highlightText((0, utils_1.changeTextCasing)(translate(value), filterValuesCasing) || '')),
                     showCounter && react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, count)));
             })))));
 }
@@ -147,6 +150,22 @@ const HighlightedText = styled_components_1.default.span `
 `;
 const FilterCheckboxOption = (0, styled_components_1.default)(FilterOption_1.FilterOption) `
   padding-left: var(--filter-option-checkbox-padding-left);
+
+  &:has(input:focus-visible) {
+    outline: 1px solid var(--button-border-color-focused);
+    outline-offset: -1px;
+  }
+`;
+const FilterCheckboxInput = styled_components_1.default.input.attrs({ type: 'checkbox' }) `
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
 `;
 const FilterSearchWrapper = styled_components_1.default.div `
   padding-bottom: var(--spacing-xs);

package/lib/components/Catalog/CatalogMobileFiltersPanel/CatalogMobileFiltersPanel.js

@@ -14,7 +14,7 @@ function CatalogMobileFiltersPanel({ setMobileFiltersPanelOpen, filterContent, }
 }
 const CatalogMobileFiltersPanelWrapper = styled_components_1.default.div `
   width: 100%;
-  max-height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  max-height: calc(100vh - var(--navbar-offset));
   overflow-y: auto;
   background: var(--sidebar-bg-color);
   display: flex;

package/lib/components/Catalog/CatalogMobileFiltersPanel/CatalogMobileFiltersPanelOverlay.js

@@ -15,10 +15,10 @@ function CatalogMobileFiltersPanelOverlay({ setMobileFiltersPanelOpen, filterCon
 const CatalogMobileFiltersPanelOverlayWrapper = styled_components_1.default.div `
   display: none;
   position: fixed;
-  top: calc(var(--navbar-height) + var(--banner-height));
+  top: var(--navbar-offset);
   left: 0;
   width: 100%;
-  height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  height: calc(100vh - var(--navbar-offset));
   z-index: 3;
   background: var(--bg-color);
   flex-direction: column;

package/lib/components/Dropdown/Dropdown.js

@@ -42,6 +42,7 @@ const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon")
 const ChevronUpIcon_1 = require("../../icons/ChevronUpIcon/ChevronUpIcon");
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? react_1.useLayoutEffect : react_1.useEffect;
 exports.Dropdown = (0, react_1.forwardRef)(({ children, className, active, trigger, triggerEvent = 'click', closeOnClick = true, withArrow, dataAttributes, placement, alignment, portalled = false, onClick, onClose, onOpen, }, ref) => {
+    var _a, _b;
     const dropdownRef = (0, react_1.useRef)(null);
     const menuRef = (0, react_1.useRef)(null);
     const [isOpen, setIsOpen] = (0, hooks_1.useControlledState)(false, active);
@@ -120,7 +121,8 @@ exports.Dropdown = (0, react_1.forwardRef)(({ children, className, active, trigg
     (0, hooks_1.useOutsideClick)(portalled ? [wrapperRef, menuRef] : wrapperRef, handleClose);
     const menuContent = typeof children === 'function' ? children({ close: handleClose, isOpen }) : children;
     const triggerChild = react_1.default.Children.only(trigger);
-    const dropdownTrigger = (0, react_1.cloneElement)(triggerChild, Object.assign(Object.assign(Object.assign({ onClick: triggerEvent === 'click' ? handleToggle : undefined, 'aria-expanded': isOpen, icon: withArrow ? isOpen ? react_1.default.createElement(ChevronUpIcon_1.ChevronUpIcon, null) : react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, null) : undefined }, (withArrow ? { iconPosition: 'right' } : {})), triggerChild.props), { onKeyDown: triggerEvent === 'click' ? handleKeyDown : undefined }));
+    const isLinkTrigger = Boolean(((_a = triggerChild.props) === null || _a === void 0 ? void 0 : _a.to) || ((_b = triggerChild.props) === null || _b === void 0 ? void 0 : _b.href));
+    const dropdownTrigger = (0, react_1.cloneElement)(triggerChild, Object.assign(Object.assign(Object.assign({ onClick: triggerEvent === 'click' ? handleToggle : undefined, 'aria-haspopup': 'menu', 'aria-expanded': isOpen, icon: withArrow ? isOpen ? react_1.default.createElement(ChevronUpIcon_1.ChevronUpIcon, null) : react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, null) : undefined }, (withArrow ? { iconPosition: 'right' } : {})), triggerChild.props), { onKeyDown: triggerEvent === 'click' || !isLinkTrigger ? handleKeyDown : undefined }));
     const menu = (react_1.default.createElement(ChildrenWrapper, { ref: menuRef, $placement: placement, $alignment: alignment, $isOpen: isOpen, $portalled: portalled, style: portalled ? menuStyle : undefined, onClick: closeOnClick ? handleChildClick : undefined }, menuContent));
     const portalledMenu = isOpen && typeof document !== 'undefined' ? (0, react_dom_1.createPortal)(menu, document.body) : null;
     return (react_1.default.createElement(DropdownWrapper, Object.assign({ "data-component-name": "Dropdown/Dropdown", "data-testid": "dropdown" }, dataAttributes, { className: className, ref: wrapperRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: triggerEvent === 'hover' ? handleClose : undefined, onClick: onClick }),

package/lib/components/Dropdown/DropdownMenu.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import type { ReactNode, JSX } from 'react';
 import type { DropdownMenuItemProps } from '../../components/Dropdown/DropdownMenuItem';
 export type DropdownMenuProps = {
+    id?: string;
     className?: string;
     role?: string;
     footer?: React.ReactNode;

package/lib/components/Dropdown/DropdownMenu.js

@@ -15,7 +15,7 @@ function DropdownMenu(props) {
     if ('items' in props) {
         content = props.items.map((item, idx) => (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, Object.assign({ key: idx }, item), item.content)));
     }
-    return (react_1.default.createElement(DropdownMenuWrapper, { "data-component-name": "Dropdown/DropdownMenu", "data-testid": "dropdown-menu", className: props.className, role: props.role || 'menu' },
+    return (react_1.default.createElement(DropdownMenuWrapper, { "data-component-name": "Dropdown/DropdownMenu", "data-testid": "dropdown-menu", id: props.id, className: props.className, role: props.role || 'menu' },
         content,
         props.footer || null));
 }

package/lib/components/Feedback/Reasons.js

@@ -43,6 +43,7 @@ const hooks_1 = require("../../core/hooks");
 function Reasons({ settings, onChange, className }) {
     const { label, component = 'checkbox', items = [] } = settings;
     const [checkedState, setCheckedState] = React.useState(new Array(items.length).fill(false));
+    const idPrefix = React.useId();
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     if (!items.length) {
@@ -59,8 +60,8 @@ function Reasons({ settings, onChange, className }) {
         React.createElement(Label, null, label ||
             translate('feedback.settings.reasons.label', 'Which statement describes your thoughts about this page?')),
         items.map((reason, idx) => (React.createElement(OptionWrapper, { key: reason },
-            React.createElement("input", { type: component, value: reason, checked: checkedState[idx], name: "reasons", onChange: () => handleOptionChange(idx) }),
-            React.createElement("label", { "data-translation-key": `feedback.settings.reasons.items.${idx + 1}`, id: reason, onClick: () => handleOptionChange(idx) }, translate(`feedback.settings.reasons.items.${idx + 1}`, reason)))))));
+            React.createElement("input", { id: `${idPrefix}-${idx}`, type: component, value: reason, checked: checkedState[idx], name: "reasons", onChange: () => handleOptionChange(idx) }),
+            React.createElement("label", { "data-translation-key": `feedback.settings.reasons.items.${idx + 1}`, htmlFor: `${idPrefix}-${idx}` }, translate(`feedback.settings.reasons.items.${idx + 1}`, reason)))))));
 }
 const ReasonsWrapper = styled_components_1.default.div `
   font-family: var(--feedback-font-family);

package/lib/components/Filter/FilterCheckboxes.js

@@ -22,22 +22,41 @@ function FilterCheckboxes({ filter, filterValuesCasing, showCounter = true, }) {
         react_1.default.createElement(FilterTitle_1.FilterTitle, { "data-translation-key": filter.titleTranslationKey }, translate(filter.titleTranslationKey, filter.title)),
         react_1.default.createElement(FilterOptions_1.FilterOptions, null, (filter.filteredOptions || filter.options).map(({ value, count }) => {
             const id = 'filter--' + filter.property + '--' + value;
-            return (react_1.default.createElement(FilterCheckboxOption, { key: id, role: "link", onClick: () => {
-                    filter.toggleOption(value);
-                    telemetry.sendFilterCheckboxToggledMessage([
-                        (0, utils_1.getBaseDataAttributes)('filterId', 'checkbox'),
-                    ]);
-                } },
-                react_1.default.createElement(CheckboxIcon_1.CheckboxIcon, { checked: filter.selectedOptions instanceof Set
-                        ? filter.selectedOptions.has(value) ||
-                            filter.selectedOptions.has(value === null || value === void 0 ? void 0 : value.toLowerCase())
-                        : false }),
-                react_1.default.createElement(FilterOptionLabel_1.FilterOptionLabel, { "data-translation-key": value }, (0, utils_1.changeTextCasing)(translate(value), filterValuesCasing)),
+            const checked = filter.selectedOptions instanceof Set
+                ? filter.selectedOptions.has(value) ||
+                    filter.selectedOptions.has(value === null || value === void 0 ? void 0 : value.toLowerCase())
+                : false;
+            return (react_1.default.createElement(FilterCheckboxOption, { key: id },
+                react_1.default.createElement(CheckboxIcon_1.CheckboxIcon, { checked: checked }),
+                react_1.default.createElement(FilterOptionLabel_1.FilterOptionLabel, { "data-translation-key": value },
+                    react_1.default.createElement(FilterCheckboxInput, { checked: checked, onChange: () => {
+                            filter.toggleOption(value);
+                            telemetry.sendFilterCheckboxToggledMessage([
+                                (0, utils_1.getBaseDataAttributes)('filterId', 'checkbox'),
+                            ]);
+                        } }),
+                    (0, utils_1.changeTextCasing)(translate(value), filterValuesCasing)),
                 showCounter && react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, count)));
         }))));
 }
 const FilterCheckboxOption = (0, styled_components_1.default)(FilterOption_1.FilterOption) `
   padding-left: var(--filter-option-checkbox-padding-left);
+
+  &:has(input:focus-visible) {
+    outline: 1px solid var(--button-border-color-focused);
+    outline-offset: -1px;
+  }
+`;
+const FilterCheckboxInput = styled_components_1.default.input.attrs({ type: 'checkbox' }) `
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
 `;
 const FilterCheckboxesWrapper = styled_components_1.default.div `
   display: flex;

package/lib/components/Image/Image.js

@@ -43,6 +43,7 @@ const Button_1 = require("../../components/Button/Button");
 function Image(props) {
     const { src, srcSet, images: galleryImages, alt, className, width, height, border, caption, framed, style, withLightbox, lightboxStyle, } = props;
     const lightboxContainerRef = (0, react_1.useRef)(null);
+    const lightboxTriggerRef = (0, react_1.useRef)(null);
     const [lightboxImage, setLightboxImage] = (0, react_1.useState)(undefined);
     const parsedSourceSetMap = (0, react_1.useMemo)(() => {
         return srcSet ? (0, utils_1.parseSrcSet)(srcSet) : new Map();
@@ -53,28 +54,47 @@ function Image(props) {
             setLightboxImage(undefined);
         }
     }, []);
-    const handleImageClick = (0, react_1.useCallback)((src) => {
+    const handleImageClick = (0, react_1.useCallback)((src, trigger) => {
         if (!withLightbox || lightboxImage) {
             return;
         }
+        lightboxTriggerRef.current = trigger;
         setLightboxImage(src);
     }, [withLightbox, lightboxImage]);
+    const getLightboxTriggerProps = (imageSrc) => withLightbox
+        ? {
+            role: 'button',
+            tabIndex: 0,
+            'aria-label': alt ? undefined : 'Open image',
+            onClick: (e) => handleImageClick(imageSrc, e.currentTarget),
+            onKeyDown: (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    handleImageClick(imageSrc, e.currentTarget);
+                }
+            },
+        }
+        : {};
     const handleCloseLightbox = (0, react_1.useCallback)(() => {
         setLightboxImage(undefined);
     }, []);
     (0, hooks_1.useModalScrollLock)(!!lightboxImage);
     (0, react_1.useEffect)(() => {
-        var _a;
+        var _a, _b;
         if (lightboxImage) {
             (_a = lightboxContainerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
+        else {
+            (_b = lightboxTriggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+            lightboxTriggerRef.current = null;
+        }
     }, [lightboxImage]);
     const combinedStyles = Object.assign(Object.assign(Object.assign({}, (withLightbox && { cursor: 'pointer' })), (border && { border })), (typeof style === 'string' ? (0, utils_1.parseStyleString)(style) : style));
     const lightboxOverlayStyles = typeof lightboxStyle === 'string' ? (0, utils_1.parseStyleString)(lightboxStyle) : lightboxStyle;
-    const images = src ? (react_1.default.createElement("img", { src: src, alt: alt, className: className, width: width, height: height, style: combinedStyles, onClick: () => handleImageClick(src) })) : (Array.from(parsedSourceSetMap).map(([key, value]) => (react_1.default.createElement(ColorModeAwareImage, { key: key, $colorMode: key, src: value, alt: alt, className: className, width: width, height: height, $withLightbox: withLightbox, style: combinedStyles, onClick: () => handleImageClick(value) }))));
+    const images = src ? (react_1.default.createElement("img", Object.assign({ src: src, alt: alt, className: className, width: width, height: height, style: combinedStyles }, getLightboxTriggerProps(src)))) : (Array.from(parsedSourceSetMap).map(([key, value]) => (react_1.default.createElement(ColorModeAwareImage, Object.assign({ key: key, $colorMode: key, src: value, alt: alt, className: className, width: width, height: height, $withLightbox: withLightbox, style: combinedStyles }, getLightboxTriggerProps(value))))));
     const hasGallery = Array.isArray(galleryImages) && galleryImages.length > 0;
     const visibleGalleryImages = hasGallery ? galleryImages.slice(0, 3) : [];
-    const gallery = hasGallery ? (react_1.default.createElement(GalleryRow, null, visibleGalleryImages.map((galleryImageSrc, index) => (react_1.default.createElement("img", { key: `${galleryImageSrc}-${index}`, src: galleryImageSrc, alt: alt, style: withLightbox ? { cursor: 'pointer' } : undefined, onClick: () => handleImageClick(galleryImageSrc) }))))) : null;
+    const gallery = hasGallery ? (react_1.default.createElement(GalleryRow, null, visibleGalleryImages.map((galleryImageSrc, index) => (react_1.default.createElement("img", Object.assign({ key: `${galleryImageSrc}-${index}`, src: galleryImageSrc, alt: alt, style: withLightbox ? { cursor: 'pointer' } : undefined }, getLightboxTriggerProps(galleryImageSrc))))))) : null;
     const hasCaption = Boolean(caption);
     const hasWrapper = Boolean(framed || hasCaption || hasGallery);
     const wrapperContent = hasGallery ? gallery : images;

package/lib/components/Markdown/Markdown.js

@@ -82,7 +82,7 @@ exports.Markdown = styled_components_1.default.main
   ${links_1.markdownLinksCss}
 
   a[name], [id] {
-    scroll-margin-top: calc(var(--navbar-height) + var(--banner-height));
+    scroll-margin-top: var(--navbar-offset);
   }
 
   img,
@@ -95,7 +95,7 @@ exports.Markdown = styled_components_1.default.main
     font-family: var(--heading-font-family);
     position: relative;
 
-    scroll-margin-top: calc(var(--navbar-height) + var(--banner-height));
+    scroll-margin-top: var(--navbar-offset);
     ${(0, heading_anchor_1.headingAnchorCss)(constants_1.ANCHOR_CLASS)};
 
     h1,
@@ -306,6 +306,7 @@ exports.Markdown = styled_components_1.default.main
       font-size: inherit;
       font-family: inherit;
       border: none;
+      padding: 0;
     }
   }
 

package/lib/components/Menu/Menu.js

@@ -7,12 +7,16 @@ exports.Menu = Menu;
 const styled_components_1 = __importDefault(require("styled-components"));
 const react_1 = __importDefault(require("react"));
 const MenuItem_1 = require("../../components/Menu/MenuItem");
+const MenuSelect_1 = require("../../components/Menu/MenuSelect");
 const constants_1 = require("../../core/constants");
 const utils_1 = require("../../core/utils");
 function Menu({ depth = 0, items, className, isMobile, onDrilldownOpen, }) {
     const activeItem = items.find(({ active }) => active);
     return (react_1.default.createElement(MenuWrapper, { className: className, "data-component-name": "Menu/Menu" }, items.map((item, index) => {
         var _a;
+        if ((0, utils_1.getMenuItemType)(item) === constants_1.MenuItemType.Select) {
+            return react_1.default.createElement(MenuSelect_1.MenuSelect, { item: item, key: `${item.label}-${index}` });
+        }
         return (react_1.default.createElement(MenuItem_1.MenuItem, { item: item, key: `${item.link || item.label}-${index}`, activeItem: activeItem, isMobile: isMobile, depth: depth, onClick: () => {
                 if ((0, utils_1.getMenuItemType)(item) === constants_1.MenuItemType.DrillDown) {
                     onDrilldownOpen === null || onDrilldownOpen === void 0 ? void 0 : onDrilldownOpen({ previousLink: activeItem === null || activeItem === void 0 ? void 0 : activeItem.link, item });

package/lib/components/Menu/MenuSelect.d.ts

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+import type { ItemState } from '../../core/types';
+export type MenuSelectProps = {
+    item: ItemState;
+    className?: string;
+};
+export declare function MenuSelect({ item, className }: MenuSelectProps): JSX.Element;

package/lib/components/Menu/MenuSelect.js

@@ -0,0 +1,129 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuSelect = MenuSelect;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const hooks_1 = require("../../core/hooks");
+const Dropdown_1 = require("../../components/Dropdown/Dropdown");
+const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
+const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
+const GenericIcon_1 = require("../../icons/GenericIcon/GenericIcon");
+const LaunchIcon_1 = require("../../icons/LaunchIcon/LaunchIcon");
+const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon");
+const CheckmarkIcon_1 = require("../../icons/CheckmarkIcon/CheckmarkIcon");
+function MenuSelect({ item, className }) {
+    const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const telemetry = useTelemetry();
+    return (react_1.default.createElement(MenuSelectWrapper, { "data-component-name": "Menu/MenuSelect", className: className, role: "listitem" },
+        react_1.default.createElement(MenuSelectDropdown, { alignment: "start", trigger: react_1.default.createElement(MenuSelectTrigger, { type: "button" },
+                react_1.default.createElement(MenuSelectLabel, null, translate(item.labelTranslationKey, item.label)),
+                react_1.default.createElement(MenuSelectChevron, { size: "var(--menu-select-icon-size)", color: "--menu-select-icon-color" })) },
+            react_1.default.createElement(MenuSelectMenu, null, item.items.map((option, index) => {
+                const key = `${option.link || option.label}-${index}`;
+                const checkmark = option.active ? (react_1.default.createElement(MenuSelectCheckmark, { size: "var(--menu-select-option-checkmark-size)" })) : null;
+                const content = (react_1.default.createElement(MenuSelectOptionContent, { $active: option.active },
+                    option.icon || option.srcSet ? (react_1.default.createElement(MenuSelectOptionIcon, { icon: option.icon, srcSet: option.srcSet })) : null,
+                    translate(option.labelTranslationKey, option.label),
+                    option.external ? (react_1.default.createElement(LaunchIcon_1.LaunchIcon, { size: "var(--menu-select-option-external-icon-size)" })) : null));
+                if (!option.link) {
+                    return (react_1.default.createElement(MenuSelectOption, { key: key, active: option.active, prefix: checkmark, dataAttributes: { 'aria-disabled': 'true' } }, content));
+                }
+                return (react_1.default.createElement(MenuSelectOption, { key: key, to: option.link, external: option.external, target: option.target === '_blank' ? '_blank' : undefined, active: option.active, "aria-current": option.active ? 'page' : undefined, prefix: checkmark, onAction: () => telemetry.sendSidebarItemClickedMessage([
+                        Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('sidebarItem', 'sidebar')), { label: option.label, type: 'link' }),
+                    ]) }, content));
+            })))));
+}
+const MenuSelectWrapper = styled_components_1.default.div `
+  margin: var(--menu-select-margin);
+`;
+const MenuSelectDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `
+  --dropdown-menu-padding-top: var(--menu-select-menu-offset);
+  --dropdown-menu-padding: var(--menu-select-menu-padding);
+  --dropdown-menu-border-radius: var(--menu-select-menu-border-radius);
+  --dropdown-menu-item-gap: var(--menu-select-option-gap);
+  --dropdown-menu-item-border-radius: var(--menu-select-option-border-radius);
+  --dropdown-menu-item-bg-color-active: var(--menu-select-option-bg-color-active);
+  --dropdown-menu-item-color-active: var(--menu-select-option-text-color-active);
+
+  width: 100%;
+
+  > * {
+    min-width: 100%;
+  }
+`;
+const MenuSelectChevron = (0, styled_components_1.default)(ChevronDownIcon_1.ChevronDownIcon) `
+  transition: var(--menu-select-transition);
+`;
+const MenuSelectTrigger = styled_components_1.default.button `
+  display: flex;
+  align-items: center;
+  gap: var(--menu-select-gap);
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--menu-select-height);
+  padding: 0 var(--menu-select-padding-horizontal);
+  border: var(--menu-select-border);
+  border-radius: var(--menu-select-border-radius);
+  background-color: var(--menu-select-bg-color);
+  color: var(--menu-select-text-color);
+  font-family: inherit;
+  font-size: var(--menu-select-font-size);
+  line-height: var(--menu-select-line-height);
+  text-align: left;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 1px solid var(--menu-select-border-color-focused);
+  }
+
+  &[aria-expanded='true'] ${MenuSelectChevron} {
+    transform: rotate(180deg);
+  }
+`;
+const MenuSelectLabel = styled_components_1.default.span `
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+const MenuSelectMenu = (0, styled_components_1.default)(DropdownMenu_1.DropdownMenu) `
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+`;
+const MenuSelectOption = (0, styled_components_1.default)(DropdownMenuItem_1.DropdownMenuItem) `
+  position: relative;
+  box-sizing: border-box;
+  padding: var(--menu-select-option-padding);
+
+  &[aria-disabled='true'] {
+    cursor: default;
+    pointer-events: none;
+  }
+`;
+const MenuSelectCheckmark = (0, styled_components_1.default)(CheckmarkIcon_1.CheckmarkIcon) `
+  position: absolute;
+  top: 50%;
+  left: var(--menu-select-option-checkmark-offset);
+  transform: translateY(-50%);
+`;
+const MenuSelectOptionContent = styled_components_1.default.span `
+  display: inline-flex;
+  align-items: center;
+  gap: var(--menu-select-option-content-gap);
+  font-weight: ${({ $active }) => $active
+    ? 'var(--menu-select-option-font-weight-active)'
+    : 'var(--menu-select-option-font-weight)'};
+`;
+const MenuSelectOptionIcon = (0, styled_components_1.default)(GenericIcon_1.GenericIcon) `
+  --icon-width: var(--menu-select-option-icon-size);
+  --icon-height: var(--menu-select-option-icon-size);
+  flex-shrink: 0;
+`;
+//# sourceMappingURL=MenuSelect.js.map

package/lib/components/Menu/variables.js

@@ -104,6 +104,45 @@ exports.menu = (0, styled_components_1.css) `
   --menu-back-button-gap: var(--spacing-xs);
   --menu-back-button-icon: none;
 
+  /**
+   * @tokens Menu select
+   */
+  --menu-select-margin-top: 0;
+  --menu-select-margin-bottom: var(--spacing-xs);
+  --menu-select-margin-horizontal: var(--menu-item-label-margin-horizontal);
+  --menu-select-margin: var(--menu-select-margin-top) var(--menu-select-margin-horizontal) var(--menu-select-margin-bottom); // @presenter Spacing
+  --menu-select-height: 32px; // @presenter Spacing
+  --menu-select-padding-horizontal: calc(var(--spacing-sm) - var(--border-width)); // @presenter Spacing
+  --menu-select-gap: var(--spacing-xxs); // @presenter Spacing
+  --menu-select-font-size: var(--font-size-base); // @presenter FontSize
+  --menu-select-line-height: var(--line-height-base); // @presenter LineHeight
+  --menu-select-text-color: var(--input-content-color-active); // @presenter Color
+  --menu-select-bg-color: var(--input-bg-color); // @presenter Color
+  --menu-select-border: var(--input-border); // @presenter Border
+  --menu-select-border-color-focused: var(--input-border-color-focused); // @presenter Color
+  --menu-select-border-radius: var(--input-border-radius); // @presenter BorderRadius
+  --menu-select-icon-size: 16px;
+  --menu-select-icon-color: var(--icon-color-secondary); // @presenter Color
+  --menu-select-transition: transform 150ms ease-in-out;
+  --menu-select-menu-offset: var(--spacing-xs); // @presenter Spacing
+  --menu-select-menu-padding: calc(var(--dropdown-menu-padding) - var(--border-width)); // @presenter Spacing
+  --menu-select-menu-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --menu-select-option-gap: calc(var(--spacing-unit) / 2); // @presenter Spacing
+  --menu-select-option-content-gap: var(--spacing-xs); // @presenter Spacing
+  --menu-select-option-padding-vertical: var(--dropdown-menu-item-padding-vertical);
+  --menu-select-option-padding-left: var(--spacing-md);
+  --menu-select-option-padding-right: var(--spacing-sm);
+  --menu-select-option-padding: var(--menu-select-option-padding-vertical) var(--menu-select-option-padding-right) var(--menu-select-option-padding-vertical) var(--menu-select-option-padding-left); // @presenter Spacing
+  --menu-select-option-border-radius: var(--border-radius-md); // @presenter BorderRadius
+  --menu-select-option-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --menu-select-option-font-weight-active: var(--font-weight-medium); // @presenter FontWeight
+  --menu-select-option-text-color-active: var(--text-color-primary); // @presenter Color
+  --menu-select-option-bg-color-active: transparent; // @presenter Color
+  --menu-select-option-icon-size: var(--menu-item-icon-size);
+  --menu-select-option-external-icon-size: var(--menu-item-external-icon-size);
+  --menu-select-option-checkmark-size: 14px;
+  --menu-select-option-checkmark-offset: calc((var(--menu-select-option-padding-left) - var(--menu-select-option-checkmark-size)) / 2);
+
   /**
    * @tokens Menu items
    */
@@ -134,18 +173,18 @@ exports.mobileMenu = (0, styled_components_1.css) `
     * @tokens Mobile Menu
     * */
   /* Fallback for older browsers. dvh accounts for dynamic UI elements like mobile address bars */
-  --menu-mobile-height: calc(100vh - var(--navbar-height) - var(--banner-height));
-  --menu-mobile-height: calc(100dvh - var(--navbar-height) - var(--banner-height));
+  --menu-mobile-height: calc(100vh - var(--navbar-offset));
+  --menu-mobile-height: calc(100dvh - var(--navbar-offset));
   --menu-mobile-width: 100%;
   --menu-mobile-z-index: var(--z-index-raised);
   --menu-mobile-left: 0;
-  --menu-mobile-top: calc(var(--navbar-height) + var(--banner-height));
+  --menu-mobile-top: var(--navbar-offset);
   --menu-mobile-transition: 0.5s;
   --menu-mobile-bg: var(--bg-color); // @presenter Color
   --menu-mobile-margin: var(--menu-mobile-items-margin-top) var(--menu-mobile-margin-horizontal) 0 var(--menu-mobile-margin-horizontal);
   --menu-mobile-line-height: var(--line-height-base); // @presenter LineHeight
   --menu-mobile-padding-top: var(--spacing-sm); // @presenter Spacing
-  --menu-mobile-margin-horizontal: var(--spacing-xs); // @presenter Spacing
+  --menu-mobile-margin-horizontal: 0; // @presenter Spacing
   --menu-mobile-items-margin-top: var(--spacing-xxs); // @presenter Spacing
 
   --menu-mobile-profile-bg-color: var(--bg-color); // @presenter Color