@chakra-ui/tabs - npm Package Compare versions

Comparing version 1.5.1 to 1.5.2

CHANGELOG.md

 # Change Log
 
+## 1.5.2
+
+### Patch Changes
+
+- [`8acd3c11a`](https://github.com/chakra-ui/chakra-ui/commit/8acd3c11a80271b0dca4b7a8922c59b8969d5401)
+  [#4102](https://github.com/chakra-ui/chakra-ui/pull/4102) Thanks
+  [@cschroeter](https://github.com/cschroeter)! - fix(tabs): render tab
+  indicator at the correct pos
+
+* [`b93eb007e`](https://github.com/chakra-ui/chakra-ui/commit/b93eb007e53b56f19beb8535dca2378c4e8198a6)
+  [#4204](https://github.com/chakra-ui/chakra-ui/pull/4204) Thanks
+  [@jesstelford](https://github.com/jesstelford)! - Remove erroneous note about
+  <Tabs> not rendering to DOM
+
+- [`afb9b3cfa`](https://github.com/chakra-ui/chakra-ui/commit/afb9b3cfa87076ed8897b7edd4a9d9f1e1701721)
+  [#4103](https://github.com/chakra-ui/chakra-ui/pull/4103) Thanks
+  [@with-heart](https://github.com/with-heart)! - Update transitions to use
+  theme tokens and remove outline transitions
+
+- Updated dependencies
+  [[`aa374ffcb`](https://github.com/chakra-ui/chakra-ui/commit/aa374ffcb4003efd88eb6a62e10723ea9fbfa3d0)]:
+  - @chakra-ui/hooks@1.5.3
+
 ## 1.5.1
@@ -4,0 +27,0 @@

dist/cjs/tabs.js

@@ -25,4 +25,3 @@ "use strict";
  *
- * Provides context and logic for all tabs components. It doesn't render
- * any DOM node.
+ * Provides context and logic for all tabs components.
  */
@@ -29,0 +28,0 @@ var Tabs = /*#__PURE__*/(0, _system.forwardRef)(function (props, ref) {

dist/cjs/use-tabs.js

@@ -369,14 +369,10 @@ "use strict";
   (0, _hooks.useSafeLayoutEffect)(function () {
-    var _tab$node;
-
     if ((0, _utils.isUndefined)(selectedIndex)) return undefined;
     var tab = descendants.item(selectedIndex);
-    var tabRect = tab == null ? void 0 : (_tab$node = tab.node) == null ? void 0 : _tab$node.getBoundingClientRect(); // Horizontal Tab: Calculate width and left distance
+    if ((0, _utils.isUndefined)(tab)) return undefined; // Horizontal Tab: Calculate width and left distance
 
-    if (isHorizontal && tabRect) {
-      var left = tabRect.left,
-          width = tabRect.width;
+    if (isHorizontal) {
       setRect({
-        left: left,
-        width: width
+        left: tab.node.offsetLeft,
+        width: tab.node.offsetWidth
       });
@@ -386,8 +382,6 @@ } // Vertical Tab: Calculate height and top distance
 
-    if (isVertical && tabRect) {
-      var top = tabRect.top,
-          height = tabRect.height;
+    if (isVertical) {
       setRect({
-        top: top,
-        height: height
+        top: tab.node.offsetTop,
+        height: tab.node.offsetHeight
       });
@@ -409,3 +403,5 @@ } // Prevent unwanted transition from 0 to measured rect
     position: "absolute",
-    transition: hasMeasured ? "all 200ms cubic-bezier(0, 0, 0.2, 1)" : "none"
+    transitionProperty: "left, right, top, bottom",
+    transitionDuration: hasMeasured ? "200ms" : "0ms",
+    transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)"
   }, rect);
@@ -412,0 +408,0 @@ }

dist/esm/tabs.js

@@ -13,4 +13,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); }
  *
- * Provides context and logic for all tabs components. It doesn't render
- * any DOM node.
+ * Provides context and logic for all tabs components.
  */
@@ -17,0 +16,0 @@ export var Tabs = /*#__PURE__*/forwardRef((props, ref) => {

dist/esm/use-tabs.js

@@ -321,16 +321,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); }
   useSafeLayoutEffect(() => {
-    var _tab$node;
-
     if (isUndefined(selectedIndex)) return undefined;
     var tab = descendants.item(selectedIndex);
-    var tabRect = tab == null ? void 0 : (_tab$node = tab.node) == null ? void 0 : _tab$node.getBoundingClientRect(); // Horizontal Tab: Calculate width and left distance
+    if (isUndefined(tab)) return undefined; // Horizontal Tab: Calculate width and left distance
 
-    if (isHorizontal && tabRect) {
-      var {
-        left,
-        width
-      } = tabRect;
+    if (isHorizontal) {
       setRect({
-        left,
-        width
+        left: tab.node.offsetLeft,
+        width: tab.node.offsetWidth
       });
@@ -340,10 +334,6 @@ } // Vertical Tab: Calculate height and top distance
 
-    if (isVertical && tabRect) {
-      var {
-        top,
-        height
-      } = tabRect;
+    if (isVertical) {
       setRect({
-        top,
-        height
+        top: tab.node.offsetTop,
+        height: tab.node.offsetHeight
       });
@@ -365,3 +355,5 @@ } // Prevent unwanted transition from 0 to measured rect
     position: "absolute",
-    transition: hasMeasured ? "all 200ms cubic-bezier(0, 0, 0.2, 1)" : "none"
+    transitionProperty: "left, right, top, bottom",
+    transitionDuration: hasMeasured ? "200ms" : "0ms",
+    transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)"
   }, rect);
@@ -368,0 +360,0 @@ }

dist/types/tabs.d.ts

@@ -20,4 +20,3 @@ import { ThemingProps, HTMLChakraProps } from "@chakra-ui/system";
  *
- * Provides context and logic for all tabs components. It doesn't render
- * any DOM node.
+ * Provides context and logic for all tabs components.
  */
@@ -24,0 +23,0 @@ export declare const Tabs: import("@chakra-ui/system").ComponentWithAs<"div", TabsProps>;

package.json

 {
   "name": "@chakra-ui/tabs",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "Accessible Tabs component for React and Chakra UI",
@@ -66,3 +66,3 @@ "keywords": [
     "@chakra-ui/descendant": "2.0.1",
-    "@chakra-ui/hooks": "1.5.2",
+    "@chakra-ui/hooks": "1.5.3",
     "@chakra-ui/react-utils": "1.1.2",
@@ -72,3 +72,3 @@ "@chakra-ui/utils": "1.8.0"
   "devDependencies": {
-    "@chakra-ui/system": "1.6.5",
+    "@chakra-ui/system": "1.7.0",
     "react": "^17.0.1"
@@ -75,0 +75,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

176772

increased by0.55%

Worsened metrics

Lines of code

1809

decreased by-0.71%

Dependency changes

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

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

• Updated@chakra-ui/hooks@1.5.3