@redocly/theme 0.17.1 → 0.18.1

package/src/I18n/LanguagePicker.tsx

@@ -1,22 +1,13 @@
-import React, { useRef, useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import React from 'react';
 import styled from 'styled-components';
 
 import { getPathnameForLocale, withPathPrefix } from '@portal/utils';
 import { usePreloadHistory } from '@portal/usePreloadHistory';
 import { useI18nConfig } from '@portal/hooks';
-
-import { useOutsideClick } from '../hooks';
+import { Select, SelectInput, SelectList, SelectListItem } from '@theme/components/Select';
 
 export const LanguagePicker = (props: { onChangeLanguage: (newLang: string) => void }) => {
   const { currentLocale, locales, defaultLocale } = useI18nConfig();
-
-  const dropdownRef = useRef<HTMLDivElement | null>(null);
-
-  const [isOpen, setIsOpen] = useState(false);
-  useOutsideClick(dropdownRef, () => setIsOpen(false));
-
-  const location = useLocation();
   const history = usePreloadHistory();
 
   if (locales.length < 2) {
@@ -28,93 +19,75 @@ export const LanguagePicker = (props: { onChangeLanguage: (newLang: string) => v
     return null;
   }
 
-  return (
-    <Dropdown
-      data-component-name="I18n/LanguagePicker"
-      ref={dropdownRef}
-      isOpen={isOpen}
-      onClick={() => setIsOpen(!isOpen)}
-      onBlur={() => setIsOpen(false)}
+  const selected = locale.name || locale.code;
+  const languageItems = locales.map((locale) => (
+    <LanguageItem
+      onClick={() => {
+        const newLangPathname = withPathPrefix(
+          getPathnameForLocale(location.pathname, defaultLocale, locale.code, locales),
+        );
+        const newUrlWithLanguage = `${newLangPathname}${location.search}${location.hash}`;
+        history.push(newUrlWithLanguage);
+        props.onChangeLanguage(locale.code);
+      }}
+      key={locale.code}
+      role="link"
     >
-      <DropdownValue role="link">{locale.name || locale.code}</DropdownValue>
-      <DropdownMenu>
-        {locales.map((locale) => (
-          <MenuItem
-            onClick={() => {
-              const newLangPathname = withPathPrefix(
-                getPathnameForLocale(location.pathname, defaultLocale, locale.code, locales),
-              );
-              const newUrlWithLanguage = `${newLangPathname}${location.search}${location.hash}`;
-              history.push(newUrlWithLanguage);
-              props.onChangeLanguage(locale.code);
-            }}
-            key={locale.code}
-            role="link"
-          >
-            {locale.name || locale.code || ''}
-          </MenuItem>
-        ))}
-      </DropdownMenu>
-    </Dropdown>
-  );
+      {locale.name || locale.code || ''}
+    </LanguageItem>
+  ));
+
+  return <LanguageSelect selected={selected} options={languageItems} triggerEvent="hover" />;
 };
 
-const Dropdown = styled.div<{ isOpen: boolean }>`
-  font-size: var(--profile-menu-item-font-size);
-  font-family: var(--profile-menu-item-font-family);
-  font-weight: var(--profile-menu-item-font-weight);
-  line-height: var(--profile-menu-item-line-height);
+const LanguageSelect = styled(Select).attrs(() => ({
+  dataAttributes: {
+    'data-component-name': 'I18n/LanguagePicker',
+  },
+}))`
+  display: none;
+  font-size: var(--language-picker-font-size);
+  font-weight: var(--language-picker-font-weight);
+  line-height: var(--language-picker-line-height);
+  border-radius: var(--language-picker-border-radius);
+  color: var(--language-picker-text-color);
+
+  ${SelectInput} {
+    color: var(--navbar-text-color);
+    border-radius: var(--language-picker-input-border-radius);
+    padding: var(--language-picker-input-padding-vertical)
+      var(--language-picker-input-padding-horizontal);
+  }
 
-  ${(props) =>
-    props.isOpen
-      ? `
-    ${DropdownMenu} {
-      display: block;
-      z-index: var(--z-index-popover);
-    }
-  `
-      : ``}
-`;
+  ${SelectList} {
+    min-width: var(--language-picker-list-min-width);
+    max-width: var(--language-picker-list-max-width);
+    padding: var(--language-picker-list-padding);
+    background-color: var(--language-picker-list-background-color);
+    border-radius: var(--language-picker-list-border-radius);
+    box-shadow: var(--language-picker-list-box-shadow);
+  }
 
-const DropdownValue = styled.div`
-  cursor: pointer;
-  display: block;
+  ${SelectListItem} {
+    border-radius: var(--language-picker-list-item-border-radius);
 
-  color: var(--navbar-text-color);
-  padding: var(--navbar-item-padding-vertical) var(--navbar-item-padding-horizontal);
-  border-radius: var(--navbar-item-border-radius);
+    & > * {
+      padding: var(--language-picker-list-item-vertical-padding)
+        var(--language-picker-list-item-horizontal-padding);
+    }
 
-  &:hover {
-    color: var(--navbar-item-hover-text-color);
-    text-decoration: var(--navbar-item-hover-text-decoration);
-    background: var(--navbar-item-hover-background-color);
+    :hover {
+      background-color: var(--language-picker-list-item-active-background-color);
+    }
   }
-`;
-
-const DropdownMenu = styled.ul`
-  position: absolute;
-  color: var(--profile-menu-item-text-color);
-  background-color: var(--profile-menu-background-color);
-  top: var(--navbar-height);
-  margin: 0;
-  box-shadow: 0 1px 2px rgb(204, 204, 204);
-  border-radius: 0 1px 2px 2px;
-  overflow: hidden;
-  display: none;
-  overflow-y: auto;
-  z-index: var(--z-index-surface);
-  padding: 0;
-  list-style: none;
-`;
 
-const MenuItem = styled.li`
-  padding: 10px;
-  transition: all 0.2s ease-in-out;
-  cursor: pointer;
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: block;
+  }
 
-  &:hover {
-    color: var(--profile-menu-item-hover-text-color);
-    text-decoration: var(--profile-menu-item-hover-text-decoration);
-    background: var(--profile-menu-item-hover-background-color);
+  :hover {
+    text-decoration: var(--navbar-item-hover-text-decoration);
+    background: var(--navbar-item-hover-background-color);
   }
 `;
+const LanguageItem = styled.div``;

package/src/components/Catalog/Catalog.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import styled from 'styled-components';
 
 import type { ResolvedNavItem } from '@theme/types/portal';
-import type { CatalogConfig } from '@theme/types/portal/src/shared/types/catalog';
 import { HighlightContext } from '@theme/ui/Highlight';
 import { Button } from '@theme/components/Button';
 import { Filter } from '@theme/components/Filter';
@@ -10,6 +9,7 @@ import { H2 } from '@theme/components/Typography/H2';
 import { H3 } from '@theme/components/Typography/H3';
 import { CatalogCard } from '@theme/components/Catalog/CatalogCard';
 import { usePageSharedData, useTranslate } from '@portal/hooks/index';
+import type { CatalogConfig } from '@theme/config';
 
 import { useCatalog } from './useCatalog';
 

package/src/components/Catalog/useCatalog.ts

@@ -5,13 +5,12 @@ import type { Location } from 'react-router-dom';
 
 import type { ResolvedNavItem } from '@theme/types/portal';
 import type {
-  CatalogConfig,
   CatalogItem,
-  Filter,
   FilteredCatalog,
   ResolvedFilter,
 } from '@theme/types/portal/src/shared/types/catalog';
 import { findDeepFirst, toStringIfDefined, withoutHash } from '@theme/utils';
+import type { CatalogConfig, CatalogFilterConfig } from '@theme/config';
 
 export function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): FilteredCatalog {
   const location = useLocation();
@@ -226,7 +225,7 @@ function normalizeItems(items: ResolvedNavItem[], config: CatalogConfig): Catalo
   });
 }
 
-function collectFilterParents(filtersWithOptions: Filter[] | undefined) {
+function collectFilterParents(filtersWithOptions: CatalogFilterConfig[] | undefined) {
   if (!filtersWithOptions) return [];
   const parents: Set<number>[] = [];
   // use filter idx as id so we don't need users to provide unique ids

package/src/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,138 @@
+import React, { useRef, useState } from 'react';
+import styled, { css } from 'styled-components';
+
+import { ArrowIcon } from '@theme/icons';
+import { useOutsideClick } from '@theme/hooks';
+
+export interface DropdownProps {
+  children: React.ReactNode;
+  items: JSX.Element[] | string[];
+  dataAttributes?: Record<string, string>;
+  className?: string;
+  withArrow?: boolean;
+  triggerEvent?: 'click' | 'hover';
+  onChange?: (value: React.ReactNode | string) => void;
+}
+
+export const Dropdown = ({
+  children,
+  className,
+  items,
+  withArrow,
+  triggerEvent = 'click',
+  onChange,
+  dataAttributes,
+}: DropdownProps) => {
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  const handleOpen = () => {
+    setIsOpen(true);
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  const handleToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const handleClick = (value: React.ReactNode | string) => {
+    setIsOpen(false);
+    onChange?.(value);
+  };
+
+  useOutsideClick(dropdownRef, handleClose);
+
+  return (
+    <DropdownContainer
+      {...dataAttributes}
+      data-testid="dropdown"
+      className={className}
+      ref={dropdownRef}
+      onPointerEnter={triggerEvent === 'hover' ? handleOpen : undefined}
+      onPointerLeave={handleClose}
+      onClick={triggerEvent === 'click' ? handleToggle : undefined}
+    >
+      <DropdownHeader>
+        {children}
+        {withArrow ? isOpen ? <ArrowIcon direction="up" /> : <ArrowIcon direction="down" /> : null}
+      </DropdownHeader>
+      {isOpen && (
+        <DropdownList>
+          {items.map((item, index) => (
+            <DropdownListItem
+              key={index}
+              onClick={() => handleClick(item)}
+              separator={(item as JSX.Element).props?.separator}
+            >
+              {item}
+            </DropdownListItem>
+          ))}
+        </DropdownList>
+      )}
+    </DropdownContainer>
+  );
+};
+
+const DropdownContainer = styled.div`
+  position: relative;
+  font-size: var(--dropdown-font-size);
+  font-weight: var(--dropdown-font-weight);
+  line-height: var(--dropdown-line-height);
+  border-radius: var(--dropdown-border-radius);
+  color: var(--dropdown-text-color);
+
+  a {
+    display: block;
+    text-decoration: none;
+    color: var(--dropdown-text-color);
+  }
+`;
+
+export const DropdownHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+`;
+
+export const DropdownList = styled.ul`
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin: 0;
+  min-width: var(--dropdown-list-min-width);
+  max-width: var(--dropdown-list-max-width);
+  padding: var(--dropdown-list-padding);
+  background-color: var(--dropdown-list-background-color);
+  border-radius: var(--dropdown-list-border-radius);
+  box-shadow: var(--dropdown-list-box-shadow);
+  list-style-type: none;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  z-index: 1;
+`;
+
+export const DropdownListItem = styled.li<{ separator?: boolean }>`
+  border-radius: var(--dropdown-list-item-border-radius);
+
+  & > * {
+    padding: var(--dropdown-list-item-vertical-padding) var(--dropdown-list-item-horizontal-padding);
+  }
+
+  :hover {
+    background-color: var(--dropdown-list-item-active-background-color);
+  }
+
+  ${({ separator }) =>
+    separator &&
+    css`
+      border-bottom: 1px solid var(--dropdown-list-item-separator-color);
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    `}
+`;

package/src/components/Dropdown/index.ts

@@ -0,0 +1 @@
+export * from '@theme/components/Dropdown/Dropdown';

package/src/components/Menu/MenuGroup.tsx

@@ -5,6 +5,7 @@ import { ArrowIcon } from '@theme/icons/ArrowIcon/ArrowIcon';
 import { MenuLinkItem } from '@theme/components/Menu/MenuLinkItem';
 import { MenuItemLabel } from '@theme/components/Menu/MenuItemLabel';
 import { SeparatorLine } from '@theme/components/Separator/SeparatorLine';
+import { SidebarItemIcon } from '@theme/components/Sidebar/SidebarItemIcon';
 import type { ItemState } from '@theme/components/Sidebar/types';
 import { useTranslate } from '@portal/hooks';
 
@@ -50,6 +51,7 @@ export function MenuGroup({
           role={!item.link ? 'link' : 'none'}
         >
           {!!item.items.length && <MenuGroupArrow direction={isExpanded ? 'down' : 'right'} />}
+          {item.icon ? <SidebarItemIcon src={item.icon} /> : null}
           {translate(item.labelTranslationKey, item.label)}
         </MenuGroupLabel>
       </MenuLinkItem>

package/src/components/Menu/MenuItem.tsx

@@ -6,6 +6,7 @@ import { ExternalIcon } from '@theme/icons/ExternalIcon';
 import { MenuItemLabel } from '@theme/components/Menu/MenuItemLabel';
 import { SeparatorLine } from '@theme/components/Separator/SeparatorLine';
 import type { MenuItemProps } from '@theme/components/Sidebar/types';
+import { SidebarItemIcon } from '@theme/components/Sidebar/SidebarItemIcon';
 import { useTranslate } from '@portal/hooks';
 
 export function MenuItem({ item, className }: MenuItemProps): JSX.Element {
@@ -14,6 +15,7 @@ export function MenuItem({ item, className }: MenuItemProps): JSX.Element {
     <Wrapper data-component-name="Sidebar/MenuItem" className={className}>
       <MenuLinkItem item={item}>
         <Label active={item.active}>
+          {item.icon ? <SidebarItemIcon src={item.icon} /> : null}
           {translate(item.labelTranslationKey, item.label)}
           {item.external ? <ExternalIcon dataComponentName="Sidebar/ExternalIcon" /> : null}
         </Label>

package/src/components/Menu/MobileMenu.tsx

@@ -1,112 +1,67 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { DropdownWrapper } from '@theme/components/Navbar/NavbarDropdown';
-import { isPrimitive, isEmptyArray, withPathPrefix } from '@theme/utils';
-import type { ResolvedNavItem } from '@theme/types/portal';
+import type { MobileMenuProps } from '@theme/components/Menu/types';
+import { MenuType } from '@theme/components/Menu/constants';
 import { Menu, MenuItemLabel } from '@theme/components/Menu/index';
-import type { ItemState } from '@portal/Sidebar/types';
 import { MobileUserProfile } from '@theme/components/Navbar/MobileUserProfile';
-import { getPathnameForLocale } from '@portal/utils';
-import { useI18nConfig, useTranslate } from '@portal/hooks';
+import { useCurrentProduct } from '@portal/hooks';
 import { ArrowIcon } from '@theme/icons';
+import { Product } from '@theme/components/Product/Product';
+import { useMobileMenuLevels } from '@theme/components/Menu/hooks/use-mobile-menu-levels';
+import { useMobileMenuItems } from '@theme/components/Menu/hooks/use-mobile-menu-items';
 
-interface MobileMenuProps {
-  navItems: ResolvedNavItem[];
-  sidebarItems: ItemState[];
-  className?: string;
-}
+export function MobileMenu({ className }: MobileMenuProps): JSX.Element | null {
+  const location = useLocation();
+  const product = useCurrentProduct();
 
-enum MenuLevel {
-  NAVBAR = 'NAVBAR',
-  SIDEBAR = 'SIDEBAR',
-}
+  const menuLevels = useMobileMenuLevels();
 
-export function MobileMenu({
-  navItems,
-  sidebarItems,
-  className,
-}: MobileMenuProps): JSX.Element | null {
-  const [menuLevel, setMenuLevel] = useState(
-    sidebarItems.length ? MenuLevel.SIDEBAR : MenuLevel.NAVBAR,
-  );
-  const { pathname, hash } = useLocation();
-  const pathHash = pathname + hash;
-  const { defaultLocale, currentLocale, locales } = useI18nConfig();
-  const { translate } = useTranslate();
+  const [menuLevel, setMenuLevel] = useState(menuLevels.length - 1);
 
-  if (isPrimitive(navItems) || isEmptyArray(navItems)) {
-    return null;
-  }
+  useEffect(() => {
+    setMenuLevel(menuLevels.length - 1);
+  }, [menuLevels, location]);
 
-  const isItemActive = (item: ResolvedNavItem): boolean => {
-    return (
-      pathHash ===
-      withPathPrefix(getPathnameForLocale(item.link || '/', defaultLocale, currentLocale, locales))
-    );
-  };
-
-  const mapNavbarItems = (items: ResolvedNavItem[]): ItemState[] => {
-    return items.map(
-      (navItem) =>
-        ({
-          ...navItem,
-          ...(navItem.items && { items: mapNavbarItems(navItem.items) }),
-          ...('link' in navItem && { link: navItem.link || '/' }),
-          active: 'link' in navItem && isItemActive(navItem),
-          hasActiveSubItem: !!navItem.items?.find(isItemActive),
-        } as ItemState),
-    );
-  };
-
-  let menuItems: ItemState[];
-  switch (menuLevel) {
-    case MenuLevel.SIDEBAR:
-      menuItems = sidebarItems;
-      break;
-    default:
-      menuItems = mapNavbarItems(navItems);
-  }
+  const menuType = menuLevels[menuLevel]?.type || MenuType.MAIN_MENU;
 
-  const isMenuButtonVisible = menuLevel === MenuLevel.SIDEBAR;
-  const isPreviousButtonVisible = menuLevel === MenuLevel.NAVBAR && !!sidebarItems.length;
-  const isButtonsSectionVisible = isMenuButtonVisible || isPreviousButtonVisible;
+  const menuItems = useMobileMenuItems(menuType);
 
-  const translationKeys = {
-    mainMenu: 'theme.mobileMenu.mainMenu',
-    previous: 'theme.mobileMenu.previous',
-  };
+  const prevLevelName = menuLevels[menuLevel - 1]?.label;
+  const nextLevelName = menuLevels[menuLevel + 1]?.label;
+  const isButtonsSectionVisible = nextLevelName || prevLevelName;
 
   return (
     <MobileMenuWrapper data-component-name="Menu/MobileMenu" className={className}>
       <ScrollableArea>
         {isButtonsSectionVisible && (
-          <ButtonsSection alignRight={isPreviousButtonVisible}>
-            {isMenuButtonVisible && (
+          <ButtonsSection alignRight={!prevLevelName && !!nextLevelName}>
+            {prevLevelName && (
               <ControlButton
                 data-component-name="Menu/ControlButton"
-                onClick={() => setMenuLevel(MenuLevel.NAVBAR)}
+                onClick={() => setMenuLevel(menuLevel - 1)}
               >
                 <ArrowIcon direction="left" weight="thin" />
-                <ControlButtonLabel paddingDirection="left">
-                  {translate(translationKeys.mainMenu, 'Main Menu')}
-                </ControlButtonLabel>
+                <ControlButtonLabel paddingDirection="left">{prevLevelName}</ControlButtonLabel>
               </ControlButton>
             )}
-            {isPreviousButtonVisible && (
+            {nextLevelName && (
               <ControlButton
                 data-component-name="Menu/ControlButton"
-                onClick={() => setMenuLevel(MenuLevel.SIDEBAR)}
+                onClick={() => setMenuLevel(menuLevel + 1)}
               >
-                <ControlButtonLabel paddingDirection="right">
-                  {translate(translationKeys.previous, 'Previous')}
-                </ControlButtonLabel>
+                <ControlButtonLabel paddingDirection="right">{nextLevelName}</ControlButtonLabel>
                 <ArrowIcon direction="right" weight="thin" />
               </ControlButton>
             )}
           </ButtonsSection>
         )}
+        {menuType === MenuType.PRODUCT && product ? (
+          <ProductNameWrapper>
+            <Product product={product} />
+          </ProductNameWrapper>
+        ) : null}
         <MenuWrapper>
           <Menu items={menuItems} isMobile />
         </MenuWrapper>
@@ -115,9 +70,8 @@ export function MobileMenu({
     </MobileMenuWrapper>
   );
 }
-
 const MobileMenuWrapper = styled.div`
-  height: 100%;
+  height: calc(100vh - var(--navbar-height));
   width: 100%;
   position: fixed;
   z-index: var(--z-index-raised);
@@ -132,21 +86,6 @@ const MobileMenuWrapper = styled.div`
   ${({ theme }) => theme.mediaQueries.medium} {
     display: none;
   }
-
-  ${DropdownWrapper} {
-    & > div {
-      text-align: center;
-      padding: 10px 0;
-      cursor: pointer;
-      a {
-        color: var(--navbar-text-color);
-        text-decoration: none;
-      }
-      :hover {
-        text-decoration: underline;
-      }
-    }
-  }
 `;
 
 const ButtonsSection = styled.div<{ alignRight: boolean }>`
@@ -158,9 +97,8 @@ const ButtonsSection = styled.div<{ alignRight: boolean }>`
 
 const ScrollableArea = styled.div`
   padding-top: var(--mobile-menu-padding-top);
-  flex: 1;
   overflow-y: scroll;
-  margin-bottom: 140px;
+  flex-grow: 1;
 `;
 
 const MenuWrapper = styled.div`
@@ -207,3 +145,12 @@ const ControlButtonLabel = styled.span<{ paddingDirection: 'right' | 'left' }>`
   ${({ paddingDirection }) => paddingDirection === 'left' && 'padding-left: 8px'};
   ${({ paddingDirection }) => paddingDirection === 'right' && 'padding-right: 8px'};
 `;
+
+const ProductNameWrapper = styled.div`
+  color: var(--mobile-menu-item-text-color);
+  border-radius: var(--mobile-menu-item-radius);
+  padding-left: var(--sidebar-item-padding-horizontal);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  padding: 8px 7px;
+  margin: 12px 8px 0 8px;
+`;

package/src/components/Menu/MobileMenuGroup.tsx

@@ -7,6 +7,7 @@ import { SeparatorLine } from '@theme/components/Separator/SeparatorLine';
 import type { ItemState } from '@theme/components/Sidebar/types';
 import { useTranslate } from '@portal/hooks';
 import { ArrowIcon } from '@theme/icons';
+import { SidebarItemIcon } from '@theme/components/Sidebar/SidebarItemIcon';
 
 interface MenuGroupProps {
   item: ItemState;
@@ -27,6 +28,7 @@ export function MobileMenuGroup({
       <MenuLinkItem item={item}>
         <MenuGroupLabel onClick={toggleExpanded} active={item.active} expanded={isExpanded}>
           <LabelContainer>
+            {item.icon ? <SidebarItemIcon src={item.icon} /> : null}
             <Label>{translate(item.labelTranslationKey, item.label)}</Label>
           </LabelContainer>
           {!!item.items.length && (

package/src/components/Menu/constants.ts

@@ -0,0 +1,5 @@
+export enum MenuType {
+  MAIN_MENU = 'MAIN_MENU',
+  PRODUCT = 'PRODUCT',
+  PAGE = 'PAGE',
+}