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

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

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _typeof from "@babel/runtime/helpers/typeof";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
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 * as React from "react";
import { useState, useEffect, useRef, useLayoutEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { useTimeout } from "../HUDManagers/HUDUniversalHUDEventEffectsManager.js";
import HUDIcon from "./HUDIcon.js";
function HUDComparisonTable(_ref) {
  var _ref$tableRowContentI = _ref.tableRowContentIconContainerAnimationTransitionConfigurationSettings,
    tableRowContentIconContainerAnimationTransitionConfigurationSettings = _ref$tableRowContentI === void 0 ? {} : _ref$tableRowContentI,
    _ref$highlightHeaderC = _ref.highlightHeaderContainerAnimationTransitionConfigurationSettings,
    highlightHeaderContainerAnimationTransitionConfigurationSettings = _ref$highlightHeaderC === void 0 ? {} : _ref$highlightHeaderC,
    _ref$highlightFooterC = _ref.highlightFooterContainerAnimationTransitionConfigurationSettings,
    highlightFooterContainerAnimationTransitionConfigurationSettings = _ref$highlightFooterC === void 0 ? {} : _ref$highlightFooterC,
    _ref$highlightColumnO = _ref.highlightColumnOverlayAnimationTransitionConfigurationSettings,
    highlightColumnOverlayAnimationTransitionConfigurationSettings = _ref$highlightColumnO === void 0 ? {} : _ref$highlightColumnO,
    _ref$highlightHeaderC2 = _ref.highlightHeaderContainerInitialAnimationConfigurationSettings,
    highlightHeaderContainerInitialAnimationConfigurationSettings = _ref$highlightHeaderC2 === void 0 ? {} : _ref$highlightHeaderC2,
    _ref$highlightFooterC2 = _ref.highlightFooterContainerInitialAnimationConfigurationSettings,
    highlightFooterContainerInitialAnimationConfigurationSettings = _ref$highlightFooterC2 === void 0 ? {} : _ref$highlightFooterC2,
    _ref$highlightColumnO2 = _ref.highlightColumnOverlayInitialAnimationConfigurationSettings,
    highlightColumnOverlayInitialAnimationConfigurationSettings = _ref$highlightColumnO2 === void 0 ? {} : _ref$highlightColumnO2,
    _ref$tableColumnHeade = _ref.tableColumnHeaderAnimationTransitionConfigurationSettings,
    tableColumnHeaderAnimationTransitionConfigurationSettings = _ref$tableColumnHeade === void 0 ? {} : _ref$tableColumnHeade,
    _ref$tableRowContentI2 = _ref.tableRowContentIconContainerHoverConfigurationSettings,
    tableRowContentIconContainerHoverConfigurationSettings = _ref$tableRowContentI2 === void 0 ? {} : _ref$tableRowContentI2,
    _ref$highlightHeaderC3 = _ref.highlightHeaderContainerAnimationConfigurationSettings,
    highlightHeaderContainerAnimationConfigurationSettings = _ref$highlightHeaderC3 === void 0 ? {} : _ref$highlightHeaderC3,
    _ref$highlightFooterC3 = _ref.highlightFooterContainerAnimationConfigurationSettings,
    highlightFooterContainerAnimationConfigurationSettings = _ref$highlightFooterC3 === void 0 ? {} : _ref$highlightFooterC3,
    _ref$highlightColumnO3 = _ref.highlightColumnOverlayAnimationConfigurationSettings,
    highlightColumnOverlayAnimationConfigurationSettings = _ref$highlightColumnO3 === void 0 ? {} : _ref$highlightColumnO3,
    _ref$rowToolTipAnimat = _ref.rowToolTipAnimationTransitionConfigurationSettings,
    rowToolTipAnimationTransitionConfigurationSettings = _ref$rowToolTipAnimat === void 0 ? {} : _ref$rowToolTipAnimat,
    _ref$rowToolTipInitia = _ref.rowToolTipInitialAnimationConfigurationSettings,
    rowToolTipInitialAnimationConfigurationSettings = _ref$rowToolTipInitia === void 0 ? {} : _ref$rowToolTipInitia,
    _ref$rowToolTipExitAn = _ref.rowToolTipExitAnimationConfigurationSettings,
    rowToolTipExitAnimationConfigurationSettings = _ref$rowToolTipExitAn === void 0 ? {} : _ref$rowToolTipExitAn,
    _ref$rowToolTipAnimat2 = _ref.rowToolTipAnimationConfigurationSettings,
    rowToolTipAnimationConfigurationSettings = _ref$rowToolTipAnimat2 === void 0 ? {} : _ref$rowToolTipAnimat2,
    _ref$tableRowContentI3 = _ref.tableRowContentIconConfigurationSettings,
    tableRowContentIconConfigurationSettings = _ref$tableRowContentI3 === void 0 ? {} : _ref$tableRowContentI3,
    _ref$tableRowContentI4 = _ref.tableRowContentIconContainerConfigurationSettings,
    tableRowContentIconContainerConfigurationSettings = _ref$tableRowContentI4 === void 0 ? {} : _ref$tableRowContentI4,
    _ref$tableRowAnimatio = _ref.tableRowAnimationTransitionConfigurationSettings,
    tableRowAnimationTransitionConfigurationSettings = _ref$tableRowAnimatio === void 0 ? {} : _ref$tableRowAnimatio,
    _ref$tableRowInitialA = _ref.tableRowInitialAnimationConfigurationSettings,
    tableRowInitialAnimationConfigurationSettings = _ref$tableRowInitialA === void 0 ? {} : _ref$tableRowInitialA,
    _ref$tableRowContentC = _ref.tableRowContentContainerConfigurationSettings,
    tableRowContentContainerConfigurationSettings = _ref$tableRowContentC === void 0 ? {} : _ref$tableRowContentC,
    _ref$comparisonTableC = _ref.comparisonTableContainerConfigurationSettings,
    comparisonTableContainerConfigurationSettings = _ref$comparisonTableC === void 0 ? {} : _ref$comparisonTableC,
    _ref$highlightHeaderC4 = _ref.highlightHeaderContainerConfigurationSettings,
    highlightHeaderContainerConfigurationSettings = _ref$highlightHeaderC4 === void 0 ? {} : _ref$highlightHeaderC4,
    _ref$highlightFooterC4 = _ref.highlightFooterContainerConfigurationSettings,
    highlightFooterContainerConfigurationSettings = _ref$highlightFooterC4 === void 0 ? {} : _ref$highlightFooterC4,
    _ref$tableContainerHo = _ref.tableContainerHoveredRowConfigurationSettings,
    tableContainerHoveredRowConfigurationSettings = _ref$tableContainerHo === void 0 ? {} : _ref$tableContainerHo,
    _ref$tableRowFeatures = _ref.tableRowFeaturesContentConfigurationSettings,
    tableRowFeaturesContentConfigurationSettings = _ref$tableRowFeatures === void 0 ? {} : _ref$tableRowFeatures,
    _ref$tableColumnHeade2 = _ref.tableColumnHeaderHoverConfigurationSettings,
    tableColumnHeaderHoverConfigurationSettings = _ref$tableColumnHeade2 === void 0 ? {} : _ref$tableColumnHeade2,
    _ref$highlightColumnO4 = _ref.highlightColumnOverlayConfigurationSettings,
    highlightColumnOverlayConfigurationSettings = _ref$highlightColumnO4 === void 0 ? {} : _ref$highlightColumnO4,
    _ref$featuresColumnHe = _ref.featuresColumnHeaderConfigurationSettings,
    featuresColumnHeaderConfigurationSettings = _ref$featuresColumnHe === void 0 ? {} : _ref$featuresColumnHe,
    _ref$tableRowAnimatio2 = _ref.tableRowAnimationConfigurationSettings,
    tableRowAnimationConfigurationSettings = _ref$tableRowAnimatio2 === void 0 ? {} : _ref$tableRowAnimatio2,
    _ref$tableColumnHeade3 = _ref.tableColumnHeaderConfigurationSettings,
    tableColumnHeaderConfigurationSettings = _ref$tableColumnHeade3 === void 0 ? {} : _ref$tableColumnHeade3,
    _ref$tableContainerCo = _ref.tableContainerConfigurationSettings,
    tableContainerConfigurationSettings = _ref$tableContainerCo === void 0 ? {} : _ref$tableContainerCo,
    _ref$rowToolTipConfig = _ref.rowToolTipConfigurationSettings,
    rowToolTipConfigurationSettings = _ref$rowToolTipConfig === void 0 ? {} : _ref$rowToolTipConfig,
    _ref$tableConfigurati = _ref.tableConfigurationSettings,
    tableConfigurationSettings = _ref$tableConfigurati === void 0 ? {} : _ref$tableConfigurati,
    _ref$tableRowContentI5 = _ref.tableRowContentIconContainerConfigurations,
    tableRowContentIconContainerConfigurations = _ref$tableRowContentI5 === void 0 ? {} : _ref$tableRowContentI5,
    _ref$comparisonTableC2 = _ref.comparisonTableContainerConfigurations,
    comparisonTableContainerConfigurations = _ref$comparisonTableC2 === void 0 ? {} : _ref$comparisonTableC2,
    _ref$highlightHeaderC5 = _ref.highlightHeaderContainerConfigurations,
    highlightHeaderContainerConfigurations = _ref$highlightHeaderC5 === void 0 ? {} : _ref$highlightHeaderC5,
    _ref$highlightFooterC5 = _ref.highlightFooterContainerConfigurations,
    highlightFooterContainerConfigurations = _ref$highlightFooterC5 === void 0 ? {} : _ref$highlightFooterC5,
    _ref$tableRowContentC2 = _ref.tableRowContentContainerConfigurations,
    tableRowContentContainerConfigurations = _ref$tableRowContentC2 === void 0 ? {} : _ref$tableRowContentC2,
    _ref$tableRowFeatures2 = _ref.tableRowFeaturesContentConfigurations,
    tableRowFeaturesContentConfigurations = _ref$tableRowFeatures2 === void 0 ? {} : _ref$tableRowFeatures2,
    _ref$highlightColumnO5 = _ref.highlightColumnOverlayConfigurations,
    highlightColumnOverlayConfigurations = _ref$highlightColumnO5 === void 0 ? {} : _ref$highlightColumnO5,
    _ref$featuresColumnHe2 = _ref.featuresColumnHeaderConfigurations,
    featuresColumnHeaderConfigurations = _ref$featuresColumnHe2 === void 0 ? {} : _ref$featuresColumnHe2,
    _ref$tableRowContentI6 = _ref.tableRowContentIconConfigurations,
    tableRowContentIconConfigurations = _ref$tableRowContentI6 === void 0 ? {} : _ref$tableRowContentI6,
    _ref$tableColumnHeade4 = _ref.tableColumnHeaderConfigurations,
    tableColumnHeaderConfigurations = _ref$tableColumnHeade4 === void 0 ? {} : _ref$tableColumnHeade4,
    _ref$tableContainerCo2 = _ref.tableContainerConfigurations,
    tableContainerConfigurations = _ref$tableContainerCo2 === void 0 ? {} : _ref$tableContainerCo2,
    _ref$rowToolTipConfig2 = _ref.rowToolTipConfigurations,
    rowToolTipConfigurations = _ref$rowToolTipConfig2 === void 0 ? {} : _ref$rowToolTipConfig2,
    _ref$tableRowConfigur = _ref.tableRowConfigurations,
    tableRowConfigurations = _ref$tableRowConfigur === void 0 ? {} : _ref$tableRowConfigur,
    _ref$tableConfigurati2 = _ref.tableConfigurations,
    tableConfigurations = _ref$tableConfigurati2 === void 0 ? {} : _ref$tableConfigurati2,
    _ref$enableColumnHigh = _ref.enableColumnHighlighting,
    enableColumnHighlighting = _ref$enableColumnHigh === void 0 ? true : _ref$enableColumnHigh,
    _ref$showFeaturesColu = _ref.showFeaturesColumn,
    showFeaturesColumn = _ref$showFeaturesColu === void 0 ? true : _ref$showFeaturesColu,
    _ref$enableSorting = _ref.enableSorting,
    enableSorting = _ref$enableSorting === void 0 ? false : _ref$enableSorting,
    _ref$highlightColumnH = _ref.highlightColumnHeaderBackgroundHoverColor,
    highlightColumnHeaderBackgroundHoverColor = _ref$highlightColumnH === void 0 ? "rgba(0, 200, 255, 0.2)" : _ref$highlightColumnH,
    _ref$highlightColumnH2 = _ref.highlightColumnHeaderBackgroundColor,
    highlightColumnHeaderBackgroundColor = _ref$highlightColumnH2 === void 0 ? "rgba(0, 0, 0, 0.05)" : _ref$highlightColumnH2,
    _ref$highlightColumnB = _ref.highlightColumnBackgroundColor,
    highlightColumnBackgroundColor = _ref$highlightColumnB === void 0 ? "rgba(0, 169, 255, 0.2)" : _ref$highlightColumnB,
    _ref$tableRowBackgrou = _ref.tableRowBackgroundHoverColor,
    tableRowBackgroundHoverColor = _ref$tableRowBackgrou === void 0 ? "rgba(0, 200, 255, 0.2)" : _ref$tableRowBackgrou,
    _ref$tableRowBackgrou2 = _ref.tableRowBackgroundColor,
    tableRowBackgroundColor = _ref$tableRowBackgrou2 === void 0 ? "rgba(0, 0, 0, 0.05)" : _ref$tableRowBackgrou2,
    _ref$tableRowColumnCo = _ref.tableRowColumnColor,
    tableRowColumnColor = _ref$tableRowColumnCo === void 0 ? "transparent" : _ref$tableRowColumnCo,
    _ref$dimmedRowOpacity = _ref.dimmedRowOpacity,
    dimmedRowOpacity = _ref$dimmedRowOpacity === void 0 ? 0.2169 : _ref$dimmedRowOpacity,
    _ref$onColumnHeaderCl = _ref.onColumnHeaderClicked,
    onColumnHeaderClicked = _ref$onColumnHeaderCl === void 0 ? null : _ref$onColumnHeaderCl,
    _ref$onRowClicked = _ref.onRowClicked,
    onRowClicked = _ref$onRowClicked === void 0 ? null : _ref$onRowClicked,
    _ref$featuresColumnHe3 = _ref.featuresColumnHeaderContent,
    featuresColumnHeaderContent = _ref$featuresColumnHe3 === void 0 ? null : _ref$featuresColumnHe3,
    _ref$highlightHeaderA = _ref.highlightHeaderAttachment,
    highlightHeaderAttachment = _ref$highlightHeaderA === void 0 ? null : _ref$highlightHeaderA,
    _ref$highlightFooterA = _ref.highlightFooterAttachment,
    highlightFooterAttachment = _ref$highlightFooterA === void 0 ? null : _ref$highlightFooterA,
    _ref$highlightColumnO6 = _ref.highlightColumnOverlay,
    highlightColumnOverlay = _ref$highlightColumnO6 === void 0 ? null : _ref$highlightColumnO6,
    _ref$highlightColumn = _ref.highlightColumn,
    highlightColumn = _ref$highlightColumn === void 0 ? null : _ref$highlightColumn,
    _ref$footer = _ref.footer,
    footer = _ref$footer === void 0 ? null : _ref$footer,
    _ref$columns = _ref.columns,
    columns = _ref$columns === void 0 ? [] : _ref$columns,
    _ref$rows = _ref.rows,
    rows = _ref$rows === void 0 ? [] : _ref$rows;
  var _useTimeout = useTimeout(),
    schedule = _useTimeout.schedule;
  var _useState = useState({
      text: "",
      visible: false,
      x: 0,
      y: 0
    }),
    _useState2 = _slicedToArray(_useState, 2),
    tooltip = _useState2[0],
    setTooltip = _useState2[1];
  var _useState3 = useState({
      key: null,
      direction: "asc"
    }),
    _useState4 = _slicedToArray(_useState3, 2),
    sortConfig = _useState4[0],
    setSortConfig = _useState4[1];
  var _useState5 = useState(null),
    _useState6 = _slicedToArray(_useState5, 2),
    highlightColumnBounds = _useState6[0],
    setHighlightColumnBounds = _useState6[1];
  var _useState7 = useState(null),
    _useState8 = _slicedToArray(_useState7, 2),
    highlightColumnPos = _useState8[0],
    setHighlightColumnPos = _useState8[1];
  var _useState9 = useState(null),
    _useState10 = _slicedToArray(_useState9, 2),
    hoveredRow = _useState10[0],
    setHoveredRow = _useState10[1];
  var _useState11 = useState(rows),
    _useState12 = _slicedToArray(_useState11, 2),
    sortedRows = _useState12[0],
    setSortedRows = _useState12[1];
  var highlightColumnRef = useRef(null);
  var tableContainerRef = useRef(null);
  var tableRef = useRef(null);
  var handleSort = function handleSort(columnIndex) {
    if (!enableSorting) {
      return;
    }
    var newDirection = sortConfig.key === columnIndex && sortConfig.direction === "asc" ? "desc" : "asc";
    var sortedData = _toConsumableArray(sortedRows).sort(function (a, b) {
      var valA = a.values[columnIndex];
      var valB = b.values[columnIndex];
      if (_typeof(valA) === "object" || _typeof(valB) === "object") {
        return 0;
      }
      return newDirection === "asc" ? valA.toString().localeCompare(valB.toString()) : valB.toString().localeCompare(valA.toString());
    });
    setSortConfig({
      key: columnIndex,
      direction: newDirection
    });
    setSortedRows(sortedData);
  };
  var handleColumnHeaderClick = function handleColumnHeaderClick(columnIndex, columnData) {
    handleSort(columnIndex);
    if (onColumnHeaderClicked) {
      onColumnHeaderClicked(columnIndex, columnData);
    }
  };
  var updateHighlightPosition = function updateHighlightPosition() {
    schedule(function () {
      if (highlightColumnRef.current && tableRef.current) {
        var columnRect = highlightColumnRef.current.getBoundingClientRect();
        var tableRect = tableRef.current.getBoundingClientRect();
        var centeredPosition = columnRect.left + columnRect.width / 2 - tableRect.left;
        setHighlightColumnPos(centeredPosition);
        setHighlightColumnBounds({
          left: columnRect.left - tableRect.left,
          width: columnRect.width,
          height: tableRef.current.getBoundingClientRect().height
        });
      }
    }, 100);
  };
  var showTooltip = function showTooltip(text, event) {
    if (!text) {
      return;
    }
    setTooltip({
      text: text,
      visible: true,
      x: event.clientX + 15,
      y: event.clientY + 15
    });
  };
  var hideTooltip = function hideTooltip() {
    setTooltip({
      text: "",
      visible: false,
      x: 0,
      y: 0
    });
  };
  useEffect(function () {
    if (rows.length > 0) {
      setSortedRows(rows);
    }
  }, [rows]);
  useEffect(function () {
    var handleScroll = function handleScroll() {
      if (tableContainerRef.current) {
        var thead = tableContainerRef.current.querySelector("thead");
        thead.style.transform = "translateY(".concat(tableContainerRef.current.scrollTop, "px)");
      }
    };
    var container = tableContainerRef.current;
    if (container) {
      container.addEventListener("scroll", handleScroll);
    }
    return function () {
      if (container) {
        container.removeEventListener("scroll", handleScroll);
      }
    };
  }, []);
  useLayoutEffect(function () {
    updateHighlightPosition();
    window.addEventListener("resize", updateHighlightPosition);
    return function () {
      window.removeEventListener("resize", updateHighlightPosition);
    };
  }, [highlightColumn, rows]);
  useEffect(function () {
    updateHighlightPosition();
  }, [hoveredRow, showFeaturesColumn]);
  return /*#__PURE__*/React.createElement("div", _extends({
    ref: tableRef,
    style: _objectSpread({
      position: "relative",
      width: "100%",
      paddingTop: highlightHeaderAttachment ? "50px" : "0"
    }, comparisonTableContainerConfigurationSettings)
  }, comparisonTableContainerConfigurations), highlightColumn !== null && highlightHeaderAttachment && highlightColumnPos !== null && /*#__PURE__*/React.createElement(motion.div, _extends({
    initial: _objectSpread({
      opacity: 0,
      y: 10,
      left: "".concat(highlightColumnPos, "px"),
      transform: "translateX(-50%)"
    }, highlightHeaderContainerInitialAnimationConfigurationSettings),
    animate: _objectSpread({
      opacity: 1,
      y: 0,
      left: "".concat(highlightColumnPos, "px"),
      transform: "translateX(-50%)"
    }, highlightHeaderContainerAnimationConfigurationSettings),
    transition: _objectSpread({
      duration: 0.369,
      ease: "easeOut"
    }, highlightHeaderContainerAnimationTransitionConfigurationSettings),
    onAnimationComplete: updateHighlightPosition,
    style: _objectSpread({
      position: "absolute",
      whiteSpace: "nowrap",
      textAlign: "center",
      transition: "left 0.069s linear",
      transform: "translateX(-50%)",
      fontWeight: "bold",
      fontSize: "14px",
      borderRadius: "0.369rem",
      boxShadow: "0px 4px 8px rgba(0, 0, 0, 0.4)",
      backgroundColor: "#1A73E8",
      color: "#fff",
      padding: "3.69px 12.69px",
      zIndex: 100,
      left: "".concat(highlightColumnPos, "px"),
      top: "-5.69px"
    }, highlightHeaderContainerConfigurationSettings)
  }, highlightHeaderContainerConfigurations), highlightHeaderAttachment), highlightColumn !== null && highlightColumnOverlay && highlightColumnBounds && /*#__PURE__*/React.createElement(motion.div, _extends({
    initial: _objectSpread({
      opacity: 0
    }, highlightColumnOverlayInitialAnimationConfigurationSettings),
    animate: _objectSpread({
      opacity: 1
    }, highlightColumnOverlayAnimationConfigurationSettings),
    transition: _objectSpread({
      duration: 0.169
    }, highlightColumnOverlayAnimationTransitionConfigurationSettings),
    style: _objectSpread({
      position: "absolute",
      pointerEvents: "none",
      height: "".concat(highlightColumnBounds.height, "px"),
      width: "".concat(highlightColumnBounds.width, "px"),
      zIndex: 5,
      left: "".concat(highlightColumnBounds.left, "px")
    }, highlightColumnOverlayConfigurationSettings)
  }, highlightColumnOverlayConfigurations), highlightColumnOverlay(highlightColumn)), /*#__PURE__*/React.createElement(AnimatePresence, null, tooltip.visible && /*#__PURE__*/React.createElement(motion.div, _extends({
    initial: _objectSpread({
      opacity: 0,
      scale: 0.9
    }, rowToolTipInitialAnimationConfigurationSettings),
    animate: _objectSpread({
      opacity: 1,
      scale: 1
    }, rowToolTipAnimationConfigurationSettings),
    exit: _objectSpread({
      opacity: 0,
      scale: 0.9
    }, rowToolTipExitAnimationConfigurationSettings),
    transition: _objectSpread({
      duration: 0.2,
      ease: "easeOut"
    }, rowToolTipAnimationTransitionConfigurationSettings),
    style: _objectSpread({
      position: "fixed",
      pointerEvents: "none",
      whiteSpace: "nowrap",
      fontSize: "14px",
      borderRadius: "8px",
      boxShadow: "0px 0px 15px rgba(0, 255, 255, 0.69)",
      background: "rgba(20, 20, 20, 0.95)",
      color: "#fff",
      padding: "10px 15px",
      zIndex: 1000,
      left: tooltip.x,
      top: tooltip.y
    }, rowToolTipConfigurationSettings)
  }, rowToolTipConfigurations), tooltip.text)), /*#__PURE__*/React.createElement("div", _extends({
    ref: tableContainerRef,
    style: hoveredRow !== null ? _objectSpread({
      position: "relative",
      msOverflowStyle: "none",
      scrollbarWidth: "none",
      overflowY: "auto",
      transition: "all 0.3s ease",
      backdropFilter: "blur(10px)",
      border: "1px solid rgba(255, 255, 255, 0.1)",
      borderRadius: "12px",
      boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.5)",
      backgroundColor: "rgba(25, 25, 25, 0.9)",
      maxHeight: "600px",
      width: "100%",
      padding: "10px",
      paddingLeft: "27px"
    }, tableContainerHoveredRowConfigurationSettings) : _objectSpread({
      position: "relative",
      msOverflowStyle: "none",
      scrollbarWidth: "none",
      overflowY: "auto",
      transition: "all 0.3s ease",
      backdropFilter: "blur(10px)",
      border: "1px solid rgba(255, 255, 255, 0.1)",
      borderRadius: "12px",
      boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.5)",
      backgroundColor: "rgba(25, 25, 25, 0.9)",
      maxHeight: "500px",
      width: "100%",
      padding: "10px"
    }, tableContainerConfigurationSettings)
  }, tableContainerConfigurations), /*#__PURE__*/React.createElement("table", _extends({
    style: _objectSpread({
      position: "relative",
      borderCollapse: "collapse",
      textAlign: "left",
      fontFamily: "'Poppins', sans-serif",
      fontSize: "16px",
      color: "#FFF",
      width: "100%",
      zIndex: 10
    }, tableConfigurationSettings)
  }, tableConfigurations), /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, showFeaturesColumn && /*#__PURE__*/React.createElement("th", _extends({
    style: _objectSpread({
      textAlign: "left",
      fontSize: "18.69px",
      padding: "12px"
    }, featuresColumnHeaderConfigurationSettings)
  }, featuresColumnHeaderConfigurations), featuresColumnHeaderContent ? featuresColumnHeaderContent : "Features"), columns.map(function (col, index) {
    return /*#__PURE__*/React.createElement(motion.th, _extends({
      key: index,
      ref: index === highlightColumn ? highlightColumnRef : null,
      whileHover: _objectSpread({
        backgroundColor: "rgba(0, 255, 255, 0.2)",
        scale: 1.069
      }, tableColumnHeaderHoverConfigurationSettings),
      transition: _objectSpread({
        duration: 0.3
      }, tableColumnHeaderAnimationTransitionConfigurationSettings),
      style: _objectSpread({
        cursor: enableSorting ? "pointer" : "default",
        userSelect: "none",
        textAlign: "center",
        fontSize: "17.69px",
        background: highlightColumn === index ? highlightColumnHeaderBackgroundHoverColor : highlightColumnHeaderBackgroundColor,
        padding: "12px"
      }, tableColumnHeaderConfigurationSettings),
      onClick: function onClick() {
        return handleColumnHeaderClick(index, col);
      }
    }, tableColumnHeaderConfigurations), col.title);
  }))), /*#__PURE__*/React.createElement("tbody", null, sortedRows.map(function (row, rowIndex) {
    return /*#__PURE__*/React.createElement(motion.tr, _extends({
      key: rowIndex,
      initial: _objectSpread({
        opacity: 1,
        scale: 1
      }, tableRowInitialAnimationConfigurationSettings),
      animate: _objectSpread({
        backgroundColor: hoveredRow === rowIndex ? tableRowBackgroundHoverColor : tableRowBackgroundColor,
        opacity: hoveredRow !== null && hoveredRow !== rowIndex ? dimmedRowOpacity : 1,
        scale: hoveredRow === rowIndex ? 1.05 : 1,
        zIndex: hoveredRow === rowIndex ? 20 : 10
      }, tableRowAnimationConfigurationSettings),
      transition: _objectSpread({
        duration: 0.3
      }, tableRowAnimationTransitionConfigurationSettings),
      onMouseLeave: function onMouseLeave() {
        return setHoveredRow(null);
      },
      onMouseEnter: function onMouseEnter() {
        return setHoveredRow(rowIndex);
      },
      onClick: function onClick() {
        if (onRowClicked) {
          onRowClicked(rowIndex, row);
        }
      }
    }, tableRowConfigurations), showFeaturesColumn && /*#__PURE__*/React.createElement("td", _extends({
      style: _objectSpread({
        fontWeight: "500",
        padding: "12px"
      }, tableRowFeaturesContentConfigurationSettings)
    }, tableRowFeaturesContentConfigurations), row.feature), columns.map(function (col, colIndex) {
      var _row$values$colIndex, _row$values$colIndex2;
      return /*#__PURE__*/React.createElement("td", _extends({
        key: colIndex,
        style: _objectSpread({
          textAlign: "center",
          backgroundColor: enableColumnHighlighting && highlightColumn === colIndex ? highlightColumnBackgroundColor : tableRowColumnColor,
          padding: "12px"
        }, tableRowContentContainerConfigurationSettings)
      }, tableRowContentContainerConfigurations), (_row$values$colIndex = row.values[colIndex]) !== null && _row$values$colIndex !== void 0 && _row$values$colIndex.component ? row.values[colIndex].component : (_row$values$colIndex2 = row.values[colIndex]) !== null && _row$values$colIndex2 !== void 0 && _row$values$colIndex2.name ? /*#__PURE__*/React.createElement(motion.div, _extends({
        whileHover: _objectSpread({
          scale: 1.5
        }, tableRowContentIconContainerHoverConfigurationSettings),
        transition: _objectSpread({
          duration: 0.2
        }, tableRowContentIconContainerAnimationTransitionConfigurationSettings)
      }, tableRowContentIconContainerConfigurations), /*#__PURE__*/React.createElement(HUDIcon, _extends({}, row.values[colIndex], {
        iconConfigurationSettings: _objectSpread({
          fontSize: "26px"
        }, tableRowContentIconConfigurationSettings)
      }, tableRowContentIconConfigurations))) : row.values[colIndex] || "—");
    }));
  })))), highlightColumn !== null && highlightFooterAttachment && highlightColumnPos !== null && /*#__PURE__*/React.createElement(motion.div, _extends({
    initial: _objectSpread({
      opacity: 0,
      y: -10,
      left: "".concat(highlightColumnPos, "px"),
      transform: "translateX(-50%)"
    }, highlightFooterContainerInitialAnimationConfigurationSettings),
    animate: _objectSpread({
      opacity: 1,
      y: 0,
      left: "".concat(highlightColumnPos, "px"),
      transform: "translateX(-50%)"
    }, highlightFooterContainerAnimationConfigurationSettings),
    transition: _objectSpread({
      duration: 0.369,
      ease: "easeOut"
    }, highlightFooterContainerAnimationTransitionConfigurationSettings),
    onAnimationComplete: updateHighlightPosition,
    style: _objectSpread({
      position: "absolute",
      textAlign: "center",
      transform: "translateX(-50%)",
      fontWeight: "bold",
      fontSize: "14px",
      borderRadius: "25px",
      backgroundColor: "rgba(255, 255, 255, 0.1)",
      zIndex: 100,
      padding: "12px 24px",
      bottom: "-45px",
      left: "".concat(highlightColumnPos, "px")
    }, highlightFooterContainerConfigurationSettings)
  }, highlightFooterContainerConfigurations), highlightFooterAttachment));
}
export default HUDComparisonTable;