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

package/esm/addons/Filters/Components/SelectFilter/SingleSelectFilter.js

@@ -1,56 +1,68 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import { BaseSelectFilter } from './BaseSelectFilter.js';
+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 '@babel/runtime/helpers/esm/defineProperty';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import '@elliemae/ds-button';
 import '@elliemae/ds-popperjs';
 import '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 '@babel/runtime/helpers/esm/defineProperty';
+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 'react/jsx-runtime';
-import '@elliemae/ds-form/Checkbox';
-import '@elliemae/ds-form/Radio';
+import '@elliemae/ds-form';
 import '../../../../parts/TableContent.js';
 import '@elliemae/ds-grid';
 import '@elliemae/ds-circular-progress-indicator';
-import '@elliemae/ds-icons/WarningTriangle';
 import '@elliemae/ds-system';
 import '../../../../DataTableContext.js';
 import '../../../../parts/Row.js';
 import '../../../../parts/Footer.js';
-import '@elliemae/ds-icons/GripperVertical';
 import '../../../../parts/HoC/SortableItemContext.js';
-import '@elliemae/ds-icons/MoreOptionsVert';
-import '@elliemae/ds-utilities/hooks';
+import '@elliemae/ds-utilities';
 import 'uid';
 import { FILTER_TYPES } from '../../../../exported-related/FilterTypes.js';
 import '../../../../exported-related/Filters/applyOutOfTheBoxFilters.js';
 import 'moment';
+import 'core-js/modules/esnext.async-iterator.some.js';
+import 'core-js/modules/esnext.iterator.some.js';
 
-const SingleSelectFilter = ({
-  column,
-  ctx,
-  patchHeaderFilterButtonAndMenu,
-  patchHeader,
-  onValueChange,
-  reduxHeader,
-  innerRef
-}) => /*#__PURE__*/_jsx(BaseSelectFilter, {
-  reduxHeader: reduxHeader,
-  "data-testid": DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER,
-  isSingle: true,
-  column: column,
-  ctx: ctx,
-  type: FILTER_TYPES.SELECT,
-  onValueChange: onValueChange,
-  patchHeaderFilterButtonAndMenu: patchHeaderFilterButtonAndMenu,
-  patchHeader: patchHeader,
-  innerRef: innerRef
-});
+const SingleSelectFilter = _ref => {
+  let {
+    column,
+    ctx,
+    patchHeaderFilterButtonAndMenu,
+    patchHeader,
+    onValueChange,
+    filterValue,
+    reduxHeader,
+    innerRef
+  } = _ref;
+  return /*#__PURE__*/_jsx(BaseSelectFilter, {
+    reduxHeader: reduxHeader,
+    "data-testid": DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER,
+    isSingle: true,
+    column: column,
+    ctx: ctx,
+    selectedItems: filterValue,
+    type: FILTER_TYPES.SELECT,
+    onValueChange: onValueChange,
+    patchHeaderFilterButtonAndMenu: patchHeaderFilterButtonAndMenu,
+    patchHeader: patchHeader,
+    innerRef: innerRef
+  });
+};
 
 export { SingleSelectFilter };

package/esm/addons/Filters/Components/SelectFilter/useSelectFilterHandlers.js

@@ -1,19 +1,23 @@
+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/web.dom-collections.iterator.js';
 import { useCallback } from 'react';
 import { focusNextMenuItem, focusPrevMenuItem } from './utils.js';
 
-const useSelectFilterHandlers = ({
-  column: {
-    id
-  },
-  type,
-  isSingle,
-  isMulti,
-  selectedItems,
-  onValueChange,
-  patchHeaderFilterButtonAndMenu,
-  patchHeader
-}) => {
+const useSelectFilterHandlers = _ref => {
+  let {
+    column: {
+      id
+    },
+    type,
+    isSingle,
+    isMulti,
+    selectedItems,
+    onValueChange,
+    patchHeaderFilterButtonAndMenu,
+    patchHeader
+  } = _ref;
   const handleSelectItem = useCallback(option => {
     if (isSingle) {
       onValueChange(type, option);

package/esm/addons/Filters/Components/SelectFilter/utils.js

@@ -1,26 +1,32 @@
 import { DATA_TESTID } from '../../../../configs/constants.js';
+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/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/Checkbox';
-import '@elliemae/ds-form/Radio';
+import '@elliemae/ds-form';
 import '../../../../parts/TableContent.js';
 import '@elliemae/ds-grid';
 import '@elliemae/ds-circular-progress-indicator';
-import '@elliemae/ds-icons/WarningTriangle';
 import '@elliemae/ds-system';
 import '@elliemae/ds-button';
 import '../../../../DataTableContext.js';
 import '../../../../parts/Row.js';
 import '../../../../parts/Footer.js';
-import '@elliemae/ds-icons/GripperVertical';
 import '../../../../parts/HoC/SortableItemContext.js';
 
 const focusNextMenuItem = (e, index) => {

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

@@ -1,7 +1,7 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useEffect, useCallback } from 'react';
-import DatePickerIcon from '@elliemae/ds-icons/DatePicker2';
+import { DatePicker2 } from '@elliemae/ds-icons';
 import Grid from '@elliemae/ds-grid';
 import { DSControlledDateTimePicker } from '@elliemae/ds-controlled-form';
 import { FilterPopover } from '../../../../exported-related/FilterPopover.js';
@@ -10,29 +10,35 @@ import '../../../../DataTableContext.js';
 import 'react/jsx-runtime';
 import 'styled-components';
 import '@elliemae/ds-button';
-import '@elliemae/ds-icons/MoreOptionsVert';
-import '@elliemae/ds-utilities/hooks';
+import '@elliemae/ds-utilities';
 import { DATA_TESTID } from '../../../../configs/constants.js';
+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.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
 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 '@elliemae/ds-icons';
-import '@elliemae/ds-form/Checkbox';
-import '@elliemae/ds-form/Radio';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import '@elliemae/ds-form';
 import '../../../../parts/TableContent.js';
 import '@elliemae/ds-circular-progress-indicator';
-import '@elliemae/ds-icons/WarningTriangle';
 import '@elliemae/ds-system';
 import '../../../../parts/Row.js';
 import '../../../../parts/Footer.js';
-import '@elliemae/ds-icons/GripperVertical';
 import '../../../../parts/HoC/SortableItemContext.js';
 import 'uid';
 import { FILTER_TYPES } from '../../../../exported-related/FilterTypes.js';
 import '../../../../exported-related/Filters/applyOutOfTheBoxFilters.js';
 import 'moment';
+import 'core-js/modules/esnext.async-iterator.some.js';
+import 'core-js/modules/esnext.iterator.some.js';
 
-var _DatePickerIcon;
+var _DatePicker;
 const SingleDateFilter = props => {
   const {
     column,
@@ -78,7 +84,7 @@ const SingleDateFilter = props => {
       onDateChange: setDate,
       type: "date-picker-controller-only"
     }))),
-    triggerIcon: _DatePickerIcon || (_DatePickerIcon = /*#__PURE__*/_jsx(DatePickerIcon, {})),
+    triggerIcon: _DatePicker || (_DatePicker = /*#__PURE__*/_jsx(DatePicker2, {})),
     innerRef: innerRef,
     ariaLabel: "Open Single Date Filter"
   });

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

@@ -1,6 +1,7 @@
 export { DateRangeFilter } from './DateRangeFilter/index.js';
+export { DateSwitcherFilter } from './DateSwitcherFilter/index.js';
 export { NumberRangeFilter } from './NumberRangeFilter/index.js';
+export { CurrencyRangeFilter } from './CurrencyRangeFilter/index.js';
 export { SingleSelectFilter } from './SelectFilter/SingleSelectFilter.js';
 export { MultiSelectFilter } from './SelectFilter/MultiSelectFilter.js';
 export { SingleDateFilter } from './SingleDateFilter/index.js';
-export { TextInputFilter } from './TextInputFilter/index.js';

package/esm/addons/Filters/index.js

@@ -1,6 +1,7 @@
 export { DateRangeFilter } from './Components/DateRangeFilter/index.js';
+export { DateSwitcherFilter } from './Components/DateSwitcherFilter/index.js';
 export { NumberRangeFilter } from './Components/NumberRangeFilter/index.js';
+export { CurrencyRangeFilter } from './Components/CurrencyRangeFilter/index.js';
 export { SingleSelectFilter } from './Components/SelectFilter/SingleSelectFilter.js';
 export { MultiSelectFilter } from './Components/SelectFilter/MultiSelectFilter.js';
 export { SingleDateFilter } from './Components/SingleDateFilter/index.js';
-export { TextInputFilter } from './Components/TextInputFilter/index.js';

package/esm/addons/Pagination/Pagination.js

@@ -1,47 +1,25 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+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 { useContext, useMemo, useEffect } from 'react';
-import { PaginationContainer, PaginationWrapper } from '../../styled.js';
+import { DSPagination } from '@elliemae/ds-pagination';
 import DataTableContext from '../../DataTableContext.js';
-import PerPageSelector from './PerPageSelector.js';
-import PagesButtons from './PagesButtons.js';
-import { DATA_TESTID } from '../../configs/constants.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import 'react-virtual';
-import '../../configs/useRowFlattenization.js';
-import '@babel/runtime/helpers/esm/defineProperty';
-import '@elliemae/ds-icons';
-import 'styled-components';
-import 'react/jsx-runtime';
-import '@elliemae/ds-form/Checkbox';
-import '@elliemae/ds-form/Radio';
-import '../../parts/TableContent.js';
-import '@elliemae/ds-grid';
-import '@elliemae/ds-circular-progress-indicator';
-import '@elliemae/ds-icons/WarningTriangle';
-import '@elliemae/ds-system';
-import '@elliemae/ds-button';
-import '../../parts/Row.js';
-import '../../parts/Footer.js';
-import '@elliemae/ds-icons/GripperVertical';
-import '../../parts/HoC/SortableItemContext.js';
+import { jsx } from 'react/jsx-runtime';
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 const Pagination = () => {
   const {
     tableProps: {
-      pagination,
       onPageChanged
     },
-    paginationHelpers: {
-      pageIndex,
-      pageSize,
-      canPreviousPage,
-      canNextPage,
-      onPageSizeChange,
-      onNextPage,
-      onPreviousPage,
-      onPageChange,
-      pageCount
-    },
+    paginationHelpers,
     flattenedData: page,
     layoutHelpers: {
       totalColumnsWidth
@@ -51,22 +29,9 @@ const Pagination = () => {
   useEffect(() => {
     onPageChanged(originalPage);
   }, [onPageChanged, originalPage]);
-  return /*#__PURE__*/_jsx(PaginationContainer, {
-    width: totalColumnsWidth,
-    "data-testid": DATA_TESTID.DATA_TABLE_PAGINATION_CONTAINER
-  }, void 0, /*#__PURE__*/_jsx(PaginationWrapper, {}, void 0, /*#__PURE__*/_jsx(PerPageSelector, {
-    pagination: pagination,
-    pageSize: pageSize,
-    setPageSize: onPageSizeChange
-  }), /*#__PURE__*/_jsx(PagesButtons, {
-    canPreviousPage: canPreviousPage,
-    canNextPage: canNextPage,
-    pageCount: pageCount,
-    pageIndex: pageIndex,
-    onNextPage: onNextPage,
-    onPreviousPage: onPreviousPage,
-    onPageChange: onPageChange
-  })));
+  return /*#__PURE__*/jsx(DSPagination, _objectSpread(_objectSpread({}, paginationHelpers), {}, {
+    width: totalColumnsWidth
+  }));
 };
 
 export { Pagination };

package/esm/configs/constants.js

@@ -19,12 +19,10 @@ const DATA_TESTID = {
   DATA_TABLE_DATE_RANGE_CONTROLLER: 'data-table-date-range',
   DATA_TABLE_SINGLE_DATE_CONTROLLER: 'data-table-single-date',
   DATA_TABLE_NUMBER_RANGE_CONTROLLER: 'data-table-number-range',
+  DATA_TABLE_CURRENCY_RANGE_CONTROLLER: 'data-table-currency-range',
   DATA_TABLE_SELECT_MENU_ITEM: 'data-table-filter-menu-list-item',
   DATA_TABLE_MULTISELECT_CONTROLLER: 'data-table-multi-select',
   DATA_TABLE_SINGLESELECT_CONTROLLER: 'data-table-single-select',
-  DATA_TABLE_PAGINATION_PREVIOUS_BUTTON: 'data-table-pagination-prev-button',
-  DATA_TABLE_PAGINATION_NEXT_BUTTON: 'data-table-pagination-next-button',
-  DATA_TABLE_PAGINATION_CONTAINER: 'data-table-pagination-container',
   DATA_TABLE_FILTER_BUTTON: 'data-table-filter-menu-button',
   DATA_TABLE_FILTER_MENU_CONTENT: 'data-table-filter-menu-content',
   DATA_TABLE_ROW_CONTENT: 'data-table-row-content',

package/esm/configs/fixedSizes.js

@@ -1,5 +1,5 @@
 const FIXED_SIZES = {
-  PAGINATION_HEIGHT: 50
+  PAGINATION_HEIGHT: 42
 };
 
 export { FIXED_SIZES };

package/esm/configs/useDatatableConfig.js

@@ -1,4 +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';
 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 { useRef, useMemo, useState, useEffect } from 'react';
 import { useVirtual } from 'react-virtual';
 import { columnsToGrid } from '../helpers/columnsToGrid.js';

package/esm/configs/usePaginationConfig.js

@@ -20,10 +20,13 @@ const usePaginationConfig = (props, flattenedData) => {
     onPreviousPage = emptyFunc,
     onNextPage = emptyFunc,
     onPageChange = emptyFunc,
-    pageCount = Math.floor(flattenedData.length / pageSize),
+    pageCount = Math.ceil(flattenedData.length / pageSize),
     perPageStep = 5,
     minPerPage = 0,
-    maxPerPage = 100
+    maxPerPage = 100,
+    showPerPageSelector = true,
+    pageDetails = [],
+    pageDetailsTitle = ''
   } = pagination || noPagination; // pagination can be false
   // Get the needed page
 
@@ -44,8 +47,11 @@ const usePaginationConfig = (props, flattenedData) => {
     pageCount,
     perPageStep,
     minPerPage,
-    maxPerPage
-  }), [pageIndex, canPreviousPage, canNextPage, pageSize, perPageOptions, onPageSizeChange, onPreviousPage, onNextPage, onPageChange, pageCount, perPageStep, minPerPage, maxPerPage]);
+    maxPerPage,
+    showPerPageSelector,
+    pageDetails,
+    pageDetailsTitle
+  }), [pageIndex, canPreviousPage, canNextPage, pageSize, perPageOptions, onPageSizeChange, onPreviousPage, onNextPage, onPageChange, pageCount, perPageStep, minPerPage, maxPerPage, showPerPageSelector, pageDetails, pageDetailsTitle]);
   return [page, paginationHelpers];
 };
 

package/esm/configs/useRowFlattenization.js

@@ -1,20 +1,27 @@
+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 { useMemo } from 'react';
 import { getIdFromUniqueRowAccessor } from '../helpers/getIdFromUniqueRowAccessor.js';
 
-/* eslint-disable max-params */
 const emptyObject = {};
 const trueReturner = new Proxy({}, {
   get: () => true
 });
 
-const flatten = (data, expandedRows, uniqueRowAccessor, maxDepth = 0) => {
+const flatten = function (data, expandedRows, uniqueRowAccessor) {
+  let maxDepth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
   const result = [];
 
-  const doit = (row, index = 0, parentId = null, parentIndex = null, depth = 0) => {
+  const doit = function (row) {
+    let index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    let parentId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    let parentIndex = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+    let depth = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
     const id = (parentId ? "".concat(parentId, ".") : '') + index.toString();
     const uid = getIdFromUniqueRowAccessor(uniqueRowAccessor, {
       id,
-      original: row
+      original: row !== null && row !== void 0 ? row : {}
     });
     const isExpanded = expandedRows[uid];
     const rowToPush = {
@@ -26,11 +33,11 @@ const flatten = (data, expandedRows, uniqueRowAccessor, maxDepth = 0) => {
       parentIndex,
       depth,
       isExpanded,
-      original: row
+      original: row !== null && row !== void 0 ? row : {}
     };
     result.push(rowToPush); // If we have subrows and we are expanded
 
-    if (row.subRows && expandedRows[uid] && depth <= maxDepth) {
+    if (row !== null && row !== void 0 && row.subRows && expandedRows[uid] && depth <= maxDepth) {
       row.subRows.forEach((subRow, i) => doit(subRow, i, uid, rowToPush.realIndex, depth + 1));
     }
   };

package/esm/configs/useTableColsWithAddons.js

@@ -1,6 +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';
+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 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
-import { useMemo } from 'react';
+import { useMemo, createRef } from 'react';
 import { actionColumn } from '../addons/Columns/ColumnAction/ColumnAction.js';
 import { expandRowColumn } from '../addons/Columns/ColumnExpand/ColumnExpand.js';
 import { multiSelectColumn } from '../addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js';
@@ -12,36 +19,43 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 const augmentColumns = columns => {
-  const augmentColumn = (column, index, parentId = null, depth = 0) => {
+  const augmentColumn = function (column, index) {
+    let parentId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    let depth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
     let id = "column".concat(index);
     if (typeof column.Header === 'string') id = column.Header;
     if (typeof column.accessor === 'string') id = column.accessor;
     if (column.columns) column.columns = column.columns.map((col, i) => augmentColumn(col, i, id, depth + 1));
-    return _objectSpread({
+    return _objectSpread(_objectSpread({
       id,
       parentId,
       depth
-    }, column);
+    }, column), {}, {
+      ref: /*#__PURE__*/createRef()
+    });
   };
 
   return columns.map((col, index) => augmentColumn(col, index));
 };
 
-const useTableColsWithAddons = ({
-  columns,
-  renderRowActions,
-  isExpandable,
-  selectSingle,
-  selection,
-  dragAndDropRows,
-  noSelectionColumn
-}) => useMemo(() => {
-  const columnsWithAddons = [...augmentColumns(columns)];
-  if (isExpandable) columnsWithAddons.unshift(expandRowColumn);
-  if (selection && !noSelectionColumn) if (selectSingle) columnsWithAddons.unshift(singleSelectColumn);else columnsWithAddons.unshift(multiSelectColumn);
-  if (dragAndDropRows) columnsWithAddons.unshift(dragHandleColumn);
-  if (renderRowActions) columnsWithAddons.push(actionColumn(renderRowActions));
-  return columnsWithAddons;
-}, [columns, isExpandable, selection, noSelectionColumn, selectSingle, dragAndDropRows, renderRowActions]);
+const useTableColsWithAddons = _ref => {
+  let {
+    columns,
+    renderRowActions,
+    isExpandable,
+    selectSingle,
+    selection,
+    dragAndDropRows,
+    noSelectionColumn
+  } = _ref;
+  return useMemo(() => {
+    const columnsWithAddons = [...augmentColumns(columns)];
+    if (isExpandable) columnsWithAddons.unshift(expandRowColumn);
+    if (selection && !noSelectionColumn) if (selectSingle) columnsWithAddons.unshift(singleSelectColumn);else columnsWithAddons.unshift(multiSelectColumn);
+    if (dragAndDropRows) columnsWithAddons.unshift(dragHandleColumn);
+    if (renderRowActions) columnsWithAddons.push(actionColumn(renderRowActions));
+    return columnsWithAddons;
+  }, [columns, isExpandable, selection, noSelectionColumn, selectSingle, dragAndDropRows, renderRowActions]);
+};
 
 export { useTableColsWithAddons as default };

package/esm/exported-related/EditableCell.js

@@ -54,14 +54,14 @@ const EditableCell = props => {
     onBlur: handleOnBlur,
     shouldDisplayEditIcon: cell.column.alwaysDisplayEditIcon,
     role: "cell",
-    "aria-describedby": isEditing ? undefined : cell.id,
+    "aria-labelledby": isEditing ? undefined : cell.id,
     children: [!isEditing ? StandardRender : EditableRenderer, !isEditing && (_StyledPencilIcon || (_StyledPencilIcon = /*#__PURE__*/_jsx(StyledPencilIcon, {}))), /*#__PURE__*/_jsx("span", {
       id: cell.id,
       style: {
         display: 'none'
       },
       "aria-hidden": "true"
-    }, void 0, "Editable cell. To edit the content's of this cell, press the Enter key")]
+    }, void 0, cell.value, ", editable cell. To edit the content's of this cell, press the Enter key")]
   });
 };