@redocly/theme 0.42.2 → 0.43.0

package/src/components/Search/SearchItem.tsx

@@ -1,17 +1,18 @@
 import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 
-import type { SearchDocument } from '@redocly/theme/core/types';
+import type { SearchItemData } from '@redocly/theme/core/types';
 
 import { HttpTag } from '@redocly/theme/components/Tags/HttpTag';
 import { Link } from '@redocly/theme/components/Link/Link';
 import { Image } from '@redocly/theme/components/Image/Image';
-import { highlight } from '@redocly/theme/components/Search/SearchHighlight';
+import { searchHighlight } from '@redocly/theme/components/Search/SearchHighlight';
 import { Badge } from '@redocly/theme/components/Badge/Badge';
+import { trimText } from '@redocly/theme/core/utils';
 
 type ActiveItem<T> = T & { active?: boolean };
 export type SearchItemProps = {
-  item: ActiveItem<SearchDocument>;
+  item: ActiveItem<SearchItemData>;
   product?: {
     name: string;
     icon?: string;
@@ -28,12 +29,16 @@ export function SearchItem({ item, className, product }: SearchItemProps): JSX.E
     }
   }, [item.active]);
 
-  const itemParam = item.parameters?.[0];
+  const { document, highlight } = item;
+
+  const parameter =
+    highlight.parameters && highlight.parameters.length ? highlight.parameters[0] : null;
+  const shouldShowPath = document.path && document.path?.length > 1;
 
   return (
     <SearchItemWrapper
       className={className}
-      to={item.url}
+      to={document.url}
       tabIndex={0}
       innerRef={ref}
       data-component-name="Search/SearchItem"
@@ -45,41 +50,49 @@ export function SearchItem({ item, className, product }: SearchItemProps): JSX.E
             {product.name}
           </SearchItemProductTag>
         )}
-        {item.httpVerb ? (
+        {document.httpMethod ? (
           <SearchItemOperation>
-            <SearchItemOperationTag color={item.httpVerb}>
-              {item.httpVerb.toUpperCase()}
+            <SearchItemOperationTag color={document.httpMethod}>
+              {document.httpMethod.toUpperCase()}
             </SearchItemOperationTag>
-            {item.pathName ? highlight(item.pathName) : null}
+            {highlight.httpPath ? searchHighlight(highlight.httpPath) : document.httpPath}
           </SearchItemOperation>
         ) : null}
         <SearchItemTitleWrapper>
-          <SearchItemTitle>{highlight(item.title)}</SearchItemTitle>
-          {item.deprecated ? <SearchItemBadge deprecated>Deprecated</SearchItemBadge> : null}
-          {item.badges
-            ? item.badges.map(({ name, color }) => (
+          <SearchItemTitle>
+            {highlight.title ? searchHighlight(highlight.title) : document.title}
+          </SearchItemTitle>
+          {document.deprecated ? <SearchItemBadge deprecated>Deprecated</SearchItemBadge> : null}
+          {document.badges
+            ? document.badges.map(({ name, color }) => (
                 <SearchItemBadge color={color || 'var(--color-info-base)'} key={name}>
                   {name}
                 </SearchItemBadge>
               ))
             : null}
         </SearchItemTitleWrapper>
-        {Array.isArray(item.text) ? (
-          <SearchItemDescription>{highlight(item.text)}</SearchItemDescription>
-        ) : null}
+        <SearchItemDescription>
+          {highlight.text ? searchHighlight(highlight.text) : trimText(document.text)}
+        </SearchItemDescription>
       </SearchItemHeader>
-      {itemParam ? (
+      {parameter ? (
         <SearchItemPlace>
           <div>
-            {`${itemParam.place} → ${
-              itemParam.path?.length ? itemParam.path?.join(' → ') + ' → ' : ''
-            }`}
-            {highlight(itemParam.name)}
+            {searchHighlight(parameter.place)}
+            {` → `}
+            {parameter.path?.length ? searchHighlight(parameter.path?.join(' → ')) + ' → ' : ''}
+            {searchHighlight(parameter.name)}
           </div>
-          <div>{highlight(itemParam.description)}</div>
+          <div>{searchHighlight(parameter.description)}</div>
         </SearchItemPlace>
       ) : (
-        <SearchItemPath>{item.path?.join(' → ')}</SearchItemPath>
+        shouldShowPath && (
+          <SearchItemPath>
+            {highlight.path && highlight.path.length
+              ? searchHighlight(highlight.path.join(' → '))
+              : document.path?.join(' → ')}
+          </SearchItemPath>
+        )
       )}
     </SearchItemWrapper>
   );
@@ -92,7 +105,7 @@ const SearchItemWrapper = styled(Link)`
   background-color: var(--search-item-bg-color);
   transition: background-color 0.3s ease;
   text-decoration: none;
-  white-space: nowrap;
+  white-space: normal;
   outline: none;
   border-top: 1px solid var(--search-item-border-color);
   border-bottom: 1px solid var(--search-item-border-color);
@@ -160,6 +173,7 @@ const SearchItemPath = styled.div`
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
   font-weight: var(--font-weight-regular);
+  margin-top: var(--spacing-sm);
 `;
 
 const SearchItemPlace = styled.div`
@@ -170,6 +184,7 @@ const SearchItemPlace = styled.div`
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
   font-weight: var(--font-weight-regular);
+  margin-top: var(--spacing-sm);
 
   &:first-child {
     padding-top: 0;

package/src/components/Search/variables.ts

@@ -4,11 +4,18 @@ export const search = css`
   /**
     * @tokens Search
     */
-  --search-modal-width: 700px;
-  --search-modal-min-height: 530px;
+  --search-modal-width: 1100px;
+  --search-modal-min-height: 705px;
   --search-modal-bg-color: var(--modal-bg-color);
   --search-modal-box-shadow: var(--modal-box-shadow);
   --search-modal-border-radius: var(--border-radius-lg);
+  --search-modal-border: 1px solid var(--border-color-secondary);
+
+  --search-modal-header-bg-color: var(--bg-color-tonal); // @presenter Color
+  --search-modal-header-padding: var(--spacing-sm);
+
+  --search-modal-footer-padding: var(--spacing-sm);
+  --search-modal-footer-gap: var(--spacing-md);
 
   --search-highlight-bg-color: none; // @presenter Color
   --search-highlight-text-color: var(--color-info-base); // @presenter Color
@@ -27,6 +34,11 @@ export const search = css`
   --search-input-border: none;
   --search-input-border-radius: var(--border-radius); // @presenter BorderRadius
 
+  --search-group-title-padding: var(--spacing-sm);
+  --search-group-title-bg-color: var(--bg-color-tonal); // @presenter Color
+  --search-group-footer-padding: var(--spacing-sm);
+  --search-group-footer-text-color: var(--link-color-primary); // @presenter Color
+
   --search-item-text-color: var(--text-color-secondary); // @presenter Color
   --search-item-text-color-hover: var(--text-color-primary); // @presenter Color
   --search-item-title-font-size: var(--font-size-base); // @presenter FontSize
@@ -74,6 +86,40 @@ export const search = css`
   --search-suggested-item-bg-color-active: var(--layer-color); // @presenter Color
   --search-suggested-item-border-color-focused: var(--color-blue-4); // @presenter Color
 
+  --search-shortcuts-gap: var(--spacing-xs);
+
+  --search-message-font-size: var(--font-size-lg); // @presenter FontSize
+  --search-message-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --search-message-line-height: var(--line-height-lg); // @presenter LineHeight
+  --search-message-text-color: var(--text-color-secondary); // @presenter Color
+  --search-message-gap: var(--spacing-md);
+
+    /**
+  * @tokens Search filter
+  */
+  --search-filter-width: 450px;
+  --search-filter-bg-color: var(--search-modal-bg-color);
+  --search-filter-padding: var(--spacing-lg);
+  --search-filter-font-size: var(--font-size-base);
+  --search-filter-font-weight: var(--font-weight-regular);
+  --search-filter-line-height: var(--line-height-base);
+
+  --search-filter-header-padding: var(--spacing-md) 0;
+  --search-filter-header-text-color: var(--text-color-helper);
+  --search-filter-header-z-index: var(--z-index-raised);
+
+  --search-filter-fields-gap: var(--spacing-base);
+
+  --search-filter-field-select-option-gap: var(--spacing-unit);
+  --search-filter-field-select-option-text-padding: 0 0 0 var(--spacing-unit);
+  --search-filter-field-select-footer-padding: 0 0 0 var(--spacing-unit);
+  --search-filter-field-select-footer-text-color: var(--text-color-helper);
+
+  --search-filter-field-tags-gap: var(--spacing-unit);
+  --search-filter-field-tags-tag-margin: var(--spacing-unit) 0 0 0;
+
+  // @tokens End
+
   /**
   * @tokens Navbar Search Trigger
   */

package/src/components/Segmented/Segmented.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 
 import type { ReactElement } from 'react';
-import type { SelectOption } from '@redocly/theme/core/types/select-option';
+import type { SelectOption } from '@redocly/theme/core/types/select';
 
 import { typedMemo } from '@redocly/theme/core/hoc/typedMemo';
 
 export type SegmentedProps<T> = {
   options: SelectOption<T>[];
   value: T;
-  onChange: ({ label, value }: { label: string; value: T }) => void;
+  onChange: ({ label, value }: SelectOption<T>) => void;
   className?: string;
   size?: 'regular' | 'small';
 };

package/src/components/Select/Select.tsx

@@ -1,34 +1,14 @@
-import React, { useRef, useState } from 'react';
+import React, { Fragment, useEffect, useId, useRef, useState } from 'react';
 import styled from 'styled-components';
 
-import { useOutsideClick } from '@redocly/theme/core/hooks';
-import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
-import { ChevronUpIcon } from '@redocly/theme/icons/ChevronUpIcon/ChevronUpIcon';
-import { CheckmarkIcon } from '@redocly/theme/icons/CheckmarkIcon/CheckmarkIcon';
+import type { SelectOption, SelectProps } from '@redocly/theme/core/types/select';
 
-export type SelectProps<T = any> = {
-  value: T;
-  options: {
-    element: React.ReactNode | JSX.Element | string;
-    value: T;
-    label?: string;
-  }[];
-  dataAttributes?: Record<string, string>;
-  className?: string;
-  withArrow?: boolean;
-  triggerEvent?: 'click' | 'hover';
-  onChange?: (value: any) => void;
-  placement?: 'top' | 'bottom';
-  alignment?: 'start' | 'end';
-  icon?: React.ReactNode;
-  onlyIcon?: boolean;
-  placeholder?: string;
-  disabled?: boolean;
-  hideCheckmarkIcon?: boolean;
-  dataTestId?: string;
-  renderInput?: (props: { isOpen: boolean }) => React.ReactElement;
-  renderDivider?: () => React.ReactElement;
-};
+import { CheckmarkIcon } from '@redocly/theme/icons/CheckmarkIcon/CheckmarkIcon';
+import { SelectInput } from '@redocly/theme/components/Select/SelectInput';
+import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
+import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
+import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
+import { useOutsideClick } from '@redocly/theme/core/hooks';
 
 export function Select<T>(props: SelectProps<T>): JSX.Element {
   const {
@@ -38,7 +18,6 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
     dataAttributes,
     withArrow = true,
     triggerEvent = 'click',
-    onChange,
     placement,
     alignment,
     icon,
@@ -46,102 +25,229 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
     disabled,
     placeholder,
     hideCheckmarkIcon,
+    checkmarkIconPosition,
+    dataTestId = 'select',
+    multiple,
+    searchable,
+    clearable,
+    footer,
+    onChange,
+    onSearch,
     renderInput,
     renderDivider,
-    dataTestId = 'select',
   } = props;
 
-  const containerRef = useRef<HTMLDivElement | null>(null);
+  const getSelectedOptionsFromPropsValue = () => {
+    const values = Array.isArray(value) ? value : [value];
+    return values
+      .map((value) => {
+        const selectedOption = options.find((option) => option.value === value);
+        return selectedOption || typeof value === 'string'
+          ? ({ value } as SelectOption<T>)
+          : (value as SelectOption<T>);
+      })
+      .filter((option) => !!option);
+  };
 
-  const [isOpen, setIsOpen] = useState<boolean>(false);
-  // const [selectedIdx, setSelectedIdx] = useState<React.ReactNode | string>(selected);
+  const [selectedOptions, setSelectedOptions] = useState<SelectOption<T>[]>(
+    getSelectedOptionsFromPropsValue(),
+  );
+  const selectRef = useRef<HTMLDivElement | null>(null);
+  const [searchValue, setSearchValue] = useState<string | null>(null);
+  const [dropdownActive, setDropdownActive] = useState<boolean | undefined>(false);
+  const [filteredOptions, setFilteredOptions] = useState<SelectOption<T>[]>(options);
+  const [stickyInputValue, setStickyInputValue] = useState<string>(placeholder || '');
+  const inputId = useId();
 
-  const handleOpen = () => {
-    setIsOpen(true);
+  useOutsideClick(selectRef, () => {
+    setDropdownActive(false);
+  });
+
+  useEffect(() => {
+    setFilteredOptions(options);
+  }, [options]);
+
+  useEffect(() => {
+    setSelectedOptions(getSelectedOptionsFromPropsValue());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [multiple, value]);
+
+  useEffect(() => {
+    if (onSearch) {
+      onSearch?.(searchValue as T);
+    } else {
+      if (typeof searchValue === 'string') {
+        const filteredOptions = options.filter((option) => {
+          const valueForSearch = String(option.label ?? option.value ?? '');
+          return (
+            !valueForSearch || valueForSearch.toLowerCase().indexOf(searchValue.toLowerCase()) > -1
+          );
+        });
+        setFilteredOptions(filteredOptions);
+      } else {
+        setFilteredOptions(options);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchValue]);
+
+  const selectHandler = (selectedOption: SelectOption<T>) => {
+    const newSelectedOptions = multiple
+      ? isSelected(selectedOption)
+        ? selectedOptions.filter((option) => option.value !== selectedOption.value)
+        : [...selectedOptions, selectedOption]
+      : [selectedOption];
+
+    const newSelectedValues = newSelectedOptions.length
+      ? multiple
+        ? newSelectedOptions.map((o) => o.value)
+        : newSelectedOptions[0].value
+      : multiple
+      ? []
+      : ('' as T);
+
+    setSelectedOptions(newSelectedOptions);
+    onChange?.(newSelectedValues);
+    setSearchValue(null);
+    setDropdownActive(false);
+    if (!multiple) {
+      setStickyInputValue('');
+    }
   };
 
-  const handleClose = () => {
-    setIsOpen(false);
+  const searchHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const targetValue = e.target.value;
+    setSearchValue(targetValue);
+    setDropdownActive(true);
   };
 
-  const handleToggle = () => {
-    setIsOpen(!isOpen);
+  const clearHandler = (option?: SelectOption<T>) => {
+    if (option) {
+      selectHandler(option);
+    } else {
+      if (!multiple) {
+        setStickyInputValue('');
+      }
+      setSelectedOptions([]);
+      onChange?.(multiple ? [] : ('' as T));
+    }
   };
 
-  const handleSelect = (value: T) => {
-    // setSelectedIdx(options.findIndex(o => o.value === value));
-    setIsOpen(false);
-    onChange?.(value);
+  const inputBlurHandler = (e: React.FocusEvent) => {
+    const relatedTarget = e.relatedTarget as HTMLElement;
+    const isDropdownItem =
+      relatedTarget?.attributes.getNamedItem('data-component-name')?.value ===
+      'Dropdown/DropdownMenuItem';
+    if (!isDropdownItem) {
+      if (!e.relatedTarget || e.relatedTarget?.id !== inputId) {
+        setDropdownActive(false);
+      }
+      setSearchValue(null);
+      setStickyInputValue('');
+    }
   };
 
-  useOutsideClick(containerRef, handleClose);
-
-  // useEffect(() => {
-  //   handleSelect(selected);
-  //   // eslint-disable-next-line react-hooks/exhaustive-deps
-  // }, [selected]);
-
-  const selectedOption = options.find((option) => option.value === value);
-
-  const renderDefaultInput = () => (
-    <SelectInput>
-      {!onlyIcon && (
-        <SelectInputValue>
-          {selectedOption?.label || selectedOption?.element || placeholder}
-        </SelectInputValue>
-      )}
-      {icon}
-      {withArrow ? isOpen ? <ChevronUpIcon size="14px" /> : <ChevronDownIcon size="14px" /> : null}
-    </SelectInput>
-  );
+  const inputFocusHandler = () => {
+    if (!multiple && selectedOptions.length) {
+      setStickyInputValue(selectedOptions[0].label || (selectedOptions[0].value as string));
+    }
+  };
+
+  const inputClickHandler = () => {
+    setDropdownActive(!dropdownActive);
+  };
+
+  const isSelected = (option: SelectOption<T>) => {
+    return !!selectedOptions.find(
+      (selectOption) => selectOption.value === option.value || selectOption.value === option.label,
+    );
+  };
+
+  const renderDefaultInput = () => {
+    return (
+      <SelectInput
+        id={inputId}
+        selectedOptions={selectedOptions}
+        searchValue={searchValue}
+        placeholder={placeholder}
+        stickyValue={stickyInputValue}
+        multiple={multiple}
+        searchable={searchable}
+        clearable={clearable}
+        customIcon={icon}
+        onlyIcon={onlyIcon}
+        clearHandler={clearHandler}
+        searchHandler={searchHandler}
+        inputBlurHandler={inputBlurHandler}
+        inputFocusHandler={inputFocusHandler}
+        clickHandler={inputClickHandler}
+      />
+    );
+  };
 
   return (
-    <SelectContainer
+    <SelectWrapper
       data-component-name="Select/Select"
+      ref={selectRef}
       {...dataAttributes}
       disabled={disabled}
       data-testid={dataTestId}
       className={className}
-      ref={containerRef}
-      onPointerEnter={triggerEvent === 'hover' ? handleOpen : undefined}
-      onPointerLeave={triggerEvent === 'hover' ? handleClose : undefined}
-      onClick={triggerEvent === 'click' ? handleToggle : undefined}
     >
-      {renderInput ? renderInput({ isOpen }) : renderDefaultInput()}
-      {isOpen && (
-        <SelectList placement={placement} alignment={alignment}>
-          {options.map((option, index) => {
-            const selected = option.value === value;
-            return (
-              <>
-                <SelectListItem
-                  key={index}
-                  onClick={() => handleSelect(option.value)}
-                  selected={selected}
-                >
-                  {typeof option.element === 'string' ? (
-                    <div>{option.element}</div>
-                  ) : (
-                    option.element
-                  )}
-                  {!hideCheckmarkIcon && selected && <CheckmarkIcon />}
-                </SelectListItem>
-                {renderDivider && index !== options.length - 1 ? renderDivider() : null}
-              </>
-            );
-          })}
-        </SelectList>
-      )}
-    </SelectContainer>
+      <SelectDropdown
+        closeOnClick={!multiple}
+        withArrow={withArrow}
+        trigger={renderInput ? renderInput() : renderDefaultInput()}
+        triggerEvent={triggerEvent}
+        placement={placement}
+        alignment={alignment}
+        active={!renderInput ? dropdownActive : undefined}
+      >
+        <SelectDropdownMenu footer={footer}>
+          {filteredOptions.length === 0 ? (
+            <DropdownMenuItem disabled>No results</DropdownMenuItem>
+          ) : (
+            filteredOptions.map((option, index) => {
+              return (
+                <Fragment key={index}>
+                  <DropdownMenuItem
+                    onAction={() => selectHandler(option)}
+                    prefix={
+                      !hideCheckmarkIcon &&
+                      (checkmarkIconPosition ? checkmarkIconPosition === 'start' : false) &&
+                      isSelected(option) && <CheckmarkIcon />
+                    }
+                    suffix={
+                      !hideCheckmarkIcon &&
+                      (checkmarkIconPosition ? checkmarkIconPosition === 'end' : true) &&
+                      isSelected(option) && <CheckmarkIcon />
+                    }
+                  >
+                    {typeof option.element === 'string' ? (
+                      <div>{option.element}</div>
+                    ) : (
+                      option.element
+                    )}
+                  </DropdownMenuItem>
+                  {renderDivider && index !== options.length - 1 ? renderDivider() : null}
+                </Fragment>
+              );
+            }) || 'No results'
+          )}
+        </SelectDropdownMenu>
+      </SelectDropdown>
+    </SelectWrapper>
   );
 }
 
-export const SelectContainer = styled.div<{ disabled?: boolean }>`
+export const SelectWrapper = styled.div<{ disabled?: boolean }>`
+  display: flex;
   position: relative;
   font-size: var(--select-font-size);
   font-weight: var(--select-font-weight);
   line-height: var(--select-line-height);
   border-radius: var(--select-border-radius);
+  border: var(--select-border);
   color: var(--select-text-color);
   min-width: 0;
 
@@ -151,71 +257,16 @@ export const SelectContainer = styled.div<{ disabled?: boolean }>`
     opacity: 0.59;
     pointer-events: none;
   `}
-  a {
-    display: block;
-    text-decoration: none;
-    color: var(--select-text-color);
-  }
-`;
-
-export const SelectInput = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-radius: var(--select-input-border-radius);
-  padding: var(--select-input-padding);
-  cursor: pointer;
-  gap: 8px;
 `;
 
-export const SelectInputValue = styled.div`
-  pointer-events: none;
-  min-width: 0;
-  text-overflow: ellipsis;
-  overflow: hidden;
-`;
-
-export const SelectList = styled.ul<{ placement?: string; alignment?: string }>`
-  position: absolute;
-  top: ${({ placement }) => (placement === 'top' ? 'auto' : '100%')};
-  bottom: ${({ placement }) => (placement === 'top' ? '100%' : 'auto')};
-  left: ${({ alignment }) => (alignment === 'start' ? '0' : 'auto')};
-  right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
-  margin: 0;
-  min-width: var(--select-list-min-width);
-  max-width: var(--select-list-max-width);
-  padding: var(--select-list-padding);
-  background-color: var(--select-list-bg-color);
-  border-radius: var(--select-list-border-radius);
-  box-shadow: var(--select-list-box-shadow);
-  list-style-type: none;
-  cursor: pointer;
-  white-space: nowrap;
-  overflow: hidden;
-  z-index: 1;
-`;
+const SelectDropdown = styled(Dropdown)`
+  width: 100%;
 
-export const SelectListItem = styled.li<{ selected: boolean }>`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-radius: var(--select-list-item-border-radius);
-  gap: var(--select-list-item-gap);
-  padding: var(--select-list-item-padding);
-  ${({ selected }) =>
-    selected &&
-    `
-      font-weight: var(--select-list-item-font-weight-active);
-      background-color: var(--select-list-item-bg-color-active);
-      &:hover { background-color: var(--select-list-item-bg-color-active)};
-    `}
-
-  & > * {
-    overflow: hidden;
-    text-overflow: ellipsis;
+  > * {
+    width: 100%;
   }
+`;
 
-  &:hover {
-    background-color: var(--select-list-item-bg-color-hover);
-  }
+const SelectDropdownMenu = styled(DropdownMenu)`
+  width: 100%;
 `;