@elliemae/ds-data-table 2.4.0-rc.0 → 2.4.1-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/cjs/addons/Filters/Components/SelectFilter/BaseSelectFilter.js +4 -22
  2. package/cjs/exported-related/FilterPopover.js +13 -0
  3. package/cjs/exported-related/RowRenderer/DefaultRowContentRenderer.js +3 -4
  4. package/cjs/parts/Headers/HeaderResizer.js +6 -3
  5. package/esm/addons/Filters/Components/SelectFilter/BaseSelectFilter.js +4 -22
  6. package/esm/exported-related/FilterPopover.js +14 -1
  7. package/esm/exported-related/RowRenderer/DefaultRowContentRenderer.js +3 -4
  8. package/esm/parts/Headers/HeaderResizer.js +6 -3
  9. package/package.json +19 -19
  10. package/types/DataTable.d.ts +1 -1
  11. package/types/helpers/getIdFromUniqueRowAccessor.d.ts +1 -1
  12. package/types/types/props.d.ts +2 -2
package/cjs/addons/Filters/Components/SelectFilter/BaseSelectFilter.js CHANGED
@@ -22,10 +22,8 @@ require('core-js/modules/esnext.set.reduce.js');
22
22
  require('core-js/modules/esnext.set.some.js');
23
23
  require('core-js/modules/esnext.set.symmetric-difference.js');
24
24
  require('core-js/modules/esnext.set.union.js');
25
- require('core-js/modules/esnext.async-iterator.find.js');
26
- require('core-js/modules/esnext.iterator.constructor.js');
27
- require('core-js/modules/esnext.iterator.find.js');
28
25
  require('core-js/modules/esnext.async-iterator.filter.js');
26
+ require('core-js/modules/esnext.iterator.constructor.js');
29
27
  require('core-js/modules/esnext.iterator.filter.js');
30
28
  var React = require('react');
31
29
  var Grid = require('@elliemae/ds-grid');
@@ -65,11 +63,9 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
65
63
 
66
64
  var _SearchXsmall;
67
65
  const BaseSelectFilter = props => {
68
- var _column$ref$current$o, _column$ref, _column$ref$current;
69
-
70
66
  const {
71
67
  isMulti = false,
72
- selectedItems,
68
+ selectedItems = null,
73
69
  column,
74
70
  type,
75
71
  column: {
@@ -104,19 +100,7 @@ const BaseSelectFilter = props => {
104
100
  }, [data, id, userFilterOptions]);
105
101
 
106
102
  const handleOnChange = value => {
107
- if (isMulti) {
108
- const multiSelectedItem = selectedItems;
109
- const isFound = multiSelectedItem.find(item => item.dsId === value.dsId);
110
-
111
- if (isFound) {
112
- onValueChange(type, multiSelectedItem.filter(item => item.dsId !== value.dsId));
113
- } else {
114
- onValueChange(type, [...multiSelectedItem, value]);
115
- }
116
- } else {
117
- const singleSelectedItem = selectedItems;
118
- onValueChange(type, (singleSelectedItem === null || singleSelectedItem === void 0 ? void 0 : singleSelectedItem.dsId) !== value.dsId ? value : null);
119
- }
103
+ onValueChange(type, value);
120
104
  };
121
105
 
122
106
  const [filters, setFilteredOptions] = React.useState(filterOptions);
@@ -157,9 +141,7 @@ const BaseSelectFilter = props => {
157
141
  innerRef: innerRef,
158
142
  ariaLabel: "Open Selection Filter",
159
143
  onClickOutsideMenu: handleOnClickOutside,
160
- customStyles: {
161
- width: (_column$ref$current$o = (_column$ref = column.ref) === null || _column$ref === void 0 ? void 0 : (_column$ref$current = _column$ref.current) === null || _column$ref$current === void 0 ? void 0 : _column$ref$current.offsetWidth) !== null && _column$ref$current$o !== void 0 ? _column$ref$current$o : '0px'
162
- }
144
+ customStyles: {}
163
145
  });
164
146
  };
165
147
 
package/cjs/exported-related/FilterPopover.js CHANGED
@@ -90,6 +90,19 @@ const FilterPopover = _ref2 => {
90
90
  if (isMenuOpen) patchHeaderFilterButtonAndMenu(columnId, true);
91
91
  };
92
92
 
93
+ React.useEffect(() => {
94
+ const closeMenu = () => {
95
+ patchHeaderFilterButtonAndMenu(columnId, true);
96
+ };
97
+
98
+ window.addEventListener('blur', closeMenu);
99
+ window.addEventListener('resize', closeMenu);
100
+ return () => {
101
+ window.removeEventListener('blur', closeMenu);
102
+ window.removeEventListener('resize', closeMenu);
103
+ };
104
+ }, [columnId, patchHeaderFilterButtonAndMenu]);
105
+
93
106
  const handleTriggerClick = e => {
94
107
  onTriggerClick(columnId, e);
95
108
  patchHeaderFilterButtonAndMenu(columnId, false);
package/cjs/exported-related/RowRenderer/DefaultRowContentRenderer.js CHANGED
@@ -36,7 +36,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
36
36
  const DetailsWrapper = props =>
37
37
  /*#__PURE__*/
38
38
  // This can be further customized
39
- // eslint-disable-next-line react/prop-types
40
39
  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
41
40
  _jsx__default["default"]("div", {
42
41
  "data-role": "detail-view",
@@ -80,9 +79,9 @@ const DefaultRowContentRenderer = props => {
80
79
  const isDragging = draggableProps && draggableProps.isDragging;
81
80
  React.useLayoutEffect(() => {
82
81
  if (row.uid === focusedRowId) {
83
- rowRef.current.focus({
84
- preventScroll: true
85
- });
82
+ var _rowRef$current;
83
+
84
+ (_rowRef$current = rowRef.current) === null || _rowRef$current === void 0 ? void 0 : _rowRef$current.focus();
86
85
  }
87
86
  }, [focusedRowId, row.uid]);
88
87
  const gridTemplateColProps = React.useMemo(() => ({
package/cjs/parts/Headers/HeaderResizer.js CHANGED
@@ -72,7 +72,9 @@ const HeaderResizer = _ref => {
72
72
  setIsResizing(true);
73
73
  }, []);
74
74
  const onResizeHandler = React.useCallback(e => {
75
- const delta = e.clientX - ref.current.getBoundingClientRect().x; // delta in pixels
75
+ var _ref$current$getBound, _ref$current;
76
+
77
+ const delta = ('clientX' in e ? e.clientX : e.touches[0].clientX) - ((_ref$current$getBound = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect().x) !== null && _ref$current$getBound !== void 0 ? _ref$current$getBound : 0); // delta in pixels
76
78
 
77
79
  const realColumnIndex = visibleColumnsCopy.findIndex(visibleColumn => visibleColumn.id === column.id);
78
80
  const widthWithDelta = narrow(nextWidth + delta, visibleColumnsCopy[realColumnIndex].minWidth, visibleColumnsCopy[realColumnIndex].maxWidth);
@@ -82,9 +84,9 @@ const HeaderResizer = _ref => {
82
84
  e.stopPropagation();
83
85
  }, [column.id, nextWidth, visibleColumnsCopy]);
84
86
  const onResizeEnd = React.useCallback(() => {
85
- setIsResizing(false);
86
87
  onColumnResize(column.id, nextWidth);
87
88
  setGridLayout(columnsToGrid.columnsToGrid(visibleColumns, constants.ColsLayoutStyle.Fixed));
89
+ setIsResizing(false);
88
90
  }, [onColumnResize, column.id, nextWidth, setGridLayout, visibleColumns]);
89
91
  React.useEffect(() => {
90
92
  const debouncedResizeHandler = onResizeHandler;
@@ -116,7 +118,8 @@ const HeaderResizer = _ref => {
116
118
  onMouseDown: onResizeStart,
117
119
  onTouchStart: onResizeStart,
118
120
  onMouseUp: onResizeEnd,
119
- onTouchEnd: onResizeEnd
121
+ onTouchEnd: onResizeEnd,
122
+ onClick: e => e.stopPropagation()
120
123
  });
121
124
  };
122
125
 
package/esm/addons/Filters/Components/SelectFilter/BaseSelectFilter.js CHANGED
@@ -18,10 +18,8 @@ import 'core-js/modules/esnext.set.reduce.js';
18
18
  import 'core-js/modules/esnext.set.some.js';
19
19
  import 'core-js/modules/esnext.set.symmetric-difference.js';
20
20
  import 'core-js/modules/esnext.set.union.js';
21
- import 'core-js/modules/esnext.async-iterator.find.js';
22
- import 'core-js/modules/esnext.iterator.constructor.js';
23
- import 'core-js/modules/esnext.iterator.find.js';
24
21
  import 'core-js/modules/esnext.async-iterator.filter.js';
22
+ import 'core-js/modules/esnext.iterator.constructor.js';
25
23
  import 'core-js/modules/esnext.iterator.filter.js';
26
24
  import { useMemo, useState, useEffect, useCallback } from 'react';
27
25
  import { Grid } from '@elliemae/ds-grid';
@@ -57,11 +55,9 @@ import 'core-js/modules/esnext.iterator.some.js';
57
55
 
58
56
  var _SearchXsmall;
59
57
  const BaseSelectFilter = props => {
60
- var _column$ref$current$o, _column$ref, _column$ref$current;
61
-
62
58
  const {
63
59
  isMulti = false,
64
- selectedItems,
60
+ selectedItems = null,
65
61
  column,
66
62
  type,
67
63
  column: {
@@ -96,19 +92,7 @@ const BaseSelectFilter = props => {
96
92
  }, [data, id, userFilterOptions]);
97
93
 
98
94
  const handleOnChange = value => {
99
- if (isMulti) {
100
- const multiSelectedItem = selectedItems;
101
- const isFound = multiSelectedItem.find(item => item.dsId === value.dsId);
102
-
103
- if (isFound) {
104
- onValueChange(type, multiSelectedItem.filter(item => item.dsId !== value.dsId));
105
- } else {
106
- onValueChange(type, [...multiSelectedItem, value]);
107
- }
108
- } else {
109
- const singleSelectedItem = selectedItems;
110
- onValueChange(type, (singleSelectedItem === null || singleSelectedItem === void 0 ? void 0 : singleSelectedItem.dsId) !== value.dsId ? value : null);
111
- }
95
+ onValueChange(type, value);
112
96
  };
113
97
 
114
98
  const [filters, setFilteredOptions] = useState(filterOptions);
@@ -149,9 +133,7 @@ const BaseSelectFilter = props => {
149
133
  innerRef: innerRef,
150
134
  ariaLabel: "Open Selection Filter",
151
135
  onClickOutsideMenu: handleOnClickOutside,
152
- customStyles: {
153
- width: (_column$ref$current$o = (_column$ref = column.ref) === null || _column$ref === void 0 ? void 0 : (_column$ref$current = _column$ref.current) === null || _column$ref$current === void 0 ? void 0 : _column$ref$current.offsetWidth) !== null && _column$ref$current$o !== void 0 ? _column$ref$current$o : '0px'
154
- }
136
+ customStyles: {}
155
137
  });
156
138
  };
157
139
 
package/esm/exported-related/FilterPopover.js CHANGED
@@ -6,7 +6,7 @@ import 'core-js/modules/esnext.iterator.for-each.js';
6
6
  import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
7
7
  import _jsx from '@babel/runtime/helpers/esm/jsx';
8
8
  import 'core-js/modules/web.dom-collections.iterator.js';
9
- import { useRef, useState } from 'react';
9
+ import { useRef, useEffect, useState } from 'react';
10
10
  import DSButton from '@elliemae/ds-button';
11
11
  import { DSPopperJS } from '@elliemae/ds-popperjs';
12
12
  import styled from 'styled-components';
@@ -79,6 +79,19 @@ const FilterPopover = _ref2 => {
79
79
  if (isMenuOpen) patchHeaderFilterButtonAndMenu(columnId, true);
80
80
  };
81
81
 
82
+ useEffect(() => {
83
+ const closeMenu = () => {
84
+ patchHeaderFilterButtonAndMenu(columnId, true);
85
+ };
86
+
87
+ window.addEventListener('blur', closeMenu);
88
+ window.addEventListener('resize', closeMenu);
89
+ return () => {
90
+ window.removeEventListener('blur', closeMenu);
91
+ window.removeEventListener('resize', closeMenu);
92
+ };
93
+ }, [columnId, patchHeaderFilterButtonAndMenu]);
94
+
82
95
  const handleTriggerClick = e => {
83
96
  onTriggerClick(columnId, e);
84
97
  patchHeaderFilterButtonAndMenu(columnId, false);
package/esm/exported-related/RowRenderer/DefaultRowContentRenderer.js CHANGED
@@ -27,7 +27,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
27
27
  const DetailsWrapper = props =>
28
28
  /*#__PURE__*/
29
29
  // This can be further customized
30
- // eslint-disable-next-line react/prop-types
31
30
  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
32
31
  _jsx("div", {
33
32
  "data-role": "detail-view",
@@ -71,9 +70,9 @@ const DefaultRowContentRenderer = props => {
71
70
  const isDragging = draggableProps && draggableProps.isDragging;
72
71
  useLayoutEffect(() => {
73
72
  if (row.uid === focusedRowId) {
74
- rowRef.current.focus({
75
- preventScroll: true
76
- });
73
+ var _rowRef$current;
74
+
75
+ (_rowRef$current = rowRef.current) === null || _rowRef$current === void 0 ? void 0 : _rowRef$current.focus();
77
76
  }
78
77
  }, [focusedRowId, row.uid]);
79
78
  const gridTemplateColProps = useMemo(() => ({
package/esm/parts/Headers/HeaderResizer.js CHANGED
@@ -64,7 +64,9 @@ const HeaderResizer = _ref => {
64
64
  setIsResizing(true);
65
65
  }, []);
66
66
  const onResizeHandler = useCallback(e => {
67
- const delta = e.clientX - ref.current.getBoundingClientRect().x; // delta in pixels
67
+ var _ref$current$getBound, _ref$current;
68
+
69
+ const delta = ('clientX' in e ? e.clientX : e.touches[0].clientX) - ((_ref$current$getBound = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect().x) !== null && _ref$current$getBound !== void 0 ? _ref$current$getBound : 0); // delta in pixels
68
70
 
69
71
  const realColumnIndex = visibleColumnsCopy.findIndex(visibleColumn => visibleColumn.id === column.id);
70
72
  const widthWithDelta = narrow(nextWidth + delta, visibleColumnsCopy[realColumnIndex].minWidth, visibleColumnsCopy[realColumnIndex].maxWidth);
@@ -74,9 +76,9 @@ const HeaderResizer = _ref => {
74
76
  e.stopPropagation();
75
77
  }, [column.id, nextWidth, visibleColumnsCopy]);
76
78
  const onResizeEnd = useCallback(() => {
77
- setIsResizing(false);
78
79
  onColumnResize(column.id, nextWidth);
79
80
  setGridLayout(columnsToGrid(visibleColumns, ColsLayoutStyle.Fixed));
81
+ setIsResizing(false);
80
82
  }, [onColumnResize, column.id, nextWidth, setGridLayout, visibleColumns]);
81
83
  useEffect(() => {
82
84
  const debouncedResizeHandler = onResizeHandler;
@@ -108,7 +110,8 @@ const HeaderResizer = _ref => {
108
110
  onMouseDown: onResizeStart,
109
111
  onTouchStart: onResizeStart,
110
112
  onMouseUp: onResizeEnd,
111
- onTouchEnd: onResizeEnd
113
+ onTouchEnd: onResizeEnd,
114
+ onClick: e => e.stopPropagation()
112
115
  });
113
116
  };
114
117
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-data-table",
3
- "version": "2.4.0-rc.0",
3
+ "version": "2.4.1-rc.0",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Data Table",
6
6
  "module": "./esm/index.js",
@@ -570,24 +570,24 @@
570
570
  "dependencies": {
571
571
  "@dnd-kit/core": "~4.0.1",
572
572
  "@dnd-kit/sortable": "~5.0.0",
573
- "@elliemae/ds-button": "2.4.0-rc.0",
574
- "@elliemae/ds-circular-progress-indicator": "2.4.0-rc.0",
575
- "@elliemae/ds-controlled-form": "2.4.0-rc.0",
576
- "@elliemae/ds-drag-and-drop": "2.4.0-rc.0",
577
- "@elliemae/ds-dropdownmenu": "2.4.0-rc.0",
578
- "@elliemae/ds-form": "2.4.0-rc.0",
579
- "@elliemae/ds-form-layout-blocks": "2.4.0-rc.0",
580
- "@elliemae/ds-grid": "2.4.0-rc.0",
581
- "@elliemae/ds-icons": "2.4.0-rc.0",
582
- "@elliemae/ds-indeterminate-progress-indicator": "2.4.0-rc.0",
583
- "@elliemae/ds-pagination": "2.4.0-rc.0",
584
- "@elliemae/ds-pills": "2.4.0-rc.0",
585
- "@elliemae/ds-popperjs": "2.4.0-rc.0",
586
- "@elliemae/ds-props-helpers": "2.4.0-rc.0",
587
- "@elliemae/ds-system": "2.4.0-rc.0",
588
- "@elliemae/ds-toolbar": "2.4.0-rc.0",
589
- "@elliemae/ds-truncated-tooltip-text": "2.4.0-rc.0",
590
- "@elliemae/ds-utilities": "2.4.0-rc.0",
573
+ "@elliemae/ds-button": "2.4.1-rc.0",
574
+ "@elliemae/ds-circular-progress-indicator": "2.4.1-rc.0",
575
+ "@elliemae/ds-controlled-form": "2.4.1-rc.0",
576
+ "@elliemae/ds-drag-and-drop": "2.4.1-rc.0",
577
+ "@elliemae/ds-dropdownmenu": "2.4.1-rc.0",
578
+ "@elliemae/ds-form": "2.4.1-rc.0",
579
+ "@elliemae/ds-form-layout-blocks": "2.4.1-rc.0",
580
+ "@elliemae/ds-grid": "2.4.1-rc.0",
581
+ "@elliemae/ds-icons": "2.4.1-rc.0",
582
+ "@elliemae/ds-indeterminate-progress-indicator": "2.4.1-rc.0",
583
+ "@elliemae/ds-pagination": "2.4.1-rc.0",
584
+ "@elliemae/ds-pills": "2.4.1-rc.0",
585
+ "@elliemae/ds-popperjs": "2.4.1-rc.0",
586
+ "@elliemae/ds-props-helpers": "2.4.1-rc.0",
587
+ "@elliemae/ds-system": "2.4.1-rc.0",
588
+ "@elliemae/ds-toolbar": "2.4.1-rc.0",
589
+ "@elliemae/ds-truncated-tooltip-text": "2.4.1-rc.0",
590
+ "@elliemae/ds-utilities": "2.4.1-rc.0",
591
591
  "@reduxjs/toolkit": "~1.6.2",
592
592
  "csstype": "~3.0.9",
593
593
  "moment": "~2.29.1",
package/types/DataTable.d.ts CHANGED
@@ -55,7 +55,7 @@ export declare const DataTable: {
55
55
  renderRowActions?: import("./types/props").TypescriptRenderRowActions | undefined;
56
56
  getRowVariant?: ((row: import("./types/props").TypescriptRow, defaultCellsRenderer: React.ComponentType<any>) => React.ComponentType<any> | import("./types/props").RowVariant) | undefined;
57
57
  isExpandable?: boolean | undefined;
58
- uniqueRowAccessor?: import("./types/props").uniqueRowAccessorType | undefined;
58
+ uniqueRowAccessor?: import("./types/props").UniqueRowAccessorType | undefined;
59
59
  disabledRows?: Record<string, boolean> | undefined;
60
60
  expandedRows?: Record<string, boolean> | undefined;
61
61
  cellRendererProps?: Record<string, any> | undefined;
package/types/helpers/getIdFromUniqueRowAccessor.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { TypescriptRow, uniqueRowAccessorType } from '../types/props';
1
+ import { TypescriptRow } from '../types/props';
2
2
  export declare const getIdFromUniqueRowAccessor: (uniqueRowAccessor: uniqueRowAccessorType, row: Partial<TypescriptRow>) => string;
package/types/types/props.d.ts CHANGED
@@ -74,7 +74,7 @@ export declare type TypescriptSortBy = {
74
74
  };
75
75
  export declare type TypescriptSelectionItem = true | 'mixed' | false;
76
76
  export declare type TypescriptSelection = Record<string | number, TypescriptSelectionItem>;
77
- export declare type uniqueRowAccessorType = string | string[] | ((row: TypescriptRow) => string);
77
+ export declare type UniqueRowAccessorType = string | string[] | ((row: TypescriptRow) => string);
78
78
  export declare type TypescriptProps = {
79
79
  columns: TypescriptColumn[];
80
80
  data: TypescriptRow[];
@@ -83,7 +83,7 @@ export declare type TypescriptProps = {
83
83
  renderRowActions?: TypescriptRenderRowActions;
84
84
  getRowVariant?: (row: TypescriptRow, defaultCellsRenderer: React.ComponentType<any>) => RowVariant | React.ComponentType<any>;
85
85
  isExpandable?: boolean;
86
- uniqueRowAccessor?: uniqueRowAccessorType;
86
+ uniqueRowAccessor?: UniqueRowAccessorType;
87
87
  disabledRows?: Record<string, boolean>;
88
88
  expandedRows?: Record<string, boolean>;
89
89
  cellRendererProps?: Record<string, any>;