@semcore/flex-box - npm Package Compare versions

Comparing version 4.0.4 to 4.1.0

CHANGELOG.md

@@ -5,2 +5,8 @@ # Changelog
 
+## [4.1.0] - 2020-11-05
+
+### Added
+
+- Added new property: `postion, top, left, right, bottom`.
+
 ## [4.0.4] - 2020-10-29
@@ -7,0 +13,0 @@

lib/cjs/Box/useBox.js

@@ -38,9 +38,9 @@ "use strict";
 /*__inner_css_start__*/
-"._box-sizing_1jox6_gg_{box-sizing:border-box}._box-inline_1p6fl_gg_{display:inline-block}"
+"._box-sizing_lear2_gg_{box-sizing:border-box}._box-inline_125bt_gg_{display:inline-block}"
 /*__inner_css_end__*/
-, "1kpwcfk_gg_")
+, "10f0twf_gg_")
 /*__reshadow_css_end__*/
 , {
-  "box-sizing": "_box-sizing_1jox6_gg_",
-  "box-inline": "_box-inline_1p6fl_gg_"
+  "box-sizing": "_box-sizing_lear2_gg_",
+  "box-inline": "_box-inline_125bt_gg_"
 }),
@@ -64,15 +64,13 @@ style = (0, _extends2["default"])({}, _ref);
 function getSize(size) {
-  if (typeof size === 'string') {
+  if (typeof size !== 'number') {
     return size;
   }
 
-  if (typeof size === 'number' && size < 1) {
+  if (size < 1) {
     return "".concat(100 * size, "%");
   }
 
-  if (typeof size === 'number' && size >= 1) {
+  if (size >= 1) {
     return "".concat(size, "px");
   }
-
-  return size;
 }
@@ -104,2 +102,7 @@
     maxHeight: getSize(props['hMax']),
+    position: props['position'],
+    top: getSize(props['top']),
+    left: getSize(props['left']),
+    bottom: getSize(props['bottom']),
+    right: getSize(props['right']),
     margin: getAutoOrScaleIndent(props['m'], scaleIndent),
@@ -152,6 +155,7 @@ marginTop: getAutoOrScaleIndent(props['mt'], scaleIndent) || getAutoOrScaleIndent(props['my'], scaleIndent),
       css = props.css,
-      other = (0, _objectWithoutProperties2["default"])(props, ["tag", "className", "style", "scaleIndent", "boxSizing", "inline", "w", "h", "wMin", "wMax", "hMin", "hMax", "m", "mt", "mb", "my", "ml", "mr", "mx", "p", "pt", "pb", "py", "pl", "pr", "px", "css"]);
+      position = props.position,
+      other = (0, _objectWithoutProperties2["default"])(props, ["tag", "className", "style", "scaleIndent", "boxSizing", "inline", "w", "h", "wMin", "wMax", "hMin", "hMax", "m", "mt", "mb", "my", "ml", "mr", "mx", "p", "pt", "pb", "py", "pl", "pr", "px", "css", "position"]);
   var indentStyles = (0, _react.useMemo)(function () {
     return calculateIndentStyles(props, scaleIndent);
-  }, [scaleIndent, w, h, wMin, wMax, hMin, hMax, m, mt, mb, my, ml, mr, mx, p, pt, pb, py, pl, pr, px]);
+  }, [scaleIndent, w, h, wMin, wMax, hMin, hMax, m, mt, mb, my, ml, mr, mx, p, pt, pb, py, pl, pr, px, position]);
 
@@ -158,0 +162,0 @@ var _styled = (0, _core.styled)(((0, _core.set)([styled_c8]), (0, _core.__extract__)())),

lib/cjs/Flex/useFlex.js

@@ -37,9 +37,9 @@ "use strict";
 /*__inner_css_start__*/
-"._flex_1556n_gg_{display:flex}._flex-inline_naycb_gg_{display:inline-flex}"
+"._flex_1qh7v_gg_{display:flex}._flex-inline_17xy3_gg_{display:inline-flex}"
 /*__inner_css_end__*/
-, "j3mbcr_gg_")
+, "1386mxk_gg_")
 /*__reshadow_css_end__*/
 , {
-  "flex": "_flex_1556n_gg_",
-  "flex-inline": "_flex-inline_naycb_gg_"
+  "flex": "_flex_1qh7v_gg_",
+  "flex-inline": "_flex-inline_17xy3_gg_"
 }),
@@ -46,0 +46,0 @@ style = (0, _extends2["default"])({}, _ref);

lib/es6/Box/useBox.js

@@ -22,9 +22,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /*__inner_css_start__*/
-"._box-sizing_1jox6_gg_{box-sizing:border-box}._box-inline_1p6fl_gg_{display:inline-block}"
+"._box-sizing_lear2_gg_{box-sizing:border-box}._box-inline_125bt_gg_{display:inline-block}"
 /*__inner_css_end__*/
-, "1kpwcfk_gg_")
+, "10f0twf_gg_")
 /*__reshadow_css_end__*/
 , {
-  "box-sizing": "_box-sizing_1jox6_gg_",
-  "box-inline": "_box-inline_1p6fl_gg_"
+  "box-sizing": "_box-sizing_lear2_gg_",
+  "box-inline": "_box-inline_125bt_gg_"
 }),
@@ -48,15 +48,13 @@ style = _extends({}, _ref);
 function getSize(size) {
-  if (typeof size === 'string') {
+  if (typeof size !== 'number') {
     return size;
   }
 
-  if (typeof size === 'number' && size < 1) {
+  if (size < 1) {
     return "".concat(100 * size, "%");
   }
 
-  if (typeof size === 'number' && size >= 1) {
+  if (size >= 1) {
     return "".concat(size, "px");
   }
-
-  return size;
 }
@@ -88,2 +86,7 @@
     maxHeight: getSize(props['hMax']),
+    position: props['position'],
+    top: getSize(props['top']),
+    left: getSize(props['left']),
+    bottom: getSize(props['bottom']),
+    right: getSize(props['right']),
     margin: getAutoOrScaleIndent(props['m'], scaleIndent),
@@ -135,7 +138,8 @@ marginTop: getAutoOrScaleIndent(props['mt'], scaleIndent) || getAutoOrScaleIndent(props['my'], scaleIndent),
       css = props.css,
-      other = _objectWithoutProperties(props, ["tag", "className", "style", "scaleIndent", "boxSizing", "inline", "w", "h", "wMin", "wMax", "hMin", "hMax", "m", "mt", "mb", "my", "ml", "mr", "mx", "p", "pt", "pb", "py", "pl", "pr", "px", "css"]);
+      position = props.position,
+      other = _objectWithoutProperties(props, ["tag", "className", "style", "scaleIndent", "boxSizing", "inline", "w", "h", "wMin", "wMax", "hMin", "hMax", "m", "mt", "mb", "my", "ml", "mr", "mx", "p", "pt", "pb", "py", "pl", "pr", "px", "css", "position"]);
 
   var indentStyles = useMemo(function () {
     return calculateIndentStyles(props, scaleIndent);
-  }, [scaleIndent, w, h, wMin, wMax, hMin, hMax, m, mt, mb, my, ml, mr, mx, p, pt, pb, py, pl, pr, px]);
+  }, [scaleIndent, w, h, wMin, wMax, hMin, hMax, m, mt, mb, my, ml, mr, mx, p, pt, pb, py, pl, pr, px, position]);
 
@@ -142,0 +146,0 @@ var _styled = styled((set([styled_c8]), __extract__())),

lib/es6/Flex/useFlex.js

@@ -21,9 +21,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /*__inner_css_start__*/
-"._flex_1556n_gg_{display:flex}._flex-inline_naycb_gg_{display:inline-flex}"
+"._flex_1qh7v_gg_{display:flex}._flex-inline_17xy3_gg_{display:inline-flex}"
 /*__inner_css_end__*/
-, "j3mbcr_gg_")
+, "1386mxk_gg_")
 /*__reshadow_css_end__*/
 , {
-  "flex": "_flex_1556n_gg_",
-  "flex-inline": "_flex-inline_naycb_gg_"
+  "flex": "_flex_1qh7v_gg_",
+  "flex-inline": "_flex-inline_17xy3_gg_"
 }),
@@ -30,0 +30,0 @@ style = _extends({}, _ref);

lib/types/Box/useBox.d.ts

@@ -86,4 +86,14 @@ import React from 'react';
     css?: React.CSSProperties;
+    /** CSS `position` property */
+    position?: 'absolute' | 'fixed' | 'relative' | 'static' | 'inherit';
+    /** CSS `top` property */
+    top?: number | string;
+    /** CSS `left` property */
+    left?: number | string;
+    /** CSS `bottom` property */
+    bottom?: number | string;
+    /** CSS `right` property */
+    right?: number | string;
     [key: string]: unknown;
 }
 export default function useBox<T extends IBoxProps>(props: T, ref: any): [React.ElementType | string, any];

package.json

 {
   "name": "@semcore/flex-box",
   "description": "SEMRush FlexBox Component",
-  "version": "4.0.4",
+  "version": "4.1.0",
   "main": "lib/cjs/index.js",
@@ -6,0 +6,0 @@ "module": "lib/es6/index.js",

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

89057

increased by3.27%

Lines of code

1122

increased by3.31%

No dependency changes