@atlaskit/menu
Version:
A list of options to help users navigate, or perform actions.
93 lines (91 loc) • 4.29 kB
JavaScript
/* section.tsx generated by @compiled/babel-plugin v0.36.1 */
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["children", "title", "titleId", "testId", "isScrollable", "hasSeparator", "id", "isList", "isSideNavSection", "className"];
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';
var itemHeadingTopMargin = 20;
var 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.
var itemHeadingContentHeight = 16; // Originally headingSizes.h100.lineHeight from '@atlaskit/theme/typography'
var skeletonHeadingHeight = 8;
var skeletonHeadingMarginOffset = 3;
var skeletonHeadingTopMargin = itemHeadingTopMargin + (itemHeadingContentHeight - skeletonHeadingHeight) - skeletonHeadingMarginOffset;
var sectionPaddingTopBottom = 6;
var styles = {
root: "_1ywu1ule _cfu11ule _1qdgi2wt _kfgti2wt _aetrb3bt _1kt9b3bt _1p3hi2wt _1l6bgktf _osbldlk8 _auo4rdoj _hp2110yn _1mfv8jkm _1bg41n1a",
scrollable: "_1reo1wug _18m91wug _1o9zkb7n",
unscrollable: "_1o9zidpf",
thinSeparator: "_mqm21imm",
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)
*/
var Section = /*#__PURE__*/forwardRef(function (_ref, ref) {
var children = _ref.children,
title = _ref.title,
titleId = _ref.titleId,
testId = _ref.testId,
isScrollable = _ref.isScrollable,
hasSeparator = _ref.hasSeparator,
id = _ref.id,
_ref$isList = _ref.isList,
isList = _ref$isList === void 0 ? false : _ref$isList,
_ref$isSideNavSection = _ref.isSideNavSection,
isSideNavSection = _ref$isSideNavSection === void 0 ? false : _ref$isSideNavSection,
UNSAFE_className = _ref.className,
rest = _objectWithoutProperties(_ref, _excluded);
var 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), function (child, index) {
return /*#__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;
var childrenMarkup = title !== undefined ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(HeadingItem, {
testId: testId && "".concat(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,
"aria-labelledby": titleId,
"data-testid": testId,
role: "group",
"data-section": true,
ref: ref
}), childrenMarkup);
});
export default Section;