Accordion

@layer lism.modules {
	.c--accordion {
		--duration: var(--acc-duration, 0.25s);
	}
	.c--accordion_item {
		--_panel-h: 0px;
		--_icon-transform: rotate(0deg);
	}

	/* 開いている時 */
	.c--accordion_item[data-opened] {
		--_icon-transform: rotate(90deg);
		--_panel-h: auto; /* Note: アニメーション時、jsでセットされる */
	}

	/* .c--accordion_button {} */
	.c--accordion_panel {
		height: var(--_panel-h);
		transition: height var(--duration);
	}

	/* コンテンツの paddingは __panel ではなくこっちにつける */
	/* .c--accordion_content {} */

	/* パネルが完全に閉じている時にabsoluteで飛ばしておくと、Chromeでも検索時に正常にハイライトされるようになる（なぜかは不明） */
	[hidden] > .c--accordion_content {
		position: absolute;
	}

	/* アイコンの描画 */
	.c--accordion_icon {
		display: grid;
		width: 1em;
		height: 1em;

		&::before,
		&::after {
			content: '';
			display: block;
			grid-area: 1 / 1;
			background-color: currentColor;
		}
		&::before {
			width: 0.1em;
			height: 100%;
			transition: transform var(--duration);
			transform: var(--_icon-transform);
		}
		&::after {
			height: 0.1em;
			width: 100%;
		}
	}

	/* フォーカス時のアウトラインを少し内側に寄せる( overflow:hidden によって途切れてしまうので)  */
	.c--accordion_button:focus-visible {
		outline: solid 2px currentColor;
		outline-color: revert;
		outline-offset: -3px; /* offset 調整だけだとブラウザ間の差が大きい */
	}

	/* --- 「視差効果を減らす」設定を考慮 --- */
	@media (prefers-reduced-motion: reduce) {
		.c--accordion_item {
			--duration: 0s;
		}
	}

	/* --- JSオフ環境の考慮 --- */
	@media (scripting: none) {
		.c--accordion_panel {
			height: auto !important;
			content-visibility: visible !important;
		}
		.c--accordion_content {
			position: static !important;
		}
	}
}

import { waitFrame, waitAnimation, maybePauseAnimation } from '../../helper/animation';

// hidden を付け外しする時の値
let ACCORDION_HIDDEN_VALUE = 'until-found';

// アコーディオン要素から必要な要素を取得
const getAccordionElements = (accordionItem) => {
	const heading = accordionItem.querySelector('.c--accordion_heading');
	const panel = accordionItem.querySelector('.c--accordion_panel');
	return {
		heading,
		button: heading.querySelector('button'),
		panel,
		content: panel.querySelector('.c--accordion_content'),
	};
};

// 親に data-allow-multiple がついていなければ、展開中のアコーディオンを閉じる
//   Memo: 自身の除外処理はしていない( 開く動作の前に呼び出す & もし自分が含まれていても連打可能なため )
const maybeCloseOpenedItems = (accordionItem) => {
	const parent = accordionItem.parentNode;
	if (!parent) return;

	// 親の data-allow-multiple 属性の有無をチェック
	if (parent.hasAttribute('data-allow-multiple')) return;

	// 開いているアコーディオンを取得して閉じる
	parent.querySelectorAll(':scope > [data-opened]').forEach((_a) => closeAccordion(_a));
};

async function openAccordion(accordionItem) {
	const { panel, content, button } = getAccordionElements(accordionItem);

	// アニメーションがあれば一時停止
	maybePauseAnimation(panel);

	// hidden を削除
	panel.removeAttribute('hidden');

	// 1フレーム待機
	await waitFrame();

	// 次フレームで高さセット（ 目標の高さ = content の高さ ）
	accordionItem.style.setProperty('--_panel-h', `${content.offsetHeight}px`);

	// さらに1フレーム待機
	await waitFrame();

	// アニメーション開始
	accordionItem.setAttribute('data-opened', '');
	button.setAttribute('aria-expanded', 'true');

	// アニメーションを待つ
	const status = await waitAnimation(panel);

	// アニメーションが最後まで完了した時、--_panel-h削除（高さセットしたままだとリサイズできない）
	if ('canceled' !== status) {
		accordionItem.style.removeProperty('--_panel-h');
	}
}

async function closeAccordion(accordionItem) {
	const { panel, button } = getAccordionElements(accordionItem);

	// アニメーションがあれば一時停止
	maybePauseAnimation(panel);

	// 現在の高さを一旦セットする
	accordionItem.style.setProperty('--_panel-h', `${panel.offsetHeight}px`);

	// 1フレーム待機
	await waitFrame();

	// 次フレームで属性を削除
	accordionItem.removeAttribute('data-opened');
	button.setAttribute('aria-expanded', 'false');

	// 変数削除して 0px へ向けてアニメーション開始
	accordionItem.style.removeProperty('--_panel-h');

	// アニメーションを待つ
	const status = await waitAnimation(panel);

	// アニメーションが最後まで完了したら、hidden付与
	if ('canceled' !== status) {
		panel.setAttribute('hidden', ACCORDION_HIDDEN_VALUE);
	}
}

// アコーディオンのトグル処理
function toggleAccordion(accordionItem) {
	if (accordionItem.hasAttribute('data-opened')) {
		// 自身を閉じる
		closeAccordion(accordionItem);
	} else {
		// 親に data-allow-multiple がついていなければ、他のアコーディオンを閉じる
		maybeCloseOpenedItems(accordionItem);

		// 自身を開く
		openAccordion(accordionItem);
	}
}

/**
 * 個別のアコーディオンにイベントをセット（React用にクリーンアップ関数を返す）
 */
export const setEvent = (accordionItem) => {
	const { button, panel } = getAccordionElements(accordionItem);

	// until-found のオン・オフが使い分けれるように、最初に初期値を取得
	if (panel.hasAttribute('hidden')) {
		ACCORDION_HIDDEN_VALUE = panel.getAttribute('hidden');
	}

	// clickイベント登録
	const _clickEvent = (e) => {
		e.preventDefault(); // hidden="until-found" の自動付け外しを無効化
		toggleAccordion(accordionItem);
	};

	// beforematchイベント登録 (ページ検索時などはこっちが発火する)
	const _beforematchEvent = (e) => {
		e.preventDefault(); // hidden="until-found" の自動付け外しを無効化
		toggleAccordion(accordionItem);
	};

	button.addEventListener('click', _clickEvent);
	panel.addEventListener('beforematch', _beforematchEvent);

	// react用: useEffect でアンマウントされた時にremoveEventListenerしないと2重でイベントが登録してしまう
	return () => {
		button.removeEventListener('click', _clickEvent);
		panel.removeEventListener('beforematch', _beforematchEvent);
	};
};

/**
 * ページ内の全アコーディオンにイベントをセット（Astro用）
 */
const setAccordion = () => {
	const accordionAll = document.querySelectorAll('.c--accordion_item');
	accordionAll.forEach((accordionItem) => {
		setEvent(accordionItem);
	});
};
export default setAccordion;

import React from 'react';
import getLismProps from 'lism-css/lib/getLismProps';
import { Lism, Stack } from 'lism-css/react';
import { getRootProps, getItemProps, getHeadingProps, getPanelProps, defaultProps } from '../getProps';
import { setEvent } from '../setAccordion';
import AccIcon from './AccIcon';

import '../_style.css';

// Context: 純粋なReact環境で AccordionItem → Button / Panel へ accID を共有
// Astro 環境では Context が使えないため null がフォールバック
const AccordionContext = React.createContext(null);

/**
 * 複数の AccordionItem をラップするルート要素
 */
export function AccordionRoot({ children, ...props }) {
	const rootProps = getRootProps(props);
	return <Stack {...rootProps}>{children}</Stack>;
}

/**
 * 個別のアコーディオンアイテム（<div> ベース、setEvent で開閉イベントを登録）
 */
export function AccordionItem({ children, ...props }) {
	const ref = React.useRef(null);

	// コンポーネント単位でユニークIDを生成
	const accID = React.useId();

	// マウント時に開閉イベントを登録（アンマウント時にクリーンアップ）
	React.useEffect(() => {
		if (!ref.current) return;
		return setEvent(ref.current);
	}, []);

	const lismProps = getLismProps(getItemProps(props));

	return (
		<AccordionContext.Provider value={{ accID }}>
			<div ref={ref} {...lismProps}>
				{children}
			</div>
		</AccordionContext.Provider>
	);
}

/**
 * 見出しエリアのラッパー（デフォルトは <div role="heading">）
 * as に h2〜h6 を指定すると role は付与されない
 */
export function Heading({ children, ...props }) {
	return <Lism {...getHeadingProps(props)}>{children}</Lism>;
}

/**
 * 開閉トリガーボタン
 * accID: Context から取得できればそれを優先、なければ props / プレースホルダー
 */
export function Button({ children, accID: _accID = '__LISM_ACC_ID__', ...props }) {
	const ctx = React.useContext(AccordionContext);
	const accID = ctx?.accID || _accID;

	return (
		<Lism {...defaultProps.button} {...props} aria-controls={accID} aria-expanded='false'>
			{children}
			<AccIcon />
		</Lism>
	);
}

/**
 * パネル
 */
export function Panel({ children, ...props }) {
	const ctx = React.useContext(AccordionContext);
	const { panelProps, contentProps } = getPanelProps({ _contextID: ctx?.accID, ...props });

	return (
		<Lism {...panelProps}>
			<Lism {...contentProps}>{children}</Lism>
		</Lism>
	);
}