@elliemae/ds-data-table 2.0.0-rc.10 → 2.0.0-rc.14

package/cjs/addons/Editables/TextEditableCell/TextEditableCell.js

@@ -79,15 +79,31 @@ const TextEditableCell = props => {
       rowIndex
     });
   }, [value, onCellValueChange, cell.column.id, cell.row.index]);
+  const handleOnKeyDown = React.useCallback(e => {
+    if (e.code === 'Enter') {
+      cell.ref.current.focus(); // will exec on blur callback from input and save new value
+    }
+
+    if (e.code === 'Escape') {
+      setValue(cell.value);
+      const auxRef = cell.ref.current; // this prevent the on blur
+
+      setTimeout(() => {
+        auxRef.focus();
+      });
+    }
+  }, [cell]);
   return /*#__PURE__*/_jsx__default["default"](EditableCell.EditableCell, {
     StandardRender: DefaultCellRender,
     EditableRenderer: /*#__PURE__*/_jsx__default["default"](StyledInput, {
       value: value,
+      onKeyDown: handleOnKeyDown,
       onChange: handleOnChange,
       onBlur: handleOnBlur,
       autoFocus: true
     }),
     cell: cell,
+    setValue: setValue,
     isRowSelected: isRowSelected
   });
 };

package/cjs/addons/Filters/Components/CurrencyRangeFilter/index.js

@@ -117,7 +117,10 @@ const CurrencyRangeFilter = props => {
       "data-testid": constants.DATA_TESTID.DATA_TABLE_CURRENCY_RANGE_CONTROLLER,
       gutter: "xxxs",
       padding: "xxs",
-      cols: ['auto', 'auto']
+      cols: ['auto', 'auto'],
+      style: {
+        background: 'white'
+      }
     }, void 0, /*#__PURE__*/_jsx__default["default"](dsFormLayoutBlocks.DSFormLayoutBlockItem, {
       label: "Min",
       inputID: "".concat(idPreffix, "-min-").concat(column.id)

package/cjs/addons/Filters/Components/DateRangeFilter/index.js

@@ -89,7 +89,10 @@ const DateRangeFilter = props => {
       width: "260px",
       "data-testid": constants.DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER
     }, void 0, /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
-      p: "xxs"
+      p: "xxs",
+      style: {
+        background: 'white'
+      }
     }, void 0, /*#__PURE__*/_jsx__default["default"](dsControlledForm.DSControlledDateRangePicker, {
       fromDate: startDate,
       onFromDateChange: setStartDate,

package/cjs/addons/Filters/Components/DateSwitcherFilter/index.js

@@ -92,7 +92,10 @@ const DateSwitcherFilter = props => {
       "data-testid": constants.DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER
     }, void 0, /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
       p: "xxs",
-      gutter: "xxs"
+      gutter: "xxs",
+      style: {
+        background: 'white'
+      }
     }, void 0, /*#__PURE__*/_jsx__default["default"](dsControlledForm.DSControlledCheckbox, {
       checked: isDateRange,
       name: "Date range",

package/cjs/addons/Filters/Components/NumberRangeFilter/index.js

@@ -120,7 +120,10 @@ const NumberRangeFilter = props => {
       "data-testid": constants.DATA_TESTID.DATA_TABLE_NUMBER_RANGE_CONTROLLER,
       gutter: "xxxs",
       padding: "xxs",
-      cols: ['auto', 'auto']
+      cols: ['auto', 'auto'],
+      style: {
+        background: 'white'
+      }
     }, void 0, /*#__PURE__*/_jsx__default["default"](dsFormLayoutBlocks.DSFormLayoutBlockItem, {
       label: "Low",
       inputID: "".concat(idPreffix, "-low-").concat(column.id)

package/cjs/addons/Filters/Components/SingleDateFilter/index.js

@@ -79,7 +79,10 @@ const SingleDateFilter = props => {
       "data-testid": constants.DATA_TESTID.DATA_TABLE_SINGLE_DATE_CONTROLLER,
       width: "260px"
     }, void 0, /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
-      p: "xxs"
+      p: "xxs",
+      style: {
+        background: 'white'
+      }
     }, void 0, /*#__PURE__*/_jsx__default["default"](dsControlledForm.DSControlledDateTimePicker, {
       date: date,
       onDateChange: setDate,

package/cjs/exported-related/EditableCell.js

@@ -19,7 +19,8 @@ const EditableCell = props => {
     StandardRender,
     EditableRenderer,
     cell,
-    isRowSelected
+    isRowSelected,
+    setValue
   } = props;
   const {
     virtualListHelpers
@@ -41,20 +42,25 @@ const EditableCell = props => {
     }
   }, [isEditing]);
   const handleOnKeyDown = React.useCallback(e => {
-    if (isEditing) e.stopPropagation();
+    if (isEditing) {
+      e.stopPropagation();
 
-    if (['Enter', 'Space'].includes(e.code)) {
+      if (['Enter', 'Escape'].includes(e.code)) {
+        setIsEditing(false);
+      }
+    } else if (['Enter', 'Space'].includes(e.code)) {
       handleCellClick(e);
     }
-  }, [isEditing, handleCellClick]);
+  }, [isEditing, handleCellClick, setIsEditing]);
   const handleOnBlur = React.useCallback(event => {
     if (isEditing && !event.currentTarget.contains(event.relatedTarget)) {
       // Not triggered when swapping focus between children
       setIsEditing(false);
     }
   }, [isEditing]);
+  const cols = !isEditing ? ['auto', 'min-content'] : ['auto'];
   return /*#__PURE__*/jsxRuntime.jsxs(styled.StyledEditableContainer, {
-    cols: !isEditing ? ['auto', 'min-content'] : ['auto'],
+    cols: cols,
     tabIndex: isRowSelected && !isEditing ? 0 : -1,
     ref: cell.ref,
     onClick: handleCellClick,

package/cjs/styled.js

@@ -158,22 +158,27 @@ const StyledPencilIcon = /*#__PURE__*/styled__default["default"](dsIcons.EditPen
 })([""]);
 const StyledEditableContainer = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-38sgfo-14"
-})(["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 ************************************************************************/
+})(["width:100%;height:100%;align-items:center;& ", "{display:", ";}&:hover{", "{display:block;}}&:focus{", " ", "{display:block;}}outline:none;"], StyledPencilIcon, _ref8 => {
+  let {
+    shouldDisplayEditIcon
+  } = _ref8;
+  return shouldDisplayEditIcon ? 'block' : 'none';
+}, StyledPencilIcon, styledFocusCss, StyledPencilIcon); // ROW ************************************************************************/
 
 const StyledFullsizeGrid = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-38sgfo-15"
 })(["position:relative;z-index:", ";min-height:", ";height:", ";"], zIndexInternalConfig.ZIndexDataTable.ROW, props => props.minHeight || '36px', props => props.height || 'auto');
 const GroupHeaderContainer = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-38sgfo-16"
-})(["position:relative;background-color:", ";align-items:center;padding:0 ", ";border-top:1px solid ", ";grid-template-columns:min-content 1fr;"], _ref8 => {
+})(["position:relative;background-color:", ";align-items:center;padding:0 ", ";border-top:1px solid ", ";grid-template-columns:min-content 1fr;"], _ref9 => {
   let {
     theme
-  } = _ref8;
+  } = _ref9;
   return theme.colors.brand[200];
-}, props => props.padding, _ref9 => {
+}, props => props.padding, _ref10 => {
   let {
     theme
-  } = _ref9;
+  } = _ref10;
   return theme.colors.brand[300];
 });
 const GroupHeaderTitle = /*#__PURE__*/styled__default["default"].span.withConfig({
@@ -185,27 +190,27 @@ const StyledCellContainer = /*#__PURE__*/styled__default["default"](Grid__defaul
   cols: props.cols,
   colsLayoutStyle: props.colLayoutStyle,
   isExpandable: props.isExpandable
-}), _ref10 => {
+}), _ref11 => {
   let {
     backgroundColor,
     isDragging,
     theme
-  } = _ref10;
+  } = _ref11;
   return isDragging ? theme.colors.neutral[100] : backgroundColor || 'white';
-}, props => props.isDragOverlay ? '' : styledFocusCss(props), _ref11 => {
+}, props => props.isDragOverlay ? '' : styledFocusCss(props), _ref12 => {
   let {
     isDropIndicatorPositionInside,
     theme
-  } = _ref11;
+  } = _ref12;
   if (!isDropIndicatorPositionInside) return '';
   return styledFocusCss({
     theme
   });
-}, _ref12 => {
+}, _ref13 => {
   let {
     shouldDisplayHover,
     theme
-  } = _ref12;
+  } = _ref13;
   return shouldDisplayHover ? ":hover {\n            background-color: ".concat(theme.colors.brand[200], ";\n          }") : '';
 }, 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');
 

package/esm/addons/Editables/TextEditableCell/TextEditableCell.js

@@ -70,15 +70,31 @@ const TextEditableCell = props => {
       rowIndex
     });
   }, [value, onCellValueChange, cell.column.id, cell.row.index]);
+  const handleOnKeyDown = useCallback(e => {
+    if (e.code === 'Enter') {
+      cell.ref.current.focus(); // will exec on blur callback from input and save new value
+    }
+
+    if (e.code === 'Escape') {
+      setValue(cell.value);
+      const auxRef = cell.ref.current; // this prevent the on blur
+
+      setTimeout(() => {
+        auxRef.focus();
+      });
+    }
+  }, [cell]);
   return /*#__PURE__*/_jsx(EditableCell, {
     StandardRender: DefaultCellRender,
     EditableRenderer: /*#__PURE__*/_jsx(StyledInput, {
       value: value,
+      onKeyDown: handleOnKeyDown,
       onChange: handleOnChange,
       onBlur: handleOnBlur,
       autoFocus: true
     }),
     cell: cell,
+    setValue: setValue,
     isRowSelected: isRowSelected
   });
 };

package/esm/addons/Filters/Components/CurrencyRangeFilter/index.js

@@ -107,7 +107,10 @@ const CurrencyRangeFilter = props => {
       "data-testid": DATA_TESTID.DATA_TABLE_CURRENCY_RANGE_CONTROLLER,
       gutter: "xxxs",
       padding: "xxs",
-      cols: ['auto', 'auto']
+      cols: ['auto', 'auto'],
+      style: {
+        background: 'white'
+      }
     }, void 0, /*#__PURE__*/_jsx(DSFormLayoutBlockItem, {
       label: "Min",
       inputID: "".concat(idPreffix, "-min-").concat(column.id)

package/esm/addons/Filters/Components/DateRangeFilter/index.js

@@ -80,7 +80,10 @@ const DateRangeFilter = props => {
       width: "260px",
       "data-testid": DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER
     }, void 0, /*#__PURE__*/_jsx(Grid, {
-      p: "xxs"
+      p: "xxs",
+      style: {
+        background: 'white'
+      }
     }, void 0, /*#__PURE__*/_jsx(DSControlledDateRangePicker, {
       fromDate: startDate,
       onFromDateChange: setStartDate,

package/esm/addons/Filters/Components/DateSwitcherFilter/index.js

@@ -83,7 +83,10 @@ const DateSwitcherFilter = props => {
       "data-testid": DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER
     }, void 0, /*#__PURE__*/_jsx(Grid, {
       p: "xxs",
-      gutter: "xxs"
+      gutter: "xxs",
+      style: {
+        background: 'white'
+      }
     }, void 0, /*#__PURE__*/_jsx(DSControlledCheckbox, {
       checked: isDateRange,
       name: "Date range",

package/esm/addons/Filters/Components/NumberRangeFilter/index.js

@@ -110,7 +110,10 @@ const NumberRangeFilter = props => {
       "data-testid": DATA_TESTID.DATA_TABLE_NUMBER_RANGE_CONTROLLER,
       gutter: "xxxs",
       padding: "xxs",
-      cols: ['auto', 'auto']
+      cols: ['auto', 'auto'],
+      style: {
+        background: 'white'
+      }
     }, void 0, /*#__PURE__*/_jsx(DSFormLayoutBlockItem, {
       label: "Low",
       inputID: "".concat(idPreffix, "-low-").concat(column.id)

package/esm/addons/Filters/Components/SingleDateFilter/index.js

@@ -70,7 +70,10 @@ const SingleDateFilter = props => {
       "data-testid": DATA_TESTID.DATA_TABLE_SINGLE_DATE_CONTROLLER,
       width: "260px"
     }, void 0, /*#__PURE__*/_jsx(Grid, {
-      p: "xxs"
+      p: "xxs",
+      style: {
+        background: 'white'
+      }
     }, void 0, /*#__PURE__*/_jsx(DSControlledDateTimePicker, {
       date: date,
       onDateChange: setDate,

package/esm/exported-related/EditableCell.js

@@ -11,7 +11,8 @@ const EditableCell = props => {
     StandardRender,
     EditableRenderer,
     cell,
-    isRowSelected
+    isRowSelected,
+    setValue
   } = props;
   const {
     virtualListHelpers
@@ -33,20 +34,25 @@ const EditableCell = props => {
     }
   }, [isEditing]);
   const handleOnKeyDown = useCallback(e => {
-    if (isEditing) e.stopPropagation();
+    if (isEditing) {
+      e.stopPropagation();
 
-    if (['Enter', 'Space'].includes(e.code)) {
+      if (['Enter', 'Escape'].includes(e.code)) {
+        setIsEditing(false);
+      }
+    } else if (['Enter', 'Space'].includes(e.code)) {
       handleCellClick(e);
     }
-  }, [isEditing, handleCellClick]);
+  }, [isEditing, handleCellClick, setIsEditing]);
   const handleOnBlur = useCallback(event => {
     if (isEditing && !event.currentTarget.contains(event.relatedTarget)) {
       // Not triggered when swapping focus between children
       setIsEditing(false);
     }
   }, [isEditing]);
+  const cols = !isEditing ? ['auto', 'min-content'] : ['auto'];
   return /*#__PURE__*/jsxs(StyledEditableContainer, {
-    cols: !isEditing ? ['auto', 'min-content'] : ['auto'],
+    cols: cols,
     tabIndex: isRowSelected && !isEditing ? 0 : -1,
     ref: cell.ref,
     onClick: handleCellClick,

package/esm/styled.js

@@ -149,22 +149,27 @@ const StyledPencilIcon = /*#__PURE__*/styled(EditPencil).withConfig({
 })([""]);
 const StyledEditableContainer = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-38sgfo-14"
-})(["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 ************************************************************************/
+})(["width:100%;height:100%;align-items:center;& ", "{display:", ";}&:hover{", "{display:block;}}&:focus{", " ", "{display:block;}}outline:none;"], StyledPencilIcon, _ref8 => {
+  let {
+    shouldDisplayEditIcon
+  } = _ref8;
+  return shouldDisplayEditIcon ? 'block' : 'none';
+}, StyledPencilIcon, styledFocusCss, StyledPencilIcon); // ROW ************************************************************************/
 
 const StyledFullsizeGrid = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-38sgfo-15"
 })(["position:relative;z-index:", ";min-height:", ";height:", ";"], ZIndexDataTable.ROW, props => props.minHeight || '36px', props => props.height || 'auto');
 const GroupHeaderContainer = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-38sgfo-16"
-})(["position:relative;background-color:", ";align-items:center;padding:0 ", ";border-top:1px solid ", ";grid-template-columns:min-content 1fr;"], _ref8 => {
+})(["position:relative;background-color:", ";align-items:center;padding:0 ", ";border-top:1px solid ", ";grid-template-columns:min-content 1fr;"], _ref9 => {
   let {
     theme
-  } = _ref8;
+  } = _ref9;
   return theme.colors.brand[200];
-}, props => props.padding, _ref9 => {
+}, props => props.padding, _ref10 => {
   let {
     theme
-  } = _ref9;
+  } = _ref10;
   return theme.colors.brand[300];
 });
 const GroupHeaderTitle = /*#__PURE__*/styled.span.withConfig({
@@ -176,27 +181,27 @@ const StyledCellContainer = /*#__PURE__*/styled(Grid).withConfig({
   cols: props.cols,
   colsLayoutStyle: props.colLayoutStyle,
   isExpandable: props.isExpandable
-}), _ref10 => {
+}), _ref11 => {
   let {
     backgroundColor,
     isDragging,
     theme
-  } = _ref10;
+  } = _ref11;
   return isDragging ? theme.colors.neutral[100] : backgroundColor || 'white';
-}, props => props.isDragOverlay ? '' : styledFocusCss(props), _ref11 => {
+}, props => props.isDragOverlay ? '' : styledFocusCss(props), _ref12 => {
   let {
     isDropIndicatorPositionInside,
     theme
-  } = _ref11;
+  } = _ref12;
   if (!isDropIndicatorPositionInside) return '';
   return styledFocusCss({
     theme
   });
-}, _ref12 => {
+}, _ref13 => {
   let {
     shouldDisplayHover,
     theme
-  } = _ref12;
+  } = _ref13;
   return shouldDisplayHover ? ":hover {\n            background-color: ".concat(theme.colors.brand[200], ";\n          }") : '';
 }, 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');
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-data-table",
-  "version": "2.0.0-rc.10",
+  "version": "2.0.0-rc.14",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Data Table",
   "module": "./esm/index.js",
@@ -570,22 +570,23 @@
   "dependencies": {
     "@dnd-kit/core": "~4.0.1",
     "@dnd-kit/sortable": "~5.0.0",
-    "@elliemae/ds-button": "2.0.0-rc.10",
-    "@elliemae/ds-circular-progress-indicator": "2.0.0-rc.10",
-    "@elliemae/ds-controlled-form": "2.0.0-rc.10",
-    "@elliemae/ds-dropdownmenu": "2.0.0-rc.10",
-    "@elliemae/ds-form": "2.0.0-rc.10",
-    "@elliemae/ds-form-layout-blocks": "2.0.0-rc.10",
-    "@elliemae/ds-grid": "2.0.0-rc.10",
-    "@elliemae/ds-icons": "2.0.0-rc.10",
-    "@elliemae/ds-indeterminate-progress-indicator": "2.0.0-rc.10",
-    "@elliemae/ds-pagination": "2.0.0-rc.10",
-    "@elliemae/ds-pills": "2.0.0-rc.10",
-    "@elliemae/ds-popperjs": "2.0.0-rc.10",
-    "@elliemae/ds-system": "2.0.0-rc.10",
-    "@elliemae/ds-toolbar": "2.0.0-rc.10",
-    "@elliemae/ds-truncated-tooltip-text": "2.0.0-rc.10",
-    "@elliemae/ds-utilities": "2.0.0-rc.10",
+    "@elliemae/ds-button": "2.0.0-rc.14",
+    "@elliemae/ds-circular-progress-indicator": "2.0.0-rc.14",
+    "@elliemae/ds-controlled-form": "2.0.0-rc.14",
+    "@elliemae/ds-drag-and-drop": "2.0.0-rc.14",
+    "@elliemae/ds-dropdownmenu": "2.0.0-rc.14",
+    "@elliemae/ds-form": "2.0.0-rc.14",
+    "@elliemae/ds-form-layout-blocks": "2.0.0-rc.14",
+    "@elliemae/ds-grid": "2.0.0-rc.14",
+    "@elliemae/ds-icons": "2.0.0-rc.14",
+    "@elliemae/ds-indeterminate-progress-indicator": "2.0.0-rc.14",
+    "@elliemae/ds-pagination": "2.0.0-rc.14",
+    "@elliemae/ds-pills": "2.0.0-rc.14",
+    "@elliemae/ds-popperjs": "2.0.0-rc.14",
+    "@elliemae/ds-system": "2.0.0-rc.14",
+    "@elliemae/ds-toolbar": "2.0.0-rc.14",
+    "@elliemae/ds-truncated-tooltip-text": "2.0.0-rc.14",
+    "@elliemae/ds-utilities": "2.0.0-rc.14",
     "@reduxjs/toolkit": "~1.6.2",
     "csstype": "~3.0.9",
     "moment": "~2.29.1",

package/types/styled.d.ts

@@ -27,7 +27,9 @@ export declare const StyledCell: import("styled-components").StyledComponent<"di
 }, never>;
 export declare const StyledCellContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledPencilIcon: import("styled-components").StyledComponent<(rest: any) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
-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>;
+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, {
+    shouldDisplayEditIcon: string;
+}, never>;
 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>;
 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, {
     padding: string;