@redocly/theme 0.59.0-next.0 → 0.59.0-next.10

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

@@ -0,0 +1,147 @@
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+import type { FilterProps } from '@redocly/theme/core/types';
+
+import { FilterOptions } from '@redocly/theme/components/Filter/FilterOptions';
+import { DatePicker } from '@redocly/theme/components/DatePicker/DatePicker';
+import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { formatDateWithoutTimeZone } from '@redocly/theme/core/utils';
+import { Accordion } from '@redocly/theme/components/Accordion/Accordion';
+
+export type CatalogFilterDateRangeProps = FilterProps & {
+  className?: string;
+};
+
+export function CatalogFilterDateRange({
+  filter,
+  className,
+}: CatalogFilterDateRangeProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
+  const from = useMemo(
+    () => (filter.selectedOptions.from ? new Date(filter.selectedOptions.from) : undefined),
+    [filter.selectedOptions.from],
+  );
+  const to = useMemo(
+    () => (filter.selectedOptions.to ? new Date(filter.selectedOptions.to) : undefined),
+    [filter.selectedOptions.to],
+  );
+
+  const selectedCount = useMemo(() => {
+    return from && to ? 1 : 0;
+  }, [from, to]);
+
+  const headerContent = (
+    <AccordionHeaderContent>
+      <span>{translate(filter.titleTranslationKey, filter.title)}</span>
+      {selectedCount > 0 && <CounterTag borderless>{selectedCount}</CounterTag>}
+    </AccordionHeaderContent>
+  );
+
+  return (
+    <AccordionWrapper
+      className={className}
+      $hasSelection={selectedCount > 0}
+      data-component-name="Catalog/CatalogFilterDateRange"
+    >
+      <Accordion expanded={false} header={headerContent}>
+        <FilterOptions>
+          <DateRangeWrapper>
+            <DateRangeRow>
+              <span>From:</span>
+              <DatePicker
+                closeCalendar={true}
+                format="y-MM-dd"
+                dayPlaceholder="DD"
+                monthPlaceholder="MM"
+                yearPlaceholder="YYYY"
+                value={from}
+                maxDate={new Date()}
+                onChange={(from) => {
+                  if (Array.isArray(from)) return;
+                  filter.selectOption({
+                    ...filter.selectedOptions,
+                    from: formatDateWithoutTimeZone(from),
+                    to: formatDateWithoutTimeZone(to),
+                  });
+                }}
+              />
+            </DateRangeRow>
+            <DateRangeRow>
+              <span>To:</span>
+              <DatePicker
+                closeCalendar={true}
+                dayPlaceholder="DD"
+                monthPlaceholder="MM"
+                yearPlaceholder="YYYY"
+                format="y-MM-dd"
+                minDate={from}
+                value={to}
+                onChange={(to) => {
+                  if (Array.isArray(to)) return;
+                  filter.selectOption({
+                    ...filter.selectedOptions,
+                    from: formatDateWithoutTimeZone(from),
+                    to: formatDateWithoutTimeZone(to),
+                  });
+                }}
+              />
+            </DateRangeRow>
+          </DateRangeWrapper>
+        </FilterOptions>
+      </Accordion>
+    </AccordionWrapper>
+  );
+}
+
+const AccordionWrapper = styled.div<{ $hasSelection: boolean }>`
+  position: relative;
+  border-right: 4px solid transparent;
+
+  ${({ $hasSelection }) =>
+    $hasSelection &&
+    `border-right-color: var(--color-blueberry-6);
+    
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -1px;
+      right: -4px;
+      width: 4px;
+      height: 1px;
+      background-color: var(--color-blueberry-6);
+      z-index: 1;
+    }
+  `}
+`;
+
+const AccordionHeaderContent = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  width: 100%;
+`;
+
+const DateRangeWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--filter-options-gap);
+`;
+
+const DateRangeRow = styled.div`
+  color: var(--filter-date-picker-color);
+  display: flex;
+  flex-direction: row;
+
+  align-items: center;
+  gap: var(--filter-date-picker-gap);
+
+  > span {
+    width: var(--filter-date-picker-width);
+    color: var(--filter-option-label-color);
+  }
+`;

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

@@ -0,0 +1,136 @@
+import React, { useMemo, useState } from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+import type { FilterProps, SelectProps, SelectOption } from '@redocly/theme/core/types';
+
+import { FilterOption } from '@redocly/theme/components/Filter/FilterOption';
+import { FilterOptionLabel } from '@redocly/theme/components/Filter/FilterOptionLabel';
+import { Select } from '@redocly/theme/components/Select/Select';
+import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
+import { changeTextCasing } from '@redocly/theme/core/utils';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { Accordion } from '@redocly/theme/components/Accordion/Accordion';
+
+export type CatalogFilterSelectProps = FilterProps & {
+  className?: string;
+};
+
+export function CatalogFilterSelect({
+  filter,
+  filterValuesCasing,
+  showCounter = true,
+  className,
+}: CatalogFilterSelectProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const selectedCount = useMemo(() => {
+    if (filter.selectedOptions instanceof Set) {
+      const firstValue = filter.selectedOptions.values().next()?.value;
+
+      return firstValue && firstValue !== '' ? 1 : 0;
+    }
+    return 0;
+  }, [filter.selectedOptions]);
+
+  let selectOptions: SelectOption<string>[] = [];
+
+  const defaultOptionCount = filter.options.reduce((acc, option) => acc + option.count, 0);
+
+  selectOptions = [
+    {
+      value: '',
+      element: (
+        <FilterOption key="all" onClick={() => filter.selectOption('')}>
+          <FilterOptionLabel data-translation-key="catalog.filters.select.all">
+            {translate('catalog.filters.select.all', 'All')}
+          </FilterOptionLabel>
+          <CounterTag borderless>{defaultOptionCount}</CounterTag>
+        </FilterOption>
+      ),
+    },
+    ...filter.options.map((option) => ({
+      value: option.value,
+      element: (
+        <FilterOption key={option.value}>
+          <FilterOptionLabel data-translation-key={option.value}>
+            {changeTextCasing(translate(option.value), filterValuesCasing)}
+          </FilterOptionLabel>
+          {showCounter && <CounterTag borderless>{option.count}</CounterTag>}
+        </FilterOption>
+      ),
+    })),
+  ];
+
+  const headerContent = (
+    <AccordionHeaderContent>
+      <span>{translate(filter.titleTranslationKey, filter.title)}</span>
+      {selectedCount > 0 && <CounterTag borderless>{selectedCount}</CounterTag>}
+    </AccordionHeaderContent>
+  );
+
+  return (
+    <AccordionWrapper
+      className={className}
+      $hasSelection={selectedCount > 0 && !isExpanded}
+      data-component-name="Catalog/CatalogFilterSelect"
+    >
+      <Accordion expanded={isExpanded} header={headerContent} onToggle={setIsExpanded}>
+        <StyledSelect
+          value={
+            (filter.selectedOptions instanceof Set ? filter.selectedOptions : new Set())
+              .values()
+              .next()?.value || ''
+          }
+          onChange={(value) => filter.selectOption(value)}
+          options={selectOptions}
+        />
+      </Accordion>
+    </AccordionWrapper>
+  );
+}
+
+const AccordionWrapper = styled.div<{ $hasSelection: boolean }>`
+  position: relative;
+  border-right: 4px solid transparent;
+
+  ${({ $hasSelection }) =>
+    $hasSelection &&
+    `border-right-color: var(--color-blueberry-6);
+    
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -1px;
+      right: -4px;
+      width: 4px;
+      height: 1px;
+      background-color: var(--color-blueberry-6);
+      z-index: 1;
+    }
+  `}
+`;
+
+const AccordionHeaderContent = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  width: 100%;
+`;
+
+const StyledSelect = styled(Select)<SelectProps>`
+  --select-list-max-width: var(--filter-select-max-width);
+
+  min-height: var(--filter-select-min-height);
+  --select-text-color: var(--filter-select-color);
+  border: 1px solid var(--filter-select-border-color);
+  --select-border-radius: var(--filter-select-border-radius);
+  padding: var(--filter-select-padding);
+
+  :hover {
+    border-color: var(--filter-select-border-color-hover);
+  }
+  --filter-option-margin: var(--filter-select-option-margin);
+`;

package/src/components/Catalog/CatalogSelector.tsx

@@ -52,7 +52,6 @@ export function CatalogSelector({
 
 export const CatalogSelectWrapper = styled.div`
   margin-top: var(--catalog-select-wrapper-margin-top);
-  margin-bottom: var(--catalog-select-wrapper-margin-bottom);
 `;
 
 export const CatalogSelectLabel = styled.label`

package/src/components/Catalog/variables.ts

@@ -80,7 +80,6 @@ export const catalog = css`
     * @tokens Catalog selector
     */
   --catalog-select-wrapper-margin-top: var(--spacing-xxs);
-  --catalog-select-wrapper-margin-bottom: var(--spacing-base);
   --catalog-select-label-margin-bottom: var(--spacing-xxs);
   --catalog-select-label-font-weight: var(--filter-title-font-weight);
   --catalog-select-label-font-size: var(--filter-title-font-size);
@@ -98,7 +97,7 @@ export const catalog = css`
   /**
     * @tokens Catalog entity icon
     */
-  --catalog-entity-icon-color: var(--color-primary-base);
+  --catalog-entity-icon-color: var(--color-persian-green-8);
   --catalog-entity-border-color: var(--border-color-secondary);
   --catalog-entity-bg-color: var(--bg-color-tonal);
 

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/Filter/FilterInput.tsx

@@ -9,10 +9,11 @@ import { SearchIcon } from '@redocly/theme/icons/SearchIcon/SearchIcon';
 export type FilterInputProps = {
   value: string;
   onChange: (newValue: string) => void;
+  dataTestId?: string;
 };
 
 export function FilterInput(props: FilterInputProps): JSX.Element {
-  const { value: initialValue, onChange } = props;
+  const { value: initialValue, onChange, dataTestId } = props;
 
   const [value, setValue] = useState(initialValue);
 
@@ -30,7 +31,7 @@ export function FilterInput(props: FilterInputProps): JSX.Element {
   const { translate } = useTranslate();
 
   return (
-    <InputWrapper data-component-name="Filter/FilterInput">
+    <InputWrapper data-component-name="Filter/FilterInput" data-testid={dataTestId}>
       <InputIcon />
       <Input
         value={value}

package/src/components/Filter/FilterOptions.tsx

@@ -16,4 +16,6 @@ const FilterOptionsComponent = styled.div`
   display: flex;
   flex-direction: column;
   gap: var(--filter-options-gap);
+  max-height: var(--filter-options-max-height);
+  overflow-y: scroll;
 `;

package/src/components/Filter/variables.ts

@@ -15,6 +15,7 @@ export const filter = css`
   --filter-options-padding-vertical: 0;
   --filter-options-padding-horizontal: 0;
   --filter-options-gap: var(--spacing-sm);
+  --filter-options-max-height: 350px;
 
   --filter-option-font-size: var(--font-size-base);
   --filter-option-gap: var(--spacing-xs);
@@ -25,12 +26,14 @@ export const filter = css`
 
   --filter-option-checkbox-padding-left: var(--spacing-xs);
 
-  --filter-content-header-padding-vertical: 5px;
-  --filter-content-header-padding-horizontal: 0;
+  --filter-content-header-padding-vertical: var(--spacing-xs) var(--spacing-sm);
+  --filter-content-header-padding-horizontal: var(--spacing-base);
 
-  --filter-content-title-font-size: var(--font-size-base);
-  --filter-content-title-line-height: var(--line-height-base);
+  --filter-content-title-font-size: var(--font-size-lg);
+  --filter-content-title-line-height: var(--line-height-lg);
   --filter-content-title-font-weight: var(--font-weight-semibold);
+
+  --filter-content-search-padding: 0 var(--spacing-xs) var(--spacing-sm);
   
   --filter-content-padding-vertical: var(--spacing-sm);
   --filter-content-padding-horizontal: var(--spacing-base);

package/src/components/Menu/MenuItem.tsx

@@ -82,6 +82,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/Search/FilterFields/SearchFilterFieldTags.tsx

@@ -3,7 +3,7 @@ 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';
 
 type SearchFilterFieldTagsProps = {
   className?: string;
@@ -47,6 +47,7 @@ export function SearchFilterFieldTags({
             }}
             active={active}
             borderless
+            selectable
           >
             {value} {isCounterVisible && <span>{count}</span>}
           </FilterTagWrapper>
@@ -62,9 +63,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);
+  }
+`;