@redocly/theme 0.2.1 → 0.3.0

package/ColorModeSwitcher/ColorModeSwitcher.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function ColorModeSwitcher(): JSX.Element | null;

package/ColorModeSwitcher/ColorModeSwitcher.js

@@ -0,0 +1,80 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorModeSwitcher = void 0;
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var hooks_1 = require("../mocks/hooks");
+var constants_1 = require("../mocks/constants");
+var ColorModeIcon_1 = require("../icons/ColorModeIcon");
+var hooks_2 = require("../hooks");
+function ColorModeSwitcher() {
+    var themeSettings = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME);
+    var colorMode = themeSettings.colorMode;
+    var _a = __read((0, react_1.useState)(''), 2), activeColorMode = _a[0], setActiveColorMode = _a[1];
+    (0, hooks_2.useMount)(function () {
+        setActiveColorMode(document.documentElement.className || (colorMode === null || colorMode === void 0 ? void 0 : colorMode.default));
+    });
+    if (!(colorMode === null || colorMode === void 0 ? void 0 : colorMode.modes) || (colorMode === null || colorMode === void 0 ? void 0 : colorMode.hide)) {
+        return null;
+    }
+    var handelChangeColorMode = function () {
+        var activeIndex = colorMode.modes.indexOf(activeColorMode);
+        var mode = activeIndex < colorMode.modes.length - 1
+            ? colorMode.modes[activeIndex + 1]
+            : colorMode.modes[0];
+        setActiveColorMode(mode);
+        localStorage.setItem('colorSchema', mode);
+        document.documentElement.className = mode;
+    };
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "ColorModeSwitcher/ColorModeSwitcher", onClick: handelChangeColorMode },
+        react_1.default.createElement(ColorModeIcon_1.ColorModeIcon, { mode: activeColorMode })));
+}
+exports.ColorModeSwitcher = ColorModeSwitcher;
+var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-left: calc(var(--sidebar-spacing-horizontal) * 2);\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"], ["\n  margin-left: calc(var(--sidebar-spacing-horizontal) * 2);\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"])));
+var templateObject_1;

package/ColorModeSwitcher/index.d.ts

@@ -0,0 +1 @@
+export * from '../ColorModeSwitcher/ColorModeSwitcher';

package/ColorModeSwitcher/index.js

@@ -0,0 +1,17 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../ColorModeSwitcher/ColorModeSwitcher"), exports);

package/CopyButton/CopyButtonWrapper.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
+import { TooltipProps } from '../Tooltip';
 export interface CopyButtonWrapperProps {
     data: unknown;
     children: (props: {
-        renderCopyButton: () => JSX.Element;
+        renderCopyButton: (placement?: TooltipProps['placement']) => JSX.Element;
     }) => JSX.Element;
     dataTestId?: string;
 }

package/CopyButton/CopyButtonWrapper.js

@@ -43,8 +43,9 @@ function CopyButtonWrapperComponent(_a) {
         utils_1.ClipboardService.copyCustom(content);
         showTooltip();
     };
-    var renderCopyButton = function () {
-        return (react_1.default.createElement(Tooltip_1.Tooltip, { className: "copy-button", tip: utils_1.ClipboardService.isSupported() ? 'Copied' : 'Not supported in your browser', isOpen: tooltip.isOpened },
+    var renderCopyButton = function (placement) {
+        if (placement === void 0) { placement = 'top'; }
+        return (react_1.default.createElement(Tooltip_1.Tooltip, { className: "copy-button", tip: utils_1.ClipboardService.isSupported() ? 'Copied' : 'Not supported in your browser', isOpen: tooltip.isOpened, placement: placement },
             react_1.default.createElement(SamplesPanelControls_1.SamplesControlButton, { onClick: copy, "data-cy": dataTestId }, "Copy")));
     };
     return children({ renderCopyButton: renderCopyButton });

package/Markdown/Details.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare type DetailsProps = {
+    summary: string;
+};
+export declare function Details({ summary, children }: React.PropsWithChildren<DetailsProps>): JSX.Element;
+export {};

package/Markdown/Details.js

@@ -0,0 +1,22 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Details = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+function Details(_a) {
+    var summary = _a.summary, children = _a.children;
+    return (react_1.default.createElement(StyledDetails, null,
+        react_1.default.createElement("summary", null, summary),
+        react_1.default.createElement(StyledDetailsContent, null, children)));
+}
+exports.Details = Details;
+var StyledDetails = styled_components_1.default.details(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+var StyledDetailsContent = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
+var templateObject_1, templateObject_2;

package/Markdown/MarkdownLayout.d.ts

@@ -2,6 +2,8 @@ import React from 'react';
 declare type MarkdownLayoutProps = {
     tableOfContent: React.ReactNode;
     markdownWrapper: React.ReactNode;
+    showPrevButton?: boolean;
+    showNextButton?: boolean;
 };
-export declare function MarkdownLayout({ tableOfContent, markdownWrapper, }: MarkdownLayoutProps): JSX.Element;
+export declare function MarkdownLayout({ tableOfContent, markdownWrapper, showPrevButton, showNextButton, }: MarkdownLayoutProps): JSX.Element;
 export {};

package/Markdown/MarkdownLayout.js

@@ -9,11 +9,11 @@ var PageWrapper_1 = require("../Markdown/PageWrapper");
 var ContentWrapper_1 = require("../Markdown/ContentWrapper");
 var PageNavigation_1 = require("../PageNavigation/PageNavigation");
 function MarkdownLayout(_a) {
-    var tableOfContent = _a.tableOfContent, markdownWrapper = _a.markdownWrapper;
+    var tableOfContent = _a.tableOfContent, markdownWrapper = _a.markdownWrapper, showPrevButton = _a.showPrevButton, showNextButton = _a.showNextButton;
     return (react_1.default.createElement(PageWrapper_1.PageWrapper, { "data-component-name": "Markdown/MarkdownLayout" },
         react_1.default.createElement(ContentWrapper_1.ContentWrapper, { withToc: true },
             markdownWrapper,
-            react_1.default.createElement(PageNavigation_1.PageNavigation, null)),
+            react_1.default.createElement(PageNavigation_1.PageNavigation, { showPrevButton: showPrevButton, showNextButton: showNextButton })),
         tableOfContent));
 }
 exports.MarkdownLayout = MarkdownLayout;

package/Navbar/Navbar.js

@@ -32,6 +32,7 @@ var Navbar_1 = require("../Navbar");
 var useMobileMenu_1 = require("../hooks/useMobileMenu");
 var MobileNavbarMenuButton_1 = require("../Navbar/MobileNavbarMenuButton");
 var MobileNavbarMenu_1 = require("../Navbar/MobileNavbarMenu");
+var ColorModeSwitcher_1 = require("../ColorModeSwitcher/ColorModeSwitcher");
 function Navbar(_a) {
     var menu = _a.menu, logo = _a.logo, search = _a.search, profile = _a.profile;
     var _b = __read((0, useMobileMenu_1.useMobileMenu)(false), 2), isOpen = _b[0], setIsOpen = _b[1];
@@ -48,7 +49,8 @@ function Navbar(_a) {
         logo,
         react_1.default.createElement(Navbar_1.NavbarMenu, { menuItems: menu }),
         hideSearch ? null : search,
-        profile));
+        profile,
+        react_1.default.createElement(ColorModeSwitcher_1.ColorModeSwitcher, null)));
 }
 exports.Navbar = Navbar;
 exports.NavbarContainer = styled_components_1.default.nav(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: var(--navbar-height);\n  box-sizing: border-box;\n  display: flex;\n  color: var(--navbar-text-color);\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n\n  font-size: 0.875rem;\n  position: sticky;\n  top: 0;\n  z-index: 200;\n  padding: 10px var(--sidebar-margin-left);\n  background: var(--navbar-background-color);\n  font-family: var(--h-font-family);\n\n  ", " {\n    padding: 10px var(--sidebar-margin-left);\n    font-size: 1rem;\n  }\n\n  ", " {\n    background: transparent;\n    display: none;\n    > :not(a, img) {\n      display: none !important;\n    }\n    img {\n      padding: 0;\n      margin: 0;\n    }\n  }\n"], ["\n  height: var(--navbar-height);\n  box-sizing: border-box;\n  display: flex;\n  color: var(--navbar-text-color);\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n\n  font-size: 0.875rem;\n  position: sticky;\n  top: 0;\n  z-index: 200;\n  padding: 10px var(--sidebar-margin-left);\n  background: var(--navbar-background-color);\n  font-family: var(--h-font-family);\n\n  ", " {\n    padding: 10px var(--sidebar-margin-left);\n    font-size: 1rem;\n  }\n\n  ", " {\n    background: transparent;\n    display: none;\n    > :not(a, img) {\n      display: none !important;\n    }\n    img {\n      padding: 0;\n      margin: 0;\n    }\n  }\n"])), function (_a) {

package/Navbar/NavbarMenu.js

@@ -14,7 +14,7 @@ var NavbarItem_1 = require("../Navbar/NavbarItem");
 var utils_1 = require("../utils");
 function NavbarMenu(_a) {
     var menuItems = _a.menuItems;
-    if ((0, utils_1.isPrimitive)(menuItems) || (0, utils_1.isEmptyArray)(menuItems)) {
+    if ((0, utils_1.isPrimitive)(menuItems)) {
         return null;
     }
     return (react_1.default.createElement(NavItemsContainer, { "data-component-name": "Navbar/NavbarMenu" }, menuItems.map(function (navItem, index) {

package/PageNavigation/PageNavigation.d.ts

@@ -1,2 +1,7 @@
 /// <reference types="react" />
-export declare function PageNavigation(): JSX.Element | null;
+declare type PageNavigationProps = {
+    showPrevButton?: boolean;
+    showNextButton?: boolean;
+};
+export declare function PageNavigation({ showPrevButton, showNextButton, }: PageNavigationProps): JSX.Element | null;
+export {};

package/PageNavigation/PageNavigation.js

@@ -14,14 +14,15 @@ var PreviousPageLink_1 = require("../PageNavigation/PreviousPageLink");
 var NextPageLink_1 = require("../PageNavigation/NextPageLink");
 var hooks_1 = require("../mocks/hooks");
 var constants_1 = require("../mocks/constants");
-function PageNavigation() {
+function PageNavigation(_a) {
+    var _b = _a.showPrevButton, showPrevButton = _b === void 0 ? true : _b, _c = _a.showNextButton, showNextButton = _c === void 0 ? true : _c;
     var navigation = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME).navigation;
     if (navigation === null || navigation === void 0 ? void 0 : navigation.hide) {
         return null;
     }
     return (react_1.default.createElement(PageNavigationWrapper, { "data-component-name": "PageNavigation/PageNavigation" },
-        react_1.default.createElement(PreviousPageLink_1.PreviousPageLink, null),
-        react_1.default.createElement(NextPageLink_1.NextPageLink, null)));
+        showPrevButton && react_1.default.createElement(PreviousPageLink_1.PreviousPageLink, null),
+        showNextButton && react_1.default.createElement(NextPageLink_1.NextPageLink, null)));
 }
 exports.PageNavigation = PageNavigation;
 var PageNavigationWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  margin: 25px 0;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  margin: 25px 0;\n"])));

package/SourceCode/SourceCode.js

@@ -61,12 +61,12 @@ function SourceCode(_a) {
     // Because we don't have session storage in ssr and can't get the security details there
     // Issue for more details https://github.com/Redocly/reference-docs/issues/888
     (0, react_1.useEffect)(function () {
-        var _a, _b, _c;
-        var _externalSource = (_c = (_b = (_a = externalSource === null || externalSource === void 0 ? void 0 : externalSource.sample) === null || _a === void 0 ? void 0 : _a.get) === null || _b === void 0 ? void 0 : _b.call(_a, externalSource)) !== null && _c !== void 0 ? _c : '';
-        if (_externalSource) {
-            setSourceCode(_externalSource);
+        var _a, _b;
+        var _source = source || ((_b = (_a = externalSource === null || externalSource === void 0 ? void 0 : externalSource.sample) === null || _a === void 0 ? void 0 : _a.get) === null || _b === void 0 ? void 0 : _b.call(_a, externalSource));
+        if (_source) {
+            setSourceCode(_source);
         }
-    }, [externalSource]);
+    }, [source, externalSource]);
     if (withCopyButton) {
         return (react_1.default.createElement(CopyButton_1.CopyButtonWrapper, { data: sourceCode, "data-component-name": "SourceCode/SourceCode" }, function (_a) {
             var renderCopyButton = _a.renderCopyButton;

package/globalStyle.d.ts

@@ -1,2 +1,3 @@
+export declare const darkMode: import("styled-components").FlattenSimpleInterpolation;
 export declare const styles: import("styled-components").FlattenSimpleInterpolation;
 export declare const GlobalStyle: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;