@redocly/theme 0.4.7 → 0.4.8

package/src/Markdown/Admonition.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import styled from 'styled-components';
+import type { PropsWithChildren } from 'react';
 
 import { AlertIcon } from '@theme/icons/AlertIcon/AlertIcon';
 
@@ -15,7 +15,7 @@ export function Admonition({
   type = 'info',
   name,
   children,
-}: React.PropsWithChildren<AdmonitionProps>): JSX.Element {
+}: PropsWithChildren<AdmonitionProps>): JSX.Element {
   return (
     <Wrapper type={type} data-component-name="Markdown/Admonition">
       <AlertIcon type={type} />

package/src/Markdown/CodeSample/CodeSample.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import styled, { css } from 'styled-components';
 
 import { ClipboardService } from '@theme/utils/ClipboardService';

package/src/Markdown/Details.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
 import styled from 'styled-components';
+import type { PropsWithChildren } from 'react';
 
 type DetailsProps = {
   summary: string;
 };
 
-export function Details({ summary, children }: React.PropsWithChildren<DetailsProps>): JSX.Element {
+export function Details({ summary, children }: PropsWithChildren<DetailsProps>): JSX.Element {
   return (
     <StyledDetails>
       <summary>{summary}</summary>

package/src/Markdown/Heading.tsx

@@ -1,4 +1,5 @@
-import React, { createElement, PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
+import { createElement } from 'react';
 
 import { concatClassNames } from '@theme/utils';
 

package/src/Markdown/MarkdownLayout.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import styled from 'styled-components';
+import type { ReactNode } from 'react';
 
 import { PageWrapper } from '@theme/Markdown/PageWrapper';
 import { ContainerWrapper } from '@theme/Markdown/ContainerWrapper';
@@ -8,8 +8,8 @@ import { EditPageButton } from '@theme/EditPageButton';
 import { LastUpdated } from '@theme/LastUpdated/LastUpdated';
 
 type MarkdownLayoutProps = {
-  tableOfContent: React.ReactNode;
-  markdownWrapper: React.ReactNode;
+  tableOfContent: ReactNode;
+  markdownWrapper: ReactNode;
   showPrevButton?: boolean;
   showNextButton?: boolean;
   editPage?: {

package/src/Markdown/MarkdownWrapper.tsx

@@ -1,4 +1,5 @@
-import styled, { css, FlattenSimpleInterpolation } from 'styled-components';
+import type { FlattenSimpleInterpolation } from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import { typography } from '@theme/utils';
 

package/src/Markdown/Mermaid.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 
 type MermaidProps = {

package/src/Markdown/Sup.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import styled from 'styled-components';
 
 export function Sup({ children }: PropsWithChildren<unknown>): JSX.Element {

package/src/Markdown/Tabs/Tab.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 
 type TabProps = {

package/src/Markdown/Tabs/Tabs.tsx

@@ -1,4 +1,5 @@
-import React, { useState, PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
+import { useState } from 'react';
 import styled from 'styled-components';
 
 import { Tab } from '@theme/Markdown/Tabs/Tab';
@@ -38,7 +39,6 @@ const TabList = styled.ol`
 `;
 
 const TabContent = styled.div`
-  padding: 10px 5px;
   border: 1px solid #ccc;
   border-top: none;
   padding: 1rem;

package/src/Navbar/MobileNavbarDropdown.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 
 import type { ResolvedNavLinkItem } from '@theme/types/portal';

package/src/Navbar/MobileNavbarItem.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import styled from 'styled-components';
 import { useLocation } from 'react-router-dom';
 

package/src/Navbar/MobileNavbarMenu.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 
 import type { ResolvedConfigLinks, ResolvedNavItem } from '@theme/types/portal';

package/src/Navbar/Navbar.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
 import styled from 'styled-components';
+import type { ReactNode } from 'react';
+
+import type { ResolvedConfigLinks } from '@theme/types/portal';
 
 import { useThemeSettings } from '@portal/hooks';
 import { DEFAULT_THEME_NAME } from '@portal/constants';
-import { ResolvedConfigLinks } from '@theme/types/portal';
 import { NavbarMenu } from '@theme/Navbar';
 import { useMobileMenu } from '@theme/hooks/useMobileMenu';
 import { MobileNavbarMenuButton } from '@theme/Navbar/MobileNavbarMenuButton';
@@ -12,9 +13,9 @@ import { ColorModeSwitcher } from '@theme/ColorModeSwitcher/ColorModeSwitcher';
 
 interface NavbarProps {
   menu: ResolvedConfigLinks;
-  logo: React.ReactNode;
-  search: React.ReactNode;
-  profile?: React.ReactNode;
+  logo: ReactNode;
+  search: ReactNode;
+  profile?: ReactNode;
 }
 
 export function Navbar({ menu, logo, search, profile }: NavbarProps): JSX.Element | null {

package/src/Navbar/NavbarDropdown.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 
 import type { ResolvedNavLinkItem } from '@theme/types/portal';

package/src/Navbar/NavbarItem.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 import { useLocation } from 'react-router-dom';
 

package/src/Navbar/NavbarMenu.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 
 import type { ResolvedConfigLinks, ResolvedNavItem } from '@theme/types/portal';

package/src/NavbarLogo/NavbarLogo.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
 import styled from 'styled-components';
 
+import type { LogoConfig } from '@theme/types/portal';
+
 import { Link } from '@portal/Link';
-import { LogoConfig } from '@theme/types/portal';
 
 export type NavbarLogoProps = { logo: Pick<LogoConfig, 'image' | 'link' | 'altText'> };
 

package/src/PageNavigation/NextPageLink.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 
 import type { ResolvedNavItemWithLink } from '@theme/types/portal';

package/src/PageNavigation/PageNavigation.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 
 import { PreviousPageLink } from '@theme/PageNavigation/PreviousPageLink';

package/src/PageNavigation/PreviousPageLink.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 
 import type { ResolvedNavItemWithLink } from '@theme/types/portal';

package/src/Panel/PanelComponent.tsx

@@ -1,15 +1,12 @@
-import React, {
-  BaseSyntheticEvent,
-  PropsWithChildren,
-  ReactNode,
-  useEffect,
-  useState,
-} from 'react';
+import type { BaseSyntheticEvent, PropsWithChildren, ReactNode } from 'react';
+import { useEffect, useState } from 'react';
 import styled from 'styled-components';
 
+import type { PanelHeaderProps } from '@theme/Panel/PanelHeader';
+
 import { ShelfIcon } from '@theme/icons';
 import { PanelBody } from '@theme/Panel/PanelBody';
-import { PanelHeader, PanelHeaderProps } from '@theme/Panel/PanelHeader';
+import { PanelHeader } from '@theme/Panel/PanelHeader';
 import { PanelHeaderTitle } from '@theme/Panel/PanelHeaderTitle';
 
 export interface PanelComponentProps {
@@ -18,7 +15,7 @@ export interface PanelComponentProps {
   renderChildrenHidden?: boolean;
   header?: ReactNode | ((props: PanelHeaderProps) => ReactNode);
   onToggle?: (expanded: boolean) => void;
-  description?: React.ReactNode;
+  description?: ReactNode;
 }
 
 export function PanelComponent({

package/src/Panel/PanelHeader.ts

@@ -1,4 +1,4 @@
-import { BaseSyntheticEvent } from 'react';
+import type { BaseSyntheticEvent } from 'react';
 import styled from 'styled-components';
 
 export interface PanelHeaderProps {

package/src/Profile/Profile.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 import styled, { css } from 'styled-components';
 
 import { stringToHslColor } from '@theme/utils';

package/src/Search/Autocomplete.tsx

@@ -1,11 +1,5 @@
-import React, {
-  ChangeEvent,
-  KeyboardEvent,
-  ReactNode,
-  SyntheticEvent,
-  useEffect,
-  useState,
-} from 'react';
+import type { ChangeEvent, KeyboardEvent, ReactNode, SyntheticEvent } from 'react';
+import { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 

package/src/Search/ClearIcon.tsx

@@ -1,4 +1,4 @@
-import React, { SVGProps } from 'react';
+import type { SVGProps } from 'react';
 import styled from 'styled-components';
 
 const Icon = (props: SVGProps<SVGSVGElement>) => (

package/src/Search/Parameters.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 
 import type { OperationParameter } from '@portal/types';

package/src/Search/Search.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 
 import { usePreloadHistory } from '@portal/usePreloadHistory';

package/src/Search/SearchIcon.tsx

@@ -1,4 +1,4 @@
-import React, { SVGProps } from 'react';
+import type { SVGProps } from 'react';
 import styled from 'styled-components';
 
 const Icon = (props: SVGProps<SVGSVGElement>) => (

package/src/Search/SearchItem.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 
 import type { ActiveItem, SearchDocument } from '@portal/types';

package/src/Search/utils.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import styled from 'styled-components';
 
 export const highlight = (text: string | string[]): JSX.Element | string => {

package/src/Sidebar/ApiCallItem.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
 import styled from 'styled-components';
 
+import type { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
+
 import { OperationBadge } from '@theme/OperationBadge';
-import { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
 import { MenuLinkItem } from '@theme/Sidebar/MenuLinkItem';
 import { SeparatorLine } from '@theme/Sidebar/SeparatorLine';
 import { MenuItemLabel } from '@theme/Sidebar/MenuItemLabel';

package/src/Sidebar/ArrowBack.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 
 const Arrow = ({ className }: { className?: string }): JSX.Element => (

package/src/Sidebar/BackButton.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import styled from 'styled-components';
+import type { PropsWithChildren } from 'react';
 
 import { ArrowBack } from '@theme/Sidebar/ArrowBack';
 
@@ -7,10 +7,7 @@ interface BackButtonProps {
   back: () => void;
 }
 
-export function BackButton({
-  children,
-  back,
-}: React.PropsWithChildren<BackButtonProps>): JSX.Element {
+export function BackButton({ children, back }: PropsWithChildren<BackButtonProps>): JSX.Element {
   return (
     <Button onClick={back} data-component-name="Sidebar/BackButton">
       <ArrowBack />

package/src/Sidebar/Drilldown.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
 import styled from 'styled-components';
+import type { PropsWithChildren } from 'react';
+
+import type { DrilldownMenuProps } from '@theme/Sidebar/types/DrilldownMenuProps';
 
 import { MenuItemLabel } from '@theme/Sidebar/MenuItemLabel';
 import { SeparatorLine } from '@theme/Sidebar/SeparatorLine';
 import { DrilldownMenuItem } from '@theme/Sidebar/DrilldownMenuItem';
 import { DrilldownMenu } from '@theme/Sidebar/DrilldownMenu';
-import { DrilldownMenuProps } from '@theme/Sidebar/types/DrilldownMenuProps';
 
 interface DrilldownProps extends DrilldownMenuProps {
   isExpanded: boolean;
@@ -17,7 +18,7 @@ export function Drilldown({
   item,
   expand,
   ...props
-}: React.PropsWithChildren<DrilldownProps>): JSX.Element {
+}: PropsWithChildren<DrilldownProps>): JSX.Element {
   return (
     <Wrapper data-component-name="Sidebar/Drilldown">
       <DrilldownLabel onClick={expand}>

package/src/Sidebar/DrilldownMenu.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
 import styled, { keyframes } from 'styled-components';
+import type { PropsWithChildren } from 'react';
+
+import type { DrilldownMenuProps } from '@theme/Sidebar/types/DrilldownMenuProps';
 
-import { DrilldownMenuProps } from '@theme/Sidebar/types/DrilldownMenuProps';
 import { BackButton } from '@theme/Sidebar/BackButton';
 import { DrilldownMenuItem } from '@theme/Sidebar/DrilldownMenuItem';
 
@@ -10,7 +11,7 @@ export function DrilldownMenu({
   back,
   prevActiveItem,
   children,
-}: React.PropsWithChildren<DrilldownMenuProps>): JSX.Element {
+}: PropsWithChildren<DrilldownMenuProps>): JSX.Element {
   return (
     <MenuContainer data-component-name="Sidebar/DrilldownMenu">
       <MenuContent>

package/src/Sidebar/DrilldownMenuItem.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
 import styled from 'styled-components';
 
-import { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
+import type { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
 
 export function DrilldownMenuItem({ item }: MenuItemProps): JSX.Element {
   return (

package/src/Sidebar/ExternalIcon.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 
 const Icon = ({ className }: { className?: string }): JSX.Element => (

package/src/Sidebar/MenuGroup.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
 import styled from 'styled-components';
+import type { PropsWithChildren } from 'react';
+
+import type { ItemState } from '@theme/Sidebar/types/ItemState';
 
 import { ArrowIcon } from '@theme/icons/ArrowIcon/ArrowIcon';
-import { ItemState } from '@theme/Sidebar/types/ItemState';
 import { MenuLinkItem } from '@theme/Sidebar/MenuLinkItem';
 import { MenuItemLabel } from '@theme/Sidebar/MenuItemLabel';
 import { SeparatorLine } from '@theme/Sidebar/SeparatorLine';
@@ -18,7 +19,7 @@ export function MenuGroup({
   isExpanded,
   toggleExpanded,
   children,
-}: React.PropsWithChildren<MenuGroupProps>): JSX.Element {
+}: PropsWithChildren<MenuGroupProps>): JSX.Element {
   return (
     <Wrapper data-component-name="Sidebar/MenuGroup">
       <MenuLinkItem item={item}>

package/src/Sidebar/MenuItem.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
 import styled from 'styled-components';
 
-import { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
+import type { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
+
 import { MenuLinkItem } from '@theme/Sidebar/MenuLinkItem';
 import { ExternalIcon } from '@theme/Sidebar/ExternalIcon';
 import { MenuItemLabel } from '@theme/Sidebar/MenuItemLabel';

package/src/Sidebar/MenuLink.tsx

@@ -1,6 +1,8 @@
 import styled from 'styled-components';
 
-import { UniversalLink, UniversalLinkProps } from '@theme/ui/UniversalLink';
+import type { UniversalLinkProps } from '@theme/ui/UniversalLink';
+
+import { UniversalLink } from '@theme/ui/UniversalLink';
 
 export const MenuLink = styled(UniversalLink).attrs(() => ({
   'data-component-name': 'Sidebar/MenuLink',

package/src/Sidebar/MenuLinkItem.tsx

@@ -1,13 +1,11 @@
-import React from 'react';
 import styled from 'styled-components';
+import type { PropsWithChildren } from 'react';
+
+import type { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
 
 import { MenuLink } from '@theme/Sidebar/MenuLink';
-import { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
 
-export function MenuLinkItem({
-  item,
-  children,
-}: React.PropsWithChildren<MenuItemProps>): JSX.Element {
+export function MenuLinkItem({ item, children }: PropsWithChildren<MenuItemProps>): JSX.Element {
   return (
     <Wrapper data-component-name="Sidebar/MenuLinkItem">
       {item.link ? (

package/src/Sidebar/Separator.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
 import styled from 'styled-components';
 
-import { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
+import type { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
+
 import { SeparatorLine } from '@theme/Sidebar/SeparatorLine';
 import { SeparatorItem } from '@theme/Sidebar/SeparatorItem';
 

package/src/Sidebar/SidebarLayout.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import styled from 'styled-components';
+import type { ReactNode } from 'react';
 
 import { Sidebar } from '@theme/Sidebar/Sidebar';
 import { useMobileMenu } from '@theme/hooks/useMobileMenu';
@@ -10,8 +10,8 @@ import { DEFAULT_THEME_NAME } from '@portal/constants';
 import { SidebarSearch } from '@theme/Search/SidebarSearch';
 
 interface SidebarLayoutProps {
-  versions: React.ReactNode;
-  menu: React.ReactNode;
+  versions: ReactNode;
+  menu: ReactNode;
 }
 
 export function SidebarLayout({ versions, menu }: SidebarLayoutProps): JSX.Element | null {

package/src/Sidebar/types/DrilldownMenuProps.ts

@@ -1,4 +1,4 @@
-import { ItemState } from '@theme/Sidebar/types/ItemState';
+import type { ItemState } from '@theme/Sidebar/types/ItemState';
 
 export interface DrilldownMenuProps {
   back: () => void;

package/src/Sidebar/types/ItemState.ts

@@ -1,5 +1,5 @@
-import { NavItem } from '@theme/Sidebar/types/NavItem';
-import { MenuStyle } from '@theme/Sidebar/types/MenuStyle';
+import type { NavItem } from '@theme/Sidebar/types/NavItem';
+import type { MenuStyle } from '@theme/Sidebar/types/MenuStyle';
 
 export interface ItemState extends NavItem {
   items: ItemState[];

package/src/Sidebar/types/MenuItemProps.ts

@@ -1,4 +1,4 @@
-import { ItemState } from '@theme/Sidebar/types/ItemState';
+import type { ItemState } from '@theme/Sidebar/types/ItemState';
 
 export interface MenuItemProps {
   item: ItemState;

package/src/Sidebar/types/NavItem.ts

@@ -1,4 +1,4 @@
-import { MenuStyle } from '@theme/Sidebar/types/MenuStyle';
+import type { MenuStyle } from '@theme/Sidebar/types/MenuStyle';
 
 export interface NavItem {
   label?: string;

package/src/SidebarLogo/SidebarLogo.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 
 export interface LogoProps {

package/src/SourceCode/SourceCode.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { highlight, addLineNumbers } from '@theme/utils';
 import {
@@ -17,6 +17,7 @@ export interface SourceCodeProps extends CommonCodeProps {
   lang: string;
   source?: string;
   externalSource?: ExternalSource;
+  onCopyClick?: () => void;
   withCopyButton?: boolean;
   dataTestId?: string;
 }
@@ -67,6 +68,7 @@ export function SourceCode({
   lang,
   source,
   externalSource,
+  onCopyClick,
   withCopyButton,
   dataTestId = 'source-code',
   withLineNumbers,
@@ -86,7 +88,11 @@ export function SourceCode({
 
   if (withCopyButton) {
     return (
-      <CopyButtonWrapper data={sourceCode} data-component-name="SourceCode/SourceCode">
+      <CopyButtonWrapper
+        data={sourceCode}
+        onCopyClick={onCopyClick}
+        data-component-name="SourceCode/SourceCode"
+      >
         {({ renderCopyButton }) => (
           <SampleControlsWrap>
             <SampleControls data-cy="copy-button">{renderCopyButton()}</SampleControls>

package/src/TableOfContent/TableOfContent.tsx

@@ -1,12 +1,13 @@
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import styled from 'styled-components';
 
+import type { MdHeading } from '@theme/types/portal';
+
 import { getDisplayedHeadingsIds, getDisplayedHeadings, getLeastDepth } from './utils';
 
 import { useFullHeight } from '@theme/hooks/useFullHeight';
 import { useThemeSettings } from '@portal/hooks';
 import { useActiveHeading } from '@theme/hooks/useActiveHeading';
-import { MdHeading } from '@theme/types/portal';
 import { DEFAULT_THEME_NAME } from '@portal/constants';
 
 interface TableOfContentProps {
@@ -85,13 +86,12 @@ const MenuItem = styled.a<{ depth: number }>`
   background-color: var(--toc-item-background-color);
   cursor: pointer;
   font-size: var(--toc-item-font-size);
-  font-family: var(--toc-item-font-family);
   padding: var(--toc-item-padding-vertical) var(--toc-item-padding-horizontal);
   padding-left: calc(var(--toc-item-nested-offset) * ${({ depth }) => depth});
   transition: background-color 0.3s, color 0.3s;
   text-decoration: none;
   word-break: break-word;
-  font-family: var(--heading-font-family);
+  font-family: var(--heading-font-family, var(--toc-item-font-family));
 
   :hover,
   &.active {

package/src/TableOfContent/utils.ts

@@ -1,4 +1,4 @@
-import { MdHeading } from '@theme/types/portal';
+import type { MdHeading } from '@theme/types/portal';
 
 export function getDisplayedHeadings(
   headings: Array<MdHeading | null> | null | undefined,
@@ -14,10 +14,7 @@ export function getDisplayedHeadings(
     if (idx === 0 && heading.depth === 1) {
       return false;
     }
-    if (heading.depth && heading.depth > tocMaxDepth) {
-      return false;
-    }
-    return true;
+    return !(heading.depth && heading.depth > tocMaxDepth);
   });
 }
 

package/src/Tooltip/Tooltip.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, memo, useRef } from 'react';
+import { useEffect, memo, useRef } from 'react';
 import styled, { css } from 'styled-components';
 import type { PropsWithChildren, ReactNode } from 'react';
 

package/src/hooks/useFullHeight.ts

@@ -1,4 +1,5 @@
-import { useCallback, useEffect, MutableRefObject, useMemo } from 'react';
+import type { MutableRefObject } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import throttle from 'lodash.throttle';
 
 export function useFullHeight(element: MutableRefObject<HTMLElement | null>): void {