@redocly/theme 0.70.0-next.4 → 0.70.0-next.6

package/src/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy.tsx

@@ -3,5 +3,7 @@ import type { CatalogEntityRelationsGraphProps } from '@redocly/theme/components
 import { dynamic } from '@redocly/theme/core/utils';
 
 export const CatalogEntityRelationsGraph = dynamic<CatalogEntityRelationsGraphProps>(() =>
-  import('./CatalogEntityRelationsGraph').then((mod) => mod.CatalogEntityRelationsGraph),
+  import('@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph').then(
+    (mod) => mod.CatalogEntityRelationsGraph,
+  ),
 );

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

@@ -96,30 +96,28 @@ export function CatalogFilterCheckboxes({
         <FilterOptions>
           {filteredOptions.map(({ value, count }) => {
             const id = 'filter--' + filter.property + '--' + value;
+            const checked =
+              filter.selectedOptions instanceof Set
+                ? filter.selectedOptions.has(value) ||
+                  filter.selectedOptions.has(value?.toLowerCase())
+                : false;
             return (
-              <FilterCheckboxOption
-                key={id}
-                role="link"
-                onClick={() => {
-                  filter.toggleOption(value);
-                  telemetry.sendCatalogEntitiesFilterCheckboxToggledMessage([
-                    {
-                      ...getBaseDataAttributes('catalogEntitiesFilterCheckboxId', 'checkbox'),
-                      category: filter.property,
-                      value: value,
-                    },
-                  ]);
-                }}
-              >
-                <CheckboxIcon
-                  checked={
-                    filter.selectedOptions instanceof Set
-                      ? filter.selectedOptions.has(value) ||
-                        filter.selectedOptions.has(value?.toLowerCase())
-                      : false
-                  }
-                />
+              <FilterCheckboxOption key={id}>
+                <CheckboxIcon checked={checked} />
                 <FilterOptionLabel data-translation-key={value}>
+                  <FilterCheckboxInput
+                    checked={checked}
+                    onChange={() => {
+                      filter.toggleOption(value);
+                      telemetry.sendCatalogEntitiesFilterCheckboxToggledMessage([
+                        {
+                          ...getBaseDataAttributes('catalogEntitiesFilterCheckboxId', 'checkbox'),
+                          category: filter.property,
+                          value: value,
+                        },
+                      ]);
+                    }}
+                  />
                   {highlightText(changeTextCasing(translate(value), filterValuesCasing) || '')}
                 </FilterOptionLabel>
                 {showCounter && <CounterTag borderless>{count}</CounterTag>}
@@ -168,6 +166,23 @@ const HighlightedText = styled.span`
 
 const FilterCheckboxOption = styled(FilterOption)`
   padding-left: var(--filter-option-checkbox-padding-left);
+
+  &:has(input:focus-visible) {
+    outline: 1px solid var(--button-border-color-focused);
+    outline-offset: -1px;
+  }
+`;
+
+const FilterCheckboxInput = styled.input.attrs({ type: 'checkbox' })`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
 `;
 
 const FilterSearchWrapper = styled.div`

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
@@ -19,6 +19,7 @@ export function CatalogFilterDateRange({
   filter,
   className,
 }: CatalogFilterDateRangeProps): JSX.Element {
+  const [today] = useState(() => new Date());
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
@@ -60,7 +61,7 @@ export function CatalogFilterDateRange({
                 monthPlaceholder="MM"
                 yearPlaceholder="YYYY"
                 value={from}
-                maxDate={new Date()}
+                maxDate={today}
                 onChange={(from) => {
                   if (Array.isArray(from)) return;
                   filter.selectOption({

package/src/components/Dropdown/Dropdown.tsx

@@ -11,9 +11,10 @@ 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 type { DropdownAlignment, RenderableChildren } from '@redocly/theme/core/types';
 
 import { useOutsideClick, useControlledState } from '@redocly/theme/core/hooks';
+import { fitDropdownAlignment } from '@redocly/theme/core/utils';
 import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
 import { ChevronUpIcon } from '@redocly/theme/icons/ChevronUpIcon/ChevronUpIcon';
 
@@ -37,7 +38,7 @@ export type DropdownProps = {
   children: RenderableChildren<DropdownMenuContext>;
   triggerEvent?: 'click' | 'hover';
   placement?: 'top' | 'bottom';
-  alignment?: 'start' | 'end';
+  alignment?: DropdownAlignment;
 
   active?: boolean;
   closeOnClick?: boolean;
@@ -46,6 +47,8 @@ export type DropdownProps = {
   className?: string;
   withArrow?: boolean;
   portalled?: boolean;
+  /** Element the menu lines up with when it is not the dropdown itself, e.g. a whole split button. */
+  alignmentAnchorRef?: React.RefObject<HTMLElement | null>;
 
   onClick?: (event: React.UIEvent) => void;
   onClose?: () => void;
@@ -66,6 +69,7 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
       placement,
       alignment,
       portalled = false,
+      alignmentAnchorRef,
       onClick,
       onClose,
       onOpen,
@@ -76,6 +80,7 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
     const menuRef = useRef<HTMLDivElement | null>(null);
     const [isOpen, setIsOpen] = useControlledState<boolean>(false, active);
     const [menuStyle, setMenuStyle] = useState<CSSProperties>({});
+    const [fittedAlignment, setFittedAlignment] = useState(alignment);
 
     const wrapperRef = (ref as React.RefObject<HTMLDivElement | null>) || dropdownRef;
 
@@ -115,7 +120,7 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
     const updateMenuPosition = useCallback(() => {
       const wrapper = wrapperRef.current;
       if (!wrapper) return;
-      const rect = wrapper.getBoundingClientRect();
+      const rect = (alignmentAnchorRef?.current ?? wrapper).getBoundingClientRect();
       const menuHeight = menuRef.current?.offsetHeight ?? 0;
       const fitsBelow = rect.bottom + menuHeight <= window.innerHeight;
       const fitsAbove = rect.top - menuHeight >= 0;
@@ -126,7 +131,7 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
       } else {
         style.top = rect.bottom;
       }
-      if (alignment === 'end') {
+      if (fitDropdownAlignment(rect, menuRef.current?.offsetWidth ?? 0, alignment) === 'end') {
         style.right = window.innerWidth - rect.right;
       } else {
         style.left = rect.left;
@@ -136,7 +141,24 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
         style.zIndex = zIndex;
       }
       setMenuStyle(style);
-    }, [placement, alignment, wrapperRef]);
+    }, [placement, alignment, wrapperRef, alignmentAnchorRef]);
+
+    /* The absolute-positioned menu is placed by CSS, so the side is measured once it is
+       shown and again on resize; a side that runs off the viewport flips to the other one. */
+    const updateFittedAlignment = useCallback(() => {
+      const wrapper = wrapperRef.current;
+      const menu = menuRef.current;
+      if (!wrapper || !menu) return;
+      const rect = (alignmentAnchorRef?.current ?? wrapper).getBoundingClientRect();
+      setFittedAlignment(fitDropdownAlignment(rect, menu.offsetWidth, alignment));
+    }, [alignment, wrapperRef, alignmentAnchorRef]);
+
+    useIsomorphicLayoutEffect(() => {
+      if (portalled || !isOpen) return;
+      updateFittedAlignment();
+      window.addEventListener('resize', updateFittedAlignment);
+      return () => window.removeEventListener('resize', updateFittedAlignment);
+    }, [portalled, isOpen, updateFittedAlignment]);
 
     useIsomorphicLayoutEffect(() => {
       if (!portalled || !isOpen) return;
@@ -172,7 +194,7 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
       <ChildrenWrapper
         ref={menuRef}
         $placement={placement}
-        $alignment={alignment}
+        $alignment={fittedAlignment}
         $isOpen={isOpen}
         $portalled={portalled}
         style={portalled ? menuStyle : undefined}

package/src/components/Dropdown/DropdownMenu.tsx

@@ -6,7 +6,12 @@ import type { DropdownMenuItemProps } from '@redocly/theme/components/Dropdown/D
 
 import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
 
-export type DropdownMenuProps = { className?: string; role?: string; footer?: React.ReactNode } & (
+export type DropdownMenuProps = {
+  id?: string;
+  className?: string;
+  role?: string;
+  footer?: React.ReactNode;
+} & (
   | {
       items: DropdownMenuItemProps[];
     }
@@ -32,6 +37,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
     <DropdownMenuWrapper
       data-component-name="Dropdown/DropdownMenu"
       data-testid="dropdown-menu"
+      id={props.id}
       className={props.className}
       role={props.role || 'menu'}
     >

package/src/components/Feedback/Reasons.tsx

@@ -18,6 +18,7 @@ export type ReasonsProps = {
 export function Reasons({ settings, onChange, className }: ReasonsProps): JSX.Element | null {
   const { label, component = 'checkbox', items = [] } = settings;
   const [checkedState, setCheckedState] = React.useState(new Array(items.length).fill(false));
+  const idPrefix = React.useId();
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
@@ -51,6 +52,7 @@ export function Reasons({ settings, onChange, className }: ReasonsProps): JSX.El
       {items.map((reason, idx) => (
         <OptionWrapper key={reason}>
           <input
+            id={`${idPrefix}-${idx}`}
             type={component}
             value={reason}
             checked={checkedState[idx]}
@@ -59,8 +61,7 @@ export function Reasons({ settings, onChange, className }: ReasonsProps): JSX.El
           />
           <label
             data-translation-key={`feedback.settings.reasons.items.${idx + 1}`}
-            id={reason}
-            onClick={() => handleOptionChange(idx)}
+            htmlFor={`${idPrefix}-${idx}`}
           >
             {translate(`feedback.settings.reasons.items.${idx + 1}`, reason)}
           </label>

package/src/components/Filter/FilterCheckboxes.tsx

@@ -30,26 +30,24 @@ export function FilterCheckboxes({
       <FilterOptions>
         {(filter.filteredOptions || filter.options).map(({ value, count }) => {
           const id = 'filter--' + filter.property + '--' + value;
+          const checked =
+            filter.selectedOptions instanceof Set
+              ? filter.selectedOptions.has(value) ||
+                filter.selectedOptions.has(value?.toLowerCase())
+              : false;
           return (
-            <FilterCheckboxOption
-              key={id}
-              role="link"
-              onClick={() => {
-                filter.toggleOption(value);
-                telemetry.sendFilterCheckboxToggledMessage([
-                  getBaseDataAttributes('filterId', 'checkbox'),
-                ]);
-              }}
-            >
-              <CheckboxIcon
-                checked={
-                  filter.selectedOptions instanceof Set
-                    ? filter.selectedOptions.has(value) ||
-                      filter.selectedOptions.has(value?.toLowerCase())
-                    : false
-                }
-              />
+            <FilterCheckboxOption key={id}>
+              <CheckboxIcon checked={checked} />
               <FilterOptionLabel data-translation-key={value}>
+                <FilterCheckboxInput
+                  checked={checked}
+                  onChange={() => {
+                    filter.toggleOption(value);
+                    telemetry.sendFilterCheckboxToggledMessage([
+                      getBaseDataAttributes('filterId', 'checkbox'),
+                    ]);
+                  }}
+                />
                 {changeTextCasing(translate(value), filterValuesCasing)}
               </FilterOptionLabel>
               {showCounter && <CounterTag borderless>{count}</CounterTag>}
@@ -63,6 +61,23 @@ export function FilterCheckboxes({
 
 const FilterCheckboxOption = styled(FilterOption)`
   padding-left: var(--filter-option-checkbox-padding-left);
+
+  &:has(input:focus-visible) {
+    outline: 1px solid var(--button-border-color-focused);
+    outline-offset: -1px;
+  }
+`;
+
+const FilterCheckboxInput = styled.input.attrs({ type: 'checkbox' })`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
 `;
 
 const FilterCheckboxesWrapper = styled.div`

package/src/components/Filter/FilterDateRange.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
@@ -11,6 +11,7 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { formatDateWithoutTimeZone } from '@redocly/theme/core/utils';
 
 export function FilterDateRange({ filter }: FilterProps): JSX.Element {
+  const [today] = useState(() => new Date());
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
@@ -33,7 +34,7 @@ export function FilterDateRange({ filter }: FilterProps): JSX.Element {
               monthPlaceholder="MM"
               yearPlaceholder="YYYY"
               value={from}
-              maxDate={new Date()}
+              maxDate={today}
               onChange={(from) => {
                 if (Array.isArray(from)) return;
                 filter.selectOption({

package/src/components/Image/Image.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 
-import type { KeyboardEvent, JSX } from 'react';
+import type { KeyboardEvent, JSX, MouseEvent } from 'react';
 
 import { parseSrcSet, parseStyleString } from '@redocly/theme/core/utils';
 import { useModalScrollLock } from '@redocly/theme/core/hooks';
@@ -42,6 +42,7 @@ export function Image(props: ImageProps): JSX.Element {
   } = props;
 
   const lightboxContainerRef = useRef<HTMLDivElement>(null);
+  const lightboxTriggerRef = useRef<HTMLElement | null>(null);
   const [lightboxImage, setLightboxImage] = useState<string | undefined>(undefined);
   const parsedSourceSetMap = useMemo(() => {
     return srcSet ? parseSrcSet(srcSet) : new Map();
@@ -55,15 +56,32 @@ export function Image(props: ImageProps): JSX.Element {
   }, []);
 
   const handleImageClick = useCallback(
-    (src: string) => {
+    (src: string, trigger: HTMLElement) => {
       if (!withLightbox || lightboxImage) {
         return;
       }
+      lightboxTriggerRef.current = trigger;
       setLightboxImage(src);
     },
     [withLightbox, lightboxImage],
   );
 
+  const getLightboxTriggerProps = (imageSrc: string) =>
+    withLightbox
+      ? {
+          role: 'button',
+          tabIndex: 0,
+          'aria-label': alt ? undefined : 'Open image',
+          onClick: (e: MouseEvent<HTMLElement>) => handleImageClick(imageSrc, e.currentTarget),
+          onKeyDown: (e: KeyboardEvent<HTMLElement>) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              handleImageClick(imageSrc, e.currentTarget);
+            }
+          },
+        }
+      : {};
+
   const handleCloseLightbox = useCallback(() => {
     setLightboxImage(undefined);
   }, []);
@@ -72,6 +90,9 @@ export function Image(props: ImageProps): JSX.Element {
   useEffect(() => {
     if (lightboxImage) {
       lightboxContainerRef.current?.focus();
+    } else {
+      lightboxTriggerRef.current?.focus();
+      lightboxTriggerRef.current = null;
     }
   }, [lightboxImage]);
 
@@ -92,7 +113,7 @@ export function Image(props: ImageProps): JSX.Element {
       width={width}
       height={height}
       style={combinedStyles}
-      onClick={() => handleImageClick(src)}
+      {...getLightboxTriggerProps(src)}
     />
   ) : (
     Array.from(parsedSourceSetMap).map(([key, value]) => (
@@ -106,7 +127,7 @@ export function Image(props: ImageProps): JSX.Element {
         height={height}
         $withLightbox={withLightbox}
         style={combinedStyles}
-        onClick={() => handleImageClick(value)}
+        {...getLightboxTriggerProps(value)}
       />
     ))
   );
@@ -122,7 +143,7 @@ export function Image(props: ImageProps): JSX.Element {
           src={galleryImageSrc}
           alt={alt}
           style={withLightbox ? { cursor: 'pointer' } : undefined}
-          onClick={() => handleImageClick(galleryImageSrc)}
+          {...getLightboxTriggerProps(galleryImageSrc)}
         />
       ))}
     </GalleryRow>