@redocly/theme 0.11.4 → 0.12.0

package/lib/components/LastUpdated/LastUpdated.js

@@ -31,6 +31,7 @@ const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const timeago_js_1 = require("timeago.js");
 const useThemeConfig_1 = require("../../hooks/useThemeConfig");
+const hooks_1 = require("../../mocks/hooks");
 const FORMATS = {
     timeago: (date, locale) => (0, timeago_js_1.format)(date, locale),
     iso: (date) => date.toISOString().split('T')[0],
@@ -39,6 +40,7 @@ const FORMATS = {
 };
 function LastUpdated(props) {
     const { markdown: { lastUpdatedBlock = {} } = {} } = (0, useThemeConfig_1.useThemeConfig)();
+    const { translate } = (0, hooks_1.useTranslate)();
     if (lastUpdatedBlock === null || lastUpdatedBlock === void 0 ? void 0 : lastUpdatedBlock.hide) {
         return null;
     }
@@ -47,10 +49,12 @@ function LastUpdated(props) {
     const locale = props.locale || lastUpdatedBlock.locale || 'en-US';
     const isoDate = lastModified.toISOString().split('T')[0];
     const lastUpdatedString = FORMATS[format](lastModified, locale);
-    const separator = format === 'timeago' ? ' ' : ' on ';
-    return (React.createElement(Wrapper, { "data-component-name": "LastUpdated/LastUpdated", rawOnPrint: format === 'timeago', "data-print-datetime": isoDate },
-        "Last updated",
-        separator,
+    const translationKey = format === 'timeago' ? 'theme.page.lastUpdated.timeago' : 'theme.page.lastUpdated.on';
+    const text = format === 'timeago'
+        ? translate(translationKey, 'Last updated ')
+        : translate(translationKey, 'Last updated on');
+    return (React.createElement(Wrapper, { "data-component-name": "LastUpdated/LastUpdated", rawOnPrint: format === 'timeago', "data-print-datetime": isoDate, "data-translation-key": translationKey },
+        text,
         React.createElement("time", { dateTime: isoDate }, lastUpdatedString)));
 }
 exports.LastUpdated = LastUpdated;

package/lib/components/Markdown/MarkdownLayout.js

@@ -12,15 +12,20 @@ const PageNavigation_1 = require("../../components/PageNavigation/PageNavigation
 const EditPageButton_1 = require("../../components/EditPageButton");
 const LastUpdated_1 = require("../../components/LastUpdated/LastUpdated");
 const hooks_1 = require("../../hooks");
+const hooks_2 = require("../../mocks/hooks");
 function MarkdownLayout({ tableOfContent, markdownWrapper, feedback, editPage, lastModified, nextPage, prevPage, }) {
     const { markdown } = (0, hooks_1.useThemeConfig)();
+    const { translate } = (0, hooks_2.useTranslate)();
+    const translationKeys = {
+        text: 'theme.markdown.editPage.text',
+    };
     const { editPage: themeEditPage } = markdown || {};
     const mergedConf = editPage ? Object.assign(Object.assign({}, themeEditPage), editPage) : undefined;
     return (react_1.default.createElement(PageWrapper_1.PageWrapper, { "data-component-name": "Markdown/MarkdownLayout" },
         react_1.default.createElement(ContainerWrapper_1.ContainerWrapper, { withToc: true },
             react_1.default.createElement(LayoutTop, null,
                 lastModified && react_1.default.createElement(LastUpdated_1.LastUpdated, { lastModified: new Date(lastModified) }),
-                mergedConf && (react_1.default.createElement(EditPageButton_1.EditPageButton, { text: mergedConf.text, to: mergedConf.to, icon: mergedConf.icon }))),
+                mergedConf && (react_1.default.createElement(EditPageButton_1.EditPageButton, { text: translate(translationKeys.text, mergedConf.text), to: mergedConf.to, icon: mergedConf.icon, "data-translation-key": translationKeys.text }))),
             markdownWrapper,
             react_1.default.createElement(LayoutBottom, null, feedback),
             react_1.default.createElement(PageNavigation_1.PageNavigation, { nextPage: nextPage, prevPage: prevPage })),

package/lib/components/Markdown/MarkdownWrapper.js

@@ -373,6 +373,10 @@ exports.MarkdownWrapper = styled_components_1.default.main.attrs(() => ({
     list-style: var(--md-list-item-style);
   }
 
+  ul > li:has(input[type='checkbox']) {
+    list-style: var(--md-checkbox-list-item-style);
+  }
+
   ol > li {
     list-style: var(--md-numbered-list-item-style);
   }

package/lib/components/Menu/MenuGroup.js

@@ -33,9 +33,11 @@ const ArrowIcon_1 = require("../../icons/ArrowIcon/ArrowIcon");
 const MenuLinkItem_1 = require("../../components/Menu/MenuLinkItem");
 const MenuItemLabel_1 = require("../../components/Menu/MenuItemLabel");
 const SeparatorLine_1 = require("../../components/Separator/SeparatorLine");
+const hooks_1 = require("../../mocks/hooks");
 function MenuGroup({ item, isExpanded, toggleExpanded, children, }) {
     const [showChildren, setShowChildren] = (0, react_1.useState)(isExpanded);
     const timer = (0, react_1.useRef)(null);
+    const { translate } = (0, hooks_1.useTranslate)();
     (0, react_1.useEffect)(() => {
         timer.current && clearTimeout(timer.current);
         if (isExpanded) {
@@ -54,7 +56,7 @@ function MenuGroup({ item, isExpanded, toggleExpanded, children, }) {
         react_1.default.createElement(MenuLinkItem_1.MenuLinkItem, { item: item },
             react_1.default.createElement(MenuGroupLabel, { onClick: toggleExpanded, isAlwaysExpanded: item.expanded === 'always', active: item.active },
                 react_1.default.createElement(MenuGroupArrow, { visibility: item.items.length ? 'visible' : 'hidden', direction: isExpanded ? 'down' : 'right' }),
-                item.label)),
+                translate(item.labelTranslationKey, item.label))),
         react_1.default.createElement(MenuWrapper, { isExpanded: isExpanded }, showChildren ? children : null),
         item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
 }

package/lib/components/Menu/MenuItem.js

@@ -10,11 +10,13 @@ const MenuLinkItem_1 = require("../../components/Menu/MenuLinkItem");
 const ExternalIcon_1 = require("../../icons/ExternalIcon");
 const MenuItemLabel_1 = require("../../components/Menu/MenuItemLabel");
 const SeparatorLine_1 = require("../../components/Separator/SeparatorLine");
+const hooks_1 = require("../../mocks/hooks");
 function MenuItem({ item }) {
+    const { translate } = (0, hooks_1.useTranslate)();
     return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/MenuItem" },
         react_1.default.createElement(MenuLinkItem_1.MenuLinkItem, { item: item },
             react_1.default.createElement(MenuItemLabel_1.MenuItemLabel, { active: item.active },
-                item.label,
+                translate(item.labelTranslationKey, item.label),
                 item.external ? react_1.default.createElement(ExternalIcon_1.ExternalIcon, { dataComponentName: "Sidebar/ExternalIcon" }) : null)),
         item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
 }

package/lib/components/Navbar/MobileNavbarItem.js

@@ -31,15 +31,19 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const react_router_dom_1 = require("react-router-dom");
 const Link_1 = require("../../mocks/Link");
-const utils_1 = require("../../utils");
+const hooks_1 = require("../../mocks/hooks");
+const utils_1 = require("../../mocks/utils");
+const utils_2 = require("../../utils");
 const MobileNavbarDropdown_1 = require("./MobileNavbarDropdown");
 function MobileNavbarItem({ navItem, className }) {
     const { pathname } = (0, react_router_dom_1.useLocation)();
     const [expandedDropdown, setExpandedDropdown] = (0, react_1.useState)(false);
     const toggleDropdown = () => setExpandedDropdown(!expandedDropdown);
+    const { defaultLocale, currentLocale, locales } = (0, hooks_1.useI18nConfig)();
     if (navItem.link) {
         const item = navItem;
-        const isActive = pathname === (0, utils_1.withPathPrefix)(item.link);
+        const isActive = pathname ===
+            (0, utils_2.withPathPrefix)((0, utils_1.getPathnameForLocale)(item.link, defaultLocale, currentLocale, locales));
         return (react_1.default.createElement(exports.NavMenuItem, { active: isActive, "data-component-name": "Navbar/MobileNavbarItem", className: className },
             react_1.default.createElement(exports.NavLink, { to: item.link, active: isActive },
                 react_1.default.createElement(NavLabel, null, item.label))));

package/lib/components/Navbar/Navbar.d.ts

@@ -10,6 +10,7 @@ interface NavbarPresentationalProps extends NavbarLogoProps {
     hideSearch: boolean;
     menu: ResolvedConfigLinks;
     hideUserProfile: boolean | string | undefined;
+    changeLanguage: (value: string) => void;
 }
 export declare function NavbarPresentational(props: NavbarPresentationalProps): JSX.Element | null;
 export declare const NavbarContainer: import("styled-components").StyledComponent<"nav", any, {}, never>;

package/lib/components/Navbar/Navbar.js

@@ -39,6 +39,8 @@ const ColorModeSwitcher_1 = require("../../components/ColorModeSwitcher/ColorMod
 const useThemeConfig_1 = require("../../hooks/useThemeConfig");
 const Search_1 = require("../../components/Search/Search");
 const AuthUserProfile_1 = require("../../components/Profile/AuthUserProfile");
+const hooks_1 = require("../../mocks/hooks");
+const LanguagePicker_1 = require("../../I18n/LanguagePicker");
 const EmptyNavbarHack = (0, styled_components_1.createGlobalStyle) `
   #redocly_root {
     --navbar-height: 0px !important;
@@ -48,6 +50,7 @@ function Navbar() {
     var _a;
     const [isOpen, setIsOpen] = (0, useMobileMenu_1.useMobileMenu)(false);
     const themeConfig = (0, useThemeConfig_1.useThemeConfig)();
+    const { changeLanguage } = (0, hooks_1.useI18n)();
     const menu = (_a = themeConfig.navbar) === null || _a === void 0 ? void 0 : _a.items;
     const logo = themeConfig.logo;
     const { search: searchSettings, navbar, userProfile: userProfileSettings } = themeConfig;
@@ -71,11 +74,12 @@ function Navbar() {
         menu: menu,
         logo: logo,
         hideUserProfile,
+        changeLanguage,
     })));
 }
 exports.Navbar = Navbar;
 function NavbarPresentational(props) {
-    const { menuItemsExist, closeMobileMenu, openMobileMenu, isOpen, hideSearch, logo, menu, hideUserProfile, } = props;
+    const { menuItemsExist, closeMobileMenu, openMobileMenu, isOpen, hideSearch, logo, menu, hideUserProfile, changeLanguage, } = props;
     return (react_1.default.createElement(exports.NavbarContainer, { "data-component-name": "Navbar/Navbar" },
         menuItemsExist && react_1.default.createElement(MobileNavbarMenuButton_1.MobileNavbarMenuButton, { onClick: openMobileMenu }),
         isOpen && (react_1.default.createElement(MobileNavbarMenu_1.MobileNavbarMenu, { closeMenu: closeMobileMenu, menuItems: menu, search: hideSearch ? null : react_1.default.createElement(Search_1.Search, null) })),
@@ -83,6 +87,7 @@ function NavbarPresentational(props) {
             react_1.default.createElement(NavbarLogo_1.NavbarLogo, { logo: logo }),
             react_1.default.createElement(Navbar_1.NavbarMenu, { menuItems: menu }),
             hideSearch ? null : react_1.default.createElement(Search_1.Search, null),
+            react_1.default.createElement(LanguagePicker_1.LanguagePicker, { onChangeLanguage: changeLanguage }),
             hideUserProfile ? null : react_1.default.createElement(AuthUserProfile_1.AuthUserProfile, null),
             react_1.default.createElement(ColorModeSwitcher_1.ColorModeSwitcher, null))));
 }

package/lib/components/Navbar/NavbarDropdown.js

@@ -7,9 +7,11 @@ exports.DropdownWrapper = exports.NavbarDropdown = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Link_1 = require("../../mocks/Link");
+const hooks_1 = require("../../mocks/hooks");
 function NavbarDropdown({ items }) {
+    const { translate } = (0, hooks_1.useTranslate)();
     return (react_1.default.createElement(exports.DropdownWrapper, { "data-component-name": "Navbar/NavbarDropdown" }, items.map((item, index) => (react_1.default.createElement("div", { key: `${item.label}_${index}` },
-        react_1.default.createElement(Link_1.Link, { to: item.link }, item.label))))));
+        react_1.default.createElement(Link_1.Link, { to: item.link }, translate(item.labelTranslationKey, item.label)))))));
 }
 exports.NavbarDropdown = NavbarDropdown;
 exports.DropdownWrapper = styled_components_1.default.div `

package/lib/components/Navbar/NavbarItem.js

@@ -8,22 +8,27 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const react_router_dom_1 = require("react-router-dom");
 const Link_1 = require("../../mocks/Link");
+const utils_1 = require("../../mocks/utils");
 const NavbarDropdown_1 = require("../../components/Navbar/NavbarDropdown");
-const utils_1 = require("../../utils");
+const hooks_1 = require("../../mocks/hooks");
+const utils_2 = require("../../utils");
 function NavbarItem({ navItem, className }) {
     const { pathname } = (0, react_router_dom_1.useLocation)();
+    const { translate } = (0, hooks_1.useTranslate)();
+    const { defaultLocale, currentLocale, locales } = (0, hooks_1.useI18nConfig)();
     if (navItem.link) {
         const item = navItem;
-        const isActive = pathname === (0, utils_1.withPathPrefix)(item.link);
+        const isActive = pathname ===
+            (0, utils_2.withPathPrefix)((0, utils_1.getPathnameForLocale)(item.link, defaultLocale, currentLocale, locales));
         return (react_1.default.createElement(exports.NavbarMenuItem, { active: isActive, "data-component-name": "Navbar/NavbarItem", className: className },
             react_1.default.createElement(exports.NavbarLink, { to: item.link, external: item.external, target: item.target, active: isActive },
-                react_1.default.createElement(NavbarLabel, null, item.label))));
+                react_1.default.createElement(NavbarLabel, null, translate(item.labelTranslationKey, item.label)))));
     }
     if (navItem.items) {
         const item = navItem;
         return (react_1.default.createElement(exports.NavbarMenuItemWithDropdownWrapper, null,
             react_1.default.createElement(exports.NavbarMenuItem, { active: false, "data-component-name": "Navbar/NavbarItem", className: className },
-                react_1.default.createElement(NavbarLabel, null, item.label)),
+                react_1.default.createElement(NavbarLabel, null, translate(item.labelTranslationKey, item.label))),
             react_1.default.createElement(NavbarDropdown_1.NavbarDropdown, { items: item.items })));
     }
     return null;

package/lib/components/PageNavigation/NextButton.js

@@ -31,14 +31,19 @@ const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("../../components/Button");
 const useThemeConfig_1 = require("../../hooks/useThemeConfig");
+const hooks_1 = require("../../mocks/hooks");
 function NextButton({ nextPage }) {
     var _a, _b;
     const { navigation } = (0, useThemeConfig_1.useThemeConfig)();
+    const { translate } = (0, hooks_1.useTranslate)();
     if (!nextPage || ((_a = navigation === null || navigation === void 0 ? void 0 : navigation.nextButton) === null || _a === void 0 ? void 0 : _a.hide)) {
         return React.createElement("div", null, "\u00A0");
     }
-    const text = (((_b = navigation === null || navigation === void 0 ? void 0 : navigation.nextButton) === null || _b === void 0 ? void 0 : _b.text) || 'Next to {label}').replace('{label}', nextPage.label || nextPage.routeSlug || '');
-    return (React.createElement(StyledButton, { variant: "outlined", size: "large", to: nextPage.link, "data-component-name": "PageNavigation/NextPageLink" }, text));
+    const nextPageText = nextPage.label || nextPage.routeSlug || '';
+    const defaultText = (((_b = navigation === null || navigation === void 0 ? void 0 : navigation.nextButton) === null || _b === void 0 ? void 0 : _b.text) || 'Next to {label}').replace('{label}', nextPageText);
+    const translationKey = 'theme.page.nextButton';
+    const text = translate(translationKey, { label: nextPageText, defaultValue: defaultText });
+    return (React.createElement(StyledButton, { variant: "outlined", size: "large", to: nextPage.link, "data-component-name": "PageNavigation/NextPageLink", "data-translation-key": translationKey }, text));
 }
 exports.NextButton = NextButton;
 const StyledButton = (0, styled_components_1.default)(Button_1.Button) `

package/lib/components/PageNavigation/PreviousButton.js

@@ -8,14 +8,22 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("../../components/Button");
 const useThemeConfig_1 = require("../../hooks/useThemeConfig");
+const hooks_1 = require("../../mocks/hooks");
 function PreviousButton({ prevPage }) {
     var _a, _b;
     const { navigation } = (0, useThemeConfig_1.useThemeConfig)();
+    const { translate } = (0, hooks_1.useTranslate)();
     if (!prevPage || ((_a = navigation === null || navigation === void 0 ? void 0 : navigation.previousButton) === null || _a === void 0 ? void 0 : _a.hide)) {
         return react_1.default.createElement("div", null, "\u00A0");
     }
-    const text = (((_b = navigation === null || navigation === void 0 ? void 0 : navigation.previousButton) === null || _b === void 0 ? void 0 : _b.text) || 'Back to {label}').replace('{label}', prevPage.label || prevPage.routeSlug || '');
-    return (react_1.default.createElement(StyledButton, { variant: "outlined", size: "large", to: prevPage.link, "data-component-name": "PageNavigation/PreviousPageLink" }, text));
+    const prevPageText = prevPage.label || prevPage.routeSlug || '';
+    const defaultText = (((_b = navigation === null || navigation === void 0 ? void 0 : navigation.previousButton) === null || _b === void 0 ? void 0 : _b.text) || 'Back to {label}').replace('{label}', prevPageText);
+    const translationKey = 'theme.page.previousButton';
+    const text = translate(translationKey, {
+        label: prevPageText,
+        defaultValue: defaultText,
+    });
+    return (react_1.default.createElement(StyledButton, { variant: "outlined", size: "large", to: prevPage.link, "data-component-name": "PageNavigation/PreviousPageLink", "data-translation-key": translationKey }, text));
 }
 exports.PreviousButton = PreviousButton;
 const StyledButton = (0, styled_components_1.default)(Button_1.Button) `

package/lib/components/Profile/LoginLink.js

@@ -7,9 +7,14 @@ exports.LoginLink = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const useThemeConfig_1 = require("../../hooks/useThemeConfig");
+const hooks_1 = require("../../mocks/hooks");
 function LoginLink({ href }) {
     const { userProfile } = (0, useThemeConfig_1.useThemeConfig)();
-    return react_1.default.createElement(StyledLink, { href: href }, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.loginLabel) || 'Login');
+    const { translate } = (0, hooks_1.useTranslate)();
+    const translationKeys = {
+        login: 'theme.profile.login',
+    };
+    return (react_1.default.createElement(StyledLink, { href: href, "data-translation-key": translationKeys.login }, translate(translationKeys.login, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.loginLabel) || 'Login')));
 }
 exports.LoginLink = LoginLink;
 const StyledLink = styled_components_1.default.a.attrs(() => ({

package/lib/components/Profile/UserProfileMenu.js

@@ -30,17 +30,23 @@ exports.UserProfileMenu = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const Link_1 = require("../../mocks/Link");
-const hooks_1 = require("../../hooks");
+const useThemeConfig_1 = require("../../hooks/useThemeConfig");
+const hooks_1 = require("../../mocks/hooks");
 function UserProfileMenu({ hasDeveloperOnboarding, setIsOpened, handleLogout, }) {
     var _a;
-    const { userProfile } = (0, hooks_1.useThemeConfig)();
+    const { userProfile } = (0, useThemeConfig_1.useThemeConfig)();
+    const { translate } = (0, hooks_1.useTranslate)();
+    const translationKeys = {
+        myApps: 'theme.profile.myApps',
+        logout: 'theme.profile.logout',
+    };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(StyledUl, { onClick: () => setIsOpened(false) },
             hasDeveloperOnboarding ? (react_1.default.createElement(Link_1.Link, { to: "/apps" },
-                react_1.default.createElement(StyledLi, null, "My Apps"))) : null, (_a = userProfile === null || userProfile === void 0 ? void 0 : userProfile.menu) === null || _a === void 0 ? void 0 :
+                react_1.default.createElement(StyledLi, { "data-translation-key": translationKeys.myApps }, translate(translationKeys.myApps, 'My Apps')))) : null, (_a = userProfile === null || userProfile === void 0 ? void 0 : userProfile.menu) === null || _a === void 0 ? void 0 :
             _a.map((item) => (react_1.default.createElement(Link_1.Link, { external: item.external, key: item.label, to: item.link || '' },
                 react_1.default.createElement(StyledLi, { separatorLine: item === null || item === void 0 ? void 0 : item.separatorLine }, item.label)))),
-            react_1.default.createElement(StyledLi, { onClick: () => handleLogout() }, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.logoutLabel) || 'Log out'))));
+            react_1.default.createElement(StyledLi, { onClick: () => handleLogout(), "data-translation-key": translationKeys.logout }, translate(translationKeys.logout, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.logoutLabel) || 'Log out')))));
 }
 exports.UserProfileMenu = UserProfileMenu;
 const StyledUl = styled_components_1.default.ul `

package/lib/components/Search/Autocomplete.d.ts

@@ -4,13 +4,13 @@ import type { ActiveItem } from '../../types/portal/src/shared/types/activeItem'
 interface AutocompleteProps<T> {
     placeholder?: string;
     value: string;
-    items: T[];
+    items: T[] | null;
     renderItem(item: ActiveItem<T>): ReactNode;
     change(value: string): void;
     select(item: T): void;
-    children?(isOpen: boolean, close: () => void): ReactNode;
     inputRef?: React.RefObject<HTMLInputElement>;
     keyShortcuts?: string[];
+    isLoading: boolean;
 }
-export declare function Autocomplete<T>({ placeholder, value, items, change, select, renderItem, children, keyShortcuts, }: AutocompleteProps<T>): JSX.Element;
+export declare function Autocomplete<T>({ placeholder, value, items, change, select, renderItem, keyShortcuts, isLoading, }: AutocompleteProps<T>): JSX.Element;
 export {};

package/lib/components/Search/Autocomplete.js

@@ -34,11 +34,19 @@ const hotkeys_js_1 = __importDefault(require("hotkeys-js"));
 const Input_1 = require("../../components/Search/Input");
 const Popover_1 = require("../../components/Search/Popover");
 const ShortcutKey_1 = require("../../components/Search/ShortcutKey");
-function Autocomplete({ placeholder, value, items, change, select, renderItem, children, keyShortcuts, }) {
+const hooks_1 = require("../../mocks/hooks");
+const SearchIcon_1 = require("../../components/Search/SearchIcon");
+const SpinnerIcon_1 = require("../../icons/SpinnerIcon");
+const ClearIcon_1 = require("../../components/Search/ClearIcon");
+function Autocomplete({ placeholder, value, items, change, select, renderItem, keyShortcuts, isLoading, }) {
     const location = (0, react_router_dom_1.useLocation)();
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
     const [activeIdx, setActiveIdx] = (0, react_1.useState)(-1);
     const refInput = (0, react_1.useRef)(null);
+    const { translate } = (0, hooks_1.useTranslate)();
+    const translationKeys = {
+        noResults: 'theme.search.noResults',
+    };
     const hotkeysKeys = keyShortcuts === null || keyShortcuts === void 0 ? void 0 : keyShortcuts.join(',');
     (0, react_1.useEffect)(() => {
         if (hotkeysKeys) {
@@ -50,9 +58,9 @@ function Autocomplete({ placeholder, value, items, change, select, renderItem, c
             return () => hotkeys_js_1.default.unbind(hotkeysKeys);
         }
     }, [hotkeysKeys]);
-    const open = () => setIsOpen(true);
+    const onFocus = () => setIsFocused(true);
     const close = () => {
-        setIsOpen(false);
+        setIsFocused(false);
         setActiveIdx(-1);
     };
     const reset = () => {
@@ -62,10 +70,12 @@ function Autocomplete({ placeholder, value, items, change, select, renderItem, c
     const stopPropagation = (event) => event.stopPropagation();
     const onChange = (event) => {
         setActiveIdx(-1);
-        setIsOpen(true);
+        setIsFocused(true);
         change(event.target.value);
     };
     const onKeydown = (event) => {
+        if (items === null)
+            return;
         switch (event.code) {
             case 'Escape':
                 close();
@@ -92,12 +102,12 @@ function Autocomplete({ placeholder, value, items, change, select, renderItem, c
     };
     (0, react_1.useEffect)(close, [location]);
     return (react_1.default.createElement(Wrapper, { "data-component-name": "Search/Autocomplete" },
-        isOpen ? react_1.default.createElement(Overlay, { onClick: close }) : null,
-        react_1.default.createElement(AutocompleteBox, { onKeyDown: onKeydown }, children === null || children === void 0 ? void 0 :
-            children(isOpen, reset),
-            react_1.default.createElement(Input_1.FormInput, { value: value, placeholder: placeholder, onChange: onChange, onFocus: open, onClick: stopPropagation, ref: refInput }),
-            !isOpen && react_1.default.createElement(ShortcutKey_1.ShortcutKey, { keyShortcuts: keyShortcuts }),
-            isOpen && value ? (react_1.default.createElement(Popover_1.Popover, null, items.length ? items.map(mapItem) : react_1.default.createElement(Message, null, "No results"))) : null)));
+        isFocused ? react_1.default.createElement(Overlay, { onClick: close }) : null,
+        react_1.default.createElement(AutocompleteBox, { onKeyDown: onKeydown },
+            isFocused && isLoading ? react_1.default.createElement(SpinnerIcon_1.SpinnerIcon, null) : react_1.default.createElement(SearchIcon_1.SearchIcon, null),
+            react_1.default.createElement(Input_1.FormInput, { value: value, placeholder: placeholder, onChange: onChange, onFocus: onFocus, onClick: stopPropagation, ref: refInput }),
+            isFocused ? react_1.default.createElement(ClearIcon_1.ClearIcon, { onClick: reset }) : react_1.default.createElement(ShortcutKey_1.ShortcutKey, { keyShortcuts: keyShortcuts }),
+            isFocused && items !== null && value && (react_1.default.createElement(Popover_1.Popover, null, items.length ? (items.map(mapItem)) : (react_1.default.createElement(Message, { "data-translation-key": translationKeys.noResults }, translate(translationKeys.noResults, 'No results'))))))));
 }
 exports.Autocomplete = Autocomplete;
 const Wrapper = styled_components_1.default.div ``;

package/lib/components/Search/ClearIcon.js

@@ -15,7 +15,7 @@ exports.ClearIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
   cursor: pointer;
   width: 0.5em;
   height: 0.5em;
-  left: 1.2em;
+  right: 1em;
   fill: var(--search-input-text-color);
 
   ${({ theme }) => theme.mediaQueries.medium} {

package/lib/components/Search/Search.js

@@ -31,20 +31,20 @@ const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const search_1 = require("../../mocks/search");
 const Autocomplete_1 = require("../../components/Search/Autocomplete");
-const ClearIcon_1 = require("../../components/Search/ClearIcon");
-const SearchIcon_1 = require("../../components/Search/SearchIcon");
 const SearchItem_1 = require("../../components/Search/SearchItem");
 const hooks_1 = require("../../hooks");
 const usePreloadHistory_1 = require("../../mocks/usePreloadHistory");
+const hooks_2 = require("../../mocks/hooks");
 function Search() {
     const history = (0, usePreloadHistory_1.usePreloadHistory)();
-    const { query, setQuery, items } = (0, search_1.useFuseSearch)();
+    const { query, setQuery, items, isLoading } = (0, search_1.useFuseSearch)();
     const themeSettings = (0, hooks_1.useThemeConfig)();
+    const { translate } = (0, hooks_2.useTranslate)();
     // TODO: ask somebody about typings
     const navigate = (item) => history.push(item.url);
     const renderAutocomplete = () => {
         var _a, _b;
-        return (React.createElement(Autocomplete_1.Autocomplete, { items: items, value: query, change: setQuery, select: navigate, placeholder: "Search the docs", keyShortcuts: (_b = (_a = themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.search) === null || _a === void 0 ? void 0 : _a.shortcuts) !== null && _b !== void 0 ? _b : ['/'], renderItem: (item) => React.createElement(SearchItem_1.SearchItem, { key: item.id, item: item }) }, (isOpen, reset) => (isOpen ? React.createElement(ClearIcon_1.ClearIcon, { onClick: reset }) : React.createElement(SearchIcon_1.SearchIcon, null))));
+        return (React.createElement(Autocomplete_1.Autocomplete, { items: items, value: query, change: setQuery, select: navigate, placeholder: translate('theme.search.label', 'Search the docs'), keyShortcuts: (_b = (_a = themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.search) === null || _a === void 0 ? void 0 : _a.shortcuts) !== null && _b !== void 0 ? _b : ['/'], renderItem: (item) => React.createElement(SearchItem_1.SearchItem, { key: item.id, item: item }), isLoading: isLoading }));
     };
     return React.createElement(Wrapper, { "data-component-name": "Search/Search" }, renderAutocomplete());
 }
@@ -52,6 +52,8 @@ exports.Search = Search;
 const Wrapper = styled_components_1.default.div `
   margin-left: auto;
 
+  padding: 0 var(--navbar-item-padding-horizontal);
+
   display: none;
 
   ${({ theme }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.small; }} {

package/lib/components/Separator/Separator.js

@@ -8,9 +8,11 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const SeparatorLine_1 = require("../../components/Separator/SeparatorLine");
 const SeparatorItem_1 = require("../../components/Separator/SeparatorItem");
+const hooks_1 = require("../../mocks/hooks");
 function Separator({ item }) {
+    const { translate } = (0, hooks_1.useTranslate)();
     return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/Separator" },
-        react_1.default.createElement(SeparatorItem_1.SeparatorItem, null, item.label),
+        react_1.default.createElement(SeparatorItem_1.SeparatorItem, null, translate(item.labelTranslationKey, item.label)),
         item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
 }
 exports.Separator = Separator;

package/lib/components/Sidebar/DrilldownMenu.js

@@ -31,11 +31,16 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const BackButton_1 = require("../../components/Sidebar/BackButton");
 const DrilldownMenuItem_1 = require("../../components/Sidebar/DrilldownMenuItem");
+const hooks_1 = require("../../mocks/hooks");
 function DrilldownMenu({ item, back, prevActiveItem, children, }) {
+    const { translate } = (0, hooks_1.useTranslate)();
+    const translationKeys = {
+        backLabel: 'theme.sidebar.menu.backLabel',
+    };
     return (react_1.default.createElement(MenuContainer, { "data-component-name": "Sidebar/DrilldownMenu" },
         react_1.default.createElement(MenuContent, null,
             react_1.default.createElement(MenuWrapper, null,
-                react_1.default.createElement(BackButton_1.BackButton, { back: back }, (prevActiveItem === null || prevActiveItem === void 0 ? void 0 : prevActiveItem.label) || 'Back'),
+                react_1.default.createElement(BackButton_1.BackButton, { back: back, "data-translation-key": translationKeys.backLabel }, (prevActiveItem === null || prevActiveItem === void 0 ? void 0 : prevActiveItem.label) || translate(translationKeys.backLabel, 'Back')),
                 react_1.default.createElement(DrilldownMenuItem_1.DrilldownMenuItem, { item: item })),
             children)));
 }

package/lib/components/Sidebar/DrilldownMenuItem.js

@@ -6,12 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DrilldownMenuItem = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const hooks_1 = require("../../mocks/hooks");
 function DrilldownMenuItem({ item }) {
+    const { translate } = (0, hooks_1.useTranslate)();
     return (react_1.default.createElement(Container, { "data-component-name": "Sidebar/DrilldownMenuItem" },
         item.icon ? react_1.default.createElement(Icon, { src: item.icon }) : null,
         react_1.default.createElement("div", null,
-            item.label,
-            item.sublabel ? react_1.default.createElement(SubLabel, null, item.sublabel) : null)));
+            translate(item.labelTranslationKey, item.label),
+            item.sublabel ? (react_1.default.createElement(SubLabel, null, translate(item.subLabelTranslationKey, item.sublabel))) : null)));
 }
 exports.DrilldownMenuItem = DrilldownMenuItem;
 const Container = styled_components_1.default.div `

package/lib/components/Sidebar/types.d.ts

@@ -18,7 +18,9 @@ export interface MenuItemProps {
 }
 export interface NavItem {
     label?: string;
+    labelTranslationKey?: string;
     sublabel?: string;
+    subLabelTranslationKey?: string;
     icon?: string;
     link?: string;
     type?: string;

package/lib/components/TableOfContent/TableOfContent.js

@@ -32,6 +32,7 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const useFullHeight_1 = require("../../hooks/useFullHeight");
 const useActiveHeading_1 = require("../../hooks/useActiveHeading");
 const useThemeConfig_1 = require("../../hooks/useThemeConfig");
+const hooks_1 = require("../../mocks/hooks");
 const utils_1 = require("../../components/TableOfContent/utils");
 function TableOfContent(props) {
     const { headings, contentWrapper } = props;
@@ -41,13 +42,17 @@ function TableOfContent(props) {
     const displayedHeadings = (0, utils_1.getDisplayedHeadings)(headings, toc.depth || 3);
     const leastDepth = (0, utils_1.getLeastDepth)(displayedHeadings);
     const activeHeadingId = (0, useActiveHeading_1.useActiveHeading)(contentWrapper, (0, utils_1.getDisplayedHeadingsIds)(displayedHeadings));
+    const { translate } = (0, hooks_1.useTranslate)();
+    const translationKeys = {
+        header: 'theme.toc.header',
+    };
     if (toc === null || toc === void 0 ? void 0 : toc.hide) {
         return null;
     }
     return (React.createElement(React.Fragment, null,
         React.createElement(TableOfContentMenu, { "data-component-name": "TableOfContent/TableOfContent" },
             React.createElement(TableOfContentItems, { ref: sidebar },
-                displayedHeadings.length ? React.createElement(TocHeader, null, toc.header || 'On this page') : null,
+                displayedHeadings.length ? (React.createElement(TocHeader, { "data-translation-key": translationKeys.header }, translate(translationKeys.header, toc.header || 'On this page'))) : null,
                 displayedHeadings.map((heading, idx) => {
                     if (!heading) {
                         return null;

package/lib/globalStyle.js

@@ -1772,6 +1772,13 @@ const markdown = (0, styled_components_1.css) `
   --md-list-item-margin: 0.25rem; // @presenter Spacing
   --md-list-item-style: inherit;
 
+
+  /**
+  * @tokens Markdown Checkbox List
+  */
+  
+  --md-checkbox-list-item-style: none;
+
   /**
   * @tokens Markdown Numbered List
   */

package/lib/icons/SpinnerIcon/SpinnerIcon.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface SpinnerIconProps {
+    className?: string;
+}
+export declare const Icon: ({ className }: SpinnerIconProps) => JSX.Element;
+export declare const SpinnerIcon: import("styled-components").StyledComponent<({ className }: SpinnerIconProps) => JSX.Element, any, {
+    'data-component-name': string;
+}, "data-component-name">;

package/lib/icons/SpinnerIcon/SpinnerIcon.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpinnerIcon = exports.Icon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Icon = ({ className }) => (react_1.default.createElement("svg", { className: className, viewBox: "0 -1 38 40", strokeOpacity: ".5" },
+    react_1.default.createElement("g", { fill: "none", fillRule: "evenodd" },
+        react_1.default.createElement("g", { transform: "translate(1 1)", strokeWidth: "4" },
+            react_1.default.createElement("circle", { strokeOpacity: ".3", cx: "18", cy: "18", r: "18" }),
+            react_1.default.createElement("path", { d: "M36 18c0-9.94-8.06-18-18-18" },
+                react_1.default.createElement("animateTransform", { attributeName: "transform", type: "rotate", from: "0 18 18", to: "360 18 18", dur: "1s", repeatCount: "indefinite" }))))));
+exports.Icon = Icon;
+exports.SpinnerIcon = (0, styled_components_1.default)(exports.Icon).attrs(() => ({
+    'data-component-name': 'icons/AnchorIcon/AnchorIcon',
+})) `
+  position: absolute;
+  cursor: pointer;
+  width: 1em;
+  height: 1em;
+  left: 0.8em;
+  stroke: var(--search-input-text-color);
+  z-index: -1;
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: 1.2em;
+    height: 1.2em;
+  }
+`;
+//# sourceMappingURL=SpinnerIcon.js.map

package/lib/icons/SpinnerIcon/index.d.ts

@@ -0,0 +1 @@
+export { SpinnerIcon } from '../../icons/SpinnerIcon/SpinnerIcon';

package/lib/icons/SpinnerIcon/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpinnerIcon = void 0;
+var SpinnerIcon_1 = require("../../icons/SpinnerIcon/SpinnerIcon");
+Object.defineProperty(exports, "SpinnerIcon", { enumerable: true, get: function () { return SpinnerIcon_1.SpinnerIcon; } });
+//# sourceMappingURL=index.js.map