@elliemae/ds-data-table 1.61.0 → 2.0.0-alpha.12

package/esm/DataTableSchema.js

@@ -1,10 +1,10 @@
 import { PropTypes } from 'react-desc';
 
 /* eslint-disable max-lines */
-var outOfTheBoxFilterType = PropTypes.oneOf(['ds-filter-select', 'ds-filter-multi-select', 'ds-filter-text', 'ds-filter-single-date', 'ds-filter-date-range', 'ds-filter-number-range']);
-var textWrappingType = PropTypes.oneOf(['wrap', 'wrap-all', 'truncate']);
-var rowVariantType = PropTypes.oneOf(['ds_header_group_row', 'ds_primary_row', 'ds_secondary_row']);
-var columnPropTypes = {
+const outOfTheBoxFilterType = PropTypes.oneOf(['ds-filter-select', 'ds-filter-multi-select', 'ds-filter-single-date', 'ds-filter-date-range', 'ds-filter-number-range']);
+const textWrappingType = PropTypes.oneOf(['wrap', 'wrap-all', 'truncate']);
+const rowVariantType = PropTypes.oneOf(['ds_header_group_row', 'ds_primary_row', 'ds_secondary_row']);
+const columnPropTypes = {
   Header: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.element]).description('Header name or component').isRequired,
   accessor: PropTypes.string.description('The entry of the data that this column will display'),
   id: PropTypes.string.description('The id of the column, will default to the Header or accessor if not present'),
@@ -23,15 +23,15 @@ var columnPropTypes = {
   alwaysDisplayEditIcon: PropTypes.bool.description('Whereas to always show the edit icon on this column if it is editable'),
   textWrap: textWrappingType
 };
-var columnsPropTypes = PropTypes.shape(columnPropTypes).description('Columns props');
-var rowPropTypes = {
+const columnsPropTypes = PropTypes.shape(columnPropTypes).description('Columns props');
+const rowPropTypes = {
   row_variant_type: rowVariantType.description('Which row variant to use, will default to primary'),
   row_variant_compact: PropTypes.bool.description('Whether to use the compact version of the row'),
   tableRowDetails: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).description('Component for row details'),
   dimsumHeaderValue: PropTypes.string.description('Header displayed on the header variant of the row')
 };
-var rowsPropTypes = PropTypes.shape(rowPropTypes).description('Rows props');
-var DataTableSchema = {
+const rowsPropTypes = PropTypes.shape(rowPropTypes).description('Rows props');
+const DataTableSchema = {
   columns: PropTypes.arrayOf(columnsPropTypes).description('Array of columns').isRequired,
   data: PropTypes.arrayOf(rowsPropTypes).description('Array of rows'),
   height: PropTypes.number.description('Height of the datatable component'),
@@ -64,20 +64,29 @@ var DataTableSchema = {
     })).description('Any extra option you want in the dropdownmenu of the filter bar')
   }).description('Props for the filter bar'),
   onFiltersChange: PropTypes.func.description('Function invoked when filters change'),
-  pagination: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
-    pageIndex: PropTypes.number.description('Index of the current page, starting from 1'),
-    canPreviousPage: PropTypes.bool.description('Whether the previous button is disabled or not'),
-    canNextPage: PropTypes.bool.description('Whether the next button is disabled or not'),
-    pageSize: PropTypes.number.description('The current page size'),
-    perPageOptions: PropTypes.arrayOf(PropTypes.number).description('The available options for page size'),
-    onPageChange: PropTypes.func.description('Function invoked when the page is changed'),
-    onPreviousPage: PropTypes.func.description('Function invoked when the previous button is pressed'),
-    onNextPage: PropTypes.func.description('Function invoked when next button is pressed'),
-    pageCount: PropTypes.number.description('How many pages are there. By default it will be calculated based on the ammount of rows you have'),
+  pagination: PropTypes.shape({
+    pageCount: PropTypes.number.description('How many pages are there'),
+    pageIndex: PropTypes.number.description('Index of the current page, starting from 1').defaultValue(1),
+    canPreviousPage: PropTypes.bool.description('Whether the previous button is disabled or not').defaultValue(true),
+    canNextPage: PropTypes.bool.description('Whether the next button is disabled or not').defaultValue(true),
+    pageSize: PropTypes.number.description('The current page size').defaultValue(10),
     showPerPageSelector: PropTypes.bool.description('Whether to show the page selector').defaultValue(true),
+    perPageOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+      dsId: PropTypes.string,
+      value: PropTypes.number,
+      label: PropTypes.string,
+      type: PropTypes.oneOf(['single'])
+    })])).description('The available options for page size').defaultValue([10]),
+    perPageStep: PropTypes.number.description('Step for the per page options').defaultValue(5),
+    minPerPage: PropTypes.number.description('Step for the per page options').defaultValue(0),
+    maxPerPage: PropTypes.number.description('Step for the per page options').defaultValue(100),
+    onPageSizeChange: PropTypes.func.description('Function invoked when the page size changes').defaultValue(() => null),
+    onPreviousPage: PropTypes.func.description('Function invoked when the previous button is pressed').defaultValue(() => null),
+    onPageChange: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),
+    onNextPage: PropTypes.func.description('Function invoked when next button is pressed').defaultValue(() => null),
     pageDetails: PropTypes.arrayOf(PropTypes.string).description('Details to provide for each page').defaultValue([]),
     pageDetailsTitle: PropTypes.string.description('The title of the details (usually a column of your dataset)').defaultValue('')
-  })]).description('Object containing the data for the pagination'),
+  }).description('Object containing the data for the pagination'),
   colsLayoutStyle: PropTypes.oneOf(['auto', 'fixed']).description('Whether the datatable fills its container or not'),
   hiddenColumns: PropTypes.arrayOf(PropTypes.string).description('IDs of columns not to render'),
   dragAndDropRows: PropTypes.bool.description('Whether to turn on the d&d feature for the rows').defaultValue(false),
@@ -104,4 +113,3 @@ var DataTableSchema = {
 };
 
 export { DataTableSchema };
-//# sourceMappingURL=DataTableSchema.js.map

package/esm/addons/Columns/ColumnAction/ColumnAction.js

@@ -1,22 +1,17 @@
 import { memo } from 'react';
 
-var actionColumn = function actionColumn(renderRowActions) {
-  return {
-    Header: ' ',
-    id: 'rowActions',
-    width: renderRowActions.columnWidth,
-    style: {
-      overflow: 'visible'
-    },
-    // memo typing is broken?
-    Cell: /*#__PURE__*/memo(function (props) {
-      return renderRowActions.renderer(props);
-    }),
-    canResize: false,
-    disableDnD: true,
-    isFocuseable: false
-  };
-};
+const actionColumn = renderRowActions => ({
+  Header: ' ',
+  id: 'rowActions',
+  width: renderRowActions.columnWidth,
+  style: {
+    overflow: 'visible'
+  },
+  // memo typing is broken?
+  Cell: /*#__PURE__*/memo(props => renderRowActions.renderer(props)),
+  canResize: false,
+  disableDnD: true,
+  isFocuseable: false
+});
 
 export { actionColumn };
-//# sourceMappingURL=ColumnAction.js.map

package/esm/addons/Columns/ColumnDragHandle/ColumnDragHandle.js

@@ -1,93 +1,56 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
-import '../../../hooks/useRecoverFocusRow.js';
-export { c as dragHandleColumn } from '../../../styled-f76a0cd1.js';
+import { useRecoverFocusRow } from '../../../hooks/useRecoverFocusRow.js';
+import '../../../parts/TableContent.js';
 import '@elliemae/ds-grid';
 import '@elliemae/ds-circular-progress-indicator';
 import 'styled-components';
-import '../../../parts/EmptyContent.js';
-import '../../../parts/Footer.js';
 import '@elliemae/ds-icons';
-import '../../../helpers/sizeToCss.js';
-import '../../../configs/constants.js';
-import '../../../helpers/cellPadding.js';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import 'react-virtual';
-import '../../../configs/useRowFlattenization.js';
-import '../../../helpers/getIdFromUniqueRowAccessor.js';
-import '@babel/runtime/helpers/esm/toConsumableArray';
-import '@babel/runtime/helpers/esm/defineProperty';
-import '@elliemae/ds-form';
-import '@babel/runtime/helpers/esm/extends';
-import 'react-redux';
-import '../../../DataTableContext.js';
-import '../../Pagination/Pagination.js';
-import '@elliemae/ds-pagination';
-import '@elliemae/ds-indeterminate-progress-indicator';
-import 'prop-types';
-import '../../../helpers/refs-helpers.js';
-import '../../../parts/HoC/SortableItemContext.js';
-import '../../../parts/HoC/withDnDSortableRowContext.js';
-import '@dnd-kit/sortable';
-import '../../../parts/HoC/withConditionalDnDRowContext.js';
-import '@dnd-kit/core';
-import '../../../helpers/dndkit/tree/useTreeDndkitConfig.js';
-import '../../../helpers/dndkit/tree/useTreePreviewHandlers.js';
-import '../../../helpers/dndkit/tree/getTreeKeyboardCoordinates.js';
-import '../../../helpers/dndkit/utilities.js';
-import '../../../helpers/dndkit/tree/useTreeActionHandlers.js';
-import 'lodash';
-import '../../../helpers/dndkit/tree/customCollisionDetection.js';
-import '../../../helpers/dndkit/tree/useTreeAnnouncements.js';
-import '../../../parts/HoC/DragOverlayContext.js';
-import '@elliemae/ds-button';
-import '@elliemae/ds-popperjs';
-import '../../../redux/reducers/index.js';
-import 'redux';
-import '../../../redux/reducers/headersReducers/headersReducers.js';
-import '@reduxjs/toolkit';
-import '../../../redux/reducers/headersReducers/logic.js';
-import '../../../redux/reducers/headersReducers/defaults.js';
-import '../../../redux/reducers/headersReducers/useDispatchHeadersActions.js';
-import '../../../redux/reducers/rowsReducers/rowsReducer.js';
-import '../../../redux/reducers/rowsReducers/logic.js';
-import '../../../redux/reducers/rowsReducers/defaults.js';
-import '../../../redux/reducers/rowsReducers/useDispatchRowsActions.js';
-import '@elliemae/ds-utilities';
-import 'uid';
-import '../../../exported-related/RowVariants.js';
-import '../../../exported-related/Filters/singleSelectFilterFn.js';
-import '../../../exported-related/Filters/multiSelectFilterFn.js';
-import '../../../exported-related/Filters/textFilterFn.js';
-import 'moment';
-import '../../../exported-related/Filters/numberRangeFilterFn.js';
-import '../../../exported-related/Filters/currencyRangeFilterFn.js';
-import '../../../exported-related/FilterTypes.js';
-import '../ColumnAction/ColumnAction.js';
-import '@elliemae/ds-truncated-tooltip-text';
-import '../../../prop-types.js';
-import '../../../parts/Cells/useCellStyle.js';
-import '../../../exported-related/RowRenderer/useRowRendererProperties.js';
-import '../../../exported-related/RowRenderer/useRowStyle.js';
-import '../../../parts/DropIndicator.js';
-import '../../../configs/zIndexInternalConfig.js';
-import '../../../helpers/addCellData.js';
-import '../../../helpers/dndkit/hierarchy/useHierarchyActionHandlers.js';
-import '../../../helpers/dndkit/hierarchy/useHierarchyAnnouncements.js';
-import '../../../parts/SortByCaret.js';
-import '@elliemae/ds-controlled-form';
-import '@elliemae/ds-form-layout-blocks';
-import '@elliemae/ds-grid/';
-import '@elliemae/ds-form/ComboBox';
-import '../../../helpers/columnsToGrid.js';
-import '../../../parts/Headers/useHeaderCellHandlers.js';
-import '../../../parts/Headers/useHeaderCellConfig.js';
-import '../../../hooks/useRecoverFocusCol.js';
-import '../../../parts/Headers/RequiredDot.js';
-import '../../../parts/SortableHeaderCell.js';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import '../../../parts/HoC/withConditionalDnDSortableContext.js';
-import '../../../parts/Headers/EmptyChildrenGroup.js';
-import '../../../configs/fixedSizes.js';
-import '../../../parts/Loader.js';
 import '@elliemae/ds-system';
-//# sourceMappingURL=ColumnDragHandle.js.map
+import '@elliemae/ds-button';
+import '../../../DataTableContext.js';
+import '../../../parts/Row.js';
+import '../../../parts/Footer.js';
+import DragHandle from '../../../parts/DnDHandle.js';
+import { StyledFocusWithin } from '../../../styled.js';
+
+var _div;
+const dragHandleColumn = {
+  // Build our singleSelecter column
+  id: 'dragHandleColumn',
+  // Make sure it has an ID
+  // The header doesn't need anything for single selection
+  Header: () => _div || (_div = /*#__PURE__*/_jsx("div", {})),
+  Cell: _ref2 => {
+    let {
+      row,
+      isRowSelected,
+      cell,
+      isDragOverlay,
+      draggableProps
+    } = _ref2;
+    useRecoverFocusRow(row, cell, isDragOverlay, draggableProps);
+    return /*#__PURE__*/_jsx(StyledFocusWithin, {
+      style: {
+        width: '100%',
+        height: '100%'
+      },
+      hideFocus: draggableProps && draggableProps.isDragging
+    }, void 0, /*#__PURE__*/_jsx(DragHandle, {
+      id: row.uid,
+      isReachable: isRowSelected,
+      innerRef: _ref => {
+        if (!isDragOverlay) cell.ref.current = _ref;
+      },
+      isDragOverlay: isDragOverlay
+    }, row.uid));
+  },
+  textWrap: 'wrap-all',
+  width: 24,
+  padding: 4,
+  canResize: false,
+  disableDnD: true,
+  isFocuseable: false
+};
+
+export { dragHandleColumn };

package/esm/addons/Columns/ColumnExpand/ColumnExpand.js

@@ -1,93 +1,210 @@
-import '@babel/runtime/helpers/esm/defineProperty';
-import 'react';
-import '@elliemae/ds-icons';
-import 'styled-components';
-export { e as expandRowColumn } from '../../../styled-f76a0cd1.js';
-import '../../../configs/constants.js';
-import '@babel/runtime/helpers/esm/slicedToArray';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+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 '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 { StyledFocusWithin } from '../../../styled.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 '@babel/runtime/helpers/esm/toConsumableArray';
+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-grid';
 import '@elliemae/ds-circular-progress-indicator';
-import '../../../parts/EmptyContent.js';
+import '@elliemae/ds-system';
+import '@elliemae/ds-button';
+import '../../../DataTableContext.js';
+import '../../../parts/Row.js';
 import '../../../parts/Footer.js';
-import '@babel/runtime/helpers/esm/extends';
 import '../../../parts/HoC/SortableItemContext.js';
-import '../../../helpers/sizeToCss.js';
-import '../../../helpers/cellPadding.js';
-import 'react-redux';
-import '../../../DataTableContext.js';
-import '../../Pagination/Pagination.js';
-import '@elliemae/ds-pagination';
-import '@elliemae/ds-indeterminate-progress-indicator';
-import 'prop-types';
-import '../../../helpers/refs-helpers.js';
-import '../../../parts/HoC/withDnDSortableRowContext.js';
-import '@dnd-kit/sortable';
-import '../../../parts/HoC/withConditionalDnDRowContext.js';
-import '@dnd-kit/core';
-import '../../../helpers/dndkit/tree/useTreeDndkitConfig.js';
-import '../../../helpers/dndkit/tree/useTreePreviewHandlers.js';
-import '../../../helpers/dndkit/tree/getTreeKeyboardCoordinates.js';
-import '../../../helpers/dndkit/utilities.js';
-import '../../../helpers/dndkit/tree/useTreeActionHandlers.js';
-import 'lodash';
-import '../../../helpers/dndkit/tree/customCollisionDetection.js';
-import '../../../helpers/dndkit/tree/useTreeAnnouncements.js';
-import '../../../parts/HoC/DragOverlayContext.js';
-import '@elliemae/ds-button';
-import '@elliemae/ds-popperjs';
-import '../../../redux/reducers/index.js';
-import 'redux';
-import '../../../redux/reducers/headersReducers/headersReducers.js';
-import '@reduxjs/toolkit';
-import '../../../redux/reducers/headersReducers/logic.js';
-import '../../../redux/reducers/headersReducers/defaults.js';
-import '../../../redux/reducers/headersReducers/useDispatchHeadersActions.js';
-import '../../../redux/reducers/rowsReducers/rowsReducer.js';
-import '../../../redux/reducers/rowsReducers/logic.js';
-import '../../../redux/reducers/rowsReducers/defaults.js';
-import '../../../redux/reducers/rowsReducers/useDispatchRowsActions.js';
-import '@elliemae/ds-utilities';
-import 'uid';
-import '../../../exported-related/RowVariants.js';
-import '../../../exported-related/Filters/singleSelectFilterFn.js';
-import '../../../exported-related/Filters/multiSelectFilterFn.js';
-import '../../../exported-related/Filters/textFilterFn.js';
-import 'moment';
-import '../../../exported-related/Filters/numberRangeFilterFn.js';
-import '../../../exported-related/Filters/currencyRangeFilterFn.js';
-import '../../../exported-related/FilterTypes.js';
-import '../ColumnAction/ColumnAction.js';
-import '../../../hooks/useRecoverFocusRow.js';
-import '@elliemae/ds-truncated-tooltip-text';
-import '../../../prop-types.js';
-import '../../../parts/Cells/useCellStyle.js';
-import '../../../exported-related/RowRenderer/useRowRendererProperties.js';
-import '../../../exported-related/RowRenderer/useRowStyle.js';
-import '../../../parts/DropIndicator.js';
-import '../../../configs/zIndexInternalConfig.js';
-import '../../../helpers/addCellData.js';
-import '../../../helpers/dndkit/hierarchy/useHierarchyActionHandlers.js';
-import '../../../helpers/dndkit/hierarchy/useHierarchyAnnouncements.js';
-import '../../../parts/SortByCaret.js';
-import '@elliemae/ds-controlled-form';
-import '@elliemae/ds-form-layout-blocks';
-import '@elliemae/ds-grid/';
-import '@elliemae/ds-form/ComboBox';
-import '../../../helpers/columnsToGrid.js';
-import '../../../parts/Headers/useHeaderCellHandlers.js';
-import '../../../parts/Headers/useHeaderCellConfig.js';
-import '../../../hooks/useRecoverFocusCol.js';
-import '../../../parts/Headers/RequiredDot.js';
-import '../../../parts/SortableHeaderCell.js';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import '../../../parts/HoC/withConditionalDnDSortableContext.js';
-import '../../../parts/Headers/EmptyChildrenGroup.js';
-import '../../../configs/fixedSizes.js';
-import '../../../parts/Loader.js';
-import '../../../helpers/getIdFromUniqueRowAccessor.js';
-import '@elliemae/ds-system';
-//# sourceMappingURL=ColumnExpand.js.map
+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 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;"]);
+const expandRowColumn = {
+  // Build our expander column
+  id: 'expander',
+  // Make sure it has an ID
+  accessor: 'expandRowColumn',
+  Header: _ref => {
+    let {
+      ctx
+    } = _ref;
+    const {
+      tableProps: {
+        expandedRows,
+        onRowExpand
+      },
+      allDataFlattened
+    } = ctx;
+    const allExpandable = useMemo(() => {
+      const expandable = {};
+      allDataFlattened.forEach(row => {
+        if (row.original.subRows || row.original.tableRowDetails || row.original.dimsumHeaderValue) expandable[row.uid] = true;
+      });
+      return expandable;
+    }, [allDataFlattened]);
+    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');
+    }, [allExpandable, isAllRowsExpanded, onRowExpand]);
+    const GlobalExpandIcon = useMemo(() => {
+      if (isAllRowsExpanded) return /*#__PURE__*/_jsx(ArrowheadDown, {
+        size: "s",
+        color: ['brand-primary', '600'],
+        "data-testid": DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN
+      }); // Mixed
+
+      if (Object.keys(expandedRows).length) {
+        return /*#__PURE__*/_jsx(ArrowheadRight, {
+          size: "s",
+          color: ['brand-primary', '600'],
+          "data-testid": DATA_TESTID.DATA_TABLE_ICON_ARROW_MIXED,
+          style: {
+            transform: 'rotate(45deg)'
+          }
+        });
+      }
+
+      return /*#__PURE__*/_jsx(ArrowheadRight, {
+        size: "s",
+        color: ['brand-primary', '600'],
+        "data-testid": DATA_TESTID.DATA_TABLE_ICON_ARROW_RIGHT
+      });
+    }, [expandedRows, isAllRowsExpanded]);
+    return /*#__PURE__*/_jsx(StyledFocusWithin, {}, void 0, /*#__PURE__*/_jsx(StyledSpan, {
+      role: "button",
+      tabIndex: 0,
+      title: "Toggle All Rows Expanded",
+      onClick: onExpandedAllHandler,
+      onKeyDown: e => {
+        if (['Enter', 'Space'].includes(e.code)) {
+          onExpandedAllHandler();
+          e.preventDefault();
+        }
+      },
+      "data-testid": DATA_TESTID.DATA_TABLE_GLOBAL_EXPAND_CELL,
+      "aria-expanded": isAllRowsExpanded,
+      style: {
+        width: '24px',
+        height: '24px'
+      }
+    }, void 0, GlobalExpandIcon));
+  },
+  Cell: _ref2 => {
+    var _row$original$subRows;
+
+    let {
+      cell,
+      row,
+      isRowSelected,
+      ctx,
+      draggableProps
+    } = _ref2;
+    const {
+      tableProps: {
+        dragAndDropRows,
+        expandedRows,
+        onRowExpand
+      }
+    } = ctx;
+    const uniqueId = row.uid;
+    const isExpanded = expandedRows[uniqueId];
+    const shouldPrintCaret = ((_row$original$subRows = row.original.subRows) === null || _row$original$subRows === void 0 ? void 0 : _row$original$subRows.length) && row.depth === 0 || // only allows 1 level of expands
+    row.original.tableRowDetails || row.original.dimsumHeaderValue;
+    const onRowExpandHandler = useCallback(e => {
+      e.stopPropagation();
+
+      if (expandedRows[uniqueId]) {
+        delete expandedRows[uniqueId];
+      } else {
+        expandedRows[uniqueId] = true;
+      }
+
+      onRowExpand(_objectSpread({}, expandedRows), uniqueId);
+    }, [expandedRows, uniqueId, onRowExpand]);
+    const isDragging = draggableProps ? draggableProps.isDragging : false;
+    const isDragOverlay = dragAndDropRows && !draggableProps;
+    const indentStyle = useMemo(() => ({
+      marginLeft: "".concat(row.depth * 32, "px"),
+      marginRight: '18px',
+      paddingLeft: '2px',
+      paddingRight: '2px',
+      position: 'relative',
+      height: '100%',
+      display: 'flex',
+      alignItems: 'center'
+    }), [row.depth]);
+    const rowProps = useMemo(() => ({
+      role: 'button',
+      key: "".concat(row.uid, "-expand-button"),
+      title: 'Toggle Row Expanded',
+      onClick: onRowExpandHandler,
+      onKeyDown: e => {
+        if (['Enter', 'Space'].includes(e.code)) {
+          e.preventDefault();
+          onRowExpandHandler(e);
+        }
+      },
+      ref: cell.ref,
+      tabIndex: isRowSelected ? 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]);
+    const PureCaretIcon = useMemo(() => isExpanded && !isDragging && !isDragOverlay ? /*#__PURE__*/_jsx(ArrowheadDown, {
+      "data-is-col-expanded": isExpanded,
+      "data-role": "row-expander-col",
+      size: "s",
+      "data-testid": DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN
+    }) : /*#__PURE__*/_jsx(ArrowheadRight, {
+      "data-is-col-expanded": isExpanded,
+      "data-role": "row-expander-col",
+      size: "s",
+      "data-testid": DATA_TESTID.DATA_TABLE_ICON_ARROW_RIGHT
+    }), [isExpanded, isDragging, isDragOverlay]);
+    const ChildIcon = useMemo(() => /*#__PURE__*/_jsx(ArrowShortReturn, {
+      size: "s",
+      "data-testid": DATA_TESTID.DATA_TABLE_ICON_CHILD,
+      style: {
+        transform: 'rotate(90deg) scaleY(-1)'
+      },
+      color: ['brand-primary', '600']
+    }), []);
+    if (shouldPrintCaret) return /*#__PURE__*/_jsx(StyledFocusWithin, {
+      style: indentStyle
+    }, void 0, /*#__PURE__*/jsx(StyledSpan, _objectSpread(_objectSpread({}, rowProps), {}, {
+      children: PureCaretIcon
+    })));
+    if (row.depth !== 0) return /*#__PURE__*/_jsx("span", {
+      style: indentStyle
+    }, void 0, ChildIcon);
+    return /*#__PURE__*/_jsx("div", {
+      style: {
+        width: '36px'
+      }
+    });
+  },
+  textWrap: 'wrap',
+  canResize: false,
+  width: 25,
+  padding: 0,
+  isFocuseable: false,
+  disableDnD: true
+};
+
+export { expandRowColumn };