@elliemae/ds-datagrids 3.0.0-next.2 → 3.0.0-next.3

package/esm/plugins/expandable-grid/ExpandedRow.js

@@ -1,143 +0,0 @@
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'core-js/modules/esnext.async-iterator.map.js';
-import 'core-js/modules/esnext.iterator.map.js';
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'react';
-import DSSeparator from '@elliemae/ds-separator';
-import DSButton from '@elliemae/ds-button';
-import styled from 'styled-components';
-import { get } from '@elliemae/ds-utilities';
-import deferComponentRender from '@elliemae/ds-shared/defer-render-hoc';
-import useDataGrid from '@elliemae/ds-shared/useDataGrid';
-import { PaginationPlugin } from '../pagination/PaginationPlugin.js';
-import BodyCell from '../../components/BodyCell.js';
-import { defaultRenderers } from '../../components/renderers/index.js';
-import TableBody from '../../components/TableBody.js';
-import Table from '../../components/Table.js';
-import { ColumnSizingPlugin } from '../column-sizing/ColumnSizingPlugin.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-var _TableBody, _DSSeparator;
-
-const _excluded = ["instanceRef"],
-      _excluded2 = ["showAllRows"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-const DetailGrid = deferComponentRender(_ref => {
-  let {
-    parentGrid,
-    parentRowData,
-    rows
-  } = _ref;
-
-  const _parentGrid$props = parentGrid.props,
-        parentProps = _objectWithoutProperties(_parentGrid$props, _excluded);
-
-  const grid = useDataGrid(_objectSpread(_objectSpread({
-    uuid: parentGrid.getInstance().uuid
-  }, parentProps), {}, {
-    columns: parentGrid.getInstance().decoratedColumns.filter(col => !col.expandableColumn).map(c => _objectSpread(_objectSpread({}, c), {}, {
-      expandableColumn: false
-    })),
-    rows,
-    plugins: [ColumnSizingPlugin, PaginationPlugin],
-    renderers: defaultRenderers,
-    bindColumnsSizeTo: parentGrid.uuid,
-    numRowsVisible: 'all',
-    paginated: true,
-    pagination: {
-      perPage: rows.length,
-      conditionalPagination: true
-    },
-    parentRowData
-  }));
-  return /*#__PURE__*/jsx(Table, _objectSpread(_objectSpread({}, grid), {}, {
-    children: _TableBody || (_TableBody = /*#__PURE__*/_jsx(TableBody, {}))
-  }));
-}, null);
-const DetailsWrapper = /*#__PURE__*/styled.span.withConfig({
-  componentId: "sc-1goa4zy-0"
-})(["flex:1;width:", "px;"], props => props.width);
-const DetailGridWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1goa4zy-1"
-})(["display:flex;height:calc(100% - ", "px);width:", "px;margin:12px 0;"], props => props.allRowsVisible ? 18 : 60, props => props.expandableGridDetailWidth);
-
-function ExpandedRow(_ref2) {
-  let {
-    parentGrid,
-    detailColumns,
-    rowData,
-    rows,
-    rowProps,
-    cellComponent: CellComponent,
-    rowComponent: RowComponent
-  } = _ref2;
-  const {
-    decoratedColumns,
-    actions: {
-      toggleShowAllRows
-    },
-    state: {
-      expandedRows
-    },
-    props: {
-      rowKey,
-      showMoreRowsText = 'SHOW ALL ROWS',
-      showLessRowsText = 'SHOW LESS ROWS',
-      expandableSubrowsVisible
-    },
-    columnSizeService: {
-      expandableGridDetailWidth
-    }
-  } = parentGrid.getInstance();
-
-  const {
-    showAllRows
-  } = rowProps,
-        restRowProps = _objectWithoutProperties(rowProps, _excluded2);
-
-  return /*#__PURE__*/jsxs(RowComponent, _objectSpread(_objectSpread({}, restRowProps), {}, {
-    children: [/*#__PURE__*/_jsx(BodyCell, {
-      column: decoratedColumns[0],
-      columnIndex: 0,
-      component: CellComponent,
-      grid: parentGrid,
-      rowProps: _objectSpread({
-        rowData
-      }, rowProps)
-    }), /*#__PURE__*/_jsx(DetailsWrapper, {
-      width: expandableGridDetailWidth
-    }, void 0, /*#__PURE__*/_jsx(DetailGridWrapper, {
-      allRowsVisible: rows.length < expandableSubrowsVisible || get(expandedRows, [rowKey, 'showAllRows']),
-      expandableGridDetailWidth: expandableGridDetailWidth
-    }, void 0, _DSSeparator || (_DSSeparator = /*#__PURE__*/_jsx(DSSeparator, {
-      dashed: true,
-      orientation: "vertical"
-    })), /*#__PURE__*/_jsx(DetailGrid, {
-      detailColumns: detailColumns,
-      parentGrid: parentGrid.getInstance(),
-      parentRowData: rowData,
-      rows: showAllRows ? rows : (rows || []).slice(0, expandableSubrowsVisible)
-    })), rows.length > expandableSubrowsVisible && /*#__PURE__*/_jsx(DSButton, {
-      buttonType: "text",
-      labelText: showAllRows ? showLessRowsText : showMoreRowsText,
-      onClick: e => {
-        e.stopPropagation();
-        toggleShowAllRows(rowData);
-      },
-      style: {
-        marginBottom: '10px'
-      }
-    }))]
-  }));
-}
-
-export { ExpandedRow as default };

package/esm/plugins/expandable-grid/ExpandedRowExtra.js

@@ -1,46 +0,0 @@
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'react';
-import { cx } from '@elliemae/ds-utilities';
-import DSSeparator from '@elliemae/ds-separator';
-import { aggregatedClasses } from '@elliemae/ds-classnames';
-import { dataGridBlockName } from '../../blockNames.js';
-import { jsxs } from 'react/jsx-runtime';
-
-var _DSSeparator;
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-const blockName = "".concat(dataGridBlockName, "-expanded-row");
-const DetailsWrapper = aggregatedClasses('div')("".concat(blockName, "-details-wrapper"), null, () => ({
-  'ie-flex-basis-auto': true
-}));
-
-function ExpandedRowExtra(_ref) {
-  let {
-    children,
-    rowData,
-    rowProps,
-    rowComponent: RowComponent,
-    renderRowDetails = () => null
-  } = _ref;
-  return /*#__PURE__*/jsxs(RowComponent, _objectSpread(_objectSpread({}, rowProps), {}, {
-    className: cx(rowProps.className, 'expanded-detail-row'),
-    children: [/*#__PURE__*/_jsx(RowComponent, {
-      className: "master-row-expanded"
-    }, void 0, children), _DSSeparator || (_DSSeparator = /*#__PURE__*/_jsx(DSSeparator, {
-      dashed: true,
-      margin: "xs"
-    })), /*#__PURE__*/_jsx(DetailsWrapper, {}, void 0, renderRowDetails({
-      rowData
-    }))]
-  }));
-}
-
-export { ExpandedRowExtra as default };

package/esm/plugins/expandable-grid/index.js

@@ -1,2 +0,0 @@
-export { ExpandablePlugin } from './ExpandablePlugin.js';
-export { default as ExpandableColumn } from './ExpandableColumn.js';

package/esm/plugins/expandable-grid/useExpandGridState.js

@@ -1,75 +0,0 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
-import { useExpandState, isFunction } from '@elliemae/ds-utilities';
-import { useState } from 'react';
-
-const useExpandGridState = grid => {
-  const {
-    composedRows,
-    props: {
-      expandedRows: expandedRowsProp = {},
-      rowKey = 'id',
-      onExpandRow,
-      onToggleShowAllRows,
-      onExpandChange,
-      onExpandAll,
-      onToggleExpand,
-      onCollapseRow
-    }
-  } = grid;
-  const {
-    state,
-    actions
-  } = useExpandState({
-    items: composedRows,
-    itemKey: rowKey,
-    expanded: expandedRowsProp,
-    onExpand: onExpandRow,
-    onExpandChange,
-    onExpandAll,
-    onToggleExpand,
-    onCollapse: onCollapseRow
-  });
-  const [shouldRefocus, setShouldReFocus] = useState(false);
-
-  const expandRow = row => actions.expand(row, {
-    showAllRows: false
-  });
-
-  const toggleExpandAllRows = actions.toggleExpandAll;
-  const collapseRow = actions.collapse;
-
-  const toggleExpand = row => {
-    setShouldReFocus(false);
-    actions.toggleExpand(row, {
-      showAllRows: false
-    });
-  };
-
-  const toggleShowAllRows = row => {
-    if (isFunction(onToggleShowAllRows)) {
-      onToggleShowAllRows(row);
-    } else {
-      const key = row[rowKey];
-      actions.expand(row, {
-        showAllRows: state.expanded[key] && !state.expanded[key].showAllRows
-      });
-    }
-  };
-
-  return {
-    state: {
-      expandedRows: state.expanded,
-      isExpandedAll: state.isExpandedAll,
-      shouldRefocus
-    },
-    actions: {
-      expandRow,
-      toggleExpandAllRows,
-      toggleExpand,
-      toggleShowAllRows,
-      collapseRow
-    }
-  };
-};
-
-export { useExpandGridState };

package/esm/plugins/export-data/ExportDataPlugin.js

@@ -1,156 +0,0 @@
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import 'core-js/modules/esnext.async-iterator.reduce.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.reduce.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import 'core-js/modules/esnext.async-iterator.map.js';
-import 'core-js/modules/esnext.iterator.map.js';
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/es.string.replace.js';
-import 'core-js/modules/web.url.js';
-import 'core-js/modules/web.url-search-params.js';
-import { get } from '@elliemae/ds-utilities';
-import createInstancePlugin from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-const isVisible = column => {
-  if (typeof column === 'undefined') {
-    return false;
-  }
-
-  return typeof column.visible === 'undefined' || column.visible;
-};
-
-const getColumnValue = (row, property) => get(row, property);
-const getVisibleRowData = (row, columns) => columns.reduce((result, column) => {
-  const columnProperty = column.property;
-  return isVisible(column) ? [...result, getColumnValue(row, "_".concat(columnProperty)) || getColumnValue(row, columnProperty)] : result;
-}, []);
-
-const defaultOptions = uuid => ({
-  sheetName: 'SheetName',
-  fileName: "datagrid-".concat(uuid),
-  type: 'csv',
-  onlySelection: false,
-  excludedColumns: undefined
-});
-
-const getOptions = (opts, uuid) => _objectSpread(_objectSpread({}, defaultOptions(uuid)), opts);
-
-const getCellValue = cell => {
-  if (cell === undefined || cell === null) return '';
-  return cell;
-};
-
-const getExportedData = (rows, columns, range) => {
-  const rowsRanged = range ? rows.slice(...range) : rows;
-  const dataToExport = rowsRanged.map(row => getVisibleRowData(row, columns));
-  const columnsContent = columns.filter(c => isVisible(c)).reduce((acc, curr, idx) => "".concat(acc).concat(idx === 0 ? '' : ',').concat(curr.label), '');
-  const rowsContent = dataToExport.map(e => e.map(r => "\"".concat(String(getCellValue(r)).replace(/"/g, '""'), "\"")).join(',')).join('\r\n');
-  const csvContent = "".concat(columnsContent, "\r\n").concat(rowsContent);
-  return csvContent;
-}; // eslint-disable-next-line max-statements
-
-const exportTo = (rows, columns, _ref) => {
-  let {
-    range,
-    fileName,
-    type,
-    excludedColumns
-  } = _ref;
-
-  if (excludedColumns) {
-    // eslint-disable-next-line no-param-reassign
-    columns = columns.filter(col => !excludedColumns.includes(col.property));
-  }
-
-  const csvContent = getExportedData(rows, columns, range);
-  const blob = new Blob([csvContent], {
-    type: 'text/csv;charset=utf-8;'
-  });
-
-  if (navigator.msSaveBlob) {
-    // IE 10+
-    navigator.msSaveBlob(blob, "".concat(fileName, ".").concat(type));
-  } else {
-    const link = document.createElement('a');
-
-    if (link.download !== undefined) {
-      // feature detection
-      // Browsers that support HTML5 download attribute
-      const url = URL.createObjectURL(blob);
-      link.setAttribute('href', url);
-      link.setAttribute('download', "".concat(fileName, ".").concat(type));
-      link.style.visibility = 'hidden';
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-    }
-  }
-};
-
-const ExportDataPlugin = createInstancePlugin('export-data', {
-  decorateGrid(instance) {
-    return {
-      exportRows() {
-        let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-        const {
-          composedRows: rows,
-          columns,
-          uuid,
-          props: {
-            rowKey
-          },
-          state: {
-            selection
-          }
-        } = instance.getInstance();
-        const options = getOptions(opts, uuid); // check paginated rows
-
-        let currentRows = rows.allRows || rows;
-
-        if (opts.onlySelection) {
-          const selectedRows = Object.keys(selection.selectedRows);
-          currentRows = currentRows.filter(r => selectedRows.includes(String(r[rowKey])));
-        }
-
-        exportTo(currentRows, columns, options);
-      },
-
-      exportVisibleRows() {
-        let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-        const {
-          composedRows: rows,
-          columns,
-          uuid,
-          props: {
-            rowKey
-          },
-          state: {
-            selection
-          }
-        } = instance.getInstance();
-        const options = getOptions(opts, uuid); // check paginated rows
-
-        let currentRows = rows.rows || rows;
-
-        if (opts.onlySelection) {
-          const selectedRows = Object.keys(selection.selectedRows);
-          currentRows = currentRows.filter(r => selectedRows.includes(String(r[rowKey])));
-        }
-
-        exportTo(currentRows, columns, options);
-      }
-
-    };
-  }
-
-});
-
-export { ExportDataPlugin, getColumnValue, getExportedData, getVisibleRowData };

package/esm/plugins/export-data/index.js

@@ -1 +0,0 @@
-export { ExportDataPlugin, getColumnValue, getExportedData, getVisibleRowData } from './ExportDataPlugin.js';

package/esm/plugins/filterable/FilterablePlugin.js

@@ -1,73 +0,0 @@
-import { get, isFunction } from '@elliemae/ds-utilities';
-import createInstancePlugin from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';
-import { addFilterToColumn } from './addFilterToColumn.js';
-import filterRowsByQuery, { filterRowsByQueryGroup } from './filtering-helper/filterRowsByQuery.js';
-import { useFilterableState } from './useFilterableState.js';
-
-/* eslint-disable indent */
-
-const decorateColumn = (column, grid) => {
-  const {
-    props: {
-      isFilterableColumnActive = col => col.searchable,
-      onRemoveAllFilters
-    },
-    actions: {
-      addFilter,
-      removeFilter
-    },
-    state: {
-      query,
-      filters
-    }
-  } = grid;
-  return isFilterableColumnActive(column) ? addFilterToColumn({
-    grid,
-    onAddFilter: addFilter,
-    onRemoveFilter: removeFilter,
-    onRemoveAllFilters,
-    query,
-    filters
-  }, column) : column;
-};
-
-const composeRows = (rows, grid) => {
-  const {
-    props: {
-      isDataFiltered,
-      groupedRows
-    },
-    state: {
-      query
-    },
-    composedRows
-  } = grid.getInstance();
-  const nextRows = !groupedRows ? filterRowsByQuery(rows, query) : filterRowsByQueryGroup(rows, query, composedRows);
-  return !isDataFiltered ? nextRows : rows;
-};
-
-const FilterablePlugin = createInstancePlugin('filterable', {
-  registerStateHook: useFilterableState,
-  decorateColumn,
-  composeRows,
-
-  registerHotKeys(grid) {
-    return {
-      key: 'ctrl+f',
-      handler: _ref => {
-        let {
-          cellIndex
-        } = _ref;
-        const {
-          decoratedColumns
-        } = grid.getInstance();
-        const column = decoratedColumns[cellIndex];
-        const toggleMenuMethod = get(column, ['filterMenu', 'current', 'toggleMenu']);
-        if (isFunction(toggleMenuMethod)) toggleMenuMethod();
-      }
-    };
-  }
-
-});
-
-export { FilterablePlugin };

package/esm/plugins/filterable/addFilterToColumn.js

@@ -1,23 +0,0 @@
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import { createRef } from 'react';
-import { mergeClassNameToColumnHeader } from '@elliemae/ds-shared/useDataGrid/initColumnDefinition';
-import FilterableFormatter from './filterableFormatter.js';
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-const addFilterToColumn = (props, column) => {
-  const filterMenuRef = /*#__PURE__*/createRef();
-  column.header.formatters.push(FilterableFormatter(_objectSpread(_objectSpread({}, props), {}, {
-    filterMenuRef
-  })));
-  column.filterMenu = filterMenuRef;
-  return mergeClassNameToColumnHeader('with-filtering', column);
-};
-
-export { addFilterToColumn };

package/esm/plugins/filterable/components/FilterableHeader.js

@@ -1,113 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import 'core-js/modules/es.string.replace.js';
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import { useState, useEffect, useCallback } from 'react';
-import { aggregatedClasses } from '@elliemae/ds-classnames';
-import { debounce, useResizeObserver, get } from '@elliemae/ds-utilities';
-import { useTheme } from '@elliemae/ds-system';
-import getFilterMenuByType from './filterable-menus/getFilterMenuByType.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-const blockName = 'data-grid-filter-header';
-const Container = aggregatedClasses('div')(blockName, null, _ref => {
-  let {
-    showFilter
-  } = _ref;
-  return {
-    'show-filter': showFilter
-  };
-});
-const FilterHeaderValue = aggregatedClasses('div')(blockName, 'value');
-const FilterHeaderButton = aggregatedClasses('div')(blockName, 'button');
-function FilterableHeader(_ref2) {
-  let {
-    column,
-    value,
-    columnData,
-    onAddFilter,
-    onRemoveFilter,
-    filterMenuRef,
-    onFilterMenuClose,
-    onFilterMenuOpen,
-    filters,
-    isMulti
-  } = _ref2;
-  const [isMenuOpened, setMenuOpened] = useState(false);
-  const [headerWidth, setHeaderWidth] = useState();
-  const debouncedWidthSetter = debounce(setHeaderWidth, 200);
-  const {
-    filterMenuMinWidth,
-    filterMenuMaxWidth
-  } = column;
-  const theme = useTheme();
-  const dropdownMinWidth = filterMenuMinWidth || Number(theme.space.xl.replace('px', '')) * 2;
-
-  const defineHeaderWidth = _ref3 => {
-    let {
-      width
-    } = _ref3;
-    let nextWidth = width + 16; // todo: use dimsum space once we convert it to JS
-
-    if (nextWidth < dropdownMinWidth) nextWidth = dropdownMinWidth;
-    if (filterMenuMaxWidth && nextWidth > filterMenuMaxWidth) nextWidth = filterMenuMaxWidth;
-    return !isMenuOpened ? debouncedWidthSetter(nextWidth) : setHeaderWidth(nextWidth);
-  };
-
-  useEffect(() => {
-    if (filterMenuRef) {
-      filterMenuRef.current = {
-        toggleMenu: () => setMenuOpened(prevState => !prevState)
-      };
-    }
-  }, [filterMenuRef]);
-  useEffect(() => {
-    if (!isMenuOpened) onFilterMenuClose(column);else onFilterMenuOpen(column);
-  });
-  const [ref] = useResizeObserver(defineHeaderWidth);
-  const handleOpenMenu = useCallback(open => {
-    setMenuOpened(open);
-    if (open) onFilterMenuOpen();
-  }, []);
-  const FilterMenuComponent = getFilterMenuByType(get(column, ['filter', 'type']));
-  return /*#__PURE__*/jsxs(Container, {
-    ref: ref,
-    classProps: {
-      showFilter: isMenuOpened
-    },
-    children: [/*#__PURE__*/_jsx(FilterHeaderValue, {
-      className: "header-value"
-    }, void 0, value), /*#__PURE__*/_jsx(FilterHeaderButton, {
-      "data-testid": "data-grid-filter-header__button"
-    }, void 0, /*#__PURE__*/jsx(FilterMenuComponent, _objectSpread({
-      className: "filter-header-menu",
-      column: column,
-      filters: filters,
-      isMenuOpened: isMenuOpened,
-      isMulti: isMulti,
-      menuProps: {
-        options: columnData || [],
-        style: {
-          minWidth: headerWidth,
-          maxWidth: filterMenuMaxWidth
-        },
-        zIndex: 100
-      },
-      onAddFilter: onAddFilter,
-      onRemoveFilter: onRemoveFilter,
-      onOpenMenu: handleOpenMenu,
-      onClose: onFilterMenuClose,
-      width: headerWidth
-    }, get(column, ['filter'], {}))))]
-  });
-}
-
-export { FilterableHeader as default };