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

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

@@ -0,0 +1,134 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var ExportDataPlugin_exports = {};
+__export(ExportDataPlugin_exports, {
+  ExportDataPlugin: () => ExportDataPlugin,
+  getColumnValue: () => getColumnValue,
+  getExportedData: () => getExportedData,
+  getVisibleRowData: () => getVisibleRowData
+});
+var React = __toESM(require("react"));
+var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_createInstancePlugin = require("@elliemae/ds-shared/createDataInstance/createInstancePlugin");
+const isVisible = (column) => {
+  if (typeof column === "undefined") {
+    return false;
+  }
+  return typeof column.visible === "undefined" || column.visible;
+};
+const getColumnValue = (row, property) => (0, import_ds_utilities.get)(row, property);
+const getVisibleRowData = (row, columns) => columns.reduce((result, column) => {
+  const columnProperty = column.property;
+  return isVisible(column) ? [...result, getColumnValue(row, `_${columnProperty}`) || getColumnValue(row, columnProperty)] : result;
+}, []);
+const defaultOptions = (uuid) => ({
+  sheetName: "SheetName",
+  fileName: `datagrid-${uuid}`,
+  type: "csv",
+  onlySelection: false,
+  excludedColumns: void 0
+});
+const getOptions = (opts, uuid) => ({
+  ...defaultOptions(uuid),
+  ...opts
+});
+const getCellValue = (cell) => {
+  if (cell === void 0 || 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) => `${acc}${idx === 0 ? "" : ","}${curr.label}`, "");
+  const rowsContent = dataToExport.map((e) => e.map((r) => `"${String(getCellValue(r)).replace(/"/g, '""')}"`).join(",")).join("\r\n");
+  const csvContent = `${columnsContent}\r
+${rowsContent}`;
+  return csvContent;
+};
+const exportTo = (rows, columns, { range, fileName, type, excludedColumns }) => {
+  if (excludedColumns) {
+    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) {
+    navigator.msSaveBlob(blob, `${fileName}.${type}`);
+  } else {
+    const link = document.createElement("a");
+    if (link.download !== void 0) {
+      const url = URL.createObjectURL(blob);
+      link.setAttribute("href", url);
+      link.setAttribute("download", `${fileName}.${type}`);
+      link.style.visibility = "hidden";
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    }
+  }
+};
+const ExportDataPlugin = (0, import_createInstancePlugin.createInstancePlugin)("export-data", {
+  decorateGrid(instance) {
+    return {
+      exportRows(opts = {}) {
+        const {
+          composedRows: rows,
+          columns,
+          uuid,
+          props: { rowKey },
+          state: { selection }
+        } = instance.getInstance();
+        const options = getOptions(opts, uuid);
+        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(opts = {}) {
+        const {
+          composedRows: rows,
+          columns,
+          uuid,
+          props: { rowKey },
+          state: { selection }
+        } = instance.getInstance();
+        const options = getOptions(opts, uuid);
+        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);
+      }
+    };
+  }
+});
+module.exports = __toCommonJS(ExportDataPlugin_exports);
+//# sourceMappingURL=ExportDataPlugin.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/plugins/export-data/ExportDataPlugin.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable indent */\nimport { get } from '@elliemae/ds-utilities';\nimport { createInstancePlugin } from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';\n\nconst isVisible = (column) => {\n  if (typeof column === 'undefined') {\n    return false;\n  }\n  return typeof column.visible === 'undefined' || column.visible;\n};\n\nexport const getColumnValue = (row, property) => get(row, property);\nexport const getVisibleRowData = (row, columns) =>\n  columns.reduce((result, column) => {\n    const columnProperty = column.property;\n    return isVisible(column)\n      ? [...result, getColumnValue(row, `_${columnProperty}`) || getColumnValue(row, columnProperty)]\n      : result;\n  }, []);\n\nconst defaultOptions = (uuid) => ({\n  sheetName: 'SheetName',\n  fileName: `datagrid-${uuid}`,\n  type: 'csv',\n  onlySelection: false,\n  excludedColumns: undefined,\n});\n\nconst getOptions = (opts, uuid) => ({\n  ...defaultOptions(uuid),\n  ...opts,\n});\n\nconst getCellValue = (cell) => {\n  if (cell === undefined || cell === null) return '';\n  return cell;\n};\n\nexport const getExportedData = (rows, columns, range) => {\n  const rowsRanged = range ? rows.slice(...range) : rows;\n  const dataToExport = rowsRanged.map((row) => getVisibleRowData(row, columns));\n  const columnsContent = columns\n    .filter((c) => isVisible(c))\n    .reduce((acc, curr, idx) => `${acc}${idx === 0 ? '' : ','}${curr.label}`, '');\n  const rowsContent = dataToExport\n    .map((e) => e.map((r) => `\"${String(getCellValue(r)).replace(/\"/g, '\"\"')}\"`).join(','))\n    .join('\\r\\n');\n  const csvContent = `${columnsContent}\\r\\n${rowsContent}`;\n  return csvContent;\n};\n\n// eslint-disable-next-line max-statements\nconst exportTo = (rows, columns, { range, fileName, type, excludedColumns }) => {\n  if (excludedColumns) {\n    // eslint-disable-next-line no-param-reassign\n    columns = columns.filter((col) => !excludedColumns.includes(col.property));\n  }\n  const csvContent = getExportedData(rows, columns, range);\n\n  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });\n  if (navigator.msSaveBlob) {\n    // IE 10+\n    navigator.msSaveBlob(blob, `${fileName}.${type}`);\n  } else {\n    const link = document.createElement('a');\n    if (link.download !== undefined) {\n      // feature detection\n      // Browsers that support HTML5 download attribute\n      const url = URL.createObjectURL(blob);\n      link.setAttribute('href', url);\n      link.setAttribute('download', `${fileName}.${type}`);\n      link.style.visibility = 'hidden';\n      document.body.appendChild(link);\n      link.click();\n      document.body.removeChild(link);\n    }\n  }\n};\n\nexport const ExportDataPlugin = createInstancePlugin('export-data', {\n  decorateGrid(instance) {\n    return {\n      exportRows(opts = {}) {\n        const {\n          composedRows: rows,\n          columns,\n          uuid,\n          props: { rowKey },\n          state: { selection },\n        } = instance.getInstance();\n        const options = getOptions(opts, uuid);\n        // check paginated rows\n        let currentRows = rows.allRows || rows;\n        if (opts.onlySelection) {\n          const selectedRows = Object.keys(selection.selectedRows);\n          currentRows = currentRows.filter((r) => selectedRows.includes(String(r[rowKey])));\n        }\n\n        exportTo(currentRows, columns, options);\n      },\n      exportVisibleRows(opts = {}) {\n        const {\n          composedRows: rows,\n          columns,\n          uuid,\n          props: { rowKey },\n          state: { selection },\n        } = instance.getInstance();\n        const options = getOptions(opts, uuid);\n\n        // check paginated rows\n        let currentRows = rows.rows || rows;\n        if (opts.onlySelection) {\n          const selectedRows = Object.keys(selection.selectedRows);\n          currentRows = currentRows.filter((r) => selectedRows.includes(String(r[rowKey])));\n        }\n\n        exportTo(currentRows, columns, options);\n      },\n    };\n  },\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,35 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var export_data_exports = {};
+__export(export_data_exports, {
+  ExportDataPlugin: () => import_ExportDataPlugin.ExportDataPlugin
+});
+var React = __toESM(require("react"));
+var import_ExportDataPlugin = require("./ExportDataPlugin");
+module.exports = __toCommonJS(export_data_exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/plugins/export-data/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export { ExportDataPlugin } from './ExportDataPlugin';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAiC;",
+  "names": []
+}

package/dist/cjs/plugins/filterable/FilterablePlugin.js

@@ -0,0 +1,80 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var FilterablePlugin_exports = {};
+__export(FilterablePlugin_exports, {
+  FilterablePlugin: () => FilterablePlugin
+});
+var React = __toESM(require("react"));
+var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_createInstancePlugin = require("@elliemae/ds-shared/createDataInstance/createInstancePlugin");
+var import_addFilterToColumn = require("./addFilterToColumn");
+var import_filterRowsByQuery = __toESM(require("./filtering-helper/filterRowsByQuery"));
+var import_useFilterableState = require("./useFilterableState");
+const decorateColumn = (column, grid) => {
+  const {
+    props: { isFilterableColumnActive = (col) => col.searchable, onRemoveAllFilters },
+    actions: { addFilter, removeFilter },
+    state: { query, filters }
+  } = grid;
+  return isFilterableColumnActive(column) ? (0, import_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 ? (0, import_filterRowsByQuery.default)(rows, query) : (0, import_filterRowsByQuery.filterRowsByQueryGroup)(rows, query, composedRows);
+  return !isDataFiltered ? nextRows : rows;
+};
+const FilterablePlugin = (0, import_createInstancePlugin.createInstancePlugin)("filterable", {
+  registerStateHook: import_useFilterableState.useFilterableState,
+  decorateColumn,
+  composeRows,
+  registerHotKeys(grid) {
+    return {
+      key: "ctrl+f",
+      handler: ({ cellIndex }) => {
+        const { decoratedColumns } = grid.getInstance();
+        const column = decoratedColumns[cellIndex];
+        const toggleMenuMethod = (0, import_ds_utilities.get)(column, ["filterMenu", "current", "toggleMenu"]);
+        if ((0, import_ds_utilities.isFunction)(toggleMenuMethod))
+          toggleMenuMethod();
+      }
+    };
+  }
+});
+module.exports = __toCommonJS(FilterablePlugin_exports);
+//# sourceMappingURL=FilterablePlugin.js.map

package/dist/cjs/plugins/filterable/FilterablePlugin.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/plugins/filterable/FilterablePlugin.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable indent */\nimport { get, isFunction } from '@elliemae/ds-utilities';\nimport { createInstancePlugin } from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';\nimport { addFilterToColumn } from './addFilterToColumn';\n\nimport filterRowsByQuery, { filterRowsByQueryGroup } from './filtering-helper/filterRowsByQuery';\nimport { useFilterableState } from './useFilterableState';\n\nconst decorateColumn = (column, grid) => {\n  const {\n    props: { isFilterableColumnActive = (col) => col.searchable, onRemoveAllFilters },\n    actions: { addFilter, removeFilter },\n    state: { query, filters },\n  } = grid;\n\n  return isFilterableColumnActive(column)\n    ? addFilterToColumn(\n        {\n          grid,\n          onAddFilter: addFilter,\n          onRemoveFilter: removeFilter,\n          onRemoveAllFilters,\n          query,\n          filters,\n        },\n        column,\n      )\n    : column;\n};\n\nconst composeRows = (rows, grid) => {\n  const {\n    props: { isDataFiltered, groupedRows },\n    state: { query },\n    composedRows,\n  } = grid.getInstance();\n  const nextRows = !groupedRows ? filterRowsByQuery(rows, query) : filterRowsByQueryGroup(rows, query, composedRows);\n\n  return !isDataFiltered ? nextRows : rows;\n};\n\nexport const FilterablePlugin = createInstancePlugin('filterable', {\n  registerStateHook: useFilterableState,\n  decorateColumn,\n  composeRows,\n  registerHotKeys(grid) {\n    return {\n      key: 'ctrl+f',\n      handler: ({ cellIndex }) => {\n        const { decoratedColumns } = grid.getInstance();\n\n        const column = decoratedColumns[cellIndex];\n        const toggleMenuMethod = get(column, ['filterMenu', 'current', 'toggleMenu']);\n        if (isFunction(toggleMenuMethod)) toggleMenuMethod();\n      },\n    };\n  },\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAAgC;AAChC,kCAAqC;AACrC,+BAAkC;AAElC,+BAA0D;AAC1D,gCAAmC;AAEnC,MAAM,iBAAiB,CAAC,QAAQ,SAAS;AACvC,QAAM;AAAA,IACJ,OAAO,EAAE,2BAA2B,CAAC,QAAQ,IAAI,YAAY;AAAA,IAC7D,SAAS,EAAE,WAAW;AAAA,IACtB,OAAO,EAAE,OAAO;AAAA,MACd;AAEJ,SAAO,yBAAyB,UAC5B,gDACE;AAAA,IACE;AAAA,IACA,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,KAEF,UAEF;AAAA;AAGN,MAAM,cAAc,CAAC,MAAM,SAAS;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB;AAAA,IACzB,OAAO,EAAE;AAAA,IACT;AAAA,MACE,KAAK;AACT,QAAM,WAAW,CAAC,cAAc,sCAAkB,MAAM,SAAS,qDAAuB,MAAM,OAAO;AAErG,SAAO,CAAC,iBAAiB,WAAW;AAAA;AAG/B,MAAM,mBAAmB,sDAAqB,cAAc;AAAA,EACjE,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA,gBAAgB,MAAM;AACpB,WAAO;AAAA,MACL,KAAK;AAAA,MACL,SAAS,CAAC,EAAE,gBAAgB;AAC1B,cAAM,EAAE,qBAAqB,KAAK;AAElC,cAAM,SAAS,iBAAiB;AAChC,cAAM,mBAAmB,6BAAI,QAAQ,CAAC,cAAc,WAAW;AAC/D,YAAI,oCAAW;AAAmB;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/cjs/plugins/filterable/addFilterToColumn.js

@@ -0,0 +1,43 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var addFilterToColumn_exports = {};
+__export(addFilterToColumn_exports, {
+  addFilterToColumn: () => addFilterToColumn
+});
+var React = __toESM(require("react"));
+var import_react = require("react");
+var import_initColumnDefinition = require("@elliemae/ds-shared/useDataGrid/initColumnDefinition");
+var import_filterableFormatter = require("./filterableFormatter");
+const addFilterToColumn = (props, column) => {
+  const filterMenuRef = (0, import_react.createRef)();
+  column.header.formatters.push((0, import_filterableFormatter.FilterableFormatter)({ ...props, filterMenuRef }));
+  column.filterMenu = filterMenuRef;
+  return (0, import_initColumnDefinition.mergeClassNameToColumnHeader)("with-filtering", column);
+};
+module.exports = __toCommonJS(addFilterToColumn_exports);
+//# sourceMappingURL=addFilterToColumn.js.map

package/dist/cjs/plugins/filterable/addFilterToColumn.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/plugins/filterable/addFilterToColumn.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { createRef } from 'react';\nimport { mergeClassNameToColumnHeader } from '@elliemae/ds-shared/useDataGrid/initColumnDefinition';\nimport { FilterableFormatter } from './filterableFormatter';\n\nexport const addFilterToColumn = (props, column) => {\n  const filterMenuRef = createRef();\n  column.header.formatters.push(\n    FilterableFormatter({ ...props, filterMenuRef }),\n  );\n  column.filterMenu = filterMenuRef;\n  return mergeClassNameToColumnHeader('with-filtering', column);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA0B;AAC1B,kCAA6C;AAC7C,iCAAoC;AAE7B,MAAM,oBAAoB,CAAC,OAAO,WAAW;AAClD,QAAM,gBAAgB;AACtB,SAAO,OAAO,WAAW,KACvB,oDAAoB,KAAK,OAAO;AAElC,SAAO,aAAa;AACpB,SAAO,8DAA6B,kBAAkB;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,132 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var FilterableHeader_exports = {};
+__export(FilterableHeader_exports, {
+  FilterableHeader: () => FilterableHeader,
+  default: () => FilterableHeader_default
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_prop_types = __toESM(require("prop-types"));
+var import_ds_classnames = require("@elliemae/ds-classnames");
+var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_ds_system = require("@elliemae/ds-system");
+var import_getFilterMenuByType = require("./filterable-menus/getFilterMenuByType");
+const blockName = "data-grid-filter-header";
+const Container = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, null, ({ showFilter }) => ({
+  "show-filter": showFilter
+}));
+const FilterHeaderValue = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "value");
+const FilterHeaderButton = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "button");
+const FilterableHeader = ({
+  column,
+  value,
+  columnData,
+  onAddFilter,
+  onRemoveFilter,
+  filterMenuRef,
+  onFilterMenuClose,
+  onFilterMenuOpen,
+  filters,
+  isMulti
+}) => {
+  const [isMenuOpened, setMenuOpened] = (0, import_react.useState)(false);
+  const [headerWidth, setHeaderWidth] = (0, import_react.useState)();
+  const debouncedWidthSetter = (0, import_ds_utilities.debounce)(setHeaderWidth, 200);
+  const { filterMenuMinWidth, filterMenuMaxWidth } = column;
+  const theme = (0, import_ds_system.useTheme)();
+  const dropdownMinWidth = filterMenuMinWidth || Number(theme.space.xl.replace("px", "")) * 2;
+  const defineHeaderWidth = ({ width }) => {
+    let nextWidth = width + 16;
+    if (nextWidth < dropdownMinWidth)
+      nextWidth = dropdownMinWidth;
+    if (filterMenuMaxWidth && nextWidth > filterMenuMaxWidth)
+      nextWidth = filterMenuMaxWidth;
+    return !isMenuOpened ? debouncedWidthSetter(nextWidth) : setHeaderWidth(nextWidth);
+  };
+  (0, import_react.useEffect)(() => {
+    if (filterMenuRef) {
+      filterMenuRef.current = {
+        toggleMenu: () => setMenuOpened((prevState) => !prevState)
+      };
+    }
+  }, [filterMenuRef]);
+  (0, import_react.useEffect)(() => {
+    if (!isMenuOpened)
+      onFilterMenuClose(column);
+    else
+      onFilterMenuOpen(column);
+  });
+  const [ref] = (0, import_ds_utilities.useResizeObserver)(defineHeaderWidth);
+  const handleOpenMenu = (0, import_react.useCallback)((open) => {
+    setMenuOpened(open);
+    if (open)
+      onFilterMenuOpen();
+  }, []);
+  const FilterMenuComponent = (0, import_getFilterMenuByType.getFilterMenuByType)((0, import_ds_utilities.get)(column, ["filter", "type"]));
+  return /* @__PURE__ */ import_react.default.createElement(Container, {
+    ref,
+    classProps: { showFilter: isMenuOpened }
+  }, /* @__PURE__ */ import_react.default.createElement(FilterHeaderValue, {
+    className: "header-value"
+  }, value), /* @__PURE__ */ import_react.default.createElement(FilterHeaderButton, {
+    "data-testid": "data-grid-filter-header__button"
+  }, /* @__PURE__ */ import_react.default.createElement(FilterMenuComponent, {
+    className: "filter-header-menu",
+    column,
+    filters,
+    isMenuOpened,
+    isMulti,
+    menuProps: {
+      options: columnData || [],
+      style: { minWidth: headerWidth, maxWidth: filterMenuMaxWidth },
+      zIndex: 100
+    },
+    onAddFilter,
+    onRemoveFilter,
+    onOpenMenu: handleOpenMenu,
+    onClose: onFilterMenuClose,
+    width: headerWidth,
+    ...(0, import_ds_utilities.get)(column, ["filter"], {})
+  })));
+};
+FilterableHeader.propTypes = {
+  column: import_prop_types.default.any,
+  value: import_prop_types.default.any,
+  columnData: import_prop_types.default.any,
+  onAddFilter: import_prop_types.default.func,
+  onRemoveFilter: import_prop_types.default.func,
+  filterMenuRef: import_prop_types.default.any,
+  onFilterMenuClose: import_prop_types.default.func,
+  onFilterMenuOpen: import_prop_types.default.func,
+  filters: import_prop_types.default.arrayOf(import_prop_types.default.shape({})),
+  isMulti: import_prop_types.default.bool
+};
+var FilterableHeader_default = FilterableHeader;
+module.exports = __toCommonJS(FilterableHeader_exports);
+//# sourceMappingURL=FilterableHeader.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/plugins/filterable/components/FilterableHeader.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable no-param-reassign */\nimport React, { useCallback, useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { get, debounce, useResizeObserver} from '@elliemae/ds-utilities';\nimport { useTheme } from '@elliemae/ds-system';\nimport { getFilterMenuByType } from './filterable-menus/getFilterMenuByType';\n\nconst blockName = 'data-grid-filter-header';\n\nconst Container = aggregatedClasses('div')(blockName, null, ({ showFilter }) => ({\n  'show-filter': showFilter,\n}));\nconst FilterHeaderValue = aggregatedClasses('div')(blockName, 'value');\nconst FilterHeaderButton = aggregatedClasses('div')(blockName, 'button');\n\nexport const FilterableHeader = ({\n  column,\n  value,\n  columnData,\n  onAddFilter,\n  onRemoveFilter,\n  filterMenuRef,\n  onFilterMenuClose,\n  onFilterMenuOpen,\n  filters,\n  isMulti,\n}) => {\n  const [isMenuOpened, setMenuOpened] = useState(false);\n  const [headerWidth, setHeaderWidth] = useState();\n  const debouncedWidthSetter = debounce(setHeaderWidth, 200);\n  const { filterMenuMinWidth, filterMenuMaxWidth } = column;\n  const theme = useTheme();\n  const dropdownMinWidth = filterMenuMinWidth || Number(theme.space.xl.replace('px', '')) * 2;\n\n  const defineHeaderWidth = ({ width }) => {\n    let nextWidth = width + 16; // todo: use dimsum space once we convert it to JS\n    if (nextWidth < dropdownMinWidth) nextWidth = dropdownMinWidth;\n    if (filterMenuMaxWidth && nextWidth > filterMenuMaxWidth) nextWidth = filterMenuMaxWidth;\n    return !isMenuOpened ? debouncedWidthSetter(nextWidth) : setHeaderWidth(nextWidth);\n  };\n\n  useEffect(() => {\n    if (filterMenuRef) {\n      filterMenuRef.current = {\n        toggleMenu: () => setMenuOpened((prevState) => !prevState),\n      };\n    }\n  }, [filterMenuRef]);\n\n  useEffect(() => {\n    if (!isMenuOpened) onFilterMenuClose(column);\n    else onFilterMenuOpen(column);\n  });\n\n  const [ref] = useResizeObserver(defineHeaderWidth);\n  const handleOpenMenu = useCallback((open) => {\n    setMenuOpened(open);\n    if (open) onFilterMenuOpen();\n  }, []);\n  const FilterMenuComponent = getFilterMenuByType(get(column, ['filter', 'type']));\n  return (\n    <Container ref={ref} classProps={{ showFilter: isMenuOpened }}>\n      <FilterHeaderValue className=\"header-value\">{value}</FilterHeaderValue>\n      <FilterHeaderButton data-testid=\"data-grid-filter-header__button\">\n        <FilterMenuComponent\n          className=\"filter-header-menu\"\n          column={column}\n          filters={filters}\n          isMenuOpened={isMenuOpened}\n          isMulti={isMulti}\n          menuProps={{\n            options: columnData || [],\n            style: { minWidth: headerWidth, maxWidth: filterMenuMaxWidth },\n            zIndex: 100,\n          }}\n          onAddFilter={onAddFilter}\n          onRemoveFilter={onRemoveFilter}\n          onOpenMenu={handleOpenMenu}\n          onClose={onFilterMenuClose}\n          width={headerWidth}\n          {...get(column, ['filter'], {})}\n        />\n      </FilterHeaderButton>\n    </Container>\n  );\n}\n\nFilterableHeader.propTypes = {\n  column: PropTypes.any,\n  value: PropTypes.any,\n  columnData: PropTypes.any,\n  onAddFilter: PropTypes.func,\n  onRemoveFilter: PropTypes.func,\n  filterMenuRef: PropTypes.any,\n  onFilterMenuClose: PropTypes.func,\n  onFilterMenuOpen: PropTypes.func,\n  filters: PropTypes.arrayOf(PropTypes.shape({})),\n  isMulti: PropTypes.bool,\n};\n\nexport default FilterableHeader;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAwD;AACxD,wBAAsB;AACtB,2BAAkC;AAClC,0BAAgD;AAChD,uBAAyB;AACzB,iCAAoC;AAEpC,MAAM,YAAY;AAElB,MAAM,YAAY,4CAAkB,OAAO,WAAW,MAAM,CAAC,EAAE,iBAAkB;AAAA,EAC/E,eAAe;AAAA;AAEjB,MAAM,oBAAoB,4CAAkB,OAAO,WAAW;AAC9D,MAAM,qBAAqB,4CAAkB,OAAO,WAAW;AAExD,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,CAAC,cAAc,iBAAiB,2BAAS;AAC/C,QAAM,CAAC,aAAa,kBAAkB;AACtC,QAAM,uBAAuB,kCAAS,gBAAgB;AACtD,QAAM,EAAE,oBAAoB,uBAAuB;AACnD,QAAM,QAAQ;AACd,QAAM,mBAAmB,sBAAsB,OAAO,MAAM,MAAM,GAAG,QAAQ,MAAM,OAAO;AAE1F,QAAM,oBAAoB,CAAC,EAAE,YAAY;AACvC,QAAI,YAAY,QAAQ;AACxB,QAAI,YAAY;AAAkB,kBAAY;AAC9C,QAAI,sBAAsB,YAAY;AAAoB,kBAAY;AACtE,WAAO,CAAC,eAAe,qBAAqB,aAAa,eAAe;AAAA;AAG1E,8BAAU,MAAM;AACd,QAAI,eAAe;AACjB,oBAAc,UAAU;AAAA,QACtB,YAAY,MAAM,cAAc,CAAC,cAAc,CAAC;AAAA;AAAA;AAAA,KAGnD,CAAC;AAEJ,8BAAU,MAAM;AACd,QAAI,CAAC;AAAc,wBAAkB;AAAA;AAChC,uBAAiB;AAAA;AAGxB,QAAM,CAAC,OAAO,2CAAkB;AAChC,QAAM,iBAAiB,8BAAY,CAAC,SAAS;AAC3C,kBAAc;AACd,QAAI;AAAM;AAAA,KACT;AACH,QAAM,sBAAsB,oDAAoB,6BAAI,QAAQ,CAAC,UAAU;AACvE,SACE,mDAAC,WAAD;AAAA,IAAW;AAAA,IAAU,YAAY,EAAE,YAAY;AAAA,KAC7C,mDAAC,mBAAD;AAAA,IAAmB,WAAU;AAAA,KAAgB,QAC7C,mDAAC,oBAAD;AAAA,IAAoB,eAAY;AAAA,KAC9B,mDAAC,qBAAD;AAAA,IACE,WAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,MACT,SAAS,cAAc;AAAA,MACvB,OAAO,EAAE,UAAU,aAAa,UAAU;AAAA,MAC1C,QAAQ;AAAA;AAAA,IAEV;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,OAAO;AAAA,OACH,6BAAI,QAAQ,CAAC,WAAW;AAAA;AAAA;AAOtC,iBAAiB,YAAY;AAAA,EAC3B,QAAQ,0BAAU;AAAA,EAClB,OAAO,0BAAU;AAAA,EACjB,YAAY,0BAAU;AAAA,EACtB,aAAa,0BAAU;AAAA,EACvB,gBAAgB,0BAAU;AAAA,EAC1B,eAAe,0BAAU;AAAA,EACzB,mBAAmB,0BAAU;AAAA,EAC7B,kBAAkB,0BAAU;AAAA,EAC5B,SAAS,0BAAU,QAAQ,0BAAU,MAAM;AAAA,EAC3C,SAAS,0BAAU;AAAA;AAGrB,IAAO,2BAAQ;",
+  "names": []
+}

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

@@ -0,0 +1,157 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var DateRangeFilterMenu_exports = {};
+__export(DateRangeFilterMenu_exports, {
+  DateRangeFilterMenu: () => DateRangeFilterMenu,
+  default: () => DateRangeFilterMenu_default
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_prop_types = __toESM(require("prop-types"));
+var import_ds_controlled_form = require("@elliemae/ds-controlled-form");
+var import_ds_popper = require("@elliemae/ds-popper");
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_ds_button = require("@elliemae/ds-button");
+var import_moment = __toESM(require("moment"));
+var import_ds_classnames = require("@elliemae/ds-classnames");
+var import_defaultDateFormat = require("./defaultDateFormat");
+const blockname = "date-range";
+const Wrapper = (0, import_ds_classnames.aggregatedClasses)("div")(blockname, "wrapper");
+const Header = (0, import_ds_classnames.aggregatedClasses)("div")(blockname, "header");
+const DateRangePickerContainer = ({ onChange = () => null, showHeader }) => {
+  const [startDate, setStartDate] = (0, import_react.useState)("");
+  const [endDate, setEndDate] = (0, import_react.useState)("");
+  const [lastChangeWasPicker, setLastChangeWasPicker] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    const startMoment = (0, import_moment.default)(startDate);
+    const endMoment = (0, import_moment.default)(endDate);
+    if (lastChangeWasPicker && startDate && !startDate.includes("_") && endDate && !endDate.includes("_") && endMoment.diff(startMoment) >= 0) {
+      onChange({ startDate: startMoment, endDate: endMoment });
+    }
+  }, [startDate, endDate, lastChangeWasPicker]);
+  return /* @__PURE__ */ import_react.default.createElement(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" }
+  }, showHeader && /* @__PURE__ */ import_react.default.createElement(Header, {
+    style: { padding: "8px", display: "flex", justifyContent: "center" }
+  }, /* @__PURE__ */ import_react.default.createElement(import_ds_controlled_form.DSControlledDateRangePicker, {
+    fromDate: startDate,
+    onFromDateChange: (_start) => {
+      setStartDate(_start);
+      setLastChangeWasPicker(false);
+    },
+    toDate: endDate,
+    onToDateChange: (_end) => {
+      setEndDate(_end);
+      setLastChangeWasPicker(false);
+    },
+    type: "date-range-inputs"
+  })), /* @__PURE__ */ import_react.default.createElement(import_ds_controlled_form.DSControlledDateRangePicker, {
+    fromDate: startDate,
+    onFromDateChange: (_start) => {
+      setStartDate(_start);
+      setLastChangeWasPicker(true);
+    },
+    toDate: endDate,
+    onToDateChange: (_end) => {
+      setEndDate(_end);
+      setLastChangeWasPicker(true);
+    },
+    type: "date-range-picker-controller-only"
+  }));
+};
+DateRangePickerContainer.propTypes = {
+  onChange: import_prop_types.default.func,
+  showHeader: import_prop_types.default.bool
+};
+const formatRangeDate = ({ startDate, endDate }, format = import_defaultDateFormat.DEFAULT_DATE_FORMAT) => {
+  const sameDay = startDate.isSame(endDate, "day");
+  if (sameDay)
+    return `${endDate.format(format)}`;
+  return `${startDate.format(format)} - ${endDate.format(format)}`;
+};
+function DateRangeFilterMenu({
+  column,
+  className,
+  isMenuOpened = false,
+  onOpenMenu = () => null,
+  placement = import_ds_popper.PopperPositions.BOTTOM_END,
+  onAddFilter = () => null,
+  dateFormatter = formatRangeDate,
+  showHeader = true,
+  menuProps
+}) {
+  return /* @__PURE__ */ import_react.default.createElement(import_ds_popper.DSPopper, {
+    contentComponent: /* @__PURE__ */ import_react.default.createElement("div", {
+      className
+    }, /* @__PURE__ */ import_react.default.createElement(DateRangePickerContainer, {
+      minimumNights: 0,
+      onChange: ({ startDate, endDate }) => {
+        startDate.startOf("day");
+        endDate.endOf("day");
+        onAddFilter({
+          group: column.property,
+          label: column.label,
+          value: dateFormatter({ startDate, endDate }),
+          type: "date",
+          filterParams: { start: startDate, end: endDate },
+          transformRowValue: (value) => (0, import_moment.default)(value, column.dateFormat || import_defaultDateFormat.DEFAULT_DATE_FORMAT),
+          operator: "range"
+        }, column);
+        onOpenMenu(false);
+      },
+      showHeader
+    })),
+    isOpen: isMenuOpened,
+    onOpen: onOpenMenu,
+    placement,
+    showArrow: false,
+    triggerComponent: /* @__PURE__ */ import_react.default.createElement(import_ds_button.DSButton, {
+      buttonType: "text",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_ds_icons.DatePicker2, null),
+      onClick: () => !isMenuOpened ? onOpenMenu(true) : onOpenMenu(false),
+      size: "s"
+    }),
+    zIndex: menuProps.zIndex
+  });
+}
+DateRangeFilterMenu.propTypes = {
+  column: import_prop_types.default.any,
+  className: import_prop_types.default.string,
+  isMenuOpened: import_prop_types.default.bool,
+  onOpenMenu: import_prop_types.default.func,
+  placement: import_prop_types.default.string,
+  onAddFilter: import_prop_types.default.func,
+  dateFormatter: import_prop_types.default.any,
+  showHeader: import_prop_types.default.bool,
+  menuProps: import_prop_types.default.any
+};
+var DateRangeFilterMenu_default = DateRangeFilterMenu;
+module.exports = __toCommonJS(DateRangeFilterMenu_exports);
+//# sourceMappingURL=DateRangeFilterMenu.js.map