@chakra-ui/tabs - npm Package Compare versions

Comparing version 1.0.0-next.6 to 1.0.0-next.7

CHANGELOG.md

@@ -6,2 +6,14 @@ # Change Log
 
+# [1.0.0-next.7](https://github.com/chakra-ui/chakra-ui/compare/@chakra-ui/tabs@1.0.0-next.6...@chakra-ui/tabs@1.0.0-next.7) (2020-07-26)
+
+### Bug Fixes
+
+- types issue in use-tabs
+  ([c388927](https://github.com/chakra-ui/chakra-ui/commit/c38892760257b9bbf1b63c05f7f9ccf1684a90b0))
+
+# Change Log
+
+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.6](https://github.com/chakra-ui/chakra-ui/compare/@chakra-ui/tabs@1.0.0-next.5...@chakra-ui/tabs@1.0.0-next.6) (2020-07-15)
@@ -8,0 +20,0 @@

dist/cjs/tabs.js

@@ -10,3 +10,3 @@ "use strict";
 
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
@@ -29,4 +29,4 @@ var _useTabs2 = require("./use-tabs");
  */
-var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
-  var styles = (0, _system.useStyleConfig)("Tabs", props);
+var Tabs = /*#__PURE__*/_react["default"].forwardRef(function Tabs(props, ref) {
+  var styles = (0, _system.useMultiStyleConfig)("Tabs", props);
 
@@ -36,23 +36,21 @@ var _omitThemingProps = (0, _system.omitThemingProps)(props),
       className = _omitThemingProps.className,
-      rest = _objectWithoutPropertiesLoose(_omitThemingProps, ["children", "className"]);
+      otherProps = _objectWithoutPropertiesLoose(_omitThemingProps, ["children", "className"]);
 
-  var _useTabs = (0, _useTabs2.useTabs)(rest),
+  var _useTabs = (0, _useTabs2.useTabs)(otherProps),
       htmlProps = _useTabs.htmlProps,
-      tabsContext = _objectWithoutPropertiesLoose(_useTabs, ["htmlProps"]);
+      ctx = _objectWithoutPropertiesLoose(_useTabs, ["htmlProps"]);
 
-  var ctx = React.useMemo(function () {
-    return tabsContext;
-  }, [tabsContext]);
-
-  var _className = (0, _utils.cx)("chakra-tabs", className);
-
-  return /*#__PURE__*/React.createElement(_useTabs2.TabsContextProvider, {
-    value: ctx
-  }, /*#__PURE__*/React.createElement(_system.StylesProvider, {
+  var context = (0, _react.useMemo)(function () {
+    return ctx;
+  }, [ctx]);
+  return /*#__PURE__*/_react["default"].createElement(_useTabs2.TabsProvider, {
+    value: context
+  }, /*#__PURE__*/_react["default"].createElement(_system.StylesProvider, {
     value: styles
-  }, /*#__PURE__*/React.createElement(_system.chakra.div, _extends({
-    className: _className,
+  }, /*#__PURE__*/_react["default"].createElement(_system.chakra.div, _extends({
+    className: (0, _utils.cx)("chakra-tabs", className),
     ref: ref
   }, htmlProps), children)));
 });
+
 exports.Tabs = Tabs;
@@ -65,27 +63,22 @@
 /**
- * Tabs
- *
- * The tab button used to activate a specific tab panel. It renders a `button`,
+ * Tab button used to activate a specific tab panel. It renders a `button`,
  * and is responsible for automatic and manual selection modes.
  */
 var Tab = /*#__PURE__*/(0, _system.forwardRef)(function Tab(props, ref) {
-  var className = props.className,
-      rest = _objectWithoutPropertiesLoose(props, ["className"]);
-
   var styles = (0, _system.useStyles)();
-  var tab = (0, _useTabs2.useTab)(_extends({}, rest, {
+  var tabProps = (0, _useTabs2.useTab)(_extends({}, props, {
     ref: ref
   }));
 
-  var _className = (0, _utils.cx)("chakra-tabs__tab", className);
+  var tabStyles = _extends({
+    outline: "0",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }, styles.tab);
 
-  return /*#__PURE__*/React.createElement(_system.chakra.button, _extends({
-    className: _className,
-    __css: _extends({
-      outline: "0",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center"
-    }, styles.tab)
-  }, tab));
+  return /*#__PURE__*/_react["default"].createElement(_system.chakra.button, _extends({}, tabProps, {
+    className: (0, _utils.cx)("chakra-tabs__tab", props.className),
+    __css: tabStyles
+  }));
 });
@@ -99,12 +92,7 @@ exports.Tab = Tab;
 /**
- * TabList
- *
- * Used to manage a list of tab buttons. It renders a `div` by default,
+ * TabList is used to manage a list of tab buttons. It renders a `div` by default,
  * and is responsible the keyboard interaction between tabs.
  */
-var TabList = /*#__PURE__*/React.forwardRef(function TabList(props, ref) {
-  var className = props.className,
-      rest = _objectWithoutPropertiesLoose(props, ["className"]);
-
-  var tablist = (0, _useTabs2.useTabList)(_extends({}, rest, {
+var TabList = /*#__PURE__*/_react["default"].forwardRef(function TabList(props, ref) {
+  var tablistProps = (0, _useTabs2.useTabList)(_extends({}, props, {
     ref: ref
@@ -114,11 +102,12 @@ }));
 
-  var _className = (0, _utils.cx)("chakra-tabs__tablist", className);
+  var tablistStyles = _extends({
+    display: "flex"
+  }, styles.tablist);
 
-  return /*#__PURE__*/React.createElement(_system.chakra.div, _extends({
-    __css: _extends({
-      display: "flex"
-    }, styles.tablist),
-    className: _className
-  }, tablist));
+  return /*#__PURE__*/_react["default"].createElement(_system.chakra.div, _extends({}, tablistProps, {
+    className: (0, _utils.cx)("chakra-tabs__tablist", props.className),
+    __css: tablistStyles
+  }));
 });
+
 exports.TabList = TabList;
@@ -134,19 +123,13 @@
  */
-var TabPanel = /*#__PURE__*/React.forwardRef(function TabPanel(props, ref) {
-  var className = props.className,
-      rest = _objectWithoutPropertiesLoose(props, ["className"]);
-
-  var panel = (0, _useTabs2.useTabPanel)(_extends({}, rest, {
+var TabPanel = /*#__PURE__*/_react["default"].forwardRef(function TabPanel(props, ref) {
+  var panelProps = (0, _useTabs2.useTabPanel)(_extends({}, props, {
     ref: ref
   }));
-
-  var _className = (0, _utils.cx)("chakra-tabs__tab-panel", className);
-
   var styles = (0, _system.useStyles)();
-  return /*#__PURE__*/React.createElement(_system.chakra.div, _extends({
-    className: _className
-  }, panel, {
+  return /*#__PURE__*/_react["default"].createElement(_system.chakra.div, _extends({}, panelProps, {
+    className: (0, _utils.cx)("chakra-tabs__tab-panel", props.className),
     __css: styles.tabpanel
   }));
 });
+
 exports.TabPanel = TabPanel;
@@ -166,15 +149,10 @@
  */
-var TabPanels = /*#__PURE__*/React.forwardRef(function TabPanels(props, ref) {
-  var className = props.className,
-      rest = _objectWithoutPropertiesLoose(props, ["className"]);
-
-  var panelsProp = (0, _useTabs2.useTabPanels)(rest);
-
-  var _className = (0, _utils.cx)("chakra-tabs__tab-panels", className);
-
-  return /*#__PURE__*/React.createElement(_system.chakra.div, _extends({
+var TabPanels = /*#__PURE__*/_react["default"].forwardRef(function TabPanels(props, ref) {
+  var panelsProps = (0, _useTabs2.useTabPanels)(props);
+  return /*#__PURE__*/_react["default"].createElement(_system.chakra.div, _extends({}, panelsProps, {
     ref: ref,
-    className: _className
-  }, panelsProp));
+    className: (0, _utils.cx)("chakra-tabs__tab-panels", props.className)
+  }));
 });
+
 exports.TabPanels = TabPanels;
@@ -192,22 +170,17 @@
  */
-var TabIndicator = /*#__PURE__*/React.forwardRef(function TabIndicator(props, ref) {
-  var className = props.className,
-      style = props.style,
-      rest = _objectWithoutPropertiesLoose(props, ["className", "style"]);
-
+var TabIndicator = /*#__PURE__*/_react["default"].forwardRef(function TabIndicator(props, ref) {
   var indicatorStyle = (0, _useTabs2.useTabIndicator)();
 
-  var _className = (0, _utils.cx)("chakra-tabs__tab-indicator", className);
+  var style = _extends({}, props.style, indicatorStyle);
 
-  var _style = _extends({}, style, indicatorStyle);
-
   var styles = (0, _system.useStyles)();
-  return /*#__PURE__*/React.createElement(_system.chakra.div, _extends({
-    ref: ref,
-    className: _className,
-    style: _style
-  }, rest, {
+  return /*#__PURE__*/_react["default"].createElement(_system.chakra.div, _extends({
+    ref: ref
+  }, props, {
+    className: (0, _utils.cx)("chakra-tabs__tab-indicator", props.className),
+    style: style,
     __css: styles.indicator
   }));
 });
+
 exports.TabIndicator = TabIndicator;
@@ -214,0 +187,0 @@

dist/cjs/use-tabs.js

@@ -10,3 +10,3 @@ "use strict";
 exports.useTabIndicator = useTabIndicator;
-exports.TabsContextProvider = void 0;
+exports.TabsProvider = void 0;
 
@@ -21,8 +21,4 @@ var _clickable = require("@chakra-ui/clickable");
 
-var React = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 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); }
@@ -63,5 +59,5 @@
 
-  var _React$useState = React.useState(defaultIndex != null ? defaultIndex : 0),
-      focusedIndex = _React$useState[0],
-      setFocusedIndex = _React$useState[1];
+  var _useState = (0, _react.useState)(defaultIndex != null ? defaultIndex : 0),
+      focusedIndex = _useState[0],
+      setFocusedIndex = _useState[1];
 
@@ -87,3 +83,3 @@ var _useControllableState = (0, _hooks.useControllableState)({
 
-  React.useEffect(function () {
+  (0, _react.useEffect)(function () {
     if (!(0, _utils.isUndefined)(index)) {
@@ -149,6 +145,6 @@ setFocusedIndex(index);
 }),
-    TabsContextProvider = _createContext[0],
+    TabsProvider = _createContext[0],
     useTabsContext = _createContext[1];
 
-exports.TabsContextProvider = TabsContextProvider;
+exports.TabsProvider = TabsProvider;
 
@@ -252,3 +248,3 @@ /**
 
-  var ref = React.useRef(null);
+  var ref = (0, _react.useRef)(null);
   /**
@@ -312,3 +308,3 @@ * Think of `useDescendant` as the function that registers tab node
  *
- * Since only one panel can be show at a time, we use `React.cloneElement`
+ * Since only one panel can be show at a time, we use `cloneElement`
  * to inject `selected` panel to each TabPanel.
@@ -325,3 +321,3 @@ *
   var children = validChildren.map(function (child, index) {
-    return /*#__PURE__*/React.cloneElement(child, {
+    return /*#__PURE__*/(0, _react.cloneElement)(child, {
       isSelected: index === selectedIndex,
@@ -372,3 +368,3 @@ id: makeTabPanelId(id, index)
 
-  var _React$useState2 = React.useState(function () {
+  var _useState2 = (0, _react.useState)(function () {
     if (isHorizontal) return {
@@ -383,8 +379,8 @@ left: 0,
   }),
-      rect = _React$useState2[0],
-      setRect = _React$useState2[1];
+      rect = _useState2[0],
+      setRect = _useState2[1];
 
-  var _React$useState3 = React.useState(false),
-      hasMeasured = _React$useState3[0],
-      setHasMeasured = _React$useState3[1]; // Update the selected tab rect when the selectedIndex changes
+  var _useState3 = (0, _react.useState)(false),
+      hasMeasured = _useState3[0],
+      setHasMeasured = _useState3[1]; // Update the selected tab rect when the selectedIndex changes
 
@@ -391,0 +387,0 @@

dist/esm/tabs.js

@@ -5,6 +5,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); }
 
-import { chakra, forwardRef, omitThemingProps, StylesProvider, useStyleConfig, useStyles } from "@chakra-ui/system";
+import { chakra, forwardRef, omitThemingProps, StylesProvider, useMultiStyleConfig, useStyles } from "@chakra-ui/system";
 import { cx, __DEV__ } from "@chakra-ui/utils";
-import * as React from "react";
-import { TabsContextProvider, useTab, useTabIndicator, useTabList, useTabPanel, useTabPanels, useTabs } from "./use-tabs";
+import React, { useMemo } from "react";
+import { TabsProvider, useTab, useTabIndicator, useTabList, useTabPanel, useTabPanels, useTabs } from "./use-tabs";
 
@@ -18,3 +18,3 @@ /**
 export var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
-  var styles = useStyleConfig("Tabs", props);
+  var styles = useMultiStyleConfig("Tabs", props);
 
@@ -26,20 +26,17 @@ var _omitThemingProps = omitThemingProps(props),
   } = _omitThemingProps,
-      rest = _objectWithoutPropertiesLoose(_omitThemingProps, ["children", "className"]);
+      otherProps = _objectWithoutPropertiesLoose(_omitThemingProps, ["children", "className"]);
 
-  var _useTabs = useTabs(rest),
+  var _useTabs = useTabs(otherProps),
       {
     htmlProps
   } = _useTabs,
-      tabsContext = _objectWithoutPropertiesLoose(_useTabs, ["htmlProps"]);
+      ctx = _objectWithoutPropertiesLoose(_useTabs, ["htmlProps"]);
 
-  var ctx = React.useMemo(() => tabsContext, [tabsContext]);
-
-  var _className = cx("chakra-tabs", className);
-
-  return /*#__PURE__*/React.createElement(TabsContextProvider, {
-    value: ctx
+  var context = useMemo(() => ctx, [ctx]);
+  return /*#__PURE__*/React.createElement(TabsProvider, {
+    value: context
   }, /*#__PURE__*/React.createElement(StylesProvider, {
     value: styles
   }, /*#__PURE__*/React.createElement(chakra.div, _extends({
-    className: _className,
+    className: cx("chakra-tabs", className),
     ref: ref
@@ -54,29 +51,22 @@ }, htmlProps), children)));
 /**
- * Tabs
- *
- * The tab button used to activate a specific tab panel. It renders a `button`,
+ * Tab button used to activate a specific tab panel. It renders a `button`,
  * and is responsible for automatic and manual selection modes.
  */
 export var Tab = /*#__PURE__*/forwardRef(function Tab(props, ref) {
-  var {
-    className
-  } = props,
-      rest = _objectWithoutPropertiesLoose(props, ["className"]);
-
   var styles = useStyles();
-  var tab = useTab(_extends({}, rest, {
+  var tabProps = useTab(_extends({}, props, {
     ref
   }));
 
-  var _className = cx("chakra-tabs__tab", className);
+  var tabStyles = _extends({
+    outline: "0",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }, styles.tab);
 
-  return /*#__PURE__*/React.createElement(chakra.button, _extends({
-    className: _className,
-    __css: _extends({
-      outline: "0",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center"
-    }, styles.tab)
-  }, tab));
+  return /*#__PURE__*/React.createElement(chakra.button, _extends({}, tabProps, {
+    className: cx("chakra-tabs__tab", props.className),
+    __css: tabStyles
+  }));
 });
@@ -89,14 +79,7 @@
 /**
- * TabList
- *
- * Used to manage a list of tab buttons. It renders a `div` by default,
+ * TabList is used to manage a list of tab buttons. It renders a `div` by default,
  * and is responsible the keyboard interaction between tabs.
  */
 export var TabList = /*#__PURE__*/React.forwardRef(function TabList(props, ref) {
-  var {
-    className
-  } = props,
-      rest = _objectWithoutPropertiesLoose(props, ["className"]);
-
-  var tablist = useTabList(_extends({}, rest, {
+  var tablistProps = useTabList(_extends({}, props, {
     ref
@@ -106,10 +89,10 @@ }));
 
-  var _className = cx("chakra-tabs__tablist", className);
+  var tablistStyles = _extends({
+    display: "flex"
+  }, styles.tablist);
 
-  return /*#__PURE__*/React.createElement(chakra.div, _extends({
-    __css: _extends({
-      display: "flex"
-    }, styles.tablist),
-    className: _className
-  }, tablist));
+  return /*#__PURE__*/React.createElement(chakra.div, _extends({}, tablistProps, {
+    className: cx("chakra-tabs__tablist", props.className),
+    __css: tablistStyles
+  }));
 });
@@ -126,17 +109,8 @@
 export var TabPanel = /*#__PURE__*/React.forwardRef(function TabPanel(props, ref) {
-  var {
-    className
-  } = props,
-      rest = _objectWithoutPropertiesLoose(props, ["className"]);
-
-  var panel = useTabPanel(_extends({}, rest, {
+  var panelProps = useTabPanel(_extends({}, props, {
     ref
   }));
-
-  var _className = cx("chakra-tabs__tab-panel", className);
-
   var styles = useStyles();
-  return /*#__PURE__*/React.createElement(chakra.div, _extends({
-    className: _className
-  }, panel, {
+  return /*#__PURE__*/React.createElement(chakra.div, _extends({}, panelProps, {
+    className: cx("chakra-tabs__tab-panel", props.className),
     __css: styles.tabpanel
@@ -159,15 +133,7 @@ }));
 export var TabPanels = /*#__PURE__*/React.forwardRef(function TabPanels(props, ref) {
-  var {
-    className
-  } = props,
-      rest = _objectWithoutPropertiesLoose(props, ["className"]);
-
-  var panelsProp = useTabPanels(rest);
-
-  var _className = cx("chakra-tabs__tab-panels", className);
-
-  return /*#__PURE__*/React.createElement(chakra.div, _extends({
+  var panelsProps = useTabPanels(props);
+  return /*#__PURE__*/React.createElement(chakra.div, _extends({}, panelsProps, {
     ref: ref,
-    className: _className
-  }, panelsProp));
+    className: cx("chakra-tabs__tab-panels", props.className)
+  }));
 });
@@ -186,20 +152,12 @@
 export var TabIndicator = /*#__PURE__*/React.forwardRef(function TabIndicator(props, ref) {
-  var {
-    className,
-    style
-  } = props,
-      rest = _objectWithoutPropertiesLoose(props, ["className", "style"]);
-
   var indicatorStyle = useTabIndicator();
 
-  var _className = cx("chakra-tabs__tab-indicator", className);
+  var style = _extends({}, props.style, indicatorStyle);
 
-  var _style = _extends({}, style, indicatorStyle);
-
   var styles = useStyles();
   return /*#__PURE__*/React.createElement(chakra.div, _extends({
-    ref: ref,
-    className: _className,
-    style: _style
-  }, rest, {
+    ref: ref
+  }, props, {
+    className: cx("chakra-tabs__tab-indicator", props.className),
+    style: style,
     __css: styles.indicator
@@ -206,0 +164,0 @@ }));

dist/esm/use-tabs.js

@@ -9,3 +9,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); }
 import { callAllHandlers, createOnKeyDown, getValidChildren, isUndefined, mergeRefs, createContext } from "@chakra-ui/utils";
-import * as React from "react";
+import { cloneElement, useState, useRef, useEffect } from "react";
 
@@ -44,3 +44,3 @@ /**
 
-  var [focusedIndex, setFocusedIndex] = React.useState(defaultIndex != null ? defaultIndex : 0);
+  var [focusedIndex, setFocusedIndex] = useState(defaultIndex != null ? defaultIndex : 0);
   var [selectedIndex, setSelectedIndex] = useControllableState({
@@ -60,3 +60,3 @@ defaultValue: defaultIndex != null ? defaultIndex : 0,
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!isUndefined(index)) {
@@ -117,7 +117,7 @@ setFocusedIndex(index);
 }
-var [TabsContextProvider, useTabsContext] = createContext({
+var [TabsProvider, useTabsContext] = createContext({
   name: "TabsContext",
   errorMessage: "useTabsContext: `context` is undefined. Seems you forgot to wrap all tabs components within <Tabs />"
 });
-export { TabsContextProvider };
+export { TabsProvider };
 
@@ -207,3 +207,3 @@ /**
   } = useTabsContext();
-  var ref = React.useRef(null);
+  var ref = useRef(null);
   /**
@@ -267,3 +267,3 @@ * Think of `useDescendant` as the function that registers tab node
  *
- * Since only one panel can be show at a time, we use `React.cloneElement`
+ * Since only one panel can be show at a time, we use `cloneElement`
  * to inject `selected` panel to each TabPanel.
@@ -281,3 +281,3 @@ *
   var validChildren = getValidChildren(props.children);
-  var children = validChildren.map((child, index) => /*#__PURE__*/React.cloneElement(child, {
+  var children = validChildren.map((child, index) => /*#__PURE__*/cloneElement(child, {
     isSelected: index === selectedIndex,
@@ -329,3 +329,3 @@ id: makeTabPanelId(id, index)
 
-  var [rect, setRect] = React.useState(() => {
+  var [rect, setRect] = useState(() => {
     if (isHorizontal) return {
@@ -340,3 +340,3 @@ left: 0,
   });
-  var [hasMeasured, setHasMeasured] = React.useState(false); // Update the selected tab rect when the selectedIndex changes
+  var [hasMeasured, setHasMeasured] = useState(false); // Update the selected tab rect when the selectedIndex changes
 
@@ -343,0 +343,0 @@ useSafeLayoutEffect(() => {

dist/types/use-tabs.d.ts

 import { UseClickableProps } from "@chakra-ui/clickable";
 import { Dict } from "@chakra-ui/utils";
-import * as React from "react";
+import { ReactNode, ReactElement, KeyboardEventHandler, FocusEventHandler, ButtonHTMLAttributes, Ref, CSSProperties } from "react";
 export interface UseTabsProps {
@@ -47,4 +47,4 @@ /**
     focusedIndex: number;
-    setSelectedIndex: React.Dispatch<React.SetStateAction<number>>;
-    setFocusedIndex: React.Dispatch<React.SetStateAction<number>>;
+    setSelectedIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
+    setFocusedIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
     isManual: boolean | undefined;
@@ -90,8 +90,8 @@ orientation: "vertical" | "horizontal";
 export declare type UseTabsReturn = Omit<ReturnType<typeof useTabs>, "htmlProps">;
-declare const TabsContextProvider: React.Provider<Pick<{
+declare const TabsProvider: import("react").Provider<Pick<{
     id: string;
     selectedIndex: number;
     focusedIndex: number;
-    setSelectedIndex: React.Dispatch<React.SetStateAction<number>>;
-    setFocusedIndex: React.Dispatch<React.SetStateAction<number>>;
+    setSelectedIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
+    setFocusedIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
     isManual: boolean | undefined;
@@ -136,7 +136,7 @@ orientation: "vertical" | "horizontal";
 }, "isManual" | "orientation" | "id" | "focusedIndex" | "setFocusedIndex" | "selectedIndex" | "setSelectedIndex" | "enabledDomContext" | "domContext">>;
-export { TabsContextProvider };
+export { TabsProvider };
 export interface UseTabListProps {
-    children?: React.ReactNode;
-    onKeyDown?: React.KeyboardEventHandler;
-    ref?: React.Ref<any>;
+    children?: ReactNode;
+    onKeyDown?: KeyboardEventHandler;
+    ref?: Ref<any>;
 }
@@ -152,10 +152,11 @@ /**
     "aria-orientation": "vertical" | "horizontal";
-    onKeyDown: (event: React.KeyboardEvent<Element>) => void;
+    onKeyDown: (event: import("react").KeyboardEvent<Element>) => void;
 };
 export declare type UseTabListReturn = ReturnType<typeof useTabList>;
-export interface UseTabProps extends UseClickableProps {
+export interface UseTabProps extends Omit<UseClickableProps, "ref"> {
     id?: string;
     isSelected?: boolean;
     panelId?: string;
-    onFocus?: React.FocusEventHandler;
+    onFocus?: FocusEventHandler;
+    ref?: Ref<any>;
 }
@@ -168,5 +169,5 @@ /**
  */
-export declare function useTab<P extends UseTabProps>(props: P): React.ButtonHTMLAttributes<any>;
+export declare function useTab<P extends UseTabProps>(props: P): ButtonHTMLAttributes<any>;
 export interface UseTabPanelsProps {
-    children?: React.ReactNode;
+    children?: ReactNode;
 }
@@ -176,3 +177,3 @@ /**
  *
- * Since only one panel can be show at a time, we use `React.cloneElement`
+ * Since only one panel can be show at a time, we use `cloneElement`
  * to inject `selected` panel to each TabPanel.
@@ -184,3 +185,3 @@ *
 export declare function useTabPanels<P extends UseTabPanelsProps>(props: P): P & {
-    children: React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>[];
+    children: ReactElement<any, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => import("react").Component<any, any, any>)> | null) | (new (props: any) => import("react").Component<any, any, any>)>[];
 };
@@ -206,2 +207,2 @@ /**
  */
-export declare function useTabIndicator(): React.CSSProperties;
+export declare function useTabIndicator(): CSSProperties;

package.json

 {
   "name": "@chakra-ui/tabs",
-  "version": "1.0.0-next.6",
+  "version": "1.0.0-next.7",
   "description": "Accessible Tabs component for React and Chakra UI",
@@ -58,15 +58,15 @@ "keywords": [
   "dependencies": {
-    "@chakra-ui/clickable": "^1.0.0-next.6",
-    "@chakra-ui/descendant": "^1.0.0-next.6",
-    "@chakra-ui/hooks": "^1.0.0-next.6",
-    "@chakra-ui/utils": "^1.0.0-next.6"
+    "@chakra-ui/clickable": "^1.0.0-next.7",
+    "@chakra-ui/descendant": "^1.0.0-next.7",
+    "@chakra-ui/hooks": "^1.0.0-next.7",
+    "@chakra-ui/utils": "^1.0.0-next.7"
   },
   "devDependencies": {
-    "@chakra-ui/system": "^1.0.0-next.6"
+    "@chakra-ui/system": "^1.0.0-next.7"
   },
   "peerDependencies": {
-    "@chakra-ui/system": "^1.0.0-next.5",
+    "@chakra-ui/system": "^1.0.0-next.7",
     "react": "16.x"
   },
-  "gitHead": "72eeca4ba3fc6e7d8845b0d283a03cb6ec384a50"
+  "gitHead": "3dcabd8c7e21b32ae1b61485588f70370c4e626f"
 }

No alert changes

Worsened metrics

Total package byte prevSize

208406

decreased by-1.38%

Lines of code

1627

decreased by-3.38%

Dependency changes

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

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

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

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