@redocly/theme 0.70.0-next.1 → 0.70.0-next.10

package/src/components/Dropdown/Dropdown.tsx

@@ -1,243 +0,0 @@
-import React, {
-  cloneElement,
-  useRef,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useState,
-} from 'react';
-import { createPortal } from 'react-dom';
-import styled, { css } from 'styled-components';
-
-import type { CSSProperties, ReactElement } from 'react';
-import type { RenderableChildren } from '@redocly/theme/core/types';
-
-import { useOutsideClick, useControlledState } from '@redocly/theme/core/hooks';
-import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
-import { ChevronUpIcon } from '@redocly/theme/icons/ChevronUpIcon/ChevronUpIcon';
-
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-
-interface TriggerProps {
-  onClick?: (event: React.UIEvent) => void;
-  onKeyDown?: (event: React.KeyboardEvent) => void;
-  icon?: React.ReactNode;
-  iconPosition?: string;
-  [key: string]: unknown;
-}
-
-type DropdownMenuContext = {
-  close: () => void;
-  isOpen: boolean;
-};
-
-export type DropdownProps = {
-  trigger: React.ReactNode;
-  children: RenderableChildren<DropdownMenuContext>;
-  triggerEvent?: 'click' | 'hover';
-  placement?: 'top' | 'bottom';
-  alignment?: 'start' | 'end';
-
-  active?: boolean;
-  closeOnClick?: boolean;
-
-  dataAttributes?: Record<string, string>;
-  className?: string;
-  withArrow?: boolean;
-  portalled?: boolean;
-
-  onClick?: (event: React.UIEvent) => void;
-  onClose?: () => void;
-  onOpen?: () => void;
-};
-
-export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
-  (
-    {
-      children,
-      className,
-      active,
-      trigger,
-      triggerEvent = 'click',
-      closeOnClick = true,
-      withArrow,
-      dataAttributes,
-      placement,
-      alignment,
-      portalled = false,
-      onClick,
-      onClose,
-      onOpen,
-    },
-    ref,
-  ) => {
-    const dropdownRef = useRef<HTMLDivElement | null>(null);
-    const menuRef = useRef<HTMLDivElement | null>(null);
-    const [isOpen, setIsOpen] = useControlledState<boolean>(false, active);
-    const [menuStyle, setMenuStyle] = useState<CSSProperties>({});
-
-    const wrapperRef = (ref as React.RefObject<HTMLDivElement | null>) || dropdownRef;
-
-    const handleOpen = () => {
-      setIsOpen(true);
-      onOpen?.();
-    };
-
-    const handleClose = () => {
-      if (!isOpen) {
-        return;
-      }
-      setIsOpen(false);
-      onClose?.();
-    };
-
-    const handleChildClick = () => {
-      handleClose();
-    };
-
-    const handleToggle = (event: React.UIEvent) => {
-      event.stopPropagation();
-      event.preventDefault();
-      if (isOpen) {
-        handleClose();
-      } else {
-        handleOpen();
-      }
-    };
-
-    const handleKeyDown = (event: React.KeyboardEvent) => {
-      if (event.key === 'Enter' || event.key === ' ') {
-        handleToggle(event);
-      }
-    };
-
-    const updateMenuPosition = useCallback(() => {
-      const wrapper = wrapperRef.current;
-      if (!wrapper) return;
-      const rect = wrapper.getBoundingClientRect();
-      const menuHeight = menuRef.current?.offsetHeight ?? 0;
-      const fitsBelow = rect.bottom + menuHeight <= window.innerHeight;
-      const fitsAbove = rect.top - menuHeight >= 0;
-      const openUpward = placement === 'top' ? fitsAbove || !fitsBelow : !fitsBelow && fitsAbove;
-      const style: CSSProperties = { minWidth: rect.width };
-      if (openUpward) {
-        style.bottom = window.innerHeight - rect.top;
-      } else {
-        style.top = rect.bottom;
-      }
-      if (alignment === 'end') {
-        style.right = window.innerWidth - rect.right;
-      } else {
-        style.left = rect.left;
-      }
-      const zIndex = getComputedStyle(wrapper).getPropertyValue('--dropdown-menu-z-index').trim();
-      if (zIndex) {
-        style.zIndex = zIndex;
-      }
-      setMenuStyle(style);
-    }, [placement, alignment, wrapperRef]);
-
-    useIsomorphicLayoutEffect(() => {
-      if (!portalled || !isOpen) return;
-      updateMenuPosition();
-      window.addEventListener('scroll', updateMenuPosition, true);
-      window.addEventListener('resize', updateMenuPosition);
-      return () => {
-        window.removeEventListener('scroll', updateMenuPosition, true);
-        window.removeEventListener('resize', updateMenuPosition);
-      };
-    }, [portalled, isOpen, updateMenuPosition]);
-
-    useOutsideClick(portalled ? [wrapperRef, menuRef] : wrapperRef, handleClose);
-
-    const menuContent =
-      typeof children === 'function' ? children({ close: handleClose, isOpen }) : children;
-
-    const triggerChild = React.Children.only(trigger) as ReactElement<TriggerProps>;
-
-    const dropdownTrigger = cloneElement(triggerChild, {
-      onClick: triggerEvent === 'click' ? handleToggle : undefined,
-      'aria-expanded': isOpen,
-      icon: withArrow ? isOpen ? <ChevronUpIcon /> : <ChevronDownIcon /> : undefined,
-      ...(withArrow ? { iconPosition: 'right' } : {}),
-      ...triggerChild.props,
-      onKeyDown: triggerEvent === 'click' ? handleKeyDown : undefined,
-    });
-
-    const menu = (
-      <ChildrenWrapper
-        ref={menuRef}
-        $placement={placement}
-        $alignment={alignment}
-        $isOpen={isOpen}
-        $portalled={portalled}
-        style={portalled ? menuStyle : undefined}
-        onClick={closeOnClick ? handleChildClick : undefined}
-      >
-        {menuContent}
-      </ChildrenWrapper>
-    );
-
-    const portalledMenu =
-      isOpen && typeof document !== 'undefined' ? createPortal(menu, document.body) : null;
-
-    return (
-      <DropdownWrapper
-        data-component-name="Dropdown/Dropdown"
-        data-testid="dropdown"
-        {...dataAttributes}
-        className={className}
-        ref={wrapperRef}
-        onPointerEnter={triggerEvent === 'hover' ? handleOpen : undefined}
-        onPointerLeave={triggerEvent === 'hover' ? handleClose : undefined}
-        onClick={onClick}
-      >
-        {dropdownTrigger}
-
-        {portalled ? portalledMenu : menu}
-      </DropdownWrapper>
-    );
-  },
-);
-
-const DropdownWrapper = styled.div`
-  --button-gap: var(--spacing-xxs);
-
-  display: flex;
-  gap: var(--spacing-xxs);
-  align-items: center;
-  justify-content: space-between;
-  cursor: pointer;
-  height: 100%;
-  appearance: none;
-  padding: 0;
-  margin: 0;
-  position: relative;
-
-  text-decoration: none;
-`;
-
-const ChildrenWrapper = styled.div<{
-  $placement?: string;
-  $alignment?: string;
-  $isOpen?: boolean;
-  $portalled?: boolean;
-}>`
-  padding-top: var(--dropdown-menu-padding-top);
-  display: ${({ $isOpen }) => ($isOpen ? 'block' : 'none')};
-  z-index: var(--dropdown-menu-z-index);
-
-  ${({ $portalled, $placement, $alignment }) =>
-    $portalled
-      ? css`
-          position: fixed;
-        `
-      : css`
-          position: absolute;
-          top: ${$placement === 'top' ? 'auto' : '100%'};
-          bottom: ${$placement === 'top' ? '100%' : 'auto'};
-          left: ${$alignment === 'start' ? '0' : 'auto'};
-          right: ${$alignment === 'end' ? '0' : 'auto'};
-        `}
-`;

package/src/components/Dropdown/DropdownMenu.tsx

@@ -1,72 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import type { ReactNode, JSX } from 'react';
-import type { DropdownMenuItemProps } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
-
-import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
-
-export type DropdownMenuProps = { className?: string; role?: string; footer?: React.ReactNode } & (
-  | {
-      items: DropdownMenuItemProps[];
-    }
-  | { children?: ReactNode }
-);
-
-export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
-  let content: React.ReactNode = null;
-
-  if ('children' in props) {
-    content = props.children;
-  }
-
-  if ('items' in props) {
-    content = props.items.map((item, idx) => (
-      <DropdownMenuItem key={idx} {...item}>
-        {item.content}
-      </DropdownMenuItem>
-    ));
-  }
-
-  return (
-    <DropdownMenuWrapper
-      data-component-name="Dropdown/DropdownMenu"
-      data-testid="dropdown-menu"
-      className={props.className}
-      role={props.role || 'menu'}
-    >
-      {content}
-      {props.footer || null}
-    </DropdownMenuWrapper>
-  );
-}
-
-const DropdownMenuWrapper = styled.ul`
-  font-size: var(--dropdown-menu-font-size);
-  font-weight: var(--dropdown-menu-font-weight);
-  line-height: var(--dropdown-menu-line-height);
-  color: var(--dropdown-menu-text-color);
-
-  /* Make sure the spacing is not overriden by the markdown list styles */
-  --md-list-margin: 0;
-  --md-list-left-padding: var(--dropdown-menu-padding);
-
-  margin: 0;
-  min-width: var(--dropdown-menu-min-width);
-  max-width: var(--dropdown-menu-max-width);
-  max-height: var(--dropdown-menu-max-height);
-  padding: var(--dropdown-menu-padding);
-  background-color: var(--dropdown-menu-bg-color);
-  border-radius: var(--dropdown-menu-border-radius);
-  box-shadow: var(--dropdown-menu-box-shadow);
-  border: 1px solid var(--dropdown-menu-border-color);
-  list-style-type: none;
-  white-space: nowrap;
-  overflow-x: hidden;
-  overflow-y: auto;
-  z-index: var(--z-index-surface);
-
-  display: flex;
-  flex-direction: column;
-  gap: var(--dropdown-menu-item-gap);
-`;

package/src/components/Dropdown/DropdownMenuItem.tsx

@@ -1,201 +0,0 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
-
-import type { KeyboardEvent, CSSProperties, ReactNode, PropsWithChildren, JSX } from 'react';
-import type { LinkProps } from '@redocly/theme/core/types';
-
-import { Link } from '@redocly/theme/components/Link/Link';
-
-export type DropdownMenuItemProps = Partial<Pick<LinkProps, 'to' | 'target' | 'external'>> & {
-  prefix?: ReactNode;
-  suffix?: ReactNode;
-  content?: ReactNode;
-
-  separatorLine?: boolean;
-
-  dataAttributes?: Record<string, string>;
-  className?: string;
-  style?: CSSProperties;
-  role?: string;
-
-  separator?: boolean;
-  disabled?: boolean;
-  dangerous?: boolean;
-  onAction?: () => void;
-  active?: boolean;
-};
-
-export function DropdownMenuItem({
-  children,
-  content,
-  active,
-  onAction,
-  to,
-  dangerous,
-  prefix,
-  suffix,
-  disabled,
-  separator,
-  dataAttributes,
-  className,
-  separatorLine,
-  style,
-  role = 'menuitem',
-  ...otherProps
-}: PropsWithChildren<DropdownMenuItemProps>): JSX.Element {
-  const handleClick = () => {
-    onAction?.();
-  };
-
-  const handleKeyDown = (event: KeyboardEvent) => {
-    if (event.key === 'Enter' || event.key === ' ') {
-      onAction?.();
-    }
-  };
-
-  className = className || '' + (active ? ' active' : '');
-
-  const sharedProps = {
-    $active: active,
-    $dangerous: dangerous,
-    $disabled: disabled,
-    $separator: separator,
-    $separatorLine: separatorLine,
-    'data-component-name': 'Dropdown/DropdownMenuItem',
-    className,
-    onClick: handleClick,
-    role,
-    style,
-  };
-
-  if (to) {
-    return (
-      <DropdownMenuItemWrapper
-        as={Link}
-        to={to}
-        {...sharedProps}
-        {...dataAttributes}
-        {...otherProps}
-      >
-        {prefix}
-        {children}
-        {suffix}
-      </DropdownMenuItemWrapper>
-    );
-  }
-
-  return (
-    <DropdownMenuItemWrapper
-      {...sharedProps}
-      {...dataAttributes}
-      onKeyDown={handleKeyDown}
-      tabIndex={onAction ? 0 : -1}
-    >
-      {prefix}
-      {children || content}
-      {suffix}
-    </DropdownMenuItemWrapper>
-  );
-}
-
-const DropdownMenuItemWrapper = styled.li<{
-  $separatorLine?: boolean;
-  $separator?: boolean;
-  $active?: boolean;
-  $disabled?: boolean;
-  $dangerous?: boolean;
-}>`
-  display: flex;
-  flex-direction: row;
-  justify-content: var(--dropdown-menu-item-justify-content, flex-start);
-  align-items: center;
-  width: 100%;
-  border: none;
-  background: none;
-  appearance: none;
-  text-align: left;
-  gap: var(--spacing-xxs);
-
-  > * {
-    min-width: 0; // for flex
-  }
-
-  cursor: pointer;
-  pointer-events: auto;
-
-  padding: var(--dropdown-menu-item-padding-vertical) var(--dropdown-menu-item-padding-horizontal);
-  border-radius: var(--dropdown-menu-item-border-radius);
-
-  &:focus-visible {
-    outline: 1px solid var(--dropdown-menu-item-border-color-focused);
-  }
-
-  background-color: var(--dropdown-menu-item-bg-color);
-  color: var(--dropdown-menu-item-color);
-
-  text-decoration: none;
-
-  &:hover {
-    background-color: var(--dropdown-menu-item-bg-color-hover);
-    color: var(--dropdown-menu-item-color-hover);
-  }
-
-  ${({ $separator }) =>
-    $separator &&
-    css`
-      cursor: default;
-      pointer-events: none;
-      font-size: var(--dropdown-menu-item-separator-font-size);
-      line-height: var(--dropdown-menu-item-separator-line-height);
-      color: var(--dropdown-menu-item-separator-text-color);
-      --dropdown-menu-item-bg-color-hover: var(--dropdown-menu-item-bg-color);
-    `}
-
-  ${({ $active }) =>
-    $active &&
-    css`
-      background-color: var(--dropdown-menu-item-bg-color-active);
-      color: var(--dropdown-menu-item-color-active);
-      svg {
-        fill: var(--dropdown-menu-item-color-active);
-      }
-    `}
-
-  ${({ $disabled }) =>
-    $disabled &&
-    css`
-      cursor: default;
-      pointer-events: none;
-      background-color: var(--dropdown-menu-item-bg-color-disabled);
-      color: var(--dropdown-menu-item-color-disabled);
-      svg {
-        fill: var(--dropdown-menu-item-color-disabled);
-      }
-    `}
-
-  ${({ $separatorLine }) =>
-    $separatorLine &&
-    css`
-      border-bottom: 1px solid var(--dropdown-menu-item-separator-border-color);
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-      margin-bottom: var(--dropdown-menu-item-padding-vertical);
-      &:empty {
-        padding-top: 0;
-        padding-bottom: 0;
-        margin-top: var(--dropdown-menu-item-padding-vertical);
-      }
-    `}
-
-  ${({ $dangerous }) =>
-    $dangerous &&
-    css`
-      &:hover,
-      & {
-        color: var(--dropdown-menu-item-color-dangerous);
-        svg {
-          fill: var(--dropdown-menu-item-color-dangerous);
-        }
-      }
-    `}
-`;

package/src/components/Dropdown/DropdownMenuItemContent.tsx

@@ -1,72 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import type { JSX } from 'react';
-
-export type DropdownMenuItemContentProps = {
-  title: React.ReactNode;
-  icon?: React.ReactNode;
-  description?: React.ReactNode;
-  className?: string;
-};
-
-export function DropdownMenuItemContent(props: DropdownMenuItemContentProps): JSX.Element {
-  const { title, icon, description, className } = props;
-
-  return (
-    <MenuItemContentWrapper
-      data-component-name="Dropdown/DropdownMenuItemContent"
-      className={className}
-    >
-      {icon ? <IconWrapper>{icon}</IconWrapper> : null}
-      <TextWrapper>
-        <TitleWrapper>{title}</TitleWrapper>
-        {description ? <DescriptionWrapper>{description}</DescriptionWrapper> : null}
-      </TextWrapper>
-    </MenuItemContentWrapper>
-  );
-}
-
-const MenuItemContentWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--dropdown-menu-item-content-gap);
-  padding: var(--dropdown-menu-item-content-padding);
-`;
-
-const IconWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: var(--dropdown-menu-item-content-icon-size);
-  height: var(--dropdown-menu-item-content-icon-size);
-  color: var(--dropdown-menu-item-content-icon-color);
-  border: var(--dropdown-menu-item-content-icon-border);
-  border-radius: var(--dropdown-menu-item-content-icon-border-radius);
-`;
-
-const TextWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  gap: var(--dropdown-menu-item-content-text-gap);
-`;
-
-const TitleWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  gap: var(--dropdown-menu-item-content-title-icon-gap);
-  font-weight: var(--dropdown-menu-item-content-title-font-weight);
-  font-size: var(--dropdown-menu-item-content-title-font-size);
-  line-height: var(--dropdown-menu-item-content-title-line-height);
-  color: var(--dropdown-menu-item-content-title-color);
-`;
-
-const DescriptionWrapper = styled.div`
-  font-weight: var(--dropdown-menu-item-content-description-font-weight);
-  font-size: var(--dropdown-menu-item-content-description-font-size);
-  line-height: var(--dropdown-menu-item-content-description-line-height);
-  color: var(--dropdown-menu-item-content-description-color);
-`;

package/src/components/Dropdown/variables.ts

@@ -1,66 +0,0 @@
-import { css } from 'styled-components';
-
-export const dropdown = css`
-  /**
-    * @tokens Dropdown
-    **/
-  --dropdown-menu-font-size: var(--font-size-base); // @presenter FontSize
-  --dropdown-menu-font-weight: var(--font-weight-regular); // @presenter FontWeight
-  --dropdown-menu-line-height: var(--line-height-base); // @presenter LineHeight
-  --dropdown-menu-text-color: var(--text-color-secondary); // @presenter Color
-  /* One below --z-index-raised (the sticky Navbar) so a portaled menu, which is
-     appended to <body> after the navbar, never paints over it on a z-index tie. */
-  --dropdown-menu-z-index: calc(var(--z-index-raised) - 1); // @presenter ZIndex
-
-  --dropdown-menu-padding-top: var(--spacing-xxs);
-  --dropdown-menu-min-width: 100px;
-  --dropdown-menu-max-width: 424px;
-  --dropdown-menu-max-height: 300px;
-  --dropdown-menu-padding: var(--spacing-xxs); // @presenter Spacing
-  --dropdown-menu-border-radius: var(--border-radius-xl); // @presenter BorderRadius
-  --dropdown-menu-box-shadow: var(--bg-raised-shadow); // @presenter Shadow
-  --dropdown-menu-border-color: var(--border-color-secondary); // @presenter Color
-  --dropdown-menu-bg-color: var(--bg-color-raised); // @presenter Color
-
-  --dropdown-menu-item-gap: 0; // @presenter Spacing
-  --dropdown-menu-item-padding-horizontal: var(--spacing-base); // @presenter Spacing
-  --dropdown-menu-item-padding-vertical: 5px; // @presenter Spacing
-  --dropdown-menu-item-separator-padding-top: var(--spacing-xs); // @presenter Spacing
-  --dropdown-menu-item-separator-padding-bottom: var(--spacing-xxs); // @presenter Spacing
-  --dropdown-menu-item-border-radius: var(--border-radius-lg); // @presenter BorderRadius
-  --dropdown-menu-item-bg-color: transparent;
-  --dropdown-menu-item-bg-color-active: var(--bg-color-hover); // @presenter Color
-  --dropdown-menu-item-bg-color-hover: var(--bg-color-hover); // @presenter Color
-  --dropdown-menu-item-bg-color-disabled: var(--dropdown-menu-item-bg-color); // @presenter Color
-  --dropdown-menu-item-separator-border-color: var(--border-color-primary); // @presenter Color
-  --dropdown-menu-item-separator-font-size: var(--font-size-sm); // @presenter FontSize
-  --dropdown-menu-item-separator-line-height: var(--line-height-sm); // @presenter LineHeight
-  --dropdown-menu-item-separator-text-color: var(--text-color-disabled); // @presenter Color
-  --dropdown-menu-item-justify-content: flex-start;
-  --dropdown-menu-item-color: var(--dropdown-menu-text-color); // @presenter Color
-  --dropdown-menu-item-color-hover: var(--dropdown-menu-item-color); // @presenter Color
-  --dropdown-menu-item-color-active: var(--dropdown-menu-item-color); // @presenter Color
-  --dropdown-menu-item-color-disabled: var(--text-color-disabled); // @presenter Color
-
-  --dropdown-menu-item-color-dangerous: var(--color-error-base);
-
-  --dropdown-menu-item-border-color-focused: var(--button-border-color-focused);
-
-  --dropdown-menu-item-content-gap: var(--spacing-sm); // @presenter Spacing
-  --dropdown-menu-item-content-padding: var(--spacing-xxs) 0; // @presenter Spacing
-  --dropdown-menu-item-content-icon-size: 32px;
-  --dropdown-menu-item-content-icon-color: var(--icon-color-secondary); // @presenter Color
-  --dropdown-menu-item-content-icon-border: 1px solid var(--border-color-secondary); // @presenter Border
-  --dropdown-menu-item-content-icon-border-radius: var(--border-radius); // @presenter BorderRadius
-  --dropdown-menu-item-content-text-gap: var(--spacing-xxs); // @presenter Spacing
-  --dropdown-menu-item-content-title-icon-gap: var(--spacing-xxs); // @presenter Spacing
-  --dropdown-menu-item-content-title-font-weight: var(--font-weight-regular); // @presenter FontWeight
-  --dropdown-menu-item-content-title-font-size: var(--font-size-base); // @presenter FontSize
-  --dropdown-menu-item-content-title-line-height: var(--line-height-base); // @presenter LineHeight
-  --dropdown-menu-item-content-title-color: var(--text-color-secondary); // @presenter Color
-  --dropdown-menu-item-content-description-font-weight: var(--font-weight-regular); // @presenter FontWeight
-  --dropdown-menu-item-content-description-font-size: var(--font-size-sm); // @presenter FontSize
-  --dropdown-menu-item-content-description-line-height: var(--line-height-sm); // @presenter LineHeight
-  --dropdown-menu-item-content-description-color: var(--text-color-description); // @presenter Color
-  // @tokens End
-`;