text: define(["require", "exports", "tslib", "react", "../../Utilities", "./DetailsList.types", "../../FocusZone", "../../Icon", "../../Layer", "../GroupedList/GroupSpacer", "../../GroupedList", "./DetailsRowCheck", "../../utilities/selection/interfaces", "../../utilities/dragdrop/index", "../../components/DetailsList/DetailsColumn", "./DetailsHeader.types"], function (require, exports, tslib_1, React, Utilities_1, DetailsList_types_1, FocusZone_1, Icon_1, Layer_1, GroupSpacer_1, GroupedList_1, DetailsRowCheck_1, interfaces_1, index_1, DetailsColumn_1, DetailsHeader_types_1) {
      "use strict";
      Object.defineProperty(exports, "__esModule", { value: true });
      var getClassNames = Utilities_1.classNamesFunction();
      var MOUSEDOWN_PRIMARY_BUTTON = 0; // for mouse down event we are using ev.button property, 0 means left button
      var MOUSEMOVE_PRIMARY_BUTTON = 1; // for mouse move event we are using ev.buttons property, 1 means left button
      var NO_COLUMNS = [];
      var DetailsHeaderBase = /** @class */ (function (_super) {
          tslib_1.__extends(DetailsHeaderBase, _super);
          function DetailsHeaderBase(props) {
              var _this = _super.call(this, props) || this;
              _this._rootElement = React.createRef();
              _this._rootComponent = React.createRef();
              _this._draggedColumnIndex = -1;
              _this._dropHintDetails = {};
              _this._updateDroppingState = function (newValue, event) {
                  if (_this._draggedColumnIndex >= 0 && event.type !== 'drop' && !newValue) {
                      _this._resetDropHints();
                  }
              };
              _this._onDragOver = function (item, event) {
                  if (_this._draggedColumnIndex >= 0) {
                      event.stopPropagation();
                      _this._computeDropHintToBeShown(event.clientX);
                  }
              };
              _this._onDrop = function (item, event) {
                  // Safe to assume this is defined since we're handling a drop event
                  var columnReorderProps = _this._getColumnReorderProps();
                  // Target index will not get changed if draggeditem is after target item.
                  if (_this._draggedColumnIndex >= 0 && event) {
                      var targetIndex = _this._draggedColumnIndex > _this._currentDropHintIndex
                          ? _this._currentDropHintIndex
                          : _this._currentDropHintIndex - 1;
                      var isValidDrop = _this._isValidCurrentDropHintIndex();
                      event.stopPropagation();
                      if (isValidDrop) {
                          _this._onDropIndexInfo.sourceIndex = _this._draggedColumnIndex;
                          _this._onDropIndexInfo.targetIndex = targetIndex;
                          if (columnReorderProps.onColumnDrop) {
                              var dragDropDetails = {
                                  draggedIndex: _this._draggedColumnIndex,
                                  targetIndex: targetIndex,
                              };
                              columnReorderProps.onColumnDrop(dragDropDetails);
                              /* eslint-disable deprecation/deprecation */
                          }
                          else if (columnReorderProps.handleColumnReorder) {
                              columnReorderProps.handleColumnReorder(_this._draggedColumnIndex, targetIndex);
                              /* eslint-enable deprecation/deprecation */
                          }
                      }
                  }
                  _this._resetDropHints();
                  _this._dropHintDetails = {};
                  _this._draggedColumnIndex = -1;
              };
              _this._updateDragInfo = function (props, event) {
                  // Safe to assume this is defined since we're handling a drag event
                  var columnReorderProps = _this._getColumnReorderProps();
                  var itemIndex = props.itemIndex;
                  if (itemIndex >= 0) {
                      // Column index is set based on the checkbox
                      _this._draggedColumnIndex = _this._isCheckboxColumnHidden() ? itemIndex - 1 : itemIndex - 2;
                      _this._getDropHintPositions();
                      if (columnReorderProps.onColumnDragStart) {
                          columnReorderProps.onColumnDragStart(true);
                      }
                  }
                  else if (event && _this._draggedColumnIndex >= 0) {
                      _this._resetDropHints();
                      _this._draggedColumnIndex = -1;
                      _this._dropHintDetails = {};
                      if (columnReorderProps.onColumnDragEnd) {
                          var columnDragEndLocation = _this._isEventOnHeader(event);
                          columnReorderProps.onColumnDragEnd({ dropLocation: columnDragEndLocation }, event);
                      }
                  }
              };
              _this._getDropHintPositions = function () {
                  var _a = _this.props.columns, columns = _a === void 0 ? NO_COLUMNS : _a;
                  // Safe to assume this is defined since we're handling a drag/drop event
                  var columnReorderProps = _this._getColumnReorderProps();
                  var prevX = 0;
                  var prevMid = 0;
                  var prevRef;
                  var frozenColumnCountFromStart = columnReorderProps.frozenColumnCountFromStart || 0;
                  var frozenColumnCountFromEnd = columnReorderProps.frozenColumnCountFromEnd || 0;
                  for (var i = frozenColumnCountFromStart; i < columns.length - frozenColumnCountFromEnd + 1; i++) {
                      if (_this._rootElement.current) {
                          var dropHintElement = _this._rootElement.current.querySelectorAll('#columnDropHint_' + i)[0];
                          if (dropHintElement) {
                              if (i === frozenColumnCountFromStart) {
                                  prevX = dropHintElement.offsetLeft;
                                  prevMid = dropHintElement.offsetLeft;
                                  prevRef = dropHintElement;
                              }
                              else {
                                  var newMid = (dropHintElement.offsetLeft + prevX) / 2;
                                  _this._dropHintDetails[i - 1] = {
                                      originX: prevX,
                                      startX: prevMid,
                                      endX: newMid,
                                      dropHintElementRef: prevRef,
                                  };
                                  prevMid = newMid;
                                  prevRef = dropHintElement;
                                  prevX = dropHintElement.offsetLeft;
                                  if (i === columns.length - frozenColumnCountFromEnd) {
                                      _this._dropHintDetails[i] = {
                                          originX: prevX,
                                          startX: prevMid,
                                          endX: dropHintElement.offsetLeft,
                                          dropHintElementRef: prevRef,
                                      };
                                  }
                              }
                          }
                      }
                  }
              };
              /**
               * Based on the given cursor position, finds the nearest drop hint and updates the state to make it visible
               */
              _this._computeDropHintToBeShown = function (clientX) {
                  var isRtl = Utilities_1.getRTL(_this.props.theme);
                  if (_this._rootElement.current) {
                      var clientRect = _this._rootElement.current.getBoundingClientRect();
                      var headerOriginX = clientRect.left;
                      var eventXRelativePosition = clientX - headerOriginX;
                      var currentDropHintIndex = _this._currentDropHintIndex;
                      if (_this._isValidCurrentDropHintIndex()) {
                          if (_liesBetween(isRtl, eventXRelativePosition, _this._dropHintDetails[currentDropHintIndex].startX, _this._dropHintDetails[currentDropHintIndex].endX)) {
                              return;
                          }
                      }
                      var _a = _this.props.columns, columns = _a === void 0 ? NO_COLUMNS : _a;
                      // Safe to assume this is defined since we're handling a drag/drop event
                      var columnReorderProps = _this._getColumnReorderProps();
                      var frozenColumnCountFromStart = columnReorderProps.frozenColumnCountFromStart || 0;
                      var frozenColumnCountFromEnd = columnReorderProps.frozenColumnCountFromEnd || 0;
                      var currentIndex = frozenColumnCountFromStart;
                      var lastValidColumn = columns.length - frozenColumnCountFromEnd;
                      var indexToUpdate = -1;
                      if (_isBefore(isRtl, eventXRelativePosition, _this._dropHintDetails[currentIndex].endX)) {
                          indexToUpdate = currentIndex;
                      }
                      else if (_isAfter(isRtl, eventXRelativePosition, _this._dropHintDetails[lastValidColumn].startX)) {
                          indexToUpdate = lastValidColumn;
                      }
                      else if (_this._isValidCurrentDropHintIndex()) {
                          if (_this._dropHintDetails[currentDropHintIndex + 1] &&
                              _liesBetween(isRtl, eventXRelativePosition, _this._dropHintDetails[currentDropHintIndex + 1].startX, _this._dropHintDetails[currentDropHintIndex + 1].endX)) {
                              indexToUpdate = currentDropHintIndex + 1;
                          }
                          else if (_this._dropHintDetails[currentDropHintIndex - 1] &&
                              _liesBetween(isRtl, eventXRelativePosition, _this._dropHintDetails[currentDropHintIndex - 1].startX, _this._dropHintDetails[currentDropHintIndex - 1].endX)) {
                              indexToUpdate = currentDropHintIndex - 1;
                          }
                      }
                      if (indexToUpdate === -1) {
                          var startIndex = frozenColumnCountFromStart;
                          var endIndex = lastValidColumn;
                          while (startIndex < endIndex) {
                              var middleIndex = Math.ceil((endIndex + startIndex) / 2);
                              if (_liesBetween(isRtl, eventXRelativePosition, _this._dropHintDetails[middleIndex].startX, _this._dropHintDetails[middleIndex].endX)) {
                                  indexToUpdate = middleIndex;
                                  break;
                              }
                              else if (_isBefore(isRtl, eventXRelativePosition, _this._dropHintDetails[middleIndex].originX)) {
                                  endIndex = middleIndex;
                              }
                              else if (_isAfter(isRtl, eventXRelativePosition, _this._dropHintDetails[middleIndex].originX)) {
                                  startIndex = middleIndex;
                              }
                          }
                      }
                      if (indexToUpdate === _this._draggedColumnIndex || indexToUpdate === _this._draggedColumnIndex + 1) {
                          if (_this._isValidCurrentDropHintIndex()) {
                              _this._resetDropHints();
                          }
                      }
                      else if (currentDropHintIndex !== indexToUpdate && indexToUpdate >= 0) {
                          _this._resetDropHints();
                          _this._updateDropHintElement(_this._dropHintDetails[indexToUpdate].dropHintElementRef, 'inline-block');
                          _this._currentDropHintIndex = indexToUpdate;
                      }
                  }
              };
              _this._renderColumnSizer = function (_a) {
                  var _b;
                  var columnIndex = _a.columnIndex;
                  var _c = _this.props.columns, columns = _c === void 0 ? NO_COLUMNS : _c;
                  var column = columns[columnIndex];
                  var columnResizeDetails = _this.state.columnResizeDetails;
                  var classNames = _this._classNames;
                  return column.isResizable ? (React.createElement("div", { key: column.key + "_sizer", "aria-hidden": true, role: "button", "data-is-focusable": false, onClick: _stopPropagation, "data-sizer-index": columnIndex, onBlur: _this._onSizerBlur, className: Utilities_1.css(classNames.cellSizer, columnIndex < columns.length - 1 ? classNames.cellSizerStart : classNames.cellSizerEnd, (_b = {},
                          _b[classNames.cellIsResizing] = columnResizeDetails && columnResizeDetails.columnIndex === columnIndex,
                          _b)), onDoubleClick: _this._onSizerDoubleClick.bind(_this, columnIndex) })) : null;
              };
              _this._onRenderColumnHeaderTooltip = function (tooltipHostProps) {
                  return React.createElement("span", { className: tooltipHostProps.hostClassName }, tooltipHostProps.children);
              };
              /**
               * Called when the select all toggle is clicked.
               */
              _this._onSelectAllClicked = function () {
                  var selection = _this.props.selection;
                  if (selection) {
                      selection.toggleAllSelected();
                  }
              };
              _this._onRootMouseDown = function (ev) {
                  var columnIndexAttr = ev.target.getAttribute('data-sizer-index');
                  var columnIndex = Number(columnIndexAttr);
                  var _a = _this.props.columns, columns = _a === void 0 ? NO_COLUMNS : _a;
                  if (columnIndexAttr === null || ev.button !== MOUSEDOWN_PRIMARY_BUTTON) {
                      // Ignore anything except the primary button.
                      return;
                  }
                  _this.setState({
                      columnResizeDetails: {
                          columnIndex: columnIndex,
                          columnMinWidth: columns[columnIndex].calculatedWidth,
                          originX: ev.clientX,
                      },
                  });
                  ev.preventDefault();
                  ev.stopPropagation();
              };
              _this._onRootMouseMove = function (ev) {
                  var _a = _this.state, columnResizeDetails = _a.columnResizeDetails, isSizing = _a.isSizing;
                  if (columnResizeDetails && !isSizing && ev.clientX !== columnResizeDetails.originX) {
                      _this.setState({ isSizing: true });
                  }
              };
              _this._onRootKeyDown = function (ev) {
                  var _a = _this.state, columnResizeDetails = _a.columnResizeDetails, isSizing = _a.isSizing;
                  var _b = _this.props, _c = _b.columns, columns = _c === void 0 ? NO_COLUMNS : _c, onColumnResized = _b.onColumnResized;
                  var columnIndexAttr = ev.target.getAttribute('data-sizer-index');
                  if (!columnIndexAttr || isSizing) {
                      return;
                  }
                  var columnIndex = Number(columnIndexAttr);
                  if (!columnResizeDetails) {
                      // eslint-disable-next-line deprecation/deprecation
                      if (ev.which === Utilities_1.KeyCodes.enter) {
                          _this.setState({
                              columnResizeDetails: {
                                  columnIndex: columnIndex,
                                  columnMinWidth: columns[columnIndex].calculatedWidth,
                              },
                          });
                          ev.preventDefault();
                          ev.stopPropagation();
                      }
                  }
                  else {
                      var increment = void 0;
                      // eslint-disable-next-line deprecation/deprecation
                      if (ev.which === Utilities_1.KeyCodes.enter) {
                          _this.setState({
                              columnResizeDetails: undefined,
                          });
                          ev.preventDefault();
                          ev.stopPropagation();
                          // eslint-disable-next-line deprecation/deprecation
                      }
                      else if (ev.which === Utilities_1.KeyCodes.left) {
                          increment = Utilities_1.getRTL(_this.props.theme) ? 1 : -1;
                          // eslint-disable-next-line deprecation/deprecation
                      }
                      else if (ev.which === Utilities_1.KeyCodes.right) {
                          increment = Utilities_1.getRTL(_this.props.theme) ? -1 : 1;
                      }
                      if (increment) {
                          if (!ev.shiftKey) {
                              increment *= 10;
                          }
                          _this.setState({
                              columnResizeDetails: tslib_1.__assign(tslib_1.__assign({}, columnResizeDetails), { columnMinWidth: columnResizeDetails.columnMinWidth + increment }),
                          });
                          if (onColumnResized) {
                              onColumnResized(columns[columnIndex], columnResizeDetails.columnMinWidth + increment, columnIndex);
                          }
                          ev.preventDefault();
                          ev.stopPropagation();
                      }
                  }
              };
              /**
               * mouse move event handler in the header
               * it will set isSizing state to true when user clicked on the sizer and move the mouse.
               *
               * @param ev - mouse move event
               */
              _this._onSizerMouseMove = function (ev) {
                  var 
                  // use buttons property here since ev.button in some edge case is not upding well during the move.
                  // but firefox doesn't support it, so we set the default value when it is not defined.
                  buttons = ev.buttons;
                  var _a = _this.props, onColumnIsSizingChanged = _a.onColumnIsSizingChanged, onColumnResized = _a.onColumnResized, _b = _a.columns, columns = _b === void 0 ? NO_COLUMNS : _b;
                  var columnResizeDetails = _this.state.columnResizeDetails;
                  if (buttons !== undefined && buttons !== MOUSEMOVE_PRIMARY_BUTTON) {
                      // cancel mouse down event and return early when the primary button is not pressed
                      _this._onSizerMouseUp(ev);
                      return;
                  }
                  if (ev.clientX !== columnResizeDetails.originX) {
                      if (onColumnIsSizingChanged) {
                          onColumnIsSizingChanged(columns[columnResizeDetails.columnIndex], true);
                      }
                  }
                  if (onColumnResized) {
                      var movement = ev.clientX - columnResizeDetails.originX;
                      if (Utilities_1.getRTL(_this.props.theme)) {
                          movement = -movement;
                      }
                      onColumnResized(columns[columnResizeDetails.columnIndex], columnResizeDetails.columnMinWidth + movement, columnResizeDetails.columnIndex);
                  }
              };
              _this._onSizerBlur = function (ev) {
                  var columnResizeDetails = _this.state.columnResizeDetails;
                  if (columnResizeDetails) {
                      _this.setState({
                          columnResizeDetails: undefined,
                          isSizing: false,
                      });
                  }
              };
              /**
               * mouse up event handler in the header
               * clear the resize related state.
               * This is to ensure we can catch double click event
               *
               * @param ev - mouse up event
               */
              _this._onSizerMouseUp = function (ev) {
                  var _a = _this.props, _b = _a.columns, columns = _b === void 0 ? NO_COLUMNS : _b, onColumnIsSizingChanged = _a.onColumnIsSizingChanged;
                  var columnResizeDetails = _this.state.columnResizeDetails;
                  _this.setState({
                      columnResizeDetails: undefined,
                      isSizing: false,
                  });
                  if (onColumnIsSizingChanged) {
                      onColumnIsSizingChanged(columns[columnResizeDetails.columnIndex], false);
                  }
              };
              _this._onToggleCollapseAll = function () {
                  var onToggleCollapseAll = _this.props.onToggleCollapseAll;
                  var newCollapsed = !_this.state.isAllCollapsed;
                  _this.setState({
                      isAllCollapsed: newCollapsed,
                  });
                  if (onToggleCollapseAll) {
                      onToggleCollapseAll(newCollapsed);
                  }
              };
              Utilities_1.initializeComponentRef(_this);
              _this._events = new Utilities_1.EventGroup(_this);
              _this.state = {
                  columnResizeDetails: undefined,
                  isAllCollapsed: _this.props.isAllCollapsed,
                  isAllSelected: !!_this.props.selection && _this.props.selection.isAllSelected(),
              };
              _this._onDropIndexInfo = {
                  sourceIndex: -1,
                  targetIndex: -1,
              };
              _this._id = Utilities_1.getId('header');
              _this._currentDropHintIndex = -1;
              // The drag drop handler won't do any work until subscribe() is called,
              // so always set it up for convenience
              _this._dragDropHelper = new index_1.DragDropHelper({
                  selection: {
                      getSelection: function () {
                          return;
                      },
                  },
                  minimumPixelsForDrag: _this.props.minimumPixelsForDrag,
              });
              return _this;
          }
          DetailsHeaderBase.prototype.componentDidMount = function () {
              var selection = this.props.selection;
              this._events.on(selection, interfaces_1.SELECTION_CHANGE, this._onSelectionChanged);
              // this._rootElement.current will be null in tests using react-test-renderer
              if (this._rootElement.current) {
                  // We need to use native on this to prevent MarqueeSelection from handling the event before us.
                  this._events.on(this._rootElement.current, 'mousedown', this._onRootMouseDown);
                  this._events.on(this._rootElement.current, 'keydown', this._onRootKeyDown);
                  if (this._getColumnReorderProps()) {
                      this._subscriptionObject = this._dragDropHelper.subscribe(this._rootElement.current, this._events, this._getHeaderDragDropOptions());
                  }
              }
          };
          DetailsHeaderBase.prototype.componentDidUpdate = function (prevProps) {
              if (this._getColumnReorderProps()) {
                  if (!this._subscriptionObject && this._rootElement.current) {
                      this._subscriptionObject = this._dragDropHelper.subscribe(this._rootElement.current, this._events, this._getHeaderDragDropOptions());
                  }
              }
              else if (this._subscriptionObject) {
                  this._subscriptionObject.dispose();
                  delete this._subscriptionObject;
              }
              if (this.props !== prevProps && this._onDropIndexInfo.sourceIndex >= 0 && this._onDropIndexInfo.targetIndex >= 0) {
                  var _a = prevProps.columns, previousColumns = _a === void 0 ? NO_COLUMNS : _a;
                  var _b = this.props.columns, columns = _b === void 0 ? NO_COLUMNS : _b;
                  if (previousColumns[this._onDropIndexInfo.sourceIndex].key === columns[this._onDropIndexInfo.targetIndex].key) {
                      this._onDropIndexInfo = {
                          sourceIndex: -1,
                          targetIndex: -1,
                      };
                  }
              }
              if (this.props.isAllCollapsed !== prevProps.isAllCollapsed) {
                  this.setState({ isAllCollapsed: this.props.isAllCollapsed });
              }
          };
          DetailsHeaderBase.prototype.componentWillUnmount = function () {
              if (this._subscriptionObject) {
                  this._subscriptionObject.dispose();
                  delete this._subscriptionObject;
              }
              this._dragDropHelper.dispose();
              this._events.dispose();
          };
          DetailsHeaderBase.prototype.render = function () {
              var _this = this;
              var _a = this.props, _b = _a.columns, columns = _b === void 0 ? NO_COLUMNS : _b, ariaLabel = _a.ariaLabel, ariaLabelForToggleAllGroupsButton = _a.ariaLabelForToggleAllGroupsButton, ariaLabelForSelectAllCheckbox = _a.ariaLabelForSelectAllCheckbox, selectAllVisibility = _a.selectAllVisibility, ariaLabelForSelectionColumn = _a.ariaLabelForSelectionColumn, indentWidth = _a.indentWidth, onColumnClick = _a.onColumnClick, onColumnContextMenu = _a.onColumnContextMenu, _c = _a.onRenderColumnHeaderTooltip, onRenderColumnHeaderTooltip = _c === void 0 ? this._onRenderColumnHeaderTooltip : _c, styles = _a.styles, selectionMode = _a.selectionMode, theme = _a.theme, onRenderDetailsCheckbox = _a.onRenderDetailsCheckbox, groupNestingDepth = _a.groupNestingDepth, useFastIcons = _a.useFastIcons, checkboxVisibility = _a.checkboxVisibility, className = _a.className;
              var _d = this.state, isAllSelected = _d.isAllSelected, columnResizeDetails = _d.columnResizeDetails, isSizing = _d.isSizing, isAllCollapsed = _d.isAllCollapsed;
              var showCheckbox = selectAllVisibility !== DetailsHeader_types_1.SelectAllVisibility.none;
              var isCheckboxHidden = selectAllVisibility === DetailsHeader_types_1.SelectAllVisibility.hidden;
              var isCheckboxAlwaysVisible = checkboxVisibility === DetailsList_types_1.CheckboxVisibility.always;
              var columnReorderProps = this._getColumnReorderProps();
              var frozenColumnCountFromStart = columnReorderProps && columnReorderProps.frozenColumnCountFromStart
                  ? columnReorderProps.frozenColumnCountFromStart
                  : 0;
              var frozenColumnCountFromEnd = columnReorderProps && columnReorderProps.frozenColumnCountFromEnd
                  ? columnReorderProps.frozenColumnCountFromEnd
                  : 0;
              this._classNames = getClassNames(styles, {
                  theme: theme,
                  isAllSelected: isAllSelected,
                  isSelectAllHidden: selectAllVisibility === DetailsHeader_types_1.SelectAllVisibility.hidden,
                  isResizingColumn: !!columnResizeDetails && isSizing,
                  isSizing: isSizing,
                  isAllCollapsed: isAllCollapsed,
                  isCheckboxHidden: isCheckboxHidden,
                  className: className,
              });
              var classNames = this._classNames;
              var IconComponent = useFastIcons ? Icon_1.FontIcon : Icon_1.Icon;
              var isRTL = Utilities_1.getRTL(theme);
              return (React.createElement(FocusZone_1.FocusZone, { role: "row", "aria-label": ariaLabel, className: classNames.root, componentRef: this._rootComponent, elementRef: this._rootElement, onMouseMove: this._onRootMouseMove, "data-automationid": "DetailsHeader", direction: FocusZone_1.FocusZoneDirection.horizontal },
                  showCheckbox
                      ? [
                          React.createElement("div", { key: "__checkbox", className: classNames.cellIsCheck, "aria-labelledby": this._id + "-check", onClick: !isCheckboxHidden ? this._onSelectAllClicked : undefined, "aria-colindex": 1, role: 'columnheader' }, onRenderColumnHeaderTooltip({
                              hostClassName: classNames.checkTooltip,
                              id: this._id + "-checkTooltip",
                              setAriaDescribedBy: false,
                              content: ariaLabelForSelectAllCheckbox,
                              children: (React.createElement(DetailsRowCheck_1.DetailsRowCheck, { id: this._id + "-check", "aria-label": selectionMode === interfaces_1.SelectionMode.multiple
                                      ? ariaLabelForSelectAllCheckbox
                                      : ariaLabelForSelectionColumn, "aria-describedby": !isCheckboxHidden
                                      ? ariaLabelForSelectAllCheckbox && !this.props.onRenderColumnHeaderTooltip
                                          ? this._id + "-checkTooltip"
                                          : undefined
                                      : ariaLabelForSelectionColumn && !this.props.onRenderColumnHeaderTooltip
                                          ? this._id + "-checkTooltip"
                                          : undefined, "data-is-focusable": !isCheckboxHidden || undefined, isHeader: true, selected: isAllSelected, anySelected: false, canSelect: !isCheckboxHidden, className: classNames.check, onRenderDetailsCheckbox: onRenderDetailsCheckbox, useFastIcons: useFastIcons, isVisible: isCheckboxAlwaysVisible })),
                          }, this._onRenderColumnHeaderTooltip)),
                          !this.props.onRenderColumnHeaderTooltip ? (ariaLabelForSelectAllCheckbox && !isCheckboxHidden ? (React.createElement("label", { key: "__checkboxLabel", id: this._id + "-checkTooltip", className: classNames.accessibleLabel, "aria-hidden": true }, ariaLabelForSelectAllCheckbox)) : ariaLabelForSelectionColumn && isCheckboxHidden ? (React.createElement("label", { key: "__checkboxLabel", id: this._id + "-checkTooltip", className: classNames.accessibleLabel, "aria-hidden": true }, ariaLabelForSelectionColumn)) : null) : null,
                      ]
                      : null,
                  groupNestingDepth > 0 && this.props.collapseAllVisibility === GroupedList_1.CollapseAllVisibility.visible ? (React.createElement("div", { className: classNames.cellIsGroupExpander, onClick: this._onToggleCollapseAll, "data-is-focusable": true, "aria-label": ariaLabelForToggleAllGroupsButton, "aria-expanded": !isAllCollapsed, role: "columnheader" },
                      React.createElement(IconComponent, { className: classNames.collapseButton, iconName: isRTL ? 'ChevronLeftMed' : 'ChevronRightMed' }))) : null,
                  React.createElement(GroupSpacer_1.GroupSpacer, { indentWidth: indentWidth, role: "gridcell", count: groupNestingDepth - 1 }),
                  columns.map(function (column, columnIndex) {
                      var _isDraggable = columnReorderProps
                          ? columnIndex >= frozenColumnCountFromStart && columnIndex < columns.length - frozenColumnCountFromEnd
                          : false;
                      return [
                          columnReorderProps &&
                              (_isDraggable || columnIndex === columns.length - frozenColumnCountFromEnd) &&
                              _this._renderDropHint(columnIndex),
                          React.createElement(DetailsColumn_1.DetailsColumn, { column: column, styles: column.styles, key: column.key, columnIndex: (showCheckbox ? 2 : 1) + columnIndex, parentId: _this._id, isDraggable: _isDraggable, updateDragInfo: _this._updateDragInfo, dragDropHelper: _this._dragDropHelper, onColumnClick: onColumnClick, onColumnContextMenu: onColumnContextMenu, 
                              // Do not render tooltips by default, but allow for override via props.
                              onRenderColumnHeaderTooltip: _this.props.onRenderColumnHeaderTooltip, isDropped: _this._onDropIndexInfo.targetIndex === columnIndex, cellStyleProps: _this.props.cellStyleProps, useFastIcons: useFastIcons }),
                          _this._renderColumnDivider(columnIndex),
                      ];
                  }),
                  columnReorderProps && frozenColumnCountFromEnd === 0 && this._renderDropHint(columns.length),
                  isSizing && (React.createElement(Layer_1.Layer, null,
                      React.createElement("div", { className: classNames.sizingOverlay, onMouseMove: this._onSizerMouseMove, onMouseUp: this._onSizerMouseUp })))));
          };
          /** Set focus to the active thing in the focus area. */
          DetailsHeaderBase.prototype.focus = function () {
              var _a;
              return !!((_a = this._rootComponent.current) === null || _a === void 0 ? void 0 : _a.focus());
          };
          /**
           * Gets column reorder props from this.props. If the calling code is part of setting up or
           * handling drag/drop events, it's safe to assume that this method's return value is defined
           * (because drag/drop handling will only be set up if reorder props are given).
           */
          DetailsHeaderBase.prototype._getColumnReorderProps = function () {
              var _a = this.props, columnReorderOptions = _a.columnReorderOptions, columnReorderProps = _a.columnReorderProps;
              return columnReorderProps || (columnReorderOptions && tslib_1.__assign(tslib_1.__assign({}, columnReorderOptions), { onColumnDragEnd: undefined }));
          };
          DetailsHeaderBase.prototype._getHeaderDragDropOptions = function () {
              var options = {
                  selectionIndex: 1,
                  context: { data: this, index: 0 },
                  canDrag: function () { return false; },
                  canDrop: function () { return true; },
                  onDragStart: function () { return undefined; },
                  updateDropState: this._updateDroppingState,
                  onDrop: this._onDrop,
                  onDragEnd: function () { return undefined; },
                  onDragOver: this._onDragOver,
              };
              return options;
          };
          DetailsHeaderBase.prototype._isValidCurrentDropHintIndex = function () {
              return this._currentDropHintIndex >= 0;
          };
          /**
           * @returns whether or not the "Select All" checkbox column is hidden.
           */
          DetailsHeaderBase.prototype._isCheckboxColumnHidden = function () {
              var _a = this.props, selectionMode = _a.selectionMode, checkboxVisibility = _a.checkboxVisibility;
              return selectionMode === interfaces_1.SelectionMode.none || checkboxVisibility === DetailsList_types_1.CheckboxVisibility.hidden;
          };
          DetailsHeaderBase.prototype._resetDropHints = function () {
              if (this._currentDropHintIndex >= 0) {
                  this._updateDropHintElement(this._dropHintDetails[this._currentDropHintIndex].dropHintElementRef, 'none');
                  this._currentDropHintIndex = -1;
              }
          };
          DetailsHeaderBase.prototype._updateDropHintElement = function (element, displayProperty) {
              element.childNodes[1].style.display = displayProperty;
              element.childNodes[0].style.display = displayProperty;
          };
          DetailsHeaderBase.prototype._isEventOnHeader = function (event) {
              if (this._rootElement.current) {
                  var clientRect = this._rootElement.current.getBoundingClientRect();
                  if (event.clientX > clientRect.left &&
                      event.clientX < clientRect.right &&
                      event.clientY > clientRect.top &&
                      event.clientY < clientRect.bottom) {
                      return DetailsList_types_1.ColumnDragEndLocation.header;
                  }
              }
          };
          DetailsHeaderBase.prototype._renderColumnDivider = function (columnIndex) {
              var _a = this.props.columns, columns = _a === void 0 ? NO_COLUMNS : _a;
              var column = columns[columnIndex];
              var onRenderDivider = column.onRenderDivider;
              return onRenderDivider
                  ? onRenderDivider({ column: column, columnIndex: columnIndex }, this._renderColumnSizer)
                  : this._renderColumnSizer({ column: column, columnIndex: columnIndex });
          };
          DetailsHeaderBase.prototype._renderDropHint = function (dropHintIndex) {
              var classNames = this._classNames;
              var IconComponent = this.props.useFastIcons ? Icon_1.FontIcon : Icon_1.Icon;
              return (React.createElement("div", { key: 'dropHintKey', className: classNames.dropHintStyle, id: "columnDropHint_" + dropHintIndex },
                  React.createElement("div", { role: "presentation", key: "dropHintCircleKey", className: classNames.dropHintCaretStyle, "data-is-focusable": false, "data-sizer-index": dropHintIndex, "aria-hidden": true },
                      React.createElement(IconComponent, { iconName: 'CircleShapeSolid' })),
                  React.createElement("div", { key: "dropHintLineKey", "aria-hidden": true, "data-is-focusable": false, "data-sizer-index": dropHintIndex, className: classNames.dropHintLineStyle })));
          };
          /**
           * double click on the column sizer will auto ajust column width
           * to fit the longest content among current rendered rows.
           *
           * @param columnIndex - index of the column user double clicked
           * @param ev - mouse double click event
           */
          DetailsHeaderBase.prototype._onSizerDoubleClick = function (columnIndex, ev) {
              var _a = this.props, onColumnAutoResized = _a.onColumnAutoResized, _b = _a.columns, columns = _b === void 0 ? NO_COLUMNS : _b;
              if (onColumnAutoResized) {
                  onColumnAutoResized(columns[columnIndex], columnIndex);
              }
          };
          DetailsHeaderBase.prototype._onSelectionChanged = function () {
              var isAllSelected = !!this.props.selection && this.props.selection.isAllSelected();
              if (this.state.isAllSelected !== isAllSelected) {
                  this.setState({
                      isAllSelected: isAllSelected,
                  });
              }
          };
          DetailsHeaderBase.defaultProps = {
              selectAllVisibility: DetailsHeader_types_1.SelectAllVisibility.visible,
              collapseAllVisibility: GroupedList_1.CollapseAllVisibility.visible,
              useFastIcons: true,
          };
          return DetailsHeaderBase;
      }(React.Component));
      exports.DetailsHeaderBase = DetailsHeaderBase;
      function _liesBetween(rtl, target, left, right) {
          return rtl ? target <= left && target >= right : target >= left && target <= right;
      }
      function _isBefore(rtl, a, b) {
          return rtl ? a >= b : a <= b;
      }
      function _isAfter(rtl, a, b) {
          return rtl ? a <= b : a >= b;
      }
      function _stopPropagation(ev) {
          ev.stopPropagation();
      }
  });
  //# sourceMappingURL=DetailsHeader.base.js.map