@nex-ui/react
Version:
🎉 A beautiful, modern, and reliable React component library.
70 lines (67 loc) • 2.14 kB
JavaScript
"use client";
import { jsx } from 'react/jsx-runtime';
import { nex } from '@nex-ui/styled';
import { useId, useMemo } from 'react';
import { useModal, ModalProvider } from './ModalContext.mjs';
import { modalContentRecipe } from '../../theme/recipes/modal.mjs';
import { useSlotProps } from '../utils/useSlotProps.mjs';
import { FocusTrap } from '../focusTrap/FocusTrap.mjs';
const style = modalContentRecipe();
const useAriaProps = (props)=>{
const { role = 'dialog', tabIndex = -1 } = props;
const labelledBy = props['aria-labelledby'];
const describedBy = props['aria-describedby'];
return useMemo(()=>{
return {
role,
tabIndex,
'aria-modal': true,
'aria-labelledby': labelledBy,
'aria-describedby': describedBy
};
}, [
describedBy,
labelledBy,
role,
tabIndex
]);
};
const ModalContent = (inProps)=>{
const props = inProps;
const labelId = useId();
const describtionId = useId();
const modalState = useModal();
const labelledBy = props['aria-labelledby'] ?? modalState['aria-labelledby'] ?? labelId;
const describedBy = props['aria-describedby'] ?? modalState['aria-describedby'] ?? describtionId;
const ariaProps = useAriaProps({
...props,
'aria-labelledby': labelledBy,
'aria-describedby': describedBy
});
const rootProps = useSlotProps({
style,
externalForwardedProps: props,
a11y: ariaProps
});
const ctx = useMemo(()=>({
...modalState,
'aria-labelledby': labelledBy,
'aria-describedby': describedBy
}), [
describedBy,
labelledBy,
modalState
]);
return /*#__PURE__*/ jsx(ModalProvider, {
value: ctx,
children: /*#__PURE__*/ jsx(FocusTrap, {
active: modalState.open,
restoreFocus: modalState.restoreFocus,
children: /*#__PURE__*/ jsx(nex.section, {
...rootProps
})
})
});
};
ModalContent.displayName = 'ModalContent';
export { ModalContent };