@bundle-stats/ui 4.8.4 → 4.9.0-beta.0

package/src/ui/filters/filters.tsx

@@ -1,9 +1,11 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import cx from 'classnames';
 
 import type { FilterFieldsData, FilterGroupFieldData } from '../../types';
 import { FlexStack } from '../../layout/flex-stack';
+import { Stack } from '../../layout/stack';
 import { Dropdown } 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';
@@ -75,6 +77,8 @@ const FilterGroup = (props: FilterGroupProps) => {
     toggleFilters,
   } = props;
 
+  const [search, setSearch] = useState('');
+
   const { label: groupLabel, children: groupItems } = data;
 
   const areAllGroupItemsChecked = groupItems
@@ -108,6 +112,14 @@ const FilterGroup = (props: FilterGroupProps) => {
       });
     };
 
+  const filteredGroupItems = useMemo(() => {
+    if (!search) {
+      return groupItems;
+    }
+
+    return groupItems.filter((item) => item.label.match(new RegExp(`${search}`, 'i')));
+  }, [search, groupItems]);
+
   return (
     <Dropdown
       className={className}
@@ -118,8 +130,32 @@ const FilterGroup = (props: FilterGroupProps) => {
       {({ MenuItem, menuItemClassName }) => {
         return (
           <>
+            {groupItems.length > 10 && (
+              <div className={css.filterGroupSearchWrapper}>
+                <InputSearch
+                  defaultValue={search}
+                  onChange={setSearch}
+                  placeholder={I18N.CHUNKS_SEARCH}
+                  debounceWait={0}
+                />
+              </div>
+            )}
             <div className={css.filterGroupItems}>
-              {groupItems.map(({ key: itemKey, ...itemData }) => {
+              {filteredGroupItems.length === 0 && (
+                <Stack className={css.filterGroupSearchNotFound}>
+                  <p>{I18N.CHUNKS_NOT_FOUND}</p>
+                  <div>
+                    <button
+                      type="button"
+                      onClick={() => setSearch('')}
+                      className={css.filterGroupSearchNotFoundClear}
+                    >
+                      {I18N.CHUNKS_SEARCH_CLEAR}
+                    </button>
+                  </div>
+                </Stack>
+              )}
+              {filteredGroupItems.map(({ key: itemKey, ...itemData }) => {
                 const id = [groupKey, itemKey].join('.');
                 const getOnOnlyClick = () => getOnGroupCheck(false, { [id]: true });
 
@@ -138,29 +174,31 @@ const FilterGroup = (props: FilterGroupProps) => {
                 );
               })}
             </div>
-            <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>
+            {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>
+            )}
           </>
         );
       }}

package/src/ui/index.js

@@ -8,6 +8,7 @@ export { HorizontalBarChart } from './horizontal-bar-chart';
 export { HoverCard } from './hover-card';
 export { Icon } from './icon';
 export { Input } from './input';
+export { InputSearch } from './input-search';
 export { Loader } from './loader';
 export { Skeleton } from './skeleton';
 export { Table } from './table';

package/src/ui/input/input.stories.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { getWrapperDecorator } from '../../stories';
+import { Input } from '.';
+
+export default {
+  title: 'UI/Input',
+  component: Input,
+  decorators: [getWrapperDecorator()],
+};
+
+export const Default = () => <Input placeholder="Search" />;
+export const WithSize = () => <Input placeholder="Search" size="small" />;

package/src/ui/input/input.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import cx from 'classnames';
+
+import css from './input.module.css';
+
+interface InputProps {
+  size?: 'small' | 'medium' | 'large';
+}
+
+export const Input = (props: InputProps & Omit<React.ComponentProps<'input'>, 'size'>) => {
+  const { className = '', size = 'medium', ...restProps } = props;
+
+  const rootClassName = cx(css.root, className, css[size]);
+
+  return <input className={rootClassName} {...restProps} />;
+};

package/src/ui/input-search/index.ts

@@ -0,0 +1 @@
+export * from './input-search';

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

@@ -0,0 +1,82 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import cx from 'classnames';
+import debounce from 'lodash/debounce';
+import noop from 'lodash/noop';
+
+import { Icon } from '../icon';
+import { Input } from '../input';
+
+import css from './input-search.module.css';
+
+interface InputSearchProps {
+  placeholder?: string;
+  defaultValue?: string;
+  onChange?: (newValue: string) => void;
+  debounceWait?: number;
+}
+
+export const InputSearch = (
+  props: InputSearchProps & Omit<React.ComponentProps<'div'>, 'onChange'>,
+) => {
+  const {
+    className = '',
+    placeholder = 'Search',
+    defaultValue = '',
+    onChange = noop,
+    debounceWait = 500,
+  } = props;
+  const rootClassname = cx(css.root, className);
+
+  const [value, setValue] = useState(defaultValue);
+
+  // Update local state when default value changes
+  useEffect(() => {
+    setValue(defaultValue);
+  }, [defaultValue]);
+
+  const debouncedUpdateSearch = useCallback(debounce(onChange, debounceWait), [onChange]);
+
+  const changeValue = useCallback(
+    (newValue: string) => {
+      if (newValue !== value) {
+        debouncedUpdateSearch(newValue);
+        setValue(newValue);
+      }
+    },
+    [setValue, value],
+  );
+
+  const inputOnChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      changeValue(event.target.value);
+    },
+    [changeValue],
+  );
+
+  const clearButtonOnClick = useCallback(() => {
+    changeValue('');
+  }, [changeValue]);
+
+  return (
+    <div className={rootClassname}>
+      <Input
+        className={css.input}
+        placeholder={placeholder}
+        onChange={inputOnChange}
+        value={value}
+        size="small"
+        autoComplete="off"
+      />
+      {value && (
+        <button
+          className={css.cancelButton}
+          type="button"
+          onClick={clearButtonOnClick}
+          aria-label="Clear search"
+        >
+          <Icon className={css.cancelButtonIcon} glyph={Icon.ICONS.CANCEL} />
+        </button>
+      )}
+    </div>
+  );
+};

package/types/components/index.d.ts

@@ -14,7 +14,6 @@ export { LighthouseTable } from "./lighthouse-table";
 export { Metric } from "./metric";
 export { MetricsTable } from "./metrics-table";
 export { MetricsTableOptions } from "./metrics-table-options";
-export { MetricsTableSearch } from "./metrics-table-search";
 export { MetricsTableTitle } from "./metrics-table-title";
 export { ModuleInfo } from "./module-info";
 export { Summary } from "./summary";

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

@@ -1,2 +1,5 @@
+export declare const CHUNKS_NOT_FOUND = "No chunks found";
+export declare const CHUNKS_SEARCH = "Search by chunk name";
+export declare const CHUNKS_SEARCH_CLEAR = "Clear search";
 export declare const CLEAR = "Clear all";
 export declare const CHECK = "Check all";

package/types/ui/index.d.ts

@@ -8,6 +8,7 @@ export { HorizontalBarChart } from "./horizontal-bar-chart";
 export { HoverCard } from "./hover-card";
 export { Icon } from "./icon";
 export { Input } from "./input";
+export { InputSearch } from "./input-search";
 export { Loader } from "./loader";
 export { Skeleton } from "./skeleton";
 export { Table } from "./table";

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

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

package/types/ui/input/input.d.ts

@@ -1,19 +1,6 @@
-export function Input({ className, size, ...restProps }: {
-    [x: string]: any;
-    className: any;
-    size: any;
-}): React.JSX.Element;
-export namespace Input {
-    namespace propTypes {
-        let className: PropTypes.Requireable<string>;
-        let size: PropTypes.Requireable<string>;
-    }
-    namespace defaultProps {
-        let className_1: string;
-        export { className_1 as className };
-        let size_1: string;
-        export { size_1 as size };
-    }
-}
 import React from 'react';
-import PropTypes from 'prop-types';
+interface InputProps {
+    size?: 'small' | 'medium' | 'large';
+}
+export declare const Input: (props: InputProps & Omit<React.ComponentProps<'input'>, 'size'>) => React.JSX.Element;
+export {};

package/types/ui/input-search/index.d.ts

@@ -0,0 +1 @@
+export * from './input-search';

package/types/ui/input-search/input-search.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface InputSearchProps {
+    placeholder?: string;
+    defaultValue?: string;
+    onChange?: (newValue: string) => void;
+    debounceWait?: number;
+}
+export declare const InputSearch: (props: InputSearchProps & Omit<React.ComponentProps<'div'>, 'onChange'>) => React.JSX.Element;
+export {};

package/lib/components/metrics-table-search/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/metrics-table-search/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,yDAAuC"}

package/lib/components/metrics-table-search/metrics-table-search.js

@@ -1,73 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MetricsTableSearch = void 0;
-const react_1 = __importStar(require("react"));
-const prop_types_1 = __importDefault(require("prop-types"));
-const classnames_1 = __importDefault(require("classnames"));
-const debounce_1 = __importDefault(require("lodash/debounce"));
-const icon_1 = require("../../ui/icon");
-const input_1 = require("../../ui/input");
-const metrics_table_search_module_css_1 = __importDefault(require("./metrics-table-search.module.css"));
-const MetricsTableSearch = (props) => {
-    const { className, placeholder, search, updateSearch } = props;
-    const rootClassname = (0, classnames_1.default)(metrics_table_search_module_css_1.default.root, className);
-    const [value, setValue] = (0, react_1.useState)(search);
-    (0, react_1.useEffect)(() => {
-        setValue(search);
-    }, [search]);
-    const debouncedUpdateSearch = (0, react_1.useCallback)((0, debounce_1.default)(updateSearch, 500), []);
-    const handleChangeValue = (0, react_1.useCallback)((event) => {
-        const newValue = event.target.value;
-        setValue(newValue);
-        if (newValue !== search) {
-            debouncedUpdateSearch(newValue);
-        }
-    }, [search]);
-    const handleClearValue = (0, react_1.useCallback)(() => {
-        const newValue = '';
-        setValue(newValue);
-        updateSearch(newValue);
-    }, []);
-    return (react_1.default.createElement("div", { className: rootClassname },
-        react_1.default.createElement(input_1.Input, { className: metrics_table_search_module_css_1.default.input, placeholder: placeholder, onChange: handleChangeValue, value: value, size: "small", autoComplete: "off" }),
-        search && (react_1.default.createElement("button", { className: metrics_table_search_module_css_1.default.cancelButton, type: "button", onClick: handleClearValue },
-            react_1.default.createElement(icon_1.Icon, { className: metrics_table_search_module_css_1.default.cancelButtonIcon, glyph: icon_1.Icon.ICONS.CANCEL })))));
-};
-exports.MetricsTableSearch = MetricsTableSearch;
-exports.MetricsTableSearch.propTypes = {
-    className: prop_types_1.default.string,
-    placeholder: prop_types_1.default.string,
-    search: prop_types_1.default.string.isRequired,
-    updateSearch: prop_types_1.default.func.isRequired,
-};
-exports.MetricsTableSearch.defaultProps = {
-    className: '',
-    placeholder: '',
-};
-//# sourceMappingURL=metrics-table-search.js.map

package/lib/components/metrics-table-search/metrics-table-search.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"metrics-table-search.js","sourceRoot":"","sources":["../../../src/components/metrics-table-search/metrics-table-search.jsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAgE;AAChE,4DAAmC;AACnC,4DAA4B;AAC5B,+DAAuC;AAEvC,wCAAqC;AACrC,0CAAuC;AAEvC,wGAAoD;AAE7C,MAAM,kBAAkB,GAAG,CAAC,KAAK,EAAE,EAAE;IAC1C,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAC/D,MAAM,aAAa,GAAG,IAAA,oBAAE,EAAC,yCAAG,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE9C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAC,MAAM,CAAC,CAAC;IAG3C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,QAAQ,CAAC,MAAM,CAAC,CAAC;IACnB,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,qBAAqB,GAAG,IAAA,mBAAW,EAAC,IAAA,kBAAQ,EAAC,YAAY,EAAE,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC;IAE3E,MAAM,iBAAiB,GAAG,IAAA,mBAAW,EACnC,CAAC,KAAK,EAAE,EAAE;QACR,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACpC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAGnB,IAAI,QAAQ,KAAK,MAAM,EAAE;YACvB,qBAAqB,CAAC,QAAQ,CAAC,CAAC;SACjC;IACH,CAAC,EACD,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,MAAM,gBAAgB,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACxC,MAAM,QAAQ,GAAG,EAAE,CAAC;QACpB,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,YAAY,CAAC,QAAQ,CAAC,CAAC;IACzB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,uCAAK,SAAS,EAAE,aAAa;QAC3B,8BAAC,aAAK,IACJ,SAAS,EAAE,yCAAG,CAAC,KAAK,EACpB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,iBAAiB,EAC3B,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,OAAO,EACZ,YAAY,EAAC,KAAK,GAClB;QACD,MAAM,IAAI,CACT,0CAAQ,SAAS,EAAE,yCAAG,CAAC,YAAY,EAAE,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,gBAAgB;YAC1E,8BAAC,WAAI,IAAC,SAAS,EAAE,yCAAG,CAAC,gBAAgB,EAAE,KAAK,EAAE,WAAI,CAAC,KAAK,CAAC,MAAM,GAAI,CAC5D,CACV,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AAjDW,QAAA,kBAAkB,sBAiD7B;AAEF,0BAAkB,CAAC,SAAS,GAAG;IAC7B,SAAS,EAAE,oBAAS,CAAC,MAAM;IAC3B,WAAW,EAAE,oBAAS,CAAC,MAAM;IAC7B,MAAM,EAAE,oBAAS,CAAC,MAAM,CAAC,UAAU;IACnC,YAAY,EAAE,oBAAS,CAAC,IAAI,CAAC,UAAU;CACxC,CAAC;AAEF,0BAAkB,CAAC,YAAY,GAAG;IAChC,SAAS,EAAE,EAAE;IACb,WAAW,EAAE,EAAE;CAChB,CAAC"}

package/lib-esm/components/metrics-table-search/index.js

@@ -1,2 +0,0 @@
-export * from './metrics-table-search';
-//# sourceMappingURL=index.js.map

package/lib-esm/components/metrics-table-search/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/metrics-table-search/index.js"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC"}

package/lib-esm/components/metrics-table-search/metrics-table-search.js

@@ -1,43 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import debounce from 'lodash/debounce';
-import { Icon } from '../../ui/icon';
-import { Input } from '../../ui/input';
-import css from './metrics-table-search.module.css';
-export const MetricsTableSearch = (props) => {
-    const { className, placeholder, search, updateSearch } = props;
-    const rootClassname = cx(css.root, className);
-    const [value, setValue] = useState(search);
-    useEffect(() => {
-        setValue(search);
-    }, [search]);
-    const debouncedUpdateSearch = useCallback(debounce(updateSearch, 500), []);
-    const handleChangeValue = useCallback((event) => {
-        const newValue = event.target.value;
-        setValue(newValue);
-        if (newValue !== search) {
-            debouncedUpdateSearch(newValue);
-        }
-    }, [search]);
-    const handleClearValue = useCallback(() => {
-        const newValue = '';
-        setValue(newValue);
-        updateSearch(newValue);
-    }, []);
-    return (React.createElement("div", { className: rootClassname },
-        React.createElement(Input, { className: css.input, placeholder: placeholder, onChange: handleChangeValue, value: value, size: "small", autoComplete: "off" }),
-        search && (React.createElement("button", { className: css.cancelButton, type: "button", onClick: handleClearValue },
-            React.createElement(Icon, { className: css.cancelButtonIcon, glyph: Icon.ICONS.CANCEL })))));
-};
-MetricsTableSearch.propTypes = {
-    className: PropTypes.string,
-    placeholder: PropTypes.string,
-    search: PropTypes.string.isRequired,
-    updateSearch: PropTypes.func.isRequired,
-};
-MetricsTableSearch.defaultProps = {
-    className: '',
-    placeholder: '',
-};
-//# sourceMappingURL=metrics-table-search.js.map

package/lib-esm/components/metrics-table-search/metrics-table-search.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"metrics-table-search.js","sourceRoot":"","sources":["../../../src/components/metrics-table-search/metrics-table-search.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AAEvC,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC,OAAO,GAAG,MAAM,mCAAmC,CAAC;AAEpD,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAAK,EAAE,EAAE;IAC1C,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAC/D,MAAM,aAAa,GAAG,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE9C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;IAG3C,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,MAAM,CAAC,CAAC;IACnB,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,qBAAqB,GAAG,WAAW,CAAC,QAAQ,CAAC,YAAY,EAAE,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC;IAE3E,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,KAAK,EAAE,EAAE;QACR,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACpC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAGnB,IAAI,QAAQ,KAAK,MAAM,EAAE;YACvB,qBAAqB,CAAC,QAAQ,CAAC,CAAC;SACjC;IACH,CAAC,EACD,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE;QACxC,MAAM,QAAQ,GAAG,EAAE,CAAC;QACpB,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,YAAY,CAAC,QAAQ,CAAC,CAAC;IACzB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,6BAAK,SAAS,EAAE,aAAa;QAC3B,oBAAC,KAAK,IACJ,SAAS,EAAE,GAAG,CAAC,KAAK,EACpB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,iBAAiB,EAC3B,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,OAAO,EACZ,YAAY,EAAC,KAAK,GAClB;QACD,MAAM,IAAI,CACT,gCAAQ,SAAS,EAAE,GAAG,CAAC,YAAY,EAAE,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,gBAAgB;YAC1E,oBAAC,IAAI,IAAC,SAAS,EAAE,GAAG,CAAC,gBAAgB,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAI,CAC5D,CACV,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAkB,CAAC,SAAS,GAAG;IAC7B,SAAS,EAAE,SAAS,CAAC,MAAM;IAC3B,WAAW,EAAE,SAAS,CAAC,MAAM;IAC7B,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;IACnC,YAAY,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;CACxC,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG;IAChC,SAAS,EAAE,EAAE;IACb,WAAW,EAAE,EAAE;CAChB,CAAC"}

package/src/components/metrics-table-search/index.js

@@ -1 +0,0 @@
-export * from './metrics-table-search';

package/src/components/metrics-table-search/metrics-table-search.jsx

@@ -1,72 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import debounce from 'lodash/debounce';
-
-import { Icon } from '../../ui/icon';
-import { Input } from '../../ui/input';
-
-import css from './metrics-table-search.module.css';
-
-export const MetricsTableSearch = (props) => {
-  const { className, placeholder, search, updateSearch } = props;
-  const rootClassname = cx(css.root, className);
-
-  const [value, setValue] = useState(search);
-
-  // Update local state when initial value has changed
-  useEffect(() => {
-    setValue(search);
-  }, [search]);
-
-  const debouncedUpdateSearch = useCallback(debounce(updateSearch, 500), []);
-
-  const handleChangeValue = useCallback(
-    (event) => {
-      const newValue = event.target.value;
-      setValue(newValue);
-
-      // Update parent state when the local value has changed
-      if (newValue !== search) {
-        debouncedUpdateSearch(newValue);
-      }
-    },
-    [search],
-  );
-
-  const handleClearValue = useCallback(() => {
-    const newValue = '';
-    setValue(newValue);
-    updateSearch(newValue);
-  }, []);
-
-  return (
-    <div className={rootClassname}>
-      <Input
-        className={css.input}
-        placeholder={placeholder}
-        onChange={handleChangeValue}
-        value={value}
-        size="small"
-        autoComplete="off"
-      />
-      {search && (
-        <button className={css.cancelButton} type="button" onClick={handleClearValue}>
-          <Icon className={css.cancelButtonIcon} glyph={Icon.ICONS.CANCEL} />
-        </button>
-      )}
-    </div>
-  );
-};
-
-MetricsTableSearch.propTypes = {
-  className: PropTypes.string,
-  placeholder: PropTypes.string,
-  search: PropTypes.string.isRequired,
-  updateSearch: PropTypes.func.isRequired,
-};
-
-MetricsTableSearch.defaultProps = {
-  className: '',
-  placeholder: '',
-};

package/src/ui/input/input.jsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-
-import css from './input.module.css';
-
-export const Input = ({ className, size, ...restProps }) => {
-  const rootClassName = cx(css.root, className, css[size]);
-  return <input className={rootClassName} {...restProps} />;
-};
-
-Input.propTypes = {
-  className: PropTypes.string,
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-};
-
-Input.defaultProps = {
-  className: '',
-  size: 'medium',
-};

package/types/components/metrics-table-search/index.d.ts

@@ -1 +0,0 @@
-export * from "./metrics-table-search";

package/types/components/metrics-table-search/metrics-table-search.d.ts

@@ -1,17 +0,0 @@
-export function MetricsTableSearch(props: any): React.JSX.Element;
-export namespace MetricsTableSearch {
-    namespace propTypes {
-        let className: PropTypes.Requireable<string>;
-        let placeholder: PropTypes.Requireable<string>;
-        let search: PropTypes.Validator<string>;
-        let updateSearch: PropTypes.Validator<(...args: any[]) => any>;
-    }
-    namespace defaultProps {
-        let className_1: string;
-        export { className_1 as className };
-        let placeholder_1: string;
-        export { placeholder_1 as placeholder };
-    }
-}
-import React from 'react';
-import PropTypes from 'prop-types';