react-pivottable-plus 1.0.0

package/PivotTableUI.js

@@ -0,0 +1,786 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Dropdown = exports.DraggableAttribute = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"));
+var _Utilities = require("./Utilities");
+var _PivotTable = _interopRequireDefault(require("./PivotTable"));
+var _reactDraggable = _interopRequireDefault(require("react-draggable"));
+var _core = require("@dnd-kit/core");
+var _sortable = require("@dnd-kit/sortable");
+var _utilities = require("@dnd-kit/utilities");
+var _excluded = ["id"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+// ─── DraggableAttribute ────────────────────────────────────────────────────────
+
+var DraggableAttribute = exports.DraggableAttribute = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
+  var name = _ref.name,
+    attrValues = _ref.attrValues,
+    valueFilter = _ref.valueFilter,
+    sorter = _ref.sorter,
+    menuLimit = _ref.menuLimit,
+    setValuesInFilter = _ref.setValuesInFilter,
+    addValuesToFilter = _ref.addValuesToFilter,
+    moveFilterBoxToTop = _ref.moveFilterBoxToTop,
+    removeValuesFromFilter = _ref.removeValuesFromFilter,
+    zIndex = _ref.zIndex,
+    dragHandleProps = _ref.dragHandleProps,
+    isDragging = _ref.isDragging;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var _useState3 = (0, _react.useState)(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    filterText = _useState4[0],
+    setFilterText = _useState4[1];
+  var nodeRef = (0, _react.useRef)(null);
+  var toggleValue = function toggleValue(value) {
+    if (value in valueFilter) {
+      removeValuesFromFilter(name, [value]);
+    } else {
+      addValuesToFilter(name, [value]);
+    }
+  };
+  var matchesFilter = function matchesFilter(x) {
+    return x.toLowerCase().trim().includes(filterText.toLowerCase().trim());
+  };
+  var selectOnly = function selectOnly(e, value) {
+    e.stopPropagation();
+    setValuesInFilter(name, Object.keys(attrValues).filter(function (y) {
+      return y !== value;
+    }));
+  };
+  var getFilterBox = function getFilterBox() {
+    var showMenu = Object.keys(attrValues).length < menuLimit;
+    var values = Object.keys(attrValues);
+    var shown = values.filter(matchesFilter).sort(sorter);
+    return /*#__PURE__*/_react["default"].createElement(_reactDraggable["default"], {
+      handle: ".pvtDragHandle",
+      nodeRef: nodeRef
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      ref: nodeRef,
+      className: "pvtFilterBox",
+      style: {
+        display: 'block',
+        cursor: 'initial',
+        zIndex: zIndex
+      },
+      onClick: function onClick() {
+        return moveFilterBoxToTop(name);
+      }
+    }, /*#__PURE__*/_react["default"].createElement("a", {
+      onClick: function onClick() {
+        return setOpen(false);
+      },
+      className: "pvtCloseX"
+    }, "\xD7"), /*#__PURE__*/_react["default"].createElement("span", {
+      className: "pvtDragHandle"
+    }, "\u2630"), /*#__PURE__*/_react["default"].createElement("h4", null, name), showMenu || /*#__PURE__*/_react["default"].createElement("p", null, "(too many values to show)"), showMenu && /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("input", {
+      type: "text",
+      placeholder: "Filter values",
+      className: "pvtSearch",
+      value: filterText,
+      onChange: function onChange(e) {
+        return setFilterText(e.target.value);
+      }
+    }), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("a", {
+      role: "button",
+      className: "pvtButton",
+      onClick: function onClick() {
+        return removeValuesFromFilter(name, Object.keys(attrValues).filter(matchesFilter));
+      }
+    }, "Select ", values.length === shown.length ? 'All' : shown.length), ' ', /*#__PURE__*/_react["default"].createElement("a", {
+      role: "button",
+      className: "pvtButton",
+      onClick: function onClick() {
+        return addValuesToFilter(name, Object.keys(attrValues).filter(matchesFilter));
+      }
+    }, "Deselect ", values.length === shown.length ? 'All' : shown.length)), showMenu && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "pvtCheckContainer"
+    }, shown.map(function (x) {
+      return /*#__PURE__*/_react["default"].createElement("p", {
+        key: x,
+        onClick: function onClick() {
+          return toggleValue(x);
+        },
+        className: x in valueFilter ? '' : 'selected'
+      }, /*#__PURE__*/_react["default"].createElement("a", {
+        className: "pvtOnly",
+        onClick: function onClick(e) {
+          return selectOnly(e, x);
+        }
+      }, "only"), /*#__PURE__*/_react["default"].createElement("a", {
+        className: "pvtOnlySpacer"
+      }, "\xA0"), x === '' ? /*#__PURE__*/_react["default"].createElement("em", null, "null") : x);
+    }))));
+  };
+  var toggleFilterBox = function toggleFilterBox() {
+    setOpen(function (o) {
+      return !o;
+    });
+    moveFilterBoxToTop(name);
+  };
+  var filtered = Object.keys(valueFilter).length !== 0 ? 'pvtFilteredAttribute' : '';
+  return /*#__PURE__*/_react["default"].createElement("li", {
+    ref: ref,
+    "data-id": name,
+    style: {
+      opacity: isDragging ? 0.4 : 1
+    }
+  }, /*#__PURE__*/_react["default"].createElement("span", _extends({
+    className: 'pvtAttr ' + filtered
+  }, dragHandleProps), name, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "pvtTriangle",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      toggleFilterBox();
+    }
+  }, ' ', "\u25BE")), open ? getFilterBox() : null);
+});
+DraggableAttribute.displayName = 'DraggableAttribute';
+
+// ─── SortableAttribute: wrapper que conecta dnd-kit con DraggableAttribute ────
+
+var SortableAttribute = function SortableAttribute(_ref2) {
+  var id = _ref2.id,
+    rest = _objectWithoutProperties(_ref2, _excluded);
+  var _useSortable = (0, _sortable.useSortable)({
+      id: id
+    }),
+    attributes = _useSortable.attributes,
+    listeners = _useSortable.listeners,
+    setNodeRef = _useSortable.setNodeRef,
+    transform = _useSortable.transform,
+    transition = _useSortable.transition,
+    isDragging = _useSortable.isDragging;
+  var style = {
+    transform: _utilities.CSS.Transform.toString(transform),
+    transition: transition
+  };
+  return /*#__PURE__*/_react["default"].createElement(DraggableAttribute, _extends({
+    ref: setNodeRef,
+    name: id,
+    isDragging: isDragging,
+    dragHandleProps: _objectSpread(_objectSpread(_objectSpread({}, attributes), listeners), {}, {
+      style: style
+    })
+  }, rest));
+};
+
+// ─── Dropdown ─────────────────────────────────────────────────────────────────
+
+var Dropdown = exports.Dropdown = function Dropdown(_ref3) {
+  var _ref3$zIndex = _ref3.zIndex,
+    zIndex = _ref3$zIndex === void 0 ? 1 : _ref3$zIndex,
+    _ref3$open = _ref3.open,
+    open = _ref3$open === void 0 ? false : _ref3$open,
+    toggle = _ref3.toggle,
+    current = _ref3.current,
+    _ref3$values = _ref3.values,
+    values = _ref3$values === void 0 ? [] : _ref3$values,
+    setValue = _ref3.setValue;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "pvtDropdown",
+    style: {
+      zIndex: zIndex
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      toggle();
+    },
+    className: 'pvtDropdownValue pvtDropdownCurrent ' + (open ? 'pvtDropdownCurrentOpen' : ''),
+    role: "button"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "pvtDropdownIcon"
+  }, open ? '×' : '▾'), current || /*#__PURE__*/_react["default"].createElement("span", null, "\xA0")), open && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "pvtDropdownMenu"
+  }, values.map(function (r) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: r,
+      role: "button",
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        if (current === r) toggle();else {
+          setValue(r);
+          toggle();
+        }
+      },
+      className: 'pvtDropdownValue ' + (r === current ? 'pvtDropdownActiveValue' : '')
+    }, r);
+  })));
+};
+
+// ─── DnDCell: lista sortable con dnd-kit ──────────────────────────────────────
+
+var DnDCell = function DnDCell(_ref4) {
+  var id = _ref4.id,
+    items = _ref4.items,
+    classes = _ref4.classes,
+    state = _ref4.state,
+    valueFilter = _ref4.valueFilter,
+    sorters = _ref4.sorters,
+    menuLimit = _ref4.menuLimit,
+    setValuesInFilter = _ref4.setValuesInFilter,
+    addValuesToFilter = _ref4.addValuesToFilter,
+    moveFilterBoxToTop = _ref4.moveFilterBoxToTop,
+    removeValuesFromFilter = _ref4.removeValuesFromFilter,
+    isHorizontal = _ref4.isHorizontal;
+  var strategy = isHorizontal ? _sortable.horizontalListSortingStrategy : _sortable.verticalListSortingStrategy;
+  return /*#__PURE__*/_react["default"].createElement("td", {
+    className: classes
+  }, /*#__PURE__*/_react["default"].createElement(_sortable.SortableContext, {
+    id: id,
+    items: items,
+    strategy: strategy
+  }, /*#__PURE__*/_react["default"].createElement("ul", {
+    style: {
+      listStyle: 'none',
+      padding: 0,
+      margin: 0
+    }
+  }, items.map(function (x) {
+    return /*#__PURE__*/_react["default"].createElement(SortableAttribute, {
+      key: x,
+      id: x,
+      attrValues: state.attrValues[x] || {},
+      valueFilter: valueFilter[x] || {},
+      sorter: (0, _Utilities.getSort)(sorters, x),
+      menuLimit: menuLimit,
+      setValuesInFilter: setValuesInFilter,
+      addValuesToFilter: addValuesToFilter,
+      moveFilterBoxToTop: moveFilterBoxToTop,
+      removeValuesFromFilter: removeValuesFromFilter,
+      zIndex: state.zIndices[x] || state.maxZIndex
+    });
+  }))));
+};
+
+// ─── PivotTableUI ─────────────────────────────────────────────────────────────
+
+var PivotTableUI = function PivotTableUI(props) {
+  var _aggregators$aggregat, _aggregators$aggregat2, _aggregators$aggregat3, _aggregators$aggregat4;
+  var _useState5 = (0, _react.useState)({
+      unusedOrder: [],
+      zIndices: {},
+      maxZIndex: 1000,
+      openDropdown: false,
+      attrValues: {},
+      materializedInput: [],
+      data: null
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    state = _useState6[0],
+    setState = _useState6[1];
+
+  // activeId: el atributo que se está arrastrando
+  var _useState7 = (0, _react.useState)(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    activeId = _useState8[0],
+    setActiveId = _useState8[1];
+  var data = props.data,
+    onChange = props.onChange,
+    rows = props.rows,
+    cols = props.cols,
+    aggregatorName = props.aggregatorName,
+    aggregators = props.aggregators,
+    vals = props.vals,
+    rendererName = props.rendererName,
+    renderers = props.renderers,
+    valueFilter = props.valueFilter,
+    sorters = props.sorters,
+    menuLimit = props.menuLimit,
+    unusedOrientationCutoff = props.unusedOrientationCutoff,
+    hiddenAttributes = props.hiddenAttributes,
+    hiddenFromAggregators = props.hiddenFromAggregators,
+    hiddenFromDragDrop = props.hiddenFromDragDrop,
+    pagination = props.pagination,
+    page = props.page,
+    pageSize = props.pageSize,
+    rowOrder = props.rowOrder,
+    colOrder = props.colOrder,
+    derivedAttributes = props.derivedAttributes;
+  var onChangeRef = (0, _react.useRef)(onChange);
+  (0, _react.useEffect)(function () {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+
+  // ── Materializar datos ───────────────────────────────────────────────────────
+  (0, _react.useEffect)(function () {
+    if (state.data === data) return;
+    var newState = {
+      data: data,
+      attrValues: {},
+      materializedInput: []
+    };
+    var recordsProcessed = 0;
+    _Utilities.PivotData.forEachRecord(data, derivedAttributes, function (record) {
+      newState.materializedInput.push(record);
+      for (var _i = 0, _Object$keys = Object.keys(record); _i < _Object$keys.length; _i++) {
+        var attr = _Object$keys[_i];
+        if (!(attr in newState.attrValues)) {
+          newState.attrValues[attr] = {};
+          if (recordsProcessed > 0) newState.attrValues[attr]["null"] = recordsProcessed;
+        }
+      }
+      for (var _attr in newState.attrValues) {
+        var value = _attr in record ? record[_attr] : 'null';
+        if (!(value in newState.attrValues[_attr])) newState.attrValues[_attr][value] = 0;
+        newState.attrValues[_attr][value]++;
+      }
+      recordsProcessed++;
+    });
+    setState(function (s) {
+      return _objectSpread(_objectSpread({}, s), newState);
+    });
+  }, [data, derivedAttributes, state.data]);
+
+  // ── Helpers ──────────────────────────────────────────────────────────────────
+  var handleDuplicates = function handleDuplicates(newAttrs, existingAttrs) {
+    if (!newAttrs || !existingAttrs) return existingAttrs || [];
+    var dups = newAttrs.filter(function (item) {
+      return existingAttrs.includes(item);
+    });
+    return dups.length > 0 ? existingAttrs.filter(function (item) {
+      return !dups.includes(item);
+    }) : existingAttrs;
+  };
+  var sendPropUpdate = (0, _react.useCallback)(function (command) {
+    var _onChangeRef$current;
+    var newProps = (0, _immutabilityHelper["default"])(props, command);
+    (_onChangeRef$current = onChangeRef.current) === null || _onChangeRef$current === void 0 || _onChangeRef$current.call(onChangeRef, newProps);
+  }, [props]);
+  var propUpdater = (0, _react.useCallback)(function (key) {
+    return function (value) {
+      var updateObj = _defineProperty({}, key, {
+        $set: value
+      });
+      if (key === 'rows') {
+        var updatedCols = handleDuplicates(value, cols);
+        if (updatedCols.length !== cols.length) updateObj.cols = {
+          $set: updatedCols
+        };
+      } else if (key === 'cols') {
+        var updatedRows = handleDuplicates(value, rows);
+        if (updatedRows.length !== rows.length) updateObj.rows = {
+          $set: updatedRows
+        };
+      }
+      sendPropUpdate(updateObj);
+    };
+  }, [cols, rows, sendPropUpdate]);
+  var setValuesInFilter = (0, _react.useCallback)(function (attribute, values) {
+    sendPropUpdate({
+      valueFilter: _defineProperty({}, attribute, {
+        $set: values.reduce(function (r, v) {
+          r[v] = true;
+          return r;
+        }, {})
+      })
+    });
+  }, [sendPropUpdate]);
+  var addValuesToFilter = (0, _react.useCallback)(function (attribute, values) {
+    if (attribute in valueFilter) {
+      sendPropUpdate({
+        valueFilter: _defineProperty({}, attribute, values.reduce(function (r, v) {
+          r[v] = {
+            $set: true
+          };
+          return r;
+        }, {}))
+      });
+    } else {
+      setValuesInFilter(attribute, values);
+    }
+  }, [sendPropUpdate, valueFilter, setValuesInFilter]);
+  var removeValuesFromFilter = (0, _react.useCallback)(function (attribute, values) {
+    sendPropUpdate({
+      valueFilter: _defineProperty({}, attribute, {
+        $unset: values
+      })
+    });
+  }, [sendPropUpdate]);
+  var moveFilterBoxToTop = (0, _react.useCallback)(function (attribute) {
+    setState(function (s) {
+      return _objectSpread(_objectSpread({}, s), {}, {
+        maxZIndex: s.maxZIndex + 1,
+        zIndices: _objectSpread(_objectSpread({}, s.zIndices), {}, _defineProperty({}, attribute, s.maxZIndex + 1))
+      });
+    });
+  }, []);
+
+  // ── Listas de atributos ──────────────────────────────────────────────────────
+  var unusedAttrs = Object.keys(state.attrValues).filter(function (e) {
+    return e && e.trim() !== '' && !rows.includes(e) && !cols.includes(e) && !hiddenAttributes.includes(e) && !hiddenFromDragDrop.includes(e);
+  }).sort((0, _Utilities.sortAs)(state.unusedOrder));
+  var unusedLength = unusedAttrs.reduce(function (r, e) {
+    return r + e.length;
+  }, 0);
+  var horizUnused = unusedLength < unusedOrientationCutoff;
+  var colAttrs = cols.filter(function (e) {
+    return e && e.trim() !== '' && !hiddenAttributes.includes(e) && !hiddenFromDragDrop.includes(e);
+  });
+  var rowAttrs = rows.filter(function (e) {
+    return e && e.trim() !== '' && !hiddenAttributes.includes(e) && !hiddenFromDragDrop.includes(e);
+  });
+
+  // ── Mapa de zona → lista actual ──────────────────────────────────────────────
+  // Para saber a qué lista pertenece cada atributo durante el drag
+  var getZoneOfItem = function getZoneOfItem(id) {
+    if (rowAttrs.includes(id)) return 'rows';
+    if (colAttrs.includes(id)) return 'cols';
+    if (unusedAttrs.includes(id)) return 'unused';
+    return null;
+  };
+  var getListByZone = function getListByZone(zone) {
+    if (zone === 'rows') return rowAttrs;
+    if (zone === 'cols') return colAttrs;
+    if (zone === 'unused') return unusedAttrs;
+    return [];
+  };
+  var getUpdaterByZone = function getUpdaterByZone(zone) {
+    if (zone === 'rows') return propUpdater('rows');
+    if (zone === 'cols') return propUpdater('cols');
+    if (zone === 'unused') return function (order) {
+      return setState(function (s) {
+        return _objectSpread(_objectSpread({}, s), {}, {
+          unusedOrder: order
+        });
+      });
+    };
+    return function () {};
+  };
+
+  // ── Sensores dnd-kit ─────────────────────────────────────────────────────────
+  var sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.PointerSensor, {
+    activationConstraint: {
+      distance: 5
+    }
+  }));
+
+  // ── Handlers de dnd-kit ──────────────────────────────────────────────────────
+  var handleDragStart = function handleDragStart(_ref5) {
+    var active = _ref5.active;
+    setActiveId(active.id);
+  };
+  var handleDragOver = function handleDragOver(_ref6) {
+    var _over$data$current$so, _over$data;
+    var active = _ref6.active,
+      over = _ref6.over;
+    if (!over) return;
+    var activeZone = getZoneOfItem(active.id);
+    var overZone = (_over$data$current$so = (_over$data = over.data) === null || _over$data === void 0 || (_over$data = _over$data.current) === null || _over$data === void 0 || (_over$data = _over$data.sortable) === null || _over$data === void 0 ? void 0 : _over$data.containerId) !== null && _over$data$current$so !== void 0 ? _over$data$current$so : getZoneOfItem(over.id);
+
+    // Guardia 1: Ambos deben tener zona y ser distintas
+    if (!activeZone || !overZone || activeZone === overZone) return;
+
+    // Mover entre zonas en tiempo real (mientras se arrastra)
+    var activeList = _toConsumableArray(getListByZone(activeZone));
+    var overList = _toConsumableArray(getListByZone(overZone));
+    var activeIndex = activeList.indexOf(active.id);
+    var overIndex = overList.indexOf(over.id);
+
+    // Guardia 2: El item debe existir en la lista de origen (evita splice -1)
+    if (activeIndex === -1) return;
+
+    // Guardia 3: Evitar duplicados en la lista de destino
+    if (overList.includes(active.id)) return;
+    activeList.splice(activeIndex, 1);
+    var insertAt = overIndex >= 0 ? overIndex : overList.length;
+    overList.splice(insertAt, 0, active.id);
+
+    // Actualizar ambas listas
+    var updateActiveZone = getUpdaterByZone(activeZone);
+    var updateOverZone = getUpdaterByZone(overZone);
+    updateActiveZone(activeList);
+    updateOverZone(overList);
+  };
+  var handleDragEnd = function handleDragEnd(_ref7) {
+    var _over$data$current$so2, _over$data2;
+    var active = _ref7.active,
+      over = _ref7.over;
+    setActiveId(null);
+    if (!over) return;
+    var activeZone = getZoneOfItem(active.id);
+    var overZone = (_over$data$current$so2 = (_over$data2 = over.data) === null || _over$data2 === void 0 || (_over$data2 = _over$data2.current) === null || _over$data2 === void 0 || (_over$data2 = _over$data2.sortable) === null || _over$data2 === void 0 ? void 0 : _over$data2.containerId) !== null && _over$data$current$so2 !== void 0 ? _over$data$current$so2 : getZoneOfItem(over.id);
+    if (!activeZone || !overZone) return;
+    if (activeZone === overZone) {
+      // Reordenamiento dentro de la misma zona
+      var list = getListByZone(activeZone);
+      var oldIndex = list.indexOf(active.id);
+      var newIndex = list.indexOf(over.id);
+      if (oldIndex !== newIndex) {
+        getUpdaterByZone(activeZone)((0, _sortable.arrayMove)(list, oldIndex, newIndex));
+      }
+    }
+    // Si activeZone !== overZone, ya fue manejado en handleDragOver
+  };
+
+  // ── UI ───────────────────────────────────────────────────────────────────────
+  var isOpen = function isOpen(dropdown) {
+    return state.openDropdown === dropdown;
+  };
+  var numValsAllowed = ((_aggregators$aggregat = aggregators[aggregatorName]) === null || _aggregators$aggregat === void 0 || (_aggregators$aggregat2 = _aggregators$aggregat.call(aggregators, [])) === null || _aggregators$aggregat2 === void 0 || (_aggregators$aggregat2 = _aggregators$aggregat2()) === null || _aggregators$aggregat2 === void 0 ? void 0 : _aggregators$aggregat2.numInputs) || 0;
+  var aggregatorCellOutlet = (_aggregators$aggregat3 = aggregators[aggregatorName]) === null || _aggregators$aggregat3 === void 0 || (_aggregators$aggregat4 = _aggregators$aggregat3.call(aggregators, [])) === null || _aggregators$aggregat4 === void 0 || (_aggregators$aggregat4 = _aggregators$aggregat4()) === null || _aggregators$aggregat4 === void 0 ? void 0 : _aggregators$aggregat4.outlet;
+  var actualRendererName = rendererName in renderers ? rendererName : Object.keys(renderers)[0];
+  var sortIcons = {
+    key_a_to_z: {
+      rowSymbol: '↕',
+      colSymbol: '↔',
+      next: 'value_a_to_z'
+    },
+    value_a_to_z: {
+      rowSymbol: '↓',
+      colSymbol: '→',
+      next: 'value_z_to_a'
+    },
+    value_z_to_a: {
+      rowSymbol: '↑',
+      colSymbol: '←',
+      next: 'key_a_to_z'
+    }
+  };
+  var sharedCellProps = {
+    state: state,
+    valueFilter: valueFilter,
+    sorters: sorters,
+    menuLimit: menuLimit,
+    setValuesInFilter: setValuesInFilter,
+    addValuesToFilter: addValuesToFilter,
+    moveFilterBoxToTop: moveFilterBoxToTop,
+    removeValuesFromFilter: removeValuesFromFilter
+  };
+  var rendererCell = /*#__PURE__*/_react["default"].createElement("td", {
+    className: "pvtRenderers"
+  }, /*#__PURE__*/_react["default"].createElement(Dropdown, {
+    current: actualRendererName,
+    values: Object.keys(renderers),
+    open: isOpen('renderer'),
+    zIndex: isOpen('renderer') ? state.maxZIndex + 1 : 1,
+    toggle: function toggle() {
+      return setState(function (s) {
+        return _objectSpread(_objectSpread({}, s), {}, {
+          openDropdown: isOpen('renderer') ? false : 'renderer'
+        });
+      });
+    },
+    setValue: propUpdater('rendererName')
+  }));
+  var aggregatorCell = /*#__PURE__*/_react["default"].createElement("td", {
+    className: "pvtVals"
+  }, /*#__PURE__*/_react["default"].createElement(Dropdown, {
+    current: aggregatorName,
+    values: Object.keys(aggregators),
+    open: isOpen('aggregators'),
+    zIndex: isOpen('aggregators') ? state.maxZIndex + 1 : 1,
+    toggle: function toggle() {
+      return setState(function (s) {
+        return _objectSpread(_objectSpread({}, s), {}, {
+          openDropdown: isOpen('aggregators') ? false : 'aggregators'
+        });
+      });
+    },
+    setValue: propUpdater('aggregatorName')
+  }), /*#__PURE__*/_react["default"].createElement("a", {
+    role: "button",
+    className: "pvtRowOrder",
+    onClick: function onClick() {
+      return propUpdater('rowOrder')(sortIcons[rowOrder].next);
+    }
+  }, sortIcons[rowOrder].rowSymbol), /*#__PURE__*/_react["default"].createElement("a", {
+    role: "button",
+    className: "pvtColOrder",
+    onClick: function onClick() {
+      return propUpdater('colOrder')(sortIcons[colOrder].next);
+    }
+  }, sortIcons[colOrder].colSymbol), numValsAllowed > 0 && /*#__PURE__*/_react["default"].createElement("br", null), new Array(numValsAllowed).fill(null).map(function (_, i) {
+    return [/*#__PURE__*/_react["default"].createElement(Dropdown, {
+      key: i,
+      current: vals[i],
+      values: Object.keys(state.attrValues).filter(function (e) {
+        return !hiddenAttributes.includes(e) && !hiddenFromAggregators.includes(e);
+      }),
+      open: isOpen("val".concat(i)),
+      zIndex: isOpen("val".concat(i)) ? state.maxZIndex + 1 : 1,
+      toggle: function toggle() {
+        return setState(function (s) {
+          return _objectSpread(_objectSpread({}, s), {}, {
+            openDropdown: isOpen("val".concat(i)) ? false : "val".concat(i)
+          });
+        });
+      },
+      setValue: function setValue(value) {
+        return sendPropUpdate({
+          vals: {
+            $splice: [[i, 1, value]]
+          }
+        });
+      }
+    }), i + 1 !== numValsAllowed ? /*#__PURE__*/_react["default"].createElement("br", {
+      key: "br".concat(i)
+    }) : null];
+  }), aggregatorCellOutlet && aggregatorCellOutlet(data));
+  var unusedAttrsCell = /*#__PURE__*/_react["default"].createElement(DnDCell, _extends({
+    id: "unused",
+    items: unusedAttrs,
+    classes: "pvtAxisContainer pvtUnused ".concat(horizUnused ? 'pvtHorizList' : 'pvtVertList'),
+    isHorizontal: horizUnused
+  }, sharedCellProps));
+  var colAttrsCell = /*#__PURE__*/_react["default"].createElement(DnDCell, _extends({
+    id: "cols",
+    items: colAttrs,
+    classes: "pvtAxisContainer pvtHorizList pvtCols",
+    isHorizontal: true
+  }, sharedCellProps));
+  var rowAttrsCell = /*#__PURE__*/_react["default"].createElement(DnDCell, _extends({
+    id: "rows",
+    items: rowAttrs,
+    classes: "pvtAxisContainer pvtVertList pvtRows",
+    isHorizontal: false
+  }, sharedCellProps));
+
+  // Footer de paginación
+  var renderFooter = function renderFooter() {
+    var pivotData = new _Utilities.PivotData(_objectSpread(_objectSpread({}, props), {}, {
+      data: state.materializedInput
+    }));
+    var totalPivotRows = pivotData.getRowKeys().length;
+    var totalRecords = state.materializedInput.length;
+    var totalPages = Math.ceil(totalPivotRows / pageSize);
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "pvtFooter"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "pvtFooterInfo"
+    }, "Total registros: ", totalRecords, " | Filas: ", totalPivotRows), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "pvtFooterPagination"
+    }, /*#__PURE__*/_react["default"].createElement("button", {
+      className: "pvtButton",
+      disabled: page <= 1,
+      onClick: function onClick() {
+        return propUpdater('page')(1);
+      }
+    }, "\xAB"), /*#__PURE__*/_react["default"].createElement("button", {
+      className: "pvtButton",
+      disabled: page <= 1,
+      onClick: function onClick() {
+        return propUpdater('page')(page - 1);
+      }
+    }, "\u2039"), /*#__PURE__*/_react["default"].createElement("span", null, "P\xE1gina", ' ', /*#__PURE__*/_react["default"].createElement("input", {
+      type: "number",
+      className: "pvtPageInput",
+      value: page,
+      min: 1,
+      max: totalPages,
+      onChange: function onChange(e) {
+        var val = parseInt(e.target.value, 10);
+        if (val > 0 && val <= totalPages) propUpdater('page')(val);
+      }
+    }), ' ', "de ", totalPages), /*#__PURE__*/_react["default"].createElement("button", {
+      className: "pvtButton",
+      disabled: page >= totalPages,
+      onClick: function onClick() {
+        return propUpdater('page')(page + 1);
+      }
+    }, "\u203A"), /*#__PURE__*/_react["default"].createElement("button", {
+      className: "pvtButton",
+      disabled: page >= totalPages,
+      onClick: function onClick() {
+        return propUpdater('page')(totalPages);
+      }
+    }, "\xBB"), /*#__PURE__*/_react["default"].createElement("select", {
+      className: "pvtPageSize",
+      value: pageSize,
+      onChange: function onChange(e) {
+        var _onChangeRef$current2;
+        var newSize = parseInt(e.target.value, 10);
+        (_onChangeRef$current2 = onChangeRef.current) === null || _onChangeRef$current2 === void 0 || _onChangeRef$current2.call(onChangeRef, (0, _immutabilityHelper["default"])(props, {
+          pageSize: {
+            $set: newSize
+          },
+          page: {
+            $set: 1
+          }
+        }));
+      }
+    }, [10, 20, 50, 100].map(function (n) {
+      return /*#__PURE__*/_react["default"].createElement("option", {
+        key: n,
+        value: n
+      }, n, " / p\xE1g");
+    }))));
+  };
+  var outputCell = /*#__PURE__*/_react["default"].createElement("td", {
+    className: "pvtOutput"
+  }, /*#__PURE__*/_react["default"].createElement(_PivotTable["default"], (0, _immutabilityHelper["default"])(props, {
+    data: {
+      $set: state.materializedInput
+    }
+  })), pagination && renderFooter());
+  return /*#__PURE__*/_react["default"].createElement(_core.DndContext, {
+    sensors: sensors,
+    collisionDetection: _core.closestCorners,
+    onDragStart: handleDragStart,
+    onDragOver: handleDragOver,
+    onDragEnd: handleDragEnd
+  }, /*#__PURE__*/_react["default"].createElement("table", {
+    className: "pvtUi"
+  }, /*#__PURE__*/_react["default"].createElement("tbody", {
+    onClick: function onClick() {
+      return setState(function (s) {
+        return _objectSpread(_objectSpread({}, s), {}, {
+          openDropdown: false
+        });
+      });
+    }
+  }, horizUnused ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("tr", null, rendererCell, unusedAttrsCell), /*#__PURE__*/_react["default"].createElement("tr", null, aggregatorCell, colAttrsCell), /*#__PURE__*/_react["default"].createElement("tr", null, rowAttrsCell, outputCell)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("tr", null, rendererCell, aggregatorCell, colAttrsCell), /*#__PURE__*/_react["default"].createElement("tr", null, unusedAttrsCell, rowAttrsCell, outputCell)))), /*#__PURE__*/_react["default"].createElement(_core.DragOverlay, null, activeId ? /*#__PURE__*/_react["default"].createElement("ul", {
+    style: {
+      listStyle: 'none',
+      padding: 0,
+      margin: 0
+    }
+  }, /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "pvtAttr"
+  }, activeId))) : null));
+};
+PivotTableUI.propTypes = {
+  onChange: _propTypes["default"].func.isRequired,
+  hiddenAttributes: _propTypes["default"].arrayOf(_propTypes["default"].string),
+  hiddenFromAggregators: _propTypes["default"].arrayOf(_propTypes["default"].string),
+  hiddenFromDragDrop: _propTypes["default"].arrayOf(_propTypes["default"].string),
+  unusedOrientationCutoff: _propTypes["default"].number,
+  menuLimit: _propTypes["default"].number
+};
+PivotTableUI.defaultProps = {
+  hiddenAttributes: [],
+  hiddenFromAggregators: [],
+  hiddenFromDragDrop: [],
+  unusedOrientationCutoff: 85,
+  menuLimit: 500
+};
+var _default = exports["default"] = PivotTableUI;
+//# sourceMappingURL=PivotTableUI.js.map