@elliemae/ds-datagrids 2.0.0-next.7 → 2.0.0-rc.2

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

@@ -3,14 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 require('core-js/modules/web.dom-collections.iterator.js');
-var utils = require('@elliemae/ds-utilities/utils');
-var useExpandState = require('@elliemae/ds-utilities/hooks/useExpandState');
+var dsUtilities = require('@elliemae/ds-utilities');
 var React = require('react');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var useExpandState__default = /*#__PURE__*/_interopDefaultLegacy(useExpandState);
-
 const useExpandGridState = grid => {
   const {
     composedRows,
@@ -28,7 +23,7 @@ const useExpandGridState = grid => {
   const {
     state,
     actions
-  } = useExpandState__default["default"]({
+  } = dsUtilities.useExpandState({
     items: composedRows,
     itemKey: rowKey,
     expanded: expandedRowsProp,
@@ -55,7 +50,7 @@ const useExpandGridState = grid => {
   };
 
   const toggleShowAllRows = row => {
-    if (utils.isFunction(onToggleShowAllRows)) {
+    if (dsUtilities.isFunction(onToggleShowAllRows)) {
       onToggleShowAllRows(row);
     } else {
       const key = row[rowKey];

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

@@ -3,11 +3,20 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.reduce.js');
 require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
 require('core-js/modules/es.string.replace.js');
 require('core-js/modules/web.url.js');
 require('core-js/modules/web.url-search-params.js');
-var utils = require('@elliemae/ds-utilities/utils');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var dsUtilities = require('@elliemae/ds-utilities');
 var createInstancePlugin = require('@elliemae/ds-shared/createDataInstance/createInstancePlugin');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -27,7 +36,7 @@ const isVisible = column => {
   return typeof column.visible === 'undefined' || column.visible;
 };
 
-const getColumnValue = (row, property) => utils.get(row, property);
+const getColumnValue = (row, property) => dsUtilities.get(row, property);
 const getVisibleRowData = (row, columns) => columns.reduce((result, column) => {
   const columnProperty = column.property;
   return isVisible(column) ? [...result, getColumnValue(row, "_".concat(columnProperty)) || getColumnValue(row, columnProperty)] : result;
@@ -57,12 +66,14 @@ const getExportedData = (rows, columns, range) => {
   return csvContent;
 }; // eslint-disable-next-line max-statements
 
-const exportTo = (rows, columns, {
-  range,
-  fileName,
-  type,
-  excludedColumns
-}) => {
+const exportTo = (rows, columns, _ref) => {
+  let {
+    range,
+    fileName,
+    type,
+    excludedColumns
+  } = _ref;
+
   if (excludedColumns) {
     // eslint-disable-next-line no-param-reassign
     columns = columns.filter(col => !excludedColumns.includes(col.property));
@@ -96,7 +107,8 @@ const exportTo = (rows, columns, {
 const ExportDataPlugin = createInstancePlugin__default["default"]('export-data', {
   decorateGrid(instance) {
     return {
-      exportRows(opts = {}) {
+      exportRows() {
+        let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
         const {
           composedRows: rows,
           columns,
@@ -120,7 +132,8 @@ const ExportDataPlugin = createInstancePlugin__default["default"]('export-data',
         exportTo(currentRows, columns, options);
       },
 
-      exportVisibleRows(opts = {}) {
+      exportVisibleRows() {
+        let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
         const {
           composedRows: rows,
           columns,

package/cjs/plugins/filterable/FilterablePlugin.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var utils = require('@elliemae/ds-utilities/utils');
+var dsUtilities = require('@elliemae/ds-utilities');
 var createInstancePlugin = require('@elliemae/ds-shared/createDataInstance/createInstancePlugin');
 var addFilterToColumn = require('./addFilterToColumn.js');
 var filterRowsByQuery = require('./filtering-helper/filterRowsByQuery.js');
@@ -62,15 +62,16 @@ const FilterablePlugin = createInstancePlugin__default["default"]('filterable',
   registerHotKeys(grid) {
     return {
       key: 'ctrl+f',
-      handler: ({
-        cellIndex
-      }) => {
+      handler: _ref => {
+        let {
+          cellIndex
+        } = _ref;
         const {
           decoratedColumns
         } = grid.getInstance();
         const column = decoratedColumns[cellIndex];
-        const toggleMenuMethod = utils.get(column, ['filterMenu', 'current', 'toggleMenu']);
-        if (utils.isFunction(toggleMenuMethod)) toggleMenuMethod();
+        const toggleMenuMethod = dsUtilities.get(column, ['filterMenu', 'current', 'toggleMenu']);
+        if (dsUtilities.isFunction(toggleMenuMethod)) toggleMenuMethod();
       }
     };
   }

package/cjs/plugins/filterable/addFilterToColumn.js

@@ -2,6 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
 var initColumnDefinition = require('@elliemae/ds-shared/useDataGrid/initColumnDefinition');

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

@@ -4,10 +4,14 @@ 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 utils = require('@elliemae/ds-utilities/utils');
-var useResizeObserver = require('@elliemae/ds-utilities/hooks/useResizeObserver');
+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');
@@ -16,34 +20,37 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var useResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(useResizeObserver);
 
 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__default["default"](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 = dsClassnames.aggregatedClasses('div')(blockName, null, ({
-  showFilter
-}) => ({
-  'show-filter': showFilter
-}));
+const Container = dsClassnames.aggregatedClasses('div')(blockName, null, _ref => {
+  let {
+    showFilter
+  } = _ref;
+  return {
+    'show-filter': showFilter
+  };
+});
 const FilterHeaderValue = dsClassnames.aggregatedClasses('div')(blockName, 'value');
 const FilterHeaderButton = dsClassnames.aggregatedClasses('div')(blockName, 'button');
-function FilterableHeader({
-  column,
-  value,
-  columnData,
-  onAddFilter,
-  onRemoveFilter,
-  filterMenuRef,
-  onFilterMenuClose,
-  onFilterMenuOpen,
-  filters,
-  isMulti
-}) {
+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 = utils.debounce(setHeaderWidth, 200);
+  const debouncedWidthSetter = dsUtilities.debounce(setHeaderWidth, 200);
   const {
     filterMenuMinWidth,
     filterMenuMaxWidth
@@ -51,9 +58,10 @@ function FilterableHeader({
   const theme = dsSystem.useTheme();
   const dropdownMinWidth = filterMenuMinWidth || Number(theme.space.xl.replace('px', '')) * 2;
 
-  const defineHeaderWidth = ({
-    width
-  }) => {
+  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;
@@ -71,12 +79,12 @@ function FilterableHeader({
   React.useEffect(() => {
     if (!isMenuOpened) onFilterMenuClose(column);else onFilterMenuOpen(column);
   });
-  const [ref] = useResizeObserver__default["default"](defineHeaderWidth);
+  const [ref] = dsUtilities.useResizeObserver(defineHeaderWidth);
   const handleOpenMenu = React.useCallback(open => {
     setMenuOpened(open);
     if (open) onFilterMenuOpen();
   }, []);
-  const FilterMenuComponent = getFilterMenuByType(utils.get(column, ['filter', 'type']));
+  const FilterMenuComponent = getFilterMenuByType(dsUtilities.get(column, ['filter', 'type']));
   return /*#__PURE__*/jsxRuntime.jsxs(Container, {
     ref: ref,
     classProps: {
@@ -105,7 +113,7 @@ function FilterableHeader({
       onOpenMenu: handleOpenMenu,
       onClose: onFilterMenuClose,
       width: headerWidth
-    }, utils.get(column, ['filter'], {}))))]
+    }, dsUtilities.get(column, ['filter'], {}))))]
   });
 }
 

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

@@ -4,9 +4,9 @@ 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-basic/Popper');
-var DatePickerIcon = require('@elliemae/ds-icons/DatePicker2');
-var DSButton = require('@elliemae/ds-basic/Button');
+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');
@@ -15,19 +15,19 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var DSPopper__default = /*#__PURE__*/_interopDefaultLegacy(DSPopper);
-var DatePickerIcon__default = /*#__PURE__*/_interopDefaultLegacy(DatePickerIcon);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
 
-var _DatePickerIcon;
+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 = ({
-  onChange = () => null,
-  showHeader
-}) => {
+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
 
@@ -46,10 +46,12 @@ const DateRangePickerContainer = ({
   }, [startDate, endDate, lastChangeWasPicker]);
   return /*#__PURE__*/_jsx__default["default"](Wrapper, {
     "data-testid": "date-range__wrapper",
+    onKeyDown: e => e.code === 'Enter' && setLastChangeWasPicker(true),
     style: {
-      width: '262px'
-    },
-    onKeyDown: e => e.code === 'Enter' && setLastChangeWasPicker(true)
+      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',
@@ -83,35 +85,39 @@ const DateRangePickerContainer = ({
   }));
 };
 
-const formatRangeDate = ({
-  startDate,
-  endDate
-}, format = defaultDateFormat.DEFAULT_DATE_FORMAT) => {
+const formatRangeDate = function (_ref2) {
+  let {
+    startDate,
+    endDate
+  } = _ref2;
+  let format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultDateFormat.DEFAULT_DATE_FORMAT;
   const sameDay = startDate.isSame(endDate, 'day');
   if (sameDay) return "".concat(endDate.format(format));
   return "".concat(startDate.format(format), " - ").concat(endDate.format(format));
 };
 
-function DateRangeFilterMenu({
-  column,
-  className,
-  isMenuOpened = false,
-  onOpenMenu = () => null,
-  placement = DSPopper.PopperPositions.BOTTOM_END,
-  onAddFilter = () => null,
-  dateFormatter = formatRangeDate,
-  showHeader = true,
-  menuProps
-}) {
+function DateRangeFilterMenu(_ref3) {
+  let {
+    column,
+    className,
+    isMenuOpened = false,
+    onOpenMenu = () => null,
+    placement = DSPopper.PopperPositions.BOTTOM_END,
+    onAddFilter = () => null,
+    dateFormatter = formatRangeDate,
+    showHeader = true,
+    menuProps
+  } = _ref3;
   return /*#__PURE__*/_jsx__default["default"](DSPopper__default["default"], {
     contentComponent: /*#__PURE__*/_jsx__default["default"]("div", {
       className: className
     }, void 0, /*#__PURE__*/_jsx__default["default"](DateRangePickerContainer, {
       minimumNights: 0,
-      onChange: ({
-        startDate,
-        endDate
-      }) => {
+      onChange: _ref4 => {
+        let {
+          startDate,
+          endDate
+        } = _ref4;
         startDate.startOf('day');
         endDate.endOf('day');
         onAddFilter({
@@ -140,7 +146,7 @@ function DateRangeFilterMenu({
     showArrow: false,
     triggerComponent: /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
       buttonType: "text",
-      icon: _DatePickerIcon || (_DatePickerIcon = /*#__PURE__*/_jsx__default["default"](DatePickerIcon__default["default"], {})),
+      icon: _DatePicker || (_DatePicker = /*#__PURE__*/_jsx__default["default"](dsIcons.DatePicker2, {})),
       onClick: () => !isMenuOpened ? onOpenMenu(true) : onOpenMenu(false),
       size: "s"
     }),

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

@@ -5,9 +5,9 @@ require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var Grid = require('@elliemae/ds-grid');
 var dsControlledForm = require('@elliemae/ds-controlled-form');
-var DSPopper = require('@elliemae/ds-basic/Popper');
-var DatePickerIcon = require('@elliemae/ds-icons/DatePicker2');
-var DSButton = require('@elliemae/ds-basic/Button');
+var DSPopper = require('@elliemae/ds-popper');
+var dsIcons = require('@elliemae/ds-icons');
+var DSButton = require('@elliemae/ds-button');
 var moment = require('moment');
 var defaultDateFormat = require('./defaultDateFormat.js');
 
@@ -16,16 +16,16 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
 var DSPopper__default = /*#__PURE__*/_interopDefaultLegacy(DSPopper);
-var DatePickerIcon__default = /*#__PURE__*/_interopDefaultLegacy(DatePickerIcon);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
 
-var _DatePickerIcon;
+var _DatePicker;
 
-const SingleDatePickerContainer = ({
-  onChange = () => null,
-  showHeader
-}) => {
+const SingleDatePickerContainer = _ref => {
+  let {
+    onChange = () => null,
+    showHeader
+  } = _ref;
   const [date, setDate] = React.useState('');
   const handleDateChange = React.useCallback(data => {
     if (!data.includes('_')) onChange(moment__default["default"](data));
@@ -49,19 +49,23 @@ const SingleDatePickerContainer = ({
   }));
 };
 
-const formatDate = (date, format = defaultDateFormat.DEFAULT_DATE_FORMAT) => date.format(format);
+const formatDate = function (date) {
+  let format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultDateFormat.DEFAULT_DATE_FORMAT;
+  return date.format(format);
+};
 
-function SingleDateFilterMenu({
-  column,
-  className,
-  isMenuOpened = false,
-  onOpenMenu = () => null,
-  placement = DSPopper.PopperPositions.BOTTOM_END,
-  onAddFilter = () => null,
-  dateFormatter = formatDate,
-  showHeader = false,
-  menuProps
-}) {
+function SingleDateFilterMenu(_ref2) {
+  let {
+    column,
+    className,
+    isMenuOpened = false,
+    onOpenMenu = () => null,
+    placement = DSPopper.PopperPositions.BOTTOM_END,
+    onAddFilter = () => null,
+    dateFormatter = formatDate,
+    showHeader = false,
+    menuProps
+  } = _ref2;
   return /*#__PURE__*/_jsx__default["default"](DSPopper__default["default"], {
     contentComponent: /*#__PURE__*/_jsx__default["default"]("div", {
       className: className,
@@ -92,7 +96,7 @@ function SingleDateFilterMenu({
     showArrow: false,
     triggerComponent: /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
       buttonType: "text",
-      icon: _DatePickerIcon || (_DatePickerIcon = /*#__PURE__*/_jsx__default["default"](DatePickerIcon__default["default"], {})),
+      icon: _DatePicker || (_DatePicker = /*#__PURE__*/_jsx__default["default"](dsIcons.DatePicker2, {})),
       onClick: () => !isMenuOpened ? onOpenMenu(true) : onOpenMenu(false),
       size: "s"
     }),