@redocly/theme 0.4.7 → 0.4.9

package/Button/Button.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FlattenSimpleInterpolation } from 'styled-components';
+import type { FlattenSimpleInterpolation } from 'styled-components';
 export declare type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge' | string;
 export declare type ButtonColor = 'primary' | 'secondary' | 'default' | string;
 export declare type ButtonVariant = 'outlined' | 'contained';

package/Cards/Card.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ResolvedNavItem } from '@theme/types/portal';
+import type { ResolvedNavItem } from '@theme/types/portal';
 export interface CardProps {
     title?: string;
     icon?: string;

package/Cards/Card.js

@@ -20,6 +20,6 @@ function Card(props) {
             react_1.default.createElement(Link_1.Link, { to: item.link }, item.label))); })))));
 }
 exports.Card = Card;
-var CardWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 10px;\n  box-shadow: 0px 10px 30px 0px rgba(35, 35, 35, 0.1);\n  padding: 20px;\n  margin: 0 20px 20px 0;\n  min-width: 25%;\n  font-family: var(--font-family-base);\n"], ["\n  border-radius: 10px;\n  box-shadow: 0px 10px 30px 0px rgba(35, 35, 35, 0.1);\n  padding: 20px;\n  margin: 0 20px 20px 0;\n  min-width: 25%;\n  font-family: var(--font-family-base);\n"])));
+var CardWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 10px;\n  box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.1);\n  padding: 20px;\n  margin: 0 20px 20px 0;\n  min-width: 25%;\n  font-family: var(--font-family-base);\n"], ["\n  border-radius: 10px;\n  box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.1);\n  padding: 20px;\n  margin: 0 20px 20px 0;\n  min-width: 25%;\n  font-family: var(--font-family-base);\n"])));
 var CardLinksList = styled_components_1.default.ul(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n\n  li {\n    margin-bottom: 10px;\n  }\n"], ["\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n\n  li {\n    margin-bottom: 10px;\n  }\n"])));
 var templateObject_1, templateObject_2;

package/CopyButton/CopyButtonWrapper.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
-import { TooltipProps } from '../Tooltip';
+import type { TooltipProps } from '../Tooltip';
 export interface CopyButtonWrapperProps {
     data: unknown;
     children: (props: {
         renderCopyButton: (placement?: TooltipProps['placement']) => JSX.Element;
     }) => JSX.Element;
+    onCopyClick?: () => void;
     dataTestId?: string;
 }
 export declare const CopyButtonWrapper: React.NamedExoticComponent<CopyButtonWrapperProps>;

package/CopyButton/CopyButtonWrapper.js

@@ -30,7 +30,7 @@ var Tooltip_1 = require("../Tooltip");
 var hooks_1 = require("../hooks");
 var utils_1 = require("../utils");
 function CopyButtonWrapperComponent(_a) {
-    var data = _a.data, children = _a.children, _b = _a.dataTestId, dataTestId = _b === void 0 ? 'copy-button' : _b;
+    var data = _a.data, children = _a.children, onCopyClick = _a.onCopyClick, _b = _a.dataTestId, dataTestId = _b === void 0 ? 'copy-button' : _b;
     var tooltip = (0, hooks_1.useControl)();
     var showTooltip = function () {
         tooltip.handleOpen();
@@ -42,6 +42,7 @@ function CopyButtonWrapperComponent(_a) {
         var content = typeof data === 'string' ? data : JSON.stringify(data, null, 2);
         utils_1.ClipboardService.copyCustom(content);
         showTooltip();
+        onCopyClick === null || onCopyClick === void 0 ? void 0 : onCopyClick();
     };
     var renderCopyButton = function (placement) {
         if (placement === void 0) { placement = 'top'; }

package/Footer/CustomFooter.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { NavGroupRecord } from '@theme/types/portal';
+import type { NavGroupRecord } from '@theme/types/portal';
 interface FooterProps {
     data: NavGroupRecord;
 }

package/JsonViewer/JsonViewer.d.ts

@@ -5,6 +5,7 @@ export interface JsonProps {
     jsonSampleExpandLevel: number;
     withLineNumbers?: boolean;
     startLineNumber?: number;
+    onCopyClick?: () => void;
 }
 export declare const Json: React.NamedExoticComponent<JsonProps>;
 export declare const JsonViewer: import("styled-components").StyledComponent<React.NamedExoticComponent<JsonProps>, any, {

package/JsonViewer/JsonViewer.js

@@ -50,7 +50,7 @@ var utils_1 = require("../utils");
 var hooks_1 = require("../hooks");
 var CodeBlock_1 = require("../CodeBlock");
 function JsonComponent(_a) {
-    var data = _a.data, jsonSampleExpandLevel = _a.jsonSampleExpandLevel, className = _a.className, withLineNumbers = _a.withLineNumbers, startLineNumber = _a.startLineNumber;
+    var data = _a.data, jsonSampleExpandLevel = _a.jsonSampleExpandLevel, className = _a.className, withLineNumbers = _a.withLineNumbers, startLineNumber = _a.startLineNumber, onCopyClick = _a.onCopyClick;
     var node = (0, react_1.useRef)(null);
     (0, hooks_1.useMount)(function () {
         var _a;
@@ -136,7 +136,7 @@ function JsonComponent(_a) {
                     __html: (0, utils_1.jsonToHTML)(data, jsonSampleExpandLevel, startLineNumber),
                 } })));
     };
-    return (react_1.default.createElement(CopyButton_1.CopyButtonWrapper, { "data-cy": "copy-button", data: data }, renderInner));
+    return (react_1.default.createElement(CopyButton_1.CopyButtonWrapper, { "data-cy": "copy-button", data: data, onCopyClick: onCopyClick }, renderInner));
 }
 exports.Json = (0, react_1.memo)(JsonComponent);
 exports.JsonViewer = (0, styled_components_1.default)(exports.Json).attrs(function () { return ({

package/Markdown/CodeSample/CodeSample.d.ts

@@ -1,8 +1,15 @@
 /// <reference types="react" />
-declare type CodeSampleProps = {
+export interface MdCopyCodeProps {
+    enabled?: boolean;
+    buttonText?: string;
+    tooltipText?: string;
+    toasterText?: string;
+    toasterDuration?: number;
+}
+export declare type CodeSampleProps = {
     language: string;
     highlighted: string;
     rawContent: string;
+    copyCodeSnippet: MdCopyCodeProps;
 };
-export declare function CodeSample({ rawContent, highlighted, language }: CodeSampleProps): JSX.Element;
-export {};
+export declare function CodeSample({ rawContent, highlighted, language, copyCodeSnippet, }: CodeSampleProps): JSX.Element;

package/Markdown/CodeSample/CodeSample.js

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -47,19 +58,27 @@ exports.CodeSample = void 0;
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var ClipboardService_1 = require("../../utils/ClipboardService");
+var defaultCopyCodeSnippet = {
+    enabled: true,
+    buttonText: 'Copy',
+    tooltipText: 'Copy the code snippet',
+    toasterText: 'Copied',
+    toasterDuration: 1500,
+};
 function CodeSample(_a) {
-    var rawContent = _a.rawContent, highlighted = _a.highlighted, language = _a.language;
+    var rawContent = _a.rawContent, highlighted = _a.highlighted, language = _a.language, copyCodeSnippet = _a.copyCodeSnippet;
     var langClassName = language ? "language-".concat(language) : '';
+    var copyCodeProps = __assign(__assign({}, defaultCopyCodeSnippet), copyCodeSnippet);
     var _b = __read((0, react_1.useState)(false), 2), isCopied = _b[0], setIsCopied = _b[1];
     var copyCode = function (code) {
         ClipboardService_1.ClipboardService.copyCustom(code);
         setIsCopied(true);
-        setTimeout(function () { return setIsCopied(false); }, 1500);
+        setTimeout(function () { return setIsCopied(false); }, copyCodeProps.toasterDuration);
     };
     return (react_1.default.createElement(Wrapper, { className: "code-sample", "data-component-name": "Markdown/CodeSample/CodeSample" },
-        react_1.default.createElement(CodeSampleButtonContainer, { onClick: function () { return copyCode(rawContent); } },
-            !isCopied && react_1.default.createElement(CopyCodeButton, { title: "Copy the code snippet" }, "Copy"),
-            isCopied && react_1.default.createElement(DoneIndicator, null, "Copied")),
+        copyCodeProps.enabled && (react_1.default.createElement(CodeSampleButtonContainer, { onClick: function () { return copyCode(rawContent); } },
+            !isCopied && (react_1.default.createElement(CopyCodeButton, { title: copyCodeProps.tooltipText }, copyCodeProps.buttonText)),
+            isCopied && react_1.default.createElement(DoneIndicator, null, copyCodeProps.toasterText))),
         react_1.default.createElement("pre", { className: langClassName },
             react_1.default.createElement("code", { className: langClassName, dangerouslySetInnerHTML: { __html: highlighted } }))));
 }

package/Markdown/Heading.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 export declare function Heading({ level, id, children, }: PropsWithChildren<{
     level: number;
     id: string;

package/Markdown/MarkdownWrapper.d.ts

@@ -1,4 +1,4 @@
-import { FlattenSimpleInterpolation } from 'styled-components';
+import type { FlattenSimpleInterpolation } from 'styled-components';
 export declare const baseTable: FlattenSimpleInterpolation;
 export declare function headingAnchor(className?: string): FlattenSimpleInterpolation;
 export declare const MarkdownWrapper: import("styled-components").StyledComponent<"main", any, {

package/Markdown/Sup.d.ts

@@ -1,2 +1,2 @@
-import { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 export declare function Sup({ children }: PropsWithChildren<unknown>): JSX.Element;

package/Markdown/Tabs/Tabs.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 declare type TabsProps = PropsWithChildren<{
     children: {
         props: {

package/Navbar/Navbar.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ResolvedConfigLinks } from '@theme/types/portal';
+import type { ResolvedConfigLinks } from '@theme/types/portal';
 interface NavbarProps {
     menu: ResolvedConfigLinks;
     logo: React.ReactNode;

package/NavbarLogo/NavbarLogo.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { LogoConfig } from '@theme/types/portal';
+import type { LogoConfig } from '@theme/types/portal';
 export declare type NavbarLogoProps = {
     logo: Pick<LogoConfig, 'image' | 'link' | 'altText'>;
 };

package/Panel/PanelComponent.d.ts

@@ -1,5 +1,6 @@
-import React, { PropsWithChildren, ReactNode } from 'react';
-import { PanelHeaderProps } from '../Panel/PanelHeader';
+import type { PropsWithChildren, ReactNode } from 'react';
+import React from 'react';
+import type { PanelHeaderProps } from '../Panel/PanelHeader';
 export interface PanelComponentProps {
     expanded?: boolean;
     className?: string;

package/Panel/PanelHeader.d.ts

@@ -1,4 +1,4 @@
-import { BaseSyntheticEvent } from 'react';
+import type { BaseSyntheticEvent } from 'react';
 export interface PanelHeaderProps {
     expanded?: boolean;
     disabled?: boolean;

package/Search/Autocomplete.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import type { ActiveItem } from '../mocks/types';
 interface AutocompleteProps<T> {
     placeholder?: string;

package/Search/ClearIcon.d.ts

@@ -1,4 +1,4 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from 'react';
 export declare const ClearIcon: import("styled-components").StyledComponent<(props: SVGProps<SVGSVGElement>) => JSX.Element, any, {
     'data-component-name': string;
 }, "data-component-name">;

package/Search/SearchIcon.d.ts

@@ -1,4 +1,4 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from 'react';
 export declare const SearchIcon: import("styled-components").StyledComponent<(props: SVGProps<SVGSVGElement>) => JSX.Element, any, {
     'data-component-name': string;
 }, "data-component-name">;

package/Sidebar/ApiCallItem.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { MenuItemProps } from '../Sidebar/types/MenuItemProps';
+import type { MenuItemProps } from '../Sidebar/types/MenuItemProps';
 export declare function ApiCallItem({ item }: MenuItemProps): JSX.Element;
 export declare const Badge: import("styled-components").StyledComponent<"span", any, {
     className: `operation-type ${string}`;

package/Sidebar/Drilldown.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DrilldownMenuProps } from '../Sidebar/types/DrilldownMenuProps';
+import type { DrilldownMenuProps } from '../Sidebar/types/DrilldownMenuProps';
 interface DrilldownProps extends DrilldownMenuProps {
     isExpanded: boolean;
     expand: () => void;

package/Sidebar/DrilldownMenu.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { DrilldownMenuProps } from '../Sidebar/types/DrilldownMenuProps';
+import type { DrilldownMenuProps } from '../Sidebar/types/DrilldownMenuProps';
 export declare function DrilldownMenu({ item, back, prevActiveItem, children, }: React.PropsWithChildren<DrilldownMenuProps>): JSX.Element;

package/Sidebar/DrilldownMenuItem.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { MenuItemProps } from '../Sidebar/types/MenuItemProps';
+import type { MenuItemProps } from '../Sidebar/types/MenuItemProps';
 export declare function DrilldownMenuItem({ item }: MenuItemProps): JSX.Element;

package/Sidebar/MenuGroup.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ItemState } from '../Sidebar/types/ItemState';
+import type { ItemState } from '../Sidebar/types/ItemState';
 interface MenuGroupProps {
     item: ItemState;
     isExpanded: boolean;

package/Sidebar/MenuItem.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { MenuItemProps } from '../Sidebar/types/MenuItemProps';
+import type { MenuItemProps } from '../Sidebar/types/MenuItemProps';
 export declare function MenuItem({ item }: MenuItemProps): JSX.Element;

package/Sidebar/MenuLink.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { UniversalLinkProps } from '../ui/UniversalLink';
+import type { UniversalLinkProps } from '../ui/UniversalLink';
 export declare const MenuLink: import("styled-components").StyledComponent<(props: import("react").PropsWithChildren<object>) => JSX.Element, any, {
     'data-component-name': string;
 } & UniversalLinkProps, "data-component-name">;

package/Sidebar/MenuLinkItem.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { MenuItemProps } from '../Sidebar/types/MenuItemProps';
+import type { MenuItemProps } from '../Sidebar/types/MenuItemProps';
 export declare function MenuLinkItem({ item, children, }: React.PropsWithChildren<MenuItemProps>): JSX.Element;

package/Sidebar/Separator.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { MenuItemProps } from '../Sidebar/types/MenuItemProps';
+import type { MenuItemProps } from '../Sidebar/types/MenuItemProps';
 export declare function Separator({ item }: MenuItemProps): JSX.Element;

package/Sidebar/types/DrilldownMenuProps.d.ts

@@ -1,4 +1,4 @@
-import { ItemState } from '../../Sidebar/types/ItemState';
+import type { ItemState } from '../../Sidebar/types/ItemState';
 export interface DrilldownMenuProps {
     back: () => void;
     item: ItemState;

package/Sidebar/types/ItemState.d.ts

@@ -1,5 +1,5 @@
-import { NavItem } from '../../Sidebar/types/NavItem';
-import { MenuStyle } from '../../Sidebar/types/MenuStyle';
+import type { NavItem } from '../../Sidebar/types/NavItem';
+import type { MenuStyle } from '../../Sidebar/types/MenuStyle';
 export interface ItemState extends NavItem {
     items: ItemState[];
     active: boolean;

package/Sidebar/types/MenuItemProps.d.ts

@@ -1,4 +1,4 @@
-import { ItemState } from '../../Sidebar/types/ItemState';
+import type { ItemState } from '../../Sidebar/types/ItemState';
 export interface MenuItemProps {
     item: ItemState;
     activeItem?: ItemState;

package/Sidebar/types/NavItem.d.ts

@@ -1,4 +1,4 @@
-import { MenuStyle } from '../../Sidebar/types/MenuStyle';
+import type { MenuStyle } from '../../Sidebar/types/MenuStyle';
 export interface NavItem {
     label?: string;
     sublabel?: string;

package/SourceCode/SourceCode.d.ts

@@ -7,6 +7,7 @@ export interface SourceCodeProps extends CommonCodeProps {
     lang: string;
     source?: string;
     externalSource?: ExternalSource;
+    onCopyClick?: () => void;
     withCopyButton?: boolean;
     dataTestId?: string;
 }
@@ -27,5 +28,5 @@ export interface ExternalSource {
     operation?: any;
 }
 export declare function Code({ source, lang, dataTestId, withLineNumbers, startLineNumber, }: CodeProps): JSX.Element;
-export declare function SourceCode({ lang, source, externalSource, withCopyButton, dataTestId, withLineNumbers, startLineNumber, }: SourceCodeProps): JSX.Element;
+export declare function SourceCode({ lang, source, externalSource, onCopyClick, withCopyButton, dataTestId, withLineNumbers, startLineNumber, }: SourceCodeProps): JSX.Element;
 export {};

package/SourceCode/SourceCode.js

@@ -55,7 +55,7 @@ function Code(_a) {
 }
 exports.Code = Code;
 function SourceCode(_a) {
-    var lang = _a.lang, source = _a.source, externalSource = _a.externalSource, withCopyButton = _a.withCopyButton, _b = _a.dataTestId, dataTestId = _b === void 0 ? 'source-code' : _b, withLineNumbers = _a.withLineNumbers, startLineNumber = _a.startLineNumber;
+    var lang = _a.lang, source = _a.source, externalSource = _a.externalSource, onCopyClick = _a.onCopyClick, withCopyButton = _a.withCopyButton, _b = _a.dataTestId, dataTestId = _b === void 0 ? 'source-code' : _b, withLineNumbers = _a.withLineNumbers, startLineNumber = _a.startLineNumber;
     var _c = __read((0, react_1.useState)(source !== null && source !== void 0 ? source : ''), 2), sourceCode = _c[0], setSourceCode = _c[1];
     // The same initial value should be returned for ssr and frontend to avoid issues
     // Because we don't have session storage in ssr and can't get the security details there
@@ -68,7 +68,7 @@ function SourceCode(_a) {
         }
     }, [source, externalSource]);
     if (withCopyButton) {
-        return (react_1.default.createElement(CopyButton_1.CopyButtonWrapper, { data: sourceCode, "data-component-name": "SourceCode/SourceCode" }, function (_a) {
+        return (react_1.default.createElement(CopyButton_1.CopyButtonWrapper, { data: sourceCode, onCopyClick: onCopyClick, "data-component-name": "SourceCode/SourceCode" }, function (_a) {
             var renderCopyButton = _a.renderCopyButton;
             return (react_1.default.createElement(SamplesPanelControls_1.SampleControlsWrap, null,
                 react_1.default.createElement(SamplesPanelControls_1.SampleControls, { "data-cy": "copy-button" }, renderCopyButton()),

package/TableOfContent/TableOfContent.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { MdHeading } from '@theme/types/portal';
+import type { MdHeading } from '@theme/types/portal';
 interface TableOfContentProps {
     headings?: Array<MdHeading | null> | null | undefined;
     contentWrapper: HTMLDivElement | null;

package/TableOfContent/TableOfContent.js

@@ -70,7 +70,7 @@ function TableOfContent(props) {
 }
 exports.TableOfContent = TableOfContent;
 var TocHeader = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: var(--toc-heading-font-family);\n  font-size: var(--toc-heading-font-size);\n  font-weight: var(--toc-heading-font-weight);\n  padding: var(--toc-item-padding-vertical) var(--toc-item-padding-horizontal);\n  color: var(--toc-heading-text-color);\n  text-transform: uppercase;\n"], ["\n  font-family: var(--toc-heading-font-family);\n  font-size: var(--toc-heading-font-size);\n  font-weight: var(--toc-heading-font-weight);\n  padding: var(--toc-item-padding-vertical) var(--toc-item-padding-horizontal);\n  color: var(--toc-heading-text-color);\n  text-transform: uppercase;\n"])));
-var MenuItem = styled_components_1.default.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  color: var(--toc-item-text-color);\n  background-color: var(--toc-item-background-color);\n  cursor: pointer;\n  font-size: var(--toc-item-font-size);\n  font-family: var(--toc-item-font-family);\n  padding: var(--toc-item-padding-vertical) var(--toc-item-padding-horizontal);\n  padding-left: calc(var(--toc-item-nested-offset) * ", ");\n  transition: background-color 0.3s, color 0.3s;\n  text-decoration: none;\n  word-break: break-word;\n  font-family: var(--heading-font-family);\n\n  :hover,\n  &.active {\n    color: var(--toc-item-active-text-color);\n    background-color: var(--toc-item-active-background-color);\n  }\n\n  :empty {\n    padding: 0;\n  }\n"], ["\n  display: block;\n  color: var(--toc-item-text-color);\n  background-color: var(--toc-item-background-color);\n  cursor: pointer;\n  font-size: var(--toc-item-font-size);\n  font-family: var(--toc-item-font-family);\n  padding: var(--toc-item-padding-vertical) var(--toc-item-padding-horizontal);\n  padding-left: calc(var(--toc-item-nested-offset) * ", ");\n  transition: background-color 0.3s, color 0.3s;\n  text-decoration: none;\n  word-break: break-word;\n  font-family: var(--heading-font-family);\n\n  :hover,\n  &.active {\n    color: var(--toc-item-active-text-color);\n    background-color: var(--toc-item-active-background-color);\n  }\n\n  :empty {\n    padding: 0;\n  }\n"])), function (_a) {
+var MenuItem = styled_components_1.default.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  color: var(--toc-item-text-color);\n  background-color: var(--toc-item-background-color);\n  cursor: pointer;\n  font-size: var(--toc-item-font-size);\n  padding: var(--toc-item-padding-vertical) var(--toc-item-padding-horizontal);\n  padding-left: calc(var(--toc-item-nested-offset) * ", ");\n  transition: background-color 0.3s, color 0.3s;\n  text-decoration: none;\n  word-break: break-word;\n  font-family: var(--heading-font-family, var(--toc-item-font-family));\n\n  :hover,\n  &.active {\n    color: var(--toc-item-active-text-color);\n    background-color: var(--toc-item-active-background-color);\n  }\n\n  :empty {\n    padding: 0;\n  }\n"], ["\n  display: block;\n  color: var(--toc-item-text-color);\n  background-color: var(--toc-item-background-color);\n  cursor: pointer;\n  font-size: var(--toc-item-font-size);\n  padding: var(--toc-item-padding-vertical) var(--toc-item-padding-horizontal);\n  padding-left: calc(var(--toc-item-nested-offset) * ", ");\n  transition: background-color 0.3s, color 0.3s;\n  text-decoration: none;\n  word-break: break-word;\n  font-family: var(--heading-font-family, var(--toc-item-font-family));\n\n  :hover,\n  &.active {\n    color: var(--toc-item-active-text-color);\n    background-color: var(--toc-item-active-background-color);\n  }\n\n  :empty {\n    padding: 0;\n  }\n"])), function (_a) {
     var depth = _a.depth;
     return depth;
 });

package/TableOfContent/utils.d.ts

@@ -1,4 +1,4 @@
-import { MdHeading } from '@theme/types/portal';
+import type { MdHeading } from '@theme/types/portal';
 export declare function getDisplayedHeadings(headings: Array<MdHeading | null> | null | undefined, tocMaxDepth: number): Array<MdHeading | null>;
 export declare function getDisplayedHeadingsIds(headings: Array<MdHeading | null> | null | undefined): Array<string | undefined>;
 export declare function getLeastDepth(headings: Array<MdHeading | null> | null | undefined): number;

package/TableOfContent/utils.js

@@ -23,10 +23,7 @@ function getDisplayedHeadings(headings, tocMaxDepth) {
         if (idx === 0 && heading.depth === 1) {
             return false;
         }
-        if (heading.depth && heading.depth > tocMaxDepth) {
-            return false;
-        }
-        return true;
+        return !(heading.depth && heading.depth > tocMaxDepth);
     });
 }
 exports.getDisplayedHeadings = getDisplayedHeadings;

package/hooks/useFullHeight.d.ts

@@ -1,2 +1,2 @@
-import { MutableRefObject } from 'react';
+import type { MutableRefObject } from 'react';
 export declare function useFullHeight(element: MutableRefObject<HTMLElement | null>): void;

package/hooks/useMobileMenu.d.ts

@@ -1,2 +1,2 @@
-import { Dispatch, SetStateAction } from 'react';
+import type { Dispatch, SetStateAction } from 'react';
 export declare function useMobileMenu(initialState?: boolean): [boolean, Dispatch<SetStateAction<boolean>>];

package/hooks/useOutsideClick.d.ts

@@ -1,2 +1,2 @@
-import { MutableRefObject } from 'react';
+import type { MutableRefObject } from 'react';
 export declare function useOutsideClick(ref: MutableRefObject<HTMLElement | null>, handler: (event: MouseEvent | TouchEvent) => void): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "description": "Shared UI components",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",

package/src/Button/Button.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import styled, { css, FlattenSimpleInterpolation, keyframes, Keyframes } from 'styled-components';
+import type { FlattenSimpleInterpolation, Keyframes } from 'styled-components';
+import styled, { css, keyframes } from 'styled-components';
 
 import { Link } from '@portal/Link';
 

package/src/Cards/Card.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import type { ResolvedNavItem } from '@theme/types/portal';
+
 import { Link } from '@portal/Link';
 import { H3 } from '@theme/Typography';
-import { ResolvedNavItem } from '@theme/types/portal';
 
 export interface CardProps {
   title?: string;
@@ -31,7 +32,7 @@ export function Card(props: CardProps): JSX.Element {
 
 const CardWrapper = styled.div`
   border-radius: 10px;
-  box-shadow: 0px 10px 30px 0px rgba(35, 35, 35, 0.1);
+  box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.1);
   padding: 20px;
   margin: 0 20px 20px 0;
   min-width: 25%;

package/src/CopyButton/CopyButtonWrapper.tsx

@@ -1,7 +1,9 @@
 import React, { memo } from 'react';
 
+import type { TooltipProps } from '@theme/Tooltip';
+
 import { SamplesControlButton } from '@theme/SamplesPanelControls';
-import { Tooltip, TooltipProps } from '@theme/Tooltip';
+import { Tooltip } from '@theme/Tooltip';
 import { useControl } from '@theme/hooks';
 import { ClipboardService } from '@theme/utils';
 
@@ -10,12 +12,14 @@ export interface CopyButtonWrapperProps {
   children: (props: {
     renderCopyButton: (placement?: TooltipProps['placement']) => JSX.Element;
   }) => JSX.Element;
+  onCopyClick?: () => void;
   dataTestId?: string;
 }
 
 function CopyButtonWrapperComponent({
   data,
   children,
+  onCopyClick,
   dataTestId = 'copy-button',
 }: CopyButtonWrapperProps): JSX.Element {
   const tooltip = useControl();
@@ -32,6 +36,8 @@ function CopyButtonWrapperComponent({
     const content = typeof data === 'string' ? data : JSON.stringify(data, null, 2);
     ClipboardService.copyCustom(content);
     showTooltip();
+
+    onCopyClick?.();
   };
 
   const renderCopyButton = (placement: TooltipProps['placement'] = 'top'): JSX.Element => {

package/src/Footer/CustomFooter.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import type { NavGroupRecord, ResolvedNavItem } from '@theme/types/portal';
+
 import { CustomFooterNavItem } from '@theme/Footer/CustomFooterNavItem';
 import { FooterCopyright } from '@theme/Footer/FooterCopyright';
-import { NavGroupRecord, ResolvedNavItem } from '@theme/types/portal';
 
 interface FooterProps {
   data: NavGroupRecord;

package/src/JsonViewer/JsonViewer.tsx

@@ -1,4 +1,5 @@
-import React, { memo, useRef, ReactElement } from 'react';
+import type { ReactElement } from 'react';
+import React, { memo, useRef } from 'react';
 import styled from 'styled-components';
 
 import { CopyButtonWrapper } from '@theme/CopyButton';
@@ -13,6 +14,7 @@ export interface JsonProps {
   jsonSampleExpandLevel: number;
   withLineNumbers?: boolean;
   startLineNumber?: number;
+  onCopyClick?: () => void;
 }
 
 function JsonComponent({
@@ -21,6 +23,7 @@ function JsonComponent({
   className,
   withLineNumbers,
   startLineNumber,
+  onCopyClick,
 }: JsonProps): JSX.Element {
   const node = useRef<HTMLDivElement | null>(null);
 
@@ -103,7 +106,7 @@ function JsonComponent({
   };
 
   return (
-    <CopyButtonWrapper data-cy="copy-button" data={data}>
+    <CopyButtonWrapper data-cy="copy-button" data={data} onCopyClick={onCopyClick}>
       {renderInner}
     </CopyButtonWrapper>
   );