@frontify/guideline-blocks-settings 0.33.4 → 0.34.0

package/src/components/BlockItemWrapper/Toolbar/context/MultiFlyoutContext.tsx

@@ -1,25 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { Dispatch, ReactNode, SetStateAction, createContext, useContext, useMemo } from 'react';
-
-export type MultiFlyoutContextType = {
-    openFlyoutIds: string[];
-    setOpenFlyoutIds: Dispatch<SetStateAction<string[]>>;
-};
-
-const MultiFlyoutContext = createContext<MultiFlyoutContextType>({
-    openFlyoutIds: [],
-    setOpenFlyoutIds: () => console.error('No MultiFlyoutContext Provider found'),
-});
-
-export const MultiFlyoutContextProvider = ({
-    children,
-    openFlyoutIds,
-    setOpenFlyoutIds,
-}: { children: ReactNode } & MultiFlyoutContextType) => {
-    const memoizedContext = useMemo(() => ({ openFlyoutIds, setOpenFlyoutIds }), [openFlyoutIds, setOpenFlyoutIds]);
-
-    return <MultiFlyoutContext.Provider value={memoizedContext}>{children}</MultiFlyoutContext.Provider>;
-};
-
-export const useMultiFlyoutContext = () => useContext(MultiFlyoutContext);

package/src/components/BlockItemWrapper/Toolbar/context/index.ts

@@ -1,4 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-export * from './DragPreviewContext';
-export * from './MultiFlyoutContext';

package/src/components/BlockItemWrapper/Toolbar/helpers.ts

@@ -1,33 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { FOCUS_VISIBLE_STYLE } from '@frontify/fondue';
-
-import { joinClassNames } from '../../../utilities';
-
-export const getToolbarButtonClassNames = (cursor: 'grab' | 'pointer', forceActiveStyle?: boolean) => {
-    const classNames = [
-        FOCUS_VISIBLE_STYLE,
-        'tw-relative tw-inline-flex tw-items-center tw-justify-center',
-        'tw-h-6 tw-p-1',
-        'tw-rounded',
-        'tw-text-xs tw-font-medium',
-        'tw-gap-0.5',
-        'focus-visible:tw-z-10',
-    ];
-
-    if (forceActiveStyle) {
-        classNames.push(
-            'tw-bg-box-neutral-pressed',
-            'tw-text-box-neutral-inverse-pressed',
-            cursor === 'grab' ? 'tw-cursor-grabbing' : 'tw-cursor-pointer',
-        );
-    } else {
-        classNames.push(
-            'hover:tw-bg-box-neutral-hover active:tw-bg-box-neutral-pressed',
-            'tw-text-text-weak hover:tw-text-box-neutral-inverse-hover active:tw-text-box-neutral-inverse-pressed',
-            cursor === 'grab' ? '!tw-cursor-grab active:tw-cursor-grabbing' : 'tw-cursor-pointer',
-        );
-    }
-
-    return joinClassNames(classNames);
-};

package/src/components/BlockItemWrapper/Toolbar/hooks/index.ts

@@ -1,3 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-export * from './useMultiFlyoutState';

package/src/components/BlockItemWrapper/Toolbar/hooks/useMultiFlyoutState.spec.tsx

@@ -1,59 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { renderHook } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
-import { useMultiFlyoutState } from './useMultiFlyoutState';
-import { MultiFlyoutContextProvider, MultiFlyoutContextType } from '../context/MultiFlyoutContext';
-
-const FLYOUT_ID = 'flyout';
-
-const renderMultiFlyoutState = ({ openFlyoutIds, setOpenFlyoutIds }: MultiFlyoutContextType) =>
-    renderHook(() => useMultiFlyoutState(FLYOUT_ID), {
-        wrapper: ({ children }) => (
-            <MultiFlyoutContextProvider openFlyoutIds={openFlyoutIds} setOpenFlyoutIds={setOpenFlyoutIds}>
-                {children}
-            </MultiFlyoutContextProvider>
-        ),
-    });
-
-describe('useMultiFlyoutState', () => {
-    it('should be open when flyout id in context array', () => {
-        const { result } = renderMultiFlyoutState({ openFlyoutIds: [FLYOUT_ID], setOpenFlyoutIds: vi.fn() });
-        expect(result.current.isOpen).toEqual(true);
-    });
-
-    it('should be closed when flyout id is not in context array', () => {
-        const { result } = renderMultiFlyoutState({ openFlyoutIds: [], setOpenFlyoutIds: vi.fn() });
-        expect(result.current.isOpen).toEqual(false);
-    });
-
-    it('should add id to array when opening', () => {
-        const setOpenFlyoutIdsStub = vi.fn();
-        const { result } = renderMultiFlyoutState({ openFlyoutIds: [], setOpenFlyoutIds: setOpenFlyoutIdsStub });
-
-        result.current.onOpenChange(true);
-        const dispatchedResult = setOpenFlyoutIdsStub.mock.lastCall[0]([]);
-
-        expect(dispatchedResult).toEqual([FLYOUT_ID]);
-    });
-
-    it('should remove id from array when closing', () => {
-        const setOpenFlyoutIdsStub = vi.fn();
-        const { result } = renderMultiFlyoutState({ openFlyoutIds: [], setOpenFlyoutIds: setOpenFlyoutIdsStub });
-
-        result.current.onOpenChange(false);
-        const dispatchedResult = setOpenFlyoutIdsStub.mock.lastCall[0]([FLYOUT_ID]);
-
-        expect(dispatchedResult).toEqual([]);
-    });
-
-    it('should remove duplicates from array', () => {
-        const setOpenFlyoutIdsStub = vi.fn();
-        const { result } = renderMultiFlyoutState({ openFlyoutIds: [], setOpenFlyoutIds: setOpenFlyoutIdsStub });
-
-        result.current.onOpenChange(true);
-        const dispatchedResult = setOpenFlyoutIdsStub.mock.lastCall[0]([FLYOUT_ID, FLYOUT_ID, FLYOUT_ID]);
-
-        expect(dispatchedResult).toEqual([FLYOUT_ID]);
-    });
-});

package/src/components/BlockItemWrapper/Toolbar/hooks/useMultiFlyoutState.ts

@@ -1,24 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { useCallback } from 'react';
-import { useMultiFlyoutContext } from '../context/MultiFlyoutContext';
-
-export const useMultiFlyoutState = (flyoutId: string) => {
-    const { openFlyoutIds, setOpenFlyoutIds } = useMultiFlyoutContext();
-
-    const onOpenChange = useCallback(
-        (isFlyoutOpen: boolean) => {
-            setOpenFlyoutIds((currentIds) => {
-                const filteredIds = currentIds.filter((id) => id !== flyoutId);
-                if (!isFlyoutOpen) {
-                    return filteredIds;
-                } else {
-                    return [...filteredIds, flyoutId];
-                }
-            });
-        },
-        [flyoutId, setOpenFlyoutIds],
-    );
-
-    return { isOpen: openFlyoutIds.includes(flyoutId), onOpenChange };
-};

package/src/components/BlockItemWrapper/Toolbar/index.ts

@@ -1,10 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-export * from './context';
-export * from './hooks';
-export * from './Toolbar';
-export * from './AttachmentsToolbarButton';
-export * from './DragHandleToolbarButton';
-export * from './FlyoutToolbarButton';
-export * from './MenuToolbarButton';
-export * from './types';

package/src/components/BlockItemWrapper/Toolbar/types.ts

@@ -1,18 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { type ToolbarButtonProps } from './ToolbarButton';
-import { type DragHandleToolbarButtonProps } from './DragHandleToolbarButton';
-import { type FlyoutToolbarButtonProps } from './FlyoutToolbarButton';
-import { type MenuToolbarButtonProps } from './MenuToolbarButton';
-
-export type ToolbarProps = {
-    items: ToolbarItem[];
-    attachments: { isEnabled: boolean };
-};
-
-export type DragHandleToolbarItem = { type: 'dragHandle' } & DragHandleToolbarButtonProps;
-export type ButtonToolbarItem = { type: 'button' } & ToolbarButtonProps;
-export type FlyoutToolbarItem = { type: 'flyout' } & FlyoutToolbarButtonProps;
-export type MenuToolbarItem = { type: 'menu' } & MenuToolbarButtonProps;
-
-export type ToolbarItem = DragHandleToolbarItem | ButtonToolbarItem | FlyoutToolbarItem | MenuToolbarItem;

package/src/components/BlockItemWrapper/constants.ts

@@ -1,4 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-export const DEFAULT_DRAG_TOOLTIP = 'Drag or press ↵ to move';
-export const DEFAULT_DRAGGING_TOOLTIP = 'Move with ↑↓←→ and confirm with ↵';

package/src/components/BlockItemWrapper/index.ts

@@ -1,6 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-export * from './BlockItemWrapper';
-export * from './Toolbar';
-export * from './types';
-export * from './constants';

package/src/components/BlockItemWrapper/types.ts

@@ -1,24 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { type ReactNode } from 'react';
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { type AttachmentsProvider, type withAttachmentsProvider } from '../../hooks/useAttachments';
-import { type ToolbarItem } from './Toolbar';
-
-export type BlockItemWrapperProps = {
-    children: ReactNode;
-    shouldHideWrapper?: boolean;
-    shouldHideComponent?: boolean;
-    toolbarItems: (ToolbarItem | undefined)[];
-    isDragging?: boolean;
-    shouldFillContainer?: boolean;
-    outlineOffset?: number;
-    shouldBeShown?: boolean;
-    /**
-     * When set to true the BlockItemWrapper must be a child of a {@link AttachmentsProvider} component,
-     *  or the block must be wrapped with a {@link withAttachmentsProvider} HOC.
-     * @default false
-     */
-    showAttachments?: boolean;
-};

package/src/components/DownloadButton/DownloadButton.spec.ct.tsx

@@ -1,20 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { mount } from 'cypress/react18';
-import { DownloadButton } from '.';
-
-const DownloadButtonSelector = '[data-test-id="download-button"]';
-
-describe('DownloadButton', () => {
-    it('renders component', () => {
-        mount(<DownloadButton onDownload={cy.stub()} />);
-        cy.get(DownloadButtonSelector).should('exist');
-    });
-
-    it('calls onDownload on click', () => {
-        const onDownloadStub = cy.stub().as('downloadStub');
-        mount(<DownloadButton onDownload={onDownloadStub} />);
-        cy.get(DownloadButtonSelector).click();
-        cy.get('@downloadStub').should('have.been.called');
-    });
-});

package/src/components/DownloadButton/DownloadButton.tsx

@@ -1,36 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { DownloadButtonProps } from './types';
-import { useFocusRing } from '@react-aria/focus';
-import { FOCUS_STYLE, IconArrowCircleDown16, LegacyTooltip as Tooltip, TooltipPosition } from '@frontify/fondue';
-import { joinClassNames } from '../../utilities';
-
-export const DownloadButton = ({ onDownload }: DownloadButtonProps) => {
-    const { isFocused, focusProps } = useFocusRing();
-
-    return (
-        <Tooltip
-            withArrow
-            position={TooltipPosition.Top}
-            content="Download"
-            enterDelay={500}
-            triggerElement={
-                <button
-                    tabIndex={0}
-                    aria-label="Download"
-                    {...focusProps}
-                    className={joinClassNames(['tw-outline-none tw-rounded', isFocused && FOCUS_STYLE])}
-                    onClick={onDownload}
-                    onPointerDown={(e) => e.preventDefault()}
-                >
-                    <span
-                        data-test-id="download-button"
-                        className="tw-flex tw-text-xs tw-font-body tw-items-center tw-gap-1 tw-rounded-full tw-bg-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-inverse-hover active:tw-bg-box-neutral-strong-inverse-pressed tw-text-box-neutral-strong tw-outline tw-outline-1 tw-outline-offset-1 tw-p-1.5 tw-outline-line"
-                    >
-                        <IconArrowCircleDown16 />
-                    </span>
-                </button>
-            }
-        />
-    );
-};

package/src/components/DownloadButton/index.ts

@@ -1,3 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-export * from './DownloadButton';

package/src/components/DownloadButton/types.ts

@@ -1,5 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-export type DownloadButtonProps = {
-    onDownload: () => void;
-};

package/src/components/Link/LinkInput.spec.ct.tsx

@@ -1,142 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { withAppBridgeBlockStubs } from '@frontify/app-bridge';
-import { mount } from 'cypress/react18';
-import { LinkInput } from './LinkInput';
-import { ButtonSize, CheckboxState } from '@frontify/fondue';
-
-const LINK_INPUT_ID = '[data-test-id="link-input"]';
-const TEXT_INPUT_ID = '[data-test-id="text-input"]';
-const INPUT_LABEL_CONTAINER_ID = '[data-test-id="input-label-container"]';
-const BUTTON_ID = '[data-test-id="button"]';
-const CLEAR_ICON_ID = '[data-test-id="clear-icon"]';
-const CHECKBOX_ID = '[data-test-id="checkbox-input"]';
-
-describe('Link Input', () => {
-    it('renders the link input', () => {
-        const [LinkInputWithStubs] = withAppBridgeBlockStubs(LinkInput, {});
-        mount(<LinkInputWithStubs />);
-        cy.get(LINK_INPUT_ID).should('exist');
-    });
-
-    it('renders the link inpus label, placeholder and info', () => {
-        const [LinkInputWithStubs] = withAppBridgeBlockStubs(LinkInput, {});
-        mount(<LinkInputWithStubs label="Custom Label" info="Custom Info" placeholder="Custom Placeholder" />);
-        cy.get(LINK_INPUT_ID).should('exist');
-        cy.get(INPUT_LABEL_CONTAINER_ID).contains('Custom Label');
-        cy.get(INPUT_LABEL_CONTAINER_ID).contains('Custom Info');
-        cy.get(TEXT_INPUT_ID).should('have.attr', 'placeholder', 'Custom Placeholder');
-    });
-
-    it('renders the link inpu with a valid url', () => {
-        const [LinkInputWithStubs] = withAppBridgeBlockStubs(LinkInput, {});
-        mount(<LinkInputWithStubs url="https://example.com" />);
-        cy.get(LINK_INPUT_ID).should('exist');
-        cy.get(TEXT_INPUT_ID).should('have.value', 'https://example.com');
-    });
-
-    it('renders with clear icon', () => {
-        const [LinkInputWithStubs] = withAppBridgeBlockStubs(LinkInput, {});
-        mount(<LinkInputWithStubs url="https://frontify.com" clearable />);
-
-        cy.get(CLEAR_ICON_ID).should('exist');
-    });
-
-    it('renders without clear icon', () => {
-        const [LinkInputWithStubs] = withAppBridgeBlockStubs(LinkInput, {});
-        mount(<LinkInputWithStubs clearable={false} />);
-
-        cy.get(TEXT_INPUT_ID).click({ force: true });
-        cy.get(TEXT_INPUT_ID).type('https://frontify.com').type('{enter}');
-        cy.get(CLEAR_ICON_ID).should('not.exist');
-    });
-
-    it('toggles checkbox on click', () => {
-        const [LinkInputWithStubs] = withAppBridgeBlockStubs(LinkInput, {});
-        mount(
-            <LinkInputWithStubs
-                onToggleTab={cy.stub().as('onToggleTab')}
-                url="https://frontify.com"
-                openInNewTab={false}
-            />,
-        );
-
-        cy.get(CHECKBOX_ID).should('not.be.checked');
-        cy.get(CHECKBOX_ID).click({ force: true });
-        cy.get('@onToggleTab').should('be.called.with', true);
-    });
-
-    it('toggles checkbox on click if its already checked', () => {
-        const [LinkInputWithStubs] = withAppBridgeBlockStubs(LinkInput, {});
-        mount(<LinkInputWithStubs onToggleTab={cy.stub().as('onToggleTab')} url="https://frontify.com" openInNewTab />);
-
-        cy.get(CHECKBOX_ID).should('be.checked');
-        cy.get(CHECKBOX_ID).click({ force: true });
-        cy.get('@onToggleTab').should('be.called.with', false);
-    });
-
-    it('handles "Checked" state from newTab', () => {
-        const [LinkInputWithStubs] = withAppBridgeBlockStubs(LinkInput, {});
-        mount(
-            <LinkInputWithStubs
-                onToggleTab={cy.stub().as('onToggleTab')}
-                url="https://frontify.com"
-                newTab={CheckboxState.Checked}
-            />,
-        );
-        cy.get(CHECKBOX_ID).should('be.checked');
-        cy.get(CHECKBOX_ID).click({ force: true });
-        cy.get('@onToggleTab').should('be.called.with', false);
-    });
-
-    it('handles "Unchecked" state from newTab', () => {
-        const [LinkInputWithStubs] = withAppBridgeBlockStubs(LinkInput, {});
-        mount(
-            <LinkInputWithStubs
-                onToggleTab={cy.stub().as('onToggleTab')}
-                url="https://frontify.com"
-                newTab={CheckboxState.Unchecked}
-            />,
-        );
-        cy.get(CHECKBOX_ID).should('not.be.checked');
-        cy.get(CHECKBOX_ID).click({ force: true });
-        cy.get('@onToggleTab').should('be.called.with', true);
-    });
-
-    it('types into search field', () => {
-        const [LinkInputWithStubs] = withAppBridgeBlockStubs(LinkInput, {});
-        mount(<LinkInputWithStubs onUrlChange={cy.stub().as('onUrlChange')} />);
-
-        cy.get(TEXT_INPUT_ID).click({ force: true });
-        cy.get(TEXT_INPUT_ID).type('https://frontify.com');
-        cy.get('@onUrlChange').should('be.called.with', 'https://frontify.com');
-    });
-
-    it('shows internal link button', () => {
-        const [LinkInputWithStubs] = withAppBridgeBlockStubs(LinkInput, {});
-        mount(<LinkInputWithStubs />);
-
-        cy.get(BUTTON_ID).should('exist');
-    });
-
-    it('hides internal link button', () => {
-        const [LinkInputWithStubs] = withAppBridgeBlockStubs(LinkInput, {});
-        mount(<LinkInputWithStubs hideInternalLinkButton />);
-
-        cy.get(BUTTON_ID).should('not.exist');
-    });
-
-    it('renders * if input is required', () => {
-        const [LinkInputWithStubs] = withAppBridgeBlockStubs(LinkInput, {});
-        mount(<LinkInputWithStubs required label="Link" />);
-
-        cy.get(INPUT_LABEL_CONTAINER_ID).contains('*');
-    });
-
-    it('renders custom buttonsize', () => {
-        const [LinkInputWithStubs] = withAppBridgeBlockStubs(LinkInput, {});
-        mount(<LinkInputWithStubs buttonSize={ButtonSize.Small} />);
-
-        cy.get(BUTTON_ID).should('have.class', 'tw-text-body-small');
-    });
-});

package/src/components/Link/LinkInput.tsx

@@ -1,86 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import type { AppBridgeBlock, AppBridgeTheme } from '@frontify/app-bridge';
-import { ButtonSize, Checkbox, CheckboxState, FormControl, TextInput, TooltipPosition } from '@frontify/fondue';
-import { LinkSelector } from './LinkSelector';
-import { isValidUrlOrEmpty as internalIsValidUrlOrEmpty } from './utils';
-
-type LinkInputProps = {
-    url?: string;
-    info?: string;
-    label?: string;
-    required?: boolean;
-    newTab?: CheckboxState;
-    openInNewTab?: boolean;
-    onUrlChange?: (value: string) => void;
-    onToggleTab?: (checked: boolean) => void;
-    isValidUrlOrEmpty?: (url: string) => boolean;
-    appBridge: AppBridgeBlock | AppBridgeTheme;
-    clearable?: boolean;
-    placeholder?: string;
-    buttonSize?: ButtonSize;
-    hideInternalLinkButton?: boolean;
-};
-
-export const LinkInput = ({
-    onUrlChange,
-    onToggleTab,
-    isValidUrlOrEmpty,
-    appBridge,
-    clearable,
-    placeholder,
-    newTab,
-    openInNewTab,
-    url = '',
-    required,
-    info,
-    label,
-    buttonSize,
-    hideInternalLinkButton,
-}: LinkInputProps) => {
-    const isUrlValid = isValidUrlOrEmpty ? isValidUrlOrEmpty(url) : internalIsValidUrlOrEmpty(url);
-    const checkedState = newTab ?? (openInNewTab ? CheckboxState.Checked : CheckboxState.Unchecked);
-    return (
-        <div data-test-id="link-input">
-            <FormControl
-                label={{
-                    children: label,
-                    htmlFor: 'url',
-                    required,
-                    tooltip: info ? { content: info, position: TooltipPosition.Top } : undefined,
-                }}
-            >
-                <TextInput
-                    id="url"
-                    value={url}
-                    clearable={clearable}
-                    onChange={onUrlChange}
-                    placeholder={placeholder ?? 'https://example.com'}
-                    focusOnMount
-                />
-            </FormControl>
-            {!isUrlValid && <div className="tw-text-text-negative tw-mt-1 tw-text-s">Please enter a valid URL.</div>}
-
-            {!hideInternalLinkButton && (
-                <div className="tw-mt-3">
-                    <LinkSelector
-                        url={url}
-                        onUrlChange={onUrlChange}
-                        buttonSize={buttonSize ?? ButtonSize.Medium}
-                        getAllDocuments={() => appBridge.getAllDocuments()}
-                        getDocumentPagesByDocumentId={(documentId) =>
-                            appBridge.getDocumentPagesByDocumentId(documentId)
-                        }
-                        getDocumentSectionsByDocumentPageId={(documentPageId) =>
-                            appBridge.getDocumentSectionsByDocumentPageId(documentPageId)
-                        }
-                    />
-                </div>
-            )}
-
-            <div className="tw-mt-3">
-                <Checkbox value="new-tab" label="Open in new tab" state={checkedState} onChange={onToggleTab} />
-            </div>
-        </div>
-    );
-};

package/src/components/Link/LinkSelector/DocumentLink.tsx

@@ -1,81 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import type { DocumentPage, DocumentSection } from '@frontify/app-bridge';
-import { useEffect, useState } from 'react';
-import { PageLinks } from './PageLinks';
-import { IconColorFan16, merge } from '@frontify/fondue';
-import { InitiallyExpandedItems } from '../';
-
-type DocumentLinkProps = {
-    document: {
-        id: number;
-        title: string;
-        permanentLink: string;
-    };
-    selectedUrl: string;
-    onSelectUrl: (url: string) => void;
-    itemsToExpandInitially: InitiallyExpandedItems;
-    getDocumentSectionsByDocumentPageId: (documentPageId: number) => Promise<DocumentSection[]>;
-    getDocumentPagesByDocumentId: (documentId: number) => Promise<DocumentPage[]>;
-};
-
-export const DocumentLink = ({
-    document,
-    selectedUrl,
-    onSelectUrl,
-    itemsToExpandInitially,
-    getDocumentSectionsByDocumentPageId,
-    getDocumentPagesByDocumentId,
-}: DocumentLinkProps) => {
-    const [isExpanded, setIsExpanded] = useState(document.id === itemsToExpandInitially.documentId);
-    const isActive = document.permanentLink === selectedUrl;
-
-    useEffect(() => {
-        if (document.id === itemsToExpandInitially.documentId) {
-            setIsExpanded(true);
-        }
-    }, [itemsToExpandInitially, document.id]);
-
-    return (
-        <>
-            <button
-                data-test-id="internal-link-selector-document-link"
-                className={merge([
-                    'tw-flex tw-flex-1 tw-space-x-2 tw-items-center tw-py-2 tw-pr-2.5 tw-leading-5 tw-cursor-pointer tw-w-full',
-                    isActive
-                        ? 'tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover:hover hover:tw-text-box-selected-strong-inverse-hover:hover'
-                        : 'hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover',
-                ])}
-                onClick={() => onSelectUrl(document.permanentLink)}
-            >
-                <button
-                    role="button"
-                    tabIndex={0}
-                    data-test-id="tree-item-toggle"
-                    className="tw-flex tw-items-center tw-justify-center -tw-mr-2 tw-pr-3.5 tw-pt-1.5 tw-pb-1.5 tw-pl-3.5 tw-cursor-pointer"
-                    onClick={() => setIsExpanded(!isExpanded)}
-                >
-                    <div
-                        className={merge([
-                            'tw-transition-transform tw-w-0 tw-h-0 tw-font-normal tw-border-t-4 tw-border-t-transparent tw-border-b-4 tw-border-b-transparent tw-border-l-4 tw-border-l-x-strong',
-                            isExpanded ? 'tw-rotate-90' : '',
-                        ])}
-                    ></div>
-                </button>
-                <IconColorFan16 />
-                <span className="tw-text-s">{document.title}</span>
-                <span className="tw-flex-auto tw-font-sans tw-text-xs tw-text-right">Document</span>
-            </button>
-            {isExpanded && (
-                <PageLinks
-                    documentId={document.id}
-                    selectedUrl={selectedUrl}
-                    onSelectUrl={onSelectUrl}
-                    itemsToExpandInitially={itemsToExpandInitially}
-                    getDocumentSectionsByDocumentPageId={getDocumentSectionsByDocumentPageId}
-                    getDocumentPagesByDocumentId={getDocumentPagesByDocumentId}
-                />
-            )}
-        </>
-    );
-};