@bundle-stats/ui 3.2.7-beta.3 → 3.2.9-beta.1

package/lib/components/metrics-table/metrics-table.module.css

@@ -1,11 +1,11 @@
-.jobName a {
+.root a {
   color: inherit;
   text-decoration: none;
 }
 
-.jobName a:hover,
-.jobName a:active,
-.jobName a:focus {
+.root a:hover,
+.root a:active,
+.root a:focus {
   color: var(--color-primary);
   text-decoration: underline;
 }
@@ -15,21 +15,31 @@
   width: 100%;
 }
 
-.value {
+.root .value {
   padding-left: var(--space-large);
   text-align: right;
+  vertical-align: baseline;
 }
 
-.delta {
+.root .delta {
   padding-left: 0;
   text-align: left;
   font-size: var(--size-xsmall);
+  vertical-align: baseline;
 }
 
-.value.current {
+.root tbody .delta {
+  line-height: 1.6rem; /* baseline alignment with the value */
+}
+
+.root .value.current {
   padding-right: var(--space-xxsmall);
 }
 
+.jobName {
+  white-space: nowrap;
+}
+
 /* columns overrides for showHeaderSum */
 .showHeaderSum .headerRowColumns .value,
 .showHeaderSum .headerRowColumns .delta {
@@ -45,6 +55,7 @@
 }
 
 /** rows */
+.multipleRuns .unchanged th,
 .multipleRuns .unchanged td {
   color: var(--color-text-light);
 }

package/lib/components/module-info/module-info.js

@@ -38,7 +38,7 @@ var ModuleInfo = function ModuleInfo(props) {
       CustomComponentLink = props.customComponentLink,
       onClick = props.onClick;
   return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
-    space: "small",
+    space: "xsmall",
     className: className
   }, item.runs.map(function (run, index) {
     var TitleComponent = index !== 0 ? 'h4' : 'h3';
@@ -48,7 +48,7 @@ var ModuleInfo = function ModuleInfo(props) {
       key: key
     }, /*#__PURE__*/_react["default"].createElement(TitleComponent, null, labels[index]), index === 0 && !(0, _isEmpty2["default"])(run === null || run === void 0 ? void 0 : run.chunkIds) && /*#__PURE__*/_react["default"].createElement("div", {
       className: _moduleInfoModule["default"].chunks
-    }, /*#__PURE__*/_react["default"].createElement("strong", {
+    }, /*#__PURE__*/_react["default"].createElement("span", {
       className: _moduleInfoModule["default"].chunksTitle
     }, "Chunks:"), run.chunkIds.map(function (chunkId) {
       var chunk = (0, _find2["default"])(chunks, {

package/lib/hooks/search-params.js

@@ -36,9 +36,11 @@ var ACTION_SET_SEARCH = 'SET_SEARCH';
 var ACTION_RESET_DEFAULT = 'RESET_DEFAULT';
 var ACTION_RESET_ALL = 'RESET_ALL';
 var ACTION_SET = 'SET';
+var SEARCH_DEFAULT = '';
+var SEARCH_DEFAULT_PATTERN = /.*/;
 
 var getSearchPattern = function getSearchPattern(search) {
-  var searchPattern = /.*/;
+  var searchPattern = SEARCH_DEFAULT_PATTERN;
 
   if (!search || !search.trim()) {
     return searchPattern;
@@ -65,51 +67,48 @@ var getSearchReducer = function getSearchReducer(_ref) {
     switch (type) {
       case ACTION_SET_FILTERS:
         {
-          setParentState({
+          var newState = {
             filters: payload,
             search: state.search
-          });
-          return _objectSpread(_objectSpread({}, state), {}, {
-            filters: payload
-          });
+          };
+          setParentState(newState);
+          return newState;
         }
 
       case ACTION_SET_SEARCH:
         {
-          setParentState({
+          var _newState = {
             filters: state.filters,
             search: payload
-          });
-          return _objectSpread(_objectSpread({}, state), {}, {
-            search: payload,
+          };
+          setParentState(_newState);
+          return _objectSpread(_objectSpread({}, _newState), {}, {
             searchPattern: getSearchPattern(payload)
           });
         }
 
       case ACTION_RESET_DEFAULT:
         {
-          setParentState({
-            filters: defaultFilters,
-            search: ''
-          });
-          return {
+          var _newState2 = {
             filters: defaultFilters,
-            search: '',
-            searchPattern: getSearchPattern()
+            search: SEARCH_DEFAULT
           };
+          setParentState(_newState2);
+          return _objectSpread(_objectSpread({}, _newState2), {}, {
+            searchPattern: getSearchPattern()
+          });
         }
 
       case ACTION_RESET_ALL:
         {
-          setParentState({
-            filters: allEntriesFilters,
-            search: ''
-          });
-          return {
+          var _newState3 = {
             filters: allEntriesFilters,
-            search: '',
-            searchPattern: getSearchPattern()
+            search: SEARCH_DEFAULT
           };
+          setParentState(_newState3);
+          return _objectSpread(_objectSpread({}, _newState3), {}, {
+            searchPattern: getSearchPattern()
+          });
         }
 
       case ACTION_SET:
@@ -134,7 +133,8 @@ var generateState = function generateState(filters, search) {
 exports.generateState = generateState;
 
 var useSearchParams = function useSearchParams(_ref2) {
-  var parentSearch = _ref2.search,
+  var _ref2$search = _ref2.search,
+      parentSearch = _ref2$search === void 0 ? SEARCH_DEFAULT : _ref2$search,
       parentFilters = _ref2.filters,
       defaultFilters = _ref2.defaultFilters,
       allEntriesFilters = _ref2.allEntriesFilters,

package/lib/ui/empty-set/empty-set.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _stack = require("../../layout/stack");
+
 var _i18n = _interopRequireDefault(require("../../i18n"));
 
 var _emptySetModule = _interopRequireDefault(require("./empty-set.module.css"));
@@ -42,11 +44,10 @@ var EmptySet = function EmptySet(props) {
     type: "button",
     onClick: handleViewAll
   }, _i18n["default"].VIEW_ALL)] : []));
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
+    space: "xxsmall",
     className: _emptySetModule["default"].root
-  }, /*#__PURE__*/_react["default"].createElement("p", {
-    className: _emptySetModule["default"].text
-  }, message), filtered && actions.map(function (action, index) {
+  }, /*#__PURE__*/_react["default"].createElement("p", null, message), filtered && actions.map(function (action, index) {
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, index > 0 && ' or ', action);
   }));
 };

package/lib/ui/empty-set/empty-set.module.css

@@ -1,5 +1,5 @@
-.text {
-  margin-bottom: 0;
+.root {
+  color: var(--color-text-light);
 }
 
 .action {

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

@@ -15,8 +15,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _hovercard = require("ariakit/hovercard");
 
-var _icon = require("../icon");
-
 var _hoverCardModule = _interopRequireDefault(require("./hover-card.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -41,6 +39,7 @@ var resolveComponent = function resolveComponent(as, href) {
 
 var HoverCard = function HoverCard(props) {
   var className = props.className,
+      hoverCardClassName = props.hoverCardClassName,
       href = props.href,
       as = props.as,
       label = props.label,
@@ -54,10 +53,6 @@ var HoverCard = function HoverCard(props) {
   }); // Fallback to span if no href
 
   var Component = resolveComponent(as, href);
-  var handleOnClose = (0, _react.useCallback)(function (event) {
-    state.hide();
-    event.preventDefault();
-  }, [state]);
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _classnames["default"])(_hoverCardModule["default"].root, className)
   }, /*#__PURE__*/_react["default"].createElement(_hovercard.HovercardAnchor, {
@@ -67,7 +62,7 @@ var HoverCard = function HoverCard(props) {
     as: Component
   }, label), /*#__PURE__*/_react["default"].createElement(_hovercard.Hovercard, _extends({}, hoverCardProps, {
     state: state,
-    className: _hoverCardModule["default"].hoverCard,
+    className: (0, _classnames["default"])(_hoverCardModule["default"].hoverCard, hoverCardClassName),
     style: {
       zIndex: 10000
     }
@@ -75,14 +70,7 @@ var HoverCard = function HoverCard(props) {
     size: 24
   }), typeof children === 'function' ? children({
     close: state.hide
-  }) : children, /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
-    glyph: "close",
-    size: "small",
-    as: "button",
-    type: "button",
-    className: _hoverCardModule["default"].closeBtn,
-    onClick: handleOnClose
-  })));
+  }) : children));
 };
 
 exports.HoverCard = HoverCard;
@@ -90,6 +78,9 @@ HoverCard.propTypes = {
   /** Adopted child class name */
   className: _propTypes["default"].string,
 
+  /** Adopted child class name for hover card */
+  hoverCardClassName: _propTypes["default"].string,
+
   /** Anchor label */
   label: _propTypes["default"].node,
 
@@ -104,6 +95,7 @@ HoverCard.propTypes = {
 };
 HoverCard.defaultProps = {
   className: '',
+  hoverCardClassName: '',
   label: '',
   as: '',
   href: ''

package/lib/ui/hover-card/hover-card.module.css

@@ -8,45 +8,22 @@
   text-decoration: none;
 }
 
-a.anchor,
-buton.anchor {
-  cursor: pointer;
+.anchor:hover {
+  color: var(--color-primary);
 }
 
-a.anchor:hover,
-button.anchor:hover {
-  color: var(--color-primary);
-  text-decoration: underline;
+.anchor:focus {
+  outline: 0;
 }
 
 .hoverCard {
-  padding: var(--space-xsmall) var(--space-large) var(--space-xsmall) var(--space-small);
+  padding: var(--space-xsmall) var(--space-small);
   border-radius: var(--radius-medium);
-  max-width: 320px;
+  width: calc(100vw - 2 * var(--space-small));
+  max-width: 360px;
   outline: none;
   filter: drop-shadow(0 0 var(--space-xxsmall) var(--color-shadow));
   will-change: filter;
   background: var(--color-light);
   font-size: var(--size-small);
 }
-
-.closeBtn {
-  position: absolute;
-  right: var(--space-xxxsmall);
-  top: var(--space-xxxsmall);
-  width: var(--space-large);
-  height: var(--space-large);
-  padding: var(--space-xxsmall);
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: var(--color-text-ultra-light);
-  transition: var(--transition-out);
-}
-
-.closeBtn:hover,
-.closeBtn:active,
-.closeBtn:focus {
-  color: var(--color-text-light);
-  transition: var(--transition-in);
-}

package/lib/ui/table/table.js

@@ -13,77 +13,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _tableModule = _interopRequireDefault(require("./table.module.css"));
 
-var _excluded = ["className"],
-    _excluded2 = ["className"],
-    _excluded3 = ["className"];
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-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); }
-
-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 THead = function THead(props) {
-  return /*#__PURE__*/_react["default"].createElement("thead", props);
-};
-
-var TBody = function TBody(props) {
-  return /*#__PURE__*/_react["default"].createElement("tbody", props);
-};
-
-var Tr = function Tr(props) {
-  var className = props.className,
-      restProps = _objectWithoutProperties(props, _excluded);
-
-  return /*#__PURE__*/_react["default"].createElement("tr", _extends({
-    className: (0, _classnames["default"])(_tableModule["default"].row, className)
-  }, restProps));
-};
-
-Tr.defaultProps = {
-  className: ''
-};
-Tr.propTypes = {
-  /** Adopted child class name */
-  className: _propTypes["default"].string
-};
-
-var Th = function Th(props) {
-  var className = props.className,
-      restProps = _objectWithoutProperties(props, _excluded2);
-
-  return /*#__PURE__*/_react["default"].createElement("th", _extends({
-    className: (0, _classnames["default"])(_tableModule["default"].cell, className)
-  }, restProps));
-};
-
-Th.defaultProps = {
-  className: ''
-};
-Th.propTypes = {
-  /** Adopted child class name */
-  className: _propTypes["default"].string
-};
-
-var Td = function Td(props) {
-  var className = props.className,
-      restProps = _objectWithoutProperties(props, _excluded3);
-
-  return /*#__PURE__*/_react["default"].createElement("td", _extends({
-    className: (0, _classnames["default"])(_tableModule["default"].cell, className)
-  }, restProps));
-};
-
-Td.defaultProps = {
-  className: ''
-};
-Td.propTypes = {
-  /** Adopted child class name */
-  className: _propTypes["default"].string
-};
-
 var Table = function Table(_ref) {
   var className = _ref.className,
       emptyMessage = _ref.emptyMessage,
@@ -104,11 +35,11 @@ var Table = function Table(_ref) {
 };
 
 exports.Table = Table;
-Table.THead = THead;
-Table.TBody = TBody;
-Table.Th = Th;
-Table.Tr = Tr;
-Table.Td = Td;
+Table.THead = 'thead';
+Table.TBody = 'tbody';
+Table.Tr = 'tr';
+Table.Th = 'th';
+Table.Td = 'td';
 Table.defaultProps = {
   className: '',
   emptyMessage: 'No entries found.',

package/lib/ui/table/table.module.css

@@ -4,48 +4,51 @@
   border-spacing: 0;
   empty-cells: show;
   background: var(--color-background);
+  text-align: left;
 }
 
-.cell {
+.root th,
+.root td {
   border: 1px solid var(--color-outline);
   border-width: 1px 0 0;
-  padding: var(--space-small) var(--space-small);
-  text-align: left;
+  padding: var(--space-small);
 }
 
-.root thead .cell {
+.root thead th {
   border-width: 0 0 1px;
   text-transform: uppercase;
   vertical-align: top;
   background: var(--color-highlight);
 }
 
-.root thead .cell:empty {
+.root thead th:empty {
   display: none;
 }
 
-.root tbody .cell {
+.root tbody th {
   font-weight: normal;
 }
 
-.root tbody tr:first-child .cell {
+.root tbody tr:first-child td,
+.root tbody tr:first-child th {
   border-top: 0;
 }
 
-.root tbody .cell a {
+.root tbody td a {
   color: inherit;
   text-decoration: none;
 }
 
-.root tbody .cell a:hover,
-.root tbody .cell a:focus,
-.root tbody .cell a:active
+.root tbody td a:hover,
+.root tbody td a:focus,
+.root tbody td a:active
 {
   color: var(--color-primary);
   text-decoration: underline;
 }
 
-.root tbody tr:hover .cell {
+.root tbody tr:hover th,
+.root tbody tr:hover td {
   background-color: var(--color-highlight-warning);
 }
 
@@ -64,21 +67,21 @@
   border-radius: var(--table-radius);
 }
 
-.outline thead tr:first-child .cell:first-child,
-.outline tbody:first-child tr:first-child .cell:first-child {
+.outline thead:first-child tr:first-child th:first-child,
+.outline tbody:first-child tr:first-child td:first-child {
   border-top-left-radius: var(--table-radius);
 }
 
-.outline thead tr:first-child .cell:last-child,
-.outline tbody:first-child tr:first-child .cell:last-child {
+.outline thead tr:first-child th:last-child,
+.outline tbody:first-child tr:first-child td:last-child {
   border-top-right-radius: var(--table-radius);
 }
 
-.outline tbody:last-child tr:last-child .cell:first-child {
+.outline tbody:last-child tr:last-child td:first-child {
   border-bottom-left-radius: var(--table-radius);
 }
 
-.outline tbody:last-child tr:last-child .cell:last-child {
+.outline tbody:last-child tr:last-child td:last-child {
   border-bottom-right-radius: var(--table-radius);
 }
 
@@ -87,7 +90,8 @@
 }
 
 /* compact variation */
-.compact .cell {
+.compact td,
+.compact th {
   padding-top: var(--space-xsmall);
   padding-bottom: var(--space-xsmall);
 }

package/lib/ui/table/table.stories.js

@@ -71,7 +71,7 @@ stories.add('with custom content and attributes', function () {
     style: {
       textDecoration: 'underline'
     }
-  }, "Col C(undefiner)"))), /*#__PURE__*/_react["default"].createElement(TBody, null, /*#__PURE__*/_react["default"].createElement(Tr, null, /*#__PURE__*/_react["default"].createElement(Th, null, /*#__PURE__*/_react["default"].createElement("strong", null, "row 1")), /*#__PURE__*/_react["default"].createElement(Td, {
+  }, "Col C(underline)"))), /*#__PURE__*/_react["default"].createElement(TBody, null, /*#__PURE__*/_react["default"].createElement(Tr, null, /*#__PURE__*/_react["default"].createElement(Th, null, /*#__PURE__*/_react["default"].createElement("strong", null, "row 1")), /*#__PURE__*/_react["default"].createElement(Td, {
     style: {
       textAlign: 'right'
     }

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

@@ -16,6 +16,7 @@
   background: var(--color-light);
   color: var(--color-text);
   filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));
+  will-change: filter;
   font-size: var(--size-xsmall);
   line-height: var(--space-small);
 }