@porsche-design-system/components-react
Version:
Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.
47 lines (44 loc) • 3.32 kB
JavaScript
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { Component } from 'react';
import '../../provider.mjs';
import { splitChildren } from '../../splitChildren.mjs';
import { minifyCss } from '../../minifyCss.mjs';
import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
import { getFlyoutCss as getComponentCss$S } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
import { parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
import { PButton } from '../components/button.wrapper.mjs';
/**
* @slot {"name": "header", "description": "Renders a sticky header section above the content area." }
* @slot {"name": "", "description": "Default slot for the main content." }
* @slot {"name": "footer", "description": "Shows a sticky footer section, flowing under the content area when scrollable." }
* @slot {"name": "sub-footer", "description": "Shows a sub-footer section to display additional information below the footer. This slot is ideal for less critical content, such as legal information or FAQs, which provides further details to the user. It appears when scrolling to the end of the flyout or when there is available space to accommodate the content." }
*
* @controlled {"props": ["open"], "event": "dismiss"}
*/
class DSRFlyout extends Component {
host;
dialog;
scroller;
header;
footer;
hasHeader;
hasFooter;
hasSubFooter;
render() {
const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
const positionDeprecationMap = {
left: 'start',
right: 'end',
};
const hasHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;
const hasFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'footer').length > 0;
const hasSubFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sub-footer').length > 0;
const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$S(this.props.open, (positionDeprecationMap[this.props.position] || this.props.position), hasHeader, hasFooter, hasSubFooter, this.props.footerBehavior, this.props.theme)));
return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("dialog", { tabIndex: -1, ...parseAndGetAriaAttributes({
'aria-modal': true,
...{ 'aria-label': hasHeader ? namedSlotChildren.find(({ props: { slot } }) => slot === 'header')?.props.children : 'Flyout' },
...parseAndGetAriaAttributes(this.props.aria),
}), children: jsx("div", { className: "scroller", children: jsxs("div", { className: "flyout", children: [jsx(PButton, { variant: "ghost", className: "dismiss", type: "button", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss flyout" }), hasHeader && jsx("slot", { name: "header" }), jsx("slot", {}), hasFooter && jsx("slot", { name: "footer" }), hasSubFooter && jsx("slot", { name: "sub-footer" })] }) }) })] }), this.props.children] }));
}
}
export { DSRFlyout };