@redocly/theme 0.39.1 → 0.40.1

package/lib/components/Dropdown/Dropdown.js

@@ -59,7 +59,7 @@ function Dropdown({ children, className, active, trigger, triggerEvent = 'click'
     const dropdownTrigger = (0, react_1.cloneElement)(triggerChild, Object.assign(Object.assign(Object.assign(Object.assign({ onClick: triggerEvent === 'click' ? handleToggle : undefined, icon: withArrow ? isOpen ? react_1.default.createElement(ChevronUpIcon_1.ChevronUpIcon, null) : react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, null) : undefined }, (withArrow ? { iconPosition: 'right' } : {})), { tabIndex: 0 }), triggerChild.props), { onKeyDown: triggerEvent === 'click' ? handleKeyDown : undefined }));
     return (react_1.default.createElement(DropdownWrapper, Object.assign({ "data-component-name": "Dropdown/Dropdown", "data-testid": "dropdown" }, dataAttributes, { className: className, ref: dropdownRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: triggerEvent === 'hover' ? handleClose : undefined, onClick: onClick }),
         dropdownTrigger,
-        isOpen && (react_1.default.createElement(ChildrenWrapper, { placement: placement, alignment: alignment, onClick: closeOnClick ? handleChildClick : undefined }, children))));
+        react_1.default.createElement(ChildrenWrapper, { placement: placement, alignment: alignment, isOpen: isOpen, onClick: closeOnClick ? handleChildClick : undefined }, children)));
 }
 exports.Dropdown = Dropdown;
 const DropdownWrapper = styled_components_1.default.div `
@@ -84,6 +84,7 @@ const ChildrenWrapper = styled_components_1.default.div `
   bottom: ${({ placement }) => (placement === 'top' ? '100%' : 'auto')};
   left: ${({ alignment }) => (alignment === 'start' ? '0' : 'auto')};
   right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
+  display: ${({ isOpen }) => (isOpen ? 'block' : 'none')};
 
   z-index: var(--z-index-raised);
 `;

package/lib/components/Footer/FooterCopyright.js

@@ -9,9 +9,9 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const LanguagePicker_1 = require("../../components/LanguagePicker/LanguagePicker");
 function FooterCopyright({ copyrightText = '', className, }) {
-    const { useTranslate, useI18n } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useL10n } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const { changeLanguage } = useI18n();
+    const { changeLanguage } = useL10n();
     return copyrightText ? (react_1.default.createElement(FooterCopyrightWrapper, { className: className, "data-component-name": "Footer/FooterCopyright", "data-translation-key": "theme.footer.copyrightText" },
         react_1.default.createElement(FooterCopyrightLabel, { "data-translation-key": "theme.footer.copyrightText" }, translate('theme.footer.copyrightText', copyrightText)),
         react_1.default.createElement(LanguagePicker_1.LanguagePicker, { onChangeLanguage: changeLanguage, placement: "top", alignment: "end" }))) : null;

package/lib/components/LastUpdated/LastUpdated.js

@@ -40,9 +40,9 @@ const FORMATS = {
 };
 function LastUpdated(props) {
     const { markdown: { lastUpdatedBlock = {} } = {} } = (0, hooks_1.useThemeConfig)();
-    const { useTranslate, useI18nConfig } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useL10nConfig } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const { currentLocale } = useI18nConfig();
+    const { currentLocale } = useL10nConfig();
     if (lastUpdatedBlock === null || lastUpdatedBlock === void 0 ? void 0 : lastUpdatedBlock.hide) {
         return null;
     }

package/lib/components/Navbar/Navbar.js

@@ -23,8 +23,8 @@ function Navbar({ className }) {
     var _a;
     const { isOpen, openMobileMenu, closeMobileMenu } = (0, hooks_1.useMobileMenu)(false);
     const themeConfig = (0, hooks_1.useThemeConfig)();
-    const { useI18n, useTelemetry } = (0, hooks_1.useThemeHooks)();
-    const { changeLanguage } = useI18n();
+    const { useL10n, useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { changeLanguage } = useL10n();
     const telemetry = useTelemetry();
     const menu = (_a = themeConfig.navbar) === null || _a === void 0 ? void 0 : _a.items;
     const { search: searchSettings, navbar, userMenu: userMenuSettings, logo } = themeConfig;

package/lib/components/Navbar/NavbarItem.js

@@ -39,9 +39,9 @@ const Link_1 = require("../../components/Link/Link");
 const Dropdown_1 = require("../../components/Dropdown/Dropdown");
 function NavbarItem({ navItem, className }) {
     const { pathname } = (0, react_router_dom_1.useLocation)();
-    const { useTranslate, useI18nConfig, useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useL10nConfig, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const { defaultLocale, currentLocale, locales } = useI18nConfig();
+    const { defaultLocale, currentLocale, locales } = useL10nConfig();
     const telemetry = useTelemetry();
     if (navItem.type !== 'link' && !navItem.items)
         return null;

package/lib/core/hooks/__mocks__/use-theme-hooks.d.ts

@@ -14,10 +14,10 @@ export declare const useThemeHooks: jest.Mock<{
         filterTerm: string;
         setFilterTerm: jest.Mock<any, any, any>;
     }, [], any>;
-    useI18n: jest.Mock<{
+    useL10n: jest.Mock<{
         changeLanguage: jest.Mock<any, any, any>;
     }, [], any>;
-    useI18nConfig: jest.Mock<{
+    useL10nConfig: jest.Mock<{
         currentLocale: string;
         defaultLocale: string;
         locales: {

package/lib/core/hooks/__mocks__/use-theme-hooks.js

@@ -20,10 +20,10 @@ exports.useThemeHooks = jest.fn(() => ({
         filterTerm: '',
         setFilterTerm: jest.fn(),
     })),
-    useI18n: jest.fn(() => ({
+    useL10n: jest.fn(() => ({
         changeLanguage: jest.fn(),
     })),
-    useI18nConfig: jest.fn(() => ({
+    useL10nConfig: jest.fn(() => ({
         currentLocale: 'en',
         defaultLocale: 'en',
         locales: [

package/lib/core/hooks/menu/use-mobile-menu-items.js

@@ -11,9 +11,9 @@ const MENU_SEPARATOR = {
 };
 const useMobileMenuItems = (menuType) => {
     var _a, _b, _c;
-    const { useTranslate, useI18nConfig, useCurrentProduct, usePageVersions, useSidebarItems } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useL10nConfig, useCurrentProduct, usePageVersions, useSidebarItems } = (0, hooks_1.useThemeHooks)();
     const { versions = [] } = usePageVersions() || {};
-    const { defaultLocale, currentLocale, locales } = useI18nConfig();
+    const { defaultLocale, currentLocale, locales } = useL10nConfig();
     const { translate } = useTranslate();
     const activeVersion = versions.find((version) => version.active);
     const { currentItems: sidebarItems, pushDrilldownState, popDrilldownState, backLink, } = useSidebarItems(activeVersion);

package/lib/core/hooks/use-language-picker.d.ts

@@ -1,6 +1,6 @@
-import type { I18nConfig } from '../../core/types';
+import type { L10nConfig } from '../../core/types';
 export declare function useLanguagePicker(): {
-    currentLocale: I18nConfig['locales'][number] | undefined;
-    locales: I18nConfig['locales'];
+    currentLocale: L10nConfig['locales'][number] | undefined;
+    locales: L10nConfig['locales'];
     setLocale: (value: string) => void;
 };

package/lib/core/hooks/use-language-picker.js

@@ -4,9 +4,9 @@ exports.useLanguagePicker = void 0;
 const hooks_1 = require("../../core/hooks");
 const utils_1 = require("../../core/utils");
 function useLanguagePicker() {
-    const { useI18nConfig, usePreloadHistory } = (0, hooks_1.useThemeHooks)();
+    const { useL10nConfig, usePreloadHistory } = (0, hooks_1.useThemeHooks)();
     const history = usePreloadHistory();
-    const { currentLocale, locales, defaultLocale } = useI18nConfig();
+    const { currentLocale, locales, defaultLocale } = useL10nConfig();
     const locale = locales.find((l) => l.code === currentLocale);
     function setLocale(value) {
         const newLangPathname = (0, utils_1.withPathPrefix)((0, utils_1.getPathnameForLocale)(location.pathname, defaultLocale, value, locales));

package/lib/core/types/hooks.d.ts

@@ -7,10 +7,20 @@ export type ThemeHooks = {
     useTranslate: () => {
         translate: TFunction;
     };
+    /**
+     * @deprecated use `useL10n` instead
+     * */
     useI18n: () => {
         changeLanguage: (lng?: string | undefined, callback?: Callback | undefined) => Promise<TFunc>;
     };
-    useI18nConfig: () => I18nConfig;
+    /**
+     * @deprecated use `useL10nConfig` instead
+     * */
+    useI18nConfig: () => L10nConfig;
+    useL10n: () => {
+        changeLanguage: (lng?: string | undefined, callback?: Callback | undefined) => Promise<TFunc>;
+    };
+    useL10nConfig: () => L10nConfig;
     useCurrentProduct: () => ProductUiConfig | undefined;
     useProducts: () => ProductUiConfig[];
     usePageVersions: () => {
@@ -62,7 +72,7 @@ export type ThemeHooks = {
     useUserTeams: () => string[];
     usePageProps: <T extends Record<string, unknown>>() => PageProps & T;
 };
-export type I18nConfig = {
+export type L10nConfig = {
     currentLocale: string;
     defaultLocale: string;
     locales: {

package/lib/core/types/index.d.ts

@@ -1,6 +1,6 @@
 export * from '../../core/types/breadcrumb';
 export * from '../../core/types/catalog';
-export * from '../../core/types/i18n';
+export * from '../../core/types/l10n';
 export * from '../../core/types/feedback';
 export * from '../../core/types/hooks';
 export * from '../../core/types/markdown';

package/lib/core/types/index.js

@@ -16,7 +16,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../../core/types/breadcrumb"), exports);
 __exportStar(require("../../core/types/catalog"), exports);
-__exportStar(require("../../core/types/i18n"), exports);
+__exportStar(require("../../core/types/l10n"), exports);
 __exportStar(require("../../core/types/feedback"), exports);
 __exportStar(require("../../core/types/hooks"), exports);
 __exportStar(require("../../core/types/markdown"), exports);

package/lib/core/types/{i18n.js → l10n.js}

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=i18n.js.map
+//# sourceMappingURL=l10n.js.map

package/lib/icons/CloseOutlineIcon/CloseOutlineIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const CloseOutlineIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string | undefined;
+    size?: string | undefined;
+    className?: string | undefined;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/CloseOutlineIcon/CloseOutlineIcon.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CloseOutlineIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", fill: "none" }, props),
+    react_1.default.createElement("g", null,
+        react_1.default.createElement("path", { d: "M7 0.875C3.5875 0.875 0.875 3.5875 0.875 7C0.875 10.4125 3.5875 13.125 7 13.125C10.4125 13.125 13.125 10.4125 13.125 7C13.125 3.5875 10.4125 0.875 7 0.875ZM7 12.25C4.1125 12.25 1.75 9.8875 1.75 7C1.75 4.1125 4.1125 1.75 7 1.75C9.8875 1.75 12.25 4.1125 12.25 7C12.25 9.8875 9.8875 12.25 7 12.25Z" }),
+        react_1.default.createElement("path", { d: "M9.3625 10.0625L7 7.7L4.6375 10.0625L3.9375 9.3625L6.3 7L3.9375 4.6375L4.6375 3.9375L7 6.3L9.3625 3.9375L10.0625 4.6375L7.7 7L10.0625 9.3625L9.3625 10.0625Z" }))));
+exports.CloseOutlineIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/CloseOutlineIcon/CloseOutlineIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+  cursor: pointer;
+`;
+//# sourceMappingURL=CloseOutlineIcon.js.map

package/lib/icons/DocumentAddIcon/DocumentAddIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const DocumentAddIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string | undefined;
+    size?: string | undefined;
+    className?: string | undefined;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/DocumentAddIcon/DocumentAddIcon.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DocumentAddIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M15 11.9999H13V9.99993H12V11.9999H10V12.9999H12V14.9999H13V12.9999H15V11.9999Z" }),
+    react_1.default.createElement("path", { d: "M8 13.9999H4V1.99993H8V4.99993C8.00077 5.26491 8.10637 5.51882 8.29374 5.70619C8.48111 5.89356 8.73502 5.99916 9 5.99993H12V7.99993H13V4.99993C13.0018 4.93421 12.9893 4.86889 12.9634 4.80847C12.9375 4.74804 12.8988 4.69395 12.85 4.64993L9.35 1.14993C9.30599 1.10109 9.2519 1.06239 9.19147 1.03649C9.13104 1.01059 9.06572 0.99812 9 0.999928H4C3.73502 1.00069 3.48111 1.1063 3.29374 1.29367C3.10637 1.48104 3.00077 1.73495 3 1.99993V13.9999C3.00077 14.2649 3.10637 14.5188 3.29374 14.7062C3.48111 14.8936 3.73502 14.9992 4 14.9999H8V13.9999ZM9 2.19993L11.8 4.99993H9V2.19993Z" })));
+exports.DocumentAddIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/DocumentAddIcon/DocumentAddIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=DocumentAddIcon.js.map

package/lib/icons/ExportIcon/ExportIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const ExportIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string | undefined;
+    size?: string | undefined;
+    className?: string | undefined;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/ExportIcon/ExportIcon.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExportIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M13 12V14H3V12H2V14L2.0038 13.9976C2.00333 14.1288 2.02873 14.2589 2.07854 14.3803C2.12836 14.5017 2.20163 14.6121 2.29414 14.7052C2.38666 14.7983 2.49662 14.8723 2.61774 14.9229C2.73885 14.9734 2.86875 14.9997 3 15H13C13.2652 15 13.5196 14.8946 13.7071 14.7071C13.8946 14.5196 14 14.2652 14 14V12H13Z" }),
+    react_1.default.createElement("path", { d: "M3 6L3.7055 6.7025L7.5 2.9125V12H8.5V2.9125L12.2955 6.7025L13 6L8 1L3 6Z" })));
+exports.ExportIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/ExportIcon/ExportIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=ExportIcon.js.map

package/lib/icons/FolderIcon/FolderIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const FolderIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string | undefined;
+    size?: string | undefined;
+    className?: string | undefined;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/FolderIcon/FolderIcon.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FolderIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, props),
+    react_1.default.createElement("path", { d: "M4.88688 2.625L6.38313 4.11688L6.63688 4.375H12.25V11.375H1.75V2.625H4.88688ZM4.88688 1.75H1.75C1.51794 1.75 1.29538 1.84219 1.13128 2.00628C0.967187 2.17038 0.875 2.39294 0.875 2.625V11.375C0.875 11.6071 0.967187 11.8296 1.13128 11.9937C1.29538 12.1578 1.51794 12.25 1.75 12.25H12.25C12.4821 12.25 12.7046 12.1578 12.8687 11.9937C13.0328 11.8296 13.125 11.6071 13.125 11.375V4.375C13.125 4.14294 13.0328 3.92038 12.8687 3.75628C12.7046 3.59219 12.4821 3.5 12.25 3.5H7L5.50813 2.00813C5.42672 1.92624 5.32992 1.86127 5.2233 1.81697C5.11667 1.77267 5.00234 1.74991 4.88688 1.75Z" })));
+exports.FolderIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/FolderIcon/FolderIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=FolderIcon.js.map

package/lib/index.d.ts

@@ -123,9 +123,11 @@ export * from './icons/CleanIcon/CleanIcon';
 export * from './icons/DeselectIcon/DeselectIcon';
 export * from './icons/FileStorageIcon/FileStorageIcon';
 export * from './icons/FolderAddIcon/FolderAddIcon';
+export * from './icons/FolderIcon/FolderIcon';
 export * from './icons/FolderMoveToIcon/FolderMoveToIcon';
 export * from './icons/SelectIcon/SelectIcon';
 export * from './icons/CloseIcon/CloseIcon';
+export * from './icons/CloseOutlineIcon/CloseOutlineIcon';
 export * from './icons/CloseFilledIcon/CloseFilledIcon';
 export * from './icons/LogoutIcon/LogoutIcon';
 export * from './icons/CheckboxIcon/CheckboxIcon';
@@ -136,6 +138,7 @@ export * from './icons/DataFormatIcon/DataFormatIcon';
 export * from './icons/Spinner/Spinner';
 export * from './icons/CheckmarkIcon/CheckmarkIcon';
 export * from './icons/DownloadIcon/DownloadIcon';
+export * from './icons/DocumentAddIcon/DocumentAddIcon';
 export * from './icons/EmailIcon/EmailIcon';
 export * from './icons/SaveIcon/SaveIcon';
 export * from './icons/CloudUploadIcon/CloudUploadIcon';
@@ -198,6 +201,7 @@ export * from './icons/SubtractIcon/SubtractIcon';
 export * from './icons/PlusCustomIcon/PlusCustomIcon';
 export * from './icons/CharacterIcon/CharacterIcon';
 export * from './icons/FileIcon/FileIcon';
+export * from './icons/ExportIcon/ExportIcon';
 export * from './layouts/RootLayout';
 export * from './layouts/PageLayout';
 export * from './layouts/NotFound';

package/lib/index.js

@@ -175,9 +175,11 @@ __exportStar(require("./icons/CleanIcon/CleanIcon"), exports);
 __exportStar(require("./icons/DeselectIcon/DeselectIcon"), exports);
 __exportStar(require("./icons/FileStorageIcon/FileStorageIcon"), exports);
 __exportStar(require("./icons/FolderAddIcon/FolderAddIcon"), exports);
+__exportStar(require("./icons/FolderIcon/FolderIcon"), exports);
 __exportStar(require("./icons/FolderMoveToIcon/FolderMoveToIcon"), exports);
 __exportStar(require("./icons/SelectIcon/SelectIcon"), exports);
 __exportStar(require("./icons/CloseIcon/CloseIcon"), exports);
+__exportStar(require("./icons/CloseOutlineIcon/CloseOutlineIcon"), exports);
 __exportStar(require("./icons/CloseFilledIcon/CloseFilledIcon"), exports);
 __exportStar(require("./icons/LogoutIcon/LogoutIcon"), exports);
 __exportStar(require("./icons/CheckboxIcon/CheckboxIcon"), exports);
@@ -188,6 +190,7 @@ __exportStar(require("./icons/DataFormatIcon/DataFormatIcon"), exports);
 __exportStar(require("./icons/Spinner/Spinner"), exports);
 __exportStar(require("./icons/CheckmarkIcon/CheckmarkIcon"), exports);
 __exportStar(require("./icons/DownloadIcon/DownloadIcon"), exports);
+__exportStar(require("./icons/DocumentAddIcon/DocumentAddIcon"), exports);
 __exportStar(require("./icons/EmailIcon/EmailIcon"), exports);
 __exportStar(require("./icons/SaveIcon/SaveIcon"), exports);
 __exportStar(require("./icons/CloudUploadIcon/CloudUploadIcon"), exports);
@@ -250,6 +253,7 @@ __exportStar(require("./icons/SubtractIcon/SubtractIcon"), exports);
 __exportStar(require("./icons/PlusCustomIcon/PlusCustomIcon"), exports);
 __exportStar(require("./icons/CharacterIcon/CharacterIcon"), exports);
 __exportStar(require("./icons/FileIcon/FileIcon"), exports);
+__exportStar(require("./icons/ExportIcon/ExportIcon"), exports);
 /* Layouts */
 __exportStar(require("./layouts/RootLayout"), exports);
 __exportStar(require("./layouts/PageLayout"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.39.1",
+  "version": "0.40.1",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -98,7 +98,7 @@
     "timeago.js": "^4.0.2",
     "i18next": "^22.4.12",
     "nprogress": "^0.2.0",
-    "@redocly/config": "0.8.2"
+    "@redocly/config": "0.9.0"
   },
   "scripts": {
     "start": "npm-run-all --parallel storybook storybook:tokens:watch",

package/src/components/Dropdown/Dropdown.tsx

@@ -89,15 +89,14 @@ export function Dropdown({
     >
       {dropdownTrigger}
 
-      {isOpen && (
-        <ChildrenWrapper
-          placement={placement}
-          alignment={alignment}
-          onClick={closeOnClick ? handleChildClick : undefined}
-        >
-          {children}
-        </ChildrenWrapper>
-      )}
+      <ChildrenWrapper
+        placement={placement}
+        alignment={alignment}
+        isOpen={isOpen}
+        onClick={closeOnClick ? handleChildClick : undefined}
+      >
+        {children}
+      </ChildrenWrapper>
     </DropdownWrapper>
   );
 }
@@ -119,12 +118,13 @@ const DropdownWrapper = styled.div`
   text-decoration: none;
 `;
 
-const ChildrenWrapper = styled.div<{ placement?: string; alignment?: string }>`
+const ChildrenWrapper = styled.div<{ placement?: string; alignment?: string; isOpen?: boolean }>`
   position: absolute;
   top: ${({ placement }) => (placement === 'top' ? 'auto' : '100%')};
   bottom: ${({ placement }) => (placement === 'top' ? '100%' : 'auto')};
   left: ${({ alignment }) => (alignment === 'start' ? '0' : 'auto')};
   right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
+  display: ${({ isOpen }) => (isOpen ? 'block' : 'none')};
 
   z-index: var(--z-index-raised);
 `;

package/src/components/Footer/FooterCopyright.tsx

@@ -13,9 +13,9 @@ export function FooterCopyright({
   copyrightText = '',
   className,
 }: FooterCopyrightProps): JSX.Element | null {
-  const { useTranslate, useI18n } = useThemeHooks();
+  const { useTranslate, useL10n } = useThemeHooks();
   const { translate } = useTranslate();
-  const { changeLanguage } = useI18n();
+  const { changeLanguage } = useL10n();
 
   return copyrightText ? (
     <FooterCopyrightWrapper

package/src/components/LastUpdated/LastUpdated.tsx

@@ -23,9 +23,9 @@ export type LastUpdatedProps = {
 
 export function LastUpdated(props: LastUpdatedProps): JSX.Element | null {
   const { markdown: { lastUpdatedBlock = {} } = {} } = useThemeConfig();
-  const { useTranslate, useI18nConfig } = useThemeHooks();
+  const { useTranslate, useL10nConfig } = useThemeHooks();
   const { translate } = useTranslate();
-  const { currentLocale } = useI18nConfig();
+  const { currentLocale } = useL10nConfig();
 
   if (lastUpdatedBlock?.hide) {
     return null;

package/src/components/Navbar/Navbar.tsx

@@ -24,8 +24,8 @@ export type NavbarProps = {
 export function Navbar({ className }: NavbarProps): JSX.Element | null {
   const { isOpen, openMobileMenu, closeMobileMenu } = useMobileMenu(false);
   const themeConfig = useThemeConfig();
-  const { useI18n, useTelemetry } = useThemeHooks();
-  const { changeLanguage } = useI18n();
+  const { useL10n, useTelemetry } = useThemeHooks();
+  const { changeLanguage } = useL10n();
   const telemetry = useTelemetry();
 
   const menu = themeConfig.navbar?.items;

package/src/components/Navbar/NavbarItem.tsx

@@ -20,9 +20,9 @@ export type NavbarItemProps = {
 
 export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element | null {
   const { pathname } = useLocation();
-  const { useTranslate, useI18nConfig, useTelemetry } = useThemeHooks();
+  const { useTranslate, useL10nConfig, useTelemetry } = useThemeHooks();
   const { translate } = useTranslate();
-  const { defaultLocale, currentLocale, locales } = useI18nConfig();
+  const { defaultLocale, currentLocale, locales } = useL10nConfig();
   const telemetry = useTelemetry();
 
   if (navItem.type !== 'link' && !navItem.items) return null;

package/src/core/hooks/__mocks__/use-theme-hooks.ts

@@ -19,10 +19,10 @@ export const useThemeHooks = jest.fn(() => ({
     filterTerm: '',
     setFilterTerm: jest.fn(),
   })),
-  useI18n: jest.fn(() => ({
+  useL10n: jest.fn(() => ({
     changeLanguage: jest.fn(),
   })),
-  useI18nConfig: jest.fn(() => ({
+  useL10nConfig: jest.fn(() => ({
     currentLocale: 'en',
     defaultLocale: 'en',
     locales: [

package/src/core/hooks/menu/use-mobile-menu-items.ts

@@ -16,10 +16,10 @@ const MENU_SEPARATOR: ResolvedNavItem = {
 };
 
 export const useMobileMenuItems = (menuType: MobileMenuType) => {
-  const { useTranslate, useI18nConfig, useCurrentProduct, usePageVersions, useSidebarItems } =
+  const { useTranslate, useL10nConfig, useCurrentProduct, usePageVersions, useSidebarItems } =
     useThemeHooks();
   const { versions = [] } = usePageVersions() || {};
-  const { defaultLocale, currentLocale, locales } = useI18nConfig();
+  const { defaultLocale, currentLocale, locales } = useL10nConfig();
   const { translate } = useTranslate();
   const activeVersion = versions.find((version) => version.active);
   const {

package/src/core/hooks/use-language-picker.ts

@@ -1,16 +1,16 @@
-import type { I18nConfig } from '@redocly/theme/core/types';
+import type { L10nConfig } from '@redocly/theme/core/types';
 
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { getPathnameForLocale, withPathPrefix } from '@redocly/theme/core/utils';
 
 export function useLanguagePicker(): {
-  currentLocale: I18nConfig['locales'][number] | undefined;
-  locales: I18nConfig['locales'];
+  currentLocale: L10nConfig['locales'][number] | undefined;
+  locales: L10nConfig['locales'];
   setLocale: (value: string) => void;
 } {
-  const { useI18nConfig, usePreloadHistory } = useThemeHooks();
+  const { useL10nConfig, usePreloadHistory } = useThemeHooks();
   const history = usePreloadHistory();
-  const { currentLocale, locales, defaultLocale } = useI18nConfig();
+  const { currentLocale, locales, defaultLocale } = useL10nConfig();
 
   const locale = locales.find((l) => l.code === currentLocale);
 

package/src/core/types/hooks.ts

@@ -15,10 +15,20 @@ import type {
 
 export type ThemeHooks = {
   useTranslate: () => { translate: TFunction };
+  /**
+   * @deprecated use `useL10n` instead
+   * */
   useI18n: () => {
     changeLanguage: (lng?: string | undefined, callback?: Callback | undefined) => Promise<TFunc>;
   };
-  useI18nConfig: () => I18nConfig;
+  /**
+   * @deprecated use `useL10nConfig` instead
+   * */
+  useI18nConfig: () => L10nConfig;
+  useL10n: () => {
+    changeLanguage: (lng?: string | undefined, callback?: Callback | undefined) => Promise<TFunc>;
+  };
+  useL10nConfig: () => L10nConfig;
   useCurrentProduct: () => ProductUiConfig | undefined;
   useProducts: () => ProductUiConfig[];
   usePageVersions: () => {
@@ -66,7 +76,7 @@ export type ThemeHooks = {
   usePageProps: <T extends Record<string, unknown>>() => PageProps & T;
 };
 
-export type I18nConfig = {
+export type L10nConfig = {
   currentLocale: string;
   defaultLocale: string;
   locales: { code: string; name: string }[];

package/src/core/types/index.ts

@@ -1,6 +1,6 @@
 export * from '@redocly/theme/core/types/breadcrumb';
 export * from '@redocly/theme/core/types/catalog';
-export * from '@redocly/theme/core/types/i18n';
+export * from '@redocly/theme/core/types/l10n';
 export * from '@redocly/theme/core/types/feedback';
 export * from '@redocly/theme/core/types/hooks';
 export * from '@redocly/theme/core/types/markdown';

package/src/icons/CloseOutlineIcon/CloseOutlineIcon.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" {...props}>
+    <g>
+      <path d="M7 0.875C3.5875 0.875 0.875 3.5875 0.875 7C0.875 10.4125 3.5875 13.125 7 13.125C10.4125 13.125 13.125 10.4125 13.125 7C13.125 3.5875 10.4125 0.875 7 0.875ZM7 12.25C4.1125 12.25 1.75 9.8875 1.75 7C1.75 4.1125 4.1125 1.75 7 1.75C9.8875 1.75 12.25 4.1125 12.25 7C12.25 9.8875 9.8875 12.25 7 12.25Z" />
+      <path d="M9.3625 10.0625L7 7.7L4.6375 10.0625L3.9375 9.3625L6.3 7L3.9375 4.6375L4.6375 3.9375L7 6.3L9.3625 3.9375L10.0625 4.6375L7.7 7L10.0625 9.3625L9.3625 10.0625Z" />
+    </g>
+  </svg>
+);
+
+export const CloseOutlineIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/CloseOutlineIcon/CloseOutlineIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+  cursor: pointer;
+`;

package/src/icons/DocumentAddIcon/DocumentAddIcon.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M15 11.9999H13V9.99993H12V11.9999H10V12.9999H12V14.9999H13V12.9999H15V11.9999Z" />
+    <path d="M8 13.9999H4V1.99993H8V4.99993C8.00077 5.26491 8.10637 5.51882 8.29374 5.70619C8.48111 5.89356 8.73502 5.99916 9 5.99993H12V7.99993H13V4.99993C13.0018 4.93421 12.9893 4.86889 12.9634 4.80847C12.9375 4.74804 12.8988 4.69395 12.85 4.64993L9.35 1.14993C9.30599 1.10109 9.2519 1.06239 9.19147 1.03649C9.13104 1.01059 9.06572 0.99812 9 0.999928H4C3.73502 1.00069 3.48111 1.1063 3.29374 1.29367C3.10637 1.48104 3.00077 1.73495 3 1.99993V13.9999C3.00077 14.2649 3.10637 14.5188 3.29374 14.7062C3.48111 14.8936 3.73502 14.9992 4 14.9999H8V13.9999ZM9 2.19993L11.8 4.99993H9V2.19993Z" />
+  </svg>
+);
+
+export const DocumentAddIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/DocumentAddIcon/DocumentAddIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/ExportIcon/ExportIcon.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M13 12V14H3V12H2V14L2.0038 13.9976C2.00333 14.1288 2.02873 14.2589 2.07854 14.3803C2.12836 14.5017 2.20163 14.6121 2.29414 14.7052C2.38666 14.7983 2.49662 14.8723 2.61774 14.9229C2.73885 14.9734 2.86875 14.9997 3 15H13C13.2652 15 13.5196 14.8946 13.7071 14.7071C13.8946 14.5196 14 14.2652 14 14V12H13Z" />
+    <path d="M3 6L3.7055 6.7025L7.5 2.9125V12H8.5V2.9125L12.2955 6.7025L13 6L8 1L3 6Z" />
+  </svg>
+);
+
+export const ExportIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ExportIcon/ExportIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/FolderIcon/FolderIcon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" fill="none" {...props}>
+    <path d="M4.88688 2.625L6.38313 4.11688L6.63688 4.375H12.25V11.375H1.75V2.625H4.88688ZM4.88688 1.75H1.75C1.51794 1.75 1.29538 1.84219 1.13128 2.00628C0.967187 2.17038 0.875 2.39294 0.875 2.625V11.375C0.875 11.6071 0.967187 11.8296 1.13128 11.9937C1.29538 12.1578 1.51794 12.25 1.75 12.25H12.25C12.4821 12.25 12.7046 12.1578 12.8687 11.9937C13.0328 11.8296 13.125 11.6071 13.125 11.375V4.375C13.125 4.14294 13.0328 3.92038 12.8687 3.75628C12.7046 3.59219 12.4821 3.5 12.25 3.5H7L5.50813 2.00813C5.42672 1.92624 5.32992 1.86127 5.2233 1.81697C5.11667 1.77267 5.00234 1.74991 4.88688 1.75Z" />
+  </svg>
+);
+
+export const FolderIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/FolderIcon/FolderIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/index.ts

@@ -147,9 +147,11 @@ export * from '@redocly/theme/icons/CleanIcon/CleanIcon';
 export * from '@redocly/theme/icons/DeselectIcon/DeselectIcon';
 export * from '@redocly/theme/icons/FileStorageIcon/FileStorageIcon';
 export * from '@redocly/theme/icons/FolderAddIcon/FolderAddIcon';
+export * from '@redocly/theme/icons/FolderIcon/FolderIcon';
 export * from '@redocly/theme/icons/FolderMoveToIcon/FolderMoveToIcon';
 export * from '@redocly/theme/icons/SelectIcon/SelectIcon';
 export * from '@redocly/theme/icons/CloseIcon/CloseIcon';
+export * from '@redocly/theme/icons/CloseOutlineIcon/CloseOutlineIcon';
 export * from '@redocly/theme/icons/CloseFilledIcon/CloseFilledIcon';
 export * from '@redocly/theme/icons/LogoutIcon/LogoutIcon';
 export * from '@redocly/theme/icons/CheckboxIcon/CheckboxIcon';
@@ -160,6 +162,7 @@ export * from '@redocly/theme/icons/DataFormatIcon/DataFormatIcon';
 export * from '@redocly/theme/icons/Spinner/Spinner';
 export * from '@redocly/theme/icons/CheckmarkIcon/CheckmarkIcon';
 export * from '@redocly/theme/icons/DownloadIcon/DownloadIcon';
+export * from '@redocly/theme/icons/DocumentAddIcon/DocumentAddIcon';
 export * from '@redocly/theme/icons/EmailIcon/EmailIcon';
 export * from '@redocly/theme/icons/SaveIcon/SaveIcon';
 export * from '@redocly/theme/icons/CloudUploadIcon/CloudUploadIcon';
@@ -222,6 +225,7 @@ export * from '@redocly/theme/icons/SubtractIcon/SubtractIcon';
 export * from '@redocly/theme/icons/PlusCustomIcon/PlusCustomIcon';
 export * from '@redocly/theme/icons/CharacterIcon/CharacterIcon';
 export * from '@redocly/theme/icons/FileIcon/FileIcon';
+export * from '@redocly/theme/icons/ExportIcon/ExportIcon';
 /* Layouts */
 export * from '@redocly/theme/layouts/RootLayout';
 export * from '@redocly/theme/layouts/PageLayout';