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

package/lib/components/bundle-modules/bundle-modules.module.css

@@ -22,5 +22,6 @@
 }
 
 .nameText {
+  display: inline;
   vertical-align: middle;
 }

package/lib/components/summary-item/summary-item.js

@@ -1,11 +1,13 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SummaryItem = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -29,6 +31,10 @@ var _excluded = ["className", "as", "size", "id", "data", "loading", "showDelta"
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 ? 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; }
@@ -38,13 +44,18 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var MetricInfo = function MetricInfo(_ref) {
   var description = _ref.description,
       url = _ref.url;
+  // The component parent can be rendered inside an anchor tag, using button
+  // to avoid using nesting links
+  var onClick = (0, _react.useCallback)(function () {
+    if (url) {
+      window.open(url);
+    }
+  }, [url]);
   return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     space: "xxxsmall"
   }, /*#__PURE__*/_react["default"].createElement("p", null, description), url && /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("button", {
     type: "button",
-    onClick: function onClick() {
-      return window.open(url);
-    },
+    onClick: onClick,
     className: _summaryItemModule["default"].readMoreLink
   }, "Read more")));
 };
@@ -102,8 +113,10 @@ var SummaryItem = function SummaryItem(_ref2) {
     value: baseline,
     formatter: metric.formatter
   })) : /*#__PURE__*/_react["default"].createElement(_stack.Stack, null, /*#__PURE__*/_react["default"].createElement(_skeleton.Skeleton, {
+    as: "p",
     className: (0, _classnames["default"])(_summaryItemModule["default"].currentMetric, _summaryItemModule["default"].loading)
   }), /*#__PURE__*/_react["default"].createElement(_skeleton.Skeleton, {
+    as: "p",
     className: (0, _classnames["default"])(_summaryItemModule["default"].baselineMetric, _summaryItemModule["default"].loading)
   })));
 };

package/lib/query-state.js

@@ -13,10 +13,12 @@ var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactRouterDom = require("react-router-dom");
-
 var _useQueryParams4 = require("use-query-params");
 
+var _reactRouter = require("use-query-params/adapters/react-router-5");
+
+var _queryString = require("query-string");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
@@ -40,12 +42,12 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 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); }
 
 var QueryStateProvider = function QueryStateProvider(props) {
-  var history = (0, _reactRouterDom.useHistory)();
-  var location = (0, _reactRouterDom.useLocation)();
   return /*#__PURE__*/_react["default"].createElement(_useQueryParams4.QueryParamProvider, _extends({
-    ReactRouterRoute: _reactRouterDom.Route,
-    location: location,
-    history: history
+    adapter: _reactRouter.ReactRouter5Adapter,
+    options: {
+      searchStringToObject: _queryString.parse,
+      objectToSearchString: _queryString.stringify
+    }
   }, props));
 };
 

package/lib/ui/dropdown/dropdown.js

@@ -37,11 +37,14 @@ var Dropdown = function Dropdown(props) {
     className: (0, _classnames["default"])(_dropdownModule["default"].button, buttonClassName),
     tabIndex: null
   }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
-    space: "xxxsmall"
+    space: "xxxsmall",
+    className: _dropdownModule["default"].label
   }, glyph && /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
     className: _dropdownModule["default"].labelIcon,
     glyph: glyph
-  }), label)), /*#__PURE__*/_react["default"].createElement(_menu.Menu, {
+  }), label && /*#__PURE__*/_react["default"].createElement("span", {
+    className: _dropdownModule["default"].labelText
+  }, label))), /*#__PURE__*/_react["default"].createElement(_menu.Menu, {
     state: menuState,
     "aria-label": ariaLabel || label,
     className: _dropdownModule["default"].dropdown

package/lib/ui/dropdown/dropdown.module.css

@@ -10,8 +10,6 @@
   border: 1px solid var(--color-outline);
   border-radius: var(--radius-small);
   padding: calc(var(--space-xxsmall) - 1px);
-  display: flex;
-  align-items: center;
 
   background: none;
   font-size: var(--size-small);
@@ -31,6 +29,10 @@
   color: var(--color-text);
 }
 
+.label {
+  align-items: center;
+}
+
 .dropdown {
   position: absolute;
   left: 0;

package/lib/ui/hover-card/hover-card.js

@@ -55,11 +55,6 @@ var HoverCard = function HoverCard(props) {
   }); // Fallback to span if no href
 
   var Component = resolveComponent(as, href);
-
-  var handleOnClick = function handleOnClick(event) {
-    event.preventDefault();
-  };
-
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _classnames["default"])(_hoverCardModule["default"].root, className)
   }, /*#__PURE__*/_react["default"].createElement(_hovercard.HovercardAnchor, {
@@ -72,8 +67,7 @@ var HoverCard = function HoverCard(props) {
     className: (0, _classnames["default"])(_hoverCardModule["default"].hoverCard, hoverCardClassName),
     style: {
       zIndex: 10000
-    },
-    onClick: handleOnClick
+    }
   }), /*#__PURE__*/_react["default"].createElement(_hovercard.HovercardArrow, {
     size: 24
   }), typeof children === 'function' ? children({

package/lib/ui/skeleton/skeleton.js

@@ -13,7 +13,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _skeletonModule = _interopRequireDefault(require("./skeleton.module.css"));
 
-var _excluded = ["className"];
+var _excluded = ["className", "as", "block"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -25,18 +25,24 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 var Skeleton = function Skeleton(props) {
   var className = props.className,
+      Component = props.as,
+      block = props.block,
       restProps = _objectWithoutProperties(props, _excluded);
 
-  var rootClassName = (0, _classnames["default"])(_skeletonModule["default"].root, className);
-  return /*#__PURE__*/_react["default"].createElement("span", _extends({
+  var rootClassName = (0, _classnames["default"])(_skeletonModule["default"].root, className, block && _skeletonModule["default"].block);
+  return /*#__PURE__*/_react["default"].createElement(Component, _extends({
     className: rootClassName
   }, restProps));
 };
 
 exports.Skeleton = Skeleton;
 Skeleton.propTypes = {
-  className: _propTypes["default"].string
+  className: _propTypes["default"].string,
+  as: _propTypes["default"].elementType,
+  block: _propTypes["default"].bool
 };
 Skeleton.defaultProps = {
-  className: ''
+  className: '',
+  as: 'p',
+  block: false
 };

package/lib/ui/skeleton/skeleton.module.css

@@ -1,8 +1,8 @@
 .root {
-  display: block;
-  background: linear-gradient(transparent 10%, currentColor 10.1%, currentColor 90%, transparent 90.1%);
+  background: linear-gradient(transparent 12.5%, currentColor 12.6%, currentColor 86.4%, transparent 86.5%);
   opacity: 0.06;
   pointer-events: none;
+  min-width: 6em;
 }
 
 /** empty char to keep the text height */
@@ -11,3 +11,7 @@
   content: '\A0';
   color: transparent;
 }
+
+.block {
+  background: currentColor;
+}

package/lib/ui/skeleton/skeleton.stories.js

@@ -1,17 +1,56 @@
 "use strict";
 
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@storybook/react");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.MultipleTextLines = exports.Block = void 0;
 
-var _stories = require("../../stories");
+var _react = _interopRequireDefault(require("react"));
 
 var _ = require(".");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var stories = (0, _react2.storiesOf)('UI/Skeleton', module);
-stories.addDecorator((0, _stories.getWrapperDecorator)());
-stories.add('default', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.Skeleton, null);
-});
+var _default = {
+  title: 'UI/Skeleton',
+  component: _.Skeleton
+};
+exports["default"] = _default;
+
+var MultipleTextLines = function MultipleTextLines() {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
+    as: "h1",
+    style: {
+      outline: '1px solid magenta'
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
+    as: "h2",
+    style: {
+      outline: '1px solid magenta'
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
+    as: "p",
+    style: {
+      outline: '1px solid magenta'
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
+    style: {
+      outline: '1px solid pink'
+    }
+  }));
+};
+
+exports.MultipleTextLines = MultipleTextLines;
+
+var Block = function Block() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      outline: '1px solid magenta'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
+    as: "div",
+    block: true
+  }));
+};
+
+exports.Block = Block;

package/lib/ui/tooltip/tooltip.module.css

@@ -14,6 +14,7 @@
   padding: var(--space-xxxsmall) var(--space-xxsmall);
   border-radius: var(--radius-medium);
   background: var(--color-light);
+  max-width: 24em;
   color: var(--color-text);
   filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));
   will-change: filter;

package/lib/ui/tooltip/tooltip.stories.js

@@ -1,8 +1,11 @@
 "use strict";
 
-var _react = _interopRequireDefault(require("react"));
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.LongTooltip = exports.Default = exports.DarkModeFalse = void 0;
 
-var _react2 = require("@storybook/react");
+var _react = _interopRequireDefault(require("react"));
 
 var _stories = require("../../stories");
 
@@ -10,18 +13,32 @@ var _ = require(".");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var stories = (0, _react2.storiesOf)('UI/Tooltip', module);
-stories.addDecorator((0, _stories.getWrapperDecorator)({
-  padding: '64px'
-}));
-stories.add('default', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.Tooltip, {
-    title: "View job #100"
-  }, "Job #100");
-});
-stories.add('darkMode:false', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.Tooltip, {
-    title: "View job #100",
-    darkMode: false
-  }, "Job #100");
-});
+var _default = {
+  title: 'UI/Tooltip',
+  component: _.Tooltip,
+  decorators: [(0, _stories.getWrapperDecorator)({
+    padding: '100px',
+    textAlign: 'center'
+  })],
+  args: {
+    title: 'View job #123'
+  }
+};
+exports["default"] = _default;
+
+var Template = function Template(props) {
+  return /*#__PURE__*/_react["default"].createElement(_.Tooltip, props, "Job #123");
+};
+
+var Default = Template.bind();
+exports.Default = Default;
+var LongTooltip = Template.bind();
+exports.LongTooltip = LongTooltip;
+LongTooltip.args = {
+  title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam molestie neque id lectus mollis, et imperdiet libero porta.'
+};
+var DarkModeFalse = Template.bind();
+exports.DarkModeFalse = DarkModeFalse;
+DarkModeFalse.args = {
+  darkMode: false
+};

package/lib-esm/components/bundle-assets/bundle-assets.utils.js

@@ -1,5 +1,4 @@
 import _get from "lodash/get";
-import "core-js/modules/es.array.includes.js";
 import { ASSET_ENTRY_TYPE, ASSET_FILE_TYPE, ASSET_FILTERS, getFileType } from '@bundle-stats/utils';
 import { SORT_BY_NAME, SORT_BY_DELTA, SORT_BY_SIZE } from './bundle-assets.constants';
 export const addRowAssetFlags = row => {

package/lib-esm/components/bundle-modules/bundle-modules.module.css

@@ -22,5 +22,6 @@
 }
 
 .nameText {
+  display: inline;
   vertical-align: middle;
 }

package/lib-esm/components/bundle-packages/bundle-packages.utils.js

@@ -1,7 +1,6 @@
 import _uniq from "lodash/uniq";
 import _flatten from "lodash/flatten";
 import _get from "lodash/get";
-import "core-js/modules/es.array.includes.js";
 import { PACKAGE_FILTERS } from '@bundle-stats/utils';
 import { SORT_BY_NAME, SORT_BY_DELTA, SORT_BY_SIZE } from './bundle-packages.constants'; // Get a list of duplicate packages across jobs
 

package/lib-esm/components/summary/summary.js

@@ -2,7 +2,6 @@ import _get from "lodash/get";
 
 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 "core-js/modules/es.array.includes.js";
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';

package/lib-esm/components/summary-item/summary-item.js

@@ -1,6 +1,6 @@
 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 React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
@@ -16,11 +16,18 @@ const MetricInfo = _ref => {
     description,
     url
   } = _ref;
+  // The component parent can be rendered inside an anchor tag, using button
+  // to avoid using nesting links
+  const onClick = useCallback(() => {
+    if (url) {
+      window.open(url);
+    }
+  }, [url]);
   return /*#__PURE__*/React.createElement(Stack, {
     space: "xxxsmall"
   }, /*#__PURE__*/React.createElement("p", null, description), url && /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    onClick: () => window.open(url),
+    onClick: onClick,
     className: css.readMoreLink
   }, "Read more")));
 };
@@ -78,8 +85,10 @@ export const SummaryItem = _ref2 => {
     value: baseline,
     formatter: metric.formatter
   })) : /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Skeleton, {
+    as: "p",
     className: cx(css.currentMetric, css.loading)
   }), /*#__PURE__*/React.createElement(Skeleton, {
+    as: "p",
     className: cx(css.baselineMetric, css.loading)
   })));
 };

package/lib-esm/query-state.js

@@ -4,17 +4,16 @@ import _isEqual from "lodash/isEqual";
 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, { useCallback } from 'react';
-import { Route, useHistory, useLocation } from 'react-router-dom';
 import { JsonParam, QueryParamProvider, useQueryParams } from 'use-query-params';
-export const QueryStateProvider = props => {
-  const history = useHistory();
-  const location = useLocation();
-  return /*#__PURE__*/React.createElement(QueryParamProvider, _extends({
-    ReactRouterRoute: Route,
-    location: location,
-    history: history
-  }, props));
-};
+import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
+import { parse, stringify } from 'query-string';
+export const QueryStateProvider = props => /*#__PURE__*/React.createElement(QueryParamProvider, _extends({
+  adapter: ReactRouter5Adapter,
+  options: {
+    searchStringToObject: parse,
+    objectToSearchString: stringify
+  }
+}, props));
 export const useComponentQueryState = componentName => {
   const [search, setSearch] = useQueryParams({
     [componentName]: JsonParam

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

@@ -23,11 +23,14 @@ export const Dropdown = props => {
     className: cx(css.button, buttonClassName),
     tabIndex: null
   }, /*#__PURE__*/React.createElement(FlexStack, {
-    space: "xxxsmall"
+    space: "xxxsmall",
+    className: css.label
   }, glyph && /*#__PURE__*/React.createElement(Icon, {
     className: css.labelIcon,
     glyph: glyph
-  }), label)), /*#__PURE__*/React.createElement(Menu, {
+  }), label && /*#__PURE__*/React.createElement("span", {
+    className: css.labelText
+  }, label))), /*#__PURE__*/React.createElement(Menu, {
     state: menuState,
     "aria-label": ariaLabel || label,
     className: css.dropdown

package/lib-esm/ui/dropdown/dropdown.module.css

@@ -10,8 +10,6 @@
   border: 1px solid var(--color-outline);
   border-radius: var(--radius-small);
   padding: calc(var(--space-xxsmall) - 1px);
-  display: flex;
-  align-items: center;
 
   background: none;
   font-size: var(--size-small);
@@ -31,6 +29,10 @@
   color: var(--color-text);
 }
 
+.label {
+  align-items: center;
+}
+
 .dropdown {
   position: absolute;
   left: 0;

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

@@ -1,5 +1,3 @@
-import "core-js/modules/es.array.includes.js";
-
 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, { useCallback } from 'react';

package/lib-esm/ui/hover-card/hover-card.js

@@ -38,11 +38,6 @@ export const HoverCard = props => {
   }); // Fallback to span if no href
 
   const Component = resolveComponent(as, href);
-
-  const handleOnClick = event => {
-    event.preventDefault();
-  };
-
   return /*#__PURE__*/React.createElement("div", {
     className: cx(css.root, className)
   }, /*#__PURE__*/React.createElement(HovercardAnchor, {
@@ -55,8 +50,7 @@ export const HoverCard = props => {
     className: cx(css.hoverCard, hoverCardClassName),
     style: {
       zIndex: 10000
-    },
-    onClick: handleOnClick
+    }
   }), /*#__PURE__*/React.createElement(HovercardArrow, {
     size: 24
   }), typeof children === 'function' ? children({

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

@@ -7,16 +7,22 @@ import css from './skeleton.module.css';
 export const Skeleton = props => {
   const {
     className,
+    as: Component,
+    block,
     ...restProps
   } = props;
-  const rootClassName = cx(css.root, className);
-  return /*#__PURE__*/React.createElement("span", _extends({
+  const rootClassName = cx(css.root, className, block && css.block);
+  return /*#__PURE__*/React.createElement(Component, _extends({
     className: rootClassName
   }, restProps));
 };
 Skeleton.propTypes = {
-  className: PropTypes.string
+  className: PropTypes.string,
+  as: PropTypes.elementType,
+  block: PropTypes.bool
 };
 Skeleton.defaultProps = {
-  className: ''
+  className: '',
+  as: 'p',
+  block: false
 };

package/lib-esm/ui/skeleton/skeleton.module.css

@@ -1,8 +1,8 @@
 .root {
-  display: block;
-  background: linear-gradient(transparent 10%, currentColor 10.1%, currentColor 90%, transparent 90.1%);
+  background: linear-gradient(transparent 12.5%, currentColor 12.6%, currentColor 86.4%, transparent 86.5%);
   opacity: 0.06;
   pointer-events: none;
+  min-width: 6em;
 }
 
 /** empty char to keep the text height */
@@ -11,3 +11,7 @@
   content: '\A0';
   color: transparent;
 }
+
+.block {
+  background: currentColor;
+}

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

@@ -1,7 +1,34 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { getWrapperDecorator } from '../../stories';
 import { Skeleton } from '.';
-const stories = storiesOf('UI/Skeleton', module);
-stories.addDecorator(getWrapperDecorator());
-stories.add('default', () => /*#__PURE__*/React.createElement(Skeleton, null));
+export default {
+  title: 'UI/Skeleton',
+  component: Skeleton
+};
+export const MultipleTextLines = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Skeleton, {
+  as: "h1",
+  style: {
+    outline: '1px solid magenta'
+  }
+}), /*#__PURE__*/React.createElement(Skeleton, {
+  as: "h2",
+  style: {
+    outline: '1px solid magenta'
+  }
+}), /*#__PURE__*/React.createElement(Skeleton, {
+  as: "p",
+  style: {
+    outline: '1px solid magenta'
+  }
+}), /*#__PURE__*/React.createElement(Skeleton, {
+  style: {
+    outline: '1px solid pink'
+  }
+}));
+export const Block = () => /*#__PURE__*/React.createElement("div", {
+  style: {
+    outline: '1px solid magenta'
+  }
+}, /*#__PURE__*/React.createElement(Skeleton, {
+  as: "div",
+  block: true
+}));

package/lib-esm/ui/tooltip/tooltip.module.css

@@ -14,6 +14,7 @@
   padding: var(--space-xxxsmall) var(--space-xxsmall);
   border-radius: var(--radius-medium);
   background: var(--color-light);
+  max-width: 24em;
   color: var(--color-text);
   filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));
   will-change: filter;

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

@@ -1,15 +1,26 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { Tooltip } from '.';
-const stories = storiesOf('UI/Tooltip', module);
-stories.addDecorator(getWrapperDecorator({
-  padding: '64px'
-}));
-stories.add('default', () => /*#__PURE__*/React.createElement(Tooltip, {
-  title: "View job #100"
-}, "Job #100"));
-stories.add('darkMode:false', () => /*#__PURE__*/React.createElement(Tooltip, {
-  title: "View job #100",
+export default {
+  title: 'UI/Tooltip',
+  component: Tooltip,
+  decorators: [getWrapperDecorator({
+    padding: '100px',
+    textAlign: 'center'
+  })],
+  args: {
+    title: 'View job #123'
+  }
+};
+
+const Template = props => /*#__PURE__*/React.createElement(Tooltip, props, "Job #123");
+
+export const Default = Template.bind();
+export const LongTooltip = Template.bind();
+LongTooltip.args = {
+  title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam molestie neque id lectus mollis, et imperdiet libero porta.'
+};
+export const DarkModeFalse = Template.bind();
+DarkModeFalse.args = {
   darkMode: false
-}, "Job #100"));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.0.4",
+  "version": "4.0.6-beta.0",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -36,25 +36,25 @@
   },
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
-    "@babel/cli": "7.18.9",
-    "@babel/core": "7.18.9",
+    "@babel/cli": "7.18.10",
+    "@babel/core": "7.18.13",
     "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/preset-env": "7.18.9",
+    "@babel/preset-env": "7.18.10",
     "@babel/preset-react": "7.18.6",
     "@simplyianm/babel-plugin-inline-react-svg": "1.2.0",
-    "@storybook/addon-essentials": "6.5.9",
+    "@storybook/addon-essentials": "6.5.10",
     "@storybook/addon-knobs": "6.4.0",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/addon-storyshots": "6.5.9",
-    "@storybook/addons": "6.5.9",
-    "@storybook/builder-webpack5": "6.5.9",
-    "@storybook/manager-webpack5": "6.5.9",
-    "@storybook/react": "6.5.9",
+    "@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",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "28.1.3",
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-require-context-hook": "1.0.0",
-    "chromatic": "6.7.2",
+    "chromatic": "6.7.4",
     "classnames": "2.3.1",
     "colormap": "2.3.2",
     "core-js": "3.24.1",
@@ -67,7 +67,7 @@
     "jest": "27.5.1",
     "jest-date-mock": "1.0.8",
     "lodash": "4.17.21",
-    "postcss": "8.4.14",
+    "postcss": "8.4.16",
     "prop-types": "15.8.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
@@ -85,12 +85,12 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.0.4",
+    "@bundle-stats/utils": "^4.0.6-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": "^1.2.3"
+    "use-query-params": "^2.0.0"
   },
-  "gitHead": "a2d0cbcea629c27ca4acd979168868b83d1ad5f4"
+  "gitHead": "54a399cb5bbffde01089f286fdc7c8b1aa635f94"
 }

package/src/components/bundle-modules/bundle-modules.module.css

@@ -22,5 +22,6 @@
 }
 
 .nameText {
+  display: inline;
   vertical-align: middle;
 }

package/src/components/summary-item/summary-item.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
@@ -10,18 +10,28 @@ import { Metric } from '../metric';
 import { Delta } from '../delta';
 import css from './summary-item.module.css';
 
-const MetricInfo = ({ description, url }) => (
-  <Stack space="xxxsmall">
-    <p>{description}</p>
-    {url && (
-      <p>
-        <button type="button" onClick={() => window.open(url)} className={css.readMoreLink}>
-          Read more
-        </button>
-      </p>
-    )}
-  </Stack>
-);
+const MetricInfo = ({ description, url }) => {
+  // The component parent can be rendered inside an anchor tag, using button
+  // to avoid using nesting links
+  const onClick = useCallback(() => {
+    if (url) {
+      window.open(url);
+    }
+  }, [url]);
+
+  return (
+    <Stack space="xxxsmall">
+      <p>{description}</p>
+      {url && (
+        <p>
+          <button type="button" onClick={onClick} className={css.readMoreLink}>
+            Read more
+          </button>
+        </p>
+      )}
+    </Stack>
+  );
+};
 
 MetricInfo.propTypes = {
   description: PropTypes.string.isRequired,
@@ -84,8 +94,8 @@ export const SummaryItem = ({
         </Stack>
       ) : (
         <Stack>
-          <Skeleton className={cx(css.currentMetric, css.loading)} />
-          <Skeleton className={cx(css.baselineMetric, css.loading)} />
+          <Skeleton as="p" className={cx(css.currentMetric, css.loading)} />
+          <Skeleton as="p" className={cx(css.baselineMetric, css.loading)} />
         </Stack>
       )}
     </Stack>

package/src/query-state.jsx

@@ -1,16 +1,19 @@
 import React, { useCallback } from 'react';
-import { Route, useHistory, useLocation } from 'react-router-dom';
 import { JsonParam, QueryParamProvider, useQueryParams } from 'use-query-params';
+import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5'
+import { parse, stringify } from 'query-string'
 import { isEqual, merge } from 'lodash';
 
-export const QueryStateProvider = (props) => {
-  const history = useHistory();
-  const location = useLocation();
-
-  return (
-    <QueryParamProvider ReactRouterRoute={Route} location={location} history={history} {...props} />
-  );
-};
+export const QueryStateProvider = (props) => (
+  <QueryParamProvider
+    adapter={ReactRouter5Adapter}
+    options={{
+      searchStringToObject: parse,
+      objectToSearchString: stringify,
+    }}
+    {...props}
+  />
+);
 
 export const useComponentQueryState = (componentName) => {
   const [search, setSearch] = useQueryParams({

package/src/ui/dropdown/dropdown.jsx

@@ -15,9 +15,9 @@ export const Dropdown = (props) => {
   return (
     <div className={rootClassName}>
       <MenuButton state={menuState} className={cx(css.button, buttonClassName)} tabIndex={null}>
-        <FlexStack space="xxxsmall">
+        <FlexStack space="xxxsmall" className={css.label}>
           {glyph && <Icon className={css.labelIcon} glyph={glyph} />}
-          {label}
+          {label && <span className={css.labelText}>{label}</span>}
         </FlexStack>
       </MenuButton>
       <Menu state={menuState} aria-label={ariaLabel || label} className={css.dropdown}>

package/src/ui/dropdown/dropdown.module.css

@@ -10,8 +10,6 @@
   border: 1px solid var(--color-outline);
   border-radius: var(--radius-small);
   padding: calc(var(--space-xxsmall) - 1px);
-  display: flex;
-  align-items: center;
 
   background: none;
   font-size: var(--size-small);
@@ -31,6 +29,10 @@
   color: var(--color-text);
 }
 
+.label {
+  align-items: center;
+}
+
 .dropdown {
   position: absolute;
   left: 0;

package/src/ui/hover-card/hover-card.jsx

@@ -31,10 +31,6 @@ export const HoverCard = (props) => {
   // Fallback to span if no href
   const Component = resolveComponent(as, href);
 
-  const handleOnClick = (event) => {
-    event.preventDefault();
-  };
-
   return (
     <div className={cx(css.root, className)}>
       <HovercardAnchor
@@ -50,7 +46,6 @@ export const HoverCard = (props) => {
         state={state}
         className={cx(css.hoverCard, hoverCardClassName)}
         style={{ zIndex: 10000 }}
-        onClick={handleOnClick}
       >
         <HovercardArrow size={24} />
         {typeof children === 'function' ? children({ close: state.hide }) : children}

package/src/ui/skeleton/skeleton.jsx

@@ -5,16 +5,20 @@ import cx from 'classnames';
 import css from './skeleton.module.css';
 
 export const Skeleton = (props) => {
-  const { className, ...restProps } = props;
-  const rootClassName = cx(css.root, className);
+  const { className, as: Component, block, ...restProps } = props;
+  const rootClassName = cx(css.root, className, block && css.block);
 
-  return <span className={rootClassName} {...restProps} />;
+  return <Component className={rootClassName} {...restProps} />;
 };
 
 Skeleton.propTypes = {
   className: PropTypes.string,
+  as: PropTypes.elementType,
+  block: PropTypes.bool,
 };
 
 Skeleton.defaultProps = {
   className: '',
+  as: 'p',
+  block: false,
 };

package/src/ui/skeleton/skeleton.module.css

@@ -1,8 +1,8 @@
 .root {
-  display: block;
-  background: linear-gradient(transparent 10%, currentColor 10.1%, currentColor 90%, transparent 90.1%);
+  background: linear-gradient(transparent 12.5%, currentColor 12.6%, currentColor 86.4%, transparent 86.5%);
   opacity: 0.06;
   pointer-events: none;
+  min-width: 6em;
 }
 
 /** empty char to keep the text height */
@@ -11,3 +11,7 @@
   content: '\A0';
   color: transparent;
 }
+
+.block {
+  background: currentColor;
+}

package/src/ui/tooltip/tooltip.module.css

@@ -14,6 +14,7 @@
   padding: var(--space-xxxsmall) var(--space-xxsmall);
   border-radius: var(--radius-medium);
   background: var(--color-light);
+  max-width: 24em;
   color: var(--color-text);
   filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));
   will-change: filter;