gsadmin/gitbook
1
0
Fork 0
mirror of https://github.com/GitbookIO/gitbook.git synced 2026-09-16 15:45:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add SideSheet component, refactor TOC and AIChat to use it (#3835)

Browse Source
This commit is contained in:
Zeno Kapitein
2026-01-19 21:19:54 +01:00
committed by GitHub
parent f294818775
commit 1e53376151
28 changed files with 591 additions and 428 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/curly-eels-carry.md
+5
View File
@@ -0,0 +1,5 @@
---
"gitbook": patch
---
Add sidesheet component, use it for TOC and AIChat
packages/gitbook/src/app/sites/dynamic/[mode]/[siteURL]/[siteData]/(content)/layout.tsx
+2 -1
View File
@@ -23,7 +23,8 @@ export default async function SiteDynamicLayout({
return (
<CustomizationRootLayout
className="site-background"
htmlClassName="sheet-open:gutter-stable"
bodyClassName="site-background"
forcedTheme={forcedTheme}
context={context}
>
packages/gitbook/src/app/sites/static/[mode]/[siteURL]/[siteData]/(content)/layout.tsx
+5 -1
View File
@@ -19,7 +19,11 @@ export default async function SiteStaticLayout({
const withTracking = shouldTrackEvents();
return (
<CustomizationRootLayout className="site-background" context={context}>
<CustomizationRootLayout
htmlClassName="sheet-open:gutter-stable"
bodyClassName="site-background"
context={context}
>
<SiteLayout
context={context}
withTracking={withTracking}
packages/gitbook/src/components/AIChat/AIChat.tsx
+17 -9
View File
@@ -27,6 +27,7 @@ import { useTrackEvent } from '../Insights';
import { useNow } from '../hooks';
import { Button } from '../primitives';
import { ScrollContainer } from '../primitives/ScrollContainer';
import { SideSheet } from '../primitives/SideSheet';
import { AIChatControlButton } from './AIChatControlButton';
import { AIChatIcon } from './AIChatIcon';
import { AIChatInput } from './AIChatInput';
@@ -69,15 +70,22 @@ export function AIChat() {
}, [chat.opened, trackEvent]);
return (
<div
<SideSheet
side="right"
open={chat.opened}
onOpenChange={(open) => {
if (open) {
chatController.open();
} else {
chatController.close();
}
}}
withOverlay={true}
className={tcls(
'ai-chat inset-y-0 right-0 z-40 mx-auto flex max-w-3xl scroll-mt-36 px-4 py-4 transition-[width,opacity,margin,display] transition-discrete duration-300 sm:px-6 lg:fixed lg:w-80 lg:p-0 xl:w-96',
chat.opened
? 'lg:starting:ml-0 lg:starting:w-0 lg:starting:opacity-0'
: 'hidden lg:ml-0 lg:w-0! lg:opacity-0'
'ai-chat mx-auto ml-8 not-hydrated:hidden w-96 transition-[width] duration-300 ease-quint lg:max-xl:w-80'
)}
>
<EmbeddableFrame className="relative shrink-0 border-tint-subtle border-l to-tint-base transition-all duration-300 max-lg:circular-corners:rounded-3xl max-lg:rounded-corners:rounded-md max-lg:border lg:w-80 xl:w-96">
<EmbeddableFrame className="relative shrink-0 border-tint-subtle border-l to-tint-base">
<EmbeddableFrameMain data-testid="ai-chat">
<EmbeddableFrameHeader>
<AIChatDynamicIcon trademark={config.trademark} />
@@ -107,7 +115,7 @@ export function AIChat() {
</EmbeddableFrameBody>
</EmbeddableFrameMain>
</EmbeddableFrame>
</div>
</SideSheet>
);
}
@@ -218,8 +226,8 @@ export function AIChatBody(props: {
className="shrink grow basis-80 animate-fade-in-slow [container-type:size]"
contentClassName="p-4 gutter-stable flex flex-col gap-4"
orientation="vertical"
fadeEdges={['leading']}
active={`message-group-${chat.messages.filter((message) => message.role === 'user').length - 1}`}
trailing={{ fade: false, button: true }}
active={`#message-group-${chat.messages.filter((message) => message.role === 'user').length - 1}`}
>
{isEmpty ? (
<div className="flex grow flex-col">
packages/gitbook/src/components/Cookies/CookiesToast.tsx
+4 -4
View File
@@ -41,7 +41,7 @@ export function CookiesToast(props: { privacyPolicy?: string }) {
aria-describedby={describedById}
className={tcls(
'fixed',
'z-10',
'z-50',
'bg-tint-base',
'rounded-sm',
'straight-corners:rounded-none',
@@ -52,9 +52,9 @@ export function CookiesToast(props: { privacyPolicy?: string }) {
'depth-flat:shadow-none',
'p-4',
'pr-8',
'bottom-4',
'right-4',
'left-16',
'bottom-[max(env(safe-area-inset-bottom),1rem)]',
'right-[max(env(safe-area-inset-right),1rem)]',
'left-[max(env(safe-area-inset-left),4rem)]',
'max-w-md',
'text-balance',
'sm:left-auto',
packages/gitbook/src/components/Embeddable/EmbeddableDocsPage.tsx
+3 -2
View File
@@ -79,9 +79,10 @@ export async function EmbeddableDocsPage(
orientation="vertical"
className="not-hydrated:animate-blur-in-slow"
contentClassName="p-4"
fadeEdges={context.sections ? [] : ['leading']}
leading={{ fade: !context.sections, button: true }}
trailing={{ fade: false, button: true }}
>
<TableOfContents className="pt-0" context={context} />
<TableOfContents context={context} withTrademark={false} />
<PageBody
context={context}
page={page}
packages/gitbook/src/components/Embeddable/EmbeddableRootLayout.tsx
+3 -3
View File
@@ -9,7 +9,7 @@ import type { VisitorAuthClaims } from '@/lib/adaptive';
import type { GitBookSiteContext } from '@/lib/context';
import { SiteInsightsTrademarkPlacement } from '@gitbook/api';
import { SpaceLayoutServerContext } from '../SpaceLayout';
import { TrademarkLink } from '../TableOfContents/Trademark';
import { Trademark } from '../TableOfContents/Trademark';
import { NavigationLoader } from '../primitives/NavigationLoader';
import { EmbeddableIframeAPI } from './EmbeddableIframeAPI';
@@ -57,8 +57,8 @@ export async function EmbeddableRootLayout({
<div className="fixed inset-0 flex flex-col">
{children}
{context.customization.trademark.enabled ? (
<TrademarkLink
className="border-tint-solid/3 border-t bg-tint-solid/1 px-4 py-2.5 text-tint/8 ring-0"
<Trademark
className="rounded-none! border-x-0 border-t border-b-0 bg-tint-solid/1 depth-flat:bg-tint-solid/1 px-4 py-2.5 text-tint/8"
context={context}
placement={SiteInsightsTrademarkPlacement.Embed}
/>
packages/gitbook/src/components/Header/Header.tsx
+1
View File
@@ -42,6 +42,7 @@ export function Header(props: {
`h-[${HEADER_HEIGHT_DESKTOP}px]`,
'sticky',
'top-0',
'pt-[env(safe-area-inset-top)]',
'z-30',
'w-full',
'flex-none',
packages/gitbook/src/components/Header/HeaderMobileMenu.tsx
+5 -25
View File
@@ -1,16 +1,13 @@
'use client';
import { usePathname } from 'next/navigation';
import { useEffect, useRef, useState } from 'react';
import { useEffect } from 'react';
import { tString, useLanguage } from '@/intl/client';
import { useScrollListener } from '../hooks/useScrollListener';
import { Button, type ButtonProps } from '../primitives';
const globalClassName = 'navigation-open';
const SCROLL_DISTANCE = 320;
/**
* Button to show/hide the table of content on mobile.
*/
@@ -18,25 +15,6 @@ export function HeaderMobileMenu(props: ButtonProps) {
const language = useLanguage();
const pathname = usePathname();
const hasScrollRef = useRef(false);
const [isOpen, setIsOpen] = useState(false);
const toggleNavigation = () => {
if (!hasScrollRef.current && document.body.classList.contains(globalClassName)) {
document.body.classList.remove(globalClassName);
setIsOpen(false);
} else {
document.body.classList.add(globalClassName);
window.scrollTo(0, 0);
setIsOpen(true);
}
};
const windowRef = useRef(typeof window === 'undefined' ? null : window);
useScrollListener(() => {
hasScrollRef.current = window.scrollY >= SCROLL_DISTANCE;
}, windowRef);
// Close the navigation when navigating to a page
useEffect(() => {
@@ -50,8 +28,10 @@ export function HeaderMobileMenu(props: ButtonProps) {
iconOnly
variant="blank"
label={tString(language, 'table_of_contents_button_label')}
onClick={toggleNavigation}
active={isOpen}
onClick={() => {
document.body.classList.toggle(globalClassName);
}}
// Since the button is hidden behind the TOC after toggling, we don't need to keep track of its active state.
{...props}
/>
);
packages/gitbook/src/components/PDF/PDFPage.tsx
+2 -2
View File
@@ -15,7 +15,7 @@ import { notFound } from 'next/navigation';
import * as React from 'react';
import { DocumentView } from '@/components/DocumentView';
import { TrademarkLink } from '@/components/TableOfContents/Trademark';
import { Trademark } from '@/components/TableOfContents/Trademark';
import type { PolymorphicComponentProp } from '@/components/utils/types';
import { getSpaceLanguage } from '@/intl/server';
import { tString } from '@/intl/translate';
@@ -148,7 +148,7 @@ export async function PDFPage(props: {
total={total}
trademark={
customization.trademark.enabled ? (
<TrademarkLink
<Trademark
context={context}
placement={SiteInsightsTrademarkPlacement.Pdf}
/>
packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx
+7 -4
View File
@@ -56,13 +56,15 @@ function preloadFont(fontData: FontData) {
* It takes care of setting the theme and the language.
*/
export async function CustomizationRootLayout(props: {
/** The class name to apply to the html element. */
htmlClassName?: string;
/** The class name to apply to the body element. */
className?: string;
bodyClassName?: string;
forcedTheme?: CustomizationThemeMode | null;
context: GitBookAnyContext;
children: React.ReactNode;
}) {
const { className, context, forcedTheme, children } = props;
const { htmlClassName, bodyClassName, context, forcedTheme, children } = props;
const customization =
'customization' in context ? context.customization : defaultCustomization();
@@ -107,7 +109,8 @@ export async function CustomizationRootLayout(props: {
// Set the dark/light class statically to avoid flashing and make it work when JS is disabled
(forcedTheme ?? customization.themes.default) === CustomizationThemeMode.Dark
? 'dark'
: ''
: '',
htmlClassName
)}
>
<head>
@@ -179,7 +182,7 @@ export async function CustomizationRootLayout(props: {
}
`}</style>
</head>
<body className={className}>
<body className={tcls(bodyClassName, 'sheet-open:overflow-hidden')}>
<IconsProvider
assetsURL={GITBOOK_ICONS_URL}
assetsURLToken={GITBOOK_ICONS_TOKEN}
packages/gitbook/src/components/SiteLayout/SiteLayout.tsx
+1
View File
@@ -101,6 +101,7 @@ export async function generateSiteLayoutViewport(context: GitBookSiteContext): P
width: 'device-width',
initialScale: 1,
maximumScale: 1,
viewportFit: 'cover',
};
}
packages/gitbook/src/components/SiteSections/SiteSectionList.tsx
+1 -1
View File
@@ -40,7 +40,7 @@ export function SiteSectionList(props: { sections: ClientSiteSections; className
orientation="vertical"
style={{ maxHeight: `${MAX_ITEMS * 3 + 2}rem` }}
className="pb-4"
active={currentSection.id}
active={`#${currentSection.id}`}
>
<div className="flex w-full flex-col px-2">
{sectionsAndGroups.map((item) => {
packages/gitbook/src/components/SiteSections/SiteSectionTabs.tsx
+6 -2
View File
@@ -76,8 +76,12 @@ export function SiteSectionTabs(props: {
? 'md:-mr-8 -mr-4 sm:-mr-6'
: 'after:contents[] after:absolute after:inset-y-2 after:right-0 after:border-transparent after:border-r after:transition-colors'
)}
active={currentSection.id}
trailingEdgeScrollClassName={children ? 'after:border-tint' : ''}
active={`#${currentSection.id}`}
trailing={{
fade: true,
button: true,
className: children ? 'after:border-tint' : '',
}}
>
<NavigationMenu.List
className={tcls(
packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx
+71 -68
View File
@@ -128,7 +128,7 @@ export function SpaceLayout(props: SpaceLayoutProps) {
'lg:justify-center',
CONTAINER_STYLE,
'site-width-wide:max-w-screen-4xl',
'hydrated:transition-[max-width] duration-300',
'transition-[max-width] duration-300',
// Ensure the footer is display below the viewport even if the content is not enough
withFooter && [
@@ -141,79 +141,82 @@ export function SpaceLayout(props: SpaceLayoutProps) {
<TableOfContents
context={context}
header={
withTopHeader ? null : (
<div
className={tcls(
'hidden',
'pr-4',
'mt-2',
'lg:flex',
'grow-0',
'dark:shadow-light/1',
'text-base/tight',
'items-center'
)}
>
<HeaderLogo context={context} />
{variants.translations.length > 1 ? (
<TranslationsDropdown
context={context}
siteSpace={
variants.translations.find(
(space) => space.id === siteSpace.id
) ?? siteSpace
}
siteSpaces={variants.translations}
className="[&_.button-leading-icon]:block! ml-auto py-2 [&_.button-content]:hidden"
/>
) : null}
</div>
)
<div
className={tcls(
'pr-4',
'flex',
withTopHeader ? 'lg:hidden' : '',
'grow-0',
'dark:shadow-light/1',
'text-base/tight',
'items-center'
)}
>
<HeaderLogo context={context} />
{variants.translations.length > 1 ? (
<TranslationsDropdown
context={context}
siteSpace={
variants.translations.find(
(space) => space.id === siteSpace.id
) ?? siteSpace
}
siteSpaces={variants.translations}
className="[&_.button-leading-icon]:block! ml-auto py-2 [&_.button-content]:hidden"
/>
) : null}
</div>
}
// Displays the search button and/or the space dropdown in the ToC
// according to the header/variant settings.
// E.g if there is no header, the search button will be displayed in the ToC.
innerHeader={
<>
{!withTopHeader && (
<div className="flex gap-2">
<SearchContainer
style={CustomizationSearchStyle.Subtle}
withVariants={variants.generic.length > 1}
withSiteVariants={
visibleSections?.list.some(
(s) =>
s.object === 'site-section' &&
s.siteSpaces.length > 1
) ?? false
}
withSections={withSections}
section={visibleSections?.current}
siteSpace={siteSpace}
siteSpaces={visibleSiteSpaces}
className="max-lg:hidden"
viewport="desktop"
!withTopHeader || variants.generic.length > 1 ? (
<div
className={tcls(
'my-5 sidebar-default:mt-2 flex flex-col gap-2 px-5 empty:hidden',
variants.generic.length > 1 ? '' : 'max-lg:hidden'
)}
>
{!withTopHeader && (
<div className="flex gap-2 max-lg:hidden">
<SearchContainer
style={CustomizationSearchStyle.Subtle}
withVariants={variants.generic.length > 1}
withSiteVariants={
visibleSections?.list.some(
(s) =>
s.object === 'site-section' &&
s.siteSpaces.length > 1
) ?? false
}
withSections={withSections}
section={visibleSections?.current}
siteSpace={siteSpace}
siteSpaces={visibleSiteSpaces}
viewport="desktop"
/>
</div>
)}
{!withTopHeader && withSections && visibleSections && (
<SiteSectionList
className="hidden lg:block"
sections={encodeClientSiteSections(
context,
visibleSections
)}
/>
</div>
)}
{!withTopHeader && withSections && visibleSections && (
<SiteSectionList
className={tcls('hidden', 'lg:block')}
sections={encodeClientSiteSections(
context,
visibleSections
)}
/>
)}
{variants.generic.length > 1 ? (
<SpacesDropdown
context={context}
siteSpace={siteSpace}
siteSpaces={variants.generic}
className="w-full px-3 py-2"
/>
) : null}
</>
)}
{variants.generic.length > 1 ? (
<SpacesDropdown
context={context}
siteSpace={siteSpace}
siteSpaces={variants.generic}
className="w-full px-3"
/>
) : null}
</div>
) : null
}
/>
{children}
packages/gitbook/src/components/TableOfContents/PageDocumentItem.tsx
+2 -1
View File
@@ -32,7 +32,8 @@ export function PageDocumentItem(props: { page: ClientTOCPageDocument }) {
'my-2',
'border-tint-subtle',
'sidebar-list-default:border-l',
'sidebar-list-line:border-l'
'sidebar-list-line:border-l',
'break-anywhere'
)}
/>
) : null
packages/gitbook/src/components/TableOfContents/PageGroupItem.tsx
+5 -5
View File
@@ -14,9 +14,9 @@ export function PageGroupItem(props: { page: ClientTOCPageGroup; isFirst?: boole
<li className="flex flex-col">
<div
className={tcls(
'-top-6 sticky z-1 flex items-center gap-3 px-3 pt-6',
'-top-4 sticky z-1 flex items-center gap-3 px-3',
'font-semibold text-xs uppercase tracking-wide',
'pb-3', // Add extra padding to make the header fade a bit nicer
'mt-2 pt-4 pb-3', // Add extra padding to make the header fade a bit nicer
'-mb-1.5', // Then pull the page items a bit closer, effective bottom padding is 1.5 units / 6px.
'mask-[linear-gradient(rgba(0,0,0,1)_70%,rgba(0,0,0,0))]', // Fade out effect of fixed page items. We want the fade to start past the header, this is a good approximation.
'bg-tint-base',
@@ -25,9 +25,9 @@ export function PageGroupItem(props: { page: ClientTOCPageGroup; isFirst?: boole
'[html.sidebar-filled.theme-bold.tint_&]:bg-tint-subtle',
'[html.sidebar-filled.theme-muted_&]:bg-tint-base',
'[html.sidebar-filled.theme-bold.tint_&]:bg-tint-base',
'[html.sidebar-default.theme-gradient_&]:bg-gradient-primary',
'[html.sidebar-default.theme-gradient.tint_&]:bg-gradient-tint',
isFirst ? '-mt-6' : ''
'lg:[html.sidebar-default.theme-gradient_&]:bg-gradient-primary',
'lg:[html.sidebar-default.theme-gradient.tint_&]:bg-gradient-tint',
isFirst ? '-mt-4' : ''
)}
>
<TOCPageIcon page={page} />
packages/gitbook/src/components/TableOfContents/TOCScroller.tsx
-91
View File
@@ -1,91 +0,0 @@
'use client';
import React, {
useCallback,
useEffect,
useMemo,
useRef,
type ComponentPropsWithoutRef,
} from 'react';
import { assert } from 'ts-essentials';
interface TOCScrollContainerContextType {
getContainer: (listener: (element: HTMLDivElement) => void) => () => void;
}
const TOCScrollContainerContext = React.createContext<TOCScrollContainerContextType | null>(null);
function useTOCScrollContainerContext() {
const ctx = React.useContext(TOCScrollContainerContext);
assert(ctx);
return ctx;
}
/**
* Table of contents scroll container.
*/
export function TOCScrollContainer(props: ComponentPropsWithoutRef<'div'>) {
const ref = useRef<HTMLDivElement>(null);
const listeners = useRef<((element: HTMLDivElement) => void)[]>([]);
const getContainer: TOCScrollContainerContextType['getContainer'] = useCallback((listener) => {
if (ref.current) {
listener(ref.current);
return () => {};
}
listeners.current.push(listener);
return () => {
listeners.current = listeners.current.filter((l) => l !== listener);
};
}, []);
const value: TOCScrollContainerContextType = useMemo(() => ({ getContainer }), [getContainer]);
useEffect(() => {
const element = ref.current;
if (!element) {
return;
}
listeners.current.forEach((listener) => listener(element));
return () => {
listeners.current = [];
};
}, []);
return (
<TOCScrollContainerContext.Provider value={value}>
<div ref={ref} data-testid="toc-scroll-container" {...props} />
</TOCScrollContainerContext.Provider>
);
}
// Offset to scroll the table of contents item by.
const TOC_ITEM_OFFSET = 100;
/**
* Scrolls the table of contents container to the page item when it's initially active.
*/
export function useScrollToActiveTOCItem(props: {
anchorRef: React.RefObject<HTMLAnchorElement | null>;
isActive: boolean;
}) {
const { isActive, anchorRef } = props;
const { getContainer } = useTOCScrollContainerContext();
useEffect(() => {
const anchor = anchorRef.current;
if (isActive && anchor) {
return getContainer((container) => {
if (isOutOfView(anchor, container)) {
container.scrollTo({ top: anchor.offsetTop - TOC_ITEM_OFFSET });
}
});
}
}, [isActive, getContainer, anchorRef]);
}
function isOutOfView(element: HTMLElement, container: HTMLElement) {
const tocItemTop = element.offsetTop;
const containerTop = container.scrollTop;
const containerBottom = containerTop + container.clientHeight;
return (
tocItemTop < containerTop + TOC_ITEM_OFFSET ||
tocItemTop > containerBottom - TOC_ITEM_OFFSET
);
}
packages/gitbook/src/components/TableOfContents/TableOfContents.tsx
+56 -44
View File
@@ -3,42 +3,59 @@ import { SiteInsightsTrademarkPlacement } from '@gitbook/api';
import type React from 'react';
import { tcls } from '@/lib/tailwind';
import { ScrollContainer } from '../primitives/ScrollContainer';
import { SideSheet } from '../primitives/SideSheet';
import { PagesList } from './PagesList';
import { TOCScrollContainer } from './TOCScroller';
import { TableOfContentsScript } from './TableOfContentsScript';
import { Trademark } from './Trademark';
import { encodeClientTableOfContents } from './encodeClientTableOfContents';
/**
* Sidebar container, responsible for setting the right dimensions and position for the sidebar.
*/
export async function TableOfContents(props: {
context: GitBookSiteContext;
header?: React.ReactNode; // Displayed outside the scrollable TOC as a sticky header
innerHeader?: React.ReactNode; // Displayed outside the scrollable TOC, directly above the page list
withTrademark?: boolean;
className?: string;
}) {
const { innerHeader, context, header, className } = props;
const { innerHeader, context, header, className, withTrademark = true } = props;
const { customization, revision } = context;
const pages = await encodeClientTableOfContents(context, revision.pages, revision.pages);
return (
<>
<aside // Sidebar container, responsible for setting the right dimensions and position for the sidebar.
<SideSheet
side="left"
data-testid="table-of-contents"
id="table-of-contents"
toggleClass="navigation-open"
withOverlay={true}
withCloseButton={true}
className={tcls(
'group',
'group/table-of-contents',
'text-sm',
'grow-0',
'shrink-0',
'basis-full',
'lg:basis-72',
'w-4/5',
'md:w-1/2',
'lg:w-72',
'basis-72',
'lg:page-no-toc:basis-56',
'relative',
'z-1',
'max-lg:not-sidebar-filled:bg-tint-base',
'max-lg:not-sidebar-filled:border-r',
'border-tint-subtle',
'lg:flex!',
'lg:animate-none!',
'lg:sticky',
'lg:mr-12',
'lg:z-0!',
// Server-side static positioning
'lg:top-0',
@@ -60,30 +77,22 @@ export async function TableOfContents(props: {
'lg:page-no-toc:[html[style*="--outline-top-offset"]_&]:top-(--outline-top-offset)!',
'lg:page-no-toc:[html[style*="--outline-height"]_&]:top-(--outline-height)!',
'pt-4',
'pb-4',
'pt-6 pb-4',
'supports-[-webkit-touch-callout]:pb-[env(safe-area-inset-bottom)]', // Override bottom padding on iOS since we have a transparent bottom bar
'lg:sidebar-filled:pr-6',
'lg:page-no-toc:pr-0',
'max-lg:pl-8',
'hidden',
'navigation-open:flex!',
'lg:flex',
'lg:page-no-toc:hidden',
'xl:page-no-toc:flex',
'lg:site-header-none:page-no-toc:flex',
'flex-col',
'gap-4',
'navigation-open:border-b',
'border-tint-subtle',
className
)}
>
{header && header}
{header}
<div // The actual sidebar, either shown with a filled bg or transparent.
className={tcls(
'lg:-ms-5',
'relative flex grow flex-col overflow-hidden border-tint-subtle',
'-ms-5',
'relative flex min-h-0 grow flex-col border-tint-subtle',
'sidebar-filled:bg-tint-subtle',
'theme-muted:bg-tint-subtle',
@@ -91,40 +100,43 @@ export async function TableOfContents(props: {
'[html.sidebar-filled.theme-muted_&]:bg-tint-base',
'[html.sidebar-filled.theme-bold.tint_&]:bg-tint-base',
'[html.sidebar-filled.theme-gradient_&]:border',
'max-lg:sidebar-filled:border',
'page-no-toc:bg-transparent!',
'page-no-toc:border-none!',
'sidebar-filled:rounded-xl',
'sidebar-filled:rounded-2xl',
'straight-corners:rounded-none',
'page-has-toc:[html.sidebar-filled.circular-corners_&]:rounded-3xl'
'page-has-toc:[html.sidebar-filled.circular-corners_&]:rounded-4xl'
)}
>
{innerHeader ? (
<div className="my-4 flex flex-col space-y-4 px-5 empty:hidden">
{innerHeader}
</div>
) : null}
<TOCScrollContainer // The scrollview inside the sidebar
className={tcls(
'flex grow flex-col p-2 pt-4',
customization.trademark.enabled && 'lg:pb-20',
'hide-scrollbar overflow-y-auto'
)}
{innerHeader}
<ScrollContainer
data-testid="toc-scroll-container"
orientation="vertical"
contentClassName="flex flex-col p-2 gutter-stable"
active="[data-active=true]"
leading={{
fade: true,
button: {
className: '-mt-4',
},
}}
>
<PagesList
pages={pages}
isRoot={true}
style="page-no-toc:hidden border-tint-subtle sidebar-list-line:border-l"
style="page-no-toc:hidden grow border-tint-subtle sidebar-list-line:border-l"
/>
{customization.trademark.enabled ? (
<Trademark
context={context}
placement={SiteInsightsTrademarkPlacement.Sidebar}
/>
) : null}
</TOCScrollContainer>
</ScrollContainer>
{withTrademark && customization.trademark.enabled ? (
<Trademark
context={context}
placement={SiteInsightsTrademarkPlacement.Sidebar}
className="m-2 mt-auto sidebar-default:mr-4"
/>
) : null}
</div>
</aside>
</SideSheet>
<TableOfContentsScript />
</>
);
packages/gitbook/src/components/TableOfContents/ToggleableLinkItem.tsx
+1 -4
View File
@@ -3,7 +3,6 @@ import { AnimatePresence, motion } from 'motion/react';
import React, { useRef } from 'react';
import { useCurrentPagePath } from '../hooks';
import { Button, Link, type LinkInsightsProps, type LinkProps, ToggleChevron } from '../primitives';
import { useScrollToActiveTOCItem } from './TOCScroller';
/**
* Client component for a page document to toggle its children and be marked as active.
@@ -76,8 +75,6 @@ function LinkItem(
}
) {
const { isActive, href, insights, children, onActiveClick } = props;
const anchorRef = useRef<HTMLAnchorElement>(null);
useScrollToActiveTOCItem({ anchorRef, isActive });
const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
if (isActive && onActiveClick) {
@@ -88,7 +85,7 @@ function LinkItem(
return (
<Link
ref={anchorRef}
data-active={isActive}
href={href}
insights={insights}
aria-current={isActive ? 'page' : undefined}
packages/gitbook/src/components/TableOfContents/Trademark.tsx
+13 -83
View File
@@ -1,11 +1,11 @@
import type { SiteInsightsTrademarkPlacement } from '@gitbook/api';
import { Icon } from '@gitbook/icons';
import { getSpaceLanguage, t } from '@/intl/server';
import { getSpaceLanguage, tString } from '@/intl/server';
import { tcls } from '@/lib/tailwind';
import type { GitBookSpaceContext } from '@/lib/context';
import { Link } from '../primitives';
import { Button } from '../primitives';
/**
* Trademark link to the GitBook.
@@ -14,69 +14,6 @@ export function Trademark(props: {
context: GitBookSpaceContext;
placement: SiteInsightsTrademarkPlacement;
className?: string;
}) {
const { className, ...rest } = props;
return (
<div
className={tcls(
'relative',
'z-2',
'lg:absolute',
'left-0',
'right-2',
'bottom-0',
'pointer-events-none',
'sidebar-filled:pl-2',
'sidebar-filled:pb-2',
'sidebar-filled:page-no-toc:p-0',
'bg-tint-base',
'sidebar-filled:bg-tint-subtle',
'theme-muted:bg-tint-subtle',
'[html.sidebar-filled.theme-muted_&]:bg-tint-base',
'[html.sidebar-filled.theme-bold.tint_&]:bg-tint-base',
'rounded-lg',
'straight-corners:rounded-none',
'circular-corners:rounded-2xl',
'before:hidden',
'lg:before:block',
'before:content-[""]',
'before:absolute',
'before:inset-x-0',
'before:bottom-full',
'before:h-8',
'before:bg-linear-to-b',
'before:from-transparent',
'before:to-tint-base',
'sidebar-filled:before:to-tint-subtle',
'theme-muted:before:to-tint-subtle',
'[html.sidebar-filled.theme-bold.tint_&]:before:to-tint-subtle',
'[html.sidebar-filled.theme-muted_&]:before:to-tint-base',
'[html.sidebar-filled.theme-bold.tint_&]:before:to-tint-base',
'page-no-toc:before:to-transparent!',
className
)}
>
<TrademarkLink
className="circular-corners:rounded-2xl rounded-lg straight-corners:rounded-none"
{...rest}
/>
</div>
);
}
/**
* Trademark link to the GitBook.
*/
export function TrademarkLink(props: {
context: GitBookSpaceContext;
placement: SiteInsightsTrademarkPlacement;
className?: string;
}) {
const { context, placement, className } = props;
const { space } = context;
@@ -88,8 +25,10 @@ export function TrademarkLink(props: {
url.searchParams.set('utm_campaign', space.id);
return (
<Link
<Button
target="_blank"
variant="secondary"
size="large"
href={url.toString()}
className={tcls(
'text-sm',
@@ -101,30 +40,21 @@ export function TrademarkLink(props: {
'items-center',
'px-5',
'py-4',
'gap-3',
'whitespace-normal',
'sidebar-filled:px-3',
'lg:sidebar-filled:page-no-toc:px-5',
'hover:bg-tint',
'hover:text-tint-strong',
'ring-2',
'lg:ring-1',
'ring-inset',
'ring-tint-subtle',
'transition-colors',
'pointer-events-auto',
'bg-transparent',
'depth-subtle:shadow-none',
'border-tint-subtle',
className
)}
icon={<Icon icon="gitbook" className="size-5 shrink-0" />}
label={tString(language, 'powered_by_gitbook')}
insights={{
type: 'trademark_click',
placement,
}}
>
<Icon icon="gitbook" className={tcls('size-5', 'shrink-0')} />
<span className={tcls('ml-3')}>{t(language, 'powered_by_gitbook')}</span>
</Link>
/>
);
}
packages/gitbook/src/components/TableOfContents/index.ts
-1
View File
@@ -1,4 +1,3 @@
export { TableOfContents } from './TableOfContents';
export { PagesList } from './PagesList';
export { TOCScrollContainer } from './TOCScroller';
export { Trademark } from './Trademark';
packages/gitbook/src/components/layout.ts
+3 -3
View File
@@ -9,9 +9,9 @@ export const HEADER_HEIGHT_DESKTOP = 64 as const;
* Style for the container to adapt between normal and full width.
*/
export const CONTAINER_STYLE: ClassValue = [
'px-4',
'sm:px-6',
'md:px-8',
'px-4 pl-[max(env(safe-area-inset-left),1rem)] pr-[max(env(safe-area-inset-right),1rem)]',
'sm:px-6 sm:pl-[max(env(safe-area-inset-left),1.5rem)] sm:pr-[max(env(safe-area-inset-right),1.5rem)]',
'md:px-8 md:pl-[max(env(safe-area-inset-left),2rem)] md:pr-[max(env(safe-area-inset-right),2rem)]',
'max-w-screen-2xl',
'mx-auto',
];
packages/gitbook/src/components/primitives/HoverCard.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ export function HoverCard(
<RadixHoverCard.Portal>
<RadixHoverCard.Content
side={props.side ?? 'top'}
className="pointer-events-none z-40 w-screen max-w-md animate-scale-in px-4 data-[state='closed']:animate-scale-out sm:w-auto"
className="pointer-events-none z-50 w-screen max-w-md animate-scale-in px-4 data-[state='closed']:animate-scale-out sm:w-auto"
>
<div
className={tcls(
packages/gitbook/src/components/primitives/ScrollContainer.tsx
+85 -63
View File
@@ -4,7 +4,7 @@ import { tString, useLanguage } from '@/intl/client';
import { tcls } from '@/lib/tailwind';
import * as React from 'react';
import { useScrollListener } from '../hooks/useScrollListener';
import { Button } from './Button';
import { Button, type ButtonProps } from './Button';
/**
* A container that encapsulates a scrollable area with usability features.
@@ -17,17 +17,26 @@ export type ScrollContainerProps = {
className?: string;
contentClassName?: string;
/** Optional class(es) to apply when there the container can be scrolled on the leading (left or top) edge */
leadingEdgeScrollClassName?: string;
/** Optional class(es) to apply when there the container can be scrolled on the trailing (right or bottom) edge */
trailingEdgeScrollClassName?: string;
/** The direction of the scroll container. */
orientation: 'horizontal' | 'vertical';
/** Whether to fade out the edges of the container. */
fadeEdges?: ('leading' | 'trailing')[];
leading?: {
/** Whether to fade out the leading edge of the container. */
fade: boolean;
/** Whether to show a button to scroll back. */
button: boolean | ButtonProps;
/** Optional class(es) to apply when there the container can be scrolled on the leading (left or top) edge */
className?: string;
};
trailing?: {
/** Whether to fade out the trailing edge of the container. */
fade: boolean;
/** Whether to show a button to scroll forward. */
button: boolean | ButtonProps;
/** Optional class(es) to apply when there the container can be scrolled on the trailing (right or bottom) edge */
className?: string;
};
/** The ID or ref of the active item to scroll to. */
active?: string | React.RefObject<HTMLElement | null>;
@@ -39,10 +48,9 @@ export function ScrollContainer(props: ScrollContainerProps) {
className,
contentClassName,
orientation,
fadeEdges = ['leading', 'trailing'],
active,
leadingEdgeScrollClassName,
trailingEdgeScrollClassName,
leading = { fade: true, button: true },
trailing = { fade: true, button: true },
...rest
} = props;
@@ -102,7 +110,9 @@ export function ScrollContainer(props: ScrollContainerProps) {
return;
}
const activeItem =
typeof active === 'string' ? document.getElementById(active) : active.current;
typeof active === 'string'
? containerRef.current?.querySelector(active)
: active.current;
if (!activeItem || !container.contains(activeItem)) {
return;
}
@@ -138,28 +148,30 @@ export function ScrollContainer(props: ScrollContainerProps) {
return (
<div
className={tcls(
'group/scroll-container relative flex overflow-hidden',
'group/scroll-container relative flex shrink grow',
orientation === 'horizontal' ? 'min-w-0' : 'min-h-0',
className,
scrollPosition > 0 ? leadingEdgeScrollClassName : '',
scrollPosition < scrollSize ? trailingEdgeScrollClassName : ''
scrollPosition > 0 ? leading?.className : '',
scrollPosition < scrollSize ? trailing?.className : ''
)}
{...rest}
>
{/* Scrollable content */}
<div
className={tcls(
'flex shrink grow',
'flex flex-1 overflow-hidden',
orientation === 'horizontal' ? 'min-w-0' : 'min-h-0',
orientation === 'horizontal' ? 'no-scrollbar' : 'hide-scrollbar',
orientation === 'horizontal' ? 'overflow-x-scroll' : 'flex-col overflow-y-auto',
fadeEdges.includes('leading') && scrollPosition > 0
leading.fade && scrollPosition > 0
? orientation === 'horizontal'
? 'mask-l-from-[calc(100%-2rem)]'
: 'mask-t-from-[calc(100%-2rem)]'
? 'mask-l-from-[calc(100%-1rem)]'
: 'mask-t-from-[calc(100%-1rem)]'
: '',
fadeEdges.includes('trailing') && scrollPosition < scrollSize
trailing.fade && scrollPosition < scrollSize
? orientation === 'horizontal'
? 'mask-r-from-[calc(100%-2rem)]'
: 'mask-b-from-[calc(100%-2rem)]'
? 'mask-r-from-[calc(100%-1rem)]'
: 'mask-b-from-[calc(100%-1rem)]'
: '',
contentClassName
)}
@@ -169,44 +181,52 @@ export function ScrollContainer(props: ScrollContainerProps) {
</div>
{/* Scroll buttons back & forward */}
<Button
icon={orientation === 'horizontal' ? 'chevron-left' : 'chevron-up'}
iconOnly
size="xsmall"
variant="secondary"
tabIndex={-1}
className={tcls(
'bg-tint-base!',
orientation === 'horizontal'
? '-translate-y-1/2! top-1/2 left-0 ml-2'
: '-translate-x-1/2! top-0 left-1/2 mt-2',
'absolute not-pointer-none:block hidden scale-0 opacity-0 transition-[scale,opacity]',
scrollPosition > 0
? 'not-pointer-none:group-hover/scroll-container:scale-100 not-pointer-none:group-hover/scroll-container:opacity-11'
: 'pointer-events-none'
)}
onClick={scrollBack}
label={tString(language, 'scroll_back')}
/>
<Button
icon={orientation === 'horizontal' ? 'chevron-right' : 'chevron-down'}
iconOnly
size="xsmall"
variant="secondary"
tabIndex={-1}
className={tcls(
'bg-tint-base!',
orientation === 'horizontal'
? '-translate-y-1/2! top-1/2 right-0 mr-2'
: '-translate-x-1/2! bottom-0 left-1/2 mb-2',
'absolute not-pointer-none:block hidden scale-0 transition-[scale,opacity]',
scrollPosition < scrollSize
? 'not-pointer-none:group-hover/scroll-container:scale-100 not-pointer-none:group-hover/scroll-container:opacity-11'
: 'pointer-events-none'
)}
onClick={scrollFurther}
label={tString(language, 'scroll_further')}
/>
{leading.button !== false ? (
<Button
icon={orientation === 'horizontal' ? 'chevron-left' : 'chevron-up'}
iconOnly
size="xsmall"
variant="secondary"
tabIndex={-1}
onClick={scrollBack}
label={tString(language, 'scroll_back')}
{...(typeof leading.button === 'object' ? leading.button : {})}
className={tcls(
'bg-tint-base!',
orientation === 'horizontal'
? '-translate-y-1/2! top-1/2 left-0 ml-2'
: '-translate-x-1/2! top-0 left-1/2 mt-2',
'absolute z-10 not-pointer-none:block hidden scale-0 opacity-0 transition-[scale,opacity]',
scrollPosition > 0
? 'not-pointer-none:group-hover/scroll-container:scale-100 not-pointer-none:group-hover/scroll-container:opacity-11'
: 'pointer-events-none',
typeof leading.button === 'object' ? leading.button.className : ''
)}
/>
) : null}
{trailing.button !== false ? (
<Button
icon={orientation === 'horizontal' ? 'chevron-right' : 'chevron-down'}
iconOnly
size="xsmall"
variant="secondary"
tabIndex={-1}
onClick={scrollFurther}
label={tString(language, 'scroll_further')}
{...(typeof trailing.button === 'object' ? trailing.button : {})}
className={tcls(
'bg-tint-base!',
orientation === 'horizontal'
? '-translate-y-1/2! top-1/2 right-0 mr-2'
: '-translate-x-1/2! bottom-0 left-1/2 mb-2',
'absolute z-10 not-pointer-none:block hidden scale-0 transition-[scale,opacity]',
scrollPosition < scrollSize
? 'not-pointer-none:group-hover/scroll-container:scale-100 not-pointer-none:group-hover/scroll-container:opacity-11'
: 'pointer-events-none',
typeof trailing.button === 'object' ? trailing.button.className : ''
)}
/>
) : null}
</div>
);
}
@@ -214,7 +234,7 @@ export function ScrollContainer(props: ScrollContainerProps) {
/**
* Scroll to an element in a container.
*/
function scrollToElementInContainer(element: HTMLElement, container: HTMLElement) {
function scrollToElementInContainer(element: Element, container: HTMLElement) {
const containerRect = container.getBoundingClientRect();
const rect = element.getBoundingClientRect();
@@ -229,6 +249,8 @@ function scrollToElementInContainer(element: HTMLElement, container: HTMLElement
(rect.left - containerRect.left) -
container.clientWidth / 2 +
rect.width / 2,
behavior: 'smooth',
// Use 'auto' to avoid additional scroll animations when scrolling to an element
// as this may be called during layout/initialization when the page is not fully loaded.
behavior: 'auto',
});
}
packages/gitbook/src/components/primitives/SideSheet.tsx
+276
View File
@@ -0,0 +1,276 @@
'use client';
import { useLanguage } from '@/intl/client';
import { tString } from '@/intl/translate';
import { type ClassValue, tcls } from '@/lib/tailwind';
import React from 'react';
import { useIsMobile } from '../hooks/useIsMobile';
import { Button } from './Button';
const ANIMATION_DURATION = 300;
/**
* SideSheet - A slide-in panel component that can appear from the left or right side.
*
* Supports both controlled and uncontrolled modes:
* - Controlled: Provide both `open` and `onOpenChange` props. Parent manages state.
* - Uncontrolled: Omit `open` prop. Component manages its own state internally.
*/
export function SideSheet(
props: {
/** Which side the sheet slides in from */
side: 'left' | 'right';
/**
* Optional CSS class to monitor and sync with `document.body.classList`.
* When set, a MutationObserver watches for the class and syncs the sheet state accordingly.
* Adding this class opens the sheet, removing it closes it.
* Works in both controlled and uncontrolled modes.
*/
toggleClass?: string;
/**
* Modal behavior: true (always modal), false (never modal), or 'mobile' (modal only on mobile).
* Defaults to 'mobile'.
*/
modal?: true | false | 'mobile';
/**
* Controls visibility. If provided, component is controlled (parent manages state).
* If undefined, component is uncontrolled (manages its own state).
*/
open?: boolean;
/** Called when the open state changes. Receives the new state (true/false). Only used in controlled mode. */
onOpenChange?: (open: boolean) => void;
/** Show a backdrop overlay when modal */
withOverlay?: boolean;
/** Show a close button when modal */
withCloseButton?: boolean;
} & React.HTMLAttributes<HTMLDivElement>
) {
const {
side,
children,
className,
toggleClass,
open: openState,
modal = 'mobile',
withOverlay,
withCloseButton,
onOpenChange,
...rest
} = props;
const isMobile = useIsMobile();
const isModal = modal === 'mobile' ? isMobile : modal;
const asideRef = React.useRef<HTMLElement>(null);
// Internal state for uncontrolled mode (only used when open prop is undefined)
const [open, setOpen] = React.useState(openState ?? false);
// Determine actual open state: controlled (from prop) or uncontrolled (from internal state)
const isOpen = openState !== undefined ? openState : open;
const wasOpenRef = React.useRef(false);
const [shouldHide, setShouldHide] = React.useState(!isOpen);
// Track if component has been opened to prevent initial animation
React.useEffect(() => {
let timer: ReturnType<typeof setTimeout> | undefined;
if (isOpen) {
wasOpenRef.current = true;
setShouldHide(false);
} else if (wasOpenRef.current) {
timer = setTimeout(() => {
setShouldHide(true);
}, ANIMATION_DURATION);
} else {
setShouldHide(true);
}
return () => {
if (timer) clearTimeout(timer);
};
}, [isOpen]);
const handleClose = React.useCallback(() => {
if (openState !== undefined) {
// Controlled mode: parent manages state, notify via callback with new state
onOpenChange?.(false);
} else {
// Uncontrolled mode: update internal state and sync body class if needed
setOpen(false);
if (toggleClass) {
document.body.classList.remove(toggleClass);
}
}
}, [openState, onOpenChange, toggleClass]);
// Sync the sheet state with the body class if the toggleClass is set
React.useEffect(() => {
if (!toggleClass) {
return;
}
const callback = (mutationList: MutationRecord[]) => {
for (const mutation of mutationList) {
if (mutation.attributeName === 'class') {
const shouldBeOpen = document.body.classList.contains(toggleClass);
if (openState !== undefined) {
// Controlled mode: sync with parent's state
// Notify parent of state change via onOpenChange
if (shouldBeOpen !== openState) {
onOpenChange?.(shouldBeOpen);
}
} else {
// Uncontrolled mode: sync internal state with body class
setOpen(shouldBeOpen);
}
}
}
};
const observer = new MutationObserver(callback);
observer.observe(document.body, { attributes: true });
return () => observer.disconnect();
}, [toggleClass, openState, onOpenChange]);
// Handle Escape key press to close the modal sheet
React.useEffect(() => {
if (!isModal || !isOpen) {
return;
}
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
event.preventDefault();
handleClose();
}
};
document.addEventListener('keydown', handleKeyDown);
return () => document.removeEventListener('keydown', handleKeyDown);
}, [isModal, isOpen, handleClose]);
// Focus trapping: prevent Tab from leaving the modal
React.useEffect(() => {
if (!isModal || !isOpen || !asideRef.current) {
return;
}
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key !== 'Tab') {
return;
}
const aside = asideRef.current;
if (!aside) {
return;
}
const focusable = aside.querySelectorAll<HTMLElement>(
'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
);
const first = focusable[0];
const last = focusable[focusable.length - 1];
const current = document.activeElement as HTMLElement;
if (!aside.contains(current)) {
// Focus escaped, bring it back
(event.shiftKey ? last : first)?.focus();
event.preventDefault();
} else if (event.shiftKey && current === first) {
// Shift+Tab at first element, wrap to last
last?.focus();
event.preventDefault();
} else if (!event.shiftKey && current === last) {
// Tab at last element, wrap to first
first?.focus();
event.preventDefault();
}
};
document.addEventListener('keydown', handleKeyDown);
return () => document.removeEventListener('keydown', handleKeyDown);
}, [isModal, isOpen]);
return (
<>
{withOverlay ? (
<SideSheetOverlay
className={tcls(isModal && isOpen ? '' : 'hidden opacity-0 backdrop-blur-none')}
onClick={handleClose}
/>
) : null}
<aside
ref={asideRef}
className={tcls(
'side-sheet',
'fixed inset-y-0 z-41', // Above the side sheet overlay on z-40
side === 'left' ? 'left-0' : 'right-0',
withCloseButton ? 'max-w-[calc(100%-4rem)]' : 'max-w-[calc(100%-3rem)]',
shouldHide ? 'hidden' : '',
isOpen
? side === 'left'
? 'hydrated:animate-enter-from-left'
: 'hydrated:animate-enter-from-right'
: '',
!isOpen && wasOpenRef.current
? side === 'left'
? 'hydrated:animate-exit-to-left'
: 'hydrated:animate-exit-to-right'
: '',
className
)}
aria-expanded={isOpen}
aria-modal={isModal}
{...rest}
>
{children}
{withCloseButton ? (
<SideSheetCloseButton
className={tcls(
side === 'left' ? 'left-full ml-4' : 'right-full mr-4',
isModal && isOpen ? 'animate-blur-in' : 'hidden animate-blur-out'
)}
onClick={handleClose}
/>
) : null}
</aside>
</>
);
}
/** Backdrop overlay shown behind the modal sheet */
export function SideSheetOverlay(props: { className?: ClassValue; onClick?: () => void }) {
const { className, onClick } = props;
return (
// biome-ignore lint/a11y/useKeyWithClickEvents: global escape key handler is used to close the modal sheet
<div
id="side-sheet-overlay"
onClick={() => {
onClick?.();
}}
className={tcls(
'fixed inset-0 z-40 items-start bg-tint-base/3 not-hydrated:opacity-0 starting:opacity-0 backdrop-blur-md starting:backdrop-blur-none transition-[opacity,display,backdrop-filter] transition-discrete duration-250 dark:bg-tint-base/6',
className
)}
/>
);
}
/** Close button displayed outside the sheet when modal */
export function SideSheetCloseButton(props: { className?: ClassValue; onClick?: () => void }) {
const { className, onClick } = props;
const language = useLanguage();
return (
<Button
icon="xmark"
variant="secondary"
iconOnly
label={tString(language, 'close')}
className={tcls('absolute top-4 bg-tint-base! transition-discrete', className)}
onClick={() => {
onClick?.();
}}
/>
);
}
packages/gitbook/tailwind.config.ts
+13 -9
View File
@@ -327,10 +327,10 @@ const config: Config = {
blurOut: 'blurOut 200ms ease-in both',
'blurOut-slow': 'blurOut 500ms ease-in both',
enterFromLeft: 'enterFromLeft 250ms cubic-bezier(0.83, 0, 0.17, 1) both',
enterFromRight: 'enterFromRight 250ms cubic-bezier(0.83, 0, 0.17, 1) both',
exitToLeft: 'exitToLeft 250ms cubic-bezier(0.83, 0, 0.17, 1) both',
exitToRight: 'exitToRight 250ms cubic-bezier(0.83, 0, 0.17, 1) both',
enterFromLeft: 'enterFromLeft 300ms cubic-bezier(0.83, 0, 0.17, 1) both',
enterFromRight: 'enterFromRight 300ms cubic-bezier(0.83, 0, 0.17, 1) both',
exitToLeft: 'exitToLeft 300ms cubic-bezier(0.83, 0, 0.17, 1) both',
exitToRight: 'exitToRight 300ms cubic-bezier(0.83, 0, 0.17, 1) both',
heightIn: 'heightIn 200ms ease both',
crawl: 'crawl 2s ease-in-out infinite',
@@ -473,18 +473,18 @@ const config: Config = {
},
enterFromRight: {
from: { opacity: '0', transform: 'translateX(50%)', display: 'none' },
to: { opacity: '1', transform: 'translateX(0)', display: 'block' },
to: { opacity: '1', transform: 'translateX(0)', display: 'inherit' },
},
enterFromLeft: {
from: { opacity: '0', transform: 'translateX(-50%)', display: 'none' },
to: { opacity: '1', transform: 'translateX(0)', display: 'block' },
to: { opacity: '1', transform: 'translateX(0)', display: 'inherit' },
},
exitToRight: {
from: { opacity: '1', transform: 'translateX(0)', display: 'block' },
from: { opacity: '1', transform: 'translateX(0)', display: 'inherit' },
to: { opacity: '0', transform: 'translateX(50%)', display: 'none' },
},
exitToLeft: {
from: { opacity: '1', transform: 'translateX(0)', display: 'block' },
from: { opacity: '1', transform: 'translateX(0)', display: 'inherit' },
to: { opacity: '0', transform: 'translateX(-50%)', display: 'none' },
},
scaleIn: {
@@ -591,7 +591,11 @@ const config: Config = {
* Variant when the Table of Content navigation is open.
*/
addVariant('navigation-open', 'body.navigation-open &');
addVariant('chat-open', 'body:has(.ai-chat:not(.hidden)) &');
addVariant('chat-open', 'body:has(.ai-chat[aria-expanded="true"]) &');
addVariant(
'sheet-open',
'html:has(.side-sheet[aria-modal="true"][aria-expanded="true"]) &, &:has(.side-sheet[aria-modal="true"][aria-expanded="true"])'
);
/**
* Variant when a header is displayed.
packages/icons/src/IconsProvider.tsx
+3 -1
View File
@@ -71,5 +71,7 @@ export function getAssetURL(location: Partial<IconsAssetsLocation>, path: string
*/
export function getIconAssetURL(context: IconsContextType, style: string, icon: string): string {
const location = context.assetsByStyles?.[style] ?? context;
return getAssetURL(location, `svgs/${style}/${icon}.svg`);
// Ensure icon is always a string to prevent [object Object]
const iconName = typeof icon === 'string' ? icon : String(icon);
return getAssetURL(location, `svgs/${style}/${iconName}.svg`);
}