@elliemae/ds-datagrids 1.61.0 → 2.0.0-alpha.12

package/esm/plugins/filterable/addFilterToColumn.js

@@ -1,47 +1,23 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import { createRef } from 'react';
 import { mergeClassNameToColumnHeader } from '@elliemae/ds-shared/useDataGrid/initColumnDefinition';
 import FilterableFormatter from './filterableFormatter.js';
-import './components/FilterableHeader.js';
-import '@babel/runtime/helpers/esm/extends';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import 'prop-types';
-import '@elliemae/ds-classnames';
-import '@elliemae/ds-utilities';
-import '@elliemae/ds-system';
-import './components/filterable-menus/getFilterMenuByType.js';
-import './components/filterable-menus/DateRangeFilterMenu.js';
-import '@elliemae/ds-controlled-form';
-import '@elliemae/ds-popper';
-import '@elliemae/ds-icons';
-import '@elliemae/ds-button';
-import 'moment';
-import './components/filterable-menus/defaultDateFormat.js';
-import './components/filterable-menus/SingleDateFilterMenu.js';
-import '@elliemae/ds-grid';
-import './components/filterable-menus/SingleRangeSwitcherMenu.js';
-import '@elliemae/ds-basic/Popper';
-import '@elliemae/ds-basic/Button';
-import 'styled-components';
-import './components/filterable-menus/TextFilterMenu.js';
-import '@babel/runtime/helpers/esm/toConsumableArray';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'lodash';
-import '@elliemae/ds-dropdownmenu';
-import '@elliemae/ds-menu';
-import './helper.js';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var addFilterToColumn = function addFilterToColumn(props, column) {
-  var filterMenuRef = /*#__PURE__*/createRef();
+const addFilterToColumn = (props, column) => {
+  const filterMenuRef = /*#__PURE__*/createRef();
   column.header.formatters.push(FilterableFormatter(_objectSpread(_objectSpread({}, props), {}, {
-    filterMenuRef: filterMenuRef
+    filterMenuRef
   })));
   column.filterMenu = filterMenuRef;
   return mergeClassNameToColumnHeader('with-filtering', column);
 };
 
 export { addFilterToColumn };
-//# sourceMappingURL=addFilterToColumn.js.map

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

@@ -1,144 +1,113 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
-import React, { useState, useEffect, useCallback } from 'react';
-import PropTypes from 'prop-types';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/es.string.replace.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import { useState, useEffect, useCallback } from 'react';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
 import { debounce, useResizeObserver, get } from '@elliemae/ds-utilities';
 import { useTheme } from '@elliemae/ds-system';
 import getFilterMenuByType from './filterable-menus/getFilterMenuByType.js';
-import './filterable-menus/DateRangeFilterMenu.js';
-import '@elliemae/ds-controlled-form';
-import '@elliemae/ds-popper';
-import '@elliemae/ds-icons';
-import '@elliemae/ds-button';
-import 'moment';
-import './filterable-menus/defaultDateFormat.js';
-import './filterable-menus/SingleDateFilterMenu.js';
-import '@elliemae/ds-grid';
-import './filterable-menus/SingleRangeSwitcherMenu.js';
-import '@elliemae/ds-basic/Popper';
-import '@elliemae/ds-basic/Button';
-import 'styled-components';
-import './filterable-menus/TextFilterMenu.js';
-import '@babel/runtime/helpers/esm/defineProperty';
-import '@babel/runtime/helpers/esm/toConsumableArray';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'lodash';
-import '@elliemae/ds-dropdownmenu';
-import '@elliemae/ds-menu';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
-var blockName = 'data-grid-filter-header';
-var Container = aggregatedClasses('div')(blockName, null, function (_ref) {
-  var showFilter = _ref.showFilter;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const blockName = 'data-grid-filter-header';
+const Container = aggregatedClasses('div')(blockName, null, _ref => {
+  let {
+    showFilter
+  } = _ref;
   return {
     'show-filter': showFilter
   };
 });
-var FilterHeaderValue = aggregatedClasses('div')(blockName, 'value');
-var FilterHeaderButton = aggregatedClasses('div')(blockName, 'button');
+const FilterHeaderValue = aggregatedClasses('div')(blockName, 'value');
+const FilterHeaderButton = aggregatedClasses('div')(blockName, 'button');
 function FilterableHeader(_ref2) {
-  var column = _ref2.column,
-      value = _ref2.value,
-      columnData = _ref2.columnData,
-      onAddFilter = _ref2.onAddFilter,
-      onRemoveFilter = _ref2.onRemoveFilter,
-      filterMenuRef = _ref2.filterMenuRef,
-      onFilterMenuClose = _ref2.onFilterMenuClose,
-      onFilterMenuOpen = _ref2.onFilterMenuOpen,
-      filters = _ref2.filters,
-      isMulti = _ref2.isMulti;
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isMenuOpened = _useState2[0],
-      setMenuOpened = _useState2[1];
-
-  var _useState3 = useState(),
-      _useState4 = _slicedToArray(_useState3, 2),
-      headerWidth = _useState4[0],
-      setHeaderWidth = _useState4[1];
+  let {
+    column,
+    value,
+    columnData,
+    onAddFilter,
+    onRemoveFilter,
+    filterMenuRef,
+    onFilterMenuClose,
+    onFilterMenuOpen,
+    filters,
+    isMulti
+  } = _ref2;
+  const [isMenuOpened, setMenuOpened] = useState(false);
+  const [headerWidth, setHeaderWidth] = useState();
+  const debouncedWidthSetter = debounce(setHeaderWidth, 200);
+  const {
+    filterMenuMinWidth,
+    filterMenuMaxWidth
+  } = column;
+  const theme = useTheme();
+  const dropdownMinWidth = filterMenuMinWidth || Number(theme.space.xl.replace('px', '')) * 2;
 
-  var debouncedWidthSetter = debounce(setHeaderWidth, 200);
-  var filterMenuMinWidth = column.filterMenuMinWidth,
-      filterMenuMaxWidth = column.filterMenuMaxWidth;
-  var theme = useTheme();
-  var dropdownMinWidth = filterMenuMinWidth || Number(theme.space.xl.replace('px', '')) * 2;
-
-  var defineHeaderWidth = function defineHeaderWidth(_ref3) {
-    var width = _ref3.width;
-    var nextWidth = width + 16; // todo: use dimsum space once we convert it to JS
+  const defineHeaderWidth = _ref3 => {
+    let {
+      width
+    } = _ref3;
+    let nextWidth = width + 16; // todo: use dimsum space once we convert it to JS
 
     if (nextWidth < dropdownMinWidth) nextWidth = dropdownMinWidth;
     if (filterMenuMaxWidth && nextWidth > filterMenuMaxWidth) nextWidth = filterMenuMaxWidth;
     return !isMenuOpened ? debouncedWidthSetter(nextWidth) : setHeaderWidth(nextWidth);
   };
 
-  useEffect(function () {
+  useEffect(() => {
     if (filterMenuRef) {
       filterMenuRef.current = {
-        toggleMenu: function toggleMenu() {
-          return setMenuOpened(function (prevState) {
-            return !prevState;
-          });
-        }
+        toggleMenu: () => setMenuOpened(prevState => !prevState)
       };
     }
   }, [filterMenuRef]);
-  useEffect(function () {
+  useEffect(() => {
     if (!isMenuOpened) onFilterMenuClose(column);else onFilterMenuOpen(column);
   });
-
-  var _useResizeObserver = useResizeObserver(defineHeaderWidth),
-      _useResizeObserver2 = _slicedToArray(_useResizeObserver, 1),
-      ref = _useResizeObserver2[0];
-
-  var handleOpenMenu = useCallback(function (open) {
+  const [ref] = useResizeObserver(defineHeaderWidth);
+  const handleOpenMenu = useCallback(open => {
     setMenuOpened(open);
     if (open) onFilterMenuOpen();
   }, []);
-  var FilterMenuComponent = getFilterMenuByType(get(column, ['filter', 'type']));
-  return /*#__PURE__*/React.createElement(Container, {
+  const FilterMenuComponent = getFilterMenuByType(get(column, ['filter', 'type']));
+  return /*#__PURE__*/jsxs(Container, {
     ref: ref,
     classProps: {
       showFilter: isMenuOpened
-    }
-  }, /*#__PURE__*/React.createElement(FilterHeaderValue, {
-    className: "header-value"
-  }, value), /*#__PURE__*/React.createElement(FilterHeaderButton, {
-    "data-testid": "data-grid-filter-header__button"
-  }, /*#__PURE__*/React.createElement(FilterMenuComponent, _extends({
-    className: "filter-header-menu",
-    column: column,
-    filters: filters,
-    isMenuOpened: isMenuOpened,
-    isMulti: isMulti,
-    menuProps: {
-      options: columnData || [],
-      style: {
-        minWidth: headerWidth,
-        maxWidth: filterMenuMaxWidth
-      },
-      zIndex: 100
     },
-    onAddFilter: onAddFilter,
-    onRemoveFilter: onRemoveFilter,
-    onOpenMenu: handleOpenMenu,
-    onClose: onFilterMenuClose,
-    width: headerWidth
-  }, get(column, ['filter'], {})))));
+    children: [/*#__PURE__*/_jsx(FilterHeaderValue, {
+      className: "header-value"
+    }, void 0, value), /*#__PURE__*/_jsx(FilterHeaderButton, {
+      "data-testid": "data-grid-filter-header__button"
+    }, void 0, /*#__PURE__*/jsx(FilterMenuComponent, _objectSpread({
+      className: "filter-header-menu",
+      column: column,
+      filters: filters,
+      isMenuOpened: isMenuOpened,
+      isMulti: isMulti,
+      menuProps: {
+        options: columnData || [],
+        style: {
+          minWidth: headerWidth,
+          maxWidth: filterMenuMaxWidth
+        },
+        zIndex: 100
+      },
+      onAddFilter: onAddFilter,
+      onRemoveFilter: onRemoveFilter,
+      onOpenMenu: handleOpenMenu,
+      onClose: onFilterMenuClose,
+      width: headerWidth
+    }, get(column, ['filter'], {}))))]
+  });
 }
-FilterableHeader.propTypes = {
-  column: PropTypes.any,
-  value: PropTypes.any,
-  columnData: PropTypes.any,
-  onAddFilter: PropTypes.func,
-  onRemoveFilter: PropTypes.func,
-  filterMenuRef: PropTypes.any,
-  onFilterMenuClose: PropTypes.func,
-  onFilterMenuOpen: PropTypes.func,
-  filters: PropTypes.arrayOf(PropTypes.shape({})),
-  isMulti: PropTypes.bool
-};
 
 export { FilterableHeader as default };
-//# sourceMappingURL=FilterableHeader.js.map

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

@@ -1,6 +1,6 @@
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useState, useEffect } from 'react';
 import { DSControlledDateRangePicker } from '@elliemae/ds-controlled-form';
 import DSPopper, { PopperPositions } from '@elliemae/ds-popper';
 import { DatePicker2 } from '@elliemae/ds-icons';
@@ -9,36 +9,23 @@ import moment from 'moment';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
 import { DEFAULT_DATE_FORMAT } from './defaultDateFormat.js';
 
-var blockname = 'date-range';
-var Wrapper = aggregatedClasses('div')(blockname, 'wrapper');
-var Header = aggregatedClasses('div')(blockname, 'header'); // const randomString = (maxLength = 5) => Math.random().toString(36).slice(-maxLength);
+var _DatePicker;
+const blockname = 'date-range';
+const Wrapper = aggregatedClasses('div')(blockname, 'wrapper');
+const Header = aggregatedClasses('div')(blockname, 'header'); // const randomString = (maxLength = 5) => Math.random().toString(36).slice(-maxLength);
 
-var DateRangePickerContainer = function DateRangePickerContainer(_ref) {
-  var _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? function () {
-    return null;
-  } : _ref$onChange,
-      showHeader = _ref.showHeader;
+const DateRangePickerContainer = _ref => {
+  let {
+    onChange = () => null,
+    showHeader
+  } = _ref;
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState(''); // For some reason it worked like this
 
-  var _useState = useState(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      startDate = _useState2[0],
-      setStartDate = _useState2[1];
-
-  var _useState3 = useState(''),
-      _useState4 = _slicedToArray(_useState3, 2),
-      endDate = _useState4[0],
-      setEndDate = _useState4[1]; // For some reason it worked like this
-
-
-  var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      lastChangeWasPicker = _useState6[0],
-      setLastChangeWasPicker = _useState6[1];
-
-  useEffect(function () {
-    var startMoment = moment(startDate);
-    var endMoment = moment(endDate);
+  const [lastChangeWasPicker, setLastChangeWasPicker] = useState(false);
+  useEffect(() => {
+    const startMoment = moment(startDate);
+    const endMoment = moment(endDate);
 
     if (lastChangeWasPicker && startDate && !startDate.includes('_') && endDate && !endDate.includes('_') && endMoment.diff(startMoment) >= 0) {
       onChange({
@@ -48,42 +35,40 @@ var DateRangePickerContainer = function DateRangePickerContainer(_ref) {
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [startDate, endDate, lastChangeWasPicker]);
-  return /*#__PURE__*/React.createElement(Wrapper, {
+  return /*#__PURE__*/_jsx(Wrapper, {
     "data-testid": "date-range__wrapper",
-    onKeyDown: function onKeyDown(e) {
-      return e.code === 'Enter' && setLastChangeWasPicker(true);
-    },
+    onKeyDown: e => e.code === 'Enter' && setLastChangeWasPicker(true),
     style: {
       backgroundColor: 'white',
       boxShadow: '0 6px 20px 0 rgb(0 0 0 / 24%)',
       width: '261px'
     }
-  }, showHeader && /*#__PURE__*/React.createElement(Header, {
+  }, void 0, showHeader && /*#__PURE__*/_jsx(Header, {
     style: {
       padding: '8px',
       display: 'flex',
       justifyContent: 'center'
     }
-  }, /*#__PURE__*/React.createElement(DSControlledDateRangePicker, {
+  }, void 0, /*#__PURE__*/_jsx(DSControlledDateRangePicker, {
     fromDate: startDate,
-    onFromDateChange: function onFromDateChange(_start) {
+    onFromDateChange: _start => {
       setStartDate(_start);
       setLastChangeWasPicker(false);
     },
     toDate: endDate,
-    onToDateChange: function onToDateChange(_end) {
+    onToDateChange: _end => {
       setEndDate(_end);
       setLastChangeWasPicker(false);
     },
     type: "date-range-inputs"
-  })), /*#__PURE__*/React.createElement(DSControlledDateRangePicker, {
+  })), /*#__PURE__*/_jsx(DSControlledDateRangePicker, {
     fromDate: startDate,
-    onFromDateChange: function onFromDateChange(_start) {
+    onFromDateChange: _start => {
       setStartDate(_start);
       setLastChangeWasPicker(true);
     },
     toDate: endDate,
-    onToDateChange: function onToDateChange(_end) {
+    onToDateChange: _end => {
       setEndDate(_end);
       setLastChangeWasPicker(true);
     },
@@ -91,56 +76,47 @@ var DateRangePickerContainer = function DateRangePickerContainer(_ref) {
   }));
 };
 
-DateRangePickerContainer.propTypes = {
-  onChange: PropTypes.func,
-  showHeader: PropTypes.bool
-};
-
-var formatRangeDate = function formatRangeDate(_ref2) {
-  var startDate = _ref2.startDate,
-      endDate = _ref2.endDate;
-  var format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_DATE_FORMAT;
-  var sameDay = startDate.isSame(endDate, 'day');
+const formatRangeDate = function (_ref2) {
+  let {
+    startDate,
+    endDate
+  } = _ref2;
+  let format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 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) {
-  var column = _ref3.column,
-      className = _ref3.className,
-      _ref3$isMenuOpened = _ref3.isMenuOpened,
-      isMenuOpened = _ref3$isMenuOpened === void 0 ? false : _ref3$isMenuOpened,
-      _ref3$onOpenMenu = _ref3.onOpenMenu,
-      onOpenMenu = _ref3$onOpenMenu === void 0 ? function () {
-    return null;
-  } : _ref3$onOpenMenu,
-      _ref3$placement = _ref3.placement,
-      placement = _ref3$placement === void 0 ? PopperPositions.BOTTOM_END : _ref3$placement,
-      _ref3$onAddFilter = _ref3.onAddFilter,
-      onAddFilter = _ref3$onAddFilter === void 0 ? function () {
-    return null;
-  } : _ref3$onAddFilter,
-      _ref3$dateFormatter = _ref3.dateFormatter,
-      dateFormatter = _ref3$dateFormatter === void 0 ? formatRangeDate : _ref3$dateFormatter,
-      _ref3$showHeader = _ref3.showHeader,
-      showHeader = _ref3$showHeader === void 0 ? true : _ref3$showHeader,
-      menuProps = _ref3.menuProps;
-  return /*#__PURE__*/React.createElement(DSPopper, {
-    contentComponent: /*#__PURE__*/React.createElement("div", {
+  let {
+    column,
+    className,
+    isMenuOpened = false,
+    onOpenMenu = () => null,
+    placement = PopperPositions.BOTTOM_END,
+    onAddFilter = () => null,
+    dateFormatter = formatRangeDate,
+    showHeader = true,
+    menuProps
+  } = _ref3;
+  return /*#__PURE__*/_jsx(DSPopper, {
+    contentComponent: /*#__PURE__*/_jsx("div", {
       className: className
-    }, /*#__PURE__*/React.createElement(DateRangePickerContainer, {
+    }, void 0, /*#__PURE__*/_jsx(DateRangePickerContainer, {
       minimumNights: 0,
-      onChange: function onChange(_ref4) {
-        var startDate = _ref4.startDate,
-            endDate = _ref4.endDate;
+      onChange: _ref4 => {
+        let {
+          startDate,
+          endDate
+        } = _ref4;
         startDate.startOf('day');
         endDate.endOf('day');
         onAddFilter({
           group: column.property,
           label: column.label,
           value: dateFormatter({
-            startDate: startDate,
-            endDate: endDate
+            startDate,
+            endDate
           }),
           type: 'date',
           // todo: create constants for filter types
@@ -148,9 +124,7 @@ function DateRangeFilterMenu(_ref3) {
             start: startDate,
             end: endDate
           },
-          transformRowValue: function transformRowValue(value) {
-            return moment(value, column.dateFormat || DEFAULT_DATE_FORMAT);
-          },
+          transformRowValue: value => moment(value, column.dateFormat || DEFAULT_DATE_FORMAT),
           operator: 'range'
         }, column);
         onOpenMenu(false);
@@ -161,29 +135,14 @@ function DateRangeFilterMenu(_ref3) {
     onOpen: onOpenMenu,
     placement: placement,
     showArrow: false,
-    triggerComponent: /*#__PURE__*/React.createElement(DSButton, {
+    triggerComponent: /*#__PURE__*/_jsx(DSButton, {
       buttonType: "text",
-      icon: /*#__PURE__*/React.createElement(DatePicker2, null),
-      onClick: function onClick() {
-        return !isMenuOpened ? onOpenMenu(true) : onOpenMenu(false);
-      },
+      icon: _DatePicker || (_DatePicker = /*#__PURE__*/_jsx(DatePicker2, {})),
+      onClick: () => !isMenuOpened ? onOpenMenu(true) : onOpenMenu(false),
       size: "s"
     }),
     zIndex: menuProps.zIndex
   });
 }
 
-DateRangeFilterMenu.propTypes = {
-  column: PropTypes.any,
-  className: PropTypes.string,
-  isMenuOpened: PropTypes.bool,
-  onOpenMenu: PropTypes.func,
-  placement: PropTypes.string,
-  onAddFilter: PropTypes.func,
-  dateFormatter: PropTypes.any,
-  showHeader: PropTypes.bool,
-  menuProps: PropTypes.any
-};
-
 export { DateRangeFilterMenu as default };
-//# sourceMappingURL=DateRangeFilterMenu.js.map