@elliemae/ds-data-table 2.0.0-rc.11 → 2.0.0-rc.12

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 (8) hide show
  1. package/cjs/addons/Editables/TextEditableCell/TextEditableCell.js +16 -0
  2. package/cjs/exported-related/EditableCell.js +11 -5
  3. package/cjs/styled.js +16 -11
  4. package/esm/addons/Editables/TextEditableCell/TextEditableCell.js +16 -0
  5. package/esm/exported-related/EditableCell.js +11 -5
  6. package/esm/styled.js +16 -11
  7. package/package.json +17 -17
  8. package/types/styled.d.ts +3 -1
package/cjs/addons/Editables/TextEditableCell/TextEditableCell.js CHANGED
@@ -79,15 +79,31 @@ const TextEditableCell = props => {
79
79
  rowIndex
80
80
  });
81
81
  }, [value, onCellValueChange, cell.column.id, cell.row.index]);
82
+ const handleOnKeyDown = React.useCallback(e => {
83
+ if (e.code === 'Enter') {
84
+ cell.ref.current.focus(); // will exec on blur callback from input and save new value
85
+ }
86
+
87
+ if (e.code === 'Escape') {
88
+ setValue(cell.value);
89
+ const auxRef = cell.ref.current; // this prevent the on blur
90
+
91
+ setTimeout(() => {
92
+ auxRef.focus();
93
+ });
94
+ }
95
+ }, [cell]);
82
96
  return /*#__PURE__*/_jsx__default["default"](EditableCell.EditableCell, {
83
97
  StandardRender: DefaultCellRender,
84
98
  EditableRenderer: /*#__PURE__*/_jsx__default["default"](StyledInput, {
85
99
  value: value,
100
+ onKeyDown: handleOnKeyDown,
86
101
  onChange: handleOnChange,
87
102
  onBlur: handleOnBlur,
88
103
  autoFocus: true
89
104
  }),
90
105
  cell: cell,
106
+ setValue: setValue,
91
107
  isRowSelected: isRowSelected
92
108
  });
93
109
  };
package/cjs/exported-related/EditableCell.js CHANGED
@@ -19,7 +19,8 @@ const EditableCell = props => {
19
19
  StandardRender,
20
20
  EditableRenderer,
21
21
  cell,
22
- isRowSelected
22
+ isRowSelected,
23
+ setValue
23
24
  } = props;
24
25
  const {
25
26
  virtualListHelpers
@@ -41,20 +42,25 @@ const EditableCell = props => {
41
42
  }
42
43
  }, [isEditing]);
43
44
  const handleOnKeyDown = React.useCallback(e => {
44
- if (isEditing) e.stopPropagation();
45
+ if (isEditing) {
46
+ e.stopPropagation();
45
47
 
46
- if (['Enter', 'Space'].includes(e.code)) {
48
+ if (['Enter', 'Escape'].includes(e.code)) {
49
+ setIsEditing(false);
50
+ }
51
+ } else if (['Enter', 'Space'].includes(e.code)) {
47
52
  handleCellClick(e);
48
53
  }
49
- }, [isEditing, handleCellClick]);
54
+ }, [isEditing, handleCellClick, setIsEditing]);
50
55
  const handleOnBlur = React.useCallback(event => {
51
56
  if (isEditing && !event.currentTarget.contains(event.relatedTarget)) {
52
57
  // Not triggered when swapping focus between children
53
58
  setIsEditing(false);
54
59
  }
55
60
  }, [isEditing]);
61
+ const cols = !isEditing ? ['auto', 'min-content'] : ['auto'];
56
62
  return /*#__PURE__*/jsxRuntime.jsxs(styled.StyledEditableContainer, {
57
- cols: !isEditing ? ['auto', 'min-content'] : ['auto'],
63
+ cols: cols,
58
64
  tabIndex: isRowSelected && !isEditing ? 0 : -1,
59
65
  ref: cell.ref,
60
66
  onClick: handleCellClick,
package/cjs/styled.js CHANGED
@@ -158,22 +158,27 @@ const StyledPencilIcon = /*#__PURE__*/styled__default["default"](dsIcons.EditPen
158
158
  })([""]);
159
159
  const StyledEditableContainer = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
160
160
  componentId: "sc-38sgfo-14"
161
- })(["width:100%;height:100%;align-items:center;& ", "{display:", ";}&:hover{", "{display:block;}}&:focus{", " ", "{display:block;}}outline:none;"], StyledPencilIcon, props => props.shouldDisplayEditIcon ? 'block' : 'none', StyledPencilIcon, styledFocusCss, StyledPencilIcon); // ROW ************************************************************************/
161
+ })(["width:100%;height:100%;align-items:center;& ", "{display:", ";}&:hover{", "{display:block;}}&:focus{", " ", "{display:block;}}outline:none;"], StyledPencilIcon, _ref8 => {
162
+ let {
163
+ shouldDisplayEditIcon
164
+ } = _ref8;
165
+ return shouldDisplayEditIcon ? 'block' : 'none';
166
+ }, StyledPencilIcon, styledFocusCss, StyledPencilIcon); // ROW ************************************************************************/
162
167
 
163
168
  const StyledFullsizeGrid = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
164
169
  componentId: "sc-38sgfo-15"
165
170
  })(["position:relative;z-index:", ";min-height:", ";height:", ";"], zIndexInternalConfig.ZIndexDataTable.ROW, props => props.minHeight || '36px', props => props.height || 'auto');
166
171
  const GroupHeaderContainer = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
167
172
  componentId: "sc-38sgfo-16"
168
- })(["position:relative;background-color:", ";align-items:center;padding:0 ", ";border-top:1px solid ", ";grid-template-columns:min-content 1fr;"], _ref8 => {
173
+ })(["position:relative;background-color:", ";align-items:center;padding:0 ", ";border-top:1px solid ", ";grid-template-columns:min-content 1fr;"], _ref9 => {
169
174
  let {
170
175
  theme
171
- } = _ref8;
176
+ } = _ref9;
172
177
  return theme.colors.brand[200];
173
- }, props => props.padding, _ref9 => {
178
+ }, props => props.padding, _ref10 => {
174
179
  let {
175
180
  theme
176
- } = _ref9;
181
+ } = _ref10;
177
182
  return theme.colors.brand[300];
178
183
  });
179
184
  const GroupHeaderTitle = /*#__PURE__*/styled__default["default"].span.withConfig({
@@ -185,27 +190,27 @@ const StyledCellContainer = /*#__PURE__*/styled__default["default"](Grid__defaul
185
190
  cols: props.cols,
186
191
  colsLayoutStyle: props.colLayoutStyle,
187
192
  isExpandable: props.isExpandable
188
- }), _ref10 => {
193
+ }), _ref11 => {
189
194
  let {
190
195
  backgroundColor,
191
196
  isDragging,
192
197
  theme
193
- } = _ref10;
198
+ } = _ref11;
194
199
  return isDragging ? theme.colors.neutral[100] : backgroundColor || 'white';
195
- }, props => props.isDragOverlay ? '' : styledFocusCss(props), _ref11 => {
200
+ }, props => props.isDragOverlay ? '' : styledFocusCss(props), _ref12 => {
196
201
  let {
197
202
  isDropIndicatorPositionInside,
198
203
  theme
199
- } = _ref11;
204
+ } = _ref12;
200
205
  if (!isDropIndicatorPositionInside) return '';
201
206
  return styledFocusCss({
202
207
  theme
203
208
  });
204
- }, _ref12 => {
209
+ }, _ref13 => {
205
210
  let {
206
211
  shouldDisplayHover,
207
212
  theme
208
- } = _ref12;
213
+ } = _ref13;
209
214
  return shouldDisplayHover ? ":hover {\n background-color: ".concat(theme.colors.brand[200], ";\n }") : '';
210
215
  }, props => props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent', props => props.isDragging ? 0.8 : 1, props => !props.selected ? '' : "\n background-color: ".concat(props.theme.colors.brand[200], ";\n border: 1px solid ").concat(props.theme.colors.brand[500], ";\n "), props => props.disabled ? props.theme.colors.neutral['500'] : '#333333');
211
216
 
package/esm/addons/Editables/TextEditableCell/TextEditableCell.js CHANGED
@@ -70,15 +70,31 @@ const TextEditableCell = props => {
70
70
  rowIndex
71
71
  });
72
72
  }, [value, onCellValueChange, cell.column.id, cell.row.index]);
73
+ const handleOnKeyDown = useCallback(e => {
74
+ if (e.code === 'Enter') {
75
+ cell.ref.current.focus(); // will exec on blur callback from input and save new value
76
+ }
77
+
78
+ if (e.code === 'Escape') {
79
+ setValue(cell.value);
80
+ const auxRef = cell.ref.current; // this prevent the on blur
81
+
82
+ setTimeout(() => {
83
+ auxRef.focus();
84
+ });
85
+ }
86
+ }, [cell]);
73
87
  return /*#__PURE__*/_jsx(EditableCell, {
74
88
  StandardRender: DefaultCellRender,
75
89
  EditableRenderer: /*#__PURE__*/_jsx(StyledInput, {
76
90
  value: value,
91
+ onKeyDown: handleOnKeyDown,
77
92
  onChange: handleOnChange,
78
93
  onBlur: handleOnBlur,
79
94
  autoFocus: true
80
95
  }),
81
96
  cell: cell,
97
+ setValue: setValue,
82
98
  isRowSelected: isRowSelected
83
99
  });
84
100
  };
package/esm/exported-related/EditableCell.js CHANGED
@@ -11,7 +11,8 @@ const EditableCell = props => {
11
11
  StandardRender,
12
12
  EditableRenderer,
13
13
  cell,
14
- isRowSelected
14
+ isRowSelected,
15
+ setValue
15
16
  } = props;
16
17
  const {
17
18
  virtualListHelpers
@@ -33,20 +34,25 @@ const EditableCell = props => {
33
34
  }
34
35
  }, [isEditing]);
35
36
  const handleOnKeyDown = useCallback(e => {
36
- if (isEditing) e.stopPropagation();
37
+ if (isEditing) {
38
+ e.stopPropagation();
37
39
 
38
- if (['Enter', 'Space'].includes(e.code)) {
40
+ if (['Enter', 'Escape'].includes(e.code)) {
41
+ setIsEditing(false);
42
+ }
43
+ } else if (['Enter', 'Space'].includes(e.code)) {
39
44
  handleCellClick(e);
40
45
  }
41
- }, [isEditing, handleCellClick]);
46
+ }, [isEditing, handleCellClick, setIsEditing]);
42
47
  const handleOnBlur = useCallback(event => {
43
48
  if (isEditing && !event.currentTarget.contains(event.relatedTarget)) {
44
49
  // Not triggered when swapping focus between children
45
50
  setIsEditing(false);
46
51
  }
47
52
  }, [isEditing]);
53
+ const cols = !isEditing ? ['auto', 'min-content'] : ['auto'];
48
54
  return /*#__PURE__*/jsxs(StyledEditableContainer, {
49
- cols: !isEditing ? ['auto', 'min-content'] : ['auto'],
55
+ cols: cols,
50
56
  tabIndex: isRowSelected && !isEditing ? 0 : -1,
51
57
  ref: cell.ref,
52
58
  onClick: handleCellClick,
package/esm/styled.js CHANGED
@@ -149,22 +149,27 @@ const StyledPencilIcon = /*#__PURE__*/styled(EditPencil).withConfig({
149
149
  })([""]);
150
150
  const StyledEditableContainer = /*#__PURE__*/styled(Grid).withConfig({
151
151
  componentId: "sc-38sgfo-14"
152
- })(["width:100%;height:100%;align-items:center;& ", "{display:", ";}&:hover{", "{display:block;}}&:focus{", " ", "{display:block;}}outline:none;"], StyledPencilIcon, props => props.shouldDisplayEditIcon ? 'block' : 'none', StyledPencilIcon, styledFocusCss, StyledPencilIcon); // ROW ************************************************************************/
152
+ })(["width:100%;height:100%;align-items:center;& ", "{display:", ";}&:hover{", "{display:block;}}&:focus{", " ", "{display:block;}}outline:none;"], StyledPencilIcon, _ref8 => {
153
+ let {
154
+ shouldDisplayEditIcon
155
+ } = _ref8;
156
+ return shouldDisplayEditIcon ? 'block' : 'none';
157
+ }, StyledPencilIcon, styledFocusCss, StyledPencilIcon); // ROW ************************************************************************/
153
158
 
154
159
  const StyledFullsizeGrid = /*#__PURE__*/styled(Grid).withConfig({
155
160
  componentId: "sc-38sgfo-15"
156
161
  })(["position:relative;z-index:", ";min-height:", ";height:", ";"], ZIndexDataTable.ROW, props => props.minHeight || '36px', props => props.height || 'auto');
157
162
  const GroupHeaderContainer = /*#__PURE__*/styled(Grid).withConfig({
158
163
  componentId: "sc-38sgfo-16"
159
- })(["position:relative;background-color:", ";align-items:center;padding:0 ", ";border-top:1px solid ", ";grid-template-columns:min-content 1fr;"], _ref8 => {
164
+ })(["position:relative;background-color:", ";align-items:center;padding:0 ", ";border-top:1px solid ", ";grid-template-columns:min-content 1fr;"], _ref9 => {
160
165
  let {
161
166
  theme
162
- } = _ref8;
167
+ } = _ref9;
163
168
  return theme.colors.brand[200];
164
- }, props => props.padding, _ref9 => {
169
+ }, props => props.padding, _ref10 => {
165
170
  let {
166
171
  theme
167
- } = _ref9;
172
+ } = _ref10;
168
173
  return theme.colors.brand[300];
169
174
  });
170
175
  const GroupHeaderTitle = /*#__PURE__*/styled.span.withConfig({
@@ -176,27 +181,27 @@ const StyledCellContainer = /*#__PURE__*/styled(Grid).withConfig({
176
181
  cols: props.cols,
177
182
  colsLayoutStyle: props.colLayoutStyle,
178
183
  isExpandable: props.isExpandable
179
- }), _ref10 => {
184
+ }), _ref11 => {
180
185
  let {
181
186
  backgroundColor,
182
187
  isDragging,
183
188
  theme
184
- } = _ref10;
189
+ } = _ref11;
185
190
  return isDragging ? theme.colors.neutral[100] : backgroundColor || 'white';
186
- }, props => props.isDragOverlay ? '' : styledFocusCss(props), _ref11 => {
191
+ }, props => props.isDragOverlay ? '' : styledFocusCss(props), _ref12 => {
187
192
  let {
188
193
  isDropIndicatorPositionInside,
189
194
  theme
190
- } = _ref11;
195
+ } = _ref12;
191
196
  if (!isDropIndicatorPositionInside) return '';
192
197
  return styledFocusCss({
193
198
  theme
194
199
  });
195
- }, _ref12 => {
200
+ }, _ref13 => {
196
201
  let {
197
202
  shouldDisplayHover,
198
203
  theme
199
- } = _ref12;
204
+ } = _ref13;
200
205
  return shouldDisplayHover ? ":hover {\n background-color: ".concat(theme.colors.brand[200], ";\n }") : '';
201
206
  }, props => props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent', props => props.isDragging ? 0.8 : 1, props => !props.selected ? '' : "\n background-color: ".concat(props.theme.colors.brand[200], ";\n border: 1px solid ").concat(props.theme.colors.brand[500], ";\n "), props => props.disabled ? props.theme.colors.neutral['500'] : '#333333');
202
207
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-data-table",
3
- "version": "2.0.0-rc.11",
3
+ "version": "2.0.0-rc.12",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Data Table",
6
6
  "module": "./esm/index.js",
@@ -570,22 +570,22 @@
570
570
  "dependencies": {
571
571
  "@dnd-kit/core": "~4.0.1",
572
572
  "@dnd-kit/sortable": "~5.0.0",
573
- "@elliemae/ds-button": "2.0.0-rc.11",
574
- "@elliemae/ds-circular-progress-indicator": "2.0.0-rc.11",
575
- "@elliemae/ds-controlled-form": "2.0.0-rc.11",
576
- "@elliemae/ds-dropdownmenu": "2.0.0-rc.11",
577
- "@elliemae/ds-form": "2.0.0-rc.11",
578
- "@elliemae/ds-form-layout-blocks": "2.0.0-rc.11",
579
- "@elliemae/ds-grid": "2.0.0-rc.11",
580
- "@elliemae/ds-icons": "2.0.0-rc.11",
581
- "@elliemae/ds-indeterminate-progress-indicator": "2.0.0-rc.11",
582
- "@elliemae/ds-pagination": "2.0.0-rc.11",
583
- "@elliemae/ds-pills": "2.0.0-rc.11",
584
- "@elliemae/ds-popperjs": "2.0.0-rc.11",
585
- "@elliemae/ds-system": "2.0.0-rc.11",
586
- "@elliemae/ds-toolbar": "2.0.0-rc.11",
587
- "@elliemae/ds-truncated-tooltip-text": "2.0.0-rc.11",
588
- "@elliemae/ds-utilities": "2.0.0-rc.11",
573
+ "@elliemae/ds-button": "2.0.0-rc.12",
574
+ "@elliemae/ds-circular-progress-indicator": "2.0.0-rc.12",
575
+ "@elliemae/ds-controlled-form": "2.0.0-rc.12",
576
+ "@elliemae/ds-dropdownmenu": "2.0.0-rc.12",
577
+ "@elliemae/ds-form": "2.0.0-rc.12",
578
+ "@elliemae/ds-form-layout-blocks": "2.0.0-rc.12",
579
+ "@elliemae/ds-grid": "2.0.0-rc.12",
580
+ "@elliemae/ds-icons": "2.0.0-rc.12",
581
+ "@elliemae/ds-indeterminate-progress-indicator": "2.0.0-rc.12",
582
+ "@elliemae/ds-pagination": "2.0.0-rc.12",
583
+ "@elliemae/ds-pills": "2.0.0-rc.12",
584
+ "@elliemae/ds-popperjs": "2.0.0-rc.12",
585
+ "@elliemae/ds-system": "2.0.0-rc.12",
586
+ "@elliemae/ds-toolbar": "2.0.0-rc.12",
587
+ "@elliemae/ds-truncated-tooltip-text": "2.0.0-rc.12",
588
+ "@elliemae/ds-utilities": "2.0.0-rc.12",
589
589
  "@reduxjs/toolkit": "~1.6.2",
590
590
  "csstype": "~3.0.9",
591
591
  "moment": "~2.29.1",
package/types/styled.d.ts CHANGED
@@ -27,7 +27,9 @@ export declare const StyledCell: import("styled-components").StyledComponent<"di
27
27
  }, never>;
28
28
  export declare const StyledCellContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
29
29
  export declare const StyledPencilIcon: import("styled-components").StyledComponent<(rest: any) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
30
- export declare const StyledEditableContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
30
+ export declare const StyledEditableContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {
31
+ shouldDisplayEditIcon: string;
32
+ }, never>;
31
33
  export declare const StyledFullsizeGrid: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
32
34
  export declare const GroupHeaderContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {
33
35
  padding: string;