@redocly/theme 0.17.0 → 0.17.1

package/lib/components/CodeBlock/CodeBlock.d.ts

@@ -1 +1,29 @@
-export declare const CodeBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
+/// <reference types="react" />
+import type { CodeBlockControlsProps } from '../../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 declare function CodeBlock({ lang, source, externalSource, header, dataTestId, codeBlockRef, highlightedHtml, withLineNumbers, startLineNumber, className, }: CodeBlockProps): JSX.Element;

package/lib/components/CodeBlock/CodeBlock.js

@@ -1,104 +1,66 @@
 "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 __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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeBlock = void 0;
+const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../utils");
-exports.CodeBlock = styled_components_1.default.div.attrs(({ className }) => ({
-    'data-component-name': 'CodeBlock/CodeBlock',
-    className,
-})) `
-  max-height: var(--code-block-max-height, 600px);
-  word-break: var(--code-block-word-break, initial);
-  /**
-  * Based on prism-dark.css
-  */
-  code[class*='language-'],
-  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;
-    line-height: 1.5;
-
-    -moz-tab-size: 4;
-    -o-tab-size: 4;
-    tab-size: 4;
-
-    -webkit-hyphens: none;
-    -moz-hyphens: none;
-    -ms-hyphens: none;
-    hyphens: none;
-  }
-
-  @media print {
-    code[class*='language-'],
-    pre[class*='language-'] {
-      text-shadow: none;
-    }
-  }
-
-  /* Code blocks */
-  pre[class*='language-'] {
-    padding: 1em;
-    margin: 0.5em 0;
-    overflow: auto;
-  }
-
-  .token.punctuation {
-    opacity: 1;
-  }
-
-  .namespace {
-    opacity: 0.7;
-  }
-
-  .token.selector,
-  .token.attr-name,
-  .token.string,
-  .token.char,
-  .token.builtin,
-  .token.inserted {
-    & + a,
-    & + a:visited {
-      color: var(--code-block-tokens-link-color);
-      text-decoration: underline;
-    }
-  }
-
-  .token.property.string {
-    color: var(--code-block-tokens-property-string-color);
-  }
-
-  .token.important,
-  .token.bold {
-    font-weight: bold;
-  }
-
-  .token.italic {
-    font-style: italic;
-  }
-
-  .token.entity {
-    cursor: help;
-  }
-
-  .code-line {
-    &:before {
-      content: attr(data-line-number);
-      display: inline-block;
-      min-width: 2em;
-      padding-right: 0.8em;
-      text-align: right;
-      pointer-events: none;
-      user-select: none;
+const Feedback_1 = require("../../components/Feedback");
+const CodeBlock_1 = require("../../components/CodeBlock");
+function CodeBlock({ lang, source, externalSource, header, dataTestId = 'source-code', codeBlockRef, highlightedHtml, withLineNumbers, startLineNumber, className, }) {
+    var _a;
+    const [sourceCode, setSourceCode] = (0, react_1.useState)(source !== null && source !== void 0 ? source : '');
+    const highlightedCode = highlightedHtml || (0, utils_1.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
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        const _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);
+        }
+    }, [source, externalSource]);
+    const { reportDialog, reportButton } = (0, Feedback_1.useReportDialog)();
+    const controls = Object.assign(Object.assign({}, header === null || header === void 0 ? void 0 : header.controls), { report: ((_a = header === null || header === void 0 ? void 0 : header.controls) === null || _a === void 0 ? void 0 : _a.report)
+            ? Object.assign(Object.assign({}, header.controls.report), { props: reportButton.props }) : { props: reportButton.props } });
+    if (controls.copy && !controls.copy.handleOutside) {
+        controls.copy.data = sourceCode;
     }
-  }
-
-  ${(0, utils_1.generateCodeBlockTokens)()}
-`;
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "CodeBlock/CodeBlock", className: className },
+        react_1.default.createElement(CodeBlock_1.CodeBlockControls, { className: header === null || header === void 0 ? void 0 : header.className, title: header === null || header === void 0 ? void 0 : header.title, controls: controls }),
+        react_1.default.createElement(CodeBlock_1.CodeBlockContainer, { ref: codeBlockRef, className: withLineNumbers ? 'line-numbers' : '', dangerouslySetInnerHTML: {
+                __html: withLineNumbers
+                    ? (0, utils_1.addLineNumbers)(highlightedCode, startLineNumber)
+                    : highlightedCode,
+            }, "data-cy": dataTestId, withControls: true }),
+        reportDialog.visible && (react_1.default.createElement(Feedback_1.ReportDialog, Object.assign({}, reportDialog.props, { location: sourceCode })))));
+}
+exports.CodeBlock = CodeBlock;
+const Wrapper = styled_components_1.default.div ``;
 //# sourceMappingURL=CodeBlock.js.map

package/lib/components/CodeBlock/CodeBlockContainer.d.ts

@@ -0,0 +1,3 @@
+export declare const CodeBlockContainer: import("styled-components").StyledComponent<"pre", any, {
+    withControls?: boolean | undefined;
+}, never>;

package/lib/components/CodeBlock/CodeBlockContainer.js

@@ -0,0 +1,120 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeBlockContainer = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../utils");
+exports.CodeBlockContainer = styled_components_1.default.pre.attrs(({ className }) => ({
+    'data-component-name': 'CodeBlock/CodeBlockContainer',
+    className,
+})) `
+  && {
+    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
+  */
+  code[class*='language-'],
+  pre[class*='language-'] {
+    text-shadow: 0 -0.1em 0.2em black;
+    text-align: left;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+  }
+
+  @media print {
+    code[class*='language-'],
+    pre[class*='language-'] {
+      text-shadow: none;
+    }
+  }
+
+  /* Code blocks */
+  pre[class*='language-'] {
+    padding: 1em;
+    margin: 0.5em 0;
+    overflow: auto;
+  }
+
+  .token.punctuation {
+    opacity: 1;
+  }
+
+  .namespace {
+    opacity: 0.7;
+  }
+
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
+    & + a,
+    & + a:visited {
+      color: var(--code-block-tokens-link-color);
+      text-decoration: underline;
+    }
+  }
+
+  .token.property.string {
+    color: var(--code-block-tokens-property-string-color);
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+
+  .code-line {
+    &:before {
+      content: attr(data-line-number);
+      display: inline-block;
+      min-width: 2em;
+      padding-right: 0.8em;
+      text-align: right;
+      pointer-events: none;
+      user-select: none;
+    }
+  }
+
+  ${(0, utils_1.generateCodeBlockTokens)()}
+`;
+//# sourceMappingURL=CodeBlockContainer.js.map

package/lib/components/CodeBlock/CodeBlockControlButton.d.ts

@@ -0,0 +1,5 @@
+export declare const CodeBlockControlButton: import("styled-components").StyledComponent<"button", any, {
+    'data-component-name': string;
+} & {
+    asIcon?: boolean | undefined;
+}, "data-component-name">;

package/lib/components/CodeBlock/CodeBlockControlButton.js

@@ -0,0 +1,63 @@
+"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 __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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeBlockControlButton = void 0;
+const styled_components_1 = __importStar(require("styled-components"));
+exports.CodeBlockControlButton = styled_components_1.default.button.attrs(() => ({
+    'data-component-name': 'CodeBlockControls/CodeBlockControlButton',
+})) `
+  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
+    ? (0, styled_components_1.css) `
+          background-color: var(--panel-samples-icon-controls-background-color);
+        `
+    : (0, styled_components_1.css) `
+          min-width: 90px;
+          background-color: var(--panel-samples-text-controls-background-color);
+        `}
+
+  ${({ theme }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.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);
+  }
+`;
+//# sourceMappingURL=CodeBlockControlButton.js.map

package/lib/components/CodeBlock/CodeBlockControls.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+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 declare function CodeBlockControls({ children, className, title, controls, }: CodeBlockControlsProps): JSX.Element | null;
+export {};

package/lib/components/CodeBlock/CodeBlockControls.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeBlockControls = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const CodeBlock_1 = require("../../components/CodeBlock");
+const icons_1 = require("../../icons");
+const hooks_1 = require("../../hooks");
+const CopyButton_1 = require("../CopyButton");
+function CodeBlockControls({ children, className, title, controls, }) {
+    var _a, _b, _c, _d, _e;
+    const { codeSnippet } = (0, hooks_1.useThemeConfig)();
+    const controlsType = (codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.controlsStyle) || '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 ? (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Title, null, title),
+        react_1.default.createElement(ControlsWrapper, null,
+            copy && !((_a = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.copy) === null || _a === void 0 ? void 0 : _a.hide) ? (react_1.default.createElement(CopyButton_1.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 === null || copy === void 0 ? void 0 : copy.onClick })) : null,
+            expand && !((_b = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.expand) === null || _b === void 0 ? void 0 : _b.hide) ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, { "data-cy": "expand-all", "data-testid": "expand-all", asIcon: controlsType === 'icon', onClick: expand === null || expand === void 0 ? void 0 : expand.onClick, title: (expand === null || expand === void 0 ? void 0 : expand.tooltipText) || 'Expand all' }, controlsType === 'icon' ? react_1.default.createElement(icons_1.ExpandIcon, null) : (expand === null || expand === void 0 ? void 0 : expand.label) ? expand.label : 'Expand all')) : null,
+            collapse && !((_c = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.collapse) === null || _c === void 0 ? void 0 : _c.hide) ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, { "data-cy": "collapse-all", "data-testid": "collapse-all", asIcon: controlsType === 'icon', onClick: collapse === null || collapse === void 0 ? void 0 : collapse.onClick, title: (collapse === null || collapse === void 0 ? void 0 : collapse.tooltipText) || 'Collapse all' }, controlsType === 'icon' ? (react_1.default.createElement(icons_1.CollapseIcon, null)) : (collapse === null || collapse === void 0 ? void 0 : collapse.label) ? (collapse.label) : ('Collapse all'))) : null,
+            select ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, { "data-cy": "select-all", "data-testid": "select-all", asIcon: controlsType === 'icon', onClick: select === null || select === void 0 ? void 0 : select.onClick, title: select === null || select === void 0 ? void 0 : select.tooltipText }, controlsType === 'icon' ? react_1.default.createElement(icons_1.SelectIcon, null) : (select === null || select === void 0 ? void 0 : select.label) ? select.label : 'Select all')) : null,
+            deselect ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, { "data-cy": "clear-all", "data-testid": "clear-all", asIcon: controlsType === 'icon', onClick: deselect === null || deselect === void 0 ? void 0 : deselect.onClick, title: deselect === null || deselect === void 0 ? void 0 : deselect.tooltipText }, controlsType === 'icon' ? (react_1.default.createElement(icons_1.DeselectIcon, null)) : (deselect === null || deselect === void 0 ? void 0 : deselect.label) ? (deselect.label) : ('Clear all'))) : null,
+            report && ((_d = report === null || report === void 0 ? void 0 : report.props) === null || _d === void 0 ? void 0 : _d.visible) ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, Object.assign({ "data-cy": "report-button", "data-testid": "report-button", asIcon: controlsType === 'icon', title: report.tooltipText }, report.props), controlsType === 'icon' ? react_1.default.createElement(icons_1.ReportIcon, null) : ((_e = report.props) === null || _e === void 0 ? void 0 : _e.buttonText) || 'Report')) : null))) : null;
+    return children || controls ? (react_1.default.createElement(ContainerWraper, { "data-component-name": "CodeBlock/CodeBlockControls", className: className }, children ? children : defaultControls)) : null;
+}
+exports.CodeBlockControls = CodeBlockControls;
+const ContainerWraper = styled_components_1.default.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_components_1.default.span `
+  display: flex;
+  align-items: center;
+  color: var(--panel-samples-controls-text-color);
+`;
+const ControlsWrapper = styled_components_1.default.div `
+  opacity: 0.7;
+  transition: opacity 0.3s ease;
+  text-align: right;
+
+  &:focus-within {
+    opacity: 1;
+  }
+`;
+//# sourceMappingURL=CodeBlockControls.js.map

package/lib/components/CodeBlock/index.d.ts

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

package/lib/components/CodeBlock/index.js

@@ -15,4 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../../components/CodeBlock/CodeBlock"), exports);
+__exportStar(require("../../components/CodeBlock/CodeBlockContainer"), exports);
+__exportStar(require("../../components/CodeBlock/CodeBlockControls"), exports);
+__exportStar(require("../../components/CodeBlock/CodeBlockControlButton"), exports);
 //# sourceMappingURL=index.js.map

package/lib/components/CopyButton/CopyButton.d.ts

@@ -1,6 +1,15 @@
-/// <reference types="react" />
+import React from 'react';
+import type { ControlItemType } from '../../components/CodeBlock';
+import type { TooltipProps } from '../../components/Tooltip';
 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 declare const CopyButton: ({ text, dataTestId }: CopyButtonProps) => JSX.Element;
+export declare const CopyButton: React.NamedExoticComponent<CopyButtonProps>;

package/lib/components/CopyButton/CopyButton.js

@@ -22,33 +22,37 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CopyButton = void 0;
 const react_1 = __importStar(require("react"));
-const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
-const _theme_1 = require("../../index.js");
-const CopyButton = ({ text, dataTestId = 'copy-button' }) => {
-    const [title, setTitle] = (0, react_1.useState)('Copy');
-    function write() {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield (0, copy_to_clipboard_1.default)(text);
-            setTitle('Copied!');
-            setTimeout(() => setTitle('Copy'), 1500);
-        });
-    }
-    return (react_1.default.createElement(_theme_1.Button, { color: "secondary", onClick: write, "data-cy": dataTestId, "data-component-name": "CopyButton/CopyButton" }, title));
-};
-exports.CopyButton = CopyButton;
+const CodeBlock_1 = require("../../components/CodeBlock");
+const Tooltip_1 = require("../../components/Tooltip");
+const hooks_1 = require("../../hooks");
+const utils_1 = require("../../utils");
+const icons_1 = require("../../icons");
+const hooks_2 = require("../../mocks/hooks");
+function CopyButtonComponent({ data, type = 'icon', toasterPlacement = 'top', toasterText, toasterDuration, buttonText, tooltipText, onCopyClick, dataTestId = 'copy-button', }) {
+    const tooltip = (0, hooks_1.useControl)();
+    const { translate } = (0, hooks_2.useTranslate)();
+    const translationKeys = {
+        buttonText: 'theme.codeSnippet.copy.buttonText',
+        tooltipText: 'theme.codeSnippet.copy.tooltipText',
+        toasterText: 'theme.codeSnippet.copy.toasterText',
+    };
+    const showTooltip = (duration = 1500) => {
+        tooltip.handleOpen();
+        setTimeout(() => {
+            tooltip.handleClose();
+        }, duration);
+    };
+    const copy = (duration) => {
+        const content = typeof data === 'string' ? data : JSON.stringify(data, null, 2);
+        utils_1.ClipboardService.copyCustom(content);
+        showTooltip(duration);
+        onCopyClick === null || onCopyClick === void 0 ? void 0 : onCopyClick();
+    };
+    return (react_1.default.createElement(Tooltip_1.Tooltip, { className: "copy-button", tip: translate(translationKeys.toasterText, toasterText || 'Copied!'), isOpen: tooltip.isOpened, placement: toasterPlacement },
+        react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, { onClick: () => copy(toasterDuration), "data-cy": dataTestId, asIcon: type === 'icon', title: translate(translationKeys.tooltipText, tooltipText || 'Copy to clipboard'), "data-testid": dataTestId }, type === 'icon' ? (react_1.default.createElement(icons_1.CopyIcon, null)) : (translate(translationKeys.buttonText, buttonText || 'Copy')))));
+}
+exports.CopyButton = (0, react_1.memo)(CopyButtonComponent);
 //# sourceMappingURL=CopyButton.js.map

package/lib/components/CopyButton/index.d.ts

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

package/lib/components/CopyButton/index.js

@@ -14,6 +14,5 @@ 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("../../components/CopyButton/CopyButtonWrapper"), exports);
 __exportStar(require("../../components/CopyButton/CopyButton"), exports);
 //# sourceMappingURL=index.js.map

package/lib/components/Feedback/useReportDialog.d.ts

@@ -1,7 +1,13 @@
-type ReportSettings = {
-    hide?: boolean;
-    label?: string;
-    tooltipText?: string;
-};
-export declare function useReportDialog(reportSettings: ReportSettings): Record<string, any>;
+import type { ReportDialogProps } from '../../components/Feedback/types';
+export interface ReportButtonProps {
+    onClick: () => void;
+    buttonText: string;
+    tooltip: string;
+    visible: boolean;
+}
+interface ReportComponentsProps {
+    visible?: boolean;
+    props: Partial<ReportDialogProps> | ReportButtonProps;
+}
+export declare function useReportDialog(): Record<string, ReportComponentsProps>;
 export {};

package/lib/components/Feedback/useReportDialog.js

@@ -3,11 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useReportDialog = void 0;
 const react_1 = require("react");
 const hooks_1 = require("../../mocks/hooks");
-function useReportDialog(reportSettings) {
+const hooks_2 = require("../../hooks");
+function useReportDialog() {
+    const { codeSnippet: { report = {} } = {} } = (0, hooks_2.useThemeConfig)();
     const [isReportDialogShown, setIsReportDialogShown] = (0, react_1.useState)(false);
-    const isReportButtonShown = reportSettings.hide === false; // TODO: report temporary disabled by default
+    const isReportButtonShown = (report === null || report === void 0 ? void 0 : report.hide) === false; // TODO: report temporary disabled by default
     const { translate } = (0, hooks_1.useTranslate)();
     const translationKeys = {
+        buttonText: 'theme.codeSnippet.report.buttonText',
         tooltipText: 'theme.codeSnippet.report.tooltipText',
         label: 'theme.codeSnippet.report.label',
     };
@@ -19,16 +22,21 @@ function useReportDialog(reportSettings) {
     };
     const reportButtonProps = {
         onClick: showReportDialog,
-        title: translate(translationKeys.tooltipText, reportSettings.tooltipText || 'Report a problem'),
+        buttonText: translate(translationKeys.buttonText, 'Report'),
+        tooltip: translate(translationKeys.tooltipText, 'Report a problem'),
+        visible: isReportButtonShown,
     };
     const reportDialogProps = {
         settings: {
-            label: translate(translationKeys.label, reportSettings.label || 'What is wrong with this code?'),
+            label: translate(translationKeys.label, 'What is wrong with this code?'),
         },
         onSubmit: hideReportDialog,
         onCancel: hideReportDialog,
     };
-    return { isReportDialogShown, isReportButtonShown, reportButtonProps, reportDialogProps };
+    return {
+        reportDialog: { visible: isReportDialogShown, props: reportDialogProps },
+        reportButton: { props: reportButtonProps },
+    };
 }
 exports.useReportDialog = useReportDialog;
 //# sourceMappingURL=useReportDialog.js.map