@bundle-stats/ui 4.8.3 → 4.8.4

package/src/ui/filters/__tests__/filters.utils.ts

@@ -0,0 +1,98 @@
+import { getGroupFiltersLabelSuffix, getInitialValues } from '../filters.utils';
+
+describe('UI / Filters / utils', () => {
+  describe('getGroupFiltersLabelSuffix', () => {
+    test('should return none', () => {
+      const suffix = getGroupFiltersLabelSuffix([
+        { key: 'CSS', label: 'CSS', defaultValue: false },
+        { key: 'JS', label: 'JS', defaultValue: false },
+        { key: 'IMG', label: 'IMG', defaultValue: false },
+        { key: 'MEDIA', label: 'Media', defaultValue: false },
+        { key: 'FONTS', label: 'Fonts', defaultValue: false },
+        { key: 'HTML', label: 'HTML', defaultValue: false },
+        { key: 'OTHER', label: 'Other', defaultValue: false },
+      ]);
+
+      expect(suffix).toEqual('none');
+    });
+
+    test('should return all', () => {
+      const suffix = getGroupFiltersLabelSuffix([
+        { key: 'CSS', label: 'CSS', defaultValue: true },
+        { key: 'JS', label: 'JS', defaultValue: true },
+        { key: 'IMG', label: 'IMG', defaultValue: true },
+        { key: 'MEDIA', label: 'Media', defaultValue: true },
+        { key: 'FONTS', label: 'Fonts', defaultValue: true },
+        { key: 'HTML', label: 'HTML', defaultValue: true },
+        { key: 'OTHER', label: 'Other', defaultValue: true },
+      ]);
+
+      expect(suffix).toEqual('all');
+    });
+    test('should return checked filters', () => {
+      const suffix = getGroupFiltersLabelSuffix([
+        { key: 'CSS', label: 'CSS', defaultValue: true },
+        { key: 'JS', label: 'JS', defaultValue: true },
+        { key: 'IMG', label: 'IMG', defaultValue: false },
+        { key: 'MEDIA', label: 'Media', defaultValue: false },
+        { key: 'FONTS', label: 'Fonts', defaultValue: false },
+        { key: 'HTML', label: 'HTML', defaultValue: false },
+        { key: 'OTHER', label: 'Other', defaultValue: false },
+      ]);
+
+      expect(suffix).toEqual('CSS, JS');
+    });
+
+    test('should crop last filter if need it', () => {
+      const suffix = getGroupFiltersLabelSuffix([
+        { key: 'CSS', label: 'CSS', defaultValue: true },
+        { key: 'JS', label: 'JS', defaultValue: true },
+        { key: 'IMG', label: 'IMG', defaultValue: true },
+        { key: 'MEDIA', label: 'Meeeeeeedia', defaultValue: true },
+        { key: 'FONTS', label: 'Fonts', defaultValue: false },
+        { key: 'HTML', label: 'HTML', defaultValue: false },
+        { key: 'OTHER', label: 'Other', defaultValue: false },
+      ]);
+
+      expect(suffix).toEqual('CSS, JS, IMG, Mee...');
+    });
+
+    test('should crop and add remaining filters count', () => {
+      const suffix = getGroupFiltersLabelSuffix([
+        { key: 'CSS', label: 'CSS', defaultValue: true },
+        { key: 'JS', label: 'JS', defaultValue: true },
+        { key: 'IMG', label: 'IMG', defaultValue: true },
+        { key: 'MEDIA', label: 'Media', defaultValue: true },
+        { key: 'FONTS', label: 'Fonts', defaultValue: true },
+        { key: 'HTML', label: 'HTML', defaultValue: true },
+        { key: 'OTHER', label: 'Other', defaultValue: false },
+      ]);
+
+      expect(suffix).toEqual('CSS, JS, IMG, Media +2');
+    });
+  });
+
+  describe('getInitialValues', () => {
+    test('should return initial values', () => {
+      const initialValues = getInitialValues('', {
+        changed: {
+          label: 'Changed',
+          defaultValue: false,
+        },
+        fileType: {
+          label: 'File type',
+          children: [
+            { key: 'CSS', label: 'CSS', defaultValue: false },
+            { key: 'JS', label: 'JS', defaultValue: true },
+          ],
+        },
+      });
+
+      expect(initialValues).toEqual({
+        changed: false,
+        'fileType.CSS': false,
+        'fileType.JS': true,
+      });
+    });
+  });
+});

package/src/ui/filters/filters.i18n.ts

@@ -0,0 +1,2 @@
+export const CLEAR = 'Clear all';
+export const CHECK = 'Check all';

package/src/ui/filters/{filters.jsx → filters.tsx}

@@ -1,17 +1,26 @@
 import React, { useCallback } from 'react';
-import PropTypes from 'prop-types';
 import cx from 'classnames';
 
+import type { FilterFieldsData, FilterGroupFieldData } from '../../types';
 import { FlexStack } from '../../layout/flex-stack';
 import { Dropdown } from '../dropdown';
+import * as I18N from './filters.i18n';
 import { getGroupFiltersLabelSuffix, LABELS } from './filters.utils';
 import css from './filters.module.css';
 
-const Filter = (props) => {
+interface FilterProps extends React.ComponentProps<'input'> {
+  as?: React.ElementType;
+  buttonClassName?: string;
+  label: string;
+  name: string;
+  getOnOnlyClick?: (name: string) => () => void;
+}
+
+const Filter = (props: FilterProps) => {
   const {
-    className,
+    className = '',
     as: Component = 'div',
-    buttonClassName,
+    buttonClassName = '',
     label,
     name,
     getOnOnlyClick,
@@ -24,16 +33,21 @@ const Filter = (props) => {
   return (
     <Component className={rootClassName}>
       {/* eslint-disable */}
-      <FlexStack space="xxxsmall" alignItems="center" as="label" className={cx(css.filterCheckbox, buttonClassName)}>
+      <FlexStack
+        space="xxxsmall"
+        alignItems="center"
+        as="label"
+        className={cx(css.filterCheckbox, buttonClassName)}
+      >
         {/* eslint-enabled */}
-        <input className={css.filterInput} type="checkbox" id={id} name={name} {...inputProps} />
-        <span className={css.filterLabel} title={label}>
+        <input type="checkbox" id={id} name={name} {...inputProps} className={css.filterInput} />
+        <span title={label} className={css.filterLabel}>
           {label}
         </span>
       </FlexStack>
 
       {getOnOnlyClick && (
-        <button className={css.filterOnlyButton} type="button" onClick={getOnOnlyClick(name)}>
+        <button type="button" onClick={getOnOnlyClick(name)} className={css.filterOnlyButton}>
           only
         </button>
       )}
@@ -41,34 +55,30 @@ const Filter = (props) => {
   );
 };
 
-Filter.propTypes = {
-  className: PropTypes.string,
-  as: PropTypes.elementType,
-  buttonClassName: PropTypes.string,
-  name: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  getOnOnlyClick: PropTypes.func,
-};
-
-Filter.defaultProps = {
-  className: '',
-  as: 'div',
-  buttonClassName: '',
-  getOnOnlyClick: null,
-};
+interface FilterGroupProps extends React.ComponentProps<'div'> {
+  buttonClassName?: string;
+  groupKey: string;
+  data: FilterGroupFieldData;
+  values: Record<string, boolean>;
+  onCheckboxChange: FilterProps['onChange'];
+  toggleFilters: (newFilters: Record<string, boolean>) => void;
+}
 
-const FilterGroup = (props) => {
-  const { className, buttonClassName, groupKey, data, values, onCheckboxChange, toggleFilters } =
-    props;
+const FilterGroup = (props: FilterGroupProps) => {
+  const {
+    className = '',
+    buttonClassName = '',
+    groupKey,
+    data,
+    values,
+    onCheckboxChange,
+    toggleFilters,
+  } = props;
 
-  const { label: groupLabel, ...groupData } = data;
+  const { label: groupLabel, children: groupItems } = data;
 
-  const groupItems = Object.entries(groupData);
-  const groupCheckboxes = groupItems.filter(
-    ([itemKey, item]) => typeof item?.defaultValue !== 'undefined',
-  );
-  const areAllGroupItemsChecked = groupCheckboxes
-    .map(([itemKey]) => values?.[`${groupKey}.${itemKey}`])
+  const areAllGroupItemsChecked = groupItems
+    .map(({ key: itemKey }) => values?.[`${groupKey}.${itemKey}`])
     .reduce((agg, val) => agg && val, true);
 
   const filterSuffix = getGroupFiltersLabelSuffix(groupItems);
@@ -82,10 +92,10 @@ const FilterGroup = (props) => {
   );
 
   const getOnGroupCheck =
-    (value, overrides = {}) =>
+    (value: boolean, overrides = {}) =>
     () => {
-      const newFilters = groupCheckboxes.reduce(
-        (agg, [itemKey]) => ({
+      const newFilters = groupItems.reduce(
+        (agg, { key: itemKey }) => ({
           ...agg,
           [`${groupKey}.${itemKey}`]: value,
         }),
@@ -105,11 +115,11 @@ const FilterGroup = (props) => {
       label={dropdownLabel}
       ariaLabel={`${groupLabel}: ${filterSuffix}`}
     >
-      {({ MenuItem, menu, menuItemClassName }) => {
+      {({ MenuItem, menuItemClassName }) => {
         return (
           <>
             <div className={css.filterGroupItems}>
-              {groupItems.map(([itemKey, itemData]) => {
+              {groupItems.map(({ key: itemKey, ...itemData }) => {
                 const id = [groupKey, itemKey].join('.');
                 const getOnOnlyClick = () => getOnGroupCheck(false, { [id]: true });
 
@@ -137,7 +147,7 @@ const FilterGroup = (props) => {
                   type="button"
                   onClick={getOnGroupCheck(false)}
                 >
-                  Clear all
+                  {I18N.CLEAR}
                 </MenuItem>
               ) : (
                 <MenuItem
@@ -147,7 +157,7 @@ const FilterGroup = (props) => {
                   type="button"
                   onClick={getOnGroupCheck(true)}
                 >
-                  Check all
+                  {I18N.CHECK}
                 </MenuItem>
               )}
             </div>
@@ -158,38 +168,30 @@ const FilterGroup = (props) => {
   );
 };
 
-FilterGroup.propTypes = {
-  className: PropTypes.string,
-  buttonClassName: PropTypes.string,
-  groupKey: PropTypes.string.isRequired,
-  data: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-  values: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-  onCheckboxChange: PropTypes.func.isRequired,
-  toggleFilters: PropTypes.func.isRequired,
-};
-
-FilterGroup.defaultProps = {
-  className: '',
-  buttonClassName: '',
-};
+interface FiltersProps extends React.ComponentProps<'div'> {
+  values: Record<string, boolean>;
+  filters: FilterFieldsData;
+  toggleFilter: (name: string, value: boolean) => void;
+  toggleFilters: FilterGroupProps['toggleFilters'];
+}
 
-export const Filters = (props) => {
-  const { className, values, filters, toggleFilter, toggleFilters } = props;
+export const Filters = (props: FiltersProps) => {
+  const { className = '', values, filters, toggleFilter, toggleFilters } = props;
 
   const onCheckboxChange = useCallback(
-    (event) => {
+    (event: any) => {
       const { name } = event.target;
       toggleFilter(name, !values[name]);
     },
-    [toggleFilter, values]
+    [toggleFilter, values],
   );
   const rootClassName = cx(css.root, className);
 
   return (
     <form className={rootClassName}>
-      <FlexStack space="xxsmall" alignItems="flex-start" className={css.items}>
+      <FlexStack space="xxsmall" alignItems="top" className={css.items}>
         {Object.entries(filters).map(([name, data]) => {
-          if (typeof data?.defaultValue !== 'undefined') {
+          if ('defaultValue' in data) {
             return (
               <Filter
                 key={name}
@@ -199,7 +201,7 @@ export const Filters = (props) => {
                 label={data.label}
                 onChange={onCheckboxChange}
                 checked={values[name]}
-                disabled={data.disabled}
+                disabled={data.disabled as boolean}
               />
             );
           }
@@ -221,14 +223,3 @@ export const Filters = (props) => {
     </form>
   );
 };
-
-Filters.defaultProps = {
-  className: '',
-};
-
-Filters.propTypes = {
-  className: PropTypes.string,
-  values: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-  filters: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-  toggleFilter: PropTypes.func.isRequired,
-};

package/src/ui/filters/{filters.utils.js → filters.utils.ts}

@@ -1,3 +1,5 @@
+import type { FilterFieldData, FilterFieldsData, FilterGroupFieldData } from '../../types';
+
 const FILTER_SUFFIX_MAX_LENGTH = 18;
 const ELLIPSES = '...';
 const JOIN = ', ';
@@ -7,14 +9,9 @@ export const LABELS = {
   ALL: 'all',
 };
 
-/**
- * @param {Array<Array>} filters
- * @return {String}
- */
-export const getGroupFiltersLabelSuffix = (filters) => {
+export const getGroupFiltersLabelSuffix = (filters: FilterGroupFieldData['children']): string => {
   const filterCount = filters.length;
-  // eslint-disable-next-line no-unused-vars
-  const checkedFilters = filters.filter(([_, { defaultValue }]) => defaultValue);
+  const checkedFilters = filters.filter(({ defaultValue }) => defaultValue);
   const filterCheckedCount = checkedFilters.length;
 
   if (filterCheckedCount === 0) {
@@ -26,7 +23,7 @@ export const getGroupFiltersLabelSuffix = (filters) => {
   }
 
   // eslint-disable-next-line no-unused-vars
-  const checkedFilterLabels = checkedFilters.map(([_, { label }]) => label);
+  const checkedFilterLabels = checkedFilters.map(({ label }) => label);
 
   let suffix = '';
   let inlinedLabelCount = 0;
@@ -65,23 +62,43 @@ export const getGroupFiltersLabelSuffix = (filters) => {
   return `${suffix}${skippedLabels > 0 ? ` +${skippedLabels}` : ''}`;
 };
 
-export const getInitialValues = (key, filters) => {
-  if (typeof filters?.defaultValue !== 'undefined') {
+export const getInitialValues = (
+  key: string,
+  filtersData: FilterFieldsData | FilterFieldData | FilterGroupFieldData | string,
+): Record<string, boolean> => {
+  if (typeof filtersData !== 'object') {
+    return {};
+  }
+
+  if ('defaultValue' in filtersData) {
     return {
-      [key]: filters.defaultValue,
+      [key]: (filtersData as FilterFieldData).defaultValue,
     };
   }
 
-  if (typeof filters === 'object') {
-    return Object.entries(filters).map(([groupKey, groupFilters]) => getInitialValues(
-      [...key ? [key] : [], groupKey].join('.'),
-      groupFilters,
-    )).reduce((agg, current) => ({
-      ...agg,
-      ...current,
-    }), {});
+  if ('children' in filtersData) {
+    const result = {} as Record<string, boolean>;
+
+    (filtersData as FilterGroupFieldData).children.forEach(({ key: childKey, defaultValue }) => {
+      const fullKey = [...(key ? [key] : []), childKey].join('.');
+      result[fullKey] = defaultValue;
+    });
+
+    return result;
   }
 
-  return {};
-};
+  let result = {};
 
+  Object.entries(filtersData).forEach(([groupKey, groupFilters]) => {
+    if (typeof groupFilters === 'object') {
+      const fullKey = [...(key ? [key] : []), groupKey].join('.');
+      const groupInitialValues = getInitialValues(fullKey, groupFilters as any);
+      result = {
+        ...result,
+        ...groupInitialValues,
+      };
+    }
+  });
+
+  return result;
+};

package/src/ui/filters/{index.jsx → index.tsx}

@@ -1,12 +1,21 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
 import isEqual from 'lodash/isEqual';
 import merge from 'lodash/merge';
 
+import { FilterFieldsData } from '../../types';
 import { getInitialValues } from './filters.utils';
 import { Filters as BaseComponent } from './filters';
 
-export const Filters = (props) => {
+interface FiltersProps
+  extends Omit<
+    React.ComponentProps<typeof BaseComponent>,
+    'onChange' | 'filters' | 'values' | 'toggleFilter' | 'toggleFilters'
+  > {
+  onChange?: (newValues: Record<string, boolean>) => void;
+  filters: FilterFieldsData;
+}
+
+export const Filters = (props: FiltersProps) => {
   const { onChange, filters, ...restProps } = props;
   const [values, setValues] = useState(getInitialValues('', filters));
 
@@ -26,7 +35,7 @@ export const Filters = (props) => {
   );
 
   const toggleFilter = useCallback(
-    (key, value) => {
+    (key: string, value: boolean) => {
       const nextValues = merge({}, values, { [key]: value });
       setValues(nextValues);
 
@@ -34,11 +43,11 @@ export const Filters = (props) => {
         onChange(nextValues);
       }
     },
-    [onChange, setValues, values]
+    [onChange, setValues, values],
   );
 
   const toggleFilters = useCallback(
-    (newFilters) => {
+    (newFilters: Record<string, boolean>) => {
       const nextValues = merge({}, values, newFilters);
       setValues(nextValues);
 
@@ -59,15 +68,3 @@ export const Filters = (props) => {
     />
   );
 };
-
-Filters.defaultProps = {
-  onChange: null,
-};
-
-Filters.propTypes = {
-  /** Filter config */
-  filters: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-
-  /** OnChange handler */
-  onChange: PropTypes.func,
-};

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

@@ -1,64 +1,23 @@
-export function BundleModules({ className, jobs, items, chunks, totalRowCount, updateFilters, resetFilters, resetAllFilters, filters, entryId, sort, updateSort, search, updateSearch, hasActiveFilters, customComponentLink: CustomComponentLink, allItems, hideEntryInfo, }: {
-    className: any;
-    jobs: any;
-    items: any;
-    chunks: any;
-    totalRowCount: any;
-    updateFilters: any;
-    resetFilters: any;
-    resetAllFilters: any;
-    filters: any;
-    entryId: any;
+import React from 'react';
+import type { SortAction } from '../../types';
+import type { Chunk, Job, ReportMetricModuleRow } from './bundle-modules.types';
+interface BundleModulesProps extends React.ComponentProps<'div'> {
+    jobs?: Array<Job>;
+    items?: Array<ReportMetricModuleRow>;
+    allItems?: Array<ReportMetricModuleRow>;
+    chunks?: Array<Chunk>;
+    totalRowCount: number;
+    updateFilters: () => void;
+    resetFilters: () => void;
+    resetAllFilters: () => void;
+    filters: Record<string, boolean>;
     sort: any;
-    updateSort: any;
-    search: any;
-    updateSearch: any;
-    hasActiveFilters: any;
-    customComponentLink: any;
-    allItems: any;
-    hideEntryInfo: any;
-}): React.JSX.Element;
-export namespace BundleModules {
-    namespace defaultProps {
-        export let className: string;
-        export let items: never[];
-        export let jobs: never[];
-        export let totalRowCount: number;
-        export let hasActiveFilters: boolean;
-        export { ComponentLink as customComponentLink };
-    }
-    namespace propTypes {
-        let className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        let items_1: PropTypes.Requireable<any[]>;
-        export { items_1 as items };
-        let jobs_1: PropTypes.Requireable<any[]>;
-        export { jobs_1 as jobs };
-        export let chunks: PropTypes.Validator<(PropTypes.InferProps<{
-            id: PropTypes.Requireable<string>;
-            name: PropTypes.Requireable<string>;
-        }> | null | undefined)[]>;
-        let totalRowCount_1: PropTypes.Requireable<number>;
-        export { totalRowCount_1 as totalRowCount };
-        export let updateFilters: PropTypes.Validator<(...args: any[]) => any>;
-        export let resetFilters: PropTypes.Validator<(...args: any[]) => any>;
-        export let resetAllFilters: PropTypes.Validator<(...args: any[]) => any>;
-        export let filters: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
-            changed: PropTypes.Requireable<boolean>;
-        }>>>;
-        let hasActiveFilters_1: PropTypes.Requireable<boolean>;
-        export { hasActiveFilters_1 as hasActiveFilters };
-        export let sort: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
-            sortBy: PropTypes.Requireable<string>;
-            direction: PropTypes.Requireable<string>;
-        }>>>;
-        export let updateSort: PropTypes.Validator<(...args: any[]) => any>;
-        export let search: PropTypes.Validator<string>;
-        export let updateSearch: PropTypes.Validator<(...args: any[]) => any>;
-        export let customComponentLink: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-        export let hideEntryInfo: PropTypes.Validator<(...args: any[]) => any>;
-    }
+    updateSort: ({ field, direction }: SortAction) => void;
+    search: string;
+    updateSearch: (newSerarch: string) => void;
+    entryId?: string;
+    hideEntryInfo: () => void;
+    customComponentLink: React.ElementType;
 }
-import React from 'react';
-import { ComponentLink } from '../component-link';
-import PropTypes from 'prop-types';
+export declare const BundleModules: (props: BundleModulesProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,8 @@
+export declare const SEARCH = "Search by module name";
+export declare const CHANGED = "Changed";
+export declare const DUPLICATE = "Duplicate";
+export declare const CHUNK = "Chunk";
+export declare const FILE_TYPE = "File type";
+export declare const SOURCE = "Source";
+export declare const SOURCE_FIRST_PARTY = "First party";
+export declare const SOURCE_THIRD_PARTY = "Third party";

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

@@ -1,5 +1,28 @@
-export function addRowFlags(row: any): any;
-export function getCustomSort(item: any): any[];
-export function generateGetRowFilter({ chunkIds }: {
-    chunkIds: any;
-}): (filters: any) => (row: any) => boolean;
+import type { ReportMetricRow } from '@bundle-stats/utils';
+import { type Module } from '@bundle-stats/utils/lib-esm/webpack';
+import type { FilterFieldsData } from '../../types';
+import type { Chunk, Job, ReportMetricModuleRow } from './bundle-modules.types';
+export declare const addRowFlags: (row: Module & ReportMetricRow) => ReportMetricModuleRow;
+export declare const getCustomSort: (item: ReportMetricRow) => (string | boolean)[];
+export declare const generateGetRowFilter: ({ chunkIds }: {
+    chunkIds: Array<string>;
+}) => (filters: Record<string, unknown>) => (row: ReportMetricModuleRow) => boolean;
+export declare const extractChunkData: (jobs: Array<Job>) => {
+    chunks: Chunk[];
+    chunkIds: string[];
+};
+export declare const generateFilters: (chunkIds: Array<string>, multipleJobs: boolean) => {
+    defaultFilters: {
+        [x: string]: boolean;
+    };
+    allEntriesFilters: {
+        [x: string]: boolean;
+    };
+};
+interface GetFiltersFormDataParams {
+    filters: Record<string, boolean>;
+    chunks: Array<Chunk>;
+    compareMode: boolean;
+}
+export declare const generateFilterFieldsData: (params: GetFiltersFormDataParams) => FilterFieldsData;
+export {};

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

@@ -1,23 +1,14 @@
-export function BundleModules(props: any): React.JSX.Element;
-export namespace BundleModules {
-    namespace propTypes {
-        let jobs: PropTypes.Validator<(object | null | undefined)[]>;
-        let filters: PropTypes.Requireable<object>;
-        let search: PropTypes.Requireable<string>;
-        let sortBy: PropTypes.Requireable<string>;
-        let direction: PropTypes.Requireable<string>;
-        let setState: PropTypes.Validator<(...args: any[]) => any>;
-    }
-    namespace defaultProps {
-        let filters_1: undefined;
-        export { filters_1 as filters };
-        let search_1: undefined;
-        export { search_1 as search };
-        let sortBy_1: undefined;
-        export { sortBy_1 as sortBy };
-        let direction_1: undefined;
-        export { direction_1 as direction };
-    }
-}
 import React from 'react';
-import PropTypes from 'prop-types';
+import type { SortAction } from '../../types';
+import { BundleModules as BaseComponent } from './bundle-modules';
+import * as types from './bundle-modules.types';
+interface BundleModulesProps extends Omit<React.ComponentProps<typeof BaseComponent>, 'jobs' | 'items' | 'chunks' | 'updateFilters' | 'resetFilters' | 'resetAllFilters' | 'filters' | 'sort' | 'updateSort' | 'search' | 'updateSearch' | 'entryId' | 'allItems' | 'totalRowCount' | 'hideEntryInfo'> {
+    jobs: Array<types.Job>;
+    filters: Record<string, boolean>;
+    search?: string;
+    setState: (params: any) => void;
+    sortBy?: string;
+    direction?: SortAction['direction'];
+}
+export declare const BundleModules: (props: BundleModulesProps) => React.JSX.Element;
+export {};

package/types/components/entry-info/entry-info.i18n.d.ts

@@ -0,0 +1,3 @@
+export declare const PATH = "Path";
+export declare const CLOSE_TITLE = "Close side panel";
+export declare const SIZE = "Size";

package/types/components/job-name/job-name.d.ts

@@ -1,6 +1,6 @@
 export function JobName({ as: Component, title, internalBuildNumber, children, ...restProps }: {
     [x: string]: any;
-    as: any;
+    as?: string | undefined;
     title: any;
     internalBuildNumber: any;
     children: any;