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

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

@@ -13,9 +13,12 @@
   border-radius: var(--radius-small);
   box-shadow: var(--shadow-layer);
   background: var(--color-background);
-  min-width: 12em;
+  min-width: 16em;
   z-index: var(--layer-high);
-  padding: calc(var(--space-xxxsmall) / 2);
+  padding: var(--space-xxxsmall);
+  color: var(--color-text-light);
+  font-size: var(--size-small);
+  line-height: var(--line-height);
   opacity: 0;
   transition: var(--transition-out);
 }
@@ -40,12 +43,9 @@
   outline: none;
   border: 0;
   border-radius: var(--radius-small);
-  padding: calc(var(--space-xxxsmall) + var(--space-xxxsmall) / 2);
+  padding: var(--space-xxxsmall);
   background: none;
   text-align: left;
-  color: var(--color-text-light);
-  font-size: var(--size-small);
-  line-height: var(--line-height);
   text-decoration: none;
   cursor: default;
 }
@@ -69,3 +69,37 @@
   background: var(--color-highlight-info);
   color: var(--color-primary-dark);
 }
+
+
+.group {
+  position: relative;
+  padding: calc(var(--space-xxxsmall) / 2 + 1px) 0 calc(var(--space-xxxsmall) / 2);
+}
+
+.group::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  left: var(--space-xxxsmall);
+  right: var(--space-xxxsmall);
+  top: 0px;
+  height: 1px;
+  border: none;
+  background: var(--color-outline);
+}
+
+.group:first-child {
+  padding-top: 0;
+}
+
+.group:first-child::before {
+  display: none;
+}
+
+.group:last-child {
+  padding-bottom: 0;
+}
+
+.group:empty {
+  display: none;
+}

package/src/ui/dropdown/dropdown.tsx

@@ -1,11 +1,20 @@
-import React from 'react';
+import React, { ComponentProps } from 'react';
 import cx from 'classnames';
 import { Menu, MenuButton, MenuItem, MenuStateProps, useMenuState } from 'ariakit/menu';
+import isNull from 'lodash/isNull';
+import isUndefined from 'lodash/isUndefined';
 
 import { Button, BUTTON_SIZE } from '../button';
 import css from './dropdown.module.css';
 import { Icon } from '../icon';
 
+export type DropdownGroupProps = ComponentProps<'div'>;
+
+export const DropdownGroup = (props: DropdownGroupProps) => {
+  const { className, ...restProps } = props;
+  return <div className={cx(css.group, className)} {...restProps} />;
+};
+
 interface DropdownItemProps {
   isActive?: boolean;
 }
@@ -37,7 +46,7 @@ export const Dropdown = (props: DropdownProps & React.ComponentProps<'div'>) =>
     label = null,
     ariaLabel = '',
     glyph = '',
-    showChevron = true,
+    showChevron: initialShowChevron,
     disabled = false,
     placement,
     gutter = 4,
@@ -47,6 +56,7 @@ export const Dropdown = (props: DropdownProps & React.ComponentProps<'div'>) =>
 
   const dropdownAriaLabel = ariaLabel || (typeof label === 'string' ? label : '');
   const menuState = useMenuState({ animated: true, placement, gutter, shift });
+  const showChevron = isUndefined(initialShowChevron) ? !isNull(label) : initialShowChevron;
 
   return (
     <>
@@ -58,6 +68,7 @@ export const Dropdown = (props: DropdownProps & React.ComponentProps<'div'>) =>
         rightGlyph={showChevron ? Icon.ICONS.CHEVRON_DOWN : undefined}
         disabled={disabled}
         state={menuState}
+        toggleOnClick
         tabIndex={null}
         className={cx(css.button, className)}
       >

package/src/ui/filters/filters.module.css

@@ -101,23 +101,9 @@
   text-transform: lowercase;
 }
 
-.filterGroupSearchWrapper {
-  padding-bottom: var(--space-xxxsmall);
-  margin-bottom: var(--space-xxxsmall);
-  border-bottom: 1px solid var(--color-outline);
-}
-
 .filterGroupSearchNotFound {
   padding: var(--space-xxsmall) 0;
   text-align: center;
   font-size: var(--size-small);
   color: var(--color-text-light);
 }
-
-.filterGroupActions {
-  margin-top: var(--space-xxxsmall);
-  padding-top: var(--space-xxxsmall);
-  padding-bottom: var(--space-xxxsmall);
-  margin-bottom: calc(0px - var(--space-xxxsmall));
-  border-top: 1px solid var(--color-outline);
-}

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';
@@ -40,12 +40,86 @@ 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
+        kind="info"
+        solid
+        size="small"
+        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 +144,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,16 +178,16 @@ 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>
@@ -129,36 +205,24 @@ const FilterGroup = (props: FilterGroupProps) => {
           </Stack>
         )}
         {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.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/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/types/components/metric-run-info/metric-run-info.d.ts

@@ -6,5 +6,6 @@ export type MetricRunInfoProps = {
     baseline?: number;
     showMetricDescription?: boolean;
     titleWrapper?: ElementType;
+    showDeltaValue?: boolean;
 } & Pick<RunInfoProps, 'showDelta' | 'showBaseline' | 'size' | 'loading'>;
 export declare const MetricRunInfo: (props: MetricRunInfoProps & React.ComponentProps<"div">) => 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,21 @@
-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 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 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/ui/dropdown/dropdown.d.ts

@@ -1,5 +1,7 @@
-import React from 'react';
+import React, { ComponentProps } from 'react';
 import { MenuItem, MenuStateProps } from 'ariakit/menu';
+export type DropdownGroupProps = ComponentProps<'div'>;
+export declare const DropdownGroup: (props: DropdownGroupProps) => React.JSX.Element;
 interface DropdownItemProps {
     isActive?: boolean;
 }

package/types/ui/filters/filters.d.ts

@@ -3,12 +3,13 @@ import type { FilterFieldsData, FilterGroupFieldData } from '../../types';
 interface FilterBooleanProps extends React.ComponentProps<'input'> {
     label: string;
 }
+type ToggleFilters = (newFilters: Record<string, boolean>) => void;
 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;
 }
 interface FiltersProps extends React.ComponentProps<'div'> {
     values: Record<string, boolean>;

package/vitest.config.ts

@@ -35,6 +35,10 @@ export default defineConfig({
   },
   test: {
     name: 'ui:storybook',
+    // Same `configDir` misassumption as `fix-storybook-vitest-root` above, but on the Vitest
+    // side: `storybookTest` resolves the story globs and `setupFiles` against a root it derives
+    // from `configDir`. `dir` is the first source it reads, so set it explicitly.
+    dir: PACKAGE_ROOT,
     setupFiles: ['./vitest.setup.ts'],
     retry: 2,
     browser: {

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

@@ -1,15 +0,0 @@
-.group:empty {
-  display: none;
-}
-
-.group {
-  margin-bottom: calc(var(--space-xxxsmall) / 2);
-  border-bottom: 1px solid var(--color-outline);
-  padding-bottom: calc(var(--space-xxxsmall) / 2);
-}
-
-.group:last-child {
-  margin-bottom: 0;
-  padding-bottom: 0;
-  border-bottom: none;
-}

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

@@ -1,15 +0,0 @@
-.group:empty {
-  display: none;
-}
-
-.group {
-  margin-bottom: calc(var(--space-xxxsmall) / 2);
-  border-bottom: 1px solid var(--color-outline);
-  padding-bottom: calc(var(--space-xxxsmall) / 2);
-}
-
-.group:last-child {
-  margin-bottom: 0;
-  padding-bottom: 0;
-  border-bottom: none;
-}

package/src/components/metrics-table-options/metrics-table-options.module.css

@@ -1,15 +0,0 @@
-.group:empty {
-  display: none;
-}
-
-.group {
-  margin-bottom: calc(var(--space-xxxsmall) / 2);
-  border-bottom: 1px solid var(--color-outline);
-  padding-bottom: calc(var(--space-xxxsmall) / 2);
-}
-
-.group:last-child {
-  margin-bottom: 0;
-  padding-bottom: 0;
-  border-bottom: none;
-}