@commercetools-uikit/grid
Version:
The Grid component can be used to implement layouts using CSS-Grid.
76 lines (72 loc) • 12.8 kB
JavaScript
import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
import _Object$getOwnPropertyDescriptor from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor';
import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/for-each';
import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/esm/objectWithoutProperties';
import { css } from '@emotion/react';
import _styled from '@emotion/styled/base';
import { jsx } from '@emotion/react/jsx-runtime';
const _excluded = ["display"];
function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
const GridItem = props => jsx("div", {
css: /*#__PURE__*/css({
gridArea: props.gridArea,
gridColumn: props.gridColumn,
gridColumnStart: props.gridColumnStart,
gridColumnEnd: props.gridColumnEnd,
gridRow: props.gridRow,
gridRowStart: props.gridRowStart,
gridRowEnd: props.gridRowEnd,
justifySelf: props.justifySelf,
alignSelf: props.alignSelf,
placeSelf: props.placeSelf
}, process.env.NODE_ENV === "production" ? "" : ";label:GridItem;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImdyaWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStESSIsImZpbGUiOiJncmlkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuZXhwb3J0IHR5cGUgVEdyaWRJdGVtUHJvcHMgPSB7XG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xuICAvLyBMaXN0IGJhc2VkIG9uIGh0dHBzOi8vY3NzLXRyaWNrcy5jb20vc25pcHBldHMvY3NzL2NvbXBsZXRlLWd1aWRlLWdyaWRcbiAgZ3JpZEFyZWE/OiBzdHJpbmc7XG4gIGdyaWRDb2x1bW4/OiBzdHJpbmc7XG4gIGdyaWRDb2x1bW5TdGFydD86IHN0cmluZztcbiAgZ3JpZENvbHVtbkVuZD86IHN0cmluZztcbiAgZ3JpZFJvdz86IHN0cmluZztcbiAgZ3JpZFJvd1N0YXJ0Pzogc3RyaW5nO1xuICBncmlkUm93RW5kPzogc3RyaW5nO1xuICBqdXN0aWZ5U2VsZj86ICdzdGFydCcgfCAnZW5kJyB8ICdjZW50ZXInIHwgJ3N0cmV0Y2gnO1xuICBhbGlnblNlbGY/OiAnc3RhcnQnIHwgJ2VuZCcgfCAnY2VudGVyJyB8ICdzdHJldGNoJztcbiAgcGxhY2VTZWxmPzogJ3N0YXJ0JyB8ICdlbmQnIHwgJ2NlbnRlcicgfCAnc3RyZXRjaCc7XG59O1xuZXhwb3J0IHR5cGUgVEdyaWRQcm9wcyA9IHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbiAgLy8gTGlzdCBiYXNlZCBvbiBodHRwczovL2Nzcy10cmlja3MuY29tL3NuaXBwZXRzL2Nzcy9jb21wbGV0ZS1ndWlkZS1ncmlkXG4gIGRpc3BsYXk/OiAnZ3JpZCcgfCAnaW5saW5lLWdyaWQnO1xuICBncmlkVGVtcGxhdGVDb2x1bW5zPzogc3RyaW5nO1xuICBncmlkVGVtcGxhdGVSb3dzPzogc3RyaW5nO1xuICBncmlkVGVtcGxhdGVBcmVhcz86IHN0cmluZztcbiAgZ3JpZFRlbXBsYXRlPzogc3RyaW5nO1xuICBncmlkQ29sdW1uR2FwPzogc3RyaW5nO1xuICBncmlkUm93R2FwPzogc3RyaW5nO1xuICBncmlkR2FwPzogc3RyaW5nO1xuICBqdXN0aWZ5SXRlbXM/OiAnc3RhcnQnIHwgJ2VuZCcgfCAnY2VudGVyJyB8ICdzdHJldGNoJztcbiAgYWxpZ25JdGVtcz86ICdzdGFydCcgfCAnZW5kJyB8ICdjZW50ZXInIHwgJ3N0cmV0Y2gnO1xuICBwbGFjZUl0ZW1zPzogJ3N0YXJ0JyB8ICdlbmQnIHwgJ2NlbnRlcicgfCAnc3RyZXRjaCc7XG4gIGp1c3RpZnlDb250ZW50PzpcbiAgICB8ICdzdGFydCdcbiAgICB8ICdlbmQnXG4gICAgfCAnY2VudGVyJ1xuICAgIHwgJ3N0cmV0Y2gnXG4gICAgfCAnc3BhY2UtYXJvdW5kJ1xuICAgIHwgJ3NwYWNlLWJldHdlZW4nXG4gICAgfCAnc3BhY2UtZXZlbmx5JztcbiAgYWxpZ25Db250ZW50PzpcbiAgICB8ICdzdGFydCdcbiAgICB8ICdlbmQnXG4gICAgfCAnY2VudGVyJ1xuICAgIHwgJ3N0cmV0Y2gnXG4gICAgfCAnc3BhY2UtYXJvdW5kJ1xuICAgIHwgJ3NwYWNlLWJldHdlZW4nXG4gICAgfCAnc3BhY2UtZXZlbmx5JztcbiAgcGxhY2VDb250ZW50PzpcbiAgICB8ICdzdGFydCdcbiAgICB8ICdlbmQnXG4gICAgfCAnY2VudGVyJ1xuICAgIHwgJ3N0cmV0Y2gnXG4gICAgfCAnc3BhY2UtYXJvdW5kJ1xuICAgIHwgJ3NwYWNlLWJldHdlZW4nXG4gICAgfCAnc3BhY2UtZXZlbmx5JztcbiAgZ3JpZEF1dG9Db2x1bW5zPzogc3RyaW5nO1xuICBncmlkQXV0b1Jvd3M/OiBzdHJpbmc7XG4gIGdyaWRBdXRvRmxvdz86IHN0cmluZztcbiAgZ3JpZD86IHN0cmluZztcbn07XG5cbmNvbnN0IEdyaWRJdGVtID0gKHByb3BzOiBUR3JpZEl0ZW1Qcm9wcykgPT4gKFxuICA8ZGl2XG4gICAgY3NzPXt7XG4gICAgICBncmlkQXJlYTogcHJvcHMuZ3JpZEFyZWEsXG4gICAgICBncmlkQ29sdW1uOiBwcm9wcy5ncmlkQ29sdW1uLFxuICAgICAgZ3JpZENvbHVtblN0YXJ0OiBwcm9wcy5ncmlkQ29sdW1uU3RhcnQsXG4gICAgICBncmlkQ29sdW1uRW5kOiBwcm9wcy5ncmlkQ29sdW1uRW5kLFxuICAgICAgZ3JpZFJvdzogcHJvcHMuZ3JpZFJvdyxcbiAgICAgIGdyaWRSb3dTdGFydDogcHJvcHMuZ3JpZFJvd1N0YXJ0LFxuICAgICAgZ3JpZFJvd0VuZDogcHJvcHMuZ3JpZFJvd0VuZCxcbiAgICAgIGp1c3RpZnlTZWxmOiBwcm9wcy5qdXN0aWZ5U2VsZixcbiAgICAgIGFsaWduU2VsZjogcHJvcHMuYWxpZ25TZWxmLFxuICAgICAgcGxhY2VTZWxmOiBwcm9wcy5wbGFjZVNlbGYsXG4gICAgfX1cbiAgPlxuICAgIHtwcm9wcy5jaGlsZHJlbn1cbiAgPC9kaXY+XG4pO1xuR3JpZEl0ZW0uZGlzcGxheU5hbWUgPSAnR3JpZEl0ZW0nO1xuXG5jb25zdCBHcmlkQ29udGFpbmVyID0gc3R5bGVkLmRpdjxUR3JpZFByb3BzPigocHJvcHMpID0+ICh7XG4gIGRpc3BsYXk6IHByb3BzLmRpc3BsYXksXG4gIGdyaWQ6IHByb3BzLmdyaWQsXG4gIGdyaWRUZW1wbGF0ZTogcHJvcHMuZ3JpZFRlbXBsYXRlLFxuICBncmlkVGVtcGxhdGVDb2x1bW5zOiBwcm9wcy5ncmlkVGVtcGxhdGVDb2x1bW5zLFxuICBncmlkVGVtcGxhdGVSb3dzOiBwcm9wcy5ncmlkVGVtcGxhdGVSb3dzLFxuICBncmlkVGVtcGxhdGVBcmVhczogcHJvcHMuZ3JpZFRlbXBsYXRlQXJlYXMsXG4gIGdyaWRHYXA6IHByb3BzLmdyaWRHYXAsXG4gIGdyaWRDb2x1bW5HYXA6IHByb3BzLmdyaWRDb2x1bW5HYXAsXG4gIGdyaWRSb3dHYXA6IHByb3BzLmdyaWRSb3dHYXAsXG4gIGp1c3RpZnlJdGVtczogcHJvcHMuanVzdGlmeUl0ZW1zLFxuICBhbGlnbkl0ZW1zOiBwcm9wcy5hbGlnbkl0ZW1zLFxuICBwbGFjZUl0ZW1zOiBwcm9wcy5wbGFjZUl0ZW1zLFxuICBqdXN0aWZ5Q29udGVudDogcHJvcHMuanVzdGlmeUNvbnRlbnQsXG4gIGFsaWduQ29udGVudDogcHJvcHMuYWxpZ25Db250ZW50LFxuICBwbGFjZUNvbnRlbnQ6IHByb3BzLnBsYWNlQ29udGVudCxcbiAgZ3JpZEF1dG9Db2x1bW5zOiBwcm9wcy5ncmlkQXV0b0NvbHVtbnMsXG4gIGdyaWRBdXRvUm93czogcHJvcHMuZ3JpZEF1dG9Sb3dzLFxuICBncmlkQXV0b0Zsb3c6IHByb3BzLmdyaWRBdXRvRmxvdyxcbn0pKTtcbmNvbnN0IEdyaWQgPSAoeyBkaXNwbGF5ID0gJ2dyaWQnLCAuLi5wcm9wcyB9OiBUR3JpZFByb3BzKSA9PiAoXG4gIDxHcmlkQ29udGFpbmVyIGRpc3BsYXk9e2Rpc3BsYXl9IHsuLi5wcm9wc30gLz5cbik7XG5HcmlkLmRpc3BsYXlOYW1lID0gJ0dyaWQnO1xuLy8gQXNzaWduIEdyaWRJdGVtIGFzIGEgc3RhdGljIHByb3BlcnR5IG9mIEdyaWRcbkdyaWQuSXRlbSA9IEdyaWRJdGVtO1xuXG5leHBvcnQgZGVmYXVsdCBHcmlkO1xuIl19 */"),
children: props.children
});
GridItem.displayName = 'GridItem';
const GridContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
target: "e7g6mzh0"
} : {
target: "e7g6mzh0",
label: "GridContainer"
})(props => ({
display: props.display,
grid: props.grid,
gridTemplate: props.gridTemplate,
gridTemplateColumns: props.gridTemplateColumns,
gridTemplateRows: props.gridTemplateRows,
gridTemplateAreas: props.gridTemplateAreas,
gridGap: props.gridGap,
gridColumnGap: props.gridColumnGap,
gridRowGap: props.gridRowGap,
justifyItems: props.justifyItems,
alignItems: props.alignItems,
placeItems: props.placeItems,
justifyContent: props.justifyContent,
alignContent: props.alignContent,
placeContent: props.placeContent,
gridAutoColumns: props.gridAutoColumns,
gridAutoRows: props.gridAutoRows,
gridAutoFlow: props.gridAutoFlow
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImdyaWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlGc0IiLCJmaWxlIjoiZ3JpZC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmV4cG9ydCB0eXBlIFRHcmlkSXRlbVByb3BzID0ge1xuICBjaGlsZHJlbj86IFJlYWN0Tm9kZTtcbiAgLy8gTGlzdCBiYXNlZCBvbiBodHRwczovL2Nzcy10cmlja3MuY29tL3NuaXBwZXRzL2Nzcy9jb21wbGV0ZS1ndWlkZS1ncmlkXG4gIGdyaWRBcmVhPzogc3RyaW5nO1xuICBncmlkQ29sdW1uPzogc3RyaW5nO1xuICBncmlkQ29sdW1uU3RhcnQ/OiBzdHJpbmc7XG4gIGdyaWRDb2x1bW5FbmQ/OiBzdHJpbmc7XG4gIGdyaWRSb3c/OiBzdHJpbmc7XG4gIGdyaWRSb3dTdGFydD86IHN0cmluZztcbiAgZ3JpZFJvd0VuZD86IHN0cmluZztcbiAganVzdGlmeVNlbGY/OiAnc3RhcnQnIHwgJ2VuZCcgfCAnY2VudGVyJyB8ICdzdHJldGNoJztcbiAgYWxpZ25TZWxmPzogJ3N0YXJ0JyB8ICdlbmQnIHwgJ2NlbnRlcicgfCAnc3RyZXRjaCc7XG4gIHBsYWNlU2VsZj86ICdzdGFydCcgfCAnZW5kJyB8ICdjZW50ZXInIHwgJ3N0cmV0Y2gnO1xufTtcbmV4cG9ydCB0eXBlIFRHcmlkUHJvcHMgPSB7XG4gIGNoaWxkcmVuOiBSZWFjdE5vZGU7XG4gIC8vIExpc3QgYmFzZWQgb24gaHR0cHM6Ly9jc3MtdHJpY2tzLmNvbS9zbmlwcGV0cy9jc3MvY29tcGxldGUtZ3VpZGUtZ3JpZFxuICBkaXNwbGF5PzogJ2dyaWQnIHwgJ2lubGluZS1ncmlkJztcbiAgZ3JpZFRlbXBsYXRlQ29sdW1ucz86IHN0cmluZztcbiAgZ3JpZFRlbXBsYXRlUm93cz86IHN0cmluZztcbiAgZ3JpZFRlbXBsYXRlQXJlYXM/OiBzdHJpbmc7XG4gIGdyaWRUZW1wbGF0ZT86IHN0cmluZztcbiAgZ3JpZENvbHVtbkdhcD86IHN0cmluZztcbiAgZ3JpZFJvd0dhcD86IHN0cmluZztcbiAgZ3JpZEdhcD86IHN0cmluZztcbiAganVzdGlmeUl0ZW1zPzogJ3N0YXJ0JyB8ICdlbmQnIHwgJ2NlbnRlcicgfCAnc3RyZXRjaCc7XG4gIGFsaWduSXRlbXM/OiAnc3RhcnQnIHwgJ2VuZCcgfCAnY2VudGVyJyB8ICdzdHJldGNoJztcbiAgcGxhY2VJdGVtcz86ICdzdGFydCcgfCAnZW5kJyB8ICdjZW50ZXInIHwgJ3N0cmV0Y2gnO1xuICBqdXN0aWZ5Q29udGVudD86XG4gICAgfCAnc3RhcnQnXG4gICAgfCAnZW5kJ1xuICAgIHwgJ2NlbnRlcidcbiAgICB8ICdzdHJldGNoJ1xuICAgIHwgJ3NwYWNlLWFyb3VuZCdcbiAgICB8ICdzcGFjZS1iZXR3ZWVuJ1xuICAgIHwgJ3NwYWNlLWV2ZW5seSc7XG4gIGFsaWduQ29udGVudD86XG4gICAgfCAnc3RhcnQnXG4gICAgfCAnZW5kJ1xuICAgIHwgJ2NlbnRlcidcbiAgICB8ICdzdHJldGNoJ1xuICAgIHwgJ3NwYWNlLWFyb3VuZCdcbiAgICB8ICdzcGFjZS1iZXR3ZWVuJ1xuICAgIHwgJ3NwYWNlLWV2ZW5seSc7XG4gIHBsYWNlQ29udGVudD86XG4gICAgfCAnc3RhcnQnXG4gICAgfCAnZW5kJ1xuICAgIHwgJ2NlbnRlcidcbiAgICB8ICdzdHJldGNoJ1xuICAgIHwgJ3NwYWNlLWFyb3VuZCdcbiAgICB8ICdzcGFjZS1iZXR3ZWVuJ1xuICAgIHwgJ3NwYWNlLWV2ZW5seSc7XG4gIGdyaWRBdXRvQ29sdW1ucz86IHN0cmluZztcbiAgZ3JpZEF1dG9Sb3dzPzogc3RyaW5nO1xuICBncmlkQXV0b0Zsb3c/OiBzdHJpbmc7XG4gIGdyaWQ/OiBzdHJpbmc7XG59O1xuXG5jb25zdCBHcmlkSXRlbSA9IChwcm9wczogVEdyaWRJdGVtUHJvcHMpID0+IChcbiAgPGRpdlxuICAgIGNzcz17e1xuICAgICAgZ3JpZEFyZWE6IHByb3BzLmdyaWRBcmVhLFxuICAgICAgZ3JpZENvbHVtbjogcHJvcHMuZ3JpZENvbHVtbixcbiAgICAgIGdyaWRDb2x1bW5TdGFydDogcHJvcHMuZ3JpZENvbHVtblN0YXJ0LFxuICAgICAgZ3JpZENvbHVtbkVuZDogcHJvcHMuZ3JpZENvbHVtbkVuZCxcbiAgICAgIGdyaWRSb3c6IHByb3BzLmdyaWRSb3csXG4gICAgICBncmlkUm93U3RhcnQ6IHByb3BzLmdyaWRSb3dTdGFydCxcbiAgICAgIGdyaWRSb3dFbmQ6IHByb3BzLmdyaWRSb3dFbmQsXG4gICAgICBqdXN0aWZ5U2VsZjogcHJvcHMuanVzdGlmeVNlbGYsXG4gICAgICBhbGlnblNlbGY6IHByb3BzLmFsaWduU2VsZixcbiAgICAgIHBsYWNlU2VsZjogcHJvcHMucGxhY2VTZWxmLFxuICAgIH19XG4gID5cbiAgICB7cHJvcHMuY2hpbGRyZW59XG4gIDwvZGl2PlxuKTtcbkdyaWRJdGVtLmRpc3BsYXlOYW1lID0gJ0dyaWRJdGVtJztcblxuY29uc3QgR3JpZENvbnRhaW5lciA9IHN0eWxlZC5kaXY8VEdyaWRQcm9wcz4oKHByb3BzKSA9PiAoe1xuICBkaXNwbGF5OiBwcm9wcy5kaXNwbGF5LFxuICBncmlkOiBwcm9wcy5ncmlkLFxuICBncmlkVGVtcGxhdGU6IHByb3BzLmdyaWRUZW1wbGF0ZSxcbiAgZ3JpZFRlbXBsYXRlQ29sdW1uczogcHJvcHMuZ3JpZFRlbXBsYXRlQ29sdW1ucyxcbiAgZ3JpZFRlbXBsYXRlUm93czogcHJvcHMuZ3JpZFRlbXBsYXRlUm93cyxcbiAgZ3JpZFRlbXBsYXRlQXJlYXM6IHByb3BzLmdyaWRUZW1wbGF0ZUFyZWFzLFxuICBncmlkR2FwOiBwcm9wcy5ncmlkR2FwLFxuICBncmlkQ29sdW1uR2FwOiBwcm9wcy5ncmlkQ29sdW1uR2FwLFxuICBncmlkUm93R2FwOiBwcm9wcy5ncmlkUm93R2FwLFxuICBqdXN0aWZ5SXRlbXM6IHByb3BzLmp1c3RpZnlJdGVtcyxcbiAgYWxpZ25JdGVtczogcHJvcHMuYWxpZ25JdGVtcyxcbiAgcGxhY2VJdGVtczogcHJvcHMucGxhY2VJdGVtcyxcbiAganVzdGlmeUNvbnRlbnQ6IHByb3BzLmp1c3RpZnlDb250ZW50LFxuICBhbGlnbkNvbnRlbnQ6IHByb3BzLmFsaWduQ29udGVudCxcbiAgcGxhY2VDb250ZW50OiBwcm9wcy5wbGFjZUNvbnRlbnQsXG4gIGdyaWRBdXRvQ29sdW1uczogcHJvcHMuZ3JpZEF1dG9Db2x1bW5zLFxuICBncmlkQXV0b1Jvd3M6IHByb3BzLmdyaWRBdXRvUm93cyxcbiAgZ3JpZEF1dG9GbG93OiBwcm9wcy5ncmlkQXV0b0Zsb3csXG59KSk7XG5jb25zdCBHcmlkID0gKHsgZGlzcGxheSA9ICdncmlkJywgLi4ucHJvcHMgfTogVEdyaWRQcm9wcykgPT4gKFxuICA8R3JpZENvbnRhaW5lciBkaXNwbGF5PXtkaXNwbGF5fSB7Li4ucHJvcHN9IC8+XG4pO1xuR3JpZC5kaXNwbGF5TmFtZSA9ICdHcmlkJztcbi8vIEFzc2lnbiBHcmlkSXRlbSBhcyBhIHN0YXRpYyBwcm9wZXJ0eSBvZiBHcmlkXG5HcmlkLkl0ZW0gPSBHcmlkSXRlbTtcblxuZXhwb3J0IGRlZmF1bHQgR3JpZDtcbiJdfQ== */");
const Grid = _ref => {
let _ref$display = _ref.display,
display = _ref$display === void 0 ? 'grid' : _ref$display,
props = _objectWithoutProperties(_ref, _excluded);
return jsx(GridContainer, _objectSpread({
display: display
}, props));
};
Grid.displayName = 'Grid';
// Assign GridItem as a static property of Grid
Grid.Item = GridItem;
var Grid$1 = Grid;
// NOTE: This string will be replaced on build time with the package version.
var version = "20.2.3";
export { Grid$1 as default, version };