@redocly/theme 0.59.0-next.4 → 0.59.0-rc.2

package/src/components/Dropdown/Dropdown.tsx

@@ -1,7 +1,7 @@
-import React, { cloneElement, useRef, forwardRef } from 'react';
+import React, { cloneElement, useRef } from 'react';
 import styled from 'styled-components';
 
-import type { PropsWithChildren, ReactElement } from 'react';
+import type { PropsWithChildren, ReactElement, JSX } from 'react';
 
 import { useOutsideClick, useControlledState } from '@redocly/theme/core/hooks';
 import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
@@ -32,89 +32,84 @@ export type DropdownProps = PropsWithChildren<{
   onClose?: () => void;
 }>;
 
-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}
+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}
       >
-        {dropdownTrigger}
-
-        <ChildrenWrapper
-          placement={placement}
-          alignment={alignment}
-          isOpen={isOpen}
-          onClick={closeOnClick ? handleChildClick : undefined}
-        >
-          {children}
-        </ChildrenWrapper>
-      </DropdownWrapper>
-    );
-  },
-);
+        {children}
+      </ChildrenWrapper>
+    </DropdownWrapper>
+  );
+}
 
 const DropdownWrapper = styled.div`
   --button-gap: var(--spacing-xxs);

package/src/components/Menu/MenuItem.tsx

@@ -82,7 +82,6 @@ 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,13 +34,12 @@ 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 ? removeTrailingSlash(item.link) : item.link) || '';
+  const normalizedPath =
+    (item.link && item.link !== '/' ? removeTrailingSlash(item.link) : item.link) || '';
 
-  const pathWithPathPrefix = withPathPrefix(
-    getPathnameForLocale(normalizedPath, defaultLocale, currentLocale, locales),
-  );
-
-  const isActive = removeTrailingSlash(pathname) === removeTrailingSlash(pathWithPathPrefix);
+  const isActive =
+    pathname ===
+    withPathPrefix(getPathnameForLocale(normalizedPath, defaultLocale, currentLocale, locales));
 
   const itemContent = (
     <NavbarMenuItem

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

@@ -0,0 +1,9 @@
+// interface AdditionalOverviewInfoProps {
+//   info: any;
+// }
+
+// export function AdditionalOverviewInfo(_props: AdditionalOverviewInfoProps) {
+//   return null;
+// }
+
+export const AdditionalOverviewInfo: any = null;

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

@@ -0,0 +1 @@
+export const AfterOpenApiDescription: any = null;

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

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import type { SearchFacet, SearchFacetCount } from '@redocly/theme/core/types';
 
-import { Tag } from '@redocly/theme/components/Tag/Tag';
+import { Tag, type TagProps } from '@redocly/theme/components/Tag/Tag';
 
 type SearchFilterFieldTagsProps = {
   className?: string;
@@ -47,7 +47,6 @@ export function SearchFilterFieldTags({
             }}
             active={active}
             borderless
-            selectable
           >
             {value} {isCounterVisible && <span>{count}</span>}
           </FilterTagWrapper>
@@ -63,8 +62,9 @@ const FilterTagsWrapper = styled.div`
   gap: var(--search-filter-field-tags-gap);
 `;
 
-const FilterTagWrapper = styled(Tag)`
+const FilterTagWrapper = styled(Tag)<{ color: TagProps['color'] }>`
   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/SearchAiConversationInput.tsx

@@ -13,7 +13,6 @@ type SearchAiConversationInputProps = {
   isGeneratingResponse: boolean;
   placeholder?: string;
   className?: string;
-  disabled?: boolean;
 };
 
 export function SearchAiConversationInput({
@@ -21,7 +20,6 @@ export function SearchAiConversationInput({
   onMessageSent,
   className,
   placeholder,
-  disabled,
 }: SearchAiConversationInputProps): JSX.Element {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
@@ -38,8 +36,6 @@ export function SearchAiConversationInput({
   }, [isGeneratingResponse]);
 
   const handleSendMessage = () => {
-    if (disabled) return;
-
     setQuery('');
     onMessageSent(query);
   };
@@ -50,7 +46,7 @@ export function SearchAiConversationInput({
     }
   };
 
-  const isDisabled = disabled || isGeneratingResponse || query.trim().length === 0;
+  const isDisabled = isGeneratingResponse || query.trim().length === 0;
 
   return (
     <SearchAiConversationInputWrapper
@@ -66,7 +62,7 @@ export function SearchAiConversationInput({
         onChange={(e) => setQuery(e.target.value)}
         onKeyUp={handleOnKeyUp}
         value={query}
-        disabled={disabled || isGeneratingResponse}
+        disabled={isGeneratingResponse}
         maxLength={AI_SEARCH_MAX_MESSAGE_LENGTH}
       />
 
@@ -115,10 +111,6 @@ const ConversationInput = styled.input`
     border-color: var(--search-ai-conversation-input-border-color-focus);
   }
 
-  &:disabled {
-    background-color: var(--search-ai-conversation-input-bg-color-disabled);
-  }
-
   &:focus:disabled {
     border-color: var(--search-ai-conversation-input-border-color-disabled);
   }
@@ -134,8 +126,6 @@ const SendButton = styled(Button)`
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--search-ai-conversation-input-send-button-border-radius);
-  padding: var(--search-ai-conversation-input-send-button-padding);
 
   &:hover {
     background-color: var(--search-ai-conversation-input-send-button-bg-color-hover);

package/src/components/Search/SearchDialog.tsx

@@ -48,7 +48,6 @@ export function SearchDialog({
   const products = useProducts();
   const currentProduct = useCurrentProduct();
   const [product, setProduct] = useState(currentProduct);
-  const searchSessionId = `search-${Date.now()}-${Math.random().toString(36).substring(2, 8)}`;
   const [mode, setMode] = useState<'search' | 'ai-dialog'>(initialMode);
   const autoSearchDisabled = mode !== 'search';
   const {
@@ -63,7 +62,7 @@ export function SearchDialog({
     advancedSearch,
     askAi,
     groupField,
-  } = useSearch(product?.name, autoSearchDisabled, searchSessionId);
+  } = useSearch(product?.name, autoSearchDisabled);
   const {
     isFilterOpen,
     onFilterToggle,
@@ -73,7 +72,7 @@ export function SearchDialog({
     onQuickFilterReset,
   } = useSearchFilter(filter, setFilter);
   const { addSearchHistoryItem } = useRecentSearches();
-  const aiSearch = useAiSearch({ filter }, searchSessionId);
+  const aiSearch = useAiSearch({ filter });
 
   const searchInputRef = useRef<HTMLInputElement>(null);
   const modalRef = useRef<HTMLDivElement>(null);
@@ -151,14 +150,13 @@ export function SearchDialog({
               totalResults: results.length.toString(),
               index: index.toString(),
               searchEngine: mode,
-              searchSessionId,
             });
             onClose();
           }}
         />
       );
     },
-    [onClose, product, products, addSearchHistoryItem, query, telemetry, mode, searchSessionId],
+    [onClose, product, products, addSearchHistoryItem, query, telemetry, mode],
   );
 
   const showLoadMore = useCallback(
@@ -228,9 +226,6 @@ export function SearchDialog({
                         if (query.trim()) {
                           aiSearch.askQuestion(query);
                         }
-                        telemetry.sendSearchAiOpenedMessage({
-                          method: 'ai_search_button',
-                        });
                       }}
                     >
                       {translate('search.ai.button', 'Search with AI')}
@@ -301,9 +296,6 @@ export function SearchDialog({
                       if (query.trim()) {
                         aiSearch.askQuestion(query);
                       }
-                      telemetry.sendSearchAiOpenedMessage({
-                        method: 'ai_search_input',
-                      });
                     }}
                     onKeyDown={(e) => {
                       if (e.key === 'Enter') {
@@ -311,9 +303,6 @@ export function SearchDialog({
                         if (query.trim()) {
                           aiSearch.askQuestion(query);
                         }
-                        telemetry.sendSearchAiOpenedMessage({
-                          method: 'ai_search_input',
-                        });
                       }
                     }}
                     ref={aiQueryRef}
@@ -400,7 +389,6 @@ export function SearchDialog({
                         telemetry.sendSearchRecentClickedMessage({
                           query,
                           index: index.toString(),
-                          searchSessionId,
                         });
                         setQuery(query);
                         focusSearchInput();

package/src/components/Search/SearchGroups.tsx

@@ -45,7 +45,6 @@ export function SearchGroups({
         borderless
         active={!searchFilter.some((item) => item.isQuickFilter)}
         onClick={() => searchFilter.some((item) => item.isQuickFilter) && onQuickFilterReset()}
-        selectable
       >
         All
       </GroupTag>
@@ -62,7 +61,6 @@ export function SearchGroups({
               onClick={() => handleGroupTagClick(value, facet.field, active, currentValues)}
               active={active}
               borderless
-              selectable
             >
               {value} {isCounterVisible && <span>{count}</span>}
             </GroupTag>

package/src/components/Search/variables.ts

@@ -171,7 +171,6 @@ export const search = css`
   --search-ai-assistant-bg-color: var(--layer-color);
   --search-ai-assistant-text-color: var(--text-color-primary);
   --search-ai-assistant-border: 1px solid var(--border-color-primary);
-  --search-ai-assistant-message-max-width: 80%;
 
   --search-ai-resources-gap: var(--spacing-base);
   --search-ai-resources-title-font-weight: var(--font-weight-medium);
@@ -233,7 +232,6 @@ export const search = css`
   * @tokens AI Search Conversation Input
   */
   --search-ai-conversation-input-bg-color: var(--bg-color);
-  --search-ai-conversation-input-bg-color-disabled: var(--color-warm-grey-1);
   --search-ai-conversation-input-padding: var(--spacing-sm) var(--spacing-md);
   --search-ai-conversation-input-border: 1px solid var(--border-color-secondary);
   --search-ai-conversation-input-border-radius: var(--border-radius-lg);
@@ -243,12 +241,10 @@ export const search = css`
   --search-ai-conversation-input-border-color-disabled: var(--border-color-secondary);
 
   --search-ai-conversation-input-send-button-right: 12px;
-  --search-ai-conversation-input-send-button-padding: 5px;
   --search-ai-conversation-input-send-button-bg-color: var(--button-bg-color-primary);
   --search-ai-conversation-input-send-button-bg-color-hover: var(--button-bg-color-primary-hover);
   --search-ai-conversation-input-send-button-bg-color-disabled: var(--button-bg-color-disabled);
   --search-ai-conversation-input-send-button-border-disabled: 1px solid var(--button-border-color-disabled);
-  --search-ai-conversation-input-send-button-border-radius: var(--border-radius);
 
   /**
   * @tokens AI Search Response
@@ -281,7 +277,7 @@ export const search = css`
 
   --search-ai-suggestions-gap: var(--spacing-sm);
   --search-ai-suggestions-margin-left: var(--spacing-xs);
-  --search-ai-suggestion-item-gap: var(--spacing-xxs);
+  --search-ai-suggestion-item-gap: var(--spacing-xs);
 
   --search-ai-suggestions-title-text-color: var(--text-color-description);
   --search-ai-suggestions-title-font-size: var(--font-size-base);

package/src/components/Select/SelectInput.tsx

@@ -83,7 +83,6 @@ export function SelectInput<T>(props: SelectInputProps<T>): React.ReactNode {
   const selectTags = selectedOptions.map((option, index) => (
     <SelectInputTag
       closable
-      tabIndex={0}
       key={index}
       onClose={() => {
         clearHandler?.(option);

package/src/components/Select/variables.ts

@@ -10,7 +10,7 @@ export const select = css`
   --select-text-color: var(--text-color-secondary); // @presenter Color
   --select-border-radius: var(--border-radius); // @presenter BorderRadius
   --select-border: var(--border-width) var(--border-style) var(--border-color-primary); // @presenter Border
-  
+
   --select-input-padding-vertical: 6px; // @presenter Spacing
   --select-input-padding-horizontal: 6px; // @presenter Spacing
   --select-input-padding: var(--select-input-padding-vertical) var(--select-input-padding-horizontal);
@@ -38,7 +38,7 @@ export const select = css`
   --select-list-item-border-radius: var(--border-radius); // @presenter BorderRadius
   --select-list-item-bg-color-active: transparent; // @presenter Color
   --select-list-item-bg-color-hover: var(--menu-item-bg-color-hover); // @presenter Color
-  --select-list-item-font-weight-active: var(--font-weight-medium); // @presenter Color  
+  --select-list-item-font-weight-active: var(--font-weight-medium); // @presenter Color
 
   --select-placeholder-color: var(--color-warm-grey-6); // @presenter Color
   // @tokens End

package/src/components/Tag/Tag.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 
 import type { JSX } from 'react';
 
@@ -56,7 +56,6 @@ export type TagProps = {
   maxLength?: number;
   textTransform?: 'uppercase' | 'lowercase' | 'capitalize' | 'none';
   variant?: 'outline' | 'filled';
-  selectable?: boolean;
 };
 
 export function Tag({
@@ -76,7 +75,6 @@ export function Tag({
   maxLength,
   textTransform,
   variant = 'filled',
-  selectable,
   ...otherProps
 }: TagProps): JSX.Element {
   const truncateText = (text: string, maxLen: number): string => {
@@ -154,7 +152,6 @@ export function Tag({
       hasCloseButton={closable}
       textTransform={textTransform}
       variant={variant}
-      selectable={selectable}
       {...otherProps}
     >
       {withStatusDot ? <StatusDot color={statusDotColor} /> : icon ? icon : null}
@@ -189,28 +186,16 @@ const CloseButton = styled.div`
   justify-content: center;
   align-self: stretch;
   border-radius: 0 var(--tag-border-radius) var(--tag-border-radius) 0;
-  margin: calc(-1 * var(--tag-border-width));
-  padding: var(--tag-border-width);
 
   &:hover {
     background: var(--tag-close-button-bg-color-hover);
   }
-
-  &:focus-visible {
-    background: var(--tag-close-button-bg-color-focus);
-  }
 `;
 
-const TagWrapper = styled.div.attrs(({ className, color, size, variant }: TagProps) => ({
-  className: [
-    className,
-    'tag-default',
-    color && `tag-${color}`,
-    size && `tag-size-${size}`,
-    `tag-variant-${variant || 'filled'}`,
-  ]
-    .filter(Boolean)
-    .join(' '),
+const TagWrapper = styled.div.attrs(({ className, color, size }: TagProps) => ({
+  className:
+    (className || '') +
+    ` tag-default ${color ? `tag-${color}` : ''} ${size ? `tag-size-${size}` : ''}`,
 }))<
   TagProps & {
     hasCloseButton?: boolean;
@@ -242,7 +227,8 @@ const TagWrapper = styled.div.attrs(({ className, color, size, variant }: TagPro
     `text-transform: ${textTransform ? `${textTransform}` : 'var(--tag-text-transform)'};`}
 
   color: var(--tag-color);
-  background-color: var(--tag-bg-color);
+  background-color: ${({ variant }) =>
+    variant === 'filled' ? 'var(--tag-bg-color)' : 'transparent'};
   ${({ borderless }) =>
     borderless
       ? ''
@@ -253,21 +239,19 @@ const TagWrapper = styled.div.attrs(({ className, color, size, variant }: TagPro
     width: var(--tag-icon-width);
     height: var(--tag-icon-height);
   }
+  /* 
+  &:hover {
+    background-color: ${({ variant }) =>
+    variant === 'filled' ? 'var(--tag-bg-color-hover)' : 'transparent'};
+    border-color: ${({ variant }) =>
+    variant === 'outline' ? 'var(--tag-border-color-hover)' : 'transparent'};
+  } */
 
-  ${({ selectable }) =>
-    selectable &&
-    css`
-      &:hover {
-        background-color: var(--tag-bg-color-hover);
-        border-color: var(--tag-border-color-hover);
-      }
-
-      &:focus-visible {
-        outline: 1px solid var(--tag-border-color-focused);
-        outline-offset: 2px;
-        border-radius: var(--tag-border-radius-focused);
-      }
-    `};
+  &:focus-visible {
+    outline: 1px solid var(--tag-border-color-focused);
+    outline-offset: 2px;
+    border-radius: var(--tag-border-radius-focused);
+  }
 `;
 
 const StatusDot = styled.div<{ color: string }>`