@bundle-stats/ui 4.13.0-beta.2 → 4.13.0-beta.21

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';

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

@@ -1,18 +1,13 @@
 import React from 'react';
 import type { FilterFieldsData, FilterGroupFieldData } from '../../types';
-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;
 }
 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;
 }
 interface FiltersProps extends React.ComponentProps<'div'> {

package/types/ui/icon/icon.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 declare const ICONS: {
     readonly ARROW: "arrow";
-    readonly ARROW_RIGHT_CIRLCE: "arrow-right-circle";
+    readonly ARROW_RIGHT_CIRCLE: "arrow-right-circle";
     readonly CANCEL: "close";
     readonly CHEVRON_DOWN: "chevron-down";
     readonly CHEVRON_UP: "chevron-up";
+    readonly CHECK: "check";
     readonly CLOSE: "close";
     readonly CLOCK: "clock";
     readonly COMMIT: "commit";
@@ -36,10 +37,11 @@ export declare const Icon: {
     (props: IconProps & React.ComponentProps<'span'>): React.JSX.Element;
     ICONS: {
         readonly ARROW: "arrow";
-        readonly ARROW_RIGHT_CIRLCE: "arrow-right-circle";
+        readonly ARROW_RIGHT_CIRCLE: "arrow-right-circle";
         readonly CANCEL: "close";
         readonly CHEVRON_DOWN: "chevron-down";
         readonly CHEVRON_UP: "chevron-up";
+        readonly CHECK: "check";
         readonly CLOSE: "close";
         readonly CLOCK: "clock";
         readonly COMMIT: "commit";

package/types/ui/loader/loader.d.ts

@@ -1,7 +1,7 @@
 export function Loader({ className, size, ...restProps }: {
     [x: string]: any;
-    className: any;
-    size: any;
+    className?: string | undefined;
+    size?: string | undefined;
 }): React.JSX.Element;
 export namespace Loader {
     let SIZE_SMALL: string;

package/lib/components/bundle-assets-totals/bundle-assets-totals.module.css

@@ -1,7 +0,0 @@
-.title {
-  color: var(--color-text-light);
-}
-
-.toolbar {
-  border-bottom: 1px solid var(--color-outline);
-}

package/lib/components/total-size-type-title/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/total-size-type-title/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0DAAwC"}

package/lib/components/total-size-type-title/total-size-type-title.js

@@ -1,32 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TotalSizeTypeTitle = void 0;
-const react_1 = __importDefault(require("react"));
-const prop_types_1 = __importDefault(require("prop-types"));
-const classnames_1 = __importDefault(require("classnames"));
-const config_json_1 = __importDefault(require("../../config.json"));
-const i18n_1 = __importDefault(require("../../i18n"));
-const flex_stack_1 = require("../../layout/flex-stack");
-const stack_1 = require("../../layout/stack");
-const button_1 = require("../../ui/button");
-const icon_1 = require("../../ui/icon");
-const hover_card_1 = require("../../ui/hover-card");
-const total_size_type_title_module_css_1 = __importDefault(require("./total-size-type-title.module.css"));
-const TotalSizeTypeTitle = ({ className }) => (react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxxsmall", alignItems: "center", className: (0, classnames_1.default)(total_size_type_title_module_css_1.default.root, className) },
-    react_1.default.createElement("span", { className: total_size_type_title_module_css_1.default.text }, i18n_1.default.ASSET_TOTALS),
-    react_1.default.createElement(hover_card_1.HoverCard, { label: react_1.default.createElement(icon_1.Icon, { glyph: icon_1.Icon.ICONS.HELP }), anchorClassName: total_size_type_title_module_css_1.default.anchor },
-        react_1.default.createElement(stack_1.Stack, { space: "xxxsmall" },
-            react_1.default.createElement("p", null, i18n_1.default.ASSET_TOTALS_INFO),
-            react_1.default.createElement("p", null,
-                react_1.default.createElement(button_1.Button, { kind: "primary", type: "button", onClick: () => window.open(config_json_1.default.documentation.assets), className: total_size_type_title_module_css_1.default.readMoreLink }, i18n_1.default.READ_MORE))))));
-exports.TotalSizeTypeTitle = TotalSizeTypeTitle;
-exports.TotalSizeTypeTitle.propTypes = {
-    className: prop_types_1.default.string,
-};
-exports.TotalSizeTypeTitle.defaultProps = {
-    className: '',
-};
-//# sourceMappingURL=total-size-type-title.js.map

package/lib/components/total-size-type-title/total-size-type-title.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"total-size-type-title.js","sourceRoot":"","sources":["../../../src/components/total-size-type-title/total-size-type-title.jsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAAmC;AACnC,4DAA4B;AAE5B,oEAAuC;AACvC,sDAA8B;AAC9B,wDAAoD;AACpD,8CAA2C;AAC3C,4CAAyC;AACzC,wCAAqC;AACrC,oDAAgD;AAChD,0GAAqD;AAE9C,MAAM,kBAAkB,GAAG,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CACnD,8BAAC,sBAAS,IAAC,KAAK,EAAC,UAAU,EAAC,UAAU,EAAC,QAAQ,EAAC,SAAS,EAAE,IAAA,oBAAE,EAAC,0CAAG,CAAC,IAAI,EAAE,SAAS,CAAC;IAChF,wCAAM,SAAS,EAAE,0CAAG,CAAC,IAAI,IAAG,cAAI,CAAC,YAAY,CAAQ;IACrD,8BAAC,sBAAS,IAAC,KAAK,EAAE,8BAAC,WAAI,IAAC,KAAK,EAAE,WAAI,CAAC,KAAK,CAAC,IAAI,GAAI,EAAE,eAAe,EAAE,0CAAG,CAAC,MAAM;QAC7E,8BAAC,aAAK,IAAC,KAAK,EAAC,UAAU;YACrB,yCAAI,cAAI,CAAC,iBAAiB,CAAK;YAC/B;gBACE,8BAAC,eAAM,IACL,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,qBAAM,CAAC,aAAa,CAAC,MAAM,CAAC,EACvD,SAAS,EAAE,0CAAG,CAAC,YAAY,IAE1B,cAAI,CAAC,SAAS,CACR,CACP,CACE,CACE,CACF,CACb,CAAC;AAnBW,QAAA,kBAAkB,sBAmB7B;AAEF,0BAAkB,CAAC,SAAS,GAAG;IAC7B,SAAS,EAAE,oBAAS,CAAC,MAAM;CAC5B,CAAC;AAEF,0BAAkB,CAAC,YAAY,GAAG;IAChC,SAAS,EAAE,EAAE;CACd,CAAC"}

package/lib/components/total-size-type-title/total-size-type-title.module.css

@@ -1,14 +0,0 @@
-.root {
-  color: var(--color-text-light);
-}
-
-.text {
-  font-weight: bold;
-  font-size: var(--size-medium);
-  line-height: var(--space-medium);
-  text-transform: uppercase;
-}
-
-.anchor {
-  display: block;
-}

package/lib-esm/components/bundle-assets-totals/bundle-assets-totals.module.css

@@ -1,7 +0,0 @@
-.title {
-  color: var(--color-text-light);
-}
-
-.toolbar {
-  border-bottom: 1px solid var(--color-outline);
-}

package/lib-esm/components/total-size-type-title/index.js

@@ -1,2 +0,0 @@
-export * from './total-size-type-title';
-//# sourceMappingURL=index.js.map

package/lib-esm/components/total-size-type-title/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/total-size-type-title/index.js"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC"}

package/lib-esm/components/total-size-type-title/total-size-type-title.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import config from '../../config.json';
-import I18N from '../../i18n';
-import { FlexStack } from '../../layout/flex-stack';
-import { Stack } from '../../layout/stack';
-import { Button } from '../../ui/button';
-import { Icon } from '../../ui/icon';
-import { HoverCard } from '../../ui/hover-card';
-import css from './total-size-type-title.module.css';
-export const TotalSizeTypeTitle = ({ className }) => (React.createElement(FlexStack, { space: "xxxsmall", alignItems: "center", className: cx(css.root, className) },
-    React.createElement("span", { className: css.text }, I18N.ASSET_TOTALS),
-    React.createElement(HoverCard, { label: React.createElement(Icon, { glyph: Icon.ICONS.HELP }), anchorClassName: css.anchor },
-        React.createElement(Stack, { space: "xxxsmall" },
-            React.createElement("p", null, I18N.ASSET_TOTALS_INFO),
-            React.createElement("p", null,
-                React.createElement(Button, { kind: "primary", type: "button", onClick: () => window.open(config.documentation.assets), className: css.readMoreLink }, I18N.READ_MORE))))));
-TotalSizeTypeTitle.propTypes = {
-    className: PropTypes.string,
-};
-TotalSizeTypeTitle.defaultProps = {
-    className: '',
-};
-//# sourceMappingURL=total-size-type-title.js.map

package/lib-esm/components/total-size-type-title/total-size-type-title.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"total-size-type-title.js","sourceRoot":"","sources":["../../../src/components/total-size-type-title/total-size-type-title.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,IAAI,MAAM,YAAY,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,GAAG,MAAM,oCAAoC,CAAC;AAErD,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CACnD,oBAAC,SAAS,IAAC,KAAK,EAAC,UAAU,EAAC,UAAU,EAAC,QAAQ,EAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC;IAChF,8BAAM,SAAS,EAAE,GAAG,CAAC,IAAI,IAAG,IAAI,CAAC,YAAY,CAAQ;IACrD,oBAAC,SAAS,IAAC,KAAK,EAAE,oBAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAI,EAAE,eAAe,EAAE,GAAG,CAAC,MAAM;QAC7E,oBAAC,KAAK,IAAC,KAAK,EAAC,UAAU;YACrB,+BAAI,IAAI,CAAC,iBAAiB,CAAK;YAC/B;gBACE,oBAAC,MAAM,IACL,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,EACvD,SAAS,EAAE,GAAG,CAAC,YAAY,IAE1B,IAAI,CAAC,SAAS,CACR,CACP,CACE,CACE,CACF,CACb,CAAC;AAEF,kBAAkB,CAAC,SAAS,GAAG;IAC7B,SAAS,EAAE,SAAS,CAAC,MAAM;CAC5B,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG;IAChC,SAAS,EAAE,EAAE;CACd,CAAC"}

package/lib-esm/components/total-size-type-title/total-size-type-title.module.css

@@ -1,14 +0,0 @@
-.root {
-  color: var(--color-text-light);
-}
-
-.text {
-  font-weight: bold;
-  font-size: var(--size-medium);
-  line-height: var(--space-medium);
-  text-transform: uppercase;
-}
-
-.anchor {
-  display: block;
-}

package/src/components/bundle-assets-totals/bundle-assets-totals.module.css

@@ -1,7 +0,0 @@
-.title {
-  color: var(--color-text-light);
-}
-
-.toolbar {
-  border-bottom: 1px solid var(--color-outline);
-}

package/src/components/total-size-type-title/index.js

@@ -1 +0,0 @@
-export * from './total-size-type-title';

package/src/components/total-size-type-title/total-size-type-title.jsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-
-import config from '../../config.json';
-import I18N from '../../i18n';
-import { FlexStack } from '../../layout/flex-stack';
-import { Stack } from '../../layout/stack';
-import { Button } from '../../ui/button';
-import { Icon } from '../../ui/icon';
-import { HoverCard } from '../../ui/hover-card';
-import css from './total-size-type-title.module.css';
-
-export const TotalSizeTypeTitle = ({ className }) => (
-  <FlexStack space="xxxsmall" alignItems="center" className={cx(css.root, className)}>
-    <span className={css.text}>{I18N.ASSET_TOTALS}</span>
-    <HoverCard label={<Icon glyph={Icon.ICONS.HELP} />} anchorClassName={css.anchor}>
-      <Stack space="xxxsmall">
-        <p>{I18N.ASSET_TOTALS_INFO}</p>
-        <p>
-          <Button
-            kind="primary"
-            type="button"
-            onClick={() => window.open(config.documentation.assets)}
-            className={css.readMoreLink}
-          >
-            {I18N.READ_MORE}
-          </Button>
-        </p>
-      </Stack>
-    </HoverCard>
-  </FlexStack>
-);
-
-TotalSizeTypeTitle.propTypes = {
-  className: PropTypes.string,
-};
-
-TotalSizeTypeTitle.defaultProps = {
-  className: '',
-};

package/src/components/total-size-type-title/total-size-type-title.module.css

@@ -1,14 +0,0 @@
-.root {
-  color: var(--color-text-light);
-}
-
-.text {
-  font-weight: bold;
-  font-size: var(--size-medium);
-  line-height: var(--space-medium);
-  text-transform: uppercase;
-}
-
-.anchor {
-  display: block;
-}

package/src/ui/dropdown/dropdown.jsx

@@ -1,88 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
-
-import { Button, BUTTON_SIZE } from '../button';
-import css from './dropdown.module.css';
-
-const Item = ({ className = '', isActive = false, ...restProps }) => (
-  <MenuItem className={cx(css.item, className, isActive && css.itemActive)} {...restProps} />
-);
-
-Item.propTypes = {
-  className: PropTypes.string,
-  isActive: PropTypes.bool,
-};
-
-Item.defaultProps = {
-  className: '',
-  isActive: false,
-};
-
-export const Dropdown = (props) => {
-  const { className, buttonClassName, label, ariaLabel, glyph, disabled, children } = props;
-  const rootClassName = cx(css.root, className);
-  const menuState = useMenuState();
-
-  return (
-    <div className={rootClassName}>
-      <MenuButton
-        as={Button}
-        outline
-        size={BUTTON_SIZE.SMALL}
-        glyph={glyph}
-        disabled={disabled}
-        state={menuState}
-        tabIndex={null}
-        className={cx(css.button, buttonClassName)}
-      >
-        {label}
-      </MenuButton>
-      <Menu state={menuState} aria-label={ariaLabel || label} className={css.dropdown}>
-        {typeof children === 'function'
-          ? children({
-              MenuItem: Item,
-              menu: menuState,
-              menuItemClassName: css.item,
-              menuItemActiveClassName: css.itemActive,
-            })
-          : children}
-      </Menu>
-    </div>
-  );
-};
-
-Dropdown.defaultProps = {
-  className: '',
-  buttonClassName: '',
-  label: null,
-  ariaLabel: '',
-  glyph: null,
-  disabled: false,
-};
-
-Dropdown.propTypes = {
-  /** Adopted child class name */
-  className: PropTypes.string,
-
-  /** Button adopted child class name */
-  buttonClassName: PropTypes.string,
-
-  /** Button label */
-  label: PropTypes.node,
-
-  /** Aria label */
-  ariaLabel: PropTypes.string,
-
-  /** Icon glyph */
-  glyph: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-
-  /** Dropdown button disabled attribute */
-  disabled: PropTypes.bool,
-
-  /** Content */
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]).isRequired,
-};
-
-Dropdown.Item = Item;

package/types/components/total-size-type-title/index.d.ts

@@ -1 +0,0 @@
-export * from "./total-size-type-title";

package/types/components/total-size-type-title/total-size-type-title.d.ts

@@ -1,14 +0,0 @@
-export function TotalSizeTypeTitle({ className }: {
-    className: any;
-}): React.JSX.Element;
-export namespace TotalSizeTypeTitle {
-    namespace propTypes {
-        let className: PropTypes.Requireable<string>;
-    }
-    namespace defaultProps {
-        let className_1: string;
-        export { className_1 as className };
-    }
-}
-import React from 'react';
-import PropTypes from 'prop-types';