@zendeskgarden/react-accordions
Version:
Components related to accordions in the Garden Design System
70 lines (67 loc) • 2.59 kB
JavaScript
/**
* Copyright Zendesk, Inc.
*
* Use of this source code is governed under the Apache License, Version 2.0
* found at http://www.apache.org/licenses/LICENSE-2.0.
*/
import React__default, { forwardRef } from 'react';
import '../../../utils/useStepperContext.js';
import '../../../utils/useStepContext.js';
import { useAccordionContext } from '../../../utils/useAccordionContext.js';
import { useSectionContext } from '../../../utils/useSectionContext.js';
import '../../../utils/useHeaderContext.js';
import '../../../utils/useTimelineContext.js';
import '../../../utils/useTimelineItemContext.js';
import '../../../styled/stepper/StyledStep.js';
import '../../../styled/stepper/StyledContent.js';
import '../../../styled/stepper/StyledInnerContent.js';
import '../../../styled/stepper/StyledLine.js';
import '../../../styled/stepper/StyledStepper.js';
import '../../../styled/stepper/StyledIcon.js';
import '../../../styled/stepper/StyledLabel.js';
import '../../../styled/stepper/StyledLabelText.js';
import '../../../styled/accordion/StyledAccordion.js';
import '../../../styled/accordion/StyledSection.js';
import '../../../styled/accordion/StyledHeader.js';
import '../../../styled/accordion/StyledButton.js';
import { StyledPanel } from '../../../styled/accordion/StyledPanel.js';
import { StyledInnerPanel } from '../../../styled/accordion/StyledInnerPanel.js';
import '../../../styled/accordion/StyledRotateIcon.js';
import '../../../styled/timeline/StyledTimeline.js';
import '../../../styled/timeline/StyledItem.js';
import '../../../styled/timeline/StyledItemIcon.js';
import '../../../styled/timeline/StyledContent.js';
import '../../../styled/timeline/StyledOppositeContent.js';
import '../../../styled/timeline/StyledSeparator.js';
const PanelComponent = forwardRef(({
role,
children,
...props
}, ref) => {
const {
isAnimated,
isBare,
isCompact,
expandedSections,
getPanelProps
} = useAccordionContext();
const sectionValue = useSectionContext();
const isExpanded = expandedSections.includes(sectionValue);
return React__default.createElement(StyledPanel, Object.assign({
inert: isExpanded ? undefined : '',
$isAnimated: isAnimated,
$isBare: isBare,
$isCompact: isCompact,
$isExpanded: isExpanded
}, getPanelProps({
role: role === undefined ? null : 'region',
ref,
value: sectionValue,
...props
})), React__default.createElement(StyledInnerPanel, {
$isAnimated: isAnimated
}, children));
});
PanelComponent.displayName = 'Accordion.Panel';
const Panel = PanelComponent;
export { Panel };