@elliemae/ds-datagrids 2.3.0-alpha.9 → 2.3.0-next.11

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

@@ -0,0 +1,143 @@
+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

@@ -0,0 +1,46 @@
+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

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

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

@@ -0,0 +1,75 @@
+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

@@ -0,0 +1,156 @@
+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

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

package/esm/plugins/filterable/FilterablePlugin.js

@@ -0,0 +1,73 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,113 @@
+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 };