@semcore/flex-box - npm Package Compare versions

Comparing version 3.0.0 to 3.5.0

CHANGELOG.md

@@ -5,6 +5,56 @@ # Changelog
 
-## [3.0.0] - 2019-01-16
+## [3.5.0] - 2019-12-26
 
-### BREAK CHANGE
+### Added
 
+- Появилась свойство собирательное свойство `flex`
+
+## [3.4.0] - 2019-12-12
+
+### Added
+
+- Появилась возможность добавления различных стилистических тем через css переменные
+- Появилась возможность оптицонально подключать адаптивноссть
+- Появилась возможность изолировать стили даже в пределах одной страницы
+
+### Changed
+
+- Изменен алгоритм вставки стилей в head
+
+### Removed
+
+- Убраны относительные единицы измерения(rem), которые использовались для адаптивности
+
+## [3.3.0] - 2019-11-14
+
+### Added
+
+- Добавлена адаптивность на маленьких экранах(<768px)
+
+## [3.2.0] - 2019-10-10
+
+### Added
+
+- Добавлен `ref` на дом ноду
+
+### Changed
+
+- Переписано на функциональный компонент
+
+## [3.1.1] - 2019-09-30
+
+### Changed
+
+- Нужные зависимости перенесены в `utils`, размер должен стать меньше
+
+## [3.1.0] - 2019-02-11
+
+### Added
+
+- Добавлены свойства `wMin`, `wMax`, `hMin` и `hMax`
+
+## [3.0.0] - 2019-01-18
+
+### BREAK
+
 - У `Flex` переименовано свойство `flex` -> `flexWrap`
@@ -29,3 +79,3 @@ - У `Flex` свойства `alignItems`, `alignContent`, `justifyContent` теперь принимают значения соответствующие значениям в css
 
-### BREAK CHANGE
+### BREAK
 
@@ -32,0 +82,0 @@ - Убраны свойства `alignSelf`, `flexBasis` , `flexGrow`, `flexShrink`, `flex`, `order`

lib/Box/index.d.ts

@@ -1,2 +0,2 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
 import { IUIProps } from '@semcore/ui';
@@ -39,22 +39,37 @@ export interface IBoxProps extends IUIProps {
      * Если value меньше 1 - считается как доля от 100%, больше 1 - значение в px, если строка - передается as is
-     * */
+     */
     w?: number | string;
     /**
+     * CSS свойство min-width
+     * Если value меньше 1 - считается как доля от 100%, больше 1 - значение в px, если строка - передается as is
+     */
+    wMin?: number | string;
+    /**
+     * CSS свойство max-width
+     * Если value меньше 1 - считается как доля от 100%, больше 1 - значение в px, если строка - передается as is
+     */
+    wMax?: number | string;
+    /**
      * CSS свойство height
      * Eсли value меньше 1 - считается как доля от 100%, больше 1 - значение в px, если строка - передается as is
-     * */
+     */
     h?: number | string;
-    /** Множитель всех отступов.
+    /**
+     * CSS свойство min-height
+     * Если value меньше 1 - считается как доля от 100%, больше 1 - значение в px, если строка - передается as is
+     */
+    hMin?: number | string;
+    /**
+     * CSS свойство max-height
+     * Если value меньше 1 - считается как доля от 100%, больше 1 - значение в px, если строка - передается as is
+     */
+    hMax?: number | string;
+    /**
+     * Множитель всех отступов.
      * Например если указать margin-top равный 3(`mt={3}`), это будет 12px(`3*4=12`)
      * @default 4
-     * */
+     */
     scaleIndent?: number;
 }
-declare class Box extends PureComponent<IBoxProps & React.AllHTMLAttributes<any>> {
-    static displayName: string;
-    static defaultProps: Partial<IBoxProps>;
-    getAutoOrScaleIndent(indent: any): any;
-    getSize: (sizeName: any, styleName: any, style?: {}) => {};
-    render(): JSX.Element;
-}
-export default Box;
+declare const _default: React.NamedExoticComponent<IBoxProps & React.AllHTMLAttributes<any>>;
+export default _default;

lib/Flex/index.d.ts

@@ -1,24 +0,39 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
+import { AlignContentProperty, AlignItemsProperty, JustifyContentProperty, FlexProperty } from 'csstype';
 import { IBoxProps } from '../Box';
-import { AlignContentProperty, AlignItemsProperty, JustifyContentProperty } from 'csstype';
 export interface IFlexProps extends IBoxProps {
-    /** Выставляет свойство `inline-flex` */
+    /**
+     * Управляет свойством `inline-flex`
+     */
     inline?: boolean;
-    /** Добавляет свойство `reverse` к `flex-direction` */
+    /**
+     * Управляет собирательным св-вом flex
+     */
+    flex?: FlexProperty<string>;
+    /**
+     * Добавляет свойство `reverse` к `flex-direction`
+     */
     reverse?: boolean;
-    /** Добавляет свойство `flex-wrap` */
+    /**
+     * Управляет свойством `flex-wrap`
+     */
     flexWrap?: boolean;
-    /** Выставлет свойство `flex-direction` */
+    /**
+     * Управляет свойством `flex-direction`
+     */
     direction?: 'row' | 'column';
-    /** CSS свойство `align-items` */
+    /**
+     * Управляет свойством `align-items`
+     */
     alignItems?: AlignItemsProperty;
-    /** CSS свойство `align-content` */
+    /**
+     * Управляет свойством `align-content`
+     */
     alignContent?: AlignContentProperty;
-    /** CSS свойство `justify-content` */
+    /**
+     * CSS свойство `justify-content`
+     */
     justifyContent?: JustifyContentProperty;
 }
-declare class Flex extends PureComponent<IFlexProps & React.AllHTMLAttributes<any>> {
-    static displayName: string;
-    render(): JSX.Element;
-}
-export default Flex;
+declare const _default: React.NamedExoticComponent<IFlexProps & React.AllHTMLAttributes<any>>;
+export default _default;

lib/index.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 import Flex from './Flex';
@@ -7,5 +8,5 @@ import Box from './Box';
 declare const _default: {
-    Flex: typeof Flex;
-    Box: typeof Box;
+    Flex: import("react").NamedExoticComponent<import("./Flex").IFlexProps & import("react").AllHTMLAttributes<any>>;
+    Box: import("react").NamedExoticComponent<import("./Box").IBoxProps & import("react").AllHTMLAttributes<any>>;
 };
 export default _default;

lib/index.es.js

 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _objectSpread from '@babel/runtime/helpers/objectSpread';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
-import _createClass from '@babel/runtime/helpers/createClass';
-import _possibleConstructorReturn from '@babel/runtime/helpers/possibleConstructorReturn';
-import _getPrototypeOf from '@babel/runtime/helpers/getPrototypeOf';
-import _inherits from '@babel/runtime/helpers/inherits';
+import React from 'react';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React, { PureComponent } from 'react';
 import UI from '@semcore/ui';
 
+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 _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var REG_INDENT = /^[mp][trblxy]?$/;
@@ -27,3 +24,3 @@ var properties = {
 
-var getProperties = function getProperties(key) {
+function getProperties(key) {
   var _key$split = key.split(''),
@@ -39,174 +36,142 @@ _key$split2 = _slicedToArray(_key$split, 2),
   }) : [property + direction];
-};
+}
 
-var Box =
-/*#__PURE__*/
-function (_PureComponent) {
-  _inherits(Box, _PureComponent);
+function getAutoOrScaleIndent(indent, scaleIndent) {
+  if (typeof indent === 'string') {
+    return indent;
+  }
 
-  function Box() {
-    var _this;
+  if (indent > -1 && indent < 1) {
+    return "".concat(100 * indent, "%");
+  }
 
-    _classCallCheck(this, Box);
+  if (indent >= 1 || indent <= -1) {
+    return "".concat(indent * scaleIndent, "rem");
+  }
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(Box).apply(this, arguments));
+  return indent;
+}
 
-    _this.getSize = function (sizeName, styleName) {
-      var style = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-      var size = _this.props[sizeName];
-      if (!size) return style;
+function getSize(props, sizeName, styleName) {
+  var style = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  var size = props[sizeName];
 
-      if (typeof size === 'string') {
-        style[styleName] = size;
-        return style;
-      }
+  if (!size) {
+    return style;
+  }
 
-      if (size < 1) {
-        style[styleName] = "".concat(100 * size, "%");
-        return style;
-      }
+  if (typeof size === 'string') {
+    style[styleName] = size;
+    return style;
+  }
 
-      if (size >= 1) {
-        style[styleName] = "".concat(size, "px");
-        return style;
-      }
+  if (size < 1) {
+    style[styleName] = "".concat(100 * size, "%");
+    return style;
+  }
 
-      return style;
-    };
-
-    return _this;
+  if (size >= 1) {
+    style[styleName] = "".concat(size, "px");
+    return style;
   }
 
-  _createClass(Box, [{
-    key: "getAutoOrScaleIndent",
-    value: function getAutoOrScaleIndent(indent) {
-      var scaleIndent = this.props.scaleIndent;
+  return style;
+}
 
-      if (typeof indent === 'string') {
-        return indent;
-      }
+var Box = React.forwardRef(function (_ref, ref) {
+  var scaleIndent = _ref.scaleIndent,
+      inline = _ref.inline,
+      boxSizing = _ref.boxSizing,
+      css = _ref.css,
+      other = _objectWithoutProperties(_ref, ["scaleIndent", "inline", "boxSizing", "css"]);
 
-      if (indent > -1 && indent < 1) {
-        return "".concat(100 * indent, "%");
-      }
+  var keys = Object.keys(other).filter(function (key) {
+    return REG_INDENT.test(key);
+  }).sort();
+  var style = keys.reduce(function (acc, key) {
+    return _objectSpread({}, acc, {}, getProperties(key).reduce(function (props, propName) {
+      return _objectSpread({}, props, _defineProperty({}, propName, getAutoOrScaleIndent(other[key], scaleIndent)));
+    }, {}));
+  }, {});
 
-      if (indent >= 1 || indent <= -1) {
-        return "".concat(indent * scaleIndent, "px");
-      }
+  if (inline) {
+    style.display = 'inline-block';
+  }
 
-      return indent;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
+  if (boxSizing) {
+    style.boxSizing = 'border-box';
+  }
 
-      var _this$props = this.props,
-          inline = _this$props.inline,
-          boxSizing = _this$props.boxSizing,
-          css = _this$props.css,
-          other = _objectWithoutProperties(_this$props, ["inline", "boxSizing", "css"]);
+  var cssStyle = _objectSpread({}, style, {}, getSize(other, 'w', 'width'), {}, getSize(other, 'h', 'height'), {}, getSize(other, 'wMin', 'minWidth'), {}, getSize(other, 'wMax', 'maxWidth'), {}, getSize(other, 'hMin', 'minHeight'), {}, getSize(other, 'hMax', 'maxHeight'));
 
-      var keys = Object.keys(other).filter(function (key) {
-        return REG_INDENT.test(key);
-      }).sort();
-      var style = keys.reduce(function (style, key) {
-        return _objectSpread({}, style, getProperties(key).reduce(function (props, propName) {
-          return _objectSpread({}, props, _defineProperty({}, propName, _this2.getAutoOrScaleIndent(other[key])));
-        }, {}));
-      }, {});
-
-      if (inline) {
-        style.display = 'inline-block';
-      }
-
-      if (boxSizing) {
-        style.boxSizing = 'border-box';
-      }
-
-      var cssStyle = _objectSpread({}, style, this.getSize('w', 'width'), this.getSize('h', 'height'));
-
-      return React.createElement(UI, Object.assign({}, other, {
-        css: _objectSpread({}, cssStyle, css)
-      }));
-    }
-  }]);
-
-  return Box;
-}(PureComponent);
-
+  return React.createElement(UI, Object.assign({}, other, {
+    ref: ref,
+    css: _objectSpread({}, cssStyle, {}, css)
+  }));
+});
 Box.displayName = 'Box';
 Box.defaultProps = {
-  scaleIndent: 4
+  scaleIndent: 0.333
 };
+var Box$1 = React.memo(Box);
 
-var Flex =
-/*#__PURE__*/
-function (_PureComponent) {
-  _inherits(Flex, _PureComponent);
+function ownKeys$1(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 Flex() {
-    _classCallCheck(this, Flex);
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var Flex = React.forwardRef(function (props, ref) {
+  var inline = props.inline,
+      flex = props.flex,
+      reverse = props.reverse,
+      direction = props.direction,
+      flexWrap = props.flexWrap,
+      alignItems = props.alignItems,
+      alignContent = props.alignContent,
+      justifyContent = props.justifyContent,
+      css = props.css,
+      other = _objectWithoutProperties(props, ["inline", "flex", "reverse", "direction", "flexWrap", "alignItems", "alignContent", "justifyContent", "css"]);
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(Flex).apply(this, arguments));
+  var cssStyle = {
+    display: inline ? 'inline-flex' : 'flex'
+  };
+
+  if (flex) {
+    cssStyle.flex = flex;
   }
 
-  _createClass(Flex, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          inline = _this$props.inline,
-          reverse = _this$props.reverse,
-          direction = _this$props.direction,
-          flexWrap = _this$props.flexWrap,
-          alignItems = _this$props.alignItems,
-          alignContent = _this$props.alignContent,
-          justifyContent = _this$props.justifyContent,
-          css = _this$props.css,
-          other = _objectWithoutProperties(_this$props, ["inline", "reverse", "direction", "flexWrap", "alignItems", "alignContent", "justifyContent", "css"]);
+  if (flexWrap) {
+    cssStyle.flexWrap = "wrap".concat(reverse ? '-reverse' : '');
+  }
 
-      var cssStyle = {
-        display: inline ? 'inline-flex' : 'flex'
-      };
+  if (direction || reverse) {
+    cssStyle.flexDirection = "".concat(direction || 'row').concat(reverse ? '-reverse' : '');
+  }
 
-      if (flexWrap) {
-        // @ts-ignore
-        cssStyle.flexWrap = "wrap".concat(reverse ? '-reverse' : '');
-      }
+  if (alignItems) {
+    cssStyle.alignItems = alignItems;
+  }
 
-      if (direction || reverse) {
-        // @ts-ignore
-        cssStyle.flexDirection = "".concat(direction || 'row').concat(reverse ? '-reverse' : '');
-      }
+  if (alignContent) {
+    cssStyle.alignContent = alignContent;
+  }
 
-      if (alignItems) {
-        cssStyle.alignItems = alignItems;
-      }
+  if (justifyContent) {
+    cssStyle.justifyContent = justifyContent;
+  }
 
-      if (alignContent) {
-        cssStyle.alignContent = alignContent;
-      }
-
-      if (justifyContent) {
-        cssStyle.justifyContent = justifyContent;
-      }
-
-      return React.createElement(Box, Object.assign({}, other, {
-        css: _objectSpread({}, cssStyle, css)
-      }));
-    }
-  }]);
-
-  return Flex;
-}(PureComponent);
-
+  return React.createElement(Box$1, Object.assign({}, other, {
+    ref: ref,
+    css: _objectSpread$1({}, cssStyle, {}, css)
+  }));
+});
 Flex.displayName = 'FlexBox';
+var Flex$1 = React.memo(Flex);
 
+/* tslint:disable */
 var index = {
-  Flex: Flex,
-  Box: Box
+  Flex: Flex$1,
+  Box: Box$1
 };
 
 export default index;
-export { Flex, Box };
+export { Box$1 as Box, Flex$1 as Flex };
 //# sourceMappingURL=index.es.js.map

lib/index.js

@@ -8,14 +8,10 @@ 'use strict';
 var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
-var _objectSpread = _interopDefault(require('@babel/runtime/helpers/objectSpread'));
 var _objectWithoutProperties = _interopDefault(require('@babel/runtime/helpers/objectWithoutProperties'));
-var _classCallCheck = _interopDefault(require('@babel/runtime/helpers/classCallCheck'));
-var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass'));
-var _possibleConstructorReturn = _interopDefault(require('@babel/runtime/helpers/possibleConstructorReturn'));
-var _getPrototypeOf = _interopDefault(require('@babel/runtime/helpers/getPrototypeOf'));
-var _inherits = _interopDefault(require('@babel/runtime/helpers/inherits'));
+var React = _interopDefault(require('react'));
 var _slicedToArray = _interopDefault(require('@babel/runtime/helpers/slicedToArray'));
-var React = require('react');
-var React__default = _interopDefault(React);
 var UI = _interopDefault(require('@semcore/ui'));
 
+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 _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var REG_INDENT = /^[mp][trblxy]?$/;
@@ -35,3 +31,3 @@ var properties = {
 
-var getProperties = function getProperties(key) {
+function getProperties(key) {
   var _key$split = key.split(''),
@@ -47,175 +43,143 @@ _key$split2 = _slicedToArray(_key$split, 2),
   }) : [property + direction];
-};
+}
 
-var Box =
-/*#__PURE__*/
-function (_PureComponent) {
-  _inherits(Box, _PureComponent);
+function getAutoOrScaleIndent(indent, scaleIndent) {
+  if (typeof indent === 'string') {
+    return indent;
+  }
 
-  function Box() {
-    var _this;
+  if (indent > -1 && indent < 1) {
+    return "".concat(100 * indent, "%");
+  }
 
-    _classCallCheck(this, Box);
+  if (indent >= 1 || indent <= -1) {
+    return "".concat(indent * scaleIndent, "rem");
+  }
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(Box).apply(this, arguments));
+  return indent;
+}
 
-    _this.getSize = function (sizeName, styleName) {
-      var style = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-      var size = _this.props[sizeName];
-      if (!size) return style;
+function getSize(props, sizeName, styleName) {
+  var style = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  var size = props[sizeName];
 
-      if (typeof size === 'string') {
-        style[styleName] = size;
-        return style;
-      }
+  if (!size) {
+    return style;
+  }
 
-      if (size < 1) {
-        style[styleName] = "".concat(100 * size, "%");
-        return style;
-      }
+  if (typeof size === 'string') {
+    style[styleName] = size;
+    return style;
+  }
 
-      if (size >= 1) {
-        style[styleName] = "".concat(size, "px");
-        return style;
-      }
+  if (size < 1) {
+    style[styleName] = "".concat(100 * size, "%");
+    return style;
+  }
 
-      return style;
-    };
-
-    return _this;
+  if (size >= 1) {
+    style[styleName] = "".concat(size, "px");
+    return style;
   }
 
-  _createClass(Box, [{
-    key: "getAutoOrScaleIndent",
-    value: function getAutoOrScaleIndent(indent) {
-      var scaleIndent = this.props.scaleIndent;
+  return style;
+}
 
-      if (typeof indent === 'string') {
-        return indent;
-      }
+var Box = React.forwardRef(function (_ref, ref) {
+  var scaleIndent = _ref.scaleIndent,
+      inline = _ref.inline,
+      boxSizing = _ref.boxSizing,
+      css = _ref.css,
+      other = _objectWithoutProperties(_ref, ["scaleIndent", "inline", "boxSizing", "css"]);
 
-      if (indent > -1 && indent < 1) {
-        return "".concat(100 * indent, "%");
-      }
+  var keys = Object.keys(other).filter(function (key) {
+    return REG_INDENT.test(key);
+  }).sort();
+  var style = keys.reduce(function (acc, key) {
+    return _objectSpread({}, acc, {}, getProperties(key).reduce(function (props, propName) {
+      return _objectSpread({}, props, _defineProperty({}, propName, getAutoOrScaleIndent(other[key], scaleIndent)));
+    }, {}));
+  }, {});
 
-      if (indent >= 1 || indent <= -1) {
-        return "".concat(indent * scaleIndent, "px");
-      }
+  if (inline) {
+    style.display = 'inline-block';
+  }
 
-      return indent;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
+  if (boxSizing) {
+    style.boxSizing = 'border-box';
+  }
 
-      var _this$props = this.props,
-          inline = _this$props.inline,
-          boxSizing = _this$props.boxSizing,
-          css = _this$props.css,
-          other = _objectWithoutProperties(_this$props, ["inline", "boxSizing", "css"]);
+  var cssStyle = _objectSpread({}, style, {}, getSize(other, 'w', 'width'), {}, getSize(other, 'h', 'height'), {}, getSize(other, 'wMin', 'minWidth'), {}, getSize(other, 'wMax', 'maxWidth'), {}, getSize(other, 'hMin', 'minHeight'), {}, getSize(other, 'hMax', 'maxHeight'));
 
-      var keys = Object.keys(other).filter(function (key) {
-        return REG_INDENT.test(key);
-      }).sort();
-      var style = keys.reduce(function (style, key) {
-        return _objectSpread({}, style, getProperties(key).reduce(function (props, propName) {
-          return _objectSpread({}, props, _defineProperty({}, propName, _this2.getAutoOrScaleIndent(other[key])));
-        }, {}));
-      }, {});
-
-      if (inline) {
-        style.display = 'inline-block';
-      }
-
-      if (boxSizing) {
-        style.boxSizing = 'border-box';
-      }
-
-      var cssStyle = _objectSpread({}, style, this.getSize('w', 'width'), this.getSize('h', 'height'));
-
-      return React__default.createElement(UI, Object.assign({}, other, {
-        css: _objectSpread({}, cssStyle, css)
-      }));
-    }
-  }]);
-
-  return Box;
-}(React.PureComponent);
-
+  return React.createElement(UI, Object.assign({}, other, {
+    ref: ref,
+    css: _objectSpread({}, cssStyle, {}, css)
+  }));
+});
 Box.displayName = 'Box';
 Box.defaultProps = {
-  scaleIndent: 4
+  scaleIndent: 0.333
 };
+var Box$1 = React.memo(Box);
 
-var Flex =
-/*#__PURE__*/
-function (_PureComponent) {
-  _inherits(Flex, _PureComponent);
+function ownKeys$1(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 Flex() {
-    _classCallCheck(this, Flex);
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var Flex = React.forwardRef(function (props, ref) {
+  var inline = props.inline,
+      flex = props.flex,
+      reverse = props.reverse,
+      direction = props.direction,
+      flexWrap = props.flexWrap,
+      alignItems = props.alignItems,
+      alignContent = props.alignContent,
+      justifyContent = props.justifyContent,
+      css = props.css,
+      other = _objectWithoutProperties(props, ["inline", "flex", "reverse", "direction", "flexWrap", "alignItems", "alignContent", "justifyContent", "css"]);
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(Flex).apply(this, arguments));
+  var cssStyle = {
+    display: inline ? 'inline-flex' : 'flex'
+  };
+
+  if (flex) {
+    cssStyle.flex = flex;
   }
 
-  _createClass(Flex, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          inline = _this$props.inline,
-          reverse = _this$props.reverse,
-          direction = _this$props.direction,
-          flexWrap = _this$props.flexWrap,
-          alignItems = _this$props.alignItems,
-          alignContent = _this$props.alignContent,
-          justifyContent = _this$props.justifyContent,
-          css = _this$props.css,
-          other = _objectWithoutProperties(_this$props, ["inline", "reverse", "direction", "flexWrap", "alignItems", "alignContent", "justifyContent", "css"]);
+  if (flexWrap) {
+    cssStyle.flexWrap = "wrap".concat(reverse ? '-reverse' : '');
+  }
 
-      var cssStyle = {
-        display: inline ? 'inline-flex' : 'flex'
-      };
+  if (direction || reverse) {
+    cssStyle.flexDirection = "".concat(direction || 'row').concat(reverse ? '-reverse' : '');
+  }
 
-      if (flexWrap) {
-        // @ts-ignore
-        cssStyle.flexWrap = "wrap".concat(reverse ? '-reverse' : '');
-      }
+  if (alignItems) {
+    cssStyle.alignItems = alignItems;
+  }
 
-      if (direction || reverse) {
-        // @ts-ignore
-        cssStyle.flexDirection = "".concat(direction || 'row').concat(reverse ? '-reverse' : '');
-      }
+  if (alignContent) {
+    cssStyle.alignContent = alignContent;
+  }
 
-      if (alignItems) {
-        cssStyle.alignItems = alignItems;
-      }
+  if (justifyContent) {
+    cssStyle.justifyContent = justifyContent;
+  }
 
-      if (alignContent) {
-        cssStyle.alignContent = alignContent;
-      }
-
-      if (justifyContent) {
-        cssStyle.justifyContent = justifyContent;
-      }
-
-      return React__default.createElement(Box, Object.assign({}, other, {
-        css: _objectSpread({}, cssStyle, css)
-      }));
-    }
-  }]);
-
-  return Flex;
-}(React.PureComponent);
-
+  return React.createElement(Box$1, Object.assign({}, other, {
+    ref: ref,
+    css: _objectSpread$1({}, cssStyle, {}, css)
+  }));
+});
 Flex.displayName = 'FlexBox';
+var Flex$1 = React.memo(Flex);
 
+/* tslint:disable */
 var index = {
-  Flex: Flex,
-  Box: Box
+  Flex: Flex$1,
+  Box: Box$1
 };
 
-exports.Flex = Flex;
-exports.Box = Box;
+exports.Box = Box$1;
+exports.Flex = Flex$1;
 exports.default = index;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@semcore/flex-box",
   "description": "SEMRush FlexBox Component",
-  "version": "3.0.0",
+  "version": "3.5.0",
   "main": "lib/index.js",
@@ -15,16 +15,6 @@ "module": "lib/index.es.js",
   "dependencies": {
-    "@babel/runtime": "^7.1.5",
-    "@semcore/ui": "^1.0.0",
-    "@types/react": "^16.7.6",
-    "classnames": "^2.2.5"
+    "@semcore/utils": "^3.5",
+    "@semcore/ui": "^1.2",
+    "csstype": "^2.6"
   },
-  "peerDependencies": {
-    "react": ">=15.0.0 || >=16.0.0"
-  },
-  "devDependencies": {
-    "jest": "*",
-    "jest-preset-ui": "*",
-    "react": "^16.4.0",
-    "rollup-config-react": "*"
-  },
   "jest": {
@@ -31,0 +21,0 @@ "preset": "jest-preset-ui"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

52235

increased by19.85%

Dependency count

3

decreased by-40%

Dev dependency count

0

decreased by-100%

Lines of code

673

increased by5.65%

Dependency changes

• + Added@semcore/utils@^3.5

• + Addedcsstype@^2.6

• + Addedcsstype@2.6.21(transitive)

• - Removed@babel/runtime@^7.1.5

• - Removed@types/react@^16.7.6

• - Removedclassnames@^2.2.5

• - Removed@types/prop-types@15.7.13(transitive)

• - Removed@types/react@16.14.62(transitive)

• - Removed@types/scheduler@0.16.8(transitive)

• - Removedclassnames@2.5.1(transitive)

• Updated@semcore/ui@^1.2