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

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

@@ -0,0 +1,79 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/web.dom-collections.iterator.js');
+var dsUtilities = require('@elliemae/ds-utilities');
+var React = require('react');
+
+const useExpandGridState = grid => {
+  const {
+    composedRows,
+    props: {
+      expandedRows: expandedRowsProp = {},
+      rowKey = 'id',
+      onExpandRow,
+      onToggleShowAllRows,
+      onExpandChange,
+      onExpandAll,
+      onToggleExpand,
+      onCollapseRow
+    }
+  } = grid;
+  const {
+    state,
+    actions
+  } = dsUtilities.useExpandState({
+    items: composedRows,
+    itemKey: rowKey,
+    expanded: expandedRowsProp,
+    onExpand: onExpandRow,
+    onExpandChange,
+    onExpandAll,
+    onToggleExpand,
+    onCollapse: onCollapseRow
+  });
+  const [shouldRefocus, setShouldReFocus] = React.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 (dsUtilities.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
+    }
+  };
+};
+
+exports.useExpandGridState = useExpandGridState;

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

@@ -0,0 +1,168 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.reduce.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/es.string.replace.js');
+require('core-js/modules/web.url.js');
+require('core-js/modules/web.url-search-params.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var dsUtilities = require('@elliemae/ds-utilities');
+var createInstancePlugin = require('@elliemae/ds-shared/createDataInstance/createInstancePlugin');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var createInstancePlugin__default = /*#__PURE__*/_interopDefaultLegacy(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__default["default"](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) => dsUtilities.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__default["default"]('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);
+      }
+
+    };
+  }
+
+});
+
+exports.ExportDataPlugin = ExportDataPlugin;
+exports.getColumnValue = getColumnValue;
+exports.getExportedData = getExportedData;
+exports.getVisibleRowData = getVisibleRowData;

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

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var ExportDataPlugin = require('./ExportDataPlugin.js');
+
+
+
+exports.ExportDataPlugin = ExportDataPlugin.ExportDataPlugin;
+exports.getColumnValue = ExportDataPlugin.getColumnValue;
+exports.getExportedData = ExportDataPlugin.getExportedData;
+exports.getVisibleRowData = ExportDataPlugin.getVisibleRowData;

package/cjs/plugins/filterable/FilterablePlugin.js

@@ -0,0 +1,81 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dsUtilities = require('@elliemae/ds-utilities');
+var createInstancePlugin = require('@elliemae/ds-shared/createDataInstance/createInstancePlugin');
+var addFilterToColumn = require('./addFilterToColumn.js');
+var filterRowsByQuery = require('./filtering-helper/filterRowsByQuery.js');
+var useFilterableState = require('./useFilterableState.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var createInstancePlugin__default = /*#__PURE__*/_interopDefaultLegacy(createInstancePlugin);
+
+/* 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.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["default"](rows, query) : filterRowsByQuery.filterRowsByQueryGroup(rows, query, composedRows);
+  return !isDataFiltered ? nextRows : rows;
+};
+
+const FilterablePlugin = createInstancePlugin__default["default"]('filterable', {
+  registerStateHook: useFilterableState.useFilterableState,
+  decorateColumn,
+  composeRows,
+
+  registerHotKeys(grid) {
+    return {
+      key: 'ctrl+f',
+      handler: _ref => {
+        let {
+          cellIndex
+        } = _ref;
+        const {
+          decoratedColumns
+        } = grid.getInstance();
+        const column = decoratedColumns[cellIndex];
+        const toggleMenuMethod = dsUtilities.get(column, ['filterMenu', 'current', 'toggleMenu']);
+        if (dsUtilities.isFunction(toggleMenuMethod)) toggleMenuMethod();
+      }
+    };
+  }
+
+});
+
+exports.FilterablePlugin = FilterablePlugin;

package/cjs/plugins/filterable/addFilterToColumn.js

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var React = require('react');
+var initColumnDefinition = require('@elliemae/ds-shared/useDataGrid/initColumnDefinition');
+var filterableFormatter = require('./filterableFormatter.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+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__default["default"](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__*/React.createRef();
+  column.header.formatters.push(filterableFormatter(_objectSpread(_objectSpread({}, props), {}, {
+    filterMenuRef
+  })));
+  column.filterMenu = filterMenuRef;
+  return initColumnDefinition.mergeClassNameToColumnHeader('with-filtering', column);
+};
+
+exports.addFilterToColumn = addFilterToColumn;

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

@@ -0,0 +1,120 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/es.string.replace.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var React = require('react');
+var dsClassnames = require('@elliemae/ds-classnames');
+var dsUtilities = require('@elliemae/ds-utilities');
+var dsSystem = require('@elliemae/ds-system');
+var getFilterMenuByType = require('./filterable-menus/getFilterMenuByType.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+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__default["default"](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 = dsClassnames.aggregatedClasses('div')(blockName, null, _ref => {
+  let {
+    showFilter
+  } = _ref;
+  return {
+    'show-filter': showFilter
+  };
+});
+const FilterHeaderValue = dsClassnames.aggregatedClasses('div')(blockName, 'value');
+const FilterHeaderButton = dsClassnames.aggregatedClasses('div')(blockName, 'button');
+function FilterableHeader(_ref2) {
+  let {
+    column,
+    value,
+    columnData,
+    onAddFilter,
+    onRemoveFilter,
+    filterMenuRef,
+    onFilterMenuClose,
+    onFilterMenuOpen,
+    filters,
+    isMulti
+  } = _ref2;
+  const [isMenuOpened, setMenuOpened] = React.useState(false);
+  const [headerWidth, setHeaderWidth] = React.useState();
+  const debouncedWidthSetter = dsUtilities.debounce(setHeaderWidth, 200);
+  const {
+    filterMenuMinWidth,
+    filterMenuMaxWidth
+  } = column;
+  const theme = dsSystem.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);
+  };
+
+  React.useEffect(() => {
+    if (filterMenuRef) {
+      filterMenuRef.current = {
+        toggleMenu: () => setMenuOpened(prevState => !prevState)
+      };
+    }
+  }, [filterMenuRef]);
+  React.useEffect(() => {
+    if (!isMenuOpened) onFilterMenuClose(column);else onFilterMenuOpen(column);
+  });
+  const [ref] = dsUtilities.useResizeObserver(defineHeaderWidth);
+  const handleOpenMenu = React.useCallback(open => {
+    setMenuOpened(open);
+    if (open) onFilterMenuOpen();
+  }, []);
+  const FilterMenuComponent = getFilterMenuByType(dsUtilities.get(column, ['filter', 'type']));
+  return /*#__PURE__*/jsxRuntime.jsxs(Container, {
+    ref: ref,
+    classProps: {
+      showFilter: isMenuOpened
+    },
+    children: [/*#__PURE__*/_jsx__default["default"](FilterHeaderValue, {
+      className: "header-value"
+    }, void 0, value), /*#__PURE__*/_jsx__default["default"](FilterHeaderButton, {
+      "data-testid": "data-grid-filter-header__button"
+    }, void 0, /*#__PURE__*/jsxRuntime.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
+    }, dsUtilities.get(column, ['filter'], {}))))]
+  });
+}
+
+module.exports = FilterableHeader;

package/cjs/plugins/filterable/components/filterable-menus/DateRangeFilterMenu.js

@@ -0,0 +1,157 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+var React = require('react');
+var dsControlledForm = require('@elliemae/ds-controlled-form');
+var DSPopper = require('@elliemae/ds-popper');
+var dsIcons = require('@elliemae/ds-icons');
+var DSButton = require('@elliemae/ds-button');
+var moment = require('moment');
+var dsClassnames = require('@elliemae/ds-classnames');
+var defaultDateFormat = require('./defaultDateFormat.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var DSPopper__default = /*#__PURE__*/_interopDefaultLegacy(DSPopper);
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
+
+var _DatePicker;
+const blockname = 'date-range';
+const Wrapper = dsClassnames.aggregatedClasses('div')(blockname, 'wrapper');
+const Header = dsClassnames.aggregatedClasses('div')(blockname, 'header'); // const randomString = (maxLength = 5) => Math.random().toString(36).slice(-maxLength);
+
+const DateRangePickerContainer = _ref => {
+  let {
+    onChange = () => null,
+    showHeader
+  } = _ref;
+  const [startDate, setStartDate] = React.useState('');
+  const [endDate, setEndDate] = React.useState(''); // For some reason it worked like this
+
+  const [lastChangeWasPicker, setLastChangeWasPicker] = React.useState(false);
+  React.useEffect(() => {
+    const startMoment = moment__default["default"](startDate);
+    const endMoment = moment__default["default"](endDate);
+
+    if (lastChangeWasPicker && startDate && !startDate.includes('_') && endDate && !endDate.includes('_') && endMoment.diff(startMoment) >= 0) {
+      onChange({
+        startDate: startMoment,
+        endDate: endMoment
+      });
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [startDate, endDate, lastChangeWasPicker]);
+  return /*#__PURE__*/_jsx__default["default"](Wrapper, {
+    "data-testid": "date-range__wrapper",
+    onKeyDown: e => e.code === 'Enter' && setLastChangeWasPicker(true),
+    style: {
+      backgroundColor: 'white',
+      boxShadow: '0 6px 20px 0 rgb(0 0 0 / 24%)',
+      width: '261px'
+    }
+  }, void 0, showHeader && /*#__PURE__*/_jsx__default["default"](Header, {
+    style: {
+      padding: '8px',
+      display: 'flex',
+      justifyContent: 'center'
+    }
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsControlledForm.DSControlledDateRangePicker, {
+    fromDate: startDate,
+    onFromDateChange: _start => {
+      setStartDate(_start);
+      setLastChangeWasPicker(false);
+    },
+    toDate: endDate,
+    onToDateChange: _end => {
+      setEndDate(_end);
+      setLastChangeWasPicker(false);
+    },
+    type: "date-range-inputs"
+  })), /*#__PURE__*/_jsx__default["default"](dsControlledForm.DSControlledDateRangePicker, {
+    fromDate: startDate,
+    onFromDateChange: _start => {
+      setStartDate(_start);
+      setLastChangeWasPicker(true);
+    },
+    toDate: endDate,
+    onToDateChange: _end => {
+      setEndDate(_end);
+      setLastChangeWasPicker(true);
+    },
+    type: "date-range-picker-controller-only"
+  }));
+};
+
+const formatRangeDate = function (_ref2) {
+  let {
+    startDate,
+    endDate
+  } = _ref2;
+  let format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultDateFormat.DEFAULT_DATE_FORMAT;
+  const sameDay = startDate.isSame(endDate, 'day');
+  if (sameDay) return "".concat(endDate.format(format));
+  return "".concat(startDate.format(format), " - ").concat(endDate.format(format));
+};
+
+function DateRangeFilterMenu(_ref3) {
+  let {
+    column,
+    className,
+    isMenuOpened = false,
+    onOpenMenu = () => null,
+    placement = DSPopper.PopperPositions.BOTTOM_END,
+    onAddFilter = () => null,
+    dateFormatter = formatRangeDate,
+    showHeader = true,
+    menuProps
+  } = _ref3;
+  return /*#__PURE__*/_jsx__default["default"](DSPopper__default["default"], {
+    contentComponent: /*#__PURE__*/_jsx__default["default"]("div", {
+      className: className
+    }, void 0, /*#__PURE__*/_jsx__default["default"](DateRangePickerContainer, {
+      minimumNights: 0,
+      onChange: _ref4 => {
+        let {
+          startDate,
+          endDate
+        } = _ref4;
+        startDate.startOf('day');
+        endDate.endOf('day');
+        onAddFilter({
+          group: column.property,
+          label: column.label,
+          value: dateFormatter({
+            startDate,
+            endDate
+          }),
+          type: 'date',
+          // todo: create constants for filter types
+          filterParams: {
+            start: startDate,
+            end: endDate
+          },
+          transformRowValue: value => moment__default["default"](value, column.dateFormat || defaultDateFormat.DEFAULT_DATE_FORMAT),
+          operator: 'range'
+        }, column);
+        onOpenMenu(false);
+      },
+      showHeader: showHeader
+    })),
+    isOpen: isMenuOpened,
+    onOpen: onOpenMenu,
+    placement: placement,
+    showArrow: false,
+    triggerComponent: /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+      buttonType: "text",
+      icon: _DatePicker || (_DatePicker = /*#__PURE__*/_jsx__default["default"](dsIcons.DatePicker2, {})),
+      onClick: () => !isMenuOpened ? onOpenMenu(true) : onOpenMenu(false),
+      size: "s"
+    }),
+    zIndex: menuProps.zIndex
+  });
+}
+
+module.exports = DateRangeFilterMenu;