@aiquants/menu-bar 1.18.2 → 1.19.0

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} />
-}

package/src/elements/MenuSwitch.tsx

@@ -1,134 +0,0 @@
-import { useCallback, useEffect, useRef } from "react"
-import type { Theme } from "../types"
-
-export interface IMenuSwitchProps {
-    /**
-     * MenuBar コンポーネントからの指示:
-     * open === true (または !isOpen): メニューは「閉じている」状態 ➔ 4本線ハンバーガーを表示
-     * open === false (または isOpen): メニューは「開いている」状態 ➔ ✕印を表示
-     */
-    open?: boolean
-    isOpen?: boolean
-    onMenuOpen?: () => void
-    onMenuClose?: () => void
-    onToggle?: (nextOpen: boolean) => void
-    theme?: Theme
-    pinned?: boolean
-    isPinned?: boolean
-    className?: string
-}
-
-/**
- * 4本線バーと✕印アニメーションの従前の仕様の MenuSwitch コンポーネント。
- */
-export const MenuSwitch = (props: IMenuSwitchProps): React.JSX.Element => {
-    const { open, isOpen, onMenuOpen, onMenuClose, onToggle, theme = "light", className } = props
-
-    // メニューが閉じた状態（＝4本線表示）かどうか
-    // open が指定されている場合は open (open === !isMenuOpen)
-    // isOpen が指定されている場合は !isOpen
-    const isClosed = open ?? (isOpen !== undefined ? !isOpen : true)
-
-    const stateRef = useRef(isClosed)
-
-    const refSpan1 = useRef<HTMLSpanElement>(null)
-    const refSpan2 = useRef<HTMLSpanElement>(null)
-    const refSpan3 = useRef<HTMLSpanElement>(null)
-    const refSpan4 = useRef<HTMLSpanElement>(null)
-    const refMenuString = useRef<HTMLDivElement>(null)
-
-    // 4本線ハンバーガーを表示（メニューが閉じている時）
-    const showHamburgerStyle = useCallback(() => {
-        if (refSpan1.current && refSpan2.current && refSpan3.current && refSpan4.current && refMenuString.current) {
-            const color = theme === "dark" ? "#fff" : "#000"
-            refSpan1.current.style.backgroundColor = color
-            refSpan1.current.style.width = "100%"
-            refSpan1.current.style.height = "3px"
-            refSpan1.current.style.transform = "none"
-
-            refSpan2.current.style.opacity = "1"
-            refSpan2.current.style.backgroundColor = color
-
-            refSpan3.current.style.opacity = "1"
-            refSpan3.current.style.backgroundColor = color
-
-            refSpan4.current.style.backgroundColor = color
-            refSpan4.current.style.width = "100%"
-            refSpan4.current.style.height = "3px"
-            refSpan4.current.style.transform = "none"
-
-            refMenuString.current.style.color = color
-            refMenuString.current.classList.remove("after:content-['close']")
-            refMenuString.current.classList.remove("after:ml-0.5")
-            refMenuString.current.classList.add("after:content-['menu']")
-            refMenuString.current.classList.add("after:-ml-0.5")
-            stateRef.current = true
-        }
-    }, [theme])
-
-    // ✕印を表示（メニューが開いている時）
-    const showCrossStyle = useCallback(() => {
-        if (refSpan1.current && refSpan2.current && refSpan3.current && refSpan4.current && refMenuString.current) {
-            // 開いている時は背景オーバーレイが暗いため常に白色
-            refSpan1.current.style.backgroundColor = "#fff"
-            refSpan1.current.style.width = "32px"
-            refSpan1.current.style.height = "4px"
-            refSpan1.current.style.transform = "translateY(9px) rotate(-45deg)"
-
-            refSpan2.current.style.opacity = "0"
-            refSpan3.current.style.opacity = "0"
-
-            refSpan4.current.style.backgroundColor = "#fff"
-            refSpan4.current.style.width = "32px"
-            refSpan4.current.style.height = "4px"
-            refSpan4.current.style.transform = "translateY(-9px) rotate(45deg)"
-
-            refMenuString.current.style.color = "#fff"
-            refMenuString.current.classList.remove("after:content-['menu']")
-            refMenuString.current.classList.remove("after:-ml-0.5")
-            refMenuString.current.classList.add("after:content-['close']")
-            refMenuString.current.classList.add("after:ml-0.5")
-            stateRef.current = false
-        }
-    }, [])
-
-    useEffect(() => {
-        if (isClosed) {
-            showHamburgerStyle()
-        } else {
-            showCrossStyle()
-        }
-    }, [isClosed, showHamburgerStyle, showCrossStyle])
-
-    const handleToggle = useCallback(() => {
-        if (stateRef.current) {
-            // 現在 4本線（閉じている状態） ➔ クリックでメニューを開く
-            showCrossStyle()
-            onMenuOpen?.()
-            onToggle?.(true)
-        } else {
-            // 現在 ✕印（開いている状態） ➔ クリックでメニューを閉じる
-            showHamburgerStyle()
-            onMenuClose?.()
-            onToggle?.(false)
-        }
-    }, [showCrossStyle, showHamburgerStyle, onMenuOpen, onMenuClose, onToggle])
-
-    const isMenuOpened = !isClosed
-
-    return (
-        <button
-            type="button"
-            data-aqmb-menu-switch="true"
-            aria-label={isMenuOpened ? "Close menu" : "Open menu"}
-            aria-expanded={isMenuOpened}
-            className={`aiquants-menu-switch z-[2147483647] inline-block h-[27px] w-[27px] cursor-pointer align-middle outline-hidden ${className || ""}`}
-            onClick={handleToggle}>
-            <span ref={refSpan1} className="absolute top-0 left-0 box-border inline-block h-[3px] w-full select-none transition-all duration-500" />
-            <span ref={refSpan2} className="absolute top-[6px] left-0 box-border inline-block h-[3px] w-full select-none transition-all duration-500" />
-            <span ref={refSpan3} className="absolute top-[12px] left-0 box-border inline-block h-[3px] w-full select-none transition-all duration-500" />
-            <span ref={refSpan4} className="absolute top-[18px] left-0 box-border inline-block h-[3px] w-full select-none transition-all duration-500" />
-            <div ref={refMenuString} className="absolute w-full text-xs transition-all duration-500 after:mt-2 after:block" />
-        </button>
-    )
-}