@bundle-stats/ui 4.0.6-beta.0 → 4.0.7-beta.0

package/lib/app/app.js

@@ -263,19 +263,23 @@ var AppComponent = function AppComponent(_ref3) {
     className: _appModule["default"].tabsContainer
   }, /*#__PURE__*/_react["default"].createElement(_tabs.Tabs, {
     className: _appModule["default"].tabs
-  }, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.NavLink, {
+  }, /*#__PURE__*/_react["default"].createElement(_tabs.Tabs.Item, {
+    as: _reactRouterDom.NavLink,
     exact: true,
     to: _constants.URLS.OVERVIEW,
     activeClassName: _appModule["default"].tabActive
-  }, _i18n["default"].OVERVIEW), /*#__PURE__*/_react["default"].createElement(_reactRouterDom.NavLink, {
+  }, _i18n["default"].OVERVIEW), /*#__PURE__*/_react["default"].createElement(_tabs.Tabs.Item, {
+    as: _reactRouterDom.NavLink,
     exact: true,
     to: _constants.URLS.ASSETS,
     activeClassName: _appModule["default"].tabActive
-  }, _i18n["default"].ASSETS), /*#__PURE__*/_react["default"].createElement(_reactRouterDom.NavLink, {
+  }, _i18n["default"].ASSETS), /*#__PURE__*/_react["default"].createElement(_tabs.Tabs.Item, {
+    as: _reactRouterDom.NavLink,
     exact: true,
     to: _constants.URLS.MODULES,
     activeClassName: _appModule["default"].tabActive
-  }, _i18n["default"].MODULES), /*#__PURE__*/_react["default"].createElement(_reactRouterDom.NavLink, {
+  }, _i18n["default"].MODULES), /*#__PURE__*/_react["default"].createElement(_tabs.Tabs.Item, {
+    as: _reactRouterDom.NavLink,
     exact: true,
     to: _constants.URLS.PACKAGES,
     activeClassName: _appModule["default"].tabActive

package/lib/layout/header/header.stories.js

@@ -28,7 +28,7 @@ stories.add('default', function () {
       var className = _ref2.className;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: className
-      }, /*#__PURE__*/_react["default"].createElement(_tabs.Tabs, null, /*#__PURE__*/_react["default"].createElement("span", null, "Totals"), /*#__PURE__*/_react["default"].createElement("span", null, "Assets"), /*#__PURE__*/_react["default"].createElement("span", null, "Modules")));
+      }, /*#__PURE__*/_react["default"].createElement(_tabs.Tabs, null, /*#__PURE__*/_react["default"].createElement(_tabs.Tabs.Item, null, "Totals"), /*#__PURE__*/_react["default"].createElement(_tabs.Tabs.Item, null, "Assets"), /*#__PURE__*/_react["default"].createElement(_tabs.Tabs.Item, null, "Modules")));
     },
     renderRight: function renderRight(_ref3) {
       var className = _ref3.className;
@@ -55,7 +55,7 @@ stories.add('menu on the right', function () {
         style: {
           flexBasis: '100%'
         }
-      }, /*#__PURE__*/_react["default"].createElement(_tabs.Tabs, null, /*#__PURE__*/_react["default"].createElement("span", null, "Totals"), /*#__PURE__*/_react["default"].createElement("span", null, "Assets"), /*#__PURE__*/_react["default"].createElement("span", null, "Modules")));
+      }, /*#__PURE__*/_react["default"].createElement(_tabs.Tabs, null, /*#__PURE__*/_react["default"].createElement(_tabs.Tabs.Item, null, "Totals"), /*#__PURE__*/_react["default"].createElement(_tabs.Tabs.Item, null, "Assets"), /*#__PURE__*/_react["default"].createElement(_tabs.Tabs.Item, null, "Modules")));
     }
   });
 });

package/lib/ui/tabs/tabs.js

@@ -13,37 +13,46 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _tabsModule = _interopRequireDefault(require("./tabs.module.css"));
 
-var _excluded = ["className", "isTabActive"];
+var _excluded = ["isTabActive", "as", "className"],
+    _excluded2 = ["className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-var cloneElement = function cloneElement(element) {
-  var _element$props = element.props,
-      className = _element$props.className,
-      isTabActive = _element$props.isTabActive,
-      restProps = _objectWithoutProperties(_element$props, _excluded);
+var Item = function Item(_ref) {
+  var isTabActive = _ref.isTabActive,
+      Component = _ref.as,
+      className = _ref.className,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react["default"].createElement(Component, _extends({
+    className: (0, _classnames["default"])(_tabsModule["default"].item, className, isTabActive && _tabsModule["default"].itemActive)
+  }, restProps));
+};
 
-  return /*#__PURE__*/_react["default"].cloneElement(element, _objectSpread(_objectSpread({}, restProps), {}, {
-    className: (0, _classnames["default"])(_tabsModule["default"].item, isTabActive && _tabsModule["default"].itemActive, className)
-  }));
+Item.defaultProps = {
+  isTabActive: false,
+  className: '',
+  as: 'span'
+};
+Item.propTypes = {
+  isTabActive: _propTypes["default"].bool,
+  className: _propTypes["default"].string,
+  as: _propTypes["default"].elementType
 };
 
-var Tabs = function Tabs(_ref) {
-  var className = _ref.className,
-      children = _ref.children;
-  return /*#__PURE__*/_react["default"].createElement("nav", {
+var Tabs = function Tabs(_ref2) {
+  var className = _ref2.className,
+      restProps = _objectWithoutProperties(_ref2, _excluded2);
+
+  return /*#__PURE__*/_react["default"].createElement("nav", _extends({
     className: (0, _classnames["default"])(_tabsModule["default"].root, className)
-  }, _react["default"].Children.map(children, cloneElement));
+  }, restProps));
 };
 
 exports.Tabs = Tabs;
@@ -56,4 +65,5 @@ Tabs.propTypes = {
 
   /** Component children */
   children: _propTypes["default"].node.isRequired
-};
+};
+Tabs.Item = Item;

package/lib/ui/tabs/tabs.stories.js

@@ -13,7 +13,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var stories = (0, _react2.storiesOf)('UI/Tabs', module);
 stories.addDecorator((0, _stories.getWrapperDecorator)());
 stories.add('default', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.Tabs, null, /*#__PURE__*/_react["default"].createElement("span", {
+  return /*#__PURE__*/_react["default"].createElement(_.Tabs, null, /*#__PURE__*/_react["default"].createElement(_.Tabs.Item, {
     isTabActive: true
-  }, "Option A"), /*#__PURE__*/_react["default"].createElement("span", null, "Option B"), /*#__PURE__*/_react["default"].createElement("span", null, "Option C"));
+  }, "Option A"), /*#__PURE__*/_react["default"].createElement(_.Tabs.Item, null, "Option B"), /*#__PURE__*/_react["default"].createElement(_.Tabs.Item, null, "Option C"));
 });

package/lib-esm/app/app.js

@@ -199,19 +199,23 @@ const AppComponent = _ref3 => {
     className: css.tabsContainer
   }, /*#__PURE__*/React.createElement(Tabs, {
     className: css.tabs
-  }, /*#__PURE__*/React.createElement(NavLink, {
+  }, /*#__PURE__*/React.createElement(Tabs.Item, {
+    as: NavLink,
     exact: true,
     to: URLS.OVERVIEW,
     activeClassName: css.tabActive
-  }, I18N.OVERVIEW), /*#__PURE__*/React.createElement(NavLink, {
+  }, I18N.OVERVIEW), /*#__PURE__*/React.createElement(Tabs.Item, {
+    as: NavLink,
     exact: true,
     to: URLS.ASSETS,
     activeClassName: css.tabActive
-  }, I18N.ASSETS), /*#__PURE__*/React.createElement(NavLink, {
+  }, I18N.ASSETS), /*#__PURE__*/React.createElement(Tabs.Item, {
+    as: NavLink,
     exact: true,
     to: URLS.MODULES,
     activeClassName: css.tabActive
-  }, I18N.MODULES), /*#__PURE__*/React.createElement(NavLink, {
+  }, I18N.MODULES), /*#__PURE__*/React.createElement(Tabs.Item, {
+    as: NavLink,
     exact: true,
     to: URLS.PACKAGES,
     activeClassName: css.tabActive

package/lib-esm/layout/header/header.stories.js

@@ -21,7 +21,7 @@ stories.add('default', () => /*#__PURE__*/React.createElement(Header, {
     } = _ref2;
     return /*#__PURE__*/React.createElement("div", {
       className: className
-    }, /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement("span", null, "Totals"), /*#__PURE__*/React.createElement("span", null, "Assets"), /*#__PURE__*/React.createElement("span", null, "Modules")));
+    }, /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tabs.Item, null, "Totals"), /*#__PURE__*/React.createElement(Tabs.Item, null, "Assets"), /*#__PURE__*/React.createElement(Tabs.Item, null, "Modules")));
   },
   renderRight: _ref3 => {
     let {
@@ -52,6 +52,6 @@ stories.add('menu on the right', () => /*#__PURE__*/React.createElement(Header,
       style: {
         flexBasis: '100%'
       }
-    }, /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement("span", null, "Totals"), /*#__PURE__*/React.createElement("span", null, "Assets"), /*#__PURE__*/React.createElement("span", null, "Modules")));
+    }, /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tabs.Item, null, "Totals"), /*#__PURE__*/React.createElement(Tabs.Item, null, "Assets"), /*#__PURE__*/React.createElement(Tabs.Item, null, "Modules")));
   }
 }));

package/lib-esm/ui/tabs/tabs.js

@@ -1,27 +1,40 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import css from './tabs.module.css';
 
-const cloneElement = element => {
-  const {
-    className,
+const Item = _ref => {
+  let {
     isTabActive,
+    as: Component,
+    className,
     ...restProps
-  } = element.props;
-  return /*#__PURE__*/React.cloneElement(element, { ...restProps,
-    className: cx(css.item, isTabActive && css.itemActive, className)
-  });
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    className: cx(css.item, className, isTabActive && css.itemActive)
+  }, restProps));
 };
 
-export const Tabs = _ref => {
+Item.defaultProps = {
+  isTabActive: false,
+  className: '',
+  as: 'span'
+};
+Item.propTypes = {
+  isTabActive: PropTypes.bool,
+  className: PropTypes.string,
+  as: PropTypes.elementType
+};
+export const Tabs = _ref2 => {
   let {
     className,
-    children
-  } = _ref;
-  return /*#__PURE__*/React.createElement("nav", {
+    ...restProps
+  } = _ref2;
+  return /*#__PURE__*/React.createElement("nav", _extends({
     className: cx(css.root, className)
-  }, React.Children.map(children, cloneElement));
+  }, restProps));
 };
 Tabs.defaultProps = {
   className: ''
@@ -32,4 +45,5 @@ Tabs.propTypes = {
 
   /** Component children */
   children: PropTypes.node.isRequired
-};
+};
+Tabs.Item = Item;

package/lib-esm/ui/tabs/tabs.stories.js

@@ -4,6 +4,6 @@ import { getWrapperDecorator } from '../../stories';
 import { Tabs } from '.';
 const stories = storiesOf('UI/Tabs', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('default', () => /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement("span", {
+stories.add('default', () => /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tabs.Item, {
   isTabActive: true
-}, "Option A"), /*#__PURE__*/React.createElement("span", null, "Option B"), /*#__PURE__*/React.createElement("span", null, "Option C")));
+}, "Option A"), /*#__PURE__*/React.createElement(Tabs.Item, null, "Option B"), /*#__PURE__*/React.createElement(Tabs.Item, null, "Option C")));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.0.6-beta.0",
+  "version": "4.0.7-beta.0",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -37,27 +37,27 @@
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
     "@babel/cli": "7.18.10",
-    "@babel/core": "7.18.13",
+    "@babel/core": "7.19.1",
     "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/preset-env": "7.18.10",
+    "@babel/preset-env": "7.19.1",
     "@babel/preset-react": "7.18.6",
     "@simplyianm/babel-plugin-inline-react-svg": "1.2.0",
-    "@storybook/addon-essentials": "6.5.10",
+    "@storybook/addon-essentials": "6.5.12",
     "@storybook/addon-knobs": "6.4.0",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/addon-storyshots": "6.5.10",
-    "@storybook/addons": "6.5.10",
-    "@storybook/builder-webpack5": "6.5.10",
-    "@storybook/manager-webpack5": "6.5.10",
-    "@storybook/react": "6.5.10",
+    "@storybook/addon-storyshots": "6.5.12",
+    "@storybook/addons": "6.5.12",
+    "@storybook/builder-webpack5": "6.5.12",
+    "@storybook/manager-webpack5": "6.5.12",
+    "@storybook/react": "6.5.12",
     "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "28.1.3",
+    "babel-jest": "29.0.3",
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-require-context-hook": "1.0.0",
-    "chromatic": "6.7.4",
-    "classnames": "2.3.1",
+    "chromatic": "6.10.0",
+    "classnames": "2.3.2",
     "colormap": "2.3.2",
-    "core-js": "3.24.1",
+    "core-js": "3.25.2",
     "cross-env": "7.0.3",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
@@ -71,7 +71,7 @@
     "prop-types": "15.8.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "react-router-dom": "5.3.1",
+    "react-router-dom": "5.3.3",
     "react-test-renderer": "16.14.0",
     "rimraf": "3.0.2"
   },
@@ -85,12 +85,12 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.0.6-beta.0",
+    "@bundle-stats/utils": "^4.0.7-beta.0",
     "ariakit": "^2.0.0-next.33",
     "date-fns": "^2.28.0",
     "modern-css-reset": "^1.4.0",
     "query-string": "^7.1.0",
     "use-query-params": "^2.0.0"
   },
-  "gitHead": "54a399cb5bbffde01089f286fdc7c8b1aa635f94"
+  "gitHead": "b5c30d5074ec4fc3bfceed4475e8d3c3e1f2dac5"
 }

package/src/app/app.jsx

@@ -183,18 +183,18 @@ const AppComponent = ({ version, jobs }) => {
 
         <Container className={css.tabsContainer}>
           <Tabs className={css.tabs}>
-            <NavLink exact to={URLS.OVERVIEW} activeClassName={css.tabActive}>
+            <Tabs.Item as={NavLink} exact to={URLS.OVERVIEW} activeClassName={css.tabActive}>
               {I18N.OVERVIEW}
-            </NavLink>
-            <NavLink exact to={URLS.ASSETS} activeClassName={css.tabActive}>
+            </Tabs.Item>
+            <Tabs.Item as={NavLink} exact to={URLS.ASSETS} activeClassName={css.tabActive}>
               {I18N.ASSETS}
-            </NavLink>
-            <NavLink exact to={URLS.MODULES} activeClassName={css.tabActive}>
+            </Tabs.Item>
+            <Tabs.Item as={NavLink} exact to={URLS.MODULES} activeClassName={css.tabActive}>
               {I18N.MODULES}
-            </NavLink>
-            <NavLink exact to={URLS.PACKAGES} activeClassName={css.tabActive}>
+            </Tabs.Item>
+            <Tabs.Item as={NavLink} exact to={URLS.PACKAGES} activeClassName={css.tabActive}>
               {I18N.PACKAGES}
-            </NavLink>
+            </Tabs.Item>
           </Tabs>
         </Container>
 

package/src/ui/tabs/tabs.jsx

@@ -4,22 +4,24 @@ import cx from 'classnames';
 
 import css from './tabs.module.css';
 
-const cloneElement = (element) => {
-  const { className, isTabActive, ...restProps } = element.props;
-
-  return React.cloneElement(
-    element,
-    {
-      ...restProps,
-      className: cx(css.item, isTabActive && css.itemActive, className),
-    },
-  );
+const Item = ({ isTabActive, as: Component, className,...restProps }) => (
+  <Component className={cx(css.item, className, isTabActive && css.itemActive)} {...restProps} />
+);
+
+Item.defaultProps = {
+  isTabActive: false,
+  className: '',
+  as: 'span',
 };
 
-export const Tabs = ({ className, children }) => (
-  <nav className={cx(css.root, className)}>
-    {React.Children.map(children, cloneElement)}
-  </nav>
+Item.propTypes = {
+  isTabActive: PropTypes.bool,
+  className: PropTypes.string,
+  as: PropTypes.elementType,
+};
+
+export const Tabs = ({ className, ...restProps }) => (
+  <nav className={cx(css.root, className)} {...restProps} />
 );
 
 Tabs.defaultProps = {
@@ -33,3 +35,5 @@ Tabs.propTypes = {
   /** Component children */
   children: PropTypes.node.isRequired,
 };
+
+Tabs.Item = Item;