@bundle-stats/ui 3.2.7-beta.5 → 3.2.9

package/src/components/metrics-table/metrics-table.jsx

@@ -12,7 +12,8 @@ import styles from './metrics-table.module.css';
 
 const METRIC_TYPE_DATA = getGlobalMetricType(null, METRIC_TYPE_FILE_SIZE);
 
-const getRowsRunTotal = (rows, runIndex) => sum(rows.map((row) => get(row, `runs[${runIndex}].value`, 0)));
+const getRowsRunTotal = (rows, runIndex) =>
+  sum(rows.map((row) => get(row, `runs[${runIndex}].value`, 0)));
 
 const getHeaderLabelCells = (rows) => (run, runIndex, runs) => {
   const isBaseline = runIndex === runs.length - 1;
@@ -102,46 +103,58 @@ const getHeaderRows = (runs, items, showHeaderSum, title) => [
     : []),
 ];
 
-const generateRowCells = (item, index, items) => {
-  const isBaseline = index === items.length - 1;
+const MetricsTableRow = ({ item, renderRowHeader }) => (
+  <Table.Tr className={cx(!item.changed && styles.unchanged)}>
+    <Table.Th className={styles.metricName}>{renderRowHeader(item)}</Table.Th>
 
-  // eslint-disable-next-line react/destructuring-assignment
-  if (!item || typeof item.value === 'undefined') {
-    return ['-', ...(!isBaseline ? [''] : [])];
-  }
+    {item.runs.map((run, index) => {
+      const isBaseline = index === item.runs.length - 1;
+      const valueClassName = cx(styles.value, !isBaseline && styles.current);
 
-  const { displayValue, deltaPercentage, displayDeltaPercentage, deltaType } = item;
+      // Empty cells if no value
+      if (!run || typeof run.value === 'undefined') {
+        return (
+          <>
+            <Table.Td className={valueClassName}>-</Table.Td>
+            {!isBaseline && <Table.Td className={styles.delta} />}
+          </>
+        );
+      }
 
-  const cells = [<Metric value={displayValue} />];
+      const { displayValue, deltaPercentage, displayDeltaPercentage, deltaType } = run;
 
-  if (!isBaseline) {
-    cells.push(
-      typeof deltaPercentage === 'number' && (
-        <Delta displayValue={displayDeltaPercentage} deltaType={deltaType} />
-      ),
-    );
-  }
+      return (
+        <>
+          <Table.Td className={valueClassName}>
+            <Metric value={displayValue} />
+          </Table.Td>
+          {!isBaseline && typeof deltaPercentage === 'number' && (
+            <Table.Td className={styles.delta}>
+              <Delta displayValue={displayDeltaPercentage} deltaType={deltaType} />
+            </Table.Td>
+          )}
+        </>
+      );
+    })}
+  </Table.Tr>
+);
 
-  return cells;
+MetricsTableRow.propTypes = {
+  item: PropTypes.shape({
+    changed: PropTypes.bool,
+    runs: PropTypes.arrayOf(
+      PropTypes.shape({
+        value: PropTypes.number,
+        displayValue: PropTypes.string,
+        deltaPercentage: PropTypes.number,
+        displayDeltaPercentage: PropTypes.string,
+        deltaType: PropTypes.string,
+      }),
+    ),
+  }).isRequired,
+  renderRowHeader: PropTypes.func.isRequired,
 };
 
-const getRows = (runs, items, renderRowHeader) =>
-  items.map((item, index) => {
-    const { changed } = item;
-
-    return {
-      key: item?.key || index,
-      className: changed ? '' : styles.unchanged,
-      cells: [
-        // Metric name
-        renderRowHeader(item),
-
-        // Metric item values
-        ...item.runs.map(generateRowCells).flat(),
-      ],
-    };
-  });
-
 export const MetricsTable = ({
   className,
   renderRowHeader,
@@ -151,9 +164,11 @@ export const MetricsTable = ({
   showHeaderSum,
   headerRows,
   title,
+  ...restProps
 }) => {
   const { headers, columnClassNames } = useMemo(() => {
     const headerColumns = getHeaderRows(runs, items, showHeaderSum, title);
+
     return {
       headers: [...headerRows, ...headerColumns],
       // First header row has the column class names
@@ -161,8 +176,6 @@ export const MetricsTable = ({
     };
   }, [headerRows, runs, items, showHeaderSum, title]);
 
-  const rows = useMemo(() => getRows(runs, items, renderRowHeader), [runs, items, renderRowHeader]);
-
   const rootClassName = cx(
     styles.root,
     className,
@@ -171,7 +184,7 @@ export const MetricsTable = ({
   );
 
   return (
-    <Table className={rootClassName} compact>
+    <Table className={rootClassName} compact {...restProps}>
       <Table.THead>
         {headers.map((headerRow) => {
           const { cells, className: rowClassName } = headerRow.cells
@@ -188,13 +201,9 @@ export const MetricsTable = ({
         })}
       </Table.THead>
       <Table.TBody>
-        {!isEmpty(rows) ? (
-          rows.map(({ key, className: rowClassName, cells }) => (
-            <Table.Tr key={key} className={rowClassName}>
-              {cells.map((cell, index) => (
-                <Table.Td className={columnClassNames[index]}>{cell}</Table.Td>
-              ))}
-            </Table.Tr>
+        {!isEmpty(items) ? (
+          items.map((item) => (
+            <MetricsTableRow key={item.key} item={item} renderRowHeader={renderRowHeader} />
           ))
         ) : (
           <Table.Tr>

package/src/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/src/components/module-info/module-info.jsx

@@ -20,7 +20,7 @@ export const ModuleInfo = (props) => {
   } = props;
 
   return (
-    <Stack space="small" className={className}>
+    <Stack space="xsmall" className={className}>
       {item.runs.map((run, index) => {
         const TitleComponent = index !== 0 ? 'h4' : 'h3';
         const key = `module-info-${run?.name || index}-${index}`;
@@ -30,7 +30,7 @@ export const ModuleInfo = (props) => {
             <TitleComponent>{labels[index]}</TitleComponent>
             {index === 0 && !isEmpty(run?.chunkIds) && (
               <div className={css.chunks}>
-                <strong className={css.chunksTitle}>Chunks:</strong>
+                <span className={css.chunksTitle}>Chunks:</span>
                 {run.chunkIds.map((chunkId) => {
                   const chunk = find(chunks, { id: chunkId });
 

package/src/hooks/search-params.js

@@ -7,8 +7,11 @@ const ACTION_RESET_DEFAULT = 'RESET_DEFAULT';
 const ACTION_RESET_ALL = 'RESET_ALL';
 const ACTION_SET = 'SET';
 
+const SEARCH_DEFAULT = '';
+const SEARCH_DEFAULT_PATTERN = /.*/;
+
 const getSearchPattern = (search) => {
-  let searchPattern = /.*/;
+  let searchPattern = SEARCH_DEFAULT_PATTERN;
 
   if (!search || !search.trim()) {
     return searchPattern;
@@ -31,52 +34,51 @@ const getSearchReducer =
 
     switch (type) {
       case ACTION_SET_FILTERS: {
-        setParentState({
+        const newState = {
           filters: payload,
           search: state.search,
-        });
-
-        return {
-          ...state,
-          filters: payload,
         };
+        setParentState(newState);
+        return newState;
       }
 
       case ACTION_SET_SEARCH: {
-        setParentState({
+        const newState = {
           filters: state.filters,
           search: payload,
-        });
+        };
+
+        setParentState(newState);
 
         return {
-          ...state,
-          search: payload,
+          ...newState,
           searchPattern: getSearchPattern(payload),
         };
       }
 
       case ACTION_RESET_DEFAULT: {
-        setParentState({
+        const newState = {
           filters: defaultFilters,
-          search: '',
-        });
+          search: SEARCH_DEFAULT,
+        };
+
+        setParentState(newState);
 
         return {
-          filters: defaultFilters,
-          search: '',
+          ...newState,
           searchPattern: getSearchPattern(),
         };
       }
 
       case ACTION_RESET_ALL: {
-        setParentState({
+        const newState = {
           filters: allEntriesFilters,
-          search: '',
-        });
+          search: SEARCH_DEFAULT,
+        };
+        setParentState(newState);
 
         return {
-          filters: allEntriesFilters,
-          search: '',
+          ...newState,
           searchPattern: getSearchPattern(),
         };
       }
@@ -97,7 +99,7 @@ export const generateState = (filters, search) => ({
 });
 
 export const useSearchParams = ({
-  search: parentSearch,
+  search: parentSearch = SEARCH_DEFAULT,
 
   filters: parentFilters,
   defaultFilters,

package/src/ui/empty-set/empty-set.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { Stack } from '../../layout/stack';
 import I18N from '../../i18n';
 import css from './empty-set.module.css';
 
@@ -9,30 +10,33 @@ export const EmptySet = (props) => {
 
   const message = filtered ? `No ${resources} found.` : `No ${resources} available.`;
   const actions = [
-    ...handleResetFilters ? [
-      (
-        <button className={css.action} type="button" onClick={handleResetFilters}>
-          {I18N.RESET_FILTERS}
-        </button>
-      )
-    ] : [],
-    ...handleViewAll ? [(
-      <button className={css.action} type="button" onClick={handleViewAll}>
-        {I18N.VIEW_ALL}
-      </button>
-    )] : [],
+    ...(handleResetFilters
+      ? [
+          <button className={css.action} type="button" onClick={handleResetFilters}>
+            {I18N.RESET_FILTERS}
+          </button>,
+        ]
+      : []),
+    ...(handleViewAll
+      ? [
+          <button className={css.action} type="button" onClick={handleViewAll}>
+            {I18N.VIEW_ALL}
+          </button>,
+        ]
+      : []),
   ];
 
   return (
-    <div className={css.root}>
-      <p className={css.text}>{message}</p>
-      {filtered && actions.map((action, index) => (
-        <>
-          {index > 0 && ' or '}
-          {action}
-        </>
-      ))}
-    </div>
+    <Stack space="xxsmall" className={css.root}>
+      <p>{message}</p>
+      {filtered &&
+        actions.map((action, index) => (
+          <>
+            {index > 0 && ' or '}
+            {action}
+          </>
+        ))}
+    </Stack>
   );
 };
 

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

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

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

@@ -24,21 +24,13 @@ const resolveComponent = (as, href) => {
 };
 
 export const HoverCard = (props) => {
-  const { className, href, as, label, children } = props;
+  const { className, hoverCardClassName, href, as, label, children } = props;
   const state = useHovercardState({ gutter: 8 });
   const hoverCardProps = useHovercard({ state, portal: true });
 
   // Fallback to span if no href
   const Component = resolveComponent(as, href);
 
-  const handleOnClose = useCallback(
-    (event) => {
-      state.hide();
-      event.preventDefault();
-    },
-    [state],
-  );
-
   return (
     <div className={cx(css.root, className)}>
       <HovercardAnchor state={state} href={href} className={css.anchor} as={Component}>
@@ -47,7 +39,7 @@ export const HoverCard = (props) => {
       <Hovercard
         {...hoverCardProps}
         state={state}
-        className={css.hoverCard}
+        className={cx(css.hoverCard, hoverCardClassName)}
         style={{ zIndex: 10000 }}
       >
         <HovercardArrow size={24} />
@@ -60,6 +52,8 @@ export const HoverCard = (props) => {
 HoverCard.propTypes = {
   /** Adopted child class name */
   className: PropTypes.string,
+  /** Adopted child class name for hover card */
+  hoverCardClassName: PropTypes.string,
   /** Anchor label */
   label: PropTypes.node,
   /** Anchor href */
@@ -72,6 +66,7 @@ HoverCard.propTypes = {
 
 HoverCard.defaultProps = {
   className: '',
+  hoverCardClassName: '',
   label: '',
   as: '',
   href: '',

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

@@ -8,20 +8,19 @@
   text-decoration: none;
 }
 
-a.anchor,
-buton.anchor {
-  cursor: pointer;
+.anchor:hover {
+  color: var(--color-primary);
 }
 
-a.anchor:hover,
-button.anchor:hover {
-  text-decoration: underline;
+.anchor:focus {
+  outline: 0;
 }
 
 .hoverCard {
   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;

package/src/ui/table/table.jsx

@@ -4,53 +4,6 @@ import cx from 'classnames';
 
 import css from './table.module.css';
 
-const THead = (props) => <thead {...props} />
-
-const TBody = (props) => <tbody {...props} />;
-
-const Tr = (props) => {
-  const { className, ...restProps } = props;
-  return <tr className={cx(css.row, className)} {...restProps} />;
-};
-
-Tr.defaultProps = {
-  className: '',
-};
-
-Tr.propTypes = {
-  /** Adopted child class name */
-  className: PropTypes.string,
-};
-
-const Th = (props) => {
-  const { className, ...restProps } = props;
-
-  return <th className={cx(css.cell, className)} {...restProps} />;
-};
-
-Th.defaultProps = {
-  className: '',
-};
-
-Th.propTypes = {
-  /** Adopted child class name */
-  className: PropTypes.string,
-};
-
-const Td = (props) => {
-  const { className, ...restProps } = props;
-  return <td className={cx(css.cell, className)} {...restProps} />;
-};
-
-Td.defaultProps = {
-  className: '',
-};
-
-Td.propTypes = {
-  /** Adopted child class name */
-  className: PropTypes.string,
-};
-
 export const Table = ({ className, emptyMessage, compact, outline, children }) => {
   const rootClassName = cx(css.root, className, compact && css.compact, outline && css.outline);
 
@@ -61,11 +14,11 @@ export const Table = ({ className, emptyMessage, compact, outline, children }) =
   return <table className={rootClassName}>{children}</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: '',

package/src/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/src/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);
 }