@atlaskit/navigation-system/dist/esm/ui/page-layout/main/main.js

The latest navigation system for Atlassian apps.

/* main.tsx generated by @compiled/babel-plugin v3.0.2 */
import "./main.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { Fragment } from 'react';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import { useSkipLink } from '../../../context/skip-links/use-skip-link';
import { defaultMainMinWidth, mainMinimumWidthVar } from '../constants';
import { MainMinWidthContext } from '../main-min-width-context';
import { gridRootFitId, gridRootId } from '../root';
import { useLayoutId } from '../use-layout-id';
import { useLayoutMainSizing } from '../use-layout-main-sizing';
var contentInsetBlockStartStatic = "calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))";
var contentHeightWhenFixedStatic = "calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))";
var mainElementStyles = {
  root: "_nd5l1gzg _1reo1wug _18m91wug _19121cl4 _152timx3 _4t3ieqxy _8rrs1wug _qwfh1wug _13wn1if8"
};

/**
 * Use the Main area for the main page content. It has a fluid width and will expand to fill available space.
 */
export function Main(_ref) {
  var children = _ref.children,
    xcss = _ref.xcss,
    _ref$skipLinkLabel = _ref.skipLinkLabel,
    skipLinkLabel = _ref$skipLinkLabel === void 0 ? fg('platform_dst_nav4_skip_link_a11y_1') ? 'Main content' : 'Main Content' : _ref$skipLinkLabel,
    testId = _ref.testId,
    providedId = _ref.id,
    _ref$minWidth = _ref.minWidth,
    minWidth = _ref$minWidth === void 0 ? defaultMainMinWidth : _ref$minWidth;
  var id = useLayoutId({
    providedId: providedId
  });
  useLayoutMainSizing(minWidth);
  useSkipLink(id, skipLinkLabel);
  return /*#__PURE__*/React.createElement(Fragment, null, fg('platform-dst-chat-panel-layout') &&
  /*#__PURE__*/
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles
  React.createElement("style", null, "#".concat(gridRootId, ", #").concat(gridRootFitId, " { ").concat(mainMinimumWidthVar, ": ").concat(minWidth, "px; }")), /*#__PURE__*/React.createElement("div", {
    id: id,
    "data-layout-slot": true,
    className: ax([mainElementStyles.root, xcss]),
    role: "main",
    "data-testid": testId
  }, /*#__PURE__*/React.createElement(MainMinWidthContext.Provider, {
    value: fg('platform-dst-chat-panel-layout') ? minWidth : defaultMainMinWidth
  }, children)));
}