@elliemae/ds-data-table 2.3.0-next.4 → 2.3.0-next.8

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.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
@@ -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.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
@@ -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.4",
3
+ "version": "2.3.0-next.8",
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.4",
574
- "@elliemae/ds-circular-progress-indicator": "2.3.0-next.4",
575
- "@elliemae/ds-controlled-form": "2.3.0-next.4",
576
- "@elliemae/ds-drag-and-drop": "2.3.0-next.4",
577
- "@elliemae/ds-dropdownmenu": "2.3.0-next.4",
578
- "@elliemae/ds-form": "2.3.0-next.4",
579
- "@elliemae/ds-form-layout-blocks": "2.3.0-next.4",
580
- "@elliemae/ds-grid": "2.3.0-next.4",
581
- "@elliemae/ds-icons": "2.3.0-next.4",
582
- "@elliemae/ds-indeterminate-progress-indicator": "2.3.0-next.4",
583
- "@elliemae/ds-pagination": "2.3.0-next.4",
584
- "@elliemae/ds-pills": "2.3.0-next.4",
585
- "@elliemae/ds-popperjs": "2.3.0-next.4",
586
- "@elliemae/ds-system": "2.3.0-next.4",
587
- "@elliemae/ds-toolbar": "2.3.0-next.4",
588
- "@elliemae/ds-truncated-tooltip-text": "2.3.0-next.4",
589
- "@elliemae/ds-utilities": "2.3.0-next.4",
573
+ "@elliemae/ds-button": "2.3.0-next.8",
574
+ "@elliemae/ds-circular-progress-indicator": "2.3.0-next.8",
575
+ "@elliemae/ds-controlled-form": "2.3.0-next.8",
576
+ "@elliemae/ds-drag-and-drop": "2.3.0-next.8",
577
+ "@elliemae/ds-dropdownmenu": "2.3.0-next.8",
578
+ "@elliemae/ds-form": "2.3.0-next.8",
579
+ "@elliemae/ds-form-layout-blocks": "2.3.0-next.8",
580
+ "@elliemae/ds-grid": "2.3.0-next.8",
581
+ "@elliemae/ds-icons": "2.3.0-next.8",
582
+ "@elliemae/ds-indeterminate-progress-indicator": "2.3.0-next.8",
583
+ "@elliemae/ds-pagination": "2.3.0-next.8",
584
+ "@elliemae/ds-pills": "2.3.0-next.8",
585
+ "@elliemae/ds-popperjs": "2.3.0-next.8",
586
+ "@elliemae/ds-system": "2.3.0-next.8",
587
+ "@elliemae/ds-toolbar": "2.3.0-next.8",
588
+ "@elliemae/ds-truncated-tooltip-text": "2.3.0-next.8",
589
+ "@elliemae/ds-utilities": "2.3.0-next.8",
590
590
  "@reduxjs/toolkit": "~1.6.2",
591
591
  "csstype": "~3.0.9",
592
592
  "moment": "~2.29.1",