@elliemae/ds-data-table 2.3.0-next.5 → 2.3.0-next.9
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.
|
@@ -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
|
|
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"](
|
|
94
|
-
|
|
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
|
-
|
|
108
|
+
onFilter: newFilter => setCurrentOptions(filterOptions(newFilter)),
|
|
109
|
+
options: currentOptions
|
|
99
110
|
}),
|
|
100
111
|
cell: cell,
|
|
101
112
|
isRowSelected: isRowSelected
|
|
@@ -141,7 +141,7 @@ const FilterPopover = _ref2 => {
|
|
|
141
141
|
innerRef.current = _ref;
|
|
142
142
|
},
|
|
143
143
|
tabIndex: reduxHeader !== null && reduxHeader !== void 0 && reduxHeader.withTabStops ? 0 : -1
|
|
144
|
-
})), /*#__PURE__*/_jsx__default["default"](dsPopperjs.DSPopperJS, {
|
|
144
|
+
})), referenceElement && /*#__PURE__*/_jsx__default["default"](dsPopperjs.DSPopperJS, {
|
|
145
145
|
referenceElement: referenceElement,
|
|
146
146
|
showPopover: isMenuOpen,
|
|
147
147
|
closeContextMenu: handleClickOutsideMenu,
|
|
@@ -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
|
|
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(
|
|
86
|
-
|
|
94
|
+
EditableRenderer: /*#__PURE__*/_jsx(DSComboBox, {
|
|
95
|
+
selectedValues: value,
|
|
87
96
|
autoFocus: true,
|
|
97
|
+
withoutPortal: false,
|
|
88
98
|
onBlur: handleOnBlur,
|
|
89
99
|
onChange: setValue,
|
|
90
|
-
|
|
100
|
+
onFilter: newFilter => setCurrentOptions(filterOptions(newFilter)),
|
|
101
|
+
options: currentOptions
|
|
91
102
|
}),
|
|
92
103
|
cell: cell,
|
|
93
104
|
isRowSelected: isRowSelected
|
|
@@ -130,7 +130,7 @@ const FilterPopover = _ref2 => {
|
|
|
130
130
|
innerRef.current = _ref;
|
|
131
131
|
},
|
|
132
132
|
tabIndex: reduxHeader !== null && reduxHeader !== void 0 && reduxHeader.withTabStops ? 0 : -1
|
|
133
|
-
})), /*#__PURE__*/_jsx(DSPopperJS, {
|
|
133
|
+
})), referenceElement && /*#__PURE__*/_jsx(DSPopperJS, {
|
|
134
134
|
referenceElement: referenceElement,
|
|
135
135
|
showPopover: isMenuOpen,
|
|
136
136
|
closeContextMenu: handleClickOutsideMenu,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-data-table",
|
|
3
|
-
"version": "2.3.0-next.
|
|
3
|
+
"version": "2.3.0-next.9",
|
|
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.
|
|
574
|
-
"@elliemae/ds-circular-progress-indicator": "2.3.0-next.
|
|
575
|
-
"@elliemae/ds-controlled-form": "2.3.0-next.
|
|
576
|
-
"@elliemae/ds-drag-and-drop": "2.3.0-next.
|
|
577
|
-
"@elliemae/ds-dropdownmenu": "2.3.0-next.
|
|
578
|
-
"@elliemae/ds-form": "2.3.0-next.
|
|
579
|
-
"@elliemae/ds-form-layout-blocks": "2.3.0-next.
|
|
580
|
-
"@elliemae/ds-grid": "2.3.0-next.
|
|
581
|
-
"@elliemae/ds-icons": "2.3.0-next.
|
|
582
|
-
"@elliemae/ds-indeterminate-progress-indicator": "2.3.0-next.
|
|
583
|
-
"@elliemae/ds-pagination": "2.3.0-next.
|
|
584
|
-
"@elliemae/ds-pills": "2.3.0-next.
|
|
585
|
-
"@elliemae/ds-popperjs": "2.3.0-next.
|
|
586
|
-
"@elliemae/ds-system": "2.3.0-next.
|
|
587
|
-
"@elliemae/ds-toolbar": "2.3.0-next.
|
|
588
|
-
"@elliemae/ds-truncated-tooltip-text": "2.3.0-next.
|
|
589
|
-
"@elliemae/ds-utilities": "2.3.0-next.
|
|
573
|
+
"@elliemae/ds-button": "2.3.0-next.9",
|
|
574
|
+
"@elliemae/ds-circular-progress-indicator": "2.3.0-next.9",
|
|
575
|
+
"@elliemae/ds-controlled-form": "2.3.0-next.9",
|
|
576
|
+
"@elliemae/ds-drag-and-drop": "2.3.0-next.9",
|
|
577
|
+
"@elliemae/ds-dropdownmenu": "2.3.0-next.9",
|
|
578
|
+
"@elliemae/ds-form": "2.3.0-next.9",
|
|
579
|
+
"@elliemae/ds-form-layout-blocks": "2.3.0-next.9",
|
|
580
|
+
"@elliemae/ds-grid": "2.3.0-next.9",
|
|
581
|
+
"@elliemae/ds-icons": "2.3.0-next.9",
|
|
582
|
+
"@elliemae/ds-indeterminate-progress-indicator": "2.3.0-next.9",
|
|
583
|
+
"@elliemae/ds-pagination": "2.3.0-next.9",
|
|
584
|
+
"@elliemae/ds-pills": "2.3.0-next.9",
|
|
585
|
+
"@elliemae/ds-popperjs": "2.3.0-next.9",
|
|
586
|
+
"@elliemae/ds-system": "2.3.0-next.9",
|
|
587
|
+
"@elliemae/ds-toolbar": "2.3.0-next.9",
|
|
588
|
+
"@elliemae/ds-truncated-tooltip-text": "2.3.0-next.9",
|
|
589
|
+
"@elliemae/ds-utilities": "2.3.0-next.9",
|
|
590
590
|
"@reduxjs/toolkit": "~1.6.2",
|
|
591
591
|
"csstype": "~3.0.9",
|
|
592
592
|
"moment": "~2.29.1",
|