@chakra-ui/input - npm Package Compare versions

Comparing version 1.2.1 to 1.2.2

CHANGELOG.md

 # Change Log
 
+## 1.2.2
+
+### Patch Changes
+
+- [`327f00644`](https://github.com/chakra-ui/chakra-ui/commit/327f00644d3336fe1e2d3152f9cc3474a18824ef)
+  [#3765](https://github.com/chakra-ui/chakra-ui/pull/3765) Thanks
+  [@segunadebayo](https://github.com/segunadebayo)! - Remove unused padding-x
+  from input element
+
+* [`890839d9f`](https://github.com/chakra-ui/chakra-ui/commit/890839d9fe32d5ec90954c8f4c5b6c463ff0b57d)
+  [#3765](https://github.com/chakra-ui/chakra-ui/pull/3765) Thanks
+  [@segunadebayo](https://github.com/segunadebayo)! - Update input addon and
+  element style handling
+
+* Updated dependencies
+  [[`8b5eb9654`](https://github.com/chakra-ui/chakra-ui/commit/8b5eb9654affe562795d38a19f732f84732a949d)]:
+  - @chakra-ui/utils@1.5.2
+  - @chakra-ui/form-control@1.3.2
+
 ## 1.2.1
@@ -4,0 +23,0 @@

dist/cjs/input-addon.js

@@ -22,10 +22,10 @@ "use strict";
   left: {
-    marginRight: "-1px",
-    borderRightRadius: 0,
-    borderRightColor: "transparent"
+    marginEnd: "-1px",
+    borderEndRadius: 0,
+    borderEndColor: "transparent"
   },
   right: {
-    marginLeft: "-1px",
-    borderLeftRadius: 0,
-    borderLeftColor: "transparent"
+    marginStart: "-1px",
+    borderStartRadius: 0,
+    borderStartColor: "transparent"
   }
@@ -32,0 +32,0 @@ };

dist/cjs/input-element.js

@@ -31,3 +31,3 @@ "use strict";
 var InputElement = /*#__PURE__*/(0, _system.forwardRef)(function (props, ref) {
-  var _input$height, _input$height2, _input$paddingLeft, _elementStyles;
+  var _input$height, _input$height2, _elementStyles;
 
@@ -40,3 +40,4 @@ var _props$placement = props.placement,
   var input = styles.field;
-  var elementStyles = (_elementStyles = {}, _elementStyles[placement] = "0", _elementStyles.width = (_input$height = input == null ? void 0 : input.height) != null ? _input$height : input == null ? void 0 : input.h, _elementStyles.height = (_input$height2 = input == null ? void 0 : input.height) != null ? _input$height2 : input == null ? void 0 : input.h, _elementStyles.fontSize = input == null ? void 0 : input.fontSize, _elementStyles.paddingX = (_input$paddingLeft = input == null ? void 0 : input.paddingLeft) != null ? _input$paddingLeft : input == null ? void 0 : input.pl, _elementStyles);
+  var attr = placement === "left" ? "insetStart" : "insetEnd";
+  var elementStyles = (_elementStyles = {}, _elementStyles[attr] = "0", _elementStyles.width = (_input$height = input == null ? void 0 : input.height) != null ? _input$height : input == null ? void 0 : input.h, _elementStyles.height = (_input$height2 = input == null ? void 0 : input.height) != null ? _input$height2 : input == null ? void 0 : input.h, _elementStyles.fontSize = input == null ? void 0 : input.fontSize, _elementStyles);
   return /*#__PURE__*/React.createElement(StyledElement, _extends({
@@ -43,0 +44,0 @@ ref: ref,

dist/cjs/input-group.js

@@ -41,3 +41,3 @@ "use strict";
 
-      groupStyles.paddingLeft = (_input$height = input.height) != null ? _input$height : input.h;
+      groupStyles.paddingStart = (_input$height = input.height) != null ? _input$height : input.h;
     }
@@ -48,35 +48,24 @@
 
-      groupStyles.paddingRight = (_input$height2 = input.height) != null ? _input$height2 : input.h;
+      groupStyles.paddingEnd = (_input$height2 = input.height) != null ? _input$height2 : input.h;
     }
 
     if (child.type.id === "InputRightAddon") {
-      groupStyles.borderRightRadius = 0;
+      groupStyles.borderEndRadius = 0;
     }
 
     if (child.type.id === "InputLeftAddon") {
-      groupStyles.borderLeftRadius = 0;
+      groupStyles.borderStartRadius = 0;
     }
   });
   var clones = validChildren.map(function (child) {
-    var _child$props2, _child$props3, _ref, _ref2;
+    var _child$props, _child$props2;
 
-    var _child$props = child.props,
-        pl = _child$props.pl,
-        paddingLeft = _child$props.paddingLeft,
-        pr = _child$props.pr,
-        paddingRight = _child$props.paddingRight;
     /**
      * Make it possible to override the size and variant from `Input`
      */
-
     var theming = {
-      size: ((_child$props2 = child.props) == null ? void 0 : _child$props2.size) || props.size,
-      variant: ((_child$props3 = child.props) == null ? void 0 : _child$props3.variant) || props.variant
+      size: ((_child$props = child.props) == null ? void 0 : _child$props.size) || props.size,
+      variant: ((_child$props2 = child.props) == null ? void 0 : _child$props2.variant) || props.variant
     };
-    return child.type.id !== "Input" ? /*#__PURE__*/React.cloneElement(child, theming) : /*#__PURE__*/React.cloneElement(child, _extends({}, theming, {
-      paddingLeft: (_ref = pl != null ? pl : paddingLeft) != null ? _ref : groupStyles == null ? void 0 : groupStyles.paddingLeft,
-      paddingRight: (_ref2 = pr != null ? pr : paddingRight) != null ? _ref2 : groupStyles == null ? void 0 : groupStyles.paddingRight,
-      borderLeftRadius: groupStyles == null ? void 0 : groupStyles.borderLeftRadius,
-      borderRightRadius: groupStyles == null ? void 0 : groupStyles.borderRightRadius
-    }));
+    return child.type.id !== "Input" ? /*#__PURE__*/React.cloneElement(child, theming) : /*#__PURE__*/React.cloneElement(child, Object.assign(theming, groupStyles, child.props));
   });
@@ -83,0 +72,0 @@ return /*#__PURE__*/React.createElement(_system.chakra.div, _extends({

dist/esm/input-addon.js

@@ -10,10 +10,10 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
   left: {
-    marginRight: "-1px",
-    borderRightRadius: 0,
-    borderRightColor: "transparent"
+    marginEnd: "-1px",
+    borderEndRadius: 0,
+    borderEndColor: "transparent"
   },
   right: {
-    marginLeft: "-1px",
-    borderLeftRadius: 0,
-    borderLeftColor: "transparent"
+    marginStart: "-1px",
+    borderStartRadius: 0,
+    borderStartColor: "transparent"
   }
@@ -20,0 +20,0 @@ };

dist/esm/input-element.js

@@ -19,3 +19,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var InputElement = /*#__PURE__*/forwardRef((props, ref) => {
-  var _input$height, _input$height2, _input$paddingLeft;
+  var _input$height, _input$height2;
 
@@ -29,8 +29,8 @@ var {
   var input = styles.field;
+  var attr = placement === "left" ? "insetStart" : "insetEnd";
   var elementStyles = {
-    [placement]: "0",
+    [attr]: "0",
     width: (_input$height = input == null ? void 0 : input.height) != null ? _input$height : input == null ? void 0 : input.h,
     height: (_input$height2 = input == null ? void 0 : input.height) != null ? _input$height2 : input == null ? void 0 : input.h,
-    fontSize: input == null ? void 0 : input.fontSize,
-    paddingX: (_input$paddingLeft = input == null ? void 0 : input.paddingLeft) != null ? _input$paddingLeft : input == null ? void 0 : input.pl
+    fontSize: input == null ? void 0 : input.fontSize
   };
@@ -37,0 +37,0 @@ return /*#__PURE__*/React.createElement(StyledElement, _extends({

dist/esm/input-group.js

@@ -30,3 +30,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-      groupStyles.paddingLeft = (_input$height = input.height) != null ? _input$height : input.h;
+      groupStyles.paddingStart = (_input$height = input.height) != null ? _input$height : input.h;
     }
@@ -37,26 +37,19 @@
 
-      groupStyles.paddingRight = (_input$height2 = input.height) != null ? _input$height2 : input.h;
+      groupStyles.paddingEnd = (_input$height2 = input.height) != null ? _input$height2 : input.h;
     }
 
     if (child.type.id === "InputRightAddon") {
-      groupStyles.borderRightRadius = 0;
+      groupStyles.borderEndRadius = 0;
     }
 
     if (child.type.id === "InputLeftAddon") {
-      groupStyles.borderLeftRadius = 0;
+      groupStyles.borderStartRadius = 0;
     }
   });
   var clones = validChildren.map(child => {
-    var _child$props, _child$props2, _ref, _ref2;
+    var _child$props, _child$props2;
 
-    var {
-      pl,
-      paddingLeft,
-      pr,
-      paddingRight
-    } = child.props;
     /**
      * Make it possible to override the size and variant from `Input`
      */
-
     var theming = {
@@ -66,8 +59,3 @@ size: ((_child$props = child.props) == null ? void 0 : _child$props.size) || props.size,
     };
-    return child.type.id !== "Input" ? /*#__PURE__*/React.cloneElement(child, theming) : /*#__PURE__*/React.cloneElement(child, _extends({}, theming, {
-      paddingLeft: (_ref = pl != null ? pl : paddingLeft) != null ? _ref : groupStyles == null ? void 0 : groupStyles.paddingLeft,
-      paddingRight: (_ref2 = pr != null ? pr : paddingRight) != null ? _ref2 : groupStyles == null ? void 0 : groupStyles.paddingRight,
-      borderLeftRadius: groupStyles == null ? void 0 : groupStyles.borderLeftRadius,
-      borderRightRadius: groupStyles == null ? void 0 : groupStyles.borderRightRadius
-    }));
+    return child.type.id !== "Input" ? /*#__PURE__*/React.cloneElement(child, theming) : /*#__PURE__*/React.cloneElement(child, Object.assign(theming, groupStyles, child.props));
   });
@@ -74,0 +62,0 @@ return /*#__PURE__*/React.createElement(chakra.div, _extends({

package.json

 {
   "name": "@chakra-ui/input",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "A React component for input text field",
@@ -56,8 +56,8 @@ "keywords": [
   "dependencies": {
-    "@chakra-ui/form-control": "1.3.1",
+    "@chakra-ui/form-control": "1.3.2",
     "@chakra-ui/react-utils": "1.1.1",
-    "@chakra-ui/utils": "1.5.1"
+    "@chakra-ui/utils": "1.5.2"
   },
   "devDependencies": {
-    "@chakra-ui/system": "1.6.1",
+    "@chakra-ui/system": "1.6.2",
     "react": "^17.0.1"
@@ -64,0 +64,0 @@ },

No alert changes

Worsened metrics

Total package byte prevSize

81341

decreased by-2.4%

Lines of code

613

decreased by-3.16%

Dependency changes

• + Added@chakra-ui/form-control@1.3.2(transitive)

• + Added@chakra-ui/hooks@1.4.0(transitive)

• + Added@chakra-ui/icon@1.1.6(transitive)

• + Added@chakra-ui/utils@1.5.2(transitive)

• + Addedimport-fresh@3.3.1(transitive)

• - Removed@chakra-ui/form-control@1.3.1(transitive)

• - Removed@chakra-ui/hooks@1.3.1(transitive)

• - Removed@chakra-ui/icon@1.1.5(transitive)

• - Removed@chakra-ui/utils@1.5.1(transitive)

• - Removedimport-fresh@3.3.0(transitive)

• Updated@chakra-ui/form-control@1.3.2

• Updated@chakra-ui/utils@1.5.2