@elliemae/ds-data-table 1.55.0-next.1 → 1.55.0-next.5

package/cjs/{styled-256fc644.js → styled-e5f7790f.js}

@@ -13,7 +13,6 @@ var reactVirtual = require('react-virtual');
 require('./configs/useRowFlattenization.js');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var ArrowShortReturn = require('@elliemae/ds-icons/ArrowShortReturn');
 var dsIcons = require('@elliemae/ds-icons');
 var DSCheckbox = require('@elliemae/ds-form/Checkbox');
 var DSRadio = require('@elliemae/ds-form/Radio');
@@ -29,12 +28,10 @@ var parts_EmptyContent = require('./parts/EmptyContent.js');
 var helpers_refsHelpers = require('./helpers/refs-helpers.js');
 var parts_HoC_SortableItemContext = require('./parts/HoC/SortableItemContext.js');
 var parts_HoC_withDnDSortableRowContext = require('./parts/HoC/withDnDSortableRowContext.js');
-var reactPopper = require('react-popper');
-var hooks = require('@elliemae/ds-utilities/hooks');
+var dsPopperjs = require('@elliemae/ds-popperjs');
 require('./redux/reducers/index.js');
 var parts_Footer = require('./parts/Footer.js');
 var GripperVertical = require('@elliemae/ds-icons/GripperVertical');
-var redux_reducers_headersReducers_useDispatchHeadersActions = require('./redux/reducers/headersReducers/useDispatchHeadersActions.js');
 require('@elliemae/ds-icons/MoreOptionsVert');
 require('uid');
 var exportedRelated_RowVariants = require('./exported-related/RowVariants.js');
@@ -64,6 +61,7 @@ var helpers_dndkit_hierarchy_useHierarchyAnnouncements = require('./helpers/dndk
 var parts_SortByCaret = require('./parts/SortByCaret.js');
 var DatePickerIcon = require('@elliemae/ds-icons/DatePicker2');
 var dsControlledForm = require('@elliemae/ds-controlled-form');
+var redux_reducers_headersReducers_useDispatchHeadersActions = require('./redux/reducers/headersReducers/useDispatchHeadersActions.js');
 var DSTextBox = require('@elliemae/ds-form/TextBox');
 var SearchIcon = require('@elliemae/ds-icons/SearchXsmall');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
@@ -72,7 +70,7 @@ var helpers_columnsToGrid = require('./helpers/columnsToGrid.js');
 var parts_Headers_useHeaderCellHandlers = require('./parts/Headers/useHeaderCellHandlers.js');
 var parts_Headers_useHeaderCellConfig = require('./parts/Headers/useHeaderCellConfig.js');
 var hooks_useRecoverFocusCol = require('./hooks/useRecoverFocusCol.js');
-var parts_Headers_HeaderCellTitle = require('./parts/Headers/HeaderCellTitle.js');
+var parts_Headers_RequiredDot = require('./parts/Headers/RequiredDot.js');
 var parts_SortableHeaderCell = require('./parts/SortableHeaderCell.js');
 var parts_Headers_EmptyChildrenGroup = require('./parts/Headers/EmptyChildrenGroup.js');
 var parts_Loader = require('./parts/Loader.js');
@@ -88,7 +86,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var ArrowShortReturn__default = /*#__PURE__*/_interopDefaultLegacy(ArrowShortReturn);
 var DSCheckbox__default = /*#__PURE__*/_interopDefaultLegacy(DSCheckbox);
 var DSRadio__default = /*#__PURE__*/_interopDefaultLegacy(DSRadio);
 var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
@@ -103,12 +100,12 @@ var DSTextBox__default = /*#__PURE__*/_interopDefaultLegacy(DSTextBox);
 var SearchIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchIcon);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 
-function ownKeys$b(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 ownKeys$a(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$b(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$b(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$a(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var StyledSpan = /*#__PURE__*/styled__default['default'].span.withConfig({
   componentId: "sc-1xp824d-0"
-})(["cursor:pointer;box-sizing:border-box;outline:none;"]);
+})(["cursor:pointer;box-sizing:border-box;outline:none;display:flex;justify-content:center;align-items:center;"]);
 var expandRowColumn = {
   // Build our expander column
   id: 'expander',
@@ -131,20 +128,32 @@ var expandRowColumn = {
       return Object.keys(allExpandable).length === Object.keys(expandedRows).length;
     }, [allExpandable, expandedRows]);
     var onExpandedAllHandler = React.useCallback(function () {
-      if (isAllRowsExpanded) onRowExpand({}, 'All');else onRowExpand(allExpandable, 'All');
+      if (isAllRowsExpanded) onRowExpand({}, 'All');else onRowExpand(_objectSpread$a({}, allExpandable), 'All');
     }, [allExpandable, isAllRowsExpanded, onRowExpand]);
     var GlobalExpandIcon = React.useMemo(function () {
-      if (isAllRowsExpanded) return /*#__PURE__*/React__default['default'].createElement(dsIcons.CollapseAll, {
-        size: "m",
+      if (isAllRowsExpanded) return /*#__PURE__*/React__default['default'].createElement(dsIcons.ArrowheadDown, {
+        size: "s",
         color: ['brand-primary', '600'],
         "data-testid": configs_constants.DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN
-      });
-      return /*#__PURE__*/React__default['default'].createElement(dsIcons.ExpandAll, {
-        size: "m",
+      }); // Mixed
+
+      if (Object.keys(expandedRows).length) {
+        return /*#__PURE__*/React__default['default'].createElement(dsIcons.ArrowheadRight, {
+          size: "s",
+          color: ['brand-primary', '600'],
+          "data-testid": configs_constants.DATA_TESTID.DATA_TABLE_ICON_ARROW_MIXED,
+          style: {
+            transform: 'rotate(45deg)'
+          }
+        });
+      }
+
+      return /*#__PURE__*/React__default['default'].createElement(dsIcons.ArrowheadRight, {
+        size: "s",
         color: ['brand-primary', '600'],
         "data-testid": configs_constants.DATA_TESTID.DATA_TABLE_ICON_ARROW_RIGHT
       });
-    }, [isAllRowsExpanded]);
+    }, [expandedRows, isAllRowsExpanded]);
     return /*#__PURE__*/React__default['default'].createElement(StyledFocusWithin, null, /*#__PURE__*/React__default['default'].createElement(StyledSpan, {
       role: "button",
       tabIndex: 0,
@@ -158,7 +167,10 @@ var expandRowColumn = {
       },
       "data-testid": configs_constants.DATA_TESTID.DATA_TABLE_GLOBAL_EXPAND_CELL,
       "aria-expanded": isAllRowsExpanded,
-      isRightArrow: !isAllRowsExpanded && Object.keys(expandedRows).length === 0
+      style: {
+        width: '24px',
+        height: '24px'
+      }
     }, GlobalExpandIcon));
   },
   Cell: function Cell(_ref2) {
@@ -186,7 +198,7 @@ var expandRowColumn = {
         expandedRows[uniqueId] = true;
       }
 
-      onRowExpand(_objectSpread$b({}, expandedRows), uniqueId);
+      onRowExpand(_objectSpread$a({}, expandedRows), uniqueId);
     }, [expandedRows, uniqueId, onRowExpand]);
     var isDragging = draggableProps ? draggableProps.isDragging : false;
     var isDragOverlay = dragAndDropRows && !draggableProps;
@@ -194,7 +206,7 @@ var expandRowColumn = {
       return {
         marginLeft: "".concat(row.depth * 32, "px"),
         marginRight: '18px',
-        paddingLeft: '1px',
+        paddingLeft: '2px',
         paddingRight: '2px',
         position: 'relative',
         height: '100%',
@@ -235,7 +247,7 @@ var expandRowColumn = {
       });
     }, [isExpanded, isDragging, isDragOverlay]);
     var ChildIcon = React.useMemo(function () {
-      return /*#__PURE__*/React__default['default'].createElement(ArrowShortReturn__default['default'], {
+      return /*#__PURE__*/React__default['default'].createElement(dsIcons.ArrowShortReturn, {
         size: "s",
         "data-testid": configs_constants.DATA_TESTID.DATA_TABLE_ICON_CHILD,
         style: {
@@ -264,9 +276,9 @@ var expandRowColumn = {
   disableDnD: true
 };
 
-function ownKeys$a(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 ownKeys$9(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$a(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$a(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$9(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var multiSelectColumn = {
   // Build our multiSelecter column
   id: 'multiSelecter',
@@ -340,7 +352,7 @@ var multiSelectColumn = {
         onChange: function onChange(e) {
           var newState = !selectedState;
 
-          var newSelection = _objectSpread$a(_objectSpread$a({}, selection), {}, _defineProperty__default['default']({}, uid, newState)); // we only want true and mixed values
+          var newSelection = _objectSpread$9(_objectSpread$9({}, selection), {}, _defineProperty__default['default']({}, uid, newState)); // we only want true and mixed values
 
 
           if (!newState) delete newSelection[uid]; // if newState is false, remove from the new selection
@@ -529,9 +541,6 @@ var RowLoading = function RowLoading() {
   return PureLoading;
 };
 
-function ownKeys$9(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$9(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$9(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var FilterButton = /*#__PURE__*/styled__default['default'].span.withConfig({
   componentId: "sc-16i88ut-0"
 })(["display:inline-grid;", ""], function (props) {
@@ -541,13 +550,17 @@ var Button = /*#__PURE__*/styled__default['default'](DSButton__default['default'
   componentId: "sc-16i88ut-1"
 })(["position:relative;justify-self:flex-end;"]);
 var FilterPopover = function FilterPopover(_ref2) {
-  _ref2.column;
-      var columnId = _ref2.columnId,
+  var columnId = _ref2.columnId,
       triggerIcon = _ref2.triggerIcon,
       menuContent = _ref2.menuContent,
-      onTriggerClick = _ref2.onTriggerClick,
-      onClickOutsideMenu = _ref2.onClickOutsideMenu,
-      removeWrapperStyles = _ref2.removeWrapperStyles,
+      _ref2$onTriggerClick = _ref2.onTriggerClick,
+      onTriggerClick = _ref2$onTriggerClick === void 0 ? function () {
+    return null;
+  } : _ref2$onTriggerClick,
+      _ref2$onClickOutsideM = _ref2.onClickOutsideMenu,
+      onClickOutsideMenu = _ref2$onClickOutsideM === void 0 ? function () {
+    return null;
+  } : _ref2$onClickOutsideM,
       reduxHeader = _ref2.reduxHeader,
       _innerRef = _ref2.innerRef,
       ariaLabel = _ref2.ariaLabel;
@@ -577,58 +590,11 @@ var FilterPopover = function FilterPopover(_ref2) {
     e.stopPropagation();
   };
 
-  var wrapperStyles = React.useMemo(function () {
-    if (removeWrapperStyles) return {};
-    return {
-      backgroundColor: '#fff',
-      boxShadow: '0 6px 20px 0 rgba(0, 0, 0, 0.24)',
-      minWidth: '100%'
-    };
-  }, [removeWrapperStyles]);
-
   var _useState = React.useState(null),
       _useState2 = _slicedToArray__default['default'](_useState, 2),
       referenceElement = _useState2[0],
       setReferenceElement = _useState2[1];
 
-  var _useState3 = React.useState(null),
-      _useState4 = _slicedToArray__default['default'](_useState3, 2),
-      popperElement = _useState4[0],
-      setPopperElement = _useState4[1]; // We need this ref to correctly call useOnClickOutside
-
-
-  var ref = React.useRef(null);
-  var updatedReferenceElement = React.useCallback(function (newRef) {
-    setPopperElement(newRef);
-    ref.current = newRef;
-  }, [setPopperElement]); // const hasSortingCaret = column && column.canSort && typeof column.isSortedDesc === 'boolean';
-
-  var _usePopper = reactPopper.usePopper(referenceElement, popperElement, {
-    placement: 'bottom-end',
-    modifiers: [{
-      name: 'offset',
-      enabled: true,
-      options: {
-        offset: [3, 4]
-      }
-    }, {
-      name: 'preventOverflow',
-      options: {
-        mainAxis: true,
-        altAxis: true
-      }
-    }]
-  }),
-      styles = _usePopper.styles,
-      attributes = _usePopper.attributes;
-
-  var handleClose = function handleClose(e) {
-    if (referenceElement && !referenceElement.contains(e.target)) {
-      handleClickOutsideMenu(e);
-    }
-  };
-
-  hooks.useOnClickOutside(ref, handleClose);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     // This is here to prevent propagation, and not trigger the sort functionality
     onClick: function onClick(e) {
@@ -670,33 +636,21 @@ var FilterPopover = function FilterPopover(_ref2) {
       _innerRef.current = _ref;
     },
     tabIndex: reduxHeader !== null && reduxHeader !== void 0 && reduxHeader.withTabStops ? 0 : -1
-  })), /*#__PURE__*/React__default['default'].createElement("div", _extends__default['default']({
-    ref: updatedReferenceElement,
-    style: _objectSpread$9(_objectSpread$9({}, styles.popper), wrapperStyles)
-  }, attributes.popper, {
-    "data-testid": configs_constants.DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT
-  }), isMenuOpen && menuContent));
-};
-FilterPopover.propTypes = {
-  columnId: PropTypes__default['default'].string.isRequired,
-  column: PropTypes__default['default'].any.isRequired,
-  triggerIcon: PropTypes__default['default'].element.isRequired,
-  menuContent: PropTypes__default['default'].element,
-  onClickOutsideMenu: PropTypes__default['default'].func,
-  onTriggerClick: PropTypes__default['default'].func,
-  removeWrapperStyles: PropTypes__default['default'].bool,
-  reduxHeader: PropTypes__default['default'].any,
-  innerRef: PropTypes__default['default'].any,
-  ariaLabel: PropTypes__default['default'].string
-};
-FilterPopover.defaultProps = {
-  onClickOutsideMenu: function onClickOutsideMenu() {
-    return null;
-  },
-  onTriggerClick: function onTriggerClick() {
-    return null;
-  },
-  removeWrapperStyles: false
+  })), /*#__PURE__*/React__default['default'].createElement(dsPopperjs.DSPopperJS, {
+    referenceElement: referenceElement,
+    showPopover: isMenuOpen,
+    closeContextMenu: handleClickOutsideMenu,
+    "data-testid": configs_constants.DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT,
+    startPlacementPreference: "bottom-end",
+    customOffset: [4, 4],
+    withoutArrow: true,
+    withoutPortal: true,
+    zIndex: 10
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      backgroundColor: '#fff'
+    }
+  }, menuContent)));
 };
 
 var EditableCell = function EditableCell(props) {
@@ -752,8 +706,15 @@ var EditableCell = function EditableCell(props) {
     onClick: handleCellClick,
     onKeyDown: handleOnKeyDown,
     onBlur: handleOnBlur,
-    shouldDisplayEditIcon: cell.column.alwaysDisplayEditIcon
-  }, !isEditing ? StandardRender : EditableRenderer, !isEditing && /*#__PURE__*/React__default['default'].createElement(StyledPencilIcon, null));
+    shouldDisplayEditIcon: cell.column.alwaysDisplayEditIcon,
+    "aria-describedby": isEditing ? undefined : cell.id
+  }, !isEditing ? StandardRender : EditableRenderer, !isEditing && /*#__PURE__*/React__default['default'].createElement(StyledPencilIcon, null), /*#__PURE__*/React__default['default'].createElement("span", {
+    id: cell.id,
+    style: {
+      display: 'none'
+    },
+    "aria-hidden": "false"
+  }, "Editable cell. To edit the content's of this cell, press the Enter key"));
 };
 EditableCell.propTypes = {
   StandardRender: PropTypes__default['default'].oneOfType([PropTypes__default['default'].func, PropTypes__default['default'].object]).isRequired,
@@ -1008,7 +969,7 @@ var Cells = function Cells(props) {
         var ActionComponent = cell.render;
         jsx = /*#__PURE__*/React__default['default'].createElement(StyledActionCell, {
           role: "cell",
-          key: row.uid + column.id
+          key: cell.id
         }, /*#__PURE__*/React__default['default'].createElement(ActionComponent, {
           row: row,
           cell: cell,
@@ -1027,7 +988,7 @@ var Cells = function Cells(props) {
           isRowSelected: isRowSelected,
           shouldAddExpandCell: isUserCell && shouldAddExpandCell,
           isDragOverlay: isDragOverlay,
-          key: row.uid + column.id
+          key: cell.id
         });
       } // Drag overlay only need to print the DnD handle and the first user's cell
 
@@ -1100,7 +1061,9 @@ var DefaultRowContentRenderer = function DefaultRowContentRenderer(props) {
   var isDragging = draggableProps && draggableProps.isDragging;
   React.useLayoutEffect(function () {
     if (row.uid === focusedRowId) {
-      rowRef.current.focus();
+      rowRef.current.focus({
+        preventScroll: true
+      });
     }
   }, [focusedRowId, row.uid]);
   var gridTemplateColProps = React.useMemo(function () {
@@ -1225,7 +1188,8 @@ var RowRenderer = function RowRenderer(props) {
   }),
       handleItemClick = _useRowRendererHandle.handleItemClick,
       handleKeyDown = _useRowRendererHandle.handleKeyDown,
-      handleOnBlur = _useRowRendererHandle.handleOnBlur;
+      handleOnBlur = _useRowRendererHandle.handleOnBlur,
+      handleOnFocus = _useRowRendererHandle.handleOnFocus;
 
   var rowContentProps = _objectSpread$7(_objectSpread$7({}, props), {}, {
     ctx: ctx,
@@ -1245,6 +1209,7 @@ var RowRenderer = function RowRenderer(props) {
     onClick: handleItemClick,
     onKeyDown: handleKeyDown,
     onBlur: handleOnBlur,
+    onFocus: handleOnFocus,
     "data-expandable": Boolean(row.original.tableRowDetails),
     "data-is-row-expanded": row.isExpanded,
     rows: rowsLayout,
@@ -2551,6 +2516,37 @@ var HeaderResizer = function HeaderResizer(_ref) {
   });
 };
 
+/* eslint-disable react/prop-types */
+
+var StringTitle = function StringTitle(_ref) {
+  var column = _ref.column,
+      textWrap = _ref.textWrap;
+  return (column.textWrap || textWrap) === 'truncate' ? /*#__PURE__*/React__default['default'].createElement(dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
+    value: column.Header
+  }) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, column.Header);
+};
+
+var HeaderCellTitle = function HeaderCellTitle(_ref2) {
+  var column = _ref2.column,
+      ctx = _ref2.ctx,
+      draggableProps = _ref2.draggableProps,
+      textWrap = _ref2.textWrap;
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center'
+    },
+    "data-testid": configs_constants.DATA_TESTID.DATA_TABLE_HEADER_CELL_TITLE
+  }, typeof column.Header === 'string' ? /*#__PURE__*/React__default['default'].createElement(StringTitle, {
+    column: column,
+    textWrap: textWrap
+  }) : /*#__PURE__*/React__default['default'].createElement(column.Header, {
+    column: column,
+    ctx: ctx,
+    draggableProps: draggableProps
+  }), column.required && /*#__PURE__*/React__default['default'].createElement(parts_Headers_RequiredDot.RequiredDot, null));
+};
+
 var buildScreenReaderInstructions = function buildScreenReaderInstructions(colSpan, draggable, filterable, sortable) {
   var preffix = colSpan === 1 ? '' : 'Column Group. ';
   if (!draggable && !filterable && !sortable) return preffix;
@@ -2673,7 +2669,7 @@ var HeaderCellComp = function HeaderCellComp(props) {
   }), /*#__PURE__*/React__default['default'].createElement(Grid__default['default'], {
     width: "100%",
     cols: hCols
-  }, shouldShowDnD && DnDHandleComponent, /*#__PURE__*/React__default['default'].createElement(parts_Headers_HeaderCellTitle.HeaderCellTitle, {
+  }, shouldShowDnD && DnDHandleComponent, /*#__PURE__*/React__default['default'].createElement(HeaderCellTitle, {
     column: column,
     ctx: ctx,
     draggableProps: draggableProps,
@@ -3279,6 +3275,7 @@ exports.GroupHeaderContainer = GroupHeaderContainer;
 exports.GroupHeaderTitle = GroupHeaderTitle;
 exports.HeaderCell = HeaderCell;
 exports.HeaderCellGroup = HeaderCellGroup;
+exports.HeaderCellTitle = HeaderCellTitle;
 exports.HeaderResizer = HeaderResizer;
 exports.Headers = Headers;
 exports.INTERNAL_COLUMNS = INTERNAL_COLUMNS;
@@ -3336,4 +3333,4 @@ exports.useHierarchyPreviewHandlers = useHierarchyPreviewHandlers;
 exports.useSelectFilterHandlers = useSelectFilterHandlers;
 exports.withConditionalDnDColumnContext = withConditionalDnDColumnContext;
 exports.withDnDSortableColumnContext = withDnDSortableColumnContext;
-//# sourceMappingURL=styled-256fc644.js.map
+//# sourceMappingURL=styled-e5f7790f.js.map