@redocly/theme 0.56.0-rc.2 → 0.56.0

package/lib/components/CodeBlock/CodeBlockDropdown.d.ts

@@ -0,0 +1,3 @@
+import { type JSX } from 'react';
+import type { CodeBlockDropdownItems } from '../../components/CodeBlock/CodeBlock';
+export declare function CodeBlockDropdown({ items, onChange, value }: CodeBlockDropdownItems): JSX.Element;

package/lib/components/CodeBlock/CodeBlockDropdown.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeBlockDropdown = CodeBlockDropdown;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Dropdown_1 = require("../../components/Dropdown/Dropdown");
+const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
+const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
+const Button_1 = require("../../components/Button/Button");
+const ChevronSortIcon_1 = require("../../icons/ChevronSortIcon/ChevronSortIcon");
+const NoneIcon_1 = require("../../icons/NoneIcon/NoneIcon");
+const utils_1 = require("../../core/utils");
+function CodeBlockDropdown({ items, onChange, value }) {
+    const activeItem = items.find((item) => item.name === value) || items[0];
+    const icon = (activeItem === null || activeItem === void 0 ? void 0 : activeItem.lang) ? (0, utils_1.getFileIconByLanguage)(activeItem === null || activeItem === void 0 ? void 0 : activeItem.lang) : null;
+    return (react_1.default.createElement(StyledDropdown, { alignment: "end", trigger: react_1.default.createElement(Button_1.Button, { icon: react_1.default.createElement(ChevronSortIcon_1.ChevronSortIcon, null), iconPosition: "right", variant: "text", size: "small" },
+            icon,
+            activeItem.name) },
+        react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, items.map((item) => {
+            const icon = (0, utils_1.getFileIconByLanguage)(item.lang || '');
+            return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: item.lang, onAction: () => onChange(item.name), active: item.name === activeItem.name, prefix: item.lang ? icon : react_1.default.createElement(NoneIcon_1.NoneIcon, { size: "var(--icon-size)" }) }, item.name));
+        }))));
+}
+const StyledDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `
+  margin-left: auto;
+  --icon-size: 18px;
+  --button-color: var(--text-color-secondary);
+  button.button-size-small {
+    --button-icon-size: 18px;
+  }
+`;
+//# sourceMappingURL=CodeBlockDropdown.js.map

package/lib/components/CodeBlock/CodeBlockTabs.d.ts

@@ -1,6 +1,6 @@
 import type { JSX } from 'react';
-import type { FileTabs } from '../../components/CodeBlock/CodeBlock';
+import type { CodeBlockTabItems } from '../../components/CodeBlock/CodeBlock';
 export type CodeBlockTabsProps = {
-    tabs: FileTabs;
+    tabs: CodeBlockTabItems;
 };
 export declare function CodeBlockTabs({ tabs }: CodeBlockTabsProps): JSX.Element;

package/lib/components/CodeBlock/CodeBlockTabs.js

@@ -28,9 +28,9 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const Button_1 = require("../../components/Button/Button");
-const DocumentBlankIcon_1 = require("../../icons/DocumentBlankIcon/DocumentBlankIcon");
 const ChevronLeftIcon_1 = require("../../icons/ChevronLeftIcon/ChevronLeftIcon");
 const ChevronRightIcon_1 = require("../../icons/ChevronRightIcon/ChevronRightIcon");
+const get_file_icon_1 = require("../../core/utils/get-file-icon");
 function CodeBlockTabs({ tabs }) {
     const containerRef = (0, react_1.useRef)(null);
     const tabRefs = (0, react_1.useRef)([]);
@@ -40,18 +40,27 @@ function CodeBlockTabs({ tabs }) {
         tabRefs,
     });
     (0, react_1.useEffect)(() => {
-        const activeTab = tabRefs.current.find((tab) => (tab === null || tab === void 0 ? void 0 : tab.dataset.name) === tabs.activeTabName);
+        const activeTab = tabRefs.current.find((tab) => (tab === null || tab === void 0 ? void 0 : tab.dataset.name) === tabs.value);
         if (activeTab) {
             activeTab.scrollIntoView({ block: 'nearest', inline: 'center' });
         }
-    }, [tabs.activeTabName]);
+    }, [tabs.value]);
     return (react_1.default.createElement(CodeBlockTabsWrapper, { ref: containerRef, "data-component-name": "CodeBlock/CodeBlockTabs" },
         react_1.default.createElement(ShadowWrapper, null,
-            react_1.default.createElement(Tabs, null, tabs.files.map(({ name }, i) => (react_1.default.createElement(Tab, { ref: (el) => {
-                    tabRefs.current[i] = el;
-                }, "data-name": name, active: name === tabs.activeTabName, key: name, onClick: () => tabs.handleTabSwitch(name) },
-                react_1.default.createElement(DocumentBlankIcon_1.DocumentBlankIcon, null),
-                name))))),
+            react_1.default.createElement(Tabs, null, tabs.items.map(({ name, lang }, i) => {
+                var _a;
+                const ext = (_a = name.match(/\.([^.]+)$/)) === null || _a === void 0 ? void 0 : _a[1];
+                const fileIcon = lang
+                    ? (0, get_file_icon_1.getFileIconByLanguage)(lang)
+                    : ext
+                        ? (0, get_file_icon_1.getFileIconByExt)(ext)
+                        : null;
+                return (react_1.default.createElement(Tab, { ref: (el) => {
+                        tabRefs.current[i] = el;
+                    }, "data-name": name, active: name === tabs.value, key: name + i, onClick: () => tabs.onChange(name) },
+                    fileIcon,
+                    name));
+            }))),
         showControls && (react_1.default.createElement(Controls, null,
             react_1.default.createElement(ControlButton, { size: "small", onClick: handlePrevTab, "data-testid": "prev-button" },
                 react_1.default.createElement(ChevronLeftIcon_1.ChevronLeftIcon, null)),
@@ -61,7 +70,6 @@ function CodeBlockTabs({ tabs }) {
 const CodeBlockTabsWrapper = styled_components_1.default.div `
   display: flex;
   overflow: hidden;
-  padding: var(--spacing-xxs) 0;
 `;
 const Controls = styled_components_1.default.div `
   display: flex;
@@ -98,6 +106,7 @@ const Tabs = styled_components_1.default.div `
   }
 `;
 const Tab = styled_components_1.default.button `
+  --icon-size: 18px;
   display: inline-flex;
   align-items: center;
 

package/lib/components/CodeBlock/variables.js

@@ -75,7 +75,7 @@ exports.code = (0, styled_components_1.css) `
   --code-block-controls-border: 1px solid var(--border-color-secondary); // @presenter Border
   --code-block-icon-controls-bg-color: var(--code-block-controls-bg-color);
   --code-block-text-controls-bg-color: var(--code-block-controls-bg-color);
-  --code-block-controls-padding: var(--spacing-unit) var(--spacing-unit) var(--spacing-unit) var(--spacing-base);
+  --code-block-controls-padding: var(--spacing-xxs);
   --code-block-controls-height: 20px;
   --code-block-controls-width: 20px;
 

package/lib/components/Dropdown/Dropdown.js

@@ -78,6 +78,7 @@ const DropdownWrapper = styled_components_1.default.div `
   text-decoration: none;
 `;
 const ChildrenWrapper = styled_components_1.default.div `
+  padding-top: var(--dropdown-menu-margin-top);
   position: absolute;
   top: ${({ placement }) => (placement === 'top' ? 'auto' : '100%')};
   bottom: ${({ placement }) => (placement === 'top' ? '100%' : 'auto')};

package/lib/components/Dropdown/DropdownMenu.js

@@ -25,6 +25,10 @@ const DropdownMenuWrapper = styled_components_1.default.ul `
   line-height: var(--dropdown-menu-line-height);
   color: var(--dropdown-menu-text-color);
 
+  /* Make sure the spacing is not overriden by the markdown list styles */
+  --md-list-margin: 0;
+  --md-list-left-padding: var(--dropdown-menu-padding);
+
   margin: 0;
   min-width: var(--dropdown-menu-min-width);
   max-width: var(--dropdown-menu-max-width);

package/lib/components/Dropdown/variables.js

@@ -11,6 +11,7 @@ exports.dropdown = (0, styled_components_1.css) `
   --dropdown-menu-line-height: var(--line-height-base); // @presenter LineHeight
   --dropdown-menu-text-color: var(--text-color-secondary); // @presenter Color
 
+  --dropdown-menu-margin-top: var(--spacing-xxs);
   --dropdown-menu-min-width: 100px;
   --dropdown-menu-max-width: 424px;
   --dropdown-menu-max-height: 300px;

package/lib/components/Feedback/Feedback.js

@@ -64,7 +64,7 @@ function Feedback(props) {
         return (React.createElement(FeedbackWrapper, { "data-component-name": "Feedback/Feedback" },
             React.createElement(FeedbackComponent, { settings: settings, onSubmit: (values) => {
                     submitFeedback({ type, values, path });
-                    telemetry.send({ type: 'feedback.sent', payload: { feedback_type: type } });
+                    telemetry.send({ type: 'feedback.sent', payload: { feedbackType: type } });
                 } })));
     };
     return React.createElement(React.Fragment, { key: pathname }, renderFeedbackComponent());

package/lib/components/Filter/FilterCheckboxes.js

@@ -20,13 +20,16 @@ function FilterCheckboxes({ filter, filterValuesCasing, showCounter = true, }) {
     const telemetry = useTelemetry();
     return (react_1.default.createElement(FilterCheckboxesWrapper, { "data-component-name": "Filter/FilterCheckboxes" },
         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.options.map(({ value, count }) => {
+        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.send({ type: 'filter_checkbox.toggled', payload: { id } });
                 } },
-                react_1.default.createElement(CheckboxIcon_1.CheckboxIcon, { checked: filter.selectedOptions.has(value === null || value === void 0 ? void 0 : value.toLowerCase()) }),
+                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)),
                 showCounter && react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, count)));
         }))));

package/lib/components/Footer/FooterItem.js

@@ -9,10 +9,9 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const LaunchIcon_1 = require("../../icons/LaunchIcon/LaunchIcon");
 const Link_1 = require("../../components/Link/Link");
-const Image_1 = require("../../components/Image/Image");
 const utils_1 = require("../../core/utils");
+const GenericIcon_1 = require("../../icons/GenericIcon/GenericIcon");
 function FooterItem({ item, iconsOnly, className }) {
-    var _a, _b;
     const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
     const { translate } = useTranslate();
@@ -23,9 +22,7 @@ function FooterItem({ item, iconsOnly, className }) {
     const iconWithoutLabel = Boolean(item.label === item.link && hasIcon);
     return (react_1.default.createElement(FooterItemWrapper, { className: className, "data-component-name": "Footer/FooterItem", iconsOnly: iconsOnly, item: item }, item.type === 'separator' ? (react_1.default.createElement(FooterSeparator, { "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label))) : (react_1.default.createElement(FooterLink, { to: item.link, external: item.external, target: item.target, "data-testid": item.label, onClick: () => telemetry.send({ type: 'footer_item.clicked' }), "data-translation-key": item.labelTranslationKey },
         hasIcon ? (react_1.default.createElement(FooterLinkIcon, { iconsOnly: iconsOnly },
-            react_1.default.createElement(Image_1.Image, { src: item.icon, srcSet: item.srcSet, alt: item.label && item.label !== item.link
-                    ? `${item.label} icon`
-                    : `${(_b = (_a = (item.icon || item.srcSet)) === null || _a === void 0 ? void 0 : _a.split('/').pop()) === null || _b === void 0 ? void 0 : _b.split('.')[0]} icon` }))) : null,
+            react_1.default.createElement(GenericIcon_1.GenericIcon, { icon: item.icon, srcSet: item.srcSet }))) : null,
         !iconWithoutLabel ? translate(item.labelTranslationKey, item.label) : null,
         item.external ? react_1.default.createElement(LaunchIcon_1.LaunchIcon, { size: "10px" }) : null))));
 }
@@ -36,9 +33,9 @@ const FooterSeparator = styled_components_1.default.div `
   opacity: var(--footer-separator-item-opacity);
 `;
 const FooterLinkIcon = styled_components_1.default.div `
+  --icon-width: var(--footer-item-icon-width);
+  --icon-height: var(--footer-item-icon-height);
   display: inline-flex;
-  width: var(--footer-item-icon-width);
-  height: var(--footer-item-icon-height);
   margin-right: ${({ iconsOnly }) => (iconsOnly ? '0' : 'var(--footer-item-icon-margin-right)')};
   vertical-align: middle;
   border: 1px solid var(--footer-item-icon-border-color);

package/lib/components/Footer/variables.js

@@ -28,8 +28,8 @@ exports.footer = (0, styled_components_1.css) `
   --footer-link-padding-vertical: var(--spacing-xs); // @presenter Spacing
   --footer-link-padding-horizontal: 0;
 
-  --footer-item-icon-width: var(--spacing-lg); // @presenter Spacing
-  --footer-item-icon-height: var(--spacing-lg); // @presenter Spacing
+  --footer-item-icon-width: var(--spacing-base); // @presenter Spacing
+  --footer-item-icon-height: var(--spacing-base); // @presenter Spacing
   --footer-item-icon-margin-right: var(--spacing-sm); // @presenter Spacing
   --footer-item-icon-border-color: var(--border-color-primary); // @presenter Color
   --footer-item-icon-border-radius: 12px; // @presenter BorderRadius

package/lib/components/Image/Image.js

@@ -30,6 +30,7 @@ exports.Image = Image;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../core/utils");
+const hooks_1 = require("../../core/hooks");
 function Image(props) {
     const { src, srcSet, alt, className, width, height, border, style, withLightbox, lightboxStyle } = props;
     const lightboxContainerRef = (0, react_1.useRef)(null);
@@ -52,6 +53,7 @@ function Image(props) {
     const handleCloseLightbox = (0, react_1.useCallback)(() => {
         setLightboxImage(undefined);
     }, []);
+    (0, hooks_1.useModalScrollLock)(!!lightboxImage);
     (0, react_1.useEffect)(() => {
         var _a;
         if (lightboxImage) {

package/lib/components/Markdown/Markdown.js

@@ -25,7 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Markdown = void 0;
 const styled_components_1 = __importStar(require("styled-components"));
-const theme_helpers_1 = require("../../core/utils/theme-helpers");
+const utils_1 = require("../../core/utils");
 const baseTable_1 = require("../../components/Markdown/styles/baseTable");
 const links_1 = require("../../components/Markdown/styles/links");
 const headingAnchor_1 = require("../../components/Markdown/styles/headingAnchor");
@@ -130,37 +130,37 @@ exports.Markdown = styled_components_1.default.main.attrs(({ className }) => ({
   }
 
   h1.md {
-    ${(0, theme_helpers_1.typography)('h1')};
+    ${(0, utils_1.typography)('h1')};
     margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;
     ${(0, headingAnchor_1.headingAnchorCss)()};
   }
 
   h2.md {
-    ${(0, theme_helpers_1.typography)('h2')};
+    ${(0, utils_1.typography)('h2')};
     margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;
     ${(0, headingAnchor_1.headingAnchorCss)()};
   }
 
   h3.md {
-    ${(0, theme_helpers_1.typography)('h3')};
+    ${(0, utils_1.typography)('h3')};
     margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;
     ${(0, headingAnchor_1.headingAnchorCss)()};
   }
 
   h4.md {
-    ${(0, theme_helpers_1.typography)('h4')};
+    ${(0, utils_1.typography)('h4')};
     margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;
     ${(0, headingAnchor_1.headingAnchorCss)()};
   }
 
   h5.md {
-    ${(0, theme_helpers_1.typography)('h5')};
+    ${(0, utils_1.typography)('h5')};
     margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;
     ${(0, headingAnchor_1.headingAnchorCss)()};
   }
 
   h6.md {
-    ${(0, theme_helpers_1.typography)('h6')};
+    ${(0, utils_1.typography)('h6')};
     margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;
     ${(0, headingAnchor_1.headingAnchorCss)()};
   }
@@ -257,8 +257,8 @@ exports.Markdown = styled_components_1.default.main.attrs(({ className }) => ({
     }
   }
 
-  ul,
-  ol {
+  ul.md,
+  ol.md {
     padding-left: var(--md-list-left-padding);
     margin: var(--md-list-margin);
 

package/lib/components/Markdown/styles/headingAnchor.js

@@ -16,7 +16,6 @@ function headingAnchorCss(className = 'anchor') {
       padding-left: 4px;
     }
 
-    svg,
     .${className} svg {
       fill: var(--heading-anchor-color);
       visibility: hidden;

package/lib/components/Menu/MenuItem.js

@@ -36,6 +36,7 @@ const constants_1 = require("../../core/constants");
 const utils_1 = require("../../core/utils");
 const ArrowRightIcon_1 = require("../../icons/ArrowRightIcon/ArrowRightIcon");
 const Badge_1 = require("../../components/Badge/Badge");
+const GenericIcon_1 = require("../../icons/GenericIcon/GenericIcon");
 function MenuItem(props) {
     var _a;
     const { item, depth, className, onClick } = props;
@@ -75,7 +76,7 @@ function MenuItem(props) {
     const httpColor = item.deprecated ? 'http-deprecated' : item.httpVerb;
     const label = item.label && (react_1.default.createElement(MenuItemLabelWrapper, { active: item.active, deprecated: item.deprecated, depth: depth, withChevron: hasChevron, isSeparator: isSeparator, onClick: handleOnClick, onKeyDown: handleExpandOnEnter, ref: labelRef, role: item.link ? 'none' : 'link', tabIndex: !item.link ? 0 : undefined, "data-testid": "menu-item-label" },
         hasChevron ? react_1.default.createElement(ChevronWrapper, null, chevron) : null,
-        item.icon ? react_1.default.createElement(MenuItemIcon, { src: item.icon }) : null,
+        react_1.default.createElement(MenuItemIcon, { icon: item.icon, srcSet: item.srcSet }),
         react_1.default.createElement(MenuItemLabelTextWrapper, null,
             react_1.default.createElement(MenuItemLabel, null,
                 react_1.default.createElement("span", null, translate(item.labelTranslationKey, item.label)), (_a = item.badges) === null || _a === void 0 ? void 0 :
@@ -240,11 +241,10 @@ const MenuItemSubLabel = styled_components_1.default.div `
   font-size: var(--menu-item-sublabel-font-size);
   font-family: var(--menu-item-sublabel-font-family);
 `;
-const MenuItemIcon = styled_components_1.default.img `
-  width: var(--menu-item-icon-size);
-  height: var(--menu-item-icon-size);
+const MenuItemIcon = (0, styled_components_1.default)(GenericIcon_1.GenericIcon) `
+  --icon-width: var(--menu-item-icon-size);
+  --icon-height: var(--menu-item-icon-size);
   margin: var(--menu-item-icon-margin);
-  border-radius: var(--menu-item-icon-border-radius);
   flex-shrink: 0;
   overflow: hidden;
 `;

package/lib/components/Menu/variables.js

@@ -71,7 +71,7 @@ exports.menu = (0, styled_components_1.css) `
    * @tokens Menu item icons
    */
   --menu-item-icon-size: var(--spacing-base);
-  --menu-item-icon-margin: 0px;
+  --menu-item-icon-margin: 0 var(--spacing-xxs) 0 0;
   --menu-item-icon-border-radius: 100%;
 
   --menu-item-external-icon-size: 10px;
@@ -129,7 +129,9 @@ 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));
+  --menu-mobile-height: calc(100dvh - var(--navbar-height));
   --menu-mobile-width: 100%;
   --menu-mobile-z-index: var(--z-index-raised);
   --menu-mobile-left: 0;

package/lib/components/Navbar/NavbarItem.js

@@ -1,34 +1,11 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavbarItem = NavbarItem;
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importStar(require("styled-components"));
+const styled_components_1 = __importDefault(require("styled-components"));
 const react_router_dom_1 = require("react-router-dom");
 const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
 const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
@@ -37,6 +14,7 @@ const hooks_1 = require("../../core/hooks");
 const LaunchIcon_1 = require("../../icons/LaunchIcon/LaunchIcon");
 const Link_1 = require("../../components/Link/Link");
 const Dropdown_1 = require("../../components/Dropdown/Dropdown");
+const GenericIcon_1 = require("../../icons/GenericIcon/GenericIcon");
 function NavbarItem({ navItem, className }) {
     const { pathname } = (0, react_router_dom_1.useLocation)();
     const { useTranslate, useL10nConfig, useTelemetry } = (0, hooks_1.useThemeHooks)();
@@ -50,7 +28,7 @@ function NavbarItem({ navItem, className }) {
     const isActive = pathname ===
         (0, utils_1.withPathPrefix)((0, utils_1.getPathnameForLocale)(normalizedPath, defaultLocale, currentLocale, locales));
     const itemContent = (react_1.default.createElement(NavbarMenuItem, { as: item.link ? Link_1.Link : undefined, active: isActive, className: className, onClick: () => telemetry.send({ type: 'navbar.menu_item_clicked', payload: { type: item.type } }), external: item.external, target: item.target, to: item.link },
-        react_1.default.createElement(NavbarIcon, { url: item.icon }),
+        react_1.default.createElement(NavbarIcon, { icon: item.icon, srcSet: item.srcSet }),
         react_1.default.createElement(NavbarLabel, { "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label)),
         item.external ? react_1.default.createElement(ExternalLinkIcon, { size: "10px" }) : null));
     if (navItem.items) {
@@ -60,7 +38,7 @@ function NavbarItem({ navItem, className }) {
             if (item.type !== 'link' && item.type !== 'separator')
                 return null;
             return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: `${item.label}_${index}`, to: item.link, separator: item.type === 'separator', separatorLine: item.separatorLine, "data-translation-key": item.labelTranslationKey, external: item.external },
-                react_1.default.createElement(NavbarIcon, { url: item.icon }),
+                react_1.default.createElement(NavbarIcon, { icon: item.icon, srcSet: item.srcSet }),
                 react_1.default.createElement(NavbarLabel, { "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label)),
                 item.external ? react_1.default.createElement(ExternalLinkIcon, { size: "10px" }) : null));
         });
@@ -100,19 +78,10 @@ const NavbarLabel = styled_components_1.default.span `
   cursor: pointer;
   vertical-align: middle;
 `;
-const NavbarIcon = styled_components_1.default.i `
-  ${({ url }) => url &&
-    (0, styled_components_1.css) `
-      background-image: url('${url}');
-      width: var(--navbar-item-icon-width);
-      height: var(--navbar-item-icon-height);
-      display: inline-block;
-      background-size: contain;
-      margin-right: var(--navbar-item-icon-margin-right);
-      vertical-align: middle;
-      background-position: center;
-      background-repeat: no-repeat;
-    `}
+const NavbarIcon = (0, styled_components_1.default)(GenericIcon_1.GenericIcon) `
+  --icon-width: var(--navbar-item-icon-width);
+  --icon-height: var(--navbar-item-icon-height);
+  margin-right: var(--navbar-item-icon-margin-right);
 `;
 const ExternalLinkIcon = (0, styled_components_1.default)(LaunchIcon_1.LaunchIcon) `
   margin-left: 5px;

package/lib/components/Navbar/variables.js

@@ -37,8 +37,8 @@ exports.navbar = (0, styled_components_1.css) `
   --navbar-item-bg-color-hover: var(--bg-color);
   --navbar-item-bottom-border-hover: none;
 
-  --navbar-item-icon-width: 1.5em; // @presenter Spacing
-  --navbar-item-icon-height: 1.5em; // @presenter Spacing
+  --navbar-item-icon-width: 1.25em; // @presenter Spacing
+  --navbar-item-icon-height: 1.25em; // @presenter Spacing
   --navbar-item-icon-margin-right: 0.5em; // @presenter Spacing
 
   --navbar-logo-height: var(--logo-height);

package/lib/components/PageActions/PageActions.d.ts

@@ -0,0 +1,6 @@
+import type { JSX } from 'react';
+type PageActionProps = {
+    pageSlug: string;
+};
+export declare function PageActions(props: PageActionProps): JSX.Element | null;
+export {};

package/lib/components/PageActions/PageActions.js

@@ -0,0 +1,104 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageActions = PageActions;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const PageActionsMenuItem_1 = require("../../components/PageActions/PageActionsMenuItem");
+const Link_1 = require("../../components/Link/Link");
+const ButtonGroup_1 = require("../../components/Button/ButtonGroup");
+const Button_1 = require("../../components/Button/Button");
+const Dropdown_1 = require("../../components/Dropdown/Dropdown");
+const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
+const Spinner_1 = require("../../icons/Spinner/Spinner");
+const CheckmarkFilledIcon_1 = require("../../icons/CheckmarkFilledIcon/CheckmarkFilledIcon");
+const hooks_1 = require("../../core/hooks");
+const ACTION_DONE_DISPLAY_DURATION = 1000;
+function PageActions(props) {
+    const { pageSlug } = props;
+    const actions = (0, hooks_1.usePageActions)(pageSlug || '/');
+    const [actionState, setActionState] = (0, react_1.useState)('idle');
+    if (!actions.length) {
+        return null;
+    }
+    const buttonAction = actions[0];
+    const handleActionClick = (action) => __awaiter(this, void 0, void 0, function* () {
+        if (!('onClick' in action)) {
+            return;
+        }
+        setActionState('processing');
+        yield action.onClick();
+        setActionState('done');
+        setTimeout(() => {
+            setActionState('idle');
+        }, ACTION_DONE_DISPLAY_DURATION);
+    });
+    const menuItems = actions.map((action) => ({
+        content: 'link' in action ? (react_1.default.createElement(LinkMenuItem, { to: action.link, external: true },
+            react_1.default.createElement(PageActionsMenuItem_1.PageActionsMenuItem, { pageAction: action }))) : (react_1.default.createElement(PageActionsMenuItem_1.PageActionsMenuItem, { pageAction: action })),
+        onAction: 'onClick' in action ? () => handleActionClick(action) : undefined,
+    }));
+    return (react_1.default.createElement(PageActionsWrapper, null,
+        react_1.default.createElement(ButtonGroup_1.ButtonGroup, { variant: "outlined", size: "medium" },
+            react_1.default.createElement(Button_1.Button, { icon: renderIcon(buttonAction, actionState), to: 'link' in buttonAction ? buttonAction.link : undefined, external: true, onClick: () => handleActionClick(buttonAction) }, buttonAction.buttonText),
+            actions.length > 1 ? (react_1.default.createElement(Dropdown_1.Dropdown, { withArrow: true, trigger: react_1.default.createElement(Button_1.Button, null), placement: "bottom", alignment: "end" },
+                react_1.default.createElement(DropdownMenu_1.DropdownMenu, { items: menuItems }))) : null)));
+}
+function renderIcon(buttonAction, actionState) {
+    switch (actionState) {
+        case 'processing':
+            return react_1.default.createElement(Spinner_1.Spinner, { color: "var(--page-actions-processing-icon-color)" });
+        case 'done':
+            return react_1.default.createElement(CheckmarkFilledIcon_1.CheckmarkFilledIcon, { color: "var(--page-actions-done-icon-color)" });
+        default:
+            return react_1.default.createElement(buttonAction.iconComponent, null);
+    }
+}
+const PageActionsWrapper = styled_components_1.default.div `
+  margin-left: auto;
+  padding-left: var(--page-actions-padding-left);
+  --button-color: var(--page-actions-button-text-color);
+
+  .button-group-size-medium .button.button-size-medium {
+    --button-icon-left-padding: var(--page-actions-button-padding);
+  }
+`;
+const LinkMenuItem = (0, styled_components_1.default)(Link_1.Link) `
+  text-decoration: none;
+  --link-decoration-hover: none;
+`;
+//# sourceMappingURL=PageActions.js.map

package/lib/components/PageActions/PageActionsMenuItem.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { PageAction } from '../../core/types';
+type PageActionsMenuItemProps = {
+    pageAction: PageAction;
+};
+export declare function PageActionsMenuItem(props: PageActionsMenuItemProps): React.JSX.Element;
+export {};