@atlaskit/navigation-system/dist/es2019/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';
const contentInsetBlockStartStatic = `calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))`;
const contentHeightWhenFixedStatic = `calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))`;
const 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({
  children,
  xcss,
  skipLinkLabel = fg('platform_dst_nav4_skip_link_a11y_1') ? 'Main content' : 'Main Content',
  testId,
  id: providedId,
  minWidth = defaultMainMinWidth
}) {
  const id = useLayoutId({
    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, `#${gridRootId}, #${gridRootFitId} { ${mainMinimumWidthVar}: ${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)));
}