@redocly/theme 0.61.1 → 0.62.0-custom.1

package/src/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar.tsx

@@ -7,8 +7,7 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { MenuContainer } from '@redocly/theme/components/Menu/MenuContainer';
 import { transformRevisionsToVersionHistory } from '@redocly/theme/core/utils';
 import { DEFAULT_LOCALE_PLACEHOLDER } from '@redocly/theme/core/constants';
-
-import { CatalogEntityVersionItem } from './CatalogEntityVersionItem';
+import { CatalogEntityVersionItem } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityVersionItem';
 
 export type CatalogHistorySidebarProps = {
   entityKey: string;
@@ -129,10 +128,10 @@ export function CatalogEntityHistorySidebar({
 
 const SidebarOverlay = styled.div`
   position: fixed;
-  top: var(--navbar-height);
+  top: calc(var(--navbar-height) + var(--banner-height, 0));
   left: 0;
   width: var(--sidebar-width);
-  height: calc(100vh - var(--navbar-height));
+  height: calc(100vh - var(--navbar-height) - var(--banner-height, 0));
   background-color: var(--catalog-history-sidebar-bg-color);
   border-right: 1px solid var(--catalog-history-sidebar-border-color);
   display: flex;

package/src/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityVersionItem.tsx

@@ -53,9 +53,6 @@ export function CatalogEntityVersionItem({
 
   const singleRevisionLink = buildRevisionUrl(basePath, group.singleRevisionDate, group.version);
 
-  const isClickable = hasRevisions || Boolean(singleRevisionLink);
-  const isSingleRevisionActive = Boolean(singleRevisionLink && group.isCurrent);
-
   const versionTitle = isNotSpecifiedVersion
     ? `${translate('catalog.history.version.label', 'Version')}: ${translate('catalog.history.version.notSpecified', 'not specified')}`
     : `${translate('catalog.history.version.label', 'Version')}: ${group.version}`;
@@ -64,9 +61,7 @@ export function CatalogEntityVersionItem({
     <VersionButton
       type="button"
       onClick={() => hasRevisions && onToggle(group.version)}
-      $isClickable={isClickable}
       $isCurrent={group.isCurrent}
-      $isActive={isSingleRevisionActive}
     >
       <VersionIcon $isCurrent={group.isCurrent}>
         {group.isCurrent ? (
@@ -155,34 +150,23 @@ export function CatalogEntityVersionItem({
 }
 
 const VersionButton = styled.button<{
-  $isClickable?: boolean;
   $isCurrent?: boolean;
-  $isActive?: boolean;
 }>`
   all: unset;
   display: flex;
   align-items: center;
   width: calc(100% - var(--catalog-history-sidebar-version-icon-margin-right));
   padding: var(--catalog-history-sidebar-version-header-padding);
-  cursor: ${({ $isClickable }) => ($isClickable ? 'pointer' : 'default')};
+  cursor: pointer;
   border-radius: var(--catalog-history-sidebar-version-header-border-radius);
   transition: 0.2s ease;
   text-decoration: none;
   color: inherit;
-  background-color: ${({ $isActive }) =>
-    $isActive ? 'var(--catalog-history-sidebar-revision-item-bg-color-active)' : 'transparent'};
+  background-color: 'transparent';
 
-  ${({ $isClickable, $isActive }) =>
-    $isClickable &&
-    `
-    &:hover {
-      background-color: ${
-        $isActive
-          ? 'var(--catalog-history-sidebar-revision-item-bg-color-active)'
-          : 'var(--catalog-history-sidebar-version-header-bg-color-hover)'
-      };
-    }
-  `}
+  &:hover {
+    background-color: var(--catalog-history-sidebar-version-header-bg-color-hover);
+  }
 
   ${({ $isCurrent }) =>
     !$isCurrent &&

package/src/components/Catalog/CatalogEntity/CatalogEntityProperties/TagsProperty.tsx

@@ -2,7 +2,7 @@ import React, { JSX } from 'react';
 
 import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { TagsIcon } from '@redocly/theme/icons/TagsIcon/TagsIcon';
-import { CatalogTagsWithTooltip } from '@redocly/theme';
+import { CatalogTagsWithTooltip } from '@redocly/theme/components/Catalog/CatalogTagsWithTooltip';
 import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable.tsx

@@ -62,17 +62,19 @@ export function CatalogEntityRelationsTable({
 
   const onRowClick = (relatedEntity: BffCatalogRelatedEntity) => {
     if (searchQuery) {
-      telemetry.sendCatalogEntitiesRelatedEntitiesListSearchResultClickMessage({
-        id: relatedEntity.id,
-        object: 'catalog_entity',
-        uri: getEntityDetailsLink(relatedEntity),
-        query: searchQuery,
-        entityKey: entity.key,
-        entityType: entity.type,
-        relationType: reverseRelationMap[relatedEntity.relationType],
-        relatedEntityKey: relatedEntity.key,
-        relatedEntityType: relatedEntity.type,
-      });
+      telemetry.sendCatalogEntitiesRelatedEntitiesListSearchResultClickMessage([
+        {
+          id: relatedEntity.id,
+          object: 'catalog_entity',
+          uri: getEntityDetailsLink(relatedEntity),
+          query: searchQuery,
+          entityKey: entity.key,
+          entityType: entity.type,
+          relationType: reverseRelationMap[relatedEntity.relationType],
+          relatedEntityKey: relatedEntity.key,
+          relatedEntityType: relatedEntity.type,
+        },
+      ]);
     }
   };
 

package/src/components/Catalog/CatalogEntity/CatalogEntitySchema.tsx

@@ -52,11 +52,13 @@ export function CatalogEntitySchema({
             iconPosition="right"
             size="medium"
             onCopyClick={() =>
-              telemetry.sendCatalogEntitiesCopyDataSchemaClickedMessage({
-                id: entity.id,
-                object: 'catalog_entity',
-                uri: getEntityDetailsLink(entity),
-              })
+              telemetry.sendCatalogEntitiesCopyDataSchemaClickedMessage([
+                {
+                  id: entity.id,
+                  object: 'catalog_entity',
+                  uri: getEntityDetailsLink(entity),
+                },
+              ])
             }
           ></CopyButton>
         )}

package/src/components/Catalog/CatalogFilter/CatalogFilterCheckboxes.tsx

@@ -102,13 +102,15 @@ export function CatalogFilterCheckboxes({
                 role="link"
                 onClick={() => {
                   filter.toggleOption(value);
-                  telemetry.sendCatalogEntitiesFilterCheckboxToggledMessage({
-                    id: filter.property + '--' + value,
-                    object: 'checkbox',
-                    uri: window.location.href,
-                    category: filter.property,
-                    value: value,
-                  });
+                  telemetry.sendCatalogEntitiesFilterCheckboxToggledMessage([
+                    {
+                      id: filter.property + '--' + value,
+                      object: 'checkbox',
+                      uri: window.location.href,
+                      category: filter.property,
+                      value: value,
+                    },
+                  ]);
                 }}
               >
                 <CheckboxIcon

package/src/components/Catalog/CatalogTableView/CatalogTableViewRow.tsx

@@ -10,8 +10,7 @@ import { CatalogEntityCell } from '@redocly/theme/components/Catalog/CatalogTabl
 import { CatalogTagsCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTagsCell';
 import { useCatalogEntityDetails } from '@redocly/theme/core/hooks';
 import { CatalogEntityTypeTag } from '@redocly/theme/components/Catalog/CatalogEntityTypeTag';
-
-import { Link } from '../../Link/Link';
+import { Link } from '@redocly/theme/components/Link/Link';
 
 export type BaseEntity = {
   id: string;

package/src/components/Catalog/CatalogTagsWithTooltip.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { CATALOG_TAG_MAX_LENGTH } from '@redocly/theme/core/constants';
 import { Tag, TagProps } from '@redocly/theme/components/Tag/Tag';
-import { TooltipComponent } from '@redocly/theme/components/Tooltip/Tooltip';
+import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
 import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 
@@ -27,8 +27,12 @@ export function CatalogTagsWithTooltip({
     if (showPlaceholder) {
       return (
         <CatalogTagsWrapper data-component-name="Catalog/CatalogTagsWithTooltip">
-          {/* eslint-disable-next-line theme/require-translate */}
-          <Tag style={{ backgroundColor: 'var(--catalog-tags-placeholder-bg-color)' }} color="grey">
+          <Tag
+            variant="outline"
+            style={{ backgroundColor: 'var(--catalog-tags-placeholder-bg-color)' }}
+            color="grey"
+            // eslint-disable-next-line theme/require-translate
+          >
             N/A
           </Tag>
         </CatalogTagsWrapper>
@@ -53,7 +57,7 @@ export function CatalogTagsWithTooltip({
   const remainingCount = items.length - itemsToShow;
 
   return (
-    <TooltipComponent tip={items.join(', ')} placement="bottom" className="catalog" width="400px">
+    <Tooltip tip={items.join(', ')} placement="bottom" className="catalog" width="400px">
       <CatalogTagsWrapper data-component-name="Catalog/CatalogTagsWithTooltip">
         {displayedItems.map((item, index) => (
           <Tag
@@ -70,7 +74,7 @@ export function CatalogTagsWithTooltip({
           +{remainingCount} {translate('catalog.tags.more', 'more')}
         </MoreTagsButton>
       </CatalogTagsWrapper>
-    </TooltipComponent>
+    </Tooltip>
   );
 }
 

package/src/components/CatalogClassic/CatalogClassicInfoBlock.tsx

@@ -52,7 +52,9 @@ function ScorecardBadge(props: {
   return (
     <Link to={slug}>
       <Tag
-        onClick={() => telemetry.sendScorecardLinkClickedMessage({ action: 'click' })}
+        onClick={() =>
+          telemetry.sendScorecardLinkClickedMessage([{ object: 'link', action: 'click' }])
+        }
         withStatusDot
         statusDotColor={`var(${colorVariable})`}
       >

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -6,7 +6,7 @@ import type { CodeBlockItems } from '@redocly/theme/components/CodeBlock/CodeBlo
 
 import { CodeBlockTabs } from '@redocly/theme/components/CodeBlock/CodeBlockTabs';
 import { CopyButton } from '@redocly/theme/components/Buttons/CopyButton';
-import { TooltipWrapper } from '@redocly/theme/components/Tooltip/TooltipWrapper';
+import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
 import { useThemeHooks, useThemeConfig } from '@redocly/theme/core/hooks';
 import { DeselectIcon } from '@redocly/theme/icons/DeselectIcon/DeselectIcon';
 import { MaximizeIcon } from '@redocly/theme/icons/MaximizeIcon/MaximizeIcon';
@@ -86,9 +86,10 @@ export function CodeBlockControls({
       <ControlsWrapper>
         {dropdown && <CodeBlockDropdown {...dropdown} />}
         {report && !report.hidden && !report?.props?.hide ? (
-          <TooltipWrapper
+          <Tooltip
             tip={translate('codeSnippet.report.tooltipText', 'Report a problem')}
             placement="top"
+            arrowPosition="right"
           >
             <ControlButton
               variant="text"
@@ -99,13 +100,14 @@ export function CodeBlockControls({
             >
               {controlsType != 'icon' && (report.props?.buttonText || 'Report')}
             </ControlButton>
-          </TooltipWrapper>
+          </Tooltip>
         ) : null}
 
         {expand && !codeSnippet?.expand?.hide ? (
-          <TooltipWrapper
+          <Tooltip
             tip={translate('codeSnippet.expand.tooltipText', 'Expand all')}
             placement="top"
+            arrowPosition="right"
           >
             <ControlButton
               variant="text"
@@ -116,13 +118,14 @@ export function CodeBlockControls({
             >
               {controlsType !== 'icon' && (expand?.label || 'Expand all')}
             </ControlButton>
-          </TooltipWrapper>
+          </Tooltip>
         ) : null}
 
         {collapse && !codeSnippet?.collapse?.hide ? (
-          <TooltipWrapper
+          <Tooltip
             tip={translate('codeSnippet.collapse.tooltipText', 'Collapse all')}
             placement="top"
+            arrowPosition="right"
           >
             <ControlButton
               variant="text"
@@ -133,7 +136,7 @@ export function CodeBlockControls({
             >
               {controlsType !== 'icon' && (expand?.label || 'Collapse all')}
             </ControlButton>
-          </TooltipWrapper>
+          </Tooltip>
         ) : null}
 
         {select ? (
@@ -161,9 +164,10 @@ export function CodeBlockControls({
         ) : null}
 
         {copy && !codeSnippet?.copy?.hide ? (
-          <TooltipWrapper
+          <Tooltip
             tip={translate('codeSnippet.copy.tooltipText', 'Copy to clipboard')}
             placement="top"
+            arrowPosition="right"
           >
             <StyledCopyButton
               data={copy.data}
@@ -178,11 +182,13 @@ export function CodeBlockControls({
                 if (copy?.onClick) {
                   copy?.onClick?.();
                 } else {
-                  telemetry.sendCopyCodeSnippetClickedMessage({ snippetType: 'copy' });
+                  telemetry.sendCopyCodeSnippetClickedMessage([
+                    { object: 'code_snippet', snippetType: 'copy' },
+                  ]);
                 }
               }}
             />
-          </TooltipWrapper>
+          </Tooltip>
         ) : null}
       </ControlsWrapper>
     </>

package/src/components/Dropdown/Dropdown.tsx

@@ -142,5 +142,5 @@ const ChildrenWrapper = styled.div<{ placement?: string; alignment?: string; isO
   right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
   display: ${({ isOpen }) => (isOpen ? 'block' : 'none')};
 
-  z-index: var(--z-index-raised);
+  z-index: var(--dropdown-menu-z-index);
 `;

package/src/components/Dropdown/variables.ts

@@ -8,6 +8,7 @@ export const dropdown = css`
   --dropdown-menu-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --dropdown-menu-line-height: var(--line-height-base); // @presenter LineHeight
   --dropdown-menu-text-color: var(--text-color-secondary); // @presenter Color
+  --dropdown-menu-z-index: var(--z-index-raised); // @presenter ZIndex
 
   --dropdown-menu-padding-top: var(--spacing-xxs);
   --dropdown-menu-min-width: 100px;

package/src/components/Feedback/Comment.tsx

@@ -6,6 +6,7 @@ import type { JSX } from 'react';
 import { useOutsideClick, useThemeHooks } from '@redocly/theme/core/hooks';
 import { RadioCheckButtonIcon } from '@redocly/theme/icons/RadioCheckButtonIcon/RadioCheckButtonIcon';
 import { Button } from '@redocly/theme/components/Button/Button';
+import { MAX_CONTEXT_LENGTH } from '@redocly/theme/core/constants';
 
 export type CommentProps = {
   onSubmit: (value: { comment: string }) => void;
@@ -32,18 +33,21 @@ export function Comment({
   const { label, submitText } = settings || {};
   const [text, setText] = React.useState('');
   const [submitValue, setSubmitValue] = React.useState('');
+  const [isMaxLengthReached, setIsMaxLengthReached] = React.useState(false);
   const modalRef = useRef<HTMLDivElement>(null);
 
   useOutsideClick(modalRef, onCancel);
 
   const send = () => {
-    if (!text) return;
-    setSubmitValue(text);
-    onSubmit({ comment: text });
+    const trimmedText = text.trim();
+    if (!trimmedText) return;
+    setSubmitValue(trimmedText);
+    onSubmit({ comment: trimmedText });
   };
   const handleTextAreaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const commentValue = e.target.value;
     setText(commentValue);
+    setIsMaxLengthReached(commentValue.length >= MAX_CONTEXT_LENGTH);
 
     if (!standAlone) {
       onSubmit({ comment: commentValue });
@@ -81,7 +85,15 @@ export function Comment({
         {label ||
           translate('feedback.settings.comment.label', 'Please share your feedback with us.')}
       </Label>
-      <TextArea rows={3} onChange={handleTextAreaChange} />
+      <TextArea rows={3} maxLength={MAX_CONTEXT_LENGTH} onChange={handleTextAreaChange} />
+      {isMaxLengthReached && (
+        <MaxLengthMessage data-translation-key="feedback.settings.comment.maxLength">
+          {translate('feedback.settings.comment.maxLength', {
+            maxLength: MAX_CONTEXT_LENGTH,
+            defaultValue: `Maximum content length of ${MAX_CONTEXT_LENGTH} characters reached`,
+          })}
+        </MaxLengthMessage>
+      )}
       {standAlone && (
         <ButtonsContainer>
           {onCancel && (
@@ -175,3 +187,9 @@ const ButtonsContainer = styled.div`
   margin-top: var(--spacing-xs);
   gap: var(--spacing-xs);
 `;
+
+const MaxLengthMessage = styled.div`
+  font-size: var(--font-size-sm);
+  color: var(--text-color-secondary);
+  margin-top: var(--spacing-xxs);
+`;

package/src/components/Feedback/Mood.tsx

@@ -14,6 +14,7 @@ import { Button } from '@redocly/theme/components/Button/Button';
 import { FaceDissatisfiedIcon } from '@redocly/theme/icons/FaceDissatisfiedIcon/FaceDissatisfiedIcon';
 import { FaceSatisfiedIcon } from '@redocly/theme/icons/FaceSatisfiedIcon/FaceSatisfiedIcon';
 import { FaceNeutralIcon } from '@redocly/theme/icons/FaceNeutralIcon/FaceNeutralIcon';
+import { MAX_EMAIL_LENGTH } from '@redocly/theme/core/constants';
 
 export enum MOOD_STATES {
   SATISFIED = 'satisfied',
@@ -135,11 +136,13 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
   const displayFeedbackEmail = !!score && !optionalEmailSettings?.hide && !userData.isAuthenticated;
 
   const onSubmitMoodForm = () => {
+    const trimmedComment = comment?.trim() || undefined;
+    const trimmedEmail = email?.trim() || undefined;
     onSubmit({
       score: remapScore(score),
-      comment,
+      comment: trimmedComment,
       reasons,
-      email,
+      email: trimmedEmail,
     });
     setIsSubmitted(true);
   };
@@ -255,6 +258,7 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
                 translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com')
               }
               type="email"
+              maxLength={MAX_EMAIL_LENGTH}
               required={!!email}
               onKeyDown={(e) => {
                 if (e.key === 'Enter') {

package/src/components/Feedback/Rating.tsx

@@ -12,6 +12,7 @@ import { RadioCheckButtonIcon } from '@redocly/theme/icons/RadioCheckButtonIcon/
 import { Comment } from '@redocly/theme/components/Feedback/Comment';
 import { Stars } from '@redocly/theme/components/Feedback/Stars';
 import { Button } from '@redocly/theme/components/Button/Button';
+import { MAX_EMAIL_LENGTH } from '@redocly/theme/core/constants';
 
 export const FEEDBACK_MAX_RATING = 5;
 
@@ -64,12 +65,14 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
   };
 
   const onSubmitRatingForm = () => {
+    const trimmedComment = comment?.trim() || undefined;
+    const trimmedEmail = email?.trim() || undefined;
     onSubmit({
       score,
-      comment,
+      comment: trimmedComment,
       reasons,
       max: FEEDBACK_MAX_RATING,
-      email,
+      email: trimmedEmail,
     });
     setIsSubmitted(true);
   };
@@ -168,6 +171,7 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
                 translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com')
               }
               type="email"
+              maxLength={MAX_EMAIL_LENGTH}
               required={!!email}
               onKeyDown={(e) => {
                 if (e.key === 'Enter') {

package/src/components/Feedback/Scale.tsx

@@ -12,6 +12,7 @@ import { RadioCheckButtonIcon } from '@redocly/theme/icons/RadioCheckButtonIcon/
 import { Comment } from '@redocly/theme/components/Feedback/Comment';
 import { Reasons } from '@redocly/theme/components/Feedback/Reasons';
 import { Button } from '@redocly/theme/components/Button/Button';
+import { MAX_EMAIL_LENGTH } from '@redocly/theme/core/constants';
 
 export const MAX_SCALE = 10;
 
@@ -96,12 +97,14 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
   };
 
   const onSubmitScaleForm = () => {
+    const trimmedComment = comment?.trim() || undefined;
+    const trimmedEmail = email?.trim() || undefined;
     onSubmit({
       score,
-      comment,
+      comment: trimmedComment,
       reasons,
       max: MAX_SCALE,
-      email,
+      email: trimmedEmail,
     });
     setIsSubmitted(true);
   };
@@ -193,6 +196,7 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
                 translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com')
               }
               type="email"
+              maxLength={MAX_EMAIL_LENGTH}
               required={!!email}
               onKeyDown={(e) => {
                 if (e.key === 'Enter') {

package/src/components/Feedback/Sentiment.tsx

@@ -13,6 +13,7 @@ import { Comment } from '@redocly/theme/components/Feedback/Comment';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { ThumbDownIcon } from '@redocly/theme/icons/ThumbDownIcon/ThumbDownIcon';
 import { ThumbUpIcon } from '@redocly/theme/icons/ThumbUpIcon/ThumbUpIcon';
+import { MAX_EMAIL_LENGTH } from '@redocly/theme/core/constants';
 
 export type SentimentProps = {
   onSubmit: (value: {
@@ -117,11 +118,13 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
   };
 
   const onSubmitSentimentForm = () => {
+    const trimmedComment = comment?.trim() || undefined;
+    const trimmedEmail = email?.trim() || undefined;
     onSubmit({
       score,
-      comment,
+      comment: trimmedComment,
       reasons,
-      email,
+      email: trimmedEmail,
     });
     setIsSubmitted(true);
   };
@@ -227,6 +230,7 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
                 translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com')
               }
               type="email"
+              maxLength={MAX_EMAIL_LENGTH}
               required={!!email}
               onKeyDown={(e) => {
                 if (e.key === 'Enter') {

package/src/components/Filter/FilterCheckboxes.tsx

@@ -36,7 +36,7 @@ export function FilterCheckboxes({
               role="link"
               onClick={() => {
                 filter.toggleOption(value);
-                telemetry.sendFilterCheckboxToggledMessage({ id });
+                telemetry.sendFilterCheckboxToggledMessage([{ object: 'checkbox', id }]);
               }}
             >
               <CheckboxIcon

package/src/components/JsonViewer/JsonViewer.tsx

@@ -5,8 +5,7 @@ import type { JSX } from 'react';
 import type { CodeBlockControlsProps } from '@redocly/theme/components/CodeBlock/CodeBlockControls';
 
 import { CodeBlock } from '@redocly/theme/components/CodeBlock/CodeBlock';
-
-import { JsonValue } from './Helpers';
+import { JsonValue } from '@redocly/theme/components/JsonViewer/helpers';
 
 export type PanelType = 'request' | 'responses' | 'request-samples' | 'response-samples';
 

package/src/components/JsonViewer/{Helpers.tsx → helpers.tsx}

@@ -1,3 +1,4 @@
+/* eslint-disable check-file/filename-naming-convention */
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
 

package/src/components/LanguagePicker/LanguagePicker.tsx

@@ -40,7 +40,7 @@ export function LanguagePicker(props: LanguagePickerProps): JSX.Element | null {
     onAction: () => {
       setLocale(locale.code);
       props.onChangeLanguage(locale.code);
-      telemetry.sendLanguagePickerLocaleChangedMessage({ locale: locale.code });
+      telemetry.sendLanguagePickerLocaleChangedMessage([{ object: 'locale', locale: locale.code }]);
     },
     active: locale.code === currentLocale.code,
     suffix: locale.code === currentLocale.code && <CheckmarkIcon />,

package/src/components/Markdown/Markdown.tsx

@@ -58,7 +58,7 @@ export const Markdown = styled.main.attrs<{
   ${markdownLinksCss}
 
   a[name], [id] {
-    scroll-margin-top: var(--navbar-height);
+    scroll-margin-top: calc(var(--navbar-height) + var(--banner-height));
   }
 
   img,
@@ -76,7 +76,7 @@ export const Markdown = styled.main.attrs<{
     font-family: var(--heading-font-family);
     position: relative;
 
-    scroll-margin-top: var(--navbar-height);
+    scroll-margin-top: calc(var(--navbar-height) + var(--banner-height));
   }
 
   strong {