@elliemae/ds-data-table 2.3.0-next.7 → 2.3.0-rc.2

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 (7) hide show
  1. package/cjs/addons/Editables/ComboboxEditableCell/ComboboxEditableCell.js +18 -7
  2. package/cjs/exported-related/EditableCell.js +3 -1
  3. package/cjs/exported-related/FilterPopover.js +6 -4
  4. package/esm/addons/Editables/ComboboxEditableCell/ComboboxEditableCell.js +17 -6
  5. package/esm/exported-related/EditableCell.js +3 -1
  6. package/esm/exported-related/FilterPopover.js +6 -4
  7. package/package.json +18 -18
package/cjs/addons/Editables/ComboboxEditableCell/ComboboxEditableCell.js CHANGED
@@ -7,11 +7,11 @@ require('core-js/modules/web.dom-collections.iterator.js');
7
7
  require('core-js/modules/esnext.async-iterator.reduce.js');
8
8
  require('core-js/modules/esnext.iterator.constructor.js');
9
9
  require('core-js/modules/esnext.iterator.reduce.js');
10
- var React = require('react');
11
- var dsForm = require('@elliemae/ds-form');
12
- require('@babel/runtime/helpers/defineProperty');
13
10
  require('core-js/modules/esnext.async-iterator.filter.js');
14
11
  require('core-js/modules/esnext.iterator.filter.js');
12
+ var React = require('react');
13
+ var dsControlledForm = require('@elliemae/ds-controlled-form');
14
+ require('@babel/runtime/helpers/defineProperty');
15
15
  require('core-js/modules/esnext.async-iterator.for-each.js');
16
16
  require('core-js/modules/esnext.iterator.for-each.js');
17
17
  require('@elliemae/ds-button');
@@ -26,6 +26,7 @@ require('core-js/modules/esnext.iterator.map.js');
26
26
  require('@elliemae/ds-icons');
27
27
  require('../../../styled.js');
28
28
  require('react/jsx-runtime');
29
+ require('@elliemae/ds-form');
29
30
  require('../../../parts/TableContent.js');
30
31
  require('@elliemae/ds-grid');
31
32
  require('@elliemae/ds-circular-progress-indicator');
@@ -61,6 +62,8 @@ const ComboboxEditableCell = props => {
61
62
  const cellValue = React.useMemo(() => cell.value, [cell.value]);
62
63
  const columnId = React.useMemo(() => cell.column.id, [cell.column.id]);
63
64
  const [value, setValue] = React.useState({
65
+ dsId: cellValue,
66
+ type: 'option',
64
67
  value: cellValue,
65
68
  label: cellValue
66
69
  });
@@ -71,6 +74,8 @@ const ComboboxEditableCell = props => {
71
74
 
72
75
  if (!uniqueValuesMap[currValue]) {
73
76
  optionsSoFar.push({
77
+ dsId: currValue,
78
+ type: 'option',
74
79
  value: currValue,
75
80
  label: currValue
76
81
  });
@@ -80,6 +85,10 @@ const ComboboxEditableCell = props => {
80
85
  return optionsSoFar;
81
86
  }, []);
82
87
  }, [flattenedData, columnId]);
88
+
89
+ const filterOptions = newFilter => uniqueOptions.filter(option => option.type === 'separator' || option.label.toLowerCase().includes(newFilter.toLowerCase()));
90
+
91
+ const [currentOptions, setCurrentOptions] = React.useState(uniqueOptions);
83
92
  const handleOnBlur = React.useCallback(() => {
84
93
  const property = columnId;
85
94
  onCellValueChange({
@@ -87,15 +96,17 @@ const ComboboxEditableCell = props => {
87
96
  property,
88
97
  rowIndex: cell.row.index
89
98
  });
90
- }, [columnId, onCellValueChange, value === null || value === void 0 ? void 0 : value.value, cell.row.index]);
99
+ }, [columnId, onCellValueChange, value === null || value === void 0 ? void 0 : value.value, cell]);
91
100
  return /*#__PURE__*/_jsx__default["default"](EditableCell.EditableCell, {
92
101
  StandardRender: DefaultCellRender,
93
- EditableRenderer: /*#__PURE__*/_jsx__default["default"](dsForm.ComboBoxFreeSolo, {
94
- value: value,
102
+ EditableRenderer: /*#__PURE__*/_jsx__default["default"](dsControlledForm.DSComboBox, {
103
+ selectedValues: value,
95
104
  autoFocus: true,
105
+ withoutPortal: false,
96
106
  onBlur: handleOnBlur,
97
107
  onChange: setValue,
98
- options: uniqueOptions
108
+ onFilter: newFilter => setCurrentOptions(filterOptions(newFilter)),
109
+ options: currentOptions
99
110
  }),
100
111
  cell: cell,
101
112
  isRowSelected: isRowSelected
package/cjs/exported-related/EditableCell.js CHANGED
@@ -53,7 +53,9 @@ const EditableCell = props => {
53
53
  }
54
54
  }, [isEditing, handleCellClick, setIsEditing]);
55
55
  const handleOnBlur = React.useCallback(event => {
56
- if (isEditing && !event.currentTarget.contains(event.relatedTarget)) {
56
+ var _event$currentTarget;
57
+
58
+ if (isEditing && !((_event$currentTarget = event.currentTarget) !== null && _event$currentTarget !== void 0 && _event$currentTarget.contains(event.relatedTarget))) {
57
59
  // Not triggered when swapping focus between children
58
60
  setIsEditing(false);
59
61
  }
package/cjs/exported-related/FilterPopover.js CHANGED
@@ -121,7 +121,9 @@ const FilterPopover = _ref2 => {
121
121
  display: 'flex'
122
122
  },
123
123
  onBlur: e => {
124
- if (e.target !== referenceElement && !popperRef.current.contains(e.relatedTarget)) {
124
+ var _popperRef$current;
125
+
126
+ if (e.target !== referenceElement && !((_popperRef$current = popperRef.current) !== null && _popperRef$current !== void 0 && _popperRef$current.contains(e.relatedTarget))) {
125
127
  referenceElement.focus();
126
128
  }
127
129
  }
@@ -141,7 +143,7 @@ const FilterPopover = _ref2 => {
141
143
  innerRef.current = _ref;
142
144
  },
143
145
  tabIndex: reduxHeader !== null && reduxHeader !== void 0 && reduxHeader.withTabStops ? 0 : -1
144
- })), /*#__PURE__*/_jsx__default["default"](dsPopperjs.DSPopperJS, {
146
+ })), referenceElement && /*#__PURE__*/_jsx__default["default"](dsPopperjs.DSPopperJS, {
145
147
  referenceElement: referenceElement,
146
148
  showPopover: isMenuOpen,
147
149
  closeContextMenu: handleClickOutsideMenu,
@@ -159,9 +161,9 @@ const FilterPopover = _ref2 => {
159
161
  onKeyDown: e => {
160
162
  if (e.code === 'Tab') {
161
163
  setTimeout(() => {
162
- var _popperRef$current;
164
+ var _popperRef$current2;
163
165
 
164
- if (!(popperRef !== null && popperRef !== void 0 && (_popperRef$current = popperRef.current) !== null && _popperRef$current !== void 0 && _popperRef$current.contains(document.activeElement))) {
166
+ if (!(popperRef !== null && popperRef !== void 0 && (_popperRef$current2 = popperRef.current) !== null && _popperRef$current2 !== void 0 && _popperRef$current2.contains(document.activeElement))) {
165
167
  patchHeader(columnId, {
166
168
  hideFilterMenu: true,
167
169
  hideFilterButton: false
package/esm/addons/Editables/ComboboxEditableCell/ComboboxEditableCell.js CHANGED
@@ -3,10 +3,10 @@ import 'core-js/modules/web.dom-collections.iterator.js';
3
3
  import 'core-js/modules/esnext.async-iterator.reduce.js';
4
4
  import 'core-js/modules/esnext.iterator.constructor.js';
5
5
  import 'core-js/modules/esnext.iterator.reduce.js';
6
- import { useContext, useMemo, useState, useCallback } from 'react';
7
- import { ComboBoxFreeSolo } from '@elliemae/ds-form';
8
6
  import 'core-js/modules/esnext.async-iterator.filter.js';
9
7
  import 'core-js/modules/esnext.iterator.filter.js';
8
+ import { useContext, useMemo, useState, useCallback } from 'react';
9
+ import { DSComboBox } from '@elliemae/ds-controlled-form';
10
10
  import 'core-js/modules/esnext.async-iterator.for-each.js';
11
11
  import 'core-js/modules/esnext.iterator.for-each.js';
12
12
  import '@babel/runtime/helpers/esm/defineProperty';
@@ -22,6 +22,7 @@ import 'core-js/modules/esnext.iterator.map.js';
22
22
  import '@elliemae/ds-icons';
23
23
  import '../../../styled.js';
24
24
  import 'react/jsx-runtime';
25
+ import '@elliemae/ds-form';
25
26
  import '../../../parts/TableContent.js';
26
27
  import '@elliemae/ds-grid';
27
28
  import '@elliemae/ds-circular-progress-indicator';
@@ -53,6 +54,8 @@ const ComboboxEditableCell = props => {
53
54
  const cellValue = useMemo(() => cell.value, [cell.value]);
54
55
  const columnId = useMemo(() => cell.column.id, [cell.column.id]);
55
56
  const [value, setValue] = useState({
57
+ dsId: cellValue,
58
+ type: 'option',
56
59
  value: cellValue,
57
60
  label: cellValue
58
61
  });
@@ -63,6 +66,8 @@ const ComboboxEditableCell = props => {
63
66
 
64
67
  if (!uniqueValuesMap[currValue]) {
65
68
  optionsSoFar.push({
69
+ dsId: currValue,
70
+ type: 'option',
66
71
  value: currValue,
67
72
  label: currValue
68
73
  });
@@ -72,6 +77,10 @@ const ComboboxEditableCell = props => {
72
77
  return optionsSoFar;
73
78
  }, []);
74
79
  }, [flattenedData, columnId]);
80
+
81
+ const filterOptions = newFilter => uniqueOptions.filter(option => option.type === 'separator' || option.label.toLowerCase().includes(newFilter.toLowerCase()));
82
+
83
+ const [currentOptions, setCurrentOptions] = useState(uniqueOptions);
75
84
  const handleOnBlur = useCallback(() => {
76
85
  const property = columnId;
77
86
  onCellValueChange({
@@ -79,15 +88,17 @@ const ComboboxEditableCell = props => {
79
88
  property,
80
89
  rowIndex: cell.row.index
81
90
  });
82
- }, [columnId, onCellValueChange, value === null || value === void 0 ? void 0 : value.value, cell.row.index]);
91
+ }, [columnId, onCellValueChange, value === null || value === void 0 ? void 0 : value.value, cell]);
83
92
  return /*#__PURE__*/_jsx(EditableCell, {
84
93
  StandardRender: DefaultCellRender,
85
- EditableRenderer: /*#__PURE__*/_jsx(ComboBoxFreeSolo, {
86
- value: value,
94
+ EditableRenderer: /*#__PURE__*/_jsx(DSComboBox, {
95
+ selectedValues: value,
87
96
  autoFocus: true,
97
+ withoutPortal: false,
88
98
  onBlur: handleOnBlur,
89
99
  onChange: setValue,
90
- options: uniqueOptions
100
+ onFilter: newFilter => setCurrentOptions(filterOptions(newFilter)),
101
+ options: currentOptions
91
102
  }),
92
103
  cell: cell,
93
104
  isRowSelected: isRowSelected
package/esm/exported-related/EditableCell.js CHANGED
@@ -45,7 +45,9 @@ const EditableCell = props => {
45
45
  }
46
46
  }, [isEditing, handleCellClick, setIsEditing]);
47
47
  const handleOnBlur = useCallback(event => {
48
- if (isEditing && !event.currentTarget.contains(event.relatedTarget)) {
48
+ var _event$currentTarget;
49
+
50
+ if (isEditing && !((_event$currentTarget = event.currentTarget) !== null && _event$currentTarget !== void 0 && _event$currentTarget.contains(event.relatedTarget))) {
49
51
  // Not triggered when swapping focus between children
50
52
  setIsEditing(false);
51
53
  }
package/esm/exported-related/FilterPopover.js CHANGED
@@ -110,7 +110,9 @@ const FilterPopover = _ref2 => {
110
110
  display: 'flex'
111
111
  },
112
112
  onBlur: e => {
113
- if (e.target !== referenceElement && !popperRef.current.contains(e.relatedTarget)) {
113
+ var _popperRef$current;
114
+
115
+ if (e.target !== referenceElement && !((_popperRef$current = popperRef.current) !== null && _popperRef$current !== void 0 && _popperRef$current.contains(e.relatedTarget))) {
114
116
  referenceElement.focus();
115
117
  }
116
118
  }
@@ -130,7 +132,7 @@ const FilterPopover = _ref2 => {
130
132
  innerRef.current = _ref;
131
133
  },
132
134
  tabIndex: reduxHeader !== null && reduxHeader !== void 0 && reduxHeader.withTabStops ? 0 : -1
133
- })), /*#__PURE__*/_jsx(DSPopperJS, {
135
+ })), referenceElement && /*#__PURE__*/_jsx(DSPopperJS, {
134
136
  referenceElement: referenceElement,
135
137
  showPopover: isMenuOpen,
136
138
  closeContextMenu: handleClickOutsideMenu,
@@ -148,9 +150,9 @@ const FilterPopover = _ref2 => {
148
150
  onKeyDown: e => {
149
151
  if (e.code === 'Tab') {
150
152
  setTimeout(() => {
151
- var _popperRef$current;
153
+ var _popperRef$current2;
152
154
 
153
- if (!(popperRef !== null && popperRef !== void 0 && (_popperRef$current = popperRef.current) !== null && _popperRef$current !== void 0 && _popperRef$current.contains(document.activeElement))) {
155
+ if (!(popperRef !== null && popperRef !== void 0 && (_popperRef$current2 = popperRef.current) !== null && _popperRef$current2 !== void 0 && _popperRef$current2.contains(document.activeElement))) {
154
156
  patchHeader(columnId, {
155
157
  hideFilterMenu: true,
156
158
  hideFilterButton: false
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-data-table",
3
- "version": "2.3.0-next.7",
3
+ "version": "2.3.0-rc.2",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Data Table",
6
6
  "module": "./esm/index.js",
@@ -570,23 +570,23 @@
570
570
  "dependencies": {
571
571
  "@dnd-kit/core": "~4.0.1",
572
572
  "@dnd-kit/sortable": "~5.0.0",
573
- "@elliemae/ds-button": "2.3.0-next.7",
574
- "@elliemae/ds-circular-progress-indicator": "2.3.0-next.7",
575
- "@elliemae/ds-controlled-form": "2.3.0-next.7",
576
- "@elliemae/ds-drag-and-drop": "2.3.0-next.7",
577
- "@elliemae/ds-dropdownmenu": "2.3.0-next.7",
578
- "@elliemae/ds-form": "2.3.0-next.7",
579
- "@elliemae/ds-form-layout-blocks": "2.3.0-next.7",
580
- "@elliemae/ds-grid": "2.3.0-next.7",
581
- "@elliemae/ds-icons": "2.3.0-next.7",
582
- "@elliemae/ds-indeterminate-progress-indicator": "2.3.0-next.7",
583
- "@elliemae/ds-pagination": "2.3.0-next.7",
584
- "@elliemae/ds-pills": "2.3.0-next.7",
585
- "@elliemae/ds-popperjs": "2.3.0-next.7",
586
- "@elliemae/ds-system": "2.3.0-next.7",
587
- "@elliemae/ds-toolbar": "2.3.0-next.7",
588
- "@elliemae/ds-truncated-tooltip-text": "2.3.0-next.7",
589
- "@elliemae/ds-utilities": "2.3.0-next.7",
573
+ "@elliemae/ds-button": "2.3.0-rc.2",
574
+ "@elliemae/ds-circular-progress-indicator": "2.3.0-rc.2",
575
+ "@elliemae/ds-controlled-form": "2.3.0-rc.2",
576
+ "@elliemae/ds-drag-and-drop": "2.3.0-rc.2",
577
+ "@elliemae/ds-dropdownmenu": "2.3.0-rc.2",
578
+ "@elliemae/ds-form": "2.3.0-rc.2",
579
+ "@elliemae/ds-form-layout-blocks": "2.3.0-rc.2",
580
+ "@elliemae/ds-grid": "2.3.0-rc.2",
581
+ "@elliemae/ds-icons": "2.3.0-rc.2",
582
+ "@elliemae/ds-indeterminate-progress-indicator": "2.3.0-rc.2",
583
+ "@elliemae/ds-pagination": "2.3.0-rc.2",
584
+ "@elliemae/ds-pills": "2.3.0-rc.2",
585
+ "@elliemae/ds-popperjs": "2.3.0-rc.2",
586
+ "@elliemae/ds-system": "2.3.0-rc.2",
587
+ "@elliemae/ds-toolbar": "2.3.0-rc.2",
588
+ "@elliemae/ds-truncated-tooltip-text": "2.3.0-rc.2",
589
+ "@elliemae/ds-utilities": "2.3.0-rc.2",
590
590
  "@reduxjs/toolkit": "~1.6.2",
591
591
  "csstype": "~3.0.9",
592
592
  "moment": "~2.29.1",