@chakra-ui/tabs - npm Package Compare versions

Comparing version 1.0.0-next.4 to 1.0.0-next.5

CHANGELOG.md

@@ -6,2 +6,14 @@ # Change Log
 
+# [1.0.0-next.5](https://github.com/chakra-ui/chakra-ui/compare/@chakra-ui/tabs@1.0.0-next.4...@chakra-ui/tabs@1.0.0-next.5) (2020-07-15)
+
+### Bug Fixes
+
+- tabs align prop didnt do anything
+  ([8e56b1b](https://github.com/chakra-ui/chakra-ui/commit/8e56b1b8427bd49a91c67ca3c1da792e76ef005c))
+
+# 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.4 (2020-07-01)
@@ -8,0 +20,0 @@

dist/cjs/tabs.js

 "use strict";
 
 exports.__esModule = true;
-exports.TabIndicator = exports.TabPanels = exports.TabPanel = exports.TabList = exports.Tab = exports.Tabs = exports.useTabsThemingContext = void 0;
+exports.TabIndicator = exports.TabPanels = exports.TabPanel = exports.TabList = exports.Tab = exports.Tabs = void 0;
 
@@ -22,10 +22,2 @@ var _system = require("@chakra-ui/system");
 
-var _createContext = (0, _utils.createContext)({
-  name: "TabsThemingContext"
-}),
-    ThemingContextProvider = _createContext[0],
-    useThemingContext = _createContext[1];
-
-exports.useTabsThemingContext = useThemingContext;
-
 /**
@@ -38,27 +30,16 @@ * Tabs
 var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
-  /**
-   * Gets the default props for `variant` and `size` from `theme.components.Tabs`
-   */
-  var defaults = (0, _system.useThemeDefaultProps)("Tabs");
+  var styles = (0, _system.useStyleConfig)("Tabs", props);
 
-  var children = props.children,
-      _props$variant = props.variant,
-      variant = _props$variant === void 0 ? defaults == null ? void 0 : defaults.variant : _props$variant,
-      _props$size = props.size,
-      size = _props$size === void 0 ? defaults == null ? void 0 : defaults.size : _props$size,
-      _props$colorScheme = props.colorScheme,
-      colorScheme = _props$colorScheme === void 0 ? defaults == null ? void 0 : defaults.colorScheme : _props$colorScheme,
-      isFitted = props.isFitted,
-      className = props.className,
-      _props$align = props.align,
-      align = _props$align === void 0 ? "start" : _props$align,
-      rest = _objectWithoutPropertiesLoose(props, ["children", "variant", "size", "colorScheme", "isFitted", "className", "align"]);
+  var _omitThemingProps = (0, _system.omitThemingProps)(props),
+      children = _omitThemingProps.children,
+      className = _omitThemingProps.className,
+      rest = _objectWithoutPropertiesLoose(_omitThemingProps, ["children", "className"]);
 
   var _useTabs = (0, _useTabs2.useTabs)(rest),
       htmlProps = _useTabs.htmlProps,
-      context = _objectWithoutPropertiesLoose(_useTabs, ["htmlProps"]);
+      tabsContext = _objectWithoutPropertiesLoose(_useTabs, ["htmlProps"]);
 
-  var tabs = React.useMemo(function () {
-    return context;
-  }, [context]);
+  var ctx = React.useMemo(function () {
+    return tabsContext;
+  }, [tabsContext]);
 
@@ -68,10 +49,5 @@ var _className = (0, _utils.cx)("chakra-tabs", className);
   return /*#__PURE__*/React.createElement(_useTabs2.TabsContextProvider, {
-    value: tabs
-  }, /*#__PURE__*/React.createElement(ThemingContextProvider, {
-    value: {
-      variant: variant,
-      size: size,
-      colorScheme: colorScheme,
-      isFitted: isFitted
-    }
+    value: ctx
+  }, /*#__PURE__*/React.createElement(_system.StylesProvider, {
+    value: styles
   }, /*#__PURE__*/React.createElement(_system.chakra.div, _extends({
@@ -87,20 +63,3 @@ className: _className,
 }
-/**
- * Tabs - Theming
- *
- * To change the styles of a tab buttons globally, update the styles in
- * `theme.components.Tabs` under the `Tab` key.
- */
 
-
-var StyledTab = (0, _system.chakra)("button", {
-  themeKey: "Tabs.Tab",
-  baseStyle: {
-    outline: "0",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center"
-  }
-});
-
 /**
@@ -116,7 +75,4 @@ * Tabs
 
-  var _useThemingContext = useThemingContext(),
-      isFitted = _useThemingContext.isFitted,
-      theming = _objectWithoutPropertiesLoose(_useThemingContext, ["isFitted"]);
-
-  var tabProps = (0, _useTabs2.useTab)(_extends({}, rest, {
+  var styles = (0, _system.useStyles)();
+  var tab = (0, _useTabs2.useTab)(_extends({}, rest, {
     ref: ref
@@ -127,6 +83,11 @@ }));
 
-  return /*#__PURE__*/React.createElement(StyledTab, _extends({
+  return /*#__PURE__*/React.createElement(_system.chakra.button, _extends({
     className: _className,
-    flex: isFitted ? 1 : undefined
-  }, theming, tabProps));
+    __css: _extends({
+      outline: "0",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }, styles.tab)
+  }, tab));
 });
@@ -138,17 +99,3 @@ exports.Tab = Tab;
 }
-/**
- * TabList - Theming
- *
- * To change the styles of a tablist globally, update the styles in
- * `theme.components.Tabs` under the `TabList` key
- */
 
-
-var StyledTabList = (0, _system.chakra)("div", {
-  themeKey: "Tabs.TabList",
-  baseStyle: {
-    display: "flex"
-  }
-});
-
 /**
@@ -164,23 +111,15 @@ * TabList
 
-  var _useThemingContext2 = useThemingContext(),
-      isFitted = _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({}, rest, {
+  var tablist = (0, _useTabs2.useTabList)(_extends({}, rest, {
     ref: ref
   }));
+  var styles = (0, _system.useStyles)();
 
   var _className = (0, _utils.cx)("chakra-tabs__tablist", className);
 
-  var alignments = {
-    end: "flex-end",
-    center: "center",
-    start: "flex-start"
-  };
-  return /*#__PURE__*/React.createElement(StyledTabList, _extends({
-    justifyContent: alignments[align],
+  return /*#__PURE__*/React.createElement(_system.chakra.div, _extends({
+    __css: _extends({
+      display: "flex"
+    }, styles.tablist),
     className: _className
-  }, theming, tablistProps));
+  }, tablist));
 });
@@ -192,17 +131,5 @@ exports.TabList = TabList;
 }
-/**
- * TabPanel - Theming
- *
- * To change the styles of tab panels globally, update the styles in
- * `theme.components.Tabs` under the `TabPanel` key
- */
 
-
-var StyledTabPanel = (0, _system.chakra)("div", {
-  themeKey: "Tabs.TabPanel"
-});
-
 /**
  * TabPanel
- *
  * Used to render the content for a specific tab.
@@ -214,3 +141,3 @@ */
 
-  var panelProps = (0, _useTabs2.useTabPanel)(_extends({}, rest, {
+  var panel = (0, _useTabs2.useTabPanel)(_extends({}, rest, {
     ref: ref
@@ -221,5 +148,8 @@ }));
 
-  return /*#__PURE__*/React.createElement(StyledTabPanel, _extends({
+  var styles = (0, _system.useStyles)();
+  return /*#__PURE__*/React.createElement(_system.chakra.div, _extends({
     className: _className
-  }, panelProps));
+  }, panel, {
+    __css: styles.tabpanel
+  }));
 });
@@ -258,14 +188,3 @@ exports.TabPanel = TabPanel;
 }
-/**
- * TabIndicator - Theming
- *
- * To change the styles of tab indicator globally, update the styles in
- * `theme.components.Tabs` under the `TabIndicator` key
- */
 
-
-var StyledTabIndicator = (0, _system.chakra)("div", {
-  themeKey: "Tabs.TabIndicator"
-});
-
 /**
@@ -282,13 +201,16 @@ * TabIndicator
 
-  var styles = (0, _useTabs2.useTabIndicator)();
+  var indicatorStyle = (0, _useTabs2.useTabIndicator)();
 
   var _className = (0, _utils.cx)("chakra-tabs__tab-indicator", className);
 
-  var _style = _extends({}, style, styles);
+  var _style = _extends({}, style, indicatorStyle);
 
-  return /*#__PURE__*/React.createElement(StyledTabIndicator, _extends({
+  var styles = (0, _system.useStyles)();
+  return /*#__PURE__*/React.createElement(_system.chakra.div, _extends({
     ref: ref,
     className: _className,
     style: _style
-  }, rest));
+  }, rest, {
+    __css: styles.indicator
+  }));
 });
@@ -295,0 +217,0 @@ exports.TabIndicator = TabIndicator;

dist/cjs/use-tabs.js

@@ -142,5 +142,4 @@ "use strict";
 var _createContext = (0, _utils.createContext)({
-  strict: true,
   name: "TabsContext",
-  errorMessage: "Chakra UI: useTabsContext can only be used within TabsContextProvider"
+  errorMessage: "useTabsContext: `context` is undefined. Seems you forgot to wrap all tabs components within <Tabs />"
 }),
@@ -147,0 +146,0 @@ TabsContextProvider = _createContext[0],

dist/esm/tabs.js

@@ -5,10 +5,7 @@ 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, useThemeDefaultProps } from "@chakra-ui/system";
-import { createContext, cx, __DEV__ } from "@chakra-ui/utils";
+import { chakra, forwardRef, omitThemingProps, StylesProvider, useStyleConfig, 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";
-var [ThemingContextProvider, useThemingContext] = createContext({
-  name: "TabsThemingContext"
-});
-export { useThemingContext as useTabsThemingContext };
+
 /**
@@ -20,19 +17,11 @@ * Tabs
  */
-
 export var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
-  /**
-   * Gets the default props for `variant` and `size` from `theme.components.Tabs`
-   */
-  var defaults = useThemeDefaultProps("Tabs");
+  var styles = useStyleConfig("Tabs", props);
 
-  var {
+  var _omitThemingProps = omitThemingProps(props),
+      {
     children,
-    variant = defaults == null ? void 0 : defaults.variant,
-    size = defaults == null ? void 0 : defaults.size,
-    colorScheme = defaults == null ? void 0 : defaults.colorScheme,
-    isFitted,
-    className,
-    align = "start"
-  } = props,
-      rest = _objectWithoutPropertiesLoose(props, ["children", "variant", "size", "colorScheme", "isFitted", "className", "align"]);
+    className
+  } = _omitThemingProps,
+      rest = _objectWithoutPropertiesLoose(_omitThemingProps, ["children", "className"]);
 
@@ -43,5 +32,5 @@ var _useTabs = useTabs(rest),
   } = _useTabs,
-      context = _objectWithoutPropertiesLoose(_useTabs, ["htmlProps"]);
+      tabsContext = _objectWithoutPropertiesLoose(_useTabs, ["htmlProps"]);
 
-  var tabs = React.useMemo(() => context, [context]);
+  var ctx = React.useMemo(() => tabsContext, [tabsContext]);
 
@@ -51,10 +40,5 @@ var _className = cx("chakra-tabs", className);
   return /*#__PURE__*/React.createElement(TabsContextProvider, {
-    value: tabs
-  }, /*#__PURE__*/React.createElement(ThemingContextProvider, {
-    value: {
-      variant,
-      size,
-      colorScheme,
-      isFitted
-    }
+    value: ctx
+  }, /*#__PURE__*/React.createElement(StylesProvider, {
+    value: styles
   }, /*#__PURE__*/React.createElement(chakra.div, _extends({
@@ -69,20 +53,3 @@ className: _className,
 }
-/**
- * Tabs - Theming
- *
- * To change the styles of a tab buttons globally, update the styles in
- * `theme.components.Tabs` under the `Tab` key.
- */
 
-
-var StyledTab = chakra("button", {
-  themeKey: "Tabs.Tab",
-  baseStyle: {
-    outline: "0",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center"
-  }
-});
-
 /**
@@ -100,9 +67,4 @@ * Tabs
 
-  var _useThemingContext = useThemingContext(),
-      {
-    isFitted
-  } = _useThemingContext,
-      theming = _objectWithoutPropertiesLoose(_useThemingContext, ["isFitted"]);
-
-  var tabProps = useTab(_extends({}, rest, {
+  var styles = useStyles();
+  var tab = useTab(_extends({}, rest, {
     ref
@@ -113,6 +75,11 @@ }));
 
-  return /*#__PURE__*/React.createElement(StyledTab, _extends({
+  return /*#__PURE__*/React.createElement(chakra.button, _extends({
     className: _className,
-    flex: isFitted ? 1 : undefined
-  }, theming, tabProps));
+    __css: _extends({
+      outline: "0",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }, styles.tab)
+  }, tab));
 });
@@ -123,17 +90,3 @@
 }
-/**
- * TabList - Theming
- *
- * To change the styles of a tablist globally, update the styles in
- * `theme.components.Tabs` under the `TabList` key
- */
 
-
-var StyledTabList = chakra("div", {
-  themeKey: "Tabs.TabList",
-  baseStyle: {
-    display: "flex"
-  }
-});
-
 /**
@@ -151,23 +104,15 @@ * TabList
 
-  var _useThemingContext2 = useThemingContext(),
-      {
-    align = "start"
-  } = _useThemingContext2,
-      theming = _objectWithoutPropertiesLoose(_useThemingContext2, ["isFitted", "align"]);
-
-  var tablistProps = useTabList(_extends({}, rest, {
+  var tablist = useTabList(_extends({}, rest, {
     ref
   }));
+  var styles = useStyles();
 
   var _className = cx("chakra-tabs__tablist", className);
 
-  var alignments = {
-    end: "flex-end",
-    center: "center",
-    start: "flex-start"
-  };
-  return /*#__PURE__*/React.createElement(StyledTabList, _extends({
-    justifyContent: alignments[align],
+  return /*#__PURE__*/React.createElement(chakra.div, _extends({
+    __css: _extends({
+      display: "flex"
+    }, styles.tablist),
     className: _className
-  }, theming, tablistProps));
+  }, tablist));
 });
@@ -178,17 +123,5 @@
 }
-/**
- * TabPanel - Theming
- *
- * To change the styles of tab panels globally, update the styles in
- * `theme.components.Tabs` under the `TabPanel` key
- */
 
-
-var StyledTabPanel = chakra("div", {
-  themeKey: "Tabs.TabPanel"
-});
-
 /**
  * TabPanel
- *
  * Used to render the content for a specific tab.
@@ -202,3 +135,3 @@ */
 
-  var panelProps = useTabPanel(_extends({}, rest, {
+  var panel = useTabPanel(_extends({}, rest, {
     ref
@@ -209,5 +142,8 @@ }));
 
-  return /*#__PURE__*/React.createElement(StyledTabPanel, _extends({
+  var styles = useStyles();
+  return /*#__PURE__*/React.createElement(chakra.div, _extends({
     className: _className
-  }, panelProps));
+  }, panel, {
+    __css: styles.tabpanel
+  }));
 });
@@ -246,14 +182,3 @@
 }
-/**
- * TabIndicator - Theming
- *
- * To change the styles of tab indicator globally, update the styles in
- * `theme.components.Tabs` under the `TabIndicator` key
- */
 
-
-var StyledTabIndicator = chakra("div", {
-  themeKey: "Tabs.TabIndicator"
-});
-
 /**
@@ -272,13 +197,16 @@ * TabIndicator
 
-  var styles = useTabIndicator();
+  var indicatorStyle = useTabIndicator();
 
   var _className = cx("chakra-tabs__tab-indicator", className);
 
-  var _style = _extends({}, style, styles);
+  var _style = _extends({}, style, indicatorStyle);
 
-  return /*#__PURE__*/React.createElement(StyledTabIndicator, _extends({
+  var styles = useStyles();
+  return /*#__PURE__*/React.createElement(chakra.div, _extends({
     ref: ref,
     className: _className,
     style: _style
-  }, rest));
+  }, rest, {
+    __css: styles.indicator
+  }));
 });
@@ -285,0 +213,0 @@

dist/esm/use-tabs.js

@@ -115,5 +115,4 @@ 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 [TabsContextProvider, useTabsContext] = createContext({
-  strict: true,
   name: "TabsContext",
-  errorMessage: "Chakra UI: useTabsContext can only be used within TabsContextProvider"
+  errorMessage: "useTabsContext: `context` is undefined. Seems you forgot to wrap all tabs components within <Tabs />"
 });
@@ -120,0 +119,0 @@ export { TabsContextProvider };

package.json

 {
   "name": "@chakra-ui/tabs",
-  "version": "1.0.0-next.4",
+  "version": "1.0.0-next.5",
   "description": "Accessible Tabs component for React and Chakra UI",
@@ -59,15 +59,15 @@ "keywords": [
   "dependencies": {
-    "@chakra-ui/clickable": "^1.0.0-next.4",
-    "@chakra-ui/descendant": "^1.0.0-next.4",
-    "@chakra-ui/hooks": "^1.0.0-next.4",
-    "@chakra-ui/utils": "^1.0.0-next.4"
+    "@chakra-ui/clickable": "^1.0.0-next.5",
+    "@chakra-ui/descendant": "^1.0.0-next.5",
+    "@chakra-ui/hooks": "^1.0.0-next.5",
+    "@chakra-ui/utils": "^1.0.0-next.5"
   },
   "devDependencies": {
-    "@chakra-ui/system": "^1.0.0-next.4"
+    "@chakra-ui/system": "^1.0.0-next.5"
   },
   "peerDependencies": {
-    "@chakra-ui/system": ">0.8",
+    "@chakra-ui/system": "^1.0.0-next.4",
     "react": "16.x"
   },
-  "gitHead": "cdd5eac1db90ba33a07c009fb8dbcc4453d6ec01"
+  "gitHead": "24eec5d796d81b6fafbcfa7231fb2cb15e6d5a29"
 }

src/use-tabs.ts

@@ -158,6 +158,5 @@ import { useClickable, UseClickableProps } from "@chakra-ui/clickable"
 const [TabsContextProvider, useTabsContext] = createContext<UseTabsReturn>({
-  strict: true,
   name: "TabsContext",
   errorMessage:
-    "Chakra UI: useTabsContext can only be used within TabsContextProvider",
+    "useTabsContext: `context` is undefined. Seems you forgot to wrap all tabs components within <Tabs />",
 })
@@ -164,0 +163,0 @@

No alert changes

Worsened metrics

Total package byte prevSize

230432

decreased by-4.98%

Lines of code

2265

decreased by-8.56%

Dependency changes

• + Added@chakra-ui/color-mode@1.4.8(transitive)

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

• + Added@chakra-ui/styled-system@1.19.0(transitive)

• + Added@chakra-ui/system@1.12.1(transitive)

• + Addedcsstype@3.0.9(transitive)

• + Addedreact-fast-compare@3.2.0(transitive)

• + Addedtslib@2.6.3(transitive)

• - Removed@chakra-ui/anatomy@2.2.2(transitive)

• - Removed@chakra-ui/color-mode@2.2.0(transitive)

• - Removed@chakra-ui/object-utils@2.1.0(transitive)

• - Removed@chakra-ui/react-use-safe-layout-effect@2.1.0(transitive)

• - Removed@chakra-ui/react-utils@2.0.12(transitive)

• - Removed@chakra-ui/shared-utils@2.0.5(transitive)

• - Removed@chakra-ui/styled-system@2.9.2(transitive)

• - Removed@chakra-ui/system@2.6.2(transitive)

• - Removed@chakra-ui/theme@3.3.1(transitive)

• - Removed@chakra-ui/theme-tools@2.1.2(transitive)

• - Removed@chakra-ui/theme-utils@2.0.21(transitive)

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

• - Removed@types/lodash.mergewith@4.6.7(transitive)

• - Removedcolor2k@2.0.3(transitive)

• - Removedcsstype@3.1.3(transitive)

• - Removedframesync@6.1.2(transitive)

• - Removedreact@18.3.1(transitive)

• - Removedreact-fast-compare@3.2.2(transitive)

• - Removedtslib@2.4.0(transitive)

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

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

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

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