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

package/cjs/addons/Columns/ColumnExpand/ColumnExpand.js

@@ -41,32 +41,44 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled$1);
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const disabledCaret = /*#__PURE__*/styled$1.css(["cursor:not-allowed;svg{fill:", ";}"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral['400'];
+});
 const StyledSpan = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-1xp824d-0"
-})(["cursor:pointer;box-sizing:border-box;outline:none;display:flex;justify-content:center;align-items:center;"]);
+})(["cursor:pointer;box-sizing:border-box;outline:none;display:flex;justify-content:center;align-items:center;", ""], _ref2 => {
+  let {
+    disabled
+  } = _ref2;
+  return disabled && disabledCaret;
+});
 const expandRowColumn = {
   // Build our expander column
   id: 'expander',
   // Make sure it has an ID
   accessor: 'expandRowColumn',
-  Header: _ref => {
+  Header: _ref3 => {
     let {
       ctx
-    } = _ref;
+    } = _ref3;
     const {
       tableProps: {
         expandedRows,
-        onRowExpand
+        onRowExpand,
+        disabledRows
       },
       allDataFlattened
     } = ctx;
     const allExpandable = React.useMemo(() => {
       const expandable = {};
       allDataFlattened.forEach(row => {
-        if (row.original.subRows || row.original.tableRowDetails || row.original.dimsumHeaderValue) expandable[row.uid] = true;
+        if (!disabledRows[row.uid] && (row.original.subRows || row.original.tableRowDetails || row.original.dimsumHeaderValue)) expandable[row.uid] = true;
       });
       return expandable;
-    }, [allDataFlattened]);
+    }, [allDataFlattened, disabledRows]);
     const isAllRowsExpanded = React.useMemo(() => Object.keys(allExpandable).length === Object.keys(expandedRows).length, [allExpandable, expandedRows]);
     const onExpandedAllHandler = React.useCallback(() => {
       if (isAllRowsExpanded) onRowExpand({}, 'All');else onRowExpand(_objectSpread({}, allExpandable), 'All');
@@ -114,19 +126,20 @@ const expandRowColumn = {
       }
     }, void 0, GlobalExpandIcon));
   },
-  Cell: _ref2 => {
+  Cell: _ref4 => {
     let {
       cell,
       row,
       isRowSelected,
       ctx,
       draggableProps
-    } = _ref2;
+    } = _ref4;
     const {
       tableProps: {
         dragAndDropRows,
         expandedRows,
-        onRowExpand
+        onRowExpand,
+        disabledRows
       }
     } = ctx;
     const uniqueId = row.uid;
@@ -160,7 +173,7 @@ const expandRowColumn = {
       role: 'button',
       key: `${row.uid}-expand-button`,
       title: 'Toggle Row Expanded',
-      onClick: onRowExpandHandler,
+      onClick: !disabledRows[row.uid] ? onRowExpandHandler : undefined,
       onKeyDown: e => {
         if (['Enter', 'Space'].includes(e.code)) {
           e.preventDefault();
@@ -168,11 +181,12 @@ const expandRowColumn = {
         }
       },
       ref: cell.ref,
-      tabIndex: isRowSelected ? 0 : -1,
+      tabIndex: isRowSelected || disabledRows[row.uid] ? 0 : -1,
       'data-testid': 'data-table-row-expand-cell',
       'aria-expanded': isExpanded,
-      isRightArrow: !isExpanded || isDragging || isDragOverlay
-    }), [row.uid, onRowExpandHandler, cell.ref, isRowSelected, isExpanded, isDragging, isDragOverlay]);
+      isRightArrow: !isExpanded || isDragging || isDragOverlay,
+      disabled: disabledRows[row.uid]
+    }), [row.uid, disabledRows, onRowExpandHandler, cell.ref, isRowSelected, isExpanded, isDragging, isDragOverlay]);
     const PureCaretIcon = React.useMemo(() => isExpanded && !isDragging && !isDragOverlay ? /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowheadDown, {
       "data-is-col-expanded": isExpanded,
       "data-role": "row-expander-col",

package/cjs/exported-related/RowRenderer/DefaultRowContentRenderer.js

@@ -141,7 +141,7 @@ const DefaultRowContentRenderer = props => {
         detailsIndent: detailsIndent
       }))]
     });
-  }, [row, selection, isExpandable, expandedRows, disabledRows, gridTemplateColProps, backgroundColor, compact, dropIndicatorPosition, isDndActive, isDragging, isDragOverlay, noSelectionColumn, selectedRowId, detailsIndent]);
+  }, [row, disabledRows, selection, isExpandable, expandedRows, gridTemplateColProps, backgroundColor, compact, dropIndicatorPosition, isDndActive, isDragging, isDragOverlay, noSelectionColumn, handleSelectDisableRow, selectedRowId, detailsIndent]);
   return PureRowContent;
 };
 

package/cjs/exported-related/RowRenderer/useRowRendererHandlers.js

@@ -56,7 +56,7 @@ const useRowRendererHandlers = _ref => {
     }
   } = React.useContext(DataTableContext["default"]);
 
-  const isOptionFocuseable = opt => !disabledRows[opt.id];
+  const isOptionFocuseable = opt => !disabledRows[opt.uid];
 
   const findInCircularList = function (list, from, criteria) {
     let step = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;

package/cjs/parts/Cells/Cell.js

@@ -121,7 +121,7 @@ const Cell = _ref2 => {
     return null;
   }, [DefaultCellContentJSX, cellProps, column]);
   return /*#__PURE__*/jsxRuntime.jsx(PureStandardCell, _objectSpread(_objectSpread({}, cellProps), {}, {
-    children: column.editable && !disabledRows[row.id] ? EditableContentJSX : DefaultCellContentJSX
+    children: column.editable && !disabledRows[row.uid] ? EditableContentJSX : DefaultCellContentJSX
   }));
 };
 

package/cjs/parts/Row.js

@@ -59,7 +59,7 @@ const RowComp = props => {
   } = React.useContext(SortableItemContext.SortableItemContext);
   const draggableRef = draggableProps && draggableProps.setNodeRef;
   return /*#__PURE__*/jsxRuntime.jsx(StyledRow, {
-    disabled: disabledRows[row.id],
+    disabled: disabledRows[row.uid],
     style: !isDragOverlay ? itemWrapperStyle : {},
     ref: ref => setItemRefs(measureRef, draggableRef, ref),
     children: /*#__PURE__*/_jsx__default["default"](index.RowVariantMapItem, {

package/cjs/styled.js

@@ -224,9 +224,10 @@ const StyledCellContainer = /*#__PURE__*/styled__default["default"](Grid__defaul
 }, _ref12 => {
   let {
     shouldDisplayHover,
-    theme
+    theme,
+    disabled
   } = _ref12;
-  return shouldDisplayHover ? `:hover {
+  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/esm/addons/Columns/ColumnExpand/ColumnExpand.js

@@ -7,7 +7,7 @@ import 'core-js/modules/esnext.async-iterator.filter.js';
 import 'core-js/modules/esnext.iterator.filter.js';
 import { useMemo, useCallback } from 'react';
 import { ArrowheadDown, ArrowheadRight, ArrowShortReturn } from '@elliemae/ds-icons';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { StyledFocusWithin } from '../../../styled.js';
 import { DATA_TESTID } from '../../../configs/constants.js';
 import 'core-js/modules/esnext.async-iterator.reduce.js';
@@ -31,32 +31,44 @@ import { jsx } from 'react/jsx-runtime';
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const disabledCaret = /*#__PURE__*/css(["cursor:not-allowed;svg{fill:", ";}"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral['400'];
+});
 const StyledSpan = /*#__PURE__*/styled.span.withConfig({
   componentId: "sc-1xp824d-0"
-})(["cursor:pointer;box-sizing:border-box;outline:none;display:flex;justify-content:center;align-items:center;"]);
+})(["cursor:pointer;box-sizing:border-box;outline:none;display:flex;justify-content:center;align-items:center;", ""], _ref2 => {
+  let {
+    disabled
+  } = _ref2;
+  return disabled && disabledCaret;
+});
 const expandRowColumn = {
   // Build our expander column
   id: 'expander',
   // Make sure it has an ID
   accessor: 'expandRowColumn',
-  Header: _ref => {
+  Header: _ref3 => {
     let {
       ctx
-    } = _ref;
+    } = _ref3;
     const {
       tableProps: {
         expandedRows,
-        onRowExpand
+        onRowExpand,
+        disabledRows
       },
       allDataFlattened
     } = ctx;
     const allExpandable = useMemo(() => {
       const expandable = {};
       allDataFlattened.forEach(row => {
-        if (row.original.subRows || row.original.tableRowDetails || row.original.dimsumHeaderValue) expandable[row.uid] = true;
+        if (!disabledRows[row.uid] && (row.original.subRows || row.original.tableRowDetails || row.original.dimsumHeaderValue)) expandable[row.uid] = true;
       });
       return expandable;
-    }, [allDataFlattened]);
+    }, [allDataFlattened, disabledRows]);
     const isAllRowsExpanded = useMemo(() => Object.keys(allExpandable).length === Object.keys(expandedRows).length, [allExpandable, expandedRows]);
     const onExpandedAllHandler = useCallback(() => {
       if (isAllRowsExpanded) onRowExpand({}, 'All');else onRowExpand(_objectSpread({}, allExpandable), 'All');
@@ -104,19 +116,20 @@ const expandRowColumn = {
       }
     }, void 0, GlobalExpandIcon));
   },
-  Cell: _ref2 => {
+  Cell: _ref4 => {
     let {
       cell,
       row,
       isRowSelected,
       ctx,
       draggableProps
-    } = _ref2;
+    } = _ref4;
     const {
       tableProps: {
         dragAndDropRows,
         expandedRows,
-        onRowExpand
+        onRowExpand,
+        disabledRows
       }
     } = ctx;
     const uniqueId = row.uid;
@@ -150,7 +163,7 @@ const expandRowColumn = {
       role: 'button',
       key: `${row.uid}-expand-button`,
       title: 'Toggle Row Expanded',
-      onClick: onRowExpandHandler,
+      onClick: !disabledRows[row.uid] ? onRowExpandHandler : undefined,
       onKeyDown: e => {
         if (['Enter', 'Space'].includes(e.code)) {
           e.preventDefault();
@@ -158,11 +171,12 @@ const expandRowColumn = {
         }
       },
       ref: cell.ref,
-      tabIndex: isRowSelected ? 0 : -1,
+      tabIndex: isRowSelected || disabledRows[row.uid] ? 0 : -1,
       'data-testid': 'data-table-row-expand-cell',
       'aria-expanded': isExpanded,
-      isRightArrow: !isExpanded || isDragging || isDragOverlay
-    }), [row.uid, onRowExpandHandler, cell.ref, isRowSelected, isExpanded, isDragging, isDragOverlay]);
+      isRightArrow: !isExpanded || isDragging || isDragOverlay,
+      disabled: disabledRows[row.uid]
+    }), [row.uid, disabledRows, onRowExpandHandler, cell.ref, isRowSelected, isExpanded, isDragging, isDragOverlay]);
     const PureCaretIcon = useMemo(() => isExpanded && !isDragging && !isDragOverlay ? /*#__PURE__*/_jsx(ArrowheadDown, {
       "data-is-col-expanded": isExpanded,
       "data-role": "row-expander-col",

package/esm/exported-related/RowRenderer/DefaultRowContentRenderer.js

@@ -132,7 +132,7 @@ const DefaultRowContentRenderer = props => {
         detailsIndent: detailsIndent
       }))]
     });
-  }, [row, selection, isExpandable, expandedRows, disabledRows, gridTemplateColProps, backgroundColor, compact, dropIndicatorPosition, isDndActive, isDragging, isDragOverlay, noSelectionColumn, selectedRowId, detailsIndent]);
+  }, [row, disabledRows, selection, isExpandable, expandedRows, gridTemplateColProps, backgroundColor, compact, dropIndicatorPosition, isDndActive, isDragging, isDragOverlay, noSelectionColumn, handleSelectDisableRow, selectedRowId, detailsIndent]);
   return PureRowContent;
 };
 

package/esm/exported-related/RowRenderer/useRowRendererHandlers.js

@@ -52,7 +52,7 @@ const useRowRendererHandlers = _ref => {
     }
   } = useContext(DataTableContext);
 
-  const isOptionFocuseable = opt => !disabledRows[opt.id];
+  const isOptionFocuseable = opt => !disabledRows[opt.uid];
 
   const findInCircularList = function (list, from, criteria) {
     let step = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;

package/esm/parts/Cells/Cell.js

@@ -113,7 +113,7 @@ const Cell = _ref2 => {
     return null;
   }, [DefaultCellContentJSX, cellProps, column]);
   return /*#__PURE__*/jsx(PureStandardCell, _objectSpread(_objectSpread({}, cellProps), {}, {
-    children: column.editable && !disabledRows[row.id] ? EditableContentJSX : DefaultCellContentJSX
+    children: column.editable && !disabledRows[row.uid] ? EditableContentJSX : DefaultCellContentJSX
   }));
 };
 

package/esm/parts/Row.js

@@ -51,7 +51,7 @@ const RowComp = props => {
   } = useContext(SortableItemContext);
   const draggableRef = draggableProps && draggableProps.setNodeRef;
   return /*#__PURE__*/jsx(StyledRow, {
-    disabled: disabledRows[row.id],
+    disabled: disabledRows[row.uid],
     style: !isDragOverlay ? itemWrapperStyle : {},
     ref: ref => setItemRefs(measureRef, draggableRef, ref),
     children: /*#__PURE__*/_jsx(RowVariantMapItem, {

package/esm/styled.js

@@ -215,9 +215,10 @@ const StyledCellContainer = /*#__PURE__*/styled(Grid).withConfig({
 }, _ref12 => {
   let {
     shouldDisplayHover,
-    theme
+    theme,
+    disabled
   } = _ref12;
-  return shouldDisplayHover ? `:hover {
+  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.11",
+  "version": "2.4.3-rc.12",
   "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.11",
-    "@elliemae/ds-circular-progress-indicator": "2.4.3-rc.11",
-    "@elliemae/ds-controlled-form": "2.4.3-rc.11",
-    "@elliemae/ds-drag-and-drop": "2.4.3-rc.11",
-    "@elliemae/ds-dropdownmenu": "2.4.3-rc.11",
-    "@elliemae/ds-form": "2.4.3-rc.11",
-    "@elliemae/ds-form-layout-blocks": "2.4.3-rc.11",
-    "@elliemae/ds-grid": "2.4.3-rc.11",
-    "@elliemae/ds-icons": "2.4.3-rc.11",
-    "@elliemae/ds-indeterminate-progress-indicator": "2.4.3-rc.11",
-    "@elliemae/ds-pagination": "2.4.3-rc.11",
-    "@elliemae/ds-pills": "2.4.3-rc.11",
-    "@elliemae/ds-popperjs": "2.4.3-rc.11",
-    "@elliemae/ds-props-helpers": "2.4.3-rc.11",
-    "@elliemae/ds-system": "2.4.3-rc.11",
-    "@elliemae/ds-toolbar": "2.4.3-rc.11",
-    "@elliemae/ds-truncated-tooltip-text": "2.4.3-rc.11",
-    "@elliemae/ds-utilities": "2.4.3-rc.11",
+    "@elliemae/ds-button": "2.4.3-rc.12",
+    "@elliemae/ds-circular-progress-indicator": "2.4.3-rc.12",
+    "@elliemae/ds-controlled-form": "2.4.3-rc.12",
+    "@elliemae/ds-drag-and-drop": "2.4.3-rc.12",
+    "@elliemae/ds-dropdownmenu": "2.4.3-rc.12",
+    "@elliemae/ds-form": "2.4.3-rc.12",
+    "@elliemae/ds-form-layout-blocks": "2.4.3-rc.12",
+    "@elliemae/ds-grid": "2.4.3-rc.12",
+    "@elliemae/ds-icons": "2.4.3-rc.12",
+    "@elliemae/ds-indeterminate-progress-indicator": "2.4.3-rc.12",
+    "@elliemae/ds-pagination": "2.4.3-rc.12",
+    "@elliemae/ds-pills": "2.4.3-rc.12",
+    "@elliemae/ds-popperjs": "2.4.3-rc.12",
+    "@elliemae/ds-props-helpers": "2.4.3-rc.12",
+    "@elliemae/ds-system": "2.4.3-rc.12",
+    "@elliemae/ds-toolbar": "2.4.3-rc.12",
+    "@elliemae/ds-truncated-tooltip-text": "2.4.3-rc.12",
+    "@elliemae/ds-utilities": "2.4.3-rc.12",
     "@reduxjs/toolkit": "~1.6.2",
     "csstype": "~3.0.9",
     "moment": "~2.29.1",