@atlaskit/page/dist/cjs/grid.js

A page layout organizes sections on a page using a grid and grid columns.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Grid = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _constants = require("./constants");
var _gridContext = require("./grid-context");
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

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

var gridStyles = (0, _react2.css)({
  display: 'flex',
  margin: '0 auto',
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  padding: "0 calc(var(".concat(_constants.varGridSpacing, ") / 2)"),
  position: 'relative',
  alignItems: 'flex-start',
  flexWrap: 'wrap'
});
var gridLayoutStyles = {
  fixed: (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
    maxWidth: "calc(var(".concat(_constants.varColumnsNum, ") * ").concat(_constants.defaultGridColumnWidth, "px)")
  }),
  fluid: (0, _react2.css)({
    maxWidth: '100%'
  })
};
var nestedGridStyles = (0, _react2.css)({
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  margin: "0 calc(-1 * var(".concat(_constants.varGridSpacing, "))")
});

/**
 * __Grid__
 *
 * A container for one or more `GridColumn`.
 *
 * This is the internal component, which relies on the context provided by the
 * grid wrapper.
 *
 * @internal
 */
var Grid = exports.Grid = function Grid(_ref) {
  var _ref$layout = _ref.layout,
    layout = _ref$layout === void 0 ? _constants.defaultLayout : _ref$layout,
    testId = _ref.testId,
    children = _ref.children;
  var _useContext = (0, _react.useContext)(_gridContext.GridContext),
    isNested = _useContext.isNested,
    columns = _useContext.columns,
    spacing = _useContext.spacing;
  return (0, _react2.jsx)("div", {
    css: [gridStyles, gridLayoutStyles[layout], isNested && nestedGridStyles]
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
    ,
    style: (0, _defineProperty2.default)((0, _defineProperty2.default)({}, _constants.varColumnsNum, columns), _constants.varGridSpacing, "".concat(_constants.spacingMapping[spacing], "px")),
    "data-testid": testId
  }, children);
};