@redocly/theme 0.25.1-beta.4 → 0.25.2

package/lib/components/Catalog/Catalog.js

@@ -21,15 +21,12 @@ function Catalog(props) {
     const items = (0, index_1.usePageSharedData)('catalog');
     const { filterTerm, setFilterTerm, groups, filters } = (0, Catalog_1.useCatalog)(items, catalogConfig);
     const [isAddingFilter, setIsAddingFilter] = react_1.default.useState(false);
-    const translationKeys = {
-        addFilter: 'theme.catalog.filters.select.addFilter',
-    };
     const { translate } = (0, index_1.useTranslate)();
     (0, useModalScrollLock_1.default)(isAddingFilter);
     return (react_1.default.createElement(Highlight_1.HighlightContext.Provider, { value: [filterTerm] },
         react_1.default.createElement(exports.CatalogPageWrapper, { withoutFilters: !filters.length },
             !!filters.length && (react_1.default.createElement(FilterTagsWrapper, null,
-                react_1.default.createElement(Button_1.Button, { variant: "text", size: "small", icon: react_1.default.createElement(PlusIcon_1.PlusIcon, null), onClick: () => setIsAddingFilter(true) }, translate(translationKeys.addFilter, 'Add filter')),
+                react_1.default.createElement(Button_1.Button, { variant: "text", size: "small", icon: react_1.default.createElement(PlusIcon_1.PlusIcon, null), onClick: () => setIsAddingFilter(true) }, translate('theme.catalog.filters.select.addFilter', 'Add filter')),
                 react_1.default.createElement(FilterTags_1.FilterTags, { filters: filters }))),
             react_1.default.createElement(FilterContent_1.FilterContent, { setFilterTerm: setFilterTerm, filters: filters, filterTerm: filterTerm, isMobile: false, filterValuesCasing: catalogConfig.filterValuesCasing }),
             isAddingFilter && (react_1.default.createElement(FilterPopover_1.FilterPopover, { setIsAddingFilter: setIsAddingFilter, filters: filters, filterValuesCasing: catalogConfig.filterValuesCasing })),

package/lib/components/Catalog/useCatalog.js

@@ -256,10 +256,9 @@ function collectFilterOptions(items, filters) {
                 }
             }
         }
-        const options = Object.entries(usedOptions).map(([value, count]) => ({ value, count }));
-        if (!staticOptions) {
-            options.sort((a, b) => b.value.localeCompare(a.value));
-        }
+        const options = Object.entries(usedOptions)
+            .map(([value, count]) => ({ value, count }))
+            .sort((a, b) => b.value.localeCompare(a.value));
         if (othersCount) {
             options.push({
                 value: filter.missingCategoryNameTranslationKey || filter.missingCategoryName || 'Others',

package/lib/components/CodeBlock/CodeBlockControls.js

@@ -29,7 +29,7 @@ function CodeBlockControls({ children, className, title, controls, }) {
             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, { onClick: () => telemetry_1.telemetry.send('code_snippet_reported', {}) }), controlsType === 'icon' ? react_1.default.createElement(icons_1.ReportIcon, null) : ((_e = report.props) === null || _e === void 0 ? void 0 : _e.buttonText) || 'Report')) : null))) : 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;

package/lib/components/CopyButton/CopyButton.js

@@ -34,11 +34,6 @@ 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(() => {
@@ -51,8 +46,8 @@ function CopyButtonComponent({ data, type = 'icon', toasterPlacement = 'top', to
         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')))));
+    return (react_1.default.createElement(Tooltip_1.Tooltip, { className: "copy-button", tip: translate('theme.codeSnippet.copy.buttonText', 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('theme.codeSnippet.copy.tooltipText', tooltipText || 'Copy to clipboard'), "data-testid": dataTestId }, type === 'icon' ? (react_1.default.createElement(icons_1.CopyIcon, null)) : (translate('theme.codeSnippet.copy.toasterText', buttonText || 'Copy')))));
 }
 exports.CopyButton = (0, react_1.memo)(CopyButtonComponent);
 //# sourceMappingURL=CopyButton.js.map

package/lib/components/EditPageButton/EditPageButton.js

@@ -12,12 +12,9 @@ const icons_1 = require("../../icons");
 const hooks_1 = require("../../mocks/hooks");
 const EditPageButton = ({ to }) => {
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        text: 'theme.markdown.editPage.text',
-    };
     return (react_1.default.createElement(EditButton, { "data-component-name": "EditPageButton/EditPageButton", to: to, onClick: () => telemetry_1.telemetry.send('edit_page_link_clicked', {}) },
         react_1.default.createElement(ButtonIcon, null),
-        react_1.default.createElement(ButtonText, { "data-translation-key": translationKeys.text }, translate(translationKeys.text, 'Edit'))));
+        react_1.default.createElement(ButtonText, { "data-translation-key": "theme.markdown.editPage.text" }, translate('theme.markdown.editPage.text', 'Edit'))));
 };
 exports.EditPageButton = EditPageButton;
 const EditButton = (0, styled_components_1.default)(Link_1.Link) `

package/lib/components/Feedback/Comment.js

@@ -36,12 +36,6 @@ const Comment = ({ settings, onSubmit, onCancel, className }) => {
     const [text, setText] = React.useState('');
     const [submitValue, setSubmitValue] = React.useState('');
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        submitText: 'theme.feedback.settings.comment.submitText',
-        label: 'theme.feedback.settings.comment.label',
-        send: 'theme.feedback.settings.comment.send',
-        cancel: 'theme.feedback.settings.comment.cancel',
-    };
     const send = () => {
         if (!text)
             return;
@@ -53,14 +47,14 @@ const Comment = ({ settings, onSubmit, onCancel, className }) => {
     };
     if (submitValue) {
         return (React.createElement(Wrapper, { className: className },
-            React.createElement(Label, { "data-translation-key": translationKeys.submitText }, translate(translationKeys.submitText, submitText || 'Thank you for helping improve our documentation!'))));
+            React.createElement(Label, { "data-translation-key": "theme.feedback.settings.comment.submitText" }, translate('theme.feedback.settings.comment.submitText', submitText || 'Thank you for helping improve our documentation!'))));
     }
     return (React.createElement(Wrapper, { "data-component-name": "Feedback/Comment", className: className },
-        React.createElement(Label, { "data-translation-key": translationKeys.label }, translate(translationKeys.label, label || 'Please share your feedback with us.')),
+        React.createElement(Label, { "data-translation-key": "theme.feedback.settings.comment.label" }, translate('theme.feedback.settings.comment.label', label || 'Please share your feedback with us.')),
         React.createElement(TextArea, { rows: 3, onChange: handleTextAreaChange }),
         React.createElement(ButtonsContainer, null,
-            React.createElement(SendButton, { "data-translation-key": translationKeys.send, onClick: send }, translate(translationKeys.send, 'Send')),
-            onCancel && (React.createElement(CancelButton, { "data-translation-key": translationKeys.cancel, onClick: onCancel }, translate(translationKeys.cancel, 'Cancel'))))));
+            React.createElement(SendButton, { "data-translation-key": "theme.feedback.settings.comment.send", onClick: send }, translate('theme.feedback.settings.comment.send', 'Send')),
+            onCancel && (React.createElement(CancelButton, { "data-translation-key": "theme.feedback.settings.comment.cancel", onClick: onCancel }, translate('theme.feedback.settings.comment.cancel', 'Cancel'))))));
 };
 exports.Comment = Comment;
 const Wrapper = styled_components_1.default.div `

package/lib/components/Feedback/Feedback.js

@@ -40,6 +40,7 @@ const Feedback = (props) => {
     const { feedback: themeFeedbackConf } = (0, hooks_1.useThemeConfig)();
     const feedbackConf = Object.assign(Object.assign({}, themeFeedbackConf), props);
     const renderFeedbackComponent = () => {
+        const { type, settings, path } = feedbackConf;
         switch (type) {
             case 'rating':
                 return (React.createElement(Wrapper, null,
@@ -70,7 +71,6 @@ const Feedback = (props) => {
                 break;
         }
     };
-    const { type, settings, path } = feedbackConf;
     return React.createElement(React.Fragment, { key: pathname }, renderFeedbackComponent());
 };
 exports.Feedback = Feedback;

package/lib/components/Feedback/Mood.js

@@ -41,16 +41,10 @@ var MOOD_STATES;
 const Mood = ({ settings, onSubmit, className }) => {
     const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
     const [score, setScore] = React.useState('');
+    const [isSubmitted, setIsSubmitted] = React.useState(false);
     const [comment, setComment] = React.useState('');
     const [reasons, setReasons] = React.useState([]);
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        submitText: 'theme.feedback.settings.submitText',
-        label: 'theme.feedback.settings.label',
-        satisfiedLabel: 'theme.feedback.settings.comment.satisfiedLabel',
-        neutralLabel: 'theme.feedback.settings.comment.neutralLabel',
-        dissatisfiedLabel: 'theme.feedback.settings.comment.dissatisfiedLabel',
-    };
     if (score && (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.enable) && !reasons.length) {
         const { label: reasonsLabel, items, multi } = reasonsSettings;
         const buttonText = (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.enable) ? 'Next' : 'Send';
@@ -60,28 +54,31 @@ const Mood = ({ settings, onSubmit, className }) => {
         const renderCommentLabel = (score) => {
             switch (score) {
                 case MOOD_STATES.SATISFIED:
-                    return translate(translationKeys.satisfiedLabel, commentSettings.satisfiedLabel || 'What was most helpful?');
+                    return translate('theme.feedback.settings.comment.satisfiedLabel', commentSettings.satisfiedLabel || 'What was most helpful?');
                 case MOOD_STATES.NEUTRAL:
-                    return translate(translationKeys.neutralLabel, commentSettings.neutralLabel || 'What can we improve?');
+                    return translate('theme.feedback.settings.comment.neutralLabel', commentSettings.neutralLabel || 'What can we improve?');
                 case MOOD_STATES.DISSATISFIED:
-                    return translate(translationKeys.dissatisfiedLabel, commentSettings.dissatisfiedLabel || 'What can we improve?');
+                    return translate('theme.feedback.settings.comment.dissatisfiedLabel', commentSettings.dissatisfiedLabel || 'What can we improve?');
                 default:
-                    return translate(translationKeys.satisfiedLabel, 'What can we improve?');
+                    return translate('theme.feedback.settings.comment.satisfiedLabel', 'What can we improve?');
             }
         };
         return (React.createElement(Feedback_1.Comment, { onSubmit: ({ comment }) => setComment(comment), settings: { label: renderCommentLabel(score) } }));
     }
     if (score) {
-        onSubmit({
-            score,
-            comment,
-            reasons,
-        });
+        if (!isSubmitted) {
+            onSubmit({
+                score,
+                comment,
+                reasons,
+            });
+            setIsSubmitted(true);
+        }
         return (React.createElement(Wrapper, null,
-            React.createElement(Label, { "data-translation-key": translationKeys.submitText }, translate(translationKeys.submitText, submitText || 'Thank you for your feedback!'))));
+            React.createElement(Label, { "data-translation-key": "theme.feedback.settings.submitText" }, translate('theme.feedback.settings.submitText', submitText || 'Thank you for your feedback!'))));
     }
     return (React.createElement(Wrapper, { "data-component-name": "Feedback/Mood", className: className },
-        React.createElement(Label, { "data-translation-key": translationKeys.label }, translate(translationKeys.label, label || 'Was this page helpful?')),
+        React.createElement(Label, { "data-translation-key": "theme.feedback.settings.label" }, translate('theme.feedback.settings.label', label || 'Was this page helpful?')),
         React.createElement(Vote, { onClick: () => {
                 setScore(MOOD_STATES.DISSATISFIED);
             } },

package/lib/components/Feedback/Rating.js

@@ -33,14 +33,11 @@ const Feedback_1 = require("../../components/Feedback");
 const hooks_1 = require("../../mocks/hooks");
 const Rating = ({ settings, onSubmit, className }) => {
     const { label, max, submitText, comment: commentSettings, reasons: reasonsSettings, } = settings || {};
+    const [isSubmitted, setIsSubmitted] = React.useState(false);
     const [score, setScore] = React.useState(0);
     const [comment, setComment] = React.useState('');
     const [reasons, setReasons] = React.useState([]);
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        submitText: 'theme.feedback.settings.submitText',
-        label: 'theme.feedback.settings.label',
-    };
     const maxRating = max || 5;
     if (score && (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.enable) && !reasons.length) {
         const { label: reasonsLabel, items, multi } = reasonsSettings;
@@ -51,17 +48,20 @@ const Rating = ({ settings, onSubmit, className }) => {
         return (React.createElement(Feedback_1.Comment, { onSubmit: ({ comment }) => setComment(comment), settings: { label: commentSettings.label } }));
     }
     if (score) {
-        onSubmit({
-            score,
-            comment,
-            reasons,
-            max: maxRating,
-        });
+        if (!isSubmitted) {
+            onSubmit({
+                score,
+                comment,
+                reasons,
+                max: maxRating,
+            });
+            setIsSubmitted(true);
+        }
         return (React.createElement(Wrapper, null,
-            React.createElement(Label, { "data-translation-key": translationKeys.submitText }, translate(translationKeys.submitText, submitText || 'Thank you for helping improve our documentation!'))));
+            React.createElement(Label, { "data-translation-key": "theme.feedback.settings.submitText" }, translate('theme.feedback.settings.submitText', submitText || 'Thank you for helping improve our documentation!'))));
     }
     return (React.createElement(Wrapper, { "data-component-name": "Feedback/Rating", className: className },
-        React.createElement(Label, { "data-translation-key": translationKeys.label }, translate(translationKeys.label, label || 'How helpful was this page?')),
+        React.createElement(Label, { "data-translation-key": "theme.feedback.settings.label" }, translate('theme.feedback.settings.label', label || 'How helpful was this page?')),
         React.createElement(Stars, { max: maxRating, onSubmit: setScore })));
 };
 exports.Rating = Rating;

package/lib/components/Feedback/Reasons.js

@@ -35,11 +35,6 @@ const Reasons = ({ settings, onSubmit, className }) => {
     const { label, multi, buttonText, items = [] } = settings;
     const [checkedState, setCheckedState] = React.useState(new Array(items.length).fill(false));
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        label: 'theme.feedback.settings.reasons.label',
-        items: 'theme.feedback.settings.reasons.items',
-        send: 'theme.feedback.settings.reasons.send',
-    };
     if (!items.length) {
         return React.createElement(React.Fragment, null);
     }
@@ -53,12 +48,12 @@ const Reasons = ({ settings, onSubmit, className }) => {
     const submitForm = () => {
         onSubmit({ reasons: items.filter((_, index) => !!checkedState[index]) });
     };
-    return (React.createElement(Wrapper, { "data-component-name": "Feedback/Reasons", "data-translation-key": translationKeys.label, className: className },
-        React.createElement(Label, null, translate(translationKeys.label, label || 'Which statement describes your thoughts about this page?')),
+    return (React.createElement(Wrapper, { "data-component-name": "Feedback/Reasons", "data-translation-key": "theme.feedback.settings.reasons.label", className: className },
+        React.createElement(Label, null, translate('theme.feedback.settings.reasons.label', label || 'Which statement describes your thoughts about this page?')),
         items.map((reason, idx) => (React.createElement(OptionWrapper, { key: reason },
             React.createElement("input", { type: input_type, value: reason, checked: checkedState[idx], name: "reasons", onChange: () => handleOptionChange(idx) }),
-            React.createElement("label", { "data-translation-key": `${translationKeys.items}.${idx + 1}`, id: reason, onClick: () => handleOptionChange(idx) }, translate(`${translationKeys.items}.${idx + 1}`, reason))))),
-        React.createElement(SendButton, { "data-translation-key": translationKeys.send, onClick: submitForm }, translate(translationKeys.send, buttonText || 'Send'))));
+            React.createElement("label", { "data-translation-key": `theme.feedback.settings.reasons.items.${idx + 1}`, id: reason, onClick: () => handleOptionChange(idx) }, translate(`theme.feedback.settings.reasons.items.${idx + 1}`, reason))))),
+        React.createElement(SendButton, { "data-translation-key": "theme.feedback.settings.reasons.send", onClick: submitForm }, translate('theme.feedback.settings.reasons.send', buttonText || 'Send'))));
 };
 exports.Reasons = Reasons;
 const Wrapper = styled_components_1.default.div `

package/lib/components/Feedback/ReportDialog.js

@@ -22,6 +22,15 @@ 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 };
 };
@@ -29,14 +38,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReportDialog = void 0;
 const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const react_router_dom_1 = require("react-router-dom");
+const telemetry_1 = require("../../mocks/telemetry");
 const Comment_1 = require("../../components/Feedback/Comment");
 const ReportDialog = ({ location, settings, onSubmit, onCancel, submitFeedback, }) => {
     const { label } = settings;
+    const { pathname } = (0, react_router_dom_1.useLocation)();
     return (React.createElement(Wrapper, { className: "modal" },
-        React.createElement(Comment_1.Comment, { settings: { label }, onSubmit: (value) => {
-                submitFeedback({ type: 'problem', values: value, path: location });
+        React.createElement(Comment_1.Comment, { settings: { label }, onSubmit: (value) => __awaiter(void 0, void 0, void 0, function* () {
+                yield submitFeedback({ type: 'problem', values: value, location, path: pathname });
+                telemetry_1.telemetry.send('code_snippet_reported', {});
                 onSubmit();
-            }, onCancel: onCancel })));
+            }), onCancel: onCancel })));
 };
 exports.ReportDialog = ReportDialog;
 const Wrapper = styled_components_1.default.div `

package/lib/components/Feedback/Sentiment.js

@@ -34,16 +34,11 @@ const Thumbs_1 = require("../../components/Feedback/Thumbs");
 const hooks_1 = require("../../mocks/hooks");
 const Sentiment = ({ settings, onSubmit, className }) => {
     const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
+    const [isSubmitted, setIsSubmitted] = React.useState(false);
     const [score, setScore] = React.useState(0);
     const [comment, setComment] = React.useState('');
     const [reasons, setReasons] = React.useState([]);
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        submitText: 'theme.feedback.settings.submitText',
-        label: 'theme.feedback.settings.label',
-        likeLabel: 'theme.feedback.settings.comment.likeLabel',
-        dislikeLabel: 'theme.feedback.settings.comment.dislikeLabel',
-    };
     if (score && (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.enable) && !reasons.length) {
         const { label: reasonsLabel, items, multi } = reasonsSettings;
         const buttonText = (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.enable) ? 'Next' : 'Send';
@@ -51,21 +46,24 @@ const Sentiment = ({ settings, onSubmit, className }) => {
     }
     if (score && (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.enable) && !comment) {
         const commentLabel = score === 1
-            ? translate(translationKeys.likeLabel, commentSettings.likeLabel || 'What was most helpful?')
-            : translate(translationKeys.dislikeLabel, commentSettings.dislikeLabel || 'What can we improve?');
+            ? translate('theme.feedback.settings.comment.likeLabel', commentSettings.likeLabel || 'What was most helpful?')
+            : translate('theme.feedback.settings.comment.dislikeLabel', commentSettings.dislikeLabel || 'What can we improve?');
         return (React.createElement(Feedback_1.Comment, { onSubmit: ({ comment }) => setComment(comment), settings: { label: commentLabel } }));
     }
     if (score) {
-        onSubmit({
-            score,
-            comment,
-            reasons,
-        });
+        if (!isSubmitted) {
+            onSubmit({
+                score,
+                comment,
+                reasons,
+            });
+            setIsSubmitted(true);
+        }
         return (React.createElement(Wrapper, null,
-            React.createElement(Label, { "data-translation-key": translationKeys.submitText }, translate(translationKeys.submitText, submitText || 'Thank you for helping improve our documentation!'))));
+            React.createElement(Label, { "data-translation-key": "theme.feedback.settings.submitText" }, translate('theme.feedback.settings.submitText', submitText || 'Thank you for helping improve our documentation!'))));
     }
     return (React.createElement(Wrapper, { "data-component-name": "Feedback/Sentiment", className: className },
-        React.createElement(Label, { "data-translation-key": translationKeys.label }, translate(translationKeys.label, label || 'Was this page helpful?')),
+        React.createElement(Label, { "data-translation-key": "theme.feedback.settings.label" }, translate('theme.feedback.settings.label', label || 'Was this page helpful?')),
         React.createElement(Vote, { onClick: () => {
                 setScore(1);
             } },

package/lib/components/Feedback/Thumbs.js

@@ -32,9 +32,6 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../mocks/hooks");
 const ThumbUp = ({ text }) => {
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        thumbUp: 'theme.feedback.sentiment.thumbUp',
-    };
     return (React.createElement(Wrapper, { style: { alignItems: 'normal' } },
         React.createElement(Icon, null,
             React.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", viewBox: "0 0 512 512" },
@@ -45,14 +42,11 @@ const ThumbUp = ({ text }) => {
                             React.createElement("path", { d: "M76.8,443.733c9.412,0,17.067-7.654,17.067-17.067S86.212,409.6,76.8,409.6c-9.412,0-17.067,7.654-17.067,17.067\n              S67.388,443.733,76.8,443.733z" }),
                             React.createElement("path", { d: "M179.2,247.467c25.353,0,57.429-28.297,74.3-45.167c36.634-36.634,36.634-82.167,36.634-151.1\n              c0-5.342,3.191-8.533,8.533-8.533c29.508,0,42.667,13.158,42.667,42.667v102.4c0,4.71,3.814,8.533,8.533,8.533\n              s8.533-3.823,8.533-8.533v-102.4c0-39.083-20.659-59.733-59.733-59.733c-14.831,0-25.6,10.769-25.6,25.6\n              c0,66.978,0,107.401-31.633,139.034C216.661,215.006,192.811,230.4,179.2,230.4c-4.719,0-8.533,3.823-8.533,8.533\n              S174.481,247.467,179.2,247.467z" }),
                             React.createElement("path", { d: "M145.067,213.333H8.533c-4.719,0-8.533,3.823-8.533,8.533v256c0,4.71,3.814,8.533,8.533,8.533h136.533\n              c4.719,0,8.533-3.823,8.533-8.533v-256C153.6,217.156,149.786,213.333,145.067,213.333z M136.533,469.333H17.067V230.4h119.467\n              V469.333z" })))))),
-        React.createElement("span", null, translate(translationKeys.thumbUp, text || 'Yes'))));
+        React.createElement("span", null, translate('theme.feedback.sentiment.thumbUp', text || 'Yes'))));
 };
 exports.ThumbUp = ThumbUp;
 const ThumbDown = ({ text }) => {
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        thumbDown: 'theme.feedback.sentiment.thumbDown',
-    };
     return (React.createElement(Wrapper, { style: { alignItems: 'end' } },
         React.createElement(Icon, null,
             React.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", viewBox: "0 0 512 512" },
@@ -63,7 +57,7 @@ const ThumbDown = ({ text }) => {
                             React.createElement("path", { d: "M495.736,221.227C505.634,213.41,512,201.301,512,187.733c0-18.295-11.58-33.946-27.802-39.996\n\t\t\t\tc6.673-7.535,10.735-17.434,10.735-28.271c0-22.281-17.169-40.627-38.963-42.505c3.055-5.094,4.83-10.999,4.83-17.229\n\t\t\t\tc0-17.86-16.265-34.133-34.133-34.133h-128c-40.021,0-56.03,8.832-71.526,17.374c-11.827,6.519-24.047,13.261-49.152,16.845\n\t\t\t\tc-4.668,0.666-7.902,4.992-7.236,9.66c0.666,4.659,4.949,7.885,9.66,7.236c28.177-4.028,42.411-11.87,54.963-18.79\n\t\t\t\tc14.848-8.183,27.665-15.258,63.292-15.258h128c8.619,0,17.067,8.456,17.067,17.067c0,8.934-8.132,17.067-17.067,17.067\n\t\t\t\tc-4.719,0-8.533,3.823-8.533,8.533s3.814,8.533,8.533,8.533h25.6c14.114,0,25.6,11.486,25.6,25.6s-11.486,25.6-25.6,25.6\n\t\t\t\tc-4.719,0-8.533,3.823-8.533,8.533c0,4.71,3.814,8.533,8.533,8.533h17.067c14.114,0,25.6,11.486,25.6,25.6\n\t\t\t\ts-11.486,25.6-25.6,25.6c-4.531,0-8.277,3.541-8.516,8.064c-0.247,4.531,3.081,8.457,7.586,8.951\n\t\t\t\tc26.53,2.91,26.53,16.418,26.53,20.847c0,13.773-11.418,30.404-25.6,30.404H349.867c-14.763,0-42.667,8.917-42.667,42.667\n\t\t\t\tc0,4.71,3.814,8.533,8.533,8.533s8.533-3.823,8.533-8.533c0-24.09,21.367-25.549,25.6-25.6h119.467\n\t\t\t\tc24.414,0,42.667-25.054,42.667-47.471C512,242.603,509.397,229.683,495.736,221.227z" }),
                             React.createElement("path", { d: "M349.867,315.733c-4.719,0-8.533,3.823-8.533,8.533v102.4c0,29.508-13.158,42.667-42.667,42.667\n\t\t\t\tc-5.342,0-8.533-3.192-8.533-8.533c0-68.932,0-114.466-36.634-151.1c-16.87-16.87-48.947-45.167-74.3-45.167\n\t\t\t\tc-4.719,0-8.533,3.823-8.533,8.533s3.814,8.533,8.533,8.533c13.611,0,37.461,15.394,62.234,40.166\n\t\t\t\tc31.633,31.633,31.633,72.055,31.633,139.034c0,14.831,10.769,25.6,25.6,25.6c39.074,0,59.733-20.651,59.733-59.733v-102.4\n\t\t\t\tC358.4,319.556,354.586,315.733,349.867,315.733z" }),
                             React.createElement("path", { d: "M145.067,25.6H8.533C3.814,25.6,0,29.423,0,34.133v256c0,4.71,3.814,8.533,8.533,8.533h136.533\n\t\t\t\tc4.719,0,8.533-3.823,8.533-8.533v-256C153.6,29.423,149.786,25.6,145.067,25.6z M136.533,281.6H17.067V42.667h119.467V281.6z" })))))),
-        React.createElement("span", null, translate(translationKeys.thumbDown, text || 'No'))));
+        React.createElement("span", null, translate('theme.feedback.sentiment.thumbDown', text || 'No'))));
 };
 exports.ThumbDown = ThumbDown;
 const Wrapper = styled_components_1.default.div `

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

@@ -101,6 +101,6 @@ export type ReportDialogProps = {
     settings: {
         label?: string;
     };
-    submitFeedback: ({ type, values, path }: SubmitFeedbackParams) => Promise<void>;
+    submitFeedback: ({ type, values, path, location }: SubmitFeedbackParams) => Promise<void>;
     className?: string;
 };

package/lib/components/Feedback/useReportDialog.js

@@ -4,16 +4,13 @@ exports.useReportDialog = void 0;
 const react_1 = require("react");
 const hooks_1 = require("../../mocks/hooks");
 const hooks_2 = require("../../hooks");
+const useSubmitFeedback_1 = require("../../mocks/Feedback/useSubmitFeedback");
 function useReportDialog() {
     const { codeSnippet: { report = {} } = {} } = (0, hooks_2.useThemeConfig)();
     const [isReportDialogShown, setIsReportDialogShown] = (0, react_1.useState)(false);
     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',
-    };
+    const { submitFeedback } = (0, useSubmitFeedback_1.useSubmitFeedback)();
     const showReportDialog = () => {
         setIsReportDialogShown(true);
     };
@@ -22,16 +19,17 @@ function useReportDialog() {
     };
     const reportButtonProps = {
         onClick: showReportDialog,
-        buttonText: translate(translationKeys.buttonText, 'Report'),
-        tooltip: translate(translationKeys.tooltipText, 'Report a problem'),
+        buttonText: translate('theme.codeSnippet.report.buttonText', 'Report'),
+        tooltip: translate('theme.codeSnippet.report.tooltipText', 'Report a problem'),
         visible: isReportButtonShown,
     };
     const reportDialogProps = {
         settings: {
-            label: translate(translationKeys.label, 'What is wrong with this code?'),
+            label: translate('theme.codeSnippet.report.label', 'What is wrong with this code?'),
         },
         onSubmit: hideReportDialog,
         onCancel: hideReportDialog,
+        submitFeedback,
     };
     return {
         reportDialog: { visible: isReportDialogShown, props: reportDialogProps },

package/lib/components/Filter/Filter.js

@@ -13,10 +13,6 @@ const Select_1 = require("../../components/Select");
 function Filter({ filter, filterValuesCasing, }) {
     var _a;
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        selectAll: 'theme.catalog.filters.select.all',
-        clear: 'theme.catalog.filters.clear',
-    };
     if (!filter.parentUsed)
         return null;
     let selectOptions = [];
@@ -26,7 +22,7 @@ function Filter({ filter, filterValuesCasing, }) {
             {
                 value: '',
                 element: (react_1.default.createElement(FilterOption, { key: "all", onClick: () => filter.selectOption('') },
-                    react_1.default.createElement(FilterOptionLabel, null, translate(translationKeys.selectAll, 'All')),
+                    react_1.default.createElement(FilterOptionLabel, null, translate('theme.catalog.filters.select.all', 'All')),
                     react_1.default.createElement(FilterOptionCount, null, defaultOptionCount))),
             },
         ];
@@ -56,7 +52,7 @@ function Filter({ filter, filterValuesCasing, }) {
                             return;
                         filter.selectOption(Object.assign(Object.assign({}, filter.selectedOptions), { to: formatDateWithNoTimeZone(to) }));
                     } })))) : (filter.filteredOptions.map((value) => {
-            const id = 'filter--' + filter.property + '--' + value.value;
+            const id = 'filter--' + filter.property + '--' + slug(value.value);
             return (react_1.default.createElement(FilterOption, { key: id, role: "link", onClick: () => filter.toggleOption(value.value) },
                 react_1.default.createElement(icons_1.CheckboxIcon, { checked: filter.selectedOptions.has(value.value) }),
                 react_1.default.createElement(FilterOptionLabel, null, changeCasing(translate(value.value), filterValuesCasing)),
@@ -137,6 +133,10 @@ const StyledSelect = (0, styled_components_1.default)(Select_1.Select) `
     margin: var(--filter-select-option-margin);
   }
 `;
+// TODO: import from portal
+function slug(str) {
+    return str.replace(/\s/g, '-').toLowerCase();
+}
 const DatePickerWrapper = styled_components_1.default.div `
   color: var(--filter-date-picker-color);
   display: flex;

package/lib/components/Filter/FilterContent.js

@@ -14,10 +14,6 @@ const Sidebar_1 = require("../../components/Sidebar");
 const FilterPopover_1 = require("../../components/Filter/FilterPopover");
 function FilterContent({ setFilterTerm, filters, filterTerm, isMobile, filterValuesCasing, }) {
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        placeholder: 'theme.catalog.filters.placeholder',
-        clearAll: 'theme.catalog.filters.clearAll',
-    };
     const hasActiveFilters = filters.some((filter) => {
         if (filterTerm)
             return true;
@@ -34,10 +30,10 @@ function FilterContent({ setFilterTerm, filters, filterTerm, isMobile, filterVal
     };
     return (react_1.default.createElement(FilterContentWrapper, { isMobile: isMobile },
         react_1.default.createElement(Catalog_1.FilterControls, null,
-            react_1.default.createElement(FilterPopover_1.StyledInput, { placeholder: translate(translationKeys.placeholder, 'Type to filter...'), value: filterTerm, onChange: (e) => setFilterTerm(e.target.value) })),
+            react_1.default.createElement(FilterPopover_1.StyledInput, { placeholder: translate('theme.catalog.filters.placeholder', 'Type to filter...'), value: filterTerm, onChange: (e) => setFilterTerm(e.target.value) })),
         react_1.default.createElement(exports.FilterItems, null, filters.map((filter, idx) => (react_1.default.createElement(Filter_1.Filter, { filter: filter, key: filter.property + '-' + idx, filterValuesCasing: filterValuesCasing })))),
         hasActiveFilters && (react_1.default.createElement(ActionsContainer, null,
-            react_1.default.createElement(ClearAllButton, { size: "default", variant: "outlined", onClick: handleClearAll }, translate(translationKeys.placeholder, 'Clear all filters'))))));
+            react_1.default.createElement(ClearAllButton, { size: "default", variant: "outlined", onClick: handleClearAll }, translate('theme.catalog.filters.clearAll', 'Clear all filters'))))));
 }
 exports.FilterContent = FilterContent;
 const FilterContentWrapper = (0, styled_components_1.default)(Sidebar_1.Sidebar) `

package/lib/components/Filter/FilterPopover.js

@@ -19,18 +19,14 @@ function FilterPopover({ setIsAddingFilter, filters, filterValuesCasing, }) {
             ? Object.assign(Object.assign({}, filter), { filteredOptions: options }) : null;
     })
         .filter(Boolean);
-    const translationKeys = {
-        placeholder: 'theme.catalog.filters.placeholder',
-        done: 'theme.catalog.filters.done',
-    };
     const { translate } = (0, hooks_1.useTranslate)();
     return (react_1.default.createElement(FilterPopoverWrapper, null,
         react_1.default.createElement(FilterPopoverHeader, null,
             react_1.default.createElement(FilterPopoverHeaderLabel, null, "Add Filter"),
-            react_1.default.createElement(FilterPopoverHeaderButton, { onClick: () => setIsAddingFilter(false) }, translate(translationKeys.placeholder, 'Done'))),
+            react_1.default.createElement(FilterPopoverHeaderButton, { onClick: () => setIsAddingFilter(false) }, translate('theme.catalog.filters.done', 'Done'))),
         react_1.default.createElement(FilterContent_1.FilterContent, { setFilterTerm: setFilterTerm, filters: filters, filterTerm: filterTerm, filterValuesCasing: filterValuesCasing, isMobile: true }),
         react_1.default.createElement(Catalog_1.FilterControls, null,
-            react_1.default.createElement(exports.StyledInput, { placeholder: translate(translationKeys.placeholder, 'Type to filter...'), value: filterTerm, onChange: (e) => setFilterTerm(e.target.value) })),
+            react_1.default.createElement(exports.StyledInput, { placeholder: translate('theme.catalog.filters.placeholder', 'Type to filter...'), value: filterTerm, onChange: (e) => setFilterTerm(e.target.value) })),
         react_1.default.createElement(FilterContent_1.FilterItems, null, filteredFilters.map((filter, idx) => (react_1.default.createElement(Filter_1.Filter, { filter: filter, key: filter.property + '-' + idx }))))));
 }
 exports.FilterPopover = FilterPopover;

package/lib/components/Footer/FooterCopyright.js

@@ -11,11 +11,8 @@ const hooks_1 = require("../../mocks/hooks");
 function FooterCopyright({ copyrightText = '', className, }) {
     const { translate } = (0, hooks_1.useTranslate)();
     const { changeLanguage } = (0, hooks_1.useI18n)();
-    const translationKeys = {
-        copyrightText: 'theme.footer.copyrightText',
-    };
-    return copyrightText ? (react_1.default.createElement(Wrapper, { className: className, "data-component-name": "Footer/FooterCopyright", "data-translation-key": translationKeys.copyrightText },
-        react_1.default.createElement(Label, null, translate(translationKeys.copyrightText, copyrightText)),
+    return copyrightText ? (react_1.default.createElement(Wrapper, { className: className, "data-component-name": "Footer/FooterCopyright", "data-translation-key": "theme.footer.copyrightText" },
+        react_1.default.createElement(Label, null, translate('theme.footer.copyrightText', copyrightText)),
         react_1.default.createElement(LanguagePicker_1.LanguagePicker, { onChangeLanguage: changeLanguage, placement: "top", alignment: "end" }))) : null;
 }
 exports.FooterCopyright = FooterCopyright;

package/lib/components/LastUpdated/LastUpdated.js

@@ -51,7 +51,7 @@ function LastUpdated(props) {
     const lastUpdatedString = FORMATS[format](lastModified, locale);
     const translationKey = format === 'timeago' ? 'theme.page.lastUpdated.timeago' : 'theme.page.lastUpdated.on';
     const text = format === 'timeago'
-        ? translate(translationKey, 'Last updated ')
+        ? translate(translationKey, 'Last updated') + ' '
         : translate(translationKey, 'Last updated on');
     return (React.createElement(Wrapper, { className: props.className, "data-component-name": "LastUpdated/LastUpdated", rawOnPrint: format === 'timeago', "data-print-datetime": isoDate, "data-translation-key": translationKey },
         text,

package/lib/components/Menu/hooks/use-mobile-menu-items.js

@@ -11,9 +11,6 @@ const MENU_SEPARATOR = {
     type: 'separator',
     separatorLine: true,
 };
-const TRANSLATION_KEYS = {
-    products: 'theme.mobileMenu.products',
-};
 const useMobileMenuItems = (menuType) => {
     var _a, _b, _c;
     const { versions = [] } = (0, hooks_1.usePageVersions)() || {};
@@ -59,7 +56,7 @@ const useMobileMenuItems = (menuType) => {
         if (productMenuItems.length) {
             menuItems.push({
                 type: 'separator',
-                label: translate(TRANSLATION_KEYS.products, 'Products'),
+                label: translate('theme.mobileMenu.products', 'Products'),
             });
             menuItems.push(...productMenuItems);
         }