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

package/esm/exported-related/FilterPopover.js

@@ -0,0 +1,167 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useRef, useState } from 'react';
+import DSButton from '@elliemae/ds-button';
+import { DSPopperJS } from '@elliemae/ds-popperjs';
+import styled from 'styled-components';
+import '../redux/reducers/index.js';
+import { DATA_TESTID } from '../configs/constants.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
+import 'react-virtual';
+import '../configs/useRowFlattenization.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import '@elliemae/ds-icons';
+import '../styled.js';
+import { jsx } from 'react/jsx-runtime';
+import '@elliemae/ds-form';
+import '../parts/TableContent.js';
+import '@elliemae/ds-grid';
+import '@elliemae/ds-circular-progress-indicator';
+import '@elliemae/ds-system';
+import '../DataTableContext.js';
+import '../parts/Row.js';
+import '../parts/Footer.js';
+import '../parts/HoC/SortableItemContext.js';
+import { useDispatchHeadersActions } from '../redux/reducers/headersReducers/useDispatchHeadersActions.js';
+
+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 FilterButton = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-16i88ut-0"
+})(["display:inline-grid;", ""], props => props.hide ? 'opacity: 0; display: none; width: 0;' : '');
+const Button = /*#__PURE__*/styled(DSButton).withConfig({
+  componentId: "sc-16i88ut-1"
+})(["position:relative;justify-self:flex-end;"]);
+const PopperContent = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-16i88ut-2"
+})(["background-color:#fff;"]);
+const FilterPopover = _ref2 => {
+  var _column$ref$current$o, _column$ref, _column$ref$current;
+
+  let {
+    column,
+    columnId,
+    triggerIcon,
+    menuContent,
+    onTriggerClick = () => null,
+    onClickOutsideMenu = () => null,
+    reduxHeader,
+    innerRef,
+    ariaLabel,
+    customStyles
+  } = _ref2;
+  const {
+    hideFilterButton,
+    hideFilterMenu
+  } = reduxHeader || {
+    hideFilterButton: true,
+    hideFilterMenu: true
+  };
+  const popperRef = useRef(null);
+  const {
+    patchHeaderFilterButtonAndMenu,
+    patchHeader
+  } = useDispatchHeadersActions();
+  const isIconVisible = !hideFilterButton || !hideFilterMenu;
+  const isMenuOpen = !hideFilterMenu;
+
+  const handleClickOutsideMenu = e => {
+    onClickOutsideMenu(columnId, e);
+    if (isMenuOpen) patchHeaderFilterButtonAndMenu(columnId, true);
+  };
+
+  const handleTriggerClick = e => {
+    onTriggerClick(columnId, e);
+    patchHeaderFilterButtonAndMenu(columnId, false);
+    e.stopPropagation();
+  };
+
+  const [referenceElement, setReferenceElement] = useState(null);
+  return /*#__PURE__*/_jsx("div", {
+    // This is here to prevent propagation, and not trigger the sort functionality
+    onClick: e => e.stopPropagation(),
+    onKeyDown: e => {
+      e.stopPropagation();
+
+      if (e.code === 'Escape') {
+        patchHeader(columnId, {
+          hideFilterMenu: true,
+          hideFilterButton: false
+        });
+        referenceElement.focus();
+      } // Stop propagation for some reason is not enough to prevent scrolling of the datatable
+      // so we just prevent default behaviour in this case
+
+
+      if (['ArrowUp', 'ArrowDown'].includes(e.code)) {
+        e.preventDefault();
+      }
+    },
+    style: {
+      display: 'flex'
+    },
+    onBlur: e => {
+      if (e.target !== referenceElement && !popperRef.current.contains(e.relatedTarget)) {
+        referenceElement.focus();
+      }
+    }
+  }, void 0, /*#__PURE__*/_jsx(FilterButton, {
+    hide: !isIconVisible,
+    "data-testid": DATA_TESTID.DATA_TABLE_FILTER_BUTTON
+  }, void 0, /*#__PURE__*/_jsx(Button, {
+    onClick: handleTriggerClick,
+    buttonType: "text",
+    "aria-label": ariaLabel,
+    "aria-hidden": "true",
+    size: "s",
+    leftIcon: triggerIcon // implement treeview mergerefs
+    ,
+    innerRef: _ref => {
+      if (isIconVisible) setReferenceElement(_ref);
+      innerRef.current = _ref;
+    },
+    tabIndex: reduxHeader !== null && reduxHeader !== void 0 && reduxHeader.withTabStops ? 0 : -1
+  })), /*#__PURE__*/_jsx(DSPopperJS, {
+    referenceElement: referenceElement,
+    showPopover: isMenuOpen,
+    closeContextMenu: handleClickOutsideMenu,
+    "data-testid": DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT,
+    startPlacementPreference: "bottom-end",
+    customOffset: [5, 4],
+    withoutArrow: true,
+    zIndex: 10,
+    withoutAnimation: true,
+    extraPopperStyles: _objectSpread(_objectSpread({}, customStyles), {}, {
+      minWidth: (_column$ref$current$o = (_column$ref = column.ref) === null || _column$ref === void 0 ? void 0 : (_column$ref$current = _column$ref.current) === null || _column$ref$current === void 0 ? void 0 : _column$ref$current.offsetWidth) !== null && _column$ref$current$o !== void 0 ? _column$ref$current$o : '0px'
+    }),
+    placementOrderPreference: ['bottom-end']
+  }, void 0, /*#__PURE__*/jsx(PopperContent, {
+    onKeyDown: e => {
+      if (e.code === 'Tab') {
+        setTimeout(() => {
+          var _popperRef$current;
+
+          if (!(popperRef !== null && popperRef !== void 0 && (_popperRef$current = popperRef.current) !== null && _popperRef$current !== void 0 && _popperRef$current.contains(document.activeElement))) {
+            patchHeader(columnId, {
+              hideFilterMenu: true,
+              hideFilterButton: false
+            });
+          }
+        });
+      }
+    },
+    ref: popperRef,
+    children: menuContent
+  })));
+};
+
+export { FilterPopover };

package/esm/exported-related/FilterTypes.js

@@ -0,0 +1,11 @@
+const FILTER_TYPES = {
+  SELECT: 'ds-filter-select',
+  MULTI_SELECT: 'ds-filter-multi-select',
+  SINGLE_DATE: 'ds-filter-single-date',
+  DATE_RANGE: 'ds-filter-date-range',
+  DATE_SWITCHER: 'ds-filter-date-switcher',
+  NUMBER_RANGE: 'ds-filter-number-range',
+  CURRENCY_RANGE: 'ds-filter-currency-range'
+};
+
+export { FILTER_TYPES };

package/esm/exported-related/Filters/applyOutOfTheBoxFilters.js

@@ -0,0 +1,33 @@
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import { singleSelectFilterFn } from './singleSelectFilterFn.js';
+import { multiSelectFilterFn } from './multiSelectFilterFn.js';
+import { singleDateFilterFn } from './singleDateFilterFn.js';
+import { dateRangeFilterFn } from './dateRangeFilterFn.js';
+import { dateSwitcherFilterFn } from './dateSwitcherFilterFn.js';
+import { numberRangeFilterFn } from './numberRangeFilterFn.js';
+import { currencyRangeFilterFn } from './currencyRangeFilterFn.js';
+import { FILTER_TYPES } from '../FilterTypes.js';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const filterMapper = {
+  [FILTER_TYPES.SELECT]: singleSelectFilterFn,
+  [FILTER_TYPES.MULTI_SELECT]: multiSelectFilterFn,
+  [FILTER_TYPES.SINGLE_DATE]: singleDateFilterFn,
+  [FILTER_TYPES.DATE_RANGE]: dateRangeFilterFn,
+  [FILTER_TYPES.DATE_SWITCHER]: dateSwitcherFilterFn,
+  [FILTER_TYPES.NUMBER_RANGE]: numberRangeFilterFn,
+  [FILTER_TYPES.CURRENCY_RANGE]: currencyRangeFilterFn
+};
+const applyOutOfTheBoxFilters = (data, filters) => {
+  let filteredData = data;
+  filters.forEach(filter => {
+    if (filter.type in filterMapper) {
+      filteredData = filterMapper[filter.type](filteredData, filter.id, filter.value);
+    }
+  });
+  return filteredData;
+};
+
+export { applyOutOfTheBoxFilters };

package/esm/exported-related/Filters/currencyRangeFilterFn.js

@@ -0,0 +1,20 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+
+const getNumber = str => {
+  if (str === null) return null;
+  if (typeof str === 'number') return str;
+  if (typeof str !== 'string') return null;
+  return Number.parseFloat(str.split('').filter(x => ![',', '$'].includes(x)).join(''));
+};
+
+const isEmpty = number => Number.isNaN(number) || number === null || number === undefined;
+
+const currencyRangeFilterFn = (unfilteredData, filterKey, filterValue) => {
+  const fromNumber = getNumber(filterValue.from);
+  const toNumber = getNumber(filterValue.to);
+  return unfilteredData.filter(datum => isEmpty(fromNumber) || isEmpty(toNumber) || getNumber(datum[filterKey]) >= fromNumber && getNumber(datum[filterKey]) <= toNumber);
+};
+
+export { currencyRangeFilterFn };

package/esm/exported-related/Filters/dateRangeFilterFn.js

@@ -0,0 +1,37 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import moment from 'moment';
+import { momentFormat } from '../../configs/constants.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
+import 'react';
+import 'react-virtual';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import '../../configs/useRowFlattenization.js';
+import '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import '@babel/runtime/helpers/esm/jsx';
+import '@elliemae/ds-icons';
+import 'styled-components';
+import '../../styled.js';
+import 'react/jsx-runtime';
+import '@elliemae/ds-form';
+import '../../parts/TableContent.js';
+import '@elliemae/ds-grid';
+import '@elliemae/ds-circular-progress-indicator';
+import '@elliemae/ds-system';
+import '@elliemae/ds-button';
+import '../../DataTableContext.js';
+import '../../parts/Row.js';
+import '../../parts/Footer.js';
+import '../../parts/HoC/SortableItemContext.js';
+
+// use file instead of index to avoid circular imports!
+
+const dateRangeFilterFn = (unfilteredData, filterKey, filterValue) => unfilteredData.filter(datum => !(filterValue !== null && filterValue !== void 0 && filterValue.startDate && filterValue !== null && filterValue !== void 0 && filterValue.endDate) || moment(filterValue === null || filterValue === void 0 ? void 0 : filterValue.startDate, momentFormat).isSameOrBefore(datum[filterKey], 'day') && moment(filterValue === null || filterValue === void 0 ? void 0 : filterValue.endDate, momentFormat).isSameOrAfter(datum[filterKey], 'day'));
+
+export { dateRangeFilterFn };

package/esm/exported-related/Filters/dateSwitcherFilterFn.js

@@ -0,0 +1,8 @@
+import { dateRangeFilterFn } from './dateRangeFilterFn.js';
+import { singleDateFilterFn } from './singleDateFilterFn.js';
+
+// use file instead of index to avoid circular imports!
+
+const dateSwitcherFilterFn = (unfilteredData, filterKey, filterValue) => filterValue.isDateRange ? dateRangeFilterFn(unfilteredData, filterKey, filterValue) : singleDateFilterFn(unfilteredData, filterKey, filterValue.startDate);
+
+export { dateSwitcherFilterFn };

package/esm/exported-related/Filters/index.js

@@ -0,0 +1,7 @@
+export { applyOutOfTheBoxFilters } from './applyOutOfTheBoxFilters.js';
+export { singleDateFilterFn } from './singleDateFilterFn.js';
+export { singleSelectFilterFn } from './singleSelectFilterFn.js';
+export { multiSelectFilterFn } from './multiSelectFilterFn.js';
+export { numberRangeFilterFn } from './numberRangeFilterFn.js';
+export { currencyRangeFilterFn } from './currencyRangeFilterFn.js';
+export { dateRangeFilterFn } from './dateRangeFilterFn.js';

package/esm/exported-related/Filters/multiSelectFilterFn.js

@@ -0,0 +1,15 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.some.js';
+import 'core-js/modules/esnext.iterator.some.js';
+
+const multiSelectFilterFn = (unfilteredData, filterKey, filterValue) => {
+  if (filterValue.length > 0) {
+    return unfilteredData.filter(datum => filterValue.some(item => item.label === datum[filterKey].toString()));
+  }
+
+  return unfilteredData;
+};
+
+export { multiSelectFilterFn };

package/esm/exported-related/Filters/numberRangeFilterFn.js

@@ -0,0 +1,9 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+
+const isEmpty = number => number === null || number === undefined;
+
+const numberRangeFilterFn = (unfilteredData, filterKey, filterValue) => unfilteredData.filter(datum => isEmpty(filterValue === null || filterValue === void 0 ? void 0 : filterValue.from) || isEmpty(filterValue === null || filterValue === void 0 ? void 0 : filterValue.to) || datum[filterKey] >= filterValue.from && datum[filterKey] <= filterValue.to);
+
+export { numberRangeFilterFn };

package/esm/exported-related/Filters/singleDateFilterFn.js

@@ -0,0 +1,37 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import moment from 'moment';
+import { momentFormat } from '../../configs/constants.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
+import 'react';
+import 'react-virtual';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import '../../configs/useRowFlattenization.js';
+import '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import '@babel/runtime/helpers/esm/jsx';
+import '@elliemae/ds-icons';
+import 'styled-components';
+import '../../styled.js';
+import 'react/jsx-runtime';
+import '@elliemae/ds-form';
+import '../../parts/TableContent.js';
+import '@elliemae/ds-grid';
+import '@elliemae/ds-circular-progress-indicator';
+import '@elliemae/ds-system';
+import '@elliemae/ds-button';
+import '../../DataTableContext.js';
+import '../../parts/Row.js';
+import '../../parts/Footer.js';
+import '../../parts/HoC/SortableItemContext.js';
+
+// use file instead of index to avoid circular imports!
+
+const singleDateFilterFn = (unfilteredData, filterKey, filterValue) => unfilteredData.filter(datum => moment(filterValue, momentFormat).isSame(datum[filterKey], 'day'));
+
+export { singleDateFilterFn };

package/esm/exported-related/Filters/singleSelectFilterFn.js

@@ -0,0 +1,13 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+
+const singleSelectFilterFn = (unfilteredData, filterKey, filterValue) => {
+  if (filterValue) {
+    return unfilteredData.filter(datum => datum[filterKey].toString() === filterValue.label);
+  }
+
+  return unfilteredData;
+};
+
+export { singleSelectFilterFn };

package/esm/exported-related/Filters/types.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,136 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useRef, useLayoutEffect, useMemo } from 'react';
+import { INTERNAL_COLUMNS } from '../../addons/Columns/index.js';
+import { DATA_TESTID } from '../../configs/constants.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
+import 'react-virtual';
+import '../../configs/useRowFlattenization.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import Cells from '../../parts/Cells/index.js';
+import { DropIndicatorPosition } from '../../parts/HoC/SortableItemContext.js';
+import { StyledCellContainer } from '../../styled.js';
+import { jsxs, Fragment, 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 DetailsWrapper = props =>
+/*#__PURE__*/
+// This can be further customized
+// eslint-disable-next-line react/prop-types
+// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+_jsx("div", {
+  "data-role": "detail-view",
+  style: {
+    borderTop: '1px solid #EBEDF0',
+    borderBottom: '1px solid #EBEDF0'
+  },
+  onClick: e => e.stopPropagation(),
+  onKeyDown: e => e.stopPropagation()
+}, void 0, props.children);
+
+const ariaLabelMessage = (row, selected) => "Row number ".concat(row.realIndex + 1).concat(row.parentIndex !== null ? ", child of row number ".concat(row.parentIndex + 1) : '', ". ").concat(selected ? 'Selected. ' : '', "To interact with the cells press enter");
+
+const DefaultRowContentRenderer = props => {
+  const {
+    row,
+    ctx: {
+      tableProps: {
+        isExpandable,
+        colsLayoutStyle,
+        selection,
+        noSelectionColumn,
+        expandedRows,
+        disabledRows
+      },
+      layoutHelpers: {
+        gridLayout
+      },
+      visibleColumns
+    },
+    draggableProps,
+    isDragOverlay,
+    backgroundColor = 'white',
+    dropIndicatorPosition,
+    focusedRowId,
+    selectedRowId,
+    compact
+  } = props;
+  const rowRef = useRef(null);
+  const isDndActive = draggableProps && draggableProps.active;
+  const isDragging = draggableProps && draggableProps.isDragging;
+  useLayoutEffect(() => {
+    if (row.uid === focusedRowId) {
+      rowRef.current.focus({
+        preventScroll: true
+      });
+    }
+  }, [focusedRowId, row.uid]);
+  const gridTemplateColProps = useMemo(() => ({
+    cols: isDragOverlay ? ['24px', 'auto'] : gridLayout,
+    isExpandable,
+    colLayoutStyle: colsLayoutStyle
+  }), [isDragOverlay, gridLayout, colsLayoutStyle, isExpandable]);
+  const detailsIndent = useMemo(() => {
+    let padding = 0;
+
+    for (let i = 0; i < visibleColumns.length; i += 1) {
+      if (INTERNAL_COLUMNS.includes(visibleColumns[i].id)) {
+        padding += visibleColumns[i].width;
+      } else {
+        padding += row.depth * 32 + 15;
+        break;
+      }
+    }
+
+    return padding;
+  }, [row.depth, visibleColumns]);
+  const PureRowContent = useMemo(() => {
+    const DetailsView = row.original.tableRowDetails;
+    return /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx(StyledCellContainer, _objectSpread(_objectSpread({
+        ref: rowRef,
+        tabIndex: 0,
+        role: "row",
+        "aria-rowindex": row.realIndex + 1,
+        "aria-label": ariaLabelMessage(row, (selection === null || selection === void 0 ? void 0 : selection[row.uid]) === true),
+        "aria-level": row.depth + 1,
+        "aria-selected": (selection === null || selection === void 0 ? void 0 : selection[row.uid]) === true,
+        "aria-expanded": isExpandable ? expandedRows[row.uid] === true : undefined,
+        "aria-disabled": disabledRows[row.uid]
+      }, gridTemplateColProps), {}, {
+        backgroundColor: backgroundColor,
+        height: compact ? '24px' : 'auto',
+        minHeight: compact ? '24px' : '36px',
+        isDropIndicatorPositionInside: dropIndicatorPosition === DropIndicatorPosition.Inside,
+        shouldDisplayHover: !isDndActive && !isDragging && !isDragOverlay,
+        isDragOverlay: isDragOverlay,
+        isDragging: isDragging,
+        selected: noSelectionColumn && (selection === null || selection === void 0 ? void 0 : selection[row.uid]) === true,
+        disabled: disabledRows[row.uid],
+        "data-testid": DATA_TESTID.DATA_TABLE_ROW_CONTENT,
+        children: /*#__PURE__*/_jsx(Cells, {
+          row: row,
+          isRowSelected: selectedRowId === row.uid,
+          isDragOverlay: isDragOverlay
+        }, row.uid)
+      }), row.uid), isExpandable && row.isExpanded && DetailsView && /*#__PURE__*/_jsx(DetailsWrapper, {}, void 0, /*#__PURE__*/_jsx(DetailsView, {
+        row: row,
+        detailsIndent: detailsIndent
+      }))]
+    });
+  }, [row, selection, isExpandable, expandedRows, disabledRows, gridTemplateColProps, backgroundColor, compact, dropIndicatorPosition, isDndActive, isDragging, isDragOverlay, noSelectionColumn, selectedRowId, detailsIndent]);
+  return PureRowContent;
+};
+
+export { DefaultRowContentRenderer };

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

@@ -0,0 +1,138 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useContext, createElement } from 'react';
+import DataTableContext from '../../DataTableContext.js';
+import { StyledFullsizeGrid } from '../../styled.js';
+import { DefaultRowContentRenderer } from './DefaultRowContentRenderer.js';
+import { useRowRendererHandlers } from './useRowRendererHandlers.js';
+import { useRowRendererProperties } from './useRowRendererProperties.js';
+import DropIndicator from '../../parts/DropIndicator.js';
+import { SortableItemContext } from '../../parts/HoC/SortableItemContext.js';
+import { DATA_TESTID } from '../../configs/constants.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
+import 'react-virtual';
+import '../../configs/useRowFlattenization.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import '@elliemae/ds-icons';
+import 'styled-components';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@elliemae/ds-form';
+import '../../parts/TableContent.js';
+import '@elliemae/ds-grid';
+import '@elliemae/ds-circular-progress-indicator';
+import '@elliemae/ds-system';
+import '@elliemae/ds-button';
+import '../../parts/Row.js';
+import '../../parts/Footer.js';
+
+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; }
+
+// CSS don't let us modify the spacing between the dots, so one solution is to use SVG
+const magicDottedBorder = /*#__PURE__*/_jsx("svg", {
+  width: "100%",
+  height: "1px"
+}, void 0, /*#__PURE__*/_jsx("line", {
+  x1: "0",
+  y1: "0",
+  x2: "100%",
+  y2: "0",
+  stroke: "#B0B9C8FF",
+  strokeWidth: "1.5",
+  strokeDasharray: "0, 5",
+  strokeDashoffset: "0",
+  strokeLinecap: "round"
+}));
+
+const RowRenderer = props => {
+  const {
+    row,
+    itemIndex,
+    minHeight = '36px',
+    height = 'auto',
+    rowsLayout = [1],
+    CustomRowContentRenderer,
+    focusedRowId,
+    selectedRowId,
+    isDragOverlay
+  } = props;
+  const ctx = useContext(DataTableContext);
+  const {
+    draggableProps
+  } = useContext(SortableItemContext);
+  const {
+    flattenedData
+  } = ctx; // ===========================================================================
+  // Properties for the row
+  // ===========================================================================
+
+  const {
+    userDataProperties,
+    colsLayoutStyle,
+    totalColumnsWidth,
+    rowStyle,
+    shouldAppendDottedBorder,
+    dropIndicatorPosition
+  } = useRowRendererProperties({
+    row
+  }); // ===========================================================================
+  // Handlers
+  // ===========================================================================
+
+  const {
+    handleItemClick,
+    handleKeyDown,
+    handleOnBlur,
+    handleOnFocus
+  } = useRowRendererHandlers({
+    row,
+    itemIndex,
+    items: flattenedData,
+    draggableProps,
+    isDragOverlay,
+    selectedRowId
+  });
+
+  const rowContentProps = _objectSpread(_objectSpread({}, props), {}, {
+    ctx,
+    focusedRowId,
+    selectedRowId,
+    draggableProps,
+    dropIndicatorPosition
+  });
+
+  return /*#__PURE__*/jsxs(StyledFullsizeGrid, _objectSpread(_objectSpread({
+    "data-testid": DATA_TESTID.DATA_TABLE_ROW,
+    colsLayoutStyle: colsLayoutStyle
+  }, userDataProperties), {}, {
+    totalColumnsWidth: totalColumnsWidth,
+    style: rowStyle,
+    onClick: handleItemClick,
+    onKeyDown: handleKeyDown,
+    onBlur: handleOnBlur,
+    onFocus: handleOnFocus,
+    "data-expandable": Boolean(row.original.tableRowDetails),
+    "data-is-row-expanded": row.isExpanded,
+    rows: rowsLayout,
+    minHeight: minHeight,
+    height: height,
+    children: [CustomRowContentRenderer ? /*#__PURE__*/jsx(CustomRowContentRenderer, _objectSpread({}, rowContentProps)) : /*#__PURE__*/createElement(DefaultRowContentRenderer, _objectSpread(_objectSpread({}, rowContentProps), {}, {
+      key: row.uid
+    })), shouldAppendDottedBorder && magicDottedBorder, /*#__PURE__*/_jsx(DropIndicator, {
+      vertical: false,
+      dropIndicatorPosition: dropIndicatorPosition,
+      isLast: row.index === flattenedData.length - 1 && draggableProps && draggableProps.isDragging
+    })]
+  }), row.uid);
+};
+
+export { RowRenderer as default };