@atlaskit/page-layout/dist/cjs/components/slots/main.js

A collection of components which let you compose an application's page layout.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _accessibility = require("@atlaskit/motion/accessibility");
var _curves = require("@atlaskit/motion/curves");
var _constants = require("../../common/constants");
var _hooks = require("../../common/hooks");
var _utils = require("../../common/utils");
var _controllers = require("../../controllers");
var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"));
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
var prefersReducedMotionStyles = (0, _react2.css)((0, _accessibility.prefersReducedMotion)());
var mainStyles = (0, _react2.css)({
  minWidth: 0,
  flexGrow: 1,
  marginInlineStart: 0,
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  transition: "margin-left ".concat(_constants.TRANSITION_DURATION, "ms ").concat(_curves.easeOut, " 0s")
});
var draggingStyles = (0, _react2.css)({
  // Make sure drag to resize remains snappy.
  transition: 'none'
});

/**
 * Adds a negative left margin to main,
 * which transitions at the same speed as the left sidebar's width increase.
 * This give an illusion that the flyout is appearing on top of the main content,
 * while main remains in place.
 */
var flyoutStyles = (0, _react2.css)({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  marginInlineStart: "calc(-1 * var(--".concat(_constants.VAR_LEFT_SIDEBAR_FLYOUT, ", ").concat(_constants.DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, "px) + ").concat(_constants.COLLAPSED_LEFT_SIDEBAR_WIDTH, "px)")
});

/**
 * __Main__
 *
 * Provides a slot for main content within the PageLayout.
 *
 * - [Examples](https://atlassian.design/components/page-layout/examples)
 * - [Code](https://atlassian.design/components/page-layout/code)
 */
var Main = function Main(props) {
  var children = props.children,
    testId = props.testId,
    id = props.id,
    skipLinkTitle = props.skipLinkTitle;
  (0, _controllers.useSkipLink)(id, skipLinkTitle);
  var isDragging = (0, _hooks.useIsSidebarDragging)();
  var _useContext = (0, _react.useContext)(_controllers.SidebarResizeContext),
    _useContext$leftSideb = _useContext.leftSidebarState,
    isFlyoutOpen = _useContext$leftSideb.isFlyoutOpen,
    isFixed = _useContext$leftSideb.isFixed;
  return (0, _react2.jsx)(_slotFocusRing.default, null, function (_ref) {
    var className = _ref.className;
    return (0, _react2.jsx)("main", (0, _extends2.default)({
      "data-testid": testId,
      css: [mainStyles, isDragging && draggingStyles, isFlyoutOpen && !isFixed && flyoutStyles, prefersReducedMotionStyles]
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
      ,
      className: className,
      id: id
    }, (0, _utils.getPageLayoutSlotSelector)('main')), children);
  });
};
var _default = exports.default = Main;