@chakra-ui/tabs - npm Package Compare versions

Comparing version 1.0.0-next.2 to 1.0.0-next.3

CHANGELOG.md

 # Change Log
 
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# 1.0.0-next.2 (2020-06-22)
+# 1.0.0-next.3 (2020-06-28)
 
-
 ### Bug Fixes
 
-* [#891](https://github.com/chakra-ui/chakra-ui/issues/891) ([e107acc](https://github.com/chakra-ui/chakra-ui/commit/e107acc8487898a965b0d695c1da71f46fc56d5e))
-* ts issue with sx prop ([d3b1340](https://github.com/chakra-ui/chakra-ui/commit/d3b1340cb255937927b4d4c56ce218141570b951))
+- [#891](https://github.com/chakra-ui/chakra-ui/issues/891)
+  ([e107acc](https://github.com/chakra-ui/chakra-ui/commit/e107acc8487898a965b0d695c1da71f46fc56d5e))
+- ts issue with sx prop
+  ([d3b1340](https://github.com/chakra-ui/chakra-ui/commit/d3b1340cb255937927b4d4c56ce218141570b951))
 
-
 ### Features
 
-* support global tab indicator styling ([548f975](https://github.com/chakra-ui/chakra-ui/commit/548f9753e730f377aa2324ebf603a88c0152650e))
+- support global tab indicator styling
+  ([548f975](https://github.com/chakra-ui/chakra-ui/commit/548f9753e730f377aa2324ebf603a88c0152650e))
 
-
-
-
-
 # Change Log
@@ -28,3 +25,3 @@
 
-# 1.0.0-next.1 (2020-06-21)
+# 1.0.0-next.2 (2020-06-21)
 
@@ -31,0 +28,0 @@ ### Bug Fixes

dist/cjs/tabs.js

@@ -51,3 +51,5 @@ "use strict";
       className = props.className,
-      rest = _objectWithoutPropertiesLoose(props, ["children", "variant", "size", "colorScheme", "isFitted", "className"]);
+      _props$align = props.align,
+      align = _props$align === void 0 ? "start" : _props$align,
+      rest = _objectWithoutPropertiesLoose(props, ["children", "variant", "size", "colorScheme", "isFitted", "className", "align"]);
 
@@ -109,3 +111,3 @@ var _useTabs = (0, _useTabs2.useTabs)(rest),
   var className = props.className,
-      htmlProps = _objectWithoutPropertiesLoose(props, ["className"]);
+      rest = _objectWithoutPropertiesLoose(props, ["className"]);
 
@@ -116,3 +118,3 @@ var _useThemingContext = useThemingContext(),
 
-  var tabProps = (0, _useTabs2.useTab)(_extends({}, htmlProps, {
+  var tabProps = (0, _useTabs2.useTab)(_extends({}, rest, {
     ref: ref
@@ -142,3 +144,6 @@ }));
 var StyledTabList = (0, _system.chakra)("div", {
-  themeKey: "Tabs.TabList"
+  themeKey: "Tabs.TabList",
+  baseStyle: {
+    display: "flex"
+  }
 });
@@ -154,9 +159,11 @@
   var className = props.className,
-      htmlProps = _objectWithoutPropertiesLoose(props, ["className"]);
+      rest = _objectWithoutPropertiesLoose(props, ["className"]);
 
   var _useThemingContext2 = useThemingContext(),
       isFitted = _useThemingContext2.isFitted,
-      theming = _objectWithoutPropertiesLoose(_useThemingContext2, ["isFitted"]);
+      _useThemingContext2$a = _useThemingContext2.align,
+      align = _useThemingContext2$a === void 0 ? "start" : _useThemingContext2$a,
+      theming = _objectWithoutPropertiesLoose(_useThemingContext2, ["isFitted", "align"]);
 
-  var tablistProps = (0, _useTabs2.useTabList)(_extends({}, htmlProps, {
+  var tablistProps = (0, _useTabs2.useTabList)(_extends({}, rest, {
     ref: ref
@@ -167,3 +174,9 @@ }));
 
+  var alignments = {
+    end: "flex-end",
+    center: "center",
+    start: "flex-start"
+  };
   return /*#__PURE__*/React.createElement(StyledTabList, _extends({
+    justifyContent: alignments[align],
     className: _className
@@ -196,5 +209,5 @@ }, theming, tablistProps));
   var className = props.className,
-      htmlProps = _objectWithoutPropertiesLoose(props, ["className"]);
+      rest = _objectWithoutPropertiesLoose(props, ["className"]);
 
-  var panelProps = (0, _useTabs2.useTabPanel)(_extends({}, htmlProps, {
+  var panelProps = (0, _useTabs2.useTabPanel)(_extends({}, rest, {
     ref: ref
@@ -225,5 +238,5 @@ }));
   var className = props.className,
-      htmlProps = _objectWithoutPropertiesLoose(props, ["className"]);
+      rest = _objectWithoutPropertiesLoose(props, ["className"]);
 
-  var panelsProp = (0, _useTabs2.useTabPanels)(htmlProps);
+  var panelsProp = (0, _useTabs2.useTabPanels)(rest);
 
@@ -263,3 +276,3 @@ var _className = (0, _utils.cx)("chakra-tabs__tab-panels", className);
       style = props.style,
-      htmlProps = _objectWithoutPropertiesLoose(props, ["className", "style"]);
+      rest = _objectWithoutPropertiesLoose(props, ["className", "style"]);
 
@@ -276,3 +289,3 @@ var styles = (0, _useTabs2.useTabIndicator)();
     style: _style
-  }, htmlProps));
+  }, rest));
 });
@@ -279,0 +292,0 @@ exports.TabIndicator = TabIndicator;

dist/esm/tabs.js

@@ -32,5 +32,6 @@ 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); }
     isFitted,
-    className
+    className,
+    align = "start"
   } = props,
-      rest = _objectWithoutPropertiesLoose(props, ["children", "variant", "size", "colorScheme", "isFitted", "className"]);
+      rest = _objectWithoutPropertiesLoose(props, ["children", "variant", "size", "colorScheme", "isFitted", "className", "align"]);
 
@@ -93,3 +94,3 @@ var _useTabs = useTabs(rest),
   } = props,
-      htmlProps = _objectWithoutPropertiesLoose(props, ["className"]);
+      rest = _objectWithoutPropertiesLoose(props, ["className"]);
 
@@ -102,3 +103,3 @@ var _useThemingContext = useThemingContext(),
 
-  var tabProps = useTab(_extends({}, htmlProps, {
+  var tabProps = useTab(_extends({}, rest, {
     ref
@@ -127,3 +128,6 @@ }));
 var StyledTabList = chakra("div", {
-  themeKey: "Tabs.TabList"
+  themeKey: "Tabs.TabList",
+  baseStyle: {
+    display: "flex"
+  }
 });
@@ -141,8 +145,11 @@
   } = props,
-      htmlProps = _objectWithoutPropertiesLoose(props, ["className"]);
+      rest = _objectWithoutPropertiesLoose(props, ["className"]);
 
   var _useThemingContext2 = useThemingContext(),
-      theming = _objectWithoutPropertiesLoose(_useThemingContext2, ["isFitted"]);
+      {
+    align = "start"
+  } = _useThemingContext2,
+      theming = _objectWithoutPropertiesLoose(_useThemingContext2, ["isFitted", "align"]);
 
-  var tablistProps = useTabList(_extends({}, htmlProps, {
+  var tablistProps = useTabList(_extends({}, rest, {
     ref
@@ -153,3 +160,9 @@ }));
 
+  var alignments = {
+    end: "flex-end",
+    center: "center",
+    start: "flex-start"
+  };
   return /*#__PURE__*/React.createElement(StyledTabList, _extends({
+    justifyContent: alignments[align],
     className: _className
@@ -183,5 +196,5 @@ }, theming, tablistProps));
   } = props,
-      htmlProps = _objectWithoutPropertiesLoose(props, ["className"]);
+      rest = _objectWithoutPropertiesLoose(props, ["className"]);
 
-  var panelProps = useTabPanel(_extends({}, htmlProps, {
+  var panelProps = useTabPanel(_extends({}, rest, {
     ref
@@ -213,5 +226,5 @@ }));
   } = props,
-      htmlProps = _objectWithoutPropertiesLoose(props, ["className"]);
+      rest = _objectWithoutPropertiesLoose(props, ["className"]);
 
-  var panelsProp = useTabPanels(htmlProps);
+  var panelsProp = useTabPanels(rest);
 
@@ -252,3 +265,3 @@ var _className = cx("chakra-tabs__tab-panels", className);
   } = props,
-      htmlProps = _objectWithoutPropertiesLoose(props, ["className", "style"]);
+      rest = _objectWithoutPropertiesLoose(props, ["className", "style"]);
 
@@ -265,3 +278,3 @@ var styles = useTabIndicator();
     style: _style
-  }, htmlProps));
+  }, rest));
 });
@@ -268,0 +281,0 @@

package.json

 {
   "name": "@chakra-ui/tabs",
-  "version": "1.0.0-next.2",
+  "version": "1.0.0-next.3",
   "description": "Accessible Tabs component for React and Chakra UI",
@@ -22,2 +22,3 @@ "keywords": [
   ],
+  "sideEffects": false,
   "author": "Segun Adebayo <[e-mail]>",
@@ -31,3 +32,4 @@ "homepage": "https://github.com/chakra-ui/chakra-ui#readme",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
@@ -59,9 +61,9 @@ "publishConfig": {
   "dependencies": {
-    "@chakra-ui/clickable": "^1.0.0-next.2",
-    "@chakra-ui/descendant": "^1.0.0-next.2",
-    "@chakra-ui/hooks": "^1.0.0-next.2",
-    "@chakra-ui/utils": "^1.0.0-next.2"
+    "@chakra-ui/clickable": "^1.0.0-next.3",
+    "@chakra-ui/descendant": "^1.0.0-next.3",
+    "@chakra-ui/hooks": "^1.0.0-next.3",
+    "@chakra-ui/utils": "^1.0.0-next.3"
   },
   "devDependencies": {
-    "@chakra-ui/system": "^1.0.0-next.2"
+    "@chakra-ui/system": "^1.0.0-next.3"
   },
@@ -72,3 +74,3 @@ "peerDependencies": {
   },
-  "gitHead": "c5b51e43e9dff400f8bba7da7ffd135f5d33628b"
+  "gitHead": "d31ba9c35993985f49da4885dd47ab8dab49cdd1"
 }

No alert changes

Improved metrics

Total package byte prevSize

241842

increased by8.85%

Number of package files

25

increased by13.64%

Lines of code

2477

increased by36.7%

Dependency changes

• Updated@chakra-ui/clickable@^1.0.0-next.3

• Updated@chakra-ui/descendant@^1.0.0-next.3

• Updated@chakra-ui/hooks@^1.0.0-next.3

• Updated@chakra-ui/utils@^1.0.0-next.3