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

package/esm/plugins/filterable/FilterablePlugin.js

@@ -1,14 +1,25 @@
-import * as React from "react";
-import { get, isFunction } from "@elliemae/ds-utilities";
-import { createInstancePlugin } from "@elliemae/ds-shared/createDataInstance/createInstancePlugin";
-import { addFilterToColumn } from "./addFilterToColumn";
-import filterRowsByQuery, { filterRowsByQueryGroup } from "./filtering-helper/filterRowsByQuery";
-import { useFilterableState } from "./useFilterableState";
+import { get, isFunction } from '@elliemae/ds-utilities';
+import createInstancePlugin from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';
+import { addFilterToColumn } from './addFilterToColumn.js';
+import filterRowsByQuery, { filterRowsByQueryGroup } from './filtering-helper/filterRowsByQuery.js';
+import { useFilterableState } from './useFilterableState.js';
+
+/* eslint-disable indent */
+
 const decorateColumn = (column, grid) => {
   const {
-    props: { isFilterableColumnActive = (col) => col.searchable, onRemoveAllFilters },
-    actions: { addFilter, removeFilter },
-    state: { query, filters }
+    props: {
+      isFilterableColumnActive = col => col.searchable,
+      onRemoveAllFilters
+    },
+    actions: {
+      addFilter,
+      removeFilter
+    },
+    state: {
+      query,
+      filters
+    }
   } = grid;
   return isFilterableColumnActive(column) ? addFilterToColumn({
     grid,
@@ -19,33 +30,44 @@ const decorateColumn = (column, grid) => {
     filters
   }, column) : column;
 };
+
 const composeRows = (rows, grid) => {
   const {
-    props: { isDataFiltered, groupedRows },
-    state: { query },
+    props: {
+      isDataFiltered,
+      groupedRows
+    },
+    state: {
+      query
+    },
     composedRows
   } = grid.getInstance();
   const nextRows = !groupedRows ? filterRowsByQuery(rows, query) : filterRowsByQueryGroup(rows, query, composedRows);
   return !isDataFiltered ? nextRows : rows;
 };
-const FilterablePlugin = createInstancePlugin("filterable", {
+
+const FilterablePlugin = createInstancePlugin('filterable', {
   registerStateHook: useFilterableState,
   decorateColumn,
   composeRows,
+
   registerHotKeys(grid) {
     return {
-      key: "ctrl+f",
-      handler: ({ cellIndex }) => {
-        const { decoratedColumns } = grid.getInstance();
+      key: 'ctrl+f',
+      handler: _ref => {
+        let {
+          cellIndex
+        } = _ref;
+        const {
+          decoratedColumns
+        } = grid.getInstance();
         const column = decoratedColumns[cellIndex];
-        const toggleMenuMethod = get(column, ["filterMenu", "current", "toggleMenu"]);
-        if (isFunction(toggleMenuMethod))
-          toggleMenuMethod();
+        const toggleMenuMethod = get(column, ['filterMenu', 'current', 'toggleMenu']);
+        if (isFunction(toggleMenuMethod)) toggleMenuMethod();
       }
     };
   }
+
 });
-export {
-  FilterablePlugin
-};
-//# sourceMappingURL=FilterablePlugin.js.map
+
+export { FilterablePlugin };

package/esm/plugins/filterable/addFilterToColumn.js

@@ -1,14 +1,23 @@
-import * as React from "react";
-import { createRef } from "react";
-import { mergeClassNameToColumnHeader } from "@elliemae/ds-shared/useDataGrid/initColumnDefinition";
-import { FilterableFormatter } from "./filterableFormatter";
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import { createRef } from 'react';
+import { mergeClassNameToColumnHeader } from '@elliemae/ds-shared/useDataGrid/initColumnDefinition';
+import FilterableFormatter from './filterableFormatter.js';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const addFilterToColumn = (props, column) => {
-  const filterMenuRef = createRef();
-  column.header.formatters.push(FilterableFormatter({ ...props, filterMenuRef }));
+  const filterMenuRef = /*#__PURE__*/createRef();
+  column.header.formatters.push(FilterableFormatter(_objectSpread(_objectSpread({}, props), {}, {
+    filterMenuRef
+  })));
   column.filterMenu = filterMenuRef;
-  return mergeClassNameToColumnHeader("with-filtering", column);
+  return mergeClassNameToColumnHeader('with-filtering', column);
 };
-export {
-  addFilterToColumn
-};
-//# sourceMappingURL=addFilterToColumn.js.map
+
+export { addFilterToColumn };

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

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

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

@@ -1,128 +1,148 @@
-import * as React from "react";
-import React2, { useEffect, useState } from "react";
-import PropTypes from "prop-types";
-import { DSControlledDateRangePicker } from "@elliemae/ds-controlled-form";
-import { DSPopper, PopperPositions as Position } from "@elliemae/ds-popper";
-import { DatePicker2 } from "@elliemae/ds-icons";
-import { DSButton } from "@elliemae/ds-button";
-import moment from "moment";
-import { aggregatedClasses } from "@elliemae/ds-classnames";
-import { DEFAULT_DATE_FORMAT } from "./defaultDateFormat";
-const blockname = "date-range";
-const Wrapper = aggregatedClasses("div")(blockname, "wrapper");
-const Header = aggregatedClasses("div")(blockname, "header");
-const DateRangePickerContainer = ({ onChange = () => null, showHeader }) => {
-  const [startDate, setStartDate] = useState("");
-  const [endDate, setEndDate] = useState("");
+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';
+import DSButton from '@elliemae/ds-button';
+import moment from 'moment';
+import { aggregatedClasses } from '@elliemae/ds-classnames';
+import { DEFAULT_DATE_FORMAT } from './defaultDateFormat.js';
+
+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);
+
+const DateRangePickerContainer = _ref => {
+  let {
+    onChange = () => null,
+    showHeader
+  } = _ref;
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState(''); // For some reason it worked like this
+
   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({ startDate: startMoment, endDate: endMoment });
-    }
+
+    if (lastChangeWasPicker && startDate && !startDate.includes('_') && endDate && !endDate.includes('_') && endMoment.diff(startMoment) >= 0) {
+      onChange({
+        startDate: startMoment,
+        endDate: endMoment
+      });
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, [startDate, endDate, lastChangeWasPicker]);
-  return /* @__PURE__ */ React2.createElement(Wrapper, {
+  return /*#__PURE__*/_jsx(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__ */ React2.createElement(Header, {
-    style: { padding: "8px", display: "flex", justifyContent: "center" }
-  }, /* @__PURE__ */ React2.createElement(DSControlledDateRangePicker, {
+    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(Header, {
+    style: {
+      padding: '8px',
+      display: 'flex',
+      justifyContent: 'center'
+    }
+  }, void 0, /*#__PURE__*/_jsx(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__ */ React2.createElement(DSControlledDateRangePicker, {
+  })), /*#__PURE__*/_jsx(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"
   }));
 };
-DateRangePickerContainer.propTypes = {
-  onChange: PropTypes.func,
-  showHeader: PropTypes.bool
+
+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));
 };
-const formatRangeDate = ({ startDate, endDate }, format = 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 = Position.BOTTOM_END,
-  onAddFilter = () => null,
-  dateFormatter = formatRangeDate,
-  showHeader = true,
-  menuProps
-}) {
-  return /* @__PURE__ */ React2.createElement(DSPopper, {
-    contentComponent: /* @__PURE__ */ React2.createElement("div", {
-      className
-    }, /* @__PURE__ */ React2.createElement(DateRangePickerContainer, {
+
+function DateRangeFilterMenu(_ref3) {
+  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
+    }, void 0, /*#__PURE__*/_jsx(DateRangePickerContainer, {
       minimumNights: 0,
-      onChange: ({ startDate, endDate }) => {
-        startDate.startOf("day");
-        endDate.endOf("day");
+      onChange: _ref4 => {
+        let {
+          startDate,
+          endDate
+        } = _ref4;
+        startDate.startOf('day');
+        endDate.endOf('day');
         onAddFilter({
           group: column.property,
           label: column.label,
-          value: dateFormatter({ startDate, endDate }),
-          type: "date",
-          filterParams: { start: startDate, end: endDate },
-          transformRowValue: (value) => moment(value, column.dateFormat || DEFAULT_DATE_FORMAT),
-          operator: "range"
+          value: dateFormatter({
+            startDate,
+            endDate
+          }),
+          type: 'date',
+          // todo: create constants for filter types
+          filterParams: {
+            start: startDate,
+            end: endDate
+          },
+          transformRowValue: value => moment(value, column.dateFormat || DEFAULT_DATE_FORMAT),
+          operator: 'range'
         }, column);
         onOpenMenu(false);
       },
-      showHeader
+      showHeader: showHeader
     })),
     isOpen: isMenuOpened,
     onOpen: onOpenMenu,
-    placement,
+    placement: placement,
     showArrow: false,
-    triggerComponent: /* @__PURE__ */ React2.createElement(DSButton, {
+    triggerComponent: /*#__PURE__*/_jsx(DSButton, {
       buttonType: "text",
-      icon: /* @__PURE__ */ React2.createElement(DatePicker2, null),
+      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
-};
-var DateRangeFilterMenu_default = DateRangeFilterMenu;
-export {
-  DateRangeFilterMenu,
-  DateRangeFilterMenu_default as default
-};
-//# sourceMappingURL=DateRangeFilterMenu.js.map
+
+export { DateRangeFilterMenu as default };