@redocly/theme 0.59.0-rc.3 → 0.60.0-custom.2

package/src/components/Dropdown/Dropdown.tsx

@@ -1,7 +1,7 @@
-import React, { cloneElement, useRef } from 'react';
+import React, { cloneElement, useRef, forwardRef } from 'react';
 import styled from 'styled-components';
 
-import type { PropsWithChildren, ReactElement, JSX } from 'react';
+import type { PropsWithChildren, ReactElement } from 'react';
 
 import { useOutsideClick, useControlledState } from '@redocly/theme/core/hooks';
 import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
@@ -32,84 +32,89 @@ export type DropdownProps = PropsWithChildren<{
   onClose?: () => void;
 }>;
 
-export function Dropdown({
-  children,
-  className,
-  active,
-  trigger,
-  triggerEvent = 'click',
-  closeOnClick = true,
-  withArrow,
-  dataAttributes,
-  placement,
-  alignment,
-  onClick,
-  onClose,
-}: DropdownProps): JSX.Element {
-  const dropdownRef = useRef<HTMLDivElement | null>(null);
-  const [isOpen, setIsOpen] = useControlledState<boolean>(false, active);
-
-  const handleOpen = () => {
-    setIsOpen(true);
-  };
-
-  const handleClose = () => {
-    setIsOpen(false);
-    onClose?.();
-  };
-
-  const handleChildClick = () => {
-    handleClose();
-  };
-
-  const handleToggle = (event: React.UIEvent) => {
-    event.stopPropagation();
-    event.preventDefault();
-    setIsOpen(!isOpen);
-  };
-
-  const handleKeyDown = (event: React.KeyboardEvent) => {
-    if (event.key === 'Enter' || event.key === ' ') {
-      handleToggle(event);
-    }
-  };
-
-  useOutsideClick(dropdownRef, handleClose);
-
-  const triggerChild = React.Children.only(trigger) as ReactElement<TriggerProps>;
-
-  const dropdownTrigger = cloneElement(triggerChild, {
-    onClick: triggerEvent === 'click' ? handleToggle : undefined,
-    icon: withArrow ? isOpen ? <ChevronUpIcon /> : <ChevronDownIcon /> : undefined,
-    ...(withArrow ? { iconPosition: 'right' } : {}),
-    ...triggerChild.props,
-    onKeyDown: triggerEvent === 'click' ? handleKeyDown : undefined,
-  });
-
-  return (
-    <DropdownWrapper
-      data-component-name="Dropdown/Dropdown"
-      data-testid="dropdown"
-      {...dataAttributes}
-      className={className}
-      ref={dropdownRef}
-      onPointerEnter={triggerEvent === 'hover' ? handleOpen : undefined}
-      onPointerLeave={triggerEvent === 'hover' ? handleClose : undefined}
-      onClick={onClick}
-    >
-      {dropdownTrigger}
-
-      <ChildrenWrapper
-        placement={placement}
-        alignment={alignment}
-        isOpen={isOpen}
-        onClick={closeOnClick ? handleChildClick : undefined}
+export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
+  (
+    {
+      children,
+      className,
+      active,
+      trigger,
+      triggerEvent = 'click',
+      closeOnClick = true,
+      withArrow,
+      dataAttributes,
+      placement,
+      alignment,
+      onClick,
+      onClose,
+    },
+    ref,
+  ) => {
+    const dropdownRef = useRef<HTMLDivElement | null>(null);
+    const [isOpen, setIsOpen] = useControlledState<boolean>(false, active);
+
+    const handleOpen = () => {
+      setIsOpen(true);
+    };
+
+    const handleClose = () => {
+      setIsOpen(false);
+      onClose?.();
+    };
+
+    const handleChildClick = () => {
+      handleClose();
+    };
+
+    const handleToggle = (event: React.UIEvent) => {
+      event.stopPropagation();
+      event.preventDefault();
+      setIsOpen(!isOpen);
+    };
+
+    const handleKeyDown = (event: React.KeyboardEvent) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        handleToggle(event);
+      }
+    };
+
+    useOutsideClick((ref as React.RefObject<HTMLElement | null>) || dropdownRef, handleClose);
+
+    const triggerChild = React.Children.only(trigger) as ReactElement<TriggerProps>;
+
+    const dropdownTrigger = cloneElement(triggerChild, {
+      onClick: triggerEvent === 'click' ? handleToggle : undefined,
+      icon: withArrow ? isOpen ? <ChevronUpIcon /> : <ChevronDownIcon /> : undefined,
+      ...(withArrow ? { iconPosition: 'right' } : {}),
+      ...triggerChild.props,
+      onKeyDown: triggerEvent === 'click' ? handleKeyDown : undefined,
+    });
+
+    return (
+      <DropdownWrapper
+        data-component-name="Dropdown/Dropdown"
+        data-testid="dropdown"
+        {...dataAttributes}
+        className={className}
+        ref={ref || dropdownRef}
+        onPointerEnter={triggerEvent === 'hover' ? handleOpen : undefined}
+        onPointerLeave={triggerEvent === 'hover' ? handleClose : undefined}
+        onClick={onClick}
       >
-        {children}
-      </ChildrenWrapper>
-    </DropdownWrapper>
-  );
-}
+        {dropdownTrigger}
+
+        <ChildrenWrapper
+          placement={placement}
+          alignment={alignment}
+          isOpen={isOpen}
+          onClick={closeOnClick ? handleChildClick : undefined}
+        >
+          {children}
+        </ChildrenWrapper>
+      </DropdownWrapper>
+    );
+  },
+);
 
 const DropdownWrapper = styled.div`
   --button-gap: var(--spacing-xxs);

package/src/components/Feedback/Mood.tsx

@@ -269,10 +269,10 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
         {displaySubmitBnt && (
           <ButtonsContainer>
             <Button onClick={onCancelMoodForm} variant="text" size="small">
-              Cancel
+              {translate('feedback.cancel', 'Cancel')}
             </Button>
             <Button type="submit" variant="secondary" size="small">
-              Submit
+              {translate('feedback.submit', 'Submit')}
             </Button>
           </ButtonsContainer>
         )}

package/src/components/Feedback/Rating.tsx

@@ -182,10 +182,10 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
         {displaySubmitBnt && (
           <ButtonsContainer>
             <Button onClick={onCancelRatingForm} variant="text" size="small">
-              Cancel
+              {translate('feedback.cancel', 'Cancel')}
             </Button>
             <Button onClick={onSubmitRatingForm} variant="secondary" size="small">
-              Submit
+              {translate('feedback.submit', 'Submit')}
             </Button>
           </ButtonsContainer>
         )}

package/src/components/Filter/FilterDateRange.tsx

@@ -25,7 +25,7 @@ export function FilterDateRange({ filter }: FilterProps): JSX.Element {
       <FilterOptions>
         <DateRangeWrapper>
           <DateRangeRow>
-            <span>From:</span>
+            <span>{translate('filter.dateRange.from', 'From:')}</span>
             <DatePicker
               closeCalendar={true}
               format="y-MM-dd"
@@ -45,7 +45,7 @@ export function FilterDateRange({ filter }: FilterProps): JSX.Element {
             />
           </DateRangeRow>
           <DateRangeRow>
-            <span>To:</span>
+            <span>{translate('filter.dateRange.to', 'To:')}</span>
             <DatePicker
               closeCalendar={true}
               dayPlaceholder="DD"

package/src/components/Filter/FilterSelect.tsx

@@ -55,6 +55,7 @@ export function FilterSelect({
         {translate(filter.titleTranslationKey, filter.title)}
       </FilterTitle>
       <StyledSelect
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         value={(filter.selectedOptions as Set<any>).values().next()?.value || ''}
         onChange={(value) => filter.selectOption(value)}
         options={selectOptions}

package/src/components/JsonViewer/JsonViewer.tsx

@@ -13,6 +13,7 @@ export type PanelType = 'request' | 'responses' | 'request-samples' | 'response-
 export type JsonProps = {
   title?: CodeBlockControlsProps['title'];
   controls?: CodeBlockControlsProps['controls'];
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   data: any;
   className?: string;
   expandLevel: number;

package/src/components/JsonViewer/helpers.tsx

@@ -1,3 +1,4 @@
+ 
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
 
@@ -7,6 +8,7 @@ import { Button } from '@redocly/theme/components/Button/Button';
 import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
 
 export function JsonValue(props: {
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   value: any;
   level: number;
   standalone?: boolean; // if true, will render the opening and closing punctuation (when it's an item inside array or top-level)
@@ -103,6 +105,7 @@ export function JsonValue(props: {
 
 function JsonKeyValue(props: {
   name: string;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   value: any;
   level: number;
   defaultExpandLevel: number;

package/src/components/LastUpdated/LastUpdated.tsx

@@ -63,6 +63,7 @@ export function LastUpdated(props: LastUpdatedProps): JSX.Element | null {
       data-print-datetime={isoDate}
       data-translation-key={translationKey}
     >
+      {/* eslint-disable-next-line no-warning-comments */}
       {text} {/* TODO: fix issue with snapshot tests - they should not depend on current date */}
       <time dateTime={isoDate}>{lastUpdatedString}</time>
     </LastUpdatedWrapper>

package/src/components/Link/Link.tsx

@@ -16,6 +16,7 @@ export type LinkProps = {
   languageInsensitive?: boolean;
   onClick?: () => void;
   [key: string]: unknown;
+  rel?: string;
 };
 
 export function Link(props: React.PropsWithChildren<LinkProps>): JSX.Element {

package/src/components/Loaders/Loading.tsx

@@ -5,6 +5,7 @@ import type { JSX } from 'react';
 
 import { getCssColorVariable } from '@redocly/theme/core/utils';
 import { Spinner } from '@redocly/theme/icons/Spinner/Spinner';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 const LoadingMessage = styled.div<{ color: string }>`
   font-family: helvetica, sans, sans-serif;
@@ -20,9 +21,12 @@ export type LoadingProps = {
 };
 
 export function Loading({ color }: LoadingProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
   return (
     <div style={{ textAlign: 'center' }}>
-      <LoadingMessage color={color}>Loading ...</LoadingMessage>
+      <LoadingMessage color={color}>{translate('loaders.loading', 'Loading...')}</LoadingMessage>
       <Spinner color={color} />
     </div>
   );

package/src/components/Markdown/Markdown.tsx

@@ -3,9 +3,9 @@ import styled, { css } from 'styled-components';
 import type { PropsWithChildren } from 'react';
 
 import { typography } from '@redocly/theme/core/utils';
-import { markdownBaseTableCss } from '@redocly/theme/components/Markdown/styles/baseTable';
+import { markdownBaseTableCss } from '@redocly/theme/components/Markdown/styles/base-table';
 import { markdownLinksCss } from '@redocly/theme/components/Markdown/styles/links';
-import { headingAnchorCss } from '@redocly/theme/components/Markdown/styles/headingAnchor';
+import { headingAnchorCss } from '@redocly/theme/components/Markdown/styles/heading-anchor';
 
 export type MarkdownProps = PropsWithChildren<{
   className?: string;

package/src/components/Menu/MenuItem.tsx

@@ -11,7 +11,7 @@ import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDow
 import { ChevronRightIcon } from '@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon';
 import { HttpTag } from '@redocly/theme/components/Tags/HttpTag';
 import { MenuItemType } from '@redocly/theme/core/constants';
-import { getMenuItemType } from '@redocly/theme/core/utils';
+import { getMenuItemType, getOperationColor } from '@redocly/theme/core/utils';
 import { ArrowRightIcon } from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIcon';
 import { Badge } from '@redocly/theme/components/Badge/Badge';
 import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
@@ -67,7 +67,11 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
     )
   ) : null;
 
-  const httpColor = item.deprecated ? 'http-deprecated' : item.httpVerb;
+  const httpColor = getOperationColor({
+    isAdditionalOperation: item.isAdditionalOperation,
+    deprecated: item.deprecated,
+    httpVerb: item.httpVerb || '',
+  });
 
   const label = item.label && (
     <MenuItemLabelWrapper
@@ -82,6 +86,7 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
       role={item.link ? 'none' : 'link'}
       tabIndex={!item.link ? 0 : undefined}
       data-testid="menu-item-label"
+      data-active={item.active}
     >
       {hasChevron ? <ChevronWrapper>{chevron}</ChevronWrapper> : null}
       <MenuItemIcon icon={item.icon} srcSet={item.srcSet} />

package/src/components/Navbar/NavbarItem.tsx

@@ -34,12 +34,13 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
   if (navItem.type !== 'link' && !navItem.items) return null;
 
   const item = navItem as ResolvedNavLinkItem;
-  const normalizedPath =
-    (item.link && item.link !== '/' ? removeTrailingSlash(item.link) : item.link) || '';
+  const normalizedPath = (item.link ? removeTrailingSlash(item.link) : item.link) || '';
 
-  const isActive =
-    pathname ===
-    withPathPrefix(getPathnameForLocale(normalizedPath, defaultLocale, currentLocale, locales));
+  const pathWithPathPrefix = withPathPrefix(
+    getPathnameForLocale(normalizedPath, defaultLocale, currentLocale, locales),
+  );
+
+  const isActive = removeTrailingSlash(pathname) === removeTrailingSlash(pathWithPathPrefix);
 
   const itemContent = (
     <NavbarMenuItem

package/src/components/OpenApiDocs/hooks/AdditionalOverviewInfo.tsx

@@ -6,4 +6,5 @@
 //   return null;
 // }
 
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export const AdditionalOverviewInfo: any = null;

package/src/components/OpenApiDocs/hooks/AfterOpenApiDescription.tsx

@@ -1 +1,2 @@
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export const AfterOpenApiDescription: any = null;

package/src/components/OpenApiDocs/hooks/AfterOpenApiOperation.tsx

@@ -5,5 +5,5 @@
 // export function AfterOpenApiOperation(_props: AfterOpenAPIOperationProps) {
 //   return null;
 // }
-
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export const AfterOpenApiOperation: any = null;

package/src/components/OpenApiDocs/hooks/AfterOpenApiTitle.tsx

@@ -5,5 +5,5 @@
 // export function AfterOpenApiTitle(_props: AfterOpenApiTitleProps) {
 //   return null;
 // }
-
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export const AfterOpenApiTitle: any = null;

package/src/components/OpenApiDocs/hooks/BeforeOpenApiOperation.tsx

@@ -5,5 +5,5 @@
 // export function BeforeOpenApiOperation(_props: BeforeOpenAPIOperationProps) {
 //   return null;
 // }
-
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export const BeforeOpenApiOperation: any = null;

package/src/components/OpenApiDocs/hooks/OpenApiFooter.tsx

@@ -1,5 +1,5 @@
 // export function OpenApiFooter() {
 //   return null;
 // }
-
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export const OpenApiFooter: any = null;

package/src/components/OpenApiDocs/hooks/OpenApiHeader.tsx

@@ -1,5 +1,5 @@
 // export function OpenApiHeader() {
 //   return null;
 // }
-
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export const OpenApiHeader: any = null;

package/src/components/PageActions/PageActions.tsx

@@ -77,7 +77,7 @@ export function PageActions(props: PageActionProps): JSX.Element | null {
         </Button>
         {actions.length > 1 ? (
           <Dropdown withArrow trigger={<Button />} placement="bottom" alignment="end">
-            <DropdownMenu items={menuItems} />
+            <StyledDropdownMenu items={menuItems} />
           </Dropdown>
         ) : null}
       </ButtonGroup>
@@ -110,3 +110,7 @@ const LinkMenuItem = styled(Link)`
   text-decoration: none;
   --link-decoration-hover: none;
 `;
+
+const StyledDropdownMenu = styled(DropdownMenu)`
+  --dropdown-menu-max-height: var(--page-actions-dropdown-max-height);
+`;

package/src/components/PageActions/variables.ts

@@ -7,6 +7,8 @@ export const pageActions = css`
   --page-actions-button-text-color: var(--text-color-secondary);
   --page-actions-button-padding: 5px 14px 5px var(--spacing-sm);
 
+  --page-actions-dropdown-max-height: fit-content;
+
   --page-actions-menu-item-padding: 3px 0;
   --page-actions-menu-item-gap: var(--spacing-xs);
   --page-actions-menu-item-icon-color: var(--icon-color-secondary);

package/src/components/Search/FilterFields/SearchFilterFieldSelect.tsx

@@ -27,6 +27,7 @@ export function SearchFilterFieldSelect({
   const { useFacetQuery, useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const { searchFacet, setSearchFacet, setSearchFacetQuery } = useFacetQuery(facet.field);
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   const [selectOptions, setSelectOptions] = useState<any[]>([]);
   const isMultiple = facet.type === 'multi-select';
 
@@ -101,7 +102,9 @@ export function SearchFilterFieldSelect({
       searchable={true}
       footer={
         selectOptions.length === MAX_SELECT_OPTIONS ? (
-          <FilterSelectFooter>Search to show more items...</FilterSelectFooter>
+          <FilterSelectFooter>
+            {translate('search.filter.field.footer', 'Search to show more items...')}
+          </FilterSelectFooter>
         ) : null
       }
       onSearch={onSearch}

package/src/components/Search/FilterFields/SearchFilterFieldTags.tsx

@@ -3,7 +3,9 @@ import styled from 'styled-components';
 
 import type { SearchFacet, SearchFacetCount } from '@redocly/theme/core/types';
 
-import { Tag, type TagProps } from '@redocly/theme/components/Tag/Tag';
+import { Tag } from '@redocly/theme/components/Tag/Tag';
+import { getOperationColor } from '@redocly/theme/core/utils';
+import { REQUEST_METHODS } from '@redocly/theme/core/constants';
 
 type SearchFilterFieldTagsProps = {
   className?: string;
@@ -32,11 +34,15 @@ export function SearchFilterFieldTags({
             : [...selectedValues, value];
           onChange(values);
         };
+        const color = getOperationColor({
+          httpVerb: value,
+          isAdditionalOperation: !REQUEST_METHODS.includes(value.toUpperCase()),
+        });
         return (
           <FilterTagWrapper
             key={`${count}-${index}`}
             tabIndex={0}
-            color={value}
+            color={color}
             onClick={() => {
               updateSelectedValues();
             }}
@@ -47,6 +53,7 @@ export function SearchFilterFieldTags({
             }}
             active={active}
             borderless
+            selectable
           >
             {value} {isCounterVisible && <span>{count}</span>}
           </FilterTagWrapper>
@@ -62,9 +69,8 @@ const FilterTagsWrapper = styled.div`
   gap: var(--search-filter-field-tags-gap);
 `;
 
-const FilterTagWrapper = styled(Tag)<{ color: TagProps['color'] }>`
+const FilterTagWrapper = styled(Tag)`
   text-transform: uppercase;
   cursor: pointer;
-  ${({ color }) => color && `background-color: var(--tag-operation-bg-color-${color});`}
   margin: var(--search-filter-field-tags-tag-margin);
 `;

package/src/components/Search/SearchAiActionButtons.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+
+import { FeedbackType } from '@redocly/theme/core/types';
+import { Button } from '@redocly/theme/components/Button/Button';
+import { ThumbUpIcon } from '@redocly/theme/icons/ThumbUpIcon/ThumbUpIcon';
+import { ThumbUpFilledIcon } from '@redocly/theme/icons/ThumbUpFilledIcon/ThumbUpFilledIcon';
+import { ThumbDownIcon } from '@redocly/theme/icons/ThumbDownIcon/ThumbDownIcon';
+import { ThumbDownFilledIcon } from '@redocly/theme/icons/ThumbDownFilledIcon/ThumbDownFilledIcon';
+import { CopyButton } from '@redocly/theme/components/Buttons/CopyButton';
+
+export type SearchAiActionButtonsProps = {
+  content: string;
+  className?: string;
+  feedback?: FeedbackType;
+  onFeedback: (feedback: FeedbackType) => void;
+  disabled?: boolean;
+};
+
+export function SearchAiActionButtons({
+  content,
+  className,
+  feedback,
+  onFeedback,
+  disabled,
+}: SearchAiActionButtonsProps): JSX.Element {
+  return (
+    <ActionButtonsWrapper className={className} data-component-name="Search/SearchAiActionButtons">
+      <CopyButton data={content} />
+      <FeedbackButton
+        variant="text"
+        size="small"
+        icon={feedback === FeedbackType.Like ? <ThumbUpFilledIcon /> : <ThumbUpIcon />}
+        onClick={() => !disabled && onFeedback(FeedbackType.Like)}
+        extraClass={feedback === FeedbackType.Like ? 'active' : ''}
+        aria-label="Like this response"
+        disabled={disabled}
+      />
+
+      <FeedbackButton
+        variant="text"
+        size="small"
+        icon={feedback === FeedbackType.Dislike ? <ThumbDownFilledIcon /> : <ThumbDownIcon />}
+        onClick={() => !disabled && onFeedback(FeedbackType.Dislike)}
+        extraClass={feedback === FeedbackType.Dislike ? 'active' : ''}
+        aria-label="Dislike this response"
+        disabled={disabled}
+      />
+    </ActionButtonsWrapper>
+  );
+}
+
+const ActionButtonsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--search-ai-feedback-gap);
+`;
+
+const FeedbackButton = styled(Button)`
+  &:disabled {
+    pointer-events: none;
+    cursor: default;
+    opacity: 1;
+    background-color: var(--button-bg-color);
+    color: var(--button-color);
+    border-color: var(--button-border-color);
+  }
+
+  &:disabled.active {
+    background-color: var(--button-bg-color-active);
+    border-color: var(--button-border-color-active);
+    color: var(--button-color-active);
+  }
+`;