@atlaskit/menu
Version:
A list of options to help users navigate, or perform actions.
93 lines (91 loc) • 3.92 kB
JavaScript
/* section.tsx generated by @compiled/babel-plugin v0.39.1 */
import _extends from "@babel/runtime/helpers/extends";
import "./section.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { Children, forwardRef, Fragment } from 'react';
import HeadingItem from '../menu-item/heading-item';
const itemHeadingTopMargin = 20;
const itemHeadingBottomMargin = 6;
// Skeleton content is slightly shorter than the real content.
// Because of that we slightly increase the top margin to offset this so the
// containing size both real and skeleton always equal approx 30px.
const itemHeadingContentHeight = 16; // Originally headingSizes.h100.lineHeight from '@atlaskit/theme/typography'
const skeletonHeadingHeight = 8;
const skeletonHeadingMarginOffset = 3;
const skeletonHeadingTopMargin = itemHeadingTopMargin + (itemHeadingContentHeight - skeletonHeadingHeight) - skeletonHeadingMarginOffset;
const sectionPaddingTopBottom = 6;
const styles = {
root: "_1ywu1ule _cfu11ule _1qdgi2wt _kfgti2wt _aetrb3bt _1kt9b3bt _1p3hi2wt _1l6bgktf _osbldlk8 _auo4rdoj _hp2110yn _1mfv8jkm _1bg41n1a",
scrollable: "_1reo1wug _18m91wug _1o9zkb7n",
unscrollable: "_1o9zidpf",
thinSeparator: "_mqm2lllh",
noSeparator: "_n7cnyjp0",
sideNavSectionHeading: "_18zru2gc"
};
/**
* __Section__
*
* A section includes related actions or items in a menu.
*
* - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/section)
* - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
*/
const Section = /*#__PURE__*/forwardRef(({
children,
title,
titleId,
testId,
isScrollable,
hasSeparator,
id,
isList = false,
isSideNavSection = false,
label,
// Although this isn't defined on props it is available because we've used
// Spread props below and on the jsx element. To forcibly block usage I've
// picked it out and supressed the expected type error.
// @ts-expect-error
className: UNSAFE_className,
...rest
}, ref) => {
const content = isList ? /*#__PURE__*/React.createElement("ul", {
style: {
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
margin: 0,
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
padding: 0
}
}, Children.map(Children.toArray(children), (child, index) => /*#__PURE__*/React.createElement("li", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
style: {
listStyleType: 'none',
margin: 0,
padding: 0
},
key: index
}, child))) : children;
const childrenMarkup = title !== undefined ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(HeadingItem, {
testId: testId && `${testId}--heading`,
"aria-hidden": true
// @ts-expect-error
// eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
,
className: ax([isSideNavSection && styles.sideNavSectionHeading])
}, title), content) : /*#__PURE__*/React.createElement(Fragment, null, content);
return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: ax([styles.root, isScrollable ? styles.scrollable : styles.unscrollable, hasSeparator ? styles.thinSeparator : styles.noSeparator, UNSAFE_className]),
id: id
// NOTE: Firefox allows elements that have "overflow: auto" to gain focus (as if it had tab-index="0")
// We have made a deliberate choice to leave this behaviour as is.
,
"aria-label": title || label,
"aria-labelledby": titleId,
"data-testid": testId,
role: "group",
"data-section": true,
ref: ref
}), childrenMarkup);
});
export default Section;