react-grid-system - npm Package Compare versions

Comparing version 8.0.1 to 8.1.0

build/config.js

@@ -8,5 +8,5 @@ "use strict";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
@@ -16,4 +16,4 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 var configuration = {
-  breakpoints: [576, 768, 992, 1200, 1600],
-  containerWidths: [540, 750, 960, 1140, 1540],
+  breakpoints: [576, 768, 992, 1200, 1600, 1920],
+  containerWidths: [540, 750, 960, 1140, 1540, 1810],
   gutterWidth: 30,
@@ -20,0 +20,0 @@ gridColumns: 12,

build/context/ScreenClassProvider/index.js

 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
@@ -89,3 +89,3 @@ Object.defineProperty(exports, "__esModule", {
    */
-  fallbackScreenClass: _propTypes.default.oneOf([null, 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'])
+  fallbackScreenClass: _propTypes.default.oneOf([null, 'xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl'])
 };
@@ -92,0 +92,0 @@ ScreenClassProvider.defaultProps = {

build/context/ScreenClassResolver/index.js

 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
@@ -5,0 +5,0 @@ Object.defineProperty(exports, "__esModule", {

build/grid/Col/index.js

 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
@@ -24,3 +24,3 @@ Object.defineProperty(exports, "__esModule", {
 
-var _excluded = ["children", "xs", "sm", "md", "lg", "xl", "xxl", "offset", "pull", "push", "debug", "style", "component", "width"];
+var _excluded = ["children", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl", "offset", "pull", "push", "order", "debug", "style", "component", "width"];
 
@@ -33,5 +33,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
@@ -52,5 +52,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
       xxl = _ref.xxl,
+      xxxl = _ref.xxxl,
       offset = _ref.offset,
       pull = _ref.pull,
       push = _ref.push,
+      order = _ref.order,
       debug = _ref.debug,
@@ -72,3 +74,4 @@ style = _ref.style,
           xl: xl,
-          xxl: xxl
+          xxl: xxl,
+          xxxl: xxxl
         },
@@ -78,2 +81,3 @@ offset: offset,
         push: push,
+        order: order,
         debug: debug,
@@ -131,2 +135,7 @@ screenClass: screenClass,
   /**
+   * The width of the column for screenclass `xxl`, either a number between 0 and 12, or "content"
+   */
+  xxxl: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.oneOf(['content'])]),
+
+  /**
    * A fixed width of the column for all screenclasses"
@@ -145,3 +154,4 @@ */
     xl: _propTypes.default.number,
-    xxl: _propTypes.default.number
+    xxl: _propTypes.default.number,
+    xxxl: _propTypes.default.number
   }),
@@ -158,3 +168,4 @@
     xl: _propTypes.default.number,
-    xxl: _propTypes.default.number
+    xxl: _propTypes.default.number,
+    xxxl: _propTypes.default.number
   }),
@@ -171,6 +182,20 @@
     xl: _propTypes.default.number,
-    xxl: _propTypes.default.number
+    xxl: _propTypes.default.number,
+    xxxl: _propTypes.default.number
   }),
 
   /**
+   * The order this column is pulled to the left for all screenclasses
+   */
+  order: _propTypes.default.shape({
+    xs: _propTypes.default.number,
+    sm: _propTypes.default.number,
+    md: _propTypes.default.number,
+    lg: _propTypes.default.number,
+    xl: _propTypes.default.number,
+    xxl: _propTypes.default.number,
+    xxxl: _propTypes.default.number
+  }),
+
+  /**
    * Optional styling
@@ -198,2 +223,3 @@ */
   xxl: null,
+  xxxl: null,
   width: null,
@@ -204,2 +230,3 @@ offset: {},
   style: {},
+  order: {},
   debug: false,
@@ -206,0 +233,0 @@ component: _primitives.Div

build/grid/Col/style.js

@@ -10,5 +10,5 @@ "use strict";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
@@ -40,2 +40,4 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
       push = _ref$push === void 0 ? {} : _ref$push,
+      _ref$order = _ref.order,
+      order = _ref$order === void 0 ? {} : _ref$order,
       debug = _ref.debug,
@@ -79,2 +81,6 @@ screenClass = _ref.screenClass,
       styles.left = getWidth(push[size], gridColumns) || styles.left;
+
+      if (order[size]) {
+        styles.order = order[size];
+      }
     }
@@ -81,0 +87,0 @@ });

build/grid/Container/index.js

 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
@@ -22,3 +22,3 @@ Object.defineProperty(exports, "__esModule", {
 
-var _excluded = ["children", "fluid", "xs", "sm", "md", "lg", "xl", "xxl", "style", "component"];
+var _excluded = ["children", "fluid", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl", "style", "component"];
 
@@ -31,5 +31,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
@@ -51,2 +51,3 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
       xxl = _ref.xxl,
+      xxxl = _ref.xxxl,
       style = _ref.style,
@@ -66,2 +67,3 @@ component = _ref.component,
         xxl: xxl,
+        xxxl: xxxl,
         screenClass: screenClass,
@@ -124,2 +126,8 @@ containerWidths: (0, _config.getConfiguration)().containerWidths,
   /**
+   * This is in combination with fluid enabled
+   * True makes container fluid only in xxxl, not present means fluid everywhere
+   */
+  xxxl: _propTypes.default.bool,
+
+  /**
    * Optional styling
@@ -142,2 +150,3 @@ */
   xxl: false,
+  xxxl: false,
   style: {},
@@ -144,0 +153,0 @@ component: _primitives.Div

build/grid/Container/style.js

@@ -8,5 +8,5 @@ "use strict";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
@@ -23,2 +23,3 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
       xxl = _ref.xxl,
+      xxxl = _ref.xxxl,
       screenClass = _ref.screenClass,
@@ -65,2 +66,6 @@ containerWidths = _ref.containerWidths,
 
+  if (screenClass === 'xxxl' && containerWidths[5] && !xxxl) {
+    styles.maxWidth = containerWidths[5];
+  }
+
   return _objectSpread(_objectSpread({}, styles), moreStyle);
@@ -67,0 +72,0 @@ };

build/grid/Row/index.js

@@ -22,5 +22,5 @@ "use strict";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
@@ -27,0 +27,0 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

build/grid/Row/style.js

@@ -8,5 +8,5 @@ "use strict";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
@@ -13,0 +13,0 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

build/index.js

 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
@@ -5,0 +5,0 @@ Object.defineProperty(exports, "__esModule", {

build/utilities/Hidden/index.js

 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
@@ -31,3 +31,4 @@ Object.defineProperty(exports, "__esModule", {
       xl = _ref.xl,
-      xxl = _ref.xxl;
+      xxl = _ref.xxl,
+      xxxl = _ref.xxxl;
   return /*#__PURE__*/_react.default.createElement(_ScreenClassResolver.default, null, function (screenClass) {
@@ -41,3 +42,4 @@ return style.hidden({
       xl: xl,
-      xxl: xxl
+      xxl: xxl,
+      xxxl: xxxl
     }) ? null : children;
@@ -81,3 +83,8 @@ });
    */
-  xxl: _propTypes.default.bool
+  xxl: _propTypes.default.bool,
+
+  /**
+   * Hide on xxxlarge devices
+   */
+  xxxl: _propTypes.default.bool
 };
@@ -90,5 +97,6 @@ Hidden.defaultProps = {
   xl: false,
-  xxl: false
+  xxl: false,
+  xxxl: false
 };
 var _default = Hidden;
 exports.default = _default;

build/utilities/Hidden/style.js

@@ -15,4 +15,6 @@ "use strict";
       xl = _ref.xl,
-      xxl = _ref.xxl;
+      xxl = _ref.xxl,
+      xxxl = _ref.xxxl;
   if (screenClass === 'xxl') return xxl;
+  if (screenClass === 'xxxl') return xxxl;
   if (screenClass === 'xl') return xl;
@@ -19,0 +21,0 @@ if (screenClass === 'lg') return lg;

build/utilities/Visible/index.js

 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
@@ -31,3 +31,4 @@ Object.defineProperty(exports, "__esModule", {
       xl = _ref.xl,
-      xxl = _ref.xxl;
+      xxl = _ref.xxl,
+      xxxl = _ref.xxxl;
   return /*#__PURE__*/_react.default.createElement(_ScreenClassResolver.default, null, function (screenClass) {
@@ -41,3 +42,4 @@ return !style.visible({
       xl: xl,
-      xxl: xxl
+      xxl: xxl,
+      xxxl: xxxl
     }) ? null : children;
@@ -81,3 +83,8 @@ });
    */
-  xxl: _propTypes.default.bool
+  xxl: _propTypes.default.bool,
+
+  /**
+   * Show on xxxlarge devices
+   */
+  xxxl: _propTypes.default.bool
 };
@@ -90,5 +97,6 @@ Visible.defaultProps = {
   xl: false,
-  xxl: false
+  xxl: false,
+  xxxl: false
 };
 var _default = Visible;
 exports.default = _default;

build/utilities/Visible/style.js

@@ -15,4 +15,6 @@ "use strict";
       xl = _ref.xl,
-      xxl = _ref.xxl;
+      xxl = _ref.xxl,
+      xxxl = _ref.xxxl;
   if (screenClass === 'xxl') return xxl;
+  if (screenClass === 'xxxl') return xxxl;
   if (screenClass === 'xl') return xl;
@@ -19,0 +21,0 @@ if (screenClass === 'lg') return lg;

build/utils.js

@@ -38,3 +38,3 @@ "use strict";
 
-var screenClasses = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
+var screenClasses = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl'];
 exports.screenClasses = screenClasses;
@@ -59,2 +59,3 @@
       if (breakpoints[4] && viewport >= breakpoints[4]) newScreenClass = 'xxl';
+      if (breakpoints[5] && viewport >= breakpoints[5]) newScreenClass = 'xxxl';
     } else if (fallbackScreenClass) {
@@ -61,0 +62,0 @@ newScreenClass = fallbackScreenClass;

package.json

 {
   "name": "react-grid-system",
-  "version": "8.0.1",
+  "version": "8.1.0",
   "description": "A powerful Bootstrap-like responsive grid system for React.",
@@ -41,24 +41,24 @@ "main": "./build/index.js",
   "dependencies": {
-    "prop-types": "^15.7.2"
+    "prop-types": "^15.8.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.16.0",
-    "@babel/core": "^7.16.0",
-    "@babel/eslint-parser": "^7.16.3",
-    "@babel/preset-env": "^7.16.4",
-    "@babel/preset-react": "^7.16.0",
+    "@babel/cli": "^7.17.0",
+    "@babel/core": "^7.17.5",
+    "@babel/eslint-parser": "^7.17.0",
+    "@babel/preset-env": "^7.16.10",
+    "@babel/preset-react": "^7.16.7",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.3",
-    "eslint": "^8.2.0",
-    "eslint-config-airbnb": "^19.0.0",
-    "eslint-plugin-import": "^2.25.3",
+    "eslint": "^8.10.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-react": "^7.29.2",
     "eslint-plugin-react-hooks": "^4.3.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-styleguidist": "^11.1.5",
+    "react-styleguidist": "^11.2.0",
     "rimraf": "^3.0.2",
-    "webpack": "^5.64.2"
+    "webpack": "^5.69.1"
   }
 }

src/config.js

 let configuration = {
-  breakpoints: [576, 768, 992, 1200, 1600],
-  containerWidths: [540, 750, 960, 1140, 1540],
+  breakpoints: [576, 768, 992, 1200, 1600, 1920],
+  containerWidths: [540, 750, 960, 1140, 1540, 1810],
   gutterWidth: 30,
@@ -5,0 +5,0 @@ gridColumns: 12,

src/context/ScreenClassProvider/index.js

@@ -45,3 +45,3 @@ import React, { useRef, useState, useEffect } from 'react';
    */
-  fallbackScreenClass: PropTypes.oneOf([null, 'xs', 'sm', 'md', 'lg', 'xl', 'xxl']),
+  fallbackScreenClass: PropTypes.oneOf([null, 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' , 'xxxl']),
 };
@@ -48,0 +48,0 @@

src/grid.md

@@ -302,1 +302,16 @@ Resize your browser or load on different devices to test the grid system.
 ```
+
+
+
+### Example: Ordering Cols adapted to content
+
+```js
+import { Container, Row, Col } from '.';
+
+<Container fluid>
+  <Row debug>
+    <Col debug order={{md: 1, xl: 2}}>First on md, last on xl </Col>
+    <Col order={{md: 2, xl: 1}} debug>First on xl, last on md</Col>
+  </Row>
+</Container>
+```

src/grid/Col/index.js

@@ -17,5 +17,7 @@ import React, { createElement } from 'react';
   xxl,
+  xxxl,
   offset,
   pull,
   push,
+  order,
   debug,
@@ -40,2 +42,3 @@ style,
               xxl,
+              xxxl,
             },
@@ -45,2 +48,3 @@ offset,
             push,
+            order,
             debug,
@@ -107,2 +111,9 @@ screenClass,
   /**
+   * The width of the column for screenclass `xxl`, either a number between 0 and 12, or "content"
+   */
+  xxxl: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.oneOf(['content']),
+  ]),
+  /**
    * A fixed width of the column for all screenclasses"
@@ -124,2 +135,3 @@ */
     xxl: PropTypes.number,
+    xxxl: PropTypes.number,
   }),
@@ -136,2 +148,3 @@ /**
     xxl: PropTypes.number,
+    xxxl: PropTypes.number,
   }),
@@ -148,4 +161,17 @@ /**
     xxl: PropTypes.number,
+    xxxl: PropTypes.number,
   }),
   /**
+   * The order this column is pulled to the left for all screenclasses
+   */
+  order: PropTypes.shape({
+    xs: PropTypes.number,
+    sm: PropTypes.number,
+    md: PropTypes.number,
+    lg: PropTypes.number,
+    xl: PropTypes.number,
+    xxl: PropTypes.number,
+    xxxl: PropTypes.number,
+  }),
+  /**
    * Optional styling
@@ -172,2 +198,3 @@ */
   xxl: null,
+  xxxl: null,
   width: null,
@@ -178,2 +205,3 @@ offset: {},
   style: {},
+  order: {},
   debug: false,
@@ -180,0 +208,0 @@ component: Div,

src/grid/Col/style.js

@@ -17,2 +17,3 @@ import { screenClasses } from '../../utils';
   push = {},
+  order = {},
   debug,
@@ -58,2 +59,5 @@ screenClass,
       styles.left = getWidth(push[size], gridColumns) || styles.left;
+      if(order[size]) {
+        styles.order = order[size]
+      }
     }
@@ -60,0 +64,0 @@ });

src/grid/Container/index.js

@@ -6,3 +6,3 @@ import React, { createElement } from 'react';
 import ScreenClassResolver from '../../context/ScreenClassResolver';
-import { Div, Span } from '../../primitives'
+import { Div } from '../../primitives'
 
@@ -18,2 +18,3 @@ const Container = ({
   xxl,
+  xxxl,
   style,
@@ -35,2 +36,3 @@ component,
           xxl,
+          xxxl,
           screenClass,
@@ -88,2 +90,7 @@ containerWidths: getConfiguration().containerWidths,
   /**
+   * This is in combination with fluid enabled
+   * True makes container fluid only in xxxl, not present means fluid everywhere
+   */
+  xxxl: PropTypes.bool,
+  /**
    * Optional styling
@@ -106,2 +113,3 @@ */
   xxl: false,
+  xxxl: false,
   style: {},
@@ -108,0 +116,0 @@ component: Div,

src/grid/Container/style.js

@@ -9,2 +9,3 @@ export default ({
   xxl,
+  xxxl,
   screenClass,
@@ -51,4 +52,7 @@ containerWidths,
   }
+  if (screenClass === 'xxxl' && containerWidths[5] && !xxxl) {
+    styles.maxWidth = containerWidths[5];
+  }
 
   return { ...styles, ...moreStyle };
 };

src/utilities/Hidden/index.js

@@ -14,2 +14,3 @@ import React from 'react';
   xxl,
+  xxxl,
 }) => (
@@ -25,2 +26,3 @@ <ScreenClassResolver>
       xxl,
+      xxxl,
     })
@@ -61,2 +63,6 @@ ? null
   xxl: PropTypes.bool,
+  /**
+   * Hide on xxxlarge devices
+   */
+  xxxl: PropTypes.bool,
 };
@@ -71,4 +77,5 @@
   xxl: false,
+  xxxl: false,
 };
 
 export default Hidden;

src/utilities/Hidden/style.js

 export const hidden = ({
-  screenClass, xs, sm, md, lg, xl, xxl,
+  screenClass, xs, sm, md, lg, xl, xxl, xxxl,
 }) => {
   if (screenClass === 'xxl') return xxl;
+  if (screenClass === 'xxxl') return xxxl;
   if (screenClass === 'xl') return xl;
@@ -6,0 +7,0 @@ if (screenClass === 'lg') return lg;

src/utilities/Visible/index.js

@@ -14,2 +14,3 @@ import React from 'react';
   xxl,
+  xxxl,
 }) => (
@@ -25,2 +26,3 @@ <ScreenClassResolver>
       xxl,
+      xxxl,
     })
@@ -61,2 +63,6 @@ ? null
   xxl: PropTypes.bool,
+  /**
+   * Show on xxxlarge devices
+   */
+  xxxl: PropTypes.bool,
 };
@@ -71,4 +77,5 @@
   xxl: false,
+  xxxl: false,
 };
 
 export default Visible;

src/utilities/Visible/style.js

 export const visible = ({
-  screenClass, xs, sm, md, lg, xl, xxl,
+  screenClass, xs, sm, md, lg, xl, xxl, xxxl
 }) => {
   if (screenClass === 'xxl') return xxl;
+  if (screenClass === 'xxxl') return xxxl;
   if (screenClass === 'xl') return xl;
@@ -6,0 +7,0 @@ if (screenClass === 'lg') return lg;

src/utils.js

@@ -17,3 +17,3 @@ /* global window */
 
-export const screenClasses = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
+export const screenClasses = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl'];
 
@@ -34,2 +34,3 @@ export const useScreenClass = (source, fallbackScreenClass) => {
       if (breakpoints[4] && viewport >= breakpoints[4]) newScreenClass = 'xxl';
+      if (breakpoints[5] && viewport >= breakpoints[5]) newScreenClass = 'xxxl';
     } else if (fallbackScreenClass) {
@@ -36,0 +37,0 @@ newScreenClass = fallbackScreenClass;

No alert changes

Improved metrics

Total package byte prevSize

111687

increased by2.89%

Lines of code

2248

increased by5.74%

Dependency changes

• Updatedprop-types@^15.8.0