@bundle-stats/ui 4.23.0-beta.1 → 4.23.0-beta.11

package/src/ui/filters/filters.tsx

@@ -6,7 +6,7 @@ import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
 import { Button } from '../button';
 import { ControlGroup } from '../control-group';
-import { Dropdown, DropdownItem } from '../dropdown';
+import { Dropdown, DropdownGroup, DropdownItem } from '../dropdown';
 import { InputSearch } from '../input-search';
 import * as I18N from './filters.i18n';
 import { getGroupFiltersLabelSuffix, LABELS } from './filters.utils';
@@ -20,12 +20,7 @@ const Filter = (props: FilterBooleanProps) => {
   const { className = '', label, name, ...inputProps } = props;
 
   return (
-    <FlexStack
-      space="xxxsmall"
-      alignItems="center"
-      as="label"
-      className={cx(css.filter, className)}
-    >
+    <FlexStack gap="xxxsmall" alignItems="center" as="label" className={cx(css.filter, className)}>
       <input
         type="checkbox"
         id={`filter-${name}`}
@@ -40,12 +35,85 @@ const Filter = (props: FilterBooleanProps) => {
   );
 };
 
+const getGroupItemKey = (groupKey: string, itemKey: string): string => `${groupKey}.${itemKey}`;
+
+type ToggleFilters = (newFilters: Record<string, boolean>) => void;
+
+type GetOnGroupCheck = (value: boolean, overrides?: Record<string, boolean>) => () => void;
+
+interface FilterDropdownItemProps {
+  className?: string;
+  id: string;
+  label: string;
+  checked: boolean;
+  disabled?: boolean;
+  onChange: FilterBooleanProps['onChange'];
+  toggleFilters: ToggleFilters;
+  getOnGroupCheck: GetOnGroupCheck;
+}
+
+const FilterDropdownItem = (props: FilterDropdownItemProps) => {
+  const { className, id, label, checked, disabled, onChange, toggleFilters, getOnGroupCheck } =
+    props;
+
+  /**
+   * Toggle the filter when the menu item itself is activated: ariakit fires a click on the menu
+   * item when pressing Enter/Space, and clicking the item padding targets it directly. Clicks on
+   * the nested label/checkbox and on the only button are handled by their own handlers.
+   */
+  const onItemClick = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      if (disabled || event.target !== event.currentTarget) {
+        return;
+      }
+
+      toggleFilters({ [id]: !checked });
+    },
+    [disabled, toggleFilters, id, checked],
+  );
+
+  /**
+   * Check only the current filter of the group
+   */
+  const onOnlyClick = useCallback(
+    () => getOnGroupCheck(false, { [id]: true })(),
+    [getOnGroupCheck, id],
+  );
+
+  return (
+    <DropdownItem
+      onClick={onItemClick}
+      hideOnClick={false}
+      className={cx(css.filterGroupItem, className)}
+    >
+      <Filter
+        label={label}
+        name={id}
+        onChange={onChange}
+        checked={checked}
+        disabled={disabled}
+        className={css.filterGroupItemFilter}
+      />
+      <Button
+        solid
+        size="xsmall"
+        type="button"
+        onClick={onOnlyClick}
+        disabled={disabled}
+        className={css.filterGroupOnlyButton}
+      >
+        {I18N.ONLY}
+      </Button>
+    </DropdownItem>
+  );
+};
+
 interface FilterGroupProps extends React.ComponentProps<'div'> {
   groupKey: string;
   data: FilterGroupFieldData;
   values: Record<string, boolean>;
   onCheckboxChange: FilterBooleanProps['onChange'];
-  toggleFilters: (newFilters: Record<string, boolean>) => void;
+  toggleFilters: ToggleFilters;
 }
 
 const FilterGroup = (props: FilterGroupProps) => {
@@ -70,22 +138,24 @@ const FilterGroup = (props: FilterGroupProps) => {
     </>
   );
 
-  const getOnGroupCheck =
-    (value: boolean, overrides = {}) =>
-    () => {
-      const newFilters = groupItems.reduce(
-        (agg, { key: itemKey }) => ({
-          ...agg,
-          [`${groupKey}.${itemKey}`]: value,
-        }),
-        {},
-      );
-
-      toggleFilters({
-        ...newFilters,
-        ...overrides,
-      });
-    };
+  const getOnGroupCheck: GetOnGroupCheck = useCallback(
+    (value, overrides = {}) =>
+      () => {
+        const newFilters = groupItems.reduce(
+          (agg, { key: itemKey }) => ({
+            ...agg,
+            [getGroupItemKey(groupKey, itemKey)]: value,
+          }),
+          {},
+        );
+
+        toggleFilters({
+          ...newFilters,
+          ...overrides,
+        });
+      },
+    [groupItems, groupKey, toggleFilters],
+  );
 
   const filteredGroupItems = useMemo(() => {
     if (!search) {
@@ -102,63 +172,57 @@ const FilterGroup = (props: FilterGroupProps) => {
       ariaLabel={`${groupLabel}: ${filterSuffix}`}
     >
       {groupItems.length > 10 && (
-        <div className={css.filterGroupSearchWrapper}>
+        <DropdownGroup>
           <InputSearch
             defaultValue={search}
             onChange={setSearch}
             placeholder={I18N.GROUP_SEARCH}
             debounceWait={0}
           />
-        </div>
+        </DropdownGroup>
       )}
-      <div className={css.filterGroupItems}>
+      <DropdownGroup className={css.filterGroupItems}>
         {filteredGroupItems.length === 0 && (
-          <Stack className={css.filterGroupSearchNotFound}>
-            <p>{I18N.GROUP_NOT_FOUND}</p>
-            <div>
-              <Button
-                size="small"
-                kind="primary"
-                type="button"
-                onClick={() => setSearch('')}
-                className={css.filterGroupSearchNotFoundClear}
-              >
-                {I18N.GROUP_SEARCH_CLEAR}
-              </Button>
-            </div>
-          </Stack>
+          <FlexStack
+            alignItems="center"
+            justifyContent="center"
+            className={css.filterGroupSearchNotFound}
+          >
+            <Stack space="xxxsmall">
+              <p>{I18N.GROUP_NOT_FOUND}</p>
+              <div>
+                <Button
+                  solid
+                  size="xsmall"
+                  type="button"
+                  onClick={() => setSearch('')}
+                  className={css.filterGroupSearchNotFoundClear}
+                >
+                  {I18N.GROUP_SEARCH_CLEAR}
+                </Button>
+              </div>
+            </Stack>
+          </FlexStack>
         )}
         {filteredGroupItems.map(({ key: itemKey, ...itemData }) => {
-          const id = [groupKey, itemKey].join('.');
-          const getOnOnlyClick = () => getOnGroupCheck(false, { [id]: true });
+          const id = getGroupItemKey(groupKey, itemKey);
 
           return (
-            <DropdownItem key={id} className={css.filterGroupItem}>
-              <Filter
-                label={itemData.label}
-                name={id}
-                onChange={onCheckboxChange}
-                checked={values[id]}
-                disabled={itemData.disabled}
-                className={css.filterGroupItemFilter}
-              />
-              <Button
-                kind="info"
-                solid
-                size="small"
-                type="button"
-                onClick={getOnOnlyClick()}
-                disabled={itemData.disabled}
-                className={css.filterGroupOnlyButton}
-              >
-                {I18N.ONLY}
-              </Button>
-            </DropdownItem>
+            <FilterDropdownItem
+              key={id}
+              id={id}
+              label={itemData.label}
+              checked={values[id]}
+              disabled={itemData.disabled}
+              onChange={onCheckboxChange}
+              toggleFilters={toggleFilters}
+              getOnGroupCheck={getOnGroupCheck}
+            />
           );
         })}
-      </div>
+      </DropdownGroup>
       {filteredGroupItems.length !== 0 && (
-        <div className={css.filterGroupActions}>
+        <DropdownGroup className={css.filterGroupActions}>
           {areAllGroupItemsChecked ? (
             <DropdownItem id="clear-all" onClick={getOnGroupCheck(false)} role="button">
               {I18N.CLEAR}
@@ -168,7 +232,7 @@ const FilterGroup = (props: FilterGroupProps) => {
               {I18N.CHECK}
             </DropdownItem>
           )}
-        </div>
+        </DropdownGroup>
       )}
     </Dropdown>
   );

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

@@ -7,21 +7,23 @@
   color: inherit;
   cursor: default;
   text-decoration: none;
-  transition: var(--transition-out);
+  transition-property: color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
+.anchor:focus,
+.anchor:active,
 .anchor:hover {
-  color: var(--color-primary);
-  transition: var(--transition-in);
-}
-
-.anchor:focus {
+  color: var(--color-accent-dark);
   outline: 0;
+  transition-duration: var(--transition-duration-in);
 }
 
 .hoverCard {
-  z-index: var(--layer-high);
-  padding: var(--space-small);
+  z-index: var(--layer-overlay);
+  padding: calc(var(--space-small) - 1px);
+  border: 1px solid var(--color-outline);
   border-radius: var(--radius-medium);
   width: calc(100vw - 2 * var(--space-small));
   max-width: 340px;
@@ -31,12 +33,14 @@
   background: var(--color-light);
   font-size: var(--size-small);
   opacity: 0;
-  transition: var(--transition-out);
+  transition-property: opacity;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .hoverCard[data-enter] {
   opacity: 1;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .hoverCard[data-leave] {

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

@@ -31,7 +31,13 @@ export const HoverCard = (props: HoverCardProps) => {
     children,
   } = props;
 
-  const state = useHovercardState({ animated: true, gutter: 8, timeout: 300, placement: 'top' });
+  const state = useHovercardState({
+    animated: true,
+    gutter: 8,
+    timeout: 300,
+    overflowPadding: 48,
+    placement: 'top',
+  });
   const hovercardProps = useHovercard({ state, portal: true });
 
   // Fallback to span if no href

package/src/ui/input/input.module.css

@@ -3,7 +3,9 @@
   border-radius: var(--radius-small);
   color: var(--color-text-light);
   width: 100%;
-  transition: var(--transition-in);
+  transition-property: color, border-color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
   appearance: none;
   outline: none;
 }
@@ -27,7 +29,7 @@
 .root:focus {
   border-color: var(--color-outline-dark);
   color: inherit;
-  transition: var(--transition-out);
+  transition-duration: var(--transition-duration-in);
 }
 
 /** Size modifier */

package/src/ui/table/table.module.css

@@ -33,21 +33,30 @@
   border-top: 0;
 }
 
-.root tbody td a {
+.root tbody a {
   color: inherit;
   text-decoration: none;
 }
 
-.root tbody td a:hover,
-.root tbody td a:focus,
-.root tbody td a:active {
-  color: var(--color-primary);
+.root tbody a:focus,
+.root tbody a:active,
+.root tbody a:hover {
+  color: var(--color-accent);
   text-decoration: underline;
 }
 
+/* hover current row */
+.root tbody tr th,
+.root tbody tr td {
+  transition-property: background-color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
+}
+
 .root tbody tr:hover th,
 .root tbody tr:hover td {
   background-color: var(--color-highlight-warning);
+  transition-duration: var(--transition-duration-in);
 }
 
 .empty {

package/src/ui/tabs/tabs.module.css

@@ -13,7 +13,9 @@
   color: var(--color-text-ultra-light);
   font-weight: bold;
   text-decoration: none;
-  transition: var(--ui-transition-out);
+  transition-property: color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .item::after {
@@ -24,27 +26,33 @@
   right: 0;
   bottom: -1px;
   height: 2px;
-  background: transparent;
+  background: currentColor;
+  opacity: 0;
+  transition-property: opacity;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
-.item:hover,
+.item:focus,
 .item:active,
-.item:focus {
-  color: var(--color-primary);
+.item:hover {
+  color: var(--color-accent);
   outline: none;
-  transition: var(--ui-transition-out);
 }
 
 .item:hover::after,
 .item:active::after,
 .item:focus::after {
-  background: currentColor;
+  opacity: 1;
+  transition-duration: var(--transition-duration-in);
 }
 
 .itemActive {
-  color: var(--color-primary);
+  color: var(--color-accent);
+  transition-duration: var(--transition-duration-in);
 }
 
 .itemActive::after {
-  background: currentColor;
+  opacity: 1;
+  transition-duration: var(--transition-duration-in);
 }

package/src/ui/tag/tag.module.css

@@ -10,7 +10,6 @@
 
 a.root {
   text-decoration: none;
-  transition: var(--transition-out);
 }
 
 a.root:hover,
@@ -19,7 +18,6 @@ a.root:active {
   opacity: 0.8;
   color: var(--color-light);
   text-decoration: none;
-  transition: var(--transition-in);
 }
 
 /** Kind variation */

package/src/ui/textarea/textarea.module.css

@@ -4,7 +4,9 @@
   color: var(--color-text-light);
   width: 100%;
   resize: vertical;
-  transition: var(--transition-in);
+  transition-property: color, border-color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
   appearance: none;
   outline: none;
 }
@@ -28,7 +30,7 @@
 .root:focus {
   border-color: var(--color-outline-dark);
   color: inherit;
-  transition: var(--transition-out);
+  transition-duration: var(--transition-duration-in);
 }
 
 .root[readonly=''] {

package/src/ui/toolbar/toolbar.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 
+import { FlexStack } from '../../layout/flex-stack';
 import css from './toolbar.module.css';
 
 export const Toolbar = (props) => {
@@ -12,7 +13,9 @@ export const Toolbar = (props) => {
     <div className={rootClassName}>
       <div className={css.content}>{children}</div>
       {renderActions && (
-        <div className={css.actions}>{renderActions({ actionClassName: css.action })}</div>
+        <FlexStack gap="xsmall" alignItems="center" className={css.actions}>
+          {renderActions({ actionClassName: css.action })}
+        </FlexStack>
       )}
     </div>
   );

package/src/ui/toolbar/toolbar.module.css

@@ -6,18 +6,12 @@
 
 .actions {
   margin-top: var(--space-xsmall);
-  display: flex;
-  align-items: center;
 }
 
 .action {
   flex: 0 0 auto;
 }
 
-.action + .action {
-  margin-left: var(--space-xsmall);
-}
-
 @media (min-width: 768px) {
   .root {
     display: flex;

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

@@ -11,7 +11,7 @@
 }
 
 .tooltip {
-  z-index: var(--layer-high);
+  z-index: var(--layer-overlay);
   padding: var(--space-xxxsmall) var(--space-xxsmall);
   border-radius: var(--radius-small);
   background: var(--color-text);
@@ -22,12 +22,14 @@
   filter: drop-shadow(var(--shadow-layer));
   will-change: filter;
   opacity: 0;
-  transition: var(--transition-out);
+  transition-property: opacity;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .tooltip[data-enter] {
   opacity: 1;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .tooltip[data-leave] {

package/src/ui/tooltip/tooltip.tsx

@@ -29,7 +29,12 @@ export const Tooltip = <T extends React.ElementType = 'span'>(
     ...restProps
   } = props;
 
-  const tooltip = useTooltipState({ animated: true, placement: 'top', timeout: 300 });
+  const tooltip = useTooltipState({
+    animated: true,
+    placement: 'top',
+    overflowPadding: 48,
+    timeout: 300,
+  });
 
   return (
     <>

package/src/utils/index.ts

@@ -1,3 +1,4 @@
 export * from './colors';
 export * from './jobs';
 export * from './components';
+export * from './portal';

package/src/utils/portal.ts

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Ariakit appends nested portals (tooltips, hovercards, menus) to the parent portal node,
+ * create the portal node with a specific class to adjust the z-index of the nested overlays
+ */
+export const getCreatePortalElement = (className: string) => (element: HTMLElement) => {
+  const portalElement = element.ownerDocument.createElement('div');
+  portalElement.className = className;
+  return portalElement;
+};
+
+/**
+ * Create a body level portal root with a specific class, to be passed to Ariakit `PortalContext`
+ * Overlays (tooltips, hovercards, menus) rendered inside the context are appended to the root,
+ * so the class can adjust their z-index without affecting the overlays from other sections
+ */
+export const usePortalRoot = (className: string): HTMLElement | null => {
+  const [portalRoot, setPortalRoot] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    const element = document.createElement('div');
+    element.className = className;
+    document.body.appendChild(element);
+    setPortalRoot(element);
+
+    return () => {
+      element.remove();
+      setPortalRoot(null);
+    };
+  }, [className]);
+
+  return portalRoot;
+};

package/types/components/metric-run-info/metric-run-info.d.ts

@@ -6,5 +6,6 @@ export type MetricRunInfoProps = {
     baseline?: number;
     showMetricDescription?: boolean;
     titleWrapper?: ElementType;
+    showDeltaAbsoluteValue?: boolean;
 } & Pick<RunInfoProps, 'showDelta' | 'showBaseline' | 'size' | 'loading'>;
 export declare const MetricRunInfo: (props: MetricRunInfoProps & React.ComponentProps<"div">) => React.JSX.Element;

package/types/components/metrics-table/metrics-table.d.ts

@@ -13,9 +13,10 @@ interface MetricsTableProps extends Omit<React.ComponentProps<typeof Table>, 'ti
     sort?: MetricsTableHeaderProps['sort'];
     updateSort?: MetricsTableHeaderProps['updateSort'];
     renderRowHeader?: (item: ReportMetricRow) => React.ReactNode;
+    onRowClick?: (item: ReportMetricRow) => void;
     emptyMessage?: React.ReactNode;
     showAllItems: boolean;
     setShowAllItems: (value: boolean) => void;
 }
-export declare const MetricsTable: ({ className, runs, items, showHeaderSum, title, sort, updateSort, renderRowHeader, emptyMessage, showAllItems, setShowAllItems, ...restProps }: MetricsTableProps) => React.JSX.Element;
+export declare const MetricsTable: ({ className, runs, items, showHeaderSum, title, sort, updateSort, renderRowHeader, onRowClick, emptyMessage, showAllItems, setShowAllItems, ...restProps }: MetricsTableProps) => React.JSX.Element;
 export {};

package/types/components/metrics-table-row-count/index.d.ts

@@ -0,0 +1 @@
+export * from './metrics-table-row-count';

package/types/components/metrics-table-row-count/metrics-table-row-count.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { FlexStackProps } from '../../layout/flex-stack';
+export type MetricsTableRowCountProps = {
+    count: number;
+    total: number;
+} & FlexStackProps<'span'>;
+export declare const MetricsTableRowCount: (props: MetricsTableRowCountProps) => React.JSX.Element;

package/types/components/metrics-treemap/metrics-treemap.constants.d.ts

@@ -20,6 +20,8 @@ export type TreeNode = Tree | TreeLeaf;
 export type TreeNodeChildren = Array<TreeNode>;
 export type TileGroupSizeDisplay = 'minimal' | 'small' | 'default';
 export type TileSizeDisplay = 'minimal' | 'small' | 'default';
+export declare const NODE_ID_ATTRIBUTE = "data-treemap-id";
+export declare const NODE_ID_SELECTOR = "[data-treemap-id]";
 export declare const SQUARIFY_RATIO = 1.66;
 export declare const PADDING_OUTER = 1;
 export declare const PADDING_INNER = 2;

package/types/components/metrics-treemap/metrics-treemap.utils.d.ts

@@ -1,15 +1,26 @@
-import { type RefObject } from 'react';
 import { DeltaType, type MetricRunInfoBaseline, type MetricRunInfo, type ReportMetricRow } from '@bundle-stats/utils';
-import { type Tree, type TileSizeDisplay, type TileGroupSizeDisplay } from './metrics-treemap.constants';
+import { type TreeNode, type Tree, type TreeTotal, type TileSizeDisplay, type TileGroupSizeDisplay } from './metrics-treemap.constants';
 export declare function getTreemapNodes(items: Array<ReportMetricRow>): Tree;
 export declare function getTreemapNodesGroupedByPath(items: Array<ReportMetricRow>): Tree;
+export declare function getTreemapNodesIndex(node: Tree, index?: Map<string, TreeNode>): Map<string, TreeNode>;
 export declare function resolveGroupDeltaType(metricRunInfo?: MetricRunInfo | MetricRunInfoBaseline): DeltaType.NO_CHANGE | DeltaType.NEGATIVE | DeltaType.POSITIVE;
+export declare function getGroupRunInfo(total: TreeTotal): {
+    runInfo: MetricRunInfo;
+    baselineDisplayValue: string;
+    deltaType: DeltaType.NEGATIVE | DeltaType.NO_CHANGE | DeltaType.POSITIVE;
+};
 export declare function resolveTileGroupSizeDisplay(width: number, height: number): TileGroupSizeDisplay;
 export declare function resolveTileSizeDisplay(width: number, height: number): TileSizeDisplay;
-interface UseTooltipStateWithMouseFollowOptions {
-    parentRef: RefObject<Element>;
+interface UseTreemapTooltipStateOptions {
     gutter?: number;
     timeout?: number;
+    hideTimeout?: number;
 }
-export declare function useTooltipStateWithMouseFollow(options: UseTooltipStateWithMouseFollowOptions): import("ariakit/tooltip").TooltipState;
+export declare function useTreemapTooltipState(options?: UseTreemapTooltipStateOptions): {
+    tooltipState: import("ariakit/tooltip").TooltipState;
+    setPointer: (x: number, y: number) => void;
+    hoveredNodeId: string | null;
+    setHoveredNode: (nodeId: string | null) => void;
+    clearHoveredNode: () => void;
+};
 export {};

package/types/components/metrics-treemap/tile/index.d.ts

@@ -0,0 +1 @@
+export * from './tile';