@elliemae/ds-data-table 2.4.3-rc.8 → 2.4.4-rc.0

package/esm/parts/Row.js

@@ -1,6 +1,7 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext } from 'react';
 import { connect } from 'react-redux';
+import { styled } from '@elliemae/ds-system';
 import DataTableContext from '../DataTableContext.js';
 import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
@@ -21,6 +22,15 @@ const setItemRefs = (measureRef, draggableRef, ref) => {
   setMultipleRefs(...refsToSet)(ref);
 };
 
+const StyledRow = styled('div')`
+  cursor: ${_ref => {
+  let {
+    disabled
+  } = _ref;
+  return disabled ? 'not-allowed' : 'normal';
+}};
+`;
+
 const RowComp = props => {
   const {
     row,
@@ -31,11 +41,17 @@ const RowComp = props => {
     selectedRowId
   } = props;
   const ctx = useContext(DataTableContext);
+  const {
+    tableProps: {
+      disabledRows
+    }
+  } = ctx;
   const {
     draggableProps
   } = useContext(SortableItemContext);
   const draggableRef = draggableProps && draggableProps.setNodeRef;
-  return /*#__PURE__*/jsx("div", {
+  return /*#__PURE__*/jsx(StyledRow, {
+    disabled: disabledRows[row.uid],
     style: !isDragOverlay ? itemWrapperStyle : {},
     ref: ref => setItemRefs(measureRef, draggableRef, ref),
     children: /*#__PURE__*/_jsx(RowVariantMapItem, {

package/esm/parts/RowVariants/index.js

@@ -12,9 +12,9 @@ import '@elliemae/ds-popperjs';
 import 'styled-components';
 import '../../redux/reducers/index.js';
 import '../../configs/constants.js';
-import { jsx } from 'react/jsx-runtime';
 import '../../styled.js';
 import '../../DataTableContext.js';
+import { jsx } from 'react/jsx-runtime';
 import '@elliemae/ds-icons';
 import '@elliemae/ds-utilities';
 import 'core-js/modules/esnext.async-iterator.reduce.js';

package/esm/styled.js

@@ -148,13 +148,7 @@ const StyledHeaderRightIconsWrapper = /*#__PURE__*/styled.div.withConfig({
 })(["height:100%;display:flex;align-items:center;max-height:24px;"]);
 const StyledResizer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-38sgfo-10"
-})(["display:inline-block;background:", ";width:4px;height:100%;position:absolute;right:0;top:0;z-index:1;touch-action:none;cursor:col-resize;"], _ref7 => {
-  let {
-    isResizing,
-    theme
-  } = _ref7;
-  return isResizing ? theme.colors.brand[600] : theme.colors.brand[400];
-}); // CELL ***********************************************************************/
+})(["display:inline-block;background:transparent;width:4px;height:100%;position:absolute;right:0;top:0;z-index:1;touch-action:none;cursor:col-resize;"]); // CELL ***********************************************************************/
 
 const StyledActionCell = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-38sgfo-11"
@@ -170,10 +164,10 @@ const StyledPencilIcon = /*#__PURE__*/styled(EditPencil).withConfig({
 })([""]);
 const StyledEditableContainer = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-38sgfo-15"
-})(["width:100%;height:100%;align-items:center;& ", "{display:", ";}&:hover{", "{display:block;}}&:focus{", " ", "{display:block;}}outline:none;"], StyledPencilIcon, _ref8 => {
+})(["width:100%;height:100%;align-items:center;& ", "{display:", ";}&:hover{", "{display:block;}}&:focus{", " ", "{display:block;}}outline:none;"], StyledPencilIcon, _ref7 => {
   let {
     shouldDisplayEditIcon
-  } = _ref8;
+  } = _ref7;
   return shouldDisplayEditIcon ? 'block' : 'none';
 }, StyledPencilIcon, styledFocusCss, StyledPencilIcon); // ROW ************************************************************************/
 
@@ -182,15 +176,15 @@ const StyledFullsizeGrid = /*#__PURE__*/styled(Grid).withConfig({
 })(["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-17"
-})(["position:relative;background-color:", ";align-items:center;padding:0 ", ";border-top:1px solid ", ";grid-template-columns:min-content 1fr;"], _ref9 => {
+})(["position:relative;background-color:", ";align-items:center;padding:0 ", ";border-top:1px solid ", ";grid-template-columns:min-content 1fr;"], _ref8 => {
   let {
     theme
-  } = _ref9;
+  } = _ref8;
   return theme.colors.brand[200];
-}, props => props.padding, _ref10 => {
+}, props => props.padding, _ref9 => {
   let {
     theme
-  } = _ref10;
+  } = _ref9;
   return theme.colors.brand[300];
 });
 const GroupHeaderTitle = /*#__PURE__*/styled.span.withConfig({
@@ -202,28 +196,29 @@ const StyledCellContainer = /*#__PURE__*/styled(Grid).withConfig({
   cols: props.cols,
   colsLayoutStyle: props.colLayoutStyle,
   isExpandable: props.isExpandable
-}), _ref11 => {
+}), _ref10 => {
   let {
     backgroundColor,
     isDragging,
     theme
-  } = _ref11;
+  } = _ref10;
   return isDragging ? theme.colors.neutral[100] : backgroundColor || 'white';
-}, props => props.isDragOverlay ? '' : styledFocusCss(props), _ref12 => {
+}, props => props.isDragOverlay ? '' : styledFocusCss(props), _ref11 => {
   let {
     isDropIndicatorPositionInside,
     theme
-  } = _ref12;
+  } = _ref11;
   if (!isDropIndicatorPositionInside) return '';
   return styledFocusCss({
     theme
   });
-}, _ref13 => {
+}, _ref12 => {
   let {
     shouldDisplayHover,
-    theme
-  } = _ref13;
-  return shouldDisplayHover ? `:hover {
+    theme,
+    disabled
+  } = _ref12;
+  return shouldDisplayHover && !disabled ? `:hover {
             background-color: ${theme.colors.brand[200]};
           }` : '';
 }, props => props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent', props => props.isDragging ? 0.8 : 1, props => !props.selected ? '' : `

package/package.json

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

package/types/types/props.d.ts

@@ -14,6 +14,7 @@ export declare type TypescriptColumn = {
     accessor?: string;
     filter?: string;
     filterOptions?: FilterOptionT[] | (() => FilterOptionT[]);
+    filterMinWidth?: number | string;
     Filter?: React.ComponentType<FilterProps>;
     Cell?: React.ComponentType<any>;
     editable?: string | TypescriptGenericFunc;