@trap_stevo/legendarybuilderproreact-ui/dist/HUDComponents/HUDGroupedList.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 _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
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, useRef, useMemo, useCallback } from "react";
import { Debounce } from "../HUDManagers/HUDUniversalHUDUtilityManager.js";
import HUDIcon from "./HUDIcon.js";
var parsePx = function parsePx(v) {
  if (v == null) {
    return 0;
  }
  if (typeof v === "number") {
    return v;
  }
  var m = String(v).match(/([\d.]+)/);
  return m ? Number(m[1]) : 0;
};
var GroupedSection = /*#__PURE__*/React.memo(function GroupedSection(_ref) {
  var groupedListSectionHeaderContainerHoverConfigurationSettings = _ref.groupedListSectionHeaderContainerHoverConfigurationSettings,
    groupedListSectionFooterContainerHoverConfigurationSettings = _ref.groupedListSectionFooterContainerHoverConfigurationSettings,
    groupedListSectionCollapseButtonHoverConfigurationSettings = _ref.groupedListSectionCollapseButtonHoverConfigurationSettings,
    groupedListSectionFooterContainerConfigurationSettings = _ref.groupedListSectionFooterContainerConfigurationSettings,
    groupedListSectionHeaderContainerConfigurationSettings = _ref.groupedListSectionHeaderContainerConfigurationSettings,
    groupedListSectionContainerHoverConfigurationSettings = _ref.groupedListSectionContainerHoverConfigurationSettings,
    groupedListSectionCollapseButtonConfigurationSettings = _ref.groupedListSectionCollapseButtonConfigurationSettings,
    groupedListSectionContentHoverConfigurationSettings = _ref.groupedListSectionContentHoverConfigurationSettings,
    groupedListSectionContainerConfigurationSettings = _ref.groupedListSectionContainerConfigurationSettings,
    groupedListSectionContentConfigurationSettings = _ref.groupedListSectionContentConfigurationSettings,
    groupedListSectionConfigurationSettings = _ref.groupedListSectionConfigurationSettings,
    groupedListSectionHeaderContainerConfigurations = _ref.groupedListSectionHeaderContainerConfigurations,
    groupedListSectionFooterContainerConfigurations = _ref.groupedListSectionFooterContainerConfigurations,
    groupedListSectionCollapseButtonConfigurations = _ref.groupedListSectionCollapseButtonConfigurations,
    groupedListSectionContainerConfigurations = _ref.groupedListSectionContainerConfigurations,
    groupedListSectionConfigurations = _ref.groupedListSectionConfigurations,
    onSectionCollapseButtonClicked = _ref.onSectionCollapseButtonClicked,
    collapseButtonRenderer = _ref.collapseButtonRenderer,
    handleToggleCollapse = _ref.handleToggleCollapse,
    itemKeyExtractor = _ref.itemKeyExtractor,
    onSectionEnter = _ref.onSectionEnter,
    onSectionLeave = _ref.onSectionLeave,
    onItemEnter = _ref.onItemEnter,
    onItemLeave = _ref.onItemLeave,
    onItemClick = _ref.onItemClick,
    renderSectionHeader = _ref.renderSectionHeader,
    renderSectionFooter = _ref.renderSectionFooter,
    renderCell = _ref.renderCell,
    groupedListSectionCollapsedButtonIconHoverColor = _ref.groupedListSectionCollapsedButtonIconHoverColor,
    groupedListSectionCollapsedButtonIconColor = _ref.groupedListSectionCollapsedButtonIconColor,
    groupedListSectionCollapsedButtonIcon = _ref.groupedListSectionCollapsedButtonIcon,
    groupedListSectionCollapseButtonIcon = _ref.groupedListSectionCollapseButtonIcon,
    setCollapseButtonHover = _ref.setCollapseButtonHover,
    collapseButtonHover = _ref.collapseButtonHover,
    collapsibleSections = _ref.collapsibleSections,
    collapsedSections = _ref.collapsedSections,
    sectionItemHover = _ref.sectionItemHover,
    stickyHeaders = _ref.stickyHeaders,
    sectionHover = _ref.sectionHover,
    sectionRefs = _ref.sectionRefs,
    section = _ref.section,
    sIndex = _ref.sIndex,
    layout = _ref.layout;
  var containerStyle = useMemo(function () {
    return _objectSpread(_objectSpread({
      overflow: "hidden",
      scrollSnapAlign: "start",
      borderRadius: "8px",
      boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
      background: "#fff",
      marginBottom: "15px"
    }, groupedListSectionContainerConfigurationSettings), sectionHover === sIndex && groupedListSectionContainerHoverConfigurationSettings ? groupedListSectionContainerHoverConfigurationSettings : {});
  }, [groupedListSectionContainerConfigurationSettings, groupedListSectionContainerHoverConfigurationSettings, sectionHover, sIndex]);
  var headerStyle = useMemo(function () {
    return _objectSpread(_objectSpread({
      position: stickyHeaders ? "sticky" : "relative",
      display: "flex",
      justifyContent: "space-between",
      alignItems: "center",
      fontWeight: "bold",
      background: "#f8f9fa",
      zIndex: 10,
      padding: "10px 15px",
      top: stickyHeaders ? 0 : "auto"
    }, groupedListSectionHeaderContainerConfigurationSettings), sectionHover === sIndex && groupedListSectionHeaderContainerHoverConfigurationSettings ? groupedListSectionHeaderContainerHoverConfigurationSettings : {});
  }, [stickyHeaders, groupedListSectionHeaderContainerConfigurationSettings, groupedListSectionHeaderContainerHoverConfigurationSettings, sectionHover, sIndex]);
  var bodyStyle = useMemo(function () {
    var _groupedListSectionHe;
    var padTop = stickyHeaders ? (_groupedListSectionHe = groupedListSectionHeaderContainerConfigurationSettings === null || groupedListSectionHeaderContainerConfigurationSettings === void 0 ? void 0 : groupedListSectionHeaderContainerConfigurationSettings.height) !== null && _groupedListSectionHe !== void 0 ? _groupedListSectionHe : 0 : 0;
    return _objectSpread({
      display: layout === "horizontal" ? "flex" : "block",
      gap: "10px",
      padding: "10px 15px",
      paddingTop: padTop
    }, groupedListSectionConfigurationSettings);
  }, [layout, stickyHeaders, groupedListSectionConfigurationSettings, groupedListSectionHeaderContainerConfigurationSettings === null || groupedListSectionHeaderContainerConfigurationSettings === void 0 ? void 0 : groupedListSectionHeaderContainerConfigurationSettings.height]);
  var footerStyle = useMemo(function () {
    return _objectSpread(_objectSpread({
      fontStyle: "italic",
      fontSize: "14px",
      background: "#f8f9fa",
      padding: "10px 15px"
    }, groupedListSectionFooterContainerConfigurationSettings), sectionHover === sIndex && groupedListSectionFooterContainerHoverConfigurationSettings ? groupedListSectionFooterContainerHoverConfigurationSettings : {});
  }, [groupedListSectionFooterContainerConfigurationSettings, groupedListSectionFooterContainerHoverConfigurationSettings, sectionHover, sIndex]);
  return /*#__PURE__*/React.createElement("div", _extends({
    ref: function ref(el) {
      return sectionRefs.current[sIndex] = el;
    },
    className: "hud-section",
    style: containerStyle,
    onMouseEnter: function onMouseEnter() {
      return onSectionEnter(section, sIndex);
    },
    onMouseLeave: function onMouseLeave() {
      return onSectionLeave(sIndex);
    }
  }, groupedListSectionContainerConfigurations), renderSectionHeader && /*#__PURE__*/React.createElement("div", _extends({
    style: headerStyle
  }, groupedListSectionHeaderContainerConfigurations), renderSectionHeader(section.header, section, sIndex), collapsibleSections && (collapseButtonRenderer ? collapseButtonRenderer({
    isCollapsed: collapsedSections[sIndex],
    onToggle: function onToggle() {
      return handleToggleCollapse(sIndex);
    }
  }) : /*#__PURE__*/React.createElement(HUDIcon, _extends({
    iconConfigurationSettings: _objectSpread(_objectSpread({
      transition: "all 0.369s ease-out",
      cursor: "pointer",
      background: "transparent"
    }, groupedListSectionCollapseButtonConfigurationSettings), (collapseButtonHover === sIndex || collapsedSections[sIndex]) && groupedListSectionCollapseButtonHoverConfigurationSettings ? groupedListSectionCollapseButtonHoverConfigurationSettings : {}),
    onMouseEnter: function onMouseEnter() {
      return setCollapseButtonHover(sIndex);
    },
    onMouseLeave: function onMouseLeave() {
      return setCollapseButtonHover(null);
    },
    onClick: function onClick() {
      handleToggleCollapse(sIndex);
      onSectionCollapseButtonClicked && onSectionCollapseButtonClicked(sIndex, !collapsedSections[sIndex]);
    },
    color: collapseButtonHover === sIndex || collapsedSections[sIndex] ? groupedListSectionCollapsedButtonIconHoverColor : groupedListSectionCollapsedButtonIconColor,
    name: collapsedSections[sIndex] ? groupedListSectionCollapsedButtonIcon : groupedListSectionCollapseButtonIcon
  }, groupedListSectionCollapseButtonConfigurations)))), !collapsedSections[sIndex] && /*#__PURE__*/React.createElement("div", _extends({
    style: bodyStyle
  }, groupedListSectionConfigurations), section.filteredItems.map(function (item, iIndex) {
    var key = itemKeyExtractor(item, iIndex, section);
    var hovered = sectionItemHover.section === sIndex && sectionItemHover.item === iIndex;
    return /*#__PURE__*/React.createElement(GroupedItem, {
      key: key,
      groupedListSectionContentHoverConfigurationSettings: groupedListSectionContentHoverConfigurationSettings,
      groupedListSectionContentConfigurationSettings: groupedListSectionContentConfigurationSettings,
      onItemEnter: onItemEnter,
      onItemLeave: onItemLeave,
      onItemClick: onItemClick,
      renderCell: renderCell,
      hovered: hovered,
      section: section,
      sIndex: sIndex,
      iIndex: iIndex,
      item: item
    });
  })), renderSectionFooter && /*#__PURE__*/React.createElement("div", _extends({
    style: footerStyle
  }, groupedListSectionFooterContainerConfigurations), renderSectionFooter(section.footer, section, sIndex)));
});
var GroupedItem = /*#__PURE__*/React.memo(function GroupedItem(_ref2) {
  var groupedListSectionContentHoverConfigurationSettings = _ref2.groupedListSectionContentHoverConfigurationSettings,
    groupedListSectionContentConfigurationSettings = _ref2.groupedListSectionContentConfigurationSettings,
    onItemEnter = _ref2.onItemEnter,
    onItemLeave = _ref2.onItemLeave,
    onItemClick = _ref2.onItemClick,
    renderCell = _ref2.renderCell,
    hovered = _ref2.hovered,
    section = _ref2.section,
    sIndex = _ref2.sIndex,
    iIndex = _ref2.iIndex,
    item = _ref2.item;
  var style = useMemo(function () {
    return _objectSpread(_objectSpread({
      borderRadius: "6px",
      boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
      background: "#e9ecef",
      padding: "10px"
    }, groupedListSectionContentConfigurationSettings), hovered && groupedListSectionContentHoverConfigurationSettings ? groupedListSectionContentHoverConfigurationSettings : {});
  }, [groupedListSectionContentConfigurationSettings, groupedListSectionContentHoverConfigurationSettings, hovered]);
  return /*#__PURE__*/React.createElement("div", {
    style: style,
    onMouseEnter: function onMouseEnter() {
      return onItemEnter(sIndex, item, iIndex);
    },
    onMouseLeave: function onMouseLeave() {
      return onItemLeave(sIndex);
    },
    onClick: function onClick() {
      return onItemClick(item, section);
    }
  }, renderCell ? renderCell(item, iIndex, section) : /*#__PURE__*/React.createElement("div", {
    style: {
      padding: "6px 8px"
    }
  }, JSON.stringify(item)));
}, function (prev, next) {
  return prev.item === next.item && prev.iIndex === next.iIndex && prev.sIndex === next.sIndex && prev.hovered === next.hovered && prev.renderCell === next.renderCell && prev.groupedListSectionContentConfigurationSettings === next.groupedListSectionContentConfigurationSettings && prev.groupedListSectionContentHoverConfigurationSettings === next.groupedListSectionContentHoverConfigurationSettings;
});
function HUDGroupedList(_ref3) {
  var _ref3$groupedListSect = _ref3.groupedListSectionHeaderContainerHoverConfigurationSettings,
    groupedListSectionHeaderContainerHoverConfigurationSettings = _ref3$groupedListSect === void 0 ? {} : _ref3$groupedListSect,
    _ref3$groupedListSect2 = _ref3.groupedListSectionFooterContainerHoverConfigurationSettings,
    groupedListSectionFooterContainerHoverConfigurationSettings = _ref3$groupedListSect2 === void 0 ? {} : _ref3$groupedListSect2,
    _ref3$groupedListSect3 = _ref3.groupedListSectionCollapseButtonHoverConfigurationSettings,
    groupedListSectionCollapseButtonHoverConfigurationSettings = _ref3$groupedListSect3 === void 0 ? {} : _ref3$groupedListSect3,
    _ref3$groupedListSect4 = _ref3.groupedListSectionHeaderContainerConfigurationSettings,
    groupedListSectionHeaderContainerConfigurationSettings = _ref3$groupedListSect4 === void 0 ? {} : _ref3$groupedListSect4,
    _ref3$groupedListSect5 = _ref3.groupedListSectionFooterContainerConfigurationSettings,
    groupedListSectionFooterContainerConfigurationSettings = _ref3$groupedListSect5 === void 0 ? {} : _ref3$groupedListSect5,
    _ref3$groupedListSect6 = _ref3.groupedListSectionCollapseButtonConfigurationSettings,
    groupedListSectionCollapseButtonConfigurationSettings = _ref3$groupedListSect6 === void 0 ? {} : _ref3$groupedListSect6,
    _ref3$groupedListSect7 = _ref3.groupedListSectionContainerHoverConfigurationSettings,
    groupedListSectionContainerHoverConfigurationSettings = _ref3$groupedListSect7 === void 0 ? {} : _ref3$groupedListSect7,
    _ref3$groupedListSect8 = _ref3.groupedListSectionContentHoverConfigurationSettings,
    groupedListSectionContentHoverConfigurationSettings = _ref3$groupedListSect8 === void 0 ? {} : _ref3$groupedListSect8,
    _ref3$groupedListSect9 = _ref3.groupedListSectionContainerConfigurationSettings,
    groupedListSectionContainerConfigurationSettings = _ref3$groupedListSect9 === void 0 ? {} : _ref3$groupedListSect9,
    _ref3$groupedListSect10 = _ref3.groupedListSectionContentConfigurationSettings,
    groupedListSectionContentConfigurationSettings = _ref3$groupedListSect10 === void 0 ? {} : _ref3$groupedListSect10,
    _ref3$groupedListCont = _ref3.groupedListContainerConfigurationSettings,
    groupedListContainerConfigurationSettings = _ref3$groupedListCont === void 0 ? {} : _ref3$groupedListCont,
    _ref3$groupedListSect11 = _ref3.groupedListSectionConfigurationSettings,
    groupedListSectionConfigurationSettings = _ref3$groupedListSect11 === void 0 ? {} : _ref3$groupedListSect11,
    _ref3$groupedListSect12 = _ref3.groupedListSectionHeaderContainerConfigurations,
    groupedListSectionHeaderContainerConfigurations = _ref3$groupedListSect12 === void 0 ? {} : _ref3$groupedListSect12,
    _ref3$groupedListSect13 = _ref3.groupedListSectionFooterContainerConfigurations,
    groupedListSectionFooterContainerConfigurations = _ref3$groupedListSect13 === void 0 ? {} : _ref3$groupedListSect13,
    _ref3$groupedListSect14 = _ref3.groupedListSectionCollapseButtonConfigurations,
    groupedListSectionCollapseButtonConfigurations = _ref3$groupedListSect14 === void 0 ? {} : _ref3$groupedListSect14,
    _ref3$groupedListSect15 = _ref3.groupedListSectionContainerConfigurations,
    groupedListSectionContainerConfigurations = _ref3$groupedListSect15 === void 0 ? {} : _ref3$groupedListSect15,
    _ref3$groupedListSect16 = _ref3.groupedListSectionConfigurations,
    groupedListSectionConfigurations = _ref3$groupedListSect16 === void 0 ? {} : _ref3$groupedListSect16,
    _ref3$groupedListSect17 = _ref3.groupedListSectionCollapsedButtonIconHoverColor,
    groupedListSectionCollapsedButtonIconHoverColor = _ref3$groupedListSect17 === void 0 ? "rgba(147.69, 147.69, 147.69, 1)" : _ref3$groupedListSect17,
    _ref3$groupedListSect18 = _ref3.groupedListSectionCollapsedButtonIconColor,
    groupedListSectionCollapsedButtonIconColor = _ref3$groupedListSect18 === void 0 ? "rgba(115.69, 115.69, 115.69, 1)" : _ref3$groupedListSect18,
    _ref3$groupedListSect19 = _ref3.groupedListSectionCollapsedButtonIcon,
    groupedListSectionCollapsedButtonIcon = _ref3$groupedListSect19 === void 0 ? "plus" : _ref3$groupedListSect19,
    _ref3$groupedListSect20 = _ref3.groupedListSectionCollapseButtonIcon,
    groupedListSectionCollapseButtonIcon = _ref3$groupedListSect20 === void 0 ? "minus" : _ref3$groupedListSect20,
    _ref3$itemKeyExtracto = _ref3.itemKeyExtractor,
    itemKeyExtractor = _ref3$itemKeyExtracto === void 0 ? function (item, index, section) {
      return index;
    } : _ref3$itemKeyExtracto,
    _ref3$sectionKeyExtra = _ref3.sectionKeyExtractor,
    sectionKeyExtractor = _ref3$sectionKeyExtra === void 0 ? function (section, index) {
      return index;
    } : _ref3$sectionKeyExtra,
    _ref3$onSectionCollap = _ref3.onSectionCollapseButtonClicked,
    onSectionCollapseButtonClicked = _ref3$onSectionCollap === void 0 ? null : _ref3$onSectionCollap,
    _ref3$onSectionHovere = _ref3.onSectionHovered,
    onSectionHovered = _ref3$onSectionHovere === void 0 ? null : _ref3$onSectionHovere,
    _ref3$onGroupingUpdat = _ref3.onGroupingUpdate,
    onGroupingUpdate = _ref3$onGroupingUpdat === void 0 ? null : _ref3$onGroupingUpdat,
    _ref3$onItemSelected = _ref3.onItemSelected,
    onItemSelected = _ref3$onItemSelected === void 0 ? null : _ref3$onItemSelected,
    _ref3$onItemHovered = _ref3.onItemHovered,
    onItemHovered = _ref3$onItemHovered === void 0 ? null : _ref3$onItemHovered,
    collapseButtonRenderer = _ref3.collapseButtonRenderer,
    renderSectionHeader = _ref3.renderSectionHeader,
    renderSectionFooter = _ref3.renderSectionFooter,
    renderCell = _ref3.renderCell,
    _ref3$snappingDebounc = _ref3.snappingDebounce,
    snappingDebounce = _ref3$snappingDebounc === void 0 ? 13.69 : _ref3$snappingDebounc,
    _ref3$snapping = _ref3.snapping,
    snapping = _ref3$snapping === void 0 ? true : _ref3$snapping,
    _ref3$stickyHeaders = _ref3.stickyHeaders,
    stickyHeaders = _ref3$stickyHeaders === void 0 ? false : _ref3$stickyHeaders,
    _ref3$collapsibleSect = _ref3.collapsibleSections,
    collapsibleSections = _ref3$collapsibleSect === void 0 ? false : _ref3$collapsibleSect,
    _ref3$collapseAllSect = _ref3.collapseAllSections,
    collapseAllSections = _ref3$collapseAllSect === void 0 ? false : _ref3$collapseAllSect,
    _ref3$expandAllSectio = _ref3.expandAllSections,
    expandAllSections = _ref3$expandAllSectio === void 0 ? false : _ref3$expandAllSectio,
    _ref3$resetPreviously = _ref3.resetPreviouslyAutoExpandedSections,
    resetPreviouslyAutoExpandedSections = _ref3$resetPreviously === void 0 ? false : _ref3$resetPreviously,
    _ref3$autoSectionColl = _ref3.autoSectionCollapseMap,
    autoSectionCollapseMap = _ref3$autoSectionColl === void 0 ? null : _ref3$autoSectionColl,
    _ref3$collapseSection = _ref3.collapseSectionsOnLoad,
    collapseSectionsOnLoad = _ref3$collapseSection === void 0 ? {} : _ref3$collapseSection,
    _ref3$groupingInterva = _ref3.groupingInterval,
    groupingInterval = _ref3$groupingInterva === void 0 ? null : _ref3$groupingInterva,
    _ref3$groupingRules = _ref3.groupingRules,
    groupingRules = _ref3$groupingRules === void 0 ? [] : _ref3$groupingRules,
    _ref3$sortingRules = _ref3.sortingRules,
    sortingRules = _ref3$sortingRules === void 0 ? [] : _ref3$sortingRules,
    _ref3$searchTerm = _ref3.searchTerm,
    searchTerm = _ref3$searchTerm === void 0 ? "" : _ref3$searchTerm,
    _ref3$headerFilterKey = _ref3.headerFilterKeys,
    headerFilterKeys = _ref3$headerFilterKey === void 0 ? [] : _ref3$headerFilterKey,
    _ref3$itemFilterKeys = _ref3.itemFilterKeys,
    itemFilterKeys = _ref3$itemFilterKeys === void 0 ? [] : _ref3$itemFilterKeys,
    customHeaderFilter = _ref3.customHeaderFilter,
    customItemFilter = _ref3.customItemFilter,
    _ref3$minDistanceForS = _ref3.minDistanceForSmooth,
    minDistanceForSmooth = _ref3$minDistanceForS === void 0 ? 24 : _ref3$minDistanceForS,
    _ref3$snapThresholdPx = _ref3.snapThresholdPx,
    snapThresholdPx = _ref3$snapThresholdPx === void 0 ? 56 : _ref3$snapThresholdPx,
    snapIdleMs = _ref3.snapIdleMs,
    _ref3$layout = _ref3.layout,
    layout = _ref3$layout === void 0 ? "vertical" : _ref3$layout,
    _ref3$data = _ref3.data,
    data = _ref3$data === void 0 ? [] : _ref3$data;
  var _useState = useState(function () {
      return _objectSpread({}, collapseSectionsOnLoad);
    }),
    _useState2 = _slicedToArray(_useState, 2),
    collapsedSections = _useState2[0],
    setCollapsedSections = _useState2[1];
  var _useState3 = useState({
      section: null,
      item: null
    }),
    _useState4 = _slicedToArray(_useState3, 2),
    sectionItemHover = _useState4[0],
    setSectionItemHover = _useState4[1];
  var _useState5 = useState(null),
    _useState6 = _slicedToArray(_useState5, 2),
    collapseButtonHover = _useState6[0],
    setCollapseButtonHover = _useState6[1];
  var _useState7 = useState(null),
    _useState8 = _slicedToArray(_useState7, 2),
    sectionHover = _useState8[0],
    setSectionHover = _useState8[1];
  var _useState9 = useState([]),
    _useState10 = _slicedToArray(_useState9, 2),
    groupedData = _useState10[0],
    setGroupedData = _useState10[1];
  var pCollapsedAllSections = useRef(false);
  var pExpandedAllSections = useRef(false);
  var prevCollapseMapRef = useRef(null);
  var lastUserScrollAtRef = useRef(0);
  var sectionOffsetsRef = useRef([]);
  var snappingRef = useRef(false);
  var containerRef = useRef(null);
  var sectionRefs = useRef([]);
  var rafIdRef = useRef(null);
  var stickyHeaderHeight = stickyHeaders ? parsePx(groupedListSectionHeaderContainerConfigurationSettings === null || groupedListSectionHeaderContainerConfigurationSettings === void 0 ? void 0 : groupedListSectionHeaderContainerConfigurationSettings.height) : 0;
  var containerStyle = useMemo(function () {
    return _objectSpread({
      position: "relative",
      display: layout === "horizontal" ? "flex" : "block",
      overflow: "auto",
      overscrollBehavior: "contain",
      scrollSnapType: "none",
      border: "1px solid #ddd",
      borderRadius: "10px",
      background: "#f5f5f5",
      maxHeight: "100vh",
      padding: "10px"
    }, groupedListContainerConfigurationSettings);
  }, [layout, groupedListContainerConfigurationSettings]);
  var handleToggleCollapse = useCallback(function (sectionIndex) {
    setCollapsedSections(function (prev) {
      return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, sectionIndex, !prev[sectionIndex]));
    });
  }, []);
  var applySortingRules = useCallback(function (groups) {
    if (!sortingRules.length) {
      return groups;
    }
    var sortItems = function sortItems(items) {
      var out = _toConsumableArray(items);
      sortingRules.forEach(function (rule) {
        out.sort(function (a, b) {
          var va = rule.getValue(a);
          var vb = rule.getValue(b);
          if (va < vb) {
            return rule.order === "asc" ? -1 : 1;
          }
          if (va > vb) {
            return rule.order === "asc" ? 1 : -1;
          }
          return 0;
        });
      });
      return out;
    };
    var sortedGroups = groups.map(function (g) {
      return _objectSpread(_objectSpread({}, g), {}, {
        items: sortItems(g.items)
      });
    }).sort(function (a, b) {
      var _iterator = _createForOfIteratorHelper(sortingRules),
        _step;
      try {
        for (_iterator.s(); !(_step = _iterator.n()).done;) {
          var rule = _step.value;
          var va = rule.getValue(a.header);
          var vb = rule.getValue(b.header);
          if (va < vb) {
            return rule.order === "asc" ? -1 : 1;
          }
          if (va > vb) {
            return rule.order === "asc" ? 1 : -1;
          }
        }
      } catch (err) {
        _iterator.e(err);
      } finally {
        _iterator.f();
      }
      return 0;
    });
    return sortedGroups;
  }, [sortingRules]);
  var applyGroupingRules = useCallback(function () {
    if (!groupingRules.length) {
      var looksPreGrouped = Array.isArray(data) && data.every(function (s) {
        return s && _typeof(s) === "object" && s.header && Array.isArray(s.items);
      });
      var _groups = looksPreGrouped ? data : [{
        header: {
          title: "All Items"
        },
        items: data,
        footer: {
          totalItems: data.length
        }
      }];
      var finalGroups = applySortingRules(_groups);
      setGroupedData(finalGroups);
      onGroupingUpdate && onGroupingUpdate(finalGroups);
      return;
    }
    var groups = groupingRules.reduce(function (acc, rule) {
      var matched = data.filter(rule.condition);
      if (matched.length > 0) {
        acc.push({
          header: _objectSpread({
            title: rule.title,
            description: rule.description,
            icon: rule.icon || undefined
          }, rule.headerMetadata || {}),
          items: matched.map(function (item) {
            return _objectSpread(_objectSpread({}, item), rule.itemMetadata || {});
          }),
          footer: _objectSpread({
            totalItems: matched.length,
            note: rule.footerNote ? rule.footerNote(matched) : "Total items in ".concat(rule.title)
          }, rule.footerMetadata || {})
        });
      }
      return acc;
    }, []);
    groups = applySortingRules(groups);
    setGroupedData(groups);
    onGroupingUpdate && onGroupingUpdate(groups);
  }, [groupingRules, data, applySortingRules, onGroupingUpdate]);
  var measureOffsets = useCallback(function () {
    var el = containerRef.current;
    if (!el) {
      return;
    }
    var baseTop = el.offsetTop;
    sectionOffsetsRef.current = (sectionRefs.current || []).map(function (node) {
      return node ? node.offsetTop - baseTop : 0;
    });
  }, []);
  var filteredData = useMemo(function () {
    var term = String(searchTerm || "").toLowerCase();
    var headerMatches = function headerMatches(header) {
      if (customHeaderFilter) {
        return customHeaderFilter(header, term);
      }
      return headerFilterKeys.some(function (k) {
        var _header$k;
        return String((_header$k = header === null || header === void 0 ? void 0 : header[k]) !== null && _header$k !== void 0 ? _header$k : "").toLowerCase().includes(term);
      });
    };
    var itemMatches = function itemMatches(item) {
      if (customItemFilter) {
        return customItemFilter(item, term);
      }
      return itemFilterKeys.some(function (k) {
        var _item$k;
        return String((_item$k = item === null || item === void 0 ? void 0 : item[k]) !== null && _item$k !== void 0 ? _item$k : "").toLowerCase().includes(term);
      });
    };
    return groupedData.map(function (section) {
      var filteredItems = section.items.filter(itemMatches);
      var matchesHeader = headerMatches(section.header);
      var keep = matchesHeader || filteredItems.length > 0;
      return keep ? _objectSpread(_objectSpread({}, section), {}, {
        filteredItems: filteredItems
      }) : null;
    }).filter(Boolean);
  }, [groupedData, searchTerm, customHeaderFilter, headerFilterKeys, customItemFilter, itemFilterKeys]);
  var findNearestIndex = useCallback(function (scrollTop) {
    var arr = sectionOffsetsRef.current;
    if (!arr.length) {
      return 0;
    }
    var lo = 0,
      hi = arr.length - 1,
      ans = 0;
    while (lo <= hi) {
      var mid = lo + hi >> 1;
      if (arr[mid] <= scrollTop) {
        ans = mid;
        lo = mid + 1;
      } else {
        hi = mid - 1;
      }
    }
    if (ans < 0) {
      return 0;
    }
    if (ans >= arr.length) {
      return arr.length - 1;
    }
    return ans;
  }, []);
  var onSectionEnter = useCallback(function (section, index) {
    setSectionHover(index);
    onSectionHovered && onSectionHovered(section, index);
  }, [onSectionHovered]);
  var onSectionLeave = useCallback(function (index) {
    setSectionHover(null);
    onSectionHovered && onSectionHovered(null, index);
  }, [onSectionHovered]);
  var onItemEnter = useCallback(function (sectionIndex, item, itemIndex) {
    setSectionItemHover({
      section: sectionIndex,
      item: itemIndex
    });
    onItemHovered && onItemHovered(item, filteredData[sectionIndex], itemIndex);
  }, [onItemHovered, filteredData]);
  var onItemLeave = useCallback(function (sectionIndex) {
    setSectionItemHover({
      section: null,
      item: null
    });
    onItemHovered && onItemHovered(null, filteredData[sectionIndex], null);
  }, [onItemHovered, filteredData]);
  var onItemClick = useCallback(function (item, section) {
    onItemSelected && onItemSelected(item, section);
  }, [onItemSelected]);
  useEffect(function () {
    applyGroupingRules();
  }, [data, groupingRules, applyGroupingRules]);
  useEffect(function () {
    if (!groupingInterval) {
      return;
    }
    var id = setInterval(applyGroupingRules, groupingInterval);
    return function () {
      return clearInterval(id);
    };
  }, [groupingInterval, applyGroupingRules]);
  useEffect(function () {
    var activating = collapseAllSections && !pCollapsedAllSections.current;
    if (activating && groupedData.length > 0) {
      var next = {};
      groupedData.forEach(function (_, i) {
        next[i] = true;
      });
      setCollapsedSections(next);
      pCollapsedAllSections.current = collapseAllSections;
    }
    if (!collapseAllSections) {
      pCollapsedAllSections.current = false;
    }
  }, [collapseAllSections, groupedData]);
  useEffect(function () {
    var activating = expandAllSections && !pExpandedAllSections.current;
    if (activating && groupedData.length > 0) {
      var next = {};
      groupedData.forEach(function (_, i) {
        next[i] = false;
      });
      setCollapsedSections(next);
      pExpandedAllSections.current = expandAllSections;
    }
    if (!expandAllSections) {
      pExpandedAllSections.current = false;
    }
  }, [expandAllSections, groupedData]);
  useEffect(function () {
    if (!autoSectionCollapseMap || _typeof(autoSectionCollapseMap) !== "object") {
      return;
    }
    var prev = prevCollapseMapRef.current;
    var changed = JSON.stringify(autoSectionCollapseMap) !== JSON.stringify(prev);
    if (!changed) {
      return;
    }
    var sanitized = Object.fromEntries(Object.entries(autoSectionCollapseMap).filter(function (_ref4) {
      var _ref5 = _slicedToArray(_ref4, 2),
        _ = _ref5[0],
        v = _ref5[1];
      return v !== null;
    }));
    setCollapsedSections(function (cur) {
      var next = _objectSpread(_objectSpread({}, cur), sanitized);
      if (resetPreviouslyAutoExpandedSections && prev) {
        for (var _i = 0, _Object$entries = Object.entries(prev); _i < _Object$entries.length; _i++) {
          var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
            idx = _Object$entries$_i[0],
            wasExpanded = _Object$entries$_i[1];
          var isAutoExpanded = wasExpanded === false;
          var nowOmitted = !(idx in sanitized);
          var stillExpanded = cur[idx] === false;
          if (isAutoExpanded && nowOmitted && stillExpanded) {
            next[idx] = true;
          }
        }
      }
      return next;
    });
    prevCollapseMapRef.current = autoSectionCollapseMap;
  }, [autoSectionCollapseMap, resetPreviouslyAutoExpandedSections]);
  useEffect(function () {
    measureOffsets();
    var ro = new ResizeObserver(function () {
      measureOffsets();
    });
    if (containerRef.current) {
      ro.observe(containerRef.current);
    }
    sectionRefs.current.forEach(function (n) {
      if (n) {
        ro.observe(n);
      }
    });
    return function () {
      return ro.disconnect();
    };
  }, [filteredData, collapsedSections, stickyHeaderHeight, measureOffsets]);
  useEffect(function () {
    if (!snapping || !containerRef.current) {
      return;
    }
    var el = containerRef.current;
    var idleMs = Math.max(60, Math.round(snapIdleMs !== null && snapIdleMs !== void 0 ? snapIdleMs : snappingDebounce));
    var cancelSnap = function cancelSnap() {
      snappingRef.current = false;
      if (rafIdRef.current) {
        cancelAnimationFrame(rafIdRef.current);
        rafIdRef.current = null;
      }
    };
    var onUserOverride = function onUserOverride() {
      cancelSnap();
    };
    var onScroll = function onScroll() {
      lastUserScrollAtRef.current = performance.now();
      if (snappingRef.current) {
        return;
      }
      if (rafIdRef.current) {
        cancelAnimationFrame(rafIdRef.current);
      }
      rafIdRef.current = requestAnimationFrame(function () {
        var tick = function tick() {
          var _sectionOffsetsRef$cu;
          var now = performance.now();
          var idle = now - lastUserScrollAtRef.current >= idleMs;
          if (!idle) {
            rafIdRef.current = requestAnimationFrame(tick);
            return;
          }
          var currentTop = el.scrollTop + stickyHeaderHeight;
          var idx = findNearestIndex(currentTop);
          var targetTop = Math.max(0, ((_sectionOffsetsRef$cu = sectionOffsetsRef.current[idx]) !== null && _sectionOffsetsRef$cu !== void 0 ? _sectionOffsetsRef$cu : 0) - stickyHeaderHeight);
          var delta = Math.abs(targetTop - el.scrollTop);
          if (delta <= snapThresholdPx) {
            snappingRef.current = true;
            el.scrollTo({
              behavior: delta > minDistanceForSmooth ? "smooth" : "auto",
              top: targetTop
            });
            var t = setTimeout(function () {
              snappingRef.current = false;
            }, 220);
            var clear = function clear() {
              clearTimeout(t);
              snappingRef.current = false;
            };
            el.addEventListener("touchstart", clear, {
              once: true,
              passive: true
            });
            el.addEventListener("wheel", clear, {
              once: true,
              passive: true
            });
          }
        };
        tick();
      });
    };
    el.addEventListener("touchstart", onUserOverride, {
      passive: true
    });
    el.addEventListener("wheel", onUserOverride, {
      passive: true
    });
    el.addEventListener("scroll", onScroll, {
      passive: true
    });
    return function () {
      el.removeEventListener("touchstart", onUserOverride, {
        passive: true
      });
      el.removeEventListener("wheel", onUserOverride, {
        passive: true
      });
      el.removeEventListener("scroll", onScroll, {
        passive: true
      });
      cancelSnap();
    };
  }, [snapping, snappingDebounce, snapIdleMs, snapThresholdPx, minDistanceForSmooth, stickyHeaderHeight, findNearestIndex]);
  return /*#__PURE__*/React.createElement("div", {
    ref: containerRef,
    style: containerStyle
  }, filteredData.map(function (section, sIndex) {
    var sectionKey = sectionKeyExtractor(section, sIndex);
    return /*#__PURE__*/React.createElement(GroupedSection, {
      key: sectionKey,
      groupedListSectionFooterContainerHoverConfigurationSettings: groupedListSectionFooterContainerHoverConfigurationSettings,
      groupedListSectionHeaderContainerHoverConfigurationSettings: groupedListSectionHeaderContainerHoverConfigurationSettings,
      groupedListSectionCollapseButtonHoverConfigurationSettings: groupedListSectionCollapseButtonHoverConfigurationSettings,
      groupedListSectionFooterContainerConfigurationSettings: groupedListSectionFooterContainerConfigurationSettings,
      groupedListSectionHeaderContainerConfigurationSettings: groupedListSectionHeaderContainerConfigurationSettings,
      groupedListSectionContainerHoverConfigurationSettings: groupedListSectionContainerHoverConfigurationSettings,
      groupedListSectionCollapseButtonConfigurationSettings: groupedListSectionCollapseButtonConfigurationSettings,
      groupedListSectionContentHoverConfigurationSettings: groupedListSectionContentHoverConfigurationSettings,
      groupedListSectionContainerConfigurationSettings: groupedListSectionContainerConfigurationSettings,
      groupedListSectionContentConfigurationSettings: groupedListSectionContentConfigurationSettings,
      groupedListSectionConfigurationSettings: groupedListSectionConfigurationSettings,
      groupedListSectionHeaderContainerConfigurations: groupedListSectionHeaderContainerConfigurations,
      groupedListSectionFooterContainerConfigurations: groupedListSectionFooterContainerConfigurations,
      groupedListSectionCollapseButtonConfigurations: groupedListSectionCollapseButtonConfigurations,
      groupedListSectionContainerConfigurations: groupedListSectionContainerConfigurations,
      groupedListSectionConfigurations: groupedListSectionConfigurations,
      groupedListSectionCollapsedButtonIconHoverColor: groupedListSectionCollapsedButtonIconHoverColor,
      groupedListSectionCollapsedButtonIconColor: groupedListSectionCollapsedButtonIconColor,
      groupedListSectionCollapsedButtonIcon: groupedListSectionCollapsedButtonIcon,
      groupedListSectionCollapseButtonIcon: groupedListSectionCollapseButtonIcon,
      itemKeyExtractor: itemKeyExtractor,
      onSectionCollapseButtonClicked: onSectionCollapseButtonClicked,
      handleToggleCollapse: handleToggleCollapse,
      onSectionEnter: onSectionEnter,
      onSectionLeave: onSectionLeave,
      onItemEnter: onItemEnter,
      onItemLeave: onItemLeave,
      onItemClick: onItemClick,
      collapseButtonRenderer: collapseButtonRenderer,
      renderSectionHeader: renderSectionHeader,
      renderSectionFooter: renderSectionFooter,
      renderCell: renderCell,
      setCollapseButtonHover: setCollapseButtonHover,
      collapseButtonHover: collapseButtonHover,
      collapsibleSections: collapsibleSections,
      collapsedSections: collapsedSections,
      sectionItemHover: sectionItemHover,
      stickyHeaders: stickyHeaders,
      sectionHover: sectionHover,
      sectionRefs: sectionRefs,
      section: section,
      sIndex: sIndex,
      layout: layout
    });
  }));
}
;
export default HUDGroupedList;