@trap_stevo/legendarybuilderproreact-ui/dist/HUDComponents/HUDTemporalNavigator.js

The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton

import _typeof from "@babel/runtime/helpers/typeof";
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { useState, useEffect, useMemo } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { ConvertNumberToMoneyFormat } from "../HUDManagers/HUDUniversalHUDUtilityManager.js";
import HUDDropDownContainer from "./HUDDropDownContainer.js";
import HUDDateTimePicker from "./HUDDateTimePicker.js";
import HUDLabelEditor from "./HUDLabelEditor.js";
import HUDIcon from "./HUDIcon.js";
var intervalUnits = ["second", "minute", "hour", "day", "week", "month", "year"];
function addInterval(date, unit, value) {
  if (!date || isNaN(new Date(date))) {
    return new Date();
  }
  var newDate = new Date(date);
  try {
    switch (unit) {
      case "second":
        newDate.setSeconds(newDate.getSeconds() + value);
        break;
      case "minute":
        newDate.setMinutes(newDate.getMinutes() + value);
        break;
      case "hour":
        newDate.setHours(newDate.getHours() + value);
        break;
      case "day":
        newDate.setDate(newDate.getDate() + value);
        break;
      case "week":
        newDate.setDate(newDate.getDate() + value * 7);
        break;
      case "month":
        newDate.setMonth(newDate.getMonth() + value);
        break;
      case "year":
        newDate.setFullYear(newDate.getFullYear() + value);
        break;
    }
  } catch (_unused) {
    return new Date(date);
  }
  return newDate;
}
;
function formatDate(date) {
  var d = new Date(date);
  if (isNaN(d)) {
    return "";
  }
  return d.toISOString().split("T")[0];
}
;
var getPaginationPages = function getPaginationPages(currentActualIndex, displayPageMap) {
  var maxLength = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 9;
  var currentDisplayIndex = displayPageMap.findIndex(function (p) {
    return p.actualIndex === currentActualIndex;
  });
  var total = displayPageMap.length;
  if (total <= maxLength) {
    return displayPageMap;
  }
  var pages = [];
  pages.push(displayPageMap[0]);
  var windowSize = maxLength - 2;
  var start = Math.max(1, currentDisplayIndex - Math.floor(windowSize / 2));
  var end = Math.min(total - 2, start + windowSize - 1);
  if (start > 1) {
    pages.push("...");
  }
  for (var i = start; i <= end; i++) {
    pages.push(displayPageMap[i]);
  }
  if (end < total - 2) {
    pages.push("...");
  }
  pages.push(displayPageMap[total - 1]);
  return pages;
};
function HUDTemporalNavigator(_ref) {
  var _ref$temporalNavigato = _ref.temporalNavigatorNavigationPageListTruncationContentCellHoverConfigurationSettings,
    temporalNavigatorNavigationPageListTruncationContentCellHoverConfigurationSettings = _ref$temporalNavigato === void 0 ? {} : _ref$temporalNavigato,
    _ref$temporalNavigato2 = _ref.temporalNavigatorNavigationPageListTruncationDropDownListConfigurationSettings,
    temporalNavigatorNavigationPageListTruncationDropDownListConfigurationSettings = _ref$temporalNavigato2 === void 0 ? {} : _ref$temporalNavigato2,
    _ref$temporalNavigato3 = _ref.temporalNavigatorNavigationPageListTruncationContentListConfigurationSettings,
    temporalNavigatorNavigationPageListTruncationContentListConfigurationSettings = _ref$temporalNavigato3 === void 0 ? {} : _ref$temporalNavigato3,
    _ref$temporalNavigato4 = _ref.temporalNavigatorNavigationPageListTruncationContentCellConfigurationSettings,
    temporalNavigatorNavigationPageListTruncationContentCellConfigurationSettings = _ref$temporalNavigato4 === void 0 ? {} : _ref$temporalNavigato4,
    _ref$temporalNavigato5 = _ref.temporalNavigatorNavigationPageTruncationDropDownFigureConfigurationSettings,
    temporalNavigatorNavigationPageTruncationDropDownFigureConfigurationSettings = _ref$temporalNavigato5 === void 0 ? {} : _ref$temporalNavigato5,
    _ref$temporalNavigato6 = _ref.temporalNavigatorContentContainerAnimationTransitionConfigurationSettings,
    temporalNavigatorContentContainerAnimationTransitionConfigurationSettings = _ref$temporalNavigato6 === void 0 ? {} : _ref$temporalNavigato6,
    _ref$temporalNavigato7 = _ref.temporalNavigatorIntervalUnitDropDownUnitCellHoverConfigurationSettings,
    temporalNavigatorIntervalUnitDropDownUnitCellHoverConfigurationSettings = _ref$temporalNavigato7 === void 0 ? {} : _ref$temporalNavigato7,
    _ref$temporalNavigato8 = _ref.temporalNavigatorContentContainerInitialAnimationConfigurationSettings,
    temporalNavigatorContentContainerInitialAnimationConfigurationSettings = _ref$temporalNavigato8 === void 0 ? {} : _ref$temporalNavigato8,
    _ref$temporalNavigato9 = _ref.temporalNavigatorPreviousNavigationButtonHoverConfigurationSettings,
    temporalNavigatorPreviousNavigationButtonHoverConfigurationSettings = _ref$temporalNavigato9 === void 0 ? {} : _ref$temporalNavigato9,
    _ref$temporalNavigato10 = _ref.temporalNavigatorContentContainerExitAnimationConfigurationSettings,
    temporalNavigatorContentContainerExitAnimationConfigurationSettings = _ref$temporalNavigato10 === void 0 ? {} : _ref$temporalNavigato10,
    _ref$temporalNavigato11 = _ref.temporalNavigatorPreviousNavigationButtonIconConfigurationSettings,
    temporalNavigatorPreviousNavigationButtonIconConfigurationSettings = _ref$temporalNavigato11 === void 0 ? {} : _ref$temporalNavigato11,
    _ref$temporalNavigato12 = _ref.temporalNavigatorIntervalUnitDropDownUnitCellConfigurationSettings,
    temporalNavigatorIntervalUnitDropDownUnitCellConfigurationSettings = _ref$temporalNavigato12 === void 0 ? {} : _ref$temporalNavigato12,
    _ref$temporalNavigato13 = _ref.temporalNavigatorNavigationPageListContainerConfigurationSettings,
    temporalNavigatorNavigationPageListContainerConfigurationSettings = _ref$temporalNavigato13 === void 0 ? {} : _ref$temporalNavigato13,
    _ref$temporalNavigato14 = _ref.temporalNavigatorPreviousNavigationButtonTapConfigurationSettings,
    temporalNavigatorPreviousNavigationButtonTapConfigurationSettings = _ref$temporalNavigato14 === void 0 ? {} : _ref$temporalNavigato14,
    _ref$temporalNavigato15 = _ref.temporalNavigatorIntervalUnitDropDownFigureConfigurationSettings,
    temporalNavigatorIntervalUnitDropDownFigureConfigurationSettings = _ref$temporalNavigato15 === void 0 ? {} : _ref$temporalNavigato15,
    _ref$temporalNavigato16 = _ref.temporalNavigatorNextNavigationButtonHoverConfigurationSettings,
    temporalNavigatorNextNavigationButtonHoverConfigurationSettings = _ref$temporalNavigato16 === void 0 ? {} : _ref$temporalNavigato16,
    _ref$temporalNavigato17 = _ref.temporalNavigatorContentContainerAnimationConfigurationSettings,
    temporalNavigatorContentContainerAnimationConfigurationSettings = _ref$temporalNavigato17 === void 0 ? {} : _ref$temporalNavigato17,
    _ref$temporalNavigato18 = _ref.temporalNavigatorNextNavigationButtonIconConfigurationSettings,
    temporalNavigatorNextNavigationButtonIconConfigurationSettings = _ref$temporalNavigato18 === void 0 ? {} : _ref$temporalNavigato18,
    _ref$temporalNavigato19 = _ref.temporalNavigatorPreviousNavigationButtonConfigurationSettings,
    temporalNavigatorPreviousNavigationButtonConfigurationSettings = _ref$temporalNavigato19 === void 0 ? {} : _ref$temporalNavigato19,
    _ref$temporalNavigato20 = _ref.temporalNavigatorIntervalUnitDropDownListConfigurationSettings,
    temporalNavigatorIntervalUnitDropDownListConfigurationSettings = _ref$temporalNavigato20 === void 0 ? {} : _ref$temporalNavigato20,
    _ref$temporalNavigato21 = _ref.temporalNavigatorNavigationPageCellHoverConfigurationSettings,
    temporalNavigatorNavigationPageCellHoverConfigurationSettings = _ref$temporalNavigato21 === void 0 ? {} : _ref$temporalNavigato21,
    _ref$temporalNavigato22 = _ref.temporalNavigatorDateTimeTransitionLabelConfigurationSettings,
    temporalNavigatorDateTimeTransitionLabelConfigurationSettings = _ref$temporalNavigato22 === void 0 ? {} : _ref$temporalNavigato22,
    _ref$temporalNavigato23 = _ref.temporalNavigatorNextNavigationButtonTapConfigurationSettings,
    temporalNavigatorNextNavigationButtonTapConfigurationSettings = _ref$temporalNavigato23 === void 0 ? {} : _ref$temporalNavigato23,
    _ref$temporalNavigato24 = _ref.temporalNavigatorNavigationPageCellTapConfigurationSettings,
    temporalNavigatorNavigationPageCellTapConfigurationSettings = _ref$temporalNavigato24 === void 0 ? {} : _ref$temporalNavigato24,
    _ref$temporalNavigato25 = _ref.temporalNavigatorNextNavigationButtonConfigurationSettings,
    temporalNavigatorNextNavigationButtonConfigurationSettings = _ref$temporalNavigato25 === void 0 ? {} : _ref$temporalNavigato25,
    _ref$temporalNavigato26 = _ref.temporalNavigatorNavigationContainerConfigurationSettings,
    temporalNavigatorNavigationContainerConfigurationSettings = _ref$temporalNavigato26 === void 0 ? {} : _ref$temporalNavigato26,
    _ref$temporalNavigato27 = _ref.temporalNavigatorNavigationPageCellConfigurationSettings,
    temporalNavigatorNavigationPageCellConfigurationSettings = _ref$temporalNavigato27 === void 0 ? {} : _ref$temporalNavigato27,
    _ref$temporalNavigato28 = _ref.temporalNavigatorHeaderRightContentConfigurationSettings,
    temporalNavigatorHeaderRightContentConfigurationSettings = _ref$temporalNavigato28 === void 0 ? {} : _ref$temporalNavigato28,
    _ref$temporalNavigato29 = _ref.temporalNavigatorHeaderLeftContentConfigurationSettings,
    temporalNavigatorHeaderLeftContentConfigurationSettings = _ref$temporalNavigato29 === void 0 ? {} : _ref$temporalNavigato29,
    _ref$temporalNavigato30 = _ref.temporalNavigatorContentContainerConfigurationSettings,
    temporalNavigatorContentContainerConfigurationSettings = _ref$temporalNavigato30 === void 0 ? {} : _ref$temporalNavigato30,
    _ref$temporalNavigato31 = _ref.temporalNavigatorHeaderContainerConfigurationSettings,
    temporalNavigatorHeaderContainerConfigurationSettings = _ref$temporalNavigato31 === void 0 ? {} : _ref$temporalNavigato31,
    _ref$temporalNavigato32 = _ref.temporalNavigatorIntervalInputConfigurationSettings,
    temporalNavigatorIntervalInputConfigurationSettings = _ref$temporalNavigato32 === void 0 ? {} : _ref$temporalNavigato32,
    _ref$temporalNavigato33 = _ref.temporalNavigatorContainerConfigurationSettings,
    temporalNavigatorContainerConfigurationSettings = _ref$temporalNavigato33 === void 0 ? {} : _ref$temporalNavigato33,
    _ref$temporalNavigato34 = _ref.temporalNavigatorNavigationPageListTruncationDropDownListConfigurations,
    temporalNavigatorNavigationPageListTruncationDropDownListConfigurations = _ref$temporalNavigato34 === void 0 ? {} : _ref$temporalNavigato34,
    _ref$temporalNavigato35 = _ref.temporalNavigatorNavigationPageListTruncationContentListConfigurations,
    temporalNavigatorNavigationPageListTruncationContentListConfigurations = _ref$temporalNavigato35 === void 0 ? {} : _ref$temporalNavigato35,
    _ref$temporalNavigato36 = _ref.temporalNavigatorNavigationPageListTruncationContentCellConfigurations,
    temporalNavigatorNavigationPageListTruncationContentCellConfigurations = _ref$temporalNavigato36 === void 0 ? {} : _ref$temporalNavigato36,
    _ref$temporalNavigato37 = _ref.temporalNavigatorNavigationPageTruncationDropDownFigureConfigurations,
    temporalNavigatorNavigationPageTruncationDropDownFigureConfigurations = _ref$temporalNavigato37 === void 0 ? {} : _ref$temporalNavigato37,
    _ref$temporalNavigato38 = _ref.temporalNavigatorPreviousNavigationButtonIconConfigurations,
    temporalNavigatorPreviousNavigationButtonIconConfigurations = _ref$temporalNavigato38 === void 0 ? {} : _ref$temporalNavigato38,
    _ref$temporalNavigato39 = _ref.temporalNavigatorIntervalUnitDropDownUnitCellConfigurations,
    temporalNavigatorIntervalUnitDropDownUnitCellConfigurations = _ref$temporalNavigato39 === void 0 ? {} : _ref$temporalNavigato39,
    _ref$temporalNavigato40 = _ref.temporalNavigatorNavigationPageListContainerConfigurations,
    temporalNavigatorNavigationPageListContainerConfigurations = _ref$temporalNavigato40 === void 0 ? {} : _ref$temporalNavigato40,
    _ref$temporalNavigato41 = _ref.temporalNavigatorIntervalUnitDropDownFigureConfigurations,
    temporalNavigatorIntervalUnitDropDownFigureConfigurations = _ref$temporalNavigato41 === void 0 ? {} : _ref$temporalNavigato41,
    _ref$temporalNavigato42 = _ref.temporalNavigatorNextNavigationButtonIconConfigurations,
    temporalNavigatorNextNavigationButtonIconConfigurations = _ref$temporalNavigato42 === void 0 ? {} : _ref$temporalNavigato42,
    _ref$temporalNavigato43 = _ref.temporalNavigatorPreviousNavigationButtonConfigurations,
    temporalNavigatorPreviousNavigationButtonConfigurations = _ref$temporalNavigato43 === void 0 ? {} : _ref$temporalNavigato43,
    _ref$temporalNavigato44 = _ref.temporalNavigatorDateTimeTransitionLabelConfigurations,
    temporalNavigatorDateTimeTransitionLabelConfigurations = _ref$temporalNavigato44 === void 0 ? {} : _ref$temporalNavigato44,
    _ref$temporalNavigato45 = _ref.temporalNavigatorNextNavigationButtonConfigurations,
    temporalNavigatorNextNavigationButtonConfigurations = _ref$temporalNavigato45 === void 0 ? {} : _ref$temporalNavigato45,
    _ref$temporalNavigato46 = _ref.temporalNavigatorIntervalUnitDropDownConfigurations,
    temporalNavigatorIntervalUnitDropDownConfigurations = _ref$temporalNavigato46 === void 0 ? {} : _ref$temporalNavigato46,
    _ref$temporalNavigato47 = _ref.temporalNavigatorNavigationContainerConfigurations,
    temporalNavigatorNavigationContainerConfigurations = _ref$temporalNavigato47 === void 0 ? {} : _ref$temporalNavigato47,
    _ref$temporalNavigato48 = _ref.temporalNavigatorDateTimeStartPickerConfigurations,
    temporalNavigatorDateTimeStartPickerConfigurations = _ref$temporalNavigato48 === void 0 ? {} : _ref$temporalNavigato48,
    _ref$temporalNavigato49 = _ref.temporalNavigatorHeaderRightContentConfigurations,
    temporalNavigatorHeaderRightContentConfigurations = _ref$temporalNavigato49 === void 0 ? {} : _ref$temporalNavigato49,
    _ref$temporalNavigato50 = _ref.temporalNavigatorNavigationPageCellConfigurations,
    temporalNavigatorNavigationPageCellConfigurations = _ref$temporalNavigato50 === void 0 ? {} : _ref$temporalNavigato50,
    _ref$temporalNavigato51 = _ref.temporalNavigatorHeaderLeftContentConfigurations,
    temporalNavigatorHeaderLeftContentConfigurations = _ref$temporalNavigato51 === void 0 ? {} : _ref$temporalNavigato51,
    _ref$temporalNavigato52 = _ref.temporalNavigatorDateTimeEndPickerConfigurations,
    temporalNavigatorDateTimeEndPickerConfigurations = _ref$temporalNavigato52 === void 0 ? {} : _ref$temporalNavigato52,
    _ref$temporalNavigato53 = _ref.temporalNavigatorContentContainerConfigurations,
    temporalNavigatorContentContainerConfigurations = _ref$temporalNavigato53 === void 0 ? {} : _ref$temporalNavigato53,
    _ref$temporalNavigato54 = _ref.temporalNavigatorHeaderContainerConfigurations,
    temporalNavigatorHeaderContainerConfigurations = _ref$temporalNavigato54 === void 0 ? {} : _ref$temporalNavigato54,
    _ref$temporalNavigato55 = _ref.temporalNavigatorIntervalInputConfigurations,
    temporalNavigatorIntervalInputConfigurations = _ref$temporalNavigato55 === void 0 ? {} : _ref$temporalNavigato55,
    _ref$temporalNavigato56 = _ref.temporalNavigatorContainerConfigurations,
    temporalNavigatorContainerConfigurations = _ref$temporalNavigato56 === void 0 ? {} : _ref$temporalNavigato56,
    _ref$temporalNavigato57 = _ref.temporalNavigatorNavigationPageTruncationDropDownFigureContent,
    temporalNavigatorNavigationPageTruncationDropDownFigureContent = _ref$temporalNavigato57 === void 0 ? null : _ref$temporalNavigato57,
    _ref$temporalNavigato58 = _ref.temporalNavigatorHeaderRightCenterContent,
    temporalNavigatorHeaderRightCenterContent = _ref$temporalNavigato58 === void 0 ? null : _ref$temporalNavigato58,
    _ref$getPageID = _ref.getPageID,
    getPageID = _ref$getPageID === void 0 ? function (range) {
      return "range-".concat(formatDate(range.start), "-").concat(formatDate(range.end));
    } : _ref$getPageID,
    _ref$dateAccessor = _ref.dateAccessor,
    dateAccessor = _ref$dateAccessor === void 0 ? function (record) {
      return record.createdAt;
    } : _ref$dateAccessor,
    renderPage = _ref.renderPage,
    _ref$defaultIntervalU = _ref.defaultIntervalUnit,
    defaultIntervalUnit = _ref$defaultIntervalU === void 0 ? "day" : _ref$defaultIntervalU,
    _ref$defaultIntervalV = _ref.defaultIntervalValue,
    defaultIntervalValue = _ref$defaultIntervalV === void 0 ? 1 : _ref$defaultIntervalV,
    _ref$initialSelectedU = _ref.initialSelectedUnit,
    initialSelectedUnit = _ref$initialSelectedU === void 0 ? "day" : _ref$initialSelectedU,
    _ref$recordsPerPage = _ref.recordsPerPage,
    recordsPerPage = _ref$recordsPerPage === void 0 ? 24 : _ref$recordsPerPage,
    _ref$records = _ref.records,
    records = _ref$records === void 0 ? [] : _ref$records;
  var _useState = useState(initialSelectedUnit || defaultIntervalUnit),
    _useState2 = _slicedToArray(_useState, 2),
    intervalUnit = _useState2[0],
    setIntervalUnit = _useState2[1];
  var _useState3 = useState(defaultIntervalValue),
    _useState4 = _slicedToArray(_useState3, 2),
    intervalValue = _useState4[0],
    setIntervalValue = _useState4[1];
  var _useState5 = useState(0),
    _useState6 = _slicedToArray(_useState5, 2),
    currentPageIndex = _useState6[0],
    setCurrentPageIndex = _useState6[1];
  var _useState7 = useState(null),
    _useState8 = _slicedToArray(_useState7, 2),
    customStart = _useState8[0],
    setCustomStart = _useState8[1];
  var _useState9 = useState(null),
    _useState10 = _slicedToArray(_useState9, 2),
    customEnd = _useState10[0],
    setCustomEnd = _useState10[1];
  var _useMemo = useMemo(function () {
      if (!records.length) {
        return [new Date(), new Date()];
      }
      var dates = records.map(function (item) {
        return new Date(dateAccessor(item));
      }).sort(function (a, b) {
        return a - b;
      });
      return [dates[0], dates[dates.length - 1]];
    }, [records, dateAccessor]),
    _useMemo2 = _slicedToArray(_useMemo, 2),
    minDate = _useMemo2[0],
    maxDate = _useMemo2[1];
  var effectiveStart = useMemo(function () {
    return customStart ? new Date(customStart) : minDate;
  }, [customStart, minDate]);
  var effectiveEnd = useMemo(function () {
    return customEnd ? new Date(customEnd) : maxDate;
  }, [customEnd, maxDate]);
  var usingCustomRange = customStart && customEnd;
  var getPageRange = function getPageRange(pageIndex) {
    var start = new Date(effectiveStart);
    var rangeStart = addInterval(start, intervalUnit, intervalValue * pageIndex);
    var rangeEnd = addInterval(rangeStart, intervalUnit, intervalValue);
    return {
      start: rangeStart,
      end: rangeEnd
    };
  };
  var sortedRecords = useMemo(function () {
    if (!records.length) {
      return [];
    }
    return records.map(function (record) {
      return {
        record: record,
        date: new Date(dateAccessor(record))
      };
    }).filter(function (_ref2) {
      var date = _ref2.date;
      return !isNaN(date) && date >= effectiveStart && date <= effectiveEnd;
    }).sort(function (a, b) {
      return a.date - b.date;
    });
  }, [records, dateAccessor, effectiveStart, effectiveEnd]);
  var recordPagesMap = useMemo(function () {
    var map = new Map();
    sortedRecords.forEach(function (_ref3) {
      var date = _ref3.date,
        record = _ref3.record;
      var diff = date - new Date(effectiveStart);
      var intervalMs = addInterval(new Date(effectiveStart), intervalUnit, intervalValue) - new Date(effectiveStart);
      if (intervalMs <= 0 || !isFinite(intervalMs)) {
        return;
      }
      var pageIndex = Math.floor(diff / intervalMs);
      if (!map.has(pageIndex)) {
        map.set(pageIndex, []);
      }
      map.get(pageIndex).push(record);
    });
    return map;
  }, [sortedRecords, effectiveStart, intervalUnit, intervalValue]);
  var validPageIndexes = useMemo(function () {
    return Array.from(recordPagesMap.keys()).sort(function (a, b) {
      return a - b;
    });
  }, [recordPagesMap]);
  var displayPageMap = useMemo(function () {
    return validPageIndexes.map(function (actual, i) {
      return {
        displayIndex: i,
        actualIndex: actual
      };
    });
  }, [validPageIndexes]);
  var atEndPage = useMemo(function () {
    return currentPageIndex === validPageIndexes[validPageIndexes.length - 1];
  }, [currentPageIndex, validPageIndexes.length]);
  var currentRange = useMemo(function () {
    return getPageRange(currentPageIndex);
  }, [currentPageIndex, intervalUnit, intervalValue, effectiveStart]);
  var getTotalPages = validPageIndexes.length;
  var pageRecords = useMemo(function () {
    var lastPage = currentPageIndex === getTotalPages - 1;
    return sortedRecords.filter(function (_ref4) {
      var date = _ref4.date;
      return date >= currentRange.start && (lastPage ? date <= currentRange.end : date < currentRange.end);
    }).map(function (_ref5) {
      var record = _ref5.record;
      return record;
    }).slice(0, recordsPerPage);
  }, [sortedRecords, currentRange, recordsPerPage, currentPageIndex, getTotalPages]);
  var handleUnitChange = function handleUnitChange(unit) {
    setIntervalUnit(unit);
    setCurrentPageIndex(0);
  };
  var handleValueChange = function handleValueChange(val) {
    var clean = Math.max(1, Math.round(val));
    setIntervalValue(clean);
    setCurrentPageIndex(0);
  };
  useEffect(function () {
    if (!customStart || validPageIndexes.length === 0) {
      return;
    }
    var effective = new Date(customStart);
    var intervalMs = addInterval(effective, intervalUnit, intervalValue) - effective;
    if (intervalMs <= 0 || !isFinite(intervalMs)) {
      return;
    }
    var pageIndex = Math.floor((effective - new Date(effectiveStart)) / intervalMs);
    var snappedPage = validPageIndexes.find(function (p) {
      return p >= pageIndex;
    });
    if (typeof snappedPage === "number") {
      setCurrentPageIndex(snappedPage);
    }
  }, [intervalUnit, intervalValue, customStart, effectiveStart, validPageIndexes]);
  return /*#__PURE__*/React.createElement("div", _extends({
    style: _objectSpread({
      display: "flex",
      flexDirection: "column",
      borderRadius: "1.25069rem",
      boxShadow: "0 0 2rem rgba(0, 0, 0, 0.469)",
      background: "linear-gradient(180deg, #111, #181818)",
      color: "#FAFAFA",
      gap: "1.69rem",
      padding: "1.69rem"
    }, temporalNavigatorContainerConfigurationSettings !== null && temporalNavigatorContainerConfigurationSettings !== void 0 ? temporalNavigatorContainerConfigurationSettings : {})
  }, temporalNavigatorContainerConfigurations !== null && temporalNavigatorContainerConfigurations !== void 0 ? temporalNavigatorContainerConfigurations : {}), /*#__PURE__*/React.createElement("div", _extends({
    style: _objectSpread({
      display: "flex",
      flexWrap: "wrap",
      justifyContent: "space-between",
      alignItems: "center",
      width: "100%",
      gap: "1rem",
      paddingBottom: "1.25rem"
    }, temporalNavigatorHeaderContainerConfigurationSettings !== null && temporalNavigatorHeaderContainerConfigurationSettings !== void 0 ? temporalNavigatorHeaderContainerConfigurationSettings : {})
  }, temporalNavigatorHeaderContainerConfigurations !== null && temporalNavigatorHeaderContainerConfigurations !== void 0 ? temporalNavigatorHeaderContainerConfigurations : {}), /*#__PURE__*/React.createElement("div", _extends({
    style: _objectSpread({
      display: "flex",
      flexWrap: "wrap",
      alignItems: "center",
      gap: "0.369rem"
    }, temporalNavigatorHeaderLeftContentConfigurationSettings !== null && temporalNavigatorHeaderLeftContentConfigurationSettings !== void 0 ? temporalNavigatorHeaderLeftContentConfigurationSettings : {})
  }, temporalNavigatorHeaderLeftContentConfigurations !== null && temporalNavigatorHeaderLeftContentConfigurations !== void 0 ? temporalNavigatorHeaderLeftContentConfigurations : {}), /*#__PURE__*/React.createElement(HUDLabelEditor, _extends({
    inputConfigurationSettings: _objectSpread({
      textAlign: "center",
      width: "4rem"
    }, temporalNavigatorIntervalInputConfigurationSettings !== null && temporalNavigatorIntervalInputConfigurationSettings !== void 0 ? temporalNavigatorIntervalInputConfigurationSettings : {}),
    onChange: function onChange(val) {
      return handleValueChange(Number(val));
    },
    initialText: String(intervalValue),
    value: String(intervalValue),
    displayConfirmation: false,
    showButtons: false
  }, temporalNavigatorIntervalInputConfigurations !== null && temporalNavigatorIntervalInputConfigurations !== void 0 ? temporalNavigatorIntervalInputConfigurations : {})), /*#__PURE__*/React.createElement(HUDDropDownContainer, _extends({
    dropDownListConfigurationSettings: _objectSpread({
      msOverflowStyle: "none",
      scrollbarWidth: "none",
      overflowY: "auto",
      boxShadow: "0 0 5.69px rgba(255, 255, 255, 0.169)",
      backdropFilter: "blur(5.69px)",
      maxHeight: "12.69rem",
      minHeight: "auto",
      height: "auto"
    }, temporalNavigatorIntervalUnitDropDownListConfigurationSettings !== null && temporalNavigatorIntervalUnitDropDownListConfigurationSettings !== void 0 ? temporalNavigatorIntervalUnitDropDownListConfigurationSettings : {}),
    figureComponent: /*#__PURE__*/React.createElement("div", _extends({
      style: _objectSpread({
        userSelect: "none",
        cursor: "pointer",
        textAlign: "center",
        fontWeight: "600",
        fontSize: "1rem",
        borderRadius: "0.5rem",
        boxShadow: "0 0 0.5rem rgba(0, 0, 0, 0.469)",
        background: "#1A73E8",
        color: "white",
        minWidth: "5.25rem",
        padding: "0.5rem 1.25rem"
      }, temporalNavigatorIntervalUnitDropDownFigureConfigurationSettings !== null && temporalNavigatorIntervalUnitDropDownFigureConfigurationSettings !== void 0 ? temporalNavigatorIntervalUnitDropDownFigureConfigurationSettings : {})
    }, temporalNavigatorIntervalUnitDropDownFigureConfigurations !== null && temporalNavigatorIntervalUnitDropDownFigureConfigurations !== void 0 ? temporalNavigatorIntervalUnitDropDownFigureConfigurations : {}), intervalUnit),
    dropDownButtonClickAction: handleUnitChange
  }, temporalNavigatorIntervalUnitDropDownConfigurations !== null && temporalNavigatorIntervalUnitDropDownConfigurations !== void 0 ? temporalNavigatorIntervalUnitDropDownConfigurations : {}), intervalUnits.map(function (unit) {
    return /*#__PURE__*/React.createElement("div", _extends({
      key: unit,
      style: _objectSpread(_objectSpread({
        cursor: "pointer",
        transition: "all 0.269s ease",
        fontSize: "0.9069rem",
        background: intervalUnit === unit ? "#1A73E8" : "transparent",
        padding: "0.4rem 0.8rem"
      }, temporalNavigatorIntervalUnitDropDownUnitCellConfigurationSettings !== null && temporalNavigatorIntervalUnitDropDownUnitCellConfigurationSettings !== void 0 ? temporalNavigatorIntervalUnitDropDownUnitCellConfigurationSettings : {}), intervalUnit === unit ? temporalNavigatorIntervalUnitDropDownUnitCellHoverConfigurationSettings !== null && temporalNavigatorIntervalUnitDropDownUnitCellHoverConfigurationSettings !== void 0 ? temporalNavigatorIntervalUnitDropDownUnitCellHoverConfigurationSettings : {} : {}),
      onClick: function onClick() {
        return handleUnitChange(unit);
      }
    }, temporalNavigatorIntervalUnitDropDownUnitCellConfigurations !== null && temporalNavigatorIntervalUnitDropDownUnitCellConfigurations !== void 0 ? temporalNavigatorIntervalUnitDropDownUnitCellConfigurations : {}), unit);
  }))), /*#__PURE__*/React.createElement("div", _extends({
    style: _objectSpread({
      display: "flex",
      alignItems: "center",
      gap: "0.5rem"
    }, temporalNavigatorHeaderRightContentConfigurationSettings !== null && temporalNavigatorHeaderRightContentConfigurationSettings !== void 0 ? temporalNavigatorHeaderRightContentConfigurationSettings : {})
  }, temporalNavigatorHeaderRightContentConfigurations !== null && temporalNavigatorHeaderRightContentConfigurations !== void 0 ? temporalNavigatorHeaderRightContentConfigurations : {}), /*#__PURE__*/React.createElement(HUDDateTimePicker, _extends({
    onChange: function onChange(val) {
      setCustomStart(val);
      setCurrentPageIndex(0);
    },
    onReset: function onReset() {
      setCustomStart(null);
      setCurrentPageIndex(0);
    },
    value: customStart
  }, temporalNavigatorDateTimeStartPickerConfigurations !== null && temporalNavigatorDateTimeStartPickerConfigurations !== void 0 ? temporalNavigatorDateTimeStartPickerConfigurations : {})), temporalNavigatorHeaderRightCenterContent ? temporalNavigatorHeaderRightCenterContent : /*#__PURE__*/React.createElement("span", _extends({
    style: _objectSpread({
      userSelect: "none",
      color: "#999"
    }, temporalNavigatorDateTimeTransitionLabelConfigurationSettings !== null && temporalNavigatorDateTimeTransitionLabelConfigurationSettings !== void 0 ? temporalNavigatorDateTimeTransitionLabelConfigurationSettings : {})
  }, temporalNavigatorDateTimeTransitionLabelConfigurations !== null && temporalNavigatorDateTimeTransitionLabelConfigurations !== void 0 ? temporalNavigatorDateTimeTransitionLabelConfigurations : {}), "\u2192"), /*#__PURE__*/React.createElement(HUDDateTimePicker, _extends({
    onChange: function onChange(val) {
      setCustomEnd(val);
      setCurrentPageIndex(0);
    },
    onReset: function onReset() {
      setCustomEnd(null);
      setCurrentPageIndex(0);
    },
    value: customEnd
  }, temporalNavigatorDateTimeEndPickerConfigurations !== null && temporalNavigatorDateTimeEndPickerConfigurations !== void 0 ? temporalNavigatorDateTimeEndPickerConfigurations : {})))), /*#__PURE__*/React.createElement(AnimatePresence, {
    mode: "wait"
  }, /*#__PURE__*/React.createElement(motion.div, _extends({
    key: getPageID(currentRange),
    initial: _objectSpread({
      opacity: 0,
      scale: 0.9169,
      x: 69
    }, temporalNavigatorContentContainerInitialAnimationConfigurationSettings !== null && temporalNavigatorContentContainerInitialAnimationConfigurationSettings !== void 0 ? temporalNavigatorContentContainerInitialAnimationConfigurationSettings : {}),
    animate: _objectSpread({
      opacity: 1,
      scale: 1,
      x: 0
    }, temporalNavigatorContentContainerAnimationConfigurationSettings !== null && temporalNavigatorContentContainerAnimationConfigurationSettings !== void 0 ? temporalNavigatorContentContainerAnimationConfigurationSettings : {}),
    exit: _objectSpread({
      opacity: 0,
      scale: 0.9169,
      x: -69
    }, temporalNavigatorContentContainerExitAnimationConfigurationSettings !== null && temporalNavigatorContentContainerExitAnimationConfigurationSettings !== void 0 ? temporalNavigatorContentContainerExitAnimationConfigurationSettings : {}),
    transition: _objectSpread({
      opacity: {
        animate: "easeOut",
        duration: 0.269
      },
      scale: {
        animate: "easeOut",
        duration: 0.369
      },
      x: {
        animate: "easeOut",
        duration: 0.369
      }
    }, temporalNavigatorContentContainerAnimationTransitionConfigurationSettings !== null && temporalNavigatorContentContainerAnimationTransitionConfigurationSettings !== void 0 ? temporalNavigatorContentContainerAnimationTransitionConfigurationSettings : {}),
    style: _objectSpread({
      msOverflowStyle: "none",
      scrollbarWidth: "none",
      overflowY: "auto",
      maxHeight: "27.69rem",
      minHeight: "27.69rem"
    }, temporalNavigatorContentContainerConfigurationSettings !== null && temporalNavigatorContentContainerConfigurationSettings !== void 0 ? temporalNavigatorContentContainerConfigurationSettings : {})
  }, temporalNavigatorContentContainerConfigurations !== null && temporalNavigatorContentContainerConfigurations !== void 0 ? temporalNavigatorContentContainerConfigurations : {}), renderPage(pageRecords, currentRange))), /*#__PURE__*/React.createElement("div", _extends({
    style: _objectSpread({
      display: "flex",
      justifyContent: "space-between",
      alignItems: "center",
      borderTop: "1px solid #333",
      minHeight: "3rem",
      width: "100%",
      paddingTop: "1.25rem"
    }, temporalNavigatorNavigationContainerConfigurationSettings !== null && temporalNavigatorNavigationContainerConfigurationSettings !== void 0 ? temporalNavigatorNavigationContainerConfigurationSettings : {})
  }, temporalNavigatorNavigationContainerConfigurations !== null && temporalNavigatorNavigationContainerConfigurations !== void 0 ? temporalNavigatorNavigationContainerConfigurations : {}), /*#__PURE__*/React.createElement(motion.div, _extends({
    whileHover: currentPageIndex === 0 ? undefined : _objectSpread({
      scale: 1.1069
    }, temporalNavigatorPreviousNavigationButtonHoverConfigurationSettings !== null && temporalNavigatorPreviousNavigationButtonHoverConfigurationSettings !== void 0 ? temporalNavigatorPreviousNavigationButtonHoverConfigurationSettings : {}),
    whileTap: currentPageIndex === 0 ? undefined : _objectSpread({
      scale: 0.869
    }, temporalNavigatorPreviousNavigationButtonTapConfigurationSettings !== null && temporalNavigatorPreviousNavigationButtonTapConfigurationSettings !== void 0 ? temporalNavigatorPreviousNavigationButtonTapConfigurationSettings : {}),
    style: _objectSpread(_objectSpread({
      cursor: currentPageIndex === 0 ? "default" : "pointer",
      transition: "opacity 0.269s",
      opacity: currentPageIndex === 0 ? 0.4 : 1,
      scale: 1,
      marginRight: "0.369rem"
    }, temporalNavigatorPreviousNavigationButtonConfigurationSettings !== null && temporalNavigatorPreviousNavigationButtonConfigurationSettings !== void 0 ? temporalNavigatorPreviousNavigationButtonConfigurationSettings : {}), currentPageIndex === 0 ? temporalNavigatorPreviousNavigationButtonHoverConfigurationSettings !== null && temporalNavigatorPreviousNavigationButtonHoverConfigurationSettings !== void 0 ? temporalNavigatorPreviousNavigationButtonHoverConfigurationSettings : {} : {}),
    onClick: function onClick() {
      return setCurrentPageIndex(function (prev) {
        return Math.max(0, prev - 1);
      });
    }
  }, temporalNavigatorPreviousNavigationButtonConfigurations !== null && temporalNavigatorPreviousNavigationButtonConfigurations !== void 0 ? temporalNavigatorPreviousNavigationButtonConfigurations : {}), /*#__PURE__*/React.createElement(HUDIcon, _extends({
    style: _objectSpread({
      transition: "opacity 0.269s",
      height: "1.269rem"
    }, temporalNavigatorPreviousNavigationButtonIconConfigurationSettings !== null && temporalNavigatorPreviousNavigationButtonIconConfigurationSettings !== void 0 ? temporalNavigatorPreviousNavigationButtonIconConfigurationSettings : {}),
    disabled: currentPageIndex === 0,
    name: "chevron-left"
  }, temporalNavigatorPreviousNavigationButtonIconConfigurations !== null && temporalNavigatorPreviousNavigationButtonIconConfigurations !== void 0 ? temporalNavigatorPreviousNavigationButtonIconConfigurations : {}))), /*#__PURE__*/React.createElement("div", _extends({
    style: _objectSpread({
      display: "flex",
      flexWrap: "wrap",
      justifyContent: "center",
      gap: "0.4rem"
    }, temporalNavigatorNavigationPageListContainerConfigurationSettings !== null && temporalNavigatorNavigationPageListContainerConfigurationSettings !== void 0 ? temporalNavigatorNavigationPageListContainerConfigurationSettings : {})
  }, temporalNavigatorNavigationPageListContainerConfigurations !== null && temporalNavigatorNavigationPageListContainerConfigurations !== void 0 ? temporalNavigatorNavigationPageListContainerConfigurations : {}), getPaginationPages(currentPageIndex, displayPageMap).map(function (p, idx, arr) {
    return _typeof(p) === "object" ? /*#__PURE__*/React.createElement(motion.div, _extends({
      key: p.actualIndex,
      whileHover: _objectSpread({
        scale: 1.1
      }, temporalNavigatorNavigationPageCellHoverConfigurationSettings !== null && temporalNavigatorNavigationPageCellHoverConfigurationSettings !== void 0 ? temporalNavigatorNavigationPageCellHoverConfigurationSettings : {}),
      whileTap: _objectSpread({
        scale: 0.95
      }, temporalNavigatorNavigationPageCellTapConfigurationSettings !== null && temporalNavigatorNavigationPageCellTapConfigurationSettings !== void 0 ? temporalNavigatorNavigationPageCellTapConfigurationSettings : {}),
      style: _objectSpread(_objectSpread({
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        userSelect: "none",
        cursor: "pointer",
        textAlign: "center",
        transition: "all 0.269s ease",
        fontWeight: p.actualIndex === currentPageIndex ? "bold" : "normal",
        fontSize: "0.85rem",
        borderRadius: "0.5rem",
        boxShadow: p.actualIndex === currentPageIndex ? "0 0 6px #1A73E8" : "none",
        background: p.actualIndex === currentPageIndex ? "#1A73E8" : "#222",
        color: p.actualIndex === currentPageIndex ? "#fff" : "#aaa",
        minWidth: "2rem",
        padding: "0.3rem 0.6rem"
      }, temporalNavigatorNavigationPageCellConfigurationSettings !== null && temporalNavigatorNavigationPageCellConfigurationSettings !== void 0 ? temporalNavigatorNavigationPageCellConfigurationSettings : {}), p.actualIndex === currentPageIndex ? temporalNavigatorNavigationPageCellHoverConfigurationSettings !== null && temporalNavigatorNavigationPageCellHoverConfigurationSettings !== void 0 ? temporalNavigatorNavigationPageCellHoverConfigurationSettings : {} : {}),
      onClick: function onClick() {
        return setCurrentPageIndex(p.actualIndex);
      }
    }, temporalNavigatorNavigationPageCellConfigurations !== null && temporalNavigatorNavigationPageCellConfigurations !== void 0 ? temporalNavigatorNavigationPageCellConfigurations : {}), ConvertNumberToMoneyFormat(p.displayIndex + 1, false)) : /*#__PURE__*/React.createElement(HUDDropDownContainer, _extends({
      key: "ellipsis-".concat(idx),
      dropDownListConfigurationSettings: _objectSpread({
        msOverflowStyle: "none",
        scrollbarWidth: "none",
        overflowY: "auto",
        boxShadow: "0 0 5.69px rgba(255, 255, 255, 0.169)",
        backdropFilter: "blur(5.69px)",
        maxHeight: "12.69rem",
        minHeight: "auto",
        height: "auto",
        padding: "0.5rem"
      }, temporalNavigatorNavigationPageListTruncationDropDownListConfigurationSettings !== null && temporalNavigatorNavigationPageListTruncationDropDownListConfigurationSettings !== void 0 ? temporalNavigatorNavigationPageListTruncationDropDownListConfigurationSettings : {}),
      figureComponent: /*#__PURE__*/React.createElement("div", _extends({
        style: _objectSpread({
          userSelect: "none",
          cursor: "pointer",
          color: "#888",
          padding: "0.0569rem 0.6rem"
        }, temporalNavigatorNavigationPageTruncationDropDownFigureConfigurationSettings !== null && temporalNavigatorNavigationPageTruncationDropDownFigureConfigurationSettings !== void 0 ? temporalNavigatorNavigationPageTruncationDropDownFigureConfigurationSettings : {})
      }, temporalNavigatorNavigationPageTruncationDropDownFigureConfigurations !== null && temporalNavigatorNavigationPageTruncationDropDownFigureConfigurations !== void 0 ? temporalNavigatorNavigationPageTruncationDropDownFigureConfigurations : {}), temporalNavigatorNavigationPageTruncationDropDownFigureContent ? temporalNavigatorNavigationPageTruncationDropDownFigureContent : "…"),
      dropDownButtonClickAction: function dropDownButtonClickAction(pageIndex) {
        return setCurrentPageIndex(pageIndex);
      }
    }, temporalNavigatorNavigationPageListTruncationDropDownListConfigurations !== null && temporalNavigatorNavigationPageListTruncationDropDownListConfigurations !== void 0 ? temporalNavigatorNavigationPageListTruncationDropDownListConfigurations : {}), /*#__PURE__*/React.createElement("div", _extends({
      style: _objectSpread({
        borderRadius: "0.75rem",
        background: "transparent",
        gap: "0.169rem"
      }, temporalNavigatorNavigationPageListTruncationContentListConfigurationSettings !== null && temporalNavigatorNavigationPageListTruncationContentListConfigurationSettings !== void 0 ? temporalNavigatorNavigationPageListTruncationContentListConfigurationSettings : {})
    }, temporalNavigatorNavigationPageListTruncationContentListConfigurations !== null && temporalNavigatorNavigationPageListTruncationContentListConfigurations !== void 0 ? temporalNavigatorNavigationPageListTruncationContentListConfigurations : {}), function () {
      var prev = arr[idx - 1];
      var next = arr[idx + 1];
      var prevVal = _typeof(prev) === "object" ? prev.displayIndex : 0;
      var nextVal = _typeof(next) === "object" ? next.displayIndex : displayPageMap.length - 1;
      var pagesInGap = displayPageMap.filter(function (p) {
        return p.displayIndex > prevVal && p.displayIndex < nextVal;
      });
      return pagesInGap.map(function (p) {
        return /*#__PURE__*/React.createElement("div", _extends({
          key: p.actualIndex,
          style: _objectSpread(_objectSpread({
            userSelect: "none",
            cursor: "pointer",
            transition: "background 0.269s",
            fontWeight: "469",
            fontSize: "0.9069rem",
            borderRadius: "0.5rem",
            background: p.actualIndex === currentPageIndex ? "#1A73E8" : "transparent",
            color: p.actualIndex === currentPageIndex ? "#fff" : "#ccc",
            padding: "0.5rem 1rem"
          }, temporalNavigatorNavigationPageListTruncationContentCellConfigurationSettings !== null && temporalNavigatorNavigationPageListTruncationContentCellConfigurationSettings !== void 0 ? temporalNavigatorNavigationPageListTruncationContentCellConfigurationSettings : {}), p.actualIndex === currentPageIndex ? temporalNavigatorNavigationPageListTruncationContentCellHoverConfigurationSettings !== null && temporalNavigatorNavigationPageListTruncationContentCellHoverConfigurationSettings !== void 0 ? temporalNavigatorNavigationPageListTruncationContentCellHoverConfigurationSettings : {} : {}),
          onClick: function onClick() {
            return setCurrentPageIndex(p.actualIndex);
          }
        }, temporalNavigatorNavigationPageListTruncationContentCellConfigurations !== null && temporalNavigatorNavigationPageListTruncationContentCellConfigurations !== void 0 ? temporalNavigatorNavigationPageListTruncationContentCellConfigurations : {}), "Page ", ConvertNumberToMoneyFormat(p.displayIndex + 1, false));
      });
    }()));
  })), /*#__PURE__*/React.createElement(motion.div, _extends({
    whileHover: atEndPage ? undefined : _objectSpread({
      scale: 1.1069
    }, temporalNavigatorNextNavigationButtonHoverConfigurationSettings !== null && temporalNavigatorNextNavigationButtonHoverConfigurationSettings !== void 0 ? temporalNavigatorNextNavigationButtonHoverConfigurationSettings : {}),
    whileTap: atEndPage ? undefined : _objectSpread({
      scale: 0.869
    }, temporalNavigatorNextNavigationButtonTapConfigurationSettings !== null && temporalNavigatorNextNavigationButtonTapConfigurationSettings !== void 0 ? temporalNavigatorNextNavigationButtonTapConfigurationSettings : {}),
    style: _objectSpread(_objectSpread({
      cursor: atEndPage ? "default" : "pointer",
      transition: "opacity 0.269s",
      opacity: atEndPage ? 0.4 : 1,
      scale: 1,
      marginLeft: "0.369rem"
    }, temporalNavigatorNextNavigationButtonConfigurationSettings !== null && temporalNavigatorNextNavigationButtonConfigurationSettings !== void 0 ? temporalNavigatorNextNavigationButtonConfigurationSettings : {}), currentPageIndex === 0 ? temporalNavigatorNextNavigationButtonHoverConfigurationSettings !== null && temporalNavigatorNextNavigationButtonHoverConfigurationSettings !== void 0 ? temporalNavigatorNextNavigationButtonHoverConfigurationSettings : {} : {}),
    onClick: function onClick() {
      var current = currentPageIndex;
      var next = validPageIndexes.find(function (p) {
        return p > current;
      });
      if (typeof next === "number") {
        setCurrentPageIndex(next);
      }
    }
  }, temporalNavigatorNextNavigationButtonConfigurations !== null && temporalNavigatorNextNavigationButtonConfigurations !== void 0 ? temporalNavigatorNextNavigationButtonConfigurations : {}), /*#__PURE__*/React.createElement(HUDIcon, _extends({
    style: _objectSpread({
      transition: "opacity 0.269s",
      height: "1.269rem"
    }, temporalNavigatorNextNavigationButtonIconConfigurationSettings !== null && temporalNavigatorNextNavigationButtonIconConfigurationSettings !== void 0 ? temporalNavigatorNextNavigationButtonIconConfigurationSettings : {}),
    disabled: atEndPage,
    name: "chevron-right"
  }, temporalNavigatorNextNavigationButtonIconConfigurations !== null && temporalNavigatorNextNavigationButtonIconConfigurations !== void 0 ? temporalNavigatorNextNavigationButtonIconConfigurations : {})))));
}
;
export default HUDTemporalNavigator;