@atlaskit/menu/dist/cjs/menu-section/section.js

A list of options to help users navigate, or perform actions.

/* section.tsx generated by @compiled/babel-plugin v0.39.1 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("./section.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _headingItem = _interopRequireDefault(require("../menu-item/heading-item"));
var _excluded = ["children", "title", "titleId", "testId", "isScrollable", "hasSeparator", "id", "isList", "isSideNavSection", "label", "className"];
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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: "_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)
 */
var Section = /*#__PURE__*/(0, _react.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,
    label = _ref.label,
    UNSAFE_className = _ref.className,
    rest = (0, _objectWithoutProperties2.default)(_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
    }
  }, _react.Children.map(_react.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(_react.Fragment, null, /*#__PURE__*/React.createElement(_headingItem.default, {
    testId: testId && "".concat(testId, "--heading"),
    "aria-hidden": true
    // @ts-expect-error
    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
    ,
    className: (0, _runtime.ax)([isSideNavSection && styles.sideNavSectionHeading])
  }, title), content) : /*#__PURE__*/React.createElement(_react.Fragment, null, content);
  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, rest, {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    className: (0, _runtime.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);
});
var _default = exports.default = Section;