@yamada-ui/react/dist/cjs/components/accordion/use-accordion.cjs

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_context = require('../../utils/context.cjs');
const require_dom = require('../../utils/dom.cjs');
const require_ref = require('../../utils/ref.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_hooks_use_controllable_state_index = require('../../hooks/use-controllable-state/index.cjs');
const require_hooks_use_descendants_index = require('../../hooks/use-descendants/index.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);

//#region src/components/accordion/use-accordion.ts
const { DescendantsContext: AccordionDescendantsContext, useDescendant: useAccordionDescendant, useDescendants: useAccordionDescendants } = require_hooks_use_descendants_index.createDescendants();
const [AccordionContext, useAccordionContext] = require_context.createContext({ name: "AccordionContext" });
const [AccordionItemContext, useAccordionItemContext] = require_context.createContext({ name: "AccordionItemContext" });
const useAccordion = ({ defaultIndex: defaultIndexProp, index: indexProp, multiple, toggle, onChange,...rest } = {}) => {
	if ((indexProp || defaultIndexProp) != null && !(0, require_utils_index.utils_exports.isArray)(indexProp || defaultIndexProp) && multiple) console.warn(`Accordion: If 'multiple' is passed, then 'index' or 'defaultIndex' must be an array.`);
	if (multiple && toggle) console.warn(`Accordion: If 'multiple' is passed, 'toggle' will be ignored. Either remove 'toggle' or 'multiple' depending on whether you want multiple accordions visible or not`);
	const descendants = useAccordionDescendants();
	const [focusedIndex, setFocusedIndex] = (0, react.useState)(-1);
	const [index, setIndex] = require_hooks_use_controllable_state_index.useControllableState({
		defaultValue: () => multiple ? defaultIndexProp ?? [] : defaultIndexProp ?? -1,
		value: indexProp,
		onChange
	});
	const getRootProps = (0, react.useCallback)(({ ref,...props } = {}) => ({
		...props,
		...rest,
		ref: require_ref.mergeRefs(ref, rest.ref)
	}), [rest]);
	(0, react.useEffect)(() => {
		return () => setFocusedIndex(-1);
	}, []);
	return {
		descendants,
		focusedIndex,
		index,
		multiple,
		setFocusedIndex,
		setIndex,
		toggle,
		getRootProps
	};
};
const useAccordionItem = ({ disabled, index,...rest }) => {
	const itemId = (0, react.useId)();
	const panelId = (0, react.useId)();
	const { index: selectedIndex, multiple, setFocusedIndex, setIndex, toggle } = useAccordionContext();
	const { descendants, register } = useAccordionDescendant({ disabled });
	const open = index !== -1 ? (0, require_utils_index.utils_exports.isArray)(selectedIndex) ? selectedIndex.includes(index) : selectedIndex === index : false;
	if (open && disabled) console.warn(`Accordion: Cannot open a disabled accordion item`);
	const onChange = (0, react.useCallback)((open$1) => {
		if (index === -1) return;
		if (multiple && (0, require_utils_index.utils_exports.isArray)(selectedIndex)) setIndex(open$1 ? selectedIndex.concat(index) : selectedIndex.filter((i) => i !== index));
		else if (open$1) setIndex(index);
		else if (toggle) setIndex(-1);
	}, [
		multiple,
		toggle,
		index,
		selectedIndex,
		setIndex
	]);
	const onFocus = (0, react.useCallback)(() => {
		setFocusedIndex(index);
	}, [setFocusedIndex, index]);
	const onClick = (0, react.useCallback)(() => {
		onChange(!open);
		setFocusedIndex(index);
	}, [
		index,
		setFocusedIndex,
		open,
		onChange
	]);
	const onKeyDown = (0, react.useCallback)((ev) => {
		require_dom.runKeyAction(ev, {
			ArrowDown: () => {
				descendants.enabledNextValue(index)?.node.focus();
			},
			ArrowUp: () => {
				descendants.enabledPrevValue(index)?.node.focus();
			},
			End: () => {
				descendants.enabledLastValue()?.node.focus();
			},
			Home: () => {
				descendants.enabledFirstValue()?.node.focus();
			}
		});
	}, [descendants, index]);
	const getItemProps = (0, react.useCallback)(({ ref,...props } = {}) => ({
		"data-expanded": (0, require_utils_index.utils_exports.dataAttr)(open),
		...props,
		...rest,
		ref: require_ref.mergeRefs(ref, rest.ref)
	}), [open, rest]);
	const getButtonProps = (0, react.useCallback)(({ ref,...props } = {}) => ({
		id: itemId,
		type: "button",
		"aria-controls": panelId,
		"aria-disabled": (0, require_utils_index.utils_exports.ariaAttr)(!multiple && !toggle && open || disabled),
		"aria-expanded": open,
		...props,
		ref: require_ref.mergeRefs(register, ref),
		disabled,
		onClick: (0, require_utils_index.utils_exports.handlerAll)(props.onClick, onClick),
		onFocus: (0, require_utils_index.utils_exports.handlerAll)(props.onFocus, onFocus),
		onKeyDown: (0, require_utils_index.utils_exports.handlerAll)(props.onKeyDown, onKeyDown)
	}), [
		itemId,
		open,
		panelId,
		multiple,
		toggle,
		disabled,
		register,
		onClick,
		onFocus,
		onKeyDown
	]);
	const getPanelProps = (0, react.useCallback)(({ "aria-labelledby": ariaLabelledby,...props } = {}) => ({
		id: panelId,
		"aria-labelledby": (0, require_utils_index.utils_exports.cx)(ariaLabelledby, itemId),
		role: "region",
		...props
	}), [itemId, panelId]);
	return {
		disabled,
		open,
		getButtonProps,
		getIconProps: (0, react.useCallback)((props) => ({
			"aria-disabled": (0, require_utils_index.utils_exports.ariaAttr)(disabled),
			"aria-expanded": open,
			"aria-hidden": true,
			role: "presentation",
			...props
		}), [open, disabled]),
		getItemProps,
		getPanelProps
	};
};

//#endregion
exports.AccordionContext = AccordionContext;
exports.AccordionDescendantsContext = AccordionDescendantsContext;
exports.AccordionItemContext = AccordionItemContext;
exports.useAccordion = useAccordion;
exports.useAccordionContext = useAccordionContext;
exports.useAccordionDescendant = useAccordionDescendant;
exports.useAccordionDescendants = useAccordionDescendants;
exports.useAccordionItem = useAccordionItem;
exports.useAccordionItemContext = useAccordionItemContext;
//# sourceMappingURL=use-accordion.cjs.map