@redocly/theme 0.16.0 → 0.17.1

package/lib/icons/ReportIcon/index.js

@@ -0,0 +1,18 @@
+"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("../../icons/ReportIcon/ReportIcon"), exports);
+//# sourceMappingURL=index.js.map

package/lib/icons/SelectIcon/SelectIcon.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface IconProps {
+    className?: string;
+    color?: string;
+}
+export declare const SelectIcon: import("styled-components").StyledComponent<({ className, color }: IconProps) => JSX.Element, any, {}, never>;
+export {};

package/lib/icons/SelectIcon/SelectIcon.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Icon = ({ className, color = 'white' }) => (react_1.default.createElement("svg", { "data-component-name": "icons/SelectIcon", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className },
+    react_1.default.createElement("path", { d: "M10.5 3.64746H1.5V4.64746H10.5V3.64746Z", fill: color }),
+    react_1.default.createElement("path", { d: "M10.5 6.64746H1.5V7.64746H10.5V6.64746Z", fill: color }),
+    react_1.default.createElement("path", { d: "M7.5 9.64746H1.5V10.6475H7.5V9.64746Z", fill: color }),
+    react_1.default.createElement("path", { d: "M10.5 10.9425L9.205 9.64746L8.5 10.3525L10.5 12.3525L14.5 8.35246L13.795 7.64746L10.5 10.9425Z", fill: color })));
+exports.SelectIcon = (0, styled_components_1.default)(Icon) `
+  width: 1.3em;
+  height: 1.3em;
+  vertical-align: middle;
+`;
+//# sourceMappingURL=SelectIcon.js.map

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

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

package/lib/icons/SelectIcon/index.js

@@ -0,0 +1,18 @@
+"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("../../icons/SelectIcon/SelectIcon"), exports);
+//# sourceMappingURL=index.js.map

package/lib/icons/index.d.ts

@@ -5,7 +5,13 @@ export * from '../icons/ColorModeIcon';
 export * from '../icons/AnchorIcon';
 export * from '../icons/ExternalIcon';
 export * from '../icons/SpinnerIcon';
+export * from '../icons/CollapseIcon';
+export * from '../icons/CopyIcon';
+export * from '../icons/DeselectIcon';
+export * from '../icons/ExpandIcon';
+export * from '../icons/FileIcon';
+export * from '../icons/ReportIcon';
+export * from '../icons/SelectIcon';
 export * from '../icons/BurgerIcon';
 export * from '../icons/CloseIcon';
 export * from '../icons/LogoutIcon';
-export * from '../icons/ExpandIcon';

package/lib/icons/index.js

@@ -21,8 +21,14 @@ __exportStar(require("../icons/ColorModeIcon"), exports);
 __exportStar(require("../icons/AnchorIcon"), exports);
 __exportStar(require("../icons/ExternalIcon"), exports);
 __exportStar(require("../icons/SpinnerIcon"), exports);
+__exportStar(require("../icons/CollapseIcon"), exports);
+__exportStar(require("../icons/CopyIcon"), exports);
+__exportStar(require("../icons/DeselectIcon"), exports);
+__exportStar(require("../icons/ExpandIcon"), exports);
+__exportStar(require("../icons/FileIcon"), exports);
+__exportStar(require("../icons/ReportIcon"), exports);
+__exportStar(require("../icons/SelectIcon"), exports);
 __exportStar(require("../icons/BurgerIcon"), exports);
 __exportStar(require("../icons/CloseIcon"), exports);
 __exportStar(require("../icons/LogoutIcon"), exports);
-__exportStar(require("../icons/ExpandIcon"), exports);
 //# sourceMappingURL=index.js.map

package/lib/layouts/Forbidden.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Forbidden = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const _theme_1 = require("../index.js");
+const Button_1 = require("../components/Button");
 const hooks_1 = require("../mocks/hooks");
 function Forbidden() {
     const { translate } = (0, hooks_1.useTranslate)();
@@ -39,7 +39,7 @@ const Description = styled_components_1.default.div `
   line-height: var(--page-403-description-line-height);
   font-weight: var(--page-403-description-font-weight);
 `;
-const HomeButton = (0, styled_components_1.default)(_theme_1.Button) `
+const HomeButton = (0, styled_components_1.default)(Button_1.Button) `
   margin-top: var(--page-403-button-margin);
 `;
 //# sourceMappingURL=Forbidden.js.map

package/lib/ui/darkColors.js

@@ -8,13 +8,13 @@ exports.darkMode = (0, styled_components_1.css) `
      * @presenter Color
      */
   --background-color: #141414;
-  --footer-background-color: #1F1F1F;
-  --navbar-background-color: #1F1F1F;
+  --footer-background-color: #1f1f1f;
+  --navbar-background-color: #1f1f1f;
   --mobile-menu-background: #141414;
   --mobile-menu-profile-background: var(--mobile-menu-background);
-  --mobile-menu-login-button-background: var(--mobile-menu-profile-background); rgba(255, 255, 255, 0.6);
+  --mobile-menu-login-button-background: var(--mobile-menu-profile-background);
   --mobile-menu-item-text-color: rgba(255, 255, 255, 0.6);
-  --mobile-menu-item-active-color: #1F1F1F;
+  --mobile-menu-item-active-color: #1f1f1f;
   --mobile-menu-item-active-text-color: rgba(255, 255, 255, 0.85);
   --mobile-menu-control-button-color: #ffffff;
   --mobile-menu-profile-border-color: #222222;

package/lib/utils/highlight.d.ts

@@ -8,6 +8,7 @@ import 'prismjs/components/prism-go.js';
 import 'prismjs/components/prism-http.js';
 import 'prismjs/components/prism-java.js';
 import 'prismjs/components/prism-lua.js';
+import 'prismjs/components/prism-markdown.js';
 import 'prismjs/components/prism-markup-templating.js';
 import 'prismjs/components/prism-markup.js';
 import 'prismjs/components/prism-objectivec.js';

package/lib/utils/highlight.js

@@ -35,6 +35,7 @@ require("prismjs/components/prism-go.js");
 require("prismjs/components/prism-http.js");
 require("prismjs/components/prism-java.js");
 require("prismjs/components/prism-lua.js");
+require("prismjs/components/prism-markdown.js");
 require("prismjs/components/prism-markup-templating.js"); // dep of php
 require("prismjs/components/prism-markup.js"); // xml
 require("prismjs/components/prism-objectivec.js");

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@redocly/theme",
-  "version": "0.16.0",
-  "description": "Shared UI components library",
+  "version": "0.17.1",
+  "description": "Shared UI components lib",
   "keywords": [
     "theme",
     "redocly"

package/src/components/CodeBlock/CodeBlock.tsx

@@ -0,0 +1,100 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+
+import { highlight, addLineNumbers } from '@theme/utils';
+import type { ReportDialogProps } from '@theme/components/Feedback';
+import { ReportDialog, useReportDialog } from '@theme/components/Feedback';
+import type { CodeBlockControlsProps } from '@theme/components/CodeBlock';
+import { CodeBlockContainer, CodeBlockControls } from '@theme/components/CodeBlock';
+
+export interface CodeBlockProps {
+  lang?: string;
+  source?: string;
+  externalSource?: ExternalSource;
+  header?: CodeBlockControlsProps;
+  dataTestId?: string;
+  className?: string;
+
+  withLineNumbers?: boolean;
+  startLineNumber?: number;
+  highlightedHtml?: string;
+  codeBlockRef?: (instance: HTMLPreElement | null) => void;
+}
+
+export interface Sample {
+  lang: string;
+  label?: string;
+}
+
+export type UnstableExternalCodeSample = Sample & {
+  get: (source: ExternalSource) => string;
+};
+
+export interface ExternalSource {
+  sample: UnstableExternalCodeSample;
+  exampleName?: string;
+  pathParams?: any;
+  properties?: any;
+  operation?: any;
+}
+
+export function CodeBlock({
+  lang,
+  source,
+  externalSource,
+  header,
+  dataTestId = 'source-code',
+  codeBlockRef,
+  highlightedHtml,
+  withLineNumbers,
+  startLineNumber,
+  className,
+}: CodeBlockProps): JSX.Element {
+  const [sourceCode, setSourceCode] = useState<string>(source ?? '');
+
+  const highlightedCode = highlightedHtml || highlight(sourceCode, lang);
+
+  // 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
+  // Issue for more details https://github.com/Redocly/reference-docs/issues/888
+  useEffect(() => {
+    const _source = source || externalSource?.sample?.get?.(externalSource);
+    if (_source) {
+      setSourceCode(_source);
+    }
+  }, [source, externalSource]);
+
+  const { reportDialog, reportButton } = useReportDialog();
+  const controls = {
+    ...header?.controls,
+    report: header?.controls?.report
+      ? { ...header.controls.report, props: reportButton.props }
+      : { props: reportButton.props },
+  };
+
+  if (controls.copy && !controls.copy.handleOutside) {
+    controls.copy.data = sourceCode;
+  }
+
+  return (
+    <Wrapper data-component-name="CodeBlock/CodeBlock" className={className}>
+      <CodeBlockControls className={header?.className} title={header?.title} controls={controls} />
+      <CodeBlockContainer
+        ref={codeBlockRef}
+        className={withLineNumbers ? 'line-numbers' : ''}
+        dangerouslySetInnerHTML={{
+          __html: withLineNumbers
+            ? addLineNumbers(highlightedCode, startLineNumber)
+            : highlightedCode,
+        }}
+        data-cy={dataTestId}
+        withControls={true}
+      />
+      {reportDialog.visible && (
+        <ReportDialog {...(reportDialog.props as ReportDialogProps)} location={sourceCode} />
+      )}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div``;

package/src/components/CodeBlock/{CodeBlock.ts → CodeBlockContainer.tsx}

@@ -2,12 +2,30 @@ import styled from 'styled-components';
 
 import { generateCodeBlockTokens } from '@theme/utils';
 
-export const CodeBlock = styled.div.attrs<{ className?: string }>(({ className }) => ({
-  'data-component-name': 'CodeBlock/CodeBlock',
+export const CodeBlockContainer = styled.pre.attrs<{ className?: string }>(({ className }) => ({
+  'data-component-name': 'CodeBlock/CodeBlockContainer',
   className,
-}))`
-  max-height: var(--code-block-max-height, 600px);
-  word-break: var(--code-block-word-break, initial);
+}))<{ withControls?: boolean }>`
+  && {
+    overflow-x: auto;
+    max-height: var(--code-block-max-height);
+    font-family: var(--code-block-font-family);
+    line-height: var(--code-line-height);
+    padding: var(--code-block-padding);
+    margin: var(--code-block-margin);
+    border-radius: ${(withControls) =>
+      withControls
+        ? '0 0 var(--code-block-border-radius) var(--code-block-border-radius)'
+        : 'var(--code-block-border-radius)'};
+    background-color: var(--code-block-background-color);
+    color: var(--code-block-text-color);
+    font-size: var(--code-font-size);
+    white-space: var(--code-wrap, pre);
+    max-height: var(--code-block-max-height, 600px);
+    word-break: var(--code-block-word-break, initial);
+    border: none;
+  }
+
   /**
   * Based on prism-dark.css
   */
@@ -15,7 +33,6 @@ export const CodeBlock = styled.div.attrs<{ className?: string }>(({ className }
   pre[class*='language-'] {
     text-shadow: 0 -0.1em 0.2em black;
     text-align: left;
-    white-space: pre;
     word-spacing: normal;
     word-break: normal;
     word-wrap: normal;

package/src/components/CodeBlock/CodeBlockControlButton.tsx

@@ -0,0 +1,38 @@
+import styled, { css } from 'styled-components';
+
+export const CodeBlockControlButton = styled.button.attrs(() => ({
+  'data-component-name': 'CodeBlockControls/CodeBlockControlButton',
+}))<{ asIcon?: boolean }>`
+  border: 0;
+  outline: 0;
+  border-radius: var(--border-radius);
+  height: 20px;
+  font-size: 12px;
+  line-height: 12px;
+  cursor: pointer;
+  padding: 1px 6px;
+  color: var(--panel-samples-controls-text-color);
+
+  ${({ asIcon }) =>
+    asIcon
+      ? css`
+          background-color: var(--panel-samples-icon-controls-background-color);
+        `
+      : css`
+          min-width: 90px;
+          background-color: var(--panel-samples-text-controls-background-color);
+        `}
+
+  ${({ theme }) => theme.mediaQueries?.small} {
+    padding: ${({ asIcon }) => (asIcon ? '2px 10px' : '2px 20px')};
+  }
+
+  :not(:first-child) {
+    margin-left: 5px;
+  }
+
+  :hover,
+  :focus {
+    background-color: var(--panel-samples-controls-hover-background-color);
+  }
+`;

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -0,0 +1,182 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { CodeBlockControlButton } from '@theme/components/CodeBlock';
+import { CollapseIcon, DeselectIcon, ExpandIcon, ReportIcon, SelectIcon } from '@theme/icons';
+import { useThemeConfig } from '@theme/hooks';
+
+import { CopyButton } from '../CopyButton';
+
+export interface CodeBlockControlsProps {
+  children?: React.ReactNode;
+  className?: string;
+  title?: React.ReactNode | string;
+  controls?: ControlItems;
+}
+
+interface ControlItems {
+  copy?: CopyControlProps;
+  expand?: ControlProps;
+  collapse?: ControlProps;
+  report?: ControlProps;
+  select?: ControlProps;
+  deselect?: ControlProps;
+}
+
+interface ControlProps {
+  label?: string;
+  tooltipText?: string;
+  onClick?: () => void;
+  props?: Record<string, any>;
+}
+
+interface CopyControlProps extends ControlProps {
+  data?: string;
+  dataSource?: string;
+  dataHash?: string;
+  toasterPlacement?: 'left' | 'right' | 'top' | 'bottom';
+  toasterText?: string;
+  toasterDuration?: number;
+  handleOutside?: boolean;
+}
+
+export type ControlItemType = 'text' | 'icon';
+
+export function CodeBlockControls({
+  children,
+  className,
+  title,
+  controls,
+}: CodeBlockControlsProps): JSX.Element | null {
+  const { codeSnippet } = useThemeConfig();
+  const controlsType = (codeSnippet?.controlsStyle as ControlItemType) || 'icon';
+  const { copy, expand, collapse, select, deselect, report } = controls
+    ? controls
+    : { copy: null, expand: null, collapse: null, select: null, deselect: null, report: null };
+
+  const defaultControls = controls ? (
+    <>
+      <Title>{title}</Title>
+      <ControlsWrapper>
+        {copy && !codeSnippet?.copy?.hide ? (
+          <CopyButton
+            data={copy.data}
+            data-source={copy.dataSource}
+            data-hash={copy.dataHash}
+            type={controlsType}
+            toasterPlacement={copy.toasterPlacement}
+            toasterDuration={copy.toasterDuration}
+            buttonText={copy.label}
+            tooltipText={copy.tooltipText}
+            onCopyClick={copy?.onClick}
+          />
+        ) : null}
+
+        {expand && !codeSnippet?.expand?.hide ? (
+          <CodeBlockControlButton
+            data-cy="expand-all"
+            data-testid="expand-all"
+            asIcon={controlsType === 'icon'}
+            onClick={expand?.onClick}
+            title={expand?.tooltipText || 'Expand all'}
+          >
+            {controlsType === 'icon' ? <ExpandIcon /> : expand?.label ? expand.label : 'Expand all'}
+          </CodeBlockControlButton>
+        ) : null}
+
+        {collapse && !codeSnippet?.collapse?.hide ? (
+          <CodeBlockControlButton
+            data-cy="collapse-all"
+            data-testid="collapse-all"
+            asIcon={controlsType === 'icon'}
+            onClick={collapse?.onClick}
+            title={collapse?.tooltipText || 'Collapse all'}
+          >
+            {controlsType === 'icon' ? (
+              <CollapseIcon />
+            ) : collapse?.label ? (
+              collapse.label
+            ) : (
+              'Collapse all'
+            )}
+          </CodeBlockControlButton>
+        ) : null}
+
+        {select ? (
+          <CodeBlockControlButton
+            data-cy="select-all"
+            data-testid="select-all"
+            asIcon={controlsType === 'icon'}
+            onClick={select?.onClick}
+            title={select?.tooltipText}
+          >
+            {controlsType === 'icon' ? <SelectIcon /> : select?.label ? select.label : 'Select all'}
+          </CodeBlockControlButton>
+        ) : null}
+
+        {deselect ? (
+          <CodeBlockControlButton
+            data-cy="clear-all"
+            data-testid="clear-all"
+            asIcon={controlsType === 'icon'}
+            onClick={deselect?.onClick}
+            title={deselect?.tooltipText}
+          >
+            {controlsType === 'icon' ? (
+              <DeselectIcon />
+            ) : deselect?.label ? (
+              deselect.label
+            ) : (
+              'Clear all'
+            )}
+          </CodeBlockControlButton>
+        ) : null}
+
+        {report && report?.props?.visible ? (
+          <CodeBlockControlButton
+            data-cy="report-button"
+            data-testid="report-button"
+            asIcon={controlsType === 'icon'}
+            title={report.tooltipText}
+            {...report.props}
+          >
+            {controlsType === 'icon' ? <ReportIcon /> : report.props?.buttonText || 'Report'}
+          </CodeBlockControlButton>
+        ) : null}
+      </ControlsWrapper>
+    </>
+  ) : null;
+
+  return children || controls ? (
+    <ContainerWraper data-component-name="CodeBlock/CodeBlockControls" className={className}>
+      {children ? children : defaultControls}
+    </ContainerWraper>
+  ) : null;
+}
+
+const ContainerWraper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 5px 10px;
+  min-height: 30px;
+  background-color: var(--panel-samples-controls-background-color);
+  border-bottom: var(--panel-samples-controls-border);
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
+  margin-top: 10px;
+`;
+
+const Title = styled.span`
+  display: flex;
+  align-items: center;
+  color: var(--panel-samples-controls-text-color);
+`;
+
+const ControlsWrapper = styled.div`
+  opacity: 0.7;
+  transition: opacity 0.3s ease;
+  text-align: right;
+
+  &:focus-within {
+    opacity: 1;
+  }
+`;

package/src/components/CodeBlock/index.ts

@@ -1 +1,4 @@
 export * from '@theme/components/CodeBlock/CodeBlock';
+export * from '@theme/components/CodeBlock/CodeBlockContainer';
+export * from '@theme/components/CodeBlock/CodeBlockControls';
+export * from '@theme/components/CodeBlock/CodeBlockControlButton';

package/src/components/CopyButton/CopyButton.tsx

@@ -1,31 +1,83 @@
-import React, { useState } from 'react';
-import copy from 'copy-to-clipboard';
-import { Button } from '@theme';
+import React, { memo } from 'react';
+
+import type { ControlItemType } from '@theme/components/CodeBlock';
+import { CodeBlockControlButton } from '@theme/components/CodeBlock';
+import { Tooltip } from '@theme/components/Tooltip';
+import { useControl } from '@theme/hooks';
+import { ClipboardService } from '@theme/utils';
+import type { TooltipProps } from '@theme/components/Tooltip';
+import { CopyIcon } from '@theme/icons';
+import { useTranslate } from '@portal/hooks';
 
 export interface CopyButtonProps {
-  text: string;
+  data: unknown;
+  type?: ControlItemType;
+  toasterPlacement?: TooltipProps['placement'];
+  toasterText?: TooltipProps['tip'];
+  toasterDuration?: number;
+  buttonText?: string;
+  tooltipText?: string;
+  onCopyClick?: () => void;
   dataTestId?: string;
 }
 
-export const CopyButton = ({ text, dataTestId = 'copy-button' }: CopyButtonProps): JSX.Element => {
-  const [title, setTitle] = useState('Copy');
+function CopyButtonComponent({
+  data,
+  type = 'icon',
+  toasterPlacement = 'top',
+  toasterText,
+  toasterDuration,
+  buttonText,
+  tooltipText,
+  onCopyClick,
+  dataTestId = 'copy-button',
+}: CopyButtonProps): JSX.Element {
+  const tooltip = useControl();
+  const { translate } = useTranslate();
+  const translationKeys = {
+    buttonText: 'theme.codeSnippet.copy.buttonText',
+    tooltipText: 'theme.codeSnippet.copy.tooltipText',
+    toasterText: 'theme.codeSnippet.copy.toasterText',
+  };
+
+  const showTooltip = (duration: number = 1500): void => {
+    tooltip.handleOpen();
 
-  async function write() {
-    await copy(text);
+    setTimeout(() => {
+      tooltip.handleClose();
+    }, duration);
+  };
 
-    setTitle('Copied!');
+  const copy = (duration?: number): void => {
+    const content = typeof data === 'string' ? data : JSON.stringify(data, null, 2);
+    ClipboardService.copyCustom(content);
+    showTooltip(duration);
 
-    setTimeout(() => setTitle('Copy'), 1500);
-  }
+    onCopyClick?.();
+  };
 
   return (
-    <Button
-      color="secondary"
-      onClick={write}
-      data-cy={dataTestId}
-      data-component-name="CopyButton/CopyButton"
+    <Tooltip
+      className="copy-button"
+      tip={translate(translationKeys.toasterText, toasterText || 'Copied!')}
+      isOpen={tooltip.isOpened}
+      placement={toasterPlacement}
     >
-      {title}
-    </Button>
+      <CodeBlockControlButton
+        onClick={() => copy(toasterDuration)}
+        data-cy={dataTestId}
+        asIcon={type === 'icon'}
+        title={translate(translationKeys.tooltipText, tooltipText || 'Copy to clipboard')}
+        data-testid={dataTestId}
+      >
+        {type === 'icon' ? (
+          <CopyIcon />
+        ) : (
+          translate(translationKeys.buttonText, buttonText || 'Copy')
+        )}
+      </CodeBlockControlButton>
+    </Tooltip>
   );
-};
+}
+
+export const CopyButton = memo<CopyButtonProps>(CopyButtonComponent);

package/src/components/CopyButton/index.ts

@@ -1,2 +1 @@
-export * from '@theme/components/CopyButton/CopyButtonWrapper';
 export * from '@theme/components/CopyButton/CopyButton';