@atlaskit/page/dist/cjs/grid-column.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.default = exports.GridColumnContext = 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
/**
 * Determines the method by which column width is calculated.
 */
var ColumnVariant = /*#__PURE__*/function (ColumnVariant) {
  ColumnVariant["Auto"] = "auto";
  ColumnVariant["Bounded"] = "bounded";
  ColumnVariant["FullWidth"] = "fullWidth";
  return ColumnVariant;
}(ColumnVariant || {});
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;
};

/**
 * 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 availableWidth = '99.9999%';
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
var singleColumnWidth = "(".concat(availableWidth, " / var(").concat(_constants.varColumnsNum, "))");
var gridColumnStyles = (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
  minWidth: "calc(".concat(singleColumnWidth, " - var(").concat(_constants.varGridSpacing, "))"),
  // 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(var(".concat(_constants.varGridSpacing, ") / 2)"),
  flexGrow: 1,
  flexShrink: 0,
  wordWrap: 'break-word'
});
var gridColumnWidthStyles = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ColumnVariant.Auto, (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(100% - var(".concat(_constants.varGridSpacing, "))"),
  flexBasis: "auto"
})), ColumnVariant.Bounded, (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(".concat(singleColumnWidth, " *  var(").concat(_constants.varColumnSpan, ") - var(").concat(_constants.varGridSpacing, "))"),
  flexBasis: "100%"
})), ColumnVariant.FullWidth, (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(100% - var(".concat(_constants.varGridSpacing, "))"),
  flexBasis: "100%"
}));

/**
 * __Grid column context__
 *
 * @internal
 */
var GridColumnContext = exports.GridColumnContext = /*#__PURE__*/(0, _react.createContext)({
  medium: _constants.defaultMedium
});

/**
 * __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 (0, _react2.jsx)(GridColumnContext.Provider, {
    value: contextValue
  }, (0, _react2.jsx)("div", {
    css: [gridColumnStyles, gridColumnWidthStyles[variant]]
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
    ,
    style: (0, _defineProperty2.default)({}, _constants.varColumnSpan, variant === ColumnVariant.Auto ? 'auto' : colSpan),
    "data-testid": testId
  }, children));
};
var _default = exports.default = GridColumn;