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

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

/* grid-column.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("./grid-column.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _constants = require("./constants");
var _gridColumnContext = require("./grid-column-context");
var _gridContext = require("./grid-context");
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); }
/**
 * Determines the method by which column width is calculated.
 */
var ColumnVariant = /*#__PURE__*/function (ColumnVariant) {
  /**
   * Column occupies available space.
   *
   * Used when `medium` is 0 (the default).
   */
  ColumnVariant["Auto"] = "auto";
  /**
   * Column occupies specified space.
   *
   * Used when 0 < `medium` < `columns`.
   */
  ColumnVariant["Bounded"] = "bounded";
  /**
   * Column occupies entire row.
   *
   * Used when `medium` >= `columns`.
   *
   * This case is handled separately because of rounding.
   */
  ColumnVariant["FullWidth"] = "fullWidth";
  return ColumnVariant;
}(ColumnVariant || {});
/**
 * The spacing (in `px`) between each column.
 */
var varGridSpacing = '--ds-grid-spacing';

/**
 * The number of columns that a `GridColumn` covers.
 */
var varColumnSpan = '--ds-column-span';

/**
 * IE11 and Edge both have rounding issues for flexbox which is why a width of
 * 99.9999% is used. Using 100% here causes columns to wrap prematurely.
 */
var singleColumnWidth = "(99.9999% / var(--ds-columns-num))";
var styles = {
  gridColumn: "_19pkidpf _2hwxwx3y _otyridpf _18u0wx3y _1ul9hrtj _16jlkb7n _1o9zidpf _slp31hna"
};
var gridColumnWidthMapStyles = {
  auto: "_p12f1ho1 _i0dl1wug",
  bounded: "_p12fpg3g _i0dl1osq",
  fullWidth: "_p12f1ho1 _i0dl1osq"
};
var getVariant = function getVariant(_ref) {
  var medium = _ref.medium,
    columns = _ref.columns;
  if (medium === _constants.defaultMedium) {
    return ColumnVariant.Auto;
  } else if (medium < columns) {
    return ColumnVariant.Bounded;
  }
  return ColumnVariant.FullWidth;
};

/**
 * __Grid column__
 *
 * A grid column can span one or more column positions within a grid.
 *
 * - [Examples](https://atlaskit.atlassian.com/packages/design-system/page)
 */
var GridColumn = function GridColumn(_ref2) {
  var _ref2$medium = _ref2.medium,
    medium = _ref2$medium === void 0 ? _constants.defaultMedium : _ref2$medium,
    children = _ref2.children,
    testId = _ref2.testId;
  var _useContext = (0, _react.useContext)(_gridContext.GridContext),
    columns = _useContext.columns;
  var contextValue = (0, _react.useMemo)(function () {
    return {
      medium: medium
    };
  }, [medium]);

  /**
   * The real column span,
   * obtained by clamping the passed `medium` value within the allowed range.
   */
  var colSpan = Math.max(1, Math.min(medium, columns));

  /**
   * How we should calculate the column width.
   */
  var variant = getVariant({
    medium: medium,
    columns: columns
  });
  return /*#__PURE__*/React.createElement(_gridColumnContext.GridColumnContext.Provider, {
    value: contextValue
  }, /*#__PURE__*/React.createElement("div", {
    style: (0, _defineProperty2.default)({}, varColumnSpan, variant === ColumnVariant.Auto ? 'auto' : colSpan),
    "data-testid": testId,
    className: (0, _runtime.ax)([styles.gridColumn, gridColumnWidthMapStyles[variant]])
  }, children));
};
var _default = exports.default = GridColumn;