@elliemae/ds-datagrids 2.2.0-next.3 → 2.3.0-alpha.1

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

@@ -1,120 +1,132 @@
-'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
+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
 });
-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;
+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);
   };
-
-  React.useEffect(() => {
+  (0, import_react.useEffect)(() => {
     if (filterMenuRef) {
       filterMenuRef.current = {
-        toggleMenu: () => setMenuOpened(prevState => !prevState)
+        toggleMenu: () => setMenuOpened((prevState) => !prevState)
       };
     }
   }, [filterMenuRef]);
-  React.useEffect(() => {
-    if (!isMenuOpened) onFilterMenuClose(column);else onFilterMenuOpen(column);
+  (0, import_react.useEffect)(() => {
+    if (!isMenuOpened)
+      onFilterMenuClose(column);
+    else
+      onFilterMenuOpen(column);
   });
-  const [ref] = dsUtilities.useResizeObserver(defineHeaderWidth);
-  const handleOpenMenu = React.useCallback(open => {
+  const [ref] = (0, import_ds_utilities.useResizeObserver)(defineHeaderWidth);
+  const handleOpenMenu = (0, import_react.useCallback)((open) => {
     setMenuOpened(open);
-    if (open) onFilterMenuOpen();
+    if (open)
+      onFilterMenuOpen();
   }, []);
-  const FilterMenuComponent = getFilterMenuByType(dsUtilities.get(column, ['filter', 'type']));
-  return /*#__PURE__*/jsxRuntime.jsxs(Container, {
-    ref: ref,
-    classProps: {
-      showFilter: isMenuOpened
+  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
     },
-    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;
+    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/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/cjs/plugins/filterable/components/filterable-menus/DateRangeFilterMenu.js

@@ -1,157 +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
-
+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__*/_jsx__default["default"](Wrapper, {
+  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'
-    }
-  }, void 0, showHeader && /*#__PURE__*/_jsx__default["default"](Header, {
-    style: {
-      padding: '8px',
-      display: 'flex',
-      justifyContent: 'center'
-    }
-  }, void 0, /*#__PURE__*/_jsx__default["default"](dsControlledForm.DSControlledDateRangePicker, {
+    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 => {
+    onFromDateChange: (_start) => {
       setStartDate(_start);
       setLastChangeWasPicker(false);
     },
     toDate: endDate,
-    onToDateChange: _end => {
+    onToDateChange: (_end) => {
       setEndDate(_end);
       setLastChangeWasPicker(false);
     },
     type: "date-range-inputs"
-  })), /*#__PURE__*/_jsx__default["default"](dsControlledForm.DSControlledDateRangePicker, {
+  })), /* @__PURE__ */ import_react.default.createElement(import_ds_controlled_form.DSControlledDateRangePicker, {
     fromDate: startDate,
-    onFromDateChange: _start => {
+    onFromDateChange: (_start) => {
       setStartDate(_start);
       setLastChangeWasPicker(true);
     },
     toDate: endDate,
-    onToDateChange: _end => {
+    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));
+DateRangePickerContainer.propTypes = {
+  onChange: import_prop_types.default.func,
+  showHeader: import_prop_types.default.bool
 };
-
-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, {
+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: _ref4 => {
-        let {
-          startDate,
-          endDate
-        } = _ref4;
-        startDate.startOf('day');
-        endDate.endOf('day');
+      onChange: ({ startDate, endDate }) => {
+        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'
+          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: showHeader
+      showHeader
     })),
     isOpen: isMenuOpened,
     onOpen: onOpenMenu,
-    placement: placement,
+    placement,
     showArrow: false,
-    triggerComponent: /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+    triggerComponent: /* @__PURE__ */ import_react.default.createElement(import_ds_button.DSButton, {
       buttonType: "text",
-      icon: _DatePicker || (_DatePicker = /*#__PURE__*/_jsx__default["default"](dsIcons.DatePicker2, {})),
+      icon: /* @__PURE__ */ import_react.default.createElement(import_ds_icons.DatePicker2, null),
       onClick: () => !isMenuOpened ? onOpenMenu(true) : onOpenMenu(false),
       size: "s"
     }),
     zIndex: menuProps.zIndex
   });
 }
-
-module.exports = DateRangeFilterMenu;
+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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/plugins/filterable/components/filterable-menus/DateRangeFilterMenu.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { DSControlledDateRangePicker } from '@elliemae/ds-controlled-form';\nimport { DSPopper, PopperPositions as Position } from '@elliemae/ds-popper';\nimport { DatePicker2 } from '@elliemae/ds-icons';\nimport { DSButton } from '@elliemae/ds-button';\nimport moment from 'moment';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { DEFAULT_DATE_FORMAT } from './defaultDateFormat';\n\nconst blockname = 'date-range';\nconst Wrapper = aggregatedClasses('div')(blockname, 'wrapper');\nconst Header = aggregatedClasses('div')(blockname, 'header');\n\n// const randomString = (maxLength = 5) => Math.random().toString(36).slice(-maxLength);\n\nconst DateRangePickerContainer = ({ onChange = () => null, showHeader }) => {\n  const [startDate, setStartDate] = useState('');\n  const [endDate, setEndDate] = useState('');\n\n  // For some reason it worked like this\n  const [lastChangeWasPicker, setLastChangeWasPicker] = useState(false);\n\n  useEffect(() => {\n    const startMoment = moment(startDate);\n    const endMoment = moment(endDate);\n    if (\n      lastChangeWasPicker &&\n      startDate &&\n      !startDate.includes('_') &&\n      endDate &&\n      !endDate.includes('_') &&\n      endMoment.diff(startMoment) >= 0\n    ) {\n      onChange({ startDate: startMoment, endDate: endMoment });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [startDate, endDate, lastChangeWasPicker]);\n\n  return (\n    <Wrapper\n      data-testid=\"date-range__wrapper\"\n      onKeyDown={(e) => e.code === 'Enter' && setLastChangeWasPicker(true)}\n      style={{ backgroundColor: 'white', boxShadow: '0 6px 20px 0 rgb(0 0 0 / 24%)', width: '261px' }}\n    >\n      {showHeader && (\n        <Header style={{ padding: '8px', display: 'flex', justifyContent: 'center' }}>\n          <DSControlledDateRangePicker\n            fromDate={startDate}\n            onFromDateChange={(_start) => {\n              setStartDate(_start);\n              setLastChangeWasPicker(false);\n            }}\n            toDate={endDate}\n            onToDateChange={(_end) => {\n              setEndDate(_end);\n              setLastChangeWasPicker(false);\n            }}\n            type=\"date-range-inputs\"\n          />\n        </Header>\n      )}\n      <DSControlledDateRangePicker\n        fromDate={startDate}\n        onFromDateChange={(_start) => {\n          setStartDate(_start);\n          setLastChangeWasPicker(true);\n        }}\n        toDate={endDate}\n        onToDateChange={(_end) => {\n          setEndDate(_end);\n          setLastChangeWasPicker(true);\n        }}\n        type=\"date-range-picker-controller-only\"\n      />\n    </Wrapper>\n  );\n};\n\nDateRangePickerContainer.propTypes = {\n  onChange: PropTypes.func,\n  showHeader: PropTypes.bool,\n};\n\nconst formatRangeDate = ({ startDate, endDate }, format = DEFAULT_DATE_FORMAT) => {\n  const sameDay = startDate.isSame(endDate, 'day');\n  if (sameDay) return `${endDate.format(format)}`;\n  return `${startDate.format(format)} - ${endDate.format(format)}`;\n};\n\nfunction DateRangeFilterMenu({\n  column,\n  className,\n  isMenuOpened = false,\n  onOpenMenu = () => null,\n  placement = Position.BOTTOM_END,\n  onAddFilter = () => null,\n  dateFormatter = formatRangeDate,\n  showHeader = true,\n  menuProps,\n}) {\n  return (\n    <DSPopper\n      contentComponent={\n        <div className={className}>\n          <DateRangePickerContainer\n            minimumNights={0}\n            onChange={({ startDate, endDate }) => {\n              startDate.startOf('day');\n              endDate.endOf('day');\n              onAddFilter(\n                {\n                  group: column.property,\n                  label: column.label,\n                  value: dateFormatter({ startDate, endDate }),\n                  type: 'date', // todo: create constants for filter types\n                  filterParams: { start: startDate, end: endDate },\n                  transformRowValue: (value) => moment(value, column.dateFormat || DEFAULT_DATE_FORMAT),\n                  operator: 'range',\n                },\n                column,\n              );\n              onOpenMenu(false);\n            }}\n            showHeader={showHeader}\n          />\n        </div>\n      }\n      isOpen={isMenuOpened}\n      onOpen={onOpenMenu}\n      placement={placement}\n      showArrow={false}\n      triggerComponent={\n        <DSButton\n          buttonType=\"text\"\n          icon={<DatePicker2 />}\n          onClick={() => (!isMenuOpened ? onOpenMenu(true) : onOpenMenu(false))}\n          size=\"s\"\n        />\n      }\n      zIndex={menuProps.zIndex}\n    />\n  );\n}\n\nDateRangeFilterMenu.propTypes = {\n  column: PropTypes.any,\n  className: PropTypes.string,\n  isMenuOpened: PropTypes.bool,\n  onOpenMenu: PropTypes.func,\n  placement: PropTypes.string,\n  onAddFilter: PropTypes.func,\n  dateFormatter: PropTypes.any,\n  showHeader: PropTypes.bool,\n  menuProps: PropTypes.any,\n};\n\nexport { DateRangeFilterMenu };\nexport default DateRangeFilterMenu;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}