@redocly/theme 0.74.2-pingfed.3 → 0.81.2-rc.2

package/src/core/constants/common.ts

@@ -0,0 +1,25 @@
+export { REDOCLY_TEAMS_RBAC } from '@redocly/config';
+export const DEFAULT_LOCALE_PLACEHOLDER = 'default_locale';
+
+export enum FEEDBACK_TYPES {
+  RATING = 'rating',
+  SENTIMENT = 'sentiment',
+  COMMENT = 'comment',
+  MOOD = 'mood',
+  PROBLEM = 'problem',
+  SCALE = 'scale',
+}
+
+export enum MenuItemType {
+  Separator = 'separator',
+  DrillDown = 'drilldown',
+  Group = 'group',
+  Operation = 'operation',
+  Default = 'default',
+}
+
+export enum MobileMenuType {
+  MAIN_MENU = 'MAIN_MENU',
+  PRODUCT = 'PRODUCT',
+  PAGE = 'PAGE',
+}

package/src/core/constants/environments.ts

@@ -0,0 +1,9 @@
+export enum SecurityVariablesEnvSuffix {
+  BasicAuthUsername = '_username',
+  BasicAuthPassword = '_password',
+  JWTToken = '_token',
+  APIKey = '',
+  OAuth2Token = '_token',
+  OAuth2ClientId = '_client_id',
+  OAuth2ClientSecret = '_client_secret',
+}

package/src/core/constants/index.ts

@@ -0,0 +1,2 @@
+export * from '@redocly/theme/core/constants/common';
+export * from '@redocly/theme/core/constants/environments';

package/src/core/contexts/ThemeDataContext.tsx

@@ -0,0 +1,15 @@
+import { createContext } from 'react';
+
+import type { ThemeHooks } from '@redocly/theme/core/types';
+import type { LinkProps } from '@redocly/theme/components/Link/Link';
+import type { ThemeUIConfig } from '@redocly/theme/config';
+
+export interface ThemeDataTransferObject {
+  hooks: ThemeHooks;
+  components: {
+    LinkComponent: (props: React.PropsWithChildren<LinkProps>) => JSX.Element;
+  };
+  themeConfig: ThemeUIConfig;
+}
+
+export const ThemeDataContext = createContext<ThemeDataTransferObject | null>(null);

package/src/core/contexts/index.ts

@@ -0,0 +1 @@
+export * from '@redocly/theme/core/contexts/ThemeDataContext';

package/src/core/hoc/index.ts

@@ -0,0 +1 @@
+export * from '@redocly/theme/core/hoc/typedMemo';

package/src/core/hoc/typedMemo.ts

@@ -0,0 +1,3 @@
+import { memo } from 'react';
+
+export const typedMemo: <T>(c: T) => T = memo;

package/src/core/hooks/__mocks__/index.ts

@@ -0,0 +1,24 @@
+export * from '@redocly/theme/core/hooks/__mocks__/use-theme-config';
+export * from '@redocly/theme/core/hooks/__mocks__/use-theme-hooks';
+export * from '@redocly/theme/core/hooks/__mocks__/use-mobile-menu';
+export * from '@redocly/theme/core/hooks/__mocks__/use-controlled-state';
+export * from '@redocly/theme/core/hooks/__mocks__/search/use-recent-searches';
+export * from '@redocly/theme/core/hooks/__mocks__/search/use-suggested-pages';
+export * from '@redocly/theme/core/hooks/menu/__mocks__/use-mobile-menu-items';
+export * from '@redocly/theme/core/hooks/menu/use-collapse';
+export * from '@redocly/theme/core/hooks/use-active-heading';
+export * from '@redocly/theme/core/hooks/use-control';
+export * from '@redocly/theme/core/hooks/use-dialog-hotkeys';
+export * from '@redocly/theme/core/hooks/use-full-height';
+export * from '@redocly/theme/core/hooks/use-modal-scroll-lock';
+export * from '@redocly/theme/core/hooks/use-mount';
+export * from '@redocly/theme/core/hooks/use-outside-click';
+export * from '@redocly/theme/core/hooks/use-unmount';
+export * from '@redocly/theme/core/hooks/use-color-switcher';
+export * from '@redocly/theme/core/hooks/menu/use-nested-menu';
+export * from '@redocly/theme/core/hooks/menu/use-menu-item-expanded';
+export * from '@redocly/theme/core/hooks/menu/use-mobile-menu-levels';
+export * from '@redocly/theme/core/hooks/feedback/use-report-dialog';
+export * from '@redocly/theme/core/hooks/use-product-picker';
+export * from '@redocly/theme/core/hooks/use-search';
+export * from '@redocly/theme/core/hooks/use-language-picker';

package/src/core/hooks/__mocks__/search/use-recent-searches.ts

@@ -0,0 +1,8 @@
+export const useRecentSearches = jest.fn(() => {
+  const items = ['test'];
+  return {
+    items,
+    addSearchHistoryItem: (value: string) => value,
+    removeSearchHistoryItem: (value: string) => value,
+  };
+});

package/src/core/hooks/__mocks__/search/use-suggested-pages.ts

@@ -0,0 +1,8 @@
+export const useSuggestedPages = jest.fn(() => {
+  return [
+    {
+      link: '/',
+      label: 'some page',
+    },
+  ];
+});

package/src/core/hooks/__mocks__/use-controlled-state.ts

@@ -0,0 +1 @@
+export const useControlledState = () => [false, jest.fn()];

package/src/core/hooks/__mocks__/use-mobile-menu.ts

@@ -0,0 +1 @@
+export const useMobileMenu = () => [false, jest.fn];

package/src/core/hooks/__mocks__/use-theme-config.ts

@@ -0,0 +1,8 @@
+export const useThemeConfig = jest.fn(() => ({
+  userMenu: {
+    items: [],
+  },
+  codeSnippet: {
+    elementFormat: 'icon',
+  },
+}));

package/src/core/hooks/__mocks__/use-theme-hooks.ts

@@ -0,0 +1,75 @@
+export const useThemeHooks = jest.fn(() => ({
+  useTranslate: jest.fn(() => ({
+    translate: jest.fn((key: string, defaultValue: string) =>
+      defaultValue
+        ? typeof defaultValue !== 'string'
+          ? (defaultValue as any).defaultValue
+          : defaultValue
+        : key,
+    ),
+  })),
+  useTelemetry: jest.fn(() => ({
+    send: jest.fn(),
+  })),
+  useBreadcrumbs: jest.fn().mockReturnValue([]),
+  usePageSharedData: jest.fn().mockReturnValue({}),
+  useCatalog: jest.fn(() => ({
+    groups: [],
+    filters: [],
+    filterTerm: '',
+    setFilterTerm: jest.fn(),
+  })),
+  useI18n: jest.fn(() => ({
+    changeLanguage: jest.fn(),
+  })),
+  useI18nConfig: jest.fn(() => ({
+    currentLocale: 'en',
+    defaultLocale: 'en',
+    locales: [
+      { code: 'en', name: 'English' },
+      { code: 'fr', name: 'France' },
+      { code: 'uk', name: 'Ukraine' },
+    ],
+  })),
+  usePreloadHistory: jest.fn(() => ({
+    push: jest.fn(),
+  })),
+  useCurrentProduct: jest.fn(),
+  useProducts: jest.fn(() => []),
+  useFuseSearch: jest.fn(() => ({
+    query: jest.fn().mockReturnValue(''),
+    setQuery: jest.fn(),
+    items: [],
+    isLoading: false,
+  })),
+  useUserMenu: jest.fn(() => ({
+    userData: {
+      isAuthenticated: true,
+      name: 'test-name',
+      email: 'test-email@test.xyz',
+      picture: 'picture',
+    },
+    handleLogout: jest.fn(),
+    loginUrl: 'https://login.redoc.ly',
+    hasDeveloperOnboarding: true,
+  })),
+  usePageVersions: jest.fn(),
+  useSidebarItems: jest.fn().mockReturnValue({
+    currentItems: [
+      {
+        label: 'Item',
+      },
+    ],
+    allSidebarItems: [
+      {
+        label: 'Item',
+      },
+    ],
+    popDrilldownState: jest.fn(),
+    pushDrilldownState: jest.fn(),
+  }),
+  useSidebarSiblingsData: jest.fn(),
+  useSubmitFeedback: jest.fn(() => ({
+    submitFeedback: jest.fn(),
+  })),
+}));

package/src/core/hooks/feedback/use-report-dialog.ts

@@ -0,0 +1,56 @@
+import { useState } from 'react';
+
+import type { ReportDialogProps } from '@redocly/theme/components/Feedback/ReportDialog';
+
+import { useThemeHooks, useThemeConfig } from '@redocly/theme/core/hooks';
+
+export type ReportButtonProps = {
+  onClick: () => void;
+  buttonText: string;
+  tooltip: string;
+  hide: boolean;
+};
+type ReportComponentsProps = {
+  visible?: boolean;
+  props: Partial<ReportDialogProps> | ReportButtonProps;
+};
+
+export function useReportDialog(): Record<string, ReportComponentsProps> {
+  const { codeSnippet: { report = {} } = {} } = useThemeConfig();
+  const [isReportDialogShown, setIsReportDialogShown] = useState(false);
+  const { tooltipText, buttonText, label } = report;
+  const { useTranslate, useSubmitFeedback } = useThemeHooks();
+  const { translate } = useTranslate();
+  const { submitFeedback } = useSubmitFeedback();
+
+  const showReportDialog = () => {
+    setIsReportDialogShown(true);
+  };
+  const hideReportDialog = () => {
+    setTimeout(function () {
+      setIsReportDialogShown(false);
+    }, 1000);
+  };
+  const closeReportDialog = () => {
+    setIsReportDialogShown(false);
+  };
+  const reportButtonProps: ReportButtonProps = {
+    onClick: showReportDialog,
+    buttonText: buttonText || translate('theme.codeSnippet.report.buttonText', 'Report'),
+    tooltip: tooltipText || translate('theme.codeSnippet.report.tooltipText', 'Report a problem'),
+    hide: report?.hide === true,
+  };
+  const reportDialogProps: Partial<ReportDialogProps> = {
+    settings: {
+      label: label || translate('theme.codeSnippet.report.label', 'What is wrong with this code?'),
+    },
+    onSubmit: hideReportDialog,
+    onCancel: closeReportDialog,
+    submitFeedback,
+  };
+
+  return {
+    reportDialog: { visible: isReportDialogShown, props: reportDialogProps },
+    reportButton: { props: reportButtonProps },
+  };
+}

package/src/core/hooks/index.ts

@@ -0,0 +1,29 @@
+export * from '@redocly/theme/core/hooks/use-theme-config';
+export * from '@redocly/theme/core/hooks/use-control';
+export * from '@redocly/theme/core/hooks/use-mount';
+export * from '@redocly/theme/core/hooks/use-unmount';
+export * from '@redocly/theme/core/hooks/use-active-heading';
+export * from '@redocly/theme/core/hooks/use-active-section-id';
+export * from '@redocly/theme/core/hooks/use-dialog-hotkeys';
+export * from '@redocly/theme/core/hooks/use-full-height';
+export * from '@redocly/theme/core/hooks/use-navbar-height';
+export * from '@redocly/theme/core/hooks/use-outside-click';
+export * from '@redocly/theme/core/hooks/use-theme-hooks';
+export * from '@redocly/theme/core/hooks/use-mobile-menu';
+export * from '@redocly/theme/core/hooks/use-modal-scroll-lock';
+export * from '@redocly/theme/core/hooks/use-color-switcher';
+export * from '@redocly/theme/core/hooks/search/use-recent-searches';
+export * from '@redocly/theme/core/hooks/search/use-suggested-pages';
+export * from '@redocly/theme/core/hooks/menu/use-nested-menu';
+export * from '@redocly/theme/core/hooks/menu/use-menu-item-expanded';
+export * from '@redocly/theme/core/hooks/menu/use-mobile-menu-items';
+export * from '@redocly/theme/core/hooks/menu/use-mobile-menu-levels';
+export * from '@redocly/theme/core/hooks/menu/use-collapse';
+export * from '@redocly/theme/core/hooks/feedback/use-report-dialog';
+export * from '@redocly/theme/core/hooks/use-tabs';
+export * from '@redocly/theme/core/hooks/use-focus-trap';
+export * from '@redocly/theme/core/hooks/use-language-picker';
+export * from '@redocly/theme/core/hooks/use-product-picker';
+export * from '@redocly/theme/core/hooks/use-search';
+export * from '@redocly/theme/core/hooks/use-controlled-state';
+export * from '@redocly/theme/core/hooks/use-codeblock-tabs-controls';

package/src/core/hooks/menu/__mocks__/use-mobile-menu-items.ts

@@ -0,0 +1,30 @@
+export const useMobileMenuItems = jest.fn().mockReturnValue({
+  items: [
+    {
+      type: 'group',
+      label: 'New Section',
+      separatorLine: true,
+      items: [
+        {
+          type: 'operation',
+          label: 'New Section',
+          separatorLine: true,
+          items: [],
+          active: false,
+          hasActiveSubItem: false,
+          httpVerb: 'GET',
+        },
+        {
+          type: 'separator',
+          label: 'New Section',
+          separatorLine: true,
+          items: [],
+          active: false,
+          hasActiveSubItem: false,
+        },
+      ],
+      active: false,
+      hasActiveSubItem: false,
+    },
+  ],
+});

package/src/core/hooks/menu/use-collapse.ts

@@ -0,0 +1,212 @@
+/**
+ * Based on https://github.com/roginfarrer/collapsed/blob/main/packages/react-collapsed/src/index.ts
+ * Simplified for our usecase.
+ */
+
+import {
+  useState,
+  useRef,
+  useEffect,
+  useLayoutEffect as useReactLayoutEffect,
+  useCallback,
+} from 'react';
+
+import type React from 'react';
+import type { RefObject } from 'react';
+
+const useLayoutEffect = typeof window === 'undefined' ? useEffect : useReactLayoutEffect;
+
+export interface UseCollapseProps {
+  isExpanded?: boolean;
+  collapseElRef: React.RefObject<HTMLElement>;
+  onTransitionStateChange?: (
+    state:
+      | 'collapseEnd'
+      | 'expandEnd'
+      | 'collapseStart'
+      | 'expandStart'
+      | 'collapsing'
+      | 'expanding',
+  ) => void;
+}
+
+const easing = 'cubic-bezier(0.4, 0, 0.2, 1)';
+const collapsedHeight = `0px`;
+
+export function useCollapse({
+  isExpanded,
+  collapseElRef,
+  onTransitionStateChange: configOnTransitionStateChange = () => {},
+}: UseCollapseProps) {
+  const prevExpanded = useRef(isExpanded);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const onTransitionStateChange = useEvent(configOnTransitionStateChange);
+
+  // Animation frames
+  const frameId = useRef<number>();
+  const endFrameId = useRef<{ id?: number }>();
+
+  useLayoutEffect(() => {
+    const collapse = collapseElRef.current;
+    if (!collapse) return;
+
+    if (isExpanded === prevExpanded.current) return;
+    prevExpanded.current = isExpanded;
+
+    function getDuration(height: number | string) {
+      return getAutoHeightDuration(height);
+    }
+
+    const getTransitionStyles = (height: number | string) =>
+      `height ${getDuration(height)}ms ${easing}`;
+
+    const setTransitionEndTimeout = (duration: number) => {
+      function endTransition() {
+        if (isExpanded) {
+          setStyles(collapse, {
+            height: '',
+            overflow: '',
+            transition: '',
+            display: '',
+            pointerEvents: 'auto',
+          });
+          onTransitionStateChange('expandEnd');
+        } else {
+          setStyles(collapse, { transition: '', pointerEvents: '' });
+          onTransitionStateChange('collapseEnd');
+        }
+        setIsAnimating(false);
+      }
+
+      if (endFrameId.current) {
+        clearAnimationTimeout(endFrameId.current);
+      }
+      endFrameId.current = setAnimationTimeout(endTransition, duration);
+    };
+
+    setIsAnimating(true);
+
+    if (isExpanded) {
+      frameId.current = requestAnimationFrame(() => {
+        onTransitionStateChange('expandStart');
+        setStyles(collapse, {
+          display: 'block',
+          overflow: 'hidden',
+          pointerEvents: 'none',
+          height: collapsedHeight,
+        });
+        frameId.current = requestAnimationFrame(() => {
+          onTransitionStateChange('expanding');
+          const height = getElementHeight(collapseElRef);
+          setTransitionEndTimeout(getDuration(height));
+
+          if (collapseElRef.current) {
+            // Order is important! Setting directly.
+            collapseElRef.current.style.transition = getTransitionStyles(height);
+            collapseElRef.current.style.height = `${height}px`;
+          }
+        });
+      });
+    } else {
+      frameId.current = requestAnimationFrame(() => {
+        onTransitionStateChange('collapseStart');
+        const height = getElementHeight(collapseElRef);
+        setTransitionEndTimeout(getDuration(height));
+        setStyles(collapse, {
+          transition: getTransitionStyles(height),
+          height: `${height}px`,
+          pointerEvents: 'none',
+        });
+        frameId.current = requestAnimationFrame(() => {
+          onTransitionStateChange('collapsing');
+          setStyles(collapse, {
+            height: collapsedHeight,
+            overflow: 'hidden',
+          });
+        });
+      });
+    }
+
+    return () => {
+      if (frameId.current) cancelAnimationFrame(frameId.current);
+      if (endFrameId.current) clearAnimationTimeout(endFrameId.current);
+    };
+  }, [isExpanded, collapseElRef, onTransitionStateChange]);
+
+  return {
+    isExpanded,
+    style:
+      !isAnimating && !isExpanded
+        ? {
+            // collapsed and not animating
+            display: 'none',
+            height: collapsedHeight,
+            overflow: 'hidden',
+          }
+        : {},
+  };
+}
+
+// https://github.com/mui-org/material-ui/blob/da362266f7c137bf671d7e8c44c84ad5cfc0e9e2/packages/material-ui/src/styles/transitions.js#L89-L98
+export function getAutoHeightDuration(height: number | string): number {
+  if (!height || typeof height === 'string') {
+    return 0;
+  }
+
+  const constant = height / 36;
+  return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
+}
+
+export function getElementHeight(el: RefObject<HTMLElement>): number {
+  // scrollHeight will give us the height of the element, even if it's not visible.
+  // clientHeight, offsetHeight, nor getBoundingClientRect().height will do so
+  return el.current?.scrollHeight ?? 0;
+}
+
+export function setAnimationTimeout(callback: () => void, timeout: number) {
+  const startTime = performance.now();
+  const frame: { id?: number } = {};
+
+  function call() {
+    frame.id = requestAnimationFrame((now) => {
+      if (now - startTime > timeout) {
+        callback();
+      } else {
+        call();
+      }
+    });
+  }
+
+  call();
+  return frame;
+}
+
+export function clearAnimationTimeout(frame: { id?: number }) {
+  if (frame.id) cancelAnimationFrame(frame.id);
+}
+
+function setStyles<T extends Partial<CSSStyleDeclaration>>(
+  target: HTMLElement | null,
+  newStyles: T,
+) {
+  if (!target) return;
+  for (const property in newStyles) {
+    const value = newStyles[property];
+    if (value) {
+      target.style[property] = value;
+    } else {
+      target.style.removeProperty(property);
+    }
+  }
+}
+
+export function useEvent<T extends (...args: any[]) => any>(callback?: T) {
+  const ref = useRef<T | undefined>(callback);
+
+  useEffect(() => {
+    ref.current = callback;
+  });
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return useCallback(((...args: any) => ref.current?.(...args)) as T, []);
+}

package/src/core/hooks/menu/use-menu-item-expanded.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+
+import type { Dispatch, SetStateAction } from 'react';
+import type { ItemState } from '@redocly/theme/core/types';
+
+function isItemExpanded(item: ItemState) {
+  return (
+    item.active || item.hasActiveSubItem || item.expanded === 'true' || item.expanded === 'always'
+  );
+}
+
+export function useMenuItemExpanded(item: ItemState): [boolean, Dispatch<SetStateAction<boolean>>] {
+  const [isExpanded, setIsExpanded] = useState(isItemExpanded(item));
+  // we keep separate controlled value here so controlled updates have the same lifecycle as uncontrolled (via useEffect)
+  // it's important for transitions
+  const [controlledValue, setControlledValue] = useState(isItemExpanded(item));
+
+  useEffect(() => {
+    setIsExpanded(controlledValue);
+  }, [controlledValue]);
+
+  useEffect(() => {
+    const newValue = isItemExpanded(item);
+    setIsExpanded(newValue);
+    setControlledValue(newValue);
+    // we have different sensitivity to changes for items from openapi-docs sidebar and for items from portal sidebar
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [!item.modified ? item : item.active, item.hasActiveSubItem, item.expanded]);
+
+  return [isExpanded, setControlledValue];
+}

package/src/core/hooks/menu/use-mobile-menu-items.ts

@@ -0,0 +1,110 @@
+import { useLocation } from 'react-router-dom';
+
+import type { ResolvedNavItem } from '@redocly/config';
+
+import { useThemeHooks, useThemeConfig } from '@redocly/theme/core/hooks';
+import { MobileMenuType } from '@redocly/theme/core/constants';
+import {
+  buildLanguagesGroup,
+  buildVersionSection,
+  mapNavbarItems,
+} from '@redocly/theme/core/utils';
+
+const MENU_SEPARATOR: ResolvedNavItem = {
+  type: 'separator',
+  separatorLine: true,
+};
+
+export const useMobileMenuItems = (menuType: MobileMenuType) => {
+  const { useTranslate, useI18nConfig, useCurrentProduct, usePageVersions, useSidebarItems } =
+    useThemeHooks();
+  const { versions = [] } = usePageVersions() || {};
+  const { defaultLocale, currentLocale, locales } = useI18nConfig();
+  const { translate } = useTranslate();
+  const activeVersion = versions.find((version) => version.active);
+  const {
+    currentItems: sidebarItems,
+    pushDrilldownState,
+    popDrilldownState,
+    backLink,
+  } = useSidebarItems(activeVersion);
+  const location = useLocation();
+
+  const currentProduct = useCurrentProduct();
+  const hasProductNavbarOverride = currentProduct?.themeOverride?.navbar;
+
+  const productThemeConfig = useThemeConfig();
+  const baseThemeConfig = useThemeConfig(false);
+
+  const baseNavItems = (baseThemeConfig.navbar?.items || []) as ResolvedNavItem[];
+  const productNavItems = (
+    hasProductNavbarOverride ? productThemeConfig.navbar?.items || [] : []
+  ) as ResolvedNavItem[];
+
+  const menuItems: ResolvedNavItem[] = [];
+
+  if (menuType === MobileMenuType.PAGE) {
+    if (activeVersion) {
+      // TODO: consider to refactor
+      const versionsSection = buildVersionSection(translate, versions, activeVersion);
+      menuItems.push(...versionsSection);
+    }
+    if (menuItems.length && sidebarItems.length) {
+      menuItems.push(MENU_SEPARATOR);
+    }
+    menuItems.push(...(sidebarItems as ResolvedNavItem[]));
+  } else if (menuType === MobileMenuType.PRODUCT) {
+    menuItems.push(...productNavItems);
+
+    if (menuItems.length && baseNavItems.length) {
+      menuItems.push(MENU_SEPARATOR);
+    }
+
+    if (baseNavItems.length) {
+      menuItems.push(...baseNavItems);
+    }
+  } else if (menuType === MobileMenuType.MAIN_MENU) {
+    const productMenuItems: ResolvedNavItem[] = Object.values(baseThemeConfig.products || {}).map(
+      (product) => ({
+        label: product.name,
+        link: product.link,
+        icon: product.icon,
+        type: 'link',
+      }),
+    );
+
+    if (productMenuItems.length) {
+      menuItems.push({
+        type: 'separator',
+        label: translate('theme.mobileMenu.products', 'Products'),
+      });
+
+      menuItems.push(...productMenuItems);
+    }
+
+    if (menuItems.length && baseNavItems.length) {
+      menuItems.push(MENU_SEPARATOR);
+    }
+
+    if (baseNavItems.length) {
+      menuItems.push(...baseNavItems);
+    }
+  }
+
+  const languagesMenu = buildLanguagesGroup(locales, defaultLocale, currentLocale);
+
+  if (menuItems.length && languagesMenu) {
+    menuItems.push(MENU_SEPARATOR);
+  }
+
+  if (languagesMenu) {
+    menuItems.push(languagesMenu);
+  }
+
+  return {
+    items: mapNavbarItems(menuItems, defaultLocale, currentLocale, locales, location),
+    popDrilldownState,
+    pushDrilldownState,
+    backLink,
+  };
+};