@navinc/base-react-components
Version:
Nav's Pattern Library
77 lines (75 loc) • 4.67 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { styled, useTheme } from 'styled-components';
// @ts-expect-error -- mui doesn't support ESM
import muiAccordionPkg, { accordionClasses } from '@mui/material/node/Accordion/index.js';
// @ts-expect-error -- mui doesn't support ESM
import muiAccordionSummaryPkg from '@mui/material/node/AccordionSummary/index.js';
// @ts-expect-error -- mui doesn't support ESM
import muiAccordionDetailsPkg from '@mui/material/node/AccordionDetails/index.js';
import { Icon } from './icon.js';
import { isKeyOf, interopDefault } from '@navinc/utils';
const MuiAccordion = interopDefault(muiAccordionPkg);
const MuiAccordionSummary = interopDefault(muiAccordionSummaryPkg);
const MuiAccordionDetails = interopDefault(muiAccordionDetailsPkg);
const AccordionFold = (_a) => {
var { open, setOpen, fold, disabled, withPadding = false, styleOverrides, icon } = _a, props = __rest(_a, ["open", "setOpen", "fold", "disabled", "withPadding", "styleOverrides", "icon"]);
const navTheme = useTheme();
const { background, divider } = styleOverrides || {};
const handleChange = (panel) => (_event, expanded) => {
if (setOpen) {
setOpen(expanded ? panel : false);
}
};
return (_jsxs(MuiAccordion, Object.assign({ disableGutters: true, elevation: 0, disabled: disabled || fold.disabled, "data-testid": `accordion:fold ${fold.id}` }, props, (setOpen && { onChange: handleChange(fold.id), expanded: open === fold.id }), { sx: {
'&:before': {
background: isKeyOf(divider, navTheme.colors) ? navTheme.colors[divider] : navTheme.colors.navNeutral100,
height: '2px',
},
[`&.${accordionClasses.expanded}:before`]: {
opacity: 1,
},
[`&.${accordionClasses.expanded}+.${accordionClasses.root}.${accordionClasses.expanded}:before`]: {
display: 'inline',
},
[`&.${accordionClasses.disabled}`]: {
opacity: '38%',
},
background: isKeyOf(background, navTheme.colors)
? navTheme.colors[background]
: navTheme.colors.navNeutralLight,
}, children: [_jsx(MuiAccordionSummary, { "aria-controls": `${fold.id}-content`, id: `${fold.id}-header`, "data-testid": "accordion:fold-header", expandIcon: icon || _jsx(Icon, { name: "actions/carrot-down" }), sx: {
padding: withPadding ? '0 16px' : '0',
}, children: fold.header }), _jsx(MuiAccordionDetails, { "data-testid": "accordion:fold-details", sx: {
padding: withPadding ? '0 16px 16px' : '0',
}, children: fold.details })] })));
};
/**
* @deprecated use the wayfinder accordion from @navinc/base-react-components/wayfinder instead
*
* Based off MUI's Accordion and takes advantage of its built in accessibility features. This component can be used uncontrolled out of the box. The uncontrolled basic accordion allows user to open all the folds. You can pass `defaultExpanded=true` to initially render with all the folds open. You can also control this accordion. A controlled accordion only opens 1 panel at a time.
* The options passed in, of type ContentType[], allows you to disable specific folds. Passing `disabled` to the component will disable the entire accordion.
* ```
* type ContentType = {
* id: string
* header: ReactNode
* details: ReactNode
* disabled?: boolean
* }
* ```
**/
export const Accordion = styled((_a) => {
var { className, open, setOpen, content = [], 'data-testid': dataTestId, styleOverrides, icon } = _a, props = __rest(_a, ["className", "open", "setOpen", "content", 'data-testid', "styleOverrides", "icon"]);
return (_jsx("div", { className: className, "data-testid": `accordion ${dataTestId}`, children: content.map((fold) => (_jsx(AccordionFold, Object.assign({ open: open, setOpen: setOpen, fold: fold, styleOverrides: styleOverrides, icon: icon }, props), fold.id))) }));
}).withConfig({ displayName: "brc-sc-Accordion", componentId: "brc-sc-125okk9" }) ``;
//# sourceMappingURL=accordion.js.map