@bundle-stats/ui 4.13.0-beta.8 → 4.13.0-rc.0

package/src/ui/filters/filters.tsx

@@ -5,90 +5,55 @@ import type { FilterFieldsData, FilterGroupFieldData } from '../../types';
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
 import { Button } from '../button';
-import { Dropdown } from '../dropdown';
+import { ControlGroup } from '../control-group';
+import { Dropdown, DropdownItem } from '../dropdown';
 import { InputSearch } from '../input-search';
 import * as I18N from './filters.i18n';
 import { getGroupFiltersLabelSuffix, LABELS } from './filters.utils';
 import css from './filters.module.css';
 
-interface FilterProps extends React.ComponentProps<'input'> {
-  as?: React.ElementType;
-  buttonClassName?: string;
+interface FilterBooleanProps extends React.ComponentProps<'input'> {
   label: string;
-  name: string;
-  getOnOnlyClick?: (name: string) => () => void;
 }
 
-const Filter = (props: FilterProps) => {
-  const {
-    className = '',
-    as: Component = 'div',
-    buttonClassName = '',
-    label,
-    name,
-    getOnOnlyClick,
-    ...inputProps
-  } = props;
-
-  const id = `filter-${name}`;
-  const rootClassName = cx(css.filter, className);
+const Filter = (props: FilterBooleanProps) => {
+  const { className = '', label, name, ...inputProps } = props;
 
   return (
-    <Component className={rootClassName}>
-      {/* eslint-disable */}
-      <FlexStack
-        space="xxxsmall"
-        alignItems="center"
-        as="label"
-        className={cx(css.filterCheckbox, buttonClassName)}
-      >
-        {/* eslint-enabled */}
-        <input type="checkbox" id={id} name={name} {...inputProps} className={css.filterInput} />
-        <span title={label} className={css.filterLabel}>
-          {label}
-        </span>
-      </FlexStack>
-
-      {getOnOnlyClick && (
-        <Button
-          kind="info"
-          solid
-          size="small"
-          type="button"
-          onClick={getOnOnlyClick(name)}
-          className={css.filterOnlyButton}
-        >
-          {I18N.ONLY}
-        </Button>
-      )}
-    </Component>
+    <FlexStack
+      space="xxxsmall"
+      alignItems="center"
+      as="label"
+      className={cx(css.filter, className)}
+    >
+      <input
+        type="checkbox"
+        id={`filter-${name}`}
+        name={name}
+        {...inputProps}
+        className={css.filterControl}
+      />
+      <span title={label} className={css.filterLabel}>
+        {label}
+      </span>
+    </FlexStack>
   );
 };
 
 interface FilterGroupProps extends React.ComponentProps<'div'> {
-  buttonClassName?: string;
   groupKey: string;
   data: FilterGroupFieldData;
   values: Record<string, boolean>;
-  onCheckboxChange: FilterProps['onChange'];
+  onCheckboxChange: FilterBooleanProps['onChange'];
   toggleFilters: (newFilters: Record<string, boolean>) => void;
 }
 
 const FilterGroup = (props: FilterGroupProps) => {
-  const {
-    className = '',
-    buttonClassName = '',
-    groupKey,
-    data,
-    values,
-    onCheckboxChange,
-    toggleFilters,
-  } = props;
+  const { className = '', groupKey, data, values, onCheckboxChange, toggleFilters } = props;
+  const { label: groupLabel, children: groupItems } = data;
 
   const [search, setSearch] = useState('');
 
-  const { label: groupLabel, children: groupItems } = data;
-
   const areAllGroupItemsChecked = groupItems
     .map(({ key: itemKey }) => values?.[`${groupKey}.${itemKey}`])
     .reduce((agg, val) => agg && val, true);
@@ -99,7 +64,9 @@ const FilterGroup = (props: FilterGroupProps) => {
     <>
       {`${groupLabel}:`}
       &nbsp;
-      <span className={cx(hasCustomFilterSuffix && css.labelSuffixCustom)}>{filterSuffix}</span>
+      <span className={cx(hasCustomFilterSuffix && css.filterGroupLabelSuffixCustom)}>
+        {filterSuffix}
+      </span>
     </>
   );
 
@@ -131,87 +98,78 @@ const FilterGroup = (props: FilterGroupProps) => {
   return (
     <Dropdown
       className={className}
-      buttonClassName={buttonClassName}
       label={dropdownLabel}
       ariaLabel={`${groupLabel}: ${filterSuffix}`}
     >
-      {({ MenuItem, menuItemClassName }) => {
-        return (
-          <>
-            {groupItems.length > 10 && (
-              <div className={css.filterGroupSearchWrapper}>
-                <InputSearch
-                  defaultValue={search}
-                  onChange={setSearch}
-                  placeholder={I18N.GROUP_SEARCH}
-                  debounceWait={0}
-                />
-              </div>
-            )}
-            <div 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>
-              )}
-              {filteredGroupItems.map(({ key: itemKey, ...itemData }) => {
-                const id = [groupKey, itemKey].join('.');
-                const getOnOnlyClick = () => getOnGroupCheck(false, { [id]: true });
-
-                return (
-                  <Filter
-                    key={id}
-                    className={menuItemClassName}
-                    as={MenuItem}
-                    name={id}
-                    label={itemData.label}
-                    onChange={onCheckboxChange}
-                    checked={values[id]}
-                    disabled={itemData.disabled}
-                    getOnOnlyClick={getOnOnlyClick}
-                  />
-                );
-              })}
+      {groupItems.length > 10 && (
+        <div className={css.filterGroupSearchWrapper}>
+          <InputSearch
+            defaultValue={search}
+            onChange={setSearch}
+            placeholder={I18N.GROUP_SEARCH}
+            debounceWait={0}
+          />
+        </div>
+      )}
+      <div 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>
-            {filteredGroupItems.length !== 0 && (
-              <div className={css.filterGroupActions}>
-                {areAllGroupItemsChecked ? (
-                  <MenuItem
-                    id="clear-all"
-                    as="button"
-                    className={menuItemClassName}
-                    type="button"
-                    onClick={getOnGroupCheck(false)}
-                  >
-                    {I18N.CLEAR}
-                  </MenuItem>
-                ) : (
-                  <MenuItem
-                    id="clear-all"
-                    as="button"
-                    className={menuItemClassName}
-                    type="button"
-                    onClick={getOnGroupCheck(true)}
-                  >
-                    {I18N.CHECK}
-                  </MenuItem>
-                )}
-              </div>
-            )}
-          </>
-        );
-      }}
+          </Stack>
+        )}
+        {filteredGroupItems.map(({ key: itemKey, ...itemData }) => {
+          const id = [groupKey, itemKey].join('.');
+          const getOnOnlyClick = () => getOnGroupCheck(false, { [id]: true });
+
+          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>
+          );
+        })}
+      </div>
+      {filteredGroupItems.length !== 0 && (
+        <div className={css.filterGroupActions}>
+          {areAllGroupItemsChecked ? (
+            <DropdownItem id="clear-all" onClick={getOnGroupCheck(false)} role="button">
+              {I18N.CLEAR}
+            </DropdownItem>
+          ) : (
+            <DropdownItem id="clear-all" onClick={getOnGroupCheck(true)} role="button">
+              {I18N.CHECK}
+            </DropdownItem>
+          )}
+        </div>
+      )}
     </Dropdown>
   );
 };
@@ -226,6 +184,9 @@ interface FiltersProps extends React.ComponentProps<'div'> {
 export const Filters = (props: FiltersProps) => {
   const { className = '', values, filters, toggleFilter, toggleFilters } = props;
 
+  /**
+   * Toggle filter value on checkbox change
+   */
   const onCheckboxChange = useCallback(
     (event: any) => {
       const { name } = event.target;
@@ -233,41 +194,41 @@ export const Filters = (props: FiltersProps) => {
     },
     [toggleFilter, values],
   );
-  const rootClassName = cx(css.root, className);
+
+  const filterList = Object.entries(filters);
+  const filterCount = filterList.length;
 
   return (
-    <form className={rootClassName}>
-      <FlexStack space="xxsmall" alignItems="top" className={css.items}>
-        {Object.entries(filters).map(([name, data]) => {
-          if ('defaultValue' in data) {
-            return (
-              <Filter
-                key={name}
-                className={cx(css.item, css.filterStandalone)}
-                buttonClassName={css.itemButton}
-                name={name}
-                label={data.label}
-                onChange={onCheckboxChange}
-                checked={values[name]}
-                disabled={data.disabled as boolean}
-              />
-            );
-          }
+    <ControlGroup className={cx(css.root, className)}>
+      {filterList.map(([name, data], index) => {
+        const lastItem = index === filterCount - 1;
 
+        if ('defaultValue' in data) {
           return (
-            <FilterGroup
-              className={css.item}
-              buttonClassName={css.itemButton}
+            <Filter
+              name={name}
+              label={data.label}
+              onChange={onCheckboxChange}
+              checked={values[name]}
+              disabled={data.disabled as boolean}
               key={name}
-              groupKey={name}
-              data={data}
-              values={values}
-              onCheckboxChange={onCheckboxChange}
-              toggleFilters={toggleFilters}
+              className={cx(css.filterSingle, lastItem && css.itemLast)}
             />
           );
-        })}
-      </FlexStack>
-    </form>
+        }
+
+        return (
+          <FilterGroup
+            groupKey={name}
+            data={data}
+            values={values}
+            onCheckboxChange={onCheckboxChange}
+            toggleFilters={toggleFilters}
+            className={cx(lastItem && css.itemLast)}
+            key={name}
+          />
+        );
+      })}
+    </ControlGroup>
   );
 };

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

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

package/src/ui/icon/icon.tsx

@@ -5,10 +5,11 @@ import css from './icon.module.css';
 
 const ICONS = {
   ARROW: 'arrow',
-  ARROW_RIGHT_CIRLCE: 'arrow-right-circle',
+  ARROW_RIGHT_CIRCLE: 'arrow-right-circle',
   CANCEL: 'close',
   CHEVRON_DOWN: 'chevron-down',
   CHEVRON_UP: 'chevron-up',
+  CHECK: 'check',
   CLOSE: 'close',
   CLOCK: 'clock',
   COMMIT: 'commit',

package/src/ui/input-search/input-search.tsx

@@ -70,6 +70,7 @@ export const InputSearch = (
       />
       {value && (
         <Button
+          size="small"
           radius="circle"
           glyph={Icon.ICONS.CANCEL}
           type="button"

package/src/ui/loader/loader.jsx

@@ -4,7 +4,7 @@ import cx from 'classnames';
 
 import css from './loader.module.css';
 
-export const Loader = ({ className, size, ...restProps }) => (
+export const Loader = ({ className = '', size = 'medium', ...restProps }) => (
   <span className={cx(css.root, className, css[size])} {...restProps} />
 );
 

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

@@ -89,6 +89,36 @@
   border-width: 1px;
 }
 
+/** cascade border radius */
+.root thead,
+.root thead tr:first-child {
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+
+.root thead tr:first-child th:first-child {
+  border-top-left-radius: inherit;
+}
+
+.root thead tr:first-child th:last-child {
+  border-top-right-radius: inherit;
+}
+
+.root tbody:last-child,
+.root tbody:last-child tr:last-child {
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+}
+
+.root tbody:last-child tr:last-child th:first-child,
+.root tbody:last-child tr:last-child td:first-child {
+  border-bottom-left-radius: inherit;
+}
+
+.root tbody:last-child tr:last-child td:last-child {
+  border-bottom-right-radius: inherit;
+}
+
 /* compact variation */
 .compact td,
 .compact th {

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

@@ -42,7 +42,7 @@ a.root:active {
 /** Size variation */
 /** default: medium */
 .root {
-  border-radius: var(--radius-medium);
+  border-radius: var(--radius-small);
   padding: calc(var(--space-xxxsmall) / 2) var(--space-xxxsmall);
   min-width: var(--space-small);
   height: var(--space-small);
@@ -51,7 +51,7 @@ a.root:active {
 }
 
 .small {
-  border-radius: var(--radius-small);
+  border-radius: var(--radius-xsmall);
   padding: calc(var(--space-xxxsmall) / 2);
   height: var(--space-xsmall);
   min-width: var(--space-xsmall);
@@ -60,7 +60,7 @@ a.root:active {
 }
 
 .large {
-  border-radius: var(--radius-large);
+  border-radius: var(--radius-medium);
   padding: var(--space-xxxsmall) var(--space-xxsmall);
   min-width: var(--space-medium);
   height: var(--space-medium);

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

@@ -1,6 +1,4 @@
-.root {
-  padding: var(--space-small);
-}
+.root { }
 
 .content {}
 

package/types/components/bundle-modules/bundle-modules.i18n.d.ts

@@ -1,4 +1,4 @@
-export declare const SEARCH = "Search by module name";
+export declare const SEARCH = "Search by module path";
 export declare const CHANGED = "Changed";
 export declare const DUPLICATE = "Duplicate";
 export declare const CHUNK = "Chunk";

package/types/components/delta/delta.d.ts

@@ -1,8 +1,8 @@
 export function Delta({ className, displayValue, deltaType, inverted }: {
-    className: any;
+    className?: string | undefined;
     displayValue: any;
     deltaType: any;
-    inverted: any;
+    inverted?: boolean | undefined;
 }): React.JSX.Element;
 export namespace Delta {
     namespace defaultProps {

package/types/components/metrics-display-selector/metrics-display-selector.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
 import { MetricsDisplayType } from '../../constants';
-import { FlexStack } from '../../layout/flex-stack';
+import { ControlGroup } from '../../ui/control-group';
 interface MetricsDisplaySelectorProps {
     value: MetricsDisplayType;
-    onSelect: (newValue: MetricsDisplayType) => void;
+    groupBy?: string;
+    groups?: Partial<Record<MetricsDisplayType, Array<string>>>;
+    onSelect: (newValue: MetricsDisplayType, groupBy?: string) => void;
 }
-export declare const MetricsDisplaySelector: (props: MetricsDisplaySelectorProps & Omit<React.ComponentProps<typeof FlexStack>, 'onSelect' | 'value'>) => React.JSX.Element;
+export declare const MetricsDisplaySelector: (props: MetricsDisplaySelectorProps & Omit<React.ComponentProps<typeof ControlGroup>, 'onSelect' | 'value'>) => React.JSX.Element;
 export {};

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

@@ -1 +1,2 @@
 export * from './metrics-treemap';
+export { getTreemapNodes, getTreemapNodesGroupedByPath } from './metrics-treemap.utils';

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

@@ -0,0 +1,20 @@
+import type { ReportMetricRow } from '@bundle-stats/utils';
+export interface TreeTotal {
+    current: number;
+    baseline: number;
+}
+export interface TreeLeaf {
+    id: string;
+    label: string;
+    value: number;
+    item: ReportMetricRow;
+}
+export interface Tree {
+    id: string;
+    label: string;
+    value: number;
+    children: TreeNodeChildren;
+    total?: TreeTotal;
+}
+export type TreeNode = Tree | TreeLeaf;
+export type TreeNodeChildren = Array<TreeNode>;

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

@@ -1,9 +1,11 @@
-import React from 'react';
-import type { ReportMetricRow } from '@bundle-stats/utils';
+import React, { type ComponentProps, type ReactNode } from 'react';
+import type { Tree } from './metrics-treemap.constants';
 interface MetricsTreemapProps {
-    items: Array<ReportMetricRow>;
-    emptyMessage?: React.ReactNode;
+    treeNodes: Tree;
+    emptyMessage?: ReactNode;
+    nested?: boolean;
     onItemClick?: (entryId: string) => void;
+    onGroupClick?: (entryId: string) => void;
 }
-export declare const MetricsTreemap: (props: MetricsTreemapProps & React.ComponentProps<'div'>) => React.JSX.Element;
+export declare const MetricsTreemap: (props: MetricsTreemapProps & ComponentProps<'div'>) => React.JSX.Element;
 export {};

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

@@ -0,0 +1,2 @@
+export declare const TILE_GROUP_LABEL = "View children entries";
+export declare const TILE_LABEL = "View entry info";

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

@@ -0,0 +1,5 @@
+import { DeltaType, type MetricRunInfoBaseline, type MetricRunInfo, type ReportMetricRow } from '@bundle-stats/utils';
+import type { Tree } from './metrics-treemap.constants';
+export declare function getTreemapNodes(items: Array<ReportMetricRow>): Tree;
+export declare function getTreemapNodesGroupedByPath(items: Array<ReportMetricRow>): Tree;
+export declare function resolveGroupDeltaType(metricRunInfo?: MetricRunInfo | MetricRunInfoBaseline): DeltaType.NO_CHANGE | DeltaType.NEGATIVE | DeltaType.POSITIVE;

package/types/hooks/metrics-display-type.d.ts

@@ -1,4 +1,10 @@
 import { MetricsDisplayType } from '../constants';
-type UseMetricsDisplayType = [MetricsDisplayType, (value: MetricsDisplayType) => void];
-export declare const useMetricsDisplayType: () => UseMetricsDisplayType;
+type UseMetricsDisplayType = [
+    {
+        value: MetricsDisplayType;
+        groupBy?: string;
+    },
+    (newDisplayType: MetricsDisplayType, newGroupBy?: string) => void
+];
+export declare const useMetricsDisplayType: (groups?: Partial<Record<MetricsDisplayType, Array<string>>>) => UseMetricsDisplayType;
 export {};

package/types/ui/dropdown/dropdown.d.ts

@@ -1,50 +1,15 @@
-export function Dropdown(props: any): React.JSX.Element;
-export namespace Dropdown {
-    export namespace defaultProps {
-        let className: string;
-        let buttonClassName: string;
-        let label: null;
-        let ariaLabel: string;
-        let glyph: null;
-        let disabled: boolean;
-    }
-    export namespace propTypes {
-        let className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        let buttonClassName_1: PropTypes.Requireable<string>;
-        export { buttonClassName_1 as buttonClassName };
-        let label_1: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        export { label_1 as label };
-        let ariaLabel_1: PropTypes.Requireable<string>;
-        export { ariaLabel_1 as ariaLabel };
-        let glyph_1: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        export { glyph_1 as glyph };
-        let disabled_1: PropTypes.Requireable<boolean>;
-        export { disabled_1 as disabled };
-        export let children: PropTypes.Validator<NonNullable<NonNullable<string | PropTypes.ReactElementLike | ((...args: any[]) => any) | null | undefined>>>;
-    }
-    export { Item };
-}
 import React from 'react';
-import PropTypes from 'prop-types';
-declare function Item({ className, isActive, ...restProps }: {
-    [x: string]: any;
-    className?: string | undefined;
-    isActive?: boolean | undefined;
-}): React.JSX.Element;
-declare namespace Item {
-    export namespace propTypes_1 {
-        let className_2: PropTypes.Requireable<string>;
-        export { className_2 as className };
-        export let isActive: PropTypes.Requireable<boolean>;
-    }
-    export { propTypes_1 as propTypes };
-    export namespace defaultProps_1 {
-        let className_3: string;
-        export { className_3 as className };
-        let isActive_1: boolean;
-        export { isActive_1 as isActive };
-    }
-    export { defaultProps_1 as defaultProps };
+import { MenuItem } from 'ariakit/menu';
+interface DropdownItemProps {
+    isActive?: boolean;
+}
+export declare const DropdownItem: (props: DropdownItemProps & React.ComponentProps<typeof MenuItem>) => React.JSX.Element;
+interface DropdownProps {
+    dropdownClassName?: string;
+    label?: React.ReactNode;
+    ariaLabel?: string;
+    glyph?: string;
+    disabled?: boolean;
 }
+export declare const Dropdown: (props: DropdownProps & React.ComponentProps<'div'>) => React.JSX.Element;
 export {};

package/types/ui/dropdown/index.d.ts

@@ -1 +1 @@
-export * from "./dropdown";
+export * from './dropdown';