@bundle-stats/ui 4.0.5-beta.0 → 4.0.5

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")));
 };

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

@@ -43,6 +43,6 @@ Skeleton.propTypes = {
 };
 Skeleton.defaultProps = {
   className: '',
-  as: 'span',
+  as: 'p',
   block: false
 };

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

@@ -33,6 +33,10 @@ var MultipleTextLines = function MultipleTextLines() {
     style: {
       outline: '1px solid magenta'
     }
+  }), /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
+    style: {
+      outline: '1px solid pink'
+    }
   }));
 };
 

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")));
 };

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

@@ -23,6 +23,6 @@ Skeleton.propTypes = {
 };
 Skeleton.defaultProps = {
   className: '',
-  as: 'span',
+  as: 'p',
   block: false
 };

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

@@ -19,6 +19,10 @@ export const MultipleTextLines = () => /*#__PURE__*/React.createElement(React.Fr
   style: {
     outline: '1px solid magenta'
   }
+}), /*#__PURE__*/React.createElement(Skeleton, {
+  style: {
+    outline: '1px solid pink'
+  }
 }));
 export const Block = () => /*#__PURE__*/React.createElement("div", {
   style: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.0.5-beta.0",
+  "version": "4.0.5",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -85,12 +85,12 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.0.5-beta.0",
+    "@bundle-stats/utils": "^4.0.5",
     "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"
   },
-  "gitHead": "21c3e6e8dcf686e4aaa8205a4a0d3d9d2154cf30"
+  "gitHead": "ead8c6d4de77aaa3eb9043054eba5429a1afc04a"
 }

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,

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

@@ -19,6 +19,6 @@ Skeleton.propTypes = {
 
 Skeleton.defaultProps = {
   className: '',
-  as: 'span',
+  as: 'p',
   block: false,
 };