@aiquants/menu-bar 1.18.1 → 1.18.3

package/src/__tests__/pinEvent.test.tsx

@@ -1,68 +0,0 @@
-import { act, render, renderHook } from "@testing-library/react"
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
-import { dispatchMenuPinChange, getInitialPinState, subscribeMenuPinChange } from "../events/pinEvent"
-import { useMenuPinState } from "../hooks/useMenuPinState"
-import { MenuBar } from "../MenuBar"
-
-describe("pinEvent module & useMenuPinState hook", () => {
-    beforeEach(() => {
-        localStorage.clear()
-        document.documentElement.style.removeProperty("--aiquants-menu-pinned-width")
-    })
-
-    afterEach(() => {
-        vi.restoreAllMocks()
-    })
-
-    it("getInitialPinState reads document style or localStorage safely", () => {
-        expect(getInitialPinState(240)).toEqual({ pinned: false, width: 0 })
-
-        localStorage.setItem("aiquants-menu-pinned", "true")
-        expect(getInitialPinState(240)).toEqual({ pinned: true, width: 240 })
-
-        document.documentElement.style.setProperty("--aiquants-menu-pinned-width", "280px")
-        expect(getInitialPinState(240)).toEqual({ pinned: true, width: 280 })
-    })
-
-    it("subscribeMenuPinChange fires immediately when immediate: true", () => {
-        localStorage.setItem("aiquants-menu-pinned", "true")
-        const listener = vi.fn()
-
-        const unsubscribe = subscribeMenuPinChange(listener, { immediate: true })
-        expect(listener).toHaveBeenCalledWith({ pinned: true, width: 240 })
-
-        dispatchMenuPinChange(false, 0)
-        expect(listener).toHaveBeenCalledWith({ pinned: false, width: 0 })
-
-        unsubscribe()
-    })
-
-    it("useMenuPinState hook syncs state correctly and avoids hydration mismatch", () => {
-        localStorage.setItem("aiquants-menu-pinned", "true")
-        const { result } = renderHook(() => useMenuPinState({ defaultPinnedWidth: 240 }))
-
-        expect(result.current).toEqual({ pinned: true, width: 240 })
-
-        act(() => {
-            dispatchMenuPinChange(false, 0)
-        })
-
-        expect(result.current).toEqual({ pinned: false, width: 0 })
-    })
-
-    it("MenuBar triggers onPinChange on toggle and dispatches CustomEvent", () => {
-        const onPinChange = vi.fn()
-        const eventListener = vi.fn()
-        const unsubscribe = subscribeMenuPinChange(eventListener, { immediate: false })
-
-        const { unmount } = render(<MenuBar menuList={[]} onClickSignout={() => {}} theme="light" toggleTheme={() => {}} isPinned={true} pinnedWidth={240} onPinChange={onPinChange} />)
-
-        expect(eventListener).toHaveBeenCalledWith({ pinned: true, width: 240 })
-        expect(document.documentElement.style.getPropertyValue("--aiquants-menu-pinned-width")).toBe("240px")
-
-        unmount()
-        expect(document.documentElement.style.getPropertyValue("--aiquants-menu-pinned-width")).toBe("0px")
-
-        unsubscribe()
-    })
-})

package/src/components/SessionInfo.tsx

@@ -1,95 +0,0 @@
-import ExternalLink from "lucide-react/dist/esm/icons/external-link.js"
-import User from "lucide-react/dist/esm/icons/user.js"
-import type { UserProfile } from "../types/user"
-
-const DEFAULT_USER_ICON =
-    "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI2NiZDVlMSI+PHBhdGggZD0iTTEyIDEyYzIuMjEgMCA0LTEuNzkgNC00cy0xLjc5LTQtNC00LTQgMS43OS00IDQgMS43OSA0IDQgNHptMCAyYy0yLjY3IDAtOCAxLjM0LTggNHYyaDE2di0yYzAtMi42Ni01LjMzLTQtOC00eiIvPjwvc3ZnPg=="
-
-/**
- * Link component props interface.
- * リンクコンポーネントのプロパティ。
- */
-export interface LinkProps {
-    /** Link destination URL */
-    to: string
-    /** CSS class name */
-    className?: string
-    /** Link content */
-    children: React.ReactNode
-}
-
-/**
- * Generic Link component that can be replaced with router-specific implementation.
- * ルーター固有の実装で置き換え可能な汎用リンクコンポーネント。
- */
-export const DefaultLink = ({ to, className, children }: LinkProps): React.JSX.Element => (
-    <a href={to} className={className}>
-        {children}
-    </a>
-)
-
-/**
- * SessionInfo component props interface.
- * ユーザーセッション情報を表示するコンポーネントのプロパティ。
- */
-export interface SessionInfoProps {
-    /** User profile information from Google OAuth */
-    user: UserProfile | null
-    /** Custom Link component (optional, defaults to DefaultLink) */
-    LinkComponent?: React.ComponentType<LinkProps>
-}
-
-/**
- * SessionInfo component for displaying user session information.
- * Displays user profile photo, navigation links, and user name when authenticated.
- *
- * ユーザーセッション情報を表示するコンポーネント。
- * 認証時にプロフィール写真、ナビゲーションリンク、ユーザー名を表示する。
- */
-export const SessionInfo = (props: SessionInfoProps): React.JSX.Element => {
-    const { user, LinkComponent = DefaultLink } = props
-
-    return (
-        <div className="w-full">
-            {user ? (
-                <div className="aiquants-session-card group relative flex flex-col gap-2 rounded-xl border border-white/20 bg-white/10 p-2.5 shadow-sm backdrop-blur-md transition-all duration-200 hover:border-white/30 hover:bg-white/15 dark:border-slate-700/60 dark:bg-slate-800/60 dark:hover:border-slate-600/80 dark:hover:bg-slate-800/90">
-                    {/* アバター & ユーザー名 */}
-                    <div className="flex min-w-0 items-center gap-2.5">
-                        <div className="relative shrink-0">
-                            <div className="h-8 w-8 overflow-hidden rounded-full border border-white/40 shadow-xs dark:border-slate-500">
-                                <img className="h-full w-full rounded-full object-cover" src={user.photo || DEFAULT_USER_ICON} alt={user.displayName || "user profile"} />
-                            </div>
-                            <span className="absolute -right-0.5 -bottom-0.5 h-2.5 w-2.5 rounded-full border-2 border-slate-900 bg-emerald-400" title="Online" />
-                        </div>
-                        <div className="min-w-0 flex-1 leading-tight">
-                            <div className="truncate font-semibold text-xs text-white tracking-tight dark:text-slate-100" title={user.displayName}>
-                                {user.displayName}
-                            </div>
-                            <div className="mt-0.5 font-medium text-[10px] text-white/75 tracking-tight dark:text-slate-400">Google Account</div>
-                        </div>
-                    </div>
-
-                    {/* アクションボタン */}
-                    <div className="grid grid-cols-2 gap-1.5 border-white/15 border-t pt-1.5 dark:border-slate-700/50">
-                        <LinkComponent
-                            className="flex items-center justify-center gap-1 rounded-md border border-white/15 bg-white/10 px-2 py-1 font-medium text-[11px] text-white transition-all duration-150 hover:bg-white/25 active:scale-95 dark:border-slate-600/50 dark:bg-slate-700/50 dark:text-slate-200 dark:hover:bg-slate-600/80"
-                            to="/">
-                            <User size={11} className="shrink-0 opacity-80" />
-                            <span className="truncate">プロフィール</span>
-                        </LinkComponent>
-                        <LinkComponent
-                            className="flex items-center justify-center gap-1 rounded-md border border-white/15 bg-white/10 px-2 py-1 font-medium text-[11px] text-white transition-all duration-150 hover:bg-white/25 active:scale-95 dark:border-slate-600/50 dark:bg-slate-700/50 dark:text-slate-200 dark:hover:bg-slate-600/80"
-                            to="https://myaccount.google.com/">
-                            <ExternalLink size={11} className="shrink-0 opacity-80" />
-                            <span className="truncate">Google</span>
-                        </LinkComponent>
-                    </div>
-                </div>
-            ) : (
-                <div className="aiquants-session-card flex items-center justify-between rounded-xl border border-white/20 bg-white/10 p-2.5 shadow-xs dark:border-slate-700/60 dark:bg-slate-800/60">
-                    <span className="font-medium text-white/90 text-xs dark:text-slate-200">ログインしてください</span>
-                </div>
-            )}
-        </div>
-    )
-}

package/src/contents/MenuContent.tsx

@@ -1,79 +0,0 @@
-/**
- * @module MenuContent
- * @description This module provides the content for the menu bar.
- * @description このモジュールは、メニューバーのコンテンツを提供します。
- */
-
-import LogOut from "lucide-react/dist/esm/icons/log-out.js"
-import Pin from "lucide-react/dist/esm/icons/pin.js"
-import PinOff from "lucide-react/dist/esm/icons/pin-off.js"
-import type { Theme } from "../types"
-import { type IMenu, MenuList, type MenuNavigationPayload } from "./MenuList"
-
-/**
- * @interface IMenuContentProps
- * @description Props for the MenuContent component.
- * @description MenuContent コンポーネントの Props。
- */
-interface IMenuContentProps {
-    menuList: IMenu[]
-    menuHeader?: React.ReactNode
-    open: boolean
-    onMenuSelected(payload: MenuNavigationPayload): void
-    onClickSignout(): void
-    theme: Theme
-    toggleTheme: () => void
-    isPinned: boolean
-    onTogglePin(): void
-    pinnedSubmenuIds: number[]
-    onToggleSubmenuPin(id: number): void
-}
-
-/**
- * Renders the content of the menu bar.
- * メニューバーのコンテンツを描画します。
- * @param {IMenuContentProps} props - The properties for the MenuContent component.
- * @returns {React.JSX.Element} The rendered menu content.
- */
-export const MenuContent = (props: IMenuContentProps): React.JSX.Element => {
-    const { menuList, menuHeader, open, onMenuSelected, onClickSignout, theme, toggleTheme, isPinned, onTogglePin, pinnedSubmenuIds, onToggleSubmenuPin } = props
-
-    return (
-        <div className={`aiquants-menu-content fixed top-0 right-0 z-2147483642 flex min-h-dvh w-[240px] select-none flex-col transition-transform duration-500 ${open ? "aiquants-menu-translate-x-0" : "aiquants-menu-translate-x-250"}`}>
-            <div className="flex shrink-0 flex-col justify-center border-white/15 border-b px-2.5 py-2 dark:border-slate-700/60">{menuHeader}</div>
-            <div className="flex grow flex-col overflow-y-auto">
-                <MenuList menuList={menuList} onMenuSelected={onMenuSelected} pinnedSubmenuIds={pinnedSubmenuIds} onToggleSubmenuPin={onToggleSubmenuPin} />
-            </div>
-            <div className="border-white/15 border-t px-2.5 py-1.5 dark:border-slate-700/60">
-                <div className="flex items-center justify-between gap-1.5">
-                    <button
-                        type="button"
-                        onClick={onTogglePin}
-                        data-aqmb-pin-button
-                        className={`flex h-7 items-center justify-center rounded-md px-2 text-[11px] text-white shadow-2xs transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-300/60 ${isPinned ? "bg-amber-500 hover:bg-amber-600 dark:bg-amber-600 dark:hover:bg-amber-500" : "border border-white/20 bg-white/10 hover:bg-white/20 dark:border-slate-600/60 dark:bg-slate-700/60 dark:hover:bg-slate-600"}`}
-                        title={isPinned ? "ピン留め解除" : "ピン留め"}
-                        aria-label={isPinned ? "ピン留め解除" : "ピン留め"}>
-                        {isPinned ? <Pin size={12} /> : <PinOff size={12} />}
-                    </button>
-                    <button
-                        type="button"
-                        onClick={toggleTheme}
-                        data-aqmb-theme-button
-                        className="group relative flex h-7 items-center justify-center rounded-md border border-white/20 bg-white/10 px-2 text-[11px] text-white shadow-2xs backdrop-blur-xs transition-all duration-200 hover:bg-white/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 dark:border-slate-600/60 dark:bg-slate-700/60 dark:hover:bg-slate-600"
-                        title={theme === "dark" ? "ライトモードに切り替え" : "ダークモードに切り替え"}
-                        aria-label={theme === "dark" ? "ライトモードに切り替え" : "ダークモードに切り替え"}>
-                        <span className="text-xs transition-transform duration-200 group-hover:scale-110">{theme === "dark" ? "🌞" : "🌙"}</span>
-                    </button>
-                    <button
-                        type="button"
-                        data-aqmb-signout-button
-                        className="aiquants-signout-button flex h-7 flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md bg-red-500/90 px-2.5 font-medium text-[11px] text-white shadow-2xs transition-colors duration-200 hover:bg-red-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-300/60 dark:bg-red-600/90 dark:hover:bg-red-500"
-                        onClick={onClickSignout}>
-                        <LogOut size={11} className="shrink-0" />
-                        <span>サインアウト</span>
-                    </button>
-                </div>
-            </div>
-        </div>
-    )
-}

package/src/contents/MenuList.tsx

@@ -1,400 +0,0 @@
-/**
- * @module MenuList
- * @description This module provides the list of menu items.
- * @description このモジュールは、メニュー項目のリストを提供します。
- */
-
-import BarChart from "lucide-react/dist/esm/icons/bar-chart.js"
-import Download from "lucide-react/dist/esm/icons/download.js"
-import FileText from "lucide-react/dist/esm/icons/file-text.js"
-import LinkIcon from "lucide-react/dist/esm/icons/link.js"
-import Lock from "lucide-react/dist/esm/icons/lock.js"
-import Pin from "lucide-react/dist/esm/icons/pin.js"
-import PinOff from "lucide-react/dist/esm/icons/pin-off.js"
-import Table from "lucide-react/dist/esm/icons/table.js"
-import { type ReactNode, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"
-import { Link, useLocation } from "react-router-dom"
-
-// SSR 環境では useLayoutEffect が警告を出すため useEffect にフォールバックする
-const useSafeLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect
-
-// メニューバーのスクロール位置を永続化する sessionStorage のキー
-const SCROLL_STORAGE_KEY = "aiquants-menu-scroll"
-
-/**
- * @interface ISubmenu
- * @description Interface for a submenu item.
- * @description サブメニュー項目のインターフェース。
- * @property {number} subid - The unique ID of the submenu item. サブメニュー項目の一意の ID。
- * @property {string} [title] - The title of the submenu item. サブメニュー項目のタイトル。
- * @property {string} href - The URL for the submenu item. サブメニュー項目の URL。
- * @property {string} [mark] - The type of mark to display next to the item. 項目の横に表示するマークの種類。
- * @property {boolean} [new] - Whether the item is a new link. 新しいリンクかどうか。
- */
-export interface ISubmenu {
-    subid: number
-    title?: string
-    href: string
-    mark?: string
-    new?: boolean
-}
-
-/**
- * @interface IMenu
- * @description Interface for a menu item.
- * @description メニュー項目のインターフェース。
- * @property {number} id - The unique ID of the menu item. メニュー項目の一意の ID。
- * @property {string} title - The title of the menu item. メニュー項目のタイトル。
- * @property {string} [href] - The URL for the menu item. メニュー項目の URL。
- * @property {ISubmenu[]} submenu - The list of submenu items. サブメニュー項目のリスト。
- */
-export interface IMenu {
-    id: number
-    title: string
-    href?: string
-    submenu: ISubmenu[]
-}
-
-/**
- * @typedef MenuNavigationPayload
- * @description Payload emitted when a menu or submenu item is selected.
- * @description メニューまたはサブメニューが選択された際に発火するペイロード。
- * @property {{ id: number; title: string; href?: string }} menu - Selected menu metadata.
- * @property {{ subid: number; title?: string; href: string; mark?: string; new?: boolean }} [submenu] - Selected submenu metadata.
- */
-export type MenuNavigationPayload = {
-    menu: Pick<IMenu, "id" | "title" | "href">
-    submenu?: Pick<ISubmenu, "subid" | "title" | "href" | "mark" | "new">
-}
-
-/**
- * @interface IMenuListProps
- * @description Props for the MenuList component.
- * @description MenuList コンポーネントの Props。
- * @property {IMenu[]} menuList - The list of menu items. メニュー項目のリスト。
- * @property {(payload: MenuNavigationPayload) => void} [onMenuSelected] - Function to handle menu item selection. メニュー項目選択を処理する関数。
- */
-interface IMenuListProps {
-    menuList: IMenu[]
-    onMenuSelected?(payload: MenuNavigationPayload): void
-    pinnedSubmenuIds?: number[]
-    onToggleSubmenuPin?(id: number): void
-}
-
-const regexp = new RegExp(/(^https?:\/\/)|(\.(html|htm)?$)/)
-
-const markIcons: Record<string, React.ElementType> = {
-    report: FileText,
-    slip: FileText,
-    table: Table,
-    chart: BarChart,
-    download: Download,
-    lock: Lock,
-    href: LinkIcon,
-}
-
-/**
- * @function StyledLinkText
- * @description A component that renders a styled link with an optional icon.
- * @description オプションのアイコンを持つスタイル付きリンクを描画するコンポーネント。
- * @param {{ mark?: string; children: ReactNode }} props - The props for the component.
- * @returns {React.JSX.Element} The rendered styled link text.
- */
-const StyledLinkText = ({ mark, children }: { mark?: string; children: ReactNode }) => {
-    const Icon = mark ? markIcons[mark] : undefined
-    if (!Icon) {
-        return <span className="mx-1 text-sky-600 hover:underline dark:text-sky-400">{children}</span>
-    }
-    return (
-        <div className="flex flex-nowrap items-center">
-            <Icon className="h-3.5 w-3.5 shrink-0" />
-            <div className="aiquants-menu-link mx-1 hover:underline">{children}</div>
-        </div>
-    )
-}
-
-/**
- * @function buildMenuPayload
- * @description Creates a navigation payload from menu metadata.
- * @description メニューのメタデータからナビゲーション用ペイロードを生成します。
- * @param {IMenu} menu - The parent menu item. 親メニュー項目。
- * @param {ISubmenu} [submenu] - The selected submenu item if any. 選択されたサブメニュー項目。
- * @returns {MenuNavigationPayload} The constructed payload.
- */
-const buildMenuPayload = (menu: IMenu, submenu?: ISubmenu): MenuNavigationPayload => {
-    if (!submenu) {
-        return {
-            menu: {
-                id: menu.id,
-                title: menu.title,
-                href: menu.href,
-            },
-        }
-    }
-    return {
-        menu: {
-            id: menu.id,
-            title: menu.title,
-            href: menu.href,
-        },
-        submenu: {
-            subid: submenu.subid,
-            title: submenu.title,
-            href: submenu.href,
-            mark: submenu.mark,
-            new: submenu.new,
-        },
-    }
-}
-
-/**
- * @function SubMenuItem
- * @description A component that renders a single submenu item.
- * @description 単一のサブメニュー項目を描画するコンポーネント。
- * @param {{ item: ISubmenu; parentMenu: IMenu; onMenuSelected?: (payload: MenuNavigationPayload) => void }} props - The props for the component.
- * @returns {React.JSX.Element} The rendered submenu item.
- */
-const SubMenuItem = ({ item, parentMenu, onMenuSelected }: { item: ISubmenu; parentMenu: IMenu; onMenuSelected?: (payload: MenuNavigationPayload) => void }) => {
-    if (item.href === "separator") {
-        return <hr className="aiquants-menu-separator mx-2 my-1 h-px" />
-    }
-
-    const linkContent = <StyledLinkText mark={item.mark}>{item.title}</StyledLinkText>
-
-    const commonProps = {
-        onClick: () => {
-            if (!onMenuSelected) {
-                return
-            }
-            onMenuSelected(buildMenuPayload(parentMenu, item))
-        },
-    }
-
-    if (item.new) {
-        return (
-            <a href={item.href} rel="noopener noreferrer" target="_blank" {...commonProps}>
-                {linkContent}
-            </a>
-        )
-    }
-
-    if (regexp.test(item.href)) {
-        return (
-            <a href={item.href} {...commonProps}>
-                {linkContent}
-            </a>
-        )
-    }
-
-    return (
-        <Link to={item.href} {...commonProps}>
-            {linkContent}
-        </Link>
-    )
-}
-
-/**
- * @function MenuList
- * @description A component that renders the list of menu items.
- * @description メニュー項目のリストを描画するコンポーネント。
- * @param {IMenuListProps} props - The props for the component.
- * @returns {React.JSX.Element} The rendered menu list.
- */
-/**
- * href からクエリパラメータやハッシュ、末尾のスラッシュを除去して正規化します。
- */
-const normalizeHref = (href: string | undefined): string => {
-    if (!href) return ""
-    return href.split(/[?#]/)[0].replace(/(?!^\/)\/$/, "")
-}
-
-/**
- * 現在のパス名に合致するメニュー項目またはサブメニュー項目の親メニューIDを検索します。
- */
-const getActiveMenuId = (menuList: IMenu[], pathname: string): number | null => {
-    const normalizedPath = pathname !== "/" && pathname.endsWith("/") ? pathname.slice(0, -1) : pathname
-    for (const item of menuList) {
-        if (normalizeHref(item.href) === normalizedPath) {
-            return item.id
-        }
-        if (item.submenu) {
-            for (const sub of item.submenu) {
-                if (normalizeHref(sub.href) === normalizedPath) {
-                    return item.id
-                }
-            }
-        }
-    }
-    return null
-}
-
-export const MenuList = (props: IMenuListProps): React.JSX.Element => {
-    const { menuList, onMenuSelected, pinnedSubmenuIds = [], onToggleSubmenuPin } = props
-
-    // 現在のパス名を取得 (非Router環境のテスト用フォールバック付き)
-    let locationPathname = ""
-    try {
-        const location = useLocation()
-        locationPathname = location.pathname
-    } catch {
-        if (typeof window !== "undefined") {
-            locationPathname = window.location.pathname
-        }
-    }
-
-    // 初回の開閉状態をパス名から特定
-    const initialOpenMenuId = useMemo(() => {
-        return getActiveMenuId(menuList, locationPathname)
-    }, [menuList, locationPathname])
-
-    const [openMenuId, setOpenMenuId] = useState<number | null>(initialOpenMenuId)
-
-    // 自動展開済みのパス名と状態を追跡するRef。
-    // これにより、非同期メニュー読込による menuList 更新時に、ユーザーが手動で閉じたアコーディオンが勝手に再展開されるのを防ぎます。
-    const lastPathnameRef = useRef<string | null>(locationPathname)
-    const hasAutoOpenedRef = useRef<boolean>(initialOpenMenuId !== null)
-
-    useEffect(() => {
-        // パス名変更時にフラグをリセットし、メニューを一旦閉じる
-        if (lastPathnameRef.current !== locationPathname) {
-            lastPathnameRef.current = locationPathname
-            hasAutoOpenedRef.current = false
-        }
-
-        // 現在のパスに対して自動展開が未完了の場合のみ実行
-        if (!hasAutoOpenedRef.current) {
-            const activeId = getActiveMenuId(menuList, locationPathname)
-            if (activeId !== null) {
-                setOpenMenuId(activeId)
-                hasAutoOpenedRef.current = true
-            }
-        }
-    }, [locationPathname, menuList])
-
-    const handleToggle = useCallback(
-        (id: number) => {
-            const isPinned = pinnedSubmenuIds.includes(id)
-            if (isPinned) {
-                // Keep the expanded state of the submenu when it is pinned
-                return
-            }
-            setOpenMenuId((prevId) => (prevId === id ? null : id))
-        },
-        [pinnedSubmenuIds],
-    )
-
-    // スクロールコンテナへの参照。ページ遷移で再マウントされてもスクロール位置を維持するために使用する。
-    const scrollRef = useRef<HTMLDivElement>(null)
-
-    // マウント時に保存済みのスクロール位置を復元する。
-    // サブメニューのピン留め展開状態と同様に、ページ遷移をまたいでもメニューバーのスクロール位置を保持する。
-    // ペイント前に復元してスクロール位置のちらつきを防ぐため useLayoutEffect を使用する。
-    useSafeLayoutEffect(() => {
-        const el = scrollRef.current
-        if (!el) {
-            return
-        }
-        try {
-            const saved = sessionStorage.getItem(SCROLL_STORAGE_KEY)
-            if (saved !== null) {
-                const top = Number.parseFloat(saved)
-                if (!Number.isNaN(top)) {
-                    el.scrollTop = top
-                }
-            }
-        } catch {}
-    }, [])
-
-    // スクロール時に現在位置を sessionStorage へ保存する。
-    const handleScroll = useCallback(() => {
-        const el = scrollRef.current
-        if (!el) {
-            return
-        }
-        try {
-            sessionStorage.setItem(SCROLL_STORAGE_KEY, String(el.scrollTop))
-        } catch {}
-    }, [])
-
-    const MenuListContent = useMemo(() => {
-        return (
-            <>
-                {menuList.map((item) => (
-                    <div key={item.id}>
-                        {item.href ? (
-                            <div className="aiquants-menu-list-item relative mb-0.5 ml-1 flex items-center rounded-l-xl px-2.5 py-1 text-xs before:mr-2 before:inline-block before:h-2 before:w-2 before:shrink-0 before:rounded-full before:content-[''] sm:text-sm">
-                                {regexp.test(item.href) ? (
-                                    <a
-                                        href={item.href}
-                                        onClick={() => {
-                                            if (!onMenuSelected) {
-                                                return
-                                            }
-                                            onMenuSelected(buildMenuPayload(item))
-                                        }}>
-                                        <span className="aiquants-menu-link hover:underline">{item.title}</span>
-                                    </a>
-                                ) : (
-                                    <Link
-                                        to={item.href}
-                                        onClick={() => {
-                                            if (!onMenuSelected) {
-                                                return
-                                            }
-                                            onMenuSelected(buildMenuPayload(item))
-                                        }}>
-                                        <span className="aiquants-menu-link hover:underline">{item.title}</span>
-                                    </Link>
-                                )}
-                            </div>
-                        ) : (
-                            <details className="aiquants-menu-accordion-details" open={item.id === openMenuId || pinnedSubmenuIds.includes(item.id)}>
-                                {/** biome-ignore lint/a11y/noStaticElementInteractions: summary toggles submenu visibility */}
-                                <summary
-                                    className="aiquants-menu-list-item aiquants-menu-accordion-summary relative mb-0.5 ml-1 list-none rounded-l-xl px-2.5 py-1 text-xs outline-none before:mr-2 before:inline-block before:h-2 before:w-2 before:shrink-0 before:rounded-full before:content-[''] sm:text-sm"
-                                    onClick={(e) => {
-                                        e.preventDefault()
-                                        handleToggle(item.id)
-                                    }}
-                                    onKeyDown={(e) => {
-                                        if (e.key === "Enter" || e.key === " ") {
-                                            e.preventDefault()
-                                            handleToggle(item.id)
-                                        }
-                                    }}>
-                                    <span>{item.title}</span>
-                                    <button
-                                        type="button"
-                                        onClick={(e) => {
-                                            e.stopPropagation()
-                                            e.preventDefault()
-                                            if (onToggleSubmenuPin) {
-                                                onToggleSubmenuPin(item.id)
-                                            }
-                                        }}
-                                        className={`aiquants-submenu-pin-button ${pinnedSubmenuIds.includes(item.id) ? "pinned" : ""}`}
-                                        title={pinnedSubmenuIds.includes(item.id) ? "ピン留め解除" : "ピン留め"}>
-                                        {pinnedSubmenuIds.includes(item.id) ? <Pin size={13} /> : <PinOff size={13} />}
-                                    </button>
-                                </summary>
-                                <div className="aiquants-menu-submenu pointer-events-auto my-0.5 mr-1 ml-3.5 rounded-lg px-2 py-1 shadow-sm">
-                                    {item.submenu.map((subitem) => (
-                                        <div key={subitem.subid} className="aiquants-menu-accordion-container block w-full whitespace-nowrap py-0.5 text-xs">
-                                            <SubMenuItem item={subitem} parentMenu={item} onMenuSelected={onMenuSelected} />
-                                        </div>
-                                    ))}
-                                </div>
-                            </details>
-                        )}
-                    </div>
-                ))}
-            </>
-        )
-    }, [menuList, onMenuSelected, openMenuId, handleToggle, pinnedSubmenuIds])
-
-    return (
-        <div ref={scrollRef} onScroll={handleScroll} className="hidden-scrollbar h-0 grow overflow-y-scroll">
-            {MenuListContent}
-        </div>
-    )
-}

package/src/contents/OverlayShadow.tsx

@@ -1,30 +0,0 @@
-/**
- * @module OverlayShadow
- * @description This module provides an overlay shadow component.
- * @description このモジュールは、オーバーレイシャドウコンポーネントを提供します。
- */
-
-/**
- * @interface IOverlayProps
- * @description Props for the OverlayShadow component.
- * @description OverlayShadow コンポーネントの Props。
- * @property {boolean} isOverlay - Whether the overlay is visible. オーバーレイが表示されているかどうか。
- * @property {() => void} [onOverlayClick] - Function to handle overlay click. オーバーレイのクリックを処理する関数。
- */
-interface IOverlayProps {
-    isOverlay: boolean
-    onOverlayClick?(): void
-}
-
-/**
- * @function OverlayShadow
- * @description A component that renders an overlay shadow.
- * @description オーバーレイシャドウを描画するコンポーネント。
- * @param {IOverlayProps} props - The props for the component.
- * @returns {React.JSX.Element} The rendered overlay shadow.
- */
-export const OverlayShadow = (props: IOverlayProps): React.JSX.Element => {
-    const { isOverlay, onOverlayClick } = props
-
-    return <button type="button" className={`fixed inset-0 z-2147483640 cursor-default bg-black/50 transition-opacity duration-500 ${isOverlay ? "opacity-100" : "pointer-events-none opacity-0"}`} onClick={onOverlayClick} />
-}