@bundle-stats/ui 4.23.0-beta.4 → 4.23.0-beta.5

package/src/ui/filters/filters.tsx

@@ -100,9 +100,8 @@ const FilterDropdownItem = (props: FilterDropdownItemProps) => {
         className={css.filterGroupItemFilter}
       />
       <Button
-        kind="info"
         solid
-        size="small"
+        size="xsmall"
         type="button"
         onClick={onOnlyClick}
         disabled={disabled}
@@ -189,20 +188,26 @@ const FilterGroup = (props: FilterGroupProps) => {
       )}
       <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 = getGroupItemKey(groupKey, itemKey);

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

@@ -33,21 +33,28 @@
   border-top: 0;
 }
 
-.root tbody td a {
+.root tbody a {
   color: inherit;
   text-decoration: none;
 }
 
-.root tbody td a:focus,
-.root tbody td a:active,
-.root tbody td a:hover {
+.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: var(--transition-out);
+}
+
 .root tbody tr:hover th,
 .root tbody tr:hover td {
   background-color: var(--color-highlight-warning);
+  transition: var(--transition-in);
 }
 
 .empty {

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

@@ -39,7 +39,7 @@
 .item:hover::after,
 .item:active::after,
 .item:focus::after {
-  background: currentColor;
+  opacity: 1;
   transition: var(--transition-in);
 }
 

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/layout/flex-stack/flex-stack.d.ts

@@ -1,11 +1,15 @@
 import React from 'react';
 import { SPACES } from '../../tokens';
 type SpaceValue = (typeof SPACES)[number];
-interface FlexStackProps<T extends React.ElementType> {
+export type FlexStackProps<T extends React.ElementType> = {
     as?: T;
+    gap?: SpaceValue;
     space?: SpaceValue;
     inline?: boolean;
+    direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+    wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
     alignItems?: 'top' | 'center' | 'bottom';
-}
+    justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+};
 export declare const FlexStack: <T extends React.ElementType = "div">(props: FlexStackProps<T> & Omit<React.ComponentProps<T>, keyof FlexStackProps<T>>) => React.JSX.Element;
 export {};

package/types/ui/button/button.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Icon as BaseIcon } from '../icon';
 export declare const BUTTON_SIZE: {
+    readonly XSMALL: "xsmall";
     readonly SMALL: "small";
     readonly MEDIUM: "medium";
     readonly LARGE: "large";